@yamada-ui/core/dist/index.js

Yamada UI core

"use client"
"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/index.ts
var index_exports = {};
__export(index_exports, {
  COLOR_MODE_STORAGE_KEY: () => COLOR_MODE_STORAGE_KEY,
  CSSVars: () => CSSVars,
  ColorModeContext: () => ColorModeContext,
  ColorModeProvider: () => ColorModeProvider,
  ColorModeScript: () => ColorModeScript,
  EnvironmentProvider: () => EnvironmentProvider,
  GlobalStyle: () => GlobalStyle,
  I18nContext: () => I18nContext,
  I18nProvider: () => I18nProvider,
  ResetStyle: () => ResetStyle,
  THEME_SCHEME_STORAGE_KEY: () => THEME_SCHEME_STORAGE_KEY,
  ThemeProvider: () => ThemeProvider,
  ThemeSchemeScript: () => ThemeSchemeScript,
  analyzeBreakpoints: () => analyzeBreakpoints,
  animation: () => animation,
  animationProperties: () => animationProperties,
  atRuleProperties: () => atRuleProperties,
  atRuleSelectors: () => atRuleSelectors,
  atRuleStyles: () => atRuleStyles,
  atRules: () => atRules,
  attributeProperties: () => attributeProperties,
  attributeSelectors: () => attributeSelectors,
  attributes: () => attributes,
  blurProperties: () => blurProperties,
  borderProperties: () => borderProperties,
  colorModeManager: () => colorModeManager,
  colorProperties: () => colorProperties,
  createColorModeManager: () => createColorModeManager,
  createQuery: () => createQuery,
  createThemeSchemeManager: () => createThemeSchemeManager,
  createVars: () => createVars,
  css: () => css,
  defaultEnvironment: () => defaultEnvironment,
  fontProperties: () => fontProperties,
  forwardRef: () => forwardRef2,
  getCSS: () => getCSS,
  getColorModeScript: () => getColorModeScript,
  getColorModeValue: () => getColorModeValue,
  getCreateThemeVars: () => getCreateThemeVars,
  getLanguage: () => getLanguage,
  getMinMaxQuery: () => getMinMaxQuery,
  getThemeSchemeScript: () => getThemeSchemeScript,
  getVar: () => getVar,
  gradient: () => gradient,
  gradientProperties: () => gradientProperties,
  groupAttributeProperties: () => groupAttributeProperties,
  groupAttributeSelectors: () => groupAttributeSelectors,
  groupAttributes: () => groupAttributes,
  i18nCache: () => i18nCache,
  isRtl: () => isRtl,
  keyframes: () => keyframes,
  layoutStyleProperties: () => layoutStyleProperties,
  memo: () => memo2,
  mergeMultiStyle: () => mergeMultiStyle,
  mergeStyle: () => mergeStyle,
  mergeVars: () => mergeVars,
  mode: () => mode,
  omitThemeProps: () => omitThemeProps,
  peerAttributeProperties: () => peerAttributeProperties,
  peerAttributeSelectors: () => peerAttributeSelectors,
  peerAttributes: () => peerAttributes,
  pickStyle: () => pickStyle,
  processSkipProperties: () => processSkipProperties,
  pseudoClassProperties: () => pseudoClassProperties,
  pseudoClassSelectors: () => pseudoClassSelectors,
  pseudoClasses: () => pseudoClasses,
  pseudoElementProperties: () => pseudoElementProperties,
  pseudoElementSelectors: () => pseudoElementSelectors,
  pseudoElements: () => pseudoElements,
  pseudoProperties: () => pseudoProperties,
  pseudoSelectors: () => pseudoSelectors,
  pseudoStyles: () => pseudoStyles,
  pseudos: () => pseudos,
  radiusProperties: () => radiusProperties,
  shadowProperties: () => shadowProperties,
  shorthandStyles: () => shorthandStyles,
  shouldForwardProp: () => shouldForwardProp,
  sizeProperties: () => sizeProperties,
  spaceProperties: () => spaceProperties,
  standardStyles: () => standardStyles,
  styleProperties: () => styleProperties,
  styled: () => styled,
  styles: () => styles,
  themeSchemeManager: () => themeSchemeManager,
  toCSSObject: () => toCSSObject,
  transformTheme: () => transformTheme,
  transforms: () => transforms,
  transitionProperties: () => transitionProperties,
  ui: () => ui,
  uiStyles: () => uiStyles,
  useCSS: () => useCSS,
  useColorMode: () => useColorMode,
  useColorModeValue: () => useColorModeValue,
  useComponentMultiStyle: () => useComponentMultiStyle,
  useComponentStyle: () => useComponentStyle,
  useCreateVars: () => useCreateVars,
  useEnvironment: () => useEnvironment,
  useI18n: () => useI18n,
  useSystemColorMode: () => useSystemColorMode,
  useTheme: () => useTheme,
  zIndexProperties: () => zIndexProperties
});
module.exports = __toCommonJS(index_exports);

// src/components/forward-ref.ts
var React = __toESM(require("react"));
function forwardRef2(render) {
  return React.forwardRef(
    render
  );
}

// src/components/memo.ts
var React2 = __toESM(require("react"));
function memo2(Component, propsAreEqual) {
  return React2.memo(Component, propsAreEqual);
}

// src/pseudos.ts
var toGroup = (selectors) => ["[role=group]", "[data-group]", ".group"].map((prefix) => merge(parse(selectors), prefix, " &")).join(", ");
var toPeer = (selectors) => ["[data-peer]", ".peer"].map((prefix) => merge(parse(selectors), prefix, " ~ &")).join(", ");
var parse = (selectors) => selectors.split(",").map((selector) => selector.trim().slice(1));
var merge = (selectors, prefix = "&", suffix = "") => selectors.map((selector) => `${prefix}${selector}${suffix}`).join(", ");
var attributes = {
  /**
   * The CSS `[data-accept]` attribute selector.
   */
  _accept: "&[data-accept]",
  /**
   * The CSS `[data-between]` attribute selector.
   */
  _between: "&[data-between]",
  /**
   * The CSS `[data-end]` attribute selector.
   */
  _end: "&[data-end]",
  /**
   * The CSS `[aria-selected=true]` attribute selector.
   *
   * - `[aria-expanded=true]`
   * - `[data-expanded]`
   */
  _expanded: "&[data-expanded], &[aria-expanded=true]",
  /**
   * The CSS `[data-filled]` attribute selector.
   */
  _filled: "&[data-filled]",
  /**
   * The CSS `[data-grabbed]` attribute selector.
   *
   * - `[data-grabbed]`
   * - `[aria-grabbed=true]`
   */
  _grabbed: "&[data-grabbed], &[aria-grabbed=true]",
  /**
   * The CSS `[data-grid]` attribute selector.
   */
  _grid: "[role=grid], &[data-grid]",
  /**
   * The CSS `[hidden]` attribute selector.
   *
   * - `[hidden]`
   * - `[data-hidden]`
   */
  _hidden: "&[hidden], &[data-hidden]",
  /**
   * The CSS `[data-holiday]` attribute selector.
   */
  _holiday: "&[data-holiday]",
  /**
   * The CSS `[data-idle]` attribute selector.
   */
  _idle: "&[data-idle]",
  /**
   * The CSS `[data-loaded]` attribute selector.
   */
  _loaded: "&[data-loaded]",
  /**
   * The CSS `[aria-busy=true]` attribute selector.
   *
   * - `[data-loading]`
   * - `[aria-busy=true]`
   */
  _loading: "&[data-loading], &[aria-busy=true]",
  /**
   * The CSS `[hidden]` attribute selector.
   */
  _nativeHidden: "&[hidden]",
  /**
   * The CSS `[data-not-allowed]` attribute selector.
   *
   * - `[data-not-allowed]`
   */
  _notAllowed: "&[data-not-allowed]",
  /**
   * The CSS `:not(:selected)` attribute selector.
   *
   * - `:not([data-selected])`
   * - `:not([aria-selected=true])`
   */
  _notSelected: "&:not([data-selected]):not([aria-selected=true])",
  /**
   * The CSS `:where([data-outside])` attribute selector.
   */
  _outside: "&:where([data-outside])",
  /**
   * The CSS `[data-pressed]` attribute selector.
   *
   * - `[data-pressed]`
   * - `[aria-pressed=true]`
   */
  _pressed: "&[data-pressed], &[aria-pressed=true]",
  /**
   * The CSS `[data-reject]` attribute selector.
   */
  _reject: "&[data-reject]",
  _ripple: "& .ui-ripple",
  /**
   * The CSS `:selected` attribute selector.
   *
   * - `[data-selected]`
   * - `[aria-selected=true]`
   */
  _selected: "&[data-selected], &[aria-selected=true]",
  /**
   * The CSS `[data-start]` attribute selector.
   */
  _start: "&[data-start]",
  /**
   * The CSS `[data-today]` attribute selector.
   */
  _today: "&[data-today]",
  /**
   * The CSS `:where([data-weekend])` attribute selector.
   */
  _weekend: "&:where([data-weekend])"
};
var attributeProperties = Object.keys(
  attributes
);
var attributeSelectors = Object.values(attributes);
var pseudoElements = {
  /**
   * The CSS `::after` pseudo-element.
   */
  _after: "&::after",
  /**
   * The CSS `::backdrop` pseudo-element.
   */
  _backdrop: "&::backdrop",
  /**
   * The CSS `::before` pseudo-element.
   */
  _before: "&::before",
  /**
   * The CSS `::cue` pseudo-element.
   */
  _cue: "&::cue",
  /**
   * The CSS `::cue-region` pseudo-element.
   */
  _cueRegion: "&::cue-region",
  /**
   * The CSS `::file-selector-button` pseudo-element.
   */
  _fileSelector: "&::file-selector-button",
  /**
   * The CSS `::first-letter` pseudo-element.
   */
  _firstLetter: "&::first-letter",
  /**
   * The CSS `::first-line` pseudo-element.
   */
  _firstLine: "&::first-line",
  /**
   * The CSS `::marker` pseudo-element.
   */
  _marker: "&::marker",
  /**
   * The CSS `::placeholder` pseudo-element.
   *
   * - `::placeholder`
   * - `[data-placeholder]`
   */
  _placeholder: "&::placeholder, &[data-placeholder]",
  /**
   * The CSS `::-webkit-scrollbar` pseudo-element.
   *
   * - `::-webkit-scrollbar`
   * - `[data-scrollbar]`
   */
  _scrollbar: "&::-webkit-scrollbar, &[data-scrollbar]",
  /**
   * The CSS `::-webkit-scrollbar-button` pseudo-element.
   */
  _scrollbarButton: "&::-webkit-scrollbar-button",
  /**
   * The CSS `::-webkit-scrollbar-corner` pseudo-element.
   */
  _scrollbarCorner: "&::-webkit-scrollbar-corner",
  /**
   * The CSS `::-webkit-scrollbar-thumb` pseudo-element.
   */
  _scrollbarThumb: "&::-webkit-scrollbar-thumb",
  /**
   * The CSS `::-webkit-scrollbar-track` pseudo-element.
   */
  _scrollbarTrack: "&::-webkit-scrollbar-track",
  /**
   * The CSS `::-webkit-scrollbar-track-piece` pseudo-element.
   */
  _scrollbarTrackPiece: "&::-webkit-scrollbar-track-piece",
  /**
   * The CSS `::selection` pseudo-element.
   */
  _selection: "&::selection"
};
var pseudoElementProperties = Object.keys(
  pseudoElements
);
var pseudoElementSelectors = Object.values(pseudoElements);
var pseudoClasses = {
  /**
   * The CSS `:active` pseudo-class.
   *
   * - `:active`
   * - `[data-active]`
   */
  _active: "&:active, &[data-active]",
  /**
   * The CSS `:any-link` pseudo-class.
   *
   * - `:any-link`
   * - `[data-any-link]`
   */
  _anyLink: "&:any-link, &[data-any-link]",
  /**
   * The CSS `:autofill` pseudo-class.
   */
  _autofill: "&:autofill, &:-webkit-autofill",
  /**
   * The CSS `:blank` pseudo-class.
   *
   * - `:blank`
   * - `[data-blank]`
   */
  _blank: "&:blank, &[data-blank]",
  /**
   * The CSS `:checked` pseudo-class.
   *
   * - `:checked`
   * - `[data-checked]`
   * - `[aria-checked=true]`
   */
  _checked: "&:checked, &[data-checked], &[aria-checked=true]",
  /**
   * The CSS `> *` child combinator selector.
   */
  _child: "& > *",
  /**
   * The CSS `:default` pseudo-class.
   */
  _default: "&:default",
  /**
   * The CSS `:disabled` pseudo-class.
   *
   * - `:disabled`
   * - `[disabled]`
   * - `[aria-disabled=true]`
   * - `[data-disabled]`
   */
  _disabled: "&:disabled, &[disabled], &[aria-disabled=true], &[data-disabled]",
  /**
   * The CSS `:empty` pseudo-class.
   */
  _empty: "&:empty",
  /**
   * The CSS `:enabled` pseudo-class.
   */
  _enabled: "&:enabled, &[data-enabled]",
  /**
   * The CSS `:nth-of-type(even)` pseudo-class.
   */
  _even: "&:nth-of-type(even)",
  /**
   * The CSS `:first-of-type` pseudo-class.
   */
  _first: "&:first-of-type",
  /**
   * The CSS `:first-child` pseudo-class.
   */
  _firstChild: "& > *:first-child",
  /**
   * The CSS `:focus` pseudo-class.
   *
   * - `:focus`
   * - `[data-focus]`
   */
  _focus: "&:focus, &[data-focus]",
  /**
   * The CSS `:focus-visible` pseudo-class.
   *
   * - `:focus-visible`
   * - `[data-focus-visible]`
   */
  _focusVisible: "&:focus-visible, &[data-focus-visible]",
  /**
   * The CSS `:focus-within` pseudo-class.
   *
   * - `:focus-within`
   * - `[data-focus-within]`
   */
  _focusWithin: "&:focus-within, &[data-focus-within]",
  /**
   * The CSS `:fullscreen` pseudo-class.
   */
  _fullScreen: "&:fullscreen",
  /**
   * The CSS `:horizontal` pseudo-class.
   *
   * - `[aria-orientation=horizontal]`
   * - `[data-orientation=horizontal]`
   */
  _horizontal: "&[data-orientation=horizontal], &[aria-orientation=horizontal]",
  /**
   * The CSS `:hover` pseudo-class.
   *
   * - `:hover`
   * - `[data-hover]`
   */
  _hover: "&:hover, &[data-hover]",
  /**
   * The CSS `:indeterminate` pseudo-class.
   *
   * - `:indeterminate`
   * - `[aria-checked=mixed]`
   * - `[data-indeterminate]`
   */
  _indeterminate: "&:indeterminate, &[data-indeterminate], &[aria-checked=mixed]",
  /**
   * The CSS `:in-range` pseudo-class.
   *
   * - `:in-range`
   * - `[data-in-range]`
   */
  _inRange: "&:in-range, &[data-in-range]",
  /**
   * The CSS `:invalid` attribute selector.
   *
   * - `[data-invalid]`
   * - `[aria-invalid=true]`
   */
  _invalid: "&[data-invalid], &[aria-invalid=true]",
  /**
   * The CSS `:last-of-type` pseudo-class.
   */
  _last: "&:last-of-type",
  /**
   * The CSS `:last-child` pseudo-class.
   */
  _lastChild: "& > *:last-child",
  /**
   * The CSS `:link` pseudo-class.
   *
   * - `:link`
   * - `[data-link]`
   */
  _link: "&:link, &[data-link]",
  /**
   * The CSS `:modal` pseudo-class.
   */
  _modal: "&:modal",
  /**
   * The CSS `:active` pseudo-class.
   */
  _nativeActive: "&:active",
  /**
   * The CSS `:checked` pseudo-class.
   */
  _nativeChecked: "&:checked",
  /**
   * The CSS `:disabled` pseudo-class.
   *
   * - `:disabled`
   * - `[disabled]`
   */
  _nativeDisabled: "&:disabled, &[disabled]",
  /**
   * The CSS `:focus` pseudo-class.
   */
  _nativeFocus: "&:focus",
  /**
   * The CSS `:focus-visible` pseudo-class.
   */
  _nativeFocusVisible: "&:focus-visible",
  /**
   * The CSS `:focus-within` pseudo-class.
   */
  _nativeFocusWithin: "&:focus-within",
  /**
   * The CSS `:hover` pseudo-class.
   */
  _nativeHover: "&:hover",
  /**
   * The CSS `:read-only` pseudo-class.
   *
   * - `[readonly]`
   * - `[aria-readonly=true]`
   */
  _nativeReadOnly: "&[readonly], &[aria-readonly=true]",
  /**
   * The CSS `:target` pseudo-class.
   */
  _nativeTarget: "&:target",
  /**
   * The CSS `:valid` pseudo-class.
   */
  _nativeValid: "&:valid",
  /**
   * The CSS `:checked` pseudo-class.
   *
   * - `:not(:checked)`
   * - `:not([data-checked])`
   * - `:not([aria-checked=true])`
   */
  _notChecked: "&:not(:checked):not([data-checked]):not([aria-checked=true])",
  /**
   * The CSS `:not(:first-of-type)` pseudo-class.
   */
  _notFirst: "&:not(:first-of-type)",
  /**
   * The CSS `:not(:first-child)` pseudo-class.
   */
  _notFirstChild: "& > *:not(:first-child)",
  /**
   * The CSS `:not(:last-of-type)` pseudo-class.
   */
  _notLast: "&:not(:last-of-type)",
  /**
   * The CSS `:not(:last-child)` pseudo-class.
   */
  _notLastChild: "& > *:not(:last-child)",
  /**
   * The CSS `:not(:target)` pseudo-class.
   */
  _notTarget: "&:not(:target)",
  /**
   * The CSS `:nth-of-type(odd)` pseudo-class.
   */
  _odd: "&:nth-of-type(odd)",
  /**
   * The CSS `:only-of-type` pseudo-class.
   */
  _only: "&:only-of-type",
  /**
   * The CSS `:optional` pseudo-class.
   *
   * - `:optional`
   * - `[data-optional]`
   */
  _optional: "&:optional, &[data-optional]",
  /**
   * The CSS `:out-of-range` pseudo-class.
   *
   * - `:out-of-range`
   * - `[data-out-of-range]`
   */
  _outRange: "&:out-of-range, &[data-out-of-range]",
  /**
   * The CSS `:paused` pseudo-class.
   *
   * - `:paused`
   * - `[data-paused]`
   */
  _paused: "&:paused, &[data-paused]",
  /**
   * The CSS `:picture-in-picture` pseudo-class.
   */
  _picture: "&:picture-in-picture",
  /**
   * The CSS `:placeholder-shown` pseudo-class.
   */
  _placeholderShown: "&:placeholder-shown",
  /**
   * The CSS `:playing` pseudo-class.
   *
   * - `:playing`
   * - `[data-playing]`
   */
  _playing: "&:playing, &[data-playing]",
  /**
   * The CSS `:read-only` pseudo-class.
   *
   * - `[readonly]`
   * - `[aria-readonly=true]`
   * - `[data-readonly]`
   */
  _readOnly: "&[readonly], &[data-readonly], &[aria-readonly=true]",
  /**
   * The CSS `:read-write` pseudo-class.
   *
   * - `:read-write`
   * - `[data-read-write]`
   */
  _readWrite: "&:read-write, &[data-read-write]",
  /**
   * The CSS `:required` pseudo-class.
   *
   * - `:required`
   * - `[required]`
   */
  _required: "&:required, &[required]",
  /**
   * The CSS `:target` pseudo-class.
   *
   * - `:target`
   * - `[data-target]`
   */
  _target: "&:target, &[data-target]",
  /**
   * The CSS `:user-invalid` pseudo-class.
   *
   * - `:user-invalid`
   * - `[data-user-invalid]`
   */
  _userInvalid: "&:user-invalid, &[data-user-invalid]",
  /**
   * The CSS `:valid` pseudo-class.
   *
   * - `:valid`
   * - `[data-valid]`
   */
  _valid: "&:valid, &[data-valid]",
  /**
   * The CSS `:vertical` pseudo-class.
   *
   * - `[aria-orientation=vertical]`
   * - `[data-orientation=vertical]`
   */
  _vertical: "&[data-orientation=vertical], &[aria-orientation=vertical]",
  /**
   * The CSS `:visited` pseudo-class.
   */
  _visited: "&:visited"
};
var pseudoClassProperties = Object.keys(
  pseudoClasses
);
var pseudoClassSelectors = Object.values(pseudoClasses);
var atRules = {
  /**
   * Styles for when `data-mode` is applied to any parent of this component or element.
   */
  _dark: ".ui-dark &:not([data-mode]), [data-mode=dark] &:not([data-mode]), &[data-mode=dark]",
  /**
   * The CSS `@media (orientation: landscape)` media query.
   */
  _landscape: "@media (orientation: landscape)",
  /**
   * Styles for when `data-mode` is applied to any parent of this component or element.
   */
  _light: ".ui-light &:not([data-mode]), [data-mode=light] &:not([data-mode]), &[data-mode=light]",
  /**
   * The CSS `@media (prefers-color-scheme: dark)` media query.
   */
  _mediaDark: "@media (prefers-color-scheme: dark)",
  /**
   * The CSS `@media (prefers-color-scheme: light)` media query.
   */
  _mediaLight: "@media (prefers-color-scheme: light)",
  /**
   * The CSS `@media (prefers-reduced-motion: reduce)` media query.
   */
  _mediaReduceMotion: "@media (prefers-reduced-motion: reduce)",
  /**
   * The CSS `@media (orientation: portrait)` media query.
   */
  _portrait: "@media (orientation: portrait)",
  /**
   * The CSS `@media print` media query.
   */
  _print: "@media print"
};
var atRuleProperties = Object.keys(atRules);
var atRuleSelectors = Object.values(atRules);
var groupAttributes = {
  /**
   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is accepted.
   */
  _groupAccept: toGroup(attributes._accept),
  /**
   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is active.
   */
  _groupActive: toGroup(pseudoClasses._active),
  /**
   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is blank.
   */
  _groupBlank: toGroup(pseudoClasses._blank),
  /**
   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is checked.
   */
  _groupChecked: toGroup(pseudoClasses._checked),
  /**
   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is disabled.
   */
  _groupDisabled: toGroup(pseudoClasses._disabled),
  /**
   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is enabled.
   */
  _groupEnabled: toGroup(pseudoClasses._enabled),
  /**
   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is expanded.
   */
  _groupExpanded: toGroup(attributes._expanded),
  /**
   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is focused.
   */
  _groupFocus: toGroup(pseudoClasses._focus),
  /**
   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is focused-visible.
   */
  _groupFocusVisible: toGroup(pseudoClasses._focusVisible),
  /**
   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is focus-within.
   */
  _groupFocusWithin: toGroup(pseudoClasses._focusWithin),
  /**
   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is grabbed.
   */
  _groupGrabbed: toGroup(attributes._grabbed),
  /**
   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is horizontal.
   */
  _groupHorizontal: toGroup(pseudoClasses._horizontal),
  /**
   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is hovered.
   */
  _groupHover: toGroup(pseudoClasses._hover),
  /**
   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is idle.
   */
  _groupIdle: toGroup(attributes._idle),
  /**
   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is invalid.
   */
  _groupInvalid: toGroup(pseudoClasses._invalid),
  /**
   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is loaded.
   */
  _groupLoaded: toGroup(attributes._loaded),
  /**
   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is loading.
   */
  _groupLoading: toGroup(attributes._loading),
  /**
   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is optional.
   */
  _groupOptional: toGroup(pseudoClasses._optional),
  /**
   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` has a placeholder shown.
   */
  _groupPlaceholderShown: toGroup(pseudoClasses._placeholderShown),
  /**
   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is pressed.
   */
  _groupPressed: toGroup(attributes._pressed),
  /**
   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is read-only.
   */
  _groupReadOnly: toGroup(pseudoClasses._readOnly),
  /**
   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is read-write.
   */
  _groupReadWrite: toGroup(pseudoClasses._readWrite),
  /**
   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is rejected.
   */
  _groupReject: toGroup(attributes._reject),
  /**
   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is required.
   */
  _groupRequired: toGroup(pseudoClasses._required),
  /**
   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is selected.
   */
  _groupSelected: toGroup(attributes._selected),
  /**
   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is user-invalid.
   */
  _groupUserInvalid: toGroup(pseudoClasses._userInvalid),
  /**
   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is valid.
   */
  _groupValid: toGroup(pseudoClasses._valid),
  /**
   * Styles to apply when a parent element with `role=group`, `data-group` or `.group` is vertical.
   */
  _groupVertical: toGroup(pseudoClasses._vertical)
};
var groupAttributeProperties = Object.keys(
  groupAttributes
);
var groupAttributeSelectors = Object.values(groupAttributes);
var peerAttributes = {
  /**
   * Styles to apply when a parent element with `data-peer` or `.peer` is accepted.
   */
  _peerAccept: toPeer(attributes._accept),
  /**
   * Styles to apply when a parent element with `data-peer` or `.peer` is active.
   */
  _peerActive: toPeer(pseudoClasses._active),
  /**
   * Styles to apply when a parent element with `data-peer` or `.peer` is blank.
   */
  _peerBlank: toPeer(pseudoClasses._blank),
  /**
   * Styles to apply when a parent element with `data-peer` or `.peer` is checked.
   */
  _peerChecked: toPeer(pseudoClasses._checked),
  /**
   * Styles to apply when a parent element with `data-peer` or `.peer` is disabled.
   */
  _peerDisabled: toPeer(pseudoClasses._disabled),
  /**
   * Styles to apply when a parent element with `data-peer` or `.peer` is enabled.
   */
  _peerEnabled: toPeer(pseudoClasses._enabled),
  /**
   * Styles to apply when a parent element with `data-peer` or `.peer` is expanded.
   */
  _peerExpanded: toPeer(attributes._expanded),
  /**
   * Styles to apply when a parent element with `data-peer` or `.peer` is focused.
   */
  _peerFocus: toPeer(pseudoClasses._focus),
  /**
   * Styles to apply when a parent element with `data-peer` or `.peer` is focused-visible.
   */
  _peerFocusVisible: toPeer(pseudoClasses._focusVisible),
  /**
   * Styles to apply when a parent element with `data-peer` or `.peer` is focus-within.
   */
  _peerFocusWithin: toPeer(pseudoClasses._focusWithin),
  /**
   * Styles to apply when a parent element with `data-peer` or `.peer` is grabbed.
   */
  _peerGrabbed: toPeer(attributes._grabbed),
  /**
   * Styles to apply when a parent element with `data-peer` or `.peer` is horizontal.
   */
  _peerHorizontal: toPeer(pseudoClasses._horizontal),
  /**
   * Styles to apply when a parent element with `data-peer` or `.peer` is hovered.
   */
  _peerHover: toPeer(pseudoClasses._hover),
  /**
   * Styles to apply when a parent element with `data-peer` or `.peer` is idle.
   */
  _peerIdle: toPeer(attributes._idle),
  /**
   * Styles to apply when a parent element with `data-peer` or `.peer` is invalid.
   */
  _peerInvalid: toPeer(pseudoClasses._invalid),
  /**
   * Styles to apply when a parent element with `data-peer` or `.peer` is loaded.
   */
  _peerLoaded: toPeer(attributes._loaded),
  /**
   * Styles to apply when a parent element with `data-peer` or `.peer` is loading.
   */
  _peerLoading: toPeer(attributes._loading),
  /**
   * Styles to apply when a parent element with `data-peer` or `.peer` is optional.
   */
  _peerOptional: toPeer(pseudoClasses._optional),
  /**
   * Styles to apply when a parent element with `data-peer` or `.peer` has a placeholder shown.
   */
  _peerPlaceholderShown: toPeer(pseudoClasses._placeholderShown),
  /**
   * Styles to apply when a parent element with `data-peer` or `.peer` is pressed.
   */
  _peerPressed: toPeer(attributes._pressed),
  /**
   * Styles to apply when a parent element with `data-peer` or `.peer` is read-only.
   */
  _peerReadOnly: toPeer(pseudoClasses._readOnly),
  /**
   * Styles to apply when a parent element with `data-peer` or `.peer` is read-write.
   */
  _peerReadWrite: toPeer(pseudoClasses._readWrite),
  /**
   * Styles to apply when a parent element with `data-peer` or `.peer` is rejected.
   */
  _peerReject: toPeer(attributes._reject),
  /**
   * Styles to apply when a parent element with `data-peer` or `.peer` is required.
   */
  _peerRequired: toPeer(pseudoClasses._required),
  /**
   * Styles to apply when a parent element with `data-peer` or `.peer` is selected.
   */
  _peerSelected: toPeer(attributes._selected),
  /**
   * Styles to apply when a parent element with `data-peer` or `.peer` is user-invalid.
   */
  _peerUserInvalid: toPeer(pseudoClasses._userInvalid),
  /**
   * Styles to apply when a parent element with `data-peer` or `.peer` is valid.
   */
  _peerValid: toPeer(pseudoClasses._valid),
  /**
   * Styles to apply when a parent element with `data-peer` or `.peer` is vertical.
   */
  _peerVertical: toPeer(pseudoClasses._vertical)
};
var peerAttributeProperties = Object.keys(
  peerAttributes
);
var peerAttributeSelectors = Object.values(peerAttributes);
var pseudos = {
  ...pseudoElements,
  ...attributes,
  ...pseudoClasses,
  ...atRules,
  ...groupAttributes,
  ...peerAttributes
};
var pseudoProperties = Object.keys(pseudos);
var pseudoSelectors = Object.values(pseudos);

// src/config/index.ts
var import_utils16 = require("@yamada-ui/utils");

// src/config/animation.ts
var import_react2 = require("@emotion/react");
var import_sheet = require("@emotion/sheet");
var import_utils2 = require("@yamada-ui/utils");

// src/config/utils.ts
var import_react = require("@emotion/react");
var import_utils = require("@yamada-ui/utils");
var globalValues = /* @__PURE__ */ new Set([
  "-moz-initial",
  "inherit",
  "initial",
  "none",
  "revert",
  "unset"
]);
function isCSSFunction(value) {
  return (0, import_utils.isString)(value) && value.includes("(") && value.includes(")");
}
function getCSSFunction(value) {
  var _a;
  const regex = /(^[a-z-A-Z]+)\((.*)\)/g;
  const [, type, values] = (_a = regex.exec(value)) != null ? _a : [];
  return { type, values };
}
function splitValues(values, cb = (current) => current === ",", addSeparator = false) {
  const result = [];
  let value = "";
  let depth = 0;
  for (let i = 0; i < values.length; i++) {
    const current = values[i];
    const prev = values[i - 1];
    const next = values[i + 1];
    if (current === "(") depth++;
    if (current === ")") depth--;
    if (!(0, import_utils.isUndefined)(current) && cb(current, prev, next) && depth === 0) {
      if (value) result.push(value.trim());
      if (addSeparator) result.push(current);
      value = "";
    } else {
      value += current;
    }
  }
  if (value) result.push(value.trim());
  return result.filter(Boolean);
}
function isCSSVar(value) {
  return /^var\(--.+\)$/.test(value);
}
function analyzeCSSValue(value) {
  let n = parseFloat(value.toString());
  const unit = value.toString().replace(String(n), "");
  return { isUnitless: !unit, unit, value };
}
function tokenToVar(token, value) {
  return function(theme) {
    var _a;
    const match = (0, import_utils.isString)(value) ? value.match(/fallback\(([^,)]+),?\s*([^]+)?\)/) : null;
    const [, resolvedValue, fallbackValue] = match != null ? match : [];
    if (resolvedValue) value = resolvedValue;
    const resolvedToken = `${token}.${value}`;
    if ((0, import_utils.isObject)(theme.__cssMap) && resolvedToken in theme.__cssMap) {
      return (_a = theme.__cssMap[resolvedToken]) == null ? void 0 : _a.ref;
    } else {
      return fallbackValue != null ? fallbackValue : value;
    }
  };
}
function mode(light, dark) {
  return function(colorMode = "light") {
    return colorMode === "light" ? light : dark;
  };
}
function keyframes(...arg) {
  return (0, import_react.keyframes)(...arg);
}
function combineFunctions(a, b) {
  return function(value, ...args) {
    return b(a(value, ...args), ...args);
  };
}
function pipe(...transformers) {
  return transformers.reduce(combineFunctions);
}

// src/config/animation.ts
var styleSheet = (0, import_utils2.createdDom)() ? new import_sheet.StyleSheet({ key: "css", container: document.head }) : void 0;
function transformAnimationValue(value) {
  return Object.entries(value).reduce((prev, [key, value2]) => {
    if (key === "duration") {
      prev.animationDuration = value2;
    } else if (key === "timingFunction") {
      prev.animationTimingFunction = value2;
    } else {
      prev[key] = value2;
    }
    return prev;
  }, {});
}
function animation(value, theme, css2, _prev) {
  if (value == null || globalValues.has(value)) return value;
  if ((0, import_utils2.isObject)(value)) {
    const {
      animationDuration = "0s",
      animationTimingFunction = "ease",
      delay = "0s",
      direction = "normal",
      fillMode = "none",
      iterationCount = "1",
      keyframes: keyframes2,
      playState = "running"
    } = css2(transformAnimationValue(value))(theme);
    const { name, styles: styles2 } = (0, import_react2.keyframes)(keyframes2);
    styleSheet == null ? void 0 : styleSheet.insert(styles2);
    return `${name} ${animationDuration} ${animationTimingFunction} ${delay} ${iterationCount} ${direction} ${fillMode} ${playState}`;
  } else if (value.includes(",")) {
    value = value.split(",").map((value2) => {
      value2 = value2.trim();
      value2 = tokenToVar("animations", value2)(theme);
      return value2;
    }).join(",");
    return value;
  } else {
    value = tokenToVar("animations", value)(theme);
    return value;
  }
}

// src/config/at-rule.ts
var import_utils4 = require("@yamada-ui/utils");
var generateAtRule = (identifier) => (values, theme) => {
  if (!(0, import_utils4.isArray)(values)) return values;
  return values.reduce(
    (prev, {
      type,
      name,
      css: css2,
      h,
      height,
      maxH,
      maxHeight,
      maxW,
      maxWidth,
      minH,
      minHeight,
      minW,
      minWidth,
      query,
      w,
      width,
      ...rest
    }) => {
      var _a;
      width != null ? width : width = w;
      minWidth != null ? minWidth : minWidth = minW;
      maxWidth != null ? maxWidth : maxWidth = maxW;
      height != null ? height : height = h;
      minHeight != null ? minHeight : minHeight = minH;
      maxHeight != null ? maxHeight : maxHeight = maxH;
      if (!query) {
        const resolvedRest = (0, import_utils4.filterUndefined)({
          height,
          maxHeight,
          maxWidth,
          minHeight,
          minWidth,
          width,
          ...rest
        });
        query = Object.entries(resolvedRest).map(([key, value]) => {
          value = tokenToVar("sizes", value)(theme);
          return `(${(0, import_utils4.toKebabCase)(key)}: ${value})`;
        }).join(" and ");
      }
      const condition = `@${identifier} ${(_a = type != null ? type : name) != null ? _a : ""} ${query}`;
      prev[condition] = css2;
      return prev;
    },
    {}
  );
};

// src/config/calc.ts
var import_utils6 = require("@yamada-ui/utils");
var OPERATORS = ["+", "-", "*", "/"];
function getValue(value, fallbackValue = "") {
  return function(token, theme, ...rest) {
    var _a;
    if (!value) return fallbackValue;
    const prevent = isCSSFunction(value);
    if (prevent) {
      return generateCalc(token)(value, theme, ...rest);
    } else {
      if ((0, import_utils6.isNumeric)(value)) return value;
      const resolvedToken = `${token}.${value}`;
      return theme.__cssMap && resolvedToken in theme.__cssMap ? (_a = theme.__cssMap[resolvedToken]) == null ? void 0 : _a.ref : value;
    }
  };
}
function isOperator(value) {
  return new RegExp(`\\s[${OPERATORS.join("\\")}]\\s`).test(value);
}
function generateCalc(token) {
  return function(value, theme, ...rest) {
    if (value == null || globalValues.has(value)) return value;
    const prevent = isCSSFunction(value);
    if (!prevent) return value;
    let { type, values } = getCSSFunction(value);
    if (!type || !values) return value;
    switch (type) {
      case "calc": {
        const computedValues = splitValues(
          values,
          (char, prev, next) => isOperator(`${prev}${char}${next}`),
          true
        ).map((value2) => {
          if (value2 && OPERATORS.includes(value2)) return value2;
          return getValue(value2)(token, theme, ...rest);
        });
        return `calc(${computedValues.join(" ")})`;
      }
      case "min":
      case "max": {
        let [firstValue, secondValue, ...otherValues] = splitValues(values);
        firstValue = getValue(firstValue, "100%")(token, theme, ...rest);
        secondValue = getValue(secondValue, "100%")(token, theme, ...rest);
        otherValues = otherValues.map(
          (value2) => getValue(value2)(token, theme, ...rest)
        );
        return `${type}(${firstValue}, ${secondValue}` + (otherValues.length ? `, ${otherValues.join(", ")}` : "") + ")";
      }
      case "clamp": {
        let [min, preferred, max] = splitValues(values);
        if (!max) {
          max = preferred;
          preferred = "";
        }
        min = getValue(min)(token, theme, ...rest);
        preferred = getValue(preferred, "100%")(token, theme, ...rest);
        max = getValue(max)(token, theme, ...rest);
        return `clamp(${min}, ${preferred}, ${max})`;
      }
      case "minmax": {
        let [min, max] = splitValues(values);
        min = getValue(min)(token, theme, ...rest);
        max = getValue(max)(token, theme, ...rest);
        return `minmax(${min}, ${max})`;
      }
      case "fit-content": {
        let [value2] = splitValues(values);
        value2 = getValue(value2)(token, theme, ...rest);
        return `fit-content(${value2})`;
      }
      default:
        return value;
    }
  };
}

// src/config/color-mix.ts
var DEFAULT_METHOD = "in srgb";
var methods = {
  "a98-rgb": "in a98-rgb",
  "display-p3": "in display-p3",
  lab: "in lab",
  oklab: "in oklab",
  "prophoto-rgb": "in prophoto-rgb",
  rec2020: "in rec2020",
  srgb: "in srgb",
  "srgb-linear": "in srgb-linear",
  xyz: "in xyz",
  "xyz-d50": "in xyz-d50",
  "xyz-d65": "in xyz-d65"
};
function getColor(value, theme) {
  var _a;
  if (!value) return "";
  let [color, percent, ...rest] = value.split(" ").filter(Boolean);
  if (rest.length) return value;
  const token = `colors.${color}`;
  color = theme.__cssMap && token in theme.__cssMap ? (_a = theme.__cssMap[token]) == null ? void 0 : _a.ref : color;
  if (percent && !percent.endsWith("%")) percent = `${percent}%`;
  return !percent ? color : `${color} ${percent}`;
}
function colorMix(value, theme, _css, _prev) {
  if (value == null || globalValues.has(value)) return value;
  const prevent = isCSSFunction(value);
  if (!prevent) return value;
  const { type, values } = getCSSFunction(value);
  if (!values) return value;
  switch (type) {
    case "mix":
    case "color-mix": {
      let [color2, color1, method] = splitValues(values).reverse();
      if (method) {
        method = method in methods ? methods[method] : method;
      } else {
        method = DEFAULT_METHOD;
      }
      color1 = getColor(color1, theme);
      color2 = getColor(color2, theme);
      return `color-mix(${method}` + (color1 ? `, ${color1}` : "") + (color2 ? `, ${color2}` : "") + ")";
    }
    case "tint":
    case "shade":
    case "transparentize": {
      const [color, percent] = splitValues(values);
      const color1 = getColor(`${color} ${percent}`, theme);
      const color2 = type === "transparentize" ? "transparent" : type === "tint" ? "#fff" : "#000";
      return `color-mix(${DEFAULT_METHOD}, ${color1}, ${color2})`;
    }
    case "tone": {
      const [color, tone] = splitValues(values);
      const color1 = getColor(color, theme);
      if (!tone) return color1;
      let ratio = parseInt(tone) || 500;
      if (ratio < 50 && 950 < ratio) ratio = 500;
      if (ratio === 500) return color1;
      const color2 = ratio < 500 ? "#fff" : "#000";
      const percent = `${100 - Math.abs(ratio - 500) * 2 / 10}%`;
      return `color-mix(${DEFAULT_METHOD}, ${color1} ${percent}, ${color2})`;
    }
    default:
      return value;
  }
}

// src/config/filter.ts
function generateFilter(type = "filter") {
  return function(value) {
    if (value !== "auto") return value;
    if (type === "filter") {
      return [
        "var(--ui-blur, /*!*/ /*!*/)",
        "var(--ui-brightness, /*!*/ /*!*/)",
        "var(--ui-contrast, /*!*/ /*!*/)",
        "var(--ui-drop-shadow, /*!*/ /*!*/)",
        "var(--ui-grayscale, /*!*/ /*!*/)",
        "var(--ui-hue-rotate, /*!*/ /*!*/)",
        "var(--ui-invert, /*!*/ /*!*/)",
        "var(--ui-opacity, /*!*/ /*!*/)",
        "var(--ui-saturate, /*!*/ /*!*/)",
        "var(--ui-sepia, /*!*/ /*!*/)"
      ].join(" ");
    } else {
      return [
        "var(--ui-backdrop-blur, /*!*/ /*!*/)",
        "var(--ui-backdrop-brightness, /*!*/ /*!*/)",
        "var(--ui-backdrop-contrast, /*!*/ /*!*/)",
        "var(--ui-backdrop-drop-shadow, /*!*/ /*!*/)",
        "var(--ui-backdrop-grayscale, /*!*/ /*!*/)",
        "var(--ui-backdrop-hue-rotate, /*!*/ /*!*/)",
        "var(--ui-backdrop-invert, /*!*/ /*!*/)",
        "var(--ui-backdrop-opacity, /*!*/ /*!*/)",
        "var(--ui-backdrop-saturate, /*!*/ /*!*/)",
        "var(--ui-backdrop-sepia, /*!*/ /*!*/)"
      ].join(" ");
    }
  };
}

// src/config/function.ts
function generateFunction(func) {
  return function(value) {
    return `${func}(${value})`;
  };
}

// src/config/gradient.ts
var import_utils9 = require("@yamada-ui/utils");
var directions = {
  "to-b": "to bottom",
  "to-bl": "to bottom left",
  "to-br": "to bottom right",
  "to-l": "to left",
  "to-r": "to right",
  "to-t": "to top",
  "to-tl": "to top left",
  "to-tr": "to top right"
};
var directionValues = new Set(Object.values(directions));
function gradient(value, theme, _css, _prev) {
  if (value == null || globalValues.has(value)) return value;
  const prevent = isCSSFunction(value);
  if (!prevent) return `url('${value}')`;
  let { type, values } = getCSSFunction(value);
  if (!type || !values) return value;
  type = type.includes("-gradient") ? type : `${type}-gradient`;
  const [maybeDirection, ...colors] = splitValues(values);
  if (!colors.length) return value;
  const direction = maybeDirection && maybeDirection in directions ? directions[maybeDirection] : maybeDirection;
  if (!(0, import_utils9.isUndefined)(direction)) colors.unshift(direction);
  const computedValues = colors.map((_color) => {
    var _a, _b;
    if ((0, import_utils9.isUndefined)(_color)) return _color;
    if (directionValues.has(_color)) return _color;
    const i = _color.indexOf(" ");
    let [color, _ratio] = i !== -1 ? [_color.slice(0, i), _color.slice(i + 1)] : [_color];
    const ratio = isCSSFunction(_ratio) ? _ratio : _ratio == null ? void 0 : _ratio.split(" ");
    const token = `colors.${color}`;
    color = theme.__cssMap && token in theme.__cssMap ? (_b = (_a = theme.__cssMap[token]) == null ? void 0 : _a.ref) != null ? _b : color : color;
    if (ratio) {
      return [color, ...(0, import_utils9.isArray)(ratio) ? ratio : [ratio]].join(" ");
    } else {
      return color;
    }
  });
  return `${type}(${computedValues.join(", ")})`;
}

// src/config/grid.ts
var repeats = {
  fill: "auto-fill",
  fit: "auto-fit"
};
function grid(value, theme, css2, prev) {
  if (value == null || globalValues.has(value)) return value;
  const values = splitValues(value, (current) => current === " ");
  if (!values.length) return value;
  const computedValues = values.map((value2) => {
    var _a, _b;
    const prevent = isCSSFunction(value2);
    if (!prevent) {
      const token = `sizes.${value2}`;
      return theme.__cssMap && token in theme.__cssMap ? (_b = (_a = theme.__cssMap[token]) == null ? void 0 : _a.ref) != null ? _b : value2 : value2;
    }
    const { type, values: values2 } = getCSSFunction(value2);
    if (!type || !values2) return value2;
    if (type === "repeat") {
      let [repeat, tracks] = splitValues(values2);
      repeat = repeat && repeat in repeats ? repeats[repeat] : repeat;
      tracks = grid(tracks, theme, css2, prev);
      return `repeat(${repeat}, ${tracks})`;
    } else {
      return generateCalc("sizes")(value2, theme, css2, prev);
    }
  });
  return computedValues.join(" ");
}

// src/config/styles.ts
var import_utils12 = require("@yamada-ui/utils");
function generateStyles(prefix) {
  return function(value, theme, _css, prev = {}) {
    const resolvedCSS = {};
    const style = (0, import_utils12.getMemoizedObject)(
      theme,
      prefix ? `styles.${prefix}.${value}` : `styles.${value}`,
      {}
    );
    for (const prop in style) {
      const done = prop in prev && prev[prop] != null;
      if (!done) resolvedCSS[prop] = style[prop];
    }
    return resolvedCSS;
  };
}

// src/config/token.ts
function generateToken(token) {
  return function(value, theme) {
    return tokenToVar(token, value)(theme);
  };
}

// src/config/transform.ts
var transformValues = [
  "rotate(var(--ui-rotate, 0))",
  "scaleX(var(--ui-scale-x, 1))",
  "scaleY(var(--ui-scale-y, 1))",
  "skewX(var(--ui-skew-x, 0))",
  "skewY(var(--ui-skew-y, 0))"
];
function transform(value, _theme, _css, _prev) {
  if (value === "auto")
    return [
      "translateX(var(--ui-translate-x, 0))",
      "translateY(var(--ui-translate-y, 0))",
      ...transformValues
    ].join(" ");
  if (value === "auto-3d")
    return [
      "translate3d(var(--ui-translate-x, 0), var(--ui-translate-y, 0), 0)",
      ...transformValues
    ].join(" ");
  return value;
}

// src/config/vars.ts
var import_utils14 = require("@yamada-ui/utils");

// src/constant.ts
var DEFAULT_VAR_PREFIX = "ui";
var DEFAULT_LOCALE = "en-US";
var DEFAULT_DIRECTION = "ltr";

// src/config/vars.ts
function insertObject(obj, segments, value) {
  var _a;
  if (segments.length === 0) return value;
  const [head, ...rest] = segments;
  if (!(0, import_utils14.isUndefined)(head)) obj[head] = insertObject((_a = obj[head]) != null ? _a : {}, rest, value);
  return obj;
}
function valueToToken(token, value) {
  return function(theme) {
    const flattedObj = (0, import_utils14.flattenObject)(value);
    return Object.entries(flattedObj).reduce((prev, [path, value2]) => {
      const segments = path.split(".");
      if ((0, import_utils14.isArray)(value2)) {
        value2 = value2.map((value3) => tokenToVar(token, value3)(theme));
      } else {
        value2 = tokenToVar(token, value2)(theme);
      }
      insertObject(prev, segments, value2);
      return prev;
    }, {});
  };
}
function replaceValue(token, value) {
  return function(theme) {
    if (!token) return value;
    if ((0, import_utils14.isObject)(value)) {
      value = Object.entries(value).reduce((prev, [key, value2]) => {
        if ((0, import_utils14.isObject)(value2)) {
          prev[key] = valueToToken(token, value2)(theme);
        } else if ((0, import_utils14.isArray)(value2)) {
          prev[key] = value2.map((value3) => {
            if ((0, import_utils14.isObject)(value3)) {
              return valueToToken(token, value3)(theme);
            } else {
              return tokenToVar(token, value3)(theme);
            }
          });
        } else {
          prev[key] = tokenToVar(token, value2)(theme);
        }
        return prev;
      }, {});
    } else if ((0, import_utils14.isArray)(value)) {
      value = value.map((value2) => {
        if ((0, import_utils14.isObject)(value2)) {
          return valueToToken(token, value2)(theme);
        } else {
          return tokenToVar(token, value2)(theme);
        }
      });
    } else {
      value = tokenToVar(token, value)(theme);
    }
    return value;
  };
}
function vars(values, theme, _css, _prev) {
  if (!(0, import_utils14.isArray)(values)) return values;
  return values.reduce((prev, { name, token, value, __prefix }) => {
    var _a, _b, _c;
    const prefix = (_c = __prefix != null ? __prefix : (_b = (_a = theme.__config) == null ? void 0 : _a.var) == null ? void 0 : _b.prefix) != null ? _c : DEFAULT_VAR_PREFIX;
    name = `--${prefix}-${name}`;
    prev[name] = replaceValue(token, value)(theme);
    return prev;
  }, {});
}

// src/config/index.ts
var transforms = {
  animation,
  bgClip: (value) => {
    if (value === "text") {
      return { backgroundClip: "text", color: "transparent" };
    } else {
      return { backgroundClip: value };
    }
  },
  calc: generateCalc,
  colorMix,
  container: generateAtRule("container"),
  content: (value) => {
    if ((0, import_utils16.isObject)(value)) {
      return { content: "''", ...value };
    } else {
      return value;
    }
  },
  deg: (value) => {
    if (isCSSVar(value) || value == null) return value;
    const isUnitless = typeof value === "string" && !value.endsWith("deg");
    return isUnitless || (0, import_utils16.isNumber)(value) ? `${value}deg` : value;
  },
  filter: generateFilter,
  fraction: (value) => {
    if ((0, import_utils16.isNumber)(value) && value <= 1) value = `${value * 100}%`;
    return value;
  },
  function: generateFunction,
  gradient,
  grid,
  isTruncated: (value) => {
    if (value) {
      return {
        overflow: "hidden",
        textOverflow: "ellipsis",
        whiteSpace: "nowrap"
      };
    }
  },
  media: generateAtRule("media"),
  px: (value) => {
    if (value == null) return value;
    const { isUnitless } = analyzeCSSValue(value);
    return isUnitless || (0, import_utils16.isNumber)(value) ? `${value}px` : value;
  },
  styles: generateStyles,
  supports: generateAtRule("supports"),
  token: generateToken,
  transform,
  vars
};

// src/styles.ts
var standardStyles = {
  accentColor: {
    properties: "accentColor",
    token: "colors",
    transform: pipe(transforms.token("colors"), transforms.colorMix)
  },
  alignContent: true,
  alignItems: true,
  alignmentBaseline: true,
  alignSelf: true,
  all: true,
  animation: {
    properties: "animation",
    token: "animations",
    transform: pipe(transforms.token("animations"), transforms.animation)
  },
  animationComposition: true,
  animationDelay: true,
  animationDirection: true,
  animationDuration: {
    properties: "animationDuration",
    token: "transitions.duration",
    transform: transforms.token("transitions.duration")
  },
  animationFillMode: true,
  animationIterationCount: true,
  animationName: true,
  animationPlayState: true,
  animationRange: true,
  animationRangeEnd: true,
  ani