@uniformdev/design-system 18.21.1-alpha.4 → 18.23.1-alpha.34

package/dist/esm/index.js

@@ -8209,19 +8209,19 @@ var UniformBadge = ({
       css: [SVG, theme === "dark" ? SVGDark : SVGLight],
       ...props,
       children: [
-        /* @__PURE__ */ jsx16("path", { d: "M28.998 0 0 16.744V50.23l28.998-16.744 29.004-16.743L28.998 0Z", fill: "#83C6E1" }),
+        /* @__PURE__ */ jsx16("path", { d: "M28.998 0 0 16.744V50.23l28.998-16.744 29.004-16.743L28.998 0Z", fill: "#7BB3FF" }),
         /* @__PURE__ */ jsx16(
           "path",
           {
             d: "M28.998 66.974V33.487L0 50.231v33.487l28.998 16.744 29.004-16.744V50.23L28.998 66.974Z",
-            fill: "#438FD5"
+            fill: "#498DFF"
           }
         ),
         /* @__PURE__ */ jsx16(
           "path",
           {
             d: "M58.002 16.744 28.998 33.487l29.004 16.744v33.487L87 66.975V33.487L58.002 16.744Z",
-            fill: "#F4220B"
+            fill: "#E61408"
           }
         )
       ]
@@ -8246,15 +8246,15 @@ var UniformLogo = ({
       css: [SVG, theme === "dark" ? SVGDark : SVGLight],
       ...props,
       children: [
-        /* @__PURE__ */ jsx17("path", { d: "M11.249 0 0 6.495v12.99l11.249-6.495L22.5 6.495 11.25 0Z", fill: "#83C6E1" }),
+        /* @__PURE__ */ jsx17("path", { d: "M11.249 0 0 6.495v12.99l11.249-6.495L22.5 6.495 11.25 0Z", fill: "#7BB3FF" }),
         /* @__PURE__ */ jsx17(
           "path",
           {
             d: "M11.249 25.98V12.99L0 19.486v12.99l11.249 6.495L22.5 32.476v-12.99L11.25 25.98Z",
-            fill: "#438FD5"
+            fill: "#498DFF"
           }
         ),
-        /* @__PURE__ */ jsx17("path", { d: "m22.5 6.495-11.25 6.496 11.25 6.495v12.99l11.25-6.495V12.99L22.5 6.495Z", fill: "#F4220B" }),
+        /* @__PURE__ */ jsx17("path", { d: "m22.5 6.495-11.25 6.496 11.25 6.495v12.99l11.25-6.495V12.99L22.5 6.495Z", fill: "#E61408" }),
         /* @__PURE__ */ jsx17(
           "path",
           {
@@ -9103,7 +9103,7 @@ var summary = css26`
   display: grid;
   grid-template-columns: 1.25rem 1fr;
   gap: var(--spacing-sm);
-  padding: var(--spacing-sm);
+  padding: var(--spacing-sm) 0;
 
   // hides the native arrow icon
   list-style: none;
@@ -9147,7 +9147,7 @@ var Details = ({ summary: summary2, children, isOpenByDefault = false, ...props
 };
 
 // src/components/Drawer/Drawer.tsx
-import React10, { useEffect as useEffect5, useMemo, useRef as useRef2 } from "react";
+import React11, { useEffect as useEffect5, useMemo, useRef as useRef2 } from "react";
 import { CgChevronRight } from "react-icons/cg";
 
 // src/components/Drawer/Drawer.styles.ts
@@ -9283,71 +9283,15 @@ function isEqualDrawerInstance(a, b) {
   return isEqualDrawer(a, b) && a.instanceKey === b.instanceKey;
 }
 
-// src/components/Drawer/Drawer.tsx
-import { jsx as jsx31, jsxs as jsxs17 } from "@emotion/react/jsx-runtime";
-var Drawer = React10.forwardRef(
-  ({ id, stackId, instanceKey, onRequestClose, header, bgColor, children }, ref) => {
-    const { registerDrawer, unregisterDrawer } = useDrawer();
-    const closeButtonRef = useRef2(null);
-    const component = useMemo(() => {
-      const headerId = `dialog-header-${stackId}-${id}`;
-      return /* @__PURE__ */ jsxs17(
-        "div",
-        {
-          ref,
-          id,
-          role: "dialog",
-          tabIndex: -1,
-          "aria-labelledby": headerId,
-          css: drawerStyles(bgColor),
-          "data-test-id": "side-dialog",
-          children: [
-            /* @__PURE__ */ jsx31(
-              Button,
-              {
-                ref: closeButtonRef,
-                type: "button",
-                onClick: onRequestClose,
-                css: drawerCloseButtonStyles,
-                title: "Close dialog",
-                buttonType: "ghost",
-                children: /* @__PURE__ */ jsx31(Icon, { icon: CgChevronRight, iconColor: "gray", size: "1.5rem" })
-              }
-            ),
-            header ? /* @__PURE__ */ jsx31("div", { id: headerId, css: drawerHeaderStyles, children: header }) : null,
-            /* @__PURE__ */ jsx31("div", { css: drawerInnerStyles, children })
-          ]
-        }
-      );
-    }, [children, header, id, stackId, bgColor, onRequestClose, ref]);
-    useEffect5(() => {
-      registerDrawer({
-        drawer: {
-          id,
-          component,
-          stackId,
-          onRequestClose,
-          instanceKey
-        },
-        onFirstRender: () => {
-          setTimeout(() => {
-            var _a;
-            (_a = closeButtonRef.current) == null ? void 0 : _a.focus({ preventScroll: true });
-          }, 0);
-        }
-      });
-    }, [component, instanceKey, registerDrawer]);
-    useEffect5(() => {
-      return () => unregisterDrawer({ id, stackId, instanceKey });
-    }, [id, stackId, instanceKey, unregisterDrawer]);
-    return null;
-  }
-);
-
 // src/components/Drawer/DrawerRenderer.tsx
-import { Fragment as Fragment4, jsx as jsx32, jsxs as jsxs18 } from "@emotion/react/jsx-runtime";
+import { createContext as createContext4, useContext as useContext5 } from "react";
+import { Fragment as Fragment4, jsx as jsx31, jsxs as jsxs17 } from "@emotion/react/jsx-runtime";
 var maxLayeringInPx = 64;
 var idealDistanceBetweenLayersInPx = 16;
+var CurrentDrawerRendererContext = createContext4({});
+var useCurrentDrawerRenderer = () => {
+  return useContext5(CurrentDrawerRendererContext);
+};
 var DrawerRenderer = ({
   stackId,
   position = "absolute",
@@ -9361,7 +9305,7 @@ var DrawerRenderer = ({
   if (drawersToRender.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx32("div", { css: drawerRendererStyles(position), ...otherProps, children: drawersToRender.map(({ component, id, stackId: stackId2, onRequestClose }, index) => /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx31(CurrentDrawerRendererContext.Provider, { value: { stackId }, children: /* @__PURE__ */ jsx31("div", { css: drawerRendererStyles(position), ...otherProps, children: drawersToRender.map(({ component, id, stackId: stackId2, onRequestClose }, index) => /* @__PURE__ */ jsx31(
     DrawerWrapper,
     {
       index,
@@ -9373,7 +9317,7 @@ var DrawerRenderer = ({
       children: component
     },
     `${stackId2}-${id}`
-  )) });
+  )) }) });
 };
 var DrawerWrapper = ({
   index,
@@ -9390,12 +9334,91 @@ var DrawerWrapper = ({
     offsetInPx = Math.round(maxLayeringInPx * relativeLevel);
   }
   const calculatedWidth = `calc(${width} - ${offsetInPx}px)`;
-  return /* @__PURE__ */ jsxs18(Fragment4, { children: [
-    /* @__PURE__ */ jsx32("div", { css: drawerWrapperOverlayStyles, onClick: onOverlayClick }),
-    /* @__PURE__ */ jsx32("div", { css: [drawerWrapperStyles, { width: calculatedWidth, minWidth, maxWidth }], children })
+  return /* @__PURE__ */ jsxs17(Fragment4, { children: [
+    /* @__PURE__ */ jsx31("div", { css: drawerWrapperOverlayStyles, onClick: onOverlayClick }),
+    /* @__PURE__ */ jsx31("div", { css: [drawerWrapperStyles, { width: calculatedWidth, minWidth, maxWidth }], children })
   ] });
 };
 
+// src/components/Drawer/Drawer.tsx
+import { jsx as jsx32, jsxs as jsxs18 } from "@emotion/react/jsx-runtime";
+var defaultSackId = "_default";
+var Drawer = React11.forwardRef(
+  ({ width, minWidth, maxWidth, position, ...drawerProps }, ref) => {
+    const drawerRendererProps = { width, minWidth, maxWidth, position };
+    const { stackId: inheritedStackId } = useCurrentDrawerRenderer();
+    return inheritedStackId ? /* @__PURE__ */ jsx32(DrawerInner, { ref, ...drawerProps, stackId: inheritedStackId }) : drawerProps.stackId ? /* @__PURE__ */ jsx32(DrawerInner, { ref, ...drawerProps }) : /* @__PURE__ */ jsxs18(DrawerProvider, { children: [
+      /* @__PURE__ */ jsx32(DrawerInner, { ref, ...drawerProps }),
+      /* @__PURE__ */ jsx32(DrawerRenderer, { stackId: defaultSackId, ...drawerRendererProps })
+    ] });
+  }
+);
+var DrawerInner = ({
+  ref,
+  stackId = defaultSackId,
+  id,
+  bgColor,
+  children,
+  header,
+  instanceKey,
+  onRequestClose
+}) => {
+  const { registerDrawer, unregisterDrawer } = useDrawer();
+  const closeButtonRef = useRef2(null);
+  const component = useMemo(() => {
+    const headerId = `dialog-header-${stackId}-${id}`;
+    return /* @__PURE__ */ jsxs18(
+      "div",
+      {
+        ref,
+        id,
+        role: "dialog",
+        tabIndex: -1,
+        "aria-labelledby": headerId,
+        css: drawerStyles(bgColor),
+        "data-test-id": "side-dialog",
+        children: [
+          /* @__PURE__ */ jsx32(
+            Button,
+            {
+              ref: closeButtonRef,
+              type: "button",
+              onClick: onRequestClose,
+              css: drawerCloseButtonStyles,
+              title: "Close dialog",
+              buttonType: "ghost",
+              children: /* @__PURE__ */ jsx32(Icon, { icon: CgChevronRight, iconColor: "gray", size: "1.5rem" })
+            }
+          ),
+          header ? /* @__PURE__ */ jsx32("div", { id: headerId, css: drawerHeaderStyles, children: header }) : null,
+          /* @__PURE__ */ jsx32("div", { css: drawerInnerStyles, children })
+        ]
+      }
+    );
+  }, [children, header, id, stackId, bgColor, onRequestClose, ref]);
+  useEffect5(() => {
+    registerDrawer({
+      drawer: {
+        id,
+        component,
+        stackId,
+        onRequestClose,
+        instanceKey
+      },
+      onFirstRender: () => {
+        setTimeout(() => {
+          var _a;
+          (_a = closeButtonRef.current) == null ? void 0 : _a.focus({ preventScroll: true });
+        }, 0);
+      }
+    });
+  }, [component, instanceKey, registerDrawer]);
+  useEffect5(() => {
+    return () => unregisterDrawer({ id, stackId, instanceKey });
+  }, [id, stackId, instanceKey, unregisterDrawer]);
+  return null;
+};
+
 // src/components/Input/styles/CaptionText.styles.ts
 import { css as css28 } from "@emotion/react";
 var CaptionText = (dynamicSize) => css28`
@@ -9529,7 +9552,7 @@ var ErrorMessage = ({ message, testId, ...otherProps }) => {
 };
 
 // src/components/Input/Fieldset.tsx
-import * as React11 from "react";
+import * as React12 from "react";
 
 // src/components/Input/styles/Fieldset.styles.ts
 import { css as css31 } from "@emotion/react";
@@ -9573,7 +9596,7 @@ var fieldsetBody = css31`
 
 // src/components/Input/Fieldset.tsx
 import { jsx as jsx36, jsxs as jsxs21 } from "@emotion/react/jsx-runtime";
-var Fieldset = React11.forwardRef(
+var Fieldset = React12.forwardRef(
   ({ legend, disabled, children, invert, ...props }, ref) => {
     return /* @__PURE__ */ jsxs21("fieldset", { css: fieldsetContainer(Boolean(invert)), ref, disabled, ...props, children: [
       legend,
@@ -9583,7 +9606,7 @@ var Fieldset = React11.forwardRef(
 );
 
 // src/components/Input/Input.tsx
-import * as React12 from "react";
+import * as React13 from "react";
 
 // src/components/Input/Label.tsx
 import { jsx as jsx37 } from "@emotion/react/jsx-runtime";
@@ -9626,7 +9649,7 @@ var WarningMessage = ({ message, testId, ...props }) => {
 
 // src/components/Input/Input.tsx
 import { jsx as jsx39, jsxs as jsxs23 } from "@emotion/react/jsx-runtime";
-var Input = React12.forwardRef(
+var Input = React13.forwardRef(
   ({
     label,
     icon,
@@ -11115,7 +11138,7 @@ var IntegrationModalHeader = ({ icon, name, menu: menu2, children }) => {
 };
 
 // src/components/Tooltip/Tooltip.tsx
-import React13 from "react";
+import React14 from "react";
 import {
   Tooltip as ReakitTooltip,
   TooltipArrow,
@@ -11144,7 +11167,7 @@ import { Fragment as Fragment9, jsx as jsx64, jsxs as jsxs44 } from "@emotion/re
 function Tooltip({ children, title, placement = "bottom", visible, ...props }) {
   const tooltip = useTooltipState({ placement });
   return /* @__PURE__ */ jsxs44(Fragment9, { children: [
-    /* @__PURE__ */ jsx64(TooltipReference, { ...tooltip, ...children.props, children: (referenceProps) => React13.cloneElement(children, referenceProps) }),
+    /* @__PURE__ */ jsx64(TooltipReference, { ...tooltip, ...children.props, children: (referenceProps) => React14.cloneElement(children, referenceProps) }),
     /* @__PURE__ */ jsxs44(ReakitTooltip, { ...tooltip, ...props, css: TooltipContainer, visible: visible != null ? visible : tooltip.visible, children: [
       /* @__PURE__ */ jsx64(TooltipArrow, { ...tooltip, css: TooltipArrowStyles }),
       title
@@ -11169,6 +11192,11 @@ var inputIconBtn = css52`
     background: var(--brand-secondary-3);
     color: var(--white);
   }
+
+  &[aria-disabled='true'] {
+    background: none;
+    color: currentColor;
+  }
 `;
 
 // src/components/ParameterInputs/ConnectToDataElementButton.tsx
@@ -11182,22 +11210,32 @@ var ConnectToDataElementButton = ({
   ...props
 }) => {
   const title = isLocked ? "Read-only pattern parameter" : isBound ? "Connected to external content. Click to edit" : "Click to connect to external content";
-  return /* @__PURE__ */ jsx65(Tooltip, { title, children: /* @__PURE__ */ jsxs45("button", { css: inputIconBtn, type: "button", "aria-pressed": isBound, ...props, disabled: isLocked, children: [
-    /* @__PURE__ */ jsx65(
-      Icon,
-      {
-        icon: isLocked ? "lock" : icon ? icon : "arrows-expand-down-right",
-        iconColor: iconColor ? iconColor : "currentColor",
-        size: "1rem"
-      }
-    ),
-    children
-  ] }) });
+  return /* @__PURE__ */ jsx65(Tooltip, { title, children: /* @__PURE__ */ jsxs45(
+    "button",
+    {
+      css: inputIconBtn,
+      type: "button",
+      "aria-pressed": isBound,
+      "aria-disabled": isLocked,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx65(
+          Icon,
+          {
+            icon: isLocked ? "lock" : icon ? icon : "arrows-expand-down-right",
+            iconColor: iconColor ? iconColor : "currentColor",
+            size: "1rem"
+          }
+        ),
+        children
+      ]
+    }
+  ) });
 };
 
 // src/components/ParameterInputs/hooks/ParameterShellContext.tsx
-import { createContext as createContext4, useContext as useContext5 } from "react";
-var ParameterShellContext = createContext4({
+import { createContext as createContext5, useContext as useContext6 } from "react";
+var ParameterShellContext = createContext5({
   id: "",
   label: "",
   hiddenLabel: void 0,
@@ -11206,7 +11244,7 @@ var ParameterShellContext = createContext4({
   }
 });
 var useParameterShell = () => {
-  const { id, label, hiddenLabel, errorMessage, onManuallySetErrorMessage } = useContext5(ParameterShellContext);
+  const { id, label, hiddenLabel, errorMessage, onManuallySetErrorMessage } = useContext6(ParameterShellContext);
   return {
     id,
     label,
@@ -11404,11 +11442,11 @@ var imageWrapper = css53`
 `;
 var img = css53`
   animation: ${fadeIn} var(--duration-fast) var(--timing-ease-out) forwards;
-  aspect-ratio: 1 / 1;
+  object-fit: contain;
   max-width: 100%;
   height: auto;
   opacity: var(--opacity-0);
-  margin-top: var(--spacing-sm);
+  margin: var(--spacing-sm) auto 0;
 `;
 var dataConnectButton = css53`
   align-items: center;
@@ -11526,7 +11564,7 @@ var ParameterDrawerHeaderTitle = css54`
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
-  max-width: 16ch;
+  max-width: 22ch;
 `;
 
 // src/components/ParameterInputs/ParameterDrawerHeader.tsx
@@ -11561,6 +11599,7 @@ var fieldsetLegend2 = css55`
   display: block;
   font-weight: var(--fw-medium);
   margin-bottom: var(--spacing-sm);
+  width: 100%;
 `;
 
 // src/components/ParameterInputs/ParameterGroup.tsx
@@ -11575,7 +11614,7 @@ var ParameterGroup = forwardRef7(
 );
 
 // src/components/ParameterInputs/ParameterImage.tsx
-import { forwardRef as forwardRef9, useCallback as useCallback2, useDeferredValue, useState as useState8 } from "react";
+import { forwardRef as forwardRef9, useCallback as useCallback2, useDeferredValue, useEffect as useEffect7, useState as useState8 } from "react";
 
 // src/components/ParameterInputs/ParameterShell.tsx
 import { useState as useState7 } from "react";
@@ -11654,7 +11693,8 @@ var extractParameterProps = (props) => {
     menuItems,
     onManuallySetErrorMessage,
     title,
-    hasOverridingParams,
+    hasOverriddenValue,
+    onResetOverriddenValue,
     ...innerProps
   } = props;
   return {
@@ -11670,7 +11710,8 @@ var extractParameterProps = (props) => {
       menuItems,
       onManuallySetErrorMessage,
       title,
-      hasOverridingParams
+      hasOverriddenValue,
+      onResetOverriddenValue
     },
     innerProps
   };
@@ -11685,7 +11726,8 @@ var ParameterShell = ({
   errorTestId,
   captionTestId,
   menuItems,
-  hasOverridingParams,
+  hasOverriddenValue,
+  onResetOverriddenValue,
   title,
   children,
   ...props
@@ -11714,10 +11756,10 @@ var ParameterShell = ({
             errorMessage: errorMessaging,
             onManuallySetErrorMessage: (message) => setErrorMessage(message)
           },
-          children: children ? /* @__PURE__ */ jsxs49("div", { css: emptyParameterShell, children: [
+          children: /* @__PURE__ */ jsxs49(ParameterShellPlaceholder, { children: [
             children,
-            hasOverridingParams ? /* @__PURE__ */ jsx71(ParameterOverrideMarker, {}) : null
-          ] }) : /* @__PURE__ */ jsx71(ParameterShellPlaceholder, { hasOverridingParams: true })
+            hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ jsx71(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
+          ] })
         }
       )
     ] }),
@@ -11725,13 +11767,10 @@ var ParameterShell = ({
     errorMessaging ? /* @__PURE__ */ jsx71(ErrorMessage, { message: errorMessaging, testId: errorTestId }) : null
   ] });
 };
-var ParameterShellPlaceholder = ({ hasOverridingParams }) => {
-  return /* @__PURE__ */ jsxs49("div", { role: "note", css: emptyParameterShell, children: [
-    /* @__PURE__ */ jsx71("p", { css: emptyParameterShellText, children: "Use component swap to replace with a parameter slot component" }),
-    hasOverridingParams ? /* @__PURE__ */ jsx71(ParameterOverrideMarker, {}) : null
-  ] });
+var ParameterShellPlaceholder = ({ children }) => {
+  return /* @__PURE__ */ jsx71("div", { css: emptyParameterShell, children });
 };
-var ParameterOverrideMarker = () => /* @__PURE__ */ jsx71(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ jsx71("span", { role: "presentation", css: overrideMarker }) });
+var ParameterOverrideMarker = (props) => /* @__PURE__ */ jsx71(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ jsx71("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ jsx71("span", { hidden: true, children: "reset overridden value to default" }) }) });
 
 // src/components/ParameterInputs/ParameterImage.tsx
 import { Fragment as Fragment10, jsx as jsx72, jsxs as jsxs50 } from "@emotion/react/jsx-runtime";
@@ -11771,29 +11810,25 @@ var BrokenImage = ({ ...props }) => {
 };
 var ParameterImageInner = forwardRef9(
   ({ ...props }, ref) => {
+    const { value } = props;
     const { id, label, hiddenLabel, errorMessage, onManuallySetErrorMessage } = useParameterShell();
-    const [imageSrc, setImageSrc] = useState8();
     const [loading, setLoading] = useState8(false);
-    const deferredValue = useDeferredValue(imageSrc);
+    const deferredValue = useDeferredValue(value);
     const errorText = "The text you provided is not a valid URL";
-    const updateImageSrc = useCallback2(
-      (e) => {
-        let message = void 0;
-        try {
-          if (e.currentTarget.value !== "") {
-            new URL(e.currentTarget.value);
-            setImageSrc(e.currentTarget.value);
-          }
-          message = void 0;
-        } catch (e2) {
-          message = errorText;
-        }
-        if (onManuallySetErrorMessage) {
-          onManuallySetErrorMessage(message);
+    const updateImageSrc = useCallback2(() => {
+      let message = void 0;
+      try {
+        if (value !== "") {
+          new URL(value);
         }
-      },
-      [onManuallySetErrorMessage]
-    );
+        message = void 0;
+      } catch (e) {
+        message = errorText;
+      }
+      if (onManuallySetErrorMessage) {
+        onManuallySetErrorMessage(message);
+      }
+    }, [onManuallySetErrorMessage, value]);
     const handleLoadEvent = () => {
       if (deferredValue) {
         setLoading(true);
@@ -11808,6 +11843,9 @@ var ParameterImageInner = forwardRef9(
         onManuallySetErrorMessage(errorText);
       }
     };
+    useEffect7(() => {
+      updateImageSrc();
+    }, [value]);
     return /* @__PURE__ */ jsxs50(Fragment10, { children: [
       /* @__PURE__ */ jsx72(
         "input",
@@ -11818,7 +11856,6 @@ var ParameterImageInner = forwardRef9(
           ref,
           "aria-label": hiddenLabel ? label : void 0,
           autoComplete: "off",
-          onChange: (e) => updateImageSrc(e),
           ...props
         }
       ),
@@ -11830,8 +11867,6 @@ var ParameterImageInner = forwardRef9(
             css: img,
             onLoad: handleLoadEvent,
             onError: handleErrorEvent,
-            width: 214,
-            height: 214,
             loading: "lazy"
           }
         ) : null,
@@ -12132,19 +12167,65 @@ var ParameterToggleInner = forwardRef15(
   }
 );
 
+// src/components/Popover/Popover.tsx
+import {
+  Popover as ReakitPopover,
+  PopoverDisclosure,
+  usePopoverState
+} from "reakit/Popover";
+import { Portal as Portal2 } from "reakit/Portal";
+
+// src/components/Popover/Popover.styles.ts
+import { css as css57 } from "@emotion/react";
+var PopoverBtn = css57`
+  border: none;
+  background: none;
+  padding: 0;
+`;
+var Popover = css57`
+  border-left: var(--spacing-xs) solid var(--brand-secondary-3);
+  border-radius: var(--rounded-base);
+  box-shadow: var(--shadow-base);
+  background: var(--white);
+  display: grid;
+  gap: var(--spacing-sm);
+  padding: var(--spacing-sm);
+  font-size: var(--fs-sm);
+  max-width: 220px;
+`;
+
+// src/components/Popover/Popover.tsx
+import { Fragment as Fragment13, jsx as jsx80, jsxs as jsxs56 } from "@emotion/react/jsx-runtime";
+var Popover2 = ({
+  iconColor = "green",
+  buttonText,
+  ariaLabel,
+  placement = "bottom",
+  children
+}) => {
+  const popover = usePopoverState({ placement });
+  return /* @__PURE__ */ jsxs56(Fragment13, { children: [
+    /* @__PURE__ */ jsxs56(PopoverDisclosure, { ...popover, css: PopoverBtn, title: buttonText, children: [
+      /* @__PURE__ */ jsx80(Icon, { icon: "info", iconColor, size: "1rem" }),
+      /* @__PURE__ */ jsx80("span", { hidden: true, children: buttonText })
+    ] }),
+    /* @__PURE__ */ jsx80(Portal2, { children: /* @__PURE__ */ jsx80(ReakitPopover, { css: Popover, ...popover, "aria-label": ariaLabel, children }) })
+  ] });
+};
+
 // src/components/Skeleton/Skeleton.styles.ts
-import { css as css57, keyframes as keyframes4 } from "@emotion/react";
+import { css as css58, keyframes as keyframes4 } from "@emotion/react";
 var lightFadingOut = keyframes4`
   from { opacity: 0.1; }
   to { opacity: 0.025; }
 `;
-var skeletonStyles = css57`
+var skeletonStyles = css58`
   animation: ${lightFadingOut} 1s ease-out infinite alternate;
   background-color: var(--gray-900);
 `;
 
 // src/components/Skeleton/Skeleton.tsx
-import { jsx as jsx80 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx81 } from "@emotion/react/jsx-runtime";
 var Skeleton = ({
   width = "100%",
   height = "1.25rem",
@@ -12152,7 +12233,7 @@ var Skeleton = ({
   circle = false,
   children,
   ...otherProps
-}) => /* @__PURE__ */ jsx80(
+}) => /* @__PURE__ */ jsx81(
   "div",
   {
     css: [
@@ -12172,11 +12253,11 @@ var Skeleton = ({
 );
 
 // src/components/Switch/Switch.tsx
-import * as React14 from "react";
+import * as React15 from "react";
 
 // src/components/Switch/Switch.styles.ts
-import { css as css58 } from "@emotion/react";
-var SwitchInputContainer = css58`
+import { css as css59 } from "@emotion/react";
+var SwitchInputContainer = css59`
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -12185,7 +12266,7 @@ var SwitchInputContainer = css58`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = css58`
+var SwitchInput = css59`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -12223,7 +12304,7 @@ var SwitchInput = css58`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = css58`
+var SwitchInputDisabled = css59`
   opacity: var(--opacity-50);
   cursor: not-allowed;
 
@@ -12231,7 +12312,7 @@ var SwitchInputDisabled = css58`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = css58`
+var SwitchInputLabel = css59`
   align-items: center;
   color: var(--brand-secondary-1);
   display: inline-flex;
@@ -12253,98 +12334,98 @@ var SwitchInputLabel = css58`
     top: 0;
   }
 `;
-var SwitchText = css58`
+var SwitchText = css59`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   padding-inline: var(--spacing-2xl) 0;
 `;
 
 // src/components/Switch/Switch.tsx
-import { Fragment as Fragment13, jsx as jsx81, jsxs as jsxs56 } from "@emotion/react/jsx-runtime";
-var Switch = React14.forwardRef(
+import { Fragment as Fragment14, jsx as jsx82, jsxs as jsxs57 } from "@emotion/react/jsx-runtime";
+var Switch = React15.forwardRef(
   ({ label, infoText, toggleText, children, ...inputProps }, ref) => {
     let additionalText = infoText;
     if (infoText && toggleText) {
       additionalText = inputProps.checked ? toggleText : infoText;
     }
-    return /* @__PURE__ */ jsxs56(Fragment13, { children: [
-      /* @__PURE__ */ jsxs56("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
-        /* @__PURE__ */ jsx81("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
-        /* @__PURE__ */ jsx81("span", { css: SwitchInputLabel, children: label })
+    return /* @__PURE__ */ jsxs57(Fragment14, { children: [
+      /* @__PURE__ */ jsxs57("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
+        /* @__PURE__ */ jsx82("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
+        /* @__PURE__ */ jsx82("span", { css: SwitchInputLabel, children: label })
       ] }),
-      additionalText ? /* @__PURE__ */ jsx81("p", { css: SwitchText, children: additionalText }) : null,
+      additionalText ? /* @__PURE__ */ jsx82("p", { css: SwitchText, children: additionalText }) : null,
       children
     ] });
   }
 );
 
 // src/components/Table/Table.tsx
-import * as React15 from "react";
+import * as React16 from "react";
 
 // src/components/Table/Table.styles.ts
-import { css as css59 } from "@emotion/react";
-var table = css59`
+import { css as css60 } from "@emotion/react";
+var table = css60`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
   table-layout: auto;
 `;
-var tableHead = css59`
+var tableHead = css60`
   background: var(--gray-100);
   color: var(--brand-secondary-1);
   text-align: left;
 `;
-var tableRow = css59`
+var tableRow = css60`
   border-bottom: 1px solid var(--gray-200);
 `;
-var tableCellHead = css59`
+var tableCellHead = css60`
   font-size: var(--fs-sm);
   padding: var(--spacing-base) var(--spacing-md);
   text-transform: uppercase;
   font-weight: var(--fw-bold);
 `;
-var tableCellData = css59`
+var tableCellData = css60`
   padding: var(--spacing-base) var(--spacing-md);
 `;
 
 // src/components/Table/Table.tsx
-import { jsx as jsx82 } from "@emotion/react/jsx-runtime";
-var Table = React15.forwardRef(({ children, ...otherProps }, ref) => {
-  return /* @__PURE__ */ jsx82("table", { ref, css: table, ...otherProps, children });
+import { jsx as jsx83 } from "@emotion/react/jsx-runtime";
+var Table = React16.forwardRef(({ children, ...otherProps }, ref) => {
+  return /* @__PURE__ */ jsx83("table", { ref, css: table, ...otherProps, children });
 });
-var TableHead = React15.forwardRef(
+var TableHead = React16.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx82("thead", { ref, css: tableHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx83("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
-var TableBody = React15.forwardRef(
+var TableBody = React16.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx82("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx83("tbody", { ref, ...otherProps, children });
   }
 );
-var TableFoot = React15.forwardRef(
+var TableFoot = React16.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx82("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx83("tfoot", { ref, ...otherProps, children });
   }
 );
-var TableRow = React15.forwardRef(
+var TableRow = React16.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx82("tr", { ref, css: tableRow, ...otherProps, children });
+    return /* @__PURE__ */ jsx83("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
-var TableCellHead = React15.forwardRef(
+var TableCellHead = React16.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx82("th", { ref, css: tableCellHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx83("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
-var TableCellData = React15.forwardRef(
+var TableCellData = React16.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx82("td", { ref, css: tableCellData, ...otherProps, children });
+    return /* @__PURE__ */ jsx83("td", { ref, css: tableCellData, ...otherProps, children });
   }
 );
 
 // src/components/Tabs/Tabs.tsx
-import { createContext as createContext5, useContext as useContext6, useEffect as useEffect7, useMemo as useMemo2 } from "react";
+import { createContext as createContext6, useContext as useContext7, useEffect as useEffect8, useMemo as useMemo2 } from "react";
 import {
   Tab as ReakitTab,
   TabList as ReakitTabList,
@@ -12353,8 +12434,8 @@ import {
 } from "reakit/Tab";
 
 // src/components/Tabs/Tabs.styles.ts
-import { css as css60 } from "@emotion/react";
-var tabButtonStyles = css60`
+import { css as css61 } from "@emotion/react";
+var tabButtonStyles = css61`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -12371,17 +12452,17 @@ var tabButtonStyles = css60`
     -webkit-text-stroke-width: thin;
   }
 `;
-var tabButtonGroupStyles = css60`
+var tabButtonGroupStyles = css61`
   display: flex;
   gap: var(--spacing-base);
   border-bottom: 1px solid var(--gray-300);
 `;
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx83 } from "@emotion/react/jsx-runtime";
-var CurrentTabContext = createContext5(null);
+import { jsx as jsx84 } from "@emotion/react/jsx-runtime";
+var CurrentTabContext = createContext6(null);
 var useCurrentTab = () => {
-  const context = useContext6(CurrentTabContext);
+  const context = useContext7(CurrentTabContext);
   if (!context) {
     throw new Error("This component can only be used inside <Tabs>");
   }
@@ -12394,7 +12475,7 @@ var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...prop
     return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
   }, [selectedId, useHashForState]);
   const tab = useTabState({ ...props, selectedId: selected });
-  useEffect7(() => {
+  useEffect8(() => {
     var _a;
     const selectedValueWithoutNull = (_a = tab.selectedId) != null ? _a : void 0;
     onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
@@ -12402,29 +12483,29 @@ var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...prop
       window.location.hash = selectedValueWithoutNull != null ? selectedValueWithoutNull : "";
     }
   }, [tab.selectedId, onSelectedIdChange, useHashForState]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (selected && selected !== tab.selectedId) {
       tab.setSelectedId(selected);
     }
   }, [selected]);
-  return /* @__PURE__ */ jsx83(CurrentTabContext.Provider, { value: tab, children });
+  return /* @__PURE__ */ jsx84(CurrentTabContext.Provider, { value: tab, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ jsx83(ReakitTabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ jsx84(ReakitTabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({ children, id, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ jsx83(ReakitTab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ jsx84(ReakitTab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({ children, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ jsx83(ReakitTabPanel, { ...props, ...currentTab, children });
+  return /* @__PURE__ */ jsx84(ReakitTabPanel, { ...props, ...currentTab, children });
 };
 
 // src/components/Validation/StatusBullet.styles.ts
-import { css as css61 } from "@emotion/react";
-var StatusBulletContainer = css61`
+import { css as css62 } from "@emotion/react";
+var StatusBulletContainer = css62`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -12444,19 +12525,19 @@ var StatusBulletContainer = css61`
     height: var(--fs-xs);
   }
 `;
-var StatusDraft = css61`
+var StatusDraft = css62`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--brand-primary-1);
   }
 `;
-var StatusModified = css61`
+var StatusModified = css62`
   &:before {
     background: linear-gradient(to right, var(--white) 50%, var(--brand-primary-1) 50% 100%);
     box-shadow: inset 0 0 0 0.125rem var(--brand-primary-1);
   }
 `;
-var StatusError = css61`
+var StatusError = css62`
   color: var(--error);
   &:before {
     background: var(--error);
@@ -12472,19 +12553,19 @@ var StatusError = css61`
     rotate: -45deg;
   }
 `;
-var StatusPublished = css61`
+var StatusPublished = css62`
   &:before {
     background: var(--brand-secondary-3);
   }
 `;
-var StatusOrphan = css61`
+var StatusOrphan = css62`
   &:before {
     background: var(--brand-secondary-5);
   }
 `;
 
 // src/components/Validation/StatusBullet.tsx
-import { jsx as jsx84 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx85 } from "@emotion/react/jsx-runtime";
 var StatusBullet = ({ status, hideText = false, message, ...props }) => {
   const currentStateStyles = {
     Error: StatusError,
@@ -12494,7 +12575,7 @@ var StatusBullet = ({ status, hideText = false, message, ...props }) => {
     Published: StatusPublished,
     Draft: StatusDraft
   };
-  return /* @__PURE__ */ jsx84(
+  return /* @__PURE__ */ jsx85(
     "span",
     {
       css: [StatusBulletContainer, currentStateStyles[status]],
@@ -12584,6 +12665,7 @@ export {
   ParameterTextareaInner,
   ParameterToggle,
   ParameterToggleInner,
+  Popover2 as Popover,
   ResolveIcon,
   ScrollableList,
   ScrollableListInputItem,
@@ -12641,6 +12723,7 @@ export {
   skeletonLoading,
   supports,
   useBreakpoint,
+  useCurrentDrawerRenderer,
   useCurrentTab,
   useDrawer,
   useIconContext,