@wistia/ui 0.6.22 → 0.6.23

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.22
+ * @license @wistia/ui v0.6.23
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -1125,6 +1125,7 @@ var colorAliasTokens = css4`
 
   /* 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);
@@ -7483,6 +7484,7 @@ ScreenReaderOnly.displayName = "ScreenReaderOnly";
 // src/private/components/FormControlLabel/FormControlLabel.tsx
 import { jsx as jsx201, jsxs as jsxs12 } from "react/jsx-runtime";
 var disabledStyle2 = css19`
+  cursor: not-allowed;
   color: var(--wui-color-text-disabled);
 `;
 var StyledLabelWrapper = styled17.div`
@@ -7552,10 +7554,6 @@ var CheckIcon = () => /* @__PURE__ */ jsx202(
     )
   }
 );
-var disabledStyle3 = css20`
-  cursor: not-allowed;
-  opacity: 0.5;
-`;
 var inputSizeSmall = css20`
   width: 14px;
   height: 14px;
@@ -7574,36 +7572,36 @@ var inputSizeLarge = css20`
   min-width: 20px;
   min-height: 20px;
 `;
+var getSizeCss = (size) => {
+  if (size === "sm") return inputSizeSmall;
+  if (size === "lg") return inputSizeLarge;
+  return inputSizeMedium;
+};
 var StyledCheckboxWrapper = styled18.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 = styled18.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;
+  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: var(--wui-color-bg-fill-white);
+      fill: ${({ $disabled }) => $disabled ? "var(--wui-color-icon-disabled)" : "var(--wui-color-bg-fill-white)"};
     }
   }
 `;
@@ -7612,7 +7610,7 @@ var StyledHiddenCheckboxInput = styled18.input`
 
   /* toggles display of faux-input background-color */
   &:checked + label [data-wui-faux-input='true'] {
-    background-color: var(--wui-color-bg-fill);
+    background-color: ${({ disabled }) => disabled ? "var(--wui-color-bg-surface-disabled)" : "var(--wui-color-bg-fill)"};
   }
 
   /* toggles display of CheckIcon */
@@ -7637,47 +7635,42 @@ var Checkbox = forwardRef6(
   }, ref) => {
     const generatedId = useId();
     const computedId = isNonEmptyString2(id) ? id : `wistia-ui-checkbox-${generatedId}`;
-    return /* @__PURE__ */ jsxs13(
-      StyledCheckboxWrapper,
-      {
-        ref,
-        disabled,
-        children: [
-          /* @__PURE__ */ jsx202(
-            StyledHiddenCheckboxInput,
+    return /* @__PURE__ */ jsxs13(StyledCheckboxWrapper, { disabled, children: [
+      /* @__PURE__ */ jsx202(
+        StyledHiddenCheckboxInput,
+        {
+          ...props,
+          ref,
+          checked,
+          disabled,
+          id: computedId,
+          name,
+          onChange,
+          required,
+          type: "checkbox",
+          value
+        }
+      ),
+      /* @__PURE__ */ jsx202(
+        FormControlLabel,
+        {
+          controlSlot: /* @__PURE__ */ jsx202(
+            StyledCheckboxInput,
             {
-              ...props,
-              ref,
-              checked,
-              disabled,
-              id: computedId,
-              name,
-              onChange,
-              required,
-              type: "checkbox",
-              value
+              $disabled: disabled,
+              $size: size,
+              "data-wui-faux-input": "true",
+              children: /* @__PURE__ */ jsx202(CheckIcon, {})
             }
           ),
-          /* @__PURE__ */ jsx202(
-            FormControlLabel,
-            {
-              controlSlot: /* @__PURE__ */ jsx202(
-                StyledCheckboxInput,
-                {
-                  $size: size,
-                  "data-wui-faux-input": "true",
-                  children: /* @__PURE__ */ jsx202(CheckIcon, {})
-                }
-              ),
-              description,
-              hideLabel,
-              htmlFor: computedId,
-              label
-            }
-          )
-        ]
-      }
-    );
+          description,
+          disabled,
+          hideLabel,
+          htmlFor: computedId,
+          label
+        }
+      )
+    ] });
   }
 );
 Checkbox.displayName = "Checkbox";
@@ -8950,7 +8943,7 @@ var requiredStyle = css27`
     content: '*';
   }
 `;
-var disabledStyle4 = css27`
+var disabledStyle3 = css27`
   color: var(--wui-color-text-disabled);
 `;
 var StyledLabel3 = styled32.label`
@@ -8974,7 +8967,7 @@ var StyledLabel3 = styled32.label`
   }
 
   ${({ $screenReaderOnly }) => $screenReaderOnly && visuallyHiddenStyle}
-  ${({ $disabled }) => $disabled && disabledStyle4}
+  ${({ $disabled }) => $disabled && disabledStyle3}
   ${({ $required }) => $required && requiredStyle}
 `;
 var Label = ({
@@ -10289,19 +10282,6 @@ var RadioIcon = () => /* @__PURE__ */ jsx241(
     )
   }
 );
-var StyledHiddenRadioInput = styled49.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 = css30`
   width: 14px;
   height: 14px;
@@ -10325,37 +10305,46 @@ var getSizeCss2 = (size) => {
   if (size === "lg") return inputSizeLarge2;
   return inputSizeMedium2;
 };
+var StyledRadioWrapper = styled49.div`
+  display: flex;
+  margin: 0;
+
+  /* TODO this solves a problem but potentially causes and a11y issue */
+  user-select: none;
+`;
 var StyledRadioInput = styled49.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;
+  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 {
     display: none;
 
     circle {
-      fill: var(--wui-color-bg-fill);
+      fill: ${({ $disabled }) => $disabled ? "var(--wui-color-icon-disabled)" : "var(--wui-color-bg-fill)"};
     }
   }
 `;
-var disabledStyle5 = css30`
-  cursor: not-allowed;
-  opacity: 0.5;
-`;
-var StyledRadioWrapper = styled49.div`
-  display: flex;
-  margin: 0;
+var StyledHiddenRadioInput = styled49.input`
+  ${visuallyHiddenStyle}
 
-  /* TODO this solves a problem but potentially causes and a11y issue */
-  user-select: none;
+  /* toggles display of faux-input background-color */
+  &:checked + label [data-wui-faux-input='true'] {
+    border-color: ${({ disabled }) => disabled ? "var(--wui-color-bg-surface-disabled)" : "var(--wui-color-bg-fill)"};
+  }
 
-  ${({ $disabled }) => $disabled && disabledStyle5};
+  /* toggles display of RadioIcon */
+  &:checked + label svg {
+    display: block;
+  }
 `;
 var Radio = forwardRef18(
   ({
@@ -10401,12 +10390,14 @@ var Radio = forwardRef18(
               controlSlot: /* @__PURE__ */ jsx241(
                 StyledRadioInput,
                 {
+                  $disabled: disabled,
                   $size: size,
                   "data-wui-faux-input": "true",
                   children: /* @__PURE__ */ jsx241(RadioIcon, {})
                 }
               ),
               description,
+              disabled,
               hideLabel,
               htmlFor: computedId,
               label