@yamada-ui/core/dist/index.mjs.map

Yamada UI core

{"version":3,"sources":["../src/components/forward-ref.ts","../src/components/memo.ts","../src/pseudos.ts","../src/config/index.ts","../src/config/animation.ts","../src/config/utils.ts","../src/config/at-rule.ts","../src/config/calc.ts","../src/config/color-mix.ts","../src/config/filter.ts","../src/config/function.ts","../src/config/gradient.ts","../src/config/grid.ts","../src/config/styles.ts","../src/config/token.ts","../src/config/transform.ts","../src/config/vars.ts","../src/constant.ts","../src/styles.ts","../src/components/should-forward-prop.ts","../src/components/use-component-style.tsx","../src/css/breakpoint.ts","../src/css/css.ts","../src/css/use-css.ts","../src/css/use-var.ts","../src/css/var.ts","../src/providers/color-mode-script.tsx","../src/providers/color-mode-manager.ts","../src/providers/color-mode-provider.tsx","../src/providers/environment-provider.tsx","../src/providers/provider-utils.ts","../src/providers/color-mode-utils.ts","../src/providers/i18n-cache.ts","../src/providers/i18n-provider.tsx","../src/providers/theme-script.tsx","../src/providers/theme-manager.ts","../src/providers/theme-provider.tsx","../src/theme.ts","../src/styled.ts","../src/factory.ts"],"sourcesContent":["import type { Merge } from \"@yamada-ui/utils\"\nimport type { As, Component, WithoutAs } from \"./component.types\"\nimport * as React from \"react\"\n\nexport function forwardRef<Y extends object, M extends As>(\n  render: React.ForwardRefRenderFunction<\n    any,\n    { as?: As } & Merge<React.ComponentPropsWithoutRef<M>, WithoutAs<Y>>\n  >,\n) {\n  return React.forwardRef(\n    render as React.ForwardRefRenderFunction<any>,\n  ) as unknown as Component<M, Y>\n}\n","import type { ComponentArgs } from \"./component.types\"\nimport * as React from \"react\"\n\nexport function memo<Y extends object>(\n  Component: React.FunctionComponent<Y>,\n  propsAreEqual?: (prevProps: Readonly<Y>, nextProps: Readonly<Y>) => boolean,\n): ComponentArgs & React.NamedExoticComponent<Y>\n\nexport function memo<Y extends React.ComponentType<any>>(\n  Component: Y,\n  propsAreEqual?: (\n    prevProps: Readonly<React.ComponentProps<Y>>,\n    nextProps: Readonly<React.ComponentProps<Y>>,\n  ) => boolean,\n) {\n  return React.memo<Y>(Component, propsAreEqual) as unknown as ComponentArgs &\n    React.MemoExoticComponent<Y>\n}\n","import type { Length, Replace } from \"@yamada-ui/utils\"\nimport type { CSSUIObject } from \"./css\"\n\ntype ReplaceSelectors<\n  Y extends string[],\n  M extends string,\n  D extends string,\n  H extends string,\n> = Y extends [infer R extends string, ...infer T extends string[]]\n  ? `${Replace<Replace<M, D, R>, \",\", `${H},`>}${Length<T> extends 0 ? \"\" : `${H}, `}${ReplaceSelectors<T, M, D, H>}`\n  : H\n\nconst toGroup = <Y extends string>(selectors: Y) =>\n  [\"[role=group]\", \"[data-group]\", \".group\"]\n    .map((prefix) => merge(parse(selectors), prefix, \" &\"))\n    .join(\", \") as ReplaceSelectors<\n    [\"[role=group]\", \"[data-group]\", \".group\"],\n    Y,\n    \"&\",\n    \" &\"\n  >\n\nconst toPeer = <Y extends string>(selectors: Y) =>\n  [\"[data-peer]\", \".peer\"]\n    .map((prefix) => merge(parse(selectors), prefix, \" ~ &\"))\n    .join(\", \") as ReplaceSelectors<[\"[data-peer]\", \".peer\"], Y, \"&\", \" ~ &\">\n\nconst parse = (selectors: string) =>\n  selectors.split(\",\").map((selector) => selector.trim().slice(1))\n\nconst merge = (selectors: string[], prefix = \"&\", suffix = \"\") =>\n  selectors.map((selector) => `${prefix}${selector}${suffix}`).join(\", \")\n\nexport const attributes = {\n  /**\n   * The CSS `[data-accept]` attribute selector.\n   */\n  _accept: \"&[data-accept]\",\n  /**\n   * The CSS `[data-between]` attribute selector.\n   */\n  _between: \"&[data-between]\",\n  /**\n   * The CSS `[data-end]` attribute selector.\n   */\n  _end: \"&[data-end]\",\n  /**\n   * The CSS `[aria-selected=true]` attribute selector.\n   *\n   * - `[aria-expanded=true]`\n   * - `[data-expanded]`\n   */\n  _expanded: \"&[data-expanded], &[aria-expanded=true]\",\n  /**\n   * The CSS `[data-filled]` attribute selector.\n   */\n  _filled: \"&[data-filled]\",\n  /**\n   * The CSS `[data-grabbed]` attribute selector.\n   *\n   * - `[data-grabbed]`\n   * - `[aria-grabbed=true]`\n   */\n  _grabbed: \"&[data-grabbed], &[aria-grabbed=true]\",\n  /**\n   * The CSS `[data-grid]` attribute selector.\n   */\n  _grid: \"[role=grid], &[data-grid]\",\n  /**\n   * The CSS `[hidden]` attribute selector.\n   *\n   * - `[hidden]`\n   * - `[data-hidden]`\n   */\n  _hidden: \"&[hidden], &[data-hidden]\",\n  /**\n   * The CSS `[data-holiday]` attribute selector.\n   */\n  _holiday: \"&[data-holiday]\",\n  /**\n   * The CSS `[data-idle]` attribute selector.\n   */\n  _idle: \"&[data-idle]\",\n  /**\n   * The CSS `[data-loaded]` attribute selector.\n   */\n  _loaded: \"&[data-loaded]\",\n  /**\n   * The CSS `[aria-busy=true]` attribute selector.\n   *\n   * - `[data-loading]`\n   * - `[aria-busy=true]`\n   */\n  _loading: \"&[data-loading], &[aria-busy=true]\",\n  /**\n   * The CSS `[hidden]` attribute selector.\n   */\n  _nativeHidden: \"&[hidden]\",\n  /**\n   * The CSS `[data-not-allowed]` attribute selector.\n   *\n   * - `[data-not-allowed]`\n   */\n  _notAllowed: \"&[data-not-allowed]\",\n  /**\n   * The CSS `:not(:selected)` attribute selector.\n   *\n   * - `:not([data-selected])`\n   * - `:not([aria-selected=true])`\n   */\n  _notSelected: \"&:not([data-selected]):not([aria-selected=true])\",\n  /**\n   * The CSS `:where([data-outside])` attribute selector.\n   */\n  _outside: \"&:where([data-outside])\",\n  /**\n   * The CSS `[data-pressed]` attribute selector.\n   *\n   * - `[data-pressed]`\n   * - `[aria-pressed=true]`\n   */\n  _pressed: \"&[data-pressed], &[aria-pressed=true]\",\n  /**\n   * The CSS `[data-reject]` attribute selector.\n   */\n  _reject: \"&[data-reject]\",\n  _ripple: \"& .ui-ripple\",\n  /**\n   * The CSS `:selected` attribute selector.\n   *\n   * - `[data-selected]`\n   * - `[aria-selected=true]`\n   */\n  _selected: \"&[data-selected], &[aria-selected=true]\",\n  /**\n   * The CSS `[data-start]` attribute selector.\n   */\n  _start: \"&[data-start]\",\n  /**\n   * The CSS `[data-today]` attribute selector.\n   */\n  _today: \"&[data-today]\",\n  /**\n   * The CSS `:where([data-weekend])` attribute selector.\n   */\n  _weekend: \"&:where([data-weekend])\",\n} as const\n\nexport type Attributes = typeof attributes\nexport type AttributeProperty = keyof Attributes\nexport type AttributeSelector = Attributes[AttributeProperty]\nexport type AttributeProps = {\n  [K in AttributeProperty]?: CSSUIObject\n}\n\nexport const attributeProperties = Object.keys(\n  attributes,\n) as AttributeProperty[]\nexport const attributeSelectors = Object.values(attributes)\n\nexport const pseudoElements = {\n  /**\n   * The CSS `::after` pseudo-element.\n   */\n  _after: \"&::after\",\n  /**\n   * The CSS `::backdrop` pseudo-element.\n   */\n  _backdrop: \"&::backdrop\",\n  /**\n   * The CSS `::before` pseudo-element.\n   */\n  _before: \"&::before\",\n  /**\n   * The CSS `::cue` pseudo-element.\n   */\n  _cue: \"&::cue\",\n  /**\n   * The CSS `::cue-region` pseudo-element.\n   */\n  _cueRegion: \"&::cue-region\",\n  /**\n   * The CSS `::file-selector-button` pseudo-element.\n   */\n  _fileSelector: \"&::file-selector-button\",\n  /**\n   * The CSS `::first-letter` pseudo-element.\n   */\n  _firstLetter: \"&::first-letter\",\n  /**\n   * The CSS `::first-line` pseudo-element.\n   */\n  _firstLine: \"&::first-line\",\n  /**\n   * The CSS `::marker` pseudo-element.\n   */\n  _marker: \"&::marker\",\n  /**\n   * The CSS `::placeholder` pseudo-element.\n   *\n   * - `::placeholder`\n   * - `[data-placeholder]`\n   */\n  _placeholder: \"&::placeholder, &[data-placeholder]\",\n  /**\n   * The CSS `::-webkit-scrollbar` pseudo-element.\n   *\n   * - `::-webkit-scrollbar`\n   * - `[data-scrollbar]`\n   */\n  _scrollbar: \"&::-webkit-scrollbar, &[data-scrollbar]\",\n  /**\n   * The CSS `::-webkit-scrollbar-button` pseudo-element.\n   */\n  _scrollbarButton: \"&::-webkit-scrollbar-button\",\n  /**\n   * The CSS `::-webkit-scrollbar-corner` pseudo-element.\n   */\n  _scrollbarCorner: \"&::-webkit-scrollbar-corner\",\n  /**\n   * The CSS `::-webkit-scrollbar-thumb` pseudo-element.\n   */\n  _scrollbarThumb: \"&::-webkit-scrollbar-thumb\",\n  /**\n   * The CSS `::-webkit-scrollbar-track` pseudo-element.\n   */\n  _scrollbarTrack: \"&::-webkit-scrollbar-track\",\n  /**\n   * The CSS `::-webkit-scrollbar-track-piece` pseudo-element.\n   */\n  _scrollbarTrackPiece: \"&::-webkit-scrollbar-track-piece\",\n  /**\n   * The CSS `::selection` pseudo-element.\n   */\n  _selection: \"&::selection\",\n} as const\n\nexport type PseudoElements = typeof pseudoElements\nexport type PseudoElementProperty = keyof PseudoElements\nexport type PseudoElementSelector = PseudoElements[PseudoElementProperty]\nexport type PseudoElementProps = {\n  [K in PseudoElementProperty]?: CSSUIObject\n}\n\nexport const pseudoElementProperties = Object.keys(\n  pseudoElements,\n) as PseudoElementProperty[]\nexport const pseudoElementSelectors = Object.values(pseudoElements)\n\nexport const pseudoClasses = {\n  /**\n   * The CSS `:active` pseudo-class.\n   *\n   * - `:active`\n   * - `[data-active]`\n   */\n  _active: \"&:active, &[data-active]\",\n  /**\n   * The CSS `:any-link` pseudo-class.\n   *\n   * - `:any-link`\n   * - `[data-any-link]`\n   */\n  _anyLink: \"&:any-link, &[data-any-link]\",\n  /**\n   * The CSS `:autofill` pseudo-class.\n   */\n  _autofill: \"&:autofill, &:-webkit-autofill\",\n  /**\n   * The CSS `:blank` pseudo-class.\n   *\n   * - `:blank`\n   * - `[data-blank]`\n   */\n  _blank: \"&:blank, &[data-blank]\",\n  /**\n   * The CSS `:checked` pseudo-class.\n   *\n   * - `:checked`\n   * - `[data-checked]`\n   * - `[aria-checked=true]`\n   */\n  _checked: \"&:checked, &[data-checked], &[aria-checked=true]\",\n  /**\n   * The CSS `> *` child combinator selector.\n   */\n  _child: \"& > *\",\n  /**\n   * The CSS `:default` pseudo-class.\n   */\n  _default: \"&:default\",\n  /**\n   * The CSS `:disabled` pseudo-class.\n   *\n   * - `:disabled`\n   * - `[disabled]`\n   * - `[aria-disabled=true]`\n   * - `[data-disabled]`\n   */\n  _disabled: \"&:disabled, &[disabled], &[aria-disabled=true], &[data-disabled]\",\n  /**\n   * The CSS `:empty` pseudo-class.\n   */\n  _empty: \"&:empty\",\n  /**\n   * The CSS `:enabled` pseudo-class.\n   */\n  _enabled: \"&:enabled, &[data-enabled]\",\n  /**\n   * The CSS `:nth-of-type(even)` pseudo-class.\n   */\n  _even: \"&:nth-of-type(even)\",\n  /**\n   * The CSS `:first-of-type` pseudo-class.\n   */\n  _first: \"&:first-of-type\",\n  /**\n   * The CSS `:first-child` pseudo-class.\n   */\n  _firstChild: \"& > *:first-child\",\n  /**\n   * The CSS `:focus` pseudo-class.\n   *\n   * - `:focus`\n   * - `[data-focus]`\n   */\n  _focus: \"&:focus, &[data-focus]\",\n  /**\n   * The CSS `:focus-visible` pseudo-class.\n   *\n   * - `:focus-visible`\n   * - `[data-focus-visible]`\n   */\n  _focusVisible: \"&:focus-visible, &[data-focus-visible]\",\n  /**\n   * The CSS `:focus-within` pseudo-class.\n   *\n   * - `:focus-within`\n   * - `[data-focus-within]`\n   */\n  _focusWithin: \"&:focus-within, &[data-focus-within]\",\n  /**\n   * The CSS `:fullscreen` pseudo-class.\n   */\n  _fullScreen: \"&:fullscreen\",\n  /**\n   * The CSS `:horizontal` pseudo-class.\n   *\n   * - `[aria-orientation=horizontal]`\n   * - `[data-orientation=horizontal]`\n   */\n  _horizontal: \"&[data-orientation=horizontal], &[aria-orientation=horizontal]\",\n  /**\n   * The CSS `:hover` pseudo-class.\n   *\n   * - `:hover`\n   * - `[data-hover]`\n   */\n  _hover: \"&:hover, &[data-hover]\",\n  /**\n   * The CSS `:indeterminate` pseudo-class.\n   *\n   * - `:indeterminate`\n   * - `[aria-checked=mixed]`\n   * - `[data-indeterminate]`\n   */\n  _indeterminate:\n    \"&:indeterminate, &[data-indeterminate], &[aria-checked=mixed]\",\n  /**\n   * The CSS `:in-range` pseudo-class.\n   *\n   * - `:in-range`\n   * - `[data-in-range]`\n   */\n  _inRange: \"&:in-range, &[data-in-range]\",\n  /**\n   * The CSS `:invalid` attribute selector.\n   *\n   * - `[data-invalid]`\n   * - `[aria-invalid=true]`\n   */\n  _invalid: \"&[data-invalid], &[aria-invalid=true]\",\n  /**\n   * The CSS `:last-of-type` pseudo-class.\n   */\n  _last: \"&:last-of-type\",\n  /**\n   * The CSS `:last-child` pseudo-class.\n   */\n  _lastChild: \"& > *:last-child\",\n  /**\n   * The CSS `:link` pseudo-class.\n   *\n   * - `:link`\n   * - `[data-link]`\n   */\n  _link: \"&:link, &[data-link]\",\n  /**\n   * The CSS `:modal` pseudo-class.\n   */\n  _modal: \"&:modal\",\n  /**\n   * The CSS `:active` pseudo-class.\n   */\n  _nativeActive: \"&:active\",\n  /**\n   * The CSS `:checked` pseudo-class.\n   */\n  _nativeChecked: \"&:checked\",\n  /**\n   * The CSS `:disabled` pseudo-class.\n   *\n   * - `:disabled`\n   * - `[disabled]`\n   */\n  _nativeDisabled: \"&:disabled, &[disabled]\",\n  /**\n   * The CSS `:focus` pseudo-class.\n   */\n  _nativeFocus: \"&:focus\",\n  /**\n   * The CSS `:focus-visible` pseudo-class.\n   */\n  _nativeFocusVisible: \"&:focus-visible\",\n  /**\n   * The CSS `:focus-within` pseudo-class.\n   */\n  _nativeFocusWithin: \"&:focus-within\",\n  /**\n   * The CSS `:hover` pseudo-class.\n   */\n  _nativeHover: \"&:hover\",\n  /**\n   * The CSS `:read-only` pseudo-class.\n   *\n   * - `[readonly]`\n   * - `[aria-readonly=true]`\n   */\n  _nativeReadOnly: \"&[readonly], &[aria-readonly=true]\",\n  /**\n   * The CSS `:target` pseudo-class.\n   */\n  _nativeTarget: \"&:target\",\n  /**\n   * The CSS `:valid` pseudo-class.\n   */\n  _nativeValid: \"&:valid\",\n  /**\n   * The CSS `:checked` pseudo-class.\n   *\n   * - `:not(:checked)`\n   * - `:not([data-checked])`\n   * - `:not([aria-checked=true])`\n   */\n  _notChecked: \"&:not(:checked):not([data-checked]):not([aria-checked=true])\",\n  /**\n   * The CSS `:not(:first-of-type)` pseudo-class.\n   */\n  _notFirst: \"&:not(:first-of-type)\",\n  /**\n   * The CSS `:not(:first-child)` pseudo-class.\n   */\n  _notFirstChild: \"& > *:not(:first-child)\",\n  /**\n   * The CSS `:not(:last-of-type)` pseudo-class.\n   */\n  _notLast: \"&:not(:last-of-type)\",\n  /**\n   * The CSS `:not(:last-child)` pseudo-class.\n   */\n  _notLastChild: \"& > *:not(:last-child)\",\n  /**\n   * The CSS `:not(:target)` pseudo-class.\n   */\n  _notTarget: \"&:not(:target)\",\n  /**\n   * The CSS `:nth-of-type(odd)` pseudo-class.\n   */\n  _odd: \"&:nth-of-type(odd)\",\n  /**\n   * The CSS `:only-of-type` pseudo-class.\n   */\n  _only: \"&:only-of-type\",\n  /**\n   * The CSS `:optional` pseudo-class.\n   *\n   * - `:optional`\n   * - `[data-optional]`\n   */\n  _optional: \"&:optional, &[data-optional]\",\n  /**\n   * The CSS `:out-of-range` pseudo-class.\n   *\n   * - `:out-of-range`\n   * - `[data-out-of-range]`\n   */\n  _outRange: \"&:out-of-range, &[data-out-of-range]\",\n  /**\n   * The CSS `:paused` pseudo-class.\n   *\n   * - `:paused`\n   * - `[data-paused]`\n   */\n  _paused: \"&:paused, &[data-paused]\",\n  /**\n   * The CSS `:picture-in-picture` pseudo-class.\n   */\n  _picture: \"&:picture-in-picture\",\n  /**\n   * The CSS `:placeholder-shown` pseudo-class.\n   */\n  _placeholderShown: \"&:placeholder-shown\",\n  /**\n   * The CSS `:playing` pseudo-class.\n   *\n   * - `:playing`\n   * - `[data-playing]`\n   */\n  _playing: \"&:playing, &[data-playing]\",\n  /**\n   * The CSS `:read-only` pseudo-class.\n   *\n   * - `[readonly]`\n   * - `[aria-readonly=true]`\n   * - `[data-readonly]`\n   */\n  _readOnly: \"&[readonly], &[data-readonly], &[aria-readonly=true]\",\n  /**\n   * The CSS `:read-write` pseudo-class.\n   *\n   * - `:read-write`\n   * - `[data-read-write]`\n   */\n  _readWrite: \"&:read-write, &[data-read-write]\",\n  /**\n   * The CSS `:required` pseudo-class.\n   *\n   * - `:required`\n   * - `[required]`\n   */\n  _required: \"&:required, &[required]\",\n  /**\n   * The CSS `:target` pseudo-class.\n   *\n   * - `:target`\n   * - `[data-target]`\n   */\n  _target: \"&:target, &[data-target]\",\n  /**\n   * The CSS `:user-invalid` pseudo-class.\n   *\n   * - `:user-invalid`\n   * - `[data-user-invalid]`\n   */\n  _userInvalid: \"&:user-invalid, &[data-user-invalid]\",\n  /**\n   * The CSS `:valid` pseudo-class.\n   *\n   * - `:valid`\n   * - `[data-valid]`\n   */\n  _valid: \"&:valid, &[data-valid]\",\n  /**\n   * The CSS `:vertical` pseudo-class.\n   *\n   * - `[aria-orientation=vertical]`\n   * - `[data-orientation=vertical]`\n   */\n  _vertical: \"&[data-orientation=vertical], &[aria-orientation=vertical]\",\n  /**\n   * The CSS `:visited` pseudo-class.\n   */\n  _visited: \"&:visited\",\n} as const\n\nexport type PseudoClasses = typeof pseudoClasses\nexport type PseudoClassProperty = keyof PseudoClasses\nexport type PseudoClassSelector = PseudoClasses[PseudoClassProperty]\nexport type PseudoClassProps = {\n  [K in PseudoClassProperty]?: CSSUIObject\n}\n\nexport const pseudoClassProperties = Object.keys(\n  pseudoClasses,\n) as PseudoClassProperty[]\nexport const pseudoClassSelectors = Object.values(pseudoClasses)\n\nexport const atRules = {\n  /**\n   * Styles for when `data-mode` is applied to any parent of this component or element.\n   */\n  _dark:\n    \".ui-dark &:not([data-mode]), [data-mode=dark] &:not([data-mode]), &[data-mode=dark]\",\n  /**\n   * The CSS `@media (orientation: landscape)` media query.\n   */\n  _landscape: \"@media (orientation: landscape)\",\n  /**\n   * Styles for when `data-mode` is applied to any parent of this component or element.\n   */\n  _light:\n    \".ui-light &:not([data-mode]), [data-mode=light] &:not([data-mode]), &[data-mode=light]\",\n  /**\n   * The CSS `@media (prefers-color-scheme: dark)` media query.\n   */\n  _mediaDark: \"@media (prefers-color-scheme: dark)\",\n  /**\n   * The CSS `@media (prefers-color-scheme: light)` media query.\n   */\n  _mediaLight: \"@media (prefers-color-scheme: light)\",\n  /**\n   * The CSS `@media (prefers-reduced-motion: reduce)` media query.\n   */\n  _mediaReduceMotion: \"@media (prefers-reduced-motion: reduce)\",\n  /**\n   * The CSS `@media (orientation: portrait)` media query.\n   */\n  _portrait: \"@media (orientation: portrait)\",\n  /**\n   * The CSS `@media print` media query.\n   */\n  _print: \"@media print\",\n} as const\n\nexport type AtRules = typeof atRules\nexport type AtRuleProperty = keyof AtRules\nexport type AtRuleSelector = AtRules[AtRuleProperty]\nexport type AtRuleProps = {\n  [K in keyof AtRules]?: CSSUIObject\n}\n\nexport const atRuleProperties = Object.keys(atRules) as AtRuleProperty[]\nexport const atRuleSelectors = Object.values(atRules)\n\nexport const groupAttributes = {\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is accepted.\n   */\n  _groupAccept: toGroup(attributes._accept),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is active.\n   */\n  _groupActive: toGroup(pseudoClasses._active),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is blank.\n   */\n  _groupBlank: toGroup(pseudoClasses._blank),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is checked.\n   */\n  _groupChecked: toGroup(pseudoClasses._checked),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is disabled.\n   */\n  _groupDisabled: toGroup(pseudoClasses._disabled),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is enabled.\n   */\n  _groupEnabled: toGroup(pseudoClasses._enabled),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is expanded.\n   */\n  _groupExpanded: toGroup(attributes._expanded),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is focused.\n   */\n  _groupFocus: toGroup(pseudoClasses._focus),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is focused-visible.\n   */\n  _groupFocusVisible: toGroup(pseudoClasses._focusVisible),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is focus-within.\n   */\n  _groupFocusWithin: toGroup(pseudoClasses._focusWithin),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is grabbed.\n   */\n  _groupGrabbed: toGroup(attributes._grabbed),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is horizontal.\n   */\n  _groupHorizontal: toGroup(pseudoClasses._horizontal),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is hovered.\n   */\n  _groupHover: toGroup(pseudoClasses._hover),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is idle.\n   */\n  _groupIdle: toGroup(attributes._idle),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is invalid.\n   */\n  _groupInvalid: toGroup(pseudoClasses._invalid),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is loaded.\n   */\n  _groupLoaded: toGroup(attributes._loaded),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is loading.\n   */\n  _groupLoading: toGroup(attributes._loading),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is optional.\n   */\n  _groupOptional: toGroup(pseudoClasses._optional),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` has a placeholder shown.\n   */\n  _groupPlaceholderShown: toGroup(pseudoClasses._placeholderShown),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is pressed.\n   */\n  _groupPressed: toGroup(attributes._pressed),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is read-only.\n   */\n  _groupReadOnly: toGroup(pseudoClasses._readOnly),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is read-write.\n   */\n  _groupReadWrite: toGroup(pseudoClasses._readWrite),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is rejected.\n   */\n  _groupReject: toGroup(attributes._reject),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is required.\n   */\n  _groupRequired: toGroup(pseudoClasses._required),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is selected.\n   */\n  _groupSelected: toGroup(attributes._selected),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is user-invalid.\n   */\n  _groupUserInvalid: toGroup(pseudoClasses._userInvalid),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is valid.\n   */\n  _groupValid: toGroup(pseudoClasses._valid),\n  /**\n   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is vertical.\n   */\n  _groupVertical: toGroup(pseudoClasses._vertical),\n} as const\n\nexport type GroupAttributes = typeof groupAttributes\nexport type GroupAttributeProperty = keyof GroupAttributes\nexport type GroupAttributeSelector = GroupAttributes[GroupAttributeProperty]\nexport type GroupAttributeProps = {\n  [K in GroupAttributeProperty]?: CSSUIObject\n}\n\nexport const groupAttributeProperties = Object.keys(\n  groupAttributes,\n) as GroupAttributeProperty[]\nexport const groupAttributeSelectors = Object.values(groupAttributes)\n\nexport const peerAttributes = {\n  /**\n   * Styles to apply when a parent element with `data-peer` or `.peer` is accepted.\n   */\n  _peerAccept: toPeer(attributes._accept),\n  /**\n   * Styles to apply when a parent element with `data-peer` or `.peer` is active.\n   */\n  _peerActive: toPeer(pseudoClasses._active),\n  /**\n   * Styles to apply when a parent element with `data-peer` or `.peer` is blank.\n   */\n  _peerBlank: toPeer(pseudoClasses._blank),\n  /**\n   * Styles to apply when a parent element with `data-peer` or `.peer` is checked.\n   */\n  _peerChecked: toPeer(pseudoClasses._checked),\n  /**\n   * Styles to apply when a parent element with `data-peer` or `.peer` is disabled.\n   */\n  _peerDisabled: toPeer(pseudoClasses._disabled),\n  /**\n   * Styles to apply when a parent element with `data-peer` or `.peer` is enabled.\n   */\n  _peerEnabled: toPeer(pseudoClasses._enabled),\n  /**\n   * Styles to apply when a parent element with `data-peer` or `.peer` is expanded.\n   */\n  _peerExpanded: toPeer(attributes._expanded),\n  /**\n   * Styles to apply when a parent element with `data-peer` or `.peer` is focused.\n   */\n  _peerFocus: toPeer(pseudoClasses._focus),\n  /**\n   * Styles to apply when a parent element with `data-peer` or `.peer` is focused-visible.\n   */\n  _peerFocusVisible: toPeer(pseudoClasses._focusVisible),\n  /**\n   * Styles to apply when a parent element with `data-peer` or `.peer` is focus-within.\n   */\n  _peerFocusWithin: toPeer(pseudoClasses._focusWithin),\n  /**\n   * Styles to apply when a parent element with `data-peer` or `.peer` is grabbed.\n   */\n  _peerGrabbed: toPeer(attributes._grabbed),\n  /**\n   * Styles to apply when a parent element with `data-peer` or `.peer` is horizontal.\n   */\n  _peerHorizontal: toPeer(pseudoClasses._horizontal),\n  /**\n   * Styles to apply when a parent element with `data-peer` or `.peer` is hovered.\n   */\n  _peerHover: toPeer(pseudoClasses._hover),\n  /**\n   * Styles to apply when a parent element with `data-peer` or `.peer` is idle.\n   */\n  _peerIdle: toPeer(attributes._idle),\n  /**\n   * Styles to apply when a parent element with `data-peer` or `.peer` is invalid.\n   */\n  _peerInvalid: toPeer(pseudoClasses._invalid),\n  /**\n   * Styles to apply when a parent element with `data-peer` or `.peer` is loaded.\n   */\n  _peerLoaded: toPeer(attributes._loaded),\n  /**\n   * Styles to apply when a parent element with `data-peer` or `.peer` is loading.\n   */\n  _peerLoading: toPeer(attributes._loading),\n  /**\n   * Styles to apply when a parent element with `data-peer` or `.peer` is optional.\n   */\n  _peerOptional: toPeer(pseudoClasses._optional),\n  /**\n   * Styles to apply when a parent element with `data-peer` or `.peer` has a placeholder shown.\n   */\n  _peerPlaceholderShown: toPeer(pseudoClasses._placeholderShown),\n  /**\n   * Styles to apply when a parent element with `data-peer` or `.peer` is pressed.\n   */\n  _peerPressed: toPeer(attributes._pressed),\n  /**\n   * Styles to apply when a parent element with `data-peer` or `.peer` is read-only.\n   */\n  _peerReadOnly: toPeer(pseudoClasses._readOnly),\n  /**\n   * Styles to apply when a parent element with `data-peer` or `.peer` is read-write.\n   */\n  _peerReadWrite: toPeer(pseudoClasses._readWrite),\n  /**\n   * Styles to apply when a parent element with `data-peer` or `.peer` is rejected.\n   */\n  _peerReject: toPeer(attributes._reject),\n  /**\n   * Styles to apply when a parent element with `data-peer` or `.peer` is required.\n   */\n  _peerRequired: toPeer(pseudoClasses._required),\n  /**\n   * Styles to apply when a parent element with `data-peer` or `.peer` is selected.\n   */\n  _peerSelected: toPeer(attributes._selected),\n  /**\n   * Styles to apply when a parent element with `data-peer` or `.peer` is user-invalid.\n   */\n  _peerUserInvalid: toPeer(pseudoClasses._userInvalid),\n  /**\n   * Styles to apply when a parent element with `data-peer` or `.peer` is valid.\n   */\n  _peerValid: toPeer(pseudoClasses._valid),\n  /**\n   * Styles to apply when a parent element with `data-peer` or `.peer` is vertical.\n   */\n  _peerVertical: toPeer(pseudoClasses._vertical),\n} as const\n\nexport type PeerAttributes = typeof peerAttributes\nexport type PeerAttributeProperty = keyof PeerAttributes\nexport type PeerAttributeSelector = PeerAttributes[PeerAttributeProperty]\nexport type PeerAttributeProps = {\n  [K in PeerAttributeProperty]?: CSSUIObject\n}\n\nexport const peerAttributeProperties = Object.keys(\n  peerAttributes,\n) as PeerAttributeProperty[]\nexport const peerAttributeSelectors = Object.values(peerAttributes)\n\nexport const pseudos = {\n  ...pseudoElements,\n  ...attributes,\n  ...pseudoClasses,\n  ...atRules,\n  ...groupAttributes,\n  ...peerAttributes,\n} as const\n\nexport type Pseudos = typeof pseudos\nexport type PseudoProperty = keyof Pseudos\nexport type PseudoSelector = Pseudos[PseudoProperty]\nexport type PseudoProps = {\n  [K in keyof Pseudos]?: CSSUIObject\n}\n\nexport const pseudoProperties = Object.keys(pseudos) as PseudoProperty[]\nexport const pseudoSelectors = Object.values(pseudos)\n","import type { CSSObject } from \"@emotion/react\"\nimport type { Union } from \"@yamada-ui/utils\"\nimport type * as CSS from \"csstype\"\nimport type { ThemeToken } from \"../theme\"\nimport type { StyledTheme } from \"../theme.types\"\nimport type { Transform } from \"./utils\"\nimport { isNumber, isObject } from \"@yamada-ui/utils\"\nimport { animation } from \"./animation\"\nimport { generateAtRule } from \"./at-rule\"\nimport { generateCalc } from \"./calc\"\nimport { colorMix } from \"./color-mix\"\nimport { generateFilter } from \"./filter\"\nimport { generateFunction } from \"./function\"\nimport { gradient } from \"./gradient\"\nimport { grid } from \"./grid\"\nimport { generateStyles } from \"./styles\"\nimport { generateToken } from \"./token\"\nimport { transform } from \"./transform\"\nimport { analyzeCSSValue, isCSSVar, keyframes, mode } from \"./utils\"\nimport { vars } from \"./vars\"\n\nexport { animation, gradient, keyframes, mode }\n\ntype CSSProperties = Union<\n  | keyof CSS.ObsoleteProperties\n  | keyof CSS.StandardProperties\n  | keyof CSS.SvgProperties\n>\n\nexport interface StyleConfig {\n  isProcessResult?: boolean\n  isProcessSkip?: boolean\n  properties?:\n    | ((theme: StyledTheme) => CSSProperties)\n    | CSSProperties\n    | CSSProperties[]\n  static?: CSSObject\n  token?: ThemeToken\n  transform?: Transform\n}\n\nexport interface StyleConfigs {\n  [key: string]: StyleConfig | true\n}\n\nexport const transforms = {\n  animation,\n  bgClip: (value: any) => {\n    if (value === \"text\") {\n      return { backgroundClip: \"text\", color: \"transparent\" }\n    } else {\n      return { backgroundClip: value }\n    }\n  },\n  calc: generateCalc,\n  colorMix,\n  container: generateAtRule(\"container\"),\n  content: (value: any) => {\n    if (isObject(value)) {\n      return { content: \"''\", ...value }\n    } else {\n      return value\n    }\n  },\n  deg: (value: any) => {\n    if (isCSSVar(value) || value == null) return value\n\n    const isUnitless = typeof value === \"string\" && !value.endsWith(\"deg\")\n\n    return isUnitless || isNumber(value) ? `${value}deg` : value\n  },\n  filter: generateFilter,\n  fraction: (value: any) => {\n    if (isNumber(value) && value <= 1) value = `${value * 100}%`\n\n    return value\n  },\n  function: generateFunction,\n  gradient,\n  grid,\n  isTruncated: (value: boolean) => {\n    if (value) {\n      return {\n        overflow: \"hidden\",\n        textOverflow: \"ellipsis\",\n        whiteSpace: \"nowrap\",\n      }\n    }\n  },\n  media: generateAtRule(\"media\"),\n  px: (value: any) => {\n    if (value == null) return value\n\n    const { isUnitless } = analyzeCSSValue(value)\n\n    return isUnitless || isNumber(value) ? `${value}px` : value\n  },\n  styles: generateStyles,\n  supports: generateAtRule(\"supports\"),\n  token: generateToken,\n  transform,\n  vars,\n}\n\nexport type Transforms = keyof typeof transforms\n","import type { Dict } from \"@yamada-ui/utils\"\nimport type { CSSFunction } from \"../css\"\nimport type { StyledTheme } from \"../theme.types\"\nimport { keyframes as emotionKeyframes } from \"@emotion/react\"\nimport { StyleSheet } from \"@emotion/sheet\"\nimport { createdDom, isObject } from \"@yamada-ui/utils\"\nimport { globalValues, tokenToVar } from \"./utils\"\n\nconst styleSheet = createdDom()\n  ? new StyleSheet({ key: \"css\", container: document.head })\n  : undefined\n\nfunction transformAnimationValue(value: Dict) {\n  return Object.entries(value).reduce<Dict>((prev, [key, value]) => {\n    if (key === \"duration\") {\n      prev.animationDuration = value\n    } else if (key === \"timingFunction\") {\n      prev.animationTimingFunction = value\n    } else {\n      prev[key] = value\n    }\n\n    return prev\n  }, {})\n}\n\nexport function animation(\n  value: any,\n  theme: StyledTheme,\n  css: CSSFunction,\n  _prev?: Dict,\n) {\n  if (value == null || globalValues.has(value)) return value\n\n  if (isObject(value)) {\n    const {\n      animationDuration = \"0s\",\n      animationTimingFunction = \"ease\",\n      delay = \"0s\",\n      direction = \"normal\",\n      fillMode = \"none\",\n      iterationCount = \"1\",\n      keyframes,\n      playState = \"running\",\n    } = css(transformAnimationValue(value))(theme)\n    const { name, styles } = emotionKeyframes(keyframes)\n\n    styleSheet?.insert(styles)\n\n    return `${name} ${animationDuration} ${animationTimingFunction} ${delay} ${iterationCount} ${direction} ${fillMode} ${playState}`\n  } else if (value.includes(\",\")) {\n    value = value\n      .split(\",\")\n      .map((value: string) => {\n        value = value.trim()\n\n        value = tokenToVar(\"animations\", value)(theme)\n\n        return value\n      })\n      .join(\",\")\n\n    return value\n  } else {\n    value = tokenToVar(\"animations\", value)(theme)\n\n    return value\n  }\n}\n","import type { CSSObject, Keyframes } from \"@emotion/react\"\nimport type { Dict } from \"@yamada-ui/utils\"\nimport type { ColorMode, CSSFunction } from \"../css\"\nimport type { ThemeToken } from \"../theme\"\nimport type { StyledTheme } from \"../theme.types\"\nimport { keyframes as emotionKeyframes } from \"@emotion/react\"\nimport { isObject, isString, isUndefined } from \"@yamada-ui/utils\"\n\nexport type Transform = (\n  value: any,\n  theme: StyledTheme,\n  css: CSSFunction,\n  prev?: Dict,\n) => any\n\nexport const globalValues = new Set([\n  \"-moz-initial\",\n  \"inherit\",\n  \"initial\",\n  \"none\",\n  \"revert\",\n  \"unset\",\n])\n\nexport function isCSSFunction(value: any) {\n  return isString(value) && value.includes(\"(\") && value.includes(\")\")\n}\n\nexport function getCSSFunction(value: any) {\n  const regex = /(^[a-z-A-Z]+)\\((.*)\\)/g\n  const [, type, values] = regex.exec(value) ?? []\n\n  return { type, values }\n}\n\nexport function splitValues(\n  values: string,\n  cb: (\n    current: string,\n    prev: string | undefined,\n    next: string | undefined,\n  ) => boolean = (current) => current === \",\",\n  addSeparator = false,\n) {\n  const result = []\n\n  let value = \"\"\n  let depth = 0\n\n  for (let i = 0; i < values.length; i++) {\n    const current = values[i]\n    const prev = values[i - 1]\n    const next = values[i + 1]\n\n    if (current === \"(\") depth++\n    if (current === \")\") depth--\n\n    if (!isUndefined(current) && cb(current, prev, next) && depth === 0) {\n      if (value) result.push(value.trim())\n\n      if (addSeparator) result.push(current)\n\n      value = \"\"\n    } else {\n      value += current\n    }\n  }\n\n  if (value) result.push(value.trim())\n\n  return result.filter(Boolean)\n}\n\nexport function isCSSVar(value: string) {\n  return /^var\\(--.+\\)$/.test(value)\n}\n\nexport function analyzeCSSValue(value: any) {\n  let n = parseFloat(value.toString())\n  const unit = value.toString().replace(String(n), \"\")\n\n  return { isUnitless: !unit, unit, value }\n}\n\nexport function tokenToVar(token: ThemeToken, value: any) {\n  return function (theme: StyledTheme) {\n    const match = isString(value)\n      ? value.match(/fallback\\(([^,)]+),?\\s*([^]+)?\\)/)\n      : null\n\n    const [, resolvedValue, fallbackValue] = match ?? []\n\n    if (resolvedValue) value = resolvedValue\n\n    const resolvedToken = `${token}.${value}`\n\n    if (isObject(theme.__cssMap) && resolvedToken in theme.__cssMap) {\n      return theme.__cssMap[resolvedToken]?.ref\n    } else {\n      return fallbackValue ?? value\n    }\n  }\n}\n\nexport function mode<L, D>(light: L, dark: D) {\n  return function (colorMode: ColorMode | undefined = \"light\"): D | L {\n    return colorMode === \"light\" ? light : dark\n  }\n}\n\nexport function keyframes(...arg: CSSObject[]): Keyframes {\n  return emotionKeyframes(...arg)\n}\n\nfunction combineFunctions(a: Transform, b: Transform): Transform {\n  return function (value, ...args) {\n    return b(a(value, ...args), ...args)\n  }\n}\n\nexport function pipe(...transformers: Transform[]) {\n  return transformers.reduce(combineFunctions)\n}\n","import type { Dict } from \"@yamada-ui/utils\"\nimport type { Transform } from \"./utils\"\nimport { filterUndefined, isArray, toKebabCase } from \"@yamada-ui/utils\"\nimport { tokenToVar } from \"./utils\"\n\nexport const generateAtRule =\n  (identifier: string): Transform =>\n  (values, theme) => {\n    if (!isArray(values)) return values\n\n    return values.reduce<Dict>(\n      (\n        prev,\n        {\n          type,\n          name,\n          css,\n          h,\n          height,\n          maxH,\n          maxHeight,\n          maxW,\n          maxWidth,\n          minH,\n          minHeight,\n          minW,\n          minWidth,\n          query,\n          w,\n          width,\n          ...rest\n        },\n      ) => {\n        width ??= w\n        minWidth ??= minW\n        maxWidth ??= maxW\n        height ??= h\n        minHeight ??= minH\n        maxHeight ??= maxH\n\n        if (!query) {\n          const resolvedRest = filterUndefined({\n            height,\n            maxHeight,\n            maxWidth,\n            minHeight,\n            minWidth,\n            width,\n            ...rest,\n          })\n\n          query = Object.entries(resolvedRest)\n            .map(([key, value]) => {\n              value = tokenToVar(\"sizes\", value)(theme)\n\n              return `(${toKebabCase(key)}: ${value})`\n            })\n            .join(\" and \")\n        }\n\n        const condition = `@${identifier} ${type ?? name ?? \"\"} ${query}`\n\n        prev[condition] = css\n\n        return prev\n      },\n      {},\n    )\n  }\n","import type { ThemeToken } from \"../theme\"\nimport type { Transform } from \"./utils\"\nimport { isNumeric } from \"@yamada-ui/utils\"\nimport {\n  getCSSFunction,\n  globalValues,\n  isCSSFunction,\n  splitValues,\n} from \"./utils\"\n\nconst OPERATORS = [\"+\", \"-\", \"*\", \"/\"]\n\nfunction getValue(value: string | undefined, fallbackValue = \"\"): Transform {\n  return function (token, theme, ...rest) {\n    if (!value) return fallbackValue\n\n    const prevent = isCSSFunction(value)\n\n    if (prevent) {\n      return generateCalc(token)(value, theme, ...rest)\n    } else {\n      if (isNumeric(value)) return value\n\n      const resolvedToken = `${token}.${value}`\n\n      return theme.__cssMap && resolvedToken in theme.__cssMap\n        ? theme.__cssMap[resolvedToken]?.ref\n        : value\n    }\n  }\n}\n\nfunction isOperator(value: string) {\n  return new RegExp(`\\\\s[${OPERATORS.join(\"\\\\\")}]\\\\s`).test(value)\n}\n\nexport function generateCalc(token: ThemeToken): Transform {\n  return function (value, theme, ...rest) {\n    if (value == null || globalValues.has(value)) return value\n\n    const prevent = isCSSFunction(value)\n\n    if (!prevent) return value\n\n    let { type, values } = getCSSFunction(value)\n\n    if (!type || !values) return value\n\n    switch (type) {\n      case \"calc\": {\n        const computedValues = splitValues(\n          values,\n          (char, prev, next) => isOperator(`${prev}${char}${next}`),\n          true,\n        ).map((value) => {\n          if (value && OPERATORS.includes(value)) return value\n\n          return getValue(value)(token, theme, ...rest)\n        })\n\n        return `calc(${computedValues.join(\" \")})`\n      }\n\n      case \"min\":\n      case \"max\": {\n        let [firstValue, secondValue, ...otherValues] = splitValues(values)\n\n        firstValue = getValue(firstValue, \"100%\")(token, theme, ...rest)\n        secondValue = getValue(secondValue, \"100%\")(token, theme, ...rest)\n        otherValues = otherValues.map((value) =>\n          getValue(value)(token, theme, ...rest),\n        )\n\n        return (\n          `${type}(` +\n          `${firstValue}, ${secondValue}` +\n          (otherValues.length ? `, ${otherValues.join(\", \")}` : \"\") +\n          \")\"\n        )\n      }\n\n      case \"clamp\": {\n        let [min, preferred, max] = splitValues(values)\n\n        if (!max) {\n          max = preferred\n          preferred = \"\"\n        }\n\n        min = getValue(min)(token, theme, ...rest)\n        preferred = getValue(preferred, \"100%\")(token, theme, ...rest)\n        max = getValue(max)(token, theme, ...rest)\n\n        return `clamp(${min}, ${preferred}, ${max})`\n      }\n\n      case \"minmax\": {\n        let [min, max] = splitValues(values)\n\n        min = getValue(min)(token, theme, ...rest)\n        max = getValue(max)(token, theme, ...rest)\n\n        return `minmax(${min}, ${max})`\n      }\n\n      case \"fit-content\": {\n        let [value] = splitValues(values)\n\n        value = getValue(value)(token, theme, ...rest)\n\n        return `fit-content(${value})`\n      }\n\n      default:\n        return value\n    }\n  }\n}\n","import type { Dict } from \"@yamada-ui/utils\"\nimport type { CSSFunction } from \"../css\"\nimport type { StyledTheme } from \"../theme.types\"\nimport {\n  getCSSFunction,\n  globalValues,\n  isCSSFunction,\n  splitValues,\n} from \"./utils\"\n\nconst DEFAULT_METHOD = \"in srgb\"\n\nconst methods: { [key: string]: string } = {\n  \"a98-rgb\": \"in a98-rgb\",\n  \"display-p3\": \"in display-p3\",\n  lab: \"in lab\",\n  oklab: \"in oklab\",\n  \"prophoto-rgb\": \"in prophoto-rgb\",\n  rec2020: \"in rec2020\",\n  srgb: \"in srgb\",\n  \"srgb-linear\": \"in srgb-linear\",\n  xyz: \"in xyz\",\n  \"xyz-d50\": \"in xyz-d50\",\n  \"xyz-d65\": \"in xyz-d65\",\n}\n\nfunction getColor(value: string | undefined, theme: StyledTheme) {\n  if (!value) return \"\"\n\n  let [color, percent, ...rest] = value.split(\" \").filter(Boolean)\n\n  if (rest.length) return value\n\n  const token = `colors.${color}`\n\n  color =\n    theme.__cssMap && token in theme.__cssMap\n      ? theme.__cssMap[token]?.ref\n      : color\n\n  if (percent && !percent.endsWith(\"%\")) percent = `${percent}%`\n\n  return !percent ? color : `${color} ${percent}`\n}\n\nexport function colorMix(\n  value: any,\n  theme: StyledTheme,\n  _css?: CSSFunction,\n  _prev?: Dict,\n) {\n  if (value == null || globalValues.has(value)) return value\n\n  const prevent = isCSSFunction(value)\n\n  if (!prevent) return value\n\n  const { type, values } = getCSSFunction(value)\n\n  if (!values) return value\n\n  switch (type) {\n    case \"mix\":\n    case \"color-mix\": {\n      let [color2, color1, method] = splitValues(values).reverse()\n\n      if (method) {\n        method = method in methods ? methods[method] : method\n      } else {\n        method = DEFAULT_METHOD\n      }\n\n      color1 = getColor(color1, theme)\n      color2 = getColor(color2, theme)\n\n      return (\n        `color-mix(${method}` +\n        (color1 ? `, ${color1}` : \"\") +\n        (color2 ? `, ${color2}` : \"\") +\n        \")\"\n      )\n    }\n\n    case \"tint\":\n    case \"shade\":\n    case \"transparentize\": {\n      const [color, percent] = splitValues(values)\n\n      const color1 = getColor(`${color} ${percent}`, theme)\n      const color2 =\n        type === \"transparentize\"\n          ? \"transparent\"\n          : type === \"tint\"\n            ? \"#fff\"\n            : \"#000\"\n\n      return `color-mix(${DEFAULT_METHOD}, ${color1}, ${color2})`\n    }\n\n    case \"tone\": {\n      const [color, tone] = splitValues(values)\n\n      const color1 = getColor(color, theme)\n\n      if (!tone) return color1\n\n      let ratio = parseInt(tone) || 500\n\n      if (ratio < 50 && 950 < ratio) ratio = 500\n\n      if (ratio === 500) return color1\n\n      const color2 = ratio < 500 ? \"#fff\" : \"#000\"\n\n      const percent = `${100 - (Math.abs(ratio - 500) * 2) / 10}%`\n\n      return `color-mix(${DEFAULT_METHOD}, ${color1} ${percent}, ${color2})`\n    }\n\n    default:\n      return value\n  }\n}\n","import type { Transform } from \"./utils\"\n\nexport function generateFilter(\n  type: \"backdrop\" | \"filter\" = \"filter\",\n): Transform {\n  return function (value) {\n    if (value !== \"auto\") return value\n\n    if (type === \"filter\") {\n      return [\n        \"var(--ui-blur, /*!*/ /*!*/)\",\n        \"var(--ui-brightness, /*!*/ /*!*/)\",\n        \"var(--ui-contrast, /*!*/ /*!*/)\",\n        \"var(--ui-drop-shadow, /*!*/ /*!*/)\",\n        \"var(--ui-grayscale, /*!*/ /*!*/)\",\n        \"var(--ui-hue-rotate, /*!*/ /*!*/)\",\n        \"var(--ui-invert, /*!*/ /*!*/)\",\n        \"var(--ui-opacity, /*!*/ /*!*/)\",\n        \"var(--ui-saturate, /*!*/ /*!*/)\",\n        \"var(--ui-sepia, /*!*/ /*!*/)\",\n      ].join(\" \")\n    } else {\n      return [\n        \"var(--ui-backdrop-blur, /*!*/ /*!*/)\",\n        \"var(--ui-backdrop-brightness, /*!*/ /*!*/)\",\n        \"var(--ui-backdrop-contrast, /*!*/ /*!*/)\",\n        \"var(--ui-backdrop-drop-shadow, /*!*/ /*!*/)\",\n        \"var(--ui-backdrop-grayscale, /*!*/ /*!*/)\",\n        \"var(--ui-backdrop-hue-rotate, /*!*/ /*!*/)\",\n        \"var(--ui-backdrop-invert, /*!*/ /*!*/)\",\n        \"var(--ui-backdrop-opacity, /*!*/ /*!*/)\",\n        \"var(--ui-backdrop-saturate, /*!*/ /*!*/)\",\n        \"var(--ui-backdrop-sepia, /*!*/ /*!*/)\",\n      ].join(\" \")\n    }\n  }\n}\n","import type { Transform } from \"./utils\"\n\nexport function generateFunction(func: string): Transform {\n  return function (value) {\n    return `${func}(${value})`\n  }\n}\n","import type { Dict } from \"@yamada-ui/utils\"\nimport type { CSSFunction } from \"../css\"\nimport type { StyledTheme } from \"../theme.types\"\nimport { isArray, isUndefined } from \"@yamada-ui/utils\"\nimport {\n  getCSSFunction,\n  globalValues,\n  isCSSFunction,\n  splitValues,\n} from \"./utils\"\n\nconst directions: { [key: string]: string } = {\n  \"to-b\": \"to bottom\",\n  \"to-bl\": \"to bottom left\",\n  \"to-br\": \"to bottom right\",\n  \"to-l\": \"to left\",\n  \"to-r\": \"to right\",\n  \"to-t\": \"to top\",\n  \"to-tl\": \"to top left\",\n  \"to-tr\": \"to top right\",\n}\n\nconst directionValues = new Set(Object.values(directions))\n\nexport function gradient(\n  value: any,\n  theme: StyledTheme,\n  _css?: CSSFunction,\n  _prev?: Dict,\n) {\n  if (value == null || globalValues.has(value)) return value\n\n  const prevent = isCSSFunction(value)\n\n  if (!prevent) return `url('${value}')`\n\n  let { type, values } = getCSSFunction(value)\n\n  if (!type || !values) return value\n\n  type = type.includes(\"-gradient\") ? type : `${type}-gradient`\n\n  const [maybeDirection, ...colors] = splitValues(values)\n\n  if (!colors.length) return value\n\n  const direction =\n    maybeDirection && maybeDirection in directions\n      ? directions[maybeDirection]\n      : maybeDirection\n\n  if (!isUndefined(direction)) colors.unshift(direction)\n\n  const computedValues = colors.map((_color) => {\n    if (isUndefined(_color)) return _color\n\n    if (directionValues.has(_color)) return _color\n\n    const i = _color.indexOf(\" \")\n\n    let [color, _ratio] =\n      i !== -1 ? [_color.slice(0, i), _color.slice(i + 1)] : [_color]\n\n    const ratio = isCSSFunction(_ratio) ? _ratio : _ratio?.split(\" \")\n\n    const token = `colors.${color}`\n\n    color =\n      theme.__cssMap && token in theme.__cssMap\n        ? (theme.__cssMap[token]?.ref ?? color)\n        : color\n\n    if (ratio) {\n      return [color, ...(isArray(ratio) ? ratio : [ratio])].join(\" \")\n    } else {\n      return color\n    }\n  })\n\n  return `${type}(${computedValues.join(\", \")})`\n}\n","import type { Dict } from \"@yamada-ui/utils\"\nimport type { CSSFunction } from \"../css\"\nimport type { StyledTheme } from \"../theme.types\"\nimport { generateCalc } from \"./calc\"\nimport {\n  getCSSFunction,\n  globalValues,\n  isCSSFunction,\n  splitValues,\n} from \"./utils\"\n\nconst repeats: { [key: string]: string } = {\n  fill: \"auto-fill\",\n  fit: \"auto-fit\",\n}\n\nexport function grid(\n  value: any,\n  theme: StyledTheme,\n  css: CSSFunction,\n  prev?: Dict,\n) {\n  if (value == null || globalValues.has(value)) return value\n\n  const values = splitValues(value, (current) => current === \" \")\n\n  if (!values.length) return value\n\n  const computedValues = values.map((value): string => {\n    const prevent = isCSSFunction(value)\n\n    if (!prevent) {\n      const token = `sizes.${value}`\n\n      return theme.__cssMap && token in theme.__cssMap\n        ? (theme.__cssMap[token]?.ref ?? value)\n        : value\n    }\n\n    const { type, values } = getCSSFunction(value)\n\n    if (!type || !values) return value\n\n    if (type === \"repeat\") {\n      let [repeat, tracks] = splitValues(values)\n\n      repeat = repeat && repeat in repeats ? repeats[repeat] : repeat\n      tracks = grid(tracks, theme, css, prev)\n\n      return `repeat(${repeat}, ${tracks})`\n    } else {\n      return generateCalc(\"sizes\")(value,