@luscii-healthtech/web-ui 55.0.0 → 55.1.0

package/dist/index.development.js

@@ -227,8 +227,8 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$c = "/* 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$c);
+var css_248z$b = "/* https://stackoverflow.com/a/13924997 */\n.ui\\:text-two-lines-max {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  /* number of lines to show */\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  -webkit-box-orient: vertical;\n}\n";
+styleInject(css_248z$b);
 
 const newVariants = /* @__PURE__ */ new Set([
   "body-base-light",
@@ -1020,8 +1020,8 @@ toast.info = (message) => {
   showToaster({ message, type: "success", showIcon: true, title: "" });
 };
 
-var css_248z$b = "/**\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$b);
+var css_248z$a = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n/**\n * Avenir is NOT declared here. The library does not ship font files, so any\n * `@font-face` written against a path in this repo resolves against the\n * consuming app's document and 404s there. Providing the typeface is the\n * consumer's responsibility; this rule only names it.\n */\n.title-avenir {\n  font-family: \"AvenirNextLTPro-Bold\", \"Roboto\", sans-serif;\n}\n\n.title-inter {\n  font-family: \"Inter\", \"Roboto\", \"Helvetica\", sans-serif;\n}";
+styleInject(css_248z$a);
 
 const Title = (props) => {
   const { variant: variantFromProps = "base", type, className, text, children, color, level, ref } = props, rest = __rest(props, ["variant", "type", "className", "text", "children", "color", "level", "ref"]);
@@ -1097,8 +1097,8 @@ const isSubstring = (string, searchTerm, caseSensitive = false) => {
   return (stringToSearch === null || stringToSearch === void 0 ? void 0 : stringToSearch.indexOf(searchTermWithCase)) > -1;
 };
 
-var css_248z$a = ".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$a);
+var css_248z$9 = ".list-skeleton .skeleton-box {\n  display: inline-block;\n  height: 1em;\n  position: relative;\n  overflow: hidden;\n  background-color: #cbd5e1;\n  border-radius: 3px;\n}\n.list-skeleton .skeleton-box::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateX(-100%);\n  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));\n  animation: shimmer 800ms infinite;\n  content: \"\";\n}\n.list-skeleton .skeleton-box.is-circle {\n  border-radius: 50%;\n}\n.list-skeleton .skeleton-box.is-button::after {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  transform: translateX(-100%);\n  background-image: linear-gradient(90deg, rgba(221, 221, 221, 0) 0, rgba(221, 221, 221, 0.2) 20%, rgba(221, 221, 221, 0.5) 60%, rgba(221, 221, 221, 0));\n  animation: shimmer 800ms infinite;\n  content: \"\";\n}\n@keyframes shimmer {\n  100% {\n    transform: translateX(100%);\n  }\n}";
+styleInject(css_248z$9);
 
 const ListItemSkeleton = () => {
   return jsxRuntime.jsxs("div", { className: "ui:flex ui:flex-row ui:items-center ui:p-4", children: [jsxRuntime.jsx("div", { className: "skeleton-box is-circle ui:mr-2", style: { width: `${32}px`, height: `${32}px` } }), jsxRuntime.jsxs("div", { className: "ui:flex ui:flex-col", children: [jsxRuntime.jsx("div", { className: "skeleton-box ui:mb-1", style: { width: `${160}px`, height: `${14}px` } }), jsxRuntime.jsx("div", { className: "skeleton-box", style: { width: `${110}px`, height: `${14}px` } })] }), jsxRuntime.jsx("div", { className: "skeleton-box is-button ui:ml-auto ui:rounded-full", style: { width: `${24}px`, height: `${24}px` } })] });
@@ -1970,8 +1970,8 @@ var img$2 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:
 
 var img$1 = "data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8'%3f%3e%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='margin: auto%3b background: none%3b display: block%3b shape-rendering: auto%3b' width='200px' height='200px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3e%3ccircle cx='50' cy='50' fill='none' stroke='%23cbd5e1' stroke-width='16' r='36' stroke-dasharray='169.64600329384882 58.548667764616276'%3e %3canimateTransform attributeName='transform' type='rotate' repeatCount='indefinite' dur='1.1111111111111112s' values='0 50 50%3b360 50 50' keyTimes='0%3b1'%3e%3c/animateTransform%3e%3c/circle%3e%3c!-- %5bldio%5d generated by https://loading.io/ --%3e%3c/svg%3e";
 
-var css_248z$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-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$9);
+var css_248z$8 = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.cweb-loading {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.cweb-loading .cweb-loading-text {\n  margin-bottom: 24px;\n}\n.cweb-loading.as-modal {\n  position: fixed;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  z-index: 9999;\n  background-color: rgba(255, 255, 255, 0.6);\n}\n.cweb-loading.as-modal .cweb-loading-panel {\n  position: relative;\n  width: 320px;\n  min-height: 120px;\n  border-radius: 4px;\n  padding: 16px;\n  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.36);\n  background-color: #ffffff;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: center;\n}\n.cweb-loading.as-modal .cweb-loading-panel:before {\n  position: absolute;\n  content: \"\";\n  top: 0;\n  left: 0;\n  right: 0;\n  z-index: 1;\n  height: 3px;\n  background-color: #6abfa5;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n}";
+styleInject(css_248z$8);
 
 function LoadingIndicator(_a) {
   var { asModal = false, asSpinner = false, className = "", spinnerColor = "blue", dataTestId = "loading-indicator" } = _a, restProps = __rest(_a, ["asModal", "asSpinner", "className", "spinnerColor", "dataTestId"]);
@@ -2426,8 +2426,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$8 = "/*! 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$8);
+var css_248z$7 = "/*! 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$7);
 
 const CheckboxInner = (props) => {
   const { id, explanation, type = "regular", isChecked = false, isIndeterminate = false, isDisabled, name, value, onChange, onClick, className, classNameCheckboxLabel, error, innerRef } = props;
@@ -2824,8 +2824,8 @@ const LOCALE_MAP = {
   "pt-PT": pt.pt
 };
 
-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-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$7);
+var css_248z$6 = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.cweb-datepicker {\n  width: 182px;\n  height: 44px;\n  border: 1px solid #cccccc;\n  border-radius: 4px;\n  background-color: #ffffff;\n  outline: none;\n  padding: 12px 12px 11px 12px;\n}\n.cweb-datepicker input.cweb-datepicker {\n  font-size: 14px;\n}\n.cweb-datepicker::placeholder {\n  color: #64748b;\n}\n.cweb-datepicker:-ms-input-placeholder {\n  color: #64748b !important;\n}\n.cweb-datepicker::-ms-input-placeholder {\n  color: #64748b;\n}\n\n.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle.react-datepicker__triangle {\n  border-bottom-color: #ffffff;\n  margin-top: -4px;\n  fill: #ffffff;\n  color: #ffffff;\n}\n.react-datepicker-popper[data-placement^=top] {\n  margin-bottom: 4px;\n}\n.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle.react-datepicker__triangle {\n  border-top-color: #ffffff;\n  margin-bottom: -4px;\n  fill: #ffffff;\n  color: #ffffff;\n}\n.react-datepicker-popper .react-datepicker__children-container {\n  width: 100%;\n  margin: 0;\n}\n\n.cweb-datepicker-calendar {\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .cweb-datepicker-calendar {\n    box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.2);\n  }\n}\n.cweb-datepicker-calendar {\n  padding: 0;\n  border: 1px solid #cccccc;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n  align-items: center;\n}\n.cweb-datepicker-calendar .react-datepicker__triangle {\n  left: 10px;\n  border: 6px solid transparent;\n  fill: #ffffff;\n  color: #ffffff;\n}\n.cweb-datepicker-calendar .react-datepicker__navigation {\n  top: 19px;\n  width: 19px;\n  height: 10px;\n}\n.cweb-datepicker-calendar .react-datepicker__navigation .react-datepicker__navigation-icon:before {\n  border: 0;\n}\n.cweb-datepicker-calendar .react-datepicker__navigation.react-datepicker__navigation--previous {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%227%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E    %3Cpath d%3D%22M0 1.5L1.5 0 5 3.5 8.5 0 10 1.5l-5 5z%22 fill%3D%22%231D9BD8%22 fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  border: 0;\n  transform: rotate(90deg);\n}\n.cweb-datepicker-calendar .react-datepicker__navigation.react-datepicker__navigation--next {\n  background: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%227%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E    %3Cpath d%3D%22M0 1.5L1.5 0 5 3.5 8.5 0 10 1.5l-5 5z%22 fill%3D%22%231D9BD8%22 fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n  border: 0;\n  transform: rotate(-90deg);\n}\n.cweb-datepicker-calendar .react-datepicker__year-dropdown-container--select,\n.cweb-datepicker-calendar .react-datepicker__month-dropdown-container--select,\n.cweb-datepicker-calendar .react-datepicker__month-year-dropdown-container--select,\n.cweb-datepicker-calendar .react-datepicker__year-dropdown-container--scroll,\n.cweb-datepicker-calendar .react-datepicker__month-dropdown-container--scroll,\n.cweb-datepicker-calendar .react-datepicker__month-year-dropdown-container--scroll {\n  margin: 2px;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-box {\n  width: auto;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list {\n  overflow-x: hidden;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item {\n  font-family: \"Inter\", \"Roboto\", sans-serif;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 19px;\n  color: #1e293b;\n  margin: 0;\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n  align-items: center;\n  height: 40px !important;\n  padding: 0 !important;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected {\n  color: #ffffff;\n  background-color: #1e40af !important;\n  position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected:hover {\n  background-color: #1e40af !important;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected:before {\n  content: \"\";\n  position: absolute;\n  bottom: -3px;\n  right: 0;\n  left: initial;\n  top: initial;\n  border-style: solid;\n  border-width: 6px 6px 6px 0;\n  border-color: transparent #ffffff transparent transparent;\n  transform: rotate(-135deg);\n}\n.cweb-datepicker-calendar .react-datepicker__header {\n  padding-top: 0;\n  border: none;\n  background-color: #ffffff;\n  font-size: 14px;\n  padding-bottom: 0;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__current-month {\n  font-family: \"Inter\", \"Roboto\", sans-serif;\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 19px;\n  color: #2d2d2d;\n  margin: 0;\n  padding-top: 16px;\n  padding-bottom: 16px;\n  text-transform: capitalize;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__header__dropdown {\n  margin-bottom: 15px;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select,\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select {\n  font-family: \"Inter\", \"Roboto\", sans-serif;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 19px;\n  color: #1e293b;\n  margin: 0;\n  height: 44px;\n  padding-left: 12px;\n  border-radius: 4px;\n  background: #ffffff url(\"data:image/svg+xml,%3Csvg width%3D%228%22 height%3D%2214%22 viewBox%3D%220 0 8 14%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M4 0C4.26522 5.96046e-08 4.51957 0.105357 4.70711 0.292893L7.70711 3.29289C8.09763 3.68342 8.09763 4.31658 7.70711 4.70711C7.31658 5.09763 6.68342 5.09763 6.29289 4.70711L4 2.41421L1.70711 4.70711C1.31658 5.09763 0.683417 5.09763 0.292893 4.70711C-0.0976311 4.31658 -0.097631 3.68342 0.292893 3.29289L3.29289 0.292893C3.48043 0.105357 3.73478 0 4 0ZM0.292893 9.29289C0.683417 8.90237 1.31658 8.90237 1.70711 9.29289L4 11.5858L6.29289 9.29289C6.68342 8.90237 7.31658 8.90237 7.70711 9.29289C8.09763 9.68342 8.09763 10.3166 7.70711 10.7071L4.70711 13.7071C4.31658 14.0976 3.68342 14.0976 3.29289 13.7071L0.292893 10.7071C-0.0976311 10.3166 -0.0976311 9.68342 0.292893 9.29289Z%22 fill%3D%22%239CA3AF%22%2F%3E%3C%2Fsvg%3E\") no-repeat right 8px center;\n  text-transform: capitalize;\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  border: 1px solid #cccccc;\n  transition: all 0.4s ease;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select:hover, .cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select:focus,\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select:hover,\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select:focus {\n  color: #1e40af;\n  border-color: #1e40af;\n  cursor: pointer;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select {\n  min-width: 172px;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select {\n  min-width: 107px;\n}\n.cweb-datepicker-calendar .react-datepicker__header.react-datepicker__header--time {\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n  align-items: center;\n  height: 52px;\n  padding: 0;\n  background-color: #f3f3f3;\n}\n.cweb-datepicker-calendar .react-datepicker__day-names,\n.cweb-datepicker-calendar .react-datepicker__month {\n  margin: 0.4rem;\n}\n.cweb-datepicker-calendar .react-datepicker__day-names,\n.cweb-datepicker-calendar .react-datepicker__week {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.cweb-datepicker-calendar .react-datepicker__day-name,\n.cweb-datepicker-calendar .react-datepicker__day {\n  font-family: \"Inter\", \"Roboto\", sans-serif;\n  font-size: 14px;\n  font-weight: normal;\n  line-height: 19px;\n  color: #1e293b;\n  margin: 0;\n  width: 41px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.cweb-datepicker-calendar .react-datepicker__day-name {\n  height: 19px;\n  text-transform: capitalize;\n}\n.cweb-datepicker-calendar .react-datepicker__day {\n  height: 30px;\n  border-radius: 4px;\n  transition: background-color 0.3s ease-in-out;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted {\n  background-color: #ffffff;\n  color: #1e40af;\n  position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted:after {\n  content: \"\";\n  position: absolute;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background-color: #1e40af;\n  left: 0;\n  right: 0;\n  bottom: 2px;\n  margin: 0 auto;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--selected:after, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--keyboard-selected:after, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--in-range:after {\n  background-color: #ffffff;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--today {\n  font-weight: bold;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--in-selecting-range {\n  background-color: #e8f5fc;\n}\n.cweb-datepicker-calendar .react-datepicker__day:hover {\n  background-color: #f8fafc;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--in-range, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--selected {\n  color: #ffffff;\n  background-color: #1e40af;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--in-range:hover, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--selected:hover {\n  background-color: #1e40af;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--keyboard-selected {\n  color: #ffffff;\n  background-color: #1e40af;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--selected {\n  position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-start {\n  position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-start:before {\n  content: \"\";\n  position: absolute;\n  top: -3px;\n  left: 0;\n  bottom: initial;\n  right: initial;\n  border-style: solid;\n  border-width: 6px 6px 6px 0;\n  border-color: transparent #ffffff transparent transparent;\n  transform: rotate(45deg);\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-end {\n  position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-end:before {\n  content: \"\";\n  position: absolute;\n  bottom: -3px;\n  right: 0;\n  left: initial;\n  top: initial;\n  border-style: solid;\n  border-width: 6px 6px 6px 0;\n  border-color: transparent #ffffff transparent transparent;\n  transform: rotate(-135deg);\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--disabled {\n  color: #cccccc;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--disabled:hover {\n  background-color: #ffffff;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--outside-month {\n  color: #cccccc;\n}";
+styleInject(css_248z$6);
 
 function updateLocale(locale) {
   const resolvedLocale = locale !== null && locale !== void 0 ? locale : "en-GB";
@@ -3515,8 +3515,8 @@ const PaginationMenuSmall = (props) => {
   return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(TertiaryButton, { "data-test-id": "prev-button", leadingIcon: jsxRuntime.jsx(LeftArrowIcon, {}), "data-page": props.currentPageNumber - 1, onClick: handleOnChange, disabled: props.currentPageNumber === 1 }), jsxRuntime.jsx(Text, { className: "ui:ml-4", variant: "sm", color: "slate-500", children: `${props.currentPageNumber} / ${props.pageCount}` }), jsxRuntime.jsx(TertiaryButton, { className: "ui:ml-4", "data-test-id": "next-button", leadingIcon: jsxRuntime.jsx(ChevronRightIcon, {}), disabled: props.currentPageNumber === props.pageCount, "data-page": props.currentPageNumber + 1, onClick: handleOnChange })] });
 };
 
-var css_248z$6 = ".styled-select {\n  appearance: none;\n}\n.styled-select::picker-icon {\n  appearance: none;\n}";
-styleInject(css_248z$6);
+var css_248z$5 = ".styled-select {\n  appearance: none;\n}\n.styled-select::picker-icon {\n  appearance: none;\n}";
+styleInject(css_248z$5);
 
 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"]);
@@ -4104,8 +4104,8 @@ const NavLayout = (props) => {
   }), children })] })] })] }));
 };
 
-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);
+var css_248z$4 = ".cweb-page {\n  width: 100%;\n  max-width: 1140px;\n  margin: 32px auto 0 auto;\n}\n.cweb-page .cweb-page-breadcrumbs {\n  margin-bottom: 16px;\n}\n.cweb-page .page-spinner {\n  margin-left: 8px;\n  margin-bottom: 4px;\n}\n.cweb-page .page-spinner img {\n  width: 21px;\n}\n.cweb-page .cweb-page-header {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  flex-grow: 0;\n}\n.cweb-page .cweb-page-header .cweb-page-title {\n  display: inline;\n}\n.cweb-page .cweb-page-header.accessory-right {\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n}\n@media screen and (max-width: 426px) {\n  .cweb-page .cweb-page-header.accessory-bottom {\n    max-width: 75vw;\n  }\n  .cweb-page .cweb-page-header.accessory-bottom img {\n    max-width: 10vw;\n  }\n  .cweb-page .cweb-page-header.accessory-bottom button p {\n    font-size: 4vw;\n  }\n}\n.cweb-page .cweb-page-header.accessory-bottom {\n  flex-direction: column;\n  align-items: flex-start;\n}\n.cweb-page .cweb-page-header.accessory-bottom .cweb-page-title {\n  margin-bottom: 8px;\n  display: inline;\n}";
+styleInject(css_248z$4);
 
 function Page({
   dataTestId = "page",
@@ -4442,8 +4442,8 @@ const Section = (_a) => {
   }), children: isLoading ? null : children }), footer && jsxRuntime.jsx(SectionFooter, { children: footer })] }));
 };
 
-var css_248z$4 = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.cweb-list-item {\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: row;\n  align-items: center;\n  padding: 16px 0 16px 0;\n  border-bottom: 1px solid #eeeeee;\n}\n.cweb-list-item:last-child {\n  border-bottom: none;\n}\n.cweb-list-item.cweb-list-item-clickable {\n  cursor: pointer;\n}\n.cweb-list-item.cweb-list-item-clickable:hover {\n  background-color: #f2fafd;\n}";
-styleInject(css_248z$4);
+var css_248z$3 = "/**\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-list-item {\n  display: flex;\n  justify-content: flex-start;\n  flex-direction: row;\n  align-items: center;\n  padding: 16px 0 16px 0;\n  border-bottom: 1px solid #eeeeee;\n}\n.cweb-list-item:last-child {\n  border-bottom: none;\n}\n.cweb-list-item.cweb-list-item-clickable {\n  cursor: pointer;\n}\n.cweb-list-item.cweb-list-item-clickable:hover {\n  background-color: #f2fafd;\n}";
+styleInject(css_248z$3);
 
 const SectionItem = (props) => {
   const { children, className, onClick } = props, rest = __rest(props, ["children", "className", "onClick"]);
@@ -4460,19 +4460,53 @@ function SectionItemWithContent(props) {
   return jsxRuntime.jsxs(SectionItem, Object.assign({ className: mergedClasses, onClick }, rest, { children: [icon && jsxRuntime.jsx("img", { className: iconClasses, src: icon, alt: "" }), jsxRuntime.jsx(Text, { text })] }));
 }
 
-var css_248z$3 = ".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}";
-styleInject(css_248z$3);
+var css_248z$2 = ".customized-select [class*=MenuList] [class*=option]::after {\n  position: absolute;\n  content: \"\";\n  background: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22%3E    %3Cg transform%3D%22translate(1.5%2C 0.5)%22%3E        %3Cpath fill%3D%22none%22 fill-rule%3D%22evenodd%22 stroke%3D%22%230074DD%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22 stroke-width%3D%222%22 d%3D%22M12.643 3.357L6.03 9.97l-2.674 2.674L0 9.286%22%2F%3E    %3C%2Fg%3E%3C%2Fsvg%3E\") no-repeat center;\n  right: 12px;\n  height: 1rem;\n  width: 1rem;\n}";
+styleInject(css_248z$2);
 
-const SelectDropdownIndicator = (props) => jsxRuntime.jsx(ReactSelect.components.DropdownIndicator, Object.assign({}, props, { children: jsxRuntime.jsx(ChevronDownIcon, {}) }));
+const SelectDropdownIndicator = (props) => jsxRuntime.jsx(ReactSelect.components.DropdownIndicator, Object.assign({}, props, { children: props.isMulti ? jsxRuntime.jsx(ChevronDoubleIcon, {}) : jsxRuntime.jsx(ChevronDownIcon, {}) }));
 
 const SelectLoadingIndicator = (props) => jsxRuntime.jsx(LoadingIndicator, Object.assign({ asSpinner: true, spinnerColor: "gray" }, props.innerProps, { style: props.getStyles("loadingIndicator", props) }));
 
+const SelectOptionAvatar = ({ avatar }) => {
+  var _a, _b;
+  return jsxRuntime.jsx(Avatar, {
+    size: "xsmall",
+    color: avatar.isSelf ? "primary" : "slate",
+    // First code point + combining marks, so a decomposed "Ángela" keeps its accent.
+    initials: (_b = (_a = avatar.initials.trim().match(/^.\p{M}*/u)) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : "",
+    src: avatar.src,
+    alt: avatar.alt,
+    className: "ui:shrink-0 ui:border ui:border-solid ui:border-border-neutral-secondary-default"
+  });
+};
+
+const SelectMultiValueLabel = (props) => {
+  var _a;
+  const avatar = (_a = props.data) === null || _a === void 0 ? void 0 : _a.avatar;
+  return jsxRuntime.jsx(ReactSelect.components.MultiValueLabel, Object.assign({}, props, { children: avatar ? jsxRuntime.jsxs("span", { className: "ui:flex ui:items-center ui:gap-f_base", children: [jsxRuntime.jsx(SelectOptionAvatar, { avatar }), props.children] }) : props.children }));
+};
+
+const SelectOption = (props) => {
+  var _a;
+  const avatar = (_a = props.data) === null || _a === void 0 ? void 0 : _a.avatar;
+  return jsxRuntime.jsx(ReactSelect.components.Option, Object.assign({}, props, { children: props.isMulti && avatar ? jsxRuntime.jsxs("span", { className: "ui:flex ui:items-center ui:gap-f_base", children: [jsxRuntime.jsx(SelectOptionAvatar, { avatar }), props.children] }) : props.children }));
+};
+
+const MULTI_FONT_SIZE = "14px";
+const MULTI_LINE_HEIGHT = "var(--ui-semantic-size-m, 20px)";
+const MULTI_MIN_HEIGHT = "44px";
+const RADIUS_S = "var(--ui-semantic-radius-s, 4px)";
+const SPACING_XS = "var(--ui-semantic-spacing-xs, 2px)";
+const SPACING_S = "var(--ui-semantic-spacing-s, 4px)";
+const SPACING_BASE = "var(--ui-semantic-spacing-base, 8px)";
+const SPACING_M = "var(--ui-semantic-spacing-m, 12px)";
 function generateCustomStyles(hasError) {
   return {
     option: (baseStyles, state) => {
       return Object.assign(Object.assign({}, baseStyles), {
         fontWeight: state.isSelected ? "bold" : "normal",
-        fontSize: "14px",
+        fontSize: state.isMulti ? MULTI_FONT_SIZE : "14px",
+        lineHeight: state.isMulti ? MULTI_LINE_HEIGHT : void 0,
         // tailwind blue-50
         backgroundColor: state.isFocused ? "#F2FAFD" : "none",
         color: "inherit",
@@ -4496,30 +4530,55 @@ function generateCustomStyles(hasError) {
     input: (baseStyles) => {
       return Object.assign(Object.assign({}, baseStyles), { padding: 0, margin: 0 });
     },
-    multiValue: (baseStyles) => {
+    multiValue: (baseStyles, state) => {
+      var _a;
+      const hasAvatar = Boolean((_a = state.data) === null || _a === void 0 ? void 0 : _a.avatar);
       return Object.assign(Object.assign({}, baseStyles), {
-        // background-info-primary-default (blue-300)
-        backgroundColor: "#d7e3fb",
-        borderRadius: "4px",
-        lineHeight: "1rem"
+        backgroundColor: hasAvatar ? "var(--ui-color-background-neutral-secondary-default, #ffffff)" : "var(--ui-color-background-info-primary-default, #d7e3fb)",
+        border: hasAvatar ? "1px solid var(--ui-color-border-neutral-secondary-default, #cbd5e1)" : "none",
+        borderRadius: RADIUS_S,
+        // Clip the children so their backgrounds respect the corner radius.
+        overflow: "hidden",
+        margin: 0
       });
     },
-    multiValueLabel: (baseStyles) => {
+    multiValueLabel: (baseStyles, state) => {
+      var _a;
+      const hasAvatar = Boolean((_a = state.data) === null || _a === void 0 ? void 0 : _a.avatar);
       return Object.assign(Object.assign({}, baseStyles), {
-        // text-info-primary-default (brand-900)
-        color: "#112d9c",
-        fontSize: "14px"
+        color: hasAvatar ? "var(--ui-color-text-neutral-primary-default, #162130)" : "var(--ui-color-text-info-primary-default, #112d9c)",
+        fontSize: MULTI_FONT_SIZE,
+        lineHeight: MULTI_LINE_HEIGHT,
+        // Shorthand resets react-select's narrower `paddingLeft` default.
+        // No avatar → more leading space, nothing holds the label off the edge.
+        padding: `${SPACING_S} ${SPACING_S} ${SPACING_S} ${hasAvatar ? SPACING_BASE : SPACING_M}`
       });
     },
-    multiValueRemove: (baseStyles) => {
-      return Object.assign(Object.assign({}, baseStyles), { color: "#112d9c", borderRadius: "0 4px 4px 0", "&:hover": {
-        // background-info-primary-hovered (blue-500)
-        backgroundColor: "#b3cafc",
-        color: "#112d9c"
-      } });
+    multiValueRemove: (baseStyles, state) => {
+      var _a;
+      const hasAvatar = Boolean((_a = state.data) === null || _a === void 0 ? void 0 : _a.avatar);
+      const color = hasAvatar ? "var(--ui-color-icon-brand-primary-default, #1e40af)" : "var(--ui-color-text-info-primary-default, #112d9c)";
+      return Object.assign(Object.assign({}, baseStyles), {
+        color,
+        // react-select hardcodes a 14px cross here (its ClearIndicator gets 20).
+        // Resize to the design's 20px via the SVG, and drop the vertical padding
+        // so the button's 24px content box stays under the 28px label and the
+        // tag height — and so the control height — is unchanged. The button is a
+        // stretched flex child, so the hit area is still the full 28px.
+        padding: `${SPACING_XS} ${SPACING_S}`,
+        "& svg": { width: "20px", height: "20px" },
+        borderRadius: 0,
+        "&:hover": {
+          backgroundColor: hasAvatar ? "var(--ui-color-background-neutral-primary-default, #f5f7fa)" : "var(--ui-color-background-info-primary-hovered, #b3cafc)",
+          color
+        }
+      });
     },
-    valueContainer: (baseStyles) => {
-      return Object.assign(Object.assign({}, baseStyles), { padding: ".5rem", margin: 0 });
+    valueContainer: (baseStyles, state) => {
+      return Object.assign(Object.assign(Object.assign({}, baseStyles), { margin: 0 }), state.isMulti ? {
+        gap: SPACING_BASE,
+        padding: `${SPACING_BASE} ${SPACING_BASE} ${SPACING_BASE} ${SPACING_M}`
+      } : { padding: ".5rem" });
     },
     control: (baseStyles, state) => {
       const navyBlue = "rgb(30 64 175)";
@@ -4533,19 +4592,20 @@ function generateCustomStyles(hasError) {
       const validatedBorderColor = hasError ? red : defaultBorderColor;
       const defaultOutline = hasError ? lightRedTransparent : darkBlue;
       const validatedOutline = `2px solid ${state.isFocused ? defaultOutline : "transparent"}`;
+      const multiOnly = state.isMulti;
       return Object.assign(Object.assign({}, baseStyles), {
-        fontSize: "14px",
+        fontSize: multiOnly ? MULTI_FONT_SIZE : "14px",
         transition: "border 0.3s ease-in-out",
         // primary outline
-        outline: validatedOutline,
-        outlineOffset: "-2px",
-        borderColor: validatedBorderColor,
+        outline: multiOnly ? void 0 : validatedOutline,
+        outlineOffset: multiOnly ? void 0 : "-2px",
+        borderColor: multiOnly ? hasError ? red : state.isFocused || state.menuIsOpen ? "var(--ui-color-border-neutral-primary-selected, #1e40af)" : "var(--ui-color-border-neutral-secondary-default, #cbd5e1)" : validatedBorderColor,
         borderWidth: "1px !important",
         borderStyle: "solid",
-        borderRadius: "4px",
-        minHeight: state.isMulti ? "44px" : void 0,
-        height: state.isMulti ? void 0 : "44px",
-        boxShadow: `0px 1px 2px ${lightShadow}`,
+        borderRadius: multiOnly ? RADIUS_S : "4px",
+        minHeight: multiOnly ? MULTI_MIN_HEIGHT : void 0,
+        height: multiOnly ? void 0 : "44px",
+        boxShadow: multiOnly ? "none" : `0px 1px 2px ${lightShadow}`,
         "&:hover": {
           borderColor: mediumGray,
           // selector for the chevron
@@ -4557,7 +4617,7 @@ function generateCustomStyles(hasError) {
     },
     // The placeholder has the following css prop: grid-area: 1/1/2/3;
     // And grid-area doesn't work on IE11, so we need to style it slightly different.
-    placeholder: (baseStyles) => Object.assign(Object.assign({}, baseStyles), { fontWeight: 100, color: "#6B7280", margin: 0 }),
+    placeholder: (baseStyles, state) => Object.assign(Object.assign(Object.assign({}, baseStyles), { fontWeight: 100, color: "#6B7280", margin: 0 }), state.isMulti ? { fontSize: MULTI_FONT_SIZE, lineHeight: MULTI_LINE_HEIGHT } : {}),
     singleValue: (baseStyles) => {
       return Object.assign(Object.assign({}, baseStyles), { fontSize: "14px" });
     },
@@ -4631,7 +4691,9 @@ const Select = React__namespace.default.forwardRef((_a, innerRef) => {
     components: {
       SelectContainer: CustomContainer,
       DropdownIndicator: SelectDropdownIndicator,
-      LoadingIndicator: SelectLoadingIndicator
+      LoadingIndicator: SelectLoadingIndicator,
+      MultiValueLabel: SelectMultiValueLabel,
+      Option: SelectOption
     }
   });
   if (isCreatable) {
@@ -5035,8 +5097,8 @@ const MediaPicker = React__namespace.default.forwardRef((props, ref) => {
 
 const TagGroup = ({ children, tags, tagSize = "large", className }) => jsxRuntime.jsxs("div", { className: classNames__default.default("ui:flex ui:flex-row ui:flex-wrap ui:gap-2", className), children: [children, tags === null || tags === void 0 ? void 0 : tags.map((tag) => jsxRuntime.jsx(Tag, Object.assign({ _size: tagSize }, tag)))] });
 
-var css_248z$2 = "/*! 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$2);
+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 = {
   BOTH: "both",
@@ -5461,8 +5523,8 @@ const getTextEditorTranslations = (locale) => {
   return TEXT_EDITOR_TRANSLATIONS[locale] || TEXT_EDITOR_TRANSLATIONS["en-GB"];
 };
 
-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.web-ui-text-editor {\n  resize: vertical;\n  min-height: 10rem;\n  padding: 1rem;\n  font-size: 0.8rem;\n  line-height: 1.5;\n  outline: none;\n}\n.web-ui-text-editor.tiptap.ProseMirror p.is-editor-empty:first-child::before {\n  color: var(--ui-color-text-neutral-primary-disabled);\n  content: attr(data-placeholder);\n  float: left;\n  height: 0;\n  pointer-events: none;\n}\n.web-ui-text-editor a {\n  color: var(--ui-color-text-brand-primary-default);\n  text-decoration: underline;\n  cursor: pointer;\n}\n.web-ui-text-editor .web-ui-mention {\n  display: inline-block;\n  padding: 0.125rem 0.375rem;\n  border-radius: 0.25rem;\n  background-color: var(--ui-primitive-color-pink-100);\n  color: var(--ui-primitive-color-pink-700);\n  font-weight: 500;\n  white-space: nowrap;\n}\n.web-ui-text-editor ul,\n.web-ui-text-editor ol {\n  padding-left: 1.5rem;\n}\n.web-ui-text-editor ul {\n  list-style-type: disc;\n}\n.web-ui-text-editor ol {\n  list-style-type: decimal;\n}\n.web-ui-text-editor li {\n  margin-bottom: 0.25rem;\n}\n.web-ui-text-editor strong {\n  font-weight: 600;\n}\n.web-ui-text-editor em {\n  font-style: italic;\n}\n.web-ui-text-editor u {\n  text-decoration: underline;\n}\n.web-ui-text-editor s {\n  text-decoration: line-through;\n}\n.web-ui-text-editor h1,\n.web-ui-text-editor h2,\n.web-ui-text-editor h3,\n.web-ui-text-editor h4,\n.web-ui-text-editor h5,\n.web-ui-text-editor h6 {\n  font-weight: 600;\n  margin-bottom: 0.75rem;\n  margin-top: 1rem;\n}\n.web-ui-text-editor h1:first-child,\n.web-ui-text-editor h2:first-child,\n.web-ui-text-editor h3:first-child,\n.web-ui-text-editor h4:first-child,\n.web-ui-text-editor h5:first-child,\n.web-ui-text-editor h6:first-child {\n  margin-top: 0;\n}\n.web-ui-text-editor h1 {\n  font-size: 2rem;\n}\n.web-ui-text-editor h2 {\n  font-size: 1.5rem;\n}\n.web-ui-text-editor h3 {\n  font-size: 1.25rem;\n}\n.web-ui-text-editor h4 {\n  font-size: 1.125rem;\n}\n.web-ui-text-editor h5,\n.web-ui-text-editor h6 {\n  font-size: 1rem;\n}";
-styleInject(css_248z$1);
+var css_248z = "/**\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.web-ui-text-editor {\n  resize: vertical;\n  min-height: 10rem;\n  padding: 1rem;\n  font-size: 0.8rem;\n  line-height: 1.5;\n  outline: none;\n}\n.web-ui-text-editor.tiptap.ProseMirror p.is-editor-empty:first-child::before {\n  color: var(--ui-color-text-neutral-primary-disabled);\n  content: attr(data-placeholder);\n  float: left;\n  height: 0;\n  pointer-events: none;\n}\n.web-ui-text-editor a {\n  color: var(--ui-color-text-brand-primary-default);\n  text-decoration: underline;\n  cursor: pointer;\n}\n.web-ui-text-editor .web-ui-mention {\n  display: inline-block;\n  padding: 0.125rem 0.375rem;\n  border-radius: 0.25rem;\n  background-color: var(--ui-primitive-color-pink-100);\n  color: var(--ui-primitive-color-pink-700);\n  font-weight: 500;\n  white-space: nowrap;\n}\n.web-ui-text-editor ul,\n.web-ui-text-editor ol {\n  padding-left: 1.5rem;\n}\n.web-ui-text-editor ul {\n  list-style-type: disc;\n}\n.web-ui-text-editor ol {\n  list-style-type: decimal;\n}\n.web-ui-text-editor li {\n  margin-bottom: 0.25rem;\n}\n.web-ui-text-editor strong {\n  font-weight: 600;\n}\n.web-ui-text-editor em {\n  font-style: italic;\n}\n.web-ui-text-editor u {\n  text-decoration: underline;\n}\n.web-ui-text-editor s {\n  text-decoration: line-through;\n}\n.web-ui-text-editor h1,\n.web-ui-text-editor h2,\n.web-ui-text-editor h3,\n.web-ui-text-editor h4,\n.web-ui-text-editor h5,\n.web-ui-text-editor h6 {\n  font-weight: 600;\n  margin-bottom: 0.75rem;\n  margin-top: 1rem;\n}\n.web-ui-text-editor h1:first-child,\n.web-ui-text-editor h2:first-child,\n.web-ui-text-editor h3:first-child,\n.web-ui-text-editor h4:first-child,\n.web-ui-text-editor h5:first-child,\n.web-ui-text-editor h6:first-child {\n  margin-top: 0;\n}\n.web-ui-text-editor h1 {\n  font-size: 2rem;\n}\n.web-ui-text-editor h2 {\n  font-size: 1.5rem;\n}\n.web-ui-text-editor h3 {\n  font-size: 1.25rem;\n}\n.web-ui-text-editor h4 {\n  font-size: 1.125rem;\n}\n.web-ui-text-editor h5,\n.web-ui-text-editor h6 {\n  font-size: 1rem;\n}";
+styleInject(css_248z);
 
 const MentionWithTooltip = extensionMention.Mention.extend({
   addNodeView() {
@@ -5588,9 +5650,6 @@ const TextLink = (props) => {
   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 });
 };
 
-var css_248z = "@font-face {\n  font-family: \"Avenir Next\";\n  font-weight: 700;\n  src: url(\"../../../public/fonts/avenir/3A0AF8_0_0.ttf\") format(\"truetype\");\n}\n\n@font-face {\n  font-family: \"Avenir Next\";\n  font-weight: 600;\n  src: url(\"../../../public/fonts/avenir/AvenirNext-DemiBold.ttf\")\n    format(\"truetype\");\n}\n";
-styleInject(css_248z);
-
 const variantClasses = {
   h1: "ui-typo-h1 ui:text-text-brand-primary-default",
   h2: "ui-typo-h2 ui:text-text-neutral-primary-default",