@yamada-ui/react 2.2.1-dev-20260412131725 → 2.2.1-dev-20260412133159

package/dist/cjs/components/file-input/file-input.cjs

@@ -2,6 +2,7 @@
 
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_factory = require('../../core/system/factory.cjs');
+const require_props = require('../../core/components/props.cjs');
 const require_create_component = require('../../core/components/create-component.cjs');
 require('../../core/index.cjs');
 const require_portal = require('../portal/portal.cjs');
@@ -60,10 +61,7 @@ const FileInput = withProvider(({ children, component, errorBorderColor, focusBo
 		children: cloneChildren
 	})] });
 }, "root")((props) => {
-	return {
-		...require_input.useInputPropsContext(),
-		...props
-	};
+	return require_props.mergeProps(require_input.useInputPropsContext(), props)();
 });
 const FileInputTag = withContext("span", "tag")();
 

package/dist/cjs/components/file-input/file-input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"file-input.cjs","names":["defaultFormat: (value: File, index: number) => string","createSlotComponent","fileInputStyle","useInputBorder","useFileInput","styled","Portal","useInputPropsContext"],"sources":["../../../../src/components/file-input/file-input.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { FileInputStyle } from \"./file-input.style\"\nimport type { UseFileInputProps } from \"./use-file-input\"\nimport { cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useInputBorder, useInputPropsContext } from \"../input\"\nimport { Portal } from \"../portal\"\nimport { fileInputStyle } from \"./file-input.style\"\nimport { useFileInput } from \"./use-file-input\"\n\nconst defaultFormat: (value: File, index: number) => string = ({ name }) => name\n\nexport interface FileInputProps\n  extends\n    Omit<\n      HTMLStyledProps<\"input\">,\n      \"children\" | \"defaultValue\" | \"onChange\" | \"value\"\n    >,\n    ThemeProps<FileInputStyle>,\n    UseInputBorderProps,\n    FieldProps,\n    Omit<UseFileInputProps, \"children\"> {\n  /**\n   * The string to separate uploaded files.\n   *\n   * @default ','\n   */\n  separator?: string\n  /**\n   * A callback that returns a React node.\n   */\n  children?: (files: File[] | undefined) => ReactNode\n  /**\n   * The component that displays uploaded files.\n   */\n  component?: (props: { index: number; value: File }) => ReactNode\n  /**\n   * A callback that formats the name of the uploaded file.\n   */\n  format?: (value: File, index: number) => string\n}\n\nconst {\n  PropsContext: FileInputPropsContext,\n  usePropsContext: useFileInputPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<FileInputProps, FileInputStyle>(\n  \"file-input\",\n  fileInputStyle,\n)\n\nexport { FileInputPropsContext, useFileInputPropsContext }\n\n/**\n * `FileInput` is a component used for users to select files.\n *\n * @see https://yamada-ui.com/docs/components/file-input\n */\nexport const FileInput = withProvider<\"input\", FileInputProps>(\n  ({\n    children,\n    component,\n    errorBorderColor,\n    focusBorderColor,\n    format = defaultFormat,\n    placeholder,\n    separator = \",\",\n    ...props\n  }) => {\n    const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n    const { values, getFieldProps, getInputProps } = useFileInput(props)\n\n    const cloneChildren = useMemo(() => {\n      if (!values?.length)\n        return (\n          <styled.span overflow=\"hidden\" whiteSpace=\"nowrap\">\n            {placeholder}\n          </styled.span>\n        )\n\n      if (children) return children(values)\n\n      return values.map((value, index) => {\n        const last = values.length === index + 1\n\n        if (component) {\n          const node = component({ index, value })\n\n          if (isValidElement(node)) {\n            return cloneElement(node, { key: index })\n          } else {\n            return node\n          }\n        } else {\n          return (\n            <FileInputTag key={index}>\n              {format(value, index)}\n              {!last ? separator : null}\n            </FileInputTag>\n          )\n        }\n      })\n    }, [children, format, placeholder, separator, component, values])\n\n    return (\n      <>\n        <Portal>\n          <styled.input {...getInputProps()} />\n        </Portal>\n\n        <styled.div {...varProps} {...getFieldProps()}>\n          {cloneChildren}\n        </styled.div>\n      </>\n    )\n  },\n  \"root\",\n)((props) => {\n  const context = useInputPropsContext()\n\n  return { ...context, ...props }\n})\n\ninterface FileInputTagProps extends HTMLStyledProps {}\n\nconst FileInputTag = withContext<\"span\", FileInputTagProps>(\"span\", \"tag\")()\n"],"mappings":";;;;;;;;;;;;;;;;;AAeA,MAAMA,iBAAyD,EAAE,WAAW;AAgC5E,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,aACA,iBACEC,6CACF,cACAC,wCACD;;;;;;AASD,MAAa,YAAY,cACtB,EACC,UACA,WACA,kBACA,kBACA,SAAS,eACT,aACA,YAAY,KACZ,GAAG,YACC;CACJ,MAAM,WAAWC,wCAAe;EAAE;EAAkB;EAAkB,CAAC;CACvE,MAAM,EAAE,QAAQ,eAAe,kBAAkBC,oCAAa,MAAM;CAEpE,MAAM,yCAA8B;AAClC,MAAI,CAAC,QAAQ,OACX,QACE,2CAACC,uBAAO;GAAK,UAAS;GAAS,YAAW;aACvC;IACW;AAGlB,MAAI,SAAU,QAAO,SAAS,OAAO;AAErC,SAAO,OAAO,KAAK,OAAO,UAAU;GAClC,MAAM,OAAO,OAAO,WAAW,QAAQ;AAEvC,OAAI,WAAW;IACb,MAAM,OAAO,UAAU;KAAE;KAAO;KAAO,CAAC;AAExC,kCAAmB,KAAK,CACtB,gCAAoB,MAAM,EAAE,KAAK,OAAO,CAAC;QAEzC,QAAO;SAGT,QACE,4CAAC,2BACE,OAAO,OAAO,MAAM,EACpB,CAAC,OAAO,YAAY,SAFJ,MAGJ;IAGnB;IACD;EAAC;EAAU;EAAQ;EAAa;EAAW;EAAW;EAAO,CAAC;AAEjE,QACE,qFACE,2CAACC,mCACC,2CAACD,uBAAO,SAAM,GAAI,eAAe,GAAI,GAC9B,EAET,2CAACA,uBAAO;EAAI,GAAI;EAAU,GAAI,eAAe;YAC1C;GACU,IACZ;GAGP,OACD,EAAE,UAAU;AAGX,QAAO;EAAE,GAFOE,oCAAsB;EAEjB,GAAG;EAAO;EAC/B;AAIF,MAAM,eAAe,YAAuC,QAAQ,MAAM,EAAE"}
+{"version":3,"file":"file-input.cjs","names":["defaultFormat: (value: File, index: number) => string","createSlotComponent","fileInputStyle","useInputBorder","useFileInput","styled","Portal","mergeProps","useInputPropsContext"],"sources":["../../../../src/components/file-input/file-input.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { FileInputStyle } from \"./file-input.style\"\nimport type { UseFileInputProps } from \"./use-file-input\"\nimport { cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport { useInputBorder, useInputPropsContext } from \"../input\"\nimport { Portal } from \"../portal\"\nimport { fileInputStyle } from \"./file-input.style\"\nimport { useFileInput } from \"./use-file-input\"\n\nconst defaultFormat: (value: File, index: number) => string = ({ name }) => name\n\nexport interface FileInputProps\n  extends\n    Omit<\n      HTMLStyledProps<\"input\">,\n      \"children\" | \"defaultValue\" | \"onChange\" | \"value\"\n    >,\n    ThemeProps<FileInputStyle>,\n    UseInputBorderProps,\n    FieldProps,\n    Omit<UseFileInputProps, \"children\"> {\n  /**\n   * The string to separate uploaded files.\n   *\n   * @default ','\n   */\n  separator?: string\n  /**\n   * A callback that returns a React node.\n   */\n  children?: (files: File[] | undefined) => ReactNode\n  /**\n   * The component that displays uploaded files.\n   */\n  component?: (props: { index: number; value: File }) => ReactNode\n  /**\n   * A callback that formats the name of the uploaded file.\n   */\n  format?: (value: File, index: number) => string\n}\n\nconst {\n  PropsContext: FileInputPropsContext,\n  usePropsContext: useFileInputPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<FileInputProps, FileInputStyle>(\n  \"file-input\",\n  fileInputStyle,\n)\n\nexport { FileInputPropsContext, useFileInputPropsContext }\n\n/**\n * `FileInput` is a component used for users to select files.\n *\n * @see https://yamada-ui.com/docs/components/file-input\n */\nexport const FileInput = withProvider<\"input\", FileInputProps>(\n  ({\n    children,\n    component,\n    errorBorderColor,\n    focusBorderColor,\n    format = defaultFormat,\n    placeholder,\n    separator = \",\",\n    ...props\n  }) => {\n    const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n    const { values, getFieldProps, getInputProps } = useFileInput(props)\n\n    const cloneChildren = useMemo(() => {\n      if (!values?.length)\n        return (\n          <styled.span overflow=\"hidden\" whiteSpace=\"nowrap\">\n            {placeholder}\n          </styled.span>\n        )\n\n      if (children) return children(values)\n\n      return values.map((value, index) => {\n        const last = values.length === index + 1\n\n        if (component) {\n          const node = component({ index, value })\n\n          if (isValidElement(node)) {\n            return cloneElement(node, { key: index })\n          } else {\n            return node\n          }\n        } else {\n          return (\n            <FileInputTag key={index}>\n              {format(value, index)}\n              {!last ? separator : null}\n            </FileInputTag>\n          )\n        }\n      })\n    }, [children, format, placeholder, separator, component, values])\n\n    return (\n      <>\n        <Portal>\n          <styled.input {...getInputProps()} />\n        </Portal>\n\n        <styled.div {...varProps} {...getFieldProps()}>\n          {cloneChildren}\n        </styled.div>\n      </>\n    )\n  },\n  \"root\",\n)((props) => {\n  const context = useInputPropsContext()\n\n  return mergeProps(context, props)()\n})\n\ninterface FileInputTagProps extends HTMLStyledProps {}\n\nconst FileInputTag = withContext<\"span\", FileInputTagProps>(\"span\", \"tag\")()\n"],"mappings":";;;;;;;;;;;;;;;;;;AAeA,MAAMA,iBAAyD,EAAE,WAAW;AAgC5E,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,aACA,iBACEC,6CACF,cACAC,wCACD;;;;;;AASD,MAAa,YAAY,cACtB,EACC,UACA,WACA,kBACA,kBACA,SAAS,eACT,aACA,YAAY,KACZ,GAAG,YACC;CACJ,MAAM,WAAWC,wCAAe;EAAE;EAAkB;EAAkB,CAAC;CACvE,MAAM,EAAE,QAAQ,eAAe,kBAAkBC,oCAAa,MAAM;CAEpE,MAAM,yCAA8B;AAClC,MAAI,CAAC,QAAQ,OACX,QACE,2CAACC,uBAAO;GAAK,UAAS;GAAS,YAAW;aACvC;IACW;AAGlB,MAAI,SAAU,QAAO,SAAS,OAAO;AAErC,SAAO,OAAO,KAAK,OAAO,UAAU;GAClC,MAAM,OAAO,OAAO,WAAW,QAAQ;AAEvC,OAAI,WAAW;IACb,MAAM,OAAO,UAAU;KAAE;KAAO;KAAO,CAAC;AAExC,kCAAmB,KAAK,CACtB,gCAAoB,MAAM,EAAE,KAAK,OAAO,CAAC;QAEzC,QAAO;SAGT,QACE,4CAAC,2BACE,OAAO,OAAO,MAAM,EACpB,CAAC,OAAO,YAAY,SAFJ,MAGJ;IAGnB;IACD;EAAC;EAAU;EAAQ;EAAa;EAAW;EAAW;EAAO,CAAC;AAEjE,QACE,qFACE,2CAACC,mCACC,2CAACD,uBAAO,SAAM,GAAI,eAAe,GAAI,GAC9B,EAET,2CAACA,uBAAO;EAAI,GAAI;EAAU,GAAI,eAAe;YAC1C;GACU,IACZ;GAGP,OACD,EAAE,UAAU;AAGX,QAAOE,yBAFSC,oCAAsB,EAEX,MAAM,EAAE;EACnC;AAIF,MAAM,eAAe,YAAuC,QAAQ,MAAM,EAAE"}

package/dist/cjs/components/password-input/password-input.cjs

@@ -1,6 +1,7 @@
 "use client";
 
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_props = require('../../core/components/props.cjs');
 const require_create_component = require('../../core/components/create-component.cjs');
 require('../../core/index.cjs');
 const require_eye_icon = require('../icon/icons/eye-icon.cjs');
@@ -33,8 +34,7 @@ const PasswordInput = withProvider(({ className, css, colorScheme, visibilityIco
 		className,
 		css,
 		colorScheme,
-		...groupItemProps,
-		...rootProps,
+		...require_props.mergeProps(groupItemProps, rootProps)(),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PasswordInputField, { ...getInputProps() }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_input_element.InputElement, {
 			clickable: true,
 			...elementProps,
@@ -45,10 +45,7 @@ const PasswordInput = withProvider(({ className, css, colorScheme, visibilityIco
 		})]
 	});
 }, "root")((props) => {
-	return {
-		...require_input.useInputPropsContext(),
-		...props
-	};
+	return require_props.mergeProps(require_input.useInputPropsContext(), props)();
 });
 const PasswordInputField = withContext(require_input.Input, "field")({ "data-group-propagate": "" });
 const PasswordInputButton = withContext("button", "button")();

package/dist/cjs/components/password-input/password-input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"password-input.cjs","names":["createSlotComponent","passwordInputStyle","EyeOffIcon","EyeIcon","useGroupItemProps","usePasswordInput","useInputPropsContext","Input"],"sources":["../../../../src/components/password-input/password-input.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps, WithoutThemeProps } from \"../../core\"\nimport type { InputProps } from \"../input\"\nimport type { PasswordInputStyle } from \"./password-input.style\"\nimport type { UsePasswordInputProps } from \"./use-password-input\"\nimport { createSlotComponent } from \"../../core\"\nimport { useGroupItemProps } from \"../group\"\nimport { EyeIcon, EyeOffIcon } from \"../icon\"\nimport { Input, InputGroup, useInputPropsContext } from \"../input\"\nimport { passwordInputStyle } from \"./password-input.style\"\nimport { usePasswordInput } from \"./use-password-input\"\n\nexport interface PasswordInputProps\n  extends\n    WithoutThemeProps<InputProps, PasswordInputStyle>,\n    ThemeProps<PasswordInputStyle>,\n    UsePasswordInputProps {\n  /**\n   * The icons to be used for the visibility toggle.\n   */\n  visibilityIcon?: { off: ReactNode; on: ReactNode }\n  /**\n   * The props for the button element.\n   */\n  buttonProps?: PasswordInputButtonProps\n  /**\n   * The props for the end element.\n   */\n  elementProps?: InputGroup.ElementProps\n  /**\n   * The props for the root element.\n   */\n  rootProps?: InputGroup.RootProps\n}\n\nconst {\n  PropsContext: PasswordInputPropsContext,\n  usePropsContext: usePasswordInputPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<PasswordInputProps, PasswordInputStyle>(\n  \"password-input\",\n  passwordInputStyle,\n)\n\nexport { PasswordInputPropsContext, usePasswordInputPropsContext }\n\n/**\n * `PasswordInput` is a component that allows users to input passwords with a visibility toggle.\n *\n * @see https://yamada-ui.com/docs/components/password-input\n */\nexport const PasswordInput = withProvider<\"input\", PasswordInputProps>(\n  ({\n    className,\n    css,\n    colorScheme,\n    visibilityIcon = { off: <EyeOffIcon />, on: <EyeIcon /> },\n    buttonProps,\n    elementProps,\n    rootProps,\n    ...props\n  }) => {\n    const [groupItemProps, rest] = useGroupItemProps(props)\n    const { visible, getButtonProps, getInputProps } = usePasswordInput(rest)\n\n    return (\n      <InputGroup.Root\n        className={className}\n        css={css}\n        colorScheme={colorScheme}\n        {...groupItemProps}\n        {...rootProps}\n      >\n        <PasswordInputField {...getInputProps()} />\n\n        <InputGroup.Element clickable {...elementProps}>\n          <PasswordInputButton {...getButtonProps(buttonProps)}>\n            {visible ? visibilityIcon.off : visibilityIcon.on}\n          </PasswordInputButton>\n        </InputGroup.Element>\n      </InputGroup.Root>\n    )\n  },\n  \"root\",\n)((props) => {\n  const context = useInputPropsContext()\n\n  return { ...context, ...props }\n})\n\ninterface PasswordInputFieldProps extends InputProps {}\n\nconst PasswordInputField = withContext<\"input\", PasswordInputFieldProps>(\n  Input,\n  \"field\",\n)({ \"data-group-propagate\": \"\" })\n\ninterface PasswordInputButtonProps extends HTMLStyledProps<\"button\"> {}\n\nconst PasswordInputButton = withContext<\"button\", PasswordInputButtonProps>(\n  \"button\",\n  \"button\",\n)()\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAqCA,MAAM,EACJ,cAAc,2BACd,iBAAiB,8BACjB,aACA,iBACEA,6CACF,kBACAC,gDACD;;;;;;AASD,MAAa,gBAAgB,cAC1B,EACC,WACA,KACA,aACA,iBAAiB;CAAE,KAAK,2CAACC,oCAAa;CAAE,IAAI,2CAACC,6BAAU;CAAE,EACzD,aACA,cACA,WACA,GAAG,YACC;CACJ,MAAM,CAAC,gBAAgB,QAAQC,oCAAkB,MAAM;CACvD,MAAM,EAAE,SAAS,gBAAgB,kBAAkBC,4CAAiB,KAAK;AAEzE,QACE;EACa;EACN;EACQ;EACb,GAAI;EACJ,GAAI;aAEJ,2CAAC,sBAAmB,GAAI,eAAe,GAAI,EAE3C;GAAoB;GAAU,GAAI;aAChC,2CAAC;IAAoB,GAAI,eAAe,YAAY;cACjD,UAAU,eAAe,MAAM,eAAe;KAC3B;IACH;GACL;GAGtB,OACD,EAAE,UAAU;AAGX,QAAO;EAAE,GAFOC,oCAAsB;EAEjB,GAAG;EAAO;EAC/B;AAIF,MAAM,qBAAqB,YACzBC,qBACA,QACD,CAAC,EAAE,wBAAwB,IAAI,CAAC;AAIjC,MAAM,sBAAsB,YAC1B,UACA,SACD,EAAE"}
+{"version":3,"file":"password-input.cjs","names":["createSlotComponent","passwordInputStyle","EyeOffIcon","EyeIcon","useGroupItemProps","usePasswordInput","mergeProps","useInputPropsContext","Input"],"sources":["../../../../src/components/password-input/password-input.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps, WithoutThemeProps } from \"../../core\"\nimport type { InputProps } from \"../input\"\nimport type { PasswordInputStyle } from \"./password-input.style\"\nimport type { UsePasswordInputProps } from \"./use-password-input\"\nimport { createSlotComponent, mergeProps } from \"../../core\"\nimport { useGroupItemProps } from \"../group\"\nimport { EyeIcon, EyeOffIcon } from \"../icon\"\nimport { Input, InputGroup, useInputPropsContext } from \"../input\"\nimport { passwordInputStyle } from \"./password-input.style\"\nimport { usePasswordInput } from \"./use-password-input\"\n\nexport interface PasswordInputProps\n  extends\n    WithoutThemeProps<InputProps, PasswordInputStyle>,\n    ThemeProps<PasswordInputStyle>,\n    UsePasswordInputProps {\n  /**\n   * The icons to be used for the visibility toggle.\n   */\n  visibilityIcon?: { off: ReactNode; on: ReactNode }\n  /**\n   * The props for the button element.\n   */\n  buttonProps?: PasswordInputButtonProps\n  /**\n   * The props for the end element.\n   */\n  elementProps?: InputGroup.ElementProps\n  /**\n   * The props for the root element.\n   */\n  rootProps?: InputGroup.RootProps\n}\n\nconst {\n  PropsContext: PasswordInputPropsContext,\n  usePropsContext: usePasswordInputPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<PasswordInputProps, PasswordInputStyle>(\n  \"password-input\",\n  passwordInputStyle,\n)\n\nexport { PasswordInputPropsContext, usePasswordInputPropsContext }\n\n/**\n * `PasswordInput` is a component that allows users to input passwords with a visibility toggle.\n *\n * @see https://yamada-ui.com/docs/components/password-input\n */\nexport const PasswordInput = withProvider<\"input\", PasswordInputProps>(\n  ({\n    className,\n    css,\n    colorScheme,\n    visibilityIcon = { off: <EyeOffIcon />, on: <EyeIcon /> },\n    buttonProps,\n    elementProps,\n    rootProps,\n    ...props\n  }) => {\n    const [groupItemProps, rest] = useGroupItemProps(props)\n    const { visible, getButtonProps, getInputProps } = usePasswordInput(rest)\n\n    return (\n      <InputGroup.Root\n        className={className}\n        css={css}\n        colorScheme={colorScheme}\n        {...mergeProps(groupItemProps, rootProps)()}\n      >\n        <PasswordInputField {...getInputProps()} />\n\n        <InputGroup.Element clickable {...elementProps}>\n          <PasswordInputButton {...getButtonProps(buttonProps)}>\n            {visible ? visibilityIcon.off : visibilityIcon.on}\n          </PasswordInputButton>\n        </InputGroup.Element>\n      </InputGroup.Root>\n    )\n  },\n  \"root\",\n)((props) => {\n  const context = useInputPropsContext()\n\n  return mergeProps(context, props)()\n})\n\ninterface PasswordInputFieldProps extends InputProps {}\n\nconst PasswordInputField = withContext<\"input\", PasswordInputFieldProps>(\n  Input,\n  \"field\",\n)({ \"data-group-propagate\": \"\" })\n\ninterface PasswordInputButtonProps extends HTMLStyledProps<\"button\"> {}\n\nconst PasswordInputButton = withContext<\"button\", PasswordInputButtonProps>(\n  \"button\",\n  \"button\",\n)()\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAqCA,MAAM,EACJ,cAAc,2BACd,iBAAiB,8BACjB,aACA,iBACEA,6CACF,kBACAC,gDACD;;;;;;AASD,MAAa,gBAAgB,cAC1B,EACC,WACA,KACA,aACA,iBAAiB;CAAE,KAAK,2CAACC,oCAAa;CAAE,IAAI,2CAACC,6BAAU;CAAE,EACzD,aACA,cACA,WACA,GAAG,YACC;CACJ,MAAM,CAAC,gBAAgB,QAAQC,oCAAkB,MAAM;CACvD,MAAM,EAAE,SAAS,gBAAgB,kBAAkBC,4CAAiB,KAAK;AAEzE,QACE;EACa;EACN;EACQ;EACb,GAAIC,yBAAW,gBAAgB,UAAU,EAAE;aAE3C,2CAAC,sBAAmB,GAAI,eAAe,GAAI,EAE3C;GAAoB;GAAU,GAAI;aAChC,2CAAC;IAAoB,GAAI,eAAe,YAAY;cACjD,UAAU,eAAe,MAAM,eAAe;KAC3B;IACH;GACL;GAGtB,OACD,EAAE,UAAU;AAGX,QAAOA,yBAFSC,oCAAsB,EAEX,MAAM,EAAE;EACnC;AAIF,MAAM,qBAAqB,YACzBC,qBACA,QACD,CAAC,EAAE,wBAAwB,IAAI,CAAC;AAIjC,MAAM,sBAAsB,YAC1B,UACA,SACD,EAAE"}

package/dist/esm/components/file-input/file-input.js

@@ -1,6 +1,7 @@
 "use client";
 
 import { styled } from "../../core/system/factory.js";
+import { mergeProps } from "../../core/components/props.js";
 import { createSlotComponent } from "../../core/components/create-component.js";
 import "../../core/index.js";
 import { Portal } from "../portal/portal.js";
@@ -59,10 +60,7 @@ const FileInput = withProvider(({ children, component, errorBorderColor, focusBo
 		children: cloneChildren
 	})] });
 }, "root")((props) => {
-	return {
-		...useInputPropsContext(),
-		...props
-	};
+	return mergeProps(useInputPropsContext(), props)();
 });
 const FileInputTag = withContext("span", "tag")();
 

package/dist/esm/components/file-input/file-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-input.js","names":["defaultFormat: (value: File, index: number) => string"],"sources":["../../../../src/components/file-input/file-input.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { FileInputStyle } from \"./file-input.style\"\nimport type { UseFileInputProps } from \"./use-file-input\"\nimport { cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { useInputBorder, useInputPropsContext } from \"../input\"\nimport { Portal } from \"../portal\"\nimport { fileInputStyle } from \"./file-input.style\"\nimport { useFileInput } from \"./use-file-input\"\n\nconst defaultFormat: (value: File, index: number) => string = ({ name }) => name\n\nexport interface FileInputProps\n  extends\n    Omit<\n      HTMLStyledProps<\"input\">,\n      \"children\" | \"defaultValue\" | \"onChange\" | \"value\"\n    >,\n    ThemeProps<FileInputStyle>,\n    UseInputBorderProps,\n    FieldProps,\n    Omit<UseFileInputProps, \"children\"> {\n  /**\n   * The string to separate uploaded files.\n   *\n   * @default ','\n   */\n  separator?: string\n  /**\n   * A callback that returns a React node.\n   */\n  children?: (files: File[] | undefined) => ReactNode\n  /**\n   * The component that displays uploaded files.\n   */\n  component?: (props: { index: number; value: File }) => ReactNode\n  /**\n   * A callback that formats the name of the uploaded file.\n   */\n  format?: (value: File, index: number) => string\n}\n\nconst {\n  PropsContext: FileInputPropsContext,\n  usePropsContext: useFileInputPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<FileInputProps, FileInputStyle>(\n  \"file-input\",\n  fileInputStyle,\n)\n\nexport { FileInputPropsContext, useFileInputPropsContext }\n\n/**\n * `FileInput` is a component used for users to select files.\n *\n * @see https://yamada-ui.com/docs/components/file-input\n */\nexport const FileInput = withProvider<\"input\", FileInputProps>(\n  ({\n    children,\n    component,\n    errorBorderColor,\n    focusBorderColor,\n    format = defaultFormat,\n    placeholder,\n    separator = \",\",\n    ...props\n  }) => {\n    const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n    const { values, getFieldProps, getInputProps } = useFileInput(props)\n\n    const cloneChildren = useMemo(() => {\n      if (!values?.length)\n        return (\n          <styled.span overflow=\"hidden\" whiteSpace=\"nowrap\">\n            {placeholder}\n          </styled.span>\n        )\n\n      if (children) return children(values)\n\n      return values.map((value, index) => {\n        const last = values.length === index + 1\n\n        if (component) {\n          const node = component({ index, value })\n\n          if (isValidElement(node)) {\n            return cloneElement(node, { key: index })\n          } else {\n            return node\n          }\n        } else {\n          return (\n            <FileInputTag key={index}>\n              {format(value, index)}\n              {!last ? separator : null}\n            </FileInputTag>\n          )\n        }\n      })\n    }, [children, format, placeholder, separator, component, values])\n\n    return (\n      <>\n        <Portal>\n          <styled.input {...getInputProps()} />\n        </Portal>\n\n        <styled.div {...varProps} {...getFieldProps()}>\n          {cloneChildren}\n        </styled.div>\n      </>\n    )\n  },\n  \"root\",\n)((props) => {\n  const context = useInputPropsContext()\n\n  return { ...context, ...props }\n})\n\ninterface FileInputTagProps extends HTMLStyledProps {}\n\nconst FileInputTag = withContext<\"span\", FileInputTagProps>(\"span\", \"tag\")()\n"],"mappings":";;;;;;;;;;;;;;;;AAeA,MAAMA,iBAAyD,EAAE,WAAW;AAgC5E,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,aACA,iBACE,oBACF,cACA,eACD;;;;;;AASD,MAAa,YAAY,cACtB,EACC,UACA,WACA,kBACA,kBACA,SAAS,eACT,aACA,YAAY,KACZ,GAAG,YACC;CACJ,MAAM,WAAW,eAAe;EAAE;EAAkB;EAAkB,CAAC;CACvE,MAAM,EAAE,QAAQ,eAAe,kBAAkB,aAAa,MAAM;CAEpE,MAAM,gBAAgB,cAAc;AAClC,MAAI,CAAC,QAAQ,OACX,QACE,oBAAC,OAAO;GAAK,UAAS;GAAS,YAAW;aACvC;IACW;AAGlB,MAAI,SAAU,QAAO,SAAS,OAAO;AAErC,SAAO,OAAO,KAAK,OAAO,UAAU;GAClC,MAAM,OAAO,OAAO,WAAW,QAAQ;AAEvC,OAAI,WAAW;IACb,MAAM,OAAO,UAAU;KAAE;KAAO;KAAO,CAAC;AAExC,QAAI,eAAe,KAAK,CACtB,QAAO,aAAa,MAAM,EAAE,KAAK,OAAO,CAAC;QAEzC,QAAO;SAGT,QACE,qBAAC,2BACE,OAAO,OAAO,MAAM,EACpB,CAAC,OAAO,YAAY,SAFJ,MAGJ;IAGnB;IACD;EAAC;EAAU;EAAQ;EAAa;EAAW;EAAW;EAAO,CAAC;AAEjE,QACE,8CACE,oBAAC,oBACC,oBAAC,OAAO,SAAM,GAAI,eAAe,GAAI,GAC9B,EAET,oBAAC,OAAO;EAAI,GAAI;EAAU,GAAI,eAAe;YAC1C;GACU,IACZ;GAGP,OACD,EAAE,UAAU;AAGX,QAAO;EAAE,GAFO,sBAAsB;EAEjB,GAAG;EAAO;EAC/B;AAIF,MAAM,eAAe,YAAuC,QAAQ,MAAM,EAAE"}
+{"version":3,"file":"file-input.js","names":["defaultFormat: (value: File, index: number) => string"],"sources":["../../../../src/components/file-input/file-input.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { FieldProps } from \"../field\"\nimport type { UseInputBorderProps } from \"../input\"\nimport type { FileInputStyle } from \"./file-input.style\"\nimport type { UseFileInputProps } from \"./use-file-input\"\nimport { cloneElement, isValidElement, useMemo } from \"react\"\nimport { createSlotComponent, mergeProps, styled } from \"../../core\"\nimport { useInputBorder, useInputPropsContext } from \"../input\"\nimport { Portal } from \"../portal\"\nimport { fileInputStyle } from \"./file-input.style\"\nimport { useFileInput } from \"./use-file-input\"\n\nconst defaultFormat: (value: File, index: number) => string = ({ name }) => name\n\nexport interface FileInputProps\n  extends\n    Omit<\n      HTMLStyledProps<\"input\">,\n      \"children\" | \"defaultValue\" | \"onChange\" | \"value\"\n    >,\n    ThemeProps<FileInputStyle>,\n    UseInputBorderProps,\n    FieldProps,\n    Omit<UseFileInputProps, \"children\"> {\n  /**\n   * The string to separate uploaded files.\n   *\n   * @default ','\n   */\n  separator?: string\n  /**\n   * A callback that returns a React node.\n   */\n  children?: (files: File[] | undefined) => ReactNode\n  /**\n   * The component that displays uploaded files.\n   */\n  component?: (props: { index: number; value: File }) => ReactNode\n  /**\n   * A callback that formats the name of the uploaded file.\n   */\n  format?: (value: File, index: number) => string\n}\n\nconst {\n  PropsContext: FileInputPropsContext,\n  usePropsContext: useFileInputPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<FileInputProps, FileInputStyle>(\n  \"file-input\",\n  fileInputStyle,\n)\n\nexport { FileInputPropsContext, useFileInputPropsContext }\n\n/**\n * `FileInput` is a component used for users to select files.\n *\n * @see https://yamada-ui.com/docs/components/file-input\n */\nexport const FileInput = withProvider<\"input\", FileInputProps>(\n  ({\n    children,\n    component,\n    errorBorderColor,\n    focusBorderColor,\n    format = defaultFormat,\n    placeholder,\n    separator = \",\",\n    ...props\n  }) => {\n    const varProps = useInputBorder({ errorBorderColor, focusBorderColor })\n    const { values, getFieldProps, getInputProps } = useFileInput(props)\n\n    const cloneChildren = useMemo(() => {\n      if (!values?.length)\n        return (\n          <styled.span overflow=\"hidden\" whiteSpace=\"nowrap\">\n            {placeholder}\n          </styled.span>\n        )\n\n      if (children) return children(values)\n\n      return values.map((value, index) => {\n        const last = values.length === index + 1\n\n        if (component) {\n          const node = component({ index, value })\n\n          if (isValidElement(node)) {\n            return cloneElement(node, { key: index })\n          } else {\n            return node\n          }\n        } else {\n          return (\n            <FileInputTag key={index}>\n              {format(value, index)}\n              {!last ? separator : null}\n            </FileInputTag>\n          )\n        }\n      })\n    }, [children, format, placeholder, separator, component, values])\n\n    return (\n      <>\n        <Portal>\n          <styled.input {...getInputProps()} />\n        </Portal>\n\n        <styled.div {...varProps} {...getFieldProps()}>\n          {cloneChildren}\n        </styled.div>\n      </>\n    )\n  },\n  \"root\",\n)((props) => {\n  const context = useInputPropsContext()\n\n  return mergeProps(context, props)()\n})\n\ninterface FileInputTagProps extends HTMLStyledProps {}\n\nconst FileInputTag = withContext<\"span\", FileInputTagProps>(\"span\", \"tag\")()\n"],"mappings":";;;;;;;;;;;;;;;;;AAeA,MAAMA,iBAAyD,EAAE,WAAW;AAgC5E,MAAM,EACJ,cAAc,uBACd,iBAAiB,0BACjB,aACA,iBACE,oBACF,cACA,eACD;;;;;;AASD,MAAa,YAAY,cACtB,EACC,UACA,WACA,kBACA,kBACA,SAAS,eACT,aACA,YAAY,KACZ,GAAG,YACC;CACJ,MAAM,WAAW,eAAe;EAAE;EAAkB;EAAkB,CAAC;CACvE,MAAM,EAAE,QAAQ,eAAe,kBAAkB,aAAa,MAAM;CAEpE,MAAM,gBAAgB,cAAc;AAClC,MAAI,CAAC,QAAQ,OACX,QACE,oBAAC,OAAO;GAAK,UAAS;GAAS,YAAW;aACvC;IACW;AAGlB,MAAI,SAAU,QAAO,SAAS,OAAO;AAErC,SAAO,OAAO,KAAK,OAAO,UAAU;GAClC,MAAM,OAAO,OAAO,WAAW,QAAQ;AAEvC,OAAI,WAAW;IACb,MAAM,OAAO,UAAU;KAAE;KAAO;KAAO,CAAC;AAExC,QAAI,eAAe,KAAK,CACtB,QAAO,aAAa,MAAM,EAAE,KAAK,OAAO,CAAC;QAEzC,QAAO;SAGT,QACE,qBAAC,2BACE,OAAO,OAAO,MAAM,EACpB,CAAC,OAAO,YAAY,SAFJ,MAGJ;IAGnB;IACD;EAAC;EAAU;EAAQ;EAAa;EAAW;EAAW;EAAO,CAAC;AAEjE,QACE,8CACE,oBAAC,oBACC,oBAAC,OAAO,SAAM,GAAI,eAAe,GAAI,GAC9B,EAET,oBAAC,OAAO;EAAI,GAAI;EAAU,GAAI,eAAe;YAC1C;GACU,IACZ;GAGP,OACD,EAAE,UAAU;AAGX,QAAO,WAFS,sBAAsB,EAEX,MAAM,EAAE;EACnC;AAIF,MAAM,eAAe,YAAuC,QAAQ,MAAM,EAAE"}

package/dist/esm/components/password-input/password-input.js

@@ -1,5 +1,6 @@
 "use client";
 
+import { mergeProps } from "../../core/components/props.js";
 import { createSlotComponent } from "../../core/components/create-component.js";
 import "../../core/index.js";
 import { EyeIcon } from "../icon/icons/eye-icon.js";
@@ -32,8 +33,7 @@ const PasswordInput = withProvider(({ className, css, colorScheme, visibilityIco
 		className,
 		css,
 		colorScheme,
-		...groupItemProps,
-		...rootProps,
+		...mergeProps(groupItemProps, rootProps)(),
 		children: [/* @__PURE__ */ jsx(PasswordInputField, { ...getInputProps() }), /* @__PURE__ */ jsx(InputElement, {
 			clickable: true,
 			...elementProps,
@@ -44,10 +44,7 @@ const PasswordInput = withProvider(({ className, css, colorScheme, visibilityIco
 		})]
 	});
 }, "root")((props) => {
-	return {
-		...useInputPropsContext(),
-		...props
-	};
+	return mergeProps(useInputPropsContext(), props)();
 });
 const PasswordInputField = withContext(Input, "field")({ "data-group-propagate": "" });
 const PasswordInputButton = withContext("button", "button")();

package/dist/esm/components/password-input/password-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"password-input.js","names":["InputGroup.Root","InputGroup.Element"],"sources":["../../../../src/components/password-input/password-input.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps, WithoutThemeProps } from \"../../core\"\nimport type { InputProps } from \"../input\"\nimport type { PasswordInputStyle } from \"./password-input.style\"\nimport type { UsePasswordInputProps } from \"./use-password-input\"\nimport { createSlotComponent } from \"../../core\"\nimport { useGroupItemProps } from \"../group\"\nimport { EyeIcon, EyeOffIcon } from \"../icon\"\nimport { Input, InputGroup, useInputPropsContext } from \"../input\"\nimport { passwordInputStyle } from \"./password-input.style\"\nimport { usePasswordInput } from \"./use-password-input\"\n\nexport interface PasswordInputProps\n  extends\n    WithoutThemeProps<InputProps, PasswordInputStyle>,\n    ThemeProps<PasswordInputStyle>,\n    UsePasswordInputProps {\n  /**\n   * The icons to be used for the visibility toggle.\n   */\n  visibilityIcon?: { off: ReactNode; on: ReactNode }\n  /**\n   * The props for the button element.\n   */\n  buttonProps?: PasswordInputButtonProps\n  /**\n   * The props for the end element.\n   */\n  elementProps?: InputGroup.ElementProps\n  /**\n   * The props for the root element.\n   */\n  rootProps?: InputGroup.RootProps\n}\n\nconst {\n  PropsContext: PasswordInputPropsContext,\n  usePropsContext: usePasswordInputPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<PasswordInputProps, PasswordInputStyle>(\n  \"password-input\",\n  passwordInputStyle,\n)\n\nexport { PasswordInputPropsContext, usePasswordInputPropsContext }\n\n/**\n * `PasswordInput` is a component that allows users to input passwords with a visibility toggle.\n *\n * @see https://yamada-ui.com/docs/components/password-input\n */\nexport const PasswordInput = withProvider<\"input\", PasswordInputProps>(\n  ({\n    className,\n    css,\n    colorScheme,\n    visibilityIcon = { off: <EyeOffIcon />, on: <EyeIcon /> },\n    buttonProps,\n    elementProps,\n    rootProps,\n    ...props\n  }) => {\n    const [groupItemProps, rest] = useGroupItemProps(props)\n    const { visible, getButtonProps, getInputProps } = usePasswordInput(rest)\n\n    return (\n      <InputGroup.Root\n        className={className}\n        css={css}\n        colorScheme={colorScheme}\n        {...groupItemProps}\n        {...rootProps}\n      >\n        <PasswordInputField {...getInputProps()} />\n\n        <InputGroup.Element clickable {...elementProps}>\n          <PasswordInputButton {...getButtonProps(buttonProps)}>\n            {visible ? visibilityIcon.off : visibilityIcon.on}\n          </PasswordInputButton>\n        </InputGroup.Element>\n      </InputGroup.Root>\n    )\n  },\n  \"root\",\n)((props) => {\n  const context = useInputPropsContext()\n\n  return { ...context, ...props }\n})\n\ninterface PasswordInputFieldProps extends InputProps {}\n\nconst PasswordInputField = withContext<\"input\", PasswordInputFieldProps>(\n  Input,\n  \"field\",\n)({ \"data-group-propagate\": \"\" })\n\ninterface PasswordInputButtonProps extends HTMLStyledProps<\"button\"> {}\n\nconst PasswordInputButton = withContext<\"button\", PasswordInputButtonProps>(\n  \"button\",\n  \"button\",\n)()\n"],"mappings":";;;;;;;;;;;;;;;;;;AAqCA,MAAM,EACJ,cAAc,2BACd,iBAAiB,8BACjB,aACA,iBACE,oBACF,kBACA,mBACD;;;;;;AASD,MAAa,gBAAgB,cAC1B,EACC,WACA,KACA,aACA,iBAAiB;CAAE,KAAK,oBAAC,eAAa;CAAE,IAAI,oBAAC,YAAU;CAAE,EACzD,aACA,cACA,WACA,GAAG,YACC;CACJ,MAAM,CAAC,gBAAgB,QAAQ,kBAAkB,MAAM;CACvD,MAAM,EAAE,SAAS,gBAAgB,kBAAkB,iBAAiB,KAAK;AAEzE,QACE,qBAACA;EACY;EACN;EACQ;EACb,GAAI;EACJ,GAAI;aAEJ,oBAAC,sBAAmB,GAAI,eAAe,GAAI,EAE3C,oBAACC;GAAmB;GAAU,GAAI;aAChC,oBAAC;IAAoB,GAAI,eAAe,YAAY;cACjD,UAAU,eAAe,MAAM,eAAe;KAC3B;IACH;GACL;GAGtB,OACD,EAAE,UAAU;AAGX,QAAO;EAAE,GAFO,sBAAsB;EAEjB,GAAG;EAAO;EAC/B;AAIF,MAAM,qBAAqB,YACzB,OACA,QACD,CAAC,EAAE,wBAAwB,IAAI,CAAC;AAIjC,MAAM,sBAAsB,YAC1B,UACA,SACD,EAAE"}
+{"version":3,"file":"password-input.js","names":["InputGroup.Root","InputGroup.Element"],"sources":["../../../../src/components/password-input/password-input.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactNode } from \"react\"\nimport type { HTMLStyledProps, ThemeProps, WithoutThemeProps } from \"../../core\"\nimport type { InputProps } from \"../input\"\nimport type { PasswordInputStyle } from \"./password-input.style\"\nimport type { UsePasswordInputProps } from \"./use-password-input\"\nimport { createSlotComponent, mergeProps } from \"../../core\"\nimport { useGroupItemProps } from \"../group\"\nimport { EyeIcon, EyeOffIcon } from \"../icon\"\nimport { Input, InputGroup, useInputPropsContext } from \"../input\"\nimport { passwordInputStyle } from \"./password-input.style\"\nimport { usePasswordInput } from \"./use-password-input\"\n\nexport interface PasswordInputProps\n  extends\n    WithoutThemeProps<InputProps, PasswordInputStyle>,\n    ThemeProps<PasswordInputStyle>,\n    UsePasswordInputProps {\n  /**\n   * The icons to be used for the visibility toggle.\n   */\n  visibilityIcon?: { off: ReactNode; on: ReactNode }\n  /**\n   * The props for the button element.\n   */\n  buttonProps?: PasswordInputButtonProps\n  /**\n   * The props for the end element.\n   */\n  elementProps?: InputGroup.ElementProps\n  /**\n   * The props for the root element.\n   */\n  rootProps?: InputGroup.RootProps\n}\n\nconst {\n  PropsContext: PasswordInputPropsContext,\n  usePropsContext: usePasswordInputPropsContext,\n  withContext,\n  withProvider,\n} = createSlotComponent<PasswordInputProps, PasswordInputStyle>(\n  \"password-input\",\n  passwordInputStyle,\n)\n\nexport { PasswordInputPropsContext, usePasswordInputPropsContext }\n\n/**\n * `PasswordInput` is a component that allows users to input passwords with a visibility toggle.\n *\n * @see https://yamada-ui.com/docs/components/password-input\n */\nexport const PasswordInput = withProvider<\"input\", PasswordInputProps>(\n  ({\n    className,\n    css,\n    colorScheme,\n    visibilityIcon = { off: <EyeOffIcon />, on: <EyeIcon /> },\n    buttonProps,\n    elementProps,\n    rootProps,\n    ...props\n  }) => {\n    const [groupItemProps, rest] = useGroupItemProps(props)\n    const { visible, getButtonProps, getInputProps } = usePasswordInput(rest)\n\n    return (\n      <InputGroup.Root\n        className={className}\n        css={css}\n        colorScheme={colorScheme}\n        {...mergeProps(groupItemProps, rootProps)()}\n      >\n        <PasswordInputField {...getInputProps()} />\n\n        <InputGroup.Element clickable {...elementProps}>\n          <PasswordInputButton {...getButtonProps(buttonProps)}>\n            {visible ? visibilityIcon.off : visibilityIcon.on}\n          </PasswordInputButton>\n        </InputGroup.Element>\n      </InputGroup.Root>\n    )\n  },\n  \"root\",\n)((props) => {\n  const context = useInputPropsContext()\n\n  return mergeProps(context, props)()\n})\n\ninterface PasswordInputFieldProps extends InputProps {}\n\nconst PasswordInputField = withContext<\"input\", PasswordInputFieldProps>(\n  Input,\n  \"field\",\n)({ \"data-group-propagate\": \"\" })\n\ninterface PasswordInputButtonProps extends HTMLStyledProps<\"button\"> {}\n\nconst PasswordInputButton = withContext<\"button\", PasswordInputButtonProps>(\n  \"button\",\n  \"button\",\n)()\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAqCA,MAAM,EACJ,cAAc,2BACd,iBAAiB,8BACjB,aACA,iBACE,oBACF,kBACA,mBACD;;;;;;AASD,MAAa,gBAAgB,cAC1B,EACC,WACA,KACA,aACA,iBAAiB;CAAE,KAAK,oBAAC,eAAa;CAAE,IAAI,oBAAC,YAAU;CAAE,EACzD,aACA,cACA,WACA,GAAG,YACC;CACJ,MAAM,CAAC,gBAAgB,QAAQ,kBAAkB,MAAM;CACvD,MAAM,EAAE,SAAS,gBAAgB,kBAAkB,iBAAiB,KAAK;AAEzE,QACE,qBAACA;EACY;EACN;EACQ;EACb,GAAI,WAAW,gBAAgB,UAAU,EAAE;aAE3C,oBAAC,sBAAmB,GAAI,eAAe,GAAI,EAE3C,oBAACC;GAAmB;GAAU,GAAI;aAChC,oBAAC;IAAoB,GAAI,eAAe,YAAY;cACjD,UAAU,eAAe,MAAM,eAAe;KAC3B;IACH;GACL;GAGtB,OACD,EAAE,UAAU;AAGX,QAAO,WAFS,sBAAsB,EAEX,MAAM,EAAE;EACnC;AAIF,MAAM,qBAAqB,YACzB,OACA,QACD,CAAC,EAAE,wBAAwB,IAAI,CAAC;AAIjC,MAAM,sBAAsB,YAC1B,UACA,SACD,EAAE"}

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

@@ -3,13 +3,11 @@ 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 react1197 from "react";
+import * as react184 from "react";
 
 //#region src/components/accordion/accordion.d.ts
 interface AccordionCallBackProps {
@@ -33,7 +31,7 @@ interface AccordionRootProps extends Omit<HTMLStyledProps, "onChange">, ThemePro
    */
   items?: AccordionItem[];
 }
-declare const AccordionPropsContext: react1197.Context<Partial<AccordionRootProps> | undefined>, useAccordionPropsContext: () => Partial<AccordionRootProps> | undefined;
+declare const AccordionPropsContext: react184.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 react1185 from "react";
+import * as react172 from "react";
 
 //#region src/components/accordion/use-accordion.d.ts
-declare const AccordionDescendantsContext: react1185.Context<{
+declare const AccordionDescendantsContext: react172.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: react1185.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) => react1185.RefCallback<HTMLButtonElement>;
+    } | undefined) => react172.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: react1185.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) => react1185.RefCallback<HTMLButtonElement>;
+      } | undefined) => react172.RefCallback<HTMLButtonElement>;
       unregister: (node?: HTMLButtonElement | null | undefined) => void;
       value: (indexOrNode: number | HTMLButtonElement | null) => Descendant<HTMLButtonElement, {}> | undefined;
       values: (props?: Partial<{}> | undefined) => Descendant<HTMLButtonElement, {}>[];
     };
-    register: react1185.RefCallback<HTMLButtonElement>;
+    register: react172.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: react1185.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) => react1185.RefCallback<HTMLButtonElement>;
+    } | undefined) => react172.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: react1185.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
+declare const AccordionContext: react172.Context<AccordionContext>, useAccordionContext: () => AccordionContext;
 interface AccordionItemContext extends Omit<UseAccordionItemReturn, "getItemProps"> {}
-declare const AccordionItemContext: react1185.Context<AccordionItemContext>, useAccordionItemContext: () => AccordionItemContext;
+declare const AccordionItemContext: react172.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) => react1185.RefCallback<HTMLButtonElement>;
+    } | undefined) => react172.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: react1185.Dispatch<react1185.SetStateAction<number>>;
-  setIndex: react1185.Dispatch<react1185.SetStateAction<number | number[]>>;
+  setFocusedIndex: react172.Dispatch<react172.SetStateAction<number>>;
+  setIndex: react172.Dispatch<react172.SetStateAction<number | number[]>>;
   toggle: boolean | undefined;
   getRootProps: PropGetter<"div", undefined, undefined>;
 };

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

@@ -4,10 +4,9 @@ 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 react1181 from "react";
+import * as react252 from "react";
 import { PropsWithChildren, ReactNode } from "react";
 
 //#region src/components/action-bar/action-bar.d.ts
@@ -29,7 +28,7 @@ interface ActionBarRootProps extends Omit<HTMLStyledProps, "content">, ThemeProp
    */
   onCloseComplete?: () => void;
 }
-declare const ActionBarPropsContext: react1181.Context<Partial<ActionBarRootProps> | undefined>, useActionBarPropsContext: () => Partial<ActionBarRootProps> | undefined;
+declare const ActionBarPropsContext: react252.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,10 +2,9 @@ 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 react1180 from "react";
+import * as react253 from "react";
 import { ReactNode } from "react";
 
 //#region src/components/airy/airy.d.ts
@@ -57,7 +56,7 @@ interface AiryProps extends Omit<HTMLMotionProps<"button">, "onChange">, ThemePr
    */
   onChange?: (value: KeyframeIdent) => void;
 }
-declare const AiryPropsContext: react1180.Context<Partial<AiryProps> | undefined>, useAiryPropsContext: () => Partial<AiryProps> | undefined;
+declare const AiryPropsContext: react253.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,13 +3,10 @@ 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 react1179 from "react";
+import * as react251 from "react";
 
 //#region src/components/alert/alert.d.ts
 interface AlertRootProps extends HTMLStyledProps, ThemeProps<AlertStyle> {
@@ -20,7 +17,7 @@ interface AlertRootProps extends HTMLStyledProps, ThemeProps<AlertStyle> {
    */
   status?: StatusScheme;
 }
-declare const AlertPropsContext: react1179.Context<Partial<AlertRootProps> | undefined>, useAlertPropsContext: () => Partial<AlertRootProps> | undefined;
+declare const AlertPropsContext: react251.Context<Partial<AlertRootProps> | undefined>, useAlertPropsContext: () => Partial<AlertRootProps> | undefined;
 /**
  * `Alert` is a component that conveys information to the user.
  *

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

@@ -3,7 +3,7 @@ import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/
 import "../../index.js";
 
 //#region src/components/alert/alert.style.d.ts
-declare const alertStyle: ComponentSlotStyle<"title" | "loading" | "icon" | "root" | "description", CSSPropObject<CSSSlotObject<"title" | "loading" | "icon" | "root" | "description">>, CSSModifierObject<CSSSlotObject<"title" | "loading" | "icon" | "root" | "description">>, {
+declare const alertStyle: ComponentSlotStyle<"title" | "loading" | "icon" | "description" | "root", CSSPropObject<CSSSlotObject<"title" | "loading" | "icon" | "description" | "root">>, CSSModifierObject<CSSSlotObject<"title" | "loading" | "icon" | "description" | "root">>, {
   island: {
     description: {
       color: "fg.muted";

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

@@ -3,9 +3,8 @@ 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 react241 from "react";
+import * as react250 from "react";
 
 //#region src/components/alpha-slider/alpha-slider.d.ts
 interface AlphaSliderRootProps extends WithoutThemeProps<Omit<HueSliderRootProps, "color" | "max" | "step" | "thumbProps" | "trackProps">, AlphaSliderStyle> {
@@ -38,7 +37,7 @@ interface AlphaSliderRootProps extends WithoutThemeProps<Omit<HueSliderRootProps
    */
   trackProps?: AlphaSliderTrackProps;
 }
-declare const AlphaSliderPropsContext: react241.Context<Partial<AlphaSliderRootProps> | undefined>, useAlphaSliderPropsContext: () => Partial<AlphaSliderRootProps> | undefined;
+declare const AlphaSliderPropsContext: react250.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 react1178 from "react";
+import * as react489 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: react1178.Context<Partial<AspectRatioProps> | undefined>, useAspectRatioPropsContext: () => Partial<AspectRatioProps> | undefined;
+declare const AspectRatioPropsContext: react489.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,16 +3,14 @@ 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 react985 from "react";
+import * as react242 from "react";
 import { ReactElement, ReactNode } from "react";
 
 //#region src/components/autocomplete/autocomplete.d.ts
@@ -68,7 +66,7 @@ interface AutocompleteRootProps<Multiple extends boolean = false> extends Omit<H
    */
   rootProps?: InputGroupRootProps;
 }
-declare const AutocompletePropsContext: react985.Context<Partial<AutocompleteRootProps<false>> | undefined>, useAutocompletePropsContext: () => Partial<AutocompleteRootProps<false>> | undefined;
+declare const AutocompletePropsContext: react242.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" | "indicator" | "root" | "field" | "valueText" | "empty", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "icon" | "separator" | "group" | "indicator" | "root" | "field" | "valueText" | "empty">>, {
+declare const autocompleteStyle: ComponentSlotStyle<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "indicator" | "root" | "field" | "empty" | "valueText", CSSPropObject<CSSSlotObject<"input" | "label" | "option" | "content" | "group" | "separator" | "icon" | "indicator" | "root" | "field" | "empty" | "valueText">>, {
   xs: {
     empty: {
       gap: "1.5";

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

@@ -2,13 +2,11 @@ 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 react986 from "react";
+import * as react236 from "react";
 import { ChangeEvent, ReactNode } from "react";
 
 //#region src/components/autocomplete/use-autocomplete.d.ts
@@ -28,7 +26,7 @@ interface AutocompleteFilter {
 }
 type AutocompleteMatcher = typeof index_d_exports.match;
 interface AutocompleteContext extends Pick<UseAutocompleteReturn, "max" | "value"> {}
-declare const AutocompleteContext: react986.Context<AutocompleteContext>, useAutocompleteContext: () => AutocompleteContext;
+declare const AutocompleteContext: react236.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.
@@ -156,7 +154,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) => react986.RefCallback<HTMLDivElement>;
+    register: (props?: DescendantProps<HTMLDivElement, ComboboxDescendantProps> | undefined) => react236.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>[];
@@ -166,8 +164,8 @@ declare const useAutocomplete: <Multiple extends boolean = false>(props?: UseAut
   items: ComboboxItem[];
   max: number | undefined;
   open: boolean;
-  setInputValue: react986.Dispatch<react986.SetStateAction<string>>;
-  setValue: react986.Dispatch<react986.SetStateAction<Multiple extends true ? string[] : string>>;
+  setInputValue: react236.Dispatch<react236.SetStateAction<string>>;
+  setValue: react236.Dispatch<react236.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 react1173 from "react";
+import * as react246 from "react";
 import { ReactElement } from "react";
-import * as _yamada_ui_utils18 from "@yamada-ui/utils";
+import * as _yamada_ui_utils11 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_utils18.Dict = _yamada_ui_utils18.Dict<any>>(el: H | react1173.FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
+declare const component: <H extends "fragment" | As = "div", R extends _yamada_ui_utils11.Dict = _yamada_ui_utils11.Dict<any>>(el: H | react246.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" ? react1173.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, AvatarPropsContext: react1173.Context<Partial<AvatarProps> | undefined>, useAvatarPropsContext: () => Partial<AvatarProps> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils18.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" ? react246.FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, AvatarPropsContext: react246.Context<Partial<AvatarProps> | undefined>, useAvatarPropsContext: () => Partial<AvatarProps> | undefined, useRootComponentProps: <Y extends _yamada_ui_utils11.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_utils18.Merge<WithoutThemeProps<Y, ComponentSlotStyle<"image" | "group" | "root" | "fallback", {
+  }?: UseComponentPropsOptions<R>) => [CSSSlotObject, _yamada_ui_utils11.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 react1176 from "react";
+import * as react244 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: react1176.ReactElement<any, string | react1176.JSXElementConstructor<any>>[];
+  children: react244.ReactElement<any, string | react244.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 react1172 from "react";
+import * as react230 from "react";
 
 //#region src/components/badge/badge.d.ts
 interface BadgeProps extends HTMLStyledProps<"span">, ThemeProps<BadgeStyle> {}
-declare const BadgePropsContext: react1172.Context<Partial<BadgeProps> | undefined>, useBadgePropsContext: () => Partial<BadgeProps> | undefined;
+declare const BadgePropsContext: react230.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 react1171 from "react";
+import * as react243 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: react1171.Context<Partial<BleedProps> | undefined>, useBleedPropsContext: () => Partial<BleedProps> | undefined;
+declare const BleedPropsContext: react243.Context<Partial<BleedProps> | undefined>, useBleedPropsContext: () => Partial<BleedProps> | undefined;
 /**
  * `Bleed` is a component used to break an element from the boundaries of its container.
  *