@wistia/ui 3.4.0 → 3.4.1-beta.553fcfef.3cd9c64

package/dist/index.js

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v3.4.0
+ * @license @wistia/ui v3.4.1-beta.553fcfef.3cd9c64
  *
  * Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
  *
@@ -10,7 +10,7 @@
 import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
 import { Children, Fragment, cloneElement, createContext, forwardRef, isValidElement, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useTransition } from "react";
 import { createGlobalStyle, css, keyframes, styled } from "styled-components";
-import { isArray, isBoolean, isDate, isEmptyString, isFunction, isNil, isNonEmptyArray, isNonEmptyString, isNotNil, isNotUndefined, isNumber, isRecord, isString, isUndefined, noOpFn } from "@wistia/type-guards";
+import { isArray, isBoolean, isDate, isEmptyString, isFunction, isNil, isNonEmptyArray, isNonEmptyString, isNotNil, isNotUndefined, isNumber, isRecord, isString, isUndefined, noOpFn } from "@wistia/utils";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Toaster, toast } from "sonner";
 import { getValueAndUnit } from "polished";
@@ -1902,7 +1902,7 @@ const usePreviousValue = (value) => {
 const lineClampCss = ($lines = 1) => css`
   -webkit-box-orient: vertical;
   -webkit-line-clamp: ${$lines};
-  display: -webkit-box !important;
+  display: -webkit-box;
   white-space: initial;
 `;
 //#endregion
@@ -6939,13 +6939,6 @@ const PolymorphicStyledHeading = withPolymorphicAs(styled.div`
   line-height: var(--line-height);
   color: var(--text-color);
   ${({ $variant }) => headingVariantStyleMap[$variant]}
-  ${({ $maxLines, $wordBreak }) => {
-	if (isNotNil($maxLines)) return css`
-        ${ellipsisStyle};
-        ${lineClampCss($maxLines)};
-        ${wordBreakCss($wordBreak)};
-      `;
-}}
   ${({ $inline }) => $inline && css`
       display: inline-block;
     `}
@@ -6961,6 +6954,13 @@ const PolymorphicStyledHeading = withPolymorphicAs(styled.div`
   margin: 0;
 
   ${iconInlineStyle}
+  ${({ $maxLines, $wordBreak }) => {
+	if (isNotNil($maxLines)) return css`
+        ${ellipsisStyle};
+        ${lineClampCss($maxLines)};
+        ${wordBreakCss($wordBreak)};
+      `;
+}}
 `);
 const headingVariantElementMap = {
 	hero: DEFAULT_ELEMENT$3,
@@ -7168,13 +7168,6 @@ const PolymorphicStyledText = withPolymorphicAs(styled.div`
   font-style: normal;
   margin: 0;
   ${({ $variant }) => textVariantStyleMap[$variant]}
-  ${({ $maxLines, $wordBreak }) => {
-	if (isNotNil($maxLines)) return css`
-        ${ellipsisStyle};
-        ${lineClampCss($maxLines)};
-        ${wordBreakCss($wordBreak)};
-      `;
-}}
   ${({ $inline }) => $inline && css`
       display: inline-block;
     `}
@@ -7197,6 +7190,13 @@ const PolymorphicStyledText = withPolymorphicAs(styled.div`
         margin-top: var(--paragraph-spacing, var(--wui-space-04));
       }
     `}
+  ${({ $maxLines, $wordBreak }) => {
+	if (isNotNil($maxLines)) return css`
+        ${ellipsisStyle};
+        ${lineClampCss($maxLines)};
+        ${wordBreakCss($wordBreak)};
+      `;
+}}
 `);
 const TextComponent = ({ ref, align = "left", children, colorScheme = "inherit", disabled = false, inline = false, maxChars, preventUserSelect = false, prominence = "primary", maxLines, textTransform, wordBreak = "anywhere", variant = "body2", renderAs, ...props }) => {
 	const processedChildren = applyMaxCharsToChildren(children, maxChars);
@@ -9262,6 +9262,112 @@ const RadioCardRoot = ({ children, disabled = false, id, isGated = false, name,
 	});
 };
 //#endregion
+//#region src/components/RadioCard/RadioCardIndicator.tsx
+const RadioCardIndicator = styled.div`
+  --wui-radio-card-indicator-size: 14px;
+  --wui-radio-card-indicator-background-color: var(--wui-color-bg-surface);
+  --wui-radio-card-indicator-fill-color: var(--wui-color-bg-fill);
+
+  /* TODO: figure out radio / checkbox / switch colors */
+  --wui-radio-card-indicator-border-color: var(--wui-color-border-secondary-active);
+
+  width: var(--wui-radio-card-indicator-size);
+  height: var(--wui-radio-card-indicator-size);
+  min-width: var(--wui-radio-card-indicator-size);
+  min-height: var(--wui-radio-card-indicator-size);
+  background-color: var(--wui-radio-card-indicator-background-color);
+  box-shadow: inset 0 0 0 1px var(--wui-radio-card-indicator-border-color);
+  border-radius: 100%;
+  position: relative;
+  cursor: pointer;
+  transition: border-color var(--wui-motion-duration-03) var(--wui-motion-ease);
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    background-color: var(--wui-radio-card-indicator-fill-color);
+    border-radius: 100%;
+    transform: translate(-50%, -50%);
+  }
+
+  ${StyledCard}:has(input:checked) & {
+    --wui-radio-card-indicator-border-color: var(--wui-color-focus-ring);
+    --wui-radio-card-indicator-fill-color: var(--wui-color-focus-ring);
+
+    &::after {
+      width: calc(var(--wui-radio-card-indicator-size) / 2);
+      height: calc(var(--wui-radio-card-indicator-size) / 2);
+    }
+  }
+
+  ${StyledCard}:has(input:disabled) & {
+    --wui-radio-card-indicator-border-color: var(--wui-color-border-secondary);
+    --wui-radio-card-indicator-background-color: var(--wui-color-bg-surface-disabled);
+  }
+`;
+RadioCardIndicator.displayName = "RadioCardIndicator_UI";
+//#endregion
+//#region src/components/RadioCard/RadioCardDefaultLayout.tsx
+const StyledCardContent$1 = styled.div`
+  display: grid;
+  grid-auto-flow: column;
+  gap: var(--wui-space-02);
+`;
+const StyledCardIcon$1 = styled.div`
+  display: contents;
+`;
+const StyledGatedIcon = styled.div`
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  z-index: 1;
+`;
+const StyledIndicatorContainer$1 = styled.div`
+  height: ${({ $hasIcon }) => $hasIcon ? "24px" : "16px"};
+  display: flex;
+  align-items: center;
+`;
+const RadioCardDefaultLayout = ({ icon, label, description, showIndicator = true, isGated = false }) => {
+	const gatedIcon = useGatedIcon();
+	return /* @__PURE__ */ jsxs(StyledCardContent$1, { children: [
+		showIndicator ? /* @__PURE__ */ jsx(StyledIndicatorContainer$1, {
+			$hasIcon: isNotNil(icon),
+			children: /* @__PURE__ */ jsx(RadioCardIndicator, { "data-testid": "wui-radio-card-indicator" })
+		}) : null,
+		isGated ? /* @__PURE__ */ jsx(StyledGatedIcon, {
+			"data-testid": "wui-radio-gated-icon",
+			children: /* @__PURE__ */ jsx(Icon, {
+				colorScheme: "purple",
+				"data-testid": "wui-icon-sparkle",
+				type: gatedIcon
+			})
+		}) : null,
+		/* @__PURE__ */ jsxs(Stack, {
+			gap: "space-02",
+			children: [isNotNil(icon) && /* @__PURE__ */ jsx(StyledCardIcon$1, {
+				"data-wui-radio-card-icon": true,
+				children: icon
+			}), /* @__PURE__ */ jsxs(Stack, {
+				gap: "space-01",
+				style: isNotNil(icon) ? { paddingLeft: 2 } : void 0,
+				children: [isNotNil(label) && /* @__PURE__ */ jsx(Text, {
+					variant: "label3",
+					children: /* @__PURE__ */ jsx("strong", { children: label })
+				}), isNotNil(description) && /* @__PURE__ */ jsx(Text, {
+					prominence: "secondary",
+					variant: "body3",
+					children: description
+				})]
+			})]
+		})
+	] });
+};
+RadioCardDefaultLayout.displayName = "RadioCardDefaultLayout_UI";
+//#endregion
 //#region src/components/CheckboxCard/CheckboxCardIndicator.tsx
 const CheckIcon = () => /* @__PURE__ */ jsx("svg", {
 	fill: "inherit",
@@ -9323,33 +9429,27 @@ const CheckboxCardIndicator = (props) => /* @__PURE__ */ jsx(StyledIndicator, {
 CheckboxCardIndicator.displayName = "CheckboxCardIndicator_UI";
 //#endregion
 //#region src/components/CheckboxCard/CheckboxCardDefaultLayout.tsx
-const StyledCardContent$1 = styled.div`
+const StyledCardContent = styled.div`
   display: grid;
   grid-auto-flow: column;
   gap: var(--wui-space-02);
 `;
-const StyledCardIcon$1 = styled.div`
+const StyledCardIcon = styled.div`
   display: contents;
 `;
-const StyledGatedIcon$1 = styled.div`
-  position: absolute;
-  right: 10px;
-  top: 10px;
-  z-index: 1;
-`;
-const StyledIndicatorContainer$1 = styled.div`
+const StyledIndicatorContainer = styled.div`
   height: ${({ $hasIcon }) => $hasIcon ? "24px" : "16px"};
   display: flex;
   align-items: center;
 `;
 const CheckboxCardDefaultLayout = ({ icon, label, description, showIndicator = true, isGated = false }) => {
 	const gatedIcon = useGatedIcon();
-	return /* @__PURE__ */ jsxs(StyledCardContent$1, { children: [
-		showIndicator ? /* @__PURE__ */ jsx(StyledIndicatorContainer$1, {
+	return /* @__PURE__ */ jsxs(StyledCardContent, { children: [
+		showIndicator ? /* @__PURE__ */ jsx(StyledIndicatorContainer, {
 			$hasIcon: isNotNil(icon),
 			children: /* @__PURE__ */ jsx(CheckboxCardIndicator, { "data-testid": "wui-checkbox-card-indicator" })
 		}) : null,
-		isGated ? /* @__PURE__ */ jsx(StyledGatedIcon$1, {
+		isGated ? /* @__PURE__ */ jsx(StyledGatedIcon, {
 			"data-testid": "wui-checkbox-gated-icon",
 			children: /* @__PURE__ */ jsx(Icon, {
 				colorScheme: "purple",
@@ -9359,7 +9459,7 @@ const CheckboxCardDefaultLayout = ({ icon, label, description, showIndicator = t
 		}) : null,
 		/* @__PURE__ */ jsxs(Stack, {
 			gap: "space-02",
-			children: [isNotNil(icon) && /* @__PURE__ */ jsx(StyledCardIcon$1, {
+			children: [isNotNil(icon) && /* @__PURE__ */ jsx(StyledCardIcon, {
 				"data-wui-checkbox-card-icon": true,
 				children: icon
 			}), /* @__PURE__ */ jsxs(Stack, {
@@ -12417,6 +12517,27 @@ const PopoverCloseButton = ({ label = "Close" }) => /* @__PURE__ */ jsx(PopoverC
 }) });
 PopoverCloseButton.displayName = "PopoverCloseButton_UI";
 //#endregion
+//#region src/components/Popover/withDefaultCollisionAvoidance.ts
+/**
+* Resolves PopoverContent's `collisionAvoidance` prop one field at a time.
+* Base UI fills omitted fields with its own defaults (`align: 'flip'`,
+* `fallbackAxisSide: 'end'`), so this fills them with ours instead. A
+* `side: 'shift'` object only allows `align: 'shift' | 'none'`, hence the branch.
+*/
+const withDefaultCollisionAvoidance = (collisionAvoidance = {}) => {
+	const fallbackAxisSide = collisionAvoidance.fallbackAxisSide ?? "none";
+	if (collisionAvoidance.side === "shift") return {
+		side: "shift",
+		align: collisionAvoidance.align ?? "shift",
+		fallbackAxisSide
+	};
+	return {
+		side: collisionAvoidance.side ?? "flip",
+		align: collisionAvoidance.align ?? "shift",
+		fallbackAxisSide
+	};
+};
+//#endregion
 //#region src/components/Popover/PopoverContent.tsx
 const StyledPopup$2 = styled(Popover$1.Popup)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
@@ -12444,7 +12565,7 @@ const DEFAULT_MAX_HEIGHT = "auto";
 * The styled popover surface. Place inside a `PopoverRoot` (typically wrapped
 * in a `PopoverPortal`). Wraps a `Positioner` and `Popup` internally.
 */
-const PopoverContent = ({ colorScheme = "inherit", unstyled = false, maxWidth = DEFAULT_MAX_WIDTH, maxHeight = DEFAULT_MAX_HEIGHT, sideOffset = DEFAULT_SIDE_OFFSET, side, align, style, role = "dialog", children, ref, ...props }) => {
+const PopoverContent = ({ colorScheme = "inherit", unstyled = false, maxWidth = DEFAULT_MAX_WIDTH, maxHeight = DEFAULT_MAX_HEIGHT, sideOffset = DEFAULT_SIDE_OFFSET, side, align, collisionAvoidance, style, role = "dialog", children, ref, ...props }) => {
 	const sharedAnchorRef = usePopoverAnchor();
 	const hasAnchor = sharedAnchorRef?.current != null;
 	const mergedStyle = {
@@ -12454,11 +12575,7 @@ const PopoverContent = ({ colorScheme = "inherit", unstyled = false, maxWidth =
 	};
 	return /* @__PURE__ */ jsx(Popover$1.Positioner, {
 		align,
-		collisionAvoidance: {
-			side: "flip",
-			align: "shift",
-			fallbackAxisSide: "none"
-		},
+		collisionAvoidance: withDefaultCollisionAvoidance(collisionAvoidance),
 		side,
 		sideOffset,
 		style: { zIndex: "var(--wui-zindex-popover)" },
@@ -15389,7 +15506,7 @@ const spacesStyle = css`
 
     &:last-child {
       &::after {
-        content: '' !important;
+        content: '';
         padding-right: 0;
       }
     }
@@ -15400,7 +15517,7 @@ const commasStyle = css`
 
   li {
     &::after {
-      content: ',' !important;
+      content: ',';
       padding-right: var(--wui-space-01);
     }
   }
@@ -15410,7 +15527,7 @@ const slashesStyle = css`
 
   li {
     &::after {
-      content: '/' !important;
+      content: '/';
       padding-left: var(--wui-space-01);
       padding-right: var(--wui-space-01);
     }
@@ -15421,7 +15538,7 @@ const breadcrumbsStyle = css`
 
   li {
     &::after {
-      content: '>' !important;
+      content: '>';
       padding-left: var(--wui-space-01);
       padding-right: var(--wui-space-01);
     }
@@ -16289,112 +16406,6 @@ const RadioCardChildrenContainer = styled.div`
   flex: 1 1 auto;
 `;
 //#endregion
-//#region src/components/RadioCard/RadioCardIndicator.tsx
-const RadioCardIndicator = styled.div`
-  --wui-radio-card-indicator-size: 14px;
-  --wui-radio-card-indicator-background-color: var(--wui-color-bg-surface);
-  --wui-radio-card-indicator-fill-color: var(--wui-color-bg-fill);
-
-  /* TODO: figure out radio / checkbox / switch colors */
-  --wui-radio-card-indicator-border-color: var(--wui-color-border-secondary-active);
-
-  width: var(--wui-radio-card-indicator-size);
-  height: var(--wui-radio-card-indicator-size);
-  min-width: var(--wui-radio-card-indicator-size);
-  min-height: var(--wui-radio-card-indicator-size);
-  background-color: var(--wui-radio-card-indicator-background-color);
-  box-shadow: inset 0 0 0 1px var(--wui-radio-card-indicator-border-color);
-  border-radius: 100%;
-  position: relative;
-  cursor: pointer;
-  transition: border-color var(--wui-motion-duration-03) var(--wui-motion-ease);
-
-  &::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 0;
-    height: 0;
-    background-color: var(--wui-radio-card-indicator-fill-color);
-    border-radius: 100%;
-    transform: translate(-50%, -50%);
-  }
-
-  ${StyledCard}:has(input:checked) & {
-    --wui-radio-card-indicator-border-color: var(--wui-color-focus-ring);
-    --wui-radio-card-indicator-fill-color: var(--wui-color-focus-ring);
-
-    &::after {
-      width: calc(var(--wui-radio-card-indicator-size) / 2);
-      height: calc(var(--wui-radio-card-indicator-size) / 2);
-    }
-  }
-
-  ${StyledCard}:has(input:disabled) & {
-    --wui-radio-card-indicator-border-color: var(--wui-color-border-secondary);
-    --wui-radio-card-indicator-background-color: var(--wui-color-bg-surface-disabled);
-  }
-`;
-RadioCardIndicator.displayName = "RadioCardIndicator_UI";
-//#endregion
-//#region src/components/RadioCard/RadioCardDefaultLayout.tsx
-const StyledCardContent = styled.div`
-  display: grid;
-  grid-auto-flow: column;
-  gap: var(--wui-space-02);
-`;
-const StyledCardIcon = styled.div`
-  display: contents;
-`;
-const StyledGatedIcon = styled.div`
-  position: absolute;
-  right: 10px;
-  top: 10px;
-  z-index: 1;
-`;
-const StyledIndicatorContainer = styled.div`
-  height: ${({ $hasIcon }) => $hasIcon ? "24px" : "16px"};
-  display: flex;
-  align-items: center;
-`;
-const RadioCardDefaultLayout = ({ icon, label, description, showIndicator = true, isGated = false }) => {
-	const gatedIcon = useGatedIcon();
-	return /* @__PURE__ */ jsxs(StyledCardContent, { children: [
-		showIndicator ? /* @__PURE__ */ jsx(StyledIndicatorContainer, {
-			$hasIcon: isNotNil(icon),
-			children: /* @__PURE__ */ jsx(RadioCardIndicator, { "data-testid": "wui-radio-card-indicator" })
-		}) : null,
-		isGated ? /* @__PURE__ */ jsx(StyledGatedIcon, {
-			"data-testid": "wui-radio-gated-icon",
-			children: /* @__PURE__ */ jsx(Icon, {
-				colorScheme: "purple",
-				"data-testid": "wui-icon-sparkle",
-				type: gatedIcon
-			})
-		}) : null,
-		/* @__PURE__ */ jsxs(Stack, {
-			gap: "space-02",
-			children: [isNotNil(icon) && /* @__PURE__ */ jsx(StyledCardIcon, {
-				"data-wui-radio-card-icon": true,
-				children: icon
-			}), /* @__PURE__ */ jsxs(Stack, {
-				gap: "space-01",
-				style: isNotNil(icon) ? { paddingLeft: 2 } : void 0,
-				children: [isNotNil(label) && /* @__PURE__ */ jsx(Text, {
-					variant: "label3",
-					children: /* @__PURE__ */ jsx("strong", { children: label })
-				}), isNotNil(description) && /* @__PURE__ */ jsx(Text, {
-					prominence: "secondary",
-					variant: "body3",
-					children: description
-				})]
-			})]
-		})
-	] });
-};
-RadioCardDefaultLayout.displayName = "RadioCardDefaultLayout_UI";
-//#endregion
 //#region src/components/RadioCard/RadioCard.tsx
 /**
 * A `RadioCard` lets users select exactly one option from a set of visually rich, card-based choices.
@@ -16935,14 +16946,19 @@ const Sidebar = ({ children, ref, ...props }) => {
 	});
 };
 //#endregion
-//#region src/components/Sidebar/SidebarHeader.tsx
-const StyledSidebarHeader = styled.div`
+//#region src/components/Sidebar/sidebarSectionStyles.ts
+const sidebarSectionStyles = css`
   display: flex;
   flex-direction: column;
   width: 100%;
   padding-block: var(--wui-sidebar-padding-block);
   padding-inline: var(--wui-sidebar-padding-inline);
 `;
+//#endregion
+//#region src/components/Sidebar/SidebarHeader.tsx
+const StyledSidebarHeader = styled.div`
+  ${sidebarSectionStyles}
+`;
 const SidebarHeader = ({ children }) => {
 	return /* @__PURE__ */ jsx(StyledSidebarHeader, {
 		"data-wui-sidebar-header": true,
@@ -16953,11 +16969,7 @@ SidebarHeader.displayName = "SidebarHeader_UI";
 //#endregion
 //#region src/components/Sidebar/SidebarFooter.tsx
 const StyledSidebarFooter = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  padding-block: var(--wui-sidebar-padding-block);
-  padding-inline: var(--wui-sidebar-padding-inline);
+  ${sidebarSectionStyles}
 `;
 const SidebarFooter = ({ children }) => {
 	return /* @__PURE__ */ jsx(StyledSidebarFooter, {