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

package/dist/index.d.mts

@@ -2373,6 +2373,10 @@ type FormFieldProps = ComponentPropsWithoutRef<'div'> & {
      * The name attribute of the field. It will map to the form data passed into `useFormState`.
      */
     name: string;
+    /**
+     * Use if label describes a required form component
+     */
+    required?: boolean;
     /**
      * A value that overrides the basic value. This should pair with `onChange`.
      */
@@ -2386,7 +2390,7 @@ type FormFieldProps = ComponentPropsWithoutRef<'div'> & {
  * FormField is a compound component that combines a label, form control, and optional description and error message.
  */
 declare const FormField: {
-    ({ children, description, error, id, label, labelPosition, name, value, ...props }: FormFieldProps): JSX$1.Element;
+    ({ children, description, error, id, label, labelPosition, name, required, value, ...props }: FormFieldProps): JSX$1.Element;
     displayName: string;
 };
 
@@ -3079,6 +3083,10 @@ type ModalProps = ComponentPropsWithoutRef<'div'> & {
      * Determines if the title is visible
      */
     hideTitle?: boolean;
+    /**
+     * The maximum width the modal can be
+     */
+    maxWidth?: string;
     /**
      * When the Modal is dismissed, this function will be called. You'll typically want to set the
      * state of `isOpen` to false here
@@ -3127,6 +3135,10 @@ declare const Modal: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProp
      * Determines if the title is visible
      */
     hideTitle?: boolean;
+    /**
+     * The maximum width the modal can be
+     */
+    maxWidth?: string;
     /**
      * When the Modal is dismissed, this function will be called. You'll typically want to set the
      * state of `isOpen` to false here

package/dist/index.d.ts

@@ -2373,6 +2373,10 @@ type FormFieldProps = ComponentPropsWithoutRef<'div'> & {
      * The name attribute of the field. It will map to the form data passed into `useFormState`.
      */
     name: string;
+    /**
+     * Use if label describes a required form component
+     */
+    required?: boolean;
     /**
      * A value that overrides the basic value. This should pair with `onChange`.
      */
@@ -2386,7 +2390,7 @@ type FormFieldProps = ComponentPropsWithoutRef<'div'> & {
  * FormField is a compound component that combines a label, form control, and optional description and error message.
  */
 declare const FormField: {
-    ({ children, description, error, id, label, labelPosition, name, value, ...props }: FormFieldProps): JSX$1.Element;
+    ({ children, description, error, id, label, labelPosition, name, required, value, ...props }: FormFieldProps): JSX$1.Element;
     displayName: string;
 };
 
@@ -3079,6 +3083,10 @@ type ModalProps = ComponentPropsWithoutRef<'div'> & {
      * Determines if the title is visible
      */
     hideTitle?: boolean;
+    /**
+     * The maximum width the modal can be
+     */
+    maxWidth?: string;
     /**
      * When the Modal is dismissed, this function will be called. You'll typically want to set the
      * state of `isOpen` to false here
@@ -3127,6 +3135,10 @@ declare const Modal: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProp
      * Determines if the title is visible
      */
     hideTitle?: boolean;
+    /**
+     * The maximum width the modal can be
+     */
+    maxWidth?: string;
     /**
      * When the Modal is dismissed, this function will be called. You'll typically want to set the
      * state of `isOpen` to false here

package/dist/index.mjs

@@ -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.
  *
@@ -14787,6 +14787,7 @@ var FormField = ({
   label,
   labelPosition,
   name,
+  required = false,
   value,
   ...props
 }) => {
@@ -14836,7 +14837,14 @@ var FormField = ({
       ...props,
       "data-label-position": labelPosition ?? formState.labelPosition,
       children: [
-        !isIntegratedLabel && /* @__PURE__ */ jsx283(Label, { htmlFor: computedId, children: label }),
+        !isIntegratedLabel && /* @__PURE__ */ jsx283(
+          Label,
+          {
+            htmlFor: computedId,
+            required,
+            children: label
+          }
+        ),
         isNotNil28(description) ? /* @__PURE__ */ jsx283(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
         cloneElement8(children, childProps),
         isNotNil28(computedError) ? /* @__PURE__ */ jsxs46(Fragment9, { children: [
@@ -15366,7 +15374,7 @@ Mark.displayName = "Mark_UI";
 import { forwardRef as forwardRef26 } from "react";
 import styled78 from "styled-components";
 import { Root as DialogRoot, Portal as DialogPortal } from "@radix-ui/react-dialog";
-import { isNotNil as isNotNil32 } from "@wistia/type-guards";
+import { isNotNil as isNotNil33 } from "@wistia/type-guards";
 
 // src/components/Modal/ModalHeader.tsx
 import styled75 from "styled-components";
@@ -15442,6 +15450,7 @@ var ModalHeader = ({
 import { forwardRef as forwardRef25 } from "react";
 import styled76, { css as css38, keyframes as keyframes4 } from "styled-components";
 import { Content as DialogContent } from "@radix-ui/react-dialog";
+import { isNotNil as isNotNil32 } from "@wistia/type-guards";
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
 import { useRef as useRef20, useEffect as useEffect19 } from "react";
@@ -15579,9 +15588,14 @@ var StyledModalContent = styled76(DialogContent)`
     position: fixed;
     top: unset;
     left: unset;
-    width: ${({ $width }) => $width ?? DEFAULT_MODAL_WIDTH};
+    width: ${({ $width, $maxWidth }) => {
+  if (isNotNil32($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);
@@ -15590,12 +15604,13 @@ var StyledModalContent = styled76(DialogContent)`
   }
 `;
 var ModalContent = forwardRef25(
-  ({ width, positionVariant = "fixed-top", children, ...props }, ref) => {
+  ({ width, positionVariant = "fixed-top", maxWidth, children, ...props }, ref) => {
     useFocusRestore();
     return /* @__PURE__ */ jsx294(
       StyledModalContent,
       {
         ref,
+        $maxWidth: maxWidth,
         $positionVariant: positionVariant,
         $width: width,
         "aria-describedby": void 0,
@@ -15665,6 +15680,7 @@ var Modal = forwardRef26(
     hideTitle = false,
     initialFocusRef,
     isOpen,
+    maxWidth,
     onRequestClose,
     positionVariant = "centered",
     title,
@@ -15675,7 +15691,7 @@ var Modal = forwardRef26(
       DialogRoot,
       {
         onOpenChange: (open2) => {
-          if (!open2 && isNotNil32(onRequestClose)) {
+          if (!open2 && isNotNil33(onRequestClose)) {
             onRequestClose();
           }
         },
@@ -15686,8 +15702,9 @@ var Modal = forwardRef26(
             ModalContent,
             {
               ref,
+              maxWidth,
               onOpenAutoFocus: (event) => {
-                if (isNotNil32(initialFocusRef) && initialFocusRef.current) {
+                if (isNotNil33(initialFocusRef) && initialFocusRef.current) {
                   event.preventDefault();
                   requestAnimationFrame(() => {
                     initialFocusRef.current?.focus();
@@ -15699,7 +15716,7 @@ var Modal = forwardRef26(
               ...props,
               children: [
                 /* @__PURE__ */ jsx295(ModalScrollArea, { children: /* @__PURE__ */ jsx295(ModalBody, { children }) }),
-                isNotNil32(footer) ? /* @__PURE__ */ jsx295(ModalFooter, { children: footer }) : null,
+                isNotNil33(footer) ? /* @__PURE__ */ jsx295(ModalFooter, { children: footer }) : null,
                 hideCloseButton && hideTitle ? null : /* @__PURE__ */ jsx295(
                   ModalHeader,
                   {
@@ -15745,9 +15762,9 @@ import { Root as Root2, Trigger as Trigger2, Portal, Content as Content2, Close
 import styled80, { css as css40 } from "styled-components";
 
 // src/private/helpers/getControls/getControlProps.tsx
-import { isNotNil as isNotNil33 } from "@wistia/type-guards";
+import { isNotNil as isNotNil34 } from "@wistia/type-guards";
 var getControlProps = (isOpen, onOpenChange) => {
-  return isNotNil33(onOpenChange) && isNotNil33(isOpen) ? { open: isOpen, onOpenChange } : {};
+  return isNotNil34(onOpenChange) && isNotNil34(isOpen) ? { open: isOpen, onOpenChange } : {};
 };
 
 // src/components/Popover/PopoverArrow.tsx
@@ -15903,7 +15920,7 @@ Popover.displayName = "Popover_UI";
 // src/components/ProgressBar/ProgressBar.tsx
 import styled81 from "styled-components";
 import { Root as ProgressRoot, Indicator as ProgressIndicator } from "@radix-ui/react-progress";
-import { isNotNil as isNotNil34 } from "@wistia/type-guards";
+import { isNotNil as isNotNil35 } from "@wistia/type-guards";
 import { jsx as jsx299, jsxs as jsxs54 } from "react/jsx-runtime";
 var ProgressBarWrapper = styled81.div`
   --progress-bar-height: 8px;
@@ -15959,7 +15976,7 @@ var ProgressBar = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxs54(ProgressBarWrapper, { children: [
-    isNotNil34(labelLeft) ? /* @__PURE__ */ jsx299(ProgressBarLabel, { children: labelLeft }) : null,
+    isNotNil35(labelLeft) ? /* @__PURE__ */ jsx299(ProgressBarLabel, { children: labelLeft }) : null,
     /* @__PURE__ */ jsx299(
       StyledProgressBar,
       {
@@ -15977,7 +15994,7 @@ var ProgressBar = ({
         )
       }
     ),
-    isNotNil34(labelRight) ? /* @__PURE__ */ jsx299(ProgressBarLabel, { children: labelRight }) : null
+    isNotNil35(labelRight) ? /* @__PURE__ */ jsx299(ProgressBarLabel, { children: labelRight }) : null
   ] });
 };
 ProgressBar.displayName = "ProgressBar_UI";
@@ -16298,7 +16315,7 @@ RadioCardRoot.displayName = "RadioCardRoot_UI";
 
 // src/components/RadioCard/RadioCardDefaultLayout.tsx
 import styled85 from "styled-components";
-import { isNotNil as isNotNil35 } from "@wistia/type-guards";
+import { isNotNil as isNotNil36 } from "@wistia/type-guards";
 
 // src/components/RadioCard/RadioCardIndicator.tsx
 import styled84 from "styled-components";
@@ -16372,17 +16389,17 @@ var RadioCardDefaultLayout = ({
   showIndicator = true
 }) => {
   return /* @__PURE__ */ jsxs57(StyledCardContent, { children: [
-    showIndicator ? /* @__PURE__ */ jsx302(StyledIndicatorContainer, { $hasIcon: isNotNil35(icon), children: /* @__PURE__ */ jsx302(RadioCardIndicator, { "data-testid": "wui-radio-card-indicator" }) }) : null,
+    showIndicator ? /* @__PURE__ */ jsx302(StyledIndicatorContainer, { $hasIcon: isNotNil36(icon), children: /* @__PURE__ */ jsx302(RadioCardIndicator, { "data-testid": "wui-radio-card-indicator" }) }) : null,
     /* @__PURE__ */ jsxs57(Stack, { gap: "space-02", children: [
-      isNotNil35(icon) && /* @__PURE__ */ jsx302(StyledCardIcon, { "data-wui-radio-card-icon": true, children: icon }),
+      isNotNil36(icon) && /* @__PURE__ */ jsx302(StyledCardIcon, { "data-wui-radio-card-icon": true, children: icon }),
       /* @__PURE__ */ jsxs57(
         Stack,
         {
           gap: "space-01",
-          style: isNotNil35(icon) ? { paddingLeft: 2 } : void 0,
+          style: isNotNil36(icon) ? { paddingLeft: 2 } : void 0,
           children: [
-            isNotNil35(label) && /* @__PURE__ */ jsx302(Text, { variant: "label3", children: /* @__PURE__ */ jsx302("strong", { children: label }) }),
-            isNotNil35(description) && /* @__PURE__ */ jsx302(
+            isNotNil36(label) && /* @__PURE__ */ jsx302(Text, { variant: "label3", children: /* @__PURE__ */ jsx302("strong", { children: label }) }),
+            isNotNil36(description) && /* @__PURE__ */ jsx302(
               Text,
               {
                 prominence: "secondary",
@@ -16702,7 +16719,7 @@ SegmentedControl.displayName = "SegmentedControl_UI";
 import { forwardRef as forwardRef33, useEffect as useEffect21, useRef as useRef22 } from "react";
 import styled90, { css as css45 } from "styled-components";
 import { Item as ToggleGroupItem2 } from "@radix-ui/react-toggle-group";
-import { isNotNil as isNotNil36 } from "@wistia/type-guards";
+import { isNotNil as isNotNil37 } from "@wistia/type-guards";
 import { jsxs as jsxs60 } from "react/jsx-runtime";
 var segmentedControlItemStyles = css45`
   all: unset; /* ToggleGroupItem is a button element */
@@ -16818,8 +16835,8 @@ var SegmentedControlItem = forwardRef33(
       {
         ref: combinedRef,
         ...otherProps,
-        $hasLabel: isNotNil36(label),
-        "aria-label": isNotNil36(label) ? void 0 : ariaLabel,
+        $hasLabel: isNotNil37(label),
+        "aria-label": isNotNil37(label) ? void 0 : ariaLabel,
         disabled,
         onClick: handleClick,
         value,
@@ -16856,6 +16873,7 @@ var StyledTrigger2 = styled91(Trigger3)`
   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;
@@ -16992,14 +17010,13 @@ Select.displayName = "Select_UI";
 import { Item, ItemText, ItemIndicator } from "@radix-ui/react-select";
 import { forwardRef as forwardRef35 } from "react";
 import styled92 from "styled-components";
-import { isNotNil as isNotNil37 } from "@wistia/type-guards";
+import { isNotNil as isNotNil38 } from "@wistia/type-guards";
 import { jsx as jsx310, jsxs as jsxs62 } from "react/jsx-runtime";
 var StyledItem = styled92(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);
@@ -17030,7 +17047,7 @@ var SelectOption = forwardRef35(
         ref: forwardedRef,
         $checkmarkVerticalAlign: checkmarkVerticalAlign,
         children: [
-          isNotNil37(selectedDisplayValue) ? /* @__PURE__ */ jsxs62("div", { children: [
+          isNotNil38(selectedDisplayValue) ? /* @__PURE__ */ jsxs62("div", { children: [
             children,
             /* @__PURE__ */ jsx310("div", { style: { display: "none" }, children: /* @__PURE__ */ jsx310(ItemText, { children: selectedDisplayValue }) })
           ] }) : /* @__PURE__ */ jsx310(ItemText, { children }),
@@ -17318,7 +17335,7 @@ var TableRow = ({ children, ...props }) => {
 // src/components/Tabs/Tabs.tsx
 import { Root as RadixTabsRoot } from "@radix-ui/react-tabs";
 import { useCallback as useCallback19, useState as useState25 } from "react";
-import { isNotNil as isNotNil38 } from "@wistia/type-guards";
+import { isNotNil as isNotNil39 } from "@wistia/type-guards";
 
 // src/components/Tabs/useTabsValue.tsx
 import { createContext as createContext12, useContext as useContext18 } from "react";
@@ -17355,10 +17372,10 @@ var Tabs = ({
     ...props,
     onValueChange
   };
-  if (isNotNil38(value)) {
+  if (isNotNil39(value)) {
     rootProps.value = value;
   }
-  if (isNotNil38(defaultValue)) {
+  if (isNotNil39(defaultValue)) {
     rootProps.defaultValue = defaultValue;
   }
   return /* @__PURE__ */ jsx319(RadixTabsRoot, { ...rootProps, children: /* @__PURE__ */ jsx319(TabsValueProvider, { value: value ?? defaultValue, children: /* @__PURE__ */ jsx319(SelectedItemStyleProvider, { children }) }) });
@@ -17427,7 +17444,7 @@ TabsList.displayName = "TabsList_UI";
 
 // src/components/Tabs/TabsTrigger.tsx
 import { forwardRef as forwardRef36, useEffect as useEffect22, useRef as useRef23 } from "react";
-import { isNotNil as isNotNil39 } from "@wistia/type-guards";
+import { isNotNil as isNotNil40 } from "@wistia/type-guards";
 
 // src/components/Tabs/StyledRadixTabsTrigger.tsx
 import styled103 from "styled-components";
@@ -17478,8 +17495,8 @@ var TabsTrigger = forwardRef36(
       {
         ...otherProps,
         ref: combinedRef,
-        $hasLabel: isNotNil39(label),
-        "aria-label": isNotNil39(label) ? void 0 : ariaLabel,
+        $hasLabel: isNotNil40(label),
+        "aria-label": isNotNil40(label) ? void 0 : ariaLabel,
         disabled,
         value,
         children: [
@@ -17494,7 +17511,7 @@ TabsTrigger.displayName = "TabsTrigger_UI";
 
 // src/components/Thumbnail/ThumbnailBadge.tsx
 import styled104 from "styled-components";
-import { isNotNil as isNotNil40 } from "@wistia/type-guards";
+import { isNotNil as isNotNil41 } from "@wistia/type-guards";
 import { jsx as jsx323, jsxs as jsxs67 } from "react/jsx-runtime";
 var StyledThumbnailBadge = styled104.div`
   align-items: center;
@@ -17523,7 +17540,7 @@ var StyledThumbnailBadge = styled104.div`
 `;
 var ThumbnailBadge = ({ icon, label, ...props }) => {
   return /* @__PURE__ */ jsxs67(StyledThumbnailBadge, { ...props, children: [
-    isNotNil40(icon) && icon,
+    isNotNil41(icon) && icon,
     /* @__PURE__ */ jsx323("span", { children: label })
   ] });
 };
@@ -17532,10 +17549,10 @@ ThumbnailBadge.displayName = "ThumbnailBadge_UI";
 // src/components/Thumbnail/Thumbnail.tsx
 import { forwardRef as forwardRef37, useState as useState26, useRef as useRef24, useCallback as useCallback20, useMemo as useMemo17 } from "react";
 import styled106 from "styled-components";
-import { isNil as isNil19, isNotNil as isNotNil43, isUndefined as isUndefined7, isEmptyString as isEmptyString2, isString as isString4 } from "@wistia/type-guards";
+import { isNil as isNil19, isNotNil as isNotNil44, isUndefined as isUndefined7, isEmptyString as isEmptyString2, isString as isString4 } from "@wistia/type-guards";
 
 // src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
-import { isNotNil as isNotNil41 } from "@wistia/type-guards";
+import { isNotNil as isNotNil42 } from "@wistia/type-guards";
 import { css as css49 } from "styled-components";
 var gradients = {
   defaultDarkOne: css49`
@@ -17663,12 +17680,12 @@ var gradients = {
 };
 var gradientMap = Object.keys(gradients);
 var getBackgroundGradient = (gradientName = void 0) => {
-  return isNotNil41(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
+  return isNotNil42(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
 };
 
 // src/components/Thumbnail/ThumbnailStoryboardViewer.tsx
 import styled105 from "styled-components";
-import { isNotNil as isNotNil42 } from "@wistia/type-guards";
+import { isNotNil as isNotNil43 } from "@wistia/type-guards";
 import { jsx as jsx324, jsxs as jsxs68 } from "react/jsx-runtime";
 var ScrubLine = styled105.div`
   position: absolute;
@@ -17762,8 +17779,8 @@ var ThumbnailStoryboardViewer = ({
   );
   const backgroundSize = `${scaledStoryboardWidth}px ${scaledStoryboardHeight}px`;
   const backgroundImage = `url(${storyboardUrl})`;
-  const showScrubLine = isNotNil42(cursorPosition);
-  const scrubLinePosition = isNotNil42(cursorPosition) ? `${cursorPosition - 1}px` : "0";
+  const showScrubLine = isNotNil43(cursorPosition);
+  const scrubLinePosition = isNotNil43(cursorPosition) ? `${cursorPosition - 1}px` : "0";
   const viewerStyles = {
     position: "relative",
     overflow: "hidden",
@@ -17834,7 +17851,7 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
   );
 };
 var StyledThumbnail = styled106.div`
-  background-image: ${({ $backgroundUrl }) => isNotNil43($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
+  background-image: ${({ $backgroundUrl }) => isNotNil44($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
   ${({ $backgroundUrl, $gradientBackground }) => (
   // if we don't have $backgroundUrl show a gradient
   isNil19($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
@@ -17913,10 +17930,10 @@ var Thumbnail = forwardRef37(
     const storyboardElementRef = useRef24(null);
     const [cursorPosition, setCursorPosition] = useState26(null);
     const backgroundUrl = useMemo17(
-      () => thumbnailImageType === "square" && isNotNil43(thumbnailUrl) ? thumbnailUrl : void 0,
+      () => thumbnailImageType === "square" && isNotNil44(thumbnailUrl) ? thumbnailUrl : void 0,
       [thumbnailImageType, thumbnailUrl]
     );
-    const isScrubbable = isNotNil43(storyboard);
+    const isScrubbable = isNotNil44(storyboard);
     const trackStoryboardLoadStatus = useCallback20(() => {
       if (storyboardElementRef.current || !storyboard) {
         return storyboardElementRef.current;
@@ -17963,7 +17980,7 @@ var Thumbnail = forwardRef37(
           width
         }
       );
-    } else if (isNotNil43(thumbnailUrl)) {
+    } else if (isNotNil44(thumbnailUrl)) {
       thumbnailContent = /* @__PURE__ */ jsx325(
         ThumbnailImage,
         {
@@ -17988,7 +18005,7 @@ var Thumbnail = forwardRef37(
         onMouseOut: handleMouseOut,
         role: "presentation",
         children: [
-          isNotNil43(children) ? children : null,
+          isNotNil44(children) ? children : null,
           thumbnailContent
         ]
       }
@@ -18106,7 +18123,7 @@ var ThumbnailCollage = ({
 
 // src/components/WistiaLogo/WistiaLogo.tsx
 import styled108, { css as css50 } from "styled-components";
-import { isNotNil as isNotNil44 } from "@wistia/type-guards";
+import { isNotNil as isNotNil45 } from "@wistia/type-guards";
 import { jsx as jsx327, jsxs as jsxs70 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
@@ -18219,7 +18236,7 @@ var WistiaLogo = ({
       ...props,
       children: [
         /* @__PURE__ */ jsx327("title", { children: title }),
-        isNotNil44(description) ? /* @__PURE__ */ jsx327("desc", { children: description }) : null,
+        isNotNil45(description) ? /* @__PURE__ */ jsx327("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
@@ -18231,7 +18248,7 @@ WistiaLogo.displayName = "WistiaLogo_UI";
 
 // src/components/SplitButton/SplitButton.tsx
 import styled109 from "styled-components";
-import { isNotNil as isNotNil45 } from "@wistia/type-guards";
+import { isNotNil as isNotNil46 } from "@wistia/type-guards";
 import { cloneElement as cloneElement9 } from "react";
 import { jsx as jsx328, jsxs as jsxs71 } from "react/jsx-runtime";
 var StyledSplitButton = styled109.span`
@@ -18278,7 +18295,7 @@ var SplitButton = ({
         children
       }
     ),
-    isNotNil45(menuItems) && /* @__PURE__ */ jsx328(
+    isNotNil46(menuItems) && /* @__PURE__ */ jsx328(
       Menu,
       {
         ...menuProps,
@@ -18297,7 +18314,7 @@ var SplitButton = ({
         children: menuItems
       }
     ),
-    isNotNil45(secondaryAction) && cloneElement9(secondaryAction, { disabled, size, unstyled, variant, colorScheme })
+    isNotNil46(secondaryAction) && cloneElement9(secondaryAction, { disabled, size, unstyled, variant, colorScheme })
   ] });
 };
 SplitButton.displayName = "SplitButton_UI";