npm - @zenkigen-inc/component-ui - Versions diffs - 1.16.2 → 1.16.3 - Mend

@zenkigen-inc/component-ui 1.16.2 → 1.16.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/index.d.mts CHANGED Viewed

@@ -6,8 +6,8 @@ import { iconColors, tagLightColors } from '@zenkigen-inc/component-theme';
 type Props$w = {
     size?: 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
     userId?: number;
-    firstName: string;
-    lastName: string;
+    firstName?: string;
+    lastName?: string;
     isDisabled?: boolean;
 };
 declare function Avatar({ size, ...props }: Props$w): react.JSX.Element;

package/dist/index.d.ts CHANGED Viewed

@@ -6,8 +6,8 @@ import { iconColors, tagLightColors } from '@zenkigen-inc/component-theme';
 type Props$w = {
     size?: 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
     userId?: number;
-    firstName: string;
-    lastName: string;
+    firstName?: string;
+    lastName?: string;
     isDisabled?: boolean;
 };
 declare function Avatar({ size, ...props }: Props$w): react.JSX.Element;

package/dist/index.js CHANGED Viewed

@@ -69,14 +69,41 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 // src/avatar/avatar.tsx
+var import_component_theme2 = require("@zenkigen-inc/component-theme");
+var import_clsx2 = require("clsx");
+// src/icon/icon.tsx
+var import_component_icons = require("@zenkigen-inc/component-icons");
 var import_component_theme = require("@zenkigen-inc/component-theme");
 var import_clsx = require("clsx");
 var import_jsx_runtime = require("react/jsx-runtime");
+var Icon = ({ size = "medium", isDisabled = false, ...props }) => {
+  const classes = (0, import_clsx.clsx)(
+    "inline-block shrink-0",
+    {
+      "fill-disabled01": isDisabled,
+      [import_component_theme.iconColors.icon01]: !isDisabled && props.color === "icon01",
+      [import_component_theme.iconColors.icon02]: !isDisabled && props.color === "icon02",
+      [import_component_theme.iconColors.icon03]: !isDisabled && props.color === "icon03",
+      [import_component_theme.iconColors.iconOnColor]: !isDisabled && props.color === "iconOnColor",
+      "w-3 h-3": size === "x-small",
+      "w-4 h-4": size === "small",
+      "w-6 h-6": size === "medium",
+      "w-8 h-8": size === "large",
+      "w-10 h-10": size === "x-large"
+    },
+    props.className
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: classes, children: import_component_icons.iconElements[props.name] });
+};
+// src/avatar/avatar.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var isAsciiString = (str) => {
   return str.charCodeAt(0) < 256;
 };
 function Avatar({ size = "medium", ...props }) {
-  const classes = (0, import_clsx.clsx)("flex items-center justify-center rounded-full text-textOnColor", {
+  const classes = (0, import_clsx2.clsx)("flex items-center justify-center rounded-full text-textOnColor", {
     "w-16 h-16 typography-label16regular": size === "x-large",
     "w-12 h-12 typography-label14regular": size === "large",
     "w-10 h-10 typography-label14regular": size === "medium",
@@ -84,31 +111,42 @@ function Avatar({ size = "medium", ...props }) {
     "w-6 h-6 typography-label11regular": size === "x-small",
     "bg-disabled01": props.isDisabled,
     "bg-icon01": props.userId == null,
-    [import_component_theme.userColors[(props.userId ?? 0) % import_component_theme.userColors.length]]: props.userId != null && !(props.isDisabled ?? false)
+    [import_component_theme2.userColors[(props.userId ?? 0) % import_component_theme2.userColors.length]]: props.userId != null && !(props.isDisabled ?? false)
   });
-  const trimmedFirstName = props.firstName.replace("\u3000", " ").trim();
-  const trimmedLastName = props.lastName.replace("\u3000", " ").trim().trim();
+  const hasName = props.firstName != null && props.firstName.trim() !== "" || props.lastName != null && props.lastName.trim() !== "";
+  if (hasName === false) {
+    const iconSizeMap = {
+      "x-small": "x-small",
+      small: "small",
+      medium: "medium",
+      large: "large",
+      "x-large": "x-large"
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: classes, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { name: "user-one", size: iconSizeMap[size], color: "iconOnColor" }) });
+  }
+  const trimmedFirstName = (props.firstName ?? "").replace("\u3000", " ").trim();
+  const trimmedLastName = (props.lastName ?? "").replace("\u3000", " ").trim();
   const nameOnIcon = isAsciiString(trimmedLastName) ? trimmedFirstName.slice(0, 1).toUpperCase() + trimmedLastName.slice(0, 1).toUpperCase() : (trimmedLastName + trimmedFirstName).slice(0, 2);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: classes, children: nameOnIcon });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: classes, children: nameOnIcon });
 }
 // src/breadcrumb/breadcrumb-item.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var BreadcrumbItem = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", { className: "flex gap-2 after:content-['/'] last:after:content-none [&_a]:text-interactive02 [&_a]:hover:underline", children });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "flex gap-2 after:content-['/'] last:after:content-none [&_a]:text-interactive02 [&_a]:hover:underline", children });
 };
 // src/breadcrumb/breadcrumb.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function Breadcrumb({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("nav", { "aria-label": "breadcrumb", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { className: "typography-label14regular flex flex-wrap gap-2 whitespace-nowrap text-text01", children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("nav", { "aria-label": "breadcrumb", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("ul", { className: "typography-label14regular flex flex-wrap gap-2 whitespace-nowrap text-text01", children }) });
 }
 Breadcrumb.Item = BreadcrumbItem;
 // src/button/button.tsx
-var import_component_theme2 = require("@zenkigen-inc/component-theme");
-var import_clsx2 = require("clsx");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_component_theme3 = require("@zenkigen-inc/component-theme");
+var import_clsx3 = require("clsx");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var Button = ({
   size = "medium",
   variant = "fill",
@@ -123,19 +161,19 @@ var Button = ({
   children,
   ...props
 }) => {
-  const baseClasses = (0, import_clsx2.clsx)(
+  const baseClasses = (0, import_clsx3.clsx)(
     "flex shrink-0 items-center gap-1",
-    import_component_theme2.buttonColors[variant].hover,
-    import_component_theme2.buttonColors[variant].active,
-    import_component_theme2.buttonColors[variant].disabled,
-    import_component_theme2.focusVisible.normal,
+    import_component_theme3.buttonColors[variant].hover,
+    import_component_theme3.buttonColors[variant].active,
+    import_component_theme3.buttonColors[variant].disabled,
+    import_component_theme3.focusVisible.normal,
     {
       "h-6 px-2.5": size === "small",
       "h-8 px-3": size === "medium",
       "h-10 px-4 leading-[24px]": size === "large",
       "inline-flex": elementAs === "a",
-      [import_component_theme2.buttonColors[variant].selected]: isSelected,
-      [import_component_theme2.buttonColors[variant].base]: !isSelected,
+      [import_component_theme3.buttonColors[variant].selected]: isSelected,
+      [import_component_theme3.buttonColors[variant].base]: !isSelected,
       "hover:text-textOnColor active:text-textOnColor [&:hover>*]:fill-iconOnColor [&:active>*]:fill-iconOnColor": isSelected && variant !== "outline" && variant !== "text",
       "pointer-events-none": isDisabled,
       "rounded-button": borderRadius == null,
@@ -146,7 +184,7 @@ var Button = ({
     }
   );
   const Component = elementAs ?? "button";
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Component, { className: baseClasses, style: { width, borderRadius }, disabled: isDisabled, ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Component, { className: baseClasses, style: { width, borderRadius }, disabled: isDisabled, ...props, children: [
     before,
     children,
     after
@@ -154,20 +192,20 @@ var Button = ({
 };
 // src/checkbox/checkbox.tsx
-var import_component_theme3 = require("@zenkigen-inc/component-theme");
-var import_clsx3 = __toESM(require("clsx"));
+var import_component_theme4 = require("@zenkigen-inc/component-theme");
+var import_clsx4 = __toESM(require("clsx"));
 var import_react = require("react");
 // src/checkbox/checked-icon.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var CheckedIcon = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "svg",
     {
       viewBox: "0 0 20 20",
       xmlns: "http://www.w3.org/2000/svg",
       className: "absolute z-10 size-5 rounded-sm fill-iconOnColor hover:rounded-sm",
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -180,21 +218,21 @@ var CheckedIcon = () => {
 };
 // src/checkbox/minus-icon.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var MinusIcon = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "svg",
     {
       viewBox: "0 0 20 20",
       xmlns: "http://www.w3.org/2000/svg",
       className: "absolute z-10 size-5 rounded-sm fill-iconOnColor hover:rounded-sm",
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M4.94723 10.5028H9.49726H10.5028H15.0528C15.3293 10.5028 15.5556 10.2766 15.5556 10C15.5556 9.72352 15.3293 9.49725 15.0528 9.49725H10.5028H9.49726H4.94723C4.67071 9.49725 4.44446 9.72352 4.44446 10C4.44446 10.2766 4.67071 10.5028 4.94723 10.5028Z" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M4.94723 10.5028H9.49726H10.5028H15.0528C15.3293 10.5028 15.5556 10.2766 15.5556 10C15.5556 9.72352 15.3293 9.49725 15.0528 9.49725H10.5028H9.49726H4.94723C4.67071 9.49725 4.44446 9.72352 4.44446 10C4.44446 10.2766 4.67071 10.5028 4.94723 10.5028Z" })
     }
   );
 };
 // src/checkbox/checkbox.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function Checkbox({
   name,
   value,
@@ -217,13 +255,13 @@ function Checkbox({
     (e) => !isDisabled && onChange?.(e),
     [isDisabled, onChange]
   );
-  const baseInputClasses = (0, import_clsx3.default)("peer absolute z-[1] size-5 opacity-0", {
+  const baseInputClasses = (0, import_clsx4.default)("peer absolute z-[1] size-5 opacity-0", {
     "cursor-not-allowed": isDisabled,
     "cursor-pointer": !isDisabled
   });
-  const boxClasses = (0, import_clsx3.default)(
+  const boxClasses = (0, import_clsx4.default)(
     "inline-flex size-5 items-center justify-center rounded-sm border bg-white",
-    import_component_theme3.focusVisible.normalPeer,
+    import_component_theme4.focusVisible.normalPeer,
     {
       "border-disabled01": isDisabled,
       "border-hoverUiBorder": !isDisabled && isMouseOver && color === "default",
@@ -233,11 +271,11 @@ function Checkbox({
       "border-supportError": !isDisabled && !isMouseOver && color === "error"
     }
   );
-  const indicatorClasses = (0, import_clsx3.default)("relative flex size-5 flex-[0_0_auto] items-center justify-center", {
+  const indicatorClasses = (0, import_clsx4.default)("relative flex size-5 flex-[0_0_auto] items-center justify-center", {
     "bg-disabled01": isDisabled && isChecked,
     "border-disabled01": isDisabled
   });
-  const afterClasses = (0, import_clsx3.default)("absolute inset-0 m-auto block rounded-sm", {
+  const afterClasses = (0, import_clsx4.default)("absolute inset-0 m-auto block rounded-sm", {
     "bg-disabled01": isDisabled && isChecked,
     "bg-hover01": !(isDisabled && isChecked) && isMouseOver,
     "bg-interactive01": !(isDisabled && isChecked) && !isMouseOver,
@@ -248,16 +286,16 @@ function Checkbox({
     "scale-0": !isChecked,
     "scale-100": isChecked
   });
-  const hoverIndicatorClasses = (0, import_clsx3.default)("inline-block size-3 rounded-[1px]", {
+  const hoverIndicatorClasses = (0, import_clsx4.default)("inline-block size-3 rounded-[1px]", {
     "bg-hoverUi": !isDisabled && !isChecked && isMouseOver
   });
-  const labelClasses = (0, import_clsx3.default)("typography-label14regular ml-2 flex-[1_0_0] break-all", {
+  const labelClasses = (0, import_clsx4.default)("typography-label14regular ml-2 flex-[1_0_0] break-all", {
     "pointer-events-none cursor-not-allowed text-disabled01": isDisabled,
     "cursor-pointer text-text01": !isDisabled
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative flex size-6 items-center justify-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative flex size-6 items-center justify-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "input",
         {
           type: "checkbox",
@@ -272,15 +310,15 @@ function Checkbox({
           className: baseInputClasses
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: boxClasses, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: indicatorClasses, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: afterClasses, children: [
-          isChecked && !isIndeterminate && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CheckedIcon, {}),
-          isIndeterminate && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MinusIcon, {})
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: boxClasses, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: indicatorClasses, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: afterClasses, children: [
+          isChecked && !isIndeterminate && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CheckedIcon, {}),
+          isIndeterminate && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MinusIcon, {})
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: hoverIndicatorClasses })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: hoverIndicatorClasses })
       ] }) })
     ] }),
-    label != null && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("label", { htmlFor: id, className: labelClasses, children: label })
+    label != null && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { htmlFor: id, className: labelClasses, children: label })
   ] });
 }
@@ -308,31 +346,6 @@ var useOutsideClick = (ref, handler, enabled = true) => {
   }, [ref, enabled, handler]);
 };
-// src/icon/icon.tsx
-var import_component_icons = require("@zenkigen-inc/component-icons");
-var import_component_theme4 = require("@zenkigen-inc/component-theme");
-var import_clsx4 = require("clsx");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var Icon = ({ size = "medium", isDisabled = false, ...props }) => {
-  const classes = (0, import_clsx4.clsx)(
-    "inline-block shrink-0",
-    {
-      "fill-disabled01": isDisabled,
-      [import_component_theme4.iconColors.icon01]: !isDisabled && props.color === "icon01",
-      [import_component_theme4.iconColors.icon02]: !isDisabled && props.color === "icon02",
-      [import_component_theme4.iconColors.icon03]: !isDisabled && props.color === "icon03",
-      [import_component_theme4.iconColors.iconOnColor]: !isDisabled && props.color === "iconOnColor",
-      "w-3 h-3": size === "x-small",
-      "w-4 h-4": size === "small",
-      "w-6 h-6": size === "medium",
-      "w-8 h-8": size === "large",
-      "w-10 h-10": size === "x-large"
-    },
-    props.className
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: classes, children: import_component_icons.iconElements[props.name] });
-};
 // src/dropdown/dropdown-context.ts
 var import_react3 = require("react");
 var DropdownContext = (0, import_react3.createContext)({
@@ -1176,7 +1189,7 @@ function PaginationSelect({
           children: optionsList.map((option) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Select.Option, { option }, option.id))
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "typography-label14regular text-text03", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "typography-label14regular text-text02", children: [
         "/ ",
         pageMax,
         pageLabel

package/dist/index.mjs CHANGED Viewed

@@ -1,12 +1,39 @@
 // src/avatar/avatar.tsx
 import { userColors } from "@zenkigen-inc/component-theme";
+import { clsx as clsx2 } from "clsx";
+// src/icon/icon.tsx
+import { iconElements } from "@zenkigen-inc/component-icons";
+import { iconColors } from "@zenkigen-inc/component-theme";
 import { clsx } from "clsx";
 import { jsx } from "react/jsx-runtime";
+var Icon = ({ size = "medium", isDisabled = false, ...props }) => {
+  const classes = clsx(
+    "inline-block shrink-0",
+    {
+      "fill-disabled01": isDisabled,
+      [iconColors.icon01]: !isDisabled && props.color === "icon01",
+      [iconColors.icon02]: !isDisabled && props.color === "icon02",
+      [iconColors.icon03]: !isDisabled && props.color === "icon03",
+      [iconColors.iconOnColor]: !isDisabled && props.color === "iconOnColor",
+      "w-3 h-3": size === "x-small",
+      "w-4 h-4": size === "small",
+      "w-6 h-6": size === "medium",
+      "w-8 h-8": size === "large",
+      "w-10 h-10": size === "x-large"
+    },
+    props.className
+  );
+  return /* @__PURE__ */ jsx("span", { className: classes, children: iconElements[props.name] });
+};
+// src/avatar/avatar.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
 var isAsciiString = (str) => {
   return str.charCodeAt(0) < 256;
 };
 function Avatar({ size = "medium", ...props }) {
-  const classes = clsx("flex items-center justify-center rounded-full text-textOnColor", {
+  const classes = clsx2("flex items-center justify-center rounded-full text-textOnColor", {
     "w-16 h-16 typography-label16regular": size === "x-large",
     "w-12 h-12 typography-label14regular": size === "large",
     "w-10 h-10 typography-label14regular": size === "medium",
@@ -16,28 +43,39 @@ function Avatar({ size = "medium", ...props }) {
     "bg-icon01": props.userId == null,
     [userColors[(props.userId ?? 0) % userColors.length]]: props.userId != null && !(props.isDisabled ?? false)
   });
-  const trimmedFirstName = props.firstName.replace("\u3000", " ").trim();
-  const trimmedLastName = props.lastName.replace("\u3000", " ").trim().trim();
+  const hasName = props.firstName != null && props.firstName.trim() !== "" || props.lastName != null && props.lastName.trim() !== "";
+  if (hasName === false) {
+    const iconSizeMap = {
+      "x-small": "x-small",
+      small: "small",
+      medium: "medium",
+      large: "large",
+      "x-large": "x-large"
+    };
+    return /* @__PURE__ */ jsx2("span", { className: classes, children: /* @__PURE__ */ jsx2(Icon, { name: "user-one", size: iconSizeMap[size], color: "iconOnColor" }) });
+  }
+  const trimmedFirstName = (props.firstName ?? "").replace("\u3000", " ").trim();
+  const trimmedLastName = (props.lastName ?? "").replace("\u3000", " ").trim();
   const nameOnIcon = isAsciiString(trimmedLastName) ? trimmedFirstName.slice(0, 1).toUpperCase() + trimmedLastName.slice(0, 1).toUpperCase() : (trimmedLastName + trimmedFirstName).slice(0, 2);
-  return /* @__PURE__ */ jsx("span", { className: classes, children: nameOnIcon });
+  return /* @__PURE__ */ jsx2("span", { className: classes, children: nameOnIcon });
 }
 // src/breadcrumb/breadcrumb-item.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 var BreadcrumbItem = ({ children }) => {
-  return /* @__PURE__ */ jsx2("li", { className: "flex gap-2 after:content-['/'] last:after:content-none [&_a]:text-interactive02 [&_a]:hover:underline", children });
+  return /* @__PURE__ */ jsx3("li", { className: "flex gap-2 after:content-['/'] last:after:content-none [&_a]:text-interactive02 [&_a]:hover:underline", children });
 };
 // src/breadcrumb/breadcrumb.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function Breadcrumb({ children }) {
-  return /* @__PURE__ */ jsx3("nav", { "aria-label": "breadcrumb", children: /* @__PURE__ */ jsx3("ul", { className: "typography-label14regular flex flex-wrap gap-2 whitespace-nowrap text-text01", children }) });
+  return /* @__PURE__ */ jsx4("nav", { "aria-label": "breadcrumb", children: /* @__PURE__ */ jsx4("ul", { className: "typography-label14regular flex flex-wrap gap-2 whitespace-nowrap text-text01", children }) });
 }
 Breadcrumb.Item = BreadcrumbItem;
 // src/button/button.tsx
 import { buttonColors, focusVisible } from "@zenkigen-inc/component-theme";
-import { clsx as clsx2 } from "clsx";
+import { clsx as clsx3 } from "clsx";
 import { jsxs } from "react/jsx-runtime";
 var Button = ({
   size = "medium",
@@ -53,7 +91,7 @@ var Button = ({
   children,
   ...props
 }) => {
-  const baseClasses = clsx2(
+  const baseClasses = clsx3(
     "flex shrink-0 items-center gap-1",
     buttonColors[variant].hover,
     buttonColors[variant].active,
@@ -85,19 +123,19 @@ var Button = ({
 // src/checkbox/checkbox.tsx
 import { focusVisible as focusVisible2 } from "@zenkigen-inc/component-theme";
-import clsx3 from "clsx";
+import clsx4 from "clsx";
 import { useCallback, useState } from "react";
 // src/checkbox/checked-icon.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var CheckedIcon = () => {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     "svg",
     {
       viewBox: "0 0 20 20",
       xmlns: "http://www.w3.org/2000/svg",
       className: "absolute z-10 size-5 rounded-sm fill-iconOnColor hover:rounded-sm",
-      children: /* @__PURE__ */ jsx4(
+      children: /* @__PURE__ */ jsx5(
         "path",
         {
           fillRule: "evenodd",
@@ -110,21 +148,21 @@ var CheckedIcon = () => {
 };
 // src/checkbox/minus-icon.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var MinusIcon = () => {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "svg",
     {
       viewBox: "0 0 20 20",
       xmlns: "http://www.w3.org/2000/svg",
       className: "absolute z-10 size-5 rounded-sm fill-iconOnColor hover:rounded-sm",
-      children: /* @__PURE__ */ jsx5("path", { d: "M4.94723 10.5028H9.49726H10.5028H15.0528C15.3293 10.5028 15.5556 10.2766 15.5556 10C15.5556 9.72352 15.3293 9.49725 15.0528 9.49725H10.5028H9.49726H4.94723C4.67071 9.49725 4.44446 9.72352 4.44446 10C4.44446 10.2766 4.67071 10.5028 4.94723 10.5028Z" })
+      children: /* @__PURE__ */ jsx6("path", { d: "M4.94723 10.5028H9.49726H10.5028H15.0528C15.3293 10.5028 15.5556 10.2766 15.5556 10C15.5556 9.72352 15.3293 9.49725 15.0528 9.49725H10.5028H9.49726H4.94723C4.67071 9.49725 4.44446 9.72352 4.44446 10C4.44446 10.2766 4.67071 10.5028 4.94723 10.5028Z" })
     }
   );
 };
 // src/checkbox/checkbox.tsx
-import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
 function Checkbox({
   name,
   value,
@@ -147,11 +185,11 @@ function Checkbox({
     (e) => !isDisabled && onChange?.(e),
     [isDisabled, onChange]
   );
-  const baseInputClasses = clsx3("peer absolute z-[1] size-5 opacity-0", {
+  const baseInputClasses = clsx4("peer absolute z-[1] size-5 opacity-0", {
     "cursor-not-allowed": isDisabled,
     "cursor-pointer": !isDisabled
   });
-  const boxClasses = clsx3(
+  const boxClasses = clsx4(
     "inline-flex size-5 items-center justify-center rounded-sm border bg-white",
     focusVisible2.normalPeer,
     {
@@ -163,11 +201,11 @@ function Checkbox({
       "border-supportError": !isDisabled && !isMouseOver && color === "error"
     }
   );
-  const indicatorClasses = clsx3("relative flex size-5 flex-[0_0_auto] items-center justify-center", {
+  const indicatorClasses = clsx4("relative flex size-5 flex-[0_0_auto] items-center justify-center", {
     "bg-disabled01": isDisabled && isChecked,
     "border-disabled01": isDisabled
   });
-  const afterClasses = clsx3("absolute inset-0 m-auto block rounded-sm", {
+  const afterClasses = clsx4("absolute inset-0 m-auto block rounded-sm", {
     "bg-disabled01": isDisabled && isChecked,
     "bg-hover01": !(isDisabled && isChecked) && isMouseOver,
     "bg-interactive01": !(isDisabled && isChecked) && !isMouseOver,
@@ -178,16 +216,16 @@ function Checkbox({
     "scale-0": !isChecked,
     "scale-100": isChecked
   });
-  const hoverIndicatorClasses = clsx3("inline-block size-3 rounded-[1px]", {
+  const hoverIndicatorClasses = clsx4("inline-block size-3 rounded-[1px]", {
     "bg-hoverUi": !isDisabled && !isChecked && isMouseOver
   });
-  const labelClasses = clsx3("typography-label14regular ml-2 flex-[1_0_0] break-all", {
+  const labelClasses = clsx4("typography-label14regular ml-2 flex-[1_0_0] break-all", {
     "pointer-events-none cursor-not-allowed text-disabled01": isDisabled,
     "cursor-pointer text-text01": !isDisabled
   });
   return /* @__PURE__ */ jsxs2("div", { className: "flex items-center", children: [
     /* @__PURE__ */ jsxs2("div", { className: "relative flex size-6 items-center justify-center", children: [
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx7(
         "input",
         {
           type: "checkbox",
@@ -202,15 +240,15 @@ function Checkbox({
           className: baseInputClasses
         }
       ),
-      /* @__PURE__ */ jsx6("div", { className: boxClasses, children: /* @__PURE__ */ jsxs2("div", { className: indicatorClasses, children: [
+      /* @__PURE__ */ jsx7("div", { className: boxClasses, children: /* @__PURE__ */ jsxs2("div", { className: indicatorClasses, children: [
         /* @__PURE__ */ jsxs2("span", { className: afterClasses, children: [
-          isChecked && !isIndeterminate && /* @__PURE__ */ jsx6(CheckedIcon, {}),
-          isIndeterminate && /* @__PURE__ */ jsx6(MinusIcon, {})
+          isChecked && !isIndeterminate && /* @__PURE__ */ jsx7(CheckedIcon, {}),
+          isIndeterminate && /* @__PURE__ */ jsx7(MinusIcon, {})
         ] }),
-        /* @__PURE__ */ jsx6("span", { className: hoverIndicatorClasses })
+        /* @__PURE__ */ jsx7("span", { className: hoverIndicatorClasses })
       ] }) })
     ] }),
-    label != null && /* @__PURE__ */ jsx6("label", { htmlFor: id, className: labelClasses, children: label })
+    label != null && /* @__PURE__ */ jsx7("label", { htmlFor: id, className: labelClasses, children: label })
   ] });
 }
@@ -238,31 +276,6 @@ var useOutsideClick = (ref, handler, enabled = true) => {
   }, [ref, enabled, handler]);
 };
-// src/icon/icon.tsx
-import { iconElements } from "@zenkigen-inc/component-icons";
-import { iconColors } from "@zenkigen-inc/component-theme";
-import { clsx as clsx4 } from "clsx";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var Icon = ({ size = "medium", isDisabled = false, ...props }) => {
-  const classes = clsx4(
-    "inline-block shrink-0",
-    {
-      "fill-disabled01": isDisabled,
-      [iconColors.icon01]: !isDisabled && props.color === "icon01",
-      [iconColors.icon02]: !isDisabled && props.color === "icon02",
-      [iconColors.icon03]: !isDisabled && props.color === "icon03",
-      [iconColors.iconOnColor]: !isDisabled && props.color === "iconOnColor",
-      "w-3 h-3": size === "x-small",
-      "w-4 h-4": size === "small",
-      "w-6 h-6": size === "medium",
-      "w-8 h-8": size === "large",
-      "w-10 h-10": size === "x-large"
-    },
-    props.className
-  );
-  return /* @__PURE__ */ jsx7("span", { className: classes, children: iconElements[props.name] });
-};
 // src/dropdown/dropdown-context.ts
 import { createContext } from "react";
 var DropdownContext = createContext({
@@ -1106,7 +1119,7 @@ function PaginationSelect({
           children: optionsList.map((option) => /* @__PURE__ */ jsx24(Select.Option, { option }, option.id))
         }
       ),
-      /* @__PURE__ */ jsxs13("div", { className: "typography-label14regular text-text03", children: [
+      /* @__PURE__ */ jsxs13("div", { className: "typography-label14regular text-text02", children: [
         "/ ",
         pageMax,
         pageLabel

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@zenkigen-inc/component-ui",
-  "version": "1.16.2",
+  "version": "1.16.3",
   "repository": "https://github.com/zenkigen/zenkigen-component",
   "license": "MIT",
   "publishConfig": {
@@ -37,8 +37,8 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@zenkigen-inc/component-icons": "1.16.2",
-    "@zenkigen-inc/component-theme": "1.16.2",
+    "@zenkigen-inc/component-icons": "1.16.3",
+    "@zenkigen-inc/component-theme": "1.16.3",
     "clsx": "2.1.1"
   }
 }