@wistia/ui 0.8.27 → 0.8.28

package/dist/index.d.mts

@@ -709,11 +709,6 @@ type BoxProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT$1> & {
      * *Note: only works for nested `<Box />`*
      */
     grow?: number | string;
-    /**
-     * @ignore
-     * Used internally to track if a Box is a child of another Box component
-     */
-    hasBoxParent?: boolean;
     /**
      * Specifies the height of the box.
      *
@@ -3275,4 +3270,26 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Center, type CenterProps, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, type ClickRegionProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, type EllipsisProps, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, InputClickToCopy, type InputClickToCopyProps, type InputProps, type KeyboardKeys, KeyboardShortcut, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Switch, type SwitchProps, Tab, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Thumbnail, ThumbnailBadge, type ThumbnailBadgeProps, ThumbnailCollage, type ThumbnailCollageProps, type ThumbnailProps, Tooltip, type TooltipProps, UIProvider, type UseToastProps, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useFocusTrap, useForceUpdate, useFormState, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize };
+type VariantType = 'breadcrumbs' | 'bullets' | 'commas' | 'ordered' | 'slashes' | 'spaces' | 'unbulleted';
+type ItemType = ItemType[] | string[] | string;
+type ListProps = ComponentPropsWithoutRef<'ul'> & {
+    /**
+     * Children should be wrapped in `<ListItem>`
+     */
+    children?: ReactNode;
+    /**
+     * As an alternative to passing children you can supply an array of strings that
+     * will be rendered as child `<ListItems>`s. Note that all items will be of the same variant.
+     */
+    items?: ItemType[];
+    /**
+     * The kind of list to render
+     */
+    variant?: VariantType;
+};
+declare const List: {
+    ({ children, items, variant, ...otherProps }: ListProps): JSX.Element | null;
+    displayName: string;
+};
+
+export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Center, type CenterProps, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, type ClickRegionProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, type EllipsisProps, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, InputClickToCopy, type InputClickToCopyProps, type InputProps, type KeyboardKeys, KeyboardShortcut, Label, type LabelProps, Link, type LinkProps, List, type ListProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Switch, type SwitchProps, Tab, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Thumbnail, ThumbnailBadge, type ThumbnailBadgeProps, ThumbnailCollage, type ThumbnailCollageProps, type ThumbnailProps, Tooltip, type TooltipProps, UIProvider, type UseToastProps, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useFocusTrap, useForceUpdate, useFormState, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize };

package/dist/index.d.ts

@@ -709,11 +709,6 @@ type BoxProps = ComponentPropsWithoutRef<typeof DEFAULT_ELEMENT$1> & {
      * *Note: only works for nested `<Box />`*
      */
     grow?: number | string;
-    /**
-     * @ignore
-     * Used internally to track if a Box is a child of another Box component
-     */
-    hasBoxParent?: boolean;
     /**
      * Specifies the height of the box.
      *
@@ -3275,4 +3270,26 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Center, type CenterProps, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, type ClickRegionProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, type EllipsisProps, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, InputClickToCopy, type InputClickToCopyProps, type InputProps, type KeyboardKeys, KeyboardShortcut, Label, type LabelProps, Link, type LinkProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Switch, type SwitchProps, Tab, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Thumbnail, ThumbnailBadge, type ThumbnailBadgeProps, ThumbnailCollage, type ThumbnailCollageProps, type ThumbnailProps, Tooltip, type TooltipProps, UIProvider, type UseToastProps, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useFocusTrap, useForceUpdate, useFormState, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize };
+type VariantType = 'breadcrumbs' | 'bullets' | 'commas' | 'ordered' | 'slashes' | 'spaces' | 'unbulleted';
+type ItemType = ItemType[] | string[] | string;
+type ListProps = ComponentPropsWithoutRef<'ul'> & {
+    /**
+     * Children should be wrapped in `<ListItem>`
+     */
+    children?: ReactNode;
+    /**
+     * As an alternative to passing children you can supply an array of strings that
+     * will be rendered as child `<ListItems>`s. Note that all items will be of the same variant.
+     */
+    items?: ItemType[];
+    /**
+     * The kind of list to render
+     */
+    variant?: VariantType;
+};
+declare const List: {
+    ({ children, items, variant, ...otherProps }: ListProps): JSX.Element | null;
+    displayName: string;
+};
+
+export { ActionButton, type ActionButtonProps, Avatar, type AvatarProps, type AvatarStatus, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonProps, Card, type CardProps, Center, type CenterProps, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, type ClickRegionProps, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, type ColorSchemeTypes, ColorSchemeWrapper, type ColorSchemeWrapperProps, DataCard, type DataCardProps, DataCardTrend, type DataCardTrendProps, DataCards, type DataCardsProps, Divider, EditableHeading, type EditableHeadingProps, Ellipsis, type EllipsisProps, Form, FormErrorSummary, FormField, type FormFieldProps, FormGroup, type FormGroupProps, type FormProps, Heading, type HeadingProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, InputClickToCopy, type InputClickToCopyProps, type InputProps, type KeyboardKeys, KeyboardShortcut, Label, type LabelProps, Link, type LinkProps, List, type ListProps, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Modal, type ModalProps, Popover, type PopoverProps, ProgressBar, type ProgressBarProps, Radio, RadioGroup, RadioMenuItem, type RadioProps, ScreenReaderOnly, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectOption, SelectOptionGroup, type SelectOptionGroupProps, type SelectOptionProps, type SelectProps, Stack, SubMenu, Switch, type SwitchProps, Tab, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableFoot, type TableFootProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Thumbnail, ThumbnailBadge, type ThumbnailBadgeProps, ThumbnailCollage, type ThumbnailCollageProps, type ThumbnailProps, Tooltip, type TooltipProps, UIProvider, type UseToastProps, WistiaLogo, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, mergeRefs, mq, useActiveMq, useAriaLive, useBoolean, useClipboard, useFocusTrap, useForceUpdate, useFormState, useIsHovered, useKey, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize };

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.8.27
+ * @license @wistia/ui v0.8.28
  *
  * 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,7 @@ 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;
@@ -8403,7 +8384,7 @@ var ClickRegion = ({ children, targetRef }) => {
     },
     [targetRef]
   );
-  return cloneElement3(Children3.only(children), {
+  return cloneElement2(Children2.only(children), {
     "data-click-region": true,
     onClick: handleClick
   });
@@ -8436,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 });
 };
 
@@ -9180,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";
@@ -9331,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"
       });
@@ -9729,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";
 
@@ -9964,7 +9945,7 @@ var FormField = ({
       "aria-invalid": isNotNil17(error)
     };
   }
-  Children5.only(children);
+  Children4.only(children);
   return /* @__PURE__ */ jsxs24(
     StyledFormField,
     {
@@ -9973,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(
@@ -10012,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)`
@@ -10040,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
         })
       }
@@ -11513,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";
@@ -11613,7 +11594,7 @@ var SegmentedControl = forwardRef21(
     onSelectedValueChange,
     ...props
   }, ref) => {
-    if (isNil14(children)) {
+    if (isNil13(children)) {
       return null;
     }
     return /* @__PURE__ */ jsx252(
@@ -12244,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
@@ -12373,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;
     }
@@ -12471,7 +12452,7 @@ var Tabs = forwardRef27(
                     label,
                     "aria-label": ariaLabelForTab
                   } = tab.props;
-                  if (isNil15(icon)) {
+                  if (isNil14(icon)) {
                     return /* @__PURE__ */ jsx266(
                       TabItem,
                       {
@@ -12537,7 +12518,7 @@ 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 { 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)};
@@ -12622,10 +12603,10 @@ 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"
     );
@@ -12728,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";
@@ -12898,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;
@@ -13179,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,
@@ -13221,6 +13360,7 @@ export {
   KeyboardShortcut,
   Label,
   Link,
+  List,
   Menu,
   MenuItem,
   MenuItemDescription,