@luscii-healthtech/web-ui 39.35.2 → 40.0.1

package/dist/index.development.js

@@ -9,6 +9,7 @@ var isString = require('lodash/isString');
 var omit = require('lodash/omit');
 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');
@@ -24,7 +25,6 @@ var pt = require('date-fns/locale/pt');
 require('react-datepicker/dist/react-datepicker.min.css');
 var PropTypes = require('prop-types');
 var FlyOutMenuPrimitive = require('@radix-ui/react-dropdown-menu');
-var tailwindMerge = require('tailwind-merge');
 var RadixHC = require('@radix-ui/react-hover-card');
 var ReactSelect = require('react-select');
 var groupBy = require('lodash/groupBy');
@@ -168,32 +168,32 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 };
 
 const FlexContainer = (props) => {
-  const { children, alignItems, verticalSpacing = "none", horizontalSpacing = "none", justifyContent, hasPadding, position = "", type, backgroundColor = "ui-bg-transparent", stretch = true } = props;
-  return jsxRuntime.jsx("div", { className: classNames__default.default("ui-flex", backgroundColor, {
-    "ui-flex-row": type === "row",
-    "ui-flex-col": type === "column",
-    "ui-relative": position === "relative",
-    "ui-absolute": position === "absolute",
-    "ui-static": position === "static",
-    "ui-fixed": position === "fixed",
-    "ui-sticky": position === "sticky",
-    "ui-justify-center": justifyContent === "center",
-    "ui-justify-start": justifyContent === "start",
-    "ui-justify-end": justifyContent === "end",
-    "ui-justify-between": justifyContent === "between",
-    "ui-items-start": alignItems === "start",
-    "ui-items-center": alignItems === "center",
-    "ui-items-end": alignItems === "end",
-    "ui-space-x-1": horizontalSpacing === "tiny",
-    "ui-space-x-2": horizontalSpacing === "small",
-    "ui-space-x-4": horizontalSpacing === "medium",
-    "ui-space-x-8": horizontalSpacing === "large",
-    "ui-space-y-1": verticalSpacing === "tiny",
-    "ui-space-y-2": verticalSpacing === "small",
-    "ui-space-y-4": verticalSpacing === "medium",
-    "ui-space-y-8": verticalSpacing === "large",
-    "ui-p-4": hasPadding,
-    "ui-w-full": stretch
+  const { children, alignItems, verticalSpacing = "none", horizontalSpacing = "none", justifyContent, hasPadding, position = "", type, backgroundColor = "ui:bg-transparent", stretch = true } = props;
+  return jsxRuntime.jsx("div", { className: classNames__default.default("ui:flex", backgroundColor, {
+    "ui:flex-row": type === "row",
+    "ui:flex-col": type === "column",
+    "ui:relative": position === "relative",
+    "ui:absolute": position === "absolute",
+    "ui:static": position === "static",
+    "ui:fixed": position === "fixed",
+    "ui:sticky": position === "sticky",
+    "ui:justify-center": justifyContent === "center",
+    "ui:justify-start": justifyContent === "start",
+    "ui:justify-end": justifyContent === "end",
+    "ui:justify-between": justifyContent === "between",
+    "ui:items-start": alignItems === "start",
+    "ui:items-center": alignItems === "center",
+    "ui:items-end": alignItems === "end",
+    "ui:space-x-1": horizontalSpacing === "tiny",
+    "ui:space-x-2": horizontalSpacing === "small",
+    "ui:space-x-4": horizontalSpacing === "medium",
+    "ui:space-x-8": horizontalSpacing === "large",
+    "ui:space-y-1": verticalSpacing === "tiny",
+    "ui:space-y-2": verticalSpacing === "small",
+    "ui:space-y-4": verticalSpacing === "medium",
+    "ui:space-y-8": verticalSpacing === "large",
+    "ui:p-4": hasPadding,
+    "ui:w-full": stretch
   }), children });
 };
 
@@ -234,62 +234,62 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$i = "/* 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";
+var css_248z$i = "/* 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$i);
 
 const responsiveTextSizeVariants = {
-  sm: "ui-text-sm sm:ui-text-xs",
-  base: "ui-text-base sm:ui-text-sm"
+  sm: "ui:text-sm ui:sm:text-xs",
+  base: "ui:text-base ui:sm:text-sm"
 };
 const allowedTextStyles = {
-  sm: `${responsiveTextSizeVariants.sm} ui-font-medium`,
-  "sm-strong": `${responsiveTextSizeVariants.sm} ui-font-semibold ui-antialiased`,
-  base: `${responsiveTextSizeVariants.base} ui-font-normal`,
-  medium: `${responsiveTextSizeVariants.base} ui-font-medium ui-antialiased`,
-  strong: `${responsiveTextSizeVariants.base} ui-font-semibold ui-antialiased`,
+  sm: `${responsiveTextSizeVariants.sm} ui:font-medium`,
+  "sm-strong": `${responsiveTextSizeVariants.sm} ui:font-semibold ui:antialiased`,
+  base: `${responsiveTextSizeVariants.base} ui:font-normal`,
+  medium: `${responsiveTextSizeVariants.base} ui:font-medium ui:antialiased`,
+  strong: `${responsiveTextSizeVariants.base} ui:font-semibold ui:antialiased`,
   lg: "",
-  "lg-medium": "ui-font-medium ui-antialiased",
-  "lg-strong": "ui-font-bold ui-antialiased",
-  xl: "ui-text-lg",
-  "xl-medium": "ui-font-medium ui-text-lg ui-antialiased",
-  "xl-strong": "ui-font-bold ui-text-lg ui-antialiased"
+  "lg-medium": "ui:font-medium ui:antialiased",
+  "lg-strong": "ui:font-bold ui:antialiased",
+  xl: "ui:text-lg",
+  "xl-medium": "ui:font-medium ui:text-lg ui:antialiased",
+  "xl-strong": "ui:font-bold ui:text-lg ui:antialiased"
 };
 const allowedColors = {
-  base: "ui-text-slate-800",
-  "slate-200": "ui-text-slate-200",
-  "slate-400": "ui-text-slate-400",
-  "slate-500": "ui-text-slate-500",
-  "slate-600": "ui-text-slate-600",
-  red: "ui-text-red-800",
-  green: "ui-text-green-800",
-  amber: "ui-text-yellow-800",
-  orange: "ui-text-yellow-800",
-  grey: "ui-text-slate-500",
-  white: "ui-text-white",
-  "blue-800": "ui-text-primary",
-  current: "ui-text-current",
+  base: "ui:text-slate-800",
+  "slate-200": "ui:text-slate-200",
+  "slate-400": "ui:text-slate-400",
+  "slate-500": "ui:text-slate-500",
+  "slate-600": "ui:text-slate-600",
+  red: "ui:text-red-800",
+  green: "ui:text-green-800",
+  amber: "ui:text-yellow-800",
+  orange: "ui:text-yellow-800",
+  grey: "ui:text-slate-500",
+  white: "ui:text-white",
+  "blue-800": "ui:text-primary",
+  current: "ui:text-current",
   /**
    * Semantic colors
    */
-  "on-negative": "ui-text-on-negative",
-  "on-positive": "ui-text-on-positive",
-  "on-secondary": "ui-text-on-secondary",
-  "on-surface": "ui-text-on-surface",
-  "on-surface-variant": "ui-text-on-surface-variant",
-  "on-warning": "ui-text-on-warning",
-  "positive-solid": "ui-text-positive-solid",
-  "negative-solid": "ui-text-negative-solid",
-  "neutral-interactive": "ui-text-neutral-interactive",
-  primary: "ui-text-primary",
-  "primary-dark": "ui-text-primary-dark"
+  "on-negative": "ui:text-on-negative",
+  "on-positive": "ui:text-on-positive",
+  "on-secondary": "ui:text-on-secondary",
+  "on-surface": "ui:text-on-surface",
+  "on-surface-variant": "ui:text-on-surface-variant",
+  "on-warning": "ui:text-on-warning",
+  "positive-solid": "ui:text-positive-solid",
+  "negative-solid": "ui:text-negative-solid",
+  "neutral-interactive": "ui:text-neutral-interactive",
+  primary: "ui:text-primary",
+  "primary-dark": "ui:text-primary-dark"
 };
 const allowedHoverColors = {
-  "blue-900": "hover:ui-text-primary-dark",
-  white: "hover:ui-text-white"
+  "blue-900": "ui:hover:text-primary-dark",
+  white: "ui:hover:text-white"
 };
 const allowedGroupHoverColors = {
-  "blue-900": "group-hover:ui-text-primary-dark",
-  white: "group-hover:ui-text-white"
+  "blue-900": "ui:group-hover:text-primary-dark",
+  white: "ui:group-hover:text-white"
 };
 const Text = (props) => {
   var _a, _b;
@@ -300,7 +300,7 @@ const Text = (props) => {
   const containerProps = {
     className: classNames__default.default(
       // apply different style classes
-      // for now we stick with ui-font-size 16px on the body
+      // 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"],
       allowedColors[color !== null && color !== void 0 ? color : "base"],
@@ -308,10 +308,10 @@ const Text = (props) => {
       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,
+        "ui:inline": inline,
+        // FIXME: this class doesn't do anything without a ui:max-width
+        "ui:truncate": truncate,
+        "ui:text-two-lines-max": clampLines,
         "in-html-link": containsDangerousHtml,
         capitalize
       },
@@ -327,7 +327,7 @@ const Text = (props) => {
 const IconWrapper = (SVGComponent) => (_a) => {
   var { className, size, color } = _a, rest = __rest(_a, ["className", "size", "color"]);
   const classes = classNames__default.default({
-    "ui-h-[20px] ui-w-[20px]": size === "s"
+    "ui:h-[20px] ui:w-[20px]": size === "s"
   }, className, color ? allowedColors[color] : void 0);
   return jsxRuntime.jsx(SVGComponent, Object.assign({ role: rest.onClick ? "button" : "img", className: classes }, rest));
 };
@@ -890,21 +890,21 @@ const TOASTER_TYPE_OPTIONS = {
 const ToasterPanel = ({ message = "", title = "", type = TOASTER_TYPE_OPTIONS.SUCCESS, showIcon = true, onClickClose, onAnimationEnd }) => {
   const isSuccess = type === TOASTER_TYPE_OPTIONS.SUCCESS;
   const isFailure = type === TOASTER_TYPE_OPTIONS.FAILURE;
-  return jsxRuntime.jsxs("div", { role: "status", "data-test-id": `toaster-panel-${type}`, className: classNames__default.default("ui-rounded-md ui-shadow-lg", "ui-max-h-19 ui-min-h-13 ui-w-104", "ui-relative", "ui-overflow-hidden", {
+  return jsxRuntime.jsxs("div", { role: "status", "data-test-id": `toaster-panel-${type}`, className: classNames__default.default("ui:rounded-md ui:shadow-lg", "ui:max-h-19 ui:min-h-13 ui:w-104", "ui:relative", "ui:overflow-hidden", {
     "type-success": isSuccess,
     "type-failure": isFailure,
-    "ui-bg-red-50": isFailure,
-    "ui-bg-green-50": isSuccess
-  }), children: [jsxRuntime.jsx("div", { className: "ui-relative ui-p-4", children: jsxRuntime.jsxs("div", { className: "ui-flex ui-flex-row", children: [jsxRuntime.jsx("div", { "data-test-id": "success-toaster-icon", className: classNames__default.default("success-icon ui-text-green-700", {
-    "ui-hidden": isFailure || !showIcon
-  }), children: jsxRuntime.jsx(CheckIcon, {}) }), jsxRuntime.jsx("div", { "data-test-id": "failure-toaster-icon", className: classNames__default.default("failure-icon ui-text-red-700", {
-    "ui-hidden": isSuccess || !showIcon
-  }), children: jsxRuntime.jsx(ExclamationMarkIcon, {}) }), jsxRuntime.jsxs("div", { className: "ui-ml-3", children: [jsxRuntime.jsx(Text, { variant: "strong", color: isSuccess ? "green" : "red", "data-test-id": "toaster-title", children: title }), jsxRuntime.jsx(Text, { "data-test-id": "toaster-message", children: message })] }), jsxRuntime.jsx("button", { onClick: onClickClose, className: "ui-ml-auto ui-cursor-pointer focus:ui-outline-primary", "data-test-id": "toaster-close-button", children: jsxRuntime.jsx(CrossIcon, { className: "ui-text-slate-500" }) })] }) }), jsxRuntime.jsx("div", { "data-test-id": "toaster-progress-bar-container", className: classNames__default.default("ui-absolute ui-bottom-0 ui-h-1 ui-w-full ui-rounded-b-md", {
-    "ui-bg-red-50": isFailure,
-    "ui-bg-green-50": isSuccess
-  }), children: jsxRuntime.jsx("div", { "data-test-id": "toaster-progress-bar", className: classNames__default.default("ui-transiation progress-reverse ui-duration-[3000ms] ui-h-full ui-w-full ui-origin-left ui-animate-[progress-reverse_5s_linear_forwards]", {
-    "ui-bg-red-400": isFailure,
-    "ui-bg-green-400": isSuccess
+    "ui:bg-red-50": isFailure,
+    "ui:bg-green-50": isSuccess
+  }), children: [jsxRuntime.jsx("div", { className: "ui:relative ui:p-4", children: jsxRuntime.jsxs("div", { className: "ui:flex ui:flex-row", children: [jsxRuntime.jsx("div", { "data-test-id": "success-toaster-icon", className: classNames__default.default("success-icon ui:text-green-700", {
+    "ui:hidden": isFailure || !showIcon
+  }), children: jsxRuntime.jsx(CheckIcon, {}) }), jsxRuntime.jsx("div", { "data-test-id": "failure-toaster-icon", className: classNames__default.default("failure-icon ui:text-red-700", {
+    "ui:hidden": isSuccess || !showIcon
+  }), children: jsxRuntime.jsx(ExclamationMarkIcon, {}) }), jsxRuntime.jsxs("div", { className: "ui:ml-3", children: [jsxRuntime.jsx(Text, { variant: "strong", color: isSuccess ? "green" : "red", "data-test-id": "toaster-title", children: title }), jsxRuntime.jsx(Text, { "data-test-id": "toaster-message", children: message })] }), jsxRuntime.jsx("button", { onClick: onClickClose, className: "ui:ml-auto ui:cursor-pointer ui:focus:outline-primary", "data-test-id": "toaster-close-button", children: jsxRuntime.jsx(CrossIcon, { className: "ui:text-slate-500" }) })] }) }), jsxRuntime.jsx("div", { "data-test-id": "toaster-progress-bar-container", className: classNames__default.default("ui:absolute ui:bottom-0 ui:h-1 ui:w-full ui:rounded-b-md", {
+    "ui:bg-red-50": isFailure,
+    "ui:bg-green-50": isSuccess
+  }), children: jsxRuntime.jsx("div", { "data-test-id": "toaster-progress-bar", className: classNames__default.default("ui:transiation progress-reverse ui:duration-3000 ui:h-full ui:w-full ui:origin-left ui:animate-[progress-reverse_5s_linear_forwards]", {
+    "ui:bg-red-400": isFailure,
+    "ui:bg-green-400": isSuccess
   }), onAnimationEnd }) })] });
 };
 
@@ -931,17 +931,17 @@ 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"], {
+  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"
+    "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) {
@@ -981,9 +981,9 @@ const AccordionItem = ({ id, title, content, isCollapsedByDefault = false, onClo
     setIsCollapsed(!isCollapsed);
   }, [isCollapsed]);
   const Chevron = isCollapsed ? ChevronRightIcon : ChevronDownIcon;
-  return jsxRuntime.jsxs("li", { className: "ui-border-b ui-border-slate-200 ui-bg-white last:ui-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 hover:ui-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" }), isString__default.default(title) ? jsxRuntime.jsx(Title, { variant: "xs", children: title }) : title] }), jsxRuntime.jsx("div", { className: classNames__default.default({ "ui-hidden": isCollapsed }), children: content })] });
+  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" }), isString__default.default(title) ? jsxRuntime.jsx(Title, { variant: "xs", children: title }) : title] }), jsxRuntime.jsx("div", { className: classNames__default.default({ "ui:hidden": isCollapsed }), children: content })] });
 };
 
 const Accordion = ({ dataTestId, isCollapsedByDefault = false, items, className, footer }) => {
@@ -991,7 +991,7 @@ const Accordion = ({ dataTestId, isCollapsedByDefault = false, items, className,
   return jsxRuntime.jsxs("ul", { "data-test-id": dataTestId, className, children: [(_a = items.map) === null || _a === void 0 ? void 0 : _a.call(items, (item) => {
     var _a2;
     return React.createElement(AccordionItem, Object.assign({}, item, { key: item.id, isCollapsedByDefault: (_a2 = item.isCollapsedByDefault) !== null && _a2 !== void 0 ? _a2 : isCollapsedByDefault }));
-  }), footer && jsxRuntime.jsx("div", { className: "ui-p-4", children: footer })] });
+  }), footer && jsxRuntime.jsx("div", { className: "ui:p-4", children: footer })] });
 };
 
 const isSubstring = (string, searchTerm, caseSensitive = false) => {
@@ -1005,14 +1005,14 @@ var css_248z$g = ".list-skeleton .skeleton-box {\n  display: inline-block;\n  he
 styleInject(css_248z$g);
 
 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` } })] });
+  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, 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", 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] });
+  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", 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 = {
@@ -1033,52 +1033,52 @@ const createShadowClassName = (elevation, options) => {
   let transitionClassName = "";
   if (transition) {
     transitionClassName = classNames__default.default({
-      "hover:ui-transition-shadow ui-duration-300": modifier === "hover",
-      "focus:ui-transition-shadow ui-duration-300": modifier === "focus",
-      "active:ui-transition-shadow ui-duration-300": modifier === "active"
+      "ui:hover:transition-shadow ui:duration-300": modifier === "hover",
+      "ui:focus:transition-shadow ui:duration-300": modifier === "focus",
+      "ui:active:transition-shadow ui:duration-300": modifier === "active"
     });
   }
   if (!modifier) {
     return classNames__default.default({
-      "ui-shadow-base": elevation === "base",
-      "ui-shadow-small": elevation === "small",
-      "ui-shadow-medium": elevation === "medium",
-      "ui-shadow-large": elevation === "large",
-      "ui-shadow-surface": elevation === "surface",
-      "ui-shadow-extraLarge": elevation === "extraLarge",
-      "ui-shadow-drag": elevation === "drag"
+      "ui:shadow-base": elevation === "base",
+      "ui:shadow-small": elevation === "small",
+      "ui:shadow-medium": elevation === "medium",
+      "ui:shadow-large": elevation === "large",
+      "ui:shadow-surface": elevation === "surface",
+      "ui:shadow-extra-large": elevation === "extraLarge",
+      "ui:shadow-drag": elevation === "drag"
     }, transitionClassName);
   }
   if (modifier === "hover") {
     return classNames__default.default({
-      "hover:ui-shadow-base": elevation === "base",
-      "hover:ui-shadow-small": elevation === "small",
-      "hover:ui-shadow-medium": elevation === "medium",
-      "hover:ui-shadow-large": elevation === "large",
-      "hover:ui-shadow-surface": elevation === "surface",
-      "hover:ui-shadow-extraLarge": elevation === "extraLarge",
-      "hover:ui-shadow-drag": elevation === "drag"
+      "ui:hover:shadow-base": elevation === "base",
+      "ui:hover:shadow-small": elevation === "small",
+      "ui:hover:shadow-medium": elevation === "medium",
+      "ui:hover:shadow-large": elevation === "large",
+      "ui:hover:shadow-surface": elevation === "surface",
+      "ui:hover:shadow-extraLarge": elevation === "extraLarge",
+      "ui:hover:shadow-drag": elevation === "drag"
     }, transitionClassName);
   }
   if (modifier === "focus") {
     return classNames__default.default({
-      "focus:ui-shadow-base": elevation === "base",
-      "focus:ui-shadow-small": elevation === "small",
-      "focus:ui-shadow-medium": elevation === "medium",
-      "focus:ui-shadow-large": elevation === "large",
-      "focus:ui-shadow-surface": elevation === "surface",
-      "focus:ui-shadow-extraLarge": elevation === "extraLarge",
-      "focus:ui-shadow-drag": elevation === "drag"
+      "ui:focus:shadow-base": elevation === "base",
+      "ui:focus:shadow-small": elevation === "small",
+      "ui:focus:shadow-medium": elevation === "medium",
+      "ui:focus:shadow-large": elevation === "large",
+      "ui:focus:shadow-surface": elevation === "surface",
+      "ui:focus:shadow-extraLarge": elevation === "extraLarge",
+      "ui:focus:shadow-drag": elevation === "drag"
     }, transitionClassName);
   }
   return classNames__default.default({
-    "active:ui-shadow-base": elevation === "base",
-    "active:ui-shadow-small": elevation === "small",
-    "active:ui-shadow-medium": elevation === "medium",
-    "active:ui-shadow-large": elevation === "large",
-    "active:ui-shadow-surface": elevation === "surface",
-    "active:ui-shadow-extraLarge": elevation === "extraLarge",
-    "active:ui-shadow-drag": elevation === "drag"
+    "ui:active:shadow-base": elevation === "base",
+    "ui:active:shadow-small": elevation === "small",
+    "ui:active:shadow-medium": elevation === "medium",
+    "ui:active:shadow-large": elevation === "large",
+    "ui:active:shadow-surface": elevation === "surface",
+    "ui:active:shadow-extraLarge": elevation === "extraLarge",
+    "ui:active:shadow-drag": elevation === "drag"
   }, transitionClassName);
 };
 
@@ -1087,15 +1087,15 @@ const createRadiusClassName = (borderRadius) => {
     return "";
   }
   return classNames__default.default({
-    "ui-radius-xxxxs": borderRadius === "xxxxs",
-    "ui-radius-xxxs": borderRadius === "xxxs",
-    "ui-radius-xxs": borderRadius === "xxs",
-    "ui-radius-xs": borderRadius === "xs",
-    "ui-radius-s": borderRadius === "s",
-    "ui-radius-m": borderRadius === "m",
-    "ui-radius-l": borderRadius === "l",
-    "ui-radius-xl": borderRadius === "xl",
-    "ui-radius-xxl": borderRadius === "xxl"
+    "ui:radius-xxxxs": borderRadius === "xxxxs",
+    "ui:radius-xxxs": borderRadius === "xxxs",
+    "ui:radius-xxs": borderRadius === "xxs",
+    "ui:radius-xs": borderRadius === "xs",
+    "ui:radius-s": borderRadius === "s",
+    "ui:radius-m": borderRadius === "m",
+    "ui:radius-l": borderRadius === "l",
+    "ui:radius-xl": borderRadius === "xl",
+    "ui:radius-xxl": borderRadius === "xxl"
   });
 };
 const createRadiusLeftClassName = (borderRadius) => {
@@ -1103,15 +1103,15 @@ const createRadiusLeftClassName = (borderRadius) => {
     return "";
   }
   return classNames__default.default({
-    "ui-radius-l-xxxxs": borderRadius === "xxxxs",
-    "ui-radius-l-xxxs": borderRadius === "xxxs",
-    "ui-radius-l-xxs": borderRadius === "xxs",
-    "ui-radius-l-xs": borderRadius === "xs",
-    "ui-radius-l-s": borderRadius === "s",
-    "ui-radius-l-m": borderRadius === "m",
-    "ui-radius-l-l": borderRadius === "l",
-    "ui-radius-l-xl": borderRadius === "xl",
-    "ui-radius-l-xxl": borderRadius === "xxl"
+    "ui:radius-l-xxxxs": borderRadius === "xxxxs",
+    "ui:radius-l-xxxs": borderRadius === "xxxs",
+    "ui:radius-l-xxs": borderRadius === "xxs",
+    "ui:radius-l-xs": borderRadius === "xs",
+    "ui:radius-l-s": borderRadius === "s",
+    "ui:radius-l-m": borderRadius === "m",
+    "ui:radius-l-l": borderRadius === "l",
+    "ui:radius-l-xl": borderRadius === "xl",
+    "ui:radius-l-xxl": borderRadius === "xxl"
   });
 };
 const createRadiusRightClassName = (borderRadius) => {
@@ -1119,15 +1119,15 @@ const createRadiusRightClassName = (borderRadius) => {
     return "";
   }
   return classNames__default.default({
-    "ui-radius-r-xxxxs": borderRadius === "xxxxs",
-    "ui-radius-r-xxxs": borderRadius === "xxxs",
-    "ui-radius-r-xxs": borderRadius === "xxs",
-    "ui-radius-r-xs": borderRadius === "xs",
-    "ui-radius-r-s": borderRadius === "s",
-    "ui-radius-r-m": borderRadius === "m",
-    "ui-radius-r-l": borderRadius === "l",
-    "ui-radius-r-xl": borderRadius === "xl",
-    "ui-radius-r-xxl": borderRadius === "xxl"
+    "ui:radius-r-xxxxs": borderRadius === "xxxxs",
+    "ui:radius-r-xxxs": borderRadius === "xxxs",
+    "ui:radius-r-xxs": borderRadius === "xxs",
+    "ui:radius-r-xs": borderRadius === "xs",
+    "ui:radius-r-s": borderRadius === "s",
+    "ui:radius-r-m": borderRadius === "m",
+    "ui:radius-r-l": borderRadius === "l",
+    "ui:radius-r-xl": borderRadius === "xl",
+    "ui:radius-r-xxl": borderRadius === "xxl"
   });
 };
 
@@ -1148,7 +1148,7 @@ const spacingKeys = [
   "my"
 ];
 const createSpacingClassNames = (keys, spacingProps) => {
-  return keys.filter((key) => spacingProps[key]).map((key) => `ui-${key}-${spacingProps[key]}`).join(" ");
+  return keys.filter((key) => spacingProps[key]).map((key) => `ui:${key}-${spacingProps[key]}`).join(" ");
 };
 const Box = (props) => {
   const { as: Element = "div", borderRadius, borderRadiusLeft, borderRadiusRight, className, elevation, width, backgroundColor, hoverBackgroundColor, cursor } = props, attributes = __rest(props, ["as", "borderRadius", "borderRadiusLeft", "borderRadiusRight", "className", "elevation", "width", "backgroundColor", "hoverBackgroundColor", "cursor"]);
@@ -1158,63 +1158,87 @@ const Box = (props) => {
   const borderRadiusLeftClassName = createRadiusLeftClassName(borderRadiusLeft);
   const borderRadiusRightClassName = createRadiusRightClassName(borderRadiusRight);
   const attributesWithoutSpacingKeys = omit__default.default(attributes, spacingKeys);
-  return jsxRuntime.jsx(Element, Object.assign({ className: classNames__default.default(spacingClasses, {
-    "ui-bg-surface": backgroundColor === "surface",
-    "ui-bg-background": backgroundColor === "background",
-    "ui-bg-primary-background": backgroundColor === "primary",
-    "ui-bg-secondary-background": backgroundColor === "secondary-background",
-    "ui-bg-slate-100": backgroundColor === "base",
-    "ui-bg-blue-50": backgroundColor === "blue",
-    "ui-bg-red-50": backgroundColor === "red",
-    "ui-bg-green-50": backgroundColor === "green",
-    "ui-bg-amber-50": backgroundColor === "amber",
-    [`ui-w-${width}`]: width && width !== "full",
-    "ui-w-full": width === "full",
-    "ui-w-1/2": width === "1/2",
-    "ui-w-1/3": width === "1/3",
-    "ui-w-2/3": width === "2/3",
-    "ui-w-1/4": width === "1/4",
-    "ui-w-3/4": width === "3/4"
+  const boxClasses = classNames__default.default(spacingClasses, {
+    "ui:bg-surface": backgroundColor === "surface",
+    "ui:bg-background": backgroundColor === "background",
+    "ui:bg-primary-background": backgroundColor === "primary",
+    "ui:bg-secondary-background": backgroundColor === "secondary-background",
+    "ui:bg-slate-100": backgroundColor === "base",
+    "ui:bg-blue-50": backgroundColor === "blue",
+    "ui:bg-red-50": backgroundColor === "red",
+    "ui:bg-green-50": backgroundColor === "green",
+    "ui:bg-amber-50": backgroundColor === "amber",
+    [`ui:w-${width}`]: width && width !== "full",
+    "ui:w-full": width === "full",
+    "ui:w-1/2": width === "1/2",
+    "ui:w-1/3": width === "1/3",
+    "ui:w-2/3": width === "2/3",
+    "ui:w-1/4": width === "1/4",
+    "ui:w-3/4": width === "3/4"
   }, {
-    "hover:ui-bg-slate-100": hoverBackgroundColor === "base",
-    "hover:ui-bg-background": backgroundColor === "background",
-    "hover:ui-bg-secondary-background": hoverBackgroundColor === "secondary-background",
-    "hover:ui-bg-blue-50": hoverBackgroundColor === "blue",
-    "hover:ui-bg-red-50": hoverBackgroundColor === "red",
-    "hover:ui-bg-green-50": hoverBackgroundColor === "green",
-    "hover:ui-bg-amber-50": hoverBackgroundColor === "amber",
-    "hover:ui-bg-primary-background": hoverBackgroundColor === "primary"
+    "ui:hover:bg-slate-100": hoverBackgroundColor === "base",
+    "ui:hover:bg-background": backgroundColor === "background",
+    "ui:hover:bg-secondary-background": hoverBackgroundColor === "secondary-background",
+    "ui:hover:bg-blue-50": hoverBackgroundColor === "blue",
+    "ui:hover:bg-red-50": hoverBackgroundColor === "red",
+    "ui:hover:bg-green-50": hoverBackgroundColor === "green",
+    "ui:hover:bg-amber-50": hoverBackgroundColor === "amber",
+    "ui:hover:bg-primary-background": hoverBackgroundColor === "primary"
   }, {
-    "ui-transition-colors motion-reduce:ui-transition-none": hoverBackgroundColor !== void 0
+    "ui:transition-colors ui:motion-reduce:transition-none": hoverBackgroundColor !== void 0
   }, {
-    "ui-cursor-auto": cursor === "auto",
-    "ui-cursor-default": cursor === "default",
-    "ui-cursor-pointer": cursor === "pointer",
-    "ui-cursor-wait": cursor === "wait",
-    "ui-cursor-move": cursor === "move",
-    "ui-cursor-help": cursor === "help",
-    "ui-cursor-not-allowed": cursor === "not-allowed",
-    "ui-cursor-progress": cursor === "progress",
-    "ui-cursor-copy": cursor === "copy",
-    "ui-cursor-no-drop": cursor === "no-drop",
-    "ui-cursor-grab": cursor === "grab",
-    "ui-cursor-grabbing": cursor === "grabbing"
-  }, className, shadowClassName, borderRadiusClassName, borderRadiusLeftClassName, borderRadiusRightClassName) }, attributesWithoutSpacingKeys));
+    "ui:cursor-auto": cursor === "auto",
+    "ui:cursor-default": cursor === "default",
+    "ui:cursor-pointer": cursor === "pointer",
+    "ui:cursor-wait": cursor === "wait",
+    "ui:cursor-move": cursor === "move",
+    "ui:cursor-help": cursor === "help",
+    "ui:cursor-not-allowed": cursor === "not-allowed",
+    "ui:cursor-progress": cursor === "progress",
+    "ui:cursor-copy": cursor === "copy",
+    "ui:cursor-no-drop": cursor === "no-drop",
+    "ui:cursor-grab": cursor === "grab",
+    "ui:cursor-grabbing": cursor === "grabbing"
+  }, shadowClassName, borderRadiusClassName, borderRadiusLeftClassName, borderRadiusRightClassName);
+  return jsxRuntime.jsx(Element, Object.assign({ className: tailwindMerge.twMerge(boxClasses, className) }, attributesWithoutSpacingKeys));
 };
 
 const Stack = (props) => {
   const { children, gap, align = "start", justify = "normal", axis = "y", className, reverse, wrap = false, divider } = props, attributes = __rest(props, ["children", "gap", "align", "justify", "axis", "className", "reverse", "wrap", "divider"]);
-  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-${gap}`]: gap
-  }, `ui-items-${align} ui-justify-${justify}`);
+  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-m": gap === "m",
+    "ui:gap-none": gap === "none",
+    "ui:gap-xxxxs": gap === "xxxxs",
+    "ui:gap-xxxs": gap === "xxxs",
+    "ui:gap-xxs": gap === "xxs",
+    "ui:gap-xs": gap === "xs",
+    "ui:gap-s": gap === "s",
+    "ui:gap-l": gap === "l",
+    "ui:gap-xl": gap === "xl",
+    "ui:gap-xxl": gap === "xxl",
+    "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: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 jsxRuntime.jsx(Box, Object.assign({ className: classNames__default.default(stackClasses, className) }, attributes, { children: React__namespace.default.Children.map(children, (child, index) => {
+    return jsxRuntime.jsx(Box, Object.assign({ 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;
@@ -1225,28 +1249,28 @@ const Stack = (props) => {
       return jsxRuntime.jsxs(React__namespace.default.Fragment, { children: [child, divider] });
     }) }));
   }
-  return jsxRuntime.jsx(Box, Object.assign({ className: classNames__default.default(stackClasses, className) }, attributes, { children }));
+  return jsxRuntime.jsx(Box, Object.assign({ className: classes }, attributes, { children }));
 };
 
 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", text: title }), title && typeof title === "object" && jsxRuntime.jsx(Title, Object.assign({ variant: "xs" }, title)), subtitle && jsxRuntime.jsx(Text, { 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 })] });
+  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", text: title }), title && typeof title === "object" && jsxRuntime.jsx(Title, Object.assign({ variant: "xs" }, title)), subtitle && jsxRuntime.jsx(Text, { 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
+  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 }) });
 };
@@ -1271,13 +1295,13 @@ function isIconKey(key) {
 
 const DragHandle = React.forwardRef((_a, ref) => {
   var { dataTestId, className: classes, grabbing, disabled = false } = _a, props = __rest(_a, ["dataTestId", "className", "grabbing", "disabled"]);
-  const className = classNames__default.default(classes, "ui-py-2 focus:ui-outline-primary", {
-    "ui-cursor-grab": !grabbing && !disabled,
-    "ui-cursor-grabbing ui-shadow-sm ui-bg-slate-200": grabbing && !disabled,
-    "hover:ui-bg-slate-200 hover:ui-shadow-sm ui-transition ui-duration-200 ui-rounded": !disabled,
-    "ui-cursor-not-allowed": disabled
+  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 }, props, { tabIndex: 0, className, "data-test-id": dataTestId !== null && dataTestId !== void 0 ? dataTestId : "dragHandle", children: jsxRuntime.jsx(Icon, { name: "DragIcon", className: disabled ? "ui-text-slate-300" : "ui-text-slate-400" }) }));
+  return jsxRuntime.jsx("button", Object.assign({ ref }, props, { tabIndex: 0, className, "data-test-id": dataTestId !== null && dataTestId !== void 0 ? dataTestId : "dragHandle", children: jsxRuntime.jsx(Icon, { name: "DragIcon", className: disabled ? "ui:text-slate-300" : "ui:text-slate-400" }) }));
 });
 
 var img$9 = "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";
@@ -1293,7 +1317,7 @@ const ImageInner = (_a) => {
       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$9, alt: "image-icon" }) }), src, onClick, onError: () => setIsError(true), wrapperClassName }, otherProps));
+  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$9, alt: "image-icon" }) }), src, onClick, onError: () => setIsError(true), wrapperClassName }, otherProps));
 };
 var Image$1 = reactLazyLoadImageComponent.trackWindowScroll(ImageInner);
 
@@ -1306,7 +1330,7 @@ const BaseListIcon = ({ icon, 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" })] });
+  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) {
@@ -1317,24 +1341,24 @@ function createAssetLoadError(payload, callback) {
 }
 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", {
-    "first:ui-rounded-t-2xl": roundTop,
-    "last:ui-rounded-b-2xl": roundBottom,
-    "ui-cursor-pointer": clickHandler,
-    "hover:ui-bg-blue-50 ui-transition-colors ui-ease-in-out ui-duration-300": clickHandler,
-    "last:ui-border-b-0": !withBorder,
-    "first:ui-border-t ui-border-l ui-border-r": withBorder,
+  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
+    "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({
+  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-flex-grow" }), jsxRuntime.jsx(Stack, { axis: "x", gap: "xxs", align: "center", className: classNames__default.default({
-    "ui-opacity-0": onlyShowAccessoriesOnHover,
-    "group-hover:ui-opacity-100": onlyShowAccessoriesOnHover
+  }, 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: "xxs", align: "center", className: classNames__default.default({
+    "ui:opacity-0": onlyShowAccessoriesOnHover,
+    "ui:group-hover:opacity-100": onlyShowAccessoriesOnHover
   }), children: accessories })] }));
 });
 
@@ -1410,23 +1434,23 @@ const DefaultState = ({ icon, message, horizontal = false, alignMessage = "cente
     return null;
   }
   const alignLeft = horizontal || alignMessage === "left";
-  const className = classNames__default.default("ui-p-4 ui-flex ui-items-center", {
-    "ui-flex-col ui-justify-center": !alignLeft,
-    "ui-flex-row ui-w-full ": alignLeft
+  const className = classNames__default.default("ui:p-4 ui:flex ui:items-center", {
+    "ui:flex-col ui:justify-center": !alignLeft,
+    "ui:flex-row ui:w-full ": alignLeft
   });
-  return jsxRuntime.jsxs("div", { className, children: [icon && jsxRuntime.jsx(Icon, { name: icon, className: classNames__default.default("ui-text-slate-500", {
-    "ui-mb-2": message && !alignLeft,
-    "ui-mr-2": alignLeft
-  }) }), message && jsxRuntime.jsx(Text, { type: "base", color: "slate-500", className: "ui-text-center", text: message })] });
+  return jsxRuntime.jsxs("div", { className, children: [icon && jsxRuntime.jsx(Icon, { name: icon, className: classNames__default.default("ui:text-slate-500", {
+    "ui:mb-2": message && !alignLeft,
+    "ui:mr-2": alignLeft
+  }) }), message && jsxRuntime.jsx(Text, { type: "base", color: "slate-500", className: "ui:text-center", text: message })] });
 };
 const DropzonePresentation = React.forwardRef(({ message, icon, isHighlighted, isClickable, className, dataTestId, children, horizontal, alignMessage }, ref) => {
-  const classes = classNames__default.default("ui-border ui-flex ui-items-center ui-justify-center ui-border-primary", {
+  const classes = classNames__default.default("ui:border ui:flex ui:items-center ui:justify-center ui:border-primary", {
     "dropzone-dashed-border": !isHighlighted,
-    "ui-bg-white": !isHighlighted,
-    "ui-bg-blue-50": isHighlighted,
-    "ui-border-dashed": !isHighlighted,
-    "ui-border-solid": isHighlighted,
-    "hover:ui-bg-blue-100 ui-transition-colors ui-ease-in-out ui-duration-300": isClickable
+    "ui:bg-white": !isHighlighted,
+    "ui:bg-blue-50": isHighlighted,
+    "ui:border-dashed": !isHighlighted,
+    "ui:border-solid": isHighlighted,
+    "ui:hover:bg-blue-100 ui:transition-colors ui:ease-in-out ui:duration-300": isClickable
   }, className);
   return jsxRuntime.jsx("div", { className: classes, ref, "data-test-id": dataTestId, children: children || jsxRuntime.jsx(DefaultState, { icon, message, horizontal, alignMessage }) });
 });
@@ -1439,7 +1463,7 @@ const Dropzone = (_a) => {
   });
   const presentation = jsxRuntime.jsx(DropzonePresentation, Object.assign({ ref: setNodeRef, isHighlighted: isOver, isClickable: onClick && !disabled }, props, { dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : `dropzone-${identifier}` }));
   if (onClick) {
-    return jsxRuntime.jsx("button", { onClick, disabled, className: "ui-block ui-w-full ui-rounded focus:ui-outline-primary", children: presentation });
+    return jsxRuntime.jsx("button", { onClick, disabled, className: "ui:block ui:w-full ui:rounded ui:focus:outline-primary", children: presentation });
   }
   return presentation;
 };
@@ -1456,7 +1480,7 @@ const SortableBaseListItem = (_a) => {
   });
   const styleTransform = utilities.CSS.Transform.toString(transform);
   if (isDragging) {
-    return jsxRuntime.jsxs("div", { style: { transform: styleTransform, position: "relative" }, children: [jsxRuntime.jsx(DropzonePresentation, { 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: true, renderDragHandle: () => jsxRuntime.jsx(DragHandle, Object.assign({}, attributes, listeners, { disabled: !props.isDraggable, grabbing: isDragging })) })) })] });
+    return jsxRuntime.jsxs("div", { style: { transform: styleTransform, position: "relative" }, children: [jsxRuntime.jsx(DropzonePresentation, { 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: 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: true, renderDragHandle: () => jsxRuntime.jsx(DragHandle, Object.assign({}, attributes, listeners, { disabled: !props.isDraggable, grabbing: isDragging })) }));
 };
@@ -1470,7 +1494,7 @@ const ListItem = (props) => {
   return jsxRuntime.jsx(BaseListItem, Object.assign({}, props));
 };
 
-var css_248z$e = "li.gu-mirror {\n  position: fixed;\n  z-index: 9999;\n  margin: 0px;\n  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)\n}\nli.gu-hide {\n  display: none\n}\nli.gu-unselectable {\n  user-select: none\n}\nli.gu-transit {\n  --tw-bg-opacity: 1;\n  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));\n  filter: none;\n  border-radius: 0px;\n  border-style: none;\n  opacity: 1\n}\nli.gu-transit > * {\n  visibility: hidden\n}";
+var css_248z$e = "/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */\n@layer properties;\nli.gu-mirror {\n  position: fixed;\n  z-index: 9999;\n  margin: calc(var(--ui-spacing, 0.25rem) * 0);\n  --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n}\nli.gu-hide {\n  display: none;\n}\nli.gu-unselectable {\n  user-select: none;\n}\nli.gu-transit {\n  background-color: var(--ui-color-blue-50, #eff6ff);\n  filter: none;\n  border-radius: 0;\n  --tw-border-style: none;\n  border-style: none;\n  opacity: 100%;\n}\nli.gu-transit > * {\n  visibility: hidden;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n    }\n  }\n}";
 styleInject(css_248z$e);
 
 const DefaultList = (_a) => {
@@ -1510,8 +1534,8 @@ const DefaultList = (_a) => {
             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
+        }, 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] });
       }
       result.push(Object.assign(Object.assign(Object.assign({}, parentItem), { icon: composedIcon, htmlProps: Object.assign(Object.assign({}, parentItem.htmlProps), { id: `list-item-${parentItem.itemId}` }) }), parentItem.handleItemClick ? {
@@ -1548,7 +1572,7 @@ const DefaultList = (_a) => {
       });
     }
     setDraggedListItem(null);
-  }, children: [jsxRuntime.jsx(SortableBaseList, Object.assign({ draggableIdentifier: "sortable-list-identifier", items: innerItems.map((item) => Object.assign(Object.assign({}, item), { draggableIdentifier: `${item.itemId}`, isDraggable: true, 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 }) })) })] });
+  }, children: [jsxRuntime.jsx(SortableBaseList, Object.assign({ draggableIdentifier: "sortable-list-identifier", items: innerItems.map((item) => Object.assign(Object.assign({}, item), { draggableIdentifier: `${item.itemId}`, isDraggable: true, 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) {
@@ -1567,27 +1591,27 @@ const List = (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"
+      "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: "ui-w-16",
-    md: "ui-w-32",
-    lg: "ui-w-56",
-    xl: "ui-w-80",
-    full: "ui-w-full"
+    sm: "w-16",
+    md: "w-32",
+    lg: "w-56",
+    xl: "w-80",
+    full: "w-full"
   };
   const [defaultSize, smallSize, mediumSize, largeSize, extraLargeSize] = size;
   return [
-    sizesMapped[defaultSize],
-    smallSize ? `sm:${sizesMapped[smallSize]}` : "",
-    mediumSize ? `md:${sizesMapped[mediumSize]}` : "",
-    largeSize ? `lg:${sizesMapped[largeSize]}` : "",
-    extraLargeSize ? `xl:${sizesMapped[extraLargeSize]}` : ""
+    `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);
 };
 
@@ -1596,41 +1620,41 @@ const StyledInput = React__namespace.default.forwardRef((_a, ref) => {
   const hasPrefix = !!prefix;
   const hasSuffix = !!suffix;
   const hasNoExtraContent = !hasPrefix && !hasSuffix;
-  return jsxRuntime.jsxs(FlexRow, { spacing: "none", "data-test-id": "input-component-container", stretch: false, children: [jsxRuntime.jsx("span", { className: classNames__default.default("ui-h-11 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-p-3", "ui-text-sm", "ui-text-slate-500", "ui-bg-main-background"), children: suffix || prefix }), jsxRuntime.jsxs("div", { className: classNames__default.default("ui-relative", {
-    "ui-flex ui-flex-grow": width === "full"
-  }), children: [icon && jsxRuntime.jsx("div", { className: classNames__default.default("ui-absolute ui-left-4 ui-top-1/2", {
-    "ui-flex-grow": width === "full"
+  return jsxRuntime.jsxs(FlexRow, { spacing: "none", "data-test-id": "input-component-container", stretch: false, children: [jsxRuntime.jsx("span", { className: classNames__default.default("ui:h-11 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:p-3", "ui:text-sm", "ui:text-slate-500", "ui:bg-main-background"), children: suffix || prefix }), jsxRuntime.jsxs("div", { className: classNames__default.default("ui:relative", {
+    "ui:flex ui:grow": width === "full"
+  }), 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,
-    "hover:ui-border-input-border-dark": !attributes.disabled,
-    "ui-border-red-700": isError,
-    "focus:ui-outline-negative": isError,
-    "focus:ui-border-primary": !isError,
-    "focus:ui-outline-primary": !isError,
-    "ui-bg-white": !attributes.disabled
-  }, "ui-h-11", "ui-p-2", "ui-border", "ui-text-base sm:ui-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: {
+  }, 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
+  }, "ui:h-11", "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
+  }, 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 }) })] })] });
 });
 
@@ -1677,7 +1701,7 @@ const SearchInput = React__namespace.default.forwardRef((props, ref) => {
 
 const Content$2 = (_a) => {
   var { container, children, className } = _a, contentProps = __rest(_a, ["container", "children", "className"]);
-  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", "data-[state=delayed-open]:ui-animate-in data-[state=closed]:ui-animate-out data-[state=closed]:ui-fade-out-0 data-[state=delayed-open]:ui-fade-in-0 data-[state=closed]:ui-zoom-out-95 data-[state=delayed-open]:ui-zoom-in-95 data-[side=bottom]:ui-slide-in-from-top-2 data-[side=left]:ui-slide-in-from-right-2 data-[side=right]:ui-slide-in-from-left-2 data-[side=top]:ui-slide-in-from-bottom-2"), sideOffset: 4 }, contentProps, { children: [jsxRuntime.jsx(Box, { backgroundColor: "secondary-background", px: "m", py: "xs", borderRadius: "xxxxs", children }), jsxRuntime.jsx(Tooltip__namespace.Arrow, { width: 8, height: 8, className: "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: "secondary-background", px: "m", py: "xs", borderRadius: "xxxxs", children }), jsxRuntime.jsx(Tooltip__namespace.Arrow, { width: 8, height: 8, className: "ui:fill-secondary-background" })] })) });
 };
 Content$2.displayName = "Tooltip.Content";
 const Root$1 = (props) => jsxRuntime.jsx(Tooltip__namespace.Root, Object.assign({}, props));
@@ -1694,7 +1718,7 @@ const Tooltip = {
 };
 
 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" })] });
+  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) => {
@@ -1713,39 +1737,39 @@ const ButtonV2 = React__namespace.default.forwardRef((_a, innerRef) => {
     onClick === null || onClick === void 0 ? void 0 : onClick(event);
   }
   const buttonClassName = classNames__default.default([
-    "[transition:transform_150ms,box-shadow_150ms,color_150ms,background-color_150ms,border-color_150ms,background-position_300ms] ui-ease-out",
-    "ui-border",
-    "ui-radius-xxs",
-    "ui-outline-offset-4 focus:ui-outline-primary",
-    "ui-group",
-    "ui-relative",
-    "ui-inline-flex ui-flex-row ui-items-center ui-justify-center ui-flex-shrink-0",
-    "ui-shadow-sm"
+    "ui:[transition:transform_150ms,box-shadow_150ms,color_150ms,background-color_150ms,border-color_150ms,background-position_300ms] ui:ease-out",
+    "ui:border",
+    "ui:radius-xxs",
+    "ui:outline-offset-4 ui:focus:outline-primary",
+    "ui:group",
+    "ui:relative",
+    "ui:inline-flex ui:flex-row ui:items-center ui:justify-center ui:shrink-0",
+    "ui:shadow-sm"
   ], {
-    "ui-gap-xxs": content
+    "ui:gap-xxs": content
   }, {
-    "ui-opacity-50": disabled,
-    "ui-cursor-not-allowed": isPending !== null && isPending !== void 0 ? isPending : disabled,
-    "active:ui-shadow-none active:ui-scale-[0.98]": isInteractive,
+    "ui:opacity-50": disabled,
+    "ui:cursor-not-allowed": isPending !== null && isPending !== void 0 ? isPending : disabled,
+    "ui:active:shadow-none ui:active:scale-[0.98]": isInteractive,
     /**
      * Specific paddings for each combination of text and/or icon.
      */
-    "ui-pl-m ui-pr-l": hasContentAndLeadingIcon,
-    "ui-pl-l ui-pr-m": hasContentAndTrailingIcon,
+    "ui:pl-m ui:pr-l": hasContentAndLeadingIcon,
+    "ui:pl-l ui:pr-m": hasContentAndTrailingIcon,
     /**
      * Deducting 1px from the padding to account for the border.
      */
-    "ui-px-[calc(theme('spacing.m')-1px)]": true,
-    "ui-py-[calc(theme('spacing.xxs')-1px)]": size === "medium",
-    "ui-py-[calc(theme('spacing.s')-1px)]": size === "large"
-  }, "ui-h-12 sm:ui-h-auto", className);
+    "ui:px-[calc(var(--ui-spacing-m)-1px)]": true,
+    "ui:py-[calc(var(--ui-spacing-xxs)-1px)]": size === "medium",
+    "ui:py-[calc(var(--ui-spacing-s)-1px)]": size === "large"
+  }, "ui:h-12 ui:sm:h-auto", className);
   const textColorClass = allowedColors[textColor !== null && textColor !== void 0 ? textColor : "base"];
   const tooltipAttrs = title ? {
     "data-tip": true,
     "data-for": buttonTooltipId
   } : {};
-  const buttonComponent = jsxRuntime.jsxs("button", Object.assign({ ref: innerRef }, otherAttributes, { className: buttonClassName, type, onClick: handleClick, disabled: disabled !== null && disabled !== void 0 ? 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 }), !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
+  const buttonComponent = jsxRuntime.jsxs("button", Object.assign({ ref: innerRef }, otherAttributes, { className: buttonClassName, type, onClick: handleClick, disabled: disabled !== null && disabled !== void 0 ? 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 }), !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 })] }));
   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 }) })] });
@@ -1754,16 +1778,16 @@ const ButtonV2 = React__namespace.default.forwardRef((_a, innerRef) => {
 });
 function IconLayoutWrapper({ children, className, isInvisible }) {
   return jsxRuntime.jsx("span", { className: classNames__default.default(
-    "ui-flex-shrink-0",
+    "ui:shrink-0",
     /**
      * Text on a medium button is 2px smaller than the icon. So to
      * make sure the icon can grow beyond the text, we need to
      * allow the icon to grow beyond the text. This essentially
      * vertically centers the icon.
      */
-    "-ui-m-[2px]",
+    "ui:-m-[2px]",
     {
-      "ui-invisible": isInvisible
+      "ui:invisible": isInvisible
     },
     className
   ), children });
@@ -1772,12 +1796,12 @@ function IconLayoutWrapper({ children, className, isInvisible }) {
 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}`,
+    `ui:text-${textColor}`,
     // Colors of any icons on the button
-    "ui-bg-white",
-    "ui-border-neutral-border-high-contrast",
+    "ui:bg-white",
+    "ui:border-neutral-border-high-contrast",
     {
-      "hover:ui-border-neutral-interactive hover:ui-bg-primary-background": !props.isDisabled
+      "ui:hover:border-neutral-interactive ui:hover:bg-primary-background": !props.isDisabled
     }
   ], props.className), textColor, textHoverColor }));
 });
@@ -1794,7 +1818,7 @@ const imageSrc = {
   "no-notes-found": img$6
 };
 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 })] });
+  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$5 = "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";
@@ -1812,24 +1836,24 @@ function LoadingIndicator(_a) {
   const containerClassName = classNames__default.default("cweb-loading", className, {
     "as-modal": asModal
   });
-  return jsxRuntime.jsx("div", Object.assign({}, restProps, { className: containerClassName, "data-test-id": dataTestId, role: "progressbar", children: jsxRuntime.jsx("img", { src: asSpinner ? spinnerToRender : img$5, "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
+  return jsxRuntime.jsx("div", Object.assign({}, restProps, { className: containerClassName, "data-test-id": dataTestId, role: "progressbar", children: jsxRuntime.jsx("img", { src: asSpinner ? spinnerToRender : img$5, "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, 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, 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: "m", children: slots === null || slots === void 0 ? void 0 : slots.bottom })] });
+  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, 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: "m", 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 });
+  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) => {
@@ -1883,59 +1907,59 @@ const AccordionList = (_a) => {
       }), content: contentForAccordionItem(filteredItem) });
     })) !== null && _a2 !== void 0 ? _a2 : [];
   }, [accordionItems, searchString, isSearchEnabled]);
-  return jsxRuntime.jsxs("div", { className: "ui-box-ui-border 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) => {
+  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" })] });
+  } }), 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:text-primary",
+    "ui:border-transparent ui:bg-transparent ui:!shadow-none",
     {
-      "hover:ui-bg-primary-background hover:ui-text-primary-dark": !props.isDisabled
+      "ui:hover:bg-primary-background ui:hover:text-primary-dark": !props.isDisabled
     }
   ], props.className), textColor: "blue-800", textHoverColor: "blue-900" }));
 });
 
 const ModalHeader = (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-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, { icon: CrossIcon, onClick: props.onCloseClick })] });
+  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, { icon: CrossIcon, onClick: props.onCloseClick })] });
 };
 
 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-gradient-to-r",
-    "ui-gradient-blue",
+    "ui:text-white",
+    "ui:bg-linear-to-r",
+    "ui:gradient-blue",
     {
-      "hover:ui-gradient-blue--hover": !props.isDisabled && !props.isPending
+      "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))] })] });
+  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))] })] });
 };
 
 const ModalBase = (props) => {
   var _a;
   const { size = "medium", withContentPaddingY = true, isOpen = false } = props;
-  return jsxRuntime.jsxs(ReactModal__default.default, { isOpen, data: { "test-id": (_a = props.dataTestId) !== null && _a !== void 0 ? _a : "react-modal" }, contentLabel: props.title, overlayClassName: classNames__default.default("ui-px-2 ui-py-15", "ui-z-20", "ui-fixed ui-top-0 ui-bottom-0 ui-left-0 ui-right-0", "ui-overflow-x-hidden ui-overflow-y-auto", "ui-bg-overlay"), onRequestClose: props.onCloseClick, shouldFocusAfterRender: false, shouldCloseOnOverlayClick: false, className: classNames__default.default("ui-mx-auto ui-my-0", "ui-relative", "ui-rounded-lg ui-bg-white ui-shadow-lg ui-outline-none", {
-    "ui-overflow-y-hidden": props.scrollableContent,
-    "ui-mt-17": props.withExtraMarginTop,
-    "md:ui-w-120": size === "dialog-medium",
-    "md:ui-w-80": size === "small" || size === "dialog-small",
-    "md:ui-w-132": size === "medium",
-    "md:ui-w-216": size === "wide"
+  return jsxRuntime.jsxs(ReactModal__default.default, { isOpen, data: { "test-id": (_a = props.dataTestId) !== null && _a !== void 0 ? _a : "react-modal" }, contentLabel: props.title, overlayClassName: classNames__default.default("ui:px-2 ui:py-15", "ui:z-20", "ui:fixed ui:top-0 ui:bottom-0 ui:left-0 ui:right-0", "ui:overflow-x-hidden ui:overflow-y-auto", "ui:bg-overlay"), onRequestClose: props.onCloseClick, shouldFocusAfterRender: false, shouldCloseOnOverlayClick: false, className: classNames__default.default("ui:mx-auto ui:my-0", "ui:relative", "ui:rounded-lg ui:bg-white ui:shadow-lg ui:outline-none", {
+    "ui:overflow-y-hidden": props.scrollableContent,
+    "ui:mt-17": props.withExtraMarginTop,
+    "ui:md:w-120": size === "dialog-medium",
+    "ui:md:w-80": size === "small" || size === "dialog-small",
+    "ui:md:w-132": size === "medium",
+    "ui:md:w-216": size === "wide"
   }), children: [props.title && jsxRuntime.jsx(ModalHeader, { title: props.title, onCloseClick: props.onCloseClick }), jsxRuntime.jsx("div", { className: classNames__default.default({
-    "ui-rounded-t-lg": !props.title,
-    "ui-max-h-135 ui-overflow-y-auto": props.scrollableContent
-  }), children: jsxRuntime.jsx("div", { className: classNames__default.default("ui-px-6", {
-    "ui-py-6": withContentPaddingY
+    "ui:rounded-t-lg": !props.title,
+    "ui:max-h-135 ui:overflow-y-auto": props.scrollableContent
+  }), 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 })] });
 };
 
@@ -1947,26 +1971,26 @@ Modal.setAppElement = ReactModal__default.default.setAppElement;
 const Tag = (_a) => {
   var { text, colorTheme = "gray", className, size = "base", variant = "flat", showIcon, truncate, children } = _a, rest = __rest(_a, ["text", "colorTheme", "className", "size", "variant", "showIcon", "truncate", "children"]);
   const isBordered = variant === "bordered" || "";
-  return jsxRuntime.jsxs(Stack, Object.assign({ axis: "x", gap: "xxxxs", className: classNames__default.default("ui-inline-flex ui-items-center ui-rounded-lg ui-px-2 ui-py-1", { "overflow-hidden": truncate }, className, {
+  return jsxRuntime.jsxs(Stack, Object.assign({ axis: "x", gap: "xxxxs", className: classNames__default.default("ui:inline-flex ui:items-center ui:rounded-lg ui:px-2 ui:py-1", { "overflow-hidden": truncate }, className, {
     [[
-      "ui-bg-negative-background ui-text-on-negative",
-      isBordered && "ui-border-negative-border"
+      "ui:bg-negative-background ui:text-on-negative",
+      isBordered && "ui:border-negative-border"
     ].join(" ")]: colorTheme === "red",
     [[
-      "ui-bg-warning-background ui-text-on-warning",
-      isBordered && "ui-border-warning-border"
+      "ui:bg-warning-background ui:text-on-warning",
+      isBordered && "ui:border-warning-border"
     ].join(" ")]: colorTheme === "amber",
     [[
-      "ui-bg-positive-background ui-text-on-positive",
-      isBordered && "ui-border-positive-border"
+      "ui:bg-positive-background ui:text-on-positive",
+      isBordered && "ui:border-positive-border"
     ].join(" ")]: colorTheme === "green",
     [[
-      "ui-bg-neutral-background ui-text-on-surface",
-      isBordered && "ui-border-neutral-border-high-contrast"
+      "ui:bg-neutral-background ui:text-on-surface",
+      isBordered && "ui:border-neutral-border-high-contrast"
     ].join(" ")]: colorTheme === "gray",
     [[
-      "ui-bg-primary-background ui-text-primary",
-      isBordered && "ui-border-primary-border"
+      "ui:bg-primary-background ui:text-primary",
+      isBordered && "ui:border-primary-border"
     ].join(" ")]: colorTheme === "blue"
   }, {
     /**
@@ -1975,14 +1999,14 @@ const Tag = (_a) => {
      * variants have the same dimensions, we need to adjust the padding to account for
      * the border width.
      */
-    "ui-border ui-px-[calc(theme('spacing.2')-1px)] ui-py-[calc(theme('spacing.1')-1px)]": variant === "bordered"
+    "ui:border ui:px-[calc(--spacing(2)-1px)] ui:py-[calc(--spacing(1)-1px)]": variant === "bordered"
   }) }, rest, { children: [showIcon && jsxRuntime.jsx(TagIcon, { colorTheme, size }), jsxRuntime.jsx(
     Text,
     {
       /**
        * Ensures the `small` size, with smaller text, is the same height as the `base` size.
        */
-      className: "ui-leading-5",
+      className: "ui:leading-5",
       color: "current",
       variant: size === "small" ? "sm-strong" : "base",
       truncate,
@@ -1991,7 +2015,7 @@ const Tag = (_a) => {
   )] }));
 };
 function TagIcon({ colorTheme, size }) {
-  const sizeClass = classNames__default.default({ "ui-h-[16px] ui-w-[16px]": size === "small" });
+  const sizeClass = classNames__default.default({ "ui:h-[16px] ui:w-[16px]": size === "small" });
   const props = { size: "s" };
   switch (colorTheme) {
     case "red":
@@ -1999,11 +2023,11 @@ function TagIcon({ colorTheme, size }) {
     case "amber":
       return jsxRuntime.jsx(SmallSquareIcon, Object.assign({}, props, { className: sizeClass }));
     case "green":
-      return jsxRuntime.jsx(SmallArrowUpIcon, Object.assign({}, props, { className: classNames__default.default(sizeClass, "ui-rotate-90") }));
+      return jsxRuntime.jsx(SmallArrowUpIcon, Object.assign({}, props, { className: classNames__default.default(sizeClass, "ui:rotate-90") }));
     case "gray":
-      return jsxRuntime.jsx(SmallDiamondIcon, Object.assign({}, props, { className: classNames__default.default(sizeClass, "ui-text-on-surface-variant") }));
+      return jsxRuntime.jsx(SmallDiamondIcon, Object.assign({}, props, { className: classNames__default.default(sizeClass, "ui:text-on-surface-variant") }));
     case "blue":
-      return jsxRuntime.jsx(SmallArrowUpIcon, Object.assign({}, props, { className: classNames__default.default(sizeClass, "ui-rotate-90") }));
+      return jsxRuntime.jsx(SmallArrowUpIcon, Object.assign({}, props, { className: classNames__default.default(sizeClass, "ui:rotate-90") }));
   }
 }
 
@@ -2011,42 +2035,42 @@ function ChatBubble(props) {
   const { as: Component = "div", children, className, sender: _, timestamp: __, readReceipt, color = "blue", tipPosition } = props, rest = __rest(props, ["as", "children", "className", "sender", "timestamp", "readReceipt", "color", "tipPosition"]);
   const isInteractive = (Component === "button" || Component === "a") && !rest.disabled;
   const tipPositionClasses = classNames__default.default({
-    "ui-hidden": !tipPosition,
-    "-ui-left-[11px] -ui-top-[11px] ui-rotate-45": tipPosition === "top-left",
-    "-ui-right-[11px] -ui-top-[11px] ui-rotate-45": tipPosition === "top-right",
-    "-ui-left-[11px] -ui-bottom-[11px] ui-rotate-[225deg]": tipPosition === "bottom-left",
-    "-ui-right-[11px] -ui-bottom-[11px] ui-rotate-[225deg]": tipPosition === "bottom-right"
+    "ui:hidden": !tipPosition,
+    "ui:-left-[11px] ui:-top-[11px] ui:rotate-45": tipPosition === "top-left",
+    "ui:-right-[11px] ui:-top-[11px] ui:rotate-45": tipPosition === "top-right",
+    "ui:-left-[11px] ui:-bottom-[11px] ui:rotate-225": tipPosition === "bottom-left",
+    "ui:-right-[11px] ui:-bottom-[11px] ui:rotate-225": tipPosition === "bottom-right"
   });
   const backgroundColorClasses = classNames__default.default({
-    "ui-bg-blue-100": color === "blue",
-    "ui-bg-slate-100": color === "grey"
+    "ui:bg-blue-100": color === "blue",
+    "ui:bg-slate-100": color === "grey"
   });
-  const tipColorClasses = classNames__default.default("ui-border-transparent", {
-    "ui-border-b-blue-100 ui-border-r-blue-100": color === "blue",
-    "ui-border-b-slate-100 ui-border-r-slate-100": color === "grey",
-    "group-hover/chat-bubble:ui-border-b-blue-50 group-hover/chat-bubble:ui-border-r-blue-50": isInteractive && color === "blue",
-    "group-hover/chat-bubble:ui-border-b-slate-50 group-hover/chat-bubble:ui-border-r-slate-50": isInteractive && color === "grey"
+  const tipColorClasses = classNames__default.default("ui:border-transparent", {
+    "ui:border-b-blue-100 ui:border-r-blue-100": color === "blue",
+    "ui:border-b-slate-100 ui:border-r-slate-100": color === "grey",
+    "ui:group-hover/chat-bubble:border-b-blue-50 ui:group-hover/chat-bubble:border-r-blue-50": isInteractive && color === "blue",
+    "ui:group-hover/chat-bubble:border-b-slate-50 ui:group-hover/chat-bubble:border-r-slate-50": isInteractive && color === "grey"
   });
-  const transitionClasses = "ui-transition-colors ui-duration-150 ui-ease-out";
-  return jsxRuntime.jsx(Component, Object.assign({}, rest, { className: classNames__default.default("ui-group/chat-bubble ui-text-left", {
-    "ui-pl-[16px]": tipPosition === "top-left" || tipPosition === "bottom-left",
-    "ui-pr-[16px]": tipPosition === "top-right" || tipPosition === "bottom-right"
-  }, transitionClasses, className), children: jsxRuntime.jsxs("div", { className: classNames__default.default("ui-transition-colors ui-duration-150 ui-ease-out", backgroundColorClasses, "ui-relative ui-grid ui-gap-xxs ui-p-m ui-radius-m", {
-    "group-hover/chat-bubble:ui-bg-blue-50": isInteractive && color === "blue",
-    "group-hover/chat-bubble:ui-bg-slate-50": isInteractive && color === "grey"
-  }), children: [jsxRuntime.jsx("div", { className: classNames__default.default(tipColorClasses, tipPositionClasses, transitionClasses, "ui-absolute ui-h-[11px] ui-w-[11px] ui-transform ui-border-[11px]") }), jsxRuntime.jsx(Meta, Object.assign({}, props)), jsxRuntime.jsx(Content$1, { children }), jsxRuntime.jsx("div", { className: "ui-absolute ui-radius-m" }), readReceipt && jsxRuntime.jsx(Text, { variant: "sm", children: readReceipt })] }) }));
+  const transitionClasses = "ui:transition-colors ui:duration-150 ui:ease-out";
+  return jsxRuntime.jsx(Component, Object.assign({}, rest, { className: classNames__default.default("ui:group/chat-bubble ui:text-left", {
+    "ui:pl-[16px]": tipPosition === "top-left" || tipPosition === "bottom-left",
+    "ui:pr-[16px]": tipPosition === "top-right" || tipPosition === "bottom-right"
+  }, transitionClasses, className), children: jsxRuntime.jsxs("div", { className: classNames__default.default("ui:transition-colors ui:duration-150 ui:ease-out", backgroundColorClasses, "ui:relative ui:grid ui:gap-xxs ui:p-m ui:radius-m", {
+    "ui:group-hover/chat-bubble:bg-blue-50": isInteractive && color === "blue",
+    "ui:group-hover/chat-bubble:bg-slate-50": isInteractive && color === "grey"
+  }), children: [jsxRuntime.jsx("div", { className: classNames__default.default(tipColorClasses, tipPositionClasses, transitionClasses, "ui:absolute ui:h-[11px] ui:w-[11px] ui:transform ui:border-11") }), jsxRuntime.jsx(Meta, Object.assign({}, props)), jsxRuntime.jsx(Content$1, { children }), jsxRuntime.jsx("div", { className: "ui:absolute ui:radius-m" }), readReceipt && jsxRuntime.jsx(Text, { variant: "sm", children: readReceipt })] }) }));
 }
 function Meta(props) {
   const { sender, timestamp } = props;
   if (!sender && !timestamp) {
     return null;
   }
-  return jsxRuntime.jsxs("div", { className: "ui-flex ui-flex-wrap ui-items-center ui-gap-x-xs", children: [sender && jsxRuntime.jsx(Text, { variant: "strong", children: sender }), timestamp && jsxRuntime.jsx(Text, { variant: "sm", children: timestamp })] });
+  return jsxRuntime.jsxs("div", { className: "ui:flex ui:flex-wrap ui:items-center ui:gap-x-xs", children: [sender && jsxRuntime.jsx(Text, { variant: "strong", children: sender }), timestamp && jsxRuntime.jsx(Text, { variant: "sm", children: timestamp })] });
 }
 function Content$1(props) {
   const { children } = props;
   if (typeof children === "string") {
-    return jsxRuntime.jsx(Text, { className: "ui-whitespace-break-spaces", children });
+    return jsxRuntime.jsx(Text, { className: "ui:whitespace-break-spaces", children });
   }
   return jsxRuntime.jsx(jsxRuntime.Fragment, { children });
 }
@@ -2055,7 +2079,7 @@ function ChatBubbleText(props) {
 }
 ChatBubble.Text = ChatBubbleText;
 function ChatBubbleDateIndicator(props) {
-  return jsxRuntime.jsx("div", { className: "ui-flex ui-justify-center", children: jsxRuntime.jsx(Tag, { colorTheme: "gray", size: "small", children: props.children }) });
+  return jsxRuntime.jsx("div", { className: "ui:flex ui:justify-center", children: jsxRuntime.jsx(Tag, { colorTheme: "gray", size: "small", children: props.children }) });
 }
 ChatBubble.DateIndicator = ChatBubbleDateIndicator;
 
@@ -2086,27 +2110,27 @@ const Avatar = ({ color = "slate", size = "medium", applyGroupOffset, src, alt,
       mounted = false;
     };
   }, [defaultImage, src]);
-  const sizeClassName = classNames__default.default("ui-rounded-full", {
-    "ui-h-32 ui-w-32": size === "large",
-    "ui-h-16 ui-w-16": size === "medium",
-    "ui-h-9 ui-w-9": size === "small",
-    "ui-h-6 ui-w-6": size === "xsmall"
+  const sizeClassName = classNames__default.default("ui:rounded-full", {
+    "ui:h-32 ui:w-32": size === "large",
+    "ui:h-16 ui:w-16": size === "medium",
+    "ui:h-9 ui:w-9": size === "small",
+    "ui:h-6 ui:w-6": size === "xsmall"
   });
   const groupOffsetClassNames = classNames__default.default({
-    "-ui-ml-[calc(theme('spacing.32')/4)]": size === "large" && applyGroupOffset,
-    "-ui-ml-[calc(theme('spacing.16')/4)]": size === "medium" && applyGroupOffset,
-    "-ui-ml-[calc(theme('spacing.9')/4)]": size === "small" && applyGroupOffset,
-    "-ui-ml-[calc(theme('spacing.6')/4)]": size === "xsmall" && applyGroupOffset
+    "ui:-ml-[calc(theme('spacing.32')/4)]": size === "large" && applyGroupOffset,
+    "ui:-ml-[calc(theme('spacing.16')/4)]": size === "medium" && applyGroupOffset,
+    "ui:-ml-[calc(theme('spacing.9')/4)]": size === "small" && applyGroupOffset,
+    "ui:-ml-[calc(theme('spacing.6')/4)]": size === "xsmall" && applyGroupOffset
   });
   const colorClassName = classNames__default.default({
-    "ui-bg-neutral-200 ui-text-on-surface": color === "slate",
-    "ui-bg-primary ui-text-white": color === "primary"
+    "ui:bg-neutral-200 ui:text-on-surface": color === "slate",
+    "ui:bg-primary ui:text-white": color === "primary"
   });
-  const containerClassName = classNames__default.default(className, sizeClassName, groupOffsetClassNames, colorClassName, "ui-flex ui-items-center ui-justify-center");
+  const containerClassName = classNames__default.default(className, sizeClassName, groupOffsetClassNames, colorClassName, "ui:flex ui:items-center ui:justify-center");
   const textClassName = classNames__default.default({
-    "ui-text-5xl": size === "large",
-    "ui-text-2xl": size === "medium",
-    "ui-text-sm": size === "small" || size === "xsmall"
+    "ui:text-5xl": size === "large",
+    "ui:text-2xl": size === "medium",
+    "ui:text-sm": size === "small" || size === "xsmall"
   });
   const imageClassName = classNames__default.default(sizeClassName);
   const renderAvatar = () => {
@@ -2125,7 +2149,7 @@ const Avatar = ({ color = "slate", size = "medium", applyGroupOffset, src, alt,
   return jsxRuntime.jsx("div", { className: containerClassName, children: jsxRuntime.jsx("div", { children: renderAvatar() }) });
 };
 function ScreenReaderText({ children }) {
-  return jsxRuntime.jsx("span", { className: "ui-sr-only", children });
+  return jsxRuntime.jsx("span", { className: "ui:sr-only", children });
 }
 
 const AvatarGroup = (props) => {
@@ -2142,15 +2166,15 @@ const AvatarGroup = (props) => {
     if (index + 1 > maxAvatars) {
       return null;
     }
-    return jsxRuntime.jsx(Avatar, Object.assign({}, child.props, { applyGroupOffset: index > 0, className: classNames__default.default(child.props.className, `ui-outline`, {
-      "ui-outline-surface": !props.outlineColor || props.outlineColor === "surface",
-      "ui-outline-slate-50": props.outlineColor === "slate-50",
-      "ui-outline-slate-100": props.outlineColor === "slate-100",
-      "ui-outline-white": props.outlineColor === "white"
+    return jsxRuntime.jsx(Avatar, Object.assign({}, child.props, { applyGroupOffset: index > 0, className: classNames__default.default(child.props.className, `ui:outline`, {
+      "ui:outline-surface": !props.outlineColor || props.outlineColor === "surface",
+      "ui:outline-slate-50": props.outlineColor === "slate-50",
+      "ui:outline-slate-100": props.outlineColor === "slate-100",
+      "ui:outline-white": props.outlineColor === "white"
     }, {
-      "ui-outline-2": child.props.size === "xsmall" || child.props.size === "small",
-      "ui-outline-4": child.props.size === "medium",
-      "ui-outline-8": child.props.size === "large"
+      "ui:outline-2": child.props.size === "xsmall" || child.props.size === "small",
+      "ui:outline-4": child.props.size === "medium",
+      "ui:outline-8": child.props.size === "large"
     }) }));
   }), jsxRuntime.jsx(MoreAvatarsLabel, Object.assign({}, props, { maxAvatars }))] }));
 };
@@ -2169,19 +2193,19 @@ function MoreAvatarsLabel(props) {
 const Badge = (props) => {
   var _a;
   const containerClasses = classNames__default.default([
-    "ui-inline-flex",
-    "ui-items-center",
-    "ui-justify-center",
-    "ui-rounded-full",
-    "ui-h-6",
-    "ui-min-w-24",
-    "ui-px-2",
-    "ui-bg-primary-background"
+    "ui:inline-flex",
+    "ui:items-center",
+    "ui:justify-center",
+    "ui:rounded-full",
+    "ui:h-6",
+    "ui:min-w-24",
+    "ui:px-2",
+    "ui:bg-primary-background"
   ], props.className);
   const textClasses = classNames__default.default([
-    "ui-text-xs",
-    "ui-text-primary",
-    "ui-leading-none"
+    "ui:text-xs",
+    "ui:text-primary",
+    "ui:leading-none"
   ]);
   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 }) });
@@ -2190,16 +2214,16 @@ const Badge = (props) => {
 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({
-    "ui-px-[calc(theme('spacing.xxs')-1px)]": size === "medium",
-    "ui-px-[calc(theme('spacing.s')-1px)]": size === "large"
+    "ui:px-[calc(var(--ui-spacing-xxs)-1px)]": size === "medium",
+    "ui:px-[calc(var(--ui-spacing-s)-1px)]": size === "large"
   }, props.className) }));
 });
 
 const SecondaryIconButton = React__namespace.default.forwardRef((props, innerRef) => {
   const { children: icon, size = "medium", label } = props, rest = __rest(props, ["children", "size", "label"]);
   return jsxRuntime.jsx(SecondaryButton, Object.assign({ ref: innerRef }, rest, { "aria-label": label, size, leadingIcon: icon, className: classNames__default.default({
-    "ui-px-[calc(theme('spacing.xxs')-1px)]": size === "medium",
-    "ui-px-[calc(theme('spacing.s')-1px)]": size === "large"
+    "ui:px-[calc(var(--ui-spacing-xxs)-1px)]": size === "medium",
+    "ui:px-[calc(var(--ui-spacing-s)-1px)]": size === "large"
   }, props.className) }));
 });
 
@@ -2209,20 +2233,20 @@ const TertiaryIconButton = React__namespace.default.forwardRef((props, innerRef)
     /**
      * Add horizontal padding and possibly undo it with negative margin.
      */
-    "ui-px-[calc(theme('spacing.xxs')-1px)]": size === "medium",
-    "-ui-mx-[calc(theme('spacing.xxs')-1px)]": expand && size === "medium",
-    "ui-px-[calc(theme('spacing.s')-1px)]": size === "large",
-    "-ui-mx-[calc(theme('spacing.s')-1px)]": expand && size === "large",
-    "-ui-my-[calc(theme('spacing.xxs')-1px)]": expand && size === "medium",
-    "-ui-my-[calc(theme('spacing.s')-1px)]": expand && size === "large"
+    "ui:px-[calc(var(--ui-spacing-xxs)-1px)]": size === "medium",
+    "ui:-mx-[calc(theme('spacing.xxs')-1px)]": expand && size === "medium",
+    "ui:px-[calc(var(--ui-spacing-s)-1px)]": size === "large",
+    "ui:-mx-[calc(theme('spacing.s')-1px)]": expand && size === "large",
+    "ui:-my-[calc(theme('spacing.xxs')-1px)]": expand && size === "medium",
+    "ui:-my-[calc(theme('spacing.s')-1px)]": expand && size === "large"
   }, props.className) }));
 });
 
 const DotButton = (_a) => {
   var { onClick, isActive, className } = _a, rest = __rest(_a, ["onClick", "isActive", "className"]);
-  const classes = classNames__default.default(className, "ui-rounded-full", "hover:ui-bg-primary", "ui-size-2", {
-    "ui-bg-primary": isActive,
-    "ui-bg-slate-300": !isActive
+  const classes = classNames__default.default(className, "ui:rounded-full", "ui:hover:bg-primary", "ui:size-2", {
+    "ui:bg-primary": isActive,
+    "ui:bg-slate-300": !isActive
   });
   return jsxRuntime.jsx(Box, Object.assign({ as: "button", onClick, className: classes }, rest));
 };
@@ -2264,10 +2288,10 @@ const Carousel = ({ id, className, slides = [], labels }) => {
     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: "m", children: [jsxRuntime.jsxs(Stack, { axis: "x", align: "stretch", width: "full", gap: "m", children: [jsxRuntime.jsx(Stack, { justify: "center", children: jsxRuntime.jsx(SecondaryButton, { onClick: onClickPrevious, leadingIcon: jsxRuntime.jsx(LeftArrowIcon, {}), "aria-label": labels === null || labels === void 0 ? void 0 : labels.previousButton, disabled: slides.length === 0 }) }), jsxRuntime.jsx(Stack, { as: "ol", 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": labels === null || labels === void 0 ? void 0 : labels.nextButton, disabled: slides.length === 0 }) })] }), jsxRuntime.jsx(Stack, { align: "center", children: jsxRuntime.jsx(DotList, { activeIndex: currentIndex, amount: slides.length, onClickIndex: scrollToIndex }) })] }) });
+  return jsxRuntime.jsx("div", { ref: slidesContainer, id, className, children: jsxRuntime.jsxs(Stack, { width: "full", align: "stretch", gap: "m", children: [jsxRuntime.jsxs(Stack, { axis: "x", align: "stretch", width: "full", gap: "m", children: [jsxRuntime.jsx(Stack, { justify: "center", children: jsxRuntime.jsx(SecondaryButton, { onClick: onClickPrevious, leadingIcon: jsxRuntime.jsx(LeftArrowIcon, {}), "aria-label": labels === null || labels === void 0 ? void 0 : labels.previousButton, disabled: slides.length === 0 }) }), jsxRuntime.jsx(Stack, { as: "ol", 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": labels === null || labels === void 0 ? void 0 : labels.nextButton, disabled: slides.length === 0 }) })] }), jsxRuntime.jsx(Stack, { align: "center", children: jsxRuntime.jsx(DotList, { activeIndex: currentIndex, amount: slides.length, onClickIndex: scrollToIndex }) })] }) });
 };
 
-var css_248z$c = "/**\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-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  --tw-border-opacity: 1;\n  border-color: rgb(153 27 27 / var(--tw-border-opacity, 1));\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}";
+var css_248z$c = "/*! tailwindcss v4.1.12 | 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}\n.cweb-checkbox.type-regular .cweb-checkbox-icon-container {\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$c);
 
 const CheckboxInner = (props) => {
@@ -2279,7 +2303,7 @@ const CheckboxInner = (props) => {
     "is-focused": isFocused,
     "is-checked": checked && !indeterminate,
     "is-indeterminate": indeterminate,
-    "ui-opacity-50 ui-cursor-not-allowed is-disabled": isDisabled,
+    "ui:opacity-50 ui:cursor-not-allowed is-disabled": isDisabled,
     hasError: error
   });
   React.useEffect(() => {
@@ -2318,22 +2342,22 @@ const CheckboxInner = (props) => {
      * 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 sm:ui-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", "sm:ui-h-4 sm:ui-w-4", {
-      "ui-bg-primary": checked || indeterminate,
-      "ui-bg-white": !checked && !indeterminate,
-      "group-hover:ui-bg-blue-50": type === "regular" && !(checked || indeterminate),
-      "group-hover:ui-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 sm:ui-h-2 sm:ui-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 })] })] }) })
+    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",
+    className: "ui:ml-2 ui:select-none",
     "data-test-id": "checkbox-text"
   };
   if (renderLabel) {
@@ -2347,21 +2371,21 @@ function Label(props) {
 const Checkbox = React__namespace.default.forwardRef((props, ref) => jsxRuntime.jsx(CheckboxInner, Object.assign({}, props, { innerRef: ref })));
 
 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 });
+  return jsxRuntime.jsx(SecondaryButton, { className: "ui:bg-transparent! ui:px-s! ui:radius-xxxxs!", onClick, leadingIcon, trailingIcon: accessory, children: text });
 };
 
 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;
+  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;
 };
 
 function Link(props) {
   const { as: Element = "a", className } = props, rest = __rest(props, ["as", "className"]);
-  const ownClasses = ["ui-cursor-pointer ui-focus:ui-outline-primary"];
+  const ownClasses = ["ui:cursor-pointer ui:focus:outline-primary"];
   if (typeof props.children === "string") {
-    ownClasses.push("ui-text-primary", "hover:ui-underline", "hover:ui-text-primary-dark");
+    ownClasses.push("ui:text-primary", "ui:hover:underline", "ui:hover:text-primary-dark");
   }
   const classes = classNames__default.default(ownClasses, className);
   return jsxRuntime.jsx(Element, Object.assign({ className: classes }, rest));
@@ -2369,13 +2393,13 @@ function Link(props) {
 
 const NotificationBanner = (_a) => {
   var { icon, className, stretch = true, centerContent = false, noBorder = false, color = "base", linkProps, text, children } = _a, boxProps = __rest(_a, ["icon", "className", "stretch", "centerContent", "noBorder", "color", "linkProps", "text", "children"]);
-  const classes = classNames__default.default("ui-min-h-13", className, {
-    "ui-bg-slate-100 ui-border-slate-300 ui-text-slate-800": color === "base",
-    "ui-bg-blue-50 ui-border-primary-light ui-text-primary": color === "blue",
-    "ui-bg-red-50 ui-border-red-700 ui-text-red-700": color === "red",
-    "ui-bg-green-50 ui-border-green-700 ui-text-green-700": color === "green",
-    "ui-bg-amber-50 ui-border-amber-700 ui-text-amber-700": color === "amber",
-    "ui-border ui-border-solid": !noBorder
+  const classes = classNames__default.default("ui:min-h-13", className, {
+    "ui:bg-slate-100 ui:border-slate-300 ui:text-slate-800": color === "base",
+    "ui:bg-blue-50 ui:border-primary-light ui:text-primary": color === "blue",
+    "ui:bg-red-50 ui:border-red-700 ui:text-red-700": color === "red",
+    "ui:bg-green-50 ui:border-green-700 ui:text-green-700": color === "green",
+    "ui:bg-amber-50 ui:border-amber-700 ui:text-amber-700": color === "amber",
+    "ui:border ui:border-solid": !noBorder
   });
   const textColor = {
     red: "red",
@@ -2387,11 +2411,11 @@ const NotificationBanner = (_a) => {
   };
   const colour = color ? textColor[color] : "base";
   return jsxRuntime.jsxs(Stack, Object.assign({ p: "m", as: "div", axis: "x", align: "center", justify: centerContent ? "center" : "start", "data-test-id": "notification-banner", borderRadius: "xxxxs", width: stretch ? "full" : void 0, className: classNames__default.default(classes, {
-    "ui-inline-flex": !stretch
+    "ui:inline-flex": !stretch
   }) }, boxProps, { children: [icon && (typeof icon === "function" ? React__namespace.default.createElement(icon, {
-    className: "ui-w-6 ui-h-6 ui-mr-3 ui-flex-shrink-0"
-  }) : jsxRuntime.jsx("img", { src: icon, className: "ui-mr-3 ui-h-6 ui-w-6" })), jsxRuntime.jsxs("div", { className: "ui-flex ui-flex-col", children: [children, (text || linkProps) && jsxRuntime.jsxs("div", { className: "ui-flex ui-flex-row ui-items-center", children: [text && jsxRuntime.jsx(Text, { className: classNames__default.default({
-    "ui-mr-1": linkProps
+    className: "ui:w-6 ui:h-6 ui:mr-3 ui:shrink-0"
+  }) : jsxRuntime.jsx("img", { src: icon, className: "ui:mr-3 ui:h-6 ui:w-6" })), jsxRuntime.jsxs("div", { className: "ui:flex ui:flex-col", children: [children, (text || linkProps) && jsxRuntime.jsxs("div", { className: "ui:flex ui:flex-row ui:items-center", children: [text && jsxRuntime.jsx(Text, { className: classNames__default.default({
+    "ui:mr-1": linkProps
   }), "data-test-id": "notification-text", color: colour, children: text }), linkProps && jsxRuntime.jsx(Link, { "data-test-id": "notification-text-link", "aria-disabled": !linkProps.enabled, rel: "noopener", target: "_blank", onClick: linkProps.handleClick, children: linkProps.text })] })] })] }));
 };
 
@@ -2403,12 +2427,12 @@ const HelperAndErrorText = (props) => {
   return jsxRuntime.jsx(Box, { id: props.describingId, children: props.errorText && jsxRuntime.jsx(Text, { variant: "sm", color: "red", children: props.errorText }) });
 };
 
-var css_248z$b = ".ui-radio-form-field-label input[type=\"radio\"]:checked + .ui-radio-circle {\n  --tw-bg-opacity: 1;\n  background-color: rgb(30 64 175 / var(--tw-bg-opacity, 1));\n  --tw-border-opacity: 1;\n  border-color: rgb(30 64 175 / var(--tw-border-opacity, 1));\n}\n.ui-radio-form-field-label input[type=\"radio\"]:disabled + .ui-radio-circle {\n  opacity: 0.5;\n}\n\n.ui-radio-form-field-label[data-has-error=\"true\"] .ui-radio-circle {\n  --tw-border-opacity: 1;\n  border-color: rgb(185 28 28 / var(--tw-border-opacity, 1));\n  outline-color: #FFF1F1;\n}\n\n.ui-radio-form-field-label\n  input[type=\"radio\"]:checked\n  + .ui-radio-circle\n  .ui-radio-inner-circle {\n  --tw-bg-opacity: 1;\n  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));\n}\n";
+var css_248z$b = "/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */\n.ui\\:radio-form-field-label input[type=\"radio\"]:checked + .ui\\:radio-circle {\n  background-color: var(--ui-color-blue-800);\n  border-color: var(--ui-color-blue-800);\n}\n.ui\\:radio-form-field-label input[type=\"radio\"]:disabled + .ui\\:radio-circle {\n  opacity: 0.5;\n}\n.ui\\:radio-form-field-label[data-has-error=\"true\"] .ui\\:radio-circle {\n  border-color: var(--ui-color-red-700, #b91c1c);\n  outline-color: #FFF1F1;\n}\n.ui\\:radio-form-field-label\n  input[type=\"radio\"]:checked\n  + .ui\\:radio-circle\n  .ui\\:radio-inner-circle {\n  background-color: var(--ui-color-white, #fff);\n}\n";
 styleInject(css_248z$b);
 
 const StyledRadio = React__namespace.default.forwardRef((props, ref) => {
   const { className } = props, attributes = __rest(props, ["className"]);
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("input", Object.assign({ type: "radio" }, attributes, { className: classNames__default.default("ui-hidden", className), ref })), jsxRuntime.jsx("span", { "aria-hidden": true, className: classNames__default.default("ui-radio-circle ui-flex ui-h-4 ui-w-4 ui-flex-col ui-items-center ui-justify-center ui-rounded-xl ui-border ui-border-slate-300", "ui-transition-colors ui-duration-300 ui-ease-in-out"), children: jsxRuntime.jsx("span", { className: "ui-radio-inner-circle ui-block ui-h-1.5 ui-w-1.5 ui-rounded-xl ui-transition-colors ui-duration-300 ui-ease-in-out" }) })] });
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("input", Object.assign({ type: "radio" }, attributes, { className: classNames__default.default("ui:hidden", className), ref })), jsxRuntime.jsx("span", { "aria-hidden": true, className: classNames__default.default("ui:radio-circle ui:flex ui:h-4 ui:w-4 ui:flex-col ui:items-center ui:justify-center ui:rounded-xl ui:border ui:border-slate-300", "ui:transition-colors ui:duration-300 ui:ease-in-out"), children: jsxRuntime.jsx("span", { className: "ui:radio-inner-circle ui:block ui:h-1.5 ui:w-1.5 ui:rounded-xl ui:transition-colors ui:duration-300 ui:ease-in-out" }) })] });
 });
 
 function RadioInner(_a) {
@@ -2416,13 +2440,13 @@ function RadioInner(_a) {
   const { value, disabled } = otherProps;
   const nameHtmlFor = `${name}-field-${value}`;
   const semanticId = React__namespace.default.useId();
-  return jsxRuntime.jsxs(Stack, { as: "label", axis: "x", gap: "xs", 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: "xs", 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 })] })] });
 }
 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) => {
+  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 (!isNil__default.default(defaultValue)) {
       defaultChecked = defaultValue === option.value;
@@ -2456,7 +2480,7 @@ const ConfirmationDialogMessage = (props) => {
   if (typeof message === "string") {
     return jsxRuntime.jsx(Text, { text: message, containsDangerousHtml: true });
   }
-  return jsxRuntime.jsx("div", { className: "ui-space-y-2", children: message.map((messageLine) => jsxRuntime.jsx(Text, { containsDangerousHtml: true, children: messageLine }, messageLine)) });
+  return jsxRuntime.jsx("div", { className: "ui:space-y-2", children: message.map((messageLine) => jsxRuntime.jsx(Text, { containsDangerousHtml: true, children: messageLine }, messageLine)) });
 };
 
 const ConfirmationDialog = (_a) => {
@@ -2483,7 +2507,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 })
-  }, 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 })] }) });
+  }, 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 })] }) });
 };
 
 const LocaleContext = React.createContext("en-GB");
@@ -2520,12 +2544,12 @@ const DatePicker = (props) => {
   React.useEffect(() => {
     updateLocale(locale);
   }, [locale]);
-  const pickerClassName = classNames__default.default("cweb-datepicker ui-text-slate-800 ui-text-sm", className, {
-    "!ui-z-10": zIndex === 10,
-    "!ui-z-20": zIndex === 20,
-    "!ui-z-30": zIndex === 30,
-    "!ui-z-40": zIndex === 40,
-    "!ui-z-50": zIndex === 50
+  const pickerClassName = classNames__default.default("cweb-datepicker ui:text-slate-800 ui:text-sm", className, {
+    "ui:z-10!": zIndex === 10,
+    "ui:z-20!": zIndex === 20,
+    "ui:z-30!": zIndex === 30,
+    "ui:z-40!": zIndex === 40,
+    "ui:z-50!": zIndex === 50
   });
   const getDateFormat = () => {
     const { formatDateWithTime = false } = props;
@@ -2538,12 +2562,12 @@ const DatePicker = (props) => {
   };
   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 }) }));
+    "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 }) }));
 };
 
 var img$2 = "data:image/svg+xml,%3csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 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' fill='%239CA3AF'/%3e%3c/svg%3e";
@@ -2727,9 +2751,9 @@ class Dropdown extends React.PureComponent {
     __publicField$1(this, "renderIndividualItem", (item) => {
       const { highlightIndex } = this.state;
       const isItemSelected = item.highlightIndex === highlightIndex;
-      const itemClassName = classNames__default.default("dropdown-list-item ui-p-3", {
+      const itemClassName = classNames__default.default("dropdown-list-item ui:p-3", {
         "is-selected": isItemSelected,
-        "ui-flex ui-flex-row ui-justify-between ui-space-x-2": isItemSelected
+        "ui:flex ui:flex-row ui:justify-between ui:space-x-2": isItemSelected
       });
       const textType = isItemSelected ? "strong" : "base";
       return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2752,7 +2776,7 @@ class Dropdown extends React.PureComponent {
             /* @__PURE__ */ jsxRuntime.jsx(
               "img",
               {
-                className: classNames__default.default({ "ui-hidden": !isItemSelected }),
+                className: classNames__default.default({ "ui:hidden": !isItemSelected }),
                 src: img$1,
                 alt: "checked"
               }
@@ -2764,10 +2788,10 @@ class Dropdown extends React.PureComponent {
     });
     __publicField$1(this, "renderGroupedItems", (item) => {
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dropdown-list-item-group", children: [
-        item.title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ui-bg-main-background ui-p-3", tabIndex: "-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+        item.title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ui:bg-main-background ui:p-3", tabIndex: "-1", children: /* @__PURE__ */ jsxRuntime.jsx(
           Text,
           {
-            className: "ui-uppercase",
+            className: "ui:uppercase",
             "data-test-id": item.text,
             text: item.title,
             type: "sm",
@@ -2847,10 +2871,10 @@ class Dropdown extends React.PureComponent {
             {
               ...otherProps,
               className: classNames__default.default(
-                "dropdown-header ui-cursor-pointer ui-space-x-2 ui-border ui-border-solid ui-p-3",
+                "dropdown-header ui:cursor-pointer ui:space-x-2 ui:border ui:border-solid ui:p-3",
                 {
-                  "ui-border-primary-dark": isDropdownOpen,
-                  "ui-border-input-border hover:ui-border-input-border-dark": !isDropdownOpen
+                  "ui:border-primary-dark": isDropdownOpen,
+                  "ui:border-input-border hover:ui:border-input-border-dark": !isDropdownOpen
                 }
               ),
               onClick: onDropdownClick,
@@ -2946,7 +2970,7 @@ const InfoField = (props) => {
       };
       break;
   }
-  return jsxRuntime.jsxs(Stack, { axis: "x", align: "center", gap: "s", 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-no-wrap": !props.supportsMultiline }), children: props.label }), jsxRuntime.jsx(Text, { className: classNames__default.default({ "ui-break-words": props.supportsMultiline }, { "ui-whitespace-no-wrap": !props.supportsMultiline }), truncate: !props.supportsMultiline, children: props.value })] }))] });
+  return jsxRuntime.jsxs(Stack, { axis: "x", align: "center", gap: "s", 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 })] }))] });
 };
 
 function cn(...inputs) {
@@ -2968,30 +2992,30 @@ const FlyOutMenuContent = React__namespace.forwardRef((_a, ref) => {
   } = _a, props = __rest(_a, ["className", "sideOffset", "align", "container"]);
   return jsxRuntime.jsx(FlyOutMenuPrimitive__namespace.Portal, { container, children: jsxRuntime.jsx(FlyOutMenuPrimitive__namespace.Content, Object.assign({ onClick: (event) => {
     event.stopPropagation();
-  }, ref, align, sideOffset, className: cn("ui-z-50 ui-min-w-[8rem] ui-max-w-[30ch] ui-overflow-hidden ui-border-1 ui-border-color-border ui-bg-white ui-shadow-large ui-radius-m", "data-[state=open]:ui-animate-in data-[state=closed]:ui-animate-out data-[state=closed]:ui-fade-out-0 data-[state=open]:ui-fade-in-0 data-[state=closed]:ui-zoom-out-95 data-[state=open]:ui-zoom-in-95 data-[side=bottom]:ui-slide-in-from-top-2 data-[side=left]:ui-slide-in-from-right-2 data-[side=right]:ui-slide-in-from-left-2 data-[side=top]:ui-slide-in-from-bottom-2", className) }, props)) });
+  }, ref, align, sideOffset, className: cn("ui:z-50 ui:min-w-[8rem] ui:max-w-[30ch] ui:overflow-hidden ui:border ui:border-color-border ui:bg-white ui:shadow-large ui:radius-m", "ui:data-[state=open]:animate-in ui:data-[state=closed]:animate-out ui:data-[state=closed]:fade-out-0 ui:data-[state=open]:fade-in-0 ui:data-[state=closed]:zoom-out-95 ui:data-[state=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", className) }, props)) });
 });
 FlyOutMenuContent.displayName = FlyOutMenuPrimitive__namespace.Content.displayName;
 const FlyOutMenuItem = React__namespace.forwardRef((_a, ref) => {
   var { className, icon, children } = _a, props = __rest(_a, ["className", "icon", "children"]);
-  return jsxRuntime.jsxs(FlyOutMenuPrimitive__namespace.Item, Object.assign({ ref, className: cn("ui-gap-m", "ui-relative ui-flex ui-select-none ui-items-center ui-rounded-sm ui-text-sm ui-outline-none ui-transition-colors", "focus:text-accent-foreground focus:ui-bg-primary-background", className) }, props, { children: [icon, children] }));
+  return jsxRuntime.jsxs(FlyOutMenuPrimitive__namespace.Item, Object.assign({ ref, className: cn("ui:gap-m", "ui:relative ui:flex ui:select-none ui:items-center ui:rounded-sm ui:text-sm ui:outline-none ui:transition-colors", "focus:text-accent-foreground ui:focus:bg-primary-background", className) }, props, { children: [icon, children] }));
 });
 FlyOutMenuItem.displayName = FlyOutMenuPrimitive__namespace.Item.displayName;
 const FlyOutMenuLabel = React__namespace.forwardRef((_a, ref) => {
   var { className } = _a, props = __rest(_a, ["className"]);
-  return jsxRuntime.jsx(FlyOutMenuPrimitive__namespace.Label, Object.assign({ ref, className: cn("ui-px-s ui-pb-xxs ui-pt-l", className) }, props, { children: jsxRuntime.jsx(Text, { variant: "strong", children: props.children }) }));
+  return jsxRuntime.jsx(FlyOutMenuPrimitive__namespace.Label, Object.assign({ ref, className: cn("ui:px-s ui:pb-xxs ui:pt-l", className) }, props, { children: jsxRuntime.jsx(Text, { variant: "strong", children: props.children }) }));
 });
 FlyOutMenuLabel.displayName = FlyOutMenuPrimitive__namespace.Label.displayName;
 const FlyOutMenuSeparator = React__namespace.forwardRef((_a, ref) => {
   var { className, color = "divider" } = _a, props = __rest(_a, ["className", "color"]);
-  return jsxRuntime.jsx(FlyOutMenuPrimitive__namespace.Separator, Object.assign({ ref, className: cn("ui-h-px", {
-    "ui-bg-color-divider": color === "divider",
-    "ui-bg-neutral-border-high-contrast": color === "interactive"
+  return jsxRuntime.jsx(FlyOutMenuPrimitive__namespace.Separator, Object.assign({ ref, className: cn("ui:h-px", {
+    "ui:bg-color-divider": color === "divider",
+    "ui:bg-neutral-border-high-contrast": color === "interactive"
   }, className) }, props));
 });
 FlyOutMenuSeparator.displayName = FlyOutMenuPrimitive__namespace.Separator.displayName;
 const ItemButton = (props) => {
   const { children, icon } = props, rest = __rest(props, ["children", "icon"]);
-  return jsxRuntime.jsxs("button", Object.assign({}, rest, { className: "ui-flex ui-w-full ui-gap-s ui-p-s", children: [React__namespace.isValidElement(icon) ? React__namespace.cloneElement(icon, { className: "ui-flex-shrink-0" }) : null, jsxRuntime.jsx(Text, { className: "ui-mt-[2px] ui-text-start", children })] }));
+  return jsxRuntime.jsxs("button", Object.assign({}, rest, { className: "ui:flex ui:w-full ui:gap-s ui:p-s", children: [React__namespace.isValidElement(icon) ? React__namespace.cloneElement(icon, { className: "ui:shrink-0" }) : null, jsxRuntime.jsx(Text, { className: "ui:mt-[2px] ui:text-start", children })] }));
 };
 const FlyOutMenuButtonItem = (props) => {
   const { children, icon } = props, rest = __rest(props, ["children", "icon"]);
@@ -2999,17 +3023,17 @@ const FlyOutMenuButtonItem = (props) => {
 };
 const FlyOutMenuChildrenItem = (props) => {
   const { children, icon } = props, rest = __rest(props, ["children", "icon"]);
-  return jsxRuntime.jsxs("div", Object.assign({}, rest, { className: "ui-flex ui-w-full ui-gap-s ui-p-s", children: [React__namespace.isValidElement(icon) ? React__namespace.cloneElement(icon, { className: "ui-flex-shrink-0" }) : null, jsxRuntime.jsx("div", { className: "ui-mt-[2px] ui-w-full", children })] }));
+  return jsxRuntime.jsxs("div", Object.assign({}, rest, { className: "ui:flex ui:w-full ui:gap-s ui:p-s", children: [React__namespace.isValidElement(icon) ? React__namespace.cloneElement(icon, { className: "ui:shrink-0" }) : null, jsxRuntime.jsx("div", { className: "ui:mt-[2px] ui:w-full", children })] }));
 };
 const FlyOutMenuSwitchItem = React__namespace.forwardRef((props, forwardedRef) => {
   const { children, icon, onSelect, checkedIndicator } = props, rest = __rest(props, ["children", "icon", "onSelect", "checkedIndicator"]);
-  return jsxRuntime.jsx(FlyOutMenuPrimitive__namespace.CheckboxItem, Object.assign({ ref: forwardedRef, className: "ui-outline-none focus:ui-bg-primary-background", onSelect: (event) => {
+  return jsxRuntime.jsx(FlyOutMenuPrimitive__namespace.CheckboxItem, Object.assign({ ref: forwardedRef, className: "ui:outline-none ui:focus:bg-primary-background", onSelect: (event) => {
     event.preventDefault();
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(event);
-  } }, rest, { children: jsxRuntime.jsx("div", { className: "ui-flex ui-w-full", children: jsxRuntime.jsxs("label", { className: "ui-inline-flex ui-w-full ui-cursor-pointer ui-p-s", children: [React__namespace.isValidElement(icon) ? React__namespace.cloneElement(icon, { className: "ui-flex-shrink-0" }) : null, jsxRuntime.jsxs("div", { className: "ui-inline-flex ui-w-full ui-flex-row-reverse ui-gap-m", children: [jsxRuntime.jsx("div", { className: "ui-peer ui-ml-auto", children: checkedIndicator !== null && checkedIndicator !== void 0 ? checkedIndicator : jsxRuntime.jsx("div", { className: classNames__default.default("ui-relative ui-h-6 ui-w-11 ui-rounded-full ui-transition-colors", "after:ui-absolute after:ui-start-[2px] after:ui-top-[2px] after:ui-h-5 after:ui-w-5 after:ui-rounded-full after:ui-border after:ui-border-slate-300 after:ui-bg-white after:ui-transition-all after:ui-content-['']", {
-    "ui-bg-primary-light after:ui-translate-x-full after:ui-border-white": props.checked === true,
-    "ui-bg-slate-300": !props.checked
-  }) }) }), jsxRuntime.jsx(Text, { className: "ui-ml-3 ui-mt-[2px] ui-text-start", children })] })] }) }) }));
+  } }, rest, { children: jsxRuntime.jsx("div", { className: "ui:flex ui:w-full", children: jsxRuntime.jsxs("label", { className: "ui:inline-flex ui:w-full ui:cursor-pointer ui:p-s", children: [React__namespace.isValidElement(icon) ? React__namespace.cloneElement(icon, { className: "ui:shrink-0" }) : null, jsxRuntime.jsxs("div", { className: "ui:inline-flex ui:w-full ui:flex-row-reverse ui:gap-m", children: [jsxRuntime.jsx("div", { className: "ui:peer ui:ml-auto", children: checkedIndicator !== null && checkedIndicator !== void 0 ? checkedIndicator : jsxRuntime.jsx("div", { className: classNames__default.default("ui:relative ui:h-6 ui:w-11 ui:rounded-full ui:transition-colors", "ui:after:absolute ui:after:start-[2px] ui:after:top-[2px] ui:after:h-5 ui:after:w-5 ui:after:rounded-full ui:after:border ui:after:border-slate-300 ui:after:bg-white ui:after:transition-all ui:after:content-['']", {
+    "ui:bg-primary-light ui:after:translate-x-full ui:after:border-white": props.checked === true,
+    "ui:bg-slate-300": !props.checked
+  }) }) }), jsxRuntime.jsx(Text, { className: "ui:ml-3 ui:mt-[2px] ui:text-start", children })] })] }) }) }));
 });
 const FlyOutMenu = {
   Root: FlyOutMenuRoot,
@@ -3033,8 +3057,8 @@ const LabeledDatePicker = (_a) => {
   const helperErrorTextId = React__namespace.default.useId();
   const isError = Boolean(errorText);
   const datePickerClassNames = classNames__default.default({
-    "ui-border-negative-border": isError,
-    "focus:ui-outline-negative": isError
+    "ui:!border-negative-border": isError,
+    "ui:!focus:outline-negative": isError
   }, classNameFromProps);
   return jsxRuntime.jsxs(Stack, { as: "label", gap: "xxxxs", children: [label && jsxRuntime.jsx(LabelText, { children: label }), jsxRuntime.jsx(DatePicker, Object.assign({}, props, { className: datePickerClassNames, "aria-describedby": helperErrorTextId })), jsxRuntime.jsx(HelperAndErrorText, { helperText, errorText, describingId: helperErrorTextId })] });
 };
@@ -3049,7 +3073,7 @@ 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: "xs", 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 })] })] });
+  return jsxRuntime.jsxs(Stack, { as: "label", axis: "x", gap: "xs", 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;
@@ -3065,7 +3089,7 @@ function RadioLabel(props) {
 const LabeledRadioGroup = (props) => {
   const { children, title, className } = props;
   const semanticId = React__namespace.default.useId();
-  return jsxRuntime.jsxs(Stack, { as: "fieldset", "aria-describedby": semanticId, className: classNames__default.default(className), gap: "xxxxs", children: [title && jsxRuntime.jsx("legend", { className: "ui-contents", children: jsxRuntime.jsx(Text, { children: title }) }), jsxRuntime.jsx(Stack, { gap: "xxs", children }), jsxRuntime.jsx(HelperAndErrorText, { helperText: props.helperText, errorText: props.errorText, describingId: semanticId })] });
+  return jsxRuntime.jsxs(Stack, { as: "fieldset", "aria-describedby": semanticId, className: classNames__default.default(className), gap: "xxxxs", children: [title && jsxRuntime.jsx("legend", { className: "ui:contents", children: jsxRuntime.jsx(Text, { children: title }) }), jsxRuntime.jsx(Stack, { gap: "xxs", children }), jsxRuntime.jsx(HelperAndErrorText, { helperText: props.helperText, errorText: props.errorText, describingId: semanticId })] });
 };
 
 const Actions$1 = (props) => {
@@ -3077,8 +3101,8 @@ const Actions$1 = (props) => {
      * bar. I'm imagining this inconsistent spacing will be discussed
      * in design soon, but for now this is what it should be.
      */
-    "-ui-my-[10px]",
-    "ui-flex ui-flex-wrap ui-justify-end ui-gap-2",
+    "ui:-my-[10px]",
+    "ui:flex ui:flex-wrap ui:justify-end ui:gap-2",
     className
   ), children }));
 };
@@ -3093,12 +3117,12 @@ const Padding$1 = (props) => {
 
 const Section$1 = (props) => {
   const { children } = props, rest = __rest(props, ["children"]);
-  return jsxRuntime.jsx("div", Object.assign({}, rest, { className: classNames__default.default("ui-mt-4", props.className), children }));
+  return jsxRuntime.jsx("div", Object.assign({}, rest, { className: classNames__default.default("ui:mt-4", props.className), children }));
 };
 
 const TopBar = (props) => {
   const { children } = props, rest = __rest(props, ["children"]);
-  return jsxRuntime.jsx("div", Object.assign({}, rest, { className: classNames__default.default("ui-my-4", props.className), children }));
+  return jsxRuntime.jsx("div", Object.assign({}, rest, { className: classNames__default.default("ui:my-4", props.className), children }));
 };
 TopBar.Actions = Actions$1;
 
@@ -3109,11 +3133,11 @@ function Card(props) {
     modifier: "hover",
     transition: true
   });
-  const classes = classNames__default.default("ui-overflow-hidden", "ui-bg-white", "ui-transition-colors ui-duration-300", className, hoverShadowClassName, {
-    "ui-border ui-border-slate-300": border,
-    "hover:ui-border-slate-400": hasHoverEffect
+  const classes = classNames__default.default("ui:overflow-hidden", "ui:bg-white", "ui:transition-colors ui:duration-300", className, hoverShadowClassName, {
+    "ui:border ui:border-slate-300": border,
+    "ui:hover:border-slate-400": hasHoverEffect
   });
-  return jsxRuntime.jsx(Box, Object.assign({ as: Element, elevation, borderRadius }, rest, { className: classes, children: jsxRuntime.jsxs(Box, { className: "ui-bg-white", children: [jsxRuntime.jsx(RenderTopBar, Object.assign({}, props)), padding ? jsxRuntime.jsx(Padding$1, { children }) : children] }) }));
+  return jsxRuntime.jsx(Box, Object.assign({ as: Element, elevation, borderRadius }, rest, { className: classes, children: jsxRuntime.jsxs(Box, { className: "ui:bg-white", 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.TopBar = TopBar;
@@ -3123,7 +3147,7 @@ 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(Title, { variant: "sm", 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 }) }) });
@@ -3136,12 +3160,12 @@ function RenderTopBar(props) {
 
 const Content = (_a) => {
   var { container, className } = _a, restContentProps = __rest(_a, ["container", "className"]);
-  return jsxRuntime.jsx(RadixHC__namespace.Portal, { container, children: jsxRuntime.jsx(RadixHC__namespace.Content, Object.assign({ sideOffset: 8, className: classNames__default.default(className, "ui-max-w-80", "ui-z-20", "data-[state=open]:ui-animate-in data-[state=closed]:ui-animate-out data-[state=closed]:ui-fade-out-0 data-[state=open]:ui-fade-in-0 data-[state=closed]:ui-zoom-out-95 data-[state=open]:ui-zoom-in-95 data-[side=bottom]:ui-slide-in-from-top-2 data-[side=left]:ui-slide-in-from-right-2 data-[side=right]:ui-slide-in-from-left-2 data-[side=top]:ui-slide-in-from-bottom-2") }, restContentProps)) });
+  return jsxRuntime.jsx(RadixHC__namespace.Portal, { container, children: jsxRuntime.jsx(RadixHC__namespace.Content, Object.assign({ sideOffset: 8, className: classNames__default.default(className, "ui:max-w-80", "ui:z-20", "ui:data-[state=open]:animate-in ui:data-[state=closed]:animate-out ui:data-[state=closed]:fade-out-0 ui:data-[state=open]:fade-in-0 ui:data-[state=closed]:zoom-out-95 ui:data-[state=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") }, restContentProps)) });
 };
 Content.displayName = "HoverCard.Content";
 const Root = (props) => jsxRuntime.jsx(RadixHC__namespace.Root, Object.assign({ openDelay: 100, closeDelay: 200 }, props));
 Root.displayName = "HoverCard.Root";
-const CustomCard = (props) => jsxRuntime.jsx(Card, Object.assign({ border: true, elevation: "medium" }, props, { className: classNames__default.default(props.className, "ui-mw-104") }));
+const CustomCard = (props) => jsxRuntime.jsx(Card, Object.assign({ border: true, elevation: "medium" }, props, { className: classNames__default.default(props.className, "ui:mw-104") }));
 CustomCard.displayName = "HoverCard.Card";
 const HoverCard = {
   Arrow: RadixHC__namespace.Arrow,
@@ -3157,25 +3181,25 @@ const Line = ({ left, right, className }) => /* @__PURE__ */ jsxRuntime.jsxs(
     className: classNames__default.default(
       className,
       "cweb-line",
-      "ui-flex-no-wrap ui-flex ui-flex-row"
+      "ui:flex-no-wrap ui:flex ui:flex-row"
     ),
     children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ui-flex", children: left?.map(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ui:flex", children: left?.map(
         (item) => item && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "ui-mr-3 ui-flex ui-items-center",
+            className: "ui:mr-3 ui:flex ui:items-center",
             children: item
           },
           item.key ?? item.props.id
         )
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ui-flex-grow" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ui-flex", children: right?.map((item) => {
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ui:grow" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ui:flex", children: right?.map((item) => {
         return item && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: "ui-ml-3 first:ui-ml-0",
+            className: "ui:ml-3 ui:first:ml-0",
             children: item
           },
           item.key ?? item.props.id
@@ -3193,22 +3217,22 @@ Line.propTypes = {
 const THead = (props) => {
   return jsxRuntime.jsx("thead", { className: classNames__default.default(
     // Styles for all <th>
-    "[&>tr>th]:ui-border-neutral-border-high-contrast",
-    "[&>tr>th]:ui-border-y",
-    "[&>tr>th]:ui-px-xxs",
+    "ui:[&>tr>th]:border-neutral-border-high-contrast",
+    "ui:[&>tr>th]:border-y",
+    "ui:[&>tr>th]:px-xxs",
     // Styles for the first <th> in the header row
-    "[&>tr>th:first-child]:ui-rounded-tl-2xl [&>tr>th:first-child]:ui-border-l [&>tr>th:first-child]:ui-pl-l",
+    "ui:[&>tr>th:first-child]:rounded-tl-2xl ui:[&>tr>th:first-child]:border-l ui:[&>tr>th:first-child]:pl-l",
     // Styles for the last <th> in the table row
-    "[&>tr>th:last-child]:ui-rounded-tr-2xl [&>tr>th:last-child]:ui-border-r [&>tr>th:last-child]:ui-pr-l"
+    "ui:[&>tr>th:last-child]:rounded-tr-2xl ui:[&>tr>th:last-child]:border-r ui:[&>tr>th:last-child]:pr-l"
   ), children: props.children });
 };
 function TableHeader(props) {
   if (props.selectAllComponent) {
-    return jsxRuntime.jsx(THead, { children: jsxRuntime.jsx("tr", { className: "ui-rounded-2xl", children: jsxRuntime.jsx("th", { colSpan: props.colSpan, children: props.selectAllComponent }) }) });
+    return jsxRuntime.jsx(THead, { children: jsxRuntime.jsx("tr", { className: "ui:rounded-2xl", children: jsxRuntime.jsx("th", { colSpan: props.colSpan, children: props.selectAllComponent }) }) });
   }
-  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) => {
+  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) => {
     var _a;
-    return jsxRuntime.jsx("th", { children: jsxRuntime.jsx(Text, { variant: "strong", className: "ui-truncate ui-py-m ui-text-left ui-capitalize ui-leading-5", children: (_a = fieldConfig.headerText) !== null && _a !== void 0 ? _a : "" }) }, fieldConfig.key);
+    return jsxRuntime.jsx("th", { children: jsxRuntime.jsx(Text, { variant: "strong", className: "ui:truncate ui:py-m ui:text-left ui:capitalize ui:leading-5", children: (_a = fieldConfig.headerText) !== null && _a !== void 0 ? _a : "" }) }, fieldConfig.key);
   })] }) });
 }
 
@@ -3260,18 +3284,18 @@ function prepareClientSidePagination({
 
 function TableBodyRowDataCell(props) {
   if ("render" in props.fieldConfig && props.fieldConfig.render) {
-    return jsxRuntime.jsx("td", { className: classNames__default.default("ui-px-2 first:ui-pl-6 last:ui-pr-6"), children: props.fieldConfig.render(props.item) });
+    return jsxRuntime.jsx("td", { className: classNames__default.default("ui:px-2 ui:first:pl-6 ui:last:pr-6"), children: props.fieldConfig.render(props.item) });
   }
   const content = props.fieldConfig.content(props.item);
   const isTextCellEmpty = isTableFieldText(content) && !content.text && !content.tag;
-  return jsxRuntime.jsxs("td", { className: classNames__default.default("ui-px-2 ui-align-middle first:ui-pl-6 last:ui-pr-6"), children: [isTableFieldText(content) && jsxRuntime.jsxs(Stack, { axis: "x", align: "center", gap: "xs", children: [content.tag && jsxRuntime.jsx(Tag, { colorTheme: content.tag.color, children: content.tag.text }), jsxRuntime.jsx(CellTextContent, { content, emptyFieldContent: isTextCellEmpty ? props.emptyFieldContentText : void 0 })] }), isTableFieldAction(content) && jsxRuntime.jsx("div", { className: classNames__default.default("ui-flex ui-flex-row ui-justify-end", "ui-transition-opacity ui-duration-300 ui-ease-in-out", {
-    "ui-opacity-0": props.fieldConfig.onlyShowContentOnHovering,
-    "group-hover:ui-opacity-100": props.fieldConfig.onlyShowContentOnHovering
+  return jsxRuntime.jsxs("td", { className: classNames__default.default("ui:px-2 ui:align-middle ui:first:pl-6 ui:last:pr-6"), children: [isTableFieldText(content) && jsxRuntime.jsxs(Stack, { axis: "x", align: "center", gap: "xs", children: [content.tag && jsxRuntime.jsx(Tag, { colorTheme: content.tag.color, children: content.tag.text }), jsxRuntime.jsx(CellTextContent, { content, emptyFieldContent: isTextCellEmpty ? props.emptyFieldContentText : void 0 })] }), isTableFieldAction(content) && jsxRuntime.jsx("div", { className: classNames__default.default("ui:flex ui:flex-row ui:justify-end", "ui:transition-opacity ui:duration-300 ui:ease-in-out", {
+    "ui:opacity-0": props.fieldConfig.onlyShowContentOnHovering,
+    "ui:group-hover:opacity-100": props.fieldConfig.onlyShowContentOnHovering
   }), children: content.map((action) => {
     if (!action) {
       return null;
     }
-    return jsxRuntime.jsx(TertiaryButton, { "data-test-id": `${action.key}-button`, className: "ui-ml-2 first:ui-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", icon: action.icon, isDisabled: action.isDisabled, title: action.title, onClick: () => {
       action.handleClick(props.item);
     } }, action.key);
   }) })] });
@@ -3281,12 +3305,12 @@ const CellTextContent = (props) => {
   if (!props.content.description && !props.content.text && !props.emptyFieldContent) {
     return null;
   }
-  return jsxRuntime.jsxs(Stack, { py: "m", children: [(props.content.text || props.emptyFieldContent) && jsxRuntime.jsx(Text, { className: classNames__default.default("ui-text-left ui-leading-5", {
-    "ui-break-all": props.content.breakAllWord,
-    "ui-break-words": !props.content.breakAllWord
+  return jsxRuntime.jsxs(Stack, { py: "m", children: [(props.content.text || props.emptyFieldContent) && jsxRuntime.jsx(Text, { className: classNames__default.default("ui:text-left ui:leading-5", {
+    "ui:break-all": props.content.breakAllWord,
+    "ui:break-words": !props.content.breakAllWord
   }), children: (_a = props.content.text) !== null && _a !== void 0 ? _a : props.emptyFieldContent }), props.content.description && jsxRuntime.jsx(Text, { className: classNames__default.default({
-    "ui-break-all": props.content.description.breakAllWord,
-    "ui-break-words": !props.content.description.breakAllWord
+    "ui:break-all": props.content.description.breakAllWord,
+    "ui:break-words": !props.content.description.breakAllWord
   }), variant: "sm", color: "slate-500", children: props.content.description.content })] });
 };
 
@@ -3321,34 +3345,34 @@ function TableBody(props) {
   return jsxRuntime.jsxs("tbody", { className: classNames__default.default(
     props.className,
     // setting border color across all cells
-    "[&>tr>td]:ui-border-neutral-border-high-contrast",
+    "ui:[&>tr>td]:border-neutral-border-high-contrast",
     // left border for first cell and right border for last cell
-    "[&>tr>td:first-child]:ui-border-l [&>tr>td:last-child]:ui-border-r",
-    "[&>tr>td]:ui-border-b",
+    "ui:[&>tr>td:first-child]:border-l ui:[&>tr>td:last-child]:border-r",
+    "ui:[&>tr>td]:border-b",
     /**
      * Configuration for the top row to have rounded edges, in case
      * there is no header.
      */
     {
-      "[&>tr:first-child>td]:ui-border-t": props.topRowRounded,
-      "[&>tr:first-child>td:first-child]:ui-rounded-tl-2xl": props.topRowRounded,
-      "[&>tr:first-child>td:last-child]:ui-rounded-tr-2xl": props.topRowRounded
+      "ui:[&>tr:first-child>td]:border-t": props.topRowRounded,
+      "ui:[&>tr:first-child>td:first-child]:rounded-tl-2xl": props.topRowRounded,
+      "ui:[&>tr:first-child>td:last-child]:rounded-tr-2xl": props.topRowRounded
     },
     /**
      * Configuration for the last row to have rounded edges, in case
      * there is no footer.
      */
     {
-      "[&>tr:last-child>td:first-child]:ui-rounded-bl-2xl": props.lastRowRounded,
-      "[&>tr:last-child>td:last-child]:ui-rounded-br-2xl": props.lastRowRounded
+      "ui:[&>tr:last-child>td:first-child]:rounded-bl-2xl": props.lastRowRounded,
+      "ui:[&>tr:last-child>td:last-child]:rounded-br-2xl": props.lastRowRounded
     }
   ), children: [!props.isLoading && ((_a = props.items) === null || _a === void 0 ? void 0 : _a.map((item, index) => {
     const clickCallback = isOnSelectMode ? generateOnRowClickSelectHandler({ item, index }) : generateRowClickHandler(item);
-    return jsxRuntime.jsxs("tr", { tabIndex: 0, className: classNames__default.default("ui-group", {
-      "ui-cursor-pointer ui-transition-colors ui-duration-300 ui-ease-in-out hover:ui-bg-blue-50 focus:ui-outline-primary": props.onRowClick,
-      "ui-cursor-default hover:ui-bg-white": !props.onRowClick,
-      "ui-bg-blue-100": isItemChecked(index)
-    }, props.className), onClick: clickCallback, children: [props.isSelectable && jsxRuntime.jsx("td", { className: "ui-px-0", children: jsxRuntime.jsx(Checkbox, { className: "ui-ml-4 ui-w-fit", classNameCheckboxLabel: "ui-p-2", isChecked: isItemChecked(index), onClick: (event) => event.stopPropagation(), onChange: (event) => {
+    return jsxRuntime.jsxs("tr", { tabIndex: 0, className: classNames__default.default("ui:group", {
+      "ui:cursor-pointer ui:transition-colors ui:duration-300 ui:ease-in-out ui:hover:bg-blue-50 ui:focus:outline-primary": props.onRowClick,
+      "ui:cursor-default ui:hover:bg-white": !props.onRowClick,
+      "ui:bg-blue-100": isItemChecked(index)
+    }, props.className), onClick: clickCallback, children: [props.isSelectable && jsxRuntime.jsx("td", { className: "ui:px-0", children: jsxRuntime.jsx(Checkbox, { className: "ui:ml-4 ui:w-fit", classNameCheckboxLabel: "ui:p-2", isChecked: isItemChecked(index), onClick: (event) => event.stopPropagation(), onChange: (event) => {
       var _a2;
       event.stopPropagation();
       (_a2 = props.onSelectRow) === null || _a2 === void 0 ? void 0 : _a2.call(props, {
@@ -3357,7 +3381,7 @@ function TableBody(props) {
         value: item
       });
     } }) }), props.fieldConfigurations.map((fieldConfig) => jsxRuntime.jsx(TableBodyRowDataCell, { item, fieldConfig, emptyFieldContentText: props.emptyFieldContentText }, fieldConfig.key))] }, JSON.stringify(item));
-  })), props.isLoading && jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: props.colSpan, children: jsxRuntime.jsx(LoadingIndicator, { className: "ui-px-3 ui-py-0", asModal: false }) }) }), props.showEmptyView && jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: props.colSpan, children: jsxRuntime.jsx(EmptyListMessage, { className: "ui-py-6", text: props.emptyItemsText, imageName: "search-not-found" }) }) })] });
+  })), props.isLoading && jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: props.colSpan, children: jsxRuntime.jsx(LoadingIndicator, { className: "ui:px-3 ui:py-0", asModal: false }) }) }), props.showEmptyView && jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { colSpan: props.colSpan, children: jsxRuntime.jsx(EmptyListMessage, { className: "ui:py-6", text: props.emptyItemsText, imageName: "search-not-found" }) }) })] });
 }
 
 const PaginationMenuSmall = (props) => {
@@ -3365,7 +3389,7 @@ const PaginationMenuSmall = (props) => {
     const pageNumber = event.currentTarget.dataset.page;
     pageNumber && props.onChange(parseInt(pageNumber, 10), props.pageSize);
   };
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TertiaryButton, { "data-test-id": "prev-button", icon: LeftArrowIcon, "data-page": props.currentPageNumber - 1, onClick: handleOnChange, isDisabled: props.currentPageNumber === 1 }), jsxRuntime.jsx(Text, { className: "ui-ml-4", text: `${props.currentPageNumber} / ${props.pageCount}`, type: "sm", color: "slate-500" }), jsxRuntime.jsx(TertiaryButton, { className: "ui-ml-4", "data-test-id": "next-button", icon: ChevronRightIcon, isDisabled: props.currentPageNumber === props.pageCount, "data-page": props.currentPageNumber + 1, onClick: handleOnChange })] });
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TertiaryButton, { "data-test-id": "prev-button", icon: LeftArrowIcon, "data-page": props.currentPageNumber - 1, onClick: handleOnChange, isDisabled: props.currentPageNumber === 1 }), jsxRuntime.jsx(Text, { className: "ui:ml-4", text: `${props.currentPageNumber} / ${props.pageCount}`, type: "sm", color: "slate-500" }), jsxRuntime.jsx(TertiaryButton, { className: "ui:ml-4", "data-test-id": "next-button", icon: ChevronRightIcon, isDisabled: props.currentPageNumber === props.pageCount, "data-page": props.currentPageNumber + 1, onClick: handleOnChange })] });
 };
 
 var css_248z$8 = ".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}";
@@ -3478,11 +3502,11 @@ const Select = React__namespace.default.forwardRef((_a, innerRef) => {
     return jsxRuntime.jsx(ReactSelect.components.SelectContainer, Object.assign({}, commonProps, { innerProps: Object.assign({}, commonProps.innerProps, Object.assign({}, getDataAttributes())), children }));
   };
   return jsxRuntime.jsx(ReactSelect__default.default, Object.assign({}, otherProps, { ref: innerRef, styles: mergedStyles, options, onChange: skipValueProcessing ? onChange : onChangeWrapped, value: skipValueProcessing ? value : valueWrapped, isMulti, className: classNames__default.default("customized-select", className, {
-    "ui-w-16": width === "sm",
-    "ui-w-32": width === "md",
-    "ui-w-56": width === "lg",
-    "ui-w-80": width === "xl",
-    "ui-flex-grow": width === "full"
+    "ui:w-16": width === "sm",
+    "ui:w-32": width === "md",
+    "ui:w-56": width === "lg",
+    "ui:w-80": width === "xl",
+    "ui:grow": width === "full"
   }), components: {
     SelectContainer: CustomContainer,
     DropdownIndicator: SelectDropdownIndicator,
@@ -3529,7 +3553,7 @@ const PaginationMenuLarge = (props) => {
     const newPage = event.currentTarget.dataset.page;
     newPage && props.onChange(parseInt(newPage, 10), props.pageSize);
   };
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "ui-flex ui-flex-row ui-items-center", children: [props.pageSize && props.resultCount && jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text, { text: props.localization.display }), jsxRuntime.jsx(Select, { className: "ui-ml-2 ui-mr-4 ui-w-24", options: PAGE_SIZE_OPTIONS, onChange: handleOnPageSizeSelect, value: props.pageSize, menuPlacement: "auto" })] }), jsxRuntime.jsx(Text, { text: props.localization.page }), jsxRuntime.jsx(Select, { className: "ui-ml-2 ui-w-24", options: getPageNumberOptions(props.pageCount), onChange: handleOnPageNumberSelect, value: props.currentPageNumber, isDisabled: props.pageCount < 2, menuPlacement: "auto" })] }), jsxRuntime.jsxs("div", { className: "ui-ml-4 ui-flex ui-flex-row ui-items-center", children: [jsxRuntime.jsx(Text, { text: getSummaryText(props.pageCount, props.currentPageNumber, props.localization, props.pageSize, props.resultCount), color: "slate-500" }), jsxRuntime.jsx(SecondaryButton, { "data-test-id": "prev-button", text: props.localization.previous, "data-page": props.currentPageNumber - 1, onClick: handleOnPrevNextButtonClick, isDisabled: props.currentPageNumber === 1, className: "ui-ml-4" }), jsxRuntime.jsx(SecondaryButton, { "data-test-id": "next-button", text: props.localization.next, isDisabled: props.currentPageNumber === props.pageCount, "data-page": props.currentPageNumber + 1, onClick: handleOnPrevNextButtonClick, className: "ui-ml-4" })] })] });
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "ui:flex ui:flex-row ui:items-center", children: [props.pageSize && props.resultCount && jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text, { text: props.localization.display }), jsxRuntime.jsx(Select, { className: "ui:ml-2 ui:mr-4 ui:w-24", options: PAGE_SIZE_OPTIONS, onChange: handleOnPageSizeSelect, value: props.pageSize, menuPlacement: "auto" })] }), jsxRuntime.jsx(Text, { text: props.localization.page }), jsxRuntime.jsx(Select, { className: "ui:ml-2 ui:w-24", options: getPageNumberOptions(props.pageCount), onChange: handleOnPageNumberSelect, value: props.currentPageNumber, isDisabled: props.pageCount < 2, menuPlacement: "auto" })] }), jsxRuntime.jsxs("div", { className: "ui:ml-4 ui:flex ui:flex-row ui:items-center", children: [jsxRuntime.jsx(Text, { text: getSummaryText(props.pageCount, props.currentPageNumber, props.localization, props.pageSize, props.resultCount), color: "slate-500" }), jsxRuntime.jsx(SecondaryButton, { "data-test-id": "prev-button", text: props.localization.previous, "data-page": props.currentPageNumber - 1, onClick: handleOnPrevNextButtonClick, isDisabled: props.currentPageNumber === 1, className: "ui:ml-4" }), jsxRuntime.jsx(SecondaryButton, { "data-test-id": "next-button", text: props.localization.next, isDisabled: props.currentPageNumber === props.pageCount, "data-page": props.currentPageNumber + 1, onClick: handleOnPrevNextButtonClick, className: "ui:ml-4" })] })] });
 };
 
 const PaginationMenuCursor = (props) => {
@@ -3540,7 +3564,7 @@ const PaginationMenuCursor = (props) => {
   return jsxRuntime.jsxs(Stack, { axis: "x", gap: "m", justify: "end", width: "full", children: [jsxRuntime.jsx(SecondaryButton, { "data-test-id": "prev-button", leadingIcon: jsxRuntime.jsx(LeftArrowIcon, {}), "data-cursor": props.previousCursor, isDisabled: !props.previousCursor, onClick: handleOnChange, children: props.localization.previous }), jsxRuntime.jsx(SecondaryButton, { "data-test-id": "next-button", trailingIcon: jsxRuntime.jsx(ChevronRightIcon, {}), "data-cursor": props.nextCursor, isDisabled: !props.nextCursor, onClick: handleOnChange, children: props.localization.next })] });
 };
 
-const Wrapper = ({ className, children }) => jsxRuntime.jsx("div", { className: classNames__default.default("ui-flex ui-w-full ui-flex-row ui-items-center ui-justify-between", className), children });
+const Wrapper = ({ className, children }) => jsxRuntime.jsx("div", { className: classNames__default.default("ui:flex ui:w-full ui:flex-row ui:items-center ui:justify-between", className), children });
 const PaginationMenu = (props) => {
   if (props.type === "small" || props.small) {
     return jsxRuntime.jsx(Wrapper, { className: props.className, children: jsxRuntime.jsx(PaginationMenuSmall, { pageCount: props.pageCount, currentPageNumber: props.currentPageNumber, pageSize: props.pageSize, onChange: props.onChange }) });
@@ -3552,7 +3576,7 @@ const PaginationMenu = (props) => {
 };
 
 const TableFooter = (props) => {
-  return jsxRuntime.jsx("tfoot", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { className: "ui-rounded-b-2xl ui-border-x ui-border-b ui-border-neutral-border-high-contrast", colSpan: props.colSpan, children: jsxRuntime.jsx(PaginationMenu, Object.assign({ className: "ui-p-6" }, props.paginationMenuProps)) }) }) });
+  return jsxRuntime.jsx("tfoot", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { className: "ui:rounded-b-2xl ui:border-x ui:border-b ui:border-neutral-border-high-contrast", colSpan: props.colSpan, children: jsxRuntime.jsx(PaginationMenu, Object.assign({ className: "ui:p-6" }, props.paginationMenuProps)) }) }) });
 };
 
 function Table(_a) {
@@ -3596,13 +3620,13 @@ function Table(_a) {
   };
   const shouldDisplayHeaderSelectAll = isSelectable && items && items.length > 0;
   const shouldDisplaySelectAllControls = shouldDisplayHeaderSelectAll && rowSelectionHeaderAccessories && selectedItems && selectedItems.length > 0;
-  const toggleAllCheckbox = jsxRuntime.jsxs("label", { children: [jsxRuntime.jsx("span", { className: "ui-sr-only", children: "Select all rows" }), jsxRuntime.jsx(Checkbox, { isChecked: getSelectAllCheckboxState() === "checked", isIndeterminate: getSelectAllCheckboxState() === "indeterminate", onChange: handleOnToggleAll })] });
-  return jsxRuntime.jsxs("table", Object.assign({ className: classNames__default.default("ui-w-full ui-table-auto ui-bg-white", "ui-border-separate ui-border-spacing-0 ui-rounded-2xl", className), "data-test-id": dataTestId }, otherAttributes, { children: [showHeader ? jsxRuntime.jsx(TableHeader, { fieldConfigurations, colSpan, selectAllCheckbox: shouldDisplayHeaderSelectAll ? toggleAllCheckbox : null, selectAllComponent: shouldDisplaySelectAllControls ? jsxRuntime.jsxs(Stack, { axis: "x", align: "center", gap: "xs", my: "xxs", children: [toggleAllCheckbox, rowSelectionHeaderAccessories] }) : null }) : null, jsxRuntime.jsx(
+  const toggleAllCheckbox = jsxRuntime.jsxs("label", { children: [jsxRuntime.jsx("span", { className: "ui:sr-only", children: "Select all rows" }), jsxRuntime.jsx(Checkbox, { isChecked: getSelectAllCheckboxState() === "checked", isIndeterminate: getSelectAllCheckboxState() === "indeterminate", onChange: handleOnToggleAll })] });
+  return jsxRuntime.jsxs("table", Object.assign({ className: classNames__default.default("ui:w-full ui:table-auto ui:bg-white", "ui:border-separate ui:border-spacing-0 ui:rounded-2xl", className), "data-test-id": dataTestId }, otherAttributes, { children: [showHeader ? jsxRuntime.jsx(TableHeader, { fieldConfigurations, colSpan, selectAllCheckbox: shouldDisplayHeaderSelectAll ? toggleAllCheckbox : null, selectAllComponent: shouldDisplaySelectAllControls ? jsxRuntime.jsxs(Stack, { axis: "x", align: "center", gap: "xs", my: "xxs", children: [toggleAllCheckbox, rowSelectionHeaderAccessories] }) : null }) : null, jsxRuntime.jsx(
     TableBody,
     {
       // TODO: early return to remove all the boolean juggling.
       className: classNames__default.default({
-        "ui-border-b ui-border-neutral-border-high-contrast": showFooter
+        "ui:border-b ui:border-neutral-border-high-contrast": showFooter
       }),
       items,
       fieldConfigurations,
@@ -3691,12 +3715,12 @@ const CheckboxGroup = ({ title, items, onChange, onStateChange, className, isCol
   };
   const checkedItemsCount = items === null || items === void 0 ? void 0 : items.filter((item) => item === null || item === void 0 ? void 0 : item.isChecked).length;
   const groupTitle = checkedItemsCount > 0 ? `${title} (${checkedItemsCount})` : title;
-  return jsxRuntime.jsxs("div", { className: classNames__default.default("ui-flex ui-flex-col", className), children: [title && jsxRuntime.jsxs("div", { className: "ui-flex ui-w-full ui-flex-row ui-items-center", children: [jsxRuntime.jsx(Checkbox, { renderLabel: () => jsxRuntime.jsx(Text, { variant: "strong", children: groupTitle }), onChange: handleGroupClick, isChecked: groupCheckboxState === CheckboxState.CHECKED, isDisabled, isIndeterminate: groupCheckboxState === CheckboxState.INDETERMINATE, className: "ui-flex-1 ui-py-3" }, title), collapsible && jsxRuntime.jsx(GroupCollapseButton, { "aria-label": getGroupCollapseButtonAriaLabel({
+  return jsxRuntime.jsxs("div", { className: classNames__default.default("ui:flex ui:flex-col", className), children: [title && jsxRuntime.jsxs("div", { className: "ui:flex ui:w-full ui:flex-row ui:items-center", children: [jsxRuntime.jsx(Checkbox, { renderLabel: () => jsxRuntime.jsx(Text, { variant: "strong", children: groupTitle }), onChange: handleGroupClick, isChecked: groupCheckboxState === CheckboxState.CHECKED, isDisabled, isIndeterminate: groupCheckboxState === CheckboxState.INDETERMINATE, className: "ui:flex-1 ui:py-3" }, title), collapsible && jsxRuntime.jsx(GroupCollapseButton, { "aria-label": getGroupCollapseButtonAriaLabel({
     groupTitle: title,
     collapsed
-  }), collapsed, type: "button", onClick: handleGroupCollapse })] }), !collapsed && items.map((item) => React.createElement(Checkbox, Object.assign({}, item, { key: item.id, text: item.label, onChange: handleCheckboxChange, className: classNames__default.default("ui-py-3", {
-    "ui-ml-10": collapsible,
-    "ui-ml-5": !collapsible
+  }), collapsed, type: "button", onClick: handleGroupCollapse })] }), !collapsed && items.map((item) => React.createElement(Checkbox, Object.assign({}, item, { key: item.id, text: item.label, onChange: handleCheckboxChange, className: classNames__default.default("ui:py-3", {
+    "ui:ml-10": collapsible,
+    "ui:ml-5": !collapsible
   }) })))] });
 };
 function getGroupCollapseButtonAriaLabel(args) {
@@ -3708,15 +3732,15 @@ function getGroupCollapseButtonAriaLabel(args) {
 function GroupCollapseButton(props) {
   const { collapsed } = props, rest = __rest(props, ["collapsed"]);
   return jsxRuntime.jsx("button", Object.assign({}, rest, { className: classNames__default.default(
-    "ui-outline-none",
+    "ui:outline-none",
     // We have a custom focus indicator for this one.
-    "ui-group",
-    "ui-py-2.5",
+    "ui:group",
+    "ui:py-2.5",
     // Icon height is 24px, so only needs 10px of padding to match the 44px height of the text and padding.
-    "ui-pl-6",
+    "ui:pl-6",
     // Make the click area a little larger for better UX.
-    "ui-text-slate-600 ui-transition-colors ui-duration-75"
-  ), children: jsxRuntime.jsxs("div", { className: classNames__default.default("group-hover:ui-bg-slate-200 group-focus-visible:ui-bg-slate-200", "ui-relative ui-h-full ui-rounded-full ui-transition-transform", `${collapsed ? "ui-rotate-0" : "-ui-rotate-180"}`), children: [jsxRuntime.jsx(ChevronDownIcon, {}), jsxRuntime.jsx("div", { className: classNames__default.default("ui-absolute ui-right-0 ui-top-0 -ui-z-[10]") })] }) }));
+    "ui:text-slate-600 ui:transition-colors ui:duration-75"
+  ), children: jsxRuntime.jsxs("div", { className: classNames__default.default("ui:group-hover:bg-slate-200 ui:group-focus-visible:bg-slate-200", "ui:relative ui:h-full ui:rounded-full ui:transition-transform", `${collapsed ? "ui:rotate-0" : "ui:-rotate-180"}`), children: [jsxRuntime.jsx(ChevronDownIcon, {}), jsxRuntime.jsx("div", { className: classNames__default.default("ui:absolute ui:right-0 ui:top-0 ui:-z-[10]") })] }) }));
 }
 
 const CheckboxList = ({ groups, onChange, onStateChange, className }) => {
@@ -3744,12 +3768,12 @@ const CheckboxList = ({ groups, onChange, onStateChange, className }) => {
     });
     onStateChange === null || onStateChange === void 0 ? void 0 : onStateChange(newState);
   };
-  return jsxRuntime.jsx("div", { className: classNames__default.default("ui-flex ui-flex-col", className), children: groups.map((group) => {
+  return jsxRuntime.jsx("div", { className: classNames__default.default("ui:flex ui:flex-col", className), children: groups.map((group) => {
     if (group.title) {
       const groupTitle = group.title;
       return jsxRuntime.jsx(CheckboxGroup, { items: group.items, title: group.title, isCollapsed: group.isCollapsed, collapsible: group.collapsible, onChange, onStateChange: (items) => handleGroupChange({ groupTitle, items }) }, group.title);
     } else {
-      return group.items.map((item) => React.createElement(Checkbox, Object.assign({}, item, { key: item.id, text: item.label, onChange: handleCheckboxChange, classNameCheckboxLabel: "ui-py-3" })));
+      return group.items.map((item) => React.createElement(Checkbox, Object.assign({}, item, { key: item.id, text: item.label, onChange: handleCheckboxChange, classNameCheckboxLabel: "ui:py-3" })));
     }
   }) });
 };
@@ -3767,18 +3791,18 @@ const Divider = (props) => {
   }
   const { className, dark } = props, rest = __rest(props, ["className", "dark"]);
   const darkTheme = Boolean(dark);
-  return jsxRuntime.jsx("div", Object.assign({ className: classNames__default.default("ui-border-color ui-block ui-w-full ui-border-b ui-border-solid last:ui-border-b-0", className, {
-    "ui-border-color-divider": !darkTheme,
-    "ui-border-slate-600": darkTheme
+  return jsxRuntime.jsx("div", Object.assign({ className: classNames__default.default("ui:border-color ui:block ui:w-full ui:border-b ui:border-solid ui:last:border-b-0", className, {
+    "ui:border-color-divider": !darkTheme,
+    "ui:border-slate-600": darkTheme
   }) }, rest));
 };
 const HrDivider = (props) => {
   const { className, color = "border" } = props;
   return jsxRuntime.jsx("hr", { className: classNames__default.default({
-    "ui-border-color-divider": color === "divider",
-    "ui-border-color-border": color === "border",
-    "ui-border-neutral-border-high-contrast": color === "high-contrast",
-    "ui-border-neutral-border-low-contrast": color === "low-contrast"
+    "ui:border-color-divider": color === "divider",
+    "ui:border-color-border": color === "border",
+    "ui:border-neutral-border-high-contrast": color === "high-contrast",
+    "ui:border-neutral-border-low-contrast": color === "low-contrast"
   }, className) });
 };
 const VerticalFlowDivider = (props) => {
@@ -3857,23 +3881,23 @@ const CheckboxListModal = ({
   return jsxRuntime.jsxs(Modal, { isOpen, title: texts.title, onCloseClick: handleOnCloseClick, footerTrailingComponents: {
     primaryButton: jsxRuntime.jsx(PrimaryButton, { dataTestId: "modal-footer-trailing-primary-button", onClick: handleOnSaveClick, children: texts.confirmLabel }),
     secondaryButton: jsxRuntime.jsx(SecondaryButton, { dataTestId: "modal-footer-trailing-secondary-button", onClick: handleOnCloseClick, children: texts.cancelLabel })
-  }, scrollableContent: true, children: [accessory && jsxRuntime.jsxs("div", { className: "ui-mb-6 ui-flex ui-flex-col ui-space-y-6", children: [accessory, jsxRuntime.jsx(Divider, { version: "v2", color: "divider" })] }), isLoadingInitialItems && jsxRuntime.jsx(LoadingIndicator, {}), hasSearch && !isLoadingInitialItems && jsxRuntime.jsx("div", { className: "ui-mb-2", children: jsxRuntime.jsxs("label", { htmlFor: "checkbox-list-search", className: "ui-flex ui-flex-col ui-space-y-2", children: [texts.searchInputLabel && jsxRuntime.jsx(Text, { variant: "strong", children: texts.searchInputLabel }), jsxRuntime.jsx(SearchInput, { id: "checkbox-list-search", width: "full", value: search, placeholder: texts.searchPlaceHolder, onChange: handleOnSearchChange })] }) }), !isLoadingInitialItems && (items === null || items === void 0 ? void 0 : items.length) > 0 && jsxRuntime.jsx(CheckboxList, { groups, onChange: handleOnItemChange }), !isLoadingInitialItems && (items === null || items === void 0 ? void 0 : items.length) === 0 && jsxRuntime.jsx(Text, { text: texts.emptyState })] });
+  }, scrollableContent: true, children: [accessory && jsxRuntime.jsxs("div", { className: "ui:mb-6 ui:flex ui:flex-col ui:space-y-6", children: [accessory, jsxRuntime.jsx(Divider, { version: "v2", color: "divider" })] }), isLoadingInitialItems && jsxRuntime.jsx(LoadingIndicator, {}), hasSearch && !isLoadingInitialItems && jsxRuntime.jsx("div", { className: "ui:mb-2", children: jsxRuntime.jsxs("label", { htmlFor: "checkbox-list-search", className: "ui:flex ui:flex-col ui:space-y-2", children: [texts.searchInputLabel && jsxRuntime.jsx(Text, { variant: "strong", children: texts.searchInputLabel }), jsxRuntime.jsx(SearchInput, { id: "checkbox-list-search", width: "full", value: search, placeholder: texts.searchPlaceHolder, onChange: handleOnSearchChange })] }) }), !isLoadingInitialItems && (items === null || items === void 0 ? void 0 : items.length) > 0 && jsxRuntime.jsx(CheckboxList, { groups, onChange: handleOnItemChange }), !isLoadingInitialItems && (items === null || items === void 0 ? void 0 : items.length) === 0 && jsxRuntime.jsx(Text, { text: texts.emptyState })] });
 };
 
 const NavLayout = (props) => {
   const { patientSidebar = null, isNavDisabled, menu, disableScrolling, pageHeader, children, isInViewer } = props, rest = __rest(props, ["patientSidebar", "isNavDisabled", "menu", "disableScrolling", "pageHeader", "children", "isInViewer"]);
   const inViewer = isInViewer;
-  return jsxRuntime.jsxs("div", Object.assign({ "data-test-id": "nav-layout", "data-in-viewer": inViewer, className: "ui-mb-3 ui-flex ui-h-full ui-w-full ui-flex-col lg:ui-mb-0 lg:ui-flex-row" }, rest, { children: [!isNavDisabled && jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [menu, patientSidebar] }), jsxRuntime.jsxs("div", { id: "page-main-content", "data-test-id": "page-main-content", className: classNames__default.default([
-    "ui-w-full",
+  return jsxRuntime.jsxs("div", Object.assign({ "data-test-id": "nav-layout", "data-in-viewer": inViewer, className: "ui:mb-3 ui:flex ui:h-full ui:w-full ui:flex-col ui:lg:mb-0 ui:lg:flex-row" }, rest, { children: [!isNavDisabled && jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [menu, patientSidebar] }), jsxRuntime.jsxs("div", { id: "page-main-content", "data-test-id": "page-main-content", className: classNames__default.default([
+    "ui:w-full",
     {
-      "ui-overflow-y-auto": !disableScrolling,
-      "ui-max-h-screen": !inViewer,
-      "ui-h-screen": inViewer
+      "ui:overflow-y-auto": !disableScrolling,
+      "ui:max-h-screen": !inViewer,
+      "ui:h-screen": inViewer
     }
   ]), children: [pageHeader && jsxRuntime.jsx("div", { "data-test-id": "nav-layout-page-header", children: pageHeader }), jsxRuntime.jsx("div", { "data-test-id": "page-body", className: classNames__default.default({
-    "ui-px-xl": !!pageHeader,
+    "ui:px-xl": !!pageHeader,
     // assuming this is not set because it's the PatientPages.js
-    "ui-h-full": inViewer
+    "ui:h-full": inViewer
     // this allows extra spacing in the small viewport of hix specially when dealing with dropdowns
   }), children })] })] }));
 };
@@ -3903,7 +3927,7 @@ function Page({
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: mergedPageClasses, children: /* @__PURE__ */ jsxRuntime.jsx(LoadingIndicator, { asModal: false }) });
   }
   const maybeTitle = title instanceof Function ? title() : title;
-  const accessoryClasses = classNames__default.default("cweb-page-header ui-mb-4", {
+  const accessoryClasses = classNames__default.default("cweb-page-header ui:mb-4", {
     [`accessory-${accessoryPosition}`]: true
   });
   const accessoriesContent = accessories instanceof Function ? accessories() : accessories;
@@ -3953,8 +3977,8 @@ Page.propTypes = {
 };
 
 const Step = ({ title, stepNumber, active, localization }) => {
-  const barColor = active ? "ui-bg-primary" : "ui-bg-slate-200";
-  return jsxRuntime.jsxs("div", { className: "ui-w-full", children: [jsxRuntime.jsx("div", { className: `ui-mb-2 ui-h-1 ui-w-full ui-rounded ${barColor}` }), jsxRuntime.jsx(Text, { text: `${localization.step} ${stepNumber}`, type: "strong", color: active ? "blue-800" : "slate-500" }), jsxRuntime.jsx(Text, { text: title, type: "strong" })] });
+  const barColor = active ? "ui:bg-primary" : "ui:bg-slate-200";
+  return jsxRuntime.jsxs("div", { className: "ui:w-full", children: [jsxRuntime.jsx("div", { className: `ui:mb-2 ui:h-1 ui:w-full ui:rounded ${barColor}` }), jsxRuntime.jsx(Text, { text: `${localization.step} ${stepNumber}`, type: "strong", color: active ? "blue-800" : "slate-500" }), jsxRuntime.jsx(Text, { text: title, type: "strong" })] });
 };
 
 const Steps = ({ orderedStepTitles, currentStep, className, localization }) => {
@@ -3963,7 +3987,7 @@ const Steps = ({ orderedStepTitles, currentStep, className, localization }) => {
     { title: stepTitle, stepNumber: index + 1, active: index + 1 <= currentStep, localization },
     `step-${index}-${stepTitle.split(" ")[0]}`
   ));
-  return jsxRuntime.jsx("div", { className: `ui-flex ui-flex-row ui-justify-items-stretch ui-space-x-6 ${className}`, children: renderedSteps });
+  return jsxRuntime.jsx("div", { className: `ui:flex ui:flex-row ui:justify-items-stretch ui:space-x-6 ${className}`, children: renderedSteps });
 };
 
 const isBreadcrumbDividerProps = (subject) => {
@@ -3975,17 +3999,17 @@ const isBreadcrumbDividerProps = (subject) => {
 };
 
 const BreadcrumbItem = (props) => {
-  return jsxRuntime.jsx("li", { className: "ui-flex ui-flex-row ui-items-center ui-slash-split", children: jsxRuntime.jsx(BreadcrumbContent, Object.assign({}, props)) });
+  return jsxRuntime.jsx("li", { className: "ui:flex ui:flex-row ui:items-center ui:slash-split", children: jsxRuntime.jsx(BreadcrumbContent, Object.assign({}, props)) });
 };
 const linkTextProps = {
   variant: "base",
   color: "blue-800",
-  className: "ui-whitespace-no-wrap ui-max-w-xs ui-truncate"
+  className: "ui:whitespace-nowrap ui:max-w-[320px] ui:truncate"
 };
 const defaultTextProps = {
   variant: "strong",
   color: "base",
-  className: "ui-whitespace-no-wrap ui-w-full ui-max-w-xs ui-truncate"
+  className: "ui:whitespace-nowrap ui:w-full ui:max-w-[320px] ui:truncate"
 };
 const BreadcrumbContent = (_a) => {
   var { name, link } = _a, props = __rest(_a, ["name", "link"]);
@@ -3996,7 +4020,7 @@ const BreadcrumbContent = (_a) => {
   }) });
 };
 const BreadcrumbDividerItem = ({ onClick, truncatedCrumbs }) => {
-  return jsxRuntime.jsx("li", { className: "ui-flex ui-flex-row ui-items-center ui-slash-split", children: jsxRuntime.jsx("button", { onClick, title: truncatedCrumbs.map((crumb) => crumb.name).join(" / "), className: "ui-px-1", children: jsxRuntime.jsx(Text, { color: "blue-800", variant: "strong", children: "\u2026" }) }) });
+  return jsxRuntime.jsx("li", { className: "ui:flex ui:flex-row ui:items-center ui:slash-split", children: jsxRuntime.jsx("button", { onClick, title: truncatedCrumbs.map((crumb) => crumb.name).join(" / "), className: "ui:px-1", children: jsxRuntime.jsx(Text, { color: "blue-800", variant: "strong", children: "\u2026" }) }) });
 };
 
 const renderBreadcrumbItem = ({ link, name, textProps }) => {
@@ -4036,16 +4060,16 @@ const Breadcrumbs = ({
     dividerProps,
     ...tail
   ];
-  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)) });
+  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)) });
 };
 
 const TabbarItem = ({ title, index, isSelected, onSelect, className, badgeCount = 0, isLoading = false, dataTestId = "" }) => {
   const handleTabClick = () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(index);
-  const itemClassName = classNames__default.default("ui-flex ui-items-center ui-py-m", "ui-border-b-2 hover:ui-text-primary", "ui-transition ui-ease-in ui-duration-150", className, {
-    "ui-border-b-transparent ui-text-on-surface": !isSelected,
-    "ui-border-b-primary ui-text-primary": isSelected
+  const itemClassName = classNames__default.default("ui:flex ui:items-center ui:py-m", "ui:border-b-2 ui:hover:text-primary", "ui:transition ui:ease-in ui:duration-150", className, {
+    "ui:border-b-transparent ui:text-on-surface": !isSelected,
+    "ui:border-b-primary ui:text-primary": isSelected
   });
-  return jsxRuntime.jsxs("button", { className: itemClassName, onClick: handleTabClick, "data-test-id": dataTestId, role: "tab", "aria-selected": isSelected, children: [typeof title === "string" ? jsxRuntime.jsx(Text, { variant: "strong", color: "current", as: "span", className: "ui-leading-inherit", children: title }) : title, badgeCount > 0 && jsxRuntime.jsx(Badge, { className: "ui-ml-1", children: badgeCount }), isLoading && jsxRuntime.jsx(LoadingIndicator, { asSpinner: true, spinnerColor: "gray", className: "ui-w-6" })] });
+  return jsxRuntime.jsxs("button", { className: itemClassName, onClick: handleTabClick, "data-test-id": dataTestId, role: "tab", "aria-selected": isSelected, children: [typeof title === "string" ? jsxRuntime.jsx(Text, { variant: "strong", color: "current", as: "span", className: "ui:leading-inherit", children: title }) : title, badgeCount > 0 && jsxRuntime.jsx(Badge, { className: "ui:ml-1", children: badgeCount }), isLoading && jsxRuntime.jsx(LoadingIndicator, { asSpinner: true, spinnerColor: "gray", className: "ui:w-6" })] });
 };
 
 const Tabbar = ({ tabs = [], selectedIndex, onSelect, className }) => {
@@ -4057,7 +4081,7 @@ const Tabbar = ({ tabs = [], selectedIndex, onSelect, className }) => {
     setInnerSelectedIndex(index);
     onSelect === null || onSelect === void 0 ? void 0 : onSelect({ index, selectedTab: tabs[index] });
   };
-  return jsxRuntime.jsx("div", { className: classNames__default.default("ui-flex ui-w-full ui-gap-xl", className), role: "tablist", children: tabs === null || tabs === void 0 ? void 0 : tabs.map((tabItemProps, index) => {
+  return jsxRuntime.jsx("div", { className: classNames__default.default("ui:flex ui:w-full ui:gap-xl", className), role: "tablist", children: tabs === null || tabs === void 0 ? void 0 : tabs.map((tabItemProps, index) => {
     var _a;
     const itemProps = Object.assign({ index, onSelect: handleOnTabSelect, isSelected: innerSelectedIndex === index }, tabItemProps);
     return jsxRuntime.jsx(TabbarItem, Object.assign({}, itemProps), (_a = tabItemProps.dataTestId) !== null && _a !== void 0 ? _a : index);
@@ -4067,51 +4091,51 @@ const Tabbar = ({ tabs = [], selectedIndex, onSelect, className }) => {
 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(
-    "title-avenir ui-text-3xl ui-font-bold ui-antialiased",
+    "title-avenir ui:text-3xl ui:font-bold ui:antialiased",
     /**
      * Design calls for a specific line height. Let's see later
      * if we should include this in the titles sizing system.
      */
-    "ui-leading-[1.2]",
-    "ui-bg-gradient-to-br ui-from-blue-800 ui-to-blue-700 ui-bg-clip-text ui-text-transparent",
+    "ui:leading-[1.2]",
+    "ui:bg-linear-to-br ui:from-blue-800 ui:to-blue-700 ui:bg-clip-text ui:text-transparent",
     className
   ) }));
 };
 
 const PageHeader = ({ navigation, breadcrumbs, dataTestId, accessories, isPolling, title, contained, className, truncateBreadcrumbsAfter, renderBreadcrumbItem, banner }) => {
   var _a;
-  const withContained = { "ui-max-w-3xl ui-m-auto": contained };
+  const withContained = { "ui:max-w-3xl ui:m-auto": contained };
   const hasTabBar = Boolean((_a = navigation === null || navigation === void 0 ? void 0 : navigation.tabs) === null || _a === void 0 ? void 0 : _a.length);
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { "data-test-id": "page-header", className: classNames__default.default("ui-pt-xl", className, {
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { "data-test-id": "page-header", className: classNames__default.default("ui:pt-xl", className, {
     /**
      * The tab bar should sit snugly against the bottom of the page header, but
      * this is the only exception. Other than that the page header should have
      * a bottom padding.
      */
-    "ui-pb-l": !hasTabBar,
-    "ui-px-xl": !contained,
-    "ui-w-full": contained
-  }), children: [banner && jsxRuntime.jsx(NotificationBanner, { noBorder: banner.noBorder, color: banner.color, "data-test-id": `page-header-banner-${title}`, className: "ui-mb-m", icon: banner.icon, children: jsxRuntime.jsxs("div", { className: "ui-flex ui-flex-col", children: [banner.title && jsxRuntime.jsx(Text, { color: "current", variant: "strong", children: banner.title }), jsxRuntime.jsx(Text, { color: "current", containsDangerousHtml: banner.text.isHTML, children: banner.text.content })] }) }), jsxRuntime.jsxs("div", { className: classNames__default.default({ "ui-flex ui-flex-col": !contained }), children: [!!(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && jsxRuntime.jsx("div", { className: classNames__default.default("ui-mb-m", withContained), children: jsxRuntime.jsx(Breadcrumbs, { crumbs: breadcrumbs, truncateAfter: truncateBreadcrumbsAfter, renderItem: renderBreadcrumbItem }) }), jsxRuntime.jsxs("div", { className: classNames__default.default("ui-flex ui-flex-row ui-items-center ui-justify-between", withContained), children: [jsxRuntime.jsxs("div", { className: "ui-flex ui-flex-row ui-items-center ui-gap-xxs", children: [typeof title === "string" ? jsxRuntime.jsx(PageTitle, { "data-test-id": `${dataTestId}-title`, children: title }) : jsxRuntime.jsx(Box, { width: "full", children: title }), isPolling && jsxRuntime.jsx(LoadingIndicator, { asSpinner: true, className: "page-spinner", spinnerColor: "gray" })] }), accessories && jsxRuntime.jsx("div", { "data-test-id": "page-header-accessories", children: accessories })] })] }), navigation && jsxRuntime.jsx(Tabbar, Object.assign({}, navigation, { className: classNames__default.default(navigation.className, withContained) }))] }), jsxRuntime.jsx(Divider, { version: "v2" })] });
+    "ui:pb-l": !hasTabBar,
+    "ui:px-xl": !contained,
+    "ui:w-full": contained
+  }), children: [banner && jsxRuntime.jsx(NotificationBanner, { noBorder: banner.noBorder, color: banner.color, "data-test-id": `page-header-banner-${title}`, className: "ui:mb-m", icon: banner.icon, children: jsxRuntime.jsxs("div", { className: "ui:flex ui:flex-col", children: [banner.title && jsxRuntime.jsx(Text, { color: "current", variant: "strong", children: banner.title }), jsxRuntime.jsx(Text, { color: "current", containsDangerousHtml: banner.text.isHTML, children: banner.text.content })] }) }), jsxRuntime.jsxs("div", { className: classNames__default.default({ "ui:flex ui:flex-col": !contained }), children: [!!(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && jsxRuntime.jsx("div", { className: classNames__default.default("ui:mb-m", withContained), children: jsxRuntime.jsx(Breadcrumbs, { crumbs: breadcrumbs, truncateAfter: truncateBreadcrumbsAfter, renderItem: renderBreadcrumbItem }) }), jsxRuntime.jsxs("div", { className: classNames__default.default("ui:flex ui:flex-row ui:items-center ui:justify-between", withContained), children: [jsxRuntime.jsxs("div", { className: "ui:flex ui:flex-row ui:items-center ui:gap-xxs", children: [typeof title === "string" ? jsxRuntime.jsx(PageTitle, { "data-test-id": `${dataTestId}-title`, children: title }) : jsxRuntime.jsx(Box, { width: "full", children: title }), isPolling && jsxRuntime.jsx(LoadingIndicator, { asSpinner: true, className: "page-spinner", spinnerColor: "gray" })] }), accessories && jsxRuntime.jsx("div", { "data-test-id": "page-header-accessories", children: accessories })] })] }), navigation && jsxRuntime.jsx(Tabbar, Object.assign({}, navigation, { className: classNames__default.default(navigation.className, withContained) }))] }), jsxRuntime.jsx(Divider, { version: "v2" })] });
 };
 
 const CRUDPage = ({ submitButtonProps, cancelButtonProps, className, children, isLoading, isSubmitting, dataTestId = "page", title, header, steps, isMobileFriendly, belowHeader }) => {
-  const mergedClasses = classNames__default.default("cweb-crud-page", "ui-w-full ui-mb-0 ui-mx-auto ui-pb-8", className);
+  const mergedClasses = classNames__default.default("cweb-crud-page", "ui:w-full ui:mb-0 ui:mx-auto ui:pb-8", className);
   const submitButton = submitButtonProps && jsxRuntime.jsx(PrimaryButton, Object.assign({ "data-test-id": "submit-button", role: "primary", isPending: isSubmitting }, submitButtonProps), "submit-button");
   const cancelButton = 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 })] }) });
+    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 })] }) });
   }
   return jsxRuntime.jsx("div", { className: classNames__default.default("cweb-crud-page-container", {
-    "ui-h-screen ui-overflow-y-auto": isMobileFriendly
-  }), "data-test-id": dataTestId, children: jsxRuntime.jsxs("div", { className: mergedClasses, "data-test-id": dataTestId, children: [jsxRuntime.jsx(PageHeaderBlock, { header, title }), belowHeader, jsxRuntime.jsx("div", { className: "ui-flex ui-justify-center", children: jsxRuntime.jsxs("div", { className: classNames__default.default(
+    "ui:h-screen ui:overflow-y-auto": isMobileFriendly
+  }), "data-test-id": dataTestId, children: jsxRuntime.jsxs("div", { className: mergedClasses, "data-test-id": dataTestId, children: [jsxRuntime.jsx(PageHeaderBlock, { header, title }), belowHeader, jsxRuntime.jsx("div", { className: "ui:flex ui:justify-center", children: jsxRuntime.jsxs("div", { className: classNames__default.default(
     "cweb-crud-page-form-container",
-    "ui-w-full ui-max-w-3xl ui-rounded ui-bg-white ui-p-6",
+    "ui:w-full ui:max-w-3xl ui:rounded ui:bg-white ui:p-6",
     /**
      * If the belowHeader component is passed, there is no need for the extra margin,
      * since the spacing needed will be occupied by the `belowHeader` component itself.
      */
-    { "ui-mt-xl": !belowHeader }
-  ), children: [steps && jsxRuntime.jsx(Steps, { className: "ui-mb-4", orderedStepTitles: steps.titles, currentStep: steps.currentStep, localization: steps.localization }), children, jsxRuntime.jsx(Line, { left: [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") })] }) })] }) });
+    { "ui:mt-xl": !belowHeader }
+  ), children: [steps && jsxRuntime.jsx(Steps, { className: "ui:mb-4", orderedStepTitles: steps.titles, currentStep: steps.currentStep, localization: steps.localization }), children, jsxRuntime.jsx(Line, { left: [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") })] }) })] }) });
 };
 const PageHeaderBlock = ({ header, title }) => {
   if (!title && !header) {
@@ -4119,7 +4143,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.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 })] }) }) });
   }
   if (header) {
     if (header.breadcrumbs !== void 0 && header.renderBreadcrumbItem !== void 0) {
@@ -4128,7 +4152,7 @@ const PageHeaderBlock = ({ header, title }) => {
       pageHeaderComponent = jsxRuntime.jsx(PageHeader, Object.assign({}, header, { breadcrumbs: void 0, renderBreadcrumbItem: void 0 }));
     }
   }
-  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" })] });
+  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";
@@ -4171,11 +4195,11 @@ const PreviewPhone = ({ className, children }) => {
     const widthScale = containerWidth < phoneWidth ? containerWidth / phoneWidth : 1;
     setScale(heightScale < widthScale ? heightScale : widthScale);
   }, [windowHeight, windowWidth]);
-  return showPhone ? jsxRuntime.jsx("div", { ref: containerCallbak, className: classNames__default.default("ui-relative ui-flex ui-h-full ui-items-center ui-justify-center", className), children: jsxRuntime.jsxs("div", { className: "ui-absolute", style: {
+  return showPhone ? jsxRuntime.jsx("div", { ref: containerCallbak, className: classNames__default.default("ui:relative ui:flex ui:h-full ui:items-center ui:justify-center", className), children: jsxRuntime.jsxs("div", { className: "ui:absolute", style: {
     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, alt: "phone mockup" })] }) }) : jsxRuntime.jsx(jsxRuntime.Fragment, {});
 };
 
 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-radio {\n  outline: none;\n}\n.cweb-radio .cweb-radio-input {\n  -webkit-appearance: none;\n  height: 1px;\n  opacity: 0;\n  width: 1px;\n}\n.cweb-radio .cweb-radio-label-text {\n  margin-left: 8px;\n  user-select: none;\n  text-align: left;\n}\n.cweb-radio .cweb-radio-label {\n  display: flex;\n  align-items: center;\n  margin-bottom: 0;\n}\n.cweb-radio .cweb-radio-icon-container {\n  width: 16px;\n  height: 16px;\n  position: relative;\n  border: 1px solid #cccccc;\n  border-radius: 50%;\n  transition: background-color 0.3s ease-in-out;\n}\n.cweb-radio .cweb-radio-icon {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: block;\n}\n.cweb-radio.is-focused .cweb-radio-icon-container {\n  border-color: #1e40af;\n}\n.cweb-radio.is-checked .cweb-radio-icon {\n  width: 5px;\n  height: 5px;\n  background-color: #ffffff;\n  border-radius: 50%;\n}";
@@ -4210,10 +4234,10 @@ class Radio extends React.PureComponent {
   render() {
     const { className, isChecked, isDisabled, name, value, text } = this.props;
     const { isFocused } = this.state;
-    const containerClassName = classNames__default.default("cweb-radio ui-mr-4", className, {
+    const containerClassName = classNames__default.default("cweb-radio ui:mr-4", className, {
       "is-focused": isFocused,
       "is-checked": isChecked,
-      "ui-opacity-50": isDisabled
+      "ui:opacity-50": isDisabled
     });
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerClassName, ref: this.containerRef, children: /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "cweb-radio-label", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -4234,11 +4258,11 @@ class Radio extends React.PureComponent {
         "span",
         {
           className: classNames__default.default("cweb-radio-icon-container", {
-            "ui-bg-primary": isChecked,
-            "hover:ui-bg-primary-dark": isChecked,
-            "ui-outline-primary": isFocused,
-            "ui-cursor-not-allowed": isDisabled,
-            "ui-cursor-pointer": !isDisabled
+            "ui:bg-primary": isChecked,
+            "ui:hover:bg-primary-dark": isChecked,
+            "ui:outline-primary": isFocused,
+            "ui:cursor-not-allowed": isDisabled,
+            "ui:cursor-pointer": !isDisabled
           }),
           children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cweb-radio-icon" })
         }
@@ -4247,7 +4271,7 @@ class Radio extends React.PureComponent {
         Text,
         {
           className: classNames__default.default("cweb-radio-label-text", {
-            "ui-cursor-not-allowed": isDisabled
+            "ui:cursor-not-allowed": isDisabled
           }),
           text
         }
@@ -4321,13 +4345,13 @@ const SectionHeader = ({ title, aside, isLoading = false }) => {
 };
 
 const SectionFooter = ({ children }) => {
-  return jsxRuntime.jsx(Stack, { as: "footer", width: "full", p: "m", className: "ui-border-t-slate-200", children });
+  return jsxRuntime.jsx(Stack, { as: "footer", width: "full", p: "m", className: "ui:border-t-slate-200", children });
 };
 
 const Section = (_a) => {
   var { title, footer, children, headerAside, className, isLoading = false, headerTitle } = _a, restProps = __rest(_a, ["title", "footer", "children", "headerAside", "className", "isLoading", "headerTitle"]);
-  return jsxRuntime.jsxs(Stack, Object.assign({ as: "section", "aria-label": title, title, width: "full", className: classNames__default.default("ui-rounded-lg ui-bg-white", className) }, restProps, { children: [(title || headerAside || headerTitle) && jsxRuntime.jsx(SectionHeader, { title: headerTitle || title, aside: headerAside, isLoading }), jsxRuntime.jsx(Box, { width: "full", className: classNames__default.default({
-    "ui-border-t-1 ui-border-t-slate-200": children
+  return jsxRuntime.jsxs(Stack, Object.assign({ as: "section", "aria-label": title, title, width: "full", className: classNames__default.default("ui:rounded-lg ui:bg-white", className) }, restProps, { children: [(title || headerAside || headerTitle) && jsxRuntime.jsx(SectionHeader, { title: headerTitle || title, aside: headerAside, isLoading }), jsxRuntime.jsx(Box, { width: "full", className: classNames__default.default({
+    "ui:border-t ui:border-t-slate-200": children
   }), children: isLoading ? null : children }), footer && jsxRuntime.jsx(SectionFooter, { children: footer })] }));
 };
 
@@ -4344,8 +4368,8 @@ const SectionItem = (props) => {
 
 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);
+  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 })] }));
 }
 
@@ -4357,32 +4381,32 @@ const StyledSelect = React__namespace.default.forwardRef((_a, ref) => {
   const hasPrefix = !!prefix;
   const hasSuffix = !!suffix;
   const hasNoExtraContent = !hasPrefix && !hasSuffix;
-  return jsxRuntime.jsxs(FlexRow, { spacing: "none", "data-test-id": "input-component-container", stretch: false, children: [jsxRuntime.jsx("span", { className: classNames__default.default("ui-h-11 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-p-3", "ui-text-sm", "ui-text-slate-500", "ui-bg-main-background"), children: suffix || prefix }), jsxRuntime.jsxs("div", { className: classNames__default.default("ui-relative", {
-    "ui-flex ui-flex-grow": width === "full"
-  }), children: [jsxRuntime.jsx("select", Object.assign({ ref, className: classNames__default.default("styled-select", "ui-block ui-min-w-[4rem]", calculateResponsiveWidthClasses(width), {
-    "ui-bg-slate-50 ui-text-slate-400": attributes.disabled,
-    "ui-text-slate-800": !attributes.disabled,
-    "ui-border-input-border": !attributes.disabled && !isError,
-    "hover:ui-border-input-border-dark": !attributes.disabled,
-    "ui-border-red-700": isError,
-    "focus:ui-outline-negative": isError,
-    "focus:ui-border-primary": !isError,
-    "focus:ui-outline-primary": !isError,
-    "ui-bg-white": !attributes.disabled
-  }, "ui-h-11", "ui-p-2", "ui-border", "ui-text-base sm:ui-text-sm", "ui-placeholder-slate-500", "ui-border-solid", "ui-transition-colors", "ui-duration-300", {
-    "ui-rounded": hasNoExtraContent,
-    "ui-rounded-l": hasSuffix,
-    "ui-rounded-r": hasPrefix,
-    "ui-order-2": hasPrefix,
-    "ui-order-1": hasSuffix
-  }, "ui-shadow-default", className) }, attributes, { children })), jsxRuntime.jsx("div", { className: "ui-pointer-events-none ui-absolute ui-right-0 ui-top-1/2", style: {
+  return jsxRuntime.jsxs(FlexRow, { spacing: "none", "data-test-id": "input-component-container", stretch: false, children: [jsxRuntime.jsx("span", { className: classNames__default.default("ui:h-11 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:p-3", "ui:text-sm", "ui:text-slate-500", "ui:bg-main-background"), children: suffix || prefix }), jsxRuntime.jsxs("div", { className: classNames__default.default("ui:relative", {
+    "ui:flex ui:grow": width === "full"
+  }), children: [jsxRuntime.jsx("select", Object.assign({ ref, className: classNames__default.default("styled-select", "ui:block ui:min-w-[4rem]", calculateResponsiveWidthClasses(width), {
+    "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
+  }, "ui:h-11", "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:rounded": hasNoExtraContent,
+    "ui:rounded-l": hasSuffix,
+    "ui:rounded-r": hasPrefix,
+    "ui:order-2": hasPrefix,
+    "ui:order-1": hasSuffix
+  }, "ui:shadow-default", className) }, attributes, { children })), jsxRuntime.jsx("div", { className: "ui:pointer-events-none ui:absolute ui:right-0 ui:top-1/2", style: {
     transform: "translateY(-50%)"
-  }, children: jsxRuntime.jsx(ChevronDownIcon, { className: classNames__default.default("ui-mr-3 ui-h-6 ui-w-6 ui-bg-white ui-text-slate-300") }) })] })] });
+  }, children: jsxRuntime.jsx(ChevronDownIcon, { className: classNames__default.default("ui:mr-3 ui:h-6 ui:w-6 ui:bg-white ui:text-slate-300") }) })] })] });
 });
 
 const LabeledSelect = React__namespace.default.forwardRef((props, ref) => {
@@ -4432,17 +4456,17 @@ 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, role: "tertiary" }), 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",
-    "-ui-right-68": shiftMenuTo === "right-md",
-    "ui-left-1/2 -ui-translate-x-1/2 ui-transform": !shiftMenuTo
+  return jsxRuntime.jsxs("div", { onClick: handleShowMenu, className: "ui:relative", children: [jsxRuntime.jsx(TertiaryButton, { icon: iconComponent, onClick: handleShowMenu, text: buttonTitle, role: "tertiary" }), 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",
+    "ui:-right-68": shiftMenuTo === "right-md",
+    "ui:left-1/2 ui:-translate-x-1/2 ui:transform": !shiftMenuTo
     // centering the menu in the Y axis of the button
   }, {
-    "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(Text, { text: innerConfig.itemName }), jsxRuntime.jsx(Checkbox, { name: innerConfig.itemName, id: innerConfig.itemId, type: "switch", isChecked: innerConfig.on, onChange: handleOnVisibilitySwitchChanged })] }, innerConfig.itemId))] })] });
+    "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(Text, { text: innerConfig.itemName }), jsxRuntime.jsx(Checkbox, { name: innerConfig.itemName, id: innerConfig.itemId, type: "switch", isChecked: innerConfig.on, onChange: handleOnVisibilitySwitchChanged })] }, innerConfig.itemId))] })] });
 };
 
 var css_248z$2 = "/**\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-switcher-item {\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n  align-items: center;\n}\n.cweb-switcher-item .cweb-switcher-item-link {\n  display: flex;\n  align-items: center;\n  text-decoration: none;\n  padding: 0.5rem 1rem;\n  cursor: pointer;\n}\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon {\n  display: flex;\n  align-items: center;\n}\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-default,\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active {\n  width: 20px;\n  height: 20px;\n}\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active {\n  display: none;\n}\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-text {\n  color: #737373;\n  transition: color 0.4s ease;\n  padding-bottom: 0;\n}\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon + .cweb-switcher-item-link-text {\n  margin-left: 8px;\n  padding: 0;\n}\n.cweb-switcher-item.is-selected, .cweb-switcher-item:hover, .cweb-switcher-item:active {\n  border-color: #1e40af;\n  z-index: 1;\n}\n.cweb-switcher-item.is-selected .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-default, .cweb-switcher-item:hover .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-default, .cweb-switcher-item:active .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-default {\n  display: none;\n}\n.cweb-switcher-item.is-selected .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active, .cweb-switcher-item:hover .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active, .cweb-switcher-item:active .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active {\n  display: inherit;\n}\n.cweb-switcher-item.is-selected .cweb-switcher-item-link .cweb-switcher-item-link-text, .cweb-switcher-item:hover .cweb-switcher-item-link .cweb-switcher-item-link-text, .cweb-switcher-item:active .cweb-switcher-item-link .cweb-switcher-item-link-text {\n  color: #1e40af;\n}\n.cweb-switcher-item.is-disabled {\n  pointer-events: none;\n}";
@@ -4472,11 +4496,11 @@ function SwitcherItem({
   const itemClassName = classNames__default.default(
     "",
     className,
-    "ui-flex ui-flex-row ui-h-11 ui-p-2 ui-items-center ui-border-solid ui-border-t ui-border-b ui-border-l ui-border-slate-200 ui-transition ui-duration-300 ui-cursor-pointer",
-    "first:ui-rounded-l-xl last:ui-rounded-r-xl last:ui-border-r",
+    "ui:flex ui:flex-row ui:h-11 ui:p-2 ui:items-center ui:border-solid ui:border-t ui:border-b ui:border-l ui:border-slate-200 ui:transition ui:duration-300 ui:cursor-pointer",
+    "ui:first:rounded-l-xl ui:last:rounded-r-xl ui:last:border-r",
     {
-      "ui-bg-slate-100 ui-text-slate-500": isSelected,
-      "ui-bg-slate-50 hover:ui-bg-slate-100 hover:ui-text-slate-500 ui-text-slate-300": !isSelected
+      "ui:bg-slate-100 ui:text-slate-500": isSelected,
+      "ui:bg-slate-50 ui:hover:bg-slate-100 ui:hover:text-slate-500 ui:text-slate-300": !isSelected
     }
   );
   let calculatedIcon;
@@ -4486,8 +4510,8 @@ function SwitcherItem({
     calculatedIcon = isSelected ? icon.active : icon.default;
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: itemClassName, onClick: handleItemClick, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ui-relative ui-block", children: [
-      icon?.showBadge && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ui-absolute ui-right-0 ui-top-0 ui-h-2.5 ui-w-2.5 ui-rounded-xl ui-border-2 ui-border-slate-50 ui-bg-red-400 " }),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ui:relative ui:block", children: [
+      icon?.showBadge && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ui:absolute ui:right-0 ui:top-0 ui:h-2.5 ui:w-2.5 ui:rounded-xl ui:border-2 ui:border-slate-50 ui:bg-red-400" }),
       calculatedIcon
     ] }),
     name && /* @__PURE__ */ jsxRuntime.jsx(Text, { text: name, color: isSelected ? "base" : "gray-500" })
@@ -4514,7 +4538,7 @@ function Switcher({
       className: classNames__default.default(
         "cweb-switcher",
         className,
-        "ui-m-0 ui-flex ui-list-none ui-p-0"
+        "ui:m-0 ui:flex ui:list-none ui:p-0"
       ),
       "data-test-id": "switcher-container",
       children: items.map((item, index) => {
@@ -4558,23 +4582,23 @@ const Switch = (props) => {
     onChange === null || onChange === void 0 ? void 0 : onChange(checkedChanged);
   };
   const enabled = !disabled;
-  return jsxRuntime.jsx(RadixSwitch__namespace.Root, { id, name, checked, disabled, onCheckedChange: handleChange, className: classNames__default.default("ui-h-[28px] ui-w-[56px]", "ui-relative ui-rounded-full ui-outline-none", {
-    "ui-cursor-pointer": enabled,
-    "ui-cursor-not-allowed": disabled,
-    "ui-bg-secondary-dark data-[state=checked]:ui-bg-green-400": enabled,
-    "ui-bg-slate-200": disabled
-  }), 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 data-[state=checked]:ui-translate-x-[32px]", "ui-block ui-rounded-full") }) });
+  return jsxRuntime.jsx(RadixSwitch__namespace.Root, { id, name, checked, disabled, onCheckedChange: handleChange, className: classNames__default.default("ui:h-[28px] ui:w-[56px]", "ui:relative ui:rounded-full ui:outline-none", {
+    "ui:cursor-pointer": enabled,
+    "ui:cursor-not-allowed": disabled,
+    "ui:bg-secondary-dark ui:data-[state=checked]:bg-green-400": enabled,
+    "ui:bg-slate-200": disabled
+  }), 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") }) });
 };
 
 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, { text: 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,
-      "ui-h-11 ui-w-11": props.isTypeCompact,
-      "ui-h-22 ui-w-36": !props.isTypeCompact
-    }), children: jsxRuntime.jsx(Image$1, { className: "ui-h-full ui-w-full ui-rounded", src: option, wrapperClassName: classNames__default.default({
-      "ui-h-full ui-w-full": !props.isTypeCompact
+    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,
+      "ui:h-11 ui:w-11": props.isTypeCompact,
+      "ui:h-22 ui:w-36": !props.isTypeCompact
+    }), children: jsxRuntime.jsx(Image$1, { className: "ui:h-full ui:w-full ui:rounded", src: option, wrapperClassName: classNames__default.default({
+      "ui:h-full ui:w-full": !props.isTypeCompact
     }) }) }, option);
   }) })] });
 };
@@ -4687,23 +4711,23 @@ const ImagePickerInner = ({
     }
   });
   return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(FlexContainer, { type: isTypeCompact ? "row" : "column", horizontalSpacing: isTypeCompact ? "small" : "none", verticalSpacing: !isTypeCompact ? "small" : "none", children: [selectedMedia && jsxRuntime.jsxs("div", { className: classNames__default.default({
-    "ui-h-11 ui-w-11 ui-flex-shrink-0 ui-rounded-full ui-bg-secondary ui-p-3": isTypeCompact,
-    "ui-h-44 ui-w-full": !isTypeCompact
-  }), children: [isUploading && jsxRuntime.jsx(LoadingIndicator, { className: "ui-my-16" }), !isUploading && selectedMediaType === "image" && jsxRuntime.jsx(Image$1, { className: classNames__default.default("ui-h-full ui-w-full", {
-    "ui-rounded ui-bg-secondary ui-object-contain ui-p-3": !isTypeCompact
+    "ui:h-11 ui:w-11 ui:shrink-0 ui:rounded-full ui:bg-secondary ui:p-3": isTypeCompact,
+    "ui:h-44 ui:w-full": !isTypeCompact
+  }), children: [isUploading && jsxRuntime.jsx(LoadingIndicator, { className: "ui:my-16" }), !isUploading && selectedMediaType === "image" && jsxRuntime.jsx(Image$1, { className: classNames__default.default("ui:h-full ui:w-full", {
+    "ui:rounded ui:bg-secondary ui:object-contain ui:p-3": !isTypeCompact
   }), src: selectedMedia, wrapperClassName: classNames__default.default({
-    "ui-w-full ui-h-full": !isTypeCompact
-  }) }), !isUploading && !isErrorUploading && selectedMediaType === "video" && jsxRuntime.jsx("video", { className: classNames__default.default("ui-h-full", {
-    "ui-w-full ui-rounded ui-bg-secondary ui-object-contain ui-p-3": !isTypeCompact,
-    "ui-w-full": isTypeCompact
+    "ui:w-full ui:h-full": !isTypeCompact
+  }) }), !isUploading && !isErrorUploading && selectedMediaType === "video" && jsxRuntime.jsx("video", { className: classNames__default.default("ui:h-full", {
+    "ui:w-full ui:rounded ui:bg-secondary ui:object-contain ui:p-3": !isTypeCompact,
+    "ui:w-full": isTypeCompact
   }), src: selectedMedia, playsInline: true, controls: true, disablePictureInPicture: true, preload: "none", poster: placeholderImage, children: "There is a video, but your browser doesn't support showing the video." }), selectedMediaType !== "image" && selectedMediaType !== "video" && jsxRuntime.jsx(NotificationBanner, { color: "blue", icon: InfoIcon, children: jsxRuntime.jsx(Text, { children: (_a = localisation.unsupportedMediaType) !== null && _a !== void 0 ? _a : "File uploaded successfully but preview not supported." }) })] }), error && jsxRuntime.jsx(NotificationBanner, { color: "red", icon: ExclamationMarkIcon, children: jsxRuntime.jsx(Text, { children: error }) }), jsxRuntime.jsxs(FlexRow, { spacing: "small", children: [jsxRuntime.jsx(SecondaryButton, { "data-test-id": `image-picker-${name}`, id: `image-picker-${name}`, isDisabled, className: "cweb-imagePicker-change", text: localisation.openModalButton, onClick: () => setIsImagesPanelOpen(true), ref: innerRef }), isUploadButtonVisible && jsxRuntime.jsxs("span", { className: "cweb-imagePicker-upload", children: [jsxRuntime.jsx(SecondaryButton, { text: localisation.uploadImage, isDisabled, isPending: isUploading, id: `upload-image-${name}`, onClick: () => {
     var _a2;
     setIsImagesPanelOpen(false);
     (_a2 = fileInputRef.current) === null || _a2 === void 0 ? void 0 : _a2.click();
-  } }), 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(ModalBase, { size: "wide", onCloseClick: handleCloseModal, scrollableContent: true, footerTrailingComponents: {
+  } }), 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(ModalBase, { size: "wide", onCloseClick: handleCloseModal, scrollableContent: true, footerTrailingComponents: {
     primaryButton: jsxRuntime.jsx(PrimaryButton, { dataTestId: "modal-footer-trailing-primary-button", onClick: handleConfirmSelection, children: localisation.selectButton }),
     secondaryButton: jsxRuntime.jsx(SecondaryButton, { dataTestId: "modal-footer-trailing-secondary-button", onClick: handleCloseModal, children: localisation.cancel })
-  }, isOpen: isImagesPanelOpen, title: localisation.modalTitle, 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)) })] })] });
+  }, isOpen: isImagesPanelOpen, title: localisation.modalTitle, 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)) })] })] });
 };
 const MediaPicker = React__namespace.default.forwardRef((props, ref) => {
   var _a, _b;
@@ -4711,9 +4735,9 @@ const MediaPicker = React__namespace.default.forwardRef((props, ref) => {
   return jsxRuntime.jsx(ImagePickerInner, Object.assign({}, mappedProps, { innerRef: ref }));
 });
 
-const TagGroup = ({ children, tags, tagSize = "base", 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, tags, tagSize = "base", 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)))] });
 
-var css_248z$1 = "/**\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-textarea {\n  resize: none;\n}\n.cweb-textarea.has-icon {\n  background-size: 24px;\n  background-position: 10px 10px;\n  background-repeat: no-repeat;\n  padding-left: 44px;\n}\n.cweb-textarea.resizable {\n  resize: both;\n}\n.cweb-textarea.resizable-x {\n  resize: horizontal;\n}\n.cweb-textarea.resizable-y {\n  resize: vertical;\n}\n.cweb-textarea::placeholder {\n  color: #737373;\n}\n.cweb-textarea:-ms-input-placeholder {\n  color: #64748b !important;\n}\n.cweb-textarea::-ms-input-placeholder {\n  color: #64748b;\n}\n.cweb-textarea:focus {\n  border-color: #1e40af;\n}\n.cweb-textarea:disabled {\n  cursor: not-allowed;\n}\n.cweb-textarea.has-error {\n  border: 1px solid #b91c1c;\n  color: #991b1b;\n}";
+var css_248z$1 = "/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */\n.cweb-textarea {\n  resize: none;\n  background-color: field;\n}\n.cweb-textarea.has-icon {\n  background-size: 24px;\n  background-position: 10px 10px;\n  background-repeat: no-repeat;\n  padding-left: 44px;\n}\n.cweb-textarea.resizable {\n  resize: both;\n}\n.cweb-textarea.resizable-x {\n  resize: horizontal;\n}\n.cweb-textarea.resizable-y {\n  resize: vertical;\n}\n.cweb-textarea:focus {\n  border-color: var(--color-primary);\n}\n.cweb-textarea:disabled {\n  cursor: not-allowed;\n}\n.cweb-textarea.has-error {\n  border: 1px solid #b91c1c;\n  color: #991b1b;\n}";
 styleInject(css_248z$1);
 
 const resizeTypes = {
@@ -4739,34 +4763,34 @@ const Textarea = React__namespace.default.forwardRef((_a, ref) => {
     // Base classes
     className,
     "cweb-textarea",
-    "ui-w-full",
-    "ui-rounded",
-    "ui-text-sm",
+    "ui:w-full",
+    "ui:rounded",
+    "ui:text-sm",
     // Padding and border
-    "ui-p-2",
-    "ui-border",
-    "ui-border-solid",
-    "ui-input-border",
+    "ui:p-2",
+    "ui:border",
+    "ui:border-solid",
+    "ui:input-border",
     // Colors and states
-    "ui-placeholder-gray-500",
-    "hover:ui-input-border-dark",
-    "focus:ui-outline-primary",
-    "focus:ui-border-primary",
+    "ui:placeholder-gray-500",
+    "ui:hover:input-border-dark",
+    "ui:focus:outline-primary",
+    "ui:focus:border-primary",
     // Transitions
-    "ui-transition-colors",
-    "ui-duration-300",
+    "ui:transition-colors",
+    "ui:duration-300",
     {
       // Disabled state
-      "ui-bg-slate-50 ui-text-slate-400": isDisabled,
-      "ui-text-on-surface": !isDisabled,
+      "ui:bg-slate-50 ui:text-slate-400": isDisabled,
+      "ui:text-on-surface": !isDisabled,
       // Normal state (not disabled, not error)
-      "ui-border-input-border": !isDisabled && !isError,
-      "hover:ui-border-input-border-dark": !isDisabled,
+      "ui:border-input-border": !isDisabled && !isError,
+      "ui:hover:border-input-border-dark": !isDisabled,
       // Error state
-      "ui-border-negative-border": isError,
-      "focus:ui-outline-negative": isError,
-      "focus:ui-border-primary": !isError,
-      "focus:ui-outline-primary": !isError,
+      "ui:border-negative-border": isError,
+      "ui:focus:outline-negative": isError,
+      "ui:focus:border-primary": !isError,
+      "ui:focus:outline-primary": !isError,
       // Style if icon present, and resizable states
       "has-icon": !!icon,
       resizable: resizable === resizeTypes.BOTH,
@@ -4818,65 +4842,65 @@ const TextEditor = (_a) => {
 };
 
 const TextLink = (props) => {
-  const className = classNames__default.default("ui-text-sm hover:ui-underline", {
-    "ui-cursor-pointer": props.enabled,
-    "ui-cursor-default": !props.enabled
+  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:text-primary": props.enabled,
+    "ui:text-slate-800": !props.enabled
   }, {
-    "hover:ui-text-primary-dark": props.enabled,
-    "hover:ui-text-slate-900": !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";
-  const containerClassNames = classNames__default.default("ui-relative", {
+  const borderClassNames = "ui:ml-4 ui:pl-6 ui:border-primary ui:border-l-2";
+  const containerClassNames = classNames__default.default("ui:relative", {
     [borderClassNames]: !isWideStep,
-    "ui-bg-white ui-rounded-lg ui-overflow-hidden": 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 first:ui-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", {
-    "ui-hidden": ["wide", "withoutDot"].includes(type),
-    "ui-bg-primary": "base" === type,
-    "ui-border-4 ui-border-primary ui-bg-white": "emptyDot" === type
+  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", {
+    "ui:hidden": ["wide", "withoutDot"].includes(type),
+    "ui:bg-primary": "base" === type,
+    "ui:border-4 ui:border-primary ui:bg-white": "emptyDot" === type
   }) }) })] })] });
 });
 
 const TimelineHeader = ({ title, buttons, withBorder = true }) => {
   const hasButtons = buttons && buttons.length > 0;
-  const className = classNames__default.default("ui-flex ui-flex-row ui-items-center ui-space-x-4 ui-rounded-t ui-px-4", {
-    "ui-py-4": !hasButtons,
-    "ui-py-2": hasButtons,
-    "ui-justify-between": title && hasButtons,
-    "ui-justify-start": title && !hasButtons,
-    "ui-justify-end": !title && hasButtons,
-    "ui-border-b": withBorder
+  const className = classNames__default.default("ui:flex ui:flex-row ui:items-center ui:space-x-4 ui:rounded-t ui:px-4", {
+    "ui:py-4": !hasButtons,
+    "ui:py-2": hasButtons,
+    "ui:justify-between": title && hasButtons,
+    "ui:justify-start": title && !hasButtons,
+    "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 && 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))) })] });
 };
 
 const Timeline = ({ headerProps, steps, loadMoreButtonProps, dataTestId = "timeline", emptyHeroProps }) => {
   const isEmptyTimeline = !steps || steps.length === 0;
-  return jsxRuntime.jsxs("div", { className: "ui-rounded-xl ui-bg-white", "data-test-id": dataTestId, children: [headerProps && jsxRuntime.jsx(TimelineHeader, Object.assign({}, headerProps)), isEmptyTimeline && emptyHeroProps && jsxRuntime.jsx(CenteredHero, Object.assign({ background: "white" }, emptyHeroProps)), !isEmptyTimeline && jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: classNames__default.default("ui-px-4 ui-pb-4", {
-    "ui-pt-4": !headerProps
-  }), children: steps.map((step) => jsxRuntime.jsx(TimelineStep, Object.assign({}, step))) }), loadMoreButtonProps && jsxRuntime.jsx("div", { className: "ui-border-t ui-py-6 ui-text-center", children: jsxRuntime.jsx(SecondaryButton, Object.assign({}, loadMoreButtonProps)) })] })] });
+  return jsxRuntime.jsxs("div", { className: "ui:rounded-xl ui:bg-white", "data-test-id": dataTestId, children: [headerProps && jsxRuntime.jsx(TimelineHeader, Object.assign({}, headerProps)), isEmptyTimeline && emptyHeroProps && jsxRuntime.jsx(CenteredHero, Object.assign({ background: "white" }, emptyHeroProps)), !isEmptyTimeline && jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: classNames__default.default("ui:px-4 ui:pb-4", {
+    "ui:pt-4": !headerProps
+  }), children: steps.map((step) => jsxRuntime.jsx(TimelineStep, Object.assign({}, step))) }), loadMoreButtonProps && jsxRuntime.jsx("div", { className: "ui:border-t ui:py-6 ui:text-center", children: jsxRuntime.jsx(SecondaryButton, Object.assign({}, loadMoreButtonProps)) })] })] });
 };
 
 const Padding = (props) => {
-  return jsxRuntime.jsx("div", { className: classNames__default.default("ui-p-4", props.className), children: props.children });
+  return jsxRuntime.jsx("div", { className: classNames__default.default("ui:p-4", props.className), children: props.children });
 };
 const Item$1 = (props) => {
   const { _DO_NOT_USE_index } = props, rest = __rest(props, ["_DO_NOT_USE_index"]);
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [_DO_NOT_USE_index === 0 ? null : jsxRuntime.jsx("div", { "data-index": _DO_NOT_USE_index, className: classNames__default.default("ui-absolute ui-left-0 ui-right-0", "ui-border-t ui-border-slate-200") }), jsxRuntime.jsx("li", Object.assign({}, rest, { children: React__namespace.default.Children.map(props.children, (child) => {
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [_DO_NOT_USE_index === 0 ? null : jsxRuntime.jsx("div", { "data-index": _DO_NOT_USE_index, className: classNames__default.default("ui:absolute ui:left-0 ui:right-0", "ui:border-t ui:border-slate-200") }), jsxRuntime.jsx("li", Object.assign({}, rest, { children: React__namespace.default.Children.map(props.children, (child) => {
     if (!React__namespace.default.isValidElement(child)) {
       return child;
     }
     if (child.type === UnorderedList) {
       return jsxRuntime.jsx(UnorderedList, Object.assign({}, child.props, {
-        className: classNames__default.default(child.props.className, "ui-pl-4"),
+        className: classNames__default.default(child.props.className, "ui:pl-4"),
         /**
          * We use this to show the border on the root list
          * and to make it the relative parent for the absolute
@@ -4886,15 +4910,15 @@ const Item$1 = (props) => {
       }));
     }
     if (child.type === Indent) {
-      return jsxRuntime.jsx(Indent, Object.assign({}, child.props, { className: classNames__default.default(child.props.className, "ui-pl-4") }));
+      return jsxRuntime.jsx(Indent, Object.assign({}, child.props, { className: classNames__default.default(child.props.className, "ui:pl-4") }));
     }
     return child;
   }) }))] });
 };
 const UnorderedList = (props) => {
   const { _DO_NOT_USE_isRoot = true } = props, rest = __rest(props, ["_DO_NOT_USE_isRoot"]);
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [_DO_NOT_USE_isRoot ? null : jsxRuntime.jsx("div", { className: classNames__default.default("ui-absolute ui-left-0 ui-right-0", "ui-border-t ui-border-slate-200") }), jsxRuntime.jsx("ul", Object.assign({}, rest, { className: classNames__default.default({
-    "ui-relative": _DO_NOT_USE_isRoot
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [_DO_NOT_USE_isRoot ? null : jsxRuntime.jsx("div", { className: classNames__default.default("ui:absolute ui:left-0 ui:right-0", "ui:border-t ui:border-slate-200") }), jsxRuntime.jsx("ul", Object.assign({}, rest, { className: classNames__default.default({
+    "ui:relative": _DO_NOT_USE_isRoot
   }, props.className), children: React__namespace.default.Children.map(props.children, (child, index) => {
     if (!React__namespace.default.isValidElement(child)) {
       return child !== null && child !== void 0 ? child : null;
@@ -4912,7 +4936,7 @@ const Indent = ({ children, indentSize = "m" }) => {
       return child !== null && child !== void 0 ? child : null;
     }
     const Component = child.type;
-    return jsxRuntime.jsx(Component, Object.assign({}, child.props, { className: classNames__default.default(child.props.className, `ui-pl-${indentSize}`) }));
+    return jsxRuntime.jsx(Component, Object.assign({}, child.props, { className: classNames__default.default(child.props.className, `ui:pl-${indentSize}`) }));
   }) });
 };
 UnorderedList.Item = Item$1;
@@ -4920,15 +4944,15 @@ 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 })] });
+  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 FullPageModalActions = (props) => {
-  return jsxRuntime.jsx("div", { className: "ui-flex ui-flex-row ui-flex-wrap ui-justify-end ui-gap-3", children: props.children });
+  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 })] }) });
+  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 })] }) });
 };
 FullPageModal.Actions = FullPageModalActions;
 FullPageModal.setAppElement = ReactModal__default.default.setAppElement;
@@ -4955,8 +4979,8 @@ const DetailsDisclosure = (_a) => {
   }, rest, { children })) });
 };
 const DefaultOpenIndicator = ({ isOpen }) => {
-  return jsxRuntime.jsx(ChevronRightIcon, { className: classNames__default.default("ui-shrink-0 ui-transition-transform", {
-    "ui-rotate-90": isOpen
+  return jsxRuntime.jsx(ChevronRightIcon, { className: classNames__default.default("ui:shrink-0 ui:transition-transform", {
+    "ui:rotate-90": isOpen
   }) });
 };
 const OpenIndicator = ({ component: Component = DefaultOpenIndicator }) => {
@@ -4980,16 +5004,16 @@ const VerticalMenu = (props) => {
   const isCollapsed = variant === "primary-collapsed";
   const shouldShowCollapseButton = localization && Boolean(onCollapseButtonClick);
   const hasHeaderContent = title || shouldShowCollapseButton;
-  return jsxRuntime.jsx(context$1.Provider, { value: { variant }, children: jsxRuntime.jsxs(Stack, Object.assign({ as: "div", px: "xxs", py: "m", align: "normal", className: classNames__default.default("ui-max-w-full ui-text-slate-800", className) }, rest, { children: [header && jsxRuntime.jsx("div", { children: header }), jsxRuntime.jsxs(Stack, { axis: "x", gap: "xxs", p: hasHeaderContent ? "m" : void 0, align: "start", justify: "between", width: "full", children: [title && jsxRuntime.jsx(Box, { children: jsxRuntime.jsx(Text, { variant: "lg-strong", children: title }) }), shouldShowCollapseButton && jsxRuntime.jsx(
+  return jsxRuntime.jsx(context$1.Provider, { value: { variant }, children: jsxRuntime.jsxs(Stack, Object.assign({ as: "div", px: "xxs", py: "m", align: "normal", className: classNames__default.default("ui:max-w-full ui:text-slate-800", className) }, rest, { children: [header && jsxRuntime.jsx("div", { children: header }), jsxRuntime.jsxs(Stack, { axis: "x", gap: "xxs", p: hasHeaderContent ? "m" : void 0, align: "start", justify: "between", width: "full", children: [title && jsxRuntime.jsx(Box, { children: jsxRuntime.jsx(Text, { variant: "lg-strong", children: title }) }), shouldShowCollapseButton && jsxRuntime.jsx(
     Box,
     {
       /**
        * Push the button to the right when the menu is expanded without a title.
        * Needed in case there is no title.
        */
-      className: classNames__default.default("ui-grid", {
-        "ui-flex-1": isCollapsed,
-        "ui-ml-auto": !isCollapsed
+      className: classNames__default.default("ui:grid", {
+        "ui:flex-1": isCollapsed,
+        "ui:ml-auto": !isCollapsed
       }),
       children: jsxRuntime.jsx(CollapseButtonWrapperComponent, { children: jsxRuntime.jsx(TertiaryIconButton, {
         size: "medium",
@@ -5000,12 +5024,12 @@ const VerticalMenu = (props) => {
          * case we want to override that to be black when the button is
          * not hovered.
          */
-        className: "[&:not(:hover)]:ui-text-black",
+        className: "ui:[&:not(:hover)]:text-black",
         onClick: onCollapseButtonClick,
         children: jsxRuntime.jsx(SidebarIcon, {})
       }) })
     }
-  )] }), isPrimaryVariant && hasHeaderContent && jsxRuntime.jsx(VerticalMenu.Divider, {}), jsxRuntime.jsx("div", { children: props.children }), jsxRuntime.jsx("div", { className: "ui-mt-auto", children: footer })] })) });
+  )] }), isPrimaryVariant && hasHeaderContent && jsxRuntime.jsx(VerticalMenu.Divider, {}), jsxRuntime.jsx("div", { children: props.children }), jsxRuntime.jsx("div", { className: "ui:mt-auto", children: footer })] })) });
 };
 VerticalMenu.Divider = MenuDivider;
 VerticalMenu.Item = MenuItem;
@@ -5016,33 +5040,33 @@ VerticalMenu.NotificationBubble = MenuItemNotificationBubble;
 VerticalMenu.ItemGroup = MenuItemGroup;
 function MenuItemText(props) {
   const { variant: menuVariant } = React.useContext(context$1);
-  return jsxRuntime.jsx(Text, Object.assign({ as: "span", color: "current", variant: menuVariant === "primary" ? "strong" : props.variant }, props, { className: classNames__default.default("sm:ui-leading-[24px]", props.className) }));
+  return jsxRuntime.jsx(Text, Object.assign({ as: "span", color: "current", variant: menuVariant === "primary" ? "strong" : props.variant }, props, { className: classNames__default.default("ui:sm:leading-[24px]", props.className) }));
 }
 const useGetClassName = () => {
   const { variant } = React.useContext(context$1);
   return React.useCallback(
     // eslint-disable-next-line consistent-return
     ({ isActive = false, classNameProp = "" } = {}) => {
-      const base = "ui-block ui-w-full ui-py-xs ui-radius-xxs ui-text-current";
+      const base = "ui:block ui:w-full ui:py-xs ui:radius-xxs ui:text-current";
       switch (variant) {
         case "primary":
         case "primary-collapsed":
           return classNames__default.default(
             base,
-            "ui-px-m",
+            "ui:px-m",
             // Transitions
-            "ui-transition-[color,background,transform]",
+            "ui:transition-[color,background,transform]",
             // States
-            "hover:ui-bg-primary-background hover:ui-text-primary focus:ui-text-primary active:ui-scale-[0.98]",
+            "ui:hover:bg-primary-background ui:hover:text-primary ui:focus:text-primary ui:active:scale-[0.98]",
             {
-              "ui-bg-transparent ui-text-on-surface": !isActive,
-              "ui-bg-gradient-to-r ui-from-blue-800 ui-to-blue-700 ui-text-white hover:ui-text-white focus:ui-text-white": isActive
+              "ui:bg-transparent ui:text-on-surface": !isActive,
+              "ui:bg-linear-to-r ui:from-blue-800 ui:to-blue-700 ui:text-white ui:hover:text-white ui:focus:text-white": isActive
             },
             classNameProp
           );
         case "secondary":
-          return classNames__default.default(base, "hover:ui-text-primary focus:ui-text-primary active:ui-scale-[0.98]", {
-            ["[&_span]:ui-font-bold"]: isActive
+          return classNames__default.default(base, "ui:hover:text-primary ui:focus:text-primary ui:active:scale-[0.98]", {
+            ["ui:[&_span]:font-bold"]: isActive
           });
       }
     },
@@ -5055,8 +5079,8 @@ function MenuItem(props) {
   const getClassName = useGetClassName();
   if (children) {
     return jsxRuntime.jsx("div", { className: classNames__default.default({
-      "ui-px-m": paddingX,
-      "ui-py-xs": paddingY
+      "ui:px-m": paddingX,
+      "ui:py-xs": paddingY
     }, props.className), children });
   }
   return (_a = props.render) === null || _a === void 0 ? void 0 : _a.call(props, { getClassName });
@@ -5069,19 +5093,19 @@ function MenuItemLayout(props) {
     return jsxRuntime.jsx("div", { children });
   }
   const itemIsTextOrNumber = typeof text === "string" || typeof text === "number";
-  return jsxRuntime.jsxs("div", { className: classNames__default.default("ui-relative ui-flex ui-items-start ui-gap-xxs", className), children: [icon && /**
+  return jsxRuntime.jsxs("div", { className: classNames__default.default("ui:relative ui:flex ui:items-start ui:gap-xxs", className), children: [icon && /**
    * If the item is a text or number, we can to add an aria-label to the icon
    * so that it can be read by screen readers. If the item is not a text or
    * number, there's not much we can do and accessibility is up to the consumer.
    */
-  jsxRuntime.jsx("span", { "aria-label": itemIsTextOrNumber ? String(text) : void 0, children: icon }), text && !isCollapsed && jsxRuntime.jsx(MenuItemText, { children: text }), aside && jsxRuntime.jsx("span", { className: "ui-ml-auto", children: aside }), notificationBubbleText && !isCollapsed && jsxRuntime.jsx("span", { className: "ui-ml-auto", children: jsxRuntime.jsx(MenuItemNotificationBubble, { children: notificationBubbleText }) }), notificationBubbleText && isCollapsed && jsxRuntime.jsx("span", { "aria-label": notificationBubbleText, className: "ui-absolute ui-right-[-8px] ui-top-[-4px] ui-h-[8px] ui-w-[8px] ui-rounded-full ui-bg-red-500" })] });
+  jsxRuntime.jsx("span", { "aria-label": itemIsTextOrNumber ? String(text) : void 0, children: icon }), text && !isCollapsed && jsxRuntime.jsx(MenuItemText, { children: text }), aside && jsxRuntime.jsx("span", { className: "ui:ml-auto", children: aside }), notificationBubbleText && !isCollapsed && jsxRuntime.jsx("span", { className: "ui:ml-auto", children: jsxRuntime.jsx(MenuItemNotificationBubble, { children: notificationBubbleText }) }), notificationBubbleText && isCollapsed && jsxRuntime.jsx("span", { "aria-label": notificationBubbleText, className: "ui:absolute ui:right-[-8px] ui:top-[-4px] ui:h-[8px] ui:w-[8px] ui:rounded-full ui:bg-red-500" })] });
 }
 function MenuItemPadding(props) {
   const { variant } = React.useContext(context$1);
   const { children, className, paddingX = variant === "primary", paddingY = true } = props;
   return jsxRuntime.jsx("div", { className: classNames__default.default({
-    "ui-px-m": paddingX,
-    "ui-py-xs": paddingY
+    "ui:px-m": paddingX,
+    "ui:py-xs": paddingY
   }, className), children });
 }
 function MenuItemNotificationBubble(props) {
@@ -5091,17 +5115,17 @@ function MenuItemNotificationBubble(props) {
      * text size here. This makes the bubble a perfect circle when
      * there is too little text.
      */
-    "ui-min-w-l",
-    "ui-rounded-full ui-bg-red-500 ui-px-xxs ui-text-center",
+    "ui:min-w-l",
+    "ui:rounded-full ui:bg-red-500 ui:px-xxs ui:text-center",
     props.className
-  ), children: jsxRuntime.jsx(Text, { color: "white", as: "span", className: "ui-align-text-bottom", children: props.children }) });
+  ), children: jsxRuntime.jsx(Text, { color: "white", as: "span", className: "ui:align-text-bottom", children: props.children }) });
 }
 function MenuDivider(props) {
-  return jsxRuntime.jsx(Box, { my: "xxs", children: jsxRuntime.jsx(Divider, Object.assign({ className: "ui-border-neutral-border-high-contrast last:ui-border-b-1" }, props)) });
+  return jsxRuntime.jsx(Box, { my: "xxs", children: jsxRuntime.jsx(Divider, Object.assign({ className: "ui:border-neutral-border-high-contrast ui:last:border-b-1" }, props)) });
 }
 function MenuItemGroupOpenIndicator({ isOpen }) {
-  return jsxRuntime.jsx(Text, { color: "on-surface", as: "span", children: jsxRuntime.jsx(ChevronDownIcon, { className: classNames__default.default("ui-shrink-0 ui-transition-transform", {
-    "ui-rotate-180": isOpen
+  return jsxRuntime.jsx(Text, { color: "on-surface", as: "span", children: jsxRuntime.jsx(ChevronDownIcon, { className: classNames__default.default("ui:shrink-0 ui:transition-transform", {
+    "ui:rotate-180": isOpen
   }) }) });
 }
 function MenuItemGroup(_a) {
@@ -5119,42 +5143,42 @@ const ActiveFilters = (props) => {
       return categorizedFilterOption;
     });
   }).filter((activeFilter) => activeFilter.isChecked);
-  return jsxRuntime.jsx("div", { className: "ui-bg-gray-100", children: jsxRuntime.jsxs("div", { className: "ui-min-h-15 ui-max-w-7xl ui-py-s sm:ui-flex sm:ui-items-center", children: [jsxRuntime.jsx(Text, { variant: "base", color: "slate-500", children: localization.filtersLabel }), jsxRuntime.jsx("div", { className: "ui-mt-2 sm:ui-ml-4 sm:ui-mt-0", children: jsxRuntime.jsx(Stack, { axis: "x", gap: "m", align: "center", wrap: true, children: activeFilters.map((activeFilter, idx) => jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("span", { className: "ui-mx-1 ui-inline-flex ui-items-center ui-rounded-full ui-border ui-border-neutral-border-high-contrast ui-bg-white ui-py-xxxxs ui-pl-m ui-pr-xxs hover:ui-border-neutral-interactive hover:ui-bg-primary-background", children: [jsxRuntime.jsx(Text, { variant: "base", children: activeFilter.label }), jsxRuntime.jsx("button", { type: "button", "aria-label": removeFilterOptionLabelGetter(activeFilter), className: "ui-mx-1 ui-inline-flex ui-h-6 ui-w-6 ui-flex-shrink-0 ui-rounded-full ui-p-0 ui-text-on-surface", onClick: () => onRemoveActiveFilter({
+  return jsxRuntime.jsx("div", { className: "ui:bg-gray-100", children: jsxRuntime.jsxs("div", { className: "ui:min-h-15 ui:max-w-7xl ui:py-s ui:sm:flex ui:sm:items-center", children: [jsxRuntime.jsx(Text, { variant: "base", color: "slate-500", children: localization.filtersLabel }), jsxRuntime.jsx("div", { className: "ui:mt-2 ui:sm:ml-4 ui:sm:mt-0", children: jsxRuntime.jsx(Stack, { axis: "x", gap: "m", align: "center", wrap: true, children: activeFilters.map((activeFilter, idx) => jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsxs("span", { className: "ui:mx-1 ui:inline-flex ui:items-center ui:rounded-full ui:border ui:border-neutral-border-high-contrast ui:bg-white ui:py-xxxxs ui:pl-m ui:pr-xxs ui:hover:border-neutral-interactive ui:hover:bg-primary-background", children: [jsxRuntime.jsx(Text, { variant: "base", children: activeFilter.label }), jsxRuntime.jsx("button", { type: "button", "aria-label": removeFilterOptionLabelGetter(activeFilter), className: "ui:mx-1 ui:inline-flex ui:h-6 ui:w-6 ui:shrink-0 ui:rounded-full ui:p-0 ui:text-on-surface", onClick: () => onRemoveActiveFilter({
     changedFilterOption: {
       isChecked: false,
       id: activeFilter.id,
       label: activeFilter.label,
       value: activeFilter.value
     }
-  }), children: jsxRuntime.jsx(CrossIcon, {}) })] }), idx < activeFilters.length - 1 && jsxRuntime.jsx("div", { "aria-hidden": "true", className: "ui-h-5 ui-w-px ui-bg-slate-300" })] }, `${activeFilter.id}-${activeFilter.label}`)) }) })] }) });
+  }), children: jsxRuntime.jsx(CrossIcon, {}) })] }), idx < activeFilters.length - 1 && jsxRuntime.jsx("div", { "aria-hidden": "true", className: "ui:h-5 ui:w-px ui:bg-slate-300" })] }, `${activeFilter.id}-${activeFilter.label}`)) }) })] }) });
 };
 
 const FilterMenu = (props) => {
   const { showCheckedAmount = false, alignPopover = "left", categorizedFilter, singleSelection = false } = props;
   const multiSelection = !singleSelection;
   const amountOfCheckedItems = categorizedFilter.options.filter((option) => option.isChecked).length;
-  return jsxRuntime.jsxs(react.Popover, { className: "ui-relative ui-inline-block ui-px-4 ui-text-left", children: [jsxRuntime.jsxs(react.PopoverButton, { className: "ui-group ui-inline-flex ui-justify-center ui-text-sm ui-font-medium ui-text-slate-700 hover:ui-text-slate-900", children: [jsxRuntime.jsx("span", { children: categorizedFilter.label }), amountOfCheckedItems > 0 && showCheckedAmount ? jsxRuntime.jsx("span", { className: "ui-ml-1.5 ui-rounded ui-bg-slate-200 ui-px-1.5 ui-py-0.5 ui-text-xs ui-font-semibold ui-tabular-nums ui-text-slate-700", children: amountOfCheckedItems }) : null, jsxRuntime.jsx(solid.ChevronDownIcon, { className: "-ui-mr-1 ui-ml-1 ui-h-5 ui-w-5 ui-flex-shrink-0 ui-text-slate-400 group-hover:ui-text-slate-500", "aria-hidden": "true" })] }), jsxRuntime.jsx(react.Transition, { enter: "ui-transition ui-ease-out ui-duration-100", enterFrom: "ui-transform ui-opacity-0 ui-scale-95", enterTo: "ui-transform ui-opacity-100 ui-scale-100", leave: "ui-transition ui-ease-in ui-duration-75", leaveFrom: "ui-transform ui-opacity-100 ui-scale-100", leaveTo: "ui-transform ui-opacity-0 ui-scale-95", children: jsxRuntime.jsx(react.PopoverPanel, { className: classNames__default.default("ui-min-w-58", "ui-absolute ui-z-10 ui-mt-2", "ui-rounded-2xl ui-bg-white ui-shadow-2xl ui-ring-1 ui-ring-black ui-ring-opacity-5", "focus:ui-outline-none", "ui-border ui-border-neutral-border-high-contrast", {
+  return jsxRuntime.jsxs(react.Popover, { className: "ui:relative ui:inline-block ui:px-4 ui:text-left", children: [jsxRuntime.jsxs(react.PopoverButton, { className: "ui:group ui:inline-flex ui:justify-center ui:text-sm ui:font-medium ui:text-slate-700 ui:hover:text-slate-900", children: [jsxRuntime.jsx("span", { children: categorizedFilter.label }), amountOfCheckedItems > 0 && showCheckedAmount ? jsxRuntime.jsx("span", { className: "ui:ml-1.5 ui:rounded ui:bg-slate-200 ui:px-1.5 ui:py-0.5 ui:text-xs ui:font-semibold ui:tabular-nums ui:text-slate-700", children: amountOfCheckedItems }) : null, jsxRuntime.jsx(solid.ChevronDownIcon, { className: "ui:-mr-1 ui:ml-1 ui:h-5 ui:w-5 ui:shrink-0 ui:text-slate-400 ui:group-hover:text-slate-500", "aria-hidden": "true" })] }), jsxRuntime.jsx(react.Transition, { enter: "ui:transition ui:ease-out ui:duration-100", enterFrom: "ui:transform ui:opacity-0 ui:scale-95", enterTo: "ui:transform ui:opacity-100 ui:scale-100", leave: "ui:transition ui:ease-in ui:duration-75", leaveFrom: "ui:transform ui:opacity-100 ui:scale-100", leaveTo: "ui:transform ui:opacity-0 ui:scale-95", children: jsxRuntime.jsx(react.PopoverPanel, { className: classNames__default.default("ui:min-w-58", "ui:absolute ui:z-10 ui:mt-2", "ui:rounded-2xl ui:bg-white ui:shadow-2xl ui:ring-1 ui:ring-black ui:ring-opacity-5", "ui:focus:outline-none", "ui:border ui:border-neutral-border-high-contrast", {
     // Align popover to the left side of the button label
-    "ui-left-4 ui-origin-top-left": alignPopover === "left",
+    "ui:left-4 ui:origin-top-left": alignPopover === "left",
     // Align popover to the right side of the chevron icon
-    "ui-right-3 ui-origin-top-right": alignPopover === "right"
-  }), children: ({ close }) => jsxRuntime.jsx("form", { className: "ui-max-h-120 ui-overflow-y-auto", children: categorizedFilter.options.map((option) => jsxRuntime.jsxs("label", { className: classNames__default.default("first-of-type:ui-rounded-t-2xl", "last-of-type:ui-rounded-b-2xl", "ui-flex ui-items-center ui-p-3", "ui-cursor-pointer", "ui-transition-colors ui-duration-300 ui-ease-in-out hover:ui-bg-primary-background"), htmlFor: `filter-${option.id}`, role: multiSelection ? "menuitemcheckbox" : "menuitem", children: [jsxRuntime.jsx("input", { id: `filter-${option.id}`, name: `${option.value}`, defaultValue: option.value, type: "checkbox", defaultChecked: option.isChecked, onChange: () => {
+    "ui:right-3 ui:origin-top-right": alignPopover === "right"
+  }), children: ({ close }) => jsxRuntime.jsx("form", { className: "ui:max-h-120 ui:overflow-y-auto", children: categorizedFilter.options.map((option) => jsxRuntime.jsxs("label", { className: classNames__default.default("ui:first-of-type:rounded-t-2xl", "ui:last-of-type:rounded-b-2xl", "ui:flex ui:items-center ui:p-3", "ui:cursor-pointer", "ui:transition-colors ui:duration-300 ui:ease-in-out ui:hover:bg-primary-background"), htmlFor: `filter-${option.id}`, role: multiSelection ? "menuitemcheckbox" : "menuitem", children: [jsxRuntime.jsx("input", { id: `filter-${option.id}`, name: `${option.value}`, defaultValue: option.value, type: "checkbox", defaultChecked: option.isChecked, onChange: () => {
     props.onFilterOptionChange({
       changedFilterOption: Object.assign(Object.assign({}, option), { isChecked: !option.isChecked })
     });
     if (singleSelection) {
       close();
     }
-  }, className: classNames__default.default("ui-form-checkbox ui-h-4 ui-w-4 ui-rounded ui-border-slate-300 ui-text-primary focus:ui-ring-primary", {
-    "ui-hidden": singleSelection
+  }, className: classNames__default.default("ui:form-checkbox ui:h-4 ui:w-4 ui:rounded ui:border-slate-300 ui:text-primary ui:focus:ring-primary", {
+    "ui:hidden": singleSelection
   }) }), jsxRuntime.jsx("span", { className: classNames__default.default({
-    "ui-pr-l": multiSelection,
-    "ui-ml-s": multiSelection
-  }), children: jsxRuntime.jsx(Text, { className: "ui-whitespace-nowrap ui-capitalize", variant: option.isChecked ? "strong" : "base", children: option.label }) }), jsxRuntime.jsx("span", { className: classNames__default.default("ui-ml-auto ui-pr-s", {
-    "ui-hidden": multiSelection,
-    "ui-text-primary": option.isChecked,
-    "ui-text-transparent": !option.isChecked
-  }), children: jsxRuntime.jsx(solid.CheckIcon, { className: "ui-ml-s ui-h-5 ui-w-5 ui-flex-shrink-0" }) })] }, `${option.id}`)) }) }) })] }, categorizedFilter.key);
+    "ui:pr-l": multiSelection,
+    "ui:ml-s": multiSelection
+  }), children: jsxRuntime.jsx(Text, { className: "ui:whitespace-nowrap ui:capitalize", variant: option.isChecked ? "strong" : "base", children: option.label }) }), jsxRuntime.jsx("span", { className: classNames__default.default("ui:ml-auto ui:pr-s", {
+    "ui:hidden": multiSelection,
+    "ui:text-primary": option.isChecked,
+    "ui:text-transparent": !option.isChecked
+  }), children: jsxRuntime.jsx(solid.CheckIcon, { className: "ui:ml-s ui:h-5 ui:w-5 ui:shrink-0" }) })] }, `${option.id}`)) }) }) })] }, categorizedFilter.key);
 };
 
 const isSortingOption = (option) => {
@@ -5182,7 +5206,7 @@ const SortMenu = (props) => {
 
 const FiltersMenus = (props) => {
   const { filters, singleSelection } = props;
-  return jsxRuntime.jsx("div", { className: "ui-hidden sm:ui-block", children: jsxRuntime.jsx("div", { className: "ui-flow-root", children: jsxRuntime.jsx(react.PopoverGroup, { className: "-ui-mx-4 ui-flex ui-items-center ui-divide-x ui-divide-slate-200", children: filters.map((categorizedFilter) => jsxRuntime.jsx(FilterMenu, { alignPopover: "right", showCheckedAmount: true, categorizedFilter, onFilterOptionChange: props.onFilterOptionChange, singleSelection }, `filter-menu-${categorizedFilter.key}`)) }) }) });
+  return jsxRuntime.jsx("div", { className: "ui:hidden ui:sm:block", children: jsxRuntime.jsx("div", { className: "ui:flow-root", children: jsxRuntime.jsx(react.PopoverGroup, { className: "ui:-mx-4 ui:flex ui:items-center ui:divide-x ui:divide-slate-200", children: filters.map((categorizedFilter) => jsxRuntime.jsx(FilterMenu, { alignPopover: "right", showCheckedAmount: true, categorizedFilter, onFilterOptionChange: props.onFilterOptionChange, singleSelection }, `filter-menu-${categorizedFilter.key}`)) }) }) });
 };
 
 const isPresetFilterOption = (option) => {
@@ -5250,7 +5274,7 @@ const FilterBar = (_a) => {
   };
   const hasFiltersApplied = categorizedFilters.some((categorizedFilter) => categorizedFilter.options.some((option) => option.isChecked));
   const shouldShowActiveFilters = hasFiltersApplied ? true : !hideActiveFiltersWhenEmpty;
-  return jsxRuntime.jsx("div", { children: jsxRuntime.jsxs("section", { "aria-labelledby": "filter-heading", children: [jsxRuntime.jsx(Box, { borderRadius: "l", py: "m", children: jsxRuntime.jsxs(Stack, { axis: "x", align: "normal", justify: "between", className: "-ui-ml-m", children: [jsxRuntime.jsx(Stack, { axis: "x", align: "normal", children: menuOrder.map((menu, index) => {
+  return jsxRuntime.jsx("div", { children: jsxRuntime.jsxs("section", { "aria-labelledby": "filter-heading", children: [jsxRuntime.jsx(Box, { borderRadius: "l", py: "m", children: jsxRuntime.jsxs(Stack, { axis: "x", align: "normal", justify: "between", className: "ui:-ml-m", children: [jsxRuntime.jsx(Stack, { axis: "x", align: "normal", children: menuOrder.map((menu, index) => {
     const hasPresetMenu = presetFilterOptions && menuOrder.includes("presetFilters");
     const hasSortingMenu = sortingOptions && menuOrder.includes("sorting");
     const hasMultipleMenus = hasPresetMenu && hasSortingMenu;
@@ -5260,7 +5284,7 @@ const FilterBar = (_a) => {
     if (hasMultipleMenus && menu === "divider") {
       return jsxRuntime.jsx(
         Box,
-        { className: "ui-h-full ui-w-[1px] ui-border-l-1 ui-border-color-border" },
+        { className: "ui:h-full ui:w-px ui:border-l ui:border-color-border" },
         `divider-${index}`
       );
     }
@@ -5425,18 +5449,18 @@ const WeekdaysPicker = (props) => {
     dir: ___
   } = props, rest = __rest(props, ["locale", "selectedOptions", "onChange", "className", "id", "children", "defaultValue", "dir"]);
   const options = getLocalizedWeekdays({ locale });
-  return jsxRuntime.jsx(ToggleGroup__namespace.Root, Object.assign({}, rest, { id, className: classNames__default.default("ui-flex ui-gap-2", className), type: "multiple", value: selectedOptions, onValueChange: onChange, children: options.map(({ englishName, localizedFullWeekdayName, localizedWeekdayLetter }) => {
+  return jsxRuntime.jsx(ToggleGroup__namespace.Root, Object.assign({}, rest, { id, className: classNames__default.default("ui:flex ui:gap-2", className), type: "multiple", value: selectedOptions, onValueChange: onChange, children: options.map(({ englishName, localizedFullWeekdayName, localizedWeekdayLetter }) => {
     return jsxRuntime.jsx(ToggleGroup__namespace.Item, { value: englishName, "aria-label": localizedFullWeekdayName, className: classNames__default.default(
-      "ui-transition-[color,background_color,border-color,transform] ui-duration-150 ui-ease-out",
-      "ui-flex ui-select-none ui-items-center ui-justify-center ui-p-xxs",
-      "ui-border ui-border-neutral-border-high-contrast ui-radius-xxxxs",
-      "hover:ui-border-on-positive",
+      "ui:transition-[color,background_color,border-color,transform] ui:duration-150 ui:ease-out",
+      "ui:flex ui:select-none ui:items-center ui:justify-center ui:p-xxs",
+      "ui:border ui:border-neutral-border-high-contrast ui:radius-xxxxs",
+      "ui:hover:border-on-positive",
       /**
        * Only keyboard users will see this. Black is properly visible
        * on both selected/unselected states.
        **/
-      "ui-outline-1 ui-outline-black",
-      "data-[state=on]:ui-border-positive-border data-[state=on]:ui-bg-green-50"
+      "ui:focus-visible:outline-2 ui:focus-visible:-outline-offset-2 ui:focus-visible:outline-black",
+      "ui:data-[state=on]:border-positive-border ui:data-[state=on]:bg-green-50"
     ), children: jsxRuntime.jsx(Text, { variant: "base", children: localizedWeekdayLetter }) }, englishName);
   }) }));
 };
@@ -5468,7 +5492,7 @@ const FileUpload = React.forwardRef((props, ref) => {
   if (selectedFile) {
     return jsxRuntime.jsx(UploadedFileSection, { file: selectedFile, onRemove: handleOnUnselectFile });
   }
-  return jsxRuntime.jsxs(FlexRow, { children: [jsxRuntime.jsx(SecondaryButton, { onClick: handleOnUploadClick, children: buttonText }), jsxRuntime.jsx("input", Object.assign({ type: "file", className: "ui-hidden", accept, size: maxFileSize ? maxFileSize * 1024 * 1024 : void 0, name, id, ref: (element) => {
+  return jsxRuntime.jsxs(FlexRow, { children: [jsxRuntime.jsx(SecondaryButton, { onClick: handleOnUploadClick, children: buttonText }), jsxRuntime.jsx("input", Object.assign({ type: "file", className: "ui:hidden", accept, size: maxFileSize ? maxFileSize * 1024 * 1024 : void 0, name, id, ref: (element) => {
     fileUploadRef.current = element;
     if (ref) {
       if (typeof ref === "function") {
@@ -5480,31 +5504,31 @@ const FileUpload = React.forwardRef((props, ref) => {
   }, onChange: handleChangeEvent, disabled: isDisabled }, otherProps))] });
 });
 const UploadedFileSection = ({ file, onRemove }) => {
-  return jsxRuntime.jsx("div", { className: "ui-inline-block ui-flex-row ui-rounded-lg ui-bg-blue-100", children: jsxRuntime.jsxs(Stack, { axis: "x", justify: "center", align: "center", gap: "xxxs", py: "xxs", px: "m", title: file.name, children: [jsxRuntime.jsx(Text, { truncate: true, className: "ui-max-w-55", children: file.name }), jsxRuntime.jsx(TertiaryButton, { icon: "TrashBinIcon", onClick: onRemove })] }) });
+  return jsxRuntime.jsx("div", { className: "ui:inline-block ui:flex-row ui:rounded-lg ui:bg-blue-100", children: jsxRuntime.jsxs(Stack, { axis: "x", justify: "center", align: "center", gap: "xxxs", py: "xxs", px: "m", title: file.name, children: [jsxRuntime.jsx(Text, { truncate: true, className: "ui:max-w-55", children: file.name }), jsxRuntime.jsx(TertiaryButton, { icon: "TrashBinIcon", onClick: onRemove })] }) });
 };
 
 const StatusIndicator = (props) => {
   const { status, children } = props;
-  return jsxRuntime.jsxs("div", { className: "ui-flex ui-flex-row ui-items-center ui-gap-x-s", children: [jsxRuntime.jsx("div", { className: classNames__default.default("ui-h-3 ui-w-3 ui-rounded-full", {
-    "ui-bg-green-500": status === "fine",
-    "ui-bg-amber-500": status === "caution",
-    "ui-bg-red-500": status === "danger"
+  return jsxRuntime.jsxs("div", { className: "ui:flex ui:flex-row ui:items-center ui:gap-x-s", children: [jsxRuntime.jsx("div", { className: classNames__default.default("ui:h-3 ui:w-3 ui:rounded-full", {
+    "ui:bg-green-500": status === "fine",
+    "ui:bg-amber-500": status === "caution",
+    "ui:bg-red-500": status === "danger"
   }) }), children] });
 };
 
 const Skeleton = ({ width, height, variant = "text", children }) => {
-  const base = `ui-bg-slate-300 ui-animate-pulse ui-block ${String.raw(templateObject_1 || (templateObject_1 = __makeTemplateObject([void 0], ["before:ui-content-['\\00a0']"])))}`;
+  const base = `ui:bg-slate-300 ui:animate-pulse ui:block ${String.raw(templateObject_1 || (templateObject_1 = __makeTemplateObject([void 0], ["ui:before:content-['\\00a0']"])))}`;
   const className = classNames__default.default(base, {
-    "ui-rounded": variant === "rounded" || variant === "text",
-    "ui-rounded-full": variant === "circular",
-    "ui-scale-y-75 ui-origin-[0_55%] ui-height-auto": variant === "text"
+    "ui:rounded": variant === "rounded" || variant === "text",
+    "ui:rounded-full": variant === "circular",
+    "ui:scale-y-75 ui:origin-[0_55%] ui:height-auto": variant === "text"
   });
   return jsxRuntime.jsx("span", { className, style: { width, height }, children });
 };
 var templateObject_1;
 
 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: "m", axis: "x", justify: "between", align: "center", children: [jsxRuntime.jsx(Stack, { gap: "xs", width: "full", children: jsxRuntime.jsxs(Stack, { gap: "m", axis: "x", align: "center", width: "full", children: [jsxRuntime.jsx(Skeleton, { variant: "rounded", width: 24, height: 24 }), jsxRuntime.jsxs(Stack, { width: "full", children: [jsxRuntime.jsx(Title, { variant: "xs", 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 })] }) }) });
+  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: "m", axis: "x", justify: "between", align: "center", children: [jsxRuntime.jsx(Stack, { gap: "xs", width: "full", children: jsxRuntime.jsxs(Stack, { gap: "m", axis: "x", align: "center", width: "full", children: [jsxRuntime.jsx(Skeleton, { variant: "rounded", width: 24, height: 24 }), jsxRuntime.jsxs(Stack, { width: "full", children: [jsxRuntime.jsx(Title, { variant: "xs", 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 }) => {
@@ -5512,33 +5536,33 @@ const TimelineCard = ({ title, subtitle, icon, leadingIcon, trailingIcon, status
   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 hover:ui-border-slate-200 focus:ui-border-blue-800 focus:ui-outline-primary": onClick
+  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: "m", axis: "x", justify: "between", align: "center", children: [jsxRuntime.jsxs(Stack, { gap: "xs", children: [statusText && jsxRuntime.jsx(Text, { variant: "sm", color: "slate-500", children: statusText }), jsxRuntime.jsxs(Stack, { gap: "m", axis: "x", align: "center", children: [(icon === null || icon === void 0 ? void 0 : icon.url) && jsxRuntime.jsx("img", { className: "ui-flex-shrink-0", width: 24, height: 24, src: icon.url }), (icon === null || icon === void 0 ? void 0 : icon.iconKey) && jsxRuntime.jsx(Icon, { className: "ui-flex-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-opacity-1 ui-translate-x-[-1.5px]", {
-    ["ui-invisible"]: presentation !== "highlighted"
+    ["ui:border-l-8 ui:border-primary"]: presentation === "highlighted"
+  }), children: jsxRuntime.jsxs(Stack, { width: "full", p: "m", axis: "x", justify: "between", align: "center", children: [jsxRuntime.jsxs(Stack, { gap: "xs", children: [statusText && jsxRuntime.jsx(Text, { variant: "sm", color: "slate-500", children: statusText }), jsxRuntime.jsxs(Stack, { gap: "m", 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 }), (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"
   }), children: jsxRuntime.jsx("path", { d: "M0.5 0.5L16 13L0.5 26", stroke: "rgb(226 232 240)", fill: "#fff" }) })] });
 };
 
-const TimelineDot = ({ className }) => jsxRuntime.jsx("svg", { width: "24", height: "24", fill: "none", className, children: jsxRuntime.jsx("circle", { width: "16", height: "16", cx: "12", cy: "12", r: "8", className: "ui-fill-blue-300" }) });
-const TimelineEmphasizedDot = ({ className }) => jsxRuntime.jsx("svg", { width: "24", height: "24", fill: "none", className, children: jsxRuntime.jsx("circle", { cx: "12", cy: "11.5", r: "9.5", className: "ui-fill-white ui-stroke-blue-800 ui-stroke-[4px]" }) });
+const TimelineDot = ({ className }) => jsxRuntime.jsx("svg", { width: "24", height: "24", fill: "none", className, children: jsxRuntime.jsx("circle", { width: "16", height: "16", cx: "12", cy: "12", r: "8", className: "ui:fill-blue-300" }) });
+const TimelineEmphasizedDot = ({ className }) => jsxRuntime.jsx("svg", { width: "24", height: "24", fill: "none", className, children: jsxRuntime.jsx("circle", { cx: "12", cy: "11.5", r: "9.5", className: "ui:fill-white ui:stroke-blue-800 ui:stroke-[4px]" }) });
 const TimelineCardLayout = (_a) => {
   var { dotStyle, lineStyle = "solid", children } = _a, stackProps = __rest(_a, ["dotStyle", "lineStyle", "children"]);
-  return jsxRuntime.jsxs(Stack, Object.assign({ axis: "x", gap: "s", width: "full", align: "stretch" }, stackProps, { children: [jsxRuntime.jsx("div", { "aria-hidden": "true", className: classNames__default.default("ui-relative ui-w-full ui-max-w-[24px] ui-bg-[left_11px_top]"), children: jsxRuntime.jsxs("div", { className: classNames__default.default("ui-absolute ui-top-[-8px] ui-h-[calc(100%+16px)] ui-w-full ui-max-w-[24px] ui-bg-[left_11px_top]", {
-    "ui-timelineCardLayout-line--dashed": lineStyle === "dashed",
-    "ui-timelineCardLayout-line--solid": lineStyle === "solid"
-  }), children: [dotStyle === "emphasized" && jsxRuntime.jsx(TimelineEmphasizedDot, { className: "ui-absolute ui-bottom-0 ui-top-0 ui-my-auto" }), dotStyle === "regular" && jsxRuntime.jsx(TimelineDot, { className: "ui-absolute ui-bottom-0 ui-top-0 ui-my-auto" })] }) }), jsxRuntime.jsx(Box, { width: "full", children })] }));
+  return jsxRuntime.jsxs(Stack, Object.assign({ axis: "x", gap: "s", width: "full", align: "stretch" }, stackProps, { children: [jsxRuntime.jsx("div", { "aria-hidden": "true", className: classNames__default.default("ui:relative ui:w-full ui:max-w-[24px] ui:bg-position-[left_11px_top]"), children: jsxRuntime.jsxs("div", { className: classNames__default.default("ui:absolute ui:top-[-8px] ui:h-[calc(100%+16px)] ui:w-full ui:max-w-[24px] ui:bg-position-[left_11px_top]", {
+    "ui:timelineCardLayout-line--dashed": lineStyle === "dashed",
+    "ui:timelineCardLayout-line--solid": lineStyle === "solid"
+  }), children: [dotStyle === "emphasized" && jsxRuntime.jsx(TimelineEmphasizedDot, { className: "ui:absolute ui:bottom-0 ui:top-0 ui:my-auto" }), dotStyle === "regular" && jsxRuntime.jsx(TimelineDot, { className: "ui:absolute ui:bottom-0 ui:top-0 ui:my-auto" })] }) }), jsxRuntime.jsx(Box, { width: "full", children })] }));
 };
 
 const StyledBaseList = (_a) => {
   var { children, className, color = "base", variant = "base", listVariant = "unordered", position = "inside" } = _a, rest = __rest(_a, ["children", "className", "color", "variant", "listVariant", "position"]);
-  const classes = classNames__default.default("ui-list-inside", className, allowedColors[color], allowedTextStyles[variant], {
-    "ui-list-outside": position === "outside",
-    "ui-list-inside": position === "inside",
-    "ui-list-disc": listVariant === "unordered" || listVariant === "unordered-nested",
-    "ui-pl-l": listVariant === "unordered-nested",
-    "ui-list-decimal": listVariant === "ordered"
+  const classes = classNames__default.default("ui:list-inside", className, allowedColors[color], allowedTextStyles[variant], {
+    "ui:list-outside": position === "outside",
+    "ui:list-inside": position === "inside",
+    "ui:list-disc": listVariant === "unordered" || listVariant === "unordered-nested",
+    "ui:pl-l": listVariant === "unordered-nested",
+    "ui:list-decimal": listVariant === "ordered"
   });
   const listElement = listVariant === "ordered" ? "ol" : "ul";
   return jsxRuntime.jsx(Box, Object.assign({ as: listElement, className: classes }, rest, { children }));
@@ -5563,23 +5587,23 @@ StyledOrderedList.Item = StyledBaseList.Item;
 const HoverIndicatorControlContext = React.createContext(null);
 const HoverIndicatorControl = (_a) => {
   var { indicator, className, as = "button", disabled = false } = _a, boxProps = __rest(_a, ["indicator", "className", "as", "disabled"]);
-  return jsxRuntime.jsx(HoverIndicatorControlContext.Provider, { value: { indicator, disabled }, children: jsxRuntime.jsx(Box, Object.assign({ as, className: classNames__default.default(className, "ui-group", {
-    "ui-cursor-pointer": !disabled,
-    "ui-cursor-default": disabled
+  return jsxRuntime.jsx(HoverIndicatorControlContext.Provider, { value: { indicator, disabled }, children: jsxRuntime.jsx(Box, Object.assign({ as, className: classNames__default.default(className, "ui:group", {
+    "ui:cursor-pointer": !disabled,
+    "ui:cursor-default": disabled
   }) }, boxProps)) });
 };
 const Indicator = () => {
   const context = React.useContext(HoverIndicatorControlContext);
-  return jsxRuntime.jsx("div", { className: classNames__default.default({ "group-hover:ui-visible": (context === null || context === void 0 ? void 0 : context.disabled) === false }, "ui-invisible"), children: context === null || context === void 0 ? void 0 : context.indicator });
+  return jsxRuntime.jsx("div", { className: classNames__default.default({ "ui:group-hover:visible": (context === null || context === void 0 ? void 0 : context.disabled) === false }, "ui:invisible"), children: context === null || context === void 0 ? void 0 : context.indicator });
 };
 HoverIndicatorControl.Indicator = Indicator;
 
 const Collapse = (props) => {
-  const { children, className, contentClassName: classNameFromProps, isCollapsed, onClick, moreIndicator = jsxRuntime.jsx(Text, { className: "ui-text-center", children: "..." }), showMoreIndicator = true } = props;
+  const { children, className, contentClassName: classNameFromProps, isCollapsed, onClick, moreIndicator = jsxRuntime.jsx(Text, { className: "ui:text-center", children: "..." }), showMoreIndicator = true } = props;
   const contentClassName = classNames__default.default("w-full", classNameFromProps, {
-    "ui-overflow-hidden": isCollapsed
+    "ui:overflow-hidden": isCollapsed
   });
-  const buttonClassName = classNames__default.default("ui-text-left", className);
+  const buttonClassName = classNames__default.default("ui:text-left", className);
   return jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("button", { className: buttonClassName, onClick, "aria-expanded": !isCollapsed, children: [jsxRuntime.jsx("div", { className: contentClassName, children }), isCollapsed && showMoreIndicator && moreIndicator] }) });
 };
 
@@ -5590,22 +5614,23 @@ const useModalDialog = () => React.useContext(context);
 const ModalDialog = (_a) => {
   var { open, className, size, onClose, children, variant = "centered-dialog" } = _a, rest = __rest(_a, ["open", "className", "size", "onClose", "children", "variant"]);
   const dialog = React.useRef(null);
-  const classes = classNames__default.default("ui-bg-transparent", "ui-max-w-[calc(100dvw-theme('spacing.xl'))]", {
-    "ui-my-xl": variant === "centered-dialog"
-  }, "ui-top-0", "ui-bottom-auto", {
-    "md:ui-w-80": size === "s",
-    "md:ui-w-132": size === "m",
-    "md:ui-w-216": size === "l"
+  const classes = classNames__default.default("ui:bg-transparent", "ui:max-w-[calc(100dvw-(var(--ui-spacing-xl)))]", {
+    "ui:my-xl": variant === "centered-dialog",
+    "ui:mx-auto": variant === "centered-dialog"
+  }, "ui:top-0", "ui:bottom-auto", {
+    "ui:md:w-80": size === "s",
+    "ui:md:w-132": size === "m",
+    "ui:md:w-216": size === "l"
   }, {
-    "ui-right-0": variant === "side-modal",
-    "ui-left-auto": variant === "side-modal",
-    "ui-bottom-0": variant === "side-modal",
-    "ui-max-h-full": variant === "side-modal"
+    "ui:right-0": variant === "side-modal",
+    "ui:left-auto": variant === "side-modal",
+    "ui:bottom-0": variant === "side-modal",
+    "ui:max-h-full": variant === "side-modal"
   }, {
-    "ui-w-screen": variant === "full-screen",
-    "ui-h-screen": variant === "full-screen",
-    "ui-fixed ui-top-0 ui-bottom-0 ui-left-0 ui-right-0": variant === "full-screen",
-    "ui-p-0": variant === "full-screen"
+    "ui:w-screen": variant === "full-screen",
+    "ui:h-screen": variant === "full-screen",
+    "ui:fixed ui:top-0 ui:bottom-0 ui:left-0 ui:right-0": variant === "full-screen",
+    "ui:p-0": variant === "full-screen"
   }, className);
   React.useEffect(() => {
     var _a2, _b;
@@ -5616,15 +5641,15 @@ const ModalDialog = (_a) => {
     }
   }, [open, variant]);
   return jsxRuntime.jsx(context.Provider, { value: { $dialog: dialog.current }, children: jsxRuntime.jsx("dialog", Object.assign({ ref: dialog, className: classes, onClose }, rest, { children: jsxRuntime.jsx(Card, { padding: false, borderRadius: variant === "side-modal" ? "none" : "m", borderRadiusLeft: variant === "side-modal" ? "m" : "none", className: classNames__default.default({
-    "ui-h-screen": variant === "side-modal"
+    "ui:h-screen": variant === "side-modal"
   }), children: jsxRuntime.jsx(Stack, { width: "full", align: "stretch", className: classNames__default.default({
-    "ui-max-h-[calc(100dvh-theme('spacing.xl')*2)]": variant === "centered-dialog",
-    "ui-h-screen": variant === "side-modal"
+    "ui:max-h-[calc(100dvh-(var(--ui-spacing-xl))*2)]": variant === "centered-dialog",
+    "ui:h-screen": variant === "side-modal"
   }), children }) }) })) });
 };
 const Body = (_a) => {
   var { className } = _a, rest = __rest(_a, ["className"]);
-  const classes = classNames__default.default(className, "ui-overflow-y-auto ui-flex-1");
+  const classes = classNames__default.default(className, "ui:overflow-y-auto ui:flex-1");
   return jsxRuntime.jsx(Box, Object.assign({ className: classes, p: "m" }, rest));
 };
 const Header = (props) => {
@@ -5638,7 +5663,7 @@ const CloseButton = (props) => {
 };
 const Actions = (_a) => {
   var { className } = _a, rest = __rest(_a, ["className"]);
-  const classes = classNames__default.default(className, "ui-self-end");
+  const classes = classNames__default.default(className, "ui:self-end");
   return jsxRuntime.jsx(Stack, Object.assign({ axis: "x", gap: "xs", className: classes }, rest));
 };
 ModalDialog.Header = Header;
@@ -5651,8 +5676,8 @@ ModalDialog.useModalDialog = useModalDialog;
 
 const AsideLayout = (_a) => {
   var { aside, children } = _a, rest = __rest(_a, ["aside", "children"]);
-  const containerClasses = classNames__default.default("ui-flex-col md:ui-flex-row");
-  const asideContainerClassNames = classNames__default.default("ui-w-full md:ui-w-60 lg:ui-w-72");
+  const containerClasses = classNames__default.default("ui:flex-col ui:md:flex-row");
+  const asideContainerClassNames = classNames__default.default("ui:w-full ui:md:w-60 ui:lg:w-72");
   return jsxRuntime.jsxs(Stack, Object.assign({ className: containerClasses, align: "stretch", width: "full" }, rest, { children: [jsxRuntime.jsx(Box, { className: asideContainerClassNames, children: aside }), jsxRuntime.jsx(Box, { width: "full", children })] }));
 };
 
@@ -5681,29 +5706,28 @@ const isSupportedFileType = (fileUrl) => {
   return isSupportedImage(fileUrl) || isSupportedFile(fileUrl);
 };
 const ButtonTooltipContent = ({ children }) => {
-  return jsxRuntime.jsxs(Tooltip__namespace.Content, { className: classNames__default.default("ui-max-w-55", "data-[state=delayed-open]:ui-animate-in data-[state=closed]:ui-animate-out data-[state=closed]:ui-fade-out-0 data-[state=delayed-open]:ui-fade-in-0 data-[state=closed]:ui-zoom-out-95 data-[state=delayed-open]:ui-zoom-in-95 data-[side=bottom]:ui-slide-in-from-top-2 data-[side=left]:ui-slide-in-from-right-2 data-[side=right]:ui-slide-in-from-left-2 data-[side=top]:ui-slide-in-from-bottom-2"), sideOffset: 4, children: [jsxRuntime.jsx(Box, { backgroundColor: "secondary-background", px: "m", py: "xs", borderRadius: "xxxxs", children: jsxRuntime.jsx(Text, { color: "on-secondary", children }) }), jsxRuntime.jsx(Tooltip__namespace.Arrow, { width: 8, height: 8, className: "ui-fill-secondary-background" })] });
+  return jsxRuntime.jsxs(Tooltip__namespace.Content, { className: classNames__default.default("ui:max-w-55", "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, children: [jsxRuntime.jsx(Box, { backgroundColor: "secondary-background", px: "m", py: "xs", borderRadius: "xxxxs", children: jsxRuntime.jsx(Text, { color: "on-secondary", children }) }), jsxRuntime.jsx(Tooltip__namespace.Arrow, { width: 8, height: 8, className: "ui:fill-secondary-background" })] });
 };
-const backdropClassNames = classNames__default.default("backdrop:ui-backdrop-blur-sm", "backdrop:ui-bg-overlay-dark");
+const backdropClassNames = classNames__default.default("ui:backdrop:backdrop-blur-sm", "ui:backdrop:bg-overlay-dark");
 const previewClassNames = classNames__default.default(
-  "ui-h-screen",
-  "ui-w-screen",
-  "ui-my-0",
-  "ui-py-l",
-  "ui-px-34",
+  "ui:h-screen",
+  "ui:w-screen",
+  "ui:my-0",
+  "ui:py-l",
+  "ui:px-34",
   // Width of the buttons + padding
-  "ui-fixed ui-top-0 ui-bottom-0 ui-left-0 ui-right-0",
-  "ui-bg-transparent"
+  "ui:fixed ui:top-0 ui:bottom-0 ui:left-0 ui:right-0",
+  "ui:bg-transparent"
 );
-const buttonContainerClassNames = classNames__default.default("ui-fixed ui-top-l ui-right-l");
+const buttonContainerClassNames = classNames__default.default("ui:fixed ui:top-l ui:right-l");
 const imageClassNames = classNames__default.default(
-  "ui-max-w-screen",
-  "ui-max-h-[calc(100vh-theme(spacing.12))]"
+  "ui:max-h-[calc(100vh-(--spacing(12)))]"
   // Full height minus the padding
 );
 const fileClassNames = classNames__default.default(
-  "ui-w-[calc(100vw-theme(spacing.68))]",
+  "ui:w-[calc(100vw-(--spacing(68)))]",
   // Full width minus the padding
-  "ui-h-[calc(100vh-theme(spacing.12))]"
+  "ui:h-[calc(100vh-(--spacing(12)))]"
   // Full height minus the padding
 );
 const FilePreview = (props) => {
@@ -5736,16 +5760,16 @@ const AlertWidget = (props) => {
     default:
       throw new TypeError(`The \`variant\` property in AlertWidget can only be one from \`red\`, \`amber\` or \`gray\` - saw [${props.variant}]`);
   }
-  return jsxRuntime.jsxs(Stack, { className: classNames__default.default(["ui-border", "ui-inline-flex ui-py-1"], {
-    "ui-bg-neutral-background": props.variant === "gray",
-    "ui-border-neutral-border-high-contrast": props.variant === "gray",
-    "ui-text-on-surface": props.variant === "gray",
-    "ui-bg-negative-background": props.variant === "red",
-    "ui-border-on-negative": props.variant === "red",
-    "ui-text-on-negative": props.variant === "gray",
-    "ui-bg-warning-background": props.variant === "amber",
-    "ui-border-on-warning": props.variant === "amber",
-    "ui-text-on-warning": props.variant === "amber"
+  return jsxRuntime.jsxs(Stack, { className: classNames__default.default(["ui:border", "ui:inline-flex ui:py-1"], {
+    "ui:bg-neutral-background": props.variant === "gray",
+    "ui:border-neutral-border-high-contrast": props.variant === "gray",
+    "ui:text-on-surface": props.variant === "gray",
+    "ui:bg-negative-background": props.variant === "red",
+    "ui:border-on-negative": props.variant === "red",
+    "ui:text-on-negative": props.variant === "gray",
+    "ui:bg-warning-background": props.variant === "amber",
+    "ui:border-on-warning": props.variant === "amber",
+    "ui:text-on-warning": props.variant === "amber"
   }), borderRadius: "xxs", px: "xxs", py: "xxxxs", axis: "x", gap: "xxs", align: "center", children: [jsxRuntime.jsx(IconComponent, {}), typeof props.content === "string" ? jsxRuntime.jsx(Text, { color: contentTextColor, variant: "strong", children: props.content }) : props.content] });
 };