@wistia/ui 0.8.27 → 0.8.28-beta.a699b2af.d8fac3a

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.8.27
+ * @license @wistia/ui v0.8.28-beta.a699b2af.d8fac3a
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -6965,11 +6965,15 @@ var StyledLink = styled4.a`
   cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
   font-family: var(--wui-typography-family-default);
   color: ${({ $disabled }) => $disabled ? "var(--wui-color-text-disabled)" : "var(--wui-color-text-link)"};
-  text-decoration: ${({ $underline }) => $underline ? "underline" : "none"};
+  text-decoration: ${({ $underline }) => $underline === "always" ? "underline" : "none"};
   display: inline-flex;
   align-items: baseline;
   gap: var(--wui-space-01);
 
+  &:hover {
+    text-decoration: ${({ $underline }) => $underline === "hover" || $underline === "always" ? "underline" : "none"};
+  }
+
   && {
     svg {
       width: 14px;
@@ -6984,7 +6988,7 @@ var Link = forwardRef(
     type,
     disabled = false,
     colorScheme = "inherit",
-    underline = false,
+    underline = "none",
     leftIcon,
     rightIcon,
     "aria-disabled": ariaDisabled,
@@ -7648,9 +7652,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 +7663,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 +7757,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 +7770,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 +7830,7 @@ var BoxComponent = forwardRef5(
         $wrapItems: wrapItems,
         as: renderAs ?? DEFAULT_ELEMENT,
         ...props,
-        children: wrapChildren(children)
+        children
       }
     );
   }
@@ -7854,7 +7839,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 +7855,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 +7922,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 +7968,7 @@ var ButtonGroup = ({
   collapseOnSmallScreens = true,
   ...props
 }) => {
-  if (isNil10(children)) {
+  if (isNil9(children)) {
     return null;
   }
   return /* @__PURE__ */ jsx202(
@@ -8096,11 +8081,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 +8105,7 @@ var FormControlLabelDescription = ({
   disabled = false,
   ...props
 }) => {
-  if (isNil11(children)) {
+  if (isNil10(children)) {
     return null;
   }
   return /* @__PURE__ */ jsx205(
@@ -8188,7 +8173,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 +8353,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 +8388,7 @@ var ClickRegion = ({ children, targetRef }) => {
     },
     [targetRef]
   );
-  return cloneElement3(Children3.only(children), {
+  return cloneElement2(Children2.only(children), {
     "data-click-region": true,
     onClick: handleClick
   });
@@ -8436,11 +8421,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 +9165,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 +9316,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 +9714,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 +9949,7 @@ var FormField = ({
       "aria-invalid": isNotNil17(error)
     };
   }
-  Children5.only(children);
+  Children4.only(children);
   return /* @__PURE__ */ jsxs24(
     StyledFormField,
     {
@@ -9973,7 +9958,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 +9997,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 +10025,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 +11498,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 +11598,7 @@ var SegmentedControl = forwardRef21(
     onSelectedValueChange,
     ...props
   }, ref) => {
-    if (isNil14(children)) {
+    if (isNil13(children)) {
       return null;
     }
     return /* @__PURE__ */ jsx252(
@@ -12244,7 +12229,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 +12358,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 +12456,7 @@ var Tabs = forwardRef27(
                     label,
                     "aria-label": ariaLabelForTab
                   } = tab.props;
-                  if (isNil15(icon)) {
+                  if (isNil14(icon)) {
                     return /* @__PURE__ */ jsx266(
                       TabItem,
                       {
@@ -12537,7 +12522,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 +12607,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 +12713,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 +12883,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 +13164,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 +13364,7 @@ export {
   KeyboardShortcut,
   Label,
   Link,
+  List,
   Menu,
   MenuItem,
   MenuItemDescription,