npm - @uniformdev/design-system - Versions diffs - 20.36.2-alpha.90 → 20.37.1-alpha.1 - Mend

@uniformdev/design-system 20.36.2-alpha.90 → 20.37.1-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/esm/index.js CHANGED Viewed

@@ -96,12 +96,11 @@ var Theme = ({ disableReset = false, disableGlobalReset = false }) => {
           --typography-inverted: var(--white);
           /* chart colours */
-          --charting-chart-1: #0072B2;
-          --charting-chart-2: #D55E00;
-          --charting-chart-3: #009E73;
-          --charting-chart-4: #E41A1C;
-          --charting-chart-5: #F0E442;
-          --charting-chart-6: #56B4E9;
+          --charting-chart-1: #ffa600;
+          --charting-chart-2: #c444b2;
+          --charting-chart-3: #ff5368;
+          --charting-chart-4: #f53d90;
+          --charting-chart-5: #ff7b3d;
           /* utility colours */
           --utility-success: #4ade80;
@@ -3565,7 +3564,7 @@ var avatarSizeStylesMap = {
 };
 var Avatar = ({
   src,
-  label = "",
+  label: label2 = "",
   children,
   size = "md",
   as = "div",
@@ -3577,7 +3576,7 @@ var Avatar = ({
     src ? /* @__PURE__ */ jsx19("img", { role: "presentation", src, css: avatarImageStyles, referrerPolicy: "no-referrer" }) : children ? null : /* @__PURE__ */ jsx19(CgProfile, { css: avatarImageStyles }),
     children
   ] });
-  return src || children ? /* @__PURE__ */ jsx19(Tooltip, { title: label, withoutPortal: labelWithoutPortal, children: body }) : body;
+  return src || children ? /* @__PURE__ */ jsx19(Tooltip, { title: label2, withoutPortal: labelWithoutPortal, children: body }) : body;
 };
 // src/components/Avatar/AvatarGroup.styles.ts
@@ -4438,11 +4437,11 @@ var InfoDialog = ({ message }) => {
   ] });
 };
 var CheckboxWithInfo = forwardRef6(
-  ({ label, name, info, ...props }, ref) => {
+  ({ label: label2, name, info, ...props }, ref) => {
     return /* @__PURE__ */ jsxs17("div", { css: CheckboxWithInfoContainer, children: [
       /* @__PURE__ */ jsxs17("label", { css: CheckboxWithInfoLabel, children: [
         /* @__PURE__ */ jsx30("input", { type: "checkbox", name, ref, css: CheckboxWithInfoInput, ...props }),
-        /* @__PURE__ */ jsx30("span", { children: label })
+        /* @__PURE__ */ jsx30("span", { children: label2 })
       ] }),
       info ? /* @__PURE__ */ jsx30(InfoDialog, { message: info }) : null
     ] });
@@ -4648,7 +4647,7 @@ var Label = ({ children, className, testId, ...props }) => {
 import { jsx as jsx37, jsxs as jsxs22 } from "@emotion/react/jsx-runtime";
 var Input = React8.forwardRef(
   ({
-    label,
+    label: label2,
     icon,
     id,
     caption,
@@ -4680,7 +4679,7 @@ var Input = React8.forwardRef(
               css: [labelText, typeof classNameLabel === "object" ? classNameLabel : void 0],
               className: typeof classNameLabel === "string" ? classNameLabel : "",
               testId: labelTestId,
-              children: label
+              children: label2
             }
           ) : null,
           /* @__PURE__ */ jsxs22(
@@ -4699,7 +4698,7 @@ var Input = React8.forwardRef(
                       errorMessage ? inputError : void 0,
                       icon ? inputWithIcon : ""
                     ],
-                    "aria-label": showLabel || typeof label !== "string" ? void 0 : label,
+                    "aria-label": showLabel || typeof label2 !== "string" ? void 0 : label2,
                     className: typeof classNameControl === "string" ? classNameControl : "",
                     onWheel: isNumberInputAndMouseWheelDisabled ? disableMouseWheelEvent : void 0,
                     ...props,
@@ -5207,7 +5206,7 @@ import { forwardRef as forwardRef10 } from "react";
 import { Fragment as Fragment3, jsx as jsx41, jsxs as jsxs24 } from "@emotion/react/jsx-runtime";
 var InputSelect = forwardRef10(
   ({
-    label,
+    label: label2,
     defaultOption,
     options,
     caption,
@@ -5234,7 +5233,7 @@ var InputSelect = forwardRef10(
               css: [labelText, typeof classNameLabel === "object" ? classNameLabel : void 0],
               className: typeof classNameLabel === "string" ? classNameLabel : "",
               children: [
-                label,
+                label2,
                 labelCta
               ]
             }
@@ -5243,8 +5242,8 @@ var InputSelect = forwardRef10(
             "select",
             {
               ref,
-              title: label,
-              "aria-label": !showLabel ? label : void 0,
+              title: label2,
+              "aria-label": !showLabel ? label2 : void 0,
               css: [
                 input("wrap"),
                 inputSelect,
@@ -5336,7 +5335,7 @@ function tryParseTime(isoTime) {
 var InputTime = React9.forwardRef(
   ({
     id,
-    label,
+    label: label2,
     caption,
     name,
     showLabel = true,
@@ -5380,7 +5379,7 @@ var InputTime = React9.forwardRef(
             ),
             ...props,
             children: [
-              showLabel ? /* @__PURE__ */ jsx42(AriaLabel, { elementType: "label", css: [labelText], "data-testid": labelTestId, children: label }) : null,
+              showLabel ? /* @__PURE__ */ jsx42(AriaLabel, { elementType: "label", css: [labelText], "data-testid": labelTestId, children: label2 }) : null,
               /* @__PURE__ */ jsx42("div", { css: [inputContainer], children: /* @__PURE__ */ jsx42(
                 DateInput,
                 {
@@ -5419,7 +5418,7 @@ import * as React10 from "react";
 import { jsx as jsx43, jsxs as jsxs26 } from "@emotion/react/jsx-runtime";
 var InputToggle = React10.forwardRef(
   ({
-    label,
+    label: label2,
     type,
     disabled: disabled2,
     checked,
@@ -5452,11 +5451,11 @@ var InputToggle = React10.forwardRef(
               checked,
               name,
               disabled: disabled2,
-              "aria-label": !showLabel && typeof label === "string" ? label : void 0,
+              "aria-label": !showLabel && typeof label2 === "string" ? label2 : void 0,
               ...props
             }
           ),
-          !showLabel ? null : /* @__PURE__ */ jsx43("span", { css: [inlineLabel, fontWeightStyles[fontWeight]], children: label }),
+          !showLabel ? null : /* @__PURE__ */ jsx43("span", { css: [inlineLabel, fontWeightStyles[fontWeight]], children: label2 }),
           caption || errorMessage ? /* @__PURE__ */ jsx43("span", { css: inputToggleMessageContainer, children: /* @__PURE__ */ jsx43(
             FieldMessage,
             {
@@ -5508,9 +5507,9 @@ var SuccessMessage = ({ message, testId, ...props }) => {
 import { forwardRef as forwardRef13 } from "react";
 import { Fragment as Fragment4, jsx as jsx46, jsxs as jsxs28 } from "@emotion/react/jsx-runtime";
 var Textarea = forwardRef13(
-  ({ label, icon, id, caption, showLabel = true, errorMessage, warningMessage, ...props }, ref) => {
+  ({ label: label2, icon, id, caption, showLabel = true, errorMessage, warningMessage, ...props }, ref) => {
     return /* @__PURE__ */ jsxs28(Fragment4, { children: [
-      showLabel ? /* @__PURE__ */ jsx46("label", { htmlFor: id, css: [labelText], children: label }) : null,
+      showLabel ? /* @__PURE__ */ jsx46("label", { htmlFor: id, css: [labelText], children: label2 }) : null,
       /* @__PURE__ */ jsxs28("div", { css: [inputContainer], children: [
         /* @__PURE__ */ jsx46(
           "textarea",
@@ -5523,7 +5522,7 @@ var Textarea = forwardRef13(
               icon ? inputWithIcon : "",
               scrollbarStyles
             ],
-            "aria-label": !showLabel ? label : void 0,
+            "aria-label": !showLabel ? label2 : void 0,
             ...props
           }
         ),
@@ -7267,7 +7266,7 @@ function useDateTimePickerContext() {
 }
 var DateTimePicker = ({
   id,
-  label,
+  label: label2,
   triggerIcon = CgCalendar,
   value,
   minVisible,
@@ -7351,7 +7350,7 @@ var DateTimePicker = ({
     [handleClearClick, handleDateChange, handleTimeChange]
   );
   return /* @__PURE__ */ jsx63(DateTimePickerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs40("div", { "data-testid": testId, "data-variant": variant, ...props, children: [
-    showLabel ? /* @__PURE__ */ jsx63(Label, { css: [labelText], "data-testid": `${testId}-label`, children: label }) : null,
+    showLabel ? /* @__PURE__ */ jsx63(Label, { css: [labelText], "data-testid": `${testId}-label`, children: label2 }) : null,
     /* @__PURE__ */ jsx63("div", { css: inputContainer, children: /* @__PURE__ */ jsxs40(PopoverProvider, { store: popover2, children: [
       /* @__PURE__ */ jsxs40(
         "div",
@@ -7500,10 +7499,10 @@ var DescriptionList = React12.forwardRef(
         ref,
         css: variant === "vertical" ? descriptionListVertical : descriptionListHorizontal,
         ...listProps,
-        children: items == null ? void 0 : items.map(({ label, value }) => /* @__PURE__ */ jsxs41(React12.Fragment, { children: [
-          /* @__PURE__ */ jsx64("dt", { css: descriptionListLabelStyles, children: label }),
+        children: items == null ? void 0 : items.map(({ label: label2, value }) => /* @__PURE__ */ jsxs41(React12.Fragment, { children: [
+          /* @__PURE__ */ jsx64("dt", { css: descriptionListLabelStyles, children: label2 }),
           /* @__PURE__ */ jsx64("dd", { css: descriptionListValueStyles, children: typeof value === "boolean" ? /* @__PURE__ */ jsx64(DescriptionListValueBoolean, { value }) : value })
-        ] }, label))
+        ] }, label2))
       }
     );
   }
@@ -9375,10 +9374,7 @@ function useDebouncedCallback(callback, deps, delay, maxWait = 0) {
 // src/components/KeyValueInput/KeyValueInput.styles.ts
 import { css as css69 } from "@emotion/react";
-var LabelStyles = css69`
-  text-transform: uppercase;
-  font-weight: var(--fw-medium);
-`;
+var LabelStyles = css69``;
 var SelectKeyValueRowStyles = css69`
   animation: var(--duration-fast) var(--timing-ease-out);
   align-items: flex-start;
@@ -9401,15 +9397,19 @@ var generateItemId = (item, index) => item.uniqueId || item.value || item.key ||
 var KeyValueInput = ({
   value,
   onChange,
-  label = "Options",
+  label: label2 = "Options",
   newItemDefault = initialSelectOptionValue,
   keyLabel = "Text",
   valueLabel = "Value",
+  iconLabel = "Icon",
   keyInfoPopover,
   valueInfoPopover,
+  iconInfoPopover,
   disabled: disabled2,
   errors,
-  onFocusChange
+  onFocusChange,
+  showIconColumn = false,
+  renderIconSelector
 }) => {
   const [isDragging, setIsDragging] = useState11(false);
   const popoverStoresMap = useRef6({});
@@ -9481,35 +9481,58 @@ var KeyValueInput = ({
     }
   }, [value.length]);
   return /* @__PURE__ */ jsxs58(VerticalRhythm, { gap: "xs", children: [
-    /* @__PURE__ */ jsx91(HorizontalRhythm, { align: "center", justify: "space-between", css: { marginBottom: "var(--spacing-xs)" }, children: /* @__PURE__ */ jsx91("span", { css: LabelStyles, children: label }) }),
-    /* @__PURE__ */ jsxs58("div", { css: [SelectKeyValueRowStyles, { paddingLeft: "var(--spacing-base)" }], children: [
-      /* @__PURE__ */ jsxs58(HorizontalRhythm, { align: "center", gap: "xs", children: [
-        /* @__PURE__ */ jsx91("span", { children: keyLabel }),
-        !keyInfoPopover ? null : /* @__PURE__ */ jsx91(
-          Popover3,
-          {
-            buttonText: `${keyLabel} info`,
-            iconColor: "gray",
-            placement: "bottom-start",
-            onInit: ({ store }) => popoverStoresMap.current.label = store,
-            children: keyInfoPopover
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs58(HorizontalRhythm, { align: "center", gap: "xs", children: [
-        /* @__PURE__ */ jsx91("span", { children: valueLabel }),
-        !valueInfoPopover ? null : /* @__PURE__ */ jsx91(
-          Popover3,
-          {
-            buttonText: `${valueLabel} info`,
-            iconColor: "gray",
-            placement: "bottom-start",
-            onInit: ({ store }) => popoverStoresMap.current.value = store,
-            children: valueInfoPopover
-          }
-        )
-      ] })
-    ] }),
+    /* @__PURE__ */ jsx91(HorizontalRhythm, { align: "center", justify: "space-between", css: { marginBottom: "var(--spacing-xs)" }, children: /* @__PURE__ */ jsx91("span", { css: LabelStyles, children: label2 }) }),
+    /* @__PURE__ */ jsxs58(
+      "div",
+      {
+        css: [
+          SelectKeyValueRowStyles,
+          { paddingLeft: "var(--spacing-base)" },
+          showIconColumn && { gridTemplateColumns: "1fr 1fr 1fr" }
+        ],
+        children: [
+          showIconColumn && /* @__PURE__ */ jsxs58(HorizontalRhythm, { align: "center", gap: "xs", children: [
+            /* @__PURE__ */ jsx91("span", { children: iconLabel }),
+            !iconInfoPopover ? null : /* @__PURE__ */ jsx91(
+              Popover3,
+              {
+                buttonText: `${iconLabel} info`,
+                iconColor: "gray",
+                placement: "bottom-start",
+                onInit: ({ store }) => popoverStoresMap.current.icon = store,
+                children: iconInfoPopover
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs58(HorizontalRhythm, { align: "center", gap: "xs", children: [
+            /* @__PURE__ */ jsx91("span", { children: keyLabel }),
+            !keyInfoPopover ? null : /* @__PURE__ */ jsx91(
+              Popover3,
+              {
+                buttonText: `${keyLabel} info`,
+                iconColor: "gray",
+                placement: "bottom-start",
+                onInit: ({ store }) => popoverStoresMap.current.label = store,
+                children: keyInfoPopover
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs58(HorizontalRhythm, { align: "center", gap: "xs", children: [
+            /* @__PURE__ */ jsx91("span", { children: valueLabel }),
+            !valueInfoPopover ? null : /* @__PURE__ */ jsx91(
+              Popover3,
+              {
+                buttonText: `${valueLabel} info`,
+                iconColor: "gray",
+                placement: "bottom-start",
+                onInit: ({ store }) => popoverStoresMap.current.value = store,
+                children: valueInfoPopover
+              }
+            )
+          ] })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx91(VerticalRhythm, { gap: "sm", children: /* @__PURE__ */ jsx91(
       DndContext,
       {
@@ -9527,6 +9550,7 @@ var KeyValueInput = ({
             value: item,
             keyLabel: `${keyLabel}, row ${index}`,
             valueLabel: `${valueLabel}, row ${index}`,
+            iconLabel: `${iconLabel}, row ${index}`,
             disabled: disabled2,
             disabledDelete: value.length <= 1,
             disabledDnd: value.length === 1,
@@ -9535,25 +9559,21 @@ var KeyValueInput = ({
             onDelete: () => handleDeleteOptionRow(index),
             onFocusChange: handleFocusChange,
             "data-testid": "key-value-input-item",
-            onEnter: handleAddOptionRow
+            onEnter: handleAddOptionRow,
+            showIconColumn,
+            renderIconSelector
           },
           isDragging ? id : index
         )) })
       }
     ) }),
-    /* @__PURE__ */ jsxs58(
-      Button,
+    /* @__PURE__ */ jsx91(
+      AddListButton,
       {
-        "data-testid": "add-input-row-action",
-        buttonType: "secondaryInvert",
-        size: "xs",
-        onClick: handleAddOptionRow,
+        onButtonClick: handleAddOptionRow,
         disabled: disabled2,
-        css: { marginTop: "var(--spacing-base)" },
-        children: [
-          /* @__PURE__ */ jsx91(Icon, { icon: "math-plus", iconColor: "currentColor", size: "0.85rem" }),
-          " Add option"
-        ]
+        "data-testid": "add-input-row-action",
+        css: { marginTop: "var(--spacing-sm)", marginLeft: "var(--spacing-base)" }
       }
     )
   ] });
@@ -9564,6 +9584,7 @@ var KeyValueInputItem = ({
   keyLabel,
   value,
   valueLabel,
+  iconLabel,
   disabled: disabled2,
   onChange,
   onDelete,
@@ -9571,7 +9592,9 @@ var KeyValueInputItem = ({
   onFocusChange,
   disabledDelete = false,
   disabledDnd = false,
-  onEnter
+  onEnter,
+  showIconColumn = false,
+  renderIconSelector
 }) => {
   const { attributes, listeners, setNodeRef, transform, transition, setActivatorNodeRef, isSorting } = useSortable({
     id,
@@ -9588,62 +9611,98 @@ var KeyValueInputItem = ({
   };
   return /* @__PURE__ */ jsxs58("div", { css: rowWrapper, ref: setNodeRef, style, children: [
     /* @__PURE__ */ jsx91(DragHandle, { disableDnd: disabledDnd, ref: setActivatorNodeRef, ...attributes, ...listeners }),
-    /* @__PURE__ */ jsxs58("div", { css: SelectKeyValueRowStyles, "data-testid": "key-value-input-item", children: [
-      /* @__PURE__ */ jsx91(
-        Input,
-        {
-          ref: firstInputRef,
-          label: keyLabel,
-          showLabel: false,
-          disabled: disabled2,
-          onChange: (e) => {
-            const hasStoredValue = value.value !== value.key;
-            onChange == null ? void 0 : onChange({
-              key: e.currentTarget.value,
-              value: hasStoredValue ? value.value : e.currentTarget.value
-            });
-          },
-          onBlur: () => onFocusChange == null ? void 0 : onFocusChange(false),
-          onFocus: () => onFocusChange == null ? void 0 : onFocusChange(true),
-          onKeyDown: handleEnter,
-          value: value.key,
-          errorMessage: isSorting ? void 0 : error == null ? void 0 : error.key,
-          "data-testid": "key"
-        }
-      ),
-      /* @__PURE__ */ jsx91(
-        Input,
-        {
-          label: valueLabel,
-          showLabel: false,
-          disabled: disabled2,
-          onChange: (e) => {
-            onChange == null ? void 0 : onChange({
-              key: value.key,
-              value: e.currentTarget.value
-            });
-          },
-          onBlur: () => onFocusChange == null ? void 0 : onFocusChange(false),
-          onFocus: () => onFocusChange == null ? void 0 : onFocusChange(true),
-          onKeyDown: handleEnter,
-          value: value.value,
-          errorMessage: isSorting ? void 0 : error == null ? void 0 : error.value,
-          "data-testid": "value"
-        }
-      ),
-      /* @__PURE__ */ jsx91("div", { css: { marginTop: "1rem" }, children: /* @__PURE__ */ jsx91(
-        Button,
-        {
-          type: "button",
-          buttonType: "ghostDestructive",
-          "data-testid": "delete-row",
-          onClick: onDelete,
-          disabled: disabled2 || disabledDelete,
-          size: "zero",
-          children: /* @__PURE__ */ jsx91(Icon, { icon: "trash", size: 16, iconColor: "currentColor" })
-        }
-      ) })
-    ] })
+    /* @__PURE__ */ jsxs58(
+      "div",
+      {
+        css: [
+          SelectKeyValueRowStyles,
+          showIconColumn && { gridTemplateColumns: "1fr 1fr 1fr 1.5rem" }
+        ],
+        "data-testid": "key-value-input-item",
+        children: [
+          showIconColumn && /* @__PURE__ */ jsx91("div", { children: renderIconSelector ? renderIconSelector({
+            value: value.icon,
+            onChange: (icon) => onChange == null ? void 0 : onChange({ ...value, icon }),
+            disabled: disabled2
+          }) : /* @__PURE__ */ jsx91(
+            Input,
+            {
+              label: iconLabel,
+              showLabel: false,
+              disabled: disabled2,
+              onChange: (e) => {
+                onChange == null ? void 0 : onChange({
+                  ...value,
+                  icon: e.currentTarget.value
+                });
+              },
+              onBlur: () => onFocusChange == null ? void 0 : onFocusChange(false),
+              onFocus: () => onFocusChange == null ? void 0 : onFocusChange(true),
+              onKeyDown: handleEnter,
+              value: value.icon || "",
+              errorMessage: isSorting ? void 0 : error == null ? void 0 : error.icon,
+              "data-testid": "icon"
+            }
+          ) }),
+          /* @__PURE__ */ jsx91(
+            Input,
+            {
+              ref: firstInputRef,
+              label: keyLabel,
+              showLabel: false,
+              disabled: disabled2,
+              onChange: (e) => {
+                const hasStoredValue = value.value !== value.key;
+                onChange == null ? void 0 : onChange({
+                  key: e.currentTarget.value,
+                  value: hasStoredValue ? value.value : e.currentTarget.value,
+                  icon: value.icon
+                });
+              },
+              onBlur: () => onFocusChange == null ? void 0 : onFocusChange(false),
+              onFocus: () => onFocusChange == null ? void 0 : onFocusChange(true),
+              onKeyDown: handleEnter,
+              value: value.key,
+              errorMessage: isSorting ? void 0 : error == null ? void 0 : error.key,
+              "data-testid": "key"
+            }
+          ),
+          /* @__PURE__ */ jsx91(
+            Input,
+            {
+              label: valueLabel,
+              showLabel: false,
+              disabled: disabled2,
+              onChange: (e) => {
+                onChange == null ? void 0 : onChange({
+                  key: value.key,
+                  value: e.currentTarget.value,
+                  icon: value.icon
+                });
+              },
+              onBlur: () => onFocusChange == null ? void 0 : onFocusChange(false),
+              onFocus: () => onFocusChange == null ? void 0 : onFocusChange(true),
+              onKeyDown: handleEnter,
+              value: value.value,
+              errorMessage: isSorting ? void 0 : error == null ? void 0 : error.value,
+              "data-testid": "value"
+            }
+          ),
+          /* @__PURE__ */ jsx91("div", { css: { marginTop: "1rem" }, children: /* @__PURE__ */ jsx91(
+            Button,
+            {
+              type: "button",
+              buttonType: "ghostDestructive",
+              "data-testid": "delete-row",
+              onClick: onDelete,
+              disabled: disabled2 || disabledDelete,
+              size: "zero",
+              children: /* @__PURE__ */ jsx91(Icon, { icon: "trash", size: 16, iconColor: "currentColor" })
+            }
+          ) })
+        ]
+      }
+    )
   ] });
 };
@@ -9844,15 +9903,15 @@ var ScrollableListInner = css72`
 // src/components/List/ScrollableList.tsx
 import { jsx as jsx95, jsxs as jsxs62 } from "@emotion/react/jsx-runtime";
-var ScrollableList = ({ label, children, ...props }) => {
+var ScrollableList = ({ label: label2, children, ...props }) => {
   return /* @__PURE__ */ jsxs62("div", { css: [ScrollableListContainer, scrollbarStyles], ...props, children: [
-    label ? /* @__PURE__ */ jsx95(
+    label2 ? /* @__PURE__ */ jsx95(
       "span",
       {
         css: css73`
             ${labelText}
           `,
-        children: label
+        children: label2
       }
     ) : null,
     /* @__PURE__ */ jsx95("div", { css: [ScrollableListInner, scrollbarStyles], children })
@@ -9929,7 +9988,7 @@ var ScrollableListIconVisible = css74`
 // src/components/List/ScrollableListInputItem.tsx
 import { jsx as jsx96, jsxs as jsxs63 } from "@emotion/react/jsx-runtime";
 var ScrollableListInputItem = ({
-  label,
+  label: label2,
   icon,
   active: active2,
   disableShadow = false,
@@ -9949,7 +10008,7 @@ var ScrollableListInputItem = ({
       children: /* @__PURE__ */ jsxs63("label", { "data-testid": labelTestId, css: ScrollableListInputLabel, children: [
         /* @__PURE__ */ jsxs63("span", { css: ScrollableListInputText, children: [
           icon,
-          label
+          label2
         ] }),
         /* @__PURE__ */ jsx96("div", { css: ScrollableListHiddenInput, children }),
         /* @__PURE__ */ jsx96(
@@ -10330,20 +10389,20 @@ var LoadingOverlay = ({
   );
 };
 var LoadingAnimation = ({
-  label,
+  label: label2,
   width,
-  css: css111,
+  css: css112,
   isPaused
 }) => {
   return /* @__PURE__ */ jsxs66(
     "div",
     {
-      "aria-label": label,
+      "aria-label": label2,
       style: {
         width: typeof width === "number" ? `${width}px` : width,
         height: typeof width === "number" ? `${width}px` : width
       },
-      css: [loaderAnimationContainer, css111],
+      css: [loaderAnimationContainer, css112],
       className: `loader-container${isPaused ? " paused" : ""}`,
       children: [
         /* @__PURE__ */ jsxs66("div", { className: "bottom-cubes", children: [
@@ -11423,10 +11482,10 @@ var ParameterShellContext = createContext5({
   }
 });
 var useParameterShell = () => {
-  const { id, label, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = useContext5(ParameterShellContext);
+  const { id, label: label2, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = useContext5(ParameterShellContext);
   return {
     id,
-    label,
+    label: label2,
     hiddenLabel,
     errorMessage,
     handleManuallySetErrorMessage
@@ -11922,16 +11981,6 @@ var toggleInput2 = css91`
     color: var(--white);
   }
-  &:indeterminate,
-  &:indeterminate:hover,
-  &:indeterminate:focus {
-    background: var(--accent-dark-active)
-      url('data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIxNiIKICBoZWlnaHQ9IjE2IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKPgogIDxwYXRoCiAgICBkPSJNNCAxMkM0IDExLjQ0NzcgNC40NDc3MiAxMSA1IDExSDE5QzE5LjU1MjMgMTEgMjAgMTEuNDQ3NyAyMCAxMkMyMCAxMi41NTIzIDE5LjU1MjMgMTMgMTkgMTNINUM0LjQ0NzcyIDEzIDQgMTIuNTUyMyA0IDEyWiIKICAgIGZpbGw9IndoaXRlIgogIC8+Cjwvc3ZnPg==')
-      no-repeat center center;
-    border-color: var(--accent-dark-active);
-    color: var(--white);
-  }
   &:hover {
     border-color: var(--accent-dark-hover);
   }
@@ -11942,6 +11991,17 @@ var toggleInput2 = css91`
     border-color: var(--gray-300);
   }
 `;
+var toggleInputIndeterminateState = css91`
+  &:indeterminate,
+  &:indeterminate:hover,
+  &:indeterminate:focus {
+    background: var(--accent-dark-active)
+      url('data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIxNiIKICBoZWlnaHQ9IjE2IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKPgogIDxwYXRoCiAgICBkPSJNNCAxMkM0IDExLjQ0NzcgNC40NDc3MiAxMSA1IDExSDE5QzE5LjU1MjMgMTEgMjAgMTEuNDQ3NyAyMCAxMkMyMCAxMi41NTIzIDE5LjU1MjMgMTMgMTkgMTNINUM0LjQ0NzcyIDEzIDQgMTIuNTUyMyA0IDEyWiIKICAgIGZpbGw9IndoaXRlIgogIC8+Cjwvc3ZnPg==')
+      no-repeat center center;
+    border-color: var(--accent-dark-active);
+    color: var(--white);
+  }
+`;
 var inlineLabel2 = css91`
   color: var(--inline-label-color);
   padding-left: var(--spacing-md);
@@ -12084,7 +12144,7 @@ var ParameterLabel = ({ id, asSpan, children, testId, ...props }) => {
 import { forwardRef as forwardRef21 } from "react";
 import { jsx as jsx120 } from "@emotion/react/jsx-runtime";
 var ParameterMenuButton = forwardRef21(
-  ({ label, children, disabled: disabled2 }, ref) => {
+  ({ label: label2, children, disabled: disabled2 }, ref) => {
     return /* @__PURE__ */ jsx120(
       Menu,
       {
@@ -12095,7 +12155,7 @@ var ParameterMenuButton = forwardRef21(
             className: "parameter-menu",
             css: [inputMenu, inputMenuHover],
             type: "button",
-            "aria-label": `${label} options`,
+            "aria-label": `${label2} options`,
             ref,
             disabled: disabled2,
             children: /* @__PURE__ */ jsx120(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
@@ -12138,7 +12198,7 @@ import { jsx as jsx121, jsxs as jsxs80 } from "@emotion/react/jsx-runtime";
 var extractParameterProps = (props) => {
   const {
     id,
-    label,
+    label: label2,
     caption,
     captionTestId,
     errorMessage,
@@ -12156,7 +12216,7 @@ var extractParameterProps = (props) => {
   return {
     shellProps: {
       id,
-      label,
+      label: label2,
       caption,
       captionTestId,
       errorMessage,
@@ -12174,7 +12234,7 @@ var extractParameterProps = (props) => {
   };
 };
 var ParameterShell = ({
-  label,
+  label: label2,
   labelLeadingIcon,
   labelTrailingIcon,
   hiddenLabel,
@@ -12200,7 +12260,7 @@ var ParameterShell = ({
   return /* @__PURE__ */ jsxs80("div", { css: inputContainer2, ...props, id, children: [
     hiddenLabel || title ? null : /* @__PURE__ */ jsxs80(ParameterLabel, { id, css: labelText2, children: [
       labelLeadingIcon != null ? labelLeadingIcon : null,
-      label,
+      label2,
       labelTrailingIcon != null ? labelTrailingIcon : null
     ] }),
     !title ? null : /* @__PURE__ */ jsxs80(ParameterLabel, { id, asSpan: true, testId: "parameter-label", children: [
@@ -12223,13 +12283,13 @@ var ParameterShell = ({
           children: actionItems
         }
       ) : null,
-      menuItems ? /* @__PURE__ */ jsx121(ParameterMenuButton, { label: `${label} menu`, disabled: props.disabled, children: menuItems }) : null,
+      menuItems ? /* @__PURE__ */ jsx121(ParameterMenuButton, { label: `${label2} menu`, disabled: props.disabled, children: menuItems }) : null,
       /* @__PURE__ */ jsx121(
         ParameterShellContext.Provider,
         {
           value: {
             id,
-            label,
+            label: label2,
             hiddenLabel,
             errorMessage: errorMessaging,
             handleManuallySetErrorMessage: (message) => setErrorMessage(message)
@@ -12272,7 +12332,7 @@ var ParameterImage = forwardRef22(
 );
 var ParameterImageInner = forwardRef22((props, ref) => {
   const { value } = props;
-  const { id, label, hiddenLabel, errorMessage } = useParameterShell();
+  const { id, label: label2, hiddenLabel, errorMessage } = useParameterShell();
   const deferredValue = useDeferredValue(value);
   return /* @__PURE__ */ jsxs81(Fragment13, { children: [
     /* @__PURE__ */ jsx122(
@@ -12282,7 +12342,7 @@ var ParameterImageInner = forwardRef22((props, ref) => {
         type: "text",
         id,
         ref,
-        "aria-label": hiddenLabel && typeof label === "string" ? label : void 0,
+        "aria-label": hiddenLabel && typeof label2 === "string" ? label2 : void 0,
         autoComplete: "off",
         ...props
       }
@@ -12299,7 +12359,7 @@ var ParameterInput = forwardRef23((props, ref) => {
   return /* @__PURE__ */ jsx123(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ jsx123(ParameterInputInner, { ref, ...innerProps }) });
 });
 var ParameterInputInner = forwardRef23(({ enableMouseWheel = false, ...props }, ref) => {
-  const { id, label, hiddenLabel } = useParameterShell();
+  const { id, label: label2, hiddenLabel } = useParameterShell();
   const isNumberInputAndMouseWheelDisabled = enableMouseWheel !== true && props.type === "number";
   return /* @__PURE__ */ jsx123(
     "input",
@@ -12307,7 +12367,7 @@ var ParameterInputInner = forwardRef23(({ enableMouseWheel = false, ...props },
       css: input3,
       id,
       type: props.type || "text",
-      "aria-label": hiddenLabel && typeof label === "string" ? label : void 0,
+      "aria-label": hiddenLabel && typeof label2 === "string" ? label2 : void 0,
       autoComplete: "off",
       ref,
       onWheel: isNumberInputAndMouseWheelDisabled ? disableMouseWheelEvent : void 0,
@@ -12344,7 +12404,7 @@ var ParameterLink = forwardRef24(
 );
 var ParameterLinkInner = forwardRef24(
   ({ externalLink, onConnectLink, disabled: disabled2, buttonText = "Select link", ...props }, ref) => {
-    const { id, label, hiddenLabel } = useParameterShell();
+    const { id, label: label2, hiddenLabel } = useParameterShell();
     if (!props.value)
       return /* @__PURE__ */ jsx124("button", { type: "button", css: dataConnectButton, disabled: disabled2, onClick: onConnectLink, children: buttonText });
     return /* @__PURE__ */ jsxs82("div", { css: inputWrapper, children: [
@@ -12356,7 +12416,7 @@ var ParameterLinkInner = forwardRef24(
           readOnly: Boolean(props.value),
           id,
           ref,
-          "aria-label": hiddenLabel && typeof label === "string" ? label : void 0,
+          "aria-label": hiddenLabel && typeof label2 === "string" ? label2 : void 0,
           ...props
         }
       ),
@@ -12397,7 +12457,7 @@ var ParameterMultiSelect = ({ disabled: disabled2 = false, ...props }) => {
 };
 var ParameterMultiSelectInner = (props) => {
   var _a;
-  const { id, label } = useParameterShell();
+  const { id, label: label2 } = useParameterShell();
   return /* @__PURE__ */ jsx125(
     InputComboBox,
     {
@@ -12407,7 +12467,7 @@ var ParameterMultiSelectInner = (props) => {
       isMulti: true,
       isClearable: (_a = props.isClearable) != null ? _a : false,
       id,
-      "aria-label": typeof label === "string" ? label : void 0,
+      "aria-label": typeof label2 === "string" ? label2 : void 0,
       classNamePrefix: "parameter-multi-select-combobox",
       styles: {
         menuPortal: (base) => ({
@@ -12459,7 +12519,7 @@ var ParameterNameAndPublicIdInput = ({
   publicIdError,
   readOnly = false,
   hasInitialPublicIdField,
-  label = "Name",
+  label: label2 = "Name",
   warnOverLength,
   nameIdField = "name",
   nameCaption,
@@ -12480,7 +12540,7 @@ var ParameterNameAndPublicIdInput = ({
       {
         id: nameIdField,
         name: nameIdField,
-        label,
+        label: label2,
         "data-testid": "name-field",
         autoComplete: "off",
         "data-af": "true",
@@ -12524,8 +12584,650 @@ var ParameterNameAndPublicIdInput = ({
   ] });
 };
+// src/components/ParameterInputs/ParameterNumberSlider.tsx
+import { forwardRef as forwardRef26 } from "react";
+// src/components/Slider/Slider.tsx
+import { forwardRef as forwardRef25, useCallback as useCallback8, useMemo as useMemo6 } from "react";
+// src/components/Slider/SliderLabels.tsx
+import { useEffect as useEffect15, useRef as useRef9, useState as useState15 } from "react";
+// src/components/Slider/styles/Slider.styles.ts
+import { css as css94 } from "@emotion/react";
+var thumbSize = "20px";
+var disabledThumbStyles = css94`
+  background: var(--gray-500);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cline x1='4' y1='9' x2='16' y2='9' stroke='%23ffffff' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 12px 12px;
+`;
+var container3 = css94`
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-base);
+  width: 100%;
+`;
+var sliderContainer = css94`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+`;
+var sliderTrackContainer = css94`
+  position: relative;
+  padding: var(--spacing-xs) 0;
+`;
+var progressTrack = css94`
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 4px;
+  transform: translateY(-50%);
+  margin-top: -3px;
+  border-radius: var(--rounded-sm);
+`;
+var progressTrackBackground = css94`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--gray-200);
+  border-radius: var(--rounded-sm);
+  box-shadow: 0 0 0 1px white;
+`;
+var progressTrackFill = css94`
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  background: var(--accent-light);
+  border-radius: var(--rounded-sm);
+`;
+var tickMarksContainer = css94`
+  position: relative;
+  height: 1rem;
+  margin-top: calc(-1 * var(--spacing-base) + var(--spacing-xs));
+`;
+var tickMark = css94`
+  position: absolute;
+  top: 0;
+  width: 0.5px;
+  height: 8px;
+  background-color: var(--gray-300);
+`;
+var largeTickMark = css94`
+  position: absolute;
+  top: 0;
+  width: 1px;
+  height: 12px;
+  background-color: var(--gray-400);
+  transform: translateX(-50%);
+`;
+var slider = css94`
+  appearance: none;
+  width: 100%;
+  width: calc(100% + ${thumbSize});
+  left: calc(-${thumbSize} / 2);
+  height: ${thumbSize};
+  background: transparent;
+  outline: none;
+  cursor: pointer;
+  position: relative;
+  z-index: 3;
+  &:disabled {
+    cursor: not-allowed;
+  }
+  /* Webkit (Chrome, Safari) */
+  &::-webkit-slider-track {
+    width: 100%;
+    height: 4px;
+    background: transparent;
+    border-radius: var(--rounded-sm);
+  }
+  &::-webkit-slider-thumb {
+    appearance: none;
+    height: ${thumbSize};
+    width: ${thumbSize};
+    border-radius: 50%;
+    background: var(--accent-dark);
+    cursor: pointer;
+    border: 2px solid var(--white);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    position: relative;
+    z-index: 2;
+    &:hover {
+      background: var(--accent-dark-hover);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    }
+    &:active {
+      background: var(--accent-dark-active);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    }
+  }
+  &:disabled::-webkit-slider-thumb {
+    ${disabledThumbStyles}
+    &:hover,
+    &:active {
+      ${disabledThumbStyles}
+    }
+  }
+  /* Firefox */
+  &::-moz-range-track {
+    width: 100%;
+    height: 4px;
+    background: transparent;
+    border-radius: var(--rounded-sm);
+    border: none;
+  }
+  &::-moz-range-thumb {
+    height: ${thumbSize};
+    width: ${thumbSize};
+    border-radius: 50%;
+    background: var(--accent-dark);
+    cursor: pointer;
+    border: 2px solid var(--white);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    &:hover {
+      background: var(--accent-dark-hover);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    }
+    &:active {
+      background: var(--accent-dark-active);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    }
+  }
+  &:disabled::-moz-range-thumb {
+    ${disabledThumbStyles}
+    &:hover,
+    &:active {
+      ${disabledThumbStyles}
+    }
+  }
+  /* Focus states */
+  &:focus {
+    outline: none;
+  }
+  &:focus::-webkit-slider-thumb {
+    box-shadow:
+      0 2px 4px rgba(0, 0, 0, 0.1),
+      0 0 0 3px var(--accent-light);
+  }
+  &:focus::-moz-range-thumb {
+    box-shadow:
+      0 2px 4px rgba(0, 0, 0, 0.1),
+      0 0 0 3px var(--accent-light);
+  }
+`;
+var labelsContainer = css94`
+  position: relative;
+  height: 1.5rem;
+  width: 100%;
+`;
+var label = css94`
+  position: absolute;
+  top: 0;
+  font-size: var(--text-sm);
+  color: var(--gray-500);
+  text-align: center;
+  /* Truncation for long labels */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* Set max width to prevent labels from extending too far */
+  max-width: 25%;
+  /* Default centering transform */
+  transform: translateX(-50%);
+  /* Smooth transitions for label changes */
+  transition:
+    opacity var(--duration-fast) var(--timing-ease-out),
+    transform var(--duration-fast) var(--timing-ease-out);
+  /* Handle edge cases for first and last labels */
+  &[data-position='0'] {
+    transform: translateX(0);
+    text-align: left;
+    max-width: 50%;
+  }
+  &[data-position='100'] {
+    transform: translateX(-100%);
+    text-align: right;
+    max-width: 50%;
+  }
+  /* Handle single label case by centering it */
+  &:only-child {
+    left: 50% !important;
+    transform: translateX(-50%);
+    text-align: center;
+    max-width: 100%;
+  }
+`;
+var numberInputContainer = css94`
+  flex-shrink: 0;
+  min-width: 2rem;
+  margin-top: var(--spacing-sm);
+`;
+var numberInput2 = css94`
+  appearance: none;
+  background-color: var(--white);
+  border: 1px solid var(--gray-300);
+  border-radius: var(--rounded-sm);
+  color: var(--gray-700);
+  padding: var(--spacing-sm);
+  width: 100%;
+  font-size: var(--text-sm);
+  text-align: center;
+  transition:
+    background var(--duration-fast) var(--timing-ease-out),
+    border-color var(--duration-fast) var(--timing-ease-out),
+    color var(--duration-fast) var(--timing-ease-out),
+    box-shadow var(--duration-fast) var(--timing-ease-out);
+  &::placeholder {
+    color: var(--gray-400);
+  }
+  &:hover {
+    border-color: var(--accent-dark-hover);
+  }
+  &:focus {
+    border-color: var(--accent-dark-active);
+    box-shadow: var(--elevation-100);
+    outline: none;
+  }
+  &:disabled {
+    cursor: not-allowed;
+    color: var(--gray-300);
+    border-color: var(--gray-300);
+    background-color: var(--gray-50);
+  }
+  /* Hide number input spinners */
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    appearance: none;
+    margin: 0;
+  }
+  &[type='number'] {
+    -moz-appearance: textfield;
+  }
+`;
+// src/components/Slider/SliderLabels.tsx
+import { jsx as jsx127 } from "@emotion/react/jsx-runtime";
+function estimateLabelWidth(text) {
+  const fontSize = 14;
+  const avgCharWidthRatio = 0.7;
+  const avgCharWidth = fontSize * avgCharWidthRatio;
+  const basePadding = 24;
+  return Math.ceil(text.length * avgCharWidth + basePadding);
+}
+function generateSymmetricIndices(totalCount) {
+  if (totalCount <= 0) return [];
+  if (totalCount === 1) return [[0]];
+  if (totalCount === 2) return [[0, totalCount - 1]];
+  const levels = [];
+  levels.push([0, totalCount - 1]);
+  if (totalCount % 2 === 1) {
+    levels.push([Math.floor(totalCount / 2)]);
+  } else {
+    const mid1 = Math.floor(totalCount / 2) - 1;
+    const mid2 = Math.floor(totalCount / 2);
+    levels.push([mid1, mid2]);
+  }
+  let currentDivisions = 4;
+  while (currentDivisions <= totalCount) {
+    const newIndices = [];
+    for (let i = 1; i < currentDivisions; i += 2) {
+      const index = Math.round(i / currentDivisions * (totalCount - 1));
+      if (index > 0 && index < totalCount - 1) {
+        newIndices.push(index);
+      }
+    }
+    if (newIndices.length > 0) {
+      levels.push(newIndices);
+    }
+    currentDivisions *= 2;
+  }
+  return levels;
+}
+function labelsWouldOverlap(pos1, width1, pos2, width2, containerWidth) {
+  const pixelPos1 = pos1 / 100 * containerWidth;
+  const pixelPos2 = pos2 / 100 * containerWidth;
+  const buffer = 8;
+  const left1 = pixelPos1 - width1 / 2 - buffer / 2;
+  const right1 = pixelPos1 + width1 / 2 + buffer / 2;
+  const left2 = pixelPos2 - width2 / 2 - buffer / 2;
+  const right2 = pixelPos2 + width2 / 2 + buffer / 2;
+  return !(right1 < left2 || right2 < left1);
+}
+function calculateLabelVisibility(ticks, currentValue, containerWidth) {
+  const labelsWithTicks = ticks.map((tick, index) => ({ tick, index })).filter(({ tick }) => tick.label);
+  if (labelsWithTicks.length === 0) {
+    return [];
+  }
+  const currentSelectionIndex = labelsWithTicks.findIndex(({ tick }) => tick.position === currentValue);
+  const distributionLevels = generateSymmetricIndices(labelsWithTicks.length);
+  let visibleIndices = new Set(distributionLevels[0] || []);
+  if (currentSelectionIndex !== -1) {
+    visibleIndices.add(currentSelectionIndex);
+  }
+  for (let levelIndex = 1; levelIndex < distributionLevels.length; levelIndex++) {
+    const candidateIndices = new Set(visibleIndices);
+    for (const index of distributionLevels[levelIndex]) {
+      candidateIndices.add(index);
+    }
+    const maxLabelsForWidth = Math.max(2, Math.floor(containerWidth / 100));
+    if (candidateIndices.size > maxLabelsForWidth) {
+      break;
+    }
+    const candidateArray = Array.from(candidateIndices).sort((a, b) => a - b);
+    let hasOverlap = false;
+    for (let i = 0; i < candidateArray.length - 1; i++) {
+      const curr = labelsWithTicks[candidateArray[i]];
+      const next = labelsWithTicks[candidateArray[i + 1]];
+      const currWidth = estimateLabelWidth(curr.tick.label || "");
+      const nextWidth = estimateLabelWidth(next.tick.label || "");
+      if (labelsWouldOverlap(curr.tick.percentage, currWidth, next.tick.percentage, nextWidth, containerWidth)) {
+        hasOverlap = true;
+        break;
+      }
+    }
+    if (!hasOverlap) {
+      visibleIndices = candidateIndices;
+    } else {
+      break;
+    }
+  }
+  if (currentSelectionIndex !== -1 && visibleIndices.has(currentSelectionIndex)) {
+    const currentTick = labelsWithTicks[currentSelectionIndex].tick;
+    const currentWidth = estimateLabelWidth(currentTick.label || "");
+    const sortedVisible = Array.from(visibleIndices).sort((a, b) => a - b);
+    const currentIndexInVisible = sortedVisible.indexOf(currentSelectionIndex);
+    if (currentIndexInVisible > 0) {
+      const leftIndex = sortedVisible[currentIndexInVisible - 1];
+      const leftTick = labelsWithTicks[leftIndex].tick;
+      const leftWidth = estimateLabelWidth(leftTick.label || "");
+      if (labelsWouldOverlap(
+        leftTick.percentage,
+        leftWidth,
+        currentTick.percentage,
+        currentWidth,
+        containerWidth
+      )) {
+        visibleIndices.delete(leftIndex);
+      }
+    }
+    if (currentIndexInVisible < sortedVisible.length - 1) {
+      const rightIndex = sortedVisible[currentIndexInVisible + 1];
+      const rightTick = labelsWithTicks[rightIndex].tick;
+      const rightWidth = estimateLabelWidth(rightTick.label || "");
+      if (labelsWouldOverlap(
+        currentTick.percentage,
+        currentWidth,
+        rightTick.percentage,
+        rightWidth,
+        containerWidth
+      )) {
+        visibleIndices.delete(rightIndex);
+      }
+    }
+  }
+  return labelsWithTicks.map(({ index }, arrayIndex) => ({
+    tickIndex: index,
+    isVisible: visibleIndices.has(arrayIndex),
+    priority: visibleIndices.has(arrayIndex) ? 1 : 10
+    // Simple priority for visible vs hidden
+  }));
+}
+function SliderLabels({ ticks, currentValue, containerWidth = 300 }) {
+  const containerRef = useRef9(null);
+  const [measuredWidth, setMeasuredWidth] = useState15(containerWidth);
+  useEffect15(() => {
+    if (containerRef.current) {
+      const resizeObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          setMeasuredWidth(entry.contentRect.width);
+        }
+      });
+      resizeObserver.observe(containerRef.current);
+      setMeasuredWidth(containerRef.current.offsetWidth);
+      return () => resizeObserver.disconnect();
+    }
+  }, []);
+  const labelVisibilities = calculateLabelVisibility(ticks, currentValue, measuredWidth);
+  const visibilityMap = new Map(labelVisibilities.map((lv) => [lv.tickIndex, lv.isVisible]));
+  return /* @__PURE__ */ jsx127("div", { ref: containerRef, css: labelsContainer, children: ticks.map((tick, index) => ({ tick, index })).filter(({ tick }) => tick.label).map(({ tick, index }) => {
+    var _a;
+    const isVisible = (_a = visibilityMap.get(index)) != null ? _a : false;
+    return /* @__PURE__ */ jsx127(
+      "div",
+      {
+        css: label,
+        style: {
+          left: `${tick.percentage}%`,
+          opacity: isVisible ? 1 : 0,
+          pointerEvents: isVisible ? "auto" : "none"
+        },
+        "data-position": tick.percentage === 0 ? "0" : tick.percentage === 100 ? "100" : void 0,
+        title: tick.label,
+        children: tick.label
+      },
+      `label-${index}-${tick.position}`
+    );
+  }) });
+}
+// src/components/Slider/Slider.tsx
+import { jsx as jsx128, jsxs as jsxs84 } from "@emotion/react/jsx-runtime";
+var Slider = forwardRef25(
+  ({
+    value,
+    onChange,
+    onBlur,
+    min: propMin,
+    max: propMax,
+    step: propStep,
+    options,
+    showNumberInput = !options,
+    // Default: show for numeric mode, hide for options mode
+    disabled: disabled2 = false,
+    "aria-label": ariaLabel,
+    id,
+    name
+  }, ref) => {
+    const isOptionsMode = Boolean(options && options.length > 0);
+    const { min, max, step, smallTicks, largeTicks } = useMemo6(() => {
+      if (isOptionsMode && options) {
+        return {
+          min: 0,
+          max: options.length - 1,
+          step: 1,
+          smallTicks: [],
+          // No small ticks for options mode
+          largeTicks: options.map((option, index) => ({
+            position: index,
+            percentage: index / (options.length - 1) * 100,
+            label: option.text,
+            isLarge: true
+          }))
+        };
+      }
+      const numericMin = propMin != null ? propMin : 0;
+      const numericMax = propMax != null ? propMax : 100;
+      const numericStep = propStep != null ? propStep : numericMax - numericMin > 20 ? Math.ceil((numericMax - numericMin) / 20) : 1;
+      const range = numericMax - numericMin;
+      const totalSteps = Math.floor(range / numericStep);
+      const smallTicks2 = [];
+      if (totalSteps <= 100) {
+        for (let i = 0; i <= totalSteps; i++) {
+          const position = numericMin + i * numericStep;
+          const percentage = (position - numericMin) / range * 100;
+          smallTicks2.push({
+            position,
+            percentage,
+            isLarge: false
+          });
+        }
+      } else {
+        const tickInterval = Math.ceil(totalSteps / 100);
+        for (let i = 0; i <= totalSteps; i += tickInterval) {
+          const position = numericMin + i * numericStep;
+          const percentage = (position - numericMin) / range * 100;
+          smallTicks2.push({
+            position,
+            percentage,
+            isLarge: false
+          });
+        }
+      }
+      const largeTicks2 = [
+        { position: numericMin, percentage: 0, label: numericMin.toString(), isLarge: true },
+        { position: numericMax, percentage: 100, label: numericMax.toString(), isLarge: true }
+      ];
+      if (range >= 20) {
+        const middlePosition = numericMin + range / 2;
+        largeTicks2.push({
+          position: middlePosition,
+          percentage: 50,
+          label: Math.round(middlePosition).toString(),
+          isLarge: true
+        });
+      }
+      return {
+        min: numericMin,
+        max: numericMax,
+        step: numericStep,
+        smallTicks: smallTicks2,
+        largeTicks: largeTicks2
+      };
+    }, [isOptionsMode, options, propMin, propMax, propStep]);
+    const clampedValue = Math.min(Math.max(value, min), max);
+    const handleSliderChange = useCallback8(
+      (event) => {
+        const newValue = Number(event.target.value);
+        onChange(newValue);
+      },
+      [onChange]
+    );
+    const handleNumberInputChange = useCallback8(
+      (event) => {
+        const newValue = event.target.value === "" ? min : Number(event.target.value);
+        onChange(newValue);
+      },
+      [onChange, min]
+    );
+    const fillPercentage = (clampedValue - min) / (max - min) * 100;
+    return /* @__PURE__ */ jsxs84("div", { css: container3, children: [
+      /* @__PURE__ */ jsxs84("div", { css: sliderContainer, children: [
+        /* @__PURE__ */ jsxs84("div", { css: sliderTrackContainer, children: [
+          /* @__PURE__ */ jsxs84("div", { css: progressTrack, children: [
+            /* @__PURE__ */ jsx128("div", { css: progressTrackBackground }),
+            /* @__PURE__ */ jsx128("div", { css: progressTrackFill, style: { width: `${fillPercentage}%` } })
+          ] }),
+          /* @__PURE__ */ jsx128(
+            "input",
+            {
+              ref,
+              type: "range",
+              id,
+              name,
+              min,
+              max,
+              step,
+              value: clampedValue,
+              onChange: handleSliderChange,
+              onBlur,
+              disabled: disabled2,
+              "aria-label": ariaLabel,
+              css: slider
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs84("div", { css: tickMarksContainer, children: [
+          smallTicks.map((tick, index) => /* @__PURE__ */ jsx128("div", { css: tickMark, style: { left: `${tick.percentage}%` } }, `small-${index}`)),
+          largeTicks.map((tick, index) => /* @__PURE__ */ jsx128(
+            "div",
+            {
+              css: largeTickMark,
+              style: { left: `${tick.percentage}%` }
+            },
+            `large-${index}`
+          ))
+        ] }),
+        largeTicks.some((tick) => tick.label) && /* @__PURE__ */ jsx128(SliderLabels, { ticks: largeTicks, currentValue: clampedValue })
+      ] }),
+      showNumberInput && !isOptionsMode && /* @__PURE__ */ jsx128("div", { css: numberInputContainer, children: /* @__PURE__ */ jsx128(
+        "input",
+        {
+          type: "number",
+          value: clampedValue,
+          onChange: handleNumberInputChange,
+          onBlur,
+          disabled: disabled2,
+          min,
+          max,
+          step,
+          css: numberInput2
+        }
+      ) })
+    ] });
+  }
+);
+Slider.displayName = "Slider";
+// src/components/ParameterInputs/ParameterNumberSlider.tsx
+import { jsx as jsx129 } from "@emotion/react/jsx-runtime";
+var ParameterNumberSlider = forwardRef26(
+  (props, ref) => {
+    const { shellProps, innerProps } = extractParameterProps(props);
+    return /* @__PURE__ */ jsx129(ParameterShell, { "data-testid": "parameter-number-slider", ...shellProps, children: /* @__PURE__ */ jsx129(ParameterNumberSliderInner, { ref, ...innerProps }) });
+  }
+);
+var ParameterNumberSliderInner = forwardRef26(({ ...props }, ref) => {
+  const { id, label: label2, hiddenLabel } = useParameterShell();
+  return /* @__PURE__ */ jsx129(
+    Slider,
+    {
+      ref,
+      id,
+      "aria-label": hiddenLabel && typeof label2 === "string" ? label2 : void 0,
+      ...props
+    }
+  );
+});
+ParameterNumberSlider.displayName = "ParameterNumberSlider";
+ParameterNumberSliderInner.displayName = "ParameterNumberSliderInner";
 // src/components/ParameterInputs/ParameterRichText.tsx
-import { css as css99 } from "@emotion/react";
+import { css as css100 } from "@emotion/react";
 import { ListItemNode, ListNode as ListNode3 } from "@lexical/list";
 import {
   CODE,
@@ -12669,7 +13371,7 @@ var defaultParameterConfiguration = {
 // src/components/ParameterInputs/ParameterRichText.tsx
 import { deepEqual as deepEqual2 } from "fast-equals";
 import { ParagraphNode as ParagraphNode2 } from "lexical";
-import { useEffect as useEffect23, useState as useState20 } from "react";
+import { useEffect as useEffect24, useState as useState21 } from "react";
 // src/components/ParameterInputs/rich-text/CustomCodeNode.ts
 import { CodeNode } from "@lexical/code";
@@ -12690,10 +13392,10 @@ CustomCodeNode.importDOM = function() {
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { mergeRegister } from "@lexical/utils";
 import { ParagraphNode } from "lexical";
-import { useEffect as useEffect15 } from "react";
+import { useEffect as useEffect16 } from "react";
 function DisableStylesPlugin() {
   const [editor] = useLexicalComposerContext();
-  useEffect15(() => {
+  useEffect16(() => {
     return mergeRegister(
       // Disable text alignment on paragraph nodes
       editor.registerNodeTransform(ParagraphNode, (node) => {
@@ -12707,23 +13409,23 @@ function DisableStylesPlugin() {
 }
 // src/components/ParameterInputs/rich-text/editorStyles.ts
-import { css as css94 } from "@emotion/css";
-var textBold = css94`
+import { css as css95 } from "@emotion/css";
+var textBold = css95`
   font-weight: 700;
 `;
-var textItalic = css94`
+var textItalic = css95`
   font-style: italic;
 `;
-var textUnderline = css94`
+var textUnderline = css95`
   text-decoration: underline;
 `;
-var textStrikethrough = css94`
+var textStrikethrough = css95`
   text-decoration: line-through;
 `;
-var textUnderlineStrikethrough = css94`
+var textUnderlineStrikethrough = css95`
   text-decoration: underline line-through;
 `;
-var textCode = css94`
+var textCode = css95`
   background-color: var(--gray-100);
   border-radius: var(--rounded-sm);
   display: inline-block;
@@ -12734,68 +13436,68 @@ var textCode = css94`
   padding-left: var(--spacing-xs);
   padding-right: var(--spacing-xs);
 `;
-var textSuperscript = css94`
+var textSuperscript = css95`
   vertical-align: super;
   font-size: smaller;
 `;
-var textSubscript = css94`
+var textSubscript = css95`
   vertical-align: sub;
   font-size: smaller;
 `;
-var linkElement = css94`
+var linkElement = css95`
   ${link}
   ${linkColorDefault}
   text-decoration: underline;
 `;
-var h12 = css94`
+var h12 = css95`
   font-size: clamp(1.35rem, var(--fluid-font-base), 1.7rem);
 `;
-var h22 = css94`
+var h22 = css95`
   font-size: clamp(1.35rem, var(--fluid-font-base), 1.6rem);
 `;
-var h32 = css94`
+var h32 = css95`
   font-size: clamp(1.25rem, var(--fluid-font-base), 1.5rem);
 `;
-var h42 = css94`
+var h42 = css95`
   font-size: clamp(1.15rem, var(--fluid-font-base), 1.25rem);
 `;
-var h52 = css94`
+var h52 = css95`
   font-size: clamp(var(--fs-base), var(--fluid-font-base), 1.15rem);
 `;
-var h62 = css94`
+var h62 = css95`
   font-size: var(--fs-base);
 `;
-var heading1Element = css94`
+var heading1Element = css95`
   ${h12}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading2Element = css94`
+var heading2Element = css95`
   ${h22}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading3Element = css94`
+var heading3Element = css95`
   ${h32}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading4Element = css94`
+var heading4Element = css95`
   ${h42}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading5Element = css94`
+var heading5Element = css95`
   ${h52}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading6Element = css94`
+var heading6Element = css95`
   ${h62}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var paragraphElement = css94`
+var paragraphElement = css95`
   line-height: 1.5;
   margin-bottom: var(--spacing-base);
@@ -12803,7 +13505,7 @@ var paragraphElement = css94`
     margin-bottom: 0;
   }
 `;
-var orderedListElement = css94`
+var orderedListElement = css95`
   ${commonLineHeight}
   display: block;
   list-style: decimal;
@@ -12832,7 +13534,7 @@ var orderedListElement = css94`
     }
   }
 `;
-var unorderedListElement = css94`
+var unorderedListElement = css95`
   ${commonLineHeight}
   display: block;
   list-style: disc;
@@ -12853,13 +13555,13 @@ var unorderedListElement = css94`
     }
   }
 `;
-var listItemElement = css94`
+var listItemElement = css95`
   margin-left: var(--spacing-md);
 `;
-var nestedListItemElement = css94`
+var nestedListItemElement = css95`
   list-style-type: none;
 `;
-var blockquoteElement = css94`
+var blockquoteElement = css95`
   border-left: 0.25rem solid var(--gray-300);
   color: var(--gray-600);
   margin-bottom: var(--spacing-base);
@@ -12869,7 +13571,7 @@ var blockquoteElement = css94`
     margin-bottom: 0;
   }
 `;
-var codeElement = css94`
+var codeElement = css95`
   background-color: var(--gray-100);
   border-radius: var(--rounded-sm);
   display: block;
@@ -12884,7 +13586,7 @@ var codeElement = css94`
     margin-bottom: 0;
   }
 `;
-var tableElement = css94`
+var tableElement = css95`
   border-collapse: collapse;
   border-spacing: 0;
   border-color: var(--gray-300);
@@ -12897,7 +13599,7 @@ var tableElement = css94`
     margin-bottom: 0;
   }
 `;
-var tableCellElement = css94`
+var tableCellElement = css95`
   background-color: var(--white);
   border-color: var(--gray-300);
   border-style: solid;
@@ -12933,7 +13635,7 @@ var tableCellElement = css94`
     z-index: 1;
   }
 `;
-var tableHeaderElement = css94`
+var tableHeaderElement = css95`
   background-color: var(--gray-100);
   border-color: var(--gray-300);
   border-style: solid;
@@ -12952,10 +13654,10 @@ var tableHeaderElement = css94`
 import { useLexicalComposerContext as useLexicalComposerContext2 } from "@lexical/react/LexicalComposerContext";
 import { $insertFirst } from "@lexical/utils";
 import { $createParagraphNode, $getRoot, $insertNodes } from "lexical";
-import { useEffect as useEffect16 } from "react";
+import { useEffect as useEffect17 } from "react";
 var ImprovedAssetSelectionPlugin = () => {
   const [editor] = useLexicalComposerContext2();
-  useEffect16(() => {
+  useEffect17(() => {
     editor.getRootElement();
     const onRootClick = (event) => {
       if (event.target !== editor.getRootElement()) {
@@ -13003,7 +13705,7 @@ var ImprovedAssetSelectionPlugin = () => {
 var ImprovedAssetSelectionPlugin_default = ImprovedAssetSelectionPlugin;
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
-import { css as css95 } from "@emotion/react";
+import { css as css96 } from "@emotion/react";
 import { useLexicalComposerContext as useLexicalComposerContext3 } from "@lexical/react/LexicalComposerContext";
 import { NodeEventPlugin } from "@lexical/react/LexicalNodeEventPlugin";
 import {
@@ -13026,7 +13728,7 @@ import {
   FOCUS_COMMAND,
   PASTE_COMMAND
 } from "lexical";
-import { useCallback as useCallback8, useEffect as useEffect17, useRef as useRef9, useState as useState15 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect18, useRef as useRef10, useState as useState16 } from "react";
 // src/components/ParameterInputs/rich-text/utils.ts
 import { $isAtNodeEnd } from "@lexical/selection";
@@ -13086,7 +13788,7 @@ var normalizeStateForDeepEqualComparison = (editorState) => {
 };
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
-import { Fragment as Fragment15, jsx as jsx127, jsxs as jsxs84 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx130, jsxs as jsxs85 } from "@emotion/react/jsx-runtime";
 var isProjectMapLinkValue = (value) => {
   return (value == null ? void 0 : value.type) === "projectMapNode" && Boolean(
     value.nodeId && value.path && value.projectMapId
@@ -13375,17 +14077,17 @@ var OPEN_LINK_NODE_MODAL_COMMAND = createCommand(
 );
 var LINK_POPOVER_OFFSET_X = 0;
 var LINK_POPOVER_OFFSET_Y = 8;
-var linkPopover = css95`
+var linkPopover = css96`
   position: absolute;
   z-index: 11;
 `;
-var linkPopoverContainer = css95`
+var linkPopoverContainer = css96`
   ${Popover};
   ${PopoverVariantSmall};
   align-items: center;
   display: flex;
 `;
-var linkPopoverAnchor = css95`
+var linkPopoverAnchor = css96`
   ${link}
   ${linkColorDefault}
 `;
@@ -13398,17 +14100,17 @@ function LinkNodePlugin({
     return path;
   };
   const [editor] = useLexicalComposerContext3();
-  const [linkPopoverState, setLinkPopoverState] = useState15();
-  const linkPopoverElRef = useRef9(null);
-  const [isEditorFocused, setIsEditorFocused] = useState15(false);
-  const [isLinkPopoverFocused, setIsLinkPopoverFocused] = useState15(false);
-  useEffect17(() => {
+  const [linkPopoverState, setLinkPopoverState] = useState16();
+  const linkPopoverElRef = useRef10(null);
+  const [isEditorFocused, setIsEditorFocused] = useState16(false);
+  const [isLinkPopoverFocused, setIsLinkPopoverFocused] = useState16(false);
+  useEffect18(() => {
     if (!isEditorFocused && !isLinkPopoverFocused) {
       setLinkPopoverState(void 0);
       return;
     }
   }, [isEditorFocused, isLinkPopoverFocused]);
-  useEffect17(() => {
+  useEffect18(() => {
     if (!editor.hasNodes([LinkNode])) {
       throw new Error("LinkNode not registered on editor");
     }
@@ -13512,7 +14214,7 @@ function LinkNodePlugin({
       )
     );
   }, [editor, onConnectLink]);
-  const maybeShowLinkToolbar = useCallback8(() => {
+  const maybeShowLinkToolbar = useCallback9(() => {
     if (!editor.isEditable()) {
       return;
     }
@@ -13546,7 +14248,7 @@ function LinkNodePlugin({
       }
     });
   }, [editor, positioningAnchorEl]);
-  useEffect17(() => {
+  useEffect18(() => {
     return editor.registerUpdateListener(({ editorState }) => {
       requestAnimationFrame(() => {
         editorState.read(() => {
@@ -13573,8 +14275,8 @@ function LinkNodePlugin({
       });
     });
   };
-  return /* @__PURE__ */ jsxs84(Fragment15, { children: [
-    /* @__PURE__ */ jsx127(
+  return /* @__PURE__ */ jsxs85(Fragment15, { children: [
+    /* @__PURE__ */ jsx130(
       NodeEventPlugin,
       {
         nodeType: LinkNode,
@@ -13584,7 +14286,7 @@ function LinkNodePlugin({
         }
       }
     ),
-    linkPopoverState ? /* @__PURE__ */ jsx127(
+    linkPopoverState ? /* @__PURE__ */ jsx130(
       "div",
       {
         css: linkPopover,
@@ -13593,8 +14295,8 @@ function LinkNodePlugin({
           top: linkPopoverState.position.y
         },
         ref: linkPopoverElRef,
-        children: /* @__PURE__ */ jsxs84("div", { css: linkPopoverContainer, children: [
-          linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ jsx127(
+        children: /* @__PURE__ */ jsxs85("div", { css: linkPopoverContainer, children: [
+          linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ jsx130(
             "a",
             {
               href: parsePath(
@@ -13606,7 +14308,7 @@ function LinkNodePlugin({
               children: parsePath(linkPopoverState.node.__link.path)
             }
           ),
-          /* @__PURE__ */ jsx127(
+          /* @__PURE__ */ jsx130(
             Button,
             {
               size: "xs",
@@ -13614,7 +14316,7 @@ function LinkNodePlugin({
                 onEditLinkNode(linkPopoverState.node);
               },
               buttonType: "ghost",
-              children: /* @__PURE__ */ jsx127(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
+              children: /* @__PURE__ */ jsx130(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
             }
           )
         ] })
@@ -13650,7 +14352,7 @@ import {
   OUTDENT_CONTENT_COMMAND,
   SELECTION_CHANGE_COMMAND
 } from "lexical";
-import { useEffect as useEffect18, useRef as useRef10 } from "react";
+import { useEffect as useEffect19, useRef as useRef11 } from "react";
 function isIndentPermitted(maxDepth) {
   const selection = $getSelection2();
   if (!$isRangeSelection2(selection)) {
@@ -13705,8 +14407,8 @@ function $indentOverTab(selection) {
 }
 function ListIndentPlugin({ maxDepth }) {
   const [editor] = useLexicalComposerContext4();
-  const isInListItemNode = useRef10(false);
-  useEffect18(() => {
+  const isInListItemNode = useRef11(false);
+  useEffect19(() => {
     return editor.registerCommand(
       SELECTION_CHANGE_COMMAND,
       () => {
@@ -13723,7 +14425,7 @@ function ListIndentPlugin({ maxDepth }) {
       COMMAND_PRIORITY_NORMAL
     );
   }, [editor]);
-  useEffect18(() => {
+  useEffect19(() => {
     return mergeRegister3(
       editor.registerCommand(
         INDENT_CONTENT_COMMAND,
@@ -13752,7 +14454,7 @@ function ListIndentPlugin({ maxDepth }) {
 }
 // src/components/ParameterInputs/rich-text/TableActionMenuPlugin.tsx
-import { css as css96 } from "@emotion/react";
+import { css as css97 } from "@emotion/react";
 import { useLexicalComposerContext as useLexicalComposerContext5 } from "@lexical/react/LexicalComposerContext";
 import { useLexicalEditable } from "@lexical/react/useLexicalEditable";
 import {
@@ -13772,8 +14474,8 @@ import {
   TableCellNode
 } from "@lexical/table";
 import { $getRoot as $getRoot2, $getSelection as $getSelection3, $isRangeSelection as $isRangeSelection3 } from "lexical";
-import { forwardRef as forwardRef25, useCallback as useCallback9, useEffect as useEffect19, useLayoutEffect, useState as useState16 } from "react";
-import { jsx as jsx128, jsxs as jsxs85 } from "@emotion/react/jsx-runtime";
+import { forwardRef as forwardRef27, useCallback as useCallback10, useEffect as useEffect20, useLayoutEffect, useState as useState17 } from "react";
+import { jsx as jsx131, jsxs as jsxs86 } from "@emotion/react/jsx-runtime";
 function computeSelectionCount(selection) {
   const selectionShape = selection.getShape();
   return {
@@ -13781,13 +14483,13 @@ function computeSelectionCount(selection) {
     rows: selectionShape.toY - selectionShape.fromY + 1
   };
 }
-var tableActionMenuTrigger = css96`
+var tableActionMenuTrigger = css97`
   position: absolute;
   transform: translate(calc(-100% - 1px), 1px);
 `;
-var TableActionMenuTrigger = forwardRef25((props, ref) => {
+var TableActionMenuTrigger = forwardRef27((props, ref) => {
   const { tableCellEl, positioningAnchorEl, ...rest } = props;
-  const [coordinates, setCoordinates] = useState16({ x: 0, y: 0 });
+  const [coordinates, setCoordinates] = useState17({ x: 0, y: 0 });
   useLayoutEffect(() => {
     const rect = tableCellEl.getBoundingClientRect();
     const parentRect = positioningAnchorEl.getBoundingClientRect();
@@ -13795,7 +14497,7 @@ var TableActionMenuTrigger = forwardRef25((props, ref) => {
     const relativeY = rect.top - parentRect.top + positioningAnchorEl.scrollTop;
     setCoordinates({ x: relativeX, y: relativeY });
   }, [tableCellEl, positioningAnchorEl]);
-  return /* @__PURE__ */ jsx128(
+  return /* @__PURE__ */ jsx131(
     IconButton,
     {
       ref,
@@ -13809,7 +14511,7 @@ var TableActionMenuTrigger = forwardRef25((props, ref) => {
       size: "xs",
       buttonType: "unimportant",
       ...rest,
-      children: /* @__PURE__ */ jsx128(Icon, { icon: "chevron-down", size: "1rem", iconColor: "currentColor" })
+      children: /* @__PURE__ */ jsx131(Icon, { icon: "chevron-down", size: "1rem", iconColor: "currentColor" })
     }
   );
 });
@@ -13821,16 +14523,16 @@ function TableActionMenu({
   positioningAnchorEl
 }) {
   const [editor] = useLexicalComposerContext5();
-  const [tableCellNode, updateTableCellNode] = useState16(_tableCellNode);
-  const [selectionCounts, updateSelectionCounts] = useState16({
+  const [tableCellNode, updateTableCellNode] = useState17(_tableCellNode);
+  const [selectionCounts, updateSelectionCounts] = useState17({
     columns: 1,
     rows: 1
   });
-  const [menuTriggerKey, setMenuTriggerKey] = useState16(0);
+  const [menuTriggerKey, setMenuTriggerKey] = useState17(0);
   const incrementMenuTriggerKey = () => {
     setMenuTriggerKey((key) => key += 1);
   };
-  useEffect19(() => {
+  useEffect20(() => {
     return editor.registerMutationListener(
       TableCellNode,
       (nodeMutations) => {
@@ -13844,7 +14546,7 @@ function TableActionMenu({
       { skipInitialization: true }
     );
   }, [editor, tableCellNode]);
-  useEffect19(() => {
+  useEffect20(() => {
     editor.getEditorState().read(() => {
       const selection = $getSelection3();
       if ($isTableSelection(selection)) {
@@ -13852,7 +14554,7 @@ function TableActionMenu({
       }
     });
   }, [editor]);
-  const clearTableSelection = useCallback9(() => {
+  const clearTableSelection = useCallback10(() => {
     editor.update(() => {
       if (tableCellNode.isAttached()) {
         const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
@@ -13873,7 +14575,7 @@ function TableActionMenu({
       rootNode.selectStart();
     });
   }, [editor, tableCellNode]);
-  const insertTableRowAtSelection = useCallback9(
+  const insertTableRowAtSelection = useCallback10(
     (shouldInsertAfter) => {
       editor.update(() => {
         $insertTableRow__EXPERIMENTAL(shouldInsertAfter);
@@ -13882,7 +14584,7 @@ function TableActionMenu({
     },
     [editor]
   );
-  const insertTableColumnAtSelection = useCallback9(
+  const insertTableColumnAtSelection = useCallback10(
     (shouldInsertAfter) => {
       editor.update(() => {
         for (let i = 0; i < selectionCounts.columns; i++) {
@@ -13893,26 +14595,26 @@ function TableActionMenu({
     },
     [editor, selectionCounts.columns]
   );
-  const deleteTableRowAtSelection = useCallback9(() => {
+  const deleteTableRowAtSelection = useCallback10(() => {
     editor.update(() => {
       $deleteTableRow__EXPERIMENTAL();
     });
     incrementMenuTriggerKey();
   }, [editor]);
-  const deleteTableAtSelection = useCallback9(() => {
+  const deleteTableAtSelection = useCallback10(() => {
     editor.update(() => {
       const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
       tableNode.remove();
       clearTableSelection();
     });
   }, [editor, tableCellNode, clearTableSelection]);
-  const deleteTableColumnAtSelection = useCallback9(() => {
+  const deleteTableColumnAtSelection = useCallback10(() => {
     editor.update(() => {
       $deleteTableColumn__EXPERIMENTAL();
     });
     incrementMenuTriggerKey();
   }, [editor]);
-  const toggleTableRowIsHeader = useCallback9(() => {
+  const toggleTableRowIsHeader = useCallback10(() => {
     editor.update(() => {
       const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
       const tableRowIndex = $getTableRowIndexFromTableCellNode(tableCellNode);
@@ -13933,7 +14635,7 @@ function TableActionMenu({
       clearTableSelection();
     });
   }, [editor, tableCellNode, clearTableSelection]);
-  const toggleTableColumnIsHeader = useCallback9(() => {
+  const toggleTableColumnIsHeader = useCallback10(() => {
     editor.update(() => {
       const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
       const tableColumnIndex = $getTableColumnIndexFromTableCellNode(tableCellNode);
@@ -13960,13 +14662,13 @@ function TableActionMenu({
       clearTableSelection();
     });
   }, [editor, tableCellNode, clearTableSelection]);
-  const menuItemCss = css96({
+  const menuItemCss = css97({
     fontSize: "var(--fs-sm)"
   });
-  return /* @__PURE__ */ jsxs85(
+  return /* @__PURE__ */ jsxs86(
     Menu,
     {
-      menuTrigger: /* @__PURE__ */ jsx128(
+      menuTrigger: /* @__PURE__ */ jsx131(
         TableActionMenuTrigger,
         {
           tableCellEl,
@@ -13977,7 +14679,7 @@ function TableActionMenu({
       portalElement: menuPortalEl,
       maxMenuHeight: "300px",
       children: [
-        /* @__PURE__ */ jsxs85(
+        /* @__PURE__ */ jsxs86(
           MenuItem,
           {
             onClick: () => {
@@ -13991,33 +14693,33 @@ function TableActionMenu({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs85(MenuItem, { onClick: () => insertTableRowAtSelection(true), css: menuItemCss, children: [
+        /* @__PURE__ */ jsxs86(MenuItem, { onClick: () => insertTableRowAtSelection(true), css: menuItemCss, children: [
           "Insert ",
           selectionCounts.rows === 1 ? "row" : `${selectionCounts.rows} rows`,
           " below"
         ] }),
-        /* @__PURE__ */ jsx128(MenuItemSeparator, {}),
-        /* @__PURE__ */ jsxs85(MenuItem, { onClick: () => insertTableColumnAtSelection(false), css: menuItemCss, children: [
+        /* @__PURE__ */ jsx131(MenuItemSeparator, {}),
+        /* @__PURE__ */ jsxs86(MenuItem, { onClick: () => insertTableColumnAtSelection(false), css: menuItemCss, children: [
           "Insert ",
           selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
           " left"
         ] }),
-        /* @__PURE__ */ jsxs85(MenuItem, { onClick: () => insertTableColumnAtSelection(true), css: menuItemCss, children: [
+        /* @__PURE__ */ jsxs86(MenuItem, { onClick: () => insertTableColumnAtSelection(true), css: menuItemCss, children: [
           "Insert ",
           selectionCounts.columns === 1 ? "column" : `${selectionCounts.columns} columns`,
           " right"
         ] }),
-        /* @__PURE__ */ jsx128(MenuItemSeparator, {}),
-        /* @__PURE__ */ jsx128(MenuItem, { onClick: () => deleteTableColumnAtSelection(), css: menuItemCss, children: "Delete column" }),
-        /* @__PURE__ */ jsx128(MenuItem, { onClick: () => deleteTableRowAtSelection(), css: menuItemCss, children: "Delete row" }),
-        /* @__PURE__ */ jsx128(MenuItem, { onClick: () => deleteTableAtSelection(), css: menuItemCss, children: "Delete table" }),
-        /* @__PURE__ */ jsx128(MenuItemSeparator, {}),
-        /* @__PURE__ */ jsxs85(MenuItem, { onClick: () => toggleTableRowIsHeader(), css: menuItemCss, children: [
+        /* @__PURE__ */ jsx131(MenuItemSeparator, {}),
+        /* @__PURE__ */ jsx131(MenuItem, { onClick: () => deleteTableColumnAtSelection(), css: menuItemCss, children: "Delete column" }),
+        /* @__PURE__ */ jsx131(MenuItem, { onClick: () => deleteTableRowAtSelection(), css: menuItemCss, children: "Delete row" }),
+        /* @__PURE__ */ jsx131(MenuItem, { onClick: () => deleteTableAtSelection(), css: menuItemCss, children: "Delete table" }),
+        /* @__PURE__ */ jsx131(MenuItemSeparator, {}),
+        /* @__PURE__ */ jsxs86(MenuItem, { onClick: () => toggleTableRowIsHeader(), css: menuItemCss, children: [
           (tableCellNode.__headerState & TableCellHeaderStates.ROW) === TableCellHeaderStates.ROW ? "Remove" : "Add",
           " ",
           "row header"
         ] }),
-        /* @__PURE__ */ jsxs85(MenuItem, { onClick: () => toggleTableColumnIsHeader(), css: menuItemCss, children: [
+        /* @__PURE__ */ jsxs86(MenuItem, { onClick: () => toggleTableColumnIsHeader(), css: menuItemCss, children: [
           (tableCellNode.__headerState & TableCellHeaderStates.COLUMN) === TableCellHeaderStates.COLUMN ? "Remove" : "Add",
           " ",
           "column header"
@@ -14031,10 +14733,10 @@ function TableCellActionMenuContainer({
   positioningAnchorEl
 }) {
   const [editor] = useLexicalComposerContext5();
-  const [tableCellNode, setTableMenuCellNode] = useState16(null);
-  const [tableCellNodeEl, _setTableMenuCellNodeEl] = useState16(null);
-  const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = useState16(null);
-  useEffect19(() => {
+  const [tableCellNode, setTableMenuCellNode] = useState17(null);
+  const [tableCellNodeEl, _setTableMenuCellNodeEl] = useState17(null);
+  const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = useState17(null);
+  useEffect20(() => {
     const newPortalEl = document.createElement("div");
     setTableMenuCellMenuPortalEl(newPortalEl);
     menuPortalEl.appendChild(newPortalEl);
@@ -14042,14 +14744,14 @@ function TableCellActionMenuContainer({
       newPortalEl.remove();
     };
   }, [menuPortalEl]);
-  const setTableMenuCellNodeElem = useCallback9((elem) => {
+  const setTableMenuCellNodeElem = useCallback10((elem) => {
     if (elem) {
       _setTableMenuCellNodeEl(elem);
     } else {
       _setTableMenuCellNodeEl(null);
     }
   }, []);
-  const $moveMenu = useCallback9(() => {
+  const $moveMenu = useCallback10(() => {
     const selection = $getSelection3();
     const nativeSelection = window.getSelection();
     const activeElement = document.activeElement;
@@ -14078,14 +14780,14 @@ function TableCellActionMenuContainer({
       setTableMenuCellNodeElem(null);
     }
   }, [editor, setTableMenuCellNodeElem]);
-  useEffect19(() => {
+  useEffect20(() => {
     return editor.registerUpdateListener(() => {
       editor.getEditorState().read(() => {
         $moveMenu();
       });
     });
   });
-  return tableCellNode != null && tableCellNodeEl != null && tableCellMenuPortalEl != null && /* @__PURE__ */ jsx128(
+  return tableCellNode != null && tableCellNodeEl != null && tableCellMenuPortalEl != null && /* @__PURE__ */ jsx131(
     TableActionMenu,
     {
       tableCellNode,
@@ -14101,11 +14803,11 @@ function TableActionMenuPlugin({
   menuPortalEl
 }) {
   const isEditable = useLexicalEditable();
-  return isEditable ? /* @__PURE__ */ jsx128(TableCellActionMenuContainer, { menuPortalEl, positioningAnchorEl }) : null;
+  return isEditable ? /* @__PURE__ */ jsx131(TableCellActionMenuContainer, { menuPortalEl, positioningAnchorEl }) : null;
 }
 // src/components/ParameterInputs/rich-text/TableCellResizerPlugin.tsx
-import { css as css97 } from "@emotion/react";
+import { css as css98 } from "@emotion/react";
 import { useLexicalComposerContext as useLexicalComposerContext6 } from "@lexical/react/LexicalComposerContext";
 import { useLexicalEditable as useLexicalEditable2 } from "@lexical/react/useLexicalEditable";
 import {
@@ -14117,12 +14819,12 @@ import {
 } from "@lexical/table";
 import { calculateZoomLevel } from "@lexical/utils";
 import { $getNearestNodeFromDOMNode } from "lexical";
-import { useCallback as useCallback10, useEffect as useEffect20, useMemo as useMemo6, useRef as useRef11, useState as useState17 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect21, useMemo as useMemo7, useRef as useRef12, useState as useState18 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { Fragment as Fragment16, jsx as jsx129, jsxs as jsxs86 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx132, jsxs as jsxs87 } from "@emotion/react/jsx-runtime";
 var MIN_ROW_HEIGHT = 33;
 var MIN_COLUMN_WIDTH = 50;
-var tableResizer = css97`
+var tableResizer = css98`
   position: absolute;
   z-index: var(--z-10);
 `;
@@ -14144,15 +14846,15 @@ var fixedGetDOMCellFromTarget = (node) => {
   return null;
 };
 function TableCellResizer({ editor, positioningAnchorEl }) {
-  const targetRef = useRef11(null);
-  const resizerRef = useRef11(null);
-  const tableRectRef = useRef11(null);
-  const mouseStartPosRef = useRef11(null);
-  const [mouseCurrentPos, updateMouseCurrentPos] = useState17(null);
-  const [activeCell, updateActiveCell] = useState17(null);
-  const [isMouseDown, updateIsMouseDown] = useState17(false);
-  const [draggingDirection, updateDraggingDirection] = useState17(null);
-  const resetState = useCallback10(() => {
+  const targetRef = useRef12(null);
+  const resizerRef = useRef12(null);
+  const tableRectRef = useRef12(null);
+  const mouseStartPosRef = useRef12(null);
+  const [mouseCurrentPos, updateMouseCurrentPos] = useState18(null);
+  const [activeCell, updateActiveCell] = useState18(null);
+  const [isMouseDown, updateIsMouseDown] = useState18(false);
+  const [draggingDirection, updateDraggingDirection] = useState18(null);
+  const resetState = useCallback11(() => {
     updateActiveCell(null);
     targetRef.current = null;
     updateDraggingDirection(null);
@@ -14162,7 +14864,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
   const isMouseDownOnEvent = (event) => {
     return (event.buttons & 1) === 1;
   };
-  useEffect20(() => {
+  useEffect21(() => {
     const onMouseMove = (event) => {
       setTimeout(() => {
         const target = event.target;
@@ -14229,7 +14931,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
     }
     return false;
   };
-  const updateRowHeight = useCallback10(
+  const updateRowHeight = useCallback11(
     (heightChange) => {
       if (!activeCell) {
         throw new Error("TableCellResizer: Expected active cell.");
@@ -14291,7 +14993,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
       }
     }
   };
-  const updateColumnWidth = useCallback10(
+  const updateColumnWidth = useCallback11(
     (widthChange) => {
       if (!activeCell) {
         throw new Error("TableCellResizer: Expected active cell.");
@@ -14325,7 +15027,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
     },
     [activeCell, editor]
   );
-  const mouseUpHandler = useCallback10(
+  const mouseUpHandler = useCallback11(
     (direction) => {
       const handler = (event) => {
         event.preventDefault();
@@ -14354,7 +15056,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
     },
     [activeCell, resetState, updateColumnWidth, updateRowHeight]
   );
-  const toggleResize = useCallback10(
+  const toggleResize = useCallback11(
     (direction) => (event) => {
       event.preventDefault();
       event.stopPropagation();
@@ -14371,7 +15073,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
     },
     [activeCell, mouseUpHandler]
   );
-  const getResizers = useCallback10(() => {
+  const getResizers = useCallback11(() => {
     if (activeCell) {
       const { height, width, top, left } = activeCell.elem.getBoundingClientRect();
       const parentRect = positioningAnchorEl.getBoundingClientRect();
@@ -14420,8 +15122,8 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
     };
   }, [activeCell, draggingDirection, mouseCurrentPos, positioningAnchorEl]);
   const resizerStyles = getResizers();
-  return /* @__PURE__ */ jsx129("div", { ref: resizerRef, children: activeCell != null && !isMouseDown && /* @__PURE__ */ jsxs86(Fragment16, { children: [
-    /* @__PURE__ */ jsx129(
+  return /* @__PURE__ */ jsx132("div", { ref: resizerRef, children: activeCell != null && !isMouseDown && /* @__PURE__ */ jsxs87(Fragment16, { children: [
+    /* @__PURE__ */ jsx132(
       "div",
       {
         css: tableResizer,
@@ -14429,7 +15131,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
         onMouseDown: toggleResize("right")
       }
     ),
-    /* @__PURE__ */ jsx129(
+    /* @__PURE__ */ jsx132(
       "div",
       {
         css: tableResizer,
@@ -14442,9 +15144,9 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
 function TableCellResizerPlugin({ positioningAnchorEl }) {
   const [editor] = useLexicalComposerContext6();
   const isEditable = useLexicalEditable2();
-  return useMemo6(
+  return useMemo7(
     () => isEditable ? createPortal3(
-      /* @__PURE__ */ jsx129(TableCellResizer, { editor, positioningAnchorEl }),
+      /* @__PURE__ */ jsx132(TableCellResizer, { editor, positioningAnchorEl }),
       positioningAnchorEl
     ) : null,
     [editor, isEditable, positioningAnchorEl]
@@ -14461,11 +15163,11 @@ import {
   COMMAND_PRIORITY_NORMAL as COMMAND_PRIORITY_NORMAL2,
   SELECTION_CHANGE_COMMAND as SELECTION_CHANGE_COMMAND2
 } from "lexical";
-import { useEffect as useEffect21, useState as useState18 } from "react";
+import { useEffect as useEffect22, useState as useState19 } from "react";
 var TableSelectionPlugin = () => {
   const [editor] = useLexicalComposerContext7();
-  const [closestTableCellNode, setClosestTableCellNode] = useState18(null);
-  useEffect21(() => {
+  const [closestTableCellNode, setClosestTableCellNode] = useState19(null);
+  useEffect22(() => {
     return editor.registerCommand(
       SELECTION_CHANGE_COMMAND2,
       () => {
@@ -14487,7 +15189,7 @@ var TableSelectionPlugin = () => {
       COMMAND_PRIORITY_NORMAL2
     );
   }, [editor]);
-  useEffect21(() => {
+  useEffect22(() => {
     const onControlA = (event) => {
       if (event.key === "a" && (event.ctrlKey || event.metaKey)) {
         if (!closestTableCellNode) {
@@ -14510,7 +15212,7 @@ var TableSelectionPlugin = () => {
 var TableSelectionPlugin_default = TableSelectionPlugin;
 // src/components/ParameterInputs/rich-text/toolbar/RichTextToolbar.tsx
-import { css as css98 } from "@emotion/react";
+import { css as css99 } from "@emotion/react";
 import { $createCodeNode } from "@lexical/code";
 import {
   $isListNode as $isListNode2,
@@ -14534,7 +15236,7 @@ import {
   FORMAT_TEXT_COMMAND,
   SELECTION_CHANGE_COMMAND as SELECTION_CHANGE_COMMAND3
 } from "lexical";
-import { useCallback as useCallback11, useEffect as useEffect22 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect23 } from "react";
 // src/components/ParameterInputs/rich-text/toolbar/constants.ts
 var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
@@ -14550,29 +15252,29 @@ var HEADING_ELEMENTS = ["h1", "h2", "h3", "h4", "h5", "h6"];
 var TEXTUAL_ELEMENTS = HEADING_ELEMENTS;
 // src/components/ParameterInputs/rich-text/toolbar/useRichTextToolbarState.ts
-import { useMemo as useMemo7, useState as useState19 } from "react";
+import { useMemo as useMemo8, useState as useState20 } from "react";
 var useRichTextToolbarState = ({ config }) => {
   var _a;
-  const enabledBuiltInFormats = useMemo7(() => {
+  const enabledBuiltInFormats = useMemo8(() => {
     return richTextBuiltInFormats.filter((format) => {
       var _a2, _b;
       return (_b = (_a2 = config == null ? void 0 : config.formatting) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(format.type);
     });
   }, [config]);
-  const enabledBuiltInElements = useMemo7(() => {
+  const enabledBuiltInElements = useMemo8(() => {
     return richTextBuiltInElements.filter((element) => {
       var _a2, _b;
       return (_b = (_a2 = config == null ? void 0 : config.elements) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(element.type);
     });
   }, [config]);
-  const enabledBuiltInFormatsWithIcon = useMemo7(() => {
+  const enabledBuiltInFormatsWithIcon = useMemo8(() => {
     return enabledBuiltInFormats.filter((format) => FORMATS_WITH_ICON.has(format.type));
   }, [enabledBuiltInFormats]);
   const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
     (format) => !FORMATS_WITH_ICON.has(format.type)
   );
-  const [activeFormats, setActiveFormats] = useState19([]);
-  const visibleFormatsWithIcon = useMemo7(() => {
+  const [activeFormats, setActiveFormats] = useState20([]);
+  const visibleFormatsWithIcon = useMemo8(() => {
     const visibleFormats = /* @__PURE__ */ new Set();
     activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
       visibleFormats.add(type);
@@ -14582,7 +15284,7 @@ var useRichTextToolbarState = ({ config }) => {
     });
     return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
   }, [activeFormats, enabledBuiltInFormatsWithIcon]);
-  const visibleFormatsWithoutIcon = useMemo7(() => {
+  const visibleFormatsWithoutIcon = useMemo8(() => {
     const visibleFormats = /* @__PURE__ */ new Set();
     activeFormats.filter((type) => !FORMATS_WITH_ICON.has(type)).forEach((type) => {
       visibleFormats.add(type);
@@ -14592,11 +15294,11 @@ var useRichTextToolbarState = ({ config }) => {
     });
     return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
   }, [activeFormats, enabledBuiltInFormatsWithoutIcon]);
-  const [activeElement, setActiveElement] = useState19("paragraph");
+  const [activeElement, setActiveElement] = useState20("paragraph");
   const enabledTextualElements = enabledBuiltInElements.filter(
     (element) => TEXTUAL_ELEMENTS.includes(element.type)
   );
-  const visibleTextualElements = useMemo7(() => {
+  const visibleTextualElements = useMemo8(() => {
     if (!TEXTUAL_ELEMENTS.includes(activeElement)) {
       return enabledTextualElements;
     }
@@ -14607,30 +15309,30 @@ var useRichTextToolbarState = ({ config }) => {
       }
     );
   }, [activeElement, (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn, enabledTextualElements]);
-  const [isLink, setIsLink] = useState19(false);
-  const linkElementVisible = useMemo7(() => {
+  const [isLink, setIsLink] = useState20(false);
+  const linkElementVisible = useMemo8(() => {
     return enabledBuiltInElements.some((element) => element.type === "link") || isLink;
   }, [isLink, enabledBuiltInElements]);
-  const visibleLists = useMemo7(() => {
+  const visibleLists = useMemo8(() => {
     return new Set(
       ["orderedList", "unorderedList"].filter(
         (type) => enabledBuiltInElements.some((element) => element.type === type) || activeElement === type
       )
     );
   }, [activeElement, enabledBuiltInElements]);
-  const quoteElementVisible = useMemo7(() => {
+  const quoteElementVisible = useMemo8(() => {
     return enabledBuiltInElements.some((element) => element.type === "quote") || activeElement === "quote";
   }, [activeElement, enabledBuiltInElements]);
-  const codeElementVisible = useMemo7(() => {
+  const codeElementVisible = useMemo8(() => {
     return enabledBuiltInElements.some((element) => element.type === "code") || activeElement === "code";
   }, [activeElement, enabledBuiltInElements]);
-  const tableElementVisible = useMemo7(() => {
+  const tableElementVisible = useMemo8(() => {
     return enabledBuiltInElements.some((element) => element.type === "table") || activeElement === "table";
   }, [activeElement, enabledBuiltInElements]);
-  const assetElementVisible = useMemo7(() => {
+  const assetElementVisible = useMemo8(() => {
     return enabledBuiltInElements.some((element) => element.type === "asset") || activeElement === "asset";
   }, [activeElement, enabledBuiltInElements]);
-  const visibleElementsWithIcons = useMemo7(() => {
+  const visibleElementsWithIcons = useMemo8(() => {
     const visibleElements = /* @__PURE__ */ new Set();
     if (linkElementVisible) {
       visibleElements.add("link");
@@ -14642,7 +15344,7 @@ var useRichTextToolbarState = ({ config }) => {
     }
     return visibleElements;
   }, [linkElementVisible, visibleLists]);
-  const visibleInsertElementsWithIcons = useMemo7(() => {
+  const visibleInsertElementsWithIcons = useMemo8(() => {
     const visibleElements = /* @__PURE__ */ new Set();
     if (quoteElementVisible) {
       visibleElements.add("quote");
@@ -14680,8 +15382,8 @@ var useRichTextToolbarState = ({ config }) => {
 };
 // src/components/ParameterInputs/rich-text/toolbar/RichTextToolbar.tsx
-import { Fragment as Fragment17, jsx as jsx130, jsxs as jsxs87 } from "@emotion/react/jsx-runtime";
-var toolbar = css98`
+import { Fragment as Fragment17, jsx as jsx133, jsxs as jsxs88 } from "@emotion/react/jsx-runtime";
+var toolbar = css99`
   ${scrollbarStyles}
   background: var(--gray-50);
   border-radius: var(--rounded-base);
@@ -14695,7 +15397,7 @@ var toolbar = css98`
   top: calc(var(--spacing-sm) * -2);
   z-index: 10;
 `;
-var toolbarGroup = css98`
+var toolbarGroup = css99`
   display: flex;
   flex-shrink: 0;
   gap: var(--spacing-xs);
@@ -14712,7 +15414,7 @@ var toolbarGroup = css98`
     width: 1px;
   }
 `;
-var richTextToolbarButton = css98`
+var richTextToolbarButton = css99`
   align-items: center;
   appearance: none;
   border: 0;
@@ -14726,21 +15428,21 @@ var richTextToolbarButton = css98`
   min-width: 32px;
   padding: 0 var(--spacing-sm);
 `;
-var richTextToolbarButtonActive = css98`
+var richTextToolbarButtonActive = css99`
   background: var(--gray-200);
 `;
-var textStyleButton = css98`
+var textStyleButton = css99`
   justify-content: space-between;
   min-width: 7rem;
 `;
-var toolbarIcon = css98`
+var toolbarIcon = css99`
   color: inherit;
 `;
-var toolbarChevron = css98`
+var toolbarChevron = css99`
   margin-left: var(--spacing-xs);
 `;
 var RichTextToolbarIcon = ({ icon }) => {
-  return /* @__PURE__ */ jsx130(Icon, { icon, css: toolbarIcon, size: "1rem" });
+  return /* @__PURE__ */ jsx133(Icon, { icon, css: toolbarIcon, size: "1rem" });
 };
 var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset }) => {
   const [editor] = useLexicalComposerContext8();
@@ -14796,7 +15498,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
       });
     });
   };
-  const updateToolbar = useCallback11(() => {
+  const updateToolbar = useCallback12(() => {
     const selection = $getSelection5();
     if (!$isRangeSelection5(selection)) {
       return;
@@ -14835,7 +15537,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
       setIsLink(false);
     }
   }, [editor, setActiveElement, setActiveFormats, setIsLink]);
-  useEffect22(() => {
+  useEffect23(() => {
     return editor.registerCommand(
       SELECTION_CHANGE_COMMAND3,
       (_payload) => {
@@ -14845,7 +15547,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
       COMMAND_PRIORITY_CRITICAL2
     );
   }, [editor, updateToolbar]);
-  useEffect22(() => {
+  useEffect23(() => {
     return editor.registerUpdateListener(({ editorState }) => {
       requestAnimationFrame(() => {
         editorState.read(() => {
@@ -14854,14 +15556,14 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
       });
     });
   }, [editor, updateToolbar]);
-  return /* @__PURE__ */ jsxs87("div", { css: toolbar, "data-testid": "rich-text-toolbar", children: [
-    /* @__PURE__ */ jsxs87(
+  return /* @__PURE__ */ jsxs88("div", { css: toolbar, "data-testid": "rich-text-toolbar", children: [
+    /* @__PURE__ */ jsxs88(
       Menu,
       {
-        menuTrigger: /* @__PURE__ */ jsxs87("button", { css: [richTextToolbarButton, textStyleButton], title: "Text styles", type: "button", children: [
+        menuTrigger: /* @__PURE__ */ jsxs88("button", { css: [richTextToolbarButton, textStyleButton], title: "Text styles", type: "button", children: [
           visibleTextualElements.some((element) => element.type === activeElement) ? getLabelForElement(activeElement) : getLabelForElement("paragraph"),
           " ",
-          /* @__PURE__ */ jsx130(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
+          /* @__PURE__ */ jsx133(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
         ] }),
         placement: "bottom-start",
         children: [
@@ -14871,7 +15573,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
               type: "paragraph"
             },
             ...visibleTextualElements
-          ].map((element) => /* @__PURE__ */ jsx130(
+          ].map((element) => /* @__PURE__ */ jsx133(
             MenuItem,
             {
               "data-testid": "menu-item",
@@ -14882,12 +15584,12 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
             },
             element.type
           )),
-          visibleTextualElements.length === 0 ? /* @__PURE__ */ jsx130(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
+          visibleTextualElements.length === 0 ? /* @__PURE__ */ jsx133(MenuItem, { disabled: true, children: "Alternative text styles are not available" }) : null
         ]
       }
     ),
-    visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsxs87("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-formatting", children: [
-      visibleFormatsWithIcon.map((format) => /* @__PURE__ */ jsx130(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx130(
+    visibleFormatsWithIcon.length > 0 || visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsxs88("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-formatting", children: [
+      visibleFormatsWithIcon.map((format) => /* @__PURE__ */ jsx133(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx133(
         "button",
         {
           "data-testid": `formatting-button-${format.type}`,
@@ -14899,15 +15601,15 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
             richTextToolbarButton,
             activeFormats.includes(format.type) ? richTextToolbarButtonActive : null
           ],
-          children: /* @__PURE__ */ jsx130(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
+          children: /* @__PURE__ */ jsx133(RichTextToolbarIcon, { icon: FORMATS_WITH_ICON.get(format.type) })
         }
       ) }, format.type)),
-      visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx130(
+      visibleFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx133(
         Menu,
         {
-          menuTrigger: /* @__PURE__ */ jsx130("button", { css: richTextToolbarButton, title: "Alternative text styles", type: "button", children: /* @__PURE__ */ jsx130(Icon, { icon: "more-alt", css: toolbarIcon }) }),
+          menuTrigger: /* @__PURE__ */ jsx133("button", { css: richTextToolbarButton, title: "Alternative text styles", type: "button", children: /* @__PURE__ */ jsx133(Icon, { icon: "more-alt", css: toolbarIcon }) }),
           placement: "bottom-start",
-          children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx130(
+          children: visibleFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx133(
             MenuItem,
             {
               onClick: () => {
@@ -14920,8 +15622,8 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
         }
       ) : null
     ] }) : null,
-    visibleElementsWithIcons.size > 0 || customControls ? /* @__PURE__ */ jsxs87("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-elements", children: [
-      linkElementVisible ? /* @__PURE__ */ jsx130(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx130(
+    visibleElementsWithIcons.size > 0 || customControls ? /* @__PURE__ */ jsxs88("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-elements", children: [
+      linkElementVisible ? /* @__PURE__ */ jsx133(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx133(
         "button",
         {
           "data-testid": "element-link",
@@ -14934,11 +15636,11 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
             }
           },
           css: [richTextToolbarButton, isLink ? richTextToolbarButtonActive : null],
-          children: /* @__PURE__ */ jsx130(RichTextToolbarIcon, { icon: "link" })
+          children: /* @__PURE__ */ jsx133(RichTextToolbarIcon, { icon: "link" })
         }
       ) }) : null,
-      visibleLists.size > 0 ? /* @__PURE__ */ jsxs87(Fragment17, { children: [
-        visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx130(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx130(
+      visibleLists.size > 0 ? /* @__PURE__ */ jsxs88(Fragment17, { children: [
+        visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx133(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx133(
           "button",
           {
             "data-testid": "element-unordered-list",
@@ -14954,10 +15656,10 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
               richTextToolbarButton,
               activeElement === "unorderedList" ? richTextToolbarButtonActive : null
             ],
-            children: /* @__PURE__ */ jsx130(RichTextToolbarIcon, { icon: "layout-list" })
+            children: /* @__PURE__ */ jsx133(RichTextToolbarIcon, { icon: "layout-list" })
           }
         ) }) : null,
-        visibleLists.has("orderedList") ? /* @__PURE__ */ jsx130(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ jsx130(
+        visibleLists.has("orderedList") ? /* @__PURE__ */ jsx133(Tooltip, { title: "Ordered List", placement: "top", children: /* @__PURE__ */ jsx133(
           "button",
           {
             "data-testid": "element-ordered-list",
@@ -14973,58 +15675,58 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
               richTextToolbarButton,
               activeElement === "orderedList" ? richTextToolbarButtonActive : null
             ],
-            children: /* @__PURE__ */ jsx130(RichTextToolbarIcon, { icon: "layout-list-numbered" })
+            children: /* @__PURE__ */ jsx133(RichTextToolbarIcon, { icon: "layout-list-numbered" })
           }
         ) }) : null
       ] }) : null,
       customControls ? customControls : null
     ] }) : null,
-    visibleInsertElementsWithIcons.size > 0 ? /* @__PURE__ */ jsx130("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-insert", children: /* @__PURE__ */ jsxs87(
+    visibleInsertElementsWithIcons.size > 0 ? /* @__PURE__ */ jsx133("div", { css: toolbarGroup, "data-testid": "rich-text-toolbar-insert", children: /* @__PURE__ */ jsxs88(
       Menu,
       {
-        menuTrigger: /* @__PURE__ */ jsxs87("button", { css: richTextToolbarButton, title: "Insert block element", type: "button", children: [
+        menuTrigger: /* @__PURE__ */ jsxs88("button", { css: richTextToolbarButton, title: "Insert block element", type: "button", children: [
           "Insert",
-          /* @__PURE__ */ jsx130(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
+          /* @__PURE__ */ jsx133(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
         ] }),
         placement: "bottom-start",
         children: [
-          quoteElementVisible ? /* @__PURE__ */ jsx130(
+          quoteElementVisible ? /* @__PURE__ */ jsx133(
             MenuItem,
             {
               onClick: () => {
                 onSelectElement("quote");
               },
-              icon: /* @__PURE__ */ jsx130(Icon, { icon: "quote", iconColor: "currentColor" }),
+              icon: /* @__PURE__ */ jsx133(Icon, { icon: "quote", iconColor: "currentColor" }),
               children: "Quote"
             }
           ) : null,
-          codeElementVisible ? /* @__PURE__ */ jsx130(
+          codeElementVisible ? /* @__PURE__ */ jsx133(
             MenuItem,
             {
               onClick: () => {
                 onSelectElement("code");
               },
-              icon: /* @__PURE__ */ jsx130(Icon, { icon: "code-slash", iconColor: "currentColor" }),
+              icon: /* @__PURE__ */ jsx133(Icon, { icon: "code-slash", iconColor: "currentColor" }),
               children: "Code"
             }
           ) : null,
-          tableElementVisible && onInsertTable !== void 0 ? /* @__PURE__ */ jsx130(
+          tableElementVisible && onInsertTable !== void 0 ? /* @__PURE__ */ jsx133(
             MenuItem,
             {
               onClick: () => {
                 onSelectElement("table");
               },
-              icon: /* @__PURE__ */ jsx130(Icon, { icon: "view-grid", iconColor: "currentColor" }),
+              icon: /* @__PURE__ */ jsx133(Icon, { icon: "view-grid", iconColor: "currentColor" }),
               children: "Table"
             }
           ) : null,
-          assetElementVisible && onInsertAsset !== void 0 ? /* @__PURE__ */ jsx130(
+          assetElementVisible && onInsertAsset !== void 0 ? /* @__PURE__ */ jsx133(
             MenuItem,
             {
               onClick: () => {
                 onSelectElement("asset");
               },
-              icon: /* @__PURE__ */ jsx130(Icon, { icon: "image", iconColor: "currentColor" }),
+              icon: /* @__PURE__ */ jsx133(Icon, { icon: "image", iconColor: "currentColor" }),
               children: "Asset"
             }
           ) : null
@@ -15036,9 +15738,9 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
 var RichTextToolbar_default = RichTextToolbar;
 // src/components/ParameterInputs/ParameterRichText.tsx
-import { Fragment as Fragment18, jsx as jsx131, jsxs as jsxs88 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx134, jsxs as jsxs89 } from "@emotion/react/jsx-runtime";
 var ParameterRichText = ({
-  label,
+  label: label2,
   labelLeadingIcon,
   hiddenLabel,
   id,
@@ -15050,11 +15752,11 @@ var ParameterRichText = ({
   children,
   ...innerProps
 }) => {
-  return /* @__PURE__ */ jsxs88(
+  return /* @__PURE__ */ jsxs89(
     ParameterShell,
     {
       "data-testid": "parameter-richtext",
-      label,
+      label: label2,
       hiddenLabel,
       labelLeadingIcon,
       id,
@@ -15064,13 +15766,13 @@ var ParameterRichText = ({
       captionTestId,
       menuItems,
       children: [
-        /* @__PURE__ */ jsx131(ParameterRichTextInner, { ...innerProps, children }),
-        menuItems ? /* @__PURE__ */ jsx131(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx131(Fragment18, { children: menuItems }) }) : null
+        /* @__PURE__ */ jsx134(ParameterRichTextInner, { ...innerProps, children }),
+        menuItems ? /* @__PURE__ */ jsx134(ParameterMenuButton, { label: `${label2} menu`, children: /* @__PURE__ */ jsx134(Fragment18, { children: menuItems }) }) : null
       ]
     }
   );
 };
-var editorContainerWrapper = css99`
+var editorContainerWrapper = css100`
   position: relative;
   &::before {
@@ -15086,12 +15788,12 @@ var editorContainerWrapper = css99`
     z-index: 2;
   }
 `;
-var editorWrapper = css99`
+var editorWrapper = css100`
   display: flex;
   flex-flow: column;
   flex-grow: 1;
 `;
-var editorContainer = css99`
+var editorContainer = css100`
   ${scrollbarStyles}
   background: var(--white);
   border-radius: var(--rounded-sm);
@@ -15123,7 +15825,7 @@ var editorContainer = css99`
     max-height: unset;
   }
 `;
-var editorContainerOverflowWrapper = css99`
+var editorContainerOverflowWrapper = css100`
   overflow: hidden;
   pointer-events: none;
@@ -15131,7 +15833,7 @@ var editorContainerOverflowWrapper = css99`
     pointer-events: auto;
   }
 `;
-var editorPlaceholder = css99`
+var editorPlaceholder = css100`
   color: var(--gray-500);
   font-style: italic;
   /* 1px is added to make sure caret is clearly visible when field is focused
@@ -15142,7 +15844,7 @@ var editorPlaceholder = css99`
   top: calc(1rem + var(--spacing-sm));
   user-select: none;
 `;
-var editorInput = css99`
+var editorInput = css100`
   min-height: 100%;
   flex-grow: 1;
@@ -15215,8 +15917,8 @@ var ParameterRichTextInner = ({
     },
     editable: !richTextProps.readOnly
   };
-  return /* @__PURE__ */ jsxs88(Fragment18, { children: [
-    /* @__PURE__ */ jsx131("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx131(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx131(RichText, { ...richTextProps, children }) }) }),
+  return /* @__PURE__ */ jsxs89(Fragment18, { children: [
+    /* @__PURE__ */ jsx134("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx134(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx134(RichText, { ...richTextProps, children }) }) }),
     editorFooter ? editorFooter : null
   ] });
 };
@@ -15246,12 +15948,12 @@ var RichText = ({
   placeholder
 }) => {
   const [editor] = useLexicalComposerContext9();
-  useEffect23(() => {
+  useEffect24(() => {
     if (onRichTextInit) {
       onRichTextInit(editor);
     }
   }, [editor, onRichTextInit]);
-  useEffect23(() => {
+  useEffect24(() => {
     const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState, tags }) => {
       requestAnimationFrame(() => {
         const previousEditorState = prevEditorState.toJSON();
@@ -15268,23 +15970,23 @@ var RichText = ({
       removeUpdateListener();
     };
   }, [editor, onChange]);
-  useEffect23(() => {
+  useEffect24(() => {
     editor.setEditable(!readOnly);
   }, [editor, readOnly]);
-  const [editorContainerRef, setEditorContainerRef] = useState20(null);
+  const [editorContainerRef, setEditorContainerRef] = useState21(null);
   const onEditorContainerRef = (_editorContainerRef) => {
     if (_editorContainerRef !== null) {
       setEditorContainerRef(_editorContainerRef);
     }
   };
-  const [portalContainerRef, setPortalContainerRef] = useState20(null);
+  const [portalContainerRef, setPortalContainerRef] = useState21(null);
   const onPortalContainerRef = (_portalContainerRef) => {
     if (_portalContainerRef !== null) {
       setPortalContainerRef(_portalContainerRef);
     }
   };
-  return /* @__PURE__ */ jsxs88(Fragment18, { children: [
-    readOnly || minimalInteractivity ? null : /* @__PURE__ */ jsx131(
+  return /* @__PURE__ */ jsxs89(Fragment18, { children: [
+    readOnly || minimalInteractivity ? null : /* @__PURE__ */ jsx134(
       RichTextToolbar_default,
       {
         config,
@@ -15293,8 +15995,8 @@ var RichText = ({
         onInsertAsset
       }
     ),
-    /* @__PURE__ */ jsxs88("div", { css: editorContainerWrapper, ref: onPortalContainerRef, children: [
-      /* @__PURE__ */ jsxs88(
+    /* @__PURE__ */ jsxs89("div", { css: editorContainerWrapper, ref: onPortalContainerRef, children: [
+      /* @__PURE__ */ jsxs89(
         "div",
         {
           css: editorContainer,
@@ -15302,33 +16004,33 @@ var RichText = ({
           ref: onEditorContainerRef,
           "data-testid": "value-container",
           children: [
-            /* @__PURE__ */ jsx131(
+            /* @__PURE__ */ jsx134(
               RichTextPlugin,
               {
-                contentEditable: /* @__PURE__ */ jsx131(ContentEditable, { css: editorInput, className: editorInputClassName }),
-                placeholder: /* @__PURE__ */ jsx131("div", { css: editorPlaceholder, "data-placeholder": true, children: placeholder != null ? placeholder : readOnly ? "empty" : "start editing..." }),
+                contentEditable: /* @__PURE__ */ jsx134(ContentEditable, { css: editorInput, className: editorInputClassName }),
+                placeholder: /* @__PURE__ */ jsx134("div", { css: editorPlaceholder, "data-placeholder": true, children: placeholder != null ? placeholder : readOnly ? "empty" : "start editing..." }),
                 ErrorBoundary: LexicalErrorBoundary
               }
             ),
-            /* @__PURE__ */ jsx131(ListPlugin, {}),
-            /* @__PURE__ */ jsx131(ListIndentPlugin, { maxDepth: 4 }),
-            /* @__PURE__ */ jsx131(TablePlugin, { hasCellMerge: false, hasCellBackgroundColor: false }),
-            /* @__PURE__ */ jsx131("div", { css: editorContainerOverflowWrapper, "data-testid": "table-action-menu-plugin", children: editorContainerRef && portalContainerRef && !minimalInteractivity ? /* @__PURE__ */ jsx131(
+            /* @__PURE__ */ jsx134(ListPlugin, {}),
+            /* @__PURE__ */ jsx134(ListIndentPlugin, { maxDepth: 4 }),
+            /* @__PURE__ */ jsx134(TablePlugin, { hasCellMerge: false, hasCellBackgroundColor: false }),
+            /* @__PURE__ */ jsx134("div", { css: editorContainerOverflowWrapper, "data-testid": "table-action-menu-plugin", children: editorContainerRef && portalContainerRef && !minimalInteractivity ? /* @__PURE__ */ jsx134(
               TableActionMenuPlugin,
               {
                 positioningAnchorEl: editorContainerRef,
                 menuPortalEl: portalContainerRef
               }
             ) : null }),
-            editorContainerRef && !minimalInteractivity ? /* @__PURE__ */ jsx131(TableCellResizerPlugin, { positioningAnchorEl: editorContainerRef }) : null,
-            readOnly ? null : /* @__PURE__ */ jsx131(HistoryPlugin, {}),
-            /* @__PURE__ */ jsx131(DisableStylesPlugin, {}),
-            /* @__PURE__ */ jsx131(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS })
+            editorContainerRef && !minimalInteractivity ? /* @__PURE__ */ jsx134(TableCellResizerPlugin, { positioningAnchorEl: editorContainerRef }) : null,
+            readOnly ? null : /* @__PURE__ */ jsx134(HistoryPlugin, {}),
+            /* @__PURE__ */ jsx134(DisableStylesPlugin, {}),
+            /* @__PURE__ */ jsx134(MarkdownShortcutPlugin, { transformers: MARKDOWN_TRANSFORMERS })
           ]
         }
       ),
-      /* @__PURE__ */ jsx131(Fragment18, { children }),
-      editorContainerRef ? /* @__PURE__ */ jsx131(
+      /* @__PURE__ */ jsx134(Fragment18, { children }),
+      editorContainerRef ? /* @__PURE__ */ jsx134(
         LinkNodePlugin,
         {
           onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve(),
@@ -15339,37 +16041,37 @@ var RichText = ({
           positioningAnchorEl: editorContainerRef
         }
       ) : null,
-      /* @__PURE__ */ jsx131(TableSelectionPlugin_default, {}),
-      /* @__PURE__ */ jsx131(ImprovedAssetSelectionPlugin_default, {})
+      /* @__PURE__ */ jsx134(TableSelectionPlugin_default, {}),
+      /* @__PURE__ */ jsx134(ImprovedAssetSelectionPlugin_default, {})
     ] })
   ] });
 };
 // src/components/ParameterInputs/ParameterSelect.tsx
-import { forwardRef as forwardRef26 } from "react";
-import { jsx as jsx132, jsxs as jsxs89 } from "@emotion/react/jsx-runtime";
-var ParameterSelect = forwardRef26(
+import { forwardRef as forwardRef28 } from "react";
+import { jsx as jsx135, jsxs as jsxs90 } from "@emotion/react/jsx-runtime";
+var ParameterSelect = forwardRef28(
   ({ defaultOption, options, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
-    return /* @__PURE__ */ jsx132(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx132(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
+    return /* @__PURE__ */ jsx135(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx135(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
   }
 );
-var ParameterSelectInner = forwardRef26(
+var ParameterSelectInner = forwardRef28(
   ({ defaultOption, options, ...props }, ref) => {
-    const { id, label, hiddenLabel } = useParameterShell();
-    return /* @__PURE__ */ jsxs89(
+    const { id, label: label2, hiddenLabel } = useParameterShell();
+    return /* @__PURE__ */ jsxs90(
       "select",
       {
         css: [input3, selectInput],
         id,
-        "aria-label": hiddenLabel && typeof label === "string" ? label : void 0,
+        "aria-label": hiddenLabel && typeof label2 === "string" ? label2 : void 0,
         ref,
         ...props,
         children: [
-          defaultOption ? /* @__PURE__ */ jsx132("option", { value: "", children: defaultOption }) : null,
+          defaultOption ? /* @__PURE__ */ jsx135("option", { value: "", children: defaultOption }) : null,
           options.map((option) => {
             var _a;
-            return /* @__PURE__ */ jsx132("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
+            return /* @__PURE__ */ jsx135("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
           })
         ]
       }
@@ -15377,48 +16079,104 @@ var ParameterSelectInner = forwardRef26(
   }
 );
+// src/components/ParameterInputs/ParameterSelectSlider.tsx
+import { forwardRef as forwardRef29, useCallback as useCallback13, useMemo as useMemo9 } from "react";
+import { jsx as jsx136 } from "@emotion/react/jsx-runtime";
+var ParameterSelectSlider = forwardRef29(
+  (props, ref) => {
+    const { shellProps, innerProps } = extractParameterProps(props);
+    return /* @__PURE__ */ jsx136(ParameterShell, { "data-testid": "parameter-select-slider", ...shellProps, children: /* @__PURE__ */ jsx136(ParameterSelectSliderInner, { ref, ...innerProps }) });
+  }
+);
+var ParameterSelectSliderInner = forwardRef29(({ options, value, onChange, ...props }, ref) => {
+  const { id, label: label2, hiddenLabel } = useParameterShell();
+  const numericValue = useMemo9(() => {
+    const index = options.findIndex((option) => option.value === value);
+    return index >= 0 ? index : 0;
+  }, [options, value]);
+  const handleChange = useCallback13(
+    (newIndex) => {
+      const selectedOption = options[newIndex];
+      if (selectedOption) {
+        onChange(selectedOption.value);
+      }
+    },
+    [options, onChange]
+  );
+  return /* @__PURE__ */ jsx136(
+    Slider,
+    {
+      ref,
+      id,
+      "aria-label": hiddenLabel && typeof label2 === "string" ? label2 : void 0,
+      value: numericValue,
+      onChange: handleChange,
+      options,
+      showNumberInput: false,
+      ...props
+    }
+  );
+});
+ParameterSelectSlider.displayName = "ParameterSelectSlider";
+ParameterSelectSliderInner.displayName = "ParameterSelectSliderInner";
 // src/components/ParameterInputs/ParameterTextarea.tsx
-import { forwardRef as forwardRef27 } from "react";
-import { jsx as jsx133 } from "@emotion/react/jsx-runtime";
-var ParameterTextarea = forwardRef27((props, ref) => {
+import { forwardRef as forwardRef30 } from "react";
+import { jsx as jsx137 } from "@emotion/react/jsx-runtime";
+var ParameterTextarea = forwardRef30((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ jsx133(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx133(ParameterTextareaInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ jsx137(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx137(ParameterTextareaInner, { ref, ...innerProps }) });
 });
-var ParameterTextareaInner = forwardRef27(({ ...props }, ref) => {
-  const { id, label, hiddenLabel } = useParameterShell();
-  return /* @__PURE__ */ jsx133(
+var ParameterTextareaInner = forwardRef30(({ ...props }, ref) => {
+  const { id, label: label2, hiddenLabel } = useParameterShell();
+  return /* @__PURE__ */ jsx137(
     "textarea",
     {
       css: [input3, textarea2],
       id,
       ref,
-      "aria-label": hiddenLabel && typeof label === "string" ? label : void 0,
+      "aria-label": hiddenLabel && typeof label2 === "string" ? label2 : void 0,
       ...props
     }
   );
 });
 // src/components/ParameterInputs/ParameterToggle.tsx
-import { forwardRef as forwardRef28 } from "react";
-import { jsx as jsx134, jsxs as jsxs90 } from "@emotion/react/jsx-runtime";
-var ParameterToggle = forwardRef28((props, ref) => {
+import { forwardRef as forwardRef31 } from "react";
+import { jsx as jsx138, jsxs as jsxs91 } from "@emotion/react/jsx-runtime";
+var ParameterToggle = forwardRef31((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ jsx134(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx134(ParameterToggleInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ jsx138(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx138(ParameterToggleInner, { ref, ...innerProps }) });
 });
-var ParameterToggleInner = forwardRef28(
+ParameterToggle.displayName = "ParameterToggle";
+var ParameterToggleInner = forwardRef31(
   ({ children, ...props }, ref) => {
-    const { id, label } = useParameterShell();
-    return /* @__PURE__ */ jsxs90("label", { css: inputToggleLabel2, children: [
-      /* @__PURE__ */ jsx134("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
-      /* @__PURE__ */ jsx134("span", { css: inlineLabel2, children: label }),
+    const { type, withoutIndeterminateState, ...otherProps } = props;
+    const { id, label: label2 } = useParameterShell();
+    return /* @__PURE__ */ jsxs91("label", { css: inputToggleLabel2, children: [
+      /* @__PURE__ */ jsx138(
+        "input",
+        {
+          css: [
+            toggleInput2,
+            !props.withoutIndeterminateState ? toggleInputIndeterminateState : void 0
+          ],
+          type,
+          id,
+          ref,
+          ...otherProps
+        }
+      ),
+      /* @__PURE__ */ jsx138("span", { css: inlineLabel2, children: label2 }),
       children
     ] });
   }
 );
+ParameterToggleInner.displayName = "ParameterToggleInner";
 // src/components/ProgressBar/ProgressBar.styles.ts
-import { css as css100, keyframes as keyframes4 } from "@emotion/react";
-var container3 = css100`
+import { css as css101, keyframes as keyframes4 } from "@emotion/react";
+var container4 = css101`
   background: var(--gray-50);
   margin-block: var(--spacing-sm);
   position: relative;
@@ -15428,13 +16186,13 @@ var container3 = css100`
   border: solid 1px var(--gray-300);
 `;
 var themeMap = {
-  primary: css100`
+  primary: css101`
     --progress-color: var(--accent-light);
   `,
-  secondary: css100`
+  secondary: css101`
     --progress-color: var(--accent-alt-light);
   `,
-  destructive: css100`
+  destructive: css101`
     --progress-color: var(--brand-secondary-5);
   `
 };
@@ -15446,10 +16204,10 @@ var slidingBackgroundPosition = keyframes4`
     background-position: 64px 0;
   }
 `;
-var determinate = css100`
+var determinate = css101`
   background-color: var(--progress-color);
 `;
-var indeterminate = css100`
+var indeterminate = css101`
   background-image: linear-gradient(
     45deg,
     var(--progress-color) 25%,
@@ -15463,7 +16221,7 @@ var indeterminate = css100`
   background-size: 64px 64px;
   animation: ${slidingBackgroundPosition} 1s linear infinite;
 `;
-var bar = css100`
+var bar = css101`
   position: absolute;
   inset: 0;
   transition: transform var(--duration-fast) var(--timing-ease-out);
@@ -15471,7 +16229,7 @@ var bar = css100`
 `;
 // src/components/ProgressBar/ProgressBar.tsx
-import { jsx as jsx135 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx139 } from "@emotion/react/jsx-runtime";
 function ProgressBar({
   current,
   max,
@@ -15481,10 +16239,10 @@ function ProgressBar({
 }) {
   const valueNow = Math.min(current, max);
   const valuePercentage = max > 0 ? Math.ceil(100 / max * valueNow) : 0;
-  return /* @__PURE__ */ jsx135(
+  return /* @__PURE__ */ jsx139(
     "div",
     {
-      css: container3,
+      css: container4,
       role: "progressbar",
       "aria-busy": valuePercentage !== 100,
       "aria-invalid": false,
@@ -15492,7 +16250,7 @@ function ProgressBar({
       "aria-valuemax": max,
       "aria-valuenow": valueNow,
       ...props,
-      children: /* @__PURE__ */ jsx135(
+      children: /* @__PURE__ */ jsx139(
         "div",
         {
           css: [
@@ -15511,30 +16269,30 @@ function ProgressBar({
 }
 // src/components/ProgressList/ProgressList.tsx
-import { css as css102 } from "@emotion/react";
+import { css as css103 } from "@emotion/react";
 import { CgCheckO as CgCheckO2 } from "@react-icons/all-files/cg/CgCheckO";
 import { CgRadioCheck } from "@react-icons/all-files/cg/CgRadioCheck";
 import { CgRecord } from "@react-icons/all-files/cg/CgRecord";
-import { useMemo as useMemo8 } from "react";
+import { useMemo as useMemo10 } from "react";
 // src/components/ProgressList/styles/ProgressList.styles.ts
-import { css as css101 } from "@emotion/react";
-var progressListStyles = css101`
+import { css as css102 } from "@emotion/react";
+var progressListStyles = css102`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
   list-style-type: none;
 `;
-var progressListItemStyles = css101`
+var progressListItemStyles = css102`
   display: flex;
   gap: var(--spacing-base);
   align-items: center;
 `;
 // src/components/ProgressList/ProgressList.tsx
-import { jsx as jsx136, jsxs as jsxs91 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx140, jsxs as jsxs92 } from "@emotion/react/jsx-runtime";
 var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
-  const itemsWithStatus = useMemo8(() => {
+  const itemsWithStatus = useMemo10(() => {
     const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
     return items.map((item, index) => {
       let status = "queued";
@@ -15546,15 +16304,15 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
       return { ...item, status };
     });
   }, [items, inProgressId]);
-  return /* @__PURE__ */ jsx136("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
-    return /* @__PURE__ */ jsx136(
+  return /* @__PURE__ */ jsx140("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label: label2, status, error, errorLevel }) => {
+    return /* @__PURE__ */ jsx140(
       ProgressListItem,
       {
         status,
         error,
         errorLevel,
         autoEllipsis,
-        children: label
+        children: label2
       },
       id
     );
@@ -15567,7 +16325,7 @@ var ProgressListItem = ({
   errorLevel = "danger",
   autoEllipsis = false
 }) => {
-  const icon = useMemo8(() => {
+  const icon = useMemo10(() => {
     if (error) {
       return warningIcon;
     }
@@ -15578,14 +16336,14 @@ var ProgressListItem = ({
     };
     return iconPerStatus[status];
   }, [status, error]);
-  const statusStyles = useMemo8(() => {
+  const statusStyles = useMemo10(() => {
     if (error) {
-      return errorLevel === "caution" ? css102`
+      return errorLevel === "caution" ? css103`
             color: rgb(161, 98, 7);
             & svg {
               color: rgb(250, 204, 21);
             }
-          ` : css102`
+          ` : css103`
             color: rgb(185, 28, 28);
             & svg {
               color: var(--brand-primary-2);
@@ -15593,38 +16351,38 @@ var ProgressListItem = ({
           `;
     }
     const colorPerStatus = {
-      completed: css102`
+      completed: css103`
         opacity: 0.75;
       `,
-      inProgress: css102`
+      inProgress: css103`
         -webkit-text-stroke-width: thin;
       `,
-      queued: css102`
+      queued: css103`
         opacity: 0.5;
       `
     };
     return colorPerStatus[status];
   }, [status, error, errorLevel]);
-  return /* @__PURE__ */ jsxs91("li", { css: [progressListItemStyles, statusStyles], children: [
-    /* @__PURE__ */ jsx136(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ jsx136("div", { children: /* @__PURE__ */ jsx136(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
-    /* @__PURE__ */ jsxs91("div", { children: [
+  return /* @__PURE__ */ jsxs92("li", { css: [progressListItemStyles, statusStyles], children: [
+    /* @__PURE__ */ jsx140(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ jsx140("div", { children: /* @__PURE__ */ jsx140(Icon, { icon, size: 20, iconColor: "currentColor" }) }) }),
+    /* @__PURE__ */ jsxs92("div", { children: [
       children,
-      /* @__PURE__ */ jsx136("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
+      /* @__PURE__ */ jsx140("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
     ] })
   ] });
 };
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { css as css104 } from "@emotion/react";
+import { css as css105 } from "@emotion/react";
 import { CgCheck as CgCheck5 } from "@react-icons/all-files/cg/CgCheck";
-import { useCallback as useCallback12, useEffect as useEffect24, useMemo as useMemo9, useRef as useRef12, useState as useState21 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect25, useMemo as useMemo11, useRef as useRef13, useState as useState22 } from "react";
 // src/components/SegmentedControl/SegmentedControl.styles.ts
-import { css as css103 } from "@emotion/react";
-var segmentedControlRootStyles = css103`
+import { css as css104 } from "@emotion/react";
+var segmentedControlRootStyles = css104`
   position: relative;
 `;
-var segmentedControlScrollIndicatorsStyles = css103`
+var segmentedControlScrollIndicatorsStyles = css104`
   position: absolute;
   inset: 0;
   z-index: 1;
@@ -15652,17 +16410,17 @@ var segmentedControlScrollIndicatorsStyles = css103`
     background: linear-gradient(to left, var(--background-color) 10%, transparent);
   }
 `;
-var segmentedControlScrollIndicatorStartVisibleStyles = css103`
+var segmentedControlScrollIndicatorStartVisibleStyles = css104`
   &::before {
     opacity: 1;
   }
 `;
-var segmentedControlScrollIndicatorEndVisibleStyles = css103`
+var segmentedControlScrollIndicatorEndVisibleStyles = css104`
   &::after {
     opacity: 1;
   }
 `;
-var segmentedControlWrapperStyles = css103`
+var segmentedControlWrapperStyles = css104`
   overflow-y: auto;
   scroll-behavior: smooth;
   scrollbar-width: none;
@@ -15671,7 +16429,7 @@ var segmentedControlWrapperStyles = css103`
     height: 0px;
   }
 `;
-var segmentedControlStyles = css103`
+var segmentedControlStyles = css104`
   --segmented-control-rounded-value: var(--rounded-base);
   --segmented-control-border-width: 1px;
   --segmented-control-selected-color: var(--brand-secondary-3);
@@ -15690,14 +16448,14 @@ var segmentedControlStyles = css103`
   border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
   font-size: var(--fs-xs);
 `;
-var segmentedControlVerticalStyles = css103`
+var segmentedControlVerticalStyles = css104`
   flex-direction: column;
   --segmented-control-first-border-radius: var(--segmented-control-rounded-value)
     var(--segmented-control-rounded-value) 0 0;
   --segmented-control-last-border-radius: 0 0 var(--segmented-control-rounded-value)
     var(--segmented-control-rounded-value);
 `;
-var segmentedControlItemStyles = css103`
+var segmentedControlItemStyles = css104`
   &:first-of-type label {
     border-radius: var(--segmented-control-first-border-radius);
   }
@@ -15705,10 +16463,10 @@ var segmentedControlItemStyles = css103`
     border-radius: var(--segmented-control-last-border-radius);
   }
 `;
-var segmentedControlInputStyles = css103`
+var segmentedControlInputStyles = css104`
   ${accessibleHidden}
 `;
-var segmentedControlLabelStyles = (checked, disabled2) => css103`
+var segmentedControlLabelStyles = (checked, disabled2) => css104`
   position: relative;
   display: flex;
   align-items: center;
@@ -15772,25 +16530,25 @@ var segmentedControlLabelStyles = (checked, disabled2) => css103`
     `}
   }
 `;
-var segmentedControlLabelIconOnlyStyles = css103`
+var segmentedControlLabelIconOnlyStyles = css104`
   padding-inline: 0.5em;
 `;
-var segmentedControlLabelCheckStyles = css103`
+var segmentedControlLabelCheckStyles = css104`
   opacity: 0.5;
 `;
-var segmentedControlLabelContentStyles = css103`
+var segmentedControlLabelContentStyles = css104`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-sm);
   height: 100%;
 `;
-var segmentedControlLabelTextStyles = css103`
+var segmentedControlLabelTextStyles = css104`
   white-space: nowrap;
 `;
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { jsx as jsx137, jsxs as jsxs92 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx141, jsxs as jsxs93 } from "@emotion/react/jsx-runtime";
 var SegmentedControl = ({
   name,
   options,
@@ -15805,10 +16563,10 @@ var SegmentedControl = ({
   currentBackgroundColor = "white",
   ...props
 }) => {
-  const wrapperRef = useRef12(null);
-  const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = useState21(false);
-  const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = useState21(false);
-  const onOptionChange = useCallback12(
+  const wrapperRef = useRef13(null);
+  const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = useState22(false);
+  const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = useState22(false);
+  const onOptionChange = useCallback14(
     (event) => {
       if (event.target.checked) {
         onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
@@ -15816,19 +16574,19 @@ var SegmentedControl = ({
     },
     [options, onChange]
   );
-  const sizeStyles = useMemo9(() => {
+  const sizeStyles = useMemo11(() => {
     const map = {
-      sm: css104({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
-      md: css104({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
-      lg: css104({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
-      xl: css104({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
+      sm: css105({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
+      md: css105({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
+      lg: css105({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" }),
+      xl: css105({ height: "calc(48px - 2px)", fontSize: "var(--fs-base)" })
     };
     return map[size];
   }, [size]);
-  const isIconOnly = useMemo9(() => {
+  const isIconOnly = useMemo11(() => {
     return options.every((option) => option && option.icon && !option.label);
   }, [options]);
-  useEffect24(() => {
+  useEffect25(() => {
     const wrapperElement = wrapperRef.current;
     const onScroll = () => {
       if (!wrapperElement) {
@@ -15849,8 +16607,8 @@ var SegmentedControl = ({
       wrapperElement == null ? void 0 : wrapperElement.removeEventListener("scroll", onScroll);
     };
   }, []);
-  return /* @__PURE__ */ jsxs92("div", { css: [segmentedControlRootStyles, { "--background-color": currentBackgroundColor }], children: [
-    /* @__PURE__ */ jsx137("div", { ref: wrapperRef, css: segmentedControlWrapperStyles, children: /* @__PURE__ */ jsx137(
+  return /* @__PURE__ */ jsxs93("div", { css: [segmentedControlRootStyles, { "--background-color": currentBackgroundColor }], children: [
+    /* @__PURE__ */ jsx141("div", { ref: wrapperRef, css: segmentedControlWrapperStyles, children: /* @__PURE__ */ jsx141(
       "div",
       {
         css: [
@@ -15867,12 +16625,12 @@ var SegmentedControl = ({
           const text = option.label ? option.label : option.icon ? null : String(option.value);
           const isDisabled = disabled2 || option.disabled;
           const isChecked = option.value === value;
-          return /* @__PURE__ */ jsx137(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ jsx137(
+          return /* @__PURE__ */ jsx141(Tooltip, { title: (_a = option.tooltip) != null ? _a : "", children: /* @__PURE__ */ jsx141(
             "div",
             {
               css: segmentedControlItemStyles,
               "data-testid": option["data-testid"] ? option["data-testid"] : "container-segmented-control",
-              children: /* @__PURE__ */ jsxs92(
+              children: /* @__PURE__ */ jsxs93(
                 "label",
                 {
                   css: [
@@ -15881,7 +16639,7 @@ var SegmentedControl = ({
                     isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
                   ],
                   children: [
-                    /* @__PURE__ */ jsx137(
+                    /* @__PURE__ */ jsx141(
                       "input",
                       {
                         css: segmentedControlInputStyles,
@@ -15893,10 +16651,10 @@ var SegmentedControl = ({
                         disabled: isDisabled
                       }
                     ),
-                    option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx137(CgCheck5, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
-                    /* @__PURE__ */ jsxs92("span", { css: segmentedControlLabelContentStyles, children: [
-                      !option.icon ? null : /* @__PURE__ */ jsx137(Icon, { icon: option.icon, size: iconSize, iconColor: "currentColor" }),
-                      !text || hideOptionText ? null : /* @__PURE__ */ jsx137("span", { css: segmentedControlLabelTextStyles, children: text })
+                    option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx141(CgCheck5, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
+                    /* @__PURE__ */ jsxs93("span", { css: segmentedControlLabelContentStyles, children: [
+                      !option.icon ? null : /* @__PURE__ */ jsx141(Icon, { icon: option.icon, size: iconSize, iconColor: "currentColor" }),
+                      !text || hideOptionText ? null : /* @__PURE__ */ jsx141("span", { css: segmentedControlLabelTextStyles, children: text })
                     ] })
                   ]
                 }
@@ -15906,7 +16664,7 @@ var SegmentedControl = ({
         })
       }
     ) }),
-    /* @__PURE__ */ jsx137(
+    /* @__PURE__ */ jsx141(
       "div",
       {
         css: [
@@ -15920,18 +16678,18 @@ var SegmentedControl = ({
 };
 // src/components/Skeleton/Skeleton.styles.ts
-import { css as css105, keyframes as keyframes5 } from "@emotion/react";
+import { css as css106, keyframes as keyframes5 } from "@emotion/react";
 var lightFadingOut = keyframes5`
   from { opacity: 0.1; }
   to { opacity: 0.025; }
 `;
-var skeletonStyles = css105`
+var skeletonStyles = css106`
   animation: ${lightFadingOut} 1s ease-out infinite alternate;
   background-color: var(--gray-900);
 `;
 // src/components/Skeleton/Skeleton.tsx
-import { jsx as jsx138 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx142 } from "@emotion/react/jsx-runtime";
 var Skeleton = ({
   width = "100%",
   height = "1.25rem",
@@ -15939,7 +16697,7 @@ var Skeleton = ({
   circle = false,
   children,
   ...otherProps
-}) => /* @__PURE__ */ jsx138(
+}) => /* @__PURE__ */ jsx142(
   "div",
   {
     css: [
@@ -15959,11 +16717,11 @@ var Skeleton = ({
 );
 // src/components/Spinner/Spinner.tsx
-import { useEffect as useEffect25, useRef as useRef13 } from "react";
+import { useEffect as useEffect26, useRef as useRef14 } from "react";
 // src/components/Spinner/Spinner.styles.ts
-import { css as css106 } from "@emotion/react";
-var SpinnerStyles = css106`
+import { css as css107 } from "@emotion/react";
+var SpinnerStyles = css107`
   --color: #00b4ff;
   --speed: 5s;
   --red: rgb(218, 63, 50);
@@ -16393,22 +17151,22 @@ var SpinnerStyles = css106`
 `;
 // src/components/Spinner/Spinner.tsx
-import { jsx as jsx139, jsxs as jsxs93 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx143, jsxs as jsxs94 } from "@emotion/react/jsx-runtime";
 var Spinner = ({
   width,
-  label,
+  label: label2,
   isPaused
 }) => {
-  const ref = useRef13(null);
-  useEffect25(() => {
+  const ref = useRef14(null);
+  useEffect26(() => {
     var _a, _b, _c;
     (_c = ref.current) == null ? void 0 : _c.style.setProperty("--pyramid-size", ((_b = (_a = ref.current) == null ? void 0 : _a.clientWidth) != null ? _b : 200) / 6 + "px");
   }, [width]);
-  return /* @__PURE__ */ jsxs93(
+  return /* @__PURE__ */ jsxs94(
     "div",
     {
       ref,
-      "aria-label": label,
+      "aria-label": label2,
       style: {
         width: typeof width === "number" ? `${width}px` : width,
         height: typeof width === "number" ? `${width}px` : width
@@ -16416,51 +17174,51 @@ var Spinner = ({
       css: SpinnerStyles,
       className: `container${isPaused ? " paused" : ""}`,
       children: [
-        /* @__PURE__ */ jsx139("div", { className: "pyramid-container", children: /* @__PURE__ */ jsxs93("div", { className: "pyramid top", children: [
-          /* @__PURE__ */ jsx139("div", { className: "side one" }),
-          /* @__PURE__ */ jsx139("div", { className: "side two" }),
-          /* @__PURE__ */ jsx139("div", { className: "side three" }),
-          /* @__PURE__ */ jsx139("div", { className: "side four" }),
-          /* @__PURE__ */ jsxs93("div", { className: "bottom-pyramid", children: [
-            /* @__PURE__ */ jsx139("div", { className: "side five" }),
-            /* @__PURE__ */ jsx139("div", { className: "side six" }),
-            /* @__PURE__ */ jsx139("div", { className: "side seven" }),
-            /* @__PURE__ */ jsx139("div", { className: "side eight" })
+        /* @__PURE__ */ jsx143("div", { className: "pyramid-container", children: /* @__PURE__ */ jsxs94("div", { className: "pyramid top", children: [
+          /* @__PURE__ */ jsx143("div", { className: "side one" }),
+          /* @__PURE__ */ jsx143("div", { className: "side two" }),
+          /* @__PURE__ */ jsx143("div", { className: "side three" }),
+          /* @__PURE__ */ jsx143("div", { className: "side four" }),
+          /* @__PURE__ */ jsxs94("div", { className: "bottom-pyramid", children: [
+            /* @__PURE__ */ jsx143("div", { className: "side five" }),
+            /* @__PURE__ */ jsx143("div", { className: "side six" }),
+            /* @__PURE__ */ jsx143("div", { className: "side seven" }),
+            /* @__PURE__ */ jsx143("div", { className: "side eight" })
           ] })
         ] }) }),
-        /* @__PURE__ */ jsx139("div", { className: "turning-circle" }),
-        /* @__PURE__ */ jsxs93("div", { className: "pulsating-star delay-top-right", children: [
-          /* @__PURE__ */ jsx139("div", { className: "star-inner star-center" }),
-          /* @__PURE__ */ jsx139("div", { className: "star-inner star-top" }),
-          /* @__PURE__ */ jsx139("div", { className: "star-inner star-bottom" }),
-          /* @__PURE__ */ jsx139("div", { className: "star-inner star-left" }),
-          /* @__PURE__ */ jsx139("div", { className: "star-inner star-right" })
+        /* @__PURE__ */ jsx143("div", { className: "turning-circle" }),
+        /* @__PURE__ */ jsxs94("div", { className: "pulsating-star delay-top-right", children: [
+          /* @__PURE__ */ jsx143("div", { className: "star-inner star-center" }),
+          /* @__PURE__ */ jsx143("div", { className: "star-inner star-top" }),
+          /* @__PURE__ */ jsx143("div", { className: "star-inner star-bottom" }),
+          /* @__PURE__ */ jsx143("div", { className: "star-inner star-left" }),
+          /* @__PURE__ */ jsx143("div", { className: "star-inner star-right" })
         ] }),
-        /* @__PURE__ */ jsxs93("div", { className: "pulsating-star delay-top-left-2", children: [
-          /* @__PURE__ */ jsx139("div", { className: "star-inner star-center" }),
-          /* @__PURE__ */ jsx139("div", { className: "star-inner star-top" }),
-          /* @__PURE__ */ jsx139("div", { className: "star-inner star-bottom" }),
-          /* @__PURE__ */ jsx139("div", { className: "star-inner star-left" }),
-          /* @__PURE__ */ jsx139("div", { className: "star-inner star-right" })
+        /* @__PURE__ */ jsxs94("div", { className: "pulsating-star delay-top-left-2", children: [
+          /* @__PURE__ */ jsx143("div", { className: "star-inner star-center" }),
+          /* @__PURE__ */ jsx143("div", { className: "star-inner star-top" }),
+          /* @__PURE__ */ jsx143("div", { className: "star-inner star-bottom" }),
+          /* @__PURE__ */ jsx143("div", { className: "star-inner star-left" }),
+          /* @__PURE__ */ jsx143("div", { className: "star-inner star-right" })
         ] }),
-        /* @__PURE__ */ jsxs93("div", { className: "pulsating-star delay-top-left", children: [
-          /* @__PURE__ */ jsx139("div", { className: "star-inner star-top" }),
-          /* @__PURE__ */ jsx139("div", { className: "star-inner star-bottom" }),
-          /* @__PURE__ */ jsx139("div", { className: "star-inner star-left" }),
-          /* @__PURE__ */ jsx139("div", { className: "star-inner star-right" })
+        /* @__PURE__ */ jsxs94("div", { className: "pulsating-star delay-top-left", children: [
+          /* @__PURE__ */ jsx143("div", { className: "star-inner star-top" }),
+          /* @__PURE__ */ jsx143("div", { className: "star-inner star-bottom" }),
+          /* @__PURE__ */ jsx143("div", { className: "star-inner star-left" }),
+          /* @__PURE__ */ jsx143("div", { className: "star-inner star-right" })
         ] }),
-        /* @__PURE__ */ jsxs93("div", { className: "pulsating-star delay-bottom-right", children: [
-          /* @__PURE__ */ jsx139("div", { className: "star-inner star-top" }),
-          /* @__PURE__ */ jsx139("div", { className: "star-inner star-bottom" }),
-          /* @__PURE__ */ jsx139("div", { className: "star-inner star-left" }),
-          /* @__PURE__ */ jsx139("div", { className: "star-inner star-right" })
+        /* @__PURE__ */ jsxs94("div", { className: "pulsating-star delay-bottom-right", children: [
+          /* @__PURE__ */ jsx143("div", { className: "star-inner star-top" }),
+          /* @__PURE__ */ jsx143("div", { className: "star-inner star-bottom" }),
+          /* @__PURE__ */ jsx143("div", { className: "star-inner star-left" }),
+          /* @__PURE__ */ jsx143("div", { className: "star-inner star-right" })
         ] }),
-        /* @__PURE__ */ jsxs93("div", { className: "pulsating-star delay-bottom-left", children: [
-          /* @__PURE__ */ jsx139("div", { className: "star-inner star-center" }),
-          /* @__PURE__ */ jsx139("div", { className: "star-inner star-top" }),
-          /* @__PURE__ */ jsx139("div", { className: "star-inner star-bottom" }),
-          /* @__PURE__ */ jsx139("div", { className: "star-inner star-left" }),
-          /* @__PURE__ */ jsx139("div", { className: "star-inner star-right" })
+        /* @__PURE__ */ jsxs94("div", { className: "pulsating-star delay-bottom-left", children: [
+          /* @__PURE__ */ jsx143("div", { className: "star-inner star-center" }),
+          /* @__PURE__ */ jsx143("div", { className: "star-inner star-top" }),
+          /* @__PURE__ */ jsx143("div", { className: "star-inner star-bottom" }),
+          /* @__PURE__ */ jsx143("div", { className: "star-inner star-left" }),
+          /* @__PURE__ */ jsx143("div", { className: "star-inner star-right" })
         ] })
       ]
     }
@@ -16468,11 +17226,11 @@ var Spinner = ({
 };
 // src/components/Switch/Switch.tsx
-import { forwardRef as forwardRef29, useMemo as useMemo10 } from "react";
+import { forwardRef as forwardRef32, useMemo as useMemo12 } from "react";
 // src/components/Switch/Switch.styles.ts
-import { css as css107 } from "@emotion/react";
-var SwitchInputContainer = css107`
+import { css as css108 } from "@emotion/react";
+var SwitchInputContainer = css108`
   cursor: pointer;
   display: inline-flex;
   position: relative;
@@ -16482,7 +17240,7 @@ var SwitchInputContainer = css107`
   user-select: none;
   z-index: 0;
 `;
-var SwitchInput = (size) => css107`
+var SwitchInput = (size) => css108`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -16521,18 +17279,18 @@ var SwitchInput = (size) => css107`
     cursor: not-allowed;
   }
 `;
-var SwitchInputCheckedDirectionLeft = css107`
+var SwitchInputCheckedDirectionLeft = css108`
   &:checked {
     transform: translateX(var(--spacing-base));
   }
 `;
-var SwitchInputCheckedDirectionRight = css107`
+var SwitchInputCheckedDirectionRight = css108`
   transform: translateX(-var(--spacing-base));
   &:checked {
     transform: translateX(0);
   }
 `;
-var SwitchInputDisabled = css107`
+var SwitchInputDisabled = css108`
   opacity: var(--opacity-50);
   cursor: not-allowed;
@@ -16540,19 +17298,19 @@ var SwitchInputDisabled = css107`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabelAlignmentLeft = (size) => css107`
+var SwitchInputLabelAlignmentLeft = (size) => css108`
   padding-inline-start: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"};
   &:before {
     left: 0;
   }
 `;
-var SwitchInputLabelAlignmentRight = (size) => css107`
+var SwitchInputLabelAlignmentRight = (size) => css108`
   padding-inline-end: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"};
   &:before {
     right: 0;
   }
 `;
-var SwitchInputLabel = (size) => css107`
+var SwitchInputLabel = (size) => css108`
   align-items: center;
   color: var(--typography-base);
   display: inline-flex;
@@ -16572,28 +17330,28 @@ var SwitchInputLabel = (size) => css107`
     top: 0;
   }
 `;
-var SwitchTextAlignmentLeft = (size) => css107`
+var SwitchTextAlignmentLeft = (size) => css108`
   padding-inline-start: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"};
 `;
-var SwitchTextAlignmentRight = (size) => css107`
+var SwitchTextAlignmentRight = (size) => css108`
   padding-inline-end: ${size === "sm" ? "var(--spacing-xl)" : "var(--spacing-2xl)"};
 `;
-var SwitchText = css107`
+var SwitchText = css108`
   color: var(--gray-500);
   font-size: var(--fs-sm);
 `;
-var SwitchInputContainerAlignmentLeft = css107`
+var SwitchInputContainerAlignmentLeft = css108`
   flex-direction: row;
 `;
-var SwitchInputContainerAlignmentRight = css107`
+var SwitchInputContainerAlignmentRight = css108`
   flex-direction: row-reverse;
 `;
 // src/components/Switch/Switch.tsx
-import { Fragment as Fragment19, jsx as jsx140, jsxs as jsxs94 } from "@emotion/react/jsx-runtime";
-var Switch = forwardRef29(
+import { Fragment as Fragment19, jsx as jsx144, jsxs as jsxs95 } from "@emotion/react/jsx-runtime";
+var Switch = forwardRef32(
   ({
-    label,
+    label: label2,
     infoText,
     toggleText,
     children,
@@ -16602,7 +17360,7 @@ var Switch = forwardRef29(
     ...inputProps
   }, ref) => {
     let additionalText = infoText;
-    const { SwitchInputContainerAlignmentStyles, SwitchInputCheckedDirection, SwitchInputLabelAlignment } = useMemo10(() => {
+    const { SwitchInputContainerAlignmentStyles, SwitchInputCheckedDirection, SwitchInputLabelAlignment } = useMemo12(() => {
       if (alignment === "left") {
         return {
           SwitchInputContainerAlignmentStyles: SwitchInputContainerAlignmentLeft,
@@ -16619,8 +17377,8 @@ var Switch = forwardRef29(
     if (infoText && toggleText) {
       additionalText = inputProps.checked ? toggleText : infoText;
     }
-    return /* @__PURE__ */ jsxs94(Fragment19, { children: [
-      /* @__PURE__ */ jsxs94(
+    return /* @__PURE__ */ jsxs95(Fragment19, { children: [
+      /* @__PURE__ */ jsxs95(
         "label",
         {
           css: [
@@ -16630,7 +17388,7 @@ var Switch = forwardRef29(
             inputProps.disabled ? SwitchInputDisabled : void 0
           ],
           children: [
-            /* @__PURE__ */ jsx140(
+            /* @__PURE__ */ jsx144(
               "input",
               {
                 type: "checkbox",
@@ -16639,11 +17397,11 @@ var Switch = forwardRef29(
                 ref
               }
             ),
-            /* @__PURE__ */ jsx140("span", { css: [SwitchInputLabel(switchSize), SwitchInputLabelAlignment], children: label })
+            /* @__PURE__ */ jsx144("span", { css: [SwitchInputLabel(switchSize), SwitchInputLabelAlignment], children: label2 })
           ]
         }
       ),
-      additionalText ? /* @__PURE__ */ jsx140(
+      additionalText ? /* @__PURE__ */ jsx144(
         "p",
         {
           css: [
@@ -16659,8 +17417,8 @@ var Switch = forwardRef29(
 );
 // src/components/Table/Table.styles.ts
-import { css as css108 } from "@emotion/react";
-var table = ({ cellPadding = "var(--spacing-sm)" }) => css108`
+import { css as css109 } from "@emotion/react";
+var table = ({ cellPadding = "var(--spacing-sm)" }) => css109`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
@@ -16680,21 +17438,21 @@ var table = ({ cellPadding = "var(--spacing-sm)" }) => css108`
     background-color: var(--gray-50);
   }
 `;
-var tableHead = css108`
+var tableHead = css109`
   color: var(--typography-base);
   text-align: left;
 `;
-var tableRow = css108`
+var tableRow = css109`
   border-bottom: 1px solid var(--gray-200);
   font-size: var(--fs-sm);
 `;
-var tableCellHead = css108`
+var tableCellHead = css109`
   font-size: var(--fs-sm);
   font-weight: var(--fw-regular);
   line-height: 1.2;
   }
 `;
-var responsiveTableContainer = css108`
+var responsiveTableContainer = css109`
   max-width: calc(100vw - var(--spacing-md) * 2);
   overflow-x: auto;
   ${scrollbarStyles}
@@ -16713,47 +17471,47 @@ var responsiveTableContainer = css108`
 `;
 // src/components/Table/ResponsiveTableContainer.tsx
-import { jsx as jsx141 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx145 } from "@emotion/react/jsx-runtime";
 var ResponsiveTableContainer = ({ children }) => {
-  return /* @__PURE__ */ jsx141("div", { css: responsiveTableContainer, children });
+  return /* @__PURE__ */ jsx145("div", { css: responsiveTableContainer, children });
 };
 // src/components/Table/Table.tsx
 import * as React22 from "react";
-import { jsx as jsx142 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx146 } from "@emotion/react/jsx-runtime";
 var Table = React22.forwardRef(
   ({ children, cellPadding, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx142("table", { ref, css: table({ cellPadding }), ...otherProps, children });
+    return /* @__PURE__ */ jsx146("table", { ref, css: table({ cellPadding }), ...otherProps, children });
   }
 );
 var TableHead = React22.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx142("thead", { ref, css: tableHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx146("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
 var TableBody = React22.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx142("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx146("tbody", { ref, ...otherProps, children });
   }
 );
 var TableFoot = React22.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx142("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx146("tfoot", { ref, ...otherProps, children });
   }
 );
 var TableRow = React22.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx142("tr", { ref, css: tableRow, ...otherProps, children });
+    return /* @__PURE__ */ jsx146("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
 var TableCellHead = React22.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx142("th", { ref, css: tableCellHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx146("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
 var TableCellData = React22.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx142("td", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx146("td", { ref, ...otherProps, children });
   }
 );
@@ -16765,11 +17523,11 @@ import {
   TabProvider as AriakitTabProvider,
   useTabStore as useAriakitTabStore
 } from "@ariakit/react";
-import { useCallback as useCallback13, useMemo as useMemo11 } from "react";
+import { useCallback as useCallback15, useMemo as useMemo13 } from "react";
 // src/components/Tabs/Tabs.styles.ts
-import { css as css109 } from "@emotion/react";
-var tabButtonStyles = css109`
+import { css as css110 } from "@emotion/react";
+var tabButtonStyles = css110`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -16786,14 +17544,14 @@ var tabButtonStyles = css109`
     box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
   }
 `;
-var tabButtonGroupStyles = css109`
+var tabButtonGroupStyles = css110`
   display: flex;
   gap: var(--spacing-base);
   border-bottom: 1px solid var(--gray-300);
 `;
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx143 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx147 } from "@emotion/react/jsx-runtime";
 var useCurrentTab = () => {
   const context = useAriakitTabStore();
   if (!context) {
@@ -16809,11 +17567,11 @@ var Tabs = ({
   manual,
   ...props
 }) => {
-  const selected = useMemo11(() => {
+  const selected = useMemo13(() => {
     if (selectedId) return selectedId;
     return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
   }, [selectedId, useHashForState]);
-  const onTabSelect = useCallback13(
+  const onTabSelect = useCallback15(
     (value) => {
       const selectedValueWithoutNull = value != null ? value : void 0;
       onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
@@ -16824,28 +17582,28 @@ var Tabs = ({
     },
     [onSelectedIdChange, useHashForState]
   );
-  return /* @__PURE__ */ jsx143(AriakitTabProvider, { selectedId: selected, selectOnMove: !manual, setSelectedId: onTabSelect, ...props, children });
+  return /* @__PURE__ */ jsx147(AriakitTabProvider, { selectedId: selected, selectOnMove: !manual, setSelectedId: onTabSelect, ...props, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx143(AriakitTabList, { ...props, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ jsx147(AriakitTabList, { ...props, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({
   children,
   id,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx143(AriakitTab, { type: "button", id, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ jsx147(AriakitTab, { type: "button", id, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx143(AriakitTabPanel, { ...props, children });
+  return /* @__PURE__ */ jsx147(AriakitTabPanel, { ...props, children });
 };
 // src/components/Validation/StatusBullet.styles.ts
-import { css as css110 } from "@emotion/react";
-var StatusBulletContainer = css110`
+import { css as css111 } from "@emotion/react";
+var StatusBulletContainer = css111`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -16861,33 +17619,33 @@ var StatusBulletContainer = css110`
     display: block;
   }
 `;
-var StatusBulletBase = css110`
+var StatusBulletBase = css111`
   font-size: var(--fs-sm);
   &:before {
     width: var(--fs-xs);
     height: var(--fs-xs);
   }
 `;
-var StatusBulletSmall = css110`
+var StatusBulletSmall = css111`
   font-size: var(--fs-xs);
   &:before {
     width: var(--fs-xxs);
     height: var(--fs-xxs);
   }
 `;
-var StatusDraft = css110`
+var StatusDraft = css111`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
   }
 `;
-var StatusModified = css110`
+var StatusModified = css111`
   &:before {
     background: linear-gradient(to right, var(--white) 50%, var(--accent-dark) 50% 100%);
     box-shadow: inset 0 0 0 0.125rem var(--accent-dark);
   }
 `;
-var StatusError = css110`
+var StatusError = css111`
   color: var(--error);
   &:before {
     /* TODO: replace this with an svg icon */
@@ -16900,29 +17658,29 @@ var StatusError = css110`
     );
   }
 `;
-var StatusPublished = css110`
+var StatusPublished = css111`
   &:before {
     background: var(--accent-dark);
   }
 `;
-var StatusOrphan = css110`
+var StatusOrphan = css111`
   &:before {
     background: var(--brand-secondary-5);
   }
 `;
-var StatusUnknown = css110`
+var StatusUnknown = css111`
   &:before {
     background: var(--gray-800);
   }
 `;
-var StatusDeleted = css110`
+var StatusDeleted = css111`
   &:before {
     background: var(--error);
   }
 `;
 // src/components/Validation/StatusBullet.tsx
-import { jsx as jsx144 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx148 } from "@emotion/react/jsx-runtime";
 var currentStateStyles = {
   Error: StatusError,
   Modified: StatusModified,
@@ -16946,7 +17704,7 @@ var StatusBullet = ({
   compact = false,
   ...props
 }) => {
-  const StatusComponent = () => /* @__PURE__ */ jsx144(
+  const StatusComponent = () => /* @__PURE__ */ jsx148(
     "span",
     {
       role: "status",
@@ -16956,9 +17714,9 @@ var StatusBullet = ({
     }
   );
   if (compact) {
-    return /* @__PURE__ */ jsx144(StatusComponent, {});
+    return /* @__PURE__ */ jsx148(StatusComponent, {});
   }
-  return /* @__PURE__ */ jsx144(Tooltip, { title: message != null ? message : status, children: /* @__PURE__ */ jsx144("div", { children: /* @__PURE__ */ jsx144(StatusComponent, {}) }) });
+  return /* @__PURE__ */ jsx148(Tooltip, { title: message != null ? message : status, children: /* @__PURE__ */ jsx148("div", { children: /* @__PURE__ */ jsx148(StatusComponent, {}) }) });
 };
 export {
   AddButton,
@@ -17082,11 +17840,15 @@ export {
   ParameterMultiSelect,
   ParameterMultiSelectInner,
   ParameterNameAndPublicIdInput,
+  ParameterNumberSlider,
+  ParameterNumberSliderInner,
   ParameterOverrideMarker,
   ParameterRichText,
   ParameterRichTextInner,
   ParameterSelect,
   ParameterSelectInner,
+  ParameterSelectSlider,
+  ParameterSelectSliderInner,
   ParameterShell,
   ParameterShellContext,
   ParameterShellPlaceholder,
@@ -17108,6 +17870,8 @@ export {
   SegmentedControl,
   SelectableMenuItem,
   Skeleton,
+  Slider,
+  SliderLabels,
   Spinner,
   StatusBullet,
   SuccessMessage,