@uniformdev/design-system 19.38.3-alpha.70 → 19.39.0

package/dist/esm/index.js

@@ -13120,9 +13120,9 @@ var useCurrentDrawer = () => {
   return useContext5(CurrentDrawerContext);
 };
 var Drawer = React13.forwardRef(
-  ({ width, minWidth, maxWidth, position, leftAligned, ...drawerProps }, ref) => {
+  ({ minWidth, maxWidth, position, leftAligned, ...drawerProps }, ref) => {
     const { stackId: inheritedStackId } = useCurrentDrawer();
-    const drawerRendererProps = { width, minWidth, maxWidth, position, leftAligned };
+    const drawerRendererProps = { width: drawerProps.width, minWidth, maxWidth, position, leftAligned };
     return drawerProps.stackId ? /* @__PURE__ */ jsx44(DrawerInner, { ref, ...drawerProps }) : inheritedStackId ? /* @__PURE__ */ jsx44(DrawerInner, { ref, ...drawerProps, stackId: inheritedStackId }) : /* @__PURE__ */ jsxs26(DrawerProvider, { children: [
       /* @__PURE__ */ jsx44(DrawerInner, { ref, ...drawerProps }),
       /* @__PURE__ */ jsx44(DrawerRenderer, { stackId: defaultSackId, ...drawerRendererProps })
@@ -13139,6 +13139,7 @@ var DrawerInner = ({
   instanceKey,
   onRequestClose,
   leftAligned,
+  width,
   testId = "side-dialog"
 }) => {
   const { registerDrawer, unregisterDrawer, providerId } = useDrawer();
@@ -13147,6 +13148,7 @@ var DrawerInner = ({
   useEffect5(() => {
     registerDrawer({
       drawer: {
+        width,
         id,
         stackId,
         onRequestClose,
@@ -13250,8 +13252,13 @@ var DrawerContent2 = ({ children, buttonGroup, noPadding = false, ...props }) =>
 };
 
 // src/components/Drawer/DrawerRenderer.tsx
-import { useEffect as useEffect6 } from "react";
+import { useEffect as useEffect6, useMemo as useMemo2 } from "react";
 import { Fragment as Fragment6, jsx as jsx46, jsxs as jsxs28 } from "@emotion/react/jsx-runtime";
+var drawerWidth = {
+  narrow: "29rem",
+  medium: "43rem",
+  wide: "57rem"
+};
 var maxLayeringInPx = 64;
 var idealDistanceBetweenLayersInPx = 16;
 var DrawerRenderer = ({
@@ -13261,15 +13268,11 @@ var DrawerRenderer = ({
   minWidth = "0",
   maxWidth = "100%",
   leftAligned = false,
+  withoutFluidWidth = false,
   ...otherProps
 }) => {
   const { drawersRegistry, providerId } = useDrawer();
   const drawersToRender = drawersRegistry.filter(({ stackId: sId }) => sId === stackId);
-  const drawerWidth = {
-    narrow: "29rem",
-    medium: "43rem",
-    wide: "57rem"
-  };
   useEffect6(() => {
     drawersToRender.forEach(({ isFirstRender, onFirstRender }) => {
       if (isFirstRender) {
@@ -13277,6 +13280,17 @@ var DrawerRenderer = ({
       }
     });
   }, [drawersToRender]);
+  const unionWidth = useMemo2(() => {
+    var _a;
+    const rendererWidth = (_a = drawerWidth[width]) != null ? _a : width;
+    if (withoutFluidWidth) {
+      return rendererWidth;
+    }
+    const drawerWidths = [rendererWidth, ...drawersToRender.map(({ width: width2 }) => width2)].filter(
+      (v) => typeof v === "string"
+    );
+    return `max(${drawerWidths.join()})`;
+  }, [drawersToRender, width, withoutFluidWidth]);
   if (drawersToRender.length === 0) {
     return null;
   }
@@ -13289,29 +13303,26 @@ var DrawerRenderer = ({
         position === "sticky" ? { height: "100%", marginTop: "-100%" } : void 0
       ],
       ...otherProps,
-      children: drawersToRender.map(({ id, stackId: stackId2, onRequestClose }, index) => {
-        var _a;
-        return /* @__PURE__ */ jsx46(
-          DrawerWrapper,
-          {
-            index,
-            totalDrawers: drawersToRender.length,
-            width: (_a = drawerWidth[width]) != null ? _a : width,
-            minWidth,
-            maxWidth,
-            onOverlayClick: onRequestClose,
-            leftAligned,
-            children: /* @__PURE__ */ jsx46(
-              "div",
-              {
-                ...getDrawerAttributes({ providerId, stackId: stackId2, id }),
-                style: { width: "100%", height: "100%" }
-              }
-            )
-          },
-          `${stackId2}-${id}`
-        );
-      })
+      children: drawersToRender.map(({ id, stackId: stackId2, onRequestClose }, index) => /* @__PURE__ */ jsx46(
+        DrawerWrapper,
+        {
+          index,
+          totalDrawers: drawersToRender.length,
+          width: unionWidth,
+          minWidth,
+          maxWidth,
+          onOverlayClick: onRequestClose,
+          leftAligned,
+          children: /* @__PURE__ */ jsx46(
+            "div",
+            {
+              ...getDrawerAttributes({ providerId, stackId: stackId2, id }),
+              style: { width: "100%", height: "100%" }
+            }
+          )
+        },
+        `${stackId2}-${id}`
+      ))
     }
   );
 };
@@ -16042,6 +16053,7 @@ var emptyParameterShell = css74`
   flex-grow: 1;
   padding: var(--spacing-xs);
   position: relative;
+  max-width: 100%;
 `;
 var emptyParameterShellText = css74`
   background: var(--brand-secondary-6);
@@ -17338,7 +17350,7 @@ import {
   FORMAT_TEXT_COMMAND,
   SELECTION_CHANGE_COMMAND
 } from "lexical";
-import { useCallback as useCallback5, useEffect as useEffect13, useMemo as useMemo2, useState as useState11 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect13, useMemo as useMemo3, useState as useState11 } from "react";
 import { Fragment as Fragment15, jsx as jsx98, jsxs as jsxs66 } from "@emotion/react/jsx-runtime";
 var toolbar = css78`
   background: var(--gray-50);
@@ -17631,26 +17643,26 @@ var RichTextToolbar = ({ config, customControls }) => {
 var RichTextToolbar_default = RichTextToolbar;
 var useRichTextToolbarState = ({ config }) => {
   var _a;
-  const enabledBuiltInFormats = useMemo2(() => {
+  const enabledBuiltInFormats = useMemo3(() => {
     return richTextBuiltInFormats.filter((format) => {
       var _a2, _b;
       return (_b = (_a2 = config == null ? void 0 : config.formatting) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(format.type);
     });
   }, [config]);
-  const enabledBuiltInElements = useMemo2(() => {
+  const enabledBuiltInElements = useMemo3(() => {
     return richTextBuiltInElements.filter((element) => {
       var _a2, _b;
       return (_b = (_a2 = config == null ? void 0 : config.elements) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(element.type);
     });
   }, [config]);
-  const enabledBuiltInFormatsWithIcon = useMemo2(() => {
+  const enabledBuiltInFormatsWithIcon = useMemo3(() => {
     return enabledBuiltInFormats.filter((format) => FORMATS_WITH_ICON.has(format.type));
   }, [enabledBuiltInFormats]);
   const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
     (format) => !FORMATS_WITH_ICON.has(format.type)
   );
   const [activeFormats, setActiveFormats] = useState11([]);
-  const visibleFormatsWithIcon = useMemo2(() => {
+  const visibleFormatsWithIcon = useMemo3(() => {
     const visibleFormats = /* @__PURE__ */ new Set();
     activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
       visibleFormats.add(type);
@@ -17660,7 +17672,7 @@ var useRichTextToolbarState = ({ config }) => {
     });
     return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
   }, [activeFormats, enabledBuiltInFormatsWithIcon]);
-  const visibleFormatsWithoutIcon = useMemo2(() => {
+  const visibleFormatsWithoutIcon = useMemo3(() => {
     const visibleFormats = /* @__PURE__ */ new Set();
     activeFormats.filter((type) => !FORMATS_WITH_ICON.has(type)).forEach((type) => {
       visibleFormats.add(type);
@@ -17674,7 +17686,7 @@ var useRichTextToolbarState = ({ config }) => {
   const enabledTextualElements = enabledBuiltInElements.filter(
     (element) => TEXTUAL_ELEMENTS.includes(element.type)
   );
-  const visibleTextualElements = useMemo2(() => {
+  const visibleTextualElements = useMemo3(() => {
     if (!TEXTUAL_ELEMENTS.includes(activeElement)) {
       return enabledTextualElements;
     }
@@ -17686,23 +17698,23 @@ var useRichTextToolbarState = ({ config }) => {
     );
   }, [activeElement, (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn, enabledTextualElements]);
   const [isLink, setIsLink] = useState11(false);
-  const linkElementVisible = useMemo2(() => {
+  const linkElementVisible = useMemo3(() => {
     return enabledBuiltInElements.some((element) => element.type === "link") || isLink;
   }, [isLink, enabledBuiltInElements]);
-  const visibleLists = useMemo2(() => {
+  const visibleLists = useMemo3(() => {
     return new Set(
       ["orderedList", "unorderedList"].filter(
         (type) => enabledBuiltInElements.some((element) => element.type === type) || activeElement === type
       )
     );
   }, [activeElement, enabledBuiltInElements]);
-  const quoteElementVisible = useMemo2(() => {
+  const quoteElementVisible = useMemo3(() => {
     return enabledBuiltInElements.some((element) => element.type === "quote") || activeElement === "quote";
   }, [activeElement, enabledBuiltInElements]);
-  const codeElementVisible = useMemo2(() => {
+  const codeElementVisible = useMemo3(() => {
     return enabledBuiltInElements.some((element) => element.type === "code") || activeElement === "code";
   }, [activeElement, enabledBuiltInElements]);
-  const visibleElementsWithIcons = useMemo2(() => {
+  const visibleElementsWithIcons = useMemo3(() => {
     const visibleElements = /* @__PURE__ */ new Set();
     if (linkElementVisible) {
       visibleElements.add("link");
@@ -18095,7 +18107,7 @@ var Popover2 = ({
 
 // src/components/ProgressList/ProgressList.tsx
 import { css as css81 } from "@emotion/react";
-import { useMemo as useMemo3 } from "react";
+import { useMemo as useMemo4 } from "react";
 import { CgCheckO as CgCheckO2, CgRadioCheck, CgRecord } from "react-icons/cg";
 
 // src/components/ProgressList/styles/ProgressList.styles.ts
@@ -18115,7 +18127,7 @@ var progressListItemStyles = css80`
 // src/components/ProgressList/ProgressList.tsx
 import { jsx as jsx104, jsxs as jsxs71 } from "@emotion/react/jsx-runtime";
 var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
-  const itemsWithStatus = useMemo3(() => {
+  const itemsWithStatus = useMemo4(() => {
     const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
     return items.map((item, index) => {
       let status = "queued";
@@ -18148,7 +18160,7 @@ var ProgressListItem = ({
   errorLevel = "danger",
   autoEllipsis = false
 }) => {
-  const Icon2 = useMemo3(() => {
+  const Icon2 = useMemo4(() => {
     if (error) {
       return warningIcon;
     }
@@ -18159,7 +18171,7 @@ var ProgressListItem = ({
     };
     return iconPerStatus[status];
   }, [status, error]);
-  const statusStyles = useMemo3(() => {
+  const statusStyles = useMemo4(() => {
     if (error) {
       return errorLevel === "caution" ? css81`
             color: rgb(161, 98, 7);
@@ -18197,7 +18209,7 @@ var ProgressListItem = ({
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { css as css83 } from "@emotion/react";
-import { useCallback as useCallback6, useMemo as useMemo4 } from "react";
+import { useCallback as useCallback6, useMemo as useMemo5 } from "react";
 import { CgCheck as CgCheck4 } from "react-icons/cg";
 
 // src/components/SegmentedControl/SegmentedControl.styles.ts
@@ -18342,7 +18354,7 @@ var SegmentedControl = ({
     },
     [options, onChange]
   );
-  const sizeStyles = useMemo4(() => {
+  const sizeStyles = useMemo5(() => {
     const map = {
       sm: css83({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
       md: css83({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
@@ -18350,7 +18362,7 @@ var SegmentedControl = ({
     };
     return map[size];
   }, [size]);
-  const isIconOnly = useMemo4(() => {
+  const isIconOnly = useMemo5(() => {
     return options.every((option) => option.icon && !option.label);
   }, [options]);
   return /* @__PURE__ */ jsx105(
@@ -18617,7 +18629,7 @@ var TableCellData = React24.forwardRef(
 );
 
 // src/components/Tabs/Tabs.tsx
-import { createContext as createContext6, useContext as useContext7, useEffect as useEffect15, useMemo as useMemo5 } from "react";
+import { createContext as createContext6, useContext as useContext7, useEffect as useEffect15, useMemo as useMemo6 } from "react";
 import {
   Tab as ReakitTab,
   TabList as ReakitTabList,
@@ -18661,7 +18673,7 @@ var useCurrentTab = () => {
   return context;
 };
 var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...props }) => {
-  const selected = useMemo5(() => {
+  const selected = useMemo6(() => {
     if (selectedId)
       return selectedId;
     return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;

package/dist/index.d.mts

@@ -20527,6 +20527,60 @@ type DetailsProps = React$1.HTMLAttributes<HTMLDetailsElement> & {
 /** @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;
 
+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 */
+    stackId: string;
+    /** The width of the drawers. In any CSS length unit (px, rem, %, et al). Can't use CSS functions (e.g. calc())
+     * @default 'medium'
+     */
+    width?: 'narrow' | 'medium' | 'wide' | (string & NonNullable<unknown>);
+    /** The minimum width of the drawers. In any CSS length unit (px, rem, %, et al)
+     * @default '0'
+     */
+    minWidth?: string;
+    /** The maximum width of the drawers. In any CSS length unit (px, rem, %, et al)
+     * @default '100%'
+     */
+    maxWidth?: string;
+    /** Sets the css position value
+     * @default 'absolute'
+     */
+    position?: 'absolute' | 'fixed' | 'sticky';
+    /** Opens the drawer from left to right
+     * @default false
+     */
+    leftAligned?: boolean;
+    /**
+     * If a drawer in the stack has a specific `width` prop, and its value is larger than the width of the current stack,
+     * the width of the stack will be automatically adjusted to accommodate for that.
+     * Set this prop to `true` to disable this behavior.
+     * @default false
+     */
+    withoutFluidWidth?: boolean;
+}
+/**
+ * Renders a stack of drawers in a different location than their original position in the component tree. Uses React Portal under the hood.
+ * @example <DrawerProvider><Drawer id="my-drawer" stackId="my-stack" header="Title">Hello</Drawer><DrawerRenderer stackId="my-stack"/></DrawerProvider>
+ */
+declare const DrawerRenderer: ({ stackId, position, width, minWidth, maxWidth, leftAligned, withoutFluidWidth, ...otherProps }: DrawerRendererProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element | null;
+interface DrawerRendererItemProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    index: number;
+    totalDrawers: number;
+    width: DrawerRendererProps['width'];
+    minWidth: Required<DrawerRendererProps['minWidth']>;
+    maxWidth: Required<DrawerRendererProps['maxWidth']>;
+    leftAligned: Required<DrawerRendererProps['leftAligned']>;
+    onOverlayClick?: () => void;
+}
+declare const getDrawerAttributes: ({ providerId, stackId, id, }: {
+    providerId: string;
+    stackId?: string | undefined;
+    id: string;
+}) => {
+    'data-drawer-id': string;
+    'data-testid': string;
+};
+
 interface DrawerItem {
     /** An ID for the drawer. It should be unique in the stack where it's rendered */
     id: string;
@@ -20538,6 +20592,12 @@ interface DrawerItem {
     stackId?: string;
     /** Just like React.Key, changing this value indicates that the drawer has changed and we need to close the current instance and open a new one */
     instanceKey?: string;
+    /**
+     * The desired width of the drawer.
+     * This value is ignored if the drawer is part of a DrawerRenderer with `withoutFluidWidth`.
+     * If not set, the drawer will use the width of its renderer.
+     */
+    width?: DrawerRendererProps['width'];
     /** Called when the close button is clicked, the Escape button is pressed, or when the drawer's overlay is clicked  */
     onRequestClose?: () => void;
     /** Test ID for test automation **/
@@ -20568,12 +20628,12 @@ declare const DrawerProvider: ({ children }: React__default.PropsWithChildren) =
 declare const useDrawer: () => DrawerContextValue;
 declare const useCloseCurrentDrawer: () => (() => void) | undefined;
 
-interface DrawerProps extends DrawerItem {
+type DrawerProps = DrawerItem & Omit<DrawerRendererProps, 'stackId'> & {
     header?: React__default.ReactNode;
     children?: React__default.ReactNode;
     bgColor?: 'var(--gray-50)' | 'var(--white)';
     leftAligned?: DrawerRendererProps['leftAligned'];
-}
+};
 declare const CurrentDrawerContext: React__default.Context<{
     id?: string | undefined;
     stackId?: string | undefined;
@@ -20588,7 +20648,12 @@ declare const useCurrentDrawer: () => {
  * A drawer component that opens from the right side of is parent. The component is used in combination with DrawerProvider and DrawerRenderer
  * @example <Drawer id="my-drawer" header="Title">Hello</Drawer>
  */
-declare const Drawer: React__default.ForwardRefExoticComponent<DrawerProps & Omit<DrawerRendererProps, "stackId"> & React__default.RefAttributes<HTMLDivElement>>;
+declare const Drawer: React__default.ForwardRefExoticComponent<DrawerItem & Omit<DrawerRendererProps, "stackId"> & {
+    header?: React__default.ReactNode;
+    children?: React__default.ReactNode;
+    bgColor?: "var(--white)" | "var(--gray-50)" | undefined;
+    leftAligned?: DrawerRendererProps['leftAligned'];
+} & React__default.RefAttributes<HTMLDivElement>>;
 
 type DrawerContentProps = {
     children: ReactNode;
@@ -20597,53 +20662,6 @@ type DrawerContentProps = {
 } & HTMLAttributes<HTMLDivElement>;
 declare const DrawerContent: ({ children, buttonGroup, noPadding, ...props }: DrawerContentProps) => _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 */
-    stackId: string;
-    /** The width of the drawers. In any CSS length unit (px, rem, %, et al). Can't use CSS functions (e.g. calc())
-     * @default 'medium'
-     */
-    width?: string | 'narrow' | 'medium' | 'wide';
-    /** The minimum width of the drawers. In any CSS length unit (px, rem, %, et al)
-     * @default '0'
-     */
-    minWidth?: string;
-    /** The maximum width of the drawers. In any CSS length unit (px, rem, %, et al)
-     * @default '100%'
-     */
-    maxWidth?: string;
-    /** Sets the css position value
-     * @default 'absolute'
-     */
-    position?: 'absolute' | 'fixed' | 'sticky';
-    /** Opens the drawer from left to right
-     * @default false
-     */
-    leftAligned?: boolean;
-}
-/**
- * Renders a stack of drawers in a different location than their original position in the component tree. Uses React Portal under the hood.
- * @example <DrawerProvider><Drawer id="my-drawer" stackId="my-stack" header="Title">Hello</Drawer><DrawerRenderer stackId="my-stack"/></DrawerProvider>
- */
-declare const DrawerRenderer: ({ stackId, position, width, minWidth, maxWidth, leftAligned, ...otherProps }: DrawerRendererProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element | null;
-interface DrawerRendererItemProps extends React__default.HTMLAttributes<HTMLDivElement> {
-    index: number;
-    totalDrawers: number;
-    width: DrawerRendererProps['width'];
-    minWidth: Required<DrawerRendererProps['minWidth']>;
-    maxWidth: Required<DrawerRendererProps['maxWidth']>;
-    leftAligned: Required<DrawerRendererProps['leftAligned']>;
-    onOverlayClick?: () => void;
-}
-declare const getDrawerAttributes: ({ providerId, stackId, id, }: {
-    providerId: string;
-    stackId?: string | undefined;
-    id: string;
-}) => {
-    'data-drawer-id': string;
-    'data-testid': string;
-};
-
 declare const iconNames: readonly ["add-r", "add", "airplane", "alarm", "album", "align-bottom", "align-center", "align-left", "align-middle", "align-right", "align-top", "anchor", "apple-watch", "arrange-back", "arrange-front", "arrow-align-h", "arrow-align-v", "arrow-bottom-left-o", "arrow-bottom-left-r", "arrow-bottom-left", "arrow-bottom-right-o", "arrow-bottom-right-r", "arrow-bottom-right", "arrow-down-o", "arrow-down-r", "arrow-down", "arrow-left-o", "arrow-left-r", "arrow-left", "arrow-long-down-c", "arrow-long-down-e", "arrow-long-down-l", "arrow-long-down-r", "arrow-long-down", "arrow-long-left-c", "arrow-long-left-e", "arrow-long-left-l", "arrow-long-left-r", "arrow-long-left", "arrow-long-right-c", "arrow-long-right-e", "arrow-long-right-l", "arrow-long-right-r", "arrow-long-right", "arrow-long-up-c", "arrow-long-up-e", "arrow-long-up-l", "arrow-long-up-r", "arrow-long-up", "arrow-right-o", "arrow-right-r", "arrow-right", "arrow-top-left-o", "arrow-top-left-r", "arrow-top-left", "arrow-top-right-o", "arrow-top-right-r", "arrow-top-right", "arrow-up-o", "arrow-up-r", "arrow-up", "arrows-breake-h", "arrows-breake-v", "arrows-exchange-alt-v", "arrows-exchange-alt", "arrows-exchange-v", "arrows-exchange", "arrows-expand-down-left", "arrows-expand-down-right", "arrows-expand-left-alt", "arrows-expand-left", "arrows-expand-right-alt", "arrows-expand-right", "arrows-expand-up-left", "arrows-expand-up-right", "arrows-h-alt", "arrows-h", "arrows-merge-alt-h", "arrows-merge-alt-v", "arrows-scroll-h", "arrows-scroll-v", "arrows-shrink-h", "arrows-shrink-v", "arrows-v-alt", "arrows-v", "assign", "asterisk", "attachment", "attribution", "awards", "backspace", "band-aid", "battery-empty", "battery-full", "battery", "bee", "bell", "bitbucket", "block", "board", "bolt", "bookmark", "border-all", "border-bottom", "border-left", "border-right", "border-style-dashed", "border-style-dotted", "border-style-solid", "border-top", "bot", "bowl", "box", "boy", "briefcase", "browse", "browser", "brush", "bulb", "c-plus-plus", "calculator", "calendar-dates", "calendar-due", "calendar-next", "calendar-today", "calendar-two", "calendar", "calibrate", "camera", "cap", "captions", "card-clubs", "card-diamonds", "card-hearts", "card-spades", "carousel", "cast", "chart", "check-o", "check-r", "check", "chevron-double-down-o", "chevron-double-down-r", "chevron-double-down", "chevron-double-left-o", "chevron-double-left-r", "chevron-double-left", "chevron-double-right-o", "chevron-double-right-r", "chevron-double-right", "chevron-double-up-o", "chevron-double-up-r", "chevron-double-up", "chevron-down-o", "chevron-down-r", "chevron-down", "chevron-left-o", "chevron-left-r", "chevron-left", "chevron-right-o", "chevron-right-r", "chevron-right", "chevron-up-o", "chevron-up-r", "chevron-up", "clapper-board", "clear-formatting", "clipboard", "close-o", "close-r", "close", "cloud", "code-slash", "code", "coffee", "collage", "color-bucket", "color-picker", "comment", "community", "components", "compress-left", "compress-right", "compress-v", "compress", "controller", "copy", "copyright", "corner-double-down-left", "corner-double-down-right", "corner-double-left-down", "corner-double-left-up", "corner-double-right-down", "corner-double-right-up", "corner-double-up-left", "corner-double-up-right", "corner-down-left", "corner-down-right", "corner-left-down", "corner-left-up", "corner-right-down", "corner-right-up", "corner-up-left", "corner-up-right", "credit-card", "crop", "cross", "crown", "danger", "dark-mode", "data", "database", "debug", "desktop", "details-less", "details-more", "dialpad", "dice-1", "dice-2", "dice-3", "dice-4", "dice-5", "dice-6", "disc", "display-flex", "display-fullwidth", "display-grid", "display-spacing", "distribute-horizontal", "distribute-vertical", "dock-bottom", "dock-left", "dock-right", "dock-window", "dollar", "drive", "drop-invert", "drop-opacity", "drop", "duplicate", "edit-black-point", "edit-contrast", "edit-exposure", "edit-fade", "edit-flip-h", "edit-flip-v", "edit-highlight", "edit-markup", "edit-mask", "edit-noise", "edit-shadows", "edit-straight", "edit-unmask", "eject", "enter", "erase", "ereader", "ericsson", "ethernet", "euro", "expand", "export", "extension-add", "extension-alt", "extension-remove", "extension", "external", "eye-alt", "eye", "feed", "file-add", "file-document", "file-remove", "file", "film", "filters", "flag-alt", "flag", "folder-add", "folder-remove", "folder", "font-height", "font-spacing", "format-bold", "format-center", "format-color", "format-code", "format-heading", "format-indent-decrease", "format-indent-increase", "format-italic", "format-justify", "format-left", "format-line-height", "format-right", "format-separator", "format-slash", "format-strike", "format-subscript", "format-superscript", "format-text", "format-underline", "format-uppercase", "games", "gender-female", "gender-male", "ghost-character", "gift", "girl", "git-branch", "git-commit", "git-fork", "git-pull", "glass-alt", "glass", "globe-alt", "globe", "gym", "hashtag", "headset", "heart", "home-alt", "home-screen", "home", "icecream", "image", "import", "inbox", "infinity", "info", "inpicture", "insert-after-o", "insert-after-r", "insert-after", "insert-before-o", "insert-before-r", "insert-before", "insights", "internal", "key", "keyboard", "keyhole", "laptop", "layout-grid-small", "layout-grid", "layout-list", "layout-list-numbered", "layout-pin", "link", "list-tree", "list", "live-photo", "loadbar-alt", "loadbar-doc", "loadbar-sound", "loadbar", "lock-unlock", "lock", "log-in", "log-off", "log-out", "loupe", "magnet", "mail-forward", "mail-open", "mail-reply", "mail", "math-divide", "math-equal", "math-minus", "math-percent", "math-plus", "maximize-alt", "maximize", "media-live", "media-podcast", "menu-boxed", "menu-cake", "menu-cheese", "menu-grid-o", "menu-grid-r", "menu-hotdog", "menu-left-alt", "menu-left", "menu-motion", "menu-oreos", "menu-right-alt", "menu-right", "menu-round", "menu", "merge-horizontal", "merge-vertical", "mic", "mini-player", "minimize-alt", "minimize", "modem", "moon", "more-alt", "more-o", "more-r", "more-vertical-alt", "more-vertical-o", "more-vertical-r", "more-vertical", "more", "mouse", "move-down", "move-left", "move-right", "move-task", "move-up", "music-note", "music-speaker", "music", "nametag", "notes", "notifications", "options", "organisation", "password", "path-back", "path-crop", "path-divide", "path-exclude", "path-front", "path-intersect", "path-outline", "path-trim", "path-unite", "pen", "pentagon-bottom-left", "pentagon-bottom-right", "pentagon-down", "pentagon-left", "pentagon-right", "pentagon-top-left", "pentagon-top-right", "pentagon-up", "performance", "phone", "photoscan", "piano", "pill", "pin-alt", "pin-bottom", "pin-top", "pin", "play-backwards", "play-button-o", "play-button-r", "play-button", "play-forwards", "play-list-add", "play-list-check", "play-list-remove", "play-list-search", "play-list", "play-pause-o", "play-pause-r", "play-pause", "play-stop-o", "play-stop-r", "play-stop", "play-track-next-o", "play-track-next-r", "play-track-next", "play-track-prev-o", "play-track-prev-r", "play-track-prev", "plug", "polaroid", "poll", "presentation", "printer", "profile", "pull-clear", "push-chevron-down-o", "push-chevron-down-r", "push-chevron-down", "push-chevron-left-o", "push-chevron-left-r", "push-chevron-left", "push-chevron-right-o", "push-chevron-right-r", "push-chevron-right", "push-chevron-up-o", "push-chevron-up-r", "push-chevron-up", "push-down", "push-left", "push-right", "push-up", "qr", "quote-o", "quote", "radio-check", "radio-checked", "ratio", "read", "readme", "record", "redo", "remote", "remove-r", "remove", "rename", "reorder", "repeat", "ring", "row-first", "row-last", "ruler", "sand-clock", "scan", "screen-mirror", "screen-shot", "screen-wide", "screen", "scroll-h", "scroll-v", "search-found", "search-loading", "search", "select-o", "select-r", "select", "server", "shape-circle", "shape-half-circle", "shape-hexagon", "shape-rhombus", "shape-square", "shape-triangle", "shape-zigzag", "share", "shield", "shopping-bag", "shopping-cart", "shortcut", "sidebar-open", "sidebar-right", "sidebar", "signal", "size", "sleep", "smart-home-boiler", "smart-home-cooker", "smart-home-heat", "smart-home-light", "smart-home-refrigerator", "smart-home-wash-machine", "smartphone-chip", "smartphone-ram", "smartphone-shake", "smartphone", "smile-mouth-open", "smile-neutral", "smile-no-mouth", "smile-none", "smile-sad", "smile-upside", "smile", "software-download", "software-upload", "sort-az", "sort-za", "space-between-v", "space-between", "spinner-alt", "spinner-two-alt", "spinner-two", "spinner", "stack", "stopwatch", "stories", "style", "sun", "support", "swap-vertical", "swap", "sweden", "swiss", "sync", "tab", "tag", "tap-double", "tap-single", "template", "tennis", "terminal", "terrain", "thermometer", "thermostat", "tikcode", "time", "timelapse", "timer", "today", "toggle-off", "toggle-on", "toggle-square-off", "toggle-square", "toolbar-bottom", "toolbar-left", "toolbar-right", "toolbar-top", "toolbox", "touchpad", "track", "transcript", "trash-empty", "trash", "tree", "trees", "trending-down", "trending", "trophy", "tv", "ui-kit", "umbrella", "unavailable", "unblock", "undo", "unsplash", "usb-c", "usb", "user-add", "user-list", "user-remove", "user", "view-cols", "view-comfortable", "view-day", "view-grid", "view-list", "view-month", "view-split", "vinyl", "voicemail-o", "voicemail-r", "voicemail", "volume", "webcam", "website", "work-alt", "yinyang", "zoom-in", "zoom-out", "rectangle-rounded", "card", "image-text", "border-top", "full-width-screen", "text-input", "number-input", "canvas-alert", "warning", "settings", "query-string", "json", "yes-no", "diamond-outline", "diamond-fill"];
 /** A list of available icon names that can be used with the Uniform brand */
 type IconName = (typeof iconNames)[number];

package/dist/index.d.ts

@@ -20527,6 +20527,60 @@ type DetailsProps = React$1.HTMLAttributes<HTMLDetailsElement> & {
 /** @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;
 
+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 */
+    stackId: string;
+    /** The width of the drawers. In any CSS length unit (px, rem, %, et al). Can't use CSS functions (e.g. calc())
+     * @default 'medium'
+     */
+    width?: 'narrow' | 'medium' | 'wide' | (string & NonNullable<unknown>);
+    /** The minimum width of the drawers. In any CSS length unit (px, rem, %, et al)
+     * @default '0'
+     */
+    minWidth?: string;
+    /** The maximum width of the drawers. In any CSS length unit (px, rem, %, et al)
+     * @default '100%'
+     */
+    maxWidth?: string;
+    /** Sets the css position value
+     * @default 'absolute'
+     */
+    position?: 'absolute' | 'fixed' | 'sticky';
+    /** Opens the drawer from left to right
+     * @default false
+     */
+    leftAligned?: boolean;
+    /**
+     * If a drawer in the stack has a specific `width` prop, and its value is larger than the width of the current stack,
+     * the width of the stack will be automatically adjusted to accommodate for that.
+     * Set this prop to `true` to disable this behavior.
+     * @default false
+     */
+    withoutFluidWidth?: boolean;
+}
+/**
+ * Renders a stack of drawers in a different location than their original position in the component tree. Uses React Portal under the hood.
+ * @example <DrawerProvider><Drawer id="my-drawer" stackId="my-stack" header="Title">Hello</Drawer><DrawerRenderer stackId="my-stack"/></DrawerProvider>
+ */
+declare const DrawerRenderer: ({ stackId, position, width, minWidth, maxWidth, leftAligned, withoutFluidWidth, ...otherProps }: DrawerRendererProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element | null;
+interface DrawerRendererItemProps extends React__default.HTMLAttributes<HTMLDivElement> {
+    index: number;
+    totalDrawers: number;
+    width: DrawerRendererProps['width'];
+    minWidth: Required<DrawerRendererProps['minWidth']>;
+    maxWidth: Required<DrawerRendererProps['maxWidth']>;
+    leftAligned: Required<DrawerRendererProps['leftAligned']>;
+    onOverlayClick?: () => void;
+}
+declare const getDrawerAttributes: ({ providerId, stackId, id, }: {
+    providerId: string;
+    stackId?: string | undefined;
+    id: string;
+}) => {
+    'data-drawer-id': string;
+    'data-testid': string;
+};
+
 interface DrawerItem {
     /** An ID for the drawer. It should be unique in the stack where it's rendered */
     id: string;
@@ -20538,6 +20592,12 @@ interface DrawerItem {
     stackId?: string;
     /** Just like React.Key, changing this value indicates that the drawer has changed and we need to close the current instance and open a new one */
     instanceKey?: string;
+    /**
+     * The desired width of the drawer.
+     * This value is ignored if the drawer is part of a DrawerRenderer with `withoutFluidWidth`.
+     * If not set, the drawer will use the width of its renderer.
+     */
+    width?: DrawerRendererProps['width'];
     /** Called when the close button is clicked, the Escape button is pressed, or when the drawer's overlay is clicked  */
     onRequestClose?: () => void;
     /** Test ID for test automation **/
@@ -20568,12 +20628,12 @@ declare const DrawerProvider: ({ children }: React__default.PropsWithChildren) =
 declare const useDrawer: () => DrawerContextValue;
 declare const useCloseCurrentDrawer: () => (() => void) | undefined;
 
-interface DrawerProps extends DrawerItem {
+type DrawerProps = DrawerItem & Omit<DrawerRendererProps, 'stackId'> & {
     header?: React__default.ReactNode;
     children?: React__default.ReactNode;
     bgColor?: 'var(--gray-50)' | 'var(--white)';
     leftAligned?: DrawerRendererProps['leftAligned'];
-}
+};
 declare const CurrentDrawerContext: React__default.Context<{
     id?: string | undefined;
     stackId?: string | undefined;
@@ -20588,7 +20648,12 @@ declare const useCurrentDrawer: () => {
  * A drawer component that opens from the right side of is parent. The component is used in combination with DrawerProvider and DrawerRenderer
  * @example <Drawer id="my-drawer" header="Title">Hello</Drawer>
  */
-declare const Drawer: React__default.ForwardRefExoticComponent<DrawerProps & Omit<DrawerRendererProps, "stackId"> & React__default.RefAttributes<HTMLDivElement>>;
+declare const Drawer: React__default.ForwardRefExoticComponent<DrawerItem & Omit<DrawerRendererProps, "stackId"> & {
+    header?: React__default.ReactNode;
+    children?: React__default.ReactNode;
+    bgColor?: "var(--white)" | "var(--gray-50)" | undefined;
+    leftAligned?: DrawerRendererProps['leftAligned'];
+} & React__default.RefAttributes<HTMLDivElement>>;
 
 type DrawerContentProps = {
     children: ReactNode;
@@ -20597,53 +20662,6 @@ type DrawerContentProps = {
 } & HTMLAttributes<HTMLDivElement>;
 declare const DrawerContent: ({ children, buttonGroup, noPadding, ...props }: DrawerContentProps) => _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 */
-    stackId: string;
-    /** The width of the drawers. In any CSS length unit (px, rem, %, et al). Can't use CSS functions (e.g. calc())
-     * @default 'medium'
-     */
-    width?: string | 'narrow' | 'medium' | 'wide';
-    /** The minimum width of the drawers. In any CSS length unit (px, rem, %, et al)
-     * @default '0'
-     */
-    minWidth?: string;
-    /** The maximum width of the drawers. In any CSS length unit (px, rem, %, et al)
-     * @default '100%'
-     */
-    maxWidth?: string;
-    /** Sets the css position value
-     * @default 'absolute'
-     */
-    position?: 'absolute' | 'fixed' | 'sticky';
-    /** Opens the drawer from left to right
-     * @default false
-     */
-    leftAligned?: boolean;
-}
-/**
- * Renders a stack of drawers in a different location than their original position in the component tree. Uses React Portal under the hood.
- * @example <DrawerProvider><Drawer id="my-drawer" stackId="my-stack" header="Title">Hello</Drawer><DrawerRenderer stackId="my-stack"/></DrawerProvider>
- */
-declare const DrawerRenderer: ({ stackId, position, width, minWidth, maxWidth, leftAligned, ...otherProps }: DrawerRendererProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element | null;
-interface DrawerRendererItemProps extends React__default.HTMLAttributes<HTMLDivElement> {
-    index: number;
-    totalDrawers: number;
-    width: DrawerRendererProps['width'];
-    minWidth: Required<DrawerRendererProps['minWidth']>;
-    maxWidth: Required<DrawerRendererProps['maxWidth']>;
-    leftAligned: Required<DrawerRendererProps['leftAligned']>;
-    onOverlayClick?: () => void;
-}
-declare const getDrawerAttributes: ({ providerId, stackId, id, }: {
-    providerId: string;
-    stackId?: string | undefined;
-    id: string;
-}) => {
-    'data-drawer-id': string;
-    'data-testid': string;
-};
-
 declare const iconNames: readonly ["add-r", "add", "airplane", "alarm", "album", "align-bottom", "align-center", "align-left", "align-middle", "align-right", "align-top", "anchor", "apple-watch", "arrange-back", "arrange-front", "arrow-align-h", "arrow-align-v", "arrow-bottom-left-o", "arrow-bottom-left-r", "arrow-bottom-left", "arrow-bottom-right-o", "arrow-bottom-right-r", "arrow-bottom-right", "arrow-down-o", "arrow-down-r", "arrow-down", "arrow-left-o", "arrow-left-r", "arrow-left", "arrow-long-down-c", "arrow-long-down-e", "arrow-long-down-l", "arrow-long-down-r", "arrow-long-down", "arrow-long-left-c", "arrow-long-left-e", "arrow-long-left-l", "arrow-long-left-r", "arrow-long-left", "arrow-long-right-c", "arrow-long-right-e", "arrow-long-right-l", "arrow-long-right-r", "arrow-long-right", "arrow-long-up-c", "arrow-long-up-e", "arrow-long-up-l", "arrow-long-up-r", "arrow-long-up", "arrow-right-o", "arrow-right-r", "arrow-right", "arrow-top-left-o", "arrow-top-left-r", "arrow-top-left", "arrow-top-right-o", "arrow-top-right-r", "arrow-top-right", "arrow-up-o", "arrow-up-r", "arrow-up", "arrows-breake-h", "arrows-breake-v", "arrows-exchange-alt-v", "arrows-exchange-alt", "arrows-exchange-v", "arrows-exchange", "arrows-expand-down-left", "arrows-expand-down-right", "arrows-expand-left-alt", "arrows-expand-left", "arrows-expand-right-alt", "arrows-expand-right", "arrows-expand-up-left", "arrows-expand-up-right", "arrows-h-alt", "arrows-h", "arrows-merge-alt-h", "arrows-merge-alt-v", "arrows-scroll-h", "arrows-scroll-v", "arrows-shrink-h", "arrows-shrink-v", "arrows-v-alt", "arrows-v", "assign", "asterisk", "attachment", "attribution", "awards", "backspace", "band-aid", "battery-empty", "battery-full", "battery", "bee", "bell", "bitbucket", "block", "board", "bolt", "bookmark", "border-all", "border-bottom", "border-left", "border-right", "border-style-dashed", "border-style-dotted", "border-style-solid", "border-top", "bot", "bowl", "box", "boy", "briefcase", "browse", "browser", "brush", "bulb", "c-plus-plus", "calculator", "calendar-dates", "calendar-due", "calendar-next", "calendar-today", "calendar-two", "calendar", "calibrate", "camera", "cap", "captions", "card-clubs", "card-diamonds", "card-hearts", "card-spades", "carousel", "cast", "chart", "check-o", "check-r", "check", "chevron-double-down-o", "chevron-double-down-r", "chevron-double-down", "chevron-double-left-o", "chevron-double-left-r", "chevron-double-left", "chevron-double-right-o", "chevron-double-right-r", "chevron-double-right", "chevron-double-up-o", "chevron-double-up-r", "chevron-double-up", "chevron-down-o", "chevron-down-r", "chevron-down", "chevron-left-o", "chevron-left-r", "chevron-left", "chevron-right-o", "chevron-right-r", "chevron-right", "chevron-up-o", "chevron-up-r", "chevron-up", "clapper-board", "clear-formatting", "clipboard", "close-o", "close-r", "close", "cloud", "code-slash", "code", "coffee", "collage", "color-bucket", "color-picker", "comment", "community", "components", "compress-left", "compress-right", "compress-v", "compress", "controller", "copy", "copyright", "corner-double-down-left", "corner-double-down-right", "corner-double-left-down", "corner-double-left-up", "corner-double-right-down", "corner-double-right-up", "corner-double-up-left", "corner-double-up-right", "corner-down-left", "corner-down-right", "corner-left-down", "corner-left-up", "corner-right-down", "corner-right-up", "corner-up-left", "corner-up-right", "credit-card", "crop", "cross", "crown", "danger", "dark-mode", "data", "database", "debug", "desktop", "details-less", "details-more", "dialpad", "dice-1", "dice-2", "dice-3", "dice-4", "dice-5", "dice-6", "disc", "display-flex", "display-fullwidth", "display-grid", "display-spacing", "distribute-horizontal", "distribute-vertical", "dock-bottom", "dock-left", "dock-right", "dock-window", "dollar", "drive", "drop-invert", "drop-opacity", "drop", "duplicate", "edit-black-point", "edit-contrast", "edit-exposure", "edit-fade", "edit-flip-h", "edit-flip-v", "edit-highlight", "edit-markup", "edit-mask", "edit-noise", "edit-shadows", "edit-straight", "edit-unmask", "eject", "enter", "erase", "ereader", "ericsson", "ethernet", "euro", "expand", "export", "extension-add", "extension-alt", "extension-remove", "extension", "external", "eye-alt", "eye", "feed", "file-add", "file-document", "file-remove", "file", "film", "filters", "flag-alt", "flag", "folder-add", "folder-remove", "folder", "font-height", "font-spacing", "format-bold", "format-center", "format-color", "format-code", "format-heading", "format-indent-decrease", "format-indent-increase", "format-italic", "format-justify", "format-left", "format-line-height", "format-right", "format-separator", "format-slash", "format-strike", "format-subscript", "format-superscript", "format-text", "format-underline", "format-uppercase", "games", "gender-female", "gender-male", "ghost-character", "gift", "girl", "git-branch", "git-commit", "git-fork", "git-pull", "glass-alt", "glass", "globe-alt", "globe", "gym", "hashtag", "headset", "heart", "home-alt", "home-screen", "home", "icecream", "image", "import", "inbox", "infinity", "info", "inpicture", "insert-after-o", "insert-after-r", "insert-after", "insert-before-o", "insert-before-r", "insert-before", "insights", "internal", "key", "keyboard", "keyhole", "laptop", "layout-grid-small", "layout-grid", "layout-list", "layout-list-numbered", "layout-pin", "link", "list-tree", "list", "live-photo", "loadbar-alt", "loadbar-doc", "loadbar-sound", "loadbar", "lock-unlock", "lock", "log-in", "log-off", "log-out", "loupe", "magnet", "mail-forward", "mail-open", "mail-reply", "mail", "math-divide", "math-equal", "math-minus", "math-percent", "math-plus", "maximize-alt", "maximize", "media-live", "media-podcast", "menu-boxed", "menu-cake", "menu-cheese", "menu-grid-o", "menu-grid-r", "menu-hotdog", "menu-left-alt", "menu-left", "menu-motion", "menu-oreos", "menu-right-alt", "menu-right", "menu-round", "menu", "merge-horizontal", "merge-vertical", "mic", "mini-player", "minimize-alt", "minimize", "modem", "moon", "more-alt", "more-o", "more-r", "more-vertical-alt", "more-vertical-o", "more-vertical-r", "more-vertical", "more", "mouse", "move-down", "move-left", "move-right", "move-task", "move-up", "music-note", "music-speaker", "music", "nametag", "notes", "notifications", "options", "organisation", "password", "path-back", "path-crop", "path-divide", "path-exclude", "path-front", "path-intersect", "path-outline", "path-trim", "path-unite", "pen", "pentagon-bottom-left", "pentagon-bottom-right", "pentagon-down", "pentagon-left", "pentagon-right", "pentagon-top-left", "pentagon-top-right", "pentagon-up", "performance", "phone", "photoscan", "piano", "pill", "pin-alt", "pin-bottom", "pin-top", "pin", "play-backwards", "play-button-o", "play-button-r", "play-button", "play-forwards", "play-list-add", "play-list-check", "play-list-remove", "play-list-search", "play-list", "play-pause-o", "play-pause-r", "play-pause", "play-stop-o", "play-stop-r", "play-stop", "play-track-next-o", "play-track-next-r", "play-track-next", "play-track-prev-o", "play-track-prev-r", "play-track-prev", "plug", "polaroid", "poll", "presentation", "printer", "profile", "pull-clear", "push-chevron-down-o", "push-chevron-down-r", "push-chevron-down", "push-chevron-left-o", "push-chevron-left-r", "push-chevron-left", "push-chevron-right-o", "push-chevron-right-r", "push-chevron-right", "push-chevron-up-o", "push-chevron-up-r", "push-chevron-up", "push-down", "push-left", "push-right", "push-up", "qr", "quote-o", "quote", "radio-check", "radio-checked", "ratio", "read", "readme", "record", "redo", "remote", "remove-r", "remove", "rename", "reorder", "repeat", "ring", "row-first", "row-last", "ruler", "sand-clock", "scan", "screen-mirror", "screen-shot", "screen-wide", "screen", "scroll-h", "scroll-v", "search-found", "search-loading", "search", "select-o", "select-r", "select", "server", "shape-circle", "shape-half-circle", "shape-hexagon", "shape-rhombus", "shape-square", "shape-triangle", "shape-zigzag", "share", "shield", "shopping-bag", "shopping-cart", "shortcut", "sidebar-open", "sidebar-right", "sidebar", "signal", "size", "sleep", "smart-home-boiler", "smart-home-cooker", "smart-home-heat", "smart-home-light", "smart-home-refrigerator", "smart-home-wash-machine", "smartphone-chip", "smartphone-ram", "smartphone-shake", "smartphone", "smile-mouth-open", "smile-neutral", "smile-no-mouth", "smile-none", "smile-sad", "smile-upside", "smile", "software-download", "software-upload", "sort-az", "sort-za", "space-between-v", "space-between", "spinner-alt", "spinner-two-alt", "spinner-two", "spinner", "stack", "stopwatch", "stories", "style", "sun", "support", "swap-vertical", "swap", "sweden", "swiss", "sync", "tab", "tag", "tap-double", "tap-single", "template", "tennis", "terminal", "terrain", "thermometer", "thermostat", "tikcode", "time", "timelapse", "timer", "today", "toggle-off", "toggle-on", "toggle-square-off", "toggle-square", "toolbar-bottom", "toolbar-left", "toolbar-right", "toolbar-top", "toolbox", "touchpad", "track", "transcript", "trash-empty", "trash", "tree", "trees", "trending-down", "trending", "trophy", "tv", "ui-kit", "umbrella", "unavailable", "unblock", "undo", "unsplash", "usb-c", "usb", "user-add", "user-list", "user-remove", "user", "view-cols", "view-comfortable", "view-day", "view-grid", "view-list", "view-month", "view-split", "vinyl", "voicemail-o", "voicemail-r", "voicemail", "volume", "webcam", "website", "work-alt", "yinyang", "zoom-in", "zoom-out", "rectangle-rounded", "card", "image-text", "border-top", "full-width-screen", "text-input", "number-input", "canvas-alert", "warning", "settings", "query-string", "json", "yes-no", "diamond-outline", "diamond-fill"];
 /** A list of available icon names that can be used with the Uniform brand */
 type IconName = (typeof iconNames)[number];

package/dist/index.js

@@ -13353,9 +13353,9 @@ var useCurrentDrawer = () => {
   return (0, import_react54.useContext)(CurrentDrawerContext);
 };
 var Drawer = import_react54.default.forwardRef(
-  ({ width, minWidth, maxWidth, position, leftAligned, ...drawerProps }, ref) => {
+  ({ minWidth, maxWidth, position, leftAligned, ...drawerProps }, ref) => {
     const { stackId: inheritedStackId } = useCurrentDrawer();
-    const drawerRendererProps = { width, minWidth, maxWidth, position, leftAligned };
+    const drawerRendererProps = { width: drawerProps.width, minWidth, maxWidth, position, leftAligned };
     return 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: [
       /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DrawerInner, { ref, ...drawerProps }),
       /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DrawerRenderer, { stackId: defaultSackId, ...drawerRendererProps })
@@ -13372,6 +13372,7 @@ var DrawerInner = ({
   instanceKey,
   onRequestClose,
   leftAligned,
+  width,
   testId = "side-dialog"
 }) => {
   const { registerDrawer, unregisterDrawer, providerId } = useDrawer();
@@ -13380,6 +13381,7 @@ var DrawerInner = ({
   (0, import_react54.useEffect)(() => {
     registerDrawer({
       drawer: {
+        width,
         id,
         stackId,
         onRequestClose,
@@ -13485,6 +13487,11 @@ var DrawerContent2 = ({ children, buttonGroup, noPadding = false, ...props }) =>
 // src/components/Drawer/DrawerRenderer.tsx
 var import_react56 = require("react");
 var import_jsx_runtime46 = require("@emotion/react/jsx-runtime");
+var drawerWidth = {
+  narrow: "29rem",
+  medium: "43rem",
+  wide: "57rem"
+};
 var maxLayeringInPx = 64;
 var idealDistanceBetweenLayersInPx = 16;
 var DrawerRenderer = ({
@@ -13494,15 +13501,11 @@ var DrawerRenderer = ({
   minWidth = "0",
   maxWidth = "100%",
   leftAligned = false,
+  withoutFluidWidth = false,
   ...otherProps
 }) => {
   const { drawersRegistry, providerId } = useDrawer();
   const drawersToRender = drawersRegistry.filter(({ stackId: sId }) => sId === stackId);
-  const drawerWidth = {
-    narrow: "29rem",
-    medium: "43rem",
-    wide: "57rem"
-  };
   (0, import_react56.useEffect)(() => {
     drawersToRender.forEach(({ isFirstRender, onFirstRender }) => {
       if (isFirstRender) {
@@ -13510,6 +13513,17 @@ var DrawerRenderer = ({
       }
     });
   }, [drawersToRender]);
+  const unionWidth = (0, import_react56.useMemo)(() => {
+    var _a;
+    const rendererWidth = (_a = drawerWidth[width]) != null ? _a : width;
+    if (withoutFluidWidth) {
+      return rendererWidth;
+    }
+    const drawerWidths = [rendererWidth, ...drawersToRender.map(({ width: width2 }) => width2)].filter(
+      (v) => typeof v === "string"
+    );
+    return `max(${drawerWidths.join()})`;
+  }, [drawersToRender, width, withoutFluidWidth]);
   if (drawersToRender.length === 0) {
     return null;
   }
@@ -13522,29 +13536,26 @@ var DrawerRenderer = ({
         position === "sticky" ? { height: "100%", marginTop: "-100%" } : void 0
       ],
       ...otherProps,
-      children: drawersToRender.map(({ id, stackId: stackId2, onRequestClose }, index) => {
-        var _a;
-        return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-          DrawerWrapper,
-          {
-            index,
-            totalDrawers: drawersToRender.length,
-            width: (_a = drawerWidth[width]) != null ? _a : width,
-            minWidth,
-            maxWidth,
-            onOverlayClick: onRequestClose,
-            leftAligned,
-            children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
-              "div",
-              {
-                ...getDrawerAttributes({ providerId, stackId: stackId2, id }),
-                style: { width: "100%", height: "100%" }
-              }
-            )
-          },
-          `${stackId2}-${id}`
-        );
-      })
+      children: drawersToRender.map(({ id, stackId: stackId2, onRequestClose }, index) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+        DrawerWrapper,
+        {
+          index,
+          totalDrawers: drawersToRender.length,
+          width: unionWidth,
+          minWidth,
+          maxWidth,
+          onOverlayClick: onRequestClose,
+          leftAligned,
+          children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+            "div",
+            {
+              ...getDrawerAttributes({ providerId, stackId: stackId2, id }),
+              style: { width: "100%", height: "100%" }
+            }
+          )
+        },
+        `${stackId2}-${id}`
+      ))
     }
   );
 };
@@ -16275,6 +16286,7 @@ var emptyParameterShell = import_react98.css`
   flex-grow: 1;
   padding: var(--spacing-xs);
   position: relative;
+  max-width: 100%;
 `;
 var emptyParameterShellText = import_react98.css`
   background: var(--brand-secondary-6);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "19.38.3-alpha.70+55e5a8fe1",
+  "version": "19.39.0",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -24,8 +24,8 @@
     "@storybook/react": "6.5.16",
     "@types/react": "18.2.18",
     "@types/react-dom": "18.2.7",
-    "@uniformdev/canvas": "^19.38.3-alpha.70+55e5a8fe1",
-    "@uniformdev/richtext": "^19.38.3-alpha.70+55e5a8fe1",
+    "@uniformdev/canvas": "^19.39.0",
+    "@uniformdev/richtext": "^19.39.0",
     "autoprefixer": "10.4.14",
     "hygen": "6.2.11",
     "postcss": "8.4.27",
@@ -68,5 +68,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "55e5a8fe1d80971a93ea31d3a50cec72e71be70a"
+  "gitHead": "63b0b9b3d9b8f155fad931e9e5ca56d4bda5223a"
 }