@uniformdev/design-system 18.22.0 → 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;
@@ -11192,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
@@ -11205,17 +11210,27 @@ 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
@@ -11427,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;
@@ -11549,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
@@ -11584,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
@@ -11598,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";
@@ -11677,7 +11693,8 @@ var extractParameterProps = (props) => {
     menuItems,
     onManuallySetErrorMessage,
     title,
-    hasOverridingParams,
+    hasOverriddenValue,
+    onResetOverriddenValue,
     ...innerProps
   } = props;
   return {
@@ -11693,7 +11710,8 @@ var extractParameterProps = (props) => {
       menuItems,
       onManuallySetErrorMessage,
       title,
-      hasOverridingParams
+      hasOverriddenValue,
+      onResetOverriddenValue
     },
     innerProps
   };
@@ -11708,7 +11726,8 @@ var ParameterShell = ({
   errorTestId,
   captionTestId,
   menuItems,
-  hasOverridingParams,
+  hasOverriddenValue,
+  onResetOverriddenValue,
   title,
   children,
   ...props
@@ -11737,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
+          ] })
         }
       )
     ] }),
@@ -11748,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";
@@ -11794,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;
+    const updateImageSrc = useCallback2(() => {
+      let message = void 0;
+      try {
+        if (value !== "") {
+          new URL(value);
         }
-        if (onManuallySetErrorMessage) {
-          onManuallySetErrorMessage(message);
-        }
-      },
-      [onManuallySetErrorMessage]
-    );
+        message = void 0;
+      } catch (e) {
+        message = errorText;
+      }
+      if (onManuallySetErrorMessage) {
+        onManuallySetErrorMessage(message);
+      }
+    }, [onManuallySetErrorMessage, value]);
     const handleLoadEvent = () => {
       if (deferredValue) {
         setLoading(true);
@@ -11831,6 +11843,9 @@ var ParameterImageInner = forwardRef9(
         onManuallySetErrorMessage(errorText);
       }
     };
+    useEffect7(() => {
+      updateImageSrc();
+    }, [value]);
     return /* @__PURE__ */ jsxs50(Fragment10, { children: [
       /* @__PURE__ */ jsx72(
         "input",
@@ -11841,7 +11856,6 @@ var ParameterImageInner = forwardRef9(
           ref,
           "aria-label": hiddenLabel ? label : void 0,
           autoComplete: "off",
-          onChange: (e) => updateImageSrc(e),
           ...props
         }
       ),
@@ -11853,8 +11867,6 @@ var ParameterImageInner = forwardRef9(
             css: img,
             onLoad: handleLoadEvent,
             onError: handleErrorEvent,
-            width: 214,
-            height: 214,
             loading: "lazy"
           }
         ) : null,
@@ -12155,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",
@@ -12175,7 +12233,7 @@ var Skeleton = ({
   circle = false,
   children,
   ...otherProps
-}) => /* @__PURE__ */ jsx80(
+}) => /* @__PURE__ */ jsx81(
   "div",
   {
     css: [
@@ -12198,8 +12256,8 @@ var Skeleton = ({
 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;
@@ -12208,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);
@@ -12246,7 +12304,7 @@ var SwitchInput = css58`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = css58`
+var SwitchInputDisabled = css59`
   opacity: var(--opacity-50);
   cursor: not-allowed;
 
@@ -12254,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;
@@ -12276,26 +12334,26 @@ 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";
+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
     ] });
   }
@@ -12305,69 +12363,69 @@ var Switch = React15.forwardRef(
 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";
+import { jsx as jsx83 } from "@emotion/react/jsx-runtime";
 var Table = React16.forwardRef(({ children, ...otherProps }, ref) => {
-  return /* @__PURE__ */ jsx82("table", { ref, css: table, ...otherProps, children });
+  return /* @__PURE__ */ jsx83("table", { ref, css: table, ...otherProps, children });
 });
 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 = React16.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx82("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx83("tbody", { ref, ...otherProps, children });
   }
 );
 var TableFoot = React16.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx82("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx83("tfoot", { ref, ...otherProps, children });
   }
 );
 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 = 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 = 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 createContext6, useContext as useContext7, 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,
@@ -12376,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;
@@ -12394,14 +12452,14 @@ 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";
+import { jsx as jsx84 } from "@emotion/react/jsx-runtime";
 var CurrentTabContext = createContext6(null);
 var useCurrentTab = () => {
   const context = useContext7(CurrentTabContext);
@@ -12417,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);
@@ -12425,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);
@@ -12467,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);
@@ -12495,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,
@@ -12517,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]],
@@ -12607,6 +12665,7 @@ export {
   ParameterTextareaInner,
   ParameterToggle,
   ParameterToggleInner,
+  Popover2 as Popover,
   ResolveIcon,
   ScrollableList,
   ScrollableListInputItem,