@luscii-healthtech/web-ui 54.3.4 → 54.3.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.development.js +30 -119
- package/dist/index.development.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/src/components/Switcher/Switcher.d.ts +41 -25
- package/dist/src/components/Switcher/SwitcherItem.d.ts +27 -23
- package/dist/src/generated/components/Switcher/Switcher.d.ts +41 -25
- package/dist/src/generated/components/Switcher/SwitcherItem.d.ts +27 -23
- package/dist/stories/Switcher.stories.d.ts +9 -34
- package/dist/web-ui-tailwind.css +28 -35
- package/dist/web-ui.esm.js +1 -1
- package/dist/web-ui.esm.js.map +1 -1
- package/package.json +1 -1
|
@@ -226,8 +226,8 @@ function styleInject(css, ref) {
|
|
|
226
226
|
}
|
|
227
227
|
}
|
|
228
228
|
|
|
229
|
-
var css_248z$
|
|
230
|
-
styleInject(css_248z$
|
|
229
|
+
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";
|
|
230
|
+
styleInject(css_248z$c);
|
|
231
231
|
|
|
232
232
|
const newVariants = /* @__PURE__ */ new Set([
|
|
233
233
|
"body-base-light",
|
|
@@ -1019,8 +1019,8 @@ toast.info = (message) => {
|
|
|
1019
1019
|
showToaster({ message, type: "success", showIcon: true, title: "" });
|
|
1020
1020
|
};
|
|
1021
1021
|
|
|
1022
|
-
var css_248z$
|
|
1023
|
-
styleInject(css_248z$
|
|
1022
|
+
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}";
|
|
1023
|
+
styleInject(css_248z$b);
|
|
1024
1024
|
|
|
1025
1025
|
const Title = (props) => {
|
|
1026
1026
|
const { variant: variantFromProps = "base", type, className, text, children, color, level, ref } = props, rest = __rest(props, ["variant", "type", "className", "text", "children", "color", "level", "ref"]);
|
|
@@ -1096,8 +1096,8 @@ const isSubstring = (string, searchTerm, caseSensitive = false) => {
|
|
|
1096
1096
|
return (stringToSearch === null || stringToSearch === void 0 ? void 0 : stringToSearch.indexOf(searchTermWithCase)) > -1;
|
|
1097
1097
|
};
|
|
1098
1098
|
|
|
1099
|
-
var css_248z$
|
|
1100
|
-
styleInject(css_248z$
|
|
1099
|
+
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}";
|
|
1100
|
+
styleInject(css_248z$a);
|
|
1101
1101
|
|
|
1102
1102
|
const ListItemSkeleton = () => {
|
|
1103
1103
|
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` } })] });
|
|
@@ -1969,8 +1969,8 @@ var img$2 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:
|
|
|
1969
1969
|
|
|
1970
1970
|
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";
|
|
1971
1971
|
|
|
1972
|
-
var css_248z$
|
|
1973
|
-
styleInject(css_248z$
|
|
1972
|
+
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}";
|
|
1973
|
+
styleInject(css_248z$9);
|
|
1974
1974
|
|
|
1975
1975
|
function LoadingIndicator(_a) {
|
|
1976
1976
|
var { asModal = false, asSpinner = false, className = "", spinnerColor = "blue", dataTestId = "loading-indicator" } = _a, restProps = __rest(_a, ["asModal", "asSpinner", "className", "spinnerColor", "dataTestId"]);
|
|
@@ -2423,8 +2423,8 @@ const Carousel = ({ id, className, slides = [], labels }) => {
|
|
|
2423
2423
|
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 }) })] }) });
|
|
2424
2424
|
};
|
|
2425
2425
|
|
|
2426
|
-
var css_248z$
|
|
2427
|
-
styleInject(css_248z$
|
|
2426
|
+
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}";
|
|
2427
|
+
styleInject(css_248z$8);
|
|
2428
2428
|
|
|
2429
2429
|
const CheckboxInner = (props) => {
|
|
2430
2430
|
const { id, explanation, type = "regular", isChecked = false, isIndeterminate = false, isDisabled, name, value, onChange, onClick, className, classNameCheckboxLabel, error, innerRef } = props;
|
|
@@ -2814,8 +2814,8 @@ const LOCALE_MAP = {
|
|
|
2814
2814
|
"pt-PT": pt.pt
|
|
2815
2815
|
};
|
|
2816
2816
|
|
|
2817
|
-
var css_248z$8 = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.cweb-datepicker {\n width: 182px;\n height: 44px;\n border: 1px solid #cccccc;\n border-radius: 4px;\n background-color: #ffffff;\n outline: none;\n padding: 12px 12px 11px 12px;\n}\n.cweb-datepicker input.cweb-datepicker {\n font-size: 14px;\n}\n.cweb-datepicker::placeholder {\n color: #64748b;\n}\n.cweb-datepicker:-ms-input-placeholder {\n color: #64748b !important;\n}\n.cweb-datepicker::-ms-input-placeholder {\n color: #64748b;\n}\n\n.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle.react-datepicker__triangle {\n border-bottom-color: #ffffff;\n margin-top: -4px;\n fill: #ffffff;\n color: #ffffff;\n}\n.react-datepicker-popper[data-placement^=top] {\n margin-bottom: 4px;\n}\n.react-datepicker-popper[data-placement^=top] .react-datepicker__triangle.react-datepicker__triangle {\n border-top-color: #ffffff;\n margin-bottom: -4px;\n fill: #ffffff;\n color: #ffffff;\n}\n.react-datepicker-popper .react-datepicker__children-container {\n width: 100%;\n margin: 0;\n}\n\n.cweb-datepicker-calendar {\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .cweb-datepicker-calendar {\n box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.2);\n }\n}\n.cweb-datepicker-calendar {\n padding: 0;\n border: 1px solid #cccccc;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n}\n.cweb-datepicker-calendar .react-datepicker__triangle {\n left: 10px;\n border: 6px solid transparent;\n fill: #ffffff;\n color: #ffffff;\n}\n.cweb-datepicker-calendar .react-datepicker__navigation {\n top: 19px;\n width: 19px;\n height: 10px;\n}\n.cweb-datepicker-calendar .react-datepicker__navigation .react-datepicker__navigation-icon:before {\n border: 0;\n}\n.cweb-datepicker-calendar .react-datepicker__navigation.react-datepicker__navigation--previous {\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%227%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cpath d%3D%22M0 1.5L1.5 0 5 3.5 8.5 0 10 1.5l-5 5z%22 fill%3D%22%231D9BD8%22 fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n border: 0;\n transform: rotate(90deg);\n}\n.cweb-datepicker-calendar .react-datepicker__navigation.react-datepicker__navigation--next {\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2210%22 height%3D%227%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cpath d%3D%22M0 1.5L1.5 0 5 3.5 8.5 0 10 1.5l-5 5z%22 fill%3D%22%231D9BD8%22 fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n border: 0;\n transform: rotate(-90deg);\n}\n.cweb-datepicker-calendar .react-datepicker__year-dropdown-container--select,\n.cweb-datepicker-calendar .react-datepicker__month-dropdown-container--select,\n.cweb-datepicker-calendar .react-datepicker__month-year-dropdown-container--select,\n.cweb-datepicker-calendar .react-datepicker__year-dropdown-container--scroll,\n.cweb-datepicker-calendar .react-datepicker__month-dropdown-container--scroll,\n.cweb-datepicker-calendar .react-datepicker__month-year-dropdown-container--scroll {\n margin: 2px;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-box {\n width: auto;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list {\n overflow-x: hidden;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item {\n font-family: \"Inter\", \"Roboto\", sans-serif;\n font-size: 14px;\n font-weight: normal;\n line-height: 19px;\n color: #1e293b;\n margin: 0;\n display: flex;\n justify-content: center;\n flex-direction: row;\n align-items: center;\n height: 40px !important;\n padding: 0 !important;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected {\n color: #ffffff;\n background-color: #1e40af !important;\n position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected:hover {\n background-color: #1e40af !important;\n}\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list-item.react-datepicker__time-list-item--selected:before {\n content: \"\";\n position: absolute;\n bottom: -3px;\n right: 0;\n left: initial;\n top: initial;\n border-style: solid;\n border-width: 6px 6px 6px 0;\n border-color: transparent #ffffff transparent transparent;\n transform: rotate(-135deg);\n}\n.cweb-datepicker-calendar .react-datepicker__header {\n padding-top: 0;\n border: none;\n background-color: #ffffff;\n font-size: 14px;\n padding-bottom: 0;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__current-month {\n font-family: \"Inter\", \"Roboto\", sans-serif;\n font-size: 14px;\n font-weight: 600;\n line-height: 19px;\n color: #2d2d2d;\n margin: 0;\n padding-top: 16px;\n padding-bottom: 16px;\n text-transform: capitalize;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__header__dropdown {\n margin-bottom: 15px;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select,\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select {\n font-family: \"Inter\", \"Roboto\", sans-serif;\n font-size: 14px;\n font-weight: normal;\n line-height: 19px;\n color: #1e293b;\n margin: 0;\n height: 44px;\n padding-left: 12px;\n border-radius: 4px;\n background: #ffffff url(\"data:image/svg+xml,%3Csvg width%3D%228%22 height%3D%2214%22 viewBox%3D%220 0 8 14%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M4 0C4.26522 5.96046e-08 4.51957 0.105357 4.70711 0.292893L7.70711 3.29289C8.09763 3.68342 8.09763 4.31658 7.70711 4.70711C7.31658 5.09763 6.68342 5.09763 6.29289 4.70711L4 2.41421L1.70711 4.70711C1.31658 5.09763 0.683417 5.09763 0.292893 4.70711C-0.0976311 4.31658 -0.097631 3.68342 0.292893 3.29289L3.29289 0.292893C3.48043 0.105357 3.73478 0 4 0ZM0.292893 9.29289C0.683417 8.90237 1.31658 8.90237 1.70711 9.29289L4 11.5858L6.29289 9.29289C6.68342 8.90237 7.31658 8.90237 7.70711 9.29289C8.09763 9.68342 8.09763 10.3166 7.70711 10.7071L4.70711 13.7071C4.31658 14.0976 3.68342 14.0976 3.29289 13.7071L0.292893 10.7071C-0.0976311 10.3166 -0.0976311 9.68342 0.292893 9.29289Z%22 fill%3D%22%239CA3AF%22%2F%3E%3C%2Fsvg%3E\") no-repeat right 8px center;\n text-transform: capitalize;\n -webkit-appearance: none;\n -moz-appearance: none;\n border: 1px solid #cccccc;\n transition: all 0.4s ease;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select:hover, .cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select:focus,\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select:hover,\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select:focus {\n color: #1e40af;\n border-color: #1e40af;\n cursor: pointer;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select {\n min-width: 172px;\n}\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select {\n min-width: 107px;\n}\n.cweb-datepicker-calendar .react-datepicker__header.react-datepicker__header--time {\n display: flex;\n justify-content: center;\n flex-direction: row;\n align-items: center;\n height: 52px;\n padding: 0;\n background-color: #f3f3f3;\n}\n.cweb-datepicker-calendar .react-datepicker__day-names,\n.cweb-datepicker-calendar .react-datepicker__month {\n margin: 0.4rem;\n}\n.cweb-datepicker-calendar .react-datepicker__day-names,\n.cweb-datepicker-calendar .react-datepicker__week {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.cweb-datepicker-calendar .react-datepicker__day-name,\n.cweb-datepicker-calendar .react-datepicker__day {\n font-family: \"Inter\", \"Roboto\", sans-serif;\n font-size: 14px;\n font-weight: normal;\n line-height: 19px;\n color: #1e293b;\n margin: 0;\n width: 41px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.cweb-datepicker-calendar .react-datepicker__day-name {\n height: 19px;\n text-transform: capitalize;\n}\n.cweb-datepicker-calendar .react-datepicker__day {\n height: 30px;\n border-radius: 4px;\n transition: background-color 0.3s ease-in-out;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted {\n background-color: #ffffff;\n color: #1e40af;\n position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted:after {\n content: \"\";\n position: absolute;\n width: 4px;\n height: 4px;\n border-radius: 50%;\n background-color: #1e40af;\n left: 0;\n right: 0;\n bottom: 2px;\n margin: 0 auto;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--selected:after, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--keyboard-selected:after, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--in-range:after {\n background-color: #ffffff;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--today {\n font-weight: bold;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--in-selecting-range {\n background-color: #e8f5fc;\n}\n.cweb-datepicker-calendar .react-datepicker__day:hover {\n background-color: #f8fafc;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--in-range, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--selected {\n color: #ffffff;\n background-color: #1e40af;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--in-range:hover, .cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--selected:hover {\n background-color: #1e40af;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--keyboard-selected {\n color: #ffffff;\n background-color: #1e40af;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--selected {\n position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-start {\n position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-start:before {\n content: \"\";\n position: absolute;\n top: -3px;\n left: 0;\n bottom: initial;\n right: initial;\n border-style: solid;\n border-width: 6px 6px 6px 0;\n border-color: transparent #ffffff transparent transparent;\n transform: rotate(45deg);\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-end {\n position: relative;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-end:before {\n content: \"\";\n position: absolute;\n bottom: -3px;\n right: 0;\n left: initial;\n top: initial;\n border-style: solid;\n border-width: 6px 6px 6px 0;\n border-color: transparent #ffffff transparent transparent;\n transform: rotate(-135deg);\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--disabled {\n color: #cccccc;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--disabled:hover {\n background-color: #ffffff;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--outside-month {\n color: #cccccc;\n}";
|
|
2818
|
-
styleInject(css_248z$
|
|
2817
|
+
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}";
|
|
2818
|
+
styleInject(css_248z$7);
|
|
2819
2819
|
|
|
2820
2820
|
function updateLocale(locale) {
|
|
2821
2821
|
const resolvedLocale = locale !== null && locale !== void 0 ? locale : "en-GB";
|
|
@@ -3501,8 +3501,8 @@ const PaginationMenuSmall = (props) => {
|
|
|
3501
3501
|
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 })] });
|
|
3502
3502
|
};
|
|
3503
3503
|
|
|
3504
|
-
var css_248z$
|
|
3505
|
-
styleInject(css_248z$
|
|
3504
|
+
var css_248z$6 = ".styled-select {\n appearance: none;\n}\n.styled-select::picker-icon {\n appearance: none;\n}";
|
|
3505
|
+
styleInject(css_248z$6);
|
|
3506
3506
|
|
|
3507
3507
|
const StyledSelect = React__namespace.default.forwardRef((_a, ref) => {
|
|
3508
3508
|
var { children, suffix, prefix, className, width = "full", height = "lg", isError } = _a, attributes = __rest(_a, ["children", "suffix", "prefix", "className", "width", "height", "isError"]);
|
|
@@ -4090,8 +4090,8 @@ const NavLayout = (props) => {
|
|
|
4090
4090
|
}), children })] })] })] }));
|
|
4091
4091
|
};
|
|
4092
4092
|
|
|
4093
|
-
var css_248z$
|
|
4094
|
-
styleInject(css_248z$
|
|
4093
|
+
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}";
|
|
4094
|
+
styleInject(css_248z$5);
|
|
4095
4095
|
|
|
4096
4096
|
function Page({
|
|
4097
4097
|
dataTestId = "page",
|
|
@@ -4435,8 +4435,8 @@ const Section = (_a) => {
|
|
|
4435
4435
|
}), children: isLoading ? null : children }), footer && jsxRuntime.jsx(SectionFooter, { children: footer })] }));
|
|
4436
4436
|
};
|
|
4437
4437
|
|
|
4438
|
-
var css_248z$
|
|
4439
|
-
styleInject(css_248z$
|
|
4438
|
+
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}";
|
|
4439
|
+
styleInject(css_248z$4);
|
|
4440
4440
|
|
|
4441
4441
|
const SectionItem = (props) => {
|
|
4442
4442
|
const { children, className, onClick } = props, rest = __rest(props, ["children", "className", "onClick"]);
|
|
@@ -4453,8 +4453,8 @@ function SectionItemWithContent(props) {
|
|
|
4453
4453
|
return jsxRuntime.jsxs(SectionItem, Object.assign({ className: mergedClasses, onClick }, rest, { children: [icon && jsxRuntime.jsx("img", { className: iconClasses, src: icon, alt: "" }), jsxRuntime.jsx(Text, { text })] }));
|
|
4454
4454
|
}
|
|
4455
4455
|
|
|
4456
|
-
var css_248z$
|
|
4457
|
-
styleInject(css_248z$
|
|
4456
|
+
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}";
|
|
4457
|
+
styleInject(css_248z$3);
|
|
4458
4458
|
|
|
4459
4459
|
const SelectDropdownIndicator = (props) => jsxRuntime.jsx(ReactSelect.components.DropdownIndicator, Object.assign({}, props, { children: jsxRuntime.jsx(ChevronDownIcon, {}) }));
|
|
4460
4460
|
|
|
@@ -4674,111 +4674,22 @@ const SettingsMenuButton = (props) => {
|
|
|
4674
4674
|
}), children: [menuTitle && jsxRuntime.jsx("div", { className: "ui:h-11 ui:w-full ui:bg-slate-50 ui:p-3", children: jsxRuntime.jsx(Text, { type: "sm", className: "ui:uppercase", text: menuTitle }) }), innerConfiguration.map((innerConfig) => jsxRuntime.jsxs("div", { className: "ui:flex ui:h-11 ui:w-full ui:items-center ui:justify-between ui:p-3", children: [jsxRuntime.jsx(Text, { text: innerConfig.itemName }), jsxRuntime.jsx(Checkbox, { name: innerConfig.itemName, id: innerConfig.itemId, type: "switch", isChecked: innerConfig.on, onChange: handleOnVisibilitySwitchChanged })] }, innerConfig.itemId))] })] });
|
|
4675
4675
|
};
|
|
4676
4676
|
|
|
4677
|
-
|
|
4678
|
-
|
|
4679
|
-
|
|
4680
|
-
|
|
4681
|
-
name:
|
|
4682
|
-
icon: PropTypes__default.default.shape({
|
|
4683
|
-
default: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.element]),
|
|
4684
|
-
active: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.element]),
|
|
4685
|
-
showBadge: PropTypes__default.default.bool
|
|
4686
|
-
}),
|
|
4687
|
-
index: PropTypes__default.default.number.isRequired,
|
|
4688
|
-
isSelected: PropTypes__default.default.bool,
|
|
4689
|
-
onSelect: PropTypes__default.default.func.isRequired,
|
|
4690
|
-
className: PropTypes__default.default.string
|
|
4677
|
+
const SwitcherItem = ({ className, icon, ariaLabel, isSelected = false, isLast = false, name, onSelect }) => {
|
|
4678
|
+
return jsxRuntime.jsx("li", { className: classNames__default.default("ui:flex ui:border-solid ui:border-border-neutral-secondary-default", { "ui:border-r": !isLast }), children: jsxRuntime.jsxs("button", { type: "button", "aria-pressed": isSelected, "aria-label": ariaLabel, onClick: onSelect, className: classNames__default.default("ui:flex ui:flex-row ui:cursor-pointer ui:appearance-none ui:items-center ui:gap-xxs ui:border-none ui:p-xxs", "ui:outline-none ui:transition ui:duration-150 ui:focus-visible:z-10 ui:focus-visible:ring-2 ui:focus-visible:ring-inset ui:focus-visible:ring-border-brand-primary-default", {
|
|
4679
|
+
"ui:bg-background-brand-secondary-default ui:text-text-brand-primary-default": isSelected,
|
|
4680
|
+
"ui:bg-background-neutral-secondary-default ui:text-text-neutral-secondary-default ui:hover:bg-background-neutral-secondary-hovered": !isSelected
|
|
4681
|
+
}, className), children: [icon && jsxRuntime.jsx(IconComponentOrKey, { name: icon }), name && jsxRuntime.jsx(Text, { text: name, color: "current" })] }) });
|
|
4691
4682
|
};
|
|
4692
|
-
function SwitcherItem({
|
|
4693
|
-
className,
|
|
4694
|
-
icon,
|
|
4695
|
-
index,
|
|
4696
|
-
isSelected = false,
|
|
4697
|
-
name,
|
|
4698
|
-
onSelect
|
|
4699
|
-
}) {
|
|
4700
|
-
const handleItemClick = () => onSelect(index);
|
|
4701
|
-
const itemClassName = classNames__default.default(
|
|
4702
|
-
"",
|
|
4703
|
-
className,
|
|
4704
|
-
"ui:flex ui:flex-row ui:h-11 ui:p-2 ui:items-center ui:border-solid ui:border-t ui:border-b ui:border-l ui:border-slate-200 ui:transition ui:duration-300 ui:cursor-pointer",
|
|
4705
|
-
"ui:first:rounded-l-xl ui:last:rounded-r-xl ui:last:border-r",
|
|
4706
|
-
{
|
|
4707
|
-
"ui:bg-slate-100 ui:text-slate-500": isSelected,
|
|
4708
|
-
"ui:bg-slate-50 ui:hover:bg-slate-100 ui:hover:text-slate-500 ui:text-slate-300": !isSelected
|
|
4709
|
-
}
|
|
4710
|
-
);
|
|
4711
|
-
let calculatedIcon;
|
|
4712
|
-
if (icon && typeof icon.default === "string") {
|
|
4713
|
-
calculatedIcon = isSelected ? /* @__PURE__ */ jsxRuntime.jsx("img", { alt: "", className: "", src: icon.active }) : /* @__PURE__ */ jsxRuntime.jsx("img", { alt: "", className: "", src: icon.default });
|
|
4714
|
-
} else if (icon) {
|
|
4715
|
-
calculatedIcon = isSelected ? icon.active : icon.default;
|
|
4716
|
-
}
|
|
4717
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: itemClassName, onClick: handleItemClick, children: [
|
|
4718
|
-
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ui:relative ui:block", children: [
|
|
4719
|
-
icon?.showBadge && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ui:absolute ui:right-0 ui:top-0 ui:h-2.5 ui:w-2.5 ui:rounded-xl ui:border-2 ui:border-slate-50 ui:bg-red-400" }),
|
|
4720
|
-
calculatedIcon
|
|
4721
|
-
] }),
|
|
4722
|
-
name && /* @__PURE__ */ jsxRuntime.jsx(Text, { text: name, color: isSelected ? "base" : "gray-500" })
|
|
4723
|
-
] });
|
|
4724
|
-
}
|
|
4725
4683
|
|
|
4726
|
-
|
|
4727
|
-
selectedIndex = -1,
|
|
4728
|
-
onChange,
|
|
4729
|
-
className,
|
|
4730
|
-
itemClassName,
|
|
4731
|
-
items
|
|
4732
|
-
}) {
|
|
4684
|
+
const Switcher = ({ selectedIndex = -1, onChange, className, itemClassName, items }) => {
|
|
4733
4685
|
const [currentSelection, setCurrentSelection] = React.useState(selectedIndex);
|
|
4734
4686
|
React.useEffect(() => {
|
|
4735
4687
|
setCurrentSelection(selectedIndex);
|
|
4736
4688
|
}, [selectedIndex]);
|
|
4737
|
-
|
|
4738
|
-
|
|
4739
|
-
|
|
4740
|
-
|
|
4741
|
-
"ul",
|
|
4742
|
-
{
|
|
4743
|
-
className: classNames__default.default(
|
|
4744
|
-
"cweb-switcher",
|
|
4745
|
-
className,
|
|
4746
|
-
"ui:m-0 ui:flex ui:list-none ui:p-0"
|
|
4747
|
-
),
|
|
4748
|
-
"data-test-id": "switcher-container",
|
|
4749
|
-
children: items.map((item, index) => {
|
|
4750
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
4751
|
-
SwitcherItem,
|
|
4752
|
-
{
|
|
4753
|
-
name: item.name,
|
|
4754
|
-
icon: item.icon,
|
|
4755
|
-
index,
|
|
4756
|
-
isSelected: currentSelection === index,
|
|
4757
|
-
onSelect: handleItemSelect,
|
|
4758
|
-
className: itemClassName
|
|
4759
|
-
},
|
|
4760
|
-
JSON.stringify(item)
|
|
4761
|
-
);
|
|
4762
|
-
})
|
|
4763
|
-
}
|
|
4764
|
-
);
|
|
4765
|
-
}
|
|
4766
|
-
Switcher.propTypes = {
|
|
4767
|
-
items: PropTypes__default.default.arrayOf(
|
|
4768
|
-
PropTypes__default.default.shape({
|
|
4769
|
-
name: PropTypes__default.default.string,
|
|
4770
|
-
icon: PropTypes__default.default.shape({
|
|
4771
|
-
default: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.element]),
|
|
4772
|
-
active: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.element]),
|
|
4773
|
-
showBadge: PropTypes__default.default.bool
|
|
4774
|
-
}),
|
|
4775
|
-
key: PropTypes__default.default.string
|
|
4776
|
-
})
|
|
4777
|
-
).isRequired,
|
|
4778
|
-
onChange: PropTypes__default.default.func.isRequired,
|
|
4779
|
-
selectedIndex: PropTypes__default.default.number,
|
|
4780
|
-
className: PropTypes__default.default.string,
|
|
4781
|
-
itemClassName: PropTypes__default.default.string
|
|
4689
|
+
return jsxRuntime.jsx("ul", { role: "group", className: classNames__default.default("ui:m-0 ui:flex ui:w-fit ui:list-none ui:items-center ui:overflow-hidden ui:p-0", "ui:radius-xxxxs ui:border ui:border-solid ui:border-border-neutral-secondary-default", className), "data-test-id": "switcher-container", children: items.map((item, index) => {
|
|
4690
|
+
var _a;
|
|
4691
|
+
return jsxRuntime.jsx(SwitcherItem, { name: item.name, icon: item.icon, ariaLabel: item["aria-label"], isSelected: currentSelection === index, isLast: index === items.length - 1, onSelect: () => onChange(index), className: itemClassName }, (_a = item.name) !== null && _a !== void 0 ? _a : item["aria-label"]);
|
|
4692
|
+
}) });
|
|
4782
4693
|
};
|
|
4783
4694
|
|
|
4784
4695
|
const Switch = (props) => {
|