@luscii-healthtech/web-ui 23.1.2 → 23.2.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.
Files changed (12) hide show
  1. package/dist/components/DatepickerV2/Datepicker.d.ts +58 -0
  2. package/dist/components/Icons/ExternalLinkIcon.d.ts +4 -0
  3. package/dist/components/Icons/index.d.ts +1 -0
  4. package/dist/components/Input/StyledInput.d.ts +1 -1
  5. package/dist/index.d.ts +1 -0
  6. package/dist/index.development.js +74 -5
  7. package/dist/index.development.js.map +1 -1
  8. package/dist/index.js +1 -1
  9. package/dist/index.js.map +1 -1
  10. package/dist/web-ui.esm.js +1 -1
  11. package/dist/web-ui.esm.js.map +1 -1
  12. package/package.json +3 -1
package/dist/components/DatepickerV2/Datepicker.d.ts ADDED
@@ -0,0 +1,58 @@
1
+ import React, { Component } from "react";
2
+ import { type Locale } from "date-fns";
3
+ import "react-datepicker-v2/dist/react-datepicker.min.css";
4
+ import "../Datepicker/Datepicker.scss";
5
+ export declare const LOCALE_MAP: Record<string, Locale>;
6
+ type Props = {
7
+ /**
8
+ * The locale determines the language and formatting of the dates
9
+ * shown in this component. E.g. for "nl-NL" the date will be
10
+ * shown as "dd-mm-yyyy", while for "en-GB" it shows as "dd/mm/yyyy".
11
+ *
12
+ * @default "en-GB"
13
+ */
14
+ locale?: keyof typeof LOCALE_MAP;
15
+ className?: string;
16
+ selected?: Date;
17
+ hasCloseButton?: boolean;
18
+ closeButtonText?: string;
19
+ onChange?: (date: Date) => void;
20
+ /**
21
+ * @default true
22
+ */
23
+ showMonthDropdown?: boolean;
24
+ /**
25
+ * @default true
26
+ */
27
+ showYearDropdown?: boolean;
28
+ minDate?: Date;
29
+ maxDate?: Date;
30
+ isDisabled?: boolean;
31
+ /**
32
+ * When set to `true`, if e.g. 10 January 2023 is selected and the user
33
+ * changes to a different month or year, the 10th will still be selected.
34
+ * When set to `false`, the date that the user has selected will not change
35
+ * until they select a new date.
36
+ *
37
+ * @default true
38
+ */
39
+ adjustDateOnChange?: boolean;
40
+ /**
41
+ * @default false
42
+ */
43
+ formatDateWithTime?: boolean;
44
+ shouldCloseOnSelect?: boolean;
45
+ /**
46
+ * @default false
47
+ */
48
+ allowSameDay?: boolean;
49
+ };
50
+ export declare class Datepicker extends Component<Props> {
51
+ componentDidMount(): void;
52
+ componentDidUpdate(prevProps: Props): void;
53
+ handleCloseButtonClick: (event: any) => void;
54
+ private datePickerRef;
55
+ getDateFormat: () => "Pp" | "P";
56
+ render(): React.JSX.Element;
57
+ }
58
+ export {};
package/dist/components/Icons/ExternalLinkIcon.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import { IconProps } from "./types/IconProps.type";
3
+ declare const _default: (props: IconProps) => JSX.Element;
4
+ export default _default;
package/dist/components/Icons/index.d.ts CHANGED
@@ -27,6 +27,7 @@ export { default as EmailIcon } from "./EmailIcon";
27
27
  export { default as EmptyIcon } from "./EmptyIcon";
28
28
  export { default as ExclamationMarkIcon } from "./ExclamationMarkIcon";
29
29
  export { default as ExportIcon } from "./ExportIcon";
30
+ export { default as ExternalLinkIcon } from "./ExternalLinkIcon";
30
31
  export { default as EyeClosedIcon } from "./EyeClosedIcon";
31
32
  export { default as EyeOpenIcon } from "./EyeOpenIcon";
32
33
  export { default as FilterIcon } from "./FilterIcon";
package/dist/components/Input/StyledInput.d.ts CHANGED
@@ -6,7 +6,7 @@ export declare const StyledInput: React.ForwardRefExoticComponent<Omit<Omit<Reac
6
6
  type?: AllowedTextInputTypes | undefined;
7
7
  suffix?: string | undefined;
8
8
  prefix?: string | undefined;
9
- icon?: "BellIcon" | "BluetoothIcon" | "BrushIcon" | "CalendarDayIcon" | "CalendarMonthIcon" | "CalendarRepeatIcon" | "ChartBarsIcon" | "ChartLineAndBarsIcon" | "ChatBubbleIcon" | "ChatBubbleWithTextIcon" | "CheckIcon" | "ChevronDoubleIcon" | "ChevronDownIcon" | "ChevronLeftIcon" | "ChevronRightIcon" | "ClockIcon" | "CogwheelIcon" | "CopyToClipboardIcon" | "CrossIcon" | "CrossInCircleIcon" | "CrossInFilledCircleIcon" | "DatabaseIcon" | "DragIndicatorIcon" | "EarthIcon" | "EmailIcon" | "EmptyIcon" | "ExclamationMarkIcon" | "ExportIcon" | "EyeClosedIcon" | "EyeOpenIcon" | "FilterIcon" | "FireIcon" | "FirstAidKitIcon" | "FlagIcon" | "ForwardIcon" | "GroupIcon" | "GroupOfThreeIcon" | "HamburgerIcon" | "HandshakeIcon" | "HeartIcon" | "HomeIcon" | "ImageIcon" | "InfoIcon" | "LifebuoyIcon" | "LightBulbIcon" | "LinkIcon" | "LockIcon" | "LogInIcon" | "LogOutIcon" | "MessageWithArrowIcon" | "MoreIcon" | "MouseIcon" | "NoteIcon" | "PageViewIcon" | "PatientIcon" | "PencilIcon" | "PhoneIcon" | "PieChartIcon" | "PinIcon" | "PlusIcon" | "PrinterIcon" | "RobotIcon" | "RocketIcon" | "SearchIcon" | "ShareIcon" | "SmallCircleIcon" | "SmallDiamondIcon" | "SmallSquareIcon" | "StarIcon" | "TrashBinIcon" | "TreeIcon" | "AddIcon" | "AlertsIcon" | "ChartIcon" | "ChatBoxIcon" | "DeleteIcon" | "DragIcon" | "EditIcon" | "EyeIcon" | "EyeIconSlashed" | "GearIcon" | "MessagesIcon" | "NotesIcon" | "PrintIcon" | "SpaceRocketIcon" | "SettingsIcon" | "RightArrowIcon" | "DownArrowIcon" | "LeftArrowIcon" | "WarningIcon" | "ChartLineColoredIcon" | "GearColoredIcon" | "GroupColoredIcon" | "StatusColoredIcon" | React.FC<IconProps> | undefined;
9
+ icon?: "BellIcon" | "BluetoothIcon" | "BrushIcon" | "CalendarDayIcon" | "CalendarMonthIcon" | "CalendarRepeatIcon" | "ChartBarsIcon" | "ChartLineAndBarsIcon" | "ChatBubbleIcon" | "ChatBubbleWithTextIcon" | "CheckIcon" | "ChevronDoubleIcon" | "ChevronDownIcon" | "ChevronLeftIcon" | "ChevronRightIcon" | "ClockIcon" | "CogwheelIcon" | "CopyToClipboardIcon" | "CrossIcon" | "CrossInCircleIcon" | "CrossInFilledCircleIcon" | "DatabaseIcon" | "DragIndicatorIcon" | "EarthIcon" | "EmailIcon" | "EmptyIcon" | "ExclamationMarkIcon" | "ExportIcon" | "ExternalLinkIcon" | "EyeClosedIcon" | "EyeOpenIcon" | "FilterIcon" | "FireIcon" | "FirstAidKitIcon" | "FlagIcon" | "ForwardIcon" | "GroupIcon" | "GroupOfThreeIcon" | "HamburgerIcon" | "HandshakeIcon" | "HeartIcon" | "HomeIcon" | "ImageIcon" | "InfoIcon" | "LifebuoyIcon" | "LightBulbIcon" | "LinkIcon" | "LockIcon" | "LogInIcon" | "LogOutIcon" | "MessageWithArrowIcon" | "MoreIcon" | "MouseIcon" | "NoteIcon" | "PageViewIcon" | "PatientIcon" | "PencilIcon" | "PhoneIcon" | "PieChartIcon" | "PinIcon" | "PlusIcon" | "PrinterIcon" | "RobotIcon" | "RocketIcon" | "SearchIcon" | "ShareIcon" | "SmallCircleIcon" | "SmallDiamondIcon" | "SmallSquareIcon" | "StarIcon" | "TrashBinIcon" | "TreeIcon" | "AddIcon" | "AlertsIcon" | "ChartIcon" | "ChatBoxIcon" | "DeleteIcon" | "DragIcon" | "EditIcon" | "EyeIcon" | "EyeIconSlashed" | "GearIcon" | "MessagesIcon" | "NotesIcon" | "PrintIcon" | "SpaceRocketIcon" | "SettingsIcon" | "RightArrowIcon" | "DownArrowIcon" | "LeftArrowIcon" | "WarningIcon" | "ChartLineColoredIcon" | "GearColoredIcon" | "GroupColoredIcon" | "StatusColoredIcon" | React.FC<IconProps> | undefined;
10
10
  width?: FormFieldWidth | undefined;
11
11
  isError?: boolean | undefined;
12
12
  isClearIconVisible?: boolean | undefined;
package/dist/index.d.ts CHANGED
@@ -28,6 +28,7 @@ export { Checkbox } from "./components/Checkbox/Checkbox";
28
28
  export { ConfirmationDialog } from "./components/ConfirmationDialog/ConfirmationDialog";
29
29
  export type { ConfirmationDialogChoice, ConfirmationDialogProps, ConfirmationDialogTitleProps, } from "./components/ConfirmationDialog/types/ConfirmationDialog.types";
30
30
  export { default as DatePicker } from "./components/Datepicker/Datepicker";
31
+ export { Datepicker as DatePickerV2 } from "./components/DatepickerV2/Datepicker";
31
32
  export { default as Dropdown } from "./components/Dropdown/Dropdown";
32
33
  export { EmptyListMessage } from "./components/EmptyListMessage/EmptyListMessage";
33
34
  export { InfoField } from "./components/InfoField/InfoField";
package/dist/index.development.js CHANGED
@@ -17,6 +17,13 @@ var ReactDatePicker = require('react-datepicker');
17
17
  var PropTypes = require('prop-types');
18
18
  var moment = require('moment');
19
19
  require('react-datepicker/dist/react-datepicker.css');
20
+ var ReactDatePicker$1 = require('react-datepicker-v2');
21
+ var enGB = require('date-fns/locale/en-GB');
22
+ var nl = require('date-fns/locale/nl');
23
+ var de = require('date-fns/locale/de');
24
+ var fr = require('date-fns/locale/fr');
25
+ var pt = require('date-fns/locale/pt');
26
+ require('react-datepicker-v2/dist/react-datepicker.min.css');
20
27
  var ClipboardJS = require('clipboard');
21
28
  var ReactSelect = require('react-select');
22
29
  var groupBy = require('lodash/groupBy');
@@ -58,6 +65,7 @@ var Glider__default = /*#__PURE__*/_interopDefault(Glider);
58
65
  var ReactDatePicker__default = /*#__PURE__*/_interopDefault(ReactDatePicker);
59
66
  var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
60
67
  var moment__default = /*#__PURE__*/_interopDefault(moment);
68
+ var ReactDatePicker__default$1 = /*#__PURE__*/_interopDefault(ReactDatePicker$1);
61
69
  var ClipboardJS__default = /*#__PURE__*/_interopDefault(ClipboardJS);
62
70
  var ReactSelect__default = /*#__PURE__*/_interopDefault(ReactSelect);
63
71
  var groupBy__default = /*#__PURE__*/_interopDefault(groupBy);
@@ -386,6 +394,14 @@ const SvgExportIcon = (props) => React__namespace.default.createElement(
386
394
  );
387
395
  var ExportIcon = IconWrapper(SvgExportIcon);
388
396
 
397
+ const SvgExternalLinkIcon = (props) => React__namespace.default.createElement(
398
+ "svg",
399
+ Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24" }, props),
400
+ React__namespace.default.createElement("path", { stroke: "currentColor", strokeLinecap: "round", strokeWidth: 2, d: "M10.563 6H6a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2v-4.563" }),
401
+ React__namespace.default.createElement("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 16 20 5m0 0h-5m5 0v5" })
402
+ );
403
+ var ExternalLinkIcon = IconWrapper(SvgExternalLinkIcon);
404
+
389
405
  const SvgEyeClosedIcon = (props) => React__namespace.default.createElement(
390
406
  "svg",
391
407
  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24" }, props),
@@ -729,6 +745,7 @@ var Icons = /*#__PURE__*/Object.freeze({
729
745
  EmptyIcon: EmptyIcon,
730
746
  ExclamationMarkIcon: ExclamationMarkIcon,
731
747
  ExportIcon: ExportIcon,
748
+ ExternalLinkIcon: ExternalLinkIcon,
732
749
  EyeClosedIcon: EyeClosedIcon,
733
750
  EyeIcon: EyeOpenIcon,
734
751
  EyeIconSlashed: EyeClosedIcon,
@@ -2622,7 +2639,7 @@ const ConfirmationDialog = (_a) => {
2622
2639
  );
2623
2640
  };
2624
2641
 
2625
- 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 {\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 {\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}";
2642
+ 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}";
2626
2643
  styleInject(css_248z$a);
2627
2644
 
2628
2645
  var __defProp$5 = Object.defineProperty;
@@ -2660,7 +2677,7 @@ var __publicField$3 = (obj, key, value) => {
2660
2677
  __defNormalProp$5(obj, typeof key !== "symbol" ? key + "" : key, value);
2661
2678
  return value;
2662
2679
  };
2663
- class Datepicker extends React.Component {
2680
+ let Datepicker$1 = class Datepicker extends React.Component {
2664
2681
  constructor() {
2665
2682
  super(...arguments);
2666
2683
  __publicField$3(this, "handleCloseButtonClick", (event) => {
@@ -2734,8 +2751,8 @@ class Datepicker extends React.Component {
2734
2751
  /* @__PURE__ */ React__namespace.default.createElement("div", { className: "ui-m-2" }, hasCloseButton ? /* @__PURE__ */ React__namespace.default.createElement(PrimaryButton, { onClick: this.handleCloseButtonClick }, getCloseButtonText()) : null)
2735
2752
  );
2736
2753
  }
2737
- }
2738
- Datepicker.propTypes = {
2754
+ };
2755
+ Datepicker$1.propTypes = {
2739
2756
  className: PropTypes__default.default.string,
2740
2757
  selected: PropTypes__default.default.object,
2741
2758
  hasCloseButton: PropTypes__default.default.bool,
@@ -2748,6 +2765,56 @@ Datepicker.propTypes = {
2748
2765
  isDisabled: PropTypes__default.default.bool
2749
2766
  };
2750
2767
 
2768
+ const LOCALE_MAP = {
2769
+ "en-GB": enGB.enGB,
2770
+ "nl-NL": nl.nl,
2771
+ "de-DE": de.de,
2772
+ "fr-FR": fr.fr,
2773
+ "pt-PT": pt.pt
2774
+ };
2775
+ function updateLocale(locale) {
2776
+ const resolvedLocale = locale !== null && locale !== void 0 ? locale : "en-GB";
2777
+ const resoledLocaleModule = LOCALE_MAP[resolvedLocale];
2778
+ ReactDatePicker$1.registerLocale(resolvedLocale, resoledLocaleModule);
2779
+ }
2780
+ function getLocaleModule(locale) {
2781
+ const resolvedLocale = locale !== null && locale !== void 0 ? locale : "en-GB";
2782
+ return LOCALE_MAP[resolvedLocale];
2783
+ }
2784
+ class Datepicker extends React.Component {
2785
+ constructor() {
2786
+ super(...arguments);
2787
+ this.handleCloseButtonClick = (event) => {
2788
+ var _a;
2789
+ event.preventDefault();
2790
+ (_a = this.datePickerRef) === null || _a === void 0 ? void 0 : _a.setOpen(false);
2791
+ };
2792
+ this.datePickerRef = null;
2793
+ this.getDateFormat = () => {
2794
+ const { formatDateWithTime = false } = this.props;
2795
+ return formatDateWithTime ? "Pp" : "P";
2796
+ };
2797
+ }
2798
+ componentDidMount() {
2799
+ updateLocale(this.props.locale);
2800
+ }
2801
+ componentDidUpdate(prevProps) {
2802
+ if (prevProps.locale !== this.props.locale) {
2803
+ updateLocale(this.props.locale);
2804
+ }
2805
+ }
2806
+ render() {
2807
+ const _a = this.props, { locale = "en-GB", className, hasCloseButton, closeButtonText, adjustDateOnChange = true, showMonthDropdown = true, showYearDropdown = true, shouldCloseOnSelect = false, allowSameDay = false, minDate, maxDate, isDisabled = false, selected } = _a, otherProps = __rest(_a, ["locale", "className", "hasCloseButton", "closeButtonText", "adjustDateOnChange", "showMonthDropdown", "showYearDropdown", "shouldCloseOnSelect", "allowSameDay", "minDate", "maxDate", "isDisabled", "selected"]);
2808
+ const dateFormat = this.getDateFormat();
2809
+ const pickerClassName = classNames__default.default("cweb-datepicker ui-text-slate-800 ui-text-sm", className);
2810
+ return React__namespace.default.createElement(
2811
+ ReactDatePicker__default$1.default,
2812
+ Object.assign({}, otherProps, { adjustDateOnChange, ref: (element) => this.datePickerRef = element, className: pickerClassName, calendarClassName: "cweb-datepicker-calendar", shouldCloseOnSelect, allowSameDay, minDate, maxDate, disabled: isDisabled, showMonthDropdown, showYearDropdown, locale: getLocaleModule(locale), dateFormat, timeFormat: "HH:mm", selected, dropdownMode: "select" }),
2813
+ React__namespace.default.createElement("div", { className: "ui-m-2" }, hasCloseButton ? React__namespace.default.createElement(PrimaryButton, { onClick: this.handleCloseButtonClick }, closeButtonText !== null && closeButtonText !== void 0 ? closeButtonText : "OK") : null)
2814
+ );
2815
+ }
2816
+ }
2817
+
2751
2818
  var img$2 = "data:image/svg+xml,%3csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M4 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' fill='%239CA3AF'/%3e%3c/svg%3e";
2752
2819
 
2753
2820
  var css_248z$9 = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.cweb-dropdown {\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n align-items: flex-start;\n position: relative;\n outline: none;\n border-radius: 4px;\n}\n.cweb-dropdown:focus {\n outline: 4px solid rgba(0, 159, 227, 0.3);\n}\n.cweb-dropdown > .dropdown-header {\n display: flex;\n justify-content: space-between;\n flex-direction: row;\n align-items: center;\n align-self: stretch;\n height: 44px;\n border-radius: 4px;\n transition: all 0.4s ease;\n}\n.cweb-dropdown > .dropdown-header > .dropdown-header-icon {\n opacity: 0.5;\n transition: opacity 0.3s ease-in-out;\n}\n.cweb-dropdown > .dropdown-header:hover > .dropdown-header-icon {\n opacity: 1;\n}\n.cweb-dropdown > .dropdown-list {\n box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.56);\n display: none;\n position: absolute;\n top: 100%;\n z-index: 1;\n width: 100%;\n max-height: 360px;\n overflow-y: auto;\n align-self: stretch;\n margin-top: 8px;\n padding: 0;\n background-color: #ffffff;\n list-style: none;\n border: 1px solid #d1d5db;\n border-radius: 4px;\n}\n.cweb-dropdown > .dropdown-list > .dropdown-list-item {\n cursor: pointer;\n}\n.cweb-dropdown > .dropdown-list > .dropdown-list-item-group > .dropdown-list-item {\n cursor: pointer;\n}\n.cweb-dropdown.is-open > .dropdown-list {\n display: block;\n margin-bottom: 32px;\n}\n.cweb-dropdown.is-open > .dropdown-list.wider {\n width: 200%;\n}";
@@ -5886,7 +5953,8 @@ exports.CrossIcon = CrossIcon;
5886
5953
  exports.CrossInCircleIcon = CrossInCircleIcon;
5887
5954
  exports.CrossInFilledCircleIcon = CrossInFilledCircleIcon;
5888
5955
  exports.DatabaseIcon = DatabaseIcon;
5889
- exports.DatePicker = Datepicker;
5956
+ exports.DatePicker = Datepicker$1;
5957
+ exports.DatePickerV2 = Datepicker;
5890
5958
  exports.DeleteIcon = DeleteIcon;
5891
5959
  exports.Divider = Divider;
5892
5960
  exports.DownArrowIcon = ChevronDownIcon;
@@ -5902,6 +5970,7 @@ exports.EmptyIcon = EmptyIcon;
5902
5970
  exports.EmptyListMessage = EmptyListMessage;
5903
5971
  exports.ExclamationMarkIcon = ExclamationMarkIcon;
5904
5972
  exports.ExportIcon = ExportIcon;
5973
+ exports.ExternalLinkIcon = ExternalLinkIcon;
5905
5974
  exports.EyeClosedIcon = EyeClosedIcon;
5906
5975
  exports.EyeIcon = EyeOpenIcon;
5907
5976
  exports.EyeIconSlashed = EyeClosedIcon;