@wistia/ui 0.15.14-beta.1e41934b.72b042b → 0.15.14-beta.50e89a95.396fb5b

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.15.14-beta.1e41934b.72b042b
+ * @license @wistia/ui v0.15.14-beta.50e89a95.396fb5b
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -14937,6 +14937,7 @@ var FormField = ({
   label,
   labelPosition,
   name,
+  required = false,
   value,
   ...props
 }) => {
@@ -14986,7 +14987,14 @@ var FormField = ({
       ...props,
       "data-label-position": labelPosition ?? formState.labelPosition,
       children: [
-        !isIntegratedLabel && /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(Label, { htmlFor: computedId, children: label }),
+        !isIntegratedLabel && /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(
+          Label,
+          {
+            htmlFor: computedId,
+            required,
+            children: label
+          }
+        ),
         (0, import_type_guards49.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
         (0, import_react73.cloneElement)(children, childProps),
         (0, import_type_guards49.isNotNil)(computedError) ? /* @__PURE__ */ (0, import_jsx_runtime283.jsxs)(import_jsx_runtime283.Fragment, { children: [
@@ -15516,7 +15524,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_guards57 = require("@wistia/type-guards");
+var import_type_guards58 = require("@wistia/type-guards");
 
 // src/components/Modal/ModalHeader.tsx
 var import_styled_components94 = __toESM(require("styled-components"));
@@ -15592,6 +15600,7 @@ 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");
@@ -15729,9 +15738,14 @@ var StyledModalContent = (0, import_styled_components95.default)(import_react_di
     position: fixed;
     top: unset;
     left: unset;
-    width: ${({ $width }) => $width ?? DEFAULT_MODAL_WIDTH};
+    width: ${({ $width, $maxWidth }) => {
+  if ((0, import_type_guards57.isNotNil)($maxWidth)) {
+    return "auto";
+  }
+  return $width ?? DEFAULT_MODAL_WIDTH;
+}};
     min-width: ${({ $width }) => $width ?? DEFAULT_MODAL_WIDTH};
-    max-width: var(--wui-modal-max-width);
+    max-width: ${({ $maxWidth }) => $maxWidth ?? "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);
@@ -15740,12 +15754,13 @@ var StyledModalContent = (0, import_styled_components95.default)(import_react_di
   }
 `;
 var ModalContent = (0, import_react79.forwardRef)(
-  ({ width, positionVariant = "fixed-top", children, ...props }, ref) => {
+  ({ width, positionVariant = "fixed-top", maxWidth, children, ...props }, ref) => {
     useFocusRestore();
     return /* @__PURE__ */ (0, import_jsx_runtime294.jsx)(
       StyledModalContent,
       {
         ref,
+        $maxWidth: maxWidth,
         $positionVariant: positionVariant,
         $width: width,
         "aria-describedby": void 0,
@@ -15815,6 +15830,7 @@ var Modal = (0, import_react80.forwardRef)(
     hideTitle = false,
     initialFocusRef,
     isOpen,
+    maxWidth,
     onRequestClose,
     positionVariant = "centered",
     title,
@@ -15825,7 +15841,7 @@ var Modal = (0, import_react80.forwardRef)(
       import_react_dialog5.Root,
       {
         onOpenChange: (open2) => {
-          if (!open2 && (0, import_type_guards57.isNotNil)(onRequestClose)) {
+          if (!open2 && (0, import_type_guards58.isNotNil)(onRequestClose)) {
             onRequestClose();
           }
         },
@@ -15836,8 +15852,9 @@ var Modal = (0, import_react80.forwardRef)(
             ModalContent,
             {
               ref,
+              maxWidth,
               onOpenAutoFocus: (event) => {
-                if ((0, import_type_guards57.isNotNil)(initialFocusRef) && initialFocusRef.current) {
+                if ((0, import_type_guards58.isNotNil)(initialFocusRef) && initialFocusRef.current) {
                   event.preventDefault();
                   requestAnimationFrame(() => {
                     initialFocusRef.current?.focus();
@@ -15849,7 +15866,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_guards57.isNotNil)(footer) ? /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(ModalFooter, { children: footer }) : null,
+                (0, import_type_guards58.isNotNil)(footer) ? /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(ModalFooter, { children: footer }) : null,
                 hideCloseButton && hideTitle ? null : /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(
                   ModalHeader,
                   {
@@ -15895,9 +15912,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_guards58 = require("@wistia/type-guards");
+var import_type_guards59 = require("@wistia/type-guards");
 var getControlProps = (isOpen, onOpenChange) => {
-  return (0, import_type_guards58.isNotNil)(onOpenChange) && (0, import_type_guards58.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {};
+  return (0, import_type_guards59.isNotNil)(onOpenChange) && (0, import_type_guards59.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {};
 };
 
 // src/components/Popover/PopoverArrow.tsx
@@ -16053,7 +16070,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_guards59 = require("@wistia/type-guards");
+var import_type_guards60 = require("@wistia/type-guards");
 var import_jsx_runtime299 = require("react/jsx-runtime");
 var ProgressBarWrapper = import_styled_components100.default.div`
   --progress-bar-height: 8px;
@@ -16109,7 +16126,7 @@ var ProgressBar = ({
   ...props
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime299.jsxs)(ProgressBarWrapper, { children: [
-    (0, import_type_guards59.isNotNil)(labelLeft) ? /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(ProgressBarLabel, { children: labelLeft }) : null,
+    (0, import_type_guards60.isNotNil)(labelLeft) ? /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(ProgressBarLabel, { children: labelLeft }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(
       StyledProgressBar,
       {
@@ -16127,13 +16144,13 @@ var ProgressBar = ({
         )
       }
     ),
-    (0, import_type_guards59.isNotNil)(labelRight) ? /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(ProgressBarLabel, { children: labelRight }) : null
+    (0, import_type_guards60.isNotNil)(labelRight) ? /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(ProgressBarLabel, { children: labelRight }) : null
   ] });
 };
 ProgressBar.displayName = "ProgressBar_UI";
 
 // src/components/Radio/Radio.tsx
-var import_type_guards60 = require("@wistia/type-guards");
+var import_type_guards61 = 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");
@@ -16233,14 +16250,14 @@ var Radio = (0, import_react81.forwardRef)(
     ...props
   }, ref) => {
     const generatedId = (0, import_react81.useId)();
-    const computedId = (0, import_type_guards60.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_guards60.isNotUndefined)(value) && (0, import_type_guards60.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_runtime300.jsxs)(
       StyledRadioWrapper,
       {
@@ -16287,7 +16304,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_guards61 = require("@wistia/type-guards");
+var import_type_guards62 = 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);
@@ -16409,14 +16426,14 @@ var RadioCardRoot = (0, import_react82.forwardRef)(
     ...props
   }, ref) => {
     const generatedId = (0, import_react82.useId)();
-    const computedId = (0, import_type_guards61.isNonEmptyString)(id) ? id : `wistia-ui-radio-${generatedId}`;
+    const computedId = (0, import_type_guards62.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_guards62.isNotUndefined)(value) && (0, import_type_guards62.isNotUndefined)(contextValue) ? contextValue === value : checked;
     return /* @__PURE__ */ (0, import_jsx_runtime301.jsxs)(
       StyledCard2,
       {
@@ -16448,7 +16465,7 @@ RadioCardRoot.displayName = "RadioCardRoot_UI";
 
 // src/components/RadioCard/RadioCardDefaultLayout.tsx
 var import_styled_components104 = __toESM(require("styled-components"));
-var import_type_guards62 = require("@wistia/type-guards");
+var import_type_guards63 = require("@wistia/type-guards");
 
 // src/components/RadioCard/RadioCardIndicator.tsx
 var import_styled_components103 = __toESM(require("styled-components"));
@@ -16522,17 +16539,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_guards62.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_guards63.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_guards62.isNotNil)(icon) && /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(StyledCardIcon, { "data-wui-radio-card-icon": true, children: icon }),
+      (0, import_type_guards63.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_guards62.isNotNil)(icon) ? { paddingLeft: 2 } : void 0,
+          style: (0, import_type_guards63.isNotNil)(icon) ? { paddingLeft: 2 } : void 0,
           children: [
-            (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)(
+            (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)(
               Text,
               {
                 prominence: "secondary",
@@ -16715,7 +16732,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_guards64 = require("@wistia/type-guards");
+var import_type_guards65 = require("@wistia/type-guards");
 
 // src/components/SegmentedControl/useSelectedItemStyle.tsx
 var import_react86 = require("react");
@@ -16752,7 +16769,7 @@ var useSelectedItemStyle = () => {
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
 var import_styled_components107 = __toESM(require("styled-components"));
-var import_type_guards63 = require("@wistia/type-guards");
+var import_type_guards64 = require("@wistia/type-guards");
 
 // src/components/SegmentedControl/useSegmentedControlValue.tsx
 var import_react87 = require("react");
@@ -16786,7 +16803,7 @@ var SelectedItemIndicatorDiv = import_styled_components107.default.div`
 var SelectedItemIndicator = () => {
   const selectedValue = useSegmentedControlValue();
   const { selectedItemIndicatorStyle } = useSelectedItemStyle();
-  if (!selectedValue || (0, import_type_guards63.isUndefined)(selectedItemIndicatorStyle)) {
+  if (!selectedValue || (0, import_type_guards64.isUndefined)(selectedItemIndicatorStyle)) {
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
@@ -16823,7 +16840,7 @@ var SegmentedControl = (0, import_react88.forwardRef)(
     onSelectedValueChange,
     ...props
   }, ref) => {
-    if ((0, import_type_guards64.isNil)(children)) {
+    if ((0, import_type_guards65.isNil)(children)) {
       return null;
     }
     return /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
@@ -16852,7 +16869,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_guards65 = require("@wistia/type-guards");
+var import_type_guards66 = 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 */
@@ -16968,8 +16985,8 @@ var SegmentedControlItem = (0, import_react89.forwardRef)(
       {
         ref: combinedRef,
         ...otherProps,
-        $hasLabel: (0, import_type_guards65.isNotNil)(label),
-        "aria-label": (0, import_type_guards65.isNotNil)(label) ? void 0 : ariaLabel,
+        $hasLabel: (0, import_type_guards66.isNotNil)(label),
+        "aria-label": (0, import_type_guards66.isNotNil)(label) ? void 0 : ariaLabel,
         disabled,
         onClick: handleClick,
         value,
@@ -16997,6 +17014,7 @@ var StyledTrigger2 = (0, import_styled_components110.default)(import_react_selec
   outline: 1px solid var(--wui-input-color-border);
   outline-offset: -2px;
   border-radius: var(--wui-input-border-radius);
+  min-width: 200px;
   text-align: left;
   display: inline-flex;
   align-items: center;
@@ -17133,14 +17151,13 @@ 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_guards66 = require("@wistia/type-guards");
+var import_type_guards67 = 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")}
   align-items: ${({ $checkmarkVerticalAlign }) => $checkmarkVerticalAlign === "center" ? "center" : "flex-start"};
   background-color: transparent;
   display: flex;
-  gap: var(--wui-space-01);
   padding: var(--wui-select-option-padding);
   justify-content: space-between;
   font-size: var(--font-size);
@@ -17171,7 +17188,7 @@ var SelectOption = (0, import_react91.forwardRef)(
         ref: forwardedRef,
         $checkmarkVerticalAlign: checkmarkVerticalAlign,
         children: [
-          (0, import_type_guards66.isNotNil)(selectedDisplayValue) ? /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)("div", { children: [
+          (0, import_type_guards67.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 }),
@@ -17213,7 +17230,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_guards67 = require("@wistia/type-guards");
+var import_type_guards68 = 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);
@@ -17292,7 +17309,7 @@ var Slider = ({
   "data-testid": dataTestId = "ui-slider",
   ...otherProps
 }) => {
-  if (!((0, import_type_guards67.isNonEmptyString)(ariaLabel) || (0, import_type_guards67.isNonEmptyString)(ariaLabelledby))) {
+  if (!((0, import_type_guards68.isNonEmptyString)(ariaLabel) || (0, import_type_guards68.isNonEmptyString)(ariaLabelledby))) {
     throw new Error(
       "UI Slider: Sliders should have an accessible name. Add a label using the aria-label or aria-labelledby prop."
     );
@@ -17454,7 +17471,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_guards68 = require("@wistia/type-guards");
+var import_type_guards69 = require("@wistia/type-guards");
 
 // src/components/Tabs/useTabsValue.tsx
 var import_react97 = require("react");
@@ -17491,10 +17508,10 @@ var Tabs = ({
     ...props,
     onValueChange
   };
-  if ((0, import_type_guards68.isNotNil)(value)) {
+  if ((0, import_type_guards69.isNotNil)(value)) {
     rootProps.value = value;
   }
-  if ((0, import_type_guards68.isNotNil)(defaultValue)) {
+  if ((0, import_type_guards69.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 }) }) });
@@ -17514,7 +17531,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_guards69 = require("@wistia/type-guards");
+var import_type_guards70 = require("@wistia/type-guards");
 
 // src/components/Tabs/TabsSelectedItemIndicatorDiv.tsx
 var import_styled_components120 = __toESM(require("styled-components"));
@@ -17529,7 +17546,7 @@ var import_jsx_runtime322 = require("react/jsx-runtime");
 var SelectedTabIndicator = () => {
   const { selectedItemIndicatorStyle } = useSelectedItemStyle();
   const selectedValue = useTabsValue();
-  if (selectedValue == null || (0, import_type_guards69.isUndefined)(selectedItemIndicatorStyle)) {
+  if (selectedValue == null || (0, import_type_guards70.isUndefined)(selectedItemIndicatorStyle)) {
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
@@ -17563,7 +17580,7 @@ TabsList.displayName = "TabsList_UI";
 
 // src/components/Tabs/TabsTrigger.tsx
 var import_react99 = require("react");
-var import_type_guards70 = require("@wistia/type-guards");
+var import_type_guards71 = require("@wistia/type-guards");
 
 // src/components/Tabs/StyledRadixTabsTrigger.tsx
 var import_styled_components122 = __toESM(require("styled-components"));
@@ -17614,8 +17631,8 @@ var TabsTrigger = (0, import_react99.forwardRef)(
       {
         ...otherProps,
         ref: combinedRef,
-        $hasLabel: (0, import_type_guards70.isNotNil)(label),
-        "aria-label": (0, import_type_guards70.isNotNil)(label) ? void 0 : ariaLabel,
+        $hasLabel: (0, import_type_guards71.isNotNil)(label),
+        "aria-label": (0, import_type_guards71.isNotNil)(label) ? void 0 : ariaLabel,
         disabled,
         value,
         children: [
@@ -17630,7 +17647,7 @@ TabsTrigger.displayName = "TabsTrigger_UI";
 
 // src/components/Thumbnail/ThumbnailBadge.tsx
 var import_styled_components123 = __toESM(require("styled-components"));
-var import_type_guards71 = require("@wistia/type-guards");
+var import_type_guards72 = require("@wistia/type-guards");
 var import_jsx_runtime325 = require("react/jsx-runtime");
 var StyledThumbnailBadge = import_styled_components123.default.div`
   align-items: center;
@@ -17659,7 +17676,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_guards71.isNotNil)(icon) && icon,
+    (0, import_type_guards72.isNotNil)(icon) && icon,
     /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("span", { children: label })
   ] });
 };
@@ -17668,10 +17685,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_guards74 = require("@wistia/type-guards");
+var import_type_guards75 = require("@wistia/type-guards");
 
 // src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
-var import_type_guards72 = require("@wistia/type-guards");
+var import_type_guards73 = require("@wistia/type-guards");
 var import_styled_components124 = require("styled-components");
 var gradients = {
   defaultDarkOne: import_styled_components124.css`
@@ -17799,12 +17816,12 @@ var gradients = {
 };
 var gradientMap = Object.keys(gradients);
 var getBackgroundGradient = (gradientName = void 0) => {
-  return (0, import_type_guards72.isNotNil)(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
+  return (0, import_type_guards73.isNotNil)(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
 };
 
 // src/components/Thumbnail/ThumbnailStoryboardViewer.tsx
 var import_styled_components125 = __toESM(require("styled-components"));
-var import_type_guards73 = require("@wistia/type-guards");
+var import_type_guards74 = require("@wistia/type-guards");
 var import_jsx_runtime326 = require("react/jsx-runtime");
 var ScrubLine = import_styled_components125.default.div`
   position: absolute;
@@ -17898,8 +17915,8 @@ var ThumbnailStoryboardViewer = ({
   );
   const backgroundSize = `${scaledStoryboardWidth}px ${scaledStoryboardHeight}px`;
   const backgroundImage = `url(${storyboardUrl})`;
-  const showScrubLine = (0, import_type_guards73.isNotNil)(cursorPosition);
-  const scrubLinePosition = (0, import_type_guards73.isNotNil)(cursorPosition) ? `${cursorPosition - 1}px` : "0";
+  const showScrubLine = (0, import_type_guards74.isNotNil)(cursorPosition);
+  const scrubLinePosition = (0, import_type_guards74.isNotNil)(cursorPosition) ? `${cursorPosition - 1}px` : "0";
   const viewerStyles = {
     position: "relative",
     overflow: "hidden",
@@ -17970,10 +17987,10 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
   );
 };
 var StyledThumbnail = import_styled_components126.default.div`
-  background-image: ${({ $backgroundUrl }) => (0, import_type_guards74.isNotNil)($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
+  background-image: ${({ $backgroundUrl }) => (0, import_type_guards75.isNotNil)($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
   ${({ $backgroundUrl, $gradientBackground }) => (
   // if we don't have $backgroundUrl show a gradient
-  (0, import_type_guards74.isNil)($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
+  (0, import_type_guards75.isNil)($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
 )};
   background-position: center center;
   background-size: cover;
@@ -18005,7 +18022,7 @@ var StoryboardRenderer = ({
     frameCount,
     aspectRatio
   } = storyboard;
-  const targetWidth = (0, import_type_guards74.isString)(width) ? parseInt(width, 10) : Number(width);
+  const targetWidth = (0, import_type_guards75.isString)(width) ? parseInt(width, 10) : Number(width);
   const effectiveCursorPosition = isStoryboardReady ? cursorPosition : null;
   return /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(
     ThumbnailStoryboardViewer,
@@ -18049,10 +18066,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_guards74.isNotNil)(thumbnailUrl) ? thumbnailUrl : void 0,
+      () => thumbnailImageType === "square" && (0, import_type_guards75.isNotNil)(thumbnailUrl) ? thumbnailUrl : void 0,
       [thumbnailImageType, thumbnailUrl]
     );
-    const isScrubbable = (0, import_type_guards74.isNotNil)(storyboard);
+    const isScrubbable = (0, import_type_guards75.isNotNil)(storyboard);
     const trackStoryboardLoadStatus = (0, import_react100.useCallback)(() => {
       if (storyboardElementRef.current || !storyboard) {
         return storyboardElementRef.current;
@@ -18082,7 +18099,7 @@ var Thumbnail = (0, import_react100.forwardRef)(
       setCursorPosition(null);
     }, [isScrubbable]);
     const shouldRenderStoryboard = (0, import_react100.useMemo)(() => {
-      if ((0, import_type_guards74.isNil)(storyboard) || (0, import_type_guards74.isUndefined)(height) || (0, import_type_guards74.isEmptyString)(height)) {
+      if ((0, import_type_guards75.isNil)(storyboard) || (0, import_type_guards75.isUndefined)(height) || (0, import_type_guards75.isEmptyString)(height)) {
         return false;
       }
       return isScrubbable && isMouseOver && isStoryboardReady;
@@ -18099,7 +18116,7 @@ var Thumbnail = (0, import_react100.forwardRef)(
           width
         }
       );
-    } else if ((0, import_type_guards74.isNotNil)(thumbnailUrl)) {
+    } else if ((0, import_type_guards75.isNotNil)(thumbnailUrl)) {
       thumbnailContent = /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(
         ThumbnailImage,
         {
@@ -18124,7 +18141,7 @@ var Thumbnail = (0, import_react100.forwardRef)(
         onMouseOut: handleMouseOut,
         role: "presentation",
         children: [
-          (0, import_type_guards74.isNotNil)(children) ? children : null,
+          (0, import_type_guards75.isNotNil)(children) ? children : null,
           thumbnailContent
         ]
       }
@@ -18136,7 +18153,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_guards75 = require("@wistia/type-guards");
+var import_type_guards76 = 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")
@@ -18216,7 +18233,7 @@ var ThumbnailCollage = ({
 }) => {
   const thumbnailArray = import_react101.default.Children.toArray(children);
   const truncatedThumbnails = thumbnailArray.slice(0, 3);
-  const thumbnails = (0, import_type_guards75.isNonEmptyArray)(thumbnailArray) ? truncatedThumbnails.map((child) => {
+  const thumbnails = (0, import_type_guards76.isNonEmptyArray)(thumbnailArray) ? truncatedThumbnails.map((child) => {
     return import_react101.default.cloneElement(child, {
       ...child.props,
       children: void 0
@@ -18244,7 +18261,7 @@ var ThumbnailCollage = ({
 
 // src/components/WistiaLogo/WistiaLogo.tsx
 var import_styled_components128 = __toESM(require("styled-components"));
-var import_type_guards76 = require("@wistia/type-guards");
+var import_type_guards77 = require("@wistia/type-guards");
 var import_jsx_runtime329 = require("react/jsx-runtime");
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
@@ -18357,7 +18374,7 @@ var WistiaLogo = ({
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime329.jsx)("title", { children: title }),
-        (0, import_type_guards76.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime329.jsx)("desc", { children: description }) : null,
+        (0, import_type_guards77.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime329.jsx)("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
@@ -18369,7 +18386,7 @@ WistiaLogo.displayName = "WistiaLogo_UI";
 
 // src/components/SplitButton/SplitButton.tsx
 var import_styled_components129 = __toESM(require("styled-components"));
-var import_type_guards77 = require("@wistia/type-guards");
+var import_type_guards78 = require("@wistia/type-guards");
 var import_react102 = require("react");
 var import_jsx_runtime330 = require("react/jsx-runtime");
 var StyledSplitButton = import_styled_components129.default.span`
@@ -18416,7 +18433,7 @@ var SplitButton = ({
         children
       }
     ),
-    (0, import_type_guards77.isNotNil)(menuItems) && /* @__PURE__ */ (0, import_jsx_runtime330.jsx)(
+    (0, import_type_guards78.isNotNil)(menuItems) && /* @__PURE__ */ (0, import_jsx_runtime330.jsx)(
       Menu,
       {
         ...menuProps,
@@ -18435,7 +18452,7 @@ var SplitButton = ({
         children: menuItems
       }
     ),
-    (0, import_type_guards77.isNotNil)(secondaryAction) && (0, import_react102.cloneElement)(secondaryAction, { disabled, size, unstyled, variant, colorScheme })
+    (0, import_type_guards78.isNotNil)(secondaryAction) && (0, import_react102.cloneElement)(secondaryAction, { disabled, size, unstyled, variant, colorScheme })
   ] });
 };
 SplitButton.displayName = "SplitButton_UI";