@zextras/carbonio-design-system 2.1.1 → 2.2.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [2.2.0](https://github.com/Zextras/carbonio-design-system/compare/v2.1.1...v2.2.0) (2023-07-06)
+
+
+### Features
+
+* **icons:** update icon set ([8afdea7](https://github.com/Zextras/carbonio-design-system/commit/8afdea7bbe669a757b17e42073564b90bc3c879f)), closes [#194](https://github.com/Zextras/carbonio-design-system/issues/194)
+
+
+### Bug Fixes
+
+* **TextArea:** update height when value change in controlled mode ([1700910](https://github.com/Zextras/carbonio-design-system/commit/170091078bab986796e5a55f438a9b26277a55ef)), closes [#196](https://github.com/Zextras/carbonio-design-system/issues/196)
+
 ### [2.1.1](https://github.com/Zextras/carbonio-design-system/compare/v2.1.0...v2.1.1) (2023-06-15)
 
 

package/dist/zapp-ui.bundle.d.ts

@@ -365,7 +365,13 @@ export declare type ChipAction = {
     type: 'icon';
 });
 
-export declare const ChipInput: ChipInputType<any>;
+declare type ChipInput<TValue> = React_2.ForwardRefExoticComponent<ChipInputProps<TValue> & React_2.RefAttributes<HTMLDivElement>> & {
+    _newId?: number;
+};
+
+declare const ChipInput: ChipInput<any>;
+export { ChipInput }
+export { ChipInput as ChipInputType }
 
 export declare interface ChipInputProps<TValue = unknown> extends Omit<ContainerProps, 'defaultValue' | 'onChange'> {
     /** ref to the input element */
@@ -470,10 +476,6 @@ export declare interface ChipInputProps<TValue = unknown> extends Omit<Container
     maxHeight?: string;
 }
 
-export declare type ChipInputType<TValue> = React_2.ForwardRefExoticComponent<ChipInputProps<TValue> & React_2.RefAttributes<HTMLDivElement>> & {
-    _newId?: number;
-};
-
 export declare type ChipItem<TValue = unknown> = {
     label?: string;
 } & ChipProps & {
@@ -1676,7 +1678,7 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
  declare type ShapeType = 'round' | 'square';
 
  export declare type Shimmer = React_2.VFC<SkeletonProps> & {
-     [K in keyof typeof ShimmerObject]: React_2.VFC<Parameters<typeof ShimmerObject[K]>[number]>;
+     [K in keyof typeof ShimmerObject]: React_2.VFC<Parameters<(typeof ShimmerObject)[K]>[number]>;
  };
 
  export declare const Shimmer: Shimmer;

package/dist/zapp-ui.bundle.js

@@ -4679,7 +4679,7 @@ const Icon = styled__default["default"](IconBase).withConfig({
 const AvatarContainer = styled__default["default"].div.withConfig({
   displayName: "Avatar__AvatarContainer",
   componentId: "sc-1kkwg84-0"
-})(["box-sizing:border-box;display:flex;justify-content:center;align-items:center;min-width:", ";max-width:", ";max-height:", ";min-height:", ";background:", ";border-radius:", ";border:", ";"], _ref => {
+})(["box-sizing:border-box;display:flex;justify-content:center;align-items:center;min-width:", ";max-width:", ";max-height:", ";min-height:", ";background-color:", ";background-image:", ";background-position:center;background-repeat:no-repeat;background-size:cover;border-radius:", ";border:", ";"], _ref => {
   let {
     theme,
     size
@@ -4708,62 +4708,59 @@ const AvatarContainer = styled__default["default"].div.withConfig({
     theme,
     background,
     color,
-    picture,
     selecting,
     selected,
     disabled
   } = _ref5;
-  return `${
-  // eslint-disable-next-line no-nested-ternary
-  selecting ? selected ? getColor('primary', theme) : getColor('gray6', theme) : background ? getColor(`${background}.${disabled ? 'disabled' : 'regular'}`, theme) : theme.avatarColors[color]} ${picture && !selecting ? `url(${picture}) no-repeat center center/cover` : ''}`;
+  return selecting && getColor(selected ? 'primary' : 'gray6', theme) || background && getColor(`${background}.${disabled ? 'disabled' : 'regular'}`, theme) || theme.avatarColors[color];
 }, _ref6 => {
   let {
-    shape
+    picture,
+    selecting
   } = _ref6;
-  return shape === 'round' ? '50%' : '15%';
+  return picture && !selecting && styled.css(["url(", ")"], picture);
 }, _ref7 => {
+  let {
+    shape
+  } = _ref7;
+  return shape === 'round' ? '50%' : '15%';
+}, _ref8 => {
   let {
     theme,
     selecting
-  } = _ref7;
+  } = _ref8;
   return selecting ? `0.125rem solid ${getColor('primary', theme)}` : 'none';
 });
 const Capitals = styled__default["default"].p.withConfig({
   displayName: "Avatar__Capitals",
   componentId: "sc-1kkwg84-1"
-})(["font-size:", ";color:", ";font-family:", ";font-weight:", ";user-select:none;"], _ref8 => {
+})(["font-size:", ";color:", ";font-family:", ";font-weight:", ";user-select:none;"], _ref9 => {
   let {
     theme,
     $size
-  } = _ref8;
+  } = _ref9;
   return theme.sizes.avatar[$size].font;
-}, _ref9 => {
+}, _ref10 => {
   let {
     theme,
     color
-  } = _ref9;
-  return getColor(color || 'gray6', theme);
-}, _ref10 => {
-  let {
-    theme
   } = _ref10;
-  return theme.fonts.default;
+  return getColor(color ?? 'gray6', theme);
 }, _ref11 => {
   let {
     theme
   } = _ref11;
+  return theme.fonts.default;
+}, _ref12 => {
+  let {
+    theme
+  } = _ref12;
   return theme.fonts.weight.regular;
 });
 const AvatarIcon = styled__default["default"](Icon).withConfig({
   displayName: "Avatar__AvatarIcon",
   componentId: "sc-1kkwg84-2"
-})(["width:calc(", " * 0.75);min-width:calc(", " * 0.75);height:calc(", " * 0.75);min-height:calc(", " * 0.75);"], _ref12 => {
-  let {
-    theme,
-    $size
-  } = _ref12;
-  return theme.sizes.avatar[$size].diameter;
-}, _ref13 => {
+})(["width:calc(", " * 0.75);min-width:calc(", " * 0.75);height:calc(", " * 0.75);min-height:calc(", " * 0.75);"], _ref13 => {
   let {
     theme,
     $size
@@ -4781,9 +4778,15 @@ const AvatarIcon = styled__default["default"](Icon).withConfig({
     $size
   } = _ref15;
   return theme.sizes.avatar[$size].diameter;
+}, _ref16 => {
+  let {
+    theme,
+    $size
+  } = _ref16;
+  return theme.sizes.avatar[$size].diameter;
 });
 const _SPECIAL_CHARS_REGEX = /[&/\\#,+()$~%.'":*?!<>{}@^_`=]/g;
-const _WHITESPACE_REGEX = /[ ]/g;
+const _WHITESPACE_REGEX = / /g;
 const _WHITESPACE_REGEX_2 = / /;
 function calcCapitals(label) {
   const noSpecString = label.replace(_SPECIAL_CHARS_REGEX, '');
@@ -4808,13 +4811,12 @@ function calcCapitals(label) {
 }
 function calcColor(label) {
   let sum = 0;
-  // eslint-disable-next-line no-plusplus
-  for (let i = 0; i < label.length; i++) {
+  for (let i = 0; i < label.length; i += 1) {
     sum += label.charCodeAt(i);
   }
   return `avatar_${sum % 50 + 1}`;
 }
-const Avatar = /*#__PURE__*/React__default["default"].forwardRef(function AvatarFn(_ref16, ref) {
+const Avatar = /*#__PURE__*/React__default["default"].forwardRef(function AvatarFn(_ref17, ref) {
   let {
     size = 'medium',
     label,
@@ -4829,8 +4831,8 @@ const Avatar = /*#__PURE__*/React__default["default"].forwardRef(function Avatar
     shape = 'round',
     disabled,
     ...rest
-  } = _ref16;
-  const calculatedColor = React.useMemo(() => calcColor(colorLabel || label), [colorLabel, label]);
+  } = _ref17;
+  const calculatedColor = React.useMemo(() => calcColor(colorLabel ?? label), [colorLabel, label]);
   const capitals = React.useMemo(() => calcCapitals(label.toUpperCase()), [label]);
   const symbol = React.useMemo(() => {
     if (selecting) {
@@ -4848,7 +4850,7 @@ const Avatar = /*#__PURE__*/React__default["default"].forwardRef(function Avatar
       return /*#__PURE__*/React__default["default"].createElement(AvatarIcon, {
         $size: size,
         icon: icon,
-        color: color || 'gray6',
+        color: color ?? 'gray6',
         disabled: disabled
       });
     }
@@ -4874,7 +4876,8 @@ const Avatar = /*#__PURE__*/React__default["default"].forwardRef(function Avatar
     background: background,
     color: calculatedColor,
     shape: shape,
-    disabled: disabled
+    disabled: disabled,
+    "data-testid": 'avatar'
   }, rest), (!picture || selecting) && symbol);
 });
 
@@ -6934,7 +6937,9 @@ const Text = /*#__PURE__*/React__default["default"].forwardRef(function TextFn(_
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-const Portal = /*#__PURE__*/React__default["default"].forwardRef(function PortalFn(_ref2, _ref) {
+const Portal = /*#__PURE__*/React__default["default"].forwardRef(function PortalFn(_ref2,
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+_ref) {
   let {
     children,
     container,
@@ -6946,7 +6951,7 @@ const Portal = /*#__PURE__*/React__default["default"].forwardRef(function Portal
   } = React.useContext(styled.ThemeContext);
   if (!show) return null;
   if (disablePortal) return children;
-  return /*#__PURE__*/ReactDOM__default["default"].createPortal(children, container || windowObj.document.body);
+  return /*#__PURE__*/ReactDOM__default["default"].createPortal(children, container ?? windowObj.document.body);
 });
 
 const TooltipWrapper = /*#__PURE__*/React__default["default"].forwardRef(function TooltipWrapperFn(_ref, ref) {
@@ -7135,6 +7140,29 @@ const Badge = /*#__PURE__*/React.forwardRef(function BadgeFn(_ref4, ref) {
   }, rest), badgeText));
 });
 
+const rotateKeyframes = styled.keyframes(["from{transform:rotate(0deg);}to{transform:rotate(360deg);}"]);
+const StyledSpinner = styled__default["default"].div.withConfig({
+  displayName: "Spinner__StyledSpinner",
+  componentId: "sc-1b66r0h-0"
+})(["width:0.75rem;height:0.75rem;color:", ";border:0.125rem solid currentColor;border-right-color:transparent;border-radius:50%;animation:", " 0.75s linear infinite;"], _ref => {
+  let {
+    theme,
+    color
+  } = _ref;
+  return getColor(color, theme);
+}, rotateKeyframes);
+const Spinner = /*#__PURE__*/React__default["default"].forwardRef(function SpinnerFn(_ref2, ref) {
+  let {
+    color,
+    ...rest
+  } = _ref2;
+  return /*#__PURE__*/React__default["default"].createElement(StyledSpinner, _extends({
+    "data-testid": "spinner",
+    color: color,
+    ref: ref
+  }, rest));
+});
+
 /**
  * A specialized version of `_.forEach` for arrays without support for
  * iteratee shorthands.
@@ -7501,29 +7529,6 @@ function useKeyboard(ref, events) {
   }, [events, keyEvents, ref, ref.current]);
 }
 
-const rotateKeyframes = styled.keyframes(["from{transform:rotate(0deg);}to{transform:rotate(360deg);}"]);
-const StyledSpinner = styled__default["default"].div.withConfig({
-  displayName: "Spinner__StyledSpinner",
-  componentId: "sc-1b66r0h-0"
-})(["width:0.75rem;height:0.75rem;color:", ";border:0.125rem solid currentColor;border-right-color:transparent;border-radius:50%;animation:", " 0.75s linear infinite;"], _ref => {
-  let {
-    theme,
-    color
-  } = _ref;
-  return getColor(color, theme);
-}, rotateKeyframes);
-const Spinner = /*#__PURE__*/React__default["default"].forwardRef(function SpinnerFn(_ref2, ref) {
-  let {
-    color,
-    ...rest
-  } = _ref2;
-  return /*#__PURE__*/React__default["default"].createElement(StyledSpinner, _extends({
-    "data-testid": "spinner",
-    color: color,
-    ref: ref
-  }, rest));
-});
-
 const StyledIcon$1 = styled__default["default"](Icon).withConfig({
   displayName: "Button__StyledIcon",
   componentId: "sc-1oof15b-0"
@@ -8056,8 +8061,7 @@ const ContainerEl$4 = styled__default["default"].div.withConfig({
     if (typeof borderColor === 'string') {
       return styled.css(["border:0.0625rem solid ", ";"], getColor(borderColor, theme));
     }
-    const borders = map_1(borderColor, (color, key) => color && styled.css(["border-", ":0.0625rem solid ", ";"], key, getColor(color, theme)));
-    return borders;
+    return map_1(borderColor, (color, key) => color && styled.css(["border-", ":0.0625rem solid ", ";"], key, getColor(color, theme)));
   }
   return false;
 }, _ref18 => {
@@ -9757,21 +9761,64 @@ var filter_1 = filter;
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-function usePrevious(value) {
-  const ref = React.useRef();
-  React.useEffect(() => {
-    ref.current = value;
-  }, [value]);
-  return ref.current;
-}
+const InputDescription = styled__default["default"](Text).attrs({
+  overflow: 'break-word',
+  size: 'extrasmall'
+}).withConfig({
+  displayName: "InputDescription",
+  componentId: "sc-6reo41-0"
+})(["line-height:1.5;padding-top:0.25rem;min-height:calc(", " * 1.5);"], _ref => {
+  let {
+    theme,
+    size
+  } = _ref;
+  return theme.sizes.font[size];
+});
 
 /*
  * SPDX-FileCopyrightText: 2023 Zextras <https://www.zextras.com>
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-const INPUT_BACKGROUND_COLOR = 'gray5';
-const INPUT_DIVIDER_COLOR = 'gray3';
+const InputLabel = styled__default["default"].label.attrs(_ref => {
+  let {
+    $hasError,
+    $hasFocus
+  } = _ref;
+  return {
+    $textColor: $hasError && 'error' || $hasFocus && 'primary' || 'secondary'
+  };
+}).withConfig({
+  displayName: "InputLabel",
+  componentId: "sc-1p96644-0"
+})(["position:absolute;top:50%;left:0.75rem;font-size:", ";font-weight:", ";font-family:", ";line-height:1.5;color:", ";transform:translateY(-50%);transition:transform 150ms ease-out,font-size 150ms ease-out,top 150ms ease-out,left 150ms ease-out;cursor:inherit;user-select:none;max-width:calc(100% - ", ");white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"], _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.sizes.font.medium;
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.fonts.weight.regular;
+}, _ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.fonts.default;
+}, _ref5 => {
+  let {
+    theme,
+    $textColor,
+    $disabled
+  } = _ref5;
+  return getColor(`${$textColor}.${$disabled ? 'disabled' : 'regular'}`, theme);
+}, _ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return `${theme.sizes.padding.large} * 2`;
+});
 
 const StyledIconButton = styled__default["default"](Button$1).withConfig({
   displayName: "IconButton__StyledIconButton",
@@ -9828,6 +9875,27 @@ const IconButton = /*#__PURE__*/React__default["default"].forwardRef(function Ic
   }, rest));
 });
 
+/*
+ * SPDX-FileCopyrightText: 2023 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+function usePrevious(value) {
+  const ref = React.useRef();
+  React.useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
+
+/*
+ * SPDX-FileCopyrightText: 2023 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+const INPUT_BACKGROUND_COLOR = 'gray5';
+const INPUT_DIVIDER_COLOR = 'gray3';
+
 const ActionIcon = styled__default["default"](Icon).withConfig({
   displayName: "Chip__ActionIcon",
   componentId: "sc-1p4639b-0"
@@ -10719,70 +10787,6 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function Drop
   }))));
 });
 
-/*
- * SPDX-FileCopyrightText: 2023 Zextras <https://www.zextras.com>
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-const InputDescription = styled__default["default"](Text).attrs({
-  overflow: 'break-word',
-  size: 'extrasmall'
-}).withConfig({
-  displayName: "InputDescription",
-  componentId: "sc-6reo41-0"
-})(["line-height:1.5;padding-top:0.25rem;min-height:calc(", " * 1.5);"], _ref => {
-  let {
-    theme,
-    size
-  } = _ref;
-  return theme.sizes.font[size];
-});
-
-/*
- * SPDX-FileCopyrightText: 2023 Zextras <https://www.zextras.com>
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-const InputLabel = styled__default["default"].label.attrs(_ref => {
-  let {
-    $hasError,
-    $hasFocus
-  } = _ref;
-  return {
-    $textColor: $hasError && 'error' || $hasFocus && 'primary' || 'secondary'
-  };
-}).withConfig({
-  displayName: "InputLabel",
-  componentId: "sc-1p96644-0"
-})(["position:absolute;top:50%;left:0.75rem;font-size:", ";font-weight:", ";font-family:", ";line-height:1.5;color:", ";transform:translateY(-50%);transition:transform 150ms ease-out,font-size 150ms ease-out,top 150ms ease-out,left 150ms ease-out;cursor:inherit;user-select:none;max-width:calc(100% - ", ");white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"], _ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.sizes.font.medium;
-}, _ref3 => {
-  let {
-    theme
-  } = _ref3;
-  return theme.fonts.weight.regular;
-}, _ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.fonts.default;
-}, _ref5 => {
-  let {
-    theme,
-    $textColor,
-    $disabled
-  } = _ref5;
-  return getColor(`${$textColor}.${$disabled ? 'disabled' : 'regular'}`, theme);
-}, _ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return `${theme.sizes.padding.large} * 2`;
-});
-
 const ContainerEl$1 = styled__default["default"](Container).withConfig({
   displayName: "ChipInput__ContainerEl",
   componentId: "sc-1y52mik-0"
@@ -21705,7 +21709,7 @@ const COLORS = {
 const Styler = styled__default["default"](Container).withConfig({
   displayName: "DateTimePicker__Styler",
   componentId: "sc-1l3n977-0"
-})([".react-datepicker__year-read-view--down-arrow,.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow,.react-datepicker__navigation-icon::before{border-color:", ";border-style:solid;border-width:0.1875rem 0.1875rem 0 0;content:'';display:block;height:0.5625rem;position:absolute;top:0.375rem;width:0.5625rem;}.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle,.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle{margin-left:-0.25rem;position:absolute;width:0;}.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before,.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before,.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::after,.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::after{box-sizing:content-box;position:absolute;border:0.5rem solid transparent;height:0;width:0.0625rem;content:'';z-index:-1;left:-0.5rem;}.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before,.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before{border-bottom-color:", ";}.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle{top:0;margin-top:-0.5rem;}.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before,.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::after{border-top:none;border-bottom-color:", ";}.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::after{top:0;}.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before{top:-0.0625rem;border-bottom-color:", ";}.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle{bottom:0;margin-bottom:-0.5rem;}.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before,.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::after{border-bottom:none;border-top-color:", ";}.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::after{bottom:0;}.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before{bottom:-0.0625rem;border-top-color:", ";}.react-datepicker-wrapper{display:inline-block;padding:0;border:0;width:100%;}.react-datepicker{font-family:'Helvetica Neue',helvetica,arial,sans-serif;font-size:0.8rem;background-color:", ";color:", ";border:0.0625rem solid ", ";border-radius:0.3rem;display:inline-block;position:relative;}.react-datepicker--time-only .react-datepicker__triangle{left:2.1875rem;}.react-datepicker--time-only .react-datepicker__time-container{border-left:0;}.react-datepicker--time-only .react-datepicker__time,.react-datepicker--time-only .react-datepicker__time-box{border-bottom-left-radius:0.3rem;border-bottom-right-radius:0.3rem;}.react-datepicker__triangle{position:absolute;left:3.125rem;}.react-datepicker-popper{z-index:1;}.react-datepicker-popper[data-placement^='bottom']{padding-top:0.625rem;}.react-datepicker-popper[data-placement='bottom-end'] .react-datepicker__triangle,.react-datepicker-popper[data-placement='top-end'] .react-datepicker__triangle{left:auto;right:3.125rem;}.react-datepicker-popper[data-placement^='top']{padding-bottom:0.625rem;}.react-datepicker-popper[data-placement^='right']{padding-left:0.5rem;}.react-datepicker-popper[data-placement^='right'] .react-datepicker__triangle{left:auto;right:2.625rem;}.react-datepicker-popper[data-placement^='left']{padding-right:0.5rem;}.react-datepicker-popper[data-placement^='left'] .react-datepicker__triangle{left:2.625rem;right:auto;}.react-datepicker__header{text-align:center;background-color:", ";border-bottom:0.0625rem solid ", ";border-top-left-radius:0.3rem;padding:0.5rem 0;position:relative;}.react-datepicker__header--time{padding-bottom:0.5rem;padding-left:0.3125rem;padding-right:0.3125rem;}.react-datepicker__header--time:not(.react-datepicker__header--time--only){border-top-left-radius:0;}.react-datepicker__header:not(.react-datepicker__header--has-time-select){border-top-right-radius:0.3rem;}.react-datepicker__year-dropdown-container--select,.react-datepicker__month-dropdown-container--select,.react-datepicker__month-year-dropdown-container--select,.react-datepicker__year-dropdown-container--scroll,.react-datepicker__month-dropdown-container--scroll,.react-datepicker__month-year-dropdown-container--scroll{display:inline-block;margin:0 0.125rem;}.react-datepicker__current-month,.react-datepicker-time__header,.react-datepicker-year-header{margin-top:0;color:", ";font-weight:bold;font-size:0.944rem;}.react-datepicker-time__header{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}.react-datepicker__navigation{align-items:center;background:none;display:flex;justify-content:center;text-align:center;cursor:pointer;position:absolute;top:0.125rem;padding:0;border:none;z-index:1;height:2rem;width:2rem;text-indent:-999rem;overflow:hidden;}.react-datepicker__navigation--previous{left:0.125rem;}.react-datepicker__navigation--next{right:0.125rem;}.react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button){right:5.3125rem;}.react-datepicker__navigation--years{position:relative;top:0;display:block;margin-left:auto;margin-right:auto;}.react-datepicker__navigation--years-previous{top:0.25rem;}.react-datepicker__navigation--years-upcoming{top:-0.25rem;}.react-datepicker__navigation:hover *::before{border-color:", ";}.react-datepicker__navigation-icon{position:relative;top:-0.0625rem;font-size:1.25rem;width:0;}.react-datepicker__navigation-icon--next{left:-0.125rem;}.react-datepicker__navigation-icon--next::before{transform:rotate(45deg);left:-0.4375rem;}.react-datepicker__navigation-icon--previous{right:-0.125rem;}.react-datepicker__navigation-icon--previous::before{transform:rotate(225deg);right:-0.4375rem;}.react-datepicker__month-container{float:left;}.react-datepicker__year{margin:0.4rem;text-align:center;}.react-datepicker__year-wrapper{display:flex;flex-wrap:wrap;max-width:11.25rem;}.react-datepicker__year .react-datepicker__year-text{display:inline-block;width:4rem;margin:0.125rem;}.react-datepicker__month{margin:0.4rem;text-align:center;}.react-datepicker__month .react-datepicker__month-text,.react-datepicker__month .react-datepicker__quarter-text{display:inline-block;width:4rem;margin:0.125rem;}.react-datepicker__input-time-container{clear:both;width:100%;float:left;margin:0.3125rem 0 0.625rem 0.9375rem;text-align:left;}.react-datepicker__input-time-container .react-datepicker-time__caption{display:inline-block;}.react-datepicker__input-time-container .react-datepicker-time__input-container{display:inline-block;}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input{display:inline-block;margin-left:0.625rem;}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input{width:auto;}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type='time']::-webkit-inner-spin-button,.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type='time']::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type='time']{-moz-appearance:textfield;}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter{margin-left:0.3125rem;display:inline-block;}.react-datepicker__time-container{float:right;border-left:0.0625rem solid ", ";width:5.3125rem;}.react-datepicker__time-container--with-today-button{display:inline;border:0.0625rem solid ", ";border-radius:0.3rem;position:absolute;right:-4.5rem;top:0;}.react-datepicker__time-container .react-datepicker__time{position:relative;background:white;border-bottom-right-radius:0.3rem;}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box{width:5.3125rem;overflow-x:hidden;margin:0 auto;text-align:center;border-bottom-right-radius:0.3rem;}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list{list-style:none;margin:0;height:calc(12.1875rem + (1.7rem / 2));overflow-y:scroll;padding-right:0;padding-left:0;width:100%;box-sizing:content-box;}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item{height:1.875rem;padding:0.3125rem 0.625rem;white-space:nowrap;}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover{cursor:pointer;background-color:", ";}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected{background-color:", ";color:white;font-weight:bold;}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover{background-color:", ";}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled{color:", ";}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover{cursor:default;background-color:transparent;}.react-datepicker__week-number{color:", ";display:inline-block;width:1.7rem;line-height:1.7rem;text-align:center;margin:0.166rem;}.react-datepicker__week-number.react-datepicker__week-number--clickable{cursor:pointer;}.react-datepicker__week-number.react-datepicker__week-number--clickable:hover{border-radius:0.3rem;background-color:", ";}.react-datepicker__day-names,.react-datepicker__week{white-space:nowrap;}.react-datepicker__day-names{margin-bottom:-0.5rem;}.react-datepicker__day-name,.react-datepicker__day,.react-datepicker__time-name{color:", ";display:inline-block;width:1.7rem;line-height:1.7rem;text-align:center;margin:0.166rem;}.react-datepicker__month--selected,.react-datepicker__month--in-selecting-range,.react-datepicker__month--in-range,.react-datepicker__quarter--selected,.react-datepicker__quarter--in-selecting-range,.react-datepicker__quarter--in-range{border-radius:0.3rem;background-color:", ";color:", ";}.react-datepicker__month--selected:hover,.react-datepicker__month--in-selecting-range:hover,.react-datepicker__month--in-range:hover,.react-datepicker__quarter--selected:hover,.react-datepicker__quarter--in-selecting-range:hover,.react-datepicker__quarter--in-range:hover{background-color:", ";}.react-datepicker__month--disabled,.react-datepicker__quarter--disabled{color:", ";pointer-events:none;}.react-datepicker__month--disabled:hover,.react-datepicker__quarter--disabled:hover{cursor:default;background-color:transparent;}.react-datepicker__day,.react-datepicker__month-text,.react-datepicker__quarter-text,.react-datepicker__year-text{cursor:pointer;}.react-datepicker__day:hover,.react-datepicker__month-text:hover,.react-datepicker__quarter-text:hover,.react-datepicker__year-text:hover{border-radius:0.3rem;background-color:", ";}.react-datepicker__day--today,.react-datepicker__month-text--today,.react-datepicker__quarter-text--today,.react-datepicker__year-text--today{font-weight:bold;}.react-datepicker__day--highlighted,.react-datepicker__month-text--highlighted,.react-datepicker__quarter-text--highlighted,.react-datepicker__year-text--highlighted{border-radius:0.3rem;background-color:", ";color:", ";}.react-datepicker__day--highlighted:hover,.react-datepicker__month-text--highlighted:hover,.react-datepicker__quarter-text--highlighted:hover,.react-datepicker__year-text--highlighted:hover{background-color:", ";}.react-datepicker__day--highlighted-custom-1,.react-datepicker__month-text--highlighted-custom-1,.react-datepicker__quarter-text--highlighted-custom-1,.react-datepicker__year-text--highlighted-custom-1{color:", ";}.react-datepicker__day--highlighted-custom-2,.react-datepicker__month-text--highlighted-custom-2,.react-datepicker__quarter-text--highlighted-custom-2,.react-datepicker__year-text--highlighted-custom-2{color:", ";}.react-datepicker__day--selected,.react-datepicker__day--in-selecting-range,.react-datepicker__day--in-range,.react-datepicker__month-text--selected,.react-datepicker__month-text--in-selecting-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--selected,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--selected,.react-datepicker__year-text--in-selecting-range,.react-datepicker__year-text--in-range{border-radius:0.3rem;background-color:", ";color:", ";}.react-datepicker__day--selected:hover,.react-datepicker__day--in-selecting-range:hover,.react-datepicker__day--in-range:hover,.react-datepicker__month-text--selected:hover,.react-datepicker__month-text--in-selecting-range:hover,.react-datepicker__month-text--in-range:hover,.react-datepicker__quarter-text--selected:hover,.react-datepicker__quarter-text--in-selecting-range:hover,.react-datepicker__quarter-text--in-range:hover,.react-datepicker__year-text--selected:hover,.react-datepicker__year-text--in-selecting-range:hover,.react-datepicker__year-text--in-range:hover{background-color:", ";}.react-datepicker__day--keyboard-selected,.react-datepicker__month-text--keyboard-selected,.react-datepicker__quarter-text--keyboard-selected,.react-datepicker__year-text--keyboard-selected{border-radius:0.3rem;background-color:", ";color:", ";}.react-datepicker__day--keyboard-selected:hover,.react-datepicker__month-text--keyboard-selected:hover,.react-datepicker__quarter-text--keyboard-selected:hover,.react-datepicker__year-text--keyboard-selected:hover{background-color:", ";}.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range),.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range){background-color:", ";}.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range),.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range){background-color:", ";color:", ";}.react-datepicker__day--disabled,.react-datepicker__month-text--disabled,.react-datepicker__quarter-text--disabled,.react-datepicker__year-text--disabled{cursor:default;color:", ";}.react-datepicker__day--disabled:hover,.react-datepicker__month-text--disabled:hover,.react-datepicker__quarter-text--disabled:hover,.react-datepicker__year-text--disabled:hover{background-color:transparent;}.react-datepicker__month-text.react-datepicker__month--selected:hover,.react-datepicker__month-text.react-datepicker__month--in-range:hover,.react-datepicker__month-text.react-datepicker__quarter--selected:hover,.react-datepicker__month-text.react-datepicker__quarter--in-range:hover,.react-datepicker__quarter-text.react-datepicker__month--selected:hover,.react-datepicker__quarter-text.react-datepicker__month--in-range:hover,.react-datepicker__quarter-text.react-datepicker__quarter--selected:hover,.react-datepicker__quarter-text.react-datepicker__quarter--in-range:hover{background-color:", ";}.react-datepicker__month-text:hover,.react-datepicker__quarter-text:hover{background-color:", ";}.react-datepicker__input-container{position:relative;display:inline-block;width:100%;}.react-datepicker__year-read-view,.react-datepicker__month-read-view,.react-datepicker__month-year-read-view{border:0.0625rem solid transparent;border-radius:0.3rem;position:relative;}.react-datepicker__year-read-view:hover,.react-datepicker__month-read-view:hover,.react-datepicker__month-year-read-view:hover{cursor:pointer;}.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow{border-top-color:", ";}.react-datepicker__year-read-view--down-arrow,.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow{transform:rotate(135deg);right:-1rem;top:0;}.react-datepicker__year-dropdown,.react-datepicker__month-dropdown,.react-datepicker__month-year-dropdown{background-color:", ";position:absolute;width:50%;left:25%;top:1.875rem;z-index:1;text-align:center;border-radius:0.3rem;border:0.0625rem solid ", ";}.react-datepicker__year-dropdown:hover,.react-datepicker__month-dropdown:hover,.react-datepicker__month-year-dropdown:hover{cursor:pointer;}.react-datepicker__year-dropdown--scrollable,.react-datepicker__month-dropdown--scrollable,.react-datepicker__month-year-dropdown--scrollable{height:9.375rem;overflow-y:scroll;}.react-datepicker__year-option,.react-datepicker__month-option,.react-datepicker__month-year-option{line-height:1.25rem;width:100%;display:block;margin-left:auto;margin-right:auto;}.react-datepicker__year-option:first-of-type,.react-datepicker__month-option:first-of-type,.react-datepicker__month-year-option:first-of-type{border-top-left-radius:0.3rem;border-top-right-radius:0.3rem;}.react-datepicker__year-option:last-of-type,.react-datepicker__month-option:last-of-type,.react-datepicker__month-year-option:last-of-type{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-bottom-left-radius:0.3rem;border-bottom-right-radius:0.3rem;}.react-datepicker__year-option:hover,.react-datepicker__month-option:hover,.react-datepicker__month-year-option:hover{background-color:", ";}.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming{border-bottom-color:", ";}.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous{border-top-color:", ";}.react-datepicker__year-option--selected,.react-datepicker__month-option--selected,.react-datepicker__month-year-option--selected{position:absolute;left:0.9375rem;}.react-datepicker__close-icon{cursor:pointer;background-color:transparent;border:0;outline:0;padding:0 0.375rem 0 0;position:absolute;top:0;right:0;height:100%;display:table-cell;vertical-align:middle;}.react-datepicker__close-icon::after{cursor:pointer;background-color:", ";color:", ";border-radius:50%;height:1rem;width:1rem;padding:0.125rem;font-size:0.75rem;line-height:1;text-align:center;display:table-cell;vertical-align:middle;content:'\xD7';}.react-datepicker__today-button{background:", ";border-top:0.0625rem solid ", ";cursor:pointer;text-align:center;font-weight:bold;padding:0.3125rem 0;clear:left;}.react-datepicker__portal{position:fixed;width:100vw;height:100vh;background-color:", ";left:0;top:0;justify-content:center;align-items:center;display:flex;z-index:2147483647;}.react-datepicker__portal .react-datepicker__day-name,.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__time-name{width:3rem;line-height:3rem;}@media (max-width:400px),(max-height:550px){.react-datepicker__portal .react-datepicker__day-name,.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__time-name{width:2rem;line-height:2rem;}}.react-datepicker__portal .react-datepicker__current-month,.react-datepicker__portal .react-datepicker-time__header{font-size:1.44rem;}.react-datepicker__aria-live{position:absolute;clip-path:circle(0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;width:1px;white-space:nowrap;}font-family:", ";font-size:", ";font-weight:", ";"], COLORS.NAVIGATION_ICON_BORDER, COLORS.MAIN_BORDER, COLORS.TODAY_BACKGROUND, COLORS.MAIN_BORDER, _ref => {
+})([".react-datepicker__year-read-view--down-arrow,.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow,.react-datepicker__navigation-icon::before{border-color:", ";border-style:solid;border-width:0.1875rem 0.1875rem 0 0;content:'';display:block;height:0.5625rem;position:absolute;top:0.375rem;width:0.5625rem;}.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle,.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle{margin-left:-0.25rem;position:absolute;width:0;}.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before,.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before,.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::after,.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::after{box-sizing:content-box;position:absolute;border:0.5rem solid transparent;height:0;width:0.0625rem;content:'';z-index:-1;left:-0.5rem;}.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before,.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before{border-bottom-color:", ";}.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle{top:0;margin-top:-0.5rem;}.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before,.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::after{border-top:none;border-bottom-color:", ";}.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::after{top:0;}.react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle::before{top:-0.0625rem;border-bottom-color:", ";}.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle{bottom:0;margin-bottom:-0.5rem;}.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before,.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::after{border-bottom:none;border-top-color:", ";}.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::after{bottom:0;}.react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle::before{bottom:-0.0625rem;border-top-color:", ";}.react-datepicker-wrapper{display:inline-block;padding:0;border:0;width:100%;}.react-datepicker{font-family:'Helvetica Neue',helvetica,arial,sans-serif;font-size:0.8rem;background-color:", ";color:", ";border:0.0625rem solid ", ";border-radius:0.3rem;display:inline-block;position:relative;}.react-datepicker--time-only .react-datepicker__triangle{left:2.1875rem;}.react-datepicker--time-only .react-datepicker__time-container{border-left:0;}.react-datepicker--time-only .react-datepicker__time,.react-datepicker--time-only .react-datepicker__time-box{border-bottom-left-radius:0.3rem;border-bottom-right-radius:0.3rem;}.react-datepicker__triangle{position:absolute;left:3.125rem;}.react-datepicker-popper{z-index:1;}.react-datepicker-popper[data-placement^='bottom']{padding-top:0.625rem;}.react-datepicker-popper[data-placement='bottom-end'] .react-datepicker__triangle,.react-datepicker-popper[data-placement='top-end'] .react-datepicker__triangle{left:auto;right:3.125rem;}.react-datepicker-popper[data-placement^='top']{padding-bottom:0.625rem;}.react-datepicker-popper[data-placement^='right']{padding-left:0.5rem;}.react-datepicker-popper[data-placement^='right'] .react-datepicker__triangle{left:auto;right:2.625rem;}.react-datepicker-popper[data-placement^='left']{padding-right:0.5rem;}.react-datepicker-popper[data-placement^='left'] .react-datepicker__triangle{left:2.625rem;right:auto;}.react-datepicker__header{text-align:center;background-color:", ";border-bottom:0.0625rem solid ", ";border-top-left-radius:0.3rem;padding:0.5rem 0;position:relative;}.react-datepicker__header--time{padding-bottom:0.5rem;padding-left:0.3125rem;padding-right:0.3125rem;}.react-datepicker__header--time:not(.react-datepicker__header--time--only){border-top-left-radius:0;}.react-datepicker__header:not(.react-datepicker__header--has-time-select){border-top-right-radius:0.3rem;}.react-datepicker__year-dropdown-container--select,.react-datepicker__month-dropdown-container--select,.react-datepicker__month-year-dropdown-container--select,.react-datepicker__year-dropdown-container--scroll,.react-datepicker__month-dropdown-container--scroll,.react-datepicker__month-year-dropdown-container--scroll{display:inline-block;margin:0 0.125rem;}.react-datepicker__current-month,.react-datepicker-time__header,.react-datepicker-year-header{margin-top:0;color:", ";font-weight:bold;font-size:0.944rem;}.react-datepicker-time__header{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}.react-datepicker__navigation{align-items:center;background:none;display:flex;justify-content:center;text-align:center;cursor:pointer;position:absolute;top:0.125rem;padding:0;border:none;z-index:1;height:2rem;width:2rem;text-indent:-999rem;overflow:hidden;}.react-datepicker__navigation--previous{left:0.125rem;}.react-datepicker__navigation--next{right:0.125rem;}.react-datepicker__navigation--next--with-time:not( .react-datepicker__navigation--next--with-today-button ){right:5.3125rem;}.react-datepicker__navigation--years{position:relative;top:0;display:block;margin-left:auto;margin-right:auto;}.react-datepicker__navigation--years-previous{top:0.25rem;}.react-datepicker__navigation--years-upcoming{top:-0.25rem;}.react-datepicker__navigation:hover *::before{border-color:", ";}.react-datepicker__navigation-icon{position:relative;top:-0.0625rem;font-size:1.25rem;width:0;}.react-datepicker__navigation-icon--next{left:-0.125rem;}.react-datepicker__navigation-icon--next::before{transform:rotate(45deg);left:-0.4375rem;}.react-datepicker__navigation-icon--previous{right:-0.125rem;}.react-datepicker__navigation-icon--previous::before{transform:rotate(225deg);right:-0.4375rem;}.react-datepicker__month-container{float:left;}.react-datepicker__year{margin:0.4rem;text-align:center;}.react-datepicker__year-wrapper{display:flex;flex-wrap:wrap;max-width:11.25rem;}.react-datepicker__year .react-datepicker__year-text{display:inline-block;width:4rem;margin:0.125rem;}.react-datepicker__month{margin:0.4rem;text-align:center;}.react-datepicker__month .react-datepicker__month-text,.react-datepicker__month .react-datepicker__quarter-text{display:inline-block;width:4rem;margin:0.125rem;}.react-datepicker__input-time-container{clear:both;width:100%;float:left;margin:0.3125rem 0 0.625rem 0.9375rem;text-align:left;}.react-datepicker__input-time-container .react-datepicker-time__caption{display:inline-block;}.react-datepicker__input-time-container .react-datepicker-time__input-container{display:inline-block;}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input{display:inline-block;margin-left:0.625rem;}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input{width:auto;}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type='time']::-webkit-inner-spin-button,.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type='time']::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type='time']{-moz-appearance:textfield;}.react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter{margin-left:0.3125rem;display:inline-block;}.react-datepicker__time-container{float:right;border-left:0.0625rem solid ", ";width:5.3125rem;}.react-datepicker__time-container--with-today-button{display:inline;border:0.0625rem solid ", ";border-radius:0.3rem;position:absolute;right:-4.5rem;top:0;}.react-datepicker__time-container .react-datepicker__time{position:relative;background:white;border-bottom-right-radius:0.3rem;}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box{width:5.3125rem;overflow-x:hidden;margin:0 auto;text-align:center;border-bottom-right-radius:0.3rem;}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list{list-style:none;margin:0;height:calc(12.1875rem + (1.7rem / 2));overflow-y:scroll;padding-right:0;padding-left:0;width:100%;box-sizing:content-box;}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item{height:1.875rem;padding:0.3125rem 0.625rem;white-space:nowrap;}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover{cursor:pointer;background-color:", ";}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected{background-color:", ";color:white;font-weight:bold;}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover{background-color:", ";}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled{color:", ";}.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover{cursor:default;background-color:transparent;}.react-datepicker__week-number{color:", ";display:inline-block;width:1.7rem;line-height:1.7rem;text-align:center;margin:0.166rem;}.react-datepicker__week-number.react-datepicker__week-number--clickable{cursor:pointer;}.react-datepicker__week-number.react-datepicker__week-number--clickable:hover{border-radius:0.3rem;background-color:", ";}.react-datepicker__day-names,.react-datepicker__week{white-space:nowrap;}.react-datepicker__day-names{margin-bottom:-0.5rem;}.react-datepicker__day-name,.react-datepicker__day,.react-datepicker__time-name{color:", ";display:inline-block;width:1.7rem;line-height:1.7rem;text-align:center;margin:0.166rem;}.react-datepicker__month--selected,.react-datepicker__month--in-selecting-range,.react-datepicker__month--in-range,.react-datepicker__quarter--selected,.react-datepicker__quarter--in-selecting-range,.react-datepicker__quarter--in-range{border-radius:0.3rem;background-color:", ";color:", ";}.react-datepicker__month--selected:hover,.react-datepicker__month--in-selecting-range:hover,.react-datepicker__month--in-range:hover,.react-datepicker__quarter--selected:hover,.react-datepicker__quarter--in-selecting-range:hover,.react-datepicker__quarter--in-range:hover{background-color:", ";}.react-datepicker__month--disabled,.react-datepicker__quarter--disabled{color:", ";pointer-events:none;}.react-datepicker__month--disabled:hover,.react-datepicker__quarter--disabled:hover{cursor:default;background-color:transparent;}.react-datepicker__day,.react-datepicker__month-text,.react-datepicker__quarter-text,.react-datepicker__year-text{cursor:pointer;}.react-datepicker__day:hover,.react-datepicker__month-text:hover,.react-datepicker__quarter-text:hover,.react-datepicker__year-text:hover{border-radius:0.3rem;background-color:", ";}.react-datepicker__day--today,.react-datepicker__month-text--today,.react-datepicker__quarter-text--today,.react-datepicker__year-text--today{font-weight:bold;}.react-datepicker__day--highlighted,.react-datepicker__month-text--highlighted,.react-datepicker__quarter-text--highlighted,.react-datepicker__year-text--highlighted{border-radius:0.3rem;background-color:", ";color:", ";}.react-datepicker__day--highlighted:hover,.react-datepicker__month-text--highlighted:hover,.react-datepicker__quarter-text--highlighted:hover,.react-datepicker__year-text--highlighted:hover{background-color:", ";}.react-datepicker__day--highlighted-custom-1,.react-datepicker__month-text--highlighted-custom-1,.react-datepicker__quarter-text--highlighted-custom-1,.react-datepicker__year-text--highlighted-custom-1{color:", ";}.react-datepicker__day--highlighted-custom-2,.react-datepicker__month-text--highlighted-custom-2,.react-datepicker__quarter-text--highlighted-custom-2,.react-datepicker__year-text--highlighted-custom-2{color:", ";}.react-datepicker__day--selected,.react-datepicker__day--in-selecting-range,.react-datepicker__day--in-range,.react-datepicker__month-text--selected,.react-datepicker__month-text--in-selecting-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--selected,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--selected,.react-datepicker__year-text--in-selecting-range,.react-datepicker__year-text--in-range{border-radius:0.3rem;background-color:", ";color:", ";}.react-datepicker__day--selected:hover,.react-datepicker__day--in-selecting-range:hover,.react-datepicker__day--in-range:hover,.react-datepicker__month-text--selected:hover,.react-datepicker__month-text--in-selecting-range:hover,.react-datepicker__month-text--in-range:hover,.react-datepicker__quarter-text--selected:hover,.react-datepicker__quarter-text--in-selecting-range:hover,.react-datepicker__quarter-text--in-range:hover,.react-datepicker__year-text--selected:hover,.react-datepicker__year-text--in-selecting-range:hover,.react-datepicker__year-text--in-range:hover{background-color:", ";}.react-datepicker__day--keyboard-selected,.react-datepicker__month-text--keyboard-selected,.react-datepicker__quarter-text--keyboard-selected,.react-datepicker__year-text--keyboard-selected{border-radius:0.3rem;background-color:", ";color:", ";}.react-datepicker__day--keyboard-selected:hover,.react-datepicker__month-text--keyboard-selected:hover,.react-datepicker__quarter-text--keyboard-selected:hover,.react-datepicker__year-text--keyboard-selected:hover{background-color:", ";}.react-datepicker__day--in-selecting-range:not( .react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range ),.react-datepicker__month-text--in-selecting-range:not( .react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range ),.react-datepicker__quarter-text--in-selecting-range:not( .react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range ),.react-datepicker__year-text--in-selecting-range:not( .react-datepicker__day--in-range,.react-datepicker__month-text--in-range,.react-datepicker__quarter-text--in-range,.react-datepicker__year-text--in-range ){background-color:", ";}.react-datepicker__month--selecting-range .react-datepicker__day--in-range:not( .react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range ),.react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not( .react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range ),.react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not( .react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range ),.react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not( .react-datepicker__day--in-selecting-range,.react-datepicker__month-text--in-selecting-range,.react-datepicker__quarter-text--in-selecting-range,.react-datepicker__year-text--in-selecting-range ){background-color:", ";color:", ";}.react-datepicker__day--disabled,.react-datepicker__month-text--disabled,.react-datepicker__quarter-text--disabled,.react-datepicker__year-text--disabled{cursor:default;color:", ";}.react-datepicker__day--disabled:hover,.react-datepicker__month-text--disabled:hover,.react-datepicker__quarter-text--disabled:hover,.react-datepicker__year-text--disabled:hover{background-color:transparent;}.react-datepicker__month-text.react-datepicker__month--selected:hover,.react-datepicker__month-text.react-datepicker__month--in-range:hover,.react-datepicker__month-text.react-datepicker__quarter--selected:hover,.react-datepicker__month-text.react-datepicker__quarter--in-range:hover,.react-datepicker__quarter-text.react-datepicker__month--selected:hover,.react-datepicker__quarter-text.react-datepicker__month--in-range:hover,.react-datepicker__quarter-text.react-datepicker__quarter--selected:hover,.react-datepicker__quarter-text.react-datepicker__quarter--in-range:hover{background-color:", ";}.react-datepicker__month-text:hover,.react-datepicker__quarter-text:hover{background-color:", ";}.react-datepicker__input-container{position:relative;display:inline-block;width:100%;}.react-datepicker__year-read-view,.react-datepicker__month-read-view,.react-datepicker__month-year-read-view{border:0.0625rem solid transparent;border-radius:0.3rem;position:relative;}.react-datepicker__year-read-view:hover,.react-datepicker__month-read-view:hover,.react-datepicker__month-year-read-view:hover{cursor:pointer;}.react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,.react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow{border-top-color:", ";}.react-datepicker__year-read-view--down-arrow,.react-datepicker__month-read-view--down-arrow,.react-datepicker__month-year-read-view--down-arrow{transform:rotate(135deg);right:-1rem;top:0;}.react-datepicker__year-dropdown,.react-datepicker__month-dropdown,.react-datepicker__month-year-dropdown{background-color:", ";position:absolute;width:50%;left:25%;top:1.875rem;z-index:1;text-align:center;border-radius:0.3rem;border:0.0625rem solid ", ";}.react-datepicker__year-dropdown:hover,.react-datepicker__month-dropdown:hover,.react-datepicker__month-year-dropdown:hover{cursor:pointer;}.react-datepicker__year-dropdown--scrollable,.react-datepicker__month-dropdown--scrollable,.react-datepicker__month-year-dropdown--scrollable{height:9.375rem;overflow-y:scroll;}.react-datepicker__year-option,.react-datepicker__month-option,.react-datepicker__month-year-option{line-height:1.25rem;width:100%;display:block;margin-left:auto;margin-right:auto;}.react-datepicker__year-option:first-of-type,.react-datepicker__month-option:first-of-type,.react-datepicker__month-year-option:first-of-type{border-top-left-radius:0.3rem;border-top-right-radius:0.3rem;}.react-datepicker__year-option:last-of-type,.react-datepicker__month-option:last-of-type,.react-datepicker__month-year-option:last-of-type{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-bottom-left-radius:0.3rem;border-bottom-right-radius:0.3rem;}.react-datepicker__year-option:hover,.react-datepicker__month-option:hover,.react-datepicker__month-year-option:hover{background-color:", ";}.react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming{border-bottom-color:", ";}.react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,.react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous{border-top-color:", ";}.react-datepicker__year-option--selected,.react-datepicker__month-option--selected,.react-datepicker__month-year-option--selected{position:absolute;left:0.9375rem;}.react-datepicker__close-icon{cursor:pointer;background-color:transparent;border:0;outline:0;padding:0 0.375rem 0 0;position:absolute;top:0;right:0;height:100%;display:table-cell;vertical-align:middle;}.react-datepicker__close-icon::after{cursor:pointer;background-color:", ";color:", ";border-radius:50%;height:1rem;width:1rem;padding:0.125rem;font-size:0.75rem;line-height:1;text-align:center;display:table-cell;vertical-align:middle;content:'\xD7';}.react-datepicker__today-button{background:", ";border-top:0.0625rem solid ", ";cursor:pointer;text-align:center;font-weight:bold;padding:0.3125rem 0;clear:left;}.react-datepicker__portal{position:fixed;width:100vw;height:100vh;background-color:", ";left:0;top:0;justify-content:center;align-items:center;display:flex;z-index:2147483647;}.react-datepicker__portal .react-datepicker__day-name,.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__time-name{width:3rem;line-height:3rem;}@media (max-width:400px),(max-height:550px){.react-datepicker__portal .react-datepicker__day-name,.react-datepicker__portal .react-datepicker__day,.react-datepicker__portal .react-datepicker__time-name{width:2rem;line-height:2rem;}}.react-datepicker__portal .react-datepicker__current-month,.react-datepicker__portal .react-datepicker-time__header{font-size:1.44rem;}.react-datepicker__aria-live{position:absolute;clip-path:circle(0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;width:1px;white-space:nowrap;}font-family:", ";font-size:", ";font-weight:", ";"], COLORS.NAVIGATION_ICON_BORDER, COLORS.MAIN_BORDER, COLORS.TODAY_BACKGROUND, COLORS.MAIN_BORDER, _ref => {
   let {
     theme
   } = _ref;
@@ -22315,21 +22319,21 @@ const AdjustHeightTextArea = /*#__PURE__*/React__default["default"].forwardRef(f
     ...props
   } = _ref11;
   const {
-    maxHeight
+    maxHeight,
+    value,
+    defaultValue
   } = props;
   const containerRef = React.useRef(null);
   const textAreaRef = useCombinedRefs(ref);
-  React.useEffect(() => {
-    if (containerRef.current) {
-      // init grow container value to textarea value
-      containerRef.current.dataset.replicatedValue = textAreaRef.current?.value || '';
-    }
-  }, [textAreaRef]);
   const resizeTextArea = React.useCallback(() => {
     if (containerRef.current) {
-      containerRef.current.dataset.replicatedValue = textAreaRef.current?.value || '';
+      containerRef.current.dataset.replicatedValue = textAreaRef.current?.value ?? '';
     }
   }, [textAreaRef]);
+  React.useEffect(() => {
+    // resize text area when value or default value change
+    resizeTextArea();
+  }, [resizeTextArea, value, defaultValue]);
   const onInputHandler = React.useCallback(event => {
     resizeTextArea();
     onInput?.(event);
@@ -25909,64 +25913,6 @@ const ShimmerObject = {
       type
     } = _ref34;
     switch (type) {
-      case 1:
-        return /*#__PURE__*/React__default["default"].createElement(SkeletonComponent, {
-          height: "4rem",
-          width: width
-        }, /*#__PURE__*/React__default["default"].createElement(Container, {
-          orientation: "horizontal",
-          mainAlignment: "flex-start"
-        }, /*#__PURE__*/React__default["default"].createElement(Padding, {
-          left: "medium",
-          vertical: "small"
-        }, /*#__PURE__*/React__default["default"].createElement(AvatarSkeletonComponent, {
-          variant: "dark",
-          width: "3rem"
-        })), /*#__PURE__*/React__default["default"].createElement(Container, {
-          height: "fill",
-          width: "fit",
-          orientation: "vertical",
-          mainAlignment: "flex-start"
-        }, /*#__PURE__*/React__default["default"].createElement(Padding, {
-          left: "large",
-          vertical: "medium"
-        }, /*#__PURE__*/React__default["default"].createElement(SkeletonComponent, {
-          variant: "dark",
-          width: "13.125rem"
-        }), /*#__PURE__*/React__default["default"].createElement(Padding, {
-          top: "small"
-        }), /*#__PURE__*/React__default["default"].createElement(SkeletonComponent, {
-          variant: "dark",
-          width: "13.75rem"
-        }))), /*#__PURE__*/React__default["default"].createElement(Container, {
-          height: "fit",
-          width: "fill",
-          orientation: "vertical",
-          mainAlignment: "flex-end"
-        }, /*#__PURE__*/React__default["default"].createElement(Container, {
-          height: "fit",
-          width: "fill",
-          orientation: "horizontal",
-          mainAlignment: "flex-end"
-        }, /*#__PURE__*/React__default["default"].createElement(SkeletonComponent, {
-          variant: "dark",
-          width: "3.75rem"
-        }), /*#__PURE__*/React__default["default"].createElement(Padding, {
-          right: "medium"
-        })), /*#__PURE__*/React__default["default"].createElement(Padding, {
-          top: "small"
-        }), /*#__PURE__*/React__default["default"].createElement(Container, {
-          height: "fit",
-          width: "fill",
-          orientation: "horizontal",
-          mainAlignment: "flex-end"
-        }, /*#__PURE__*/React__default["default"].createElement(BadgeSkeletonComponent, {
-          variant: "dark",
-          width: "2.375rem",
-          height: "1.3125rem"
-        }), ' ', /*#__PURE__*/React__default["default"].createElement(Padding, {
-          right: "medium"
-        })))));
       case 2:
         return /*#__PURE__*/React__default["default"].createElement(SkeletonComponent, {
           height: "4rem",
@@ -26174,6 +26120,7 @@ const ShimmerObject = {
         }), /*#__PURE__*/React__default["default"].createElement(Padding, {
           right: "medium"
         })))));
+      case 1:
       default:
         return /*#__PURE__*/React__default["default"].createElement(SkeletonComponent, {
           height: "4rem",
@@ -26393,46 +26340,6 @@ const ShimmerObject = {
       type
     } = _ref38;
     switch (type) {
-      case 1:
-        return /*#__PURE__*/React__default["default"].createElement(SkeletonComponent, {
-          style: {
-            display: 'flex',
-            flexDirection: 'row',
-            justifyContent: 'space-around'
-          },
-          width: width,
-          height: "2.5rem"
-        }, /*#__PURE__*/React__default["default"].createElement(Padding, {
-          vertical: "medium",
-          left: "large"
-        }, /*#__PURE__*/React__default["default"].createElement(SkeletonComponent, {
-          variant: "dark",
-          width: "5rem"
-        })), /*#__PURE__*/React__default["default"].createElement(Padding, {
-          vertical: "medium",
-          left: "large"
-        }, /*#__PURE__*/React__default["default"].createElement(SkeletonComponent, {
-          variant: "dark",
-          width: "3.0625rem"
-        })), /*#__PURE__*/React__default["default"].createElement(Padding, {
-          vertical: "medium",
-          left: "large"
-        }, /*#__PURE__*/React__default["default"].createElement(SkeletonComponent, {
-          variant: "dark",
-          width: "4.6875rem"
-        })), /*#__PURE__*/React__default["default"].createElement(Padding, {
-          vertical: "medium",
-          left: "large"
-        }, /*#__PURE__*/React__default["default"].createElement(SkeletonComponent, {
-          variant: "dark",
-          width: "3.9375rem"
-        })), /*#__PURE__*/React__default["default"].createElement(Padding, {
-          vertical: "medium",
-          horizontal: "large"
-        }, /*#__PURE__*/React__default["default"].createElement(SkeletonComponent, {
-          variant: "dark",
-          width: "1.875rem"
-        })));
       case 2:
         return /*#__PURE__*/React__default["default"].createElement(Container, {
           style: {
@@ -26514,6 +26421,7 @@ const ShimmerObject = {
           variant: "extraDark",
           width: "1.875rem"
         })));
+      case 1:
       default:
         return /*#__PURE__*/React__default["default"].createElement(SkeletonComponent, {
           style: {
@@ -26706,6 +26614,18 @@ const SvgActivity = props => /*#__PURE__*/React__namespace.createElement("svg",
 })));
 var SvgActivity$1 = SvgActivity;
 
+const SvgAddressBookMailedTo = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  width: 24,
+  height: 24,
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), /*#__PURE__*/React__namespace.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M19 3c1.646 0 3 1.354 3 3v12c0 1.646-1.354 3-3 3H7c-1.646 0-3-1.354-3-3v-1H3c-.549 0-1-.451-1-1 0-.549.451-1 1-1h1V9H3c-.549 0-1-.451-1-1 0-.549.451-1 1-1h1V6c0-1.646 1.354-3 3-3h12ZM8 10a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-6a2 2 0 0 1-2-2v-4Zm3.92 0h2.393l-1.276.798L11.921 10ZM10 14v-2.914l2.419 1.728a1 1 0 0 0 1.111.034L16 11.304V14h-6Z"
+}));
+var SvgAddressBookMailedTo$1 = SvgAddressBookMailedTo;
+
 const SvgAddressBookShareByMe = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   width: 24,
   height: 24,
@@ -28670,6 +28590,26 @@ const SvgFolder = props => /*#__PURE__*/React__namespace.createElement("svg", _e
 })));
 var SvgFolder$1 = SvgFolder;
 
+const SvgForwardMultipleTimes = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  width: 24,
+  height: 24,
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), /*#__PURE__*/React__namespace.createElement("g", {
+  clipPath: "url(#a)"
+}, /*#__PURE__*/React__namespace.createElement("path", {
+  d: "M1.781 21c.468.013.887-.302 1-.761a8.919 8.919 0 0 1 7.801-6.689v1.121c0 .714.431 1.363 1.089 1.64a2.005 2.005 0 0 0 2.149-.31l5.06-4.41a1.75 1.75 0 0 0 0-2.677l-5.06-4.419a2.002 2.002 0 0 0-2.182-.298 1.783 1.783 0 0 0-1.088 1.64v1.17C4.95 7.438.556 12.139.5 17.755c0 .839.104 1.677.31 2.492.112.455.532.774 1 .762H1.78V21Z"
+}), /*#__PURE__*/React__namespace.createElement("path", {
+  d: "M15.501 16.227c.057.028.113.057.17.08a2.005 2.005 0 0 0 2.149-.31l5.06-4.406a1.77 1.77 0 0 0 .62-1.339c0-.516-.226-1.008-.62-1.338l-5.06-4.419a2.002 2.002 0 0 0-2.182-.298c-.048.02-.096.044-.145.068.117.065.226.142.327.23l5.06 4.415c.39.334.62.826.62 1.338 0 .516-.225 1.008-.62 1.339l-5.06 4.41a1.93 1.93 0 0 1-.319.23Z"
+})), /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
+  id: "a"
+}, /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "#fff",
+  transform: "matrix(-1 0 0 1 24 0)",
+  d: "M0 0h24v24H0z"
+}))));
+var SvgForwardMultipleTimes$1 = SvgForwardMultipleTimes;
+
 const SvgForward = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   width: 24,
   height: 24,
@@ -29172,6 +29112,25 @@ const SvgMaximize = props => /*#__PURE__*/React__namespace.createElement("svg",
 })));
 var SvgMaximize$1 = SvgMaximize;
 
+const SvgMegaphone = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  width: 24,
+  height: 24,
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), /*#__PURE__*/React__namespace.createElement("g", {
+  clipPath: "url(#a)"
+}, /*#__PURE__*/React__namespace.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "m10.878 18.773-2.831 1.636a1.008 1.008 0 0 1-1.366-.366l-.35-.604h-.003a.985.985 0 0 1-1.347-.361.982.982 0 0 1-1.307-.352l-.75-1.219a.985.985 0 0 1 .323-1.354c.01-.005.02-.014.031-.02l-.032-.055a.985.985 0 0 1 .36-1.346l.007-.004-.362-.628a1.004 1.004 0 0 1 .366-1.365l4.33-2.498 3.351-7.017c.086-.192.231-.356.415-.464a1.005 1.005 0 0 1 1.377.389l8 13.856c.274.473.11 1.092-.366 1.364-.176.103-.377.15-.579.14l-7.475-.576 1.179 2.02a.988.988 0 0 1-.354 1.35.991.991 0 0 1-1.349-.356l-1.268-2.17Z"
+})), /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
+  id: "a"
+}, /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "#fff",
+  d: "M0 0h24v24H0z"
+}))));
+var SvgMegaphone$1 = SvgMegaphone;
+
 const SvgMenu2 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24"
@@ -31077,6 +31036,7 @@ var fillData = /*#__PURE__*/Object.freeze({
   __proto__: null,
   AcceptanceMeeting: SvgAcceptanceMeeting$1,
   Activity: SvgActivity$1,
+  AddressBookMailedTo: SvgAddressBookMailedTo$1,
   AddressBookShareByMe: SvgAddressBookShareByMe$1,
   AddressBookShareWithMe: SvgAddressBookShareWithMe$1,
   AddressBook: SvgAddressBook$1,
@@ -31246,6 +31206,7 @@ var fillData = /*#__PURE__*/Object.freeze({
   FolderShareByMe: SvgFolderShareByMe$1,
   FolderShareWithMe: SvgFolderShareWithMe$1,
   Folder: SvgFolder$1,
+  ForwardMultipleTimes: SvgForwardMultipleTimes$1,
   Forward: SvgForward$1,
   Funnel: SvgFunnel$1,
   Gift: SvgGift$1,
@@ -31286,6 +31247,7 @@ var fillData = /*#__PURE__*/Object.freeze({
   MailMod: SvgMailMod$1,
   Map: SvgMap$1,
   Maximize: SvgMaximize$1,
+  Megaphone: SvgMegaphone$1,
   Menu2: SvgMenu2$1,
   MenuArrow: SvgMenuArrow$1,
   Menu: SvgMenu$1,
@@ -31516,6 +31478,22 @@ const SvgActivityOutline = props => /*#__PURE__*/React__namespace.createElement(
 })));
 var SvgActivityOutline$1 = SvgActivityOutline;
 
+const SvgAddressBookMailedToOutline = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  width: 24,
+  height: 24,
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), /*#__PURE__*/React__namespace.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M22 6c0-1.646-1.354-3-3-3H7C5.354 3 4 4.354 4 6v1H3c-.549 0-1 .451-1 1 0 .549.451 1 1 1h1v6H3c-.549 0-1 .451-1 1 0 .549.451 1 1 1h1v1c0 1.646 1.354 3 3 3h12c1.646 0 3-1.354 3-3V6ZM7 5h12c.549 0 1 .451 1 1v12c0 .549-.451 1-1 1H7c-.549 0-1-.451-1-1v-1c.549 0 1-.451 1-1 0-.549-.451-1-1-1V9c.549 0 1-.451 1-1 0-.549-.451-1-1-1V6c0-.549.451-1 1-1Z"
+}), /*#__PURE__*/React__namespace.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M10 8a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2h-6Zm4.313 2h-2.392l1.116.798L14.313 10ZM10 11.086V14h6v-2.696l-2.47 1.544a1 1 0 0 1-1.111-.034L10 11.086Z"
+}));
+var SvgAddressBookMailedToOutline$1 = SvgAddressBookMailedToOutline;
+
 const SvgAddressBookOutline = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   width: 24,
   height: 24,
@@ -34269,6 +34247,25 @@ const SvgMaximizeOutline = props => /*#__PURE__*/React__namespace.createElement(
 }))));
 var SvgMaximizeOutline$1 = SvgMaximizeOutline;
 
+const SvgMegaphoneOutline = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  width: 24,
+  height: 24,
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, props), /*#__PURE__*/React__namespace.createElement("g", {
+  clipPath: "url(#a)"
+}, /*#__PURE__*/React__namespace.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M10.878 18.774 8.047 20.41a1.008 1.008 0 0 1-1.366-.366l-.35-.605h-.003a.985.985 0 0 1-1.347-.36.982.982 0 0 1-1.307-.352l-.75-1.219a.985.985 0 0 1 .323-1.354c.01-.005.02-.014.031-.02l-.032-.055a.985.985 0 0 1 .36-1.346l.007-.004-.362-.628a1.003 1.003 0 0 1 .366-1.365l4.33-2.498 3.351-7.017c.086-.192.231-.356.415-.464a1.005 1.005 0 0 1 1.377.389l8 13.856c.274.473.11 1.092-.366 1.364-.176.103-.377.15-.579.14l-7.475-.576 1.179 2.02a.988.988 0 0 1-.354 1.35.991.991 0 0 1-1.349-.356l-1.268-2.17Zm-.042-2.283.827-.478c.174-.103.376-.15.578-.14l6.167.482-6.1-10.565-2.667 5.582a.99.99 0 0 1-.408.432l-3.75 2.165 2.43 4.21 2.706-1.566c.031-.023.065-.042.1-.066a.621.621 0 0 1 .117-.056Z"
+})), /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("clipPath", {
+  id: "a"
+}, /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "#fff",
+  d: "M0 0h24v24H0z"
+}))));
+var SvgMegaphoneOutline$1 = SvgMegaphoneOutline;
+
 const SvgMenu2Outline = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24"
@@ -36355,6 +36352,7 @@ var outlineData = /*#__PURE__*/Object.freeze({
   AcceptanceMeetingOutline: SvgAcceptanceMeetingOutline$1,
   ActiveBoardOutline: SvgActiveBoardOutline$1,
   ActivityOutline: SvgActivityOutline$1,
+  AddressBookMailedToOutline: SvgAddressBookMailedToOutline$1,
   AddressBookOutline: SvgAddressBookOutline$1,
   AddressBookShareByMeOutline: SvgAddressBookShareByMeOutline$1,
   AddressBookShareWithMeOutline: SvgAddressBookShareWithMeOutline$1,
@@ -36575,6 +36573,7 @@ var outlineData = /*#__PURE__*/Object.freeze({
   MailStatusOutline: SvgMailStatusOutline$1,
   MapOutline: SvgMapOutline$1,
   MaximizeOutline: SvgMaximizeOutline$1,
+  MegaphoneOutline: SvgMegaphoneOutline$1,
   Menu2Outline: SvgMenu2Outline$1,
   MenuArrowOutline: SvgMenuArrowOutline$1,
   MenuOutline: SvgMenuOutline$1,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@zextras/carbonio-design-system",
-	"version": "2.1.1",
+	"version": "2.2.0",
 	"description": "An awesome UI for Zextras Projects.",
 	"main": "dist/zapp-ui.bundle.js",
 	"types": "dist/zapp-ui.bundle.d.ts",
@@ -62,7 +62,7 @@
 		"@types/react": "^17.0.52",
 		"@types/react-datepicker": "^4.3.4",
 		"@types/styled-components": "^5.1.26",
-		"@zextras/carbonio-ui-configs": "^0.1.11",
+		"@zextras/carbonio-ui-configs": "^0.1.12",
 		"babel-loader": "^9.1.2",
 		"babel-plugin-lodash": "3.3.4",
 		"babel-plugin-styled-components": "2.0.7",