@uniformdev/design-system 19.195.1-alpha.3 → 19.196.1-alpha.2

package/dist/esm/index.js

@@ -13029,7 +13029,7 @@ var Input = React10.forwardRef(
                       errorMessage ? inputError : void 0,
                       icon ? inputWithIcon : ""
                     ],
-                    "aria-label": !showLabel ? label : void 0,
+                    "aria-label": showLabel || typeof label !== "string" ? void 0 : label,
                     className: typeof classNameControl === "string" ? classNameControl : "",
                     ...props,
                     ref
@@ -15149,6 +15149,9 @@ var ChipOutlined = css49`
     border-color: var(--outline-color);
   }
 `;
+var ChipDisabled = css49`
+  opacity: var(--opacity-50);
+`;
 
 // src/components/Chip/Chip.tsx
 import { Fragment as Fragment9, jsx as jsx62, jsxs as jsxs38 } from "@emotion/react/jsx-runtime";
@@ -15168,6 +15171,7 @@ var Chip = ({
   theme = "accent-light",
   variant = "solid",
   chipAction,
+  isDisabled = false,
   as = "span",
   ...props
 }) => {
@@ -15184,7 +15188,8 @@ var Chip = ({
         ChipContainer,
         chipSize[size],
         chipTheme[theme],
-        variant === "outlined" ? ChipOutlined : void 0
+        variant === "outlined" ? ChipOutlined : void 0,
+        isDisabled ? ChipDisabled : void 0
       ],
       ...props,
       children: [
@@ -18637,8 +18642,9 @@ var modalContentStyles = css80`
   border-radius: var(--rounded-sm);
   ${scrollbarStyles}
 `;
-var modalDialogWrapper = css80`
-  padding: 0 var(--spacing-lg) var(--spacing-md);
+var modalDialogWrapper = (hasCloseButton) => css80`
+  height: 100%;
+  padding: ${hasCloseButton ? 0 : "var(--spacing-md)"} var(--spacing-lg) var(--spacing-md);
 `;
 var modalDialogInnerStyles = css80`
   // we need to override the gap of the modalInnerStyles when using a modal dialog
@@ -18662,8 +18668,10 @@ var Modal = React20.forwardRef(
     modalSize = "lg",
     withoutContentPadding = false,
     withoutContentBackground = false,
+    disableBodyScroll = false,
     ...modalProps
   }, ref) => {
+    const mouseDownInsideModal = useRef9(false);
     const dialogRef = useRef9(null);
     const size = {
       sm: modalSizeSmall,
@@ -18672,7 +18680,7 @@ var Modal = React20.forwardRef(
     };
     useShortcut({
       handler: () => {
-        onRequestClose();
+        onRequestClose == null ? void 0 : onRequestClose();
       },
       shortcut: "escape"
     });
@@ -18705,9 +18713,25 @@ var Modal = React20.forwardRef(
           }
         },
         css: [modalStyles, !width ? size[modalSize] : void 0],
-        style: { width, height: height === "auto" ? "min-content" : height },
+        style: {
+          width,
+          height: height === "auto" ? "min-content" : height,
+          // allows menus rendered in the PortalContext to overflow the modal contents
+          // (internal scrolling of contents is handled on a child element)
+          overflow: "visible"
+        },
         "data-testid": "side-dialog",
-        onClick: onRequestClose,
+        onClick: () => {
+          if (mouseDownInsideModal.current) {
+            return;
+          }
+          onRequestClose == null ? void 0 : onRequestClose();
+        },
+        onMouseUp: () => {
+          setTimeout(() => {
+            mouseDownInsideModal.current = false;
+          });
+        },
         onCancel: (e) => {
           e.preventDefault();
         },
@@ -18717,10 +18741,13 @@ var Modal = React20.forwardRef(
           {
             css: [modalInnerStyles, { height: height === "auto" ? "auto" : "100%" }],
             onClick: (e) => e.stopPropagation(),
+            onMouseDown: () => {
+              mouseDownInsideModal.current = true;
+            },
             children: [
-              /* @__PURE__ */ jsxs67("div", { css: modalHeaderStyles, children: [
-                !header2 ? null : /* @__PURE__ */ jsx102("div", { css: modalHeaderHeaderStyles, children: header2 }),
-                /* @__PURE__ */ jsx102(
+              header2 || onRequestClose ? /* @__PURE__ */ jsxs67("div", { css: modalHeaderStyles, children: [
+                header2 ? /* @__PURE__ */ jsx102("div", { css: modalHeaderHeaderStyles, children: header2 }) : null,
+                onRequestClose ? /* @__PURE__ */ jsx102(
                   Button,
                   {
                     type: "button",
@@ -18731,15 +18758,16 @@ var Modal = React20.forwardRef(
                     "data-testid": "close-dialog",
                     children: /* @__PURE__ */ jsx102(Icon, { icon: CgClose4, iconColor: "currentColor", size: 24 })
                   }
-                )
-              ] }),
+                ) : null
+              ] }) : null,
               /* @__PURE__ */ jsx102(
                 "div",
                 {
                   css: [
                     modalContentStyles,
-                    !withoutContentPadding ? null : { padding: 0 },
-                    !withoutContentBackground ? null : { background: "transparent" }
+                    withoutContentPadding ? { padding: 0 } : null,
+                    withoutContentBackground ? { background: "transparent" } : null,
+                    disableBodyScroll ? { overflow: "visible" } : null
                   ],
                   children
                 }
@@ -18771,9 +18799,9 @@ var ModalDialog = forwardRef16(
         withoutContentPadding: true,
         css: modalDialogInnerStyles,
         width: "",
-        children: /* @__PURE__ */ jsxs68(VerticalRhythm, { css: modalDialogWrapper, children: [
+        children: /* @__PURE__ */ jsxs68(VerticalRhythm, { css: modalDialogWrapper(Boolean(onRequestClose)), children: [
           /* @__PURE__ */ jsx103("div", { css: modalHeaderStyles, children: header2 }),
-          /* @__PURE__ */ jsx103("div", { children }),
+          /* @__PURE__ */ jsx103("div", { css: { flex: 1 }, children }),
           /* @__PURE__ */ jsx103(HorizontalRhythm, { children: buttonGroup })
         ] })
       }
@@ -20151,7 +20179,7 @@ var ParameterImageInner = forwardRef19((props, ref) => {
         type: "text",
         id,
         ref,
-        "aria-label": hiddenLabel ? label : void 0,
+        "aria-label": hiddenLabel && typeof label === "string" ? label : void 0,
         autoComplete: "off",
         ...props
       }
@@ -20176,7 +20204,7 @@ var ParameterInputInner = forwardRef20(
         css: input3,
         id,
         type: props.type || "text",
-        "aria-label": hiddenLabel ? label : void 0,
+        "aria-label": hiddenLabel && typeof label === "string" ? label : void 0,
         autoComplete: "off",
         ref,
         ...props
@@ -20197,7 +20225,7 @@ var ParameterLink = forwardRef21(
         "data-testid": "link-parameter-editor",
         ...shellProps,
         label: innerProps.value ? shellProps.label : "",
-        title: !innerProps.value ? shellProps.label : void 0,
+        title: !innerProps.value && typeof shellProps.label === "string" ? shellProps.label : void 0,
         children: /* @__PURE__ */ jsx126(
           ParameterLinkInner,
           {
@@ -20225,7 +20253,7 @@ var ParameterLinkInner = forwardRef21(
           readOnly: Boolean(props.value),
           id,
           ref,
-          "aria-label": hiddenLabel ? label : void 0,
+          "aria-label": hiddenLabel && typeof label === "string" ? label : void 0,
           ...props
         }
       ),
@@ -20275,7 +20303,7 @@ var ParameterMultiSelectInner = (props) => {
       isMulti: true,
       isClearable: (_a = props.isClearable) != null ? _a : false,
       id,
-      "aria-label": label,
+      "aria-label": typeof label === "string" ? label : void 0,
       classNamePrefix: "parameter-multi-select-combobox",
       styles: {
         menuPortal: (base) => ({
@@ -23230,7 +23258,7 @@ var ParameterSelectInner = forwardRef23(
       {
         css: [input3, selectInput],
         id,
-        "aria-label": hiddenLabel ? label : void 0,
+        "aria-label": hiddenLabel && typeof label === "string" ? label : void 0,
         ref,
         ...props,
         children: [
@@ -23260,7 +23288,7 @@ var ParameterTextareaInner = forwardRef24(({ ...props }, ref) => {
       css: [input3, textarea2],
       id,
       ref,
-      "aria-label": hiddenLabel ? label : void 0,
+      "aria-label": hiddenLabel && typeof label === "string" ? label : void 0,
       ...props
     }
   );
@@ -24211,16 +24239,15 @@ var StatusBullet = ({
     Deleted: StatusDeleted
   };
   const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
-  return /* @__PURE__ */ jsx144(
+  return /* @__PURE__ */ jsx144(Tooltip, { title: message != null ? message : status, children: /* @__PURE__ */ jsx144(
     "span",
     {
       role: "status",
       css: [StatusBulletContainer, currentStateStyles[status], statusSize],
-      title: message != null ? message : status,
       ...props,
       children: hideText ? null : message ? message : status
     }
-  );
+  ) });
 };
 export {
   AddButton,

package/dist/index.d.mts

@@ -21385,6 +21385,11 @@ type ChipProps = {
      * @default 'span'
      */
     as?: 'span' | 'button';
+    /**
+     * Whether the chip is visually disabled
+     * @default false
+     */
+    isDisabled?: boolean;
 } & React.HTMLAttributes<HTMLSpanElement>;
 /**
  * @description Chips are used in a variety of ways
@@ -21393,7 +21398,7 @@ type ChipProps = {
  * To represent a different object, as a reference
  * @example <Chip text="productId" theme="accent-light" chipAction={<DismissibleChipAction onDismiss={() => {...}}/>} />
  */
-declare const Chip: ({ icon, iconColor, text, size, theme, variant, chipAction, as, ...props }: ChipProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const Chip: ({ icon, iconColor, text, size, theme, variant, chipAction, isDisabled, as, ...props }: ChipProps) => _emotion_react_jsx_runtime.JSX.Element;
 type DismissibleChipActionProps = {
     onDismiss: () => void;
 } & HTMLAttributes<HTMLButtonElement>;
@@ -21922,7 +21927,7 @@ declare const InfoMessage: ({ message, testId, icon, ...props }: InfoMessageProp
 
 type InputProps = React$1.InputHTMLAttributes<HTMLInputElement> & {
     /** (optional) sets the label value */
-    label?: string;
+    label?: string | React$1.ReactNode;
     /** (optional) sets caption text value */
     caption?: string | JSX.Element;
     /** (optional) add an input icon to the input field */
@@ -21965,7 +21970,7 @@ type InputProps = React$1.InputHTMLAttributes<HTMLInputElement> & {
  */
 declare const Input: React$1.ForwardRefExoticComponent<React$1.InputHTMLAttributes<HTMLInputElement> & {
     /** (optional) sets the label value */
-    label?: string;
+    label?: string | React$1.ReactNode;
     /** (optional) sets caption text value */
     caption?: string | JSX.Element;
     /** (optional) add an input icon to the input field */
@@ -22758,6 +22763,9 @@ declare function MenuItemIcon({ icon }: {
  */
 declare function MenuItemEmptyIcon(): _emotion_react_jsx_runtime.JSX.Element;
 
+/**
+ * @deprecated this is deprecated and will be removed in the next major release. Use MenuGroup instead.
+ */
 declare const MenuItemHeading: ({ children }: {
     children: ReactNode;
 }) => _emotion_react_jsx_runtime.JSX.Element;
@@ -22826,8 +22834,11 @@ declare const MediaCard: ({ title, subtitle, infoPopover, cover, menuItems, side
 type ModalProps = {
     header?: React__default.ReactNode;
     children?: React__default.ReactNode;
-    /** Called when the close button is clicked, the Escape button is pressed, or when the modal's backdrop is clicked  */
-    onRequestClose: () => void;
+    /**
+     * Called when the close button is clicked, the Escape button is pressed, or when the modal's backdrop is clicked.
+     * If undefined is passed, the modal will not be closable by the user and the close button will not be rendered.
+     */
+    onRequestClose: (() => void) | undefined;
     /** The size sets the modal width to one of three options sm = 400px, md = 600px and lg = 800px
      * if a width attribute is used the size will be overridden by the width attribute
      * @default 'lg'
@@ -22847,6 +22858,12 @@ type ModalProps = {
     withoutContentBackground?: boolean;
     /** Places buttons at the bottom of the modal */
     buttonGroup?: ReactNode;
+    /**
+     * Disables scrolling of the modal body if the content exceeds the height.
+     * Can be required for modals that have comboboxes where the menu items are expected
+     * to overflow the bounds of the modal.
+     */
+    disableBodyScroll?: boolean;
 } & React__default.HTMLProps<HTMLDialogElement>;
 /**
  * A modal component to open a dialog with a backdrop that covers the whole page.
@@ -22992,7 +23009,7 @@ declare function Pagination({ limit, offset, total, onPageChange, }: {
 
 type CommonParameterProps = {
     /** sets the label value */
-    label: string;
+    label: string | ReactNode;
     /** (optional): allows user to pass a component before the label */
     labelLeadingIcon?: ReactNode;
     /** (optional): allows user to pass a component after the label */
@@ -23047,7 +23064,7 @@ type CommonParameterSelectProps = {
 declare const ParameterShellContext: React$1.Context<CommonParameterProps>;
 declare const useParameterShell: () => {
     id: string;
-    label: string;
+    label: React$1.ReactNode;
     hiddenLabel: boolean | undefined;
     errorMessage: string | undefined;
     handleManuallySetErrorMessage: ((message: string | undefined) => void) | undefined;
@@ -23401,7 +23418,7 @@ declare const ParameterSelectInner: React$1.ForwardRefExoticComponent<Omit<Param
 declare const extractParameterProps: <T>(props: T & CommonParameterInputProps) => {
     shellProps: {
         id: string;
-        label: string;
+        label: ReactNode;
         caption: string | undefined;
         captionTestId: string | undefined;
         errorMessage: string | undefined;

package/dist/index.d.ts

@@ -21385,6 +21385,11 @@ type ChipProps = {
      * @default 'span'
      */
     as?: 'span' | 'button';
+    /**
+     * Whether the chip is visually disabled
+     * @default false
+     */
+    isDisabled?: boolean;
 } & React.HTMLAttributes<HTMLSpanElement>;
 /**
  * @description Chips are used in a variety of ways
@@ -21393,7 +21398,7 @@ type ChipProps = {
  * To represent a different object, as a reference
  * @example <Chip text="productId" theme="accent-light" chipAction={<DismissibleChipAction onDismiss={() => {...}}/>} />
  */
-declare const Chip: ({ icon, iconColor, text, size, theme, variant, chipAction, as, ...props }: ChipProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const Chip: ({ icon, iconColor, text, size, theme, variant, chipAction, isDisabled, as, ...props }: ChipProps) => _emotion_react_jsx_runtime.JSX.Element;
 type DismissibleChipActionProps = {
     onDismiss: () => void;
 } & HTMLAttributes<HTMLButtonElement>;
@@ -21922,7 +21927,7 @@ declare const InfoMessage: ({ message, testId, icon, ...props }: InfoMessageProp
 
 type InputProps = React$1.InputHTMLAttributes<HTMLInputElement> & {
     /** (optional) sets the label value */
-    label?: string;
+    label?: string | React$1.ReactNode;
     /** (optional) sets caption text value */
     caption?: string | JSX.Element;
     /** (optional) add an input icon to the input field */
@@ -21965,7 +21970,7 @@ type InputProps = React$1.InputHTMLAttributes<HTMLInputElement> & {
  */
 declare const Input: React$1.ForwardRefExoticComponent<React$1.InputHTMLAttributes<HTMLInputElement> & {
     /** (optional) sets the label value */
-    label?: string;
+    label?: string | React$1.ReactNode;
     /** (optional) sets caption text value */
     caption?: string | JSX.Element;
     /** (optional) add an input icon to the input field */
@@ -22758,6 +22763,9 @@ declare function MenuItemIcon({ icon }: {
  */
 declare function MenuItemEmptyIcon(): _emotion_react_jsx_runtime.JSX.Element;
 
+/**
+ * @deprecated this is deprecated and will be removed in the next major release. Use MenuGroup instead.
+ */
 declare const MenuItemHeading: ({ children }: {
     children: ReactNode;
 }) => _emotion_react_jsx_runtime.JSX.Element;
@@ -22826,8 +22834,11 @@ declare const MediaCard: ({ title, subtitle, infoPopover, cover, menuItems, side
 type ModalProps = {
     header?: React__default.ReactNode;
     children?: React__default.ReactNode;
-    /** Called when the close button is clicked, the Escape button is pressed, or when the modal's backdrop is clicked  */
-    onRequestClose: () => void;
+    /**
+     * Called when the close button is clicked, the Escape button is pressed, or when the modal's backdrop is clicked.
+     * If undefined is passed, the modal will not be closable by the user and the close button will not be rendered.
+     */
+    onRequestClose: (() => void) | undefined;
     /** The size sets the modal width to one of three options sm = 400px, md = 600px and lg = 800px
      * if a width attribute is used the size will be overridden by the width attribute
      * @default 'lg'
@@ -22847,6 +22858,12 @@ type ModalProps = {
     withoutContentBackground?: boolean;
     /** Places buttons at the bottom of the modal */
     buttonGroup?: ReactNode;
+    /**
+     * Disables scrolling of the modal body if the content exceeds the height.
+     * Can be required for modals that have comboboxes where the menu items are expected
+     * to overflow the bounds of the modal.
+     */
+    disableBodyScroll?: boolean;
 } & React__default.HTMLProps<HTMLDialogElement>;
 /**
  * A modal component to open a dialog with a backdrop that covers the whole page.
@@ -22992,7 +23009,7 @@ declare function Pagination({ limit, offset, total, onPageChange, }: {
 
 type CommonParameterProps = {
     /** sets the label value */
-    label: string;
+    label: string | ReactNode;
     /** (optional): allows user to pass a component before the label */
     labelLeadingIcon?: ReactNode;
     /** (optional): allows user to pass a component after the label */
@@ -23047,7 +23064,7 @@ type CommonParameterSelectProps = {
 declare const ParameterShellContext: React$1.Context<CommonParameterProps>;
 declare const useParameterShell: () => {
     id: string;
-    label: string;
+    label: React$1.ReactNode;
     hiddenLabel: boolean | undefined;
     errorMessage: string | undefined;
     handleManuallySetErrorMessage: ((message: string | undefined) => void) | undefined;
@@ -23401,7 +23418,7 @@ declare const ParameterSelectInner: React$1.ForwardRefExoticComponent<Omit<Param
 declare const extractParameterProps: <T>(props: T & CommonParameterInputProps) => {
     shellProps: {
         id: string;
-        label: string;
+        label: ReactNode;
         caption: string | undefined;
         captionTestId: string | undefined;
         errorMessage: string | undefined;

package/dist/index.js

@@ -14764,7 +14764,7 @@ var Input = React10.forwardRef(
                       errorMessage ? inputError : void 0,
                       icon ? inputWithIcon : ""
                     ],
-                    "aria-label": !showLabel ? label : void 0,
+                    "aria-label": showLabel || typeof label !== "string" ? void 0 : label,
                     className: typeof classNameControl === "string" ? classNameControl : "",
                     ...props,
                     ref
@@ -16917,6 +16917,9 @@ var ChipOutlined = import_react70.css`
     border-color: var(--outline-color);
   }
 `;
+var ChipDisabled = import_react70.css`
+  opacity: var(--opacity-50);
+`;
 
 // src/components/Chip/Chip.tsx
 var import_jsx_runtime62 = require("@emotion/react/jsx-runtime");
@@ -16936,6 +16939,7 @@ var Chip = ({
   theme = "accent-light",
   variant = "solid",
   chipAction,
+  isDisabled = false,
   as = "span",
   ...props
 }) => {
@@ -16952,7 +16956,8 @@ var Chip = ({
         ChipContainer,
         chipSize[size],
         chipTheme[theme],
-        variant === "outlined" ? ChipOutlined : void 0
+        variant === "outlined" ? ChipOutlined : void 0,
+        isDisabled ? ChipDisabled : void 0
       ],
       ...props,
       children: [
@@ -20489,8 +20494,9 @@ var modalContentStyles = import_react118.css`
   border-radius: var(--rounded-sm);
   ${scrollbarStyles}
 `;
-var modalDialogWrapper = import_react118.css`
-  padding: 0 var(--spacing-lg) var(--spacing-md);
+var modalDialogWrapper = (hasCloseButton) => import_react118.css`
+  height: 100%;
+  padding: ${hasCloseButton ? 0 : "var(--spacing-md)"} var(--spacing-lg) var(--spacing-md);
 `;
 var modalDialogInnerStyles = import_react118.css`
   // we need to override the gap of the modalInnerStyles when using a modal dialog
@@ -20514,8 +20520,10 @@ var Modal = import_react120.default.forwardRef(
     modalSize = "lg",
     withoutContentPadding = false,
     withoutContentBackground = false,
+    disableBodyScroll = false,
     ...modalProps
   }, ref) => {
+    const mouseDownInsideModal = (0, import_react120.useRef)(false);
     const dialogRef = (0, import_react120.useRef)(null);
     const size = {
       sm: modalSizeSmall,
@@ -20524,7 +20532,7 @@ var Modal = import_react120.default.forwardRef(
     };
     useShortcut({
       handler: () => {
-        onRequestClose();
+        onRequestClose == null ? void 0 : onRequestClose();
       },
       shortcut: "escape"
     });
@@ -20557,9 +20565,25 @@ var Modal = import_react120.default.forwardRef(
           }
         },
         css: [modalStyles, !width ? size[modalSize] : void 0],
-        style: { width, height: height === "auto" ? "min-content" : height },
+        style: {
+          width,
+          height: height === "auto" ? "min-content" : height,
+          // allows menus rendered in the PortalContext to overflow the modal contents
+          // (internal scrolling of contents is handled on a child element)
+          overflow: "visible"
+        },
         "data-testid": "side-dialog",
-        onClick: onRequestClose,
+        onClick: () => {
+          if (mouseDownInsideModal.current) {
+            return;
+          }
+          onRequestClose == null ? void 0 : onRequestClose();
+        },
+        onMouseUp: () => {
+          setTimeout(() => {
+            mouseDownInsideModal.current = false;
+          });
+        },
         onCancel: (e) => {
           e.preventDefault();
         },
@@ -20569,10 +20593,13 @@ var Modal = import_react120.default.forwardRef(
           {
             css: [modalInnerStyles, { height: height === "auto" ? "auto" : "100%" }],
             onClick: (e) => e.stopPropagation(),
+            onMouseDown: () => {
+              mouseDownInsideModal.current = true;
+            },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { css: modalHeaderStyles, children: [
-                !header2 ? null : /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { css: modalHeaderHeaderStyles, children: header2 }),
-                /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
+              header2 || onRequestClose ? /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)("div", { css: modalHeaderStyles, children: [
+                header2 ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)("div", { css: modalHeaderHeaderStyles, children: header2 }) : null,
+                onRequestClose ? /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
                   Button,
                   {
                     type: "button",
@@ -20583,15 +20610,16 @@ var Modal = import_react120.default.forwardRef(
                     "data-testid": "close-dialog",
                     children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(Icon, { icon: import_CgClose5.CgClose, iconColor: "currentColor", size: 24 })
                   }
-                )
-              ] }),
+                ) : null
+              ] }) : null,
               /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(
                 "div",
                 {
                   css: [
                     modalContentStyles,
-                    !withoutContentPadding ? null : { padding: 0 },
-                    !withoutContentBackground ? null : { background: "transparent" }
+                    withoutContentPadding ? { padding: 0 } : null,
+                    withoutContentBackground ? { background: "transparent" } : null,
+                    disableBodyScroll ? { overflow: "visible" } : null
                   ],
                   children
                 }
@@ -20624,9 +20652,9 @@ var ModalDialog = (0, import_react121.forwardRef)(
         withoutContentPadding: true,
         css: modalDialogInnerStyles,
         width: "",
-        children: /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(VerticalRhythm, { css: modalDialogWrapper, children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(VerticalRhythm, { css: modalDialogWrapper(Boolean(onRequestClose)), children: [
           /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { css: modalHeaderStyles, children: header2 }),
-          /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { children }),
+          /* @__PURE__ */ (0, import_jsx_runtime103.jsx)("div", { css: { flex: 1 }, children }),
           /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(HorizontalRhythm, { children: buttonGroup })
         ] })
       }
@@ -22058,7 +22086,7 @@ var ParameterImageInner = (0, import_react142.forwardRef)((props, ref) => {
         type: "text",
         id,
         ref,
-        "aria-label": hiddenLabel ? label : void 0,
+        "aria-label": hiddenLabel && typeof label === "string" ? label : void 0,
         autoComplete: "off",
         ...props
       }
@@ -22084,7 +22112,7 @@ var ParameterInputInner = (0, import_react143.forwardRef)(
         css: input3,
         id,
         type: props.type || "text",
-        "aria-label": hiddenLabel ? label : void 0,
+        "aria-label": hiddenLabel && typeof label === "string" ? label : void 0,
         autoComplete: "off",
         ref,
         ...props
@@ -22106,7 +22134,7 @@ var ParameterLink = (0, import_react144.forwardRef)(
         "data-testid": "link-parameter-editor",
         ...shellProps,
         label: innerProps.value ? shellProps.label : "",
-        title: !innerProps.value ? shellProps.label : void 0,
+        title: !innerProps.value && typeof shellProps.label === "string" ? shellProps.label : void 0,
         children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
           ParameterLinkInner,
           {
@@ -22134,7 +22162,7 @@ var ParameterLinkInner = (0, import_react144.forwardRef)(
           readOnly: Boolean(props.value),
           id,
           ref,
-          "aria-label": hiddenLabel ? label : void 0,
+          "aria-label": hiddenLabel && typeof label === "string" ? label : void 0,
           ...props
         }
       ),
@@ -22185,7 +22213,7 @@ var ParameterMultiSelectInner = (props) => {
       isMulti: true,
       isClearable: (_a = props.isClearable) != null ? _a : false,
       id,
-      "aria-label": label,
+      "aria-label": typeof label === "string" ? label : void 0,
       classNamePrefix: "parameter-multi-select-combobox",
       styles: {
         menuPortal: (base) => ({
@@ -25073,7 +25101,7 @@ var ParameterSelectInner = (0, import_react160.forwardRef)(
       {
         css: [input3, selectInput],
         id,
-        "aria-label": hiddenLabel ? label : void 0,
+        "aria-label": hiddenLabel && typeof label === "string" ? label : void 0,
         ref,
         ...props,
         children: [
@@ -25104,7 +25132,7 @@ var ParameterTextareaInner = (0, import_react161.forwardRef)(({ ...props }, ref)
       css: [input3, textarea2],
       id,
       ref,
-      "aria-label": hiddenLabel ? label : void 0,
+      "aria-label": hiddenLabel && typeof label === "string" ? label : void 0,
       ...props
     }
   );
@@ -26072,16 +26100,15 @@ var StatusBullet = ({
     Deleted: StatusDeleted
   };
   const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
-  return /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(Tooltip, { title: message != null ? message : status, children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
     "span",
     {
       role: "status",
       css: [StatusBulletContainer, currentStateStyles[status], statusSize],
-      title: message != null ? message : status,
       ...props,
       children: hideText ? null : message ? message : status
     }
-  );
+  ) });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "19.195.1-alpha.3+0a17ec705c",
+  "version": "19.196.1-alpha.2+b5b5fd8fb8",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -26,8 +26,8 @@
     "@storybook/theming": "^8.3.3",
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
-    "@uniformdev/canvas": "^19.195.1-alpha.3+0a17ec705c",
-    "@uniformdev/richtext": "^19.195.1-alpha.3+0a17ec705c",
+    "@uniformdev/canvas": "^19.196.1-alpha.2+b5b5fd8fb8",
+    "@uniformdev/richtext": "^19.196.1-alpha.2+b5b5fd8fb8",
     "autoprefixer": "10.4.16",
     "hygen": "6.2.11",
     "postcss": "8.4.38",
@@ -79,5 +79,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0a17ec705cf1f0ecd6a944fd1606a857c491579b"
+  "gitHead": "b5b5fd8fb8c08700c600b0761efd6723cee2413f"
 }