@yamada-ui/react 2.2.1-dev-20260501154625 → 2.2.1-dev-20260501155724

package/dist/cjs/components/popover/popover.cjs

@@ -82,13 +82,20 @@ const usePopoverStyleProps = (props = {}) => {
 	const gutter = require_hooks_use_value_index.useValue(props.gutter);
 	const matchWidth = require_hooks_use_value_index.useValue(props.matchWidth);
 	const strategy = require_hooks_use_value_index.useValue(props.strategy);
-	return {
-		flip: require_hooks_use_value_index.useValue(props.flip),
+	const flip = require_hooks_use_value_index.useValue(props.flip);
+	return (0, react.useMemo)(() => (0, require_utils_index.utils_exports.filterUndefined)({
+		flip,
 		gutter,
 		matchWidth,
 		placement,
 		strategy
-	};
+	}), [
+		flip,
+		gutter,
+		matchWidth,
+		placement,
+		strategy
+	]);
 };
 const { ComponentContext, PropsContext: PopoverPropsContext, StyleContext, useComponentContext, usePropsContext: usePopoverPropsContext, withContext, useRootComponentProps } = require_create_component.createSlotComponent("popover", require_popover_style.popoverStyle);
 /**

package/dist/cjs/components/popover/popover.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"popover.cjs","names":["useValue","fadeScaleVariants","slideFadeVariants","createSlotComponent","popoverStyle","PopoverRoot: FC<PopoverRootProps>","usePopover","AnimatePresence","Portal","motion"],"sources":["../../../../src/components/popover/popover.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren } from \"react\"\nimport type {\n  HTMLProps,\n  HTMLStyledProps,\n  SimplePlacement,\n  StyleValue,\n  ThemeProps,\n} from \"../../core\"\nimport type { Merge, ReactNodeOrFunction } from \"../../utils\"\nimport type { HTMLMotionProps, MotionTransitionProps } from \"../motion\"\nimport type { PortalProps } from \"../portal\"\nimport type { PopoverStyle } from \"./popover.style\"\nimport type { UsePopoverProps, UsePopoverReturn } from \"./use-popover\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { cast, runIfFn } from \"../../utils\"\nimport { fadeScaleVariants } from \"../fade-scale\"\nimport { motion } from \"../motion\"\nimport { Portal } from \"../portal\"\nimport { slideFadeVariants } from \"../slide-fade\"\nimport { popoverStyle } from \"./popover.style\"\nimport { usePopover } from \"./use-popover\"\n\nexport interface UsePopupAnimationProps {\n  /**\n   * The animation of the element.\n   *\n   * @default 'scale'\n   */\n  animationScheme?: StyleValue<\"none\" | \"scale\" | SimplePlacement>\n  /**\n   * The animation duration.\n   *\n   * @default 0.1\n   */\n  duration?: StyleValue<MotionTransitionProps[\"duration\"]>\n}\n\nexport const usePopupAnimationProps = (props: UsePopupAnimationProps = {}) => {\n  const animationScheme = useValue(props.animationScheme ?? \"scale\")\n  const duration = useValue(props.duration ?? 0.1)\n  const sharedProps = { animate: \"enter\", exit: \"exit\", initial: \"exit\" }\n\n  switch (animationScheme) {\n    case \"scale\":\n      return {\n        ...sharedProps,\n        custom: { duration, reverse: true, scale: 0.95 },\n        variants: fadeScaleVariants,\n      }\n    case \"block-start\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetY: -16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    case \"inline-end\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetX: 16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    case \"inline-start\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetX: -16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    case \"block-end\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetY: 16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    default:\n      return {}\n  }\n}\n\nexport interface UsePopoverStyleProps {\n  /**\n   * If `true`, the popper will change its placement and flip when it's about to overflow its boundary area.\n   *\n   * @default true\n   */\n  flip?: StyleValue<UsePopoverProps[\"flip\"]>\n  /**\n   * The distance or margin between the reference and popper.\n   * It is used internally to create an `offset` modifier.\n   *\n   * @default 8\n   */\n  gutter?: StyleValue<UsePopoverProps[\"gutter\"]>\n  /**\n   * If `true`, the popper will match the width of the reference at all times.\n   * It's useful for `autocomplete`, `date-picker` and `select` patterns.\n   *\n   * @default false\n   */\n  matchWidth?: StyleValue<UsePopoverProps[\"matchWidth\"]>\n  /**\n   * The placement of the popper relative to its reference.\n   *\n   * @default 'end'\n   */\n  placement?: StyleValue<UsePopoverProps[\"placement\"]>\n  /**\n   * The CSS positioning strategy to use.\n   *\n   * @default 'absolute'\n   */\n  strategy?: StyleValue<UsePopoverProps[\"strategy\"]>\n}\n\nexport const usePopoverStyleProps = (props: UsePopoverStyleProps = {}) => {\n  const placement = useValue(props.placement)\n  const gutter = useValue(props.gutter)\n  const matchWidth = useValue(props.matchWidth)\n  const strategy = useValue(props.strategy)\n  const flip = useValue(props.flip)\n\n  return {\n    flip,\n    gutter,\n    matchWidth,\n    placement,\n    strategy,\n  }\n}\n\ninterface ComponentContext\n  extends\n    Pick<\n      UsePopoverReturn,\n      | \"getAnchorProps\"\n      | \"getBodyProps\"\n      | \"getCloseTriggerProps\"\n      | \"getContentProps\"\n      | \"getFooterProps\"\n      | \"getHeaderProps\"\n      | \"getPositionerProps\"\n      | \"getTriggerProps\"\n      | \"open\"\n    >,\n    UsePopupAnimationProps {}\n\nexport interface PopoverRootProps\n  extends\n    Merge<UsePopoverProps, UsePopoverStyleProps>,\n    UsePopupAnimationProps,\n    ThemeProps<PopoverStyle> {\n  /**\n   * The children of the popover.\n   */\n  children?: ReactNodeOrFunction<{\n    open: boolean\n    onClose: () => void\n  }>\n}\n\nconst {\n  ComponentContext,\n  PropsContext: PopoverPropsContext,\n  StyleContext,\n  useComponentContext,\n  usePropsContext: usePopoverPropsContext,\n  withContext,\n  useRootComponentProps,\n} = createSlotComponent<PopoverRootProps, PopoverStyle, ComponentContext>(\n  \"popover\",\n  popoverStyle,\n)\n\nexport { PopoverPropsContext, usePopoverPropsContext }\n\n/**\n * `Popover` is a component that floats around an element to display information.\n *\n * @see https://yamada-ui.com/docs/components/popover\n */\nexport const PopoverRoot: FC<PopoverRootProps> = (props) => {\n  const styleProps = usePopoverStyleProps(props)\n  const [styleContext, { animationScheme, children, duration, ...rest }] =\n    useRootComponentProps({ ...props, ...styleProps })\n  const {\n    open,\n    getAnchorProps,\n    getBodyProps,\n    getCloseTriggerProps,\n    getContentProps,\n    getFooterProps,\n    getHeaderProps,\n    getPositionerProps,\n    getTriggerProps,\n    onClose,\n  } = usePopover(rest)\n  const componentContext = useMemo(\n    () => ({\n      animationScheme,\n      duration,\n      open,\n      getAnchorProps,\n      getBodyProps,\n      getCloseTriggerProps,\n      getContentProps,\n      getFooterProps,\n      getHeaderProps,\n      getPositionerProps,\n      getTriggerProps,\n    }),\n    [\n      open,\n      animationScheme,\n      duration,\n      getAnchorProps,\n      getBodyProps,\n      getCloseTriggerProps,\n      getContentProps,\n      getFooterProps,\n      getHeaderProps,\n      getPositionerProps,\n      getTriggerProps,\n    ],\n  )\n\n  return (\n    <StyleContext value={styleContext}>\n      <ComponentContext value={componentContext}>\n        {runIfFn(children, { open, onClose })}\n      </ComponentContext>\n    </StyleContext>\n  )\n}\n\nexport interface PopoverTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PopoverTrigger = withContext<\"button\", PopoverTriggerProps>(\n  \"button\",\n  \"trigger\",\n)({ asChild: true }, (props) => {\n  const { getTriggerProps } = useComponentContext()\n\n  return getTriggerProps(props)\n})\n\nexport interface PopoverCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PopoverCloseTrigger = withContext<\n  \"button\",\n  PopoverCloseTriggerProps\n>(\"button\", { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] })(\n  { asChild: true },\n  (props) => {\n    const { getCloseTriggerProps } = useComponentContext()\n\n    return getCloseTriggerProps(props)\n  },\n)\n\nexport interface PopoverAnchorProps extends HTMLStyledProps {}\n\nexport const PopoverAnchor = withContext<\"div\", PopoverAnchorProps>(\n  \"div\",\n  \"anchor\",\n)({ asChild: true }, (props) => {\n  const { getAnchorProps } = useComponentContext()\n\n  return getAnchorProps(props)\n})\n\ninterface PopoverPositionerProps extends HTMLStyledProps {}\n\nconst PopoverPositioner = withContext<\"div\", PopoverPositionerProps>(\n  \"div\",\n  \"positioner\",\n)(undefined, (props) => {\n  const { getPositionerProps } = useComponentContext()\n\n  return getPositionerProps(props)\n})\n\nexport interface PopoverContentProps\n  extends Omit<HTMLMotionProps, \"children\">, PropsWithChildren {\n  /**\n   * Props for portal component.\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n}\n\nexport const PopoverContent = withContext<\"div\", PopoverContentProps>(\n  ({ portalProps, ...rest }) => {\n    const { animationScheme, duration, open, getContentProps } =\n      useComponentContext()\n    const popupAnimationProps = usePopupAnimationProps({\n      animationScheme,\n      duration,\n    })\n\n    return (\n      <AnimatePresence>\n        {open ? (\n          <Portal {...portalProps}>\n            <PopoverPositioner>\n              <motion.div\n                {...popupAnimationProps}\n                {...cast<HTMLMotionProps>(\n                  getContentProps(cast<HTMLProps>(rest)),\n                )}\n              />\n            </PopoverPositioner>\n          </Portal>\n        ) : null}\n      </AnimatePresence>\n    )\n  },\n  \"content\",\n)()\n\nexport interface PopoverHeaderProps extends HTMLStyledProps {}\n\nexport const PopoverHeader = withContext<\"div\", PopoverHeaderProps>(\n  \"div\",\n  \"header\",\n)(undefined, (props) => {\n  const { getHeaderProps } = useComponentContext()\n\n  return getHeaderProps(props)\n})\n\nexport interface PopoverBodyProps extends HTMLStyledProps {}\n\nexport const PopoverBody = withContext<\"div\", PopoverBodyProps>(\"div\", \"body\")(\n  undefined,\n  (props) => {\n    const { getBodyProps } = useComponentContext()\n\n    return getBodyProps(props)\n  },\n)\n\nexport interface PopoverFooterProps extends HTMLStyledProps {}\n\nexport const PopoverFooter = withContext<\"div\", PopoverFooterProps>(\n  \"div\",\n  \"footer\",\n)(undefined, (props) => {\n  const { getFooterProps } = useComponentContext()\n\n  return getFooterProps(props)\n})\n"],"mappings":"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"}
+{"version":3,"file":"popover.cjs","names":["useValue","fadeScaleVariants","slideFadeVariants","createSlotComponent","popoverStyle","PopoverRoot: FC<PopoverRootProps>","usePopover","AnimatePresence","Portal","motion"],"sources":["../../../../src/components/popover/popover.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren } from \"react\"\nimport type {\n  HTMLProps,\n  HTMLStyledProps,\n  SimplePlacement,\n  StyleValue,\n  ThemeProps,\n} from \"../../core\"\nimport type { Merge, ReactNodeOrFunction } from \"../../utils\"\nimport type { HTMLMotionProps, MotionTransitionProps } from \"../motion\"\nimport type { PortalProps } from \"../portal\"\nimport type { PopoverStyle } from \"./popover.style\"\nimport type { UsePopoverProps, UsePopoverReturn } from \"./use-popover\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { cast, filterUndefined, runIfFn } from \"../../utils\"\nimport { fadeScaleVariants } from \"../fade-scale\"\nimport { motion } from \"../motion\"\nimport { Portal } from \"../portal\"\nimport { slideFadeVariants } from \"../slide-fade\"\nimport { popoverStyle } from \"./popover.style\"\nimport { usePopover } from \"./use-popover\"\n\nexport interface UsePopupAnimationProps {\n  /**\n   * The animation of the element.\n   *\n   * @default 'scale'\n   */\n  animationScheme?: StyleValue<\"none\" | \"scale\" | SimplePlacement>\n  /**\n   * The animation duration.\n   *\n   * @default 0.1\n   */\n  duration?: StyleValue<MotionTransitionProps[\"duration\"]>\n}\n\nexport const usePopupAnimationProps = (props: UsePopupAnimationProps = {}) => {\n  const animationScheme = useValue(props.animationScheme ?? \"scale\")\n  const duration = useValue(props.duration ?? 0.1)\n  const sharedProps = { animate: \"enter\", exit: \"exit\", initial: \"exit\" }\n\n  switch (animationScheme) {\n    case \"scale\":\n      return {\n        ...sharedProps,\n        custom: { duration, reverse: true, scale: 0.95 },\n        variants: fadeScaleVariants,\n      }\n    case \"block-start\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetY: -16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    case \"inline-end\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetX: 16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    case \"inline-start\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetX: -16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    case \"block-end\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetY: 16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    default:\n      return {}\n  }\n}\n\nexport interface UsePopoverStyleProps {\n  /**\n   * If `true`, the popper will change its placement and flip when it's about to overflow its boundary area.\n   *\n   * @default true\n   */\n  flip?: StyleValue<UsePopoverProps[\"flip\"]>\n  /**\n   * The distance or margin between the reference and popper.\n   * It is used internally to create an `offset` modifier.\n   *\n   * @default 8\n   */\n  gutter?: StyleValue<UsePopoverProps[\"gutter\"]>\n  /**\n   * If `true`, the popper will match the width of the reference at all times.\n   * It's useful for `autocomplete`, `date-picker` and `select` patterns.\n   *\n   * @default false\n   */\n  matchWidth?: StyleValue<UsePopoverProps[\"matchWidth\"]>\n  /**\n   * The placement of the popper relative to its reference.\n   *\n   * @default 'end'\n   */\n  placement?: StyleValue<UsePopoverProps[\"placement\"]>\n  /**\n   * The CSS positioning strategy to use.\n   *\n   * @default 'absolute'\n   */\n  strategy?: StyleValue<UsePopoverProps[\"strategy\"]>\n}\n\nexport const usePopoverStyleProps = (props: UsePopoverStyleProps = {}) => {\n  const placement = useValue(props.placement)\n  const gutter = useValue(props.gutter)\n  const matchWidth = useValue(props.matchWidth)\n  const strategy = useValue(props.strategy)\n  const flip = useValue(props.flip)\n\n  return useMemo(\n    () => filterUndefined({ flip, gutter, matchWidth, placement, strategy }),\n    [flip, gutter, matchWidth, placement, strategy],\n  )\n}\n\ninterface ComponentContext\n  extends\n    Pick<\n      UsePopoverReturn,\n      | \"getAnchorProps\"\n      | \"getBodyProps\"\n      | \"getCloseTriggerProps\"\n      | \"getContentProps\"\n      | \"getFooterProps\"\n      | \"getHeaderProps\"\n      | \"getPositionerProps\"\n      | \"getTriggerProps\"\n      | \"open\"\n    >,\n    UsePopupAnimationProps {}\n\nexport interface PopoverRootProps\n  extends\n    Merge<UsePopoverProps, UsePopoverStyleProps>,\n    UsePopupAnimationProps,\n    ThemeProps<PopoverStyle> {\n  /**\n   * The children of the popover.\n   */\n  children?: ReactNodeOrFunction<{\n    open: boolean\n    onClose: () => void\n  }>\n}\n\nconst {\n  ComponentContext,\n  PropsContext: PopoverPropsContext,\n  StyleContext,\n  useComponentContext,\n  usePropsContext: usePopoverPropsContext,\n  withContext,\n  useRootComponentProps,\n} = createSlotComponent<PopoverRootProps, PopoverStyle, ComponentContext>(\n  \"popover\",\n  popoverStyle,\n)\n\nexport { PopoverPropsContext, usePopoverPropsContext }\n\n/**\n * `Popover` is a component that floats around an element to display information.\n *\n * @see https://yamada-ui.com/docs/components/popover\n */\nexport const PopoverRoot: FC<PopoverRootProps> = (props) => {\n  const styleProps = usePopoverStyleProps(props)\n  const [styleContext, { animationScheme, children, duration, ...rest }] =\n    useRootComponentProps({ ...props, ...styleProps })\n  const {\n    open,\n    getAnchorProps,\n    getBodyProps,\n    getCloseTriggerProps,\n    getContentProps,\n    getFooterProps,\n    getHeaderProps,\n    getPositionerProps,\n    getTriggerProps,\n    onClose,\n  } = usePopover(rest)\n  const componentContext = useMemo(\n    () => ({\n      animationScheme,\n      duration,\n      open,\n      getAnchorProps,\n      getBodyProps,\n      getCloseTriggerProps,\n      getContentProps,\n      getFooterProps,\n      getHeaderProps,\n      getPositionerProps,\n      getTriggerProps,\n    }),\n    [\n      open,\n      animationScheme,\n      duration,\n      getAnchorProps,\n      getBodyProps,\n      getCloseTriggerProps,\n      getContentProps,\n      getFooterProps,\n      getHeaderProps,\n      getPositionerProps,\n      getTriggerProps,\n    ],\n  )\n\n  return (\n    <StyleContext value={styleContext}>\n      <ComponentContext value={componentContext}>\n        {runIfFn(children, { open, onClose })}\n      </ComponentContext>\n    </StyleContext>\n  )\n}\n\nexport interface PopoverTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PopoverTrigger = withContext<\"button\", PopoverTriggerProps>(\n  \"button\",\n  \"trigger\",\n)({ asChild: true }, (props) => {\n  const { getTriggerProps } = useComponentContext()\n\n  return getTriggerProps(props)\n})\n\nexport interface PopoverCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PopoverCloseTrigger = withContext<\n  \"button\",\n  PopoverCloseTriggerProps\n>(\"button\", { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] })(\n  { asChild: true },\n  (props) => {\n    const { getCloseTriggerProps } = useComponentContext()\n\n    return getCloseTriggerProps(props)\n  },\n)\n\nexport interface PopoverAnchorProps extends HTMLStyledProps {}\n\nexport const PopoverAnchor = withContext<\"div\", PopoverAnchorProps>(\n  \"div\",\n  \"anchor\",\n)({ asChild: true }, (props) => {\n  const { getAnchorProps } = useComponentContext()\n\n  return getAnchorProps(props)\n})\n\ninterface PopoverPositionerProps extends HTMLStyledProps {}\n\nconst PopoverPositioner = withContext<\"div\", PopoverPositionerProps>(\n  \"div\",\n  \"positioner\",\n)(undefined, (props) => {\n  const { getPositionerProps } = useComponentContext()\n\n  return getPositionerProps(props)\n})\n\nexport interface PopoverContentProps\n  extends Omit<HTMLMotionProps, \"children\">, PropsWithChildren {\n  /**\n   * Props for portal component.\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n}\n\nexport const PopoverContent = withContext<\"div\", PopoverContentProps>(\n  ({ portalProps, ...rest }) => {\n    const { animationScheme, duration, open, getContentProps } =\n      useComponentContext()\n    const popupAnimationProps = usePopupAnimationProps({\n      animationScheme,\n      duration,\n    })\n\n    return (\n      <AnimatePresence>\n        {open ? (\n          <Portal {...portalProps}>\n            <PopoverPositioner>\n              <motion.div\n                {...popupAnimationProps}\n                {...cast<HTMLMotionProps>(\n                  getContentProps(cast<HTMLProps>(rest)),\n                )}\n              />\n            </PopoverPositioner>\n          </Portal>\n        ) : null}\n      </AnimatePresence>\n    )\n  },\n  \"content\",\n)()\n\nexport interface PopoverHeaderProps extends HTMLStyledProps {}\n\nexport const PopoverHeader = withContext<\"div\", PopoverHeaderProps>(\n  \"div\",\n  \"header\",\n)(undefined, (props) => {\n  const { getHeaderProps } = useComponentContext()\n\n  return getHeaderProps(props)\n})\n\nexport interface PopoverBodyProps extends HTMLStyledProps {}\n\nexport const PopoverBody = withContext<\"div\", PopoverBodyProps>(\"div\", \"body\")(\n  undefined,\n  (props) => {\n    const { getBodyProps } = useComponentContext()\n\n    return getBodyProps(props)\n  },\n)\n\nexport interface PopoverFooterProps extends HTMLStyledProps {}\n\nexport const PopoverFooter = withContext<\"div\", PopoverFooterProps>(\n  \"div\",\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/popover/popover.js

@@ -81,13 +81,20 @@ const usePopoverStyleProps = (props = {}) => {
 	const gutter = useValue(props.gutter);
 	const matchWidth = useValue(props.matchWidth);
 	const strategy = useValue(props.strategy);
-	return {
-		flip: useValue(props.flip),
+	const flip = useValue(props.flip);
+	return useMemo(() => (0, utils_exports.filterUndefined)({
+		flip,
 		gutter,
 		matchWidth,
 		placement,
 		strategy
-	};
+	}), [
+		flip,
+		gutter,
+		matchWidth,
+		placement,
+		strategy
+	]);
 };
 const { ComponentContext, PropsContext: PopoverPropsContext, StyleContext, useComponentContext, usePropsContext: usePopoverPropsContext, withContext, useRootComponentProps } = createSlotComponent("popover", popoverStyle);
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"popover.js","names":["PopoverRoot: FC<PopoverRootProps>","motion"],"sources":["../../../../src/components/popover/popover.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren } from \"react\"\nimport type {\n  HTMLProps,\n  HTMLStyledProps,\n  SimplePlacement,\n  StyleValue,\n  ThemeProps,\n} from \"../../core\"\nimport type { Merge, ReactNodeOrFunction } from \"../../utils\"\nimport type { HTMLMotionProps, MotionTransitionProps } from \"../motion\"\nimport type { PortalProps } from \"../portal\"\nimport type { PopoverStyle } from \"./popover.style\"\nimport type { UsePopoverProps, UsePopoverReturn } from \"./use-popover\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { cast, runIfFn } from \"../../utils\"\nimport { fadeScaleVariants } from \"../fade-scale\"\nimport { motion } from \"../motion\"\nimport { Portal } from \"../portal\"\nimport { slideFadeVariants } from \"../slide-fade\"\nimport { popoverStyle } from \"./popover.style\"\nimport { usePopover } from \"./use-popover\"\n\nexport interface UsePopupAnimationProps {\n  /**\n   * The animation of the element.\n   *\n   * @default 'scale'\n   */\n  animationScheme?: StyleValue<\"none\" | \"scale\" | SimplePlacement>\n  /**\n   * The animation duration.\n   *\n   * @default 0.1\n   */\n  duration?: StyleValue<MotionTransitionProps[\"duration\"]>\n}\n\nexport const usePopupAnimationProps = (props: UsePopupAnimationProps = {}) => {\n  const animationScheme = useValue(props.animationScheme ?? \"scale\")\n  const duration = useValue(props.duration ?? 0.1)\n  const sharedProps = { animate: \"enter\", exit: \"exit\", initial: \"exit\" }\n\n  switch (animationScheme) {\n    case \"scale\":\n      return {\n        ...sharedProps,\n        custom: { duration, reverse: true, scale: 0.95 },\n        variants: fadeScaleVariants,\n      }\n    case \"block-start\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetY: -16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    case \"inline-end\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetX: 16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    case \"inline-start\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetX: -16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    case \"block-end\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetY: 16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    default:\n      return {}\n  }\n}\n\nexport interface UsePopoverStyleProps {\n  /**\n   * If `true`, the popper will change its placement and flip when it's about to overflow its boundary area.\n   *\n   * @default true\n   */\n  flip?: StyleValue<UsePopoverProps[\"flip\"]>\n  /**\n   * The distance or margin between the reference and popper.\n   * It is used internally to create an `offset` modifier.\n   *\n   * @default 8\n   */\n  gutter?: StyleValue<UsePopoverProps[\"gutter\"]>\n  /**\n   * If `true`, the popper will match the width of the reference at all times.\n   * It's useful for `autocomplete`, `date-picker` and `select` patterns.\n   *\n   * @default false\n   */\n  matchWidth?: StyleValue<UsePopoverProps[\"matchWidth\"]>\n  /**\n   * The placement of the popper relative to its reference.\n   *\n   * @default 'end'\n   */\n  placement?: StyleValue<UsePopoverProps[\"placement\"]>\n  /**\n   * The CSS positioning strategy to use.\n   *\n   * @default 'absolute'\n   */\n  strategy?: StyleValue<UsePopoverProps[\"strategy\"]>\n}\n\nexport const usePopoverStyleProps = (props: UsePopoverStyleProps = {}) => {\n  const placement = useValue(props.placement)\n  const gutter = useValue(props.gutter)\n  const matchWidth = useValue(props.matchWidth)\n  const strategy = useValue(props.strategy)\n  const flip = useValue(props.flip)\n\n  return {\n    flip,\n    gutter,\n    matchWidth,\n    placement,\n    strategy,\n  }\n}\n\ninterface ComponentContext\n  extends\n    Pick<\n      UsePopoverReturn,\n      | \"getAnchorProps\"\n      | \"getBodyProps\"\n      | \"getCloseTriggerProps\"\n      | \"getContentProps\"\n      | \"getFooterProps\"\n      | \"getHeaderProps\"\n      | \"getPositionerProps\"\n      | \"getTriggerProps\"\n      | \"open\"\n    >,\n    UsePopupAnimationProps {}\n\nexport interface PopoverRootProps\n  extends\n    Merge<UsePopoverProps, UsePopoverStyleProps>,\n    UsePopupAnimationProps,\n    ThemeProps<PopoverStyle> {\n  /**\n   * The children of the popover.\n   */\n  children?: ReactNodeOrFunction<{\n    open: boolean\n    onClose: () => void\n  }>\n}\n\nconst {\n  ComponentContext,\n  PropsContext: PopoverPropsContext,\n  StyleContext,\n  useComponentContext,\n  usePropsContext: usePopoverPropsContext,\n  withContext,\n  useRootComponentProps,\n} = createSlotComponent<PopoverRootProps, PopoverStyle, ComponentContext>(\n  \"popover\",\n  popoverStyle,\n)\n\nexport { PopoverPropsContext, usePopoverPropsContext }\n\n/**\n * `Popover` is a component that floats around an element to display information.\n *\n * @see https://yamada-ui.com/docs/components/popover\n */\nexport const PopoverRoot: FC<PopoverRootProps> = (props) => {\n  const styleProps = usePopoverStyleProps(props)\n  const [styleContext, { animationScheme, children, duration, ...rest }] =\n    useRootComponentProps({ ...props, ...styleProps })\n  const {\n    open,\n    getAnchorProps,\n    getBodyProps,\n    getCloseTriggerProps,\n    getContentProps,\n    getFooterProps,\n    getHeaderProps,\n    getPositionerProps,\n    getTriggerProps,\n    onClose,\n  } = usePopover(rest)\n  const componentContext = useMemo(\n    () => ({\n      animationScheme,\n      duration,\n      open,\n      getAnchorProps,\n      getBodyProps,\n      getCloseTriggerProps,\n      getContentProps,\n      getFooterProps,\n      getHeaderProps,\n      getPositionerProps,\n      getTriggerProps,\n    }),\n    [\n      open,\n      animationScheme,\n      duration,\n      getAnchorProps,\n      getBodyProps,\n      getCloseTriggerProps,\n      getContentProps,\n      getFooterProps,\n      getHeaderProps,\n      getPositionerProps,\n      getTriggerProps,\n    ],\n  )\n\n  return (\n    <StyleContext value={styleContext}>\n      <ComponentContext value={componentContext}>\n        {runIfFn(children, { open, onClose })}\n      </ComponentContext>\n    </StyleContext>\n  )\n}\n\nexport interface PopoverTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PopoverTrigger = withContext<\"button\", PopoverTriggerProps>(\n  \"button\",\n  \"trigger\",\n)({ asChild: true }, (props) => {\n  const { getTriggerProps } = useComponentContext()\n\n  return getTriggerProps(props)\n})\n\nexport interface PopoverCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PopoverCloseTrigger = withContext<\n  \"button\",\n  PopoverCloseTriggerProps\n>(\"button\", { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] })(\n  { asChild: true },\n  (props) => {\n    const { getCloseTriggerProps } = useComponentContext()\n\n    return getCloseTriggerProps(props)\n  },\n)\n\nexport interface PopoverAnchorProps extends HTMLStyledProps {}\n\nexport const PopoverAnchor = withContext<\"div\", PopoverAnchorProps>(\n  \"div\",\n  \"anchor\",\n)({ asChild: true }, (props) => {\n  const { getAnchorProps } = useComponentContext()\n\n  return getAnchorProps(props)\n})\n\ninterface PopoverPositionerProps extends HTMLStyledProps {}\n\nconst PopoverPositioner = withContext<\"div\", PopoverPositionerProps>(\n  \"div\",\n  \"positioner\",\n)(undefined, (props) => {\n  const { getPositionerProps } = useComponentContext()\n\n  return getPositionerProps(props)\n})\n\nexport interface PopoverContentProps\n  extends Omit<HTMLMotionProps, \"children\">, PropsWithChildren {\n  /**\n   * Props for portal component.\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n}\n\nexport const PopoverContent = withContext<\"div\", PopoverContentProps>(\n  ({ portalProps, ...rest }) => {\n    const { animationScheme, duration, open, getContentProps } =\n      useComponentContext()\n    const popupAnimationProps = usePopupAnimationProps({\n      animationScheme,\n      duration,\n    })\n\n    return (\n      <AnimatePresence>\n        {open ? (\n          <Portal {...portalProps}>\n            <PopoverPositioner>\n              <motion.div\n                {...popupAnimationProps}\n                {...cast<HTMLMotionProps>(\n                  getContentProps(cast<HTMLProps>(rest)),\n                )}\n              />\n            </PopoverPositioner>\n          </Portal>\n        ) : null}\n      </AnimatePresence>\n    )\n  },\n  \"content\",\n)()\n\nexport interface PopoverHeaderProps extends HTMLStyledProps {}\n\nexport const PopoverHeader = withContext<\"div\", PopoverHeaderProps>(\n  \"div\",\n  \"header\",\n)(undefined, (props) => {\n  const { getHeaderProps } = useComponentContext()\n\n  return getHeaderProps(props)\n})\n\nexport interface PopoverBodyProps extends HTMLStyledProps {}\n\nexport const PopoverBody = withContext<\"div\", PopoverBodyProps>(\"div\", \"body\")(\n  undefined,\n  (props) => {\n    const { getBodyProps } = useComponentContext()\n\n    return getBodyProps(props)\n  },\n)\n\nexport interface PopoverFooterProps extends HTMLStyledProps {}\n\nexport const PopoverFooter = withContext<\"div\", PopoverFooterProps>(\n  \"div\",\n  \"footer\",\n)(undefined, (props) => {\n  const { getFooterProps } = useComponentContext()\n\n  return getFooterProps(props)\n})\n"],"mappings":"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"}
+{"version":3,"file":"popover.js","names":["PopoverRoot: FC<PopoverRootProps>","motion"],"sources":["../../../../src/components/popover/popover.tsx"],"sourcesContent":["\"use client\"\n\nimport type { FC, PropsWithChildren } from \"react\"\nimport type {\n  HTMLProps,\n  HTMLStyledProps,\n  SimplePlacement,\n  StyleValue,\n  ThemeProps,\n} from \"../../core\"\nimport type { Merge, ReactNodeOrFunction } from \"../../utils\"\nimport type { HTMLMotionProps, MotionTransitionProps } from \"../motion\"\nimport type { PortalProps } from \"../portal\"\nimport type { PopoverStyle } from \"./popover.style\"\nimport type { UsePopoverProps, UsePopoverReturn } from \"./use-popover\"\nimport { AnimatePresence } from \"motion/react\"\nimport { useMemo } from \"react\"\nimport { createSlotComponent } from \"../../core\"\nimport { useValue } from \"../../hooks/use-value\"\nimport { cast, filterUndefined, runIfFn } from \"../../utils\"\nimport { fadeScaleVariants } from \"../fade-scale\"\nimport { motion } from \"../motion\"\nimport { Portal } from \"../portal\"\nimport { slideFadeVariants } from \"../slide-fade\"\nimport { popoverStyle } from \"./popover.style\"\nimport { usePopover } from \"./use-popover\"\n\nexport interface UsePopupAnimationProps {\n  /**\n   * The animation of the element.\n   *\n   * @default 'scale'\n   */\n  animationScheme?: StyleValue<\"none\" | \"scale\" | SimplePlacement>\n  /**\n   * The animation duration.\n   *\n   * @default 0.1\n   */\n  duration?: StyleValue<MotionTransitionProps[\"duration\"]>\n}\n\nexport const usePopupAnimationProps = (props: UsePopupAnimationProps = {}) => {\n  const animationScheme = useValue(props.animationScheme ?? \"scale\")\n  const duration = useValue(props.duration ?? 0.1)\n  const sharedProps = { animate: \"enter\", exit: \"exit\", initial: \"exit\" }\n\n  switch (animationScheme) {\n    case \"scale\":\n      return {\n        ...sharedProps,\n        custom: { duration, reverse: true, scale: 0.95 },\n        variants: fadeScaleVariants,\n      }\n    case \"block-start\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetY: -16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    case \"inline-end\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetX: 16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    case \"inline-start\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetX: -16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    case \"block-end\":\n      return {\n        ...sharedProps,\n        custom: { duration, offsetY: 16, reverse: true },\n        variants: slideFadeVariants,\n      }\n    default:\n      return {}\n  }\n}\n\nexport interface UsePopoverStyleProps {\n  /**\n   * If `true`, the popper will change its placement and flip when it's about to overflow its boundary area.\n   *\n   * @default true\n   */\n  flip?: StyleValue<UsePopoverProps[\"flip\"]>\n  /**\n   * The distance or margin between the reference and popper.\n   * It is used internally to create an `offset` modifier.\n   *\n   * @default 8\n   */\n  gutter?: StyleValue<UsePopoverProps[\"gutter\"]>\n  /**\n   * If `true`, the popper will match the width of the reference at all times.\n   * It's useful for `autocomplete`, `date-picker` and `select` patterns.\n   *\n   * @default false\n   */\n  matchWidth?: StyleValue<UsePopoverProps[\"matchWidth\"]>\n  /**\n   * The placement of the popper relative to its reference.\n   *\n   * @default 'end'\n   */\n  placement?: StyleValue<UsePopoverProps[\"placement\"]>\n  /**\n   * The CSS positioning strategy to use.\n   *\n   * @default 'absolute'\n   */\n  strategy?: StyleValue<UsePopoverProps[\"strategy\"]>\n}\n\nexport const usePopoverStyleProps = (props: UsePopoverStyleProps = {}) => {\n  const placement = useValue(props.placement)\n  const gutter = useValue(props.gutter)\n  const matchWidth = useValue(props.matchWidth)\n  const strategy = useValue(props.strategy)\n  const flip = useValue(props.flip)\n\n  return useMemo(\n    () => filterUndefined({ flip, gutter, matchWidth, placement, strategy }),\n    [flip, gutter, matchWidth, placement, strategy],\n  )\n}\n\ninterface ComponentContext\n  extends\n    Pick<\n      UsePopoverReturn,\n      | \"getAnchorProps\"\n      | \"getBodyProps\"\n      | \"getCloseTriggerProps\"\n      | \"getContentProps\"\n      | \"getFooterProps\"\n      | \"getHeaderProps\"\n      | \"getPositionerProps\"\n      | \"getTriggerProps\"\n      | \"open\"\n    >,\n    UsePopupAnimationProps {}\n\nexport interface PopoverRootProps\n  extends\n    Merge<UsePopoverProps, UsePopoverStyleProps>,\n    UsePopupAnimationProps,\n    ThemeProps<PopoverStyle> {\n  /**\n   * The children of the popover.\n   */\n  children?: ReactNodeOrFunction<{\n    open: boolean\n    onClose: () => void\n  }>\n}\n\nconst {\n  ComponentContext,\n  PropsContext: PopoverPropsContext,\n  StyleContext,\n  useComponentContext,\n  usePropsContext: usePopoverPropsContext,\n  withContext,\n  useRootComponentProps,\n} = createSlotComponent<PopoverRootProps, PopoverStyle, ComponentContext>(\n  \"popover\",\n  popoverStyle,\n)\n\nexport { PopoverPropsContext, usePopoverPropsContext }\n\n/**\n * `Popover` is a component that floats around an element to display information.\n *\n * @see https://yamada-ui.com/docs/components/popover\n */\nexport const PopoverRoot: FC<PopoverRootProps> = (props) => {\n  const styleProps = usePopoverStyleProps(props)\n  const [styleContext, { animationScheme, children, duration, ...rest }] =\n    useRootComponentProps({ ...props, ...styleProps })\n  const {\n    open,\n    getAnchorProps,\n    getBodyProps,\n    getCloseTriggerProps,\n    getContentProps,\n    getFooterProps,\n    getHeaderProps,\n    getPositionerProps,\n    getTriggerProps,\n    onClose,\n  } = usePopover(rest)\n  const componentContext = useMemo(\n    () => ({\n      animationScheme,\n      duration,\n      open,\n      getAnchorProps,\n      getBodyProps,\n      getCloseTriggerProps,\n      getContentProps,\n      getFooterProps,\n      getHeaderProps,\n      getPositionerProps,\n      getTriggerProps,\n    }),\n    [\n      open,\n      animationScheme,\n      duration,\n      getAnchorProps,\n      getBodyProps,\n      getCloseTriggerProps,\n      getContentProps,\n      getFooterProps,\n      getHeaderProps,\n      getPositionerProps,\n      getTriggerProps,\n    ],\n  )\n\n  return (\n    <StyleContext value={styleContext}>\n      <ComponentContext value={componentContext}>\n        {runIfFn(children, { open, onClose })}\n      </ComponentContext>\n    </StyleContext>\n  )\n}\n\nexport interface PopoverTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PopoverTrigger = withContext<\"button\", PopoverTriggerProps>(\n  \"button\",\n  \"trigger\",\n)({ asChild: true }, (props) => {\n  const { getTriggerProps } = useComponentContext()\n\n  return getTriggerProps(props)\n})\n\nexport interface PopoverCloseTriggerProps extends HTMLStyledProps<\"button\"> {}\n\nexport const PopoverCloseTrigger = withContext<\n  \"button\",\n  PopoverCloseTriggerProps\n>(\"button\", { name: \"CloseTrigger\", slot: [\"trigger\", \"close\"] })(\n  { asChild: true },\n  (props) => {\n    const { getCloseTriggerProps } = useComponentContext()\n\n    return getCloseTriggerProps(props)\n  },\n)\n\nexport interface PopoverAnchorProps extends HTMLStyledProps {}\n\nexport const PopoverAnchor = withContext<\"div\", PopoverAnchorProps>(\n  \"div\",\n  \"anchor\",\n)({ asChild: true }, (props) => {\n  const { getAnchorProps } = useComponentContext()\n\n  return getAnchorProps(props)\n})\n\ninterface PopoverPositionerProps extends HTMLStyledProps {}\n\nconst PopoverPositioner = withContext<\"div\", PopoverPositionerProps>(\n  \"div\",\n  \"positioner\",\n)(undefined, (props) => {\n  const { getPositionerProps } = useComponentContext()\n\n  return getPositionerProps(props)\n})\n\nexport interface PopoverContentProps\n  extends Omit<HTMLMotionProps, \"children\">, PropsWithChildren {\n  /**\n   * Props for portal component.\n   */\n  portalProps?: Omit<PortalProps, \"children\">\n}\n\nexport const PopoverContent = withContext<\"div\", PopoverContentProps>(\n  ({ portalProps, ...rest }) => {\n    const { animationScheme, duration, open, getContentProps } =\n      useComponentContext()\n    const popupAnimationProps = usePopupAnimationProps({\n      animationScheme,\n      duration,\n    })\n\n    return (\n      <AnimatePresence>\n        {open ? (\n          <Portal {...portalProps}>\n            <PopoverPositioner>\n              <motion.div\n                {...popupAnimationProps}\n                {...cast<HTMLMotionProps>(\n                  getContentProps(cast<HTMLProps>(rest)),\n                )}\n              />\n            </PopoverPositioner>\n          </Portal>\n        ) : null}\n      </AnimatePresence>\n    )\n  },\n  \"content\",\n)()\n\nexport interface PopoverHeaderProps extends HTMLStyledProps {}\n\nexport const PopoverHeader = withContext<\"div\", PopoverHeaderProps>(\n  \"div\",\n  \"header\",\n)(undefined, (props) => {\n  const { getHeaderProps } = useComponentContext()\n\n  return getHeaderProps(props)\n})\n\nexport interface PopoverBodyProps extends HTMLStyledProps {}\n\nexport const PopoverBody = withContext<\"div\", PopoverBodyProps>(\"div\", \"body\")(\n  undefined,\n  (props) => {\n    const { getBodyProps } = useComponentContext()\n\n    return getBodyProps(props)\n  },\n)\n\nexport interface PopoverFooterProps extends HTMLStyledProps {}\n\nexport const PopoverFooter = withContext<\"div\", PopoverFooterProps>(\n  \"div\",\n  \"footer\",\n)(undefined, (props) => {\n  const { getFooterProps } = useComponentContext()\n\n  return getFooterProps(props)\n})\n"],"mappings":"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"}

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

@@ -3,11 +3,13 @@ import { ThemeProps } from "../../core/system/index.types.js";
 import { Component, HTMLStyledProps } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { WithTransitionProps } from "../motion/index.types.js";
+import "../motion/index.js";
 import { CollapseProps } from "../collapse/collapse.js";
+import "../collapse/index.js";
 import "../../index.js";
 import { AccordionStyle } from "./accordion.style.js";
 import { UseAccordionItemProps, UseAccordionProps } from "./use-accordion.js";
-import * as react112 from "react";
+import * as react1238 from "react";
 
 //#region src/components/accordion/accordion.d.ts
 interface AccordionCallBackProps {
@@ -31,7 +33,7 @@ interface AccordionRootProps extends Omit<HTMLStyledProps, "onChange">, ThemePro
    */
   items?: AccordionItem[];
 }
-declare const AccordionPropsContext: react112.Context<Partial<AccordionRootProps> | undefined>, useAccordionPropsContext: () => Partial<AccordionRootProps> | undefined;
+declare const AccordionPropsContext: react1238.Context<Partial<AccordionRootProps> | undefined>, useAccordionPropsContext: () => Partial<AccordionRootProps> | undefined;
 /**
  * `Accordion` is a component for a list that displays information in an expandable or collapsible manner.
  *

package/dist/types/components/accordion/use-accordion.d.ts

@@ -2,10 +2,10 @@ import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { Descendant } from "../../hooks/use-descendants/index.js";
 import "../../index.js";
-import * as react88 from "react";
+import * as react1226 from "react";
 
 //#region src/components/accordion/use-accordion.d.ts
-declare const AccordionDescendantsContext: react88.Context<{
+declare const AccordionDescendantsContext: react1226.Context<{
     active: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined, options?: FocusOptions) => void;
     count: (props?: Partial<{}> | undefined) => number;
     destroy: () => void;
@@ -24,7 +24,7 @@ declare const AccordionDescendantsContext: react88.Context<{
     prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
     register: (props?: {
       disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-    } | undefined) => react88.RefCallback<HTMLButtonElement>;
+    } | undefined) => react1226.RefCallback<HTMLButtonElement>;
     unregister: (node?: HTMLButtonElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
     values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
@@ -50,12 +50,12 @@ declare const AccordionDescendantsContext: react88.Context<{
       prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
       register: (props?: {
         disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-      } | undefined) => react88.RefCallback<HTMLButtonElement>;
+      } | undefined) => react1226.RefCallback<HTMLButtonElement>;
       unregister: (node?: HTMLButtonElement | null | undefined) => void;
       value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
       values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
     };
-    register: react88.RefCallback<HTMLButtonElement>;
+    register: react1226.RefCallback<HTMLButtonElement>;
   }, useAccordionDescendants: () => {
     active: (target?: HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null | undefined, options?: FocusOptions) => void;
     count: (props?: Partial<{}> | undefined) => number;
@@ -75,15 +75,15 @@ declare const AccordionDescendantsContext: react88.Context<{
     prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
     register: (props?: {
       disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-    } | undefined) => react88.RefCallback<HTMLButtonElement>;
+    } | undefined) => react1226.RefCallback<HTMLButtonElement>;
     unregister: (node?: HTMLButtonElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
     values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
   };
 interface AccordionContext extends Omit<UseAccordionReturn, "descendants" | "getRootProps"> {}
-declare const AccordionContext: react88.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
+declare const AccordionContext: react1226.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
 interface AccordionItemContext extends Omit<UseAccordionItemReturn, "getItemProps"> {}
-declare const AccordionItemContext: react88.Context<AccordionItemContext>, useAccordionItemContext: () => AccordionItemContext;
+declare const AccordionItemContext: react1226.Context<AccordionItemContext>, useAccordionItemContext: () => AccordionItemContext;
 interface UseAccordionProps extends Omit<HTMLProps, "onChange"> {
   /**
    * The initial index(es) of the accordion item to expand.
@@ -137,7 +137,7 @@ declare const useAccordion: ({
     prevValue: (indexOrNode: number | HTMLButtonElement | Descendant<HTMLButtonElement, {}> | null, loop?: boolean, props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}> | undefined;
     register: (props?: {
       disabled?: boolean | ((node: HTMLButtonElement) => boolean) | undefined;
-    } | undefined) => react88.RefCallback<HTMLButtonElement>;
+    } | undefined) => react1226.RefCallback<HTMLButtonElement>;
     unregister: (node?: HTMLButtonElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
     values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
@@ -145,8 +145,8 @@ declare const useAccordion: ({
   focusedIndex: number;
   index: number | number[];
   multiple: boolean | undefined;
-  setFocusedIndex: react88.Dispatch<react88.SetStateAction<number>>;
-  setIndex: react88.Dispatch<react88.SetStateAction<number | number[]>>;
+  setFocusedIndex: react1226.Dispatch<react1226.SetStateAction<number>>;
+  setIndex: react1226.Dispatch<react1226.SetStateAction<number | number[]>>;
   toggle: boolean | undefined;
   getRootProps: PropGetter<"div", undefined, undefined>;
 };

package/dist/types/components/action-bar/action-bar.d.ts

@@ -4,9 +4,10 @@ import "../../core/index.js";
 import { ActionBarStyle } from "./action-bar.style.js";
 import { PortalProps } from "../portal/portal.js";
 import { UsePopupAnimationProps } from "../popover/popover.js";
+import "../popover/index.js";
 import { UseActionBarProps } from "./use-action-bar.js";
 import "../../index.js";
-import * as react31 from "react";
+import * as react971 from "react";
 import { PropsWithChildren, ReactNode } from "react";
 
 //#region src/components/action-bar/action-bar.d.ts
@@ -28,7 +29,7 @@ interface ActionBarRootProps extends Omit<HTMLStyledProps, "content">, ThemeProp
    */
   onCloseComplete?: () => void;
 }
-declare const ActionBarPropsContext: react31.Context<Partial<ActionBarRootProps> | undefined>, useActionBarPropsContext: () => Partial<ActionBarRootProps> | undefined;
+declare const ActionBarPropsContext: react971.Context<Partial<ActionBarRootProps> | undefined>, useActionBarPropsContext: () => Partial<ActionBarRootProps> | undefined;
 /**
  * `ActionBar` is a component that is used to display a bottom action bar with a set of actions.
  *

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

@@ -2,9 +2,10 @@ import { KeyframeIdent, ThemeProps } from "../../core/system/index.types.js";
 import { Component } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { HTMLMotionProps } from "../motion/index.types.js";
+import "../motion/index.js";
 import { AiryStyle } from "./airy.style.js";
 import "../../index.js";
-import * as react980 from "react";
+import * as react1239 from "react";
 import { ReactNode } from "react";
 
 //#region src/components/airy/airy.d.ts
@@ -56,7 +57,7 @@ interface AiryProps extends Omit<HTMLMotionProps<"button">, "onChange">, ThemePr
    */
   onChange?: (value: KeyframeIdent) => void;
 }
-declare const AiryPropsContext: react980.Context<Partial<AiryProps> | undefined>, useAiryPropsContext: () => Partial<AiryProps> | undefined;
+declare const AiryPropsContext: react1239.Context<Partial<AiryProps> | undefined>, useAiryPropsContext: () => Partial<AiryProps> | undefined;
 /**
  * `Airy` is a component that creates an airy animation, switching between two elements when one is clicked.
  *

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

@@ -3,10 +3,13 @@ import { Component, HTMLStyledProps } from "../../core/components/index.types.js
 import "../../core/index.js";
 import { AlertStyle } from "./alert.style.js";
 import { IconProps } from "../icon/icon.js";
+import "../icon/index.js";
 import { LoadingProps } from "../loading/loading.js";
+import "../loading/index.js";
 import { StatusScheme } from "../status/status.js";
+import "../status/index.js";
 import "../../index.js";
-import * as react30 from "react";
+import * as react137 from "react";
 
 //#region src/components/alert/alert.d.ts
 interface AlertRootProps extends HTMLStyledProps, ThemeProps<AlertStyle> {
@@ -17,7 +20,7 @@ interface AlertRootProps extends HTMLStyledProps, ThemeProps<AlertStyle> {
    */
   status?: StatusScheme;
 }
-declare const AlertPropsContext: react30.Context<Partial<AlertRootProps> | undefined>, useAlertPropsContext: () => Partial<AlertRootProps> | undefined;
+declare const AlertPropsContext: react137.Context<Partial<AlertRootProps> | undefined>, useAlertPropsContext: () => Partial<AlertRootProps> | undefined;
 /**
  * `Alert` is a component that conveys information to the user.
  *

package/dist/types/components/alpha-slider/alpha-slider.d.ts

@@ -3,8 +3,9 @@ import { Component } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { AlphaSliderStyle } from "./alpha-slider.style.js";
 import { HueSliderOverlayProps, HueSliderRootProps, HueSliderThumbProps, HueSliderTrackProps } from "../hue-slider/hue-slider.js";
+import "../hue-slider/index.js";
 import "../../index.js";
-import * as react57 from "react";
+import * as react140 from "react";
 
 //#region src/components/alpha-slider/alpha-slider.d.ts
 interface AlphaSliderRootProps extends WithoutThemeProps<Omit<HueSliderRootProps, "color" | "max" | "step" | "thumbProps" | "trackProps">, AlphaSliderStyle> {
@@ -37,7 +38,7 @@ interface AlphaSliderRootProps extends WithoutThemeProps<Omit<HueSliderRootProps
    */
   trackProps?: AlphaSliderTrackProps;
 }
-declare const AlphaSliderPropsContext: react57.Context<Partial<AlphaSliderRootProps> | undefined>, useAlphaSliderPropsContext: () => Partial<AlphaSliderRootProps> | undefined;
+declare const AlphaSliderPropsContext: react140.Context<Partial<AlphaSliderRootProps> | undefined>, useAlphaSliderPropsContext: () => Partial<AlphaSliderRootProps> | undefined;
 /**
  * `AlphaSlider` is a component used to allow the user to select color transparency.
  *

package/dist/types/components/aspect-ratio/aspect-ratio.d.ts

@@ -2,7 +2,7 @@ import { StyleValue } from "../../core/css/index.types.js";
 import { Component, HTMLStyledProps } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import "../../index.js";
-import * as react152 from "react";
+import * as react38 from "react";
 
 //#region src/components/aspect-ratio/aspect-ratio.d.ts
 interface AspectRatioProps extends HTMLStyledProps {
@@ -13,7 +13,7 @@ interface AspectRatioProps extends HTMLStyledProps {
    */
   ratio?: StyleValue<number>;
 }
-declare const AspectRatioPropsContext: react152.Context<Partial<AspectRatioProps> | undefined>, useAspectRatioPropsContext: () => Partial<AspectRatioProps> | undefined;
+declare const AspectRatioPropsContext: react38.Context<Partial<AspectRatioProps> | undefined>, useAspectRatioPropsContext: () => Partial<AspectRatioProps> | undefined;
 /**
  * `AspectRatio` is a component for embedding things like videos and maps while maintaining the aspect ratio.
  *

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

@@ -3,14 +3,16 @@ import { ThemeProps } from "../../core/system/index.types.js";
 import { Component, GenericsComponent, HTMLStyledProps } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { PopoverContentProps, UsePopoverStyleProps, UsePopupAnimationProps } from "../popover/popover.js";
+import "../popover/index.js";
 import { AutocompleteStyle } from "./autocomplete.style.js";
 import { UseComboboxGroupProps } from "../../hooks/use-combobox/index.js";
 import { UseInputBorderProps } from "../input/use-input-border.js";
 import { InputElementProps } from "../input/input-element.js";
 import { InputGroupRootProps } from "../input/input-group.js";
+import "../input/index.js";
 import { UseAutocompleteOptionProps, UseAutocompleteProps } from "./use-autocomplete.js";
 import "../../index.js";
-import * as react68 from "react";
+import * as react955 from "react";
 import { ReactElement, ReactNode } from "react";
 
 //#region src/components/autocomplete/autocomplete.d.ts
@@ -66,7 +68,7 @@ interface AutocompleteRootProps<Multiple extends boolean = false> extends Omit<H
    */
   rootProps?: InputGroupRootProps;
 }
-declare const AutocompletePropsContext: react68.Context<Partial<AutocompleteRootProps<false>> | undefined>, useAutocompletePropsContext: () => Partial<AutocompleteRootProps<false>> | undefined;
+declare const AutocompletePropsContext: react955.Context<Partial<AutocompleteRootProps<false>> | undefined>, useAutocompletePropsContext: () => Partial<AutocompleteRootProps<false>> | undefined;
 /**
  * `Autocomplete` is a component used to display suggestions in response to user text input.
  *

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

@@ -3,7 +3,7 @@ import { CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
 import "../../index.js";
 
 //#region src/components/autocomplete/autocomplete.style.d.ts
-declare const autocompleteStyle: ComponentSlotStyle<"input" | "label" | "option" | "content" | "icon" | "separator" | "group" | "root" | "indicator" | "field" | "valueText" | "empty", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "icon" | "separator" | "group" | "root" | "indicator" | "field" | "valueText" | "empty">>, {
+declare const autocompleteStyle: ComponentSlotStyle<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "field" | "indicator" | "empty" | "valueText", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "root" | "field" | "indicator" | "empty" | "valueText">>, {
   xs: {
     empty: {
       gap: "1.5";

package/dist/types/components/autocomplete/use-autocomplete.d.ts

@@ -2,11 +2,13 @@ import { index_d_exports } from "../../utils/index.js";
 import { HTMLProps, HTMLRefAttributes, PropGetter } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import { UsePopoverProps } from "../popover/use-popover.js";
+import "../popover/index.js";
 import { FieldProps } from "../field/field.js";
+import "../field/index.js";
 import { Descendant, DescendantProps } from "../../hooks/use-descendants/index.js";
 import { ComboboxDescendant, ComboboxDescendantProps, ComboboxItem, ComboboxItemWithValue, UseComboboxItemProps, UseComboboxProps } from "../../hooks/use-combobox/index.js";
 import "../../index.js";
-import * as react69 from "react";
+import * as react949 from "react";
 import { ChangeEvent, ReactNode } from "react";
 
 //#region src/components/autocomplete/use-autocomplete.d.ts
@@ -26,7 +28,7 @@ interface AutocompleteFilter {
 }
 type AutocompleteMatcher = typeof index_d_exports.match;
 interface AutocompleteContext extends Pick<UseAutocompleteReturn, "max" | "value"> {}
-declare const AutocompleteContext: react69.Context<AutocompleteContext>, useAutocompleteContext: () => AutocompleteContext;
+declare const AutocompleteContext: react949.Context<AutocompleteContext>, useAutocompleteContext: () => AutocompleteContext;
 interface UseAutocompleteProps<Multiple extends boolean = false> extends Omit<HTMLProps, "defaultValue" | "onChange" | "ref" | "value">, Omit<UseComboboxProps, "defaultValue" | "initialFocusValue" | "onChange" | "ref" | "value">, HTMLRefAttributes<"input">, FieldProps {
   /**
    * If `true`, the autocomplete will allow custom value.
@@ -154,7 +156,7 @@ declare const useAutocomplete: <Multiple extends boolean = false>(props?: UseAut
     lastValue: (props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     nextValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean, props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     prevValue: (indexOrNode: number | HTMLDivElement | Descendant<HTMLDivElement, ComboboxDescendantProps> | null, loop?: boolean, props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
-    register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react69.RefCallback<HTMLDivElement>;
+    register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react949.RefCallback<HTMLDivElement>;
     unregister: (node?: HTMLDivElement | null | undefined) => void;
     value: (indexOrNode: number | HTMLDivElement | null) => Descendant<HTMLDivElement, ComboboxDescendantProps> | undefined;
     values: (props?: Partial<ComboboxDescendantProps> | undefined) => Descendant<HTMLDivElement, ComboboxDescendantProps>[];
@@ -164,8 +166,8 @@ declare const useAutocomplete: <Multiple extends boolean = false>(props?: UseAut
   items: ComboboxItem[];
   max: number | undefined;
   open: boolean;
-  setInputValue: react69.Dispatch<react69.SetStateAction<string>>;
-  setValue: react69.Dispatch<react69.SetStateAction<Multiple extends true ? string[] : string>>;
+  setInputValue: react949.Dispatch<react949.SetStateAction<string>>;
+  setValue: react949.Dispatch<react949.SetStateAction<Multiple extends true ? string[] : string>>;
   value: Multiple extends true ? string[] : string;
   valueMap: {
     [key: string]: ComboboxItemWithValue;

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

@@ -6,9 +6,9 @@ import "../../core/index.js";
 import { AvatarStyle } from "./avatar.style.js";
 import { UseAvatarProps } from "./use-avatar.js";
 import "../../index.js";
-import * as react41 from "react";
+import * as react134 from "react";
 import { ReactElement } from "react";
-import * as _yamada_ui_utils2 from "@yamada-ui/utils";
+import * as _yamada_ui_utils8 from "@yamada-ui/utils";
 
 //#region src/components/avatar/avatar.d.ts
 interface AvatarProps extends HTMLStyledProps, ThemeProps<AvatarStyle>, UseAvatarProps {
@@ -25,7 +25,7 @@ interface AvatarProps extends HTMLStyledProps, ThemeProps<AvatarStyle>, UseAvata
    */
   imageProps?: AvatarImageProps;
 }
-declare const component: <H extends "fragment" | As = "div", R extends _yamada_ui_utils2.Dict = _yamada_ui_utils2.Dict<any>>(el: H | react41.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
+declare const component: <H extends As | "fragment" = "div", R extends _yamada_ui_utils8.Dict = _yamada_ui_utils8.Dict<any>>(el: H | react134.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
     shape: {
       circle: {
         root: {
@@ -148,7 +148,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _yamada_u
     name,
     className,
     ...options
-  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? react41.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, AvatarPropsContext: react41.Context<Partial<AvatarProps> | undefined>, useAvatarPropsContext: () => Partial<AvatarProps> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils2.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
+  }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? react134.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, AvatarPropsContext: react134.Context<Partial<AvatarProps> | undefined>, useAvatarPropsContext: () => Partial<AvatarProps> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils8.Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
     shape: {
       circle: {
         root: {
@@ -271,7 +271,7 @@ declare const component: <H extends "fragment" | As = "div", R extends _yamada_u
     className,
     withContext,
     transferProps
-  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, _yamada_ui_utils2.Merge<WithoutThemeProps<Y, ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
+  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, _yamada_ui_utils8.Merge<WithoutThemeProps<Y, ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
     shape: {
       circle: {
         root: {

package/dist/types/components/avatar/use-avatar-group.d.ts

@@ -1,6 +1,6 @@
 import { HTMLProps, PropGetter } from "../../core/components/index.types.js";
 import "../../core/index.js";
-import * as react44 from "react";
+import * as react34 from "react";
 
 //#region src/components/avatar/use-avatar-group.d.ts
 interface UseAvatarGroupProps extends HTMLProps {
@@ -19,7 +19,7 @@ declare const useAvatarGroup: ({
   reverse,
   ...rest
 }?: UseAvatarGroupProps) => {
-  children: react44.ReactElement<any, string | react44.JSXElementConstructor<any>>[];
+  children: react34.ReactElement<any, string | react34.JSXElementConstructor<any>>[];
   excess: number;
   getRootProps: PropGetter<"div", undefined, undefined>;
 };

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

@@ -3,11 +3,11 @@ import { Component, HTMLStyledProps } from "../../core/components/index.types.js
 import "../../core/index.js";
 import { BadgeStyle } from "./badge.style.js";
 import "../../index.js";
-import * as react56 from "react";
+import * as react33 from "react";
 
 //#region src/components/badge/badge.d.ts
 interface BadgeProps extends HTMLStyledProps<"span">, ThemeProps<BadgeStyle> {}
-declare const BadgePropsContext: react56.Context<Partial<BadgeProps> | undefined>, useBadgePropsContext: () => Partial<BadgeProps> | undefined;
+declare const BadgePropsContext: react33.Context<Partial<BadgeProps> | undefined>, useBadgePropsContext: () => Partial<BadgeProps> | undefined;
 /**
  * `Badge` is a component that emphasizes the status of an item to make it immediately recognizable.
  *

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

@@ -2,7 +2,7 @@ import { CSSProps } from "../../core/css/index.types.js";
 import { Component, HTMLStyledProps } from "../../core/components/index.types.js";
 import "../../core/index.js";
 import "../../index.js";
-import * as react35 from "react";
+import * as react30 from "react";
 
 //#region src/components/bleed/bleed.d.ts
 interface BleedProps extends HTMLStyledProps {
@@ -31,7 +31,7 @@ interface BleedProps extends HTMLStyledProps {
    */
   inlineStart?: "full" | CSSProps["marginInlineStart"];
 }
-declare const BleedPropsContext: react35.Context<Partial<BleedProps> | undefined>, useBleedPropsContext: () => Partial<BleedProps> | undefined;
+declare const BleedPropsContext: react30.Context<Partial<BleedProps> | undefined>, useBleedPropsContext: () => Partial<BleedProps> | undefined;
 /**
  * `Bleed` is a component used to break an element from the boundaries of its container.
  *

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

@@ -3,7 +3,7 @@ import { Component, HTMLStyledProps } from "../../core/components/index.types.js
 import "../../core/index.js";
 import { BlockquoteStyle } from "./blockquote.style.js";
 import "../../index.js";
-import * as react67 from "react";
+import * as react133 from "react";
 import { ReactNode } from "react";
 
 //#region src/components/blockquote/blockquote.d.ts
@@ -29,7 +29,7 @@ interface BlockquoteRootProps extends Omit<HTMLStyledProps<"figure">, "cite">, T
    */
   contentProps?: HTMLStyledProps<"blockquote">;
 }
-declare const BlockquotePropsContext: react67.Context<Partial<BlockquoteRootProps> | undefined>, useBlockquotePropsContext: () => Partial<BlockquoteRootProps> | undefined;
+declare const BlockquotePropsContext: react133.Context<Partial<BlockquoteRootProps> | undefined>, useBlockquotePropsContext: () => Partial<BlockquoteRootProps> | undefined;
 /**
  * `Blockquote` is a component that represents a blockquote. By default, it renders a `blockquote` element.
  *

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

@@ -4,7 +4,7 @@ import "../../core/index.js";
 import { BreadcrumbStyle } from "./breadcrumb.style.js";
 import { UseBreadcrumbProps } from "./use-breadcrumb.js";
 import "../../index.js";
-import * as react26 from "react";
+import * as react129 from "react";
 import { ReactElement } from "react";
 
 //#region src/components/breadcrumb/breadcrumb.d.ts
@@ -40,7 +40,7 @@ interface BreadcrumbRootProps extends HTMLStyledProps<"nav">, ThemeProps<Breadcr
    */
   separatorProps?: BreadcrumbSeparatorProps;
 }
-declare const BreadcrumbPropsContext: react26.Context<Partial<BreadcrumbRootProps> | undefined>, useBreadcrumbPropsContext: () => Partial<BreadcrumbRootProps> | undefined;
+declare const BreadcrumbPropsContext: react129.Context<Partial<BreadcrumbRootProps> | undefined>, useBreadcrumbPropsContext: () => Partial<BreadcrumbRootProps> | undefined;
 /**
  * `Breadcrumb` is a component that helps users understand the hierarchy of a website.
  *