@uniformdev/design-system 19.78.1 → 19.79.1-alpha.11

package/dist/esm/index.js

@@ -27,7 +27,7 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
       {
         dangerouslySetInnerHTML: {
           __html: `
-        :root, :host {
+        :root, :host, ::backdrop {
           --brand-primary-1: #438fd5; /* bright blue */
           --brand-primary-2: #f4220b; /* red */
           --brand-primary-3: #83c6e1; /* slate blue */
@@ -91,7 +91,7 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
 
           /* off brand */
           --input-border: rgba(31, 43, 52, 0.5);
-          --ring: 0 0 0 0 var(--white), 0 0 0 3px var(--brand-primary-3);
+          --ring: 0 0 0 0 var(--white), 0 0 0 2px var(--brand-primary-3);
           --ring-inset: inset 0 0 0 0 var(--white), inset 0 0 0 3px var(--brand-primary-3);
 
           /* site settings */
@@ -13103,6 +13103,13 @@ var detailsContent = css41`
   animation: ${fadeInRtl} var(--duration-fast) var(--timing-ease-out) forwards;
   will-change: height;
 `;
+var detailsContentIndented = css41`
+  margin-left: calc(1.25rem / 2);
+  border-left: 1px solid var(--gray-300);
+  padding-top: calc(var(--spacing-md) / 2);
+  padding-left: var(--spacing-base);
+  padding-bottom: var(--spacing-sm);
+`;
 var summary = css41`
   align-items: center;
   cursor: pointer;
@@ -13117,6 +13124,9 @@ var summary = css41`
     display: none;
   }
 `;
+var summaryCompact = css41`
+  padding: 0;
+`;
 var summaryIcon = css41`
   transition: rotate var(--duration-fast) var(--timing-ease-out);
   rotate: -90deg;
@@ -13132,6 +13142,8 @@ var Details = ({
   children,
   isOpenByDefault = false,
   isOpen,
+  isIndented = false,
+  isCompact = false,
   onChange,
   ...props
 }) => {
@@ -13153,7 +13165,7 @@ var Details = ({
       ref: detailsRef,
       ...props,
       children: [
-        /* @__PURE__ */ jsxs25("summary", { "data-testid": "summary", css: summary, children: [
+        /* @__PURE__ */ jsxs25("summary", { "data-testid": "summary", css: [summary, isCompact ? summaryCompact : null], children: [
           /* @__PURE__ */ jsx42(
             Icon,
             {
@@ -13165,7 +13177,14 @@ var Details = ({
           ),
           summary2
         ] }),
-        memoizedIsOpen ? /* @__PURE__ */ jsx42("div", { "data-testid": "details-content", css: detailsContent, children }) : null
+        memoizedIsOpen ? /* @__PURE__ */ jsx42(
+          "div",
+          {
+            "data-testid": "details-content",
+            css: [detailsContent, isIndented ? detailsContentIndented : null],
+            children
+          }
+        ) : null
       ]
     }
   );
@@ -13420,10 +13439,12 @@ var useCurrentDrawer = () => {
 };
 var Drawer = React13.forwardRef(
   ({ minWidth, maxWidth, position, leftAligned, ...drawerProps }, ref) => {
+    var _a;
     const { stackId: inheritedStackId } = useCurrentDrawer();
     const { drawerTakeoverStackId } = useDrawer();
     const drawerRendererProps = { width: drawerProps.width, minWidth, maxWidth, position, leftAligned };
-    return drawerTakeoverStackId ? /* @__PURE__ */ jsx44(DrawerInner, { ref, ...drawerProps, stackId: drawerTakeoverStackId }) : drawerProps.stackId ? /* @__PURE__ */ jsx44(DrawerInner, { ref, ...drawerProps }) : inheritedStackId ? /* @__PURE__ */ jsx44(DrawerInner, { ref, ...drawerProps, stackId: inheritedStackId }) : /* @__PURE__ */ jsxs26(DrawerProvider, { children: [
+    const resolvedStickyStackIdRef = useRef3((_a = drawerTakeoverStackId != null ? drawerTakeoverStackId : drawerProps.stackId) != null ? _a : inheritedStackId);
+    return resolvedStickyStackIdRef.current ? /* @__PURE__ */ jsx44(DrawerInner, { ref, ...drawerProps, stackId: resolvedStickyStackIdRef.current }) : /* @__PURE__ */ jsxs26(DrawerProvider, { children: [
       /* @__PURE__ */ jsx44(DrawerInner, { ref, ...drawerProps }),
       /* @__PURE__ */ jsx44(DrawerRenderer, { stackId: defaultSackId, ...drawerRendererProps })
     ] });
@@ -13835,19 +13856,29 @@ import { MdWarning } from "@react-icons/all-files/md/MdWarning";
 
 // src/components/Input/styles/ErrorMessage.styles.ts
 import { css as css47 } from "@emotion/react";
-var ErrorText = css47`
+var errorMessageStyles = css47`
   align-items: center;
   color: var(--brand-secondary-5);
   display: flex;
   gap: var(--spacing-sm);
 `;
+var errorMessageTextStyles = css47`
+  /* We hide the text at width 5rem or below */
+  max-width: max(0px, calc((100% - 5rem) * 9999));
+  overflow: hidden;
+`;
+var errorMessageTextTruncatedStyles = css47`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
 
 // src/components/Input/ErrorMessage.tsx
 import { jsx as jsx51, jsxs as jsxs30 } from "@emotion/react/jsx-runtime";
-var ErrorMessage = ({ message, testId, ...otherProps }) => {
-  return message ? /* @__PURE__ */ jsxs30("span", { role: "alert", css: ErrorText, "data-testid": testId, ...otherProps, children: [
+var ErrorMessage = ({ message, testId, truncated = false, ...otherProps }) => {
+  return message ? /* @__PURE__ */ jsxs30("span", { role: "alert", css: errorMessageStyles, "data-testid": testId, ...otherProps, title: message, children: [
     /* @__PURE__ */ jsx51("span", { children: /* @__PURE__ */ jsx51(Icon, { icon: MdWarning, size: "1rem", iconColor: "currentColor" }) }),
-    message
+    /* @__PURE__ */ jsx51("span", { css: [errorMessageTextStyles, truncated ? errorMessageTextTruncatedStyles : null], children: message })
   ] }) : null;
 };
 
@@ -14581,6 +14612,15 @@ var imgLoaded = css54`
 var brokenImage = css54`
   height: 160px;
 `;
+var brokenImageMessage = css54`
+  position: absolute;
+  bottom: var(--spacing-xs);
+  left: var(--spacing-xs);
+  width: 100%;
+  justify-content: center;
+  padding-inline: var(--spacing-xs);
+  font-size: var(--fs-sm);
+`;
 var variantFillImageWrapper = css54`
   display: flex;
   justify-content: center;
@@ -14589,6 +14629,7 @@ var variantFillImageWrapper = css54`
 `;
 var variantFillImageImg = css54`
   height: inherit;
+  width: inherit;
 `;
 
 // src/components/Image/ImageBroken.tsx
@@ -14627,7 +14668,7 @@ var ImageBroken = ({ width, height, ...props }) => {
 };
 
 // src/components/Image/Image.tsx
-import { Fragment as Fragment10, jsx as jsx66, jsxs as jsxs41 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs41 } from "@emotion/react/jsx-runtime";
 var MIN_LOADING_MS = 100;
 function Image({
   alt,
@@ -14706,18 +14747,26 @@ function Image({
             onError: handleErrorEvent
           }
         ) : null,
-        src && loadErrorText ? /* @__PURE__ */ jsxs41(Fragment10, { children: [
-          /* @__PURE__ */ jsx66(
-            ImageBroken,
-            {
-              css: [brokenImage, img, imgLoaded],
-              width,
-              height,
-              "data-testid": "broken-image"
-            }
-          ),
-          /* @__PURE__ */ jsx66(ErrorMessage, { message: loadErrorText })
-        ] }) : null
+        src && loadErrorText ? /* @__PURE__ */ jsxs41(
+          "span",
+          {
+            style: {
+              display: "inline-flex",
+              position: "relative",
+              ...variant === "fill-container" ? {} : { width, height }
+            },
+            children: [
+              /* @__PURE__ */ jsx66(
+                ImageBroken,
+                {
+                  css: [brokenImage, img, imgLoaded],
+                  "data-testid": "broken-image"
+                }
+              ),
+              /* @__PURE__ */ jsx66(ErrorMessage, { message: loadErrorText, css: brokenImageMessage, truncated: true })
+            ]
+          }
+        ) : null
       ]
     }
   );
@@ -15097,10 +15146,10 @@ var IntegrationLoadingFrame = css58`
 `;
 
 // src/components/Tiles/IntegrationLoadingTile.tsx
-import { Fragment as Fragment11, jsx as jsx72, jsxs as jsxs46 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx72, jsxs as jsxs46 } from "@emotion/react/jsx-runtime";
 var IntegrationLoadingTile = ({ count = 1 }) => {
   const componentCount = Array.from(Array(count).keys());
-  return /* @__PURE__ */ jsx72(Fragment11, { children: componentCount.map((i) => /* @__PURE__ */ jsxs46("div", { css: IntegrationLoadingTileContainer, children: [
+  return /* @__PURE__ */ jsx72(Fragment10, { children: componentCount.map((i) => /* @__PURE__ */ jsxs46("div", { css: IntegrationLoadingTileContainer, children: [
     /* @__PURE__ */ jsx72("div", { css: [IntegrationLoadingTileImg, IntegrationLoadingFrame], role: "presentation" }),
     /* @__PURE__ */ jsx72("div", { css: [IntegrationLoadingTileText, IntegrationLoadingFrame] })
   ] }, i)) });
@@ -15342,7 +15391,7 @@ var IntegrationModalHeaderContentWrapper = css63`
 `;
 
 // src/components/IntegrationModalHeader/IntegrationModalHeader.tsx
-import { Fragment as Fragment12, jsx as jsx78, jsxs as jsxs49 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx78, jsxs as jsxs49 } from "@emotion/react/jsx-runtime";
 var HexModalBackground = ({ ...props }) => {
   return /* @__PURE__ */ jsxs49(
     "svg",
@@ -15383,7 +15432,7 @@ var HexModalBackground = ({ ...props }) => {
   );
 };
 var IntegrationModalHeader = ({ icon, name, menu, children }) => {
-  return /* @__PURE__ */ jsxs49(Fragment12, { children: [
+  return /* @__PURE__ */ jsxs49(Fragment11, { children: [
     /* @__PURE__ */ jsx78(HexModalBackground, { css: IntegrationModalHeaderSVGBackground, role: "presentation" }),
     /* @__PURE__ */ jsx78("div", { css: IntegrationModalHeaderGroup, children: /* @__PURE__ */ jsxs49("div", { css: IntegrationModalHeaderTitleGroup, children: [
       icon ? /* @__PURE__ */ jsx78(IntegrationModalIcon, { icon, name: name || "" }) : null,
@@ -15969,7 +16018,7 @@ var Popover = css71`
 `;
 
 // src/components/Popover/Popover.tsx
-import { Fragment as Fragment13, jsx as jsx87, jsxs as jsxs57 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx87, jsxs as jsxs57 } from "@emotion/react/jsx-runtime";
 var Popover2 = ({
   iconColor = "action",
   icon = "info",
@@ -15983,7 +16032,7 @@ var Popover2 = ({
   ...otherProps
 }) => {
   const popover = usePopoverState({ placement });
-  return /* @__PURE__ */ jsxs57(Fragment13, { children: [
+  return /* @__PURE__ */ jsxs57(Fragment12, { children: [
     /* @__PURE__ */ jsx87(
       PopoverDisclosure,
       {
@@ -15991,7 +16040,7 @@ var Popover2 = ({
         css: [PopoverBtn, trigger ? void 0 : PopoverDefaulterTriggerBtn],
         title: buttonText,
         "data-testid": testId,
-        children: trigger ? trigger : /* @__PURE__ */ jsxs57(Fragment13, { children: [
+        children: trigger ? trigger : /* @__PURE__ */ jsxs57(Fragment12, { children: [
           /* @__PURE__ */ jsx87(Icon, { icon, iconColor, size: iconSize }),
           /* @__PURE__ */ jsx87("span", { hidden: true, children: buttonText })
         ] })
@@ -16014,9 +16063,11 @@ var cardBase = css72`
   min-height: unset;
   outline: none;
   cursor: pointer;
+  transition: border-color var(--duration-xfast) ease-in-out;
 
   &:hover {
     --mediacard-title-color: var(--brand-secondary-1);
+    border-color: var(--primary-action-hover);
   }
 `;
 var coverWrapper = css72`
@@ -16147,7 +16198,7 @@ var MediaCard = ({
 
 // src/components/Modal/Modal.tsx
 import { CgClose as CgClose5 } from "@react-icons/all-files/cg/CgClose";
-import React19 from "react";
+import React19, { useEffect as useEffect10, useRef as useRef6 } from "react";
 
 // src/components/Modal/Modal.styles.ts
 import { css as css73 } from "@emotion/react";
@@ -16159,27 +16210,33 @@ var modalWrapperStyles = css73`
   justify-content: center;
   z-index: var(--z-drawer);
 `;
-var modalBackdropStyles = css73`
-  position: absolute;
-  inset: 0;
-  background-color: var(--brand-secondary-1);
-  opacity: 0.4;
-`;
 var modalStyles = css73`
   position: relative;
+  max-width: calc(100% - var(--spacing-base) * 2);
+  max-height: calc(100% - var(--spacing-base) * 2);
+  padding: 0;
+  background-color: transparent;
+  z-index: 1;
+
+  &::backdrop {
+    background-color: var(--brand-secondary-1);
+    opacity: 0.4;
+  }
+`;
+var modalInnerStyles = css73`
+  position: relative;
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: stretch;
-  max-width: calc(100% - var(--spacing-base) * 2);
-  max-height: calc(100% - var(--spacing-base) * 2);
   gap: var(--spacing-base);
   background: var(--gray-50);
+  color: unset;
+  padding: var(--spacing-base);
   box-shadow: var(--elevation-500);
   border-radius: var(--rounded-base);
   border: 1px solid var(--gray-300);
-  padding: var(--spacing-base);
-  color: unset;
-  z-index: 1;
 `;
 var modalHeaderStyles = css73`
   display: flex;
@@ -16188,6 +16245,9 @@ var modalHeaderStyles = css73`
   font-size: var(--fs-md);
   line-height: 1.2;
 `;
+var modalHeaderHeaderStyles = css73`
+  max-width: calc(100% - 3rem);
+`;
 var modalCloseButtonStyles = css73`
   display: block;
   padding: 0;
@@ -16215,47 +16275,63 @@ var Modal = React19.forwardRef(
     onRequestClose,
     width = defaultModalWidth,
     height = defaultModalHeight,
-    wrapperClassName,
     withoutContentPadding = false,
     buttonGroup,
     ...modalProps
   }, ref) => {
+    const dialogRef = useRef6(null);
     useShortcut({
       handler: onRequestClose,
       shortcut: "escape"
     });
-    return /* @__PURE__ */ jsxs59("div", { css: [modalWrapperStyles, wrapperClassName], children: [
-      /* @__PURE__ */ jsx89("div", { onClick: onRequestClose, css: modalBackdropStyles }),
-      /* @__PURE__ */ jsxs59(
-        "dialog",
-        {
-          ref,
-          css: modalStyles,
-          style: { width, height },
-          "data-testid": "side-dialog",
-          ...modalProps,
-          children: [
-            /* @__PURE__ */ jsxs59("div", { css: modalHeaderStyles, children: [
-              /* @__PURE__ */ jsx89("div", { children: header }),
-              /* @__PURE__ */ jsx89(
-                Button,
-                {
-                  type: "button",
-                  onClick: onRequestClose,
-                  css: modalCloseButtonStyles,
-                  title: "Close dialog",
-                  buttonType: "ghost",
-                  "data-testid": "close-dialog",
-                  children: /* @__PURE__ */ jsx89(Icon, { icon: CgClose5, iconColor: "gray", size: 24 })
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx89("div", { css: [modalContentStyles, !withoutContentPadding ? null : { padding: 0 }], children }),
-            buttonGroup ? /* @__PURE__ */ jsx89(HorizontalRhythm, { children: buttonGroup }) : null
-          ]
-        }
-      )
-    ] });
+    useEffect10(() => {
+      var _a;
+      (_a = dialogRef.current) == null ? void 0 : _a.showModal();
+      return () => {
+        var _a2;
+        return (_a2 = dialogRef.current) == null ? void 0 : _a2.close();
+      };
+    }, []);
+    return /* @__PURE__ */ jsx89(
+      "dialog",
+      {
+        ref: (element) => {
+          dialogRef.current = element;
+          if (!ref) {
+            return;
+          }
+          if (typeof ref === "function") {
+            ref(element);
+          } else {
+            ref.current = element;
+          }
+        },
+        css: modalStyles,
+        style: { width, height: height === "auto" ? "min-content" : height },
+        "data-testid": "side-dialog",
+        onClick: onRequestClose,
+        ...modalProps,
+        children: /* @__PURE__ */ jsxs59("div", { css: modalInnerStyles, onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ jsxs59("div", { css: modalHeaderStyles, children: [
+            /* @__PURE__ */ jsx89("div", { css: modalHeaderHeaderStyles, children: header }),
+            /* @__PURE__ */ jsx89(
+              Button,
+              {
+                type: "button",
+                onClick: onRequestClose,
+                css: modalCloseButtonStyles,
+                title: "Close dialog",
+                buttonType: "ghost",
+                "data-testid": "close-dialog",
+                children: /* @__PURE__ */ jsx89(Icon, { icon: CgClose5, iconColor: "gray", size: 24 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx89("div", { css: [modalContentStyles, !withoutContentPadding ? null : { padding: 0 }], children }),
+          buttonGroup ? /* @__PURE__ */ jsx89(HorizontalRhythm, { children: buttonGroup }) : null
+        ] })
+      }
+    );
   }
 );
 Modal.displayName = "Modal";
@@ -16820,7 +16896,7 @@ var previewModalImage = css79`
 `;
 
 // src/components/ParameterInputs/ParameterImagePreview.tsx
-import { Fragment as Fragment14, jsx as jsx95, jsxs as jsxs64 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx95, jsxs as jsxs64 } from "@emotion/react/jsx-runtime";
 function ParameterImagePreview({ imageSrc }) {
   const [showModal, setShowModal] = useState9(false);
   return imageSrc ? /* @__PURE__ */ jsxs64("div", { css: previewWrapper, children: [
@@ -16838,7 +16914,7 @@ function ParameterImagePreview({ imageSrc }) {
   ] }) : null;
 }
 var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
-  return open ? /* @__PURE__ */ jsx95(Fragment14, { children: createPortal2(
+  return open ? /* @__PURE__ */ jsx95(Fragment13, { children: createPortal2(
     /* @__PURE__ */ jsx95(
       Modal,
       {
@@ -16975,6 +17051,7 @@ var ParameterShell = ({
   onResetOverriddenValue,
   title: title2,
   children,
+  isParameterGroup = false,
   ...props
 }) => {
   const [manualErrorMessage, setManualErrorMessage] = useState10(void 0);
@@ -17018,7 +17095,7 @@ var ParameterShell = ({
             errorMessage: errorMessaging,
             handleManuallySetErrorMessage: (message) => setErrorMessage(message)
           },
-          children: /* @__PURE__ */ jsxs65(ParameterShellPlaceholder, { children: [
+          children: isParameterGroup ? /* @__PURE__ */ jsx98("div", { style: { flexGrow: 1 }, children }) : /* @__PURE__ */ jsxs65(ParameterShellPlaceholder, { children: [
             children,
             hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ jsx98(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
           ] })
@@ -17037,7 +17114,7 @@ var ParameterShellPlaceholder = ({ children }) => {
 var ParameterOverrideMarker = (props) => /* @__PURE__ */ jsx98(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ jsx98("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ jsx98("span", { hidden: true, children: "reset overridden value to default" }) }) });
 
 // src/components/ParameterInputs/ParameterImage.tsx
-import { Fragment as Fragment15, jsx as jsx99, jsxs as jsxs66 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx99, jsxs as jsxs66 } from "@emotion/react/jsx-runtime";
 var ParameterImage = forwardRef13(
   ({ children, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
@@ -17051,7 +17128,7 @@ var ParameterImageInner = forwardRef13((props, ref) => {
   const { value } = props;
   const { id, label, hiddenLabel, errorMessage } = useParameterShell();
   const deferredValue = useDeferredValue(value);
-  return /* @__PURE__ */ jsxs66(Fragment15, { children: [
+  return /* @__PURE__ */ jsxs66(Fragment14, { children: [
     /* @__PURE__ */ jsx99(
       "input",
       {
@@ -17166,7 +17243,7 @@ var ParameterLinkInner = forwardRef15(
 );
 
 // src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
-import { Fragment as Fragment16, jsx as jsx102, jsxs as jsxs68 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx102, jsxs as jsxs68 } from "@emotion/react/jsx-runtime";
 var ParameterNameAndPublicIdInput = ({
   id,
   onBlur,
@@ -17192,7 +17269,7 @@ var ParameterNameAndPublicIdInput = ({
     navigator.clipboard.writeText(values[publicIdFieldName]);
   };
   autoFocus == null ? void 0 : autoFocus();
-  return /* @__PURE__ */ jsxs68(Fragment16, { children: [
+  return /* @__PURE__ */ jsxs68(Fragment15, { children: [
     /* @__PURE__ */ jsx102(
       ParameterInput,
       {
@@ -17357,7 +17434,7 @@ var getLabelForElement = (type) => {
 // src/components/ParameterInputs/ParameterRichText.tsx
 import { deepEqual as deepEqual2 } from "fast-equals";
 import { ParagraphNode as ParagraphNode2 } from "lexical";
-import { useEffect as useEffect14, useRef as useRef7 } from "react";
+import { useEffect as useEffect15, useRef as useRef8 } from "react";
 
 // src/components/ParameterInputs/rich-text/CustomCodeNode.ts
 import { CodeNode } from "@lexical/code";
@@ -17378,10 +17455,10 @@ CustomCodeNode.importDOM = function() {
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { mergeRegister } from "@lexical/utils";
 import { ParagraphNode } from "lexical";
-import { useEffect as useEffect10 } from "react";
+import { useEffect as useEffect11 } from "react";
 function DisableStylesPlugin() {
   const [editor] = useLexicalComposerContext();
-  useEffect10(() => {
+  useEffect11(() => {
     return mergeRegister(
       // Disable text alignment on paragraph nodes
       editor.registerNodeTransform(ParagraphNode, (node) => {
@@ -17590,7 +17667,7 @@ import {
   ElementNode as ElementNode2,
   FOCUS_COMMAND
 } from "lexical";
-import { useCallback as useCallback5, useEffect as useEffect11, useRef as useRef6, useState as useState11 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect12, useRef as useRef7, useState as useState11 } from "react";
 
 // src/components/ParameterInputs/rich-text/utils.ts
 import { $isAtNodeEnd } from "@lexical/selection";
@@ -17628,7 +17705,7 @@ var getSelectedNode = (selection) => {
 };
 
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
-import { Fragment as Fragment17, jsx as jsx103, jsxs as jsxs69 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx103, jsxs as jsxs69 } from "@emotion/react/jsx-runtime";
 var isProjectMapLinkValue = (value) => {
   return (value == null ? void 0 : value.type) === "projectMapNode" && Boolean(
     value.nodeId && value.path && value.projectMapId
@@ -17934,16 +18011,16 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
   };
   const [editor] = useLexicalComposerContext2();
   const [linkPopoverState, setLinkPopoverState] = useState11();
-  const linkPopoverElRef = useRef6(null);
+  const linkPopoverElRef = useRef7(null);
   const [isEditorFocused, setIsEditorFocused] = useState11(false);
   const [isLinkPopoverFocused, setIsLinkPopoverFocused] = useState11(false);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!isEditorFocused && !isLinkPopoverFocused) {
       setLinkPopoverState(void 0);
       return;
     }
   }, [isEditorFocused, isLinkPopoverFocused]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!editor.hasNodes([LinkNode])) {
       throw new Error("LinkNode not registered on editor");
     }
@@ -18044,7 +18121,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
       }
     });
   }, [editor]);
-  useEffect11(() => {
+  useEffect12(() => {
     return editor.registerUpdateListener(({ editorState }) => {
       requestAnimationFrame(() => {
         editorState.read(() => {
@@ -18071,7 +18148,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
       });
     });
   };
-  return /* @__PURE__ */ jsxs69(Fragment17, { children: [
+  return /* @__PURE__ */ jsxs69(Fragment16, { children: [
     /* @__PURE__ */ jsx103(
       NodeEventPlugin,
       {
@@ -18136,7 +18213,7 @@ import {
   COMMAND_PRIORITY_CRITICAL,
   INDENT_CONTENT_COMMAND
 } from "lexical";
-import { useEffect as useEffect12 } from "react";
+import { useEffect as useEffect13 } from "react";
 import { jsx as jsx104 } from "@emotion/react/jsx-runtime";
 function isIndentPermitted(maxDepth) {
   const selection = $getSelection2();
@@ -18160,7 +18237,7 @@ function isIndentPermitted(maxDepth) {
 }
 function ListIndentPlugin({ maxDepth }) {
   const [editor] = useLexicalComposerContext3();
-  useEffect12(() => {
+  useEffect13(() => {
     return editor.registerCommand(
       INDENT_CONTENT_COMMAND,
       () => !isIndentPermitted(maxDepth),
@@ -18193,8 +18270,8 @@ import {
   FORMAT_TEXT_COMMAND,
   SELECTION_CHANGE_COMMAND
 } from "lexical";
-import { useCallback as useCallback6, useEffect as useEffect13, useMemo as useMemo3, useState as useState12 } from "react";
-import { Fragment as Fragment18, jsx as jsx105, jsxs as jsxs70 } from "@emotion/react/jsx-runtime";
+import { useCallback as useCallback6, useEffect as useEffect14, useMemo as useMemo3, useState as useState12 } from "react";
+import { Fragment as Fragment17, jsx as jsx105, jsxs as jsxs70 } from "@emotion/react/jsx-runtime";
 var toolbar = css84`
   background: var(--gray-50);
   border-radius: var(--rounded-base);
@@ -18336,7 +18413,7 @@ var RichTextToolbar = ({ config, customControls }) => {
       setIsLink(false);
     }
   }, [editor, setActiveElement, setActiveFormats, setIsLink]);
-  useEffect13(() => {
+  useEffect14(() => {
     return editor.registerCommand(
       SELECTION_CHANGE_COMMAND,
       (_payload) => {
@@ -18346,7 +18423,7 @@ var RichTextToolbar = ({ config, customControls }) => {
       COMMAND_PRIORITY_CRITICAL2
     );
   }, [editor, updateToolbar]);
-  useEffect13(() => {
+  useEffect14(() => {
     return editor.registerUpdateListener(({ editorState }) => {
       requestAnimationFrame(() => {
         editorState.read(() => {
@@ -18431,7 +18508,7 @@ var RichTextToolbar = ({ config, customControls }) => {
           children: /* @__PURE__ */ jsx105(RichTextToolbarIcon, { icon: "link" })
         }
       ) }) : null,
-      visibleLists.size > 0 ? /* @__PURE__ */ jsxs70(Fragment18, { children: [
+      visibleLists.size > 0 ? /* @__PURE__ */ jsxs70(Fragment17, { children: [
         visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx105(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx105(
           "button",
           {
@@ -18594,7 +18671,7 @@ var useRichTextToolbarState = ({ config }) => {
 };
 
 // src/components/ParameterInputs/ParameterRichText.tsx
-import { Fragment as Fragment19, jsx as jsx106, jsxs as jsxs71 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx106, jsxs as jsxs71 } from "@emotion/react/jsx-runtime";
 var ParameterRichText = ({
   label,
   labelLeadingIcon,
@@ -18651,7 +18728,7 @@ var ParameterRichText = ({
             children
           }
         ),
-        menuItems ? /* @__PURE__ */ jsx106(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx106(Fragment19, { children: menuItems }) }) : null
+        menuItems ? /* @__PURE__ */ jsx106(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx106(Fragment18, { children: menuItems }) }) : null
       ]
     }
   );
@@ -18762,7 +18839,7 @@ var ParameterRichTextInner = ({
     },
     editable: !readOnly
   };
-  return /* @__PURE__ */ jsxs71(Fragment19, { children: [
+  return /* @__PURE__ */ jsxs71(Fragment18, { children: [
     /* @__PURE__ */ jsx106("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx106(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx106(
       RichText,
       {
@@ -18800,14 +18877,14 @@ var RichText = ({
   variables,
   customControls
 }) => {
-  const editorContainerRef = useRef7(null);
+  const editorContainerRef = useRef8(null);
   const [editor] = useLexicalComposerContext5();
-  useEffect14(() => {
+  useEffect15(() => {
     if (onRichTextInit) {
       onRichTextInit(editor);
     }
   }, [editor, onRichTextInit]);
-  useEffect14(() => {
+  useEffect15(() => {
     const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState }) => {
       requestAnimationFrame(() => {
         if (!deepEqual2(editorState.toJSON(), prevEditorState.toJSON())) {
@@ -18819,7 +18896,7 @@ var RichText = ({
       removeUpdateListener();
     };
   }, []);
-  return /* @__PURE__ */ jsxs71(Fragment19, { children: [
+  return /* @__PURE__ */ jsxs71(Fragment18, { children: [
     readOnly ? null : /* @__PURE__ */ jsx106(RichTextToolbar_default, { config, customControls }),
     /* @__PURE__ */ jsxs71("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [
       /* @__PURE__ */ jsx106(
@@ -18845,7 +18922,7 @@ var RichText = ({
       /* @__PURE__ */ jsx106(ListIndentPlugin, { maxDepth: 4 }),
       /* @__PURE__ */ jsx106(DisableStylesPlugin, {}),
       /* @__PURE__ */ jsx106(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
-      /* @__PURE__ */ jsx106(Fragment19, { children })
+      /* @__PURE__ */ jsx106(Fragment18, { children })
     ] })
   ] });
 };
@@ -19452,14 +19529,14 @@ var SwitchText = css92`
 `;
 
 // src/components/Switch/Switch.tsx
-import { Fragment as Fragment20, jsx as jsx114, jsxs as jsxs76 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx114, jsxs as jsxs76 } from "@emotion/react/jsx-runtime";
 var Switch = React23.forwardRef(
   ({ label, infoText, toggleText, children, ...inputProps }, ref) => {
     let additionalText = infoText;
     if (infoText && toggleText) {
       additionalText = inputProps.checked ? toggleText : infoText;
     }
-    return /* @__PURE__ */ jsxs76(Fragment20, { children: [
+    return /* @__PURE__ */ jsxs76(Fragment19, { children: [
       /* @__PURE__ */ jsxs76("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
         /* @__PURE__ */ jsx114("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
         /* @__PURE__ */ jsx114("span", { css: SwitchInputLabel, children: label })
@@ -19539,7 +19616,7 @@ var TableCellData = React24.forwardRef(
 );
 
 // src/components/Tabs/Tabs.tsx
-import { createContext as createContext5, useContext as useContext6, useEffect as useEffect15, useMemo as useMemo6 } from "react";
+import { createContext as createContext5, useContext as useContext6, useEffect as useEffect16, useMemo as useMemo6 } from "react";
 import {
   Tab as ReakitTab,
   TabList as ReakitTabList,
@@ -19589,7 +19666,7 @@ var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...prop
     return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
   }, [selectedId, useHashForState]);
   const tab = useTabState({ ...props, selectedId: selected });
-  useEffect15(() => {
+  useEffect16(() => {
     var _a;
     const selectedValueWithoutNull = (_a = tab.selectedId) != null ? _a : void 0;
     onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
@@ -19598,7 +19675,7 @@ var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...prop
       window.history.pushState(null, "", hashValue);
     }
   }, [tab.selectedId, onSelectedIdChange, useHashForState]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (selected && selected !== tab.selectedId) {
       tab.setSelectedId(selected);
     }

package/dist/index.d.mts

@@ -21300,9 +21300,19 @@ type DetailsProps = React$1.HTMLAttributes<HTMLDetailsElement> & {
      * @default false
      */
     isOpenByDefault?: boolean;
+    /** Makes the content indented, and shows an indent guide line.
+     * @default false
+     * @deprecated this prop is in beta, and might get breaking changes in minor releases.
+     */
+    isIndented?: boolean;
+    /** Makes the the UI of the summary more compact, by removing the paddings.
+     * @default false
+     * @deprecated this prop is in beta, and might get breaking changes in minor releases.
+     */
+    isCompact?: boolean;
 };
 /** @example  <Details summary="summary text">child content here</Details>*/
-declare const Details: ({ summary, children, isOpenByDefault, isOpen, onChange, ...props }: DetailsProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const Details: ({ summary, children, isOpenByDefault, isOpen, isIndented, isCompact, onChange, ...props }: DetailsProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 interface DrawerRendererProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'children'> {
     /** The ID of the stack to render. Some drawers need to use the same stack ID to be rendered here */
@@ -21505,12 +21515,18 @@ type ErrorMessageProps = {
     /** sets the test id for test automation (optional) */
     testId?: string;
     className?: string;
+    /**
+     * When set to true, the error message will be truncated instead of wrapped
+     * when it's longer than the available width.
+     * @default false
+     **/
+    truncated?: boolean;
 };
 /**
  * Component that provides error messaging to input fields
  * @example <ErrorMessage>something went wrong, please try again</ErrorMessage>
  */
-declare const ErrorMessage: ({ message, testId, ...otherProps }: ErrorMessageProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element | null;
+declare const ErrorMessage: ({ message, testId, truncated, ...otherProps }: ErrorMessageProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element | null;
 
 type FieldsetProps = React$1.HTMLAttributes<HTMLFieldSetElement> & {
     /** sets the legend value */
@@ -22219,7 +22235,9 @@ type ModalProps = {
     width?: string;
     /** A valid CSS height */
     height?: string;
-    /** The classname to set on the wrapper of the modal */
+    /** The classname to set on the wrapper of the modal.
+     * @deprecated the dialog is not rendered inside a wrapper anymore.
+     */
     wrapperClassName?: string;
     /** Removes the default padding on the content wrapper */
     withoutContentPadding?: boolean;
@@ -22239,7 +22257,9 @@ declare const Modal: React__default.ForwardRefExoticComponent<{
     width?: string | undefined;
     /** A valid CSS height */
     height?: string | undefined;
-    /** The classname to set on the wrapper of the modal */
+    /** The classname to set on the wrapper of the modal.
+     * @deprecated the dialog is not rendered inside a wrapper anymore.
+     */
     wrapperClassName?: string | undefined;
     /** Removes the default padding on the content wrapper */
     withoutContentPadding?: boolean | undefined;
@@ -22638,13 +22658,18 @@ type ParameterShellOverrideProps = {
      * @deprecated
      */
     onResetOverriddenValue?: () => void;
+    /**
+     * Adjusts the UI to work with parameter groups. At the moment, it just remove the white background.
+     * @default false
+     */
+    isParameterGroup?: boolean;
 };
 type ParameterShellProps = React.InputHTMLAttributes<HTMLDivElement> & CommonParameterInputProps & ParameterShellOverrideProps;
 /**
  * Uniform Parameter shell component
  * @example <ParameterShell label="my label" id="my-id"><ParameterInput onChange={() => {}} /></ParameterShell>
  */
-declare const ParameterShell: ({ label, labelLeadingIcon, labelTrailingIcon, hiddenLabel, id, errorMessage, warningMessage, infoMessage, caption, errorTestId, captionTestId, menuItems, actionItems, hasOverriddenValue, onResetOverriddenValue, title, children, ...props }: ParameterShellProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const ParameterShell: ({ label, labelLeadingIcon, labelTrailingIcon, hiddenLabel, id, errorMessage, warningMessage, infoMessage, caption, errorTestId, captionTestId, menuItems, actionItems, hasOverriddenValue, onResetOverriddenValue, title, children, isParameterGroup, ...props }: ParameterShellProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 declare const ParameterShellPlaceholder: ({ children }: {
     children?: ReactNode;
 }) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;

package/dist/index.d.ts

@@ -21300,9 +21300,19 @@ type DetailsProps = React$1.HTMLAttributes<HTMLDetailsElement> & {
      * @default false
      */
     isOpenByDefault?: boolean;
+    /** Makes the content indented, and shows an indent guide line.
+     * @default false
+     * @deprecated this prop is in beta, and might get breaking changes in minor releases.
+     */
+    isIndented?: boolean;
+    /** Makes the the UI of the summary more compact, by removing the paddings.
+     * @default false
+     * @deprecated this prop is in beta, and might get breaking changes in minor releases.
+     */
+    isCompact?: boolean;
 };
 /** @example  <Details summary="summary text">child content here</Details>*/
-declare const Details: ({ summary, children, isOpenByDefault, isOpen, onChange, ...props }: DetailsProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const Details: ({ summary, children, isOpenByDefault, isOpen, isIndented, isCompact, onChange, ...props }: DetailsProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
 interface DrawerRendererProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, 'children'> {
     /** The ID of the stack to render. Some drawers need to use the same stack ID to be rendered here */
@@ -21505,12 +21515,18 @@ type ErrorMessageProps = {
     /** sets the test id for test automation (optional) */
     testId?: string;
     className?: string;
+    /**
+     * When set to true, the error message will be truncated instead of wrapped
+     * when it's longer than the available width.
+     * @default false
+     **/
+    truncated?: boolean;
 };
 /**
  * Component that provides error messaging to input fields
  * @example <ErrorMessage>something went wrong, please try again</ErrorMessage>
  */
-declare const ErrorMessage: ({ message, testId, ...otherProps }: ErrorMessageProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element | null;
+declare const ErrorMessage: ({ message, testId, truncated, ...otherProps }: ErrorMessageProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element | null;
 
 type FieldsetProps = React$1.HTMLAttributes<HTMLFieldSetElement> & {
     /** sets the legend value */
@@ -22219,7 +22235,9 @@ type ModalProps = {
     width?: string;
     /** A valid CSS height */
     height?: string;
-    /** The classname to set on the wrapper of the modal */
+    /** The classname to set on the wrapper of the modal.
+     * @deprecated the dialog is not rendered inside a wrapper anymore.
+     */
     wrapperClassName?: string;
     /** Removes the default padding on the content wrapper */
     withoutContentPadding?: boolean;
@@ -22239,7 +22257,9 @@ declare const Modal: React__default.ForwardRefExoticComponent<{
     width?: string | undefined;
     /** A valid CSS height */
     height?: string | undefined;
-    /** The classname to set on the wrapper of the modal */
+    /** The classname to set on the wrapper of the modal.
+     * @deprecated the dialog is not rendered inside a wrapper anymore.
+     */
     wrapperClassName?: string | undefined;
     /** Removes the default padding on the content wrapper */
     withoutContentPadding?: boolean | undefined;
@@ -22638,13 +22658,18 @@ type ParameterShellOverrideProps = {
      * @deprecated
      */
     onResetOverriddenValue?: () => void;
+    /**
+     * Adjusts the UI to work with parameter groups. At the moment, it just remove the white background.
+     * @default false
+     */
+    isParameterGroup?: boolean;
 };
 type ParameterShellProps = React.InputHTMLAttributes<HTMLDivElement> & CommonParameterInputProps & ParameterShellOverrideProps;
 /**
  * Uniform Parameter shell component
  * @example <ParameterShell label="my label" id="my-id"><ParameterInput onChange={() => {}} /></ParameterShell>
  */
-declare const ParameterShell: ({ label, labelLeadingIcon, labelTrailingIcon, hiddenLabel, id, errorMessage, warningMessage, infoMessage, caption, errorTestId, captionTestId, menuItems, actionItems, hasOverriddenValue, onResetOverriddenValue, title, children, ...props }: ParameterShellProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+declare const ParameterShell: ({ label, labelLeadingIcon, labelTrailingIcon, hiddenLabel, id, errorMessage, warningMessage, infoMessage, caption, errorTestId, captionTestId, menuItems, actionItems, hasOverriddenValue, onResetOverriddenValue, title, children, isParameterGroup, ...props }: ParameterShellProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 declare const ParameterShellPlaceholder: ({ children }: {
     children?: ReactNode;
 }) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;

package/dist/index.js

@@ -1597,7 +1597,7 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
       {
         dangerouslySetInnerHTML: {
           __html: `
-        :root, :host {
+        :root, :host, ::backdrop {
           --brand-primary-1: #438fd5; /* bright blue */
           --brand-primary-2: #f4220b; /* red */
           --brand-primary-3: #83c6e1; /* slate blue */
@@ -1661,7 +1661,7 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
 
           /* off brand */
           --input-border: rgba(31, 43, 52, 0.5);
-          --ring: 0 0 0 0 var(--white), 0 0 0 3px var(--brand-primary-3);
+          --ring: 0 0 0 0 var(--white), 0 0 0 2px var(--brand-primary-3);
           --ring-inset: inset 0 0 0 0 var(--white), inset 0 0 0 3px var(--brand-primary-3);
 
           /* site settings */
@@ -14793,6 +14793,13 @@ var detailsContent = import_react53.css`
   animation: ${fadeInRtl} var(--duration-fast) var(--timing-ease-out) forwards;
   will-change: height;
 `;
+var detailsContentIndented = import_react53.css`
+  margin-left: calc(1.25rem / 2);
+  border-left: 1px solid var(--gray-300);
+  padding-top: calc(var(--spacing-md) / 2);
+  padding-left: var(--spacing-base);
+  padding-bottom: var(--spacing-sm);
+`;
 var summary = import_react53.css`
   align-items: center;
   cursor: pointer;
@@ -14807,6 +14814,9 @@ var summary = import_react53.css`
     display: none;
   }
 `;
+var summaryCompact = import_react53.css`
+  padding: 0;
+`;
 var summaryIcon = import_react53.css`
   transition: rotate var(--duration-fast) var(--timing-ease-out);
   rotate: -90deg;
@@ -14822,6 +14832,8 @@ var Details = ({
   children,
   isOpenByDefault = false,
   isOpen,
+  isIndented = false,
+  isCompact = false,
   onChange,
   ...props
 }) => {
@@ -14843,7 +14855,7 @@ var Details = ({
       ref: detailsRef,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("summary", { "data-testid": "summary", css: summary, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("summary", { "data-testid": "summary", css: [summary, isCompact ? summaryCompact : null], children: [
           /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             Icon,
             {
@@ -14855,7 +14867,14 @@ var Details = ({
           ),
           summary2
         ] }),
-        memoizedIsOpen ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { "data-testid": "details-content", css: detailsContent, children }) : null
+        memoizedIsOpen ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          "div",
+          {
+            "data-testid": "details-content",
+            css: [detailsContent, isIndented ? detailsContentIndented : null],
+            children
+          }
+        ) : null
       ]
     }
   );
@@ -15113,10 +15132,12 @@ var useCurrentDrawer = () => {
 };
 var Drawer = import_react56.default.forwardRef(
   ({ minWidth, maxWidth, position, leftAligned, ...drawerProps }, ref) => {
+    var _a;
     const { stackId: inheritedStackId } = useCurrentDrawer();
     const { drawerTakeoverStackId } = useDrawer();
     const drawerRendererProps = { width: drawerProps.width, minWidth, maxWidth, position, leftAligned };
-    return drawerTakeoverStackId ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DrawerInner, { ref, ...drawerProps, stackId: drawerTakeoverStackId }) : drawerProps.stackId ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DrawerInner, { ref, ...drawerProps }) : inheritedStackId ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DrawerInner, { ref, ...drawerProps, stackId: inheritedStackId }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(DrawerProvider, { children: [
+    const resolvedStickyStackIdRef = (0, import_react56.useRef)((_a = drawerTakeoverStackId != null ? drawerTakeoverStackId : drawerProps.stackId) != null ? _a : inheritedStackId);
+    return resolvedStickyStackIdRef.current ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DrawerInner, { ref, ...drawerProps, stackId: resolvedStickyStackIdRef.current }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(DrawerProvider, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DrawerInner, { ref, ...drawerProps }),
       /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DrawerRenderer, { stackId: defaultSackId, ...drawerRendererProps })
     ] });
@@ -15551,19 +15572,29 @@ var import_MdWarning = require("@react-icons/all-files/md/MdWarning");
 // src/components/Input/styles/ErrorMessage.styles.ts
 init_emotion_jsx_shim();
 var import_react65 = require("@emotion/react");
-var ErrorText = import_react65.css`
+var errorMessageStyles = import_react65.css`
   align-items: center;
   color: var(--brand-secondary-5);
   display: flex;
   gap: var(--spacing-sm);
 `;
+var errorMessageTextStyles = import_react65.css`
+  /* We hide the text at width 5rem or below */
+  max-width: max(0px, calc((100% - 5rem) * 9999));
+  overflow: hidden;
+`;
+var errorMessageTextTruncatedStyles = import_react65.css`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
 
 // src/components/Input/ErrorMessage.tsx
 var import_jsx_runtime51 = require("@emotion/react/jsx-runtime");
-var ErrorMessage = ({ message, testId, ...otherProps }) => {
-  return message ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("span", { role: "alert", css: ErrorText, "data-testid": testId, ...otherProps, children: [
+var ErrorMessage = ({ message, testId, truncated = false, ...otherProps }) => {
+  return message ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("span", { role: "alert", css: errorMessageStyles, "data-testid": testId, ...otherProps, title: message, children: [
     /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Icon, { icon: import_MdWarning.MdWarning, size: "1rem", iconColor: "currentColor" }) }),
-    message
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { css: [errorMessageTextStyles, truncated ? errorMessageTextTruncatedStyles : null], children: message })
   ] }) : null;
 };
 
@@ -16316,6 +16347,15 @@ var imgLoaded = import_react74.css`
 var brokenImage = import_react74.css`
   height: 160px;
 `;
+var brokenImageMessage = import_react74.css`
+  position: absolute;
+  bottom: var(--spacing-xs);
+  left: var(--spacing-xs);
+  width: 100%;
+  justify-content: center;
+  padding-inline: var(--spacing-xs);
+  font-size: var(--fs-sm);
+`;
 var variantFillImageWrapper = import_react74.css`
   display: flex;
   justify-content: center;
@@ -16324,6 +16364,7 @@ var variantFillImageWrapper = import_react74.css`
 `;
 var variantFillImageImg = import_react74.css`
   height: inherit;
+  width: inherit;
 `;
 
 // src/components/Image/ImageBroken.tsx
@@ -16442,18 +16483,26 @@ function Image({
             onError: handleErrorEvent
           }
         ) : null,
-        src && loadErrorText ? /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-            ImageBroken,
-            {
-              css: [brokenImage, img, imgLoaded],
-              width,
-              height,
-              "data-testid": "broken-image"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ErrorMessage, { message: loadErrorText })
-        ] }) : null
+        src && loadErrorText ? /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
+          "span",
+          {
+            style: {
+              display: "inline-flex",
+              position: "relative",
+              ...variant === "fill-container" ? {} : { width, height }
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+                ImageBroken,
+                {
+                  css: [brokenImage, img, imgLoaded],
+                  "data-testid": "broken-image"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ErrorMessage, { message: loadErrorText, css: brokenImageMessage, truncated: true })
+            ]
+          }
+        ) : null
       ]
     }
   );
@@ -17806,9 +17855,11 @@ var cardBase = import_react96.css`
   min-height: unset;
   outline: none;
   cursor: pointer;
+  transition: border-color var(--duration-xfast) ease-in-out;
 
   &:hover {
     --mediacard-title-color: var(--brand-secondary-1);
+    border-color: var(--primary-action-hover);
   }
 `;
 var coverWrapper = import_react96.css`
@@ -17953,27 +18004,33 @@ var modalWrapperStyles = import_react98.css`
   justify-content: center;
   z-index: var(--z-drawer);
 `;
-var modalBackdropStyles = import_react98.css`
-  position: absolute;
-  inset: 0;
-  background-color: var(--brand-secondary-1);
-  opacity: 0.4;
-`;
 var modalStyles = import_react98.css`
   position: relative;
+  max-width: calc(100% - var(--spacing-base) * 2);
+  max-height: calc(100% - var(--spacing-base) * 2);
+  padding: 0;
+  background-color: transparent;
+  z-index: 1;
+
+  &::backdrop {
+    background-color: var(--brand-secondary-1);
+    opacity: 0.4;
+  }
+`;
+var modalInnerStyles = import_react98.css`
+  position: relative;
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: stretch;
-  max-width: calc(100% - var(--spacing-base) * 2);
-  max-height: calc(100% - var(--spacing-base) * 2);
   gap: var(--spacing-base);
   background: var(--gray-50);
+  color: unset;
+  padding: var(--spacing-base);
   box-shadow: var(--elevation-500);
   border-radius: var(--rounded-base);
   border: 1px solid var(--gray-300);
-  padding: var(--spacing-base);
-  color: unset;
-  z-index: 1;
 `;
 var modalHeaderStyles = import_react98.css`
   display: flex;
@@ -17982,6 +18039,9 @@ var modalHeaderStyles = import_react98.css`
   font-size: var(--fs-md);
   line-height: 1.2;
 `;
+var modalHeaderHeaderStyles = import_react98.css`
+  max-width: calc(100% - 3rem);
+`;
 var modalCloseButtonStyles = import_react98.css`
   display: block;
   padding: 0;
@@ -18009,47 +18069,63 @@ var Modal = import_react99.default.forwardRef(
     onRequestClose,
     width = defaultModalWidth,
     height = defaultModalHeight,
-    wrapperClassName,
     withoutContentPadding = false,
     buttonGroup,
     ...modalProps
   }, ref) => {
+    const dialogRef = (0, import_react99.useRef)(null);
     useShortcut({
       handler: onRequestClose,
       shortcut: "escape"
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { css: [modalWrapperStyles, wrapperClassName], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { onClick: onRequestClose, css: modalBackdropStyles }),
-      /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(
-        "dialog",
-        {
-          ref,
-          css: modalStyles,
-          style: { width, height },
-          "data-testid": "side-dialog",
-          ...modalProps,
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { css: modalHeaderStyles, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { children: header }),
-              /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
-                Button,
-                {
-                  type: "button",
-                  onClick: onRequestClose,
-                  css: modalCloseButtonStyles,
-                  title: "Close dialog",
-                  buttonType: "ghost",
-                  "data-testid": "close-dialog",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Icon, { icon: import_CgClose6.CgClose, iconColor: "gray", size: 24 })
-                }
-              )
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { css: [modalContentStyles, !withoutContentPadding ? null : { padding: 0 }], children }),
-            buttonGroup ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(HorizontalRhythm, { children: buttonGroup }) : null
-          ]
-        }
-      )
-    ] });
+    (0, import_react99.useEffect)(() => {
+      var _a;
+      (_a = dialogRef.current) == null ? void 0 : _a.showModal();
+      return () => {
+        var _a2;
+        return (_a2 = dialogRef.current) == null ? void 0 : _a2.close();
+      };
+    }, []);
+    return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+      "dialog",
+      {
+        ref: (element) => {
+          dialogRef.current = element;
+          if (!ref) {
+            return;
+          }
+          if (typeof ref === "function") {
+            ref(element);
+          } else {
+            ref.current = element;
+          }
+        },
+        css: modalStyles,
+        style: { width, height: height === "auto" ? "min-content" : height },
+        "data-testid": "side-dialog",
+        onClick: onRequestClose,
+        ...modalProps,
+        children: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { css: modalInnerStyles, onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { css: modalHeaderStyles, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { css: modalHeaderHeaderStyles, children: header }),
+            /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+              Button,
+              {
+                type: "button",
+                onClick: onRequestClose,
+                css: modalCloseButtonStyles,
+                title: "Close dialog",
+                buttonType: "ghost",
+                "data-testid": "close-dialog",
+                children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Icon, { icon: import_CgClose6.CgClose, iconColor: "gray", size: 24 })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("div", { css: [modalContentStyles, !withoutContentPadding ? null : { padding: 0 }], children }),
+          buttonGroup ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(HorizontalRhythm, { children: buttonGroup }) : null
+        ] })
+      }
+    );
   }
 );
 Modal.displayName = "Modal";
@@ -18793,6 +18869,7 @@ var ParameterShell = ({
   onResetOverriddenValue,
   title: title2,
   children,
+  isParameterGroup = false,
   ...props
 }) => {
   const [manualErrorMessage, setManualErrorMessage] = (0, import_react111.useState)(void 0);
@@ -18836,7 +18913,7 @@ var ParameterShell = ({
             errorMessage: errorMessaging,
             handleManuallySetErrorMessage: (message) => setErrorMessage(message)
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(ParameterShellPlaceholder, { children: [
+          children: isParameterGroup ? /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { style: { flexGrow: 1 }, children }) : /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(ParameterShellPlaceholder, { children: [
             children,
             hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
           ] })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "19.78.1",
+  "version": "19.79.1-alpha.11+4547ef846",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -23,8 +23,8 @@
     "@storybook/react": "6.5.16",
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
-    "@uniformdev/canvas": "^19.78.1",
-    "@uniformdev/richtext": "^19.78.1",
+    "@uniformdev/canvas": "^19.79.1-alpha.11+4547ef846",
+    "@uniformdev/richtext": "^19.79.1-alpha.11+4547ef846",
     "autoprefixer": "10.4.16",
     "hygen": "6.2.11",
     "postcss": "8.4.31",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "757c51b80cc39640bcedef7fb5334f36a00c4761"
+  "gitHead": "4547ef8469f21f7f2341bcd87203372c4646bc08"
 }