@wistia/ui 0.6.21 → 0.6.22-beta.40584006.8e9fb4e

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.21
+ * @license @wistia/ui v0.6.22-beta.40584006.8e9fb4e
  *
  * 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);
@@ -2233,6 +2234,7 @@ var ellipsisStyle = import_styled_components14.css`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  display: block;
 
   /*
     Using feature detection (i.e., -webkit-named-image) we only target Safari browsers
@@ -2255,7 +2257,7 @@ var ellipsisStyle = import_styled_components14.css`
 var ellipsisFlexParentStyle = import_styled_components14.css`
   min-width: 0;
 `;
-var EllipsisComponent = import_styled_components14.default.div`
+var EllipsisComponent = import_styled_components14.default.span`
   ${ellipsisStyle};
   ${({ $lines }) => {
   if ((0, import_type_guards8.isNotNil)($lines)) {
@@ -7531,12 +7533,12 @@ Card.displayName = "Card";
 
 // src/components/Checkbox/Checkbox.tsx
 var import_react18 = require("react");
-var import_styled_components33 = __toESM(require("styled-components"));
-var import_type_guards21 = require("@wistia/type-guards");
+var import_styled_components34 = __toESM(require("styled-components"));
+var import_type_guards22 = require("@wistia/type-guards");
 
 // src/private/components/FormControlLabel/FormControlLabel.tsx
-var import_styled_components32 = __toESM(require("styled-components"));
-var import_type_guards20 = require("@wistia/type-guards");
+var import_styled_components33 = __toESM(require("styled-components"));
+var import_type_guards21 = require("@wistia/type-guards");
 
 // src/private/components/FormControlLabel/FormControlLabelDescription.tsx
 var import_styled_components31 = __toESM(require("styled-components"));
@@ -7574,16 +7576,39 @@ var FormControlLabelDescription = ({
 };
 FormControlLabelDescription.displayName = "FormControlLabelDescription";
 
-// src/private/components/FormControlLabel/FormControlLabel.tsx
+// src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
+var import_styled_components32 = __toESM(require("styled-components"));
+var import_type_guards20 = require("@wistia/type-guards");
 var import_jsx_runtime200 = require("react/jsx-runtime");
-var disabledStyle2 = import_styled_components32.css`
+var VisuallyHidden = import_styled_components32.default.div({ ...visuallyHiddenStyle });
+var VisuallyHiddenButFocusable = import_styled_components32.default.div({
+  "&:not(:focus-within)": visuallyHiddenStyle
+});
+var ScreenReaderOnly = ({
+  text,
+  children,
+  focusable = false,
+  ...otherProps
+}) => {
+  const accessibleText = (0, import_type_guards20.isNotNil)(text) ? text : children;
+  if (focusable) {
+    return /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(VisuallyHidden, { ...otherProps, children: accessibleText });
+};
+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_components32.default.div`
+var StyledLabelWrapper = import_styled_components33.default.div`
   display: flex;
   flex-direction: column;
 `;
-var StyledFormControlLabel = import_styled_components32.default.label`
+var StyledFormControlLabel = import_styled_components33.default.label`
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -7602,23 +7627,25 @@ var FormControlLabel = ({
   disabled = false,
   controlSlot,
   htmlFor,
+  hideLabel = false,
   ...props
 }) => {
-  if ((0, import_type_guards20.isNil)(label)) {
+  if ((0, import_type_guards21.isNil)(label)) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)(
+  const labelContent = hideLabel ? /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(ScreenReaderOnly, { children: label }) : /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)(StyledLabelWrapper, { children: [
+    label,
+    /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(FormControlLabelDescription, { children: description })
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)(
     StyledFormControlLabel,
     {
       $disabled: disabled,
       htmlFor,
       ...props,
       children: [
-        (0, import_type_guards20.isNotNil)(controlSlot) ? controlSlot : null,
-        /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)(StyledLabelWrapper, { children: [
-          label,
-          /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(FormControlLabelDescription, { children: description })
-        ] })
+        (0, import_type_guards21.isNotNil)(controlSlot) ? controlSlot : null,
+        labelContent
       ]
     }
   );
@@ -7626,8 +7653,8 @@ var FormControlLabel = ({
 FormControlLabel.displayName = "FormControlLabel";
 
 // src/components/Checkbox/Checkbox.tsx
-var import_jsx_runtime201 = require("react/jsx-runtime");
-var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
+var import_jsx_runtime202 = require("react/jsx-runtime");
+var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
   "svg",
   {
     fill: "inherit",
@@ -7635,7 +7662,7 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
     viewBox: "0 0 10 8",
     width: "10",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
       "path",
       {
         d: "M3.47281 7.19303L0.377565 4.07999C0.191609 3.89297 0.191609 3.58973 0.377565 3.40268L1.05098 2.72537C1.23694 2.53833 1.53847 2.53833 1.72442 2.72537L3.80953 4.82245L8.27558 0.330729C8.46154 0.143704 8.76306 0.143704 8.94902 0.330729L9.62244 1.00804C9.8084 1.19506 9.8084 1.49831 9.62244 1.68535L4.14624 7.19305C3.96027 7.38008 3.65876 7.38008 3.47281 7.19303Z",
@@ -7644,67 +7671,63 @@ var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
     )
   }
 );
-var disabledStyle3 = import_styled_components33.css`
-  cursor: not-allowed;
-  opacity: 0.5;
-`;
-var inputSizeSmall = import_styled_components33.css`
+var inputSizeSmall = import_styled_components34.css`
   width: 14px;
   height: 14px;
   min-width: 14px;
   min-height: 14px;
 `;
-var inputSizeMedium = import_styled_components33.css`
+var inputSizeMedium = import_styled_components34.css`
   width: 16px;
   height: 16px;
   min-width: 16px;
   min-height: 16px;
 `;
-var inputSizeLarge = import_styled_components33.css`
+var inputSizeLarge = import_styled_components34.css`
   width: 20px;
   height: 20px;
   min-width: 20px;
   min-height: 20px;
 `;
-var StyledCheckboxWrapper = import_styled_components33.default.div`
+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_components33.default.div`
+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;
+  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)"};
     }
   }
 `;
-var StyledHiddenCheckboxInput = import_styled_components33.default.input`
+var StyledHiddenCheckboxInput = import_styled_components34.default.input`
   ${visuallyHiddenStyle}
 
   /* 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 */
@@ -7724,50 +7747,47 @@ var Checkbox = (0, import_react18.forwardRef)(
     size = "md",
     value,
     required = false,
+    hideLabel = false,
     ...props
   }, ref) => {
     const generatedId = (0, import_react18.useId)();
-    const computedId = (0, import_type_guards21.isNonEmptyString)(id) ? id : `wistia-ui-checkbox-${generatedId}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)(
-      StyledCheckboxWrapper,
-      {
-        ref,
-        disabled,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
-            StyledHiddenCheckboxInput,
+    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,
             {
-              ...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_runtime201.jsx)(
-            FormControlLabel,
-            {
-              controlSlot: /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
-                StyledCheckboxInput,
-                {
-                  $size: size,
-                  "data-wui-faux-input": "true",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(CheckIcon, {})
-                }
-              ),
-              description,
-              htmlFor: computedId,
-              label
-            }
-          )
-        ]
-      }
-    );
+          description,
+          disabled,
+          hideLabel,
+          htmlFor: computedId,
+          label
+        }
+      )
+    ] });
   }
 );
 Checkbox.displayName = "Checkbox";
@@ -7809,10 +7829,10 @@ ClickRegion.displayName = "ClickRegion";
 
 // src/components/Collapsible/Collapsible.tsx
 var import_react_collapsible = require("@radix-ui/react-collapsible");
-var import_type_guards22 = require("@wistia/type-guards");
-var import_styled_components34 = __toESM(require("styled-components"));
-var import_jsx_runtime202 = require("react/jsx-runtime");
-var StyledRoot = (0, import_styled_components34.default)(import_react_collapsible.Root)`
+var import_type_guards23 = require("@wistia/type-guards");
+var import_styled_components35 = __toESM(require("styled-components"));
+var import_jsx_runtime203 = require("react/jsx-runtime");
+var StyledRoot = (0, import_styled_components35.default)(import_react_collapsible.Root)`
   &[data-state='closed'] [data-wui-collapsible-content] {
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -7826,84 +7846,84 @@ var Collapsible = ({
   onOpenChange
 }) => {
   const controlProps = {
-    ...(0, import_type_guards22.isNotNil)(onOpenChange) && (0, import_type_guards22.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
+    ...(0, import_type_guards23.isNotNil)(onOpenChange) && (0, import_type_guards23.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(StyledRoot, { ...controlProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(StyledRoot, { ...controlProps, children });
 };
 Collapsible.displayName = "Collapsible";
 
 // src/components/Collapsible/CollapsibleTrigger.tsx
 var import_react20 = require("react");
 var import_react_collapsible2 = require("@radix-ui/react-collapsible");
-var import_jsx_runtime203 = require("react/jsx-runtime");
+var import_jsx_runtime204 = require("react/jsx-runtime");
 var CollapsibleTrigger = ({ children }) => {
   import_react20.Children.only(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(import_react_collapsible2.Trigger, { asChild: true, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(import_react_collapsible2.Trigger, { asChild: true, children });
 };
 
 // src/components/Collapsible/CollapsibleContent.tsx
-var import_styled_components35 = __toESM(require("styled-components"));
+var import_styled_components36 = __toESM(require("styled-components"));
 var import_react_collapsible3 = require("@radix-ui/react-collapsible");
-var import_type_guards23 = require("@wistia/type-guards");
-var import_jsx_runtime204 = require("react/jsx-runtime");
-var ClampedContent = import_styled_components35.default.div.attrs({ "data-wui-collapsible-content": true })`
+var import_type_guards24 = require("@wistia/type-guards");
+var import_jsx_runtime205 = require("react/jsx-runtime");
+var ClampedContent = import_styled_components36.default.div.attrs({ "data-wui-collapsible-content": true })`
   --wui-collapsible-content-clamp-lines: ${({ $clamp }) => $clamp};
 `;
 var CollapsibleContent = ({ clamp, children }) => {
-  if ((0, import_type_guards23.isNotUndefined)(clamp)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(ClampedContent, { $clamp: clamp, children });
+  if ((0, import_type_guards24.isNotUndefined)(clamp)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(ClampedContent, { $clamp: clamp, children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(import_react_collapsible3.Content, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime204.jsxs)(import_jsx_runtime204.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(import_react_collapsible3.Content, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime205.jsxs)(import_jsx_runtime205.Fragment, { children: [
     children,
     " "
   ] }) });
 };
 
 // src/components/DataCards/DataCard.tsx
-var import_styled_components37 = __toESM(require("styled-components"));
-var import_type_guards24 = require("@wistia/type-guards");
+var import_styled_components38 = __toESM(require("styled-components"));
+var import_type_guards25 = require("@wistia/type-guards");
 
 // src/components/Heading/Heading.tsx
 var import_react21 = require("react");
-var import_styled_components36 = __toESM(require("styled-components"));
-var import_jsx_runtime205 = require("react/jsx-runtime");
-var heroStyle = import_styled_components36.css`
+var import_styled_components37 = __toESM(require("styled-components"));
+var import_jsx_runtime206 = require("react/jsx-runtime");
+var heroStyle = import_styled_components37.css`
   --font-family: var(--wui-typography-heading-hero-family);
   --font-size: var(--wui-typography-heading-hero-size);
   --font-weight: var(--wui-typography-heading-hero-weight);
   --line-height: var(--wui-typography-heading-hero-line-height);
 `;
-var heading1TextStyle = import_styled_components36.css`
+var heading1TextStyle = import_styled_components37.css`
   --font-family: var(--wui-typography-heading-1-family);
   --font-size: var(--wui-typography-heading-1-size);
   --font-weight: var(--wui-typography-heading-1-weight);
   --line-height: var(--wui-typography-heading-1-line-height);
 `;
-var heading2TextStyle = import_styled_components36.css`
+var heading2TextStyle = import_styled_components37.css`
   --font-family: var(--wui-typography-heading-2-family);
   --font-size: var(--wui-typography-heading-2-size);
   --font-weight: var(--wui-typography-heading-2-weight);
   --line-height: var(--wui-typography-heading-2-line-height);
 `;
-var heading3TextStyle = import_styled_components36.css`
+var heading3TextStyle = import_styled_components37.css`
   --font-family: var(--wui-typography-heading-3-family);
   --font-size: var(--wui-typography-heading-3-size);
   --font-weight: var(--wui-typography-heading-3-weight);
   --line-height: var(--wui-typography-heading-3-line-height);
 `;
-var heading4TextStyle = import_styled_components36.css`
+var heading4TextStyle = import_styled_components37.css`
   --font-family: var(--wui-typography-heading-4-family);
   --font-size: var(--wui-typography-heading-4-size);
   --font-weight: var(--wui-typography-heading-4-weight);
   --line-height: var(--wui-typography-heading-4-line-height);
 `;
-var heading5TextStyle = import_styled_components36.css`
+var heading5TextStyle = import_styled_components37.css`
   --font-family: var(--wui-typography-heading-5-family);
   --font-size: var(--wui-typography-heading-5-size);
   --font-weight: var(--wui-typography-heading-5-weight);
   --line-height: var(--wui-typography-heading-5-line-height);
 `;
-var heading6TextStyle = import_styled_components36.css`
+var heading6TextStyle = import_styled_components37.css`
   --font-family: var(--wui-typography-heading-6-family);
   --font-size: var(--wui-typography-heading-6-size);
   --font-weight: var(--wui-typography-heading-6-weight);
@@ -7919,7 +7939,7 @@ var variantStyleMap = {
   heading6: heading6TextStyle
 };
 var DEFAULT_ELEMENT2 = "h1";
-var StyledHeading = import_styled_components36.default.div`
+var StyledHeading = import_styled_components37.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-family: var(--font-family);
   font-size: var(--font-size);
@@ -7928,16 +7948,16 @@ var StyledHeading = import_styled_components36.default.div`
   color: var(--wui-color-text);
   ${({ $variant }) => variantStyleMap[$variant]}
   ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
-  ${({ $inline }) => $inline && import_styled_components36.css`
+  ${({ $inline }) => $inline && import_styled_components37.css`
       display: inline-block;
     `}
-  ${({ $disabled }) => $disabled && import_styled_components36.css`
+  ${({ $disabled }) => $disabled && import_styled_components37.css`
       color: var(--wui-color-text-disabled);
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components36.css`
+  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components37.css`
       user-select: none;
     `}
-  ${({ $align }) => import_styled_components36.css`
+  ${({ $align }) => import_styled_components37.css`
     text-align: ${$align};
   `}
   margin: 0;
@@ -7962,7 +7982,7 @@ var HeadingComponent = (0, import_react21.forwardRef)(
     variant = "heading1",
     renderAs,
     ...otherProps
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(
     StyledHeading,
     {
       ref,
@@ -7982,8 +8002,8 @@ HeadingComponent.displayName = "Heading";
 var Heading = makePolymorphic(HeadingComponent);
 
 // src/components/DataCards/DataCard.tsx
-var import_jsx_runtime206 = require("react/jsx-runtime");
-var StyledDataCard = import_styled_components37.default.div`
+var import_jsx_runtime207 = require("react/jsx-runtime");
+var StyledDataCard = import_styled_components38.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   display: grid;
   grid-template-areas: 'label slot' 'value value';
@@ -7996,7 +8016,7 @@ var StyledDataCard = import_styled_components37.default.div`
   border-radius: var(--wui-border-radius-02);
   position: relative;
 `;
-var shimmer = import_styled_components37.keyframes`
+var shimmer = import_styled_components38.keyframes`
   0% {
     background-position: 200% 0;
   }
@@ -8004,7 +8024,7 @@ var shimmer = import_styled_components37.keyframes`
     background-position: -200% 0;
   }
 `;
-var LoadingBackground = import_styled_components37.default.div`
+var LoadingBackground = import_styled_components38.default.div`
   background: linear-gradient(
     90deg,
     var(--wui-color-bg-surface-tertiary) 25%,
@@ -8015,27 +8035,27 @@ var LoadingBackground = import_styled_components37.default.div`
   animation: ${shimmer} 1.5s infinite;
   border-radius: var(--wui-border-radius-01);
 `;
-var StyledLoadingLabel = (0, import_styled_components37.default)(LoadingBackground)`
+var StyledLoadingLabel = (0, import_styled_components38.default)(LoadingBackground)`
   width: 80px;
   height: var(--wui-typography-heading-6-line-height);
 `;
-var StyledLoadingValue = (0, import_styled_components37.default)(LoadingBackground)`
+var StyledLoadingValue = (0, import_styled_components38.default)(LoadingBackground)`
   width: 90%;
   height: var(--wui-typography-heading-3-line-height);
 `;
-var StyledLabel2 = (0, import_styled_components37.default)(Heading)`
+var StyledLabel2 = (0, import_styled_components38.default)(Heading)`
   grid-area: label;
 `;
-var StyledValue = (0, import_styled_components37.default)(Heading)`
+var StyledValue = (0, import_styled_components38.default)(Heading)`
   grid-area: value;
 `;
-var StyledSlot = import_styled_components37.default.div`
+var StyledSlot = import_styled_components38.default.div`
   display: flex;
   justify-content: flex-end;
   grid-area: slot;
   align-self: center;
 `;
-var StyledDataCardTrendContainer = import_styled_components37.default.div`
+var StyledDataCardTrendContainer = import_styled_components38.default.div`
   position: absolute;
   bottom: var(--wui-space-01);
   right: var(--wui-space-01);
@@ -8048,39 +8068,39 @@ var DataCard = ({
   isLoading = false,
   trend,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime207.jsxs)(
   StyledDataCard,
   {
     $colorScheme: colorScheme,
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(
         StyledLabel2,
         {
           renderAs: "dt",
           variant: "heading6",
-          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(StyledLoadingLabel, {}) : label
+          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(StyledLoadingLabel, {}) : label
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(
         StyledValue,
         {
           renderAs: "dd",
           variant: "heading3",
-          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(StyledLoadingValue, {}) : value
+          children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(StyledLoadingValue, {}) : value
         }
       ),
-      (0, import_type_guards24.isNotNull)(upperRightSlot) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(StyledSlot, { children: upperRightSlot }),
-      (0, import_type_guards24.isNotNull)(trend) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(StyledDataCardTrendContainer, { children: trend })
+      (0, import_type_guards25.isNotNull)(upperRightSlot) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(StyledSlot, { children: upperRightSlot }),
+      (0, import_type_guards25.isNotNull)(trend) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(StyledDataCardTrendContainer, { children: trend })
     ]
   }
 );
 DataCard.displayName = "DataCard";
 
 // src/components/DataCards/DataCards.tsx
-var import_styled_components38 = __toESM(require("styled-components"));
-var import_jsx_runtime207 = require("react/jsx-runtime");
-var StyledDataCards = (0, import_styled_components38.default)(Box)`
+var import_styled_components39 = __toESM(require("styled-components"));
+var import_jsx_runtime208 = require("react/jsx-runtime");
+var StyledDataCards = (0, import_styled_components39.default)(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   margin-top: 0; /* Remove default <dl> style */
   > * {
@@ -8094,7 +8114,7 @@ var DataCards = ({
   colorScheme = "inherit",
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime207.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
     StyledDataCards,
     {
       ...props,
@@ -8112,25 +8132,25 @@ var DataCards = ({
 DataCards.displayName = "DataCards";
 
 // src/components/DataCards/DataCardTrend.tsx
-var import_styled_components40 = __toESM(require("styled-components"));
+var import_styled_components41 = __toESM(require("styled-components"));
 
 // src/components/Text/Text.tsx
 var import_react22 = require("react");
-var import_styled_components39 = __toESM(require("styled-components"));
-var import_jsx_runtime208 = require("react/jsx-runtime");
-var bodyBoldStyles = import_styled_components39.css`
+var import_styled_components40 = __toESM(require("styled-components"));
+var import_jsx_runtime209 = require("react/jsx-runtime");
+var bodyBoldStyles = import_styled_components40.css`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-body-bold);
   }
 `;
-var labelBoldStyles = import_styled_components39.css`
+var labelBoldStyles = import_styled_components40.css`
   > strong,
   b {
     font-weight: var(--wui-typography-weight-label-bold);
   }
 `;
-var body1TextStyle = import_styled_components39.css`
+var body1TextStyle = import_styled_components40.css`
   --font-family: var(--wui-typography-body-1-family);
   --font-size: var(--wui-typography-body-1-size);
   --font-weight: var(--wui-typography-body-1-weight);
@@ -8138,7 +8158,7 @@ var body1TextStyle = import_styled_components39.css`
   --paragraph-spacing: var(--wui-typography-body-1-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body2TextStyle = import_styled_components39.css`
+var body2TextStyle = import_styled_components40.css`
   --font-family: var(--wui-typography-body-2-family);
   --font-size: var(--wui-typography-body-2-size);
   --font-weight: var(--wui-typography-body-2-weight);
@@ -8146,7 +8166,7 @@ var body2TextStyle = import_styled_components39.css`
   --paragraph-spacing: var(--wui-typography-body-2-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body3TextStyle = import_styled_components39.css`
+var body3TextStyle = import_styled_components40.css`
   --font-family: var(--wui-typography-body-3-family);
   --font-size: var(--wui-typography-body-3-size);
   --font-weight: var(--wui-typography-body-3-weight);
@@ -8154,7 +8174,7 @@ var body3TextStyle = import_styled_components39.css`
   --paragraph-spacing: var(--wui-typography-body-3-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var body4TextStyle = import_styled_components39.css`
+var body4TextStyle = import_styled_components40.css`
   --font-family: var(--wui-typography-body-4-family);
   --font-size: var(--wui-typography-body-4-size);
   --font-weight: var(--wui-typography-body-4-weight);
@@ -8162,47 +8182,47 @@ var body4TextStyle = import_styled_components39.css`
   --paragraph-spacing: var(--wui-typography-body-4-paragraph-spacing);
   ${bodyBoldStyles}
 `;
-var label1TextStyle = import_styled_components39.css`
+var label1TextStyle = import_styled_components40.css`
   --font-family: var(--wui-typography-label-1-family);
   --font-size: var(--wui-typography-label-1-size);
   --font-weight: var(--wui-typography-label-1-weight);
   --line-height: var(--wui-typography-label-1-line-height);
   ${labelBoldStyles}
 `;
-var label2TextStyle = import_styled_components39.css`
+var label2TextStyle = import_styled_components40.css`
   --font-family: var(--wui-typography-label-2-family);
   --font-size: var(--wui-typography-label-2-size);
   --font-weight: var(--wui-typography-label-2-weight);
   --line-height: var(--wui-typography-label-2-line-height);
   ${labelBoldStyles}
 `;
-var label3TextStyle = import_styled_components39.css`
+var label3TextStyle = import_styled_components40.css`
   --font-family: var(--wui-typography-label-3-family);
   --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);
   ${labelBoldStyles}
 `;
-var label4TextStyle = import_styled_components39.css`
+var label4TextStyle = import_styled_components40.css`
   --font-family: var(--wui-typography-label-4-family);
   --font-size: var(--wui-typography-label-4-size);
   --font-weight: var(--wui-typography-label-4-weight);
   --line-height: var(--wui-typography-label-4-line-height);
   ${labelBoldStyles}
 `;
-var body1MonoTextStyle = import_styled_components39.css`
+var body1MonoTextStyle = import_styled_components40.css`
   ${body1TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body2MonoTextStyle = import_styled_components39.css`
+var body2MonoTextStyle = import_styled_components40.css`
   ${body2TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body3MonoTextStyle = import_styled_components39.css`
+var body3MonoTextStyle = import_styled_components40.css`
   ${body3TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
-var body4MonoTextStyle = import_styled_components39.css`
+var body4MonoTextStyle = import_styled_components40.css`
   ${body4TextStyle};
   --font-family: var(--wui-typography-family-mono);
 `;
@@ -8237,7 +8257,7 @@ var variantElementMap2 = {
   label3: labelElement,
   label4: labelElement
 };
-var StyledText = import_styled_components39.default.div`
+var StyledText = import_styled_components40.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   --text-color: ${({ $prominence, $disabled }) => {
   if ($disabled) {
@@ -8261,19 +8281,19 @@ var StyledText = import_styled_components39.default.div`
   margin: 0;
   ${({ $variant }) => variantStyleMap2[$variant]}
   ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
-  ${({ $inline }) => $inline && import_styled_components39.css`
+  ${({ $inline }) => $inline && import_styled_components40.css`
       display: inline-block;
     `}
-  ${({ $disabled }) => $disabled && import_styled_components39.css`
+  ${({ $disabled }) => $disabled && import_styled_components40.css`
       --text-color: var(--wui-color-text-disabled);
     `}
-  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components39.css`
+  ${({ $preventUserSelect }) => $preventUserSelect && import_styled_components40.css`
       user-select: none;
     `}
-  ${({ $align }) => import_styled_components39.css`
+  ${({ $align }) => import_styled_components40.css`
     text-align: ${$align};
   `}
-  ${({ as }) => as === "p" && import_styled_components39.css`
+  ${({ as }) => as === "p" && import_styled_components40.css`
       display: block;
 
       + p {
@@ -8294,7 +8314,7 @@ var TextComponent = (0, import_react22.forwardRef)(
     renderAs,
     ...otherProps
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(
       StyledText,
       {
         ref,
@@ -8316,8 +8336,8 @@ TextComponent.displayName = "Text";
 var Text = makePolymorphic(TextComponent);
 
 // src/components/DataCards/DataCardTrend.tsx
-var import_jsx_runtime209 = require("react/jsx-runtime");
-var StyledDataCardTrend = import_styled_components40.default.div`
+var import_jsx_runtime210 = require("react/jsx-runtime");
+var StyledDataCardTrend = import_styled_components41.default.div`
   ${({ $outlook }) => getColorScheme($outlook === "positive" ? "success" : "error")};
   background: var(--wui-color-bg-app);
   border-radius: var(--wui-border-radius-rounded);
@@ -8332,8 +8352,8 @@ var DataCardTrend = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime209.jsxs)(StyledDataCardTrend, { $outlook: outlook, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime210.jsxs)(StyledDataCardTrend, { $outlook: outlook, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(
       Icon,
       {
         size: "md",
@@ -8341,7 +8361,7 @@ var DataCardTrend = ({
         ...props
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(
       Text,
       {
         prominence: "secondary",
@@ -8353,22 +8373,22 @@ var DataCardTrend = ({
 };
 
 // src/components/Divider/Divider.tsx
-var import_styled_components41 = __toESM(require("styled-components"));
-var import_jsx_runtime210 = require("react/jsx-runtime");
-var horizontalBorderCss = import_styled_components41.css`
+var import_styled_components42 = __toESM(require("styled-components"));
+var import_jsx_runtime211 = require("react/jsx-runtime");
+var horizontalBorderCss = import_styled_components42.css`
   border-top-color: var(--wui-color-border);
   border-top-style: solid;
   border-top-width: 1px;
   clear: both; /* for horizontal dividers, ensure it clears any floats */
   height: 0;
 `;
-var verticalBorderCss = import_styled_components41.css`
+var verticalBorderCss = import_styled_components42.css`
   background-color: var(--wui-color-border);
   max-width: 1px;
   min-height: 100%;
   width: 1px;
 `;
-var DividerComponent = import_styled_components41.default.div`
+var DividerComponent = import_styled_components42.default.div`
   ${({ $orientation }) => {
   switch ($orientation) {
     case "vertical":
@@ -8383,7 +8403,7 @@ var Divider = ({
   orientation = "horizontal",
   ...otherProps
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(
     DividerComponent,
     {
       $orientation: orientation,
@@ -8399,28 +8419,6 @@ Divider.displayName = "Divider";
 var import_styled_components45 = __toESM(require("styled-components"));
 var import_react24 = require("react");
 
-// src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
-var import_styled_components42 = __toESM(require("styled-components"));
-var import_type_guards25 = require("@wistia/type-guards");
-var import_jsx_runtime211 = require("react/jsx-runtime");
-var VisuallyHidden = import_styled_components42.default.div({ ...visuallyHiddenStyle });
-var VisuallyHiddenButFocusable = import_styled_components42.default.div({
-  "&:not(:focus-within)": visuallyHiddenStyle
-});
-var ScreenReaderOnly = ({
-  text,
-  children,
-  focusable = false,
-  ...otherProps
-}) => {
-  const accessibleText = (0, import_type_guards25.isNotNil)(text) ? text : children;
-  if (focusable) {
-    return /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(VisuallyHidden, { ...otherProps, children: accessibleText });
-};
-ScreenReaderOnly.displayName = "ScreenReaderOnly";
-
 // src/components/Tooltip/Tooltip.tsx
 var import_react_tooltip2 = require("@radix-ui/react-tooltip");
 var import_styled_components43 = __toESM(require("styled-components"));
@@ -9056,7 +9054,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`
@@ -9080,7 +9078,7 @@ var StyledLabel3 = import_styled_components48.default.label`
   }
 
   ${({ $screenReaderOnly }) => $screenReaderOnly && visuallyHiddenStyle}
-  ${({ $disabled }) => $disabled && disabledStyle4}
+  ${({ $disabled }) => $disabled && disabledStyle3}
   ${({ $required }) => $required && requiredStyle}
 `;
 var Label = ({
@@ -10431,7 +10429,7 @@ var StyledRadioInput = import_styled_components65.default.div`
     }
   }
 `;
-var disabledStyle5 = import_styled_components65.css`
+var disabledStyle4 = import_styled_components65.css`
   cursor: not-allowed;
   opacity: 0.5;
 `;
@@ -10442,7 +10440,7 @@ var StyledRadioWrapper = import_styled_components65.default.div`
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 
-  ${({ $disabled }) => $disabled && disabledStyle5};
+  ${({ $disabled }) => $disabled && disabledStyle4};
 `;
 var Radio = (0, import_react43.forwardRef)(
   ({
@@ -10456,6 +10454,7 @@ var Radio = (0, import_react43.forwardRef)(
     size = "md",
     value = "false",
     required = false,
+    hideLabel = false,
     ...props
   }, ref) => {
     const generatedId = (0, import_react43.useId)();
@@ -10493,6 +10492,7 @@ var Radio = (0, import_react43.forwardRef)(
                 }
               ),
               description,
+              hideLabel,
               htmlFor: computedId,
               label
             }