@wistia/ui 0.6.22 → 0.6.23-beta.8d23fa5f.423e6c7

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.22
+ * @license @wistia/ui v0.6.23-beta.8d23fa5f.423e6c7
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -1248,6 +1248,7 @@ var colorAliasTokens = import_styled_components4.css`
 
   /* Disabled */
   --wui-color-bg-surface-disabled: var(--wui-gray-3);
+  --wui-color-bg-border-disabled: var(--wui-gray-4);
   --wui-color-icon-disabled: var(--wui-gray-8);
   --wui-color-text-disabled: var(--wui-gray-10);
   --wui-color-focus-ring-disabled: var(--wui-gray-6);
@@ -7600,6 +7601,7 @@ ScreenReaderOnly.displayName = "ScreenReaderOnly";
 // src/private/components/FormControlLabel/FormControlLabel.tsx
 var import_jsx_runtime201 = require("react/jsx-runtime");
 var disabledStyle2 = import_styled_components33.css`
+  cursor: not-allowed;
   color: var(--wui-color-text-disabled);
 `;
 var StyledLabelWrapper = import_styled_components33.default.div`
@@ -7669,58 +7671,70 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
     )
   }
 );
-var disabledStyle3 = import_styled_components34.css`
-  cursor: not-allowed;
-  opacity: 0.5;
-`;
 var inputSizeSmall = import_styled_components34.css`
   width: 14px;
   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`
   display: flex;
   margin: 0;
 
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
-
-  ${({ disabled }) => disabled && disabledStyle3};
 `;
-var getSizeCss = (size) => {
-  if (size === "sm") return inputSizeSmall;
-  if (size === "lg") return inputSizeLarge;
-  return inputSizeMedium;
-};
 var StyledCheckboxInput = import_styled_components34.default.div`
   ${({ $size }) => getSizeCss($size)}
   line-height: 0;
   margin: 0;
-  border: 1px solid var(--wui-color-border);
   border-radius: var(--wui-border-radius-01);
-  background-color: var(--wui-color-bg-fill-white);
   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)"};
 
+  /* checkmark icon */
   svg {
     display: none;
 
     path {
-      fill: var(--wui-color-bg-fill-white);
+      fill: ${({ $disabled }) => $disabled ? "var(--wui-color-icon-disabled)" : "var(--wui-color-bg-fill-white)"};
     }
   }
 `;
@@ -7729,7 +7743,8 @@ var StyledHiddenCheckboxInput = import_styled_components34.default.input`
 
   /* toggles display of faux-input background-color */
   &:checked + label [data-wui-faux-input='true'] {
-    background-color: var(--wui-color-bg-fill);
+    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)"};
   }
 
   /* toggles display of CheckIcon */
@@ -7754,47 +7769,42 @@ 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,
-      {
-        ref,
-        disabled,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
-            StyledHiddenCheckboxInput,
+    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,
             {
-              ...props,
-              ref,
-              checked,
-              disabled,
-              id: computedId,
-              name,
-              onChange,
-              required,
-              type: "checkbox",
-              value
+              $disabled: disabled,
+              $size: size,
+              "data-wui-faux-input": "true",
+              children: /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(CheckIcon, {})
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
-            FormControlLabel,
-            {
-              controlSlot: /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
-                StyledCheckboxInput,
-                {
-                  $size: size,
-                  "data-wui-faux-input": "true",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(CheckIcon, {})
-                }
-              ),
-              description,
-              hideLabel,
-              htmlFor: computedId,
-              label
-            }
-          )
-        ]
-      }
-    );
+          description,
+          disabled,
+          hideLabel,
+          htmlFor: computedId,
+          label
+        }
+      )
+    ] });
   }
 );
 Checkbox.displayName = "Checkbox";
@@ -9061,7 +9071,7 @@ var requiredStyle = import_styled_components48.css`
     content: '*';
   }
 `;
-var disabledStyle4 = import_styled_components48.css`
+var disabledStyle3 = import_styled_components48.css`
   color: var(--wui-color-text-disabled);
 `;
 var StyledLabel3 = import_styled_components48.default.label`
@@ -9085,7 +9095,7 @@ var StyledLabel3 = import_styled_components48.default.label`
   }
 
   ${({ $screenReaderOnly }) => $screenReaderOnly && visuallyHiddenStyle}
-  ${({ $disabled }) => $disabled && disabledStyle4}
+  ${({ $disabled }) => $disabled && disabledStyle3}
   ${({ $required }) => $required && requiredStyle}
 `;
 var Label = ({
@@ -10366,88 +10376,100 @@ 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"
       }
     )
   }
 );
-var StyledHiddenRadioInput = import_styled_components65.default.input`
-  ${visuallyHiddenStyle}
-
-  /* toggles display of faux-input background-color */
-  &:checked + label [data-wui-faux-input='true'] {
-    border-color: var(--wui-color-bg-fill);
-  }
-
-  /* toggles display of RadioIcon */
-  &:checked + label svg {
-    display: block;
-  }
-`;
 var inputSizeSmall2 = import_styled_components65.css`
   width: 14px;
   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;
   margin: 0;
-  border: 1px solid var(--wui-color-border);
   border-radius: 50%; /* TODO --wui-border-radius-rounded */
-  background-color: var(--wui-color-bg-fill-white);
   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)"};
 
+  /* radio button circle icon */
   svg {
     display: none;
 
     circle {
-      fill: var(--wui-color-bg-fill);
+      fill: ${({ $disabled }) => $disabled ? "var(--wui-color-icon-disabled)" : "var(--wui-color-bg-fill)"};
     }
   }
 `;
-var disabledStyle5 = import_styled_components65.css`
-  cursor: not-allowed;
-  opacity: 0.5;
-`;
-var StyledRadioWrapper = import_styled_components65.default.div`
-  display: flex;
-  margin: 0;
+var StyledHiddenRadioInput = import_styled_components65.default.input`
+  ${visuallyHiddenStyle}
 
-  /* TODO this solves a problem but potentially causes and a11y issue */
-  user-select: none;
+  /* toggles display of faux-input border-color */
+  &:checked + label [data-wui-faux-input='true'] {
+    border-color: ${({ disabled }) => disabled ? "var(--wui-color-bg-border-disabled)" : "var(--wui-color-bg-fill)"};
+  }
 
-  ${({ $disabled }) => $disabled && disabledStyle5};
+  /* toggles display of RadioIcon */
+  &:checked + label svg {
+    display: block;
+  }
 `;
 var Radio = (0, import_react43.forwardRef)(
   ({
@@ -10493,12 +10515,14 @@ var Radio = (0, import_react43.forwardRef)(
               controlSlot: /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
                 StyledRadioInput,
                 {
+                  $disabled: disabled,
                   $size: size,
                   "data-wui-faux-input": "true",
                   children: /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(RadioIcon, {})
                 }
               ),
               description,
+              disabled,
               hideLabel,
               htmlFor: computedId,
               label