@yamada-ui/react 2.1.4-dev-20260324185108 → 2.2.0-next-20260324190151

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

@@ -32,7 +32,7 @@ const { ComponentContext, PropsContext: ModalPropsContext, useComponentContext,
 /**
 * `Modal` is a component that is displayed over the main content to focus the user's attention solely on the information.
 *
-* @see https://yamada-ui.com/docs/components/modal
+* @see https://yamada-ui.com/docs/components/overlay/modal
 */
 const ModalRoot = withProvider(({ allowPinchZoom = false, animationScheme = "scale", autoFocus, blockScrollOnMount = true, body, cancel, children, duration, finalFocusRef, footer, header, initialFocusRef, lockFocusAcrossFrames = true, middle, restoreFocus, success, title, trigger, withCloseButton = true, withOverlay = true, portalProps, onCancel, onCloseComplete, onMiddle, onSuccess, ...props }) => {
 	const [omittedChildren, openTrigger, customOverlay] = require_children.useSplitChildren(children, ModalOpenTrigger, ModalOverlay);

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","motion","fadeVariants","getPopupAnimationProps","ShorthandModalContent: FC<ShorthandModalContentProps>","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 { PopupAnimationProps } 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 { 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 { getPopupAnimationProps } 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    PopupAnimationProps,\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    PopupAnimationProps,\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 { animationScheme, duration, getOverlayProps } = useComponentContext()\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\n    return (\n      <motion.section\n        {...getPopupAnimationProps(animationScheme, duration)}\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","motion","fadeVariants","getPopupAnimationProps","ShorthandModalContent: FC<ShorthandModalContentProps>","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 { PopupAnimationProps } 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 { 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 { getPopupAnimationProps } 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    PopupAnimationProps,\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    PopupAnimationProps,\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/overlay/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\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 { animationScheme, duration, getOverlayProps } = useComponentContext()\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\n    return (\n      <motion.section\n        {...getPopupAnimationProps(animationScheme, duration)}\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqFA,MAAM,EACJ,kBACA,cAAc,mBACd,qBACA,iBAAiB,sBACjB,aACA,iBACEA,6CACF,SACAC,+BACD;;;;;;AASD,MAAa,YAAY,cACtB,EACC,iBAAiB,OACjB,kBAAkB,SAClB,WACA,qBAAqB,MACrB,MACA,QACA,UACA,UACA,eACA,QACA,QACA,iBACA,wBAAwB,MACxB,QACA,cACA,SACA,OACA,SACA,kBAAkB,MAClB,cAAc,MACd,aACA,UACA,iBACA,UACA,WACA,GAAG,YACC;CACJ,MAAM,CAAC,iBAAiB,aAAa,iBAAiBC,kCACpD,UACA,kBACA,aACD;CACD,MAAM,6DAAsB,gBAAgB,IAAI,CAAC,CAAC,gBAAgB;CAClE,MAAM,EAAE,MAAM,cAAc,GAAG,SAASC,2BAAS,MAAM;CACvD,MAAM,oBAAoB,UACxB,2CAAC,8BAAkB,UAA2B,GAC5C;AAaJ,QACE,4CAAC;EAAiB,iCAXX;GACL;GACA;GACA;GACA;GACA,GAAG;GACJ,GACD;GAAC;GAAiB;GAAU;GAAM;GAAiB;GAAK,CACzD;aAII,eAAe,mBAEhB,2CAACC;GAAgB,gBAAgB;aAC9B,OACC,2CAACC;IAAO,GAAI;cACV,2CAACC;KACY;KACI;KACE;KACM;KACT;eAEd,2CAACC;MACiB;MAChB,SAAS;MACT;gBAEA,4CAACC,uBAAO;OAAI,GAAI,cAAc;kBAC3B,kBAAkB,cAAc,2CAAC,iBAAe,GAAG,OAEnD,cACC,kBAEA,2CAAC;QACO;QACE;QACA;QACA;QACA;QACC;QACF;QACG;QACA;QACC;SACX;QAEO;OACA;MACL;KACL,GACP;IACY;GACD;GAGvB,OACD,EAAE;AAIH,MAAa,mBAAmB,YAC9B,UACA;CAAE,MAAM;CAAe,MAAM,CAAC,WAAW,OAAO;CAAE,CACnD,CAAC,SAAY,UAAU;CACtB,MAAM,EAAE,wBAAwB,qBAAqB;AAErD,QAAO;EAAE,SAAS;EAAM,GAAG,oBAAoB,MAAM;EAAE;EACvD;AAIF,MAAa,oBAAoB,YAC/B,UACA;CAAE,MAAM;CAAgB,MAAM,CAAC,WAAW,QAAQ;CAAE,CACrD,CAAC,SAAY,UAAU;CACtB,MAAM,EAAE,yBAAyB,qBAAqB;AAEtD,QAAO;EAAE,SAAS;EAAM,GAAG,qBAAqB,MAAM;EAAE;EACxD;AAIF,MAAa,mBAAmB,YAC9BC,kCACA,cACD,CAAC,SAAY,UAAU;CACtB,MAAM,EAAE,wBAAwB,qBAAqB;AAErD,QAAO,EAAE,GAAG,oBAAoB,MAAM,EAAE;EACxC;AAIF,MAAa,eAAe,aAAuC,UAAU;CAC3E,MAAM,EAAE,iBAAiB,UAAU,oBAAoB,qBAAqB;AAE5E,QACE,2CAACC,yBAAO;EACN,QAAQ,EAAE,UAAU;EACpB,GAAK,oBAAoB,SACrB;GACE,SAAS;GACT,MAAM;GACN,SAAS;GACT,UAAUC;GACX,GACD,EAAE;EACN,+CAA0B,4DAAgC,MAAM,CAAC,CAAC;GAClE;GAEH,UAAU,EAAE;AAKf,MAAa,eAAe,aACzB,EAAE,UAAU,GAAG,WAAW;CACzB,MAAM,EAAE,iBAAiB,UAAU,iBAAiB,oBAClD,qBAAqB;CACvB,MAAM,CAAC,iBAAiB,qBAAqBT,kCAC3C,UACA,iBACD;AAED,QACE,4CAACQ,yBAAO;EACN,GAAIE,uCAAuB,iBAAiB,SAAS;EACrD,+CACE,4DAA2C,KAAK,CAAC,CAClD;aAEA,sBAAsB,kBAAkB,2CAAC,qBAAmB,GAAG,OAE/D;GACc;GAGrB,UACD,EAAE;AA6CH,MAAaC,yBAAyD,EACpE,MACA,QACA,QACA,QACA,QACA,SACA,OACA,UACA,UACA,gBACI;CACJ,MAAM,EAAE,YAAY,qBAAqB;CACzC,MAAM,eAAeC,iCAAgB,aAAa,OAAO;CACzD,MAAM,cAAcA,iCAAgB,YAAY,MAAM;CACtD,MAAM,aAAaA,iCAAgB,WAAW,KAAK;CACnD,MAAM,eAAeA,iCAAgB,aAAa,OAAO;CACzD,MAAM,eAAeA,iCAAgBC,uBAAQ,QAAQ;EACnD,aAAa;EACb,SAAS;EACT,eAAgB,WAAW,SAAS,QAAQ,GAAG,SAAS;EACzD,CAAC;CACF,MAAM,eAAeD,iCAAgBC,uBAAQ,QAAQ;EACnD,aAAa;EACb,eAAgB,WAAW,SAAS,QAAQ,GAAG,SAAS;EACzD,CAAC;CACF,MAAM,gBAAgBD,iCAAgBC,uBAAQ,SAAS;EACrD,aAAa;EACb,eAAgB,YAAY,UAAU,QAAQ,GAAG,SAAS;EAC3D,CAAC;AAEF,QACE,4CAAC;EACE,iBACE,cAAc,2CAAC,yBAAa,cAA0B,GAAG;EAC3D;EACA,iBACE,gBAAgB,gBAAgB,gBAC/B,4CAAC;GACE;GACA;GACA;MACW,GACZ;KACO;;AAMnB,MAAa,cAAc,YACzB,UACA,SACD,CAAC,SAAY,UAAU;CACtB,MAAM,EAAE,mBAAmB,qBAAqB;AAEhD,QAAO,EAAE,GAAG,eAAe,MAAM,EAAE;EACnC;AAIF,MAAa,aAAa,YAAmC,MAAM,QAAQ,CACzE,SACC,UAAU;CACT,MAAM,EAAE,kBAAkB,qBAAqB;AAE/C,QAAO,EAAE,GAAG,cAAc,MAAM,EAAE;EAErC;AAID,MAAa,YAAY,YAAmC,OAAO,OAAO,CACxE,SACC,UAAU;CACT,MAAM,EAAE,iBAAiB,qBAAqB;AAE9C,QAAO,EAAE,GAAG,aAAa,MAAM,EAAE;EAEpC;AAID,MAAa,cAAc,YACzB,UACA,SACD,CAAC,SAAY,UAAU;CACtB,MAAM,EAAE,mBAAmB,qBAAqB;AAEhD,QAAO,EAAE,GAAG,eAAe,MAAM,EAAE;EACnC"}

package/dist/cjs/components/tree/index.cjs

@@ -0,0 +1,25 @@
+const require_tree_style = require('./tree.style.cjs');
+const require_use_tree = require('./use-tree.cjs');
+const require_tree = require('./tree.cjs');
+const require_namespace = require('./namespace.cjs');
+
+Object.defineProperty(exports, 'Tree', {
+  enumerable: true,
+  get: function () {
+    return require_namespace.namespace_exports;
+  }
+});
+exports.TreeContext = require_use_tree.TreeContext;
+exports.TreeDescendantsContext = require_use_tree.TreeDescendantsContext;
+exports.TreeItem = require_tree.TreeItem;
+exports.TreeItemContext = require_use_tree.TreeItemContext;
+exports.TreePropsContext = require_tree.TreePropsContext;
+exports.TreeRoot = require_tree.TreeRoot;
+exports.treeStyle = require_tree_style.treeStyle;
+exports.useTree = require_use_tree.useTree;
+exports.useTreeContext = require_use_tree.useTreeContext;
+exports.useTreeDescendant = require_use_tree.useTreeDescendant;
+exports.useTreeDescendants = require_use_tree.useTreeDescendants;
+exports.useTreeItem = require_use_tree.useTreeItem;
+exports.useTreeItemContext = require_use_tree.useTreeItemContext;
+exports.useTreePropsContext = require_tree.useTreePropsContext;

package/dist/cjs/components/tree/namespace.cjs

@@ -0,0 +1,26 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_use_tree = require('./use-tree.cjs');
+const require_tree = require('./tree.cjs');
+
+//#region src/components/tree/namespace.ts
+var namespace_exports = /* @__PURE__ */ require_rolldown_runtime.__exportAll({
+	Context: () => require_use_tree.TreeContext,
+	DescendantsContext: () => require_use_tree.TreeDescendantsContext,
+	Item: () => require_tree.TreeItem,
+	PropsContext: () => require_tree.TreePropsContext,
+	Root: () => require_tree.TreeRoot,
+	useContext: () => require_use_tree.useTreeContext,
+	useDescendant: () => require_use_tree.useTreeDescendant,
+	useDescendants: () => require_use_tree.useTreeDescendants,
+	useItemContext: () => require_use_tree.useTreeItemContext,
+	usePropsContext: () => require_tree.useTreePropsContext
+});
+
+//#endregion
+Object.defineProperty(exports, 'namespace_exports', {
+  enumerable: true,
+  get: function () {
+    return namespace_exports;
+  }
+});
+//# sourceMappingURL=namespace.cjs.map

package/dist/cjs/components/tree/namespace.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"namespace.cjs","names":[],"sources":["../../../../src/components/tree/namespace.ts"],"sourcesContent":["export {\n  TreeItem as Item,\n  TreePropsContext as PropsContext,\n  TreeRoot as Root,\n  useTreePropsContext as usePropsContext,\n} from \"./tree\"\nexport type {\n  TreeItemProps as ItemProps,\n  TreeItem as ItemType,\n  TreeRootProps as RootProps,\n} from \"./tree\"\nexport {\n  TreeContext as Context,\n  TreeDescendantsContext as DescendantsContext,\n  useTreeContext as useContext,\n  useTreeDescendant as useDescendant,\n  useTreeDescendants as useDescendants,\n  useTreeItemContext as useItemContext,\n} from \"./use-tree\"\nexport type { TreeControl as Control } from \"./use-tree\"\n"],"mappings":""}

package/dist/cjs/components/tree/tree.cjs

@@ -0,0 +1,289 @@
+"use client";
+
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_utils_index = require('../../utils/index.cjs');
+const require_factory = require('../../core/system/factory.cjs');
+const require_create_component = require('../../core/components/create-component.cjs');
+require('../../core/index.cjs');
+const require_chevron_right_icon = require('../icon/icons/chevron-right-icon.cjs');
+require('../icon/index.cjs');
+const require_collapse = require('../collapse/collapse.cjs');
+require('../collapse/index.cjs');
+const require_use_loading_component = require('../loading/use-loading-component.cjs');
+require('../loading/index.cjs');
+const require_checkbox = require('../checkbox/checkbox.cjs');
+require('../checkbox/index.cjs');
+const require_tree_style = require('./tree.style.cjs');
+const require_use_tree = require('./use-tree.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/tree/tree.tsx
+const recursiveTreeItem = (items) => {
+	return items?.map((props, index) => {
+		const key = props.value || ((0, require_utils_index.utils_exports.isString)(props.label) ? props.label : index);
+		if ("children" in props) {
+			const { children, ...rest } = props;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeItem, {
+				...rest,
+				children: recursiveTreeItem(children)
+			}, key);
+		} else return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeItem, { ...props }, key);
+	});
+};
+const getReactNodeOrFunction = (type, custom, root) => {
+	if ((0, require_utils_index.utils_exports.isObject)(custom) && ("group" in custom || "item" in custom)) return custom[type];
+	else if (custom) return custom;
+	else if ((0, require_utils_index.utils_exports.isObject)(root) && ("group" in root || "item" in root)) return root[type];
+	else return root;
+};
+const { ComponentContext, PropsContext: TreePropsContext, useComponentContext, usePropsContext: useTreePropsContext, withContext, withProvider } = require_create_component.createSlotComponent("tree", require_tree_style.treeStyle);
+/**
+* `Tree` is a component used to display hierarchical data structures in an expandable tree format.
+*
+* @see https://yamada-ui.com/docs/components/tree
+*/
+const TreeRoot = withProvider(({ size, animated, children, endElement, indicator, indicatorHidden, items, loadingScheme, startElement, checkboxProps, endElementProps, groupProps, indicatorProps, itemProps, labelProps, startElementProps, triggerProps, ...rest }) => {
+	const computedChildren = (0, react.useMemo)(() => {
+		if (children) return children;
+		return recursiveTreeItem(items);
+	}, [children, items]);
+	const { activeDescendant, checkable, checkedValue, descendants, expandedValue, multiple, selectedValue, getRootProps, onActiveDescendant, onCheckedChange, onCollapseAll, onExpandAll, onExpandedChange, onSearch, onSelectedChange } = require_use_tree.useTree({
+		...rest,
+		children: computedChildren
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_tree.TreeDescendantsContext, {
+		value: descendants,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_tree.TreeContext, {
+			value: (0, react.useMemo)(() => ({
+				activeDescendant,
+				checkable,
+				checkedValue,
+				expandedValue,
+				multiple,
+				selectedValue,
+				onActiveDescendant,
+				onCheckedChange,
+				onCollapseAll,
+				onExpandAll,
+				onExpandedChange,
+				onSearch,
+				onSelectedChange
+			}), [
+				activeDescendant,
+				checkable,
+				checkedValue,
+				expandedValue,
+				multiple,
+				selectedValue,
+				onActiveDescendant,
+				onCheckedChange,
+				onSearch,
+				onCollapseAll,
+				onExpandAll,
+				onExpandedChange,
+				onSelectedChange
+			]),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContext, {
+				value: (0, react.useMemo)(() => ({
+					size,
+					animated,
+					endElement,
+					indicator,
+					indicatorHidden,
+					loadingScheme,
+					startElement,
+					checkboxProps,
+					endElementProps,
+					groupProps,
+					indicatorProps,
+					itemProps,
+					labelProps,
+					startElementProps,
+					triggerProps
+				}), [
+					size,
+					animated,
+					endElement,
+					indicator,
+					indicatorHidden,
+					startElement,
+					endElementProps,
+					groupProps,
+					indicatorProps,
+					itemProps,
+					labelProps,
+					startElementProps,
+					triggerProps,
+					checkboxProps,
+					loadingScheme
+				]),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.ul, { ...getRootProps() })
+			})
+		})
+	});
+}, "root", { transferProps: ["size"] })();
+const TreeItem = withContext(({ animated: animatedProp, asyncChildren: asyncChildrenProp, endElement, indicator: indicatorProp, label, loadingScheme, startElement, value: valueProp = (0, require_utils_index.utils_exports.isString)(label) ? label : void 0, checkboxProps, endElementProps, groupProps, indicatorProps, labelProps, startElementProps, triggerProps, ...rest }) => {
+	const { checkable } = require_use_tree.useTreeContext();
+	const componentContext = useComponentContext();
+	const Loading = require_use_loading_component.useLoadingComponent(loadingScheme ?? componentContext.loadingScheme ?? "oval");
+	const animated = animatedProp ?? componentContext.animated;
+	const indicator = indicatorProp ?? componentContext.indicator;
+	const groupStartElement = getReactNodeOrFunction("group", startElement, componentContext.startElement);
+	const groupEndElement = getReactNodeOrFunction("group", endElement, componentContext.endElement);
+	const itemStartElement = getReactNodeOrFunction("item", startElement, componentContext.startElement);
+	const itemEndElement = getReactNodeOrFunction("item", endElement, componentContext.endElement);
+	const asyncChildren = (0, react.useCallback)(async () => {
+		return recursiveTreeItem(await asyncChildrenProp?.());
+	}, [asyncChildrenProp]);
+	const { branchOpen, children, disabled, group, groupLoading, groupOpen, level, value, getCheckboxProps, getGroupItemProps, getGroupProps, getIndicatorProps, getItemProps, getLabelProps, getTriggerProps, onGroupClose, onGroupOpen, onGroupToggle } = require_use_tree.useTreeItem({
+		...componentContext.itemProps,
+		...rest,
+		asyncChildren: asyncChildrenProp ? asyncChildren : void 0,
+		value: valueProp
+	});
+	const props = {
+		disabled,
+		expanded: groupOpen
+	};
+	const context = (0, react.useMemo)(() => ({
+		branchOpen,
+		groupOpen,
+		level,
+		value,
+		onGroupClose,
+		onGroupOpen,
+		onGroupToggle
+	}), [
+		branchOpen,
+		groupOpen,
+		level,
+		value,
+		onGroupClose,
+		onGroupOpen,
+		onGroupToggle
+	]);
+	const varProps = (0, react.useMemo)(() => ({ "--level": level.toString() }), [level]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_tree.TreeItemContext, {
+		value: context,
+		children: group ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.li, {
+			...varProps,
+			...getGroupItemProps(),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TreeTrigger, {
+				...getTriggerProps({
+					...componentContext.triggerProps,
+					...triggerProps
+				}),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeIndicator, {
+						...getIndicatorProps({
+							"data-animated": (0, require_utils_index.utils_exports.dataAttr)(animated),
+							...componentContext.indicatorProps,
+							...indicatorProps
+						}),
+						children: groupLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Loading, {}) : (0, require_utils_index.utils_exports.runIfFn)(indicator, props)
+					}),
+					checkable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeCheckbox, {
+						size: componentContext.size,
+						...getCheckboxProps({
+							...componentContext.checkboxProps,
+							...checkboxProps
+						})
+					}) : null,
+					groupStartElement ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeStartElement, {
+						...componentContext.startElementProps,
+						...startElementProps,
+						children: (0, require_utils_index.utils_exports.runIfFn)(groupStartElement, props)
+					}) : null,
+					label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeLabel, {
+						...getLabelProps({
+							...componentContext.labelProps,
+							...labelProps
+						}),
+						children: label
+					}) : null,
+					groupEndElement ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeEndElement, {
+						...componentContext.endElementProps,
+						...endElementProps,
+						children: (0, require_utils_index.utils_exports.runIfFn)(groupEndElement, props)
+					}) : null
+				]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeGroup, {
+				duration: !animated ? 0 : void 0,
+				open: groupOpen,
+				...getGroupProps({
+					...componentContext.groupProps,
+					...groupProps
+				}),
+				children
+			})]
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.li, {
+			...varProps,
+			...getItemProps(),
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeIndicator, { ...getIndicatorProps({
+					"data-hidden": "",
+					...componentContext.indicatorProps,
+					...indicatorProps
+				}) }),
+				checkable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeCheckbox, {
+					size: componentContext.size,
+					...getCheckboxProps({
+						...componentContext.checkboxProps,
+						...checkboxProps
+					})
+				}) : null,
+				itemStartElement ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeStartElement, {
+					...componentContext.startElementProps,
+					...startElementProps,
+					children: (0, require_utils_index.utils_exports.runIfFn)(itemStartElement, props)
+				}) : null,
+				label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeLabel, {
+					...getLabelProps({
+						...componentContext.labelProps,
+						...labelProps
+					}),
+					children: label
+				}) : null,
+				itemEndElement ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeEndElement, {
+					...componentContext.endElementProps,
+					...endElementProps,
+					children: (0, require_utils_index.utils_exports.runIfFn)(itemEndElement, props)
+				}) : null
+			]
+		})
+	});
+}, "item")();
+const TreeTrigger = withContext("div", "trigger")();
+const TreeGroup = withContext((props) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_collapse.Collapse, {
+		as: "ul",
+		...(0, require_utils_index.utils_exports.cast)(props)
+	});
+}, "group")();
+const TreeIndicator = withContext(({ children = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_chevron_right_icon.ChevronRightIcon, {}), ...rest }) => {
+	const { indicatorHidden } = useComponentContext();
+	if (indicatorHidden) return null;
+	if ((0, react.isValidElement)(children)) return (0, react.cloneElement)(children, {
+		...rest,
+		...children.props
+	});
+	return react.Children.count(children) > 1 ? react.Children.only(null) : null;
+}, "indicator")();
+const TreeCheckbox = withContext(require_checkbox.Checkbox, "checkbox")();
+const TreeStartElement = withContext("div", {
+	name: "TreeStartElement",
+	slot: ["element", "start"]
+})();
+const TreeEndElement = withContext("div", {
+	name: "TreeEndElement",
+	slot: ["element", "end"]
+})();
+const TreeLabel = withContext("span", "label")();
+
+//#endregion
+exports.TreeItem = TreeItem;
+exports.TreePropsContext = TreePropsContext;
+exports.TreeRoot = TreeRoot;
+exports.useTreePropsContext = useTreePropsContext;
+//# sourceMappingURL=tree.cjs.map

package/dist/cjs/components/tree/tree.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree.cjs","names":["createSlotComponent","treeStyle","useTree","TreeDescendantsContext","TreeContext","styled","useTreeContext","useLoadingComponent","useTreeItem","TreeItemContext","Collapse","ChevronRightIcon","Children","Checkbox"],"sources":["../../../../src/components/tree/tree.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type {\n  GenericsComponent,\n  HTMLProps,\n  HTMLStyledProps,\n  ThemeProps,\n} from \"../../core\"\nimport type { CheckboxProps } from \"../checkbox\"\nimport type { CollapseProps } from \"../collapse\"\nimport type { Loading } from \"../loading\"\nimport type { WithTransitionProps } from \"../motion\"\nimport type { TreeStyle } from \"./tree.style\"\nimport type { UseTreeItemProps, UseTreeProps } from \"./use-tree\"\nimport {\n  Children,\n  cloneElement,\n  isValidElement,\n  useCallback,\n  useMemo,\n} from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport {\n  cast,\n  dataAttr,\n  isObject,\n  isString,\n  type ReactNodeOrFunction,\n  runIfFn,\n} from \"../../utils\"\nimport { Checkbox } from \"../checkbox\"\nimport { Collapse } from \"../collapse\"\nimport { ChevronRightIcon } from \"../icon\"\nimport { useLoadingComponent } from \"../loading\"\nimport { treeStyle } from \"./tree.style\"\nimport {\n  TreeContext,\n  TreeDescendantsContext,\n  TreeItemContext,\n  useTree,\n  useTreeContext,\n  useTreeItem,\n} from \"./use-tree\"\n\ninterface TreeCallBackProps {\n  disabled?: boolean\n  expanded?: boolean\n}\n\nexport type TreeItemReactNode =\n  | ReactNodeOrFunction<TreeCallBackProps>\n  | {\n      group: ReactNodeOrFunction<TreeCallBackProps>\n      item?: ReactNodeOrFunction<TreeCallBackProps>\n    }\n  | {\n      item: ReactNodeOrFunction<TreeCallBackProps>\n      group?: ReactNodeOrFunction<TreeCallBackProps>\n    }\n\ninterface TreeItemWithValue extends Omit<TreeItemProps, \"children\"> {}\n\nexport interface TreeItemWithChildren extends TreeItemWithValue {\n  children: TreeItem[]\n}\n\nexport type TreeItem = TreeItemWithChildren | TreeItemWithValue\n\nconst recursiveTreeItem = (items?: TreeItem[]) => {\n  return items?.map((props, index) => {\n    const key = props.value || (isString(props.label) ? props.label : index)\n\n    if (\"children\" in props) {\n      const { children, ...rest } = props\n\n      return (\n        <TreeItem key={key} {...rest}>\n          {recursiveTreeItem(children)}\n        </TreeItem>\n      )\n    } else {\n      return <TreeItem key={key} {...props} />\n    }\n  })\n}\n\nconst getReactNodeOrFunction = (\n  type: \"group\" | \"item\",\n  custom?: TreeItemReactNode,\n  root?: TreeItemReactNode,\n): ReactNodeOrFunction<TreeCallBackProps> => {\n  if (isObject(custom) && (\"group\" in custom || \"item\" in custom)) {\n    return custom[type]\n  } else if (custom) {\n    return custom\n  } else if (isObject(root) && (\"group\" in root || \"item\" in root)) {\n    return root[type]\n  } else {\n    return root\n  }\n}\n\ninterface ComponentContext extends Pick<\n  TreeRootProps,\n  | \"animated\"\n  | \"checkboxProps\"\n  | \"endElement\"\n  | \"endElementProps\"\n  | \"groupProps\"\n  | \"indicator\"\n  | \"indicatorHidden\"\n  | \"indicatorProps\"\n  | \"itemProps\"\n  | \"labelProps\"\n  | \"loadingScheme\"\n  | \"size\"\n  | \"startElement\"\n  | \"startElementProps\"\n  | \"triggerProps\"\n> {}\n\nexport interface TreeRootProps<Multiple extends boolean = false>\n  extends\n    HTMLStyledProps<\"ul\">,\n    ThemeProps<TreeStyle>,\n    UseTreeProps<Multiple>,\n    Pick<\n      TreeItemProps,\n      | \"animated\"\n      | \"checkboxProps\"\n      | \"endElement\"\n      | \"endElementProps\"\n      | \"groupProps\"\n      | \"indicator\"\n      | \"indicatorProps\"\n      | \"labelProps\"\n      | \"loadingScheme\"\n      | \"startElement\"\n      | \"startElementProps\"\n      | \"triggerProps\"\n    > {\n  /**\n   * If `true`, hide the tree indicator icon for all items.\n   *\n   * @default false\n   */\n  indicatorHidden?: boolean\n  /**\n   * If provided, generate elements based on items.\n   */\n  items?: TreeItem[]\n  /**\n   * Props for the item component.\n   */\n  itemProps?: Omit<TreeItemProps, \"label\" | \"open\" | \"value\">\n}\n\nconst {\n  ComponentContext,\n  PropsContext: TreePropsContext,\n  useComponentContext,\n  usePropsContext: useTreePropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<TreeRootProps, TreeStyle, ComponentContext>(\n  \"tree\",\n  treeStyle,\n)\n\nexport { TreePropsContext, useTreePropsContext }\n\n/**\n * `Tree` is a component used to display hierarchical data structures in an expandable tree format.\n *\n * @see https://yamada-ui.com/docs/components/tree\n */\nexport const TreeRoot = withProvider<\"ul\", TreeRootProps, \"size\">(\n  <Multiple extends boolean = false>({\n    size,\n    animated,\n    children,\n    endElement,\n    indicator,\n    indicatorHidden,\n    items,\n    loadingScheme,\n    startElement,\n    checkboxProps,\n    endElementProps,\n    groupProps,\n    indicatorProps,\n    itemProps,\n    labelProps,\n    startElementProps,\n    triggerProps,\n    ...rest\n  }: TreeRootProps<Multiple>) => {\n    const computedChildren = useMemo(() => {\n      if (children) return children\n\n      return recursiveTreeItem(items)\n    }, [children, items])\n    const {\n      activeDescendant,\n      checkable,\n      checkedValue,\n      descendants,\n      expandedValue,\n      multiple,\n      selectedValue,\n      getRootProps,\n      onActiveDescendant,\n      onCheckedChange,\n      onCollapseAll,\n      onExpandAll,\n      onExpandedChange,\n      onSearch,\n      onSelectedChange,\n    } = useTree({ ...rest, children: computedChildren })\n    const context = useMemo(\n      () => ({\n        activeDescendant,\n        checkable,\n        checkedValue,\n        expandedValue,\n        multiple,\n        selectedValue,\n        onActiveDescendant,\n        onCheckedChange,\n        onCollapseAll,\n        onExpandAll,\n        onExpandedChange,\n        onSearch,\n        onSelectedChange,\n      }),\n      [\n        activeDescendant,\n        checkable,\n        checkedValue,\n        expandedValue,\n        multiple,\n        selectedValue,\n        onActiveDescendant,\n        onCheckedChange,\n        onSearch,\n        onCollapseAll,\n        onExpandAll,\n        onExpandedChange,\n        onSelectedChange,\n      ],\n    )\n    const componentContext = useMemo(\n      () => ({\n        size,\n        animated,\n        endElement,\n        indicator,\n        indicatorHidden,\n        loadingScheme,\n        startElement,\n        checkboxProps,\n        endElementProps,\n        groupProps,\n        indicatorProps,\n        itemProps,\n        labelProps,\n        startElementProps,\n        triggerProps,\n      }),\n      [\n        size,\n        animated,\n        endElement,\n        indicator,\n        indicatorHidden,\n        startElement,\n        endElementProps,\n        groupProps,\n        indicatorProps,\n        itemProps,\n        labelProps,\n        startElementProps,\n        triggerProps,\n        checkboxProps,\n        loadingScheme,\n      ],\n    )\n\n    return (\n      <TreeDescendantsContext value={descendants}>\n        <TreeContext value={context}>\n          <ComponentContext value={componentContext}>\n            <styled.ul {...getRootProps()} />\n          </ComponentContext>\n        </TreeContext>\n      </TreeDescendantsContext>\n    )\n  },\n  \"root\",\n  { transferProps: [\"size\"] },\n)() as GenericsComponent<{\n  <Multiple extends boolean = false>(\n    props: TreeRootProps<Multiple>,\n  ): ReactElement\n}>\n\nexport interface TreeItemProps\n  extends\n    Omit<HTMLStyledProps<\"li\">, \"value\">,\n    Omit<UseTreeItemProps, \"asyncChildren\"> {\n  /**\n   * The label to display in the item.\n   */\n  label: ReactNode\n  /**\n   * If `true`, the tree item will be animated.\n   *\n   * @default false\n   */\n  animated?: boolean\n  /**\n   * The element to display at the end of the item.\n   */\n  endElement?: TreeItemReactNode\n  /**\n   * The tree indicator icon to use.\n   */\n  indicator?: ReactNodeOrFunction<TreeCallBackProps>\n  /**\n   * The loading scheme.\n   *\n   * @default 'oval'\n   */\n  loadingScheme?: Loading.Scheme\n  /**\n   * The element to display at the start of the item.\n   */\n  startElement?: TreeItemReactNode\n  /**\n   * Props for the checkbox component.\n   */\n  checkboxProps?: Omit<CheckboxProps, \"checked\" | \"defaultChecked\" | \"value\">\n  /**\n   * Props for the end component.\n   */\n  endElementProps?: TreeEndElementProps\n  /**\n   * Props for the group component.\n   */\n  groupProps?: Omit<TreeGroupProps, \"children\">\n  /**\n   * Props for the indicator component.\n   */\n  indicatorProps?: TreeIndicatorProps\n  /**\n   * Props for the label component.\n   */\n  labelProps?: TreeLabelProps\n  /**\n   * Props for the start component.\n   */\n  startElementProps?: TreeStartElementProps\n  /**\n   * Props for the trigger component.\n   */\n  triggerProps?: TreeTriggerProps\n  /**\n   * If provided, the tree item will be rendered as an async tree item.\n   */\n  asyncChildren?: () => Promise<TreeItem[]>\n}\n\nexport const TreeItem = withContext<\"li\", TreeItemProps>(\n  ({\n    animated: animatedProp,\n    asyncChildren: asyncChildrenProp,\n    endElement,\n    indicator: indicatorProp,\n    label,\n    loadingScheme,\n    startElement,\n    value: valueProp = isString(label) ? label : undefined,\n    checkboxProps,\n    endElementProps,\n    groupProps,\n    indicatorProps,\n    labelProps,\n    startElementProps,\n    triggerProps,\n    ...rest\n  }) => {\n    const { checkable } = useTreeContext()\n    const componentContext = useComponentContext()\n    const Loading = useLoadingComponent(\n      loadingScheme ?? componentContext.loadingScheme ?? \"oval\",\n    )\n    const animated = animatedProp ?? componentContext.animated\n    const indicator = indicatorProp ?? componentContext.indicator\n    const groupStartElement = getReactNodeOrFunction(\n      \"group\",\n      startElement,\n      componentContext.startElement,\n    )\n    const groupEndElement = getReactNodeOrFunction(\n      \"group\",\n      endElement,\n      componentContext.endElement,\n    )\n    const itemStartElement = getReactNodeOrFunction(\n      \"item\",\n      startElement,\n      componentContext.startElement,\n    )\n    const itemEndElement = getReactNodeOrFunction(\n      \"item\",\n      endElement,\n      componentContext.endElement,\n    )\n    const asyncChildren = useCallback(async () => {\n      const items = await asyncChildrenProp?.()\n\n      return recursiveTreeItem(items)\n    }, [asyncChildrenProp])\n    const {\n      branchOpen,\n      children,\n      disabled,\n      group,\n      groupLoading,\n      groupOpen,\n      level,\n      value,\n      getCheckboxProps,\n      getGroupItemProps,\n      getGroupProps,\n      getIndicatorProps,\n      getItemProps,\n      getLabelProps,\n      getTriggerProps,\n      onGroupClose,\n      onGroupOpen,\n      onGroupToggle,\n    } = useTreeItem({\n      ...componentContext.itemProps,\n      ...rest,\n      asyncChildren: asyncChildrenProp ? asyncChildren : undefined,\n      value: valueProp,\n    })\n    const props = { disabled, expanded: groupOpen }\n    const context = useMemo(\n      () => ({\n        branchOpen,\n        groupOpen,\n        level,\n        value,\n        onGroupClose,\n        onGroupOpen,\n        onGroupToggle,\n      }),\n      [\n        branchOpen,\n        groupOpen,\n        level,\n        value,\n        onGroupClose,\n        onGroupOpen,\n        onGroupToggle,\n      ],\n    )\n    const varProps = useMemo(() => ({ \"--level\": level.toString() }), [level])\n\n    return (\n      <TreeItemContext value={context}>\n        {group ? (\n          <styled.li {...varProps} {...getGroupItemProps()}>\n            <TreeTrigger\n              {...getTriggerProps({\n                ...componentContext.triggerProps,\n                ...triggerProps,\n              })}\n            >\n              <TreeIndicator\n                {...getIndicatorProps({\n                  \"data-animated\": dataAttr(animated),\n                  ...componentContext.indicatorProps,\n                  ...indicatorProps,\n                })}\n              >\n                {groupLoading ? <Loading /> : runIfFn(indicator, props)}\n              </TreeIndicator>\n              {checkable ? (\n                <TreeCheckbox\n                  size={componentContext.size}\n                  {...getCheckboxProps({\n                    ...componentContext.checkboxProps,\n                    ...checkboxProps,\n                  })}\n                />\n              ) : null}\n              {groupStartElement ? (\n                <TreeStartElement\n                  {...componentContext.startElementProps}\n                  {...startElementProps}\n                >\n                  {runIfFn(groupStartElement, props)}\n                </TreeStartElement>\n              ) : null}\n              {label ? (\n                <TreeLabel\n                  {...getLabelProps({\n                    ...componentContext.labelProps,\n                    ...labelProps,\n                  })}\n                >\n                  {label}\n                </TreeLabel>\n              ) : null}\n              {groupEndElement ? (\n                <TreeEndElement\n                  {...componentContext.endElementProps}\n                  {...endElementProps}\n                >\n                  {runIfFn(groupEndElement, props)}\n                </TreeEndElement>\n              ) : null}\n            </TreeTrigger>\n\n            <TreeGroup\n              duration={!animated ? 0 : undefined}\n              open={groupOpen}\n              {...getGroupProps({\n                ...componentContext.groupProps,\n                ...groupProps,\n              })}\n            >\n              {children}\n            </TreeGroup>\n          </styled.li>\n        ) : (\n          <styled.li {...varProps} {...getItemProps()}>\n            <TreeIndicator\n              {...getIndicatorProps({\n                \"data-hidden\": \"\",\n                ...componentContext.indicatorProps,\n                ...indicatorProps,\n              })}\n            />\n            {checkable ? (\n              <TreeCheckbox\n                size={componentContext.size}\n                {...getCheckboxProps({\n                  ...componentContext.checkboxProps,\n                  ...checkboxProps,\n                })}\n              />\n            ) : null}\n            {itemStartElement ? (\n              <TreeStartElement\n                {...componentContext.startElementProps}\n                {...startElementProps}\n              >\n                {runIfFn(itemStartElement, props)}\n              </TreeStartElement>\n            ) : null}\n            {label ? (\n              <TreeLabel\n                {...getLabelProps({\n                  ...componentContext.labelProps,\n                  ...labelProps,\n                })}\n              >\n                {label}\n              </TreeLabel>\n            ) : null}\n            {itemEndElement ? (\n              <TreeEndElement\n                {...componentContext.endElementProps}\n                {...endElementProps}\n              >\n                {runIfFn(itemEndElement, props)}\n              </TreeEndElement>\n            ) : null}\n          </styled.li>\n        )}\n      </TreeItemContext>\n    )\n  },\n  \"item\",\n)()\n\ninterface TreeTriggerProps extends HTMLStyledProps {}\n\nconst TreeTrigger = withContext<\"div\", TreeTriggerProps>(\"div\", \"trigger\")()\n\ninterface TreeGroupProps\n  extends\n    Omit<HTMLStyledProps<\"ul\">, \"transition\">,\n    Pick<CollapseProps, \"animationOpacity\" | keyof WithTransitionProps> {}\n\nconst TreeGroup = withContext<\"ul\", TreeGroupProps>((props) => {\n  return <Collapse as=\"ul\" {...cast<CollapseProps>(props)} />\n}, \"group\")()\n\ninterface TreeIndicatorProps extends HTMLStyledProps<\"svg\"> {}\n\nconst TreeIndicator = withContext<\"svg\", TreeIndicatorProps>(\n  ({ children = <ChevronRightIcon />, ...rest }) => {\n    const { indicatorHidden } = useComponentContext()\n\n    if (indicatorHidden) return null\n\n    if (isValidElement<HTMLProps<\"svg\">>(children))\n      return cloneElement(children, { ...rest, ...children.props })\n\n    return Children.count(children) > 1 ? Children.only(null) : null\n  },\n  \"indicator\",\n)()\n\ninterface TreeCheckboxProps extends CheckboxProps {}\n\nconst TreeCheckbox = withContext<\"input\", TreeCheckboxProps>(\n  Checkbox,\n  \"checkbox\",\n)()\n\ninterface TreeStartElementProps extends HTMLStyledProps {}\n\nconst TreeStartElement = withContext<\"div\", TreeStartElementProps>(\"div\", {\n  name: \"TreeStartElement\",\n  slot: [\"element\", \"start\"],\n})()\n\ninterface TreeEndElementProps extends HTMLStyledProps {}\n\nconst TreeEndElement = withContext<\"div\", TreeEndElementProps>(\"div\", {\n  name: \"TreeEndElement\",\n  slot: [\"element\", \"end\"],\n})()\n\ninterface TreeLabelProps extends HTMLStyledProps<\"span\"> {}\n\nconst TreeLabel = withContext<\"span\", TreeLabelProps>(\"span\", \"label\")()\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAqEA,MAAM,qBAAqB,UAAuB;AAChD,QAAO,OAAO,KAAK,OAAO,UAAU;EAClC,MAAM,MAAM,MAAM,0DAAmB,MAAM,MAAM,GAAG,MAAM,QAAQ;AAElE,MAAI,cAAc,OAAO;GACvB,MAAM,EAAE,UAAU,GAAG,SAAS;AAE9B,UACE,2CAAC;IAAmB,GAAI;cACrB,kBAAkB,SAAS;MADf,IAEJ;QAGb,QAAO,2CAAC,YAAmB,GAAI,SAAT,IAAkB;GAE1C;;AAGJ,MAAM,0BACJ,MACA,QACA,SAC2C;AAC3C,qDAAa,OAAO,KAAK,WAAW,UAAU,UAAU,QACtD,QAAO,OAAO;UACL,OACT,QAAO;0DACW,KAAK,KAAK,WAAW,QAAQ,UAAU,MACzD,QAAO,KAAK;KAEZ,QAAO;;AA2DX,MAAM,EACJ,kBACA,cAAc,kBACd,qBACA,iBAAiB,qBACjB,aACA,iBACEA,6CACF,QACAC,6BACD;;;;;;AASD,MAAa,WAAW,cACa,EACjC,MACA,UACA,UACA,YACA,WACA,iBACA,OACA,eACA,cACA,eACA,iBACA,YACA,gBACA,WACA,YACA,mBACA,cACA,GAAG,WAC0B;CAC7B,MAAM,4CAAiC;AACrC,MAAI,SAAU,QAAO;AAErB,SAAO,kBAAkB,MAAM;IAC9B,CAAC,UAAU,MAAM,CAAC;CACrB,MAAM,EACJ,kBACA,WACA,cACA,aACA,eACA,UACA,eACA,cACA,oBACA,iBACA,eACA,aACA,kBACA,UACA,qBACEC,yBAAQ;EAAE,GAAG;EAAM,UAAU;EAAkB,CAAC;AAsEpD,QACE,2CAACC;EAAuB,OAAO;YAC7B,2CAACC;GAAY,iCAtER;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD,GACD;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD,CACF;aAyCK,2CAAC;IAAiB,iCAvCf;KACL;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACD,GACD;KACE;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACA;KACD,CACF;cAMO,2CAACC,uBAAO,MAAG,GAAI,cAAc,GAAI;KAChB;IACP;GACS;GAG7B,QACA,EAAE,eAAe,CAAC,OAAO,EAAE,CAC5B,EAAE;AAwEH,MAAa,WAAW,aACrB,EACC,UAAU,cACV,eAAe,mBACf,YACA,WAAW,eACX,OACA,eACA,cACA,OAAO,4DAAqB,MAAM,GAAG,QAAQ,QAC7C,eACA,iBACA,YACA,gBACA,YACA,mBACA,cACA,GAAG,WACC;CACJ,MAAM,EAAE,cAAcC,iCAAgB;CACtC,MAAM,mBAAmB,qBAAqB;CAC9C,MAAM,UAAUC,kDACd,iBAAiB,iBAAiB,iBAAiB,OACpD;CACD,MAAM,WAAW,gBAAgB,iBAAiB;CAClD,MAAM,YAAY,iBAAiB,iBAAiB;CACpD,MAAM,oBAAoB,uBACxB,SACA,cACA,iBAAiB,aAClB;CACD,MAAM,kBAAkB,uBACtB,SACA,YACA,iBAAiB,WAClB;CACD,MAAM,mBAAmB,uBACvB,QACA,cACA,iBAAiB,aAClB;CACD,MAAM,iBAAiB,uBACrB,QACA,YACA,iBAAiB,WAClB;CACD,MAAM,uCAA4B,YAAY;AAG5C,SAAO,kBAFO,MAAM,qBAAqB,CAEV;IAC9B,CAAC,kBAAkB,CAAC;CACvB,MAAM,EACJ,YACA,UACA,UACA,OACA,cACA,WACA,OACA,OACA,kBACA,mBACA,eACA,mBACA,cACA,eACA,iBACA,cACA,aACA,kBACEC,6BAAY;EACd,GAAG,iBAAiB;EACpB,GAAG;EACH,eAAe,oBAAoB,gBAAgB;EACnD,OAAO;EACR,CAAC;CACF,MAAM,QAAQ;EAAE;EAAU,UAAU;EAAW;CAC/C,MAAM,oCACG;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACD,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CACD,MAAM,qCAA0B,EAAE,WAAW,MAAM,UAAU,EAAE,GAAG,CAAC,MAAM,CAAC;AAE1E,QACE,2CAACC;EAAgB,OAAO;YACrB,QACC,4CAACJ,uBAAO;GAAG,GAAI;GAAU,GAAI,mBAAmB;cAC9C,4CAAC;IACC,GAAI,gBAAgB;KAClB,GAAG,iBAAiB;KACpB,GAAG;KACJ,CAAC;;KAEF,2CAAC;MACC,GAAI,kBAAkB;OACpB,iEAA0B,SAAS;OACnC,GAAG,iBAAiB;OACpB,GAAG;OACJ,CAAC;gBAED,eAAe,2CAAC,YAAU,kDAAW,WAAW,MAAM;OACzC;KACf,YACC,2CAAC;MACC,MAAM,iBAAiB;MACvB,GAAI,iBAAiB;OACnB,GAAG,iBAAiB;OACpB,GAAG;OACJ,CAAC;OACF,GACA;KACH,oBACC,2CAAC;MACC,GAAI,iBAAiB;MACrB,GAAI;+DAEK,mBAAmB,MAAM;OACjB,GACjB;KACH,QACC,2CAAC;MACC,GAAI,cAAc;OAChB,GAAG,iBAAiB;OACpB,GAAG;OACJ,CAAC;gBAED;OACS,GACV;KACH,kBACC,2CAAC;MACC,GAAI,iBAAiB;MACrB,GAAI;+DAEK,iBAAiB,MAAM;OACjB,GACf;;KACQ,EAEd,2CAAC;IACC,UAAU,CAAC,WAAW,IAAI;IAC1B,MAAM;IACN,GAAI,cAAc;KAChB,GAAG,iBAAiB;KACpB,GAAG;KACJ,CAAC;IAED;KACS;IACF,GAEZ,4CAACA,uBAAO;GAAG,GAAI;GAAU,GAAI,cAAc;;IACzC,2CAAC,iBACC,GAAI,kBAAkB;KACpB,eAAe;KACf,GAAG,iBAAiB;KACpB,GAAG;KACJ,CAAC,GACF;IACD,YACC,2CAAC;KACC,MAAM,iBAAiB;KACvB,GAAI,iBAAiB;MACnB,GAAG,iBAAiB;MACpB,GAAG;MACJ,CAAC;MACF,GACA;IACH,mBACC,2CAAC;KACC,GAAI,iBAAiB;KACrB,GAAI;8DAEK,kBAAkB,MAAM;MAChB,GACjB;IACH,QACC,2CAAC;KACC,GAAI,cAAc;MAChB,GAAG,iBAAiB;MACpB,GAAG;MACJ,CAAC;eAED;MACS,GACV;IACH,iBACC,2CAAC;KACC,GAAI,iBAAiB;KACrB,GAAI;8DAEK,gBAAgB,MAAM;MAChB,GACf;;IACM;GAEE;GAGtB,OACD,EAAE;AAIH,MAAM,cAAc,YAAqC,OAAO,UAAU,EAAE;AAO5E,MAAM,YAAY,aAAmC,UAAU;AAC7D,QAAO,2CAACK;EAAS,IAAG;EAAK,+CAAwB,MAAM;GAAI;GAC1D,QAAQ,EAAE;AAIb,MAAM,gBAAgB,aACnB,EAAE,WAAW,2CAACC,gDAAmB,EAAE,GAAG,WAAW;CAChD,MAAM,EAAE,oBAAoB,qBAAqB;AAEjD,KAAI,gBAAiB,QAAO;AAE5B,+BAAqC,SAAS,CAC5C,gCAAoB,UAAU;EAAE,GAAG;EAAM,GAAG,SAAS;EAAO,CAAC;AAE/D,QAAOC,eAAS,MAAM,SAAS,GAAG,IAAIA,eAAS,KAAK,KAAK,GAAG;GAE9D,YACD,EAAE;AAIH,MAAM,eAAe,YACnBC,2BACA,WACD,EAAE;AAIH,MAAM,mBAAmB,YAA0C,OAAO;CACxE,MAAM;CACN,MAAM,CAAC,WAAW,QAAQ;CAC3B,CAAC,EAAE;AAIJ,MAAM,iBAAiB,YAAwC,OAAO;CACpE,MAAM;CACN,MAAM,CAAC,WAAW,MAAM;CACzB,CAAC,EAAE;AAIJ,MAAM,YAAY,YAAoC,QAAQ,QAAQ,EAAE"}