@zentrades-ui/components 0.2.4 → 0.2.6

package/dist/index.js

@@ -1196,46 +1196,57 @@ var Checkbox = React4.forwardRef(
       }
     );
     if (label || displayHelperText) {
-      const hasHelperText = Boolean(displayHelperText);
-      return /* @__PURE__ */ jsx9(Stack2, { gap: "2xs", children: /* @__PURE__ */ jsxs4(
-        Inline2,
+      return /* @__PURE__ */ jsxs4(
+        "div",
         {
-          gap: "sm",
-          alignItems: hasHelperText ? "flex-start" : "center",
-          opacity: disabled ? "50" : "100",
-          cursor: disabled ? "not-allowed" : "pointer",
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: "2px",
+            opacity: disabled ? 0.5 : 1
+          },
           children: [
-            checkbox,
             /* @__PURE__ */ jsxs4(
-              Stack2,
+              Inline2,
               {
-                gap: "none",
-                onClick: (e) => {
-                  if (!disabled) {
-                    const button = e.currentTarget.parentElement?.querySelector("button");
-                    button?.click();
-                  }
-                },
+                gap: "sm",
+                alignItems: "center",
+                cursor: disabled ? "not-allowed" : "pointer",
                 children: [
-                  label && /* @__PURE__ */ jsxs4(Inline2, { gap: "2xs", alignItems: "center", children: [
-                    /* @__PURE__ */ jsx9(Text2, { as: "label", fontVariant: "text-s-medium", htmlFor: checkboxId, children: label }),
-                    required && /* @__PURE__ */ jsx9(Text2, { as: "span", color: "contentTertiary", fontVariant: "text-s-medium", children: "*" })
-                  ] }),
-                  displayHelperText && /* @__PURE__ */ jsx9(
-                    Text2,
+                  checkbox,
+                  label && /* @__PURE__ */ jsxs4(
+                    Inline2,
                     {
-                      fontVariant: "text-s-regular",
-                      color: error ? "contentNegative" : "contentTertiary",
-                      role: error ? "alert" : void 0,
-                      children: displayHelperText
+                      gap: "2xs",
+                      alignItems: "center",
+                      onClick: (e) => {
+                        if (!disabled) {
+                          const button = e.currentTarget.parentElement?.querySelector("button");
+                          button?.click();
+                        }
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx9(Text2, { as: "label", fontVariant: "text-s-medium", htmlFor: checkboxId, children: label }),
+                        required && /* @__PURE__ */ jsx9(Text2, { as: "span", color: "contentTertiary", fontVariant: "text-s-medium", children: "*" })
+                      ]
                     }
                   )
                 ]
               }
+            ),
+            displayHelperText && /* @__PURE__ */ jsx9(
+              Text2,
+              {
+                fontVariant: "text-s-regular",
+                color: error ? "contentNegative" : "contentTertiary",
+                role: error ? "alert" : void 0,
+                style: { marginLeft: boxSize + 8 },
+                children: displayHelperText
+              }
             )
           ]
         }
-      ) });
+      );
     }
     return checkbox;
   }