@uniformdev/design-system 18.22.0 → 18.23.1-alpha.34

package/dist/index.js

@@ -109,6 +109,7 @@ __export(src_exports, {
   ParameterTextareaInner: () => ParameterTextareaInner,
   ParameterToggle: () => ParameterToggle,
   ParameterToggleInner: () => ParameterToggleInner,
+  Popover: () => Popover2,
   ResolveIcon: () => ResolveIcon,
   ScrollableList: () => ScrollableList,
   ScrollableListInputItem: () => ScrollableListInputItem,
@@ -8388,19 +8389,19 @@ var UniformBadge = ({
       css: [SVG, theme === "dark" ? SVGDark : SVGLight],
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M28.998 0 0 16.744V50.23l28.998-16.744 29.004-16.743L28.998 0Z", fill: "#83C6E1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M28.998 0 0 16.744V50.23l28.998-16.744 29.004-16.743L28.998 0Z", fill: "#7BB3FF" }),
         /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "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__ */ (0, import_jsx_runtime15.jsx)(
           "path",
           {
             d: "M58.002 16.744 28.998 33.487l29.004 16.744v33.487L87 66.975V33.487L58.002 16.744Z",
-            fill: "#F4220B"
+            fill: "#E61408"
           }
         )
       ]
@@ -8425,15 +8426,15 @@ var UniformLogo = ({
       css: [SVG, theme === "dark" ? SVGDark : SVGLight],
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M11.249 0 0 6.495v12.99l11.249-6.495L22.5 6.495 11.25 0Z", fill: "#83C6E1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "M11.249 0 0 6.495v12.99l11.249-6.495L22.5 6.495 11.25 0Z", fill: "#7BB3FF" }),
         /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "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__ */ (0, import_jsx_runtime16.jsx)("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__ */ (0, import_jsx_runtime16.jsx)("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__ */ (0, import_jsx_runtime16.jsx)(
           "path",
           {
@@ -9278,7 +9279,7 @@ var summary = import_react33.css`
   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;
@@ -11362,6 +11363,11 @@ var inputIconBtn = import_react66.css`
     background: var(--brand-secondary-3);
     color: var(--white);
   }
+
+  &[aria-disabled='true'] {
+    background: none;
+    color: currentColor;
+  }
 `;
 
 // src/components/ParameterInputs/ConnectToDataElementButton.tsx
@@ -11375,17 +11381,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__ */ (0, import_jsx_runtime64.jsx)(Tooltip, { title, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("button", { css: inputIconBtn, type: "button", "aria-pressed": isBound, ...props, disabled: isLocked, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
-      Icon,
-      {
-        icon: isLocked ? "lock" : icon ? icon : "arrows-expand-down-right",
-        iconColor: iconColor ? iconColor : "currentColor",
-        size: "1rem"
-      }
-    ),
-    children
-  ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Tooltip, { title, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
+    "button",
+    {
+      css: inputIconBtn,
+      type: "button",
+      "aria-pressed": isBound,
+      "aria-disabled": isLocked,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+          Icon,
+          {
+            icon: isLocked ? "lock" : icon ? icon : "arrows-expand-down-right",
+            iconColor: iconColor ? iconColor : "currentColor",
+            size: "1rem"
+          }
+        ),
+        children
+      ]
+    }
+  ) });
 };
 
 // src/components/ParameterInputs/hooks/ParameterShellContext.tsx
@@ -11597,11 +11613,11 @@ var imageWrapper = import_react68.css`
 `;
 var img = import_react68.css`
   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 = import_react68.css`
   align-items: center;
@@ -11719,7 +11735,7 @@ var ParameterDrawerHeaderTitle = import_react69.css`
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
-  max-width: 16ch;
+  max-width: 22ch;
 `;
 
 // src/components/ParameterInputs/ParameterDrawerHeader.tsx
@@ -11754,6 +11770,7 @@ var fieldsetLegend2 = import_react70.css`
   display: block;
   font-weight: var(--fw-medium);
   margin-bottom: var(--spacing-sm);
+  width: 100%;
 `;
 
 // src/components/ParameterInputs/ParameterGroup.tsx
@@ -11847,7 +11864,8 @@ var extractParameterProps = (props) => {
     menuItems,
     onManuallySetErrorMessage,
     title,
-    hasOverridingParams,
+    hasOverriddenValue,
+    onResetOverriddenValue,
     ...innerProps
   } = props;
   return {
@@ -11863,7 +11881,8 @@ var extractParameterProps = (props) => {
       menuItems,
       onManuallySetErrorMessage,
       title,
-      hasOverridingParams
+      hasOverriddenValue,
+      onResetOverriddenValue
     },
     innerProps
   };
@@ -11878,7 +11897,8 @@ var ParameterShell = ({
   errorTestId,
   captionTestId,
   menuItems,
-  hasOverridingParams,
+  hasOverriddenValue,
+  onResetOverriddenValue,
   title,
   children,
   ...props
@@ -11907,10 +11927,10 @@ var ParameterShell = ({
             errorMessage: errorMessaging,
             onManuallySetErrorMessage: (message) => setErrorMessage(message)
           },
-          children: children ? /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { css: emptyParameterShell, children: [
+          children: /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(ParameterShellPlaceholder, { children: [
             children,
-            hasOverridingParams ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ParameterOverrideMarker, {}) : null
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ParameterShellPlaceholder, { hasOverridingParams: true })
+            hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
+          ] })
         }
       )
     ] }),
@@ -11918,13 +11938,10 @@ var ParameterShell = ({
     errorMessaging ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ErrorMessage, { message: errorMessaging, testId: errorTestId }) : null
   ] });
 };
-var ParameterShellPlaceholder = ({ hasOverridingParams }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { role: "note", css: emptyParameterShell, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("p", { css: emptyParameterShellText, children: "Use component swap to replace with a parameter slot component" }),
-    hasOverridingParams ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ParameterOverrideMarker, {}) : null
-  ] });
+var ParameterShellPlaceholder = ({ children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { css: emptyParameterShell, children });
 };
-var ParameterOverrideMarker = () => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { role: "presentation", css: overrideMarker }) });
+var ParameterOverrideMarker = (props) => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { hidden: true, children: "reset overridden value to default" }) }) });
 
 // src/components/ParameterInputs/ParameterImage.tsx
 var import_jsx_runtime71 = require("@emotion/react/jsx-runtime");
@@ -11964,29 +11981,25 @@ var BrokenImage = ({ ...props }) => {
 };
 var ParameterImageInner = (0, import_react75.forwardRef)(
   ({ ...props }, ref) => {
+    const { value } = props;
     const { id, label, hiddenLabel, errorMessage, onManuallySetErrorMessage } = useParameterShell();
-    const [imageSrc, setImageSrc] = (0, import_react75.useState)();
     const [loading, setLoading] = (0, import_react75.useState)(false);
-    const deferredValue = (0, import_react75.useDeferredValue)(imageSrc);
+    const deferredValue = (0, import_react75.useDeferredValue)(value);
     const errorText = "The text you provided is not a valid URL";
-    const updateImageSrc = (0, import_react75.useCallback)(
-      (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 = (0, import_react75.useCallback)(() => {
+      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);
@@ -12001,6 +12014,9 @@ var ParameterImageInner = (0, import_react75.forwardRef)(
         onManuallySetErrorMessage(errorText);
       }
     };
+    (0, import_react75.useEffect)(() => {
+      updateImageSrc();
+    }, [value]);
     return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
         "input",
@@ -12011,7 +12027,6 @@ var ParameterImageInner = (0, import_react75.forwardRef)(
           ref,
           "aria-label": hiddenLabel ? label : void 0,
           autoComplete: "off",
-          onChange: (e) => updateImageSrc(e),
           ...props
         }
       ),
@@ -12023,8 +12038,6 @@ var ParameterImageInner = (0, import_react75.forwardRef)(
             css: img,
             onLoad: handleLoadEvent,
             onError: handleErrorEvent,
-            width: 214,
-            height: 214,
             loading: "lazy"
           }
         ) : null,
@@ -12325,19 +12338,61 @@ var ParameterToggleInner = (0, import_react81.forwardRef)(
   }
 );
 
-// src/components/Skeleton/Skeleton.styles.ts
+// src/components/Popover/Popover.tsx
+var import_Popover = require("reakit/Popover");
+var import_Portal2 = require("reakit/Portal");
+
+// src/components/Popover/Popover.styles.ts
 var import_react82 = require("@emotion/react");
-var lightFadingOut = import_react82.keyframes`
+var PopoverBtn = import_react82.css`
+  border: none;
+  background: none;
+  padding: 0;
+`;
+var Popover = import_react82.css`
+  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
+var import_jsx_runtime79 = require("@emotion/react/jsx-runtime");
+var Popover2 = ({
+  iconColor = "green",
+  buttonText,
+  ariaLabel,
+  placement = "bottom",
+  children
+}) => {
+  const popover = (0, import_Popover.usePopoverState)({ placement });
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_jsx_runtime79.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(import_Popover.PopoverDisclosure, { ...popover, css: PopoverBtn, title: buttonText, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Icon, { icon: "info", iconColor, size: "1rem" }),
+      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { hidden: true, children: buttonText })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_Portal2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(import_Popover.Popover, { css: Popover, ...popover, "aria-label": ariaLabel, children }) })
+  ] });
+};
+
+// src/components/Skeleton/Skeleton.styles.ts
+var import_react83 = require("@emotion/react");
+var lightFadingOut = import_react83.keyframes`
   from { opacity: 0.1; }
   to { opacity: 0.025; }
 `;
-var skeletonStyles = import_react82.css`
+var skeletonStyles = import_react83.css`
   animation: ${lightFadingOut} 1s ease-out infinite alternate;
   background-color: var(--gray-900);
 `;
 
 // src/components/Skeleton/Skeleton.tsx
-var import_jsx_runtime79 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime80 = require("@emotion/react/jsx-runtime");
 var Skeleton = ({
   width = "100%",
   height = "1.25rem",
@@ -12345,7 +12400,7 @@ var Skeleton = ({
   circle = false,
   children,
   ...otherProps
-}) => /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
   "div",
   {
     css: [
@@ -12368,8 +12423,8 @@ var Skeleton = ({
 var React15 = __toESM(require("react"));
 
 // src/components/Switch/Switch.styles.ts
-var import_react83 = require("@emotion/react");
-var SwitchInputContainer = import_react83.css`
+var import_react84 = require("@emotion/react");
+var SwitchInputContainer = import_react84.css`
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -12378,7 +12433,7 @@ var SwitchInputContainer = import_react83.css`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = import_react83.css`
+var SwitchInput = import_react84.css`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -12416,7 +12471,7 @@ var SwitchInput = import_react83.css`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = import_react83.css`
+var SwitchInputDisabled = import_react84.css`
   opacity: var(--opacity-50);
   cursor: not-allowed;
 
@@ -12424,7 +12479,7 @@ var SwitchInputDisabled = import_react83.css`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = import_react83.css`
+var SwitchInputLabel = import_react84.css`
   align-items: center;
   color: var(--brand-secondary-1);
   display: inline-flex;
@@ -12446,26 +12501,26 @@ var SwitchInputLabel = import_react83.css`
     top: 0;
   }
 `;
-var SwitchText = import_react83.css`
+var SwitchText = import_react84.css`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   padding-inline: var(--spacing-2xl) 0;
 `;
 
 // src/components/Switch/Switch.tsx
-var import_jsx_runtime80 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime81 = require("@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__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
-        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
-        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { css: SwitchInputLabel, children: label })
+    return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(import_jsx_runtime81.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
+        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { css: SwitchInputLabel, children: label })
       ] }),
-      additionalText ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("p", { css: SwitchText, children: additionalText }) : null,
+      additionalText ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("p", { css: SwitchText, children: additionalText }) : null,
       children
     ] });
   }
@@ -12475,74 +12530,74 @@ var Switch = React15.forwardRef(
 var React16 = __toESM(require("react"));
 
 // src/components/Table/Table.styles.ts
-var import_react84 = require("@emotion/react");
-var table = import_react84.css`
+var import_react85 = require("@emotion/react");
+var table = import_react85.css`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
   table-layout: auto;
 `;
-var tableHead = import_react84.css`
+var tableHead = import_react85.css`
   background: var(--gray-100);
   color: var(--brand-secondary-1);
   text-align: left;
 `;
-var tableRow = import_react84.css`
+var tableRow = import_react85.css`
   border-bottom: 1px solid var(--gray-200);
 `;
-var tableCellHead = import_react84.css`
+var tableCellHead = import_react85.css`
   font-size: var(--fs-sm);
   padding: var(--spacing-base) var(--spacing-md);
   text-transform: uppercase;
   font-weight: var(--fw-bold);
 `;
-var tableCellData = import_react84.css`
+var tableCellData = import_react85.css`
   padding: var(--spacing-base) var(--spacing-md);
 `;
 
 // src/components/Table/Table.tsx
-var import_jsx_runtime81 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime82 = require("@emotion/react/jsx-runtime");
 var Table = React16.forwardRef(({ children, ...otherProps }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("table", { ref, css: table, ...otherProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("table", { ref, css: table, ...otherProps, children });
 });
 var TableHead = React16.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
 var TableBody = React16.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("tbody", { ref, ...otherProps, children });
   }
 );
 var TableFoot = React16.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("tfoot", { ref, ...otherProps, children });
   }
 );
 var TableRow = React16.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
 var TableCellHead = React16.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
 var TableCellData = React16.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("td", { ref, css: tableCellData, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("td", { ref, css: tableCellData, ...otherProps, children });
   }
 );
 
 // src/components/Tabs/Tabs.tsx
-var import_react86 = require("react");
+var import_react87 = require("react");
 var import_Tab = require("reakit/Tab");
 
 // src/components/Tabs/Tabs.styles.ts
-var import_react85 = require("@emotion/react");
-var tabButtonStyles = import_react85.css`
+var import_react86 = require("@emotion/react");
+var tabButtonStyles = import_react86.css`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -12559,30 +12614,30 @@ var tabButtonStyles = import_react85.css`
     -webkit-text-stroke-width: thin;
   }
 `;
-var tabButtonGroupStyles = import_react85.css`
+var tabButtonGroupStyles = import_react86.css`
   display: flex;
   gap: var(--spacing-base);
   border-bottom: 1px solid var(--gray-300);
 `;
 
 // src/components/Tabs/Tabs.tsx
-var import_jsx_runtime82 = require("@emotion/react/jsx-runtime");
-var CurrentTabContext = (0, import_react86.createContext)(null);
+var import_jsx_runtime83 = require("@emotion/react/jsx-runtime");
+var CurrentTabContext = (0, import_react87.createContext)(null);
 var useCurrentTab = () => {
-  const context = (0, import_react86.useContext)(CurrentTabContext);
+  const context = (0, import_react87.useContext)(CurrentTabContext);
   if (!context) {
     throw new Error("This component can only be used inside <Tabs>");
   }
   return context;
 };
 var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...props }) => {
-  const selected = (0, import_react86.useMemo)(() => {
+  const selected = (0, import_react87.useMemo)(() => {
     if (selectedId)
       return selectedId;
     return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
   }, [selectedId, useHashForState]);
   const tab = (0, import_Tab.useTabState)({ ...props, selectedId: selected });
-  (0, import_react86.useEffect)(() => {
+  (0, import_react87.useEffect)(() => {
     var _a;
     const selectedValueWithoutNull = (_a = tab.selectedId) != null ? _a : void 0;
     onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
@@ -12590,29 +12645,29 @@ var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...prop
       window.location.hash = selectedValueWithoutNull != null ? selectedValueWithoutNull : "";
     }
   }, [tab.selectedId, onSelectedIdChange, useHashForState]);
-  (0, import_react86.useEffect)(() => {
+  (0, import_react87.useEffect)(() => {
     if (selected && selected !== tab.selectedId) {
       tab.setSelectedId(selected);
     }
   }, [selected]);
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(CurrentTabContext.Provider, { value: tab, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(CurrentTabContext.Provider, { value: tab, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_Tab.TabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_Tab.TabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({ children, id, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_Tab.Tab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_Tab.Tab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({ children, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_Tab.TabPanel, { ...props, ...currentTab, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_Tab.TabPanel, { ...props, ...currentTab, children });
 };
 
 // src/components/Validation/StatusBullet.styles.ts
-var import_react87 = require("@emotion/react");
-var StatusBulletContainer = import_react87.css`
+var import_react88 = require("@emotion/react");
+var StatusBulletContainer = import_react88.css`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -12632,19 +12687,19 @@ var StatusBulletContainer = import_react87.css`
     height: var(--fs-xs);
   }
 `;
-var StatusDraft = import_react87.css`
+var StatusDraft = import_react88.css`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--brand-primary-1);
   }
 `;
-var StatusModified = import_react87.css`
+var StatusModified = import_react88.css`
   &: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 = import_react87.css`
+var StatusError = import_react88.css`
   color: var(--error);
   &:before {
     background: var(--error);
@@ -12660,19 +12715,19 @@ var StatusError = import_react87.css`
     rotate: -45deg;
   }
 `;
-var StatusPublished = import_react87.css`
+var StatusPublished = import_react88.css`
   &:before {
     background: var(--brand-secondary-3);
   }
 `;
-var StatusOrphan = import_react87.css`
+var StatusOrphan = import_react88.css`
   &:before {
     background: var(--brand-secondary-5);
   }
 `;
 
 // src/components/Validation/StatusBullet.tsx
-var import_jsx_runtime83 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime84 = require("@emotion/react/jsx-runtime");
 var StatusBullet = ({ status, hideText = false, message, ...props }) => {
   const currentStateStyles = {
     Error: StatusError,
@@ -12682,7 +12737,7 @@ var StatusBullet = ({ status, hideText = false, message, ...props }) => {
     Published: StatusPublished,
     Draft: StatusDraft
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
     "span",
     {
       css: [StatusBulletContainer, currentStateStyles[status]],
@@ -12773,6 +12828,7 @@ var StatusBullet = ({ status, hideText = false, message, ...props }) => {
   ParameterTextareaInner,
   ParameterToggle,
   ParameterToggleInner,
+  Popover,
   ResolveIcon,
   ScrollableList,
   ScrollableListInputItem,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "18.22.0",
+  "version": "18.23.1-alpha.34+8eddcae60",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "./dist/index.js",
@@ -51,5 +51,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "55125ebbd2e43c65946984dbd1cea417e089f75d"
+  "gitHead": "8eddcae607f5c8b7ef9f7752bc11e186eee4305b"
 }