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" } } } } };