@wistia/ui 0.6.21 → 0.6.22

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.21
+ * @license @wistia/ui v0.6.22
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -2116,6 +2116,7 @@ var ellipsisStyle = css13`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  display: block;
 
   /*
     Using feature detection (i.e., -webkit-named-image) we only target Safari browsers
@@ -2138,7 +2139,7 @@ var ellipsisStyle = css13`
 var ellipsisFlexParentStyle = css13`
   min-width: 0;
 `;
-var EllipsisComponent = styled.div`
+var EllipsisComponent = styled.span`
   ${ellipsisStyle};
   ${({ $lines }) => {
   if (isNotNil2($lines)) {
@@ -7414,12 +7415,12 @@ Card.displayName = "Card";
 
 // src/components/Checkbox/Checkbox.tsx
 import { forwardRef as forwardRef6, useId } from "react";
-import styled17, { css as css20 } from "styled-components";
+import styled18, { css as css20 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString2 } from "@wistia/type-guards";
 
 // src/private/components/FormControlLabel/FormControlLabel.tsx
-import styled16, { css as css19 } from "styled-components";
-import { isNil as isNil12, isNotNil as isNotNil8 } from "@wistia/type-guards";
+import styled17, { css as css19 } from "styled-components";
+import { isNil as isNil12, isNotNil as isNotNil9 } from "@wistia/type-guards";
 
 // src/private/components/FormControlLabel/FormControlLabelDescription.tsx
 import styled15, { css as css18 } from "styled-components";
@@ -7457,16 +7458,38 @@ var FormControlLabelDescription = ({
 };
 FormControlLabelDescription.displayName = "FormControlLabelDescription";
 
+// src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
+import styled16 from "styled-components";
+import { isNotNil as isNotNil8 } from "@wistia/type-guards";
+import { jsx as jsx200 } from "react/jsx-runtime";
+var VisuallyHidden = styled16.div({ ...visuallyHiddenStyle });
+var VisuallyHiddenButFocusable = styled16.div({
+  "&:not(:focus-within)": visuallyHiddenStyle
+});
+var ScreenReaderOnly = ({
+  text,
+  children,
+  focusable = false,
+  ...otherProps
+}) => {
+  const accessibleText = isNotNil8(text) ? text : children;
+  if (focusable) {
+    return /* @__PURE__ */ jsx200(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
+  }
+  return /* @__PURE__ */ jsx200(VisuallyHidden, { ...otherProps, children: accessibleText });
+};
+ScreenReaderOnly.displayName = "ScreenReaderOnly";
+
 // src/private/components/FormControlLabel/FormControlLabel.tsx
-import { jsx as jsx200, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx201, jsxs as jsxs12 } from "react/jsx-runtime";
 var disabledStyle2 = css19`
   color: var(--wui-color-text-disabled);
 `;
-var StyledLabelWrapper = styled16.div`
+var StyledLabelWrapper = styled17.div`
   display: flex;
   flex-direction: column;
 `;
-var StyledFormControlLabel = styled16.label`
+var StyledFormControlLabel = styled17.label`
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -7485,11 +7508,16 @@ var FormControlLabel = ({
   disabled = false,
   controlSlot,
   htmlFor,
+  hideLabel = false,
   ...props
 }) => {
   if (isNil12(label)) {
     return null;
   }
+  const labelContent = hideLabel ? /* @__PURE__ */ jsx201(ScreenReaderOnly, { children: label }) : /* @__PURE__ */ jsxs12(StyledLabelWrapper, { children: [
+    label,
+    /* @__PURE__ */ jsx201(FormControlLabelDescription, { children: description })
+  ] });
   return /* @__PURE__ */ jsxs12(
     StyledFormControlLabel,
     {
@@ -7497,11 +7525,8 @@ var FormControlLabel = ({
       htmlFor,
       ...props,
       children: [
-        isNotNil8(controlSlot) ? controlSlot : null,
-        /* @__PURE__ */ jsxs12(StyledLabelWrapper, { children: [
-          label,
-          /* @__PURE__ */ jsx200(FormControlLabelDescription, { children: description })
-        ] })
+        isNotNil9(controlSlot) ? controlSlot : null,
+        labelContent
       ]
     }
   );
@@ -7509,8 +7534,8 @@ var FormControlLabel = ({
 FormControlLabel.displayName = "FormControlLabel";
 
 // src/components/Checkbox/Checkbox.tsx
-import { jsx as jsx201, jsxs as jsxs13 } from "react/jsx-runtime";
-var CheckIcon = () => /* @__PURE__ */ jsx201(
+import { jsx as jsx202, jsxs as jsxs13 } from "react/jsx-runtime";
+var CheckIcon = () => /* @__PURE__ */ jsx202(
   "svg",
   {
     fill: "inherit",
@@ -7518,7 +7543,7 @@ var CheckIcon = () => /* @__PURE__ */ jsx201(
     viewBox: "0 0 10 8",
     width: "10",
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx201(
+    children: /* @__PURE__ */ jsx202(
       "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",
@@ -7549,7 +7574,7 @@ var inputSizeLarge = css20`
   min-width: 20px;
   min-height: 20px;
 `;
-var StyledCheckboxWrapper = styled17.div`
+var StyledCheckboxWrapper = styled18.div`
   display: flex;
   margin: 0;
 
@@ -7563,7 +7588,7 @@ var getSizeCss = (size) => {
   if (size === "lg") return inputSizeLarge;
   return inputSizeMedium;
 };
-var StyledCheckboxInput = styled17.div`
+var StyledCheckboxInput = styled18.div`
   ${({ $size }) => getSizeCss($size)}
   line-height: 0;
   margin: 0;
@@ -7582,7 +7607,7 @@ var StyledCheckboxInput = styled17.div`
     }
   }
 `;
-var StyledHiddenCheckboxInput = styled17.input`
+var StyledHiddenCheckboxInput = styled18.input`
   ${visuallyHiddenStyle}
 
   /* toggles display of faux-input background-color */
@@ -7607,6 +7632,7 @@ var Checkbox = forwardRef6(
     size = "md",
     value,
     required = false,
+    hideLabel = false,
     ...props
   }, ref) => {
     const generatedId = useId();
@@ -7617,7 +7643,7 @@ var Checkbox = forwardRef6(
         ref,
         disabled,
         children: [
-          /* @__PURE__ */ jsx201(
+          /* @__PURE__ */ jsx202(
             StyledHiddenCheckboxInput,
             {
               ...props,
@@ -7632,18 +7658,19 @@ var Checkbox = forwardRef6(
               value
             }
           ),
-          /* @__PURE__ */ jsx201(
+          /* @__PURE__ */ jsx202(
             FormControlLabel,
             {
-              controlSlot: /* @__PURE__ */ jsx201(
+              controlSlot: /* @__PURE__ */ jsx202(
                 StyledCheckboxInput,
                 {
                   $size: size,
                   "data-wui-faux-input": "true",
-                  children: /* @__PURE__ */ jsx201(CheckIcon, {})
+                  children: /* @__PURE__ */ jsx202(CheckIcon, {})
                 }
               ),
               description,
+              hideLabel,
               htmlFor: computedId,
               label
             }
@@ -7692,10 +7719,10 @@ ClickRegion.displayName = "ClickRegion";
 
 // src/components/Collapsible/Collapsible.tsx
 import { Root } from "@radix-ui/react-collapsible";
-import { isNotNil as isNotNil9 } from "@wistia/type-guards";
-import styled18 from "styled-components";
-import { jsx as jsx202 } from "react/jsx-runtime";
-var StyledRoot = styled18(Root)`
+import { isNotNil as isNotNil10 } from "@wistia/type-guards";
+import styled19 from "styled-components";
+import { jsx as jsx203 } from "react/jsx-runtime";
+var StyledRoot = styled19(Root)`
   &[data-state='closed'] [data-wui-collapsible-content] {
     display: -webkit-box;
     -webkit-box-orient: vertical;
@@ -7709,47 +7736,47 @@ var Collapsible = ({
   onOpenChange
 }) => {
   const controlProps = {
-    ...isNotNil9(onOpenChange) && isNotNil9(isOpen) ? { open: isOpen, onOpenChange } : {}
+    ...isNotNil10(onOpenChange) && isNotNil10(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
-  return /* @__PURE__ */ jsx202(StyledRoot, { ...controlProps, children });
+  return /* @__PURE__ */ jsx203(StyledRoot, { ...controlProps, children });
 };
 Collapsible.displayName = "Collapsible";
 
 // src/components/Collapsible/CollapsibleTrigger.tsx
 import { Children as Children4 } from "react";
 import { Trigger } from "@radix-ui/react-collapsible";
-import { jsx as jsx203 } from "react/jsx-runtime";
+import { jsx as jsx204 } from "react/jsx-runtime";
 var CollapsibleTrigger = ({ children }) => {
   Children4.only(children);
-  return /* @__PURE__ */ jsx203(Trigger, { asChild: true, children });
+  return /* @__PURE__ */ jsx204(Trigger, { asChild: true, children });
 };
 
 // src/components/Collapsible/CollapsibleContent.tsx
-import styled19 from "styled-components";
+import styled20 from "styled-components";
 import { Content } from "@radix-ui/react-collapsible";
 import { isNotUndefined as isNotUndefined5 } from "@wistia/type-guards";
-import { Fragment as Fragment4, jsx as jsx204, jsxs as jsxs14 } from "react/jsx-runtime";
-var ClampedContent = styled19.div.attrs({ "data-wui-collapsible-content": true })`
+import { Fragment as Fragment4, jsx as jsx205, jsxs as jsxs14 } from "react/jsx-runtime";
+var ClampedContent = styled20.div.attrs({ "data-wui-collapsible-content": true })`
   --wui-collapsible-content-clamp-lines: ${({ $clamp }) => $clamp};
 `;
 var CollapsibleContent = ({ clamp, children }) => {
   if (isNotUndefined5(clamp)) {
-    return /* @__PURE__ */ jsx204(ClampedContent, { $clamp: clamp, children });
+    return /* @__PURE__ */ jsx205(ClampedContent, { $clamp: clamp, children });
   }
-  return /* @__PURE__ */ jsx204(Content, { asChild: true, children: /* @__PURE__ */ jsxs14(Fragment4, { children: [
+  return /* @__PURE__ */ jsx205(Content, { asChild: true, children: /* @__PURE__ */ jsxs14(Fragment4, { children: [
     children,
     " "
   ] }) });
 };
 
 // src/components/DataCards/DataCard.tsx
-import styled21, { keyframes } from "styled-components";
+import styled22, { keyframes } from "styled-components";
 import { isNotNull } from "@wistia/type-guards";
 
 // src/components/Heading/Heading.tsx
 import { forwardRef as forwardRef7 } from "react";
-import styled20, { css as css21 } from "styled-components";
-import { jsx as jsx205 } from "react/jsx-runtime";
+import styled21, { css as css21 } from "styled-components";
+import { jsx as jsx206 } from "react/jsx-runtime";
 var heroStyle = css21`
   --font-family: var(--wui-typography-heading-hero-family);
   --font-size: var(--wui-typography-heading-hero-size);
@@ -7802,7 +7829,7 @@ var variantStyleMap = {
   heading6: heading6TextStyle
 };
 var DEFAULT_ELEMENT2 = "h1";
-var StyledHeading = styled20.div`
+var StyledHeading = styled21.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-family: var(--font-family);
   font-size: var(--font-size);
@@ -7845,7 +7872,7 @@ var HeadingComponent = forwardRef7(
     variant = "heading1",
     renderAs,
     ...otherProps
-  }, ref) => /* @__PURE__ */ jsx205(
+  }, ref) => /* @__PURE__ */ jsx206(
     StyledHeading,
     {
       ref,
@@ -7865,8 +7892,8 @@ HeadingComponent.displayName = "Heading";
 var Heading = makePolymorphic(HeadingComponent);
 
 // src/components/DataCards/DataCard.tsx
-import { jsx as jsx206, jsxs as jsxs15 } from "react/jsx-runtime";
-var StyledDataCard = styled21.div`
+import { jsx as jsx207, jsxs as jsxs15 } from "react/jsx-runtime";
+var StyledDataCard = styled22.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   display: grid;
   grid-template-areas: 'label slot' 'value value';
@@ -7887,7 +7914,7 @@ var shimmer = keyframes`
     background-position: -200% 0;
   }
 `;
-var LoadingBackground = styled21.div`
+var LoadingBackground = styled22.div`
   background: linear-gradient(
     90deg,
     var(--wui-color-bg-surface-tertiary) 25%,
@@ -7898,27 +7925,27 @@ var LoadingBackground = styled21.div`
   animation: ${shimmer} 1.5s infinite;
   border-radius: var(--wui-border-radius-01);
 `;
-var StyledLoadingLabel = styled21(LoadingBackground)`
+var StyledLoadingLabel = styled22(LoadingBackground)`
   width: 80px;
   height: var(--wui-typography-heading-6-line-height);
 `;
-var StyledLoadingValue = styled21(LoadingBackground)`
+var StyledLoadingValue = styled22(LoadingBackground)`
   width: 90%;
   height: var(--wui-typography-heading-3-line-height);
 `;
-var StyledLabel2 = styled21(Heading)`
+var StyledLabel2 = styled22(Heading)`
   grid-area: label;
 `;
-var StyledValue = styled21(Heading)`
+var StyledValue = styled22(Heading)`
   grid-area: value;
 `;
-var StyledSlot = styled21.div`
+var StyledSlot = styled22.div`
   display: flex;
   justify-content: flex-end;
   grid-area: slot;
   align-self: center;
 `;
-var StyledDataCardTrendContainer = styled21.div`
+var StyledDataCardTrendContainer = styled22.div`
   position: absolute;
   bottom: var(--wui-space-01);
   right: var(--wui-space-01);
@@ -7937,33 +7964,33 @@ var DataCard = ({
     $colorScheme: colorScheme,
     ...props,
     children: [
-      /* @__PURE__ */ jsx206(
+      /* @__PURE__ */ jsx207(
         StyledLabel2,
         {
           renderAs: "dt",
           variant: "heading6",
-          children: isLoading ? /* @__PURE__ */ jsx206(StyledLoadingLabel, {}) : label
+          children: isLoading ? /* @__PURE__ */ jsx207(StyledLoadingLabel, {}) : label
         }
       ),
-      /* @__PURE__ */ jsx206(
+      /* @__PURE__ */ jsx207(
         StyledValue,
         {
           renderAs: "dd",
           variant: "heading3",
-          children: isLoading ? /* @__PURE__ */ jsx206(StyledLoadingValue, {}) : value
+          children: isLoading ? /* @__PURE__ */ jsx207(StyledLoadingValue, {}) : value
         }
       ),
-      isNotNull(upperRightSlot) && !isLoading && /* @__PURE__ */ jsx206(StyledSlot, { children: upperRightSlot }),
-      isNotNull(trend) && !isLoading && /* @__PURE__ */ jsx206(StyledDataCardTrendContainer, { children: trend })
+      isNotNull(upperRightSlot) && !isLoading && /* @__PURE__ */ jsx207(StyledSlot, { children: upperRightSlot }),
+      isNotNull(trend) && !isLoading && /* @__PURE__ */ jsx207(StyledDataCardTrendContainer, { children: trend })
     ]
   }
 );
 DataCard.displayName = "DataCard";
 
 // src/components/DataCards/DataCards.tsx
-import styled22 from "styled-components";
-import { jsx as jsx207 } from "react/jsx-runtime";
-var StyledDataCards = styled22(Box)`
+import styled23 from "styled-components";
+import { jsx as jsx208 } from "react/jsx-runtime";
+var StyledDataCards = styled23(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   margin-top: 0; /* Remove default <dl> style */
   > * {
@@ -7977,7 +8004,7 @@ var DataCards = ({
   colorScheme = "inherit",
   ...props
 }) => {
-  return /* @__PURE__ */ jsx207(
+  return /* @__PURE__ */ jsx208(
     StyledDataCards,
     {
       ...props,
@@ -7995,12 +8022,12 @@ var DataCards = ({
 DataCards.displayName = "DataCards";
 
 // src/components/DataCards/DataCardTrend.tsx
-import styled24 from "styled-components";
+import styled25 from "styled-components";
 
 // src/components/Text/Text.tsx
 import { forwardRef as forwardRef8 } from "react";
-import styled23, { css as css22 } from "styled-components";
-import { jsx as jsx208 } from "react/jsx-runtime";
+import styled24, { css as css22 } from "styled-components";
+import { jsx as jsx209 } from "react/jsx-runtime";
 var bodyBoldStyles = css22`
   > strong,
   b {
@@ -8120,7 +8147,7 @@ var variantElementMap2 = {
   label3: labelElement,
   label4: labelElement
 };
-var StyledText = styled23.div`
+var StyledText = styled24.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   --text-color: ${({ $prominence, $disabled }) => {
   if ($disabled) {
@@ -8177,7 +8204,7 @@ var TextComponent = forwardRef8(
     renderAs,
     ...otherProps
   }, ref) => {
-    return /* @__PURE__ */ jsx208(
+    return /* @__PURE__ */ jsx209(
       StyledText,
       {
         ref,
@@ -8199,8 +8226,8 @@ TextComponent.displayName = "Text";
 var Text = makePolymorphic(TextComponent);
 
 // src/components/DataCards/DataCardTrend.tsx
-import { jsx as jsx209, jsxs as jsxs16 } from "react/jsx-runtime";
-var StyledDataCardTrend = styled24.div`
+import { jsx as jsx210, jsxs as jsxs16 } from "react/jsx-runtime";
+var StyledDataCardTrend = styled25.div`
   ${({ $outlook }) => getColorScheme($outlook === "positive" ? "success" : "error")};
   background: var(--wui-color-bg-app);
   border-radius: var(--wui-border-radius-rounded);
@@ -8216,7 +8243,7 @@ var DataCardTrend = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxs16(StyledDataCardTrend, { $outlook: outlook, children: [
-    /* @__PURE__ */ jsx209(
+    /* @__PURE__ */ jsx210(
       Icon,
       {
         size: "md",
@@ -8224,7 +8251,7 @@ var DataCardTrend = ({
         ...props
       }
     ),
-    /* @__PURE__ */ jsx209(
+    /* @__PURE__ */ jsx210(
       Text,
       {
         prominence: "secondary",
@@ -8236,8 +8263,8 @@ var DataCardTrend = ({
 };
 
 // src/components/Divider/Divider.tsx
-import styled25, { css as css23 } from "styled-components";
-import { jsx as jsx210 } from "react/jsx-runtime";
+import styled26, { css as css23 } from "styled-components";
+import { jsx as jsx211 } from "react/jsx-runtime";
 var horizontalBorderCss = css23`
   border-top-color: var(--wui-color-border);
   border-top-style: solid;
@@ -8251,7 +8278,7 @@ var verticalBorderCss = css23`
   min-height: 100%;
   width: 1px;
 `;
-var DividerComponent = styled25.div`
+var DividerComponent = styled26.div`
   ${({ $orientation }) => {
   switch ($orientation) {
     case "vertical":
@@ -8266,7 +8293,7 @@ var Divider = ({
   orientation = "horizontal",
   ...otherProps
 }) => {
-  return /* @__PURE__ */ jsx210(
+  return /* @__PURE__ */ jsx211(
     DividerComponent,
     {
       $orientation: orientation,
@@ -8282,28 +8309,6 @@ Divider.displayName = "Divider";
 import styled29, { css as css26 } from "styled-components";
 import { useState as useState5, useRef as useRef4 } from "react";
 
-// src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
-import styled26 from "styled-components";
-import { isNotNil as isNotNil10 } from "@wistia/type-guards";
-import { jsx as jsx211 } from "react/jsx-runtime";
-var VisuallyHidden = styled26.div({ ...visuallyHiddenStyle });
-var VisuallyHiddenButFocusable = styled26.div({
-  "&:not(:focus-within)": visuallyHiddenStyle
-});
-var ScreenReaderOnly = ({
-  text,
-  children,
-  focusable = false,
-  ...otherProps
-}) => {
-  const accessibleText = isNotNil10(text) ? text : children;
-  if (focusable) {
-    return /* @__PURE__ */ jsx211(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
-  }
-  return /* @__PURE__ */ jsx211(VisuallyHidden, { ...otherProps, children: accessibleText });
-};
-ScreenReaderOnly.displayName = "ScreenReaderOnly";
-
 // src/components/Tooltip/Tooltip.tsx
 import {
   Root as TooltipRoot,
@@ -10364,6 +10369,7 @@ var Radio = forwardRef18(
     size = "md",
     value = "false",
     required = false,
+    hideLabel = false,
     ...props
   }, ref) => {
     const generatedId = useId3();
@@ -10401,6 +10407,7 @@ var Radio = forwardRef18(
                 }
               ),
               description,
+              hideLabel,
               htmlFor: computedId,
               label
             }