@luscii-healthtech/web-ui 42.14.0 → 44.0.0

package/dist/index.development.js

@@ -234,8 +234,8 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$h = "/* 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$h);
+var css_248z$f = "/* 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$f);
 
 const responsiveTextSizeVariants = {
   xs: "ui:text-[12px]",
@@ -955,8 +955,8 @@ toast.info = (message) => {
   showToaster({ message, type: "success", showIcon: true, title: "" });
 };
 
-var css_248z$g = "/**\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/** Load Avenir fonts for titles */\n@font-face {\n  font-family: \"AvenirNextLTPro-Regular\";\n  src: url(\"../../../public/fonts/avenir/3A0AF8_1_0.eot\");\n  src: url(\"../../../public/fonts/avenir/3A0AF8_1_0.eot\") format(\"embedded-opentype\"), url(\"../../../public/fonts/avenir/3A0AF8_1_0.woff2\") format(\"woff2\"), url(\"../../../public/fonts/avenir/3A0AF8_1_0.woff\") format(\"woff\"), url(\"../../../public/fonts/avenir/3A0AF8_1_0.ttf\") format(\"truetype\");\n}\n@font-face {\n  font-family: \"AvenirNextLTPro-Bold\";\n  src: url(\"../../../public/fonts/avenir/3A0AF8_0_0.eot\");\n  src: url(\"../../../public/fonts/avenir/3A0AF8_0_0.eot\") format(\"embedded-opentype\"), url(\"../../../public/fonts/avenir/3A0AF8_0_0.woff2\") format(\"woff2\"), url(\"../../../public/fonts/avenir/3A0AF8_0_0.woff\") format(\"woff\"), url(\"../../../public/fonts/avenir/3A0AF8_0_0.ttf\") format(\"truetype\");\n}\n.title-avenir {\n  font-family: \"AvenirNextLTPro-Bold\", \"Roboto\", sans-serif;\n}\n\n.title-inter {\n  font-family: \"Inter\", \"Roboto\", \"Helvetica\", sans-serif;\n}";
-styleInject(css_248z$g);
+var css_248z$e = "/**\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/** Load Avenir fonts for titles */\n@font-face {\n  font-family: \"AvenirNextLTPro-Regular\";\n  src: url(\"../../../public/fonts/avenir/3A0AF8_1_0.eot\");\n  src: url(\"../../../public/fonts/avenir/3A0AF8_1_0.eot\") format(\"embedded-opentype\"), url(\"../../../public/fonts/avenir/3A0AF8_1_0.woff2\") format(\"woff2\"), url(\"../../../public/fonts/avenir/3A0AF8_1_0.woff\") format(\"woff\"), url(\"../../../public/fonts/avenir/3A0AF8_1_0.ttf\") format(\"truetype\");\n}\n@font-face {\n  font-family: \"AvenirNextLTPro-Bold\";\n  src: url(\"../../../public/fonts/avenir/3A0AF8_0_0.eot\");\n  src: url(\"../../../public/fonts/avenir/3A0AF8_0_0.eot\") format(\"embedded-opentype\"), url(\"../../../public/fonts/avenir/3A0AF8_0_0.woff2\") format(\"woff2\"), url(\"../../../public/fonts/avenir/3A0AF8_0_0.woff\") format(\"woff\"), url(\"../../../public/fonts/avenir/3A0AF8_0_0.ttf\") format(\"truetype\");\n}\n.title-avenir {\n  font-family: \"AvenirNextLTPro-Bold\", \"Roboto\", sans-serif;\n}\n\n.title-inter {\n  font-family: \"Inter\", \"Roboto\", \"Helvetica\", sans-serif;\n}";
+styleInject(css_248z$e);
 
 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"]);
@@ -1032,8 +1032,8 @@ const isSubstring = (string, searchTerm, caseSensitive = false) => {
   return (stringToSearch === null || stringToSearch === void 0 ? void 0 : stringToSearch.indexOf(searchTermWithCase)) > -1;
 };
 
-var css_248z$f = ".list-skeleton .skeleton-box {\n  display: inline-block;\n  height: 1em;\n  position: relative;\n  overflow: hidden;\n  background-color: #cbd5e1;\n  border-radius: 3px;\n}\n.list-skeleton .skeleton-box::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateX(-100%);\n  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));\n  animation: shimmer 800ms infinite;\n  content: \"\";\n}\n.list-skeleton .skeleton-box.is-circle {\n  border-radius: 50%;\n}\n.list-skeleton .skeleton-box.is-button::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateX(-100%);\n  background-image: linear-gradient(90deg, rgba(221, 221, 221, 0) 0, rgba(221, 221, 221, 0.2) 20%, rgba(221, 221, 221, 0.5) 60%, rgba(221, 221, 221, 0));\n  animation: shimmer 800ms infinite;\n  content: \"\";\n}\n@keyframes shimmer {\n  100% {\n    transform: translateX(100%);\n  }\n}";
-styleInject(css_248z$f);
+var css_248z$d = ".list-skeleton .skeleton-box {\n  display: inline-block;\n  height: 1em;\n  position: relative;\n  overflow: hidden;\n  background-color: #cbd5e1;\n  border-radius: 3px;\n}\n.list-skeleton .skeleton-box::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateX(-100%);\n  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));\n  animation: shimmer 800ms infinite;\n  content: \"\";\n}\n.list-skeleton .skeleton-box.is-circle {\n  border-radius: 50%;\n}\n.list-skeleton .skeleton-box.is-button::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateX(-100%);\n  background-image: linear-gradient(90deg, rgba(221, 221, 221, 0) 0, rgba(221, 221, 221, 0.2) 20%, rgba(221, 221, 221, 0.5) 60%, rgba(221, 221, 221, 0));\n  animation: shimmer 800ms infinite;\n  content: \"\";\n}\n@keyframes shimmer {\n  100% {\n    transform: translateX(100%);\n  }\n}";
+styleInject(css_248z$d);
 
 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` } })] });
@@ -1259,6 +1259,7 @@ const Stack = (props) => {
     "ui:justify-between": justify === "between",
     "ui:justify-around": justify === "around",
     "ui:justify-evenly": justify === "evenly",
+    "ui:justify-stretch": justify === "stretch",
     "ui:items-center": align === "center",
     "ui:items-start": align === "start",
     "ui:items-end": align === "end",
@@ -1457,8 +1458,8 @@ const DraggableBaseList = (_a) => {
   return jsxRuntime.jsx(BaseList, Object.assign({}, props, { items, itemComponent: DraggableBaseListItem }));
 };
 
-var css_248z$e = ".dropzone-dashed-border {\n  border-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2224%22 height%3D%2224%22 fill%3D%22none%22%3E  %3Cpath fill%3D%22%230074DD%22 fill-rule%3D%22evenodd%22    d%3D%22M8 0v1h8V0H8Zm0 23v1h8v-1H8ZM0 8h1v8H0V8Zm24 0h-1v8h1V8ZM1 0h3v1H1v3H0V0h1ZM0 23v-3h1v3h3v1H0v-1Zm20 0v1h4v-4h-1v3h-3Zm0-22V0h4v4h-1V1h-3Z%22    clip-rule%3D%22evenodd%22 %2F%3E%3C%2Fsvg%3E\") 1 1 1 1;\n  border-image-width: 4px;\n  border-image-slice: 4 4 4 4;\n  border-image-repeat: round;\n}";
-styleInject(css_248z$e);
+var css_248z$c = ".dropzone-dashed-border {\n  border-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2224%22 height%3D%2224%22 fill%3D%22none%22%3E  %3Cpath fill%3D%22%230074DD%22 fill-rule%3D%22evenodd%22    d%3D%22M8 0v1h8V0H8Zm0 23v1h8v-1H8ZM0 8h1v8H0V8Zm24 0h-1v8h1V8ZM1 0h3v1H1v3H0V0h1ZM0 23v-3h1v3h3v1H0v-1Zm20 0v1h4v-4h-1v3h-3Zm0-22V0h4v4h-1V1h-3Z%22    clip-rule%3D%22evenodd%22 %2F%3E%3C%2Fsvg%3E\") 1 1 1 1;\n  border-image-width: 4px;\n  border-image-slice: 4 4 4 4;\n  border-image-repeat: round;\n}";
+styleInject(css_248z$c);
 
 const DefaultState = ({ icon, message, horizontal = false, alignMessage = "center" }) => {
   if (!icon && !message) {
@@ -1525,8 +1526,8 @@ const ListItem = (props) => {
   return jsxRuntime.jsx(BaseListItem, Object.assign({}, props));
 };
 
-var css_248z$d = "/*! 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$d);
+var css_248z$b = "/*! 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$b);
 
 const DefaultList = (_a) => {
   var { items, onDragEnd, onAssetLoadError, subtitle } = _a, props = __rest(_a, ["items", "onDragEnd", "onAssetLoadError", "subtitle"]);
@@ -1876,8 +1877,8 @@ var img$4 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:
 
 var img$3 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8'%3f%3e%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='margin: auto%3b background: none%3b display: block%3b shape-rendering: auto%3b' width='200px' height='200px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3e%3ccircle cx='50' cy='50' fill='none' stroke='%23cbd5e1' stroke-width='16' r='36' stroke-dasharray='169.64600329384882 58.548667764616276'%3e %3canimateTransform attributeName='transform' type='rotate' repeatCount='indefinite' dur='1.1111111111111112s' values='0 50 50%3b360 50 50' keyTimes='0%3b1'%3e%3c/animateTransform%3e%3c/circle%3e%3c!-- %5bldio%5d generated by https://loading.io/ --%3e%3c/svg%3e";
 
-var css_248z$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-loading {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.cweb-loading .cweb-loading-text {\n  margin-bottom: 24px;\n}\n.cweb-loading.as-modal {\n  position: fixed;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  z-index: 9999;\n  background-color: rgba(255, 255, 255, 0.6);\n}\n.cweb-loading.as-modal .cweb-loading-panel {\n  position: relative;\n  width: 320px;\n  min-height: 120px;\n  border-radius: 4px;\n  padding: 16px;\n  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.36);\n  background-color: #ffffff;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: center;\n}\n.cweb-loading.as-modal .cweb-loading-panel:before {\n  position: absolute;\n  content: \"\";\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 1;\n  height: 3px;\n  background-color: #6abfa5;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n}";
-styleInject(css_248z$c);
+var css_248z$a = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.cweb-loading {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.cweb-loading .cweb-loading-text {\n  margin-bottom: 24px;\n}\n.cweb-loading.as-modal {\n  position: fixed;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  z-index: 9999;\n  background-color: rgba(255, 255, 255, 0.6);\n}\n.cweb-loading.as-modal .cweb-loading-panel {\n  position: relative;\n  width: 320px;\n  min-height: 120px;\n  border-radius: 4px;\n  padding: 16px;\n  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.36);\n  background-color: #ffffff;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: center;\n}\n.cweb-loading.as-modal .cweb-loading-panel:before {\n  position: absolute;\n  content: \"\";\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 1;\n  height: 3px;\n  background-color: #6abfa5;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n}";
+styleInject(css_248z$a);
 
 function LoadingIndicator(_a) {
   var { asModal = false, asSpinner = false, className = "", spinnerColor = "blue", dataTestId = "loading-indicator" } = _a, restProps = __rest(_a, ["asModal", "asSpinner", "className", "spinnerColor", "dataTestId"]);
@@ -2340,8 +2341,8 @@ const Carousel = ({ id, className, slides = [], labels }) => {
   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$b = "/*! 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$b);
+var css_248z$9 = "/*! 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$9);
 
 const CheckboxInner = (props) => {
   const { id, explanation, type = "regular", isChecked = false, isIndeterminate = false, isDisabled, name, value, onChange, onClick, className, classNameCheckboxLabel, error, innerRef } = props;
@@ -2570,8 +2571,8 @@ const LOCALE_MAP = {
   "pt-PT": pt.pt
 };
 
-var css_248z$a = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.cweb-datepicker {\n  width: 182px;\n  height: 44px;\n  border: 1px solid #cccccc;\n  border-radius: 4px;\n  background-color: #ffffff;\n  outline: none;\n  padding: 12px 12px 11px 12px;\n}\n.cweb-datepicker input.cweb-datepicker {\n  font-size: 14px;\n}\n.cweb-datepicker::placeholder {\n  color: #64748b;\n}\n.cweb-datepicker:-ms-input-placeholder {\n  color: #64748b !important;\n}\n.cweb-datepicker::-ms-input-placeholder {\n  color: #64748b;\n}\n\n.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle.react-datepicker__triangle {\n  border-bottom-color: #ffffff;\n  margin-top: -4px;\n  fill: #ffffff;\n  color: #ffffff;\n}\n.react-datepicker-popper[data-placement^=top] {\n  margin-bottom: 4px;\n}\n.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle.react-datepicker__triangle {\n  border-top-color: #ffffff;\n  margin-bottom: -4px;\n  fill: #ffffff;\n  color: #ffffff;\n}\n.react-datepicker-popper .react-datepicker__children-container {\n  width: 100%;\n  margin: 0;\n}\n\n.cweb-datepicker-calendar {\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .cweb-datepicker-calendar {\n    box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.2);\n  }\n}\n.cweb-datepicker-calendar {\n  padding: 0;\n  border: 1px solid #cccccc;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: center;\n}\n.cweb-datepicker-calendar .react-datepicker__triangle {\n  left: 10px;\n  border: 6px solid transparent;\n  fill: #ffffff;\n  color: #ffffff;\n}\n.cweb-datepicker-calendar .react-datepicker__navigation {\n  top: 19px;\n  width: 19px;\n  height: 10px;\n}\n.cweb-datepicker-calendar .react-datepicker__navigation .react-datepicker__navigation-icon:before {\n  border: 0;\n}\n.cweb-datepicker-calendar .react-datepicker__navigation.react-datepicker__navigation--previous {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%227%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E    %3Cpath d%3D%22M0 1.5L1.5 0 5 3.5 8.5 0 10 1.5l-5 5z%22 fill%3D%22%231D9BD8%22 fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  border: 0;\n  transform: rotate(90deg);\n}\n.cweb-datepicker-calendar .react-datepicker__navigation.react-datepicker__navigation--next {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%227%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E    %3Cpath d%3D%22M0 1.5L1.5 0 5 3.5 8.5 0 10 1.5l-5 5z%22 fill%3D%22%231D9BD8%22 fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  border: 0;\n  transform: rotate(-90deg);\n}\n.cweb-datepicker-calendar .react-datepicker__year-dropdown-container--select,\n.cweb-datepicker-calendar .react-datepicker__month-dropdown-container--select,\n.cweb-datepicker-calendar .react-datepicker__month-year-dropdown-container--select,\n.cweb-datepicker-calendar .react-datepicker__year-dropdown-container--scroll,\n.cweb-datepicker-calendar .react-datepicker__month-dropdown-container--scroll,\n.cweb-datepicker-calendar .react-datepicker__month-year-dropdown-container--scroll {\n  margin: 2px;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-box {\n  width: auto;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list {\n  overflow-x: hidden;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item {\n  font-family: \"Inter\", \"Roboto\", sans-serif;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 19px;\n  color: #1e293b;\n  margin: 0;\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n  align-items: center;\n  height: 40px !important;\n  padding: 0 !important;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected {\n  color: #ffffff;\n  background-color: #1e40af !important;\n  position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected:hover {\n  background-color: #1e40af !important;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected:before {\n  content: \"\";\n  position: absolute;\n  bottom: -3px;\n  right: 0;\n  left: initial;\n  top: initial;\n  border-style: solid;\n  border-width: 6px 6px 6px 0;\n  border-color: transparent #ffffff transparent transparent;\n  transform: rotate(-135deg);\n}\n.cweb-datepicker-calendar .react-datepicker__header {\n  padding-top: 0;\n  border: none;\n  background-color: #ffffff;\n  font-size: 14px;\n  padding-bottom: 0;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__current-month {\n  font-family: \"Inter\", \"Roboto\", sans-serif;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 19px;\n  color: #2d2d2d;\n  margin: 0;\n  padding-top: 16px;\n  padding-bottom: 16px;\n  text-transform: capitalize;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__header__dropdown {\n  margin-bottom: 15px;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select,\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select {\n  font-family: \"Inter\", \"Roboto\", sans-serif;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 19px;\n  color: #1e293b;\n  margin: 0;\n  height: 44px;\n  padding-left: 12px;\n  border-radius: 4px;\n  background: #ffffff url(\"data:image/svg+xml,%3Csvg width%3D%228%22 height%3D%2214%22 viewBox%3D%220 0 8 14%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M4 0C4.26522 5.96046e-08 4.51957 0.105357 4.70711 0.292893L7.70711 3.29289C8.09763 3.68342 8.09763 4.31658 7.70711 4.70711C7.31658 5.09763 6.68342 5.09763 6.29289 4.70711L4 2.41421L1.70711 4.70711C1.31658 5.09763 0.683417 5.09763 0.292893 4.70711C-0.0976311 4.31658 -0.097631 3.68342 0.292893 3.29289L3.29289 0.292893C3.48043 0.105357 3.73478 0 4 0ZM0.292893 9.29289C0.683417 8.90237 1.31658 8.90237 1.70711 9.29289L4 11.5858L6.29289 9.29289C6.68342 8.90237 7.31658 8.90237 7.70711 9.29289C8.09763 9.68342 8.09763 10.3166 7.70711 10.7071L4.70711 13.7071C4.31658 14.0976 3.68342 14.0976 3.29289 13.7071L0.292893 10.7071C-0.0976311 10.3166 -0.0976311 9.68342 0.292893 9.29289Z%22 fill%3D%22%239CA3AF%22%2F%3E%3C%2Fsvg%3E\") no-repeat right 8px center;\n  text-transform: capitalize;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  border: 1px solid #cccccc;\n  transition: all 0.4s ease;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select:hover, .cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select:focus,\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select:hover,\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select:focus {\n  color: #1e40af;\n  border-color: #1e40af;\n  cursor: pointer;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select {\n  min-width: 172px;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select {\n  min-width: 107px;\n}\n.cweb-datepicker-calendar .react-datepicker__header.react-datepicker__header--time {\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n  align-items: center;\n  height: 52px;\n  padding: 0;\n  background-color: #f3f3f3;\n}\n.cweb-datepicker-calendar .react-datepicker__day-names,\n.cweb-datepicker-calendar .react-datepicker__month {\n  margin: 0.4rem;\n}\n.cweb-datepicker-calendar .react-datepicker__day-names,\n.cweb-datepicker-calendar .react-datepicker__week {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.cweb-datepicker-calendar .react-datepicker__day-name,\n.cweb-datepicker-calendar .react-datepicker__day {\n  font-family: \"Inter\", \"Roboto\", sans-serif;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 19px;\n  color: #1e293b;\n  margin: 0;\n  width: 41px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.cweb-datepicker-calendar .react-datepicker__day-name {\n  height: 19px;\n  text-transform: capitalize;\n}\n.cweb-datepicker-calendar .react-datepicker__day {\n  height: 30px;\n  border-radius: 4px;\n  transition: background-color 0.3s ease-in-out;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted {\n  background-color: #ffffff;\n  color: #1e40af;\n  position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted:after {\n  content: \"\";\n  position: absolute;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background-color: #1e40af;\n  left: 0;\n  right: 0;\n  bottom: 2px;\n  margin: 0 auto;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--selected:after, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--keyboard-selected:after, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--in-range:after {\n  background-color: #ffffff;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--today {\n  font-weight: bold;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--in-selecting-range {\n  background-color: #e8f5fc;\n}\n.cweb-datepicker-calendar .react-datepicker__day:hover {\n  background-color: #f8fafc;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--in-range, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--selected {\n  color: #ffffff;\n  background-color: #1e40af;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--in-range:hover, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--selected:hover {\n  background-color: #1e40af;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--keyboard-selected {\n  color: #ffffff;\n  background-color: #1e40af;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--selected {\n  position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-start {\n  position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-start:before {\n  content: \"\";\n  position: absolute;\n  top: -3px;\n  left: 0;\n  bottom: initial;\n  right: initial;\n  border-style: solid;\n  border-width: 6px 6px 6px 0;\n  border-color: transparent #ffffff transparent transparent;\n  transform: rotate(45deg);\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-end {\n  position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-end:before {\n  content: \"\";\n  position: absolute;\n  bottom: -3px;\n  right: 0;\n  left: initial;\n  top: initial;\n  border-style: solid;\n  border-width: 6px 6px 6px 0;\n  border-color: transparent #ffffff transparent transparent;\n  transform: rotate(-135deg);\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--disabled {\n  color: #cccccc;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--disabled:hover {\n  background-color: #ffffff;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--outside-month {\n  color: #cccccc;\n}";
-styleInject(css_248z$a);
+var css_248z$8 = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.cweb-datepicker {\n  width: 182px;\n  height: 44px;\n  border: 1px solid #cccccc;\n  border-radius: 4px;\n  background-color: #ffffff;\n  outline: none;\n  padding: 12px 12px 11px 12px;\n}\n.cweb-datepicker input.cweb-datepicker {\n  font-size: 14px;\n}\n.cweb-datepicker::placeholder {\n  color: #64748b;\n}\n.cweb-datepicker:-ms-input-placeholder {\n  color: #64748b !important;\n}\n.cweb-datepicker::-ms-input-placeholder {\n  color: #64748b;\n}\n\n.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle.react-datepicker__triangle {\n  border-bottom-color: #ffffff;\n  margin-top: -4px;\n  fill: #ffffff;\n  color: #ffffff;\n}\n.react-datepicker-popper[data-placement^=top] {\n  margin-bottom: 4px;\n}\n.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle.react-datepicker__triangle {\n  border-top-color: #ffffff;\n  margin-bottom: -4px;\n  fill: #ffffff;\n  color: #ffffff;\n}\n.react-datepicker-popper .react-datepicker__children-container {\n  width: 100%;\n  margin: 0;\n}\n\n.cweb-datepicker-calendar {\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .cweb-datepicker-calendar {\n    box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.2);\n  }\n}\n.cweb-datepicker-calendar {\n  padding: 0;\n  border: 1px solid #cccccc;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: center;\n}\n.cweb-datepicker-calendar .react-datepicker__triangle {\n  left: 10px;\n  border: 6px solid transparent;\n  fill: #ffffff;\n  color: #ffffff;\n}\n.cweb-datepicker-calendar .react-datepicker__navigation {\n  top: 19px;\n  width: 19px;\n  height: 10px;\n}\n.cweb-datepicker-calendar .react-datepicker__navigation .react-datepicker__navigation-icon:before {\n  border: 0;\n}\n.cweb-datepicker-calendar .react-datepicker__navigation.react-datepicker__navigation--previous {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%227%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E    %3Cpath d%3D%22M0 1.5L1.5 0 5 3.5 8.5 0 10 1.5l-5 5z%22 fill%3D%22%231D9BD8%22 fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  border: 0;\n  transform: rotate(90deg);\n}\n.cweb-datepicker-calendar .react-datepicker__navigation.react-datepicker__navigation--next {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%227%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E    %3Cpath d%3D%22M0 1.5L1.5 0 5 3.5 8.5 0 10 1.5l-5 5z%22 fill%3D%22%231D9BD8%22 fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  border: 0;\n  transform: rotate(-90deg);\n}\n.cweb-datepicker-calendar .react-datepicker__year-dropdown-container--select,\n.cweb-datepicker-calendar .react-datepicker__month-dropdown-container--select,\n.cweb-datepicker-calendar .react-datepicker__month-year-dropdown-container--select,\n.cweb-datepicker-calendar .react-datepicker__year-dropdown-container--scroll,\n.cweb-datepicker-calendar .react-datepicker__month-dropdown-container--scroll,\n.cweb-datepicker-calendar .react-datepicker__month-year-dropdown-container--scroll {\n  margin: 2px;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-box {\n  width: auto;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list {\n  overflow-x: hidden;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item {\n  font-family: \"Inter\", \"Roboto\", sans-serif;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 19px;\n  color: #1e293b;\n  margin: 0;\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n  align-items: center;\n  height: 40px !important;\n  padding: 0 !important;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected {\n  color: #ffffff;\n  background-color: #1e40af !important;\n  position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected:hover {\n  background-color: #1e40af !important;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected:before {\n  content: \"\";\n  position: absolute;\n  bottom: -3px;\n  right: 0;\n  left: initial;\n  top: initial;\n  border-style: solid;\n  border-width: 6px 6px 6px 0;\n  border-color: transparent #ffffff transparent transparent;\n  transform: rotate(-135deg);\n}\n.cweb-datepicker-calendar .react-datepicker__header {\n  padding-top: 0;\n  border: none;\n  background-color: #ffffff;\n  font-size: 14px;\n  padding-bottom: 0;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__current-month {\n  font-family: \"Inter\", \"Roboto\", sans-serif;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 19px;\n  color: #2d2d2d;\n  margin: 0;\n  padding-top: 16px;\n  padding-bottom: 16px;\n  text-transform: capitalize;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__header__dropdown {\n  margin-bottom: 15px;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select,\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select {\n  font-family: \"Inter\", \"Roboto\", sans-serif;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 19px;\n  color: #1e293b;\n  margin: 0;\n  height: 44px;\n  padding-left: 12px;\n  border-radius: 4px;\n  background: #ffffff url(\"data:image/svg+xml,%3Csvg width%3D%228%22 height%3D%2214%22 viewBox%3D%220 0 8 14%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M4 0C4.26522 5.96046e-08 4.51957 0.105357 4.70711 0.292893L7.70711 3.29289C8.09763 3.68342 8.09763 4.31658 7.70711 4.70711C7.31658 5.09763 6.68342 5.09763 6.29289 4.70711L4 2.41421L1.70711 4.70711C1.31658 5.09763 0.683417 5.09763 0.292893 4.70711C-0.0976311 4.31658 -0.097631 3.68342 0.292893 3.29289L3.29289 0.292893C3.48043 0.105357 3.73478 0 4 0ZM0.292893 9.29289C0.683417 8.90237 1.31658 8.90237 1.70711 9.29289L4 11.5858L6.29289 9.29289C6.68342 8.90237 7.31658 8.90237 7.70711 9.29289C8.09763 9.68342 8.09763 10.3166 7.70711 10.7071L4.70711 13.7071C4.31658 14.0976 3.68342 14.0976 3.29289 13.7071L0.292893 10.7071C-0.0976311 10.3166 -0.0976311 9.68342 0.292893 9.29289Z%22 fill%3D%22%239CA3AF%22%2F%3E%3C%2Fsvg%3E\") no-repeat right 8px center;\n  text-transform: capitalize;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  border: 1px solid #cccccc;\n  transition: all 0.4s ease;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select:hover, .cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select:focus,\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select:hover,\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select:focus {\n  color: #1e40af;\n  border-color: #1e40af;\n  cursor: pointer;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select {\n  min-width: 172px;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select {\n  min-width: 107px;\n}\n.cweb-datepicker-calendar .react-datepicker__header.react-datepicker__header--time {\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n  align-items: center;\n  height: 52px;\n  padding: 0;\n  background-color: #f3f3f3;\n}\n.cweb-datepicker-calendar .react-datepicker__day-names,\n.cweb-datepicker-calendar .react-datepicker__month {\n  margin: 0.4rem;\n}\n.cweb-datepicker-calendar .react-datepicker__day-names,\n.cweb-datepicker-calendar .react-datepicker__week {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.cweb-datepicker-calendar .react-datepicker__day-name,\n.cweb-datepicker-calendar .react-datepicker__day {\n  font-family: \"Inter\", \"Roboto\", sans-serif;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 19px;\n  color: #1e293b;\n  margin: 0;\n  width: 41px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.cweb-datepicker-calendar .react-datepicker__day-name {\n  height: 19px;\n  text-transform: capitalize;\n}\n.cweb-datepicker-calendar .react-datepicker__day {\n  height: 30px;\n  border-radius: 4px;\n  transition: background-color 0.3s ease-in-out;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted {\n  background-color: #ffffff;\n  color: #1e40af;\n  position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted:after {\n  content: \"\";\n  position: absolute;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background-color: #1e40af;\n  left: 0;\n  right: 0;\n  bottom: 2px;\n  margin: 0 auto;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--selected:after, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--keyboard-selected:after, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--in-range:after {\n  background-color: #ffffff;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--today {\n  font-weight: bold;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--in-selecting-range {\n  background-color: #e8f5fc;\n}\n.cweb-datepicker-calendar .react-datepicker__day:hover {\n  background-color: #f8fafc;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--in-range, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--selected {\n  color: #ffffff;\n  background-color: #1e40af;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--in-range:hover, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--selected:hover {\n  background-color: #1e40af;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--keyboard-selected {\n  color: #ffffff;\n  background-color: #1e40af;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--selected {\n  position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-start {\n  position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-start:before {\n  content: \"\";\n  position: absolute;\n  top: -3px;\n  left: 0;\n  bottom: initial;\n  right: initial;\n  border-style: solid;\n  border-width: 6px 6px 6px 0;\n  border-color: transparent #ffffff transparent transparent;\n  transform: rotate(45deg);\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-end {\n  position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-end:before {\n  content: \"\";\n  position: absolute;\n  bottom: -3px;\n  right: 0;\n  left: initial;\n  top: initial;\n  border-style: solid;\n  border-width: 6px 6px 6px 0;\n  border-color: transparent #ffffff transparent transparent;\n  transform: rotate(-135deg);\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--disabled {\n  color: #cccccc;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--disabled:hover {\n  background-color: #ffffff;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--outside-month {\n  color: #cccccc;\n}";
+styleInject(css_248z$8);
 
 function updateLocale(locale) {
   const resolvedLocale = locale !== null && locale !== void 0 ? locale : "en-GB";
@@ -2620,12 +2621,12 @@ var img$2 = "data:image/svg+xml,%3csvg width='8' height='14' viewBox='0 0 8 14'
 
 var img$1 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e %3cg transform='translate(1.5%2c 0.5)'%3e %3cpath fill='none' fill-rule='evenodd' stroke='%230074DD' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12.643 3.357L6.03 9.97l-2.674 2.674L0 9.286'/%3e %3c/g%3e%3c/svg%3e";
 
-var css_248z$9 = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.cweb-dropdown {\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: column;\n  align-items: flex-start;\n  position: relative;\n  outline: none;\n  border-radius: 4px;\n}\n.cweb-dropdown:focus {\n  outline: 4px solid rgba(0, 159, 227, 0.3);\n}\n.cweb-dropdown > .dropdown-header {\n  display: flex;\n  justify-content: space-between;\n  flex-direction: row;\n  align-items: center;\n  align-self: stretch;\n  height: 44px;\n  border-radius: 4px;\n  transition: all 0.4s ease;\n}\n.cweb-dropdown > .dropdown-header > .dropdown-header-icon {\n  opacity: 0.5;\n  transition: opacity 0.3s ease-in-out;\n}\n.cweb-dropdown > .dropdown-header:hover > .dropdown-header-icon {\n  opacity: 1;\n}\n.cweb-dropdown > .dropdown-list {\n  box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.56);\n  display: none;\n  position: absolute;\n  top: 100%;\n  z-index: 1;\n  width: 100%;\n  max-height: 360px;\n  overflow-y: auto;\n  align-self: stretch;\n  margin-top: 8px;\n  padding: 0;\n  background-color: #ffffff;\n  list-style: none;\n  border: 1px solid #d1d5db;\n  border-radius: 4px;\n}\n.cweb-dropdown > .dropdown-list > .dropdown-list-item {\n  cursor: pointer;\n}\n.cweb-dropdown > .dropdown-list > .dropdown-list-item-group > .dropdown-list-item {\n  cursor: pointer;\n}\n.cweb-dropdown.is-open > .dropdown-list {\n  display: block;\n  margin-bottom: 32px;\n}\n.cweb-dropdown.is-open > .dropdown-list.wider {\n  width: 200%;\n}";
-styleInject(css_248z$9);
+var css_248z$7 = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.cweb-dropdown {\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: column;\n  align-items: flex-start;\n  position: relative;\n  outline: none;\n  border-radius: 4px;\n}\n.cweb-dropdown:focus {\n  outline: 4px solid rgba(0, 159, 227, 0.3);\n}\n.cweb-dropdown > .dropdown-header {\n  display: flex;\n  justify-content: space-between;\n  flex-direction: row;\n  align-items: center;\n  align-self: stretch;\n  height: 44px;\n  border-radius: 4px;\n  transition: all 0.4s ease;\n}\n.cweb-dropdown > .dropdown-header > .dropdown-header-icon {\n  opacity: 0.5;\n  transition: opacity 0.3s ease-in-out;\n}\n.cweb-dropdown > .dropdown-header:hover > .dropdown-header-icon {\n  opacity: 1;\n}\n.cweb-dropdown > .dropdown-list {\n  box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.56);\n  display: none;\n  position: absolute;\n  top: 100%;\n  z-index: 1;\n  width: 100%;\n  max-height: 360px;\n  overflow-y: auto;\n  align-self: stretch;\n  margin-top: 8px;\n  padding: 0;\n  background-color: #ffffff;\n  list-style: none;\n  border: 1px solid #d1d5db;\n  border-radius: 4px;\n}\n.cweb-dropdown > .dropdown-list > .dropdown-list-item {\n  cursor: pointer;\n}\n.cweb-dropdown > .dropdown-list > .dropdown-list-item-group > .dropdown-list-item {\n  cursor: pointer;\n}\n.cweb-dropdown.is-open > .dropdown-list {\n  display: block;\n  margin-bottom: 32px;\n}\n.cweb-dropdown.is-open > .dropdown-list.wider {\n  width: 200%;\n}";
+styleInject(css_248z$7);
 
-var __defProp$1 = Object.defineProperty;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$1 = (obj, key, value) => __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 const ITEM_QUERY_FIELD_NAMES = {
   ID: "id",
   HIGHLIGHT_INDEX: "highlightIndex"
@@ -2674,12 +2675,12 @@ const getTotalItemCount = (items) => {
 class Dropdown extends React.PureComponent {
   constructor(props) {
     super(props);
-    __publicField$1(this, "handleClickOutside", (event) => {
+    __publicField(this, "handleClickOutside", (event) => {
       if (this.rootRef && !this.rootRef.contains(event.target)) {
         this.closeDropdown();
       }
     });
-    __publicField$1(this, "handleKeyDown", (event) => {
+    __publicField(this, "handleKeyDown", (event) => {
       const { items, isDropdownOpen, highlightIndex } = this.state;
       if (event.keyCode === keyCodes.ENTER) {
         event.preventDefault();
@@ -2717,7 +2718,7 @@ class Dropdown extends React.PureComponent {
         this.rootRef.blur();
       }
     });
-    __publicField$1(this, "findItem", (items, fieldName, fieldValue) => {
+    __publicField(this, "findItem", (items, fieldName, fieldValue) => {
       let selectedItem;
       for (let i = 0; i < items.length; i++) {
         const item = items[i];
@@ -2738,7 +2739,7 @@ class Dropdown extends React.PureComponent {
       }
       return selectedItem;
     });
-    __publicField$1(this, "openDropdown", () => {
+    __publicField(this, "openDropdown", () => {
       this.setState((prevState) => {
         return {
           isDropdownOpen: true,
@@ -2746,27 +2747,27 @@ class Dropdown extends React.PureComponent {
         };
       });
     });
-    __publicField$1(this, "closeDropdown", () => {
+    __publicField(this, "closeDropdown", () => {
       this.setState({
         isDropdownOpen: false,
         highlightIndex: null
       });
     });
-    __publicField$1(this, "setSelectedItem", (item) => {
+    __publicField(this, "setSelectedItem", (item) => {
       this.setState({
         selectedItem: item
       });
     });
-    __publicField$1(this, "findSelectedItem", (selectedIndex) => {
+    __publicField(this, "findSelectedItem", (selectedIndex) => {
       return this.rootRef.querySelectorAll(".dropdown-list-item")[selectedIndex];
     });
-    __publicField$1(this, "scrollToHighlightedItem", (selectedIndex) => {
+    __publicField(this, "scrollToHighlightedItem", (selectedIndex) => {
       const selectedItem = this.findSelectedItem(selectedIndex);
       if (this.dropdownListRef.scrollTo) {
         this.dropdownListRef.scrollTo(0, selectedItem.offsetTop);
       }
     });
-    __publicField$1(this, "increaseHighlightIndexIfPossible", () => {
+    __publicField(this, "increaseHighlightIndexIfPossible", () => {
       this.setState((prevState) => {
         const newHighlightIndex = prevState.highlightIndex < prevState.totalItemCount - 1 ? prevState.highlightIndex + 1 : prevState.highlightIndex;
         if (newHighlightIndex !== prevState.highlightIndex) {
@@ -2777,7 +2778,7 @@ class Dropdown extends React.PureComponent {
         };
       });
     });
-    __publicField$1(this, "decreaseHighlightIndexIfPossible", () => {
+    __publicField(this, "decreaseHighlightIndexIfPossible", () => {
       this.setState((prevState) => {
         const newHighlightIndex = prevState.highlightIndex > 0 ? prevState.highlightIndex - 1 : prevState.highlightIndex;
         if (newHighlightIndex !== prevState.highlightIndex) {
@@ -2788,13 +2789,13 @@ class Dropdown extends React.PureComponent {
         };
       });
     });
-    __publicField$1(this, "selectItem", (item) => {
+    __publicField(this, "selectItem", (item) => {
       const { onItemSelect } = this.props;
       this.closeDropdown();
       this.setSelectedItem(item);
       onItemSelect(item);
     });
-    __publicField$1(this, "renderIndividualItem", (item) => {
+    __publicField(this, "renderIndividualItem", (item) => {
       const { highlightIndex } = this.state;
       const isItemSelected = item.highlightIndex === highlightIndex;
       const itemClassName = classNames__default.default("dropdown-list-item ui:p-3", {
@@ -2832,7 +2833,7 @@ class Dropdown extends React.PureComponent {
         item.id
       );
     });
-    __publicField$1(this, "renderGroupedItems", (item) => {
+    __publicField(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(
           Text,
@@ -2848,7 +2849,7 @@ class Dropdown extends React.PureComponent {
         item.subItems.map((subItem) => this.renderIndividualItem(subItem))
       ] }, item.groupKey);
     });
-    __publicField$1(this, "renderItems", () => {
+    __publicField(this, "renderItems", () => {
       const { items } = this.state;
       return /* @__PURE__ */ jsxRuntime.jsx(
         "div",
@@ -3454,8 +3455,8 @@ const PaginationMenuSmall = (props) => {
   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 = ".styled-select {\n  appearance: none;\n}\n.styled-select::picker-icon {\n  appearance: none;\n}";
-styleInject(css_248z$8);
+var css_248z$6 = ".styled-select {\n  appearance: none;\n}\n.styled-select::picker-icon {\n  appearance: none;\n}";
+styleInject(css_248z$6);
 
 const StyledSelect = React__namespace.default.forwardRef((_a, ref) => {
   var { children, suffix, prefix, className, width = "full", height = "lg", isError } = _a, attributes = __rest(_a, ["children", "suffix", "prefix", "className", "width", "height", "isError"]);
@@ -4025,8 +4026,8 @@ const NavLayout = (props) => {
   }), children })] })] })] }));
 };
 
-var css_248z$7 = ".cweb-page {\n  width: 100%;\n  max-width: 1140px;\n  margin: 32px auto 0 auto;\n}\n.cweb-page .cweb-page-breadcrumbs {\n  margin-bottom: 16px;\n}\n.cweb-page .page-spinner {\n  margin-left: 8px;\n  margin-bottom: 4px;\n}\n.cweb-page .page-spinner img {\n  width: 21px;\n}\n.cweb-page .cweb-page-header {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  flex-grow: 0;\n}\n.cweb-page .cweb-page-header .cweb-page-title {\n  display: inline;\n}\n.cweb-page .cweb-page-header.accessory-right {\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n}\n@media screen and (max-width: 426px) {\n  .cweb-page .cweb-page-header.accessory-bottom {\n    max-width: 75vw;\n  }\n  .cweb-page .cweb-page-header.accessory-bottom img {\n    max-width: 10vw;\n  }\n  .cweb-page .cweb-page-header.accessory-bottom button p {\n    font-size: 4vw;\n  }\n}\n.cweb-page .cweb-page-header.accessory-bottom {\n  flex-direction: column;\n  align-items: flex-start;\n}\n.cweb-page .cweb-page-header.accessory-bottom .cweb-page-title {\n  margin-bottom: 8px;\n  display: inline;\n}";
-styleInject(css_248z$7);
+var css_248z$5 = ".cweb-page {\n  width: 100%;\n  max-width: 1140px;\n  margin: 32px auto 0 auto;\n}\n.cweb-page .cweb-page-breadcrumbs {\n  margin-bottom: 16px;\n}\n.cweb-page .page-spinner {\n  margin-left: 8px;\n  margin-bottom: 4px;\n}\n.cweb-page .page-spinner img {\n  width: 21px;\n}\n.cweb-page .cweb-page-header {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  flex-grow: 0;\n}\n.cweb-page .cweb-page-header .cweb-page-title {\n  display: inline;\n}\n.cweb-page .cweb-page-header.accessory-right {\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n}\n@media screen and (max-width: 426px) {\n  .cweb-page .cweb-page-header.accessory-bottom {\n    max-width: 75vw;\n  }\n  .cweb-page .cweb-page-header.accessory-bottom img {\n    max-width: 10vw;\n  }\n  .cweb-page .cweb-page-header.accessory-bottom button p {\n    font-size: 4vw;\n  }\n}\n.cweb-page .cweb-page-header.accessory-bottom {\n  flex-direction: column;\n  align-items: flex-start;\n}\n.cweb-page .cweb-page-header.accessory-bottom .cweb-page-title {\n  margin-bottom: 8px;\n  display: inline;\n}";
+styleInject(css_248z$5);
 
 function Page({
   dataTestId = "page",
@@ -4099,19 +4100,32 @@ Page.propTypes = {
   navLayoutProps: PropTypes__default.default.object
 };
 
-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 Step = ({ title, subtitle, state = "completed" }) => {
+  let barColor = "ui:bg-slate-200";
+  let titleColor = "slate-500";
+  switch (state) {
+    case "completed":
+    case "current":
+      barColor = "ui:bg-primary";
+      titleColor = "blue-800";
+      break;
+  }
+  return jsxRuntime.jsxs(Box, { width: "full", children: [jsxRuntime.jsx(Box, { mb: "xxs", width: "full", className: classNames__default.default("ui:h-1 ui:rounded", barColor) }), jsxRuntime.jsx(Text, { variant: "strong", color: titleColor, children: title }), subtitle && jsxRuntime.jsx(Text, { variant: "strong", color: "base", children: subtitle })] });
 };
 
-const Steps = ({ orderedStepTitles, currentStep, className, localization }) => {
-  const renderedSteps = orderedStepTitles.map((stepTitle, index) => jsxRuntime.jsx(
-    Step,
-    { 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 });
+const Steps = (props) => {
+  const { children, className } = props;
+  return jsxRuntime.jsx(Stack, { axis: "x", justify: "stretch", gap: "l", className, children: React__namespace.default.Children.map(children, (child) => {
+    if (!React__namespace.default.isValidElement(child)) {
+      return null;
+    }
+    if (child.type === Step) {
+      return jsxRuntime.jsx(Step, Object.assign({}, child.props));
+    }
+    return child;
+  }) });
 };
+Steps.Step = Step;
 
 const isBreadcrumbDividerProps = (subject) => {
   if (!subject || typeof subject !== "object") {
@@ -4260,7 +4274,16 @@ const CRUDPage = ({ submitButtonProps, cancelButtonProps, className, children, i
      * 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: accessory ? accessoriesToRender : [submitButton, cancelButton], className: classNames__default.default("cweb-crud-page-button-line", "ui:mt-4 ui:border-t ui:border-solid ui:border-color-divider ui:pt-4") })] }) })] }) });
+  ), children: [steps && jsxRuntime.jsx(Steps, { className: "ui:mb-4", children: steps.titles.map((stepTitle, index) => {
+    const stepNumber = index + 1;
+    let state = "upcoming";
+    if (stepNumber < steps.currentStep) {
+      state = "completed";
+    } else if (stepNumber === steps.currentStep) {
+      state = "current";
+    }
+    return jsxRuntime.jsx(Steps.Step, { title: `${steps.localization.step} ${stepNumber}`, subtitle: stepTitle, state }, stepTitle);
+  }) }), children, jsxRuntime.jsx(Line, { left: accessory ? accessoriesToRender : [submitButton, cancelButton], className: classNames__default.default("cweb-crud-page-button-line", "ui:mt-4 ui:border-t ui:border-solid ui:border-color-divider ui:pt-4") })] }) })] }) });
 };
 const PageHeaderBlock = ({ header, title }) => {
   if (!title && !header) {
@@ -4327,144 +4350,6 @@ const PreviewPhone = ({ className, children }) => {
   }, 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}";
-styleInject(css_248z$6);
-
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-class Radio extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    __publicField(this, "handleChange", (event) => {
-      const { onChange } = this.props;
-      if (onChange) {
-        onChange(event);
-      }
-    });
-    __publicField(this, "handleFocus", () => {
-      this.setState({
-        isFocused: true
-      });
-    });
-    __publicField(this, "handleBlur", () => {
-      this.setState({
-        isFocused: false
-      });
-    });
-    this.state = {
-      isFocused: false
-    };
-  }
-  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, {
-      "is-focused": isFocused,
-      "is-checked": isChecked,
-      "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(
-        "input",
-        {
-          className: "cweb-radio-input",
-          name,
-          type: "radio",
-          checked: isChecked,
-          disabled: isDisabled,
-          value,
-          onBlur: this.handleBlur,
-          onFocus: this.handleFocus,
-          onChange: this.handleChange
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          className: classNames__default.default("cweb-radio-icon-container", {
-            "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" })
-        }
-      ),
-      text && /* @__PURE__ */ jsxRuntime.jsx(
-        Text,
-        {
-          className: classNames__default.default("cweb-radio-label-text", {
-            "ui:cursor-not-allowed": isDisabled
-          }),
-          text
-        }
-      )
-    ] }) });
-  }
-}
-__publicField(Radio, "propTypes", {
-  className: PropTypes__default.default.string,
-  text: PropTypes__default.default.string,
-  isChecked: PropTypes__default.default.bool.isRequired,
-  isDisabled: PropTypes__default.default.bool,
-  name: PropTypes__default.default.string.isRequired,
-  value: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number]),
-  onChange: PropTypes__default.default.func
-});
-
-var css_248z$5 = "/**\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-group {\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: row;\n  align-items: center;\n}\n.cweb-radio-group > .cweb-radio {\n  flex: 0 0 auto;\n  margin-right: 8px;\n}\n.cweb-radio-group .cweb-form-field {\n  margin-bottom: 12px;\n}\n.cweb-radio-group .cweb-form-info-text {\n  margin-left: 1.5rem;\n}\n.cweb-radio-group.vertical {\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: column;\n  align-items: flex-start;\n}\n.cweb-radio-group.vertical .cweb-form-field:not(:last-child) {\n  margin-bottom: 8px;\n}\n.cweb-radio-group.vertical > .cweb-radio {\n  flex: 0 0 auto;\n  margin-bottom: 8px;\n}\n.cweb-radio-group.hasError > .cweb-radio .cweb-radio-icon-container {\n  border: 1px solid #ff6266 !important;\n}";
-styleInject(css_248z$5);
-
-function RadioGroup({
-  className,
-  radioClassName,
-  name,
-  selectedOption,
-  isVertical,
-  radioOptions,
-  onChange,
-  error,
-  isDisabled,
-  ...otherOptions
-}) {
-  const containerClassName = classNames__default.default("cweb-radio-group", { vertical: isVertical }, { hasError: error }, className);
-  function handleChange(event) {
-    if (!isDisabled && onChange) {
-      onChange(event);
-    }
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerClassName, ...otherOptions, children: radioOptions.map((option) => /* @__PURE__ */ React.createElement(
-    Radio,
-    {
-      ...option,
-      key: option.value,
-      className: radioClassName,
-      name,
-      isChecked: selectedOption === option.value,
-      onChange: handleChange,
-      isDisabled
-    }
-  )) });
-}
-RadioGroup.propTypes = {
-  className: PropTypes__default.default.string,
-  radioClassName: PropTypes__default.default.string,
-  name: PropTypes__default.default.string,
-  selectedOption: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number]),
-  isVertical: PropTypes__default.default.bool,
-  radioOptions: PropTypes__default.default.arrayOf(
-    PropTypes__default.default.shape({
-      text: PropTypes__default.default.string,
-      info: PropTypes__default.default.string,
-      isDisabled: PropTypes__default.default.bool,
-      value: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number])
-    })
-  ).isRequired,
-  onChange: PropTypes__default.default.func
-};
-
 const SectionHeader = ({ title, aside, isLoading = false }) => {
   return jsxRuntime.jsxs(Stack, { axis: "x", as: "header", justify: "between", align: "center", width: "full", "data-test-id": "section-header", p: "m", children: [jsxRuntime.jsxs(Stack, { axis: "x", justify: "center", align: "center", gap: "xs", children: [typeof title === "string" ? jsxRuntime.jsx(Title, { variant: "sm", children: title }) : title, isLoading && jsxRuntime.jsx(LoadingIndicator, { asSpinner: true })] }), aside] });
 };
@@ -6695,8 +6580,6 @@ exports.PrimaryButton = PrimaryButton;
 exports.PrimaryIconButton = PrimaryIconButton;
 exports.PrintIcon = PrinterIcon;
 exports.PrinterIcon = PrinterIcon;
-exports.Radio = Radio;
-exports.RadioGroup = RadioGroup;
 exports.RadioGroupV2 = RadioGroupV2;
 exports.RadioV2 = RadioV2;
 exports.RangeCoverage = RangeCoverage;