@zenkigen-inc/component-ui 1.9.3 → 1.9.5

package/dist/breadcrumb/breadcrumb-item.d.ts

@@ -1,2 +1,2 @@
-import { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 export declare const BreadcrumbItem: ({ children }: PropsWithChildren) => import("react").JSX.Element;

package/dist/breadcrumb/breadcrumb.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 export declare function Breadcrumb({ children }: PropsWithChildren): import("react").JSX.Element;
 export declare namespace Breadcrumb {
     var Item: ({ children }: {

package/dist/button/button.d.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef, CSSProperties, ElementType, PropsWithChildren, ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, CSSProperties, ElementType, PropsWithChildren, ReactNode } from 'react';
 type Size = 'small' | 'medium' | 'large';
 type Variant = 'fill' | 'fillDanger' | 'outline' | 'text';
 export type ElementAs = ElementType;

package/dist/checkbox/checkbox.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEvent } from 'react';
+import type { ChangeEvent } from 'react';
 type Props = {
     name?: string;
     value?: string;

package/dist/dropdown/dropdown-context.d.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject } from 'react';
+import type { MutableRefObject } from 'react';
 type UseDropdownReturnType = {
     isVisible: boolean;
     setIsVisible: React.Dispatch<React.SetStateAction<boolean>>;

package/dist/dropdown/dropdown-item.d.ts

@@ -1,4 +1,4 @@
-import { MouseEvent, PropsWithChildren } from 'react';
+import type { MouseEvent, PropsWithChildren } from 'react';
 type Props = {
     color?: 'gray' | 'red';
     onClick?: (event: MouseEvent<HTMLButtonElement>) => void;

package/dist/dropdown/dropdown-menu.d.ts

@@ -1,5 +1,5 @@
-import { CSSProperties, PropsWithChildren } from 'react';
-import { DropdownHorizontalAlign, DropdownVerticalPosition } from './type';
+import type { CSSProperties, PropsWithChildren } from 'react';
+import type { DropdownHorizontalAlign, DropdownVerticalPosition } from './type';
 type Props = {
     maxHeight?: CSSProperties['height'];
     isNoPadding?: boolean;

package/dist/dropdown/dropdown.d.ts

@@ -1,5 +1,5 @@
-import { IconName } from '@zenkigen-inc/component-icons';
-import { MutableRefObject, PropsWithChildren, ReactElement } from 'react';
+import type { IconName } from '@zenkigen-inc/component-icons';
+import type { MutableRefObject, PropsWithChildren, ReactElement } from 'react';
 import { DropdownItem } from './dropdown-item';
 import { DropdownMenu } from './dropdown-menu';
 type Props = {

package/dist/dropdown/type.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 export type DropdownItemType = {
     id: string;
     content: ReactNode;

package/dist/heading/heading.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 type Level = 1 | 2 | 3 | 4 | 5;
 type Props = {
     level: Level;

package/dist/hooks/use-outside-click.d.ts

@@ -1,2 +1,2 @@
-import { RefObject } from 'react';
+import type { RefObject } from 'react';
 export declare const useOutsideClick: <T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: (event: Event) => void, enabled?: boolean) => void;

package/dist/icon/icon.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { IconName } from '@zenkigen-inc/component-icons';
+import type { IconName } from '@zenkigen-inc/component-icons';
 import { iconColors } from '@zenkigen-inc/component-theme';
 type Size = 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
 type Color = keyof typeof iconColors;
@@ -9,5 +9,5 @@ type Props = {
     color?: Color;
     isDisabled?: boolean;
 };
-export declare const Icon: ({ size, ...props }: Props) => import("react").JSX.Element;
+export declare const Icon: ({ size, isDisabled, ...props }: Props) => import("react").JSX.Element;
 export {};

package/dist/icon-button/icon-button.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { IconName } from '@zenkigen-inc/component-icons';
+import type { IconName } from '@zenkigen-inc/component-icons';
 type Size = 'small' | 'medium' | 'large';
 type Variant = 'outline' | 'text';
 type Props = {
@@ -16,5 +16,5 @@ type Props = {
     isAnchor?: false;
     onClick?: () => void;
 });
-export declare function IconButton({ size, variant, ...props }: Props): import("react").JSX.Element;
+export declare function IconButton({ size, variant, isNoPadding, isDisabled, ...props }: Props): import("react").JSX.Element;
 export {};

package/dist/index.esm.js

@@ -31,15 +31,15 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-var _excluded$7 = ["size"];
+var _excluded$8 = ["size"];
 var isAsciiString = function isAsciiString(str) {
   return str.charCodeAt(0) < 256;
 };
 function Avatar(_ref) {
-  var _props$userId, _clsx;
+  var _props$userId, _props$isDisabled, _clsx;
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   var classes = clsx('flex items-center justify-center rounded-full text-textOnColor', (_clsx = {
     'w-16 h-16 typography-label1regular': size === 'x-large',
     'w-12 h-12 typography-label2regular': size === 'large',
@@ -47,8 +47,8 @@ function Avatar(_ref) {
     'w-8 h-8 typography-label4regular': size === 'small',
     'w-6 h-6 typography-label4regular': size === 'x-small',
     'bg-disabled01': props.isDisabled,
-    'bg-icon01': !props.userId
-  }, _clsx[userColors[((_props$userId = props.userId) != null ? _props$userId : 0) % userColors.length]] = props.userId && !props.isDisabled, _clsx));
+    'bg-icon01': props.userId == null
+  }, _clsx[userColors[((_props$userId = props.userId) != null ? _props$userId : 0) % userColors.length]] = props.userId != null && !((_props$isDisabled = props.isDisabled) != null ? _props$isDisabled : false), _clsx));
   var trimmedFirstName = props.firstName.replace('　', ' ').trim();
   var trimmedLastName = props.lastName.replace('　', ' ').trim().trim();
   var nameOnIcon = isAsciiString(trimmedLastName) ? trimmedFirstName.slice(0, 1).toUpperCase() + trimmedLastName.slice(0, 1).toUpperCase() : (trimmedLastName + trimmedFirstName).slice(0, 2);
@@ -78,7 +78,7 @@ function Breadcrumb(_ref) {
 }
 Breadcrumb.Item = BreadcrumbItem;
 
-var _excluded$6 = ["size", "variant", "isDisabled", "isSelected", "width", "borderRadius", "before", "after", "elementAs", "children"];
+var _excluded$7 = ["size", "variant", "isDisabled", "isSelected", "width", "borderRadius", "before", "after", "elementAs", "children"];
 var Button = function Button(_ref) {
   var _clsx;
   var _ref$size = _ref.size,
@@ -86,21 +86,22 @@ var Button = function Button(_ref) {
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'fill' : _ref$variant,
     isDisabled = _ref.isDisabled,
-    isSelected = _ref.isSelected,
+    _ref$isSelected = _ref.isSelected,
+    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
     width = _ref.width,
     borderRadius = _ref.borderRadius,
     before = _ref.before,
     after = _ref.after,
     elementAs = _ref.elementAs,
     children = _ref.children,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
   var baseClasses = clsx('flex shrink-0 items-center justify-center gap-1', buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, focusVisible.normal, (_clsx = {
     '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'
-  }, _clsx[buttonColors[variant].selected] = isSelected, _clsx[buttonColors[variant].base] = !isSelected, _clsx['hover:text-textOnColor active:text-textOnColor [&:hover>*]:fill-iconOnColor [&:active>*]:fill-iconOnColor'] = props.isSelected && variant !== 'outline' && variant !== 'text', _clsx['pointer-events-none'] = isDisabled, _clsx['rounded-button'] = !borderRadius, _clsx['typography-label1regular'] = size === 'large', _clsx['typography-label2regular'] = size !== 'large', _clsx));
-  var Component = elementAs || 'button';
+  }, _clsx[buttonColors[variant].selected] = isSelected, _clsx[buttonColors[variant].base] = !isSelected, _clsx['hover:text-textOnColor active:text-textOnColor [&:hover>*]:fill-iconOnColor [&:active>*]:fill-iconOnColor'] = isSelected && variant !== 'outline' && variant !== 'text', _clsx['pointer-events-none'] = isDisabled, _clsx['rounded-button'] = borderRadius == null, _clsx['typography-label1regular'] = size === 'large', _clsx['typography-label2regular'] = size !== 'large', _clsx));
+  var Component = elementAs != null ? elementAs : 'button';
   return /*#__PURE__*/jsxs(Component, _extends({
     className: baseClasses,
     style: {
@@ -31096,8 +31097,9 @@ var useOutsideClick = function useOutsideClick(ref, handler, enabled) {
   }
   useEffect(function () {
     var listener = function listener(event) {
+      var _event$target;
       var element = ref == null ? void 0 : ref.current;
-      if (!element || element.contains((event == null ? void 0 : event.target) || null)) {
+      if (element == null || Boolean(element.contains((_event$target = event == null ? void 0 : event.target) != null ? _event$target : null))) {
         return;
       }
       handler(event);
@@ -31111,15 +31113,17 @@ var useOutsideClick = function useOutsideClick(ref, handler, enabled) {
   }, [ref, enabled, handler]);
 };
 
-var _excluded$5 = ["size"];
+var _excluded$6 = ["size", "isDisabled"];
 var Icon = function Icon(_ref) {
   var _clsx;
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   var classes = clsx('inline-block shrink-0', (_clsx = {
-    'fill-disabled01': props.isDisabled
-  }, _clsx[iconColors.icon01] = !props.isDisabled && props.color === 'icon01', _clsx[iconColors.icon01Dark] = !props.isDisabled && props.color === 'icon01Dark', _clsx[iconColors.icon02] = !props.isDisabled && props.color === 'icon02', _clsx[iconColors.icon02Dark] = !props.isDisabled && props.color === 'icon02Dark', _clsx[iconColors.icon03] = !props.isDisabled && props.color === 'icon03', _clsx[iconColors.icon03Dark] = !props.isDisabled && props.color === 'icon03Dark', _clsx[iconColors.iconOnColor] = !props.isDisabled && props.color === 'iconOnColor', _clsx['w-3 h-3'] = size === 'x-small', _clsx['w-4 h-4'] = size === 'small', _clsx['w-6 h-6'] = size === 'medium', _clsx['w-8 h-8'] = size === 'large', _clsx['w-10 h-10'] = size === 'x-large', _clsx));
+    'fill-disabled01': isDisabled
+  }, _clsx[iconColors.icon01] = !isDisabled && props.color === 'icon01', _clsx[iconColors.icon01Dark] = !isDisabled && props.color === 'icon01Dark', _clsx[iconColors.icon02] = !isDisabled && props.color === 'icon02', _clsx[iconColors.icon02Dark] = !isDisabled && props.color === 'icon02Dark', _clsx[iconColors.icon03] = !isDisabled && props.color === 'icon03', _clsx[iconColors.icon03Dark] = !isDisabled && props.color === 'icon03Dark', _clsx[iconColors.iconOnColor] = !isDisabled && props.color === 'iconOnColor', _clsx['w-3 h-3'] = size === 'x-small', _clsx['w-4 h-4'] = size === 'small', _clsx['w-6 h-6'] = size === 'medium', _clsx['w-8 h-8'] = size === 'large', _clsx['w-10 h-10'] = size === 'x-large', _clsx));
   return /*#__PURE__*/jsx("span", {
     className: classes,
     children: iconElements[props.name]
@@ -31168,7 +31172,8 @@ function DropdownItem(_ref) {
 function DropdownMenu(_ref) {
   var children = _ref.children,
     maxHeight = _ref.maxHeight,
-    isNoPadding = _ref.isNoPadding,
+    _ref$isNoPadding = _ref.isNoPadding,
+    isNoPadding = _ref$isNoPadding === void 0 ? false : _ref$isNoPadding,
     _ref$verticalPosition = _ref.verticalPosition,
     verticalPosition = _ref$verticalPosition === void 0 ? 'bottom' : _ref$verticalPosition,
     _ref$horizontalAlign = _ref.horizontalAlign,
@@ -31309,7 +31314,7 @@ function Dropdown(_ref) {
             size: "small"
           })
         })]
-      }), !portalTargetRef ? children : portalTargetRef && portalTargetRef.current && /*#__PURE__*/reactDom.createPortal(children, portalTargetRef.current)]
+      }), !portalTargetRef ? children : portalTargetRef != null && portalTargetRef.current && /*#__PURE__*/reactDom.createPortal(children, portalTargetRef.current)]
     })
   });
 }
@@ -31373,23 +31378,27 @@ function Heading(props) {
   });
 }
 
-var _excluded$4 = ["size", "variant"];
+var _excluded$5 = ["size", "variant", "isNoPadding", "isDisabled"];
 function IconButton(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'outline' : _ref$variant,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+    _ref$isNoPadding = _ref.isNoPadding,
+    isNoPadding = _ref$isNoPadding === void 0 ? false : _ref$isNoPadding,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   var baseClasses = clsx('typography-label1regular flex items-center justify-center gap-1 rounded', buttonColors[variant].base, buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, focusVisible.normal, {
-    'h-4 w-4': size === 'small' && props.isNoPadding,
-    'h-6 w-6': size === 'small' && !props.isNoPadding || (size === 'medium' || size === 'large') && props.isNoPadding,
-    'h-8 w-8': size === 'medium' && !props.isNoPadding,
-    'h-10 w-10': size === 'large' && !props.isNoPadding,
+    'h-4 w-4': size === 'small' && isNoPadding,
+    'h-6 w-6': size === 'small' && !isNoPadding || (size === 'medium' || size === 'large') && isNoPadding,
+    'h-8 w-8': size === 'medium' && !isNoPadding,
+    'h-10 w-10': size === 'large' && !isNoPadding,
     'inline-flex': props.isAnchor,
-    'pointer-events-none': props.isDisabled
+    'pointer-events-none': isDisabled
   });
   var iconSize = size === 'small' ? 'small' : 'medium';
-  if (props.isAnchor) {
+  if (props.isAnchor === true) {
     return /*#__PURE__*/jsx("a", {
       className: baseClasses,
       href: props.href,
@@ -31403,7 +31412,7 @@ function IconButton(_ref) {
     return /*#__PURE__*/jsx("button", {
       type: "button",
       className: baseClasses,
-      disabled: props.isDisabled,
+      disabled: isDisabled,
       onClick: props.onClick,
       children: /*#__PURE__*/jsx(Icon, {
         name: props.icon,
@@ -31495,7 +31504,8 @@ var ModalContext = /*#__PURE__*/createContext({
 
 function ModalFooter(_ref) {
   var children = _ref.children,
-    isNoBorder = _ref.isNoBorder;
+    _ref$isNoBorder = _ref.isNoBorder,
+    isNoBorder = _ref$isNoBorder === void 0 ? false : _ref$isNoBorder;
   var wrapperClasses = clsx$1('flex w-full shrink-0 items-center rounded-b-lg px-6 py-4', {
     'border-t-[1px] border-uiBorder01': !isNoBorder
   });
@@ -31507,7 +31517,8 @@ function ModalFooter(_ref) {
 
 function ModalHeader(_ref) {
   var children = _ref.children,
-    isNoBorder = _ref.isNoBorder;
+    _ref$isNoBorder = _ref.isNoBorder,
+    isNoBorder = _ref$isNoBorder === void 0 ? false : _ref$isNoBorder;
   var _useContext = useContext(ModalContext),
     onClose = _useContext.onClose;
   var headerClasses = clsx$1('typography-h5 flex w-full shrink-0 items-center justify-between rounded-t-lg px-6 text-text01', {
@@ -31567,13 +31578,13 @@ Modal.Body = ModalBody;
 Modal.Header = ModalHeader;
 Modal.Footer = ModalFooter;
 
-var _excluded$3 = ["state", "size"];
+var _excluded$4 = ["state", "size"];
 function NotificationInline(_ref) {
   var _ref$state = _ref.state,
     state = _ref$state === void 0 ? 'default' : _ref$state,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   var wrapperClasses = clsx('typography-body2regular flex items-center gap-1 rounded text-text01', {
     'bg-uiBackgroundError': state === 'attention',
     'bg-uiBackgroundWarning': state === 'warning',
@@ -31610,7 +31621,7 @@ function NotificationInline(_ref) {
     }), /*#__PURE__*/jsx("p", {
       className: "flex-1",
       children: props.children
-    }), props.showClose && /*#__PURE__*/jsx("div", {
+    }), props.showClose === true && /*#__PURE__*/jsx("div", {
       className: "flex items-center",
       children: /*#__PURE__*/jsx(IconButton, {
         icon: "close",
@@ -31787,11 +31798,12 @@ function SelectList$1(_ref) {
     setIsOptionListOpen(false);
   };
   useLayoutEffect(function () {
-    if (maxHeight && ref.current) {
-      var element = Array.from(ref.current.children || []).find(function (item) {
+    if (maxHeight != null && ref.current) {
+      var _ref$current$children;
+      var element = Array.from((_ref$current$children = ref.current.children) != null ? _ref$current$children : []).find(function (item) {
         return item.getAttribute('data-id') === (selectedOption == null ? void 0 : selectedOption.id);
       });
-      if (element && ref.current.scroll) {
+      if (element != null && ref.current.scroll != null) {
         var wrapRect = ref.current.getBoundingClientRect();
         var rect = element.getBoundingClientRect();
         ref.current.scroll(0, rect.top - wrapRect.top - wrapRect.height / 2 + rect.height / 2);
@@ -31812,7 +31824,7 @@ function SelectList$1(_ref) {
       maxHeight: maxHeight
     },
     ref: ref,
-    children: [children, placeholder && selectedOption !== null && /*#__PURE__*/jsx("li", {
+    children: [children, placeholder != null && selectedOption !== null && /*#__PURE__*/jsx("li", {
       children: /*#__PURE__*/jsx("button", {
         className: deselectButtonClasses,
         type: "button",
@@ -31850,7 +31862,7 @@ function Select(_ref) {
       return !prev;
     });
   };
-  var wrapperClasses = clsx$1('relative flex shrink-0 items-center gap-1 rounded', {
+  var wrapperClasses = clsx$1('relative flex shrink-0 items-center gap-1 rounded bg-uiBackground01', {
     'h-6': size === 'x-small' || size === 'small',
     'h-8': size === 'medium',
     'h-10': size === 'large',
@@ -31894,7 +31906,7 @@ function Select(_ref) {
             name: selectedOption.icon,
             size: size === 'large' ? 'medium' : 'small'
           })
-        }) : placeholder && placeholderIcon && /*#__PURE__*/jsx("div", {
+        }) : placeholder != null && placeholderIcon && /*#__PURE__*/jsx("div", {
           className: "mr-1 flex",
           children: /*#__PURE__*/jsx(Icon, {
             name: placeholderIcon,
@@ -31904,7 +31916,7 @@ function Select(_ref) {
           className: labelClasses,
           children: /*#__PURE__*/jsx("div", {
             className: "truncate",
-            children: selectedOption ? selectedOption.label : placeholder && placeholder
+            children: selectedOption ? selectedOption.label : placeholder != null && placeholder
           })
         }), /*#__PURE__*/jsx("div", {
           className: "ml-auto flex items-center",
@@ -31944,6 +31956,8 @@ function PaginationSelect(_ref) {
       label: value
     };
   });
+  var minCount = totalSize ? (currentPage - 1) * sizePerPage + 1 : 0;
+  var maxCount = currentPage * sizePerPage > totalSize ? totalSize : currentPage * sizePerPage;
   return /*#__PURE__*/jsxs("nav", {
     "aria-label": "pagination",
     className: "flex items-center gap-x-1",
@@ -31951,7 +31965,7 @@ function PaginationSelect(_ref) {
       className: "flex items-center gap-x-2",
       children: [/*#__PURE__*/jsxs("div", {
         className: "typography-label2regular text-text01",
-        children: [(currentPage - 1) * sizePerPage + 1, " -", ' ', currentPage * sizePerPage > totalSize ? totalSize : currentPage * sizePerPage, countLabel]
+        children: [minCount > 0 && minCount + " - ", maxCount, countLabel]
       }), /*#__PURE__*/jsx(Select, {
         size: "medium",
         variant: "outline",
@@ -31962,7 +31976,8 @@ function PaginationSelect(_ref) {
         onChange: function onChange(option) {
           return option && _onChange(Number(option.value));
         },
-        children: optionsList && optionsList.map(function (option) {
+        isDisabled: pageMax === 0,
+        children: optionsList.map(function (option) {
           return /*#__PURE__*/jsx(Select.Option, {
             option: option
           }, option.id);
@@ -31983,7 +31998,7 @@ function PaginationSelect(_ref) {
         variant: "text",
         icon: "angle-right",
         size: "small",
-        isDisabled: currentPage === pageMax,
+        isDisabled: currentPage === pageMax || pageMax === 0,
         onClick: onClickNextButton
       })]
     })]
@@ -32070,14 +32085,14 @@ function Radio(_ref) {
   });
 }
 
-var _excluded$2 = ["width", "size"];
+var _excluded$3 = ["width", "size"];
 var Search = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _clsx;
   var _ref$width = _ref.width,
     width = _ref$width === void 0 ? '100%' : _ref$width,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
   var classes = clsx('flex items-center rounded-full border border-uiBorder02 focus-within:border-activeInput', {
     'h-8 px-3': size === 'medium'
   }, {
@@ -32195,7 +32210,8 @@ function SelectSort(_ref) {
     sortOrder = _ref.sortOrder,
     _ref$isDisabled = _ref.isDisabled,
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-    isSortKey = _ref.isSortKey,
+    _ref$isSortKey = _ref.isSortKey,
+    isSortKey = _ref$isSortKey === void 0 ? false : _ref$isSortKey,
     onChange = _ref.onChange,
     onClickDeselect = _ref.onClickDeselect;
   var _useState = useState(false),
@@ -32262,17 +32278,21 @@ function SelectSort(_ref) {
   });
 }
 
-var TabItem = function TabItem(props) {
+var _excluded$2 = ["isSelected"];
+var TabItem = function TabItem(_ref) {
+  var _ref$isSelected = _ref.isSelected,
+    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   var classes = clsx('relative z-0 flex py-2 leading-[24px] before:absolute before:inset-x-0 before:bottom-0 before:h-px hover:text-text01 disabled:pointer-events-none disabled:text-disabled01', {
-    'typography-label2regular': !props.isSelected,
-    'text-interactive02 hover:before:bg-uiBorder02Dark': !props.isSelected,
-    'typography-label2bold': props.isSelected,
-    'before:bg-interactive01 hover:before:bg-interactive01 pointer-events-none': props.isSelected
+    'typography-label2regular': !isSelected,
+    'text-interactive02 hover:before:bg-uiBorder02Dark': !isSelected,
+    'typography-label2bold': isSelected,
+    'before:bg-interactive01 hover:before:bg-interactive01 pointer-events-none': isSelected
   });
   return /*#__PURE__*/jsx("button", {
     type: "button",
     role: "tab",
-    "aria-selected": props.isSelected,
+    "aria-selected": isSelected,
     className: classes,
     disabled: props.isDisabled,
     onClick: function onClick() {
@@ -32303,7 +32323,8 @@ function TableCell(_ref) {
 
 function TableRow(_ref) {
   var children = _ref.children,
-    isHoverBackgroundVisible = _ref.isHoverBackgroundVisible;
+    _ref$isHoverBackgroun = _ref.isHoverBackgroundVisible,
+    isHoverBackgroundVisible = _ref$isHoverBackgroun === void 0 ? false : _ref$isHoverBackgroun;
   var rowClasses = clsx$1('contents', isHoverBackgroundVisible && '[&:hover>div]:bg-hoverUi02');
   return /*#__PURE__*/jsx("div", {
     className: rowClasses,
@@ -32383,20 +32404,23 @@ function Tag(_ref) {
   });
 }
 
-var _excluded$1 = ["size", "isResizable", "isError"];
+var _excluded$1 = ["size", "isResizable", "isError", "disabled"];
 var TextArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _clsx;
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
     _ref$isResizable = _ref.isResizable,
     isResizable = _ref$isResizable === void 0 ? false : _ref$isResizable,
-    isError = _ref.isError,
+    _ref$isError = _ref.isError,
+    isError = _ref$isError === void 0 ? false : _ref$isError,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   var classes = clsx('w-full rounded border outline-0 placeholder:text-textPlaceholder disabled:text-textPlaceholder', (_clsx = {
-    'border-supportError': isError && !props.disabled,
-    'hover:border-hoverInput': !props.disabled && !isError,
+    'border-supportError': isError && !disabled,
+    'hover:border-hoverInput': !disabled && !isError,
     'border-uiBorder01 hover:focus-within:border-activeInput focus-within:border-activeInput text-text01': !isError,
-    'bg-disabled02 border-disabled01': props.disabled
+    'bg-disabled02 border-disabled01': disabled
   }, _clsx['typography-body1regular px-2 pt-1.5 pb-2'] = size === 'medium', _clsx['text-4 px-3.5 py-2.5'] = size === 'large', _clsx['text-supportError'] = isError, _clsx['resize-none'] = !isResizable, _clsx));
   return /*#__PURE__*/jsx("div", {
     className: "flex",
@@ -32404,6 +32428,7 @@ var TextArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
       ref: ref,
       className: classes
     }, props, {
+      disabled: disabled,
       style: {
         height: props.height
       }
@@ -32412,21 +32437,24 @@ var TextArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 TextArea.displayName = 'TextArea';
 
-var _excluded = ["size", "isError", "onClickClearButton"];
+var _excluded = ["size", "isError", "disabled", "onClickClearButton"];
 var TextInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _clsx;
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
-    isError = _ref.isError,
+    _ref$isError = _ref.isError,
+    isError = _ref$isError === void 0 ? false : _ref$isError,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     onClickClearButton = _ref.onClickClearButton,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var inputWrapClasses = clsx('relative flex items-center gap-2 overflow-hidden rounded border', {
     'border-uiBorder01': !isError,
-    'border-supportError': isError && !props.disabled,
-    'hover:border-hoverInput': !props.disabled && !isError,
+    'border-supportError': isError && !disabled,
+    'hover:border-hoverInput': !disabled && !isError,
     'hover:focus-within:border-activeInput': !isError,
     'focus-within:border-activeInput': !isError,
-    'bg-disabled02 border-disabled01': props.disabled
+    'bg-disabled02 border-disabled01': disabled
   });
   var inputClasses = clsx('flex-1 pl-2 pr-3 outline-0 placeholder:text-textPlaceholder disabled:text-textPlaceholder', (_clsx = {}, _clsx['typography-label2regular pt-1.5 pb-2'] = size === 'medium', _clsx['typography-label1regular py-2.5'] = size === 'large', _clsx['text-text01'] = !isError, _clsx['text-supportError'] = isError, _clsx));
   return /*#__PURE__*/jsxs("div", {
@@ -32435,8 +32463,9 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
       ref: ref,
       size: 1,
       className: inputClasses,
+      disabled: disabled,
       onChange: props.onChange
-    }, props)), onClickClearButton && props.value && props.value.length !== 0 && !props.disabled && /*#__PURE__*/jsx("div", {
+    }, props)), onClickClearButton && props.value.length !== 0 && !disabled && /*#__PURE__*/jsx("div", {
       className: "absolute right-3",
       children: /*#__PURE__*/jsx(IconButton, {
         variant: "text",
@@ -32457,8 +32486,10 @@ function Toast(_ref) {
     state = _ref$state === void 0 ? 'information' : _ref$state,
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? 'auto' : _ref$width,
-    isAutoClose = _ref.isAutoClose,
-    isAnimation = _ref.isAnimation,
+    _ref$isAutoClose = _ref.isAutoClose,
+    isAutoClose = _ref$isAutoClose === void 0 ? false : _ref$isAutoClose,
+    _ref$isAnimation = _ref.isAnimation,
+    isAnimation = _ref$isAnimation === void 0 ? false : _ref$isAnimation,
     children = _ref.children,
     onClickClose = _ref.onClickClose;
   var _useState = useState(false),
@@ -32593,7 +32624,8 @@ function Toggle(_ref) {
     label = _ref.label,
     _ref$labelPosition = _ref.labelPosition,
     labelPosition = _ref$labelPosition === void 0 ? 'right' : _ref$labelPosition,
-    isDisabled = _ref.isDisabled;
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
   var baseClasses = clsx$1('relative flex items-center rounded-full', {
     'bg-disabledOn': isDisabled && isChecked,
     'bg-disabled01': isDisabled && !isChecked,
@@ -32618,7 +32650,7 @@ function Toggle(_ref) {
   });
   return /*#__PURE__*/jsxs("div", {
     className: "relative flex flex-[0_0_auto] items-center",
-    children: [label && labelPosition === 'left' && /*#__PURE__*/jsx("label", {
+    children: [label != null && labelPosition === 'left' && /*#__PURE__*/jsx("label", {
       htmlFor: id,
       className: labelClasses,
       children: label
@@ -32635,7 +32667,7 @@ function Toggle(_ref) {
       children: /*#__PURE__*/jsx("span", {
         className: indicatorClasses
       })
-    }), label && labelPosition === 'right' && /*#__PURE__*/jsx("label", {
+    }), label != null && labelPosition === 'right' && /*#__PURE__*/jsx("label", {
       htmlFor: id,
       className: labelClasses,
       children: label
@@ -32741,7 +32773,8 @@ var TooltipContent = function TooltipContent(_ref) {
     size = _ref.size,
     tooltipPosition = _ref.tooltipPosition,
     maxWidth = _ref.maxWidth,
-    isPortal = _ref.isPortal;
+    _ref$isPortal = _ref.isPortal,
+    isPortal = _ref$isPortal === void 0 ? false : _ref$isPortal;
   var tooltipWrapperClasses = clsx$1('absolute z-tooltip m-auto flex', {
     'top-0': !isPortal && verticalPosition === 'top',
     'bottom-0': !isPortal && verticalPosition === 'bottom',