@uniformdev/design-system 19.37.1 → 19.38.2

package/dist/esm/index.js

@@ -2122,7 +2122,7 @@ var IntegrationHeaderSection = ({
           /* @__PURE__ */ jsx13(IntegrationHeaderSectionHexImage, { css: IntegrationHeaderSectionHexIcon }),
           CompIcon ? /* @__PURE__ */ jsx13(CompIcon, { css: IntegrationHeaderSectionIcon }) : icon ? /* @__PURE__ */ jsx13("img", { src: icon, alt: title, css: IntegrationHeaderSectionIcon }) : null
         ] }) : null,
-        /* @__PURE__ */ jsxs5("div", { css: IntegrationHeaderSectionTitleGroup, "data-test-id": "integration-header-text", children: [
+        /* @__PURE__ */ jsxs5("div", { css: IntegrationHeaderSectionTitleGroup, "data-testid": "integration-header-text", children: [
           /* @__PURE__ */ jsx13("h1", { css: IntegrationHeaderSectionTitle, children: title }),
           badgeText ? /* @__PURE__ */ jsx13(Badge, { text: badgeText }) : null,
           menu2 ? /* @__PURE__ */ jsx13("div", { children: menu2 }) : null,
@@ -2144,7 +2144,7 @@ var IntegrationHeaderSection = ({
         {
           css: IntegrationHeaderSectionText,
           htmlContent: description,
-          "data-test-id": "integration-description"
+          "data-testid": "integration-description"
         }
       ) : null
     ] }),
@@ -2249,7 +2249,7 @@ var PageHeaderSection = ({
           }
         )
       ] }) : null,
-      /* @__PURE__ */ jsx14(Heading, { level, css: PageHeaderSectionTitle, ...htmlProps, "data-test-id": "page-header-section", children: title }),
+      /* @__PURE__ */ jsx14(Heading, { level, css: PageHeaderSectionTitle, ...htmlProps, "data-testid": "page-header-section", children: title }),
       desc
     ] }),
     children ? /* @__PURE__ */ jsx14("div", { css: PageHeaderSectionChildContainer, children }) : null
@@ -10804,7 +10804,7 @@ var AnimationFile = ({
     Lottie,
     {
       role: "graphics-symbol",
-      "data-test-id": "graphic-loader",
+      "data-testid": "graphic-loader",
       "aria-label": label,
       autoPlay: autoplay,
       loop,
@@ -11113,7 +11113,7 @@ var UniformBadge = ({
       viewBox: "0 0 51 52",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      "data-test-id": "uniform-Badge",
+      "data-testid": "uniform-Badge",
       css: [SVG, theme === "dark" ? SVGDark : SVGLight],
       ...props,
       children: [
@@ -11149,7 +11149,7 @@ var UniformLogo = ({
   theme = "light",
   ...props
 }) => {
-  return /* @__PURE__ */ jsx21("div", { "data-test-id": "uniform-Logo", children: /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsx21("div", { "data-testid": "uniform-Logo", children: /* @__PURE__ */ jsxs13(
     "svg",
     {
       width: "153",
@@ -11322,7 +11322,7 @@ var MenuTitle = css23`
 // src/components/Menu/MenuGroup.tsx
 import { jsx as jsx23, jsxs as jsxs14 } from "@emotion/react/jsx-runtime";
 var MenuGroup = ({ title, children }) => {
-  return /* @__PURE__ */ jsxs14("div", { css: MenuGroupContainer, "data-test-id": "menu-group", children: [
+  return /* @__PURE__ */ jsxs14("div", { css: MenuGroupContainer, "data-testid": "menu-group", children: [
     /* @__PURE__ */ jsx23("span", { css: MenuTitle, children: title }),
     children
   ] });
@@ -11437,9 +11437,19 @@ var menu = css25`
   flex-direction: column;
   padding: var(--spacing-sm);
   outline: none;
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: auto;
   position: relative;
   z-index: var(--z-50);
+
+  // work around for smaller screens not being able to access large menus
+  // see uni-2997
+  max-height: 55vh; // firefox support
+
+  ${supports("max-height: 60dvh")} {
+    max-height: 55dvh; // modern browser support
+  }
+  ${scrollbarStyles}
 `;
 
 // src/components/Menu/Menu.tsx
@@ -11507,7 +11517,7 @@ var MenuItem = React9.forwardRef(
       {
         ref,
         type: "button",
-        "data-test-id": "button-menu",
+        "data-testid": "button-menu",
         ...menuState,
         ...resolvedProps,
         css: [menuItem(textColor, active), typeof className === "object" ? className : void 0],
@@ -11641,7 +11651,7 @@ var ButtonWithMenu = ({
     "div",
     {
       css: [ButtonWithMenuContainer, disabled ? buttonDisabledTheme[buttonType] : buttonTheme[buttonType]],
-      "data-test-id": "multioptions-button",
+      "data-testid": "multioptions-button",
       children: [
         /* @__PURE__ */ jsx27(
           "button",
@@ -11650,7 +11660,7 @@ var ButtonWithMenu = ({
             css: ButtonWithMenuBtn,
             disabled,
             onClick: onButtonClick,
-            "data-test-id": "multioptions-button-main",
+            "data-testid": "multioptions-button-main",
             ...buttonProps,
             children: buttonText
           }
@@ -11660,7 +11670,7 @@ var ButtonWithMenu = ({
           {
             menuLabel: "buttonMenu",
             placement,
-            menuTrigger: /* @__PURE__ */ jsx27("div", { css: ButtonWithMenuIcon, "data-test-id": "multioptions-button-call-menu", children: /* @__PURE__ */ jsx27(Icon, { icon: CgChevronDown, size: 24, iconColor: "currentColor" }) }),
+            menuTrigger: /* @__PURE__ */ jsx27("div", { css: ButtonWithMenuIcon, "data-testid": "multioptions-button-call-menu", children: /* @__PURE__ */ jsx27(Icon, { icon: CgChevronDown, size: 24, iconColor: "currentColor" }) }),
             children
           }
         )
@@ -11963,8 +11973,8 @@ var Callout = ({
       children: /* @__PURE__ */ jsxs18("div", { css: calloutInner, children: [
         compact ? null : /* @__PURE__ */ jsx29("div", { css: calloutIconWrap, children: /* @__PURE__ */ jsx29(Icon2, { css: [calloutIcon, calloutTypeData.iconColor] }) }),
         /* @__PURE__ */ jsxs18("div", { css: [calloutBody, compact ? calloutBodyCompact : void 0], children: [
-          title ? /* @__PURE__ */ jsx29("div", { css: [calloutTitle], "data-test-id": "callout-title", children: title }) : null,
-          children ? /* @__PURE__ */ jsx29("div", { css: [calloutTypeData.descriptionColor], "data-test-id": "callout-description", children }) : null
+          title ? /* @__PURE__ */ jsx29("div", { css: [calloutTitle], "data-testid": "callout-title", children: title }) : null,
+          children ? /* @__PURE__ */ jsx29("div", { css: [calloutTypeData.descriptionColor], "data-testid": "callout-description", children }) : null
         ] })
       ] })
     }
@@ -12042,7 +12052,7 @@ var Card = ({
             type: "button",
             disabled,
             css: CardMenu,
-            "data-test-id": menuButtonTestId != null ? menuButtonTestId : "list-card-menu",
+            "data-testid": menuButtonTestId != null ? menuButtonTestId : "list-card-menu",
             children: /* @__PURE__ */ jsx30(Icon, { icon: CgMoreAlt, iconColor: "currentColor", size: 32 })
           }
         ),
@@ -13015,7 +13025,7 @@ var DrawerInner = ({
         tabIndex: -1,
         "aria-labelledby": headerId,
         css: drawerStyles(bgColor),
-        "data-test-id": testId,
+        "data-testid": testId,
         children: [
           /* @__PURE__ */ jsxs26("div", { css: headerWrapperStyles, children: [
             header ? /* @__PURE__ */ jsx43("div", { id: headerId, css: drawerHeaderStyles, children: header }) : null,
@@ -13200,7 +13210,7 @@ var CaptionText = (dynamicSize) => css43`
 // src/components/Input/Caption.tsx
 import { jsx as jsx46 } from "@emotion/react/jsx-runtime";
 var Caption = ({ children, testId, dynamicSize = false, ...props }) => {
-  return /* @__PURE__ */ jsx46("small", { css: CaptionText(dynamicSize), "data-test-id": testId, ...props, children });
+  return /* @__PURE__ */ jsx46("small", { css: CaptionText(dynamicSize), "data-testid": testId, ...props, children });
 };
 
 // src/components/Input/CheckboxWithInfo.tsx
@@ -13313,7 +13323,7 @@ var ErrorText = css45`
 // src/components/Input/ErrorMessage.tsx
 import { jsx as jsx48, jsxs as jsxs30 } from "@emotion/react/jsx-runtime";
 var ErrorMessage = ({ message, testId, ...otherProps }) => {
-  return message ? /* @__PURE__ */ jsxs30("span", { role: "alert", css: ErrorText, "data-test-id": testId, ...otherProps, children: [
+  return message ? /* @__PURE__ */ jsxs30("span", { role: "alert", css: ErrorText, "data-testid": testId, ...otherProps, children: [
     /* @__PURE__ */ jsx48("span", { children: /* @__PURE__ */ jsx48(Icon, { icon: MdWarning, size: "1rem", iconColor: "currentColor" }) }),
     message
   ] }) : null;
@@ -13394,7 +13404,7 @@ var InfoIcon2 = css47`
 // src/components/Input/InfoMessage.tsx
 import { jsx as jsx50, jsxs as jsxs32 } from "@emotion/react/jsx-runtime";
 var InfoMessage = ({ message, testId, ...props }) => {
-  return message ? /* @__PURE__ */ jsxs32("span", { role: "status", css: InfoText, "data-test-id": testId, ...props, children: [
+  return message ? /* @__PURE__ */ jsxs32("span", { role: "status", css: InfoText, "data-testid": testId, ...props, children: [
     /* @__PURE__ */ jsx50("span", { children: /* @__PURE__ */ jsx50(Icon, { css: InfoIcon2, icon: MdInfoOutline, size: "1rem", iconColor: "currentColor" }) }),
     message
   ] }) : null;
@@ -13411,7 +13421,7 @@ var Label = ({ children, className, testId, ...props }) => {
     {
       css: [labelText, typeof className === "object" ? className : void 0],
       className: typeof className === "string" ? className : "",
-      "data-test-id": testId,
+      "data-testid": testId,
       ...props,
       children
     }
@@ -13436,7 +13446,7 @@ var WarningIcon = css48`
 // src/components/Input/WarningMessage.tsx
 import { jsx as jsx52, jsxs as jsxs33 } from "@emotion/react/jsx-runtime";
 var WarningMessage = ({ message, testId, ...props }) => {
-  return message ? /* @__PURE__ */ jsxs33("span", { role: "status", css: WarningText, "data-test-id": testId, ...props, children: [
+  return message ? /* @__PURE__ */ jsxs33("span", { role: "status", css: WarningText, "data-testid": testId, ...props, children: [
     /* @__PURE__ */ jsx52("span", { children: /* @__PURE__ */ jsx52(Icon, { css: WarningIcon, icon: MdWarning2, size: "1rem", iconColor: "currentColor" }) }),
     message
   ] }) : null;
@@ -13462,7 +13472,7 @@ var Input = React16.forwardRef(
     classNameLabel,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsxs34("div", { css: inputContainer, "data-test-id": containerTestId ? containerTestId : "container-input-field", children: [
+    return /* @__PURE__ */ jsxs34("div", { css: inputContainer, "data-testid": containerTestId ? containerTestId : "container-input-field", children: [
       showLabel ? /* @__PURE__ */ jsx53(
         Label,
         {
@@ -13912,7 +13922,7 @@ var InputToggle = React17.forwardRef(
       Label,
       {
         css: [inputToggleLabel, disabled ? inputDisabled : void 0],
-        "data-test-id": testId ? testId : "input-toggle",
+        "data-testid": testId ? testId : "input-toggle",
         children: [
           /* @__PURE__ */ jsx58(
             "input",
@@ -13965,7 +13975,7 @@ var SuccessIcon2 = css51`
 // src/components/Input/SuccessMessage.tsx
 import { jsx as jsx60, jsxs as jsxs38 } from "@emotion/react/jsx-runtime";
 var SuccessMessage = ({ message, testId, ...props }) => {
-  return message ? /* @__PURE__ */ jsxs38("span", { role: "status", css: SuccessText, "data-test-id": testId, ...props, children: [
+  return message ? /* @__PURE__ */ jsxs38("span", { role: "status", css: SuccessText, "data-testid": testId, ...props, children: [
     /* @__PURE__ */ jsx60("span", { children: /* @__PURE__ */ jsx60(Icon, { css: SuccessIcon2, icon: CgCheckO, size: "1rem", iconColor: "currentColor" }) }),
     message
   ] }) : null;
@@ -14240,8 +14250,8 @@ var EditTeamIntegrationTile = ({
       "data-testid": "configure-integration-container",
       "integration-id": `${id.toLocaleLowerCase()}`,
       children: [
-        /* @__PURE__ */ jsx65(ResolveIcon, { icon, name, "data-test-id": "integration-logo" }),
-        /* @__PURE__ */ jsx65("span", { css: IntegrationTileName, "data-test-id": "integration-card-name", children: name }),
+        /* @__PURE__ */ jsx65(ResolveIcon, { icon, name, "data-testid": "integration-logo" }),
+        /* @__PURE__ */ jsx65("span", { css: IntegrationTileName, "data-testid": "integration-card-name", children: name }),
         !isPublic ? /* @__PURE__ */ jsx65(IntegrationCustomBadge, {}) : null,
         canEdit ? /* @__PURE__ */ jsx65(
           Button,
@@ -14436,7 +14446,7 @@ var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
       {
         src: iconSrc,
         alt: name,
-        "data-test-id": "integration-modal-icon",
+        "data-testid": "integration-modal-icon",
         css: IntegrationModalImage,
         ...imgProps
       }
@@ -14644,7 +14654,7 @@ var IntegrationModalHeader = ({ icon, name, menu: menu2, children }) => {
     /* @__PURE__ */ jsx73(HexModalBackground, { css: IntegrationModalHeaderSVGBackground, role: "presentation" }),
     /* @__PURE__ */ jsx73("div", { css: IntegrationModalHeaderGroup, children: /* @__PURE__ */ jsxs47("div", { css: IntegrationModalHeaderTitleGroup, children: [
       icon ? /* @__PURE__ */ jsx73(IntegrationModalIcon, { icon, name: name || "" }) : null,
-      /* @__PURE__ */ jsx73(Heading, { level: 3, css: IntegrationModalHeaderTitle, "data-test-id": "integration-modal-title", children: name || "Create Team Integration" }),
+      /* @__PURE__ */ jsx73(Heading, { level: 3, css: IntegrationModalHeaderTitle, "data-testid": "integration-modal-title", children: name || "Create Team Integration" }),
       menu2 ? /* @__PURE__ */ jsxs47("div", { css: IntegrationModalHeaderMenuPlacement, children: [
         menu2,
         " "
@@ -14938,7 +14948,7 @@ var ScrollableListInputItem = ({
         active ? ScrollableListItemActive : void 0
       ],
       ...props,
-      children: /* @__PURE__ */ jsxs51("label", { "data-test-id": labelTestId, css: ScrollableListInputLabel, children: [
+      children: /* @__PURE__ */ jsxs51("label", { "data-testid": labelTestId, css: ScrollableListInputLabel, children: [
         /* @__PURE__ */ jsxs51("span", { css: ScrollableListInputText, children: [
           icon,
           label
@@ -14951,7 +14961,7 @@ var ScrollableListInputItem = ({
             iconColor: "currentColor",
             css: [ScrollableListIcon, active ? ScrollableListIconVisible : void 0],
             size: 24,
-            "data-test-id": "check-mark",
+            "data-testid": "check-mark",
             "data-test-active": active
           }
         )
@@ -15042,7 +15052,7 @@ var loadingDot = css66`
 // src/components/LoadingIndicator/LoadingIndicator.tsx
 import { jsx as jsx80, jsxs as jsxs53 } from "@emotion/react/jsx-runtime";
 var LoadingIndicator = ({ ...props }) => {
-  return /* @__PURE__ */ jsxs53("div", { role: "alert", css: loader, "data-test-id": "loading-indicator", ...props, children: [
+  return /* @__PURE__ */ jsxs53("div", { role: "alert", css: loader, "data-testid": "loading-indicator", ...props, children: [
     /* @__PURE__ */ jsx80("span", { css: loadingDot }),
     /* @__PURE__ */ jsx80("span", { css: loadingDot }),
     /* @__PURE__ */ jsx80("span", { css: loadingDot })
@@ -15147,14 +15157,13 @@ var LoadingIcon = ({ height, width, ...props }) => {
   return /* @__PURE__ */ jsx81(
     "svg",
     {
-      "data-testid": "svg",
       viewBox: "0 0 38 38",
       xmlns: "http://www.w3.org/2000/svg",
       width: width != null ? width : 40,
       height: height != null ? height : 40,
       stroke: "currentColor",
       ...props,
-      "data-test-id": "loading-icon",
+      "data-testid": "loading-icon",
       children: /* @__PURE__ */ jsx81("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsxs54("g", { transform: "translate(1 1)", strokeWidth: "2", children: [
         /* @__PURE__ */ jsx81("circle", { strokeOpacity: ".25", cx: "18", cy: "18", r: "18" }),
         /* @__PURE__ */ jsx81("path", { d: "M36 18c0-9.94-8.06-18-18-18", transform: "rotate(166.645 18 18)", children: /* @__PURE__ */ jsx81(
@@ -15904,7 +15913,7 @@ var ParameterOverrideMarker = (props) => /* @__PURE__ */ jsx89(Tooltip, { title:
 import { Fragment as Fragment11, jsx as jsx90, jsxs as jsxs61 } from "@emotion/react/jsx-runtime";
 var ParameterImage = forwardRef11((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ jsx90(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: /* @__PURE__ */ jsx90(ParameterImageInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ jsx90(ParameterShell, { "data-testid": "parameter-image", ...shellProps, children: /* @__PURE__ */ jsx90(ParameterImageInner, { ref, ...innerProps }) });
 });
 var BrokenImage = ({ ...props }) => {
   return /* @__PURE__ */ jsxs61(
@@ -16021,7 +16030,7 @@ import { forwardRef as forwardRef12 } from "react";
 import { jsx as jsx91 } from "@emotion/react/jsx-runtime";
 var ParameterInput = forwardRef12((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ jsx91(ParameterShell, { "data-test-id": "parameter-input", ...shellProps, children: /* @__PURE__ */ jsx91(ParameterInputInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ jsx91(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ jsx91(ParameterInputInner, { ref, ...innerProps }) });
 });
 var ParameterInputInner = forwardRef12(
   ({ ...props }, ref) => {
@@ -16050,7 +16059,7 @@ var ParameterLink = forwardRef13(
     return /* @__PURE__ */ jsx92(
       ParameterShell,
       {
-        "data-test-id": "link-parameter-editor",
+        "data-testid": "link-parameter-editor",
         ...shellProps,
         label: innerProps.value ? shellProps.label : "",
         title: !innerProps.value ? shellProps.label : void 0,
@@ -16145,7 +16154,7 @@ var ParameterNameAndPublicIdInput = ({
         id: nameIdField,
         name: nameIdField,
         label,
-        "data-test-id": "name-field",
+        "data-testid": "name-field",
         autoComplete: "off",
         "data-af": "true",
         onBlur,
@@ -16165,7 +16174,7 @@ var ParameterNameAndPublicIdInput = ({
         name: publicIdFieldName,
         label: "Public ID",
         disabled: Boolean(id) || isReadonly,
-        "data-test-id": "public-id-field",
+        "data-testid": "public-id-field",
         autoComplete: "off",
         onBlur,
         onChange: onPublicIdChange,
@@ -17570,7 +17579,7 @@ var ParameterRichText = ({
   return /* @__PURE__ */ jsxs66(
     ParameterShell,
     {
-      "data-test-id": "parameter-input",
+      "data-testid": "parameter-input",
       label,
       hiddenLabel,
       labelLeadingIcon,
@@ -17802,7 +17811,7 @@ import { forwardRef as forwardRef15 } from "react";
 import { jsx as jsx99 } from "@emotion/react/jsx-runtime";
 var ParameterTextarea = forwardRef15((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ jsx99(ParameterShell, { "data-test-id": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx99(ParameterTextareaInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ jsx99(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx99(ParameterTextareaInner, { ref, ...innerProps }) });
 });
 var ParameterTextareaInner = forwardRef15(({ ...props }, ref) => {
   const { id, label, hiddenLabel } = useParameterShell();
@@ -17855,7 +17864,7 @@ var Popover2 = ({
 }) => {
   const popover = usePopoverState({ placement });
   return /* @__PURE__ */ jsxs69(Fragment16, { children: [
-    /* @__PURE__ */ jsxs69(PopoverDisclosure, { ...popover, css: PopoverBtn, title: buttonText, "data-test-id": testId, children: [
+    /* @__PURE__ */ jsxs69(PopoverDisclosure, { ...popover, css: PopoverBtn, title: buttonText, "data-testid": testId, children: [
       /* @__PURE__ */ jsx101(Icon, { icon, iconColor, size: iconSize }),
       /* @__PURE__ */ jsx101("span", { hidden: true, children: buttonText })
     ] }),
@@ -18135,7 +18144,7 @@ var SegmentedControl = ({
           Tooltip,
           {
             title: isDisabled || !option.tooltip ? "" : option.tooltip,
-            children: /* @__PURE__ */ jsx103("div", { css: segmentedControlItemStyles, "data-test-id": "container-segmented-control", children: /* @__PURE__ */ jsxs71(
+            children: /* @__PURE__ */ jsx103("div", { css: segmentedControlItemStyles, "data-testid": "container-segmented-control", children: /* @__PURE__ */ jsxs71(
               "label",
               {
                 css: [

package/dist/index.d.mts

@@ -20334,7 +20334,7 @@ type ButtonWithMenuProps = ActionButtonsProps & React$1.ButtonHTMLAttributes<HTM
         className="flex gap-2 items-center"
         data-testid="save-menu-item-button"
         >
-          <span className="whitespace-nowrap" data-test-id="save-menu-item">
+          <span className="whitespace-nowrap" data-testid="save-menu-item">
               Save
           </span>
     </MenuItem>
@@ -20359,7 +20359,7 @@ interface CalloutProps {
     children?: React$1.ReactNode;
     /** sets additional css classes or emotion styles on the callout */
     className?: SerializedStyles | string;
-    /** sets the data-test-id on the callout element */
+    /** sets the data-testid on the callout element */
     testId?: string;
 }
 /**
@@ -20379,7 +20379,7 @@ type CardProps = React$1.HTMLAttributes<HTMLDivElement> & {
     children?: React$1.ReactNode;
     /** (optional) sets options for a dropdown menu */
     menuItems?: JSX.Element;
-    /** (optional) sets the data-test-id attribute on the button element
+    /** (optional) sets the data-testid attribute on the button element
      * @default 'list-card-menu'
      */
     menuButtonTestId?: string;
@@ -20713,7 +20713,7 @@ type CaptionProps = React$1.HTMLAttributes<HTMLElement> & {
     children: React$1.ReactNode;
     /** Makes the font size relative to the inherited font size */
     dynamicSize?: boolean;
-    /** sets data-test-id attribute for test automation */
+    /** sets data-testid attribute for test automation */
     testId?: string;
 };
 /**
@@ -21267,7 +21267,7 @@ type ScrollableItemProps = {
     icon?: React.ReactElement;
     /**sets the label value */
     label: string | React.ReactElement;
-    /** sets a data-test-id on the label */
+    /** sets a data-testid on the label */
     labelTestId?: string;
     /** recommended to use a form input element of type radio or checkbox */
     children: React.ReactNode;

package/dist/index.d.ts

@@ -20334,7 +20334,7 @@ type ButtonWithMenuProps = ActionButtonsProps & React$1.ButtonHTMLAttributes<HTM
         className="flex gap-2 items-center"
         data-testid="save-menu-item-button"
         >
-          <span className="whitespace-nowrap" data-test-id="save-menu-item">
+          <span className="whitespace-nowrap" data-testid="save-menu-item">
               Save
           </span>
     </MenuItem>
@@ -20359,7 +20359,7 @@ interface CalloutProps {
     children?: React$1.ReactNode;
     /** sets additional css classes or emotion styles on the callout */
     className?: SerializedStyles | string;
-    /** sets the data-test-id on the callout element */
+    /** sets the data-testid on the callout element */
     testId?: string;
 }
 /**
@@ -20379,7 +20379,7 @@ type CardProps = React$1.HTMLAttributes<HTMLDivElement> & {
     children?: React$1.ReactNode;
     /** (optional) sets options for a dropdown menu */
     menuItems?: JSX.Element;
-    /** (optional) sets the data-test-id attribute on the button element
+    /** (optional) sets the data-testid attribute on the button element
      * @default 'list-card-menu'
      */
     menuButtonTestId?: string;
@@ -20713,7 +20713,7 @@ type CaptionProps = React$1.HTMLAttributes<HTMLElement> & {
     children: React$1.ReactNode;
     /** Makes the font size relative to the inherited font size */
     dynamicSize?: boolean;
-    /** sets data-test-id attribute for test automation */
+    /** sets data-testid attribute for test automation */
     testId?: string;
 };
 /**
@@ -21267,7 +21267,7 @@ type ScrollableItemProps = {
     icon?: React.ReactElement;
     /**sets the label value */
     label: string | React.ReactElement;
-    /** sets a data-test-id on the label */
+    /** sets a data-testid on the label */
     labelTestId?: string;
     /** recommended to use a form input element of type radio or checkbox */
     children: React.ReactNode;

package/dist/index.js

@@ -2360,7 +2360,7 @@ var IntegrationHeaderSection = ({
           /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(IntegrationHeaderSectionHexImage, { css: IntegrationHeaderSectionHexIcon }),
           CompIcon ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CompIcon, { css: IntegrationHeaderSectionIcon }) : icon ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("img", { src: icon, alt: title, css: IntegrationHeaderSectionIcon }) : null
         ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { css: IntegrationHeaderSectionTitleGroup, "data-test-id": "integration-header-text", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { css: IntegrationHeaderSectionTitleGroup, "data-testid": "integration-header-text", children: [
           /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h1", { css: IntegrationHeaderSectionTitle, children: title }),
           badgeText ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Badge, { text: badgeText }) : null,
           menu2 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { children: menu2 }) : null,
@@ -2382,7 +2382,7 @@ var IntegrationHeaderSection = ({
         {
           css: IntegrationHeaderSectionText,
           htmlContent: description,
-          "data-test-id": "integration-description"
+          "data-testid": "integration-description"
         }
       ) : null
     ] }),
@@ -2487,7 +2487,7 @@ var PageHeaderSection = ({
           }
         )
       ] }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Heading, { level, css: PageHeaderSectionTitle, ...htmlProps, "data-test-id": "page-header-section", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Heading, { level, css: PageHeaderSectionTitle, ...htmlProps, "data-testid": "page-header-section", children: title }),
       desc
     ] }),
     children ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { css: PageHeaderSectionChildContainer, children }) : null
@@ -11042,7 +11042,7 @@ var AnimationFile = ({
     import_lottie_react.default,
     {
       role: "graphics-symbol",
-      "data-test-id": "graphic-loader",
+      "data-testid": "graphic-loader",
       "aria-label": label,
       autoPlay: autoplay,
       loop,
@@ -11346,7 +11346,7 @@ var UniformBadge = ({
       viewBox: "0 0 51 52",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      "data-test-id": "uniform-Badge",
+      "data-testid": "uniform-Badge",
       css: [SVG, theme === "dark" ? SVGDark : SVGLight],
       ...props,
       children: [
@@ -11382,7 +11382,7 @@ var UniformLogo = ({
   theme = "light",
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { "data-test-id": "uniform-Logo", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { "data-testid": "uniform-Logo", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     "svg",
     {
       width: "153",
@@ -11551,7 +11551,7 @@ var MenuTitle = import_react31.css`
 // src/components/Menu/MenuGroup.tsx
 var import_jsx_runtime23 = require("@emotion/react/jsx-runtime");
 var MenuGroup = ({ title, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { css: MenuGroupContainer, "data-test-id": "menu-group", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { css: MenuGroupContainer, "data-testid": "menu-group", children: [
     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { css: MenuTitle, children: title }),
     children
   ] });
@@ -11666,9 +11666,19 @@ var menu = import_react34.css`
   flex-direction: column;
   padding: var(--spacing-sm);
   outline: none;
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: auto;
   position: relative;
   z-index: var(--z-50);
+
+  // work around for smaller screens not being able to access large menus
+  // see uni-2997
+  max-height: 55vh; // firefox support
+
+  ${supports("max-height: 60dvh")} {
+    max-height: 55dvh; // modern browser support
+  }
+  ${scrollbarStyles}
 `;
 
 // src/components/Menu/Menu.tsx
@@ -11736,7 +11746,7 @@ var MenuItem = React9.forwardRef(
       {
         ref,
         type: "button",
-        "data-test-id": "button-menu",
+        "data-testid": "button-menu",
         ...menuState,
         ...resolvedProps,
         css: [menuItem(textColor, active), typeof className === "object" ? className : void 0],
@@ -11870,7 +11880,7 @@ var ButtonWithMenu = ({
     "div",
     {
       css: [ButtonWithMenuContainer, disabled ? buttonDisabledTheme[buttonType] : buttonTheme[buttonType]],
-      "data-test-id": "multioptions-button",
+      "data-testid": "multioptions-button",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "button",
@@ -11879,7 +11889,7 @@ var ButtonWithMenu = ({
             css: ButtonWithMenuBtn,
             disabled,
             onClick: onButtonClick,
-            "data-test-id": "multioptions-button-main",
+            "data-testid": "multioptions-button-main",
             ...buttonProps,
             children: buttonText
           }
@@ -11889,7 +11899,7 @@ var ButtonWithMenu = ({
           {
             menuLabel: "buttonMenu",
             placement,
-            menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { css: ButtonWithMenuIcon, "data-test-id": "multioptions-button-call-menu", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, { icon: import_cg6.CgChevronDown, size: 24, iconColor: "currentColor" }) }),
+            menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { css: ButtonWithMenuIcon, "data-testid": "multioptions-button-call-menu", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, { icon: import_cg6.CgChevronDown, size: 24, iconColor: "currentColor" }) }),
             children
           }
         )
@@ -12192,8 +12202,8 @@ var Callout = ({
       children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { css: calloutInner, children: [
         compact ? null : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { css: calloutIconWrap, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Icon2, { css: [calloutIcon, calloutTypeData.iconColor] }) }),
         /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { css: [calloutBody, compact ? calloutBodyCompact : void 0], children: [
-          title ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { css: [calloutTitle], "data-test-id": "callout-title", children: title }) : null,
-          children ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { css: [calloutTypeData.descriptionColor], "data-test-id": "callout-description", children }) : null
+          title ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { css: [calloutTitle], "data-testid": "callout-title", children: title }) : null,
+          children ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { css: [calloutTypeData.descriptionColor], "data-testid": "callout-description", children }) : null
         ] })
       ] })
     }
@@ -12271,7 +12281,7 @@ var Card = ({
             type: "button",
             disabled,
             css: CardMenu,
-            "data-test-id": menuButtonTestId != null ? menuButtonTestId : "list-card-menu",
+            "data-testid": menuButtonTestId != null ? menuButtonTestId : "list-card-menu",
             children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { icon: import_cg7.CgMoreAlt, iconColor: "currentColor", size: 32 })
           }
         ),
@@ -13244,7 +13254,7 @@ var DrawerInner = ({
         tabIndex: -1,
         "aria-labelledby": headerId,
         css: drawerStyles(bgColor),
-        "data-test-id": testId,
+        "data-testid": testId,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { css: headerWrapperStyles, children: [
             header ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { id: headerId, css: drawerHeaderStyles, children: header }) : null,
@@ -13429,7 +13439,7 @@ var CaptionText = (dynamicSize) => import_react56.css`
 // src/components/Input/Caption.tsx
 var import_jsx_runtime46 = require("@emotion/react/jsx-runtime");
 var Caption = ({ children, testId, dynamicSize = false, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("small", { css: CaptionText(dynamicSize), "data-test-id": testId, ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("small", { css: CaptionText(dynamicSize), "data-testid": testId, ...props, children });
 };
 
 // src/components/Input/CheckboxWithInfo.tsx
@@ -13542,7 +13552,7 @@ var ErrorText = import_react59.css`
 // src/components/Input/ErrorMessage.tsx
 var import_jsx_runtime48 = require("@emotion/react/jsx-runtime");
 var ErrorMessage = ({ message, testId, ...otherProps }) => {
-  return message ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("span", { role: "alert", css: ErrorText, "data-test-id": testId, ...otherProps, children: [
+  return message ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("span", { role: "alert", css: ErrorText, "data-testid": testId, ...otherProps, children: [
     /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Icon, { icon: import_md2.MdWarning, size: "1rem", iconColor: "currentColor" }) }),
     message
   ] }) : null;
@@ -13623,7 +13633,7 @@ var InfoIcon2 = import_react61.css`
 // src/components/Input/InfoMessage.tsx
 var import_jsx_runtime50 = require("@emotion/react/jsx-runtime");
 var InfoMessage = ({ message, testId, ...props }) => {
-  return message ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("span", { role: "status", css: InfoText, "data-test-id": testId, ...props, children: [
+  return message ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("span", { role: "status", css: InfoText, "data-testid": testId, ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Icon, { css: InfoIcon2, icon: import_md3.MdInfoOutline, size: "1rem", iconColor: "currentColor" }) }),
     message
   ] }) : null;
@@ -13640,7 +13650,7 @@ var Label = ({ children, className, testId, ...props }) => {
     {
       css: [labelText, typeof className === "object" ? className : void 0],
       className: typeof className === "string" ? className : "",
-      "data-test-id": testId,
+      "data-testid": testId,
       ...props,
       children
     }
@@ -13665,7 +13675,7 @@ var WarningIcon = import_react62.css`
 // src/components/Input/WarningMessage.tsx
 var import_jsx_runtime52 = require("@emotion/react/jsx-runtime");
 var WarningMessage = ({ message, testId, ...props }) => {
-  return message ? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("span", { role: "status", css: WarningText, "data-test-id": testId, ...props, children: [
+  return message ? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("span", { role: "status", css: WarningText, "data-testid": testId, ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Icon, { css: WarningIcon, icon: import_md4.MdWarning, size: "1rem", iconColor: "currentColor" }) }),
     message
   ] }) : null;
@@ -13691,7 +13701,7 @@ var Input = React16.forwardRef(
     classNameLabel,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { css: inputContainer, "data-test-id": containerTestId ? containerTestId : "container-input-field", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { css: inputContainer, "data-testid": containerTestId ? containerTestId : "container-input-field", children: [
       showLabel ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
         Label,
         {
@@ -14141,7 +14151,7 @@ var InputToggle = React17.forwardRef(
       Label,
       {
         css: [inputToggleLabel, disabled ? inputDisabled : void 0],
-        "data-test-id": testId ? testId : "input-toggle",
+        "data-testid": testId ? testId : "input-toggle",
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
             "input",
@@ -14194,7 +14204,7 @@ var SuccessIcon2 = import_react66.css`
 // src/components/Input/SuccessMessage.tsx
 var import_jsx_runtime60 = require("@emotion/react/jsx-runtime");
 var SuccessMessage = ({ message, testId, ...props }) => {
-  return message ? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("span", { role: "status", css: SuccessText, "data-test-id": testId, ...props, children: [
+  return message ? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("span", { role: "status", css: SuccessText, "data-testid": testId, ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon, { css: SuccessIcon2, icon: import_cg13.CgCheckO, size: "1rem", iconColor: "currentColor" }) }),
     message
   ] }) : null;
@@ -14469,8 +14479,8 @@ var EditTeamIntegrationTile = ({
       "data-testid": "configure-integration-container",
       "integration-id": `${id.toLocaleLowerCase()}`,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(ResolveIcon, { icon, name, "data-test-id": "integration-logo" }),
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { css: IntegrationTileName, "data-test-id": "integration-card-name", children: name }),
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(ResolveIcon, { icon, name, "data-testid": "integration-logo" }),
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { css: IntegrationTileName, "data-testid": "integration-card-name", children: name }),
         !isPublic ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(IntegrationCustomBadge, {}) : null,
         canEdit ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
           Button,
@@ -14665,7 +14675,7 @@ var IntegrationModalIcon = ({ icon, name, ...imgProps }) => {
       {
         src: iconSrc,
         alt: name,
-        "data-test-id": "integration-modal-icon",
+        "data-testid": "integration-modal-icon",
         css: IntegrationModalImage,
         ...imgProps
       }
@@ -14873,7 +14883,7 @@ var IntegrationModalHeader = ({ icon, name, menu: menu2, children }) => {
     /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(HexModalBackground, { css: IntegrationModalHeaderSVGBackground, role: "presentation" }),
     /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { css: IntegrationModalHeaderGroup, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { css: IntegrationModalHeaderTitleGroup, children: [
       icon ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(IntegrationModalIcon, { icon, name: name || "" }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Heading, { level: 3, css: IntegrationModalHeaderTitle, "data-test-id": "integration-modal-title", children: name || "Create Team Integration" }),
+      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Heading, { level: 3, css: IntegrationModalHeaderTitle, "data-testid": "integration-modal-title", children: name || "Create Team Integration" }),
       menu2 ? /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { css: IntegrationModalHeaderMenuPlacement, children: [
         menu2,
         " "
@@ -15167,7 +15177,7 @@ var ScrollableListInputItem = ({
         active ? ScrollableListItemActive : void 0
       ],
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("label", { "data-test-id": labelTestId, css: ScrollableListInputLabel, children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("label", { "data-testid": labelTestId, css: ScrollableListInputLabel, children: [
         /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("span", { css: ScrollableListInputText, children: [
           icon,
           label
@@ -15180,7 +15190,7 @@ var ScrollableListInputItem = ({
             iconColor: "currentColor",
             css: [ScrollableListIcon, active ? ScrollableListIconVisible : void 0],
             size: 24,
-            "data-test-id": "check-mark",
+            "data-testid": "check-mark",
             "data-test-active": active
           }
         )
@@ -15271,7 +15281,7 @@ var loadingDot = import_react84.css`
 // src/components/LoadingIndicator/LoadingIndicator.tsx
 var import_jsx_runtime80 = require("@emotion/react/jsx-runtime");
 var LoadingIndicator = ({ ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { role: "alert", css: loader, "data-test-id": "loading-indicator", ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { role: "alert", css: loader, "data-testid": "loading-indicator", ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { css: loadingDot }),
     /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { css: loadingDot }),
     /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { css: loadingDot })
@@ -15376,14 +15386,13 @@ var LoadingIcon = ({ height, width, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
     "svg",
     {
-      "data-testid": "svg",
       viewBox: "0 0 38 38",
       xmlns: "http://www.w3.org/2000/svg",
       width: width != null ? width : 40,
       height: height != null ? height : 40,
       stroke: "currentColor",
       ...props,
-      "data-test-id": "loading-icon",
+      "data-testid": "loading-icon",
       children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("g", { fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("g", { transform: "translate(1 1)", strokeWidth: "2", children: [
         /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("circle", { strokeOpacity: ".25", cx: "18", cy: "18", r: "18" }),
         /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("path", { d: "M36 18c0-9.94-8.06-18-18-18", transform: "rotate(166.645 18 18)", children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
@@ -16133,7 +16142,7 @@ var ParameterOverrideMarker = (props) => /* @__PURE__ */ (0, import_jsx_runtime8
 var import_jsx_runtime90 = require("@emotion/react/jsx-runtime");
 var ParameterImage = (0, import_react98.forwardRef)((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(ParameterImageInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(ParameterShell, { "data-testid": "parameter-image", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(ParameterImageInner, { ref, ...innerProps }) });
 });
 var BrokenImage = ({ ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
@@ -16250,7 +16259,7 @@ var import_react99 = require("react");
 var import_jsx_runtime91 = require("@emotion/react/jsx-runtime");
 var ParameterInput = (0, import_react99.forwardRef)((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(ParameterShell, { "data-test-id": "parameter-input", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(ParameterInputInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(ParameterInputInner, { ref, ...innerProps }) });
 });
 var ParameterInputInner = (0, import_react99.forwardRef)(
   ({ ...props }, ref) => {
@@ -16279,7 +16288,7 @@ var ParameterLink = (0, import_react100.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
       ParameterShell,
       {
-        "data-test-id": "link-parameter-editor",
+        "data-testid": "link-parameter-editor",
         ...shellProps,
         label: innerProps.value ? shellProps.label : "",
         title: !innerProps.value ? shellProps.label : void 0,
@@ -16374,7 +16383,7 @@ var ParameterNameAndPublicIdInput = ({
         id: nameIdField,
         name: nameIdField,
         label,
-        "data-test-id": "name-field",
+        "data-testid": "name-field",
         autoComplete: "off",
         "data-af": "true",
         onBlur,
@@ -16394,7 +16403,7 @@ var ParameterNameAndPublicIdInput = ({
         name: publicIdFieldName,
         label: "Public ID",
         disabled: Boolean(id) || isReadonly,
-        "data-test-id": "public-id-field",
+        "data-testid": "public-id-field",
         autoComplete: "off",
         onBlur,
         onChange: onPublicIdChange,
@@ -17762,7 +17771,7 @@ var ParameterRichText = ({
   return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(
     ParameterShell,
     {
-      "data-test-id": "parameter-input",
+      "data-testid": "parameter-input",
       label,
       hiddenLabel,
       labelLeadingIcon,
@@ -17994,7 +18003,7 @@ var import_react111 = require("react");
 var import_jsx_runtime99 = require("@emotion/react/jsx-runtime");
 var ParameterTextarea = (0, import_react111.forwardRef)((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(ParameterShell, { "data-test-id": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(ParameterTextareaInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(ParameterTextareaInner, { ref, ...innerProps }) });
 });
 var ParameterTextareaInner = (0, import_react111.forwardRef)(({ ...props }, ref) => {
   const { id, label, hiddenLabel } = useParameterShell();
@@ -18043,7 +18052,7 @@ var Popover2 = ({
 }) => {
   const popover = (0, import_Popover.usePopoverState)({ placement });
   return /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)(import_jsx_runtime101.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)(import_Popover.PopoverDisclosure, { ...popover, css: PopoverBtn, title: buttonText, "data-test-id": testId, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)(import_Popover.PopoverDisclosure, { ...popover, css: PopoverBtn, title: buttonText, "data-testid": testId, children: [
       /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(Icon, { icon, iconColor, size: iconSize }),
       /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("span", { hidden: true, children: buttonText })
     ] }),
@@ -18323,7 +18332,7 @@ var SegmentedControl = ({
           Tooltip,
           {
             title: isDisabled || !option.tooltip ? "" : option.tooltip,
-            children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { css: segmentedControlItemStyles, "data-test-id": "container-segmented-control", children: /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { css: segmentedControlItemStyles, "data-testid": "container-segmented-control", children: /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(
               "label",
               {
                 css: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "19.37.1",
+  "version": "19.38.2",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -24,8 +24,8 @@
     "@storybook/react": "6.5.16",
     "@types/react": "18.2.7",
     "@types/react-dom": "18.2.4",
-    "@uniformdev/canvas": "^19.37.1",
-    "@uniformdev/richtext": "^19.37.1",
+    "@uniformdev/canvas": "^19.38.2",
+    "@uniformdev/richtext": "^19.38.2",
     "autoprefixer": "10.4.14",
     "hygen": "6.2.11",
     "postcss": "8.4.27",
@@ -50,13 +50,13 @@
     "lottie-react": "^2.3.1",
     "monaco-editor": "0.40.0",
     "param-case": "3.0.4",
-    "react-hotkeys-hook": "4.4.0",
+    "react-hotkeys-hook": "4.4.1",
     "react-icons": "4.10.1",
     "react-paginate": "8.1.5",
-    "react-select": "5.7.3",
+    "react-select": "5.7.4",
     "react-use": "17.4.0",
     "reakit": "1.3.11",
-    "zod-to-json-schema": "3.21.3"
+    "zod-to-json-schema": "3.21.4"
   },
   "peerDependencies": {
     "react": ">=17 || 17 || 18",
@@ -68,5 +68,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9de2a3f7515d658d07d7d1fb8ebf4805172e655c"
+  "gitHead": "b97fd17fd44e0f5bd3806e942b516cb2bd218096"
 }