@uniformdev/design-system 19.142.2-alpha.1 → 19.145.0

package/dist/esm/index.js

@@ -662,12 +662,14 @@ var HorizontalRhythm = ({
   tag = "div",
   gap = "base",
   children,
+  ref,
   ...props
 }) => {
   const Tag = tag;
   return /* @__PURE__ */ jsx6(
     Tag,
     {
+      ref,
       css: [
         HorizontalRhythmContainer(gap),
         {
@@ -755,12 +757,14 @@ var VerticalRhythm = ({
   tag = "div",
   gap = "base",
   children,
+  ref,
   ...props
 }) => {
   const Tag = tag;
   return /* @__PURE__ */ jsx8(
     Tag,
     {
+      ref,
       css: [
         VerticalRhythmContainer(gap),
         {
@@ -2684,6 +2688,53 @@ var customIcons = {
   "clipboard-paste": clipboardPaste
 };
 
+// src/components/Icons/systemIcons.tsx
+import { GenIcon as GenIcon2 } from "@react-icons/all-files";
+import { CgList } from "@react-icons/all-files/cg/CgList";
+import { CgPen } from "@react-icons/all-files/cg/CgPen";
+import { TbBox } from "@react-icons/all-files/tb/TbBox";
+var uniformComponentIcon = TbBox;
+var uniformComponentPatternIcon = GenIcon2({
+  tag: "svg",
+  attr: {
+    role: "img",
+    viewBox: "0 0 24 24"
+  },
+  child: [
+    {
+      tag: "path",
+      attr: {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        fill: "currentColor",
+        d: "M8.39503 10.7767L7.17163 12.0001L8.5 13.3284V17.4676L11.1491 15.9775L12.2505 17.079L8.1177 19.4037C7.88939 19.5321 7.61061 19.5321 7.3823 19.4037L1.3823 16.0287C1.14615 15.8958 1 15.646 1 15.375V8.625C1 8.35404 1.14615 8.10416 1.3823 7.97132L7.3823 4.59632C7.61061 4.46789 7.88939 4.46789 8.1177 4.59632L12.2506 6.92108L11.1492 8.02254L7.75 6.11051L3.2798 8.625L7.75 11.1395L8.39503 10.7767ZM2.5 9.90739L7 12.4386V17.4676L2.5 14.9364V9.90739ZM12.8284 12.0001L16.5997 8.22883L20.3709 12.0001L16.5997 15.7713L12.8284 12.0001ZM16.5997 18.5997L10 12.0001L16.5997 5.4004L23.1993 12.0001L16.5997 18.5997Z"
+      },
+      child: []
+    }
+  ]
+});
+var uniformContentTypeIcon = CgList;
+var uniformEntryIcon = CgPen;
+var uniformEntryPatternIcon = GenIcon2({
+  tag: "svg",
+  attr: {
+    role: "img",
+    viewBox: "0 0 24 24"
+  },
+  child: [
+    {
+      tag: "path",
+      attr: {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        fill: "currentColor",
+        d: "M9.42163 14.25H8.5C8.08579 14.25 7.75 14.5858 7.75 15C7.75 15.4142 8.08579 15.75 8.5 15.75H10.9216L9.42163 14.25ZM13.1716 18H3.25C2.83579 18 2.5 17.6642 2.5 17.25V6.75C2.5 6.33579 2.83579 6 3.25 6H13.1716L14.6716 4.5H3.25C2.00736 4.5 1 5.50736 1 6.75V17.25C1 18.4926 2.00736 19.5 3.25 19.5H14.6716L13.1716 18ZM17.4427 17.7567L16.5997 18.5997L16.5997 18.5996L16.5997 18.5997L10 12L16.5997 5.40034L16.5997 5.40037L16.5997 5.40034L17.4427 6.24334C17.4427 6.24337 17.4427 6.24339 17.4427 6.24342L23.1993 12L17.4427 17.7566C17.4427 17.7566 17.4427 17.7566 17.4427 17.7567ZM10.9216 8.25H8.5C8.08579 8.25 7.75 8.58579 7.75 9C7.75 9.41421 8.08579 9.75 8.5 9.75H9.42163L10.9216 8.25ZM6.25 8.25H4.75V9.75H6.25V8.25ZM4.75 11.25H6.25V12.75H4.75V11.25ZM4.75 14.25H6.25V15.75H4.75V14.25ZM12.8284 12L16.5997 8.22876L20.3709 12L16.5997 15.7712L12.8284 12Z"
+      },
+      child: []
+    }
+  ]
+});
+
 // src/components/AddListButton/AddListButton.styles.ts
 import { css as css16 } from "@emotion/react";
 var AddListButtonBtn = css16`
@@ -14203,81 +14254,85 @@ var InputInlineSelect = ({
 // src/components/Input/InputKeywordSearch.tsx
 import { CgClose as CgClose4 } from "@react-icons/all-files/cg/CgClose";
 import { CgSearch } from "@react-icons/all-files/cg/CgSearch";
-import * as React12 from "react";
+import { forwardRef as forwardRef8, useState as useState5 } from "react";
 import { useDebounce } from "react-use";
 import { jsx as jsx54 } from "@emotion/react/jsx-runtime";
-var InputKeywordSearch = ({
-  onSearchTextChanged,
-  disabled: disabled2 = false,
-  placeholder = "Keyword search",
-  inputFieldName = "keywordSearch",
-  disabledFieldSubmission = false,
-  value,
-  onClear,
-  compact = false,
-  rounded = false,
-  ...props
-}) => {
-  const handleSearchTextChanged = (e) => {
-    onSearchTextChanged(e.currentTarget.value);
-  };
-  const preventSubmitOnField = (e) => {
-    if (e.key === "Enter" && disabledFieldSubmission) {
-      e.preventDefault();
-    }
-  };
-  const handleClear = () => {
-    onClear ? onClear() : onSearchTextChanged("");
-  };
-  return /* @__PURE__ */ jsx54(
-    Input,
-    {
-      type: "text",
-      name: inputFieldName,
-      placeholder,
-      showLabel: false,
-      value,
-      icon: value ? /* @__PURE__ */ jsx54(
-        "button",
-        {
-          css: inputSearchCloseBtn,
-          onClick: handleClear,
-          type: "button",
-          "data-testid": "keyword-search-clear-button",
-          children: /* @__PURE__ */ jsx54(Icon, { icon: CgClose4, iconColor: "red", size: "1rem" })
-        }
-      ) : /* @__PURE__ */ jsx54(Icon, { icon: CgSearch, iconColor: "gray", size: "1rem" }),
-      onChange: handleSearchTextChanged,
-      onKeyPress: preventSubmitOnField,
-      disabled: disabled2,
-      "aria-label": placeholder,
-      css: [
-        compact ? {
-          padding: "var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-base)",
-          fontSize: "var(--fs-sm)"
-        } : null,
-        rounded ? { borderRadius: "var(--rounded-full)" } : null
-      ],
-      "data-testid": "input-search",
-      ...props
-    }
-  );
-};
+var InputKeywordSearch = forwardRef8(
+  ({
+    onSearchTextChanged,
+    disabled: disabled2 = false,
+    placeholder = "Keyword search",
+    inputFieldName = "keywordSearch",
+    disabledFieldSubmission = false,
+    value,
+    onClear,
+    compact = false,
+    rounded = false,
+    ...props
+  }, ref) => {
+    const handleSearchTextChanged = (e) => {
+      onSearchTextChanged(e.currentTarget.value);
+    };
+    const preventSubmitOnField = (e) => {
+      if (e.key === "Enter" && disabledFieldSubmission) {
+        e.preventDefault();
+      }
+    };
+    const handleClear = () => {
+      onClear ? onClear() : onSearchTextChanged("");
+    };
+    return /* @__PURE__ */ jsx54(
+      Input,
+      {
+        ref,
+        type: "text",
+        name: inputFieldName,
+        placeholder,
+        showLabel: false,
+        value,
+        icon: value ? /* @__PURE__ */ jsx54(
+          "button",
+          {
+            css: inputSearchCloseBtn,
+            onClick: handleClear,
+            type: "button",
+            "data-testid": "keyword-search-clear-button",
+            children: /* @__PURE__ */ jsx54(Icon, { icon: CgClose4, iconColor: "red", size: "1rem" })
+          }
+        ) : /* @__PURE__ */ jsx54(Icon, { icon: CgSearch, iconColor: "gray", size: "1rem" }),
+        onChange: handleSearchTextChanged,
+        onKeyPress: preventSubmitOnField,
+        disabled: disabled2,
+        "aria-label": placeholder,
+        css: [
+          compact ? {
+            padding: "var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-base)",
+            fontSize: "var(--fs-sm)"
+          } : null,
+          rounded ? { borderRadius: "var(--rounded-full)" } : null
+        ],
+        "data-testid": "input-search",
+        ...props
+      }
+    );
+  }
+);
+InputKeywordSearch.displayName = "InputKeywordSearch";
 var DebouncedInputKeywordSearch = ({
   delay = 300,
   onSearchTextChanged,
   defaultValue,
   ...props
 }) => {
-  const [searchText, setSearchText] = React12.useState(defaultValue != null ? defaultValue : "");
+  const [searchText, setSearchText] = useState5(defaultValue != null ? defaultValue : "");
   useDebounce(() => onSearchTextChanged(searchText), delay, [searchText]);
   return /* @__PURE__ */ jsx54(InputKeywordSearch, { ...props, value: searchText, onSearchTextChanged: setSearchText });
 };
 
 // src/components/Input/InputSelect.tsx
-import { forwardRef as forwardRef8 } from "react";
+import { forwardRef as forwardRef9 } from "react";
 import { Fragment as Fragment7, jsx as jsx55, jsxs as jsxs33 } from "@emotion/react/jsx-runtime";
-var InputSelect = forwardRef8(
+var InputSelect = forwardRef9(
   ({
     label,
     defaultOption,
@@ -14341,7 +14396,7 @@ var InputSelect = forwardRef8(
 
 // src/components/Input/InputTime.tsx
 import { parseTime } from "@internationalized/date";
-import * as React13 from "react";
+import * as React12 from "react";
 import { useCallback as useCallback2 } from "react";
 import {
   DateInput,
@@ -14405,7 +14460,7 @@ function tryParseTime(isoTime) {
     return void 0;
   }
 }
-var InputTime = React13.forwardRef(
+var InputTime = React12.forwardRef(
   ({
     id,
     label,
@@ -14487,9 +14542,9 @@ var InputTime = React13.forwardRef(
 InputTime.displayName = "InputTime";
 
 // src/components/Input/InputToggle.tsx
-import * as React14 from "react";
+import * as React13 from "react";
 import { jsx as jsx57, jsxs as jsxs35 } from "@emotion/react/jsx-runtime";
-var InputToggle = React14.forwardRef(
+var InputToggle = React13.forwardRef(
   ({
     label,
     type,
@@ -14575,9 +14630,9 @@ var SuccessMessage = ({ message, testId, ...props }) => {
 };
 
 // src/components/Input/Textarea.tsx
-import { forwardRef as forwardRef11 } from "react";
+import { forwardRef as forwardRef12 } from "react";
 import { Fragment as Fragment8, jsx as jsx60, jsxs as jsxs37 } from "@emotion/react/jsx-runtime";
-var Textarea = forwardRef11(
+var Textarea = forwardRef12(
   ({ label, icon, id, caption, showLabel = true, errorMessage, warningMessage, ...props }, ref) => {
     return /* @__PURE__ */ jsxs37(Fragment8, { children: [
       showLabel ? /* @__PURE__ */ jsx60("label", { htmlFor: id, css: [labelText], children: label }) : null,
@@ -14689,22 +14744,42 @@ function DateTimePickerSummary({
   value,
   placeholder
 }) {
-  const dateFormat = new Intl.DateTimeFormat(void 0, {
+  let dateFormat = new Intl.DateTimeFormat(void 0, {
     day: "numeric",
     month: "long",
-    year: "numeric",
-    timeZone: value == null ? void 0 : value.timeZone
+    year: "numeric"
   });
-  const timeFormat = new Intl.DateTimeFormat(void 0, {
-    timeStyle: "short",
-    timeZone: value == null ? void 0 : value.timeZone
+  let timeFormat = new Intl.DateTimeFormat(void 0, {
+    timeStyle: "short"
   });
+  let timeZoneWasValid = false;
+  if (value == null ? void 0 : value.timeZone) {
+    try {
+      dateFormat = new Intl.DateTimeFormat(void 0, {
+        day: "numeric",
+        month: "long",
+        year: "numeric",
+        timeZone: value.timeZone
+      });
+      timeFormat = new Intl.DateTimeFormat(void 0, {
+        timeStyle: "short",
+        timeZone: value.timeZone
+      });
+      timeZoneWasValid = true;
+    } catch (error) {
+      if (error instanceof RangeError) {
+        console.error("Tried to use an unsupported time zone", value == null ? void 0 : value.timeZone);
+      } else {
+        throw error;
+      }
+    }
+  }
   const datePart = (value == null ? void 0 : value.datetime) ? dateFormat.format(new Date(value.datetime)) : null;
   const timePart = (value == null ? void 0 : value.datetime) ? timeFormat.format(new Date(value.datetime)) : null;
   return datePart ? /* @__PURE__ */ jsxs38("span", { children: [
     /* @__PURE__ */ jsx61("em", { css: inputLabelFocal, children: datePart }),
     !!timePart && `, ${timePart}`,
-    !!(value == null ? void 0 : value.timeZone) && ` in ${value == null ? void 0 : value.timeZone}`
+    !!(value == null ? void 0 : value.timeZone) && timeZoneWasValid && ` in ${value == null ? void 0 : value.timeZone}`
   ] }) : /* @__PURE__ */ jsx61("span", { children: placeholder });
 }
 
@@ -14952,7 +15027,7 @@ var DateTimePicker = ({
 // src/components/DescriptionList/DescriptionList.tsx
 import { TbCheck } from "@react-icons/all-files/tb/TbCheck";
 import { TbMinus } from "@react-icons/all-files/tb/TbMinus";
-import React15 from "react";
+import React14 from "react";
 
 // src/components/DescriptionList/DescriptionList.styles.ts
 import { css as css53 } from "@emotion/react";
@@ -14983,7 +15058,7 @@ var descriptionListValueStyles = css53`
 
 // src/components/DescriptionList/DescriptionList.tsx
 import { jsx as jsx63, jsxs as jsxs40 } from "@emotion/react/jsx-runtime";
-var DescriptionList = React15.forwardRef(
+var DescriptionList = React14.forwardRef(
   ({ items, variant = "horizontal", ...listProps }, ref) => {
     if (!(items == null ? void 0 : items.length)) {
       return null;
@@ -14994,7 +15069,7 @@ var DescriptionList = React15.forwardRef(
         ref,
         css: variant === "vertical" ? descriptionListVertical : descriptionListHorizontal,
         ...listProps,
-        children: items == null ? void 0 : items.map(({ label, value }) => /* @__PURE__ */ jsxs40(React15.Fragment, { children: [
+        children: items == null ? void 0 : items.map(({ label, value }) => /* @__PURE__ */ jsxs40(React14.Fragment, { children: [
           /* @__PURE__ */ jsx63("dt", { css: descriptionListLabelStyles, children: label }),
           /* @__PURE__ */ jsx63("dd", { css: descriptionListValueStyles, children: typeof value === "boolean" ? /* @__PURE__ */ jsx63(DescriptionListValueBoolean, { value }) : value })
         ] }, label))
@@ -15010,7 +15085,7 @@ var DescriptionListValueBoolean = ({ value }) => {
 };
 
 // src/components/Details/Details.tsx
-import * as React16 from "react";
+import * as React15 from "react";
 
 // src/components/Details/Details.styles.ts
 import { css as css54 } from "@emotion/react";
@@ -15069,9 +15144,9 @@ var Details = ({
   onChange,
   ...props
 }) => {
-  const detailsRef = React16.useRef(null);
-  const [internalOpen, setInternalOpen] = React16.useState(isOpenByDefault);
-  const memoizedIsOpen = React16.useMemo(() => {
+  const detailsRef = React15.useRef(null);
+  const [internalOpen, setInternalOpen] = React15.useState(isOpenByDefault);
+  const memoizedIsOpen = React15.useMemo(() => {
     return isOpen !== void 0 ? isOpen : internalOpen;
   }, [internalOpen, isOpen]);
   return /* @__PURE__ */ jsxs41(
@@ -15114,7 +15189,7 @@ var Details = ({
 
 // src/components/Drawer/Drawer.tsx
 import { CgChevronRight } from "@react-icons/all-files/cg/CgChevronRight";
-import React18, { createContext as createContext4, useContext as useContext5, useEffect as useEffect5, useRef as useRef4, useState as useState9 } from "react";
+import React17, { createContext as createContext4, useContext as useContext5, useEffect as useEffect5, useRef as useRef4, useState as useState9 } from "react";
 import { createPortal } from "react-dom";
 
 // src/components/Drawer/Drawer.styles.ts
@@ -15359,7 +15434,7 @@ var CurrentDrawerContext = createContext4({});
 var useCurrentDrawer = () => {
   return useContext5(CurrentDrawerContext);
 };
-var Drawer = React18.forwardRef(
+var Drawer = React17.forwardRef(
   ({ minWidth, maxWidth, position, leftAligned, ...drawerProps }, ref) => {
     var _a;
     const { stackId: inheritedStackId } = useCurrentDrawer();
@@ -15621,7 +15696,7 @@ var TakeoverDrawerRenderer = (props) => {
 };
 
 // src/components/IconButton/IconButton.tsx
-import { forwardRef as forwardRef12 } from "react";
+import { forwardRef as forwardRef13 } from "react";
 
 // src/components/IconButton/IconButton.styles.ts
 import { css as css57 } from "@emotion/react";
@@ -15652,7 +15727,7 @@ var variants = {
 
 // src/components/IconButton/IconButton.tsx
 import { jsx as jsx70 } from "@emotion/react/jsx-runtime";
-var IconButton = forwardRef12(
+var IconButton = forwardRef13(
   ({ children, size = "md", variant = "square", ...props }, ref) => {
     return /* @__PURE__ */ jsx70(Button, { ref, css: [iconButton, variants[variant], sizes[size]], ...props, children });
   }
@@ -17254,7 +17329,7 @@ var MediaCard = ({
 
 // src/components/Modal/Modal.tsx
 import { CgClose as CgClose5 } from "@react-icons/all-files/cg/CgClose";
-import React21, { useEffect as useEffect11, useRef as useRef6 } from "react";
+import React20, { useEffect as useEffect11, useRef as useRef6 } from "react";
 
 // src/components/Modal/Modal.styles.ts
 import { css as css76 } from "@emotion/react";
@@ -17324,7 +17399,9 @@ var modalContentStyles = css76`
   position: relative;
   flex: 1;
   overflow: auto;
+  background-color: white;
   padding: var(--spacing-md);
+  border-radius: var(--rounded-sm);
   ${scrollbarStyles}
 `;
 var modalDialogWrapper = css76`
@@ -17341,7 +17418,7 @@ var modalDialogInnerStyles = css76`
 import { jsx as jsx95, jsxs as jsxs64 } from "@emotion/react/jsx-runtime";
 var defaultModalWidth = "75rem";
 var defaultModalHeight = "51rem";
-var Modal = React21.forwardRef(
+var Modal = React20.forwardRef(
   ({
     header: header2,
     children,
@@ -17351,6 +17428,7 @@ var Modal = React21.forwardRef(
     buttonGroup,
     modalSize = "lg",
     withoutContentPadding = false,
+    withoutContentBackground = false,
     ...modalProps
   }, ref) => {
     const dialogRef = useRef6(null);
@@ -17422,7 +17500,17 @@ var Modal = React21.forwardRef(
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx95("div", { css: [modalContentStyles, !withoutContentPadding ? null : { padding: 0 }], children }),
+              /* @__PURE__ */ jsx95(
+                "div",
+                {
+                  css: [
+                    modalContentStyles,
+                    !withoutContentPadding ? null : { padding: 0 },
+                    !withoutContentBackground ? null : { background: "transparent" }
+                  ],
+                  children
+                }
+              ),
               buttonGroup ? /* @__PURE__ */ jsx95(HorizontalRhythm, { children: buttonGroup }) : null
             ]
           }
@@ -17434,9 +17522,9 @@ var Modal = React21.forwardRef(
 Modal.displayName = "Modal";
 
 // src/components/Modal/ModalDialog.tsx
-import { forwardRef as forwardRef13 } from "react";
+import { forwardRef as forwardRef14 } from "react";
 import { jsx as jsx96, jsxs as jsxs65 } from "@emotion/react/jsx-runtime";
-var ModalDialog = forwardRef13(
+var ModalDialog = forwardRef14(
   ({ header: header2, buttonGroup, modalSize = "lg", children, height = "auto", onRequestClose, ...props }, ref) => {
     return /* @__PURE__ */ jsx96(
       Modal,
@@ -17446,6 +17534,7 @@ var ModalDialog = forwardRef13(
         ref,
         onRequestClose,
         height,
+        withoutContentBackground: true,
         withoutContentPadding: true,
         css: modalDialogInnerStyles,
         width: "",
@@ -17647,7 +17736,7 @@ var input3 = css79`
   border-radius: var(--rounded-sm);
   color: var(--gray-700);
   font-size: var(--fs-sm);
-  line-height: 1.2;
+  line-height: 1.5;
   min-height: 2rem;
   padding: var(--spacing-sm);
   width: 100%;
@@ -17971,7 +18060,7 @@ var ParameterDrawerHeader = ({ title: title2, iconBeforeTitle, children }) => {
 };
 
 // src/components/ParameterInputs/ParameterGroup.tsx
-import { forwardRef as forwardRef14 } from "react";
+import { forwardRef as forwardRef15 } from "react";
 
 // src/components/ParameterInputs/styles/ParameterGroup.styles.ts
 import { css as css81 } from "@emotion/react";
@@ -17995,7 +18084,7 @@ var fieldsetLegend2 = css81`
 
 // src/components/ParameterInputs/ParameterGroup.tsx
 import { jsx as jsx101, jsxs as jsxs69 } from "@emotion/react/jsx-runtime";
-var ParameterGroup = forwardRef14(
+var ParameterGroup = forwardRef15(
   ({ legend, isDisabled, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxs69("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
       /* @__PURE__ */ jsx101("legend", { css: fieldsetLegend2, children: legend }),
@@ -18005,7 +18094,7 @@ var ParameterGroup = forwardRef14(
 );
 
 // src/components/ParameterInputs/ParameterImage.tsx
-import { forwardRef as forwardRef16, useDeferredValue } from "react";
+import { forwardRef as forwardRef17, useDeferredValue } from "react";
 
 // src/components/ParameterInputs/ParameterImagePreview.tsx
 import { useState as useState12 } from "react";
@@ -18092,9 +18181,9 @@ var ParameterLabel = ({ id, asSpan, children, ...props }) => {
 };
 
 // src/components/ParameterInputs/ParameterMenuButton.tsx
-import { forwardRef as forwardRef15 } from "react";
+import { forwardRef as forwardRef16 } from "react";
 import { jsx as jsx104 } from "@emotion/react/jsx-runtime";
-var ParameterMenuButton = forwardRef15(
+var ParameterMenuButton = forwardRef16(
   ({ label, children }, ref) => {
     return /* @__PURE__ */ jsx104(
       Menu,
@@ -18270,7 +18359,7 @@ var ParameterOverrideMarker = (props) => /* @__PURE__ */ jsx105(Tooltip, { title
 
 // src/components/ParameterInputs/ParameterImage.tsx
 import { Fragment as Fragment14, jsx as jsx106, jsxs as jsxs72 } from "@emotion/react/jsx-runtime";
-var ParameterImage = forwardRef16(
+var ParameterImage = forwardRef17(
   ({ children, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
     return /* @__PURE__ */ jsxs72(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
@@ -18279,7 +18368,7 @@ var ParameterImage = forwardRef16(
     ] });
   }
 );
-var ParameterImageInner = forwardRef16((props, ref) => {
+var ParameterImageInner = forwardRef17((props, ref) => {
   const { value } = props;
   const { id, label, hiddenLabel, errorMessage } = useParameterShell();
   const deferredValue = useDeferredValue(value);
@@ -18301,13 +18390,13 @@ var ParameterImageInner = forwardRef16((props, ref) => {
 });
 
 // src/components/ParameterInputs/ParameterInput.tsx
-import { forwardRef as forwardRef17 } from "react";
+import { forwardRef as forwardRef18 } from "react";
 import { jsx as jsx107 } from "@emotion/react/jsx-runtime";
-var ParameterInput = forwardRef17((props, ref) => {
+var ParameterInput = forwardRef18((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
   return /* @__PURE__ */ jsx107(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ jsx107(ParameterInputInner, { ref, ...innerProps }) });
 });
-var ParameterInputInner = forwardRef17(
+var ParameterInputInner = forwardRef18(
   ({ ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
     return /* @__PURE__ */ jsx107(
@@ -18326,9 +18415,9 @@ var ParameterInputInner = forwardRef17(
 );
 
 // src/components/ParameterInputs/ParameterLink.tsx
-import { forwardRef as forwardRef18 } from "react";
+import { forwardRef as forwardRef19 } from "react";
 import { jsx as jsx108, jsxs as jsxs73 } from "@emotion/react/jsx-runtime";
-var ParameterLink = forwardRef18(
+var ParameterLink = forwardRef19(
   ({ disabled: disabled2, onConnectLink, externalLink, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
     return /* @__PURE__ */ jsx108(
@@ -18351,7 +18440,7 @@ var ParameterLink = forwardRef18(
     );
   }
 );
-var ParameterLinkInner = forwardRef18(
+var ParameterLinkInner = forwardRef19(
   ({ externalLink, onConnectLink, disabled: disabled2, buttonText = "Select link", ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
     if (!props.value)
@@ -18397,8 +18486,60 @@ var ParameterLinkInner = forwardRef18(
   }
 );
 
+// src/components/ParameterInputs/ParameterMultiSelect.tsx
+import { jsx as jsx109 } from "@emotion/react/jsx-runtime";
+var ParameterMultiSelect = ({ disabled: disabled2 = false, ...props }) => {
+  const { shellProps, innerProps } = extractParameterProps(props);
+  return /* @__PURE__ */ jsx109(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx109(ParameterMultiSelectInner, { isDisabled: disabled2, ...innerProps }) });
+};
+var ParameterMultiSelectInner = (props) => {
+  var _a;
+  const { id, label } = useParameterShell();
+  return /* @__PURE__ */ jsx109(
+    InputComboBox,
+    {
+      ...props,
+      isMulti: true,
+      isClearable: (_a = props.isClearable) != null ? _a : false,
+      id,
+      "aria-label": label,
+      classNamePrefix: "parameter-multi-select-combobox",
+      styles: {
+        valueContainer: (base) => ({
+          ...base,
+          padding: "0 var(--spacing-sm)",
+          fontSize: "var(--fs-sm)"
+        }),
+        control: (base, state) => ({
+          ...base,
+          padding: "var(--spacing-sm) 0",
+          border: state.isFocused ? "1px solid var(--accent-dark-hover)" : "1px solid var(--gray-200)",
+          borderRadius: "var(--rounded-sm)",
+          minHeight: "39px",
+          // matches the min-height of other input fields
+          transition: "border-color var(--duration-xfast) ease-in-out",
+          outline: "none",
+          "&:hover": {
+            boxShadow: "none",
+            borderColor: "var(--accent-dark-hover)",
+            outline: "none"
+          },
+          "&:focus-within": {
+            borderColor: "var(--accent-dark-hover)",
+            outline: "none"
+          }
+        }),
+        indicatorsContainer: (base) => ({
+          ...base,
+          padding: "0"
+        })
+      }
+    }
+  );
+};
+
 // src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
-import { Fragment as Fragment15, jsx as jsx109, jsxs as jsxs74 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx110, jsxs as jsxs74 } from "@emotion/react/jsx-runtime";
 var ParameterNameAndPublicIdInput = ({
   id,
   onBlur,
@@ -18425,7 +18566,7 @@ var ParameterNameAndPublicIdInput = ({
   };
   autoFocus == null ? void 0 : autoFocus();
   return /* @__PURE__ */ jsxs74(Fragment15, { children: [
-    /* @__PURE__ */ jsx109(
+    /* @__PURE__ */ jsx110(
       ParameterInput,
       {
         id: nameIdField,
@@ -18444,7 +18585,7 @@ var ParameterNameAndPublicIdInput = ({
         value: values[nameIdField]
       }
     ),
-    /* @__PURE__ */ jsx109(
+    /* @__PURE__ */ jsx110(
       ParameterInput,
       {
         id: publicIdFieldName,
@@ -18458,11 +18599,11 @@ var ParameterNameAndPublicIdInput = ({
         caption: !publicIdError ? publicIdCaption : void 0,
         placeholder: publicIdPlaceholderText,
         errorMessage: publicIdError,
-        menuItems: /* @__PURE__ */ jsx109(
+        menuItems: /* @__PURE__ */ jsx110(
           MenuItem,
           {
             disabled: !values[publicIdFieldName],
-            icon: /* @__PURE__ */ jsx109(Icon, { icon: "path-trim", iconColor: "currentColor" }),
+            icon: /* @__PURE__ */ jsx110(Icon, { icon: "path-trim", iconColor: "currentColor" }),
             onClick: handleCopyPidFieldValue,
             children: "Copy"
           }
@@ -18470,7 +18611,7 @@ var ParameterNameAndPublicIdInput = ({
         value: values[publicIdFieldName]
       }
     ),
-    (warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ jsx109(Callout, { type: "caution", children: warnOverLength.message }) : null
+    (warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ jsx110(Callout, { type: "caution", children: warnOverLength.message }) : null
   ] });
 };
 
@@ -18860,7 +19001,7 @@ var getSelectedNode = (selection) => {
 };
 
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
-import { Fragment as Fragment16, jsx as jsx110, jsxs as jsxs75 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx111, jsxs as jsxs75 } from "@emotion/react/jsx-runtime";
 var isProjectMapLinkValue = (value) => {
   return (value == null ? void 0 : value.type) === "projectMapNode" && Boolean(
     value.nodeId && value.path && value.projectMapId
@@ -19304,7 +19445,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
     });
   };
   return /* @__PURE__ */ jsxs75(Fragment16, { children: [
-    /* @__PURE__ */ jsx110(
+    /* @__PURE__ */ jsx111(
       NodeEventPlugin,
       {
         nodeType: LinkNode,
@@ -19314,7 +19455,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
         }
       }
     ),
-    linkPopoverState ? /* @__PURE__ */ jsx110(
+    linkPopoverState ? /* @__PURE__ */ jsx111(
       "div",
       {
         css: linkPopover,
@@ -19324,7 +19465,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
         },
         ref: linkPopoverElRef,
         children: /* @__PURE__ */ jsxs75("div", { css: linkPopoverContainer, children: [
-          linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ jsx110(
+          linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ jsx111(
             "a",
             {
               href: parsePath(
@@ -19336,7 +19477,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
               children: parsePath(linkPopoverState.node.__link.path)
             }
           ),
-          /* @__PURE__ */ jsx110(
+          /* @__PURE__ */ jsx111(
             Button,
             {
               size: "xs",
@@ -19344,7 +19485,7 @@ function LinkNodePlugin({ onConnectLink, getBoundPath }) {
                 onEditLinkNode(linkPopoverState.node);
               },
               buttonType: "ghost",
-              children: /* @__PURE__ */ jsx110(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
+              children: /* @__PURE__ */ jsx111(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
             }
           )
         ] })
@@ -19369,7 +19510,7 @@ import {
   INDENT_CONTENT_COMMAND
 } from "lexical";
 import { useEffect as useEffect14 } from "react";
-import { jsx as jsx111 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx112 } from "@emotion/react/jsx-runtime";
 function isIndentPermitted(maxDepth) {
   const selection = $getSelection2();
   if (!$isRangeSelection2(selection)) {
@@ -19399,7 +19540,7 @@ function ListIndentPlugin({ maxDepth }) {
       COMMAND_PRIORITY_CRITICAL
     );
   }, [editor, maxDepth]);
-  return /* @__PURE__ */ jsx111(TabIndentationPlugin, {});
+  return /* @__PURE__ */ jsx112(TabIndentationPlugin, {});
 }
 
 // src/components/ParameterInputs/rich-text/RichTextToolbar.tsx
@@ -19426,7 +19567,7 @@ import {
   SELECTION_CHANGE_COMMAND
 } from "lexical";
 import { useCallback as useCallback9, useEffect as useEffect15, useMemo as useMemo4, useState as useState15 } from "react";
-import { Fragment as Fragment17, jsx as jsx112, jsxs as jsxs76 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx113, jsxs as jsxs76 } from "@emotion/react/jsx-runtime";
 var toolbar = css87`
   background: var(--gray-50);
   border-radius: var(--rounded-base);
@@ -19478,7 +19619,7 @@ var toolbarChevron = css87`
   margin-left: var(--spacing-xs);
 `;
 var RichTextToolbarIcon = ({ icon }) => {
-  return /* @__PURE__ */ jsx112(Icon, { icon, css: toolbarIcon, size: "1rem" });
+  return /* @__PURE__ */ jsx113(Icon, { icon, css: toolbarIcon, size: "1rem" });
 };
 var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
   ["bold", "format-bold"],
@@ -19595,7 +19736,7 @@ var RichTextToolbar = ({ config, customControls }) => {
         menuTrigger: /* @__PURE__ */ jsxs76("button", { css: richTextToolbarButton, title: "Text styles", children: [
           visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
           " ",
-          /* @__PURE__ */ jsx112(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
+          /* @__PURE__ */ jsx113(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
         ] }),
         placement: "bottom-start",
         children: [
@@ -19605,7 +19746,7 @@ var RichTextToolbar = ({ config, customControls }) => {
               type: "paragraph"
             },
             ...visibleTextualElements
-          ].map((element) => /* @__PURE__ */ jsx112(
+          ].map((element) => /* @__PURE__ */ jsx113(
             MenuItem,
             {
               onClick: () => {
@@ -19615,12 +19756,12 @@ var RichTextToolbar = ({ config, customControls }) => {
             },
             element.type
           )),
-          visibleTextualElements.length === 0 ? /* @__PURE__ */ jsx112(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
+          visibleTextualElements.length === 0 ? /* @__PURE__ */ jsx113(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
         ]
       }
     ),
     visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsxs76("div", { css: toolbarGroup, children: [
-      visibleFormatsWithIcon.map((format) => /* @__PURE__ */ jsx112(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx112(
+      visibleFormatsWithIcon.map((format) => /* @__PURE__ */ jsx113(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx113(
         "button",
         {
           onClick: () => {
@@ -19630,16 +19771,16 @@ var RichTextToolbar = ({ config, customControls }) => {
             richTextToolbarButton,
             activeFormats.includes(format.type) ? richTextToolbarButtonActive : null
           ],
-          children: /* @__PURE__ */ jsx112(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
+          children: /* @__PURE__ */ jsx113(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
         }
       ) }, format.type)),
-      visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx112(
+      visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx113(
         Menu,
         {
           menuLabel: "Alternative text styles",
-          menuTrigger: /* @__PURE__ */ jsx112("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ jsx112(Icon, { icon: "more-alt", css: toolbarIcon }) }),
+          menuTrigger: /* @__PURE__ */ jsx113("button", { css: richTextToolbarButton, title: "Alternative text styles", children: /* @__PURE__ */ jsx113(Icon, { icon: "more-alt", css: toolbarIcon }) }),
           placement: "bottom-start",
-          children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx112(
+          children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx113(
             MenuItem,
             {
               onClick: () => {
@@ -19653,18 +19794,18 @@ var RichTextToolbar = ({ config, customControls }) => {
       ) : null
     ] }) : null,
     visibleElementsWithIcons.size > 0 ? /* @__PURE__ */ jsxs76("div", { css: toolbarGroup, children: [
-      linkElementVisible ? /* @__PURE__ */ jsx112(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx112(
+      linkElementVisible ? /* @__PURE__ */ jsx113(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx113(
         "button",
         {
           onClick: () => {
             isLink ? editor.dispatchCommand(REMOVE_LINK_NODE_COMMAND, {}) : editor.dispatchCommand(OPEN_LINK_NODE_MODAL_COMMAND, {});
           },
           css: [richTextToolbarButton, isLink ? richTextToolbarButtonActive : null],
-          children: /* @__PURE__ */ jsx112(RichTextToolbarIcon, { icon: "link" })
+          children: /* @__PURE__ */ jsx113(RichTextToolbarIcon, { icon: "link" })
         }
       ) }) : null,
       visibleLists.size > 0 ? /* @__PURE__ */ jsxs76(Fragment17, { children: [
-        visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx112(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx112(
+        visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx113(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx113(
           "button",
           {
             onClick: () => {
@@ -19674,10 +19815,10 @@ var RichTextToolbar = ({ config, customControls }) => {
               richTextToolbarButton,
               activeElement === "unorderedList" ? richTextToolbarButtonActive : null
             ],
-            children: /* @__PURE__ */ jsx112(RichTextToolbarIcon, { icon: "layout-list" })
+            children: /* @__PURE__ */ jsx113(RichTextToolbarIcon, { icon: "layout-list" })
           }
         ) }) : null,
-        visibleLists.has("orderedList") ? /* @__PURE__ */ jsx112(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ jsx112(
+        visibleLists.has("orderedList") ? /* @__PURE__ */ jsx113(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ jsx113(
           "button",
           {
             onClick: () => {
@@ -19687,32 +19828,32 @@ var RichTextToolbar = ({ config, customControls }) => {
               richTextToolbarButton,
               activeElement === "orderedList" ? richTextToolbarButtonActive : null
             ],
-            children: /* @__PURE__ */ jsx112(RichTextToolbarIcon, { icon: "layout-list-numbered" })
+            children: /* @__PURE__ */ jsx113(RichTextToolbarIcon, { icon: "layout-list-numbered" })
           }
         ) }) : null
       ] }) : null,
-      quoteElementVisible ? /* @__PURE__ */ jsx112(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ jsx112(
+      quoteElementVisible ? /* @__PURE__ */ jsx113(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ jsx113(
         "button",
         {
           onClick: () => {
             activeElement === "quote" ? onSelectElement("paragraph") : onSelectElement("quote");
           },
           css: [richTextToolbarButton, activeElement === "quote" ? richTextToolbarButtonActive : null],
-          children: /* @__PURE__ */ jsx112(RichTextToolbarIcon, { icon: "quote" })
+          children: /* @__PURE__ */ jsx113(RichTextToolbarIcon, { icon: "quote" })
         }
       ) }) : null,
-      codeElementVisible ? /* @__PURE__ */ jsx112(Tooltip, { title: "Code Block", placement: "top", children: /* @__PURE__ */ jsx112(
+      codeElementVisible ? /* @__PURE__ */ jsx113(Tooltip, { title: "Code Block", placement: "top", children: /* @__PURE__ */ jsx113(
         "button",
         {
           onClick: () => {
             activeElement === "code" ? onSelectElement("paragraph") : onSelectElement("code");
           },
           css: [richTextToolbarButton, activeElement === "code" ? richTextToolbarButtonActive : null],
-          children: /* @__PURE__ */ jsx112(RichTextToolbarIcon, { icon: "code-slash" })
+          children: /* @__PURE__ */ jsx113(RichTextToolbarIcon, { icon: "code-slash" })
         }
       ) }) : null
     ] }) : null,
-    customControls ? /* @__PURE__ */ jsx112("div", { css: toolbarGroup, children: customControls }) : null
+    customControls ? /* @__PURE__ */ jsx113("div", { css: toolbarGroup, children: customControls }) : null
   ] });
 };
 var RichTextToolbar_default = RichTextToolbar;
@@ -19826,7 +19967,7 @@ var useRichTextToolbarState = ({ config }) => {
 };
 
 // src/components/ParameterInputs/ParameterRichText.tsx
-import { Fragment as Fragment18, jsx as jsx113, jsxs as jsxs77 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx114, jsxs as jsxs77 } from "@emotion/react/jsx-runtime";
 var ParameterRichText = ({
   label,
   labelLeadingIcon,
@@ -19865,7 +20006,7 @@ var ParameterRichText = ({
       captionTestId,
       menuItems,
       children: [
-        /* @__PURE__ */ jsx113(
+        /* @__PURE__ */ jsx114(
           ParameterRichTextInner,
           {
             value,
@@ -19883,7 +20024,7 @@ var ParameterRichText = ({
             children
           }
         ),
-        menuItems ? /* @__PURE__ */ jsx113(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx113(Fragment18, { children: menuItems }) }) : null
+        menuItems ? /* @__PURE__ */ jsx114(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx114(Fragment18, { children: menuItems }) }) : null
       ]
     }
   );
@@ -19995,7 +20136,7 @@ var ParameterRichTextInner = ({
     editable: !readOnly
   };
   return /* @__PURE__ */ jsxs77(Fragment18, { children: [
-    /* @__PURE__ */ jsx113("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx113(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx113(
+    /* @__PURE__ */ jsx114("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx114(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx114(
       RichText,
       {
         onChange,
@@ -20055,19 +20196,19 @@ var RichText = ({
     editor.setEditable(!readOnly);
   }, [editor, readOnly]);
   return /* @__PURE__ */ jsxs77(Fragment18, { children: [
-    readOnly ? null : /* @__PURE__ */ jsx113(RichTextToolbar_default, { config, customControls }),
+    readOnly ? null : /* @__PURE__ */ jsx114(RichTextToolbar_default, { config, customControls }),
     /* @__PURE__ */ jsxs77("div", { css: editorContainer, ref: editorContainerRef, "data-testid": "value-container", children: [
-      /* @__PURE__ */ jsx113(
+      /* @__PURE__ */ jsx114(
         RichTextPlugin,
         {
-          contentEditable: /* @__PURE__ */ jsx113(ContentEditable, { css: editorInput, className: editorInputClassName }),
-          placeholder: /* @__PURE__ */ jsx113("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
+          contentEditable: /* @__PURE__ */ jsx114(ContentEditable, { css: editorInput, className: editorInputClassName }),
+          placeholder: /* @__PURE__ */ jsx114("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
           ErrorBoundary: LexicalErrorBoundary
         }
       ),
-      /* @__PURE__ */ jsx113(ListPlugin, {}),
-      readOnly ? null : /* @__PURE__ */ jsx113(HistoryPlugin, {}),
-      /* @__PURE__ */ jsx113(
+      /* @__PURE__ */ jsx114(ListPlugin, {}),
+      readOnly ? null : /* @__PURE__ */ jsx114(HistoryPlugin, {}),
+      /* @__PURE__ */ jsx114(
         LinkNodePlugin,
         {
           onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
@@ -20077,24 +20218,24 @@ var RichText = ({
           } : void 0
         }
       ),
-      /* @__PURE__ */ jsx113(ListIndentPlugin, { maxDepth: 4 }),
-      /* @__PURE__ */ jsx113(DisableStylesPlugin, {}),
-      /* @__PURE__ */ jsx113(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
-      /* @__PURE__ */ jsx113(Fragment18, { children })
+      /* @__PURE__ */ jsx114(ListIndentPlugin, { maxDepth: 4 }),
+      /* @__PURE__ */ jsx114(DisableStylesPlugin, {}),
+      /* @__PURE__ */ jsx114(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS }),
+      /* @__PURE__ */ jsx114(Fragment18, { children })
     ] })
   ] });
 };
 
 // src/components/ParameterInputs/ParameterSelect.tsx
-import { forwardRef as forwardRef19 } from "react";
-import { jsx as jsx114, jsxs as jsxs78 } from "@emotion/react/jsx-runtime";
-var ParameterSelect = forwardRef19(
+import { forwardRef as forwardRef20 } from "react";
+import { jsx as jsx115, jsxs as jsxs78 } from "@emotion/react/jsx-runtime";
+var ParameterSelect = forwardRef20(
   ({ defaultOption, options, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
-    return /* @__PURE__ */ jsx114(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx114(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
+    return /* @__PURE__ */ jsx115(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx115(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
   }
 );
-var ParameterSelectInner = forwardRef19(
+var ParameterSelectInner = forwardRef20(
   ({ defaultOption, options, ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
     return /* @__PURE__ */ jsxs78(
@@ -20106,10 +20247,10 @@ var ParameterSelectInner = forwardRef19(
         ref,
         ...props,
         children: [
-          defaultOption ? /* @__PURE__ */ jsx114("option", { value: "", children: defaultOption }) : null,
+          defaultOption ? /* @__PURE__ */ jsx115("option", { value: "", children: defaultOption }) : null,
           options.map((option) => {
             var _a;
-            return /* @__PURE__ */ jsx114("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
+            return /* @__PURE__ */ jsx115("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
           })
         ]
       }
@@ -20118,15 +20259,15 @@ var ParameterSelectInner = forwardRef19(
 );
 
 // src/components/ParameterInputs/ParameterTextarea.tsx
-import { forwardRef as forwardRef20 } from "react";
-import { jsx as jsx115 } from "@emotion/react/jsx-runtime";
-var ParameterTextarea = forwardRef20((props, ref) => {
+import { forwardRef as forwardRef21 } from "react";
+import { jsx as jsx116 } from "@emotion/react/jsx-runtime";
+var ParameterTextarea = forwardRef21((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ jsx115(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx115(ParameterTextareaInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ jsx116(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx116(ParameterTextareaInner, { ref, ...innerProps }) });
 });
-var ParameterTextareaInner = forwardRef20(({ ...props }, ref) => {
+var ParameterTextareaInner = forwardRef21(({ ...props }, ref) => {
   const { id, label, hiddenLabel } = useParameterShell();
-  return /* @__PURE__ */ jsx115(
+  return /* @__PURE__ */ jsx116(
     "textarea",
     {
       css: [input3, textarea2],
@@ -20139,18 +20280,18 @@ var ParameterTextareaInner = forwardRef20(({ ...props }, ref) => {
 });
 
 // src/components/ParameterInputs/ParameterToggle.tsx
-import { forwardRef as forwardRef21 } from "react";
-import { jsx as jsx116, jsxs as jsxs79 } from "@emotion/react/jsx-runtime";
-var ParameterToggle = forwardRef21((props, ref) => {
+import { forwardRef as forwardRef22 } from "react";
+import { jsx as jsx117, jsxs as jsxs79 } from "@emotion/react/jsx-runtime";
+var ParameterToggle = forwardRef22((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ jsx116(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx116(ParameterToggleInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ jsx117(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx117(ParameterToggleInner, { ref, ...innerProps }) });
 });
-var ParameterToggleInner = forwardRef21(
+var ParameterToggleInner = forwardRef22(
   ({ children, ...props }, ref) => {
     const { id, label } = useParameterShell();
     return /* @__PURE__ */ jsxs79("label", { css: inputToggleLabel2, children: [
-      /* @__PURE__ */ jsx116("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
-      /* @__PURE__ */ jsx116("span", { css: inlineLabel2, children: label }),
+      /* @__PURE__ */ jsx117("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
+      /* @__PURE__ */ jsx117("span", { css: inlineLabel2, children: label }),
       children
     ] });
   }
@@ -20211,7 +20352,7 @@ var bar = css89`
 `;
 
 // src/components/ProgressBar/ProgressBar.tsx
-import { jsx as jsx117 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx118 } from "@emotion/react/jsx-runtime";
 function ProgressBar({
   current,
   max,
@@ -20221,7 +20362,7 @@ function ProgressBar({
 }) {
   const valueNow = Math.min(current, max);
   const valuePercentage = max > 0 ? Math.ceil(100 / max * valueNow) : 0;
-  return /* @__PURE__ */ jsx117(
+  return /* @__PURE__ */ jsx118(
     "div",
     {
       css: container3,
@@ -20232,7 +20373,7 @@ function ProgressBar({
       "aria-valuemax": max,
       "aria-valuenow": valueNow,
       ...props,
-      children: /* @__PURE__ */ jsx117(
+      children: /* @__PURE__ */ jsx118(
         "div",
         {
           css: [
@@ -20272,7 +20413,7 @@ var progressListItemStyles = css90`
 `;
 
 // src/components/ProgressList/ProgressList.tsx
-import { jsx as jsx118, jsxs as jsxs80 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx119, jsxs as jsxs80 } from "@emotion/react/jsx-runtime";
 var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
   const itemsWithStatus = useMemo5(() => {
     const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
@@ -20286,8 +20427,8 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
       return { ...item, status };
     });
   }, [items, inProgressId]);
-  return /* @__PURE__ */ jsx118("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
-    return /* @__PURE__ */ jsx118(
+  return /* @__PURE__ */ jsx119("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
+    return /* @__PURE__ */ jsx119(
       ProgressListItem,
       {
         status,
@@ -20346,10 +20487,10 @@ var ProgressListItem = ({
     return colorPerStatus[status];
   }, [status, error, errorLevel]);
   return /* @__PURE__ */ jsxs80("li", { css: [progressListItemStyles, statusStyles], children: [
-    /* @__PURE__ */ jsx118(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ jsx118("div", { children: /* @__PURE__ */ jsx118(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
+    /* @__PURE__ */ jsx119(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ jsx119("div", { children: /* @__PURE__ */ jsx119(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
     /* @__PURE__ */ jsxs80("div", { children: [
       children,
-      /* @__PURE__ */ jsx118("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
+      /* @__PURE__ */ jsx119("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
     ] })
   ] });
 };
@@ -20481,7 +20622,7 @@ var segmentedControlLabelContentStyles = css92`
 var segmentedControlLabelTextStyles = css92``;
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { jsx as jsx119, jsxs as jsxs81 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx120, jsxs as jsxs81 } from "@emotion/react/jsx-runtime";
 var SegmentedControl = ({
   name,
   options,
@@ -20515,7 +20656,7 @@ var SegmentedControl = ({
   const isIconOnly = useMemo6(() => {
     return options.every((option) => option && option.icon && !option.label);
   }, [options]);
-  return /* @__PURE__ */ jsx119(
+  return /* @__PURE__ */ jsx120(
     "div",
     {
       css: [segmentedControlStyles, orientation === "vertical" ? segmentedControlVerticalStyles : void 0],
@@ -20528,7 +20669,7 @@ var SegmentedControl = ({
         }
         const text = option.label ? option.label : option.icon ? null : String(option.value);
         const isDisabled = disabled2 || option.disabled;
-        return /* @__PURE__ */ jsx119(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ jsx119(
+        return /* @__PURE__ */ jsx120(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ jsx120(
           "div",
           {
             css: segmentedControlItemStyles,
@@ -20542,7 +20683,7 @@ var SegmentedControl = ({
                   isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
                 ],
                 children: [
-                  /* @__PURE__ */ jsx119(
+                  /* @__PURE__ */ jsx120(
                     "input",
                     {
                       css: segmentedControlInputStyles,
@@ -20554,10 +20695,10 @@ var SegmentedControl = ({
                       disabled: isDisabled
                     }
                   ),
-                  option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx119(CgCheck4, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
+                  option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx120(CgCheck4, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
                   /* @__PURE__ */ jsxs81("span", { css: segmentedControlLabelContentStyles, children: [
-                    !option.icon ? null : /* @__PURE__ */ jsx119(Icon, { icon: option.icon, size: iconSize, iconColor: "currentColor" }),
-                    !text || hideOptionText ? null : /* @__PURE__ */ jsx119("span", { css: segmentedControlLabelTextStyles, children: text })
+                    !option.icon ? null : /* @__PURE__ */ jsx120(Icon, { icon: option.icon, size: iconSize, iconColor: "currentColor" }),
+                    !text || hideOptionText ? null : /* @__PURE__ */ jsx120("span", { css: segmentedControlLabelTextStyles, children: text })
                   ] })
                 ]
               }
@@ -20581,7 +20722,7 @@ var skeletonStyles = css94`
 `;
 
 // src/components/Skeleton/Skeleton.tsx
-import { jsx as jsx120 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx121 } from "@emotion/react/jsx-runtime";
 var Skeleton = ({
   width = "100%",
   height = "1.25rem",
@@ -20589,7 +20730,7 @@ var Skeleton = ({
   circle = false,
   children,
   ...otherProps
-}) => /* @__PURE__ */ jsx120(
+}) => /* @__PURE__ */ jsx121(
   "div",
   {
     css: [
@@ -20609,7 +20750,7 @@ var Skeleton = ({
 );
 
 // src/components/Switch/Switch.tsx
-import * as React25 from "react";
+import * as React24 from "react";
 
 // src/components/Switch/Switch.styles.ts
 import { css as css95 } from "@emotion/react";
@@ -20696,8 +20837,8 @@ var SwitchText = css95`
 `;
 
 // src/components/Switch/Switch.tsx
-import { Fragment as Fragment19, jsx as jsx121, jsxs as jsxs82 } from "@emotion/react/jsx-runtime";
-var Switch = React25.forwardRef(
+import { Fragment as Fragment19, jsx as jsx122, jsxs as jsxs82 } from "@emotion/react/jsx-runtime";
+var Switch = React24.forwardRef(
   ({ label, infoText, toggleText, children, ...inputProps }, ref) => {
     let additionalText = infoText;
     if (infoText && toggleText) {
@@ -20705,17 +20846,17 @@ var Switch = React25.forwardRef(
     }
     return /* @__PURE__ */ jsxs82(Fragment19, { children: [
       /* @__PURE__ */ jsxs82("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
-        /* @__PURE__ */ jsx121("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
-        /* @__PURE__ */ jsx121("span", { css: SwitchInputLabel, children: label })
+        /* @__PURE__ */ jsx122("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
+        /* @__PURE__ */ jsx122("span", { css: SwitchInputLabel, children: label })
       ] }),
-      additionalText ? /* @__PURE__ */ jsx121("p", { css: SwitchText, children: additionalText }) : null,
+      additionalText ? /* @__PURE__ */ jsx122("p", { css: SwitchText, children: additionalText }) : null,
       children
     ] });
   }
 );
 
 // src/components/Table/Table.tsx
-import * as React26 from "react";
+import * as React25 from "react";
 
 // src/components/Table/Table.styles.ts
 import { css as css96 } from "@emotion/react";
@@ -20745,40 +20886,40 @@ var tableCellHead = css96`
 `;
 
 // src/components/Table/Table.tsx
-import { jsx as jsx122 } from "@emotion/react/jsx-runtime";
-var Table = React26.forwardRef(
+import { jsx as jsx123 } from "@emotion/react/jsx-runtime";
+var Table = React25.forwardRef(
   ({ children, cellPadding, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx122("table", { ref, css: table({ cellPadding }), ...otherProps, children });
+    return /* @__PURE__ */ jsx123("table", { ref, css: table({ cellPadding }), ...otherProps, children });
   }
 );
-var TableHead = React26.forwardRef(
+var TableHead = React25.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx122("thead", { ref, css: tableHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx123("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
-var TableBody = React26.forwardRef(
+var TableBody = React25.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx122("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx123("tbody", { ref, ...otherProps, children });
   }
 );
-var TableFoot = React26.forwardRef(
+var TableFoot = React25.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx122("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx123("tfoot", { ref, ...otherProps, children });
   }
 );
-var TableRow = React26.forwardRef(
+var TableRow = React25.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx122("tr", { ref, css: tableRow, ...otherProps, children });
+    return /* @__PURE__ */ jsx123("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
-var TableCellHead = React26.forwardRef(
+var TableCellHead = React25.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx122("th", { ref, css: tableCellHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx123("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
-var TableCellData = React26.forwardRef(
+var TableCellData = React25.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx122("td", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx123("td", { ref, ...otherProps, children });
   }
 );
 
@@ -20818,7 +20959,7 @@ var tabButtonGroupStyles = css97`
 `;
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx123 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx124 } from "@emotion/react/jsx-runtime";
 var useCurrentTab = () => {
   const context = useAriakitTabStore();
   if (!context) {
@@ -20856,23 +20997,23 @@ var Tabs = ({
       tab.setSelectedId(selected);
     }
   }, [selected, tab]);
-  return /* @__PURE__ */ jsx123(AriakitTabProvider, { store: tab, setSelectedId: onTabSelect, children });
+  return /* @__PURE__ */ jsx124(AriakitTabProvider, { store: tab, setSelectedId: onTabSelect, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx123(AriakitTabList, { ...props, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ jsx124(AriakitTabList, { ...props, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({
   children,
   id,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx123(AriakitTab, { type: "button", id, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ jsx124(AriakitTab, { type: "button", id, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx123(AriakitTabPanel, { ...props, children });
+  return /* @__PURE__ */ jsx124(AriakitTabPanel, { ...props, children });
 };
 
 // src/components/Toast/Toast.tsx
@@ -21103,9 +21244,9 @@ var toastContainerStyles = css98`
 `;
 
 // src/components/Toast/Toast.tsx
-import { jsx as jsx124 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx125 } from "@emotion/react/jsx-runtime";
 var ToastContainer = ({ limit = 4 }) => {
-  return /* @__PURE__ */ jsx124(
+  return /* @__PURE__ */ jsx125(
     ToastifyContainer,
     {
       css: toastContainerStyles,
@@ -21198,7 +21339,7 @@ var StatusDeleted = css99`
 `;
 
 // src/components/Validation/StatusBullet.tsx
-import { jsx as jsx125 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx126 } from "@emotion/react/jsx-runtime";
 var StatusBullet = ({
   status,
   hideText = false,
@@ -21218,7 +21359,7 @@ var StatusBullet = ({
     Deleted: StatusDeleted
   };
   const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
-  return /* @__PURE__ */ jsx125(
+  return /* @__PURE__ */ jsx126(
     "span",
     {
       role: "status",
@@ -21328,6 +21469,8 @@ export {
   ParameterLink,
   ParameterLinkInner,
   ParameterMenuButton,
+  ParameterMultiSelect,
+  ParameterMultiSelectInner,
   ParameterNameAndPublicIdInput,
   ParameterOverrideMarker,
   ParameterRichText,
@@ -21451,6 +21594,11 @@ export {
   supports,
   textInput,
   toast,
+  uniformComponentIcon,
+  uniformComponentPatternIcon,
+  uniformContentTypeIcon,
+  uniformEntryIcon,
+  uniformEntryPatternIcon,
   useBreakpoint,
   useCloseCurrentDrawer,
   useCurrentDrawer,