@uniformdev/design-system 19.78.0 → 19.79.0

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 */
@@ -1703,12 +1703,22 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
           /* max text width */
           --prose: 65ch;
 
+          /* elevation */
+          --elevation-0: none;
+          --elevation-100: 0 0 2px 0 rgba(13, 24, 39, 0.08), 0 2px 4px 0 rgba(17, 24, 39, 0.08);
+          --elevation-200: 0 0 2px 0 rgba(17, 24, 39, 0.07), 0 2px 4px 0 rgba(13, 24, 39, 0.07), 0 4px 8px 0 rgba(17, 24, 39, 0.07);
+          --elevation-300: 0 8px 16px 0 rgba(17, 24, 39, 0.06), 0 2px 4px 0 rgba(13, 24, 39, 0.06), 0 4px 8px 0 rgba(17, 24, 39, 0.06);
+          --elevation-400: 0 8px 16px 0 rgba(17, 24, 39, 0.05), 0 16px 24px 0 rgba(13, 24, 39, 0.05), 0 4px 8px 0 rgba(17, 24, 39, 0.05);
+          --elevation-500: 0 8px 16px 0 rgba(17, 24, 39, 0.04), 0 16px 24px 0 rgba(13, 24, 39, 0.04), 0 24px 32px 0 rgba(17, 24, 39, 0.04);
+          --elevation-600: 0 32px 40px 0 rgba(17, 24, 39, 0.03), 0 16px 24px 0 rgba(13, 24, 39, 0.03), 0 24px 32px 0 rgba(17, 24, 39, 0.03);
+
+          /* deprecated in favour of --elevation-* variables */
           /* brand shadow styles */
-          --shadow-sm: rgba(31, 43, 52, 0.05) 0px 0px 0px 1px;
-          --shadow-base: rgba(31, 43, 52, 0.25) 0 2px 5px -1px,
-            rgba(31, 43, 52, 0.3) 0px 1px 3px -1px;
-          --shadow-md: 0px 4px 4px rgba(31, 43, 52, 0.25), 0 2px 4px -2px rgba(31, 43, 52, 0.1);
-          --shadow-xl: 0px 0px 24px rgba(31, 43, 52, 0.3);
+          --shadow-sm: var(--elevation-100);
+          --shadow-base: var(--elevation-200);
+          --shadow-md: var(--elevation-300);
+          --shadow-xl: var(--elevation-600);
+          /* deprecated in favour of --elevation-* variables */
 
           /* rounder corners  */
           --rounded-sm: 0.125rem;   /* 2px */
@@ -14783,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;
@@ -14797,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;
@@ -14812,6 +14832,8 @@ var Details = ({
   children,
   isOpenByDefault = false,
   isOpen,
+  isIndented = false,
+  isCompact = false,
   onChange,
   ...props
 }) => {
@@ -14833,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,
             {
@@ -14845,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
       ]
     }
   );
@@ -15103,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 })
     ] });
@@ -15541,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;
 };
 
@@ -16306,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;
@@ -16314,6 +16364,7 @@ var variantFillImageWrapper = import_react74.css`
 `;
 var variantFillImageImg = import_react74.css`
   height: inherit;
+  width: inherit;
 `;
 
 // src/components/Image/ImageBroken.tsx
@@ -16432,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
       ]
     }
   );
@@ -17796,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`
@@ -17875,7 +17936,7 @@ var MediaCard = ({
     e.stopPropagation();
   }, []);
   const hasMenuItems = Array.isArray(menuItems) ? menuItems.length > 0 : Boolean(menuItems);
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(Card, { css: cardBase, ...cardProps, onClick, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(Card, { css: cardBase, ...cardProps, onClick, "data-testId": "card-item", children: [
     /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("button", { tabIndex: -1, css: coverWrapper, children: cover }),
     /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { css: contentWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(HorizontalRhythm, { gap: "sm", justify: "space-between", align: "center", css: { width: "100%" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(VerticalRhythm, { gap: "0", align: "flex-start", css: { flex: 1, minWidth: 0 }, children: [
@@ -17907,7 +17968,16 @@ var MediaCard = ({
           children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
             Menu,
             {
-              menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("button", { type: "button", "aria-label": "More options", css: menuButton, children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Icon, { icon: "more-alt", iconColor: "gray", size: 16 }) }),
+              menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "More options",
+                  css: menuButton,
+                  "data-testId": "button-more",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Icon, { icon: "more-alt", iconColor: "gray", size: 16 })
+                }
+              ),
               menuLabel: `Menu of ${title2}`,
               children: menuItems
             }
@@ -17934,26 +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;
@@ -17962,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;
@@ -17989,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";
@@ -18773,6 +18869,7 @@ var ParameterShell = ({
   onResetOverriddenValue,
   title: title2,
   children,
+  isParameterGroup = false,
   ...props
 }) => {
   const [manualErrorMessage, setManualErrorMessage] = (0, import_react111.useState)(void 0);
@@ -18816,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.0",
+  "version": "19.79.0",
   "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.0",
-    "@uniformdev/richtext": "^19.78.0",
+    "@uniformdev/canvas": "^19.79.0",
+    "@uniformdev/richtext": "^19.79.0",
     "autoprefixer": "10.4.16",
     "hygen": "6.2.11",
     "postcss": "8.4.31",
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f6d26aebf403e38740acd6dc3d99bf2460079639"
+  "gitHead": "78f5ededbaa1a67d58d808eac23ab64769e14e10"
 }