@yamada-ui/native-select 0.5.8 → 0.5.9

package/dist/{chunk-BI72PIQG.mjs → chunk-4MNQL2UB.mjs}

@@ -141,3 +141,4 @@ export {
   NativeOptionGroup,
   NativeOption
 };
+//# sourceMappingURL=chunk-4MNQL2UB.mjs.map

package/dist/chunk-4MNQL2UB.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/native-select.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  useMultiComponentStyle,\n  omitThemeProps,\n  layoutStylesProperties,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n  useFormControlProps,\n  formControlProperties,\n} from \"@yamada-ui/form-control\"\nimport { ChevronIcon } from \"@yamada-ui/icon\"\nimport {\n  createContext,\n  cx,\n  splitObject,\n  getValidChildren,\n  isValidElement,\n  pickObject,\n} from \"@yamada-ui/utils\"\nimport type {\n  DetailedHTMLProps,\n  FC,\n  OptionHTMLAttributes,\n  ReactElement,\n} from \"react\"\nimport { cloneElement } from \"react\"\n\ntype NativeSelectBaseItem = Omit<\n  DetailedHTMLProps<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>,\n  \"label\" | \"children\" | \"value\"\n> & { label?: string }\n\ntype Value = DetailedHTMLProps<\n  OptionHTMLAttributes<HTMLOptionElement>,\n  HTMLOptionElement\n>[\"value\"]\n\ntype NativeSelectItemWithValue = NativeSelectBaseItem & { value?: Value }\n\ntype NativeSelectItemWithItems = NativeSelectBaseItem & {\n  items?: NativeSelectItemWithValue[]\n}\n\nexport type NativeSelectItem = NativeSelectItemWithValue &\n  NativeSelectItemWithItems\n\ntype NativeSelectContext = Record<string, CSSUIObject>\n\nconst [NativeSelectProvider, useNativeSelect] =\n  createContext<NativeSelectContext>({\n    name: \"NativeSelectContext\",\n    errorMessage: `useNativeSelect returned is 'undefined'. Seems you forgot to wrap the components in \"<NativeSelect />\"`,\n  })\n\ntype NativeSelectOptions = {\n  /**\n   * If provided, generate options based on items.\n   *\n   * @default '[]'\n   */\n  items?: NativeSelectItem[]\n  /**\n   * The placeholder for select.\n   */\n  placeholder?: string\n  /**\n   * If `true`, include placeholders in options.\n   *\n   * @default true\n   */\n  placeholderInOptions?: boolean\n  /**\n   * The border color when the input is focused.\n   */\n  focusBorderColor?: string\n  /**\n   * The border color when the input is invalid.\n   */\n  errorBorderColor?: string\n  /**\n   * Props for container element.\n   */\n  containerProps?: Omit<HTMLUIProps<\"div\">, \"children\">\n  /**\n   * Props for icon element.\n   */\n  iconProps?: HTMLUIProps<\"div\">\n}\n\nexport type NativeSelectProps = Omit<HTMLUIProps<\"select\">, \"size\"> &\n  ThemeProps<\"Select\"> &\n  NativeSelectOptions &\n  FormControlOptions\n\nexport const NativeSelect = forwardRef<NativeSelectProps, \"select\">(\n  (props, ref) => {\n    const [styles, mergedProps] = useMultiComponentStyle(\"NativeSelect\", props)\n    let {\n      className,\n      children,\n      placeholderInOptions = true,\n      color,\n      h,\n      height,\n      minH,\n      minHeight,\n      items = [],\n      placeholder,\n      containerProps,\n      iconProps,\n      ...rest\n    } = omitThemeProps(mergedProps)\n\n    rest = useFormControlProps(rest)\n\n    const formControlProps = pickObject(rest, formControlProperties)\n    const [layoutProps, selectProps] = splitObject(rest, layoutStylesProperties)\n\n    let computedChildren: ReactElement[] = []\n\n    if (!children && items.length) {\n      computedChildren = items\n        .map((item, i) => {\n          if (\"value\" in item) {\n            const { label, value, ...props } = item\n\n            return (\n              <NativeOption key={i} value={value} {...props}>\n                {label}\n              </NativeOption>\n            )\n          } else if (\"items\" in item) {\n            const { label, items = [], ...props } = item\n\n            return (\n              <NativeOptionGroup key={i} label={label} {...props}>\n                {items.map(({ label, value, ...props }, i) => (\n                  <NativeOption key={i} value={value} {...props}>\n                    {label}\n                  </NativeOption>\n                ))}\n              </NativeOptionGroup>\n            )\n          }\n        })\n        .filter(Boolean) as ReactElement[]\n    }\n\n    return (\n      <NativeSelectProvider value={styles}>\n        <ui.div\n          className=\"ui-select\"\n          __css={{\n            position: \"relative\",\n            w: \"100%\",\n            h: \"fit-content\",\n            color,\n            ...styles.container,\n          }}\n          {...layoutProps}\n          {...containerProps}\n          {...formControlProps}\n        >\n          <ui.select\n            ref={ref}\n            className={cx(\"ui-select__field\", className)}\n            __css={{\n              paddingEnd: \"2rem\",\n              h: h ?? height,\n              minH: minH ?? minHeight,\n              ...styles.field,\n            }}\n            {...selectProps}\n          >\n            {placeholder ? (\n              <NativeOption value=\"\" hidden={!placeholderInOptions}>\n                {placeholder}\n              </NativeOption>\n            ) : null}\n            {children ?? computedChildren}\n          </ui.select>\n\n          <NativeSelectIcon {...iconProps} {...formControlProps} />\n        </ui.div>\n      </NativeSelectProvider>\n    )\n  },\n)\n\ntype NativeSelectIconProps = HTMLUIProps<\"div\">\n\nconst NativeSelectIcon: FC<NativeSelectIconProps> = ({\n  className,\n  children,\n  ...rest\n}) => {\n  const styles = useNativeSelect()\n\n  const css: CSSUIObject = {\n    position: \"absolute\",\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    pointerEvents: \"none\",\n    top: \"50%\",\n    transform: \"translateY(-50%)\",\n    ...styles.icon,\n  }\n\n  const validChildren = getValidChildren(children)\n\n  const cloneChildren = validChildren.map((child) =>\n    cloneElement(child, {\n      focusable: false,\n      \"aria-hidden\": true,\n      style: {\n        width: \"1em\",\n        height: \"1em\",\n        color: \"currentColor\",\n      },\n    }),\n  )\n\n  return (\n    <ui.div className={cx(\"ui-select__icon\", className)} __css={css} {...rest}>\n      {isValidElement(children) ? cloneChildren : <ChevronIcon />}\n    </ui.div>\n  )\n}\n\nexport type NativeOptionGroupProps = HTMLUIProps<\"optgroup\">\n\nexport const NativeOptionGroup = forwardRef<NativeOptionGroupProps, \"optgroup\">(\n  (props, ref) => <ui.optgroup ref={ref} {...props} />,\n)\n\nexport type NativeOptionProps = Omit<HTMLUIProps<\"option\">, \"children\"> & {\n  children?: string\n}\n\nexport const NativeOption = forwardRef<NativeOptionProps, \"option\">(\n  (props, ref) => <ui.option ref={ref} {...props} />,\n)\n"],"mappings":"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","names":["props","items","label","i"]}

package/dist/index.js

@@ -152,3 +152,4 @@ var NativeOption = (0, import_core.forwardRef)(
   NativeOptionGroup,
   NativeSelect
 });
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/native-select.tsx"],"sourcesContent":["export { NativeSelect, NativeOptionGroup, NativeOption } from \"./native-select\"\nexport type {\n  NativeSelectProps,\n  NativeOptionGroupProps,\n  NativeOptionProps,\n  NativeSelectItem,\n} from \"./native-select\"\n","import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  useMultiComponentStyle,\n  omitThemeProps,\n  layoutStylesProperties,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n  useFormControlProps,\n  formControlProperties,\n} from \"@yamada-ui/form-control\"\nimport { ChevronIcon } from \"@yamada-ui/icon\"\nimport {\n  createContext,\n  cx,\n  splitObject,\n  getValidChildren,\n  isValidElement,\n  pickObject,\n} from \"@yamada-ui/utils\"\nimport type {\n  DetailedHTMLProps,\n  FC,\n  OptionHTMLAttributes,\n  ReactElement,\n} from \"react\"\nimport { cloneElement } from \"react\"\n\ntype NativeSelectBaseItem = Omit<\n  DetailedHTMLProps<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>,\n  \"label\" | \"children\" | \"value\"\n> & { label?: string }\n\ntype Value = DetailedHTMLProps<\n  OptionHTMLAttributes<HTMLOptionElement>,\n  HTMLOptionElement\n>[\"value\"]\n\ntype NativeSelectItemWithValue = NativeSelectBaseItem & { value?: Value }\n\ntype NativeSelectItemWithItems = NativeSelectBaseItem & {\n  items?: NativeSelectItemWithValue[]\n}\n\nexport type NativeSelectItem = NativeSelectItemWithValue &\n  NativeSelectItemWithItems\n\ntype NativeSelectContext = Record<string, CSSUIObject>\n\nconst [NativeSelectProvider, useNativeSelect] =\n  createContext<NativeSelectContext>({\n    name: \"NativeSelectContext\",\n    errorMessage: `useNativeSelect returned is 'undefined'. Seems you forgot to wrap the components in \"<NativeSelect />\"`,\n  })\n\ntype NativeSelectOptions = {\n  /**\n   * If provided, generate options based on items.\n   *\n   * @default '[]'\n   */\n  items?: NativeSelectItem[]\n  /**\n   * The placeholder for select.\n   */\n  placeholder?: string\n  /**\n   * If `true`, include placeholders in options.\n   *\n   * @default true\n   */\n  placeholderInOptions?: boolean\n  /**\n   * The border color when the input is focused.\n   */\n  focusBorderColor?: string\n  /**\n   * The border color when the input is invalid.\n   */\n  errorBorderColor?: string\n  /**\n   * Props for container element.\n   */\n  containerProps?: Omit<HTMLUIProps<\"div\">, \"children\">\n  /**\n   * Props for icon element.\n   */\n  iconProps?: HTMLUIProps<\"div\">\n}\n\nexport type NativeSelectProps = Omit<HTMLUIProps<\"select\">, \"size\"> &\n  ThemeProps<\"Select\"> &\n  NativeSelectOptions &\n  FormControlOptions\n\nexport const NativeSelect = forwardRef<NativeSelectProps, \"select\">(\n  (props, ref) => {\n    const [styles, mergedProps] = useMultiComponentStyle(\"NativeSelect\", props)\n    let {\n      className,\n      children,\n      placeholderInOptions = true,\n      color,\n      h,\n      height,\n      minH,\n      minHeight,\n      items = [],\n      placeholder,\n      containerProps,\n      iconProps,\n      ...rest\n    } = omitThemeProps(mergedProps)\n\n    rest = useFormControlProps(rest)\n\n    const formControlProps = pickObject(rest, formControlProperties)\n    const [layoutProps, selectProps] = splitObject(rest, layoutStylesProperties)\n\n    let computedChildren: ReactElement[] = []\n\n    if (!children && items.length) {\n      computedChildren = items\n        .map((item, i) => {\n          if (\"value\" in item) {\n            const { label, value, ...props } = item\n\n            return (\n              <NativeOption key={i} value={value} {...props}>\n                {label}\n              </NativeOption>\n            )\n          } else if (\"items\" in item) {\n            const { label, items = [], ...props } = item\n\n            return (\n              <NativeOptionGroup key={i} label={label} {...props}>\n                {items.map(({ label, value, ...props }, i) => (\n                  <NativeOption key={i} value={value} {...props}>\n                    {label}\n                  </NativeOption>\n                ))}\n              </NativeOptionGroup>\n            )\n          }\n        })\n        .filter(Boolean) as ReactElement[]\n    }\n\n    return (\n      <NativeSelectProvider value={styles}>\n        <ui.div\n          className=\"ui-select\"\n          __css={{\n            position: \"relative\",\n            w: \"100%\",\n            h: \"fit-content\",\n            color,\n            ...styles.container,\n          }}\n          {...layoutProps}\n          {...containerProps}\n          {...formControlProps}\n        >\n          <ui.select\n            ref={ref}\n            className={cx(\"ui-select__field\", className)}\n            __css={{\n              paddingEnd: \"2rem\",\n              h: h ?? height,\n              minH: minH ?? minHeight,\n              ...styles.field,\n            }}\n            {...selectProps}\n          >\n            {placeholder ? (\n              <NativeOption value=\"\" hidden={!placeholderInOptions}>\n                {placeholder}\n              </NativeOption>\n            ) : null}\n            {children ?? computedChildren}\n          </ui.select>\n\n          <NativeSelectIcon {...iconProps} {...formControlProps} />\n        </ui.div>\n      </NativeSelectProvider>\n    )\n  },\n)\n\ntype NativeSelectIconProps = HTMLUIProps<\"div\">\n\nconst NativeSelectIcon: FC<NativeSelectIconProps> = ({\n  className,\n  children,\n  ...rest\n}) => {\n  const styles = useNativeSelect()\n\n  const css: CSSUIObject = {\n    position: \"absolute\",\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    pointerEvents: \"none\",\n    top: \"50%\",\n    transform: \"translateY(-50%)\",\n    ...styles.icon,\n  }\n\n  const validChildren = getValidChildren(children)\n\n  const cloneChildren = validChildren.map((child) =>\n    cloneElement(child, {\n      focusable: false,\n      \"aria-hidden\": true,\n      style: {\n        width: \"1em\",\n        height: \"1em\",\n        color: \"currentColor\",\n      },\n    }),\n  )\n\n  return (\n    <ui.div className={cx(\"ui-select__icon\", className)} __css={css} {...rest}>\n      {isValidElement(children) ? cloneChildren : <ChevronIcon />}\n    </ui.div>\n  )\n}\n\nexport type NativeOptionGroupProps = HTMLUIProps<\"optgroup\">\n\nexport const NativeOptionGroup = forwardRef<NativeOptionGroupProps, \"optgroup\">(\n  (props, ref) => <ui.optgroup ref={ref} {...props} />,\n)\n\nexport type NativeOptionProps = Omit<HTMLUIProps<\"option\">, \"children\"> & {\n  children?: string\n}\n\nexport const NativeOption = forwardRef<NativeOptionProps, \"option\">(\n  (props, ref) => <ui.option ref={ref} {...props} />,\n)\n"],"mappings":"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","names":["props","items","label","i"]}

package/dist/index.mjs

@@ -3,9 +3,10 @@ import {
   NativeOption,
   NativeOptionGroup,
   NativeSelect
-} from "./chunk-BI72PIQG.mjs";
+} from "./chunk-4MNQL2UB.mjs";
 export {
   NativeOption,
   NativeOptionGroup,
   NativeSelect
 };
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/native-select.js

@@ -150,3 +150,4 @@ var NativeOption = (0, import_core.forwardRef)(
   NativeOptionGroup,
   NativeSelect
 });
+//# sourceMappingURL=native-select.js.map

package/dist/native-select.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/native-select.tsx"],"sourcesContent":["import type { CSSUIObject, HTMLUIProps, ThemeProps } from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  useMultiComponentStyle,\n  omitThemeProps,\n  layoutStylesProperties,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n  useFormControlProps,\n  formControlProperties,\n} from \"@yamada-ui/form-control\"\nimport { ChevronIcon } from \"@yamada-ui/icon\"\nimport {\n  createContext,\n  cx,\n  splitObject,\n  getValidChildren,\n  isValidElement,\n  pickObject,\n} from \"@yamada-ui/utils\"\nimport type {\n  DetailedHTMLProps,\n  FC,\n  OptionHTMLAttributes,\n  ReactElement,\n} from \"react\"\nimport { cloneElement } from \"react\"\n\ntype NativeSelectBaseItem = Omit<\n  DetailedHTMLProps<OptionHTMLAttributes<HTMLOptionElement>, HTMLOptionElement>,\n  \"label\" | \"children\" | \"value\"\n> & { label?: string }\n\ntype Value = DetailedHTMLProps<\n  OptionHTMLAttributes<HTMLOptionElement>,\n  HTMLOptionElement\n>[\"value\"]\n\ntype NativeSelectItemWithValue = NativeSelectBaseItem & { value?: Value }\n\ntype NativeSelectItemWithItems = NativeSelectBaseItem & {\n  items?: NativeSelectItemWithValue[]\n}\n\nexport type NativeSelectItem = NativeSelectItemWithValue &\n  NativeSelectItemWithItems\n\ntype NativeSelectContext = Record<string, CSSUIObject>\n\nconst [NativeSelectProvider, useNativeSelect] =\n  createContext<NativeSelectContext>({\n    name: \"NativeSelectContext\",\n    errorMessage: `useNativeSelect returned is 'undefined'. Seems you forgot to wrap the components in \"<NativeSelect />\"`,\n  })\n\ntype NativeSelectOptions = {\n  /**\n   * If provided, generate options based on items.\n   *\n   * @default '[]'\n   */\n  items?: NativeSelectItem[]\n  /**\n   * The placeholder for select.\n   */\n  placeholder?: string\n  /**\n   * If `true`, include placeholders in options.\n   *\n   * @default true\n   */\n  placeholderInOptions?: boolean\n  /**\n   * The border color when the input is focused.\n   */\n  focusBorderColor?: string\n  /**\n   * The border color when the input is invalid.\n   */\n  errorBorderColor?: string\n  /**\n   * Props for container element.\n   */\n  containerProps?: Omit<HTMLUIProps<\"div\">, \"children\">\n  /**\n   * Props for icon element.\n   */\n  iconProps?: HTMLUIProps<\"div\">\n}\n\nexport type NativeSelectProps = Omit<HTMLUIProps<\"select\">, \"size\"> &\n  ThemeProps<\"Select\"> &\n  NativeSelectOptions &\n  FormControlOptions\n\nexport const NativeSelect = forwardRef<NativeSelectProps, \"select\">(\n  (props, ref) => {\n    const [styles, mergedProps] = useMultiComponentStyle(\"NativeSelect\", props)\n    let {\n      className,\n      children,\n      placeholderInOptions = true,\n      color,\n      h,\n      height,\n      minH,\n      minHeight,\n      items = [],\n      placeholder,\n      containerProps,\n      iconProps,\n      ...rest\n    } = omitThemeProps(mergedProps)\n\n    rest = useFormControlProps(rest)\n\n    const formControlProps = pickObject(rest, formControlProperties)\n    const [layoutProps, selectProps] = splitObject(rest, layoutStylesProperties)\n\n    let computedChildren: ReactElement[] = []\n\n    if (!children && items.length) {\n      computedChildren = items\n        .map((item, i) => {\n          if (\"value\" in item) {\n            const { label, value, ...props } = item\n\n            return (\n              <NativeOption key={i} value={value} {...props}>\n                {label}\n              </NativeOption>\n            )\n          } else if (\"items\" in item) {\n            const { label, items = [], ...props } = item\n\n            return (\n              <NativeOptionGroup key={i} label={label} {...props}>\n                {items.map(({ label, value, ...props }, i) => (\n                  <NativeOption key={i} value={value} {...props}>\n                    {label}\n                  </NativeOption>\n                ))}\n              </NativeOptionGroup>\n            )\n          }\n        })\n        .filter(Boolean) as ReactElement[]\n    }\n\n    return (\n      <NativeSelectProvider value={styles}>\n        <ui.div\n          className=\"ui-select\"\n          __css={{\n            position: \"relative\",\n            w: \"100%\",\n            h: \"fit-content\",\n            color,\n            ...styles.container,\n          }}\n          {...layoutProps}\n          {...containerProps}\n          {...formControlProps}\n        >\n          <ui.select\n            ref={ref}\n            className={cx(\"ui-select__field\", className)}\n            __css={{\n              paddingEnd: \"2rem\",\n              h: h ?? height,\n              minH: minH ?? minHeight,\n              ...styles.field,\n            }}\n            {...selectProps}\n          >\n            {placeholder ? (\n              <NativeOption value=\"\" hidden={!placeholderInOptions}>\n                {placeholder}\n              </NativeOption>\n            ) : null}\n            {children ?? computedChildren}\n          </ui.select>\n\n          <NativeSelectIcon {...iconProps} {...formControlProps} />\n        </ui.div>\n      </NativeSelectProvider>\n    )\n  },\n)\n\ntype NativeSelectIconProps = HTMLUIProps<\"div\">\n\nconst NativeSelectIcon: FC<NativeSelectIconProps> = ({\n  className,\n  children,\n  ...rest\n}) => {\n  const styles = useNativeSelect()\n\n  const css: CSSUIObject = {\n    position: \"absolute\",\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    pointerEvents: \"none\",\n    top: \"50%\",\n    transform: \"translateY(-50%)\",\n    ...styles.icon,\n  }\n\n  const validChildren = getValidChildren(children)\n\n  const cloneChildren = validChildren.map((child) =>\n    cloneElement(child, {\n      focusable: false,\n      \"aria-hidden\": true,\n      style: {\n        width: \"1em\",\n        height: \"1em\",\n        color: \"currentColor\",\n      },\n    }),\n  )\n\n  return (\n    <ui.div className={cx(\"ui-select__icon\", className)} __css={css} {...rest}>\n      {isValidElement(children) ? cloneChildren : <ChevronIcon />}\n    </ui.div>\n  )\n}\n\nexport type NativeOptionGroupProps = HTMLUIProps<\"optgroup\">\n\nexport const NativeOptionGroup = forwardRef<NativeOptionGroupProps, \"optgroup\">(\n  (props, ref) => <ui.optgroup ref={ref} {...props} />,\n)\n\nexport type NativeOptionProps = Omit<HTMLUIProps<\"option\">, \"children\"> & {\n  children?: string\n}\n\nexport const NativeOption = forwardRef<NativeOptionProps, \"option\">(\n  (props, ref) => <ui.option ref={ref} {...props} />,\n)\n"],"mappings":"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","names":["props","items","label","i"]}

package/dist/native-select.mjs

@@ -3,9 +3,10 @@ import {
   NativeOption,
   NativeOptionGroup,
   NativeSelect
-} from "./chunk-BI72PIQG.mjs";
+} from "./chunk-4MNQL2UB.mjs";
 export {
   NativeOption,
   NativeOptionGroup,
   NativeSelect
 };
+//# sourceMappingURL=native-select.mjs.map

package/dist/native-select.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/native-select",
-  "version": "0.5.8",
+  "version": "0.5.9",
   "description": "Yamada UI native select component",
   "keywords": [
     "yamada",
@@ -35,10 +35,10 @@
     "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
   },
   "dependencies": {
-    "@yamada-ui/core": "0.14.0",
-    "@yamada-ui/utils": "0.4.1",
-    "@yamada-ui/form-control": "0.3.25",
-    "@yamada-ui/icon": "0.3.22"
+    "@yamada-ui/core": "0.14.1",
+    "@yamada-ui/utils": "0.5.0",
+    "@yamada-ui/form-control": "0.3.26",
+    "@yamada-ui/icon": "0.3.23"
   },
   "devDependencies": {
     "react": "^18.0.0",
@@ -57,7 +57,8 @@
     ],
     "banner": {
       "js": "\"use client\""
-    }
+    },
+    "sourcemap": true
   },
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",