@luscii-healthtech/web-ui 58.19.3 → 59.0.0

package/dist/index.development.js

@@ -6,13 +6,9 @@ var React = require('react');
 var sonner = require('sonner');
 var DOMPurify = require('dompurify');
 var lodashEs = require('lodash-es');
-var core = require('@dnd-kit/core');
-var sortable = require('@dnd-kit/sortable');
-var tailwindMerge = require('tailwind-merge');
-var reactLazyLoadImageComponent = require('react-lazy-load-image-component');
-var utilities = require('@dnd-kit/utilities');
-var Tooltip$1 = require('@radix-ui/react-tooltip');
 var ReactModal = require('react-modal');
+var Tooltip$1 = require('@radix-ui/react-tooltip');
+var tailwindMerge = require('tailwind-merge');
 var ReactDatePicker = require('react-datepicker');
 var enGB = require('date-fns/locale/en-GB');
 var nl = require('date-fns/locale/nl');
@@ -28,6 +24,7 @@ var PropTypes = require('prop-types');
 var ReactSelect = require('react-select');
 var Creatable = require('react-select/creatable');
 var RadixSwitch = require('@radix-ui/react-switch');
+var reactLazyLoadImageComponent = require('react-lazy-load-image-component');
 var react = require('@tiptap/react');
 var StarterKit = require('@tiptap/starter-kit');
 var extensionMention = require('@tiptap/extension-mention');
@@ -59,8 +56,8 @@ function _interopNamespace(e) {
 var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var DOMPurify__default = /*#__PURE__*/_interopDefault(DOMPurify);
-var Tooltip__namespace = /*#__PURE__*/_interopNamespace(Tooltip$1);
 var ReactModal__default = /*#__PURE__*/_interopDefault(ReactModal);
+var Tooltip__namespace = /*#__PURE__*/_interopNamespace(Tooltip$1);
 var ReactDatePicker__default = /*#__PURE__*/_interopDefault(ReactDatePicker);
 var FlyOutMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(FlyOutMenuPrimitive);
 var RadixHC__namespace = /*#__PURE__*/_interopNamespace(RadixHC);
@@ -74,46 +71,6 @@ var StarterKit__default = /*#__PURE__*/_interopDefault(StarterKit);
 var ToggleGroup__namespace = /*#__PURE__*/_interopNamespace(ToggleGroup);
 var d3__namespace = /*#__PURE__*/_interopNamespace(d3);
 
-const SIZES = {
-  none: "0",
-  /**
-   * Represents the tiny size of 4px.
-   */
-  xxxxs: "4px",
-  /**
-   * Represents a very extra extra small size of 6px.
-   */
-  xxxs: "6px",
-  /**
-   * Represents an extra extra small size of 8px.
-   */
-  xxs: "8px",
-  /**
-   * Represents an extra small size of 10px.
-   */
-  xs: "10px",
-  /**
-   * Represents a small size of 12px.
-   */
-  s: "12px",
-  /**
-   * Represents a medium size of 16px.
-   */
-  m: "16px",
-  /**
-   * Represents a large size of 24px.
-   */
-  l: "24px",
-  /**
-   * Represents an extra large size of 32px.
-   */
-  xl: "32px",
-  /**
-   * Represents an extra extra large size of 32px.
-   */
-  xxl: "32px"
-};
-
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -229,8 +186,8 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$b = "/* https://stackoverflow.com/a/13924997 */\n.ui\\:text-two-lines-max {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  /* number of lines to show */\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  -webkit-box-orient: vertical;\n}\n";
-styleInject(css_248z$b);
+var css_248z$a = "/* https://stackoverflow.com/a/13924997 */\n.ui\\:text-two-lines-max {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  /* number of lines to show */\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  -webkit-box-orient: vertical;\n}\n";
+styleInject(css_248z$a);
 
 const newVariants = /* @__PURE__ */ new Set([
   "body-base-light",
@@ -321,15 +278,11 @@ const allowedHoverColors = {
   "blue-900": "ui:hover:text-primary-dark",
   white: "ui:hover:text-white"
 };
-const allowedGroupHoverColors = {
-  "blue-900": "ui:group-hover:text-primary-dark",
-  white: "ui:group-hover:text-white"
-};
 const DEFAULT_ELEMENT = "span";
 const Text = (props) => {
-  var _a, _b, _c;
+  var _a, _b;
   if (isNewVariant(props.variant)) {
-    const _d = props, { as, variant: variant2, color: color2 = "neutral", truncate: truncate2, containsDangerousHtml: containsDangerousHtml2, children: children2, className: className2 } = _d, rest2 = __rest(_d, ["as", "variant", "color", "truncate", "containsDangerousHtml", "children", "className"]);
+    const _c = props, { as, variant: variant2, color: color2 = "neutral", truncate: truncate2, containsDangerousHtml: containsDangerousHtml2, children: children2, className: className2 } = _c, rest2 = __rest(_c, ["as", "variant", "color", "truncate", "containsDangerousHtml", "children", "className"]);
     const Element2 = as !== null && as !== void 0 ? as : DEFAULT_ELEMENT;
     const newClassName = classNames__default.default(newVariantClasses[variant2], newTextColorClasses[color2], {
       "ui:truncate": truncate2
@@ -341,22 +294,18 @@ const Text = (props) => {
     }
     return jsxRuntime.jsx(Element2, Object.assign({ className: newClassName }, rest2, { children: children2 }));
   }
-  const _e = props, { as: Element = props.inline ? "span" : "p", children, text, type, variant = "base", inline, color = "base", hoverColor, hoverInGroup, className, containsDangerousHtml, truncate, clampLines, capitalize } = _e, rest = __rest(_e, ["as", "children", "text", "type", "variant", "inline", "color", "hoverColor", "hoverInGroup", "className", "containsDangerousHtml", "truncate", "clampLines", "capitalize"]);
-  const resolvedVariant = type !== null && type !== void 0 ? type : variant;
-  const selectedHoverColor = hoverColor && !hoverInGroup && allowedHoverColors[hoverColor];
-  const selectedGroupHoverColor = hoverColor && hoverInGroup && allowedGroupHoverColors[hoverColor];
+  const _d = props, { as: Element = "p", children, variant = "base", color = "base", hoverColor, className, containsDangerousHtml, truncate, clampLines, capitalize } = _d, rest = __rest(_d, ["as", "children", "variant", "color", "hoverColor", "className", "containsDangerousHtml", "truncate", "clampLines", "capitalize"]);
+  const selectedHoverColor = hoverColor && allowedHoverColors[hoverColor];
   const containerProps = {
     className: classNames__default.default(
       // apply different style classes
       // for now we stick with ui:font-size 16px on the body
       // so I am adjusting our styles accordingly (one step down)
-      allowedTextStyles[resolvedVariant !== null && resolvedVariant !== void 0 ? resolvedVariant : "base"],
+      allowedTextStyles[variant],
       allowedColors[color !== null && color !== void 0 ? color : "base"],
       selectedHoverColor,
-      selectedGroupHoverColor,
       "leading-6 sm:leading-5",
       {
-        "ui:inline": inline,
         // FIXME: this class doesn't do anything without a ui:max-width
         "ui:truncate": truncate,
         "ui:text-two-lines-max": clampLines,
@@ -368,8 +317,8 @@ const Text = (props) => {
     )
   };
   return containsDangerousHtml ? jsxRuntime.jsx(Element, Object.assign({}, rest, containerProps, { dangerouslySetInnerHTML: {
-    __html: children ? DOMPurify__default.default.sanitize((_b = children === null || children === void 0 ? void 0 : children.toString()) !== null && _b !== void 0 ? _b : "") : (_c = DOMPurify__default.default.sanitize(text !== null && text !== void 0 ? text : "")) !== null && _c !== void 0 ? _c : ""
-  } })) : jsxRuntime.jsx(Element, Object.assign({}, rest, containerProps, { children: children !== null && children !== void 0 ? children : text }));
+    __html: DOMPurify__default.default.sanitize((_b = children === null || children === void 0 ? void 0 : children.toString()) !== null && _b !== void 0 ? _b : "")
+  } })) : jsxRuntime.jsx(Element, Object.assign({}, rest, containerProps, { children }));
 };
 
 const IconWrapper$1 = (SVGComponent) => (_a) => {
@@ -1147,50 +1096,15 @@ toast.info = (message) => {
   showToaster({ message, type: "success", showIcon: true, title: "" });
 };
 
-var css_248z$a = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n/**\n * Avenir is NOT declared here. The library does not ship font files, so any\n * `@font-face` written against a path in this repo resolves against the\n * consuming app's document and 404s there. Providing the typeface is the\n * consumer's responsibility; this rule only names it.\n */\n.title-avenir {\n  font-family: \"AvenirNextLTPro-Bold\", \"Roboto\", sans-serif;\n}\n\n.title-inter {\n  font-family: \"Inter\", \"Roboto\", \"Helvetica\", sans-serif;\n}";
-styleInject(css_248z$a);
-
-const Title = (props) => {
-  const { variant: variantFromProps = "base", type, className, text, children, color, level, ref } = props, rest = __rest(props, ["variant", "type", "className", "text", "children", "color", "level", "ref"]);
-  const variant = type ? type : variantFromProps;
-  const isSmallTitle = variant === "xs" || variant === "sm";
-  const containerClassName = classNames__default.default("ui:font-bold ui:leading-inherit ui:antialiased", allowedColors[color !== null && color !== void 0 ? color : "base"], {
-    "title-inter": isSmallTitle,
-    "title-avenir": !isSmallTitle
-    //this is used to load the correct font from the css
-  }, {
-    "ui:text-base": variant === "xs",
-    "ui:text-xl": variant === "sm",
-    "ui:text-2xl": variant === "base",
-    "ui:text-3xl": variant === "lg",
-    "ui:text-4xl ": variant === "xl",
-    "ui:text-6xl ": variant === "2xl"
-  }, className);
-  let ContainerElement;
-  switch (variant) {
-    case "sm":
-      ContainerElement = "h5";
-      break;
-    case "base":
-      ContainerElement = "h4";
-      break;
-    case "lg":
-      ContainerElement = "h3";
-      break;
-    case "xl":
-      ContainerElement = "h2";
-      break;
-    case "2xl":
-      ContainerElement = "h1";
-      break;
-    default:
-      ContainerElement = "h4";
-      break;
-  }
-  if (level) {
-    ContainerElement = `h${level}`;
-  }
-  return jsxRuntime.jsx(ContainerElement, Object.assign({ className: containerClassName, ref }, rest, { children: text !== null && text !== void 0 ? text : children }));
+const variantClasses = {
+  h1: "ui-typo-h1 ui:text-text-brand-primary-default",
+  h2: "ui-typo-h2 ui:text-text-neutral-primary-default",
+  h3: "ui-typo-h3 ui:text-text-neutral-primary-default",
+  h4: "ui-typo-h4 ui:text-text-neutral-primary-default"
+};
+const Heading = (_a) => {
+  var { as: Element = "h2", variant = "h2", className, children } = _a, rest = __rest(_a, ["as", "variant", "className", "children"]);
+  return jsxRuntime.jsx(Element, Object.assign({ className: classNames__default.default(variantClasses[variant], className) }, rest, { children }));
 };
 
 const AccordionItem = ({ id, title, content, isCollapsedByDefault = false, onClosed, onOpened }) => {
@@ -1206,7 +1120,7 @@ const AccordionItem = ({ id, title, content, isCollapsedByDefault = false, onClo
   const Chevron = isCollapsed ? ChevronRightIcon : ChevronDownIcon;
   return jsxRuntime.jsxs("li", { className: "ui:border-b ui:border-slate-200 ui:bg-white ui:last:border-b-0", "data-test-id": id, children: [jsxRuntime.jsxs("div", { onClick: toggleCollapsed, className: classNames__default.default("ui:flex ui:w-full ui:select-none ui:flex-row ui:space-x-4 ui:p-4", "ui:cursor-pointer ui:transition-colors ui:duration-300 ui:ease-in-out ui:hover:bg-blue-50", {
     "ui:border-b ui:border-slate-200": !isCollapsed
-  }), children: [jsxRuntime.jsx(Chevron, { className: "ui:shrink-0 ui:self-center ui:text-slate-500" }), lodashEs.isString(title) ? jsxRuntime.jsx(Title, { variant: "xs", children: title }) : title] }), jsxRuntime.jsx("div", { className: classNames__default.default({ "ui:hidden": isCollapsed }), children: content })] });
+  }), children: [jsxRuntime.jsx(Chevron, { className: "ui:shrink-0 ui:self-center ui:text-slate-500" }), lodashEs.isString(title) ? jsxRuntime.jsx(Heading, { variant: "h4", as: "h4", children: title }) : title] }), jsxRuntime.jsx("div", { className: classNames__default.default({ "ui:hidden": isCollapsed }), children: content })] });
 };
 
 const Accordion = ({ dataTestId, isCollapsedByDefault = false, items, className, footer }) => {
@@ -1217,27 +1131,6 @@ const Accordion = ({ dataTestId, isCollapsedByDefault = false, items, className,
   }), footer && jsxRuntime.jsx("li", { className: "ui:p-4", children: footer })] });
 };
 
-const isSubstring = (string, searchTerm, caseSensitive = false) => {
-  const trueString = typeof string !== "string" ? JSON.stringify(string) : string;
-  const stringToSearch = caseSensitive ? trueString : trueString === null || trueString === void 0 ? void 0 : trueString.toLowerCase();
-  const searchTermWithCase = caseSensitive ? searchTerm : searchTerm === null || searchTerm === void 0 ? void 0 : searchTerm.toLowerCase();
-  return (stringToSearch === null || stringToSearch === void 0 ? void 0 : stringToSearch.indexOf(searchTermWithCase)) > -1;
-};
-
-var css_248z$9 = ".list-skeleton .skeleton-box {\n  display: inline-block;\n  height: 1em;\n  position: relative;\n  overflow: hidden;\n  background-color: #cbd5e1;\n  border-radius: 3px;\n}\n.list-skeleton .skeleton-box::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateX(-100%);\n  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));\n  animation: shimmer 800ms infinite;\n  content: \"\";\n}\n.list-skeleton .skeleton-box.is-circle {\n  border-radius: 50%;\n}\n.list-skeleton .skeleton-box.is-button::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateX(-100%);\n  background-image: linear-gradient(90deg, rgba(221, 221, 221, 0) 0, rgba(221, 221, 221, 0.2) 20%, rgba(221, 221, 221, 0.5) 60%, rgba(221, 221, 221, 0));\n  animation: shimmer 800ms infinite;\n  content: \"\";\n}\n@keyframes shimmer {\n  100% {\n    transform: translateX(100%);\n  }\n}";
-styleInject(css_248z$9);
-
-const ListItemSkeleton = () => {
-  return jsxRuntime.jsxs("div", { className: "ui:flex ui:flex-row ui:items-center ui:p-4", children: [jsxRuntime.jsx("div", { className: "skeleton-box is-circle ui:mr-2", style: { width: `${32}px`, height: `${32}px` } }), jsxRuntime.jsxs("div", { className: "ui:flex ui:flex-col", children: [jsxRuntime.jsx("div", { className: "skeleton-box ui:mb-1", style: { width: `${160}px`, height: `${14}px` } }), jsxRuntime.jsx("div", { className: "skeleton-box", style: { width: `${110}px`, height: `${14}px` } })] }), jsxRuntime.jsx("div", { className: "skeleton-box is-button ui:ml-auto ui:rounded-full", style: { width: `${24}px`, height: `${24}px` } })] });
-};
-
-const ListSkeleton = ({ items, "aria-label": ariaLabel = "Loading", dataTestId = "list-skeleton" }) => {
-  const skeletonItems = Array.from({ length: items || 5 }, (_, i) => {
-    return jsxRuntime.jsx(ListItemSkeleton, {}, i);
-  });
-  return jsxRuntime.jsxs("div", { "data-test-id": dataTestId, className: "list-skeleton ui:flex ui:flex-col ui:divide-y ui:divide-slate-200 ui:rounded-2xl ui:border ui:border-slate-50 ui:bg-white ui:shadow", role: "progressbar", "aria-label": ariaLabel, children: [jsxRuntime.jsxs("div", { className: "ui:flex ui:flex-row ui:items-center ui:px-4 ui:py-2", children: [jsxRuntime.jsx("div", { className: "skeleton-box", style: { width: `${160}px`, height: `${14}px` } }), jsxRuntime.jsx("div", { className: "skeleton-box is-button ui:ml-auto ui:bg-slate-200 ui:radius-xxs", style: { width: `${110}px`, height: `${36}px` } })] }), skeletonItems] });
-};
-
 const ELEVATION = {
   surface: "none",
   base: "0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.06)",
@@ -1305,6 +1198,46 @@ const createShadowClassName = (elevation, options) => {
   }, transitionClassName);
 };
 
+const SIZES = {
+  none: "0",
+  /**
+   * Represents the tiny size of 4px.
+   */
+  xxxxs: "4px",
+  /**
+   * Represents a very extra extra small size of 6px.
+   */
+  xxxs: "6px",
+  /**
+   * Represents an extra extra small size of 8px.
+   */
+  xxs: "8px",
+  /**
+   * Represents an extra small size of 10px.
+   */
+  xs: "10px",
+  /**
+   * Represents a small size of 12px.
+   */
+  s: "12px",
+  /**
+   * Represents a medium size of 16px.
+   */
+  m: "16px",
+  /**
+   * Represents a large size of 24px.
+   */
+  l: "24px",
+  /**
+   * Represents an extra large size of 32px.
+   */
+  xl: "32px",
+  /**
+   * Represents an extra extra large size of 32px.
+   */
+  xxl: "32px"
+};
+
 const createRadiusClassName = (borderRadius) => {
   if (!borderRadius || !SIZES[borderRadius]) {
     return "";
@@ -1427,551 +1360,54 @@ const BoxInner = (props, ref) => {
 };
 const Box = React__namespace.default.forwardRef(BoxInner);
 
-const StackInner = (props, ref) => {
-  const { children, _gap, align = "start", justify = "normal", axis = "y", className, reverse, wrap = false, divider, as } = props, attributes = __rest(props, ["children", "_gap", "align", "justify", "axis", "className", "reverse", "wrap", "divider", "as"]);
-  const stackClasses = classNames__default.default(`ui:flex`, {
-    "ui:flex-row": axis === "x",
-    "ui:flex-col": axis === "y",
-    "ui:flex-row-reverse": axis === "x" && reverse,
-    "ui:flex-col-reverse": axis === "y" && reverse,
-    "ui:flex-wrap": wrap,
-    "ui:gap-f_none": _gap === "none",
-    "ui:gap-f_xs": _gap === "xs",
-    "ui:gap-f_s": _gap === "s",
-    "ui:gap-f_base": _gap === "base",
-    "ui:gap-f_m": _gap === "m",
-    "ui:gap-f_l": _gap === "l",
-    "ui:gap-f_xl": _gap === "xl",
-    "ui:gap-f_2xl": _gap === "2xl",
-    "ui:gap-f_3xl": _gap === "3xl",
-    "ui:gap-f_4xl": _gap === "4xl",
-    "ui:justify-center": justify === "center",
-    "ui:justify-start": justify === "start",
-    "ui:justify-end": justify === "end",
-    "ui:justify-normal": justify === "normal",
-    "ui:justify-between": justify === "between",
-    "ui:justify-around": justify === "around",
-    "ui:justify-evenly": justify === "evenly",
-    "ui:justify-stretch": justify === "stretch",
-    "ui:items-center": align === "center",
-    "ui:items-start": align === "start",
-    "ui:items-end": align === "end",
-    "ui:items-baseline": align === "baseline",
-    "ui:items-stretch": align === "stretch",
-    "ui:items-normal": align === "normal"
-  });
-  const classes = tailwindMerge.twMerge(stackClasses, className);
-  if (divider) {
-    const numberOfChildNodes = React__namespace.default.Children.toArray(children).length;
-    return (
-      // @ts-expect-error - Complex polymorphic type intersection between Stack and Box props
-      jsxRuntime.jsx(Box, Object.assign({ as, ref, className: classes }, attributes, { children: React__namespace.default.Children.map(children, (child, index) => {
-        const isLastItem = index >= numberOfChildNodes - 1;
-        if (React__namespace.default.isValidElement(child) === false) {
-          return null;
-        }
-        if (isLastItem) {
-          return child;
-        }
-        return jsxRuntime.jsxs(React__namespace.default.Fragment, { children: [child, divider] });
-      }) }))
-    );
-  }
-  return (
-    // @ts-expect-error - Complex polymorphic type intersection between Stack and Box props
-    jsxRuntime.jsx(Box, Object.assign({ as, ref, className: classes }, attributes, { children }))
-  );
-};
-const Stack = React__namespace.default.forwardRef(StackInner);
-
-const BaseListHeader = ({ title, subtitle, button, headerAccessory, transparent, withBorder }) => {
-  const hasHeaderComponent = Boolean(button || headerAccessory);
-  return jsxRuntime.jsxs("div", { "data-test-id": "base-list-header", className: classNames__default.default("ui:flex ui:flex-row ui:items-center ui:space-x-4 ui:rounded-t-2xl", {
-    "ui:py-4": !hasHeaderComponent || subtitle,
-    "ui:py-2": hasHeaderComponent && !subtitle,
-    "ui:border-slate-300 ui:bg-white ui:px-4": !transparent,
-    "ui:border-b ui:border-b-slate-200": !transparent && !withBorder,
-    "ui:border ui:border-b-0": withBorder && !transparent,
-    "ui:mb-px": transparent,
-    "ui:justify-between": title && hasHeaderComponent,
-    "ui:justify-start": title && !hasHeaderComponent,
-    "ui:justify-end": !title && hasHeaderComponent
-  }), children: [jsxRuntime.jsxs(Stack, { children: [typeof title === "string" && jsxRuntime.jsx(Title, { variant: "xs", children: title }), title && typeof title === "object" && jsxRuntime.jsx(Title, Object.assign({ variant: "xs" }, title)), subtitle && jsxRuntime.jsx(Text, { variant: "sm", color: "on-surface-variant", children: subtitle })] }), button && jsxRuntime.jsx("div", { className: "ui:space-x-3", children: React__namespace.default.createElement(button.buttonType, button.buttonProps) }), headerAccessory && jsxRuntime.jsx("div", { className: "ui:space-x-3", children: headerAccessory })] });
-};
-
-const BaseListEmptyState = ({ message, roundTop, withBorder }) => {
-  const className = classNames__default.default("ui:p-4 ui:bg-white ui:rounded-b-2xl", {
-    "ui:rounded-t-2xl": roundTop,
-    "ui:border-slate-300 ui:border": withBorder
-  });
-  return jsxRuntime.jsx("div", { className, children: jsxRuntime.jsx(Text, { children: message }) });
+const Content$3 = (_a) => {
+  var { container, children, className, backgroundColor } = _a, contentProps = __rest(_a, ["container", "children", "className", "backgroundColor"]);
+  const getBackgroundColor = () => {
+    switch (backgroundColor) {
+      case "transparent":
+        return void 0;
+      default:
+        return backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : "secondary-background";
+    }
+  };
+  const getArrowBackgroundColor = () => {
+    switch (backgroundColor) {
+      case "transparent":
+        return "ui:fill-transparent";
+      default:
+        return "ui:fill-secondary-background";
+    }
+  };
+  return jsxRuntime.jsx(Tooltip__namespace.Portal, { container, children: jsxRuntime.jsxs(Tooltip__namespace.Content, Object.assign({ className: classNames__default.default(className, "ui:max-w-55", "ui:z-20", "ui:data-[state=delayed-open]:animate-in ui:data-[state=closed]:animate-out ui:data-[state=closed]:fade-out-0 ui:data-[state=delayed-open]:fade-in-0 ui:data-[state=closed]:zoom-out-95 ui:data-[state=delayed-open]:zoom-in-95 ui:data-[side=bottom]:slide-in-from-top-2 ui:data-[side=left]:slide-in-from-right-2 ui:data-[side=right]:slide-in-from-left-2 ui:data-[side=top]:slide-in-from-bottom-2"), sideOffset: 4 }, contentProps, { children: [jsxRuntime.jsx(Box, { backgroundColor: getBackgroundColor(), _px: "l", _py: "m", borderRadius: "xxxxs", children }), jsxRuntime.jsx(Tooltip__namespace.Arrow, { width: 8, height: 8, className: getArrowBackgroundColor() })] })) });
 };
-
-const Icon = (_a) => {
-  var { name } = _a, iconProps = __rest(_a, ["name"]);
-  return React__namespace.default.createElement(Icons[name], iconProps);
+Content$3.displayName = "Tooltip.Content";
+const Root$2 = (props) => jsxRuntime.jsx(Tooltip__namespace.Root, Object.assign({}, props));
+Root$2.displayName = "Tooltip.Root";
+const TooltipText = (props) => {
+  return jsxRuntime.jsx(Text, Object.assign({ color: "on-secondary", as: "span" }, props));
 };
-const IconComponentOrKey = (props) => {
-  const { name } = props, iconProps = __rest(props, ["name"]);
-  if (isIconKey(name)) {
-    return jsxRuntime.jsx(Icon, Object.assign({ name }, iconProps));
-  }
-  return React__namespace.default.createElement(name, iconProps);
+TooltipText.displayName = "Tooltip.Text";
+const Tooltip = {
+  Content: Content$3,
+  Root: Root$2,
+  Trigger: Tooltip__namespace.Trigger,
+  Text: TooltipText
 };
-function isIconKey(key) {
-  if (typeof key === "string") {
-    return key in Icons;
-  }
-  return false;
-}
-
-const DragHandle = React.forwardRef((_a, ref) => {
-  var { dataTestId, className: classes, grabbing, disabled = false, label = "Drag to reorder" } = _a, props = __rest(_a, ["dataTestId", "className", "grabbing", "disabled", "label"]);
-  const className = classNames__default.default(classes, "ui:py-2 ui:focus:outline-primary", {
-    "ui:cursor-grab": !grabbing && !disabled,
-    "ui:cursor-grabbing ui:shadow-sm ui:bg-slate-200": grabbing && !disabled,
-    "ui:hover:bg-slate-200 ui:hover:shadow-sm ui:transition ui:duration-200 ui:rounded": !disabled,
-    "ui:cursor-not-allowed": disabled
-  });
-  return jsxRuntime.jsx("button", Object.assign({ ref, "aria-label": label }, props, { tabIndex: 0, className, "data-test-id": dataTestId !== null && dataTestId !== void 0 ? dataTestId : "dragHandle", children: jsxRuntime.jsx(Icon, { name: "DragIndicatorIcon", className: disabled ? "ui:text-slate-300" : "ui:text-slate-400" }) }));
-});
 
-var img$7 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3e%3cpath d='M18 16V2C18 0.9 17.1 0 16 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H16C17.1 18 18 17.1 18 16ZM5.9 10.98L8 13.51L11.1 9.52C11.3 9.26 11.7 9.26 11.9 9.53L15.41 14.21C15.66 14.54 15.42 15.01 15.01 15.01H3.02C2.6 15.01 2.37 14.53 2.63 14.2L5.12 11C5.31 10.74 5.69 10.73 5.9 10.98Z' fill='%23D1D5DB'/%3e%3c/svg%3e";
-
-const ImageInner = (_a) => {
-  var { src, alt = "", className, children = null, onClick, showIconOnFailure = true, wrapperClassName } = _a, otherProps = __rest(_a, ["src", "alt", "className", "children", "onClick", "showIconOnFailure", "wrapperClassName"]);
-  const [isError, setIsError] = React.useState(false);
-  if (!src || isError) {
-    if (children) {
-      return jsxRuntime.jsx("span", { onClick, children });
-    }
-    if (!showIconOnFailure) {
-      return null;
-    }
-  }
-  return jsxRuntime.jsx(reactLazyLoadImageComponent.LazyLoadImage, Object.assign({ className: classNames__default.default(className), effect: "blur", useIntersectionObserver: true, placeholder: jsxRuntime.jsx("div", { className: "ui:flex ui:h-full ui:w-full ui:flex-row ui:items-center ui:justify-center ui:rounded", children: jsxRuntime.jsx("img", { src: img$7, alt: "image-icon" }) }), src, alt, onClick, onError: () => setIsError(true), wrapperClassName }, otherProps));
-};
-var Image$1 = reactLazyLoadImageComponent.trackWindowScroll(ImageInner);
-
-const BaseListIcon = ({ icon, onAssetLoadError }) => {
-  const [loadIconError, setLoadIconError] = React.useState(false);
-  function onListItemIconLoadError() {
-    setLoadIconError(true);
-    onAssetLoadError === null || onAssetLoadError === void 0 ? void 0 : onAssetLoadError();
-  }
-  function onListItemIconLoad() {
-    setLoadIconError(false);
-  }
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon && React__namespace.default.isValidElement(icon) && icon, icon && typeof icon === "function" && React__namespace.default.createElement(icon, { className: "ui:w-6 ui:h-6" }), !loadIconError && icon && typeof icon === "string" && jsxRuntime.jsx(Image$1, { src: icon, "data-chromatic": "ignore", alt: "list-item-icon", className: "ui:h-6 ui:w-6 ui:text-sm", onLoad: onListItemIconLoad, onError: onListItemIconLoadError }), loadIconError && jsxRuntime.jsx(ImageIcon, { className: "ui:h-6 ui:w-6 ui:text-slate-300" })] });
-};
-
-function createAssetLoadError(payload, callback) {
-  return () => {
-    console.error(Object.assign({ message: "Url from icon failed to load, please check the props passed to `ListItem`." }, payload));
-    callback === null || callback === void 0 ? void 0 : callback(payload);
-  };
-}
-const BaseListItem = React__namespace.default.forwardRef(({ itemId, title, tooltipId, roundTop, roundBottom = true, isDraggable, isSelected, subtitle, accessories, onlyShowAccessoriesOnHover, icon, onClick, handleItemClick, onAssetLoadError, dataTestId, renderDragHandle, withBorder, htmlProps, className: classNameProp, __isNested }, ref) => {
-  const clickHandler = onClick !== null && onClick !== void 0 ? onClick : handleItemClick;
-  const className = classNames__default.default("ui:group", "ui:flex ui:flex-row ui:items-center ui:space-x-4 ui:bg-white", "ui:px-4 ui:border-b ui:border-slate-200", {
-    "ui:first:rounded-t-2xl": roundTop,
-    "ui:last:rounded-b-2xl": roundBottom,
-    "ui:cursor-pointer": clickHandler,
-    "ui:hover:bg-blue-50 ui:transition-colors ui:ease-in-out ui:duration-300": clickHandler,
-    "ui:last:border-b-0": !withBorder,
-    "ui:first:border-t ui:border-l ui:border-r": withBorder,
-    // Nested padding calculated as 3x medium spacing and 2x large spacing (size of our icons)
-    "ui:pl-[calc(3*theme('spacing.m')+2*theme('spacing.l'))]": __isNested
-  }, classNameProp);
-  return jsxRuntime.jsxs("li", Object.assign({ className, "data-id": itemId, "data-tip": itemId, "data-for": tooltipId, "data-test-id": dataTestId || `base-list-item-${itemId}`, onClick: clickHandler }, htmlProps, { ref, children: [isDraggable && (renderDragHandle ? renderDragHandle() : jsxRuntime.jsx(DragHandle, { grabbing: false })), __isNested && jsxRuntime.jsx(Box, { width: "xxs", backgroundColor: "primary", className: "ui:self-stretch" }), icon && jsxRuntime.jsx(BaseListIcon, { icon, onAssetLoadError: createAssetLoadError({
-    itemId,
-    title,
-    subtitle,
-    icon
-  }, onAssetLoadError) }), jsxRuntime.jsxs("div", { className: "ui:py-4", children: [typeof title === "string" ? jsxRuntime.jsx(Text, { variant: isSelected ? "strong" : "base", children: title }) : title, subtitle && (typeof subtitle === "string" ? jsxRuntime.jsx(Text, { variant: "sm", color: "slate-500", children: subtitle }) : subtitle)] }), jsxRuntime.jsx("div", { className: "ui:grow" }), jsxRuntime.jsx(Stack, { axis: "x", _gap: "base", align: "center", className: classNames__default.default({
-    "ui:opacity-0": onlyShowAccessoriesOnHover,
-    "ui:group-hover:opacity-100": onlyShowAccessoriesOnHover
-  }), children: accessories })] }));
-});
-
-const BaseListInner = ({ dataTestId, title, subtitle, headerButton, headerAccessory, emptyStateMessage, isLoading, items, headerTransparent, itemComponent, footer, withBorder = false }, ref) => {
-  if (isLoading) {
-    return jsxRuntime.jsx(ListSkeleton, { items: items.length });
-  }
-  const hasHeader = Boolean(title || headerButton || headerAccessory);
-  const roundTop = Boolean(!hasHeader || hasHeader && headerTransparent);
-  const roundBottom = footer === void 0 || footer === null;
-  return jsxRuntime.jsxs("div", { "data-test-id": dataTestId || "base-list-component", children: [hasHeader && jsxRuntime.jsx(BaseListHeader, { title, subtitle, button: headerButton, headerAccessory, transparent: headerTransparent, withBorder }), items.length > 0 ? jsxRuntime.jsx("ul", { ref, children: items.map((props) => itemComponent ? React__namespace.default.createElement(itemComponent, Object.assign(Object.assign({ key: props.itemId }, props), {
-    roundBottom,
-    roundTop,
-    withBorder
-  })) : React__namespace.default.createElement(BaseListItem, Object.assign(Object.assign({ key: props.itemId }, props), {
-    roundBottom,
-    roundTop,
-    withBorder
-  }))) }) : emptyStateMessage && jsxRuntime.jsx(BaseListEmptyState, { message: emptyStateMessage, roundTop, withBorder }), footer] });
-};
-const BaseList = React__namespace.default.forwardRef(BaseListInner);
-
-const draggableListItemPropsPointer = {
-  symbol: /* @__PURE__ */ Symbol("draggable-list-item-props")
-};
-const createDraggableListProps = ({ itemId, title, subtitle, icon, isDraggable, isSelected }) => {
-  return new WeakMap([
-    [
-      draggableListItemPropsPointer,
-      Object.freeze({ itemId, title, subtitle, icon, isDraggable, isSelected })
-    ]
-  ]);
-};
-const isDraggableListItemProps = (subject) => {
-  if (subject instanceof WeakMap) {
-    return subject.has(draggableListItemPropsPointer);
-  }
-  return false;
-};
-const draggableListPropsKey = "listItem";
-const getDndListItemProps = (subject) => {
-  var _a, _b, _c;
-  const possibleDraggableListItemProps = (_b = (_a = subject.data) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b[draggableListPropsKey];
-  if (!isDraggableListItemProps(possibleDraggableListItemProps)) {
-    return null;
-  }
-  return (_c = possibleDraggableListItemProps.get(draggableListItemPropsPointer)) !== null && _c !== void 0 ? _c : null;
-};
-
-const DraggableBaseListItem = (_a) => {
-  var { draggableData } = _a, props = __rest(_a, ["draggableData"]);
-  const { setNodeRef, listeners, attributes, isDragging } = core.useDraggable({
-    id: props.draggableIdentifier,
-    disabled: !props.isDraggable,
-    data: {
-      [draggableListPropsKey]: createDraggableListProps(props),
-      draggableData
-    }
-  });
-  return jsxRuntime.jsx(BaseListItem, Object.assign({}, props, { ref: setNodeRef, isDraggable: true, renderDragHandle: () => jsxRuntime.jsx(DragHandle, Object.assign({ grabbing: isDragging }, attributes, listeners, { disabled: !props.isDraggable })) }));
-};
-
-const DraggableBaseList = (_a) => {
-  var { items } = _a, props = __rest(_a, ["items"]);
-  return jsxRuntime.jsx(BaseList, Object.assign({}, props, { items, itemComponent: DraggableBaseListItem }));
-};
-
-const Dropzone = React.forwardRef((props, ref) => {
-  const { isHighlighted = false, className, children } = props, rest = __rest(props, ["isHighlighted", "className", "children"]);
-  const classes = classNames__default.default("ui:border ui:items-center ui:border-primary", {
-    "ui:bg-surface ui:border-dashed": !isHighlighted,
-    "ui:bg-primary-background ui:border-solid": isHighlighted
-  }, className);
-  return jsxRuntime.jsx("div", Object.assign({ className: classes, ref }, rest, { children }));
-});
-
-const SortableBaseListItem = (_a) => {
-  var { draggableData } = _a, props = __rest(_a, ["draggableData"]);
-  const { setNodeRef, listeners, attributes, transform, isDragging } = sortable.useSortable({
-    id: props.draggableIdentifier,
-    disabled: !props.isDraggable,
-    data: {
-      [draggableListPropsKey]: createDraggableListProps(props),
-      draggableData
-    }
-  });
-  const styleTransform = utilities.CSS.Transform.toString(transform);
-  if (isDragging) {
-    return jsxRuntime.jsxs("div", { style: { transform: styleTransform, position: "relative" }, children: [jsxRuntime.jsx(Dropzone, { className: "ui:absolute ui:h-full ui:w-full" }), jsxRuntime.jsx("div", { className: "ui:invisible", children: jsxRuntime.jsx(BaseListItem, Object.assign({}, props, { ref: setNodeRef, htmlProps: { style: { transform: styleTransform } }, isDraggable: props.__isNested ? false : true, renderDragHandle: () => jsxRuntime.jsx(DragHandle, Object.assign({}, attributes, listeners, { disabled: !props.isDraggable, grabbing: isDragging })) })) })] });
-  }
-  return jsxRuntime.jsx(BaseListItem, Object.assign({}, props, { ref: setNodeRef, htmlProps: { style: { transform: styleTransform } }, isDraggable: props.__isNested ? false : true, renderDragHandle: () => jsxRuntime.jsx(DragHandle, Object.assign({}, attributes, listeners, { disabled: !props.isDraggable, grabbing: isDragging })) }));
-};
-
-const SortableBaseList = (_a) => {
-  var { draggableIdentifier, items } = _a, props = __rest(_a, ["draggableIdentifier", "items"]);
-  return jsxRuntime.jsx(sortable.SortableContext, { id: draggableIdentifier, strategy: sortable.verticalListSortingStrategy, items: items.map((item) => Object.assign(Object.assign({}, item), { id: item.draggableIdentifier })), children: jsxRuntime.jsx(BaseList, Object.assign({ items, itemComponent: SortableBaseListItem }, props)) });
-};
-
-const ListItem = (props) => {
-  return jsxRuntime.jsx(BaseListItem, Object.assign({}, props));
-};
-
-const DefaultList = (_a) => {
-  var { items, onDragEnd, onAssetLoadError, subtitle } = _a, props = __rest(_a, ["items", "onDragEnd", "onAssetLoadError", "subtitle"]);
-  const sensor = core.useSensor(core.MouseSensor);
-  const [draggedListItem, setDraggedListItem] = React.useState(null);
-  const [innerItems, setInnerItems] = React.useState(items);
-  const [expandedIds, setExpandedIds] = React.useState(() => /* @__PURE__ */ new Set());
-  React.useEffect(() => {
-    setInnerItems(items);
-  }, [items]);
-  const toggleExpand = (itemId) => {
-    setExpandedIds((prev) => {
-      const next = new Set(prev);
-      if (next.has(itemId)) {
-        next.delete(itemId);
-      } else {
-        next.add(itemId);
-      }
-      return next;
-    });
-  };
-  const composeIconWithChevron = (parentItem, isExpanded) => {
-    return jsxRuntime.jsxs(Stack, { axis: "x", _gap: "m", align: "center", children: [jsxRuntime.jsx("button", { type: "button", "aria-expanded": isExpanded, "aria-label": typeof parentItem.title === "string" ? `Sub-items of ${parentItem.title}` : "Sub-items", onClick: (e) => {
-      e.stopPropagation();
-      toggleExpand(parentItem.itemId);
-    }, onKeyDown: (e) => {
-      if (e.key === "Enter" || e.key === " ") {
-        e.preventDefault();
-        e.stopPropagation();
-        toggleExpand(parentItem.itemId);
-      }
-    }, children: jsxRuntime.jsx(ChevronRightIcon, { color: "neutral-interactive", "aria-hidden": "true", className: classNames__default.default("ui:shrink-0 ui:transition-transform", {
-      "ui:rotate-90": isExpanded
-    }) }) }), parentItem.icon ? jsxRuntime.jsx(BaseListIcon, { icon: parentItem.icon }) : null] });
-  };
-  const flattenedItems = React.useMemo(() => {
-    const result = [];
-    innerItems.forEach((parentItem, parentIndex) => {
-      var _a2;
-      const hasChildren = Boolean((_a2 = parentItem.children) === null || _a2 === void 0 ? void 0 : _a2.length);
-      const isExpanded = expandedIds.has(parentItem.itemId);
-      const composedIcon = hasChildren ? composeIconWithChevron(parentItem, isExpanded) : parentItem.icon;
-      result.push(Object.assign(Object.assign(Object.assign({}, parentItem), { icon: composedIcon, __parentIndex: parentIndex, htmlProps: Object.assign(Object.assign({}, parentItem.htmlProps), { id: `list-item-${parentItem.itemId}` }) }), parentItem.handleItemClick ? {
-        handleItemClick: (e) => {
-          var _a3;
-          (_a3 = parentItem.handleItemClick) === null || _a3 === void 0 ? void 0 : _a3.call(parentItem, e);
-        }
-      } : {}));
-      if (hasChildren && isExpanded && parentItem.children) {
-        parentItem.children.forEach((childItem) => {
-          result.push(Object.assign(Object.assign({}, childItem), { __isNested: true, htmlProps: Object.assign(Object.assign({}, childItem.htmlProps), { "aria-labelledby": `list-item-${parentItem.itemId}` }) }));
-        });
-      }
-    });
-    return result;
-  }, [innerItems, expandedIds]);
-  if (!onDragEnd) {
-    return jsxRuntime.jsx(BaseList, Object.assign({ itemComponent: ListItem, items: flattenedItems.map((item) => Object.assign(Object.assign({}, item), { isDraggable: false, onAssetLoadError })), subtitle }, props));
-  }
-  return jsxRuntime.jsxs(core.DndContext, { sensors: [sensor], onDragStart: (event) => {
-    setDraggedListItem(getDndListItemProps(event.active));
-    setExpandedIds(/* @__PURE__ */ new Set());
-  }, onDragEnd: (event) => {
-    var _a2, _b, _c, _d, _e, _f, _g, _h, _j;
-    if (!draggedListItem) {
-      return;
-    }
-    const currentIndex = (_d = (_c = (_b = (_a2 = event.active) === null || _a2 === void 0 ? void 0 : _a2.data) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.sortable) === null || _d === void 0 ? void 0 : _d.index;
-    const newIndex = (_h = (_g = (_f = (_e = event.over) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.current) === null || _g === void 0 ? void 0 : _g.sortable) === null || _h === void 0 ? void 0 : _h.index;
-    if (typeof currentIndex === "number" && typeof newIndex === "number") {
-      const currentParentIndex = flattenedItems[currentIndex].__parentIndex;
-      const newParentIndex = (_j = flattenedItems[newIndex]) === null || _j === void 0 ? void 0 : _j.__parentIndex;
-      if (typeof newParentIndex === "number") {
-        const newItems = sortable.arrayMove(innerItems, currentParentIndex, newParentIndex);
-        setInnerItems(newItems);
-        onDragEnd(draggedListItem.itemId, newParentIndex, {
-          state: newItems
-        });
-      }
-    }
-    setDraggedListItem(null);
-  }, children: [jsxRuntime.jsx(SortableBaseList, Object.assign({ draggableIdentifier: "sortable-list-identifier", items: flattenedItems.map((item) => Object.assign(Object.assign({}, item), {
-    draggableIdentifier: `${item.itemId}`,
-    isDraggable: item.__parentIndex !== void 0,
-    // Only top-level items are draggable
-    onAssetLoadError
-  })), subtitle }, props)), jsxRuntime.jsx(core.DragOverlay, { dropAnimation: null, wrapperElement: "ul", className: "ui:shadow-lg", children: draggedListItem && jsxRuntime.jsx(ListItem, Object.assign({}, draggedListItem, { renderDragHandle: () => jsxRuntime.jsx(DragHandle, { grabbing: true }) })) })] });
-};
-const List = (props) => {
-  if ("draggableListType" in props) {
-    switch (props.draggableListType) {
-      case "default":
-        return jsxRuntime.jsx(DefaultList, Object.assign({}, lodashEs.omit(props, "draggableListType")));
-      case "draggable":
-        return jsxRuntime.jsx(DraggableBaseList, Object.assign({}, lodashEs.omit(props, ["draggableListType"])));
-      case "sortable":
-        return jsxRuntime.jsx(SortableBaseList, Object.assign({}, lodashEs.omit(props, ["draggableListType"])));
-    }
-  }
-  return jsxRuntime.jsx(DefaultList, Object.assign({}, props));
-};
-
-const calculateResponsiveWidthClasses = (size) => {
-  if (typeof size === "string") {
-    return {
-      "ui:w-16": size === "sm",
-      "ui:w-32": size === "md",
-      "ui:w-56": size === "lg",
-      "ui:w-80": size === "xl",
-      "ui:w-full": size === "full"
-    };
-  }
-  const sizesMapped = {
-    sm: "w-16",
-    md: "w-32",
-    lg: "w-56",
-    xl: "w-80",
-    full: "w-full"
-  };
-  const [defaultSize, smallSize, mediumSize, largeSize, extraLargeSize] = size;
-  return [
-    `ui:${sizesMapped[defaultSize]}`,
-    smallSize ? `ui:sm:${sizesMapped[smallSize]}` : "",
-    mediumSize ? `ui:md:${sizesMapped[mediumSize]}` : "",
-    largeSize ? `ui:lg:${sizesMapped[largeSize]}` : "",
-    extraLargeSize ? `ui:xl:${sizesMapped[extraLargeSize]}` : ""
-  ].filter(Boolean);
-};
-const breakpointPrefixes = ["", "sm:", "md:", "lg:", "xl:"];
-const calculateResponsiveGrowClasses = (size) => {
-  if (typeof size === "string") {
-    return { "ui:fill-container": size === "full" };
-  }
-  return size.map((breakpointSize, index) => {
-    if (!breakpointSize) {
-      return "";
-    }
-    const suffix = breakpointSize === "full" ? "" : "-none";
-    return `ui:${breakpointPrefixes[index]}fill-container${suffix}`;
-  }).filter(Boolean);
-};
-
-const StyledInput = React__namespace.default.forwardRef((_a, ref) => {
-  var { suffix, prefix, className, width = "full", height = "lg", icon, isError, isClearIconVisible, onClickClearField } = _a, attributes = __rest(_a, ["suffix", "prefix", "className", "width", "height", "icon", "isError", "isClearIconVisible", "onClickClearField"]);
-  const hasPrefix = !!prefix;
-  const hasSuffix = !!suffix;
-  const hasNoExtraContent = !hasPrefix && !hasSuffix;
-  const heightClasses = {
-    md: "ui:h-form-md",
-    lg: "ui:h-form-lg"
-  };
-  const prefixSuffixPaddingClasses = {
-    md: "ui:py-2 ui:px-3",
-    lg: "ui:p-3"
-  };
-  return jsxRuntime.jsxs(FlexRow, { spacing: "none", "data-test-id": "input-component-container", stretch: false, children: [jsxRuntime.jsx("span", { className: classNames__default.default(heightClasses[height], prefixSuffixPaddingClasses[height], "ui:border-b ui:border-t ui:border-solid ui:border-input-border", {
-    "ui:hidden": hasNoExtraContent,
-    "ui:order-1": hasSuffix,
-    "ui:rounded-l ui:border-l": hasPrefix,
-    "ui:rounded-r ui:border-r": hasSuffix
-  }, "ui:flex ui:flex-col ui:items-center", "ui:text-sm", "ui:text-slate-500", "ui:bg-main-background"), children: suffix || prefix }), jsxRuntime.jsxs("div", { className: classNames__default.default("ui:relative", calculateResponsiveGrowClasses(width)), children: [icon && jsxRuntime.jsx("div", { className: classNames__default.default("ui:absolute ui:left-4 ui:top-1/2", {
-    "ui:grow": width === "full"
-  }), style: {
-    transform: "translateY(-50%)",
-    zIndex: 20
-  }, children: jsxRuntime.jsx(IconComponentOrKey, { name: icon, className: "ui:h-6 ui:w-6 ui:text-slate-300" }) }), jsxRuntime.jsx("input", Object.assign({ ref, className: classNames__default.default("ui:block", calculateResponsiveWidthClasses(width), { "ui:pl-12": icon }, {
-    "ui:bg-slate-50 ui:text-slate-400": attributes.disabled,
-    "ui:text-slate-800": !attributes.disabled,
-    "ui:border-input-border": !attributes.disabled && !isError,
-    "ui:hover:border-input-border-dark": !attributes.disabled,
-    "ui:border-red-700": isError,
-    "ui:focus:outline-negative": isError,
-    "ui:focus:border-primary": !isError,
-    "ui:focus:outline-primary": !isError,
-    "ui:bg-white": !attributes.disabled
-  }, heightClasses[height], "ui:p-2", "ui:border", "ui:text-base ui:sm:text-sm", "ui:placeholder-slate-500", "ui:border-solid", "ui:transition-colors", "ui:duration-300", {
-    "ui:z-10": hasSuffix || hasPrefix,
-    // to make sure the ui:outline is displayed completely
-    "ui:rounded": hasNoExtraContent,
-    "ui:rounded-l": hasSuffix,
-    "ui:rounded-r": hasPrefix,
-    "ui:order-2": hasPrefix,
-    "ui:order-1": hasSuffix
-  }, "ui:shadow-default", className) }, attributes)), jsxRuntime.jsx("div", { className: "ui:absolute ui:right-0 ui:top-1/2", style: {
-    transform: "translateY(-50%)"
-  }, children: jsxRuntime.jsx(CrossIcon, { className: classNames__default.default("ui:mr-3 ui:h-6 ui:w-6 ui:cursor-pointer ui:text-slate-300", {
-    "ui:block": isClearIconVisible,
-    "ui:hidden": !isClearIconVisible
-  }), onClick: onClickClearField }) })] })] });
-});
-
-const Input = React__namespace.default.forwardRef((_a, ref) => {
-  var { withSuffix = "", withPrefix = "", clearable = false, isDisabled = false, name, value = "", onChange, asFormField, maxLength, height = "lg" } = _a, otherProps = __rest(_a, ["withSuffix", "withPrefix", "clearable", "isDisabled", "name", "value", "onChange", "asFormField", "maxLength", "height"]);
-  const [innerValue, setInnerValue] = React.useState(value);
-  React.useEffect(() => {
-    setInnerValue(value);
-  }, [value]);
-  const clearField = () => {
-    setInnerValue("");
-    onChange === null || onChange === void 0 ? void 0 : onChange({
-      target: {
-        name: name || "",
-        value: ""
-      },
-      currentTarget: {
-        name: name || "",
-        value: ""
-      }
-    });
-  };
-  const handleChangeEvent = (event) => {
-    setInnerValue(event.currentTarget.value);
-    onChange === null || onChange === void 0 ? void 0 : onChange(asFormField ? event.currentTarget.value : {
-      target: {
-        name: name || "",
-        value: event.currentTarget.value
-      },
-      currentTarget: {
-        name: name || "",
-        value: event.currentTarget.value
-      }
-    });
-  };
-  const isClearIconVisible = clearable && !!innerValue;
-  return jsxRuntime.jsx(StyledInput, Object.assign({ "data-test-id": `input-${name}`, name, value: innerValue, onChange: handleChangeEvent, ref, size: maxLength, disabled: isDisabled, isClearIconVisible, onClickClearField: clearField, prefix: withPrefix, suffix: withSuffix, height }, otherProps));
-});
-
-const SearchInput = React__namespace.default.forwardRef((props, ref) => {
-  var _a;
-  return jsxRuntime.jsx(Input, Object.assign({}, props, { icon: "SearchIcon", type: "text", width: (_a = props.width) !== null && _a !== void 0 ? _a : "xl", clearable: true, ref }));
-});
-
-const Content$3 = (_a) => {
-  var { container, children, className, backgroundColor } = _a, contentProps = __rest(_a, ["container", "children", "className", "backgroundColor"]);
-  const getBackgroundColor = () => {
-    switch (backgroundColor) {
-      case "transparent":
-        return void 0;
-      default:
-        return backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : "secondary-background";
-    }
-  };
-  const getArrowBackgroundColor = () => {
-    switch (backgroundColor) {
-      case "transparent":
-        return "ui:fill-transparent";
-      default:
-        return "ui:fill-secondary-background";
-    }
-  };
-  return jsxRuntime.jsx(Tooltip__namespace.Portal, { container, children: jsxRuntime.jsxs(Tooltip__namespace.Content, Object.assign({ className: classNames__default.default(className, "ui:max-w-55", "ui:z-20", "ui:data-[state=delayed-open]:animate-in ui:data-[state=closed]:animate-out ui:data-[state=closed]:fade-out-0 ui:data-[state=delayed-open]:fade-in-0 ui:data-[state=closed]:zoom-out-95 ui:data-[state=delayed-open]:zoom-in-95 ui:data-[side=bottom]:slide-in-from-top-2 ui:data-[side=left]:slide-in-from-right-2 ui:data-[side=right]:slide-in-from-left-2 ui:data-[side=top]:slide-in-from-bottom-2"), sideOffset: 4 }, contentProps, { children: [jsxRuntime.jsx(Box, { backgroundColor: getBackgroundColor(), _px: "l", _py: "m", borderRadius: "xxxxs", children }), jsxRuntime.jsx(Tooltip__namespace.Arrow, { width: 8, height: 8, className: getArrowBackgroundColor() })] })) });
-};
-Content$3.displayName = "Tooltip.Content";
-const Root$2 = (props) => jsxRuntime.jsx(Tooltip__namespace.Root, Object.assign({}, props));
-Root$2.displayName = "Tooltip.Root";
-const TooltipText = (props) => {
-  return jsxRuntime.jsx(Text, Object.assign({ color: "on-secondary", as: "span" }, props));
-};
-TooltipText.displayName = "Tooltip.Text";
-const Tooltip = {
-  Content: Content$3,
-  Root: Root$2,
-  Trigger: Tooltip__namespace.Trigger,
-  Text: TooltipText
-};
-
-const Spinner = (props) => {
-  return jsxRuntime.jsxs("svg", { className: `ui:h-5 ui:w-5 ui:animate-spin ${props.className}`, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [jsxRuntime.jsx("circle", { className: "ui:opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), jsxRuntime.jsx("path", { className: "ui:opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] });
+const Spinner = (props) => {
+  return jsxRuntime.jsxs("svg", { className: `ui:h-5 ui:w-5 ui:animate-spin ${props.className}`, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [jsxRuntime.jsx("circle", { className: "ui:opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), jsxRuntime.jsx("path", { className: "ui:opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] });
 };
 
 const ButtonV2 = React__namespace.default.forwardRef((_a, innerRef) => {
-  var _b, _c, _d, _e, _f;
-  var { children, size = "medium", onClick, text, textColor, textHoverColor, icon, leadingIcon, trailingIcon, isDisabled, isPending, className, title, dataTestId, type = "button", titleTooltipContainer } = _a, otherAttributes = __rest(_a, ["children", "size", "onClick", "text", "textColor", "textHoverColor", "icon", "leadingIcon", "trailingIcon", "isDisabled", "isPending", "className", "title", "dataTestId", "type", "titleTooltipContainer"]);
-  const disabled = (_c = (_b = otherAttributes.disabled) !== null && _b !== void 0 ? _b : isDisabled) !== null && _c !== void 0 ? _c : false;
+  var _b, _c, _d, _e;
+  var { children, size = "medium", onClick, textColor, textHoverColor, leadingIcon, trailingIcon, isPending, className, title, dataTestId, type = "button", titleTooltipContainer } = _a, otherAttributes = __rest(_a, ["children", "size", "onClick", "textColor", "textHoverColor", "leadingIcon", "trailingIcon", "isPending", "className", "title", "dataTestId", "type", "titleTooltipContainer"]);
+  const disabled = (_b = otherAttributes.disabled) !== null && _b !== void 0 ? _b : false;
   const generatedId = React__namespace.default.useId();
-  const buttonId = (_d = otherAttributes.id) !== null && _d !== void 0 ? _d : generatedId;
+  const buttonId = (_c = otherAttributes.id) !== null && _c !== void 0 ? _c : generatedId;
   const buttonTooltipId = `button-tooltip-id-${buttonId}`;
-  const content = children !== null && children !== void 0 ? children : text;
+  const content = children;
   const isInteractive = !disabled && !isPending;
-  const hasContentAndLeadingIcon = content && (icon !== null && icon !== void 0 ? icon : leadingIcon);
+  const hasContentAndLeadingIcon = content && leadingIcon;
   const hasContentAndTrailingIcon = content && trailingIcon;
   function handleClick(event) {
     event.stopPropagation();
@@ -2009,9 +1445,11 @@ const ButtonV2 = React__namespace.default.forwardRef((_a, innerRef) => {
     "data-tip": true,
     "data-for": buttonTooltipId
   } : {};
-  const buttonComponent = jsxRuntime.jsxs("button", Object.assign({ ref: innerRef }, otherAttributes, { "aria-label": (_e = otherAttributes["aria-label"]) !== null && _e !== void 0 ? _e : !content && typeof title === "string" ? title : void 0, className: buttonClassName, type, onClick: handleClick, disabled: disabled || isPending, "aria-disabled": disabled, "aria-busy": isPending, "data-test-id": (_f = dataTestId !== null && dataTestId !== void 0 ? dataTestId : otherAttributes["data-test-id"]) !== null && _f !== void 0 ? _f : otherAttributes.id }, tooltipAttrs, { children: [leadingIcon && jsxRuntime.jsx(IconLayoutWrapper, { isInvisible: isPending, children: leadingIcon }), !leadingIcon && icon && jsxRuntime.jsx(IconLayoutWrapper, { isInvisible: isPending, children: jsxRuntime.jsx(IconComponentOrKey, { name: icon }) }), isPending && jsxRuntime.jsx("span", { className: "ui:absolute ui:left-1/2 ui:top-1/2 ui:-translate-x-1/2 ui:-translate-y-1/2 ui:transform ui:opacity-100", children: jsxRuntime.jsx(Spinner, { className: textColorClass }) }), content && jsxRuntime.jsx(Text, { variant: "strong", className: classNames__default.default({
-    "ui:opacity-[0.01]": isPending
-  }), color: textColor, hoverColor: textHoverColor, hoverInGroup: true, children: content }), trailingIcon && jsxRuntime.jsx(IconLayoutWrapper, { isInvisible: isPending, children: trailingIcon })] }));
+  const buttonComponent = jsxRuntime.jsxs("button", Object.assign({ ref: innerRef }, otherAttributes, { "aria-label": (_d = otherAttributes["aria-label"]) !== null && _d !== void 0 ? _d : !content && typeof title === "string" ? title : void 0, className: buttonClassName, type, onClick: handleClick, disabled: disabled || isPending, "aria-disabled": disabled, "aria-busy": isPending, "data-test-id": (_e = dataTestId !== null && dataTestId !== void 0 ? dataTestId : otherAttributes["data-test-id"]) !== null && _e !== void 0 ? _e : otherAttributes.id }, tooltipAttrs, { children: [leadingIcon && jsxRuntime.jsx(IconLayoutWrapper, { isInvisible: isPending, children: leadingIcon }), isPending && jsxRuntime.jsx("span", { className: "ui:absolute ui:left-1/2 ui:top-1/2 ui:-translate-x-1/2 ui:-translate-y-1/2 ui:transform ui:opacity-100", children: jsxRuntime.jsx(Spinner, { className: textColorClass }) }), content && jsxRuntime.jsx(Text, { variant: "strong", className: classNames__default.default({
+    "ui:opacity-[0.01]": isPending,
+    "ui:group-hover:text-primary-dark": textHoverColor === "blue-900",
+    "ui:group-hover:text-white": textHoverColor === "white"
+  }), color: textColor, children: content }), trailingIcon && jsxRuntime.jsx(IconLayoutWrapper, { isInvisible: isPending, children: trailingIcon })] }));
   if (title) {
     return jsxRuntime.jsxs(Tooltip.Root, { children: [jsxRuntime.jsx(Tooltip.Trigger, { asChild: true, id: buttonTooltipId, children: buttonComponent }), jsxRuntime.jsx(Tooltip.Content, { container: titleTooltipContainer, children: jsxRuntime.jsx(Tooltip.Text, { children: title }) })] });
   }
@@ -2034,157 +1472,26 @@ function IconLayoutWrapper({ children, className, isInvisible }) {
   ), children });
 }
 
-const SecondaryButton = React__namespace.default.forwardRef((props, innerRef) => {
-  const { textColor = "primary", textHoverColor = "blue-900" } = props, rest = __rest(props, ["textColor", "textHoverColor"]);
-  return jsxRuntime.jsx(ButtonV2, Object.assign({ ref: innerRef }, rest, { className: classNames__default.default([
-    `ui:text-${textColor}`,
-    // Colors of any icons on the button
-    "ui:bg-white",
-    "ui:border-neutral-border-high-contrast",
-    {
-      "ui:hover:border-neutral-interactive ui:hover:bg-primary-background": !props.isDisabled
-    }
-  ], props.className), textColor, textHoverColor }));
-});
-
-var img$6 = "data:image/svg+xml,%3csvg width='144' height='144' viewBox='0 0 144 144' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M72 144C111.765 144 144 111.765 144 72C144 32.2355 111.765 0 72 0C32.2355 0 0 32.2355 0 72C0 111.765 32.2355 144 72 144Z' fill='%23BBE3D7'/%3e%3cpath d='M100 28H44C41.7909 28 40 29.7909 40 32V112C40 114.209 41.7909 116 44 116H100C102.209 116 104 114.209 104 112V32C104 29.7909 102.209 28 100 28Z' fill='%23FBFEFF'/%3e%3cellipse cx='58' cy='98' rx='4' ry='3' fill='%23FFD3E5'/%3e%3cellipse cx='58' cy='98' rx='4' ry='3' fill='%23FFD3E5'/%3e%3cellipse cx='58' cy='98' rx='4' ry='3' fill='%23FFD3E5'/%3e%3cellipse cx='86' cy='98' rx='4' ry='3' fill='%23FFD3E5'/%3e%3cellipse cx='86' cy='98' rx='4' ry='3' fill='%23FFD3E5'/%3e%3cellipse cx='86' cy='98' rx='4' ry='3' fill='%23FFD3E5'/%3e%3cpath d='M71.9007 101.202C70.0421 101.202 68.5352 99.6148 68.5352 97.6578V96H75.2663V97.6578C75.2663 99.6148 73.7594 101.202 71.9007 101.202Z' fill='%23454545'/%3e%3cpath d='M60.0918 96.0458C59.8056 95.6233 59.3882 95.5719 59.2189 95.5719C59.0496 95.5719 58.6252 95.6181 58.3461 96.0458C57.9584 96.6394 57.1663 96.8045 56.5764 96.4145C55.9865 96.025 55.8224 95.2273 56.2101 94.6338C56.8775 93.6111 58.0023 93 59.2189 93C60.4355 93 61.5603 93.6111 62.2284 94.6338C62.6154 95.2273 62.4513 96.025 61.8614 96.4145C61.645 96.5575 60.6888 96.9281 60.0918 96.0458Z' fill='%23454545'/%3e%3cpath d='M85.6543 96.0458C85.3681 95.6233 84.9513 95.5719 84.7814 95.5719C84.6121 95.5719 84.1883 95.6181 83.9092 96.0458C83.5215 96.6394 82.7288 96.8045 82.1389 96.4145C81.549 96.025 81.3849 95.2273 81.7726 94.6338C82.4406 93.6111 83.5655 93 84.7821 93C85.998 93 87.1228 93.6111 87.7909 94.6338C88.1786 95.2273 88.0144 96.025 87.4246 96.4145C87.2081 96.5575 86.2519 96.9281 85.6543 96.0458Z' fill='%23454545'/%3e%3crect x='88.8281' y='45.8281' width='8' height='4' rx='2' transform='rotate(45 88.8281 45.8281)' fill='%23BBE3D7'/%3e%3crect x='100.143' y='45.8281' width='12' height='4' rx='2' transform='rotate(135 100.143 45.8281)' fill='%23BBE3D7'/%3e%3crect x='46' y='46' width='34' height='8' rx='4' fill='%23C0E9FA'/%3e%3crect x='88.8281' y='65.8281' width='8' height='4' rx='2' transform='rotate(45 88.8281 65.8281)' fill='%23BBE3D7'/%3e%3crect x='100.143' y='65.8281' width='12' height='4' rx='2' transform='rotate(135 100.143 65.8281)' fill='%23BBE3D7'/%3e%3crect x='46' y='66' width='34' height='8' rx='4' fill='%23C0E9FA'/%3e%3c/svg%3e";
-
-var img$5 = "data:image/svg+xml,%3csvg width='144' height='144' viewBox='0 0 144 144' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg clip-path='url(%23clip0_1866_119823)'%3e%3cmask id='mask0_1866_119823' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='144' height='144'%3e%3cpath d='M0 0V144H144V0H0H0Z' fill='white'/%3e%3c/mask%3e%3cg mask='url(%23mask0_1866_119823)'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M72 144C32.235 144 0 111.765 0 72C0 32.235 32.235 0 72 0C111.765 0 144 32.235 144 72C144 111.765 111.765 144 72 144Z' fill='%236ABFA5'/%3e%3c/g%3e%3cmask id='mask1_1866_119823' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='54' y='36' width='35' height='35'%3e%3cpath d='M71.14 36L71.4657 36.003C80.7804 36.1767 88.28 43.7828 88.28 53.14V70.065L54 69.882V53.14C54 43.674 61.673 36 71.14 36ZM71.14 41.472L70.8441 41.4757C64.6488 41.6327 59.674 46.7039 59.674 52.937V65.524L82.605 65.646V52.937C82.605 46.605 77.471 41.472 71.14 41.472Z' fill='white'/%3e%3c/mask%3e%3cg mask='url(%23mask1_1866_119823)'%3e%3cpath d='M71.14 36L71.4657 36.003C80.7804 36.1767 88.28 43.7828 88.28 53.14V70.065L54 69.882V53.14C54 43.674 61.673 36 71.14 36ZM71.14 41.472L70.8441 41.4757C64.6488 41.6327 59.674 46.7039 59.674 52.937V65.524L82.605 65.646V52.937C82.605 46.605 77.471 41.472 71.14 41.472Z' fill='%23F2F2F2'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M71 39L71.3085 39.0035C78.8971 39.1745 85 45.6404 85 53.5915V68L57 67.8442V53.5915C57 45.533 63.2673 39 71 39ZM71 43.6584L70.7334 43.6623C65.6846 43.8094 61.6345 48.1211 61.6345 53.4187V64.1342L80.3646 64.238V53.4187C80.3646 48.0282 76.1712 43.6584 71 43.6584Z' fill='%23DEDEDE'/%3e%3c/g%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M90.5966 107.98H53.4036C50.1986 107.98 47.5996 105.381 47.5996 102.176V68.7708C47.5996 65.5658 50.1986 62.9668 53.4036 62.9668H90.5966C93.8026 62.9668 96.4006 65.5658 96.4006 68.7708V102.176C96.4006 105.381 93.8026 107.98 90.5966 107.98Z' fill='white'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M71.9277 75.3438C69.1662 75.3438 66.9277 77.5836 66.9277 80.3467C66.9277 82.3006 68.0499 83.9884 69.6804 84.8115L69.6813 95.3438H74.1751L74.1761 84.8115C75.8065 83.9884 76.9277 82.3006 76.9277 80.3467C76.9277 77.5836 74.6893 75.3438 71.9277 75.3438Z' fill='%236670A5'/%3e%3cpath d='M61 62H53V63H61V62Z' fill='white'/%3e%3cpath d='M89 62H81V63H89V62Z' fill='white'/%3e%3cpath d='M72 144C111.765 144 144 111.765 144 72C144 32.2355 111.765 0 72 0C32.2355 0 0 32.2355 0 72C0 111.765 32.2355 144 72 144Z' fill='%236ABFA5'/%3e%3cpath d='M76.975 32.7732C79.9117 37.5004 83.0276 42.9368 86.1287 48.7329C87.8031 51.8633 90.8123 54.0548 94.2988 54.6825C100.469 55.7938 106.31 56.9717 111.465 58.1712C115.702 59.1572 117.426 64.2717 114.653 67.6338C111.028 72.0263 106.95 76.7279 102.457 81.5292C100.104 84.0461 98.9851 87.4836 99.4054 90.909C100.173 97.1657 100.778 103.076 101.239 108.507C101.61 112.876 97.2381 116.105 93.1944 114.44C87.6662 112.163 82.6966 109.553 77.0542 106.776C73.8839 105.217 70.1732 105.197 66.9841 106.72C61.3559 109.408 56.0667 111.994 50.9051 114.19C46.8445 115.918 42.404 112.698 42.7799 108.29C43.2385 102.918 43.8374 97.0822 44.5947 90.909C45.015 87.4829 43.8971 84.0454 41.5426 81.5286C37.051 76.7273 32.9716 72.0256 29.3475 67.6331C26.5747 64.271 28.2981 59.1565 32.5352 58.1705C37.6902 56.9711 43.5319 55.7931 49.7019 54.6819C53.1878 54.0542 56.1969 51.8626 57.872 48.7322C60.9725 42.9362 64.0884 37.4997 67.0257 32.7725C69.3225 29.0757 74.6775 29.0757 76.975 32.7732Z' fill='%23EDFFF9'/%3e%3cpath opacity='0.5' d='M60.6635 77.2045C60.6635 74.8627 58.2874 72.9648 55.3561 72.9648C52.4249 72.9648 50.0488 74.8627 50.0488 77.2045C50.0488 79.5455 52.4249 81.4441 55.3561 81.4441C58.2874 81.4441 60.6635 79.5455 60.6635 77.2045Z' fill='%23FF83B4'/%3e%3cpath opacity='0.5' d='M93.9499 77.2045C93.9499 74.8627 91.5739 72.9648 88.6426 72.9648C85.712 72.9648 83.3359 74.8627 83.3359 77.2045C83.3359 79.5455 85.712 81.4441 88.6426 81.4441C91.5739 81.4441 93.9499 79.5455 93.9499 77.2045Z' fill='%23FF83B4'/%3e%3cpath d='M71.9988 76.516C70.2801 76.516 68.5613 75.9577 67.1272 74.8417C66.5478 74.3911 66.4424 73.554 66.8923 72.9727C67.3414 72.3915 68.176 72.2858 68.7554 72.7363C70.6648 74.2227 73.3329 74.2227 75.243 72.7363C75.8224 72.2858 76.6562 72.3915 77.1061 72.9727C77.5552 73.554 77.4498 74.3911 76.8704 74.8417C75.4363 75.9577 73.7176 76.516 71.9988 76.516Z' fill='%23454545'/%3e%3cpath d='M58.6251 73.96C58.3276 73.5222 57.8939 73.469 57.718 73.469C57.5421 73.469 57.101 73.5168 56.811 73.96C56.4081 74.5749 55.585 74.746 54.972 74.3419C54.3591 73.9384 54.1885 73.1121 54.5914 72.4972C55.2849 71.4378 56.4538 70.8047 57.718 70.8047C58.9822 70.8047 60.1511 71.4378 60.8453 72.4972C61.2475 73.1121 61.077 73.9384 60.464 74.3419C60.2391 74.49 59.2454 74.8739 58.6251 73.96Z' fill='%23454545'/%3e%3cpath d='M87.1876 73.96C86.8901 73.5222 86.4571 73.469 86.2805 73.469C86.1046 73.469 85.6642 73.5168 85.3741 73.96C84.9713 74.5749 84.1475 74.746 83.5345 74.3419C82.9216 73.9384 82.751 73.1121 83.1539 72.4972C83.8481 71.4378 85.017 70.8047 86.2812 70.8047C87.5447 70.8047 88.7136 71.4378 89.4078 72.4972C89.8107 73.1121 89.6401 73.9384 89.0272 74.3419C88.8022 74.49 87.8086 74.8739 87.1876 73.96Z' fill='%23454545'/%3e%3cg clip-path='url(%23clip1_1866_119823)'%3e%3cmask id='mask2_1866_119823' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='144' height='144'%3e%3cpath d='M0 0V144H144V0H0H0Z' fill='white'/%3e%3c/mask%3e%3cg mask='url(%23mask2_1866_119823)'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M72 144C32.235 144 0 111.765 0 72C0 32.235 32.235 0 72 0C111.765 0 144 32.235 144 72C144 111.765 111.765 144 72 144Z' fill='%23BBE3D7'/%3e%3c/g%3e%3cmask id='mask3_1866_119823' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='54' y='36' width='35' height='35'%3e%3cpath d='M71.14 36L71.4657 36.003C80.7804 36.1767 88.28 43.7828 88.28 53.14V70.065L54 69.882V53.14C54 43.674 61.673 36 71.14 36ZM71.14 41.472L70.8441 41.4757C64.6488 41.6327 59.674 46.7039 59.674 52.937V65.524L82.605 65.646V52.937C82.605 46.605 77.471 41.472 71.14 41.472Z' fill='white'/%3e%3c/mask%3e%3cg mask='url(%23mask3_1866_119823)'%3e%3cpath d='M71.14 36L71.4657 36.003C80.7804 36.1767 88.28 43.7828 88.28 53.14V70.065L54 69.882V53.14C54 43.674 61.673 36 71.14 36ZM71.14 41.472L70.8441 41.4757C64.6488 41.6327 59.674 46.7039 59.674 52.937V65.524L82.605 65.646V52.937C82.605 46.605 77.471 41.472 71.14 41.472Z' fill='%23F2F2F2'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M71 39L71.3085 39.0035C78.8971 39.1745 85 45.6404 85 53.5915V68L57 67.8442V53.5915C57 45.533 63.2673 39 71 39ZM71 43.6584L70.7334 43.6623C65.6846 43.8094 61.6345 48.1211 61.6345 53.4187V64.1342L80.3646 64.238V53.4187C80.3646 48.0282 76.1712 43.6584 71 43.6584Z' fill='%23DEDEDE'/%3e%3c/g%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M90.5966 107.98H53.4036C50.1986 107.98 47.5996 105.381 47.5996 102.176V68.7708C47.5996 65.5658 50.1986 62.9668 53.4036 62.9668H90.5966C93.8026 62.9668 96.4006 65.5658 96.4006 68.7708V102.176C96.4006 105.381 93.8026 107.98 90.5966 107.98Z' fill='white'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M71.9277 75.3438C69.1662 75.3438 66.9277 77.5836 66.9277 80.3467C66.9277 82.3006 68.0499 83.9884 69.6804 84.8115L69.6813 95.3438H74.1751L74.1761 84.8115C75.8065 83.9884 76.9277 82.3006 76.9277 80.3467C76.9277 77.5836 74.6893 75.3438 71.9277 75.3438Z' fill='%236670A5'/%3e%3cpath d='M61 62H53V63H61V62Z' fill='white'/%3e%3cpath d='M89 62H81V63H89V62Z' fill='white'/%3e%3cpath d='M72 144C111.765 144 144 111.765 144 72C144 32.2355 111.765 0 72 0C32.2355 0 0 32.2355 0 72C0 111.765 32.2355 144 72 144Z' fill='%23BBE3D7'/%3e%3cpath d='M76.975 32.7732C79.9117 37.5004 83.0276 42.9368 86.1287 48.7329C87.8031 51.8633 90.8123 54.0548 94.2988 54.6825C100.469 55.7938 106.31 56.9717 111.465 58.1712C115.702 59.1572 117.426 64.2717 114.653 67.6338C111.028 72.0263 106.95 76.7279 102.457 81.5292C100.104 84.0461 98.9851 87.4836 99.4054 90.909C100.173 97.1657 100.778 103.076 101.239 108.507C101.61 112.876 97.2381 116.105 93.1944 114.44C87.6662 112.163 82.6966 109.553 77.0542 106.776C73.8839 105.217 70.1732 105.197 66.9841 106.72C61.3559 109.408 56.0667 111.994 50.9051 114.19C46.8445 115.918 42.404 112.698 42.7799 108.29C43.2385 102.918 43.8374 97.0822 44.5947 90.909C45.015 87.4829 43.8971 84.0454 41.5426 81.5286C37.051 76.7273 32.9716 72.0256 29.3475 67.6331C26.5747 64.271 28.2981 59.1565 32.5352 58.1705C37.6902 56.9711 43.5319 55.7931 49.7019 54.6819C53.1878 54.0542 56.1969 51.8626 57.872 48.7322C60.9725 42.9362 64.0884 37.4997 67.0257 32.7725C69.3225 29.0757 74.6775 29.0757 76.975 32.7732Z' fill='%23EDFFF9'/%3e%3cpath opacity='0.5' d='M60.6635 77.2045C60.6635 74.8627 58.2874 72.9648 55.3561 72.9648C52.4249 72.9648 50.0488 74.8627 50.0488 77.2045C50.0488 79.5455 52.4249 81.4441 55.3561 81.4441C58.2874 81.4441 60.6635 79.5455 60.6635 77.2045Z' fill='%23FF83B4'/%3e%3cpath opacity='0.5' d='M93.9499 77.2045C93.9499 74.8627 91.5739 72.9648 88.6426 72.9648C85.712 72.9648 83.3359 74.8627 83.3359 77.2045C83.3359 79.5455 85.712 81.4441 88.6426 81.4441C91.5739 81.4441 93.9499 79.5455 93.9499 77.2045Z' fill='%23FF83B4'/%3e%3cpath d='M71.9988 76.516C70.2801 76.516 68.5613 75.9577 67.1272 74.8417C66.5478 74.3911 66.4424 73.554 66.8923 72.9727C67.3414 72.3915 68.176 72.2858 68.7554 72.7363C70.6648 74.2227 73.3329 74.2227 75.243 72.7363C75.8224 72.2858 76.6562 72.3915 77.1061 72.9727C77.5552 73.554 77.4498 74.3911 76.8704 74.8417C75.4363 75.9577 73.7176 76.516 71.9988 76.516Z' fill='%23454545'/%3e%3cpath d='M58.6251 73.96C58.3276 73.5222 57.8939 73.469 57.718 73.469C57.5421 73.469 57.101 73.5168 56.811 73.96C56.4081 74.5749 55.585 74.746 54.972 74.3419C54.3591 73.9384 54.1885 73.1121 54.5914 72.4972C55.2849 71.4378 56.4538 70.8047 57.718 70.8047C58.9822 70.8047 60.1511 71.4378 60.8453 72.4972C61.2475 73.1121 61.077 73.9384 60.464 74.3419C60.2391 74.49 59.2454 74.8739 58.6251 73.96Z' fill='%23454545'/%3e%3cpath d='M87.1876 73.96C86.8901 73.5222 86.4571 73.469 86.2805 73.469C86.1046 73.469 85.6642 73.5168 85.3741 73.96C84.9713 74.5749 84.1475 74.746 83.5345 74.3419C82.9216 73.9384 82.751 73.1121 83.1539 72.4972C83.8481 71.4378 85.017 70.8047 86.2812 70.8047C87.5447 70.8047 88.7136 71.4378 89.4078 72.4972C89.8107 73.1121 89.6401 73.9384 89.0272 74.3419C88.8022 74.49 87.8086 74.8739 87.1876 73.96Z' fill='%23454545'/%3e%3ccircle cx='72' cy='72' r='72' fill='%23BBE3D7'/%3e%3cpath d='M57.8627 78L65 85.1367C65 85.1367 58.3298 97.4142 46.3849 109.359C42.1198 113.625 35.8091 114.23 32.2895 110.71C28.7706 107.19 29.3753 100.88 33.6404 96.6145C45.5853 84.6696 57.8627 78 57.8627 78Z' fill='%236670A5'/%3e%3cpath d='M49 83.6111C50.3607 85.6362 51.9273 87.5447 53.691 89.3083C55.4553 91.072 57.3631 92.6393 59.3882 94C63.0565 88.8161 65 85.239 65 85.239L57.7604 78C57.7604 78 54.1839 79.9435 49 83.6111Z' fill='%237A86C6'/%3e%3cpath d='M113 62.5C113 80.4489 98.4489 95 80.5 95C62.5511 95 48 80.4489 48 62.5C48 44.5504 62.5511 30 80.5 30C98.4489 30 113 44.5504 113 62.5Z' fill='%236670A5'/%3e%3cpath d='M104 62.5003C104 75.4788 93.4787 86 80.5 86C67.5213 86 57 75.4788 57 62.5003C57 49.5218 67.5213 39 80.5 39C93.4787 39 104 49.5218 104 62.5003Z' fill='%23CCECF9'/%3e%3cpath d='M66.5 64C65.6716 64 65 63.3273 65 62.4976V59.5024C65 58.6727 65.6716 58 66.5 58C67.3284 58 68 58.6727 68 59.5024V62.4974C68.0002 63.3272 67.3284 64 66.5 64Z' fill='%232D2D2D'/%3e%3cpath d='M94.5 64C93.6716 64 93 63.3273 93 62.4976V59.5024C93 58.6727 93.6716 58 94.5 58C95.3284 58 96 58.6727 96 59.5024V62.4974C96.0002 63.3272 95.3284 64 94.5 64Z' fill='%232D2D2D'/%3e%3cpath d='M80.5002 69C78.5064 69 76.6346 68.1213 75.3655 66.5887C74.828 65.9395 74.8906 64.9532 75.5057 64.3859C76.1208 63.8187 77.0552 63.8846 77.5928 64.5338C78.3 65.3879 79.3596 65.8776 80.5001 65.8776C81.6403 65.8776 82.6999 65.3879 83.4071 64.5338C83.9447 63.8846 84.8791 63.8183 85.4943 64.3859C86.1094 64.9532 86.1722 65.9395 85.6344 66.5887C84.3657 68.1213 82.4941 69 80.5002 69Z' fill='%232D2D2D'/%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cclipPath id='clip0_1866_119823'%3e%3crect width='144' height='144' fill='white'/%3e%3c/clipPath%3e%3cclipPath id='clip1_1866_119823'%3e%3crect width='144' height='144' fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e";
-
-var img$4 = "data:image/svg+xml,%3csvg width='144' height='144' viewBox='0 0 144 144' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M72 144C111.765 144 144 111.765 144 72C144 32.2355 111.765 0 72 0C32.2355 0 0 32.2355 0 72C0 111.765 32.2355 144 72 144Z' fill='%236ABFA5'/%3e%3cpath d='M76.975 32.7732C79.9117 37.5004 83.0276 42.9368 86.1287 48.7329C87.8031 51.8633 90.8123 54.0548 94.2988 54.6825C100.469 55.7938 106.31 56.9717 111.465 58.1712C115.702 59.1572 117.426 64.2717 114.653 67.6338C111.028 72.0263 106.95 76.7279 102.457 81.5292C100.104 84.0461 98.9851 87.4836 99.4054 90.909C100.173 97.1657 100.778 103.076 101.239 108.507C101.61 112.876 97.2381 116.105 93.1944 114.44C87.6662 112.163 82.6966 109.553 77.0542 106.776C73.8839 105.217 70.1732 105.197 66.9841 106.72C61.3559 109.408 56.0667 111.994 50.9051 114.19C46.8445 115.918 42.404 112.698 42.7799 108.29C43.2385 102.918 43.8374 97.0822 44.5947 90.909C45.015 87.4829 43.8971 84.0454 41.5426 81.5286C37.051 76.7273 32.9716 72.0256 29.3475 67.6331C26.5747 64.271 28.2981 59.1565 32.5352 58.1705C37.6902 56.9711 43.5319 55.7931 49.7019 54.6819C53.1878 54.0542 56.1969 51.8626 57.872 48.7322C60.9725 42.9362 64.0884 37.4997 67.0257 32.7725C69.3225 29.0757 74.6775 29.0757 76.975 32.7732Z' fill='%23EDFFF9'/%3e%3cpath opacity='0.5' d='M60.6643 77.204C60.6643 74.8623 58.2883 72.9644 55.357 72.9644C52.4257 72.9644 50.0497 74.8623 50.0497 77.204C50.0497 79.545 52.4257 81.4436 55.357 81.4436C58.2883 81.4436 60.6643 79.545 60.6643 77.204Z' fill='%23FF83B4'/%3e%3cpath opacity='0.5' d='M93.9503 77.204C93.9503 74.8623 91.5743 72.9644 88.643 72.9644C85.7124 72.9644 83.3364 74.8623 83.3364 77.204C83.3364 79.545 85.7124 81.4436 88.643 81.4436C91.5743 81.4436 93.9503 79.545 93.9503 77.204Z' fill='%23FF83B4'/%3e%3cpath d='M72 76.516C70.2813 76.516 68.5625 75.9577 67.1285 74.8417C66.5491 74.3911 66.4437 73.554 66.8935 72.9727C67.3426 72.3915 68.1772 72.2858 68.7566 72.7363C70.666 74.2227 73.3341 74.2227 75.2442 72.7363C75.8236 72.2858 76.6575 72.3915 77.1073 72.9727C77.5564 73.554 77.451 74.3911 76.8716 74.8417C75.4375 75.9577 73.7188 76.516 72 76.516Z' fill='%23454545'/%3e%3cpath d='M58.626 73.96C58.3286 73.5222 57.8949 73.469 57.719 73.469C57.5431 73.469 57.102 73.5168 56.8119 73.96C56.4091 74.5749 55.586 74.746 54.973 74.3419C54.36 73.9384 54.1895 73.1121 54.5923 72.4972C55.2859 71.4378 56.4548 70.8047 57.719 70.8047C58.9832 70.8047 60.1521 71.4378 60.8463 72.4972C61.2485 73.1121 61.0779 73.9384 60.465 74.3419C60.24 74.49 59.2464 74.8739 58.626 73.96Z' fill='%23454545'/%3e%3cpath d='M87.1882 73.96C86.8907 73.5222 86.4577 73.469 86.2811 73.469C86.1052 73.469 85.6648 73.5168 85.3747 73.96C84.9719 74.5749 84.1481 74.746 83.5351 74.3419C82.9222 73.9384 82.7516 73.1121 83.1545 72.4972C83.8487 71.4378 85.0176 70.8047 86.2818 70.8047C87.5453 70.8047 88.7142 71.4378 89.4084 72.4972C89.8113 73.1121 89.6407 73.9384 89.0278 74.3419C88.8028 74.49 87.8092 74.8739 87.1882 73.96Z' fill='%23454545'/%3e%3c/svg%3e";
-
-const imageSrc = {
-  "no-open-alerts": img$6,
-  "search-not-found": img$5,
-  "no-notes-found": img$4
-};
-const EmptyListMessage = ({ text, imageName, dataTestId = "empty-list-message", className }) => {
-  return jsxRuntime.jsxs("div", { className: classNames__default.default("ui:flex ui:flex-col ui:items-center", className), "data-test-id": dataTestId, children: [imageName && jsxRuntime.jsx("img", { className: "ui:mb-2.5", alt: "", src: imageSrc[imageName] }), jsxRuntime.jsx(Text, { className: "ui:text-center", text })] });
-};
-
-var img$3 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='68' height='20' viewBox='0 0 68 20'%3e %3cg fill='none' fill-rule='nonzero'%3e %3ccircle cx='10' cy='10' r='10' fill='%23F09'%3e %3canimate attributeName='opacity' dur='2s' values='1%3b0.6%3b1' repeatCount='indefinite' begin='0.1'/%3e %3canimate attributeName='r' dur='2s' repeatCount='indefinite' values='10%3b8%3b10' begin='0.1'/%3e %3c/circle%3e %3ccircle cx='34' cy='10' r='10' fill='%236ABFA5'%3e %3canimate attributeName='opacity' dur='2s' values='1%3b0.6%3b1' repeatCount='indefinite' begin='0.6'/%3e %3canimate attributeName='r' dur='2s' repeatCount='indefinite' values='10%3b8%3b10' begin='0.6'/%3e %3c/circle%3e %3ccircle cx='58' cy='10' r='10' fill='%236670A5'%3e %3canimate attributeName='opacity' dur='2s' values='1%3b0.6%3b1' repeatCount='indefinite' begin='1.1'/%3e %3canimate attributeName='r' dur='2s' repeatCount='indefinite' values='10%3b8%3b10' begin='1.1'/%3e %3c/circle%3e %3c/g%3e%3c/svg%3e";
-
-var img$2 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='margin: auto%3b background: none%3b display: block%3b shape-rendering: auto%3b' width='200px' height='200px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3e%3ccircle cx='50' cy='50' fill='none' stroke='%23009fe3' stroke-width='16' r='36' stroke-dasharray='169.64600329384882 58.548667764616276'%3e %3canimateTransform attributeName='transform' type='rotate' repeatCount='indefinite' dur='1.1111111111111112s' values='0 50 50%3b360 50 50' keyTimes='0%3b1'%3e%3c/animateTransform%3e%3c/circle%3e%3c/svg%3e";
-
-var img$1 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8'%3f%3e%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='margin: auto%3b background: none%3b display: block%3b shape-rendering: auto%3b' width='200px' height='200px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3e%3ccircle cx='50' cy='50' fill='none' stroke='%23cbd5e1' stroke-width='16' r='36' stroke-dasharray='169.64600329384882 58.548667764616276'%3e %3canimateTransform attributeName='transform' type='rotate' repeatCount='indefinite' dur='1.1111111111111112s' values='0 50 50%3b360 50 50' keyTimes='0%3b1'%3e%3c/animateTransform%3e%3c/circle%3e%3c!-- %5bldio%5d generated by https://loading.io/ --%3e%3c/svg%3e";
-
-var css_248z$8 = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.cweb-loading {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.cweb-loading .cweb-loading-text {\n  margin-bottom: 24px;\n}\n.cweb-loading.as-modal {\n  position: fixed;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  z-index: 9999;\n  background-color: rgba(255, 255, 255, 0.6);\n}\n.cweb-loading.as-modal .cweb-loading-panel {\n  position: relative;\n  width: 320px;\n  min-height: 120px;\n  border-radius: 4px;\n  padding: 16px;\n  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.36);\n  background-color: #ffffff;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: center;\n}\n.cweb-loading.as-modal .cweb-loading-panel:before {\n  position: absolute;\n  content: \"\";\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 1;\n  height: 3px;\n  background-color: #6abfa5;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n}";
-styleInject(css_248z$8);
-
-function LoadingIndicator(_a) {
-  var { asModal = false, asSpinner = false, className = "", spinnerColor = "blue", dataTestId = "loading-indicator" } = _a, restProps = __rest(_a, ["asModal", "asSpinner", "className", "spinnerColor", "dataTestId"]);
-  const spinnerToRender = spinnerColor === "blue" ? img$2 : img$1;
-  const containerClassName = classNames__default.default("cweb-loading", className, {
-    "as-modal": asModal
-  });
-  return jsxRuntime.jsx("div", Object.assign({ "aria-label": "Loading" }, restProps, { className: containerClassName, "data-test-id": dataTestId, role: "progressbar", children: jsxRuntime.jsx("img", { alt: "", src: asSpinner ? spinnerToRender : img$3, "data-chromatic": "ignore", className: classNames__default.default("ui:fill-current ui:stroke-current ui:text-gray-600", {
-    "ui:h-4 ui:w-4": asSpinner,
-    "ui:h-12 ui:w-12": !asSpinner
-  }) }) }));
-}
-
-const CenteredHero = ({ title, text, image, imageAlt = "", slots, background = "slate-50", imageSize = "small", dataTestId = "centered-hero" }) => {
-  return jsxRuntime.jsxs("div", { className: classNames__default.default("ui:align-center ui:flex ui:w-full ui:flex-col ui:items-center ui:p-6", {
-    "ui:bg-white": background === "white",
-    "ui:bg-slate-50": background === "slate-50"
-  }), "data-test-id": dataTestId, children: [image && jsxRuntime.jsx("img", { src: image, alt: imageAlt, className: classNames__default.default("ui:mb-4", {
-    "ui:max-h-36": imageSize === "small",
-    "ui:max-h-72": imageSize === "large"
-  }) }), title && jsxRuntime.jsx(Title, { variant: "base", children: title }), text && jsxRuntime.jsx(Text, { className: "ui:text-center", children: text }), (slots === null || slots === void 0 ? void 0 : slots.bottom) && jsxRuntime.jsx(Box, { _mt: "l", children: slots === null || slots === void 0 ? void 0 : slots.bottom })] });
-};
-
-const AccordionListActions = (props) => {
-  return jsxRuntime.jsx("div", { className: "ui:flex ui:flex-row ui:flex-wrap ui:justify-start ui:gap-3", children: props.children });
-};
-
-const AccordionList = (_a) => {
-  var { localisations: { title, searchPlaceholder = "", emptyListText = "" }, buttonProps, accordionItems, isSearchEnabled = false, isLoading = false, isError = false, errorState, actions, headerActions } = _a, accordionProps = __rest(_a, ["localisations", "buttonProps", "accordionItems", "isSearchEnabled", "isLoading", "isError", "errorState", "actions", "headerActions"]);
-  const [searchString, setSearchString] = React.useState("");
-  const filterItems = (items, filterString) => {
-    return items.filter((item) => isSubstring(item.title, filterString) || isSubstring(item.subtitle, filterString) || isSubstring(item.itemId, filterString) || isSubstring(item.matchTerm, filterString));
-  };
-  const filterAccordionListItems = (item, filterString) => {
-    switch (item.draggableListType) {
-      case "draggable":
-        return Object.assign(Object.assign({}, item), { listItems: filterItems(item.listItems, filterString) });
-      case "sortable":
-        return Object.assign(Object.assign({}, item), { listItems: filterItems(item.listItems, filterString) });
-      default:
-        return Object.assign(Object.assign({}, item), { listItems: filterItems(item.listItems, filterString) });
-    }
-  };
-  const contentForAccordionItem = (item) => {
-    switch (item.draggableListType) {
-      case "draggable":
-        return jsxRuntime.jsx(List, { draggableListType: item.draggableListType, items: item.listItems });
-      case "sortable":
-        return jsxRuntime.jsx(List, { draggableListType: item.draggableListType, draggableIdentifier: item.draggableIdentifier, items: item.listItems });
-      default:
-        return jsxRuntime.jsx(List, { items: item.listItems });
-    }
-  };
-  const titleForAccordionItem = ({ searchEnabled, itemTitle, numberOfItems, filteredNumberOfItems, filterString }) => {
-    if (!searchEnabled) {
-      return itemTitle;
-    }
-    if (filterString.length > 0) {
-      return `${itemTitle} (${filteredNumberOfItems}/${numberOfItems})`;
-    }
-    return `${itemTitle} (${numberOfItems})`;
-  };
-  const filteredAccordionItems = React.useMemo(() => {
-    var _a2;
-    return (_a2 = accordionItems === null || accordionItems === void 0 ? void 0 : accordionItems.map((item) => {
-      if (!isSearchEnabled) {
-        return Object.assign(Object.assign({}, item), { content: contentForAccordionItem(item) });
-      }
-      const filteredItem = filterAccordionListItems(item, searchString);
-      return Object.assign(Object.assign({}, filteredItem), { title: titleForAccordionItem({
-        searchEnabled: isSearchEnabled,
-        itemTitle: item.title,
-        numberOfItems: item.listItems.length,
-        filteredNumberOfItems: filteredItem.listItems.length,
-        filterString: searchString
-      }), content: contentForAccordionItem(filteredItem) });
-    })) !== null && _a2 !== void 0 ? _a2 : [];
-  }, [accordionItems, searchString, isSearchEnabled]);
-  return jsxRuntime.jsxs("div", { className: "ui:flex ui:h-full ui:flex-col ui:overflow-auto ui:rounded-lg ui:bg-white", children: [jsxRuntime.jsxs("div", { className: "ui:flex ui:flex-col ui:space-y-4 ui:border-b ui:border-slate-200 ui:p-6", children: [jsxRuntime.jsx(Stack, { axis: "x", justify: "between", width: "full", children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [title && jsxRuntime.jsx(Title, { variant: "sm", children: title }), headerActions && jsxRuntime.jsx(jsxRuntime.Fragment, { children: headerActions })] }) }), isSearchEnabled && jsxRuntime.jsx(SearchInput, { width: "full", value: searchString, placeholder: searchPlaceholder, onChange: (e) => {
-    setSearchString(typeof e === "string" ? e : e.currentTarget.value);
-  } }), buttonProps && jsxRuntime.jsx("div", { children: jsxRuntime.jsx(SecondaryButton, Object.assign({}, buttonProps)) }), actions && jsxRuntime.jsx("div", { children: actions })] }), isError && errorState && jsxRuntime.jsx(CenteredHero, { dataTestId: "hero-error", title: errorState.title, text: errorState.description, image: "" }), !isError && isLoading && jsxRuntime.jsx(LoadingIndicator, { className: "ui:flex-1" }), !isError && !isLoading && filteredAccordionItems.length > 0 && jsxRuntime.jsx(Accordion, Object.assign({}, accordionProps, { items: filteredAccordionItems })), !isError && !isLoading && filteredAccordionItems.length === 0 && jsxRuntime.jsx(EmptyListMessage, { imageName: "search-not-found", text: emptyListText, className: "ui:mb-4 ui:border-b ui:border-t ui:border-slate-200 ui:py-4" })] });
-};
-AccordionList.Actions = AccordionListActions;
-
 const TertiaryButton = React__namespace.default.forwardRef((props, innerRef) => {
   return jsxRuntime.jsx(ButtonV2, Object.assign({ ref: innerRef }, props, { className: classNames__default.default([
     "ui:text-primary",
     "ui:border-transparent ui:bg-transparent ui:!shadow-none",
     {
-      "ui:hover:bg-primary-background ui:hover:text-primary-dark": !props.isDisabled
+      "ui:hover:bg-primary-background ui:hover:text-primary-dark": !props.disabled
     }
   ], props.className), textColor: "blue-800", textHoverColor: "blue-900" }));
 });
 
 const ModalHeader = (props) => {
   var _a;
-  return jsxRuntime.jsxs("div", { className: classNames__default.default("ui:flex ui:flex-row", "ui:space-x-2 ui:px-6 ui:py-4", "ui:items-center ui:justify-between", "ui:border-b ui:border-slate-100", "ui:rounded-t-lg"), children: [jsxRuntime.jsx(Title, { text: props.title, type: "sm" }), jsxRuntime.jsx(TertiaryButton, { leadingIcon: jsxRuntime.jsx(CrossIcon, {}), onClick: props.onCloseClick, "aria-label": (_a = props.closeButtonLabel) !== null && _a !== void 0 ? _a : "Close dialog" })] });
+  return jsxRuntime.jsxs("div", { className: classNames__default.default("ui:flex ui:flex-row", "ui:space-x-2 ui:px-6 ui:py-4", "ui:items-center ui:justify-between", "ui:border-b ui:border-slate-100", "ui:rounded-t-lg"), children: [jsxRuntime.jsx(Heading, { variant: "h3", as: "h5", children: props.title }), jsxRuntime.jsx(TertiaryButton, { leadingIcon: jsxRuntime.jsx(CrossIcon, {}), onClick: props.onCloseClick, "aria-label": (_a = props.closeButtonLabel) !== null && _a !== void 0 ? _a : "Close dialog" })] });
 };
 
-const PrimaryButton = React__namespace.default.forwardRef((props, innerRef) => {
-  return jsxRuntime.jsx(ButtonV2, Object.assign({ ref: innerRef }, props, { className: classNames__default.default([
-    "ui:text-white",
-    "ui:bg-linear-to-r",
-    "ui:gradient-blue",
-    {
-      "ui:hover:gradient-blue--hover": !props.isDisabled && !props.isPending
-    }
-  ], props.className), textColor: "white" }));
-});
-
 const ModalFooter = (props) => {
   return jsxRuntime.jsxs("div", { className: classNames__default.default("ui:flex ui:flex-row", "ui:space-x-2 ui:px-6 ui:py-4", "ui:items-center", "ui:border-t ui:border-slate-100 ui:bg-slate-50", "ui:rounded-b-lg", {
-    "ui:justify-between": props.footerLeadingComponent || props.footerLeadingAccessory,
-    "ui:justify-end": !props.footerLeadingComponent && !props.footerLeadingAccessory
-  }), children: [props.footerLeadingAccessory && (typeof props.footerLeadingAccessory === "string" ? jsxRuntime.jsx(Text, { variant: "base", color: "slate-500", children: props.footerLeadingAccessory }) : props.footerLeadingAccessory), props.footerLeadingComponent && (typeof props.footerLeadingComponent === "string" ? jsxRuntime.jsx(Text, { variant: "base", color: "slate-500", children: props.footerLeadingComponent }) : jsxRuntime.jsx(SecondaryButton, Object.assign({ "data-test-id": "modal-footer-leading-secondary-button" }, props.footerLeadingComponent))), jsxRuntime.jsxs("div", { className: "ui:flex ui:flex-row ui:space-x-2", children: [props.footerTrailingComponents.secondaryButton, props.footerTrailingComponents.secondaryButtonProps && jsxRuntime.jsx(SecondaryButton, Object.assign({ "data-test-id": "modal-footer-trailing-secondary-button" }, props.footerTrailingComponents.secondaryButtonProps)), props.footerTrailingComponents.primaryButton, props.footerTrailingComponents.primaryButtonProps && jsxRuntime.jsx(PrimaryButton, Object.assign({ "data-test-id": "modal-footer-trailing-primary-button" }, props.footerTrailingComponents.primaryButtonProps))] })] });
+    "ui:justify-between": props.footerLeadingAccessory,
+    "ui:justify-end": !props.footerLeadingAccessory
+  }), children: [props.footerLeadingAccessory && (typeof props.footerLeadingAccessory === "string" ? jsxRuntime.jsx(Text, { variant: "base", color: "slate-500", children: props.footerLeadingAccessory }) : props.footerLeadingAccessory), jsxRuntime.jsxs("div", { className: "ui:flex ui:flex-row ui:space-x-2", children: [props.footerTrailingComponents.secondaryButton, props.footerTrailingComponents.primaryButton] })] });
 };
 
 const TOP_BOTTOM_MARGIN_REM = 7.5;
@@ -2210,7 +1517,7 @@ const ModalBase = (props) => {
     "ui:max-h-135 ui:overflow-y-auto": props.scrollableContent && !autoMaxContentHeight
   }), children: jsxRuntime.jsx("div", { className: classNames__default.default("ui:px-6", {
     "ui:py-6": withContentPaddingY
-  }), children: props.children }) }), jsxRuntime.jsx(ModalFooter, { footerLeadingAccessory: props.footerLeadingAccessory, footerLeadingComponent: props.footerLeadingComponent, footerTrailingComponents: props.footerTrailingComponents })] });
+  }), children: props.children }) }), jsxRuntime.jsx(ModalFooter, { footerLeadingAccessory: props.footerLeadingAccessory, footerTrailingComponents: props.footerTrailingComponents })] });
 };
 
 const Modal = (props) => {
@@ -2218,6 +1525,63 @@ const Modal = (props) => {
 };
 Modal.setAppElement = ReactModal__default.default.setAppElement;
 
+const StackInner = (props, ref) => {
+  const { children, _gap, align = "start", justify = "normal", axis = "y", className, reverse, wrap = false, divider, as } = props, attributes = __rest(props, ["children", "_gap", "align", "justify", "axis", "className", "reverse", "wrap", "divider", "as"]);
+  const stackClasses = classNames__default.default(`ui:flex`, {
+    "ui:flex-row": axis === "x",
+    "ui:flex-col": axis === "y",
+    "ui:flex-row-reverse": axis === "x" && reverse,
+    "ui:flex-col-reverse": axis === "y" && reverse,
+    "ui:flex-wrap": wrap,
+    "ui:gap-f_none": _gap === "none",
+    "ui:gap-f_xs": _gap === "xs",
+    "ui:gap-f_s": _gap === "s",
+    "ui:gap-f_base": _gap === "base",
+    "ui:gap-f_m": _gap === "m",
+    "ui:gap-f_l": _gap === "l",
+    "ui:gap-f_xl": _gap === "xl",
+    "ui:gap-f_2xl": _gap === "2xl",
+    "ui:gap-f_3xl": _gap === "3xl",
+    "ui:gap-f_4xl": _gap === "4xl",
+    "ui:justify-center": justify === "center",
+    "ui:justify-start": justify === "start",
+    "ui:justify-end": justify === "end",
+    "ui:justify-normal": justify === "normal",
+    "ui:justify-between": justify === "between",
+    "ui:justify-around": justify === "around",
+    "ui:justify-evenly": justify === "evenly",
+    "ui:justify-stretch": justify === "stretch",
+    "ui:items-center": align === "center",
+    "ui:items-start": align === "start",
+    "ui:items-end": align === "end",
+    "ui:items-baseline": align === "baseline",
+    "ui:items-stretch": align === "stretch",
+    "ui:items-normal": align === "normal"
+  });
+  const classes = tailwindMerge.twMerge(stackClasses, className);
+  if (divider) {
+    const numberOfChildNodes = React__namespace.default.Children.toArray(children).length;
+    return (
+      // @ts-expect-error - Complex polymorphic type intersection between Stack and Box props
+      jsxRuntime.jsx(Box, Object.assign({ as, ref, className: classes }, attributes, { children: React__namespace.default.Children.map(children, (child, index) => {
+        const isLastItem = index >= numberOfChildNodes - 1;
+        if (React__namespace.default.isValidElement(child) === false) {
+          return null;
+        }
+        if (isLastItem) {
+          return child;
+        }
+        return jsxRuntime.jsxs(React__namespace.default.Fragment, { children: [child, divider] });
+      }) }))
+    );
+  }
+  return (
+    // @ts-expect-error - Complex polymorphic type intersection between Stack and Box props
+    jsxRuntime.jsx(Box, Object.assign({ as, ref, className: classes }, attributes, { children }))
+  );
+};
+const Stack = React__namespace.default.forwardRef(StackInner);
+
 const Tag = (_a) => {
   var { _as = "span", _type = "neutral", _size = "large", _variant = "flat", _leadingIcon, _trailingIcon, _truncate, children, className } = _a, rest = __rest(_a, ["_as", "_type", "_size", "_variant", "_leadingIcon", "_trailingIcon", "_truncate", "children", "className"]);
   const isBordered = _variant === "bordered";
@@ -2330,20 +1694,12 @@ function checkImageValidity(src) {
     image.src = src;
   });
 }
-const legacySizeAliases = {
-  xsmall: "xs",
-  small: "s",
-  medium: "m"
-};
 const avatarSizeTokens = {
   xs: "var(--ui-semantic-size-lg)",
   s: "var(--ui-semantic-size-xl)",
   m: "var(--ui-semantic-size-5xl)"
 };
-function resolveSize(size) {
-  return size in legacySizeAliases ? legacySizeAliases[size] : size;
-}
-const Avatar = ({ color, isSelf, size = "m", applyGroupOffset, src, alt, defaultImage, initials, children, className }) => {
+const Avatar = ({ isSelf = false, size = "m", applyGroupOffset, src, alt, defaultImage, initials, children, className }) => {
   const [hasValidImage, setHasValidImage] = React.useState(false);
   React.useEffect(() => {
     let mounted = true;
@@ -2358,27 +1714,18 @@ const Avatar = ({ color, isSelf, size = "m", applyGroupOffset, src, alt, default
       mounted = false;
     };
   }, [defaultImage, src]);
-  const resolvedSize = resolveSize(size);
-  const sizeStyle = resolvedSize === "large" ? void 0 : {
-    width: avatarSizeTokens[resolvedSize],
-    height: avatarSizeTokens[resolvedSize]
+  const sizeStyle = {
+    width: avatarSizeTokens[size],
+    height: avatarSizeTokens[size]
   };
-  const sizeClassName = classNames__default.default("ui:rounded-full", {
-    "ui:h-32 ui:w-32": resolvedSize === "large"
-  });
-  const groupOffsetClassNames = classNames__default.default({
-    "ui:-ml-[calc(theme('spacing.32')/4)]": resolvedSize === "large" && applyGroupOffset
-  });
-  const groupOffsetStyle = applyGroupOffset && resolvedSize !== "large" ? { marginLeft: `calc(${avatarSizeTokens[resolvedSize]} / -4)` } : void 0;
-  const resolvedIsSelf = isSelf !== null && isSelf !== void 0 ? isSelf : color === "primary";
+  const groupOffsetStyle = applyGroupOffset ? { marginLeft: `calc(${avatarSizeTokens[size]} / -4)` } : void 0;
   const colorClassName = classNames__default.default({
-    "ui:bg-background-brand-primary-default ui:text-text-inverse-primary-default": resolvedIsSelf,
-    "ui:bg-background-neutral-tertiary-default ui:text-text-neutral-primary-default": !resolvedIsSelf
+    "ui:bg-background-brand-primary-default ui:text-text-inverse-primary-default": isSelf,
+    "ui:bg-background-neutral-tertiary-default ui:text-text-neutral-primary-default": !isSelf
   });
   const containerClassName = classNames__default.default(
     className,
-    sizeClassName,
-    groupOffsetClassNames,
+    "ui:rounded-full",
     colorClassName,
     /**
      * The design system puts a 1px inverse border on every avatar. It
@@ -2392,7 +1739,7 @@ const Avatar = ({ color, isSelf, size = "m", applyGroupOffset, src, alt, default
      */
     "ui:flex ui:shrink-0 ui:items-center ui:justify-center"
   );
-  const textVariant = resolvedSize === "m" ? "body-base-regular" : "body-small-regular";
+  const textVariant = size === "m" ? "body-base-regular" : "body-small-regular";
   const imageClassName = classNames__default.default("ui:rounded-full ui:h-full ui:w-full ui:object-cover");
   const renderAvatar = () => {
     const elementToRender = initials !== null && initials !== void 0 ? initials : children;
@@ -2401,9 +1748,6 @@ const Avatar = ({ color, isSelf, size = "m", applyGroupOffset, src, alt, default
     } else if (hasValidImage) {
       return jsxRuntime.jsx("img", { className: imageClassName, src, alt });
     } else {
-      if (resolvedSize === "large") {
-        return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "ui:text-5xl", "aria-hidden": true, children: elementToRender }), jsxRuntime.jsx(ScreenReaderText, { children: alt })] });
-      }
       return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text, { variant: textVariant, color: "current", "aria-hidden": true, children: elementToRender }), jsxRuntime.jsx(ScreenReaderText, { children: alt })] });
     }
   };
@@ -2433,14 +1777,8 @@ const AvatarGroup = (props) => {
       "ui:outline-slate-100": props.outlineColor === "slate-100",
       "ui:outline-white": props.outlineColor === "white"
     }, {
-      "ui:outline-2": isOneOfSizes(child.props.size, [
-        "xs",
-        "xsmall",
-        "s",
-        "small"
-      ]),
-      "ui:outline-4": isOneOfSizes(child.props.size, ["m", "medium"]),
-      "ui:outline-8": isOneOfSizes(child.props.size, ["large"])
+      "ui:outline-2": isOneOfSizes(child.props.size, ["xs", "s"]),
+      "ui:outline-4": isOneOfSizes(child.props.size, ["m"])
     }) }));
   }), jsxRuntime.jsx(MoreAvatarsLabel, Object.assign({}, props, { maxAvatars }))] }));
 };
@@ -2460,7 +1798,6 @@ function MoreAvatarsLabel(props) {
 }
 
 const Badge = (props) => {
-  var _a;
   const containerClasses = classNames__default.default([
     "ui:inline-flex",
     "ui:items-center",
@@ -2475,10 +1812,33 @@ const Badge = (props) => {
     "ui-typo-body-small-bold",
     "ui:text-text-brand-primary-default"
   ]);
-  const badgeContent = (_a = props.children) !== null && _a !== void 0 ? _a : props.badgeCount;
-  return jsxRuntime.jsx("div", { className: containerClasses, children: jsxRuntime.jsx("span", { className: textClasses, children: badgeContent }) });
+  return jsxRuntime.jsx("div", { className: containerClasses, children: jsxRuntime.jsx("span", { className: textClasses, children: props.children }) });
 };
 
+const PrimaryButton = React__namespace.default.forwardRef((props, innerRef) => {
+  return jsxRuntime.jsx(ButtonV2, Object.assign({ ref: innerRef }, props, { className: classNames__default.default([
+    "ui:text-white",
+    "ui:bg-linear-to-r",
+    "ui:gradient-blue",
+    {
+      "ui:hover:gradient-blue--hover": !props.disabled && !props.isPending
+    }
+  ], props.className), textColor: "white" }));
+});
+
+const SecondaryButton = React__namespace.default.forwardRef((props, innerRef) => {
+  const { textColor = "primary", textHoverColor = "blue-900" } = props, rest = __rest(props, ["textColor", "textHoverColor"]);
+  return jsxRuntime.jsx(ButtonV2, Object.assign({ ref: innerRef }, rest, { className: classNames__default.default([
+    `ui:text-${textColor}`,
+    // Colors of any icons on the button
+    "ui:bg-white",
+    "ui:border-neutral-border-high-contrast",
+    {
+      "ui:hover:border-neutral-interactive ui:hover:bg-primary-background": !props.disabled
+    }
+  ], props.className), textColor, textHoverColor }));
+});
+
 const PrimaryIconButton = React__namespace.default.forwardRef((props, innerRef) => {
   const { children: icon, size = "medium", label } = props, rest = __rest(props, ["children", "size", "label"]);
   return jsxRuntime.jsx(PrimaryButton, Object.assign({ ref: innerRef }, rest, { "aria-label": label, size, leadingIcon: icon, className: classNames__default.default({
@@ -2572,112 +1932,43 @@ const Carousel = ({ id, className, slides = [], labels }) => {
       return;
     }
     const item = container.querySelector(`li:nth-child(${index + 1})`);
-    if (item) {
-      item.scrollIntoView({ behavior: "smooth", block: "nearest" });
-      setCurrentIndex(index);
-    }
-  }, [setCurrentIndex, slidesContainer.current]);
-  const onClickNext = React.useCallback(() => {
-    const nextIndex = (currentIndex + 1) % slides.length;
-    scrollToIndex(nextIndex);
-  }, [scrollToIndex, slides, currentIndex]);
-  const onClickPrevious = React.useCallback(() => {
-    let nextIndex = currentIndex - 1;
-    if (nextIndex < 0) {
-      nextIndex = slides.length - 1;
-    }
-    scrollToIndex(nextIndex);
-  }, [scrollToIndex, slides, currentIndex]);
-  const setCurrentIndexDebounced = React.useCallback(lodashEs.debounce((index) => {
-    setCurrentIndex(index);
-  }, 300), [setCurrentIndex]);
-  const onScroll = React.useCallback((e) => {
-    const scrollWidth = e.currentTarget.clientWidth;
-    const scrollLeft = e.currentTarget.scrollLeft;
-    const index = Math.round(scrollLeft / scrollWidth);
-    setCurrentIndexDebounced(index);
-  }, [setCurrentIndexDebounced]);
-  return jsxRuntime.jsx("div", { ref: slidesContainer, id, className, children: jsxRuntime.jsxs(Stack, { width: "full", align: "stretch", _gap: "l", children: [jsxRuntime.jsxs(Stack, { axis: "x", align: "stretch", width: "full", _gap: "l", children: [jsxRuntime.jsx(Stack, { justify: "center", children: jsxRuntime.jsx(SecondaryButton, { onClick: onClickPrevious, leadingIcon: jsxRuntime.jsx(ChevronLeftIcon, {}), "aria-label": (_a = labels === null || labels === void 0 ? void 0 : labels.previousButton) !== null && _a !== void 0 ? _a : "Previous slide", disabled: slides.length === 0 }) }), jsxRuntime.jsx(Stack, { as: "ol", ref: slidesTrackRef, tabIndex: isScrollable ? 0 : void 0, axis: "x", width: "full", align: "stretch", className: "ui:w-full ui:snap-x ui:snap-mandatory ui:overflow-x-auto", style: { scrollbarWidth: "none" }, onScroll, children: slides.map((slide, i) => jsxRuntime.jsx(Box, { width: "full", as: "li", className: "ui:shrink-0 ui:snap-start", children: slide }, i)) }), jsxRuntime.jsx(Stack, { justify: "center", children: jsxRuntime.jsx(SecondaryButton, { onClick: onClickNext, leadingIcon: jsxRuntime.jsx(ChevronRightIcon, {}), "aria-label": (_b = labels === null || labels === void 0 ? void 0 : labels.nextButton) !== null && _b !== void 0 ? _b : "Next slide", disabled: slides.length === 0 }) })] }), jsxRuntime.jsx(Stack, { align: "center", children: jsxRuntime.jsx(DotList, { activeIndex: currentIndex, amount: slides.length, onClickIndex: scrollToIndex, buttonLabel: labels === null || labels === void 0 ? void 0 : labels.dotButton }) })] }) });
-};
-
-var css_248z$7 = "/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n.cweb-checkbox {\n  outline: none;\n}\n.cweb-checkbox .cweb-checkbox-input {\n  position: absolute;\n  -webkit-appearance: none;\n  height: 1px;\n  opacity: 0;\n  width: 1px;\n}\n.cweb-checkbox.type-regular .cweb-checkbox-icon-container {\n  border-color: #cccccc;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n}\n.cweb-checkbox.type-regular.hasError .cweb-checkbox-icon-container {\n  border-color: var(--ui-color-red-800, #991b1b);\n}\n.cweb-checkbox.type-regular.is-focused .cweb-checkbox-icon-container {\n  border-color: #1e40af;\n}\n.cweb-checkbox.type-regular.is-checked .cweb-checkbox-icon {\n  padding: 4px;\n  background: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2210%22 height%3D%228%22 viewBox%3D%220 0 10 8%22 fill%3D%22none%22%3E    %3Cpath d%3D%22M9.207 0.792787C9.39447 0.980314 9.49979 1.23462 9.49979 1.49979C9.49979 1.76495 9.39447 2.01926 9.207 2.20679L4.207 7.20679C4.01947 7.39426 3.76516 7.49957 3.5 7.49957C3.23484 7.49957 2.98053 7.39426 2.793 7.20679L0.793 5.20679C0.610842 5.01818 0.510047 4.76558 0.512326 4.50339C0.514604 4.24119 0.619773 3.99038 0.805181 3.80497C0.990589 3.61956 1.2414 3.51439 1.5036 3.51211C1.7658 3.50983 2.0184 3.61063 2.207 3.79279L3.5 5.08579L7.793 0.792787C7.98053 0.605316 8.23484 0.5 8.5 0.5C8.76516 0.5 9.01947 0.605316 9.207 0.792787Z%22 fill%3D%22white%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n.cweb-checkbox.type-regular.is-checked .cweb-checkbox-icon-container {\n  border-color: #1e40af;\n}\n.cweb-checkbox.type-regular.is-checked.is-focused .cweb-checkbox-icon-container {\n  border-color: #1d4ed8;\n}\n.cweb-checkbox.type-regular.is-indeterminate .cweb-checkbox-icon {\n  width: 0.5rem;\n  height: 0.5rem;\n  padding: 4px;\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%222%22 viewBox%3D%220 0 10 2%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M9 -4.37114e-08C9.55228 -1.95703e-08 10 0.447715 10 1C10 1.55228 9.55228 2 9 2L1 2C0.447716 2 -6.78525e-08 1.55228 -4.37114e-08 1C-1.95703e-08 0.447715 0.447715 -4.17544e-07 1 -3.93402e-07L9 -4.37114e-08Z%22 fill%3D%22white%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n.cweb-checkbox.type-regular.is-indeterminate .cweb-checkbox-icon-container {\n  border-color: #1e40af;\n}\n.cweb-checkbox.type-regular.is-indeterminate.is-focused .cweb-checkbox-icon-container {\n  border-color: #1d4ed8;\n}\n.cweb-checkbox.type-regular.is-disabled.show-cross-when-disabled .cweb-checkbox-icon {\n  width: 10px;\n  height: 10px;\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2211px%22 height%3D%2211px%22 viewBox%3D%220 0 11 11%22 version%3D%221.1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E    %3Cg stroke%3D%22none%22 stroke-width%3D%221%22 fill%3D%22none%22 fill-rule%3D%22evenodd%22 stroke-linecap%3D%22round%22%3E        %3Cg transform%3D%22translate(-6.000000%2C -7.000000)%22 stroke%3D%22%232D2D2D%22 stroke-width%3D%222%22%3E            %3Cpath d%3D%22M7%2C17 L16%2C8 M16%2C17 L7%2C8%22 %2F%3E        %3C%2Fg%3E    %3C%2Fg%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n  opacity: 0.6;\n}";
-styleInject(css_248z$7);
-
-const CheckboxInner = (props) => {
-  const { id, explanation, type = "regular", isChecked = false, isIndeterminate = false, isDisabled, name, value, onChange, onClick, className, classNameCheckboxLabel, error, innerRef } = props;
-  const [checked, setChecked] = React.useState(false);
-  const [indeterminate, setIndeterminate] = React.useState(isIndeterminate);
-  const [isFocused, setIsFocused] = React.useState(false);
-  const containerClassName = classNames__default.default("cweb-checkbox", "type-regular", className, {
-    "is-focused": isFocused,
-    "is-checked": checked && !indeterminate,
-    "is-indeterminate": indeterminate,
-    "ui:opacity-50 ui:cursor-not-allowed is-disabled": isDisabled,
-    hasError: error
-  });
-  React.useEffect(() => {
-    setChecked(isChecked);
-    setIndeterminate(false);
-  }, [isChecked]);
-  React.useEffect(() => {
-    setIndeterminate(isIndeterminate);
-  }, [isIndeterminate]);
-  React.useEffect(() => {
-    if (innerRef) {
-      if (typeof innerRef !== "function" && (innerRef === null || innerRef === void 0 ? void 0 : innerRef.current)) {
-        innerRef.current.indeterminate = !indeterminate;
-      }
-    }
-  }, [indeterminate]);
-  const handleChange = (event) => {
-    setChecked(event.currentTarget.checked);
-    event.stopPropagation();
-    setIndeterminate(false);
-    if (onChange) {
-      onChange(event);
-    }
-  };
-  const handleFocus = () => setIsFocused(true);
-  const handleBlur = () => setIsFocused(false);
-  return jsxRuntime.jsx("div", {
-    className: containerClassName,
-    /**
-     * This harms a11y since the div becomes an interactible element.
-     * The main interaction in this component happens between a styled label (looking like a checkbox)
-     * and the invisible input checkbox itself.
-     *
-     * This `onClick` event is a requirement from using this component in the table,
-     * since the row is clickable and we need to stop propagation to not invoking the row click
-     * upon marking the checkbox as checked/unchecked.
-     */
-    onClick,
-    children: jsxRuntime.jsx("label", { className: classNames__default.default(classNameCheckboxLabel, "cweb-checkbox-label ui:group ui:relative ui:overflow-hidden", "ui:flex ui:w-full ui:cursor-pointer", {
-      "ui:cursor-not-allowed": isDisabled,
-      "ui:cursor-pointer": !isDisabled
-    }), "data-test-id": "checkbox-label", children: jsxRuntime.jsxs("div", { className: "ui:flex", children: [jsxRuntime.jsxs("div", { className: "ui:flex ui:h-[24px] ui:flex-col ui:justify-center ui:sm:h-[20px]", children: [jsxRuntime.jsx("input", { id, ref: innerRef, "data-test-id": `checkbox-${name}`, className: "cweb-checkbox-input", name, type: "checkbox", checked, disabled: isDisabled, value, onBlur: handleBlur, onFocus: handleFocus, onChange: handleChange }), jsxRuntime.jsx("span", { className: classNames__default.default("cweb-checkbox-icon-container ui:transition-colors", "ui:h-6 ui:w-6", "ui:sm:h-4 ui:sm:w-4", {
-      "ui:bg-primary": checked || indeterminate,
-      "ui:bg-white": !checked && !indeterminate,
-      "ui:group-hover:bg-blue-50": type === "regular" && !(checked || indeterminate),
-      "ui:group-hover:bg-primary-dark": checked || indeterminate,
-      "ui:outline-primary": isFocused
-    }), "data-test-id": "checkbox-span", children: jsxRuntime.jsx("div", { className: "cweb-checkbox-icon ui:h-3 ui:w-3 ui:sm:h-2 ui:sm:w-2" }) })] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Label, Object.assign({}, props)), explanation && jsxRuntime.jsx(Text, { className: "ui:ml-2 ui:select-none", color: "slate-500", "data-test-id": "checkbox-explanation", children: explanation })] })] }) })
-  });
+    if (item) {
+      item.scrollIntoView({ behavior: "smooth", block: "nearest" });
+      setCurrentIndex(index);
+    }
+  }, [setCurrentIndex, slidesContainer.current]);
+  const onClickNext = React.useCallback(() => {
+    const nextIndex = (currentIndex + 1) % slides.length;
+    scrollToIndex(nextIndex);
+  }, [scrollToIndex, slides, currentIndex]);
+  const onClickPrevious = React.useCallback(() => {
+    let nextIndex = currentIndex - 1;
+    if (nextIndex < 0) {
+      nextIndex = slides.length - 1;
+    }
+    scrollToIndex(nextIndex);
+  }, [scrollToIndex, slides, currentIndex]);
+  const setCurrentIndexDebounced = React.useCallback(lodashEs.debounce((index) => {
+    setCurrentIndex(index);
+  }, 300), [setCurrentIndex]);
+  const onScroll = React.useCallback((e) => {
+    const scrollWidth = e.currentTarget.clientWidth;
+    const scrollLeft = e.currentTarget.scrollLeft;
+    const index = Math.round(scrollLeft / scrollWidth);
+    setCurrentIndexDebounced(index);
+  }, [setCurrentIndexDebounced]);
+  return jsxRuntime.jsx("div", { ref: slidesContainer, id, className, children: jsxRuntime.jsxs(Stack, { width: "full", align: "stretch", _gap: "l", children: [jsxRuntime.jsxs(Stack, { axis: "x", align: "stretch", width: "full", _gap: "l", children: [jsxRuntime.jsx(Stack, { justify: "center", children: jsxRuntime.jsx(SecondaryButton, { onClick: onClickPrevious, leadingIcon: jsxRuntime.jsx(ChevronLeftIcon, {}), "aria-label": (_a = labels === null || labels === void 0 ? void 0 : labels.previousButton) !== null && _a !== void 0 ? _a : "Previous slide", disabled: slides.length === 0 }) }), jsxRuntime.jsx(Stack, { as: "ol", ref: slidesTrackRef, tabIndex: isScrollable ? 0 : void 0, axis: "x", width: "full", align: "stretch", className: "ui:w-full ui:snap-x ui:snap-mandatory ui:overflow-x-auto", style: { scrollbarWidth: "none" }, onScroll, children: slides.map((slide, i) => jsxRuntime.jsx(Box, { width: "full", as: "li", className: "ui:shrink-0 ui:snap-start", children: slide }, i)) }), jsxRuntime.jsx(Stack, { justify: "center", children: jsxRuntime.jsx(SecondaryButton, { onClick: onClickNext, leadingIcon: jsxRuntime.jsx(ChevronRightIcon, {}), "aria-label": (_b = labels === null || labels === void 0 ? void 0 : labels.nextButton) !== null && _b !== void 0 ? _b : "Next slide", disabled: slides.length === 0 }) })] }), jsxRuntime.jsx(Stack, { align: "center", children: jsxRuntime.jsx(DotList, { activeIndex: currentIndex, amount: slides.length, onClickIndex: scrollToIndex, buttonLabel: labels === null || labels === void 0 ? void 0 : labels.dotButton }) })] }) });
+};
+
+const CenteredHero = ({ title, text, image, imageAlt = "", slots, background = "slate-50", imageSize = "small", dataTestId = "centered-hero" }) => {
+  return jsxRuntime.jsxs("div", { className: classNames__default.default("ui:align-center ui:flex ui:w-full ui:flex-col ui:items-center ui:p-6", {
+    "ui:bg-white": background === "white",
+    "ui:bg-slate-50": background === "slate-50"
+  }), "data-test-id": dataTestId, children: [image && jsxRuntime.jsx("img", { src: image, alt: imageAlt, className: classNames__default.default("ui:mb-4", {
+    "ui:max-h-36": imageSize === "small",
+    "ui:max-h-72": imageSize === "large"
+  }) }), title && jsxRuntime.jsx(Heading, { variant: "h2", as: "h4", children: title }), text && jsxRuntime.jsx(Text, { className: "ui:text-center", children: text }), (slots === null || slots === void 0 ? void 0 : slots.bottom) && jsxRuntime.jsx(Box, { _mt: "l", children: slots === null || slots === void 0 ? void 0 : slots.bottom })] });
 };
-function Label(props) {
-  const { text, renderLabel } = props;
-  const divAttributes = {
-    className: "ui:ml-2 ui:select-none",
-    "data-test-id": "checkbox-text"
-  };
-  if (renderLabel) {
-    return jsxRuntime.jsx("div", Object.assign({}, divAttributes, { children: renderLabel(props) }));
-  }
-  if (text) {
-    return jsxRuntime.jsx("div", Object.assign({}, divAttributes, { children: jsxRuntime.jsx(Text, { children: text }) }));
-  }
-  return null;
-}
-const Checkbox = React__namespace.default.forwardRef((props, ref) => jsxRuntime.jsx(CheckboxInner, Object.assign({}, props, { innerRef: ref })));
 
 const linkClasses = [
   "ui:[&_a]:text-primary",
@@ -2879,11 +2170,29 @@ const Chip = ({ accessory, leadingIcon, onClick, text }) => {
   return jsxRuntime.jsx(SecondaryButton, { className: "ui:bg-transparent! ui:px-s! ui:radius-xxxxs!", onClick, leadingIcon, trailingIcon: accessory, children: text });
 };
 
+const Icon = (_a) => {
+  var { name } = _a, iconProps = __rest(_a, ["name"]);
+  return React__namespace.default.createElement(Icons[name], iconProps);
+};
+const IconComponentOrKey = (props) => {
+  const { name } = props, iconProps = __rest(props, ["name"]);
+  if (isIconKey(name)) {
+    return jsxRuntime.jsx(Icon, Object.assign({ name }, iconProps));
+  }
+  return React__namespace.default.createElement(name, iconProps);
+};
+function isIconKey(key) {
+  if (typeof key === "string") {
+    return key in Icons;
+  }
+  return false;
+}
+
 const ConfirmationDialogTitle = (props) => {
   var _a;
   return props.title ? jsxRuntime.jsxs("div", { "data-test-id": "confirmation-dialog-title", className: classNames__default.default("ui:flex ui:flex-col ui:space-y-2 ui:text-center", {
     "ui:items-center ui:justify-center": (_a = props.title) === null || _a === void 0 ? void 0 : _a.icon
-  }), children: [props.title.icon && jsxRuntime.jsx(IconComponentOrKey, { name: props.title.icon, className: "dialog-header-icon ui:h-12 ui:w-12 ui:text-primary" }), jsxRuntime.jsx(Title, { variant: "sm", children: props.title.title })] }) : null;
+  }), children: [props.title.icon && jsxRuntime.jsx(IconComponentOrKey, { name: props.title.icon, className: "dialog-header-icon ui:h-12 ui:w-12 ui:text-primary" }), jsxRuntime.jsx(Heading, { variant: "h3", as: "h5", children: props.title.title })] }) : null;
 };
 
 function Link(props) {
@@ -2929,50 +2238,49 @@ const StyledRadio = React__namespace.default.forwardRef((props, ref) => {
   return jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("input", Object.assign({ type: "radio" }, attributes, { className: classNames__default.default("ui:appearance-none ui:w-4 ui:h-4 ui:rounded-full ui:border ui:border-slate-300 ui:bg-white", "ui:checked:grid ui:checked:place-content-center ui:checked:before:scale-[1] ui:checked:bg-primary ui:checked:border-primary", "ui:transition-colors ui:duration-100 ui:ease-in-out", "ui:before:content-[' '] ui:before:w-1.5 ui:before:h-1.5 ui:before:bg-white ui:before:rounded ui:before:scale-[0]", "ui:before:transition-transform ui:before:duration-200 ui:before:ease-[cubic-bezier(.47,.34,.52,1.39)]", className), ref })) });
 });
 
-function RadioInner(_a) {
-  var { text, info, isError, innerRef, className: _, name } = _a, otherProps = __rest(_a, ["text", "info", "isError", "innerRef", "className", "name"]);
-  const { value, disabled } = otherProps;
-  const nameHtmlFor = `${name}-field-${value}`;
+const LabeledRadio = React__namespace.default.forwardRef((props, ref) => {
+  const { children, label, helperText, errorText, className, inputClassName } = props, attributes = __rest(props, ["children", "label", "helperText", "errorText", "className", "inputClassName"]);
+  const { id, disabled } = attributes;
   const semanticId = React__namespace.default.useId();
-  return jsxRuntime.jsxs(Stack, { as: "label", axis: "x", _gap: "m", className: "ui:radio-form-field-label ui:flex ui:flex-row ui:leading-none", htmlFor: nameHtmlFor, "data-has-error": isError, "data-test-id": nameHtmlFor, children: [jsxRuntime.jsx(StyledRadio, Object.assign({}, otherProps, { name, id: nameHtmlFor, ref: innerRef, "aria-describedby": semanticId })), jsxRuntime.jsxs("div", { children: [text && jsxRuntime.jsx(Text, { inline: true, variant: "base", color: disabled ? "slate-500" : void 0, children: text }), jsxRuntime.jsx(HelperAndErrorText, { helperText: info, describingId: semanticId })] })] });
+  return jsxRuntime.jsxs(Stack, { as: "label", axis: "x", _gap: "m", htmlFor: id, className: classNames__default.default("ui:radio-form-field-label", className), children: [jsxRuntime.jsxs("div", { className: "ui:relative ui:flex ui:flex-row ui:items-center ui:self-start", children: [jsxRuntime.jsx(Text, { "aria-hidden": true, className: "ui:w-4 ui:opacity-0", children: "CENTER" }), jsxRuntime.jsx("div", { className: "ui:absolute", children: jsxRuntime.jsx(StyledRadio, Object.assign({ "aria-describedby": semanticId }, attributes, { ref, className: inputClassName })) })] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(RadioLabel, { label, disabled, children }), jsxRuntime.jsx(HelperAndErrorText, { helperText, errorText, describingId: semanticId })] })] });
+});
+function RadioLabel(props) {
+  const { children, label, disabled } = props;
+  if (!label && !children) {
+    return null;
+  }
+  if (children) {
+    return children;
+  }
+  return jsxRuntime.jsx(LabelText, { color: disabled ? "slate-500" : void 0, children: label });
 }
-const RadioV2 = React__namespace.default.forwardRef((props, ref) => jsxRuntime.jsx(RadioInner, Object.assign({}, props, { innerRef: ref })));
 
-function RadioGroupInner(_a) {
-  var { innerRef, options, defaultValue, title } = _a, registerProps = __rest(_a, ["innerRef", "options", "defaultValue", "title"]);
-  return jsxRuntime.jsxs("div", { className: classNames__default.default("ui:flex ui:flex-col ui:space-y-2"), "data-test-id": `${registerProps.name}-radio-group`, children: [title && jsxRuntime.jsx(Text, { text: title }), options.map((option) => {
-    let defaultChecked;
-    if (!lodashEs.isNil(defaultValue)) {
-      defaultChecked = defaultValue === option.value;
-    }
-    return jsxRuntime.jsx(RadioV2, Object.assign({ defaultChecked }, option, registerProps, { ref: innerRef }), option.value);
-  })] });
-}
-const RadioGroupV2 = React__namespace.default.forwardRef((props, ref) => jsxRuntime.jsx(RadioGroupInner, Object.assign({}, props, { innerRef: ref })));
+const LabeledRadioGroup = (props) => {
+  const { children, title, className, orientation = "vertical" } = props;
+  const semanticId = React__namespace.default.useId();
+  const orientationProps = orientation === "horizontal" ? {
+    axis: "x",
+    _gap: "2xl"
+  } : {
+    axis: "y",
+    _gap: "base"
+  };
+  return jsxRuntime.jsxs(Stack, { as: "fieldset", "aria-describedby": semanticId, className: classNames__default.default(className), _gap: "s", children: [title && jsxRuntime.jsx("legend", { className: "ui:contents", children: jsxRuntime.jsx(Text, { children: title }) }), jsxRuntime.jsx(Stack, Object.assign({}, orientationProps, { children })), jsxRuntime.jsx(HelperAndErrorText, { helperText: props.helperText, errorText: props.errorText, describingId: semanticId })] });
+};
 
 const ConfirmationDialogChoices = (props) => {
   const { choices, onChoiceChangeCallback, selectedChoice } = props;
+  const idPrefix = React.useId();
   if (!choices) {
     return null;
   }
-  const choicesIntoRadioOptions = choices.options.map((choice) => {
-    return {
-      name: choice.text,
-      text: choice.text,
-      value: choice.value,
-      info: choice.description,
-      onChange: () => {
-        onChoiceChangeCallback === null || onChoiceChangeCallback === void 0 ? void 0 : onChoiceChangeCallback(choice);
-      }
-    };
-  });
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(RadioGroupV2, { name: "confirm-dialog-choices", options: choicesIntoRadioOptions, defaultValue: selectedChoice === null || selectedChoice === void 0 ? void 0 : selectedChoice.value }), (selectedChoice === null || selectedChoice === void 0 ? void 0 : selectedChoice.displaysInfo) && jsxRuntime.jsx(NotificationBanner, { text: selectedChoice.displaysInfo.text, color: selectedChoice.displaysInfo.level })] });
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(LabeledRadioGroup, { children: choices.options.map((choice) => jsxRuntime.jsx(LabeledRadio, { id: `${idPrefix}-${choice.value}`, name: "confirm-dialog-choices", value: choice.value, label: choice.text, helperText: choice.description, defaultChecked: choice.value === (selectedChoice === null || selectedChoice === void 0 ? void 0 : selectedChoice.value), onChange: () => onChoiceChangeCallback === null || onChoiceChangeCallback === void 0 ? void 0 : onChoiceChangeCallback(choice) }, choice.value)) }), (selectedChoice === null || selectedChoice === void 0 ? void 0 : selectedChoice.displaysInfo) && jsxRuntime.jsx(NotificationBanner, { text: selectedChoice.displaysInfo.text, color: selectedChoice.displaysInfo.level })] });
 };
 
 const ConfirmationDialogMessage = (props) => {
   const { message } = props;
   if (typeof message === "string") {
-    return jsxRuntime.jsx(Text, { text: message, containsDangerousHtml: true });
+    return jsxRuntime.jsx(Text, { containsDangerousHtml: true, children: message });
   }
   return jsxRuntime.jsx("div", { className: "ui:space-y-2", children: message.map((messageLine) => jsxRuntime.jsx(Text, { containsDangerousHtml: true, children: messageLine }, messageLine)) });
 };
@@ -3000,7 +2308,7 @@ const ConfirmationDialog = (_a) => {
   };
   return jsxRuntime.jsx(ModalBase, { size, dataTestId, isOpen: props.isOpen, withExtraMarginTop: true, onCloseClick: handleOnCloseClick, footerTrailingComponents: {
     primaryButton: props.texts.confirmLabel ? jsxRuntime.jsx(PrimaryButton, { dataTestId: "modal-footer-trailing-primary-button", isPending: props.isProcessing, onClick: onConfirmHandler, children: props.texts.confirmLabel }) : null,
-    secondaryButton: jsxRuntime.jsx(SecondaryButton, { dataTestId: "modal-footer-trailing-secondary-button", onClick: props.onCancel, isDisabled: props.isProcessing, children: props.texts.cancelLabel })
+    secondaryButton: jsxRuntime.jsx(SecondaryButton, { dataTestId: "modal-footer-trailing-secondary-button", onClick: props.onCancel, disabled: props.isProcessing, children: props.texts.cancelLabel })
   }, children: jsxRuntime.jsxs("div", { className: "ui:min-h-13 ui:space-y-4", children: [jsxRuntime.jsx(ConfirmationDialogTitle, { title: props.withTitle }), children, message && jsxRuntime.jsx(ConfirmationDialogMessage, { message }), jsxRuntime.jsx(ConfirmationDialogChoices, { choices: props.choices, onChoiceChangeCallback: onChoiceChange, selectedChoice })] }) });
 };
 
@@ -3018,8 +2326,8 @@ const LOCALE_MAP = {
   "pt-PT": pt.pt
 };
 
-var css_248z$6 = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.cweb-datepicker {\n  width: 182px;\n  height: 44px;\n  border: 1px solid #cccccc;\n  border-radius: 4px;\n  background-color: #ffffff;\n  outline: none;\n  padding: 12px 12px 11px 12px;\n}\n.cweb-datepicker input.cweb-datepicker {\n  font-size: 14px;\n}\n.cweb-datepicker::placeholder {\n  color: #64748b;\n}\n.cweb-datepicker:-ms-input-placeholder {\n  color: #64748b !important;\n}\n.cweb-datepicker::-ms-input-placeholder {\n  color: #64748b;\n}\n\n.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle.react-datepicker__triangle {\n  border-bottom-color: #ffffff;\n  margin-top: -4px;\n  fill: #ffffff;\n  color: #ffffff;\n}\n.react-datepicker-popper[data-placement^=top] {\n  margin-bottom: 4px;\n}\n.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle.react-datepicker__triangle {\n  border-top-color: #ffffff;\n  margin-bottom: -4px;\n  fill: #ffffff;\n  color: #ffffff;\n}\n.react-datepicker-popper .react-datepicker__children-container {\n  width: 100%;\n  margin: 0;\n}\n\n.cweb-datepicker-calendar {\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .cweb-datepicker-calendar {\n    box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.2);\n  }\n}\n.cweb-datepicker-calendar {\n  padding: 0;\n  border: 1px solid #cccccc;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: center;\n}\n.cweb-datepicker-calendar .react-datepicker__triangle {\n  left: 10px;\n  border: 6px solid transparent;\n  fill: #ffffff;\n  color: #ffffff;\n}\n.cweb-datepicker-calendar .react-datepicker__navigation {\n  top: 19px;\n  width: 19px;\n  height: 10px;\n}\n.cweb-datepicker-calendar .react-datepicker__navigation .react-datepicker__navigation-icon:before {\n  border: 0;\n}\n.cweb-datepicker-calendar .react-datepicker__navigation.react-datepicker__navigation--previous {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%227%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E    %3Cpath d%3D%22M0 1.5L1.5 0 5 3.5 8.5 0 10 1.5l-5 5z%22 fill%3D%22%231D9BD8%22 fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  border: 0;\n  transform: rotate(90deg);\n}\n.cweb-datepicker-calendar .react-datepicker__navigation.react-datepicker__navigation--next {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%227%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E    %3Cpath d%3D%22M0 1.5L1.5 0 5 3.5 8.5 0 10 1.5l-5 5z%22 fill%3D%22%231D9BD8%22 fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  border: 0;\n  transform: rotate(-90deg);\n}\n.cweb-datepicker-calendar .react-datepicker__year-dropdown-container--select,\n.cweb-datepicker-calendar .react-datepicker__month-dropdown-container--select,\n.cweb-datepicker-calendar .react-datepicker__month-year-dropdown-container--select,\n.cweb-datepicker-calendar .react-datepicker__year-dropdown-container--scroll,\n.cweb-datepicker-calendar .react-datepicker__month-dropdown-container--scroll,\n.cweb-datepicker-calendar .react-datepicker__month-year-dropdown-container--scroll {\n  margin: 2px;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-box {\n  width: auto;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list {\n  overflow-x: hidden;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item {\n  font-family: \"Inter\", \"Roboto\", sans-serif;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 19px;\n  color: #1e293b;\n  margin: 0;\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n  align-items: center;\n  height: 40px !important;\n  padding: 0 !important;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected {\n  color: #ffffff;\n  background-color: #1e40af !important;\n  position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected:hover {\n  background-color: #1e40af !important;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected:before {\n  content: \"\";\n  position: absolute;\n  bottom: -3px;\n  right: 0;\n  left: initial;\n  top: initial;\n  border-style: solid;\n  border-width: 6px 6px 6px 0;\n  border-color: transparent #ffffff transparent transparent;\n  transform: rotate(-135deg);\n}\n.cweb-datepicker-calendar .react-datepicker__header {\n  padding-top: 0;\n  border: none;\n  background-color: #ffffff;\n  font-size: 14px;\n  padding-bottom: 0;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__current-month {\n  font-family: \"Inter\", \"Roboto\", sans-serif;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 19px;\n  color: #2d2d2d;\n  margin: 0;\n  padding-top: 16px;\n  padding-bottom: 16px;\n  text-transform: capitalize;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__header__dropdown {\n  margin-bottom: 15px;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select,\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select {\n  font-family: \"Inter\", \"Roboto\", sans-serif;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 19px;\n  color: #1e293b;\n  margin: 0;\n  height: 44px;\n  padding-left: 12px;\n  border-radius: 4px;\n  background: #ffffff url(\"data:image/svg+xml,%3Csvg width%3D%228%22 height%3D%2214%22 viewBox%3D%220 0 8 14%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M4 0C4.26522 5.96046e-08 4.51957 0.105357 4.70711 0.292893L7.70711 3.29289C8.09763 3.68342 8.09763 4.31658 7.70711 4.70711C7.31658 5.09763 6.68342 5.09763 6.29289 4.70711L4 2.41421L1.70711 4.70711C1.31658 5.09763 0.683417 5.09763 0.292893 4.70711C-0.0976311 4.31658 -0.097631 3.68342 0.292893 3.29289L3.29289 0.292893C3.48043 0.105357 3.73478 0 4 0ZM0.292893 9.29289C0.683417 8.90237 1.31658 8.90237 1.70711 9.29289L4 11.5858L6.29289 9.29289C6.68342 8.90237 7.31658 8.90237 7.70711 9.29289C8.09763 9.68342 8.09763 10.3166 7.70711 10.7071L4.70711 13.7071C4.31658 14.0976 3.68342 14.0976 3.29289 13.7071L0.292893 10.7071C-0.0976311 10.3166 -0.0976311 9.68342 0.292893 9.29289Z%22 fill%3D%22%239CA3AF%22%2F%3E%3C%2Fsvg%3E\") no-repeat right 8px center;\n  text-transform: capitalize;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  border: 1px solid #cccccc;\n  transition: all 0.4s ease;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select:hover, .cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select:focus,\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select:hover,\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select:focus {\n  color: #1e40af;\n  border-color: #1e40af;\n  cursor: pointer;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select {\n  min-width: 172px;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select {\n  min-width: 107px;\n}\n.cweb-datepicker-calendar .react-datepicker__header.react-datepicker__header--time {\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n  align-items: center;\n  height: 52px;\n  padding: 0;\n  background-color: #f3f3f3;\n}\n.cweb-datepicker-calendar .react-datepicker__day-names,\n.cweb-datepicker-calendar .react-datepicker__month {\n  margin: 0.4rem;\n}\n.cweb-datepicker-calendar .react-datepicker__day-names,\n.cweb-datepicker-calendar .react-datepicker__week {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.cweb-datepicker-calendar .react-datepicker__day-name,\n.cweb-datepicker-calendar .react-datepicker__day {\n  font-family: \"Inter\", \"Roboto\", sans-serif;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 19px;\n  color: #1e293b;\n  margin: 0;\n  width: 41px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.cweb-datepicker-calendar .react-datepicker__day-name {\n  height: 19px;\n  text-transform: capitalize;\n}\n.cweb-datepicker-calendar .react-datepicker__day {\n  height: 30px;\n  border-radius: 4px;\n  transition: background-color 0.3s ease-in-out;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted {\n  background-color: #ffffff;\n  color: #1e40af;\n  position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted:after {\n  content: \"\";\n  position: absolute;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background-color: #1e40af;\n  left: 0;\n  right: 0;\n  bottom: 2px;\n  margin: 0 auto;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--selected:after, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--keyboard-selected:after, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--in-range:after {\n  background-color: #ffffff;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--today {\n  font-weight: bold;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--in-selecting-range {\n  background-color: #e8f5fc;\n}\n.cweb-datepicker-calendar .react-datepicker__day:hover {\n  background-color: #f8fafc;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--in-range, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--selected {\n  color: #ffffff;\n  background-color: #1e40af;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--in-range:hover, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--selected:hover {\n  background-color: #1e40af;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--keyboard-selected {\n  color: #ffffff;\n  background-color: #1e40af;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--selected {\n  position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-start {\n  position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-start:before {\n  content: \"\";\n  position: absolute;\n  top: -3px;\n  left: 0;\n  bottom: initial;\n  right: initial;\n  border-style: solid;\n  border-width: 6px 6px 6px 0;\n  border-color: transparent #ffffff transparent transparent;\n  transform: rotate(45deg);\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-end {\n  position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-end:before {\n  content: \"\";\n  position: absolute;\n  bottom: -3px;\n  right: 0;\n  left: initial;\n  top: initial;\n  border-style: solid;\n  border-width: 6px 6px 6px 0;\n  border-color: transparent #ffffff transparent transparent;\n  transform: rotate(-135deg);\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--disabled {\n  color: #cccccc;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--disabled:hover {\n  background-color: #ffffff;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--outside-month {\n  color: var(--ui-color-text-neutral-secondary-default);\n}";
-styleInject(css_248z$6);
+var css_248z$9 = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.cweb-datepicker {\n  width: 182px;\n  height: 44px;\n  border: 1px solid #cccccc;\n  border-radius: 4px;\n  background-color: #ffffff;\n  outline: none;\n  padding: 12px 12px 11px 12px;\n}\n.cweb-datepicker input.cweb-datepicker {\n  font-size: 14px;\n}\n.cweb-datepicker::placeholder {\n  color: #64748b;\n}\n.cweb-datepicker:-ms-input-placeholder {\n  color: #64748b !important;\n}\n.cweb-datepicker::-ms-input-placeholder {\n  color: #64748b;\n}\n\n.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle.react-datepicker__triangle {\n  border-bottom-color: #ffffff;\n  margin-top: -4px;\n  fill: #ffffff;\n  color: #ffffff;\n}\n.react-datepicker-popper[data-placement^=top] {\n  margin-bottom: 4px;\n}\n.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle.react-datepicker__triangle {\n  border-top-color: #ffffff;\n  margin-bottom: -4px;\n  fill: #ffffff;\n  color: #ffffff;\n}\n.react-datepicker-popper .react-datepicker__children-container {\n  width: 100%;\n  margin: 0;\n}\n\n.cweb-datepicker-calendar {\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .cweb-datepicker-calendar {\n    box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.2);\n  }\n}\n.cweb-datepicker-calendar {\n  padding: 0;\n  border: 1px solid #cccccc;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: center;\n}\n.cweb-datepicker-calendar .react-datepicker__triangle {\n  left: 10px;\n  border: 6px solid transparent;\n  fill: #ffffff;\n  color: #ffffff;\n}\n.cweb-datepicker-calendar .react-datepicker__navigation {\n  top: 19px;\n  width: 19px;\n  height: 10px;\n}\n.cweb-datepicker-calendar .react-datepicker__navigation .react-datepicker__navigation-icon:before {\n  border: 0;\n}\n.cweb-datepicker-calendar .react-datepicker__navigation.react-datepicker__navigation--previous {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%227%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E    %3Cpath d%3D%22M0 1.5L1.5 0 5 3.5 8.5 0 10 1.5l-5 5z%22 fill%3D%22%231D9BD8%22 fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  border: 0;\n  transform: rotate(90deg);\n}\n.cweb-datepicker-calendar .react-datepicker__navigation.react-datepicker__navigation--next {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%227%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E    %3Cpath d%3D%22M0 1.5L1.5 0 5 3.5 8.5 0 10 1.5l-5 5z%22 fill%3D%22%231D9BD8%22 fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  border: 0;\n  transform: rotate(-90deg);\n}\n.cweb-datepicker-calendar .react-datepicker__year-dropdown-container--select,\n.cweb-datepicker-calendar .react-datepicker__month-dropdown-container--select,\n.cweb-datepicker-calendar .react-datepicker__month-year-dropdown-container--select,\n.cweb-datepicker-calendar .react-datepicker__year-dropdown-container--scroll,\n.cweb-datepicker-calendar .react-datepicker__month-dropdown-container--scroll,\n.cweb-datepicker-calendar .react-datepicker__month-year-dropdown-container--scroll {\n  margin: 2px;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-box {\n  width: auto;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list {\n  overflow-x: hidden;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item {\n  font-family: \"Inter\", \"Roboto\", sans-serif;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 19px;\n  color: #1e293b;\n  margin: 0;\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n  align-items: center;\n  height: 40px !important;\n  padding: 0 !important;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected {\n  color: #ffffff;\n  background-color: #1e40af !important;\n  position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected:hover {\n  background-color: #1e40af !important;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected:before {\n  content: \"\";\n  position: absolute;\n  bottom: -3px;\n  right: 0;\n  left: initial;\n  top: initial;\n  border-style: solid;\n  border-width: 6px 6px 6px 0;\n  border-color: transparent #ffffff transparent transparent;\n  transform: rotate(-135deg);\n}\n.cweb-datepicker-calendar .react-datepicker__header {\n  padding-top: 0;\n  border: none;\n  background-color: #ffffff;\n  font-size: 14px;\n  padding-bottom: 0;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__current-month {\n  font-family: \"Inter\", \"Roboto\", sans-serif;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 19px;\n  color: #2d2d2d;\n  margin: 0;\n  padding-top: 16px;\n  padding-bottom: 16px;\n  text-transform: capitalize;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__header__dropdown {\n  margin-bottom: 15px;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select,\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select {\n  font-family: \"Inter\", \"Roboto\", sans-serif;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 19px;\n  color: #1e293b;\n  margin: 0;\n  height: 44px;\n  padding-left: 12px;\n  border-radius: 4px;\n  background: #ffffff url(\"data:image/svg+xml,%3Csvg width%3D%228%22 height%3D%2214%22 viewBox%3D%220 0 8 14%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M4 0C4.26522 5.96046e-08 4.51957 0.105357 4.70711 0.292893L7.70711 3.29289C8.09763 3.68342 8.09763 4.31658 7.70711 4.70711C7.31658 5.09763 6.68342 5.09763 6.29289 4.70711L4 2.41421L1.70711 4.70711C1.31658 5.09763 0.683417 5.09763 0.292893 4.70711C-0.0976311 4.31658 -0.097631 3.68342 0.292893 3.29289L3.29289 0.292893C3.48043 0.105357 3.73478 0 4 0ZM0.292893 9.29289C0.683417 8.90237 1.31658 8.90237 1.70711 9.29289L4 11.5858L6.29289 9.29289C6.68342 8.90237 7.31658 8.90237 7.70711 9.29289C8.09763 9.68342 8.09763 10.3166 7.70711 10.7071L4.70711 13.7071C4.31658 14.0976 3.68342 14.0976 3.29289 13.7071L0.292893 10.7071C-0.0976311 10.3166 -0.0976311 9.68342 0.292893 9.29289Z%22 fill%3D%22%239CA3AF%22%2F%3E%3C%2Fsvg%3E\") no-repeat right 8px center;\n  text-transform: capitalize;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  border: 1px solid #cccccc;\n  transition: all 0.4s ease;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select:hover, .cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select:focus,\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select:hover,\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select:focus {\n  color: #1e40af;\n  border-color: #1e40af;\n  cursor: pointer;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select {\n  min-width: 172px;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select {\n  min-width: 107px;\n}\n.cweb-datepicker-calendar .react-datepicker__header.react-datepicker__header--time {\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n  align-items: center;\n  height: 52px;\n  padding: 0;\n  background-color: #f3f3f3;\n}\n.cweb-datepicker-calendar .react-datepicker__day-names,\n.cweb-datepicker-calendar .react-datepicker__month {\n  margin: 0.4rem;\n}\n.cweb-datepicker-calendar .react-datepicker__day-names,\n.cweb-datepicker-calendar .react-datepicker__week {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.cweb-datepicker-calendar .react-datepicker__day-name,\n.cweb-datepicker-calendar .react-datepicker__day {\n  font-family: \"Inter\", \"Roboto\", sans-serif;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 19px;\n  color: #1e293b;\n  margin: 0;\n  width: 41px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.cweb-datepicker-calendar .react-datepicker__day-name {\n  height: 19px;\n  text-transform: capitalize;\n}\n.cweb-datepicker-calendar .react-datepicker__day {\n  height: 30px;\n  border-radius: 4px;\n  transition: background-color 0.3s ease-in-out;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted {\n  background-color: #ffffff;\n  color: #1e40af;\n  position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted:after {\n  content: \"\";\n  position: absolute;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background-color: #1e40af;\n  left: 0;\n  right: 0;\n  bottom: 2px;\n  margin: 0 auto;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--selected:after, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--keyboard-selected:after, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--in-range:after {\n  background-color: #ffffff;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--today {\n  font-weight: bold;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--in-selecting-range {\n  background-color: #e8f5fc;\n}\n.cweb-datepicker-calendar .react-datepicker__day:hover {\n  background-color: #f8fafc;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--in-range, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--selected {\n  color: #ffffff;\n  background-color: #1e40af;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--in-range:hover, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--selected:hover {\n  background-color: #1e40af;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--keyboard-selected {\n  color: #ffffff;\n  background-color: #1e40af;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--selected {\n  position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-start {\n  position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-start:before {\n  content: \"\";\n  position: absolute;\n  top: -3px;\n  left: 0;\n  bottom: initial;\n  right: initial;\n  border-style: solid;\n  border-width: 6px 6px 6px 0;\n  border-color: transparent #ffffff transparent transparent;\n  transform: rotate(45deg);\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-end {\n  position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-end:before {\n  content: \"\";\n  position: absolute;\n  bottom: -3px;\n  right: 0;\n  left: initial;\n  top: initial;\n  border-style: solid;\n  border-width: 6px 6px 6px 0;\n  border-color: transparent #ffffff transparent transparent;\n  transform: rotate(-135deg);\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--disabled {\n  color: #cccccc;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--disabled:hover {\n  background-color: #ffffff;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--outside-month {\n  color: var(--ui-color-text-neutral-secondary-default);\n}";
+styleInject(css_248z$9);
 
 function updateLocale(locale) {
   const resolvedLocale = locale !== null && locale !== void 0 ? locale : "en-GB";
@@ -3031,9 +2339,8 @@ function getLocaleModule(locale) {
   return LOCALE_MAP[resolvedLocale];
 }
 const DatePicker = (props) => {
-  const { locale: localeFromProps, className, hasCloseButton, closeButtonText, adjustDateOnChange = true, showMonthDropdown = true, showYearDropdown = true, shouldCloseOnSelect = false, allowSameDay = false, minDate, maxDate, isDisabled = false, selected, portalId = "datepicker-portal", zIndex = void 0, popperZIndex = 30 } = props, otherProps = __rest(props, ["locale", "className", "hasCloseButton", "closeButtonText", "adjustDateOnChange", "showMonthDropdown", "showYearDropdown", "shouldCloseOnSelect", "allowSameDay", "minDate", "maxDate", "isDisabled", "selected", "portalId", "zIndex", "popperZIndex"]);
-  const localeFromContext = useLocaleContext();
-  const locale = localeFromProps !== null && localeFromProps !== void 0 ? localeFromProps : localeFromContext;
+  const { className, hasCloseButton, closeButtonText, adjustDateOnChange = true, showMonthDropdown = true, showYearDropdown = true, shouldCloseOnSelect = false, allowSameDay = false, minDate, maxDate, isDisabled = false, selected, portalId = "datepicker-portal", zIndex = void 0, popperZIndex = 30 } = props, otherProps = __rest(props, ["className", "hasCloseButton", "closeButtonText", "adjustDateOnChange", "showMonthDropdown", "showYearDropdown", "shouldCloseOnSelect", "allowSameDay", "minDate", "maxDate", "isDisabled", "selected", "portalId", "zIndex", "popperZIndex"]);
+  const locale = useLocaleContext();
   const datePickerRef = React.useRef(null);
   React.useEffect(() => {
     updateLocale(locale);
@@ -3054,49 +2361,174 @@ const DatePicker = (props) => {
     event.preventDefault();
     (_a = datePickerRef.current) === null || _a === void 0 ? void 0 : _a.setOpen(false);
   };
-  const dateFormat = getDateFormat();
-  return jsxRuntime.jsx(ReactDatePicker__default.default, Object.assign({}, otherProps, { adjustDateOnChange, allowSameDay, calendarClassName: "cweb-datepicker-calendar", className: pickerClassName, dateFormat, disabled: isDisabled, dropdownMode: "select", locale: getLocaleModule(locale), maxDate, minDate, popperClassName: classNames__default.default("react-datepicker-popper", {
-    "ui:z-10!": popperZIndex === 10,
-    "ui:z-20!": popperZIndex === 20,
-    "ui:z-30!": popperZIndex === 30,
-    "ui:z-40!": popperZIndex === 40,
-    "ui:z-50!": popperZIndex === 50
-  }), popperPlacement: "bottom-start", portalId, ref: datePickerRef, selected, shouldCloseOnSelect, showMonthDropdown, showYearDropdown, timeFormat: "HH:mm", children: jsxRuntime.jsx("div", { className: "ui:m-2 ui:mt-0", children: hasCloseButton ? jsxRuntime.jsx(PrimaryButton, { onClick: handleCloseButtonClick, children: closeButtonText !== null && closeButtonText !== void 0 ? closeButtonText : "OK" }) : null }) }));
-};
-
-const InfoField = (props) => {
-  let boxProps = {};
-  switch (props.linkType) {
-    case "link":
-      boxProps = {
-        as: "a",
-        href: props.value,
-        target: "_blank",
-        rel: "noopener noreferrer"
-      };
-      break;
-    case "tel":
-      boxProps = {
-        as: "a",
-        href: `tel:${props.value}`
-      };
-      break;
-    case "clipboard":
-      boxProps = {
-        as: "button",
-        type: "button",
-        "data-clipboard-text": props.value,
-        onClick: () => {
-          window.navigator.clipboard.writeText(props.value).then(() => {
-            var _a;
-            return (_a = props.onCopyToClipboard) === null || _a === void 0 ? void 0 : _a.call(props, props.value);
-          });
-        }
-      };
-      break;
-  }
-  return jsxRuntime.jsxs(Stack, { axis: "x", align: "center", _gap: "m", className: props.className, children: [props.icon, jsxRuntime.jsxs(Stack, Object.assign({}, boxProps, { className: "ui:overflow-hidden", children: [jsxRuntime.jsx(Text, { type: "sm", color: "slate-500", className: classNames__default.default({ "ui:break-words": props.supportsMultiline }, { "ui:whitespace-nowrap": !props.supportsMultiline }), children: props.label }), jsxRuntime.jsx(Text, { className: classNames__default.default({ "ui:break-words": props.supportsMultiline }, { "ui:whitespace-nowrap": !props.supportsMultiline }), truncate: !props.supportsMultiline, children: props.value })] }))] });
-};
+  const dateFormat = getDateFormat();
+  return jsxRuntime.jsx(ReactDatePicker__default.default, Object.assign({}, otherProps, { adjustDateOnChange, allowSameDay, calendarClassName: "cweb-datepicker-calendar", className: pickerClassName, dateFormat, disabled: isDisabled, dropdownMode: "select", locale: getLocaleModule(locale), maxDate, minDate, popperClassName: classNames__default.default("react-datepicker-popper", {
+    "ui:z-10!": popperZIndex === 10,
+    "ui:z-20!": popperZIndex === 20,
+    "ui:z-30!": popperZIndex === 30,
+    "ui:z-40!": popperZIndex === 40,
+    "ui:z-50!": popperZIndex === 50
+  }), popperPlacement: "bottom-start", portalId, ref: datePickerRef, selected, shouldCloseOnSelect, showMonthDropdown, showYearDropdown, timeFormat: "HH:mm", children: jsxRuntime.jsx("div", { className: "ui:m-2 ui:mt-0", children: hasCloseButton ? jsxRuntime.jsx(PrimaryButton, { onClick: handleCloseButtonClick, children: closeButtonText !== null && closeButtonText !== void 0 ? closeButtonText : "OK" }) : null }) }));
+};
+
+const InfoField = (props) => {
+  let boxProps = {};
+  switch (props.linkType) {
+    case "link":
+      boxProps = {
+        as: "a",
+        href: props.value,
+        target: "_blank",
+        rel: "noopener noreferrer"
+      };
+      break;
+    case "tel":
+      boxProps = {
+        as: "a",
+        href: `tel:${props.value}`
+      };
+      break;
+    case "clipboard":
+      boxProps = {
+        as: "button",
+        type: "button",
+        "data-clipboard-text": props.value,
+        onClick: () => {
+          window.navigator.clipboard.writeText(props.value).then(() => {
+            var _a;
+            return (_a = props.onCopyToClipboard) === null || _a === void 0 ? void 0 : _a.call(props, props.value);
+          });
+        }
+      };
+      break;
+  }
+  return jsxRuntime.jsxs(Stack, { axis: "x", align: "center", _gap: "m", className: props.className, children: [props.icon, jsxRuntime.jsxs(Stack, Object.assign({}, boxProps, { className: "ui:overflow-hidden", children: [jsxRuntime.jsx(Text, { variant: "sm", color: "slate-500", className: classNames__default.default({ "ui:break-words": props.supportsMultiline }, { "ui:whitespace-nowrap": !props.supportsMultiline }), children: props.label }), jsxRuntime.jsx(Text, { className: classNames__default.default({ "ui:break-words": props.supportsMultiline }, { "ui:whitespace-nowrap": !props.supportsMultiline }), truncate: !props.supportsMultiline, children: props.value })] }))] });
+};
+
+const calculateResponsiveWidthClasses = (size) => {
+  if (typeof size === "string") {
+    return {
+      "ui:w-16": size === "sm",
+      "ui:w-32": size === "md",
+      "ui:w-56": size === "lg",
+      "ui:w-80": size === "xl",
+      "ui:w-full": size === "full"
+    };
+  }
+  const sizesMapped = {
+    sm: "w-16",
+    md: "w-32",
+    lg: "w-56",
+    xl: "w-80",
+    full: "w-full"
+  };
+  const [defaultSize, smallSize, mediumSize, largeSize, extraLargeSize] = size;
+  return [
+    `ui:${sizesMapped[defaultSize]}`,
+    smallSize ? `ui:sm:${sizesMapped[smallSize]}` : "",
+    mediumSize ? `ui:md:${sizesMapped[mediumSize]}` : "",
+    largeSize ? `ui:lg:${sizesMapped[largeSize]}` : "",
+    extraLargeSize ? `ui:xl:${sizesMapped[extraLargeSize]}` : ""
+  ].filter(Boolean);
+};
+const breakpointPrefixes = ["", "sm:", "md:", "lg:", "xl:"];
+const calculateResponsiveGrowClasses = (size) => {
+  if (typeof size === "string") {
+    return { "ui:fill-container": size === "full" };
+  }
+  return size.map((breakpointSize, index) => {
+    if (!breakpointSize) {
+      return "";
+    }
+    const suffix = breakpointSize === "full" ? "" : "-none";
+    return `ui:${breakpointPrefixes[index]}fill-container${suffix}`;
+  }).filter(Boolean);
+};
+
+const StyledInput = React__namespace.default.forwardRef((_a, ref) => {
+  var { suffix, prefix, className, width = "full", height = "lg", icon, isError, isClearIconVisible, onClickClearField } = _a, attributes = __rest(_a, ["suffix", "prefix", "className", "width", "height", "icon", "isError", "isClearIconVisible", "onClickClearField"]);
+  const hasPrefix = !!prefix;
+  const hasSuffix = !!suffix;
+  const hasNoExtraContent = !hasPrefix && !hasSuffix;
+  const heightClasses = {
+    md: "ui:h-form-md",
+    lg: "ui:h-form-lg"
+  };
+  const prefixSuffixPaddingClasses = {
+    md: "ui:py-2 ui:px-3",
+    lg: "ui:p-3"
+  };
+  return jsxRuntime.jsxs(FlexRow, { spacing: "none", "data-test-id": "input-component-container", stretch: false, children: [jsxRuntime.jsx("span", { className: classNames__default.default(heightClasses[height], prefixSuffixPaddingClasses[height], "ui:border-b ui:border-t ui:border-solid ui:border-input-border", {
+    "ui:hidden": hasNoExtraContent,
+    "ui:order-1": hasSuffix,
+    "ui:rounded-l ui:border-l": hasPrefix,
+    "ui:rounded-r ui:border-r": hasSuffix
+  }, "ui:flex ui:flex-col ui:items-center", "ui:text-sm", "ui:text-slate-500", "ui:bg-main-background"), children: suffix || prefix }), jsxRuntime.jsxs("div", { className: classNames__default.default("ui:relative", calculateResponsiveGrowClasses(width)), children: [icon && jsxRuntime.jsx("div", { className: classNames__default.default("ui:absolute ui:left-4 ui:top-1/2", {
+    "ui:grow": width === "full"
+  }), style: {
+    transform: "translateY(-50%)",
+    zIndex: 20
+  }, children: jsxRuntime.jsx(IconComponentOrKey, { name: icon, className: "ui:h-6 ui:w-6 ui:text-slate-300" }) }), jsxRuntime.jsx("input", Object.assign({ ref, className: classNames__default.default("ui:block", calculateResponsiveWidthClasses(width), { "ui:pl-12": icon }, {
+    "ui:bg-slate-50 ui:text-slate-400": attributes.disabled,
+    "ui:text-slate-800": !attributes.disabled,
+    "ui:border-input-border": !attributes.disabled && !isError,
+    "ui:hover:border-input-border-dark": !attributes.disabled,
+    "ui:border-red-700": isError,
+    "ui:focus:outline-negative": isError,
+    "ui:focus:border-primary": !isError,
+    "ui:focus:outline-primary": !isError,
+    "ui:bg-white": !attributes.disabled
+  }, heightClasses[height], "ui:p-2", "ui:border", "ui:text-base ui:sm:text-sm", "ui:placeholder-slate-500", "ui:border-solid", "ui:transition-colors", "ui:duration-300", {
+    "ui:z-10": hasSuffix || hasPrefix,
+    // to make sure the ui:outline is displayed completely
+    "ui:rounded": hasNoExtraContent,
+    "ui:rounded-l": hasSuffix,
+    "ui:rounded-r": hasPrefix,
+    "ui:order-2": hasPrefix,
+    "ui:order-1": hasSuffix
+  }, "ui:shadow-default", className) }, attributes)), jsxRuntime.jsx("div", { className: "ui:absolute ui:right-0 ui:top-1/2", style: {
+    transform: "translateY(-50%)"
+  }, children: jsxRuntime.jsx(CrossIcon, { className: classNames__default.default("ui:mr-3 ui:h-6 ui:w-6 ui:cursor-pointer ui:text-slate-300", {
+    "ui:block": isClearIconVisible,
+    "ui:hidden": !isClearIconVisible
+  }), onClick: onClickClearField }) })] })] });
+});
+
+const Input = React__namespace.default.forwardRef((_a, ref) => {
+  var { withSuffix = "", withPrefix = "", clearable = false, isDisabled = false, name, value = "", onChange, asFormField, maxLength, height = "lg" } = _a, otherProps = __rest(_a, ["withSuffix", "withPrefix", "clearable", "isDisabled", "name", "value", "onChange", "asFormField", "maxLength", "height"]);
+  const [innerValue, setInnerValue] = React.useState(value);
+  React.useEffect(() => {
+    setInnerValue(value);
+  }, [value]);
+  const clearField = () => {
+    setInnerValue("");
+    onChange === null || onChange === void 0 ? void 0 : onChange({
+      target: {
+        name: name || "",
+        value: ""
+      },
+      currentTarget: {
+        name: name || "",
+        value: ""
+      }
+    });
+  };
+  const handleChangeEvent = (event) => {
+    setInnerValue(event.currentTarget.value);
+    onChange === null || onChange === void 0 ? void 0 : onChange(asFormField ? event.currentTarget.value : {
+      target: {
+        name: name || "",
+        value: event.currentTarget.value
+      },
+      currentTarget: {
+        name: name || "",
+        value: event.currentTarget.value
+      }
+    });
+  };
+  const isClearIconVisible = clearable && !!innerValue;
+  return jsxRuntime.jsx(StyledInput, Object.assign({ "data-test-id": `input-${name}`, name, value: innerValue, onChange: handleChangeEvent, ref, size: maxLength, disabled: isDisabled, isClearIconVisible, onClickClearField: clearField, prefix: withPrefix, suffix: withSuffix, height }, otherProps));
+});
 
 function cn$1(...inputs) {
   return tailwindMerge.twMerge(classNames__default.default(inputs));
@@ -3139,15 +2571,14 @@ const FlyOutMenuSeparator = React__namespace.forwardRef((_a, ref) => {
 });
 FlyOutMenuSeparator.displayName = FlyOutMenuPrimitive__namespace.Separator.displayName;
 const ItemButton = (props) => {
-  const { children, icon, leadingIcon: leadingIconFromProps, trailingIcon } = props, rest = __rest(props, ["children", "icon", "leadingIcon", "trailingIcon"]);
-  const leadingIcon = leadingIconFromProps !== null && leadingIconFromProps !== void 0 ? leadingIconFromProps : icon;
+  const { children, leadingIcon, trailingIcon } = props, rest = __rest(props, ["children", "leadingIcon", "trailingIcon"]);
   return jsxRuntime.jsxs("button", Object.assign({}, rest, { className: "ui:flex ui:w-full ui:gap-s ui:p-s", children: [React__namespace.isValidElement(leadingIcon) ? React__namespace.cloneElement(leadingIcon, { className: "ui:shrink-0" }) : null, jsxRuntime.jsx(Text, { className: "ui:mt-[2px] ui:text-start", children }), React__namespace.isValidElement(trailingIcon) ? React__namespace.cloneElement(trailingIcon, {
     className: "ui:shrink-0 ui:ml-auto"
   }) : null] }));
 };
 const FlyOutMenuButtonItem = (props) => {
-  const { children, icon, leadingIcon, trailingIcon } = props, rest = __rest(props, ["children", "icon", "leadingIcon", "trailingIcon"]);
-  return jsxRuntime.jsx(FlyOutMenuItem, Object.assign({}, rest, { children: jsxRuntime.jsx(ItemButton, { leadingIcon: leadingIcon !== null && leadingIcon !== void 0 ? leadingIcon : icon, trailingIcon, children }) }));
+  const { children, leadingIcon, trailingIcon } = props, rest = __rest(props, ["children", "leadingIcon", "trailingIcon"]);
+  return jsxRuntime.jsx(FlyOutMenuItem, Object.assign({}, rest, { children: jsxRuntime.jsx(ItemButton, { leadingIcon, trailingIcon, children }) }));
 };
 const FlyOutMenuChildrenItem = (props) => {
   const { children, icon } = props, rest = __rest(props, ["children", "icon"]);
@@ -3194,36 +2625,6 @@ const LabeledInput = React__namespace.default.forwardRef((props, ref) => {
   return jsxRuntime.jsxs(Stack, { as: "label", _gap: "s", align: fieldWidth ? "stretch" : void 0, className: classNames__default.default(fieldWidth && calculateResponsiveWidthClasses(fieldWidth), className), children: [label && jsxRuntime.jsx(LabelText, { children: props.label }), jsxRuntime.jsx(StyledInput, Object.assign({}, rest, { ref, isError: Boolean(errorText), "aria-describedby": [ariaDescribedBy, helperErrorTextId].join(" ") })), jsxRuntime.jsx(HelperAndErrorText, { helperText, errorText, describingId: helperErrorTextId })] });
 });
 
-const LabeledRadio = React__namespace.default.forwardRef((props, ref) => {
-  const { children, label, helperText, errorText, className, inputClassName } = props, attributes = __rest(props, ["children", "label", "helperText", "errorText", "className", "inputClassName"]);
-  const { id, disabled } = attributes;
-  const semanticId = React__namespace.default.useId();
-  return jsxRuntime.jsxs(Stack, { as: "label", axis: "x", _gap: "m", htmlFor: id, className: classNames__default.default("ui:radio-form-field-label", className), children: [jsxRuntime.jsxs("div", { className: "ui:relative ui:flex ui:flex-row ui:items-center ui:self-start", children: [jsxRuntime.jsx(Text, { "aria-hidden": true, className: "ui:w-4 ui:opacity-0", children: "CENTER" }), jsxRuntime.jsx("div", { className: "ui:absolute", children: jsxRuntime.jsx(StyledRadio, Object.assign({ "aria-describedby": semanticId }, attributes, { ref, className: inputClassName })) })] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(RadioLabel, { label, disabled, children }), jsxRuntime.jsx(HelperAndErrorText, { helperText, errorText, describingId: semanticId })] })] });
-});
-function RadioLabel(props) {
-  const { children, label, disabled } = props;
-  if (!label && !children) {
-    return null;
-  }
-  if (children) {
-    return children;
-  }
-  return jsxRuntime.jsx(LabelText, { color: disabled ? "slate-500" : void 0, children: label });
-}
-
-const LabeledRadioGroup = (props) => {
-  const { children, title, className, orientation = "vertical" } = props;
-  const semanticId = React__namespace.default.useId();
-  const orientationProps = orientation === "horizontal" ? {
-    axis: "x",
-    _gap: "2xl"
-  } : {
-    axis: "y",
-    _gap: "base"
-  };
-  return jsxRuntime.jsxs(Stack, { as: "fieldset", "aria-describedby": semanticId, className: classNames__default.default(className), _gap: "s", children: [title && jsxRuntime.jsx("legend", { className: "ui:contents", children: jsxRuntime.jsx(Text, { children: title }) }), jsxRuntime.jsx(Stack, Object.assign({}, orientationProps, { children })), jsxRuntime.jsx(HelperAndErrorText, { helperText: props.helperText, errorText: props.errorText, describingId: semanticId })] });
-};
-
 const Actions$1 = (props) => {
   const { children, className } = props, rest = __rest(props, ["children", "className"]);
   return jsxRuntime.jsx("div", Object.assign({}, rest, { className: classNames__default.default(
@@ -3286,7 +2687,7 @@ function Card(props) {
   });
   return jsxRuntime.jsx(Box, Object.assign({ as: Element, elevation: highlighted && !elevation ? "large" : elevation, borderRadius, className: outerClasses, backgroundColor: "surface" }, rest, { children: jsxRuntime.jsxs(Box, { className: innerClasses, children: [jsxRuntime.jsx(RenderTopBar, Object.assign({}, props)), padding ? jsxRuntime.jsx(Padding$1, { children }) : children] }) }));
 }
-Card.Title = (props) => jsxRuntime.jsx(Title, Object.assign({ variant: "sm" }, props));
+Card.Title = (props) => jsxRuntime.jsx(Heading, Object.assign({ variant: "h3", as: "h5" }, props));
 Card.TopBar = TopBar;
 Card.Padding = Padding$1;
 Card.Section = Section$1;
@@ -3294,13 +2695,13 @@ Card.Actions = Actions$1;
 function RenderTopBar(props) {
   const { title, actions } = props;
   if (title && actions) {
-    return jsxRuntime.jsx(Padding$1, { children: jsxRuntime.jsxs(TopBar, { className: "ui:flex ui:flex-wrap ui:items-center ui:justify-between", children: [jsxRuntime.jsx(Title, { variant: "sm", children: title }), jsxRuntime.jsx(Actions$1, { children: actions })] }) });
+    return jsxRuntime.jsx(Padding$1, { children: jsxRuntime.jsxs(TopBar, { className: "ui:flex ui:flex-wrap ui:items-center ui:justify-between", children: [jsxRuntime.jsx(Heading, { variant: "h3", as: "h5", children: title }), jsxRuntime.jsx(Actions$1, { children: actions })] }) });
   }
   if (actions) {
     return jsxRuntime.jsx(Padding$1, { children: jsxRuntime.jsx(TopBar, { children: jsxRuntime.jsx(Actions$1, { children: actions }) }) });
   }
   if (title) {
-    return jsxRuntime.jsx(Padding$1, { children: jsxRuntime.jsx(TopBar, { children: jsxRuntime.jsx(Title, { variant: "sm", children: title }) }) });
+    return jsxRuntime.jsx(Padding$1, { children: jsxRuntime.jsx(TopBar, { children: jsxRuntime.jsx(Heading, { variant: "h3", as: "h5", children: title }) }) });
   }
   return null;
 }
@@ -3631,6 +3032,85 @@ Line.propTypes = {
   className: PropTypes__default.default.string
 };
 
+var css_248z$8 = "/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n.cweb-checkbox {\n  outline: none;\n}\n.cweb-checkbox .cweb-checkbox-input {\n  position: absolute;\n  -webkit-appearance: none;\n  height: 1px;\n  opacity: 0;\n  width: 1px;\n}\n.cweb-checkbox.type-regular .cweb-checkbox-icon-container {\n  border-color: #cccccc;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n}\n.cweb-checkbox.type-regular.hasError .cweb-checkbox-icon-container {\n  border-color: var(--ui-color-red-800, #991b1b);\n}\n.cweb-checkbox.type-regular.is-focused .cweb-checkbox-icon-container {\n  border-color: #1e40af;\n}\n.cweb-checkbox.type-regular.is-checked .cweb-checkbox-icon {\n  padding: 4px;\n  background: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2210%22 height%3D%228%22 viewBox%3D%220 0 10 8%22 fill%3D%22none%22%3E    %3Cpath d%3D%22M9.207 0.792787C9.39447 0.980314 9.49979 1.23462 9.49979 1.49979C9.49979 1.76495 9.39447 2.01926 9.207 2.20679L4.207 7.20679C4.01947 7.39426 3.76516 7.49957 3.5 7.49957C3.23484 7.49957 2.98053 7.39426 2.793 7.20679L0.793 5.20679C0.610842 5.01818 0.510047 4.76558 0.512326 4.50339C0.514604 4.24119 0.619773 3.99038 0.805181 3.80497C0.990589 3.61956 1.2414 3.51439 1.5036 3.51211C1.7658 3.50983 2.0184 3.61063 2.207 3.79279L3.5 5.08579L7.793 0.792787C7.98053 0.605316 8.23484 0.5 8.5 0.5C8.76516 0.5 9.01947 0.605316 9.207 0.792787Z%22 fill%3D%22white%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n.cweb-checkbox.type-regular.is-checked .cweb-checkbox-icon-container {\n  border-color: #1e40af;\n}\n.cweb-checkbox.type-regular.is-checked.is-focused .cweb-checkbox-icon-container {\n  border-color: #1d4ed8;\n}\n.cweb-checkbox.type-regular.is-indeterminate .cweb-checkbox-icon {\n  width: 0.5rem;\n  height: 0.5rem;\n  padding: 4px;\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%222%22 viewBox%3D%220 0 10 2%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath d%3D%22M9 -4.37114e-08C9.55228 -1.95703e-08 10 0.447715 10 1C10 1.55228 9.55228 2 9 2L1 2C0.447716 2 -6.78525e-08 1.55228 -4.37114e-08 1C-1.95703e-08 0.447715 0.447715 -4.17544e-07 1 -3.93402e-07L9 -4.37114e-08Z%22 fill%3D%22white%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n}\n.cweb-checkbox.type-regular.is-indeterminate .cweb-checkbox-icon-container {\n  border-color: #1e40af;\n}\n.cweb-checkbox.type-regular.is-indeterminate.is-focused .cweb-checkbox-icon-container {\n  border-color: #1d4ed8;\n}\n.cweb-checkbox.type-regular.is-disabled.show-cross-when-disabled .cweb-checkbox-icon {\n  width: 10px;\n  height: 10px;\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2211px%22 height%3D%2211px%22 viewBox%3D%220 0 11 11%22 version%3D%221.1%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E    %3Cg stroke%3D%22none%22 stroke-width%3D%221%22 fill%3D%22none%22 fill-rule%3D%22evenodd%22 stroke-linecap%3D%22round%22%3E        %3Cg transform%3D%22translate(-6.000000%2C -7.000000)%22 stroke%3D%22%232D2D2D%22 stroke-width%3D%222%22%3E            %3Cpath d%3D%22M7%2C17 L16%2C8 M16%2C17 L7%2C8%22 %2F%3E        %3C%2Fg%3E    %3C%2Fg%3E%3C%2Fsvg%3E\") no-repeat center;\n  background-size: contain;\n  opacity: 0.6;\n}";
+styleInject(css_248z$8);
+
+const CheckboxInner = (props) => {
+  const { id, explanation, type = "regular", isChecked = false, isIndeterminate = false, isDisabled, name, value, onChange, onClick, className, classNameCheckboxLabel, error, innerRef } = props;
+  const [checked, setChecked] = React.useState(false);
+  const [indeterminate, setIndeterminate] = React.useState(isIndeterminate);
+  const [isFocused, setIsFocused] = React.useState(false);
+  const containerClassName = classNames__default.default("cweb-checkbox", "type-regular", className, {
+    "is-focused": isFocused,
+    "is-checked": checked && !indeterminate,
+    "is-indeterminate": indeterminate,
+    "ui:opacity-50 ui:cursor-not-allowed is-disabled": isDisabled,
+    hasError: error
+  });
+  React.useEffect(() => {
+    setChecked(isChecked);
+    setIndeterminate(false);
+  }, [isChecked]);
+  React.useEffect(() => {
+    setIndeterminate(isIndeterminate);
+  }, [isIndeterminate]);
+  React.useEffect(() => {
+    if (innerRef) {
+      if (typeof innerRef !== "function" && (innerRef === null || innerRef === void 0 ? void 0 : innerRef.current)) {
+        innerRef.current.indeterminate = !indeterminate;
+      }
+    }
+  }, [indeterminate]);
+  const handleChange = (event) => {
+    setChecked(event.currentTarget.checked);
+    event.stopPropagation();
+    setIndeterminate(false);
+    if (onChange) {
+      onChange(event);
+    }
+  };
+  const handleFocus = () => setIsFocused(true);
+  const handleBlur = () => setIsFocused(false);
+  return jsxRuntime.jsx("div", {
+    className: containerClassName,
+    /**
+     * This harms a11y since the div becomes an interactible element.
+     * The main interaction in this component happens between a styled label (looking like a checkbox)
+     * and the invisible input checkbox itself.
+     *
+     * This `onClick` event is a requirement from using this component in the table,
+     * since the row is clickable and we need to stop propagation to not invoking the row click
+     * upon marking the checkbox as checked/unchecked.
+     */
+    onClick,
+    children: jsxRuntime.jsx("label", { className: classNames__default.default(classNameCheckboxLabel, "cweb-checkbox-label ui:group ui:relative ui:overflow-hidden", "ui:flex ui:w-full ui:cursor-pointer", {
+      "ui:cursor-not-allowed": isDisabled,
+      "ui:cursor-pointer": !isDisabled
+    }), "data-test-id": "checkbox-label", children: jsxRuntime.jsxs("div", { className: "ui:flex", children: [jsxRuntime.jsxs("div", { className: "ui:flex ui:h-[24px] ui:flex-col ui:justify-center ui:sm:h-[20px]", children: [jsxRuntime.jsx("input", { id, ref: innerRef, "data-test-id": `checkbox-${name}`, className: "cweb-checkbox-input", name, type: "checkbox", checked, disabled: isDisabled, value, onBlur: handleBlur, onFocus: handleFocus, onChange: handleChange }), jsxRuntime.jsx("span", { className: classNames__default.default("cweb-checkbox-icon-container ui:transition-colors", "ui:h-6 ui:w-6", "ui:sm:h-4 ui:sm:w-4", {
+      "ui:bg-primary": checked || indeterminate,
+      "ui:bg-white": !checked && !indeterminate,
+      "ui:group-hover:bg-blue-50": type === "regular" && !(checked || indeterminate),
+      "ui:group-hover:bg-primary-dark": checked || indeterminate,
+      "ui:outline-primary": isFocused
+    }), "data-test-id": "checkbox-span", children: jsxRuntime.jsx("div", { className: "cweb-checkbox-icon ui:h-3 ui:w-3 ui:sm:h-2 ui:sm:w-2" }) })] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Label, Object.assign({}, props)), explanation && jsxRuntime.jsx(Text, { className: "ui:ml-2 ui:select-none", color: "slate-500", "data-test-id": "checkbox-explanation", children: explanation })] })] }) })
+  });
+};
+function Label(props) {
+  const { text, renderLabel } = props;
+  const divAttributes = {
+    className: "ui:ml-2 ui:select-none",
+    "data-test-id": "checkbox-text"
+  };
+  if (renderLabel) {
+    return jsxRuntime.jsx("div", Object.assign({}, divAttributes, { children: renderLabel(props) }));
+  }
+  if (text) {
+    return jsxRuntime.jsx("div", Object.assign({}, divAttributes, { children: jsxRuntime.jsx(Text, { children: text }) }));
+  }
+  return null;
+}
+const Checkbox = React__namespace.default.forwardRef((props, ref) => jsxRuntime.jsx(CheckboxInner, Object.assign({}, props, { innerRef: ref })));
+
 const THead = (props) => {
   return jsxRuntime.jsx("thead", { className: classNames__default.default(
     // Styles for all header cells
@@ -3650,6 +3130,42 @@ function TableHeader(props) {
   return jsxRuntime.jsx(THead, { children: jsxRuntime.jsxs("tr", { className: "ui:rounded-2xl", children: [props.selectAllCheckbox && jsxRuntime.jsx("th", { children: props.selectAllCheckbox }), props.fieldConfigurations.map((fieldConfig) => fieldConfig.headerText ? jsxRuntime.jsx("th", { children: jsxRuntime.jsx(Text, { variant: "strong", className: "ui:truncate ui:py-m ui:text-left ui:capitalize ui:leading-5", children: fieldConfig.headerText }) }, fieldConfig.key) : jsxRuntime.jsx("td", {}, fieldConfig.key))] }) });
 }
 
+var img$7 = "data:image/svg+xml,%3csvg width='144' height='144' viewBox='0 0 144 144' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M72 144C111.765 144 144 111.765 144 72C144 32.2355 111.765 0 72 0C32.2355 0 0 32.2355 0 72C0 111.765 32.2355 144 72 144Z' fill='%23BBE3D7'/%3e%3cpath d='M100 28H44C41.7909 28 40 29.7909 40 32V112C40 114.209 41.7909 116 44 116H100C102.209 116 104 114.209 104 112V32C104 29.7909 102.209 28 100 28Z' fill='%23FBFEFF'/%3e%3cellipse cx='58' cy='98' rx='4' ry='3' fill='%23FFD3E5'/%3e%3cellipse cx='58' cy='98' rx='4' ry='3' fill='%23FFD3E5'/%3e%3cellipse cx='58' cy='98' rx='4' ry='3' fill='%23FFD3E5'/%3e%3cellipse cx='86' cy='98' rx='4' ry='3' fill='%23FFD3E5'/%3e%3cellipse cx='86' cy='98' rx='4' ry='3' fill='%23FFD3E5'/%3e%3cellipse cx='86' cy='98' rx='4' ry='3' fill='%23FFD3E5'/%3e%3cpath d='M71.9007 101.202C70.0421 101.202 68.5352 99.6148 68.5352 97.6578V96H75.2663V97.6578C75.2663 99.6148 73.7594 101.202 71.9007 101.202Z' fill='%23454545'/%3e%3cpath d='M60.0918 96.0458C59.8056 95.6233 59.3882 95.5719 59.2189 95.5719C59.0496 95.5719 58.6252 95.6181 58.3461 96.0458C57.9584 96.6394 57.1663 96.8045 56.5764 96.4145C55.9865 96.025 55.8224 95.2273 56.2101 94.6338C56.8775 93.6111 58.0023 93 59.2189 93C60.4355 93 61.5603 93.6111 62.2284 94.6338C62.6154 95.2273 62.4513 96.025 61.8614 96.4145C61.645 96.5575 60.6888 96.9281 60.0918 96.0458Z' fill='%23454545'/%3e%3cpath d='M85.6543 96.0458C85.3681 95.6233 84.9513 95.5719 84.7814 95.5719C84.6121 95.5719 84.1883 95.6181 83.9092 96.0458C83.5215 96.6394 82.7288 96.8045 82.1389 96.4145C81.549 96.025 81.3849 95.2273 81.7726 94.6338C82.4406 93.6111 83.5655 93 84.7821 93C85.998 93 87.1228 93.6111 87.7909 94.6338C88.1786 95.2273 88.0144 96.025 87.4246 96.4145C87.2081 96.5575 86.2519 96.9281 85.6543 96.0458Z' fill='%23454545'/%3e%3crect x='88.8281' y='45.8281' width='8' height='4' rx='2' transform='rotate(45 88.8281 45.8281)' fill='%23BBE3D7'/%3e%3crect x='100.143' y='45.8281' width='12' height='4' rx='2' transform='rotate(135 100.143 45.8281)' fill='%23BBE3D7'/%3e%3crect x='46' y='46' width='34' height='8' rx='4' fill='%23C0E9FA'/%3e%3crect x='88.8281' y='65.8281' width='8' height='4' rx='2' transform='rotate(45 88.8281 65.8281)' fill='%23BBE3D7'/%3e%3crect x='100.143' y='65.8281' width='12' height='4' rx='2' transform='rotate(135 100.143 65.8281)' fill='%23BBE3D7'/%3e%3crect x='46' y='66' width='34' height='8' rx='4' fill='%23C0E9FA'/%3e%3c/svg%3e";
+
+var img$6 = "data:image/svg+xml,%3csvg width='144' height='144' viewBox='0 0 144 144' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg clip-path='url(%23clip0_1866_119823)'%3e%3cmask id='mask0_1866_119823' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='144' height='144'%3e%3cpath d='M0 0V144H144V0H0H0Z' fill='white'/%3e%3c/mask%3e%3cg mask='url(%23mask0_1866_119823)'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M72 144C32.235 144 0 111.765 0 72C0 32.235 32.235 0 72 0C111.765 0 144 32.235 144 72C144 111.765 111.765 144 72 144Z' fill='%236ABFA5'/%3e%3c/g%3e%3cmask id='mask1_1866_119823' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='54' y='36' width='35' height='35'%3e%3cpath d='M71.14 36L71.4657 36.003C80.7804 36.1767 88.28 43.7828 88.28 53.14V70.065L54 69.882V53.14C54 43.674 61.673 36 71.14 36ZM71.14 41.472L70.8441 41.4757C64.6488 41.6327 59.674 46.7039 59.674 52.937V65.524L82.605 65.646V52.937C82.605 46.605 77.471 41.472 71.14 41.472Z' fill='white'/%3e%3c/mask%3e%3cg mask='url(%23mask1_1866_119823)'%3e%3cpath d='M71.14 36L71.4657 36.003C80.7804 36.1767 88.28 43.7828 88.28 53.14V70.065L54 69.882V53.14C54 43.674 61.673 36 71.14 36ZM71.14 41.472L70.8441 41.4757C64.6488 41.6327 59.674 46.7039 59.674 52.937V65.524L82.605 65.646V52.937C82.605 46.605 77.471 41.472 71.14 41.472Z' fill='%23F2F2F2'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M71 39L71.3085 39.0035C78.8971 39.1745 85 45.6404 85 53.5915V68L57 67.8442V53.5915C57 45.533 63.2673 39 71 39ZM71 43.6584L70.7334 43.6623C65.6846 43.8094 61.6345 48.1211 61.6345 53.4187V64.1342L80.3646 64.238V53.4187C80.3646 48.0282 76.1712 43.6584 71 43.6584Z' fill='%23DEDEDE'/%3e%3c/g%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M90.5966 107.98H53.4036C50.1986 107.98 47.5996 105.381 47.5996 102.176V68.7708C47.5996 65.5658 50.1986 62.9668 53.4036 62.9668H90.5966C93.8026 62.9668 96.4006 65.5658 96.4006 68.7708V102.176C96.4006 105.381 93.8026 107.98 90.5966 107.98Z' fill='white'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M71.9277 75.3438C69.1662 75.3438 66.9277 77.5836 66.9277 80.3467C66.9277 82.3006 68.0499 83.9884 69.6804 84.8115L69.6813 95.3438H74.1751L74.1761 84.8115C75.8065 83.9884 76.9277 82.3006 76.9277 80.3467C76.9277 77.5836 74.6893 75.3438 71.9277 75.3438Z' fill='%236670A5'/%3e%3cpath d='M61 62H53V63H61V62Z' fill='white'/%3e%3cpath d='M89 62H81V63H89V62Z' fill='white'/%3e%3cpath d='M72 144C111.765 144 144 111.765 144 72C144 32.2355 111.765 0 72 0C32.2355 0 0 32.2355 0 72C0 111.765 32.2355 144 72 144Z' fill='%236ABFA5'/%3e%3cpath d='M76.975 32.7732C79.9117 37.5004 83.0276 42.9368 86.1287 48.7329C87.8031 51.8633 90.8123 54.0548 94.2988 54.6825C100.469 55.7938 106.31 56.9717 111.465 58.1712C115.702 59.1572 117.426 64.2717 114.653 67.6338C111.028 72.0263 106.95 76.7279 102.457 81.5292C100.104 84.0461 98.9851 87.4836 99.4054 90.909C100.173 97.1657 100.778 103.076 101.239 108.507C101.61 112.876 97.2381 116.105 93.1944 114.44C87.6662 112.163 82.6966 109.553 77.0542 106.776C73.8839 105.217 70.1732 105.197 66.9841 106.72C61.3559 109.408 56.0667 111.994 50.9051 114.19C46.8445 115.918 42.404 112.698 42.7799 108.29C43.2385 102.918 43.8374 97.0822 44.5947 90.909C45.015 87.4829 43.8971 84.0454 41.5426 81.5286C37.051 76.7273 32.9716 72.0256 29.3475 67.6331C26.5747 64.271 28.2981 59.1565 32.5352 58.1705C37.6902 56.9711 43.5319 55.7931 49.7019 54.6819C53.1878 54.0542 56.1969 51.8626 57.872 48.7322C60.9725 42.9362 64.0884 37.4997 67.0257 32.7725C69.3225 29.0757 74.6775 29.0757 76.975 32.7732Z' fill='%23EDFFF9'/%3e%3cpath opacity='0.5' d='M60.6635 77.2045C60.6635 74.8627 58.2874 72.9648 55.3561 72.9648C52.4249 72.9648 50.0488 74.8627 50.0488 77.2045C50.0488 79.5455 52.4249 81.4441 55.3561 81.4441C58.2874 81.4441 60.6635 79.5455 60.6635 77.2045Z' fill='%23FF83B4'/%3e%3cpath opacity='0.5' d='M93.9499 77.2045C93.9499 74.8627 91.5739 72.9648 88.6426 72.9648C85.712 72.9648 83.3359 74.8627 83.3359 77.2045C83.3359 79.5455 85.712 81.4441 88.6426 81.4441C91.5739 81.4441 93.9499 79.5455 93.9499 77.2045Z' fill='%23FF83B4'/%3e%3cpath d='M71.9988 76.516C70.2801 76.516 68.5613 75.9577 67.1272 74.8417C66.5478 74.3911 66.4424 73.554 66.8923 72.9727C67.3414 72.3915 68.176 72.2858 68.7554 72.7363C70.6648 74.2227 73.3329 74.2227 75.243 72.7363C75.8224 72.2858 76.6562 72.3915 77.1061 72.9727C77.5552 73.554 77.4498 74.3911 76.8704 74.8417C75.4363 75.9577 73.7176 76.516 71.9988 76.516Z' fill='%23454545'/%3e%3cpath d='M58.6251 73.96C58.3276 73.5222 57.8939 73.469 57.718 73.469C57.5421 73.469 57.101 73.5168 56.811 73.96C56.4081 74.5749 55.585 74.746 54.972 74.3419C54.3591 73.9384 54.1885 73.1121 54.5914 72.4972C55.2849 71.4378 56.4538 70.8047 57.718 70.8047C58.9822 70.8047 60.1511 71.4378 60.8453 72.4972C61.2475 73.1121 61.077 73.9384 60.464 74.3419C60.2391 74.49 59.2454 74.8739 58.6251 73.96Z' fill='%23454545'/%3e%3cpath d='M87.1876 73.96C86.8901 73.5222 86.4571 73.469 86.2805 73.469C86.1046 73.469 85.6642 73.5168 85.3741 73.96C84.9713 74.5749 84.1475 74.746 83.5345 74.3419C82.9216 73.9384 82.751 73.1121 83.1539 72.4972C83.8481 71.4378 85.017 70.8047 86.2812 70.8047C87.5447 70.8047 88.7136 71.4378 89.4078 72.4972C89.8107 73.1121 89.6401 73.9384 89.0272 74.3419C88.8022 74.49 87.8086 74.8739 87.1876 73.96Z' fill='%23454545'/%3e%3cg clip-path='url(%23clip1_1866_119823)'%3e%3cmask id='mask2_1866_119823' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='144' height='144'%3e%3cpath d='M0 0V144H144V0H0H0Z' fill='white'/%3e%3c/mask%3e%3cg mask='url(%23mask2_1866_119823)'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M72 144C32.235 144 0 111.765 0 72C0 32.235 32.235 0 72 0C111.765 0 144 32.235 144 72C144 111.765 111.765 144 72 144Z' fill='%23BBE3D7'/%3e%3c/g%3e%3cmask id='mask3_1866_119823' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='54' y='36' width='35' height='35'%3e%3cpath d='M71.14 36L71.4657 36.003C80.7804 36.1767 88.28 43.7828 88.28 53.14V70.065L54 69.882V53.14C54 43.674 61.673 36 71.14 36ZM71.14 41.472L70.8441 41.4757C64.6488 41.6327 59.674 46.7039 59.674 52.937V65.524L82.605 65.646V52.937C82.605 46.605 77.471 41.472 71.14 41.472Z' fill='white'/%3e%3c/mask%3e%3cg mask='url(%23mask3_1866_119823)'%3e%3cpath d='M71.14 36L71.4657 36.003C80.7804 36.1767 88.28 43.7828 88.28 53.14V70.065L54 69.882V53.14C54 43.674 61.673 36 71.14 36ZM71.14 41.472L70.8441 41.4757C64.6488 41.6327 59.674 46.7039 59.674 52.937V65.524L82.605 65.646V52.937C82.605 46.605 77.471 41.472 71.14 41.472Z' fill='%23F2F2F2'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M71 39L71.3085 39.0035C78.8971 39.1745 85 45.6404 85 53.5915V68L57 67.8442V53.5915C57 45.533 63.2673 39 71 39ZM71 43.6584L70.7334 43.6623C65.6846 43.8094 61.6345 48.1211 61.6345 53.4187V64.1342L80.3646 64.238V53.4187C80.3646 48.0282 76.1712 43.6584 71 43.6584Z' fill='%23DEDEDE'/%3e%3c/g%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M90.5966 107.98H53.4036C50.1986 107.98 47.5996 105.381 47.5996 102.176V68.7708C47.5996 65.5658 50.1986 62.9668 53.4036 62.9668H90.5966C93.8026 62.9668 96.4006 65.5658 96.4006 68.7708V102.176C96.4006 105.381 93.8026 107.98 90.5966 107.98Z' fill='white'/%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M71.9277 75.3438C69.1662 75.3438 66.9277 77.5836 66.9277 80.3467C66.9277 82.3006 68.0499 83.9884 69.6804 84.8115L69.6813 95.3438H74.1751L74.1761 84.8115C75.8065 83.9884 76.9277 82.3006 76.9277 80.3467C76.9277 77.5836 74.6893 75.3438 71.9277 75.3438Z' fill='%236670A5'/%3e%3cpath d='M61 62H53V63H61V62Z' fill='white'/%3e%3cpath d='M89 62H81V63H89V62Z' fill='white'/%3e%3cpath d='M72 144C111.765 144 144 111.765 144 72C144 32.2355 111.765 0 72 0C32.2355 0 0 32.2355 0 72C0 111.765 32.2355 144 72 144Z' fill='%23BBE3D7'/%3e%3cpath d='M76.975 32.7732C79.9117 37.5004 83.0276 42.9368 86.1287 48.7329C87.8031 51.8633 90.8123 54.0548 94.2988 54.6825C100.469 55.7938 106.31 56.9717 111.465 58.1712C115.702 59.1572 117.426 64.2717 114.653 67.6338C111.028 72.0263 106.95 76.7279 102.457 81.5292C100.104 84.0461 98.9851 87.4836 99.4054 90.909C100.173 97.1657 100.778 103.076 101.239 108.507C101.61 112.876 97.2381 116.105 93.1944 114.44C87.6662 112.163 82.6966 109.553 77.0542 106.776C73.8839 105.217 70.1732 105.197 66.9841 106.72C61.3559 109.408 56.0667 111.994 50.9051 114.19C46.8445 115.918 42.404 112.698 42.7799 108.29C43.2385 102.918 43.8374 97.0822 44.5947 90.909C45.015 87.4829 43.8971 84.0454 41.5426 81.5286C37.051 76.7273 32.9716 72.0256 29.3475 67.6331C26.5747 64.271 28.2981 59.1565 32.5352 58.1705C37.6902 56.9711 43.5319 55.7931 49.7019 54.6819C53.1878 54.0542 56.1969 51.8626 57.872 48.7322C60.9725 42.9362 64.0884 37.4997 67.0257 32.7725C69.3225 29.0757 74.6775 29.0757 76.975 32.7732Z' fill='%23EDFFF9'/%3e%3cpath opacity='0.5' d='M60.6635 77.2045C60.6635 74.8627 58.2874 72.9648 55.3561 72.9648C52.4249 72.9648 50.0488 74.8627 50.0488 77.2045C50.0488 79.5455 52.4249 81.4441 55.3561 81.4441C58.2874 81.4441 60.6635 79.5455 60.6635 77.2045Z' fill='%23FF83B4'/%3e%3cpath opacity='0.5' d='M93.9499 77.2045C93.9499 74.8627 91.5739 72.9648 88.6426 72.9648C85.712 72.9648 83.3359 74.8627 83.3359 77.2045C83.3359 79.5455 85.712 81.4441 88.6426 81.4441C91.5739 81.4441 93.9499 79.5455 93.9499 77.2045Z' fill='%23FF83B4'/%3e%3cpath d='M71.9988 76.516C70.2801 76.516 68.5613 75.9577 67.1272 74.8417C66.5478 74.3911 66.4424 73.554 66.8923 72.9727C67.3414 72.3915 68.176 72.2858 68.7554 72.7363C70.6648 74.2227 73.3329 74.2227 75.243 72.7363C75.8224 72.2858 76.6562 72.3915 77.1061 72.9727C77.5552 73.554 77.4498 74.3911 76.8704 74.8417C75.4363 75.9577 73.7176 76.516 71.9988 76.516Z' fill='%23454545'/%3e%3cpath d='M58.6251 73.96C58.3276 73.5222 57.8939 73.469 57.718 73.469C57.5421 73.469 57.101 73.5168 56.811 73.96C56.4081 74.5749 55.585 74.746 54.972 74.3419C54.3591 73.9384 54.1885 73.1121 54.5914 72.4972C55.2849 71.4378 56.4538 70.8047 57.718 70.8047C58.9822 70.8047 60.1511 71.4378 60.8453 72.4972C61.2475 73.1121 61.077 73.9384 60.464 74.3419C60.2391 74.49 59.2454 74.8739 58.6251 73.96Z' fill='%23454545'/%3e%3cpath d='M87.1876 73.96C86.8901 73.5222 86.4571 73.469 86.2805 73.469C86.1046 73.469 85.6642 73.5168 85.3741 73.96C84.9713 74.5749 84.1475 74.746 83.5345 74.3419C82.9216 73.9384 82.751 73.1121 83.1539 72.4972C83.8481 71.4378 85.017 70.8047 86.2812 70.8047C87.5447 70.8047 88.7136 71.4378 89.4078 72.4972C89.8107 73.1121 89.6401 73.9384 89.0272 74.3419C88.8022 74.49 87.8086 74.8739 87.1876 73.96Z' fill='%23454545'/%3e%3ccircle cx='72' cy='72' r='72' fill='%23BBE3D7'/%3e%3cpath d='M57.8627 78L65 85.1367C65 85.1367 58.3298 97.4142 46.3849 109.359C42.1198 113.625 35.8091 114.23 32.2895 110.71C28.7706 107.19 29.3753 100.88 33.6404 96.6145C45.5853 84.6696 57.8627 78 57.8627 78Z' fill='%236670A5'/%3e%3cpath d='M49 83.6111C50.3607 85.6362 51.9273 87.5447 53.691 89.3083C55.4553 91.072 57.3631 92.6393 59.3882 94C63.0565 88.8161 65 85.239 65 85.239L57.7604 78C57.7604 78 54.1839 79.9435 49 83.6111Z' fill='%237A86C6'/%3e%3cpath d='M113 62.5C113 80.4489 98.4489 95 80.5 95C62.5511 95 48 80.4489 48 62.5C48 44.5504 62.5511 30 80.5 30C98.4489 30 113 44.5504 113 62.5Z' fill='%236670A5'/%3e%3cpath d='M104 62.5003C104 75.4788 93.4787 86 80.5 86C67.5213 86 57 75.4788 57 62.5003C57 49.5218 67.5213 39 80.5 39C93.4787 39 104 49.5218 104 62.5003Z' fill='%23CCECF9'/%3e%3cpath d='M66.5 64C65.6716 64 65 63.3273 65 62.4976V59.5024C65 58.6727 65.6716 58 66.5 58C67.3284 58 68 58.6727 68 59.5024V62.4974C68.0002 63.3272 67.3284 64 66.5 64Z' fill='%232D2D2D'/%3e%3cpath d='M94.5 64C93.6716 64 93 63.3273 93 62.4976V59.5024C93 58.6727 93.6716 58 94.5 58C95.3284 58 96 58.6727 96 59.5024V62.4974C96.0002 63.3272 95.3284 64 94.5 64Z' fill='%232D2D2D'/%3e%3cpath d='M80.5002 69C78.5064 69 76.6346 68.1213 75.3655 66.5887C74.828 65.9395 74.8906 64.9532 75.5057 64.3859C76.1208 63.8187 77.0552 63.8846 77.5928 64.5338C78.3 65.3879 79.3596 65.8776 80.5001 65.8776C81.6403 65.8776 82.6999 65.3879 83.4071 64.5338C83.9447 63.8846 84.8791 63.8183 85.4943 64.3859C86.1094 64.9532 86.1722 65.9395 85.6344 66.5887C84.3657 68.1213 82.4941 69 80.5002 69Z' fill='%232D2D2D'/%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cclipPath id='clip0_1866_119823'%3e%3crect width='144' height='144' fill='white'/%3e%3c/clipPath%3e%3cclipPath id='clip1_1866_119823'%3e%3crect width='144' height='144' fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e";
+
+var img$5 = "data:image/svg+xml,%3csvg width='144' height='144' viewBox='0 0 144 144' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M72 144C111.765 144 144 111.765 144 72C144 32.2355 111.765 0 72 0C32.2355 0 0 32.2355 0 72C0 111.765 32.2355 144 72 144Z' fill='%236ABFA5'/%3e%3cpath d='M76.975 32.7732C79.9117 37.5004 83.0276 42.9368 86.1287 48.7329C87.8031 51.8633 90.8123 54.0548 94.2988 54.6825C100.469 55.7938 106.31 56.9717 111.465 58.1712C115.702 59.1572 117.426 64.2717 114.653 67.6338C111.028 72.0263 106.95 76.7279 102.457 81.5292C100.104 84.0461 98.9851 87.4836 99.4054 90.909C100.173 97.1657 100.778 103.076 101.239 108.507C101.61 112.876 97.2381 116.105 93.1944 114.44C87.6662 112.163 82.6966 109.553 77.0542 106.776C73.8839 105.217 70.1732 105.197 66.9841 106.72C61.3559 109.408 56.0667 111.994 50.9051 114.19C46.8445 115.918 42.404 112.698 42.7799 108.29C43.2385 102.918 43.8374 97.0822 44.5947 90.909C45.015 87.4829 43.8971 84.0454 41.5426 81.5286C37.051 76.7273 32.9716 72.0256 29.3475 67.6331C26.5747 64.271 28.2981 59.1565 32.5352 58.1705C37.6902 56.9711 43.5319 55.7931 49.7019 54.6819C53.1878 54.0542 56.1969 51.8626 57.872 48.7322C60.9725 42.9362 64.0884 37.4997 67.0257 32.7725C69.3225 29.0757 74.6775 29.0757 76.975 32.7732Z' fill='%23EDFFF9'/%3e%3cpath opacity='0.5' d='M60.6643 77.204C60.6643 74.8623 58.2883 72.9644 55.357 72.9644C52.4257 72.9644 50.0497 74.8623 50.0497 77.204C50.0497 79.545 52.4257 81.4436 55.357 81.4436C58.2883 81.4436 60.6643 79.545 60.6643 77.204Z' fill='%23FF83B4'/%3e%3cpath opacity='0.5' d='M93.9503 77.204C93.9503 74.8623 91.5743 72.9644 88.643 72.9644C85.7124 72.9644 83.3364 74.8623 83.3364 77.204C83.3364 79.545 85.7124 81.4436 88.643 81.4436C91.5743 81.4436 93.9503 79.545 93.9503 77.204Z' fill='%23FF83B4'/%3e%3cpath d='M72 76.516C70.2813 76.516 68.5625 75.9577 67.1285 74.8417C66.5491 74.3911 66.4437 73.554 66.8935 72.9727C67.3426 72.3915 68.1772 72.2858 68.7566 72.7363C70.666 74.2227 73.3341 74.2227 75.2442 72.7363C75.8236 72.2858 76.6575 72.3915 77.1073 72.9727C77.5564 73.554 77.451 74.3911 76.8716 74.8417C75.4375 75.9577 73.7188 76.516 72 76.516Z' fill='%23454545'/%3e%3cpath d='M58.626 73.96C58.3286 73.5222 57.8949 73.469 57.719 73.469C57.5431 73.469 57.102 73.5168 56.8119 73.96C56.4091 74.5749 55.586 74.746 54.973 74.3419C54.36 73.9384 54.1895 73.1121 54.5923 72.4972C55.2859 71.4378 56.4548 70.8047 57.719 70.8047C58.9832 70.8047 60.1521 71.4378 60.8463 72.4972C61.2485 73.1121 61.0779 73.9384 60.465 74.3419C60.24 74.49 59.2464 74.8739 58.626 73.96Z' fill='%23454545'/%3e%3cpath d='M87.1882 73.96C86.8907 73.5222 86.4577 73.469 86.2811 73.469C86.1052 73.469 85.6648 73.5168 85.3747 73.96C84.9719 74.5749 84.1481 74.746 83.5351 74.3419C82.9222 73.9384 82.7516 73.1121 83.1545 72.4972C83.8487 71.4378 85.0176 70.8047 86.2818 70.8047C87.5453 70.8047 88.7142 71.4378 89.4084 72.4972C89.8113 73.1121 89.6407 73.9384 89.0278 74.3419C88.8028 74.49 87.8092 74.8739 87.1882 73.96Z' fill='%23454545'/%3e%3c/svg%3e";
+
+const imageSrc = {
+  "no-open-alerts": img$7,
+  "search-not-found": img$6,
+  "no-notes-found": img$5
+};
+const EmptyListMessage = ({ text, imageName, dataTestId = "empty-list-message", className }) => {
+  return jsxRuntime.jsxs("div", { className: classNames__default.default("ui:flex ui:flex-col ui:items-center", className), "data-test-id": dataTestId, children: [imageName && jsxRuntime.jsx("img", { className: "ui:mb-2.5", alt: "", src: imageSrc[imageName] }), jsxRuntime.jsx(Text, { className: "ui:text-center", children: text })] });
+};
+
+var img$4 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='68' height='20' viewBox='0 0 68 20'%3e %3cg fill='none' fill-rule='nonzero'%3e %3ccircle cx='10' cy='10' r='10' fill='%23F09'%3e %3canimate attributeName='opacity' dur='2s' values='1%3b0.6%3b1' repeatCount='indefinite' begin='0.1'/%3e %3canimate attributeName='r' dur='2s' repeatCount='indefinite' values='10%3b8%3b10' begin='0.1'/%3e %3c/circle%3e %3ccircle cx='34' cy='10' r='10' fill='%236ABFA5'%3e %3canimate attributeName='opacity' dur='2s' values='1%3b0.6%3b1' repeatCount='indefinite' begin='0.6'/%3e %3canimate attributeName='r' dur='2s' repeatCount='indefinite' values='10%3b8%3b10' begin='0.6'/%3e %3c/circle%3e %3ccircle cx='58' cy='10' r='10' fill='%236670A5'%3e %3canimate attributeName='opacity' dur='2s' values='1%3b0.6%3b1' repeatCount='indefinite' begin='1.1'/%3e %3canimate attributeName='r' dur='2s' repeatCount='indefinite' values='10%3b8%3b10' begin='1.1'/%3e %3c/circle%3e %3c/g%3e%3c/svg%3e";
+
+var img$3 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='margin: auto%3b background: none%3b display: block%3b shape-rendering: auto%3b' width='200px' height='200px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3e%3ccircle cx='50' cy='50' fill='none' stroke='%23009fe3' stroke-width='16' r='36' stroke-dasharray='169.64600329384882 58.548667764616276'%3e %3canimateTransform attributeName='transform' type='rotate' repeatCount='indefinite' dur='1.1111111111111112s' values='0 50 50%3b360 50 50' keyTimes='0%3b1'%3e%3c/animateTransform%3e%3c/circle%3e%3c/svg%3e";
+
+var img$2 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8'%3f%3e%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='margin: auto%3b background: none%3b display: block%3b shape-rendering: auto%3b' width='200px' height='200px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3e%3ccircle cx='50' cy='50' fill='none' stroke='%23cbd5e1' stroke-width='16' r='36' stroke-dasharray='169.64600329384882 58.548667764616276'%3e %3canimateTransform attributeName='transform' type='rotate' repeatCount='indefinite' dur='1.1111111111111112s' values='0 50 50%3b360 50 50' keyTimes='0%3b1'%3e%3c/animateTransform%3e%3c/circle%3e%3c!-- %5bldio%5d generated by https://loading.io/ --%3e%3c/svg%3e";
+
+var css_248z$7 = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.cweb-loading {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.cweb-loading .cweb-loading-text {\n  margin-bottom: 24px;\n}\n.cweb-loading.as-modal {\n  position: fixed;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  z-index: 9999;\n  background-color: rgba(255, 255, 255, 0.6);\n}\n.cweb-loading.as-modal .cweb-loading-panel {\n  position: relative;\n  width: 320px;\n  min-height: 120px;\n  border-radius: 4px;\n  padding: 16px;\n  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.36);\n  background-color: #ffffff;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: center;\n}\n.cweb-loading.as-modal .cweb-loading-panel:before {\n  position: absolute;\n  content: \"\";\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 1;\n  height: 3px;\n  background-color: #6abfa5;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n}";
+styleInject(css_248z$7);
+
+function LoadingIndicator(_a) {
+  var { asModal = false, asSpinner = false, className = "", spinnerColor = "blue", dataTestId = "loading-indicator" } = _a, restProps = __rest(_a, ["asModal", "asSpinner", "className", "spinnerColor", "dataTestId"]);
+  const spinnerToRender = spinnerColor === "blue" ? img$3 : img$2;
+  const containerClassName = classNames__default.default("cweb-loading", className, {
+    "as-modal": asModal
+  });
+  return jsxRuntime.jsx("div", Object.assign({ "aria-label": "Loading" }, restProps, { className: containerClassName, "data-test-id": dataTestId, role: "progressbar", children: jsxRuntime.jsx("img", { alt: "", src: asSpinner ? spinnerToRender : img$4, "data-chromatic": "ignore", className: classNames__default.default("ui:fill-current ui:stroke-current ui:text-gray-600", {
+    "ui:h-4 ui:w-4": asSpinner,
+    "ui:h-12 ui:w-12": !asSpinner
+  }) }) }));
+}
+
 function isTableFieldText(content) {
   return "text" in content || "tag" in content || "description" in content;
 }
@@ -3709,7 +3225,7 @@ function TableBodyRowDataCell(props) {
     if (!action) {
       return null;
     }
-    return jsxRuntime.jsx(TertiaryButton, { "data-test-id": `${action.key}-button`, className: "ui:ml-2 ui:first:ml-0", icon: action.icon, isDisabled: action.isDisabled, title: action.title, onClick: () => {
+    return jsxRuntime.jsx(TertiaryButton, { "data-test-id": `${action.key}-button`, className: "ui:ml-2 ui:first:ml-0", leadingIcon: action.icon ? jsxRuntime.jsx(IconComponentOrKey, { name: action.icon }) : void 0, disabled: action.isDisabled, title: action.title, onClick: () => {
       action.handleClick(props.item);
     } }, action.key);
   }) })] });
@@ -3830,8 +3346,8 @@ const PaginationMenuSmall = (props) => {
   return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TertiaryButton, { "aria-label": localization.previous, "data-test-id": "prev-button", leadingIcon: jsxRuntime.jsx(ChevronLeftIcon, {}), "data-page": props.currentPageNumber - 1, onClick: handleOnChange, disabled: props.currentPageNumber === 1 }), jsxRuntime.jsx(Text, { className: "ui:ml-4", variant: "sm", color: "slate-500", children: `${props.currentPageNumber} / ${props.pageCount}` }), jsxRuntime.jsx(TertiaryButton, { className: "ui:ml-4", "aria-label": localization.next, "data-test-id": "next-button", leadingIcon: jsxRuntime.jsx(ChevronRightIcon, {}), disabled: props.currentPageNumber === props.pageCount, "data-page": props.currentPageNumber + 1, onClick: handleOnChange })] });
 };
 
-var css_248z$5 = ".styled-select {\n  appearance: none;\n}\n.styled-select::picker-icon {\n  appearance: none;\n}";
-styleInject(css_248z$5);
+var css_248z$6 = ".styled-select {\n  appearance: none;\n}\n.styled-select::picker-icon {\n  appearance: none;\n}";
+styleInject(css_248z$6);
 
 const StyledSelect = React__namespace.default.forwardRef((_a, ref) => {
   var { children, suffix, prefix, className, width = "full", height = "lg", isError } = _a, attributes = __rest(_a, ["children", "suffix", "prefix", "className", "width", "height", "isError"]);
@@ -3932,7 +3448,7 @@ const PaginationMenuCursor = (props) => {
 
 const Wrapper = ({ className, children }) => jsxRuntime.jsx(Stack, { axis: "x", align: "center", className: classNames__default.default(className), justify: "between", width: "full", children });
 const PaginationMenu = (props) => {
-  if (props.type === "small" || props.small) {
+  if (props.type === "small") {
     return jsxRuntime.jsx(Wrapper, { className: props.className, children: jsxRuntime.jsx(PaginationMenuSmall, { localization: props.localization, pageCount: props.pageCount, currentPageNumber: props.currentPageNumber, pageSize: props.pageSize, onChange: props.onChange }) });
   }
   if (props.type === "cursor") {
@@ -4301,8 +3817,8 @@ const NavLayout = (props) => {
   }), children })] })] })] }));
 };
 
-var css_248z$4 = ".cweb-page {\n  width: 100%;\n  max-width: 1140px;\n  margin: 32px auto 0 auto;\n}\n.cweb-page .cweb-page-breadcrumbs {\n  margin-bottom: 16px;\n}\n.cweb-page .page-spinner {\n  margin-left: 8px;\n  margin-bottom: 4px;\n}\n.cweb-page .page-spinner img {\n  width: 21px;\n}\n.cweb-page .cweb-page-header {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  flex-grow: 0;\n}\n.cweb-page .cweb-page-header .cweb-page-title {\n  display: inline;\n}\n.cweb-page .cweb-page-header.accessory-right {\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n}\n@media screen and (max-width: 426px) {\n  .cweb-page .cweb-page-header.accessory-bottom {\n    max-width: 75vw;\n  }\n  .cweb-page .cweb-page-header.accessory-bottom img {\n    max-width: 10vw;\n  }\n  .cweb-page .cweb-page-header.accessory-bottom button p {\n    font-size: 4vw;\n  }\n}\n.cweb-page .cweb-page-header.accessory-bottom {\n  flex-direction: column;\n  align-items: flex-start;\n}\n.cweb-page .cweb-page-header.accessory-bottom .cweb-page-title {\n  margin-bottom: 8px;\n  display: inline;\n}";
-styleInject(css_248z$4);
+var css_248z$5 = ".cweb-page {\n  width: 100%;\n  max-width: 1140px;\n  margin: 32px auto 0 auto;\n}\n.cweb-page .cweb-page-breadcrumbs {\n  margin-bottom: 16px;\n}\n.cweb-page .page-spinner {\n  margin-left: 8px;\n  margin-bottom: 4px;\n}\n.cweb-page .page-spinner img {\n  width: 21px;\n}\n.cweb-page .cweb-page-header {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  flex-grow: 0;\n}\n.cweb-page .cweb-page-header .cweb-page-title {\n  display: inline;\n}\n.cweb-page .cweb-page-header.accessory-right {\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n}\n@media screen and (max-width: 426px) {\n  .cweb-page .cweb-page-header.accessory-bottom {\n    max-width: 75vw;\n  }\n  .cweb-page .cweb-page-header.accessory-bottom img {\n    max-width: 10vw;\n  }\n  .cweb-page .cweb-page-header.accessory-bottom button p {\n    font-size: 4vw;\n  }\n}\n.cweb-page .cweb-page-header.accessory-bottom {\n  flex-direction: column;\n  align-items: flex-start;\n}\n.cweb-page .cweb-page-header.accessory-bottom .cweb-page-title {\n  margin-bottom: 8px;\n  display: inline;\n}";
+styleInject(css_248z$5);
 
 function Page({
   dataTestId = "page",
@@ -4334,7 +3850,7 @@ function Page({
   return /* @__PURE__ */ jsxRuntime.jsx("div", { id, className: containerClassnames, children: /* @__PURE__ */ jsxRuntime.jsxs(NavLayout, { menu: navMenu, ...navLayoutProps, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: mergedPageClasses, "data-test-id": dataTestId, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: accessoryClasses, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Title, { "data-test-id": `${dataTestId}-title`, children: maybeTitle }),
+        /* @__PURE__ */ jsxRuntime.jsx(Heading, { variant: "h2", as: "h4", "data-test-id": `${dataTestId}-title`, children: maybeTitle }),
         isPolling && /* @__PURE__ */ jsxRuntime.jsx(
           LoadingIndicator,
           {
@@ -4481,6 +3997,9 @@ const Breadcrumbs = ({
   return jsxRuntime.jsx("ul", { "data-test-id": "breadcrumbs", className: "ui:flex ui:flex-row ui:flex-wrap ui:items-center", children: (isTruncated ? crumbsAndDivider : crumbs).map((crumbOrDividerProps) => isBreadcrumbDividerProps(crumbOrDividerProps) ? jsxRuntime.jsx(BreadcrumbDividerItem, Object.assign({}, crumbOrDividerProps), `divider-${truncatedCrumbs.map((crumb) => crumb.name).join("-")}`) : jsxRuntime.jsx(BreadcrumbItem, Object.assign({}, crumbOrDividerProps, { render: renderItem }), crumbOrDividerProps.key || crumbOrDividerProps.name)) });
 };
 
+var css_248z$4 = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n/**\n * Avenir is NOT declared here. The library does not ship font files, so any\n * `@font-face` written against a path in this repo resolves against the\n * consuming app's document and 404s there. Providing the typeface is the\n * consumer's responsibility; this rule only names it.\n */\n.title-avenir {\n  font-family: \"AvenirNextLTPro-Bold\", \"Roboto\", sans-serif;\n}\n\n.title-inter {\n  font-family: \"Inter\", \"Roboto\", \"Helvetica\", sans-serif;\n}";
+styleInject(css_248z$4);
+
 const PageTitle = (props) => {
   const { as: Component = "h2", className } = props, rest = __rest(props, ["as", "className"]);
   return jsxRuntime.jsx(Component, Object.assign({}, rest, { className: classNames__default.default(
@@ -4580,10 +4099,8 @@ const PageHeader = ({ navigation, breadcrumbs, dataTestId, accessories, isPollin
   ) })] }), jsxRuntime.jsx(Divider, { version: "v2" })] });
 };
 
-const CRUDPage = ({ submitButtonProps, cancelButtonProps, className, children, isLoading, isSubmitting, dataTestId = "page", title, header, steps, isMobileFriendly, belowHeader, accessory }) => {
+const CRUDPage = ({ className, children, isLoading, dataTestId = "page", title, header, steps, isMobileFriendly, belowHeader, accessory }) => {
   const mergedClasses = classNames__default.default("cweb-crud-page", "ui:w-full ui:mb-0 ui:mx-auto ui:pb-8", className);
-  const submitButton = accessory !== null && accessory !== void 0 ? accessory : submitButtonProps && jsxRuntime.jsx(PrimaryButton, Object.assign({ "data-test-id": "submit-button", role: "primary", isPending: isSubmitting }, submitButtonProps), "submit-button");
-  const cancelButton = accessory !== null && accessory !== void 0 ? accessory : cancelButtonProps && jsxRuntime.jsx(TertiaryButton, Object.assign({ "data-test-id": "cancel-button", role: "secondary" }, cancelButtonProps), "cancel-button");
   if (isLoading) {
     return jsxRuntime.jsx("div", { className: "cweb-crud-page-container", "data-test-id": dataTestId, children: jsxRuntime.jsxs("div", { className: classNames__default.default(mergedClasses, "ui:relative ui:overflow-y-hidden", "cweb-crud-page-loading-container"), style: { height: "90vh" }, children: [jsxRuntime.jsx(PageHeaderBlock, { header, title }), jsxRuntime.jsx(LoadingIndicator, { className: classNames__default.default("crud-page-loader", "ui:absolute ui:bottom-0 ui:left-0 ui:right-0 ui:top-0 ui:m-auto ui:h-12 ui:w-12"), asModal: false })] }) });
   }
@@ -4608,7 +4125,7 @@ const CRUDPage = ({ submitButtonProps, cancelButtonProps, className, children, i
       state = "current";
     }
     return jsxRuntime.jsx(Steps.Step, { title: `${steps.localization.step} ${stepNumber}`, subtitle: stepTitle, state }, stepTitle);
-  }) }), children, jsxRuntime.jsx(Line, { left: accessory ? accessoriesToRender : [submitButton, cancelButton], className: classNames__default.default("cweb-crud-page-button-line", "ui:mt-4 ui:border-t ui:border-solid ui:border-color-divider ui:pt-4") })] }) })] }) });
+  }) }), children, jsxRuntime.jsx(Line, { left: accessoriesToRender, className: classNames__default.default("cweb-crud-page-button-line", "ui:mt-4 ui:border-t ui:border-solid ui:border-color-divider ui:pt-4") })] }) })] }) });
 };
 const PageHeaderBlock = ({ header, title }) => {
   if (!title && !header) {
@@ -4616,7 +4133,7 @@ const PageHeaderBlock = ({ header, title }) => {
   }
   let pageHeaderComponent = null;
   if (title) {
-    pageHeaderComponent = jsxRuntime.jsx("div", { className: "ui:align-center ui:flex ui:flex-row ui:justify-start", children: jsxRuntime.jsx(PageHeader, { banner: null, title: jsxRuntime.jsxs("div", { className: "ui:flex ui:flex-nowrap ui:items-center ui:gap-m", children: [title.icon && jsxRuntime.jsx("img", { id: "title-icon", src: title.icon, className: "ui:h-9 ui:w-9", alt: "title icon" }), jsxRuntime.jsx(PageTitle, { children: title.text })] }) }) });
+    pageHeaderComponent = jsxRuntime.jsx("div", { className: "ui:align-center ui:flex ui:flex-row ui:justify-start", children: jsxRuntime.jsx(PageHeader, { banner: null, title: jsxRuntime.jsx("div", { className: "ui:flex ui:flex-nowrap ui:items-center ui:gap-m", children: jsxRuntime.jsx(PageTitle, { children: title.text }) }) }) });
   }
   if (header) {
     if (header.breadcrumbs !== void 0 && header.renderBreadcrumbItem !== void 0) {
@@ -4628,7 +4145,7 @@ const PageHeaderBlock = ({ header, title }) => {
   return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "ui:align-center ui:flex ui:flex-row ui:justify-start", children: pageHeaderComponent }), jsxRuntime.jsx(Divider, { version: "v2" })] });
 };
 
-var img = "data:image/svg+xml,%3csvg width='340' height='638' viewBox='0 0 340 638' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3crect x='8' y='60' width='50' height='8' rx='4' transform='rotate(90 8 60)' fill='%23111827'/%3e %3crect x='8' y='118' width='50' height='8' rx='4' transform='rotate(90 8 118)' fill='%23111827'/%3e %3crect x='340' y='67' width='30' height='8' rx='4' transform='rotate(90 340 67)' fill='%23111827'/%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M36 0C18.3269 0 4 14.3269 4 32V606C4 623.673 18.3269 638 36 638H304C321.673 638 336 623.673 336 606V32C336 14.3269 321.673 0 304 0H36ZM28 43C23.5817 43 20 46.5817 20 51V549C20 553.418 23.5817 557 28 557H312C316.418 557 320 553.418 320 549V51C320 46.5817 316.418 43 312 43H28Z' fill='%23374151'/%3e %3ccircle cx='171' cy='598' r='16' fill='%236B7280'/%3e %3ccircle cx='105.5' cy='22.5' r='4.5' fill='%236B7280'/%3e %3crect x='118' y='18' width='104' height='9' rx='4' fill='%239CA3AF'/%3e%3c/svg%3e";
+var img$1 = "data:image/svg+xml,%3csvg width='340' height='638' viewBox='0 0 340 638' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3crect x='8' y='60' width='50' height='8' rx='4' transform='rotate(90 8 60)' fill='%23111827'/%3e %3crect x='8' y='118' width='50' height='8' rx='4' transform='rotate(90 8 118)' fill='%23111827'/%3e %3crect x='340' y='67' width='30' height='8' rx='4' transform='rotate(90 340 67)' fill='%23111827'/%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M36 0C18.3269 0 4 14.3269 4 32V606C4 623.673 18.3269 638 36 638H304C321.673 638 336 623.673 336 606V32C336 14.3269 321.673 0 304 0H36ZM28 43C23.5817 43 20 46.5817 20 51V549C20 553.418 23.5817 557 28 557H312C316.418 557 320 553.418 320 549V51C320 46.5817 316.418 43 312 43H28Z' fill='%23374151'/%3e %3ccircle cx='171' cy='598' r='16' fill='%236B7280'/%3e %3ccircle cx='105.5' cy='22.5' r='4.5' fill='%236B7280'/%3e %3crect x='118' y='18' width='104' height='9' rx='4' fill='%239CA3AF'/%3e%3c/svg%3e";
 
 const useWindowDimensions = () => {
   const [height, setHeight] = React.useState(window.innerHeight);
@@ -4672,11 +4189,11 @@ const PreviewPhone = ({ className, children }) => {
     width: phoneWidth,
     height: phoneHeight,
     transform: `scale(${scale})`
-  }, children: [jsxRuntime.jsx("div", { className: "ui:h-full ui:px-5 ui:pb-20 ui:pt-11", children: jsxRuntime.jsx("div", { className: "ui:h-full ui:overflow-y-auto ui:bg-white", children }) }), jsxRuntime.jsx("img", { className: "ui:pointer-events-none ui:absolute ui:top-0", src: img, alt: "phone mockup" })] }) }) : jsxRuntime.jsx(jsxRuntime.Fragment, {});
+  }, children: [jsxRuntime.jsx("div", { className: "ui:h-full ui:px-5 ui:pb-20 ui:pt-11", children: jsxRuntime.jsx("div", { className: "ui:h-full ui:overflow-y-auto ui:bg-white", children }) }), jsxRuntime.jsx("img", { className: "ui:pointer-events-none ui:absolute ui:top-0", src: img$1, alt: "phone mockup" })] }) }) : jsxRuntime.jsx(jsxRuntime.Fragment, {});
 };
 
 const SectionHeader = ({ title, aside, isLoading = false }) => {
-  return jsxRuntime.jsxs(Stack, { axis: "x", as: "header", justify: "between", align: "center", width: "full", "data-test-id": "section-header", _p: "l", children: [jsxRuntime.jsxs(Stack, { axis: "x", justify: "center", align: "center", _gap: "m", children: [typeof title === "string" ? jsxRuntime.jsx(Title, { variant: "sm", children: title }) : title, isLoading && jsxRuntime.jsx(LoadingIndicator, { asSpinner: true })] }), aside] });
+  return jsxRuntime.jsxs(Stack, { axis: "x", as: "header", justify: "between", align: "center", width: "full", "data-test-id": "section-header", _p: "l", children: [jsxRuntime.jsxs(Stack, { axis: "x", justify: "center", align: "center", _gap: "m", children: [typeof title === "string" ? jsxRuntime.jsx(Heading, { variant: "h3", as: "h5", children: title }) : title, isLoading && jsxRuntime.jsx(LoadingIndicator, { asSpinner: true })] }), aside] });
 };
 
 const SectionFooter = ({ children }) => {
@@ -4705,7 +4222,7 @@ function SectionItemWithContent(props) {
   const { text, icon, className, iconClass, onClick } = props, rest = __rest(props, ["text", "icon", "className", "iconClass", "onClick"]);
   const mergedClasses = classNames__default.default("cweb-section-ui:bg-item", className);
   const iconClasses = classNames__default.default("ui:w-6 ui:h-6 ui:mr-4", iconClass);
-  return jsxRuntime.jsxs(SectionItem, Object.assign({ className: mergedClasses, onClick }, rest, { children: [icon && jsxRuntime.jsx("img", { className: iconClasses, src: icon, alt: "" }), jsxRuntime.jsx(Text, { text })] }));
+  return jsxRuntime.jsxs(SectionItem, Object.assign({ className: mergedClasses, onClick }, rest, { children: [icon && jsxRuntime.jsx("img", { className: iconClasses, src: icon, alt: "" }), jsxRuntime.jsx(Text, { children: text })] }));
 }
 
 var css_248z$2 = ".customized-select [class*=MenuList] [class*=option]::after {\n  position: absolute;\n  content: \"\";\n  background: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22%3E    %3Cg transform%3D%22translate(1.5%2C 0.5)%22%3E        %3Cpath fill%3D%22none%22 fill-rule%3D%22evenodd%22 stroke%3D%22%230074DD%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22 stroke-width%3D%222%22 d%3D%22M12.643 3.357L6.03 9.97l-2.674 2.674L0 9.286%22%2F%3E    %3C%2Fg%3E%3C%2Fsvg%3E\") no-repeat center;\n  right: 12px;\n  height: 1rem;\n  width: 1rem;\n}";
@@ -5000,7 +4517,7 @@ const SettingsMenuButton = (props) => {
     console.error("An icon component is required to use this component, please make sure to pass it as a prop. ");
     return jsxRuntime.jsx("span", { children: "Invalid props passed to this component." });
   }
-  return jsxRuntime.jsxs("div", { onClick: handleShowMenu, className: "ui:relative", children: [jsxRuntime.jsx(TertiaryButton, { icon: iconComponent, onClick: handleShowMenu, text: buttonTitle, "aria-label": buttonTitle ? void 0 : menuTitle !== null && menuTitle !== void 0 ? menuTitle : "Settings" }), jsxRuntime.jsxs("div", { ref: menuRef, className: classNames__default.default("ui:transform ui:cursor-default ui:transition-all ui:duration-300", "ui:absolute ui:-top-1 ui:z-30", "ui:max-h-78 ui:w-80 ui:overflow-y-auto ui:rounded", "ui:bg-white ui:shadow-md", "ui:border ui:border-slate-300", {
+  return jsxRuntime.jsxs("div", { onClick: handleShowMenu, className: "ui:relative", children: [jsxRuntime.jsx(TertiaryButton, { leadingIcon: React.createElement(iconComponent), onClick: handleShowMenu, "aria-label": buttonTitle ? void 0 : menuTitle !== null && menuTitle !== void 0 ? menuTitle : "Settings", children: buttonTitle }), jsxRuntime.jsxs("div", { ref: menuRef, className: classNames__default.default("ui:transform ui:cursor-default ui:transition-all ui:duration-300", "ui:absolute ui:-top-1 ui:z-30", "ui:max-h-78 ui:w-80 ui:overflow-y-auto ui:rounded", "ui:bg-white ui:shadow-md", "ui:border ui:border-slate-300", {
     "ui:-left-54": shiftMenuTo === "left",
     "ui:-right-54": shiftMenuTo === "right",
     "ui:-left-68": shiftMenuTo === "left-md",
@@ -5010,14 +4527,14 @@ const SettingsMenuButton = (props) => {
   }, {
     "ui:pointer-events-none ui:opacity-0": !showMenu,
     "ui:opacity-100": showMenu
-  }), children: [menuTitle && jsxRuntime.jsx("div", { className: "ui:h-11 ui:w-full ui:bg-slate-50 ui:p-3", children: jsxRuntime.jsx(Text, { type: "sm", className: "ui:uppercase", text: menuTitle }) }), innerConfiguration.map((innerConfig) => jsxRuntime.jsxs("div", { className: "ui:flex ui:h-11 ui:w-full ui:items-center ui:justify-between ui:p-3", children: [jsxRuntime.jsx("label", { htmlFor: innerConfig.itemId, children: jsxRuntime.jsx(Text, { text: innerConfig.itemName }) }), jsxRuntime.jsx(Checkbox, { name: innerConfig.itemName, id: innerConfig.itemId, type: "switch", isChecked: innerConfig.on, onChange: handleOnVisibilitySwitchChanged })] }, innerConfig.itemId))] })] });
+  }), children: [menuTitle && jsxRuntime.jsx("div", { className: "ui:h-11 ui:w-full ui:bg-slate-50 ui:p-3", children: jsxRuntime.jsx(Text, { variant: "sm", className: "ui:uppercase", children: menuTitle }) }), innerConfiguration.map((innerConfig) => jsxRuntime.jsxs("div", { className: "ui:flex ui:h-11 ui:w-full ui:items-center ui:justify-between ui:p-3", children: [jsxRuntime.jsx("label", { htmlFor: innerConfig.itemId, children: jsxRuntime.jsx(Text, { children: innerConfig.itemName }) }), jsxRuntime.jsx(Checkbox, { name: innerConfig.itemName, id: innerConfig.itemId, type: "switch", isChecked: innerConfig.on, onChange: handleOnVisibilitySwitchChanged })] }, innerConfig.itemId))] })] });
 };
 
 const SwitcherItem = ({ className, icon, ariaLabel, isSelected = false, isLast = false, name, onSelect }) => {
   return jsxRuntime.jsx("li", { role: "none", className: classNames__default.default("ui:flex ui:border-solid ui:border-border-neutral-secondary-default", { "ui:border-r": !isLast }), children: jsxRuntime.jsxs("button", { type: "button", "aria-pressed": isSelected, "aria-label": ariaLabel, onClick: onSelect, className: classNames__default.default("ui:flex ui:flex-row ui:cursor-pointer ui:appearance-none ui:items-center ui:gap-xxs ui:border-none ui:p-xxs", "ui:outline-none ui:transition ui:duration-150 ui:focus-visible:z-10 ui:focus-visible:ring-2 ui:focus-visible:ring-inset ui:focus-visible:ring-border-brand-primary-default", {
     "ui:bg-background-brand-secondary-default ui:text-text-brand-primary-default": isSelected,
     "ui:bg-background-neutral-secondary-default ui:text-text-neutral-secondary-default ui:hover:bg-background-neutral-secondary-hovered": !isSelected
-  }, className), children: [icon && jsxRuntime.jsx(IconComponentOrKey, { name: icon }), name && jsxRuntime.jsx(Text, { text: name, color: "current" })] }) });
+  }, className), children: [icon && jsxRuntime.jsx(IconComponentOrKey, { name: icon }), name && jsxRuntime.jsx(Text, { color: "current", children: name })] }) });
 };
 
 const Switcher = ({ selectedIndex = -1, onChange, className, itemClassName, items }) => {
@@ -5045,6 +4562,30 @@ const Switch = (props) => {
   }), children: jsxRuntime.jsx(RadixSwitch__namespace.Thumb, { className: classNames__default.default("ui:h-[20px] ui:w-[20px]", "ui:bg-white", "ui:transition-transform ui:duration-100 ui:will-change-transform", "ui:translate-x-1 ui:data-[state=checked]:translate-x-[32px]", "ui:block ui:rounded-full") }) });
 };
 
+var img = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3e%3cpath d='M18 16V2C18 0.9 17.1 0 16 0H2C0.9 0 0 0.9 0 2V16C0 17.1 0.9 18 2 18H16C17.1 18 18 17.1 18 16ZM5.9 10.98L8 13.51L11.1 9.52C11.3 9.26 11.7 9.26 11.9 9.53L15.41 14.21C15.66 14.54 15.42 15.01 15.01 15.01H3.02C2.6 15.01 2.37 14.53 2.63 14.2L5.12 11C5.31 10.74 5.69 10.73 5.9 10.98Z' fill='%23D1D5DB'/%3e%3c/svg%3e";
+
+const ImageInner = (_a) => {
+  var { src, alt = "", className, children = null, onClick, showIconOnFailure = true, wrapperClassName } = _a, otherProps = __rest(_a, ["src", "alt", "className", "children", "onClick", "showIconOnFailure", "wrapperClassName"]);
+  const [isError, setIsError] = React.useState(false);
+  if (!src || isError) {
+    if (children) {
+      return jsxRuntime.jsx("span", { onClick, children });
+    }
+    if (!showIconOnFailure) {
+      return null;
+    }
+  }
+  return jsxRuntime.jsx(reactLazyLoadImageComponent.LazyLoadImage, Object.assign({ className: classNames__default.default(className), effect: "blur", useIntersectionObserver: true, placeholder: jsxRuntime.jsx("div", { className: "ui:flex ui:h-full ui:w-full ui:flex-row ui:items-center ui:justify-center ui:rounded", children: jsxRuntime.jsx("img", { src: img, alt: "image-icon" }) }), src, alt, onClick, onError: () => setIsError(true), wrapperClassName }, otherProps));
+};
+var Image$1 = reactLazyLoadImageComponent.trackWindowScroll(ImageInner);
+
+const isSubstring = (string, searchTerm, caseSensitive = false) => {
+  const trueString = typeof string !== "string" ? JSON.stringify(string) : string;
+  const stringToSearch = caseSensitive ? trueString : trueString === null || trueString === void 0 ? void 0 : trueString.toLowerCase();
+  const searchTermWithCase = caseSensitive ? searchTerm : searchTerm === null || searchTerm === void 0 ? void 0 : searchTerm.toLowerCase();
+  return (stringToSearch === null || stringToSearch === void 0 ? void 0 : stringToSearch.indexOf(searchTermWithCase)) > -1;
+};
+
 const useOnCloseAnimationFinished = ({
   /**
    * Reference to the dialog element
@@ -5211,8 +4752,13 @@ ModalDialog.Footer = Footer;
 ModalDialog.Actions = Actions;
 ModalDialog.useModalDialog = useModalDialog;
 
+const SearchInput = React__namespace.default.forwardRef((props, ref) => {
+  var _a;
+  return jsxRuntime.jsx(Input, Object.assign({}, props, { icon: "SearchIcon", type: "text", width: (_a = props.width) !== null && _a !== void 0 ? _a : "xl", clearable: true, ref }));
+});
+
 const ImageCategory = (props) => {
-  return jsxRuntime.jsxs("div", { className: "ui:mt-4 ui:w-full", children: [jsxRuntime.jsx(Text, { text: props.category.key }), jsxRuntime.jsx("div", { className: "ui:flex ui:flex-row ui:flex-wrap", children: props.images.map((option, index) => {
+  return jsxRuntime.jsxs("div", { className: "ui:mt-4 ui:w-full", children: [jsxRuntime.jsx(Text, { children: props.category.key }), jsxRuntime.jsx("div", { className: "ui:flex ui:flex-row ui:flex-wrap", children: props.images.map((option, index) => {
     const isSelected = option === props.highlightedImage;
     return jsxRuntime.jsx("button", { "data-test-id": `image-from-selector-${index.toString().padStart(2, "0")}`, "data-index": index, "data-src": option, onClick: props.handleImageClick, className: classNames__default.default("ui:m-2 ui:rounded ui:border ui:border-solid ui:border-slate-300 ui:p-2", {
       "ui:outline ui:outline-primary": isSelected,
@@ -5245,7 +4791,7 @@ const ImagePickerInner = ({
   innerRef
 }) => {
   var _a;
-  const placeholderImage = clearImageIndex !== void 0 && images[clearImageIndex] ? images[clearImageIndex] : img$7;
+  const placeholderImage = clearImageIndex !== void 0 && images[clearImageIndex] ? images[clearImageIndex] : img;
   const isTypeCompact = type === "compact";
   const [search, setSearch] = React.useState("");
   const [filteredCategories, setFilteredCategories] = React.useState(categories);
@@ -5347,7 +4893,7 @@ const ImagePickerInner = ({
     var _a2;
     setIsImagesPanelOpen(false);
     (_a2 = fileInputRef.current) === null || _a2 === void 0 ? void 0 : _a2.click();
-  }, children: localisation.uploadImage }), jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", disabled: isDisabled, name: `uploaded-${name}`, accept: acceptedMimeTypes.join(","), onChange: uploadImage, className: "ui:hidden" })] }), isClearButtonVisible && selectedMedia !== placeholderImage && !isUploading && jsxRuntime.jsx(SecondaryButton, { text: localisation.clearSelection, isDisabled, isPending: isUploading, onClick: handleDeleteClick })] })] }), jsxRuntime.jsxs(ModalDialog, { open: isImagesPanelOpen, onClose: handleCloseModal, variant: "centered-dialog", size: "l", children: [jsxRuntime.jsxs(ModalDialog.Header, { children: [jsxRuntime.jsx(ModalDialog.Title, { children: localisation.modalTitle }), jsxRuntime.jsx(ModalDialog.CloseButton, { onClick: handleCloseModal })] }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(ModalDialog.Body, { children: jsxRuntime.jsxs(Stack, { axis: "y", _gap: "l", width: "full", className: "ui:max-h-135", children: [jsxRuntime.jsx(SearchInput, { name: "searchImages", className: "ui:w-full", value: search, placeholder: localisation.search, onChange: handleSearchChange }), jsxRuntime.jsx("div", { className: "ui:flex ui:w-full ui:flex-row ui:flex-wrap ui:items-center", children: filteredCategories === null || filteredCategories === void 0 ? void 0 : filteredCategories.map((category) => jsxRuntime.jsx(ImageCategory, { category, images: images === null || images === void 0 ? void 0 : images.filter((categoryImage) => categoryImage.includes(category.folder)), highlightedImage, handleImageClick, isTypeCompact }, category.folder)) })] }) }), jsxRuntime.jsx(ModalDialog.Footer, { children: jsxRuntime.jsx(ModalDialog.Actions, { width: "full", children: jsxRuntime.jsxs(Stack, { axis: "x", _gap: "m", justify: "end", width: "full", children: [jsxRuntime.jsx(SecondaryButton, { dataTestId: "modal-footer-trailing-secondary-button", onClick: handleCloseModal, children: localisation.cancel }), jsxRuntime.jsx(PrimaryButton, { dataTestId: "modal-footer-trailing-primary-button", onClick: handleConfirmSelection, children: localisation.selectButton })] }) }) })] })] });
+  }, children: localisation.uploadImage }), jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", disabled: isDisabled, name: `uploaded-${name}`, accept: acceptedMimeTypes.join(","), onChange: uploadImage, className: "ui:hidden" })] }), isClearButtonVisible && selectedMedia !== placeholderImage && !isUploading && jsxRuntime.jsx(SecondaryButton, { disabled: isDisabled, isPending: isUploading, onClick: handleDeleteClick, children: localisation.clearSelection })] })] }), jsxRuntime.jsxs(ModalDialog, { open: isImagesPanelOpen, onClose: handleCloseModal, variant: "centered-dialog", size: "l", children: [jsxRuntime.jsxs(ModalDialog.Header, { children: [jsxRuntime.jsx(ModalDialog.Title, { children: localisation.modalTitle }), jsxRuntime.jsx(ModalDialog.CloseButton, { onClick: handleCloseModal })] }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(ModalDialog.Body, { children: jsxRuntime.jsxs(Stack, { axis: "y", _gap: "l", width: "full", className: "ui:max-h-135", children: [jsxRuntime.jsx(SearchInput, { name: "searchImages", className: "ui:w-full", value: search, placeholder: localisation.search, onChange: handleSearchChange }), jsxRuntime.jsx("div", { className: "ui:flex ui:w-full ui:flex-row ui:flex-wrap ui:items-center", children: filteredCategories === null || filteredCategories === void 0 ? void 0 : filteredCategories.map((category) => jsxRuntime.jsx(ImageCategory, { category, images: images === null || images === void 0 ? void 0 : images.filter((categoryImage) => categoryImage.includes(category.folder)), highlightedImage, handleImageClick, isTypeCompact }, category.folder)) })] }) }), jsxRuntime.jsx(ModalDialog.Footer, { children: jsxRuntime.jsx(ModalDialog.Actions, { width: "full", children: jsxRuntime.jsxs(Stack, { axis: "x", _gap: "m", justify: "end", width: "full", children: [jsxRuntime.jsx(SecondaryButton, { dataTestId: "modal-footer-trailing-secondary-button", onClick: handleCloseModal, children: localisation.cancel }), jsxRuntime.jsx(PrimaryButton, { dataTestId: "modal-footer-trailing-primary-button", onClick: handleConfirmSelection, children: localisation.selectButton })] }) }) })] })] });
 };
 const MediaPicker = React__namespace.default.forwardRef((props, ref) => {
   var _a, _b;
@@ -5355,7 +4901,7 @@ const MediaPicker = React__namespace.default.forwardRef((props, ref) => {
   return jsxRuntime.jsx(ImagePickerInner, Object.assign({}, mappedProps, { innerRef: ref }));
 });
 
-const TagGroup = ({ children, tags, tagSize = "large", className }) => jsxRuntime.jsxs("div", { className: classNames__default.default("ui:flex ui:flex-row ui:flex-wrap ui:gap-2", className), children: [children, tags === null || tags === void 0 ? void 0 : tags.map((tag) => jsxRuntime.jsx(Tag, Object.assign({ _size: tagSize }, tag)))] });
+const TagGroup = ({ children, className }) => jsxRuntime.jsx("div", { className: classNames__default.default("ui:flex ui:flex-row ui:flex-wrap ui:gap-2", className), children });
 
 const typeIcons$1 = {
   info: BookOpenIcon,
@@ -5391,16 +4937,16 @@ const InstrumentCard = ({ type, title, category, meta, id, copyIdLabel = "Copy I
   }, className: "ui:relative ui:z-10 ui:flex ui:cursor-pointer ui:focus-visible:outline-primary", children: jsxRuntime.jsx(Tag, { _size: "small", _variant: "bordered", _leadingIcon: jsxRuntime.jsx(CopyToClipboardIcon, { "aria-hidden": true }), children: id }) })] })] }), count !== void 0 && jsxRuntime.jsx(Tag, { _size: "small", _variant: "flat", _leadingIcon: jsxRuntime.jsx(CopyToClipboardIcon, { "aria-hidden": true }), className: "ui:shrink-0", children: jsxRuntime.jsx(Text, { variant: "body-small-bold", as: "span", children: count }) })] });
 };
 
-const variantClasses = {
-  h1: "ui-typo-h1 ui:text-text-brand-primary-default",
-  h2: "ui-typo-h2 ui:text-text-neutral-primary-default",
-  h3: "ui-typo-h3 ui:text-text-neutral-primary-default",
-  h4: "ui-typo-h4 ui:text-text-neutral-primary-default"
-};
-const Heading = (_a) => {
-  var { as: Element = "h2", variant = "h2", className, children } = _a, rest = __rest(_a, ["as", "variant", "className", "children"]);
-  return jsxRuntime.jsx(Element, Object.assign({ className: classNames__default.default(variantClasses[variant], className) }, rest, { children }));
-};
+const DragHandle = React.forwardRef((_a, ref) => {
+  var { dataTestId, className: classes, grabbing, disabled = false, label = "Drag to reorder" } = _a, props = __rest(_a, ["dataTestId", "className", "grabbing", "disabled", "label"]);
+  const className = classNames__default.default(classes, "ui:py-2 ui:focus:outline-primary", {
+    "ui:cursor-grab": !grabbing && !disabled,
+    "ui:cursor-grabbing ui:shadow-sm ui:bg-slate-200": grabbing && !disabled,
+    "ui:hover:bg-slate-200 ui:hover:shadow-sm ui:transition ui:duration-200 ui:rounded": !disabled,
+    "ui:cursor-not-allowed": disabled
+  });
+  return jsxRuntime.jsx("button", Object.assign({ ref, "aria-label": label }, props, { tabIndex: 0, className, "data-test-id": dataTestId !== null && dataTestId !== void 0 ? dataTestId : "dragHandle", children: jsxRuntime.jsx(Icon, { name: "DragIndicatorIcon", className: disabled ? "ui:text-slate-300" : "ui:text-slate-400" }) }));
+});
 
 const typeIcons = {
   information: ActionInformationColoredIcon,
@@ -5584,7 +5130,7 @@ const LinkTooltip = ({ linkElement, editorInstance, onClose, translations }) =>
     top: "anchor(bottom)",
     left: "anchor(left)",
     marginTop: "8px"
-  }, children: jsxRuntime.jsx(Card, { borderRadius: "s", elevation: "large", className: "ui:max-w-80", padding: false, border: true, children: jsxRuntime.jsxs(Stack, { width: "full", align: "stretch", children: [jsxRuntime.jsx(Box, { _p: "m", children: jsxRuntime.jsxs(Text, { children: [translations.visitUrlLabel, " ", jsxRuntime.jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: "ui:text-blue-600 ui:underline ui:text-sm ui:overflow-hidden ui:text-ellipsis ui:whitespace-nowrap hover:ui:text-blue-700", children: url })] }) }), jsxRuntime.jsx(Divider, { version: "v2" }), jsxRuntime.jsxs(Stack, { axis: "x", _gap: "base", _p: "m", children: [jsxRuntime.jsx(TertiaryButton, { onClick: handleEditLink, text: translations.editButtonText, size: "medium" }), jsxRuntime.jsx(TertiaryButton, { onClick: handleRemoveLink, text: translations.removeButtonText, size: "medium" }), jsxRuntime.jsx(TertiaryButton, { onClick: onClose, text: translations.closeButtonText, size: "medium" })] })] }) }) });
+  }, children: jsxRuntime.jsx(Card, { borderRadius: "s", elevation: "large", className: "ui:max-w-80", padding: false, border: true, children: jsxRuntime.jsxs(Stack, { width: "full", align: "stretch", children: [jsxRuntime.jsx(Box, { _p: "m", children: jsxRuntime.jsxs(Text, { children: [translations.visitUrlLabel, " ", jsxRuntime.jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: "ui:text-blue-600 ui:underline ui:text-sm ui:overflow-hidden ui:text-ellipsis ui:whitespace-nowrap hover:ui:text-blue-700", children: url })] }) }), jsxRuntime.jsx(Divider, { version: "v2" }), jsxRuntime.jsxs(Stack, { axis: "x", _gap: "base", _p: "m", children: [jsxRuntime.jsx(TertiaryButton, { onClick: handleEditLink, size: "medium", children: translations.editButtonText }), jsxRuntime.jsx(TertiaryButton, { onClick: handleRemoveLink, size: "medium", children: translations.removeButtonText }), jsxRuntime.jsx(TertiaryButton, { onClick: onClose, size: "medium", children: translations.closeButtonText })] })] }) }) });
 };
 
 const TextEditorToolbarButton = ({ option, hasTextSelected, editor, translations }) => {
@@ -6034,20 +5580,6 @@ const TextEditor = (_a) => {
   return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Card, Object.assign({ padding: false, border: true, borderRadius: "xs", backgroundColor: "base" }, attrs, { children: [jsxRuntime.jsx(Card.TopBar, { children: jsxRuntime.jsx(Card.Actions, { className: "ui:justify-start", children: jsxRuntime.jsx(TextEditorToolbar, { toolbarId, toolbar, hasTextSelected, editor, translations }) }) }), jsxRuntime.jsx(Divider, { version: "v2" }), jsxRuntime.jsx(react.EditorContent, { editor }), jsxRuntime.jsx("div", {})] })), linkTooltip && editor && jsxRuntime.jsx(LinkTooltip, { linkElement: linkTooltip, editorInstance: editor, onClose: () => setLinkTooltip(null), translations })] });
 };
 
-const TextLink = (props) => {
-  const className = classNames__default.default("ui:text-sm ui:hover:underline", {
-    "ui:cursor-pointer": props.enabled,
-    "ui:cursor-default": !props.enabled
-  }, {
-    "ui:text-primary": props.enabled,
-    "ui:text-slate-800": !props.enabled
-  }, {
-    "ui:hover:text-primary-dark": props.enabled,
-    "ui:hover:text-slate-900": !props.enabled
-  });
-  return jsxRuntime.jsx("a", { href: props.href, rel: props.rel, target: props.target, onClick: props.onClick, className: classNames__default.default(className, props.className), children: props.text });
-};
-
 const TimelineStep = React__namespace.default.forwardRef(({ content, type = "base", dataTestId, title }, ref) => {
   const isWideStep = type === "wide";
   const borderClassNames = "ui:ml-4 ui:pl-6 ui:border-primary ui:border-l-2";
@@ -6055,7 +5587,7 @@ const TimelineStep = React__namespace.default.forwardRef(({ content, type = "bas
     [borderClassNames]: !isWideStep,
     "ui:bg-white ui:rounded-lg ui:overflow-hidden": isWideStep
   });
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isWideStep && jsxRuntime.jsx("div", { className: classNames__default.default(borderClassNames, "ui:h-4 ui:first:h-0") }), jsxRuntime.jsxs("div", { className: containerClassNames, "data-test-id": dataTestId === void 0 ? "" : `timeline-step-${dataTestId}`, ref, children: [jsxRuntime.jsxs("div", { className: "ui:flex ui:flex-col", children: [title && jsxRuntime.jsx(Text, Object.assign({ type: "lg-strong", className: "ui:flex ui:h-13 ui:flex-row ui:items-center ui:border-b" }, typeof title === "object" ? title : { text: title })), content] }), jsxRuntime.jsx("div", { className: "ui:absolute ui:-left-2 ui:top-0 ui:-ml-px ui:flex ui:h-13 ui:flex-row ui:items-center", children: jsxRuntime.jsx("span", { className: classNames__default.default("ui:inline-block ui:h-4 ui:w-4 ui:rounded-lg", {
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isWideStep && jsxRuntime.jsx("div", { className: classNames__default.default(borderClassNames, "ui:h-4 ui:first:h-0") }), jsxRuntime.jsxs("div", { className: containerClassNames, "data-test-id": dataTestId === void 0 ? "" : `timeline-step-${dataTestId}`, ref, children: [jsxRuntime.jsxs("div", { className: "ui:flex ui:flex-col", children: [title && jsxRuntime.jsx(Text, Object.assign({ variant: "lg-strong", className: "ui:flex ui:h-13 ui:flex-row ui:items-center ui:border-b" }, typeof title === "object" ? title : { children: title })), content] }), jsxRuntime.jsx("div", { className: "ui:absolute ui:-left-2 ui:top-0 ui:-ml-px ui:flex ui:h-13 ui:flex-row ui:items-center", children: jsxRuntime.jsx("span", { className: classNames__default.default("ui:inline-block ui:h-4 ui:w-4 ui:rounded-lg", {
     "ui:hidden": ["wide", "withoutDot"].includes(type),
     "ui:bg-primary": "base" === type,
     "ui:border-4 ui:border-primary ui:bg-white": "emptyDot" === type
@@ -6072,7 +5604,7 @@ const TimelineHeader = ({ title, buttons, withBorder = true }) => {
     "ui:justify-end": !title && hasButtons,
     "ui:border-b": withBorder
   });
-  return jsxRuntime.jsxs("div", { "data-test-id": "timeline-header", className, children: [title && jsxRuntime.jsx(Title, Object.assign({ variant: "sm" }, typeof title === "object" ? title : { text: title })), hasButtons && jsxRuntime.jsx("div", { className: "ui:flex ui:flex-row ui:space-x-4", children: buttons.map(({ buttonType: ButtonComponent, buttonProps }) => jsxRuntime.jsx(ButtonComponent, Object.assign({}, buttonProps))) })] });
+  return jsxRuntime.jsxs("div", { "data-test-id": "timeline-header", className, children: [title && (typeof title === "string" ? jsxRuntime.jsx(Heading, { variant: "h3", as: "h5", children: title }) : title), hasButtons && jsxRuntime.jsx("div", { className: "ui:flex ui:flex-row ui:space-x-4", children: buttons.map(({ buttonType: ButtonComponent, buttonProps }) => jsxRuntime.jsx(ButtonComponent, Object.assign({}, buttonProps))) })] });
 };
 
 const Timeline = ({ headerProps, steps, loadMoreButtonProps, dataTestId = "timeline", emptyHeroProps }) => {
@@ -6147,16 +5679,16 @@ UnorderedList.Item = Item$1;
 UnorderedList.Padding = Padding;
 UnorderedList.Indent = Indent;
 
-const FullPageModalHeader = ({ primaryButtonProps, actions, title }) => {
-  return jsxRuntime.jsxs("div", { className: "ui:flex ui:h-19 ui:flex-row ui:items-center ui:justify-between ui:bg-white ui:px-6", children: [jsxRuntime.jsx(PageTitle, { children: title }), primaryButtonProps && !actions && jsxRuntime.jsx(PrimaryButton, Object.assign({ "data-test-id": "modal-primary-button" }, primaryButtonProps)), actions && jsxRuntime.jsx("div", { children: actions })] });
+const FullPageModalHeader = ({ actions, title }) => {
+  return jsxRuntime.jsxs("div", { className: "ui:flex ui:h-19 ui:flex-row ui:items-center ui:justify-between ui:bg-white ui:px-6", children: [jsxRuntime.jsx(PageTitle, { children: title }), actions && jsxRuntime.jsx("div", { children: actions })] });
 };
 
 const FullPageModalActions = (props) => {
   return jsxRuntime.jsx("div", { className: "ui:flex ui:flex-row ui:flex-wrap ui:justify-end ui:gap-3", children: props.children });
 };
 
-const FullPageModal = ({ children, dataTestId, isOpen = false, onCloseClick, primaryButtonProps, actions, title }) => {
-  return jsxRuntime.jsx(ReactModal__default.default, { isOpen, contentLabel: title, overlayClassName: "ui:fixed ui:inset-0 ui:overflow-x-hidden ui:overflow-y-auto ui:z-20", onRequestClose: onCloseClick, shouldFocusAfterRender: false, className: "ui:h-full ui:w-full", data: { "test-id": dataTestId !== null && dataTestId !== void 0 ? dataTestId : "react-modal" }, children: jsxRuntime.jsxs("div", { className: "ui:flex ui:h-full ui:w-full ui:flex-col ui:bg-slate-100", children: [jsxRuntime.jsx(FullPageModalHeader, { title, primaryButtonProps, actions }), jsxRuntime.jsx("div", { className: "ui:flex ui:h-full ui:flex-row ui:overflow-hidden", children })] }) });
+const FullPageModal = ({ children, dataTestId, isOpen = false, onCloseClick, actions, title }) => {
+  return jsxRuntime.jsx(ReactModal__default.default, { isOpen, contentLabel: title, overlayClassName: "ui:fixed ui:inset-0 ui:overflow-x-hidden ui:overflow-y-auto ui:z-20", onRequestClose: onCloseClick, shouldFocusAfterRender: false, className: "ui:h-full ui:w-full", data: { "test-id": dataTestId !== null && dataTestId !== void 0 ? dataTestId : "react-modal" }, children: jsxRuntime.jsxs("div", { className: "ui:flex ui:h-full ui:w-full ui:flex-col ui:bg-slate-100", children: [jsxRuntime.jsx(FullPageModalHeader, { title, actions }), jsxRuntime.jsx("div", { className: "ui:flex ui:h-full ui:flex-row ui:overflow-hidden", children })] }) });
 };
 FullPageModal.Actions = FullPageModalActions;
 FullPageModal.setAppElement = ReactModal__default.default.setAppElement;
@@ -6380,6 +5912,15 @@ function SectionTitle(props) {
   return jsxRuntime.jsx(MenuItemPadding, { children: jsxRuntime.jsx(Text, { variant: "strong", children: props.children }) });
 }
 
+const Dropzone = React.forwardRef((props, ref) => {
+  const { isHighlighted = false, className, children } = props, rest = __rest(props, ["isHighlighted", "className", "children"]);
+  const classes = classNames__default.default("ui:border ui:items-center ui:border-primary", {
+    "ui:bg-surface ui:border-dashed": !isHighlighted,
+    "ui:bg-primary-background ui:border-solid": isHighlighted
+  }, className);
+  return jsxRuntime.jsx("div", Object.assign({ className: classes, ref }, rest, { children }));
+});
+
 const defaultRemoveFilterOptionLabelGetter = (activeFilter) => `Remove filter ${activeFilter.label}`;
 const ActiveFilters = (props) => {
   var _a;
@@ -6778,17 +6319,16 @@ const LoadingState = () => {
   return jsxRuntime.jsx(Card, { className: classNames__default.default("ui:w-full ui:border ui:border-slate-100"), padding: false, elevation: "surface", children: jsxRuntime.jsx(Box, { children: jsxRuntime.jsxs(Stack, { width: "full", _p: "l", axis: "x", justify: "between", align: "center", children: [jsxRuntime.jsx(Stack, { _gap: "m", width: "full", children: jsxRuntime.jsxs(Stack, { _gap: "l", axis: "x", align: "center", width: "full", children: [jsxRuntime.jsx(Skeleton, { variant: "rounded", width: 24, height: 24 }), jsxRuntime.jsxs(Stack, { width: "full", children: [jsxRuntime.jsx("div", { className: "ui:font-bold ui:leading-inherit ui:antialiased ui:text-slate-800 title-inter ui:text-base", children: jsxRuntime.jsx(Skeleton, { width: 120 }) }), jsxRuntime.jsx(Text, { variant: "sm", color: "slate-500", children: jsxRuntime.jsx(Skeleton, { width: 100 }) })] })] }) }), jsxRuntime.jsx(Skeleton, { variant: "rounded", width: 24, height: 24 })] }) }) });
 };
 
-const TimelineCard = ({ title, subtitle, icon, leadingIcon, trailingIcon, statusText, state = "default", variant, disabled = false, isLoading = false, onClick }) => {
-  const presentation = variant !== null && variant !== void 0 ? variant : state;
+const TimelineCard = ({ title, subtitle, leadingIcon, trailingIcon, statusText, variant = "default", disabled = false, isLoading = false, onClick }) => {
   const getTitle = () => {
     return typeof title === "string" ? jsxRuntime.jsx(Text, { variant: "base", color: "slate-500", children: title }) : title;
   };
   return jsxRuntime.jsxs(Stack, { axis: "x", width: "full", align: "center", children: [isLoading ? jsxRuntime.jsx(LoadingState, {}) : jsxRuntime.jsx(Card, { as: onClick ? "button" : "div", className: classNames__default.default("ui:w-full ui:border ui:border-slate-100", {
     "ui:text-start ui:hover:border-slate-200 ui:focus:border-blue-800 ui:focus:outline-primary": onClick
-  }), padding: false, elevation: presentation === "highlighted" ? "medium" : "surface", onClick, disabled, children: jsxRuntime.jsx(Box, { className: classNames__default.default({
-    ["ui:border-l-8 ui:border-primary"]: presentation === "highlighted"
-  }), children: jsxRuntime.jsxs(Stack, { width: "full", _p: "l", axis: "x", justify: "between", align: "center", children: [jsxRuntime.jsxs(Stack, { _gap: "m", children: [statusText && jsxRuntime.jsx(Text, { variant: "sm", color: "slate-500", children: statusText }), jsxRuntime.jsxs(Stack, { _gap: "l", axis: "x", align: "center", children: [(icon === null || icon === void 0 ? void 0 : icon.url) && jsxRuntime.jsx("img", { className: "ui:shrink-0", width: 24, height: 24, src: icon.url, alt: "" }), (icon === null || icon === void 0 ? void 0 : icon.iconKey) && jsxRuntime.jsx(Icon, { className: "ui:shrink-0", name: icon.iconKey }), leadingIcon, jsxRuntime.jsxs(Stack, { width: "full", children: [(presentation === "bold" || presentation === "highlighted") && jsxRuntime.jsx(Title, { variant: "xs", children: title }), presentation === "default" && getTitle(), typeof subtitle === "string" ? jsxRuntime.jsx(Text, { variant: "sm", color: "slate-500", children: subtitle }) : subtitle] })] })] }), trailingIcon] }) }) }), jsxRuntime.jsx("svg", { role: "presentation", width: "17", height: "27", viewBox: "0 0 17 27", fill: "none", className: classNames__default.default("ui:translate-x-[-1.5px]", {
-    ["ui:invisible"]: presentation !== "highlighted"
+  }), padding: false, elevation: variant === "highlighted" ? "medium" : "surface", onClick, disabled, children: jsxRuntime.jsx(Box, { className: classNames__default.default({
+    ["ui:border-l-8 ui:border-primary"]: variant === "highlighted"
+  }), children: jsxRuntime.jsxs(Stack, { width: "full", _p: "l", axis: "x", justify: "between", align: "center", children: [jsxRuntime.jsxs(Stack, { _gap: "m", children: [statusText && jsxRuntime.jsx(Text, { variant: "sm", color: "slate-500", children: statusText }), jsxRuntime.jsxs(Stack, { _gap: "l", axis: "x", align: "center", children: [leadingIcon, jsxRuntime.jsxs(Stack, { width: "full", children: [(variant === "bold" || variant === "highlighted") && jsxRuntime.jsx(Heading, { variant: "h4", as: "h4", children: title }), variant === "default" && getTitle(), typeof subtitle === "string" ? jsxRuntime.jsx(Text, { variant: "sm", color: "slate-500", children: subtitle }) : subtitle] })] })] }), trailingIcon] }) }) }), jsxRuntime.jsx("svg", { role: "presentation", width: "17", height: "27", viewBox: "0 0 17 27", fill: "none", className: classNames__default.default("ui:translate-x-[-1.5px]", {
+    ["ui:invisible"]: variant !== "highlighted"
   }), children: jsxRuntime.jsx("path", { d: "M0.5 0.5L16 13L0.5 26", stroke: "rgb(226 232 240)", fill: "#fff" }) })] });
 };
 
@@ -7215,7 +6755,7 @@ const RangeCoverageComponent = (_a) => {
   ]));
   const segments = calculateSegments({ sections, start, end });
   const highlightPosition = highlightedRange ? calculateHighlightPosition({ highlightedRange, start, end }) : null;
-  return jsxRuntime.jsx(Box, Object.assign({ className }, rest, { children: jsxRuntime.jsxs(Stack, { _gap: "m", width: "full", align: "stretch", children: [jsxRuntime.jsxs(Stack, { justify: "between", axis: "x", align: "center", children: [jsxRuntime.jsx(Title, { variant: "xs", level: "3", "aria-hidden": title ? void 0 : true, children: title }), legendSwatches && (legendSwatches === null || legendSwatches === void 0 ? void 0 : legendSwatches.length) > 0 && jsxRuntime.jsx(Stack, { axis: "x", _gap: "l", children: jsxRuntime.jsx(Stack, { axis: "x", _gap: "base", align: "center", children: legendSwatches === null || legendSwatches === void 0 ? void 0 : legendSwatches.map((swatch) => {
+  return jsxRuntime.jsx(Box, Object.assign({ className }, rest, { children: jsxRuntime.jsxs(Stack, { _gap: "m", width: "full", align: "stretch", children: [jsxRuntime.jsxs(Stack, { justify: "between", axis: "x", align: "center", children: [jsxRuntime.jsx(Heading, { variant: "h4", as: "h3", "aria-hidden": title ? void 0 : true, children: title }), legendSwatches && (legendSwatches === null || legendSwatches === void 0 ? void 0 : legendSwatches.length) > 0 && jsxRuntime.jsx(Stack, { axis: "x", _gap: "l", children: jsxRuntime.jsx(Stack, { axis: "x", _gap: "base", align: "center", children: legendSwatches === null || legendSwatches === void 0 ? void 0 : legendSwatches.map((swatch) => {
     const background = isColorTuple(swatch.color) ? createStripedPattern({
       colorA: swatch.color[0],
       colorB: swatch.color[1],
@@ -7649,7 +7189,6 @@ Object.defineProperty(exports, "TooltipProvider", {
     get: function () { return Tooltip$1.Provider; }
 });
 exports.AbsentIcon = AbsentIcon;
-exports.AccordionList = AccordionList;
 exports.AccordionTemporary = Accordion;
 exports.ActionBloodPressureColoredIcon = ActionBloodPressureColoredIcon;
 exports.ActionCalculationColoredIcon = ActionCalculationColoredIcon;
@@ -7706,7 +7245,6 @@ exports.ChatBubbleWithTextIcon = ChatBubbleWithTextIcon;
 exports.CheckCircleFilledIcon = CheckCircleFilledIcon;
 exports.CheckFilledColoredIcon = CheckFilledColoredIcon;
 exports.CheckIcon = CheckIcon;
-exports.Checkbox = Checkbox;
 exports.CheckboxList = CheckboxList;
 exports.ChevronDoubleIcon = ChevronDoubleIcon;
 exports.ChevronDownIcon = ChevronDownIcon;
@@ -7741,7 +7279,6 @@ exports.EarthIcon = EarthIcon;
 exports.EmailIcon = EmailIcon;
 exports.EmojiIcon = EmojiIcon;
 exports.EmptyIcon = EmptyIcon;
-exports.EmptyListMessage = EmptyListMessage;
 exports.ExclamationMarkIcon = ExclamationMarkIcon;
 exports.ExportIcon = ExportIcon;
 exports.ExternalLinkIcon = ExternalLinkIcon;
@@ -7813,10 +7350,8 @@ exports.LightBulbIcon = LightBulbIcon;
 exports.Line = Line;
 exports.Link = Link;
 exports.LinkIcon = LinkIcon;
-exports.List = List;
 exports.ListDescIcon = ListDescIcon;
 exports.ListIcon = ListIcon;
-exports.ListItem = ListItem;
 exports.LoadingIndicator = LoadingIndicator;
 exports.LocaleProvider = LocaleProvider;
 exports.LockIcon = LockIcon;
@@ -7858,15 +7393,12 @@ exports.PrimaryIconButton = PrimaryIconButton;
 exports.PrimaryTabBar = PrimaryTabBar;
 exports.PrinterIcon = PrinterIcon;
 exports.QuestionFilledIcon = QuestionFilledIcon;
-exports.RadioGroupV2 = RadioGroupV2;
-exports.RadioV2 = RadioV2;
 exports.RangeCoverage = RangeCoverage;
 exports.RedAlertColoredIcon = RedAlertColoredIcon;
 exports.RedAlertIcon = RedAlertIcon;
 exports.RefreshIcon = RefreshIcon;
 exports.RobotIcon = RobotIcon;
 exports.RocketIcon = RocketIcon;
-exports.SIZES = SIZES;
 exports.SearchIcon = SearchIcon;
 exports.SearchInput = SearchInput;
 exports.SecondaryButton = SecondaryButton;
@@ -7924,13 +7456,11 @@ exports.TertiaryButton = TertiaryButton;
 exports.TertiaryIconButton = TertiaryIconButton;
 exports.Text = Text;
 exports.TextEditor = TextEditor;
-exports.TextLink = TextLink;
 exports.Textarea = Textarea;
 exports.ThresholdIcon = ThresholdIcon;
 exports.Timeline = Timeline;
 exports.TimelineCard = TimelineCard;
 exports.TimelineCardLayout = TimelineCardLayout;
-exports.Title = Title;
 exports.Toaster = Toaster;
 exports.Tooltip = Tooltip;
 exports.TrashBinIcon = TrashBinIcon;
@@ -7947,7 +7477,6 @@ exports.VideoIcon = VideoIcon;
 exports.WandIcon = WandIcon;
 exports.WeekdaysPicker = WeekdaysPicker;
 exports.WorkflowIcon = WorkflowIcon;
-exports.getDndListItemProps = getDndListItemProps;
 exports.prepareClientSidePagination = prepareClientSidePagination;
 exports.toast = toast;
 //# sourceMappingURL=index.development.js.map