@uniformdev/design-system 19.15.0 → 19.19.0

package/dist/index.js

@@ -146,7 +146,9 @@ __export(src_exports, {
   Tabs: () => Tabs,
   Textarea: () => Textarea,
   Theme: () => Theme,
+  Tile: () => Tile2,
   TileContainer: () => TileContainer,
+  TileText: () => TileText2,
   Tooltip: () => Tooltip,
   TwoColumnLayout: () => TwoColumnLayout,
   UniformBadge: () => UniformBadge,
@@ -188,6 +190,7 @@ __export(src_exports, {
   inputError: () => inputError,
   inputSelect: () => inputSelect,
   isMacLike: () => isMacLike,
+  jsonIcon: () => jsonIcon,
   labelText: () => labelText,
   loaderAnimationData: () => loader_default,
   macifyShortcut: () => macifyShortcut,
@@ -279,8 +282,8 @@ var Theme = ({ disableReset = false }) => {
           --raspberry-beret-300: #ff6aba;
           --raspberry-beret-400: #ff40a7;
           --raspberry-beret-500: #f5168e;
-          --raspberry-beret-600: #f5168e;
-          --raspberry-beret-700: #f5168e;
+          --raspberry-beret-600: #cc006e;
+          --raspberry-beret-700: #a30058;
 
 
           /* action colours */
@@ -802,10 +805,17 @@ var toggleInput = import_react4.css`
   }
 
   &:disabled {
+    filter: grayscale(100%);
     cursor: not-allowed;
     color: var(--gray-300);
     border-color: var(--gray-300);
   }
+
+  &:disabled:checked {
+    background: var(--white)
+      url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath d='M10.5858 13.4142L7.75735 10.5858L6.34314 12L10.5858 16.2427L17.6568 9.1716L16.2426 7.75739L10.5858 13.4142Z' fill='%23000' /%3E%3C/svg%3E")
+      no-repeat center center;
+  }
 `;
 var inlineLabel = (fontWeight) => import_react4.css`
   font-weight: ${fontWeight === "medium" ? "var(--fw-medium)" : fontWeight === "normal" ? "var(--fw-regular)" : "var(--fw-bold)"};
@@ -1718,6 +1728,74 @@ var formatSubscript = (0, import_react_icons.GenIcon)({
     }
   ]
 });
+var jsonIcon = (0, import_react_icons.GenIcon)({
+  tag: "svg",
+  attr: {
+    role: "img",
+    viewBox: "0 0 40 40"
+  },
+  child: [
+    {
+      tag: "path",
+      attr: {
+        fill: "currentColor",
+        d: "M3.3335 20.0719V18.1118C4.82718 18.1118 5.87011 17.8113 6.46228 17.2102C7.05446 16.6005 7.35054 15.5943 7.35054 14.1918V10.4417C7.35054 9.10884 7.50079 7.98945 7.8013 7.08349C8.11064 6.16882 8.57908 5.43708 9.2066 4.88827C9.83413 4.33947 10.6296 3.94311 11.593 3.6992C12.5563 3.45528 13.6921 3.33333 15.0002 3.33333V6.43015C13.9749 6.43015 13.175 6.57824 12.6005 6.87442C12.026 7.1706 11.6239 7.6323 11.3941 8.2595C11.1731 8.878 11.0627 9.67071 11.0627 10.6377V15.394C11.0627 16.0647 10.961 16.6876 10.7577 17.2625C10.5545 17.8287 10.1788 18.3209 9.63084 18.7391C9.08286 19.1572 8.30067 19.4839 7.28425 19.7191C6.26784 19.9543 4.95092 20.0719 3.3335 20.0719ZM15.0002 36.6667C13.6921 36.6667 12.5563 36.5447 11.593 36.3008C10.6296 36.0569 9.83413 35.6605 9.2066 35.1117C8.57908 34.5629 8.11064 33.8312 7.8013 32.9165C7.50079 32.0105 7.35054 30.8911 7.35054 29.5583V25.7951C7.35054 24.4013 7.05446 23.3995 6.46228 22.7897C5.87011 22.18 4.82718 21.8751 3.3335 21.8751V19.9281C4.95092 19.9281 6.26784 20.0457 7.28425 20.2809C8.30067 20.5074 9.08286 20.8341 9.63084 21.2609C10.1788 21.6791 10.5545 22.1756 10.7577 22.7506C10.961 23.3168 11.0627 23.9353 11.0627 24.606V29.3623C11.0627 30.3206 11.1731 31.1089 11.3941 31.7274C11.6239 32.3546 12.026 32.8163 12.6005 33.1125C13.175 33.4174 13.9749 33.5698 15.0002 33.5698V36.6667ZM3.3335 21.8751V18.1118H7.00584V21.8751H3.3335Z"
+      },
+      child: []
+    },
+    {
+      tag: "path",
+      attr: {
+        fill: "currentColor",
+        d: "M14.9998 20C14.9998 20.9205 14.2536 21.6667 13.3332 21.6667C12.4127 21.6667 11.6665 20.9205 11.6665 20C11.6665 19.0795 12.4127 18.3333 13.3332 18.3333C14.2536 18.3333 14.9998 19.0795 14.9998 20Z"
+      },
+      child: []
+    },
+    {
+      tag: "path",
+      attr: {
+        fill: "currentColor",
+        d: "M21.6665 20C21.6665 20.9205 20.9203 21.6667 19.9998 21.6667C19.0794 21.6667 18.3332 20.9205 18.3332 20C18.3332 19.0795 19.0794 18.3333 19.9998 18.3333C20.9203 18.3333 21.6665 19.0795 21.6665 20Z"
+      },
+      child: []
+    },
+    {
+      tag: "path",
+      attr: {
+        fill: "currentColor",
+        d: "M28.3332 20C28.3332 20.9205 27.587 21.6667 26.6665 21.6667C25.746 21.6667 24.9998 20.9205 24.9998 20C24.9998 19.0795 25.746 18.3333 26.6665 18.3333C27.587 18.3333 28.3332 19.0795 28.3332 20Z"
+      },
+      child: []
+    },
+    {
+      tag: "path",
+      attr: {
+        fill: "currentColor",
+        d: "M36.6667 19.9281V21.8751C35.173 21.8751 34.1301 22.18 33.5379 22.7898C32.9457 23.3995 32.6496 24.4013 32.6496 25.7951V29.5583C32.6496 30.8912 32.4949 32.0105 32.1856 32.9165C31.8851 33.8312 31.4211 34.5629 30.7936 35.1117C30.166 35.6605 29.3706 36.0569 28.4072 36.3008C27.4438 36.5447 26.3081 36.6667 25 36.6667V33.5698C26.0253 33.5698 26.8251 33.4174 27.3996 33.1125C27.9741 32.8163 28.3718 32.3546 28.5928 31.7274C28.8226 31.1089 28.9375 30.3206 28.9375 29.3623V24.606C28.9375 23.9353 29.0391 23.3168 29.2424 22.7506C29.4457 22.1756 29.8213 21.6791 30.3693 21.2609C30.9173 20.8341 31.6995 20.5074 32.7159 20.2809C33.7323 20.0457 35.0492 19.9281 36.6667 19.9281ZM25 3.33333C26.3081 3.33333 27.4438 3.45528 28.4072 3.6992C29.3706 3.94311 30.166 4.33947 30.7936 4.88827C31.4211 5.43708 31.8851 6.16882 32.1856 7.08349C32.4949 7.98945 32.6496 9.10884 32.6496 10.4417V14.1918C32.6496 15.5943 32.9457 16.6005 33.5379 17.2102C34.1301 17.8113 35.173 18.1118 36.6667 18.1118V20.0719C35.0492 20.0719 33.7323 19.9543 32.7159 19.7191C31.6995 19.4839 30.9173 19.1572 30.3693 18.7391C29.8213 18.3209 29.4457 17.8287 29.2424 17.2625C29.0391 16.6876 28.9375 16.0647 28.9375 15.394V10.6377C28.9375 9.67071 28.8226 8.878 28.5928 8.2595C28.3718 7.6323 27.9741 7.1706 27.3996 6.87442C26.8251 6.57824 26.0253 6.43015 25 6.43015V3.33333ZM36.6667 18.1118V21.8751H32.9943V18.1118H36.6667Z"
+      },
+      child: []
+    }
+  ]
+});
+var clearFormatting = (0, import_react_icons.GenIcon)({
+  tag: "svg",
+  attr: {
+    role: "img",
+    viewBox: "0 0 24 24"
+  },
+  child: [
+    {
+      tag: "path",
+      attr: {
+        fill: "currentColor",
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M4.904 12.75a1.67 1.67 0 0 0 0 2.362l3.22 3.22h-2.73a.835.835 0 0 0 0 1.67H18.75a.835.835 0 1 0 0-1.67h-7.622l7.943-7.942a1.67 1.67 0 0 0 0-2.362L15.53 4.487a1.67 1.67 0 0 0-2.362 0L4.904 12.75Zm3.611-1.25-2.43 2.431 3.542 3.542 2.43-2.43L8.515 11.5Zm1.181-1.18 3.542 3.542L17.89 9.21l-3.542-3.542-4.653 4.653Z"
+      },
+      child: []
+    }
+  ]
+});
 var customIcons = {
   "rectangle-rounded": rectangleRoundedIcon,
   card: cardIcon,
@@ -1731,12 +1809,14 @@ var customIcons = {
   "info-filled": infoFilledIcon,
   settings,
   "query-string": queryStringIcon,
+  json: jsonIcon,
   "format-bold": formatBoldIcon,
   "format-code": formatCode,
   "format-strike": formatStrike,
   "format-superscript": formatSuperscript,
   "format-subscript": formatSubscript,
-  "layout-list-numbered": layoutListNumberedIcon
+  "layout-list-numbered": layoutListNumberedIcon,
+  "clear-formatting": clearFormatting
 };
 
 // src/components/AddListButton/AddListButton.styles.ts
@@ -11198,70 +11278,20 @@ var Button = React5.forwardRef(
 var import_cg6 = require("react-icons/cg");
 
 // src/components/Menu/Menu.tsx
-var React6 = __toESM(require("react"));
+var React7 = __toESM(require("react"));
 var import_Menu = require("reakit/Menu");
 var import_Portal = require("reakit/Portal");
 
-// src/components/Menu/Menu.styles.ts
-var import_react27 = require("@emotion/react");
-var menu = import_react27.css`
-  box-shadow: var(--shadow-base);
-  border-radius: var(--rounded-base);
-  background: var(--gray-50);
-  display: flex;
-  flex-direction: column;
-  padding: var(--spacing-sm);
-  outline: none;
-  overflow: hidden;
-  position: relative;
-  z-index: var(--z-50);
-`;
-
-// src/components/Menu/Menu.tsx
-var import_jsx_runtime20 = require("@emotion/react/jsx-runtime");
-var MenuContext = React6.createContext({});
-var useMenuContext = () => {
-  return React6.useContext(MenuContext);
-};
-var Menu = ({
-  menuLabel,
-  menuTrigger,
-  placement = "auto",
-  menuItemsContainerCssClasses,
-  children,
-  forceVisible
-}) => {
-  const menuState = (0, import_Menu.useMenuState)({ placement, visible: forceVisible });
-  React6.useEffect(() => {
-    if (forceVisible !== void 0) {
-      menuState.setVisible(forceVisible);
-    }
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(MenuContext.Provider, { value: menuState, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_Menu.MenuButton, { ...menuState, ref: menuTrigger.ref, ...menuTrigger.props, children: (triggerProps) => React6.cloneElement(menuTrigger, triggerProps) }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_Portal.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      import_Menu.Menu,
-      {
-        ...menuState,
-        "aria-label": menuLabel,
-        css: [
-          menu,
-          typeof menuItemsContainerCssClasses === "object" ? menuItemsContainerCssClasses : void 0
-        ],
-        className: typeof menuItemsContainerCssClasses === "string" ? menuItemsContainerCssClasses : "",
-        children
-      }
-    ) })
-  ] });
-};
+// src/components/Menu/filterMenuSeparators.ts
+var import_react29 = __toESM(require("react"));
 
 // src/components/Menu/MenuGroup.styles.ts
-var import_react28 = require("@emotion/react");
-var MenuGroupContainer = import_react28.css`
+var import_react27 = require("@emotion/react");
+var MenuGroupContainer = import_react27.css`
   display: flex;
   flex-direction: column;
 `;
-var MenuTitle = import_react28.css`
+var MenuTitle = import_react27.css`
   color: var(--gray-400);
   font-size: var(--fs-xs);
   font-weight: var(--fw-bold);
@@ -11269,21 +11299,17 @@ var MenuTitle = import_react28.css`
 `;
 
 // src/components/Menu/MenuGroup.tsx
-var import_jsx_runtime21 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime20 = require("@emotion/react/jsx-runtime");
 var MenuGroup = ({ title, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { css: MenuGroupContainer, "data-test-id": "menu-group", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { css: MenuTitle, children: title }),
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { css: MenuGroupContainer, "data-test-id": "menu-group", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { css: MenuTitle, children: title }),
     children
   ] });
 };
 
-// src/components/Menu/MenuItem.tsx
-var React7 = __toESM(require("react"));
-var import_reakit = require("reakit");
-
 // src/components/Menu/MenuItem.styles.ts
-var import_react29 = require("@emotion/react");
-var menuItem = (textTheme) => import_react29.css`
+var import_react28 = require("@emotion/react");
+var menuItem = (textTheme) => import_react28.css`
   align-items: center;
   border: none;
   border-radius: var(--rounded-base);
@@ -11309,7 +11335,7 @@ var menuItem = (textTheme) => import_react29.css`
     outline: none;
   }
 `;
-var menuItemWithIcon = import_react29.css`
+var menuItemWithIcon = import_react28.css`
   align-items: center;
   display: flex;
   justify-content: space-between;
@@ -11321,15 +11347,120 @@ var menuItemWithIcon = import_react29.css`
     height: var(--spacing-base);
   }
 `;
-var menuItemSeparator = import_react29.css`
+var menuItemSeparator = import_react28.css`
   border-top: 1px solid var(--gray-300);
   width: 100%;
   margin-block: var(--spacing-sm);
 `;
 
-// src/components/Menu/MenuItem.tsx
+// src/components/Menu/MenuItemSeparator.tsx
+var import_jsx_runtime21 = require("@emotion/react/jsx-runtime");
+var MenuItemSeparator = () => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("hr", { css: menuItemSeparator, "data-testid": "menu-separator" });
+
+// src/components/Menu/filterMenuSeparators.ts
+function filterMenuSeparators(children, context) {
+  const currentContext = context || { lastChildWasSeparator: false, effectiveIndex: 0 };
+  if (!Array.isArray(children)) {
+    return children;
+  }
+  const filteredList = [];
+  children.forEach((child, index) => {
+    if (child === null || child === false) {
+      return;
+    }
+    const isSeparator = isMenuSeparator(child);
+    if (currentContext.effectiveIndex === 0 && isSeparator) {
+      return;
+    }
+    if (isSeparator && index === children.length - 1) {
+      return;
+    }
+    if (isSeparator && currentContext.lastChildWasSeparator) {
+      return;
+    }
+    if (isSubgroup(child)) {
+      child = {
+        ...child,
+        props: {
+          ...child.props,
+          children: filterMenuSeparators(child.props.children, currentContext)
+        }
+      };
+      filteredList.push(child);
+      return;
+    }
+    currentContext.effectiveIndex++;
+    currentContext.lastChildWasSeparator = isSeparator;
+    filteredList.push(child);
+  });
+  return filteredList;
+}
+function isSubgroup(child) {
+  return (0, import_react29.isValidElement)(child) && (child.type === import_react29.default.Fragment || child.type === MenuGroup);
+}
+function isMenuSeparator(child) {
+  return (0, import_react29.isValidElement)(child) && child.type === MenuItemSeparator;
+}
+
+// src/components/Menu/Menu.styles.ts
+var import_react30 = require("@emotion/react");
+var menu = import_react30.css`
+  box-shadow: var(--shadow-base);
+  border-radius: var(--rounded-base);
+  background: var(--gray-50);
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-sm);
+  outline: none;
+  overflow: hidden;
+  position: relative;
+  z-index: var(--z-50);
+`;
+
+// src/components/Menu/Menu.tsx
 var import_jsx_runtime22 = require("@emotion/react/jsx-runtime");
-var MenuItem = React7.forwardRef(
+var MenuContext = React7.createContext({});
+var useMenuContext = () => {
+  return React7.useContext(MenuContext);
+};
+var Menu = ({
+  menuLabel,
+  menuTrigger,
+  placement = "auto",
+  menuItemsContainerCssClasses,
+  children,
+  forceVisible,
+  disableAutoSeparatorManagement
+}) => {
+  const menuState = (0, import_Menu.useMenuState)({ placement, visible: forceVisible });
+  React7.useEffect(() => {
+    if (forceVisible !== void 0) {
+      menuState.setVisible(forceVisible);
+    }
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(MenuContext.Provider, { value: menuState, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_Menu.MenuButton, { ...menuState, ref: menuTrigger.ref, ...menuTrigger.props, children: (triggerProps) => React7.cloneElement(menuTrigger, triggerProps) }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_Portal.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      import_Menu.Menu,
+      {
+        ...menuState,
+        "aria-label": menuLabel,
+        css: [
+          menu,
+          typeof menuItemsContainerCssClasses === "object" ? menuItemsContainerCssClasses : void 0
+        ],
+        className: typeof menuItemsContainerCssClasses === "string" ? menuItemsContainerCssClasses : "",
+        children: disableAutoSeparatorManagement ? children : filterMenuSeparators(children)
+      }
+    ) })
+  ] });
+};
+
+// src/components/Menu/MenuItem.tsx
+var React8 = __toESM(require("react"));
+var import_reakit = require("reakit");
+var import_jsx_runtime23 = require("@emotion/react/jsx-runtime");
+var MenuItem = React8.forwardRef(
   ({ children, className, hideMenuOnClick = true, icon, textColor = "base", ...props }, ref) => {
     const menuState = useMenuContext();
     const resolveProps = (originalProps) => {
@@ -11345,7 +11476,7 @@ var MenuItem = React7.forwardRef(
     };
     const resolvedProps = hideMenuOnClick ? resolveProps(props) : props;
     const resolvedChildren = typeof children === "function" ? children(resolvedProps) : children;
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       import_reakit.MenuItem,
       {
         ref,
@@ -11361,20 +11492,16 @@ var MenuItem = React7.forwardRef(
   }
 );
 function renderWithIcon(children, icon) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { css: menuItemWithIcon, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { css: menuItemWithIcon, children: [
     icon,
     " ",
     children
   ] });
 }
 
-// src/components/Menu/MenuItemSeparator.tsx
-var import_jsx_runtime23 = require("@emotion/react/jsx-runtime");
-var MenuItemSeparator = () => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("hr", { css: menuItemSeparator });
-
 // src/components/ButtonWithMenu/ButtonWithMenu.styles.ts
-var import_react30 = require("@emotion/react");
-var ButtonWithMenuContainer = import_react30.css`
+var import_react31 = require("@emotion/react");
+var ButtonWithMenuContainer = import_react31.css`
   align-items: center;
   border: 1px solid transparent;
   border-radius: var(--rounded-sm);
@@ -11395,7 +11522,7 @@ var ButtonWithMenuContainer = import_react30.css`
     border-color: var(--gray-700);
   }
 `;
-var ButtonWithMenuBtn = import_react30.css`
+var ButtonWithMenuBtn = import_react31.css`
   border: 1px solid transparent;
   background: transparent;
   border-radius: var(--rounded-base);
@@ -11418,19 +11545,19 @@ var ButtonWithMenuBtn = import_react30.css`
     pointer-events: none;
   }
 `;
-var ButtonWithMenuIcon = import_react30.css`
+var ButtonWithMenuIcon = import_react31.css`
   padding: var(--spacing-sm);
   border-left: 1px solid currentColor;
 `;
-var buttonPrimary2 = import_react30.css`
+var buttonPrimary2 = import_react31.css`
   background: var(--brand-secondary-1);
   color: var(--white);
 `;
-var buttonPrimaryDisabled = import_react30.css`
+var buttonPrimaryDisabled = import_react31.css`
   background: var(--gray-300);
   color: var(--white);
 `;
-var buttonSecondary2 = import_react30.css`
+var buttonSecondary2 = import_react31.css`
   background: var(--primary-action-default);
   color: var(--white);
 
@@ -11438,17 +11565,17 @@ var buttonSecondary2 = import_react30.css`
     background: var(--primary-action-hover);
   }
 `;
-var buttonSecondaryDisabled = import_react30.css`
+var buttonSecondaryDisabled = import_react31.css`
   ${buttonPrimaryDisabled}
 `;
-var buttonUnimportant2 = import_react30.css`
+var buttonUnimportant2 = import_react31.css`
   background: var(--brand-secondary-2);
   color: var(--brand-secondary-1);
 `;
-var buttonUnimportantDisabled = import_react30.css`
+var buttonUnimportantDisabled = import_react31.css`
   ${buttonPrimaryDisabled}
 `;
-var buttonGhost2 = import_react30.css`
+var buttonGhost2 = import_react31.css`
   background: transparent;
   color: var(--brand-secondary-3);
 
@@ -11456,7 +11583,7 @@ var buttonGhost2 = import_react30.css`
     border-color: var(--brand-secondary-3);
   }
 `;
-var buttonGhostDisabled = import_react30.css`
+var buttonGhostDisabled = import_react31.css`
   border-color: var(--gray-400);
   color: var(--gray-400);
 `;
@@ -11517,18 +11644,18 @@ var ButtonWithMenu = ({
 };
 
 // src/components/Callout/Callout.tsx
-var import_react32 = require("@emotion/react");
+var import_react33 = require("@emotion/react");
 
 // src/components/Callout/Callout.styles.ts
-var import_react31 = require("@emotion/react");
-var calloutContainer = import_react31.css`
+var import_react32 = require("@emotion/react");
+var calloutContainer = import_react32.css`
   ${functionalColors}
 
   font-size: var(--fs-sm);
   border-radius: var(--rounded-base);
   padding: var(--spacing-base);
 `;
-var calloutContainerCompact = import_react31.css`
+var calloutContainerCompact = import_react32.css`
   font-size: var(--fs-xs);
   padding: var(--spacing-sm);
   border-radius: 0 var(--rounded-base) var(--rounded-base) 0;
@@ -11540,25 +11667,25 @@ var calloutContainerCompact = import_react31.css`
   --note-desc: var(--brand-secondary-1);
   --success-desc: var(--brand-secondary-1);
 `;
-var calloutInner = import_react31.css`
+var calloutInner = import_react32.css`
   display: flex;
   gap: var(--spacing-sm);
 `;
-var calloutBody = import_react31.css`
+var calloutBody = import_react32.css`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-base);
 `;
-var calloutBodyCompact = import_react31.css`
+var calloutBodyCompact = import_react32.css`
   gap: var(--spacing-xs);
 `;
-var calloutIconWrap = import_react31.css`
+var calloutIconWrap = import_react32.css`
   flex-shrink: 0;
 `;
-var calloutTitle = import_react31.css`
+var calloutTitle = import_react32.css`
   font-weight: var(--fw-bold);
 `;
-var calloutIcon = import_react31.css`
+var calloutIcon = import_react32.css`
   width: 1.25rem;
   height: 1.25rem;
 `;
@@ -11692,91 +11819,91 @@ var import_jsx_runtime26 = require("@emotion/react/jsx-runtime");
 var calloutTypeDataMap = {
   caution: {
     icon: CautionIcon,
-    descriptionColor: import_react32.css`
+    descriptionColor: import_react33.css`
       color: var(--caution-desc);
     `,
-    iconColor: import_react32.css`
+    iconColor: import_react33.css`
       color: var(--caution-icon);
     `,
-    containerStyles: import_react32.css`
+    containerStyles: import_react33.css`
       color: var(--caution-title);
       background-color: var(--caution-container);
     `
   },
   danger: {
     icon: DangerIcon,
-    descriptionColor: import_react32.css`
+    descriptionColor: import_react33.css`
       color: var(--danger-desc);
     `,
-    iconColor: import_react32.css`
+    iconColor: import_react33.css`
       color: var(--danger-icon);
     `,
-    containerStyles: import_react32.css`
+    containerStyles: import_react33.css`
       color: var(--danger-title);
       background-color: var(--danger-container);
     `
   },
   error: {
     icon: CautionIcon,
-    descriptionColor: import_react32.css`
+    descriptionColor: import_react33.css`
       color: var(--danger-desc);
     `,
-    iconColor: import_react32.css`
+    iconColor: import_react33.css`
       color: var(--danger-icon);
     `,
-    containerStyles: import_react32.css`
+    containerStyles: import_react33.css`
       color: var(--danger-title);
       background-color: var(--danger-container);
     `
   },
   info: {
     icon: InfoIcon,
-    descriptionColor: import_react32.css`
+    descriptionColor: import_react33.css`
       color: var(--info-desc);
     `,
-    iconColor: import_react32.css`
+    iconColor: import_react33.css`
       color: var(--info-icon);
     `,
-    containerStyles: import_react32.css`
+    containerStyles: import_react33.css`
       color: var(--info-title);
       background-color: var(--info-container);
     `
   },
   note: {
     icon: NoteIcon,
-    descriptionColor: import_react32.css`
+    descriptionColor: import_react33.css`
       color: var(--note-desc);
     `,
-    iconColor: import_react32.css`
+    iconColor: import_react33.css`
       color: var(--note-icon);
     `,
-    containerStyles: import_react32.css`
+    containerStyles: import_react33.css`
       color: var(--note-title);
       background-color: var(--note-container);
     `
   },
   success: {
     icon: SuccessIcon,
-    descriptionColor: import_react32.css`
+    descriptionColor: import_react33.css`
       color: var(--success-desc);
     `,
-    iconColor: import_react32.css`
+    iconColor: import_react33.css`
       color: var(--success-icon);
     `,
-    containerStyles: import_react32.css`
+    containerStyles: import_react33.css`
       color: var(--success-title);
       background-color: var(--success-container);
     `
   },
   tip: {
     icon: TipIcon,
-    descriptionColor: import_react32.css`
+    descriptionColor: import_react33.css`
       color: var(--success-desc);
     `,
-    iconColor: import_react32.css`
+    iconColor: import_react33.css`
       color: var(--success-icon);
     `,
-    containerStyles: import_react32.css`
+    containerStyles: import_react33.css`
       color: var(--success-title);
       background-color: var(--success-container);
     `
@@ -11821,8 +11948,8 @@ var Callout = ({
 var import_cg7 = require("react-icons/cg");
 
 // src/components/Card/Card.styles.ts
-var import_react33 = require("@emotion/react");
-var CardContainer = import_react33.css`
+var import_react34 = require("@emotion/react");
+var CardContainer = import_react34.css`
   background: var(--white);
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
@@ -11835,7 +11962,7 @@ var CardContainer = import_react33.css`
     background: var(--gray-50);
   }
 `;
-var CardTitle = (marginBottom) => import_react33.css`
+var CardTitle = (marginBottom) => import_react34.css`
   display: flex;
   margin: ${marginBottom ? "0 0 var(--spacing-base)" : "0"};
   padding-right: var(--spacing-lg);
@@ -11843,7 +11970,7 @@ var CardTitle = (marginBottom) => import_react33.css`
   gap: var(--spacing-xs);
   font-weight: var(--fw-regular);
 `;
-var CardMenu = import_react33.css`
+var CardMenu = import_react34.css`
   align-items: center;
   background: transparent;
   color: var(--gray-300);
@@ -11906,12 +12033,12 @@ var CardTitle2 = ({ title, titleWithMarginBottom, children }) => {
 };
 
 // src/components/Card/CardContainer.styles.ts
-var import_react34 = require("@emotion/react");
-var CardContainerWrapper = (bgColor) => import_react34.css`
+var import_react35 = require("@emotion/react");
+var CardContainerWrapper = (bgColor) => import_react35.css`
   background: ${bgColor === "gray" ? `var(--gray-50)` : `var(--white)`};
   container-type: inline-size;
 `;
-var CardContainerInner = ({ padding, withLastColumn }) => import_react34.css`
+var CardContainerInner = ({ padding, withLastColumn }) => import_react35.css`
   display: grid;
   gap: var(--spacing-lg);
   max-width: var(--site-width);
@@ -11940,8 +12067,8 @@ var CardContainer2 = ({
 var import_cg8 = require("react-icons/cg");
 
 // src/components/Layout/styles/Container.styles.ts
-var import_react35 = require("@emotion/react");
-var Container = ({ backgroundColor, border, rounded, padding, margin }) => import_react35.css`
+var import_react36 = require("@emotion/react");
+var Container = ({ backgroundColor, border, rounded, padding, margin }) => import_react36.css`
   background: var(--${backgroundColor});
   ${border ? "border: 1px solid var(--gray-300)" : void 0};
   ${rounded ? `border-radius: var(--${rounded})` : void 0};
@@ -11979,11 +12106,11 @@ var Container2 = ({
 };
 
 // src/components/Layout/HorizontalRhythm.tsx
-var import_react37 = require("@emotion/react");
+var import_react38 = require("@emotion/react");
 
 // src/components/Layout/styles/HorizontalRhythm.styles.ts
-var import_react36 = require("@emotion/react");
-var HorizontalRhythmContainer = (size) => import_react36.css`
+var import_react37 = require("@emotion/react");
+var HorizontalRhythmContainer = (size) => import_react37.css`
   display: flex;
   gap: var(--spacing-${size});
 `;
@@ -11997,7 +12124,7 @@ var HorizontalRhythm = ({ align, tag = "div", gap = "base", children, ...props }
     {
       css: [
         HorizontalRhythmContainer(gap),
-        align ? import_react37.css`
+        align ? import_react38.css`
               align-items: ${align};
             ` : void 0
       ],
@@ -12008,11 +12135,11 @@ var HorizontalRhythm = ({ align, tag = "div", gap = "base", children, ...props }
 };
 
 // src/components/Layout/styles/TwoColumnLayout.styles.ts
-var import_react38 = require("@emotion/react");
-var TwoColumnLayoutContainer = (bgColor) => import_react38.css`
+var import_react39 = require("@emotion/react");
+var TwoColumnLayoutContainer = (bgColor) => import_react39.css`
   background: ${bgColor};
 `;
-var TwoColumnLayoutInner = (invertLayout) => import_react38.css`
+var TwoColumnLayoutInner = (invertLayout) => import_react39.css`
   display: grid;
   max-width: var(--site-width);
   margin-inline: auto;
@@ -12028,8 +12155,8 @@ var TwoColumnLayoutInner = (invertLayout) => import_react38.css`
     }`}
   }
 `;
-var TwoColumnLayoutMain = import_react38.css``;
-var TwoColumnLayoutSupporting = import_react38.css`
+var TwoColumnLayoutMain = import_react39.css``;
+var TwoColumnLayoutSupporting = import_react39.css`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-lg);
@@ -12050,11 +12177,11 @@ var TwoColumnLayout = ({
 };
 
 // src/components/Layout/VerticalRhythm.tsx
-var import_react40 = require("@emotion/react");
+var import_react41 = require("@emotion/react");
 
 // src/components/Layout/styles/VerticalRhythm.styles.ts
-var import_react39 = require("@emotion/react");
-var VerticalRhythmContainer = (size) => import_react39.css`
+var import_react40 = require("@emotion/react");
+var VerticalRhythmContainer = (size) => import_react40.css`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-${size});
@@ -12069,7 +12196,7 @@ var VerticalRhythm = ({ align, tag = "div", gap = "base", children, ...props })
     {
       css: [
         VerticalRhythmContainer(gap),
-        align ? import_react40.css`
+        align ? import_react41.css`
               align-items: ${align};
             ` : void 0
       ],
@@ -12080,8 +12207,8 @@ var VerticalRhythm = ({ align, tag = "div", gap = "base", children, ...props })
 };
 
 // src/components/Card/LoadingCardSkeleton.styles.ts
-var import_react41 = require("@emotion/react");
-var LoadingCardSkeleton = import_react41.css`
+var import_react42 = require("@emotion/react");
+var LoadingCardSkeleton = import_react42.css`
   animation: ${skeletonLoading} 1s linear infinite alternate;
   color: var(--gray-400);
   border-radius: var(--rounded-base);
@@ -12089,21 +12216,21 @@ var LoadingCardSkeleton = import_react41.css`
   min-height: 160px;
   position: relative;
 `;
-var LoadingText = import_react41.css`
+var LoadingText = import_react42.css`
   animation: ${fadeIn} 1s linear infinite alternate;
   border-radius: var(--rounded-base);
   background: var(--gray-300);
   display: block;
 `;
-var LoadingTitle = import_react41.css`
+var LoadingTitle = import_react42.css`
   width: clamp(200px, 100vw, 60%);
   height: var(--spacing-md);
 `;
-var LoadingTimeStamp = import_react41.css`
+var LoadingTimeStamp = import_react42.css`
   width: clamp(200px, 100vw, 30%);
   height: var(--spacing-sm);
 `;
-var LoadingMenuIcon = import_react41.css`
+var LoadingMenuIcon = import_react42.css`
   animation: ${fadeIn} 1s linear infinite alternate;
   position: absolute;
   top: var(--spacing-md);
@@ -12124,17 +12251,19 @@ var LoadingCardSkeleton2 = () => {
 var import_cg9 = require("react-icons/cg");
 
 // src/components/Chip/Chip.styles.ts
-var import_react42 = require("@emotion/react");
-var ChipContainer = import_react42.css`
+var import_react43 = require("@emotion/react");
+var ChipContainer = import_react43.css`
   border-radius: var(--rounded-full);
   background: lime;
-  cursor: pointer;
   display: inline-flex;
-  gap: var(--spacing-sm);
   transition: background var(--duration-fast) var(--timing-ease-out),
     color var(--duration-fast) var(--timing-ease-out);
   position: relative;
 
+  [role='button'] {
+    cursor: pointer;
+  }
+
   &:hover {
     [role='presentation'],
     [role='separator'] {
@@ -12143,150 +12272,166 @@ var ChipContainer = import_react42.css`
     }
   }
 `;
-var ChipText = import_react42.css`
+var ChipText = import_react43.css`
+  align-self: center;
   line-height: 1;
 `;
-var ChipIcon = import_react42.css`
-  align-items: center;
+var ChipIcon = import_react43.css`
+  align-self: center;
+  justify-content: center;
   display: flex;
   opacity: var(--opacity-50);
 `;
-var ChipSeparator = import_react42.css`
+var ChipSeparator = import_react43.css`
   display: flex;
   border-right: 1px solid var(--white);
   opacity: var(--opacity-50);
+  margin-left: -1px;
 `;
-var ChipTiny = import_react42.css`
+var ChipTiny = (withIcon) => import_react43.css`
   font-size: var(--fs-xs);
-  padding-inline: var(--spacing-sm);
+  padding-inline: ${withIcon ? "calc(var(--spacing-2xs) + 2px) var(--spacing-sm)" : "var(--spacing-sm)"};
+  gap: var(--spacing-2xs);
 
   > :where(span:last-of-type) {
-    padding-block: var(--spacing-xs);
+    padding: var(--spacing-xs) var(--spacing-xs);
   }
 `;
-var ChipSmall = import_react42.css`
+var ChipSmall = import_react43.css`
   font-size: var(--fs-sm);
-  padding-inline: var(--spacing-base);
+  padding-inline: var(--spacing-sm);
+  gap: var(--spacing-xs);
 
   > :where(span:last-of-type) {
-    padding-block: var(--spacing-sm);
+    padding: var(--spacing-sm) var(--spacing-xs);
   }
 `;
-var ChipMedium = import_react42.css`
+var ChipMedium = import_react43.css`
   font-size: var(--fs-base);
-  padding-inline: var(--spacing-base);
+  padding-inline: var(--spacing-sm);
+  gap: var(--spacing-xs);
 
   > :where(span:last-of-type) {
-    padding-block: var(--spacing-sm);
+    padding: var(--spacing-sm) var(--spacing-xs);
   }
 `;
-var ChipThemeAccentLight = import_react42.css`
+var ChipThemeAccentLight = import_react43.css`
   background: var(--accent-light);
   color: var(--brand-secondary-1);
 
-  &:hover,
-  &:focus {
-    background: var(--accent-light-hover);
-  }
+  :where([role='button']) {
+    &:hover,
+    &:focus {
+      background: var(--accent-light-hover);
+    }
 
-  &:active {
-    background: var(--accent-light-active);
-  }
+    &:active {
+      background: var(--accent-light-active);
+    }
 
-  &:hover,
-  &:focus,
-  &:active {
-    color: var(--white);
+    &:hover,
+    &:focus,
+    &:active {
+      color: var(--white);
+    }
   }
 
   [data-icon] {
     color: var(--accent-light);
   }
 `;
-var ChipThemeAccentDark = import_react42.css`
+var ChipThemeAccentDark = import_react43.css`
   background: var(--accent-dark);
   color: var(--white);
 
-  &:hover,
-  &:focus {
-    background: var(--accent-dark-hover);
-  }
+  :where([role='button']) {
+    &:hover,
+    &:focus {
+      background: var(--accent-dark-hover);
+    }
 
-  &:active {
-    background: var(--accent-dark-active);
-  }
+    &:active {
+      background: var(--accent-dark-active);
+    }
 
-  &:hover,
-  &:focus,
-  &:active {
-    color: var(--white);
+    &:hover,
+    &:focus,
+    &:active {
+      color: var(--white);
+    }
   }
 `;
-var ChipAltThemeAccentLight = import_react42.css`
+var ChipAltThemeAccentLight = import_react43.css`
   background: var(--accent-alt-light);
   color: var(--brand-secondary-1);
 
-  &:hover,
-  &:focus {
-    background: var(--accent-alt-light-hover);
-  }
+  :where([role='button']) {
+    &:hover,
+    &:focus {
+      background: var(--accent-alt-light-hover);
+    }
 
-  &:active {
-    background: var(--accent-alt-light-active);
-  }
+    &:active {
+      background: var(--accent-alt-light-active);
+    }
 
-  &:hover,
-  &:focus,
-  &:active {
-    color: var(--white);
+    &:hover,
+    &:focus,
+    &:active {
+      color: var(--white);
+    }
   }
 
   [data-icon] {
     color: var(--accent-alt-light);
   }
 `;
-var ChipAltThemeAccentDark = import_react42.css`
+var ChipAltThemeAccentDark = import_react43.css`
   background: var(--accent-alt-dark);
   color: var(--white);
 
-  &:hover,
-  &:focus {
-    background: var(--accent-alt-dark-hover);
-  }
+  :where([role='button']) {
+    &:hover,
+    &:focus {
+      background: var(--accent-alt-dark-hover);
+    }
 
-  &:active {
-    background: var(--accent-alt-dark-active);
-  }
+    &:active {
+      background: var(--accent-alt-dark-active);
+    }
 
-  &:hover,
-  &:focus,
-  &:active {
-    color: var(--white);
+    &:hover,
+    &:focus,
+    &:active {
+      color: var(--white);
+    }
   }
 `;
-var ChipThemeNeutralLight = import_react42.css`
+var ChipThemeNeutralLight = import_react43.css`
   background: var(--gray-100);
   color: var(--brand-secondary-1);
-
-  &:active,
-  &:focus {
-    background: var(--gray-400);
+  :where([role='button']) {
+    &:active,
+    &:focus {
+      background: var(--gray-400);
+    }
   }
 `;
-var ChipThemeNeutralDark = import_react42.css`
+var ChipThemeNeutralDark = import_react43.css`
   background: var(--gray-700);
   color: var(--white);
+  :where([role='button']) {
+    &:hover,
+    &:focus {
+      background: var(--gray-600);
+    }
 
-  &:hover,
-  &:focus {
-    background: var(--gray-600);
-  }
-
-  &:active {
-    background: var(--gray-900);
+    &:active {
+      background: var(--gray-900);
+    }
   }
 `;
-var ChipActionButton = import_react42.css`
+var ChipActionButton = import_react43.css`
   background: transparent;
   border: none;
   border-radius: 0 var(--rounded-full) var(--rounded-full) 0;
@@ -12304,7 +12449,7 @@ var Chip = ({
   ...props
 }) => {
   const chipSize = {
-    xs: ChipTiny,
+    xs: ChipTiny(Boolean(icon)),
     sm: ChipSmall,
     md: ChipMedium
   };
@@ -12318,7 +12463,7 @@ var Chip = ({
   };
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { css: [ChipContainer, chipSize[size], chipTheme[theme]], ...props, children: [
     icon ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { role: "presentation", css: ChipIcon, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { icon, iconColor: "currentColor", size: "0.85rem" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { role: "presentation", css: [ChipIcon], children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { icon, iconColor: "currentColor", size: "1rem" }) }),
       /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { role: "separator", css: ChipSeparator })
     ] }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { css: ChipText, children: text }),
@@ -12340,8 +12485,8 @@ var DismissibleChipAction = ({ onDismiss, ...props }) => {
 };
 
 // src/components/Counter/Counter.styles.ts
-var import_react43 = require("@emotion/react");
-var counterContainer = (bgColor) => import_react43.css`
+var import_react44 = require("@emotion/react");
+var counterContainer = (bgColor) => import_react44.css`
   align-items: center;
   border-radius: var(--rounded-full);
   border: 1px solid var(--gray-300);
@@ -12354,16 +12499,16 @@ var counterContainer = (bgColor) => import_react43.css`
   width: var(--spacing-base);
   height: var(--spacing-base);
 `;
-var counterZeroValue = import_react43.css`
+var counterZeroValue = import_react44.css`
   background: var(--brand-secondary-1);
   border-radius: var(--rounded-full);
   width: 2px;
   height: 2px;
 `;
-var counterTripleValue = import_react43.css`
+var counterTripleValue = import_react44.css`
   position: relative;
 `;
-var counterIcon = import_react43.css`
+var counterIcon = import_react44.css`
   border-radius: var(--rounded-full);
   background: var(--white);
   color: var(--brand-secondary-3);
@@ -12388,7 +12533,7 @@ var Counter = ({ count, bgColor = "transparent", ...props }) => {
 };
 
 // src/components/DashedBox/DashedBox.styles.ts
-var import_react44 = require("@emotion/react");
+var import_react45 = require("@emotion/react");
 var minHeight = (prop) => {
   const values = {
     auto: "auto",
@@ -12407,7 +12552,7 @@ var alignItemsConvert = (props) => {
   };
   return alignment[props];
 };
-var DashedBoxContainer = ({ textAlign, boxHeight, bgColor }) => import_react44.css`
+var DashedBoxContainer = ({ textAlign, boxHeight, bgColor }) => import_react45.css`
   align-items: ${alignItemsConvert(textAlign)};
   border: 2px dashed var(--gray-300);
   border-radius: var(--rounded-base);
@@ -12434,11 +12579,11 @@ var DashedBox = ({
 };
 
 // src/components/Details/Details.tsx
-var React8 = __toESM(require("react"));
+var React9 = __toESM(require("react"));
 
 // src/components/Details/Details.styles.ts
-var import_react45 = require("@emotion/react");
-var details = import_react45.css`
+var import_react46 = require("@emotion/react");
+var details = import_react46.css`
   cursor: pointer;
   &[open] {
     & > summary svg {
@@ -12446,11 +12591,11 @@ var details = import_react45.css`
     }
   }
 `;
-var detailsContent = import_react45.css`
+var detailsContent = import_react46.css`
   animation: ${fadeInRtl} var(--duration-fast) var(--timing-ease-out) forwards;
   will-change: height;
 `;
-var summary = import_react45.css`
+var summary = import_react46.css`
   align-items: center;
   display: grid;
   grid-template-columns: 1.25rem 1fr;
@@ -12463,20 +12608,20 @@ var summary = import_react45.css`
     display: none;
   }
 `;
-var summaryIcon = import_react45.css`
+var summaryIcon = import_react46.css`
   transition: rotate var(--duration-fast) var(--timing-ease-out);
   rotate: -90deg;
 `;
-var summaryIconVisiblyHidden = import_react45.css`
+var summaryIconVisiblyHidden = import_react46.css`
   visibility: hidden;
 `;
 
 // src/components/Details/Details.tsx
 var import_jsx_runtime37 = require("@emotion/react/jsx-runtime");
 var Details = ({ summary: summary2, children, isOpenByDefault = false, ...props }) => {
-  const detailsRef = React8.useRef(null);
-  const [open, setOpen] = React8.useState(isOpenByDefault);
-  React8.useEffect(() => {
+  const detailsRef = React9.useRef(null);
+  const [open, setOpen] = React9.useState(isOpenByDefault);
+  React9.useEffect(() => {
     var _a;
     if (!detailsRef) {
       return;
@@ -12510,12 +12655,12 @@ var Details = ({ summary: summary2, children, isOpenByDefault = false, ...props
 };
 
 // src/components/Drawer/Drawer.tsx
-var import_react49 = __toESM(require("react"));
+var import_react50 = __toESM(require("react"));
 var import_cg10 = require("react-icons/cg");
 
 // src/components/Drawer/Drawer.styles.ts
-var import_react46 = require("@emotion/react");
-var drawerStyles = (bgColor = "var(--white)") => import_react46.css`
+var import_react47 = require("@emotion/react");
+var drawerStyles = (bgColor = "var(--white)") => import_react47.css`
   background-color: ${bgColor};
   display: flex;
   gap: var(--spacing-sm);
@@ -12525,7 +12670,7 @@ var drawerStyles = (bgColor = "var(--white)") => import_react46.css`
   padding-top: var(--spacing-sm);
   height: 100%;
 `;
-var drawerCloseButtonStyles = import_react46.css`
+var drawerCloseButtonStyles = import_react47.css`
   align-self: flex-end;
   background: transparent;
   border: none;
@@ -12533,23 +12678,23 @@ var drawerCloseButtonStyles = import_react46.css`
   padding: var(--spacing-xs);
   margin-right: var(--spacing-sm);
 `;
-var drawerHeaderStyles = import_react46.css`
+var drawerHeaderStyles = import_react47.css`
   font-size: var(--fs-lg);
   font-weight: var(--fw-bold);
   padding-inline: var(--spacing-base);
 `;
-var drawerRendererStyles = import_react46.css`
+var drawerRendererStyles = import_react47.css`
   inset: 0;
   overflow: hidden;
   z-index: var(--z-drawer);
 `;
-var drawerInnerStyles = import_react46.css`
+var drawerInnerStyles = import_react47.css`
   height: 100%;
   padding: 0 var(--spacing-base) var(--spacing-base);
   overflow: auto;
   ${scrollbarStyles}
 `;
-var slideDrawerIn = import_react46.keyframes`
+var slideDrawerIn = import_react47.keyframes`
 0% {
   transform: translate(0);
   opacity: 0;
@@ -12564,7 +12709,7 @@ var slideDrawerIn = import_react46.keyframes`
   transform: translate(0);
 }
 `;
-var drawerWrapperStyles = import_react46.css`
+var drawerWrapperStyles = import_react47.css`
   position: absolute;
   inset-block: 0;
   right: 0;
@@ -12575,7 +12720,7 @@ var drawerWrapperStyles = import_react46.css`
   transition: width var(--duration-fast) ease-out;
   box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
 `;
-var drawerWrapperOverlayStyles = import_react46.css`
+var drawerWrapperOverlayStyles = import_react47.css`
   position: absolute;
   inset: 0;
   background: rgba(31, 43, 52, 0.4);
@@ -12583,9 +12728,9 @@ var drawerWrapperOverlayStyles = import_react46.css`
 `;
 
 // src/components/Drawer/DrawerProvider.tsx
-var import_react47 = require("react");
+var import_react48 = require("react");
 var import_jsx_runtime38 = require("@emotion/react/jsx-runtime");
-var DrawerContext = (0, import_react47.createContext)({
+var DrawerContext = (0, import_react48.createContext)({
   drawersRegistry: [],
   registerDrawer: () => {
   },
@@ -12593,7 +12738,7 @@ var DrawerContext = (0, import_react47.createContext)({
   }
 });
 var DrawerProvider = ({ children }) => {
-  const [drawersRegistry, setDrawersRegistry] = (0, import_react47.useState)([]);
+  const [drawersRegistry, setDrawersRegistry] = (0, import_react48.useState)([]);
   useShortcut({
     handler: () => {
       var _a, _b;
@@ -12601,7 +12746,7 @@ var DrawerProvider = ({ children }) => {
     },
     shortcut: "escape"
   });
-  const registerDrawer = (0, import_react47.useCallback)(
+  const registerDrawer = (0, import_react48.useCallback)(
     ({ drawer, onFirstRender }) => {
       setDrawersRegistry((currentValue) => {
         var _a;
@@ -12623,7 +12768,7 @@ var DrawerProvider = ({ children }) => {
     },
     [setDrawersRegistry]
   );
-  const unregisterDrawer = (0, import_react47.useCallback)(
+  const unregisterDrawer = (0, import_react48.useCallback)(
     (drawer) => {
       setDrawersRegistry((currentValue) => {
         return currentValue.filter((d) => {
@@ -12636,7 +12781,7 @@ var DrawerProvider = ({ children }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DrawerContext.Provider, { value: { drawersRegistry, registerDrawer, unregisterDrawer }, children });
 };
 var useDrawer = () => {
-  return (0, import_react47.useContext)(DrawerContext);
+  return (0, import_react48.useContext)(DrawerContext);
 };
 var useCloseCurrentDrawer = () => {
   const context = useDrawer();
@@ -12653,13 +12798,13 @@ function isEqualDrawerInstance(a, b) {
 }
 
 // src/components/Drawer/DrawerRenderer.tsx
-var import_react48 = require("react");
+var import_react49 = require("react");
 var import_jsx_runtime39 = require("@emotion/react/jsx-runtime");
 var maxLayeringInPx = 64;
 var idealDistanceBetweenLayersInPx = 16;
-var CurrentDrawerRendererContext = (0, import_react48.createContext)({});
+var CurrentDrawerRendererContext = (0, import_react49.createContext)({});
 var useCurrentDrawerRenderer = () => {
-  return (0, import_react48.useContext)(CurrentDrawerRendererContext);
+  return (0, import_react49.useContext)(CurrentDrawerRendererContext);
 };
 var DrawerRenderer = ({
   stackId,
@@ -12723,7 +12868,7 @@ var DrawerWrapper = ({
 // src/components/Drawer/Drawer.tsx
 var import_jsx_runtime40 = require("@emotion/react/jsx-runtime");
 var defaultSackId = "_default";
-var Drawer = import_react49.default.forwardRef(
+var Drawer = import_react50.default.forwardRef(
   ({ width, minWidth, maxWidth, position, ...drawerProps }, ref) => {
     const drawerRendererProps = { width, minWidth, maxWidth, position };
     const { stackId: inheritedStackId } = useCurrentDrawerRenderer();
@@ -12745,8 +12890,8 @@ var DrawerInner = ({
   testId = "side-dialog"
 }) => {
   const { registerDrawer, unregisterDrawer } = useDrawer();
-  const closeButtonRef = (0, import_react49.useRef)(null);
-  const component = (0, import_react49.useMemo)(() => {
+  const closeButtonRef = (0, import_react50.useRef)(null);
+  const component = (0, import_react50.useMemo)(() => {
     const headerId = `dialog-header-${stackId}-${id}`;
     return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
       "div",
@@ -12777,7 +12922,7 @@ var DrawerInner = ({
       }
     );
   }, [children, header, id, stackId, bgColor, onRequestClose, ref, testId]);
-  (0, import_react49.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     registerDrawer({
       drawer: {
         id,
@@ -12794,15 +12939,15 @@ var DrawerInner = ({
       }
     });
   }, [component, instanceKey, registerDrawer]);
-  (0, import_react49.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     return () => unregisterDrawer({ id, stackId, instanceKey });
   }, [id, stackId, instanceKey, unregisterDrawer]);
   return null;
 };
 
 // src/components/Input/styles/CaptionText.styles.ts
-var import_react50 = require("@emotion/react");
-var CaptionText = (dynamicSize) => import_react50.css`
+var import_react51 = require("@emotion/react");
+var CaptionText = (dynamicSize) => import_react51.css`
   color: var(--gray-500);
   display: block;
   font-size: ${dynamicSize ? "clamp(var(--fs-xs), 87.5%,var(--fs-sm))" : "var(--fs-sm)"};
@@ -12817,23 +12962,23 @@ var Caption = ({ children, testId, dynamicSize = false, ...props }) => {
 };
 
 // src/components/Input/CheckboxWithInfo.tsx
-var import_react52 = require("react");
+var import_react53 = require("react");
 
 // src/components/Input/styles/CheckboxWithInfo.styles.ts
-var import_react51 = require("@emotion/react");
-var CheckboxWithInfoContainer = import_react51.css`
+var import_react52 = require("@emotion/react");
+var CheckboxWithInfoContainer = import_react52.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var CheckboxWithInfoLabel = import_react51.css`
+var CheckboxWithInfoLabel = import_react52.css`
   align-items: center;
   color: var(--gray-500);
   display: flex;
   font-size: var(--fs-xs);
   gap: var(--spacing-sm);
 `;
-var CheckboxWithInfoInput = import_react51.css`
+var CheckboxWithInfoInput = import_react52.css`
   appearance: none;
   border: 1px solid var(--gray-300);
   background: var(--white) no-repeat bottom center;
@@ -12866,7 +13011,7 @@ var CheckboxWithInfoInput = import_react51.css`
     border-color: var(--gray-200);
   }
 `;
-var InfoDialogContainer = import_react51.css`
+var InfoDialogContainer = import_react52.css`
   position: relative;
 
   &:hover {
@@ -12875,7 +13020,7 @@ var InfoDialogContainer = import_react51.css`
     }
   }
 `;
-var InfoDialogMessage = import_react51.css`
+var InfoDialogMessage = import_react52.css`
   background: var(--white);
   box-shadow: var(--shadow-base);
   border-radius: var(--rounded-md);
@@ -12899,7 +13044,7 @@ var InfoDialog = ({ message }) => {
     /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { role: "paragraph", css: InfoDialogMessage, className: "info-message", children: message })
   ] });
 };
-var CheckboxWithInfo = (0, import_react52.forwardRef)(
+var CheckboxWithInfo = (0, import_react53.forwardRef)(
   ({ label, name, info, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { css: CheckboxWithInfoContainer, children: [
       /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("label", { css: CheckboxWithInfoLabel, children: [
@@ -12915,8 +13060,8 @@ var CheckboxWithInfo = (0, import_react52.forwardRef)(
 var import_md2 = require("react-icons/md");
 
 // src/components/Input/styles/ErrorMessage.styles.ts
-var import_react53 = require("@emotion/react");
-var ErrorText = import_react53.css`
+var import_react54 = require("@emotion/react");
+var ErrorText = import_react54.css`
   align-items: center;
   color: var(--brand-secondary-5);
   display: flex;
@@ -12933,12 +13078,12 @@ var ErrorMessage = ({ message, testId, ...otherProps }) => {
 };
 
 // src/components/Input/Fieldset.tsx
-var React12 = __toESM(require("react"));
+var React13 = __toESM(require("react"));
 
 // src/components/Input/styles/Fieldset.styles.ts
-var import_react54 = require("@emotion/react");
+var import_react55 = require("@emotion/react");
 function fieldsetContainer(invert) {
-  const base = import_react54.css`
+  const base = import_react55.css`
     border-radius: var(--rounded-base);
     border: 1px solid var(--gray-300);
 
@@ -12950,18 +13095,18 @@ function fieldsetContainer(invert) {
     }
   `;
   return invert ? [
-    import_react54.css`
+    import_react55.css`
           background: white;
         `,
     base
   ] : [
-    import_react54.css`
+    import_react55.css`
           background: var(--gray-50);
         `,
     base
   ];
 }
-var fieldsetLegend = import_react54.css`
+var fieldsetLegend = import_react55.css`
   align-items: center;
   color: var(--brand-secondary-1);
   display: flex;
@@ -12971,13 +13116,13 @@ var fieldsetLegend = import_react54.css`
   margin-bottom: var(--spacing-base);
   float: left; // allows the legend to be inside the fieldset and not sat on the border line
 `;
-var fieldsetBody = import_react54.css`
+var fieldsetBody = import_react55.css`
   clear: left;
 `;
 
 // src/components/Input/Fieldset.tsx
 var import_jsx_runtime44 = require("@emotion/react/jsx-runtime");
-var Fieldset = React12.forwardRef(
+var Fieldset = React13.forwardRef(
   ({ legend, disabled, children, invert, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("fieldset", { css: fieldsetContainer(Boolean(invert)), ref, disabled, ...props, children: [
       legend,
@@ -12990,8 +13135,8 @@ var Fieldset = React12.forwardRef(
 var import_md3 = require("react-icons/md");
 
 // src/components/Input/styles/InfoMessage.styles.tsx
-var import_react55 = require("@emotion/react");
-var InfoText = import_react55.css`
+var import_react56 = require("@emotion/react");
+var InfoText = import_react56.css`
   --info-desc: rgb(29, 78, 216);
   --info-icon: rgb(96, 165, 250);
 
@@ -13000,7 +13145,7 @@ var InfoText = import_react55.css`
   display: flex;
   gap: var(--spacing-sm);
 `;
-var InfoIcon2 = import_react55.css`
+var InfoIcon2 = import_react56.css`
   color: var(--info-icon);
 `;
 
@@ -13014,7 +13159,7 @@ var InfoMessage = ({ message, testId, ...props }) => {
 };
 
 // src/components/Input/Input.tsx
-var React13 = __toESM(require("react"));
+var React14 = __toESM(require("react"));
 
 // src/components/Input/Label.tsx
 var import_jsx_runtime46 = require("@emotion/react/jsx-runtime");
@@ -13035,14 +13180,14 @@ var Label = ({ children, className, testId, ...props }) => {
 var import_md4 = require("react-icons/md");
 
 // src/components/Input/styles/WarningMessage.styles.tsx
-var import_react56 = require("@emotion/react");
-var WarningText = import_react56.css`
+var import_react57 = require("@emotion/react");
+var WarningText = import_react57.css`
   align-items: center;
   color: var(--alert-text);
   display: flex;
   gap: var(--spacing-sm);
 `;
-var WarningIcon = import_react56.css`
+var WarningIcon = import_react57.css`
   color: var(--alert);
 `;
 
@@ -13057,7 +13202,7 @@ var WarningMessage = ({ message, testId, ...props }) => {
 
 // src/components/Input/Input.tsx
 var import_jsx_runtime48 = require("@emotion/react/jsx-runtime");
-var Input = React13.forwardRef(
+var Input = React14.forwardRef(
   ({
     label,
     icon,
@@ -13253,17 +13398,17 @@ function InputComboBox(props) {
 }
 
 // src/components/Input/InputInlineSelect.tsx
-var import_react58 = require("@emotion/react");
-var import_react59 = require("react");
+var import_react59 = require("@emotion/react");
+var import_react60 = require("react");
 var import_cg11 = require("react-icons/cg");
 
 // src/components/Input/styles/InputInlineSelect.styles.ts
-var import_react57 = require("@emotion/react");
-var inlineSelectContainer = import_react57.css`
+var import_react58 = require("@emotion/react");
+var inlineSelectContainer = import_react58.css`
   margin-inline: auto;
   max-width: fit-content;
 `;
-var inlineSelectBtn = import_react57.css`
+var inlineSelectBtn = import_react58.css`
   align-items: center;
   background: var(--brand-secondary-3);
   border: 2px solid var(--brand-secondary-3);
@@ -13287,7 +13432,7 @@ var inlineSelectBtn = import_react57.css`
     outline: 2px solid var(--brand-secondary-1);
   }
 `;
-var inlineSelectMenu = import_react57.css`
+var inlineSelectMenu = import_react58.css`
   background: var(--white);
   border: 1px solid var(--brand-secondary-3);
   border-top: none;
@@ -13298,7 +13443,7 @@ var inlineSelectMenu = import_react57.css`
   inset: auto 0;
   transform: translateY(-0.2rem);
 `;
-var inlineSelectBtnOptions = import_react57.css`
+var inlineSelectBtnOptions = import_react58.css`
   cursor: pointer;
   display: block;
   font-size: var(--fs-sm);
@@ -13314,7 +13459,7 @@ var inlineSelectBtnOptions = import_react57.css`
     background: var(--gray-50);
   }
 `;
-var inlineSelectMenuClosed = import_react57.css`
+var inlineSelectMenuClosed = import_react58.css`
   position: absolute;
   overflow: hidden;
   height: 1px;
@@ -13334,15 +13479,15 @@ var InputInlineSelect = ({
   ...props
 }) => {
   var _a;
-  const [menuVisible, setMenuVisible] = (0, import_react59.useState)(false);
-  const divRef = (0, import_react59.useRef)(null);
+  const [menuVisible, setMenuVisible] = (0, import_react60.useState)(false);
+  const divRef = (0, import_react60.useRef)(null);
   useOutsideClick(divRef, () => setMenuVisible(false));
   const selected = options.find((option) => option.value === value);
   return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
     "div",
     {
       ref: divRef,
-      css: !classNameContainer ? inlineSelectContainer : import_react58.css`
+      css: !classNameContainer ? inlineSelectContainer : import_react59.css`
               max-width: fit-content;
               ${typeof classNameContainer === "object" ? classNameContainer : void 0}
             `,
@@ -13495,9 +13640,9 @@ var InputSelect = ({
 };
 
 // src/components/Input/InputToggle.tsx
-var React14 = __toESM(require("react"));
+var React15 = __toESM(require("react"));
 var import_jsx_runtime53 = require("@emotion/react/jsx-runtime");
-var InputToggle = React14.forwardRef(
+var InputToggle = React15.forwardRef(
   ({
     label,
     type,
@@ -13511,26 +13656,33 @@ var InputToggle = React14.forwardRef(
     fontWeight = "medium",
     ...props
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Label, { css: [inputToggleLabel, disabled ? inputDisabled : void 0], "data-test-id": testId, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-        "input",
-        {
-          ref,
-          type,
-          css: toggleInput,
-          checked,
-          name,
-          disabled,
-          ...props
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { css: inlineLabel(fontWeight), dangerouslySetInnerHTML: { __html: label } }),
-      caption || errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("span", { css: inputToggleMessageContainer, children: [
-        caption ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Caption, { children: caption }) : null,
-        errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ErrorMessage, { message: errorMessage }) : null,
-        warningMessage && !errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(WarningMessage, { message: warningMessage }) : null
-      ] }) : null
-    ] });
+    return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+      Label,
+      {
+        css: [inputToggleLabel, disabled ? inputDisabled : void 0],
+        "data-test-id": testId ? testId : "input-toggle",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+            "input",
+            {
+              ref,
+              type,
+              css: toggleInput,
+              checked,
+              name,
+              disabled,
+              ...props
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { css: inlineLabel(fontWeight), children: label }),
+          caption || errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("span", { css: inputToggleMessageContainer, children: [
+            caption ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Caption, { children: caption }) : null,
+            errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ErrorMessage, { message: errorMessage }) : null,
+            warningMessage && !errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(WarningMessage, { message: warningMessage }) : null
+          ] }) : null
+        ]
+      }
+    );
   }
 );
 
@@ -13544,8 +13696,8 @@ var Legend = ({ children }) => {
 var import_cg12 = require("react-icons/cg");
 
 // src/components/Input/styles/SuccessMessage.styles.ts
-var import_react60 = require("@emotion/react");
-var SuccessText = import_react60.css`
+var import_react61 = require("@emotion/react");
+var SuccessText = import_react61.css`
   --info-desc: var(--brand-secondary-3);
   --info-icon: var(--brand-secondary-3);
 
@@ -13554,7 +13706,7 @@ var SuccessText = import_react60.css`
   display: flex;
   gap: var(--spacing-sm);
 `;
-var SuccessIcon2 = import_react60.css`
+var SuccessIcon2 = import_react61.css`
   color: var(--info-icon);
 `;
 
@@ -13600,7 +13752,7 @@ var Textarea = ({
 };
 
 // src/components/JsonEditor/JsonEditor.tsx
-var import_react61 = __toESM(require("@monaco-editor/react"));
+var import_react62 = __toESM(require("@monaco-editor/react"));
 var import_jsx_runtime57 = require("@emotion/react/jsx-runtime");
 var minEditorHeightPx = 150;
 var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
@@ -13612,7 +13764,7 @@ var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
     effectiveHeight = minEditorHeightPx;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-    import_react61.default,
+    import_react62.default,
     {
       height: effectiveHeight,
       className: "uniform-json-editor",
@@ -13648,34 +13800,34 @@ var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
 };
 
 // src/components/LimitsBar/LimitsBar.styles.ts
-var import_react62 = require("@emotion/react");
-var LimitsBarContainer = import_react62.css`
+var import_react63 = require("@emotion/react");
+var LimitsBarContainer = import_react63.css`
   margin-block: var(--spacing-sm);
 `;
-var LimitsBarProgressBar = import_react62.css`
+var LimitsBarProgressBar = import_react63.css`
   background: var(--gray-100);
   margin-top: var(--spacing-sm);
   position: relative;
   overflow: hidden;
   height: 0.25rem;
 `;
-var LimitsBarProgressBarLine = import_react62.css`
+var LimitsBarProgressBarLine = import_react63.css`
   position: absolute;
   inset: 0;
   transition: transform var(--duration-fast) var(--timing-ease-out);
 `;
-var LimitsBarLabelContainer = import_react62.css`
+var LimitsBarLabelContainer = import_react63.css`
   display: flex;
   justify-content: space-between;
   font-weight: var(--fw-bold);
 `;
-var LimitsBarLabel = import_react62.css`
+var LimitsBarLabel = import_react63.css`
   font-size: var(--fs-baase);
 `;
-var LimitsBarBgColor = (statusColor) => import_react62.css`
+var LimitsBarBgColor = (statusColor) => import_react63.css`
   background: ${statusColor};
 `;
-var LimitsBarTextColor = (statusColor) => import_react62.css`
+var LimitsBarTextColor = (statusColor) => import_react63.css`
   color: ${statusColor};
 `;
 
@@ -13725,8 +13877,8 @@ var LimitsBar = ({ current, max, label }) => {
 };
 
 // src/components/LinkList/LinkList.styles.ts
-var import_react63 = require("@emotion/react");
-var LinkListContainer = (padding) => import_react63.css`
+var import_react64 = require("@emotion/react");
+var LinkListContainer = (padding) => import_react64.css`
   padding: ${padding};
 
   ${mq("sm")} {
@@ -13734,7 +13886,7 @@ var LinkListContainer = (padding) => import_react63.css`
     grid-row: 1 / last-line;
   }
 `;
-var LinkListTitle = import_react63.css`
+var LinkListTitle = import_react64.css`
   font-weight: var(--fw-bold);
   font-size: var(--fs-sm);
   text-transform: uppercase;
@@ -13750,14 +13902,14 @@ var LinkList = ({ title, padding = "var(--spacing-md)", children, ...props }) =>
 };
 
 // src/components/List/ScrollableList.tsx
-var import_react65 = require("@emotion/react");
+var import_react66 = require("@emotion/react");
 
 // src/components/List/styles/ScrollableList.styles.ts
-var import_react64 = require("@emotion/react");
-var ScrollableListContainer = import_react64.css`
+var import_react65 = require("@emotion/react");
+var ScrollableListContainer = import_react65.css`
   position: relative;
 `;
-var ScrollableListInner = import_react64.css`
+var ScrollableListInner = import_react65.css`
   background: var(--gray-50);
   border-top: 1px solid var(--gray-200);
   border-bottom: 1px solid var(--gray-200);
@@ -13786,7 +13938,7 @@ var ScrollableList = ({ label, children, ...props }) => {
     label ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
       "span",
       {
-        css: import_react65.css`
+        css: import_react66.css`
             ${labelText}
           `,
         children: label
@@ -13800,8 +13952,8 @@ var ScrollableList = ({ label, children, ...props }) => {
 var import_cg13 = require("react-icons/cg");
 
 // src/components/List/styles/ScrollableListItem.styles.ts
-var import_react66 = require("@emotion/react");
-var ScrollableListItemContainer = import_react66.css`
+var import_react67 = require("@emotion/react");
+var ScrollableListItemContainer = import_react67.css`
   align-items: center;
   background: var(--white);
   border-radius: var(--rounded-base);
@@ -13810,13 +13962,13 @@ var ScrollableListItemContainer = import_react66.css`
   min-height: 52px;
   transition: border-color var(--duration-fast) var(--timing-ease-out);
 `;
-var ScrollableListItemShadow = import_react66.css`
+var ScrollableListItemShadow = import_react67.css`
   box-shadow: var(--shadow-base);
 `;
-var ScrollableListItemActive = import_react66.css`
+var ScrollableListItemActive = import_react67.css`
   border-color: var(--brand-secondary-3);
 `;
-var ScrollableListItemBtn = import_react66.css`
+var ScrollableListItemBtn = import_react67.css`
   align-items: center;
   border: none;
   background: transparent;
@@ -13831,27 +13983,27 @@ var ScrollableListItemBtn = import_react66.css`
     outline: none;
   }
 `;
-var ScrollableListInputLabel = import_react66.css`
+var ScrollableListInputLabel = import_react67.css`
   align-items: center;
   cursor: pointer;
   display: flex;
   padding: var(--spacing-xs) var(--spacing-base) var(--spacing-xs);
   flex-grow: 1;
 `;
-var ScrollableListInputText = import_react66.css`
+var ScrollableListInputText = import_react67.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   flex-grow: 1;
   flex-wrap: wrap;
 `;
-var ScrollableListHiddenInput = import_react66.css`
+var ScrollableListHiddenInput = import_react67.css`
   position: absolute;
   height: 0;
   width: 0;
   opacity: 0;
 `;
-var ScrollableListIcon = import_react66.css`
+var ScrollableListIcon = import_react67.css`
   border-radius: var(--rounded-full);
   background: var(--brand-secondary-3);
   color: var(--white);
@@ -13859,7 +14011,7 @@ var ScrollableListIcon = import_react66.css`
   min-width: 24px;
   opacity: 0;
 `;
-var ScrollableListIconVisible = import_react66.css`
+var ScrollableListIconVisible = import_react67.css`
   animation: ${fadeInBottom} var(--duration-fast) var(--timing-ease-out) forwards;
 `;
 
@@ -13939,8 +14091,8 @@ var ScrollableListItem = ({
 };
 
 // src/components/LoadingIndicator/LoadingIndicator.styles.ts
-var import_react67 = require("@emotion/react");
-var bounceFade = import_react67.keyframes`
+var import_react68 = require("@emotion/react");
+var bounceFade = import_react68.keyframes`
     0%, 100% {
         opacity: 1.0;
         transform: translateY(0);
@@ -13957,11 +14109,11 @@ var bounceFade = import_react67.keyframes`
         transform: translateY(-5px);
     }
 `;
-var loader = import_react67.css`
+var loader = import_react68.css`
   display: inline-flex;
   justify-content: center;
 `;
-var loadingDot = import_react67.css`
+var loadingDot = import_react68.css`
   background-color: var(--gray-700);
   display: block;
   border-radius: var(--rounded-full);
@@ -13995,11 +14147,11 @@ var LoadingIndicator = ({ ...props }) => {
 };
 
 // src/components/LoadingOverlay/LoadingOverlay.tsx
-var import_react69 = require("react");
+var import_react70 = require("react");
 
 // src/components/LoadingOverlay/LoadingOverlay.styles.ts
-var import_react68 = require("@emotion/react");
-var loadingOverlayContainer = import_react68.css`
+var import_react69 = require("@emotion/react");
+var loadingOverlayContainer = import_react69.css`
   position: absolute;
   inset: 0;
   overflow: hidden;
@@ -14007,24 +14159,24 @@ var loadingOverlayContainer = import_react68.css`
   padding: var(--spacing-xl);
   overflow-y: auto;
 `;
-var loadingOverlayVisible = import_react68.css`
+var loadingOverlayVisible = import_react69.css`
   display: flex;
 `;
-var loadingOverlayHidden = import_react68.css`
+var loadingOverlayHidden = import_react69.css`
   display: none;
 `;
-var loadingOverlayBackground = (bgColor) => import_react68.css`
+var loadingOverlayBackground = (bgColor) => import_react69.css`
   background: ${bgColor};
   opacity: 0.92;
   position: absolute;
   inset: 0 0;
 `;
-var loadingOverlayBody = import_react68.css`
+var loadingOverlayBody = import_react69.css`
   align-items: center;
   display: flex;
   flex-direction: column;
 `;
-var loadingOverlayMessage = import_react68.css`
+var loadingOverlayMessage = import_react69.css`
   color: var(--gray-600);
   margin: var(--spacing-base) 0 0;
 `;
@@ -14041,14 +14193,14 @@ var LoadingOverlay = ({
   isPaused = false,
   children
 }) => {
-  const lottieRef = (0, import_react69.useRef)(null);
-  const onLoopComplete = (0, import_react69.useCallback)(() => {
+  const lottieRef = (0, import_react70.useRef)(null);
+  const onLoopComplete = (0, import_react70.useCallback)(() => {
     var _a, _b, _c;
     if (isPaused && !((_b = (_a = lottieRef.current) == null ? void 0 : _a.animationItem) == null ? void 0 : _b.isPaused)) {
       (_c = lottieRef.current) == null ? void 0 : _c.stop();
     }
   }, [isPaused]);
-  (0, import_react69.useEffect)(() => {
+  (0, import_react70.useEffect)(() => {
     var _a, _b, _c, _d, _e, _f;
     if (!isPaused && ((_b = (_a = lottieRef.current) == null ? void 0 : _a.animationItem) == null ? void 0 : _b.isPaused)) {
       (_c = lottieRef.current) == null ? void 0 : _c.play();
@@ -14119,12 +14271,12 @@ var LoadingIcon = ({ height, width, ...props }) => {
 };
 
 // src/components/Tiles/CreateTeamIntegrationTile.tsx
-var import_react71 = require("@emotion/react");
+var import_react72 = require("@emotion/react");
 var import_cg15 = require("react-icons/cg");
 
 // src/components/Tiles/styles/IntegrationTile.styles.ts
-var import_react70 = require("@emotion/react");
-var IntegrationTileContainer = import_react70.css`
+var import_react71 = require("@emotion/react");
+var IntegrationTileContainer = import_react71.css`
   align-items: center;
   box-sizing: border-box;
   border-radius: var(--rounded-base);
@@ -14155,22 +14307,22 @@ var IntegrationTileContainer = import_react70.css`
     }
   }
 `;
-var IntegrationTileBtnDashedBorder = import_react70.css`
+var IntegrationTileBtnDashedBorder = import_react71.css`
   border: 1px dashed var(--brand-secondary-1);
 `;
-var IntegrationTileTitle = import_react70.css`
+var IntegrationTileTitle = import_react71.css`
   display: block;
   font-weight: var(--fw-bold);
   margin: 0 0 var(--spacing-base);
   max-width: 13rem;
 `;
-var IntegrationTitleLogo = import_react70.css`
+var IntegrationTitleLogo = import_react71.css`
   display: block;
   max-width: 10rem;
   max-height: 4rem;
   margin: 0 auto;
 `;
-var IntegrationTileName = import_react70.css`
+var IntegrationTileName = import_react71.css`
   color: var(--gray-500);
   display: -webkit-box;
   -webkit-line-clamp: 1;
@@ -14183,7 +14335,7 @@ var IntegrationTileName = import_react70.css`
   position: absolute;
   bottom: calc(var(--spacing-base) * 3.8);
 `;
-var IntegrationAddedText = import_react70.css`
+var IntegrationAddedText = import_react71.css`
   align-items: center;
   background: var(--brand-secondary-3);
   border-radius: 0 var(--rounded-md) 0 var(--rounded-md);
@@ -14198,7 +14350,7 @@ var IntegrationAddedText = import_react70.css`
   top: 0;
   right: 0;
 `;
-var IntegrationCustomBadgeText = (theme) => import_react70.css`
+var IntegrationCustomBadgeText = (theme) => import_react71.css`
   align-items: center;
   border-radius: var(--rounded-sm) 0 var(--rounded-sm) 0;
   background: ${theme === "gray" ? "var(--brand-secondary-2)" : "var(--brand-secondary-1)"};
@@ -14212,26 +14364,26 @@ var IntegrationCustomBadgeText = (theme) => import_react70.css`
   top: 0;
   left: 0;
 `;
-var IntegrationAuthorBadgeIcon = import_react70.css`
+var IntegrationAuthorBadgeIcon = import_react71.css`
   position: absolute;
   bottom: var(--spacing-sm);
   right: var(--spacing-xs);
   max-height: 1rem;
 `;
-var IntegrationTitleFakeButton = import_react70.css`
+var IntegrationTitleFakeButton = import_react71.css`
   font-size: var(--fs-xs);
   gap: var(--spacing-sm);
   padding: var(--spacing-sm) var(--spacing-base);
   text-transform: uppercase;
 `;
-var IntegrationTileFloatingButton = import_react70.css`
+var IntegrationTileFloatingButton = import_react71.css`
   position: absolute;
   bottom: var(--spacing-base);
   gap: var(--spacing-sm);
   font-size: var(--fs-xs);
   overflow: hidden;
 `;
-var IntegrationTileFloatingButtonMessage = (clicked) => import_react70.css`
+var IntegrationTileFloatingButtonMessage = (clicked) => import_react71.css`
   strong,
   span:first-of-type {
     transition: opacity var(--duration-fast) var(--timing-ease-out);
@@ -14278,7 +14430,7 @@ var CreateTeamIntegrationTile = ({
               icon: import_cg15.CgChevronRight,
               iconColor: "currentColor",
               size: 20,
-              css: import_react71.css`
+              css: import_react72.css`
               order: 1;
             `
             }
@@ -14288,7 +14440,7 @@ var CreateTeamIntegrationTile = ({
               icon: import_cg15.CgAdd,
               iconColor: "currentColor",
               size: 16,
-              css: import_react71.css`
+              css: import_react72.css`
               order: -1;
             `
             }
@@ -14376,8 +14528,8 @@ var EditTeamIntegrationTile = ({
 };
 
 // src/components/Tiles/IntegrationComingSoon.tsx
-var import_react72 = require("@emotion/react");
-var import_react73 = require("react");
+var import_react73 = require("@emotion/react");
+var import_react74 = require("react");
 var import_cg17 = require("react-icons/cg");
 var import_jsx_runtime69 = require("@emotion/react/jsx-runtime");
 var IntegrationComingSoon = ({
@@ -14388,12 +14540,12 @@ var IntegrationComingSoon = ({
   timing = 1e3,
   ...props
 }) => {
-  const [upVote, setUpVote] = (0, import_react73.useState)(false);
+  const [upVote, setUpVote] = (0, import_react74.useState)(false);
   const handleUpVoteInteraction = () => {
     setUpVote((prev) => !prev);
     onUpVoteClick();
   };
-  (0, import_react73.useEffect)(() => {
+  (0, import_react74.useEffect)(() => {
     if (upVote) {
       const timer = setTimeout(() => setUpVote(false), timing);
       return () => {
@@ -14425,7 +14577,7 @@ var IntegrationComingSoon = ({
               /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
                 "span",
                 {
-                  css: import_react72.css`
+                  css: import_react73.css`
             text-transform: uppercase;
             color: var(--gray-500);
           `,
@@ -14445,8 +14597,8 @@ var IntegrationComingSoon = ({
 };
 
 // src/components/Tiles/styles/IntegrationLoadingTile.styles.ts
-var import_react74 = require("@emotion/react");
-var IntegrationLoadingTileContainer = import_react74.css`
+var import_react75 = require("@emotion/react");
+var IntegrationLoadingTileContainer = import_react75.css`
   align-items: center;
   box-sizing: border-box;
   border-radius: var(--rounded-base);
@@ -14473,17 +14625,17 @@ var IntegrationLoadingTileContainer = import_react74.css`
     }
   }
 `;
-var IntegrationLoadingTileImg = import_react74.css`
+var IntegrationLoadingTileImg = import_react75.css`
   width: 10rem;
   height: 4rem;
   margin: 0 auto;
 `;
-var IntegrationLoadingTileText = import_react74.css`
+var IntegrationLoadingTileText = import_react75.css`
   width: 5rem;
   height: var(--spacing-sm);
   margin: var(--spacing-sm) 0;
 `;
-var IntegrationLoadingFrame = import_react74.css`
+var IntegrationLoadingFrame = import_react75.css`
   animation: ${skeletonLoading} 1s linear infinite alternate;
   border-radius: var(--rounded-base);
 `;
@@ -14499,13 +14651,13 @@ var IntegrationLoadingTile = ({ count = 1 }) => {
 };
 
 // src/components/Tiles/styles/IntegrationModalIcon.styles.ts
-var import_react75 = require("@emotion/react");
-var IntegrationModalIconContainer = import_react75.css`
+var import_react76 = require("@emotion/react");
+var IntegrationModalIconContainer = import_react76.css`
   position: relative;
   width: 50px;
   margin-bottom: var(--spacing-base);
 `;
-var IntegrationModalImage = import_react75.css`
+var IntegrationModalImage = import_react76.css`
   position: absolute;
   inset: 0;
   margin: auto;
@@ -14593,59 +14745,118 @@ var IntegrationTile = ({
   );
 };
 
-// src/components/Tiles/styles/TileContainer.styles.ts
-var import_react76 = require("@emotion/react");
-var TileContainerWrapper = import_react76.css`
-  background: var(--brand-secondary-2);
+// src/components/Tiles/styles/Tile.styles.ts
+var import_react77 = require("@emotion/react");
+var Tile = import_react77.css`
+  background: var(--white);
+  border: none;
+  cursor: pointer;
+  outline: 1px solid var(--gray-300);
+  display: grid;
   padding: var(--spacing-base);
-  margin-bottom: var(--spacing-lg);
+  place-items: center;
+  place-content: flex-start center;
+  gap: var(--spacing-sm);
+  transition: background-color var(--duration-fast) var(--timing-ease-out);
+  min-height: 128px;
+
+  &:hover,
+  &:focus {
+    background: var(--gray-50);
+  }
+`;
+
+// src/components/Tiles/Tile.tsx
+var import_jsx_runtime73 = require("@emotion/react/jsx-runtime");
+var Tile2 = ({ children, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("button", { type: "button", css: Tile, ...props, children });
+};
+
+// src/components/Tiles/styles/TileContainer.styles.ts
+var import_react78 = require("@emotion/react");
+var TileContainerWrapper = (theme, padding) => import_react78.css`
+  background: ${theme};
+  padding: ${padding != "none" ? `var(--spacing-${padding})` : "0"};
 `;
-var TileContainerInner = import_react76.css`
+var TileContainerInner = (gap, templateColumns) => import_react78.css`
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
-  gap: var(--spacing-base);
+  grid-template-columns: ${templateColumns};
+  gap: var(--spacing-${gap});
 `;
 
 // src/components/Tiles/TileContainer.tsx
-var import_jsx_runtime73 = require("@emotion/react/jsx-runtime");
-var TileContainer = ({ children, ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { css: TileContainerWrapper, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { css: TileContainerInner, children }) });
+var import_jsx_runtime74 = require("@emotion/react/jsx-runtime");
+var TileContainer = ({
+  bgColor = "var(--brand-secondary-2)",
+  containerPadding = "base",
+  gap = "base",
+  gridTemplateColumns = "repeat(auto-fill, minmax(13rem, 1fr))",
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { css: TileContainerWrapper(bgColor, containerPadding), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { css: TileContainerInner(gap, gridTemplateColumns), children }) });
+};
+
+// src/components/Tiles/styles/TileText.styles.ts
+var import_react79 = require("@emotion/react");
+var TileHeading = import_react79.css`
+  font-size: var(--fs-base);
+`;
+var TileText = import_react79.css`
+  color: var(--gray-500);
+  font-size: var(--fs-sm);
+  line-height: 1.2;
+`;
+
+// src/components/Tiles/TileText.tsx
+var import_jsx_runtime75 = require("@emotion/react/jsx-runtime");
+var TileText2 = ({ as = "heading", children, ...props }) => {
+  const isHeading = as === "heading";
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+    "span",
+    {
+      role: isHeading ? "heading" : void 0,
+      css: isHeading ? TileHeading : TileText,
+      ...props,
+      children
+    }
+  );
 };
 
 // src/components/Modal/IntegrationModalHeader.styles.ts
-var import_react77 = require("@emotion/react");
-var IntegrationModalHeaderSVGBackground = import_react77.css`
+var import_react80 = require("@emotion/react");
+var IntegrationModalHeaderSVGBackground = import_react80.css`
   position: absolute;
   top: 0;
   left: 0;
 `;
-var IntegrationModalHeaderGroup = import_react77.css`
+var IntegrationModalHeaderGroup = import_react80.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   margin: 0 0 var(--spacing-md);
   position: relative;
 `;
-var IntegrationModalHeaderTitleGroup = import_react77.css`
+var IntegrationModalHeaderTitleGroup = import_react80.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-base);
 `;
-var IntegrationModalHeaderTitle = import_react77.css`
+var IntegrationModalHeaderTitle = import_react80.css`
   margin-top: 0;
 `;
-var IntegrationModalHeaderMenuPlacement = import_react77.css`
+var IntegrationModalHeaderMenuPlacement = import_react80.css`
   margin-bottom: var(--spacing-base);
 `;
-var IntegrationModalHeaderContentWrapper = import_react77.css`
+var IntegrationModalHeaderContentWrapper = import_react80.css`
   position: relative;
   z-index: var(--z-10);
 `;
 
 // src/components/Modal/IntegrationModalHeader.tsx
-var import_jsx_runtime74 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime76 = require("@emotion/react/jsx-runtime");
 var HexModalBackground = ({ ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
     "svg",
     {
       width: "236",
@@ -14655,7 +14866,7 @@ var HexModalBackground = ({ ...props }) => {
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
           "path",
           {
             fillRule: "evenodd",
@@ -14664,7 +14875,7 @@ var HexModalBackground = ({ ...props }) => {
             fill: "url(#paint0_linear_196_2737)"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
           "linearGradient",
           {
             id: "paint0_linear_196_2737",
@@ -14674,8 +14885,8 @@ var HexModalBackground = ({ ...props }) => {
             y2: "-95.2742",
             gradientUnits: "userSpaceOnUse",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("stop", { stopColor: "#81DCDE" }),
-              /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("stop", { offset: "1", stopColor: "#428ED4" })
+              /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("stop", { stopColor: "#81DCDE" }),
+              /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("stop", { offset: "1", stopColor: "#428ED4" })
             ]
           }
         ) })
@@ -14684,27 +14895,27 @@ var HexModalBackground = ({ ...props }) => {
   );
 };
 var IntegrationModalHeader = ({ icon, name, menu: menu2, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(HexModalBackground, { css: IntegrationModalHeaderSVGBackground, role: "presentation" }),
-    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { css: IntegrationModalHeaderGroup, children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { css: IntegrationModalHeaderTitleGroup, children: [
-      icon ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(IntegrationModalIcon, { icon, name: name || "" }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Heading, { level: 3, css: IntegrationModalHeaderTitle, "data-test-id": "integration-modal-title", children: name || "Create Team Integration" }),
-      menu2 ? /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { css: IntegrationModalHeaderMenuPlacement, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(import_jsx_runtime76.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(HexModalBackground, { css: IntegrationModalHeaderSVGBackground, role: "presentation" }),
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { css: IntegrationModalHeaderGroup, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { css: IntegrationModalHeaderTitleGroup, children: [
+      icon ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(IntegrationModalIcon, { icon, name: name || "" }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Heading, { level: 3, css: IntegrationModalHeaderTitle, "data-test-id": "integration-modal-title", children: name || "Create Team Integration" }),
+      menu2 ? /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { css: IntegrationModalHeaderMenuPlacement, children: [
         menu2,
         " "
       ] }) : null
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { css: IntegrationModalHeaderContentWrapper, children })
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { css: IntegrationModalHeaderContentWrapper, children })
   ] });
 };
 
 // src/components/Tooltip/Tooltip.tsx
-var import_react79 = __toESM(require("react"));
+var import_react82 = __toESM(require("react"));
 var import_Tooltip = require("reakit/Tooltip");
 
 // src/components/Tooltip/Tooltip.styles.ts
-var import_react78 = require("@emotion/react");
-var TooltipContainer = import_react78.css`
+var import_react81 = require("@emotion/react");
+var TooltipContainer = import_react81.css`
   z-index: var(--z-tooltip);
   border: 2px solid var(--gray-300);
   border-radius: var(--rounded-base);
@@ -14713,28 +14924,28 @@ var TooltipContainer = import_react78.css`
   font-size: var(--fs-xs);
   background: var(--white);
 `;
-var TooltipArrowStyles = import_react78.css`
+var TooltipArrowStyles = import_react81.css`
   svg {
     fill: var(--gray-300);
   }
 `;
 
 // src/components/Tooltip/Tooltip.tsx
-var import_jsx_runtime75 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime77 = require("@emotion/react/jsx-runtime");
 function Tooltip({ children, title, placement = "bottom", visible, ...props }) {
   const tooltip = (0, import_Tooltip.useTooltipState)({ placement });
-  return !title ? children : /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(import_jsx_runtime75.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_Tooltip.TooltipReference, { ...tooltip, ...children.props, children: (referenceProps) => import_react79.default.cloneElement(children, referenceProps) }),
-    /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(import_Tooltip.Tooltip, { ...tooltip, ...props, css: TooltipContainer, visible: visible != null ? visible : tooltip.visible, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_Tooltip.TooltipArrow, { ...tooltip, css: TooltipArrowStyles }),
+  return !title ? children : /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(import_jsx_runtime77.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_Tooltip.TooltipReference, { ...tooltip, ...children.props, children: (referenceProps) => import_react82.default.cloneElement(children, referenceProps) }),
+    /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(import_Tooltip.Tooltip, { ...tooltip, ...props, css: TooltipContainer, visible: visible != null ? visible : tooltip.visible, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_Tooltip.TooltipArrow, { ...tooltip, css: TooltipArrowStyles }),
       title
     ] })
   ] });
 }
 
 // src/components/ParameterInputs/styles/ParameterBindingButton.styles.ts
-var import_react80 = require("@emotion/react");
-var inputIconBtn = import_react80.css`
+var import_react83 = require("@emotion/react");
+var inputIconBtn = import_react83.css`
   align-items: center;
   border: none;
   border-radius: var(--rounded-base);
@@ -14758,7 +14969,7 @@ var inputIconBtn = import_react80.css`
 `;
 
 // src/components/ParameterInputs/ConnectToDataElementButton.tsx
-var import_jsx_runtime76 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime78 = require("@emotion/react/jsx-runtime");
 var ConnectToDataElementButton = ({
   icon,
   iconColor,
@@ -14768,7 +14979,7 @@ var ConnectToDataElementButton = ({
   ...props
 }) => {
   const title = isLocked ? "Read-only pattern parameter" : isBound ? "Connected to external content. Click to edit" : "Click to connect to external content";
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Tooltip, { title, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Tooltip, { title, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
     "button",
     {
       css: inputIconBtn,
@@ -14777,7 +14988,7 @@ var ConnectToDataElementButton = ({
       "aria-disabled": isLocked,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
           Icon,
           {
             icon: isLocked ? "lock" : icon ? icon : "arrows-expand-down-right",
@@ -14792,8 +15003,8 @@ var ConnectToDataElementButton = ({
 };
 
 // src/components/ParameterInputs/hooks/ParameterShellContext.tsx
-var import_react81 = require("react");
-var ParameterShellContext = (0, import_react81.createContext)({
+var import_react84 = require("react");
+var ParameterShellContext = (0, import_react84.createContext)({
   id: "",
   label: "",
   hiddenLabel: void 0,
@@ -14802,7 +15013,7 @@ var ParameterShellContext = (0, import_react81.createContext)({
   }
 });
 var useParameterShell = () => {
-  const { id, label, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = (0, import_react81.useContext)(ParameterShellContext);
+  const { id, label, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = (0, import_react84.useContext)(ParameterShellContext);
   return {
     id,
     label,
@@ -14813,8 +15024,8 @@ var useParameterShell = () => {
 };
 
 // src/components/ParameterInputs/styles/ParameterInput.styles.ts
-var import_react82 = require("@emotion/react");
-var inputContainer2 = import_react82.css`
+var import_react85 = require("@emotion/react");
+var inputContainer2 = import_react85.css`
   position: relative;
 
   &:hover,
@@ -14826,14 +15037,14 @@ var inputContainer2 = import_react82.css`
     }
   }
 `;
-var labelText2 = import_react82.css`
+var labelText2 = import_react85.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-xs);
   font-weight: var(--fw-regular);
   margin: 0 0 var(--spacing-xs);
 `;
-var input2 = import_react82.css`
+var input2 = import_react85.css`
   display: block;
   appearance: none;
   box-sizing: border-box;
@@ -14877,18 +15088,18 @@ var input2 = import_react82.css`
     color: var(--gray-400);
   }
 `;
-var selectInput = import_react82.css`
+var selectInput = import_react85.css`
   background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath d='M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z' fill='currentColor' /%3E%3C/svg%3E");
   background-position: right var(--spacing-sm) center;
   background-repeat: no-repeat;
   background-size: 1rem;
   padding-right: var(--spacing-xl);
 `;
-var inputWrapper = import_react82.css`
+var inputWrapper = import_react85.css`
   display: flex; // used to correct overflow with chrome textarea
   position: relative;
 `;
-var inputIcon2 = import_react82.css`
+var inputIcon2 = import_react85.css`
   align-items: center;
   background: var(--white);
   border-radius: var(--rounded-md) 0 0 var(--rounded-md);
@@ -14904,7 +15115,7 @@ var inputIcon2 = import_react82.css`
   width: var(--spacing-lg);
   z-index: var(--z-10);
 `;
-var inputToggleLabel2 = import_react82.css`
+var inputToggleLabel2 = import_react85.css`
   align-items: center;
   background: var(--white);
   cursor: pointer;
@@ -14915,7 +15126,7 @@ var inputToggleLabel2 = import_react82.css`
   min-height: var(--spacing-md);
   position: relative;
 `;
-var toggleInput2 = import_react82.css`
+var toggleInput2 = import_react85.css`
   appearance: none;
   border: 1px solid var(--gray-300);
   background: var(--white);
@@ -14954,7 +15165,7 @@ var toggleInput2 = import_react82.css`
     border-color: var(--gray-300);
   }
 `;
-var inlineLabel2 = import_react82.css`
+var inlineLabel2 = import_react85.css`
   padding-left: var(--spacing-lg);
   font-size: var(--fs-sm);
   font-weight: var(--fw-regular);
@@ -14970,7 +15181,7 @@ var inlineLabel2 = import_react82.css`
     }
   }
 `;
-var inputMenu = import_react82.css`
+var inputMenu = import_react85.css`
   background: none;
   border: none;
   padding: var(--spacing-2xs);
@@ -14986,14 +15197,14 @@ var inputMenu = import_react82.css`
     background-color: var(--gray-200);
   }
 `;
-var textarea2 = import_react82.css`
+var textarea2 = import_react85.css`
   resize: vertical;
   min-height: 2rem;
 `;
-var imageWrapper = import_react82.css`
+var imageWrapper = import_react85.css`
   background: var(--white);
 `;
-var img = import_react82.css`
+var img = import_react85.css`
   animation: ${fadeIn} var(--duration-fast) var(--timing-ease-out) forwards;
   object-fit: contain;
   max-width: 100%;
@@ -15001,7 +15212,7 @@ var img = import_react82.css`
   opacity: var(--opacity-0);
   margin: var(--spacing-sm) auto 0;
 `;
-var dataConnectButton = import_react82.css`
+var dataConnectButton = import_react85.css`
   align-items: center;
   appearance: none;
   box-sizing: border-box;
@@ -15036,7 +15247,7 @@ var dataConnectButton = import_react82.css`
     pointer-events: none;
   }
 `;
-var linkParameterBtn = import_react82.css`
+var linkParameterBtn = import_react85.css`
   border-radius: var(--rounded-base);
   background: var(--white);
   border: none;
@@ -15045,7 +15256,7 @@ var linkParameterBtn = import_react82.css`
   font-size: var(--fs-sm);
   line-height: 1;
 `;
-var linkParameterControls = import_react82.css`
+var linkParameterControls = import_react85.css`
   position: absolute;
   inset: 0 0 0 auto;
   padding: 0 var(--spacing-base);
@@ -15054,13 +15265,13 @@ var linkParameterControls = import_react82.css`
   justify-content: center;
   gap: var(--spacing-base);
 `;
-var linkParameterInput = (withExternalLinkIcon) => import_react82.css`
+var linkParameterInput = (withExternalLinkIcon) => import_react85.css`
   padding-right: calc(
     ${withExternalLinkIcon ? "calc(var(--spacing-lg) * 2 + var(--spacing-xs))" : "var(--spacing-xl)"} +
       var(--spacing-base)
   );
 `;
-var linkParameterIcon = import_react82.css`
+var linkParameterIcon = import_react85.css`
   align-items: center;
   color: var(--brand-secondary-3);
   display: flex;
@@ -15075,7 +15286,7 @@ var linkParameterIcon = import_react82.css`
 `;
 
 // src/components/ParameterInputs/ParameterDataResource.tsx
-var import_jsx_runtime77 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime79 = require("@emotion/react/jsx-runtime");
 function ParameterDataResource({
   label,
   labelLeadingIcon,
@@ -15085,12 +15296,12 @@ function ParameterDataResource({
   disabled,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { "data-testid": "parameter-data-connect-button", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("span", { css: labelText2, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { "data-testid": "parameter-data-connect-button", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("span", { css: labelText2, children: [
       labelLeadingIcon ? labelLeadingIcon : null,
       label
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
       "button",
       {
         type: "button",
@@ -15099,30 +15310,30 @@ function ParameterDataResource({
         disabled,
         onClick: onConnectDatasource,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { className: "advance-input-icon", css: [inputIcon2], children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(Icon, { icon: "stack", iconColor: "currentColor", size: "1rem" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: "advance-input-icon", css: [inputIcon2], children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Icon, { icon: "stack", iconColor: "currentColor", size: "1rem" }) }),
           children
         ]
       }
     ),
-    caption ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(Caption, { children: caption }) : null
+    caption ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(Caption, { children: caption }) : null
   ] });
 }
 
 // src/components/ParameterInputs/styles/ParameterDrawerHeader.styles.ts
-var import_react83 = require("@emotion/react");
-var ParameterDrawerHeaderContainer = import_react83.css`
+var import_react86 = require("@emotion/react");
+var ParameterDrawerHeaderContainer = import_react86.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-base);
   justify-content: space-between;
   margin-bottom: var(--spacing-sm);
 `;
-var ParameterDrawerHeaderTitleGroup = import_react83.css`
+var ParameterDrawerHeaderTitleGroup = import_react86.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ParameterDrawerHeaderTitle = import_react83.css`
+var ParameterDrawerHeaderTitle = import_react86.css`
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -15130,23 +15341,23 @@ var ParameterDrawerHeaderTitle = import_react83.css`
 `;
 
 // src/components/ParameterInputs/ParameterDrawerHeader.tsx
-var import_jsx_runtime78 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime80 = require("@emotion/react/jsx-runtime");
 var ParameterDrawerHeader = ({ title, iconBeforeTitle, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { css: ParameterDrawerHeaderContainer, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("header", { css: ParameterDrawerHeaderTitleGroup, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { css: ParameterDrawerHeaderContainer, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("header", { css: ParameterDrawerHeaderTitleGroup, children: [
       iconBeforeTitle,
-      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Heading, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title, children: title })
+      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(Heading, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title, children: title })
     ] }),
     children
   ] });
 };
 
 // src/components/ParameterInputs/ParameterGroup.tsx
-var import_react85 = require("react");
+var import_react88 = require("react");
 
 // src/components/ParameterInputs/styles/ParameterGroup.styles.ts
-var import_react84 = require("@emotion/react");
-var fieldsetStyles = import_react84.css`
+var import_react87 = require("@emotion/react");
+var fieldsetStyles = import_react87.css`
   &:disabled,
   [readonly] {
     pointer-events: none;
@@ -15157,7 +15368,7 @@ var fieldsetStyles = import_react84.css`
     }
   }
 `;
-var fieldsetLegend2 = import_react84.css`
+var fieldsetLegend2 = import_react87.css`
   display: block;
   font-weight: var(--fw-medium);
   margin-bottom: var(--spacing-sm);
@@ -15165,38 +15376,38 @@ var fieldsetLegend2 = import_react84.css`
 `;
 
 // src/components/ParameterInputs/ParameterGroup.tsx
-var import_jsx_runtime79 = require("@emotion/react/jsx-runtime");
-var ParameterGroup = (0, import_react85.forwardRef)(
+var import_jsx_runtime81 = require("@emotion/react/jsx-runtime");
+var ParameterGroup = (0, import_react88.forwardRef)(
   ({ legend, isDisabled, children, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("legend", { css: fieldsetLegend2, children: legend }),
+    return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("legend", { css: fieldsetLegend2, children: legend }),
       children
     ] });
   }
 );
 
 // src/components/ParameterInputs/ParameterImage.tsx
-var import_react89 = require("react");
+var import_react92 = require("react");
 
 // src/components/ParameterInputs/ParameterShell.tsx
-var import_react88 = require("react");
+var import_react91 = require("react");
 
 // src/components/ParameterInputs/ParameterLabel.tsx
-var import_jsx_runtime80 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime82 = require("@emotion/react/jsx-runtime");
 var ParameterLabel = ({ id, asSpan, children, ...props }) => {
-  return !asSpan ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("label", { ...props, htmlFor: id, css: labelText2, children }) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { "aria-labelledby": id, css: labelText2, children });
+  return !asSpan ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("label", { ...props, htmlFor: id, css: labelText2, children }) : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { "aria-labelledby": id, css: labelText2, children });
 };
 
 // src/components/ParameterInputs/ParameterMenuButton.tsx
-var import_react86 = require("react");
-var import_jsx_runtime81 = require("@emotion/react/jsx-runtime");
-var ParameterMenuButton = (0, import_react86.forwardRef)(
+var import_react89 = require("react");
+var import_jsx_runtime83 = require("@emotion/react/jsx-runtime");
+var ParameterMenuButton = (0, import_react89.forwardRef)(
   ({ label, children }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
       Menu,
       {
         menuLabel: `${label} menu`,
-        menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+        menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
           "button",
           {
             className: "parameter-menu",
@@ -15204,7 +15415,7 @@ var ParameterMenuButton = (0, import_react86.forwardRef)(
             type: "button",
             "aria-label": `${label} options`,
             ref,
-            children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
           }
         ),
         children
@@ -15214,15 +15425,15 @@ var ParameterMenuButton = (0, import_react86.forwardRef)(
 );
 
 // src/components/ParameterInputs/styles/ParameterShell.styles.ts
-var import_react87 = require("@emotion/react");
-var emptyParameterShell = import_react87.css`
+var import_react90 = require("@emotion/react");
+var emptyParameterShell = import_react90.css`
   border-radius: var(--rounded-sm);
   background: var(--white);
   flex-grow: 1;
   padding: var(--spacing-xs);
   position: relative;
 `;
-var emptyParameterShellText = import_react87.css`
+var emptyParameterShellText = import_react90.css`
   background: var(--brand-secondary-6);
   border-radius: var(--rounded-sm);
   padding: var(--spacing-sm);
@@ -15230,7 +15441,7 @@ var emptyParameterShellText = import_react87.css`
   font-size: var(--fs-sm);
   margin: 0;
 `;
-var overrideMarker = import_react87.css`
+var overrideMarker = import_react90.css`
   border-radius: var(--rounded-sm);
   border: 10px solid var(--gray-300);
   border-left-color: transparent;
@@ -15241,7 +15452,7 @@ var overrideMarker = import_react87.css`
 `;
 
 // src/components/ParameterInputs/ParameterShell.tsx
-var import_jsx_runtime82 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime84 = require("@emotion/react/jsx-runtime");
 var extractParameterProps = (props) => {
   const {
     id,
@@ -15255,7 +15466,6 @@ var extractParameterProps = (props) => {
     hiddenLabel,
     labelLeadingIcon,
     menuItems,
-    handleManuallySetErrorMessage,
     title,
     hasOverriddenValue,
     onResetOverriddenValue,
@@ -15274,7 +15484,6 @@ var extractParameterProps = (props) => {
       hiddenLabel,
       labelLeadingIcon,
       menuItems,
-      handleManuallySetErrorMessage,
       title,
       hasOverriddenValue,
       onResetOverriddenValue
@@ -15300,21 +15509,21 @@ var ParameterShell = ({
   children,
   ...props
 }) => {
-  const [manualErrorMessage, setManualErrorMessage] = (0, import_react88.useState)(void 0);
+  const [manualErrorMessage, setManualErrorMessage] = (0, import_react91.useState)(void 0);
   const setErrorMessage = (message) => setManualErrorMessage(message);
   const errorMessaging = errorMessage || manualErrorMessage;
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { css: inputContainer2, ...props, children: [
-    hiddenLabel || title ? null : /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(ParameterLabel, { id, css: labelText2, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { css: inputContainer2, ...props, children: [
+    hiddenLabel || title ? null : /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(ParameterLabel, { id, css: labelText2, children: [
       labelLeadingIcon ? labelLeadingIcon : null,
       label
     ] }),
-    !title ? null : /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(ParameterLabel, { id, asSpan: true, children: [
+    !title ? null : /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(ParameterLabel, { id, asSpan: true, children: [
       labelLeadingIcon ? labelLeadingIcon : null,
       title
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { css: inputWrapper, children: [
-      menuItems ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { css: inputWrapper, children: [
+      menuItems ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
         ParameterShellContext.Provider,
         {
           value: {
@@ -15324,32 +15533,32 @@ var ParameterShell = ({
             errorMessage: errorMessaging,
             handleManuallySetErrorMessage: (message) => setErrorMessage(message)
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(ParameterShellPlaceholder, { children: [
+          children: /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(ParameterShellPlaceholder, { children: [
             children,
-            hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
+            hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
           ] })
         }
       )
     ] }),
-    caption ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Caption, { testId: captionTestId, children: caption }) : null,
-    errorMessaging ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(ErrorMessage, { message: errorMessaging, testId: errorTestId }) : null,
-    warningMessage ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(WarningMessage, { message: warningMessage }) : null,
-    infoMessage ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(InfoMessage, { message: infoMessage }) : null
+    caption ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Caption, { testId: captionTestId, children: caption }) : null,
+    errorMessaging ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(ErrorMessage, { message: errorMessaging, testId: errorTestId }) : null,
+    warningMessage ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(WarningMessage, { message: warningMessage }) : null,
+    infoMessage ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(InfoMessage, { message: infoMessage }) : null
   ] });
 };
 var ParameterShellPlaceholder = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { css: emptyParameterShell, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { css: emptyParameterShell, children });
 };
-var ParameterOverrideMarker = (props) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { hidden: true, children: "reset overridden value to default" }) }) });
+var ParameterOverrideMarker = (props) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { hidden: true, children: "reset overridden value to default" }) }) });
 
 // src/components/ParameterInputs/ParameterImage.tsx
-var import_jsx_runtime83 = require("@emotion/react/jsx-runtime");
-var ParameterImage = (0, import_react89.forwardRef)((props, ref) => {
+var import_jsx_runtime85 = require("@emotion/react/jsx-runtime");
+var ParameterImage = (0, import_react92.forwardRef)((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(ParameterImageInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(ParameterImageInner, { ref, ...innerProps }) });
 });
 var BrokenImage = ({ ...props }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
     "svg",
     {
       role: "img",
@@ -15361,11 +15570,11 @@ var BrokenImage = ({ ...props }) => {
       xmlnsXlink: "http://www.w3.org/1999/xlink",
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("rect", { width: "214", height: "214", fill: "#F9FAFB" }),
-        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("rect", { width: "214", height: "214", fill: "url(#pattern0)" }),
-        /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("defs", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("pattern", { id: "pattern0", patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("use", { xlinkHref: "#image0_761_4353", transform: "scale(0.0025)" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("rect", { width: "214", height: "214", fill: "#F9FAFB" }),
+        /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("rect", { width: "214", height: "214", fill: "url(#pattern0)" }),
+        /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("defs", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("pattern", { id: "pattern0", patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("use", { xlinkHref: "#image0_761_4353", transform: "scale(0.0025)" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
             "image",
             {
               id: "image0_761_4353",
@@ -15379,14 +15588,14 @@ var BrokenImage = ({ ...props }) => {
     }
   );
 };
-var ParameterImageInner = (0, import_react89.forwardRef)(
+var ParameterImageInner = (0, import_react92.forwardRef)(
   ({ ...props }, ref) => {
     const { value } = props;
     const { id, label, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = useParameterShell();
-    const [loading, setLoading] = (0, import_react89.useState)(false);
-    const deferredValue = (0, import_react89.useDeferredValue)(value);
+    const [loading, setLoading] = (0, import_react92.useState)(false);
+    const deferredValue = (0, import_react92.useDeferredValue)(value);
     const errorText = "The text you provided is not a valid URL";
-    const updateImageSrc = (0, import_react89.useCallback)(() => {
+    const updateImageSrc = (0, import_react92.useCallback)(() => {
       const validUrl = new RegExp(
         "^(https?:\\/\\/)?((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|((\\d{1,3}\\.){3}\\d{1,3}))(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*(\\?[;&a-z\\d%_.~+=-]*)?(\\#[-a-z\\d_]*)?$",
         "i"
@@ -15421,11 +15630,11 @@ var ParameterImageInner = (0, import_react89.forwardRef)(
         handleManuallySetErrorMessage(errorText);
       }
     };
-    (0, import_react89.useEffect)(() => {
+    (0, import_react92.useEffect)(() => {
       updateImageSrc();
     }, [deferredValue]);
-    return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(import_jsx_runtime83.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_jsx_runtime85.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
         "input",
         {
           css: input2,
@@ -15437,8 +15646,8 @@ var ParameterImageInner = (0, import_react89.forwardRef)(
           ...props
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { css: imageWrapper, children: [
-        deferredValue && !errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { css: imageWrapper, children: [
+        deferredValue && !errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
           "img",
           {
             src: deferredValue,
@@ -15449,24 +15658,24 @@ var ParameterImageInner = (0, import_react89.forwardRef)(
             loading: "lazy"
           }
         ) : null,
-        deferredValue && errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(BrokenImage, { css: img }) : null
+        deferredValue && errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(BrokenImage, { css: img }) : null
       ] }),
-      loading ? /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(LoadingIcon, {}) : null
+      loading ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(LoadingIcon, {}) : null
     ] });
   }
 );
 
 // src/components/ParameterInputs/ParameterInput.tsx
-var import_react90 = require("react");
-var import_jsx_runtime84 = require("@emotion/react/jsx-runtime");
-var ParameterInput = (0, import_react90.forwardRef)((props, ref) => {
+var import_react93 = require("react");
+var import_jsx_runtime86 = require("@emotion/react/jsx-runtime");
+var ParameterInput = (0, import_react93.forwardRef)((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(ParameterShell, { "data-test-id": "parameter-input", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(ParameterInputInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ParameterShell, { "data-test-id": "parameter-input", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ParameterInputInner, { ref, ...innerProps }) });
 });
-var ParameterInputInner = (0, import_react90.forwardRef)(
+var ParameterInputInner = (0, import_react93.forwardRef)(
   ({ ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
-    return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
       "input",
       {
         css: input2,
@@ -15482,19 +15691,19 @@ var ParameterInputInner = (0, import_react90.forwardRef)(
 );
 
 // src/components/ParameterInputs/ParameterLink.tsx
-var import_react91 = require("react");
-var import_jsx_runtime85 = require("@emotion/react/jsx-runtime");
-var ParameterLink = (0, import_react91.forwardRef)(
+var import_react94 = require("react");
+var import_jsx_runtime87 = require("@emotion/react/jsx-runtime");
+var ParameterLink = (0, import_react94.forwardRef)(
   ({ buttonText = "Select link", disabled, onConnectLink, externalLink, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
-    return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
       ParameterShell,
       {
         "data-test-id": "link-parameter-editor",
         ...shellProps,
         label: innerProps.value ? shellProps.label : "",
         title: !innerProps.value ? shellProps.label : void 0,
-        children: !innerProps.value ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("button", { type: "button", css: dataConnectButton, disabled, onClick: onConnectLink, children: buttonText }) : /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+        children: !innerProps.value ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("button", { type: "button", css: dataConnectButton, disabled, onClick: onConnectLink, children: buttonText }) : /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
           ParameterLinkInner,
           {
             onConnectLink,
@@ -15507,11 +15716,11 @@ var ParameterLink = (0, import_react91.forwardRef)(
     );
   }
 );
-var ParameterLinkInner = (0, import_react91.forwardRef)(
+var ParameterLinkInner = (0, import_react94.forwardRef)(
   ({ externalLink, onConnectLink, disabled, ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
-    return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { css: inputWrapper, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { css: inputWrapper, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
         "input",
         {
           type: "text",
@@ -15523,8 +15732,8 @@ var ParameterLinkInner = (0, import_react91.forwardRef)(
           ...props
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { css: linkParameterControls, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { css: linkParameterControls, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
           "button",
           {
             type: "button",
@@ -15535,7 +15744,7 @@ var ParameterLinkInner = (0, import_react91.forwardRef)(
             children: "edit"
           }
         ),
-        externalLink ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+        externalLink ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
           "a",
           {
             href: externalLink,
@@ -15543,7 +15752,7 @@ var ParameterLinkInner = (0, import_react91.forwardRef)(
             title: "Open link in new tab",
             target: "_blank",
             rel: "noopener noreferrer",
-            children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
           }
         ) : null
       ] })
@@ -15552,7 +15761,7 @@ var ParameterLinkInner = (0, import_react91.forwardRef)(
 );
 
 // src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
-var import_jsx_runtime86 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime88 = require("@emotion/react/jsx-runtime");
 var ParameterNameAndPublicIdInput = ({
   id,
   onBlur,
@@ -15578,8 +15787,8 @@ var ParameterNameAndPublicIdInput = ({
     navigator.clipboard.writeText(values[publicIdFieldName]);
   };
   autoFocus == null ? void 0 : autoFocus();
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_jsx_runtime86.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(import_jsx_runtime88.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
       ParameterInput,
       {
         id: nameIdField,
@@ -15598,7 +15807,7 @@ var ParameterNameAndPublicIdInput = ({
         value: values[nameIdField]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
       ParameterInput,
       {
         id: publicIdFieldName,
@@ -15612,11 +15821,11 @@ var ParameterNameAndPublicIdInput = ({
         caption: publicIdCaption,
         placeholder: publicIdPlaceholderText,
         errorMessage: publicIdError,
-        menuItems: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+        menuItems: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
           MenuItem,
           {
             disabled: !values[publicIdFieldName],
-            icon: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Icon, { icon: "path-trim", iconColor: "currentColor" }),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Icon, { icon: "path-trim", iconColor: "currentColor" }),
             onClick: handleCopyPidFieldValue,
             children: "Copy"
           }
@@ -15624,12 +15833,13 @@ var ParameterNameAndPublicIdInput = ({
         value: values[publicIdFieldName]
       }
     ),
-    (warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Callout, { type: "caution", children: warnOverLength.message }) : null
+    (warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(Callout, { type: "caution", children: warnOverLength.message }) : null
   ] });
 };
 
 // src/components/ParameterInputs/ParameterRichText.tsx
-var import_react98 = require("@emotion/react");
+var import_react101 = require("@emotion/react");
+var import_code2 = require("@lexical/code");
 var import_list3 = require("@lexical/list");
 var import_LexicalComposer = require("@lexical/react/LexicalComposer");
 var import_LexicalComposerContext4 = require("@lexical/react/LexicalComposerContext");
@@ -15641,7 +15851,7 @@ var import_LexicalRichTextPlugin = require("@lexical/react/LexicalRichTextPlugin
 var import_rich_text2 = require("@lexical/rich-text");
 var import_fast_equals2 = require("fast-equals");
 var import_lexical5 = require("lexical");
-var import_react99 = require("react");
+var import_react102 = require("react");
 
 // src/components/ParameterInputs/rich-text/builtInElements.ts
 var richTextBuiltInElements = [
@@ -15680,6 +15890,14 @@ var richTextBuiltInElements = [
   {
     label: "Link",
     type: "link"
+  },
+  {
+    label: "Blockquote",
+    type: "quote"
+  },
+  {
+    label: "Code Block",
+    type: "code"
   }
 ];
 
@@ -15737,7 +15955,7 @@ var textCode = import_css.css`
   border-radius: var(--rounded-sm);
   display: inline-block;
   font-family: var(--ff-mono);
-  font-size: 94%;
+  font-size: var(--fs-sm);
   padding-left: var(--spacing-xs);
   padding-right: var(--spacing-xs);
 `;
@@ -15866,24 +16084,47 @@ var listItemElement = import_css.css`
 var nestedListItemElement = import_css.css`
   list-style-type: none;
 `;
+var blockquoteElement = import_css.css`
+  border-left: 0.25rem solid var(--gray-300);
+  color: var(--gray-600);
+  margin-bottom: var(--spacing-base);
+  padding-left: var(--spacing-base);
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+var codeElement = import_css.css`
+  background-color: var(--gray-100);
+  border-radius: var(--rounded-sm);
+  display: block;
+  font-family: var(--ff-mono);
+  font-size: var(--fs-sm);
+  margin-bottom: var(--spacing-base);
+  padding: var(--spacing-sm);
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
 
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
-var import_react93 = require("@emotion/react");
+var import_react96 = require("@emotion/react");
 var import_LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
 var import_LexicalNodeEventPlugin = require("@lexical/react/LexicalNodeEventPlugin");
 var import_utils2 = require("@lexical/utils");
 var import_fast_equals = require("fast-equals");
 var import_lexical2 = require("lexical");
-var import_react94 = require("react");
+var import_react97 = require("react");
 
 // src/components/Popover/Popover.styles.ts
-var import_react92 = require("@emotion/react");
-var PopoverBtn = import_react92.css`
+var import_react95 = require("@emotion/react");
+var PopoverBtn = import_react95.css`
   border: none;
   background: none;
   padding: 0;
 `;
-var Popover = import_react92.css`
+var Popover = import_react95.css`
   border-left: var(--spacing-xs) solid var(--brand-secondary-3);
   border-radius: var(--rounded-base);
   box-shadow: var(--shadow-base);
@@ -15947,7 +16188,7 @@ var richTextIsValueConsideredEmpty = (value) => {
 };
 
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
-var import_jsx_runtime87 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime89 = require("@emotion/react/jsx-runtime");
 var isProjectMapLinkValue = (value) => {
   return (value == null ? void 0 : value.type) === "projectMapNode" && Boolean(
     value.nodeId && value.path && value.projectMapId
@@ -16213,32 +16454,32 @@ var OPEN_LINK_NODE_MODAL_COMMAND = (0, import_lexical2.createCommand)(
 );
 var LINK_POPOVER_OFFSET_X = 0;
 var LINK_POPOVER_OFFSET_Y = 8;
-var linkPopover = import_react93.css`
+var linkPopover = import_react96.css`
   position: absolute;
   z-index: 5;
 `;
-var linkPopoverContainer = import_react93.css`
+var linkPopoverContainer = import_react96.css`
   ${Popover};
   align-items: center;
   display: flex;
 `;
-var linkPopoverAnchor = import_react93.css`
+var linkPopoverAnchor = import_react96.css`
   ${link}
   ${linkColorDefault}
 `;
 function LinkNodePlugin({ onConnectLink }) {
   const [editor] = (0, import_LexicalComposerContext.useLexicalComposerContext)();
-  const [linkPopoverState, setLinkPopoverState] = (0, import_react94.useState)();
-  const linkPopoverElRef = (0, import_react94.useRef)(null);
-  const [isEditorFocused, setIsEditorFocused] = (0, import_react94.useState)(false);
-  const [isLinkPopoverFocused, setIsLinkPopoverFocused] = (0, import_react94.useState)(false);
-  (0, import_react94.useEffect)(() => {
+  const [linkPopoverState, setLinkPopoverState] = (0, import_react97.useState)();
+  const linkPopoverElRef = (0, import_react97.useRef)(null);
+  const [isEditorFocused, setIsEditorFocused] = (0, import_react97.useState)(false);
+  const [isLinkPopoverFocused, setIsLinkPopoverFocused] = (0, import_react97.useState)(false);
+  (0, import_react97.useEffect)(() => {
     if (!isEditorFocused && !isLinkPopoverFocused) {
       setLinkPopoverState(void 0);
       return;
     }
   }, [isEditorFocused, isLinkPopoverFocused]);
-  (0, import_react94.useEffect)(() => {
+  (0, import_react97.useEffect)(() => {
     if (!editor.hasNodes([LinkNode])) {
       throw new Error("LinkNode not registered on editor");
     }
@@ -16299,7 +16540,7 @@ function LinkNodePlugin({ onConnectLink }) {
       )
     );
   }, [editor, onConnectLink]);
-  const maybeShowLinkToolbar = (0, import_react94.useCallback)(() => {
+  const maybeShowLinkToolbar = (0, import_react97.useCallback)(() => {
     if (!editor.isEditable()) {
       return;
     }
@@ -16331,7 +16572,7 @@ function LinkNodePlugin({ onConnectLink }) {
       }
     });
   }, [editor]);
-  (0, import_react94.useEffect)(() => {
+  (0, import_react97.useEffect)(() => {
     return editor.registerUpdateListener(({ editorState }) => {
       requestAnimationFrame(() => {
         editorState.read(() => {
@@ -16358,8 +16599,8 @@ function LinkNodePlugin({ onConnectLink }) {
       });
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(import_jsx_runtime87.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(import_jsx_runtime89.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
       import_LexicalNodeEventPlugin.NodeEventPlugin,
       {
         nodeType: LinkNode,
@@ -16369,7 +16610,7 @@ function LinkNodePlugin({ onConnectLink }) {
         }
       }
     ),
-    linkPopoverState ? /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+    linkPopoverState ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
       "div",
       {
         css: linkPopover,
@@ -16378,8 +16619,8 @@ function LinkNodePlugin({ onConnectLink }) {
           top: linkPopoverState.position.y
         },
         ref: linkPopoverElRef,
-        children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { css: linkPopoverContainer, children: [
-          linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { css: linkPopoverContainer, children: [
+          linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
             "a",
             {
               href: `${linkPopoverState.node.__link.type === "email" ? "mailto:" : linkPopoverState.node.__link.type === "tel" ? "tel:" : ""}${linkPopoverState.node.__link.path}`,
@@ -16389,7 +16630,7 @@ function LinkNodePlugin({ onConnectLink }) {
               children: linkPopoverState.node.__link.path
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
             Button,
             {
               size: "xs",
@@ -16397,7 +16638,7 @@ function LinkNodePlugin({ onConnectLink }) {
                 onEditLinkNode(linkPopoverState.node);
               },
               buttonType: "ghost",
-              children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
             }
           )
         ] })
@@ -16416,8 +16657,8 @@ var import_list = require("@lexical/list");
 var import_LexicalComposerContext2 = require("@lexical/react/LexicalComposerContext");
 var import_LexicalTabIndentationPlugin = require("@lexical/react/LexicalTabIndentationPlugin");
 var import_lexical3 = require("lexical");
-var import_react95 = require("react");
-var import_jsx_runtime88 = require("@emotion/react/jsx-runtime");
+var import_react98 = require("react");
+var import_jsx_runtime90 = require("@emotion/react/jsx-runtime");
 function isIndentPermitted(maxDepth) {
   const selection = (0, import_lexical3.$getSelection)();
   if (!(0, import_lexical3.$isRangeSelection)(selection)) {
@@ -16440,27 +16681,29 @@ function isIndentPermitted(maxDepth) {
 }
 function ListIndentPlugin({ maxDepth }) {
   const [editor] = (0, import_LexicalComposerContext2.useLexicalComposerContext)();
-  (0, import_react95.useEffect)(() => {
+  (0, import_react98.useEffect)(() => {
     return editor.registerCommand(
       import_lexical3.INDENT_CONTENT_COMMAND,
       () => !isIndentPermitted(maxDepth),
       import_lexical3.COMMAND_PRIORITY_CRITICAL
     );
   }, [editor, maxDepth]);
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_LexicalTabIndentationPlugin.TabIndentationPlugin, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_LexicalTabIndentationPlugin.TabIndentationPlugin, {});
 }
 
 // src/components/ParameterInputs/rich-text/RichTextToolbar.tsx
-var import_react96 = require("@emotion/react");
+var import_react99 = require("@emotion/react");
+var import_code = require("@lexical/code");
 var import_list2 = require("@lexical/list");
 var import_LexicalComposerContext3 = require("@lexical/react/LexicalComposerContext");
+var import_LexicalDecoratorBlockNode = require("@lexical/react/LexicalDecoratorBlockNode");
 var import_rich_text = require("@lexical/rich-text");
 var import_selection2 = require("@lexical/selection");
 var import_utils5 = require("@lexical/utils");
 var import_lexical4 = require("lexical");
-var import_react97 = require("react");
-var import_jsx_runtime89 = require("@emotion/react/jsx-runtime");
-var toolbar = import_react96.css`
+var import_react100 = require("react");
+var import_jsx_runtime91 = require("@emotion/react/jsx-runtime");
+var toolbar = import_react99.css`
   background: var(--gray-50);
   border-radius: var(--rounded-base);
   display: flex;
@@ -16472,7 +16715,7 @@ var toolbar = import_react96.css`
   top: 0;
   z-index: 10;
 `;
-var toolbarGroup = import_react96.css`
+var toolbarGroup = import_react99.css`
   display: flex;
   gap: var(--spacing-xs);
   position: relative;
@@ -16488,7 +16731,7 @@ var toolbarGroup = import_react96.css`
     width: 1px;
   }
 `;
-var toolbarButton = import_react96.css`
+var toolbarButton = import_react99.css`
   align-items: center;
   appearance: none;
   border: 0;
@@ -16501,17 +16744,17 @@ var toolbarButton = import_react96.css`
   min-width: 32px;
   padding: 0 var(--spacing-sm);
 `;
-var toolbarButtonActive = import_react96.css`
+var toolbarButtonActive = import_react99.css`
   background: var(--gray-200);
 `;
-var toolbarIcon = import_react96.css`
+var toolbarIcon = import_react99.css`
   color: inherit;
 `;
-var toolbarChevron = import_react96.css`
+var toolbarChevron = import_react99.css`
   margin-left: var(--spacing-xs);
 `;
 var ToolbarIcon = ({ icon }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Icon, { icon, css: toolbarIcon, size: "1rem" });
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Icon, { icon, css: toolbarIcon, size: "1rem" });
 };
 var RichTextToolbar = ({ config }) => {
   const [editor] = (0, import_LexicalComposerContext3.useLexicalComposerContext)();
@@ -16527,7 +16770,6 @@ var RichTextToolbar = ({ config }) => {
       return (_b = (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn) == null ? void 0 : _b.includes(element.type);
     }
   );
-  const showToolbar = enabledBuiltInFormats.length > 0 || enabledBuiltInElements.length > 0;
   const formatsWithIcon = /* @__PURE__ */ new Map([
     ["bold", "format-bold"],
     ["italic", "format-italic"],
@@ -16543,8 +16785,8 @@ var RichTextToolbar = ({ config }) => {
   const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
     (format) => !formatsWithIcon.has(format.type)
   );
-  const [activeFormats, setActiveFormats] = (0, import_react97.useState)([]);
-  const [activeElement, setActiveElement] = (0, import_react97.useState)("paragraph");
+  const [activeFormats, setActiveFormats] = (0, import_react100.useState)([]);
+  const [activeElement, setActiveElement] = (0, import_react100.useState)("paragraph");
   const enabledTextualElements = enabledBuiltInElements.filter(
     (element) => ["h1", "h2", "h3", "h4", "h5", "h6"].includes(element.type)
   );
@@ -16553,7 +16795,7 @@ var RichTextToolbar = ({ config }) => {
     if (type === "paragraph") {
       return "Normal";
     }
-    const element = enabledBuiltInElements.find((element2) => element2.type === type);
+    const element = richTextBuiltInElements.find((element2) => element2.type === type);
     return (_a = element == null ? void 0 : element.label) != null ? _a : type;
   };
   const onSelectElement = (type) => {
@@ -16569,19 +16811,29 @@ var RichTextToolbar = ({ config }) => {
         (0, import_selection2.$setBlocksType)(selection, () => (0, import_rich_text.$createHeadingNode)(type));
       } else if (type === "paragraph") {
         (0, import_selection2.$setBlocksType)(selection, () => (0, import_lexical4.$createParagraphNode)());
+      } else if (type === "quote") {
+        (0, import_selection2.$setBlocksType)(selection, () => (0, import_rich_text.$createQuoteNode)());
+      } else if (type === "code") {
+        (0, import_selection2.$setBlocksType)(selection, () => (0, import_code.$createCodeNode)());
       }
     });
   };
-  const [isLink, setIsLink] = (0, import_react97.useState)(false);
-  const linkElementEnabled = (0, import_react97.useMemo)(() => {
+  const [isLink, setIsLink] = (0, import_react100.useState)(false);
+  const linkElementEnabled = (0, import_react100.useMemo)(() => {
     return enabledBuiltInElements.some((element) => element.type === "link");
   }, [enabledBuiltInElements]);
-  const enabledLists = (0, import_react97.useMemo)(() => {
+  const enabledLists = (0, import_react100.useMemo)(() => {
     return new Set(
       enabledBuiltInElements.filter((element) => ["orderedList", "unorderedList"].includes(element.type)).map((element) => element.type)
     );
   }, [enabledBuiltInElements]);
-  const updateToolbar = (0, import_react97.useCallback)(() => {
+  const quoteElementEnabled = (0, import_react100.useMemo)(() => {
+    return enabledBuiltInElements.some((element) => element.type === "quote");
+  }, [enabledBuiltInElements]);
+  const codeElementEnabled = (0, import_react100.useMemo)(() => {
+    return enabledBuiltInElements.some((element) => element.type === "code");
+  }, [enabledBuiltInElements]);
+  const updateToolbar = (0, import_react100.useCallback)(() => {
     const selection = (0, import_lexical4.$getSelection)();
     if (!(0, import_lexical4.$isRangeSelection)(selection)) {
       return;
@@ -16620,7 +16872,7 @@ var RichTextToolbar = ({ config }) => {
       setIsLink(false);
     }
   }, [editor, enabledBuiltInFormats]);
-  (0, import_react97.useEffect)(() => {
+  (0, import_react100.useEffect)(() => {
     return editor.registerCommand(
       import_lexical4.SELECTION_CHANGE_COMMAND,
       (_payload) => {
@@ -16630,7 +16882,7 @@ var RichTextToolbar = ({ config }) => {
       import_lexical4.COMMAND_PRIORITY_CRITICAL
     );
   }, [editor, updateToolbar]);
-  (0, import_react97.useEffect)(() => {
+  (0, import_react100.useEffect)(() => {
     return editor.registerUpdateListener(({ editorState }) => {
       requestAnimationFrame(() => {
         editorState.read(() => {
@@ -16639,18 +16891,65 @@ var RichTextToolbar = ({ config }) => {
       });
     });
   }, [editor, updateToolbar]);
-  if (!showToolbar) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { css: toolbar, children: [
-    enabledTextualElements.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+  const clearFormatting2 = (0, import_react100.useCallback)(() => {
+    editor.update(() => {
+      const selection = (0, import_lexical4.$getSelection)();
+      if ((0, import_lexical4.$isRangeSelection)(selection)) {
+        const anchor = selection.anchor;
+        const focus = selection.focus;
+        const nodes = selection.getNodes();
+        if (anchor.key === focus.key && anchor.offset === focus.offset) {
+          return;
+        }
+        nodes.forEach((node, idx) => {
+          if ((0, import_lexical4.$isTextNode)(node)) {
+            if (idx === 0 && anchor.offset !== 0) {
+              node = node.splitText(anchor.offset)[1] || node;
+            }
+            if (idx === nodes.length - 1) {
+              node = node.splitText(focus.offset)[0] || node;
+            }
+            if (node.__style !== "") {
+              node.setStyle("");
+            }
+            if (node.__format !== 0) {
+              node.setFormat(0);
+              (0, import_utils5.$getNearestBlockElementAncestorOrThrow)(node).setFormat("");
+            }
+          } else if ((0, import_rich_text.$isHeadingNode)(node) || (0, import_rich_text.$isQuoteNode)(node)) {
+            node.replace((0, import_lexical4.$createParagraphNode)(), true);
+          } else if ((0, import_LexicalDecoratorBlockNode.$isDecoratorBlockNode)(node)) {
+            node.setFormat("");
+          }
+        });
+      }
+      updateToolbar();
+    });
+  }, [editor, updateToolbar]);
+  const elementsThatShouldBeVisibleInDropdown = (0, import_react100.useMemo)(() => {
+    if (activeElement === "paragraph") {
+      return enabledTextualElements;
+    }
+    if (enabledBuiltInElements.some((element) => element.type === activeElement)) {
+      return enabledTextualElements;
+    }
+    return [
+      ...enabledTextualElements,
+      {
+        label: elementTypeToLabel(activeElement),
+        type: activeElement
+      }
+    ];
+  }, [enabledBuiltInElements, enabledTextualElements, activeElement]);
+  return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { css: toolbar, children: [
+    elementsThatShouldBeVisibleInDropdown.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
       Menu,
       {
         menuLabel: "Elements",
-        menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("button", { css: toolbarButton, title: "Text formatting", children: [
-          enabledTextualElements.some((textualElement) => textualElement.type === activeElement) ? elementTypeToLabel(activeElement) : elementTypeToLabel("paragraph"),
+        menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("button", { css: toolbarButton, title: "Text formatting", children: [
+          elementsThatShouldBeVisibleInDropdown.some((element) => element.type === activeElement) ? elementTypeToLabel(activeElement) : elementTypeToLabel("paragraph"),
           " ",
-          /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
+          /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
         ] }),
         placement: "bottom-start",
         children: [
@@ -16658,8 +16957,8 @@ var RichTextToolbar = ({ config }) => {
             label: "Normal",
             type: "paragraph"
           },
-          ...enabledTextualElements
-        ].map((element) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+          ...elementsThatShouldBeVisibleInDropdown
+        ].map((element) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
           MenuItem,
           {
             onClick: () => {
@@ -16671,24 +16970,24 @@ var RichTextToolbar = ({ config }) => {
         ))
       }
     ) : null,
-    enabledBuiltInFormatsWithIcon.length > 0 || enabledBuiltInFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { css: toolbarGroup, children: [
-      enabledBuiltInFormatsWithIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+    enabledBuiltInFormatsWithIcon.length > 0 || enabledBuiltInFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { css: toolbarGroup, children: [
+      enabledBuiltInFormatsWithIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
         "button",
         {
           onClick: () => {
             editor.dispatchCommand(import_lexical4.FORMAT_TEXT_COMMAND, format.type);
           },
           css: [toolbarButton, activeFormats.includes(format.type) ? toolbarButtonActive : null],
-          children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(ToolbarIcon, { icon: formatsWithIcon.get(format.type) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(ToolbarIcon, { icon: formatsWithIcon.get(format.type) })
         }
       ) }, format.type)),
-      enabledBuiltInFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+      enabledBuiltInFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
         Menu,
         {
           menuLabel: "Text formatting",
-          menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("button", { css: toolbarButton, title: "Text formatting", children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Icon, { icon: "more-alt", css: toolbarIcon }) }),
+          menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("button", { css: toolbarButton, title: "Text formatting", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Icon, { icon: "more-alt", css: toolbarIcon }) }),
           placement: "bottom-start",
-          children: enabledBuiltInFormatsWithoutIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+          children: enabledBuiltInFormatsWithoutIcon.map((format) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
             MenuItem,
             {
               onClick: () => {
@@ -16701,46 +17000,87 @@ var RichTextToolbar = ({ config }) => {
         }
       ) : null
     ] }) : null,
-    linkElementEnabled || enabledLists.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { css: toolbarGroup, children: [
-      linkElementEnabled ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+    linkElementEnabled || enabledLists.size > 0 || quoteElementEnabled || codeElementEnabled ? /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { css: toolbarGroup, children: [
+      linkElementEnabled ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
         "button",
         {
           onClick: () => {
             editor.dispatchCommand(OPEN_LINK_NODE_MODAL_COMMAND, {});
           },
           css: [toolbarButton, isLink ? toolbarButtonActive : null],
-          children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(ToolbarIcon, { icon: "link" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(ToolbarIcon, { icon: "link" })
         }
       ) }) : null,
-      enabledLists.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(import_jsx_runtime89.Fragment, { children: [
-        enabledLists.has("unorderedList") ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Tooltip, { title: "Bullet list", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+      enabledLists.size > 0 ? /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(import_jsx_runtime91.Fragment, { children: [
+        enabledLists.has("unorderedList") ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Tooltip, { title: "Bullet list", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
           "button",
           {
             onClick: () => {
               activeElement === "unorderedList" ? editor.dispatchCommand(import_list2.REMOVE_LIST_COMMAND, void 0) : editor.dispatchCommand(import_list2.INSERT_UNORDERED_LIST_COMMAND, void 0);
             },
             css: [toolbarButton, activeElement === "unorderedList" ? toolbarButtonActive : null],
-            children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(ToolbarIcon, { icon: "layout-list" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(ToolbarIcon, { icon: "layout-list" })
           }
         ) }) : null,
-        enabledLists.has("orderedList") ? /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(Tooltip, { title: "Numbered list", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+        enabledLists.has("orderedList") ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Tooltip, { title: "Numbered list", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
           "button",
           {
             onClick: () => {
               activeElement === "orderedList" ? editor.dispatchCommand(import_list2.REMOVE_LIST_COMMAND, void 0) : editor.dispatchCommand(import_list2.INSERT_ORDERED_LIST_COMMAND, void 0);
             },
             css: [toolbarButton, activeElement === "orderedList" ? toolbarButtonActive : null],
-            children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(ToolbarIcon, { icon: "layout-list-numbered" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(ToolbarIcon, { icon: "layout-list-numbered" })
           }
         ) }) : null
-      ] }) : null
-    ] }) : null
+      ] }) : null,
+      quoteElementEnabled ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+        "button",
+        {
+          onClick: () => {
+            activeElement === "quote" ? onSelectElement("paragraph") : onSelectElement("quote");
+          },
+          css: [toolbarButton, activeElement === "quote" ? toolbarButtonActive : null],
+          children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(ToolbarIcon, { icon: "quote" })
+        }
+      ) }) : null,
+      codeElementEnabled ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Tooltip, { title: "Code", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+        "button",
+        {
+          onClick: () => {
+            activeElement === "code" ? onSelectElement("paragraph") : onSelectElement("code");
+          },
+          css: [toolbarButton, activeElement === "code" ? toolbarButtonActive : null],
+          children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(ToolbarIcon, { icon: "code-slash" })
+        }
+      ) }) : null
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+      "div",
+      {
+        css: [
+          toolbarGroup,
+          {
+            marginLeft: "auto"
+          }
+        ],
+        children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Tooltip, { title: "Clear formatting", placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+          "button",
+          {
+            onClick: () => {
+              clearFormatting2();
+            },
+            css: [toolbarButton],
+            children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(ToolbarIcon, { icon: "clear-formatting" })
+          }
+        ) })
+      }
+    )
   ] });
 };
 var RichTextToolbar_default = RichTextToolbar;
 
 // src/components/ParameterInputs/ParameterRichText.tsx
-var import_jsx_runtime90 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime92 = require("@emotion/react/jsx-runtime");
 var ParameterRichText = ({
   label,
   labelLeadingIcon,
@@ -16761,7 +17101,7 @@ var ParameterRichText = ({
   editorInputClassName,
   editorFooter
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
     ParameterShell,
     {
       "data-test-id": "parameter-input",
@@ -16775,7 +17115,7 @@ var ParameterRichText = ({
       captionTestId,
       menuItems,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
           ParameterRichTextInner,
           {
             value,
@@ -16789,23 +17129,23 @@ var ParameterRichText = ({
             editorFooter
           }
         ),
-        menuItems ? /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_jsx_runtime90.Fragment, { children: menuItems }) }) : null
+        menuItems ? /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_jsx_runtime92.Fragment, { children: menuItems }) }) : null
       ]
     }
   );
 };
-var editorWrapper = import_react98.css`
+var editorWrapper = import_react101.css`
   display: flex;
   flex-flow: column;
   flex-grow: 1;
 `;
-var editorContainer = import_react98.css`
+var editorContainer = import_react101.css`
   display: flex;
   flex-flow: column;
   flex-grow: 1;
   position: relative;
 `;
-var editorPlaceholder = import_react98.css`
+var editorPlaceholder = import_react101.css`
   color: var(--gray-500);
   font-style: italic;
   /* 1px is added to make sure caret is clearly visible when field is focused
@@ -16816,11 +17156,11 @@ var editorPlaceholder = import_react98.css`
   top: var(--spacing-xs);
   user-select: none;
 `;
-var editorInput = import_react98.css`
+var editorInput = import_react101.css`
   background: var(--white);
   border: 1px solid var(--white);
   border-radius: var(--rounded-sm);
-  color: var(--gray-700);
+  color: var(--gray-900);
   flex-grow: 1;
   font-size: var(--fs-base);
   line-height: 1.2;
@@ -16852,7 +17192,7 @@ var ParameterRichTextInner = ({
       console.error(error);
     },
     editorState: value ? JSON.stringify(value) : void 0,
-    nodes: [import_list3.ListNode, import_list3.ListItemNode, LinkNode, import_rich_text2.HeadingNode, import_lexical5.ParagraphNode],
+    nodes: [import_list3.ListNode, import_list3.ListItemNode, LinkNode, import_rich_text2.HeadingNode, import_rich_text2.QuoteNode, import_code2.CodeNode, import_lexical5.ParagraphNode],
     theme: {
       text: {
         bold: textBold,
@@ -16881,12 +17221,14 @@ var ParameterRichTextInner = ({
         nested: {
           listitem: nestedListItemElement
         }
-      }
+      },
+      quote: blockquoteElement,
+      code: codeElement
     },
     editable: !readOnly
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(import_jsx_runtime90.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_LexicalComposer.LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(import_jsx_runtime92.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_LexicalComposer.LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
       RichText,
       {
         onChange,
@@ -16908,14 +17250,14 @@ var RichText = ({
   readOnly,
   editorInputClassName
 }) => {
-  const editorContainerRef = (0, import_react99.useRef)(null);
+  const editorContainerRef = (0, import_react102.useRef)(null);
   const [editor] = (0, import_LexicalComposerContext4.useLexicalComposerContext)();
-  (0, import_react99.useEffect)(() => {
+  (0, import_react102.useEffect)(() => {
     if (onRichTextInit) {
       onRichTextInit(editor);
     }
   }, [editor, onRichTextInit]);
-  (0, import_react99.useEffect)(() => {
+  (0, import_react102.useEffect)(() => {
     const removeUpdateListener = editor.registerUpdateListener(({ editorState, prevEditorState }) => {
       requestAnimationFrame(() => {
         if (!(0, import_fast_equals2.deepEqual)(editorState.toJSON(), prevEditorState.toJSON())) {
@@ -16927,38 +17269,38 @@ var RichText = ({
       removeUpdateListener();
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(import_jsx_runtime90.Fragment, { children: [
-    readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(RichTextToolbar_default, { config }),
-    /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { css: editorContainer, ref: editorContainerRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(import_jsx_runtime92.Fragment, { children: [
+    readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(RichTextToolbar_default, { config }),
+    /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { css: editorContainer, ref: editorContainerRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
         import_LexicalRichTextPlugin.RichTextPlugin,
         {
-          contentEditable: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_LexicalContentEditable.ContentEditable, { css: editorInput, className: editorInputClassName }),
-          placeholder: /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
+          contentEditable: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_LexicalContentEditable.ContentEditable, { css: editorInput, className: editorInputClassName }),
+          placeholder: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
           ErrorBoundary: import_LexicalErrorBoundary.default
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_LexicalListPlugin.ListPlugin, {}),
-      readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(import_LexicalHistoryPlugin.HistoryPlugin, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(LinkNodePlugin, { onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve() }),
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(ListIndentPlugin, { maxDepth: 4 })
+      /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_LexicalListPlugin.ListPlugin, {}),
+      readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_LexicalHistoryPlugin.HistoryPlugin, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(LinkNodePlugin, { onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve() }),
+      /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(ListIndentPlugin, { maxDepth: 4 })
     ] })
   ] });
 };
 
 // src/components/ParameterInputs/ParameterSelect.tsx
-var import_react100 = require("react");
-var import_jsx_runtime91 = require("@emotion/react/jsx-runtime");
-var ParameterSelect = (0, import_react100.forwardRef)(
+var import_react103 = require("react");
+var import_jsx_runtime93 = require("@emotion/react/jsx-runtime");
+var ParameterSelect = (0, import_react103.forwardRef)(
   ({ defaultOption, options, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
-    return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
   }
 );
-var ParameterSelectInner = (0, import_react100.forwardRef)(
+var ParameterSelectInner = (0, import_react103.forwardRef)(
   ({ defaultOption, options, ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
-    return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(
       "select",
       {
         css: [input2, selectInput],
@@ -16967,10 +17309,10 @@ var ParameterSelectInner = (0, import_react100.forwardRef)(
         ref,
         ...props,
         children: [
-          defaultOption ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("option", { value: "", children: defaultOption }) : null,
+          defaultOption ? /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("option", { value: "", children: defaultOption }) : null,
           options.map((option) => {
             var _a;
-            return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
+            return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
           })
         ]
       }
@@ -16979,15 +17321,15 @@ var ParameterSelectInner = (0, import_react100.forwardRef)(
 );
 
 // src/components/ParameterInputs/ParameterTextarea.tsx
-var import_react101 = require("react");
-var import_jsx_runtime92 = require("@emotion/react/jsx-runtime");
-var ParameterTextarea = (0, import_react101.forwardRef)((props, ref) => {
+var import_react104 = require("react");
+var import_jsx_runtime94 = require("@emotion/react/jsx-runtime");
+var ParameterTextarea = (0, import_react104.forwardRef)((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(ParameterShell, { "data-test-id": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(ParameterTextareaInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(ParameterShell, { "data-test-id": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(ParameterTextareaInner, { ref, ...innerProps }) });
 });
-var ParameterTextareaInner = (0, import_react101.forwardRef)(({ ...props }, ref) => {
+var ParameterTextareaInner = (0, import_react104.forwardRef)(({ ...props }, ref) => {
   const { id, label, hiddenLabel } = useParameterShell();
-  return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
     "textarea",
     {
       css: [input2, textarea2],
@@ -17000,18 +17342,18 @@ var ParameterTextareaInner = (0, import_react101.forwardRef)(({ ...props }, ref)
 });
 
 // src/components/ParameterInputs/ParameterToggle.tsx
-var import_react102 = require("react");
-var import_jsx_runtime93 = require("@emotion/react/jsx-runtime");
-var ParameterToggle = (0, import_react102.forwardRef)((props, ref) => {
+var import_react105 = require("react");
+var import_jsx_runtime95 = require("@emotion/react/jsx-runtime");
+var ParameterToggle = (0, import_react105.forwardRef)((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(ParameterToggleInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(ParameterShell, { ...shellProps, children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(ParameterToggleInner, { ref, ...innerProps }) });
 });
-var ParameterToggleInner = (0, import_react102.forwardRef)(
+var ParameterToggleInner = (0, import_react105.forwardRef)(
   ({ ...props }, ref) => {
     const { id, label } = useParameterShell();
-    return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("label", { css: inputToggleLabel2, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
-      /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("span", { css: inlineLabel2, children: label })
+    return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("label", { css: inputToggleLabel2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
+      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { css: inlineLabel2, children: label })
     ] });
   }
 );
@@ -17019,7 +17361,7 @@ var ParameterToggleInner = (0, import_react102.forwardRef)(
 // src/components/Popover/Popover.tsx
 var import_Popover = require("reakit/Popover");
 var import_Portal2 = require("reakit/Portal");
-var import_jsx_runtime94 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime96 = require("@emotion/react/jsx-runtime");
 var Popover2 = ({
   iconColor = "action",
   icon = "info",
@@ -17031,38 +17373,38 @@ var Popover2 = ({
   children
 }) => {
   const popover = (0, import_Popover.usePopoverState)({ placement });
-  return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(import_jsx_runtime94.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(import_Popover.PopoverDisclosure, { ...popover, css: PopoverBtn, title: buttonText, "data-test-id": testId, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Icon, { icon, iconColor, size: iconSize }),
-      /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("span", { hidden: true, children: buttonText })
+  return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(import_jsx_runtime96.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(import_Popover.PopoverDisclosure, { ...popover, css: PopoverBtn, title: buttonText, "data-test-id": testId, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(Icon, { icon, iconColor, size: iconSize }),
+      /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { hidden: true, children: buttonText })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_Portal2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(import_Popover.Popover, { css: Popover, ...popover, "aria-label": ariaLabel, children }) })
+    /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_Portal2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_Popover.Popover, { css: Popover, ...popover, "aria-label": ariaLabel, children }) })
   ] });
 };
 
 // src/components/ProgressList/ProgressList.tsx
-var import_react104 = require("@emotion/react");
-var import_react105 = require("react");
+var import_react107 = require("@emotion/react");
+var import_react108 = require("react");
 var import_cg18 = require("react-icons/cg");
 
 // src/components/ProgressList/styles/ProgressList.styles.ts
-var import_react103 = require("@emotion/react");
-var progressListStyles = import_react103.css`
+var import_react106 = require("@emotion/react");
+var progressListStyles = import_react106.css`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
   list-style-type: none;
 `;
-var progressListItemStyles = import_react103.css`
+var progressListItemStyles = import_react106.css`
   display: flex;
   gap: var(--spacing-base);
   align-items: center;
 `;
 
 // src/components/ProgressList/ProgressList.tsx
-var import_jsx_runtime95 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime97 = require("@emotion/react/jsx-runtime");
 var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
-  const itemsWithStatus = (0, import_react105.useMemo)(() => {
+  const itemsWithStatus = (0, import_react108.useMemo)(() => {
     const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
     return items.map((item, index) => {
       let status = "queued";
@@ -17074,8 +17416,8 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
       return { ...item, status };
     });
   }, [items, inProgressId]);
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
       ProgressListItem,
       {
         status,
@@ -17095,7 +17437,7 @@ var ProgressListItem = ({
   errorLevel = "danger",
   autoEllipsis = false
 }) => {
-  const Icon2 = (0, import_react105.useMemo)(() => {
+  const Icon2 = (0, import_react108.useMemo)(() => {
     if (error) {
       return warningIcon;
     }
@@ -17106,14 +17448,14 @@ var ProgressListItem = ({
     };
     return iconPerStatus[status];
   }, [status, error]);
-  const statusStyles = (0, import_react105.useMemo)(() => {
+  const statusStyles = (0, import_react108.useMemo)(() => {
     if (error) {
-      return errorLevel === "caution" ? import_react104.css`
+      return errorLevel === "caution" ? import_react107.css`
             color: rgb(161, 98, 7);
             & svg {
               color: rgb(250, 204, 21);
             }
-          ` : import_react104.css`
+          ` : import_react107.css`
             color: rgb(185, 28, 28);
             & svg {
               color: var(--brand-primary-2);
@@ -17121,35 +17463,35 @@ var ProgressListItem = ({
           `;
     }
     const colorPerStatus = {
-      completed: import_react104.css`
+      completed: import_react107.css`
         opacity: 0.75;
       `,
-      inProgress: import_react104.css`
+      inProgress: import_react107.css`
         -webkit-text-stroke-width: thin;
       `,
-      queued: import_react104.css`
+      queued: import_react107.css`
         opacity: 0.5;
       `
     };
     return colorPerStatus[status];
   }, [status, error, errorLevel]);
-  return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("li", { css: [progressListItemStyles, statusStyles], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(Icon2, { size: 20 }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)("div", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("li", { css: [progressListItemStyles, statusStyles], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(Icon2, { size: 20 }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { children: [
       children,
-      /* @__PURE__ */ (0, import_jsx_runtime95.jsx)("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
+      /* @__PURE__ */ (0, import_jsx_runtime97.jsx)("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
     ] })
   ] });
 };
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-var import_react107 = require("@emotion/react");
-var import_react108 = require("react");
+var import_react110 = require("@emotion/react");
+var import_react111 = require("react");
 var import_cg19 = require("react-icons/cg");
 
 // src/components/SegmentedControl/SegmentedControl.styles.ts
-var import_react106 = require("@emotion/react");
-var segmentedControlStyles = import_react106.css`
+var import_react109 = require("@emotion/react");
+var segmentedControlStyles = import_react109.css`
   --segmented-control-rounded-value: var(--rounded-base);
   --segmented-control-border-width: 1px;
   --segmented-control-selected-color: var(--brand-secondary-3);
@@ -17168,14 +17510,14 @@ var segmentedControlStyles = import_react106.css`
   border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
   font-size: var(--fs-xs);
 `;
-var segmentedControlVerticalStyles = import_react106.css`
+var segmentedControlVerticalStyles = import_react109.css`
   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 = import_react106.css`
+var segmentedControlItemStyles = import_react109.css`
   &:first-of-type label {
     border-radius: var(--segmented-control-first-border-radius);
   }
@@ -17183,10 +17525,10 @@ var segmentedControlItemStyles = import_react106.css`
     border-radius: var(--segmented-control-last-border-radius);
   }
 `;
-var segmentedControlInputStyles = import_react106.css`
+var segmentedControlInputStyles = import_react109.css`
   ${accessibleHidden}
 `;
-var segmentedControlLabelStyles = import_react106.css`
+var segmentedControlLabelStyles = import_react109.css`
   position: relative;
   display: flex;
   align-items: center;
@@ -17223,23 +17565,23 @@ var segmentedControlLabelStyles = import_react106.css`
     background-color: var(--gray-400);
   }
 `;
-var segmentedControlLabelIconOnlyStyles = import_react106.css`
+var segmentedControlLabelIconOnlyStyles = import_react109.css`
   padding-inline: 0.5em;
 `;
-var segmentedControlLabelCheckStyles = import_react106.css`
+var segmentedControlLabelCheckStyles = import_react109.css`
   opacity: 0.5;
 `;
-var segmentedControlLabelContentStyles = import_react106.css`
+var segmentedControlLabelContentStyles = import_react109.css`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-sm);
   height: 100%;
 `;
-var segmentedControlLabelTextStyles = import_react106.css``;
+var segmentedControlLabelTextStyles = import_react109.css``;
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-var import_jsx_runtime96 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime98 = require("@emotion/react/jsx-runtime");
 var SegmentedControl = ({
   name,
   options,
@@ -17251,7 +17593,7 @@ var SegmentedControl = ({
   size = "md",
   ...props
 }) => {
-  const onOptionChange = (0, import_react108.useCallback)(
+  const onOptionChange = (0, import_react111.useCallback)(
     (event) => {
       if (event.target.checked) {
         onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
@@ -17259,18 +17601,18 @@ var SegmentedControl = ({
     },
     [options, onChange]
   );
-  const sizeStyles = (0, import_react108.useMemo)(() => {
+  const sizeStyles = (0, import_react111.useMemo)(() => {
     const map = {
-      sm: (0, import_react107.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
-      md: (0, import_react107.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
-      lg: (0, import_react107.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
+      sm: (0, import_react110.css)({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
+      md: (0, import_react110.css)({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
+      lg: (0, import_react110.css)({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
     };
     return map[size];
   }, [size]);
-  const isIconOnly = (0, import_react108.useMemo)(() => {
+  const isIconOnly = (0, import_react111.useMemo)(() => {
     return options.every((option) => option.icon && !option.label);
   }, [options]);
-  return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
     "div",
     {
       css: [segmentedControlStyles, orientation === "vertical" ? segmentedControlVerticalStyles : void 0],
@@ -17278,11 +17620,11 @@ var SegmentedControl = ({
       children: options.map((option, index) => {
         const text = option.label ? option.label : option.icon ? null : String(option.value);
         const isDisabled = disabled || option.disabled;
-        return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
           Tooltip,
           {
             title: isDisabled || !option.tooltip ? "" : option.tooltip,
-            children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("div", { css: segmentedControlItemStyles, "data-test-id": "container-segmented-control", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("div", { css: segmentedControlItemStyles, "data-test-id": "container-segmented-control", children: /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
               "label",
               {
                 css: [
@@ -17291,7 +17633,7 @@ var SegmentedControl = ({
                   isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
                 ],
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(
                     "input",
                     {
                       css: segmentedControlInputStyles,
@@ -17303,10 +17645,10 @@ var SegmentedControl = ({
                       disabled: isDisabled
                     }
                   ),
-                  option.value !== value || noCheckmark ? null : /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_cg19.CgCheck, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("span", { css: segmentedControlLabelContentStyles, children: [
-                    !option.icon ? null : /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(option.icon, { size: "1.5em" }),
-                    !text ? null : /* @__PURE__ */ (0, import_jsx_runtime96.jsx)("span", { css: segmentedControlLabelTextStyles, children: text })
+                  option.value !== value || noCheckmark ? null : /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(import_cg19.CgCheck, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("span", { css: segmentedControlLabelContentStyles, children: [
+                    !option.icon ? null : /* @__PURE__ */ (0, import_jsx_runtime98.jsx)(option.icon, { size: "1.5em" }),
+                    !text ? null : /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { css: segmentedControlLabelTextStyles, children: text })
                   ] })
                 ]
               }
@@ -17320,18 +17662,18 @@ var SegmentedControl = ({
 };
 
 // src/components/Skeleton/Skeleton.styles.ts
-var import_react109 = require("@emotion/react");
-var lightFadingOut = import_react109.keyframes`
+var import_react112 = require("@emotion/react");
+var lightFadingOut = import_react112.keyframes`
   from { opacity: 0.1; }
   to { opacity: 0.025; }
 `;
-var skeletonStyles = import_react109.css`
+var skeletonStyles = import_react112.css`
   animation: ${lightFadingOut} 1s ease-out infinite alternate;
   background-color: var(--gray-900);
 `;
 
 // src/components/Skeleton/Skeleton.tsx
-var import_jsx_runtime97 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime99 = require("@emotion/react/jsx-runtime");
 var Skeleton = ({
   width = "100%",
   height = "1.25rem",
@@ -17339,7 +17681,7 @@ var Skeleton = ({
   circle = false,
   children,
   ...otherProps
-}) => /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(
   "div",
   {
     css: [
@@ -17359,11 +17701,11 @@ var Skeleton = ({
 );
 
 // src/components/Switch/Switch.tsx
-var React19 = __toESM(require("react"));
+var React20 = __toESM(require("react"));
 
 // src/components/Switch/Switch.styles.ts
-var import_react110 = require("@emotion/react");
-var SwitchInputContainer = import_react110.css`
+var import_react113 = require("@emotion/react");
+var SwitchInputContainer = import_react113.css`
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -17372,7 +17714,7 @@ var SwitchInputContainer = import_react110.css`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = import_react110.css`
+var SwitchInput = import_react113.css`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -17410,7 +17752,7 @@ var SwitchInput = import_react110.css`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = import_react110.css`
+var SwitchInputDisabled = import_react113.css`
   opacity: var(--opacity-50);
   cursor: not-allowed;
 
@@ -17418,7 +17760,7 @@ var SwitchInputDisabled = import_react110.css`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = import_react110.css`
+var SwitchInputLabel = import_react113.css`
   align-items: center;
   color: var(--brand-secondary-1);
   display: inline-flex;
@@ -17440,103 +17782,103 @@ var SwitchInputLabel = import_react110.css`
     top: 0;
   }
 `;
-var SwitchText = import_react110.css`
+var SwitchText = import_react113.css`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   padding-inline: var(--spacing-2xl) 0;
 `;
 
 // src/components/Switch/Switch.tsx
-var import_jsx_runtime98 = require("@emotion/react/jsx-runtime");
-var Switch = React19.forwardRef(
+var import_jsx_runtime100 = require("@emotion/react/jsx-runtime");
+var Switch = React20.forwardRef(
   ({ label, infoText, toggleText, children, ...inputProps }, ref) => {
     let additionalText = infoText;
     if (infoText && toggleText) {
       additionalText = inputProps.checked ? toggleText : infoText;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(import_jsx_runtime98.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
-        /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
-        /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("span", { css: SwitchInputLabel, children: label })
+    return /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(import_jsx_runtime100.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
+        /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("span", { css: SwitchInputLabel, children: label })
       ] }),
-      additionalText ? /* @__PURE__ */ (0, import_jsx_runtime98.jsx)("p", { css: SwitchText, children: additionalText }) : null,
+      additionalText ? /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("p", { css: SwitchText, children: additionalText }) : null,
       children
     ] });
   }
 );
 
 // src/components/Table/Table.tsx
-var React20 = __toESM(require("react"));
+var React21 = __toESM(require("react"));
 
 // src/components/Table/Table.styles.ts
-var import_react111 = require("@emotion/react");
-var table = import_react111.css`
+var import_react114 = require("@emotion/react");
+var table = import_react114.css`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
   table-layout: auto;
 `;
-var tableHead = import_react111.css`
+var tableHead = import_react114.css`
   background: var(--gray-100);
   color: var(--brand-secondary-1);
   text-align: left;
 `;
-var tableRow = import_react111.css`
+var tableRow = import_react114.css`
   border-bottom: 1px solid var(--gray-200);
 `;
-var tableCellHead = import_react111.css`
+var tableCellHead = import_react114.css`
   font-size: var(--fs-sm);
   padding: var(--spacing-base) var(--spacing-md);
   text-transform: uppercase;
   font-weight: var(--fw-bold);
 `;
-var tableCellData = import_react111.css`
+var tableCellData = import_react114.css`
   padding: var(--spacing-base) var(--spacing-md);
 `;
 
 // src/components/Table/Table.tsx
-var import_jsx_runtime99 = require("@emotion/react/jsx-runtime");
-var Table = React20.forwardRef(({ children, ...otherProps }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("table", { ref, css: table, ...otherProps, children });
+var import_jsx_runtime101 = require("@emotion/react/jsx-runtime");
+var Table = React21.forwardRef(({ children, ...otherProps }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("table", { ref, css: table, ...otherProps, children });
 });
-var TableHead = React20.forwardRef(
+var TableHead = React21.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
-var TableBody = React20.forwardRef(
+var TableBody = React21.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("tbody", { ref, ...otherProps, children });
   }
 );
-var TableFoot = React20.forwardRef(
+var TableFoot = React21.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("tfoot", { ref, ...otherProps, children });
   }
 );
-var TableRow = React20.forwardRef(
+var TableRow = React21.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
-var TableCellHead = React20.forwardRef(
+var TableCellHead = React21.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
-var TableCellData = React20.forwardRef(
+var TableCellData = React21.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("td", { ref, css: tableCellData, ...otherProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("td", { ref, css: tableCellData, ...otherProps, children });
   }
 );
 
 // src/components/Tabs/Tabs.tsx
-var import_react113 = require("react");
+var import_react116 = require("react");
 var import_Tab = require("reakit/Tab");
 
 // src/components/Tabs/Tabs.styles.ts
-var import_react112 = require("@emotion/react");
-var tabButtonStyles = import_react112.css`
+var import_react115 = require("@emotion/react");
+var tabButtonStyles = import_react115.css`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -17553,30 +17895,30 @@ var tabButtonStyles = import_react112.css`
     box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
   }
 `;
-var tabButtonGroupStyles = import_react112.css`
+var tabButtonGroupStyles = import_react115.css`
   display: flex;
   gap: var(--spacing-base);
   border-bottom: 1px solid var(--gray-300);
 `;
 
 // src/components/Tabs/Tabs.tsx
-var import_jsx_runtime100 = require("@emotion/react/jsx-runtime");
-var CurrentTabContext = (0, import_react113.createContext)(null);
+var import_jsx_runtime102 = require("@emotion/react/jsx-runtime");
+var CurrentTabContext = (0, import_react116.createContext)(null);
 var useCurrentTab = () => {
-  const context = (0, import_react113.useContext)(CurrentTabContext);
+  const context = (0, import_react116.useContext)(CurrentTabContext);
   if (!context) {
     throw new Error("This component can only be used inside <Tabs>");
   }
   return context;
 };
 var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...props }) => {
-  const selected = (0, import_react113.useMemo)(() => {
+  const selected = (0, import_react116.useMemo)(() => {
     if (selectedId)
       return selectedId;
     return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
   }, [selectedId, useHashForState]);
   const tab = (0, import_Tab.useTabState)({ ...props, selectedId: selected });
-  (0, import_react113.useEffect)(() => {
+  (0, import_react116.useEffect)(() => {
     var _a;
     const selectedValueWithoutNull = (_a = tab.selectedId) != null ? _a : void 0;
     onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
@@ -17584,29 +17926,29 @@ var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...prop
       window.location.hash = selectedValueWithoutNull != null ? selectedValueWithoutNull : "";
     }
   }, [tab.selectedId, onSelectedIdChange, useHashForState]);
-  (0, import_react113.useEffect)(() => {
+  (0, import_react116.useEffect)(() => {
     if (selected && selected !== tab.selectedId) {
       tab.setSelectedId(selected);
     }
   }, [selected]);
-  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(CurrentTabContext.Provider, { value: tab, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(CurrentTabContext.Provider, { value: tab, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_Tab.TabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(import_Tab.TabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({ children, id, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_Tab.Tab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(import_Tab.Tab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({ children, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_Tab.TabPanel, { ...props, ...currentTab, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(import_Tab.TabPanel, { ...props, ...currentTab, children });
 };
 
 // src/components/Validation/StatusBullet.styles.ts
-var import_react114 = require("@emotion/react");
-var StatusBulletContainer = import_react114.css`
+var import_react117 = require("@emotion/react");
+var StatusBulletContainer = import_react117.css`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -17623,51 +17965,51 @@ var StatusBulletContainer = import_react114.css`
     display: block;
   }
 `;
-var StatusBulletBase = import_react114.css`
+var StatusBulletBase = import_react117.css`
   font-size: var(--fs-sm);
   &:before {
     width: var(--fs-xs);
     height: var(--fs-xs);
   }
 `;
-var StatusBulletSmall = import_react114.css`
+var StatusBulletSmall = import_react117.css`
   font-size: var(--fs-xs);
   &:before {
     width: var(--fs-xxs);
     height: var(--fs-xxs);
   }
 `;
-var StatusDraft = import_react114.css`
+var StatusDraft = import_react117.css`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
   }
 `;
-var StatusModified = import_react114.css`
+var StatusModified = import_react117.css`
   &:before {
     background: linear-gradient(to right, var(--white) 50%, var(--primary-action-default) 50% 100%);
     box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
   }
 `;
-var StatusError = import_react114.css`
+var StatusError = import_react117.css`
   color: var(--error);
   &:before {
     background: linear-gradient(120deg, var(--error) 40%, var(--white) 50%, var(--error) 60%);
   }
 `;
-var StatusPublished = import_react114.css`
+var StatusPublished = import_react117.css`
   &:before {
     background: var(--primary-action-default);
   }
 `;
-var StatusOrphan = import_react114.css`
+var StatusOrphan = import_react117.css`
   &:before {
     background: var(--brand-secondary-5);
   }
 `;
 
 // src/components/Validation/StatusBullet.tsx
-var import_jsx_runtime101 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime103 = require("@emotion/react/jsx-runtime");
 var StatusBullet = ({
   status,
   hideText = false,
@@ -17681,10 +18023,11 @@ var StatusBullet = ({
     Unsaved: StatusDraft,
     Orphan: StatusOrphan,
     Published: StatusPublished,
-    Draft: StatusDraft
+    Draft: StatusDraft,
+    Previous: StatusDraft
   };
   const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
-  return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
     "span",
     {
       role: "status",
@@ -17813,7 +18156,9 @@ var StatusBullet = ({
   Tabs,
   Textarea,
   Theme,
+  Tile,
   TileContainer,
+  TileText,
   Tooltip,
   TwoColumnLayout,
   UniformBadge,
@@ -17855,6 +18200,7 @@ var StatusBullet = ({
   inputError,
   inputSelect,
   isMacLike,
+  jsonIcon,
   labelText,
   loaderAnimationData,
   macifyShortcut,