@zenkigen-inc/component-ui 1.1.0 → 1.1.2

package/dist/index.esm.js

@@ -63,7 +63,7 @@ function Button(_ref) {
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'fill' : _ref$variant,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-  var baseClasses = clsx('rounded', 'flex', 'shrink-0', 'gap-1', 'items-center', 'justify-center', buttonColors[variant].base, buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, focusVisible.normal, size === 'large' ? typography.label.label1regular : typography.label.label2regular, {
+  var baseClasses = clsx('rounded-button', 'flex', 'shrink-0', 'gap-1', 'items-center', 'justify-center', buttonColors[variant].base, buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, focusVisible.normal, size === 'large' ? typography.label.label1regular : typography.label.label2regular, {
     'h-6 px-2.5': size === 'small'
   }, {
     'h-8 px-3': size === 'medium'
@@ -31436,12 +31436,13 @@ if (process.env.NODE_ENV === 'production') {
 });
 
 var ModalContext = /*#__PURE__*/createContext({
-  size: 'medium',
+  width: 480,
   setIsOpen: function setIsOpen() {
     return false;
   }
 });
 
+var sizeSmallLimit = 420;
 function ModalButtonTab(_ref) {
   var primaryButtonLabel = _ref.primaryButtonLabel,
     secondaryButtonLabel = _ref.secondaryButtonLabel,
@@ -31456,7 +31457,7 @@ function ModalButtonTab(_ref) {
     subButtonLabel = _ref.subButtonLabel,
     onClickSubButton = _ref.onClickSubButton;
   var _useContext = useContext(ModalContext),
-    size = _useContext.size,
+    width = _useContext.width,
     setIsOpen = _useContext.setIsOpen;
   var handleClickPrimaryButton = useCallback(function () {
     onClickPrimaryButton();
@@ -31470,17 +31471,18 @@ function ModalButtonTab(_ref) {
     onClickSubButton == null || onClickSubButton();
   }, [onClickSubButton]);
   var wrapperClasses = clsx$1('flex', 'shrink-0', 'items-center', 'w-full', 'rounded-b-lg', 'py-4', 'px-6', {
-    'justify-between': isWithCheckbox || subButtonLabel && size !== 'small',
+    'justify-between': isWithCheckbox || subButtonLabel && sizeSmallLimit <= width,
     'justify-end': !isWithCheckbox || !subButtonLabel,
-    'justify-center': subButtonLabel && size === 'small',
+    'justify-center': subButtonLabel && width < sizeSmallLimit,
     'border-t-[1px] border-border-uiBorder01': !isNoBorder,
-    'gap-y-4': size === 'small',
-    'flex-wrap': size === 'small' && isWithCheckbox,
-    'flex-wrap-reverse': size === 'small' && subButtonLabel
+    'gap-y-4': width < sizeSmallLimit,
+    'flex-wrap': width < sizeSmallLimit && isWithCheckbox,
+    'flex-wrap-reverse': width < sizeSmallLimit && subButtonLabel
   });
   var buttonContainerClasses = clsx$1('flex', 'items-center', {
-    'gap-x-2': size === 'small',
-    'gap-x-4': size === 'medium' || size === 'large' || size === 'x-large'
+    'w-full justify-center': width < sizeSmallLimit,
+    'gap-x-2': width < sizeSmallLimit,
+    'gap-x-4': sizeSmallLimit <= width
   });
   return /*#__PURE__*/jsxs("div", {
     className: wrapperClasses,
@@ -31501,13 +31503,13 @@ function ModalButtonTab(_ref) {
       children: [/*#__PURE__*/jsx(Button, {
         variant: "outline",
         size: "large",
-        width: size === 'small' ? 132 : 'auto',
+        width: width < sizeSmallLimit ? 132 : 'auto',
         onClick: handleClickSecondaryButton,
         children: secondaryButtonLabel
       }, "1"), /*#__PURE__*/jsx(Button, {
         variant: isDanger ? 'fillDanger' : 'fill',
         size: "large",
-        width: size === 'small' ? 132 : 'auto',
+        width: width < sizeSmallLimit ? 132 : 'auto',
         onClick: handleClickPrimaryButton,
         children: primaryButtonLabel
       }, "2")]
@@ -31587,8 +31589,8 @@ function ModalTab(_ref) {
 
 function Modal(_ref) {
   var children = _ref.children,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 480 : _ref$width,
     height = _ref.height,
     isOpen = _ref.isOpen,
     setIsOpen = _ref.setIsOpen,
@@ -31596,17 +31598,12 @@ function Modal(_ref) {
     headerElement = _ref.headerElement,
     tabElement = _ref.tabElement,
     buttonTabElement = _ref.buttonTabElement;
-  var wrapperClasses = clsx$1('flex', 'items-center', 'justify-center', 'z-overlay', 'bg-background-backgroundOverlayBlack', 'fixed left-0 top-0', 'h-full w-full');
-  var modalBaseClasses = clsx$1('flex', 'shrink-0', 'flex-col', 'bg-background-uiBackground01', 'rounded-lg', 'shadow-modalShadow', {
-    'w-[320px]': size === 'small',
-    'w-[480px]': size === 'medium',
-    'w-[640px]': size === 'large',
-    'w-[720px]': size === 'x-large'
-  });
-  var contentClasses = clsx$1('flex', 'items-center', 'justify-center', 'overflow-y-auto');
+  var wrapperClasses = 'flex items-center justify-center z-overlay bg-background-backgroundOverlayBlack fixed left-0 top-0 h-full w-full';
+  var modalBaseClasses = 'flex shrink-0 flex-col bg-background-uiBackground01 rounded-lg shadow-modalShadow';
+  var contentClasses = 'flex items-center justify-center overflow-y-auto';
   return /*#__PURE__*/reactDom.createPortal(isOpen && /*#__PURE__*/jsx(ModalContext.Provider, {
     value: {
-      size: size,
+      width: width,
       setIsOpen: setIsOpen
     },
     children: /*#__PURE__*/jsx("div", {
@@ -31614,6 +31611,7 @@ function Modal(_ref) {
       children: /*#__PURE__*/jsxs("div", {
         className: modalBaseClasses,
         style: {
+          width: width,
           height: height
         },
         children: [headerElement, tabElement, /*#__PURE__*/jsx("div", {
@@ -31974,7 +31972,7 @@ function Select(_ref) {
           className: "ml-auto flex items-center",
           children: /*#__PURE__*/jsx(Icon, {
             name: isOptionListOpen ? 'angle-small-up' : 'angle-small-down',
-            size: "small"
+            size: size === 'large' ? 'medium' : 'small'
           })
         })]
       }), isOptionListOpen && !isDisabled && /*#__PURE__*/jsx(SelectList$1, {
@@ -32112,7 +32110,7 @@ function SelectSort(_ref) {
           size: size === 'large' ? 'medium' : 'small'
         }) : /*#__PURE__*/jsx(Icon, {
           name: isOptionListOpen ? 'angle-small-up' : 'angle-small-down',
-          size: "small"
+          size: size === 'large' ? 'medium' : 'small'
         })
       })]
     }), isOptionListOpen && !isDisabled && /*#__PURE__*/jsx(SelectList, {
@@ -32468,7 +32466,7 @@ function Tooltip(_ref) {
     setIsVisible(false);
   }, []);
   var targetClasses = clsx$1('relative', 'flex', 'items-center', 'justify-center');
-  var tooltipBodyClasses = clsx$1('z-tooltip', 'absolute', 'w-max', horizontalAlign === 'left' ? 'left-0' : horizontalAlign === 'right' ? 'right-0' : 'left-auto', 'inline-block', size === 'small' ? 'px-2 pb-1 pt-1.5' : 'px-4 py-3', 'text-text-textOnColor', 'bg-background-uiBackgroundTooltip', 'rounded', 'shadow-floatingShadow', typography.body[size === 'small' ? 'body3regular' : 'body2regular']);
+  var tooltipBodyClasses = clsx$1('z-tooltip', 'absolute', 'w-max', horizontalAlign === 'left' ? 'left-0' : horizontalAlign === 'right' ? 'right-0' : 'left-auto', 'inline-block', size === 'small' ? 'px-2 pb-1 pt-1.5' : 'px-4 py-3', 'text-text-textOnColor', 'bg-background-uiBackgroundTooltip', 'rounded', typography.body[size === 'small' ? 'body3regular' : 'body2regular']);
   return /*#__PURE__*/jsxs("div", {
     ref: targetRef,
     className: targetClasses,