@zenkigen-inc/component-ui 1.1.1 → 1.1.2

package/dist/index.js

@@ -71,7 +71,7 @@ function Button(_ref) {
       variant = 'fill'
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-  const 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, {
+  const 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'
@@ -31422,10 +31422,11 @@ if (process.env.NODE_ENV === 'production') {
 });
 
 const ModalContext = /*#__PURE__*/createContext({
-  size: 'medium',
+  width: 480,
   setIsOpen: () => false
 });
 
+const sizeSmallLimit = 420;
 function ModalButtonTab({
   primaryButtonLabel,
   secondaryButtonLabel,
@@ -31441,7 +31442,7 @@ function ModalButtonTab({
   onClickSubButton
 }) {
   const {
-    size,
+    width,
     setIsOpen
   } = useContext(ModalContext);
   const handleClickPrimaryButton = useCallback(() => {
@@ -31456,17 +31457,18 @@ function ModalButtonTab({
     onClickSubButton == null || onClickSubButton();
   }, [onClickSubButton]);
   const 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
   });
   const 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,
@@ -31487,13 +31489,13 @@ function ModalButtonTab({
       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")]
@@ -31575,7 +31577,7 @@ function ModalTab({
 
 function Modal({
   children,
-  size = 'medium',
+  width = 480,
   height,
   isOpen,
   setIsOpen,
@@ -31584,17 +31586,12 @@ function Modal({
   tabElement,
   buttonTabElement
 }) {
-  const wrapperClasses = clsx$1('flex', 'items-center', 'justify-center', 'z-overlay', 'bg-background-backgroundOverlayBlack', 'fixed left-0 top-0', 'h-full w-full');
-  const 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'
-  });
-  const contentClasses = clsx$1('flex', 'items-center', 'justify-center', 'overflow-y-auto');
+  const wrapperClasses = 'flex items-center justify-center z-overlay bg-background-backgroundOverlayBlack fixed left-0 top-0 h-full w-full';
+  const modalBaseClasses = 'flex shrink-0 flex-col bg-background-uiBackground01 rounded-lg shadow-modalShadow';
+  const contentClasses = 'flex items-center justify-center overflow-y-auto';
   return /*#__PURE__*/reactDom.createPortal(isOpen && /*#__PURE__*/jsx(ModalContext.Provider, {
     value: {
-      size,
+      width,
       setIsOpen
     },
     children: /*#__PURE__*/jsx("div", {
@@ -31602,6 +31599,7 @@ function Modal({
       children: /*#__PURE__*/jsxs("div", {
         className: modalBaseClasses,
         style: {
+          width,
           height
         },
         children: [headerElement, tabElement, /*#__PURE__*/jsx("div", {