@yamada-ui/react 2.2.5-dev-20260722112946 → 2.2.5-dev-20260725054331

package/dist/cjs/components/color-swatch/color-swatch.cjs

@@ -7,10 +7,10 @@ let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/color-swatch/color-swatch.tsx
 const checkersProps = {
 	bgImage: [
-		"linear-gradient(45deg, {checkers-fg} 25%, transparent 25%)",
-		"linear-gradient(-45deg, {checkers-fg} 25%, transparent 25%)",
-		"linear-gradient(45deg, transparent 75%, {checkers-fg} 75%)",
-		"linear-gradient(-45deg, {checkers-bg} 75%, {checkers-fg} 75%)"
+		"linear(45deg, {checkers-fg} 25%, transparent 25%)",
+		"linear(-45deg, {checkers-fg} 25%, transparent 25%)",
+		"linear(45deg, transparent 75%, {checkers-fg} 75%)",
+		"linear(-45deg, {checkers-bg} 75%, {checkers-fg} 75%)"
 	].join(", "),
 	bgPosition: `0 0, 0 4px, 4px -4px, -4px 0`,
 	bgSize: `8px 8px`

package/dist/cjs/components/color-swatch/color-swatch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"color-swatch.cjs","names":["createSlotComponent","colorSwatchStyle","styled"],"sources":["../../../../src/components/color-swatch/color-swatch.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ColorSwatchStyle } from \"./color-swatch.style\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { isString } from \"../../utils\"\nimport { colorSwatchStyle } from \"./color-swatch.style\"\n\nexport const checkersProps: HTMLStyledProps = {\n  bgImage: [\n    \"linear-gradient(45deg, {checkers-fg} 25%, transparent 25%)\",\n    \"linear-gradient(-45deg, {checkers-fg} 25%, transparent 25%)\",\n    \"linear-gradient(45deg, transparent 75%, {checkers-fg} 75%)\",\n    \"linear-gradient(-45deg, {checkers-bg} 75%, {checkers-fg} 75%)\",\n  ].join(\", \"),\n  bgPosition: `0 0, 0 4px, 4px -4px, -4px 0`,\n  bgSize: `8px 8px`,\n}\n\nconst defaultLayers = (\n  background: CSSProps[\"color\"],\n  withShadow: boolean,\n): HTMLStyledProps[] => {\n  const layers: HTMLStyledProps[] = [checkersProps, { background }]\n\n  if (withShadow) layers.push({ boxShadow: \"inner\" })\n\n  return layers\n}\n\nexport interface ColorSwatchProps\n  extends Omit<HTMLStyledProps, \"color\">, ThemeProps<ColorSwatchStyle> {\n  /**\n   * The color used for the swatch element.\n   *\n   * @default '#ffffff00'\n   */\n  color?: CSSProps[\"color\"]\n  /**\n   * The overlay used for the swatch element.\n   */\n  layers?: HTMLStyledProps[]\n  /**\n   * If `true`, the swatch element has an inner `box-shadow`.\n   *\n   * @default true\n   */\n  withShadow?: boolean\n}\n\nconst {\n  PropsContext: ColorSwatchPropsContext,\n  usePropsContext: useColorSwatchPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ColorSwatchProps, ColorSwatchStyle>(\n  \"color-swatch\",\n  colorSwatchStyle,\n)\n\nexport { ColorSwatchPropsContext, useColorSwatchPropsContext }\n\n/**\n * `ColorSwatch` is a component that displays color samples.\n *\n * @see https://yamada-ui.com/docs/components/color-swatch\n */\nexport const ColorSwatch = withProvider<\"div\", ColorSwatchProps>(\n  ({\n    children,\n    color = \"#ffffff00\",\n    withShadow = true,\n    layers = defaultLayers(color, withShadow),\n    ...rest\n  }) => {\n    return (\n      <styled.div\n        aria-label={isString(color) ? color : undefined}\n        aria-roledescription=\"color swatch\"\n        role=\"img\"\n        {...rest}\n      >\n        {children}\n        {layers.map((props, index) => (\n          <ColorSwatchOverlay key={index} {...props} />\n        ))}\n      </styled.div>\n    )\n  },\n  \"root\",\n)()\n\nexport interface ColorSwatchOverlayProps extends HTMLStyledProps {}\n\nexport const ColorSwatchOverlay = withContext<\"div\", ColorSwatchOverlayProps>(\n  \"div\",\n  \"overlay\",\n)()\n"],"mappings":";;;;;;;AAQA,MAAa,gBAAiC;CAC5C,SAAS;EACP;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,IAAI;CACX,YAAY;CACZ,QAAQ;AACV;AAEA,MAAM,iBACJ,YACA,eACsB;CACtB,MAAM,SAA4B,CAAC,eAAe,EAAE,WAAW,CAAC;CAEhE,IAAI,YAAY,OAAO,KAAK,EAAE,WAAW,QAAQ,CAAC;CAElD,OAAO;AACT;AAsBA,MAAM,EACJ,cAAc,yBACd,iBAAiB,4BACjB,aACA,iBACEA,yBAAAA,oBACF,gBACAC,2BAAAA,gBACF;;;;;;AASA,MAAa,cAAc,cACxB,EACC,UACA,QAAQ,aACR,aAAa,MACb,SAAS,cAAc,OAAO,UAAU,GACxC,GAAG,WACC;CACJ,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,gBAAAA,OAAO,KAAR;EACE,eAAA,GAAA,oBAAA,cAAA,SAAA,CAAqB,KAAK,IAAI,QAAQ,KAAA;EACtC,wBAAqB;EACrB,MAAK;EACL,GAAI;YAJN,CAMG,UACA,OAAO,KAAK,OAAO,UAClB,iBAAA,GAAA,kBAAA,IAAA,CAAC,oBAAD,EAAgC,GAAI,MAAQ,GAAnB,KAAmB,CAC7C,CACS;;AAEhB,GACA,MACF,CAAC,CAAC;AAIF,MAAa,qBAAqB,YAChC,OACA,SACF,CAAC,CAAC"}
+{"version":3,"file":"color-swatch.cjs","names":["createSlotComponent","colorSwatchStyle","styled"],"sources":["../../../../src/components/color-swatch/color-swatch.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ColorSwatchStyle } from \"./color-swatch.style\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { isString } from \"../../utils\"\nimport { colorSwatchStyle } from \"./color-swatch.style\"\n\nexport const checkersProps: HTMLStyledProps = {\n  bgImage: [\n    \"linear(45deg, {checkers-fg} 25%, transparent 25%)\",\n    \"linear(-45deg, {checkers-fg} 25%, transparent 25%)\",\n    \"linear(45deg, transparent 75%, {checkers-fg} 75%)\",\n    \"linear(-45deg, {checkers-bg} 75%, {checkers-fg} 75%)\",\n  ].join(\", \"),\n  bgPosition: `0 0, 0 4px, 4px -4px, -4px 0`,\n  bgSize: `8px 8px`,\n}\n\nconst defaultLayers = (\n  background: CSSProps[\"color\"],\n  withShadow: boolean,\n): HTMLStyledProps[] => {\n  const layers: HTMLStyledProps[] = [checkersProps, { background }]\n\n  if (withShadow) layers.push({ boxShadow: \"inner\" })\n\n  return layers\n}\n\nexport interface ColorSwatchProps\n  extends Omit<HTMLStyledProps, \"color\">, ThemeProps<ColorSwatchStyle> {\n  /**\n   * The color used for the swatch element.\n   *\n   * @default '#ffffff00'\n   */\n  color?: CSSProps[\"color\"]\n  /**\n   * The overlay used for the swatch element.\n   */\n  layers?: HTMLStyledProps[]\n  /**\n   * If `true`, the swatch element has an inner `box-shadow`.\n   *\n   * @default true\n   */\n  withShadow?: boolean\n}\n\nconst {\n  PropsContext: ColorSwatchPropsContext,\n  usePropsContext: useColorSwatchPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ColorSwatchProps, ColorSwatchStyle>(\n  \"color-swatch\",\n  colorSwatchStyle,\n)\n\nexport { ColorSwatchPropsContext, useColorSwatchPropsContext }\n\n/**\n * `ColorSwatch` is a component that displays color samples.\n *\n * @see https://yamada-ui.com/docs/components/color-swatch\n */\nexport const ColorSwatch = withProvider<\"div\", ColorSwatchProps>(\n  ({\n    children,\n    color = \"#ffffff00\",\n    withShadow = true,\n    layers = defaultLayers(color, withShadow),\n    ...rest\n  }) => {\n    return (\n      <styled.div\n        aria-label={isString(color) ? color : undefined}\n        aria-roledescription=\"color swatch\"\n        role=\"img\"\n        {...rest}\n      >\n        {children}\n        {layers.map((props, index) => (\n          <ColorSwatchOverlay key={index} {...props} />\n        ))}\n      </styled.div>\n    )\n  },\n  \"root\",\n)()\n\nexport interface ColorSwatchOverlayProps extends HTMLStyledProps {}\n\nexport const ColorSwatchOverlay = withContext<\"div\", ColorSwatchOverlayProps>(\n  \"div\",\n  \"overlay\",\n)()\n"],"mappings":";;;;;;;AAQA,MAAa,gBAAiC;CAC5C,SAAS;EACP;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,IAAI;CACX,YAAY;CACZ,QAAQ;AACV;AAEA,MAAM,iBACJ,YACA,eACsB;CACtB,MAAM,SAA4B,CAAC,eAAe,EAAE,WAAW,CAAC;CAEhE,IAAI,YAAY,OAAO,KAAK,EAAE,WAAW,QAAQ,CAAC;CAElD,OAAO;AACT;AAsBA,MAAM,EACJ,cAAc,yBACd,iBAAiB,4BACjB,aACA,iBACEA,yBAAAA,oBACF,gBACAC,2BAAAA,gBACF;;;;;;AASA,MAAa,cAAc,cACxB,EACC,UACA,QAAQ,aACR,aAAa,MACb,SAAS,cAAc,OAAO,UAAU,GACxC,GAAG,WACC;CACJ,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,gBAAAA,OAAO,KAAR;EACE,eAAA,GAAA,oBAAA,cAAA,SAAA,CAAqB,KAAK,IAAI,QAAQ,KAAA;EACtC,wBAAqB;EACrB,MAAK;EACL,GAAI;YAJN,CAMG,UACA,OAAO,KAAK,OAAO,UAClB,iBAAA,GAAA,kBAAA,IAAA,CAAC,oBAAD,EAAgC,GAAI,MAAQ,GAAnB,KAAmB,CAC7C,CACS;;AAEhB,GACA,MACF,CAAC,CAAC;AAIF,MAAa,qBAAqB,YAChC,OACA,SACF,CAAC,CAAC"}

package/dist/cjs/components/modal/modal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"modal.cjs","names":["createSlotComponent","modalStyle","useSplitChildren","useModal","AnimatePresence","Portal","FocusLock","RemoveScroll","styled","CloseButton","useValue","motion","fadeVariants","usePopupAnimationProps","wrapOrPassProps","Button"],"sources":["../../../../src/components/modal/modal.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ButtonProps } from \"../button\"\nimport type { CloseButtonProps } from \"../close-button\"\nimport type { FocusLockProps } from \"../focus-lock\"\nimport type { HTMLMotionProps, HTMLMotionPropsWithoutAs } from \"../motion\"\nimport type { UsePopupAnimationProps } from \"../popover\"\nimport type { PortalProps } from \"../portal\"\nimport type { ModalStyle } from \"./modal.style\"\nimport type { UseModalProps, UseModalReturn } from \"./use-modal\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { RemoveScroll } from \"react-remove-scroll\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { cast, isArray, useSplitChildren, wrapOrPassProps } from \"../../utils\"\nimport { Button } from \"../button\"\nimport { CloseButton } from \"../close-button\"\nimport { fadeVariants } from \"../fade\"\nimport { FocusLock } from \"../focus-lock\"\nimport { motion } from \"../motion\"\nimport { usePopupAnimationProps } from \"../popover\"\nimport { Portal } from \"../portal\"\nimport { modalStyle } from \"./modal.style\"\nimport { useModal } from \"./use-modal\"\n\ninterface ComponentContext\n  extends\n    Omit<UseModalReturn, \"getRootProps\">,\n    UsePopupAnimationProps,\n    Pick<ModalRootProps, \"withCloseButton\"> {}\n\nexport interface ModalRootProps\n  extends\n    ThemeProps<ModalStyle>,\n    Omit<UseModalProps, \"title\">,\n    Pick<\n      FocusLockProps,\n      | \"autoFocus\"\n      | \"finalFocusRef\"\n      | \"initialFocusRef\"\n      | \"lockFocusAcrossFrames\"\n      | \"restoreFocus\"\n    >,\n    UsePopupAnimationProps,\n    ShorthandModalContentProps {\n  /**\n   * Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.\n   *\n   * @default false.\n   */\n  allowPinchZoom?: boolean\n  /**\n   * If `true`, scrolling will be disabled on the `body` when the modal opens.\n   *\n   * @default true\n   */\n  blockScrollOnMount?: boolean\n  /**\n   * The modal trigger to use.\n   */\n  trigger?: ReactNode\n  /**\n   * If `true`, display the modal close button.\n   *\n   * @default true\n   */\n  withCloseButton?: boolean\n  /**\n   * If `true`, display the modal overlay.\n   *\n   * @default true\n   */\n  withOverlay?: boolean\n  /**\n   * Props to be forwarded to the portal component.\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n  /**\n   * Callback function to run side effects after the modal has closed.\n   */\n  onCloseComplete?: () => void\n}\n\nconst {\n  ComponentContext,\n  PropsContext: ModalPropsContext,\n  useComponentContext,\n  usePropsContext: useModalPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ModalRootProps, ModalStyle, ComponentContext>(\n  \"modal\",\n  modalStyle,\n)\n\nexport { ModalPropsContext, useModalPropsContext }\n\n/**\n * `Modal` is a component that is displayed over the main content to focus the user's attention solely on the information.\n *\n * @see https://yamada-ui.com/docs/components/modal\n */\nexport const ModalRoot = withProvider<\"div\", ModalRootProps>(\n  ({\n    allowPinchZoom = false,\n    animationScheme = \"scale\",\n    autoFocus,\n    blockScrollOnMount = true,\n    body,\n    cancel,\n    children,\n    duration,\n    finalFocusRef,\n    footer,\n    header,\n    initialFocusRef,\n    lockFocusAcrossFrames = true,\n    middle,\n    restoreFocus,\n    success,\n    title,\n    trigger,\n    withCloseButton = true,\n    withOverlay = true,\n    portalProps,\n    onCancel,\n    onCloseComplete,\n    onMiddle,\n    onSuccess,\n    ...props\n  }) => {\n    const [omittedChildren, openTrigger, customOverlay] = useSplitChildren(\n      children,\n      ModalOpenTrigger,\n      ModalOverlay,\n    )\n    const hasChildren = isArray(omittedChildren) && !!omittedChildren.length\n    const { open, getRootProps, ...rest } = useModal(props)\n    const customOpenTrigger = trigger ? (\n      <ModalOpenTrigger>{trigger}</ModalOpenTrigger>\n    ) : null\n    const context = useMemo(\n      () => ({\n        animationScheme,\n        duration,\n        open,\n        withCloseButton,\n        ...rest,\n      }),\n      [animationScheme, duration, open, withCloseButton, rest],\n    )\n\n    return (\n      <ComponentContext value={context}>\n        {openTrigger ?? customOpenTrigger}\n\n        <AnimatePresence onExitComplete={onCloseComplete}>\n          {open ? (\n            <Portal {...portalProps}>\n              <FocusLock\n                autoFocus={autoFocus}\n                finalFocusRef={finalFocusRef}\n                initialFocusRef={initialFocusRef}\n                lockFocusAcrossFrames={lockFocusAcrossFrames}\n                restoreFocus={restoreFocus}\n              >\n                <RemoveScroll\n                  allowPinchZoom={allowPinchZoom}\n                  enabled={blockScrollOnMount}\n                  forwardProps\n                >\n                  <styled.div {...getRootProps()}>\n                    {customOverlay ?? (withOverlay ? <ModalOverlay /> : null)}\n\n                    {hasChildren ? (\n                      omittedChildren\n                    ) : (\n                      <ShorthandModalContent\n                        body={body}\n                        cancel={cancel}\n                        footer={footer}\n                        header={header}\n                        middle={middle}\n                        success={success}\n                        title={title}\n                        onCancel={onCancel}\n                        onMiddle={onMiddle}\n                        onSuccess={onSuccess}\n                      />\n                    )}\n                  </styled.div>\n                </RemoveScroll>\n              </FocusLock>\n            </Portal>\n          ) : null}\n        </AnimatePresence>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n)()\n\nexport interface ModalOpenTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalOpenTrigger = withContext<\"button\", ModalOpenTriggerProps>(\n  \"button\",\n  { name: \"OpenTrigger\", slot: [\"trigger\", \"open\"] },\n)(undefined, (props) => {\n  const { getOpenTriggerProps } = useComponentContext()\n\n  return { asChild: true, ...getOpenTriggerProps(props) }\n})\n\nexport interface ModalCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalCloseTrigger = withContext<\"button\", ModalCloseTriggerProps>(\n  \"button\",\n  { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] },\n)(undefined, (props) => {\n  const { getCloseTriggerProps } = useComponentContext()\n\n  return { asChild: true, ...getCloseTriggerProps(props) }\n})\n\nexport interface ModalCloseButtonProps extends CloseButtonProps {}\n\nexport const ModalCloseButton = withContext<\"button\", ModalCloseButtonProps>(\n  CloseButton,\n  \"closeButton\",\n)(undefined, (props) => {\n  const { getCloseButtonProps } = useComponentContext()\n\n  return { ...getCloseButtonProps(props) }\n})\n\nexport interface ModalOverlayProps extends HTMLMotionProps {}\n\nexport const ModalOverlay = withContext<\"div\", ModalOverlayProps>((props) => {\n  const {\n    animationScheme,\n    duration: durationProp,\n    getOverlayProps,\n  } = useComponentContext()\n  const duration = useValue(durationProp)\n\n  return (\n    <motion.div\n      custom={{ duration }}\n      {...(animationScheme !== \"none\"\n        ? {\n            animate: \"enter\",\n            exit: \"exit\",\n            initial: \"exit\",\n            variants: fadeVariants,\n          }\n        : {})}\n      {...cast<HTMLMotionProps>(getOverlayProps(cast<HTMLProps>(props)))}\n    />\n  )\n}, \"overlay\")()\n\nexport interface ModalContentProps\n  extends Omit<HTMLMotionProps<\"section\">, \"children\">, PropsWithChildren {}\n\nexport const ModalContent = withContext<\"section\", ModalContentProps>(\n  ({ children, ...rest }) => {\n    const { animationScheme, duration, withCloseButton, getContentProps } =\n      useComponentContext()\n    const [omittedChildren, customCloseButton] = useSplitChildren(\n      children,\n      ModalCloseButton,\n    )\n    const popupAnimationProps = usePopupAnimationProps({\n      animationScheme,\n      duration,\n    })\n\n    return (\n      <motion.section\n        {...popupAnimationProps}\n        {...cast<HTMLMotionPropsWithoutAs<\"section\">>(\n          getContentProps(cast<HTMLProps<\"section\">>(rest)),\n        )}\n      >\n        {customCloseButton ?? (withCloseButton ? <ModalCloseButton /> : null)}\n\n        {omittedChildren}\n      </motion.section>\n    )\n  },\n  \"content\",\n)()\n\ninterface ShorthandModalContentProps {\n  /**\n   * The modal body to use.\n   */\n  body?: ModalBodyProps | ReactNode\n  /**\n   * The modal cancel button to use.\n   */\n  cancel?: ButtonProps | ReactNode\n  /**\n   * The modal footer to use.\n   */\n  footer?: ModalFooterProps | ReactNode\n  /**\n   * The modal header to use.\n   */\n  header?: ModalHeaderProps | ReactNode\n  /**\n   * The modal middle button to use.\n   */\n  middle?: ButtonProps | ReactNode\n  /**\n   * The modal success button to use.\n   */\n  success?: ButtonProps | ReactNode\n  /**\n   * The modal title to use.\n   */\n  title?: ModalTitleProps | ReactNode\n  /**\n   * The callback invoked when cancel button clicked.\n   */\n  onCancel?: (onClose: () => void) => void\n  /**\n   * The callback invoked when middle button clicked.\n   */\n  onMiddle?: (onClose: () => void) => void\n  /**\n   * The callback invoked when success button clicked.\n   */\n  onSuccess?: (onClose: () => void) => void\n}\n\nexport const ShorthandModalContent: FC<ShorthandModalContentProps> = ({\n  body,\n  cancel,\n  footer,\n  header,\n  middle,\n  success,\n  title,\n  onCancel,\n  onMiddle,\n  onSuccess,\n}) => {\n  const { onClose } = useComponentContext()\n  const customHeader = wrapOrPassProps(ModalHeader, header)\n  const customTitle = wrapOrPassProps(ModalTitle, title)\n  const customBody = wrapOrPassProps(ModalBody, body)\n  const customFooter = wrapOrPassProps(ModalFooter, footer)\n  const customCancel = wrapOrPassProps(Button, cancel, {\n    colorScheme: \"mono\",\n    variant: \"ghost\",\n    onClick: () => (onCancel ? onCancel(onClose) : onClose()),\n  })\n  const customMiddle = wrapOrPassProps(Button, middle, {\n    colorScheme: \"secondary\",\n    onClick: () => (onMiddle ? onMiddle(onClose) : onClose()),\n  })\n  const customSuccess = wrapOrPassProps(Button, success, {\n    colorScheme: \"primary\",\n    onClick: () => (onSuccess ? onSuccess(onClose) : onClose()),\n  })\n\n  return (\n    <ModalContent>\n      {customHeader ??\n        (customTitle ? <ModalHeader>{customTitle}</ModalHeader> : null)}\n      {customBody}\n      {customFooter ??\n        (customCancel || customMiddle || customSuccess ? (\n          <ModalFooter>\n            {customCancel}\n            {customMiddle}\n            {customSuccess}\n          </ModalFooter>\n        ) : null)}\n    </ModalContent>\n  )\n}\n\nexport interface ModalHeaderProps extends HTMLStyledProps<\"header\"> {}\n\nexport const ModalHeader = withContext<\"header\", ModalHeaderProps>(\n  \"header\",\n  \"header\",\n)(undefined, (props) => {\n  const { getHeaderProps } = useComponentContext()\n\n  return { ...getHeaderProps(props) }\n})\n\nexport interface ModalTitleProps extends HTMLStyledProps<\"h2\"> {}\n\nexport const ModalTitle = withContext<\"h2\", ModalTitleProps>(\"h2\", \"title\")(\n  undefined,\n  (props) => {\n    const { getTitleProps } = useComponentContext()\n\n    return { ...getTitleProps(props) }\n  },\n)\n\nexport interface ModalBodyProps extends HTMLStyledProps {}\n\nexport const ModalBody = withContext<\"div\", ModalBodyProps>(\"div\", \"body\")(\n  undefined,\n  (props) => {\n    const { getBodyProps } = useComponentContext()\n\n    return { ...getBodyProps(props) }\n  },\n)\n\nexport interface ModalFooterProps extends HTMLStyledProps<\"footer\"> {}\n\nexport const ModalFooter = withContext<\"footer\", ModalFooterProps>(\n  \"footer\",\n  \"footer\",\n)(undefined, (props) => {\n  const { getFooterProps } = useComponentContext()\n\n  return { ...getFooterProps(props) }\n})\n"],"mappings":"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"}
+{"version":3,"file":"modal.cjs","names":["createSlotComponent","modalStyle","useSplitChildren","useModal","AnimatePresence","Portal","FocusLock","RemoveScroll","styled","CloseButton","useValue","motion","fadeVariants","usePopupAnimationProps","wrapOrPassProps","Button"],"sources":["../../../../src/components/modal/modal.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ButtonProps } from \"../button\"\nimport type { CloseButtonProps } from \"../close-button\"\nimport type { FocusLockProps } from \"../focus-lock\"\nimport type { HTMLMotionProps, HTMLMotionPropsWithoutAs } from \"../motion\"\nimport type { UsePopupAnimationProps } from \"../popover\"\nimport type { PortalProps } from \"../portal\"\nimport type { ModalStyle } from \"./modal.style\"\nimport type { UseModalProps, UseModalReturn } from \"./use-modal\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { RemoveScroll } from \"react-remove-scroll\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { cast, isArray, useSplitChildren, wrapOrPassProps } from \"../../utils\"\nimport { Button } from \"../button\"\nimport { CloseButton } from \"../close-button\"\nimport { fadeVariants } from \"../fade\"\nimport { FocusLock } from \"../focus-lock\"\nimport { motion } from \"../motion\"\nimport { usePopupAnimationProps } from \"../popover\"\nimport { Portal } from \"../portal\"\nimport { modalStyle } from \"./modal.style\"\nimport { useModal } from \"./use-modal\"\n\ninterface ComponentContext\n  extends\n    Omit<UseModalReturn, \"getRootProps\">,\n    UsePopupAnimationProps,\n    Pick<ModalRootProps, \"withCloseButton\"> {}\n\nexport interface ModalRootProps\n  extends\n    Omit<HTMLStyledProps<\"div\">, \"scrollBehavior\" | \"title\">,\n    ThemeProps<ModalStyle>,\n    Omit<UseModalProps, \"title\">,\n    Pick<\n      FocusLockProps,\n      | \"autoFocus\"\n      | \"finalFocusRef\"\n      | \"initialFocusRef\"\n      | \"lockFocusAcrossFrames\"\n      | \"restoreFocus\"\n    >,\n    UsePopupAnimationProps,\n    ShorthandModalContentProps {\n  /**\n   * Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.\n   *\n   * @default false.\n   */\n  allowPinchZoom?: boolean\n  /**\n   * If `true`, scrolling will be disabled on the `body` when the modal opens.\n   *\n   * @default true\n   */\n  blockScrollOnMount?: boolean\n  /**\n   * The modal trigger to use.\n   */\n  trigger?: ReactNode\n  /**\n   * If `true`, display the modal close button.\n   *\n   * @default true\n   */\n  withCloseButton?: boolean\n  /**\n   * If `true`, display the modal overlay.\n   *\n   * @default true\n   */\n  withOverlay?: boolean\n  /**\n   * Props to be forwarded to the portal component.\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n  /**\n   * Callback function to run side effects after the modal has closed.\n   */\n  onCloseComplete?: () => void\n}\n\nconst {\n  ComponentContext,\n  PropsContext: ModalPropsContext,\n  useComponentContext,\n  usePropsContext: useModalPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ModalRootProps, ModalStyle, ComponentContext>(\n  \"modal\",\n  modalStyle,\n)\n\nexport { ModalPropsContext, useModalPropsContext }\n\n/**\n * `Modal` is a component that is displayed over the main content to focus the user's attention solely on the information.\n *\n * @see https://yamada-ui.com/docs/components/modal\n */\nexport const ModalRoot = withProvider<\"div\", ModalRootProps>(\n  ({\n    allowPinchZoom = false,\n    animationScheme = \"scale\",\n    autoFocus,\n    blockScrollOnMount = true,\n    body,\n    cancel,\n    children,\n    duration,\n    finalFocusRef,\n    footer,\n    header,\n    initialFocusRef,\n    lockFocusAcrossFrames = true,\n    middle,\n    restoreFocus,\n    success,\n    title,\n    trigger,\n    withCloseButton = true,\n    withOverlay = true,\n    portalProps,\n    onCancel,\n    onCloseComplete,\n    onMiddle,\n    onSuccess,\n    ...props\n  }) => {\n    const [omittedChildren, openTrigger, customOverlay] = useSplitChildren(\n      children,\n      ModalOpenTrigger,\n      ModalOverlay,\n    )\n    const hasChildren = isArray(omittedChildren) && !!omittedChildren.length\n    const { open, getRootProps, ...rest } = useModal(props)\n    const customOpenTrigger = trigger ? (\n      <ModalOpenTrigger>{trigger}</ModalOpenTrigger>\n    ) : null\n    const context = useMemo(\n      () => ({\n        animationScheme,\n        duration,\n        open,\n        withCloseButton,\n        ...rest,\n      }),\n      [animationScheme, duration, open, withCloseButton, rest],\n    )\n\n    return (\n      <ComponentContext value={context}>\n        {openTrigger ?? customOpenTrigger}\n\n        <AnimatePresence onExitComplete={onCloseComplete}>\n          {open ? (\n            <Portal {...portalProps}>\n              <FocusLock\n                autoFocus={autoFocus}\n                finalFocusRef={finalFocusRef}\n                initialFocusRef={initialFocusRef}\n                lockFocusAcrossFrames={lockFocusAcrossFrames}\n                restoreFocus={restoreFocus}\n              >\n                <RemoveScroll\n                  allowPinchZoom={allowPinchZoom}\n                  enabled={blockScrollOnMount}\n                  forwardProps\n                >\n                  <styled.div {...getRootProps()}>\n                    {customOverlay ?? (withOverlay ? <ModalOverlay /> : null)}\n\n                    {hasChildren ? (\n                      omittedChildren\n                    ) : (\n                      <ShorthandModalContent\n                        body={body}\n                        cancel={cancel}\n                        footer={footer}\n                        header={header}\n                        middle={middle}\n                        success={success}\n                        title={title}\n                        onCancel={onCancel}\n                        onMiddle={onMiddle}\n                        onSuccess={onSuccess}\n                      />\n                    )}\n                  </styled.div>\n                </RemoveScroll>\n              </FocusLock>\n            </Portal>\n          ) : null}\n        </AnimatePresence>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n)()\n\nexport interface ModalOpenTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalOpenTrigger = withContext<\"button\", ModalOpenTriggerProps>(\n  \"button\",\n  { name: \"OpenTrigger\", slot: [\"trigger\", \"open\"] },\n)(undefined, (props) => {\n  const { getOpenTriggerProps } = useComponentContext()\n\n  return { asChild: true, ...getOpenTriggerProps(props) }\n})\n\nexport interface ModalCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalCloseTrigger = withContext<\"button\", ModalCloseTriggerProps>(\n  \"button\",\n  { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] },\n)(undefined, (props) => {\n  const { getCloseTriggerProps } = useComponentContext()\n\n  return { asChild: true, ...getCloseTriggerProps(props) }\n})\n\nexport interface ModalCloseButtonProps extends CloseButtonProps {}\n\nexport const ModalCloseButton = withContext<\"button\", ModalCloseButtonProps>(\n  CloseButton,\n  \"closeButton\",\n)(undefined, (props) => {\n  const { getCloseButtonProps } = useComponentContext()\n\n  return { ...getCloseButtonProps(props) }\n})\n\nexport interface ModalOverlayProps extends HTMLMotionProps {}\n\nexport const ModalOverlay = withContext<\"div\", ModalOverlayProps>((props) => {\n  const {\n    animationScheme,\n    duration: durationProp,\n    getOverlayProps,\n  } = useComponentContext()\n  const duration = useValue(durationProp)\n\n  return (\n    <motion.div\n      custom={{ duration }}\n      {...(animationScheme !== \"none\"\n        ? {\n            animate: \"enter\",\n            exit: \"exit\",\n            initial: \"exit\",\n            variants: fadeVariants,\n          }\n        : {})}\n      {...cast<HTMLMotionProps>(getOverlayProps(cast<HTMLProps>(props)))}\n    />\n  )\n}, \"overlay\")()\n\nexport interface ModalContentProps\n  extends Omit<HTMLMotionProps<\"section\">, \"children\">, PropsWithChildren {}\n\nexport const ModalContent = withContext<\"section\", ModalContentProps>(\n  ({ children, ...rest }) => {\n    const { animationScheme, duration, withCloseButton, getContentProps } =\n      useComponentContext()\n    const [omittedChildren, customCloseButton] = useSplitChildren(\n      children,\n      ModalCloseButton,\n    )\n    const popupAnimationProps = usePopupAnimationProps({\n      animationScheme,\n      duration,\n    })\n\n    return (\n      <motion.section\n        {...popupAnimationProps}\n        {...cast<HTMLMotionPropsWithoutAs<\"section\">>(\n          getContentProps(cast<HTMLProps<\"section\">>(rest)),\n        )}\n      >\n        {customCloseButton ?? (withCloseButton ? <ModalCloseButton /> : null)}\n\n        {omittedChildren}\n      </motion.section>\n    )\n  },\n  \"content\",\n)()\n\ninterface ShorthandModalContentProps {\n  /**\n   * The modal body to use.\n   */\n  body?: ModalBodyProps | ReactNode\n  /**\n   * The modal cancel button to use.\n   */\n  cancel?: ButtonProps | ReactNode\n  /**\n   * The modal footer to use.\n   */\n  footer?: ModalFooterProps | ReactNode\n  /**\n   * The modal header to use.\n   */\n  header?: ModalHeaderProps | ReactNode\n  /**\n   * The modal middle button to use.\n   */\n  middle?: ButtonProps | ReactNode\n  /**\n   * The modal success button to use.\n   */\n  success?: ButtonProps | ReactNode\n  /**\n   * The modal title to use.\n   */\n  title?: ModalTitleProps | ReactNode\n  /**\n   * The callback invoked when cancel button clicked.\n   */\n  onCancel?: (onClose: () => void) => void\n  /**\n   * The callback invoked when middle button clicked.\n   */\n  onMiddle?: (onClose: () => void) => void\n  /**\n   * The callback invoked when success button clicked.\n   */\n  onSuccess?: (onClose: () => void) => void\n}\n\nexport const ShorthandModalContent: FC<ShorthandModalContentProps> = ({\n  body,\n  cancel,\n  footer,\n  header,\n  middle,\n  success,\n  title,\n  onCancel,\n  onMiddle,\n  onSuccess,\n}) => {\n  const { onClose } = useComponentContext()\n  const customHeader = wrapOrPassProps(ModalHeader, header)\n  const customTitle = wrapOrPassProps(ModalTitle, title)\n  const customBody = wrapOrPassProps(ModalBody, body)\n  const customFooter = wrapOrPassProps(ModalFooter, footer)\n  const customCancel = wrapOrPassProps(Button, cancel, {\n    colorScheme: \"mono\",\n    variant: \"ghost\",\n    onClick: () => (onCancel ? onCancel(onClose) : onClose()),\n  })\n  const customMiddle = wrapOrPassProps(Button, middle, {\n    colorScheme: \"secondary\",\n    onClick: () => (onMiddle ? onMiddle(onClose) : onClose()),\n  })\n  const customSuccess = wrapOrPassProps(Button, success, {\n    colorScheme: \"primary\",\n    onClick: () => (onSuccess ? onSuccess(onClose) : onClose()),\n  })\n\n  return (\n    <ModalContent>\n      {customHeader ??\n        (customTitle ? <ModalHeader>{customTitle}</ModalHeader> : null)}\n      {customBody}\n      {customFooter ??\n        (customCancel || customMiddle || customSuccess ? (\n          <ModalFooter>\n            {customCancel}\n            {customMiddle}\n            {customSuccess}\n          </ModalFooter>\n        ) : null)}\n    </ModalContent>\n  )\n}\n\nexport interface ModalHeaderProps extends HTMLStyledProps<\"header\"> {}\n\nexport const ModalHeader = withContext<\"header\", ModalHeaderProps>(\n  \"header\",\n  \"header\",\n)(undefined, (props) => {\n  const { getHeaderProps } = useComponentContext()\n\n  return { ...getHeaderProps(props) }\n})\n\nexport interface ModalTitleProps extends HTMLStyledProps<\"h2\"> {}\n\nexport const ModalTitle = withContext<\"h2\", ModalTitleProps>(\"h2\", \"title\")(\n  undefined,\n  (props) => {\n    const { getTitleProps } = useComponentContext()\n\n    return { ...getTitleProps(props) }\n  },\n)\n\nexport interface ModalBodyProps extends HTMLStyledProps {}\n\nexport const ModalBody = withContext<\"div\", ModalBodyProps>(\"div\", \"body\")(\n  undefined,\n  (props) => {\n    const { getBodyProps } = useComponentContext()\n\n    return { ...getBodyProps(props) }\n  },\n)\n\nexport interface ModalFooterProps extends HTMLStyledProps<\"footer\"> {}\n\nexport const ModalFooter = withContext<\"footer\", ModalFooterProps>(\n  \"footer\",\n  \"footer\",\n)(undefined, (props) => {\n  const { getFooterProps } = useComponentContext()\n\n  return { ...getFooterProps(props) }\n})\n"],"mappings":"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"}

package/dist/cjs/components/progress/progress.style.cjs

@@ -58,7 +58,7 @@ const progressStyle = require("../../core/system/config.cjs").defineComponentSlo
 			"--stripe-angle": "45deg",
 			"--stripe-color": ["rgba(255, 255, 255, 0.3)", "rgba(0, 0, 0, 0.3)"],
 			"--stripe-size": "1rem",
-			bgImage: `linear-gradient(
+			bgImage: `linear(
             {stripe-angle},
             {stripe-color} 25%,
             transparent 25%,

package/dist/cjs/components/progress/progress.style.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"progress.style.cjs","names":["defineComponentSlotStyle"],"sources":["../../../../src/components/progress/progress.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const progressStyle = defineComponentSlotStyle({\n  base: {\n    range: {\n      bgColor: \"{filledTrackColor}\",\n      h: \"full\",\n      rounded: \"inherit\",\n      transitionDuration: \"slow\",\n      transitionProperty: \"size\",\n      w: \"{width}\",\n      _indeterminate: {\n        \"--animation-from-x\": \"-40%\",\n        \"--animation-to-x\": \"100%\",\n        animationDuration: \"{duration, 1s}\",\n        animationIterationCount: \"infinite\",\n        animationName: \"position\",\n        animationTimingFunction: \"ease\",\n        minW: \"50%\",\n        position: \"absolute\",\n        willChange: \"left\",\n      },\n    },\n    root: {\n      overflow: \"hidden\",\n      position: \"relative\",\n      w: \"full\",\n    },\n  },\n\n  props: {\n    /**\n     * If `true`, the progress bar will animate.\n     *\n     * @default false\n     */\n    animated: {\n      true: {\n        range: {\n          \"--animation-from\": \"{stripe-size}\",\n          animationDuration: \"{duration, 1s}\",\n          animationIterationCount: \"infinite\",\n          animationName: \"bg-position\",\n          animationTimingFunction: \"linear\",\n        },\n      },\n    },\n    /**\n     * The shape of the progress bar.\n     *\n     * @default 'rounded'\n     */\n    shape: {\n      circle: {\n        root: { rounded: \"full\" },\n      },\n      rounded: {\n        root: { rounded: \"l1\" },\n      },\n      square: {\n        root: { rounded: \"0\" },\n      },\n    },\n    /**\n     * If `true`, the progress bar will show stripe.\n     *\n     * @default false\n     */\n    striped: {\n      true: {\n        range: {\n          \"--stripe-angle\": \"45deg\",\n          \"--stripe-color\": [\"rgba(255, 255, 255, 0.3)\", \"rgba(0, 0, 0, 0.3)\"],\n          \"--stripe-size\": \"1rem\",\n          bgImage: `linear-gradient(\n            {stripe-angle},\n            {stripe-color} 25%,\n            transparent 25%,\n            transparent 50%,\n            {stripe-color} 50%,\n            {stripe-color} 75%,\n            transparent 75%,\n            transparent\n          )`,\n          bgSize: \"{stripe-size} {stripe-size}\",\n        },\n      },\n    },\n  },\n\n  variants: {\n    outline: {\n      range: {\n        bg: \"colorScheme.solid\",\n      },\n      root: {\n        bg: \"bg.subtle\",\n      },\n    },\n    subtle: {\n      range: {\n        bg: \"colorScheme.solid/80\",\n      },\n      root: {\n        bg: [\"colorScheme.muted\", \"colorScheme.subtle\"],\n      },\n    },\n  },\n\n  sizes: {\n    xs: {\n      root: { h: \"1\" },\n    },\n    sm: {\n      root: { h: \"2\" },\n    },\n    md: {\n      root: { h: \"3\" },\n    },\n    lg: {\n      root: { h: \"4\" },\n    },\n    xl: {\n      root: { h: \"5\" },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"outline\",\n    shape: \"rounded\",\n    striped: false,\n  },\n})\n\nexport type ProgressStyle = typeof progressStyle\n"],"mappings":";AAEA,MAAa,sDAAgBA,CAAAA,CAAAA,yBAAyB;CACpD,MAAM;EACJ,OAAO;GACL,SAAS;GACT,GAAG;GACH,SAAS;GACT,oBAAoB;GACpB,oBAAoB;GACpB,GAAG;GACH,gBAAgB;IACd,sBAAsB;IACtB,oBAAoB;IACpB,mBAAmB;IACnB,yBAAyB;IACzB,eAAe;IACf,yBAAyB;IACzB,MAAM;IACN,UAAU;IACV,YAAY;GACd;EACF;EACA,MAAM;GACJ,UAAU;GACV,UAAU;GACV,GAAG;EACL;CACF;CAEA,OAAO;;;;;;EAML,UAAU,EACR,MAAM,EACJ,OAAO;GACL,oBAAoB;GACpB,mBAAmB;GACnB,yBAAyB;GACzB,eAAe;GACf,yBAAyB;EAC3B,EACF,EACF;;;;;;EAMA,OAAO;GACL,QAAQ,EACN,MAAM,EAAE,SAAS,OAAO,EAC1B;GACA,SAAS,EACP,MAAM,EAAE,SAAS,KAAK,EACxB;GACA,QAAQ,EACN,MAAM,EAAE,SAAS,IAAI,EACvB;EACF;;;;;;EAMA,SAAS,EACP,MAAM,EACJ,OAAO;GACL,kBAAkB;GAClB,kBAAkB,CAAC,4BAA4B,oBAAoB;GACnE,iBAAiB;GACjB,SAAS;;;;;;;;;;GAUT,QAAQ;EACV,EACF,EACF;CACF;CAEA,UAAU;EACR,SAAS;GACP,OAAO,EACL,IAAI,oBACN;GACA,MAAM,EACJ,IAAI,YACN;EACF;EACA,QAAQ;GACN,OAAO,EACL,IAAI,uBACN;GACA,MAAM,EACJ,IAAI,CAAC,qBAAqB,oBAAoB,EAChD;EACF;CACF;CAEA,OAAO;EACL,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;EACA,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;EACA,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;EACA,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;EACA,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;CACF;CAEA,cAAc;EACZ,MAAM;EACN,SAAS;EACT,OAAO;EACP,SAAS;CACX;AACF,CAAC"}
+{"version":3,"file":"progress.style.cjs","names":["defineComponentSlotStyle"],"sources":["../../../../src/components/progress/progress.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const progressStyle = defineComponentSlotStyle({\n  base: {\n    range: {\n      bgColor: \"{filledTrackColor}\",\n      h: \"full\",\n      rounded: \"inherit\",\n      transitionDuration: \"slow\",\n      transitionProperty: \"size\",\n      w: \"{width}\",\n      _indeterminate: {\n        \"--animation-from-x\": \"-40%\",\n        \"--animation-to-x\": \"100%\",\n        animationDuration: \"{duration, 1s}\",\n        animationIterationCount: \"infinite\",\n        animationName: \"position\",\n        animationTimingFunction: \"ease\",\n        minW: \"50%\",\n        position: \"absolute\",\n        willChange: \"left\",\n      },\n    },\n    root: {\n      overflow: \"hidden\",\n      position: \"relative\",\n      w: \"full\",\n    },\n  },\n\n  props: {\n    /**\n     * If `true`, the progress bar will animate.\n     *\n     * @default false\n     */\n    animated: {\n      true: {\n        range: {\n          \"--animation-from\": \"{stripe-size}\",\n          animationDuration: \"{duration, 1s}\",\n          animationIterationCount: \"infinite\",\n          animationName: \"bg-position\",\n          animationTimingFunction: \"linear\",\n        },\n      },\n    },\n    /**\n     * The shape of the progress bar.\n     *\n     * @default 'rounded'\n     */\n    shape: {\n      circle: {\n        root: { rounded: \"full\" },\n      },\n      rounded: {\n        root: { rounded: \"l1\" },\n      },\n      square: {\n        root: { rounded: \"0\" },\n      },\n    },\n    /**\n     * If `true`, the progress bar will show stripe.\n     *\n     * @default false\n     */\n    striped: {\n      true: {\n        range: {\n          \"--stripe-angle\": \"45deg\",\n          \"--stripe-color\": [\"rgba(255, 255, 255, 0.3)\", \"rgba(0, 0, 0, 0.3)\"],\n          \"--stripe-size\": \"1rem\",\n          bgImage: `linear(\n            {stripe-angle},\n            {stripe-color} 25%,\n            transparent 25%,\n            transparent 50%,\n            {stripe-color} 50%,\n            {stripe-color} 75%,\n            transparent 75%,\n            transparent\n          )`,\n          bgSize: \"{stripe-size} {stripe-size}\",\n        },\n      },\n    },\n  },\n\n  variants: {\n    outline: {\n      range: {\n        bg: \"colorScheme.solid\",\n      },\n      root: {\n        bg: \"bg.subtle\",\n      },\n    },\n    subtle: {\n      range: {\n        bg: \"colorScheme.solid/80\",\n      },\n      root: {\n        bg: [\"colorScheme.muted\", \"colorScheme.subtle\"],\n      },\n    },\n  },\n\n  sizes: {\n    xs: {\n      root: { h: \"1\" },\n    },\n    sm: {\n      root: { h: \"2\" },\n    },\n    md: {\n      root: { h: \"3\" },\n    },\n    lg: {\n      root: { h: \"4\" },\n    },\n    xl: {\n      root: { h: \"5\" },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"outline\",\n    shape: \"rounded\",\n    striped: false,\n  },\n})\n\nexport type ProgressStyle = typeof progressStyle\n"],"mappings":";AAEA,MAAa,sDAAgBA,CAAAA,CAAAA,yBAAyB;CACpD,MAAM;EACJ,OAAO;GACL,SAAS;GACT,GAAG;GACH,SAAS;GACT,oBAAoB;GACpB,oBAAoB;GACpB,GAAG;GACH,gBAAgB;IACd,sBAAsB;IACtB,oBAAoB;IACpB,mBAAmB;IACnB,yBAAyB;IACzB,eAAe;IACf,yBAAyB;IACzB,MAAM;IACN,UAAU;IACV,YAAY;GACd;EACF;EACA,MAAM;GACJ,UAAU;GACV,UAAU;GACV,GAAG;EACL;CACF;CAEA,OAAO;;;;;;EAML,UAAU,EACR,MAAM,EACJ,OAAO;GACL,oBAAoB;GACpB,mBAAmB;GACnB,yBAAyB;GACzB,eAAe;GACf,yBAAyB;EAC3B,EACF,EACF;;;;;;EAMA,OAAO;GACL,QAAQ,EACN,MAAM,EAAE,SAAS,OAAO,EAC1B;GACA,SAAS,EACP,MAAM,EAAE,SAAS,KAAK,EACxB;GACA,QAAQ,EACN,MAAM,EAAE,SAAS,IAAI,EACvB;EACF;;;;;;EAMA,SAAS,EACP,MAAM,EACJ,OAAO;GACL,kBAAkB;GAClB,kBAAkB,CAAC,4BAA4B,oBAAoB;GACnE,iBAAiB;GACjB,SAAS;;;;;;;;;;GAUT,QAAQ;EACV,EACF,EACF;CACF;CAEA,UAAU;EACR,SAAS;GACP,OAAO,EACL,IAAI,oBACN;GACA,MAAM,EACJ,IAAI,YACN;EACF;EACA,QAAQ;GACN,OAAO,EACL,IAAI,uBACN;GACA,MAAM,EACJ,IAAI,CAAC,qBAAqB,oBAAoB,EAChD;EACF;CACF;CAEA,OAAO;EACL,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;EACA,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;EACA,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;EACA,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;EACA,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;CACF;CAEA,cAAc;EACZ,MAAM;EACN,SAAS;EACT,OAAO;EACP,SAAS;CACX;AACF,CAAC"}

package/dist/cjs/components/skeleton/skeleton.style.cjs

@@ -49,7 +49,7 @@ loading: {
 			animationIterationCount: "infinite",
 			animationName: "bg-position",
 			animationTimingFunction: "ease-in-out",
-			bgImage: "linear-gradient(270deg, {start-color}, {end-color}, {end-color}, {start-color})",
+			bgImage: "linear(270deg, {start-color}, {end-color}, {end-color}, {start-color})",
 			bgSize: "400% 100%"
 		}
 	},

package/dist/cjs/components/skeleton/skeleton.style.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.style.cjs","names":["defineComponentStyle"],"sources":["../../../../src/components/skeleton/skeleton.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const skeletonStyle = defineComponentStyle({\n  base: {},\n\n  props: {\n    /**\n     * If `false`, it'll render its children with a nice fade transition.\n     *\n     * @default true\n     */\n    loading: {\n      false: {\n        animationDuration: \"{fade-duration, 0.1s}\",\n        animationIterationCount: \"1\",\n        animationName: \"fade-in\",\n        animationTimingFunction: \"ease-out\",\n        bg: \"unset\",\n      },\n      true: {\n        \"&::before, &::after, *\": {\n          visibility: \"hidden\",\n        },\n        \"--height\": \"sizes.6\",\n        \"--width\": \"sizes.full\",\n        bgClip: \"padding-box\",\n        boxShadow: \"none\",\n        color: \"transparent\",\n        cursor: \"default\",\n        flexShrink: \"0\",\n        h: \"{height}\",\n        maxW: \"full\",\n        pointerEvents: \"none\",\n        rounded: \"l1\",\n        userSelect: \"none\",\n        w: \"{width}\",\n      },\n    },\n  },\n\n  variants: {\n    none: {\n      animation: \"none\",\n    },\n    pulse: {\n      animationDuration: \"{duration, 1.2s}\",\n      animationIterationCount: \"infinite\",\n      animationName: \"pulse\",\n      bg: \"bg.muted\",\n    },\n    shine: {\n      \"--animation-from\": \"200%\",\n      \"--animation-to\": \"-200%\",\n      \"--end-color\": \"colors.bg.muted\",\n      \"--start-color\": \"colors.bg.subtle\",\n      animationDuration: \"{duration, 5s}\",\n      animationIterationCount: \"infinite\",\n      animationName: \"bg-position\",\n      animationTimingFunction: \"ease-in-out\",\n      bgImage:\n        \"linear-gradient(270deg, {start-color}, {end-color}, {end-color}, {start-color})\",\n      bgSize: \"400% 100%\",\n    },\n  },\n\n  defaultProps: {\n    variant: \"pulse\",\n    loading: true,\n  },\n})\n\nexport type SkeletonStyle = typeof skeletonStyle\n"],"mappings":";AAEA,MAAa,sDAAgBA,CAAAA,CAAAA,qBAAqB;CAChD,MAAM,CAAC;CAEP,OAAO;;;;;;AAML,SAAS;EACP,OAAO;GACL,mBAAmB;GACnB,yBAAyB;GACzB,eAAe;GACf,yBAAyB;GACzB,IAAI;EACN;EACA,MAAM;GACJ,0BAA0B,EACxB,YAAY,SACd;GACA,YAAY;GACZ,WAAW;GACX,QAAQ;GACR,WAAW;GACX,OAAO;GACP,QAAQ;GACR,YAAY;GACZ,GAAG;GACH,MAAM;GACN,eAAe;GACf,SAAS;GACT,YAAY;GACZ,GAAG;EACL;CACF,EACF;CAEA,UAAU;EACR,MAAM,EACJ,WAAW,OACb;EACA,OAAO;GACL,mBAAmB;GACnB,yBAAyB;GACzB,eAAe;GACf,IAAI;EACN;EACA,OAAO;GACL,oBAAoB;GACpB,kBAAkB;GAClB,eAAe;GACf,iBAAiB;GACjB,mBAAmB;GACnB,yBAAyB;GACzB,eAAe;GACf,yBAAyB;GACzB,SACE;GACF,QAAQ;EACV;CACF;CAEA,cAAc;EACZ,SAAS;EACT,SAAS;CACX;AACF,CAAC"}
+{"version":3,"file":"skeleton.style.cjs","names":["defineComponentStyle"],"sources":["../../../../src/components/skeleton/skeleton.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const skeletonStyle = defineComponentStyle({\n  base: {},\n\n  props: {\n    /**\n     * If `false`, it'll render its children with a nice fade transition.\n     *\n     * @default true\n     */\n    loading: {\n      false: {\n        animationDuration: \"{fade-duration, 0.1s}\",\n        animationIterationCount: \"1\",\n        animationName: \"fade-in\",\n        animationTimingFunction: \"ease-out\",\n        bg: \"unset\",\n      },\n      true: {\n        \"&::before, &::after, *\": {\n          visibility: \"hidden\",\n        },\n        \"--height\": \"sizes.6\",\n        \"--width\": \"sizes.full\",\n        bgClip: \"padding-box\",\n        boxShadow: \"none\",\n        color: \"transparent\",\n        cursor: \"default\",\n        flexShrink: \"0\",\n        h: \"{height}\",\n        maxW: \"full\",\n        pointerEvents: \"none\",\n        rounded: \"l1\",\n        userSelect: \"none\",\n        w: \"{width}\",\n      },\n    },\n  },\n\n  variants: {\n    none: {\n      animation: \"none\",\n    },\n    pulse: {\n      animationDuration: \"{duration, 1.2s}\",\n      animationIterationCount: \"infinite\",\n      animationName: \"pulse\",\n      bg: \"bg.muted\",\n    },\n    shine: {\n      \"--animation-from\": \"200%\",\n      \"--animation-to\": \"-200%\",\n      \"--end-color\": \"colors.bg.muted\",\n      \"--start-color\": \"colors.bg.subtle\",\n      animationDuration: \"{duration, 5s}\",\n      animationIterationCount: \"infinite\",\n      animationName: \"bg-position\",\n      animationTimingFunction: \"ease-in-out\",\n      bgImage:\n        \"linear(270deg, {start-color}, {end-color}, {end-color}, {start-color})\",\n      bgSize: \"400% 100%\",\n    },\n  },\n\n  defaultProps: {\n    variant: \"pulse\",\n    loading: true,\n  },\n})\n\nexport type SkeletonStyle = typeof skeletonStyle\n"],"mappings":";AAEA,MAAa,sDAAgBA,CAAAA,CAAAA,qBAAqB;CAChD,MAAM,CAAC;CAEP,OAAO;;;;;;AAML,SAAS;EACP,OAAO;GACL,mBAAmB;GACnB,yBAAyB;GACzB,eAAe;GACf,yBAAyB;GACzB,IAAI;EACN;EACA,MAAM;GACJ,0BAA0B,EACxB,YAAY,SACd;GACA,YAAY;GACZ,WAAW;GACX,QAAQ;GACR,WAAW;GACX,OAAO;GACP,QAAQ;GACR,YAAY;GACZ,GAAG;GACH,MAAM;GACN,eAAe;GACf,SAAS;GACT,YAAY;GACZ,GAAG;EACL;CACF,EACF;CAEA,UAAU;EACR,MAAM,EACJ,WAAW,OACb;EACA,OAAO;GACL,mBAAmB;GACnB,yBAAyB;GACzB,eAAe;GACf,IAAI;EACN;EACA,OAAO;GACL,oBAAoB;GACpB,kBAAkB;GAClB,eAAe;GACf,iBAAiB;GACjB,mBAAmB;GACnB,yBAAyB;GACzB,eAAe;GACf,yBAAyB;GACzB,SACE;GACF,QAAQ;EACV;CACF;CAEA,cAAc;EACZ,SAAS;EACT,SAAS;CACX;AACF,CAAC"}

package/dist/cjs/core/css/gradient.cjs

@@ -15,25 +15,27 @@ const directionValues = new Set(Object.values(directions));
 function gradient(value, { system }) {
 	if (value == null || require_utils.globalValues.has(value)) return value;
 	if (!require_utils.isCSSFunction(value)) return `url('${value}')`;
-	let { type, values } = require_utils.getCSSFunction(value);
-	if (!type || !values) return value;
-	type = type.includes("-gradient") ? type : `${type}-gradient`;
-	const [maybeDirection, ...colors] = require_utils.splitValues(values);
-	if (!colors.length) return value;
-	const direction = maybeDirection && maybeDirection in directions ? directions[maybeDirection] : maybeDirection;
-	if (!(0, require_utils_index.utils_exports.isUndefined)(direction)) colors.unshift(direction);
-	const computedValues = colors.map((_color) => {
-		if ((0, require_utils_index.utils_exports.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 = require_utils.isCSSFunction(_ratio) ? _ratio : _ratio?.split(" ");
-		const token = `colors.${color}`;
-		color = require_utils.isCSSToken(system)(token) ? system.cssMap[token].ref : color;
-		if (ratio) return [color, ...(0, require_utils_index.utils_exports.isArray)(ratio) ? ratio : [ratio]].join(" ");
-		else return color;
-	});
-	return `${type}(${computedValues.join(", ")})`;
+	return require_utils.splitValues(value).map((value) => {
+		let { type, values } = require_utils.getCSSFunction(value);
+		if (!type || !values) return value;
+		type = type.includes("-gradient") ? type : `${type}-gradient`;
+		const [maybeDirection, ...colors] = require_utils.splitValues(values);
+		if (!colors.length) return value;
+		const direction = maybeDirection && maybeDirection in directions ? directions[maybeDirection] : maybeDirection;
+		if (!(0, require_utils_index.utils_exports.isUndefined)(direction)) colors.unshift(direction);
+		const computedValues = colors.map((_color) => {
+			if ((0, require_utils_index.utils_exports.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 = require_utils.isCSSFunction(_ratio) ? _ratio : _ratio?.split(" ");
+			const token = `colors.${color}`;
+			color = require_utils.isCSSToken(system)(token) ? system.cssMap[token].ref : color;
+			if (ratio) return [color, ...(0, require_utils_index.utils_exports.isArray)(ratio) ? ratio : [ratio]].join(" ");
+			else return color;
+		});
+		return `${type}(${computedValues.join(", ")})`;
+	}).join(", ");
 }
 //#endregion
 exports.gradient = gradient;

package/dist/cjs/core/css/gradient.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"gradient.cjs","names":["globalValues","isCSSFunction","getCSSFunction","splitValues","isCSSToken"],"sources":["../../../../src/core/css/gradient.ts"],"sourcesContent":["import type { TransformOptions } from \"./utils\"\nimport { isArray, isUndefined } from \"../../utils\"\nimport {\n  getCSSFunction,\n  globalValues,\n  isCSSFunction,\n  isCSSToken,\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(value: any, { system }: TransformOptions) {\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 = isCSSToken(system)(token) ? system.cssMap[token]!.ref : color\n\n    if (ratio) return [color, ...(isArray(ratio) ? ratio : [ratio])].join(\" \")\n    else return color\n  })\n\n  return `${type}(${computedValues.join(\", \")})`\n}\n"],"mappings":";;;AAUA,MAAM,aAAwC;CAC5C,QAAQ;CACR,SAAS;CACT,SAAS;CACT,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,SAAS;AACX;AAEA,MAAM,kBAAkB,IAAI,IAAI,OAAO,OAAO,UAAU,CAAC;AAEzD,SAAgB,SAAS,OAAY,EAAE,UAA4B;CACjE,IAAI,SAAS,QAAQA,cAAAA,aAAa,IAAI,KAAK,GAAG,OAAO;CAIrD,IAAI,CAFYC,cAAAA,cAAc,KAEnB,GAAG,OAAO,QAAQ,MAAM;CAEnC,IAAI,EAAE,MAAM,WAAWC,cAAAA,eAAe,KAAK;CAE3C,IAAI,CAAC,QAAQ,CAAC,QAAQ,OAAO;CAE7B,OAAO,KAAK,SAAS,WAAW,IAAI,OAAO,GAAG,KAAK;CAEnD,MAAM,CAAC,gBAAgB,GAAG,UAAUC,cAAAA,YAAY,MAAM;CAEtD,IAAI,CAAC,OAAO,QAAQ,OAAO;CAE3B,MAAM,YACJ,kBAAkB,kBAAkB,aAChC,WAAW,kBACX;CAEN,IAAI,EAAA,GAAA,oBAAA,cAAA,YAAA,CAAa,SAAS,GAAG,OAAO,QAAQ,SAAS;CAErD,MAAM,iBAAiB,OAAO,KAAK,WAAW;EAC5C,KAAA,GAAA,oBAAA,cAAA,YAAA,CAAgB,MAAM,GAAG,OAAO;EAEhC,IAAI,gBAAgB,IAAI,MAAM,GAAG,OAAO;EAExC,MAAM,IAAI,OAAO,QAAQ,GAAG;EAE5B,IAAI,CAAC,OAAO,UACV,MAAM,KAAK,CAAC,OAAO,MAAM,GAAG,CAAC,GAAG,OAAO,MAAM,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM;EAEhE,MAAM,QAAQF,cAAAA,cAAc,MAAM,IAAI,SAAS,QAAQ,MAAM,GAAG;EAEhE,MAAM,QAAQ,UAAU;EAExB,QAAQG,cAAAA,WAAW,MAAM,CAAC,CAAC,KAAK,IAAI,OAAO,OAAO,MAAM,CAAE,MAAM;EAEhE,IAAI,OAAO,OAAO,CAAC,OAAO,IAAA,GAAA,oBAAA,cAAA,QAAA,CAAY,KAAK,IAAI,QAAQ,CAAC,KAAK,CAAE,CAAC,CAAC,KAAK,GAAG;OACpE,OAAO;CACd,CAAC;CAED,OAAO,GAAG,KAAK,GAAG,eAAe,KAAK,IAAI,EAAE;AAC9C"}
+{"version":3,"file":"gradient.cjs","names":["globalValues","isCSSFunction","splitValues","getCSSFunction","isCSSToken"],"sources":["../../../../src/core/css/gradient.ts"],"sourcesContent":["import type { TransformOptions } from \"./utils\"\nimport { isArray, isUndefined } from \"../../utils\"\nimport {\n  getCSSFunction,\n  globalValues,\n  isCSSFunction,\n  isCSSToken,\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(value: any, { system }: TransformOptions) {\n  if (value == null || globalValues.has(value)) return value\n\n  const prevent = isCSSFunction(value)\n\n  if (!prevent) return `url('${value}')`\n\n  return splitValues(value)\n    .map((value) => {\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 = isCSSToken(system)(token) ? system.cssMap[token]!.ref : color\n\n        if (ratio)\n          return [color, ...(isArray(ratio) ? ratio : [ratio])].join(\" \")\n        else return color\n      })\n\n      return `${type}(${computedValues.join(\", \")})`\n    })\n    .join(\", \")\n}\n"],"mappings":";;;AAUA,MAAM,aAAwC;CAC5C,QAAQ;CACR,SAAS;CACT,SAAS;CACT,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,SAAS;AACX;AAEA,MAAM,kBAAkB,IAAI,IAAI,OAAO,OAAO,UAAU,CAAC;AAEzD,SAAgB,SAAS,OAAY,EAAE,UAA4B;CACjE,IAAI,SAAS,QAAQA,cAAAA,aAAa,IAAI,KAAK,GAAG,OAAO;CAIrD,IAAI,CAFYC,cAAAA,cAAc,KAEnB,GAAG,OAAO,QAAQ,MAAM;CAEnC,OAAOC,cAAAA,YAAY,KAAK,CAAC,CACtB,KAAK,UAAU;EACd,IAAI,EAAE,MAAM,WAAWC,cAAAA,eAAe,KAAK;EAE3C,IAAI,CAAC,QAAQ,CAAC,QAAQ,OAAO;EAE7B,OAAO,KAAK,SAAS,WAAW,IAAI,OAAO,GAAG,KAAK;EAEnD,MAAM,CAAC,gBAAgB,GAAG,UAAUD,cAAAA,YAAY,MAAM;EAEtD,IAAI,CAAC,OAAO,QAAQ,OAAO;EAE3B,MAAM,YACJ,kBAAkB,kBAAkB,aAChC,WAAW,kBACX;EAEN,IAAI,EAAA,GAAA,oBAAA,cAAA,YAAA,CAAa,SAAS,GAAG,OAAO,QAAQ,SAAS;EAErD,MAAM,iBAAiB,OAAO,KAAK,WAAW;GAC5C,KAAA,GAAA,oBAAA,cAAA,YAAA,CAAgB,MAAM,GAAG,OAAO;GAEhC,IAAI,gBAAgB,IAAI,MAAM,GAAG,OAAO;GAExC,MAAM,IAAI,OAAO,QAAQ,GAAG;GAE5B,IAAI,CAAC,OAAO,UACV,MAAM,KAAK,CAAC,OAAO,MAAM,GAAG,CAAC,GAAG,OAAO,MAAM,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM;GAEhE,MAAM,QAAQD,cAAAA,cAAc,MAAM,IAAI,SAAS,QAAQ,MAAM,GAAG;GAEhE,MAAM,QAAQ,UAAU;GAExB,QAAQG,cAAAA,WAAW,MAAM,CAAC,CAAC,KAAK,IAAI,OAAO,OAAO,MAAM,CAAE,MAAM;GAEhE,IAAI,OACF,OAAO,CAAC,OAAO,IAAA,GAAA,oBAAA,cAAA,QAAA,CAAY,KAAK,IAAI,QAAQ,CAAC,KAAK,CAAE,CAAC,CAAC,KAAK,GAAG;QAC3D,OAAO;EACd,CAAC;EAED,OAAO,GAAG,KAAK,GAAG,eAAe,KAAK,IAAI,EAAE;CAC9C,CAAC,CAAC,CACD,KAAK,IAAI;AACd"}

package/dist/cjs/theme/tokens/z-indices.cjs

@@ -13,7 +13,8 @@ const zIndices = require("../../core/system/config.cjs").defineTokens.zIndices({
 	freeza: 9996,
 	vegeta: 9997,
 	sonGoku: 9998,
-	beerus: 9999
+	beerus: 9999,
+	infinity: 2147483647
 });
 //#endregion
 exports.zIndices = zIndices;

package/dist/cjs/theme/tokens/z-indices.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"z-indices.cjs","names":["defineTokens"],"sources":["../../../../src/theme/tokens/z-indices.ts"],"sourcesContent":["/* eslint-disable perfectionist/sort-objects */\nimport { defineTokens } from \"../../core\"\n\nexport const zIndices = defineTokens.zIndices({\n  yamcha: 1,\n  kurillin: 9,\n  nappa: 99,\n\n  guldo: 100,\n  jeice: 110,\n  burter: 120,\n  recoome: 130,\n  ginyu: 140,\n  dodoria: 150,\n  zarbon: 160,\n\n  freeza: 9996,\n  vegeta: 9997,\n  sonGoku: 9998,\n  beerus: 9999,\n})\n"],"mappings":";AAGA,MAAa,iDAAWA,CAAAA,CAAAA,aAAa,SAAS;CAC5C,QAAQ;CACR,UAAU;CACV,OAAO;CAEP,OAAO;CACP,OAAO;CACP,QAAQ;CACR,SAAS;CACT,OAAO;CACP,SAAS;CACT,QAAQ;CAER,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,QAAQ;AACV,CAAC"}
+{"version":3,"file":"z-indices.cjs","names":["defineTokens"],"sources":["../../../../src/theme/tokens/z-indices.ts"],"sourcesContent":["/* eslint-disable perfectionist/sort-objects */\nimport { defineTokens } from \"../../core\"\n\nexport const zIndices = defineTokens.zIndices({\n  yamcha: 1,\n  kurillin: 9,\n  nappa: 99,\n\n  guldo: 100,\n  jeice: 110,\n  burter: 120,\n  recoome: 130,\n  ginyu: 140,\n  dodoria: 150,\n  zarbon: 160,\n\n  freeza: 9996,\n  vegeta: 9997,\n  sonGoku: 9998,\n  beerus: 9999,\n\n  infinity: 2147483647,\n})\n"],"mappings":";AAGA,MAAa,iDAAWA,CAAAA,CAAAA,aAAa,SAAS;CAC5C,QAAQ;CACR,UAAU;CACV,OAAO;CAEP,OAAO;CACP,OAAO;CACP,QAAQ;CACR,SAAS;CACT,OAAO;CACP,SAAS;CACT,QAAQ;CAER,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,QAAQ;CAER,UAAU;AACZ,CAAC"}

package/dist/esm/components/color-swatch/color-swatch.js

@@ -7,10 +7,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/color-swatch/color-swatch.tsx
 const checkersProps = {
 	bgImage: [
-		"linear-gradient(45deg, {checkers-fg} 25%, transparent 25%)",
-		"linear-gradient(-45deg, {checkers-fg} 25%, transparent 25%)",
-		"linear-gradient(45deg, transparent 75%, {checkers-fg} 75%)",
-		"linear-gradient(-45deg, {checkers-bg} 75%, {checkers-fg} 75%)"
+		"linear(45deg, {checkers-fg} 25%, transparent 25%)",
+		"linear(-45deg, {checkers-fg} 25%, transparent 25%)",
+		"linear(45deg, transparent 75%, {checkers-fg} 75%)",
+		"linear(-45deg, {checkers-bg} 75%, {checkers-fg} 75%)"
 	].join(", "),
 	bgPosition: `0 0, 0 4px, 4px -4px, -4px 0`,
 	bgSize: `8px 8px`

package/dist/esm/components/color-swatch/color-swatch.js.map

@@ -1 +1 @@
-{"version":3,"file":"color-swatch.js","names":[],"sources":["../../../../src/components/color-swatch/color-swatch.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ColorSwatchStyle } from \"./color-swatch.style\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { isString } from \"../../utils\"\nimport { colorSwatchStyle } from \"./color-swatch.style\"\n\nexport const checkersProps: HTMLStyledProps = {\n  bgImage: [\n    \"linear-gradient(45deg, {checkers-fg} 25%, transparent 25%)\",\n    \"linear-gradient(-45deg, {checkers-fg} 25%, transparent 25%)\",\n    \"linear-gradient(45deg, transparent 75%, {checkers-fg} 75%)\",\n    \"linear-gradient(-45deg, {checkers-bg} 75%, {checkers-fg} 75%)\",\n  ].join(\", \"),\n  bgPosition: `0 0, 0 4px, 4px -4px, -4px 0`,\n  bgSize: `8px 8px`,\n}\n\nconst defaultLayers = (\n  background: CSSProps[\"color\"],\n  withShadow: boolean,\n): HTMLStyledProps[] => {\n  const layers: HTMLStyledProps[] = [checkersProps, { background }]\n\n  if (withShadow) layers.push({ boxShadow: \"inner\" })\n\n  return layers\n}\n\nexport interface ColorSwatchProps\n  extends Omit<HTMLStyledProps, \"color\">, ThemeProps<ColorSwatchStyle> {\n  /**\n   * The color used for the swatch element.\n   *\n   * @default '#ffffff00'\n   */\n  color?: CSSProps[\"color\"]\n  /**\n   * The overlay used for the swatch element.\n   */\n  layers?: HTMLStyledProps[]\n  /**\n   * If `true`, the swatch element has an inner `box-shadow`.\n   *\n   * @default true\n   */\n  withShadow?: boolean\n}\n\nconst {\n  PropsContext: ColorSwatchPropsContext,\n  usePropsContext: useColorSwatchPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ColorSwatchProps, ColorSwatchStyle>(\n  \"color-swatch\",\n  colorSwatchStyle,\n)\n\nexport { ColorSwatchPropsContext, useColorSwatchPropsContext }\n\n/**\n * `ColorSwatch` is a component that displays color samples.\n *\n * @see https://yamada-ui.com/docs/components/color-swatch\n */\nexport const ColorSwatch = withProvider<\"div\", ColorSwatchProps>(\n  ({\n    children,\n    color = \"#ffffff00\",\n    withShadow = true,\n    layers = defaultLayers(color, withShadow),\n    ...rest\n  }) => {\n    return (\n      <styled.div\n        aria-label={isString(color) ? color : undefined}\n        aria-roledescription=\"color swatch\"\n        role=\"img\"\n        {...rest}\n      >\n        {children}\n        {layers.map((props, index) => (\n          <ColorSwatchOverlay key={index} {...props} />\n        ))}\n      </styled.div>\n    )\n  },\n  \"root\",\n)()\n\nexport interface ColorSwatchOverlayProps extends HTMLStyledProps {}\n\nexport const ColorSwatchOverlay = withContext<\"div\", ColorSwatchOverlayProps>(\n  \"div\",\n  \"overlay\",\n)()\n"],"mappings":";;;;;;;AAQA,MAAa,gBAAiC;CAC5C,SAAS;EACP;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,IAAI;CACX,YAAY;CACZ,QAAQ;AACV;AAEA,MAAM,iBACJ,YACA,eACsB;CACtB,MAAM,SAA4B,CAAC,eAAe,EAAE,WAAW,CAAC;CAEhE,IAAI,YAAY,OAAO,KAAK,EAAE,WAAW,QAAQ,CAAC;CAElD,OAAO;AACT;AAsBA,MAAM,EACJ,cAAc,yBACd,iBAAiB,4BACjB,aACA,iBACE,oBACF,gBACA,gBACF;;;;;;AASA,MAAa,cAAc,cACxB,EACC,UACA,QAAQ,aACR,aAAa,MACb,SAAS,cAAc,OAAO,UAAU,GACxC,GAAG,WACC;CACJ,OACE,qBAAC,OAAO,KAAR;EACE,eAAA,GAAA,cAAA,SAAA,CAAqB,KAAK,IAAI,QAAQ,KAAA;EACtC,wBAAqB;EACrB,MAAK;EACL,GAAI;YAJN,CAMG,UACA,OAAO,KAAK,OAAO,UAClB,oBAAC,oBAAD,EAAgC,GAAI,MAAQ,GAAnB,KAAmB,CAC7C,CACS;;AAEhB,GACA,MACF,CAAC,CAAC;AAIF,MAAa,qBAAqB,YAChC,OACA,SACF,CAAC,CAAC"}
+{"version":3,"file":"color-swatch.js","names":[],"sources":["../../../../src/components/color-swatch/color-swatch.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ColorSwatchStyle } from \"./color-swatch.style\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { isString } from \"../../utils\"\nimport { colorSwatchStyle } from \"./color-swatch.style\"\n\nexport const checkersProps: HTMLStyledProps = {\n  bgImage: [\n    \"linear(45deg, {checkers-fg} 25%, transparent 25%)\",\n    \"linear(-45deg, {checkers-fg} 25%, transparent 25%)\",\n    \"linear(45deg, transparent 75%, {checkers-fg} 75%)\",\n    \"linear(-45deg, {checkers-bg} 75%, {checkers-fg} 75%)\",\n  ].join(\", \"),\n  bgPosition: `0 0, 0 4px, 4px -4px, -4px 0`,\n  bgSize: `8px 8px`,\n}\n\nconst defaultLayers = (\n  background: CSSProps[\"color\"],\n  withShadow: boolean,\n): HTMLStyledProps[] => {\n  const layers: HTMLStyledProps[] = [checkersProps, { background }]\n\n  if (withShadow) layers.push({ boxShadow: \"inner\" })\n\n  return layers\n}\n\nexport interface ColorSwatchProps\n  extends Omit<HTMLStyledProps, \"color\">, ThemeProps<ColorSwatchStyle> {\n  /**\n   * The color used for the swatch element.\n   *\n   * @default '#ffffff00'\n   */\n  color?: CSSProps[\"color\"]\n  /**\n   * The overlay used for the swatch element.\n   */\n  layers?: HTMLStyledProps[]\n  /**\n   * If `true`, the swatch element has an inner `box-shadow`.\n   *\n   * @default true\n   */\n  withShadow?: boolean\n}\n\nconst {\n  PropsContext: ColorSwatchPropsContext,\n  usePropsContext: useColorSwatchPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ColorSwatchProps, ColorSwatchStyle>(\n  \"color-swatch\",\n  colorSwatchStyle,\n)\n\nexport { ColorSwatchPropsContext, useColorSwatchPropsContext }\n\n/**\n * `ColorSwatch` is a component that displays color samples.\n *\n * @see https://yamada-ui.com/docs/components/color-swatch\n */\nexport const ColorSwatch = withProvider<\"div\", ColorSwatchProps>(\n  ({\n    children,\n    color = \"#ffffff00\",\n    withShadow = true,\n    layers = defaultLayers(color, withShadow),\n    ...rest\n  }) => {\n    return (\n      <styled.div\n        aria-label={isString(color) ? color : undefined}\n        aria-roledescription=\"color swatch\"\n        role=\"img\"\n        {...rest}\n      >\n        {children}\n        {layers.map((props, index) => (\n          <ColorSwatchOverlay key={index} {...props} />\n        ))}\n      </styled.div>\n    )\n  },\n  \"root\",\n)()\n\nexport interface ColorSwatchOverlayProps extends HTMLStyledProps {}\n\nexport const ColorSwatchOverlay = withContext<\"div\", ColorSwatchOverlayProps>(\n  \"div\",\n  \"overlay\",\n)()\n"],"mappings":";;;;;;;AAQA,MAAa,gBAAiC;CAC5C,SAAS;EACP;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,IAAI;CACX,YAAY;CACZ,QAAQ;AACV;AAEA,MAAM,iBACJ,YACA,eACsB;CACtB,MAAM,SAA4B,CAAC,eAAe,EAAE,WAAW,CAAC;CAEhE,IAAI,YAAY,OAAO,KAAK,EAAE,WAAW,QAAQ,CAAC;CAElD,OAAO;AACT;AAsBA,MAAM,EACJ,cAAc,yBACd,iBAAiB,4BACjB,aACA,iBACE,oBACF,gBACA,gBACF;;;;;;AASA,MAAa,cAAc,cACxB,EACC,UACA,QAAQ,aACR,aAAa,MACb,SAAS,cAAc,OAAO,UAAU,GACxC,GAAG,WACC;CACJ,OACE,qBAAC,OAAO,KAAR;EACE,eAAA,GAAA,cAAA,SAAA,CAAqB,KAAK,IAAI,QAAQ,KAAA;EACtC,wBAAqB;EACrB,MAAK;EACL,GAAI;YAJN,CAMG,UACA,OAAO,KAAK,OAAO,UAClB,oBAAC,oBAAD,EAAgC,GAAI,MAAQ,GAAnB,KAAmB,CAC7C,CACS;;AAEhB,GACA,MACF,CAAC,CAAC;AAIF,MAAa,qBAAqB,YAChC,OACA,SACF,CAAC,CAAC"}

package/dist/esm/components/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","names":["motion"],"sources":["../../../../src/components/modal/modal.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ButtonProps } from \"../button\"\nimport type { CloseButtonProps } from \"../close-button\"\nimport type { FocusLockProps } from \"../focus-lock\"\nimport type { HTMLMotionProps, HTMLMotionPropsWithoutAs } from \"../motion\"\nimport type { UsePopupAnimationProps } from \"../popover\"\nimport type { PortalProps } from \"../portal\"\nimport type { ModalStyle } from \"./modal.style\"\nimport type { UseModalProps, UseModalReturn } from \"./use-modal\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { RemoveScroll } from \"react-remove-scroll\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { cast, isArray, useSplitChildren, wrapOrPassProps } from \"../../utils\"\nimport { Button } from \"../button\"\nimport { CloseButton } from \"../close-button\"\nimport { fadeVariants } from \"../fade\"\nimport { FocusLock } from \"../focus-lock\"\nimport { motion } from \"../motion\"\nimport { usePopupAnimationProps } from \"../popover\"\nimport { Portal } from \"../portal\"\nimport { modalStyle } from \"./modal.style\"\nimport { useModal } from \"./use-modal\"\n\ninterface ComponentContext\n  extends\n    Omit<UseModalReturn, \"getRootProps\">,\n    UsePopupAnimationProps,\n    Pick<ModalRootProps, \"withCloseButton\"> {}\n\nexport interface ModalRootProps\n  extends\n    ThemeProps<ModalStyle>,\n    Omit<UseModalProps, \"title\">,\n    Pick<\n      FocusLockProps,\n      | \"autoFocus\"\n      | \"finalFocusRef\"\n      | \"initialFocusRef\"\n      | \"lockFocusAcrossFrames\"\n      | \"restoreFocus\"\n    >,\n    UsePopupAnimationProps,\n    ShorthandModalContentProps {\n  /**\n   * Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.\n   *\n   * @default false.\n   */\n  allowPinchZoom?: boolean\n  /**\n   * If `true`, scrolling will be disabled on the `body` when the modal opens.\n   *\n   * @default true\n   */\n  blockScrollOnMount?: boolean\n  /**\n   * The modal trigger to use.\n   */\n  trigger?: ReactNode\n  /**\n   * If `true`, display the modal close button.\n   *\n   * @default true\n   */\n  withCloseButton?: boolean\n  /**\n   * If `true`, display the modal overlay.\n   *\n   * @default true\n   */\n  withOverlay?: boolean\n  /**\n   * Props to be forwarded to the portal component.\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n  /**\n   * Callback function to run side effects after the modal has closed.\n   */\n  onCloseComplete?: () => void\n}\n\nconst {\n  ComponentContext,\n  PropsContext: ModalPropsContext,\n  useComponentContext,\n  usePropsContext: useModalPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ModalRootProps, ModalStyle, ComponentContext>(\n  \"modal\",\n  modalStyle,\n)\n\nexport { ModalPropsContext, useModalPropsContext }\n\n/**\n * `Modal` is a component that is displayed over the main content to focus the user's attention solely on the information.\n *\n * @see https://yamada-ui.com/docs/components/modal\n */\nexport const ModalRoot = withProvider<\"div\", ModalRootProps>(\n  ({\n    allowPinchZoom = false,\n    animationScheme = \"scale\",\n    autoFocus,\n    blockScrollOnMount = true,\n    body,\n    cancel,\n    children,\n    duration,\n    finalFocusRef,\n    footer,\n    header,\n    initialFocusRef,\n    lockFocusAcrossFrames = true,\n    middle,\n    restoreFocus,\n    success,\n    title,\n    trigger,\n    withCloseButton = true,\n    withOverlay = true,\n    portalProps,\n    onCancel,\n    onCloseComplete,\n    onMiddle,\n    onSuccess,\n    ...props\n  }) => {\n    const [omittedChildren, openTrigger, customOverlay] = useSplitChildren(\n      children,\n      ModalOpenTrigger,\n      ModalOverlay,\n    )\n    const hasChildren = isArray(omittedChildren) && !!omittedChildren.length\n    const { open, getRootProps, ...rest } = useModal(props)\n    const customOpenTrigger = trigger ? (\n      <ModalOpenTrigger>{trigger}</ModalOpenTrigger>\n    ) : null\n    const context = useMemo(\n      () => ({\n        animationScheme,\n        duration,\n        open,\n        withCloseButton,\n        ...rest,\n      }),\n      [animationScheme, duration, open, withCloseButton, rest],\n    )\n\n    return (\n      <ComponentContext value={context}>\n        {openTrigger ?? customOpenTrigger}\n\n        <AnimatePresence onExitComplete={onCloseComplete}>\n          {open ? (\n            <Portal {...portalProps}>\n              <FocusLock\n                autoFocus={autoFocus}\n                finalFocusRef={finalFocusRef}\n                initialFocusRef={initialFocusRef}\n                lockFocusAcrossFrames={lockFocusAcrossFrames}\n                restoreFocus={restoreFocus}\n              >\n                <RemoveScroll\n                  allowPinchZoom={allowPinchZoom}\n                  enabled={blockScrollOnMount}\n                  forwardProps\n                >\n                  <styled.div {...getRootProps()}>\n                    {customOverlay ?? (withOverlay ? <ModalOverlay /> : null)}\n\n                    {hasChildren ? (\n                      omittedChildren\n                    ) : (\n                      <ShorthandModalContent\n                        body={body}\n                        cancel={cancel}\n                        footer={footer}\n                        header={header}\n                        middle={middle}\n                        success={success}\n                        title={title}\n                        onCancel={onCancel}\n                        onMiddle={onMiddle}\n                        onSuccess={onSuccess}\n                      />\n                    )}\n                  </styled.div>\n                </RemoveScroll>\n              </FocusLock>\n            </Portal>\n          ) : null}\n        </AnimatePresence>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n)()\n\nexport interface ModalOpenTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalOpenTrigger = withContext<\"button\", ModalOpenTriggerProps>(\n  \"button\",\n  { name: \"OpenTrigger\", slot: [\"trigger\", \"open\"] },\n)(undefined, (props) => {\n  const { getOpenTriggerProps } = useComponentContext()\n\n  return { asChild: true, ...getOpenTriggerProps(props) }\n})\n\nexport interface ModalCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalCloseTrigger = withContext<\"button\", ModalCloseTriggerProps>(\n  \"button\",\n  { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] },\n)(undefined, (props) => {\n  const { getCloseTriggerProps } = useComponentContext()\n\n  return { asChild: true, ...getCloseTriggerProps(props) }\n})\n\nexport interface ModalCloseButtonProps extends CloseButtonProps {}\n\nexport const ModalCloseButton = withContext<\"button\", ModalCloseButtonProps>(\n  CloseButton,\n  \"closeButton\",\n)(undefined, (props) => {\n  const { getCloseButtonProps } = useComponentContext()\n\n  return { ...getCloseButtonProps(props) }\n})\n\nexport interface ModalOverlayProps extends HTMLMotionProps {}\n\nexport const ModalOverlay = withContext<\"div\", ModalOverlayProps>((props) => {\n  const {\n    animationScheme,\n    duration: durationProp,\n    getOverlayProps,\n  } = useComponentContext()\n  const duration = useValue(durationProp)\n\n  return (\n    <motion.div\n      custom={{ duration }}\n      {...(animationScheme !== \"none\"\n        ? {\n            animate: \"enter\",\n            exit: \"exit\",\n            initial: \"exit\",\n            variants: fadeVariants,\n          }\n        : {})}\n      {...cast<HTMLMotionProps>(getOverlayProps(cast<HTMLProps>(props)))}\n    />\n  )\n}, \"overlay\")()\n\nexport interface ModalContentProps\n  extends Omit<HTMLMotionProps<\"section\">, \"children\">, PropsWithChildren {}\n\nexport const ModalContent = withContext<\"section\", ModalContentProps>(\n  ({ children, ...rest }) => {\n    const { animationScheme, duration, withCloseButton, getContentProps } =\n      useComponentContext()\n    const [omittedChildren, customCloseButton] = useSplitChildren(\n      children,\n      ModalCloseButton,\n    )\n    const popupAnimationProps = usePopupAnimationProps({\n      animationScheme,\n      duration,\n    })\n\n    return (\n      <motion.section\n        {...popupAnimationProps}\n        {...cast<HTMLMotionPropsWithoutAs<\"section\">>(\n          getContentProps(cast<HTMLProps<\"section\">>(rest)),\n        )}\n      >\n        {customCloseButton ?? (withCloseButton ? <ModalCloseButton /> : null)}\n\n        {omittedChildren}\n      </motion.section>\n    )\n  },\n  \"content\",\n)()\n\ninterface ShorthandModalContentProps {\n  /**\n   * The modal body to use.\n   */\n  body?: ModalBodyProps | ReactNode\n  /**\n   * The modal cancel button to use.\n   */\n  cancel?: ButtonProps | ReactNode\n  /**\n   * The modal footer to use.\n   */\n  footer?: ModalFooterProps | ReactNode\n  /**\n   * The modal header to use.\n   */\n  header?: ModalHeaderProps | ReactNode\n  /**\n   * The modal middle button to use.\n   */\n  middle?: ButtonProps | ReactNode\n  /**\n   * The modal success button to use.\n   */\n  success?: ButtonProps | ReactNode\n  /**\n   * The modal title to use.\n   */\n  title?: ModalTitleProps | ReactNode\n  /**\n   * The callback invoked when cancel button clicked.\n   */\n  onCancel?: (onClose: () => void) => void\n  /**\n   * The callback invoked when middle button clicked.\n   */\n  onMiddle?: (onClose: () => void) => void\n  /**\n   * The callback invoked when success button clicked.\n   */\n  onSuccess?: (onClose: () => void) => void\n}\n\nexport const ShorthandModalContent: FC<ShorthandModalContentProps> = ({\n  body,\n  cancel,\n  footer,\n  header,\n  middle,\n  success,\n  title,\n  onCancel,\n  onMiddle,\n  onSuccess,\n}) => {\n  const { onClose } = useComponentContext()\n  const customHeader = wrapOrPassProps(ModalHeader, header)\n  const customTitle = wrapOrPassProps(ModalTitle, title)\n  const customBody = wrapOrPassProps(ModalBody, body)\n  const customFooter = wrapOrPassProps(ModalFooter, footer)\n  const customCancel = wrapOrPassProps(Button, cancel, {\n    colorScheme: \"mono\",\n    variant: \"ghost\",\n    onClick: () => (onCancel ? onCancel(onClose) : onClose()),\n  })\n  const customMiddle = wrapOrPassProps(Button, middle, {\n    colorScheme: \"secondary\",\n    onClick: () => (onMiddle ? onMiddle(onClose) : onClose()),\n  })\n  const customSuccess = wrapOrPassProps(Button, success, {\n    colorScheme: \"primary\",\n    onClick: () => (onSuccess ? onSuccess(onClose) : onClose()),\n  })\n\n  return (\n    <ModalContent>\n      {customHeader ??\n        (customTitle ? <ModalHeader>{customTitle}</ModalHeader> : null)}\n      {customBody}\n      {customFooter ??\n        (customCancel || customMiddle || customSuccess ? (\n          <ModalFooter>\n            {customCancel}\n            {customMiddle}\n            {customSuccess}\n          </ModalFooter>\n        ) : null)}\n    </ModalContent>\n  )\n}\n\nexport interface ModalHeaderProps extends HTMLStyledProps<\"header\"> {}\n\nexport const ModalHeader = withContext<\"header\", ModalHeaderProps>(\n  \"header\",\n  \"header\",\n)(undefined, (props) => {\n  const { getHeaderProps } = useComponentContext()\n\n  return { ...getHeaderProps(props) }\n})\n\nexport interface ModalTitleProps extends HTMLStyledProps<\"h2\"> {}\n\nexport const ModalTitle = withContext<\"h2\", ModalTitleProps>(\"h2\", \"title\")(\n  undefined,\n  (props) => {\n    const { getTitleProps } = useComponentContext()\n\n    return { ...getTitleProps(props) }\n  },\n)\n\nexport interface ModalBodyProps extends HTMLStyledProps {}\n\nexport const ModalBody = withContext<\"div\", ModalBodyProps>(\"div\", \"body\")(\n  undefined,\n  (props) => {\n    const { getBodyProps } = useComponentContext()\n\n    return { ...getBodyProps(props) }\n  },\n)\n\nexport interface ModalFooterProps extends HTMLStyledProps<\"footer\"> {}\n\nexport const ModalFooter = withContext<\"footer\", ModalFooterProps>(\n  \"footer\",\n  \"footer\",\n)(undefined, (props) => {\n  const { getFooterProps } = useComponentContext()\n\n  return { ...getFooterProps(props) }\n})\n"],"mappings":"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"}
+{"version":3,"file":"modal.js","names":["motion"],"sources":["../../../../src/components/modal/modal.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren, ReactNode } from \"react\"\nimport type { HTMLProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ButtonProps } from \"../button\"\nimport type { CloseButtonProps } from \"../close-button\"\nimport type { FocusLockProps } from \"../focus-lock\"\nimport type { HTMLMotionProps, HTMLMotionPropsWithoutAs } from \"../motion\"\nimport type { UsePopupAnimationProps } from \"../popover\"\nimport type { PortalProps } from \"../portal\"\nimport type { ModalStyle } from \"./modal.style\"\nimport type { UseModalProps, UseModalReturn } from \"./use-modal\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { RemoveScroll } from \"react-remove-scroll\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { cast, isArray, useSplitChildren, wrapOrPassProps } from \"../../utils\"\nimport { Button } from \"../button\"\nimport { CloseButton } from \"../close-button\"\nimport { fadeVariants } from \"../fade\"\nimport { FocusLock } from \"../focus-lock\"\nimport { motion } from \"../motion\"\nimport { usePopupAnimationProps } from \"../popover\"\nimport { Portal } from \"../portal\"\nimport { modalStyle } from \"./modal.style\"\nimport { useModal } from \"./use-modal\"\n\ninterface ComponentContext\n  extends\n    Omit<UseModalReturn, \"getRootProps\">,\n    UsePopupAnimationProps,\n    Pick<ModalRootProps, \"withCloseButton\"> {}\n\nexport interface ModalRootProps\n  extends\n    Omit<HTMLStyledProps<\"div\">, \"scrollBehavior\" | \"title\">,\n    ThemeProps<ModalStyle>,\n    Omit<UseModalProps, \"title\">,\n    Pick<\n      FocusLockProps,\n      | \"autoFocus\"\n      | \"finalFocusRef\"\n      | \"initialFocusRef\"\n      | \"lockFocusAcrossFrames\"\n      | \"restoreFocus\"\n    >,\n    UsePopupAnimationProps,\n    ShorthandModalContentProps {\n  /**\n   * Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.\n   *\n   * @default false.\n   */\n  allowPinchZoom?: boolean\n  /**\n   * If `true`, scrolling will be disabled on the `body` when the modal opens.\n   *\n   * @default true\n   */\n  blockScrollOnMount?: boolean\n  /**\n   * The modal trigger to use.\n   */\n  trigger?: ReactNode\n  /**\n   * If `true`, display the modal close button.\n   *\n   * @default true\n   */\n  withCloseButton?: boolean\n  /**\n   * If `true`, display the modal overlay.\n   *\n   * @default true\n   */\n  withOverlay?: boolean\n  /**\n   * Props to be forwarded to the portal component.\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n  /**\n   * Callback function to run side effects after the modal has closed.\n   */\n  onCloseComplete?: () => void\n}\n\nconst {\n  ComponentContext,\n  PropsContext: ModalPropsContext,\n  useComponentContext,\n  usePropsContext: useModalPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<ModalRootProps, ModalStyle, ComponentContext>(\n  \"modal\",\n  modalStyle,\n)\n\nexport { ModalPropsContext, useModalPropsContext }\n\n/**\n * `Modal` is a component that is displayed over the main content to focus the user's attention solely on the information.\n *\n * @see https://yamada-ui.com/docs/components/modal\n */\nexport const ModalRoot = withProvider<\"div\", ModalRootProps>(\n  ({\n    allowPinchZoom = false,\n    animationScheme = \"scale\",\n    autoFocus,\n    blockScrollOnMount = true,\n    body,\n    cancel,\n    children,\n    duration,\n    finalFocusRef,\n    footer,\n    header,\n    initialFocusRef,\n    lockFocusAcrossFrames = true,\n    middle,\n    restoreFocus,\n    success,\n    title,\n    trigger,\n    withCloseButton = true,\n    withOverlay = true,\n    portalProps,\n    onCancel,\n    onCloseComplete,\n    onMiddle,\n    onSuccess,\n    ...props\n  }) => {\n    const [omittedChildren, openTrigger, customOverlay] = useSplitChildren(\n      children,\n      ModalOpenTrigger,\n      ModalOverlay,\n    )\n    const hasChildren = isArray(omittedChildren) && !!omittedChildren.length\n    const { open, getRootProps, ...rest } = useModal(props)\n    const customOpenTrigger = trigger ? (\n      <ModalOpenTrigger>{trigger}</ModalOpenTrigger>\n    ) : null\n    const context = useMemo(\n      () => ({\n        animationScheme,\n        duration,\n        open,\n        withCloseButton,\n        ...rest,\n      }),\n      [animationScheme, duration, open, withCloseButton, rest],\n    )\n\n    return (\n      <ComponentContext value={context}>\n        {openTrigger ?? customOpenTrigger}\n\n        <AnimatePresence onExitComplete={onCloseComplete}>\n          {open ? (\n            <Portal {...portalProps}>\n              <FocusLock\n                autoFocus={autoFocus}\n                finalFocusRef={finalFocusRef}\n                initialFocusRef={initialFocusRef}\n                lockFocusAcrossFrames={lockFocusAcrossFrames}\n                restoreFocus={restoreFocus}\n              >\n                <RemoveScroll\n                  allowPinchZoom={allowPinchZoom}\n                  enabled={blockScrollOnMount}\n                  forwardProps\n                >\n                  <styled.div {...getRootProps()}>\n                    {customOverlay ?? (withOverlay ? <ModalOverlay /> : null)}\n\n                    {hasChildren ? (\n                      omittedChildren\n                    ) : (\n                      <ShorthandModalContent\n                        body={body}\n                        cancel={cancel}\n                        footer={footer}\n                        header={header}\n                        middle={middle}\n                        success={success}\n                        title={title}\n                        onCancel={onCancel}\n                        onMiddle={onMiddle}\n                        onSuccess={onSuccess}\n                      />\n                    )}\n                  </styled.div>\n                </RemoveScroll>\n              </FocusLock>\n            </Portal>\n          ) : null}\n        </AnimatePresence>\n      </ComponentContext>\n    )\n  },\n  \"root\",\n)()\n\nexport interface ModalOpenTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalOpenTrigger = withContext<\"button\", ModalOpenTriggerProps>(\n  \"button\",\n  { name: \"OpenTrigger\", slot: [\"trigger\", \"open\"] },\n)(undefined, (props) => {\n  const { getOpenTriggerProps } = useComponentContext()\n\n  return { asChild: true, ...getOpenTriggerProps(props) }\n})\n\nexport interface ModalCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const ModalCloseTrigger = withContext<\"button\", ModalCloseTriggerProps>(\n  \"button\",\n  { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] },\n)(undefined, (props) => {\n  const { getCloseTriggerProps } = useComponentContext()\n\n  return { asChild: true, ...getCloseTriggerProps(props) }\n})\n\nexport interface ModalCloseButtonProps extends CloseButtonProps {}\n\nexport const ModalCloseButton = withContext<\"button\", ModalCloseButtonProps>(\n  CloseButton,\n  \"closeButton\",\n)(undefined, (props) => {\n  const { getCloseButtonProps } = useComponentContext()\n\n  return { ...getCloseButtonProps(props) }\n})\n\nexport interface ModalOverlayProps extends HTMLMotionProps {}\n\nexport const ModalOverlay = withContext<\"div\", ModalOverlayProps>((props) => {\n  const {\n    animationScheme,\n    duration: durationProp,\n    getOverlayProps,\n  } = useComponentContext()\n  const duration = useValue(durationProp)\n\n  return (\n    <motion.div\n      custom={{ duration }}\n      {...(animationScheme !== \"none\"\n        ? {\n            animate: \"enter\",\n            exit: \"exit\",\n            initial: \"exit\",\n            variants: fadeVariants,\n          }\n        : {})}\n      {...cast<HTMLMotionProps>(getOverlayProps(cast<HTMLProps>(props)))}\n    />\n  )\n}, \"overlay\")()\n\nexport interface ModalContentProps\n  extends Omit<HTMLMotionProps<\"section\">, \"children\">, PropsWithChildren {}\n\nexport const ModalContent = withContext<\"section\", ModalContentProps>(\n  ({ children, ...rest }) => {\n    const { animationScheme, duration, withCloseButton, getContentProps } =\n      useComponentContext()\n    const [omittedChildren, customCloseButton] = useSplitChildren(\n      children,\n      ModalCloseButton,\n    )\n    const popupAnimationProps = usePopupAnimationProps({\n      animationScheme,\n      duration,\n    })\n\n    return (\n      <motion.section\n        {...popupAnimationProps}\n        {...cast<HTMLMotionPropsWithoutAs<\"section\">>(\n          getContentProps(cast<HTMLProps<\"section\">>(rest)),\n        )}\n      >\n        {customCloseButton ?? (withCloseButton ? <ModalCloseButton /> : null)}\n\n        {omittedChildren}\n      </motion.section>\n    )\n  },\n  \"content\",\n)()\n\ninterface ShorthandModalContentProps {\n  /**\n   * The modal body to use.\n   */\n  body?: ModalBodyProps | ReactNode\n  /**\n   * The modal cancel button to use.\n   */\n  cancel?: ButtonProps | ReactNode\n  /**\n   * The modal footer to use.\n   */\n  footer?: ModalFooterProps | ReactNode\n  /**\n   * The modal header to use.\n   */\n  header?: ModalHeaderProps | ReactNode\n  /**\n   * The modal middle button to use.\n   */\n  middle?: ButtonProps | ReactNode\n  /**\n   * The modal success button to use.\n   */\n  success?: ButtonProps | ReactNode\n  /**\n   * The modal title to use.\n   */\n  title?: ModalTitleProps | ReactNode\n  /**\n   * The callback invoked when cancel button clicked.\n   */\n  onCancel?: (onClose: () => void) => void\n  /**\n   * The callback invoked when middle button clicked.\n   */\n  onMiddle?: (onClose: () => void) => void\n  /**\n   * The callback invoked when success button clicked.\n   */\n  onSuccess?: (onClose: () => void) => void\n}\n\nexport const ShorthandModalContent: FC<ShorthandModalContentProps> = ({\n  body,\n  cancel,\n  footer,\n  header,\n  middle,\n  success,\n  title,\n  onCancel,\n  onMiddle,\n  onSuccess,\n}) => {\n  const { onClose } = useComponentContext()\n  const customHeader = wrapOrPassProps(ModalHeader, header)\n  const customTitle = wrapOrPassProps(ModalTitle, title)\n  const customBody = wrapOrPassProps(ModalBody, body)\n  const customFooter = wrapOrPassProps(ModalFooter, footer)\n  const customCancel = wrapOrPassProps(Button, cancel, {\n    colorScheme: \"mono\",\n    variant: \"ghost\",\n    onClick: () => (onCancel ? onCancel(onClose) : onClose()),\n  })\n  const customMiddle = wrapOrPassProps(Button, middle, {\n    colorScheme: \"secondary\",\n    onClick: () => (onMiddle ? onMiddle(onClose) : onClose()),\n  })\n  const customSuccess = wrapOrPassProps(Button, success, {\n    colorScheme: \"primary\",\n    onClick: () => (onSuccess ? onSuccess(onClose) : onClose()),\n  })\n\n  return (\n    <ModalContent>\n      {customHeader ??\n        (customTitle ? <ModalHeader>{customTitle}</ModalHeader> : null)}\n      {customBody}\n      {customFooter ??\n        (customCancel || customMiddle || customSuccess ? (\n          <ModalFooter>\n            {customCancel}\n            {customMiddle}\n            {customSuccess}\n          </ModalFooter>\n        ) : null)}\n    </ModalContent>\n  )\n}\n\nexport interface ModalHeaderProps extends HTMLStyledProps<\"header\"> {}\n\nexport const ModalHeader = withContext<\"header\", ModalHeaderProps>(\n  \"header\",\n  \"header\",\n)(undefined, (props) => {\n  const { getHeaderProps } = useComponentContext()\n\n  return { ...getHeaderProps(props) }\n})\n\nexport interface ModalTitleProps extends HTMLStyledProps<\"h2\"> {}\n\nexport const ModalTitle = withContext<\"h2\", ModalTitleProps>(\"h2\", \"title\")(\n  undefined,\n  (props) => {\n    const { getTitleProps } = useComponentContext()\n\n    return { ...getTitleProps(props) }\n  },\n)\n\nexport interface ModalBodyProps extends HTMLStyledProps {}\n\nexport const ModalBody = withContext<\"div\", ModalBodyProps>(\"div\", \"body\")(\n  undefined,\n  (props) => {\n    const { getBodyProps } = useComponentContext()\n\n    return { ...getBodyProps(props) }\n  },\n)\n\nexport interface ModalFooterProps extends HTMLStyledProps<\"footer\"> {}\n\nexport const ModalFooter = withContext<\"footer\", ModalFooterProps>(\n  \"footer\",\n  \"footer\",\n)(undefined, (props) => {\n  const { getFooterProps } = useComponentContext()\n\n  return { ...getFooterProps(props) }\n})\n"],"mappings":"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"}

package/dist/esm/components/progress/progress.style.js

@@ -59,7 +59,7 @@ const progressStyle = defineComponentSlotStyle({
 			"--stripe-angle": "45deg",
 			"--stripe-color": ["rgba(255, 255, 255, 0.3)", "rgba(0, 0, 0, 0.3)"],
 			"--stripe-size": "1rem",
-			bgImage: `linear-gradient(
+			bgImage: `linear(
             {stripe-angle},
             {stripe-color} 25%,
             transparent 25%,

package/dist/esm/components/progress/progress.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress.style.js","names":[],"sources":["../../../../src/components/progress/progress.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const progressStyle = defineComponentSlotStyle({\n  base: {\n    range: {\n      bgColor: \"{filledTrackColor}\",\n      h: \"full\",\n      rounded: \"inherit\",\n      transitionDuration: \"slow\",\n      transitionProperty: \"size\",\n      w: \"{width}\",\n      _indeterminate: {\n        \"--animation-from-x\": \"-40%\",\n        \"--animation-to-x\": \"100%\",\n        animationDuration: \"{duration, 1s}\",\n        animationIterationCount: \"infinite\",\n        animationName: \"position\",\n        animationTimingFunction: \"ease\",\n        minW: \"50%\",\n        position: \"absolute\",\n        willChange: \"left\",\n      },\n    },\n    root: {\n      overflow: \"hidden\",\n      position: \"relative\",\n      w: \"full\",\n    },\n  },\n\n  props: {\n    /**\n     * If `true`, the progress bar will animate.\n     *\n     * @default false\n     */\n    animated: {\n      true: {\n        range: {\n          \"--animation-from\": \"{stripe-size}\",\n          animationDuration: \"{duration, 1s}\",\n          animationIterationCount: \"infinite\",\n          animationName: \"bg-position\",\n          animationTimingFunction: \"linear\",\n        },\n      },\n    },\n    /**\n     * The shape of the progress bar.\n     *\n     * @default 'rounded'\n     */\n    shape: {\n      circle: {\n        root: { rounded: \"full\" },\n      },\n      rounded: {\n        root: { rounded: \"l1\" },\n      },\n      square: {\n        root: { rounded: \"0\" },\n      },\n    },\n    /**\n     * If `true`, the progress bar will show stripe.\n     *\n     * @default false\n     */\n    striped: {\n      true: {\n        range: {\n          \"--stripe-angle\": \"45deg\",\n          \"--stripe-color\": [\"rgba(255, 255, 255, 0.3)\", \"rgba(0, 0, 0, 0.3)\"],\n          \"--stripe-size\": \"1rem\",\n          bgImage: `linear-gradient(\n            {stripe-angle},\n            {stripe-color} 25%,\n            transparent 25%,\n            transparent 50%,\n            {stripe-color} 50%,\n            {stripe-color} 75%,\n            transparent 75%,\n            transparent\n          )`,\n          bgSize: \"{stripe-size} {stripe-size}\",\n        },\n      },\n    },\n  },\n\n  variants: {\n    outline: {\n      range: {\n        bg: \"colorScheme.solid\",\n      },\n      root: {\n        bg: \"bg.subtle\",\n      },\n    },\n    subtle: {\n      range: {\n        bg: \"colorScheme.solid/80\",\n      },\n      root: {\n        bg: [\"colorScheme.muted\", \"colorScheme.subtle\"],\n      },\n    },\n  },\n\n  sizes: {\n    xs: {\n      root: { h: \"1\" },\n    },\n    sm: {\n      root: { h: \"2\" },\n    },\n    md: {\n      root: { h: \"3\" },\n    },\n    lg: {\n      root: { h: \"4\" },\n    },\n    xl: {\n      root: { h: \"5\" },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"outline\",\n    shape: \"rounded\",\n    striped: false,\n  },\n})\n\nexport type ProgressStyle = typeof progressStyle\n"],"mappings":";;AAEA,MAAa,gBAAgB,yBAAyB;CACpD,MAAM;EACJ,OAAO;GACL,SAAS;GACT,GAAG;GACH,SAAS;GACT,oBAAoB;GACpB,oBAAoB;GACpB,GAAG;GACH,gBAAgB;IACd,sBAAsB;IACtB,oBAAoB;IACpB,mBAAmB;IACnB,yBAAyB;IACzB,eAAe;IACf,yBAAyB;IACzB,MAAM;IACN,UAAU;IACV,YAAY;GACd;EACF;EACA,MAAM;GACJ,UAAU;GACV,UAAU;GACV,GAAG;EACL;CACF;CAEA,OAAO;;;;;;EAML,UAAU,EACR,MAAM,EACJ,OAAO;GACL,oBAAoB;GACpB,mBAAmB;GACnB,yBAAyB;GACzB,eAAe;GACf,yBAAyB;EAC3B,EACF,EACF;;;;;;EAMA,OAAO;GACL,QAAQ,EACN,MAAM,EAAE,SAAS,OAAO,EAC1B;GACA,SAAS,EACP,MAAM,EAAE,SAAS,KAAK,EACxB;GACA,QAAQ,EACN,MAAM,EAAE,SAAS,IAAI,EACvB;EACF;;;;;;EAMA,SAAS,EACP,MAAM,EACJ,OAAO;GACL,kBAAkB;GAClB,kBAAkB,CAAC,4BAA4B,oBAAoB;GACnE,iBAAiB;GACjB,SAAS;;;;;;;;;;GAUT,QAAQ;EACV,EACF,EACF;CACF;CAEA,UAAU;EACR,SAAS;GACP,OAAO,EACL,IAAI,oBACN;GACA,MAAM,EACJ,IAAI,YACN;EACF;EACA,QAAQ;GACN,OAAO,EACL,IAAI,uBACN;GACA,MAAM,EACJ,IAAI,CAAC,qBAAqB,oBAAoB,EAChD;EACF;CACF;CAEA,OAAO;EACL,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;EACA,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;EACA,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;EACA,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;EACA,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;CACF;CAEA,cAAc;EACZ,MAAM;EACN,SAAS;EACT,OAAO;EACP,SAAS;CACX;AACF,CAAC"}
+{"version":3,"file":"progress.style.js","names":[],"sources":["../../../../src/components/progress/progress.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const progressStyle = defineComponentSlotStyle({\n  base: {\n    range: {\n      bgColor: \"{filledTrackColor}\",\n      h: \"full\",\n      rounded: \"inherit\",\n      transitionDuration: \"slow\",\n      transitionProperty: \"size\",\n      w: \"{width}\",\n      _indeterminate: {\n        \"--animation-from-x\": \"-40%\",\n        \"--animation-to-x\": \"100%\",\n        animationDuration: \"{duration, 1s}\",\n        animationIterationCount: \"infinite\",\n        animationName: \"position\",\n        animationTimingFunction: \"ease\",\n        minW: \"50%\",\n        position: \"absolute\",\n        willChange: \"left\",\n      },\n    },\n    root: {\n      overflow: \"hidden\",\n      position: \"relative\",\n      w: \"full\",\n    },\n  },\n\n  props: {\n    /**\n     * If `true`, the progress bar will animate.\n     *\n     * @default false\n     */\n    animated: {\n      true: {\n        range: {\n          \"--animation-from\": \"{stripe-size}\",\n          animationDuration: \"{duration, 1s}\",\n          animationIterationCount: \"infinite\",\n          animationName: \"bg-position\",\n          animationTimingFunction: \"linear\",\n        },\n      },\n    },\n    /**\n     * The shape of the progress bar.\n     *\n     * @default 'rounded'\n     */\n    shape: {\n      circle: {\n        root: { rounded: \"full\" },\n      },\n      rounded: {\n        root: { rounded: \"l1\" },\n      },\n      square: {\n        root: { rounded: \"0\" },\n      },\n    },\n    /**\n     * If `true`, the progress bar will show stripe.\n     *\n     * @default false\n     */\n    striped: {\n      true: {\n        range: {\n          \"--stripe-angle\": \"45deg\",\n          \"--stripe-color\": [\"rgba(255, 255, 255, 0.3)\", \"rgba(0, 0, 0, 0.3)\"],\n          \"--stripe-size\": \"1rem\",\n          bgImage: `linear(\n            {stripe-angle},\n            {stripe-color} 25%,\n            transparent 25%,\n            transparent 50%,\n            {stripe-color} 50%,\n            {stripe-color} 75%,\n            transparent 75%,\n            transparent\n          )`,\n          bgSize: \"{stripe-size} {stripe-size}\",\n        },\n      },\n    },\n  },\n\n  variants: {\n    outline: {\n      range: {\n        bg: \"colorScheme.solid\",\n      },\n      root: {\n        bg: \"bg.subtle\",\n      },\n    },\n    subtle: {\n      range: {\n        bg: \"colorScheme.solid/80\",\n      },\n      root: {\n        bg: [\"colorScheme.muted\", \"colorScheme.subtle\"],\n      },\n    },\n  },\n\n  sizes: {\n    xs: {\n      root: { h: \"1\" },\n    },\n    sm: {\n      root: { h: \"2\" },\n    },\n    md: {\n      root: { h: \"3\" },\n    },\n    lg: {\n      root: { h: \"4\" },\n    },\n    xl: {\n      root: { h: \"5\" },\n    },\n  },\n\n  defaultProps: {\n    size: \"md\",\n    variant: \"outline\",\n    shape: \"rounded\",\n    striped: false,\n  },\n})\n\nexport type ProgressStyle = typeof progressStyle\n"],"mappings":";;AAEA,MAAa,gBAAgB,yBAAyB;CACpD,MAAM;EACJ,OAAO;GACL,SAAS;GACT,GAAG;GACH,SAAS;GACT,oBAAoB;GACpB,oBAAoB;GACpB,GAAG;GACH,gBAAgB;IACd,sBAAsB;IACtB,oBAAoB;IACpB,mBAAmB;IACnB,yBAAyB;IACzB,eAAe;IACf,yBAAyB;IACzB,MAAM;IACN,UAAU;IACV,YAAY;GACd;EACF;EACA,MAAM;GACJ,UAAU;GACV,UAAU;GACV,GAAG;EACL;CACF;CAEA,OAAO;;;;;;EAML,UAAU,EACR,MAAM,EACJ,OAAO;GACL,oBAAoB;GACpB,mBAAmB;GACnB,yBAAyB;GACzB,eAAe;GACf,yBAAyB;EAC3B,EACF,EACF;;;;;;EAMA,OAAO;GACL,QAAQ,EACN,MAAM,EAAE,SAAS,OAAO,EAC1B;GACA,SAAS,EACP,MAAM,EAAE,SAAS,KAAK,EACxB;GACA,QAAQ,EACN,MAAM,EAAE,SAAS,IAAI,EACvB;EACF;;;;;;EAMA,SAAS,EACP,MAAM,EACJ,OAAO;GACL,kBAAkB;GAClB,kBAAkB,CAAC,4BAA4B,oBAAoB;GACnE,iBAAiB;GACjB,SAAS;;;;;;;;;;GAUT,QAAQ;EACV,EACF,EACF;CACF;CAEA,UAAU;EACR,SAAS;GACP,OAAO,EACL,IAAI,oBACN;GACA,MAAM,EACJ,IAAI,YACN;EACF;EACA,QAAQ;GACN,OAAO,EACL,IAAI,uBACN;GACA,MAAM,EACJ,IAAI,CAAC,qBAAqB,oBAAoB,EAChD;EACF;CACF;CAEA,OAAO;EACL,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;EACA,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;EACA,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;EACA,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;EACA,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;CACF;CAEA,cAAc;EACZ,MAAM;EACN,SAAS;EACT,OAAO;EACP,SAAS;CACX;AACF,CAAC"}

package/dist/esm/components/skeleton/skeleton.style.js

@@ -50,7 +50,7 @@ loading: {
 			animationIterationCount: "infinite",
 			animationName: "bg-position",
 			animationTimingFunction: "ease-in-out",
-			bgImage: "linear-gradient(270deg, {start-color}, {end-color}, {end-color}, {start-color})",
+			bgImage: "linear(270deg, {start-color}, {end-color}, {end-color}, {start-color})",
 			bgSize: "400% 100%"
 		}
 	},

package/dist/esm/components/skeleton/skeleton.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.style.js","names":[],"sources":["../../../../src/components/skeleton/skeleton.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const skeletonStyle = defineComponentStyle({\n  base: {},\n\n  props: {\n    /**\n     * If `false`, it'll render its children with a nice fade transition.\n     *\n     * @default true\n     */\n    loading: {\n      false: {\n        animationDuration: \"{fade-duration, 0.1s}\",\n        animationIterationCount: \"1\",\n        animationName: \"fade-in\",\n        animationTimingFunction: \"ease-out\",\n        bg: \"unset\",\n      },\n      true: {\n        \"&::before, &::after, *\": {\n          visibility: \"hidden\",\n        },\n        \"--height\": \"sizes.6\",\n        \"--width\": \"sizes.full\",\n        bgClip: \"padding-box\",\n        boxShadow: \"none\",\n        color: \"transparent\",\n        cursor: \"default\",\n        flexShrink: \"0\",\n        h: \"{height}\",\n        maxW: \"full\",\n        pointerEvents: \"none\",\n        rounded: \"l1\",\n        userSelect: \"none\",\n        w: \"{width}\",\n      },\n    },\n  },\n\n  variants: {\n    none: {\n      animation: \"none\",\n    },\n    pulse: {\n      animationDuration: \"{duration, 1.2s}\",\n      animationIterationCount: \"infinite\",\n      animationName: \"pulse\",\n      bg: \"bg.muted\",\n    },\n    shine: {\n      \"--animation-from\": \"200%\",\n      \"--animation-to\": \"-200%\",\n      \"--end-color\": \"colors.bg.muted\",\n      \"--start-color\": \"colors.bg.subtle\",\n      animationDuration: \"{duration, 5s}\",\n      animationIterationCount: \"infinite\",\n      animationName: \"bg-position\",\n      animationTimingFunction: \"ease-in-out\",\n      bgImage:\n        \"linear-gradient(270deg, {start-color}, {end-color}, {end-color}, {start-color})\",\n      bgSize: \"400% 100%\",\n    },\n  },\n\n  defaultProps: {\n    variant: \"pulse\",\n    loading: true,\n  },\n})\n\nexport type SkeletonStyle = typeof skeletonStyle\n"],"mappings":";;AAEA,MAAa,gBAAgB,qBAAqB;CAChD,MAAM,CAAC;CAEP,OAAO;;;;;;AAML,SAAS;EACP,OAAO;GACL,mBAAmB;GACnB,yBAAyB;GACzB,eAAe;GACf,yBAAyB;GACzB,IAAI;EACN;EACA,MAAM;GACJ,0BAA0B,EACxB,YAAY,SACd;GACA,YAAY;GACZ,WAAW;GACX,QAAQ;GACR,WAAW;GACX,OAAO;GACP,QAAQ;GACR,YAAY;GACZ,GAAG;GACH,MAAM;GACN,eAAe;GACf,SAAS;GACT,YAAY;GACZ,GAAG;EACL;CACF,EACF;CAEA,UAAU;EACR,MAAM,EACJ,WAAW,OACb;EACA,OAAO;GACL,mBAAmB;GACnB,yBAAyB;GACzB,eAAe;GACf,IAAI;EACN;EACA,OAAO;GACL,oBAAoB;GACpB,kBAAkB;GAClB,eAAe;GACf,iBAAiB;GACjB,mBAAmB;GACnB,yBAAyB;GACzB,eAAe;GACf,yBAAyB;GACzB,SACE;GACF,QAAQ;EACV;CACF;CAEA,cAAc;EACZ,SAAS;EACT,SAAS;CACX;AACF,CAAC"}
+{"version":3,"file":"skeleton.style.js","names":[],"sources":["../../../../src/components/skeleton/skeleton.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const skeletonStyle = defineComponentStyle({\n  base: {},\n\n  props: {\n    /**\n     * If `false`, it'll render its children with a nice fade transition.\n     *\n     * @default true\n     */\n    loading: {\n      false: {\n        animationDuration: \"{fade-duration, 0.1s}\",\n        animationIterationCount: \"1\",\n        animationName: \"fade-in\",\n        animationTimingFunction: \"ease-out\",\n        bg: \"unset\",\n      },\n      true: {\n        \"&::before, &::after, *\": {\n          visibility: \"hidden\",\n        },\n        \"--height\": \"sizes.6\",\n        \"--width\": \"sizes.full\",\n        bgClip: \"padding-box\",\n        boxShadow: \"none\",\n        color: \"transparent\",\n        cursor: \"default\",\n        flexShrink: \"0\",\n        h: \"{height}\",\n        maxW: \"full\",\n        pointerEvents: \"none\",\n        rounded: \"l1\",\n        userSelect: \"none\",\n        w: \"{width}\",\n      },\n    },\n  },\n\n  variants: {\n    none: {\n      animation: \"none\",\n    },\n    pulse: {\n      animationDuration: \"{duration, 1.2s}\",\n      animationIterationCount: \"infinite\",\n      animationName: \"pulse\",\n      bg: \"bg.muted\",\n    },\n    shine: {\n      \"--animation-from\": \"200%\",\n      \"--animation-to\": \"-200%\",\n      \"--end-color\": \"colors.bg.muted\",\n      \"--start-color\": \"colors.bg.subtle\",\n      animationDuration: \"{duration, 5s}\",\n      animationIterationCount: \"infinite\",\n      animationName: \"bg-position\",\n      animationTimingFunction: \"ease-in-out\",\n      bgImage:\n        \"linear(270deg, {start-color}, {end-color}, {end-color}, {start-color})\",\n      bgSize: \"400% 100%\",\n    },\n  },\n\n  defaultProps: {\n    variant: \"pulse\",\n    loading: true,\n  },\n})\n\nexport type SkeletonStyle = typeof skeletonStyle\n"],"mappings":";;AAEA,MAAa,gBAAgB,qBAAqB;CAChD,MAAM,CAAC;CAEP,OAAO;;;;;;AAML,SAAS;EACP,OAAO;GACL,mBAAmB;GACnB,yBAAyB;GACzB,eAAe;GACf,yBAAyB;GACzB,IAAI;EACN;EACA,MAAM;GACJ,0BAA0B,EACxB,YAAY,SACd;GACA,YAAY;GACZ,WAAW;GACX,QAAQ;GACR,WAAW;GACX,OAAO;GACP,QAAQ;GACR,YAAY;GACZ,GAAG;GACH,MAAM;GACN,eAAe;GACf,SAAS;GACT,YAAY;GACZ,GAAG;EACL;CACF,EACF;CAEA,UAAU;EACR,MAAM,EACJ,WAAW,OACb;EACA,OAAO;GACL,mBAAmB;GACnB,yBAAyB;GACzB,eAAe;GACf,IAAI;EACN;EACA,OAAO;GACL,oBAAoB;GACpB,kBAAkB;GAClB,eAAe;GACf,iBAAiB;GACjB,mBAAmB;GACnB,yBAAyB;GACzB,eAAe;GACf,yBAAyB;GACzB,SACE;GACF,QAAQ;EACV;CACF;CAEA,cAAc;EACZ,SAAS;EACT,SAAS;CACX;AACF,CAAC"}

package/dist/esm/core/css/gradient.js

@@ -15,25 +15,27 @@ const directionValues = new Set(Object.values(directions));
 function gradient(value, { system }) {
 	if (value == null || globalValues.has(value)) return value;
 	if (!isCSSFunction(value)) 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, utils_exports.isUndefined)(direction)) colors.unshift(direction);
-	const computedValues = colors.map((_color) => {
-		if ((0, utils_exports.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?.split(" ");
-		const token = `colors.${color}`;
-		color = isCSSToken(system)(token) ? system.cssMap[token].ref : color;
-		if (ratio) return [color, ...(0, utils_exports.isArray)(ratio) ? ratio : [ratio]].join(" ");
-		else return color;
-	});
-	return `${type}(${computedValues.join(", ")})`;
+	return splitValues(value).map((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, utils_exports.isUndefined)(direction)) colors.unshift(direction);
+		const computedValues = colors.map((_color) => {
+			if ((0, utils_exports.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?.split(" ");
+			const token = `colors.${color}`;
+			color = isCSSToken(system)(token) ? system.cssMap[token].ref : color;
+			if (ratio) return [color, ...(0, utils_exports.isArray)(ratio) ? ratio : [ratio]].join(" ");
+			else return color;
+		});
+		return `${type}(${computedValues.join(", ")})`;
+	}).join(", ");
 }
 //#endregion
 export { gradient };

package/dist/esm/core/css/gradient.js.map

@@ -1 +1 @@
-{"version":3,"file":"gradient.js","names":[],"sources":["../../../../src/core/css/gradient.ts"],"sourcesContent":["import type { TransformOptions } from \"./utils\"\nimport { isArray, isUndefined } from \"../../utils\"\nimport {\n  getCSSFunction,\n  globalValues,\n  isCSSFunction,\n  isCSSToken,\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(value: any, { system }: TransformOptions) {\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 = isCSSToken(system)(token) ? system.cssMap[token]!.ref : color\n\n    if (ratio) return [color, ...(isArray(ratio) ? ratio : [ratio])].join(\" \")\n    else return color\n  })\n\n  return `${type}(${computedValues.join(\", \")})`\n}\n"],"mappings":";;;AAUA,MAAM,aAAwC;CAC5C,QAAQ;CACR,SAAS;CACT,SAAS;CACT,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,SAAS;AACX;AAEA,MAAM,kBAAkB,IAAI,IAAI,OAAO,OAAO,UAAU,CAAC;AAEzD,SAAgB,SAAS,OAAY,EAAE,UAA4B;CACjE,IAAI,SAAS,QAAQ,aAAa,IAAI,KAAK,GAAG,OAAO;CAIrD,IAAI,CAFY,cAAc,KAEnB,GAAG,OAAO,QAAQ,MAAM;CAEnC,IAAI,EAAE,MAAM,WAAW,eAAe,KAAK;CAE3C,IAAI,CAAC,QAAQ,CAAC,QAAQ,OAAO;CAE7B,OAAO,KAAK,SAAS,WAAW,IAAI,OAAO,GAAG,KAAK;CAEnD,MAAM,CAAC,gBAAgB,GAAG,UAAU,YAAY,MAAM;CAEtD,IAAI,CAAC,OAAO,QAAQ,OAAO;CAE3B,MAAM,YACJ,kBAAkB,kBAAkB,aAChC,WAAW,kBACX;CAEN,IAAI,EAAA,GAAA,cAAA,YAAA,CAAa,SAAS,GAAG,OAAO,QAAQ,SAAS;CAErD,MAAM,iBAAiB,OAAO,KAAK,WAAW;EAC5C,KAAA,GAAA,cAAA,YAAA,CAAgB,MAAM,GAAG,OAAO;EAEhC,IAAI,gBAAgB,IAAI,MAAM,GAAG,OAAO;EAExC,MAAM,IAAI,OAAO,QAAQ,GAAG;EAE5B,IAAI,CAAC,OAAO,UACV,MAAM,KAAK,CAAC,OAAO,MAAM,GAAG,CAAC,GAAG,OAAO,MAAM,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM;EAEhE,MAAM,QAAQ,cAAc,MAAM,IAAI,SAAS,QAAQ,MAAM,GAAG;EAEhE,MAAM,QAAQ,UAAU;EAExB,QAAQ,WAAW,MAAM,CAAC,CAAC,KAAK,IAAI,OAAO,OAAO,MAAM,CAAE,MAAM;EAEhE,IAAI,OAAO,OAAO,CAAC,OAAO,IAAA,GAAA,cAAA,QAAA,CAAY,KAAK,IAAI,QAAQ,CAAC,KAAK,CAAE,CAAC,CAAC,KAAK,GAAG;OACpE,OAAO;CACd,CAAC;CAED,OAAO,GAAG,KAAK,GAAG,eAAe,KAAK,IAAI,EAAE;AAC9C"}
+{"version":3,"file":"gradient.js","names":[],"sources":["../../../../src/core/css/gradient.ts"],"sourcesContent":["import type { TransformOptions } from \"./utils\"\nimport { isArray, isUndefined } from \"../../utils\"\nimport {\n  getCSSFunction,\n  globalValues,\n  isCSSFunction,\n  isCSSToken,\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(value: any, { system }: TransformOptions) {\n  if (value == null || globalValues.has(value)) return value\n\n  const prevent = isCSSFunction(value)\n\n  if (!prevent) return `url('${value}')`\n\n  return splitValues(value)\n    .map((value) => {\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 = isCSSToken(system)(token) ? system.cssMap[token]!.ref : color\n\n        if (ratio)\n          return [color, ...(isArray(ratio) ? ratio : [ratio])].join(\" \")\n        else return color\n      })\n\n      return `${type}(${computedValues.join(\", \")})`\n    })\n    .join(\", \")\n}\n"],"mappings":";;;AAUA,MAAM,aAAwC;CAC5C,QAAQ;CACR,SAAS;CACT,SAAS;CACT,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,SAAS;AACX;AAEA,MAAM,kBAAkB,IAAI,IAAI,OAAO,OAAO,UAAU,CAAC;AAEzD,SAAgB,SAAS,OAAY,EAAE,UAA4B;CACjE,IAAI,SAAS,QAAQ,aAAa,IAAI,KAAK,GAAG,OAAO;CAIrD,IAAI,CAFY,cAAc,KAEnB,GAAG,OAAO,QAAQ,MAAM;CAEnC,OAAO,YAAY,KAAK,CAAC,CACtB,KAAK,UAAU;EACd,IAAI,EAAE,MAAM,WAAW,eAAe,KAAK;EAE3C,IAAI,CAAC,QAAQ,CAAC,QAAQ,OAAO;EAE7B,OAAO,KAAK,SAAS,WAAW,IAAI,OAAO,GAAG,KAAK;EAEnD,MAAM,CAAC,gBAAgB,GAAG,UAAU,YAAY,MAAM;EAEtD,IAAI,CAAC,OAAO,QAAQ,OAAO;EAE3B,MAAM,YACJ,kBAAkB,kBAAkB,aAChC,WAAW,kBACX;EAEN,IAAI,EAAA,GAAA,cAAA,YAAA,CAAa,SAAS,GAAG,OAAO,QAAQ,SAAS;EAErD,MAAM,iBAAiB,OAAO,KAAK,WAAW;GAC5C,KAAA,GAAA,cAAA,YAAA,CAAgB,MAAM,GAAG,OAAO;GAEhC,IAAI,gBAAgB,IAAI,MAAM,GAAG,OAAO;GAExC,MAAM,IAAI,OAAO,QAAQ,GAAG;GAE5B,IAAI,CAAC,OAAO,UACV,MAAM,KAAK,CAAC,OAAO,MAAM,GAAG,CAAC,GAAG,OAAO,MAAM,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM;GAEhE,MAAM,QAAQ,cAAc,MAAM,IAAI,SAAS,QAAQ,MAAM,GAAG;GAEhE,MAAM,QAAQ,UAAU;GAExB,QAAQ,WAAW,MAAM,CAAC,CAAC,KAAK,IAAI,OAAO,OAAO,MAAM,CAAE,MAAM;GAEhE,IAAI,OACF,OAAO,CAAC,OAAO,IAAA,GAAA,cAAA,QAAA,CAAY,KAAK,IAAI,QAAQ,CAAC,KAAK,CAAE,CAAC,CAAC,KAAK,GAAG;QAC3D,OAAO;EACd,CAAC;EAED,OAAO,GAAG,KAAK,GAAG,eAAe,KAAK,IAAI,EAAE;CAC9C,CAAC,CAAC,CACD,KAAK,IAAI;AACd"}

package/dist/esm/theme/tokens/z-indices.js

@@ -14,7 +14,8 @@ const zIndices = defineTokens.zIndices({
 	freeza: 9996,
 	vegeta: 9997,
 	sonGoku: 9998,
-	beerus: 9999
+	beerus: 9999,
+	infinity: 2147483647
 });
 //#endregion
 export { zIndices };

package/dist/esm/theme/tokens/z-indices.js.map

@@ -1 +1 @@
-{"version":3,"file":"z-indices.js","names":[],"sources":["../../../../src/theme/tokens/z-indices.ts"],"sourcesContent":["/* eslint-disable perfectionist/sort-objects */\nimport { defineTokens } from \"../../core\"\n\nexport const zIndices = defineTokens.zIndices({\n  yamcha: 1,\n  kurillin: 9,\n  nappa: 99,\n\n  guldo: 100,\n  jeice: 110,\n  burter: 120,\n  recoome: 130,\n  ginyu: 140,\n  dodoria: 150,\n  zarbon: 160,\n\n  freeza: 9996,\n  vegeta: 9997,\n  sonGoku: 9998,\n  beerus: 9999,\n})\n"],"mappings":";;AAGA,MAAa,WAAW,aAAa,SAAS;CAC5C,QAAQ;CACR,UAAU;CACV,OAAO;CAEP,OAAO;CACP,OAAO;CACP,QAAQ;CACR,SAAS;CACT,OAAO;CACP,SAAS;CACT,QAAQ;CAER,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,QAAQ;AACV,CAAC"}
+{"version":3,"file":"z-indices.js","names":[],"sources":["../../../../src/theme/tokens/z-indices.ts"],"sourcesContent":["/* eslint-disable perfectionist/sort-objects */\nimport { defineTokens } from \"../../core\"\n\nexport const zIndices = defineTokens.zIndices({\n  yamcha: 1,\n  kurillin: 9,\n  nappa: 99,\n\n  guldo: 100,\n  jeice: 110,\n  burter: 120,\n  recoome: 130,\n  ginyu: 140,\n  dodoria: 150,\n  zarbon: 160,\n\n  freeza: 9996,\n  vegeta: 9997,\n  sonGoku: 9998,\n  beerus: 9999,\n\n  infinity: 2147483647,\n})\n"],"mappings":";;AAGA,MAAa,WAAW,aAAa,SAAS;CAC5C,QAAQ;CACR,UAAU;CACV,OAAO;CAEP,OAAO;CACP,OAAO;CACP,QAAQ;CACR,SAAS;CACT,OAAO;CACP,SAAS;CACT,QAAQ;CAER,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,QAAQ;CAER,UAAU;AACZ,CAAC"}

package/dist/types/components/avatar/avatar.d.ts

@@ -22,7 +22,7 @@ interface AvatarProps extends HTMLStyledProps, ThemeProps<AvatarStyle>, UseAvata
    */
   imageProps?: AvatarImageProps;
 }
-declare const component: <H extends As | "fragment" = "div", R extends import("@yamada-ui/utils").Dict = import("@yamada-ui/utils").Dict<any>>(el: H | import("react").FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
+declare const component: <H extends As | "fragment" = "div", R extends import("@yamada-ui/utils").Dict = import("@yamada-ui/utils").Dict<any>>(el: H | import("react").FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "fallback" | "root", {
   shape: {
     circle: {
       root: {
@@ -141,7 +141,7 @@ declare const component: <H extends As | "fragment" = "div", R extends import("@
       };
     };
   };
-}>>> | undefined, { name, className, ...options }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? import("react").FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, AvatarPropsContext: import("react").Context<Partial<AvatarProps> | undefined>, useAvatarPropsContext: () => Partial<AvatarProps> | undefined, useRootComponentProps: <Y extends import("@yamada-ui/utils").Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
+}>>> | undefined, { name, className, ...options }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? import("react").FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, AvatarPropsContext: import("react").Context<Partial<AvatarProps> | undefined>, useAvatarPropsContext: () => Partial<AvatarProps> | undefined, useRootComponentProps: <Y extends import("@yamada-ui/utils").Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "fallback" | "root", {
   shape: {
     circle: {
       root: {
@@ -260,7 +260,7 @@ declare const component: <H extends As | "fragment" = "div", R extends import("@
       };
     };
   };
-}>>> | undefined, { className, withContext, transferProps }?: UseComponentPropsOptions<R>) => [CSSSlotObject, import("@yamada-ui/utils").Merge<WithoutThemeProps<Y, ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
+}>>> | undefined, { className, withContext, transferProps }?: UseComponentPropsOptions<R>) => [CSSSlotObject, import("@yamada-ui/utils").Merge<WithoutThemeProps<Y, ComponentSlotStyle<"image" | "group" | "fallback" | "root", {
   shape: {
     circle: {
       root: {

package/dist/types/components/avatar/avatar.style.d.ts

@@ -1,7 +1,7 @@
 import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import "../../index.js";
 //#region src/components/avatar/avatar.style.d.ts
-declare const avatarStyle: ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
+declare const avatarStyle: ComponentSlotStyle<"image" | "group" | "fallback" | "root", {
   /**
    * The shape of the component
    *

package/dist/types/components/chart/polar-chart.style.d.ts

@@ -2,7 +2,7 @@ import { ComponentSlotStyle } from "../../core/system/index.types.js";
 import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 import "../../index.js";
 //#region src/components/chart/polar-chart.style.d.ts
-declare const polarChartStyle: ComponentSlotStyle<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector", CSSPropObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>>;
+declare const polarChartStyle: ComponentSlotStyle<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "radial" | "labelLine" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector", CSSPropObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "radial" | "labelLine" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "radial" | "labelLine" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "radial" | "labelLine" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "pie" | "radar" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>>;
 type PolarChartStyle = typeof polarChartStyle;
 //#endregion
 export { PolarChartStyle, polarChartStyle };

package/dist/types/components/modal/modal.d.ts

@@ -18,7 +18,7 @@ import { UseModalProps } from "./use-modal.js";
 import "../../index.js";
 import { FC, PropsWithChildren, ReactNode } from "react";
 //#region src/components/modal/modal.d.ts
-interface ModalRootProps extends ThemeProps<ModalStyle>, Omit<UseModalProps, "title">, Pick<FocusLockProps, "autoFocus" | "finalFocusRef" | "initialFocusRef" | "lockFocusAcrossFrames" | "restoreFocus">, UsePopupAnimationProps, ShorthandModalContentProps {
+interface ModalRootProps extends Omit<HTMLStyledProps<"div">, "scrollBehavior" | "title">, ThemeProps<ModalStyle>, Omit<UseModalProps, "title">, Pick<FocusLockProps, "autoFocus" | "finalFocusRef" | "initialFocusRef" | "lockFocusAcrossFrames" | "restoreFocus">, UsePopupAnimationProps, ShorthandModalContentProps {
   /**
    * Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.
    *

package/dist/types/components/progress/progress.d.ts

@@ -65,7 +65,7 @@ declare const Progress: Component<({ css, max, min, rangeColor, trackColor, valu
         "--stripe-angle": "45deg";
         "--stripe-color": ["rgba(255, 255, 255, 0.3)", "rgba(0, 0, 0, 0.3)"];
         "--stripe-size": "1rem";
-        bgImage: "linear-gradient(\n            {stripe-angle},\n            {stripe-color} 25%,\n            transparent 25%,\n            transparent 50%,\n            {stripe-color} 50%,\n            {stripe-color} 75%,\n            transparent 75%,\n            transparent\n          )";
+        bgImage: "linear(\n            {stripe-angle},\n            {stripe-color} 25%,\n            transparent 25%,\n            transparent 50%,\n            {stripe-color} 50%,\n            {stripe-color} 75%,\n            transparent 75%,\n            transparent\n          )";
         bgSize: "{stripe-size} {stripe-size}";
       };
     };

package/dist/types/components/progress/progress.style.d.ts

@@ -51,7 +51,7 @@ declare const progressStyle: ComponentSlotStyle<"range" | "root", {
         "--stripe-angle": "45deg";
         "--stripe-color": ["rgba(255, 255, 255, 0.3)", "rgba(0, 0, 0, 0.3)"];
         "--stripe-size": "1rem";
-        bgImage: "linear-gradient(\n            {stripe-angle},\n            {stripe-color} 25%,\n            transparent 25%,\n            transparent 50%,\n            {stripe-color} 50%,\n            {stripe-color} 75%,\n            transparent 75%,\n            transparent\n          )";
+        bgImage: "linear(\n            {stripe-angle},\n            {stripe-color} 25%,\n            transparent 25%,\n            transparent 50%,\n            {stripe-color} 50%,\n            {stripe-color} 75%,\n            transparent 75%,\n            transparent\n          )";
         bgSize: "{stripe-size} {stripe-size}";
       };
     };

package/dist/types/components/skeleton/skeleton.style.d.ts

@@ -54,7 +54,7 @@ declare const skeletonStyle: ComponentStyle<{
     animationIterationCount: "infinite";
     animationName: "bg-position";
     animationTimingFunction: "ease-in-out";
-    bgImage: "linear-gradient(270deg, {start-color}, {end-color}, {end-color}, {start-color})";
+    bgImage: "linear(270deg, {start-color}, {end-color}, {end-color}, {start-color})";
     bgSize: "400% 100%";
   };
 }>;

package/dist/types/core/generated-theme-tokens.types.d.ts

@@ -26,7 +26,7 @@ interface GeneratedThemeTokens extends UsageThemeTokens {
   spaces: "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | "-6" | "7" | "-7" | "8" | "-8" | "9" | "-9" | "10" | "-10" | "11" | "-11" | "12" | "-12" | "13" | "-13" | "14" | "-14" | "15" | "-15" | "16" | "-16" | "20" | "-20" | "24" | "-24" | "28" | "-28" | "32" | "-32" | "36" | "-36" | "40" | "-40" | "44" | "-44" | "48" | "-48" | "52" | "-52" | "56" | "-56" | "60" | "-60" | "64" | "-64" | "68" | "-68" | "72" | "-72" | "76" | "-76" | "80" | "-80" | "84" | "-84" | "88" | "-88" | "92" | "-92" | "96" | "-96" | "0.5" | "-0.5" | "1.5" | "-1.5" | "2.5" | "-2.5" | "3.5" | "-3.5" | "4.5" | "-4.5" | "5.5" | "-5.5" | "6.5" | "-6.5" | "7.5" | "-7.5" | "px" | "-px" | "xs" | "-xs" | "sm" | "-sm" | "md" | "-md" | "lg" | "-lg" | "xl" | "-xl" | "2xl" | "-2xl" | "3xl" | "-3xl" | "4xl" | "-4xl" | "5xl" | "-5xl";
   textStyles: "ghost" | "mono" | "outline" | "solid" | "subtle" | "surface";
   themeSchemes: never;
-  zIndices: "yamcha" | "kurillin" | "nappa" | "guldo" | "jeice" | "burter" | "recoome" | "ginyu" | "dodoria" | "zarbon" | "freeza" | "vegeta" | "sonGoku" | "beerus";
+  zIndices: "yamcha" | "kurillin" | "nappa" | "guldo" | "jeice" | "burter" | "recoome" | "ginyu" | "dodoria" | "zarbon" | "freeza" | "vegeta" | "sonGoku" | "beerus" | "infinity";
 }
 //#endregion
 export { GeneratedThemeTokens };

package/dist/types/providers/ui-provider/ui-provider.d.ts

@@ -1193,6 +1193,7 @@ declare const extendTheme: <Y extends UsageTheme>(theme: Y) => Y extends object
     vegeta: number;
     sonGoku: number;
     beerus: number;
+    infinity: number;
   };
   styles: {
     globalStyle: CSSObject;
@@ -2461,6 +2462,7 @@ declare const extendTheme: <Y extends UsageTheme>(theme: Y) => Y extends object
     vegeta: number;
     sonGoku: number;
     beerus: number;
+    infinity: number;
   };
   styles: {
     globalStyle: CSSObject;

package/dist/types/theme/index.d.ts

@@ -1170,6 +1170,7 @@ declare const theme: {
     vegeta: number;
     sonGoku: number;
     beerus: number;
+    infinity: number;
   };
   styles: {
     globalStyle: CSSObject;

package/dist/types/theme/tokens/index.d.ts

@@ -778,6 +778,7 @@ declare const tokens: {
     vegeta: number;
     sonGoku: number;
     beerus: number;
+    infinity: number;
   };
 };
 //#endregion

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yamada-ui/react",
   "type": "module",
-  "version": "2.2.5-dev-20260722112946",
+  "version": "2.2.5-dev-20260725054331",
   "description": "React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion",
   "keywords": [
     "yamada",