@luscii-healthtech/web-ui 2.66.0 → 2.67.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.
@@ -1,5 +1,6 @@
1
1
  import React from "react";
2
2
  import { IconProps } from "../Icons/types/IconProps.type";
3
+ import "./NotificationBanner.css";
3
4
  export declare type NotificationBannerColor = "base" | "blue" | "red" | "green" | "amber";
4
5
  export interface NotificationBannerLinkProps {
5
6
  text: string;
@@ -28,6 +29,7 @@ export declare type NotificationBannerProps = (NotificationBannerPropsWithChildr
28
29
  * When stretching the banner, you can also decide if the content should be centered or not.
29
30
  */
30
31
  centerContent?: boolean;
32
+ noBorder?: boolean;
31
33
  };
32
34
  export declare const NotificationBanner: {
33
35
  (props: NotificationBannerProps): JSX.Element;
@@ -1,7 +1,18 @@
1
1
  /// <reference types="react" />
2
2
  import type { BreadcrumbProps } from "../Breadcrumbs";
3
+ import { NotificationBannerColor } from "../NotificationBanner/NotificationBanner";
3
4
  import type { TabbarProps } from "../Tabbar/Tabbar";
4
- export interface PageHeaderProps {
5
+ declare type WithPageHeaderBanner = {
6
+ banner?: {
7
+ title?: string;
8
+ text: {
9
+ content: string;
10
+ isHTML?: boolean;
11
+ };
12
+ color: NotificationBannerColor;
13
+ };
14
+ };
15
+ export declare type PageHeaderProps = {
5
16
  navigation?: Omit<TabbarProps, "withoutPadding">;
6
17
  breadcrumbs?: BreadcrumbProps["crumbs"];
7
18
  truncateBreadcrumbsAfter?: number;
@@ -11,4 +22,5 @@ export interface PageHeaderProps {
11
22
  className?: string;
12
23
  contained?: boolean;
13
24
  accessories?: React.ReactNode;
14
- }
25
+ } & WithPageHeaderBanner;
26
+ export {};
@@ -25,6 +25,7 @@ export declare const allowedColors: {
25
25
  readonly amber: "text-yellow-700";
26
26
  readonly white: "text-white";
27
27
  readonly "blue-800": "text-blue-800";
28
+ readonly current: "text-current";
28
29
  };
29
30
  declare const allowedHoverColors: {
30
31
  readonly "blue-900": "hover:text-blue-900";
@@ -2006,6 +2006,10 @@ video {
2006
2006
  text-align: center;
2007
2007
  }
2008
2008
 
2009
+ .text-current {
2010
+ color: currentColor;
2011
+ }
2012
+
2009
2013
  .text-white {
2010
2014
  --text-opacity: 1;
2011
2015
  color: #fff;
@@ -604,7 +604,8 @@ var allowedColors = {
604
604
  green: "text-green-700",
605
605
  amber: "text-yellow-700",
606
606
  white: "text-white",
607
- "blue-800": "text-blue-800"
607
+ "blue-800": "text-blue-800",
608
+ current: "text-current"
608
609
  };
609
610
  var allowedHoverColors = {
610
611
  "blue-900": "hover:text-blue-900",
@@ -4115,17 +4116,23 @@ var TextLink = function TextLink(props) {
4115
4116
  }, props.text);
4116
4117
  };
4117
4118
 
4119
+ var css_248z$a = "/* Overrides for components we cannot control inside the notification banner component */\n\n[data-test-id=\"notification-banner\"] a {\n --text-opacity: 1;\n color: #0074DD;\n color: rgba(0, 116, 221, var(--text-opacity));\n}\n\n[data-test-id=\"notification-banner\"] a:hover {\n --text-opacity: 1;\n color: #045BAA;\n color: rgba(4, 91, 170, var(--text-opacity));\n}\n";
4120
+ styleInject(css_248z$a);
4121
+
4118
4122
  var NotificationBanner = function NotificationBanner(props) {
4119
4123
  var _props$stretch = props.stretch,
4120
4124
  stretch = _props$stretch === void 0 ? true : _props$stretch,
4121
4125
  _props$centerContent = props.centerContent,
4122
- centerContent = _props$centerContent === void 0 ? false : _props$centerContent;
4123
- var classes = classNames("px-6 py-4 min-h-13 flex flex-row items-center border border-solid rounded", props.className, {
4126
+ centerContent = _props$centerContent === void 0 ? false : _props$centerContent,
4127
+ _props$noBorder = props.noBorder,
4128
+ noBorder = _props$noBorder === void 0 ? false : _props$noBorder;
4129
+ var classes = classNames("px-4 py-4 min-h-13 flex flex-row items-center rounded", props.className, {
4124
4130
  "bg-slate-100 border-slate-300 text-slate-800": props.color === "base",
4125
4131
  "bg-blue-50 border-blue-700 text-blue-800": props.color === "blue",
4126
4132
  "bg-red-50 border-red-700 text-red-700": props.color === "red",
4127
4133
  "bg-green-50 border-green-700 text-green-700": props.color === "green",
4128
- "bg-amber-50 border-amber-700 text-amber-700": props.color === "amber"
4134
+ "bg-amber-50 border-amber-700 text-amber-700": props.color === "amber",
4135
+ "border border-solid": !noBorder
4129
4136
  }, {
4130
4137
  "justify-center": centerContent
4131
4138
  });
@@ -4173,8 +4180,8 @@ NotificationBanner.defaultProps = {
4173
4180
  onButtonClick: undefined
4174
4181
  };
4175
4182
 
4176
- var css_248z$a = ".radio-form-field-label input[type=\"radio\"]:checked + .radio-circle {\n --bg-opacity: 1;\n background-color: #0074DD;\n background-color: rgba(0, 116, 221, var(--bg-opacity));\n}\n\n.radio-form-field-label[data-has-error=\"true\"] .radio-circle {\n --border-opacity: 1;\n border-color: #c53030;\n border-color: rgba(197, 48, 48, var(--border-opacity));\n outline: 4px solid rgba(255, 98, 102, 0.3);\n outline-offset: 0;\n}\n\n.radio-form-field-label\n input[type=\"radio\"]:checked\n + .radio-circle\n .radio-inner-circle {\n --bg-opacity: 1;\n background-color: #fff;\n background-color: rgba(255, 255, 255, var(--bg-opacity));\n}\n";
4177
- styleInject(css_248z$a);
4183
+ var css_248z$b = ".radio-form-field-label input[type=\"radio\"]:checked + .radio-circle {\n --bg-opacity: 1;\n background-color: #0074DD;\n background-color: rgba(0, 116, 221, var(--bg-opacity));\n}\n\n.radio-form-field-label[data-has-error=\"true\"] .radio-circle {\n --border-opacity: 1;\n border-color: #c53030;\n border-color: rgba(197, 48, 48, var(--border-opacity));\n outline: 4px solid rgba(255, 98, 102, 0.3);\n outline-offset: 0;\n}\n\n.radio-form-field-label\n input[type=\"radio\"]:checked\n + .radio-circle\n .radio-inner-circle {\n --bg-opacity: 1;\n background-color: #fff;\n background-color: rgba(255, 255, 255, var(--bg-opacity));\n}\n";
4184
+ styleInject(css_248z$b);
4178
4185
 
4179
4186
  var _excluded$f = ["text", "info", "isError", "innerRef", "className", "name"];
4180
4187
 
@@ -4383,8 +4390,8 @@ var ConfirmationDialog = function ConfirmationDialog(_ref) {
4383
4390
  })));
4384
4391
  };
4385
4392
 
4386
- var css_248z$b = ".cweb-box-shadow-default {\n box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);\n}\n\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .cweb-box-shadow-default {\n box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.24), 0 0 2px 1px rgba(0, 0, 0, 0.12);\n }\n}\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\n.cweb-datepicker input.cweb-datepicker {\n font-size: 14px;\n}\n\n.cweb-datepicker:-ms-input-placeholder {\n color: #64748b;\n}\n\n.cweb-datepicker::placeholder {\n color: #64748b;\n}\n\n.cweb-datepicker:-ms-input-placeholder {\n color: #64748b !important;\n}\n\n.cweb-datepicker::-ms-input-placeholder {\n color: #64748b;\n}\n\n.react-datepicker-popper {\n z-index: 5;\n}\n\n.react-datepicker-popper[data-placement^=bottom] {\n margin-top: 4px;\n}\n\n.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {\n border-bottom-color: #ffffff;\n margin-top: -4px;\n}\n\n.react-datepicker-popper[data-placement^=top] {\n margin-bottom: 4px;\n}\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\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\n.cweb-datepicker-calendar .react-datepicker__triangle {\n left: 10px;\n border: 6px solid transparent;\n}\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\n.cweb-datepicker-calendar .react-datepicker__navigation.react-datepicker__navigation--previous {\n border: 0;\n transform: rotate(90deg);\n}\n\n.cweb-datepicker-calendar .react-datepicker__navigation.react-datepicker__navigation--next {\n border: 0;\n transform: rotate(-90deg);\n}\n\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-box {\n width: auto;\n}\n\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list {\n overflow-x: hidden;\n}\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\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\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\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\n.cweb-datepicker-calendar .react-datepicker__header {\n padding-top: 0;\n border: none;\n background-color: #ffffff;\n font-size: 14px;\n}\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\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__header__dropdown {\n margin-bottom: 15px;\n}\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\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\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select {\n min-width: 172px;\n}\n\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select {\n min-width: 107px;\n}\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\n.cweb-datepicker-calendar .react-datepicker__day-names,\n.cweb-datepicker-calendar .react-datepicker__month {\n margin: 0.4rem;\n}\n\n.cweb-datepicker-calendar .react-datepicker__month {\n padding-bottom: 8px;\n}\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\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\n.cweb-datepicker-calendar .react-datepicker__day-name {\n height: 19px;\n text-transform: capitalize;\n}\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\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted {\n background-color: #ffffff;\n color: #0074dd;\n position: relative;\n}\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\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\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--today {\n font-weight: bold;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--in-selecting-range {\n background-color: #e8f5fc;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day:hover {\n background-color: #f8fafc;\n}\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\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\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--keyboard-selected {\n color: #ffffff;\n background-color: #045baa;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--selected {\n position: relative;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-start {\n position: relative;\n}\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\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-end {\n position: relative;\n}\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\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--disabled {\n color: #cccccc;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--disabled:hover {\n background-color: #ffffff;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--outside-month {\n color: #cccccc;\n}";
4387
- styleInject(css_248z$b);
4393
+ var css_248z$c = ".cweb-box-shadow-default {\n box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);\n}\n\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .cweb-box-shadow-default {\n box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.24), 0 0 2px 1px rgba(0, 0, 0, 0.12);\n }\n}\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\n.cweb-datepicker input.cweb-datepicker {\n font-size: 14px;\n}\n\n.cweb-datepicker:-ms-input-placeholder {\n color: #64748b;\n}\n\n.cweb-datepicker::placeholder {\n color: #64748b;\n}\n\n.cweb-datepicker:-ms-input-placeholder {\n color: #64748b !important;\n}\n\n.cweb-datepicker::-ms-input-placeholder {\n color: #64748b;\n}\n\n.react-datepicker-popper {\n z-index: 5;\n}\n\n.react-datepicker-popper[data-placement^=bottom] {\n margin-top: 4px;\n}\n\n.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {\n border-bottom-color: #ffffff;\n margin-top: -4px;\n}\n\n.react-datepicker-popper[data-placement^=top] {\n margin-bottom: 4px;\n}\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\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\n.cweb-datepicker-calendar .react-datepicker__triangle {\n left: 10px;\n border: 6px solid transparent;\n}\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\n.cweb-datepicker-calendar .react-datepicker__navigation.react-datepicker__navigation--previous {\n border: 0;\n transform: rotate(90deg);\n}\n\n.cweb-datepicker-calendar .react-datepicker__navigation.react-datepicker__navigation--next {\n border: 0;\n transform: rotate(-90deg);\n}\n\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-box {\n width: auto;\n}\n\n.cweb-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-list {\n overflow-x: hidden;\n}\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\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\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\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\n.cweb-datepicker-calendar .react-datepicker__header {\n padding-top: 0;\n border: none;\n background-color: #ffffff;\n font-size: 14px;\n}\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\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__header__dropdown {\n margin-bottom: 15px;\n}\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\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\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__month-select {\n min-width: 172px;\n}\n\n.cweb-datepicker-calendar .react-datepicker__header .react-datepicker__year-select {\n min-width: 107px;\n}\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\n.cweb-datepicker-calendar .react-datepicker__day-names,\n.cweb-datepicker-calendar .react-datepicker__month {\n margin: 0.4rem;\n}\n\n.cweb-datepicker-calendar .react-datepicker__month {\n padding-bottom: 8px;\n}\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\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\n.cweb-datepicker-calendar .react-datepicker__day-name {\n height: 19px;\n text-transform: capitalize;\n}\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\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--highlighted {\n background-color: #ffffff;\n color: #0074dd;\n position: relative;\n}\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\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\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--today {\n font-weight: bold;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--in-selecting-range {\n background-color: #e8f5fc;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day:hover {\n background-color: #f8fafc;\n}\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\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\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--keyboard-selected {\n color: #ffffff;\n background-color: #045baa;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--selected {\n position: relative;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-start {\n position: relative;\n}\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\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--range-end {\n position: relative;\n}\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\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--disabled {\n color: #cccccc;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--disabled:hover {\n background-color: #ffffff;\n}\n\n.cweb-datepicker-calendar .react-datepicker__day.react-datepicker__day--outside-month {\n color: #cccccc;\n}";
4394
+ styleInject(css_248z$c);
4388
4395
 
4389
4396
  var _excluded$i = ["className", "hasCloseButton", "closeButtonText", "adjustDateOnChange", "showMonthDropdown", "showYearDropdown", "shouldCloseOnSelect", "allowSameDay", "minDate", "maxDate", "isDisabled", "selected"];
4390
4397
 
@@ -4499,8 +4506,8 @@ Datepicker.propTypes = {
4499
4506
 
4500
4507
  var img$g = "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";
4501
4508
 
4502
- var css_248z$c = ".cweb-box-shadow-default {\n box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);\n}\n\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .cweb-box-shadow-default {\n box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.24), 0 0 2px 1px rgba(0, 0, 0, 0.12);\n }\n}\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\n.cweb-dropdown:focus {\n outline: 4px solid rgba(0, 159, 227, 0.3);\n}\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\n.cweb-dropdown > .dropdown-header > .dropdown-header-icon {\n opacity: 0.5;\n transition: opacity 0.3s ease-in-out;\n}\n\n.cweb-dropdown > .dropdown-header:hover > .dropdown-header-icon {\n opacity: 1;\n}\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\n.cweb-dropdown > .dropdown-list > .dropdown-list-item {\n cursor: pointer;\n}\n\n.cweb-dropdown > .dropdown-list > .dropdown-list-item-group > .dropdown-list-item {\n cursor: pointer;\n}\n\n.cweb-dropdown.is-open > .dropdown-list {\n display: block;\n margin-bottom: 32px;\n}\n\n.cweb-dropdown.is-open > .dropdown-list.wider {\n width: 200%;\n}";
4503
- styleInject(css_248z$c);
4509
+ var css_248z$d = ".cweb-box-shadow-default {\n box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);\n}\n\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n .cweb-box-shadow-default {\n box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.24), 0 0 2px 1px rgba(0, 0, 0, 0.12);\n }\n}\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\n.cweb-dropdown:focus {\n outline: 4px solid rgba(0, 159, 227, 0.3);\n}\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\n.cweb-dropdown > .dropdown-header > .dropdown-header-icon {\n opacity: 0.5;\n transition: opacity 0.3s ease-in-out;\n}\n\n.cweb-dropdown > .dropdown-header:hover > .dropdown-header-icon {\n opacity: 1;\n}\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\n.cweb-dropdown > .dropdown-list > .dropdown-list-item {\n cursor: pointer;\n}\n\n.cweb-dropdown > .dropdown-list > .dropdown-list-item-group > .dropdown-list-item {\n cursor: pointer;\n}\n\n.cweb-dropdown.is-open > .dropdown-list {\n display: block;\n margin-bottom: 32px;\n}\n\n.cweb-dropdown.is-open > .dropdown-list.wider {\n width: 200%;\n}";
4510
+ styleInject(css_248z$d);
4504
4511
 
4505
4512
  var _excluded$j = ["placeholder", "className", "initialSelectedItemId", "onItemSelect", "items", "wider"];
4506
4513
  var ITEM_QUERY_FIELD_NAMES = {
@@ -4866,8 +4873,8 @@ Dropdown.propTypes = {
4866
4873
  wider: PropTypes.bool
4867
4874
  };
4868
4875
 
4869
- var css_248z$d = ".cweb-error-block {\n position: relative;\n padding: 16px 16px 16px 56px;\n background-color: #fff1f1;\n border-radius: 8px;\n}\n\n.cweb-error-block:before {\n content: \"\";\n position: absolute;\n left: 16px;\n top: 14px;\n z-index: 1;\n width: 24px;\n height: 23px;\n background: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22%3E %3Cg fill%3D%22none%22 fill-rule%3D%22evenodd%22%3E %3Ccircle cx%3D%2212%22 cy%3D%2212%22 r%3D%2212%22 fill%3D%22%23FF6266%22%2F%3E %3Ccircle cx%3D%2212%22 cy%3D%2217%22 r%3D%222%22 fill%3D%22%23FFF%22%2F%3E %3Crect width%3D%224%22 height%3D%2210%22 x%3D%2210%22 y%3D%224%22 fill%3D%22%23FFF%22 rx%3D%222%22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}";
4870
- styleInject(css_248z$d);
4876
+ var css_248z$e = ".cweb-error-block {\n position: relative;\n padding: 16px 16px 16px 56px;\n background-color: #fff1f1;\n border-radius: 8px;\n}\n\n.cweb-error-block:before {\n content: \"\";\n position: absolute;\n left: 16px;\n top: 14px;\n z-index: 1;\n width: 24px;\n height: 23px;\n background: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22%3E %3Cg fill%3D%22none%22 fill-rule%3D%22evenodd%22%3E %3Ccircle cx%3D%2212%22 cy%3D%2212%22 r%3D%2212%22 fill%3D%22%23FF6266%22%2F%3E %3Ccircle cx%3D%2212%22 cy%3D%2217%22 r%3D%222%22 fill%3D%22%23FFF%22%2F%3E %3Crect width%3D%224%22 height%3D%2210%22 x%3D%2210%22 y%3D%224%22 fill%3D%22%23FFF%22 rx%3D%222%22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}";
4877
+ styleInject(css_248z$e);
4871
4878
 
4872
4879
  var _excluded$k = ["message", "className"];
4873
4880
  ErrorBlock.propTypes = {
@@ -4890,8 +4897,8 @@ function ErrorBlock(_ref) {
4890
4897
  })));
4891
4898
  }
4892
4899
 
4893
- var css_248z$e = ".cweb-info-block {\n position: relative;\n padding: 16px 16px 16px 56px;\n background-color: #e8f5fc;\n border-radius: 8px;\n}\n\n.cweb-info-block:before {\n content: \"\";\n position: absolute;\n left: 16px;\n top: 14px;\n z-index: 1;\n width: 24px;\n height: 23px;\n background: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22%3E %3Cg fill%3D%22none%22 fill-rule%3D%22evenodd%22%3E %3Ccircle cx%3D%2212%22 cy%3D%2212%22 r%3D%2212%22 fill%3D%22%23009FE3%22%2F%3E %3Cpath fill%3D%22%23FFF%22 fill-rule%3D%22nonzero%22 d%3D%22M12.483 7.314l1.128 2.39a.54.54 0 0 0 .405.308l2.522.383c.442.067.618.635.299.96l-1.825 1.86a.58.58 0 0 0-.155.499l.43 2.626c.076.46-.386.811-.78.594l-2.256-1.24a.518.518 0 0 0-.502 0l-2.255 1.24c-.395.217-.857-.134-.782-.594l.431-2.626a.58.58 0 0 0-.155-.499l-1.825-1.86c-.32-.326-.143-.893.299-.96l2.522-.383a.54.54 0 0 0 .405-.308l1.128-2.39a.528.528 0 0 1 .966 0z%22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}";
4894
- styleInject(css_248z$e);
4900
+ var css_248z$f = ".cweb-info-block {\n position: relative;\n padding: 16px 16px 16px 56px;\n background-color: #e8f5fc;\n border-radius: 8px;\n}\n\n.cweb-info-block:before {\n content: \"\";\n position: absolute;\n left: 16px;\n top: 14px;\n z-index: 1;\n width: 24px;\n height: 23px;\n background: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2224%22 height%3D%2224%22 viewBox%3D%220 0 24 24%22%3E %3Cg fill%3D%22none%22 fill-rule%3D%22evenodd%22%3E %3Ccircle cx%3D%2212%22 cy%3D%2212%22 r%3D%2212%22 fill%3D%22%23009FE3%22%2F%3E %3Cpath fill%3D%22%23FFF%22 fill-rule%3D%22nonzero%22 d%3D%22M12.483 7.314l1.128 2.39a.54.54 0 0 0 .405.308l2.522.383c.442.067.618.635.299.96l-1.825 1.86a.58.58 0 0 0-.155.499l.43 2.626c.076.46-.386.811-.78.594l-2.256-1.24a.518.518 0 0 0-.502 0l-2.255 1.24c-.395.217-.857-.134-.782-.594l.431-2.626a.58.58 0 0 0-.155-.499l-1.825-1.86c-.32-.326-.143-.893.299-.96l2.522-.383a.54.54 0 0 0 .405-.308l1.128-2.39a.528.528 0 0 1 .966 0z%22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}";
4901
+ styleInject(css_248z$f);
4895
4902
 
4896
4903
  InfoBlock.propTypes = {
4897
4904
  message: PropTypes.string.isRequired,
@@ -5216,8 +5223,8 @@ var PaginationMenuSmall = function PaginationMenuSmall(props) {
5216
5223
  }));
5217
5224
  };
5218
5225
 
5219
- var css_248z$f = ".customized-select [class*=MenuList] [class*=option]::after {\n position: absolute;\n content: \"\";\n background: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22%3E %3Cg transform%3D%22translate(1.5%2C 0.5)%22%3E %3Cpath fill%3D%22none%22 fill-rule%3D%22evenodd%22 stroke%3D%22%230074DD%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22 stroke-width%3D%222%22 d%3D%22M12.643 3.357L6.03 9.97l-2.674 2.674L0 9.286%22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\") no-repeat center;\n right: 12px;\n height: 1rem;\n width: 1rem;\n}";
5220
- styleInject(css_248z$f);
5226
+ var css_248z$g = ".customized-select [class*=MenuList] [class*=option]::after {\n position: absolute;\n content: \"\";\n background: url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22%3E %3Cg transform%3D%22translate(1.5%2C 0.5)%22%3E %3Cpath fill%3D%22none%22 fill-rule%3D%22evenodd%22 stroke%3D%22%230074DD%22 stroke-linecap%3D%22round%22 stroke-linejoin%3D%22round%22 stroke-width%3D%222%22 d%3D%22M12.643 3.357L6.03 9.97l-2.674 2.674L0 9.286%22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\") no-repeat center;\n right: 12px;\n height: 1rem;\n width: 1rem;\n}";
5227
+ styleInject(css_248z$g);
5221
5228
 
5222
5229
  var SelectDropdownIndicator = function SelectDropdownIndicator(props) {
5223
5230
  return /*#__PURE__*/React__default.createElement(ReactSelect.components.DropdownIndicator, _extends({}, props), /*#__PURE__*/React__default.createElement(ChevronDownIcon, null));
@@ -5605,8 +5612,8 @@ function Table(_ref) {
5605
5612
  }) : null);
5606
5613
  }
5607
5614
 
5608
- var css_248z$g = ".cweb-menu > .cweb-menu-content {\n min-width: 300px;\n border-radius: 4px;\n background-color: #ffffff;\n}\n\n.cweb-menu > .cweb-menu-button {\n display: flex;\n justify-content: flex-start;\n flex-direction: row;\n align-items: flex-start;\n width: 44px;\n height: 44px;\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect width%3D%2244%22 height%3D%2244%22 rx%3D%2222%22 fill%3D%22%23E5F5FC%22%2F%3E%3Ccircle cx%3D%2222%22 cy%3D%2215%22 r%3D%223%22 fill%3D%22%23009FE3%22%2F%3E%3Ccircle cx%3D%2222%22 cy%3D%2222%22 r%3D%223%22 fill%3D%22%23009FE3%22%2F%3E%3Ccircle cx%3D%2222%22 cy%3D%2230%22 r%3D%223%22 fill%3D%22%23009FE3%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n transition: 0.2s ease;\n background-size: contain;\n}\n\n.cweb-menu > .cweb-menu-button:hover {\n width: 44px;\n height: 44px;\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect width%3D%2244%22 height%3D%2244%22 rx%3D%2222%22 fill%3D%22%23B3E3F7%22%2F%3E%3Ccircle cx%3D%2222%22 cy%3D%2215%22 r%3D%223%22 fill%3D%22%23009FE3%22%2F%3E%3Ccircle cx%3D%2222%22 cy%3D%2222%22 r%3D%223%22 fill%3D%22%23009FE3%22%2F%3E%3Ccircle cx%3D%2222%22 cy%3D%2230%22 r%3D%223%22 fill%3D%22%23009FE3%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n transition: 0.2s ease;\n}";
5609
- styleInject(css_248z$g);
5615
+ var css_248z$h = ".cweb-menu > .cweb-menu-content {\n min-width: 300px;\n border-radius: 4px;\n background-color: #ffffff;\n}\n\n.cweb-menu > .cweb-menu-button {\n display: flex;\n justify-content: flex-start;\n flex-direction: row;\n align-items: flex-start;\n width: 44px;\n height: 44px;\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect width%3D%2244%22 height%3D%2244%22 rx%3D%2222%22 fill%3D%22%23E5F5FC%22%2F%3E%3Ccircle cx%3D%2222%22 cy%3D%2215%22 r%3D%223%22 fill%3D%22%23009FE3%22%2F%3E%3Ccircle cx%3D%2222%22 cy%3D%2222%22 r%3D%223%22 fill%3D%22%23009FE3%22%2F%3E%3Ccircle cx%3D%2222%22 cy%3D%2230%22 r%3D%223%22 fill%3D%22%23009FE3%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n transition: 0.2s ease;\n background-size: contain;\n}\n\n.cweb-menu > .cweb-menu-button:hover {\n width: 44px;\n height: 44px;\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect width%3D%2244%22 height%3D%2244%22 rx%3D%2222%22 fill%3D%22%23B3E3F7%22%2F%3E%3Ccircle cx%3D%2222%22 cy%3D%2215%22 r%3D%223%22 fill%3D%22%23009FE3%22%2F%3E%3Ccircle cx%3D%2222%22 cy%3D%2222%22 r%3D%223%22 fill%3D%22%23009FE3%22%2F%3E%3Ccircle cx%3D%2222%22 cy%3D%2230%22 r%3D%223%22 fill%3D%22%23009FE3%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n transition: 0.2s ease;\n}";
5616
+ styleInject(css_248z$h);
5610
5617
 
5611
5618
  var Menu = /*#__PURE__*/function (_PureComponent) {
5612
5619
  _inheritsLoose(Menu, _PureComponent);
@@ -6069,8 +6076,8 @@ var CheckboxListModal = function CheckboxListModal(_ref) {
6069
6076
  }));
6070
6077
  };
6071
6078
 
6072
- var css_248z$h = ".cweb-text {\n font-family: \"Inter\", \"Roboto\", sans-serif;\n font-size: 1rem;\n font-weight: normal;\n line-height: 1.31em;\n color: #2d2d2d;\n margin: 0;\n}\n\n.cweb-text.type-emphasized {\n font-weight: bold;\n}\n\n.cweb-text.type-error {\n color: #e55b56;\n font-size: 0.875rem;\n line-height: 1.25em;\n}\n\n.cweb-text.type-strong {\n font-weight: bold;\n color: #0f3554;\n}\n\n.cweb-text.type-small-dark {\n font-size: 0.875rem;\n line-height: 1.25em;\n color: #2d2d2d;\n}\n\n.cweb-text.type-small {\n font-size: 0.875rem;\n line-height: 1.25em;\n color: #737373;\n}\n\n.cweb-text.type-small-fineprint {\n font-size: 0.875rem;\n line-height: 1.25em;\n color: #737373;\n}\n\n.cweb-text.type-fineprint {\n color: #737373;\n}\n\n.cweb-text.level-inline {\n display: inline;\n}\n\n.cweb-text.level-block {\n display: block;\n}\n\n.in-html-link a:hover {\n text-decoration: underline;\n}";
6073
- styleInject(css_248z$h);
6079
+ var css_248z$i = ".cweb-text {\n font-family: \"Inter\", \"Roboto\", sans-serif;\n font-size: 1rem;\n font-weight: normal;\n line-height: 1.31em;\n color: #2d2d2d;\n margin: 0;\n}\n\n.cweb-text.type-emphasized {\n font-weight: bold;\n}\n\n.cweb-text.type-error {\n color: #e55b56;\n font-size: 0.875rem;\n line-height: 1.25em;\n}\n\n.cweb-text.type-strong {\n font-weight: bold;\n color: #0f3554;\n}\n\n.cweb-text.type-small-dark {\n font-size: 0.875rem;\n line-height: 1.25em;\n color: #2d2d2d;\n}\n\n.cweb-text.type-small {\n font-size: 0.875rem;\n line-height: 1.25em;\n color: #737373;\n}\n\n.cweb-text.type-small-fineprint {\n font-size: 0.875rem;\n line-height: 1.25em;\n color: #737373;\n}\n\n.cweb-text.type-fineprint {\n color: #737373;\n}\n\n.cweb-text.level-inline {\n display: inline;\n}\n\n.cweb-text.level-block {\n display: block;\n}\n\n.in-html-link a:hover {\n text-decoration: underline;\n}";
6080
+ styleInject(css_248z$i);
6074
6081
 
6075
6082
  var TEXT_TYPE_OPTIONS = {
6076
6083
  DEFAULT: "default",
@@ -6118,8 +6125,8 @@ function handleImplicitSelect(implicitSelected, event, list, property) {
6118
6125
  return newList;
6119
6126
  }
6120
6127
 
6121
- var css_248z$i = ".cweb-multiselect {\n display: flex;\n}\n\n.cweb-multiselect .cweb-multiselect-checkbox {\n margin-bottom: 0px;\n margin-top: 0.5rem;\n width: 100%;\n text-transform: capitalize;\n}\n\n.cweb-multiselect .cweb-switch-wrapper {\n display: flex;\n}\n\n.cweb-multiselect .cweb-switch-wrapper .cweb-multiselect-switch {\n width: 50px;\n}\n\n.cweb-multiselect .cweb-switch-wrapper .cweb-multiselect-switch .cweb-checkbox.type-switch.is-checked .cweb-checkbox-icon-container {\n background-color: #6abfa5;\n}\n\n.cweb-multiselect .cweb-switch-wrapper .cweb-switch-title {\n width: 100px;\n color: #737373;\n font-size: 16px;\n line-height: 1.8em;\n}";
6122
- styleInject(css_248z$i);
6128
+ var css_248z$j = ".cweb-multiselect {\n display: flex;\n}\n\n.cweb-multiselect .cweb-multiselect-checkbox {\n margin-bottom: 0px;\n margin-top: 0.5rem;\n width: 100%;\n text-transform: capitalize;\n}\n\n.cweb-multiselect .cweb-switch-wrapper {\n display: flex;\n}\n\n.cweb-multiselect .cweb-switch-wrapper .cweb-multiselect-switch {\n width: 50px;\n}\n\n.cweb-multiselect .cweb-switch-wrapper .cweb-multiselect-switch .cweb-checkbox.type-switch.is-checked .cweb-checkbox-icon-container {\n background-color: #6abfa5;\n}\n\n.cweb-multiselect .cweb-switch-wrapper .cweb-switch-title {\n width: 100px;\n color: #737373;\n font-size: 16px;\n line-height: 1.8em;\n}";
6129
+ styleInject(css_248z$j);
6123
6130
 
6124
6131
  function MultiSelect(_ref) {
6125
6132
  var checkboxList = _ref.checkboxList,
@@ -6450,8 +6457,8 @@ function NavMenu(props) {
6450
6457
  }, /*#__PURE__*/React__default.createElement(NavMenuContent, _extends({}, props))));
6451
6458
  }
6452
6459
 
6453
- var css_248z$j = ".cweb-page {\n width: 100%;\n max-width: 1140px;\n margin: 32px auto 0 auto;\n}\n\n.cweb-page .cweb-page-breadcrumbs {\n margin-bottom: 16px;\n}\n\n.cweb-page .page-spinner {\n margin-left: 8px;\n margin-bottom: 4px;\n}\n\n.cweb-page .page-spinner img {\n width: 21px;\n}\n\n.cweb-page .cweb-page-header {\n display: flex;\n align-items: center;\n width: 100%;\n flex-grow: 0;\n}\n\n.cweb-page .cweb-page-header .cweb-page-title {\n display: inline;\n}\n\n.cweb-page .cweb-page-header.accessory-right {\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n}\n\n.cweb-page .cweb-page-header.accessory-bottom {\n flex-direction: column;\n align-items: flex-start;\n}\n\n@media screen and (max-width: 426px) {\n .cweb-page .cweb-page-header.accessory-bottom {\n max-width: 75vw;\n }\n\n .cweb-page .cweb-page-header.accessory-bottom img {\n max-width: 10vw;\n }\n\n .cweb-page .cweb-page-header.accessory-bottom button p {\n font-size: 4vw;\n }\n}\n\n.cweb-page .cweb-page-header.accessory-bottom .cweb-page-title {\n margin-bottom: 8px;\n display: inline;\n}";
6454
- styleInject(css_248z$j);
6460
+ var css_248z$k = ".cweb-page {\n width: 100%;\n max-width: 1140px;\n margin: 32px auto 0 auto;\n}\n\n.cweb-page .cweb-page-breadcrumbs {\n margin-bottom: 16px;\n}\n\n.cweb-page .page-spinner {\n margin-left: 8px;\n margin-bottom: 4px;\n}\n\n.cweb-page .page-spinner img {\n width: 21px;\n}\n\n.cweb-page .cweb-page-header {\n display: flex;\n align-items: center;\n width: 100%;\n flex-grow: 0;\n}\n\n.cweb-page .cweb-page-header .cweb-page-title {\n display: inline;\n}\n\n.cweb-page .cweb-page-header.accessory-right {\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n}\n\n.cweb-page .cweb-page-header.accessory-bottom {\n flex-direction: column;\n align-items: flex-start;\n}\n\n@media screen and (max-width: 426px) {\n .cweb-page .cweb-page-header.accessory-bottom {\n max-width: 75vw;\n }\n\n .cweb-page .cweb-page-header.accessory-bottom img {\n max-width: 10vw;\n }\n\n .cweb-page .cweb-page-header.accessory-bottom button p {\n font-size: 4vw;\n }\n}\n\n.cweb-page .cweb-page-header.accessory-bottom .cweb-page-title {\n margin-bottom: 8px;\n display: inline;\n}";
6461
+ styleInject(css_248z$k);
6455
6462
 
6456
6463
  /**
6457
6464
  * Renders page's content, if `isLoading` is false otherwise shows loading indicator.
@@ -6762,7 +6769,8 @@ var PageHeader = function PageHeader(_ref) {
6762
6769
  title = _ref.title,
6763
6770
  contained = _ref.contained,
6764
6771
  className = _ref.className,
6765
- truncateBreadcrumbsAfter = _ref.truncateBreadcrumbsAfter;
6772
+ truncateBreadcrumbsAfter = _ref.truncateBreadcrumbsAfter,
6773
+ banner = _ref.banner;
6766
6774
  var withContained = {
6767
6775
  "max-w-3xl m-auto": contained
6768
6776
  };
@@ -6778,7 +6786,21 @@ var PageHeader = function PageHeader(_ref) {
6778
6786
  truncateAfter: truncateBreadcrumbsAfter
6779
6787
  }), /*#__PURE__*/React__default.createElement("div", {
6780
6788
  className: "mb-4 border-b border-slate-100"
6781
- })), /*#__PURE__*/React__default.createElement("div", {
6789
+ })), banner && /*#__PURE__*/React__default.createElement(NotificationBanner, {
6790
+ noBorder: true,
6791
+ color: banner.color,
6792
+ "data-test-id": "page-header-banner-" + title
6793
+ }, /*#__PURE__*/React__default.createElement("div", {
6794
+ className: "flex flex-col"
6795
+ }, banner.title && /*#__PURE__*/React__default.createElement(Text, {
6796
+ color: "current",
6797
+ type: "strong",
6798
+ text: banner.title
6799
+ }), /*#__PURE__*/React__default.createElement(Text, {
6800
+ color: "current",
6801
+ text: banner.text.content,
6802
+ containsDangerousHtml: banner.text.isHTML
6803
+ }))), /*#__PURE__*/React__default.createElement("div", {
6782
6804
  className: classNames("flex flex-row items-center justify-between", withContained)
6783
6805
  }, /*#__PURE__*/React__default.createElement("div", {
6784
6806
  className: "flex flex-row items-center space-x-3"
@@ -6960,8 +6982,8 @@ var PreviewPhone = function PreviewPhone(_ref) {
6960
6982
  }))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
6961
6983
  };
6962
6984
 
6963
- var css_248z$k = ".cweb-radio {\n outline: none;\n}\n\n.cweb-radio .cweb-radio-input {\n -webkit-appearance: none;\n height: 1px;\n opacity: 0;\n width: 1px;\n}\n\n.cweb-radio .cweb-radio-label-text {\n margin-left: 8px;\n -ms-user-select: none;\n user-select: none;\n text-align: left;\n}\n\n.cweb-radio .cweb-radio-label {\n display: flex;\n align-items: center;\n margin-bottom: 0;\n}\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\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\n.cweb-radio.is-focused .cweb-radio-icon-container {\n border-color: #0074dd;\n}\n\n.cweb-radio.is-checked .cweb-radio-icon {\n width: 5px;\n height: 5px;\n background-color: #ffffff;\n border-radius: 50%;\n}";
6964
- styleInject(css_248z$k);
6985
+ var css_248z$l = ".cweb-radio {\n outline: none;\n}\n\n.cweb-radio .cweb-radio-input {\n -webkit-appearance: none;\n height: 1px;\n opacity: 0;\n width: 1px;\n}\n\n.cweb-radio .cweb-radio-label-text {\n margin-left: 8px;\n -ms-user-select: none;\n user-select: none;\n text-align: left;\n}\n\n.cweb-radio .cweb-radio-label {\n display: flex;\n align-items: center;\n margin-bottom: 0;\n}\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\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\n.cweb-radio.is-focused .cweb-radio-icon-container {\n border-color: #0074dd;\n}\n\n.cweb-radio.is-checked .cweb-radio-icon {\n width: 5px;\n height: 5px;\n background-color: #ffffff;\n border-radius: 50%;\n}";
6986
+ styleInject(css_248z$l);
6965
6987
 
6966
6988
  /**
6967
6989
  * @deprecated: use RadioV2 instead
@@ -7063,8 +7085,8 @@ Radio.propTypes = {
7063
7085
  onChange: PropTypes.func
7064
7086
  };
7065
7087
 
7066
- var css_248z$l = ".cweb-radio-group {\n display: flex;\n justify-content: flex-start;\n flex-direction: row;\n align-items: center;\n}\n\n.cweb-radio-group > .cweb-radio {\n flex: 0 0 auto;\n margin-right: 8px;\n}\n\n.cweb-radio-group .cweb-form-field {\n margin-bottom: 12px;\n}\n\n.cweb-radio-group .cweb-form-info-text {\n margin-left: 1.5rem;\n}\n\n.cweb-radio-group.vertical {\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n align-items: flex-start;\n}\n\n.cweb-radio-group.vertical .cweb-form-field:not(:last-child) {\n margin-bottom: 8px;\n}\n\n.cweb-radio-group.vertical > .cweb-radio {\n flex: 0 0 auto;\n margin-bottom: 8px;\n}\n\n.cweb-radio-group.hasError > .cweb-radio .cweb-radio-icon-container {\n border: 1px solid #ff6266 !important;\n}";
7067
- styleInject(css_248z$l);
7088
+ var css_248z$m = ".cweb-radio-group {\n display: flex;\n justify-content: flex-start;\n flex-direction: row;\n align-items: center;\n}\n\n.cweb-radio-group > .cweb-radio {\n flex: 0 0 auto;\n margin-right: 8px;\n}\n\n.cweb-radio-group .cweb-form-field {\n margin-bottom: 12px;\n}\n\n.cweb-radio-group .cweb-form-info-text {\n margin-left: 1.5rem;\n}\n\n.cweb-radio-group.vertical {\n display: flex;\n justify-content: flex-start;\n flex-direction: column;\n align-items: flex-start;\n}\n\n.cweb-radio-group.vertical .cweb-form-field:not(:last-child) {\n margin-bottom: 8px;\n}\n\n.cweb-radio-group.vertical > .cweb-radio {\n flex: 0 0 auto;\n margin-bottom: 8px;\n}\n\n.cweb-radio-group.hasError > .cweb-radio .cweb-radio-icon-container {\n border: 1px solid #ff6266 !important;\n}";
7089
+ styleInject(css_248z$m);
7068
7090
 
7069
7091
  var _excluded$n = ["className", "radioClassName", "name", "selectedOption", "isVertical", "radioOptions", "onChange", "error", "isDisabled"];
7070
7092
  /**
@@ -7124,8 +7146,8 @@ RadioGroup.propTypes = {
7124
7146
  onChange: PropTypes.func
7125
7147
  };
7126
7148
 
7127
- var css_248z$m = ".cweb-section .cweb-button:last-of-type {\n margin-right: 24px;\n}\n\n.cweb-section .cweb-button:not(:last-of-type) {\n margin-right: 8px;\n}\n\n.cweb-section .cweb-button.add-button, .cweb-section .cweb-button.edit-button, .cweb-section .cweb-button.delete-button {\n margin-left: auto;\n width: 32px;\n height: 32px;\n}\n\n.cweb-section .cweb-button.add-button {\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle cx%3D%2222%22 cy%3D%2222%22 r%3D%2222%22 fill%3D%22white%22%2F%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23009FE3%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M22 32C23.1046 32 24 31.1046 24 30L24 24H30C31.1046 24 32 23.1046 32 22C32 20.8954 31.1046 20 30 20H24L24 14C24 12.8954 23.1046 12 22 12C20.8954 12 20 12.8954 20 14L20 20H14C12.8954 20 12 20.8954 12 22C12 23.1046 12.8954 24 14 24H20L20 30C20 31.1046 20.8954 32 22 32Z%22 fill%3D%22%23009FE3%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n\n.cweb-section .cweb-button.add-button:hover, .cweb-section .cweb-button.add-button:active, .cweb-section .cweb-button.add-button:focus {\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%230A78B2%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M21 12C19.8954 12 19 12.8954 19 14V19L14 19C12.8954 19 12 19.8954 12 21V23C12 24.1046 12.8954 25 14 25H19V30C19 31.1046 19.8954 32 21 32H23C24.1046 32 25 31.1046 25 30V25H30C31.1046 25 32 24.1046 32 23V21C32 19.8954 31.1046 19 30 19L25 19V14C25 12.8954 24.1046 12 23 12H21Z%22 fill%3D%22%23007BBB%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n\n.cweb-section .cweb-button.edit-button {\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23009FE3%22%2F%3E%3Cpath d%3D%22M13.5643 27.1001C13.4169 26.9527 13.1433 27.0159 13.1012 27.2266L12.0065 31.6507C11.9644 31.8614 12.1328 32.051 12.3433 31.9878L16.7851 30.9134C16.9956 30.8712 17.0799 30.5973 16.9114 30.4499L13.5643 27.1001Z%22 fill%3D%22%23009FE3%22%2F%3E%3Cpath d%3D%22M26.2161 14.1222C26.1109 14.0169 25.9214 14.0169 25.8161 14.1222L14.4484 25.4987C14.3432 25.604 14.3432 25.7936 14.4484 25.8989L18.1114 29.5647C18.2166 29.67 18.4061 29.67 18.5113 29.5647L29.879 18.1882C29.9843 18.0829 29.9843 17.8933 29.879 17.788L26.2161 14.1222Z%22 fill%3D%22%23009FE3%22%2F%3E%3Cpath d%3D%22M31.1633 12.8374C30.0475 11.7209 28.2161 11.7209 27.1004 12.8374C27.0583 12.8796 27.0583 12.9217 27.1004 12.9638L31.037 16.9035C31.0791 16.9456 31.1212 16.9456 31.1633 16.9035C32.279 15.7869 32.279 13.954 31.1633 12.8374Z%22 fill%3D%22%23009FE3%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n\n.cweb-section .cweb-button.edit-button:hover, .cweb-section .cweb-button.edit-button:active, .cweb-section .cweb-button.edit-button:focus {\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23007BBB%22%2F%3E%3Cpath d%3D%22M13.5643 27.1001C13.4169 26.9527 13.1433 27.0159 13.1012 27.2266L12.0065 31.6507C11.9644 31.8614 12.1328 32.051 12.3433 31.9878L16.7851 30.9134C16.9956 30.8712 17.0799 30.5973 16.9114 30.4499L13.5643 27.1001Z%22 fill%3D%22%230A78B2%22%2F%3E%3Cpath d%3D%22M26.2161 14.1222C26.1109 14.0169 25.9214 14.0169 25.8161 14.1222L14.4484 25.4987C14.3432 25.604 14.3432 25.7936 14.4484 25.8989L18.1114 29.5647C18.2166 29.67 18.4061 29.67 18.5113 29.5647L29.879 18.1882C29.9843 18.0829 29.9843 17.8933 29.879 17.788L26.2161 14.1222Z%22 fill%3D%22%230A78B2%22%2F%3E%3Cpath d%3D%22M31.1633 12.8374C30.0475 11.7209 28.2161 11.7209 27.1004 12.8374C27.0583 12.8796 27.0583 12.9217 27.1004 12.9638L31.037 16.9035C31.0791 16.9456 31.1212 16.9456 31.1633 16.9035C32.279 15.7869 32.279 13.954 31.1633 12.8374Z%22 fill%3D%22%230A78B2%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n\n.cweb-section .cweb-button.delete-button {\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23FF6266%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M13 12C12.4477 12 12 12.4477 12 13C12 13.5523 12.4477 14 13 14H31C31.5523 14 32 13.5523 32 13C32 12.4477 31.5523 12 31 12H13ZM14 16H30V30C30 31.1046 29.1046 32 28 32H16C14.8954 32 14 31.1046 14 30V16ZM17 18H19V30H17V18ZM21 18H23V30H21V18ZM27 18H25V30H27V18Z%22 fill%3D%22%23FF6266%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n\n.cweb-section .cweb-button.delete-button:hover, .cweb-section .cweb-button.delete-button:active, .cweb-section .cweb-button.delete-button:focus {\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%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%22M13 12C12.4477 12 12 12.4477 12 13C12 13.5523 12.4477 14 13 14H31C31.5523 14 32 13.5523 32 13C32 12.4477 31.5523 12 31 12H13ZM14 16H30V30C30 31.1046 29.1046 32 28 32H16C14.8954 32 14 31.1046 14 30V16ZM17 18H19V30H17V18ZM21 18H23V30H21V18ZM27 18H25V30H27V18Z%22 fill%3D%22%23FC494E%22%2F%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23FC494E%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n\n.cweb-section > .cweb-section-header {\n display: flex;\n justify-content: space-between;\n flex-direction: row;\n align-items: center;\n border-bottom: 1px solid #eeeeee;\n width: 100%;\n padding: 18px 24px;\n}\n\n.cweb-section > .cweb-section-footer {\n display: flex;\n justify-content: space-between;\n flex-direction: row;\n align-items: center;\n border-top: 1px solid #eeeeee;\n width: 100%;\n padding: 1rem 24px 1rem 24px;\n}\n\n.cweb-section > .cweb-section-footer img {\n width: 32px;\n height: 32px;\n}";
7128
- styleInject(css_248z$m);
7149
+ var css_248z$n = ".cweb-section .cweb-button:last-of-type {\n margin-right: 24px;\n}\n\n.cweb-section .cweb-button:not(:last-of-type) {\n margin-right: 8px;\n}\n\n.cweb-section .cweb-button.add-button, .cweb-section .cweb-button.edit-button, .cweb-section .cweb-button.delete-button {\n margin-left: auto;\n width: 32px;\n height: 32px;\n}\n\n.cweb-section .cweb-button.add-button {\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle cx%3D%2222%22 cy%3D%2222%22 r%3D%2222%22 fill%3D%22white%22%2F%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23009FE3%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M22 32C23.1046 32 24 31.1046 24 30L24 24H30C31.1046 24 32 23.1046 32 22C32 20.8954 31.1046 20 30 20H24L24 14C24 12.8954 23.1046 12 22 12C20.8954 12 20 12.8954 20 14L20 20H14C12.8954 20 12 20.8954 12 22C12 23.1046 12.8954 24 14 24H20L20 30C20 31.1046 20.8954 32 22 32Z%22 fill%3D%22%23009FE3%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n\n.cweb-section .cweb-button.add-button:hover, .cweb-section .cweb-button.add-button:active, .cweb-section .cweb-button.add-button:focus {\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%230A78B2%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M21 12C19.8954 12 19 12.8954 19 14V19L14 19C12.8954 19 12 19.8954 12 21V23C12 24.1046 12.8954 25 14 25H19V30C19 31.1046 19.8954 32 21 32H23C24.1046 32 25 31.1046 25 30V25H30C31.1046 25 32 24.1046 32 23V21C32 19.8954 31.1046 19 30 19L25 19V14C25 12.8954 24.1046 12 23 12H21Z%22 fill%3D%22%23007BBB%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n\n.cweb-section .cweb-button.edit-button {\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23009FE3%22%2F%3E%3Cpath d%3D%22M13.5643 27.1001C13.4169 26.9527 13.1433 27.0159 13.1012 27.2266L12.0065 31.6507C11.9644 31.8614 12.1328 32.051 12.3433 31.9878L16.7851 30.9134C16.9956 30.8712 17.0799 30.5973 16.9114 30.4499L13.5643 27.1001Z%22 fill%3D%22%23009FE3%22%2F%3E%3Cpath d%3D%22M26.2161 14.1222C26.1109 14.0169 25.9214 14.0169 25.8161 14.1222L14.4484 25.4987C14.3432 25.604 14.3432 25.7936 14.4484 25.8989L18.1114 29.5647C18.2166 29.67 18.4061 29.67 18.5113 29.5647L29.879 18.1882C29.9843 18.0829 29.9843 17.8933 29.879 17.788L26.2161 14.1222Z%22 fill%3D%22%23009FE3%22%2F%3E%3Cpath d%3D%22M31.1633 12.8374C30.0475 11.7209 28.2161 11.7209 27.1004 12.8374C27.0583 12.8796 27.0583 12.9217 27.1004 12.9638L31.037 16.9035C31.0791 16.9456 31.1212 16.9456 31.1633 16.9035C32.279 15.7869 32.279 13.954 31.1633 12.8374Z%22 fill%3D%22%23009FE3%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n\n.cweb-section .cweb-button.edit-button:hover, .cweb-section .cweb-button.edit-button:active, .cweb-section .cweb-button.edit-button:focus {\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23007BBB%22%2F%3E%3Cpath d%3D%22M13.5643 27.1001C13.4169 26.9527 13.1433 27.0159 13.1012 27.2266L12.0065 31.6507C11.9644 31.8614 12.1328 32.051 12.3433 31.9878L16.7851 30.9134C16.9956 30.8712 17.0799 30.5973 16.9114 30.4499L13.5643 27.1001Z%22 fill%3D%22%230A78B2%22%2F%3E%3Cpath d%3D%22M26.2161 14.1222C26.1109 14.0169 25.9214 14.0169 25.8161 14.1222L14.4484 25.4987C14.3432 25.604 14.3432 25.7936 14.4484 25.8989L18.1114 29.5647C18.2166 29.67 18.4061 29.67 18.5113 29.5647L29.879 18.1882C29.9843 18.0829 29.9843 17.8933 29.879 17.788L26.2161 14.1222Z%22 fill%3D%22%230A78B2%22%2F%3E%3Cpath d%3D%22M31.1633 12.8374C30.0475 11.7209 28.2161 11.7209 27.1004 12.8374C27.0583 12.8796 27.0583 12.9217 27.1004 12.9638L31.037 16.9035C31.0791 16.9456 31.1212 16.9456 31.1633 16.9035C32.279 15.7869 32.279 13.954 31.1633 12.8374Z%22 fill%3D%22%230A78B2%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n\n.cweb-section .cweb-button.delete-button {\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%22 fill%3D%22none%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23FF6266%22%2F%3E%3Cpath fill-rule%3D%22evenodd%22 clip-rule%3D%22evenodd%22 d%3D%22M13 12C12.4477 12 12 12.4477 12 13C12 13.5523 12.4477 14 13 14H31C31.5523 14 32 13.5523 32 13C32 12.4477 31.5523 12 31 12H13ZM14 16H30V30C30 31.1046 29.1046 32 28 32H16C14.8954 32 14 31.1046 14 30V16ZM17 18H19V30H17V18ZM21 18H23V30H21V18ZM27 18H25V30H27V18Z%22 fill%3D%22%23FF6266%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n\n.cweb-section .cweb-button.delete-button:hover, .cweb-section .cweb-button.delete-button:active, .cweb-section .cweb-button.delete-button:focus {\n background: url(\"data:image/svg+xml,%3Csvg width%3D%2244%22 height%3D%2244%22 viewBox%3D%220 0 44 44%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%22M13 12C12.4477 12 12 12.4477 12 13C12 13.5523 12.4477 14 13 14H31C31.5523 14 32 13.5523 32 13C32 12.4477 31.5523 12 31 12H13ZM14 16H30V30C30 31.1046 29.1046 32 28 32H16C14.8954 32 14 31.1046 14 30V16ZM17 18H19V30H17V18ZM21 18H23V30H21V18ZM27 18H25V30H27V18Z%22 fill%3D%22%23FC494E%22%2F%3E%3Crect x%3D%220.5%22 y%3D%220.5%22 width%3D%2243%22 height%3D%2243%22 rx%3D%2221.5%22 stroke%3D%22%23FC494E%22%2F%3E%3C%2Fsvg%3E\") no-repeat center;\n background-size: contain;\n}\n\n.cweb-section > .cweb-section-header {\n display: flex;\n justify-content: space-between;\n flex-direction: row;\n align-items: center;\n border-bottom: 1px solid #eeeeee;\n width: 100%;\n padding: 18px 24px;\n}\n\n.cweb-section > .cweb-section-footer {\n display: flex;\n justify-content: space-between;\n flex-direction: row;\n align-items: center;\n border-top: 1px solid #eeeeee;\n width: 100%;\n padding: 1rem 24px 1rem 24px;\n}\n\n.cweb-section > .cweb-section-footer img {\n width: 32px;\n height: 32px;\n}";
7150
+ styleInject(css_248z$n);
7129
7151
 
7130
7152
  var _excluded$o = ["title", "buttons", "footer", "children", "className", "isLoading", "loadingIndicatorProps"];
7131
7153
  function Section(_ref) {
@@ -7165,8 +7187,8 @@ function Section(_ref) {
7165
7187
  }, footer));
7166
7188
  }
7167
7189
 
7168
- var css_248z$n = ".cweb-list-item {\n display: flex;\n justify-content: flex-start;\n flex-direction: row;\n align-items: center;\n padding: 16px 0 16px 0;\n border-bottom: 1px solid #eeeeee;\n}\n\n.cweb-list-item:last-child {\n border-bottom: none;\n}\n\n.cweb-list-item.cweb-list-item-clickable {\n cursor: pointer;\n}\n\n.cweb-list-item.cweb-list-item-clickable:hover {\n background-color: #f2fafd;\n}";
7169
- styleInject(css_248z$n);
7190
+ var css_248z$o = ".cweb-list-item {\n display: flex;\n justify-content: flex-start;\n flex-direction: row;\n align-items: center;\n padding: 16px 0 16px 0;\n border-bottom: 1px solid #eeeeee;\n}\n\n.cweb-list-item:last-child {\n border-bottom: none;\n}\n\n.cweb-list-item.cweb-list-item-clickable {\n cursor: pointer;\n}\n\n.cweb-list-item.cweb-list-item-clickable:hover {\n background-color: #f2fafd;\n}";
7191
+ styleInject(css_248z$o);
7170
7192
 
7171
7193
  var _excluded$p = ["children", "className", "onClick"];
7172
7194
  var SectionItem = function SectionItem(props) {
@@ -7315,8 +7337,8 @@ var SettingsMenuButton = function SettingsMenuButton(props) {
7315
7337
  })));
7316
7338
  };
7317
7339
 
7318
- var css_248z$o = ".cweb-switcher-item {\n display: flex;\n justify-content: center;\n flex-direction: row;\n align-items: center;\n}\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\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon {\n display: flex;\n align-items: center;\n}\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\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active {\n display: none;\n}\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\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\n.cweb-switcher-item.is-selected, .cweb-switcher-item:hover, .cweb-switcher-item:active {\n border-color: #0074dd;\n z-index: 1;\n}\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\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\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\n.cweb-switcher-item.is-disabled {\n pointer-events: none;\n}";
7319
- styleInject(css_248z$o);
7340
+ var css_248z$p = ".cweb-switcher-item {\n display: flex;\n justify-content: center;\n flex-direction: row;\n align-items: center;\n}\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\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon {\n display: flex;\n align-items: center;\n}\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\n.cweb-switcher-item .cweb-switcher-item-link .cweb-switcher-item-link-icon .cweb-switcher-item-link-icon-active {\n display: none;\n}\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\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\n.cweb-switcher-item.is-selected, .cweb-switcher-item:hover, .cweb-switcher-item:active {\n border-color: #0074dd;\n z-index: 1;\n}\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\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\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\n.cweb-switcher-item.is-disabled {\n pointer-events: none;\n}";
7341
+ styleInject(css_248z$p);
7320
7342
 
7321
7343
  SwitcherItem.propTypes = {
7322
7344
  name: PropTypes.string,
@@ -7831,8 +7853,8 @@ var TagGroup = function TagGroup(_ref) {
7831
7853
  }));
7832
7854
  };
7833
7855
 
7834
- var css_248z$p = ".cweb-textarea {\n border: 1px solid #cccccc;\n border-radius: 4px;\n outline: none;\n background-color: #ffffff;\n resize: none;\n}\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\n.cweb-textarea.resizable {\n resize: both;\n}\n\n.cweb-textarea.resizable-x {\n resize: horizontal;\n}\n\n.cweb-textarea.resizable-y {\n resize: vertical;\n}\n\n.cweb-textarea:-ms-input-placeholder {\n color: #737373;\n}\n\n.cweb-textarea::placeholder {\n color: #737373;\n}\n\n.cweb-textarea:-ms-input-placeholder {\n color: #64748b !important;\n}\n\n.cweb-textarea::-ms-input-placeholder {\n color: #64748b;\n}\n\n.cweb-textarea:focus {\n border-color: #0074dd;\n}\n\n.cweb-textarea:disabled {\n cursor: not-allowed;\n}\n\n.cweb-textarea.has-error {\n border: 1px solid #ff6266;\n color: #ff6266;\n}";
7835
- styleInject(css_248z$p);
7856
+ var css_248z$q = ".cweb-textarea {\n border: 1px solid #cccccc;\n border-radius: 4px;\n outline: none;\n background-color: #ffffff;\n resize: none;\n}\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\n.cweb-textarea.resizable {\n resize: both;\n}\n\n.cweb-textarea.resizable-x {\n resize: horizontal;\n}\n\n.cweb-textarea.resizable-y {\n resize: vertical;\n}\n\n.cweb-textarea:-ms-input-placeholder {\n color: #737373;\n}\n\n.cweb-textarea::placeholder {\n color: #737373;\n}\n\n.cweb-textarea:-ms-input-placeholder {\n color: #64748b !important;\n}\n\n.cweb-textarea::-ms-input-placeholder {\n color: #64748b;\n}\n\n.cweb-textarea:focus {\n border-color: #0074dd;\n}\n\n.cweb-textarea:disabled {\n cursor: not-allowed;\n}\n\n.cweb-textarea.has-error {\n border: 1px solid #ff6266;\n color: #ff6266;\n}";
7857
+ styleInject(css_248z$q);
7836
7858
 
7837
7859
  var _excluded$s = ["className", "value", "name", "placeholder", "maxLength", "rows", "resizable", "isDisabled", "icon", "onChange", "onBlur", "onFocus", "onKeyPress", "onKeyDown", "onCtrlEnter"];
7838
7860
  var resizeTypes = {
@@ -7902,8 +7924,8 @@ var Textarea = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
7902
7924
  }));
7903
7925
  });
7904
7926
 
7905
- var css_248z$q = ".ql-editor {\n resize: vertical;\n min-height: 10rem;\n}\n\n.ql-snow.ql-toolbar {\n display: block;\n background: #f1f5f9;\n border-top-left-radius: 0.5em;\n border-top-right-radius: 0.5em;\n margin-top: 0.5em;\n}";
7906
- styleInject(css_248z$q);
7927
+ var css_248z$r = ".ql-editor {\n resize: vertical;\n min-height: 10rem;\n}\n\n.ql-snow.ql-toolbar {\n display: block;\n background: #f1f5f9;\n border-top-left-radius: 0.5em;\n border-top-right-radius: 0.5em;\n margin-top: 0.5em;\n}";
7928
+ styleInject(css_248z$r);
7907
7929
 
7908
7930
  function TextEditor(_ref) {
7909
7931
  var defaultValue = _ref.defaultValue,
@@ -7957,8 +7979,8 @@ TextEditor.propTypes = {
7957
7979
  onValueChange: PropTypes.func.isRequired
7958
7980
  };
7959
7981
 
7960
- var css_248z$r = ".editor .rdw-editor {\n overflow-y: auto;\n}\n\n.editor .rdw-editor .rdw-link-modal {\n width: 20rem;\n height: 19rem;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-label,\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-target-option {\n font-weight: normal;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-input {\n margin-bottom: 1rem;\n font-size: 16px;\n font-weight: normal;\n line-height: 21px;\n color: #2d2d2d;\n height: 44px;\n border: 1px solid #cccccc;\n border-radius: 4px;\n outline: none;\n background-color: #ffffff;\n padding: 12px;\n caret-color: #0a78b2;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-buttonsection {\n display: flex;\n flex-direction: row-reverse;\n align-items: center;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-buttonsection .rdw-link-modal-btn {\n border-radius: 1.375rem;\n width: 6.5rem;\n height: 2.75rem;\n border: 1px solid #009fe3;\n background-color: transparent;\n color: #009fe3;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-buttonsection .rdw-link-modal-btn:first-child,\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-buttonsection .rdw-link-modal-btn:disabled {\n background: #009fe3;\n color: #ffffff;\n}\n\n.editor .rdw-editor .rdw-embedded-modal {\n width: 22rem;\n height: 15rem;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-link-input,\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-size-input {\n font-size: 16px;\n font-weight: normal;\n line-height: 21px;\n color: #2d2d2d;\n height: 44px;\n border: 1px solid #cccccc;\n border-radius: 4px;\n outline: none;\n background-color: #ffffff;\n padding: 12px;\n caret-color: #0a78b2;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-link-input {\n width: 100%;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-size-input {\n width: 90%;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-btn-section {\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-btn-section .rdw-embedded-modal-btn {\n border-radius: 1.375rem;\n width: 6.5rem;\n height: 2.75rem;\n border: 1px solid #009fe3;\n background-color: transparent;\n color: #009fe3;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-btn-section .rdw-embedded-modal-btn:first-child,\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-btn-section .rdw-embedded-modal-btn:disabled {\n background: #009fe3;\n color: #ffffff;\n}\n\n.editor .rdw-editor .rdw-editor-main {\n min-height: 14rem;\n overflow: hidden;\n}\n\n.editor .rdw-editor .rdw-editor-main .DraftEditor-root {\n margin: 0 12px;\n}";
7961
- styleInject(css_248z$r);
7982
+ var css_248z$s = ".editor .rdw-editor {\n overflow-y: auto;\n}\n\n.editor .rdw-editor .rdw-link-modal {\n width: 20rem;\n height: 19rem;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-label,\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-target-option {\n font-weight: normal;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-input {\n margin-bottom: 1rem;\n font-size: 16px;\n font-weight: normal;\n line-height: 21px;\n color: #2d2d2d;\n height: 44px;\n border: 1px solid #cccccc;\n border-radius: 4px;\n outline: none;\n background-color: #ffffff;\n padding: 12px;\n caret-color: #0a78b2;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-buttonsection {\n display: flex;\n flex-direction: row-reverse;\n align-items: center;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-buttonsection .rdw-link-modal-btn {\n border-radius: 1.375rem;\n width: 6.5rem;\n height: 2.75rem;\n border: 1px solid #009fe3;\n background-color: transparent;\n color: #009fe3;\n}\n\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-buttonsection .rdw-link-modal-btn:first-child,\n.editor .rdw-editor .rdw-link-modal .rdw-link-modal-buttonsection .rdw-link-modal-btn:disabled {\n background: #009fe3;\n color: #ffffff;\n}\n\n.editor .rdw-editor .rdw-embedded-modal {\n width: 22rem;\n height: 15rem;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-link-input,\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-size-input {\n font-size: 16px;\n font-weight: normal;\n line-height: 21px;\n color: #2d2d2d;\n height: 44px;\n border: 1px solid #cccccc;\n border-radius: 4px;\n outline: none;\n background-color: #ffffff;\n padding: 12px;\n caret-color: #0a78b2;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-link-input {\n width: 100%;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-size-input {\n width: 90%;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-btn-section {\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-btn-section .rdw-embedded-modal-btn {\n border-radius: 1.375rem;\n width: 6.5rem;\n height: 2.75rem;\n border: 1px solid #009fe3;\n background-color: transparent;\n color: #009fe3;\n}\n\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-btn-section .rdw-embedded-modal-btn:first-child,\n.editor .rdw-editor .rdw-embedded-modal .rdw-embedded-modal-btn-section .rdw-embedded-modal-btn:disabled {\n background: #009fe3;\n color: #ffffff;\n}\n\n.editor .rdw-editor .rdw-editor-main {\n min-height: 14rem;\n overflow: hidden;\n}\n\n.editor .rdw-editor .rdw-editor-main .DraftEditor-root {\n margin: 0 12px;\n}";
7983
+ styleInject(css_248z$s);
7962
7984
 
7963
7985
  var TextEditorV2 = function TextEditorV2(_ref) {
7964
7986
  var defaultValue = _ref.defaultValue,