@zextras/carbonio-design-system 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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.
 
+## [1.2.0](https://github.com/Zextras/carbonio-design-system/compare/v1.1.0...v1.2.0) (2023-02-28)
+
+
+### Features
+
+* **icons:** update icons ([ffc0078](https://github.com/Zextras/carbonio-design-system/commit/ffc0078e0c0e35cdd67803c57f1c20e0394b761d)), closes [#169](https://github.com/Zextras/carbonio-design-system/issues/169)
+* **Modal:** add a prop to specify the container window ([1ce58e4](https://github.com/Zextras/carbonio-design-system/commit/1ce58e4a309fee68e4a96b0f685629204ecb1fa1)), closes [#171](https://github.com/Zextras/carbonio-design-system/issues/171)
+* **TextArea:** create TextArea component ([1215455](https://github.com/Zextras/carbonio-design-system/commit/12154559fa9737a98f3c7a4248c5e54d3233a691)), closes [#174](https://github.com/Zextras/carbonio-design-system/issues/174)
+
+
+### Bug Fixes
+
+* **Button:** avoid accents to be cut off ([8864376](https://github.com/Zextras/carbonio-design-system/commit/88643761c9607d9e1c843412dee875ef22c4246f)), closes [#175](https://github.com/Zextras/carbonio-design-system/issues/175)
+
 ## [1.1.0](https://github.com/Zextras/carbonio-design-system/compare/v1.0.1...v1.1.0) (2023-02-01)
 
 

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

@@ -19,6 +19,7 @@ import { setDefaultLocale } from 'react-datepicker';
 import { StyledComponent } from 'styled-components';
 import { SVGAttributes } from 'react';
 import { SVGProps } from 'react';
+import { TextareaHTMLAttributes } from 'react';
 import { ThemeContext } from 'styled-components';
 
 export declare const Accordion: React_2.ForwardRefExoticComponent<AccordionProps & React_2.RefAttributes<HTMLDivElement>>;
@@ -966,6 +967,8 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
      [K in keyof HTMLElementEventMap]: HTMLElementEventMap[K] extends KeyboardEvent ? K : never;
  }[keyof HTMLElementEventMap];
 
+ declare type HTMLTextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
+
  export declare const Icon: StyledComponent<React_2.ForwardRefExoticComponent<IconComponentProps & React_2.RefAttributes<SVGSVGElement>>, DefaultTheme, Required<Pick<IconProps, "color" | "size">> & IconProps & React_2.SVGAttributes<SVGSVGElement>, "color" | "size">;
 
  export declare const IconButton: React_2.ForwardRefExoticComponent<IconButtonProps & React_2.RefAttributes<HTMLButtonElement>>;
@@ -1269,6 +1272,11 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
      disablePortal?: boolean | undefined;
      /** Content of the modal */
      children?: React_2.ReactNode | React_2.ReactNode[];
+     /**
+      * The window where to insert the Portal's children.
+      * The default value is 'windowObj' obtained from the ThemContext.
+      * */
+     containerWindow?: Window | undefined;
      /** Label for copy button in the Error Modal */
      copyLabel?: ModalFooterProps['errorActionLabel'];
      /** Close icon tooltip label */
@@ -1361,6 +1369,11 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
      disablePortal?: boolean;
      /** Content of the modal */
      children?: React_2.ReactNode | React_2.ReactNode[];
+     /**
+      * The window where to insert the Portal's children.
+      * The default value is 'windowObj' obtained from the ThemContext.
+      * */
+     containerWindow?: Window;
      /** Label for copy button in the Error Modal */
      copyLabel?: ModalFooterProps['errorActionLabel'];
      /** Close icon tooltip label */
@@ -1848,6 +1861,31 @@ export declare function generateHighlightSet(fromColorSet: Parameters<typeof gen
  declare const Text_2: React_2.ForwardRefExoticComponent<TextProps & React_2.RefAttributes<HTMLDivElement>>;
  export { Text_2 as Text }
 
+ export declare type TextArea = ReturnType<typeof React_2.forwardRef<HTMLDivElement, TextAreaProps>> & {
+     _newId?: number;
+ };
+
+ export declare const TextArea: TextArea;
+
+ export declare interface TextAreaProps extends HTMLTextAreaProps {
+     /** Description - helper text */
+     description?: string;
+     /** Error state */
+     hasError?: boolean;
+     /** Ref for the textarea element */
+     textAreaRef?: React_2.Ref<HTMLTextAreaElement> | null;
+     /** Label for the textarea */
+     label?: string;
+     /** Background color for the textarea */
+     backgroundColor?: string | keyof DefaultTheme['palette'];
+     /** Color for the text */
+     textColor?: string;
+     /** Max height for the text area, limit beyond which the scroll is enabled */
+     maxHeight?: string;
+     /** Divider color */
+     borderColor?: string | keyof DefaultTheme['palette'];
+ }
+
  declare type TextOverflow = 'ellipsis' | 'break-word';
 
  export declare interface TextProps extends HTMLAttributes<HTMLDivElement> {

package/dist/zapp-ui.bundle.js

@@ -7586,7 +7586,7 @@ const StyledButton = styled__default["default"].button.attrs(_ref8 => {
 }).withConfig({
   displayName: "Button__StyledButton",
   componentId: "sc-1oof15b-3"
-})(["line-height:1;display:flex;justify-content:center;align-items:center;position:relative;text-transform:uppercase;padding:", ";gap:", ";width:", ";max-width:100%;min-width:0;", "{order:", ";}", "{order:", ";}border:", ";border-radius:", ";", ";cursor:pointer;&:disabled{cursor:default;}"], _ref9 => {
+})(["line-height:normal;display:flex;justify-content:center;align-items:center;position:relative;text-transform:uppercase;padding:", ";gap:", ";width:", ";max-width:100%;min-width:0;", "{order:", ";}", "{order:", ";}border:", ";border-radius:", ";", ";cursor:pointer;&:disabled{cursor:default;}"], _ref9 => {
   let {
     outerPadding
   } = _ref9;
@@ -7932,7 +7932,7 @@ const Link = /*#__PURE__*/React__default["default"].forwardRef(function LinkFn(_
   }, rest), children);
 });
 
-const ContainerEl$5 = styled__default["default"].div.withConfig({
+const ContainerEl$4 = styled__default["default"].div.withConfig({
   displayName: "Container__ContainerEl",
   componentId: "sc-1ihvhjw-0"
 })(["display:flex;flex-direction:", ";align-items:", ";justify-content:", ";flex-wrap:", ";flex-grow:", ";flex-shrink:", ";flex-basis:", ";", ";border-radius:", ";background:", ";box-sizing:border-box;width:", ";min-width:", ";max-width:", ";height:", ";min-height:", ";max-height:", ";", ";padding:", ";gap:", ";&::-webkit-scrollbar{width:0.5rem;}&::-webkit-scrollbar-track{background-color:transparent;}&::-webkit-scrollbar-thumb{background-color:", ";border-radius:0.25rem;}"], _ref => {
@@ -8074,7 +8074,7 @@ const Container = /*#__PURE__*/React__default["default"].forwardRef(function Con
     ...rest
   } = _ref21;
   const direction = React.useMemo(() => orientation.replace('horizontal', 'row').replace('vertical', 'column'), [orientation]);
-  return /*#__PURE__*/React__default["default"].createElement(ContainerEl$5, _extends({
+  return /*#__PURE__*/React__default["default"].createElement(ContainerEl$4, _extends({
     ref: ref,
     orientation: direction
   }, rest), children);
@@ -8127,7 +8127,7 @@ Padding.defaultProps = {
   height: 'fit-content'
 };
 
-const CustomText$8 = styled__default["default"](Text).withConfig({
+const CustomText$6 = styled__default["default"](Text).withConfig({
   displayName: "LoadMore__CustomText",
   componentId: "sc-jeh4v5-0"
 })(["user-select:none;"]);
@@ -8145,13 +8145,13 @@ const LoadMore = /*#__PURE__*/React__default["default"].forwardRef(function Load
     icon: "Sync"
   }), label && /*#__PURE__*/React__default["default"].createElement(Padding, {
     left: "small"
-  }, /*#__PURE__*/React__default["default"].createElement(CustomText$8, null, label)));
+  }, /*#__PURE__*/React__default["default"].createElement(CustomText$6, null, label)));
 });
 
-const DividerEl$2 = styled__default["default"].div.withConfig({
+const DividerEl = styled__default["default"].div.withConfig({
   displayName: "Divider__DividerEl",
   componentId: "sc-deqttz-0"
-})(["box-sizing:border-box;border-bottom:0.0625rem solid ", ";height:0.0625rem;max-height:0.0625rem;min-height:0.0625rem;width:100%;"], _ref => {
+})(["box-sizing:border-box;background-color:", ";height:0.0625rem;max-height:0.0625rem;min-height:0.0625rem;width:100%;"], _ref => {
   let {
     theme,
     color
@@ -8163,7 +8163,7 @@ const Divider = /*#__PURE__*/React__default["default"].forwardRef(function Divid
     color = 'gray2',
     ...rest
   } = _ref2;
-  return /*#__PURE__*/React__default["default"].createElement(DividerEl$2, _extends({
+  return /*#__PURE__*/React__default["default"].createElement(DividerEl, _extends({
     ref: ref,
     color: color
   }, rest));
@@ -8301,7 +8301,7 @@ Paragraph.defaultProps = {
   overflow: 'break-word'
 };
 
-const ContainerEl$4 = styled__default["default"](Container).withConfig({
+const ContainerEl$3 = styled__default["default"](Container).withConfig({
   displayName: "Row__ContainerEl",
   componentId: "sc-1tnd2kq-0"
 })(["display:", ";flex-basis:", ";flex-grow:", ";flex-shrink:", ";order:", ";", ";"], _ref => {
@@ -8340,7 +8340,7 @@ const Row = /*#__PURE__*/React__default["default"].forwardRef(function RowFn(_re
     children,
     ...rest
   } = _ref7;
-  return /*#__PURE__*/React__default["default"].createElement(ContainerEl$4, _extends({
+  return /*#__PURE__*/React__default["default"].createElement(ContainerEl$3, _extends({
     ref: ref
   }, rest), children);
 });
@@ -8421,7 +8421,7 @@ const IconWrapper$2 = styled__default["default"].div.withConfig({
   } = _ref2;
   return !disabled && styled.css(["&:focus{outline:none;> ", "{color:", ";}}&:hover{outline:none;> ", "{color:", ";}}&:active{outline:none;> ", "{color:", ";}}"], Icon, getColor(`${iconColor}.focus`, theme), Icon, getColor(`${iconColor}.hover`, theme), Icon, getColor(`${iconColor}.active`, theme));
 });
-const CustomText$7 = styled__default["default"](Text).withConfig({
+const CustomText$5 = styled__default["default"](Text).withConfig({
   displayName: "Checkbox__CustomText",
   componentId: "sc-1hxecij-1"
 })(["user-select:none;line-height:1.5;"]);
@@ -8474,7 +8474,7 @@ const Checkbox = /*#__PURE__*/React__default["default"].forwardRef(function Chec
     disabled: disabled
   })), label && /*#__PURE__*/React__default["default"].createElement(Padding, {
     left: "small"
-  }, /*#__PURE__*/React__default["default"].createElement(CustomText$7, {
+  }, /*#__PURE__*/React__default["default"].createElement(CustomText$5, {
     size: size,
     weight: "regular",
     overflow: "break-word",
@@ -10163,7 +10163,7 @@ function some(collection, predicate, guard) {
 
 var some_1 = some;
 
-const ContainerEl$3 = styled__default["default"](Container).withConfig({
+const ContainerEl$2 = styled__default["default"](Container).withConfig({
   displayName: "Dropdown__ContainerEl",
   componentId: "sc-1jmq2vf-0"
 })(["user-select:none;outline:none;", ";"], _ref => {
@@ -10235,7 +10235,7 @@ function PopperListItem(_ref3) {
       onClick(e);
     }
   }, [onClick, disabled, keepOpen]);
-  return /*#__PURE__*/React__default["default"].createElement(ContainerEl$3, _extends({
+  return /*#__PURE__*/React__default["default"].createElement(ContainerEl$2, _extends({
     ref: itemRef,
     "data-keep-open": keepOpen,
     className: selected ? 'zapp-selected' : '',
@@ -10286,7 +10286,7 @@ function NestListItem(_ref4) {
   const itemRef = React.useRef(null);
   const keyEvents = React.useMemo(() => onClick && getKeyboardPreset('listItem', onClick) || [], [onClick]);
   useKeyboard(itemRef, keyEvents);
-  return /*#__PURE__*/React__default["default"].createElement(ContainerEl$3, _extends({
+  return /*#__PURE__*/React__default["default"].createElement(ContainerEl$2, _extends({
     "data-keep-open": keepOpen,
     ref: itemRef,
     className: selected ? 'zapp-selected' : '',
@@ -10703,7 +10703,71 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function Drop
   }))));
 });
 
-const ContainerEl$2 = styled__default["default"](Container).withConfig({
+/*
+ * 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"
 })(["cursor:", ";position:relative;", ";padding:", " 0.75rem;gap:0.5rem;min-height:calc( ", " * 1.5 + ", " * 1.5 + 0.125rem );border-radius:0.125rem 0.125rem 0 0;"], _ref => {
@@ -10812,7 +10876,7 @@ const HiddenSpan = styled__default["default"].span.withConfig({
   displayName: "ChipInput__HiddenSpan",
   componentId: "sc-1y52mik-3"
 })(["position:absolute;height:0;overflow:hidden;white-space:pre;"]);
-const InputContainer$1 = styled__default["default"].div.withConfig({
+const InputContainer$2 = styled__default["default"].div.withConfig({
   displayName: "ChipInput__InputContainer",
   componentId: "sc-1y52mik-4"
 })(["position:relative;flex:1 1 auto;overflow-wrap:break-word;max-width:100%;"]);
@@ -10855,91 +10919,47 @@ const AdjustWidthInput = /*#__PURE__*/React__default["default"].forwardRef(funct
       }
     };
   }, [confirmChipOnBlur, inputRef, resizeInput]);
-  return /*#__PURE__*/React__default["default"].createElement(InputContainer$1, null, /*#__PURE__*/React__default["default"].createElement(HiddenSpan, {
+  return /*#__PURE__*/React__default["default"].createElement(InputContainer$2, null, /*#__PURE__*/React__default["default"].createElement(HiddenSpan, {
     ref: hiddenSpanRef
   }), /*#__PURE__*/React__default["default"].createElement(InputEl$2, _extends({}, inputProps, {
     ref: inputRef
   })));
 });
-const Label$3 = styled__default["default"].label.withConfig({
+const Label$4 = styled__default["default"](InputLabel).withConfig({
   displayName: "ChipInput__Label",
   componentId: "sc-1y52mik-5"
-})(["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;pointer-events:none;user-select:none;max-width:calc(100% - ", ");white-space:nowrap;overflow:hidden;text-overflow:ellipsis;", ":focus-within + &{top:0.0625rem;transform:translateY(0);font-size:", ";}", ";"], _ref18 => {
+})(["", ":focus-within + &{top:0.0625rem;transform:translateY(0);font-size:", ";}", ";"], InputContainer$2, _ref18 => {
   let {
     theme
   } = _ref18;
-  return theme.sizes.font.medium;
+  return theme.sizes.font.extrasmall;
 }, _ref19 => {
   let {
+    $hasItems,
     theme
   } = _ref19;
-  return theme.fonts.weight.regular;
-}, _ref20 => {
-  let {
-    theme
-  } = _ref20;
-  return theme.fonts.default;
-}, _ref21 => {
-  let {
-    theme,
-    hasError,
-    hasFocus,
-    disabled
-  } = _ref21;
-  return getColor(`${hasError && 'error' || hasFocus && 'primary' || 'secondary'}.${disabled ? 'disabled' : 'regular'}`, theme);
-}, _ref22 => {
-  let {
-    theme
-  } = _ref22;
-  return `${theme.sizes.padding.large} * 2`;
-}, InputContainer$1, _ref23 => {
-  let {
-    theme
-  } = _ref23;
-  return theme.sizes.font.extrasmall;
-}, _ref24 => {
-  let {
-    hasItems,
-    theme
-  } = _ref24;
-  return hasItems && styled.css(["top:0.0625rem;transform:translateY(0);font-size:", ";"], theme.sizes.font.extrasmall);
+  return $hasItems && styled.css(["top:0.0625rem;transform:translateY(0);font-size:", ";"], theme.sizes.font.extrasmall);
 });
 const CustomIconContainer$1 = styled__default["default"].span.withConfig({
   displayName: "ChipInput__CustomIconContainer",
   componentId: "sc-1y52mik-6"
 })(["align-self:center;"]);
-const DividerEl$1 = styled__default["default"](Divider).withConfig({
-  displayName: "ChipInput__DividerEl",
+const CustomInputDescription = styled__default["default"](InputDescription).withConfig({
+  displayName: "ChipInput__CustomInputDescription",
   componentId: "sc-1y52mik-7"
-})(["&:disabled{color:", ";}"], _ref25 => {
-  let {
-    theme,
-    color
-  } = _ref25;
-  return getColor(`${color}.disabled`, theme);
-});
-const CustomText$6 = styled__default["default"](Text).withConfig({
-  displayName: "ChipInput__CustomText",
-  componentId: "sc-1y52mik-8"
-})(["line-height:1.5;padding-top:0.25rem;min-height:calc(", " * 1.5);background-color:", ";"], _ref26 => {
-  let {
-    theme,
-    size
-  } = _ref26;
-  return theme.sizes.font[size];
-}, _ref27 => {
+})(["background-color:", ";"], _ref20 => {
   let {
     $backgroundColor,
     theme
-  } = _ref27;
+  } = _ref20;
   return $backgroundColor && getColor($backgroundColor, theme);
 });
-const CustomIcon$1 = styled__default["default"](_ref28 => {
+const CustomIcon$1 = styled__default["default"](_ref21 => {
   let {
     onClick,
     iconColor,
     ...rest
-  } = _ref28;
+  } = _ref21;
   return onClick ? /*#__PURE__*/React__default["default"].createElement(IconButton, _extends({
     onClick: onClick,
     iconColor: iconColor
@@ -10948,11 +10968,11 @@ const CustomIcon$1 = styled__default["default"](_ref28 => {
   }, rest));
 }).withConfig({
   displayName: "ChipInput__CustomIcon",
-  componentId: "sc-1y52mik-9"
-})(["padding:0.125rem;", ";"], _ref29 => {
+  componentId: "sc-1y52mik-8"
+})(["padding:0.125rem;", ";"], _ref22 => {
   let {
     onClick
-  } = _ref29;
+  } = _ref22;
   return !onClick && styled.css(["width:1.25rem;height:1.25rem;"]);
 });
 function reducer(state, action) {
@@ -10990,7 +11010,7 @@ function DefaultOnAdd(valueToAdd) {
     label: 'unknown value'
   };
 }
-const ChipInput = /*#__PURE__*/React__default["default"].forwardRef(function ChipInputFn(_ref30, ref) {
+const ChipInput = /*#__PURE__*/React__default["default"].forwardRef(function ChipInputFn(_ref23, ref) {
   let {
     inputRef = null,
     inputName,
@@ -11028,7 +11048,7 @@ const ChipInput = /*#__PURE__*/React__default["default"].forwardRef(function Chi
     wrap = 'wrap',
     maxHeight = '8.125rem',
     ...rest
-  } = _ref30;
+  } = _ref23;
   const [items, dispatch] = React.useReducer(reducer, defaultValue || value || []);
   const [isActive, setIsActive] = React.useState(false);
   const inputElRef = useCombinedRefs(inputRef);
@@ -11234,6 +11254,7 @@ const ChipInput = /*#__PURE__*/React__default["default"].forwardRef(function Chi
     }
   }, [createChipOnPaste, pasteSeparators, requireUniqueChips, savePastedValue]);
   const ChipComp = React.useMemo(() => ChipComponent || Chip, [ChipComponent]);
+  const dividerColor = React.useMemo(() => `${hideBorder && 'transparent' || hasError && 'error' || hasFocus && 'primary' || bottomBorderColor}${disabled ? '.disabled' : ''}`, [bottomBorderColor, disabled, hasError, hasFocus, hideBorder]);
   return /*#__PURE__*/React__default["default"].createElement(Container, {
     height: "fit",
     width: "fill",
@@ -11248,7 +11269,7 @@ const ChipInput = /*#__PURE__*/React__default["default"].forwardRef(function Chi
     onClose: onClose,
     disabled: dropdownDisabled,
     maxHeight: dropdownMaxHeight
-  }, /*#__PURE__*/React__default["default"].createElement(ContainerEl$2, _extends({
+  }, /*#__PURE__*/React__default["default"].createElement(ContainerEl$1, _extends({
     ref: ref,
     orientation: "horizontal",
     width: "fill",
@@ -11286,25 +11307,23 @@ const ChipInput = /*#__PURE__*/React__default["default"].forwardRef(function Chi
     separators: separatorKeys,
     confirmChipOnBlur: confirmChipOnBlur,
     onPaste: onPaste
-  }), placeholder && /*#__PURE__*/React__default["default"].createElement(Label$3, {
+  }), placeholder && /*#__PURE__*/React__default["default"].createElement(Label$4, {
     htmlFor: id,
-    hasFocus: hasFocus,
-    hasError: hasError,
-    disabled: disabled && dropdownDisabled && (!iconAction || iconDisabled),
-    hasItems: items.length > 0 || !!inputElRef.current?.value
+    $hasFocus: hasFocus,
+    $hasError: hasError,
+    $disabled: disabled && dropdownDisabled && (!iconAction || iconDisabled),
+    $hasItems: items.length > 0 || !!inputElRef.current?.value
   }, placeholder)), icon && /*#__PURE__*/React__default["default"].createElement(CustomIconContainer$1, null, /*#__PURE__*/React__default["default"].createElement(CustomIcon$1, {
     icon: icon,
     onClick: iconAction,
     disabled: iconDisabled,
     iconColor: iconColor,
     size: "large"
-  })))), /*#__PURE__*/React__default["default"].createElement(DividerEl$1, {
-    color: hideBorder && 'transparent' || hasError && 'error' || hasFocus && 'primary' || bottomBorderColor
-  }), (hasError && errorLabel !== undefined || description !== undefined) && /*#__PURE__*/React__default["default"].createElement(CustomText$6, {
-    size: "extrasmall",
+  })))), /*#__PURE__*/React__default["default"].createElement(Divider, {
+    color: dividerColor
+  }), (hasError && errorLabel !== undefined || description !== undefined) && /*#__PURE__*/React__default["default"].createElement(CustomInputDescription, {
     color: hasError && 'error' || hasFocus && 'primary' || 'secondary',
     disabled: disabled && dropdownDisabled && (!iconAction || iconDisabled),
-    overflow: "break-word",
     $backgroundColor: errorBackgroundColor
   }, hasError && errorLabel || description));
 });
@@ -11381,7 +11400,7 @@ const EmailComposerInputWrapper = styled__default["default"].div.withConfig({
   } = _ref10;
   return placeholderType === 'default' ? '0' : theme.sizes.padding.medium;
 });
-const InputContainer = styled__default["default"].div.withConfig({
+const InputContainer$1 = styled__default["default"].div.withConfig({
   displayName: "EmailComposerInput__InputContainer",
   componentId: "sc-7qn0kk-4"
 })(["flex-grow:1;flex-basis:0;max-width:100%;font-family:'Roboto',sans-serif;overflow:hidden;> input{width:100%;height:", ";margin:0;border:none;color:", ";padding:0;background-color:transparent !important;font-size:", ";line-height:", ";&:focus{outline:none;}}"], _ref11 => {
@@ -11443,7 +11462,7 @@ const EmailComposerInput = /*#__PURE__*/React__default["default"].forwardRef(fun
     role: "textbox"
   }, rest), /*#__PURE__*/React__default["default"].createElement(EmailComposerInputWrapper, {
     placeholderType: placeholderType
-  }, placeholderType === 'inline' ? /*#__PURE__*/React__default["default"].createElement(PlaceholderInline, null, placeholder) : /*#__PURE__*/React__default["default"].createElement(PlaceholderDefault, null, placeholder), /*#__PURE__*/React__default["default"].createElement(InputContainer, null, /*#__PURE__*/React__default["default"].createElement("input", {
+  }, placeholderType === 'inline' ? /*#__PURE__*/React__default["default"].createElement(PlaceholderInline, null, placeholder) : /*#__PURE__*/React__default["default"].createElement(PlaceholderDefault, null, placeholder), /*#__PURE__*/React__default["default"].createElement(InputContainer$1, null, /*#__PURE__*/React__default["default"].createElement("input", {
     style: {
       transition: 'background 0.2s ease-out'
     },
@@ -11525,7 +11544,7 @@ const IconWrapper$1 = styled__default["default"].div.withConfig({
   } = _ref5;
   return !disabled && styled.css(["transition:background 0.2s ease-out;&:focus{outline:none;background:", ";svg{fill:", ";}}&:hover{outline:none;background:", ";svg{fill:", ";}}&:active{outline:none;background:", ";}"], theme.palette[isActive ? 'primary' : 'transparent'].focus, isActive ? theme.palette.gray6.focus : theme.palette.primary.focus, theme.palette[isActive ? 'primary' : 'transparent'].hover, isActive ? theme.palette.gray6.hover : theme.palette.primary.hover, theme.palette[isActive ? 'primary' : 'transparent'].active);
 });
-const CustomText$5 = styled__default["default"](Text).withConfig({
+const CustomText$4 = styled__default["default"](Text).withConfig({
   displayName: "IconCheckbox__CustomText",
   componentId: "sc-1sflcvp-1"
 })(["white-space:normal;padding-left:", ";user-select:none;"], _ref6 => {
@@ -11589,7 +11608,7 @@ const IconCheckbox = /*#__PURE__*/React__default["default"].forwardRef(function
   }, /*#__PURE__*/React__default["default"].createElement(Icon, {
     size: iconSize,
     icon: icon
-  }))), label && /*#__PURE__*/React__default["default"].createElement(CustomText$5, {
+  }))), label && /*#__PURE__*/React__default["default"].createElement(CustomText$4, {
     size: "medium",
     weight: "regular"
   }, label));
@@ -11659,9 +11678,14 @@ const MultiButton = /*#__PURE__*/React__default["default"].forwardRef(function M
   }, rest)));
 });
 
-const ContainerEl$1 = styled__default["default"](Container).withConfig({
-  displayName: "Input__ContainerEl",
-  componentId: "sc-1ssz6rm-0"
+/*
+ * SPDX-FileCopyrightText: 2023 Zextras <https://www.zextras.com>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+const InputContainer = styled__default["default"](Container).withConfig({
+  displayName: "InputContainer",
+  componentId: "sc-s8x21t-0"
 })(["position:relative;", ";padding:", " 0.75rem;gap:0.5rem;min-height:calc( ", " * 1.5 + ", " * 1.5 + 0.125rem );"], _ref => {
   let {
     $disabled,
@@ -11685,99 +11709,52 @@ const ContainerEl$1 = styled__default["default"](Container).withConfig({
   } = _ref4;
   return theme.sizes.font.extrasmall;
 });
+
 const InputEl$1 = styled__default["default"].input.withConfig({
   displayName: "Input__InputEl",
-  componentId: "sc-1ssz6rm-1"
-})(["border:none !important;height:auto !important;width:100%;outline:0;background:transparent !important;font-size:", ";font-weight:", ";font-family:", ";color:", ";&:disabled{color:", ";}transition:background 0.2s ease-out;line-height:1.5;padding:0;&::placeholder{color:transparent;font-size:0;}"], _ref5 => {
+  componentId: "sc-1ssz6rm-0"
+})(["border:none !important;height:auto !important;width:100%;outline:0;background:transparent !important;font-size:", ";font-weight:", ";font-family:", ";color:", ";&:disabled{color:", ";}transition:background 0.2s ease-out;line-height:1.5;padding:0;&::placeholder{color:transparent;font-size:0;}"], _ref => {
   let {
     theme
-  } = _ref5;
+  } = _ref;
   return theme.sizes.font.medium;
-}, _ref6 => {
+}, _ref2 => {
   let {
     theme
-  } = _ref6;
+  } = _ref2;
   return theme.fonts.weight.regular;
-}, _ref7 => {
+}, _ref3 => {
   let {
     theme
-  } = _ref7;
+  } = _ref3;
   return theme.fonts.default;
-}, _ref8 => {
+}, _ref4 => {
   let {
     theme,
     color
-  } = _ref8;
+  } = _ref4;
   return getColor(color, theme);
-}, _ref9 => {
+}, _ref5 => {
   let {
     theme,
     color
-  } = _ref9;
+  } = _ref5;
   return getColor(`${color}.disabled`, theme);
 });
-const Label$2 = styled__default["default"].label.withConfig({
+const Label$3 = styled__default["default"](InputLabel).withConfig({
   displayName: "Input__Label",
-  componentId: "sc-1ssz6rm-2"
-})(["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;pointer-events:none;user-select:none;max-width:calc(100% - ", ");white-space:nowrap;overflow:hidden;text-overflow:ellipsis;", ":focus + &,", ":not(:placeholder-shown) + &{top:0.0625rem;transform:translateY(0);font-size:", ";}"], _ref10 => {
-  let {
-    theme
-  } = _ref10;
-  return theme.sizes.font.medium;
-}, _ref11 => {
-  let {
-    theme
-  } = _ref11;
-  return theme.fonts.weight.regular;
-}, _ref12 => {
-  let {
-    theme
-  } = _ref12;
-  return theme.fonts.default;
-}, _ref13 => {
-  let {
-    theme,
-    hasError,
-    hasFocus,
-    disabled
-  } = _ref13;
-  return getColor(`${hasError && 'error' || hasFocus && 'primary' || 'secondary'}.${disabled ? 'disabled' : 'regular'}`, theme);
-}, _ref14 => {
-  let {
-    theme
-  } = _ref14;
-  return `${theme.sizes.padding.large} * 2`;
-}, InputEl$1, InputEl$1, _ref15 => {
+  componentId: "sc-1ssz6rm-1"
+})(["", ":focus + &,", ":not(:placeholder-shown) + &{top:0.0625rem;transform:translateY(0);font-size:", ";}"], InputEl$1, InputEl$1, _ref6 => {
   let {
     theme
-  } = _ref15;
+  } = _ref6;
   return theme.sizes.font.extrasmall;
 });
 const CustomIconContainer = styled__default["default"].span.withConfig({
   displayName: "Input__CustomIconContainer",
-  componentId: "sc-1ssz6rm-3"
+  componentId: "sc-1ssz6rm-2"
 })(["align-self:center;"]);
-const DividerEl = styled__default["default"](Divider).withConfig({
-  displayName: "Input__DividerEl",
-  componentId: "sc-1ssz6rm-4"
-})(["&:disabled{color:", ";}"], _ref16 => {
-  let {
-    theme,
-    color
-  } = _ref16;
-  return getColor(`${color}.disabled`, theme);
-});
-const CustomText$4 = styled__default["default"](Text).withConfig({
-  displayName: "Input__CustomText",
-  componentId: "sc-1ssz6rm-5"
-})(["line-height:1.5;padding-top:0.25rem;min-height:calc(", " * 1.5);"], _ref17 => {
-  let {
-    theme,
-    size
-  } = _ref17;
-  return theme.sizes.font[size];
-});
-const Input = /*#__PURE__*/React__default["default"].forwardRef(function InputFn(_ref18, ref) {
+const Input = /*#__PURE__*/React__default["default"].forwardRef(function InputFn(_ref7, ref) {
   let {
     autoFocus = false,
     autoComplete = 'off',
@@ -11798,7 +11775,7 @@ const Input = /*#__PURE__*/React__default["default"].forwardRef(function InputFn
     onEnter,
     description,
     ...rest
-  } = _ref18;
+  } = _ref7;
   const [hasFocus, setHasFocus] = React.useState(false);
   const innerRef = useCombinedRefs(inputRef);
   const [id] = React.useState(() => {
@@ -11831,11 +11808,12 @@ const Input = /*#__PURE__*/React__default["default"].forwardRef(function InputFn
     return events;
   }, [onEnter]);
   useKeyboard(innerRef, keyboardEvents);
+  const dividerColor = React.useMemo(() => `${hideBorder && 'transparent' || hasError && 'error' || hasFocus && 'primary' || borderColor}${disabled ? '.disabled' : ''}`, [borderColor, disabled, hasError, hasFocus, hideBorder]);
   return /*#__PURE__*/React__default["default"].createElement(Container, {
     height: "fit",
     width: "fill",
     crossAlignment: "flex-start"
-  }, /*#__PURE__*/React__default["default"].createElement(ContainerEl$1, _extends({
+  }, /*#__PURE__*/React__default["default"].createElement(InputContainer, _extends({
     ref: ref,
     orientation: "horizontal",
     width: "fill",
@@ -11864,22 +11842,20 @@ const Input = /*#__PURE__*/React__default["default"].forwardRef(function InputFn
     onChange: onChange,
     disabled: disabled,
     placeholder: label
-  }), label && /*#__PURE__*/React__default["default"].createElement(Label$2, {
+  }), label && /*#__PURE__*/React__default["default"].createElement(Label$3, {
     htmlFor: id,
-    hasFocus: hasFocus,
-    hasError: hasError,
-    disabled: disabled
+    $hasFocus: hasFocus,
+    $hasError: hasError,
+    $disabled: disabled
   }, label), CustomIcon && /*#__PURE__*/React__default["default"].createElement(CustomIconContainer, null, /*#__PURE__*/React__default["default"].createElement(CustomIcon, {
     hasError: hasError,
     hasFocus: hasFocus,
     disabled: disabled
-  }))), /*#__PURE__*/React__default["default"].createElement(DividerEl, {
-    color: hideBorder && 'transparent' || hasError && 'error' || hasFocus && 'primary' || borderColor
-  }), description !== undefined && /*#__PURE__*/React__default["default"].createElement(CustomText$4, {
-    size: "extrasmall",
+  }))), /*#__PURE__*/React__default["default"].createElement(Divider, {
+    color: dividerColor
+  }), description !== undefined && /*#__PURE__*/React__default["default"].createElement(InputDescription, {
     color: hasError && 'error' || hasFocus && 'primary' || 'secondary',
-    disabled: disabled,
-    overflow: "break-word"
+    disabled: disabled
   }, description));
 });
 Input._newId = 0;
@@ -12075,7 +12051,7 @@ const InputEl = styled__default["default"].input.withConfig({
   } = _ref3;
   return theme.fonts.default;
 });
-const Label$1 = styled__default["default"].label.withConfig({
+const Label$2 = styled__default["default"].label.withConfig({
   displayName: "SearchInput__Label",
   componentId: "sc-1x8msad-1"
 })(["position:absolute;left:calc( ", " + ", " + 0.125rem );font-size:", ";font-weight:", ";font-family:", ";color:", ";display:", ";"], _ref4 => {
@@ -12144,7 +12120,7 @@ const SearchInput = /*#__PURE__*/React__default["default"].forwardRef(function S
       position: 'relative'
     },
     onClick: onInputFocus
-  }, rest), /*#__PURE__*/React__default["default"].createElement(Label$1, {
+  }, rest), /*#__PURE__*/React__default["default"].createElement(Label$2, {
     htmlFor: "search",
     active: active || comboRef.current !== null && comboRef.current.value !== ''
   }, "Search"), /*#__PURE__*/React__default["default"].createElement(Container, {
@@ -12208,7 +12184,7 @@ function isNil(value) {
 
 var isNil_1 = isNil;
 
-const Label = styled__default["default"](Text).withConfig({
+const Label$1 = styled__default["default"](Text).withConfig({
   displayName: "Select__Label",
   componentId: "sc-1l1iaf2-0"
 })(["position:absolute;top:", ";left:", ";transform:translateY(", ");transition:150ms ease-out;"], _ref => {
@@ -12284,7 +12260,7 @@ const DefaultLabelFactory = _ref6 => {
   }, /*#__PURE__*/React__default["default"].createElement(CustomText$2, {
     size: "medium",
     color: disabled ? 'secondary' : 'text'
-  }, selectedLabels)), /*#__PURE__*/React__default["default"].createElement(Label, {
+  }, selectedLabels)), /*#__PURE__*/React__default["default"].createElement(Label$1, {
     $selected: !isEmpty_1(selected),
     size: !isEmpty_1(selected) ? 'small' : 'medium',
     color: disabled && 'gray2' || (open || focus) && 'primary' || 'secondary'
@@ -21912,6 +21888,211 @@ const Slider = /*#__PURE__*/React__default["default"].forwardRef(function Slider
   }, stepComponents));
 });
 
+const StyledTextArea = styled__default["default"].textarea.withConfig({
+  displayName: "TextArea__StyledTextArea",
+  componentId: "sc-1bbn7sx-0"
+})(["resize:none;width:100%;max-height:100%;overflow-y:hidden;outline:none;background:transparent;font-size:", ";font-weight:", ";font-family:", ";line-height:1.5;border:none;padding:0;margin:0;&:disabled{color:", ";}&::placeholder{color:transparent;font-size:0;user-select:none;}"], _ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.sizes.font.medium;
+}, _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.fonts.weight.regular;
+}, _ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.fonts.default;
+}, _ref4 => {
+  let {
+    theme,
+    $color
+  } = _ref4;
+  return getColor(`${$color}.disabled`, theme);
+});
+const GrowContainer = styled__default["default"].div.withConfig({
+  displayName: "TextArea__GrowContainer",
+  componentId: "sc-1bbn7sx-1"
+})(["width:100%;height:auto;margin-top:", ";max-height:", ";overflow-y:auto;font-size:", ";font-weight:", ";font-family:", ";line-height:1.5;cursor:auto;display:grid;&::after{content:attr(data-replicated-value) ' ';white-space:pre-wrap;visibility:hidden;}& > textarea,&::after{grid-area:1 / 1 / 2 / 2;}&::-webkit-scrollbar{width:0.5rem;}&::-webkit-scrollbar-track{background-color:transparent;}&::-webkit-scrollbar-thumb{background-color:", ";border-radius:0.25rem;}"], _ref5 => {
+  let {
+    $hasLabel,
+    theme
+  } = _ref5;
+  return $hasLabel ? styled.css(["calc(", " * 1.5)"], theme.sizes.font.extrasmall) : '0px';
+}, _ref6 => {
+  let {
+    $maxHeight
+  } = _ref6;
+  return $maxHeight;
+}, _ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.sizes.font.medium;
+}, _ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme.fonts.weight.regular;
+}, _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.fonts.default;
+}, _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.palette.gray2.regular;
+});
+const AdjustHeightTextArea = /*#__PURE__*/React__default["default"].forwardRef(function AdjustTextAreaHeightFn(_ref11, ref) {
+  let {
+    hasLabel,
+    onInput,
+    color,
+    ...props
+  } = _ref11;
+  const {
+    maxHeight
+  } = 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 || '';
+    }
+  }, [textAreaRef]);
+  const onInputHandler = React.useCallback(event => {
+    resizeTextArea();
+    onInput?.(event);
+  }, [resizeTextArea, onInput]);
+  return /*#__PURE__*/React__default["default"].createElement(GrowContainer, {
+    $hasLabel: hasLabel,
+    $maxHeight: maxHeight,
+    ref: containerRef
+  }, /*#__PURE__*/React__default["default"].createElement(StyledTextArea, _extends({}, props, {
+    $color: color,
+    onInput: onInputHandler,
+    rows: 1,
+    ref: textAreaRef
+  })));
+});
+const Label = styled__default["default"](InputLabel).withConfig({
+  displayName: "TextArea__Label",
+  componentId: "sc-1bbn7sx-2"
+})(["", ":focus-within &{top:0.0625rem;transform:translateY(0);font-size:", ";}", ";"], InputContainer, _ref12 => {
+  let {
+    theme
+  } = _ref12;
+  return theme.sizes.font.extrasmall;
+}, _ref13 => {
+  let {
+    $textAreaHasValue,
+    theme
+  } = _ref13;
+  return $textAreaHasValue && styled.css(["top:0.0625rem;transform:translateY(0);font-size:", ";"], theme.sizes.font.extrasmall);
+});
+const TextArea = /*#__PURE__*/React__default["default"].forwardRef(function TextAreaFn(_ref14, ref) {
+  let {
+    maxHeight = '10.313rem',
+    hasError,
+    textAreaRef = null,
+    label,
+    description,
+    backgroundColor = 'gray5',
+    textColor = 'text',
+    borderColor = 'gray2',
+    ...props
+  } = _ref14;
+  const {
+    defaultValue,
+    value,
+    onInput,
+    disabled,
+    onFocus,
+    onBlur
+  } = props;
+  const innerTextAreaRef = useCombinedRefs(textAreaRef);
+  const [hasFocus, setHasFocus] = React.useState(false);
+  const [textAreaHasValue, setTextAreaHasValue] = React.useState(!!defaultValue || !!value);
+  const [id] = React.useState(() => {
+    if (TextArea._newId === undefined) {
+      TextArea._newId = 0;
+    }
+    TextArea._newId += 1;
+    return `textarea-${TextArea._newId}`;
+  });
+  const onTextAreaFocus = React.useCallback(event => {
+    if (!disabled && innerTextAreaRef.current) {
+      setHasFocus(true);
+    }
+    onFocus?.(event);
+  }, [disabled, innerTextAreaRef, onFocus]);
+  const onTextAreaBlur = React.useCallback(event => {
+    setHasFocus(false);
+    onBlur?.(event);
+  }, [onBlur]);
+  const onTextAreaInput = React.useCallback(event => {
+    setTextAreaHasValue(!!event.currentTarget.value);
+    onInput?.(event);
+  }, [onInput]);
+  const forceFocusOnTextArea = React.useCallback(() => {
+    if (!disabled && innerTextAreaRef.current) {
+      setHasFocus(true);
+      innerTextAreaRef.current.focus();
+    }
+  }, [disabled, innerTextAreaRef]);
+  const dividerColor = React.useMemo(() => `${hasError && 'error' || hasFocus && 'primary' || borderColor}${disabled ? '.disabled' : ''}`, [borderColor, disabled, hasError, hasFocus]);
+  const descriptionColor = React.useMemo(() => hasError && 'error' || hasFocus && 'primary' || 'secondary', [hasError, hasFocus]);
+  return /*#__PURE__*/React__default["default"].createElement(Container, {
+    height: "fit",
+    width: "fill",
+    crossAlignment: "flex-start",
+    ref: ref
+  }, /*#__PURE__*/React__default["default"].createElement(InputContainer, {
+    orientation: "horizontal",
+    width: "fill",
+    height: "fit",
+    crossAlignment: label ? 'flex-end' : 'center',
+    borderRadius: "half",
+    background: backgroundColor,
+    onClick: forceFocusOnTextArea,
+    $disabled: disabled,
+    $hasLabel: !!label
+  }, /*#__PURE__*/React__default["default"].createElement(AdjustHeightTextArea, _extends({
+    maxHeight: maxHeight,
+    placeholder: label,
+    color: textColor
+  }, props, {
+    id: id,
+    ref: innerTextAreaRef,
+    onInput: onTextAreaInput,
+    onFocus: onTextAreaFocus,
+    onBlur: onTextAreaBlur,
+    hasLabel: !!label
+  })), label && /*#__PURE__*/React__default["default"].createElement(Label, {
+    htmlFor: id,
+    $hasFocus: hasFocus,
+    $hasError: hasError,
+    $disabled: disabled,
+    $textAreaHasValue: textAreaHasValue
+  }, label)), /*#__PURE__*/React__default["default"].createElement(Divider, {
+    color: dividerColor
+  }), description !== undefined && /*#__PURE__*/React__default["default"].createElement(InputDescription, {
+    color: descriptionColor,
+    disabled: disabled
+  }, description));
+});
+
 const DEFAULT_TRANSITION_TIMING = 'cubic-bezier(0.4, 0, 0.2, 1)';
 const DEFAULT_TRANSITION_DURATION = 225;
 const STYLES = {
@@ -24036,6 +24217,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function ModalFn
     minHeight,
     maxHeight,
     children,
+    containerWindow,
     disablePortal = false,
     zIndex = 999,
     onClick,
@@ -24044,8 +24226,9 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function ModalFn
   } = _ref;
   const [delayedOpen, setDelayedOpen] = React.useState(false);
   const {
-    windowObj
+    windowObj: themeWindowObj
   } = React.useContext(styled.ThemeContext);
+  const windowObj = containerWindow ?? themeWindowObj;
   const innerRef = React.useRef(null);
   const modalRef = useCombinedRefs(ref, innerRef);
   const modalContentRef = React.useRef(null);
@@ -24115,7 +24298,8 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function ModalFn
   }, [open]);
   return /*#__PURE__*/React__default["default"].createElement(Portal, {
     show: open,
-    disablePortal: disablePortal
+    disablePortal: disablePortal,
+    container: windowObj.document.body
   }, /*#__PURE__*/React__default["default"].createElement(ModalContainer, _extends({
     ref: modalRef,
     open: delayedOpen,
@@ -30285,7 +30469,7 @@ const SvgZed = props => /*#__PURE__*/React__namespace.createElement("svg", _exte
 var SvgZed$1 = SvgZed;
 
 /*
- * SPDX-FileCopyrightText: 2022 Zextras <https://www.zextras.com>
+ * SPDX-FileCopyrightText: 2023 Zextras <https://www.zextras.com>
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -30667,6 +30851,26 @@ const SvgAzListOutline = props => /*#__PURE__*/React__namespace.createElement("s
 }));
 var SvgAzListOutline$1 = SvgAzListOutline;
 
+const SvgChevronSortDownOutline = 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", {
+  d: "M14.806 13H9.194a1.165 1.165 0 0 0-1.06.673 1.425 1.425 0 0 0 .173 1.487l2.806 3.431A1.175 1.175 0 0 0 12 19a1.164 1.164 0 0 0 .886-.409l2.807-3.431a1.42 1.42 0 0 0 .173-1.487 1.165 1.165 0 0 0-1.06-.673ZM12 5a1.146 1.146 0 0 0-.886.427l-2.807 3.4a1.4 1.4 0 0 0-.173 1.473 1.174 1.174 0 0 0 1.06.7h5.612a1.173 1.173 0 0 0 1.06-.7 1.4 1.4 0 0 0-.173-1.473l-2.806-3.4A1.146 1.146 0 0 0 12 5ZM9.394 9.667 12 6.453l2.666 3.214H9.394Z"
+}));
+var SvgChevronSortDownOutline$1 = SvgChevronSortDownOutline;
+
+const SvgChevronSortUpOutline = 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", {
+  d: "M14.806 11H9.194a1.165 1.165 0 0 1-1.06-.673 1.425 1.425 0 0 1 .173-1.487l2.806-3.431A1.174 1.174 0 0 1 12 5a1.164 1.164 0 0 1 .886.409l2.807 3.431a1.42 1.42 0 0 1 .173 1.487 1.165 1.165 0 0 1-1.06.673ZM12 19a1.146 1.146 0 0 1-.886-.427l-2.807-3.4a1.4 1.4 0 0 1-.173-1.473 1.174 1.174 0 0 1 1.06-.7h5.612a1.173 1.173 0 0 1 1.06.7 1.4 1.4 0 0 1-.173 1.473l-2.806 3.4A1.146 1.146 0 0 1 12 19Zm-2.606-4.667L12 17.547l2.666-3.214H9.394Z"
+}));
+var SvgChevronSortUpOutline$1 = SvgChevronSortUpOutline;
+
 const SvgZaListOutline = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
   width: 24,
   height: 24,
@@ -35538,7 +35742,7 @@ const SvgZedOutline = props => /*#__PURE__*/React__namespace.createElement("svg"
 var SvgZedOutline$1 = SvgZedOutline;
 
 /*
- * SPDX-FileCopyrightText: 2022 Zextras <https://www.zextras.com>
+ * SPDX-FileCopyrightText: 2023 Zextras <https://www.zextras.com>
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
@@ -35546,6 +35750,8 @@ var SvgZedOutline$1 = SvgZedOutline;
 var outlineData = /*#__PURE__*/Object.freeze({
   __proto__: null,
   AzListOutline: SvgAzListOutline$1,
+  ChevronSortDownOutline: SvgChevronSortDownOutline$1,
+  ChevronSortUpOutline: SvgChevronSortUpOutline$1,
   ZaListOutline: SvgZaListOutline$1,
   AcceptanceMeetingOutline: SvgAcceptanceMeetingOutline$1,
   ActiveBoardOutline: SvgActiveBoardOutline$1,
@@ -36558,6 +36764,7 @@ exports.Switch = Switch;
 exports.TabBar = TabBar;
 exports.Table = Table;
 exports.Text = Text;
+exports.TextArea = TextArea;
 exports.TextWithTooltip = TextWithTooltip;
 exports.ThemeProvider = ThemeProvider;
 exports.Tooltip = Tooltip;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@zextras/carbonio-design-system",
-	"version": "1.1.0",
+	"version": "1.2.0",
 	"description": "An awesome UI for Zextras Projects.",
 	"main": "dist/zapp-ui.bundle.js",
 	"types": "dist/zapp-ui.bundle.d.ts",