diff --git a/.gitignore b/.gitignore
index 3a135be..97aa154 100644
--- a/.gitignore
+++ b/.gitignore
@@ -65,3 +65,4 @@ __pycache__
.design/
.vscode/
front/storybook-static
+back/bin
diff --git a/README.md b/README.md
index 0fa1767..819e609 100644
--- a/README.md
+++ b/README.md
@@ -6,38 +6,71 @@ Karideo
Run in local:
=============
-so simple...
+Start tools
+-----------
+
+Start the server basic interfaces: (DB(mySQL), Adminer)
```{.bash}
# start the Bdd interface (no big data > 50Mo)
-cd bdd
-docker-compose up -d
-# start the REST API
-cd back
-docker-compose up -d
-# start the front API
-cd ../front
-docker-compose up -d
+docker compose -f env_dev/docker-compose.yaml up -d
```
+Start the Back-end:
+-------------------
-convert in an angular application:
-https://betterprogramming.pub/how-to-convert-your-angular-application-to-a-native-mobile-app-android-and-ios-c212b38976df
+backend is developed in JAVA
-
-Link with the external sub-library (front)
-------------------------------------------
-
-Link:
+The first step is configuring your JAVA version (or select the JVM with the OS)
```bash
-cd front
-pnpm run link_kar_cw
+export PATH=$(ls -d --color=never /usr/lib/jvm/java-2*-openjdk)/bin:$PATH
```
-un-link:
+Install the dependency:
+```bash
+mvn install
+```
+
+Run the test
+```bash
+mvn test
+```
+
+Install it for external use
+```bash
+mvn install
+```
+
+Execute the local server:
+```bash
+mvn exec:java@dev-mode
+```
+
+Start the Front-end:
+--------------------
+
+backend is developed in JAVA
```bash
cd front
-pnpm run unlink_kar_cw
+pnpm install
+pnpm dev
+```
+
+Display the result:
+-------------------
+
+[show the webpage: http://localhost:4203](http://localhost:4203)
+
+Some other dev tools:
+=====================
+
+Format code:
+------------
+
+```bash
+export PATH=$(ls -d --color=never /usr/lib/jvm/java-2*-openjdk)/bin:$PATH
+mvn formatter:format
+mvn test
```
Tools in production mode
@@ -89,4 +122,4 @@ export TAG_DOCKER=latest
export REGISTRY_ADDRESS=gitea.atria-soft.org
docker build -t ${REGISTRY_ADDRESS}/kangaroo-and-rabbit/karusic:${TAG_DOCKER} .
docker push ${REGISTRY_ADDRESS}/kangaroo-and-rabbit/karusic:${TAG_DOCKER}
-```
\ No newline at end of file
+```
diff --git a/back/pom.xml b/back/pom.xml
index 93b07e6..865ead1 100644
--- a/back/pom.xml
+++ b/back/pom.xml
@@ -104,9 +104,38 @@
org.codehaus.mojo
exec-maven-plugin
- 1.4.0
+ 3.2.0
+
+
+ prod-mode
+
+ java
+
+
+ org.kar.karusic.WebLauncher
+
+
+
+ dev-mode
+
+ java
+
+
+ org.kar.karusic.WebLauncherLocal
+
+
+
+ generate-api
+
+ java
+
+
+ org.kar.karusic.GenerateApi
+
+
+
- org.kar.karusic.WebLauncher
+
diff --git a/back/src/org/kar/karusic/GenerateApi.java b/back/src/org/kar/karusic/GenerateApi.java
new file mode 100644
index 0000000..2508d10
--- /dev/null
+++ b/back/src/org/kar/karusic/GenerateApi.java
@@ -0,0 +1,17 @@
+package org.kar.karusic;
+
+import org.kar.karusic.migration.Initialization;
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+
+public class GenerateApi {
+ private final static Logger LOGGER = LoggerFactory.getLogger(GenerateApi.class);
+
+ private GenerateApi() {}
+
+ public static void main(final String[] args) throws Exception {
+ LOGGER.info("Generate API");
+ Initialization.generateObjects();
+ LOGGER.info("STOP the REST server.");
+ }
+}
diff --git a/back/src/org/kar/karusic/WebLauncherLocal.java b/back/src/org/kar/karusic/WebLauncherLocal.java
index 538cc43..865449f 100755
--- a/back/src/org/kar/karusic/WebLauncherLocal.java
+++ b/back/src/org/kar/karusic/WebLauncherLocal.java
@@ -1,22 +1,9 @@
package org.kar.karusic;
-import java.util.List;
import java.util.logging.LogManager;
-import org.kar.archidata.api.DataResource;
-import org.kar.archidata.api.ProxyResource;
import org.kar.archidata.exception.DataAccessException;
-import org.kar.archidata.externalRestApi.AnalyzeApi;
-import org.kar.archidata.externalRestApi.TsGenerateApi;
import org.kar.archidata.tools.ConfigBaseVariable;
-import org.kar.karusic.api.AlbumResource;
-import org.kar.karusic.api.ArtistResource;
-import org.kar.karusic.api.Front;
-import org.kar.karusic.api.GenderResource;
-import org.kar.karusic.api.HealthCheck;
-import org.kar.karusic.api.PlaylistResource;
-import org.kar.karusic.api.TrackResource;
-import org.kar.karusic.api.UserResource;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.slf4j.bridge.SLF4JBridgeHandler;
@@ -26,22 +13,12 @@ public class WebLauncherLocal extends WebLauncher {
private WebLauncherLocal() {}
- public static void generateObjects() throws Exception {
- LOGGER.info("Generate APIs");
- final List> listOfResources = List.of(AlbumResource.class, ArtistResource.class, Front.class, GenderResource.class, HealthCheck.class, PlaylistResource.class, UserResource.class,
- TrackResource.class, DataResource.class, ProxyResource.class);
- final AnalyzeApi api = new AnalyzeApi();
- api.addAllApi(listOfResources);
- TsGenerateApi.generateApi(api, "../front/src/back-api/");
- LOGGER.info("Generate APIs (DONE)");
- }
-
public static void main(final String[] args) throws Exception {
// Loop-back of logger JDK logging API to SLF4J
LogManager.getLogManager().reset();
SLF4JBridgeHandler.install();
// Generate the APIs in type-script
- generateObjects();
+ Initialization.generateObjects();
final WebLauncherLocal launcher = new WebLauncherLocal();
launcher.process();
launcher.LOGGER.info("end-configure the server & wait finish process:");
diff --git a/back/src/org/kar/karusic/migration/Initialization.java b/back/src/org/kar/karusic/migration/Initialization.java
index 7ebbcf4..ff670cf 100644
--- a/back/src/org/kar/karusic/migration/Initialization.java
+++ b/back/src/org/kar/karusic/migration/Initialization.java
@@ -2,10 +2,22 @@ package org.kar.karusic.migration;
import java.util.List;
+import org.kar.archidata.api.DataResource;
+import org.kar.archidata.api.ProxyResource;
import org.kar.archidata.dataAccess.DBAccess;
+import org.kar.archidata.externalRestApi.AnalyzeApi;
+import org.kar.archidata.externalRestApi.TsGenerateApi;
import org.kar.archidata.migration.MigrationSqlStep;
import org.kar.archidata.model.Data;
import org.kar.archidata.model.User;
+import org.kar.karusic.api.AlbumResource;
+import org.kar.karusic.api.ArtistResource;
+import org.kar.karusic.api.Front;
+import org.kar.karusic.api.GenderResource;
+import org.kar.karusic.api.HealthCheck;
+import org.kar.karusic.api.PlaylistResource;
+import org.kar.karusic.api.TrackResource;
+import org.kar.karusic.api.UserResource;
import org.kar.karusic.model.Album;
import org.kar.karusic.model.Artist;
import org.kar.karusic.model.Gender;
@@ -25,6 +37,16 @@ public class Initialization extends MigrationSqlStep {
return "Initialization";
}
+ public static void generateObjects() throws Exception {
+ LOGGER.info("Generate APIs");
+ final List> listOfResources = List.of(AlbumResource.class, ArtistResource.class, Front.class, GenderResource.class, HealthCheck.class, PlaylistResource.class, UserResource.class,
+ TrackResource.class, DataResource.class, ProxyResource.class);
+ final AnalyzeApi api = new AnalyzeApi();
+ api.addAllApi(listOfResources);
+ TsGenerateApi.generateApi(api, "../front/src/back-api/");
+ LOGGER.info("Generate APIs (DONE)");
+ }
+
@Override
public void generateStep() throws Exception {
for (final Class clazz : CLASSES_BASE) {
diff --git a/front/.storybook/preview.tsx b/front/.storybook/preview.tsx
index 9f3feba..5e92235 100644
--- a/front/.storybook/preview.tsx
+++ b/front/.storybook/preview.tsx
@@ -4,23 +4,11 @@ import { Box } from '@chakra-ui/react';
import { ChakraProvider } from '@chakra-ui/react';
import { MemoryRouter } from 'react-router-dom';
-import theme from '../src/theme';
-
-// .storybook/preview.js
-export const parameters = {
- options: {
- storySort: {
- order: ['StyleGuide', 'Components', 'Fields', 'App Layout'],
- },
- },
- actions: {},
- layout: 'fullscreen',
- backgrounds: { disable: true, grid: { disable: true } },
- chakra: {
- theme,
- },
-};
+import { ColorModeProvider } from '../src/components/ui/color-mode';
+import { Toaster } from '../src/components/ui/toaster';
+import { systemTheme } from '../src/theme/theme';
+// .
const DocumentationWrapper = ({ children }) => {
return (
@@ -31,13 +19,16 @@ const DocumentationWrapper = ({ children }) => {
export const decorators = [
(Story, context) => (
-
- {/* Using MemoryRouter to avoid route clashing with Storybook */}
-
-
-
-
-
-
+
+
+ {/* Using MemoryRouter to avoid route clashing with Storybook */}
+
+
+
+
+
+
+
+
),
];
diff --git a/front/app-build.json b/front/app-build.json
deleted file mode 100644
index 753b2a4..0000000
--- a/front/app-build.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "display": "2025-01-14",
- "version": "0.0.1-dev\n - 2025-01-14T20:19:20+01:00",
- "commit": "0.0.1-dev\n",
- "date": "2025-01-14T20:19:20+01:00"
-}
\ No newline at end of file
diff --git a/front/build.js b/front/build.js
deleted file mode 100644
index 9d5de91..0000000
--- a/front/build.js
+++ /dev/null
@@ -1,25 +0,0 @@
-const dayjs = require('dayjs');
-
-const fs = require('fs');
-
-const generateAppBuild = () => {
- const getVersion = () => fs.readFileSync('version.txt', 'utf8');
-
- const commit = process.env.VERCEL_GIT_COMMIT_SHA
- ? process.env.VERCEL_GIT_COMMIT_SHA
- : getVersion();
-
- const appBuildContent = {
- display: `${dayjs().format('YYYY-MM-DD')}`,
- version: `${commit} - ${dayjs().format()}`,
- commit,
- date: dayjs().format(),
- };
-
- fs.writeFileSync(
- './app-build.json',
- JSON.stringify(appBuildContent, null, 2)
- );
-};
-
-generateAppBuild();
diff --git a/front/config sample.ts b/front/config sample.ts
new file mode 100644
index 0000000..4bc6982
--- /dev/null
+++ b/front/config sample.ts
@@ -0,0 +1,10888 @@
+cont plop = {
+ "conditions": {
+ "hover": [
+ "@media (hover: hover)",
+ "&:is(:hover, [data-hover]):not(:disabled, [data-disabled])"
+ ],
+ "active": "&:is(:active, [data-active]):not(:disabled, [data-disabled], [data-state=open])",
+ "focus": "&:is(:focus, [data-focus])",
+ "focusWithin": "&:is(:focus-within, [data-focus-within])",
+ "focusVisible": "&:is(:focus-visible, [data-focus-visible])",
+ "disabled": "&:is(:disabled, [disabled], [data-disabled], [aria-disabled=true])",
+ "visited": "&:visited",
+ "target": "&:target",
+ "readOnly": "&:is([data-readonly], [aria-readonly=true], [readonly])",
+ "readWrite": "&:read-write",
+ "empty": "&:is(:empty, [data-empty])",
+ "checked": "&:is(:checked, [data-checked], [aria-checked=true], [data-state=checked])",
+ "enabled": "&:enabled",
+ "expanded": "&:is([aria-expanded=true], [data-expanded], [data-state=expanded])",
+ "highlighted": "&[data-highlighted]",
+ "complete": "&[data-complete]",
+ "incomplete": "&[data-incomplete]",
+ "dragging": "&[data-dragging]",
+ "before": "&::before",
+ "after": "&::after",
+ "firstLetter": "&::first-letter",
+ "firstLine": "&::first-line",
+ "marker": "&::marker",
+ "selection": "&::selection",
+ "file": "&::file-selector-button",
+ "backdrop": "&::backdrop",
+ "first": "&:first-of-type",
+ "last": "&:last-of-type",
+ "notFirst": "&:not(:first-of-type)",
+ "notLast": "&:not(:last-of-type)",
+ "only": "&:only-child",
+ "even": "&:nth-of-type(even)",
+ "odd": "&:nth-of-type(odd)",
+ "peerFocus": ".peer:is(:focus, [data-focus]) ~ &",
+ "peerHover": ".peer:is(:hover, [data-hover]):not(:disabled, [data-disabled]) ~ &",
+ "peerActive": ".peer:is(:active, [data-active]):not(:disabled, [data-disabled]) ~ &",
+ "peerFocusWithin": ".peer:focus-within ~ &",
+ "peerFocusVisible": ".peer:is(:focus-visible, [data-focus-visible]) ~ &",
+ "peerDisabled": ".peer:is(:disabled, [disabled], [data-disabled]) ~ &",
+ "peerChecked": ".peer:is(:checked, [data-checked], [aria-checked=true], [data-state=checked]) ~ &",
+ "peerInvalid": ".peer:is(:invalid, [data-invalid], [aria-invalid=true]) ~ &",
+ "peerExpanded": ".peer:is([aria-expanded=true], [data-expanded], [data-state=expanded]) ~ &",
+ "peerPlaceholderShown": ".peer:placeholder-shown ~ &",
+ "groupFocus": ".group:is(:focus, [data-focus]) &",
+ "groupHover": ".group:is(:hover, [data-hover]):not(:disabled, [data-disabled]) &",
+ "groupActive": ".group:is(:active, [data-active]):not(:disabled, [data-disabled]) &",
+ "groupFocusWithin": ".group:focus-within &",
+ "groupFocusVisible": ".group:is(:focus-visible, [data-focus-visible]) &",
+ "groupDisabled": ".group:is(:disabled, [disabled], [data-disabled]) &",
+ "groupChecked": ".group:is(:checked, [data-checked], [aria-checked=true], [data-state=checked]) &",
+ "groupExpanded": ".group:is([aria-expanded=true], [data-expanded], [data-state=expanded]) &",
+ "groupInvalid": ".group:invalid &",
+ "indeterminate": "&:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state=indeterminate])",
+ "required": "&:is([data-required], [aria-required=true])",
+ "valid": "&:is([data-valid], [data-state=valid])",
+ "invalid": "&:is([data-invalid], [aria-invalid=true], [data-state=invalid])",
+ "autofill": "&:autofill",
+ "inRange": "&:is(:in-range, [data-in-range])",
+ "outOfRange": "&:is(:out-of-range, [data-outside-range])",
+ "placeholder": "&::placeholder, &[data-placeholder]",
+ "placeholderShown": "&:is(:placeholder-shown, [data-placeholder-shown])",
+ "pressed": "&:is([aria-pressed=true], [data-pressed])",
+ "selected": "&:is([aria-selected=true], [data-selected])",
+ "grabbed": "&:is([aria-grabbed=true], [data-grabbed])",
+ "underValue": "&[data-state=under-value]",
+ "overValue": "&[data-state=over-value]",
+ "atValue": "&[data-state=at-value]",
+ "default": "&:default",
+ "optional": "&:optional",
+ "open": "&:is([open], [data-open], [data-state=open])",
+ "closed": "&:is([closed], [data-closed], [data-state=closed])",
+ "fullscreen": "&is(:fullscreen, [data-fullscreen])",
+ "loading": "&:is([data-loading], [aria-busy=true])",
+ "hidden": "&:is([hidden], [data-hidden])",
+ "current": "&[data-current]",
+ "currentPage": "&[aria-current=page]",
+ "currentStep": "&[aria-current=step]",
+ "today": "&[data-today]",
+ "unavailable": "&[data-unavailable]",
+ "rangeStart": "&[data-range-start]",
+ "rangeEnd": "&[data-range-end]",
+ "now": "&[data-now]",
+ "topmost": "&[data-topmost]",
+ "motionReduce": "@media (prefers-reduced-motion: reduce)",
+ "motionSafe": "@media (prefers-reduced-motion: no-preference)",
+ "print": "@media print",
+ "landscape": "@media (orientation: landscape)",
+ "portrait": "@media (orientation: portrait)",
+ "dark": ".dark &, .dark .chakra-theme:not(.light) &",
+ "light": ":root &, .light &",
+ "osDark": "@media (prefers-color-scheme: dark)",
+ "osLight": "@media (prefers-color-scheme: light)",
+ "highContrast": "@media (forced-colors: active)",
+ "lessContrast": "@media (prefers-contrast: less)",
+ "moreContrast": "@media (prefers-contrast: more)",
+ "ltr": "[dir=ltr] &",
+ "rtl": "[dir=rtl] &",
+ "scrollbar": "&::-webkit-scrollbar",
+ "scrollbarThumb": "&::-webkit-scrollbar-thumb",
+ "scrollbarTrack": "&::-webkit-scrollbar-track",
+ "horizontal": "&[data-orientation=horizontal]",
+ "vertical": "&[data-orientation=vertical]",
+ "icon": "& :where(svg)",
+ "starting": "@starting-style"
+ },
+ "utilities": {
+ "background": {
+ "shorthand": [
+ "bg"
+ ]
+ },
+ "backgroundColor": {
+ "shorthand": [
+ "bgColor"
+ ]
+ },
+ "backgroundSize": {
+ "shorthand": [
+ "bgSize"
+ ]
+ },
+ "backgroundPosition": {
+ "shorthand": [
+ "bgPos"
+ ]
+ },
+ "backgroundRepeat": {
+ "shorthand": [
+ "bgRepeat"
+ ]
+ },
+ "backgroundAttachment": {
+ "shorthand": [
+ "bgAttachment"
+ ]
+ },
+ "backgroundClip": {
+ "shorthand": [
+ "bgClip"
+ ],
+ "values": [
+ "text"
+ ]
+ },
+ "backgroundGradient": {
+ "shorthand": [
+ "bgGradient"
+ ]
+ },
+ "gradientFrom": {},
+ "gradientTo": {},
+ "gradientVia": {},
+ "backgroundImage": {
+ "values": "gradients",
+ "shorthand": [
+ "bgImg",
+ "bgImage"
+ ]
+ },
+ "border": {
+ "values": "borders"
+ },
+ "borderTop": {
+ "values": "borders"
+ },
+ "borderLeft": {
+ "values": "borders"
+ },
+ "borderBlockStart": {
+ "values": "borders"
+ },
+ "borderRight": {
+ "values": "borders"
+ },
+ "borderInlineEnd": {
+ "values": "borders"
+ },
+ "borderBottom": {
+ "values": "borders"
+ },
+ "borderBlockEnd": {
+ "values": "borders"
+ },
+ "borderInlineStart": {
+ "values": "borders",
+ "shorthand": [
+ "borderStart"
+ ]
+ },
+ "borderInline": {
+ "values": "borders",
+ "shorthand": [
+ "borderX"
+ ]
+ },
+ "borderBlock": {
+ "values": "borders",
+ "shorthand": [
+ "borderY"
+ ]
+ },
+ "borderColor": {},
+ "borderTopColor": {},
+ "borderBlockStartColor": {},
+ "borderBottomColor": {},
+ "borderBlockEndColor": {},
+ "borderLeftColor": {},
+ "borderInlineStartColor": {
+ "shorthand": [
+ "borderStartColor"
+ ]
+ },
+ "borderRightColor": {},
+ "borderInlineEndColor": {
+ "shorthand": [
+ "borderEndColor"
+ ]
+ },
+ "borderStyle": {
+ "values": "borderStyles"
+ },
+ "borderTopStyle": {
+ "values": "borderStyles"
+ },
+ "borderBlockStartStyle": {
+ "values": "borderStyles"
+ },
+ "borderBottomStyle": {
+ "values": "borderStyles"
+ },
+ "borderBlockEndStyle": {
+ "values": "borderStyles"
+ },
+ "borderInlineStartStyle": {
+ "values": "borderStyles",
+ "shorthand": [
+ "borderStartStyle"
+ ]
+ },
+ "borderInlineEndStyle": {
+ "values": "borderStyles",
+ "shorthand": [
+ "borderEndStyle"
+ ]
+ },
+ "borderLeftStyle": {
+ "values": "borderStyles"
+ },
+ "borderRightStyle": {
+ "values": "borderStyles"
+ },
+ "borderRadius": {
+ "values": "radii",
+ "shorthand": [
+ "rounded"
+ ]
+ },
+ "borderTopLeftRadius": {
+ "values": "radii",
+ "shorthand": [
+ "roundedTopLeft"
+ ]
+ },
+ "borderStartStartRadius": {
+ "values": "radii",
+ "shorthand": [
+ "roundedStartStart",
+ "borderTopStartRadius"
+ ]
+ },
+ "borderEndStartRadius": {
+ "values": "radii",
+ "shorthand": [
+ "roundedEndStart",
+ "borderBottomStartRadius"
+ ]
+ },
+ "borderTopRightRadius": {
+ "values": "radii",
+ "shorthand": [
+ "roundedTopRight"
+ ]
+ },
+ "borderStartEndRadius": {
+ "values": "radii",
+ "shorthand": [
+ "roundedStartEnd",
+ "borderTopEndRadius"
+ ]
+ },
+ "borderEndEndRadius": {
+ "values": "radii",
+ "shorthand": [
+ "roundedEndEnd",
+ "borderBottomEndRadius"
+ ]
+ },
+ "borderBottomLeftRadius": {
+ "values": "radii",
+ "shorthand": [
+ "roundedBottomLeft"
+ ]
+ },
+ "borderBottomRightRadius": {
+ "values": "radii",
+ "shorthand": [
+ "roundedBottomRight"
+ ]
+ },
+ "borderInlineStartRadius": {
+ "values": "radii",
+ "property": "borderRadius",
+ "shorthand": [
+ "roundedStart",
+ "borderStartRadius"
+ ]
+ },
+ "borderInlineEndRadius": {
+ "values": "radii",
+ "property": "borderRadius",
+ "shorthand": [
+ "roundedEnd",
+ "borderEndRadius"
+ ]
+ },
+ "borderTopRadius": {
+ "values": "radii",
+ "property": "borderRadius",
+ "shorthand": [
+ "roundedTop"
+ ]
+ },
+ "borderBottomRadius": {
+ "values": "radii",
+ "property": "borderRadius",
+ "shorthand": [
+ "roundedBottom"
+ ]
+ },
+ "borderLeftRadius": {
+ "values": "radii",
+ "property": "borderRadius",
+ "shorthand": [
+ "roundedLeft"
+ ]
+ },
+ "borderRightRadius": {
+ "values": "radii",
+ "property": "borderRadius",
+ "shorthand": [
+ "roundedRight"
+ ]
+ },
+ "borderWidth": {
+ "values": "borderWidths"
+ },
+ "borderBlockStartWidth": {
+ "values": "borderWidths"
+ },
+ "borderTopWidth": {
+ "values": "borderWidths"
+ },
+ "borderBottomWidth": {
+ "values": "borderWidths"
+ },
+ "borderBlockEndWidth": {
+ "values": "borderWidths"
+ },
+ "borderRightWidth": {
+ "values": "borderWidths"
+ },
+ "borderInlineWidth": {
+ "values": "borderWidths",
+ "shorthand": [
+ "borderXWidth"
+ ]
+ },
+ "borderInlineStartWidth": {
+ "values": "borderWidths",
+ "shorthand": [
+ "borderStartWidth"
+ ]
+ },
+ "borderInlineEndWidth": {
+ "values": "borderWidths",
+ "shorthand": [
+ "borderEndWidth"
+ ]
+ },
+ "borderLeftWidth": {
+ "values": "borderWidths"
+ },
+ "borderBlockWidth": {
+ "values": "borderWidths",
+ "shorthand": [
+ "borderYWidth"
+ ]
+ },
+ "color": {},
+ "fill": {},
+ "stroke": {},
+ "accentColor": {},
+ "divideX": {
+ "values": {
+ "type": "string"
+ }
+ },
+ "divideY": {
+ "values": {
+ "type": "string"
+ }
+ },
+ "divideColor": {},
+ "divideStyle": {
+ "property": "borderStyle"
+ },
+ "boxShadow": {
+ "values": "shadows",
+ "shorthand": [
+ "shadow"
+ ]
+ },
+ "boxShadowColor": {
+ "shorthand": [
+ "shadowColor"
+ ]
+ },
+ "mixBlendMode": {
+ "shorthand": [
+ "blendMode"
+ ]
+ },
+ "backgroundBlendMode": {
+ "shorthand": [
+ "bgBlendMode"
+ ]
+ },
+ "opacity": {
+ "values": "opacity"
+ },
+ "filter": {},
+ "blur": {
+ "values": "blurs"
+ },
+ "brightness": {},
+ "contrast": {},
+ "grayscale": {},
+ "hueRotate": {},
+ "invert": {},
+ "saturate": {},
+ "sepia": {},
+ "dropShadow": {},
+ "backdropFilter": {},
+ "backdropBlur": {
+ "values": "blurs"
+ },
+ "backdropBrightness": {},
+ "backdropContrast": {},
+ "backdropGrayscale": {},
+ "backdropHueRotate": {},
+ "backdropInvert": {},
+ "backdropOpacity": {},
+ "backdropSaturate": {},
+ "backdropSepia": {},
+ "flexBasis": {
+ "values": "sizes"
+ },
+ "gap": {
+ "values": "spacing"
+ },
+ "rowGap": {
+ "values": "spacing",
+ "shorthand": [
+ "gapY"
+ ]
+ },
+ "columnGap": {
+ "values": "spacing",
+ "shorthand": [
+ "gapX"
+ ]
+ },
+ "flexDirection": {
+ "shorthand": [
+ "flexDir"
+ ]
+ },
+ "gridGap": {
+ "values": "spacing"
+ },
+ "gridColumnGap": {
+ "values": "spacing"
+ },
+ "gridRowGap": {
+ "values": "spacing"
+ },
+ "outlineColor": {},
+ "focusRing": {
+ "values": [
+ "outside",
+ "inside",
+ "mixed",
+ "none"
+ ]
+ },
+ "focusVisibleRing": {
+ "values": [
+ "outside",
+ "inside",
+ "mixed",
+ "none"
+ ]
+ },
+ "focusRingColor": {},
+ "focusRingOffset": {
+ "values": "spacing"
+ },
+ "focusRingWidth": {
+ "values": "borderWidths",
+ "property": "outlineWidth"
+ },
+ "focusRingStyle": {
+ "values": "borderStyles",
+ "property": "outlineStyle"
+ },
+ "aspectRatio": {
+ "values": "aspectRatios"
+ },
+ "width": {
+ "values": "sizes",
+ "shorthand": [
+ "w"
+ ]
+ },
+ "inlineSize": {
+ "values": "sizes"
+ },
+ "height": {
+ "values": "sizes",
+ "shorthand": [
+ "h"
+ ]
+ },
+ "blockSize": {
+ "values": "sizes"
+ },
+ "boxSize": {
+ "values": "sizes",
+ "property": "width"
+ },
+ "minWidth": {
+ "values": "sizes",
+ "shorthand": [
+ "minW"
+ ]
+ },
+ "minInlineSize": {
+ "values": "sizes"
+ },
+ "minHeight": {
+ "values": "sizes",
+ "shorthand": [
+ "minH"
+ ]
+ },
+ "minBlockSize": {
+ "values": "sizes"
+ },
+ "maxWidth": {
+ "values": "sizes",
+ "shorthand": [
+ "maxW"
+ ]
+ },
+ "maxInlineSize": {
+ "values": "sizes"
+ },
+ "maxHeight": {
+ "values": "sizes",
+ "shorthand": [
+ "maxH"
+ ]
+ },
+ "maxBlockSize": {
+ "values": "sizes"
+ },
+ "hideFrom": {
+ "values": "breakpoints"
+ },
+ "hideBelow": {
+ "values": "breakpoints"
+ },
+ "overscrollBehavior": {
+ "shorthand": [
+ "overscroll"
+ ]
+ },
+ "overscrollBehaviorX": {
+ "shorthand": [
+ "overscrollX"
+ ]
+ },
+ "overscrollBehaviorY": {
+ "shorthand": [
+ "overscrollY"
+ ]
+ },
+ "scrollbar": {
+ "values": [
+ "visible",
+ "hidden"
+ ]
+ },
+ "scrollbarColor": {},
+ "scrollbarGutter": {
+ "values": "spacing"
+ },
+ "scrollbarWidth": {
+ "values": "sizes"
+ },
+ "scrollMargin": {
+ "values": "spacing"
+ },
+ "scrollMarginTop": {
+ "values": "spacing"
+ },
+ "scrollMarginBottom": {
+ "values": "spacing"
+ },
+ "scrollMarginLeft": {
+ "values": "spacing"
+ },
+ "scrollMarginRight": {
+ "values": "spacing"
+ },
+ "scrollMarginX": {
+ "values": "spacing"
+ },
+ "scrollMarginY": {
+ "values": "spacing"
+ },
+ "scrollPadding": {
+ "values": "spacing"
+ },
+ "scrollPaddingTop": {
+ "values": "spacing"
+ },
+ "scrollPaddingBottom": {
+ "values": "spacing"
+ },
+ "scrollPaddingLeft": {
+ "values": "spacing"
+ },
+ "scrollPaddingRight": {
+ "values": "spacing"
+ },
+ "scrollPaddingInline": {
+ "values": "spacing",
+ "shorthand": [
+ "scrollPaddingX"
+ ]
+ },
+ "scrollPaddingBlock": {
+ "values": "spacing",
+ "shorthand": [
+ "scrollPaddingY"
+ ]
+ },
+ "scrollSnapType": {
+ "values": {
+ "none": "none",
+ "x": "x var(--scroll-snap-strictness)",
+ "y": "y var(--scroll-snap-strictness)",
+ "both": "both var(--scroll-snap-strictness)"
+ }
+ },
+ "scrollSnapStrictness": {
+ "values": [
+ "mandatory",
+ "proximity"
+ ]
+ },
+ "scrollSnapMargin": {
+ "values": "spacing"
+ },
+ "scrollSnapMarginTop": {
+ "values": "spacing"
+ },
+ "scrollSnapMarginBottom": {
+ "values": "spacing"
+ },
+ "scrollSnapMarginLeft": {
+ "values": "spacing"
+ },
+ "scrollSnapMarginRight": {
+ "values": "spacing"
+ },
+ "listStylePosition": {
+ "shorthand": [
+ "listStylePos"
+ ]
+ },
+ "listStyleImage": {
+ "shorthand": [
+ "listStyleImg"
+ ]
+ },
+ "position": {
+ "shorthand": [
+ "pos"
+ ]
+ },
+ "zIndex": {
+ "values": "zIndex"
+ },
+ "inset": {
+ "values": "spacing"
+ },
+ "insetInline": {
+ "values": "spacing",
+ "shorthand": [
+ "insetX"
+ ]
+ },
+ "insetBlock": {
+ "values": "spacing",
+ "shorthand": [
+ "insetY"
+ ]
+ },
+ "top": {
+ "values": "spacing"
+ },
+ "insetBlockStart": {
+ "values": "spacing"
+ },
+ "bottom": {
+ "values": "spacing"
+ },
+ "insetBlockEnd": {
+ "values": "spacing"
+ },
+ "left": {
+ "values": "spacing"
+ },
+ "right": {
+ "values": "spacing"
+ },
+ "insetInlineStart": {
+ "values": "spacing",
+ "shorthand": [
+ "insetStart"
+ ]
+ },
+ "insetInlineEnd": {
+ "values": "spacing",
+ "shorthand": [
+ "insetEnd"
+ ]
+ },
+ "ring": {},
+ "ringColor": {},
+ "ringOffset": {},
+ "ringOffsetColor": {},
+ "ringInset": {},
+ "margin": {
+ "values": "spacing",
+ "shorthand": [
+ "m"
+ ]
+ },
+ "marginTop": {
+ "values": "spacing",
+ "shorthand": [
+ "mt"
+ ]
+ },
+ "marginBlockStart": {
+ "values": "spacing",
+ "shorthand": [
+ "mt"
+ ]
+ },
+ "marginRight": {
+ "values": "spacing",
+ "shorthand": [
+ "mr"
+ ]
+ },
+ "marginBottom": {
+ "values": "spacing",
+ "shorthand": [
+ "mb"
+ ]
+ },
+ "marginBlockEnd": {
+ "values": "spacing"
+ },
+ "marginLeft": {
+ "values": "spacing",
+ "shorthand": [
+ "ml"
+ ]
+ },
+ "marginInlineStart": {
+ "values": "spacing",
+ "shorthand": [
+ "ms",
+ "marginStart"
+ ]
+ },
+ "marginInlineEnd": {
+ "values": "spacing",
+ "shorthand": [
+ "me",
+ "marginEnd"
+ ]
+ },
+ "marginInline": {
+ "values": "spacing",
+ "shorthand": [
+ "mx",
+ "marginX"
+ ]
+ },
+ "marginBlock": {
+ "values": "spacing",
+ "shorthand": [
+ "my",
+ "marginY"
+ ]
+ },
+ "padding": {
+ "values": "spacing",
+ "shorthand": [
+ "p"
+ ]
+ },
+ "paddingTop": {
+ "values": "spacing",
+ "shorthand": [
+ "pt"
+ ]
+ },
+ "paddingRight": {
+ "values": "spacing",
+ "shorthand": [
+ "pr"
+ ]
+ },
+ "paddingBottom": {
+ "values": "spacing",
+ "shorthand": [
+ "pb"
+ ]
+ },
+ "paddingBlockStart": {
+ "values": "spacing"
+ },
+ "paddingBlockEnd": {
+ "values": "spacing"
+ },
+ "paddingLeft": {
+ "values": "spacing",
+ "shorthand": [
+ "pl"
+ ]
+ },
+ "paddingInlineStart": {
+ "values": "spacing",
+ "shorthand": [
+ "ps",
+ "paddingStart"
+ ]
+ },
+ "paddingInlineEnd": {
+ "values": "spacing",
+ "shorthand": [
+ "pe",
+ "paddingEnd"
+ ]
+ },
+ "paddingInline": {
+ "values": "spacing",
+ "shorthand": [
+ "px",
+ "paddingX"
+ ]
+ },
+ "paddingBlock": {
+ "values": "spacing",
+ "shorthand": [
+ "py",
+ "paddingY"
+ ]
+ },
+ "textDecoration": {
+ "shorthand": [
+ "textDecor"
+ ]
+ },
+ "textDecorationColor": {},
+ "textShadow": {
+ "values": "shadows"
+ },
+ "transform": {},
+ "skewX": {},
+ "skewY": {},
+ "scaleX": {},
+ "scaleY": {},
+ "scale": {},
+ "spaceXReverse": {
+ "values": {
+ "type": "boolean"
+ }
+ },
+ "spaceX": {
+ "property": "marginInlineStart",
+ "values": "spacing"
+ },
+ "spaceYReverse": {
+ "values": {
+ "type": "boolean"
+ }
+ },
+ "spaceY": {
+ "property": "marginTop",
+ "values": "spacing"
+ },
+ "rotate": {},
+ "rotateX": {},
+ "rotateY": {},
+ "translate": {},
+ "translateX": {
+ "values": "spacing"
+ },
+ "translateY": {
+ "values": "spacing"
+ },
+ "transition": {
+ "values": [
+ "all",
+ "common",
+ "colors",
+ "opacity",
+ "position",
+ "backgrounds",
+ "size",
+ "shadow",
+ "transform"
+ ]
+ },
+ "transitionDuration": {
+ "values": "durations"
+ },
+ "transitionProperty": {
+ "values": {
+ "common": "background-color, border-color, color, fill, stroke, opacity, box-shadow, translate, transform",
+ "colors": "background-color, border-color, color, fill, stroke",
+ "size": "width, height",
+ "position": "left, right, top, bottom, inset-inline, inset-block",
+ "background": "background, background-color, background-image, background-position"
+ }
+ },
+ "transitionTimingFunction": {
+ "values": "easings"
+ },
+ "animation": {
+ "values": "animations"
+ },
+ "animationDuration": {
+ "values": "durations"
+ },
+ "animationDelay": {
+ "values": "durations"
+ },
+ "animationTimingFunction": {
+ "values": "easings"
+ },
+ "fontFamily": {
+ "values": "fonts"
+ },
+ "fontSize": {
+ "values": "fontSizes"
+ },
+ "fontWeight": {
+ "values": "fontWeights"
+ },
+ "lineHeight": {
+ "values": "lineHeights"
+ },
+ "letterSpacing": {
+ "values": "letterSpacings"
+ },
+ "textIndent": {
+ "values": "spacing"
+ },
+ "truncate": {
+ "values": {
+ "type": "boolean"
+ }
+ },
+ "lineClamp": {},
+ "srOnly": {
+ "values": {
+ "type": "boolean"
+ }
+ },
+ "debug": {
+ "values": {
+ "type": "boolean"
+ }
+ },
+ "caretColor": {},
+ "cursor": {
+ "values": "cursor"
+ }
+ },
+ "preflight": true,
+ "cssVarsPrefix": "chakra",
+ "cssVarsRoot": ":where(html, .chakra-theme)",
+ "globalCss": {
+ "*": {
+ "fontFeatureSettings": "\"cv11\"",
+ "--ring-inset": "var(--chakra-empty,/*!*/ /*!*/)",
+ "--ring-offset-width": "0px",
+ "--ring-offset-color": "#fff",
+ "--ring-color": "rgba(66, 153, 225, 0.6)",
+ "--ring-offset-shadow": "0 0 #0000",
+ "--ring-shadow": "0 0 #0000",
+ "--brightness": "var(--chakra-empty,/*!*/ /*!*/)",
+ "--contrast": "var(--chakra-empty,/*!*/ /*!*/)",
+ "--grayscale": "var(--chakra-empty,/*!*/ /*!*/)",
+ "--hue-rotate": "var(--chakra-empty,/*!*/ /*!*/)",
+ "--invert": "var(--chakra-empty,/*!*/ /*!*/)",
+ "--saturate": "var(--chakra-empty,/*!*/ /*!*/)",
+ "--sepia": "var(--chakra-empty,/*!*/ /*!*/)",
+ "--drop-shadow": "var(--chakra-empty,/*!*/ /*!*/)",
+ "--backdrop-blur": "var(--chakra-empty,/*!*/ /*!*/)",
+ "--backdrop-brightness": "var(--chakra-empty,/*!*/ /*!*/)",
+ "--backdrop-contrast": "var(--chakra-empty,/*!*/ /*!*/)",
+ "--backdrop-grayscale": "var(--chakra-empty,/*!*/ /*!*/)",
+ "--backdrop-hue-rotate": "var(--chakra-empty,/*!*/ /*!*/)",
+ "--backdrop-invert": "var(--chakra-empty,/*!*/ /*!*/)",
+ "--backdrop-opacity": "var(--chakra-empty,/*!*/ /*!*/)",
+ "--backdrop-saturate": "var(--chakra-empty,/*!*/ /*!*/)",
+ "--backdrop-sepia": "var(--chakra-empty,/*!*/ /*!*/)",
+ "--global-font-mono": "fonts.mono",
+ "--global-font-body": "fonts.body",
+ "--global-color-border": "colors.border"
+ },
+ "html": {
+ "color": "fg",
+ "bg": "bg",
+ "lineHeight": "1.5",
+ "colorPalette": "gray"
+ },
+ "*::placeholder": {
+ "color": "fg.muted/80"
+ },
+ "*::selection": {
+ "bg": "colorPalette.muted/80"
+ }
+ },
+ "theme": {
+ "breakpoints": {
+ "sm": "480px",
+ "md": "768px",
+ "lg": "1024px",
+ "xl": "1280px",
+ "2xl": "1536px"
+ },
+ "keyframes": {
+ "spin": {
+ "0%": {
+ "transform": "rotate(0deg)"
+ },
+ "100%": {
+ "transform": "rotate(360deg)"
+ }
+ },
+ "pulse": {
+ "50%": {
+ "opacity": "0.5"
+ }
+ },
+ "ping": {
+ "75%, 100%": {
+ "transform": "scale(2)",
+ "opacity": "0"
+ }
+ },
+ "bounce": {
+ "0%, 100%": {
+ "transform": "translateY(-25%)",
+ "animationTimingFunction": "cubic-bezier(0.8,0,1,1)"
+ },
+ "50%": {
+ "transform": "none",
+ "animationTimingFunction": "cubic-bezier(0,0,0.2,1)"
+ }
+ },
+ "bg-position": {
+ "from": {
+ "backgroundPosition": "var(--animate-from, 1rem) 0"
+ },
+ "to": {
+ "backgroundPosition": "var(--animate-to, 0) 0"
+ }
+ },
+ "position": {
+ "from": {
+ "insetInlineStart": "var(--animate-from-x)",
+ "insetBlockStart": "var(--animate-from-y)"
+ },
+ "to": {
+ "insetInlineStart": "var(--animate-to-x)",
+ "insetBlockStart": "var(--animate-to-y)"
+ }
+ },
+ "circular-progress": {
+ "0%": {
+ "strokeDasharray": "1, 400",
+ "strokeDashoffset": "0"
+ },
+ "50%": {
+ "strokeDasharray": "400, 400",
+ "strokeDashoffset": "-100%"
+ },
+ "100%": {
+ "strokeDasharray": "400, 400",
+ "strokeDashoffset": "-260%"
+ }
+ },
+ "expand-height": {
+ "from": {
+ "height": "0"
+ },
+ "to": {
+ "height": "var(--height)"
+ }
+ },
+ "collapse-height": {
+ "from": {
+ "height": "var(--height)"
+ },
+ "to": {
+ "height": "0"
+ }
+ },
+ "expand-width": {
+ "from": {
+ "width": "0"
+ },
+ "to": {
+ "width": "var(--width)"
+ }
+ },
+ "collapse-width": {
+ "from": {
+ "height": "var(--width)"
+ },
+ "to": {
+ "height": "0"
+ }
+ },
+ "fade-in": {
+ "from": {
+ "opacity": 0
+ },
+ "to": {
+ "opacity": 1
+ }
+ },
+ "fade-out": {
+ "from": {
+ "opacity": 1
+ },
+ "to": {
+ "opacity": 0
+ }
+ },
+ "slide-from-left-full": {
+ "from": {
+ "translate": "-100% 0"
+ },
+ "to": {
+ "translate": "0 0"
+ }
+ },
+ "slide-from-right-full": {
+ "from": {
+ "translate": "100% 0"
+ },
+ "to": {
+ "translate": "0 0"
+ }
+ },
+ "slide-from-top-full": {
+ "from": {
+ "translate": "0 -100%"
+ },
+ "to": {
+ "translate": "0 0"
+ }
+ },
+ "slide-from-bottom-full": {
+ "from": {
+ "translate": "0 100%"
+ },
+ "to": {
+ "translate": "0 0"
+ }
+ },
+ "slide-to-left-full": {
+ "from": {
+ "translate": "0 0"
+ },
+ "to": {
+ "translate": "-100% 0"
+ }
+ },
+ "slide-to-right-full": {
+ "from": {
+ "translate": "0 0"
+ },
+ "to": {
+ "translate": "100% 0"
+ }
+ },
+ "slide-to-top-full": {
+ "from": {
+ "translate": "0 0"
+ },
+ "to": {
+ "translate": "0 -100%"
+ }
+ },
+ "slide-to-bottom-full": {
+ "from": {
+ "translate": "0 0"
+ },
+ "to": {
+ "translate": "0 100%"
+ }
+ },
+ "slide-from-top": {
+ "0%": {
+ "translate": "0 -0.5rem"
+ },
+ "to": {
+ "translate": "0"
+ }
+ },
+ "slide-from-bottom": {
+ "0%": {
+ "translate": "0 0.5rem"
+ },
+ "to": {
+ "translate": "0"
+ }
+ },
+ "slide-from-left": {
+ "0%": {
+ "translate": "-0.5rem 0"
+ },
+ "to": {
+ "translate": "0"
+ }
+ },
+ "slide-from-right": {
+ "0%": {
+ "translate": "0.5rem 0"
+ },
+ "to": {
+ "translate": "0"
+ }
+ },
+ "slide-to-top": {
+ "0%": {
+ "translate": "0"
+ },
+ "to": {
+ "translate": "0 -0.5rem"
+ }
+ },
+ "slide-to-bottom": {
+ "0%": {
+ "translate": "0"
+ },
+ "to": {
+ "translate": "0 0.5rem"
+ }
+ },
+ "slide-to-left": {
+ "0%": {
+ "translate": "0"
+ },
+ "to": {
+ "translate": "-0.5rem 0"
+ }
+ },
+ "slide-to-right": {
+ "0%": {
+ "translate": "0"
+ },
+ "to": {
+ "translate": "0.5rem 0"
+ }
+ },
+ "scale-in": {
+ "from": {
+ "scale": "0.95"
+ },
+ "to": {
+ "scale": "1"
+ }
+ },
+ "scale-out": {
+ "from": {
+ "scale": "1"
+ },
+ "to": {
+ "scale": "0.95"
+ }
+ }
+ },
+ "tokens": {
+ "aspectRatios": {
+ "square": {
+ "value": "1 / 1"
+ },
+ "landscape": {
+ "value": "4 / 3"
+ },
+ "portrait": {
+ "value": "3 / 4"
+ },
+ "wide": {
+ "value": "16 / 9"
+ },
+ "ultrawide": {
+ "value": "18 / 5"
+ },
+ "golden": {
+ "value": "1.618 / 1"
+ }
+ },
+ "animations": {
+ "spin": {
+ "value": "spin 1s linear infinite"
+ },
+ "ping": {
+ "value": "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite"
+ },
+ "pulse": {
+ "value": "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
+ },
+ "bounce": {
+ "value": "bounce 1s infinite"
+ }
+ },
+ "blurs": {
+ "none": {
+ "value": " "
+ },
+ "sm": {
+ "value": "4px"
+ },
+ "md": {
+ "value": "8px"
+ },
+ "lg": {
+ "value": "12px"
+ },
+ "xl": {
+ "value": "16px"
+ },
+ "2xl": {
+ "value": "24px"
+ },
+ "3xl": {
+ "value": "40px"
+ },
+ "4xl": {
+ "value": "64px"
+ }
+ },
+ "borders": {
+ "xs": {
+ "value": "0.5px solid"
+ },
+ "sm": {
+ "value": "1px solid"
+ },
+ "md": {
+ "value": "2px solid"
+ },
+ "lg": {
+ "value": "4px solid"
+ },
+ "xl": {
+ "value": "8px solid"
+ }
+ },
+ "colors": {
+ "transparent": {
+ "value": "transparent"
+ },
+ "current": {
+ "value": "currentColor"
+ },
+ "black": {
+ "value": "#09090B"
+ },
+ "white": {
+ "value": "#FFFFFF"
+ },
+ "whiteAlpha": {
+ "50": {
+ "value": "rgba(255, 255, 255, 0.04)"
+ },
+ "100": {
+ "value": "rgba(255, 255, 255, 0.06)"
+ },
+ "200": {
+ "value": "rgba(255, 255, 255, 0.08)"
+ },
+ "300": {
+ "value": "rgba(255, 255, 255, 0.16)"
+ },
+ "400": {
+ "value": "rgba(255, 255, 255, 0.24)"
+ },
+ "500": {
+ "value": "rgba(255, 255, 255, 0.36)"
+ },
+ "600": {
+ "value": "rgba(255, 255, 255, 0.48)"
+ },
+ "700": {
+ "value": "rgba(255, 255, 255, 0.64)"
+ },
+ "800": {
+ "value": "rgba(255, 255, 255, 0.80)"
+ },
+ "900": {
+ "value": "rgba(255, 255, 255, 0.92)"
+ },
+ "950": {
+ "value": "rgba(255, 255, 255, 0.95)"
+ }
+ },
+ "blackAlpha": {
+ "50": {
+ "value": "rgba(0, 0, 0, 0.04)"
+ },
+ "100": {
+ "value": "rgba(0, 0, 0, 0.06)"
+ },
+ "200": {
+ "value": "rgba(0, 0, 0, 0.08)"
+ },
+ "300": {
+ "value": "rgba(0, 0, 0, 0.16)"
+ },
+ "400": {
+ "value": "rgba(0, 0, 0, 0.24)"
+ },
+ "500": {
+ "value": "rgba(0, 0, 0, 0.36)"
+ },
+ "600": {
+ "value": "rgba(0, 0, 0, 0.48)"
+ },
+ "700": {
+ "value": "rgba(0, 0, 0, 0.64)"
+ },
+ "800": {
+ "value": "rgba(0, 0, 0, 0.80)"
+ },
+ "900": {
+ "value": "rgba(0, 0, 0, 0.92)"
+ },
+ "950": {
+ "value": "rgba(0, 0, 0, 0.95)"
+ }
+ },
+ "gray": {
+ "50": {
+ "value": "#fafafa"
+ },
+ "100": {
+ "value": "#f4f4f5"
+ },
+ "200": {
+ "value": "#e4e4e7"
+ },
+ "300": {
+ "value": "#d4d4d8"
+ },
+ "400": {
+ "value": "#a1a1aa"
+ },
+ "500": {
+ "value": "#71717a"
+ },
+ "600": {
+ "value": "#52525b"
+ },
+ "700": {
+ "value": "#3f3f46"
+ },
+ "800": {
+ "value": "#27272a"
+ },
+ "900": {
+ "value": "#18181b"
+ },
+ "950": {
+ "value": "#111111"
+ }
+ },
+ "red": {
+ "50": {
+ "value": "#fef2f2"
+ },
+ "100": {
+ "value": "#fee2e2"
+ },
+ "200": {
+ "value": "#fecaca"
+ },
+ "300": {
+ "value": "#fca5a5"
+ },
+ "400": {
+ "value": "#f87171"
+ },
+ "500": {
+ "value": "#ef4444"
+ },
+ "600": {
+ "value": "#dc2626"
+ },
+ "700": {
+ "value": "#991919"
+ },
+ "800": {
+ "value": "#511111"
+ },
+ "900": {
+ "value": "#300c0c"
+ },
+ "950": {
+ "value": "#1f0808"
+ }
+ },
+ "orange": {
+ "50": {
+ "value": "#fff7ed"
+ },
+ "100": {
+ "value": "#ffedd5"
+ },
+ "200": {
+ "value": "#fed7aa"
+ },
+ "300": {
+ "value": "#fdba74"
+ },
+ "400": {
+ "value": "#fb923c"
+ },
+ "500": {
+ "value": "#f97316"
+ },
+ "600": {
+ "value": "#ea580c"
+ },
+ "700": {
+ "value": "#92310a"
+ },
+ "800": {
+ "value": "#6c2710"
+ },
+ "900": {
+ "value": "#3b1106"
+ },
+ "950": {
+ "value": "#220a04"
+ }
+ },
+ "yellow": {
+ "50": {
+ "value": "#fefce8"
+ },
+ "100": {
+ "value": "#fef9c3"
+ },
+ "200": {
+ "value": "#fef08a"
+ },
+ "300": {
+ "value": "#fde047"
+ },
+ "400": {
+ "value": "#facc15"
+ },
+ "500": {
+ "value": "#eab308"
+ },
+ "600": {
+ "value": "#ca8a04"
+ },
+ "700": {
+ "value": "#845209"
+ },
+ "800": {
+ "value": "#713f12"
+ },
+ "900": {
+ "value": "#422006"
+ },
+ "950": {
+ "value": "#281304"
+ }
+ },
+ "green": {
+ "50": {
+ "value": "#f0fdf4"
+ },
+ "100": {
+ "value": "#dcfce7"
+ },
+ "200": {
+ "value": "#bbf7d0"
+ },
+ "300": {
+ "value": "#86efac"
+ },
+ "400": {
+ "value": "#4ade80"
+ },
+ "500": {
+ "value": "#22c55e"
+ },
+ "600": {
+ "value": "#16a34a"
+ },
+ "700": {
+ "value": "#116932"
+ },
+ "800": {
+ "value": "#124a28"
+ },
+ "900": {
+ "value": "#042713"
+ },
+ "950": {
+ "value": "#03190c"
+ }
+ },
+ "teal": {
+ "50": {
+ "value": "#f0fdfa"
+ },
+ "100": {
+ "value": "#ccfbf1"
+ },
+ "200": {
+ "value": "#99f6e4"
+ },
+ "300": {
+ "value": "#5eead4"
+ },
+ "400": {
+ "value": "#2dd4bf"
+ },
+ "500": {
+ "value": "#14b8a6"
+ },
+ "600": {
+ "value": "#0d9488"
+ },
+ "700": {
+ "value": "#0c5d56"
+ },
+ "800": {
+ "value": "#114240"
+ },
+ "900": {
+ "value": "#032726"
+ },
+ "950": {
+ "value": "#021716"
+ }
+ },
+ "blue": {
+ "50": {
+ "value": "#eff6ff"
+ },
+ "100": {
+ "value": "#dbeafe"
+ },
+ "200": {
+ "value": "#bfdbfe"
+ },
+ "300": {
+ "value": "#a3cfff"
+ },
+ "400": {
+ "value": "#60a5fa"
+ },
+ "500": {
+ "value": "#3b82f6"
+ },
+ "600": {
+ "value": "#2563eb"
+ },
+ "700": {
+ "value": "#173da6"
+ },
+ "800": {
+ "value": "#1a3478"
+ },
+ "900": {
+ "value": "#14204a"
+ },
+ "950": {
+ "value": "#0c142e"
+ }
+ },
+ "cyan": {
+ "50": {
+ "value": "#ecfeff"
+ },
+ "100": {
+ "value": "#cffafe"
+ },
+ "200": {
+ "value": "#a5f3fc"
+ },
+ "300": {
+ "value": "#67e8f9"
+ },
+ "400": {
+ "value": "#22d3ee"
+ },
+ "500": {
+ "value": "#06b6d4"
+ },
+ "600": {
+ "value": "#0891b2"
+ },
+ "700": {
+ "value": "#0c5c72"
+ },
+ "800": {
+ "value": "#134152"
+ },
+ "900": {
+ "value": "#072a38"
+ },
+ "950": {
+ "value": "#051b24"
+ }
+ },
+ "purple": {
+ "50": {
+ "value": "#faf5ff"
+ },
+ "100": {
+ "value": "#f3e8ff"
+ },
+ "200": {
+ "value": "#e9d5ff"
+ },
+ "300": {
+ "value": "#d8b4fe"
+ },
+ "400": {
+ "value": "#c084fc"
+ },
+ "500": {
+ "value": "#a855f7"
+ },
+ "600": {
+ "value": "#9333ea"
+ },
+ "700": {
+ "value": "#641ba3"
+ },
+ "800": {
+ "value": "#4a1772"
+ },
+ "900": {
+ "value": "#2f0553"
+ },
+ "950": {
+ "value": "#1a032e"
+ }
+ },
+ "pink": {
+ "50": {
+ "value": "#fdf2f8"
+ },
+ "100": {
+ "value": "#fce7f3"
+ },
+ "200": {
+ "value": "#fbcfe8"
+ },
+ "300": {
+ "value": "#f9a8d4"
+ },
+ "400": {
+ "value": "#f472b6"
+ },
+ "500": {
+ "value": "#ec4899"
+ },
+ "600": {
+ "value": "#db2777"
+ },
+ "700": {
+ "value": "#a41752"
+ },
+ "800": {
+ "value": "#6d0e34"
+ },
+ "900": {
+ "value": "#45061f"
+ },
+ "950": {
+ "value": "#2c0514"
+ }
+ }
+ },
+ "durations": {
+ "fastest": {
+ "value": "50ms"
+ },
+ "faster": {
+ "value": "100ms"
+ },
+ "fast": {
+ "value": "150ms"
+ },
+ "moderate": {
+ "value": "200ms"
+ },
+ "slow": {
+ "value": "300ms"
+ },
+ "slower": {
+ "value": "400ms"
+ },
+ "slowest": {
+ "value": "500ms"
+ }
+ },
+ "easings": {
+ "ease-in": {
+ "value": "cubic-bezier(0.42, 0, 1, 1)"
+ },
+ "ease-out": {
+ "value": "cubic-bezier(0, 0, 0.58, 1)"
+ },
+ "ease-in-out": {
+ "value": "cubic-bezier(0.42, 0, 0.58, 1)"
+ },
+ "ease-in-smooth": {
+ "value": "cubic-bezier(0.32, 0.72, 0, 1)"
+ }
+ },
+ "fonts": {
+ "heading": {
+ "value": "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\""
+ },
+ "body": {
+ "value": "Inter, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\""
+ },
+ "mono": {
+ "value": "SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace"
+ }
+ },
+ "fontSizes": {
+ "2xs": {
+ "value": "0.625rem"
+ },
+ "xs": {
+ "value": "0.75rem"
+ },
+ "sm": {
+ "value": "0.875rem"
+ },
+ "md": {
+ "value": "1rem"
+ },
+ "lg": {
+ "value": "1.125rem"
+ },
+ "xl": {
+ "value": "1.25rem"
+ },
+ "2xl": {
+ "value": "1.5rem"
+ },
+ "3xl": {
+ "value": "1.875rem"
+ },
+ "4xl": {
+ "value": "2.25rem"
+ },
+ "5xl": {
+ "value": "3rem"
+ },
+ "6xl": {
+ "value": "3.75rem"
+ },
+ "7xl": {
+ "value": "4.5rem"
+ },
+ "8xl": {
+ "value": "6rem"
+ },
+ "9xl": {
+ "value": "8rem"
+ }
+ },
+ "fontWeights": {
+ "thin": {
+ "value": "100"
+ },
+ "extralight": {
+ "value": "200"
+ },
+ "light": {
+ "value": "300"
+ },
+ "normal": {
+ "value": "400"
+ },
+ "medium": {
+ "value": "500"
+ },
+ "semibold": {
+ "value": "600"
+ },
+ "bold": {
+ "value": "700"
+ },
+ "extrabold": {
+ "value": "800"
+ },
+ "black": {
+ "value": "900"
+ }
+ },
+ "letterSpacings": {
+ "tighter": {
+ "value": "-0.05em"
+ },
+ "tight": {
+ "value": "-0.025em"
+ },
+ "wide": {
+ "value": "0.025em"
+ },
+ "wider": {
+ "value": "0.05em"
+ },
+ "widest": {
+ "value": "0.1em"
+ }
+ },
+ "lineHeights": {
+ "shorter": {
+ "value": 1.25
+ },
+ "short": {
+ "value": 1.375
+ },
+ "moderate": {
+ "value": 1.5
+ },
+ "tall": {
+ "value": 1.625
+ },
+ "taller": {
+ "value": 2
+ }
+ },
+ "radii": {
+ "none": {
+ "value": "0"
+ },
+ "2xs": {
+ "value": "0.0625rem"
+ },
+ "xs": {
+ "value": "0.125rem"
+ },
+ "sm": {
+ "value": "0.25rem"
+ },
+ "md": {
+ "value": "0.375rem"
+ },
+ "lg": {
+ "value": "0.5rem"
+ },
+ "xl": {
+ "value": "0.75rem"
+ },
+ "2xl": {
+ "value": "1rem"
+ },
+ "3xl": {
+ "value": "1.5rem"
+ },
+ "4xl": {
+ "value": "2rem"
+ },
+ "full": {
+ "value": "9999px"
+ }
+ },
+ "spacing": {
+ "1": {
+ "value": "0.25rem"
+ },
+ "2": {
+ "value": "0.5rem"
+ },
+ "3": {
+ "value": "0.75rem"
+ },
+ "4": {
+ "value": "1rem"
+ },
+ "5": {
+ "value": "1.25rem"
+ },
+ "6": {
+ "value": "1.5rem"
+ },
+ "7": {
+ "value": "1.75rem"
+ },
+ "8": {
+ "value": "2rem"
+ },
+ "9": {
+ "value": "2.25rem"
+ },
+ "10": {
+ "value": "2.5rem"
+ },
+ "11": {
+ "value": "2.75rem"
+ },
+ "12": {
+ "value": "3rem"
+ },
+ "14": {
+ "value": "3.5rem"
+ },
+ "16": {
+ "value": "4rem"
+ },
+ "20": {
+ "value": "5rem"
+ },
+ "24": {
+ "value": "6rem"
+ },
+ "28": {
+ "value": "7rem"
+ },
+ "32": {
+ "value": "8rem"
+ },
+ "36": {
+ "value": "9rem"
+ },
+ "40": {
+ "value": "10rem"
+ },
+ "44": {
+ "value": "11rem"
+ },
+ "48": {
+ "value": "12rem"
+ },
+ "52": {
+ "value": "13rem"
+ },
+ "56": {
+ "value": "14rem"
+ },
+ "60": {
+ "value": "15rem"
+ },
+ "64": {
+ "value": "16rem"
+ },
+ "72": {
+ "value": "18rem"
+ },
+ "80": {
+ "value": "20rem"
+ },
+ "96": {
+ "value": "24rem"
+ },
+ "0.5": {
+ "value": "0.125rem"
+ },
+ "1.5": {
+ "value": "0.375rem"
+ },
+ "2.5": {
+ "value": "0.625rem"
+ },
+ "3.5": {
+ "value": "0.875rem"
+ },
+ "4.5": {
+ "value": "1.125rem"
+ }
+ },
+ "sizes": {
+ "1": {
+ "value": "0.25rem"
+ },
+ "2": {
+ "value": "0.5rem"
+ },
+ "3": {
+ "value": "0.75rem"
+ },
+ "4": {
+ "value": "1rem"
+ },
+ "5": {
+ "value": "1.25rem"
+ },
+ "6": {
+ "value": "1.5rem"
+ },
+ "7": {
+ "value": "1.75rem"
+ },
+ "8": {
+ "value": "2rem"
+ },
+ "9": {
+ "value": "2.25rem"
+ },
+ "10": {
+ "value": "2.5rem"
+ },
+ "11": {
+ "value": "2.75rem"
+ },
+ "12": {
+ "value": "3rem"
+ },
+ "14": {
+ "value": "3.5rem"
+ },
+ "16": {
+ "value": "4rem"
+ },
+ "20": {
+ "value": "5rem"
+ },
+ "24": {
+ "value": "6rem"
+ },
+ "28": {
+ "value": "7rem"
+ },
+ "32": {
+ "value": "8rem"
+ },
+ "36": {
+ "value": "9rem"
+ },
+ "40": {
+ "value": "10rem"
+ },
+ "44": {
+ "value": "11rem"
+ },
+ "48": {
+ "value": "12rem"
+ },
+ "52": {
+ "value": "13rem"
+ },
+ "56": {
+ "value": "14rem"
+ },
+ "60": {
+ "value": "15rem"
+ },
+ "64": {
+ "value": "16rem"
+ },
+ "72": {
+ "value": "18rem"
+ },
+ "80": {
+ "value": "20rem"
+ },
+ "96": {
+ "value": "24rem"
+ },
+ "3xs": {
+ "value": "14rem"
+ },
+ "2xs": {
+ "value": "16rem"
+ },
+ "xs": {
+ "value": "20rem"
+ },
+ "sm": {
+ "value": "24rem"
+ },
+ "md": {
+ "value": "28rem"
+ },
+ "lg": {
+ "value": "32rem"
+ },
+ "xl": {
+ "value": "36rem"
+ },
+ "2xl": {
+ "value": "42rem"
+ },
+ "3xl": {
+ "value": "48rem"
+ },
+ "4xl": {
+ "value": "56rem"
+ },
+ "5xl": {
+ "value": "64rem"
+ },
+ "6xl": {
+ "value": "72rem"
+ },
+ "7xl": {
+ "value": "80rem"
+ },
+ "8xl": {
+ "value": "90rem"
+ },
+ "0.5": {
+ "value": "0.125rem"
+ },
+ "1.5": {
+ "value": "0.375rem"
+ },
+ "2.5": {
+ "value": "0.625rem"
+ },
+ "3.5": {
+ "value": "0.875rem"
+ },
+ "4.5": {
+ "value": "1.125rem"
+ },
+ "1/2": {
+ "value": "50%"
+ },
+ "1/3": {
+ "value": "33.333333%"
+ },
+ "2/3": {
+ "value": "66.666667%"
+ },
+ "1/4": {
+ "value": "25%"
+ },
+ "3/4": {
+ "value": "75%"
+ },
+ "1/5": {
+ "value": "20%"
+ },
+ "2/5": {
+ "value": "40%"
+ },
+ "3/5": {
+ "value": "60%"
+ },
+ "4/5": {
+ "value": "80%"
+ },
+ "1/6": {
+ "value": "16.666667%"
+ },
+ "2/6": {
+ "value": "33.333333%"
+ },
+ "3/6": {
+ "value": "50%"
+ },
+ "4/6": {
+ "value": "66.666667%"
+ },
+ "5/6": {
+ "value": "83.333333%"
+ },
+ "1/12": {
+ "value": "8.333333%"
+ },
+ "2/12": {
+ "value": "16.666667%"
+ },
+ "3/12": {
+ "value": "25%"
+ },
+ "4/12": {
+ "value": "33.333333%"
+ },
+ "5/12": {
+ "value": "41.666667%"
+ },
+ "6/12": {
+ "value": "50%"
+ },
+ "7/12": {
+ "value": "58.333333%"
+ },
+ "8/12": {
+ "value": "66.666667%"
+ },
+ "9/12": {
+ "value": "75%"
+ },
+ "10/12": {
+ "value": "83.333333%"
+ },
+ "11/12": {
+ "value": "91.666667%"
+ },
+ "max": {
+ "value": "max-content"
+ },
+ "min": {
+ "value": "min-content"
+ },
+ "fit": {
+ "value": "fit-content"
+ },
+ "prose": {
+ "value": "60ch"
+ },
+ "full": {
+ "value": "100%"
+ },
+ "dvh": {
+ "value": "100dvh"
+ },
+ "svh": {
+ "value": "100svh"
+ },
+ "lvh": {
+ "value": "100lvh"
+ },
+ "dvw": {
+ "value": "100dvw"
+ },
+ "svw": {
+ "value": "100svw"
+ },
+ "lvw": {
+ "value": "100lvw"
+ },
+ "vw": {
+ "value": "100vw"
+ },
+ "vh": {
+ "value": "100vh"
+ }
+ },
+ "zIndex": {
+ "hide": {
+ "value": -1
+ },
+ "base": {
+ "value": 0
+ },
+ "docked": {
+ "value": 10
+ },
+ "dropdown": {
+ "value": 1000
+ },
+ "sticky": {
+ "value": 1100
+ },
+ "banner": {
+ "value": 1200
+ },
+ "overlay": {
+ "value": 1300
+ },
+ "modal": {
+ "value": 1400
+ },
+ "popover": {
+ "value": 1500
+ },
+ "skipNav": {
+ "value": 1600
+ },
+ "toast": {
+ "value": 1700
+ },
+ "tooltip": {
+ "value": 1800
+ },
+ "max": {
+ "value": 2147483647
+ }
+ },
+ "cursor": {
+ "button": {
+ "value": "pointer"
+ },
+ "checkbox": {
+ "value": "default"
+ },
+ "disabled": {
+ "value": "not-allowed"
+ },
+ "menuitem": {
+ "value": "default"
+ },
+ "option": {
+ "value": "default"
+ },
+ "radio": {
+ "value": "default"
+ },
+ "slider": {
+ "value": "default"
+ },
+ "switch": {
+ "value": "pointer"
+ }
+ }
+ },
+ "semanticTokens": {
+ "colors": {
+ "bg": {
+ "DEFAULT": {
+ "value": {
+ "_light": "{colors.white}",
+ "_dark": "{colors.black}"
+ }
+ },
+ "subtle": {
+ "value": {
+ "_light": "{colors.gray.50}",
+ "_dark": "{colors.gray.950}"
+ }
+ },
+ "muted": {
+ "value": {
+ "_light": "{colors.gray.100}",
+ "_dark": "{colors.gray.900}"
+ }
+ },
+ "emphasized": {
+ "value": {
+ "_light": "{colors.gray.200}",
+ "_dark": "{colors.gray.800}"
+ }
+ },
+ "inverted": {
+ "value": {
+ "_light": "{colors.black}",
+ "_dark": "{colors.white}"
+ }
+ },
+ "panel": {
+ "value": {
+ "_light": "{colors.white}",
+ "_dark": "{colors.gray.950}"
+ }
+ },
+ "error": {
+ "value": {
+ "_light": "{colors.red.50}",
+ "_dark": "{colors.red.950}"
+ }
+ },
+ "warning": {
+ "value": {
+ "_light": "{colors.orange.50}",
+ "_dark": "{colors.orange.950}"
+ }
+ },
+ "success": {
+ "value": {
+ "_light": "{colors.green.50}",
+ "_dark": "{colors.green.950}"
+ }
+ },
+ "info": {
+ "value": {
+ "_light": "{colors.blue.50}",
+ "_dark": "{colors.blue.950}"
+ }
+ }
+ },
+ "fg": {
+ "DEFAULT": {
+ "value": {
+ "_light": "{colors.black}",
+ "_dark": "{colors.gray.50}"
+ }
+ },
+ "muted": {
+ "value": {
+ "_light": "{colors.gray.600}",
+ "_dark": "{colors.gray.400}"
+ }
+ },
+ "subtle": {
+ "value": {
+ "_light": "{colors.gray.400}",
+ "_dark": "{colors.gray.500}"
+ }
+ },
+ "inverted": {
+ "value": {
+ "_light": "{colors.gray.50}",
+ "_dark": "{colors.black}"
+ }
+ },
+ "error": {
+ "value": {
+ "_light": "{colors.red.500}",
+ "_dark": "{colors.red.400}"
+ }
+ },
+ "warning": {
+ "value": {
+ "_light": "{colors.orange.600}",
+ "_dark": "{colors.orange.300}"
+ }
+ },
+ "success": {
+ "value": {
+ "_light": "{colors.green.600}",
+ "_dark": "{colors.green.300}"
+ }
+ },
+ "info": {
+ "value": {
+ "_light": "{colors.blue.600}",
+ "_dark": "{colors.blue.300}"
+ }
+ }
+ },
+ "border": {
+ "DEFAULT": {
+ "value": {
+ "_light": "{colors.gray.200}",
+ "_dark": "{colors.gray.800}"
+ }
+ },
+ "muted": {
+ "value": {
+ "_light": "{colors.gray.100}",
+ "_dark": "{colors.gray.900}"
+ }
+ },
+ "subtle": {
+ "value": {
+ "_light": "{colors.gray.50}",
+ "_dark": "{colors.gray.950}"
+ }
+ },
+ "emphasized": {
+ "value": {
+ "_light": "{colors.gray.300}",
+ "_dark": "{colors.gray.700}"
+ }
+ },
+ "inverted": {
+ "value": {
+ "_light": "{colors.gray.800}",
+ "_dark": "{colors.gray.200}"
+ }
+ },
+ "error": {
+ "value": {
+ "_light": "{colors.red.500}",
+ "_dark": "{colors.red.400}"
+ }
+ },
+ "warning": {
+ "value": {
+ "_light": "{colors.orange.500}",
+ "_dark": "{colors.orange.400}"
+ }
+ },
+ "success": {
+ "value": {
+ "_light": "{colors.green.500}",
+ "_dark": "{colors.green.400}"
+ }
+ },
+ "info": {
+ "value": {
+ "_light": "{colors.blue.500}",
+ "_dark": "{colors.blue.400}"
+ }
+ }
+ },
+ "gray": {
+ "contrast": {
+ "value": {
+ "_light": "{colors.white}",
+ "_dark": "{colors.black}"
+ }
+ },
+ "fg": {
+ "value": {
+ "_light": "{colors.gray.800}",
+ "_dark": "{colors.gray.200}"
+ }
+ },
+ "subtle": {
+ "value": {
+ "_light": "{colors.gray.100}",
+ "_dark": "{colors.gray.900}"
+ }
+ },
+ "muted": {
+ "value": {
+ "_light": "{colors.gray.200}",
+ "_dark": "{colors.gray.800}"
+ }
+ },
+ "emphasized": {
+ "value": {
+ "_light": "{colors.gray.300}",
+ "_dark": "{colors.gray.700}"
+ }
+ },
+ "solid": {
+ "value": {
+ "_light": "{colors.gray.900}",
+ "_dark": "{colors.white}"
+ }
+ },
+ "focusRing": {
+ "value": {
+ "_light": "{colors.gray.800}",
+ "_dark": "{colors.gray.200}"
+ }
+ }
+ },
+ "red": {
+ "contrast": {
+ "value": {
+ "_light": "white",
+ "_dark": "white"
+ }
+ },
+ "fg": {
+ "value": {
+ "_light": "{colors.red.700}",
+ "_dark": "{colors.red.300}"
+ }
+ },
+ "subtle": {
+ "value": {
+ "_light": "{colors.red.100}",
+ "_dark": "{colors.red.900}"
+ }
+ },
+ "muted": {
+ "value": {
+ "_light": "{colors.red.200}",
+ "_dark": "{colors.red.800}"
+ }
+ },
+ "emphasized": {
+ "value": {
+ "_light": "{colors.red.300}",
+ "_dark": "{colors.red.700}"
+ }
+ },
+ "solid": {
+ "value": {
+ "_light": "{colors.red.600}",
+ "_dark": "{colors.red.600}"
+ }
+ },
+ "focusRing": {
+ "value": {
+ "_light": "{colors.red.600}",
+ "_dark": "{colors.red.600}"
+ }
+ }
+ },
+ "orange": {
+ "contrast": {
+ "value": {
+ "_light": "white",
+ "_dark": "black"
+ }
+ },
+ "fg": {
+ "value": {
+ "_light": "{colors.orange.700}",
+ "_dark": "{colors.orange.300}"
+ }
+ },
+ "subtle": {
+ "value": {
+ "_light": "{colors.orange.100}",
+ "_dark": "{colors.orange.900}"
+ }
+ },
+ "muted": {
+ "value": {
+ "_light": "{colors.orange.200}",
+ "_dark": "{colors.orange.800}"
+ }
+ },
+ "emphasized": {
+ "value": {
+ "_light": "{colors.orange.300}",
+ "_dark": "{colors.orange.700}"
+ }
+ },
+ "solid": {
+ "value": {
+ "_light": "{colors.orange.600}",
+ "_dark": "{colors.orange.500}"
+ }
+ },
+ "focusRing": {
+ "value": {
+ "_light": "{colors.orange.600}",
+ "_dark": "{colors.orange.500}"
+ }
+ }
+ },
+ "green": {
+ "contrast": {
+ "value": {
+ "_light": "white",
+ "_dark": "white"
+ }
+ },
+ "fg": {
+ "value": {
+ "_light": "{colors.green.700}",
+ "_dark": "{colors.green.300}"
+ }
+ },
+ "subtle": {
+ "value": {
+ "_light": "{colors.green.100}",
+ "_dark": "{colors.green.900}"
+ }
+ },
+ "muted": {
+ "value": {
+ "_light": "{colors.green.200}",
+ "_dark": "{colors.green.800}"
+ }
+ },
+ "emphasized": {
+ "value": {
+ "_light": "{colors.green.300}",
+ "_dark": "{colors.green.700}"
+ }
+ },
+ "solid": {
+ "value": {
+ "_light": "{colors.green.600}",
+ "_dark": "{colors.green.600}"
+ }
+ },
+ "focusRing": {
+ "value": {
+ "_light": "{colors.green.600}",
+ "_dark": "{colors.green.600}"
+ }
+ }
+ },
+ "blue": {
+ "contrast": {
+ "value": {
+ "_light": "white",
+ "_dark": "white"
+ }
+ },
+ "fg": {
+ "value": {
+ "_light": "{colors.blue.700}",
+ "_dark": "{colors.blue.300}"
+ }
+ },
+ "subtle": {
+ "value": {
+ "_light": "{colors.blue.100}",
+ "_dark": "{colors.blue.900}"
+ }
+ },
+ "muted": {
+ "value": {
+ "_light": "{colors.blue.200}",
+ "_dark": "{colors.blue.800}"
+ }
+ },
+ "emphasized": {
+ "value": {
+ "_light": "{colors.blue.300}",
+ "_dark": "{colors.blue.700}"
+ }
+ },
+ "solid": {
+ "value": {
+ "_light": "{colors.blue.600}",
+ "_dark": "{colors.blue.600}"
+ }
+ },
+ "focusRing": {
+ "value": {
+ "_light": "{colors.blue.600}",
+ "_dark": "{colors.blue.600}"
+ }
+ }
+ },
+ "yellow": {
+ "contrast": {
+ "value": {
+ "_light": "black",
+ "_dark": "black"
+ }
+ },
+ "fg": {
+ "value": {
+ "_light": "{colors.yellow.800}",
+ "_dark": "{colors.yellow.300}"
+ }
+ },
+ "subtle": {
+ "value": {
+ "_light": "{colors.yellow.100}",
+ "_dark": "{colors.yellow.900}"
+ }
+ },
+ "muted": {
+ "value": {
+ "_light": "{colors.yellow.200}",
+ "_dark": "{colors.yellow.800}"
+ }
+ },
+ "emphasized": {
+ "value": {
+ "_light": "{colors.yellow.300}",
+ "_dark": "{colors.yellow.700}"
+ }
+ },
+ "solid": {
+ "value": {
+ "_light": "{colors.yellow.300}",
+ "_dark": "{colors.yellow.300}"
+ }
+ },
+ "focusRing": {
+ "value": {
+ "_light": "{colors.yellow.300}",
+ "_dark": "{colors.yellow.300}"
+ }
+ }
+ },
+ "teal": {
+ "contrast": {
+ "value": {
+ "_light": "white",
+ "_dark": "white"
+ }
+ },
+ "fg": {
+ "value": {
+ "_light": "{colors.teal.700}",
+ "_dark": "{colors.teal.300}"
+ }
+ },
+ "subtle": {
+ "value": {
+ "_light": "{colors.teal.100}",
+ "_dark": "{colors.teal.900}"
+ }
+ },
+ "muted": {
+ "value": {
+ "_light": "{colors.teal.200}",
+ "_dark": "{colors.teal.800}"
+ }
+ },
+ "emphasized": {
+ "value": {
+ "_light": "{colors.teal.300}",
+ "_dark": "{colors.teal.700}"
+ }
+ },
+ "solid": {
+ "value": {
+ "_light": "{colors.teal.600}",
+ "_dark": "{colors.teal.600}"
+ }
+ },
+ "focusRing": {
+ "value": {
+ "_light": "{colors.teal.600}",
+ "_dark": "{colors.teal.600}"
+ }
+ }
+ },
+ "purple": {
+ "contrast": {
+ "value": {
+ "_light": "white",
+ "_dark": "white"
+ }
+ },
+ "fg": {
+ "value": {
+ "_light": "{colors.purple.700}",
+ "_dark": "{colors.purple.300}"
+ }
+ },
+ "subtle": {
+ "value": {
+ "_light": "{colors.purple.100}",
+ "_dark": "{colors.purple.900}"
+ }
+ },
+ "muted": {
+ "value": {
+ "_light": "{colors.purple.200}",
+ "_dark": "{colors.purple.800}"
+ }
+ },
+ "emphasized": {
+ "value": {
+ "_light": "{colors.purple.300}",
+ "_dark": "{colors.purple.700}"
+ }
+ },
+ "solid": {
+ "value": {
+ "_light": "{colors.purple.600}",
+ "_dark": "{colors.purple.600}"
+ }
+ },
+ "focusRing": {
+ "value": {
+ "_light": "{colors.purple.600}",
+ "_dark": "{colors.purple.600}"
+ }
+ }
+ },
+ "pink": {
+ "contrast": {
+ "value": {
+ "_light": "white",
+ "_dark": "white"
+ }
+ },
+ "fg": {
+ "value": {
+ "_light": "{colors.pink.700}",
+ "_dark": "{colors.pink.300}"
+ }
+ },
+ "subtle": {
+ "value": {
+ "_light": "{colors.pink.100}",
+ "_dark": "{colors.pink.900}"
+ }
+ },
+ "muted": {
+ "value": {
+ "_light": "{colors.pink.200}",
+ "_dark": "{colors.pink.800}"
+ }
+ },
+ "emphasized": {
+ "value": {
+ "_light": "{colors.pink.300}",
+ "_dark": "{colors.pink.700}"
+ }
+ },
+ "solid": {
+ "value": {
+ "_light": "{colors.pink.600}",
+ "_dark": "{colors.pink.600}"
+ }
+ },
+ "focusRing": {
+ "value": {
+ "_light": "{colors.pink.600}",
+ "_dark": "{colors.pink.600}"
+ }
+ }
+ },
+ "cyan": {
+ "contrast": {
+ "value": {
+ "_light": "white",
+ "_dark": "white"
+ }
+ },
+ "fg": {
+ "value": {
+ "_light": "{colors.cyan.700}",
+ "_dark": "{colors.cyan.300}"
+ }
+ },
+ "subtle": {
+ "value": {
+ "_light": "{colors.cyan.100}",
+ "_dark": "{colors.cyan.900}"
+ }
+ },
+ "muted": {
+ "value": {
+ "_light": "{colors.cyan.200}",
+ "_dark": "{colors.cyan.800}"
+ }
+ },
+ "emphasized": {
+ "value": {
+ "_light": "{colors.cyan.300}",
+ "_dark": "{colors.cyan.700}"
+ }
+ },
+ "solid": {
+ "value": {
+ "_light": "{colors.cyan.600}",
+ "_dark": "{colors.cyan.600}"
+ }
+ },
+ "focusRing": {
+ "value": {
+ "_light": "{colors.cyan.600}",
+ "_dark": "{colors.cyan.600}"
+ }
+ }
+ }
+ },
+ "shadows": {
+ "xs": {
+ "value": {
+ "_light": "0px 1px 2px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/20}",
+ "_dark": "0px 1px 1px {black/64}, 0px 0px 1px inset {colors.gray.300/20}"
+ }
+ },
+ "sm": {
+ "value": {
+ "_light": "0px 2px 4px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
+ "_dark": "0px 2px 4px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
+ }
+ },
+ "md": {
+ "value": {
+ "_light": "0px 4px 8px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
+ "_dark": "0px 4px 8px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
+ }
+ },
+ "lg": {
+ "value": {
+ "_light": "0px 8px 16px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
+ "_dark": "0px 8px 16px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
+ }
+ },
+ "xl": {
+ "value": {
+ "_light": "0px 16px 24px {colors.gray.900/10}, 0px 0px 1px {colors.gray.900/30}",
+ "_dark": "0px 16px 24px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
+ }
+ },
+ "2xl": {
+ "value": {
+ "_light": "0px 24px 40px {colors.gray.900/16}, 0px 0px 1px {colors.gray.900/30}",
+ "_dark": "0px 24px 40px {black/64}, 0px 0px 1px inset {colors.gray.300/30}"
+ }
+ },
+ "inner": {
+ "value": {
+ "_light": "inset 0 2px 4px 0 {black/5}",
+ "_dark": "inset 0 2px 4px 0 black"
+ }
+ },
+ "inset": {
+ "value": {
+ "_light": "inset 0 0 0 1px {black/5}",
+ "_dark": "inset 0 0 0 1px {colors.gray.300/5}"
+ }
+ }
+ },
+ "radii": {
+ "l1": {
+ "value": "{radii.xs}"
+ },
+ "l2": {
+ "value": "{radii.sm}"
+ },
+ "l3": {
+ "value": "{radii.md}"
+ }
+ }
+ },
+ "recipes": {
+ "badge": {
+ "className": "chakra-badge",
+ "base": {
+ "display": "inline-flex",
+ "alignItems": "center",
+ "borderRadius": "l2",
+ "gap": "1",
+ "fontWeight": "medium",
+ "fontVariantNumeric": "tabular-nums",
+ "whiteSpace": "nowrap",
+ "userSelect": "none"
+ },
+ "variants": {
+ "variant": {
+ "solid": {
+ "bg": "colorPalette.solid",
+ "color": "colorPalette.contrast"
+ },
+ "subtle": {
+ "bg": "colorPalette.subtle",
+ "color": "colorPalette.fg"
+ },
+ "outline": {
+ "color": "colorPalette.fg",
+ "shadow": "inset 0 0 0px 1px var(--shadow-color)",
+ "shadowColor": "colorPalette.muted"
+ },
+ "surface": {
+ "bg": "colorPalette.subtle",
+ "color": "colorPalette.fg",
+ "shadow": "inset 0 0 0px 1px var(--shadow-color)",
+ "shadowColor": "colorPalette.muted"
+ },
+ "plain": {
+ "color": "colorPalette.fg"
+ }
+ },
+ "size": {
+ "xs": {
+ "textStyle": "2xs",
+ "px": "1",
+ "minH": "4"
+ },
+ "sm": {
+ "textStyle": "xs",
+ "px": "1.5",
+ "minH": "5"
+ },
+ "md": {
+ "textStyle": "sm",
+ "px": "2",
+ "minH": "6"
+ },
+ "lg": {
+ "textStyle": "sm",
+ "px": "2.5",
+ "minH": "7"
+ }
+ }
+ },
+ "defaultVariants": {
+ "variant": "subtle",
+ "size": "sm"
+ }
+ },
+ "button": {
+ "className": "chakra-button",
+ "base": {
+ "display": "inline-flex",
+ "appearance": "none",
+ "alignItems": "center",
+ "justifyContent": "center",
+ "userSelect": "none",
+ "position": "relative",
+ "borderRadius": "l2",
+ "whiteSpace": "nowrap",
+ "verticalAlign": "middle",
+ "borderWidth": "1px",
+ "borderColor": "transparent",
+ "cursor": "button",
+ "flexShrink": "0",
+ "outline": "0",
+ "lineHeight": "1.2",
+ "isolation": "isolate",
+ "fontWeight": "medium",
+ "transitionProperty": "common",
+ "transitionDuration": "moderate",
+ "focusVisibleRing": "outside",
+ "_disabled": {
+ "layerStyle": "disabled"
+ },
+ "_icon": {
+ "flexShrink": "0"
+ }
+ },
+ "variants": {
+ "size": {
+ "2xs": {
+ "h": "6",
+ "minW": "6",
+ "textStyle": "xs",
+ "px": "2",
+ "gap": "1",
+ "_icon": {
+ "width": "3.5",
+ "height": "3.5"
+ }
+ },
+ "xs": {
+ "h": "8",
+ "minW": "8",
+ "textStyle": "xs",
+ "px": "2.5",
+ "gap": "1",
+ "_icon": {
+ "width": "4",
+ "height": "4"
+ }
+ },
+ "sm": {
+ "h": "9",
+ "minW": "9",
+ "px": "3.5",
+ "textStyle": "sm",
+ "gap": "2",
+ "_icon": {
+ "width": "4",
+ "height": "4"
+ }
+ },
+ "md": {
+ "h": "10",
+ "minW": "10",
+ "textStyle": "sm",
+ "px": "4",
+ "gap": "2",
+ "_icon": {
+ "width": "5",
+ "height": "5"
+ }
+ },
+ "lg": {
+ "h": "11",
+ "minW": "11",
+ "textStyle": "md",
+ "px": "5",
+ "gap": "3",
+ "_icon": {
+ "width": "5",
+ "height": "5"
+ }
+ },
+ "xl": {
+ "h": "12",
+ "minW": "12",
+ "textStyle": "md",
+ "px": "5",
+ "gap": "2.5",
+ "_icon": {
+ "width": "5",
+ "height": "5"
+ }
+ },
+ "2xl": {
+ "h": "16",
+ "minW": "16",
+ "textStyle": "lg",
+ "px": "7",
+ "gap": "3",
+ "_icon": {
+ "width": "6",
+ "height": "6"
+ }
+ }
+ },
+ "variant": {
+ "solid": {
+ "bg": "colorPalette.solid",
+ "color": "colorPalette.contrast",
+ "_hover": {
+ "bg": "colorPalette.solid/90"
+ },
+ "_expanded": {
+ "bg": "colorPalette.solid/90"
+ }
+ },
+ "subtle": {
+ "bg": "colorPalette.subtle",
+ "color": "colorPalette.fg",
+ "_hover": {
+ "bg": "colorPalette.muted"
+ },
+ "_expanded": {
+ "bg": "colorPalette.muted"
+ }
+ },
+ "surface": {
+ "bg": "colorPalette.subtle",
+ "color": "colorPalette.fg",
+ "shadow": "0 0 0px 1px var(--shadow-color)",
+ "shadowColor": "colorPalette.muted",
+ "_hover": {
+ "bg": "colorPalette.muted"
+ },
+ "_expanded": {
+ "bg": "colorPalette.muted"
+ }
+ },
+ "outline": {
+ "borderWidth": "1px",
+ "borderColor": "colorPalette.muted",
+ "color": "colorPalette.fg",
+ "_hover": {
+ "bg": "colorPalette.subtle"
+ },
+ "_expanded": {
+ "bg": "colorPalette.subtle"
+ }
+ },
+ "ghost": {
+ "color": "colorPalette.fg",
+ "_hover": {
+ "bg": "colorPalette.subtle"
+ },
+ "_expanded": {
+ "bg": "colorPalette.subtle"
+ }
+ },
+ "plain": {
+ "color": "colorPalette.fg"
+ }
+ }
+ },
+ "defaultVariants": {
+ "size": "md",
+ "variant": "solid"
+ }
+ },
+ "code": {
+ "className": "chakra-code",
+ "base": {
+ "fontFamily": "mono",
+ "alignItems": "center",
+ "display": "inline-flex",
+ "borderRadius": "l2"
+ },
+ "variants": {
+ "variant": {
+ "solid": {
+ "bg": "colorPalette.solid",
+ "color": "colorPalette.contrast"
+ },
+ "subtle": {
+ "bg": "colorPalette.subtle",
+ "color": "colorPalette.fg"
+ },
+ "outline": {
+ "color": "colorPalette.fg",
+ "shadow": "inset 0 0 0px 1px var(--shadow-color)",
+ "shadowColor": "colorPalette.muted"
+ },
+ "surface": {
+ "bg": "colorPalette.subtle",
+ "color": "colorPalette.fg",
+ "shadow": "inset 0 0 0px 1px var(--shadow-color)",
+ "shadowColor": "colorPalette.muted"
+ },
+ "plain": {
+ "color": "colorPalette.fg"
+ }
+ },
+ "size": {
+ "xs": {
+ "textStyle": "2xs",
+ "px": "1",
+ "minH": "4"
+ },
+ "sm": {
+ "textStyle": "xs",
+ "px": "1.5",
+ "minH": "5"
+ },
+ "md": {
+ "textStyle": "sm",
+ "px": "2",
+ "minH": "6"
+ },
+ "lg": {
+ "textStyle": "sm",
+ "px": "2.5",
+ "minH": "7"
+ }
+ }
+ },
+ "defaultVariants": {
+ "variant": "subtle",
+ "size": "sm"
+ }
+ },
+ "container": {
+ "className": "chakra-container",
+ "base": {
+ "position": "relative",
+ "maxWidth": "8xl",
+ "w": "100%",
+ "mx": "auto",
+ "px": {
+ "base": "4",
+ "md": "6",
+ "lg": "8"
+ }
+ },
+ "variants": {
+ "centerContent": {
+ "true": {
+ "display": "flex",
+ "flexDirection": "column",
+ "alignItems": "center"
+ }
+ },
+ "fluid": {
+ "true": {
+ "maxWidth": "full"
+ }
+ }
+ }
+ },
+ "heading": {
+ "className": "chakra-heading",
+ "base": {
+ "fontFamily": "heading",
+ "fontWeight": "semibold"
+ },
+ "variants": {
+ "size": {
+ "xs": {
+ "textStyle": "xs"
+ },
+ "sm": {
+ "textStyle": "sm"
+ },
+ "md": {
+ "textStyle": "md"
+ },
+ "lg": {
+ "textStyle": "lg"
+ },
+ "xl": {
+ "textStyle": "xl"
+ },
+ "2xl": {
+ "textStyle": "2xl"
+ },
+ "3xl": {
+ "textStyle": "3xl"
+ },
+ "4xl": {
+ "textStyle": "4xl"
+ },
+ "5xl": {
+ "textStyle": "5xl"
+ },
+ "6xl": {
+ "textStyle": "6xl"
+ },
+ "7xl": {
+ "textStyle": "7xl"
+ }
+ }
+ },
+ "defaultVariants": {
+ "size": "xl"
+ }
+ },
+ "input": {
+ "className": "chakra-input",
+ "base": {
+ "width": "100%",
+ "minWidth": "0",
+ "outline": "0",
+ "position": "relative",
+ "appearance": "none",
+ "textAlign": "start",
+ "borderRadius": "l2",
+ "_disabled": {
+ "layerStyle": "disabled"
+ },
+ "height": "var(--input-height)",
+ "minW": "var(--input-height)",
+ "--focus-color": "colors.colorPalette.focusRing",
+ "--error-color": "colors.border.error",
+ "_invalid": {
+ "focusRingColor": "var(--error-color)",
+ "borderColor": "var(--error-color)"
+ }
+ },
+ "variants": {
+ "size": {
+ "2xs": {
+ "textStyle": "xs",
+ "px": "2",
+ "--input-height": "sizes.7"
+ },
+ "xs": {
+ "textStyle": "xs",
+ "px": "2",
+ "--input-height": "sizes.8"
+ },
+ "sm": {
+ "textStyle": "sm",
+ "px": "2.5",
+ "--input-height": "sizes.9"
+ },
+ "md": {
+ "textStyle": "sm",
+ "px": "3",
+ "--input-height": "sizes.10"
+ },
+ "lg": {
+ "textStyle": "md",
+ "px": "4",
+ "--input-height": "sizes.11"
+ },
+ "xl": {
+ "textStyle": "md",
+ "px": "4.5",
+ "--input-height": "sizes.12"
+ },
+ "2xl": {
+ "textStyle": "lg",
+ "px": "5",
+ "--input-height": "sizes.16"
+ }
+ },
+ "variant": {
+ "outline": {
+ "bg": "transparent",
+ "borderWidth": "1px",
+ "borderColor": "border",
+ "focusVisibleRing": "inside"
+ },
+ "subtle": {
+ "borderWidth": "1px",
+ "borderColor": "transparent",
+ "bg": "bg.muted",
+ "focusVisibleRing": "inside"
+ },
+ "flushed": {
+ "bg": "transparent",
+ "borderBottomWidth": "1px",
+ "borderBottomColor": "border",
+ "borderRadius": "0",
+ "px": "0",
+ "_focusVisible": {
+ "borderColor": "var(--focus-color)",
+ "boxShadow": "0px 1px 0px 0px var(--focus-color)"
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "size": "md",
+ "variant": "outline"
+ }
+ },
+ "inputAddon": {
+ "className": "chakra-input-addon",
+ "base": {
+ "flex": "0 0 auto",
+ "width": "auto",
+ "display": "flex",
+ "alignItems": "center",
+ "whiteSpace": "nowrap",
+ "alignSelf": "stretch",
+ "borderRadius": "l2"
+ },
+ "variants": {
+ "size": {
+ "2xs": {
+ "textStyle": "xs",
+ "px": "2",
+ "--input-height": "sizes.7"
+ },
+ "xs": {
+ "textStyle": "xs",
+ "px": "2",
+ "--input-height": "sizes.8"
+ },
+ "sm": {
+ "textStyle": "sm",
+ "px": "2.5",
+ "--input-height": "sizes.9"
+ },
+ "md": {
+ "textStyle": "sm",
+ "px": "3",
+ "--input-height": "sizes.10"
+ },
+ "lg": {
+ "textStyle": "md",
+ "px": "4",
+ "--input-height": "sizes.11"
+ },
+ "xl": {
+ "textStyle": "md",
+ "px": "4.5",
+ "--input-height": "sizes.12"
+ },
+ "2xl": {
+ "textStyle": "lg",
+ "px": "5",
+ "--input-height": "sizes.16"
+ }
+ },
+ "variant": {
+ "outline": {
+ "borderWidth": "1px",
+ "borderColor": "border",
+ "bg": "bg.muted"
+ },
+ "subtle": {
+ "borderWidth": "1px",
+ "borderColor": "transparent",
+ "bg": "bg.emphasized"
+ },
+ "flushed": {
+ "borderBottom": "1px solid",
+ "borderColor": "inherit",
+ "borderRadius": "0",
+ "px": "0",
+ "bg": "transparent"
+ }
+ }
+ },
+ "defaultVariants": {
+ "size": "md",
+ "variant": "outline"
+ }
+ },
+ "kbd": {
+ "className": "chakra-kbd",
+ "base": {
+ "display": "inline-flex",
+ "alignItems": "center",
+ "fontWeight": "medium",
+ "fontFamily": "mono",
+ "flexShrink": "0",
+ "whiteSpace": "nowrap",
+ "wordSpacing": "-0.5em",
+ "userSelect": "none",
+ "px": "1",
+ "borderRadius": "l2"
+ },
+ "variants": {
+ "variant": {
+ "raised": {
+ "bg": "colorPalette.subtle",
+ "color": "colorPalette.fg",
+ "borderWidth": "1px",
+ "borderBottomWidth": "2px",
+ "borderColor": "colorPalette.muted"
+ },
+ "outline": {
+ "borderWidth": "1px",
+ "color": "colorPalette.fg"
+ },
+ "subtle": {
+ "bg": "colorPalette.muted",
+ "color": "colorPalette.fg"
+ },
+ "plain": {
+ "color": "colorPalette.fg"
+ }
+ },
+ "size": {
+ "sm": {
+ "textStyle": "xs",
+ "height": "4.5"
+ },
+ "md": {
+ "textStyle": "sm",
+ "height": "5"
+ },
+ "lg": {
+ "textStyle": "md",
+ "height": "6"
+ }
+ }
+ },
+ "defaultVariants": {
+ "size": "md",
+ "variant": "raised"
+ }
+ },
+ "link": {
+ "className": "chakra-link",
+ "base": {
+ "display": "inline-flex",
+ "alignItems": "center",
+ "outline": "none",
+ "gap": "1.5",
+ "cursor": "pointer",
+ "borderRadius": "l1",
+ "focusRing": "outside"
+ },
+ "variants": {
+ "variant": {
+ "underline": {
+ "color": "colorPalette.fg",
+ "textDecoration": "underline",
+ "textUnderlineOffset": "3px",
+ "textDecorationColor": "currentColor/20"
+ },
+ "plain": {
+ "color": "colorPalette.fg",
+ "_hover": {
+ "textDecoration": "underline",
+ "textUnderlineOffset": "3px",
+ "textDecorationColor": "currentColor/20"
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "variant": "plain"
+ }
+ },
+ "mark": {
+ "className": "chakra-mark",
+ "base": {
+ "bg": "transparent",
+ "color": "inherit",
+ "whiteSpace": "nowrap"
+ },
+ "variants": {
+ "variant": {
+ "subtle": {
+ "bg": "colorPalette.subtle",
+ "color": "inherit"
+ },
+ "solid": {
+ "bg": "colorPalette.solid",
+ "color": "colorPalette.contrast"
+ },
+ "text": {
+ "fontWeight": "medium"
+ },
+ "plain": {}
+ }
+ }
+ },
+ "separator": {
+ "className": "chakra-separator",
+ "base": {
+ "display": "block",
+ "borderColor": "border"
+ },
+ "variants": {
+ "variant": {
+ "solid": {
+ "borderStyle": "solid"
+ },
+ "dashed": {
+ "borderStyle": "dashed"
+ },
+ "dotted": {
+ "borderStyle": "dotted"
+ }
+ },
+ "orientation": {
+ "vertical": {
+ "height": "100%",
+ "borderInlineStartWidth": "var(--separator-thickness)"
+ },
+ "horizontal": {
+ "width": "100%",
+ "borderTopWidth": "var(--separator-thickness)"
+ }
+ },
+ "size": {
+ "xs": {
+ "--separator-thickness": "0.5px"
+ },
+ "sm": {
+ "--separator-thickness": "1px"
+ },
+ "md": {
+ "--separator-thickness": "2px"
+ },
+ "lg": {
+ "--separator-thickness": "3px"
+ }
+ }
+ },
+ "defaultVariants": {
+ "size": "sm",
+ "variant": "solid",
+ "orientation": "horizontal"
+ }
+ },
+ "skeleton": {
+ "className": "chakra-skeleton",
+ "base": {},
+ "variants": {
+ "loading": {
+ "true": {
+ "borderRadius": "l2",
+ "boxShadow": "none",
+ "backgroundClip": "padding-box",
+ "cursor": "default",
+ "color": "transparent",
+ "pointerEvents": "none",
+ "userSelect": "none",
+ "flexShrink": "0",
+ "&::before, &::after, *": {
+ "visibility": "hidden"
+ }
+ },
+ "false": {
+ "background": "unset",
+ "animation": "fade-in var(--fade-duration, 0.1s) ease-out !important"
+ }
+ },
+ "variant": {
+ "pulse": {
+ "background": "bg.emphasized",
+ "animation": "pulse",
+ "animationDuration": "var(--duration, 1.2s)"
+ },
+ "shine": {
+ "--animate-from": "200%",
+ "--animate-to": "-200%",
+ "--start-color": "colors.bg.muted",
+ "--end-color": "colors.bg.emphasized",
+ "backgroundImage": "linear-gradient(270deg,var(--start-color),var(--end-color),var(--end-color),var(--start-color))",
+ "backgroundSize": "400% 100%",
+ "animation": "bg-position var(--duration, 5s) ease-in-out infinite"
+ },
+ "none": {
+ "animation": "none"
+ }
+ }
+ },
+ "defaultVariants": {
+ "variant": "pulse",
+ "loading": true
+ }
+ },
+ "skipNavLink": {
+ "className": "chakra-skip-nav",
+ "base": {
+ "display": "inline-flex",
+ "bg": "bg.panel",
+ "padding": "2.5",
+ "borderRadius": "l2",
+ "fontWeight": "semibold",
+ "focusVisibleRing": "outside",
+ "textStyle": "sm",
+ "userSelect": "none",
+ "border": "0",
+ "height": "1px",
+ "width": "1px",
+ "margin": "-1px",
+ "outline": "0",
+ "overflow": "hidden",
+ "position": "absolute",
+ "clip": "rect(0 0 0 0)",
+ "_focusVisible": {
+ "clip": "auto",
+ "width": "auto",
+ "height": "auto",
+ "position": "fixed",
+ "top": "6",
+ "insetStart": "6"
+ }
+ }
+ },
+ "spinner": {
+ "className": "chakra-spinner",
+ "base": {
+ "display": "inline-block",
+ "borderColor": "currentColor",
+ "borderStyle": "solid",
+ "borderWidth": "2px",
+ "borderRadius": "full",
+ "width": "var(--spinner-size)",
+ "height": "var(--spinner-size)",
+ "animation": "spin",
+ "animationDuration": "slowest",
+ "--spinner-track-color": "transparent",
+ "borderBottomColor": "var(--spinner-track-color)",
+ "borderInlineStartColor": "var(--spinner-track-color)"
+ },
+ "variants": {
+ "size": {
+ "inherit": {
+ "--spinner-size": "1em"
+ },
+ "xs": {
+ "--spinner-size": "sizes.3"
+ },
+ "sm": {
+ "--spinner-size": "sizes.4"
+ },
+ "md": {
+ "--spinner-size": "sizes.5"
+ },
+ "lg": {
+ "--spinner-size": "sizes.8"
+ },
+ "xl": {
+ "--spinner-size": "sizes.10"
+ }
+ }
+ },
+ "defaultVariants": {
+ "size": "md"
+ }
+ },
+ "textarea": {
+ "className": "chakra-textarea",
+ "base": {
+ "width": "100%",
+ "minWidth": "0",
+ "outline": "0",
+ "position": "relative",
+ "appearance": "none",
+ "textAlign": "start",
+ "borderRadius": "l2",
+ "_disabled": {
+ "layerStyle": "disabled"
+ },
+ "--focus-color": "colors.colorPalette.focusRing",
+ "--error-color": "colors.border.error",
+ "_invalid": {
+ "focusRingColor": "var(--error-color)",
+ "borderColor": "var(--error-color)"
+ }
+ },
+ "variants": {
+ "size": {
+ "xs": {
+ "textStyle": "xs",
+ "px": "2",
+ "py": "1.5",
+ "scrollPaddingBottom": "1.5"
+ },
+ "sm": {
+ "textStyle": "sm",
+ "px": "2.5",
+ "py": "2",
+ "scrollPaddingBottom": "2"
+ },
+ "md": {
+ "textStyle": "sm",
+ "px": "3",
+ "py": "2",
+ "scrollPaddingBottom": "2"
+ },
+ "lg": {
+ "textStyle": "md",
+ "px": "4",
+ "py": "3",
+ "scrollPaddingBottom": "3"
+ },
+ "xl": {
+ "textStyle": "md",
+ "px": "4.5",
+ "py": "3.5",
+ "scrollPaddingBottom": "3.5"
+ }
+ },
+ "variant": {
+ "outline": {
+ "bg": "transparent",
+ "borderWidth": "1px",
+ "borderColor": "border",
+ "focusVisibleRing": "inside"
+ },
+ "subtle": {
+ "borderWidth": "1px",
+ "borderColor": "transparent",
+ "bg": "bg.muted",
+ "focusVisibleRing": "inside"
+ },
+ "flushed": {
+ "bg": "transparent",
+ "borderBottomWidth": "1px",
+ "borderBottomColor": "border",
+ "borderRadius": "0",
+ "px": "0",
+ "_focusVisible": {
+ "borderColor": "var(--focus-color)",
+ "boxShadow": "0px 1px 0px 0px var(--focus-color)"
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "size": "md",
+ "variant": "outline"
+ }
+ },
+ "icon": {
+ "className": "chakra-icon",
+ "base": {
+ "display": "inline-block",
+ "lineHeight": "1em",
+ "flexShrink": "0",
+ "color": "currentcolor",
+ "verticalAlign": "middle",
+ "width": "var(--icon-size)",
+ "height": "var(--icon-size)"
+ },
+ "variants": {
+ "size": {
+ "inherit": {
+ "--icon-size": "1em"
+ },
+ "xs": {
+ "--icon-size": "sizes.3"
+ },
+ "sm": {
+ "--icon-size": "sizes.4"
+ },
+ "md": {
+ "--icon-size": "sizes.5"
+ },
+ "lg": {
+ "--icon-size": "sizes.6"
+ },
+ "xl": {
+ "--icon-size": "sizes.7"
+ },
+ "2xl": {
+ "--icon-size": "sizes.8"
+ }
+ }
+ },
+ "defaultVariants": {
+ "size": "inherit"
+ }
+ },
+ "checkmark": {
+ "className": "chakra-checkmark",
+ "base": {
+ "display": "inline-flex",
+ "alignItems": "center",
+ "justifyContent": "center",
+ "flexShrink": "0",
+ "color": "white",
+ "borderWidth": "1px",
+ "borderColor": "transparent",
+ "borderRadius": "l1",
+ "focusVisibleRing": "outside",
+ "_icon": {
+ "boxSize": "full"
+ },
+ "_invalid": {
+ "colorPalette": "red",
+ "borderColor": "border.error"
+ },
+ "_disabled": {
+ "opacity": "0.5"
+ }
+ },
+ "variants": {
+ "size": {
+ "xs": {
+ "boxSize": "3"
+ },
+ "sm": {
+ "boxSize": "4"
+ },
+ "md": {
+ "boxSize": "5",
+ "p": "0.5"
+ },
+ "lg": {
+ "boxSize": "6",
+ "p": "0.5"
+ }
+ },
+ "variant": {
+ "solid": {
+ "borderColor": "border",
+ "&:is([data-state=checked], [data-state=indeterminate])": {
+ "bg": "colorPalette.solid",
+ "color": "colorPalette.contrast",
+ "borderColor": "colorPalette.solid"
+ }
+ },
+ "outline": {
+ "borderColor": "border",
+ "&:is([data-state=checked], [data-state=indeterminate])": {
+ "color": "colorPalette.fg",
+ "borderColor": "colorPalette.solid"
+ }
+ },
+ "subtle": {
+ "bg": "colorPalette.muted",
+ "borderColor": "colorPalette.muted",
+ "&:is([data-state=checked], [data-state=indeterminate])": {
+ "color": "colorPalette.fg"
+ }
+ },
+ "plain": {
+ "&:is([data-state=checked], [data-state=indeterminate])": {
+ "color": "colorPalette.fg"
+ }
+ },
+ "inverted": {
+ "borderColor": "border",
+ "color": "colorPalette.fg",
+ "&:is([data-state=checked], [data-state=indeterminate])": {
+ "borderColor": "colorPalette.solid"
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "variant": "solid",
+ "size": "md"
+ }
+ },
+ "radiomark": {
+ "className": "chakra-radiomark",
+ "base": {
+ "display": "inline-flex",
+ "alignItems": "center",
+ "justifyContent": "center",
+ "flexShrink": 0,
+ "verticalAlign": "top",
+ "color": "white",
+ "borderWidth": "1px",
+ "borderColor": "transparent",
+ "borderRadius": "full",
+ "cursor": "radio",
+ "_focusVisible": {
+ "outline": "2px solid",
+ "outlineColor": "colorPalette.focusRing",
+ "outlineOffset": "2px"
+ },
+ "_invalid": {
+ "colorPalette": "red",
+ "borderColor": "red.500"
+ },
+ "_disabled": {
+ "opacity": "0.5",
+ "cursor": "disabled"
+ },
+ "& .dot": {
+ "height": "100%",
+ "width": "100%",
+ "borderRadius": "full",
+ "bg": "currentColor",
+ "scale": "0.4"
+ }
+ },
+ "variants": {
+ "variant": {
+ "solid": {
+ "borderWidth": "1px",
+ "borderColor": "border",
+ "_checked": {
+ "bg": "colorPalette.solid",
+ "color": "colorPalette.contrast",
+ "borderColor": "colorPalette.solid"
+ }
+ },
+ "subtle": {
+ "borderWidth": "1px",
+ "bg": "colorPalette.muted",
+ "borderColor": "colorPalette.muted",
+ "color": "transparent",
+ "_checked": {
+ "color": "colorPalette.fg"
+ }
+ },
+ "outline": {
+ "borderWidth": "1px",
+ "borderColor": "inherit",
+ "_checked": {
+ "color": "colorPalette.fg",
+ "borderColor": "colorPalette.solid"
+ },
+ "& .dot": {
+ "scale": "0.6"
+ }
+ },
+ "inverted": {
+ "bg": "bg",
+ "borderWidth": "1px",
+ "borderColor": "inherit",
+ "_checked": {
+ "color": "colorPalette.solid",
+ "borderColor": "currentcolor"
+ }
+ }
+ },
+ "size": {
+ "xs": {
+ "boxSize": "3"
+ },
+ "sm": {
+ "boxSize": "4"
+ },
+ "md": {
+ "boxSize": "5"
+ },
+ "lg": {
+ "boxSize": "6"
+ }
+ }
+ },
+ "defaultVariants": {
+ "variant": "solid",
+ "size": "md"
+ }
+ },
+ "colorSwatch": {
+ "className": "color-swatch",
+ "base": {
+ "boxSize": "var(--swatch-size)",
+ "shadow": "inset 0 0 0 1px rgba(0, 0, 0, 0.1)",
+ "--checker-size": "8px",
+ "--checker-bg": "colors.bg",
+ "--checker-fg": "colors.bg.emphasized",
+ "background": "linear-gradient(var(--color), var(--color)), repeating-conic-gradient(var(--checker-fg) 0%, var(--checker-fg) 25%, var(--checker-bg) 0%, var(--checker-bg) 50%) 0% 50% / var(--checker-size) var(--checker-size) !important",
+ "display": "inline-flex",
+ "alignItems": "center",
+ "justifyContent": "center",
+ "flexShrink": "0"
+ },
+ "variants": {
+ "size": {
+ "2xs": {
+ "--swatch-size": "sizes.3.5"
+ },
+ "xs": {
+ "--swatch-size": "sizes.4"
+ },
+ "sm": {
+ "--swatch-size": "sizes.4.5"
+ },
+ "md": {
+ "--swatch-size": "sizes.5"
+ },
+ "lg": {
+ "--swatch-size": "sizes.6"
+ },
+ "xl": {
+ "--swatch-size": "sizes.7"
+ },
+ "2xl": {
+ "--swatch-size": "sizes.8"
+ },
+ "inherit": {
+ "--swatch-size": "inherit"
+ },
+ "full": {
+ "--swatch-size": "100%"
+ }
+ },
+ "shape": {
+ "square": {
+ "borderRadius": "none"
+ },
+ "circle": {
+ "borderRadius": "full"
+ },
+ "rounded": {
+ "borderRadius": "l1"
+ }
+ }
+ },
+ "defaultVariants": {
+ "size": "md",
+ "shape": "rounded"
+ }
+ }
+ },
+ "slotRecipes": {
+ "accordion": {
+ "className": "chakra-accordion",
+ "slots": [
+ "root",
+ "item",
+ "itemTrigger",
+ "itemContent",
+ "itemIndicator",
+ "itemBody"
+ ],
+ "base": {
+ "root": {
+ "width": "full",
+ "--accordion-radius": "radii.l2"
+ },
+ "item": {
+ "overflowAnchor": "none"
+ },
+ "itemTrigger": {
+ "display": "flex",
+ "alignItems": "center",
+ "width": "full",
+ "outline": "0",
+ "gap": "3",
+ "fontWeight": "medium",
+ "borderRadius": "var(--accordion-radius)",
+ "_focusVisible": {
+ "outline": "2px solid",
+ "outlineColor": "colorPalette.focusRing"
+ },
+ "_disabled": {
+ "layerStyle": "disabled"
+ }
+ },
+ "itemBody": {
+ "pt": "var(--accordion-padding-y)",
+ "pb": "calc(var(--accordion-padding-y) * 2)"
+ },
+ "itemContent": {
+ "overflow": "hidden",
+ "borderRadius": "var(--accordion-radius)",
+ "_open": {
+ "animationName": "expand-height, fade-in",
+ "animationDuration": "moderate"
+ },
+ "_closed": {
+ "animationName": "collapse-height, fade-out",
+ "animationDuration": "moderate"
+ }
+ },
+ "itemIndicator": {
+ "transition": "rotate 0.2s",
+ "transformOrigin": "center",
+ "color": "fg.subtle",
+ "_open": {
+ "rotate": "180deg"
+ },
+ "_icon": {
+ "width": "1.2em",
+ "height": "1.2em"
+ }
+ }
+ },
+ "variants": {
+ "variant": {
+ "outline": {
+ "item": {
+ "borderBottomWidth": "1px"
+ }
+ },
+ "subtle": {
+ "itemTrigger": {
+ "px": "var(--accordion-padding-x)"
+ },
+ "itemContent": {
+ "px": "var(--accordion-padding-x)"
+ },
+ "item": {
+ "borderRadius": "var(--accordion-radius)",
+ "_open": {
+ "bg": "colorPalette.subtle"
+ }
+ }
+ },
+ "enclosed": {
+ "root": {
+ "borderWidth": "1px",
+ "borderRadius": "var(--accordion-radius)",
+ "divideY": "1px",
+ "overflow": "hidden"
+ },
+ "itemTrigger": {
+ "px": "var(--accordion-padding-x)"
+ },
+ "itemContent": {
+ "px": "var(--accordion-padding-x)"
+ },
+ "item": {
+ "_open": {
+ "bg": "bg.subtle"
+ }
+ }
+ },
+ "plain": {}
+ },
+ "size": {
+ "sm": {
+ "root": {
+ "--accordion-padding-x": "spacing.3",
+ "--accordion-padding-y": "spacing.2"
+ },
+ "itemTrigger": {
+ "textStyle": "sm",
+ "py": "var(--accordion-padding-y)"
+ }
+ },
+ "md": {
+ "root": {
+ "--accordion-padding-x": "spacing.4",
+ "--accordion-padding-y": "spacing.2"
+ },
+ "itemTrigger": {
+ "textStyle": "md",
+ "py": "var(--accordion-padding-y)"
+ }
+ },
+ "lg": {
+ "root": {
+ "--accordion-padding-x": "spacing.4.5",
+ "--accordion-padding-y": "spacing.2.5"
+ },
+ "itemTrigger": {
+ "textStyle": "lg",
+ "py": "var(--accordion-padding-y)"
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "size": "md",
+ "variant": "outline"
+ }
+ },
+ "actionBar": {
+ "className": "chakra-action-bar",
+ "slots": [
+ "positioner",
+ "content",
+ "separator",
+ "selectionTrigger",
+ "closeTrigger"
+ ],
+ "base": {
+ "positioner": {
+ "position": "fixed",
+ "display": "flex",
+ "justifyContent": "center",
+ "pointerEvents": "none",
+ "insetInline": "0",
+ "top": "unset",
+ "bottom": "calc(env(safe-area-inset-bottom) + 20px)"
+ },
+ "content": {
+ "bg": "bg.panel",
+ "shadow": "md",
+ "display": "flex",
+ "alignItems": "center",
+ "gap": "3",
+ "borderRadius": "l3",
+ "py": "2.5",
+ "px": "3",
+ "pointerEvents": "auto",
+ "translate": "calc(-1 * var(--scrollbar-width) / 2) 0px",
+ "_open": {
+ "animationName": "slide-from-bottom, fade-in",
+ "animationDuration": "moderate"
+ },
+ "_closed": {
+ "animationName": "slide-to-bottom, fade-out",
+ "animationDuration": "faster"
+ }
+ },
+ "separator": {
+ "width": "1px",
+ "height": "5",
+ "bg": "border"
+ },
+ "selectionTrigger": {
+ "display": "inline-flex",
+ "alignItems": "center",
+ "gap": "2",
+ "alignSelf": "stretch",
+ "textStyle": "sm",
+ "px": "4",
+ "py": "1",
+ "borderRadius": "l2",
+ "borderWidth": "1px",
+ "borderStyle": "dashed"
+ }
+ }
+ },
+ "alert": {
+ "slots": [
+ "title",
+ "description",
+ "root",
+ "indicator",
+ "content"
+ ],
+ "className": "chakra-alert",
+ "base": {
+ "root": {
+ "width": "full",
+ "display": "flex",
+ "alignItems": "flex-start",
+ "position": "relative",
+ "borderRadius": "l3"
+ },
+ "title": {
+ "fontWeight": "medium"
+ },
+ "description": {
+ "display": "inline"
+ },
+ "indicator": {
+ "display": "inline-flex",
+ "alignItems": "center",
+ "justifyContent": "center",
+ "flexShrink": "0",
+ "width": "1em",
+ "height": "1em",
+ "_icon": {
+ "boxSize": "full"
+ }
+ },
+ "content": {
+ "display": "flex",
+ "flex": "1",
+ "gap": "1"
+ }
+ },
+ "variants": {
+ "status": {
+ "info": {
+ "root": {
+ "colorPalette": "blue"
+ }
+ },
+ "warning": {
+ "root": {
+ "colorPalette": "orange"
+ }
+ },
+ "success": {
+ "root": {
+ "colorPalette": "green"
+ }
+ },
+ "error": {
+ "root": {
+ "colorPalette": "red"
+ }
+ },
+ "neutral": {
+ "root": {
+ "colorPalette": "gray"
+ }
+ }
+ },
+ "inline": {
+ "true": {
+ "content": {
+ "display": "inline-flex",
+ "flexDirection": "row",
+ "alignItems": "center"
+ }
+ },
+ "false": {
+ "content": {
+ "display": "flex",
+ "flexDirection": "column"
+ }
+ }
+ },
+ "variant": {
+ "subtle": {
+ "root": {
+ "bg": "colorPalette.subtle",
+ "color": "colorPalette.fg"
+ }
+ },
+ "surface": {
+ "root": {
+ "bg": "colorPalette.subtle",
+ "color": "colorPalette.fg",
+ "shadow": "inset 0 0 0px 1px var(--shadow-color)",
+ "shadowColor": "colorPalette.muted"
+ },
+ "indicator": {
+ "color": "colorPalette.fg"
+ }
+ },
+ "outline": {
+ "root": {
+ "color": "colorPalette.fg",
+ "shadow": "inset 0 0 0px 1px var(--shadow-color)",
+ "shadowColor": "colorPalette.muted"
+ },
+ "indicator": {
+ "color": "colorPalette.fg"
+ }
+ },
+ "solid": {
+ "root": {
+ "bg": "colorPalette.solid",
+ "color": "colorPalette.contrast"
+ },
+ "indicator": {
+ "color": "colorPalette.contrast"
+ }
+ }
+ },
+ "size": {
+ "sm": {
+ "root": {
+ "gap": "2",
+ "px": "3",
+ "py": "3",
+ "textStyle": "xs"
+ },
+ "indicator": {
+ "textStyle": "lg"
+ }
+ },
+ "md": {
+ "root": {
+ "gap": "3",
+ "px": "4",
+ "py": "4",
+ "textStyle": "sm"
+ },
+ "indicator": {
+ "textStyle": "xl"
+ }
+ },
+ "lg": {
+ "root": {
+ "gap": "3",
+ "px": "4",
+ "py": "4",
+ "textStyle": "md"
+ },
+ "indicator": {
+ "textStyle": "2xl"
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "status": "info",
+ "variant": "subtle",
+ "size": "md",
+ "inline": false
+ }
+ },
+ "avatar": {
+ "slots": [
+ "root",
+ "image",
+ "fallback"
+ ],
+ "className": "chakra-avatar",
+ "base": {
+ "root": {
+ "display": "inline-flex",
+ "alignItems": "center",
+ "justifyContent": "center",
+ "fontWeight": "medium",
+ "position": "relative",
+ "verticalAlign": "top",
+ "flexShrink": "0",
+ "userSelect": "none",
+ "width": "var(--avatar-size)",
+ "height": "var(--avatar-size)",
+ "fontSize": "var(--avatar-font-size)",
+ "borderRadius": "var(--avatar-radius)",
+ "&[data-group-item]": {
+ "borderWidth": "2px",
+ "borderColor": "bg"
+ }
+ },
+ "image": {
+ "width": "100%",
+ "height": "100%",
+ "objectFit": "cover",
+ "borderRadius": "var(--avatar-radius)"
+ },
+ "fallback": {
+ "lineHeight": "1",
+ "textTransform": "uppercase",
+ "fontWeight": "medium",
+ "fontSize": "var(--avatar-font-size)",
+ "borderRadius": "var(--avatar-radius)"
+ }
+ },
+ "variants": {
+ "size": {
+ "full": {
+ "root": {
+ "--avatar-size": "100%",
+ "--avatar-font-size": "100%"
+ }
+ },
+ "2xs": {
+ "root": {
+ "--avatar-font-size": "fontSizes.2xs",
+ "--avatar-size": "sizes.6"
+ }
+ },
+ "xs": {
+ "root": {
+ "--avatar-font-size": "fontSizes.xs",
+ "--avatar-size": "sizes.8"
+ }
+ },
+ "sm": {
+ "root": {
+ "--avatar-font-size": "fontSizes.sm",
+ "--avatar-size": "sizes.9"
+ }
+ },
+ "md": {
+ "root": {
+ "--avatar-font-size": "fontSizes.md",
+ "--avatar-size": "sizes.10"
+ }
+ },
+ "lg": {
+ "root": {
+ "--avatar-font-size": "fontSizes.md",
+ "--avatar-size": "sizes.11"
+ }
+ },
+ "xl": {
+ "root": {
+ "--avatar-font-size": "fontSizes.lg",
+ "--avatar-size": "sizes.12"
+ }
+ },
+ "2xl": {
+ "root": {
+ "--avatar-font-size": "fontSizes.xl",
+ "--avatar-size": "sizes.16"
+ }
+ }
+ },
+ "variant": {
+ "solid": {
+ "root": {
+ "bg": "colorPalette.solid",
+ "color": "colorPalette.contrast"
+ }
+ },
+ "subtle": {
+ "root": {
+ "bg": "colorPalette.muted",
+ "color": "colorPalette.fg"
+ }
+ },
+ "outline": {
+ "root": {
+ "color": "colorPalette.fg",
+ "borderWidth": "1px",
+ "borderColor": "colorPalette.muted"
+ }
+ }
+ },
+ "shape": {
+ "square": {},
+ "rounded": {
+ "root": {
+ "--avatar-radius": "radii.l3"
+ }
+ },
+ "full": {
+ "root": {
+ "--avatar-radius": "radii.full"
+ }
+ }
+ },
+ "borderless": {
+ "true": {
+ "root": {
+ "&[data-group-item]": {
+ "borderWidth": "0px"
+ }
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "size": "md",
+ "shape": "full",
+ "variant": "subtle"
+ }
+ },
+ "blockquote": {
+ "className": "chakra-blockquote",
+ "slots": [
+ "root",
+ "icon",
+ "content",
+ "caption"
+ ],
+ "base": {
+ "root": {
+ "position": "relative",
+ "display": "flex",
+ "flexDirection": "column",
+ "gap": "2"
+ },
+ "caption": {
+ "textStyle": "sm",
+ "color": "fg.muted"
+ },
+ "icon": {
+ "boxSize": "5"
+ }
+ },
+ "variants": {
+ "justify": {
+ "start": {
+ "root": {
+ "alignItems": "flex-start",
+ "textAlign": "start"
+ }
+ },
+ "center": {
+ "root": {
+ "alignItems": "center",
+ "textAlign": "center"
+ }
+ },
+ "end": {
+ "root": {
+ "alignItems": "flex-end",
+ "textAlign": "end"
+ }
+ }
+ },
+ "variant": {
+ "subtle": {
+ "root": {
+ "paddingX": "5",
+ "borderStartWidth": "4px",
+ "borderStartColor": "colorPalette.muted"
+ },
+ "icon": {
+ "color": "colorPalette.fg"
+ }
+ },
+ "solid": {
+ "root": {
+ "paddingX": "5",
+ "borderStartWidth": "4px",
+ "borderStartColor": "colorPalette.solid"
+ },
+ "icon": {
+ "color": "colorPalette.solid"
+ }
+ },
+ "plain": {
+ "root": {
+ "paddingX": "5"
+ },
+ "icon": {
+ "color": "colorPalette.solid"
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "variant": "subtle",
+ "justify": "start"
+ }
+ },
+ "breadcrumb": {
+ "className": "chakra-breadcrumb",
+ "slots": [
+ "link",
+ "currentLink",
+ "item",
+ "list",
+ "root",
+ "ellipsis",
+ "separator"
+ ],
+ "base": {
+ "list": {
+ "display": "flex",
+ "alignItems": "center",
+ "wordBreak": "break-word",
+ "color": "fg.muted"
+ },
+ "link": {
+ "outline": "0",
+ "textDecoration": "none",
+ "borderRadius": "l1",
+ "focusRing": "outside",
+ "display": "inline-flex",
+ "alignItems": "center",
+ "gap": "2"
+ },
+ "item": {
+ "display": "inline-flex",
+ "alignItems": "center"
+ },
+ "separator": {
+ "color": "fg.muted",
+ "opacity": "0.8",
+ "_icon": {
+ "boxSize": "1em"
+ }
+ },
+ "ellipsis": {
+ "display": "inline-flex",
+ "alignItems": "center",
+ "justifyContent": "center",
+ "_icon": {
+ "boxSize": "1em"
+ }
+ }
+ },
+ "variants": {
+ "variant": {
+ "underline": {
+ "link": {
+ "color": "colorPalette.fg",
+ "textDecoration": "underline",
+ "textUnderlineOffset": "0.2em",
+ "textDecorationColor": "colorPalette.muted"
+ },
+ "currentLink": {
+ "color": "colorPalette.fg"
+ }
+ },
+ "plain": {
+ "link": {
+ "color": "fg.muted",
+ "_hover": {
+ "color": "fg"
+ }
+ },
+ "currentLink": {
+ "color": "fg"
+ }
+ }
+ },
+ "size": {
+ "sm": {
+ "list": {
+ "gap": "1",
+ "textStyle": "xs"
+ }
+ },
+ "md": {
+ "list": {
+ "gap": "1.5",
+ "textStyle": "sm"
+ }
+ },
+ "lg": {
+ "list": {
+ "gap": "2",
+ "textStyle": "md"
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "variant": "plain",
+ "size": "md"
+ }
+ },
+ "card": {
+ "className": "chakra-card",
+ "slots": [
+ "root",
+ "header",
+ "body",
+ "footer",
+ "title",
+ "description"
+ ],
+ "base": {
+ "root": {
+ "display": "flex",
+ "flexDirection": "column",
+ "position": "relative",
+ "minWidth": "0",
+ "wordWrap": "break-word",
+ "borderRadius": "l3",
+ "color": "fg",
+ "textAlign": "start"
+ },
+ "title": {
+ "fontWeight": "semibold"
+ },
+ "description": {
+ "color": "fg.muted",
+ "fontSize": "sm"
+ },
+ "header": {
+ "paddingInline": "var(--card-padding)",
+ "paddingTop": "var(--card-padding)",
+ "display": "flex",
+ "flexDirection": "column",
+ "gap": "1.5"
+ },
+ "body": {
+ "padding": "var(--card-padding)",
+ "flex": "1",
+ "display": "flex",
+ "flexDirection": "column"
+ },
+ "footer": {
+ "display": "flex",
+ "alignItems": "center",
+ "gap": "2",
+ "paddingInline": "var(--card-padding)",
+ "paddingBottom": "var(--card-padding)"
+ }
+ },
+ "variants": {
+ "size": {
+ "sm": {
+ "root": {
+ "--card-padding": "spacing.4"
+ },
+ "title": {
+ "textStyle": "md"
+ }
+ },
+ "md": {
+ "root": {
+ "--card-padding": "spacing.6"
+ },
+ "title": {
+ "textStyle": "lg"
+ }
+ },
+ "lg": {
+ "root": {
+ "--card-padding": "spacing.7"
+ },
+ "title": {
+ "textStyle": "xl"
+ }
+ }
+ },
+ "variant": {
+ "elevated": {
+ "root": {
+ "bg": "bg.panel",
+ "boxShadow": "md"
+ }
+ },
+ "outline": {
+ "root": {
+ "bg": "bg.panel",
+ "borderWidth": "1px",
+ "borderColor": "border"
+ }
+ },
+ "subtle": {
+ "root": {
+ "bg": "bg.muted"
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "variant": "outline",
+ "size": "md"
+ }
+ },
+ "checkbox": {
+ "slots": [
+ "root",
+ "label",
+ "control",
+ "indicator",
+ "group"
+ ],
+ "className": "chakra-checkbox",
+ "base": {
+ "root": {
+ "display": "inline-flex",
+ "gap": "2",
+ "alignItems": "center",
+ "verticalAlign": "top",
+ "position": "relative"
+ },
+ "control": {
+ "display": "inline-flex",
+ "alignItems": "center",
+ "justifyContent": "center",
+ "flexShrink": "0",
+ "color": "white",
+ "borderWidth": "1px",
+ "borderColor": "transparent",
+ "borderRadius": "l1",
+ "focusVisibleRing": "outside",
+ "_icon": {
+ "boxSize": "full"
+ },
+ "_invalid": {
+ "colorPalette": "red",
+ "borderColor": "border.error"
+ },
+ "_disabled": {
+ "opacity": "0.5"
+ }
+ },
+ "label": {
+ "fontWeight": "medium",
+ "userSelect": "none",
+ "_disabled": {
+ "opacity": "0.5"
+ }
+ }
+ },
+ "variants": {
+ "size": {
+ "xs": {
+ "root": {
+ "gap": "1.5"
+ },
+ "label": {
+ "textStyle": "xs"
+ },
+ "control": {
+ "boxSize": "3"
+ }
+ },
+ "sm": {
+ "root": {
+ "gap": "2"
+ },
+ "label": {
+ "textStyle": "sm"
+ },
+ "control": {
+ "boxSize": "4"
+ }
+ },
+ "md": {
+ "root": {
+ "gap": "2.5"
+ },
+ "label": {
+ "textStyle": "sm"
+ },
+ "control": {
+ "boxSize": "5",
+ "p": "0.5"
+ }
+ },
+ "lg": {
+ "root": {
+ "gap": "3"
+ },
+ "label": {
+ "textStyle": "md"
+ },
+ "control": {
+ "boxSize": "6",
+ "p": "0.5"
+ }
+ }
+ },
+ "variant": {
+ "outline": {
+ "control": {
+ "borderColor": "border",
+ "&:is([data-state=checked], [data-state=indeterminate])": {
+ "color": "colorPalette.fg",
+ "borderColor": "colorPalette.solid"
+ }
+ }
+ },
+ "solid": {
+ "control": {
+ "borderColor": "border",
+ "&:is([data-state=checked], [data-state=indeterminate])": {
+ "bg": "colorPalette.solid",
+ "color": "colorPalette.contrast",
+ "borderColor": "colorPalette.solid"
+ }
+ }
+ },
+ "subtle": {
+ "control": {
+ "bg": "colorPalette.muted",
+ "borderColor": "colorPalette.muted",
+ "&:is([data-state=checked], [data-state=indeterminate])": {
+ "color": "colorPalette.fg"
+ }
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "variant": "solid",
+ "size": "md"
+ }
+ },
+ "checkboxCard": {
+ "slots": [
+ "root",
+ "control",
+ "label",
+ "description",
+ "addon",
+ "indicator",
+ "content"
+ ],
+ "className": "chakra-checkbox-card",
+ "base": {
+ "root": {
+ "display": "flex",
+ "flexDirection": "column",
+ "userSelect": "none",
+ "position": "relative",
+ "borderRadius": "l2",
+ "flex": "1",
+ "focusVisibleRing": "outside",
+ "_disabled": {
+ "opacity": "0.8",
+ "borderColor": "border.subtle"
+ },
+ "_invalid": {
+ "outline": "2px solid",
+ "outlineColor": "border.error"
+ }
+ },
+ "control": {
+ "display": "inline-flex",
+ "flex": "1",
+ "position": "relative",
+ "borderRadius": "inherit",
+ "justifyContent": "var(--checkbox-card-justify)",
+ "alignItems": "var(--checkbox-card-align)"
+ },
+ "label": {
+ "fontWeight": "medium",
+ "display": "flex",
+ "alignItems": "center",
+ "gap": "2",
+ "_disabled": {
+ "opacity": "0.5"
+ }
+ },
+ "description": {
+ "opacity": "0.64",
+ "textStyle": "sm"
+ },
+ "addon": {
+ "_disabled": {
+ "opacity": "0.5"
+ }
+ },
+ "indicator": {
+ "display": "inline-flex",
+ "alignItems": "center",
+ "justifyContent": "center",
+ "flexShrink": "0",
+ "color": "white",
+ "borderWidth": "1px",
+ "borderColor": "transparent",
+ "borderRadius": "l1",
+ "focusVisibleRing": "outside",
+ "_icon": {
+ "boxSize": "full"
+ },
+ "_invalid": {
+ "colorPalette": "red",
+ "borderColor": "border.error"
+ },
+ "_disabled": {
+ "opacity": "0.5"
+ }
+ },
+ "content": {
+ "display": "flex",
+ "flexDirection": "column",
+ "flex": "1",
+ "gap": "1",
+ "justifyContent": "var(--checkbox-card-justify)",
+ "alignItems": "var(--checkbox-card-align)"
+ }
+ },
+ "variants": {
+ "size": {
+ "sm": {
+ "root": {
+ "textStyle": "sm"
+ },
+ "control": {
+ "padding": "3",
+ "gap": "1.5"
+ },
+ "addon": {
+ "px": "3",
+ "py": "1.5",
+ "borderTopWidth": "1px"
+ },
+ "indicator": {
+ "boxSize": "4"
+ }
+ },
+ "md": {
+ "root": {
+ "textStyle": "sm"
+ },
+ "control": {
+ "padding": "4",
+ "gap": "2.5"
+ },
+ "addon": {
+ "px": "4",
+ "py": "2",
+ "borderTopWidth": "1px"
+ },
+ "indicator": {
+ "boxSize": "5",
+ "p": "0.5"
+ }
+ },
+ "lg": {
+ "root": {
+ "textStyle": "md"
+ },
+ "control": {
+ "padding": "4",
+ "gap": "3.5"
+ },
+ "addon": {
+ "px": "4",
+ "py": "2",
+ "borderTopWidth": "1px"
+ },
+ "indicator": {
+ "boxSize": "6",
+ "p": "0.5"
+ }
+ }
+ },
+ "variant": {
+ "surface": {
+ "root": {
+ "borderWidth": "1px",
+ "borderColor": "border",
+ "_checked": {
+ "bg": "colorPalette.subtle",
+ "color": "colorPalette.fg",
+ "borderColor": "colorPalette.muted"
+ },
+ "_disabled": {
+ "bg": "bg.muted"
+ }
+ },
+ "indicator": {
+ "borderColor": "border",
+ "&:is([data-state=checked], [data-state=indeterminate])": {
+ "bg": "colorPalette.solid",
+ "color": "colorPalette.contrast",
+ "borderColor": "colorPalette.solid"
+ }
+ }
+ },
+ "subtle": {
+ "root": {
+ "bg": "bg.muted"
+ },
+ "control": {
+ "_checked": {
+ "bg": "colorPalette.muted",
+ "color": "colorPalette.fg"
+ }
+ },
+ "indicator": {
+ "&:is([data-state=checked], [data-state=indeterminate])": {
+ "color": "colorPalette.fg"
+ }
+ }
+ },
+ "outline": {
+ "root": {
+ "borderWidth": "1px",
+ "borderColor": "border",
+ "_checked": {
+ "boxShadow": "0 0 0 1px var(--shadow-color)",
+ "boxShadowColor": "colorPalette.solid",
+ "borderColor": "colorPalette.solid"
+ }
+ },
+ "indicator": {
+ "borderColor": "border",
+ "&:is([data-state=checked], [data-state=indeterminate])": {
+ "bg": "colorPalette.solid",
+ "color": "colorPalette.contrast",
+ "borderColor": "colorPalette.solid"
+ }
+ }
+ },
+ "solid": {
+ "root": {
+ "borderWidth": "1px",
+ "_checked": {
+ "bg": "colorPalette.solid",
+ "color": "colorPalette.contrast",
+ "borderColor": "colorPalette.solid"
+ }
+ },
+ "indicator": {
+ "borderColor": "border",
+ "color": "colorPalette.fg",
+ "&:is([data-state=checked], [data-state=indeterminate])": {
+ "borderColor": "colorPalette.solid"
+ }
+ }
+ }
+ },
+ "justify": {
+ "start": {
+ "root": {
+ "--checkbox-card-justify": "flex-start"
+ }
+ },
+ "end": {
+ "root": {
+ "--checkbox-card-justify": "flex-end"
+ }
+ },
+ "center": {
+ "root": {
+ "--checkbox-card-justify": "center"
+ }
+ }
+ },
+ "align": {
+ "start": {
+ "root": {
+ "--checkbox-card-align": "flex-start"
+ },
+ "content": {
+ "textAlign": "start"
+ }
+ },
+ "end": {
+ "root": {
+ "--checkbox-card-align": "flex-end"
+ },
+ "content": {
+ "textAlign": "end"
+ }
+ },
+ "center": {
+ "root": {
+ "--checkbox-card-align": "center"
+ },
+ "content": {
+ "textAlign": "center"
+ }
+ }
+ },
+ "orientation": {
+ "vertical": {
+ "control": {
+ "flexDirection": "column"
+ }
+ },
+ "horizontal": {
+ "control": {
+ "flexDirection": "row"
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "size": "md",
+ "variant": "outline",
+ "align": "start",
+ "orientation": "horizontal"
+ }
+ },
+ "collapsible": {
+ "slots": [
+ "root",
+ "trigger",
+ "content"
+ ],
+ "className": "chakra-collapsible",
+ "base": {
+ "content": {
+ "overflow": "hidden",
+ "_open": {
+ "animationName": "expand-height, fade-in",
+ "animationDuration": "moderate"
+ },
+ "_closed": {
+ "animationName": "collapse-height, fade-out",
+ "animationDuration": "moderate"
+ }
+ }
+ }
+ },
+ "dataList": {
+ "slots": [
+ "root",
+ "item",
+ "itemLabel",
+ "itemValue"
+ ],
+ "className": "chakra-data-list",
+ "base": {
+ "itemLabel": {
+ "display": "flex",
+ "alignItems": "center",
+ "gap": "1"
+ },
+ "itemValue": {
+ "display": "flex",
+ "minWidth": "0",
+ "flex": "1"
+ }
+ },
+ "variants": {
+ "orientation": {
+ "horizontal": {
+ "root": {
+ "display": "flex",
+ "flexDirection": "column"
+ },
+ "item": {
+ "display": "inline-flex",
+ "alignItems": "center",
+ "gap": "4"
+ },
+ "itemLabel": {
+ "minWidth": "120px"
+ }
+ },
+ "vertical": {
+ "root": {
+ "display": "flex",
+ "flexDirection": "column"
+ },
+ "item": {
+ "display": "flex",
+ "flexDirection": "column",
+ "gap": "1"
+ }
+ }
+ },
+ "size": {
+ "sm": {
+ "root": {
+ "gap": "3"
+ },
+ "item": {
+ "textStyle": "xs"
+ }
+ },
+ "md": {
+ "root": {
+ "gap": "4"
+ },
+ "item": {
+ "textStyle": "sm"
+ }
+ },
+ "lg": {
+ "root": {
+ "gap": "5"
+ },
+ "item": {
+ "textStyle": "md"
+ }
+ }
+ },
+ "variant": {
+ "subtle": {
+ "itemLabel": {
+ "color": "fg.muted"
+ }
+ },
+ "bold": {
+ "itemLabel": {
+ "fontWeight": "medium"
+ },
+ "itemValue": {
+ "color": "fg.muted"
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "size": "md",
+ "orientation": "vertical",
+ "variant": "subtle"
+ }
+ },
+ "dialog": {
+ "slots": [
+ "trigger",
+ "backdrop",
+ "positioner",
+ "content",
+ "title",
+ "description",
+ "closeTrigger",
+ "header",
+ "body",
+ "footer",
+ "backdrop"
+ ],
+ "className": "chakra-dialog",
+ "base": {
+ "backdrop": {
+ "bg": "blackAlpha.500",
+ "pos": "fixed",
+ "left": 0,
+ "top": 0,
+ "w": "100vw",
+ "h": "100dvh",
+ "zIndex": "modal",
+ "_open": {
+ "animationName": "fade-in",
+ "animationDuration": "slow"
+ },
+ "_closed": {
+ "animationName": "fade-out",
+ "animationDuration": "moderate"
+ }
+ },
+ "positioner": {
+ "display": "flex",
+ "width": "100vw",
+ "height": "100dvh",
+ "position": "fixed",
+ "left": 0,
+ "top": 0,
+ "--dialog-z-index": "zIndex.modal",
+ "zIndex": "calc(var(--dialog-z-index) + var(--layer-index, 0))",
+ "justifyContent": "center",
+ "overscrollBehaviorY": "none"
+ },
+ "content": {
+ "display": "flex",
+ "flexDirection": "column",
+ "position": "relative",
+ "width": "100%",
+ "outline": 0,
+ "borderRadius": "l3",
+ "textStyle": "sm",
+ "my": "var(--dialog-margin, var(--dialog-base-margin))",
+ "--dialog-z-index": "zIndex.modal",
+ "zIndex": "calc(var(--dialog-z-index) + var(--layer-index, 0))",
+ "bg": "bg.panel",
+ "boxShadow": "lg",
+ "_open": {
+ "animationDuration": "moderate"
+ },
+ "_closed": {
+ "animationDuration": "faster"
+ }
+ },
+ "header": {
+ "flex": 0,
+ "px": "6",
+ "pt": "6",
+ "pb": "4"
+ },
+ "body": {
+ "flex": "1",
+ "px": "6",
+ "pt": "2",
+ "pb": "6"
+ },
+ "footer": {
+ "display": "flex",
+ "alignItems": "center",
+ "justifyContent": "flex-end",
+ "gap": "3",
+ "px": "6",
+ "pt": "2",
+ "pb": "4"
+ },
+ "title": {
+ "textStyle": "lg",
+ "fontWeight": "semibold"
+ },
+ "description": {
+ "color": "fg.muted"
+ }
+ },
+ "variants": {
+ "placement": {
+ "center": {
+ "positioner": {
+ "alignItems": "center"
+ },
+ "content": {
+ "--dialog-base-margin": "auto",
+ "mx": "auto"
+ }
+ },
+ "top": {
+ "positioner": {
+ "alignItems": "flex-start"
+ },
+ "content": {
+ "--dialog-base-margin": "spacing.16",
+ "mx": "auto"
+ }
+ },
+ "bottom": {
+ "positioner": {
+ "alignItems": "flex-end"
+ },
+ "content": {
+ "--dialog-base-margin": "spacing.16",
+ "mx": "auto"
+ }
+ }
+ },
+ "scrollBehavior": {
+ "inside": {
+ "positioner": {
+ "overflow": "hidden"
+ },
+ "content": {
+ "maxH": "calc(100% - 7.5rem)"
+ },
+ "body": {
+ "overflow": "auto"
+ }
+ },
+ "outside": {
+ "positioner": {
+ "overflow": "auto",
+ "pointerEvents": "auto"
+ }
+ }
+ },
+ "size": {
+ "xs": {
+ "content": {
+ "maxW": "sm"
+ }
+ },
+ "sm": {
+ "content": {
+ "maxW": "md"
+ }
+ },
+ "md": {
+ "content": {
+ "maxW": "lg"
+ }
+ },
+ "lg": {
+ "content": {
+ "maxW": "2xl"
+ }
+ },
+ "xl": {
+ "content": {
+ "maxW": "4xl"
+ }
+ },
+ "cover": {
+ "positioner": {
+ "padding": "10"
+ },
+ "content": {
+ "width": "100%",
+ "height": "100%",
+ "--dialog-margin": "0"
+ }
+ },
+ "full": {
+ "content": {
+ "maxW": "100vw",
+ "minH": "100vh",
+ "--dialog-margin": "0",
+ "borderRadius": "0"
+ }
+ }
+ },
+ "motionPreset": {
+ "scale": {
+ "content": {
+ "_open": {
+ "animationName": "scale-in, fade-in"
+ },
+ "_closed": {
+ "animationName": "scale-out, fade-out"
+ }
+ }
+ },
+ "slide-in-bottom": {
+ "content": {
+ "_open": {
+ "animationName": "slide-from-bottom, fade-in"
+ },
+ "_closed": {
+ "animationName": "slide-to-bottom, fade-out"
+ }
+ }
+ },
+ "slide-in-top": {
+ "content": {
+ "_open": {
+ "animationName": "slide-from-top, fade-in"
+ },
+ "_closed": {
+ "animationName": "slide-to-top, fade-out"
+ }
+ }
+ },
+ "slide-in-left": {
+ "content": {
+ "_open": {
+ "animationName": "slide-from-left, fade-in"
+ },
+ "_closed": {
+ "animationName": "slide-to-left, fade-out"
+ }
+ }
+ },
+ "slide-in-right": {
+ "content": {
+ "_open": {
+ "animationName": "slide-from-right, fade-in"
+ },
+ "_closed": {
+ "animationName": "slide-to-right, fade-out"
+ }
+ }
+ },
+ "none": {}
+ }
+ },
+ "defaultVariants": {
+ "size": "md",
+ "scrollBehavior": "outside",
+ "placement": "top",
+ "motionPreset": "scale"
+ }
+ },
+ "drawer": {
+ "slots": [
+ "trigger",
+ "backdrop",
+ "positioner",
+ "content",
+ "title",
+ "description",
+ "closeTrigger",
+ "header",
+ "body",
+ "footer",
+ "backdrop"
+ ],
+ "className": "chakra-drawer",
+ "base": {
+ "backdrop": {
+ "bg": "blackAlpha.500",
+ "pos": "fixed",
+ "insetInlineStart": 0,
+ "top": 0,
+ "w": "100vw",
+ "h": "100dvh",
+ "zIndex": "modal",
+ "_open": {
+ "animationName": "fade-in",
+ "animationDuration": "slow"
+ },
+ "_closed": {
+ "animationName": "fade-out",
+ "animationDuration": "moderate"
+ }
+ },
+ "positioner": {
+ "display": "flex",
+ "width": "100vw",
+ "height": "100dvh",
+ "position": "fixed",
+ "insetInlineStart": 0,
+ "top": 0,
+ "zIndex": "modal",
+ "overscrollBehaviorY": "none"
+ },
+ "content": {
+ "display": "flex",
+ "flexDirection": "column",
+ "position": "relative",
+ "width": "100%",
+ "outline": 0,
+ "zIndex": "modal",
+ "textStyle": "sm",
+ "maxH": "100dvh",
+ "color": "inherit",
+ "bg": "bg.panel",
+ "boxShadow": "lg",
+ "_open": {
+ "animationDuration": "slowest",
+ "animationTimingFunction": "ease-in-smooth"
+ },
+ "_closed": {
+ "animationDuration": "slower",
+ "animationTimingFunction": "ease-in-smooth"
+ }
+ },
+ "header": {
+ "flex": 0,
+ "px": "6",
+ "pt": "6",
+ "pb": "4"
+ },
+ "body": {
+ "px": "6",
+ "py": "2",
+ "flex": "1",
+ "overflow": "auto"
+ },
+ "footer": {
+ "display": "flex",
+ "alignItems": "center",
+ "justifyContent": "flex-end",
+ "gap": "3",
+ "px": "6",
+ "pt": "2",
+ "pb": "4"
+ },
+ "title": {
+ "textStyle": "lg",
+ "fontWeight": "semibold"
+ },
+ "description": {
+ "color": "fg.muted"
+ }
+ },
+ "variants": {
+ "size": {
+ "xs": {
+ "content": {
+ "maxW": "xs"
+ }
+ },
+ "sm": {
+ "content": {
+ "maxW": "md"
+ }
+ },
+ "md": {
+ "content": {
+ "maxW": "lg"
+ }
+ },
+ "lg": {
+ "content": {
+ "maxW": "2xl"
+ }
+ },
+ "xl": {
+ "content": {
+ "maxW": "4xl"
+ }
+ },
+ "full": {
+ "content": {
+ "maxW": "100vw",
+ "h": "100dvh"
+ }
+ }
+ },
+ "placement": {
+ "start": {
+ "positioner": {
+ "justifyContent": "flex-start"
+ },
+ "content": {
+ "_open": {
+ "animationName": {
+ "base": "slide-from-left-full, fade-in",
+ "_rtl": "slide-from-right-full, fade-in"
+ }
+ },
+ "_closed": {
+ "animationName": {
+ "base": "slide-to-left-full, fade-out",
+ "_rtl": "slide-to-right-full, fade-out"
+ }
+ }
+ }
+ },
+ "end": {
+ "positioner": {
+ "justifyContent": "flex-end"
+ },
+ "content": {
+ "_open": {
+ "animationName": {
+ "base": "slide-from-right-full, fade-in",
+ "_rtl": "slide-from-left-full, fade-in"
+ }
+ },
+ "_closed": {
+ "animationName": {
+ "base": "slide-to-right-full, fade-out",
+ "_rtl": "slide-to-right-full, fade-out"
+ }
+ }
+ }
+ },
+ "top": {
+ "positioner": {
+ "alignItems": "flex-start"
+ },
+ "content": {
+ "maxW": "100%",
+ "_open": {
+ "animationName": "slide-from-top-full, fade-in"
+ },
+ "_closed": {
+ "animationName": "slide-to-top-full, fade-out"
+ }
+ }
+ },
+ "bottom": {
+ "positioner": {
+ "alignItems": "flex-end"
+ },
+ "content": {
+ "maxW": "100%",
+ "_open": {
+ "animationName": "slide-from-bottom-full, fade-in"
+ },
+ "_closed": {
+ "animationName": "slide-to-bottom-full, fade-out"
+ }
+ }
+ }
+ },
+ "contained": {
+ "true": {
+ "positioner": {
+ "padding": "4"
+ },
+ "content": {
+ "borderRadius": "l3"
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "size": "xs",
+ "placement": "end"
+ }
+ },
+ "editable": {
+ "slots": [
+ "root",
+ "area",
+ "label",
+ "preview",
+ "input",
+ "editTrigger",
+ "submitTrigger",
+ "cancelTrigger",
+ "control",
+ "textarea"
+ ],
+ "className": "chakra-editable",
+ "base": {
+ "root": {
+ "display": "inline-flex",
+ "alignItems": "center",
+ "position": "relative",
+ "gap": "1.5",
+ "width": "full"
+ },
+ "preview": {
+ "fontSize": "inherit",
+ "fontWeight": "inherit",
+ "textAlign": "inherit",
+ "bg": "transparent",
+ "borderRadius": "l2",
+ "py": "1",
+ "px": "1",
+ "display": "inline-flex",
+ "alignItems": "center",
+ "transitionProperty": "common",
+ "transitionDuration": "normal",
+ "cursor": "text",
+ "_hover": {
+ "bg": "bg.muted"
+ },
+ "_disabled": {
+ "userSelect": "none"
+ }
+ },
+ "input": {
+ "fontSize": "inherit",
+ "fontWeight": "inherit",
+ "textAlign": "inherit",
+ "bg": "transparent",
+ "borderRadius": "l2",
+ "outline": "0",
+ "py": "1",
+ "px": "1",
+ "transitionProperty": "common",
+ "transitionDuration": "normal",
+ "width": "full",
+ "focusVisibleRing": "inside",
+ "focusRingWidth": "2px",
+ "_placeholder": {
+ "opacity": 0.6
+ }
+ },
+ "control": {
+ "display": "inline-flex",
+ "alignItems": "center",
+ "gap": "1.5"
+ }
+ },
+ "variants": {
+ "size": {
+ "sm": {
+ "root": {
+ "textStyle": "sm"
+ },
+ "preview": {
+ "minH": "8"
+ },
+ "input": {
+ "minH": "8"
+ }
+ },
+ "md": {
+ "root": {
+ "textStyle": "sm"
+ },
+ "preview": {
+ "minH": "9"
+ },
+ "input": {
+ "minH": "9"
+ }
+ },
+ "lg": {
+ "root": {
+ "textStyle": "md"
+ },
+ "preview": {
+ "minH": "10"
+ },
+ "input": {
+ "minH": "10"
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "size": "md"
+ }
+ },
+ "emptyState": {
+ "slots": [
+ "root",
+ "content",
+ "indicator",
+ "title",
+ "description"
+ ],
+ "className": "chakra-empty-state",
+ "base": {
+ "root": {
+ "width": "full"
+ },
+ "content": {
+ "display": "flex",
+ "flexDirection": "column",
+ "alignItems": "center",
+ "justifyContent": "center"
+ },
+ "indicator": {
+ "display": "flex",
+ "alignItems": "center",
+ "justifyContent": "center",
+ "color": "fg.subtle",
+ "_icon": {
+ "boxSize": "1em"
+ }
+ },
+ "title": {
+ "fontWeight": "semibold"
+ },
+ "description": {
+ "textStyle": "sm",
+ "color": "fg.muted"
+ }
+ },
+ "variants": {
+ "size": {
+ "sm": {
+ "root": {
+ "px": "4",
+ "py": "6"
+ },
+ "title": {
+ "textStyle": "md"
+ },
+ "content": {
+ "gap": "4"
+ },
+ "indicator": {
+ "textStyle": "2xl"
+ }
+ },
+ "md": {
+ "root": {
+ "px": "8",
+ "py": "12"
+ },
+ "title": {
+ "textStyle": "lg"
+ },
+ "content": {
+ "gap": "6"
+ },
+ "indicator": {
+ "textStyle": "4xl"
+ }
+ },
+ "lg": {
+ "root": {
+ "px": "12",
+ "py": "16"
+ },
+ "title": {
+ "textStyle": "xl"
+ },
+ "content": {
+ "gap": "8"
+ },
+ "indicator": {
+ "textStyle": "6xl"
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "size": "md"
+ }
+ },
+ "field": {
+ "className": "chakra-field",
+ "slots": [
+ "root",
+ "errorText",
+ "helperText",
+ "input",
+ "label",
+ "select",
+ "textarea",
+ "requiredIndicator",
+ "requiredIndicator"
+ ],
+ "base": {
+ "requiredIndicator": {
+ "color": "fg.error",
+ "lineHeight": "1"
+ },
+ "root": {
+ "display": "flex",
+ "width": "100%",
+ "position": "relative",
+ "gap": "1.5"
+ },
+ "label": {
+ "display": "flex",
+ "alignItems": "center",
+ "textAlign": "start",
+ "textStyle": "sm",
+ "fontWeight": "medium",
+ "gap": "1",
+ "userSelect": "none",
+ "_disabled": {
+ "opacity": "0.5"
+ }
+ },
+ "errorText": {
+ "display": "inline-flex",
+ "alignItems": "center",
+ "fontWeight": "medium",
+ "gap": "1",
+ "color": "fg.error",
+ "textStyle": "xs"
+ },
+ "helperText": {
+ "color": "fg.muted",
+ "textStyle": "xs"
+ }
+ },
+ "variants": {
+ "orientation": {
+ "vertical": {
+ "root": {
+ "flexDirection": "column",
+ "alignItems": "flex-start"
+ }
+ },
+ "horizontal": {
+ "root": {
+ "flexDirection": "row",
+ "alignItems": "center",
+ "justifyContent": "space-between"
+ },
+ "label": {
+ "flex": "0 0 var(--field-label-width, 80px)"
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "orientation": "vertical"
+ }
+ },
+ "fieldset": {
+ "className": "fieldset",
+ "slots": [
+ "root",
+ "errorText",
+ "helperText",
+ "legend",
+ "content"
+ ],
+ "base": {
+ "root": {
+ "display": "flex",
+ "flexDirection": "column",
+ "width": "full"
+ },
+ "content": {
+ "display": "flex",
+ "flexDirection": "column",
+ "width": "full"
+ },
+ "legend": {
+ "color": "fg",
+ "fontWeight": "medium",
+ "_disabled": {
+ "opacity": "0.5"
+ }
+ },
+ "helperText": {
+ "color": "fg.muted",
+ "textStyle": "sm"
+ },
+ "errorText": {
+ "display": "inline-flex",
+ "alignItems": "center",
+ "color": "fg.error",
+ "gap": "2",
+ "fontWeight": "medium",
+ "textStyle": "sm"
+ }
+ },
+ "variants": {
+ "size": {
+ "sm": {
+ "root": {
+ "spaceY": "2"
+ },
+ "content": {
+ "gap": "1.5"
+ },
+ "legend": {
+ "textStyle": "sm"
+ }
+ },
+ "md": {
+ "root": {
+ "spaceY": "4"
+ },
+ "content": {
+ "gap": "4"
+ },
+ "legend": {
+ "textStyle": "sm"
+ }
+ },
+ "lg": {
+ "root": {
+ "spaceY": "6"
+ },
+ "content": {
+ "gap": "4"
+ },
+ "legend": {
+ "textStyle": "md"
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "size": "md"
+ }
+ },
+ "fileUpload": {
+ "className": "chakra-file-upload",
+ "slots": [
+ "root",
+ "dropzone",
+ "item",
+ "itemDeleteTrigger",
+ "itemGroup",
+ "itemName",
+ "itemPreview",
+ "itemPreviewImage",
+ "itemSizeText",
+ "label",
+ "trigger",
+ "clearTrigger",
+ "itemContent",
+ "dropzoneContent"
+ ],
+ "base": {
+ "root": {
+ "display": "flex",
+ "flexDirection": "column",
+ "gap": "4",
+ "width": "100%",
+ "alignItems": "flex-start"
+ },
+ "label": {
+ "fontWeight": "medium",
+ "textStyle": "sm"
+ },
+ "dropzone": {
+ "background": "bg",
+ "borderRadius": "l3",
+ "borderWidth": "2px",
+ "borderStyle": "dashed",
+ "display": "flex",
+ "alignItems": "center",
+ "flexDirection": "column",
+ "gap": "4",
+ "justifyContent": "center",
+ "minHeight": "2xs",
+ "px": "3",
+ "py": "2",
+ "transition": "backgrounds",
+ "focusVisibleRing": "outside",
+ "_hover": {
+ "bg": "bg.subtle"
+ },
+ "_dragging": {
+ "bg": "colorPalette.subtle",
+ "borderStyle": "solid",
+ "borderColor": "colorPalette.solid"
+ }
+ },
+ "dropzoneContent": {
+ "display": "flex",
+ "flexDirection": "column",
+ "alignItems": "center",
+ "textAlign": "center",
+ "gap": "1",
+ "textStyle": "sm"
+ },
+ "item": {
+ "textStyle": "sm",
+ "animationName": "fade-in",
+ "animationDuration": "moderate",
+ "background": "bg",
+ "borderRadius": "l2",
+ "borderWidth": "1px",
+ "width": "100%",
+ "display": "flex",
+ "alignItems": "center",
+ "gap": "3",
+ "p": "4"
+ },
+ "itemGroup": {
+ "width": "100%",
+ "display": "flex",
+ "flexDirection": "column",
+ "gap": "3"
+ },
+ "itemName": {
+ "color": "fg",
+ "fontWeight": "medium",
+ "lineClamp": "1"
+ },
+ "itemContent": {
+ "display": "flex",
+ "flexDirection": "column",
+ "gap": "0.5",
+ "flex": "1"
+ },
+ "itemSizeText": {
+ "color": "fg.muted",
+ "textStyle": "xs"
+ },
+ "itemDeleteTrigger": {
+ "alignSelf": "flex-start"
+ },
+ "itemPreviewImage": {
+ "width": "10",
+ "height": "10",
+ "objectFit": "scale-down"
+ }
+ },
+ "defaultVariants": {}
+ },
+ "hoverCard": {
+ "className": "chakra-hover-card",
+ "slots": [
+ "arrow",
+ "arrowTip",
+ "trigger",
+ "positioner",
+ "content"
+ ],
+ "base": {
+ "content": {
+ "position": "relative",
+ "display": "flex",
+ "flexDirection": "column",
+ "textStyle": "sm",
+ "--hovercard-bg": "colors.bg.panel",
+ "bg": "var(--hovercard-bg)",
+ "boxShadow": "lg",
+ "maxWidth": "80",
+ "borderRadius": "l3",
+ "zIndex": "popover",
+ "transformOrigin": "var(--transform-origin)",
+ "outline": "0",
+ "_open": {
+ "animationStyle": "slide-fade-in",
+ "animationDuration": "fast"
+ },
+ "_closed": {
+ "animationStyle": "slide-fade-out",
+ "animationDuration": "faster"
+ }
+ },
+ "arrow": {
+ "--arrow-size": "sizes.3",
+ "--arrow-background": "var(--hovercard-bg)"
+ },
+ "arrowTip": {
+ "borderTopWidth": "0.5px",
+ "borderInlineStartWidth": "0.5px"
+ }
+ },
+ "variants": {
+ "size": {
+ "xs": {
+ "content": {
+ "padding": "3"
+ }
+ },
+ "sm": {
+ "content": {
+ "padding": "4"
+ }
+ },
+ "md": {
+ "content": {
+ "padding": "5"
+ }
+ },
+ "lg": {
+ "content": {
+ "padding": "6"
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "size": "md"
+ }
+ },
+ "list": {
+ "className": "chakra-list",
+ "slots": [
+ "root",
+ "item",
+ "indicator"
+ ],
+ "base": {
+ "root": {
+ "display": "flex",
+ "flexDirection": "column",
+ "gap": "var(--list-gap)",
+ "& :where(ul, ol)": {
+ "marginTop": "var(--list-gap)"
+ }
+ },
+ "item": {
+ "whiteSpace": "normal",
+ "display": "list-item"
+ },
+ "indicator": {
+ "marginEnd": "2",
+ "minHeight": "1lh",
+ "flexShrink": 0,
+ "display": "inline-block",
+ "verticalAlign": "middle"
+ }
+ },
+ "variants": {
+ "variant": {
+ "marker": {
+ "root": {
+ "listStyle": "revert",
+ "listStylePosition": "inside"
+ },
+ "item": {
+ "_marker": {
+ "color": "fg.subtle"
+ }
+ }
+ },
+ "plain": {
+ "item": {
+ "alignItems": "flex-start",
+ "display": "inline-flex"
+ }
+ }
+ },
+ "align": {
+ "center": {
+ "item": {
+ "alignItems": "center"
+ }
+ },
+ "start": {
+ "item": {
+ "alignItems": "flex-start"
+ }
+ },
+ "end": {
+ "item": {
+ "alignItems": "flex-end"
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "variant": "marker"
+ }
+ },
+ "menu": {
+ "className": "chakra-menu",
+ "slots": [
+ "arrow",
+ "arrowTip",
+ "content",
+ "contextTrigger",
+ "indicator",
+ "item",
+ "itemGroup",
+ "itemGroupLabel",
+ "itemIndicator",
+ "itemText",
+ "positioner",
+ "separator",
+ "trigger",
+ "triggerItem",
+ "itemCommand"
+ ],
+ "base": {
+ "content": {
+ "outline": 0,
+ "bg": "bg.panel",
+ "boxShadow": "lg",
+ "color": "fg",
+ "maxHeight": "var(--available-height)",
+ "--menu-z-index": "zIndex.dropdown",
+ "zIndex": "calc(var(--menu-z-index) + var(--layer-index, 0))",
+ "borderRadius": "l2",
+ "overflow": "hidden",
+ "overflowY": "auto",
+ "_open": {
+ "animationStyle": "slide-fade-in",
+ "animationDuration": "fast"
+ },
+ "_closed": {
+ "animationStyle": "slide-fade-out",
+ "animationDuration": "faster"
+ }
+ },
+ "item": {
+ "textDecoration": "none",
+ "color": "fg",
+ "userSelect": "none",
+ "borderRadius": "l1",
+ "width": "100%",
+ "display": "flex",
+ "cursor": "menuitem",
+ "alignItems": "center",
+ "textAlign": "start",
+ "position": "relative",
+ "flex": "0 0 auto",
+ "outline": 0,
+ "_disabled": {
+ "layerStyle": "disabled"
+ }
+ },
+ "itemText": {
+ "flex": "1"
+ },
+ "itemGroupLabel": {
+ "px": "2",
+ "py": "1.5",
+ "fontWeight": "semibold",
+ "textStyle": "sm"
+ },
+ "indicator": {
+ "display": "inline-flex",
+ "alignItems": "center",
+ "justifyContent": "center",
+ "flexShrink": "0"
+ },
+ "itemCommand": {
+ "opacity": "0.6",
+ "textStyle": "xs",
+ "ms": "auto",
+ "ps": "4",
+ "letterSpacing": "widest"
+ },
+ "separator": {
+ "height": "1px",
+ "bg": "bg.muted",
+ "my": "1",
+ "mx": "-1"
+ }
+ },
+ "variants": {
+ "variant": {
+ "subtle": {
+ "item": {
+ "_highlighted": {
+ "bg": {
+ "_light": "bg.muted",
+ "_dark": "bg.emphasized"
+ }
+ }
+ }
+ },
+ "solid": {
+ "item": {
+ "_highlighted": {
+ "bg": "colorPalette.solid",
+ "color": "colorPalette.contrast"
+ }
+ }
+ }
+ },
+ "size": {
+ "sm": {
+ "content": {
+ "minW": "8rem",
+ "padding": "1"
+ },
+ "item": {
+ "gap": "1",
+ "textStyle": "xs",
+ "py": "1",
+ "px": "1.5"
+ }
+ },
+ "md": {
+ "content": {
+ "minW": "8rem",
+ "padding": "1.5"
+ },
+ "item": {
+ "gap": "2",
+ "textStyle": "sm",
+ "py": "1.5",
+ "px": "2"
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "size": "md",
+ "variant": "subtle"
+ }
+ },
+ "nativeSelect": {
+ "className": "chakra-native-select",
+ "slots": [
+ "root",
+ "field",
+ "indicator"
+ ],
+ "base": {
+ "root": {
+ "height": "fit-content",
+ "display": "flex",
+ "width": "100%",
+ "position": "relative"
+ },
+ "field": {
+ "width": "100%",
+ "minWidth": "0",
+ "outline": "0",
+ "appearance": "none",
+ "borderRadius": "l2",
+ "_disabled": {
+ "layerStyle": "disabled"
+ },
+ "_invalid": {
+ "borderColor": "border.error"
+ },
+ "focusVisibleRing": "inside",
+ "lineHeight": "normal",
+ "& > option, & > optgroup": {
+ "bg": "inherit"
+ }
+ },
+ "indicator": {
+ "position": "absolute",
+ "display": "inline-flex",
+ "alignItems": "center",
+ "justifyContent": "center",
+ "pointerEvents": "none",
+ "top": "50%",
+ "transform": "translateY(-50%)",
+ "height": "100%",
+ "color": "fg.muted",
+ "_disabled": {
+ "opacity": "0.5"
+ },
+ "_invalid": {
+ "color": "fg.error"
+ },
+ "_icon": {
+ "width": "1em",
+ "height": "1em"
+ }
+ }
+ },
+ "variants": {
+ "variant": {
+ "outline": {
+ "field": {
+ "bg": "transparent",
+ "borderWidth": "1px",
+ "borderColor": "border",
+ "_expanded": {
+ "borderColor": "border.emphasized"
+ }
+ }
+ },
+ "subtle": {
+ "field": {
+ "borderWidth": "1px",
+ "borderColor": "transparent",
+ "bg": "bg.muted"
+ }
+ },
+ "plain": {
+ "field": {
+ "bg": "transparent",
+ "color": "fg",
+ "focusRingWidth": "2px"
+ }
+ }
+ },
+ "size": {
+ "xs": {
+ "field": {
+ "textStyle": "xs",
+ "ps": "2",
+ "pe": "6",
+ "height": "6"
+ },
+ "indicator": {
+ "textStyle": "sm",
+ "insetEnd": "1.5"
+ }
+ },
+ "sm": {
+ "field": {
+ "textStyle": "sm",
+ "ps": "2.5",
+ "pe": "8",
+ "height": "8"
+ },
+ "indicator": {
+ "textStyle": "md",
+ "insetEnd": "2"
+ }
+ },
+ "md": {
+ "field": {
+ "textStyle": "sm",
+ "ps": "3",
+ "pe": "8",
+ "height": "10"
+ },
+ "indicator": {
+ "textStyle": "lg",
+ "insetEnd": "2"
+ }
+ },
+ "lg": {
+ "field": {
+ "textStyle": "md",
+ "ps": "4",
+ "pe": "8",
+ "height": "11"
+ },
+ "indicator": {
+ "textStyle": "xl",
+ "insetEnd": "3"
+ }
+ },
+ "xl": {
+ "field": {
+ "textStyle": "md",
+ "ps": "4.5",
+ "pe": "10",
+ "height": "12"
+ },
+ "indicator": {
+ "textStyle": "xl",
+ "insetEnd": "3"
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "size": "md",
+ "variant": "outline"
+ }
+ },
+ "numberInput": {
+ "className": "chakra-number-input",
+ "slots": [
+ "root",
+ "label",
+ "input",
+ "control",
+ "valueText",
+ "incrementTrigger",
+ "decrementTrigger",
+ "scrubber"
+ ],
+ "base": {
+ "root": {
+ "position": "relative",
+ "zIndex": "0",
+ "isolation": "isolate"
+ },
+ "input": {
+ "width": "100%",
+ "minWidth": "0",
+ "outline": "0",
+ "position": "relative",
+ "appearance": "none",
+ "textAlign": "start",
+ "borderRadius": "l2",
+ "_disabled": {
+ "layerStyle": "disabled"
+ },
+ "height": "var(--input-height)",
+ "minW": "var(--input-height)",
+ "--focus-color": "colors.colorPalette.focusRing",
+ "--error-color": "colors.border.error",
+ "_invalid": {
+ "focusRingColor": "var(--error-color)",
+ "borderColor": "var(--error-color)"
+ },
+ "verticalAlign": "top",
+ "pe": "calc(var(--stepper-width) + 0.5rem)"
+ },
+ "control": {
+ "display": "flex",
+ "flexDirection": "column",
+ "position": "absolute",
+ "top": "0",
+ "insetEnd": "0px",
+ "margin": "1px",
+ "width": "var(--stepper-width)",
+ "height": "calc(100% - 2px)",
+ "zIndex": "1",
+ "borderStartWidth": "1px",
+ "divideY": "1px"
+ },
+ "incrementTrigger": {
+ "display": "flex",
+ "justifyContent": "center",
+ "alignItems": "center",
+ "flex": "1",
+ "userSelect": "none",
+ "cursor": "button",
+ "lineHeight": "1",
+ "color": "fg.muted",
+ "--stepper-base-radius": "radii.l1",
+ "--stepper-radius": "calc(var(--stepper-base-radius) + 1px)",
+ "_icon": {
+ "boxSize": "1em"
+ },
+ "_disabled": {
+ "opacity": "0.5"
+ },
+ "_hover": {
+ "bg": "bg.muted"
+ },
+ "_active": {
+ "bg": "bg.emphasized"
+ },
+ "borderTopEndRadius": "var(--stepper-radius)"
+ },
+ "decrementTrigger": {
+ "display": "flex",
+ "justifyContent": "center",
+ "alignItems": "center",
+ "flex": "1",
+ "userSelect": "none",
+ "cursor": "button",
+ "lineHeight": "1",
+ "color": "fg.muted",
+ "--stepper-base-radius": "radii.l1",
+ "--stepper-radius": "calc(var(--stepper-base-radius) + 1px)",
+ "_icon": {
+ "boxSize": "1em"
+ },
+ "_disabled": {
+ "opacity": "0.5"
+ },
+ "_hover": {
+ "bg": "bg.muted"
+ },
+ "_active": {
+ "bg": "bg.emphasized"
+ },
+ "borderBottomEndRadius": "var(--stepper-radius)"
+ },
+ "valueText": {
+ "fontWeight": "medium",
+ "fontFeatureSettings": "pnum",
+ "fontVariantNumeric": "proportional-nums"
+ }
+ },
+ "variants": {
+ "size": {
+ "xs": {
+ "input": {
+ "textStyle": "xs",
+ "px": "2",
+ "--input-height": "sizes.8"
+ },
+ "control": {
+ "fontSize": "2xs",
+ "--stepper-width": "sizes.4"
+ }
+ },
+ "sm": {
+ "input": {
+ "textStyle": "sm",
+ "px": "2.5",
+ "--input-height": "sizes.9"
+ },
+ "control": {
+ "fontSize": "xs",
+ "--stepper-width": "sizes.5"
+ }
+ },
+ "md": {
+ "input": {
+ "textStyle": "sm",
+ "px": "3",
+ "--input-height": "sizes.10"
+ },
+ "control": {
+ "fontSize": "sm",
+ "--stepper-width": "sizes.6"
+ }
+ },
+ "lg": {
+ "input": {
+ "textStyle": "md",
+ "px": "4",
+ "--input-height": "sizes.11"
+ },
+ "control": {
+ "fontSize": "sm",
+ "--stepper-width": "sizes.6"
+ }
+ }
+ },
+ "variant": {
+ "outline": {
+ "input": {
+ "bg": "transparent",
+ "borderWidth": "1px",
+ "borderColor": "border",
+ "focusVisibleRing": "inside"
+ }
+ },
+ "subtle": {
+ "input": {
+ "borderWidth": "1px",
+ "borderColor": "transparent",
+ "bg": "bg.muted",
+ "focusVisibleRing": "inside"
+ }
+ },
+ "flushed": {
+ "input": {
+ "bg": "transparent",
+ "borderBottomWidth": "1px",
+ "borderBottomColor": "border",
+ "borderRadius": "0",
+ "px": "0",
+ "_focusVisible": {
+ "borderColor": "var(--focus-color)",
+ "boxShadow": "0px 1px 0px 0px var(--focus-color)"
+ }
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "size": "md",
+ "variant": "outline"
+ }
+ },
+ "pinInput": {
+ "className": "chakra-pin-input",
+ "slots": [
+ "root",
+ "label",
+ "input",
+ "control"
+ ],
+ "base": {
+ "input": {
+ "width": "var(--input-height)",
+ "minWidth": "0",
+ "outline": "0",
+ "position": "relative",
+ "appearance": "none",
+ "textAlign": "center",
+ "borderRadius": "l2",
+ "_disabled": {
+ "layerStyle": "disabled"
+ },
+ "height": "var(--input-height)",
+ "minW": "var(--input-height)",
+ "--focus-color": "colors.colorPalette.focusRing",
+ "--error-color": "colors.border.error",
+ "_invalid": {
+ "focusRingColor": "var(--error-color)",
+ "borderColor": "var(--error-color)"
+ }
+ }
+ },
+ "variants": {
+ "size": {
+ "2xs": {
+ "input": {
+ "textStyle": "xs",
+ "px": "2",
+ "--input-height": "sizes.7"
+ }
+ },
+ "xs": {
+ "input": {
+ "textStyle": "xs",
+ "px": "2",
+ "--input-height": "sizes.8"
+ }
+ },
+ "sm": {
+ "input": {
+ "textStyle": "sm",
+ "px": "2.5",
+ "--input-height": "sizes.9"
+ }
+ },
+ "md": {
+ "input": {
+ "textStyle": "sm",
+ "px": "3",
+ "--input-height": "sizes.10"
+ }
+ },
+ "lg": {
+ "input": {
+ "textStyle": "md",
+ "px": "4",
+ "--input-height": "sizes.11"
+ }
+ },
+ "xl": {
+ "input": {
+ "textStyle": "md",
+ "px": "4.5",
+ "--input-height": "sizes.12"
+ }
+ },
+ "2xl": {
+ "input": {
+ "textStyle": "lg",
+ "px": "5",
+ "--input-height": "sizes.16"
+ }
+ }
+ },
+ "variant": {
+ "outline": {
+ "input": {
+ "bg": "transparent",
+ "borderWidth": "1px",
+ "borderColor": "border",
+ "focusVisibleRing": "inside"
+ }
+ },
+ "subtle": {
+ "input": {
+ "borderWidth": "1px",
+ "borderColor": "transparent",
+ "bg": "bg.muted",
+ "focusVisibleRing": "inside"
+ }
+ },
+ "flushed": {
+ "input": {
+ "bg": "transparent",
+ "borderBottomWidth": "1px",
+ "borderBottomColor": "border",
+ "borderRadius": "0",
+ "px": "0",
+ "_focusVisible": {
+ "borderColor": "var(--focus-color)",
+ "boxShadow": "0px 1px 0px 0px var(--focus-color)"
+ }
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "size": "md",
+ "variant": "outline"
+ }
+ },
+ "popover": {
+ "className": "chakra-popover",
+ "slots": [
+ "arrow",
+ "arrowTip",
+ "anchor",
+ "trigger",
+ "indicator",
+ "positioner",
+ "content",
+ "title",
+ "description",
+ "closeTrigger",
+ "header",
+ "body",
+ "footer"
+ ],
+ "base": {
+ "content": {
+ "position": "relative",
+ "display": "flex",
+ "flexDirection": "column",
+ "textStyle": "sm",
+ "--popover-bg": "colors.bg.panel",
+ "bg": "var(--popover-bg)",
+ "boxShadow": "lg",
+ "--popover-size": "sizes.xs",
+ "--popover-mobile-size": "calc(100dvw - 1rem)",
+ "width": {
+ "base": "min(var(--popover-mobile-size), var(--popover-size))",
+ "sm": "var(--popover-size)"
+ },
+ "borderRadius": "l3",
+ "--popover-z-index": "zIndex.popover",
+ "zIndex": "calc(var(--popover-z-index) + var(--layer-index, 0))",
+ "outline": "0",
+ "transformOrigin": "var(--transform-origin)",
+ "_open": {
+ "animationStyle": "scale-fade-in",
+ "animationDuration": "fast"
+ },
+ "_closed": {
+ "animationStyle": "scale-fade-out",
+ "animationDuration": "faster"
+ }
+ },
+ "header": {
+ "paddingInline": "var(--popover-padding)",
+ "paddingTop": "var(--popover-padding)"
+ },
+ "body": {
+ "padding": "var(--popover-padding)",
+ "flex": "1"
+ },
+ "footer": {
+ "display": "flex",
+ "alignItems": "center",
+ "paddingInline": "var(--popover-padding)",
+ "paddingBottom": "var(--popover-padding)"
+ },
+ "arrow": {
+ "--arrow-size": "sizes.3",
+ "--arrow-background": "var(--popover-bg)"
+ },
+ "arrowTip": {
+ "borderTopWidth": "1px",
+ "borderInlineStartWidth": "1px"
+ }
+ },
+ "variants": {
+ "size": {
+ "xs": {
+ "content": {
+ "--popover-padding": "spacing.3"
+ }
+ },
+ "sm": {
+ "content": {
+ "--popover-padding": "spacing.4"
+ }
+ },
+ "md": {
+ "content": {
+ "--popover-padding": "spacing.5"
+ }
+ },
+ "lg": {
+ "content": {
+ "--popover-padding": "spacing.6"
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "size": "md"
+ }
+ },
+ "progress": {
+ "slots": [
+ "root",
+ "label",
+ "track",
+ "range",
+ "valueText",
+ "view",
+ "circle",
+ "circleTrack",
+ "circleRange"
+ ],
+ "className": "chakra-progress",
+ "base": {
+ "root": {
+ "textStyle": "sm",
+ "position": "relative"
+ },
+ "track": {
+ "overflow": "hidden",
+ "position": "relative"
+ },
+ "range": {
+ "display": "flex",
+ "alignItems": "center",
+ "justifyContent": "center",
+ "transitionProperty": "width, height",
+ "transitionDuration": "slow",
+ "height": "100%",
+ "bgColor": "var(--track-color)",
+ "_indeterminate": {
+ "--animate-from-x": "-40%",
+ "--animate-to-x": "100%",
+ "position": "absolute",
+ "willChange": "left",
+ "minWidth": "50%",
+ "animation": "position 1s ease infinite normal none running",
+ "backgroundImage": "linear-gradient(to right, transparent 0%, var(--track-color) 50%, transparent 100%)"
+ }
+ },
+ "label": {
+ "display": "inline-flex",
+ "fontWeight": "medium",
+ "alignItems": "center",
+ "gap": "1"
+ },
+ "valueText": {
+ "textStyle": "xs",
+ "lineHeight": "1",
+ "fontWeight": "medium"
+ }
+ },
+ "variants": {
+ "variant": {
+ "outline": {
+ "track": {
+ "shadow": "inset",
+ "bgColor": "bg.muted"
+ },
+ "range": {
+ "bgColor": "colorPalette.solid"
+ }
+ },
+ "subtle": {
+ "track": {
+ "bgColor": "colorPalette.muted"
+ },
+ "range": {
+ "bgColor": "colorPalette.solid/72"
+ }
+ }
+ },
+ "shape": {
+ "square": {},
+ "rounded": {
+ "track": {
+ "borderRadius": "l1"
+ }
+ },
+ "full": {
+ "track": {
+ "borderRadius": "full"
+ }
+ }
+ },
+ "striped": {
+ "true": {
+ "range": {
+ "backgroundImage": "linear-gradient(45deg, var(--stripe-color) 25%, transparent 25%, transparent 50%, var(--stripe-color) 50%, var(--stripe-color) 75%, transparent 75%, transparent)",
+ "backgroundSize": "var(--stripe-size) var(--stripe-size)",
+ "--stripe-size": "1rem",
+ "--stripe-color": {
+ "_light": "rgba(255, 255, 255, 0.3)",
+ "_dark": "rgba(0, 0, 0, 0.3)"
+ }
+ }
+ }
+ },
+ "animated": {
+ "true": {
+ "range": {
+ "--animate-from": "var(--stripe-size)",
+ "animation": "bg-position 1s linear infinite"
+ }
+ }
+ },
+ "size": {
+ "xs": {
+ "track": {
+ "h": "1.5"
+ }
+ },
+ "sm": {
+ "track": {
+ "h": "2"
+ }
+ },
+ "md": {
+ "track": {
+ "h": "2.5"
+ }
+ },
+ "lg": {
+ "track": {
+ "h": "3"
+ }
+ },
+ "xl": {
+ "track": {
+ "h": "4"
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "variant": "outline",
+ "size": "md",
+ "shape": "rounded"
+ }
+ },
+ "progressCircle": {
+ "className": "chakra-progress-circle",
+ "slots": [
+ "root",
+ "label",
+ "track",
+ "range",
+ "valueText",
+ "view",
+ "circle",
+ "circleTrack",
+ "circleRange"
+ ],
+ "base": {
+ "root": {
+ "display": "inline-flex",
+ "textStyle": "sm",
+ "position": "relative"
+ },
+ "circle": {
+ "_indeterminate": {
+ "animation": "spin 2s linear infinite"
+ }
+ },
+ "circleTrack": {
+ "--track-color": "colors.colorPalette.muted",
+ "stroke": "var(--track-color)"
+ },
+ "circleRange": {
+ "stroke": "colorPalette.solid",
+ "transitionProperty": "stroke-dasharray",
+ "transitionDuration": "0.6s",
+ "_indeterminate": {
+ "animation": "circular-progress 1.5s linear infinite"
+ }
+ },
+ "label": {
+ "display": "inline-flex"
+ },
+ "valueText": {
+ "lineHeight": "1",
+ "fontWeight": "medium",
+ "letterSpacing": "tight",
+ "fontVariantNumeric": "tabular-nums"
+ }
+ },
+ "variants": {
+ "size": {
+ "xs": {
+ "circle": {
+ "--size": "24px",
+ "--thickness": "4px"
+ },
+ "valueText": {
+ "textStyle": "2xs"
+ }
+ },
+ "sm": {
+ "circle": {
+ "--size": "32px",
+ "--thickness": "5px"
+ },
+ "valueText": {
+ "textStyle": "2xs"
+ }
+ },
+ "md": {
+ "circle": {
+ "--size": "40px",
+ "--thickness": "6px"
+ },
+ "valueText": {
+ "textStyle": "xs"
+ }
+ },
+ "lg": {
+ "circle": {
+ "--size": "48px",
+ "--thickness": "7px"
+ },
+ "valueText": {
+ "textStyle": "sm"
+ }
+ },
+ "xl": {
+ "circle": {
+ "--size": "64px",
+ "--thickness": "8px"
+ },
+ "valueText": {
+ "textStyle": "sm"
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "size": "md"
+ }
+ },
+ "radioCard": {
+ "className": "chakra-radio-card",
+ "slots": [
+ "root",
+ "label",
+ "item",
+ "itemText",
+ "itemControl",
+ "indicator",
+ "itemAddon",
+ "itemIndicator",
+ "itemContent",
+ "itemDescription"
+ ],
+ "base": {
+ "root": {
+ "display": "flex",
+ "flexDirection": "column",
+ "gap": "1.5",
+ "isolation": "isolate"
+ },
+ "item": {
+ "flex": "1",
+ "display": "flex",
+ "flexDirection": "column",
+ "userSelect": "none",
+ "position": "relative",
+ "borderRadius": "l2",
+ "_focus": {
+ "bg": "colorPalette.muted/20"
+ },
+ "_disabled": {
+ "opacity": "0.8",
+ "borderColor": "border.disabled"
+ },
+ "_checked": {
+ "zIndex": "1"
+ }
+ },
+ "label": {
+ "display": "inline-flex",
+ "fontWeight": "medium",
+ "textStyle": "sm",
+ "_disabled": {
+ "opacity": "0.5"
+ }
+ },
+ "itemText": {
+ "fontWeight": "medium"
+ },
+ "itemDescription": {
+ "opacity": "0.64",
+ "textStyle": "sm"
+ },
+ "itemControl": {
+ "display": "inline-flex",
+ "flex": "1",
+ "pos": "relative",
+ "rounded": "inherit",
+ "justifyContent": "var(--radio-card-justify)",
+ "alignItems": "var(--radio-card-align)",
+ "_disabled": {
+ "bg": "bg.muted"
+ }
+ },
+ "itemIndicator": {
+ "display": "inline-flex",
+ "alignItems": "center",
+ "justifyContent": "center",
+ "flexShrink": 0,
+ "verticalAlign": "top",
+ "color": "white",
+ "borderWidth": "1px",
+ "borderColor": "transparent",
+ "borderRadius": "full",
+ "cursor": "radio",
+ "_focusVisible": {
+ "outline": "2px solid",
+ "outlineColor": "colorPalette.focusRing",
+ "outlineOffset": "2px"
+ },
+ "_invalid": {
+ "colorPalette": "red",
+ "borderColor": "red.500"
+ },
+ "_disabled": {
+ "opacity": "0.5",
+ "cursor": "disabled"
+ },
+ "& .dot": {
+ "height": "100%",
+ "width": "100%",
+ "borderRadius": "full",
+ "bg": "currentColor",
+ "scale": "0.4"
+ }
+ },
+ "itemAddon": {
+ "roundedBottom": "inherit",
+ "_disabled": {
+ "color": "fg.muted"
+ }
+ },
+ "itemContent": {
+ "display": "flex",
+ "flexDirection": "column",
+ "flex": "1",
+ "gap": "1",
+ "justifyContent": "var(--radio-card-justify)",
+ "alignItems": "var(--radio-card-align)"
+ }
+ },
+ "variants": {
+ "size": {
+ "sm": {
+ "item": {
+ "textStyle": "sm"
+ },
+ "itemControl": {
+ "padding": "3",
+ "gap": "1.5"
+ },
+ "itemAddon": {
+ "px": "3",
+ "py": "1.5",
+ "borderTopWidth": "1px"
+ },
+ "itemIndicator": {
+ "boxSize": "4"
+ }
+ },
+ "md": {
+ "item": {
+ "textStyle": "sm"
+ },
+ "itemControl": {
+ "padding": "4",
+ "gap": "2.5"
+ },
+ "itemAddon": {
+ "px": "4",
+ "py": "2",
+ "borderTopWidth": "1px"
+ },
+ "itemIndicator": {
+ "boxSize": "5"
+ }
+ },
+ "lg": {
+ "item": {
+ "textStyle": "md"
+ },
+ "itemControl": {
+ "padding": "4",
+ "gap": "3.5"
+ },
+ "itemAddon": {
+ "px": "4",
+ "py": "2",
+ "borderTopWidth": "1px"
+ },
+ "itemIndicator": {
+ "boxSize": "6"
+ }
+ }
+ },
+ "variant": {
+ "surface": {
+ "item": {
+ "borderWidth": "1px",
+ "_checked": {
+ "bg": "colorPalette.subtle",
+ "color": "colorPalette.fg",
+ "borderColor": "colorPalette.muted"
+ }
+ },
+ "itemIndicator": {
+ "borderWidth": "1px",
+ "borderColor": "border",
+ "_checked": {
+ "bg": "colorPalette.solid",
+ "color": "colorPalette.contrast",
+ "borderColor": "colorPalette.solid"
+ }
+ }
+ },
+ "subtle": {
+ "item": {
+ "bg": "bg.muted"
+ },
+ "itemControl": {
+ "_checked": {
+ "bg": "colorPalette.muted",
+ "color": "colorPalette.fg"
+ }
+ },
+ "itemIndicator": {
+ "borderWidth": "1px",
+ "borderColor": "inherit",
+ "_checked": {
+ "color": "colorPalette.fg",
+ "borderColor": "colorPalette.solid"
+ },
+ "& .dot": {
+ "scale": "0.6"
+ }
+ }
+ },
+ "outline": {
+ "item": {
+ "borderWidth": "1px",
+ "_checked": {
+ "boxShadow": "0 0 0 1px var(--shadow-color)",
+ "boxShadowColor": "colorPalette.solid",
+ "borderColor": "colorPalette.solid"
+ }
+ },
+ "itemIndicator": {
+ "borderWidth": "1px",
+ "borderColor": "border",
+ "_checked": {
+ "bg": "colorPalette.solid",
+ "color": "colorPalette.contrast",
+ "borderColor": "colorPalette.solid"
+ }
+ }
+ },
+ "solid": {
+ "item": {
+ "borderWidth": "1px",
+ "_checked": {
+ "bg": "colorPalette.solid",
+ "color": "colorPalette.contrast",
+ "borderColor": "colorPalette.solid"
+ }
+ },
+ "itemIndicator": {
+ "bg": "bg",
+ "borderWidth": "1px",
+ "borderColor": "inherit",
+ "_checked": {
+ "color": "colorPalette.solid",
+ "borderColor": "currentcolor"
+ }
+ }
+ }
+ },
+ "justify": {
+ "start": {
+ "item": {
+ "--radio-card-justify": "flex-start"
+ }
+ },
+ "end": {
+ "item": {
+ "--radio-card-justify": "flex-end"
+ }
+ },
+ "center": {
+ "item": {
+ "--radio-card-justify": "center"
+ }
+ }
+ },
+ "align": {
+ "start": {
+ "item": {
+ "--radio-card-align": "flex-start"
+ },
+ "itemControl": {
+ "textAlign": "start"
+ }
+ },
+ "end": {
+ "item": {
+ "--radio-card-align": "flex-end"
+ },
+ "itemControl": {
+ "textAlign": "end"
+ }
+ },
+ "center": {
+ "item": {
+ "--radio-card-align": "center"
+ },
+ "itemControl": {
+ "textAlign": "center"
+ }
+ }
+ },
+ "orientation": {
+ "vertical": {
+ "itemControl": {
+ "flexDirection": "column"
+ }
+ },
+ "horizontal": {
+ "itemControl": {
+ "flexDirection": "row"
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "size": "md",
+ "variant": "outline",
+ "align": "start",
+ "orientation": "horizontal"
+ }
+ },
+ "radioGroup": {
+ "className": "chakra-radio-group",
+ "slots": [
+ "root",
+ "label",
+ "item",
+ "itemText",
+ "itemControl",
+ "indicator",
+ "itemAddon",
+ "itemIndicator"
+ ],
+ "base": {
+ "item": {
+ "display": "inline-flex",
+ "alignItems": "center",
+ "position": "relative",
+ "fontWeight": "medium",
+ "_disabled": {
+ "cursor": "disabled"
+ }
+ },
+ "itemControl": {
+ "display": "inline-flex",
+ "alignItems": "center",
+ "justifyContent": "center",
+ "flexShrink": 0,
+ "verticalAlign": "top",
+ "color": "white",
+ "borderWidth": "1px",
+ "borderColor": "transparent",
+ "borderRadius": "full",
+ "cursor": "radio",
+ "_focusVisible": {
+ "outline": "2px solid",
+ "outlineColor": "colorPalette.focusRing",
+ "outlineOffset": "2px"
+ },
+ "_invalid": {
+ "colorPalette": "red",
+ "borderColor": "red.500"
+ },
+ "_disabled": {
+ "opacity": "0.5",
+ "cursor": "disabled"
+ },
+ "& .dot": {
+ "height": "100%",
+ "width": "100%",
+ "borderRadius": "full",
+ "bg": "currentColor",
+ "scale": "0.4"
+ }
+ },
+ "label": {
+ "userSelect": "none",
+ "textStyle": "sm",
+ "_disabled": {
+ "opacity": "0.5"
+ }
+ }
+ },
+ "variants": {
+ "variant": {
+ "outline": {
+ "itemControl": {
+ "borderWidth": "1px",
+ "borderColor": "inherit",
+ "_checked": {
+ "color": "colorPalette.fg",
+ "borderColor": "colorPalette.solid"
+ },
+ "& .dot": {
+ "scale": "0.6"
+ }
+ }
+ },
+ "subtle": {
+ "itemControl": {
+ "borderWidth": "1px",
+ "bg": "colorPalette.muted",
+ "borderColor": "colorPalette.muted",
+ "color": "transparent",
+ "_checked": {
+ "color": "colorPalette.fg"
+ }
+ }
+ },
+ "solid": {
+ "itemControl": {
+ "borderWidth": "1px",
+ "borderColor": "border",
+ "_checked": {
+ "bg": "colorPalette.solid",
+ "color": "colorPalette.contrast",
+ "borderColor": "colorPalette.solid"
+ }
+ }
+ }
+ },
+ "size": {
+ "xs": {
+ "item": {
+ "textStyle": "xs",
+ "gap": "1.5"
+ },
+ "itemControl": {
+ "boxSize": "3"
+ }
+ },
+ "sm": {
+ "item": {
+ "textStyle": "sm",
+ "gap": "2"
+ },
+ "itemControl": {
+ "boxSize": "4"
+ }
+ },
+ "md": {
+ "item": {
+ "textStyle": "sm",
+ "gap": "2.5"
+ },
+ "itemControl": {
+ "boxSize": "5"
+ }
+ },
+ "lg": {
+ "item": {
+ "textStyle": "md",
+ "gap": "3"
+ },
+ "itemControl": {
+ "boxSize": "6"
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "size": "md",
+ "variant": "solid"
+ }
+ },
+ "ratingGroup": {
+ "className": "chakra-rating-group",
+ "slots": [
+ "root",
+ "label",
+ "item",
+ "control",
+ "itemIndicator"
+ ],
+ "base": {
+ "root": {
+ "display": "inline-flex"
+ },
+ "control": {
+ "display": "inline-flex",
+ "alignItems": "center"
+ },
+ "item": {
+ "display": "inline-flex",
+ "alignItems": "center",
+ "justifyContent": "center",
+ "userSelect": "none"
+ },
+ "itemIndicator": {
+ "display": "inline-flex",
+ "alignItems": "center",
+ "justifyContent": "center",
+ "width": "1em",
+ "height": "1em",
+ "position": "relative",
+ "_icon": {
+ "stroke": "currentColor",
+ "width": "100%",
+ "height": "100%",
+ "display": "inline-block",
+ "flexShrink": 0,
+ "position": "absolute",
+ "left": 0,
+ "top": 0
+ },
+ "& [data-bg]": {
+ "color": "bg.emphasized"
+ },
+ "& [data-fg]": {
+ "color": "transparent"
+ },
+ "&[data-highlighted]:not([data-half])": {
+ "& [data-fg]": {
+ "color": "colorPalette.solid"
+ }
+ },
+ "&[data-half]": {
+ "& [data-fg]": {
+ "color": "colorPalette.solid",
+ "clipPath": "inset(0 50% 0 0)"
+ }
+ }
+ }
+ },
+ "variants": {
+ "size": {
+ "xs": {
+ "item": {
+ "textStyle": "sm"
+ }
+ },
+ "sm": {
+ "item": {
+ "textStyle": "md"
+ }
+ },
+ "md": {
+ "item": {
+ "textStyle": "xl"
+ }
+ },
+ "lg": {
+ "item": {
+ "textStyle": "2xl"
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "size": "md"
+ }
+ },
+ "segmentGroup": {
+ "className": "chakra-segment-group",
+ "slots": [
+ "root",
+ "label",
+ "item",
+ "itemText",
+ "itemControl",
+ "indicator"
+ ],
+ "base": {
+ "root": {
+ "--segment-radius": "radii.l2",
+ "borderRadius": "l2",
+ "display": "inline-flex",
+ "boxShadow": "inset",
+ "minW": "max-content",
+ "textAlign": "center",
+ "position": "relative",
+ "isolation": "isolate",
+ "bg": "bg.muted"
+ },
+ "item": {
+ "display": "flex",
+ "alignItems": "center",
+ "userSelect": "none",
+ "fontSize": "sm",
+ "position": "relative",
+ "color": "fg",
+ "borderRadius": "var(--segment-radius)",
+ "_disabled": {
+ "opacity": "0.5"
+ },
+ "&:has(input:focus-visible)": {
+ "focusRing": "outside"
+ },
+ "_before": {
+ "content": "\"\"",
+ "position": "absolute",
+ "insetInlineStart": 0,
+ "insetBlock": "1.5",
+ "bg": "border",
+ "width": "1px",
+ "transition": "opacity 0.2s"
+ },
+ "& + &[data-state=checked], &[data-state=checked] + &, &:first-of-type": {
+ "_before": {
+ "opacity": "0"
+ }
+ },
+ "&[data-state=checked][data-ssr]": {
+ "shadow": "sm",
+ "bg": "bg",
+ "borderRadius": "var(--segment-radius)"
+ }
+ },
+ "indicator": {
+ "shadow": "sm",
+ "pos": "absolute",
+ "bg": {
+ "_light": "bg",
+ "_dark": "bg.emphasized"
+ },
+ "width": "var(--width)",
+ "height": "var(--height)",
+ "top": "var(--top)",
+ "left": "var(--left)",
+ "zIndex": -1,
+ "borderRadius": "var(--segment-radius)"
+ }
+ },
+ "variants": {
+ "size": {
+ "xs": {
+ "root": {
+ "height": "6"
+ },
+ "item": {
+ "textStyle": "xs",
+ "px": "3",
+ "gap": "1"
+ }
+ },
+ "sm": {
+ "root": {
+ "height": "8"
+ },
+ "item": {
+ "textStyle": "sm",
+ "px": "4",
+ "gap": "2"
+ }
+ },
+ "md": {
+ "root": {
+ "height": "10"
+ },
+ "item": {
+ "textStyle": "sm",
+ "px": "4",
+ "gap": "2"
+ }
+ },
+ "lg": {
+ "root": {
+ "height": "10"
+ },
+ "item": {
+ "textStyle": "md",
+ "px": "5",
+ "gap": "3"
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "size": "md"
+ }
+ },
+ "select": {
+ "className": "chakra-select",
+ "slots": [
+ "label",
+ "positioner",
+ "trigger",
+ "indicator",
+ "clearTrigger",
+ "item",
+ "itemText",
+ "itemIndicator",
+ "itemGroup",
+ "itemGroupLabel",
+ "list",
+ "content",
+ "root",
+ "control",
+ "valueText",
+ "indicatorGroup"
+ ],
+ "base": {
+ "root": {
+ "display": "flex",
+ "flexDirection": "column",
+ "gap": "1.5",
+ "width": "full"
+ },
+ "trigger": {
+ "display": "flex",
+ "alignItems": "center",
+ "justifyContent": "space-between",
+ "width": "full",
+ "minH": "var(--select-trigger-height)",
+ "px": "var(--select-trigger-padding-x)",
+ "borderRadius": "l2",
+ "userSelect": "none",
+ "textAlign": "start",
+ "focusVisibleRing": "inside",
+ "_placeholderShown": {
+ "color": "fg.muted"
+ },
+ "_disabled": {
+ "layerStyle": "disabled"
+ },
+ "_invalid": {
+ "borderColor": "border.error"
+ }
+ },
+ "indicatorGroup": {
+ "display": "flex",
+ "alignItems": "center",
+ "gap": "1",
+ "pos": "absolute",
+ "right": "0",
+ "top": "0",
+ "bottom": "0",
+ "px": "var(--select-trigger-padding-x)",
+ "pointerEvents": "none"
+ },
+ "indicator": {
+ "display": "flex",
+ "alignItems": "center",
+ "justifyContent": "center",
+ "color": {
+ "base": "fg.muted",
+ "_disabled": "fg.subtle",
+ "_invalid": "fg.error"
+ }
+ },
+ "content": {
+ "background": "bg.panel",
+ "display": "flex",
+ "flexDirection": "column",
+ "zIndex": "dropdown",
+ "borderRadius": "l2",
+ "outline": 0,
+ "maxH": "96",
+ "overflowY": "auto",
+ "boxShadow": "md",
+ "_open": {
+ "animationStyle": "slide-fade-in",
+ "animationDuration": "fast"
+ },
+ "_closed": {
+ "animationStyle": "slide-fade-out",
+ "animationDuration": "fastest"
+ }
+ },
+ "item": {
+ "position": "relative",
+ "userSelect": "none",
+ "display": "flex",
+ "alignItems": "center",
+ "gap": "2",
+ "cursor": "option",
+ "justifyContent": "space-between",
+ "flex": "1",
+ "textAlign": "start",
+ "borderRadius": "l1",
+ "_highlighted": {
+ "bg": {
+ "_light": "bg.muted",
+ "_dark": "bg.emphasized"
+ }
+ },
+ "_disabled": {
+ "pointerEvents": "none",
+ "opacity": "0.5"
+ },
+ "_icon": {
+ "width": "4",
+ "height": "4"
+ }
+ },
+ "control": {
+ "pos": "relative"
+ },
+ "itemText": {
+ "flex": "1"
+ },
+ "itemGroup": {
+ "_first": {
+ "mt": "0"
+ }
+ },
+ "itemGroupLabel": {
+ "py": "1",
+ "fontWeight": "medium"
+ },
+ "label": {
+ "fontWeight": "medium",
+ "userSelect": "none",
+ "textStyle": "sm",
+ "_disabled": {
+ "layerStyle": "disabled"
+ }
+ },
+ "valueText": {
+ "lineClamp": "1",
+ "maxW": "80%"
+ }
+ },
+ "variants": {
+ "variant": {
+ "outline": {
+ "trigger": {
+ "bg": "transparent",
+ "borderWidth": "1px",
+ "borderColor": "border",
+ "_expanded": {
+ "borderColor": "border.emphasized"
+ }
+ }
+ },
+ "subtle": {
+ "trigger": {
+ "borderWidth": "1px",
+ "borderColor": "transparent",
+ "bg": "bg.muted"
+ }
+ }
+ },
+ "size": {
+ "xs": {
+ "root": {
+ "--select-trigger-height": "sizes.8",
+ "--select-trigger-padding-x": "spacing.2"
+ },
+ "content": {
+ "p": "1",
+ "gap": "1",
+ "textStyle": "xs"
+ },
+ "trigger": {
+ "textStyle": "xs",
+ "gap": "1"
+ },
+ "item": {
+ "py": "1",
+ "px": "2"
+ },
+ "itemGroupLabel": {
+ "py": "1",
+ "px": "2"
+ },
+ "indicator": {
+ "_icon": {
+ "width": "3.5",
+ "height": "3.5"
+ }
+ }
+ },
+ "sm": {
+ "root": {
+ "--select-trigger-height": "sizes.9",
+ "--select-trigger-padding-x": "spacing.2.5"
+ },
+ "content": {
+ "p": "1",
+ "textStyle": "sm"
+ },
+ "trigger": {
+ "textStyle": "sm",
+ "gap": "1"
+ },
+ "indicator": {
+ "_icon": {
+ "width": "4",
+ "height": "4"
+ }
+ },
+ "item": {
+ "py": "1",
+ "px": "1.5"
+ },
+ "itemGroup": {
+ "mt": "1"
+ },
+ "itemGroupLabel": {
+ "py": "1",
+ "px": "1.5"
+ }
+ },
+ "md": {
+ "root": {
+ "--select-trigger-height": "sizes.10",
+ "--select-trigger-padding-x": "spacing.3"
+ },
+ "content": {
+ "p": "1",
+ "textStyle": "sm"
+ },
+ "itemGroup": {
+ "mt": "1.5"
+ },
+ "item": {
+ "py": "1.5",
+ "px": "2"
+ },
+ "itemIndicator": {
+ "display": "flex",
+ "alignItems": "center",
+ "justifyContent": "center"
+ },
+ "itemGroupLabel": {
+ "py": "1.5",
+ "px": "2"
+ },
+ "trigger": {
+ "textStyle": "sm",
+ "gap": "2"
+ },
+ "indicator": {
+ "_icon": {
+ "width": "4",
+ "height": "4"
+ }
+ }
+ },
+ "lg": {
+ "root": {
+ "--select-trigger-height": "sizes.12",
+ "--select-trigger-padding-x": "spacing.4"
+ },
+ "content": {
+ "p": "1.5",
+ "textStyle": "md"
+ },
+ "itemGroup": {
+ "mt": "2"
+ },
+ "item": {
+ "py": "2",
+ "px": "3"
+ },
+ "itemGroupLabel": {
+ "py": "2",
+ "px": "3"
+ },
+ "trigger": {
+ "textStyle": "md",
+ "py": "3",
+ "gap": "2"
+ },
+ "indicator": {
+ "_icon": {
+ "width": "5",
+ "height": "5"
+ }
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "size": "md",
+ "variant": "outline"
+ }
+ },
+ "slider": {
+ "className": "chakra-slider",
+ "slots": [
+ "root",
+ "label",
+ "thumb",
+ "valueText",
+ "track",
+ "range",
+ "control",
+ "markerGroup",
+ "marker",
+ "draggingIndicator",
+ "markerIndicator"
+ ],
+ "base": {
+ "root": {
+ "display": "flex",
+ "flexDirection": "column",
+ "gap": "1",
+ "textStyle": "sm",
+ "position": "relative",
+ "isolation": "isolate",
+ "touchAction": "none"
+ },
+ "label": {
+ "fontWeight": "medium",
+ "textStyle": "sm"
+ },
+ "control": {
+ "display": "inline-flex",
+ "alignItems": "center",
+ "position": "relative"
+ },
+ "track": {
+ "overflow": "hidden",
+ "borderRadius": "full",
+ "flex": "1"
+ },
+ "range": {
+ "width": "inherit",
+ "height": "inherit",
+ "_disabled": {
+ "bg": "border.emphasized!"
+ }
+ },
+ "markerGroup": {
+ "position": "absolute!",
+ "zIndex": "1"
+ },
+ "marker": {
+ "--marker-bg": {
+ "base": "white",
+ "_underValue": "colors.bg"
+ },
+ "display": "flex",
+ "alignItems": "center",
+ "gap": "calc(var(--slider-thumb-size) / 2)",
+ "color": "fg.muted",
+ "textStyle": "xs"
+ },
+ "markerIndicator": {
+ "width": "var(--slider-marker-size)",
+ "height": "var(--slider-marker-size)",
+ "borderRadius": "full",
+ "bg": "var(--marker-bg)"
+ },
+ "thumb": {
+ "width": "var(--slider-thumb-size)",
+ "height": "var(--slider-thumb-size)",
+ "display": "flex",
+ "alignItems": "center",
+ "justifyContent": "center",
+ "outline": 0,
+ "zIndex": "2",
+ "borderRadius": "full",
+ "_focusVisible": {
+ "ring": "2px",
+ "ringColor": "colorPalette.focusRing",
+ "ringOffset": "2px",
+ "ringOffsetColor": "bg"
+ }
+ }
+ },
+ "variants": {
+ "size": {
+ "sm": {
+ "root": {
+ "--slider-thumb-size": "sizes.4",
+ "--slider-track-size": "sizes.1.5",
+ "--slider-marker-center": "6px",
+ "--slider-marker-size": "sizes.1",
+ "--slider-marker-inset": "3px"
+ }
+ },
+ "md": {
+ "root": {
+ "--slider-thumb-size": "sizes.5",
+ "--slider-track-size": "sizes.2",
+ "--slider-marker-center": "8px",
+ "--slider-marker-size": "sizes.1",
+ "--slider-marker-inset": "4px"
+ }
+ },
+ "lg": {
+ "root": {
+ "--slider-thumb-size": "sizes.6",
+ "--slider-track-size": "sizes.2.5",
+ "--slider-marker-center": "9px",
+ "--slider-marker-size": "sizes.1.5",
+ "--slider-marker-inset": "5px"
+ }
+ }
+ },
+ "variant": {
+ "outline": {
+ "track": {
+ "shadow": "inset",
+ "bg": "bg.emphasized/72"
+ },
+ "range": {
+ "bg": "colorPalette.solid"
+ },
+ "thumb": {
+ "borderWidth": "2px",
+ "borderColor": "colorPalette.solid",
+ "bg": "bg",
+ "_disabled": {
+ "bg": "border.emphasized",
+ "borderColor": "border.emphasized"
+ }
+ }
+ },
+ "solid": {
+ "track": {
+ "bg": "colorPalette.subtle",
+ "_disabled": {
+ "bg": "bg.muted"
+ }
+ },
+ "range": {
+ "bg": "colorPalette.solid"
+ },
+ "thumb": {
+ "bg": "colorPalette.solid",
+ "_disabled": {
+ "bg": "border.emphasized"
+ }
+ }
+ }
+ },
+ "orientation": {
+ "vertical": {
+ "root": {
+ "display": "inline-flex"
+ },
+ "control": {
+ "flexDirection": "column",
+ "height": "100%",
+ "minWidth": "var(--slider-thumb-size)",
+ "&[data-has-mark-label]": {
+ "marginEnd": "4"
+ }
+ },
+ "track": {
+ "width": "var(--slider-track-size)"
+ },
+ "thumb": {
+ "left": "50%",
+ "translate": "-50% 0"
+ },
+ "markerGroup": {
+ "insetStart": "var(--slider-marker-center)",
+ "insetBlock": "var(--slider-marker-inset)"
+ },
+ "marker": {
+ "flexDirection": "row"
+ }
+ },
+ "horizontal": {
+ "control": {
+ "flexDirection": "row",
+ "width": "100%",
+ "minHeight": "var(--slider-thumb-size)",
+ "&[data-has-mark-label]": {
+ "marginBottom": "4"
+ }
+ },
+ "track": {
+ "height": "var(--slider-track-size)"
+ },
+ "thumb": {
+ "top": "50%",
+ "translate": "0 -50%"
+ },
+ "markerGroup": {
+ "top": "var(--slider-marker-center)",
+ "insetInline": "var(--slider-marker-inset)"
+ },
+ "marker": {
+ "flexDirection": "column"
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "size": "md",
+ "variant": "outline",
+ "orientation": "horizontal"
+ }
+ },
+ "stat": {
+ "className": "chakra-stat",
+ "slots": [
+ "root",
+ "label",
+ "helpText",
+ "valueText",
+ "valueUnit",
+ "indicator"
+ ],
+ "base": {
+ "root": {
+ "display": "flex",
+ "flexDirection": "column",
+ "gap": "1",
+ "position": "relative",
+ "flex": "1"
+ },
+ "label": {
+ "display": "inline-flex",
+ "gap": "1.5",
+ "alignItems": "center",
+ "color": "fg.muted",
+ "textStyle": "sm"
+ },
+ "helpText": {
+ "color": "fg.muted",
+ "textStyle": "xs"
+ },
+ "valueUnit": {
+ "color": "fg.muted",
+ "textStyle": "xs",
+ "fontWeight": "initial",
+ "letterSpacing": "initial"
+ },
+ "valueText": {
+ "verticalAlign": "baseline",
+ "fontWeight": "semibold",
+ "letterSpacing": "tight",
+ "fontFeatureSettings": "pnum",
+ "fontVariantNumeric": "proportional-nums",
+ "display": "inline-flex",
+ "gap": "1"
+ },
+ "indicator": {
+ "display": "inline-flex",
+ "alignItems": "center",
+ "justifyContent": "center",
+ "marginEnd": 1,
+ "& :where(svg)": {
+ "w": "1em",
+ "h": "1em"
+ },
+ "&[data-type=up]": {
+ "color": "fg.success"
+ },
+ "&[data-type=down]": {
+ "color": "fg.error"
+ }
+ }
+ },
+ "variants": {
+ "size": {
+ "sm": {
+ "valueText": {
+ "textStyle": "xl"
+ }
+ },
+ "md": {
+ "valueText": {
+ "textStyle": "2xl"
+ }
+ },
+ "lg": {
+ "valueText": {
+ "textStyle": "3xl"
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "size": "md"
+ }
+ },
+ "steps": {
+ "className": "chakra-steps",
+ "slots": [
+ "root",
+ "list",
+ "item",
+ "trigger",
+ "indicator",
+ "separator",
+ "content",
+ "title",
+ "description",
+ "nextTrigger",
+ "prevTrigger",
+ "progress"
+ ],
+ "base": {
+ "root": {
+ "display": "flex",
+ "width": "full"
+ },
+ "list": {
+ "display": "flex",
+ "justifyContent": "space-between",
+ "--steps-gutter": "spacing.3",
+ "--steps-thickness": "2px"
+ },
+ "title": {
+ "fontWeight": "medium",
+ "color": "fg"
+ },
+ "description": {
+ "color": "fg.muted"
+ },
+ "separator": {
+ "bg": "border",
+ "flex": "1"
+ },
+ "indicator": {
+ "display": "flex",
+ "justifyContent": "center",
+ "alignItems": "center",
+ "flexShrink": "0",
+ "borderRadius": "full",
+ "fontWeight": "medium",
+ "width": "var(--steps-size)",
+ "height": "var(--steps-size)",
+ "_icon": {
+ "flexShrink": "0",
+ "width": "var(--steps-icon-size)",
+ "height": "var(--steps-icon-size)"
+ }
+ },
+ "item": {
+ "position": "relative",
+ "display": "flex",
+ "flex": "1 0 0",
+ "&:last-of-type": {
+ "flex": "initial",
+ "& [data-part=separator]": {
+ "display": "none"
+ }
+ }
+ },
+ "trigger": {
+ "display": "flex",
+ "alignItems": "center",
+ "gap": "3",
+ "textAlign": "start",
+ "focusVisibleRing": "outside",
+ "borderRadius": "l2"
+ },
+ "content": {
+ "focusVisibleRing": "outside"
+ }
+ },
+ "variants": {
+ "orientation": {
+ "vertical": {
+ "root": {
+ "flexDirection": "row",
+ "height": "100%"
+ },
+ "list": {
+ "flexDirection": "column",
+ "alignItems": "flex-start"
+ },
+ "separator": {
+ "position": "absolute",
+ "width": "var(--steps-thickness)",
+ "height": "100%",
+ "maxHeight": "calc(100% - var(--steps-size) - var(--steps-gutter) * 2)",
+ "top": "calc(var(--steps-size) + var(--steps-gutter))",
+ "insetStart": "calc(var(--steps-size) / 2 - 1px)"
+ },
+ "item": {
+ "alignItems": "flex-start"
+ }
+ },
+ "horizontal": {
+ "root": {
+ "flexDirection": "column",
+ "width": "100%"
+ },
+ "list": {
+ "flexDirection": "row",
+ "alignItems": "center"
+ },
+ "separator": {
+ "width": "100%",
+ "height": "var(--steps-thickness)",
+ "marginX": "var(--steps-gutter)"
+ },
+ "item": {
+ "alignItems": "center"
+ }
+ }
+ },
+ "variant": {
+ "solid": {
+ "indicator": {
+ "_incomplete": {
+ "borderWidth": "var(--steps-thickness)"
+ },
+ "_current": {
+ "bg": "colorPalette.muted",
+ "borderWidth": "var(--steps-thickness)",
+ "borderColor": "colorPalette.solid",
+ "color": "colorPalette.fg"
+ },
+ "_complete": {
+ "bg": "colorPalette.solid",
+ "borderColor": "colorPalette.solid",
+ "color": "colorPalette.contrast"
+ }
+ },
+ "separator": {
+ "_complete": {
+ "bg": "colorPalette.solid"
+ }
+ }
+ },
+ "subtle": {
+ "indicator": {
+ "_incomplete": {
+ "bg": "bg.muted"
+ },
+ "_current": {
+ "bg": "colorPalette.muted",
+ "color": "colorPalette.fg"
+ },
+ "_complete": {
+ "bg": "colorPalette.emphasized",
+ "color": "colorPalette.fg"
+ }
+ },
+ "separator": {
+ "_complete": {
+ "bg": "colorPalette.emphasized"
+ }
+ }
+ }
+ },
+ "size": {
+ "xs": {
+ "root": {
+ "gap": "2.5"
+ },
+ "list": {
+ "--steps-size": "sizes.6",
+ "--steps-icon-size": "sizes.3.5",
+ "textStyle": "xs"
+ },
+ "title": {
+ "textStyle": "sm"
+ }
+ },
+ "sm": {
+ "root": {
+ "gap": "3"
+ },
+ "list": {
+ "--steps-size": "sizes.8",
+ "--steps-icon-size": "sizes.4",
+ "textStyle": "xs"
+ },
+ "title": {
+ "textStyle": "sm"
+ }
+ },
+ "md": {
+ "root": {
+ "gap": "4"
+ },
+ "list": {
+ "--steps-size": "sizes.10",
+ "--steps-icon-size": "sizes.4",
+ "textStyle": "sm"
+ },
+ "title": {
+ "textStyle": "sm"
+ }
+ },
+ "lg": {
+ "root": {
+ "gap": "6"
+ },
+ "list": {
+ "--steps-size": "sizes.11",
+ "--steps-icon-size": "sizes.5",
+ "textStyle": "md"
+ },
+ "title": {
+ "textStyle": "md"
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "size": "md",
+ "variant": "solid",
+ "orientation": "horizontal"
+ }
+ },
+ "switch": {
+ "slots": [
+ "root",
+ "label",
+ "control",
+ "thumb",
+ "indicator"
+ ],
+ "className": "chakra-switch",
+ "base": {
+ "root": {
+ "display": "inline-flex",
+ "gap": "2.5",
+ "alignItems": "center",
+ "position": "relative",
+ "verticalAlign": "middle",
+ "--switch-diff": "calc(var(--switch-width) - var(--switch-height))",
+ "--switch-x": {
+ "base": "var(--switch-diff)",
+ "_rtl": "calc(var(--switch-diff) * -1)"
+ }
+ },
+ "label": {
+ "lineHeight": "1",
+ "userSelect": "none",
+ "fontSize": "sm",
+ "fontWeight": "medium",
+ "_disabled": {
+ "opacity": "0.5"
+ }
+ },
+ "indicator": {
+ "position": "absolute",
+ "height": "var(--switch-height)",
+ "width": "var(--switch-height)",
+ "fontSize": "var(--switch-indicator-font-size)",
+ "fontWeight": "medium",
+ "flexShrink": 0,
+ "userSelect": "none",
+ "display": "grid",
+ "placeContent": "center",
+ "transition": "inset-inline-start 0.12s ease",
+ "insetInlineStart": "calc(var(--switch-x) - 2px)",
+ "_checked": {
+ "insetInlineStart": "2px"
+ }
+ },
+ "control": {
+ "display": "inline-flex",
+ "gap": "0.5rem",
+ "flexShrink": 0,
+ "justifyContent": "flex-start",
+ "cursor": "switch",
+ "borderRadius": "full",
+ "position": "relative",
+ "width": "var(--switch-width)",
+ "height": "var(--switch-height)",
+ "_disabled": {
+ "opacity": "0.5",
+ "cursor": "not-allowed"
+ },
+ "_invalid": {
+ "outline": "2px solid",
+ "outlineColor": "border.error",
+ "outlineOffset": "2px"
+ }
+ },
+ "thumb": {
+ "display": "flex",
+ "alignItems": "center",
+ "justifyContent": "center",
+ "flexShrink": 0,
+ "transitionProperty": "translate",
+ "transitionDuration": "fast",
+ "borderRadius": "inherit",
+ "_checked": {
+ "translate": "var(--switch-x) 0"
+ }
+ }
+ },
+ "variants": {
+ "variant": {
+ "solid": {
+ "control": {
+ "borderRadius": "full",
+ "bg": "bg.emphasized",
+ "focusVisibleRing": "outside",
+ "_checked": {
+ "bg": "colorPalette.solid"
+ }
+ },
+ "thumb": {
+ "bg": "white",
+ "width": "var(--switch-height)",
+ "height": "var(--switch-height)",
+ "scale": "0.8",
+ "boxShadow": "sm",
+ "_checked": {
+ "bg": "colorPalette.contrast"
+ }
+ }
+ },
+ "raised": {
+ "control": {
+ "borderRadius": "full",
+ "height": "calc(var(--switch-height) / 2)",
+ "bg": "bg.muted",
+ "boxShadow": "inset",
+ "_checked": {
+ "bg": "colorPalette.solid/60"
+ }
+ },
+ "thumb": {
+ "width": "var(--switch-height)",
+ "height": "var(--switch-height)",
+ "position": "relative",
+ "top": "calc(var(--switch-height) * -0.25)",
+ "bg": "white",
+ "boxShadow": "xs",
+ "focusVisibleRing": "outside",
+ "_checked": {
+ "bg": "colorPalette.solid"
+ }
+ }
+ }
+ },
+ "size": {
+ "xs": {
+ "root": {
+ "--switch-width": "sizes.6",
+ "--switch-height": "sizes.3",
+ "--switch-indicator-font-size": "fontSizes.xs"
+ }
+ },
+ "sm": {
+ "root": {
+ "--switch-width": "sizes.8",
+ "--switch-height": "sizes.4",
+ "--switch-indicator-font-size": "fontSizes.xs"
+ }
+ },
+ "md": {
+ "root": {
+ "--switch-width": "sizes.10",
+ "--switch-height": "sizes.5",
+ "--switch-indicator-font-size": "fontSizes.sm"
+ }
+ },
+ "lg": {
+ "root": {
+ "--switch-width": "sizes.12",
+ "--switch-height": "sizes.6",
+ "--switch-indicator-font-size": "fontSizes.md"
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "variant": "solid",
+ "size": "md"
+ }
+ },
+ "table": {
+ "className": "chakra-table",
+ "slots": [
+ "root",
+ "header",
+ "body",
+ "row",
+ "columnHeader",
+ "cell",
+ "footer",
+ "caption"
+ ],
+ "base": {
+ "root": {
+ "fontVariantNumeric": "lining-nums tabular-nums",
+ "borderCollapse": "collapse",
+ "width": "full",
+ "textAlign": "start",
+ "verticalAlign": "top"
+ },
+ "row": {
+ "_selected": {
+ "bg": "colorPalette.subtle"
+ }
+ },
+ "cell": {
+ "textAlign": "start",
+ "alignItems": "center"
+ },
+ "columnHeader": {
+ "fontWeight": "medium",
+ "textAlign": "start",
+ "color": "fg"
+ },
+ "caption": {
+ "fontWeight": "medium",
+ "textStyle": "xs"
+ },
+ "footer": {
+ "fontWeight": "medium"
+ }
+ },
+ "variants": {
+ "interactive": {
+ "true": {
+ "body": {
+ "& tr": {
+ "_hover": {
+ "bg": "colorPalette.subtle"
+ }
+ }
+ }
+ }
+ },
+ "stickyHeader": {
+ "true": {
+ "header": {
+ "& :where(tr)": {
+ "top": "var(--table-sticky-offset, 0)",
+ "position": "sticky",
+ "zIndex": 1
+ }
+ }
+ }
+ },
+ "striped": {
+ "true": {
+ "row": {
+ "&:nth-of-type(odd) td": {
+ "bg": "bg.muted"
+ }
+ }
+ }
+ },
+ "showColumnBorder": {
+ "true": {
+ "columnHeader": {
+ "&:not(:last-of-type)": {
+ "borderInlineEndWidth": "1px"
+ }
+ },
+ "cell": {
+ "&:not(:last-of-type)": {
+ "borderInlineEndWidth": "1px"
+ }
+ }
+ }
+ },
+ "variant": {
+ "line": {
+ "columnHeader": {
+ "borderBottomWidth": "1px"
+ },
+ "cell": {
+ "borderBottomWidth": "1px"
+ },
+ "row": {
+ "bg": "bg"
+ }
+ },
+ "outline": {
+ "root": {
+ "boxShadow": "0 0 0 1px {colors.border}",
+ "overflow": "hidden"
+ },
+ "columnHeader": {
+ "borderBottomWidth": "1px"
+ },
+ "header": {
+ "bg": "bg.muted"
+ },
+ "row": {
+ "&:not(:last-of-type)": {
+ "borderBottomWidth": "1px"
+ }
+ },
+ "footer": {
+ "borderTopWidth": "1px"
+ }
+ }
+ },
+ "size": {
+ "sm": {
+ "root": {
+ "textStyle": "sm"
+ },
+ "columnHeader": {
+ "px": "2",
+ "py": "2"
+ },
+ "cell": {
+ "px": "2",
+ "py": "2"
+ }
+ },
+ "md": {
+ "root": {
+ "textStyle": "sm"
+ },
+ "columnHeader": {
+ "px": "3",
+ "py": "3"
+ },
+ "cell": {
+ "px": "3",
+ "py": "3"
+ }
+ },
+ "lg": {
+ "root": {
+ "textStyle": "md"
+ },
+ "columnHeader": {
+ "px": "4",
+ "py": "3"
+ },
+ "cell": {
+ "px": "4",
+ "py": "3"
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "variant": "line",
+ "size": "md"
+ }
+ },
+ "tabs": {
+ "slots": [
+ "root",
+ "trigger",
+ "list",
+ "content",
+ "contentGroup",
+ "indicator"
+ ],
+ "className": "chakra-tabs",
+ "base": {
+ "root": {
+ "--tabs-trigger-radius": "radii.l2",
+ "position": "relative",
+ "_horizontal": {
+ "display": "block"
+ },
+ "_vertical": {
+ "display": "flex"
+ }
+ },
+ "list": {
+ "display": "inline-flex",
+ "position": "relative",
+ "isolation": "isolate",
+ "--tabs-indicator-shadow": "shadows.xs",
+ "--tabs-indicator-bg": "colors.bg",
+ "minH": "var(--tabs-height)",
+ "_horizontal": {
+ "flexDirection": "row"
+ },
+ "_vertical": {
+ "flexDirection": "column"
+ }
+ },
+ "trigger": {
+ "outline": "0",
+ "minW": "var(--tabs-height)",
+ "height": "var(--tabs-height)",
+ "display": "flex",
+ "alignItems": "center",
+ "fontWeight": "medium",
+ "position": "relative",
+ "cursor": "button",
+ "gap": "2",
+ "_focusVisible": {
+ "zIndex": 1,
+ "outline": "2px solid",
+ "outlineColor": "colorPalette.focusRing"
+ },
+ "_disabled": {
+ "cursor": "not-allowed",
+ "opacity": 0.5
+ }
+ },
+ "content": {
+ "focusVisibleRing": "inside",
+ "_horizontal": {
+ "width": "100%",
+ "pt": "var(--tabs-content-padding)"
+ },
+ "_vertical": {
+ "height": "100%",
+ "ps": "var(--tabs-content-padding)"
+ }
+ },
+ "indicator": {
+ "width": "var(--width)",
+ "height": "var(--height)",
+ "borderRadius": "var(--tabs-indicator-radius)",
+ "bg": "var(--tabs-indicator-bg)",
+ "shadow": "var(--tabs-indicator-shadow)",
+ "zIndex": -1
+ }
+ },
+ "variants": {
+ "fitted": {
+ "true": {
+ "list": {
+ "display": "flex"
+ },
+ "trigger": {
+ "flex": 1,
+ "textAlign": "center",
+ "justifyContent": "center"
+ }
+ }
+ },
+ "justify": {
+ "start": {
+ "list": {
+ "justifyContent": "flex-start"
+ }
+ },
+ "center": {
+ "list": {
+ "justifyContent": "center"
+ }
+ },
+ "end": {
+ "list": {
+ "justifyContent": "flex-end"
+ }
+ }
+ },
+ "size": {
+ "sm": {
+ "root": {
+ "--tabs-height": "sizes.9",
+ "--tabs-content-padding": "spacing.3"
+ },
+ "trigger": {
+ "py": "1",
+ "px": "3",
+ "textStyle": "sm"
+ }
+ },
+ "md": {
+ "root": {
+ "--tabs-height": "sizes.10",
+ "--tabs-content-padding": "spacing.4"
+ },
+ "trigger": {
+ "py": "2",
+ "px": "4",
+ "textStyle": "sm"
+ }
+ },
+ "lg": {
+ "root": {
+ "--tabs-height": "sizes.11",
+ "--tabs-content-padding": "spacing.4.5"
+ },
+ "trigger": {
+ "py": "2",
+ "px": "4.5",
+ "textStyle": "md"
+ }
+ }
+ },
+ "variant": {
+ "line": {
+ "list": {
+ "display": "flex",
+ "borderColor": "border",
+ "_horizontal": {
+ "borderBottomWidth": "1px"
+ },
+ "_vertical": {
+ "borderEndWidth": "1px"
+ }
+ },
+ "trigger": {
+ "color": "fg.muted",
+ "_disabled": {
+ "_active": {
+ "bg": "initial"
+ }
+ },
+ "_selected": {
+ "color": "fg",
+ "_horizontal": {
+ "layerStyle": "indicator.bottom",
+ "--indicator-offset-y": "-1px",
+ "--indicator-color": "colors.colorPalette.solid"
+ },
+ "_vertical": {
+ "layerStyle": "indicator.end",
+ "--indicator-offset-x": "-1px"
+ }
+ }
+ }
+ },
+ "subtle": {
+ "trigger": {
+ "borderRadius": "var(--tabs-trigger-radius)",
+ "color": "fg.muted",
+ "_selected": {
+ "bg": "colorPalette.subtle",
+ "color": "colorPalette.fg"
+ }
+ }
+ },
+ "enclosed": {
+ "list": {
+ "bg": "bg.muted",
+ "padding": "1",
+ "borderRadius": "l3",
+ "minH": "calc(var(--tabs-height) - 4px)"
+ },
+ "trigger": {
+ "justifyContent": "center",
+ "color": "fg.muted",
+ "borderRadius": "var(--tabs-trigger-radius)",
+ "_selected": {
+ "bg": "bg",
+ "color": "colorPalette.fg",
+ "shadow": "xs"
+ }
+ }
+ },
+ "outline": {
+ "list": {
+ "--line-thickness": "1px",
+ "--line-offset": "calc(var(--line-thickness) * -1)",
+ "borderColor": "border",
+ "display": "flex",
+ "_horizontal": {
+ "_before": {
+ "content": "\"\"",
+ "position": "absolute",
+ "bottom": "0px",
+ "width": "100%",
+ "borderBottomWidth": "var(--line-thickness)",
+ "borderBottomColor": "border"
+ }
+ },
+ "_vertical": {
+ "_before": {
+ "content": "\"\"",
+ "position": "absolute",
+ "insetInline": "var(--line-offset)",
+ "height": "calc(100% - calc(var(--line-thickness) * 2))",
+ "borderEndWidth": "var(--line-thickness)",
+ "borderEndColor": "border"
+ }
+ }
+ },
+ "trigger": {
+ "color": "fg.muted",
+ "borderWidth": "1px",
+ "borderColor": "transparent",
+ "_selected": {
+ "bg": "currentBg",
+ "color": "colorPalette.fg"
+ },
+ "_horizontal": {
+ "borderTopRadius": "var(--tabs-trigger-radius)",
+ "marginBottom": "var(--line-offset)",
+ "marginEnd": {
+ "_notLast": "var(--line-offset)"
+ },
+ "_selected": {
+ "borderColor": "border",
+ "borderBottomColor": "transparent"
+ }
+ },
+ "_vertical": {
+ "borderStartRadius": "var(--tabs-trigger-radius)",
+ "marginEnd": "var(--line-offset)",
+ "marginBottom": {
+ "_notLast": "var(--line-offset)"
+ },
+ "_selected": {
+ "borderColor": "border",
+ "borderEndColor": "transparent"
+ }
+ }
+ }
+ },
+ "plain": {
+ "trigger": {
+ "color": "fg.muted",
+ "_selected": {
+ "color": "colorPalette.fg"
+ },
+ "borderRadius": "var(--tabs-trigger-radius)",
+ "&[data-selected][data-ssr]": {
+ "bg": "var(--tabs-indicator-bg)",
+ "shadow": "var(--tabs-indicator-shadow)",
+ "borderRadius": "var(--tabs-indicator-radius)"
+ }
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "size": "md",
+ "variant": "line"
+ }
+ },
+ "tag": {
+ "slots": [
+ "root",
+ "label",
+ "closeTrigger",
+ "startElement",
+ "endElement"
+ ],
+ "className": "chakra-tag",
+ "base": {
+ "root": {
+ "display": "inline-flex",
+ "alignItems": "center",
+ "verticalAlign": "top",
+ "maxWidth": "100%",
+ "userSelect": "none",
+ "borderRadius": "l2",
+ "focusVisibleRing": "outside"
+ },
+ "label": {
+ "lineClamp": "1"
+ },
+ "closeTrigger": {
+ "display": "flex",
+ "alignItems": "center",
+ "justifyContent": "center",
+ "outline": "0",
+ "borderRadius": "l1",
+ "color": "currentColor",
+ "focusVisibleRing": "inside",
+ "focusRingWidth": "2px"
+ },
+ "startElement": {
+ "flexShrink": 0,
+ "boxSize": "var(--tag-element-size)",
+ "ms": "var(--tag-element-offset)",
+ "&:has([data-scope=avatar])": {
+ "boxSize": "var(--tag-avatar-size)",
+ "ms": "calc(var(--tag-element-offset) * 1.5)"
+ },
+ "_icon": {
+ "boxSize": "100%"
+ }
+ },
+ "endElement": {
+ "flexShrink": 0,
+ "boxSize": "var(--tag-element-size)",
+ "me": "var(--tag-element-offset)",
+ "_icon": {
+ "boxSize": "100%"
+ },
+ "&:has(button)": {
+ "ms": "calc(var(--tag-element-offset) * -1)"
+ }
+ }
+ },
+ "variants": {
+ "size": {
+ "sm": {
+ "root": {
+ "px": "1.5",
+ "minH": "4.5",
+ "gap": "1",
+ "--tag-avatar-size": "spacing.3",
+ "--tag-element-size": "spacing.3",
+ "--tag-element-offset": "-2px"
+ },
+ "label": {
+ "textStyle": "xs"
+ }
+ },
+ "md": {
+ "root": {
+ "px": "1.5",
+ "minH": "5",
+ "gap": "1",
+ "--tag-avatar-size": "spacing.3.5",
+ "--tag-element-size": "spacing.3.5",
+ "--tag-element-offset": "-2px"
+ },
+ "label": {
+ "textStyle": "xs"
+ }
+ },
+ "lg": {
+ "root": {
+ "px": "2",
+ "minH": "6",
+ "gap": "1.5",
+ "--tag-avatar-size": "spacing.4.5",
+ "--tag-element-size": "spacing.4",
+ "--tag-element-offset": "-3px"
+ },
+ "label": {
+ "textStyle": "sm"
+ }
+ },
+ "xl": {
+ "root": {
+ "px": "2.5",
+ "minH": "8",
+ "gap": "1.5",
+ "--tag-avatar-size": "spacing.6",
+ "--tag-element-size": "spacing.4.5",
+ "--tag-element-offset": "-4px"
+ },
+ "label": {
+ "textStyle": "sm"
+ }
+ }
+ },
+ "variant": {
+ "subtle": {
+ "root": {
+ "bg": "colorPalette.subtle",
+ "color": "colorPalette.fg"
+ }
+ },
+ "solid": {
+ "root": {
+ "bg": "colorPalette.solid",
+ "color": "colorPalette.contrast"
+ }
+ },
+ "outline": {
+ "root": {
+ "color": "colorPalette.fg",
+ "shadow": "inset 0 0 0px 1px var(--shadow-color)",
+ "shadowColor": "colorPalette.muted"
+ }
+ },
+ "surface": {
+ "root": {
+ "bg": "colorPalette.subtle",
+ "color": "colorPalette.fg",
+ "shadow": "inset 0 0 0px 1px var(--shadow-color)",
+ "shadowColor": "colorPalette.muted"
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "size": "md",
+ "variant": "surface"
+ }
+ },
+ "toast": {
+ "slots": [
+ "root",
+ "title",
+ "description",
+ "indicator",
+ "closeTrigger",
+ "actionTrigger"
+ ],
+ "className": "chakra-toast",
+ "base": {
+ "root": {
+ "width": "full",
+ "display": "flex",
+ "alignItems": "flex-start",
+ "position": "relative",
+ "gap": "3",
+ "py": "4",
+ "ps": "4",
+ "pe": "6",
+ "borderRadius": "l2",
+ "translate": "var(--x) var(--y)",
+ "scale": "var(--scale)",
+ "zIndex": "var(--z-index)",
+ "height": "var(--height)",
+ "opacity": "var(--opacity)",
+ "willChange": "translate, opacity, scale",
+ "transition": "translate 400ms, scale 400ms, opacity 400ms, height 400ms, box-shadow 200ms",
+ "transitionTimingFunction": "cubic-bezier(0.21, 1.02, 0.73, 1)",
+ "_closed": {
+ "transition": "translate 400ms, scale 400ms, opacity 200ms",
+ "transitionTimingFunction": "cubic-bezier(0.06, 0.71, 0.55, 1)"
+ },
+ "bg": "bg.panel",
+ "color": "fg",
+ "boxShadow": "xl",
+ "--toast-trigger-bg": "colors.bg.muted",
+ "&[data-type=warning]": {
+ "bg": "orange.solid",
+ "color": "orange.contrast",
+ "--toast-trigger-bg": "{white/10}",
+ "--toast-border-color": "{white/40}"
+ },
+ "&[data-type=success]": {
+ "bg": "green.solid",
+ "color": "green.contrast",
+ "--toast-trigger-bg": "{white/10}",
+ "--toast-border-color": "{white/40}"
+ },
+ "&[data-type=error]": {
+ "bg": "red.solid",
+ "color": "red.contrast",
+ "--toast-trigger-bg": "{white/10}",
+ "--toast-border-color": "{white/40}"
+ }
+ },
+ "title": {
+ "fontWeight": "medium",
+ "textStyle": "sm",
+ "marginEnd": "2"
+ },
+ "description": {
+ "display": "inline",
+ "textStyle": "sm",
+ "opacity": "0.8"
+ },
+ "indicator": {
+ "flexShrink": "0",
+ "boxSize": "5"
+ },
+ "actionTrigger": {
+ "textStyle": "sm",
+ "fontWeight": "medium",
+ "height": "8",
+ "px": "3",
+ "borderRadius": "l2",
+ "alignSelf": "center",
+ "borderWidth": "1px",
+ "borderColor": "var(--toast-border-color, inherit)",
+ "transition": "background 200ms",
+ "_hover": {
+ "bg": "var(--toast-trigger-bg)"
+ }
+ },
+ "closeTrigger": {
+ "position": "absolute",
+ "top": "1",
+ "insetEnd": "1",
+ "padding": "1",
+ "display": "inline-flex",
+ "alignItems": "center",
+ "justifyContent": "center",
+ "color": "{currentColor/60}",
+ "borderRadius": "l2",
+ "textStyle": "md",
+ "transition": "background 200ms"
+ }
+ }
+ },
+ "tooltip": {
+ "slots": [
+ "trigger",
+ "arrow",
+ "arrowTip",
+ "positioner",
+ "content"
+ ],
+ "className": "chakra-tooltip",
+ "base": {
+ "content": {
+ "--tooltip-bg": "colors.bg.inverted",
+ "bg": "var(--tooltip-bg)",
+ "color": "fg.inverted",
+ "px": "2.5",
+ "py": "1",
+ "borderRadius": "l2",
+ "fontWeight": "medium",
+ "textStyle": "xs",
+ "boxShadow": "md",
+ "maxW": "xs",
+ "zIndex": "tooltip",
+ "transformOrigin": "var(--transform-origin)",
+ "_open": {
+ "animationStyle": "scale-fade-in",
+ "animationDuration": "fast"
+ },
+ "_closed": {
+ "animationStyle": "scale-fade-out",
+ "animationDuration": "fast"
+ }
+ },
+ "arrow": {
+ "--arrow-size": "sizes.2",
+ "--arrow-background": "var(--tooltip-bg)"
+ },
+ "arrowTip": {
+ "borderTopWidth": "1px",
+ "borderInlineStartWidth": "1px",
+ "borderColor": "var(--tooltip-bg)"
+ }
+ }
+ },
+ "status": {
+ "className": "chakra-status",
+ "slots": [
+ "root",
+ "indicator"
+ ],
+ "base": {
+ "root": {
+ "display": "inline-flex",
+ "alignItems": "center",
+ "gap": "2"
+ },
+ "indicator": {
+ "width": "0.64em",
+ "height": "0.64em",
+ "flexShrink": 0,
+ "borderRadius": "full",
+ "forcedColorAdjust": "none",
+ "bg": "colorPalette.solid"
+ }
+ },
+ "variants": {
+ "size": {
+ "sm": {
+ "root": {
+ "textStyle": "xs"
+ }
+ },
+ "md": {
+ "root": {
+ "textStyle": "sm"
+ }
+ },
+ "lg": {
+ "root": {
+ "textStyle": "md"
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "size": "md"
+ }
+ },
+ "timeline": {
+ "slots": [
+ "root",
+ "item",
+ "content",
+ "separator",
+ "indicator",
+ "connector",
+ "title",
+ "description"
+ ],
+ "className": "chakra-timeline",
+ "base": {
+ "root": {
+ "display": "flex",
+ "flexDirection": "column",
+ "width": "full",
+ "--timeline-thickness": "1px",
+ "--timeline-gutter": "4px"
+ },
+ "item": {
+ "display": "flex",
+ "position": "relative",
+ "alignItems": "flex-start",
+ "flexShrink": 0,
+ "gap": "4",
+ "_last": {
+ "& :where(.chakra-timeline__separator)": {
+ "display": "none"
+ }
+ }
+ },
+ "separator": {
+ "position": "absolute",
+ "borderStartWidth": "var(--timeline-thickness)",
+ "ms": "calc(-1 * var(--timeline-thickness) / 2)",
+ "insetInlineStart": "calc(var(--timeline-indicator-size) / 2)",
+ "insetBlock": "0",
+ "borderColor": "border"
+ },
+ "indicator": {
+ "outline": "2px solid {colors.bg}",
+ "position": "relative",
+ "flexShrink": "0",
+ "boxSize": "var(--timeline-indicator-size)",
+ "fontSize": "var(--timeline-font-size)",
+ "display": "flex",
+ "alignItems": "center",
+ "justifyContent": "center",
+ "borderRadius": "full",
+ "fontWeight": "medium"
+ },
+ "connector": {
+ "alignSelf": "stretch",
+ "position": "relative"
+ },
+ "content": {
+ "pb": "6",
+ "display": "flex",
+ "flexDirection": "column",
+ "width": "full",
+ "gap": "2"
+ },
+ "title": {
+ "display": "flex",
+ "fontWeight": "medium",
+ "flexWrap": "wrap",
+ "gap": "1.5",
+ "alignItems": "center",
+ "mt": "var(--timeline-margin)"
+ },
+ "description": {
+ "color": "fg.muted",
+ "textStyle": "xs"
+ }
+ },
+ "variants": {
+ "variant": {
+ "subtle": {
+ "indicator": {
+ "bg": "colorPalette.muted"
+ }
+ },
+ "solid": {
+ "indicator": {
+ "bg": "colorPalette.solid",
+ "color": "colorPalette.contrast"
+ }
+ },
+ "outline": {
+ "indicator": {
+ "bg": "currentBg",
+ "borderWidth": "1px",
+ "borderColor": "colorPalette.muted"
+ }
+ },
+ "plain": {}
+ },
+ "size": {
+ "sm": {
+ "root": {
+ "--timeline-indicator-size": "sizes.4",
+ "--timeline-font-size": "fontSizes.2xs"
+ },
+ "title": {
+ "textStyle": "xs"
+ }
+ },
+ "md": {
+ "root": {
+ "--timeline-indicator-size": "sizes.5",
+ "--timeline-font-size": "fontSizes.xs"
+ },
+ "title": {
+ "textStyle": "sm"
+ }
+ },
+ "lg": {
+ "root": {
+ "--timeline-indicator-size": "sizes.6",
+ "--timeline-font-size": "fontSizes.xs"
+ },
+ "title": {
+ "mt": "0.5",
+ "textStyle": "sm"
+ }
+ },
+ "xl": {
+ "root": {
+ "--timeline-indicator-size": "sizes.8",
+ "--timeline-font-size": "fontSizes.sm"
+ },
+ "title": {
+ "mt": "1.5",
+ "textStyle": "sm"
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "size": "md",
+ "variant": "solid"
+ }
+ },
+ "colorPicker": {
+ "className": "colorPicker",
+ "slots": [
+ "root",
+ "label",
+ "control",
+ "trigger",
+ "positioner",
+ "content",
+ "area",
+ "areaThumb",
+ "valueText",
+ "areaBackground",
+ "channelSlider",
+ "channelSliderLabel",
+ "channelSliderTrack",
+ "channelSliderThumb",
+ "channelSliderValueText",
+ "channelInput",
+ "transparencyGrid",
+ "swatchGroup",
+ "swatchTrigger",
+ "swatchIndicator",
+ "swatch",
+ "eyeDropperTrigger",
+ "formatTrigger",
+ "formatSelect",
+ "view"
+ ],
+ "base": {
+ "root": {
+ "display": "flex",
+ "flexDirection": "column",
+ "gap": "1.5"
+ },
+ "label": {
+ "color": "fg",
+ "fontWeight": "medium",
+ "textStyle": "sm"
+ },
+ "valueText": {
+ "textAlign": "start"
+ },
+ "control": {
+ "display": "flex",
+ "alignItems": "center",
+ "flexDirection": "row",
+ "gap": "2",
+ "position": "relative"
+ },
+ "swatchTrigger": {
+ "display": "flex",
+ "alignItems": "center",
+ "justifyContent": "center"
+ },
+ "trigger": {
+ "display": "flex",
+ "alignItems": "center",
+ "justifyContent": "center",
+ "flexDirection": "row",
+ "flexShrink": "0",
+ "gap": "2",
+ "textStyle": "sm",
+ "minH": "var(--input-height)",
+ "minW": "var(--input-height)",
+ "px": "1",
+ "rounded": "l2",
+ "_disabled": {
+ "opacity": "0.5"
+ },
+ "--focus-color": "colors.colorPalette.focusRing",
+ "&:focus-visible": {
+ "borderColor": "var(--focus-color)",
+ "outline": "1px solid var(--focus-color)"
+ },
+ "&[data-fit-content]": {
+ "--input-height": "unset",
+ "px": "0",
+ "border": "0"
+ }
+ },
+ "content": {
+ "display": "flex",
+ "flexDirection": "column",
+ "bg": "bg.panel",
+ "borderRadius": "l3",
+ "boxShadow": "lg",
+ "width": "64",
+ "p": "4",
+ "gap": "3",
+ "zIndex": "dropdown",
+ "_open": {
+ "animationStyle": "slide-fade-in",
+ "animationDuration": "fast"
+ },
+ "_closed": {
+ "animationStyle": "slide-fade-out",
+ "animationDuration": "faster"
+ }
+ },
+ "area": {
+ "height": "180px",
+ "borderRadius": "l2",
+ "overflow": "hidden"
+ },
+ "areaThumb": {
+ "borderRadius": "full",
+ "height": "var(--thumb-size)",
+ "width": "var(--thumb-size)",
+ "borderWidth": "2px",
+ "borderColor": "white",
+ "shadow": "sm",
+ "focusVisibleRing": "mixed",
+ "focusRingColor": "white"
+ },
+ "areaBackground": {
+ "height": "full"
+ },
+ "channelSlider": {
+ "borderRadius": "l2",
+ "flex": "1"
+ },
+ "channelSliderTrack": {
+ "height": "var(--slider-height)",
+ "borderRadius": "inherit",
+ "boxShadow": "inset 0 0 0 1px rgba(0,0,0,0.1)"
+ },
+ "swatchGroup": {
+ "display": "flex",
+ "flexDirection": "row",
+ "flexWrap": "wrap",
+ "gap": "2"
+ },
+ "swatch": {
+ "boxSize": "var(--swatch-size)",
+ "shadow": "inset 0 0 0 1px rgba(0, 0, 0, 0.1)",
+ "--checker-size": "8px",
+ "--checker-bg": "colors.bg",
+ "--checker-fg": "colors.bg.emphasized",
+ "background": "linear-gradient(var(--color), var(--color)), repeating-conic-gradient(var(--checker-fg) 0%, var(--checker-fg) 25%, var(--checker-bg) 0%, var(--checker-bg) 50%) 0% 50% / var(--checker-size) var(--checker-size) !important",
+ "display": "inline-flex",
+ "alignItems": "center",
+ "justifyContent": "center",
+ "flexShrink": "0",
+ "borderRadius": "l1"
+ },
+ "swatchIndicator": {
+ "color": "white",
+ "rounded": "full"
+ },
+ "channelSliderThumb": {
+ "borderRadius": "full",
+ "height": "var(--thumb-size)",
+ "width": "var(--thumb-size)",
+ "borderWidth": "2px",
+ "borderColor": "white",
+ "shadow": "sm",
+ "transform": "translate(-50%, -50%)",
+ "focusVisibleRing": "outside",
+ "focusRingOffset": "1px"
+ },
+ "channelInput": {
+ "width": "100%",
+ "minWidth": "0",
+ "outline": "0",
+ "position": "relative",
+ "appearance": "none",
+ "textAlign": "start",
+ "borderRadius": "l2",
+ "_disabled": {
+ "layerStyle": "disabled"
+ },
+ "height": "var(--input-height)",
+ "minW": "var(--input-height)",
+ "--focus-color": "colors.colorPalette.focusRing",
+ "--error-color": "colors.border.error",
+ "_invalid": {
+ "focusRingColor": "var(--error-color)",
+ "borderColor": "var(--error-color)"
+ },
+ "&::-webkit-inner-spin-button, &::-webkit-outer-spin-button": {
+ "WebkitAppearance": "none",
+ "margin": 0
+ }
+ },
+ "formatSelect": {
+ "textStyle": "xs",
+ "textTransform": "uppercase",
+ "borderWidth": "1px",
+ "minH": "6",
+ "focusRing": "inside",
+ "rounded": "l2"
+ },
+ "transparencyGrid": {
+ "borderRadius": "l2"
+ },
+ "view": {
+ "display": "flex",
+ "flexDirection": "column",
+ "gap": "2"
+ }
+ },
+ "variants": {
+ "size": {
+ "2xs": {
+ "channelInput": {
+ "textStyle": "xs",
+ "px": "2",
+ "--input-height": "sizes.7"
+ },
+ "swatch": {
+ "--swatch-size": "sizes.4.5"
+ },
+ "trigger": {
+ "--input-height": "sizes.7"
+ },
+ "area": {
+ "--thumb-size": "sizes.3"
+ },
+ "channelSlider": {
+ "--slider-height": "sizes.3",
+ "--thumb-size": "sizes.3"
+ }
+ },
+ "xs": {
+ "channelInput": {
+ "textStyle": "xs",
+ "px": "2",
+ "--input-height": "sizes.8"
+ },
+ "swatch": {
+ "--swatch-size": "sizes.5"
+ },
+ "trigger": {
+ "--input-height": "sizes.8"
+ },
+ "area": {
+ "--thumb-size": "sizes.3.5"
+ },
+ "channelSlider": {
+ "--slider-height": "sizes.3.5",
+ "--thumb-size": "sizes.3.5"
+ }
+ },
+ "sm": {
+ "channelInput": {
+ "textStyle": "sm",
+ "px": "2.5",
+ "--input-height": "sizes.9"
+ },
+ "swatch": {
+ "--swatch-size": "sizes.6"
+ },
+ "trigger": {
+ "--input-height": "sizes.9"
+ },
+ "area": {
+ "--thumb-size": "sizes.3.5"
+ },
+ "channelSlider": {
+ "--slider-height": "sizes.3.5",
+ "--thumb-size": "sizes.3.5"
+ }
+ },
+ "md": {
+ "channelInput": {
+ "textStyle": "sm",
+ "px": "3",
+ "--input-height": "sizes.10"
+ },
+ "swatch": {
+ "--swatch-size": "sizes.7"
+ },
+ "trigger": {
+ "--input-height": "sizes.10"
+ },
+ "area": {
+ "--thumb-size": "sizes.3.5"
+ },
+ "channelSlider": {
+ "--slider-height": "sizes.3.5",
+ "--thumb-size": "sizes.3.5"
+ }
+ },
+ "lg": {
+ "channelInput": {
+ "textStyle": "md",
+ "px": "4",
+ "--input-height": "sizes.11"
+ },
+ "swatch": {
+ "--swatch-size": "sizes.7"
+ },
+ "trigger": {
+ "--input-height": "sizes.11"
+ },
+ "area": {
+ "--thumb-size": "sizes.3.5"
+ },
+ "channelSlider": {
+ "--slider-height": "sizes.3.5",
+ "--thumb-size": "sizes.3.5"
+ }
+ },
+ "xl": {
+ "channelInput": {
+ "textStyle": "md",
+ "px": "4.5",
+ "--input-height": "sizes.12"
+ },
+ "swatch": {
+ "--swatch-size": "sizes.8"
+ },
+ "trigger": {
+ "--input-height": "sizes.12"
+ },
+ "area": {
+ "--thumb-size": "sizes.3.5"
+ },
+ "channelSlider": {
+ "--slider-height": "sizes.3.5",
+ "--thumb-size": "sizes.3.5"
+ }
+ },
+ "2xl": {
+ "channelInput": {
+ "textStyle": "lg",
+ "px": "5",
+ "--input-height": "sizes.16"
+ },
+ "swatch": {
+ "--swatch-size": "sizes.10"
+ },
+ "trigger": {
+ "--input-height": "sizes.16"
+ },
+ "area": {
+ "--thumb-size": "sizes.3.5"
+ },
+ "channelSlider": {
+ "--slider-height": "sizes.3.5",
+ "--thumb-size": "sizes.3.5"
+ }
+ }
+ },
+ "variant": {
+ "outline": {
+ "channelInput": {
+ "bg": "transparent",
+ "borderWidth": "1px",
+ "borderColor": "border",
+ "focusVisibleRing": "inside"
+ },
+ "trigger": {
+ "borderWidth": "1px"
+ }
+ },
+ "subtle": {
+ "channelInput": {
+ "borderWidth": "1px",
+ "borderColor": "transparent",
+ "bg": "bg.muted",
+ "focusVisibleRing": "inside"
+ },
+ "trigger": {
+ "borderWidth": "1px",
+ "borderColor": "transparent",
+ "bg": "bg.muted"
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "size": "md",
+ "variant": "outline"
+ }
+ },
+ "qrCode": {
+ "slots": [
+ "root",
+ "frame",
+ "pattern",
+ "overlay",
+ "downloadTrigger"
+ ],
+ "className": "chakra-qr-code",
+ "base": {
+ "root": {
+ "position": "relative",
+ "width": "fit-content",
+ "--qr-code-overlay-size": "calc(var(--qr-code-size) / 3)"
+ },
+ "frame": {
+ "width": "var(--qr-code-size)",
+ "height": "var(--qr-code-size)",
+ "fill": "currentColor"
+ },
+ "overlay": {
+ "display": "flex",
+ "alignItems": "center",
+ "justifyContent": "center",
+ "width": "var(--qr-code-overlay-size)",
+ "height": "var(--qr-code-overlay-size)",
+ "padding": "1",
+ "bg": "bg",
+ "rounded": "l1"
+ }
+ },
+ "variants": {
+ "size": {
+ "2xs": {
+ "root": {
+ "--qr-code-size": "40px"
+ }
+ },
+ "xs": {
+ "root": {
+ "--qr-code-size": "64px"
+ }
+ },
+ "sm": {
+ "root": {
+ "--qr-code-size": "80px"
+ }
+ },
+ "md": {
+ "root": {
+ "--qr-code-size": "120px"
+ }
+ },
+ "lg": {
+ "root": {
+ "--qr-code-size": "160px"
+ }
+ },
+ "xl": {
+ "root": {
+ "--qr-code-size": "200px"
+ }
+ },
+ "2xl": {
+ "root": {
+ "--qr-code-size": "240px"
+ }
+ },
+ "full": {
+ "root": {
+ "--qr-code-size": "100%"
+ }
+ }
+ }
+ },
+ "defaultVariants": {
+ "size": "md"
+ }
+ }
+ },
+ "textStyles": {
+ "2xs": {
+ "value": {
+ "fontSize": "2xs",
+ "lineHeight": "0.75rem"
+ }
+ },
+ "xs": {
+ "value": {
+ "fontSize": "xs",
+ "lineHeight": "1rem"
+ }
+ },
+ "sm": {
+ "value": {
+ "fontSize": "sm",
+ "lineHeight": "1.25rem"
+ }
+ },
+ "md": {
+ "value": {
+ "fontSize": "md",
+ "lineHeight": "1.5rem"
+ }
+ },
+ "lg": {
+ "value": {
+ "fontSize": "lg",
+ "lineHeight": "1.75rem"
+ }
+ },
+ "xl": {
+ "value": {
+ "fontSize": "xl",
+ "lineHeight": "1.875rem"
+ }
+ },
+ "2xl": {
+ "value": {
+ "fontSize": "2xl",
+ "lineHeight": "2rem"
+ }
+ },
+ "3xl": {
+ "value": {
+ "fontSize": "3xl",
+ "lineHeight": "2.375rem"
+ }
+ },
+ "4xl": {
+ "value": {
+ "fontSize": "4xl",
+ "lineHeight": "2.75rem",
+ "letterSpacing": "-0.025em"
+ }
+ },
+ "5xl": {
+ "value": {
+ "fontSize": "5xl",
+ "lineHeight": "3.75rem",
+ "letterSpacing": "-0.025em"
+ }
+ },
+ "6xl": {
+ "value": {
+ "fontSize": "6xl",
+ "lineHeight": "4.5rem",
+ "letterSpacing": "-0.025em"
+ }
+ },
+ "7xl": {
+ "value": {
+ "fontSize": "7xl",
+ "lineHeight": "5.75rem",
+ "letterSpacing": "-0.025em"
+ }
+ },
+ "none": {
+ "value": {}
+ }
+ },
+ "layerStyles": {
+ "fill.muted": {
+ "value": {
+ "background": "colorPalette.muted",
+ "color": "colorPalette.fg"
+ }
+ },
+ "fill.subtle": {
+ "value": {
+ "background": "colorPalette.subtle",
+ "color": "colorPalette.fg"
+ }
+ },
+ "fill.surface": {
+ "value": {
+ "background": "colorPalette.subtle",
+ "color": "colorPalette.fg",
+ "boxShadow": "0 0 0px 1px var(--shadow-color)",
+ "boxShadowColor": "colorPalette.muted"
+ }
+ },
+ "fill.solid": {
+ "value": {
+ "background": "colorPalette.solid",
+ "color": "colorPalette.contrast"
+ }
+ },
+ "outline.subtle": {
+ "value": {
+ "color": "colorPalette.fg",
+ "boxShadow": "inset 0 0 0px 1px var(--shadow-color)",
+ "boxShadowColor": "colorPalette.subtle"
+ }
+ },
+ "outline.solid": {
+ "value": {
+ "borderWidth": "1px",
+ "borderColor": "colorPalette.solid",
+ "color": "colorPalette.fg"
+ }
+ },
+ "indicator.bottom": {
+ "value": {
+ "position": "relative",
+ "--indicator-color-fallback": "colors.colorPalette.solid",
+ "_before": {
+ "content": "\"\"",
+ "position": "absolute",
+ "bottom": "var(--indicator-offset-y, 0)",
+ "insetInline": "var(--indicator-offset-x, 0)",
+ "height": "var(--indicator-thickness, 2px)",
+ "background": "var(--indicator-color, var(--indicator-color-fallback))"
+ }
+ }
+ },
+ "indicator.top": {
+ "value": {
+ "position": "relative",
+ "--indicator-color-fallback": "colors.colorPalette.solid",
+ "_before": {
+ "content": "\"\"",
+ "position": "absolute",
+ "top": "var(--indicator-offset-y, 0)",
+ "insetInline": "var(--indicator-offset-x, 0)",
+ "height": "var(--indicator-thickness, 2px)",
+ "background": "var(--indicator-color, var(--indicator-color-fallback))"
+ }
+ }
+ },
+ "indicator.start": {
+ "value": {
+ "position": "relative",
+ "--indicator-color-fallback": "colors.colorPalette.solid",
+ "_before": {
+ "content": "\"\"",
+ "position": "absolute",
+ "insetInlineStart": "var(--indicator-offset-x, 0)",
+ "insetBlock": "var(--indicator-offset-y, 0)",
+ "width": "var(--indicator-thickness, 2px)",
+ "background": "var(--indicator-color, var(--indicator-color-fallback))"
+ }
+ }
+ },
+ "indicator.end": {
+ "value": {
+ "position": "relative",
+ "--indicator-color-fallback": "colors.colorPalette.solid",
+ "_before": {
+ "content": "\"\"",
+ "position": "absolute",
+ "insetInlineEnd": "var(--indicator-offset-x, 0)",
+ "insetBlock": "var(--indicator-offset-y, 0)",
+ "width": "var(--indicator-thickness, 2px)",
+ "background": "var(--indicator-color, var(--indicator-color-fallback))"
+ }
+ }
+ },
+ "disabled": {
+ "value": {
+ "opacity": "0.5",
+ "cursor": "not-allowed"
+ }
+ },
+ "none": {
+ "value": {}
+ }
+ },
+ "animationStyles": {
+ "slide-fade-in": {
+ "value": {
+ "transformOrigin": "var(--transform-origin)",
+ "&[data-placement^=top]": {
+ "animationName": "slide-from-bottom, fade-in"
+ },
+ "&[data-placement^=bottom]": {
+ "animationName": "slide-from-top, fade-in"
+ },
+ "&[data-placement^=left]": {
+ "animationName": "slide-from-right, fade-in"
+ },
+ "&[data-placement^=right]": {
+ "animationName": "slide-from-left, fade-in"
+ }
+ }
+ },
+ "slide-fade-out": {
+ "value": {
+ "transformOrigin": "var(--transform-origin)",
+ "&[data-placement^=top]": {
+ "animationName": "slide-to-bottom, fade-out"
+ },
+ "&[data-placement^=bottom]": {
+ "animationName": "slide-to-top, fade-out"
+ },
+ "&[data-placement^=left]": {
+ "animationName": "slide-to-right, fade-out"
+ },
+ "&[data-placement^=right]": {
+ "animationName": "slide-to-left, fade-out"
+ }
+ }
+ },
+ "scale-fade-in": {
+ "value": {
+ "transformOrigin": "var(--transform-origin)",
+ "animationName": "scale-in, fade-in"
+ }
+ },
+ "scale-fade-out": {
+ "value": {
+ "transformOrigin": "var(--transform-origin)",
+ "animationName": "scale-out, fade-out"
+ }
+ }
+ }
+ }
+};
\ No newline at end of file
diff --git a/front/knip.ts b/front/knip.ts
index daacfa2..5730c49 100644
--- a/front/knip.ts
+++ b/front/knip.ts
@@ -3,16 +3,7 @@ import type { KnipConfig } from 'knip';
const config: KnipConfig = {
// Ignoring mostly shell binaries
ignoreBinaries: ['export', 'sleep'],
- ignore: [
- // Related to tests
- 'tests/**',
- '**.conf.js',
- 'steps.d.ts',
- 'steps_file.js',
- 'env_ci/codecept.conf.js',
- // Generic components are useful.
- 'src/components/**',
- ],
+ ignore: [],
};
export default config;
diff --git a/front/package.json b/front/package.json
index 6a3e368..6daa787 100644
--- a/front/package.json
+++ b/front/package.json
@@ -18,7 +18,7 @@
"test": "vitest run",
"test:watch": "vitest watch",
"build": "tsc && vite build",
- "static:build": "node build.js && pnpm build",
+ "static:build": "pnpm build",
"dev": "vite",
"pretty": "prettier -w .",
"lint": "pnpm tsc --noEmit",
@@ -29,46 +29,47 @@
"*.{ts,tsx,js,jsx,json}": "prettier --write"
},
"dependencies": {
- "@chakra-ui/cli": "3.3.1",
- "@chakra-ui/react": "3.3.1",
+ "@trivago/prettier-plugin-sort-imports": "5.2.2",
+ "@chakra-ui/cli": "3.7.0",
+ "@chakra-ui/react": "3.7.0",
"@emotion/react": "11.14.0",
"allotment": "1.20.2",
"css-mediaquery": "0.1.2",
"dayjs": "1.11.13",
"history": "5.3.0",
"next-themes": "^0.4.4",
- "react": "18.3.1",
- "react-dom": "18.3.1",
+ "react": "19.0.0",
+ "react-dom": "19.0.0",
"react-error-boundary": "5.0.0",
"react-icons": "5.4.0",
- "react-router-dom": "7.1.1",
- "react-select": "5.9.0",
+ "react-router-dom": "7.1.5",
+ "react-select": "5.10.0",
"react-use": "17.6.0",
"zod": "3.24.1",
"zustand": "5.0.3"
},
"devDependencies": {
"@chakra-ui/styled-system": "^2.12.0",
- "@playwright/test": "1.49.1",
- "@storybook/addon-actions": "8.4.7",
- "@storybook/addon-essentials": "8.4.7",
- "@storybook/addon-links": "8.4.7",
- "@storybook/addon-mdx-gfm": "8.4.7",
- "@storybook/react": "8.4.7",
- "@storybook/react-vite": "8.4.7",
- "@storybook/theming": "8.4.7",
+ "@playwright/test": "1.50.1",
+ "@storybook/addon-actions": "8.5.3",
+ "@storybook/addon-essentials": "8.5.3",
+ "@storybook/addon-links": "8.5.3",
+ "@storybook/addon-mdx-gfm": "8.5.3",
+ "@storybook/react": "8.5.3",
+ "@storybook/react-vite": "8.5.3",
+ "@storybook/theming": "8.5.3",
"@testing-library/jest-dom": "6.6.3",
- "@testing-library/react": "16.1.0",
- "@testing-library/user-event": "14.5.2",
- "@trivago/prettier-plugin-sort-imports": "5.2.1",
+ "@testing-library/react": "16.2.0",
+ "@testing-library/user-event": "14.6.1",
+ "@trivago/prettier-plugin-sort-imports": "5.2.2",
"@types/jest": "29.5.14",
- "@types/node": "22.10.6",
- "@types/react": "18.3.8",
- "@types/react-dom": "18.3.0",
- "@typescript-eslint/eslint-plugin": "8.20.0",
- "@typescript-eslint/parser": "8.20.0",
+ "@types/node": "22.13.1",
+ "@types/react": "19.0.8",
+ "@types/react-dom": "19.0.3",
+ "@typescript-eslint/eslint-plugin": "8.23.0",
+ "@typescript-eslint/parser": "8.23.0",
"@vitejs/plugin-react": "4.3.4",
- "eslint": "9.18.0",
+ "eslint": "9.20.0",
"eslint-plugin-codeceptjs": "1.3.0",
"eslint-plugin-import": "2.31.0",
"eslint-plugin-react": "7.37.4",
@@ -76,16 +77,16 @@
"eslint-plugin-storybook": "0.11.2",
"jest": "29.7.0",
"jest-environment-jsdom": "29.7.0",
- "knip": "5.42.0",
- "lint-staged": "15.3.0",
- "npm-check-updates": "^17.1.13",
+ "knip": "5.43.6",
+ "lint-staged": "15.4.3",
+ "npm-check-updates": "^17.1.14",
"prettier": "3.4.2",
- "puppeteer": "24.0.0",
+ "puppeteer": "24.2.0",
"react-is": "19.0.0",
- "storybook": "8.4.7",
+ "storybook": "8.5.3",
"ts-node": "10.9.2",
"typescript": "5.7.3",
- "vite": "6.0.7",
- "vitest": "2.1.8"
+ "vite": "6.1.0",
+ "vitest": "3.0.5"
}
-}
\ No newline at end of file
+}
diff --git a/front/src/App.tsx b/front/src/App.tsx
index 39f3e9c..5a221c0 100644
--- a/front/src/App.tsx
+++ b/front/src/App.tsx
@@ -1,128 +1,19 @@
-import { useState } from 'react';
+import { ErrorBoundary } from '@/errors/ErrorBoundary';
-import {
- Box,
- Button,
- ChakraProvider,
- DialogBody,
- DialogContent,
- DialogFooter,
- DialogHeader,
- DialogRoot,
- DialogTrigger,
- SelectContent,
- SelectItem,
- SelectRoot,
- SelectTrigger,
- SelectValueText,
- Stack,
- Text,
- useDisclosure,
-} from '@chakra-ui/react';
-
-import { environment } from '@/environment';
-import { App as SpaApp } from '@/scene/App';
-import { USERS, USERS_COLLECTION } from '@/service/session';
-import { hashLocalData } from '@/utils/sso';
-import { Toaster } from './components/ui/toaster';
-import { systemTheme } from './theme/theme';
-import { CloseButton } from './components/ui/close-button';
-
-const AppEnvHint = () => {
- const dialog = useDisclosure();
- const [selectUserTest, setSelectUserTest] = useState('NO_USER');
- //const setUser = useRightsStore((store) => store.setUser);
- const buildEnv =
- process.env.NODE_ENV === 'development'
- ? 'Development'
- : import.meta.env.VITE_DEV_ENV_NAME;
- const envName: Array = [];
- !!buildEnv && envName.push(buildEnv);
- if (!envName.length) {
- return null;
- }
- const handleChange = (selectedOption) => {
- console.log(`SELECT: [${selectedOption.target.value}]`);
- setSelectUserTest(selectedOption.target.value);
- };
- const onClose = () => {
- dialog.onClose();
- if (selectUserTest == 'NO_USER') {
- window.location.href = `/${environment.applName}/sso/${hashLocalData()}/false/__LOGOUT__`;
- } else {
- window.location.href = `/${environment.applName}/sso/${hashLocalData()}/true/${USERS[selectUserTest]}`;
- }
- };
+import { AudioPlayer } from './components';
+import { EnvDevelopment } from './components/EnvDevelopment/EnvDevelopment';
+import { AppRoutes } from './scene/AppRoutes';
+import { ServiceContextProvider } from './service/ServiceContext';
+export const App = () => {
return (
- <>
-
-
- {envName.join(' : ')}
-
-
-
-
- Outils développeurs
-
-
- User
-
-
-
-
-
- {USERS_COLLECTION.items.map((value) => (
-
- {value.label}
-
- ))}
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-const App = () => {
-
- return (
-
-
-
-
-
+
+
+
+
+
+
+
);
};
diff --git a/front/src/components/AudioPlayer.tsx b/front/src/components/AudioPlayer.tsx
index 10ea173..f488b48 100644
--- a/front/src/components/AudioPlayer.tsx
+++ b/front/src/components/AudioPlayer.tsx
@@ -1,16 +1,9 @@
-import { SyntheticEvent, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
-import {
- Box,
- Flex,
- IconButton,
- SliderTrack,
- Text,
-} from '@chakra-ui/react';
+import { Box, Flex, IconButton, SliderTrack, Text } from '@chakra-ui/react';
import {
MdFastForward,
MdFastRewind,
- MdGraphicEq,
MdLooksOne,
MdNavigateBefore,
MdNavigateNext,
@@ -22,15 +15,15 @@ import {
MdTrendingFlat,
} from 'react-icons/md';
+import { useColorModeValue } from '@/components/ui/color-mode';
import { useActivePlaylistService } from '@/service/ActivePlaylist';
import { useSpecificAlbum } from '@/service/Album';
import { useSpecificArtists } from '@/service/Artist';
import { useSpecificGender } from '@/service/Gender';
import { useSpecificTrack } from '@/service/Track';
import { DataUrlAccess } from '@/utils/data-url-access';
-import { useColorModeValue } from '@/components/ui/color-mode';
import { isNullOrUndefined } from '@/utils/validator';
-import { Icon } from './Icon';
+
import { Slider } from './ui/slider';
export enum PlayMode {
@@ -41,10 +34,16 @@ export enum PlayMode {
}
const playModeIcon = {
- [PlayMode.PLAY_ONE]: ,
- [PlayMode.PLAY_ALL]: ,
- [PlayMode.PLAY_ONE_LOOP]: ,
- [PlayMode.PLAY_ALL_LOOP]: ,
+ [PlayMode.PLAY_ONE]: ,
+ [PlayMode.PLAY_ALL]: (
+
+ ),
+ [PlayMode.PLAY_ONE_LOOP]: (
+
+ ),
+ [PlayMode.PLAY_ALL_LOOP]: (
+
+ ),
};
export type AudioPlayerProps = {};
@@ -60,7 +59,7 @@ const formatTime = (time) => {
return '00:00';
};
-export const AudioPlayer = ({ }: AudioPlayerProps) => {
+export const AudioPlayer = ({}: AudioPlayerProps) => {
const { playTrackList, trackOffset, previous, next, first } =
useActivePlaylistService();
const audioRef = useRef(null);
@@ -90,9 +89,9 @@ export const AudioPlayer = ({ }: AudioPlayerProps) => {
_hover: {
bgColor: 'brand.500',
},
- width: "50px",
- height: "50px",
- padding: "5px",
+ width: '50px',
+ height: '50px',
+ padding: '5px',
};
useEffect(() => {
@@ -198,7 +197,7 @@ export const AudioPlayer = ({ }: AudioPlayerProps) => {
console.log(`onTimeUpdate ${audioRef.current.currentTime}`);
setTimeProgress(audioRef.current.currentTime);
};
- const onDurationChange = (event) => { };
+ const onDurationChange = (event) => {};
const onChangeStateToPlay = () => {
setIsPlaying(true);
};
@@ -212,7 +211,7 @@ export const AudioPlayer = ({ }: AudioPlayerProps) => {
result.push(60 * i);
}
return result;
- }
+ };
return (
<>
{!isNullOrUndefined(trackOffset) && (
@@ -240,7 +239,7 @@ export const AudioPlayer = ({ }: AudioPlayerProps) => {
userSelect="none"
marginRight="auto"
overflow="hidden"
- // noOfLines={1}
+ // noOfLines={1}
>
{dataTrack?.name ?? '???'}
@@ -250,7 +249,7 @@ export const AudioPlayer = ({ }: AudioPlayerProps) => {
userSelect="none"
marginRight="auto"
overflow="hidden"
- // noOfLines={1}
+ // noOfLines={1}
>
{dataArtists.map((data) => data.name).join(', ')} /{' '}
{dataAlbum && dataAlbum?.name}
@@ -267,10 +266,13 @@ export const AudioPlayer = ({ }: AudioPlayerProps) => {
variant="outline"
colorPalette="brand"
marks={marks()}
- //focusCapture={false}
+ //focusCapture={false}
>
-
-
+
@@ -280,7 +282,7 @@ export const AudioPlayer = ({ }: AudioPlayerProps) => {
userSelect="none"
marginRight="auto"
overflow="hidden"
- // noOfLines={1}
+ // noOfLines={1}
>
{formatTime(timeProgress)}
@@ -296,9 +298,9 @@ export const AudioPlayer = ({ }: AudioPlayerProps) => {
variant="ghost"
>
{isPlaying ? (
-
+
) : (
-
+
)}
{
aria-label={'Stop'}
onClick={onStop}
variant="ghost"
- >
+ >
+
+
+ >
+ {' '}
+
+ >
+
+
+ >
+
+
+ >
+
+
{playModeIcon[playingMode]}
+ >
+ {playModeIcon[playingMode]}
+
)}
diff --git a/front/src/components/Cover.tsx b/front/src/components/Cover.tsx
index 5c1ff20..5bff6da 100644
--- a/front/src/components/Cover.tsx
+++ b/front/src/components/Cover.tsx
@@ -3,13 +3,14 @@ import { ReactElement, useEffect, useState } from 'react';
import { Box, BoxProps, Flex, FlexProps } from '@chakra-ui/react';
import { Image } from '@chakra-ui/react';
-import { DataUrlAccess } from '@/utils/data-url-access';
-import { Icon } from './Icon';
import { ObjectId } from '@/back-api';
+import { DataUrlAccess } from '@/utils/data-url-access';
-export type CoversProps = Omit & {
+import { Icon } from './Icon';
+
+export type CoversProps = Omit & {
data?: ObjectId[];
- size?: BoxProps["width"];
+ size?: BoxProps['width'];
iconEmpty?: ReactElement;
slideshow?: boolean;
};
@@ -33,7 +34,9 @@ export const Covers = ({
setPreviousImageIndex(currentImageIndex);
setTopOpacity(0.0);
setTimeout(() => {
- setCurrentImageIndex((prevIndex) => (prevIndex + 1) % (data?.length ?? 1));
+ setCurrentImageIndex(
+ (prevIndex) => (prevIndex + 1) % (data?.length ?? 1)
+ );
setTopOpacity(1.0);
}, 1500);
}, 3000);
@@ -42,7 +45,7 @@ export const Covers = ({
if (!data || data.length < 1) {
if (iconEmpty) {
- return ;
+ return ;
} else {
return (
;
+ return (
+
+ );
}
const urlCurrent = DataUrlAccess.getThumbnailUrl(data[currentImageIndex]);
const urlPrevious = DataUrlAccess.getThumbnailUrl(data[previousImageIndex]);
- return
-
-
-
+ return (
+
+
+
+
+ );
};
diff --git a/front/src/components/EmptyEnd.tsx b/front/src/components/EmptyEnd.tsx
index e054f6c..b49ff24 100644
--- a/front/src/components/EmptyEnd.tsx
+++ b/front/src/components/EmptyEnd.tsx
@@ -6,8 +6,8 @@ export const EmptyEnd = () => {
width="full"
height="25%"
minHeight="250px"
- // borderWidth="1px"
- // borderColor="red"
+ // borderWidth="1px"
+ // borderColor="red"
>
);
};
diff --git a/front/src/components/EnvDevelopment/EnvDevelopment.tsx b/front/src/components/EnvDevelopment/EnvDevelopment.tsx
new file mode 100644
index 0000000..fe9182c
--- /dev/null
+++ b/front/src/components/EnvDevelopment/EnvDevelopment.tsx
@@ -0,0 +1,117 @@
+import { useState } from 'react';
+
+import {
+ Box,
+ Button,
+ Dialog,
+ Select,
+ Stack,
+ Text,
+ createListCollection,
+ useDisclosure,
+} from '@chakra-ui/react';
+
+import { environment } from '@/environment';
+import { USERS } from '@/service/session';
+import { hashLocalData } from '@/utils/sso';
+
+export const USERS_COLLECTION = createListCollection({
+ items: [
+ { label: 'karadmin', value: 'adminA@666' },
+ { label: 'karuser', value: 'userA@666' },
+ { label: 'NO_USER', value: '' },
+ ],
+});
+
+export const EnvDevelopment = () => {
+ const dialog = useDisclosure();
+ const [selectUserTest, setSelectUserTest] = useState('NO_USER');
+ //const setUser = useRightsStore((store) => store.setUser);
+ const buildEnv =
+ process.env.NODE_ENV === 'development'
+ ? 'Development'
+ : import.meta.env.VITE_DEV_ENV_NAME;
+ const envName: Array = [];
+ !!buildEnv && envName.push(buildEnv);
+ if (!envName.length) {
+ return null;
+ }
+ const handleChange = (selectedOption) => {
+ console.log(`SELECT: [${selectedOption.target.value}]`);
+ setSelectUserTest(selectedOption.target.value);
+ };
+ const onClose = () => {
+ dialog.onClose();
+ if (selectUserTest == 'NO_USER') {
+ window.location.href = `/${environment.applName}/sso/${hashLocalData()}/false/__LOGOUT__`;
+ } else {
+ window.location.href = `/${environment.applName}/sso/${hashLocalData()}/true/${USERS[selectUserTest]}`;
+ }
+ };
+
+ return (
+ <>
+
+
+ {envName.join(' : ')}
+
+
+
+
+
+
+ Outils développeurs
+
+
+ User
+
+
+
+
+
+ {USERS_COLLECTION.items.map((value) => (
+
+ {value.label}
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/front/src/components/Icon.tsx b/front/src/components/Icon.tsx
index 196e654..b5c5ed8 100644
--- a/front/src/components/Icon.tsx
+++ b/front/src/components/Icon.tsx
@@ -1,41 +1,40 @@
-import {
- Box,
- Flex,
- FlexProps,
-} from '@chakra-ui/react';
-import { forwardRef, ReactNode } from 'react';
+import { ReactNode, forwardRef } from 'react';
+
+import { Box, Flex, FlexProps } from '@chakra-ui/react';
export type IconProps = FlexProps & {
- icon: ReactNode;
- color?: string;
- sizeIcon?: FlexProps['width'];
+ children: ReactNode;
+ color?: string;
+ sizeIcon?: FlexProps['width'];
};
export const Icon = forwardRef(
- ({ icon: IconEl, color, sizeIcon = '1em', ...rest }, ref) => {
- return (
-
-
- {IconEl}
-
-
- );
- }
+ ({ children, color, sizeIcon = '1em', ...rest }, ref) => {
+ return (
+
+
+ {children}
+
+
+ );
+ }
);
Icon.displayName = 'Icon';
diff --git a/front/src/components/Layout/PageLayout.tsx b/front/src/components/Layout/PageLayout.tsx
index 3bb3c72..5fae32b 100644
--- a/front/src/components/Layout/PageLayout.tsx
+++ b/front/src/components/Layout/PageLayout.tsx
@@ -3,7 +3,7 @@ import React, { ReactNode, useEffect } from 'react';
import { Flex, Image } from '@chakra-ui/react';
import { useLocation } from 'react-router-dom';
-import background from '@/assets/images/ikon.svg';
+import ikon from '@/assets/images/ikon.svg';
import { TOP_BAR_HEIGHT } from '@/components/TopBar/TopBar';
export type LayoutProps = React.PropsWithChildren & {
@@ -28,9 +28,9 @@ export const PageLayout = ({ children }: LayoutProps) => {
left={0}
right={0}
minWidth="300px"
- zIndex={-1}
+ zIndex={0}
>
-
+
{
+ return (
+
+ {children}
+
+ );
+};
diff --git a/front/src/components/ParameterLayout/ParameterLayoutFooter.tsx b/front/src/components/ParameterLayout/ParameterLayoutFooter.tsx
new file mode 100644
index 0000000..24945f8
--- /dev/null
+++ b/front/src/components/ParameterLayout/ParameterLayoutFooter.tsx
@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+
+import { Flex } from '@chakra-ui/react';
+
+export type ParameterLayoutFooterProps = {
+ children?: ReactNode;
+};
+
+export const ParameterLayoutFooter = ({
+ children,
+}: ParameterLayoutFooterProps) => {
+ return (
+
+ {children}
+
+ );
+};
diff --git a/front/src/components/ParameterLayout/ParameterLayoutHeader.tsx b/front/src/components/ParameterLayout/ParameterLayoutHeader.tsx
new file mode 100644
index 0000000..c9f7e6e
--- /dev/null
+++ b/front/src/components/ParameterLayout/ParameterLayoutHeader.tsx
@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+
+import { Flex } from '@chakra-ui/react';
+
+export type ParameterLayoutHeaderProps = {
+ children?: ReactNode;
+};
+
+export const ParameterLayoutHeader = ({
+ children,
+}: ParameterLayoutHeaderProps) => {
+ return (
+
+ {children}
+
+ );
+};
diff --git a/front/src/components/ParameterLayout/ParameterLayoutHeaderBase.tsx b/front/src/components/ParameterLayout/ParameterLayoutHeaderBase.tsx
new file mode 100644
index 0000000..4cfda4a
--- /dev/null
+++ b/front/src/components/ParameterLayout/ParameterLayoutHeaderBase.tsx
@@ -0,0 +1,24 @@
+import { Flex, Text } from '@chakra-ui/react';
+
+import { ParameterLayoutHeader } from './ParameterLayoutHeader';
+
+export type ParameterLayoutHeaderBaseProps = {
+ title: string;
+ description?: string;
+};
+
+export const ParameterLayoutHeaderBase = ({
+ title,
+ description,
+}: ParameterLayoutHeaderBaseProps) => {
+ return (
+
+
+
+ {title}
+
+ {description && {description}}
+
+
+ );
+};
diff --git a/front/src/components/ParameterLayout/ParameterLayoutRoot.tsx b/front/src/components/ParameterLayout/ParameterLayoutRoot.tsx
new file mode 100644
index 0000000..93b7952
--- /dev/null
+++ b/front/src/components/ParameterLayout/ParameterLayoutRoot.tsx
@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+
+import { VStack } from '@chakra-ui/react';
+
+export type ParameterLayoutRootProps = {
+ children?: ReactNode;
+};
+
+export const ParameterLayoutRoot = ({ children }: ParameterLayoutRootProps) => {
+ return (
+
+ {children}
+
+ );
+};
diff --git a/front/src/components/ParameterLayout/index.ts b/front/src/components/ParameterLayout/index.ts
new file mode 100644
index 0000000..7ef9241
--- /dev/null
+++ b/front/src/components/ParameterLayout/index.ts
@@ -0,0 +1 @@
+export * as ParameterLayout from './ParameterLayout';
diff --git a/front/src/components/SearchInput.tsx b/front/src/components/SearchInput.tsx
index 046c516..c528629 100644
--- a/front/src/components/SearchInput.tsx
+++ b/front/src/components/SearchInput.tsx
@@ -1,9 +1,6 @@
import { useState } from 'react';
-import {
- Group,
- Input,
-} from '@chakra-ui/react';
+import { Group, Input } from '@chakra-ui/react';
import { MdSearch } from 'react-icons/md';
export type SearchInputProps = {
diff --git a/front/src/components/TopBar/TopBar.tsx b/front/src/components/TopBar/TopBar.tsx
index ee1f032..1b22ba3 100644
--- a/front/src/components/TopBar/TopBar.tsx
+++ b/front/src/components/TopBar/TopBar.tsx
@@ -2,14 +2,14 @@ import { ReactNode } from 'react';
import {
Box,
+ Button,
+ ConditionalValue,
Flex,
HStack,
IconButton,
+ Span,
Text,
useDisclosure,
- Button,
- ConditionalValue,
- Span,
} from '@chakra-ui/react';
import {
LuAlignJustify,
@@ -21,15 +21,16 @@ import {
LuSettings,
LuSun,
} from 'react-icons/lu';
+import {
+ MdHelp,
+ MdHome,
+ MdMore,
+ MdOutlinePlaylistPlay,
+ MdOutlineUploadFile,
+ MdSupervisedUserCircle,
+} from 'react-icons/md';
import { useNavigate } from 'react-router-dom';
-import { useServiceContext } from '@/service/ServiceContext';
-import { SessionState } from '@/service/SessionState';
-import { colors } from '@/theme/colors';
-import { requestOpenSite, requestSignIn, requestSignOut, requestSignUp } from '@/utils/sso';
-import { useSessionService } from '@/service/session';
-import { MdHelp, MdHome, MdMore, MdOutlinePlaylistPlay, MdOutlineUploadFile, MdSupervisedUserCircle } from 'react-icons/md';
-import { MenuContent, MenuItem, MenuRoot, MenuTrigger } from '@/components/ui/menu';
import { useColorMode, useColorModeValue } from '@/components/ui/color-mode';
import {
DrawerBody,
@@ -37,11 +38,29 @@ import {
DrawerHeader,
DrawerRoot,
} from '@/components/ui/drawer';
+import {
+ MenuContent,
+ MenuItem,
+ MenuRoot,
+ MenuTrigger,
+} from '@/components/ui/menu';
+import { useServiceContext } from '@/service/ServiceContext';
+import { SessionState } from '@/service/SessionState';
+import { useSessionService } from '@/service/session';
+import { colors } from '@/theme/colors';
+import {
+ requestOpenSite,
+ requestSignIn,
+ requestSignOut,
+ requestSignUp,
+} from '@/utils/sso';
export const TOP_BAR_HEIGHT = '50px';
export const BUTTON_TOP_BAR_PROPERTY = {
- variant: "ghost" as ConditionalValue<"ghost" | "outline" | "solid" | "subtle" | "surface" | "plain" | undefined>,
+ variant: 'ghost' as ConditionalValue<
+ 'ghost' | 'outline' | 'solid' | 'subtle' | 'surface' | 'plain' | undefined
+ >,
//colorPalette: "brand",
fontSize: '20px',
textTransform: 'uppercase',
@@ -53,6 +72,41 @@ export type TopBarProps = {
title?: string;
};
+const ButtonMenuLeft = ({
+ dest,
+ title,
+ icon,
+ onClickEnd = () => {},
+}: {
+ dest: string;
+ title: string;
+ icon: ReactNode;
+ onClickEnd?: () => void;
+}) => {
+ const navigate = useNavigate();
+ return (
+ <>
+
+
+
+ );
+};
export const TopBar = ({ title, children }: TopBarProps) => {
const { colorMode, toggleColorMode } = useColorMode();
const { clearToken } = useSessionService();
@@ -79,21 +133,6 @@ export const TopBar = ({ title, children }: TopBarProps) => {
const onKarso = (): void => {
requestOpenSite();
};
- const onSelectAdd = () => {
- navigate('/add');
- };
- const onSelectHome = () => {
- navigate('/');
- };
- const onSelectOnAir = () => {
- navigate('/on-air');
- };
- const onHelp = () => {
- navigate('/help');
- };
- const onSettings = () => {
- navigate('/settings');
- };
return (
{
+ >
+
+
-
);
};
diff --git a/front/src/components/form/FormCovers.tsx b/front/src/components/form/FormCovers.tsx
index 4f42576..953f7a8 100644
--- a/front/src/components/form/FormCovers.tsx
+++ b/front/src/components/form/FormCovers.tsx
@@ -1,25 +1,13 @@
-import {
- DragEventHandler,
- RefObject,
-} from 'react';
+import { DragEventHandler, ReactNode, RefObject } from 'react';
-import {
- Box,
- BoxProps,
- Center,
- Flex,
- HStack,
- Image,
-} from '@chakra-ui/react';
-import {
- MdHighlightOff,
- MdUploadFile,
-} from 'react-icons/md';
+import { Box, BoxProps, Center, Flex, HStack, Image } from '@chakra-ui/react';
+import { MdHighlightOff, MdUploadFile } from 'react-icons/md';
import { FormGroup } from '@/components/form/FormGroup';
-import { UseFormidableReturn } from '@/components/form/Formidable';
import { DataUrlAccess } from '@/utils/data-url-access';
+import { useFormidableContextElement } from '../formidable';
+
export type DragNdropProps = {
onFilesSelected?: (file: File[]) => void;
onUriSelected?: (uri: string) => void;
@@ -28,8 +16,8 @@ export type DragNdropProps = {
};
export const DragNdrop = ({
- onFilesSelected = () => { },
- onUriSelected = () => { },
+ onFilesSelected = () => {},
+ onUriSelected = () => {},
width = '100px',
height = '100px',
}: DragNdropProps) => {
@@ -92,7 +80,7 @@ export const DragNdrop = ({
};
export type CenterIconProps = BoxProps & {
- children: any;
+ children: ReactNode;
sizeIcon?: string;
};
@@ -110,14 +98,15 @@ export const CenterIcon = ({
top="50%"
left="50%"
transform="translate(-50%, -50%)"
- >{children}
+ >
+ {children}
+
);
};
export type FormCoversProps = {
- form: UseFormidableReturn;
- variableName: string;
+ name: string;
ref?: RefObject;
label?: string;
isRequired?: boolean;
@@ -126,23 +115,19 @@ export type FormCoversProps = {
onRemove?: (index: number) => void;
};
+/** This field component is a direct insertion component ==> not manage with formidable */
export const FormCovers = ({
- form,
- variableName,
+ name,
ref,
- onFilesSelected = () => { },
- onUriSelected = () => { },
- onRemove = () => { },
+ onFilesSelected = () => {},
+ onUriSelected = () => {},
+ onRemove = () => {},
...rest
}: FormCoversProps) => {
- const urls =
- DataUrlAccess.getListThumbnailUrl(form.values[variableName]) ?? [];
+ const { value } = useFormidableContextElement(name);
+ const urls = DataUrlAccess.getListThumbnailUrl(value) ?? [];
return (
- form.restoreValue({ [variableName]: true })}
- {...rest}
- >
+
{urls.map((data, index) => (
@@ -155,7 +140,9 @@ export const FormCovers = ({
color="#00000020"
_hover={{ color: 'red' }}
onClick={() => onRemove && onRemove(index)}
- >
+ >
+
+
diff --git a/front/src/components/form/FormGroup.tsx b/front/src/components/form/FormGroup.tsx
index 6e84095..ecd8ddb 100644
--- a/front/src/components/form/FormGroup.tsx
+++ b/front/src/components/form/FormGroup.tsx
@@ -1,62 +1,128 @@
import { ReactNode } from 'react';
-import { Flex, Text } from '@chakra-ui/react';
+import { Box, Flex, Text } from '@chakra-ui/react';
import { MdErrorOutline, MdHelpOutline, MdRefresh } from 'react-icons/md';
+import { useFormidableContextElement } from '../formidable';
+
+const DisplayLabel = ({
+ label,
+ isRequired,
+}: {
+ label?: ReactNode;
+ isRequired: boolean;
+}) => {
+ if (!label) {
+ return <>;
+ }
+ return (
+
+ {label}{' '}
+ {isRequired && (
+
+ *
+
+ )}
+
+ );
+};
+
+const DisplayHelp = ({ help }: { help?: ReactNode }) => {
+ if (!help) {
+ return <>;
+ }
+ return (
+
+
+ {help}
+
+ );
+};
+const DisplayError = ({ error }: { error?: ReactNode }) => {
+ if (!error) {
+ return <>;
+ }
+ return (
+
+
+ {error}
+
+ );
+};
+
export type FormGroupProps = {
+ children: ReactNode;
+ name: string;
error?: ReactNode;
help?: ReactNode;
label?: ReactNode;
- isModify?: boolean;
- onRestore?: () => void;
isRequired?: boolean;
- children: ReactNode;
+ disableSingleLine?: boolean;
};
export const FormGroup = ({
children,
- error,
+ name,
help,
label,
- isModify = false,
isRequired = false,
- onRestore,
-}: FormGroupProps) => (
-
-
- {!!label && (
-
- {label}{' '}
- {isRequired && (
-
- *
-
- )}
-
+ disableSingleLine,
+}: FormGroupProps) => {
+ const { form, error, isModify, onRestore } =
+ useFormidableContextElement(name);
+ const enableModifyNotification =
+ form.configuration.enableModifyNotification ?? false;
+ const enableReset = form.configuration.enableReset ?? false;
+ const singleLine = disableSingleLine
+ ? false
+ : form.configuration.singleLineForm;
+ return (
+
+ {singleLine && (
+ <>
+
+
+
+ {!!onRestore && isModify && enableReset && (
+
+ )}
+
+
+ {children}
+
+
+
+
+
)}
- {!!onRestore && isModify && (
-
+ {!singleLine && (
+ <>
+
+
+
+ {!!onRestore && isModify && enableReset && (
+
+ )}
+
+
+ {children}
+
+
+
)}
- {children}
- {!!help && (
-
-
- {help}
-
- )}
-
- {!!error && (
-
-
- {error}
-
- )}
-
-);
+ );
+};
diff --git a/front/src/components/form/FormInput.tsx b/front/src/components/form/FormInput.tsx
index 64fcc94..fe0bead 100644
--- a/front/src/components/form/FormInput.tsx
+++ b/front/src/components/form/FormInput.tsx
@@ -2,35 +2,34 @@ import { RefObject } from 'react';
import { Input } from '@chakra-ui/react';
-import { FormGroup } from '@/components/form/FormGroup';
-import { UseFormidableReturn } from '@/components/form/Formidable';
+import { FormGroup, FormGroupProps } from '@/components/form/FormGroup';
+
+import { useFormidableContextElement } from '../formidable';
export type FormInputProps = {
- form: UseFormidableReturn;
- variableName: string;
+ name: string;
ref?: RefObject;
label?: string;
placeholder?: string;
isRequired?: boolean;
-};
+} & Omit;
export const FormInput = ({
- form,
- variableName,
+ name,
ref,
placeholder,
...rest
}: FormInputProps) => {
+ const { value, onChange } = useFormidableContextElement(name);
return (
- form.restoreValue({ [variableName]: true })}
- {...rest}
- >
+
form.setValues({ [variableName]: e.target.value })}
+ type="text"
+ name={name}
+ autoComplete={name}
+ value={value}
+ onChange={(e) => onChange(e.target.value)}
/>
);
diff --git a/front/src/components/form/FormNumber.tsx b/front/src/components/form/FormNumber.tsx
index e0ac87d..1d5a094 100644
--- a/front/src/components/form/FormNumber.tsx
+++ b/front/src/components/form/FormNumber.tsx
@@ -1,15 +1,19 @@
import { RefObject } from 'react';
import { FormGroup } from '@/components/form/FormGroup';
-import { UseFormidableReturn } from '@/components/form/Formidable';
-import { NumberInputField, NumberInputProps, NumberInputRoot } from '../ui/number-input';
+
+import { useFormidableContextElement } from '../formidable';
+import {
+ NumberInputField,
+ NumberInputProps,
+ NumberInputRoot,
+} from '../ui/number-input';
export type FormNumberProps = Pick<
NumberInputProps,
'step' | 'defaultValue' | 'min' | 'max'
> & {
- form: UseFormidableReturn;
- variableName: string;
+ name: string;
ref?: RefObject;
label?: string;
placeholder?: string;
@@ -17,8 +21,7 @@ export type FormNumberProps = Pick<
};
export const FormNumber = ({
- form,
- variableName,
+ name,
ref,
placeholder,
step,
@@ -27,19 +30,14 @@ export const FormNumber = ({
defaultValue,
...rest
}: FormNumberProps) => {
- const onEvent = (value) => {
- form.setValues({ [variableName]: value.value });
- }
+ const { form, value, isModify, onChange, onRestore } =
+ useFormidableContextElement(name);
return (
- form.restoreValue({ [variableName]: true })}
- {...rest}
- >
+
onChange(e.value)}
step={step}
defaultValue={defaultValue}
min={min}
diff --git a/front/src/components/form/FormPassword.tsx b/front/src/components/form/FormPassword.tsx
new file mode 100644
index 0000000..2ed1c9f
--- /dev/null
+++ b/front/src/components/form/FormPassword.tsx
@@ -0,0 +1,50 @@
+import { RefObject, useState } from 'react';
+
+import { chakra, Group, Input } from '@chakra-ui/react';
+
+import { FormGroup, FormGroupProps } from '@/components/form/FormGroup';
+import { Button } from '../ui/button';
+import { LuEye, LuEyeOff } from 'react-icons/lu';
+import { useFormidableContextElement } from '../formidable';
+
+export type FormInputProps = {
+ name: string;
+ ref?: RefObject;
+ label?: string;
+ placeholder?: string;
+ isRequired?: boolean;
+} & Omit;
+
+export const FormPassword = ({
+ name,
+ ref,
+ placeholder,
+ ...rest
+}: FormInputProps) => {
+ const {value, onChange} = useFormidableContextElement(name);
+ const [showPassword, setShowPassword] = useState(false);
+ function toggleVisible(): void {
+ setShowPassword((value) => ! value)
+ }
+ return (
+
+
+ onChange(e.target.value)}
+ paddingRight="47px"
+ />
+
+
+
+ );
+};
diff --git a/front/src/components/form/FormSelect.stories.tsx b/front/src/components/form/FormSelect.stories.tsx
index 723853a..8b6a0fb 100644
--- a/front/src/components/form/FormSelect.stories.tsx
+++ b/front/src/components/form/FormSelect.stories.tsx
@@ -3,7 +3,9 @@ import { useState } from 'react';
import { Box } from '@chakra-ui/react';
import { FormSelect } from '@/components/form/FormSelect';
-import { useFormidable } from '@/components/form/Formidable';
+import { useFormidable } from '@/components/formidable/FormidableConfig';
+
+import { Formidable } from '../formidable';
export default {
title: 'Components/FormSelect',
@@ -16,46 +18,49 @@ type BasicFormData = {
export const Default = () => {
const form = useFormidable({});
return (
-
+
+
+
);
};
export const ChangeKeys = () => {
const form = useFormidable({});
return (
-
+
+
+
);
};
export const ChangeName = () => {
const form = useFormidable({});
return (
-
+
+
+
);
};
export const AddableItem = () => {
@@ -66,27 +71,28 @@ export const AddableItem = () => {
{ id: 333, name: 'third item' },
]);
return (
- {
- return new Promise((resolve, _rejects) => {
- let upperId = 0;
- setData((previous) => {
- previous.forEach((element) => {
- if (element['id'] > upperId) {
- upperId = element['id'];
- }
+
+ {
+ return new Promise((resolve, _rejects) => {
+ let upperId = 0;
+ setData((previous) => {
+ previous.forEach((element) => {
+ if (element['id'] > upperId) {
+ upperId = element['id'];
+ }
+ });
+ upperId++;
+ return [...previous, { id: upperId, name: data }];
});
- upperId++;
- return [...previous, { id: upperId, name: data }];
+ resolve({ id: upperId, name: data });
});
- resolve({ id: upperId, name: data });
- });
- }}
- options={data}
- />
+ }}
+ options={data}
+ />
+
);
};
@@ -94,18 +100,19 @@ export const DarkBackground = {
render: () => {
const form = useFormidable({});
return (
-
-
-
+
+
+
+
+
);
},
diff --git a/front/src/components/form/FormSelect.tsx b/front/src/components/form/FormSelect.tsx
index 725c0fa..818ee08 100644
--- a/front/src/components/form/FormSelect.tsx
+++ b/front/src/components/form/FormSelect.tsx
@@ -1,16 +1,13 @@
import { RefObject } from 'react';
-import { Text } from '@chakra-ui/react';
-
import { FormGroup } from '@/components/form/FormGroup';
-import { UseFormidableReturn } from '@/components/form/Formidable';
import { SelectSingle } from '@/components/select/SelectSingle';
+import { useFormidableContextElement } from '../formidable';
+
export type FormSelectProps = {
- // Generic Form input
- form: UseFormidableReturn;
// Form: Name of the variable
- variableName: string;
+ name: string;
// Forward object reference
ref?: RefObject;
// Form: Label of the input
@@ -32,8 +29,7 @@ export type FormSelectProps = {
};
export const FormSelect = ({
- form,
- variableName,
+ name,
ref,
placeholder,
options,
@@ -43,23 +39,23 @@ export const FormSelect = ({
addNewItem,
...rest
}: FormSelectProps) => {
+ const { form, value, isModify, onChange, onRestore } =
+ useFormidableContextElement(name);
// if set add capability to add the search item
const onCreate = !addNewItem
? undefined
: (data: string) => {
- addNewItem(data).then((data: object) => form.setValues({ [variableName]: data[keyInputKey] }));
- };
+ addNewItem(data).then((data: object) =>
+ form.setValues({ [name]: data[keyInputKey] })
+ );
+ };
return (
- form.restoreValue({ [variableName]: true })}
- {...rest}
- >
+
form.setValues({ [variableName]: value })}
+ onChange={(value) => onChange(value)}
keyKey={keyInputKey}
keyValue={keyInputValue}
onCreate={onCreate}
diff --git a/front/src/components/form/FormSelectMultiple.stories.tsx b/front/src/components/form/FormSelectMultiple.stories.tsx
index ef4c6b8..f122721 100644
--- a/front/src/components/form/FormSelectMultiple.stories.tsx
+++ b/front/src/components/form/FormSelectMultiple.stories.tsx
@@ -3,7 +3,9 @@ import { useState } from 'react';
import { Box } from '@chakra-ui/react';
import { FormSelectMultiple } from '@/components/form/FormSelectMultiple';
-import { useFormidable } from '@/components/form/Formidable';
+import { useFormidable } from '@/components/formidable/FormidableConfig';
+
+import { Formidable } from '../formidable';
export default {
title: 'Components/FormSelectMultipleMultiple',
@@ -16,46 +18,49 @@ type BasicFormData = {
export const Default = () => {
const form = useFormidable({});
return (
-
+
+
+
);
};
export const ChangeKeys = () => {
const form = useFormidable({});
return (
-
+
+
+
);
};
export const ChangeName = () => {
const form = useFormidable({});
return (
-
+
+
+
);
};
export const AddableItem = () => {
@@ -66,27 +71,28 @@ export const AddableItem = () => {
{ id: 333, name: 'third item' },
]);
return (
- {
- return new Promise((resolve, _rejects) => {
- let upperId = 0;
- setData((previous) => {
- previous.forEach((element) => {
- if (element['id'] > upperId) {
- upperId = element['id'];
- }
+
+ {
+ return new Promise((resolve, _rejects) => {
+ let upperId = 0;
+ setData((previous) => {
+ previous.forEach((element) => {
+ if (element['id'] > upperId) {
+ upperId = element['id'];
+ }
+ });
+ upperId++;
+ return [...previous, { id: upperId, name: data }];
});
- upperId++;
- return [...previous, { id: upperId, name: data }];
+ resolve({ id: upperId, name: data });
});
- resolve({ id: upperId, name: data });
- });
- }}
- options={data}
- />
+ }}
+ options={data}
+ />
+
);
};
@@ -94,18 +100,19 @@ export const DarkBackground = {
render: () => {
const form = useFormidable({});
return (
-
-
-
+
+
+
+
+
);
},
diff --git a/front/src/components/form/FormSelectMultiple.tsx b/front/src/components/form/FormSelectMultiple.tsx
index 4f535bd..9170399 100644
--- a/front/src/components/form/FormSelectMultiple.tsx
+++ b/front/src/components/form/FormSelectMultiple.tsx
@@ -1,14 +1,16 @@
import { RefObject } from 'react';
import { FormGroup } from '@/components/form/FormGroup';
-import { UseFormidableReturn } from '@/components/form/Formidable';
import { SelectMultiple } from '@/components/select/SelectMultiple';
+import {
+ useFormidableContext,
+ useFormidableContextElement,
+} from '../formidable';
+
export type FormSelectMultipleProps = {
- // Generic Form input
- form: UseFormidableReturn;
// Form: Name of the variable
- variableName: string;
+ name: string;
// Forward object reference
ref?: RefObject;
// Form: Label of the input
@@ -28,8 +30,7 @@ export type FormSelectMultipleProps = {
};
export const FormSelectMultiple = ({
- form,
- variableName,
+ name,
ref,
placeholder,
options,
@@ -38,23 +39,25 @@ export const FormSelectMultiple = ({
addNewItem,
...rest
}: FormSelectMultipleProps) => {
+ const { form, value, isModify, onChange, onRestore } =
+ useFormidableContextElement(name);
// if set add capability to add the search item
const onCreate = !addNewItem
? undefined
: (data: string) => {
- addNewItem(data).then((data: object) => form.setValues({ [variableName]: [...(form.values[variableName] ?? []), data[keyInputKey]] }));
- };
+ addNewItem(data).then((data: object) =>
+ form.setValues({
+ [name]: [...(form.values[name] ?? []), data[keyInputKey]],
+ })
+ );
+ };
return (
- form.restoreValue({ [variableName]: true })}
- {...rest}
- >
+
form.setValues({ [variableName]: value })}
+ onChange={(value) => onChange(value)}
keyKey={keyInputKey}
keyValue={keyInputValue}
onCreate={onCreate}
diff --git a/front/src/components/form/FormTextarea.tsx b/front/src/components/form/FormTextarea.tsx
index 473f8dc..7e56804 100644
--- a/front/src/components/form/FormTextarea.tsx
+++ b/front/src/components/form/FormTextarea.tsx
@@ -3,11 +3,11 @@ import { RefObject } from 'react';
import { Textarea } from '@chakra-ui/react';
import { FormGroup } from '@/components/form/FormGroup';
-import { UseFormidableReturn } from '@/components/form/Formidable';
+
+import { useFormidableContextElement } from '../formidable';
export type FormTextareaProps = {
- form: UseFormidableReturn;
- variableName: string;
+ name: string;
ref?: RefObject;
label?: string;
placeholder?: string;
@@ -15,22 +15,21 @@ export type FormTextareaProps = {
};
export const FormTextarea = ({
- form,
- variableName,
+ name,
ref,
placeholder,
...rest
}: FormTextareaProps) => {
+ const { form, value, isModify, onChange, onRestore } =
+ useFormidableContextElement(name);
return (
- form.restoreValue({ [variableName]: true })}
- {...rest}
- >
+