@luscii-healthtech/web-ui 54.7.2 → 55.0.1
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 +46 -57
- 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/Heading/Heading.d.ts +0 -1
- package/dist/src/components/PageHeader/PageHeader.types.d.ts +24 -3
- package/dist/src/generated/components/Heading/Heading.d.ts +0 -1
- package/dist/src/generated/components/PageHeader/PageHeader.types.d.ts +24 -3
- package/dist/src/generated/index.d.ts +0 -1
- package/dist/src/index.d.ts +0 -1
- package/dist/stories/Tabs.stories.d.ts +14 -22
- package/dist/web-ui-tailwind.css +0 -6
- package/dist/web-ui.esm.js +1 -1
- package/dist/web-ui.esm.js.map +1 -1
- package/package.json +1 -1
- package/dist/src/components/Tabbar/Tabbar.d.ts +0 -38
- package/dist/src/components/Tabbar/TabbarItem.d.ts +0 -22
- package/dist/src/generated/components/Tabbar/Tabbar.d.ts +0 -38
- package/dist/src/generated/components/Tabbar/TabbarItem.d.ts +0 -22
- package/dist/stories/Tabbar.stories.d.ts +0 -16
|
@@ -227,8 +227,8 @@ function styleInject(css, ref) {
|
|
|
227
227
|
}
|
|
228
228
|
}
|
|
229
229
|
|
|
230
|
-
var css_248z$
|
|
231
|
-
styleInject(css_248z$
|
|
230
|
+
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";
|
|
231
|
+
styleInject(css_248z$b);
|
|
232
232
|
|
|
233
233
|
const newVariants = /* @__PURE__ */ new Set([
|
|
234
234
|
"body-base-light",
|
|
@@ -1020,8 +1020,8 @@ toast.info = (message) => {
|
|
|
1020
1020
|
showToaster({ message, type: "success", showIcon: true, title: "" });
|
|
1021
1021
|
};
|
|
1022
1022
|
|
|
1023
|
-
var css_248z$
|
|
1024
|
-
styleInject(css_248z$
|
|
1023
|
+
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}";
|
|
1024
|
+
styleInject(css_248z$a);
|
|
1025
1025
|
|
|
1026
1026
|
const Title = (props) => {
|
|
1027
1027
|
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) => {
|
|
|
1097
1097
|
return (stringToSearch === null || stringToSearch === void 0 ? void 0 : stringToSearch.indexOf(searchTermWithCase)) > -1;
|
|
1098
1098
|
};
|
|
1099
1099
|
|
|
1100
|
-
var css_248z$
|
|
1101
|
-
styleInject(css_248z$
|
|
1100
|
+
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}";
|
|
1101
|
+
styleInject(css_248z$9);
|
|
1102
1102
|
|
|
1103
1103
|
const ListItemSkeleton = () => {
|
|
1104
1104
|
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:
|
|
|
1970
1970
|
|
|
1971
1971
|
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";
|
|
1972
1972
|
|
|
1973
|
-
var css_248z$
|
|
1974
|
-
styleInject(css_248z$
|
|
1973
|
+
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}";
|
|
1974
|
+
styleInject(css_248z$8);
|
|
1975
1975
|
|
|
1976
1976
|
function LoadingIndicator(_a) {
|
|
1977
1977
|
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 }) => {
|
|
|
2426
2426
|
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 }) })] }) });
|
|
2427
2427
|
};
|
|
2428
2428
|
|
|
2429
|
-
var css_248z$
|
|
2430
|
-
styleInject(css_248z$
|
|
2429
|
+
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}";
|
|
2430
|
+
styleInject(css_248z$7);
|
|
2431
2431
|
|
|
2432
2432
|
const CheckboxInner = (props) => {
|
|
2433
2433
|
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 = {
|
|
|
2824
2824
|
"pt-PT": pt.pt
|
|
2825
2825
|
};
|
|
2826
2826
|
|
|
2827
|
-
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}";
|
|
2828
|
-
styleInject(css_248z$
|
|
2827
|
+
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}";
|
|
2828
|
+
styleInject(css_248z$6);
|
|
2829
2829
|
|
|
2830
2830
|
function updateLocale(locale) {
|
|
2831
2831
|
const resolvedLocale = locale !== null && locale !== void 0 ? locale : "en-GB";
|
|
@@ -3515,8 +3515,8 @@ const PaginationMenuSmall = (props) => {
|
|
|
3515
3515
|
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 })] });
|
|
3516
3516
|
};
|
|
3517
3517
|
|
|
3518
|
-
var css_248z$
|
|
3519
|
-
styleInject(css_248z$
|
|
3518
|
+
var css_248z$5 = ".styled-select {\n appearance: none;\n}\n.styled-select::picker-icon {\n appearance: none;\n}";
|
|
3519
|
+
styleInject(css_248z$5);
|
|
3520
3520
|
|
|
3521
3521
|
const StyledSelect = React__namespace.default.forwardRef((_a, ref) => {
|
|
3522
3522
|
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) => {
|
|
|
4104
4104
|
}), children })] })] })] }));
|
|
4105
4105
|
};
|
|
4106
4106
|
|
|
4107
|
-
var css_248z$
|
|
4108
|
-
styleInject(css_248z$
|
|
4107
|
+
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}";
|
|
4108
|
+
styleInject(css_248z$4);
|
|
4109
4109
|
|
|
4110
4110
|
function Page({
|
|
4111
4111
|
dataTestId = "page",
|
|
@@ -4284,31 +4284,6 @@ const Breadcrumbs = ({
|
|
|
4284
4284
|
return jsxRuntime.jsx("ul", { "data-test-id": "breadcrumbs", className: "ui:flex ui:flex-row ui:flex-wrap ui:items-center", children: (isTruncated ? crumbsAndDivider : crumbs).map((crumbOrDividerProps) => isBreadcrumbDividerProps(crumbOrDividerProps) ? jsxRuntime.jsx(BreadcrumbDividerItem, Object.assign({}, crumbOrDividerProps), `divider-${truncatedCrumbs.map((crumb) => crumb.name).join("-")}`) : jsxRuntime.jsx(BreadcrumbItem, Object.assign({}, crumbOrDividerProps, { render: renderItem }), crumbOrDividerProps.key || crumbOrDividerProps.name)) });
|
|
4285
4285
|
};
|
|
4286
4286
|
|
|
4287
|
-
const TabbarItem = ({ title, index, isSelected, onSelect, className, badgeCount = 0, isLoading = false, dataTestId = "" }) => {
|
|
4288
|
-
const handleTabClick = () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(index);
|
|
4289
|
-
const itemClassName = classNames__default.default("ui:flex ui:items-center ui:py-m", "ui:border-b-2 ui:hover:text-primary", "ui:transition ui:ease-in ui:duration-150", className, {
|
|
4290
|
-
"ui:border-b-transparent ui:text-on-surface": !isSelected,
|
|
4291
|
-
"ui:border-b-primary ui:text-primary": isSelected
|
|
4292
|
-
});
|
|
4293
|
-
return jsxRuntime.jsxs("button", { className: itemClassName, onClick: handleTabClick, "data-test-id": dataTestId, role: "tab", "aria-selected": isSelected, children: [typeof title === "string" ? jsxRuntime.jsx(Text, { variant: "strong", color: "current", as: "span", className: "ui:leading-inherit", children: title }) : title, badgeCount > 0 && jsxRuntime.jsx(Badge, { className: "ui:ml-1", children: badgeCount }), isLoading && jsxRuntime.jsx(LoadingIndicator, { asSpinner: true, spinnerColor: "gray", className: "ui:w-6" })] });
|
|
4294
|
-
};
|
|
4295
|
-
|
|
4296
|
-
const Tabbar = ({ tabs = [], selectedIndex, onSelect, className }) => {
|
|
4297
|
-
const [innerSelectedIndex, setInnerSelectedIndex] = React.useState(selectedIndex);
|
|
4298
|
-
React.useEffect(() => {
|
|
4299
|
-
setInnerSelectedIndex(selectedIndex);
|
|
4300
|
-
}, [selectedIndex]);
|
|
4301
|
-
const handleOnTabSelect = (index) => {
|
|
4302
|
-
setInnerSelectedIndex(index);
|
|
4303
|
-
onSelect === null || onSelect === void 0 ? void 0 : onSelect({ index, selectedTab: tabs[index] });
|
|
4304
|
-
};
|
|
4305
|
-
return jsxRuntime.jsx("div", { className: classNames__default.default("ui:flex ui:w-full ui:gap-xl", className), role: "tablist", children: tabs === null || tabs === void 0 ? void 0 : tabs.map((tabItemProps, index) => {
|
|
4306
|
-
var _a;
|
|
4307
|
-
const itemProps = Object.assign({ index, onSelect: handleOnTabSelect, isSelected: innerSelectedIndex === index }, tabItemProps);
|
|
4308
|
-
return jsxRuntime.jsx(TabbarItem, Object.assign({}, itemProps), (_a = tabItemProps.dataTestId) !== null && _a !== void 0 ? _a : index);
|
|
4309
|
-
}) });
|
|
4310
|
-
};
|
|
4311
|
-
|
|
4312
4287
|
const PageTitle = (props) => {
|
|
4313
4288
|
const { as: Component = "h2", className } = props, rest = __rest(props, ["as", "className"]);
|
|
4314
4289
|
return jsxRuntime.jsx(Component, Object.assign({}, rest, { className: classNames__default.default(
|
|
@@ -4324,19 +4299,37 @@ const PageTitle = (props) => {
|
|
|
4324
4299
|
};
|
|
4325
4300
|
|
|
4326
4301
|
const PageHeader = ({ navigation, breadcrumbs, dataTestId, accessories, isPolling, title, contained, className, truncateBreadcrumbsAfter, renderBreadcrumbItem, banner }) => {
|
|
4327
|
-
var _a;
|
|
4302
|
+
var _a, _b;
|
|
4328
4303
|
const withContained = { "ui:max-w-3xl ui:m-auto": contained };
|
|
4329
|
-
const
|
|
4304
|
+
const hasTabs = Boolean((_a = navigation === null || navigation === void 0 ? void 0 : navigation.tabs) === null || _a === void 0 ? void 0 : _a.length);
|
|
4330
4305
|
return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { "data-test-id": "page-header", className: classNames__default.default("ui:pt-xl", className, {
|
|
4331
4306
|
/**
|
|
4332
4307
|
* The tab bar should sit snugly against the bottom of the page header, but
|
|
4333
4308
|
* this is the only exception. Other than that the page header should have
|
|
4334
4309
|
* a bottom padding.
|
|
4335
4310
|
*/
|
|
4336
|
-
"ui:pb-l": !
|
|
4311
|
+
"ui:pb-l": !hasTabs,
|
|
4337
4312
|
"ui:px-xl": !contained,
|
|
4338
4313
|
"ui:w-full": contained
|
|
4339
|
-
}), children: [banner && jsxRuntime.jsx(NotificationBanner, { noBorder: banner.noBorder, color: banner.color, "data-test-id": `page-header-banner-${title}`, className: "ui:mb-m", icon: banner.icon, children: jsxRuntime.jsxs("div", { className: "ui:flex ui:flex-col", children: [banner.title && jsxRuntime.jsx(Text, { color: "current", variant: "strong", children: banner.title }), jsxRuntime.jsx(Text, { color: "current", containsDangerousHtml: banner.text.isHTML, children: banner.text.content })] }) }), jsxRuntime.jsxs("div", { className: classNames__default.default({ "ui:flex ui:flex-col": !contained }), children: [!!(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && jsxRuntime.jsx("div", { className: classNames__default.default("ui:mb-m", withContained), children: jsxRuntime.jsx(Breadcrumbs, { crumbs: breadcrumbs, truncateAfter: truncateBreadcrumbsAfter, renderItem: renderBreadcrumbItem }) }), jsxRuntime.jsxs("div", { className: classNames__default.default("ui:flex ui:flex-row ui:items-center ui:justify-between", withContained), children: [jsxRuntime.jsxs("div", { className: "ui:flex ui:flex-row ui:items-center ui:gap-xxs", children: [typeof title === "string" ? jsxRuntime.jsx(PageTitle, { "data-test-id": `${dataTestId}-title`, children: title }) : jsxRuntime.jsx(Box, { width: "full", children: title }), isPolling && jsxRuntime.jsx(LoadingIndicator, { asSpinner: true, className: "page-spinner", spinnerColor: "gray" })] }), accessories && jsxRuntime.jsx("div", { "data-test-id": "page-header-accessories", children: accessories })] })] }), navigation && jsxRuntime.jsx(
|
|
4314
|
+
}), children: [banner && jsxRuntime.jsx(NotificationBanner, { noBorder: banner.noBorder, color: banner.color, "data-test-id": `page-header-banner-${title}`, className: "ui:mb-m", icon: banner.icon, children: jsxRuntime.jsxs("div", { className: "ui:flex ui:flex-col", children: [banner.title && jsxRuntime.jsx(Text, { color: "current", variant: "strong", children: banner.title }), jsxRuntime.jsx(Text, { color: "current", containsDangerousHtml: banner.text.isHTML, children: banner.text.content })] }) }), jsxRuntime.jsxs("div", { className: classNames__default.default({ "ui:flex ui:flex-col": !contained }), children: [!!(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && jsxRuntime.jsx("div", { className: classNames__default.default("ui:mb-m", withContained), children: jsxRuntime.jsx(Breadcrumbs, { crumbs: breadcrumbs, truncateAfter: truncateBreadcrumbsAfter, renderItem: renderBreadcrumbItem }) }), jsxRuntime.jsxs("div", { className: classNames__default.default("ui:flex ui:flex-row ui:items-center ui:justify-between", withContained), children: [jsxRuntime.jsxs("div", { className: "ui:flex ui:flex-row ui:items-center ui:gap-xxs", children: [typeof title === "string" ? jsxRuntime.jsx(PageTitle, { "data-test-id": `${dataTestId}-title`, children: title }) : jsxRuntime.jsx(Box, { width: "full", children: title }), isPolling && jsxRuntime.jsx(LoadingIndicator, { asSpinner: true, className: "page-spinner", spinnerColor: "gray" })] }), accessories && jsxRuntime.jsx("div", { "data-test-id": "page-header-accessories", children: accessories })] })] }), navigation && jsxRuntime.jsx(Tabs.Root, { value: navigation.selectedIndex !== void 0 ? String(navigation.selectedIndex) : "", onValueChange: (value) => {
|
|
4315
|
+
var _a2, _b2;
|
|
4316
|
+
const index = Number(value);
|
|
4317
|
+
const selectedTab = (_a2 = navigation.tabs) === null || _a2 === void 0 ? void 0 : _a2[index];
|
|
4318
|
+
if (selectedTab) {
|
|
4319
|
+
(_b2 = navigation.onSelect) === null || _b2 === void 0 ? void 0 : _b2.call(navigation, { index, selectedTab });
|
|
4320
|
+
}
|
|
4321
|
+
}, children: jsxRuntime.jsx(
|
|
4322
|
+
Tabs.List,
|
|
4323
|
+
{
|
|
4324
|
+
// Keep the page-header tab row left-aligned and full width
|
|
4325
|
+
// (the shared Tabs.List defaults to a centered inline-flex row).
|
|
4326
|
+
className: classNames__default.default("ui:flex ui:w-full ui:justify-start", navigation.className, withContained),
|
|
4327
|
+
children: (_b = navigation.tabs) === null || _b === void 0 ? void 0 : _b.map((tab, index) => {
|
|
4328
|
+
var _a2;
|
|
4329
|
+
return jsxRuntime.jsxs(Tabs.Trigger, { value: String(index), "data-test-id": tab.dataTestId, children: [typeof tab.title === "string" ? jsxRuntime.jsx(Tabs.LabelText, { children: tab.title }) : tab.title, tab.badgeCount !== void 0 && tab.badgeCount > 0 && jsxRuntime.jsx(Badge, { className: "ui:ml-1", children: tab.badgeCount }), tab.isLoading && jsxRuntime.jsx(LoadingIndicator, { asSpinner: true, spinnerColor: "gray", className: "ui:w-6" })] }, (_a2 = tab.dataTestId) !== null && _a2 !== void 0 ? _a2 : index);
|
|
4330
|
+
})
|
|
4331
|
+
}
|
|
4332
|
+
) })] }), jsxRuntime.jsx(Divider, { version: "v2" })] });
|
|
4340
4333
|
};
|
|
4341
4334
|
|
|
4342
4335
|
const CRUDPage = ({ submitButtonProps, cancelButtonProps, className, children, isLoading, isSubmitting, dataTestId = "page", title, header, steps, isMobileFriendly, belowHeader, accessory }) => {
|
|
@@ -4449,8 +4442,8 @@ const Section = (_a) => {
|
|
|
4449
4442
|
}), children: isLoading ? null : children }), footer && jsxRuntime.jsx(SectionFooter, { children: footer })] }));
|
|
4450
4443
|
};
|
|
4451
4444
|
|
|
4452
|
-
var css_248z$
|
|
4453
|
-
styleInject(css_248z$
|
|
4445
|
+
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}";
|
|
4446
|
+
styleInject(css_248z$3);
|
|
4454
4447
|
|
|
4455
4448
|
const SectionItem = (props) => {
|
|
4456
4449
|
const { children, className, onClick } = props, rest = __rest(props, ["children", "className", "onClick"]);
|
|
@@ -4467,8 +4460,8 @@ function SectionItemWithContent(props) {
|
|
|
4467
4460
|
return jsxRuntime.jsxs(SectionItem, Object.assign({ className: mergedClasses, onClick }, rest, { children: [icon && jsxRuntime.jsx("img", { className: iconClasses, src: icon, alt: "" }), jsxRuntime.jsx(Text, { text })] }));
|
|
4468
4461
|
}
|
|
4469
4462
|
|
|
4470
|
-
var css_248z$
|
|
4471
|
-
styleInject(css_248z$
|
|
4463
|
+
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}";
|
|
4464
|
+
styleInject(css_248z$2);
|
|
4472
4465
|
|
|
4473
4466
|
const SelectDropdownIndicator = (props) => jsxRuntime.jsx(ReactSelect.components.DropdownIndicator, Object.assign({}, props, { children: jsxRuntime.jsx(ChevronDownIcon, {}) }));
|
|
4474
4467
|
|
|
@@ -5042,8 +5035,8 @@ const MediaPicker = React__namespace.default.forwardRef((props, ref) => {
|
|
|
5042
5035
|
|
|
5043
5036
|
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)))] });
|
|
5044
5037
|
|
|
5045
|
-
var css_248z$
|
|
5046
|
-
styleInject(css_248z$
|
|
5038
|
+
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}";
|
|
5039
|
+
styleInject(css_248z$1);
|
|
5047
5040
|
|
|
5048
5041
|
const resizeTypes = {
|
|
5049
5042
|
BOTH: "both",
|
|
@@ -5468,8 +5461,8 @@ const getTextEditorTranslations = (locale) => {
|
|
|
5468
5461
|
return TEXT_EDITOR_TRANSLATIONS[locale] || TEXT_EDITOR_TRANSLATIONS["en-GB"];
|
|
5469
5462
|
};
|
|
5470
5463
|
|
|
5471
|
-
var css_248z
|
|
5472
|
-
styleInject(css_248z
|
|
5464
|
+
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}";
|
|
5465
|
+
styleInject(css_248z);
|
|
5473
5466
|
|
|
5474
5467
|
const MentionWithTooltip = extensionMention.Mention.extend({
|
|
5475
5468
|
addNodeView() {
|
|
@@ -5595,9 +5588,6 @@ const TextLink = (props) => {
|
|
|
5595
5588
|
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 });
|
|
5596
5589
|
};
|
|
5597
5590
|
|
|
5598
|
-
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";
|
|
5599
|
-
styleInject(css_248z);
|
|
5600
|
-
|
|
5601
5591
|
const variantClasses = {
|
|
5602
5592
|
h1: "ui-typo-h1 ui:text-text-brand-primary-default",
|
|
5603
5593
|
h2: "ui-typo-h2 ui:text-text-neutral-primary-default",
|
|
@@ -7358,7 +7348,6 @@ exports.SummaryIcon = SummaryIcon;
|
|
|
7358
7348
|
exports.Switch = Switch;
|
|
7359
7349
|
exports.Switcher = Switcher;
|
|
7360
7350
|
exports.TOASTER_TYPE_OPTIONS = TOASTER_TYPE_OPTIONS;
|
|
7361
|
-
exports.Tabbar = Tabbar;
|
|
7362
7351
|
exports.Table = Table;
|
|
7363
7352
|
exports.TableNew = TableNew;
|
|
7364
7353
|
exports.Tabs = Tabs;
|