@uniformdev/design-system 19.29.0 → 19.29.1-alpha.19

package/dist/esm/index.js

@@ -12543,7 +12543,8 @@ var Details = ({
 };
 
 // src/components/Drawer/Drawer.tsx
-import React12, { useEffect as useEffect5, useMemo as useMemo2, useRef as useRef2 } from "react";
+import React11, { createContext as createContext4, useContext as useContext5, useEffect as useEffect5, useRef as useRef3, useState as useState5 } from "react";
+import { createPortal } from "react-dom";
 import { CgChevronRight } from "react-icons/cg";
 
 // src/components/Drawer/Drawer.styles.ts
@@ -12654,9 +12655,10 @@ var drawerWrapperOverlayStyles = css39`
 `;
 
 // src/components/Drawer/DrawerProvider.tsx
-import { createContext as createContext3, useCallback, useContext as useContext4, useState as useState4 } from "react";
+import { createContext as createContext3, useCallback, useContext as useContext4, useRef as useRef2, useState as useState4 } from "react";
 import { jsx as jsx39 } from "@emotion/react/jsx-runtime";
 var DrawerContext = createContext3({
+  providerId: "",
   drawersRegistry: [],
   registerDrawer: () => {
   },
@@ -12665,6 +12667,7 @@ var DrawerContext = createContext3({
 });
 var DrawerProvider = ({ children }) => {
   const [drawersRegistry, setDrawersRegistry] = useState4([]);
+  const providerId = useRef2(crypto.randomUUID());
   useShortcut({
     handler: () => {
       var _a, _b;
@@ -12675,20 +12678,27 @@ var DrawerProvider = ({ children }) => {
   const registerDrawer = useCallback(
     ({ drawer, onFirstRender }) => {
       setDrawersRegistry((currentValue) => {
-        var _a;
+        var _a, _b;
         const alreadyRegisteredDrawerIndex = currentValue.findIndex((d) => isEqualDrawer(d, drawer));
         const alreadyRegisteredDrawer = currentValue[alreadyRegisteredDrawerIndex];
         const isFirstRender = !alreadyRegisteredDrawer;
-        if (isFirstRender) {
-          onFirstRender == null ? void 0 : onFirstRender();
-        }
         const shouldReplaceCurrent = alreadyRegisteredDrawer !== void 0 && !isEqualDrawerInstance(alreadyRegisteredDrawer, drawer);
+        const newDrawersRegistry = [...currentValue];
         if (shouldReplaceCurrent) {
           (_a = alreadyRegisteredDrawer.onRequestClose) == null ? void 0 : _a.call(alreadyRegisteredDrawer);
+          newDrawersRegistry.splice(alreadyRegisteredDrawerIndex, 1);
         }
-        const insertionIndex = alreadyRegisteredDrawerIndex >= 0 ? alreadyRegisteredDrawerIndex : currentValue.length;
-        const newDrawersRegistry = [...currentValue];
-        newDrawersRegistry.splice(insertionIndex, 1, drawer);
+        if (isFirstRender || shouldReplaceCurrent) {
+          onFirstRender == null ? void 0 : onFirstRender();
+        }
+        newDrawersRegistry.push({
+          registeredAt: (_b = alreadyRegisteredDrawer == null ? void 0 : alreadyRegisteredDrawer.registeredAt) != null ? _b : Date.now(),
+          ...drawer
+        });
+        newDrawersRegistry.sort((a, b) => {
+          var _a2, _b2;
+          return ((_a2 = a.registeredAt) != null ? _a2 : 0) - ((_b2 = b.registeredAt) != null ? _b2 : 0);
+        });
         return newDrawersRegistry;
       });
     },
@@ -12704,7 +12714,18 @@ var DrawerProvider = ({ children }) => {
     },
     [setDrawersRegistry]
   );
-  return /* @__PURE__ */ jsx39(DrawerContext.Provider, { value: { drawersRegistry, registerDrawer, unregisterDrawer }, children });
+  return /* @__PURE__ */ jsx39(
+    DrawerContext.Provider,
+    {
+      value: {
+        drawersRegistry,
+        registerDrawer,
+        unregisterDrawer,
+        providerId: providerId.current
+      },
+      children
+    }
+  );
 };
 var useDrawer = () => {
   return useContext4(DrawerContext);
@@ -12723,102 +12744,20 @@ function isEqualDrawerInstance(a, b) {
   return isEqualDrawer(a, b) && a.instanceKey === b.instanceKey;
 }
 
-// src/components/Drawer/DrawerRenderer.tsx
-import { createContext as createContext4, useContext as useContext5 } from "react";
-import { Fragment as Fragment5, jsx as jsx40, jsxs as jsxs22 } from "@emotion/react/jsx-runtime";
-var maxLayeringInPx = 64;
-var idealDistanceBetweenLayersInPx = 16;
-var CurrentDrawerRendererContext = createContext4({});
-var useCurrentDrawerRenderer = () => {
-  return useContext5(CurrentDrawerRendererContext);
-};
-var DrawerRenderer = ({
-  stackId,
-  position = "absolute",
-  width = "medium",
-  minWidth = "0",
-  maxWidth = "100%",
-  leftAligned = false,
-  ...otherProps
-}) => {
-  const { drawersRegistry } = useDrawer();
-  const drawersToRender = drawersRegistry.filter(({ stackId: sId }) => sId === stackId);
-  const drawerWidth = {
-    narrow: "29rem",
-    medium: "43rem",
-    wide: "57rem"
-  };
-  if (drawersToRender.length === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx40(CurrentDrawerRendererContext.Provider, { value: { stackId, leftAligned }, children: /* @__PURE__ */ jsx40(
-    "div",
-    {
-      css: [
-        drawerRendererStyles,
-        { position },
-        position === "sticky" ? { height: "100%", marginTop: "-100%" } : void 0
-      ],
-      ...otherProps,
-      children: drawersToRender.map(({ component, id, stackId: stackId2, onRequestClose }, index) => {
-        var _a;
-        return /* @__PURE__ */ jsx40(
-          DrawerWrapper,
-          {
-            index,
-            totalDrawers: drawersToRender.length,
-            width: (_a = drawerWidth[width]) != null ? _a : width,
-            minWidth,
-            maxWidth,
-            onOverlayClick: onRequestClose,
-            leftAligned,
-            children: component
-          },
-          `${stackId2}-${id}`
-        );
-      })
-    }
-  ) });
-};
-var DrawerWrapper = ({
-  index,
-  totalDrawers,
-  width,
-  minWidth,
-  maxWidth,
-  leftAligned,
-  onOverlayClick,
-  children
-}) => {
-  let offsetInPx = idealDistanceBetweenLayersInPx * index;
-  if (totalDrawers * idealDistanceBetweenLayersInPx > maxLayeringInPx) {
-    const relativeLevel = index === 0 ? 0 : index / totalDrawers;
-    offsetInPx = Math.round(maxLayeringInPx * relativeLevel);
-  }
-  const calculatedWidth = `calc(${width} - ${offsetInPx}px)`;
-  return /* @__PURE__ */ jsxs22(Fragment5, { children: [
-    /* @__PURE__ */ jsx40("div", { css: drawerWrapperOverlayStyles, onClick: onOverlayClick }),
-    /* @__PURE__ */ jsx40(
-      "div",
-      {
-        css: [drawerWrapperStyles, leftAligned ? drawerWrapperLeftAlignedStyles : null],
-        style: { width: calculatedWidth, minWidth, maxWidth },
-        children
-      }
-    )
-  ] });
-};
-
 // src/components/Drawer/Drawer.tsx
-import { jsx as jsx41, jsxs as jsxs23 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs22 } from "@emotion/react/jsx-runtime";
 var defaultSackId = "_default";
-var Drawer = React12.forwardRef(
+var CurrentDrawerContext = createContext4({});
+var useCurrentDrawer = () => {
+  return useContext5(CurrentDrawerContext);
+};
+var Drawer = React11.forwardRef(
   ({ width, minWidth, maxWidth, position, leftAligned, ...drawerProps }, ref) => {
-    const { stackId: inheritedStackId } = useCurrentDrawerRenderer();
+    const { stackId: inheritedStackId } = useCurrentDrawer();
     const drawerRendererProps = { width, minWidth, maxWidth, position, leftAligned };
-    return inheritedStackId ? /* @__PURE__ */ jsx41(DrawerInner, { ref, ...drawerProps, stackId: inheritedStackId }) : drawerProps.stackId ? /* @__PURE__ */ jsx41(DrawerInner, { ref, ...drawerProps }) : /* @__PURE__ */ jsxs23(DrawerProvider, { children: [
-      /* @__PURE__ */ jsx41(DrawerInner, { ref, ...drawerProps }),
-      /* @__PURE__ */ jsx41(DrawerRenderer, { stackId: defaultSackId, ...drawerRendererProps })
+    return drawerProps.stackId ? /* @__PURE__ */ jsx40(DrawerInner, { ref, ...drawerProps }) : inheritedStackId ? /* @__PURE__ */ jsx40(DrawerInner, { ref, ...drawerProps, stackId: inheritedStackId }) : /* @__PURE__ */ jsxs22(DrawerProvider, { children: [
+      /* @__PURE__ */ jsx40(DrawerInner, { ref, ...drawerProps }),
+      /* @__PURE__ */ jsx40(DrawerRenderer, { stackId: defaultSackId, ...drawerRendererProps })
     ] });
   }
 );
@@ -12831,13 +12770,40 @@ var DrawerInner = ({
   header,
   instanceKey,
   onRequestClose,
+  leftAligned,
   testId = "side-dialog"
 }) => {
-  const { registerDrawer, unregisterDrawer } = useDrawer();
-  const closeButtonRef = useRef2(null);
-  const component = useMemo2(() => {
-    const headerId = `dialog-header-${stackId}-${id}`;
-    return /* @__PURE__ */ jsxs23(
+  const { registerDrawer, unregisterDrawer, providerId } = useDrawer();
+  const closeButtonRef = useRef3(null);
+  const [rendererElement, setRendererElement] = useState5(null);
+  useEffect5(() => {
+    registerDrawer({
+      drawer: {
+        id,
+        stackId,
+        onRequestClose,
+        instanceKey
+      },
+      onFirstRender: () => {
+        setTimeout(() => {
+          var _a, _b;
+          setRendererElement(findDrawerRenderer({ providerId, stackId, id }));
+          if (ref && "current" in ref && !((_a = ref.current) == null ? void 0 : _a.contains(document.activeElement))) {
+            (_b = closeButtonRef.current) == null ? void 0 : _b.focus({ preventScroll: true });
+          }
+        }, 0);
+      }
+    });
+    return () => {
+      unregisterDrawer({ id, stackId, instanceKey });
+    };
+  }, [id, stackId, instanceKey, providerId, registerDrawer, unregisterDrawer]);
+  if (!rendererElement) {
+    return null;
+  }
+  const headerId = `dialog-header-${providerId}-${stackId}-${id}`;
+  return /* @__PURE__ */ jsx40(CurrentDrawerContext.Provider, { value: { id, stackId, leftAligned }, children: createPortal(
+    /* @__PURE__ */ jsxs22(
       "div",
       {
         ref,
@@ -12848,9 +12814,9 @@ var DrawerInner = ({
         css: drawerStyles(bgColor),
         "data-test-id": testId,
         children: [
-          /* @__PURE__ */ jsxs23("div", { css: headerWrapperStyles, children: [
-            header ? /* @__PURE__ */ jsx41("div", { id: headerId, css: drawerHeaderStyles, children: header }) : null,
-            /* @__PURE__ */ jsx41(
+          /* @__PURE__ */ jsxs22("div", { css: headerWrapperStyles, children: [
+            header ? /* @__PURE__ */ jsx40("div", { id: headerId, css: drawerHeaderStyles, children: header }) : null,
+            /* @__PURE__ */ jsx40(
               Button,
               {
                 ref: closeButtonRef,
@@ -12859,7 +12825,7 @@ var DrawerInner = ({
                 css: drawerCloseButtonStyles,
                 title: "Close dialog",
                 buttonType: "ghost",
-                children: /* @__PURE__ */ jsx41(
+                children: /* @__PURE__ */ jsx40(
                   Icon,
                   {
                     icon: CgChevronRight,
@@ -12871,34 +12837,17 @@ var DrawerInner = ({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx41("div", { css: drawerInnerStyles, children })
+          /* @__PURE__ */ jsx40("div", { css: drawerInnerStyles, children })
         ]
       }
-    );
-  }, [children, header, id, stackId, bgColor, onRequestClose, ref, testId]);
-  useEffect5(() => {
-    registerDrawer({
-      drawer: {
-        id,
-        component,
-        stackId,
-        onRequestClose,
-        instanceKey
-      },
-      onFirstRender: () => {
-        setTimeout(() => {
-          var _a, _b;
-          if (ref && "current" in ref && !((_a = ref.current) == null ? void 0 : _a.contains(document.activeElement))) {
-            (_b = closeButtonRef.current) == null ? void 0 : _b.focus({ preventScroll: true });
-          }
-        }, 0);
-      }
-    });
-  }, [component, instanceKey, registerDrawer]);
-  useEffect5(() => {
-    return () => unregisterDrawer({ id, stackId, instanceKey });
-  }, [id, stackId, instanceKey, unregisterDrawer]);
-  return null;
+    ),
+    rendererElement
+  ) });
+};
+var findDrawerRenderer = (params) => {
+  return document.querySelector(
+    Object.entries(getDrawerAttributes(params)).map(([key, value]) => `[${key}="${value}"]`).join("")
+  );
 };
 
 // src/components/Drawer/DrawerContent.styles.ts
@@ -12925,13 +12874,107 @@ var DrawerContentBtnGroup = css40`
 `;
 
 // src/components/Drawer/DrawerContent.tsx
-import { jsx as jsx42, jsxs as jsxs24 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs23 } from "@emotion/react/jsx-runtime";
 var DrawerContent2 = ({ children, buttonGroup, ...props }) => {
-  return /* @__PURE__ */ jsxs24("div", { css: DrawerContent, ...props, children: [
-    /* @__PURE__ */ jsx42("div", { css: DrawerContentInner, children }),
-    buttonGroup ? /* @__PURE__ */ jsx42("div", { css: DrawerContentBtnGroup, children: buttonGroup }) : null
+  return /* @__PURE__ */ jsxs23("div", { css: DrawerContent, ...props, children: [
+    /* @__PURE__ */ jsx41("div", { css: DrawerContentInner, children }),
+    buttonGroup ? /* @__PURE__ */ jsx41("div", { css: DrawerContentBtnGroup, children: buttonGroup }) : null
+  ] });
+};
+
+// src/components/Drawer/DrawerRenderer.tsx
+import { Fragment as Fragment5, jsx as jsx42, jsxs as jsxs24 } from "@emotion/react/jsx-runtime";
+var maxLayeringInPx = 64;
+var idealDistanceBetweenLayersInPx = 16;
+var DrawerRenderer = ({
+  stackId,
+  position = "absolute",
+  width = "medium",
+  minWidth = "0",
+  maxWidth = "100%",
+  leftAligned = false,
+  ...otherProps
+}) => {
+  const { drawersRegistry, providerId } = useDrawer();
+  const drawersToRender = drawersRegistry.filter(({ stackId: sId }) => sId === stackId);
+  const drawerWidth = {
+    narrow: "29rem",
+    medium: "43rem",
+    wide: "57rem"
+  };
+  if (drawersToRender.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx42(
+    "div",
+    {
+      css: [
+        drawerRendererStyles,
+        { position },
+        position === "sticky" ? { height: "100%", marginTop: "-100%" } : void 0
+      ],
+      ...otherProps,
+      children: drawersToRender.map(({ id, stackId: stackId2, onRequestClose }, index) => {
+        var _a;
+        return /* @__PURE__ */ jsx42(
+          DrawerWrapper,
+          {
+            index,
+            totalDrawers: drawersToRender.length,
+            width: (_a = drawerWidth[width]) != null ? _a : width,
+            minWidth,
+            maxWidth,
+            onOverlayClick: onRequestClose,
+            leftAligned,
+            children: /* @__PURE__ */ jsx42(
+              "div",
+              {
+                ...getDrawerAttributes({ providerId, stackId: stackId2, id }),
+                style: { width: "100%", height: "100%" }
+              }
+            )
+          },
+          `${stackId2}-${id}`
+        );
+      })
+    }
+  );
+};
+var DrawerWrapper = ({
+  index,
+  totalDrawers,
+  width,
+  minWidth,
+  maxWidth,
+  leftAligned,
+  onOverlayClick,
+  children
+}) => {
+  let offsetInPx = idealDistanceBetweenLayersInPx * index;
+  if (totalDrawers * idealDistanceBetweenLayersInPx > maxLayeringInPx) {
+    const relativeLevel = index === 0 ? 0 : index / totalDrawers;
+    offsetInPx = Math.round(maxLayeringInPx * relativeLevel);
+  }
+  const calculatedWidth = `calc(${width} - ${offsetInPx}px)`;
+  return /* @__PURE__ */ jsxs24(Fragment5, { children: [
+    /* @__PURE__ */ jsx42("div", { css: drawerWrapperOverlayStyles, onClick: onOverlayClick }),
+    /* @__PURE__ */ jsx42(
+      "div",
+      {
+        css: [drawerWrapperStyles, leftAligned ? drawerWrapperLeftAlignedStyles : null],
+        style: { width: calculatedWidth, minWidth, maxWidth },
+        children
+      }
+    )
   ] });
 };
+var getDrawerAttributes = ({
+  providerId,
+  stackId,
+  id
+}) => {
+  return { "data-drawer-id": `${providerId}-${stackId}-${id}` };
+};
 
 // src/components/Input/styles/CaptionText.styles.ts
 import { css as css41 } from "@emotion/react";
@@ -13066,7 +13109,7 @@ var ErrorMessage = ({ message, testId, ...otherProps }) => {
 };
 
 // src/components/Input/Fieldset.tsx
-import * as React13 from "react";
+import * as React12 from "react";
 
 // src/components/Input/styles/Fieldset.styles.ts
 import { css as css44 } from "@emotion/react";
@@ -13110,7 +13153,7 @@ var fieldsetBody = css44`
 
 // src/components/Input/Fieldset.tsx
 import { jsx as jsx46, jsxs as jsxs27 } from "@emotion/react/jsx-runtime";
-var Fieldset = React13.forwardRef(
+var Fieldset = React12.forwardRef(
   ({ legend, disabled, children, invert, ...props }, ref) => {
     return /* @__PURE__ */ jsxs27("fieldset", { css: fieldsetContainer(Boolean(invert)), ref, disabled, ...props, children: [
       legend,
@@ -13147,7 +13190,7 @@ var InfoMessage = ({ message, testId, ...props }) => {
 };
 
 // src/components/Input/Input.tsx
-import * as React14 from "react";
+import * as React13 from "react";
 
 // src/components/Input/Label.tsx
 import { jsx as jsx48 } from "@emotion/react/jsx-runtime";
@@ -13190,7 +13233,7 @@ var WarningMessage = ({ message, testId, ...props }) => {
 
 // src/components/Input/Input.tsx
 import { jsx as jsx50, jsxs as jsxs30 } from "@emotion/react/jsx-runtime";
-var Input = React14.forwardRef(
+var Input = React13.forwardRef(
   ({
     label,
     icon,
@@ -13387,7 +13430,7 @@ function InputComboBox(props) {
 
 // src/components/Input/InputInlineSelect.tsx
 import { css as css48 } from "@emotion/react";
-import { useRef as useRef3, useState as useState5 } from "react";
+import { useRef as useRef4, useState as useState6 } from "react";
 import { CgChevronDown as CgChevronDown2 } from "react-icons/cg";
 
 // src/components/Input/styles/InputInlineSelect.styles.ts
@@ -13467,8 +13510,8 @@ var InputInlineSelect = ({
   ...props
 }) => {
   var _a;
-  const [menuVisible, setMenuVisible] = useState5(false);
-  const divRef = useRef3(null);
+  const [menuVisible, setMenuVisible] = useState6(false);
+  const divRef = useRef4(null);
   useOutsideClick(divRef, () => setMenuVisible(false));
   const selected = options.find((option) => option.value === value);
   return /* @__PURE__ */ jsxs31(
@@ -13628,9 +13671,9 @@ var InputSelect = ({
 };
 
 // src/components/Input/InputToggle.tsx
-import * as React15 from "react";
+import * as React14 from "react";
 import { jsx as jsx55, jsxs as jsxs33 } from "@emotion/react/jsx-runtime";
-var InputToggle = React15.forwardRef(
+var InputToggle = React14.forwardRef(
   ({
     label,
     type,
@@ -14135,7 +14178,7 @@ var LoadingIndicator = ({ ...props }) => {
 };
 
 // src/components/LoadingOverlay/LoadingOverlay.tsx
-import { useCallback as useCallback2, useEffect as useEffect6, useRef as useRef4 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect6, useRef as useRef5 } from "react";
 
 // src/components/LoadingOverlay/LoadingOverlay.styles.ts
 import { css as css56 } from "@emotion/react";
@@ -14181,7 +14224,7 @@ var LoadingOverlay = ({
   isPaused = false,
   children
 }) => {
-  const lottieRef = useRef4(null);
+  const lottieRef = useRef5(null);
   const onLoopComplete = useCallback2(() => {
     var _a, _b, _c;
     if (isPaused && !((_b = (_a = lottieRef.current) == null ? void 0 : _a.animationItem) == null ? void 0 : _b.isPaused)) {
@@ -14517,7 +14560,7 @@ var EditTeamIntegrationTile = ({
 
 // src/components/Tiles/IntegrationComingSoon.tsx
 import { css as css59 } from "@emotion/react";
-import { useEffect as useEffect7, useState as useState6 } from "react";
+import { useEffect as useEffect7, useState as useState7 } from "react";
 import { CgHeart } from "react-icons/cg";
 import { jsx as jsx71, jsxs as jsxs46 } from "@emotion/react/jsx-runtime";
 var IntegrationComingSoon = ({
@@ -14528,7 +14571,7 @@ var IntegrationComingSoon = ({
   timing = 1e3,
   ...props
 }) => {
-  const [upVote, setUpVote] = useState6(false);
+  const [upVote, setUpVote] = useState7(false);
   const handleUpVoteInteraction = () => {
     setUpVote((prev) => !prev);
     onUpVoteClick();
@@ -14898,7 +14941,7 @@ var IntegrationModalHeader = ({ icon, name, menu: menu2, children }) => {
 };
 
 // src/components/Tooltip/Tooltip.tsx
-import React17 from "react";
+import React16 from "react";
 import {
   Tooltip as ReakitTooltip,
   TooltipArrow,
@@ -14928,7 +14971,7 @@ import { Fragment as Fragment10, jsx as jsx79, jsxs as jsxs51 } from "@emotion/r
 function Tooltip({ children, title, placement = "bottom", visible, ...props }) {
   const tooltip = useTooltipState({ placement });
   return !title ? children : /* @__PURE__ */ jsxs51(Fragment10, { children: [
-    /* @__PURE__ */ jsx79(TooltipReference, { ...tooltip, ...children.props, children: (referenceProps) => React17.cloneElement(children, referenceProps) }),
+    /* @__PURE__ */ jsx79(TooltipReference, { ...tooltip, ...children.props, children: (referenceProps) => React16.cloneElement(children, referenceProps) }),
     /* @__PURE__ */ jsxs51(ReakitTooltip, { ...tooltip, ...props, css: TooltipContainer, visible: visible != null ? visible : tooltip.visible, children: [
       /* @__PURE__ */ jsx79(TooltipArrow, { ...tooltip, css: TooltipArrowStyles }),
       title
@@ -15380,7 +15423,7 @@ var ParameterGroup = forwardRef8(
 );
 
 // src/components/ParameterInputs/ParameterImage.tsx
-import { forwardRef as forwardRef10, useCallback as useCallback3, useDeferredValue, useEffect as useEffect8, useState as useState8 } from "react";
+import { forwardRef as forwardRef10, useCallback as useCallback3, useDeferredValue, useEffect as useEffect8, useState as useState9 } from "react";
 
 // src/utils/url.ts
 var isValidUrl = (url, options = {}) => {
@@ -15393,7 +15436,7 @@ var isValidUrl = (url, options = {}) => {
 };
 
 // src/components/ParameterInputs/ParameterShell.tsx
-import { useState as useState7 } from "react";
+import { useState as useState8 } from "react";
 
 // src/components/ParameterInputs/ParameterLabel.tsx
 import { jsx as jsx84 } from "@emotion/react/jsx-runtime";
@@ -15512,7 +15555,7 @@ var ParameterShell = ({
   children,
   ...props
 }) => {
-  const [manualErrorMessage, setManualErrorMessage] = useState7(void 0);
+  const [manualErrorMessage, setManualErrorMessage] = useState8(void 0);
   const setErrorMessage = (message) => setManualErrorMessage(message);
   const errorMessaging = errorMessage || manualErrorMessage;
   return /* @__PURE__ */ jsxs56("div", { css: inputContainer2, ...props, children: [
@@ -15595,7 +15638,7 @@ var ParameterImageInner = forwardRef10(
   ({ ...props }, ref) => {
     const { value } = props;
     const { id, label, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = useParameterShell();
-    const [loading, setLoading] = useState8(false);
+    const [loading, setLoading] = useState9(false);
     const deferredValue = useDeferredValue(value);
     const errorText = "The text you provided is not a valid URL";
     const updateImageSrc = useCallback3(() => {
@@ -15947,7 +15990,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 useEffect13, useRef as useRef6 } from "react";
+import { useEffect as useEffect13, useRef as useRef7 } from "react";
 
 // src/components/ParameterInputs/rich-text/CustomCodeNode.ts
 import { CodeNode } from "@lexical/code";
@@ -16180,7 +16223,7 @@ import {
   ElementNode as ElementNode2,
   FOCUS_COMMAND
 } from "lexical";
-import { useCallback as useCallback4, useEffect as useEffect10, useRef as useRef5, useState as useState9 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect10, useRef as useRef6, useState as useState10 } from "react";
 
 // src/components/Popover/Popover.styles.ts
 import { css as css73 } from "@emotion/react";
@@ -16324,7 +16367,7 @@ function convertAnchorElement(domNode) {
   }
   return { node };
 }
-var LinkNode = class extends ElementNode2 {
+var LinkNode = class _LinkNode extends ElementNode2 {
   constructor(props, key) {
     super(key);
     this.__link = props;
@@ -16340,7 +16383,7 @@ var LinkNode = class extends ElementNode2 {
     writable.__link = link2;
   }
   static clone(node) {
-    return new LinkNode(node.__link, node.__key);
+    return new _LinkNode(node.__link, node.__key);
   }
   static importJSON(serializedNode) {
     const node = $createLinkNode(serializedNode.link);
@@ -16539,10 +16582,10 @@ var linkPopoverAnchor = css74`
 `;
 function LinkNodePlugin({ onConnectLink }) {
   const [editor] = useLexicalComposerContext2();
-  const [linkPopoverState, setLinkPopoverState] = useState9();
-  const linkPopoverElRef = useRef5(null);
-  const [isEditorFocused, setIsEditorFocused] = useState9(false);
-  const [isLinkPopoverFocused, setIsLinkPopoverFocused] = useState9(false);
+  const [linkPopoverState, setLinkPopoverState] = useState10();
+  const linkPopoverElRef = useRef6(null);
+  const [isEditorFocused, setIsEditorFocused] = useState10(false);
+  const [isLinkPopoverFocused, setIsLinkPopoverFocused] = useState10(false);
   useEffect10(() => {
     if (!isEditorFocused && !isLinkPopoverFocused) {
       setLinkPopoverState(void 0);
@@ -16797,7 +16840,7 @@ import {
   FORMAT_TEXT_COMMAND,
   SELECTION_CHANGE_COMMAND
 } from "lexical";
-import { useCallback as useCallback5, useEffect as useEffect12, useMemo as useMemo3, useState as useState10 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect12, useMemo as useMemo2, useState as useState11 } from "react";
 import { Fragment as Fragment14, jsx as jsx93, jsxs as jsxs61 } from "@emotion/react/jsx-runtime";
 var toolbar = css75`
   background: var(--gray-50);
@@ -17080,26 +17123,26 @@ var RichTextToolbar = ({ config }) => {
 var RichTextToolbar_default = RichTextToolbar;
 var useRichTextToolbarState = ({ config }) => {
   var _a;
-  const enabledBuiltInFormats = useMemo3(() => {
+  const enabledBuiltInFormats = useMemo2(() => {
     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 = useMemo3(() => {
+  const enabledBuiltInElements = useMemo2(() => {
     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 = useMemo3(() => {
+  const enabledBuiltInFormatsWithIcon = useMemo2(() => {
     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] = useState10([]);
-  const visibleFormatsWithIcon = useMemo3(() => {
+  const [activeFormats, setActiveFormats] = useState11([]);
+  const visibleFormatsWithIcon = useMemo2(() => {
     const visibleFormats = /* @__PURE__ */ new Set();
     activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
       visibleFormats.add(type);
@@ -17109,7 +17152,7 @@ var useRichTextToolbarState = ({ config }) => {
     });
     return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
   }, [activeFormats, enabledBuiltInFormatsWithIcon]);
-  const visibleFormatsWithoutIcon = useMemo3(() => {
+  const visibleFormatsWithoutIcon = useMemo2(() => {
     const visibleFormats = /* @__PURE__ */ new Set();
     activeFormats.filter((type) => !FORMATS_WITH_ICON.has(type)).forEach((type) => {
       visibleFormats.add(type);
@@ -17119,11 +17162,11 @@ var useRichTextToolbarState = ({ config }) => {
     });
     return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
   }, [activeFormats, enabledBuiltInFormatsWithoutIcon]);
-  const [activeElement, setActiveElement] = useState10("paragraph");
+  const [activeElement, setActiveElement] = useState11("paragraph");
   const enabledTextualElements = enabledBuiltInElements.filter(
     (element) => TEXTUAL_ELEMENTS.includes(element.type)
   );
-  const visibleTextualElements = useMemo3(() => {
+  const visibleTextualElements = useMemo2(() => {
     if (!TEXTUAL_ELEMENTS.includes(activeElement)) {
       return enabledTextualElements;
     }
@@ -17134,24 +17177,24 @@ var useRichTextToolbarState = ({ config }) => {
       }
     );
   }, [activeElement, (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn, enabledTextualElements]);
-  const [isLink, setIsLink] = useState10(false);
-  const linkElementVisible = useMemo3(() => {
+  const [isLink, setIsLink] = useState11(false);
+  const linkElementVisible = useMemo2(() => {
     return enabledBuiltInElements.some((element) => element.type === "link") || isLink;
   }, [isLink, enabledBuiltInElements]);
-  const visibleLists = useMemo3(() => {
+  const visibleLists = useMemo2(() => {
     return new Set(
       ["orderedList", "unorderedList"].filter(
         (type) => enabledBuiltInElements.some((element) => element.type === type) || activeElement === type
       )
     );
   }, [activeElement, enabledBuiltInElements]);
-  const quoteElementVisible = useMemo3(() => {
+  const quoteElementVisible = useMemo2(() => {
     return enabledBuiltInElements.some((element) => element.type === "quote") || activeElement === "quote";
   }, [activeElement, enabledBuiltInElements]);
-  const codeElementVisible = useMemo3(() => {
+  const codeElementVisible = useMemo2(() => {
     return enabledBuiltInElements.some((element) => element.type === "code") || activeElement === "code";
   }, [activeElement, enabledBuiltInElements]);
-  const visibleElementsWithIcons = useMemo3(() => {
+  const visibleElementsWithIcons = useMemo2(() => {
     const visibleElements = /* @__PURE__ */ new Set();
     if (linkElementVisible) {
       visibleElements.add("link");
@@ -17367,7 +17410,7 @@ var RichText = ({
   readOnly,
   editorInputClassName
 }) => {
-  const editorContainerRef = useRef6(null);
+  const editorContainerRef = useRef7(null);
   const [editor] = useLexicalComposerContext5();
   useEffect13(() => {
     if (onRichTextInit) {
@@ -17507,7 +17550,7 @@ var Popover2 = ({
 
 // src/components/ProgressList/ProgressList.tsx
 import { css as css78 } from "@emotion/react";
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo3 } from "react";
 import { CgCheckO as CgCheckO2, CgRadioCheck, CgRecord } from "react-icons/cg";
 
 // src/components/ProgressList/styles/ProgressList.styles.ts
@@ -17527,7 +17570,7 @@ var progressListItemStyles = css77`
 // src/components/ProgressList/ProgressList.tsx
 import { jsx as jsx99, jsxs as jsxs66 } from "@emotion/react/jsx-runtime";
 var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
-  const itemsWithStatus = useMemo4(() => {
+  const itemsWithStatus = useMemo3(() => {
     const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
     return items.map((item, index) => {
       let status = "queued";
@@ -17560,7 +17603,7 @@ var ProgressListItem = ({
   errorLevel = "danger",
   autoEllipsis = false
 }) => {
-  const Icon2 = useMemo4(() => {
+  const Icon2 = useMemo3(() => {
     if (error) {
       return warningIcon;
     }
@@ -17571,7 +17614,7 @@ var ProgressListItem = ({
     };
     return iconPerStatus[status];
   }, [status, error]);
-  const statusStyles = useMemo4(() => {
+  const statusStyles = useMemo3(() => {
     if (error) {
       return errorLevel === "caution" ? css78`
             color: rgb(161, 98, 7);
@@ -17609,7 +17652,7 @@ var ProgressListItem = ({
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { css as css80 } from "@emotion/react";
-import { useCallback as useCallback6, useMemo as useMemo5 } from "react";
+import { useCallback as useCallback6, useMemo as useMemo4 } from "react";
 import { CgCheck as CgCheck4 } from "react-icons/cg";
 
 // src/components/SegmentedControl/SegmentedControl.styles.ts
@@ -17724,7 +17767,7 @@ var SegmentedControl = ({
     },
     [options, onChange]
   );
-  const sizeStyles = useMemo5(() => {
+  const sizeStyles = useMemo4(() => {
     const map = {
       sm: css80({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
       md: css80({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
@@ -17732,7 +17775,7 @@ var SegmentedControl = ({
     };
     return map[size];
   }, [size]);
-  const isIconOnly = useMemo5(() => {
+  const isIconOnly = useMemo4(() => {
     return options.every((option) => option.icon && !option.label);
   }, [options]);
   return /* @__PURE__ */ jsx100(
@@ -17824,7 +17867,7 @@ var Skeleton = ({
 );
 
 // src/components/Switch/Switch.tsx
-import * as React20 from "react";
+import * as React19 from "react";
 
 // src/components/Switch/Switch.styles.ts
 import { css as css82 } from "@emotion/react";
@@ -17913,7 +17956,7 @@ var SwitchText = css82`
 
 // src/components/Switch/Switch.tsx
 import { Fragment as Fragment17, jsx as jsx102, jsxs as jsxs68 } from "@emotion/react/jsx-runtime";
-var Switch = React20.forwardRef(
+var Switch = React19.forwardRef(
   ({ label, infoText, toggleText, children, ...inputProps }, ref) => {
     let additionalText = infoText;
     if (infoText && toggleText) {
@@ -17931,7 +17974,7 @@ var Switch = React20.forwardRef(
 );
 
 // src/components/Table/Table.tsx
-import * as React21 from "react";
+import * as React20 from "react";
 
 // src/components/Table/Table.styles.ts
 import { css as css83 } from "@emotion/react";
@@ -17962,44 +18005,44 @@ var tableCellHead = css83`
 
 // src/components/Table/Table.tsx
 import { jsx as jsx103 } from "@emotion/react/jsx-runtime";
-var Table = React21.forwardRef(
+var Table = React20.forwardRef(
   ({ children, cellPadding, ...otherProps }, ref) => {
     return /* @__PURE__ */ jsx103("table", { ref, css: table({ cellPadding }), ...otherProps, children });
   }
 );
-var TableHead = React21.forwardRef(
+var TableHead = React20.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ jsx103("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
-var TableBody = React21.forwardRef(
+var TableBody = React20.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ jsx103("tbody", { ref, ...otherProps, children });
   }
 );
-var TableFoot = React21.forwardRef(
+var TableFoot = React20.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ jsx103("tfoot", { ref, ...otherProps, children });
   }
 );
-var TableRow = React21.forwardRef(
+var TableRow = React20.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ jsx103("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
-var TableCellHead = React21.forwardRef(
+var TableCellHead = React20.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ jsx103("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
-var TableCellData = React21.forwardRef(
+var TableCellData = React20.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ jsx103("td", { ref, ...otherProps, children });
   }
 );
 
 // src/components/Tabs/Tabs.tsx
-import { createContext as createContext6, useContext as useContext7, useEffect as useEffect14, useMemo as useMemo6 } from "react";
+import { createContext as createContext6, useContext as useContext7, useEffect as useEffect14, useMemo as useMemo5 } from "react";
 import {
   Tab as ReakitTab,
   TabList as ReakitTabList,
@@ -18043,7 +18086,7 @@ var useCurrentTab = () => {
   return context;
 };
 var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...props }) => {
-  const selected = useMemo6(() => {
+  const selected = useMemo5(() => {
     if (selectedId)
       return selectedId;
     return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
@@ -18195,6 +18238,7 @@ export {
   Container2 as Container,
   Counter,
   CreateTeamIntegrationTile,
+  CurrentDrawerContext,
   DashedBox,
   Details,
   DismissibleChipAction,
@@ -18332,6 +18376,7 @@ export {
   fadeInTop,
   fadeOutBottom,
   fullWidthScreenIcon,
+  getDrawerAttributes,
   growSubtle,
   imageTextIcon,
   infoFilledIcon,
@@ -18362,7 +18407,7 @@ export {
   textInput,
   useBreakpoint,
   useCloseCurrentDrawer,
-  useCurrentDrawerRenderer,
+  useCurrentDrawer,
   useCurrentTab,
   useDrawer,
   useIconContext,