@wistia/ui 0.8.26 → 0.8.27-beta.415fcaaf.2aacc73

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.8.26
+ * @license @wistia/ui v0.8.27-beta.415fcaaf.2aacc73
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -7648,9 +7648,9 @@ var Badge = forwardRef4(
 Badge.displayName = "Badge";
 
 // src/components/Box/Box.tsx
-import { Children, cloneElement as cloneElement2, forwardRef as forwardRef5 } from "react";
+import { forwardRef as forwardRef5 } from "react";
 import styled11, { css as css18 } from "styled-components";
-import { isNotNil as isNotNil10, isNil as isNil9, isRecord as isRecord3, isNotUndefined as isNotUndefined5 } from "@wistia/type-guards";
+import { isNotNil as isNotNil10, isRecord as isRecord3, isNotUndefined as isNotUndefined5 } from "@wistia/type-guards";
 
 // src/private/helpers/makePolymorphic/makePolymorphic.tsx
 var makePolymorphic = (component) => {
@@ -7659,7 +7659,6 @@ var makePolymorphic = (component) => {
 
 // src/components/Box/Box.tsx
 import { jsx as jsx199 } from "react/jsx-runtime";
-var isDev = process.env["NODE_ENV"] === "development" || process.env["NODE_ENV"] === "test";
 var getGapStyle = (gap) => {
   if (isNotNil10(gap)) {
     if (isRecord3(gap)) {
@@ -7754,22 +7753,6 @@ var StyledBoxComponent = styled11.div`
   justify-content: ${({ $justifyContent }) => $justifyContent};
   order: ${({ $order }) => isNotNil10($order) ? $order : null};
 `;
-var wrapChildren = (children) => {
-  if (isNotNil10(children)) {
-    if (typeof children === "object" && isDev) {
-      return Children.map(children, (child) => {
-        if (isNil9(child)) return null;
-        const elementParams = {};
-        if (child.type?.displayName === "Box" || child.type?.displayName === "Box_UI") {
-          elementParams.hasBoxParent = true;
-        }
-        return cloneElement2(child, elementParams);
-      });
-    }
-    return children;
-  }
-  return null;
-};
 var DEFAULT_ELEMENT = "div";
 var BoxComponent = forwardRef5(
   ({
@@ -7783,8 +7766,6 @@ var BoxComponent = forwardRef5(
     fillViewport = false,
     gap,
     grow,
-    hasBoxParent = false,
-    // eslint-disable-line @typescript-eslint/no-unused-vars
     height,
     inline = false,
     justifyContent = "flex-start",
@@ -7845,7 +7826,7 @@ var BoxComponent = forwardRef5(
         $wrapItems: wrapItems,
         as: renderAs ?? DEFAULT_ELEMENT,
         ...props,
-        children: wrapChildren(children)
+        children
       }
     );
   }
@@ -7854,7 +7835,7 @@ BoxComponent.displayName = "Box";
 var Box = makePolymorphic(BoxComponent);
 
 // src/components/Breadcrumbs/Breadcrumbs.tsx
-import { Children as Children2 } from "react";
+import { Children } from "react";
 import styled12 from "styled-components";
 import { Fragment as Fragment2, jsx as jsx200, jsxs as jsxs12 } from "react/jsx-runtime";
 var StyledBreadcrumbs = styled12.nav`
@@ -7870,7 +7851,7 @@ var StyledBreadcrumbs = styled12.nav`
 var BUFFER_WIDTH = 10;
 var Breadcrumbs = ({ children, ...props }) => {
   const { isXsAndDown } = useMq();
-  let crumbs = Children2.toArray(children);
+  let crumbs = Children.toArray(children);
   if (isXsAndDown) {
     crumbs = crumbs.slice(-1);
   }
@@ -7937,7 +7918,7 @@ var Breadcrumb = ({ icon, href, children, ...props }) => {
 
 // src/components/ButtonGroup/ButtonGroup.tsx
 import styled14 from "styled-components";
-import { isNil as isNil10 } from "@wistia/type-guards";
+import { isNil as isNil9 } from "@wistia/type-guards";
 import { jsx as jsx202 } from "react/jsx-runtime";
 var getAlignment = (align) => {
   if (align === "center") {
@@ -7983,7 +7964,7 @@ var ButtonGroup = ({
   collapseOnSmallScreens = true,
   ...props
 }) => {
-  if (isNil10(children)) {
+  if (isNil9(children)) {
     return null;
   }
   return /* @__PURE__ */ jsx202(
@@ -8096,11 +8077,11 @@ import { isNonEmptyString as isNonEmptyString2 } from "@wistia/type-guards";
 
 // src/private/components/FormControlLabel/FormControlLabel.tsx
 import styled19, { css as css20 } from "styled-components";
-import { isNil as isNil12, isNotNil as isNotNil12 } from "@wistia/type-guards";
+import { isNil as isNil11, isNotNil as isNotNil12 } from "@wistia/type-guards";
 
 // src/private/components/FormControlLabel/FormControlLabelDescription.tsx
 import styled17, { css as css19 } from "styled-components";
-import { isNil as isNil11 } from "@wistia/type-guards";
+import { isNil as isNil10 } from "@wistia/type-guards";
 import { jsx as jsx205 } from "react/jsx-runtime";
 var disabledStyle = css19`
   color: var(--wui-color-text-disabled);
@@ -8120,7 +8101,7 @@ var FormControlLabelDescription = ({
   disabled = false,
   ...props
 }) => {
-  if (isNil11(children)) {
+  if (isNil10(children)) {
     return null;
   }
   return /* @__PURE__ */ jsx205(
@@ -8188,7 +8169,7 @@ var FormControlLabel = ({
   hideLabel = false,
   ...props
 }) => {
-  if (isNil12(label)) {
+  if (isNil11(label)) {
     return null;
   }
   const labelContent = hideLabel ? /* @__PURE__ */ jsx207(ScreenReaderOnly, { children: label }) : /* @__PURE__ */ jsxs14(StyledLabelWrapper, { children: [
@@ -8368,7 +8349,12 @@ var Checkbox = forwardRef7(
 Checkbox.displayName = "Checkbox";
 
 // src/components/ClickRegion/ClickRegion.tsx
-import { Children as Children3, cloneElement as cloneElement3, useCallback as useCallback8, useEffect as useEffect8 } from "react";
+import { Children as Children2, cloneElement as cloneElement2, useCallback as useCallback8, useEffect as useEffect8 } from "react";
+var isClickableElement = (element) => {
+  if (!element) return false;
+  const el = element;
+  return el.closest("button") !== null || el.closest("a") !== null || el.closest("input") !== null || el.closest("select") !== null || el.closest("textarea") !== null || el.closest("label") !== null || el.closest("[data-wui-faux-input]") !== null;
+};
 var ClickRegion = ({ children, targetRef }) => {
   useEffect8(() => {
     if (targetRef.current && targetRef.current.tagName === "A") {
@@ -8381,7 +8367,10 @@ var ClickRegion = ({ children, targetRef }) => {
   const handleClick = useCallback8(
     (event) => {
       const node = targetRef.current;
-      if (event.target instanceof HTMLAnchorElement && !event.target.hasAttribute("data-click-region-target-link") || event.target instanceof HTMLButtonElement && !event.target.hasAttribute("data-click-region-target-button")) {
+      if (event.target === node) {
+        return;
+      }
+      if (isClickableElement(event.target) && event.target !== node) {
         event.stopPropagation();
         return;
       }
@@ -8395,7 +8384,7 @@ var ClickRegion = ({ children, targetRef }) => {
     },
     [targetRef]
   );
-  return cloneElement3(Children3.only(children), {
+  return cloneElement2(Children2.only(children), {
     "data-click-region": true,
     onClick: handleClick
   });
@@ -8428,11 +8417,11 @@ var Collapsible = ({
 Collapsible.displayName = "Collapsible";
 
 // src/components/Collapsible/CollapsibleTrigger.tsx
-import { Children as Children4 } from "react";
+import { Children as Children3 } from "react";
 import { Trigger } from "@radix-ui/react-collapsible";
 import { jsx as jsx210 } from "react/jsx-runtime";
 var CollapsibleTrigger = ({ children }) => {
-  Children4.only(children);
+  Children3.only(children);
   return /* @__PURE__ */ jsx210(Trigger, { asChild: true, children });
 };
 
@@ -9172,9 +9161,9 @@ var Tooltip = ({
 Tooltip.displayName = "Tooltip";
 
 // src/components/Input/Input.tsx
-import { forwardRef as forwardRef10, cloneElement as cloneElement4, useRef as useRef6 } from "react";
+import { forwardRef as forwardRef10, cloneElement as cloneElement3, useRef as useRef6 } from "react";
 import styled30, { css as css26 } from "styled-components";
-import { isNil as isNil13, isNotNil as isNotNil16, isRecord as isRecord4 } from "@wistia/type-guards";
+import { isNil as isNil12, isNotNil as isNotNil16, isRecord as isRecord4 } from "@wistia/type-guards";
 
 // src/css/sharedStyles/inputCssVariables.ts
 import { css as css25 } from "styled-components";
@@ -9323,18 +9312,18 @@ var Input = forwardRef10(
       isNotNil16(externalRef) && isRecord4(externalRef) && "current" in externalRef ? externalRef : internalRef
     );
     let leftIconToDisplay = leftIcon;
-    if (isNil13(leftIcon) && type === "search") {
+    if (isNil12(leftIcon) && type === "search") {
       leftIconToDisplay = /* @__PURE__ */ jsx219(Icon, { type: "search" });
     }
     if (isNotNil16(leftIconToDisplay)) {
-      leftIconToDisplay = cloneElement4(leftIconToDisplay, {
+      leftIconToDisplay = cloneElement3(leftIconToDisplay, {
         size: "md",
         className: "wui-input-left-icon"
       });
     }
     let rightIconToDisplay = rightIcon;
     if (isNotNil16(rightIconToDisplay)) {
-      rightIconToDisplay = cloneElement4(rightIconToDisplay, {
+      rightIconToDisplay = cloneElement3(rightIconToDisplay, {
         size: "md",
         className: "wui-input-right-icon"
       });
@@ -9721,7 +9710,7 @@ var FormErrorSummary = ({ description }) => {
 };
 
 // src/components/FormField/FormField.tsx
-import { Children as Children5, cloneElement as cloneElement5, useContext as useContext4 } from "react";
+import { Children as Children4, cloneElement as cloneElement4, useContext as useContext4 } from "react";
 import styled36 from "styled-components";
 import { isArray as isArray2, isNotNil as isNotNil17, isNotUndefined as isNotUndefined9, isUndefined as isUndefined4 } from "@wistia/type-guards";
 
@@ -9956,7 +9945,7 @@ var FormField = ({
       "aria-invalid": isNotNil17(error)
     };
   }
-  Children5.only(children);
+  Children4.only(children);
   return /* @__PURE__ */ jsxs24(
     StyledFormField,
     {
@@ -9965,7 +9954,7 @@ var FormField = ({
       children: [
         !isIntegratedLabel && /* @__PURE__ */ jsx227(Label, { htmlFor: computedId, children: label }),
         isNotNil17(description) ? /* @__PURE__ */ jsx227(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
-        cloneElement5(children, childProps),
+        cloneElement4(children, childProps),
         isNotNil17(computedError) ? /* @__PURE__ */ jsxs24(Fragment6, { children: [
           /* @__PURE__ */ jsx227("div", {}),
           /* @__PURE__ */ jsx227(
@@ -10004,7 +9993,7 @@ var RadioGroup = ({
 RadioGroup.displayName = "RadioGroup";
 
 // src/components/IconButton/IconButton.tsx
-import { Children as Children6, cloneElement as cloneElement6, forwardRef as forwardRef13 } from "react";
+import { Children as Children5, cloneElement as cloneElement5, forwardRef as forwardRef13 } from "react";
 import styled37 from "styled-components";
 import { jsx as jsx229 } from "react/jsx-runtime";
 var StyledButton2 = styled37(Button)`
@@ -10032,7 +10021,7 @@ var IconButton = forwardRef13(
         "aria-label": label,
         "data-wistia-ui-icon-button": true,
         size: responsiveSize,
-        children: cloneElement6(Children6.only(children), {
+        children: cloneElement5(Children5.only(children), {
           size: responsiveSize
         })
       }
@@ -10654,12 +10643,9 @@ MenuItem.displayName = "MenuItem";
 import {
   DropdownMenuRadioGroup
 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx238, jsxs as jsxs29 } from "react/jsx-runtime";
-var MenuRadioGroup = ({ children, label, ...props }) => {
-  return /* @__PURE__ */ jsxs29(DropdownMenuRadioGroup, { ...props, children: [
-    /* @__PURE__ */ jsx238(MenuLabel, { children: label }),
-    children
-  ] });
+import { jsx as jsx238 } from "react/jsx-runtime";
+var MenuRadioGroup = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx238(DropdownMenuRadioGroup, { ...props, children });
 };
 MenuRadioGroup.displayName = "MenuRadioGroup";
 
@@ -10706,9 +10692,9 @@ import {
   DropdownMenuItemIndicator as DropdownMenuItemIndicator2
 } from "@radix-ui/react-dropdown-menu";
 import { isNotNil as isNotNil22 } from "@wistia/type-guards";
-import { jsx as jsx240, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx240, jsxs as jsxs29 } from "react/jsx-runtime";
 var CheckboxIndicator = ({ checked, ...props }) => {
-  return checked ? /* @__PURE__ */ jsxs30(
+  return checked ? /* @__PURE__ */ jsxs29(
     "svg",
     {
       ...props,
@@ -10734,7 +10720,7 @@ var CheckboxIndicator = ({ checked, ...props }) => {
         )
       ]
     }
-  ) : /* @__PURE__ */ jsxs30(
+  ) : /* @__PURE__ */ jsxs29(
     "svg",
     {
       ...props,
@@ -10818,7 +10804,7 @@ var ModalCloseButton = () => {
 };
 
 // src/components/Modal/ModalHeader.tsx
-import { jsx as jsx242, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx242, jsxs as jsxs30 } from "react/jsx-runtime";
 var Header = styled46.header`
   display: flex;
   order: 1;
@@ -10842,7 +10828,7 @@ var ModalHeader = ({
   hideCloseButton
 }) => {
   const TitleComponent = hideTitle ? /* @__PURE__ */ jsx242(ScreenReaderOnly, { children: /* @__PURE__ */ jsx242(Title, { children: title }) }) : /* @__PURE__ */ jsx242(Title, { children: title });
-  return /* @__PURE__ */ jsxs31(Header, { $hideTitle: hideTitle, children: [
+  return /* @__PURE__ */ jsxs30(Header, { $hideTitle: hideTitle, children: [
     TitleComponent,
     hideCloseButton ? null : /* @__PURE__ */ jsx242(ModalCloseButton, {})
   ] });
@@ -11027,7 +11013,7 @@ var Backdrop = forwardRef18(
 Backdrop.displayName = "Backdrop";
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx245, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx245, jsxs as jsxs31 } from "react/jsx-runtime";
 var DEFAULT_MODAL_WIDTH = "532px";
 var ModalBody = styled49.div`
   flex-direction: column;
@@ -11059,9 +11045,9 @@ var Modal = forwardRef19(
           }
         },
         open: isOpen,
-        children: /* @__PURE__ */ jsxs32(DialogPortal, { children: [
+        children: /* @__PURE__ */ jsxs31(DialogPortal, { children: [
           /* @__PURE__ */ jsx245(Backdrop, {}),
-          /* @__PURE__ */ jsxs32(
+          /* @__PURE__ */ jsxs31(
             ModalContent,
             {
               ref,
@@ -11111,7 +11097,7 @@ var getControlProps = (isOpen, onOpenChange) => {
 // src/components/Popover/PopoverArrow.tsx
 import { PopoverArrow as RadixPopoverArrow } from "@radix-ui/react-popover";
 import styled50, { css as css31, keyframes as keyframes4 } from "styled-components";
-import { jsx as jsx246, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx246, jsxs as jsxs32 } from "react/jsx-runtime";
 var StyledPath = styled50.path`
   fill: var(--wui-color-border-secondary);
 `;
@@ -11150,7 +11136,7 @@ var StyledCircle = styled50.circle`
   }
 `;
 var PopoverArrow = ({ isAnimated }) => {
-  return /* @__PURE__ */ jsx246(RadixPopoverArrow, { asChild: true, children: /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsx246(RadixPopoverArrow, { asChild: true, children: /* @__PURE__ */ jsxs32(
     "svg",
     {
       fill: "none",
@@ -11189,7 +11175,7 @@ var PopoverArrow = ({ isAnimated }) => {
 PopoverArrow.displayName = "PopoverArrow";
 
 // src/components/Popover/Popover.tsx
-import { jsx as jsx247, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx247, jsxs as jsxs33 } from "react/jsx-runtime";
 var StyledContent2 = styled51(Content2)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   ${({ $unstyled }) => !$unstyled && css32`
@@ -11228,9 +11214,9 @@ var Popover = ({
     "--wui-popover-max-width": maxWidth,
     "--wui-popover-max-height": maxHeight
   };
-  return /* @__PURE__ */ jsxs34(Root, { ...getControlProps(isOpen, onOpenChange), children: [
+  return /* @__PURE__ */ jsxs33(Root, { ...getControlProps(isOpen, onOpenChange), children: [
     /* @__PURE__ */ jsx247(Trigger2, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsx247(Portal, { children: /* @__PURE__ */ jsxs34(
+    /* @__PURE__ */ jsx247(Portal, { children: /* @__PURE__ */ jsxs33(
       StyledContent2,
       {
         $colorScheme: colorScheme,
@@ -11261,7 +11247,7 @@ Popover.displayName = "Popover";
 import styled52 from "styled-components";
 import { Root as ProgressRoot, Indicator as ProgressIndicator } from "@radix-ui/react-progress";
 import { isNotNil as isNotNil26 } from "@wistia/type-guards";
-import { jsx as jsx248, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx248, jsxs as jsxs34 } from "react/jsx-runtime";
 var ProgressBarWrapper = styled52.div`
   --progress-bar-height: 8px;
   --progress-bar-indicator-color: var(--wui-color-bg-fill);
@@ -11314,7 +11300,7 @@ var ProgressBar = ({
   labelRight,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs35(ProgressBarWrapper, { children: [
+  return /* @__PURE__ */ jsxs34(ProgressBarWrapper, { children: [
     isNotNil26(labelLeft) ? /* @__PURE__ */ jsx248(ProgressBarLabel, { children: labelLeft }) : null,
     /* @__PURE__ */ jsx248(
       StyledProgressBar,
@@ -11340,7 +11326,7 @@ ProgressBar.displayName = "ProgressBar";
 import { forwardRef as forwardRef20, useId as useId3 } from "react";
 import styled53, { css as css33 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString3 } from "@wistia/type-guards";
-import { jsx as jsx249, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx249, jsxs as jsxs35 } from "react/jsx-runtime";
 var RadioIcon = () => /* @__PURE__ */ jsx249(
   "svg",
   {
@@ -11457,7 +11443,7 @@ var Radio = forwardRef20(
   }, ref) => {
     const generatedId = useId3();
     const computedId = isNonEmptyString3(id) ? id : `wistia-ui-radio-${generatedId}`;
-    return /* @__PURE__ */ jsxs36(
+    return /* @__PURE__ */ jsxs35(
       StyledRadioWrapper,
       {
         $disabled: disabled,
@@ -11508,7 +11494,7 @@ Radio.displayName = "Radio";
 import { forwardRef as forwardRef21 } from "react";
 import styled55, { css as css34 } from "styled-components";
 import { Root as ToggleGroupRoot } from "@radix-ui/react-toggle-group";
-import { isNil as isNil14 } from "@wistia/type-guards";
+import { isNil as isNil13 } from "@wistia/type-guards";
 
 // src/components/SegmentedControl/useSelectedItemStyle.tsx
 import { createContext as createContext7, useContext as useContext6, useMemo as useMemo8, useState as useState14 } from "react";
@@ -11584,7 +11570,7 @@ var SelectedItemIndicator = () => {
 };
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { jsx as jsx252, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx252, jsxs as jsxs36 } from "react/jsx-runtime";
 var segmentedControlStyles = css34`
   display: inline-flex;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -11608,7 +11594,7 @@ var SegmentedControl = forwardRef21(
     onSelectedValueChange,
     ...props
   }, ref) => {
-    if (isNil14(children)) {
+    if (isNil13(children)) {
       return null;
     }
     return /* @__PURE__ */ jsx252(
@@ -11623,7 +11609,7 @@ var SegmentedControl = forwardRef21(
         type: "single",
         value: selectedValue,
         ...props,
-        children: /* @__PURE__ */ jsx252(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ jsxs37(SelectedItemStyleProvider, { children: [
+        children: /* @__PURE__ */ jsx252(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ jsxs36(SelectedItemStyleProvider, { children: [
           /* @__PURE__ */ jsx252(SelectedItemIndicator, {}),
           children
         ] }) })
@@ -11638,7 +11624,7 @@ import { forwardRef as forwardRef22, useEffect as useEffect11, useRef as useRef1
 import styled56, { css as css35 } from "styled-components";
 import { Item as ToggleGroupItem } from "@radix-ui/react-toggle-group";
 import { isNotNil as isNotNil27 } from "@wistia/type-guards";
-import { jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsxs as jsxs37 } from "react/jsx-runtime";
 var segmentedControlItemStyles = css35`
   all: unset; /* ToggleGroupItem is a button element */
   align-items: center;
@@ -11740,7 +11726,7 @@ var SegmentedControlItem = forwardRef22(
         resizeObserver.disconnect();
       };
     }, [selectedValue, setSelectedItemMeasurements, value]);
-    return /* @__PURE__ */ jsxs38(
+    return /* @__PURE__ */ jsxs37(
       StyledSegmentedControlItem,
       {
         ref: combinedRef,
@@ -11772,7 +11758,7 @@ import {
 } from "@radix-ui/react-select";
 import { forwardRef as forwardRef23 } from "react";
 import styled57 from "styled-components";
-import { jsx as jsx253, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx253, jsxs as jsxs38 } from "react/jsx-runtime";
 var StyledTrigger = styled57(Trigger3)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   ${inputCssVariables};
@@ -11845,13 +11831,13 @@ var Select = forwardRef23(
     ...props
   }, forwardedRef) => {
     const responsiveFullWidth = useResponsiveProp(fullWidth);
-    return /* @__PURE__ */ jsxs39(
+    return /* @__PURE__ */ jsxs38(
       Root2,
       {
         ...props,
         onValueChange: onChange,
         children: [
-          /* @__PURE__ */ jsxs39(
+          /* @__PURE__ */ jsxs38(
             StyledTrigger,
             {
               ref: forwardedRef,
@@ -11870,7 +11856,7 @@ var Select = forwardRef23(
               ]
             }
           ),
-          /* @__PURE__ */ jsx253(Portal2, { children: /* @__PURE__ */ jsxs39(StyledContent3, { position: "popper", children: [
+          /* @__PURE__ */ jsx253(Portal2, { children: /* @__PURE__ */ jsxs38(StyledContent3, { position: "popper", children: [
             /* @__PURE__ */ jsx253(ScrollUpButton, { children: /* @__PURE__ */ jsx253(Icon, { type: "caret-up" }) }),
             /* @__PURE__ */ jsx253(Viewport, { children }),
             /* @__PURE__ */ jsx253(ScrollDownButton, { children: /* @__PURE__ */ jsx253(Icon, { type: "caret-down" }) })
@@ -11887,7 +11873,7 @@ import { Item, ItemText, ItemIndicator } from "@radix-ui/react-select";
 import { forwardRef as forwardRef24 } from "react";
 import styled58 from "styled-components";
 import { isNotNil as isNotNil28 } from "@wistia/type-guards";
-import { jsx as jsx254, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx254, jsxs as jsxs39 } from "react/jsx-runtime";
 var StyledItem = styled58(Item)`
   ${variantStyleMap2.body3};
   display: flex;
@@ -11917,7 +11903,7 @@ var StyledIconContainer = styled58.span`
 `;
 var SelectOption = forwardRef24(
   ({ children, selectedDisplayValue, ...props }, forwardedRef) => {
-    return /* @__PURE__ */ jsxs40(
+    return /* @__PURE__ */ jsxs39(
       StyledItem,
       {
         ...props,
@@ -11930,7 +11916,7 @@ var SelectOption = forwardRef24(
               type: "checkmark"
             }
           ) }) }),
-          isNotNil28(selectedDisplayValue) ? /* @__PURE__ */ jsxs40("div", { children: [
+          isNotNil28(selectedDisplayValue) ? /* @__PURE__ */ jsxs39("div", { children: [
             children,
             /* @__PURE__ */ jsx254("div", { style: { display: "none" }, children: /* @__PURE__ */ jsx254(ItemText, { children: selectedDisplayValue }) })
           ] }) : /* @__PURE__ */ jsx254(ItemText, { children })
@@ -11944,12 +11930,12 @@ SelectOption.displayName = "SelectOption";
 // src/components/Select/SelectOptionGroup.tsx
 import { Group, Label as Label3 } from "@radix-ui/react-select";
 import styled59 from "styled-components";
-import { jsx as jsx255, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx255, jsxs as jsxs40 } from "react/jsx-runtime";
 var StyledLabel4 = styled59(Label3)`
   padding: var(--wui-select-option-padding);
 `;
 var SelectOptionGroup = ({ children, label, ...props }) => {
-  return /* @__PURE__ */ jsxs41(Group, { ...props, children: [
+  return /* @__PURE__ */ jsxs40(Group, { ...props, children: [
     /* @__PURE__ */ jsx255(StyledLabel4, { children: /* @__PURE__ */ jsx255(
       Text,
       {
@@ -11966,7 +11952,7 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
 import { forwardRef as forwardRef25, useId as useId4 } from "react";
 import styled60, { css as css36 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
-import { jsx as jsx256, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx256, jsxs as jsxs41 } from "react/jsx-runtime";
 var sizeSmall3 = css36`
   --wui-size-small-width: 24px;
   --wui-size-small-height: 14px;
@@ -12085,7 +12071,7 @@ var Switch = forwardRef25(
   }, ref) => {
     const generatedId = useId4();
     const computedId = isNonEmptyString4(id) ? id : `wistia-ui-switch-${generatedId}`;
-    return /* @__PURE__ */ jsxs42(StyledSwitchWrapper, { $disabled: disabled, children: [
+    return /* @__PURE__ */ jsxs41(StyledSwitchWrapper, { $disabled: disabled, children: [
       /* @__PURE__ */ jsx256(
         StyledHiddenSwitchInput,
         {
@@ -12239,7 +12225,7 @@ var TableRow = ({ children, ...props }) => {
 // src/components/Tabs/Tabs.tsx
 import { forwardRef as forwardRef27, useState as useState15 } from "react";
 import { Root as TabsRoot } from "@radix-ui/react-tabs";
-import { isNotNil as isNotNil30, isNil as isNil15 } from "@wistia/type-guards";
+import { isNotNil as isNotNil30, isNil as isNil14 } from "@wistia/type-guards";
 import styled71 from "styled-components";
 
 // src/components/Tabs/TabPanel.tsx
@@ -12310,7 +12296,7 @@ var useTabsValue = () => {
 };
 
 // src/components/Tabs/TabItem.tsx
-import { jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsxs as jsxs42 } from "react/jsx-runtime";
 var StyledTabItem = styled69(RadixTab)`
   ${segmentedControlItemStyles}
 
@@ -12349,7 +12335,7 @@ var TabItem = forwardRef26(
         resizeObserver.disconnect();
       };
     }, [selectedValue, setSelectedItemMeasurements, value]);
-    return /* @__PURE__ */ jsxs43(
+    return /* @__PURE__ */ jsxs42(
       StyledTabItem,
       {
         ref: combinedRef,
@@ -12368,10 +12354,10 @@ var TabItem = forwardRef26(
 TabItem.displayName = "TabItem";
 
 // src/components/Tabs/extractTabItems.ts
-import { Children as Children7, Fragment as Fragment7, isValidElement as isValidElement2 } from "react";
+import { Children as Children6, Fragment as Fragment7, isValidElement as isValidElement2 } from "react";
 var extractTabItems = (children) => {
   const tabItems = [];
-  Children7.forEach(children, (child) => {
+  Children6.forEach(children, (child) => {
     if (!isValidElement2(child)) {
       return;
     }
@@ -12407,7 +12393,7 @@ var SelectedItemIndicator2 = () => {
 };
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx266, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx266, jsxs as jsxs43 } from "react/jsx-runtime";
 var TabsContainer = styled71.div`
   display: flex;
   flex-direction: column;
@@ -12450,8 +12436,8 @@ var Tabs = forwardRef27(
         activationMode: "automatic",
         ...props,
         ...modeProps,
-        children: /* @__PURE__ */ jsx266(TabsValueProvider, { value: currentValue, children: /* @__PURE__ */ jsxs44(SelectedItemStyleProvider, { children: [
-          /* @__PURE__ */ jsxs44(
+        children: /* @__PURE__ */ jsx266(TabsValueProvider, { value: currentValue, children: /* @__PURE__ */ jsxs43(SelectedItemStyleProvider, { children: [
+          /* @__PURE__ */ jsxs43(
             TabList,
             {
               ariaLabel,
@@ -12466,7 +12452,7 @@ var Tabs = forwardRef27(
                     label,
                     "aria-label": ariaLabelForTab
                   } = tab.props;
-                  if (isNil15(icon)) {
+                  if (isNil14(icon)) {
                     return /* @__PURE__ */ jsx266(
                       TabItem,
                       {
@@ -12532,8 +12518,8 @@ Tab.displayName = "Tab";
 // src/components/Tag/Tag.tsx
 import { forwardRef as forwardRef29 } from "react";
 import styled72 from "styled-components";
-import { isNil as isNil16, isNotNil as isNotNil31, isNonEmptyString as isNonEmptyString5 } from "@wistia/type-guards";
-import { Fragment as Fragment8, jsx as jsx268, jsxs as jsxs45 } from "react/jsx-runtime";
+import { isNil as isNil15, isNotNil as isNotNil31, isNonEmptyString as isNonEmptyString5 } from "@wistia/type-guards";
+import { Fragment as Fragment8, jsx as jsx268, jsxs as jsxs44 } from "react/jsx-runtime";
 var TagLabel = styled72.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
@@ -12617,17 +12603,17 @@ var StyledTag = styled72.div`
   }
 `;
 var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
-  if (isNil16(onClickRemove)) {
+  if (isNil15(onClickRemove)) {
     return null;
   }
-  if (isNil16(onClickRemoveLabel)) {
+  if (isNil15(onClickRemoveLabel)) {
     throw new Error(
       "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
     );
   }
-  return /* @__PURE__ */ jsxs45(Fragment8, { children: [
+  return /* @__PURE__ */ jsxs44(Fragment8, { children: [
     /* @__PURE__ */ jsx268(TagDivider, { $colorScheme: colorScheme }),
-    /* @__PURE__ */ jsxs45(
+    /* @__PURE__ */ jsxs44(
       StyledRemoveButton,
       {
         $colorScheme: colorScheme,
@@ -12651,14 +12637,14 @@ var Tag = forwardRef29(
   ({ onClickRemove, colorScheme = "inherit", href, icon, label, onClickRemoveLabel, ...props }, ref) => {
     const hasIcon = isNotNil31(icon);
     const labelProps = isNotNil31(href) && isNonEmptyString5(href) ? { href, as: "a" } : { as: "span" };
-    return /* @__PURE__ */ jsxs45(
+    return /* @__PURE__ */ jsxs44(
       StyledTag,
       {
         ref,
         $colorScheme: colorScheme,
         ...props,
         children: [
-          /* @__PURE__ */ jsxs45(
+          /* @__PURE__ */ jsxs44(
             TagLabel,
             {
               ...labelProps,
@@ -12687,7 +12673,7 @@ Tag.displayName = "Tag";
 // src/components/Thumbnail/ThumbnailBadge.tsx
 import styled73 from "styled-components";
 import { isNotNil as isNotNil32 } from "@wistia/type-guards";
-import { jsx as jsx269, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx269, jsxs as jsxs45 } from "react/jsx-runtime";
 var StyledThumbnailBadge = styled73.div`
   align-items: center;
   background-color: rgb(0 0 0 / 50%);
@@ -12713,7 +12699,7 @@ var StyledThumbnailBadge = styled73.div`
   }
 `;
 var ThumbnailBadge = ({ icon, label, ...props }) => {
-  return /* @__PURE__ */ jsxs46(StyledThumbnailBadge, { ...props, children: [
+  return /* @__PURE__ */ jsxs45(StyledThumbnailBadge, { ...props, children: [
     isNotNil32(icon) && icon,
     /* @__PURE__ */ jsx269("span", { children: label })
   ] });
@@ -12723,7 +12709,7 @@ ThumbnailBadge.displayName = "ThumbnailBadge";
 // src/components/Thumbnail/Thumbnail.tsx
 import { forwardRef as forwardRef30 } from "react";
 import styled74 from "styled-components";
-import { isNil as isNil17, isNotNil as isNotNil34 } from "@wistia/type-guards";
+import { isNil as isNil16, isNotNil as isNotNil34 } from "@wistia/type-guards";
 
 // src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
 import { isNotNil as isNotNil33 } from "@wistia/type-guards";
@@ -12858,7 +12844,7 @@ var getBackgroundGradient = (gradientName = void 0) => {
 };
 
 // src/components/Thumbnail/Thumbnail.tsx
-import { jsx as jsx270, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx270, jsxs as jsxs46 } from "react/jsx-runtime";
 var WideThumbnailImage = styled74.img`
   height: 100%;
   object-fit: cover;
@@ -12893,7 +12879,7 @@ var StyledThumbnail = styled74.div`
   background-image: ${({ $backgroundUrl }) => isNotNil34($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
   ${({ $backgroundUrl, $gradientBackground }) => (
   // if we don't have $backgroundUrl show a gradient
-  isNil17($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
+  isNil16($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
 )};
   background-position: center center;
   background-size: cover;
@@ -12918,7 +12904,7 @@ var Thumbnail = forwardRef30(
     ...props
   }, ref) => {
     const backgroundUrl = thumbnailImageType === "square" && isNotNil34(thumbnailUrl) ? thumbnailUrl : void 0;
-    return /* @__PURE__ */ jsxs47(
+    return /* @__PURE__ */ jsxs46(
       StyledThumbnail,
       {
         ref,
@@ -13053,7 +13039,7 @@ var ThumbnailCollage = ({
 // src/components/WistiaLogo/WistiaLogo.tsx
 import styled76, { css as css40 } from "styled-components";
 import { isNotNil as isNotNil35 } from "@wistia/type-guards";
-import { jsx as jsx272, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx272, jsxs as jsxs47 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
     return /* @__PURE__ */ jsx272(
@@ -13151,7 +13137,7 @@ var WistiaLogo = ({
   };
   const brandmarkColor = VARIANT_COLORS[variant].brandmark;
   const logotypeColor = VARIANT_COLORS[variant].logotype;
-  const Logo = /* @__PURE__ */ jsxs48(
+  const Logo = /* @__PURE__ */ jsxs47(
     WistiaLogoComponent,
     {
       $hoverColor: hoverColor,
@@ -13174,6 +13160,164 @@ var WistiaLogo = ({
   return href !== void 0 ? /* @__PURE__ */ jsx272("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
+
+// src/components/List/List.tsx
+import { isNotNil as isNotNil36 } from "@wistia/type-guards";
+import styled78, { css as css41 } from "styled-components";
+
+// src/components/List/ListItem.tsx
+import styled77 from "styled-components";
+import { isNil as isNil17 } from "@wistia/type-guards";
+import { jsx as jsx273 } from "react/jsx-runtime";
+var ListItemComponent = styled77.li`
+  margin-bottom: var(--wui-space-02);
+`;
+var ListItem = ({ children }) => {
+  if (isNil17(children)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx273(ListItemComponent, { children });
+};
+ListItem.displayName = "ListItem";
+
+// src/components/List/List.tsx
+import { jsx as jsx274, jsxs as jsxs48 } from "react/jsx-runtime";
+var spacesStyle = css41`
+  overflow: hidden;
+  padding-left: 0;
+  vertical-align: bottom;
+
+  li {
+    display: block;
+    float: left;
+
+    &::after {
+      content: ' ';
+      padding-right: var(--wui-space-03);
+    }
+
+    &:last-child {
+      &::after {
+        content: '' !important;
+        padding-right: 0;
+      }
+    }
+  }
+`;
+var commasStyle = css41`
+  ${spacesStyle};
+
+  li {
+    &::after {
+      content: ',' !important;
+      padding-right: var(--wui-space-01);
+    }
+  }
+`;
+var slashesStyle = css41`
+  ${spacesStyle};
+
+  li {
+    &::after {
+      content: '/' !important;
+      padding-left: var(--wui-space-01);
+      padding-right: var(--wui-space-01);
+    }
+  }
+`;
+var breadcrumbsStyle = css41`
+  ${spacesStyle};
+
+  li {
+    &::after {
+      content: '>' !important;
+      padding-left: var(--wui-space-01);
+      padding-right: var(--wui-space-01);
+    }
+  }
+`;
+var unbulletedStyle = css41`
+  list-style: none;
+  padding-left: 0;
+`;
+var ListComponent = styled78.ul`
+  list-style-position: outside;
+  margin: 0 0 var(--wui-space-01);
+  padding: 0 0 0 var(--wui-space-04);
+  ${({ variant }) => variant === "unbulleted" && unbulletedStyle};
+  ${({ variant }) => variant === "spaces" && spacesStyle};
+  ${({ variant }) => variant === "commas" && commasStyle};
+  ${({ variant }) => variant === "slashes" && slashesStyle};
+  ${({ variant }) => variant === "breadcrumbs" && breadcrumbsStyle};
+
+  > li:last-child {
+    margin-bottom: 0;
+  }
+
+  ul,
+  ol {
+    margin-top: var(--wui-space-01);
+  }
+
+  /* nested lists should not have bottom margins because their container <li> will have one */
+  li ul,
+  li ol {
+    margin-bottom: 0;
+  }
+`;
+var renderListComponent = (listItems, variant, { ...otherProps }) => {
+  const elementType = variant === "ordered" ? "ol" : "ul";
+  return /* @__PURE__ */ jsx274(
+    ListComponent,
+    {
+      as: elementType,
+      variant,
+      ...otherProps,
+      children: listItems
+    }
+  );
+};
+var renderListFromArray = (listItems, variant, otherProps) => {
+  let itemCount = 0;
+  const items = listItems.map((listItem, i) => {
+    const item = listItem;
+    const nextItem = listItems[i + 1];
+    const key = `item-${itemCount += 1}`;
+    if (Array.isArray(nextItem)) {
+      return /* @__PURE__ */ jsxs48(ListItem, { children: [
+        item,
+        renderListFromArray(nextItem, variant, otherProps)
+      ] }, key);
+    }
+    if (Array.isArray(item)) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx274(ListItem, { children: item }, key);
+  });
+  return renderListComponent(items, variant, otherProps);
+};
+var List = ({
+  children,
+  items,
+  variant,
+  ...otherProps
+}) => {
+  const listVariant = variant ?? "bullets";
+  if (isNotNil36(children)) {
+    if (Array.isArray(children) && !children.length) {
+      return null;
+    }
+    return renderListComponent(children, listVariant, otherProps);
+  }
+  if (isNotNil36(items)) {
+    if (!items.length) {
+      return null;
+    }
+    return renderListFromArray(items, listVariant, otherProps);
+  }
+  return null;
+};
+List.displayName = "List";
 export {
   ActionButton,
   Avatar,
@@ -13216,6 +13360,7 @@ export {
   KeyboardShortcut,
   Label,
   Link,
+  List,
   Menu,
   MenuItem,
   MenuItemDescription,