@wistia/ui 0.15.14-beta.50e89a95.396fb5b → 0.15.14-beta.9bd768c0.e216110

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.15.14-beta.50e89a95.396fb5b
+ * @license @wistia/ui v0.15.14-beta.9bd768c0.e216110
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -14328,10 +14328,44 @@ var import_react64 = require("react");
 var import_type_guards45 = require("@wistia/type-guards");
 var import_styled_components82 = __toESM(require("styled-components"));
 var import_jsx_runtime277 = require("react/jsx-runtime");
+var LARGE_PADDING = "var(--wui-space-02)";
+var SMALL_PADDING = "var(--wui-space-01)";
+var getPaddingForVariant = (variant) => {
+  const largePaddingVariants = [
+    "hero",
+    "heading1",
+    "heading2",
+    "heading3",
+    "heading4",
+    "body1",
+    "label1",
+    "body1Mono"
+  ];
+  const smallPaddingVariants = [
+    "heading5",
+    "heading6",
+    "body2",
+    "body3",
+    "body4",
+    "label2",
+    "label3",
+    "label4",
+    "body2Mono",
+    "body3Mono",
+    "body4Mono"
+  ];
+  if (largePaddingVariants.includes(variant)) {
+    return LARGE_PADDING;
+  }
+  if (smallPaddingVariants.includes(variant)) {
+    return SMALL_PADDING;
+  }
+  return SMALL_PADDING;
+};
 var StyledEditableTextRoot = import_styled_components82.default.div`
   display: contents;
 
-  --wui-editable-text-padding: var(--wui-space-01);
+  --wui-editable-text-padding: ${({ $typographicVariant }) => getPaddingForVariant($typographicVariant)};
   --wui-editable-text-border-radius: var(--wui-border-radius-01);
 `;
 var EditableTextContext = (0, import_react64.createContext)(null);
@@ -14429,6 +14463,7 @@ var EditableTextRoot = ({
   return /* @__PURE__ */ (0, import_jsx_runtime277.jsx)(
     StyledEditableTextRoot,
     {
+      $typographicVariant: typographicVariant,
       "data-testid": "editable-text-root",
       "data-wui-editable-text-root": true,
       "data-wui-editable-text-state": getState(),
@@ -15524,7 +15559,7 @@ Mark.displayName = "Mark_UI";
 var import_react80 = require("react");
 var import_styled_components97 = __toESM(require("styled-components"));
 var import_react_dialog5 = require("@radix-ui/react-dialog");
-var import_type_guards58 = require("@wistia/type-guards");
+var import_type_guards57 = require("@wistia/type-guards");
 
 // src/components/Modal/ModalHeader.tsx
 var import_styled_components94 = __toESM(require("styled-components"));
@@ -15600,7 +15635,6 @@ var ModalHeader = ({
 var import_react79 = require("react");
 var import_styled_components95 = __toESM(require("styled-components"));
 var import_react_dialog3 = require("@radix-ui/react-dialog");
-var import_type_guards57 = require("@wistia/type-guards");
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
 var import_react78 = require("react");
@@ -15738,14 +15772,9 @@ var StyledModalContent = (0, import_styled_components95.default)(import_react_di
     position: fixed;
     top: unset;
     left: unset;
-    width: ${({ $width, $maxWidth }) => {
-  if ((0, import_type_guards57.isNotNil)($maxWidth)) {
-    return "auto";
-  }
-  return $width ?? DEFAULT_MODAL_WIDTH;
-}};
+    width: ${({ $width }) => $width ?? DEFAULT_MODAL_WIDTH};
     min-width: ${({ $width }) => $width ?? DEFAULT_MODAL_WIDTH};
-    max-width: ${({ $maxWidth }) => $maxWidth ?? "var(--wui-modal-max-width)"};
+    max-width: var(--wui-modal-max-width);
     border-radius: var(--wui-border-radius-03);
     animation-duration: var(--wui-motion-duration-03);
     animation-timing-function: var(--wui-motion-ease-out);
@@ -15754,13 +15783,12 @@ var StyledModalContent = (0, import_styled_components95.default)(import_react_di
   }
 `;
 var ModalContent = (0, import_react79.forwardRef)(
-  ({ width, positionVariant = "fixed-top", maxWidth, children, ...props }, ref) => {
+  ({ width, positionVariant = "fixed-top", children, ...props }, ref) => {
     useFocusRestore();
     return /* @__PURE__ */ (0, import_jsx_runtime294.jsx)(
       StyledModalContent,
       {
         ref,
-        $maxWidth: maxWidth,
         $positionVariant: positionVariant,
         $width: width,
         "aria-describedby": void 0,
@@ -15830,7 +15858,6 @@ var Modal = (0, import_react80.forwardRef)(
     hideTitle = false,
     initialFocusRef,
     isOpen,
-    maxWidth,
     onRequestClose,
     positionVariant = "centered",
     title,
@@ -15841,7 +15868,7 @@ var Modal = (0, import_react80.forwardRef)(
       import_react_dialog5.Root,
       {
         onOpenChange: (open2) => {
-          if (!open2 && (0, import_type_guards58.isNotNil)(onRequestClose)) {
+          if (!open2 && (0, import_type_guards57.isNotNil)(onRequestClose)) {
             onRequestClose();
           }
         },
@@ -15852,9 +15879,8 @@ var Modal = (0, import_react80.forwardRef)(
             ModalContent,
             {
               ref,
-              maxWidth,
               onOpenAutoFocus: (event) => {
-                if ((0, import_type_guards58.isNotNil)(initialFocusRef) && initialFocusRef.current) {
+                if ((0, import_type_guards57.isNotNil)(initialFocusRef) && initialFocusRef.current) {
                   event.preventDefault();
                   requestAnimationFrame(() => {
                     initialFocusRef.current?.focus();
@@ -15866,7 +15892,7 @@ var Modal = (0, import_react80.forwardRef)(
               ...props,
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(ModalScrollArea, { children: /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(ModalBody, { children }) }),
-                (0, import_type_guards58.isNotNil)(footer) ? /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(ModalFooter, { children: footer }) : null,
+                (0, import_type_guards57.isNotNil)(footer) ? /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(ModalFooter, { children: footer }) : null,
                 hideCloseButton && hideTitle ? null : /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(
                   ModalHeader,
                   {
@@ -15912,9 +15938,9 @@ var import_react_popover5 = require("@radix-ui/react-popover");
 var import_styled_components99 = __toESM(require("styled-components"));
 
 // src/private/helpers/getControls/getControlProps.tsx
-var import_type_guards59 = require("@wistia/type-guards");
+var import_type_guards58 = require("@wistia/type-guards");
 var getControlProps = (isOpen, onOpenChange) => {
-  return (0, import_type_guards59.isNotNil)(onOpenChange) && (0, import_type_guards59.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {};
+  return (0, import_type_guards58.isNotNil)(onOpenChange) && (0, import_type_guards58.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {};
 };
 
 // src/components/Popover/PopoverArrow.tsx
@@ -16070,7 +16096,7 @@ Popover.displayName = "Popover_UI";
 // src/components/ProgressBar/ProgressBar.tsx
 var import_styled_components100 = __toESM(require("styled-components"));
 var import_react_progress = require("@radix-ui/react-progress");
-var import_type_guards60 = require("@wistia/type-guards");
+var import_type_guards59 = require("@wistia/type-guards");
 var import_jsx_runtime299 = require("react/jsx-runtime");
 var ProgressBarWrapper = import_styled_components100.default.div`
   --progress-bar-height: 8px;
@@ -16126,7 +16152,7 @@ var ProgressBar = ({
   ...props
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime299.jsxs)(ProgressBarWrapper, { children: [
-    (0, import_type_guards60.isNotNil)(labelLeft) ? /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(ProgressBarLabel, { children: labelLeft }) : null,
+    (0, import_type_guards59.isNotNil)(labelLeft) ? /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(ProgressBarLabel, { children: labelLeft }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(
       StyledProgressBar,
       {
@@ -16144,13 +16170,13 @@ var ProgressBar = ({
         )
       }
     ),
-    (0, import_type_guards60.isNotNil)(labelRight) ? /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(ProgressBarLabel, { children: labelRight }) : null
+    (0, import_type_guards59.isNotNil)(labelRight) ? /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(ProgressBarLabel, { children: labelRight }) : null
   ] });
 };
 ProgressBar.displayName = "ProgressBar_UI";
 
 // src/components/Radio/Radio.tsx
-var import_type_guards61 = require("@wistia/type-guards");
+var import_type_guards60 = require("@wistia/type-guards");
 var import_react81 = require("react");
 var import_styled_components101 = __toESM(require("styled-components"));
 var import_jsx_runtime300 = require("react/jsx-runtime");
@@ -16250,14 +16276,14 @@ var Radio = (0, import_react81.forwardRef)(
     ...props
   }, ref) => {
     const generatedId = (0, import_react81.useId)();
-    const computedId = (0, import_type_guards61.isNonEmptyString)(id) ? id : `wistia-ui-radio-${generatedId}`;
+    const computedId = (0, import_type_guards60.isNonEmptyString)(id) ? id : `wistia-ui-radio-${generatedId}`;
     const radioGroupContext = useRadioGroup();
     const contextName = radioGroupContext?.name;
     const contextOnChange = radioGroupContext?.onChange;
     const contextValue = radioGroupContext?.value;
     const radioName = name ?? contextName;
     const handleOnChange = onChange ?? contextOnChange;
-    const isChecked = (0, import_type_guards61.isNotUndefined)(value) && (0, import_type_guards61.isNotUndefined)(contextValue) ? contextValue === value : checked;
+    const isChecked = (0, import_type_guards60.isNotUndefined)(value) && (0, import_type_guards60.isNotUndefined)(contextValue) ? contextValue === value : checked;
     return /* @__PURE__ */ (0, import_jsx_runtime300.jsxs)(
       StyledRadioWrapper,
       {
@@ -16304,7 +16330,7 @@ var import_react83 = require("react");
 // src/components/RadioCard/RadioCardRoot.tsx
 var import_react82 = require("react");
 var import_styled_components102 = __toESM(require("styled-components"));
-var import_type_guards62 = require("@wistia/type-guards");
+var import_type_guards61 = require("@wistia/type-guards");
 var import_jsx_runtime301 = require("react/jsx-runtime");
 var checkedStyles = import_styled_components102.css`
   --wui-radio-card-border-color: var(--wui-color-focus-ring);
@@ -16426,14 +16452,14 @@ var RadioCardRoot = (0, import_react82.forwardRef)(
     ...props
   }, ref) => {
     const generatedId = (0, import_react82.useId)();
-    const computedId = (0, import_type_guards62.isNonEmptyString)(id) ? id : `wistia-ui-radio-${generatedId}`;
+    const computedId = (0, import_type_guards61.isNonEmptyString)(id) ? id : `wistia-ui-radio-${generatedId}`;
     const radioGroupContext = useRadioGroup();
     const contextName = radioGroupContext?.name;
     const contextOnChange = radioGroupContext?.onChange;
     const contextValue = radioGroupContext?.value;
     const radioName = name ?? contextName;
     const handleOnChange = onChange ?? contextOnChange;
-    const isChecked = (0, import_type_guards62.isNotUndefined)(value) && (0, import_type_guards62.isNotUndefined)(contextValue) ? contextValue === value : checked;
+    const isChecked = (0, import_type_guards61.isNotUndefined)(value) && (0, import_type_guards61.isNotUndefined)(contextValue) ? contextValue === value : checked;
     return /* @__PURE__ */ (0, import_jsx_runtime301.jsxs)(
       StyledCard2,
       {
@@ -16465,7 +16491,7 @@ RadioCardRoot.displayName = "RadioCardRoot_UI";
 
 // src/components/RadioCard/RadioCardDefaultLayout.tsx
 var import_styled_components104 = __toESM(require("styled-components"));
-var import_type_guards63 = require("@wistia/type-guards");
+var import_type_guards62 = require("@wistia/type-guards");
 
 // src/components/RadioCard/RadioCardIndicator.tsx
 var import_styled_components103 = __toESM(require("styled-components"));
@@ -16539,17 +16565,17 @@ var RadioCardDefaultLayout = ({
   showIndicator = true
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)(StyledCardContent, { children: [
-    showIndicator ? /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(StyledIndicatorContainer, { $hasIcon: (0, import_type_guards63.isNotNil)(icon), children: /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(RadioCardIndicator, { "data-testid": "wui-radio-card-indicator" }) }) : null,
+    showIndicator ? /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(StyledIndicatorContainer, { $hasIcon: (0, import_type_guards62.isNotNil)(icon), children: /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(RadioCardIndicator, { "data-testid": "wui-radio-card-indicator" }) }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)(Stack, { gap: "space-02", children: [
-      (0, import_type_guards63.isNotNil)(icon) && /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(StyledCardIcon, { "data-wui-radio-card-icon": true, children: icon }),
+      (0, import_type_guards62.isNotNil)(icon) && /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(StyledCardIcon, { "data-wui-radio-card-icon": true, children: icon }),
       /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)(
         Stack,
         {
           gap: "space-01",
-          style: (0, import_type_guards63.isNotNil)(icon) ? { paddingLeft: 2 } : void 0,
+          style: (0, import_type_guards62.isNotNil)(icon) ? { paddingLeft: 2 } : void 0,
           children: [
-            (0, import_type_guards63.isNotNil)(label) && /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(Text, { variant: "label3", children: /* @__PURE__ */ (0, import_jsx_runtime302.jsx)("strong", { children: label }) }),
-            (0, import_type_guards63.isNotNil)(description) && /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
+            (0, import_type_guards62.isNotNil)(label) && /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(Text, { variant: "label3", children: /* @__PURE__ */ (0, import_jsx_runtime302.jsx)("strong", { children: label }) }),
+            (0, import_type_guards62.isNotNil)(description) && /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
               Text,
               {
                 prominence: "secondary",
@@ -16732,7 +16758,7 @@ ScrollArea.displayName = "ScrollArea_UI";
 var import_react88 = require("react");
 var import_styled_components108 = __toESM(require("styled-components"));
 var import_react_toggle_group3 = require("@radix-ui/react-toggle-group");
-var import_type_guards65 = require("@wistia/type-guards");
+var import_type_guards64 = require("@wistia/type-guards");
 
 // src/components/SegmentedControl/useSelectedItemStyle.tsx
 var import_react86 = require("react");
@@ -16769,7 +16795,7 @@ var useSelectedItemStyle = () => {
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
 var import_styled_components107 = __toESM(require("styled-components"));
-var import_type_guards64 = require("@wistia/type-guards");
+var import_type_guards63 = require("@wistia/type-guards");
 
 // src/components/SegmentedControl/useSegmentedControlValue.tsx
 var import_react87 = require("react");
@@ -16803,7 +16829,7 @@ var SelectedItemIndicatorDiv = import_styled_components107.default.div`
 var SelectedItemIndicator = () => {
   const selectedValue = useSegmentedControlValue();
   const { selectedItemIndicatorStyle } = useSelectedItemStyle();
-  if (!selectedValue || (0, import_type_guards64.isUndefined)(selectedItemIndicatorStyle)) {
+  if (!selectedValue || (0, import_type_guards63.isUndefined)(selectedItemIndicatorStyle)) {
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
@@ -16840,7 +16866,7 @@ var SegmentedControl = (0, import_react88.forwardRef)(
     onSelectedValueChange,
     ...props
   }, ref) => {
-    if ((0, import_type_guards65.isNil)(children)) {
+    if ((0, import_type_guards64.isNil)(children)) {
       return null;
     }
     return /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
@@ -16869,7 +16895,7 @@ SegmentedControl.displayName = "SegmentedControl_UI";
 var import_react89 = require("react");
 var import_styled_components109 = __toESM(require("styled-components"));
 var import_react_toggle_group4 = require("@radix-ui/react-toggle-group");
-var import_type_guards66 = require("@wistia/type-guards");
+var import_type_guards65 = require("@wistia/type-guards");
 var import_jsx_runtime309 = require("react/jsx-runtime");
 var segmentedControlItemStyles = import_styled_components109.css`
   all: unset; /* ToggleGroupItem is a button element */
@@ -16985,8 +17011,8 @@ var SegmentedControlItem = (0, import_react89.forwardRef)(
       {
         ref: combinedRef,
         ...otherProps,
-        $hasLabel: (0, import_type_guards66.isNotNil)(label),
-        "aria-label": (0, import_type_guards66.isNotNil)(label) ? void 0 : ariaLabel,
+        $hasLabel: (0, import_type_guards65.isNotNil)(label),
+        "aria-label": (0, import_type_guards65.isNotNil)(label) ? void 0 : ariaLabel,
         disabled,
         onClick: handleClick,
         value,
@@ -17151,7 +17177,7 @@ Select.displayName = "Select_UI";
 var import_react_select2 = require("@radix-ui/react-select");
 var import_react91 = require("react");
 var import_styled_components111 = __toESM(require("styled-components"));
-var import_type_guards67 = require("@wistia/type-guards");
+var import_type_guards66 = require("@wistia/type-guards");
 var import_jsx_runtime311 = require("react/jsx-runtime");
 var StyledItem = (0, import_styled_components111.default)(import_react_select2.Item)`
   ${getTypographicStyles("label3")}
@@ -17188,7 +17214,7 @@ var SelectOption = (0, import_react91.forwardRef)(
         ref: forwardedRef,
         $checkmarkVerticalAlign: checkmarkVerticalAlign,
         children: [
-          (0, import_type_guards67.isNotNil)(selectedDisplayValue) ? /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)("div", { children: [
+          (0, import_type_guards66.isNotNil)(selectedDisplayValue) ? /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)("div", { children: [
             children,
             /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("div", { style: { display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(import_react_select2.ItemText, { children: selectedDisplayValue }) })
           ] }) : /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(import_react_select2.ItemText, { children }),
@@ -17230,7 +17256,7 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
 // src/components/Slider/Slider.tsx
 var import_react_slider2 = require("@radix-ui/react-slider");
 var import_styled_components113 = __toESM(require("styled-components"));
-var import_type_guards68 = require("@wistia/type-guards");
+var import_type_guards67 = require("@wistia/type-guards");
 var import_jsx_runtime313 = require("react/jsx-runtime");
 var SliderContainer = import_styled_components113.default.div`
   --wui-slider-track-color: var(--wui-gray-6);
@@ -17309,7 +17335,7 @@ var Slider = ({
   "data-testid": dataTestId = "ui-slider",
   ...otherProps
 }) => {
-  if (!((0, import_type_guards68.isNonEmptyString)(ariaLabel) || (0, import_type_guards68.isNonEmptyString)(ariaLabelledby))) {
+  if (!((0, import_type_guards67.isNonEmptyString)(ariaLabel) || (0, import_type_guards67.isNonEmptyString)(ariaLabelledby))) {
     throw new Error(
       "UI Slider: Sliders should have an accessible name. Add a label using the aria-label or aria-labelledby prop."
     );
@@ -17471,7 +17497,7 @@ var TableRow = ({ children, ...props }) => {
 // src/components/Tabs/Tabs.tsx
 var import_react_tabs = require("@radix-ui/react-tabs");
 var import_react98 = require("react");
-var import_type_guards69 = require("@wistia/type-guards");
+var import_type_guards68 = require("@wistia/type-guards");
 
 // src/components/Tabs/useTabsValue.tsx
 var import_react97 = require("react");
@@ -17508,10 +17534,10 @@ var Tabs = ({
     ...props,
     onValueChange
   };
-  if ((0, import_type_guards69.isNotNil)(value)) {
+  if ((0, import_type_guards68.isNotNil)(value)) {
     rootProps.value = value;
   }
-  if ((0, import_type_guards69.isNotNil)(defaultValue)) {
+  if ((0, import_type_guards68.isNotNil)(defaultValue)) {
     rootProps.defaultValue = defaultValue;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(import_react_tabs.Root, { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(TabsValueProvider, { value: value ?? defaultValue, children: /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(SelectedItemStyleProvider, { children }) }) });
@@ -17531,7 +17557,7 @@ var import_react_tabs3 = require("@radix-ui/react-tabs");
 var import_styled_components121 = __toESM(require("styled-components"));
 
 // src/components/Tabs/SelectedTabIndicator.tsx
-var import_type_guards70 = require("@wistia/type-guards");
+var import_type_guards69 = require("@wistia/type-guards");
 
 // src/components/Tabs/TabsSelectedItemIndicatorDiv.tsx
 var import_styled_components120 = __toESM(require("styled-components"));
@@ -17546,7 +17572,7 @@ var import_jsx_runtime322 = require("react/jsx-runtime");
 var SelectedTabIndicator = () => {
   const { selectedItemIndicatorStyle } = useSelectedItemStyle();
   const selectedValue = useTabsValue();
-  if (selectedValue == null || (0, import_type_guards70.isUndefined)(selectedItemIndicatorStyle)) {
+  if (selectedValue == null || (0, import_type_guards69.isUndefined)(selectedItemIndicatorStyle)) {
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
@@ -17580,7 +17606,7 @@ TabsList.displayName = "TabsList_UI";
 
 // src/components/Tabs/TabsTrigger.tsx
 var import_react99 = require("react");
-var import_type_guards71 = require("@wistia/type-guards");
+var import_type_guards70 = require("@wistia/type-guards");
 
 // src/components/Tabs/StyledRadixTabsTrigger.tsx
 var import_styled_components122 = __toESM(require("styled-components"));
@@ -17631,8 +17657,8 @@ var TabsTrigger = (0, import_react99.forwardRef)(
       {
         ...otherProps,
         ref: combinedRef,
-        $hasLabel: (0, import_type_guards71.isNotNil)(label),
-        "aria-label": (0, import_type_guards71.isNotNil)(label) ? void 0 : ariaLabel,
+        $hasLabel: (0, import_type_guards70.isNotNil)(label),
+        "aria-label": (0, import_type_guards70.isNotNil)(label) ? void 0 : ariaLabel,
         disabled,
         value,
         children: [
@@ -17647,7 +17673,7 @@ TabsTrigger.displayName = "TabsTrigger_UI";
 
 // src/components/Thumbnail/ThumbnailBadge.tsx
 var import_styled_components123 = __toESM(require("styled-components"));
-var import_type_guards72 = require("@wistia/type-guards");
+var import_type_guards71 = require("@wistia/type-guards");
 var import_jsx_runtime325 = require("react/jsx-runtime");
 var StyledThumbnailBadge = import_styled_components123.default.div`
   align-items: center;
@@ -17676,7 +17702,7 @@ var StyledThumbnailBadge = import_styled_components123.default.div`
 `;
 var ThumbnailBadge = ({ icon, label, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime325.jsxs)(StyledThumbnailBadge, { ...props, children: [
-    (0, import_type_guards72.isNotNil)(icon) && icon,
+    (0, import_type_guards71.isNotNil)(icon) && icon,
     /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("span", { children: label })
   ] });
 };
@@ -17685,10 +17711,10 @@ ThumbnailBadge.displayName = "ThumbnailBadge_UI";
 // src/components/Thumbnail/Thumbnail.tsx
 var import_react100 = require("react");
 var import_styled_components126 = __toESM(require("styled-components"));
-var import_type_guards75 = require("@wistia/type-guards");
+var import_type_guards74 = require("@wistia/type-guards");
 
 // src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
-var import_type_guards73 = require("@wistia/type-guards");
+var import_type_guards72 = require("@wistia/type-guards");
 var import_styled_components124 = require("styled-components");
 var gradients = {
   defaultDarkOne: import_styled_components124.css`
@@ -17816,12 +17842,12 @@ var gradients = {
 };
 var gradientMap = Object.keys(gradients);
 var getBackgroundGradient = (gradientName = void 0) => {
-  return (0, import_type_guards73.isNotNil)(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
+  return (0, import_type_guards72.isNotNil)(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
 };
 
 // src/components/Thumbnail/ThumbnailStoryboardViewer.tsx
 var import_styled_components125 = __toESM(require("styled-components"));
-var import_type_guards74 = require("@wistia/type-guards");
+var import_type_guards73 = require("@wistia/type-guards");
 var import_jsx_runtime326 = require("react/jsx-runtime");
 var ScrubLine = import_styled_components125.default.div`
   position: absolute;
@@ -17915,8 +17941,8 @@ var ThumbnailStoryboardViewer = ({
   );
   const backgroundSize = `${scaledStoryboardWidth}px ${scaledStoryboardHeight}px`;
   const backgroundImage = `url(${storyboardUrl})`;
-  const showScrubLine = (0, import_type_guards74.isNotNil)(cursorPosition);
-  const scrubLinePosition = (0, import_type_guards74.isNotNil)(cursorPosition) ? `${cursorPosition - 1}px` : "0";
+  const showScrubLine = (0, import_type_guards73.isNotNil)(cursorPosition);
+  const scrubLinePosition = (0, import_type_guards73.isNotNil)(cursorPosition) ? `${cursorPosition - 1}px` : "0";
   const viewerStyles = {
     position: "relative",
     overflow: "hidden",
@@ -17987,10 +18013,10 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
   );
 };
 var StyledThumbnail = import_styled_components126.default.div`
-  background-image: ${({ $backgroundUrl }) => (0, import_type_guards75.isNotNil)($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
+  background-image: ${({ $backgroundUrl }) => (0, import_type_guards74.isNotNil)($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
   ${({ $backgroundUrl, $gradientBackground }) => (
   // if we don't have $backgroundUrl show a gradient
-  (0, import_type_guards75.isNil)($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
+  (0, import_type_guards74.isNil)($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
 )};
   background-position: center center;
   background-size: cover;
@@ -18022,7 +18048,7 @@ var StoryboardRenderer = ({
     frameCount,
     aspectRatio
   } = storyboard;
-  const targetWidth = (0, import_type_guards75.isString)(width) ? parseInt(width, 10) : Number(width);
+  const targetWidth = (0, import_type_guards74.isString)(width) ? parseInt(width, 10) : Number(width);
   const effectiveCursorPosition = isStoryboardReady ? cursorPosition : null;
   return /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(
     ThumbnailStoryboardViewer,
@@ -18066,10 +18092,10 @@ var Thumbnail = (0, import_react100.forwardRef)(
     const storyboardElementRef = (0, import_react100.useRef)(null);
     const [cursorPosition, setCursorPosition] = (0, import_react100.useState)(null);
     const backgroundUrl = (0, import_react100.useMemo)(
-      () => thumbnailImageType === "square" && (0, import_type_guards75.isNotNil)(thumbnailUrl) ? thumbnailUrl : void 0,
+      () => thumbnailImageType === "square" && (0, import_type_guards74.isNotNil)(thumbnailUrl) ? thumbnailUrl : void 0,
       [thumbnailImageType, thumbnailUrl]
     );
-    const isScrubbable = (0, import_type_guards75.isNotNil)(storyboard);
+    const isScrubbable = (0, import_type_guards74.isNotNil)(storyboard);
     const trackStoryboardLoadStatus = (0, import_react100.useCallback)(() => {
       if (storyboardElementRef.current || !storyboard) {
         return storyboardElementRef.current;
@@ -18099,7 +18125,7 @@ var Thumbnail = (0, import_react100.forwardRef)(
       setCursorPosition(null);
     }, [isScrubbable]);
     const shouldRenderStoryboard = (0, import_react100.useMemo)(() => {
-      if ((0, import_type_guards75.isNil)(storyboard) || (0, import_type_guards75.isUndefined)(height) || (0, import_type_guards75.isEmptyString)(height)) {
+      if ((0, import_type_guards74.isNil)(storyboard) || (0, import_type_guards74.isUndefined)(height) || (0, import_type_guards74.isEmptyString)(height)) {
         return false;
       }
       return isScrubbable && isMouseOver && isStoryboardReady;
@@ -18116,7 +18142,7 @@ var Thumbnail = (0, import_react100.forwardRef)(
           width
         }
       );
-    } else if ((0, import_type_guards75.isNotNil)(thumbnailUrl)) {
+    } else if ((0, import_type_guards74.isNotNil)(thumbnailUrl)) {
       thumbnailContent = /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(
         ThumbnailImage,
         {
@@ -18141,7 +18167,7 @@ var Thumbnail = (0, import_react100.forwardRef)(
         onMouseOut: handleMouseOut,
         role: "presentation",
         children: [
-          (0, import_type_guards75.isNotNil)(children) ? children : null,
+          (0, import_type_guards74.isNotNil)(children) ? children : null,
           thumbnailContent
         ]
       }
@@ -18153,7 +18179,7 @@ Thumbnail.displayName = "Thumbnail_UI";
 // src/components/ThumbnailCollage/ThumbnailCollage.tsx
 var import_react101 = __toESM(require("react"));
 var import_styled_components127 = __toESM(require("styled-components"));
-var import_type_guards76 = require("@wistia/type-guards");
+var import_type_guards75 = require("@wistia/type-guards");
 var import_jsx_runtime328 = (
   // ThumbnailCollage will fallback to a Thumbnail with a gradient background if no children are provided
   require("react/jsx-runtime")
@@ -18233,7 +18259,7 @@ var ThumbnailCollage = ({
 }) => {
   const thumbnailArray = import_react101.default.Children.toArray(children);
   const truncatedThumbnails = thumbnailArray.slice(0, 3);
-  const thumbnails = (0, import_type_guards76.isNonEmptyArray)(thumbnailArray) ? truncatedThumbnails.map((child) => {
+  const thumbnails = (0, import_type_guards75.isNonEmptyArray)(thumbnailArray) ? truncatedThumbnails.map((child) => {
     return import_react101.default.cloneElement(child, {
       ...child.props,
       children: void 0
@@ -18261,7 +18287,7 @@ var ThumbnailCollage = ({
 
 // src/components/WistiaLogo/WistiaLogo.tsx
 var import_styled_components128 = __toESM(require("styled-components"));
-var import_type_guards77 = require("@wistia/type-guards");
+var import_type_guards76 = require("@wistia/type-guards");
 var import_jsx_runtime329 = require("react/jsx-runtime");
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
@@ -18374,7 +18400,7 @@ var WistiaLogo = ({
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime329.jsx)("title", { children: title }),
-        (0, import_type_guards77.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime329.jsx)("desc", { children: description }) : null,
+        (0, import_type_guards76.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime329.jsx)("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
@@ -18386,7 +18412,7 @@ WistiaLogo.displayName = "WistiaLogo_UI";
 
 // src/components/SplitButton/SplitButton.tsx
 var import_styled_components129 = __toESM(require("styled-components"));
-var import_type_guards78 = require("@wistia/type-guards");
+var import_type_guards77 = require("@wistia/type-guards");
 var import_react102 = require("react");
 var import_jsx_runtime330 = require("react/jsx-runtime");
 var StyledSplitButton = import_styled_components129.default.span`
@@ -18433,7 +18459,7 @@ var SplitButton = ({
         children
       }
     ),
-    (0, import_type_guards78.isNotNil)(menuItems) && /* @__PURE__ */ (0, import_jsx_runtime330.jsx)(
+    (0, import_type_guards77.isNotNil)(menuItems) && /* @__PURE__ */ (0, import_jsx_runtime330.jsx)(
       Menu,
       {
         ...menuProps,
@@ -18452,7 +18478,7 @@ var SplitButton = ({
         children: menuItems
       }
     ),
-    (0, import_type_guards78.isNotNil)(secondaryAction) && (0, import_react102.cloneElement)(secondaryAction, { disabled, size, unstyled, variant, colorScheme })
+    (0, import_type_guards77.isNotNil)(secondaryAction) && (0, import_react102.cloneElement)(secondaryAction, { disabled, size, unstyled, variant, colorScheme })
   ] });
 };
 SplitButton.displayName = "SplitButton_UI";