@shoplflow/base 0.40.0 → 0.40.2

package/dist/index.cjs

@@ -2969,10 +2969,7 @@ var getButtonWrapperStyleBySizeVar = ({ sizeVar, isFocused }) => {
         border-width: ${isFocused ? "2px" : "1px"};
         transition: border-width 0.2s ease-in-out;
         border-radius: 12px;
-
-        &:hover {
-          border-width: 2px;
-        }
+        border-width: 1.5px;
       `;
     default:
       return react$1.css`
@@ -4749,21 +4746,14 @@ var getLabelStyleBySizeVar = (sizeVar) => {
 var StyledToggleButton = styled6__default.default.div`
   display: flex;
   padding: ${exports.spacingTokens.spacing04};
-  align-items: center;
+  align-items: stretch;
   background-color: ${exports.colorTokens.neutral150};
   border-radius: ${exports.borderRadiusTokens.borderRadius06};
 `;
 var StyledToggleInner = styled6__default.default.button`
-  height: fit-content;
   width: fit-content;
   cursor: pointer;
 
-  /* & input:checked + label {
-    background-color: ${exports.colorTokens.neutral0};
-    cursor: default;
-  } */
-`;
-var StyledToggleInnerLabel = styled6__default.default.label`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -4781,6 +4771,12 @@ var StyledToggleInnerLabel = styled6__default.default.label`
       `}
   }
 `;
+var StyledToggleInnerLabel = styled6__default.default.label`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+`;
 var StyledToggleInnerInput = styled6__default.default.input`
   position: absolute;
   width: 0;
@@ -4818,6 +4814,7 @@ var ToggleInnerRadio = React3.forwardRef(
   (_a, ref) => {
     var _b = _a, { label, disabled, value, id } = _b, rest = __objRest(_b, ["label", "disabled", "value", "id"]);
     const { fixedWidth, onChange, targetName, selectedValue, sizeVar } = useToggleButton();
+    const labelRef = React3.useRef(null);
     let selected = false;
     if (selectedValue && selectedValue === value) {
       selected = true;
@@ -4828,43 +4825,46 @@ var ToggleInnerRadio = React3.forwardRef(
       }
       return "neutral500";
     };
-    return /* @__PURE__ */ jsxRuntime.jsxs(StyledToggleInner, { disabled, type: "button", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        StyledToggleInnerInput,
-        __spreadProps(__spreadValues({
-          checked: selected,
-          width: fixedWidth,
-          disabled,
-          value,
-          id,
-          type: "radio",
-          ref,
-          name: targetName
-        }, rest), {
-          onChange
-        })
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        StyledToggleInnerLabel,
-        {
-          htmlFor: id,
-          width: fixedWidth,
-          disabled,
-          selected,
-          sizeVar,
-          children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      StyledToggleInner,
+      {
+        width: fixedWidth,
+        disabled,
+        selected,
+        sizeVar,
+        type: "button",
+        onClick: () => {
+          var _a2;
+          (_a2 = labelRef == null ? void 0 : labelRef.current) == null ? void 0 : _a2.click();
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            StyledToggleInnerInput,
+            __spreadProps(__spreadValues({
+              checked: selected,
+              width: fixedWidth,
+              disabled,
+              value,
+              id,
+              type: "radio",
+              ref,
+              name: targetName
+            }, rest), {
+              onChange
+            })
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(StyledToggleInnerLabel, { ref: labelRef, htmlFor: id, children: /* @__PURE__ */ jsxRuntime.jsx(
             exports.Text,
             {
-              lineClamp: 1,
               color: getLabelColor({ selected, disabled: Boolean(disabled) }),
               wordBreak: "break-all",
               typography: selected ? "body2_500" : "body2_400",
               children: label
             }
-          )
-        }
-      )
-    ] });
+          ) })
+        ]
+      }
+    );
   }
 );
 ToggleButton.InnerRadio = ToggleInnerRadio;

package/dist/index.js

@@ -2942,10 +2942,7 @@ var getButtonWrapperStyleBySizeVar = ({ sizeVar, isFocused }) => {
         border-width: ${isFocused ? "2px" : "1px"};
         transition: border-width 0.2s ease-in-out;
         border-radius: 12px;
-
-        &:hover {
-          border-width: 2px;
-        }
+        border-width: 1.5px;
       `;
     default:
       return css`
@@ -4722,21 +4719,14 @@ var getLabelStyleBySizeVar = (sizeVar) => {
 var StyledToggleButton = styled6.div`
   display: flex;
   padding: ${spacingTokens.spacing04};
-  align-items: center;
+  align-items: stretch;
   background-color: ${colorTokens.neutral150};
   border-radius: ${borderRadiusTokens.borderRadius06};
 `;
 var StyledToggleInner = styled6.button`
-  height: fit-content;
   width: fit-content;
   cursor: pointer;
 
-  /* & input:checked + label {
-    background-color: ${colorTokens.neutral0};
-    cursor: default;
-  } */
-`;
-var StyledToggleInnerLabel = styled6.label`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -4754,6 +4744,12 @@ var StyledToggleInnerLabel = styled6.label`
       `}
   }
 `;
+var StyledToggleInnerLabel = styled6.label`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+`;
 var StyledToggleInnerInput = styled6.input`
   position: absolute;
   width: 0;
@@ -4791,6 +4787,7 @@ var ToggleInnerRadio = forwardRef(
   (_a, ref) => {
     var _b = _a, { label, disabled, value, id } = _b, rest = __objRest(_b, ["label", "disabled", "value", "id"]);
     const { fixedWidth, onChange, targetName, selectedValue, sizeVar } = useToggleButton();
+    const labelRef = useRef(null);
     let selected = false;
     if (selectedValue && selectedValue === value) {
       selected = true;
@@ -4801,43 +4798,46 @@ var ToggleInnerRadio = forwardRef(
       }
       return "neutral500";
     };
-    return /* @__PURE__ */ jsxs(StyledToggleInner, { disabled, type: "button", children: [
-      /* @__PURE__ */ jsx(
-        StyledToggleInnerInput,
-        __spreadProps(__spreadValues({
-          checked: selected,
-          width: fixedWidth,
-          disabled,
-          value,
-          id,
-          type: "radio",
-          ref,
-          name: targetName
-        }, rest), {
-          onChange
-        })
-      ),
-      /* @__PURE__ */ jsx(
-        StyledToggleInnerLabel,
-        {
-          htmlFor: id,
-          width: fixedWidth,
-          disabled,
-          selected,
-          sizeVar,
-          children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsxs(
+      StyledToggleInner,
+      {
+        width: fixedWidth,
+        disabled,
+        selected,
+        sizeVar,
+        type: "button",
+        onClick: () => {
+          var _a2;
+          (_a2 = labelRef == null ? void 0 : labelRef.current) == null ? void 0 : _a2.click();
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            StyledToggleInnerInput,
+            __spreadProps(__spreadValues({
+              checked: selected,
+              width: fixedWidth,
+              disabled,
+              value,
+              id,
+              type: "radio",
+              ref,
+              name: targetName
+            }, rest), {
+              onChange
+            })
+          ),
+          /* @__PURE__ */ jsx(StyledToggleInnerLabel, { ref: labelRef, htmlFor: id, children: /* @__PURE__ */ jsx(
             Text_default,
             {
-              lineClamp: 1,
               color: getLabelColor({ selected, disabled: Boolean(disabled) }),
               wordBreak: "break-all",
               typography: selected ? "body2_500" : "body2_400",
               children: label
             }
-          )
-        }
-      )
-    ] });
+          ) })
+        ]
+      }
+    );
   }
 );
 ToggleButton.InnerRadio = ToggleInnerRadio;

package/dist/styles/global.css

@@ -179,6 +179,16 @@
     line-height: 16px;
     font-size: 12px;
   }
+  .paragraph1 {
+    font-weight: var(--font-weight-regular);
+    line-height: 24px;
+    font-size: 16px;
+  }
+  .paragraph2 {
+    font-weight: var(--font-weight-regular);
+    line-height: 22px;
+    font-size: 14px;
+  }
 }
 :root[data-shoplflow][data-shoplflow=shopl] {
   --coolgray300: #8092aa;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoplflow/base",
-  "version": "0.40.0",
+  "version": "0.40.2",
   "type": "module",
   "license": "Apache-2.0",
   "main": "dist/index.js",
@@ -90,9 +90,9 @@
     "react-datepicker": "^7.3.0",
     "react-dom": "^18.2.0",
     "simplebar-react": "^3.2.6",
+    "@shoplflow/hada-assets": "^0.1.3",
     "@shoplflow/shopl-assets": "^0.12.10",
-    "@shoplflow/utils": "^0.6.5",
-    "@shoplflow/hada-assets": "^0.1.3"
+    "@shoplflow/utils": "^0.6.5"
   },
   "scripts": {
     "type-check": "tsc --noEmit",