@zenkigen-inc/component-ui 1.13.0 → 1.14.4

package/dist/index.js

@@ -75,7 +75,7 @@ function Breadcrumb({
 }
 Breadcrumb.Item = BreadcrumbItem;
 
-const _excluded$7 = ["size", "variant", "isDisabled", "isSelected", "width", "borderRadius", "before", "after", "elementAs", "children"];
+const _excluded$7 = ["size", "variant", "isDisabled", "isSelected", "width", "borderRadius", "justifyContent", "before", "after", "elementAs", "children"];
 const Button = _ref => {
   let {
       size = 'medium',
@@ -84,13 +84,14 @@ const Button = _ref => {
       isSelected = false,
       width,
       borderRadius,
+      justifyContent = 'center',
       before,
       after,
       elementAs,
       children
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
-  const baseClasses = clsx('flex shrink-0 items-center justify-center gap-1', buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, focusVisible.normal, {
+  const baseClasses = clsx('flex shrink-0 items-center gap-1', buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, focusVisible.normal, {
     'h-6 px-2.5': size === 'small',
     'h-8 px-3': size === 'medium',
     'h-10 px-4 leading-[24px]': size === 'large',
@@ -100,6 +101,8 @@ const Button = _ref => {
     '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,
+    'justify-start': justifyContent === 'start',
+    'justify-center': justifyContent === 'center',
     'typography-label16regular': size === 'large',
     'typography-label14regular': size !== 'large'
   });
@@ -255,11 +258,8 @@ const Icon = _ref => {
   const classes = clsx('inline-block shrink-0', {
     'fill-disabled01': isDisabled,
     [iconColors.icon01]: !isDisabled && props.color === 'icon01',
-    [iconColors.icon01Dark]: !isDisabled && props.color === 'icon01Dark',
     [iconColors.icon02]: !isDisabled && props.color === 'icon02',
-    [iconColors.icon02Dark]: !isDisabled && props.color === 'icon02Dark',
     [iconColors.icon03]: !isDisabled && props.color === 'icon03',
-    [iconColors.icon03Dark]: !isDisabled && props.color === 'icon03Dark',
     [iconColors.iconOnColor]: !isDisabled && props.color === 'iconOnColor',
     'w-3 h-3': size === 'x-small',
     'w-4 h-4': size === 'small',
@@ -1194,7 +1194,7 @@ const Search = /*#__PURE__*/forwardRef((_ref, ref) => {
   }, {
     'h-10 px-4': size === 'large'
   });
-  const inputClasses = clsx('mx-2.5 h-full flex-1 text-text01 outline-0 placeholder:text-textPlaceholder', {
+  const inputClasses = clsx('mx-2 h-full flex-1 text-text01 outline-0 placeholder:text-textPlaceholder', {
     ['typography-label14regular']: size === 'medium',
     ['typography-label16regular']: size === 'large'
   });
@@ -1377,7 +1377,7 @@ const TabItem = _ref => {
     props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   const 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-label14regular': !isSelected,
-    'text-interactive02 hover:before:bg-uiBorder02Dark': !isSelected,
+    'text-interactive02 hover:before:bg-uiBorder04': !isSelected,
     'typography-label14bold': isSelected,
     'before:bg-interactive01 hover:before:bg-interactive01 pointer-events-none': isSelected
   });
@@ -1721,19 +1721,19 @@ function Toggle({
     'bg-interactive01 peer-hover:bg-hover01': !isDisabled && isChecked,
     'bg-interactive02 peer-hover:bg-hover02Dark': !isDisabled && !isChecked,
     'w-8 h-4 px-[3px]': size === 'small',
-    'w-12 h-6 px-1': size === 'medium'
+    'w-12 h-6 px-1': size === 'medium' || size === 'large'
   });
   const inputClasses = clsx$1('peer absolute inset-0 z-[1] opacity-0', isDisabled ? 'cursor-not-allowed' : 'cursor-pointer');
   const indicatorClasses = clsx$1('rounded-full bg-iconOnColor', {
     'w-2.5 h-2.5': size === 'small',
-    'w-4 h-4': size === 'medium',
+    'w-4 h-4': size === 'medium' || size === 'large',
     'ml-auto': isChecked
   });
   const labelClasses = clsx$1('break-all', {
     'mr-2': labelPosition === 'left',
     'ml-2': labelPosition === 'right',
-    'typography-label12regular': size === 'small',
-    'typography-label16regular': size === 'medium',
+    'typography-label14regular': size === 'small' || size === 'medium',
+    'typography-label16regular': size === 'large',
     'pointer-events-none cursor-not-allowed text-disabled01': isDisabled,
     'cursor-pointer text-text01': !isDisabled
   });