@luscii-healthtech/web-ui 42.7.0 → 42.8.1

package/dist/index.development.js

@@ -26,8 +26,8 @@ require('react-datepicker/dist/react-datepicker.min.css');
 var PropTypes = require('prop-types');
 var FlyOutMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 var RadixHC = require('@radix-ui/react-hover-card');
-var ReactSelect = require('react-select');
 var groupBy = require('lodash/groupBy');
+var ReactSelect = require('react-select');
 var RadixSwitch = require('@radix-ui/react-switch');
 var Quill = require('quill');
 require('quill-paste-smart');
@@ -71,8 +71,8 @@ var ReactDatePicker__default = /*#__PURE__*/_interopDefault(ReactDatePicker);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var FlyOutMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(FlyOutMenuPrimitive);
 var RadixHC__namespace = /*#__PURE__*/_interopNamespace(RadixHC);
-var ReactSelect__default = /*#__PURE__*/_interopDefault(ReactSelect);
 var groupBy__default = /*#__PURE__*/_interopDefault(groupBy);
+var ReactSelect__default = /*#__PURE__*/_interopDefault(ReactSelect);
 var RadixSwitch__namespace = /*#__PURE__*/_interopNamespace(RadixSwitch);
 var Quill__default = /*#__PURE__*/_interopDefault(Quill);
 var isFunction__default = /*#__PURE__*/_interopDefault(isFunction);
@@ -409,6 +409,9 @@ var AlarmClockIcon = IconWrapper(SvgAlarmClockIcon);
 const SvgAmberAlertIcon = (props) => jsxRuntime.jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 12 12" }, props, { children: jsxRuntime.jsx("rect", { width: 10, height: 10, x: 1, y: 1, stroke: "currentColor", strokeWidth: 2, rx: 5 }) }));
 var AmberAlertIcon = IconWrapper(SvgAmberAlertIcon);
 
+const SvgArrowBackward = (props) => jsxRuntime.jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24" }, props, { children: jsxRuntime.jsx("path", { fill: "currentColor", d: "m7.373 12.75 5.17 5.17a.7.7 0 0 1 .22.521.74.74 0 0 1-.236.532.78.78 0 0 1-.527.225.7.7 0 0 1-.527-.225l-6.34-6.34A.83.83 0 0 1 4.877 12q0-.18.058-.336a.8.8 0 0 1 .198-.297l6.34-6.34a.72.72 0 0 1 .515-.212.75.75 0 0 1 .539.212.74.74 0 0 1 .233.535q0 .302-.233.534L7.373 11.25H18.75q.32 0 .535.216A.73.73 0 0 1 19.5 12a.73.73 0 0 1-.215.535.73.73 0 0 1-.535.215z" }) }));
+var ArrowBackward = IconWrapper(SvgArrowBackward);
+
 const SvgArrowForward = (props) => jsxRuntime.jsx("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24" }, props, { children: jsxRuntime.jsx("path", { fill: "currentColor", d: "M16.627 12.75H5.25a.73.73 0 0 1-.535-.216.73.73 0 0 1-.215-.535q0-.319.215-.535a.73.73 0 0 1 .535-.215h11.377l-5.17-5.17a.7.7 0 0 1-.22-.521q.003-.3.236-.532A.78.78 0 0 1 12 4.801a.7.7 0 0 1 .527.225l6.34 6.34a.83.83 0 0 1 .256.633.83.83 0 0 1-.256.633l-6.34 6.34a.72.72 0 0 1-.514.213.75.75 0 0 1-.54-.213.74.74 0 0 1-.233-.535q0-.3.233-.534z" }) }));
 var ArrowForward = IconWrapper(SvgArrowForward);
 
@@ -745,6 +748,7 @@ var Icons = /*#__PURE__*/Object.freeze({
     AlertsIcon: BellIcon,
     AmberAlertColoredIcon: AmberAlertColoredIcon,
     AmberAlertIcon: AmberAlertIcon,
+    ArrowBackward: ArrowBackward,
     ArrowForward: ArrowForward,
     AssignIcon: AssignIcon,
     AssignedIcon: AssignedIcon,
@@ -3429,126 +3433,49 @@ 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 = ".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}";
+var css_248z$8 = ".styled-select {\n  appearance: none;\n}\n.styled-select::picker-icon {\n  appearance: none;\n}";
 styleInject(css_248z$8);
 
-const SelectDropdownIndicator = (props) => jsxRuntime.jsx(ReactSelect.components.DropdownIndicator, Object.assign({}, props, { children: jsxRuntime.jsx(ChevronDownIcon, {}) }));
-
-const SelectLoadingIndicator = (props) => jsxRuntime.jsx(LoadingIndicator, Object.assign({ asSpinner: true, spinnerColor: "gray" }, props.innerProps, { style: props.getStyles("loadingIndicator", props) }));
-
-function generateCustomStyles(hasError) {
-  return {
-    option: (baseStyles, state) => {
-      return Object.assign(Object.assign({}, baseStyles), {
-        fontWeight: state.isSelected ? "bold" : "normal",
-        fontSize: "14px",
-        // tailwind blue-50
-        backgroundColor: state.isFocused ? "#F2FAFD" : "none",
-        color: "inherit",
-        position: "relative",
-        padding: "0.75rem",
-        opacity: state.isDisabled ? "0.5" : 1,
-        "&:after": {
-          visibility: state.isSelected ? "visible" : "hidden"
-        },
-        transition: "background-color 0.3s ease-in-out",
-        "&:hover": {
-          // tailwind blue-50
-          backgroundColor: state.isSelected ? "transparent" : "#F2FAFD"
-        },
-        pointerEvents: state.isDisabled ? "none" : "auto"
-      });
-    },
-    container: (baseStyles) => {
-      return Object.assign(Object.assign({}, baseStyles), { flexGrow: "initial" });
-    },
-    input: (baseStyles) => {
-      return Object.assign(Object.assign({}, baseStyles), { padding: 0, margin: 0 });
-    },
-    multiValue: (baseStyles) => {
-      return Object.assign(Object.assign({}, baseStyles), { lineHeight: "1rem" });
-    },
-    valueContainer: (baseStyles) => {
-      return Object.assign(Object.assign({}, baseStyles), { padding: ".5rem", margin: 0 });
-    },
-    control: (baseStyles, state) => {
-      const navyBlue = "rgb(30 64 175)";
-      const lightGray = "#D1D5DB";
-      const red = "#c53030";
-      const lightRedTransparent = "rgba(255, 98, 102, 0.3)";
-      const darkBlue = "#1e40af";
-      const mediumGray = "#9CA3AF";
-      const lightShadow = "rgba(0, 0, 0, 0.05)";
-      const defaultBorderColor = state.isFocused || state.menuIsOpen ? navyBlue : lightGray;
-      const validatedBorderColor = hasError ? red : defaultBorderColor;
-      const defaultOutline = hasError ? lightRedTransparent : darkBlue;
-      const validatedOutline = `2px solid ${state.isFocused ? defaultOutline : "transparent"}`;
-      return Object.assign(Object.assign({}, baseStyles), {
-        fontSize: "14px",
-        transition: "border 0.3s ease-in-out",
-        // primary outline
-        outline: validatedOutline,
-        outlineOffset: "-2px",
-        borderColor: 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}`,
-        "&:hover": {
-          borderColor: mediumGray,
-          // selector for the chevron
-          '> [class*="IndicatorsContainer"]': {
-            opacity: 1
-          }
-        }
-      });
-    },
-    // 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 }),
-    singleValue: (baseStyles) => {
-      return Object.assign(Object.assign({}, baseStyles), { fontSize: "14px" });
-    },
-    indicatorSeparator: () => ({
-      display: "none"
-    }),
-    menu: (baseStyles) => Object.assign(Object.assign({}, baseStyles), { zIndex: 20 })
-  };
-}
-const Select = React__namespace.default.forwardRef((_a, innerRef) => {
-  var { isError = false, styles, options, onChange, value, width = "full", isMulti, className, skipValueProcessing } = _a, otherProps = __rest(_a, ["isError", "styles", "options", "onChange", "value", "width", "isMulti", "className", "skipValueProcessing"]);
-  const customStyles = generateCustomStyles(isError);
-  const mergedStyles = ReactSelect.mergeStyles(customStyles, styles);
-  const isOptionsGrouped = !options ? false : options.reduce((acc, o) => acc || "options" in o && !("values" in o), false);
-  const flatmappedOptions = !options ? [] : isOptionsGrouped ? options.flatMap((g) => g.options) : options;
-  const onChangeWrapped = !onChange ? void 0 : isMulti ? (val, a) => onChange(val.map((v) => v.value), a) : (val, a) => onChange(val === null || val === void 0 ? void 0 : val.value, a);
-  const valueWrapped = !value || !options ? value : isMulti ? flatmappedOptions.filter((o) => value.includes(o.value)) : flatmappedOptions.find((o) => o.value === value);
-  const getDataAttributes = () => {
-    const dataProps = {};
-    for (const prop in otherProps) {
-      if (prop.includes("data-")) {
-        dataProps[prop] = otherProps[prop];
-      }
-    }
-    return dataProps;
+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"]);
+  const hasPrefix = !!prefix;
+  const hasSuffix = !!suffix;
+  const hasNoExtraContent = !hasPrefix && !hasSuffix;
+  const heightClasses = {
+    md: "ui:h-form-md",
+    lg: "ui:h-form-lg"
   };
-  const CustomContainer = (_a2) => {
-    var { children } = _a2, commonProps = __rest(_a2, ["children"]);
-    return jsxRuntime.jsx(ReactSelect.components.SelectContainer, Object.assign({}, commonProps, { innerProps: Object.assign({}, commonProps.innerProps, Object.assign({}, getDataAttributes())), children }));
+  const paddingClasses = {
+    md: "ui:px-3 py-2 ui:pr-10",
+    // pr-10 to account for the chevron icon
+    lg: "ui:p-3 ui:pr-10"
   };
-  return jsxRuntime.jsx(ReactSelect__default.default, Object.assign({}, otherProps, { ref: innerRef, styles: mergedStyles, options, onChange: skipValueProcessing ? onChange : onChangeWrapped, value: skipValueProcessing ? value : valueWrapped, isMulti, className: classNames__default.default("customized-select", className, {
-    "ui:w-16": width === "sm",
-    "ui:w-32": width === "md",
-    "ui:w-56": width === "lg",
-    "ui:w-80": width === "xl",
-    "ui:grow": width === "full"
-  }), components: {
-    SelectContainer: CustomContainer,
-    DropdownIndicator: SelectDropdownIndicator,
-    LoadingIndicator: SelectLoadingIndicator
-  } }));
+  return jsxRuntime.jsxs(FlexRow, { spacing: "none", "data-test-id": "input-component-container", stretch: false, children: [jsxRuntime.jsx("span", { className: classNames__default.default(heightClasses[height], "ui:border-b ui:border-t ui:border-solid ui:border-input-border", {
+    "ui:hidden": hasNoExtraContent,
+    "ui:order-1": hasSuffix,
+    "ui:rounded-l ui:border-l": hasPrefix,
+    "ui:rounded-r ui:border-r": hasSuffix
+  }, "ui:flex ui:flex-col ui:items-center ui:p-3", "ui:text-sm", "ui:text-slate-500", "ui:bg-main-background"), children: suffix || prefix }), jsxRuntime.jsxs("div", { className: classNames__default.default("ui:relative", {
+    "ui:flex ui:grow": width === "full"
+  }), children: [jsxRuntime.jsx("select", Object.assign({ ref, className: classNames__default.default("styled-select", "ui:block ui:min-w-[4rem]", calculateResponsiveWidthClasses(width), {
+    "ui:bg-slate-50 ui:text-slate-400": attributes.disabled,
+    "ui:text-slate-800": !attributes.disabled,
+    "ui:border-input-border": !attributes.disabled && !isError,
+    "ui:hover:border-input-border-dark": !attributes.disabled,
+    "ui:border-red-700": isError,
+    "ui:focus:outline-negative": isError,
+    "ui:focus:border-primary": !isError,
+    "ui:focus:outline-primary": !isError,
+    "ui:bg-white": !attributes.disabled
+  }, heightClasses[height], paddingClasses[height], "ui:border", "ui:text-base ui:sm:text-sm", "ui:placeholder-slate-500", "ui:border-solid", "ui:transition-colors", "ui:duration-300", {
+    "ui:rounded": hasNoExtraContent,
+    "ui:rounded-l": hasSuffix,
+    "ui:rounded-r": hasPrefix,
+    "ui:order-2": hasPrefix,
+    "ui:order-1": hasSuffix
+  }, "ui:shadow-default", className) }, attributes, { children })), jsxRuntime.jsx("div", { className: "ui:pointer-events-none ui:absolute ui:right-0 ui:top-1/2 ui:z-20", style: {
+    transform: "translateY(-50%)"
+  }, children: jsxRuntime.jsx(ChevronDownIcon, { className: classNames__default.default("ui:mr-3 ui:h-6 ui:w-6 ui:text-slate-300") }) })] })] });
 });
 
 const PAGE_SIZES = [25, 50, 75, 100];
@@ -3579,18 +3506,19 @@ const getSummaryText = (pageCount, currentPageNumber, localization, pageSize, re
 };
 
 const PaginationMenuLarge = (props) => {
-  const handleOnPageNumberSelect = (value) => {
-    props.onChange(value, props.pageSize);
+  const handleOnPageNumberSelect = (e) => {
+    props.onChange(Number.parseInt(e.target.value, 10), props.pageSize);
   };
-  const handleOnPageSizeSelect = (value) => {
+  const handleOnPageSizeSelect = (e) => {
+    const value = Number.parseInt(e.target.value, 10);
     const pageSize = PAGE_SIZE_OPTIONS.find((option) => option.value === value);
     pageSize && props.onChange(1, pageSize.value);
   };
   const handleOnPrevNextButtonClick = (event) => {
     const newPage = event.currentTarget.dataset.page;
-    newPage && props.onChange(parseInt(newPage, 10), props.pageSize);
+    newPage && props.onChange(Number.parseInt(newPage, 10), props.pageSize);
   };
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "ui:flex ui:flex-row ui:items-center", children: [props.pageSize && props.resultCount && jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text, { text: props.localization.display }), jsxRuntime.jsx(Select, { className: "ui:ml-2 ui:mr-4 ui:w-24", options: PAGE_SIZE_OPTIONS, onChange: handleOnPageSizeSelect, value: props.pageSize, menuPlacement: "auto" })] }), jsxRuntime.jsx(Text, { text: props.localization.page }), jsxRuntime.jsx(Select, { className: "ui:ml-2 ui:w-24", options: getPageNumberOptions(props.pageCount), onChange: handleOnPageNumberSelect, value: props.currentPageNumber, isDisabled: props.pageCount < 2, menuPlacement: "auto" })] }), jsxRuntime.jsxs("div", { className: "ui:ml-4 ui:flex ui:flex-row ui:items-center", children: [jsxRuntime.jsx(Text, { text: getSummaryText(props.pageCount, props.currentPageNumber, props.localization, props.pageSize, props.resultCount), color: "slate-500" }), jsxRuntime.jsx(SecondaryButton, { "data-test-id": "prev-button", text: props.localization.previous, "data-page": props.currentPageNumber - 1, onClick: handleOnPrevNextButtonClick, isDisabled: props.currentPageNumber === 1, className: "ui:ml-4" }), jsxRuntime.jsx(SecondaryButton, { "data-test-id": "next-button", text: props.localization.next, isDisabled: props.currentPageNumber === props.pageCount, "data-page": props.currentPageNumber + 1, onClick: handleOnPrevNextButtonClick, className: "ui:ml-4" })] })] });
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Stack, { axis: "x", align: "center", gap: "s", justify: "start", width: "full", children: [props.pageSize && props.resultCount && jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text, { children: props.localization.display }), jsxRuntime.jsx(StyledSelect, { onChange: handleOnPageSizeSelect, value: props.pageSize, children: PAGE_SIZE_OPTIONS.map((option) => jsxRuntime.jsx("option", { value: option.value, children: option.label }, option.value)) })] }), jsxRuntime.jsx(Text, { children: props.localization.page }), jsxRuntime.jsx(StyledSelect, { onChange: handleOnPageNumberSelect, value: props.currentPageNumber, disabled: props.pageCount < 2, children: getPageNumberOptions(props.pageCount).map((option) => jsxRuntime.jsx("option", { value: option.value, children: option.label }, option.value)) })] }), jsxRuntime.jsxs(Stack, { axis: "x", align: "center", justify: "end", width: "full", children: [jsxRuntime.jsx(Text, { color: "slate-500", children: getSummaryText(props.pageCount, props.currentPageNumber, props.localization, props.pageSize, props.resultCount) }), jsxRuntime.jsx(SecondaryButton, { "data-test-id": "prev-button", "data-page": props.currentPageNumber - 1, onClick: handleOnPrevNextButtonClick, disabled: props.currentPageNumber === 1, className: "ui:ml-4", children: props.localization.previous }), jsxRuntime.jsx(SecondaryButton, { "data-test-id": "next-button", disabled: props.currentPageNumber === props.pageCount, "data-page": props.currentPageNumber + 1, onClick: handleOnPrevNextButtonClick, className: "ui:ml-4", children: props.localization.next })] })] });
 };
 
 const PaginationMenuCursor = (props) => {
@@ -3601,7 +3529,7 @@ const PaginationMenuCursor = (props) => {
   return jsxRuntime.jsxs(Stack, { axis: "x", gap: "m", justify: "end", width: "full", children: [jsxRuntime.jsx(SecondaryButton, { "data-test-id": "prev-button", leadingIcon: jsxRuntime.jsx(LeftArrowIcon, {}), "data-cursor": props.previousCursor, isDisabled: !props.previousCursor, onClick: handleOnChange, children: props.localization.previous }), jsxRuntime.jsx(SecondaryButton, { "data-test-id": "next-button", trailingIcon: jsxRuntime.jsx(ChevronRightIcon, {}), "data-cursor": props.nextCursor, isDisabled: !props.nextCursor, onClick: handleOnChange, children: props.localization.next })] });
 };
 
-const Wrapper = ({ className, children }) => jsxRuntime.jsx("div", { className: classNames__default.default("ui:flex ui:w-full ui:flex-row ui:items-center ui:justify-between", className), children });
+const Wrapper = ({ className, children }) => jsxRuntime.jsx(Stack, { axis: "x", align: "center", className: classNames__default.default(className), justify: "between", width: "full", children });
 const PaginationMenu = (props) => {
   if (props.type === "small" || props.small) {
     return jsxRuntime.jsx(Wrapper, { className: props.className, children: jsxRuntime.jsx(PaginationMenuSmall, { pageCount: props.pageCount, currentPageNumber: props.currentPageNumber, pageSize: props.pageSize, onChange: props.onChange }) });
@@ -4535,49 +4463,126 @@ 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 = ".styled-select {\n  appearance: none;\n}\n.styled-select::picker-icon {\n  appearance: none;\n}";
+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);
 
-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"]);
-  const hasPrefix = !!prefix;
-  const hasSuffix = !!suffix;
-  const hasNoExtraContent = !hasPrefix && !hasSuffix;
-  const heightClasses = {
-    md: "ui:h-form-md",
-    lg: "ui:h-form-lg"
+const SelectDropdownIndicator = (props) => jsxRuntime.jsx(ReactSelect.components.DropdownIndicator, Object.assign({}, props, { children: jsxRuntime.jsx(ChevronDownIcon, {}) }));
+
+const SelectLoadingIndicator = (props) => jsxRuntime.jsx(LoadingIndicator, Object.assign({ asSpinner: true, spinnerColor: "gray" }, props.innerProps, { style: props.getStyles("loadingIndicator", props) }));
+
+function generateCustomStyles(hasError) {
+  return {
+    option: (baseStyles, state) => {
+      return Object.assign(Object.assign({}, baseStyles), {
+        fontWeight: state.isSelected ? "bold" : "normal",
+        fontSize: "14px",
+        // tailwind blue-50
+        backgroundColor: state.isFocused ? "#F2FAFD" : "none",
+        color: "inherit",
+        position: "relative",
+        padding: "0.75rem",
+        opacity: state.isDisabled ? "0.5" : 1,
+        "&:after": {
+          visibility: state.isSelected ? "visible" : "hidden"
+        },
+        transition: "background-color 0.3s ease-in-out",
+        "&:hover": {
+          // tailwind blue-50
+          backgroundColor: state.isSelected ? "transparent" : "#F2FAFD"
+        },
+        pointerEvents: state.isDisabled ? "none" : "auto"
+      });
+    },
+    container: (baseStyles) => {
+      return Object.assign(Object.assign({}, baseStyles), { flexGrow: "initial" });
+    },
+    input: (baseStyles) => {
+      return Object.assign(Object.assign({}, baseStyles), { padding: 0, margin: 0 });
+    },
+    multiValue: (baseStyles) => {
+      return Object.assign(Object.assign({}, baseStyles), { lineHeight: "1rem" });
+    },
+    valueContainer: (baseStyles) => {
+      return Object.assign(Object.assign({}, baseStyles), { padding: ".5rem", margin: 0 });
+    },
+    control: (baseStyles, state) => {
+      const navyBlue = "rgb(30 64 175)";
+      const lightGray = "#D1D5DB";
+      const red = "#c53030";
+      const lightRedTransparent = "rgba(255, 98, 102, 0.3)";
+      const darkBlue = "#1e40af";
+      const mediumGray = "#9CA3AF";
+      const lightShadow = "rgba(0, 0, 0, 0.05)";
+      const defaultBorderColor = state.isFocused || state.menuIsOpen ? navyBlue : lightGray;
+      const validatedBorderColor = hasError ? red : defaultBorderColor;
+      const defaultOutline = hasError ? lightRedTransparent : darkBlue;
+      const validatedOutline = `2px solid ${state.isFocused ? defaultOutline : "transparent"}`;
+      return Object.assign(Object.assign({}, baseStyles), {
+        fontSize: "14px",
+        transition: "border 0.3s ease-in-out",
+        // primary outline
+        outline: validatedOutline,
+        outlineOffset: "-2px",
+        borderColor: 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}`,
+        "&:hover": {
+          borderColor: mediumGray,
+          // selector for the chevron
+          '> [class*="IndicatorsContainer"]': {
+            opacity: 1
+          }
+        }
+      });
+    },
+    // 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 }),
+    singleValue: (baseStyles) => {
+      return Object.assign(Object.assign({}, baseStyles), { fontSize: "14px" });
+    },
+    indicatorSeparator: () => ({
+      display: "none"
+    }),
+    menu: (baseStyles) => Object.assign(Object.assign({}, baseStyles), { zIndex: 20 })
   };
-  const paddingClasses = {
-    md: "ui:px-3 py-2 ui:pr-10",
-    // pr-10 to account for the chevron icon
-    lg: "ui:p-3 ui:pr-10"
+}
+const Select = React__namespace.default.forwardRef((_a, innerRef) => {
+  var { isError = false, styles, options, onChange, value, width = "full", isMulti, className, skipValueProcessing } = _a, otherProps = __rest(_a, ["isError", "styles", "options", "onChange", "value", "width", "isMulti", "className", "skipValueProcessing"]);
+  const customStyles = generateCustomStyles(isError);
+  const mergedStyles = ReactSelect.mergeStyles(customStyles, styles);
+  const isOptionsGrouped = !options ? false : options.reduce((acc, o) => acc || "options" in o && !("values" in o), false);
+  const flatmappedOptions = !options ? [] : isOptionsGrouped ? options.flatMap((g) => g.options) : options;
+  const onChangeWrapped = !onChange ? void 0 : isMulti ? (val, a) => onChange(val.map((v) => v.value), a) : (val, a) => onChange(val === null || val === void 0 ? void 0 : val.value, a);
+  const valueWrapped = !value || !options ? value : isMulti ? flatmappedOptions.filter((o) => value.includes(o.value)) : flatmappedOptions.find((o) => o.value === value);
+  const getDataAttributes = () => {
+    const dataProps = {};
+    for (const prop in otherProps) {
+      if (prop.includes("data-")) {
+        dataProps[prop] = otherProps[prop];
+      }
+    }
+    return dataProps;
   };
-  return jsxRuntime.jsxs(FlexRow, { spacing: "none", "data-test-id": "input-component-container", stretch: false, children: [jsxRuntime.jsx("span", { className: classNames__default.default(heightClasses[height], "ui:border-b ui:border-t ui:border-solid ui:border-input-border", {
-    "ui:hidden": hasNoExtraContent,
-    "ui:order-1": hasSuffix,
-    "ui:rounded-l ui:border-l": hasPrefix,
-    "ui:rounded-r ui:border-r": hasSuffix
-  }, "ui:flex ui:flex-col ui:items-center ui:p-3", "ui:text-sm", "ui:text-slate-500", "ui:bg-main-background"), children: suffix || prefix }), jsxRuntime.jsxs("div", { className: classNames__default.default("ui:relative", {
-    "ui:flex ui:grow": width === "full"
-  }), children: [jsxRuntime.jsx("select", Object.assign({ ref, className: classNames__default.default("styled-select", "ui:block ui:min-w-[4rem]", calculateResponsiveWidthClasses(width), {
-    "ui:bg-slate-50 ui:text-slate-400": attributes.disabled,
-    "ui:text-slate-800": !attributes.disabled,
-    "ui:border-input-border": !attributes.disabled && !isError,
-    "ui:hover:border-input-border-dark": !attributes.disabled,
-    "ui:border-red-700": isError,
-    "ui:focus:outline-negative": isError,
-    "ui:focus:border-primary": !isError,
-    "ui:focus:outline-primary": !isError,
-    "ui:bg-white": !attributes.disabled
-  }, heightClasses[height], paddingClasses[height], "ui:border", "ui:text-base ui:sm:text-sm", "ui:placeholder-slate-500", "ui:border-solid", "ui:transition-colors", "ui:duration-300", {
-    "ui:rounded": hasNoExtraContent,
-    "ui:rounded-l": hasSuffix,
-    "ui:rounded-r": hasPrefix,
-    "ui:order-2": hasPrefix,
-    "ui:order-1": hasSuffix
-  }, "ui:shadow-default", className) }, attributes, { children })), jsxRuntime.jsx("div", { className: "ui:pointer-events-none ui:absolute ui:right-0 ui:top-1/2 ui:z-20", style: {
-    transform: "translateY(-50%)"
-  }, children: jsxRuntime.jsx(ChevronDownIcon, { className: classNames__default.default("ui:mr-3 ui:h-6 ui:w-6 ui:text-slate-300") }) })] })] });
+  const CustomContainer = (_a2) => {
+    var { children } = _a2, commonProps = __rest(_a2, ["children"]);
+    return jsxRuntime.jsx(ReactSelect.components.SelectContainer, Object.assign({}, commonProps, { innerProps: Object.assign({}, commonProps.innerProps, Object.assign({}, getDataAttributes())), children }));
+  };
+  return jsxRuntime.jsx(ReactSelect__default.default, Object.assign({}, otherProps, { ref: innerRef, styles: mergedStyles, options, onChange: skipValueProcessing ? onChange : onChangeWrapped, value: skipValueProcessing ? value : valueWrapped, isMulti, className: classNames__default.default("customized-select", className, {
+    "ui:w-16": width === "sm",
+    "ui:w-32": width === "md",
+    "ui:w-56": width === "lg",
+    "ui:w-80": width === "xl",
+    "ui:grow": width === "full"
+  }), components: {
+    SelectContainer: CustomContainer,
+    DropdownIndicator: SelectDropdownIndicator,
+    LoadingIndicator: SelectLoadingIndicator
+  } }));
 });
 
 const LabeledSelect = React__namespace.default.forwardRef((props, ref) => {
@@ -6098,14 +6103,15 @@ const Aside = (props) => {
 SplitViewLayout.Aside = Aside;
 
 const Header = (props) => {
-  const { children } = props, restProps = __rest(props, ["children"]);
-  return jsxRuntime.jsx(Box, Object.assign({ as: "header", p: "xl", backgroundColor: "surface" }, restProps, { children }));
+  const { children, className, leftActionSlot, rightActionSlot } = props, restProps = __rest(props, ["children", "className", "leftActionSlot", "rightActionSlot"]);
+  const classes = classNames__default.default(className, "ui:max-w-[100vw] ui:content-center");
+  return jsxRuntime.jsxs(Stack, Object.assign({ as: "header", p: "xl", axis: "x", backgroundColor: "surface", className: classes, gap: "xxl", align: "center", justify: "center" }, restProps, { children: [(leftActionSlot || rightActionSlot) && jsxRuntime.jsx(Box, { className: "ui:w-[--spacing(9)] ui:h-[--spacing(9)]", children: leftActionSlot }), jsxRuntime.jsx(Stack, { axis: "x", justify: "center", width: "full", className: "ui:lg:max-w-[--spacing(310)]", children: jsxRuntime.jsx(Box, { width: "full", children }) }), (leftActionSlot || rightActionSlot) && jsxRuntime.jsx(Box, { className: "ui:w-[--spacing(9)] ui:h-[--spacing(9)]", children: rightActionSlot })] }));
 };
 Header.displayName = "PageWithCenteredContentLayout.Header";
 const Main = (props) => {
   const { children, className } = props, restProps = __rest(props, ["children", "className"]);
   const classes = classNames__default.default(className, "ui:max-w-[100vw] ui:content-center ui:z-10");
-  return jsxRuntime.jsx(Stack, Object.assign({ as: "main", width: "full", align: "center", p: "xl", className: classes }, restProps, { children: jsxRuntime.jsx(Box, { width: "full", className: "ui:lg:max-w-[--spacing(192)]", children }) }));
+  return jsxRuntime.jsx(Stack, Object.assign({ as: "main", width: "full", align: "center", p: "xl", className: classes }, restProps, { children: jsxRuntime.jsx(Box, { width: "full", className: "ui:lg:max-w-[--spacing(310)]", children }) }));
 };
 Main.displayName = "PageWithCenteredContentLayout.Main";
 const PageWithCenteredContentLayout = (props) => {
@@ -6253,6 +6259,7 @@ exports.AlertWidget = AlertWidget;
 exports.AlertsIcon = BellIcon;
 exports.AmberAlertColoredIcon = AmberAlertColoredIcon;
 exports.AmberAlertIcon = AmberAlertIcon;
+exports.ArrowBackward = ArrowBackward;
 exports.ArrowForward = ArrowForward;
 exports.AsideLayout = AsideLayout;
 exports.AssignIcon = AssignIcon;