@luscii-healthtech/web-ui 19.0.6 → 19.1.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.
@@ -25,11 +25,11 @@ export declare const allowedColors: {
25
25
  readonly green: "ui-text-green-700";
26
26
  readonly amber: "ui-text-yellow-700";
27
27
  readonly white: "ui-text-white";
28
- readonly "blue-800": "ui-text-blue-800";
28
+ readonly "blue-800": "ui-text-primary";
29
29
  readonly current: "ui-text-current";
30
30
  };
31
31
  declare const allowedHoverColors: {
32
- readonly "blue-900": "hover:ui-text-blue-900";
32
+ readonly "blue-900": "hover:ui-text-primary-dark";
33
33
  readonly white: "hover:ui-text-white";
34
34
  };
35
35
  export type TextColor = keyof typeof allowedColors;
@@ -195,15 +195,15 @@ const allowedColors = {
195
195
  green: "ui-text-green-700",
196
196
  amber: "ui-text-yellow-700",
197
197
  white: "ui-text-white",
198
- "blue-800": "ui-text-blue-800",
198
+ "blue-800": "ui-text-primary",
199
199
  current: "ui-text-current"
200
200
  };
201
201
  const allowedHoverColors = {
202
- "blue-900": "hover:ui-text-blue-900",
202
+ "blue-900": "hover:ui-text-primary-dark",
203
203
  white: "hover:ui-text-white"
204
204
  };
205
205
  const allowedGroupHoverColors = {
206
- "blue-900": "group-hover:ui-text-blue-900",
206
+ "blue-900": "group-hover:ui-text-primary-dark",
207
207
  white: "group-hover:ui-text-white"
208
208
  };
209
209
  const Text = (props) => {
@@ -1246,7 +1246,7 @@ const DefaultState = ({ icon, message, horizontal = false, alignMessage = "cente
1246
1246
  );
1247
1247
  };
1248
1248
  const DropzonePresentation = React.forwardRef(({ message, icon, isHighlighted, isClickable, className, dataTestId, children, horizontal, alignMessage }, ref) => {
1249
- const classes = classNames__default.default("ui-border ui-flex ui-items-center ui-justify-center ui-border-blue-800", {
1249
+ const classes = classNames__default.default("ui-border ui-flex ui-items-center ui-justify-center ui-border-primary", {
1250
1250
  "dropzone-dashed-border": !isHighlighted,
1251
1251
  "ui-bg-white": !isHighlighted,
1252
1252
  "ui-bg-blue-50": isHighlighted,
@@ -1305,7 +1305,7 @@ const SortableBaseList = (_a) => {
1305
1305
  );
1306
1306
  };
1307
1307
 
1308
- 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(242 250 253 / 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}";
1308
+ 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}";
1309
1309
  styleInject(css_248z$i);
1310
1310
 
1311
1311
  const ListItem = (props) => {
@@ -1432,7 +1432,7 @@ const Input = React__namespace.default.forwardRef((_a, ref) => {
1432
1432
  "hover:ui-border-input-border-dark": !isDisabled,
1433
1433
  "ui-border-red-700": isError,
1434
1434
  "focus:ui-outline-negative": isError,
1435
- "focus:ui-border-blue-800": !isError,
1435
+ "focus:ui-border-primary": !isError,
1436
1436
  "focus:ui-outline-primary": !isError,
1437
1437
  "ui-bg-white": !isDisabled
1438
1438
  }, "ui-h-11", "ui-p-2", "ui-border", "ui-text-sm", "ui-placeholder-slate-500", "ui-border-solid", "ui-transition-colors", "ui-duration-300", {
@@ -1552,12 +1552,12 @@ const ButtonV2 = React__namespace.default.forwardRef((_a, innerRef) => {
1552
1552
 
1553
1553
  const SecondaryButton = React__namespace.default.forwardRef((props, innerRef) => {
1554
1554
  return React__namespace.default.createElement(ButtonV2, Object.assign({ ref: innerRef }, props, { className: classNames__default.default([
1555
- "ui-text-blue-800",
1555
+ "ui-text-primary",
1556
1556
  "ui-bg-white",
1557
1557
  "ui-border-slate-300",
1558
- "hover:ui-text-blue-900",
1558
+ "hover:ui-text-primary-dark",
1559
1559
  "hover:ui-border-slate-400",
1560
- "focus:ui-border-blue-800",
1560
+ "focus:ui-border-primary",
1561
1561
  "ui-shadow-sm"
1562
1562
  ], props.className), textColor: "blue-800", textHoverColor: "blue-900" }));
1563
1563
  });
@@ -1695,11 +1695,11 @@ AccordionList.Actions = AccordionListActions;
1695
1695
 
1696
1696
  const TertiaryButton = (props) => {
1697
1697
  return React__namespace.default.createElement(ButtonV2, Object.assign({}, props, { className: classNames__default.default([
1698
- "ui-text-blue-800",
1698
+ "ui-text-primary",
1699
1699
  "ui-bg-transparent",
1700
1700
  "ui-border-transparent",
1701
- "hover:ui-text-blue-900",
1702
- "focus:ui-border-blue-800"
1701
+ "hover:ui-text-primary-dark",
1702
+ "focus:ui-border-primary"
1703
1703
  ], props.className), textColor: "blue-800", textHoverColor: "blue-900" }));
1704
1704
  };
1705
1705
 
@@ -1715,9 +1715,9 @@ const ModalHeader = (props) => {
1715
1715
  const PrimaryButton = (props) => {
1716
1716
  return React__namespace.default.createElement(ButtonV2, Object.assign({}, props, { className: classNames__default.default([
1717
1717
  "ui-text-white",
1718
- "ui-bg-blue-800",
1718
+ "ui-bg-primary",
1719
1719
  "ui-border-primary-transparent",
1720
- "hover:ui-bg-blue-900",
1720
+ "hover:ui-bg-primary-dark",
1721
1721
  "ui-shadow-sm"
1722
1722
  ], props.className), textColor: "white" }));
1723
1723
  };
@@ -1777,7 +1777,7 @@ const Modal = (props) => {
1777
1777
  };
1778
1778
  Modal.setAppElement = ReactModal__default.default.setAppElement;
1779
1779
 
1780
- var css_248z$f = "/**\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-avatar {\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n align-items: center;\n width: 64px;\n box-sizing: border-box;\n}\n.cweb-avatar > .avatar-content-container {\n display: flex;\n justify-content: center;\n flex-direction: row;\n align-items: center;\n width: 64px;\n height: 64px;\n border-radius: 50%;\n box-sizing: border-box;\n}\n.cweb-avatar > .avatar-content-container > .avatar-image {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n}\n.cweb-avatar > .avatar-content-container > .avatar-initials-text {\n font-family: \"Inter\", \"Roboto\", sans-serif;\n font-size: 24px;\n font-weight: 300;\n line-height: 1;\n color: #737373;\n margin: 0;\n pointer-events: none;\n}\n.cweb-avatar.size-large {\n width: 128px;\n}\n.cweb-avatar.size-large > .avatar-content-container {\n width: 128px;\n height: 128px;\n}\n.cweb-avatar.size-large > .avatar-content-container > .avatar-initials-text {\n font-size: 48px;\n}\n.cweb-avatar.size-medium {\n width: 64px;\n}\n.cweb-avatar.size-medium > .avatar-content-container {\n width: 64px;\n height: 64px;\n}\n.cweb-avatar.size-medium > .avatar-content-container > .avatar-initials-text {\n font-size: 24px;\n}\n.cweb-avatar.size-small {\n width: 36px;\n}\n.cweb-avatar.size-small > .avatar-content-container {\n width: 36px;\n height: 36px;\n}\n.cweb-avatar.size-small > .avatar-content-container > .avatar-initials-text {\n font-size: 14px;\n}\n.cweb-avatar.type-editable {\n cursor: pointer;\n}\n.cweb-avatar.type-editable > .avatar-content-container {\n position: relative;\n border-color: #0074dd;\n background-color: #ffffff;\n}\n.cweb-avatar.type-editable > .avatar-content-container:after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 1;\n border-radius: 50%;\n transition: 0.4s ease background-color;\n}\n.cweb-avatar.type-editable > .avatar-content-container:hover:after {\n background-color: rgba(0, 116, 221, 0.1);\n}\n.cweb-avatar.type-editable > .avatar-content-container > .avatar-initials-text {\n color: #0074dd;\n}\n.cweb-avatar.type-readonly > .avatar-content-container {\n border-color: #cccccc;\n background-color: #f1f5f9;\n}\n.cweb-avatar.type-readonly > .avatar-content-container > .avatar-initials-text {\n color: #64748b;\n}\n@media (max-width: 767px) {\n .cweb-avatar.size-large {\n width: 64px;\n }\n .cweb-avatar.size-large > .avatar-content-container {\n width: 64px;\n height: 64px;\n }\n .cweb-avatar.size-large > .avatar-content-container > .avatar-initials-text {\n font-size: 24px;\n }\n .cweb-avatar.size-large.display-initials > .avatar-content-container {\n border-width: 0.5px;\n }\n}";
1780
+ var css_248z$f = "/**\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-avatar {\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n align-items: center;\n width: 64px;\n box-sizing: border-box;\n}\n.cweb-avatar > .avatar-content-container {\n display: flex;\n justify-content: center;\n flex-direction: row;\n align-items: center;\n width: 64px;\n height: 64px;\n border-radius: 50%;\n box-sizing: border-box;\n}\n.cweb-avatar > .avatar-content-container > .avatar-image {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n}\n.cweb-avatar > .avatar-content-container > .avatar-initials-text {\n font-family: \"Inter\", \"Roboto\", sans-serif;\n font-size: 24px;\n font-weight: 300;\n line-height: 1;\n color: #737373;\n margin: 0;\n pointer-events: none;\n}\n.cweb-avatar.size-large {\n width: 128px;\n}\n.cweb-avatar.size-large > .avatar-content-container {\n width: 128px;\n height: 128px;\n}\n.cweb-avatar.size-large > .avatar-content-container > .avatar-initials-text {\n font-size: 48px;\n}\n.cweb-avatar.size-medium {\n width: 64px;\n}\n.cweb-avatar.size-medium > .avatar-content-container {\n width: 64px;\n height: 64px;\n}\n.cweb-avatar.size-medium > .avatar-content-container > .avatar-initials-text {\n font-size: 24px;\n}\n.cweb-avatar.size-small {\n width: 36px;\n}\n.cweb-avatar.size-small > .avatar-content-container {\n width: 36px;\n height: 36px;\n}\n.cweb-avatar.size-small > .avatar-content-container > .avatar-initials-text {\n font-size: 14px;\n}\n.cweb-avatar.type-editable {\n cursor: pointer;\n}\n.cweb-avatar.type-editable > .avatar-content-container {\n position: relative;\n border-color: #1e40af;\n background-color: #ffffff;\n}\n.cweb-avatar.type-editable > .avatar-content-container:after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 1;\n border-radius: 50%;\n transition: 0.4s ease background-color;\n}\n.cweb-avatar.type-editable > .avatar-content-container:hover:after {\n background-color: rgba(30, 64, 175, 0.1);\n}\n.cweb-avatar.type-editable > .avatar-content-container > .avatar-initials-text {\n color: #1e40af;\n}\n.cweb-avatar.type-readonly > .avatar-content-container {\n border-color: #cccccc;\n background-color: #f1f5f9;\n}\n.cweb-avatar.type-readonly > .avatar-content-container > .avatar-initials-text {\n color: #64748b;\n}\n@media (max-width: 767px) {\n .cweb-avatar.size-large {\n width: 64px;\n }\n .cweb-avatar.size-large > .avatar-content-container {\n width: 64px;\n height: 64px;\n }\n .cweb-avatar.size-large > .avatar-content-container > .avatar-initials-text {\n font-size: 24px;\n }\n .cweb-avatar.size-large.display-initials > .avatar-content-container {\n border-width: 0.5px;\n }\n}";
1781
1781
  styleInject(css_248z$f);
1782
1782
 
1783
1783
  function checkImageValidity(src) {
@@ -2074,7 +2074,7 @@ function Button(props) {
2074
2074
  return buttonComponent;
2075
2075
  }
2076
2076
 
2077
- var css_248z$e = ".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(242 250 253 / var(--tw-bg-opacity))\n}\n.entity-preview-dots.glider-dots .glider-dot:focus {\n outline-color: #0074DD\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(0 116 221 / var(--tw-bg-opacity))\n}";
2077
+ var css_248z$e = ".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}";
2078
2078
  styleInject(css_248z$e);
2079
2079
 
2080
2080
  const GliderContainer = (props) => React__namespace.default.createElement(
@@ -2144,7 +2144,7 @@ const CenteredHero = ({ title, text, image, buttons = [], background = "slate-50
2144
2144
  );
2145
2145
  };
2146
2146
 
2147
- var css_248z$d = "/**\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: #0074dd;\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: #0074dd;\n}\n.cweb-checkbox.type-regular.is-checked.is-focused .cweb-checkbox-icon-container {\n border-color: #2da8e5;\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: #0074dd;\n}\n.cweb-checkbox.type-regular.is-indeterminate.is-focused .cweb-checkbox-icon-container {\n border-color: #2da8e5;\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}";
2147
+ var css_248z$d = "/**\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}";
2148
2148
  styleInject(css_248z$d);
2149
2149
 
2150
2150
  const CheckboxInner = (props) => {
@@ -2250,7 +2250,7 @@ const ConfirmationDialogTitle = (props) => {
2250
2250
  { "data-test-id": "confirmation-dialog-title", className: classNames__default.default("ui-flex ui-flex-col ui-space-y-2 ui-text-center", {
2251
2251
  "ui-items-center ui-justify-center": (_a = props.title) === null || _a === void 0 ? void 0 : _a.icon
2252
2252
  }) },
2253
- props.title.icon && React__namespace.default.createElement(IconComponentOrKey, { name: props.title.icon, className: "dialog-header-icon ui-h-12 ui-w-12 ui-text-blue-800" }),
2253
+ props.title.icon && React__namespace.default.createElement(IconComponentOrKey, { name: props.title.icon, className: "dialog-header-icon ui-h-12 ui-w-12 ui-text-primary" }),
2254
2254
  React__namespace.default.createElement(Title, { text: props.title.title, type: "sm" })
2255
2255
  ) : null;
2256
2256
  };
@@ -2260,23 +2260,23 @@ const TextLink = (props) => {
2260
2260
  "ui-cursor-pointer": props.enabled,
2261
2261
  "ui-cursor-default": !props.enabled
2262
2262
  }, {
2263
- "ui-text-blue-800": props.enabled,
2263
+ "ui-text-primary": props.enabled,
2264
2264
  "ui-text-slate-800": !props.enabled
2265
2265
  }, {
2266
- "hover:ui-text-blue-900": props.enabled,
2266
+ "hover:ui-text-primary-dark": props.enabled,
2267
2267
  "hover:ui-text-slate-900": !props.enabled
2268
2268
  });
2269
2269
  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);
2270
2270
  };
2271
2271
 
2272
- var css_248z$c = "/* 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(0 116 221 / var(--tw-text-opacity))\n}\n\n[data-test-id=\"notification-banner\"] a:hover {\n\n --tw-text-opacity: 1;\n\n color: rgb(4 91 170 / var(--tw-text-opacity))\n}\n";
2272
+ var css_248z$c = "/* 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";
2273
2273
  styleInject(css_248z$c);
2274
2274
 
2275
2275
  const NotificationBanner = (props) => {
2276
2276
  const { stretch = true, centerContent = false, noBorder = false } = props;
2277
2277
  const classes = classNames__default.default("ui-px-4 ui-py-4 ui-min-h-13 ui-flex ui-flex-row ui-items-center ui-rounded", props.className, {
2278
2278
  "ui-bg-slate-100 ui-border-slate-300 ui-text-slate-800": props.color === "base",
2279
- "ui-bg-blue-50 ui-border-blue-700 ui-text-blue-800": props.color === "blue",
2279
+ "ui-bg-blue-50 ui-border-primary-light ui-text-primary": props.color === "blue",
2280
2280
  "ui-bg-red-50 ui-border-red-700 ui-text-red-700": props.color === "red",
2281
2281
  "ui-bg-green-50 ui-border-green-700 ui-text-green-700": props.color === "green",
2282
2282
  "ui-bg-amber-50 ui-border-amber-700 ui-text-amber-700": props.color === "amber",
@@ -2319,7 +2319,7 @@ NotificationBanner.defaultProps = {
2319
2319
  onButtonClick: void 0
2320
2320
  };
2321
2321
 
2322
- var css_248z$b = ".ui-radio-form-field-label input[type=\"radio\"]:checked + .ui-radio-circle {\n\n --tw-bg-opacity: 1;\n\n background-color: rgb(0 116 221 / 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";
2322
+ var css_248z$b = ".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";
2323
2323
  styleInject(css_248z$b);
2324
2324
 
2325
2325
  function RadioInner(_a) {
@@ -2454,7 +2454,7 @@ const ConfirmationDialog = (_a) => {
2454
2454
  );
2455
2455
  };
2456
2456
 
2457
- 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: #0074dd !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: #045baa !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: #0074dd;\n border-color: #0074dd;\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: #0074dd;\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: #0074dd;\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: #0074dd;\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: #045baa;\n}\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--keyboard-selected {\n color: #ffffff;\n background-color: #045baa;\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}";
2457
+ 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}";
2458
2458
  styleInject(css_248z$a);
2459
2459
 
2460
2460
  var __defProp$5 = Object.defineProperty;
@@ -3958,7 +3958,7 @@ Page.propTypes = {
3958
3958
  };
3959
3959
 
3960
3960
  const Step = ({ title, stepNumber, active, localization }) => {
3961
- const barColor = active ? "ui-bg-blue-800" : "ui-bg-slate-200";
3961
+ const barColor = active ? "ui-bg-primary" : "ui-bg-slate-200";
3962
3962
  return React__namespace.default.createElement(
3963
3963
  "div",
3964
3964
  { className: "ui-w-full" },
@@ -4206,7 +4206,7 @@ const PreviewPhone = ({ className, children }) => {
4206
4206
  ) : React__namespace.default.createElement(React__namespace.default.Fragment, null);
4207
4207
  };
4208
4208
 
4209
- var css_248z$6 = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.cweb-radio {\n outline: none;\n}\n.cweb-radio .cweb-radio-input {\n -webkit-appearance: none;\n height: 1px;\n opacity: 0;\n width: 1px;\n}\n.cweb-radio .cweb-radio-label-text {\n margin-left: 8px;\n user-select: none;\n text-align: left;\n}\n.cweb-radio .cweb-radio-label {\n display: flex;\n align-items: center;\n margin-bottom: 0;\n}\n.cweb-radio .cweb-radio-icon-container {\n width: 16px;\n height: 16px;\n position: relative;\n border: 1px solid #cccccc;\n border-radius: 50%;\n transition: background-color 0.3s ease-in-out;\n}\n.cweb-radio .cweb-radio-icon {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n display: block;\n}\n.cweb-radio.is-focused .cweb-radio-icon-container {\n border-color: #0074dd;\n}\n.cweb-radio.is-checked .cweb-radio-icon {\n width: 5px;\n height: 5px;\n background-color: #ffffff;\n border-radius: 50%;\n}";
4209
+ var css_248z$6 = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.cweb-radio {\n outline: none;\n}\n.cweb-radio .cweb-radio-input {\n -webkit-appearance: none;\n height: 1px;\n opacity: 0;\n width: 1px;\n}\n.cweb-radio .cweb-radio-label-text {\n margin-left: 8px;\n user-select: none;\n text-align: left;\n}\n.cweb-radio .cweb-radio-label {\n display: flex;\n align-items: center;\n margin-bottom: 0;\n}\n.cweb-radio .cweb-radio-icon-container {\n width: 16px;\n height: 16px;\n position: relative;\n border: 1px solid #cccccc;\n border-radius: 50%;\n transition: background-color 0.3s ease-in-out;\n}\n.cweb-radio .cweb-radio-icon {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n display: block;\n}\n.cweb-radio.is-focused .cweb-radio-icon-container {\n border-color: #1e40af;\n}\n.cweb-radio.is-checked .cweb-radio-icon {\n width: 5px;\n height: 5px;\n background-color: #ffffff;\n border-radius: 50%;\n}";
4210
4210
  styleInject(css_248z$6);
4211
4211
 
4212
4212
  var __defProp$1 = Object.defineProperty;
@@ -4506,7 +4506,7 @@ const SettingsMenuButton = (props) => {
4506
4506
  );
4507
4507
  };
4508
4508
 
4509
- var css_248z$2 = "/**\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-switcher-item {\n display: flex;\n justify-content: center;\n flex-direction: row;\n align-items: center;\n}\n.cweb-switcher-item .cweb-switcher-item-link {\n display: flex;\n align-items: center;\n text-decoration: none;\n padding: 0.5rem 1rem;\n cursor: pointer;\n}\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon {\n display: flex;\n align-items: center;\n}\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-default,\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active {\n width: 20px;\n height: 20px;\n}\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active {\n display: none;\n}\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-text {\n color: #737373;\n transition: color 0.4s ease;\n padding-bottom: 0;\n}\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon + .cweb-switcher-item-link-text {\n margin-left: 8px;\n padding: 0;\n}\n.cweb-switcher-item.is-selected, .cweb-switcher-item:hover, .cweb-switcher-item:active {\n border-color: #0074dd;\n z-index: 1;\n}\n.cweb-switcher-item.is-selected .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-default, .cweb-switcher-item:hover .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-default, .cweb-switcher-item:active .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-default {\n display: none;\n}\n.cweb-switcher-item.is-selected .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active, .cweb-switcher-item:hover .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active, .cweb-switcher-item:active .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active {\n display: inherit;\n}\n.cweb-switcher-item.is-selected .cweb-switcher-item-link .cweb-switcher-item-link-text, .cweb-switcher-item:hover .cweb-switcher-item-link .cweb-switcher-item-link-text, .cweb-switcher-item:active .cweb-switcher-item-link .cweb-switcher-item-link-text {\n color: #0074dd;\n}\n.cweb-switcher-item.is-disabled {\n pointer-events: none;\n}";
4509
+ var css_248z$2 = "/**\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-switcher-item {\n display: flex;\n justify-content: center;\n flex-direction: row;\n align-items: center;\n}\n.cweb-switcher-item .cweb-switcher-item-link {\n display: flex;\n align-items: center;\n text-decoration: none;\n padding: 0.5rem 1rem;\n cursor: pointer;\n}\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon {\n display: flex;\n align-items: center;\n}\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-default,\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active {\n width: 20px;\n height: 20px;\n}\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active {\n display: none;\n}\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-text {\n color: #737373;\n transition: color 0.4s ease;\n padding-bottom: 0;\n}\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon + .cweb-switcher-item-link-text {\n margin-left: 8px;\n padding: 0;\n}\n.cweb-switcher-item.is-selected, .cweb-switcher-item:hover, .cweb-switcher-item:active {\n border-color: #1e40af;\n z-index: 1;\n}\n.cweb-switcher-item.is-selected .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-default, .cweb-switcher-item:hover .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-default, .cweb-switcher-item:active .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-default {\n display: none;\n}\n.cweb-switcher-item.is-selected .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active, .cweb-switcher-item:hover .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active, .cweb-switcher-item:active .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active {\n display: inherit;\n}\n.cweb-switcher-item.is-selected .cweb-switcher-item-link .cweb-switcher-item-link-text, .cweb-switcher-item:hover .cweb-switcher-item-link .cweb-switcher-item-link-text, .cweb-switcher-item:active .cweb-switcher-item-link .cweb-switcher-item-link-text {\n color: #1e40af;\n}\n.cweb-switcher-item.is-disabled {\n pointer-events: none;\n}";
4510
4510
  styleInject(css_248z$2);
4511
4511
 
4512
4512
  SwitcherItem.propTypes = {
@@ -4830,7 +4830,7 @@ const TagGroup = ({ children, tags, tagSize = "base", className }) => React__nam
4830
4830
  tags === null || tags === void 0 ? void 0 : tags.map((tag) => React__namespace.default.createElement(Tag, Object.assign({ size: tagSize }, tag)))
4831
4831
  );
4832
4832
 
4833
- var css_248z$1 = "/**\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-textarea {\n border: 1px solid #cccccc;\n border-radius: 4px;\n outline: none;\n background-color: #ffffff;\n resize: none;\n}\n.cweb-textarea.has-icon {\n background-size: 24px;\n background-position: 10px 10px;\n background-repeat: no-repeat;\n padding-left: 44px;\n}\n.cweb-textarea.resizable {\n resize: both;\n}\n.cweb-textarea.resizable-x {\n resize: horizontal;\n}\n.cweb-textarea.resizable-y {\n resize: vertical;\n}\n.cweb-textarea::placeholder {\n color: #737373;\n}\n.cweb-textarea:-ms-input-placeholder {\n color: #64748b !important;\n}\n.cweb-textarea::-ms-input-placeholder {\n color: #64748b;\n}\n.cweb-textarea:focus {\n border-color: #0074dd;\n}\n.cweb-textarea:disabled {\n cursor: not-allowed;\n}\n.cweb-textarea.has-error {\n border: 1px solid #ff6266;\n color: #ff6266;\n}";
4833
+ var css_248z$1 = "/**\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-textarea {\n border: 1px solid #cccccc;\n border-radius: 4px;\n outline: none;\n background-color: #ffffff;\n resize: none;\n}\n.cweb-textarea.has-icon {\n background-size: 24px;\n background-position: 10px 10px;\n background-repeat: no-repeat;\n padding-left: 44px;\n}\n.cweb-textarea.resizable {\n resize: both;\n}\n.cweb-textarea.resizable-x {\n resize: horizontal;\n}\n.cweb-textarea.resizable-y {\n resize: vertical;\n}\n.cweb-textarea::placeholder {\n color: #737373;\n}\n.cweb-textarea:-ms-input-placeholder {\n color: #64748b !important;\n}\n.cweb-textarea::-ms-input-placeholder {\n color: #64748b;\n}\n.cweb-textarea:focus {\n border-color: #1e40af;\n}\n.cweb-textarea:disabled {\n cursor: not-allowed;\n}\n.cweb-textarea.has-error {\n border: 1px solid #ff6266;\n color: #ff6266;\n}";
4834
4834
  styleInject(css_248z$1);
4835
4835
 
4836
4836
  const resizeTypes = {
@@ -4896,7 +4896,7 @@ function Link(props) {
4896
4896
  const { as: Element = "a", className } = props, rest = __rest(props, ["as", "className"]);
4897
4897
  const ownClasses = ["ui-cursor-pointer ui-focus:ui-outline-primary"];
4898
4898
  if (typeof props.children === "string") {
4899
- ownClasses.push("ui-text-blue-800", "hover:ui-underline", "hover:ui-text-blue-900");
4899
+ ownClasses.push("ui-text-primary", "hover:ui-underline", "hover:ui-text-primary-dark");
4900
4900
  }
4901
4901
  const classes = classNames__default.default(ownClasses, className);
4902
4902
  return React__namespace.default.createElement(Element, Object.assign({ className: classes }, rest));
@@ -4904,7 +4904,7 @@ function Link(props) {
4904
4904
 
4905
4905
  const TimelineStep = React__namespace.default.forwardRef(({ content, type = "base", dataTestId, title }, ref) => {
4906
4906
  const isWideStep = type === "wide";
4907
- const borderClassNames = "ui-ml-4 ui-pl-6 ui-border-blue-800 ui-border-l-2";
4907
+ const borderClassNames = "ui-ml-4 ui-pl-6 ui-border-primary ui-border-l-2";
4908
4908
  const containerClassNames = classNames__default.default("ui-relative", {
4909
4909
  [borderClassNames]: !isWideStep,
4910
4910
  "ui-bg-white ui-rounded-lg ui-overflow-hidden": isWideStep
@@ -4927,8 +4927,8 @@ const TimelineStep = React__namespace.default.forwardRef(({ content, type = "bas
4927
4927
  { className: "ui-absolute -ui-left-2 ui-top-0 -ui-ml-px ui-flex ui-h-13 ui-flex-row ui-items-center" },
4928
4928
  React__namespace.default.createElement("span", { className: classNames__default.default("ui-inline-block ui-h-4 ui-w-4 ui-rounded-lg", {
4929
4929
  "ui-hidden": ["wide", "withoutDot"].includes(type),
4930
- "ui-bg-blue-800": "base" === type,
4931
- "ui-border-4 ui-border-blue-800 ui-bg-white": "emptyDot" === type
4930
+ "ui-bg-primary": "base" === type,
4931
+ "ui-border-4 ui-border-primary ui-bg-white": "emptyDot" === type
4932
4932
  }) })
4933
4933
  )
4934
4934
  )
@@ -5492,7 +5492,7 @@ const FiltersMenus = (props) => {
5492
5492
  props.onFilterOptionChange({
5493
5493
  changedFilterOption: Object.assign(Object.assign({}, option), { isChecked: !option.isChecked })
5494
5494
  });
5495
- }, className: "ui-form-checkbox ui-h-4 ui-w-4 ui-rounded ui-border-slate-300 ui-text-blue-800 focus:ui-ring-blue-800" }),
5495
+ }, className: "ui-form-checkbox ui-h-4 ui-w-4 ui-rounded ui-border-slate-300 ui-text-primary focus:ui-ring-primary" }),
5496
5496
  React__namespace.default.createElement("span", { className: "ui-ml-3 ui-whitespace-nowrap ui-pr-6 ui-text-sm ui-font-medium ui-capitalize ui-text-slate-900" }, option.label)
5497
5497
  )))
5498
5498
  )
@@ -5703,7 +5703,7 @@ const WeekdaysPicker = (props) => {
5703
5703
  **/
5704
5704
  "ui-outline-1 ui-outline-black",
5705
5705
  "ui-bg-slate-200 hover:ui-bg-slate-300 active:ui-scale-95",
5706
- "data-[state=on]:ui-bg-blue-800 data-[state=on]:ui-text-white data-[state=on]:hover:ui-bg-blue-900"
5706
+ "data-[state=on]:ui-bg-primary data-[state=on]:ui-text-white data-[state=on]:hover:ui-bg-primary-dark"
5707
5707
  ) }, localizedWeekdayLetter);
5708
5708
  }));
5709
5709
  };