@wistia/ui 0.6.23 → 0.6.24-beta.bc4631ae.8dd9eb3

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.23
+ * @license @wistia/ui v0.6.24-beta.bc4631ae.8dd9eb3
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -7612,9 +7612,9 @@ var StyledFormControlLabel = import_styled_components33.default.label`
   cursor: pointer;
   display: flex;
   align-items: center;
-  gap: var(--wui-space-01);
+  gap: var(--wui-space-02);
   width: 100%;
-  color: var(--wui-color-tex);
+  color: var(--wui-color-text);
   font-size: var(--wui-typography-label-3-size);
   font-weight: var(--wui-typography-label-3-weight);
   line-height: var(--wui-typography-label-3-line-height);
@@ -7676,30 +7676,66 @@ var inputSizeSmall = import_styled_components34.css`
   height: 14px;
   min-width: 14px;
   min-height: 14px;
+
+  svg {
+    width: 7px;
+    height: 7px;
+  }
 `;
 var inputSizeMedium = import_styled_components34.css`
   width: 16px;
   height: 16px;
   min-width: 16px;
   min-height: 16px;
+
+  svg {
+    width: 9px;
+    height: 9px;
+  }
 `;
 var inputSizeLarge = import_styled_components34.css`
   width: 20px;
   height: 20px;
   min-width: 20px;
   min-height: 20px;
+
+  svg {
+    width: 11px;
+    height: 11px;
+  }
 `;
 var getSizeCss = (size) => {
   if (size === "sm") return inputSizeSmall;
   if (size === "lg") return inputSizeLarge;
   return inputSizeMedium;
 };
-var StyledCheckboxWrapper = import_styled_components34.default.div`
+var visibleLabelStyle = import_styled_components34.css`
+  padding: var(--wui-space-02);
+  border-radius: var(--wui-border-radius-01);
+  gap: var(--wui-space-02);
+  transition: background-color var(--wui-motion-duration-01) var(--wui-motion-ease);
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--wui-color-bg-surface-hover);
+  }
+
+  &:active {
+    background-color: var(--wui-color-bg-surface-active);
+  }
+`;
+var StyledCheckboxRadioWrapper = import_styled_components34.default.div`
   display: flex;
   margin: 0;
+  ${({ $labelHidden }) => !$labelHidden && visibleLabelStyle}
 
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
+
+  --wui-checkbox-radio-border-color: var(--wui-color-border-secondary);
+  &:hover {
+    --wui-checkbox-radio-border-color: var(--wui-color-border-secondary-hover);
+  }
 `;
 var StyledCheckboxInput = import_styled_components34.default.div`
   ${({ $size }) => getSizeCss($size)}
@@ -7709,16 +7745,17 @@ var StyledCheckboxInput = import_styled_components34.default.div`
   display: grid;
   place-content: center;
   align-self: flex-start;
+  border-width: 1px;
+  border-style: solid;
+  border-color: ${({ $disabled }) => $disabled ? "var(--wui-color-bg-border-disabled)" : "var(--wui-checkbox-radio-border-color)"};
   background-color: ${({ $disabled }) => $disabled ? "var(--wui-color-bg-surface-disabled)" : "var(--wui-color-bg-surface)"};
-  border: 1px solid
-    ${({ $disabled }) => $disabled ? "var(--wui-color-icon-disabled)" : "var(--wui-color-border)"};
 
   /* checkmark icon */
   svg {
     display: none;
 
     path {
-      fill: ${({ $disabled }) => $disabled ? "var(--wui-color-icon-disabled)" : "var(--wui-color-bg-fill-white)"};
+      fill: ${({ $disabled }) => $disabled ? "var(--wui-color-icon-disabled)" : "var(--wui-color-icon-on-fill)"};
     }
   }
 `;
@@ -7727,6 +7764,7 @@ var StyledHiddenCheckboxInput = import_styled_components34.default.input`
 
   /* toggles display of faux-input background-color */
   &:checked + label [data-wui-faux-input='true'] {
+    border-color: ${({ disabled }) => disabled ? void 0 : "var(--wui-color-bg-fill)"};
     background-color: ${({ disabled }) => disabled ? "var(--wui-color-bg-surface-disabled)" : "var(--wui-color-bg-fill)"};
   }
 
@@ -7752,42 +7790,49 @@ var Checkbox = (0, import_react18.forwardRef)(
   }, ref) => {
     const generatedId = (0, import_react18.useId)();
     const computedId = (0, import_type_guards22.isNonEmptyString)(id) ? id : `wistia-ui-checkbox-${generatedId}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)(StyledCheckboxWrapper, { disabled, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
-        StyledHiddenCheckboxInput,
-        {
-          ...props,
-          ref,
-          checked,
-          disabled,
-          id: computedId,
-          name,
-          onChange,
-          required,
-          type: "checkbox",
-          value
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
-        FormControlLabel,
-        {
-          controlSlot: /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
-            StyledCheckboxInput,
+    return /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)(
+      StyledCheckboxRadioWrapper,
+      {
+        $disabled: disabled,
+        $labelHidden: hideLabel,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
+            StyledHiddenCheckboxInput,
             {
-              $disabled: disabled,
-              $size: size,
-              "data-wui-faux-input": "true",
-              children: /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(CheckIcon, {})
+              ...props,
+              ref,
+              checked,
+              disabled,
+              id: computedId,
+              name,
+              onChange,
+              required,
+              type: "checkbox",
+              value
             }
           ),
-          description,
-          disabled,
-          hideLabel,
-          htmlFor: computedId,
-          label
-        }
-      )
-    ] });
+          /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
+            FormControlLabel,
+            {
+              controlSlot: /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
+                StyledCheckboxInput,
+                {
+                  $disabled: disabled,
+                  $size: size,
+                  "data-wui-faux-input": "true",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(CheckIcon, {})
+                }
+              ),
+              description,
+              disabled,
+              hideLabel,
+              htmlFor: computedId,
+              label
+            }
+          )
+        ]
+      }
+    );
   }
 );
 Checkbox.displayName = "Checkbox";
@@ -10359,17 +10404,17 @@ var RadioIcon = () => /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
   "svg",
   {
     fill: "inherit",
-    height: "12",
-    viewBox: "0 0 12 12",
-    width: "12",
+    height: "1",
+    viewBox: "0 0 1 1",
+    width: "1",
     xmlns: "http://www.w3.org/2000/svg",
     children: /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
       "circle",
       {
-        cx: "6",
-        cy: "6",
+        cx: "0.5",
+        cy: "0.5",
         fill: "currentColor",
-        r: "4"
+        r: "0.5"
       }
     )
   }
@@ -10379,31 +10424,39 @@ var inputSizeSmall2 = import_styled_components65.css`
   height: 14px;
   min-width: 14px;
   min-height: 14px;
+
+  svg {
+    width: 7px;
+    height: 7px;
+  }
 `;
 var inputSizeMedium2 = import_styled_components65.css`
   width: 16px;
   height: 16px;
   min-width: 16px;
   min-height: 16px;
+
+  svg {
+    width: 8px;
+    height: 8px;
+  }
 `;
 var inputSizeLarge2 = import_styled_components65.css`
   width: 20px;
   height: 20px;
   min-width: 20px;
   min-height: 20px;
+
+  svg {
+    width: 10px;
+    height: 10px;
+  }
 `;
 var getSizeCss2 = (size) => {
   if (size === "sm") return inputSizeSmall2;
   if (size === "lg") return inputSizeLarge2;
   return inputSizeMedium2;
 };
-var StyledRadioWrapper = import_styled_components65.default.div`
-  display: flex;
-  margin: 0;
-
-  /* TODO this solves a problem but potentially causes and a11y issue */
-  user-select: none;
-`;
 var StyledRadioInput = import_styled_components65.default.div`
   ${({ $size }) => getSizeCss2($size)}
   line-height: 0;
@@ -10412,9 +10465,10 @@ var StyledRadioInput = import_styled_components65.default.div`
   display: grid;
   place-content: center;
   align-self: flex-start;
+  border-width: 1px;
+  border-style: solid;
+  border-color: ${({ $disabled }) => $disabled ? "var(--wui-color-bg-border-disabled)" : "var(--wui-color-border)"};
   background-color: ${({ $disabled }) => $disabled ? "var(--wui-color-bg-surface-disabled)" : "var(--wui-color-bg-surface)"};
-  border: 1px solid
-    ${({ $disabled }) => $disabled ? "var(--wui-color-icon-disabled)" : "var(--wui-color-border)"};
 
   /* radio button circle icon */
   svg {
@@ -10428,9 +10482,9 @@ var StyledRadioInput = import_styled_components65.default.div`
 var StyledHiddenRadioInput = import_styled_components65.default.input`
   ${visuallyHiddenStyle}
 
-  /* toggles display of faux-input background-color */
+  /* toggles display of faux-input border-color */
   &:checked + label [data-wui-faux-input='true'] {
-    border-color: ${({ disabled }) => disabled ? "var(--wui-color-bg-surface-disabled)" : "var(--wui-color-bg-fill)"};
+    border-color: ${({ disabled }) => disabled ? "var(--wui-color-bg-border-disabled)" : "var(--wui-color-bg-fill)"};
   }
 
   /* toggles display of RadioIcon */
@@ -10456,9 +10510,10 @@ var Radio = (0, import_react43.forwardRef)(
     const generatedId = (0, import_react43.useId)();
     const computedId = (0, import_type_guards38.isNonEmptyString)(id) ? id : `wistia-ui-radio-${generatedId}`;
     return /* @__PURE__ */ (0, import_jsx_runtime241.jsxs)(
-      StyledRadioWrapper,
+      StyledCheckboxRadioWrapper,
       {
         $disabled: disabled,
+        $labelHidden: hideLabel,
         "aria-invalid": props["aria-invalid"],
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(