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

package/dist/index.d.mts

@@ -3083,10 +3083,6 @@ 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
@@ -3135,10 +3131,6 @@ 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

@@ -3083,10 +3083,6 @@ 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
@@ -3135,10 +3131,6 @@ 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.50e89a95.396fb5b
+ * @license @wistia/ui v0.15.14-beta.9bd768c0.e216110
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -14178,10 +14178,44 @@ import { createContext as createContext7, useMemo as useMemo13, useState as useS
 import { isNonEmptyString as isNonEmptyString6 } from "@wistia/type-guards";
 import styled63 from "styled-components";
 import { jsx as jsx277 } from "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 = styled63.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 = createContext7(null);
@@ -14279,6 +14313,7 @@ var EditableTextRoot = ({
   return /* @__PURE__ */ jsx277(
     StyledEditableTextRoot,
     {
+      $typographicVariant: typographicVariant,
       "data-testid": "editable-text-root",
       "data-wui-editable-text-root": true,
       "data-wui-editable-text-state": getState(),
@@ -15374,7 +15409,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 isNotNil33 } from "@wistia/type-guards";
+import { isNotNil as isNotNil32 } from "@wistia/type-guards";
 
 // src/components/Modal/ModalHeader.tsx
 import styled75 from "styled-components";
@@ -15450,7 +15485,6 @@ 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";
@@ -15588,14 +15622,9 @@ var StyledModalContent = styled76(DialogContent)`
     position: fixed;
     top: unset;
     left: unset;
-    width: ${({ $width, $maxWidth }) => {
-  if (isNotNil32($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);
@@ -15604,13 +15633,12 @@ var StyledModalContent = styled76(DialogContent)`
   }
 `;
 var ModalContent = forwardRef25(
-  ({ width, positionVariant = "fixed-top", maxWidth, children, ...props }, ref) => {
+  ({ width, positionVariant = "fixed-top", children, ...props }, ref) => {
     useFocusRestore();
     return /* @__PURE__ */ jsx294(
       StyledModalContent,
       {
         ref,
-        $maxWidth: maxWidth,
         $positionVariant: positionVariant,
         $width: width,
         "aria-describedby": void 0,
@@ -15680,7 +15708,6 @@ var Modal = forwardRef26(
     hideTitle = false,
     initialFocusRef,
     isOpen,
-    maxWidth,
     onRequestClose,
     positionVariant = "centered",
     title,
@@ -15691,7 +15718,7 @@ var Modal = forwardRef26(
       DialogRoot,
       {
         onOpenChange: (open2) => {
-          if (!open2 && isNotNil33(onRequestClose)) {
+          if (!open2 && isNotNil32(onRequestClose)) {
             onRequestClose();
           }
         },
@@ -15702,9 +15729,8 @@ var Modal = forwardRef26(
             ModalContent,
             {
               ref,
-              maxWidth,
               onOpenAutoFocus: (event) => {
-                if (isNotNil33(initialFocusRef) && initialFocusRef.current) {
+                if (isNotNil32(initialFocusRef) && initialFocusRef.current) {
                   event.preventDefault();
                   requestAnimationFrame(() => {
                     initialFocusRef.current?.focus();
@@ -15716,7 +15742,7 @@ var Modal = forwardRef26(
               ...props,
               children: [
                 /* @__PURE__ */ jsx295(ModalScrollArea, { children: /* @__PURE__ */ jsx295(ModalBody, { children }) }),
-                isNotNil33(footer) ? /* @__PURE__ */ jsx295(ModalFooter, { children: footer }) : null,
+                isNotNil32(footer) ? /* @__PURE__ */ jsx295(ModalFooter, { children: footer }) : null,
                 hideCloseButton && hideTitle ? null : /* @__PURE__ */ jsx295(
                   ModalHeader,
                   {
@@ -15762,9 +15788,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 isNotNil34 } from "@wistia/type-guards";
+import { isNotNil as isNotNil33 } from "@wistia/type-guards";
 var getControlProps = (isOpen, onOpenChange) => {
-  return isNotNil34(onOpenChange) && isNotNil34(isOpen) ? { open: isOpen, onOpenChange } : {};
+  return isNotNil33(onOpenChange) && isNotNil33(isOpen) ? { open: isOpen, onOpenChange } : {};
 };
 
 // src/components/Popover/PopoverArrow.tsx
@@ -15920,7 +15946,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 isNotNil35 } from "@wistia/type-guards";
+import { isNotNil as isNotNil34 } from "@wistia/type-guards";
 import { jsx as jsx299, jsxs as jsxs54 } from "react/jsx-runtime";
 var ProgressBarWrapper = styled81.div`
   --progress-bar-height: 8px;
@@ -15976,7 +16002,7 @@ var ProgressBar = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxs54(ProgressBarWrapper, { children: [
-    isNotNil35(labelLeft) ? /* @__PURE__ */ jsx299(ProgressBarLabel, { children: labelLeft }) : null,
+    isNotNil34(labelLeft) ? /* @__PURE__ */ jsx299(ProgressBarLabel, { children: labelLeft }) : null,
     /* @__PURE__ */ jsx299(
       StyledProgressBar,
       {
@@ -15994,7 +16020,7 @@ var ProgressBar = ({
         )
       }
     ),
-    isNotNil35(labelRight) ? /* @__PURE__ */ jsx299(ProgressBarLabel, { children: labelRight }) : null
+    isNotNil34(labelRight) ? /* @__PURE__ */ jsx299(ProgressBarLabel, { children: labelRight }) : null
   ] });
 };
 ProgressBar.displayName = "ProgressBar_UI";
@@ -16315,7 +16341,7 @@ RadioCardRoot.displayName = "RadioCardRoot_UI";
 
 // src/components/RadioCard/RadioCardDefaultLayout.tsx
 import styled85 from "styled-components";
-import { isNotNil as isNotNil36 } from "@wistia/type-guards";
+import { isNotNil as isNotNil35 } from "@wistia/type-guards";
 
 // src/components/RadioCard/RadioCardIndicator.tsx
 import styled84 from "styled-components";
@@ -16389,17 +16415,17 @@ var RadioCardDefaultLayout = ({
   showIndicator = true
 }) => {
   return /* @__PURE__ */ jsxs57(StyledCardContent, { children: [
-    showIndicator ? /* @__PURE__ */ jsx302(StyledIndicatorContainer, { $hasIcon: isNotNil36(icon), children: /* @__PURE__ */ jsx302(RadioCardIndicator, { "data-testid": "wui-radio-card-indicator" }) }) : null,
+    showIndicator ? /* @__PURE__ */ jsx302(StyledIndicatorContainer, { $hasIcon: isNotNil35(icon), children: /* @__PURE__ */ jsx302(RadioCardIndicator, { "data-testid": "wui-radio-card-indicator" }) }) : null,
     /* @__PURE__ */ jsxs57(Stack, { gap: "space-02", children: [
-      isNotNil36(icon) && /* @__PURE__ */ jsx302(StyledCardIcon, { "data-wui-radio-card-icon": true, children: icon }),
+      isNotNil35(icon) && /* @__PURE__ */ jsx302(StyledCardIcon, { "data-wui-radio-card-icon": true, children: icon }),
       /* @__PURE__ */ jsxs57(
         Stack,
         {
           gap: "space-01",
-          style: isNotNil36(icon) ? { paddingLeft: 2 } : void 0,
+          style: isNotNil35(icon) ? { paddingLeft: 2 } : void 0,
           children: [
-            isNotNil36(label) && /* @__PURE__ */ jsx302(Text, { variant: "label3", children: /* @__PURE__ */ jsx302("strong", { children: label }) }),
-            isNotNil36(description) && /* @__PURE__ */ jsx302(
+            isNotNil35(label) && /* @__PURE__ */ jsx302(Text, { variant: "label3", children: /* @__PURE__ */ jsx302("strong", { children: label }) }),
+            isNotNil35(description) && /* @__PURE__ */ jsx302(
               Text,
               {
                 prominence: "secondary",
@@ -16719,7 +16745,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 isNotNil37 } from "@wistia/type-guards";
+import { isNotNil as isNotNil36 } from "@wistia/type-guards";
 import { jsxs as jsxs60 } from "react/jsx-runtime";
 var segmentedControlItemStyles = css45`
   all: unset; /* ToggleGroupItem is a button element */
@@ -16835,8 +16861,8 @@ var SegmentedControlItem = forwardRef33(
       {
         ref: combinedRef,
         ...otherProps,
-        $hasLabel: isNotNil37(label),
-        "aria-label": isNotNil37(label) ? void 0 : ariaLabel,
+        $hasLabel: isNotNil36(label),
+        "aria-label": isNotNil36(label) ? void 0 : ariaLabel,
         disabled,
         onClick: handleClick,
         value,
@@ -17010,7 +17036,7 @@ 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 isNotNil38 } from "@wistia/type-guards";
+import { isNotNil as isNotNil37 } from "@wistia/type-guards";
 import { jsx as jsx310, jsxs as jsxs62 } from "react/jsx-runtime";
 var StyledItem = styled92(Item)`
   ${getTypographicStyles("label3")}
@@ -17047,7 +17073,7 @@ var SelectOption = forwardRef35(
         ref: forwardedRef,
         $checkmarkVerticalAlign: checkmarkVerticalAlign,
         children: [
-          isNotNil38(selectedDisplayValue) ? /* @__PURE__ */ jsxs62("div", { children: [
+          isNotNil37(selectedDisplayValue) ? /* @__PURE__ */ jsxs62("div", { children: [
             children,
             /* @__PURE__ */ jsx310("div", { style: { display: "none" }, children: /* @__PURE__ */ jsx310(ItemText, { children: selectedDisplayValue }) })
           ] }) : /* @__PURE__ */ jsx310(ItemText, { children }),
@@ -17335,7 +17361,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 isNotNil39 } from "@wistia/type-guards";
+import { isNotNil as isNotNil38 } from "@wistia/type-guards";
 
 // src/components/Tabs/useTabsValue.tsx
 import { createContext as createContext12, useContext as useContext18 } from "react";
@@ -17372,10 +17398,10 @@ var Tabs = ({
     ...props,
     onValueChange
   };
-  if (isNotNil39(value)) {
+  if (isNotNil38(value)) {
     rootProps.value = value;
   }
-  if (isNotNil39(defaultValue)) {
+  if (isNotNil38(defaultValue)) {
     rootProps.defaultValue = defaultValue;
   }
   return /* @__PURE__ */ jsx319(RadixTabsRoot, { ...rootProps, children: /* @__PURE__ */ jsx319(TabsValueProvider, { value: value ?? defaultValue, children: /* @__PURE__ */ jsx319(SelectedItemStyleProvider, { children }) }) });
@@ -17444,7 +17470,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 isNotNil40 } from "@wistia/type-guards";
+import { isNotNil as isNotNil39 } from "@wistia/type-guards";
 
 // src/components/Tabs/StyledRadixTabsTrigger.tsx
 import styled103 from "styled-components";
@@ -17495,8 +17521,8 @@ var TabsTrigger = forwardRef36(
       {
         ...otherProps,
         ref: combinedRef,
-        $hasLabel: isNotNil40(label),
-        "aria-label": isNotNil40(label) ? void 0 : ariaLabel,
+        $hasLabel: isNotNil39(label),
+        "aria-label": isNotNil39(label) ? void 0 : ariaLabel,
         disabled,
         value,
         children: [
@@ -17511,7 +17537,7 @@ TabsTrigger.displayName = "TabsTrigger_UI";
 
 // src/components/Thumbnail/ThumbnailBadge.tsx
 import styled104 from "styled-components";
-import { isNotNil as isNotNil41 } from "@wistia/type-guards";
+import { isNotNil as isNotNil40 } from "@wistia/type-guards";
 import { jsx as jsx323, jsxs as jsxs67 } from "react/jsx-runtime";
 var StyledThumbnailBadge = styled104.div`
   align-items: center;
@@ -17540,7 +17566,7 @@ var StyledThumbnailBadge = styled104.div`
 `;
 var ThumbnailBadge = ({ icon, label, ...props }) => {
   return /* @__PURE__ */ jsxs67(StyledThumbnailBadge, { ...props, children: [
-    isNotNil41(icon) && icon,
+    isNotNil40(icon) && icon,
     /* @__PURE__ */ jsx323("span", { children: label })
   ] });
 };
@@ -17549,10 +17575,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 isNotNil44, isUndefined as isUndefined7, isEmptyString as isEmptyString2, isString as isString4 } from "@wistia/type-guards";
+import { isNil as isNil19, isNotNil as isNotNil43, isUndefined as isUndefined7, isEmptyString as isEmptyString2, isString as isString4 } from "@wistia/type-guards";
 
 // src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
-import { isNotNil as isNotNil42 } from "@wistia/type-guards";
+import { isNotNil as isNotNil41 } from "@wistia/type-guards";
 import { css as css49 } from "styled-components";
 var gradients = {
   defaultDarkOne: css49`
@@ -17680,12 +17706,12 @@ var gradients = {
 };
 var gradientMap = Object.keys(gradients);
 var getBackgroundGradient = (gradientName = void 0) => {
-  return isNotNil42(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
+  return isNotNil41(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
 };
 
 // src/components/Thumbnail/ThumbnailStoryboardViewer.tsx
 import styled105 from "styled-components";
-import { isNotNil as isNotNil43 } from "@wistia/type-guards";
+import { isNotNil as isNotNil42 } from "@wistia/type-guards";
 import { jsx as jsx324, jsxs as jsxs68 } from "react/jsx-runtime";
 var ScrubLine = styled105.div`
   position: absolute;
@@ -17779,8 +17805,8 @@ var ThumbnailStoryboardViewer = ({
   );
   const backgroundSize = `${scaledStoryboardWidth}px ${scaledStoryboardHeight}px`;
   const backgroundImage = `url(${storyboardUrl})`;
-  const showScrubLine = isNotNil43(cursorPosition);
-  const scrubLinePosition = isNotNil43(cursorPosition) ? `${cursorPosition - 1}px` : "0";
+  const showScrubLine = isNotNil42(cursorPosition);
+  const scrubLinePosition = isNotNil42(cursorPosition) ? `${cursorPosition - 1}px` : "0";
   const viewerStyles = {
     position: "relative",
     overflow: "hidden",
@@ -17851,7 +17877,7 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
   );
 };
 var StyledThumbnail = styled106.div`
-  background-image: ${({ $backgroundUrl }) => isNotNil44($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
+  background-image: ${({ $backgroundUrl }) => isNotNil43($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
   ${({ $backgroundUrl, $gradientBackground }) => (
   // if we don't have $backgroundUrl show a gradient
   isNil19($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
@@ -17930,10 +17956,10 @@ var Thumbnail = forwardRef37(
     const storyboardElementRef = useRef24(null);
     const [cursorPosition, setCursorPosition] = useState26(null);
     const backgroundUrl = useMemo17(
-      () => thumbnailImageType === "square" && isNotNil44(thumbnailUrl) ? thumbnailUrl : void 0,
+      () => thumbnailImageType === "square" && isNotNil43(thumbnailUrl) ? thumbnailUrl : void 0,
       [thumbnailImageType, thumbnailUrl]
     );
-    const isScrubbable = isNotNil44(storyboard);
+    const isScrubbable = isNotNil43(storyboard);
     const trackStoryboardLoadStatus = useCallback20(() => {
       if (storyboardElementRef.current || !storyboard) {
         return storyboardElementRef.current;
@@ -17980,7 +18006,7 @@ var Thumbnail = forwardRef37(
           width
         }
       );
-    } else if (isNotNil44(thumbnailUrl)) {
+    } else if (isNotNil43(thumbnailUrl)) {
       thumbnailContent = /* @__PURE__ */ jsx325(
         ThumbnailImage,
         {
@@ -18005,7 +18031,7 @@ var Thumbnail = forwardRef37(
         onMouseOut: handleMouseOut,
         role: "presentation",
         children: [
-          isNotNil44(children) ? children : null,
+          isNotNil43(children) ? children : null,
           thumbnailContent
         ]
       }
@@ -18123,7 +18149,7 @@ var ThumbnailCollage = ({
 
 // src/components/WistiaLogo/WistiaLogo.tsx
 import styled108, { css as css50 } from "styled-components";
-import { isNotNil as isNotNil45 } from "@wistia/type-guards";
+import { isNotNil as isNotNil44 } from "@wistia/type-guards";
 import { jsx as jsx327, jsxs as jsxs70 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
@@ -18236,7 +18262,7 @@ var WistiaLogo = ({
       ...props,
       children: [
         /* @__PURE__ */ jsx327("title", { children: title }),
-        isNotNil45(description) ? /* @__PURE__ */ jsx327("desc", { children: description }) : null,
+        isNotNil44(description) ? /* @__PURE__ */ jsx327("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
@@ -18248,7 +18274,7 @@ WistiaLogo.displayName = "WistiaLogo_UI";
 
 // src/components/SplitButton/SplitButton.tsx
 import styled109 from "styled-components";
-import { isNotNil as isNotNil46 } from "@wistia/type-guards";
+import { isNotNil as isNotNil45 } 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`
@@ -18295,7 +18321,7 @@ var SplitButton = ({
         children
       }
     ),
-    isNotNil46(menuItems) && /* @__PURE__ */ jsx328(
+    isNotNil45(menuItems) && /* @__PURE__ */ jsx328(
       Menu,
       {
         ...menuProps,
@@ -18314,7 +18340,7 @@ var SplitButton = ({
         children: menuItems
       }
     ),
-    isNotNil46(secondaryAction) && cloneElement9(secondaryAction, { disabled, size, unstyled, variant, colorScheme })
+    isNotNil45(secondaryAction) && cloneElement9(secondaryAction, { disabled, size, unstyled, variant, colorScheme })
   ] });
 };
 SplitButton.displayName = "SplitButton_UI";