@luscii-healthtech/web-ui 25.6.1 → 26.0.0
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/components/DatepickerV2/Datepicker.d.ts +1 -1
- package/dist/index.development.js +34 -30
- package/dist/index.development.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/web-ui.esm.js +1 -1
- package/dist/web-ui.esm.js.map +1 -1
- package/package.json +2 -2
|
@@ -865,8 +865,8 @@ function styleInject(css, ref) {
|
|
|
865
865
|
}
|
|
866
866
|
}
|
|
867
867
|
|
|
868
|
-
var css_248z$
|
|
869
|
-
styleInject(css_248z$
|
|
868
|
+
var css_248z$m = "/* 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";
|
|
869
|
+
styleInject(css_248z$m);
|
|
870
870
|
|
|
871
871
|
const allowedTextStyles = {
|
|
872
872
|
sm: "ui-text-xs ui-font-medium",
|
|
@@ -1009,8 +1009,8 @@ toast.info = (message) => {
|
|
|
1009
1009
|
showToaster({ message, type: "success", showIcon: true, title: "" });
|
|
1010
1010
|
};
|
|
1011
1011
|
|
|
1012
|
-
var css_248z$
|
|
1013
|
-
styleInject(css_248z$
|
|
1012
|
+
var css_248z$l = "/**\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}";
|
|
1013
|
+
styleInject(css_248z$l);
|
|
1014
1014
|
|
|
1015
1015
|
const Title = (props) => {
|
|
1016
1016
|
var _a, _b;
|
|
@@ -1093,8 +1093,8 @@ const Accordion = ({ dataTestId, isCollapsedByDefault = false, items, className,
|
|
|
1093
1093
|
);
|
|
1094
1094
|
};
|
|
1095
1095
|
|
|
1096
|
-
var css_248z$
|
|
1097
|
-
styleInject(css_248z$
|
|
1096
|
+
var css_248z$k = ".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}";
|
|
1097
|
+
styleInject(css_248z$k);
|
|
1098
1098
|
|
|
1099
1099
|
const ListItemSkeleton = () => {
|
|
1100
1100
|
return React__namespace.default.createElement(
|
|
@@ -1319,8 +1319,8 @@ const DraggableBaseList = (_a) => {
|
|
|
1319
1319
|
return React__namespace.default.createElement(BaseList, Object.assign({}, props, { items, itemComponent: DraggableBaseListItem }));
|
|
1320
1320
|
};
|
|
1321
1321
|
|
|
1322
|
-
var css_248z$
|
|
1323
|
-
styleInject(css_248z$
|
|
1322
|
+
var css_248z$j = ".dropzone-dashed-border {\n border-image: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2224%22 height%3D%2224%22 fill%3D%22none%22%3E %3Cpath fill%3D%22%230074DD%22 fill-rule%3D%22evenodd%22 d%3D%22M8 0v1h8V0H8Zm0 23v1h8v-1H8ZM0 8h1v8H0V8Zm24 0h-1v8h1V8ZM1 0h3v1H1v3H0V0h1ZM0 23v-3h1v3h3v1H0v-1Zm20 0v1h4v-4h-1v3h-3Zm0-22V0h4v4h-1V1h-3Z%22 clip-rule%3D%22evenodd%22 %2F%3E%3C%2Fsvg%3E\") 1 1 1 1;\n border-image-width: 4px;\n border-image-slice: 4 4 4 4;\n border-image-repeat: round;\n}";
|
|
1323
|
+
styleInject(css_248z$j);
|
|
1324
1324
|
|
|
1325
1325
|
const DefaultState = ({ icon, message, horizontal = false, alignMessage = "center" }) => {
|
|
1326
1326
|
if (!icon && !message) {
|
|
@@ -1401,8 +1401,8 @@ const SortableBaseList = (_a) => {
|
|
|
1401
1401
|
);
|
|
1402
1402
|
};
|
|
1403
1403
|
|
|
1404
|
-
var css_248z$
|
|
1405
|
-
styleInject(css_248z$
|
|
1404
|
+
var css_248z$i = "li.gu-mirror {\n position: fixed;\n z-index: 9999;\n margin: 0px;\n --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)\n}\nli.gu-hide {\n display: none\n}\nli.gu-unselectable {\n user-select: none\n}\nli.gu-transit {\n --tw-bg-opacity: 1;\n background-color: rgb(239 246 255 / var(--tw-bg-opacity));\n filter: none;\n border-radius: 0px;\n border-style: none;\n opacity: 1\n}\nli.gu-transit > * {\n visibility: hidden\n}";
|
|
1405
|
+
styleInject(css_248z$i);
|
|
1406
1406
|
|
|
1407
1407
|
const ListItem = (props) => {
|
|
1408
1408
|
return React__namespace.default.createElement(BaseListItem, Object.assign({}, props));
|
|
@@ -1454,8 +1454,8 @@ const List = (props) => {
|
|
|
1454
1454
|
return React__namespace.default.createElement(DefaultList, Object.assign({}, props));
|
|
1455
1455
|
};
|
|
1456
1456
|
|
|
1457
|
-
var css_248z$
|
|
1458
|
-
styleInject(css_248z$
|
|
1457
|
+
var css_248z$h = ".input::-ms-clear {\n display: none;\n}";
|
|
1458
|
+
styleInject(css_248z$h);
|
|
1459
1459
|
|
|
1460
1460
|
const StyledInput = React__namespace.default.forwardRef((_a, ref) => {
|
|
1461
1461
|
var { suffix, prefix, className, width = "full", icon, isError, isClearIconVisible, onClickClearField } = _a, attributes = __rest(_a, ["suffix", "prefix", "className", "width", "icon", "isError", "isClearIconVisible", "onClickClearField"]);
|
|
@@ -1702,8 +1702,8 @@ var img$e = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' xmlns:
|
|
|
1702
1702
|
|
|
1703
1703
|
var img$d = "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";
|
|
1704
1704
|
|
|
1705
|
-
var css_248z$
|
|
1706
|
-
styleInject(css_248z$
|
|
1705
|
+
var css_248z$g = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.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}";
|
|
1706
|
+
styleInject(css_248z$g);
|
|
1707
1707
|
|
|
1708
1708
|
function LoadingIndicator(_a) {
|
|
1709
1709
|
var { asModal = false, asSpinner = false, className = "", spinnerColor = "blue", dataTestId = "loading-indicator" } = _a, restProps = __rest(_a, ["asModal", "asSpinner", "className", "spinnerColor", "dataTestId"]);
|
|
@@ -2343,8 +2343,8 @@ const Badge = (props) => {
|
|
|
2343
2343
|
);
|
|
2344
2344
|
};
|
|
2345
2345
|
|
|
2346
|
-
var css_248z$
|
|
2347
|
-
styleInject(css_248z$
|
|
2346
|
+
var css_248z$f = ".entity-preview-dots.glider-dots {\n padding-top: 1rem;\n}\n.entity-preview-dots.glider-dots .glider-dot {\n margin: 0.25rem;\n height: 0.5rem;\n width: 0.5rem;\n --tw-bg-opacity: 1;\n background-color: rgb(239 246 255 / var(--tw-bg-opacity));\n}\n.entity-preview-dots.glider-dots .glider-dot:focus {\n outline-color: #1e40af;\n}\n.entity-preview-dots.glider-dots .glider-dot.active, .entity-preview-dots.glider-dots .glider-dot:focus {\n --tw-bg-opacity: 1;\n background-color: rgb(30 64 175 / var(--tw-bg-opacity));\n}\n\n.glider-slide {\n visibility: hidden;\n}\n\n.glider-slide.visible,\n.glider-slide.active {\n visibility: visible;\n}";
|
|
2347
|
+
styleInject(css_248z$f);
|
|
2348
2348
|
|
|
2349
2349
|
const GliderContainer = (props) => React__namespace.default.createElement(
|
|
2350
2350
|
"div",
|
|
@@ -2396,8 +2396,8 @@ const Carousel = ({ slides, className, id }) => {
|
|
|
2396
2396
|
) : React__namespace.default.createElement(React__namespace.default.Fragment, null);
|
|
2397
2397
|
};
|
|
2398
2398
|
|
|
2399
|
-
var css_248z$
|
|
2400
|
-
styleInject(css_248z$
|
|
2399
|
+
var css_248z$e = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.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 width: 16px;\n height: 16px;\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: #ff6266;\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 width: 0.5rem;\n height: 0.5rem;\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}\n.cweb-checkbox.type-switch .cweb-checkbox-label {\n display: flex;\n align-items: center;\n margin-bottom: 0;\n width: 56px;\n height: 28px;\n position: relative;\n}\n.cweb-checkbox.type-switch .cweb-checkbox-icon-container {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #d1d5db;\n border-radius: 16px;\n}\n.cweb-checkbox.type-switch .cweb-checkbox-icon-container:after {\n position: relative;\n display: block;\n content: \"\";\n height: 20px;\n width: 20px;\n top: 4px;\n left: 4px;\n background-color: white;\n border-radius: 50%;\n}\n.cweb-checkbox.type-switch.is-checked .cweb-checkbox-icon-container {\n background-color: #6abfa6;\n}\n.cweb-checkbox.type-switch.is-checked .cweb-checkbox-icon-container:after {\n left: 32px;\n}";
|
|
2400
|
+
styleInject(css_248z$e);
|
|
2401
2401
|
|
|
2402
2402
|
const CheckboxInner = (props) => {
|
|
2403
2403
|
const { id, explanation, type = "regular", isChecked = false, isIndeterminate = false, isDisabled, name, value, onChange, className, classNameCheckboxLabel, error, innerRef } = props;
|
|
@@ -2521,8 +2521,8 @@ const TextLink = (props) => {
|
|
|
2521
2521
|
return React__namespace.default.createElement("a", { href: props.href, rel: props.rel, target: props.target, onClick: props.onClick, className: classNames__default.default(className, props.className) }, props.text);
|
|
2522
2522
|
};
|
|
2523
2523
|
|
|
2524
|
-
var css_248z$
|
|
2525
|
-
styleInject(css_248z$
|
|
2524
|
+
var css_248z$d = "/* Overrides for components we cannot control inside the notification banner component */\n\n[data-test-id=\"notification-banner\"] a {\n\n --tw-text-opacity: 1;\n\n color: rgb(30 64 175 / var(--tw-text-opacity))\n}\n\n[data-test-id=\"notification-banner\"] a:hover {\n\n --tw-text-opacity: 1;\n\n color: rgb(30 58 138 / var(--tw-text-opacity))\n}\n";
|
|
2525
|
+
styleInject(css_248z$d);
|
|
2526
2526
|
|
|
2527
2527
|
const NotificationBanner = (props) => {
|
|
2528
2528
|
const { stretch = true, centerContent = false, noBorder = false } = props;
|
|
@@ -2571,8 +2571,8 @@ NotificationBanner.defaultProps = {
|
|
|
2571
2571
|
onButtonClick: void 0
|
|
2572
2572
|
};
|
|
2573
2573
|
|
|
2574
|
-
var css_248z$
|
|
2575
|
-
styleInject(css_248z$
|
|
2574
|
+
var css_248z$c = ".ui-radio-form-field-label input[type=\"radio\"]:checked + .ui-radio-circle {\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(30 64 175 / var(--tw-bg-opacity))\n}\n\n.ui-radio-form-field-label[data-has-error=\"true\"] .ui-radio-circle {\n\n --tw-border-opacity: 1;\n\n border-color: rgb(197 48 48 / var(--tw-border-opacity));\n\n outline-color: #FFF1F1\n}\n\n.ui-radio-form-field-label\n input[type=\"radio\"]:checked\n + .ui-radio-circle\n .ui-radio-inner-circle {\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(255 255 255 / var(--tw-bg-opacity))\n}\n";
|
|
2575
|
+
styleInject(css_248z$c);
|
|
2576
2576
|
|
|
2577
2577
|
function RadioInner(_a) {
|
|
2578
2578
|
var { text, info, isError, innerRef, className, name } = _a, otherProps = __rest(_a, ["text", "info", "isError", "innerRef", "className", "name"]);
|
|
@@ -2706,8 +2706,8 @@ const ConfirmationDialog = (_a) => {
|
|
|
2706
2706
|
);
|
|
2707
2707
|
};
|
|
2708
2708
|
|
|
2709
|
-
var css_248z$a = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.cweb-datepicker {\n width: 182px;\n height: 44px;\n border: 1px solid #cccccc;\n border-radius: 4px;\n background-color: #ffffff;\n outline: none;\n padding: 12px 12px 11px 12px;\n}\n.cweb-datepicker input.cweb-datepicker {\n font-size: 14px;\n}\n.cweb-datepicker::placeholder {\n color: #64748b;\n}\n.cweb-datepicker:-ms-input-placeholder {\n color: #64748b !important;\n}\n.cweb-datepicker::-ms-input-placeholder {\n color: #64748b;\n}\n\n.react-datepicker-popper {\n z-index: 5;\n}\n.react-datepicker-popper[data-placement^=bottom] {\n margin-top: 4px;\n}\n.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle.react-datepicker__triangle {\n border-bottom-color: #ffffff;\n margin-top: -4px;\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}\n\n.cweb-datepicker-calendar {\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\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@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 .react-datepicker__triangle {\n left: 10px;\n border: 6px solid transparent;\n}\n.cweb-datepicker-calendar .react-datepicker__navigation {\n top: 19px;\n width: 19px;\n height: 10px;\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}\n.cweb-datepicker-calendar .react-datepicker__navigation.react-datepicker__navigation--previous {\n border: 0;\n transform: rotate(90deg);\n}\n.cweb-datepicker-calendar .react-datepicker__navigation.react-datepicker__navigation--next {\n border: 0;\n transform: rotate(-90deg);\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}\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__month {\n padding-bottom: 8px;\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}";
|
|
2710
|
-
styleInject(css_248z$
|
|
2709
|
+
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.cweb-datepicker-v1 {\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-v1 input.cweb-datepicker-v1 {\n font-size: 14px;\n}\n.cweb-datepicker-v1::placeholder {\n color: #64748b;\n}\n.cweb-datepicker-v1:-ms-input-placeholder {\n color: #64748b !important;\n}\n.cweb-datepicker-v1::-ms-input-placeholder {\n color: #64748b;\n}\n\n.react-datepicker-popper-v1 {\n z-index: 5;\n}\n.react-datepicker-popper-v1[data-placement^=bottom] .react-datepicker__triangle.react-datepicker__triangle {\n border-bottom-color: #ffffff;\n margin-top: -4px;\n}\n.react-datepicker-popper-v1[data-placement^=top] {\n margin-bottom: 4px;\n}\n.react-datepicker-popper-v1[data-placement^=top] .react-datepicker__triangle.react-datepicker__triangle {\n border-top-color: #ffffff;\n margin-bottom: -4px;\n}\n\n.cweb-datepicker-calendar-v1 {\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\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@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .cweb-datepicker-calendar-v1 {\n box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.2);\n }\n}\n.cweb-datepicker-calendar-v1 .react-datepicker__triangle {\n left: 10px;\n border: 6px solid transparent;\n}\n.cweb-datepicker-calendar-v1 .react-datepicker__navigation {\n top: 19px;\n width: 19px;\n height: 10px;\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}\n.cweb-datepicker-calendar-v1 .react-datepicker__navigation.react-datepicker__navigation--previous {\n border: 0;\n transform: rotate(90deg);\n}\n.cweb-datepicker-calendar-v1 .react-datepicker__navigation.react-datepicker__navigation--next {\n border: 0;\n transform: rotate(-90deg);\n}\n.cweb-datepicker-calendar-v1 .react-datepicker__year-dropdown-container--select,\n.cweb-datepicker-calendar-v1 .react-datepicker__month-dropdown-container--select,\n.cweb-datepicker-calendar-v1 .react-datepicker__month-year-dropdown-container--select,\n.cweb-datepicker-calendar-v1 .react-datepicker__year-dropdown-container--scroll,\n.cweb-datepicker-calendar-v1 .react-datepicker__month-dropdown-container--scroll,\n.cweb-datepicker-calendar-v1 .react-datepicker__month-year-dropdown-container--scroll {\n margin: 2px;\n}\n.cweb-datepicker-calendar-v1 .react-datepicker__time-container .react-datepicker__time-box {\n width: auto;\n}\n.cweb-datepicker-calendar-v1 .react-datepicker__time-container .react-datepicker__time-list {\n overflow-x: hidden;\n}\n.cweb-datepicker-calendar-v1 .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-v1 .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-v1 .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-v1 .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-v1 .react-datepicker__header {\n padding-top: 0;\n border: none;\n background-color: #ffffff;\n font-size: 14px;\n}\n.cweb-datepicker-calendar-v1 .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-v1 .react-datepicker__header .react-datepicker__header__dropdown {\n margin-bottom: 15px;\n}\n.cweb-datepicker-calendar-v1 .react-datepicker__header .react-datepicker__month-select,\n.cweb-datepicker-calendar-v1 .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-v1 .react-datepicker__header .react-datepicker__month-select:hover, .cweb-datepicker-calendar-v1 .react-datepicker__header .react-datepicker__month-select:focus,\n.cweb-datepicker-calendar-v1 .react-datepicker__header .react-datepicker__year-select:hover,\n.cweb-datepicker-calendar-v1 .react-datepicker__header .react-datepicker__year-select:focus {\n color: #1e40af;\n border-color: #1e40af;\n cursor: pointer;\n}\n.cweb-datepicker-calendar-v1 .react-datepicker__header .react-datepicker__month-select {\n min-width: 172px;\n}\n.cweb-datepicker-calendar-v1 .react-datepicker__header .react-datepicker__year-select {\n min-width: 107px;\n}\n.cweb-datepicker-calendar-v1 .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-v1 .react-datepicker__day-names,\n.cweb-datepicker-calendar-v1 .react-datepicker__month {\n margin: 0.4rem;\n}\n.cweb-datepicker-calendar-v1 .react-datepicker__month {\n padding-bottom: 8px;\n}\n.cweb-datepicker-calendar-v1 .react-datepicker__day-names,\n.cweb-datepicker-calendar-v1 .react-datepicker__week {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.cweb-datepicker-calendar-v1 .react-datepicker__day-name,\n.cweb-datepicker-calendar-v1 .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-v1 .react-datepicker__day-name {\n height: 19px;\n text-transform: capitalize;\n}\n.cweb-datepicker-calendar-v1 .react-datepicker__day {\n height: 30px;\n border-radius: 4px;\n transition: background-color 0.3s ease-in-out;\n}\n.cweb-datepicker-calendar-v1 .react-datepicker__day.react-datepicker__day--highlighted {\n background-color: #ffffff;\n color: #1e40af;\n position: relative;\n}\n.cweb-datepicker-calendar-v1 .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-v1 .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--selected:after, .cweb-datepicker-calendar-v1 .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--keyboard-selected:after, .cweb-datepicker-calendar-v1 .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--in-range:after {\n background-color: #ffffff;\n}\n.cweb-datepicker-calendar-v1 .react-datepicker__day.react-datepicker__day--today {\n font-weight: bold;\n}\n.cweb-datepicker-calendar-v1 .react-datepicker__day.react-datepicker__day--in-selecting-range {\n background-color: #e8f5fc;\n}\n.cweb-datepicker-calendar-v1 .react-datepicker__day:hover {\n background-color: #f8fafc;\n}\n.cweb-datepicker-calendar-v1 .react-datepicker__day.react-datepicker__day--in-range, .cweb-datepicker-calendar-v1 .react-datepicker__day.react-datepicker__day--selected {\n color: #ffffff;\n background-color: #1e40af;\n}\n.cweb-datepicker-calendar-v1 .react-datepicker__day.react-datepicker__day--in-range:hover, .cweb-datepicker-calendar-v1 .react-datepicker__day.react-datepicker__day--selected:hover {\n background-color: #1e40af;\n}\n.cweb-datepicker-calendar-v1 .react-datepicker__day.react-datepicker__day--keyboard-selected {\n color: #ffffff;\n background-color: #1e40af;\n}\n.cweb-datepicker-calendar-v1 .react-datepicker__day.react-datepicker__day--selected {\n position: relative;\n}\n.cweb-datepicker-calendar-v1 .react-datepicker__day.react-datepicker__day--range-start {\n position: relative;\n}\n.cweb-datepicker-calendar-v1 .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-v1 .react-datepicker__day.react-datepicker__day--range-end {\n position: relative;\n}\n.cweb-datepicker-calendar-v1 .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-v1 .react-datepicker__day.react-datepicker__day--disabled {\n color: #cccccc;\n}\n.cweb-datepicker-calendar-v1 .react-datepicker__day.react-datepicker__day--disabled:hover {\n background-color: #ffffff;\n}\n.cweb-datepicker-calendar-v1 .react-datepicker__day.react-datepicker__day--outside-month {\n color: #cccccc;\n}";
|
|
2710
|
+
styleInject(css_248z$b);
|
|
2711
2711
|
|
|
2712
2712
|
var __defProp$5 = Object.defineProperty;
|
|
2713
2713
|
var __defProps$2 = Object.defineProperties;
|
|
@@ -2786,7 +2786,7 @@ let Datepicker$1 = class Datepicker extends React.Component {
|
|
|
2786
2786
|
]);
|
|
2787
2787
|
const dateFormat = this.getDateFormat();
|
|
2788
2788
|
const pickerClassName = classNames__default.default(
|
|
2789
|
-
"cweb-datepicker ui-text-slate-800 ui-text-sm",
|
|
2789
|
+
"cweb-datepicker-v1 ui-text-slate-800 ui-text-sm",
|
|
2790
2790
|
className
|
|
2791
2791
|
);
|
|
2792
2792
|
const getCloseButtonText = () => {
|
|
@@ -2801,7 +2801,7 @@ let Datepicker$1 = class Datepicker extends React.Component {
|
|
|
2801
2801
|
adjustDateOnChange,
|
|
2802
2802
|
ref: (element) => this.datepickerRef = element,
|
|
2803
2803
|
className: pickerClassName,
|
|
2804
|
-
calendarClassName: "cweb-datepicker-calendar",
|
|
2804
|
+
calendarClassName: "cweb-datepicker-calendar-v1",
|
|
2805
2805
|
shouldCloseOnSelect,
|
|
2806
2806
|
allowSameDay,
|
|
2807
2807
|
closeButtonText: true,
|
|
@@ -2813,7 +2813,8 @@ let Datepicker$1 = class Datepicker extends React.Component {
|
|
|
2813
2813
|
dateFormat,
|
|
2814
2814
|
timeFormat: "HH:mm",
|
|
2815
2815
|
selected,
|
|
2816
|
-
dropdownMode: "select"
|
|
2816
|
+
dropdownMode: "select",
|
|
2817
|
+
popperClassName: "react-datepicker-popper-v1"
|
|
2817
2818
|
}),
|
|
2818
2819
|
/* @__PURE__ */ React__namespace.default.createElement("div", { className: "ui-m-2" }, hasCloseButton ? /* @__PURE__ */ React__namespace.default.createElement(PrimaryButton, { onClick: this.handleCloseButtonClick }, getCloseButtonText()) : null)
|
|
2819
2820
|
);
|
|
@@ -2832,6 +2833,9 @@ Datepicker$1.propTypes = {
|
|
|
2832
2833
|
isDisabled: PropTypes__default.default.bool
|
|
2833
2834
|
};
|
|
2834
2835
|
|
|
2836
|
+
var css_248z$a = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.cweb-datepicker-v2 {\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-v2 input.cweb-datepicker-v2 {\n font-size: 14px;\n}\n.cweb-datepicker-v2::placeholder {\n color: #64748b;\n}\n.cweb-datepicker-v2:-ms-input-placeholder {\n color: #64748b !important;\n}\n.cweb-datepicker-v2::-ms-input-placeholder {\n color: #64748b;\n}\n\n.react-datepicker-popper-v2 {\n z-index: 20;\n}\n.react-datepicker-popper-v2[data-placement^=bottom] {\n margin-top: -4px;\n}\n.react-datepicker-popper-v2[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-v2[data-placement^=top] {\n margin-bottom: 4px;\n}\n.react-datepicker-popper-v2[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-v2 .react-datepicker__children-container {\n width: 100%;\n margin: 0;\n}\n\n.cweb-datepicker-calendar-v2 {\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\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@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .cweb-datepicker-calendar-v2 {\n box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.2);\n }\n}\n.cweb-datepicker-calendar-v2 .react-datepicker__triangle {\n left: 10px;\n border: 6px solid transparent;\n fill: #ffffff;\n color: #ffffff;\n}\n.cweb-datepicker-calendar-v2 .react-datepicker__navigation {\n top: 19px;\n width: 19px;\n height: 10px;\n}\n.cweb-datepicker-calendar-v2 .react-datepicker__navigation .react-datepicker__navigation-icon:before {\n border: 0;\n}\n.cweb-datepicker-calendar-v2 .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-v2 .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-v2 .react-datepicker__year-dropdown-container--select,\n.cweb-datepicker-calendar-v2 .react-datepicker__month-dropdown-container--select,\n.cweb-datepicker-calendar-v2 .react-datepicker__month-year-dropdown-container--select,\n.cweb-datepicker-calendar-v2 .react-datepicker__year-dropdown-container--scroll,\n.cweb-datepicker-calendar-v2 .react-datepicker__month-dropdown-container--scroll,\n.cweb-datepicker-calendar-v2 .react-datepicker__month-year-dropdown-container--scroll {\n margin: 2px;\n}\n.cweb-datepicker-calendar-v2 .react-datepicker__time-container .react-datepicker__time-box {\n width: auto;\n}\n.cweb-datepicker-calendar-v2 .react-datepicker__time-container .react-datepicker__time-list {\n overflow-x: hidden;\n}\n.cweb-datepicker-calendar-v2 .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-v2 .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-v2 .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-v2 .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-v2 .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-v2 .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-v2 .react-datepicker__header .react-datepicker__header__dropdown {\n margin-bottom: 15px;\n}\n.cweb-datepicker-calendar-v2 .react-datepicker__header .react-datepicker__month-select,\n.cweb-datepicker-calendar-v2 .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-v2 .react-datepicker__header .react-datepicker__month-select:hover, .cweb-datepicker-calendar-v2 .react-datepicker__header .react-datepicker__month-select:focus,\n.cweb-datepicker-calendar-v2 .react-datepicker__header .react-datepicker__year-select:hover,\n.cweb-datepicker-calendar-v2 .react-datepicker__header .react-datepicker__year-select:focus {\n color: #1e40af;\n border-color: #1e40af;\n cursor: pointer;\n}\n.cweb-datepicker-calendar-v2 .react-datepicker__header .react-datepicker__month-select {\n min-width: 172px;\n}\n.cweb-datepicker-calendar-v2 .react-datepicker__header .react-datepicker__year-select {\n min-width: 107px;\n}\n.cweb-datepicker-calendar-v2 .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-v2 .react-datepicker__day-names,\n.cweb-datepicker-calendar-v2 .react-datepicker__month {\n margin: 0.4rem;\n}\n.cweb-datepicker-calendar-v2 .react-datepicker__day-names,\n.cweb-datepicker-calendar-v2 .react-datepicker__week {\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.cweb-datepicker-calendar-v2 .react-datepicker__day-name,\n.cweb-datepicker-calendar-v2 .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-v2 .react-datepicker__day-name {\n height: 19px;\n text-transform: capitalize;\n}\n.cweb-datepicker-calendar-v2 .react-datepicker__day {\n height: 30px;\n border-radius: 4px;\n transition: background-color 0.3s ease-in-out;\n}\n.cweb-datepicker-calendar-v2 .react-datepicker__day.react-datepicker__day--highlighted {\n background-color: #ffffff;\n color: #1e40af;\n position: relative;\n}\n.cweb-datepicker-calendar-v2 .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-v2 .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--selected:after, .cweb-datepicker-calendar-v2 .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--keyboard-selected:after, .cweb-datepicker-calendar-v2 .react-datepicker__day.react-datepicker__day--highlighted.react-datepicker__day--in-range:after {\n background-color: #ffffff;\n}\n.cweb-datepicker-calendar-v2 .react-datepicker__day.react-datepicker__day--today {\n font-weight: bold;\n}\n.cweb-datepicker-calendar-v2 .react-datepicker__day.react-datepicker__day--in-selecting-range {\n background-color: #e8f5fc;\n}\n.cweb-datepicker-calendar-v2 .react-datepicker__day:hover {\n background-color: #f8fafc;\n}\n.cweb-datepicker-calendar-v2 .react-datepicker__day.react-datepicker__day--in-range, .cweb-datepicker-calendar-v2 .react-datepicker__day.react-datepicker__day--selected {\n color: #ffffff;\n background-color: #1e40af;\n}\n.cweb-datepicker-calendar-v2 .react-datepicker__day.react-datepicker__day--in-range:hover, .cweb-datepicker-calendar-v2 .react-datepicker__day.react-datepicker__day--selected:hover {\n background-color: #1e40af;\n}\n.cweb-datepicker-calendar-v2 .react-datepicker__day.react-datepicker__day--keyboard-selected {\n color: #ffffff;\n background-color: #1e40af;\n}\n.cweb-datepicker-calendar-v2 .react-datepicker__day.react-datepicker__day--selected {\n position: relative;\n}\n.cweb-datepicker-calendar-v2 .react-datepicker__day.react-datepicker__day--range-start {\n position: relative;\n}\n.cweb-datepicker-calendar-v2 .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-v2 .react-datepicker__day.react-datepicker__day--range-end {\n position: relative;\n}\n.cweb-datepicker-calendar-v2 .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-v2 .react-datepicker__day.react-datepicker__day--disabled {\n color: #cccccc;\n}\n.cweb-datepicker-calendar-v2 .react-datepicker__day.react-datepicker__day--disabled:hover {\n background-color: #ffffff;\n}\n.cweb-datepicker-calendar-v2 .react-datepicker__day.react-datepicker__day--outside-month {\n color: #cccccc;\n}";
|
|
2837
|
+
styleInject(css_248z$a);
|
|
2838
|
+
|
|
2835
2839
|
const LocaleContext = React.createContext("en-GB");
|
|
2836
2840
|
const useLocaleContext = () => {
|
|
2837
2841
|
return React.useContext(LocaleContext);
|
|
@@ -2863,7 +2867,7 @@ const Datepicker = (props) => {
|
|
|
2863
2867
|
React.useEffect(() => {
|
|
2864
2868
|
updateLocale(locale);
|
|
2865
2869
|
}, [locale]);
|
|
2866
|
-
const pickerClassName = classNames__default.default("cweb-datepicker ui-text-slate-800 ui-text-sm", className);
|
|
2870
|
+
const pickerClassName = classNames__default.default("cweb-datepicker-v2 ui-text-slate-800 ui-text-sm", className);
|
|
2867
2871
|
const getDateFormat = () => {
|
|
2868
2872
|
const { formatDateWithTime = false } = props;
|
|
2869
2873
|
return formatDateWithTime ? "Pp" : "P";
|
|
@@ -2876,8 +2880,8 @@ const Datepicker = (props) => {
|
|
|
2876
2880
|
const dateFormat = getDateFormat();
|
|
2877
2881
|
return React__namespace.default.createElement(
|
|
2878
2882
|
ReactDatePicker__default$1.default,
|
|
2879
|
-
Object.assign({}, otherProps, { adjustDateOnChange, ref: datePickerRef, className: pickerClassName, calendarClassName: "cweb-datepicker-calendar", shouldCloseOnSelect, allowSameDay, minDate, maxDate, disabled: isDisabled, showMonthDropdown, showYearDropdown, locale: getLocaleModule(locale), dateFormat, timeFormat: "HH:mm", selected, dropdownMode: "select" }),
|
|
2880
|
-
React__namespace.default.createElement("div", { className: "ui-m-2" }, hasCloseButton ? React__namespace.default.createElement(PrimaryButton, { onClick: handleCloseButtonClick }, closeButtonText !== null && closeButtonText !== void 0 ? closeButtonText : "OK") : null)
|
|
2883
|
+
Object.assign({}, otherProps, { adjustDateOnChange, ref: datePickerRef, className: pickerClassName, calendarClassName: "cweb-datepicker-calendar-v2", shouldCloseOnSelect, allowSameDay, minDate, maxDate, disabled: isDisabled, showMonthDropdown, showYearDropdown, locale: getLocaleModule(locale), dateFormat, timeFormat: "HH:mm", selected, dropdownMode: "select", popperPlacement: "bottom-start", popperClassName: "react-datepicker-popper-v2 ui-z-30", portalId: "datepicker-v2-portal" }),
|
|
2884
|
+
React__namespace.default.createElement("div", { className: "ui-m-2 ui-mt-0" }, hasCloseButton ? React__namespace.default.createElement(PrimaryButton, { onClick: handleCloseButtonClick }, closeButtonText !== null && closeButtonText !== void 0 ? closeButtonText : "OK") : null)
|
|
2881
2885
|
);
|
|
2882
2886
|
};
|
|
2883
2887
|
|