@uniformdev/design-system 19.15.0 → 19.19.0

package/dist/esm/index.js

@@ -56,8 +56,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 */
@@ -579,10 +579,17 @@ var toggleInput = css2`
   }
 
   &: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) => css2`
   font-weight: ${fontWeight === "medium" ? "var(--fw-medium)" : fontWeight === "normal" ? "var(--fw-regular)" : "var(--fw-bold)"};
@@ -1495,6 +1502,74 @@ var formatSubscript = GenIcon({
     }
   ]
 });
+var jsonIcon = 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 = 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,
@@ -1508,12 +1583,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
@@ -10975,7 +11052,7 @@ var Button = React5.forwardRef(
 import { CgChevronDown } from "react-icons/cg";
 
 // src/components/Menu/Menu.tsx
-import * as React6 from "react";
+import * as React7 from "react";
 import {
   Menu as BaseMenu,
   MenuButton,
@@ -10983,66 +11060,16 @@ import {
 } from "reakit/Menu";
 import { Portal } from "reakit/Portal";
 
-// src/components/Menu/Menu.styles.ts
-import { css as css20 } from "@emotion/react";
-var menu = css20`
-  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
-import { jsx as jsx21, jsxs as jsxs11 } from "@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 = useMenuState({ placement, visible: forceVisible });
-  React6.useEffect(() => {
-    if (forceVisible !== void 0) {
-      menuState.setVisible(forceVisible);
-    }
-  });
-  return /* @__PURE__ */ jsxs11(MenuContext.Provider, { value: menuState, children: [
-    /* @__PURE__ */ jsx21(MenuButton, { ...menuState, ref: menuTrigger.ref, ...menuTrigger.props, children: (triggerProps) => React6.cloneElement(menuTrigger, triggerProps) }),
-    /* @__PURE__ */ jsx21(Portal, { children: /* @__PURE__ */ jsx21(
-      BaseMenu,
-      {
-        ...menuState,
-        "aria-label": menuLabel,
-        css: [
-          menu,
-          typeof menuItemsContainerCssClasses === "object" ? menuItemsContainerCssClasses : void 0
-        ],
-        className: typeof menuItemsContainerCssClasses === "string" ? menuItemsContainerCssClasses : "",
-        children
-      }
-    ) })
-  ] });
-};
+// src/components/Menu/filterMenuSeparators.ts
+import React6, { isValidElement } from "react";
 
 // src/components/Menu/MenuGroup.styles.ts
-import { css as css21 } from "@emotion/react";
-var MenuGroupContainer = css21`
+import { css as css20 } from "@emotion/react";
+var MenuGroupContainer = css20`
   display: flex;
   flex-direction: column;
 `;
-var MenuTitle = css21`
+var MenuTitle = css20`
   color: var(--gray-400);
   font-size: var(--fs-xs);
   font-weight: var(--fw-bold);
@@ -11050,21 +11077,17 @@ var MenuTitle = css21`
 `;
 
 // src/components/Menu/MenuGroup.tsx
-import { jsx as jsx22, jsxs as jsxs12 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs11 } from "@emotion/react/jsx-runtime";
 var MenuGroup = ({ title, children }) => {
-  return /* @__PURE__ */ jsxs12("div", { css: MenuGroupContainer, "data-test-id": "menu-group", children: [
-    /* @__PURE__ */ jsx22("span", { css: MenuTitle, children: title }),
+  return /* @__PURE__ */ jsxs11("div", { css: MenuGroupContainer, "data-test-id": "menu-group", children: [
+    /* @__PURE__ */ jsx21("span", { css: MenuTitle, children: title }),
     children
   ] });
 };
 
-// src/components/Menu/MenuItem.tsx
-import * as React7 from "react";
-import { MenuItem as BaseMenuItem } from "reakit";
-
 // src/components/Menu/MenuItem.styles.ts
-import { css as css22 } from "@emotion/react";
-var menuItem = (textTheme) => css22`
+import { css as css21 } from "@emotion/react";
+var menuItem = (textTheme) => css21`
   align-items: center;
   border: none;
   border-radius: var(--rounded-base);
@@ -11090,7 +11113,7 @@ var menuItem = (textTheme) => css22`
     outline: none;
   }
 `;
-var menuItemWithIcon = css22`
+var menuItemWithIcon = css21`
   align-items: center;
   display: flex;
   justify-content: space-between;
@@ -11102,15 +11125,120 @@ var menuItemWithIcon = css22`
     height: var(--spacing-base);
   }
 `;
-var menuItemSeparator = css22`
+var menuItemSeparator = css21`
   border-top: 1px solid var(--gray-300);
   width: 100%;
   margin-block: var(--spacing-sm);
 `;
 
+// src/components/Menu/MenuItemSeparator.tsx
+import { jsx as jsx22 } from "@emotion/react/jsx-runtime";
+var MenuItemSeparator = () => /* @__PURE__ */ jsx22("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 isValidElement(child) && (child.type === React6.Fragment || child.type === MenuGroup);
+}
+function isMenuSeparator(child) {
+  return isValidElement(child) && child.type === MenuItemSeparator;
+}
+
+// src/components/Menu/Menu.styles.ts
+import { css as css22 } from "@emotion/react";
+var menu = css22`
+  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
+import { jsx as jsx23, jsxs as jsxs12 } from "@emotion/react/jsx-runtime";
+var MenuContext = React7.createContext({});
+var useMenuContext = () => {
+  return React7.useContext(MenuContext);
+};
+var Menu = ({
+  menuLabel,
+  menuTrigger,
+  placement = "auto",
+  menuItemsContainerCssClasses,
+  children,
+  forceVisible,
+  disableAutoSeparatorManagement
+}) => {
+  const menuState = useMenuState({ placement, visible: forceVisible });
+  React7.useEffect(() => {
+    if (forceVisible !== void 0) {
+      menuState.setVisible(forceVisible);
+    }
+  });
+  return /* @__PURE__ */ jsxs12(MenuContext.Provider, { value: menuState, children: [
+    /* @__PURE__ */ jsx23(MenuButton, { ...menuState, ref: menuTrigger.ref, ...menuTrigger.props, children: (triggerProps) => React7.cloneElement(menuTrigger, triggerProps) }),
+    /* @__PURE__ */ jsx23(Portal, { children: /* @__PURE__ */ jsx23(
+      BaseMenu,
+      {
+        ...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
-import { jsx as jsx23, jsxs as jsxs13 } from "@emotion/react/jsx-runtime";
-var MenuItem = React7.forwardRef(
+import * as React8 from "react";
+import { MenuItem as BaseMenuItem } from "reakit";
+import { jsx as jsx24, jsxs as jsxs13 } from "@emotion/react/jsx-runtime";
+var MenuItem = React8.forwardRef(
   ({ children, className, hideMenuOnClick = true, icon, textColor = "base", ...props }, ref) => {
     const menuState = useMenuContext();
     const resolveProps = (originalProps) => {
@@ -11126,7 +11254,7 @@ var MenuItem = React7.forwardRef(
     };
     const resolvedProps = hideMenuOnClick ? resolveProps(props) : props;
     const resolvedChildren = typeof children === "function" ? children(resolvedProps) : children;
-    return /* @__PURE__ */ jsx23(
+    return /* @__PURE__ */ jsx24(
       BaseMenuItem,
       {
         ref,
@@ -11149,10 +11277,6 @@ function renderWithIcon(children, icon) {
   ] });
 }
 
-// src/components/Menu/MenuItemSeparator.tsx
-import { jsx as jsx24 } from "@emotion/react/jsx-runtime";
-var MenuItemSeparator = () => /* @__PURE__ */ jsx24("hr", { css: menuItemSeparator });
-
 // src/components/ButtonWithMenu/ButtonWithMenu.styles.ts
 import { css as css23 } from "@emotion/react";
 var ButtonWithMenuContainer = css23`
@@ -11909,13 +12033,15 @@ import { css as css35 } from "@emotion/react";
 var ChipContainer = css35`
   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'] {
@@ -11925,10 +12051,12 @@ var ChipContainer = css35`
   }
 `;
 var ChipText = css35`
+  align-self: center;
   line-height: 1;
 `;
 var ChipIcon = css35`
-  align-items: center;
+  align-self: center;
+  justify-content: center;
   display: flex;
   opacity: var(--opacity-50);
 `;
@@ -11936,48 +12064,54 @@ var ChipSeparator = css35`
   display: flex;
   border-right: 1px solid var(--white);
   opacity: var(--opacity-50);
+  margin-left: -1px;
 `;
-var ChipTiny = css35`
+var ChipTiny = (withIcon) => css35`
   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 = css35`
   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 = css35`
   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 = css35`
   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] {
@@ -11988,38 +12122,42 @@ var ChipThemeAccentDark = css35`
   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 = css35`
   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] {
@@ -12030,41 +12168,45 @@ var ChipAltThemeAccentDark = css35`
   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 = css35`
   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 = css35`
   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 = css35`
@@ -12085,7 +12227,7 @@ var Chip = ({
   ...props
 }) => {
   const chipSize = {
-    xs: ChipTiny,
+    xs: ChipTiny(Boolean(icon)),
     sm: ChipSmall,
     md: ChipMedium
   };
@@ -12099,7 +12241,7 @@ var Chip = ({
   };
   return /* @__PURE__ */ jsxs19("span", { css: [ChipContainer, chipSize[size], chipTheme[theme]], ...props, children: [
     icon ? /* @__PURE__ */ jsxs19(Fragment4, { children: [
-      /* @__PURE__ */ jsx35("span", { role: "presentation", css: ChipIcon, children: /* @__PURE__ */ jsx35(Icon, { icon, iconColor: "currentColor", size: "0.85rem" }) }),
+      /* @__PURE__ */ jsx35("span", { role: "presentation", css: [ChipIcon], children: /* @__PURE__ */ jsx35(Icon, { icon, iconColor: "currentColor", size: "1rem" }) }),
       /* @__PURE__ */ jsx35("span", { role: "separator", css: ChipSeparator })
     ] }) : null,
     /* @__PURE__ */ jsx35("span", { css: ChipText, children: text }),
@@ -12215,7 +12357,7 @@ var DashedBox = ({
 };
 
 // src/components/Details/Details.tsx
-import * as React8 from "react";
+import * as React9 from "react";
 
 // src/components/Details/Details.styles.ts
 import { css as css38 } from "@emotion/react";
@@ -12255,9 +12397,9 @@ var summaryIconVisiblyHidden = css38`
 // src/components/Details/Details.tsx
 import { jsx as jsx38, jsxs as jsxs21 } from "@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;
@@ -12291,7 +12433,7 @@ var Details = ({ summary: summary2, children, isOpenByDefault = false, ...props
 };
 
 // src/components/Drawer/Drawer.tsx
-import React11, { useEffect as useEffect6, useMemo, useRef as useRef2 } from "react";
+import React12, { useEffect as useEffect6, useMemo, useRef as useRef2 } from "react";
 import { CgChevronRight } from "react-icons/cg";
 
 // src/components/Drawer/Drawer.styles.ts
@@ -12504,7 +12646,7 @@ var DrawerWrapper = ({
 // src/components/Drawer/Drawer.tsx
 import { jsx as jsx41, jsxs as jsxs23 } from "@emotion/react/jsx-runtime";
 var defaultSackId = "_default";
-var Drawer = React11.forwardRef(
+var Drawer = React12.forwardRef(
   ({ width, minWidth, maxWidth, position, ...drawerProps }, ref) => {
     const drawerRendererProps = { width, minWidth, maxWidth, position };
     const { stackId: inheritedStackId } = useCurrentDrawerRenderer();
@@ -12714,7 +12856,7 @@ var ErrorMessage = ({ message, testId, ...otherProps }) => {
 };
 
 // src/components/Input/Fieldset.tsx
-import * as React12 from "react";
+import * as React13 from "react";
 
 // src/components/Input/styles/Fieldset.styles.ts
 import { css as css43 } from "@emotion/react";
@@ -12758,7 +12900,7 @@ var fieldsetBody = css43`
 
 // src/components/Input/Fieldset.tsx
 import { jsx as jsx45, jsxs as jsxs26 } from "@emotion/react/jsx-runtime";
-var Fieldset = React12.forwardRef(
+var Fieldset = React13.forwardRef(
   ({ legend, disabled, children, invert, ...props }, ref) => {
     return /* @__PURE__ */ jsxs26("fieldset", { css: fieldsetContainer(Boolean(invert)), ref, disabled, ...props, children: [
       legend,
@@ -12795,7 +12937,7 @@ var InfoMessage = ({ message, testId, ...props }) => {
 };
 
 // src/components/Input/Input.tsx
-import * as React13 from "react";
+import * as React14 from "react";
 
 // src/components/Input/Label.tsx
 import { jsx as jsx47 } from "@emotion/react/jsx-runtime";
@@ -12838,7 +12980,7 @@ var WarningMessage = ({ message, testId, ...props }) => {
 
 // src/components/Input/Input.tsx
 import { jsx as jsx49, jsxs as jsxs29 } from "@emotion/react/jsx-runtime";
-var Input = React13.forwardRef(
+var Input = React14.forwardRef(
   ({
     label,
     icon,
@@ -13276,9 +13418,9 @@ var InputSelect = ({
 };
 
 // src/components/Input/InputToggle.tsx
-import * as React14 from "react";
+import * as React15 from "react";
 import { jsx as jsx54, jsxs as jsxs32 } from "@emotion/react/jsx-runtime";
-var InputToggle = React14.forwardRef(
+var InputToggle = React15.forwardRef(
   ({
     label,
     type,
@@ -13292,26 +13434,33 @@ var InputToggle = React14.forwardRef(
     fontWeight = "medium",
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsxs32(Label, { css: [inputToggleLabel, disabled ? inputDisabled : void 0], "data-test-id": testId, children: [
-      /* @__PURE__ */ jsx54(
-        "input",
-        {
-          ref,
-          type,
-          css: toggleInput,
-          checked,
-          name,
-          disabled,
-          ...props
-        }
-      ),
-      /* @__PURE__ */ jsx54("span", { css: inlineLabel(fontWeight), dangerouslySetInnerHTML: { __html: label } }),
-      caption || errorMessage ? /* @__PURE__ */ jsxs32("span", { css: inputToggleMessageContainer, children: [
-        caption ? /* @__PURE__ */ jsx54(Caption, { children: caption }) : null,
-        errorMessage ? /* @__PURE__ */ jsx54(ErrorMessage, { message: errorMessage }) : null,
-        warningMessage && !errorMessage ? /* @__PURE__ */ jsx54(WarningMessage, { message: warningMessage }) : null
-      ] }) : null
-    ] });
+    return /* @__PURE__ */ jsxs32(
+      Label,
+      {
+        css: [inputToggleLabel, disabled ? inputDisabled : void 0],
+        "data-test-id": testId ? testId : "input-toggle",
+        children: [
+          /* @__PURE__ */ jsx54(
+            "input",
+            {
+              ref,
+              type,
+              css: toggleInput,
+              checked,
+              name,
+              disabled,
+              ...props
+            }
+          ),
+          /* @__PURE__ */ jsx54("span", { css: inlineLabel(fontWeight), children: label }),
+          caption || errorMessage ? /* @__PURE__ */ jsxs32("span", { css: inputToggleMessageContainer, children: [
+            caption ? /* @__PURE__ */ jsx54(Caption, { children: caption }) : null,
+            errorMessage ? /* @__PURE__ */ jsx54(ErrorMessage, { message: errorMessage }) : null,
+            warningMessage && !errorMessage ? /* @__PURE__ */ jsx54(WarningMessage, { message: warningMessage }) : null
+          ] }) : null
+        ]
+      }
+    );
   }
 );
 
@@ -14374,57 +14523,116 @@ var IntegrationTile = ({
   );
 };
 
-// src/components/Tiles/styles/TileContainer.styles.ts
+// src/components/Tiles/styles/Tile.styles.ts
 import { css as css61 } from "@emotion/react";
-var TileContainerWrapper = css61`
-  background: var(--brand-secondary-2);
+var Tile = css61`
+  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
+import { jsx as jsx74 } from "@emotion/react/jsx-runtime";
+var Tile2 = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx74("button", { type: "button", css: Tile, ...props, children });
+};
+
+// src/components/Tiles/styles/TileContainer.styles.ts
+import { css as css62 } from "@emotion/react";
+var TileContainerWrapper = (theme, padding) => css62`
+  background: ${theme};
+  padding: ${padding != "none" ? `var(--spacing-${padding})` : "0"};
 `;
-var TileContainerInner = css61`
+var TileContainerInner = (gap, templateColumns) => css62`
   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
-import { jsx as jsx74 } from "@emotion/react/jsx-runtime";
-var TileContainer = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx74("div", { css: TileContainerWrapper, ...props, children: /* @__PURE__ */ jsx74("div", { css: TileContainerInner, children }) });
+import { jsx as jsx75 } from "@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__ */ jsx75("div", { css: TileContainerWrapper(bgColor, containerPadding), ...props, children: /* @__PURE__ */ jsx75("div", { css: TileContainerInner(gap, gridTemplateColumns), children }) });
+};
+
+// src/components/Tiles/styles/TileText.styles.ts
+import { css as css63 } from "@emotion/react";
+var TileHeading = css63`
+  font-size: var(--fs-base);
+`;
+var TileText = css63`
+  color: var(--gray-500);
+  font-size: var(--fs-sm);
+  line-height: 1.2;
+`;
+
+// src/components/Tiles/TileText.tsx
+import { jsx as jsx76 } from "@emotion/react/jsx-runtime";
+var TileText2 = ({ as = "heading", children, ...props }) => {
+  const isHeading = as === "heading";
+  return /* @__PURE__ */ jsx76(
+    "span",
+    {
+      role: isHeading ? "heading" : void 0,
+      css: isHeading ? TileHeading : TileText,
+      ...props,
+      children
+    }
+  );
 };
 
 // src/components/Modal/IntegrationModalHeader.styles.ts
-import { css as css62 } from "@emotion/react";
-var IntegrationModalHeaderSVGBackground = css62`
+import { css as css64 } from "@emotion/react";
+var IntegrationModalHeaderSVGBackground = css64`
   position: absolute;
   top: 0;
   left: 0;
 `;
-var IntegrationModalHeaderGroup = css62`
+var IntegrationModalHeaderGroup = css64`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   margin: 0 0 var(--spacing-md);
   position: relative;
 `;
-var IntegrationModalHeaderTitleGroup = css62`
+var IntegrationModalHeaderTitleGroup = css64`
   align-items: center;
   display: flex;
   gap: var(--spacing-base);
 `;
-var IntegrationModalHeaderTitle = css62`
+var IntegrationModalHeaderTitle = css64`
   margin-top: 0;
 `;
-var IntegrationModalHeaderMenuPlacement = css62`
+var IntegrationModalHeaderMenuPlacement = css64`
   margin-bottom: var(--spacing-base);
 `;
-var IntegrationModalHeaderContentWrapper = css62`
+var IntegrationModalHeaderContentWrapper = css64`
   position: relative;
   z-index: var(--z-10);
 `;
 
 // src/components/Modal/IntegrationModalHeader.tsx
-import { Fragment as Fragment9, jsx as jsx75, jsxs as jsxs49 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx77, jsxs as jsxs49 } from "@emotion/react/jsx-runtime";
 var HexModalBackground = ({ ...props }) => {
   return /* @__PURE__ */ jsxs49(
     "svg",
@@ -14436,7 +14644,7 @@ var HexModalBackground = ({ ...props }) => {
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
       children: [
-        /* @__PURE__ */ jsx75(
+        /* @__PURE__ */ jsx77(
           "path",
           {
             fillRule: "evenodd",
@@ -14445,7 +14653,7 @@ var HexModalBackground = ({ ...props }) => {
             fill: "url(#paint0_linear_196_2737)"
           }
         ),
-        /* @__PURE__ */ jsx75("defs", { children: /* @__PURE__ */ jsxs49(
+        /* @__PURE__ */ jsx77("defs", { children: /* @__PURE__ */ jsxs49(
           "linearGradient",
           {
             id: "paint0_linear_196_2737",
@@ -14455,8 +14663,8 @@ var HexModalBackground = ({ ...props }) => {
             y2: "-95.2742",
             gradientUnits: "userSpaceOnUse",
             children: [
-              /* @__PURE__ */ jsx75("stop", { stopColor: "#81DCDE" }),
-              /* @__PURE__ */ jsx75("stop", { offset: "1", stopColor: "#428ED4" })
+              /* @__PURE__ */ jsx77("stop", { stopColor: "#81DCDE" }),
+              /* @__PURE__ */ jsx77("stop", { offset: "1", stopColor: "#428ED4" })
             ]
           }
         ) })
@@ -14466,21 +14674,21 @@ var HexModalBackground = ({ ...props }) => {
 };
 var IntegrationModalHeader = ({ icon, name, menu: menu2, children }) => {
   return /* @__PURE__ */ jsxs49(Fragment9, { children: [
-    /* @__PURE__ */ jsx75(HexModalBackground, { css: IntegrationModalHeaderSVGBackground, role: "presentation" }),
-    /* @__PURE__ */ jsx75("div", { css: IntegrationModalHeaderGroup, children: /* @__PURE__ */ jsxs49("div", { css: IntegrationModalHeaderTitleGroup, children: [
-      icon ? /* @__PURE__ */ jsx75(IntegrationModalIcon, { icon, name: name || "" }) : null,
-      /* @__PURE__ */ jsx75(Heading, { level: 3, css: IntegrationModalHeaderTitle, "data-test-id": "integration-modal-title", children: name || "Create Team Integration" }),
+    /* @__PURE__ */ jsx77(HexModalBackground, { css: IntegrationModalHeaderSVGBackground, role: "presentation" }),
+    /* @__PURE__ */ jsx77("div", { css: IntegrationModalHeaderGroup, children: /* @__PURE__ */ jsxs49("div", { css: IntegrationModalHeaderTitleGroup, children: [
+      icon ? /* @__PURE__ */ jsx77(IntegrationModalIcon, { icon, name: name || "" }) : null,
+      /* @__PURE__ */ jsx77(Heading, { level: 3, css: IntegrationModalHeaderTitle, "data-test-id": "integration-modal-title", children: name || "Create Team Integration" }),
       menu2 ? /* @__PURE__ */ jsxs49("div", { css: IntegrationModalHeaderMenuPlacement, children: [
         menu2,
         " "
       ] }) : null
     ] }) }),
-    /* @__PURE__ */ jsx75("div", { css: IntegrationModalHeaderContentWrapper, children })
+    /* @__PURE__ */ jsx77("div", { css: IntegrationModalHeaderContentWrapper, children })
   ] });
 };
 
 // src/components/Tooltip/Tooltip.tsx
-import React16 from "react";
+import React17 from "react";
 import {
   Tooltip as ReakitTooltip,
   TooltipArrow,
@@ -14489,8 +14697,8 @@ import {
 } from "reakit/Tooltip";
 
 // src/components/Tooltip/Tooltip.styles.ts
-import { css as css63 } from "@emotion/react";
-var TooltipContainer = css63`
+import { css as css65 } from "@emotion/react";
+var TooltipContainer = css65`
   z-index: var(--z-tooltip);
   border: 2px solid var(--gray-300);
   border-radius: var(--rounded-base);
@@ -14499,28 +14707,28 @@ var TooltipContainer = css63`
   font-size: var(--fs-xs);
   background: var(--white);
 `;
-var TooltipArrowStyles = css63`
+var TooltipArrowStyles = css65`
   svg {
     fill: var(--gray-300);
   }
 `;
 
 // src/components/Tooltip/Tooltip.tsx
-import { Fragment as Fragment10, jsx as jsx76, jsxs as jsxs50 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx78, jsxs as jsxs50 } from "@emotion/react/jsx-runtime";
 function Tooltip({ children, title, placement = "bottom", visible, ...props }) {
   const tooltip = useTooltipState({ placement });
   return !title ? children : /* @__PURE__ */ jsxs50(Fragment10, { children: [
-    /* @__PURE__ */ jsx76(TooltipReference, { ...tooltip, ...children.props, children: (referenceProps) => React16.cloneElement(children, referenceProps) }),
+    /* @__PURE__ */ jsx78(TooltipReference, { ...tooltip, ...children.props, children: (referenceProps) => React17.cloneElement(children, referenceProps) }),
     /* @__PURE__ */ jsxs50(ReakitTooltip, { ...tooltip, ...props, css: TooltipContainer, visible: visible != null ? visible : tooltip.visible, children: [
-      /* @__PURE__ */ jsx76(TooltipArrow, { ...tooltip, css: TooltipArrowStyles }),
+      /* @__PURE__ */ jsx78(TooltipArrow, { ...tooltip, css: TooltipArrowStyles }),
       title
     ] })
   ] });
 }
 
 // src/components/ParameterInputs/styles/ParameterBindingButton.styles.ts
-import { css as css64 } from "@emotion/react";
-var inputIconBtn = css64`
+import { css as css66 } from "@emotion/react";
+var inputIconBtn = css66`
   align-items: center;
   border: none;
   border-radius: var(--rounded-base);
@@ -14544,7 +14752,7 @@ var inputIconBtn = css64`
 `;
 
 // src/components/ParameterInputs/ConnectToDataElementButton.tsx
-import { jsx as jsx77, jsxs as jsxs51 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx79, jsxs as jsxs51 } from "@emotion/react/jsx-runtime";
 var ConnectToDataElementButton = ({
   icon,
   iconColor,
@@ -14554,7 +14762,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__ */ jsx77(Tooltip, { title, children: /* @__PURE__ */ jsxs51(
+  return /* @__PURE__ */ jsx79(Tooltip, { title, children: /* @__PURE__ */ jsxs51(
     "button",
     {
       css: inputIconBtn,
@@ -14563,7 +14771,7 @@ var ConnectToDataElementButton = ({
       "aria-disabled": isLocked,
       ...props,
       children: [
-        /* @__PURE__ */ jsx77(
+        /* @__PURE__ */ jsx79(
           Icon,
           {
             icon: isLocked ? "lock" : icon ? icon : "arrows-expand-down-right",
@@ -14599,8 +14807,8 @@ var useParameterShell = () => {
 };
 
 // src/components/ParameterInputs/styles/ParameterInput.styles.ts
-import { css as css65 } from "@emotion/react";
-var inputContainer2 = css65`
+import { css as css67 } from "@emotion/react";
+var inputContainer2 = css67`
   position: relative;
 
   &:hover,
@@ -14612,14 +14820,14 @@ var inputContainer2 = css65`
     }
   }
 `;
-var labelText2 = css65`
+var labelText2 = css67`
   align-items: center;
   display: flex;
   gap: var(--spacing-xs);
   font-weight: var(--fw-regular);
   margin: 0 0 var(--spacing-xs);
 `;
-var input2 = css65`
+var input2 = css67`
   display: block;
   appearance: none;
   box-sizing: border-box;
@@ -14663,18 +14871,18 @@ var input2 = css65`
     color: var(--gray-400);
   }
 `;
-var selectInput = css65`
+var selectInput = css67`
   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 = css65`
+var inputWrapper = css67`
   display: flex; // used to correct overflow with chrome textarea
   position: relative;
 `;
-var inputIcon2 = css65`
+var inputIcon2 = css67`
   align-items: center;
   background: var(--white);
   border-radius: var(--rounded-md) 0 0 var(--rounded-md);
@@ -14690,7 +14898,7 @@ var inputIcon2 = css65`
   width: var(--spacing-lg);
   z-index: var(--z-10);
 `;
-var inputToggleLabel2 = css65`
+var inputToggleLabel2 = css67`
   align-items: center;
   background: var(--white);
   cursor: pointer;
@@ -14701,7 +14909,7 @@ var inputToggleLabel2 = css65`
   min-height: var(--spacing-md);
   position: relative;
 `;
-var toggleInput2 = css65`
+var toggleInput2 = css67`
   appearance: none;
   border: 1px solid var(--gray-300);
   background: var(--white);
@@ -14740,7 +14948,7 @@ var toggleInput2 = css65`
     border-color: var(--gray-300);
   }
 `;
-var inlineLabel2 = css65`
+var inlineLabel2 = css67`
   padding-left: var(--spacing-lg);
   font-size: var(--fs-sm);
   font-weight: var(--fw-regular);
@@ -14756,7 +14964,7 @@ var inlineLabel2 = css65`
     }
   }
 `;
-var inputMenu = css65`
+var inputMenu = css67`
   background: none;
   border: none;
   padding: var(--spacing-2xs);
@@ -14772,14 +14980,14 @@ var inputMenu = css65`
     background-color: var(--gray-200);
   }
 `;
-var textarea2 = css65`
+var textarea2 = css67`
   resize: vertical;
   min-height: 2rem;
 `;
-var imageWrapper = css65`
+var imageWrapper = css67`
   background: var(--white);
 `;
-var img = css65`
+var img = css67`
   animation: ${fadeIn} var(--duration-fast) var(--timing-ease-out) forwards;
   object-fit: contain;
   max-width: 100%;
@@ -14787,7 +14995,7 @@ var img = css65`
   opacity: var(--opacity-0);
   margin: var(--spacing-sm) auto 0;
 `;
-var dataConnectButton = css65`
+var dataConnectButton = css67`
   align-items: center;
   appearance: none;
   box-sizing: border-box;
@@ -14822,7 +15030,7 @@ var dataConnectButton = css65`
     pointer-events: none;
   }
 `;
-var linkParameterBtn = css65`
+var linkParameterBtn = css67`
   border-radius: var(--rounded-base);
   background: var(--white);
   border: none;
@@ -14831,7 +15039,7 @@ var linkParameterBtn = css65`
   font-size: var(--fs-sm);
   line-height: 1;
 `;
-var linkParameterControls = css65`
+var linkParameterControls = css67`
   position: absolute;
   inset: 0 0 0 auto;
   padding: 0 var(--spacing-base);
@@ -14840,13 +15048,13 @@ var linkParameterControls = css65`
   justify-content: center;
   gap: var(--spacing-base);
 `;
-var linkParameterInput = (withExternalLinkIcon) => css65`
+var linkParameterInput = (withExternalLinkIcon) => css67`
   padding-right: calc(
     ${withExternalLinkIcon ? "calc(var(--spacing-lg) * 2 + var(--spacing-xs))" : "var(--spacing-xl)"} +
       var(--spacing-base)
   );
 `;
-var linkParameterIcon = css65`
+var linkParameterIcon = css67`
   align-items: center;
   color: var(--brand-secondary-3);
   display: flex;
@@ -14861,7 +15069,7 @@ var linkParameterIcon = css65`
 `;
 
 // src/components/ParameterInputs/ParameterDataResource.tsx
-import { jsx as jsx78, jsxs as jsxs52 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx80, jsxs as jsxs52 } from "@emotion/react/jsx-runtime";
 function ParameterDataResource({
   label,
   labelLeadingIcon,
@@ -14885,30 +15093,30 @@ function ParameterDataResource({
         disabled,
         onClick: onConnectDatasource,
         children: [
-          /* @__PURE__ */ jsx78("span", { className: "advance-input-icon", css: [inputIcon2], children: /* @__PURE__ */ jsx78(Icon, { icon: "stack", iconColor: "currentColor", size: "1rem" }) }),
+          /* @__PURE__ */ jsx80("span", { className: "advance-input-icon", css: [inputIcon2], children: /* @__PURE__ */ jsx80(Icon, { icon: "stack", iconColor: "currentColor", size: "1rem" }) }),
           children
         ]
       }
     ),
-    caption ? /* @__PURE__ */ jsx78(Caption, { children: caption }) : null
+    caption ? /* @__PURE__ */ jsx80(Caption, { children: caption }) : null
   ] });
 }
 
 // src/components/ParameterInputs/styles/ParameterDrawerHeader.styles.ts
-import { css as css66 } from "@emotion/react";
-var ParameterDrawerHeaderContainer = css66`
+import { css as css68 } from "@emotion/react";
+var ParameterDrawerHeaderContainer = css68`
   align-items: center;
   display: flex;
   gap: var(--spacing-base);
   justify-content: space-between;
   margin-bottom: var(--spacing-sm);
 `;
-var ParameterDrawerHeaderTitleGroup = css66`
+var ParameterDrawerHeaderTitleGroup = css68`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ParameterDrawerHeaderTitle = css66`
+var ParameterDrawerHeaderTitle = css68`
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -14916,12 +15124,12 @@ var ParameterDrawerHeaderTitle = css66`
 `;
 
 // src/components/ParameterInputs/ParameterDrawerHeader.tsx
-import { jsx as jsx79, jsxs as jsxs53 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx81, jsxs as jsxs53 } from "@emotion/react/jsx-runtime";
 var ParameterDrawerHeader = ({ title, iconBeforeTitle, children }) => {
   return /* @__PURE__ */ jsxs53("div", { css: ParameterDrawerHeaderContainer, children: [
     /* @__PURE__ */ jsxs53("header", { css: ParameterDrawerHeaderTitleGroup, children: [
       iconBeforeTitle,
-      /* @__PURE__ */ jsx79(Heading, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title, children: title })
+      /* @__PURE__ */ jsx81(Heading, { level: 3, withMarginBottom: false, css: ParameterDrawerHeaderTitle, title, children: title })
     ] }),
     children
   ] });
@@ -14931,8 +15139,8 @@ var ParameterDrawerHeader = ({ title, iconBeforeTitle, children }) => {
 import { forwardRef as forwardRef8 } from "react";
 
 // src/components/ParameterInputs/styles/ParameterGroup.styles.ts
-import { css as css67 } from "@emotion/react";
-var fieldsetStyles = css67`
+import { css as css69 } from "@emotion/react";
+var fieldsetStyles = css69`
   &:disabled,
   [readonly] {
     pointer-events: none;
@@ -14943,7 +15151,7 @@ var fieldsetStyles = css67`
     }
   }
 `;
-var fieldsetLegend2 = css67`
+var fieldsetLegend2 = css69`
   display: block;
   font-weight: var(--fw-medium);
   margin-bottom: var(--spacing-sm);
@@ -14951,11 +15159,11 @@ var fieldsetLegend2 = css67`
 `;
 
 // src/components/ParameterInputs/ParameterGroup.tsx
-import { jsx as jsx80, jsxs as jsxs54 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx82, jsxs as jsxs54 } from "@emotion/react/jsx-runtime";
 var ParameterGroup = forwardRef8(
   ({ legend, isDisabled, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxs54("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
-      /* @__PURE__ */ jsx80("legend", { css: fieldsetLegend2, children: legend }),
+      /* @__PURE__ */ jsx82("legend", { css: fieldsetLegend2, children: legend }),
       children
     ] });
   }
@@ -14968,21 +15176,21 @@ import { forwardRef as forwardRef10, useCallback as useCallback3, useDeferredVal
 import { useState as useState7 } from "react";
 
 // src/components/ParameterInputs/ParameterLabel.tsx
-import { jsx as jsx81 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx83 } from "@emotion/react/jsx-runtime";
 var ParameterLabel = ({ id, asSpan, children, ...props }) => {
-  return !asSpan ? /* @__PURE__ */ jsx81("label", { ...props, htmlFor: id, css: labelText2, children }) : /* @__PURE__ */ jsx81("span", { "aria-labelledby": id, css: labelText2, children });
+  return !asSpan ? /* @__PURE__ */ jsx83("label", { ...props, htmlFor: id, css: labelText2, children }) : /* @__PURE__ */ jsx83("span", { "aria-labelledby": id, css: labelText2, children });
 };
 
 // src/components/ParameterInputs/ParameterMenuButton.tsx
 import { forwardRef as forwardRef9 } from "react";
-import { jsx as jsx82 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx84 } from "@emotion/react/jsx-runtime";
 var ParameterMenuButton = forwardRef9(
   ({ label, children }, ref) => {
-    return /* @__PURE__ */ jsx82(
+    return /* @__PURE__ */ jsx84(
       Menu,
       {
         menuLabel: `${label} menu`,
-        menuTrigger: /* @__PURE__ */ jsx82(
+        menuTrigger: /* @__PURE__ */ jsx84(
           "button",
           {
             className: "parameter-menu",
@@ -14990,7 +15198,7 @@ var ParameterMenuButton = forwardRef9(
             type: "button",
             "aria-label": `${label} options`,
             ref,
-            children: /* @__PURE__ */ jsx82(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
+            children: /* @__PURE__ */ jsx84(Icon, { icon: "more-alt", iconColor: "currentColor", size: "0.9rem" })
           }
         ),
         children
@@ -15000,15 +15208,15 @@ var ParameterMenuButton = forwardRef9(
 );
 
 // src/components/ParameterInputs/styles/ParameterShell.styles.ts
-import { css as css68 } from "@emotion/react";
-var emptyParameterShell = css68`
+import { css as css70 } from "@emotion/react";
+var emptyParameterShell = css70`
   border-radius: var(--rounded-sm);
   background: var(--white);
   flex-grow: 1;
   padding: var(--spacing-xs);
   position: relative;
 `;
-var emptyParameterShellText = css68`
+var emptyParameterShellText = css70`
   background: var(--brand-secondary-6);
   border-radius: var(--rounded-sm);
   padding: var(--spacing-sm);
@@ -15016,7 +15224,7 @@ var emptyParameterShellText = css68`
   font-size: var(--fs-sm);
   margin: 0;
 `;
-var overrideMarker = css68`
+var overrideMarker = css70`
   border-radius: var(--rounded-sm);
   border: 10px solid var(--gray-300);
   border-left-color: transparent;
@@ -15027,7 +15235,7 @@ var overrideMarker = css68`
 `;
 
 // src/components/ParameterInputs/ParameterShell.tsx
-import { jsx as jsx83, jsxs as jsxs55 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx85, jsxs as jsxs55 } from "@emotion/react/jsx-runtime";
 var extractParameterProps = (props) => {
   const {
     id,
@@ -15041,7 +15249,6 @@ var extractParameterProps = (props) => {
     hiddenLabel,
     labelLeadingIcon,
     menuItems,
-    handleManuallySetErrorMessage,
     title,
     hasOverriddenValue,
     onResetOverriddenValue,
@@ -15060,7 +15267,6 @@ var extractParameterProps = (props) => {
       hiddenLabel,
       labelLeadingIcon,
       menuItems,
-      handleManuallySetErrorMessage,
       title,
       hasOverriddenValue,
       onResetOverriddenValue
@@ -15099,8 +15305,8 @@ var ParameterShell = ({
       title
     ] }),
     /* @__PURE__ */ jsxs55("div", { css: inputWrapper, children: [
-      menuItems ? /* @__PURE__ */ jsx83(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
-      /* @__PURE__ */ jsx83(
+      menuItems ? /* @__PURE__ */ jsx85(ParameterMenuButton, { label: `${label} menu`, children: menuItems }) : null,
+      /* @__PURE__ */ jsx85(
         ParameterShellContext.Provider,
         {
           value: {
@@ -15112,27 +15318,27 @@ var ParameterShell = ({
           },
           children: /* @__PURE__ */ jsxs55(ParameterShellPlaceholder, { children: [
             children,
-            hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ jsx83(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
+            hasOverriddenValue && onResetOverriddenValue ? /* @__PURE__ */ jsx85(ParameterOverrideMarker, { onClick: onResetOverriddenValue }) : null
           ] })
         }
       )
     ] }),
-    caption ? /* @__PURE__ */ jsx83(Caption, { testId: captionTestId, children: caption }) : null,
-    errorMessaging ? /* @__PURE__ */ jsx83(ErrorMessage, { message: errorMessaging, testId: errorTestId }) : null,
-    warningMessage ? /* @__PURE__ */ jsx83(WarningMessage, { message: warningMessage }) : null,
-    infoMessage ? /* @__PURE__ */ jsx83(InfoMessage, { message: infoMessage }) : null
+    caption ? /* @__PURE__ */ jsx85(Caption, { testId: captionTestId, children: caption }) : null,
+    errorMessaging ? /* @__PURE__ */ jsx85(ErrorMessage, { message: errorMessaging, testId: errorTestId }) : null,
+    warningMessage ? /* @__PURE__ */ jsx85(WarningMessage, { message: warningMessage }) : null,
+    infoMessage ? /* @__PURE__ */ jsx85(InfoMessage, { message: infoMessage }) : null
   ] });
 };
 var ParameterShellPlaceholder = ({ children }) => {
-  return /* @__PURE__ */ jsx83("div", { css: emptyParameterShell, children });
+  return /* @__PURE__ */ jsx85("div", { css: emptyParameterShell, children });
 };
-var ParameterOverrideMarker = (props) => /* @__PURE__ */ jsx83(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ jsx83("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ jsx83("span", { hidden: true, children: "reset overridden value to default" }) }) });
+var ParameterOverrideMarker = (props) => /* @__PURE__ */ jsx85(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ jsx85("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ jsx85("span", { hidden: true, children: "reset overridden value to default" }) }) });
 
 // src/components/ParameterInputs/ParameterImage.tsx
-import { Fragment as Fragment11, jsx as jsx84, jsxs as jsxs56 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx86, jsxs as jsxs56 } from "@emotion/react/jsx-runtime";
 var ParameterImage = forwardRef10((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ jsx84(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: /* @__PURE__ */ jsx84(ParameterImageInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ jsx86(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: /* @__PURE__ */ jsx86(ParameterImageInner, { ref, ...innerProps }) });
 });
 var BrokenImage = ({ ...props }) => {
   return /* @__PURE__ */ jsxs56(
@@ -15147,11 +15353,11 @@ var BrokenImage = ({ ...props }) => {
       xmlnsXlink: "http://www.w3.org/1999/xlink",
       ...props,
       children: [
-        /* @__PURE__ */ jsx84("rect", { width: "214", height: "214", fill: "#F9FAFB" }),
-        /* @__PURE__ */ jsx84("rect", { width: "214", height: "214", fill: "url(#pattern0)" }),
+        /* @__PURE__ */ jsx86("rect", { width: "214", height: "214", fill: "#F9FAFB" }),
+        /* @__PURE__ */ jsx86("rect", { width: "214", height: "214", fill: "url(#pattern0)" }),
         /* @__PURE__ */ jsxs56("defs", { children: [
-          /* @__PURE__ */ jsx84("pattern", { id: "pattern0", patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ jsx84("use", { xlinkHref: "#image0_761_4353", transform: "scale(0.0025)" }) }),
-          /* @__PURE__ */ jsx84(
+          /* @__PURE__ */ jsx86("pattern", { id: "pattern0", patternContentUnits: "objectBoundingBox", width: "1", height: "1", children: /* @__PURE__ */ jsx86("use", { xlinkHref: "#image0_761_4353", transform: "scale(0.0025)" }) }),
+          /* @__PURE__ */ jsx86(
             "image",
             {
               id: "image0_761_4353",
@@ -15211,7 +15417,7 @@ var ParameterImageInner = forwardRef10(
       updateImageSrc();
     }, [deferredValue]);
     return /* @__PURE__ */ jsxs56(Fragment11, { children: [
-      /* @__PURE__ */ jsx84(
+      /* @__PURE__ */ jsx86(
         "input",
         {
           css: input2,
@@ -15224,7 +15430,7 @@ var ParameterImageInner = forwardRef10(
         }
       ),
       /* @__PURE__ */ jsxs56("div", { css: imageWrapper, children: [
-        deferredValue && !errorMessage ? /* @__PURE__ */ jsx84(
+        deferredValue && !errorMessage ? /* @__PURE__ */ jsx86(
           "img",
           {
             src: deferredValue,
@@ -15235,24 +15441,24 @@ var ParameterImageInner = forwardRef10(
             loading: "lazy"
           }
         ) : null,
-        deferredValue && errorMessage ? /* @__PURE__ */ jsx84(BrokenImage, { css: img }) : null
+        deferredValue && errorMessage ? /* @__PURE__ */ jsx86(BrokenImage, { css: img }) : null
       ] }),
-      loading ? /* @__PURE__ */ jsx84(LoadingIcon, {}) : null
+      loading ? /* @__PURE__ */ jsx86(LoadingIcon, {}) : null
     ] });
   }
 );
 
 // src/components/ParameterInputs/ParameterInput.tsx
 import { forwardRef as forwardRef11 } from "react";
-import { jsx as jsx85 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx87 } from "@emotion/react/jsx-runtime";
 var ParameterInput = forwardRef11((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ jsx85(ParameterShell, { "data-test-id": "parameter-input", ...shellProps, children: /* @__PURE__ */ jsx85(ParameterInputInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ jsx87(ParameterShell, { "data-test-id": "parameter-input", ...shellProps, children: /* @__PURE__ */ jsx87(ParameterInputInner, { ref, ...innerProps }) });
 });
 var ParameterInputInner = forwardRef11(
   ({ ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
-    return /* @__PURE__ */ jsx85(
+    return /* @__PURE__ */ jsx87(
       "input",
       {
         css: input2,
@@ -15269,18 +15475,18 @@ var ParameterInputInner = forwardRef11(
 
 // src/components/ParameterInputs/ParameterLink.tsx
 import { forwardRef as forwardRef12 } from "react";
-import { jsx as jsx86, jsxs as jsxs57 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx88, jsxs as jsxs57 } from "@emotion/react/jsx-runtime";
 var ParameterLink = forwardRef12(
   ({ buttonText = "Select link", disabled, onConnectLink, externalLink, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
-    return /* @__PURE__ */ jsx86(
+    return /* @__PURE__ */ jsx88(
       ParameterShell,
       {
         "data-test-id": "link-parameter-editor",
         ...shellProps,
         label: innerProps.value ? shellProps.label : "",
         title: !innerProps.value ? shellProps.label : void 0,
-        children: !innerProps.value ? /* @__PURE__ */ jsx86("button", { type: "button", css: dataConnectButton, disabled, onClick: onConnectLink, children: buttonText }) : /* @__PURE__ */ jsx86(
+        children: !innerProps.value ? /* @__PURE__ */ jsx88("button", { type: "button", css: dataConnectButton, disabled, onClick: onConnectLink, children: buttonText }) : /* @__PURE__ */ jsx88(
           ParameterLinkInner,
           {
             onConnectLink,
@@ -15297,7 +15503,7 @@ var ParameterLinkInner = forwardRef12(
   ({ externalLink, onConnectLink, disabled, ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
     return /* @__PURE__ */ jsxs57("div", { css: inputWrapper, children: [
-      /* @__PURE__ */ jsx86(
+      /* @__PURE__ */ jsx88(
         "input",
         {
           type: "text",
@@ -15310,7 +15516,7 @@ var ParameterLinkInner = forwardRef12(
         }
       ),
       /* @__PURE__ */ jsxs57("div", { css: linkParameterControls, children: [
-        /* @__PURE__ */ jsx86(
+        /* @__PURE__ */ jsx88(
           "button",
           {
             type: "button",
@@ -15321,7 +15527,7 @@ var ParameterLinkInner = forwardRef12(
             children: "edit"
           }
         ),
-        externalLink ? /* @__PURE__ */ jsx86(
+        externalLink ? /* @__PURE__ */ jsx88(
           "a",
           {
             href: externalLink,
@@ -15329,7 +15535,7 @@ var ParameterLinkInner = forwardRef12(
             title: "Open link in new tab",
             target: "_blank",
             rel: "noopener noreferrer",
-            children: /* @__PURE__ */ jsx86(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
+            children: /* @__PURE__ */ jsx88(Icon, { icon: "arrows-expand-up-right", iconColor: "currentColor", size: "1rem" })
           }
         ) : null
       ] })
@@ -15338,7 +15544,7 @@ var ParameterLinkInner = forwardRef12(
 );
 
 // src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
-import { Fragment as Fragment12, jsx as jsx87, jsxs as jsxs58 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx89, jsxs as jsxs58 } from "@emotion/react/jsx-runtime";
 var ParameterNameAndPublicIdInput = ({
   id,
   onBlur,
@@ -15365,7 +15571,7 @@ var ParameterNameAndPublicIdInput = ({
   };
   autoFocus == null ? void 0 : autoFocus();
   return /* @__PURE__ */ jsxs58(Fragment12, { children: [
-    /* @__PURE__ */ jsx87(
+    /* @__PURE__ */ jsx89(
       ParameterInput,
       {
         id: nameIdField,
@@ -15384,7 +15590,7 @@ var ParameterNameAndPublicIdInput = ({
         value: values[nameIdField]
       }
     ),
-    /* @__PURE__ */ jsx87(
+    /* @__PURE__ */ jsx89(
       ParameterInput,
       {
         id: publicIdFieldName,
@@ -15398,11 +15604,11 @@ var ParameterNameAndPublicIdInput = ({
         caption: publicIdCaption,
         placeholder: publicIdPlaceholderText,
         errorMessage: publicIdError,
-        menuItems: /* @__PURE__ */ jsx87(
+        menuItems: /* @__PURE__ */ jsx89(
           MenuItem,
           {
             disabled: !values[publicIdFieldName],
-            icon: /* @__PURE__ */ jsx87(Icon, { icon: "path-trim", iconColor: "currentColor" }),
+            icon: /* @__PURE__ */ jsx89(Icon, { icon: "path-trim", iconColor: "currentColor" }),
             onClick: handleCopyPidFieldValue,
             children: "Copy"
           }
@@ -15410,12 +15616,13 @@ var ParameterNameAndPublicIdInput = ({
         value: values[publicIdFieldName]
       }
     ),
-    (warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ jsx87(Callout, { type: "caution", children: warnOverLength.message }) : null
+    (warnOverLength == null ? void 0 : warnOverLength.length) && values[publicIdFieldName].length > warnOverLength.length ? /* @__PURE__ */ jsx89(Callout, { type: "caution", children: warnOverLength.message }) : null
   ] });
 };
 
 // src/components/ParameterInputs/ParameterRichText.tsx
-import { css as css73 } from "@emotion/react";
+import { css as css75 } from "@emotion/react";
+import { CodeNode } from "@lexical/code";
 import { ListItemNode, ListNode as ListNode2 } from "@lexical/list";
 import { LexicalComposer } from "@lexical/react/LexicalComposer";
 import { useLexicalComposerContext as useLexicalComposerContext4 } from "@lexical/react/LexicalComposerContext";
@@ -15424,7 +15631,7 @@ import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
 import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
 import { ListPlugin } from "@lexical/react/LexicalListPlugin";
 import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
-import { HeadingNode } from "@lexical/rich-text";
+import { HeadingNode, QuoteNode } from "@lexical/rich-text";
 import { deepEqual as deepEqual2 } from "fast-equals";
 import { ParagraphNode } from "lexical";
 import { useEffect as useEffect13, useRef as useRef6 } from "react";
@@ -15466,6 +15673,14 @@ var richTextBuiltInElements = [
   {
     label: "Link",
     type: "link"
+  },
+  {
+    label: "Blockquote",
+    type: "quote"
+  },
+  {
+    label: "Code Block",
+    type: "code"
   }
 ];
 
@@ -15502,93 +15717,93 @@ var richTextBuiltInFormats = [
 ];
 
 // src/components/ParameterInputs/rich-text/editorStyles.ts
-import { css as css69 } from "@emotion/css";
-var textBold = css69`
+import { css as css71 } from "@emotion/css";
+var textBold = css71`
   font-weight: 700;
 `;
-var textItalic = css69`
+var textItalic = css71`
   font-style: italic;
 `;
-var textUnderline = css69`
+var textUnderline = css71`
   text-decoration: underline;
 `;
-var textStrikethrough = css69`
+var textStrikethrough = css71`
   text-decoration: line-through;
 `;
-var textUnderlineStrikethrough = css69`
+var textUnderlineStrikethrough = css71`
   text-decoration: underline line-through;
 `;
-var textCode = css69`
+var textCode = css71`
   background-color: var(--gray-100);
   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);
 `;
-var textSuperscript = css69`
+var textSuperscript = css71`
   vertical-align: super;
   font-size: smaller;
 `;
-var textSubscript = css69`
+var textSubscript = css71`
   vertical-align: sub;
   font-size: smaller;
 `;
-var linkElement = css69`
+var linkElement = css71`
   ${link}
   ${linkColorDefault}
   text-decoration: underline;
 `;
-var h12 = css69`
+var h12 = css71`
   font-size: clamp(1.35rem, var(--fluid-font-base), 1.7rem);
 `;
-var h22 = css69`
+var h22 = css71`
   font-size: clamp(1.35rem, var(--fluid-font-base), 1.6rem);
 `;
-var h32 = css69`
+var h32 = css71`
   font-size: clamp(1.25rem, var(--fluid-font-base), 1.5rem);
 `;
-var h42 = css69`
+var h42 = css71`
   font-size: clamp(1.15rem, var(--fluid-font-base), 1.25rem);
 `;
-var h52 = css69`
+var h52 = css71`
   font-size: clamp(var(--fs-base), var(--fluid-font-base), 1.15rem);
 `;
-var h62 = css69`
+var h62 = css71`
   font-size: var(--fs-base);
 `;
-var heading1Element = css69`
+var heading1Element = css71`
   ${h12}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading2Element = css69`
+var heading2Element = css71`
   ${h22}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading3Element = css69`
+var heading3Element = css71`
   ${h32}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading4Element = css69`
+var heading4Element = css71`
   ${h42}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading5Element = css69`
+var heading5Element = css71`
   ${h52}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var heading6Element = css69`
+var heading6Element = css71`
   ${h62}
   ${commonHeadingAttr(true)}
   ${commonLineHeight}
 `;
-var paragraphElement = css69`
+var paragraphElement = css71`
   line-height: 1.5;
   margin-bottom: var(--spacing-base);
 
@@ -15596,7 +15811,7 @@ var paragraphElement = css69`
     margin-bottom: 0;
   }
 `;
-var orderedListElement = css69`
+var orderedListElement = css71`
   ${commonLineHeight}
   display: block;
   list-style: decimal;
@@ -15625,7 +15840,7 @@ var orderedListElement = css69`
     }
   }
 `;
-var unorderedListElement = css69`
+var unorderedListElement = css71`
   ${commonLineHeight}
   display: block;
   list-style: disc;
@@ -15646,15 +15861,38 @@ var unorderedListElement = css69`
     }
   }
 `;
-var listItemElement = css69`
+var listItemElement = css71`
   margin-left: var(--spacing-md);
 `;
-var nestedListItemElement = css69`
+var nestedListItemElement = css71`
   list-style-type: none;
 `;
+var blockquoteElement = css71`
+  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 = css71`
+  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
-import { css as css71 } from "@emotion/react";
+import { css as css73 } from "@emotion/react";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { NodeEventPlugin } from "@lexical/react/LexicalNodeEventPlugin";
 import { addClassNamesToElement, isHTMLAnchorElement, mergeRegister } from "@lexical/utils";
@@ -15673,13 +15911,13 @@ import {
 import { useCallback as useCallback4, useEffect as useEffect10, useRef as useRef5, useState as useState9 } from "react";
 
 // src/components/Popover/Popover.styles.ts
-import { css as css70 } from "@emotion/react";
-var PopoverBtn = css70`
+import { css as css72 } from "@emotion/react";
+var PopoverBtn = css72`
   border: none;
   background: none;
   padding: 0;
 `;
-var Popover = css70`
+var Popover = css72`
   border-left: var(--spacing-xs) solid var(--brand-secondary-3);
   border-radius: var(--rounded-base);
   box-shadow: var(--shadow-base);
@@ -15745,7 +15983,7 @@ var richTextIsValueConsideredEmpty = (value) => {
 };
 
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
-import { Fragment as Fragment13, jsx as jsx88, jsxs as jsxs59 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx90, jsxs as jsxs59 } from "@emotion/react/jsx-runtime";
 var isProjectMapLinkValue = (value) => {
   return (value == null ? void 0 : value.type) === "projectMapNode" && Boolean(
     value.nodeId && value.path && value.projectMapId
@@ -16011,16 +16249,16 @@ var OPEN_LINK_NODE_MODAL_COMMAND = createCommand(
 );
 var LINK_POPOVER_OFFSET_X = 0;
 var LINK_POPOVER_OFFSET_Y = 8;
-var linkPopover = css71`
+var linkPopover = css73`
   position: absolute;
   z-index: 5;
 `;
-var linkPopoverContainer = css71`
+var linkPopoverContainer = css73`
   ${Popover};
   align-items: center;
   display: flex;
 `;
-var linkPopoverAnchor = css71`
+var linkPopoverAnchor = css73`
   ${link}
   ${linkColorDefault}
 `;
@@ -16157,7 +16395,7 @@ function LinkNodePlugin({ onConnectLink }) {
     });
   };
   return /* @__PURE__ */ jsxs59(Fragment13, { children: [
-    /* @__PURE__ */ jsx88(
+    /* @__PURE__ */ jsx90(
       NodeEventPlugin,
       {
         nodeType: LinkNode,
@@ -16167,7 +16405,7 @@ function LinkNodePlugin({ onConnectLink }) {
         }
       }
     ),
-    linkPopoverState ? /* @__PURE__ */ jsx88(
+    linkPopoverState ? /* @__PURE__ */ jsx90(
       "div",
       {
         css: linkPopover,
@@ -16177,7 +16415,7 @@ function LinkNodePlugin({ onConnectLink }) {
         },
         ref: linkPopoverElRef,
         children: /* @__PURE__ */ jsxs59("div", { css: linkPopoverContainer, children: [
-          linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ jsx88(
+          linkPopoverState.node.__link.type === "projectMapNode" ? linkPopoverState.node.__link.path : /* @__PURE__ */ jsx90(
             "a",
             {
               href: `${linkPopoverState.node.__link.type === "email" ? "mailto:" : linkPopoverState.node.__link.type === "tel" ? "tel:" : ""}${linkPopoverState.node.__link.path}`,
@@ -16187,7 +16425,7 @@ function LinkNodePlugin({ onConnectLink }) {
               children: linkPopoverState.node.__link.path
             }
           ),
-          /* @__PURE__ */ jsx88(
+          /* @__PURE__ */ jsx90(
             Button,
             {
               size: "xs",
@@ -16195,7 +16433,7 @@ function LinkNodePlugin({ onConnectLink }) {
                 onEditLinkNode(linkPopoverState.node);
               },
               buttonType: "ghost",
-              children: /* @__PURE__ */ jsx88(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
+              children: /* @__PURE__ */ jsx90(Icon, { icon: "pen", size: "1rem", title: "Edit link" })
             }
           )
         ] })
@@ -16220,7 +16458,7 @@ import {
   INDENT_CONTENT_COMMAND
 } from "lexical";
 import { useEffect as useEffect11 } from "react";
-import { jsx as jsx89 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx91 } from "@emotion/react/jsx-runtime";
 function isIndentPermitted(maxDepth) {
   const selection = $getSelection2();
   if (!$isRangeSelection2(selection)) {
@@ -16250,11 +16488,12 @@ function ListIndentPlugin({ maxDepth }) {
       COMMAND_PRIORITY_CRITICAL
     );
   }, [editor, maxDepth]);
-  return /* @__PURE__ */ jsx89(TabIndentationPlugin, {});
+  return /* @__PURE__ */ jsx91(TabIndentationPlugin, {});
 }
 
 // src/components/ParameterInputs/rich-text/RichTextToolbar.tsx
-import { css as css72 } from "@emotion/react";
+import { css as css74 } from "@emotion/react";
+import { $createCodeNode } from "@lexical/code";
 import {
   $isListNode as $isListNode2,
   INSERT_ORDERED_LIST_COMMAND,
@@ -16263,21 +16502,32 @@ import {
   REMOVE_LIST_COMMAND
 } from "@lexical/list";
 import { useLexicalComposerContext as useLexicalComposerContext3 } from "@lexical/react/LexicalComposerContext";
-import { $createHeadingNode, $isHeadingNode } from "@lexical/rich-text";
+import { $isDecoratorBlockNode } from "@lexical/react/LexicalDecoratorBlockNode";
+import {
+  $createHeadingNode,
+  $createQuoteNode,
+  $isHeadingNode,
+  $isQuoteNode
+} from "@lexical/rich-text";
 import { $setBlocksType } from "@lexical/selection";
-import { $findMatchingParent, $getNearestNodeOfType } from "@lexical/utils";
+import {
+  $findMatchingParent,
+  $getNearestBlockElementAncestorOrThrow,
+  $getNearestNodeOfType
+} from "@lexical/utils";
 import {
   $createParagraphNode,
   $getSelection as $getSelection3,
   $isRangeSelection as $isRangeSelection3,
   $isRootOrShadowRoot,
+  $isTextNode,
   COMMAND_PRIORITY_CRITICAL as COMMAND_PRIORITY_CRITICAL2,
   FORMAT_TEXT_COMMAND,
   SELECTION_CHANGE_COMMAND
 } from "lexical";
 import { useCallback as useCallback5, useEffect as useEffect12, useMemo as useMemo2, useState as useState10 } from "react";
-import { Fragment as Fragment14, jsx as jsx90, jsxs as jsxs60 } from "@emotion/react/jsx-runtime";
-var toolbar = css72`
+import { Fragment as Fragment14, jsx as jsx92, jsxs as jsxs60 } from "@emotion/react/jsx-runtime";
+var toolbar = css74`
   background: var(--gray-50);
   border-radius: var(--rounded-base);
   display: flex;
@@ -16289,7 +16539,7 @@ var toolbar = css72`
   top: 0;
   z-index: 10;
 `;
-var toolbarGroup = css72`
+var toolbarGroup = css74`
   display: flex;
   gap: var(--spacing-xs);
   position: relative;
@@ -16305,7 +16555,7 @@ var toolbarGroup = css72`
     width: 1px;
   }
 `;
-var toolbarButton = css72`
+var toolbarButton = css74`
   align-items: center;
   appearance: none;
   border: 0;
@@ -16318,17 +16568,17 @@ var toolbarButton = css72`
   min-width: 32px;
   padding: 0 var(--spacing-sm);
 `;
-var toolbarButtonActive = css72`
+var toolbarButtonActive = css74`
   background: var(--gray-200);
 `;
-var toolbarIcon = css72`
+var toolbarIcon = css74`
   color: inherit;
 `;
-var toolbarChevron = css72`
+var toolbarChevron = css74`
   margin-left: var(--spacing-xs);
 `;
 var ToolbarIcon = ({ icon }) => {
-  return /* @__PURE__ */ jsx90(Icon, { icon, css: toolbarIcon, size: "1rem" });
+  return /* @__PURE__ */ jsx92(Icon, { icon, css: toolbarIcon, size: "1rem" });
 };
 var RichTextToolbar = ({ config }) => {
   const [editor] = useLexicalComposerContext3();
@@ -16344,7 +16594,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"],
@@ -16370,7 +16619,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) => {
@@ -16386,6 +16635,10 @@ var RichTextToolbar = ({ config }) => {
         $setBlocksType(selection, () => $createHeadingNode(type));
       } else if (type === "paragraph") {
         $setBlocksType(selection, () => $createParagraphNode());
+      } else if (type === "quote") {
+        $setBlocksType(selection, () => $createQuoteNode());
+      } else if (type === "code") {
+        $setBlocksType(selection, () => $createCodeNode());
       }
     });
   };
@@ -16398,6 +16651,12 @@ var RichTextToolbar = ({ config }) => {
       enabledBuiltInElements.filter((element) => ["orderedList", "unorderedList"].includes(element.type)).map((element) => element.type)
     );
   }, [enabledBuiltInElements]);
+  const quoteElementEnabled = useMemo2(() => {
+    return enabledBuiltInElements.some((element) => element.type === "quote");
+  }, [enabledBuiltInElements]);
+  const codeElementEnabled = useMemo2(() => {
+    return enabledBuiltInElements.some((element) => element.type === "code");
+  }, [enabledBuiltInElements]);
   const updateToolbar = useCallback5(() => {
     const selection = $getSelection3();
     if (!$isRangeSelection3(selection)) {
@@ -16456,18 +16715,65 @@ var RichTextToolbar = ({ config }) => {
       });
     });
   }, [editor, updateToolbar]);
-  if (!showToolbar) {
-    return null;
-  }
+  const clearFormatting2 = useCallback5(() => {
+    editor.update(() => {
+      const selection = $getSelection3();
+      if ($isRangeSelection3(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 ($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);
+              $getNearestBlockElementAncestorOrThrow(node).setFormat("");
+            }
+          } else if ($isHeadingNode(node) || $isQuoteNode(node)) {
+            node.replace($createParagraphNode(), true);
+          } else if ($isDecoratorBlockNode(node)) {
+            node.setFormat("");
+          }
+        });
+      }
+      updateToolbar();
+    });
+  }, [editor, updateToolbar]);
+  const elementsThatShouldBeVisibleInDropdown = useMemo2(() => {
+    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__ */ jsxs60("div", { css: toolbar, children: [
-    enabledTextualElements.length > 0 ? /* @__PURE__ */ jsx90(
+    elementsThatShouldBeVisibleInDropdown.length > 0 ? /* @__PURE__ */ jsx92(
       Menu,
       {
         menuLabel: "Elements",
         menuTrigger: /* @__PURE__ */ jsxs60("button", { css: toolbarButton, title: "Text formatting", children: [
-          enabledTextualElements.some((textualElement) => textualElement.type === activeElement) ? elementTypeToLabel(activeElement) : elementTypeToLabel("paragraph"),
+          elementsThatShouldBeVisibleInDropdown.some((element) => element.type === activeElement) ? elementTypeToLabel(activeElement) : elementTypeToLabel("paragraph"),
           " ",
-          /* @__PURE__ */ jsx90(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
+          /* @__PURE__ */ jsx92(Icon, { icon: "chevron-down", css: [toolbarIcon, toolbarChevron], size: "1rem" })
         ] }),
         placement: "bottom-start",
         children: [
@@ -16475,8 +16781,8 @@ var RichTextToolbar = ({ config }) => {
             label: "Normal",
             type: "paragraph"
           },
-          ...enabledTextualElements
-        ].map((element) => /* @__PURE__ */ jsx90(
+          ...elementsThatShouldBeVisibleInDropdown
+        ].map((element) => /* @__PURE__ */ jsx92(
           MenuItem,
           {
             onClick: () => {
@@ -16489,23 +16795,23 @@ var RichTextToolbar = ({ config }) => {
       }
     ) : null,
     enabledBuiltInFormatsWithIcon.length > 0 || enabledBuiltInFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsxs60("div", { css: toolbarGroup, children: [
-      enabledBuiltInFormatsWithIcon.map((format) => /* @__PURE__ */ jsx90(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx90(
+      enabledBuiltInFormatsWithIcon.map((format) => /* @__PURE__ */ jsx92(Tooltip, { title: format.label, placement: "top", children: /* @__PURE__ */ jsx92(
         "button",
         {
           onClick: () => {
             editor.dispatchCommand(FORMAT_TEXT_COMMAND, format.type);
           },
           css: [toolbarButton, activeFormats.includes(format.type) ? toolbarButtonActive : null],
-          children: /* @__PURE__ */ jsx90(ToolbarIcon, { icon: formatsWithIcon.get(format.type) })
+          children: /* @__PURE__ */ jsx92(ToolbarIcon, { icon: formatsWithIcon.get(format.type) })
         }
       ) }, format.type)),
-      enabledBuiltInFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx90(
+      enabledBuiltInFormatsWithoutIcon.length > 0 ? /* @__PURE__ */ jsx92(
         Menu,
         {
           menuLabel: "Text formatting",
-          menuTrigger: /* @__PURE__ */ jsx90("button", { css: toolbarButton, title: "Text formatting", children: /* @__PURE__ */ jsx90(Icon, { icon: "more-alt", css: toolbarIcon }) }),
+          menuTrigger: /* @__PURE__ */ jsx92("button", { css: toolbarButton, title: "Text formatting", children: /* @__PURE__ */ jsx92(Icon, { icon: "more-alt", css: toolbarIcon }) }),
           placement: "bottom-start",
-          children: enabledBuiltInFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx90(
+          children: enabledBuiltInFormatsWithoutIcon.map((format) => /* @__PURE__ */ jsx92(
             MenuItem,
             {
               onClick: () => {
@@ -16518,46 +16824,87 @@ var RichTextToolbar = ({ config }) => {
         }
       ) : null
     ] }) : null,
-    linkElementEnabled || enabledLists.size > 0 ? /* @__PURE__ */ jsxs60("div", { css: toolbarGroup, children: [
-      linkElementEnabled ? /* @__PURE__ */ jsx90(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx90(
+    linkElementEnabled || enabledLists.size > 0 || quoteElementEnabled || codeElementEnabled ? /* @__PURE__ */ jsxs60("div", { css: toolbarGroup, children: [
+      linkElementEnabled ? /* @__PURE__ */ jsx92(Tooltip, { title: "Link", placement: "top", children: /* @__PURE__ */ jsx92(
         "button",
         {
           onClick: () => {
             editor.dispatchCommand(OPEN_LINK_NODE_MODAL_COMMAND, {});
           },
           css: [toolbarButton, isLink ? toolbarButtonActive : null],
-          children: /* @__PURE__ */ jsx90(ToolbarIcon, { icon: "link" })
+          children: /* @__PURE__ */ jsx92(ToolbarIcon, { icon: "link" })
         }
       ) }) : null,
       enabledLists.size > 0 ? /* @__PURE__ */ jsxs60(Fragment14, { children: [
-        enabledLists.has("unorderedList") ? /* @__PURE__ */ jsx90(Tooltip, { title: "Bullet list", placement: "top", children: /* @__PURE__ */ jsx90(
+        enabledLists.has("unorderedList") ? /* @__PURE__ */ jsx92(Tooltip, { title: "Bullet list", placement: "top", children: /* @__PURE__ */ jsx92(
           "button",
           {
             onClick: () => {
               activeElement === "unorderedList" ? editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0) : editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, void 0);
             },
             css: [toolbarButton, activeElement === "unorderedList" ? toolbarButtonActive : null],
-            children: /* @__PURE__ */ jsx90(ToolbarIcon, { icon: "layout-list" })
+            children: /* @__PURE__ */ jsx92(ToolbarIcon, { icon: "layout-list" })
           }
         ) }) : null,
-        enabledLists.has("orderedList") ? /* @__PURE__ */ jsx90(Tooltip, { title: "Numbered list", placement: "top", children: /* @__PURE__ */ jsx90(
+        enabledLists.has("orderedList") ? /* @__PURE__ */ jsx92(Tooltip, { title: "Numbered list", placement: "top", children: /* @__PURE__ */ jsx92(
           "button",
           {
             onClick: () => {
               activeElement === "orderedList" ? editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0) : editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, void 0);
             },
             css: [toolbarButton, activeElement === "orderedList" ? toolbarButtonActive : null],
-            children: /* @__PURE__ */ jsx90(ToolbarIcon, { icon: "layout-list-numbered" })
+            children: /* @__PURE__ */ jsx92(ToolbarIcon, { icon: "layout-list-numbered" })
           }
         ) }) : null
-      ] }) : null
-    ] }) : null
+      ] }) : null,
+      quoteElementEnabled ? /* @__PURE__ */ jsx92(Tooltip, { title: "Blockquote", placement: "top", children: /* @__PURE__ */ jsx92(
+        "button",
+        {
+          onClick: () => {
+            activeElement === "quote" ? onSelectElement("paragraph") : onSelectElement("quote");
+          },
+          css: [toolbarButton, activeElement === "quote" ? toolbarButtonActive : null],
+          children: /* @__PURE__ */ jsx92(ToolbarIcon, { icon: "quote" })
+        }
+      ) }) : null,
+      codeElementEnabled ? /* @__PURE__ */ jsx92(Tooltip, { title: "Code", placement: "top", children: /* @__PURE__ */ jsx92(
+        "button",
+        {
+          onClick: () => {
+            activeElement === "code" ? onSelectElement("paragraph") : onSelectElement("code");
+          },
+          css: [toolbarButton, activeElement === "code" ? toolbarButtonActive : null],
+          children: /* @__PURE__ */ jsx92(ToolbarIcon, { icon: "code-slash" })
+        }
+      ) }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx92(
+      "div",
+      {
+        css: [
+          toolbarGroup,
+          {
+            marginLeft: "auto"
+          }
+        ],
+        children: /* @__PURE__ */ jsx92(Tooltip, { title: "Clear formatting", placement: "top", children: /* @__PURE__ */ jsx92(
+          "button",
+          {
+            onClick: () => {
+              clearFormatting2();
+            },
+            css: [toolbarButton],
+            children: /* @__PURE__ */ jsx92(ToolbarIcon, { icon: "clear-formatting" })
+          }
+        ) })
+      }
+    )
   ] });
 };
 var RichTextToolbar_default = RichTextToolbar;
 
 // src/components/ParameterInputs/ParameterRichText.tsx
-import { Fragment as Fragment15, jsx as jsx91, jsxs as jsxs61 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx93, jsxs as jsxs61 } from "@emotion/react/jsx-runtime";
 var ParameterRichText = ({
   label,
   labelLeadingIcon,
@@ -16592,7 +16939,7 @@ var ParameterRichText = ({
       captionTestId,
       menuItems,
       children: [
-        /* @__PURE__ */ jsx91(
+        /* @__PURE__ */ jsx93(
           ParameterRichTextInner,
           {
             value,
@@ -16606,23 +16953,23 @@ var ParameterRichText = ({
             editorFooter
           }
         ),
-        menuItems ? /* @__PURE__ */ jsx91(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx91(Fragment15, { children: menuItems }) }) : null
+        menuItems ? /* @__PURE__ */ jsx93(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx93(Fragment15, { children: menuItems }) }) : null
       ]
     }
   );
 };
-var editorWrapper = css73`
+var editorWrapper = css75`
   display: flex;
   flex-flow: column;
   flex-grow: 1;
 `;
-var editorContainer = css73`
+var editorContainer = css75`
   display: flex;
   flex-flow: column;
   flex-grow: 1;
   position: relative;
 `;
-var editorPlaceholder = css73`
+var editorPlaceholder = css75`
   color: var(--gray-500);
   font-style: italic;
   /* 1px is added to make sure caret is clearly visible when field is focused
@@ -16633,11 +16980,11 @@ var editorPlaceholder = css73`
   top: var(--spacing-xs);
   user-select: none;
 `;
-var editorInput = css73`
+var editorInput = css75`
   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;
@@ -16669,7 +17016,7 @@ var ParameterRichTextInner = ({
       console.error(error);
     },
     editorState: value ? JSON.stringify(value) : void 0,
-    nodes: [ListNode2, ListItemNode, LinkNode, HeadingNode, ParagraphNode],
+    nodes: [ListNode2, ListItemNode, LinkNode, HeadingNode, QuoteNode, CodeNode, ParagraphNode],
     theme: {
       text: {
         bold: textBold,
@@ -16698,12 +17045,14 @@ var ParameterRichTextInner = ({
         nested: {
           listitem: nestedListItemElement
         }
-      }
+      },
+      quote: blockquoteElement,
+      code: codeElement
     },
     editable: !readOnly
   };
   return /* @__PURE__ */ jsxs61(Fragment15, { children: [
-    /* @__PURE__ */ jsx91("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx91(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx91(
+    /* @__PURE__ */ jsx93("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx93(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx93(
       RichText,
       {
         onChange,
@@ -16745,31 +17094,31 @@ var RichText = ({
     };
   }, []);
   return /* @__PURE__ */ jsxs61(Fragment15, { children: [
-    readOnly ? null : /* @__PURE__ */ jsx91(RichTextToolbar_default, { config }),
+    readOnly ? null : /* @__PURE__ */ jsx93(RichTextToolbar_default, { config }),
     /* @__PURE__ */ jsxs61("div", { css: editorContainer, ref: editorContainerRef, children: [
-      /* @__PURE__ */ jsx91(
+      /* @__PURE__ */ jsx93(
         RichTextPlugin,
         {
-          contentEditable: /* @__PURE__ */ jsx91(ContentEditable, { css: editorInput, className: editorInputClassName }),
-          placeholder: /* @__PURE__ */ jsx91("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
+          contentEditable: /* @__PURE__ */ jsx93(ContentEditable, { css: editorInput, className: editorInputClassName }),
+          placeholder: /* @__PURE__ */ jsx93("div", { css: editorPlaceholder, children: readOnly ? "empty" : "start editing..." }),
           ErrorBoundary: LexicalErrorBoundary
         }
       ),
-      /* @__PURE__ */ jsx91(ListPlugin, {}),
-      readOnly ? null : /* @__PURE__ */ jsx91(HistoryPlugin, {}),
-      /* @__PURE__ */ jsx91(LinkNodePlugin, { onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve() }),
-      /* @__PURE__ */ jsx91(ListIndentPlugin, { maxDepth: 4 })
+      /* @__PURE__ */ jsx93(ListPlugin, {}),
+      readOnly ? null : /* @__PURE__ */ jsx93(HistoryPlugin, {}),
+      /* @__PURE__ */ jsx93(LinkNodePlugin, { onConnectLink: onConnectLink ? onConnectLink : () => Promise.resolve() }),
+      /* @__PURE__ */ jsx93(ListIndentPlugin, { maxDepth: 4 })
     ] })
   ] });
 };
 
 // src/components/ParameterInputs/ParameterSelect.tsx
 import { forwardRef as forwardRef13 } from "react";
-import { jsx as jsx92, jsxs as jsxs62 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx94, jsxs as jsxs62 } from "@emotion/react/jsx-runtime";
 var ParameterSelect = forwardRef13(
   ({ defaultOption, options, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
-    return /* @__PURE__ */ jsx92(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx92(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
+    return /* @__PURE__ */ jsx94(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx94(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
   }
 );
 var ParameterSelectInner = forwardRef13(
@@ -16784,10 +17133,10 @@ var ParameterSelectInner = forwardRef13(
         ref,
         ...props,
         children: [
-          defaultOption ? /* @__PURE__ */ jsx92("option", { value: "", children: defaultOption }) : null,
+          defaultOption ? /* @__PURE__ */ jsx94("option", { value: "", children: defaultOption }) : null,
           options.map((option) => {
             var _a;
-            return /* @__PURE__ */ jsx92("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
+            return /* @__PURE__ */ jsx94("option", { value: (_a = option.value) != null ? _a : option.label, children: option.label }, option.label);
           })
         ]
       }
@@ -16797,14 +17146,14 @@ var ParameterSelectInner = forwardRef13(
 
 // src/components/ParameterInputs/ParameterTextarea.tsx
 import { forwardRef as forwardRef14 } from "react";
-import { jsx as jsx93 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx95 } from "@emotion/react/jsx-runtime";
 var ParameterTextarea = forwardRef14((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ jsx93(ParameterShell, { "data-test-id": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx93(ParameterTextareaInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ jsx95(ParameterShell, { "data-test-id": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx95(ParameterTextareaInner, { ref, ...innerProps }) });
 });
 var ParameterTextareaInner = forwardRef14(({ ...props }, ref) => {
   const { id, label, hiddenLabel } = useParameterShell();
-  return /* @__PURE__ */ jsx93(
+  return /* @__PURE__ */ jsx95(
     "textarea",
     {
       css: [input2, textarea2],
@@ -16818,17 +17167,17 @@ var ParameterTextareaInner = forwardRef14(({ ...props }, ref) => {
 
 // src/components/ParameterInputs/ParameterToggle.tsx
 import { forwardRef as forwardRef15 } from "react";
-import { jsx as jsx94, jsxs as jsxs63 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx96, jsxs as jsxs63 } from "@emotion/react/jsx-runtime";
 var ParameterToggle = forwardRef15((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
-  return /* @__PURE__ */ jsx94(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx94(ParameterToggleInner, { ref, ...innerProps }) });
+  return /* @__PURE__ */ jsx96(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx96(ParameterToggleInner, { ref, ...innerProps }) });
 });
 var ParameterToggleInner = forwardRef15(
   ({ ...props }, ref) => {
     const { id, label } = useParameterShell();
     return /* @__PURE__ */ jsxs63("label", { css: inputToggleLabel2, children: [
-      /* @__PURE__ */ jsx94("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
-      /* @__PURE__ */ jsx94("span", { css: inlineLabel2, children: label })
+      /* @__PURE__ */ jsx96("input", { css: toggleInput2, type: props.type, id, ref, ...props }),
+      /* @__PURE__ */ jsx96("span", { css: inlineLabel2, children: label })
     ] });
   }
 );
@@ -16840,7 +17189,7 @@ import {
   usePopoverState
 } from "reakit/Popover";
 import { Portal as Portal2 } from "reakit/Portal";
-import { Fragment as Fragment16, jsx as jsx95, jsxs as jsxs64 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx97, jsxs as jsxs64 } from "@emotion/react/jsx-runtime";
 var Popover2 = ({
   iconColor = "action",
   icon = "info",
@@ -16854,34 +17203,34 @@ var Popover2 = ({
   const popover = usePopoverState({ placement });
   return /* @__PURE__ */ jsxs64(Fragment16, { children: [
     /* @__PURE__ */ jsxs64(PopoverDisclosure, { ...popover, css: PopoverBtn, title: buttonText, "data-test-id": testId, children: [
-      /* @__PURE__ */ jsx95(Icon, { icon, iconColor, size: iconSize }),
-      /* @__PURE__ */ jsx95("span", { hidden: true, children: buttonText })
+      /* @__PURE__ */ jsx97(Icon, { icon, iconColor, size: iconSize }),
+      /* @__PURE__ */ jsx97("span", { hidden: true, children: buttonText })
     ] }),
-    /* @__PURE__ */ jsx95(Portal2, { children: /* @__PURE__ */ jsx95(ReakitPopover, { css: Popover, ...popover, "aria-label": ariaLabel, children }) })
+    /* @__PURE__ */ jsx97(Portal2, { children: /* @__PURE__ */ jsx97(ReakitPopover, { css: Popover, ...popover, "aria-label": ariaLabel, children }) })
   ] });
 };
 
 // src/components/ProgressList/ProgressList.tsx
-import { css as css75 } from "@emotion/react";
+import { css as css77 } from "@emotion/react";
 import { useMemo as useMemo3 } from "react";
 import { CgCheckO as CgCheckO2, CgRadioCheck, CgRecord } from "react-icons/cg";
 
 // src/components/ProgressList/styles/ProgressList.styles.ts
-import { css as css74 } from "@emotion/react";
-var progressListStyles = css74`
+import { css as css76 } from "@emotion/react";
+var progressListStyles = css76`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
   list-style-type: none;
 `;
-var progressListItemStyles = css74`
+var progressListItemStyles = css76`
   display: flex;
   gap: var(--spacing-base);
   align-items: center;
 `;
 
 // src/components/ProgressList/ProgressList.tsx
-import { jsx as jsx96, jsxs as jsxs65 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx98, jsxs as jsxs65 } from "@emotion/react/jsx-runtime";
 var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
   const itemsWithStatus = useMemo3(() => {
     const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
@@ -16895,8 +17244,8 @@ var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
       return { ...item, status };
     });
   }, [items, inProgressId]);
-  return /* @__PURE__ */ jsx96("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
-    return /* @__PURE__ */ jsx96(
+  return /* @__PURE__ */ jsx98("ol", { css: progressListStyles, ...htmlProps, children: itemsWithStatus.map(({ id, label, status, error, errorLevel }) => {
+    return /* @__PURE__ */ jsx98(
       ProgressListItem,
       {
         status,
@@ -16929,12 +17278,12 @@ var ProgressListItem = ({
   }, [status, error]);
   const statusStyles = useMemo3(() => {
     if (error) {
-      return errorLevel === "caution" ? css75`
+      return errorLevel === "caution" ? css77`
             color: rgb(161, 98, 7);
             & svg {
               color: rgb(250, 204, 21);
             }
-          ` : css75`
+          ` : css77`
             color: rgb(185, 28, 28);
             & svg {
               color: var(--brand-primary-2);
@@ -16942,35 +17291,35 @@ var ProgressListItem = ({
           `;
     }
     const colorPerStatus = {
-      completed: css75`
+      completed: css77`
         opacity: 0.75;
       `,
-      inProgress: css75`
+      inProgress: css77`
         -webkit-text-stroke-width: thin;
       `,
-      queued: css75`
+      queued: css77`
         opacity: 0.5;
       `
     };
     return colorPerStatus[status];
   }, [status, error, errorLevel]);
   return /* @__PURE__ */ jsxs65("li", { css: [progressListItemStyles, statusStyles], children: [
-    /* @__PURE__ */ jsx96(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ jsx96("div", { children: /* @__PURE__ */ jsx96(Icon2, { size: 20 }) }) }),
+    /* @__PURE__ */ jsx98(Tooltip, { title: error != null ? error : "", children: /* @__PURE__ */ jsx98("div", { children: /* @__PURE__ */ jsx98(Icon2, { size: 20 }) }) }),
     /* @__PURE__ */ jsxs65("div", { children: [
       children,
-      /* @__PURE__ */ jsx96("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
+      /* @__PURE__ */ jsx98("span", { css: { visibility: autoEllipsis && status === "inProgress" && !error ? "visible" : "hidden" }, children: "..." })
     ] })
   ] });
 };
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { css as css77 } from "@emotion/react";
+import { css as css79 } from "@emotion/react";
 import { useCallback as useCallback6, useMemo as useMemo4 } from "react";
 import { CgCheck as CgCheck4 } from "react-icons/cg";
 
 // src/components/SegmentedControl/SegmentedControl.styles.ts
-import { css as css76 } from "@emotion/react";
-var segmentedControlStyles = css76`
+import { css as css78 } from "@emotion/react";
+var segmentedControlStyles = css78`
   --segmented-control-rounded-value: var(--rounded-base);
   --segmented-control-border-width: 1px;
   --segmented-control-selected-color: var(--brand-secondary-3);
@@ -16989,14 +17338,14 @@ var segmentedControlStyles = css76`
   border-radius: calc(var(--segmented-control-rounded-value) + var(--segmented-control-border-width));
   font-size: var(--fs-xs);
 `;
-var segmentedControlVerticalStyles = css76`
+var segmentedControlVerticalStyles = css78`
   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 = css76`
+var segmentedControlItemStyles = css78`
   &:first-of-type label {
     border-radius: var(--segmented-control-first-border-radius);
   }
@@ -17004,10 +17353,10 @@ var segmentedControlItemStyles = css76`
     border-radius: var(--segmented-control-last-border-radius);
   }
 `;
-var segmentedControlInputStyles = css76`
+var segmentedControlInputStyles = css78`
   ${accessibleHidden}
 `;
-var segmentedControlLabelStyles = css76`
+var segmentedControlLabelStyles = css78`
   position: relative;
   display: flex;
   align-items: center;
@@ -17044,23 +17393,23 @@ var segmentedControlLabelStyles = css76`
     background-color: var(--gray-400);
   }
 `;
-var segmentedControlLabelIconOnlyStyles = css76`
+var segmentedControlLabelIconOnlyStyles = css78`
   padding-inline: 0.5em;
 `;
-var segmentedControlLabelCheckStyles = css76`
+var segmentedControlLabelCheckStyles = css78`
   opacity: 0.5;
 `;
-var segmentedControlLabelContentStyles = css76`
+var segmentedControlLabelContentStyles = css78`
   display: flex;
   align-items: center;
   justify-content: center;
   gap: var(--spacing-sm);
   height: 100%;
 `;
-var segmentedControlLabelTextStyles = css76``;
+var segmentedControlLabelTextStyles = css78``;
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { jsx as jsx97, jsxs as jsxs66 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx99, jsxs as jsxs66 } from "@emotion/react/jsx-runtime";
 var SegmentedControl = ({
   name,
   options,
@@ -17082,16 +17431,16 @@ var SegmentedControl = ({
   );
   const sizeStyles = useMemo4(() => {
     const map = {
-      sm: css77({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
-      md: css77({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
-      lg: css77({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
+      sm: css79({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
+      md: css79({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
+      lg: css79({ height: "calc(40px - 2px)", fontSize: "var(--fs-base)" })
     };
     return map[size];
   }, [size]);
   const isIconOnly = useMemo4(() => {
     return options.every((option) => option.icon && !option.label);
   }, [options]);
-  return /* @__PURE__ */ jsx97(
+  return /* @__PURE__ */ jsx99(
     "div",
     {
       css: [segmentedControlStyles, orientation === "vertical" ? segmentedControlVerticalStyles : void 0],
@@ -17099,11 +17448,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__ */ jsx97(
+        return /* @__PURE__ */ jsx99(
           Tooltip,
           {
             title: isDisabled || !option.tooltip ? "" : option.tooltip,
-            children: /* @__PURE__ */ jsx97("div", { css: segmentedControlItemStyles, "data-test-id": "container-segmented-control", children: /* @__PURE__ */ jsxs66(
+            children: /* @__PURE__ */ jsx99("div", { css: segmentedControlItemStyles, "data-test-id": "container-segmented-control", children: /* @__PURE__ */ jsxs66(
               "label",
               {
                 css: [
@@ -17112,7 +17461,7 @@ var SegmentedControl = ({
                   isIconOnly ? segmentedControlLabelIconOnlyStyles : void 0
                 ],
                 children: [
-                  /* @__PURE__ */ jsx97(
+                  /* @__PURE__ */ jsx99(
                     "input",
                     {
                       css: segmentedControlInputStyles,
@@ -17124,10 +17473,10 @@ var SegmentedControl = ({
                       disabled: isDisabled
                     }
                   ),
-                  option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx97(CgCheck4, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
+                  option.value !== value || noCheckmark ? null : /* @__PURE__ */ jsx99(CgCheck4, { css: segmentedControlLabelCheckStyles, "aria-label": "Selected", size: "1.5em" }),
                   /* @__PURE__ */ jsxs66("span", { css: segmentedControlLabelContentStyles, children: [
-                    !option.icon ? null : /* @__PURE__ */ jsx97(option.icon, { size: "1.5em" }),
-                    !text ? null : /* @__PURE__ */ jsx97("span", { css: segmentedControlLabelTextStyles, children: text })
+                    !option.icon ? null : /* @__PURE__ */ jsx99(option.icon, { size: "1.5em" }),
+                    !text ? null : /* @__PURE__ */ jsx99("span", { css: segmentedControlLabelTextStyles, children: text })
                   ] })
                 ]
               }
@@ -17141,18 +17490,18 @@ var SegmentedControl = ({
 };
 
 // src/components/Skeleton/Skeleton.styles.ts
-import { css as css78, keyframes as keyframes4 } from "@emotion/react";
+import { css as css80, keyframes as keyframes4 } from "@emotion/react";
 var lightFadingOut = keyframes4`
   from { opacity: 0.1; }
   to { opacity: 0.025; }
 `;
-var skeletonStyles = css78`
+var skeletonStyles = css80`
   animation: ${lightFadingOut} 1s ease-out infinite alternate;
   background-color: var(--gray-900);
 `;
 
 // src/components/Skeleton/Skeleton.tsx
-import { jsx as jsx98 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx100 } from "@emotion/react/jsx-runtime";
 var Skeleton = ({
   width = "100%",
   height = "1.25rem",
@@ -17160,7 +17509,7 @@ var Skeleton = ({
   circle = false,
   children,
   ...otherProps
-}) => /* @__PURE__ */ jsx98(
+}) => /* @__PURE__ */ jsx100(
   "div",
   {
     css: [
@@ -17180,11 +17529,11 @@ var Skeleton = ({
 );
 
 // src/components/Switch/Switch.tsx
-import * as React19 from "react";
+import * as React20 from "react";
 
 // src/components/Switch/Switch.styles.ts
-import { css as css79 } from "@emotion/react";
-var SwitchInputContainer = css79`
+import { css as css81 } from "@emotion/react";
+var SwitchInputContainer = css81`
   cursor: pointer;
   display: inline-block;
   position: relative;
@@ -17193,7 +17542,7 @@ var SwitchInputContainer = css79`
   vertical-align: middle;
   user-select: none;
 `;
-var SwitchInput = css79`
+var SwitchInput = css81`
   appearance: none;
   border-radius: var(--rounded-full);
   background-color: var(--white);
@@ -17231,7 +17580,7 @@ var SwitchInput = css79`
     cursor: not-allowed;
   }
 `;
-var SwitchInputDisabled = css79`
+var SwitchInputDisabled = css81`
   opacity: var(--opacity-50);
   cursor: not-allowed;
 
@@ -17239,7 +17588,7 @@ var SwitchInputDisabled = css79`
     cursor: not-allowed;
   }
 `;
-var SwitchInputLabel = css79`
+var SwitchInputLabel = css81`
   align-items: center;
   color: var(--brand-secondary-1);
   display: inline-flex;
@@ -17261,15 +17610,15 @@ var SwitchInputLabel = css79`
     top: 0;
   }
 `;
-var SwitchText = css79`
+var SwitchText = css81`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   padding-inline: var(--spacing-2xl) 0;
 `;
 
 // src/components/Switch/Switch.tsx
-import { Fragment as Fragment17, jsx as jsx99, jsxs as jsxs67 } from "@emotion/react/jsx-runtime";
-var Switch = React19.forwardRef(
+import { Fragment as Fragment17, jsx as jsx101, jsxs as jsxs67 } from "@emotion/react/jsx-runtime";
+var Switch = React20.forwardRef(
   ({ label, infoText, toggleText, children, ...inputProps }, ref) => {
     let additionalText = infoText;
     if (infoText && toggleText) {
@@ -17277,77 +17626,77 @@ var Switch = React19.forwardRef(
     }
     return /* @__PURE__ */ jsxs67(Fragment17, { children: [
       /* @__PURE__ */ jsxs67("label", { css: [SwitchInputContainer, inputProps.disabled ? SwitchInputDisabled : void 0], children: [
-        /* @__PURE__ */ jsx99("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
-        /* @__PURE__ */ jsx99("span", { css: SwitchInputLabel, children: label })
+        /* @__PURE__ */ jsx101("input", { type: "checkbox", css: SwitchInput, ...inputProps, ref }),
+        /* @__PURE__ */ jsx101("span", { css: SwitchInputLabel, children: label })
       ] }),
-      additionalText ? /* @__PURE__ */ jsx99("p", { css: SwitchText, children: additionalText }) : null,
+      additionalText ? /* @__PURE__ */ jsx101("p", { css: SwitchText, children: additionalText }) : null,
       children
     ] });
   }
 );
 
 // src/components/Table/Table.tsx
-import * as React20 from "react";
+import * as React21 from "react";
 
 // src/components/Table/Table.styles.ts
-import { css as css80 } from "@emotion/react";
-var table = css80`
+import { css as css82 } from "@emotion/react";
+var table = css82`
   border-bottom: 1px solid var(--gray-400);
   border-collapse: collapse;
   min-width: 100%;
   table-layout: auto;
 `;
-var tableHead = css80`
+var tableHead = css82`
   background: var(--gray-100);
   color: var(--brand-secondary-1);
   text-align: left;
 `;
-var tableRow = css80`
+var tableRow = css82`
   border-bottom: 1px solid var(--gray-200);
 `;
-var tableCellHead = css80`
+var tableCellHead = css82`
   font-size: var(--fs-sm);
   padding: var(--spacing-base) var(--spacing-md);
   text-transform: uppercase;
   font-weight: var(--fw-bold);
 `;
-var tableCellData = css80`
+var tableCellData = css82`
   padding: var(--spacing-base) var(--spacing-md);
 `;
 
 // src/components/Table/Table.tsx
-import { jsx as jsx100 } from "@emotion/react/jsx-runtime";
-var Table = React20.forwardRef(({ children, ...otherProps }, ref) => {
-  return /* @__PURE__ */ jsx100("table", { ref, css: table, ...otherProps, children });
+import { jsx as jsx102 } from "@emotion/react/jsx-runtime";
+var Table = React21.forwardRef(({ children, ...otherProps }, ref) => {
+  return /* @__PURE__ */ jsx102("table", { ref, css: table, ...otherProps, children });
 });
-var TableHead = React20.forwardRef(
+var TableHead = React21.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx100("thead", { ref, css: tableHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx102("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
-var TableBody = React20.forwardRef(
+var TableBody = React21.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx100("tbody", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx102("tbody", { ref, ...otherProps, children });
   }
 );
-var TableFoot = React20.forwardRef(
+var TableFoot = React21.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx100("tfoot", { ref, ...otherProps, children });
+    return /* @__PURE__ */ jsx102("tfoot", { ref, ...otherProps, children });
   }
 );
-var TableRow = React20.forwardRef(
+var TableRow = React21.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx100("tr", { ref, css: tableRow, ...otherProps, children });
+    return /* @__PURE__ */ jsx102("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
-var TableCellHead = React20.forwardRef(
+var TableCellHead = React21.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx100("th", { ref, css: tableCellHead, ...otherProps, children });
+    return /* @__PURE__ */ jsx102("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
-var TableCellData = React20.forwardRef(
+var TableCellData = React21.forwardRef(
   ({ children, ...otherProps }, ref) => {
-    return /* @__PURE__ */ jsx100("td", { ref, css: tableCellData, ...otherProps, children });
+    return /* @__PURE__ */ jsx102("td", { ref, css: tableCellData, ...otherProps, children });
   }
 );
 
@@ -17361,8 +17710,8 @@ import {
 } from "reakit/Tab";
 
 // src/components/Tabs/Tabs.styles.ts
-import { css as css81 } from "@emotion/react";
-var tabButtonStyles = css81`
+import { css as css83 } from "@emotion/react";
+var tabButtonStyles = css83`
   align-items: center;
   border: 0;
   height: 2.5rem;
@@ -17379,14 +17728,14 @@ var tabButtonStyles = css81`
     box-shadow: inset 0 -2px 0 var(--brand-secondary-3);
   }
 `;
-var tabButtonGroupStyles = css81`
+var tabButtonGroupStyles = css83`
   display: flex;
   gap: var(--spacing-base);
   border-bottom: 1px solid var(--gray-300);
 `;
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx101 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx103 } from "@emotion/react/jsx-runtime";
 var CurrentTabContext = createContext6(null);
 var useCurrentTab = () => {
   const context = useContext7(CurrentTabContext);
@@ -17415,24 +17764,24 @@ var Tabs = ({ children, onSelectedIdChange, useHashForState, selectedId, ...prop
       tab.setSelectedId(selected);
     }
   }, [selected]);
-  return /* @__PURE__ */ jsx101(CurrentTabContext.Provider, { value: tab, children });
+  return /* @__PURE__ */ jsx103(CurrentTabContext.Provider, { value: tab, children });
 };
 var TabButtonGroup = ({ children, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ jsx101(ReakitTabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
+  return /* @__PURE__ */ jsx103(ReakitTabList, { ...props, ...currentTab, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({ children, id, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ jsx101(ReakitTab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
+  return /* @__PURE__ */ jsx103(ReakitTab, { type: "button", id, ...currentTab, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({ children, ...props }) => {
   const currentTab = useCurrentTab();
-  return /* @__PURE__ */ jsx101(ReakitTabPanel, { ...props, ...currentTab, children });
+  return /* @__PURE__ */ jsx103(ReakitTabPanel, { ...props, ...currentTab, children });
 };
 
 // src/components/Validation/StatusBullet.styles.ts
-import { css as css82 } from "@emotion/react";
-var StatusBulletContainer = css82`
+import { css as css84 } from "@emotion/react";
+var StatusBulletContainer = css84`
   align-items: center;
   align-self: center;
   color: var(--gray-500);
@@ -17449,51 +17798,51 @@ var StatusBulletContainer = css82`
     display: block;
   }
 `;
-var StatusBulletBase = css82`
+var StatusBulletBase = css84`
   font-size: var(--fs-sm);
   &:before {
     width: var(--fs-xs);
     height: var(--fs-xs);
   }
 `;
-var StatusBulletSmall = css82`
+var StatusBulletSmall = css84`
   font-size: var(--fs-xs);
   &:before {
     width: var(--fs-xxs);
     height: var(--fs-xxs);
   }
 `;
-var StatusDraft = css82`
+var StatusDraft = css84`
   &:before {
     background: var(--white);
     box-shadow: inset 0 0 0 0.125rem var(--primary-action-default);
   }
 `;
-var StatusModified = css82`
+var StatusModified = css84`
   &: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 = css82`
+var StatusError = css84`
   color: var(--error);
   &:before {
     background: linear-gradient(120deg, var(--error) 40%, var(--white) 50%, var(--error) 60%);
   }
 `;
-var StatusPublished = css82`
+var StatusPublished = css84`
   &:before {
     background: var(--primary-action-default);
   }
 `;
-var StatusOrphan = css82`
+var StatusOrphan = css84`
   &:before {
     background: var(--brand-secondary-5);
   }
 `;
 
 // src/components/Validation/StatusBullet.tsx
-import { jsx as jsx102 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx104 } from "@emotion/react/jsx-runtime";
 var StatusBullet = ({
   status,
   hideText = false,
@@ -17507,10 +17856,11 @@ var StatusBullet = ({
     Unsaved: StatusDraft,
     Orphan: StatusOrphan,
     Published: StatusPublished,
-    Draft: StatusDraft
+    Draft: StatusDraft,
+    Previous: StatusDraft
   };
   const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
-  return /* @__PURE__ */ jsx102(
+  return /* @__PURE__ */ jsx104(
     "span",
     {
       role: "status",
@@ -17638,7 +17988,9 @@ export {
   Tabs,
   Textarea,
   Theme,
+  Tile2 as Tile,
   TileContainer,
+  TileText2 as TileText,
   Tooltip,
   TwoColumnLayout,
   UniformBadge,
@@ -17680,6 +18032,7 @@ export {
   inputError,
   inputSelect,
   isMacLike,
+  jsonIcon,
   labelText,
   loader_default as loaderAnimationData,
   macifyShortcut,