@appquality/unguess-design-system 3.1.54 → 3.1.56

package/build/index.js

@@ -24,17 +24,17 @@ var pie = require('@nivo/pie');
 var sunburst = require('@nivo/sunburst');
 var waffle = require('@nivo/waffle');
 var line = require('@nivo/line');
-var containerUtilities = require('@zendeskgarden/container-utilities');
-var reactColorpickers = require('@zendeskgarden/react-colorpickers');
-var reactModals = require('@zendeskgarden/react-modals');
-var reactDropdowns = require('@zendeskgarden/react-dropdowns');
-var reactForms = require('@zendeskgarden/react-forms');
 var react = require('@tiptap/react');
 var Typography = require('@tiptap/extension-typography');
 var Link = require('@tiptap/extension-link');
 var StarterKit = require('@tiptap/starter-kit');
 var Placeholder = require('@tiptap/extension-placeholder');
 var CharacterCount = require('@tiptap/extension-character-count');
+var reactForms = require('@zendeskgarden/react-forms');
+var containerUtilities = require('@zendeskgarden/container-utilities');
+var reactColorpickers = require('@zendeskgarden/react-colorpickers');
+var reactModals = require('@zendeskgarden/react-modals');
+var reactDropdowns = require('@zendeskgarden/react-dropdowns');
 var reactGrid = require('@zendeskgarden/react-grid');
 var formik = require('formik');
 var reactChrome = require('@zendeskgarden/react-chrome');
@@ -644,7 +644,7 @@ const UgAvatar = styled__default["default"](reactAvatars.Avatar) `
     - To visually represent a person, brand, or product
  */
 const Avatar = (props) => {
-    const fixedBadge = props.badge && props.badge > 9 ? "9+" : props.badge;
+    const fixedBadge = props.badge && Number(props.badge) > 9 ? "9+" : props.badge;
     const wrapChildren = (type) => {
         if (type === "icon")
             return props.children;
@@ -1220,7 +1220,7 @@ const Divider = styled__default["default"].div `
   margin-bottom: ${({ theme }) => theme.space.xxs};
   background-color: ${({ theme }) => theme.palette.grey["300"]};
 `;
-const Footer$3 = styled__default["default"].div `
+const Footer$4 = styled__default["default"].div `
   display: flex;
   flex-direction: column;
   margin-top: auto;
@@ -1237,7 +1237,7 @@ const Container$2 = styled__default["default"].div `
       ${wrap ? "flex-wrap: wrap;" : ""}
     `}
 `;
-const CardFooter = (props) => (jsxRuntime.jsxs(Footer$3, { children: [!props.noDivider && jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(Container$2, Object.assign({}, props, { children: props.children }))] }));
+const CardFooter = (props) => (jsxRuntime.jsxs(Footer$4, { children: [!props.noDivider && jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(Container$2, Object.assign({}, props, { children: props.children }))] }));
 
 const UgContentCard = styled__default["default"](reactNotifications.Well) `
   border-radius: ${({ theme }) => theme.borderRadii.lg};
@@ -2291,352 +2291,129 @@ const SentimentChart = ({ data, width, height, margin, tooltip, i18n, }) => {
                 ], enableCrosshair: false, isInteractive: true, enableSlices: "x" }) })) }));
 };
 
-const UgClose$1 = styled__default["default"](reactNotifications.Close) `
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: ${({ theme }) => theme.space.xl};
-    height: ${({ theme }) => theme.space.xl};
+const Footer$3 = styled__default["default"].div `
+  display: flex;
+  flex-direction: row;
+  padding: ${({ theme }) => `${theme.space.sm} 0`};
+  justify-content: flex-end;
+  gap: ${({ theme }) => theme.space.xs};
 `;
-/**
- * Title is a basic component used to display a title. Often used in card headers.
- */
-const Close = (props) => jsxRuntime.jsx(UgClose$1, Object.assign({}, props));
-
-var _circle;
-function _extends$v() { _extends$v = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$v.apply(this, arguments); }
-var SvgCircleFullFill = function SvgCircleFullFill(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$v({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16"
-  }, props), _circle || (_circle = /*#__PURE__*/React__namespace.createElement("circle", {
-    cx: 8,
-    cy: 8,
-    r: 8,
-    fill: "currentColor"
-  })));
+const ChatFooter = ({ saveText, children, }) => {
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(Footer$3, { children: children }) }));
 };
 
-const Trigger$1 = styled.styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  cursor: pointer;
-`;
-const StyledColorSwatchDialog = styled.styled(reactColorpickers.ColorSwatchDialog) `
-  ${({ disableTooltip }) => disableTooltip &&
-    `
-  & div[role="tooltip"] {
-    display: none;
-  }`}
-`;
-const ColorSwatchTrigger = React__default["default"].forwardRef((props, ref) => {
-    var _a;
-    return (jsxRuntime.jsx(Trigger$1, Object.assign({ ref: ref }, props, { style: Object.assign(Object.assign({}, props.style), { color: props.color }) }, { children: (_a = props.children) !== null && _a !== void 0 ? _a : jsxRuntime.jsx(SvgCircleFullFill, {}) })));
-});
-const ColorSwatch = (_a) => {
-    var { colors, rowSize, children, onSelect } = _a, props = __rest(_a, ["colors", "rowSize", "children", "onSelect"]);
-    /**
-     * Convert the colors to the format expected by the ColorSwatchDialog
-     */
-    const cleanedColors = colors.map(({ label, value }) => {
-        return {
-            value,
-            label: label !== null && label !== void 0 ? label : "",
-        };
-    });
-    const matrix = containerUtilities.convertToMatrix(cleanedColors, rowSize !== null && rowSize !== void 0 ? rowSize : 7);
-    const [color, setColor] = React.useState(matrix[0][0].value);
-    const [rowIndex, setRowIndex] = React.useState(0);
-    const [colIndex, setColIndex] = React.useState(0);
-    const [selectedRowIndex, setSelectedRowIndex] = React.useState(0);
-    const [selectedColIndex, setSelectedColIndex] = React.useState(0);
-    const handleChange = (rowIdx, colIdx) => {
-        setRowIndex(rowIdx);
-        setColIndex(colIdx);
-    };
-    const handleSelect = (rowIdx, colIdx) => {
-        setSelectedRowIndex(rowIdx);
-        setSelectedColIndex(colIdx);
-    };
-    return (jsxRuntime.jsx(StyledColorSwatchDialog, Object.assign({ colors: matrix, onChange: handleChange, onSelect: (rowIdx, colIdx) => {
-            handleSelect(rowIdx, colIdx);
-            setColor(matrix[rowIdx][colIdx].value);
-            if (onSelect)
-                onSelect(matrix[rowIdx][colIdx].value);
-        }, rowIndex: rowIndex, colIndex: colIndex, selectedRowIndex: selectedRowIndex, selectedColIndex: selectedColIndex }, props, { children: jsxRuntime.jsx(ColorSwatchTrigger, Object.assign({ color: color }, { children: children })) })));
+const ChatContext = React.createContext(null);
+const ChatContextProvider = ({ onSave, children, }) => {
+    const [isEditing, setIsEditing] = React.useState(false);
+    const [comment, setComment] = React.useState("");
+    const [editor, setEditor] = React.useState();
+    const chatContextValue = React.useMemo(() => ({
+        isEditing,
+        setIsEditing,
+        comment,
+        setComment,
+        editor,
+        setEditor,
+        triggerSave: () => {
+            if (editor && onSave) {
+                onSave(editor);
+            }
+        },
+    }), [comment, setComment, isEditing, setIsEditing, editor, setEditor, onSave]);
+    return (jsxRuntime.jsx(ChatContext.Provider, Object.assign({ value: chatContextValue }, { children: children })));
+};
+const useChatContext = () => {
+    const context = React.useContext(ChatContext);
+    if (!context)
+        throw new Error("Provider not found for ChatContextProvider");
+    return context; // Now we can use the context in the component, SAFELY.
 };
 
-const UgDrawer = styled__default["default"](reactModals.DrawerModal) `
-  @media (max-width: ${({ theme }) => theme.breakpoints.sm}) {
-    width: 100%;
+const ChatContainer = styled__default["default"](Card) `
+  padding: ${({ theme }) => theme.space.md};
+  &:hover {
+    box-shadow: none;
   }
+  cursor: default;
 `;
+const MessagesContainer = styled__default["default"].div `
+  padding: ${({ theme }) => `${theme.space.md} 0`};
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.space.sm};
+`;
+
 /**
- * A Drawer is a container for supplementary content that is anchored to the edge of a page.
- * <hr>
- * Used for this:
-    - To display information or actions that are supplementary to the screen’s primary content
-    - To display a list of actions that affect the screen’s content, such as filtering data
+ * Title is a basic component used to display a title. Often used in card headers.
  */
-const Drawer = (props) => jsxRuntime.jsx(UgDrawer, Object.assign({}, props));
-Drawer.Header = reactModals.DrawerModal.Header;
-Drawer.Body = reactModals.DrawerModal.Body;
-Drawer.Footer = reactModals.DrawerModal.Footer;
-Drawer.FooterItem = reactModals.DrawerModal.FooterItem;
-Drawer.Close = reactModals.DrawerModal.Close;
+const Title$1 = (props) => jsxRuntime.jsx(reactNotifications.Title, Object.assign({}, props));
 
-const Field$1 = styled__default["default"](reactDropdowns.Field) ``;
-
-var index$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  Field: Field$1
-});
+const ChatTitle = styled__default["default"](Title$1) `
+  color: ${({ theme }) => theme.palette.blue[600]};
+  margin: ${({ theme }) => `0 -${theme.space.md}`};
+  padding: ${({ theme }) => `0 ${theme.space.md} ${theme.space.sm}`};
+  border-bottom: ${({ theme }) => `1px solid ${theme.palette.grey[200]}`};
+`;
 
-const UgItem = styled__default["default"](reactDropdowns.Item) `
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
+const editorStyle = styled.css `
+  > * + * {
+    margin-top: 0.75em;
+  }
 
-  > div {
-    height: 100%;
+  *,
+  *:before,
+  *:after {
+    box-sizing: border-box;
   }
 
-  &[disabled] * {
-    opacity: 0.85;
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    line-height: 1.1;
+    font-weight: 500;
+    color: ${({ theme }) => theme.palette.grey["800"]};
   }
 
-  &[disabled] svg {
-    opacity: 0.5;
+  h1 {
+    font-size: 2.617924em;
   }
 
-  &[disabled]:hover {
-    background-color: transparent;
+  h2 {
+    font-size: 1.618em;
   }
-`;
-const Item$1 = (props) => jsxRuntime.jsx(UgItem, Object.assign({}, props));
 
-const Container$1 = styled__default["default"].div `
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  width: 100%;
-`;
-const MetaContainer$1 = styled__default["default"].div `
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-`;
-const ThumbContainer = styled__default["default"].div `
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  margin-right: ${({ theme }) => theme.space.sm};
-  width: 100%;
-  max-width: ${({ theme }) => theme.components.autocomplete.thumbSize};
+  h3 {
+    font-size: 1.5rem;
+  }
 
-  > div {
-    height: 100%;
+  h4 {
+    font-size: 1.3rem;
   }
-`;
-const Label$1 = styled__default["default"](MD) `
-  font-weight: ${({ theme }) => theme.fontWeights.medium};
-  color: ${({ theme }) => theme.palette.grey[800]};
-`;
-const Description$1 = styled__default["default"](SM) `
-  color: ${({ theme }) => theme.palette.grey[600]};
-`;
-const Image$1 = React.memo(({ src }) => {
-    return jsxRuntime.jsx("img", { src: src });
-});
-const ItemContent = (props) => {
-    const { thumbSrc, description, label } = props;
-    return (jsxRuntime.jsxs(Container$1, { children: [thumbSrc && (jsxRuntime.jsx(ThumbContainer, { children: jsxRuntime.jsx(Image$1, { src: thumbSrc }) })), jsxRuntime.jsxs(MetaContainer$1, { children: [label && jsxRuntime.jsx(Label$1, Object.assign({ isBold: true }, { children: label })), description && jsxRuntime.jsx(Description$1, { children: description })] })] }));
-};
 
-const StyledMenu = styled__default["default"](reactDropdowns.Menu) `
-  width: auto !important;
-`;
-/**
- * A Menu is a wrapper for items elements
- **/
-const Menu = (props) => jsxRuntime.jsx(StyledMenu, Object.assign({}, props));
-// Extras
-const PreviousItem = (props) => (jsxRuntime.jsx(reactDropdowns.PreviousItem, Object.assign({}, props)));
-const Separator = (props) => (jsxRuntime.jsx(reactDropdowns.Separator, Object.assign({}, props)));
-const NextItem = (props) => jsxRuntime.jsx(reactDropdowns.NextItem, Object.assign({}, props));
-const ItemMeta = (props) => (jsxRuntime.jsx(reactDropdowns.ItemMeta, Object.assign({}, props)));
-const MediaBody = (props) => (jsxRuntime.jsx(reactDropdowns.MediaBody, Object.assign({}, props)));
-const MediaFigure = (props) => (jsxRuntime.jsx(reactDropdowns.MediaFigure, Object.assign({}, props)));
-const MediaItem = (props) => (jsxRuntime.jsx(reactDropdowns.MediaItem, Object.assign({}, props)));
+  h5 {
+    font-size: 1.2rem;
+  }
 
-const StyledAutocomplete$1 = styled__default["default"](reactDropdowns.Autocomplete) `
-  width: 100%;
-`;
-/**
- * Autocomplete is an input field that filters results as users type. This helps users find something quickly in a large list of options.
- * <hr>
- * Used for this:
-    - To filter down a large list of options
-    - To quickly find a known option
- * Not for this:
-    - To make more than one selection, use Multiselect instead
- */
-const Autocomplete = (props) => (jsxRuntime.jsx(StyledAutocomplete$1, Object.assign({}, props)));
+  h6 {
+    font-size: 1.1rem;
+  }
 
-const StyledLabel$2 = styled__default["default"](reactForms.Label) ``;
-/**
- * A Label is used to specify a title for an input.
- * <hr>
- **/
-const Label = (props) => jsxRuntime.jsx(StyledLabel$2, Object.assign({}, props));
+  /*=====
+      #Lists
+      =====*/
+  ul,
+  ol,
+  dl {
+    padding: 0.618em 0.618rem;
+    margin-left: 1rem;
+  }
 
-const MenuHeaderItem = (props) => (jsxRuntime.jsx(reactDropdowns.HeaderItem, Object.assign({}, props)));
-
-const UgSelect = styled__default["default"](reactDropdowns.Select) `
-  ${(props) => props.isPrimary &&
-    `
-      background-color: ${props.theme.palette.blue[600]};
-      color: white;
-      & svg[data-garden-id="forms.media_figure"] {
-         color: white;
-      }
-   `}
-`;
-/**
- * Select allows a user to pick one option from a list. This helps simplify the UI when space is limited
- * <hr>
- * Used for this:
-    - To make a selection from a list of options
- * Not for this:
-    - To filter a large list of options, use Autocomplete instead
-    - To make multiple selections from a list, use Multiselect instead
-    - To select from a list on mobile, use a native Select instead
- */
-const Select = (props) => jsxRuntime.jsx(UgSelect, Object.assign({}, props));
-const StyledDropdown = styled__default["default"].div `
-  ${StyledLabel$2} {
-    display: block;
-  }
-`;
-const StyledMenuHeaderItem = styled__default["default"](MenuHeaderItem) `
-  pointer-events: none;
-`;
-const Dropdown = (props) => (jsxRuntime.jsx(StyledDropdown, { children: jsxRuntime.jsx(reactDropdowns.Dropdown, Object.assign({}, props)) }));
-const Message = (props) => jsxRuntime.jsx(reactDropdowns.Message, Object.assign({}, props));
-Dropdown.HeaderItem = StyledMenuHeaderItem;
-Dropdown.Separator = Separator;
-
-const StyledAutocomplete = styled__default["default"](Autocomplete) `
-  ${(props) => props.hasSelectedItems &&
-    `
-    border-color: ${getColor(theme.colors.primaryHue, 600)};
-    background-color: ${getColor(theme.colors.primaryHue, 600)};
-    color: white;
-    & > input, & > svg {
-      color: ${props.theme.palette.white};
-    }
-  `}
-`;
-const CounterMultiselect = ({ options, label, i18n, onChange, isCompact, }) => {
-    var _a, _b;
-    const [selectedItems, setSelectedItems] = React.useState(options.filter((o) => o.selected));
-    const [inputValue, setInputValue] = React.useState("");
-    const [matchingOptions, setMatchingOptions] = React.useState(options);
-    React.useEffect(() => {
-        setMatchingOptions(options.filter((option) => option.label
-            .trim()
-            .toLowerCase()
-            .indexOf(inputValue.trim().toLowerCase()) !== -1));
-    }, [inputValue, options]);
-    React.useEffect(() => {
-        setSelectedItems(options.filter((o) => o.selected));
-    }, [options]);
-    const hasSelectedItems = selectedItems.length > 0;
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Dropdown, Object.assign({ inputValue: inputValue, selectedItems: selectedItems, onSelect: (items) => {
-                if (items) {
-                    setSelectedItems(items);
-                    if (onChange)
-                        onChange(items);
-                }
-            }, downshiftProps: {
-                itemToString: (item) => item && item.itemId,
-            }, onStateChange: (changes) => {
-                if (changes.isOpen === false)
-                    setInputValue("");
-            }, onInputValueChange: (value) => setInputValue(value) }, { children: [jsxRuntime.jsxs(Field$1, { children: [label && jsxRuntime.jsx(Label, { children: label }), jsxRuntime.jsx(StyledAutocomplete, Object.assign({ isCompact: isCompact, hasSelectedItems: hasSelectedItems }, { children: hasSelectedItems
-                                ? (i18n === null || i18n === void 0 ? void 0 : i18n.counterText)
-                                    ? i18n.counterText(selectedItems.length)
-                                    : `Items (${selectedItems.length})`
-                                : (_a = i18n === null || i18n === void 0 ? void 0 : i18n.noItems) !== null && _a !== void 0 ? _a : "No items" }))] }), jsxRuntime.jsx(Menu, Object.assign({ isCompact: isCompact }, { children: matchingOptions.length === 0 ? (jsxRuntime.jsx(Item$1, Object.assign({ disabled: true }, { children: (_b = i18n === null || i18n === void 0 ? void 0 : i18n.noMatches) !== null && _b !== void 0 ? _b : "No matches found" }))) : (matchingOptions.map((option) => (jsxRuntime.jsx(Item$1, Object.assign({ value: option }, option, { children: jsxRuntime.jsx("span", { children: option.label }) }), option.itemId)))) }))] })) }));
-};
-
-const editorStyle = styled.css `
-  > * + * {
-    margin-top: 0.75em;
-  }
-
-  *,
-  *:before,
-  *:after {
-    box-sizing: border-box;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    line-height: 1.1;
-    font-weight: 500;
-    color: ${({ theme }) => theme.palette.grey["800"]};
-  }
-
-  h1 {
-    font-size: 2.617924em;
-  }
-
-  h2 {
-    font-size: 1.618em;
-  }
-
-  h3 {
-    font-size: 1.5rem;
-  }
-
-  h4 {
-    font-size: 1.3rem;
-  }
-
-  h5 {
-    font-size: 1.2rem;
-  }
-
-  h6 {
-    font-size: 1.1rem;
-  }
-
-  /*=====
-      #Lists
-      =====*/
-  ul,
-  ol,
-  dl {
-    padding: 0.618em 0.618rem;
-    margin-left: 1rem;
-  }
-
-  ul {
-    list-style: disc;
-  }
+  ul {
+    list-style: disc;
+  }
 
   ol {
     list-style: decimal;
@@ -2833,9 +2610,9 @@ const editorStyle = styled.css `
 `;
 
 var _path$o;
-function _extends$u() { _extends$u = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$u.apply(this, arguments); }
+function _extends$v() { _extends$v = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$v.apply(this, arguments); }
 var SvgBoldFill = function SvgBoldFill(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$v({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
@@ -2848,9 +2625,9 @@ var SvgBoldFill = function SvgBoldFill(props) {
 };
 
 var _path$n;
-function _extends$t() { _extends$t = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$t.apply(this, arguments); }
+function _extends$u() { _extends$u = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$u.apply(this, arguments); }
 var SvgItalicFill = function SvgItalicFill(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
@@ -2866,9 +2643,9 @@ var SvgItalicFill = function SvgItalicFill(props) {
 };
 
 var _path$m, _path2$6;
-function _extends$s() { _extends$s = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$s.apply(this, arguments); }
+function _extends$t() { _extends$t = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$t.apply(this, arguments); }
 var SvgQuoteFill = function SvgQuoteFill(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
@@ -2886,122 +2663,507 @@ var SvgQuoteFill = function SvgQuoteFill(props) {
   })));
 };
 
-var _g$4;
-function _extends$r() { _extends$r = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$r.apply(this, arguments); }
-var SvgH1Fill = function SvgH1Fill(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16"
-  }, props), _g$4 || (_g$4 = /*#__PURE__*/React__namespace.createElement("g", {
-    transform: "translate(-464 -332)"
-  }, /*#__PURE__*/React__namespace.createElement("rect", {
-    width: 16,
-    height: 16,
-    transform: "translate(464 332)",
-    fill: "none"
-  }), /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M3,1V12.273M11.052,1V12.273M3,6.636h8.052",
-    transform: "translate(462 333.5)",
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeWidth: 2
-  }), /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "currentColor",
-    d: "M1.755,15A.731.731,0,0,1,1,14.375a.7.7,0,0,1,.617-.739l.136-.011H2.51V6.346l-.22.2a.81.81,0,0,1-1.018.043.646.646,0,0,1-.137-.92l.086-.1L2.731,4.2l.063-.051.094-.058.091-.041.094-.028.082-.016L3.2,4l.082,0a.734.734,0,0,1,.094.007L3.265,4l.08,0,.113.019.1.028.115.055.083.055L3.8,4.2l.056.056.063.085.045.082.03.085.023.113,0,.063v8.937h.755a.731.731,0,0,1,.753.625.7.7,0,0,1-.617.739L4.775,15Z",
-    transform: "translate(474.469 331)"
-  }))));
+var _g$4;
+function _extends$s() { _extends$s = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$s.apply(this, arguments); }
+var SvgH1Fill = function SvgH1Fill(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16"
+  }, props), _g$4 || (_g$4 = /*#__PURE__*/React__namespace.createElement("g", {
+    transform: "translate(-464 -332)"
+  }, /*#__PURE__*/React__namespace.createElement("rect", {
+    width: 16,
+    height: 16,
+    transform: "translate(464 332)",
+    fill: "none"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M3,1V12.273M11.052,1V12.273M3,6.636h8.052",
+    transform: "translate(462 333.5)",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeWidth: 2
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M1.755,15A.731.731,0,0,1,1,14.375a.7.7,0,0,1,.617-.739l.136-.011H2.51V6.346l-.22.2a.81.81,0,0,1-1.018.043.646.646,0,0,1-.137-.92l.086-.1L2.731,4.2l.063-.051.094-.058.091-.041.094-.028.082-.016L3.2,4l.082,0a.734.734,0,0,1,.094.007L3.265,4l.08,0,.113.019.1.028.115.055.083.055L3.8,4.2l.056.056.063.085.045.082.03.085.023.113,0,.063v8.937h.755a.731.731,0,0,1,.753.625.7.7,0,0,1-.617.739L4.775,15Z",
+    transform: "translate(474.469 331)"
+  }))));
+};
+
+var _g$3;
+function _extends$r() { _extends$r = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$r.apply(this, arguments); }
+var SvgH2Fill = function SvgH2Fill(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16"
+  }, props), _g$3 || (_g$3 = /*#__PURE__*/React__namespace.createElement("g", {
+    transform: "translate(-464 -332)"
+  }, /*#__PURE__*/React__namespace.createElement("rect", {
+    width: 16,
+    height: 16,
+    transform: "translate(464 332)",
+    fill: "none"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M3,1V12.273M11.052,1V12.273M3,6.636h8.052",
+    transform: "translate(462 333.5)",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeWidth: 2
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M5.5,6.75a2.576,2.576,0,1,1,5.141,0,4.961,4.961,0,0,1-1.1,3l-.256.348-1,1.291a8.564,8.564,0,0,0-1.222,2.047l-.071.191H10a.656.656,0,0,1,.632.564l.01.124a.677.677,0,0,1-.527.676L10,15H6.143a.627.627,0,0,1-.5-.252.723.723,0,0,1-.133-.57,8.183,8.183,0,0,1,1.753-3.637L8.24,9.292l.085-.111A3.975,3.975,0,0,0,9.355,6.75a1.288,1.288,0,1,0-2.57,0,.644.644,0,1,1-1.285,0Z",
+    transform: "translate(469.359 331)"
+  }))));
+};
+
+var _g$2;
+function _extends$q() { _extends$q = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$q.apply(this, arguments); }
+var SvgH3Fill = function SvgH3Fill(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16"
+  }, props), _g$2 || (_g$2 = /*#__PURE__*/React__namespace.createElement("g", {
+    transform: "translate(-464 -332)"
+  }, /*#__PURE__*/React__namespace.createElement("rect", {
+    width: 16,
+    height: 16,
+    transform: "translate(464 332)",
+    fill: "none"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M3,1V12.273M11.052,1V12.273M3,6.636h8.052",
+    transform: "translate(462 333.5)",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeWidth: 2
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M15.375,4A.658.658,0,0,1,16,4.688a3.531,3.531,0,0,1-.744,1.665l-.3.44-.171.238-.384.514-.438.568-.136.168.145.043a2.839,2.839,0,0,1,1.95,2.5l.031.225.015.151.021.294.01.334,0,.424a3.323,3.323,0,0,1-.3,1.339A2.286,2.286,0,0,1,13.5,15c-1.6,0-2.5-1-2.5-2.75a.628.628,0,1,1,1.25,0c0,1,.345,1.375,1.25,1.375a1.053,1.053,0,0,0,1.081-.652,1.9,1.9,0,0,0,.169-.723l0-.378-.015-.415-.021-.238c-.134-1.172-.653-1.719-2.149-1.719a.625.625,0,0,1-.571-.407.741.741,0,0,1,.106-.739l.494-.61.446-.564.4-.518.347-.465.3-.41.282-.411H11.625a.645.645,0,0,1-.615-.564L11,4.688a.673.673,0,0,1,.512-.676L11.625,4Z",
+    transform: "translate(464.001 331)"
+  }))));
+};
+
+const StyledIconButton = styled__default["default"](IconButton) ``;
+const MenuContainer = styled__default["default"](Card) `
+  padding: ${({ theme }) => theme.space.xxs};
+
+  ${StyledIconButton} {
+    :first-child {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    :last-child {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    :not(:first-child):not(:last-child) {
+      border-radius: 0;
+    }
+  }
+`;
+const FloatingMenu = (props) => {
+    const { editor } = props;
+    if (!editor) {
+        return null;
+    }
+    return (jsxRuntime.jsx(react.BubbleMenu, Object.assign({}, props, { editor: editor }, { children: jsxRuntime.jsxs(MenuContainer, Object.assign({ isFloating: true }, { children: [jsxRuntime.jsx(StyledIconButton, Object.assign({ size: "small", onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(), isBasic: !editor.isActive("heading", { level: 1 }), isPrimary: editor.isActive("heading", { level: 1 }), isPill: false }, { children: jsxRuntime.jsx(SvgH1Fill, {}, "ug-h1-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, Object.assign({ size: "small", onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(), isBasic: !editor.isActive("heading", { level: 2 }), isPrimary: editor.isActive("heading", { level: 2 }), isPill: false }, { children: jsxRuntime.jsx(SvgH2Fill, {}, "ug-h2-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, Object.assign({ size: "small", onClick: () => editor.chain().focus().toggleHeading({ level: 3 }).run(), isBasic: !editor.isActive("heading", { level: 3 }), isPrimary: editor.isActive("heading", { level: 3 }), isPill: false }, { children: jsxRuntime.jsx(SvgH3Fill, {}, "ug-h3-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, Object.assign({ size: "small", onClick: () => editor.chain().focus().toggleBold().run(), isBasic: !editor.isActive("bold"), isPrimary: editor.isActive("bold"), isPill: false }, { children: jsxRuntime.jsx(SvgBoldFill, {}, "ug-bold-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, Object.assign({ size: "small", onClick: () => editor.chain().focus().toggleItalic().run(), isBasic: !editor.isActive("italic"), isPrimary: editor.isActive("italic"), isPill: false }, { children: jsxRuntime.jsx(SvgItalicFill, {}, "ug-italic-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, Object.assign({ size: "small", onClick: () => editor.chain().focus().toggleBlockquote().run(), isBasic: !editor.isActive("blockquote"), isPrimary: editor.isActive("blockquote"), isPill: false }, { children: jsxRuntime.jsx(SvgQuoteFill, {}, "ug-quote-button-bubble-menu") }))] })) })));
+};
+
+const ChatBoxContainer = styled__default["default"].div `
+  display: flex;
+  border-top: 1px solid ${({ theme }) => theme.palette.grey[200]};
+  margin: ${({ theme }) => `0 -${theme.space.md}`};
+  padding: ${({ theme }) => theme.space.md};
+`;
+const EditorContainer$1 = styled__default["default"](reactForms.FauxInput) `
+  margin-left: ${({ theme }) => theme.space.sm};
+  .ProseMirror {
+    padding: ${({ theme }) => `${theme.space.xxs} ${theme.space.xs}`};
+    background-color: #fff;
+    min-height: 36px;
+    outline: none;
+    max-height: 210px;
+    overflow-y: auto;
+
+    ${editorStyle}
+  }
+`;
+/**
+ * CommentBox is a wrapper around Editor component
+ * <br>
+ * It's a rich text WYSIWYG editors.
+ * <hr>
+ * Used for this:
+    - To add chat feature
+    - To develop collaborative text editing
+   
+   Not for this:
+    - Simple text input, use textarea instead.
+ */
+const CommentBox = (_a) => {
+    var _b;
+    var { onSave, placeholderOptions } = _a, props = __rest(_a, ["onSave", "placeholderOptions"]);
+    const { children, hasInlineMenu, bubbleOptions, author } = props;
+    const { setEditor, triggerSave } = useChatContext();
+    const onKeyDown = (event) => {
+        if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
+            triggerSave();
+        }
+    };
+    const ed = react.useEditor(Object.assign({ extensions: [
+            Typography__default["default"],
+            Link__default["default"],
+            StarterKit__default["default"],
+            Placeholder__default["default"].configure(Object.assign({ placeholder: ({ node }) => {
+                    if (node.type.name === "heading") {
+                        return "What’s the title?";
+                    }
+                    return "Can you add some further context?";
+                } }, placeholderOptions)),
+            CharacterCount__default["default"],
+        ], content: children || "", editorProps: {
+            handleKeyDown: (view, event) => {
+                if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
+                    return true;
+                }
+                return false;
+            },
+        } }, props));
+    if (!ed) {
+        return null;
+    }
+    // Add here because we want to keep also the listener from the props.
+    ed.on("create", ({ editor }) => setEditor(editor));
+    ed.on("update", ({ editor }) => setEditor(editor));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasInlineMenu && (jsxRuntime.jsx(FloatingMenu, { editor: ed, tippyOptions: Object.assign({}, bubbleOptions) })), jsxRuntime.jsxs(ChatBoxContainer, { children: [jsxRuntime.jsx("div", { children: jsxRuntime.jsx(Avatar, Object.assign({ avatarType: (_b = author.avatarType) !== null && _b !== void 0 ? _b : "text" }, { children: author.avatar })) }), jsxRuntime.jsx(EditorContainer$1, { children: jsxRuntime.jsx(react.EditorContent, { editor: ed, onKeyDown: onKeyDown }) })] })] }));
+};
+
+const CommentCard = styled.styled(Card) `
+  padding: ${({ theme }) => `${theme.space.base * 3}px ${theme.space.sm}`};
+`;
+const Comment = ({ author, children, }) => {
+    return (jsxRuntime.jsxs(CommentCard, { children: [jsxRuntime.jsx(Title$1, { children: author }), children] }));
+};
+
+/**
+ * CommentBox is a wrapper around Editor component
+ * <br>
+ * It's a rich text WYSIWYG editors.
+ * <hr>
+ * Used for this:
+    - To add chat feature
+    - To develop collaborative text editing
+   
+   Not for this:
+    - Simple text input, use textarea instead.
+ */
+const Chat = (props) => (
+// <ChatProvider onSave={onSave}>
+jsxRuntime.jsx(ChatContainer, { children: props.children })
+// </ChatProvider>
+);
+Chat.Header = ChatTitle;
+Chat.Comments = MessagesContainer;
+Chat.Input = CommentBox;
+Chat.Footer = ChatFooter;
+
+const UgClose$1 = styled__default["default"](reactNotifications.Close) `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: ${({ theme }) => theme.space.xl};
+    height: ${({ theme }) => theme.space.xl};
+`;
+/**
+ * Title is a basic component used to display a title. Often used in card headers.
+ */
+const Close = (props) => jsxRuntime.jsx(UgClose$1, Object.assign({}, props));
+
+var _circle;
+function _extends$p() { _extends$p = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$p.apply(this, arguments); }
+var SvgCircleFullFill = function SvgCircleFullFill(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16"
+  }, props), _circle || (_circle = /*#__PURE__*/React__namespace.createElement("circle", {
+    cx: 8,
+    cy: 8,
+    r: 8,
+    fill: "currentColor"
+  })));
+};
+
+const Trigger$1 = styled.styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  cursor: pointer;
+`;
+const StyledColorSwatchDialog = styled.styled(reactColorpickers.ColorSwatchDialog) `
+  ${({ disableTooltip }) => disableTooltip &&
+    `
+  & div[role="tooltip"] {
+    display: none;
+  }`}
+`;
+const ColorSwatchTrigger = React__default["default"].forwardRef((props, ref) => {
+    var _a;
+    return (jsxRuntime.jsx(Trigger$1, Object.assign({ ref: ref }, props, { style: Object.assign(Object.assign({}, props.style), { color: props.color }) }, { children: (_a = props.children) !== null && _a !== void 0 ? _a : jsxRuntime.jsx(SvgCircleFullFill, {}) })));
+});
+const ColorSwatch = (_a) => {
+    var { colors, rowSize, children, onSelect } = _a, props = __rest(_a, ["colors", "rowSize", "children", "onSelect"]);
+    /**
+     * Convert the colors to the format expected by the ColorSwatchDialog
+     */
+    const cleanedColors = colors.map(({ label, value }) => {
+        return {
+            value,
+            label: label !== null && label !== void 0 ? label : "",
+        };
+    });
+    const matrix = containerUtilities.convertToMatrix(cleanedColors, rowSize !== null && rowSize !== void 0 ? rowSize : 7);
+    const [color, setColor] = React.useState(matrix[0][0].value);
+    const [rowIndex, setRowIndex] = React.useState(0);
+    const [colIndex, setColIndex] = React.useState(0);
+    const [selectedRowIndex, setSelectedRowIndex] = React.useState(0);
+    const [selectedColIndex, setSelectedColIndex] = React.useState(0);
+    const handleChange = (rowIdx, colIdx) => {
+        setRowIndex(rowIdx);
+        setColIndex(colIdx);
+    };
+    const handleSelect = (rowIdx, colIdx) => {
+        setSelectedRowIndex(rowIdx);
+        setSelectedColIndex(colIdx);
+    };
+    return (jsxRuntime.jsx(StyledColorSwatchDialog, Object.assign({ colors: matrix, onChange: handleChange, onSelect: (rowIdx, colIdx) => {
+            handleSelect(rowIdx, colIdx);
+            setColor(matrix[rowIdx][colIdx].value);
+            if (onSelect)
+                onSelect(matrix[rowIdx][colIdx].value);
+        }, rowIndex: rowIndex, colIndex: colIndex, selectedRowIndex: selectedRowIndex, selectedColIndex: selectedColIndex }, props, { children: jsxRuntime.jsx(ColorSwatchTrigger, Object.assign({ color: color }, { children: children })) })));
+};
+
+const UgDrawer = styled__default["default"](reactModals.DrawerModal) `
+  @media (max-width: ${({ theme }) => theme.breakpoints.sm}) {
+    width: 100%;
+  }
+`;
+/**
+ * A Drawer is a container for supplementary content that is anchored to the edge of a page.
+ * <hr>
+ * Used for this:
+    - To display information or actions that are supplementary to the screen’s primary content
+    - To display a list of actions that affect the screen’s content, such as filtering data
+ */
+const Drawer = (props) => jsxRuntime.jsx(UgDrawer, Object.assign({}, props));
+Drawer.Header = reactModals.DrawerModal.Header;
+Drawer.Body = reactModals.DrawerModal.Body;
+Drawer.Footer = reactModals.DrawerModal.Footer;
+Drawer.FooterItem = reactModals.DrawerModal.FooterItem;
+Drawer.Close = reactModals.DrawerModal.Close;
+
+const Field$1 = styled__default["default"](reactDropdowns.Field) ``;
+
+var index$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Field: Field$1
+});
+
+const UgItem = styled__default["default"](reactDropdowns.Item) `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+
+  > div {
+    height: 100%;
+  }
+
+  &[disabled] * {
+    opacity: 0.85;
+  }
+
+  &[disabled] svg {
+    opacity: 0.5;
+  }
+
+  &[disabled]:hover {
+    background-color: transparent;
+  }
+`;
+const Item$1 = (props) => jsxRuntime.jsx(UgItem, Object.assign({}, props));
+
+const Container$1 = styled__default["default"].div `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+`;
+const MetaContainer$1 = styled__default["default"].div `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+`;
+const ThumbContainer = styled__default["default"].div `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  margin-right: ${({ theme }) => theme.space.sm};
+  width: 100%;
+  max-width: ${({ theme }) => theme.components.autocomplete.thumbSize};
+
+  > div {
+    height: 100%;
+  }
+`;
+const Label$1 = styled__default["default"](MD) `
+  font-weight: ${({ theme }) => theme.fontWeights.medium};
+  color: ${({ theme }) => theme.palette.grey[800]};
+`;
+const Description$1 = styled__default["default"](SM) `
+  color: ${({ theme }) => theme.palette.grey[600]};
+`;
+const Image$1 = React.memo(({ src }) => {
+    return jsxRuntime.jsx("img", { src: src });
+});
+const ItemContent = (props) => {
+    const { thumbSrc, description, label } = props;
+    return (jsxRuntime.jsxs(Container$1, { children: [thumbSrc && (jsxRuntime.jsx(ThumbContainer, { children: jsxRuntime.jsx(Image$1, { src: thumbSrc }) })), jsxRuntime.jsxs(MetaContainer$1, { children: [label && jsxRuntime.jsx(Label$1, Object.assign({ isBold: true }, { children: label })), description && jsxRuntime.jsx(Description$1, { children: description })] })] }));
 };
 
-var _g$3;
-function _extends$q() { _extends$q = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$q.apply(this, arguments); }
-var SvgH2Fill = function SvgH2Fill(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16"
-  }, props), _g$3 || (_g$3 = /*#__PURE__*/React__namespace.createElement("g", {
-    transform: "translate(-464 -332)"
-  }, /*#__PURE__*/React__namespace.createElement("rect", {
-    width: 16,
-    height: 16,
-    transform: "translate(464 332)",
-    fill: "none"
-  }), /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M3,1V12.273M11.052,1V12.273M3,6.636h8.052",
-    transform: "translate(462 333.5)",
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeWidth: 2
-  }), /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "currentColor",
-    d: "M5.5,6.75a2.576,2.576,0,1,1,5.141,0,4.961,4.961,0,0,1-1.1,3l-.256.348-1,1.291a8.564,8.564,0,0,0-1.222,2.047l-.071.191H10a.656.656,0,0,1,.632.564l.01.124a.677.677,0,0,1-.527.676L10,15H6.143a.627.627,0,0,1-.5-.252.723.723,0,0,1-.133-.57,8.183,8.183,0,0,1,1.753-3.637L8.24,9.292l.085-.111A3.975,3.975,0,0,0,9.355,6.75a1.288,1.288,0,1,0-2.57,0,.644.644,0,1,1-1.285,0Z",
-    transform: "translate(469.359 331)"
-  }))));
-};
+const StyledMenu = styled__default["default"](reactDropdowns.Menu) `
+  width: auto !important;
+`;
+/**
+ * A Menu is a wrapper for items elements
+ **/
+const Menu = (props) => jsxRuntime.jsx(StyledMenu, Object.assign({}, props));
+// Extras
+const PreviousItem = (props) => (jsxRuntime.jsx(reactDropdowns.PreviousItem, Object.assign({}, props)));
+const Separator = (props) => (jsxRuntime.jsx(reactDropdowns.Separator, Object.assign({}, props)));
+const NextItem = (props) => jsxRuntime.jsx(reactDropdowns.NextItem, Object.assign({}, props));
+const ItemMeta = (props) => (jsxRuntime.jsx(reactDropdowns.ItemMeta, Object.assign({}, props)));
+const MediaBody = (props) => (jsxRuntime.jsx(reactDropdowns.MediaBody, Object.assign({}, props)));
+const MediaFigure = (props) => (jsxRuntime.jsx(reactDropdowns.MediaFigure, Object.assign({}, props)));
+const MediaItem = (props) => (jsxRuntime.jsx(reactDropdowns.MediaItem, Object.assign({}, props)));
 
-var _g$2;
-function _extends$p() { _extends$p = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$p.apply(this, arguments); }
-var SvgH3Fill = function SvgH3Fill(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$p({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16"
-  }, props), _g$2 || (_g$2 = /*#__PURE__*/React__namespace.createElement("g", {
-    transform: "translate(-464 -332)"
-  }, /*#__PURE__*/React__namespace.createElement("rect", {
-    width: 16,
-    height: 16,
-    transform: "translate(464 332)",
-    fill: "none"
-  }), /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M3,1V12.273M11.052,1V12.273M3,6.636h8.052",
-    transform: "translate(462 333.5)",
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeWidth: 2
-  }), /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "currentColor",
-    d: "M15.375,4A.658.658,0,0,1,16,4.688a3.531,3.531,0,0,1-.744,1.665l-.3.44-.171.238-.384.514-.438.568-.136.168.145.043a2.839,2.839,0,0,1,1.95,2.5l.031.225.015.151.021.294.01.334,0,.424a3.323,3.323,0,0,1-.3,1.339A2.286,2.286,0,0,1,13.5,15c-1.6,0-2.5-1-2.5-2.75a.628.628,0,1,1,1.25,0c0,1,.345,1.375,1.25,1.375a1.053,1.053,0,0,0,1.081-.652,1.9,1.9,0,0,0,.169-.723l0-.378-.015-.415-.021-.238c-.134-1.172-.653-1.719-2.149-1.719a.625.625,0,0,1-.571-.407.741.741,0,0,1,.106-.739l.494-.61.446-.564.4-.518.347-.465.3-.41.282-.411H11.625a.645.645,0,0,1-.615-.564L11,4.688a.673.673,0,0,1,.512-.676L11.625,4Z",
-    transform: "translate(464.001 331)"
-  }))));
-};
+const StyledAutocomplete$1 = styled__default["default"](reactDropdowns.Autocomplete) `
+  width: 100%;
+`;
+/**
+ * Autocomplete is an input field that filters results as users type. This helps users find something quickly in a large list of options.
+ * <hr>
+ * Used for this:
+    - To filter down a large list of options
+    - To quickly find a known option
+ * Not for this:
+    - To make more than one selection, use Multiselect instead
+ */
+const Autocomplete = (props) => (jsxRuntime.jsx(StyledAutocomplete$1, Object.assign({}, props)));
 
-const StyledIconButton = styled__default["default"](IconButton) ``;
-const MenuContainer = styled__default["default"](Card) `
-  padding: ${({ theme }) => theme.space.xxs};
+const StyledLabel$2 = styled__default["default"](reactForms.Label) ``;
+/**
+ * A Label is used to specify a title for an input.
+ * <hr>
+ **/
+const Label = (props) => jsxRuntime.jsx(StyledLabel$2, Object.assign({}, props));
 
-  ${StyledIconButton} {
-    :first-child {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
+const MenuHeaderItem = (props) => (jsxRuntime.jsx(reactDropdowns.HeaderItem, Object.assign({}, props)));
 
-    :last-child {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
+const UgSelect = styled__default["default"](reactDropdowns.Select) `
+  ${(props) => props.isPrimary &&
+    `
+      background-color: ${props.theme.palette.blue[600]};
+      color: white;
+      & svg[data-garden-id="forms.media_figure"] {
+         color: white;
+      }
+   `}
+`;
+/**
+ * Select allows a user to pick one option from a list. This helps simplify the UI when space is limited
+ * <hr>
+ * Used for this:
+    - To make a selection from a list of options
+ * Not for this:
+    - To filter a large list of options, use Autocomplete instead
+    - To make multiple selections from a list, use Multiselect instead
+    - To select from a list on mobile, use a native Select instead
+ */
+const Select = (props) => jsxRuntime.jsx(UgSelect, Object.assign({}, props));
+const StyledDropdown = styled__default["default"].div `
+  ${StyledLabel$2} {
+    display: block;
+  }
+`;
+const StyledMenuHeaderItem = styled__default["default"](MenuHeaderItem) `
+  pointer-events: none;
+`;
+const Dropdown = (props) => (jsxRuntime.jsx(StyledDropdown, { children: jsxRuntime.jsx(reactDropdowns.Dropdown, Object.assign({}, props)) }));
+const Message = (props) => jsxRuntime.jsx(reactDropdowns.Message, Object.assign({}, props));
+Dropdown.HeaderItem = StyledMenuHeaderItem;
+Dropdown.Separator = Separator;
 
-    :not(:first-child):not(:last-child) {
-      border-radius: 0;
+const StyledAutocomplete = styled__default["default"](Autocomplete) `
+  ${(props) => props.hasSelectedItems &&
+    `
+    border-color: ${getColor(theme.colors.primaryHue, 600)};
+    background-color: ${getColor(theme.colors.primaryHue, 600)};
+    color: white;
+    & > input, & > svg {
+      color: ${props.theme.palette.white};
     }
-  }
+  `}
 `;
-const FloatingMenu = (props) => {
-    const { editor } = props;
-    if (!editor) {
-        return null;
-    }
-    return (jsxRuntime.jsx(react.BubbleMenu, Object.assign({}, props, { editor: editor }, { children: jsxRuntime.jsxs(MenuContainer, Object.assign({ isFloating: true }, { children: [jsxRuntime.jsx(StyledIconButton, Object.assign({ size: "small", onClick: () => editor.chain().focus().toggleHeading({ level: 1 }).run(), isBasic: !editor.isActive("heading", { level: 1 }), isPrimary: editor.isActive("heading", { level: 1 }), isPill: false }, { children: jsxRuntime.jsx(SvgH1Fill, {}, "ug-h1-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, Object.assign({ size: "small", onClick: () => editor.chain().focus().toggleHeading({ level: 2 }).run(), isBasic: !editor.isActive("heading", { level: 2 }), isPrimary: editor.isActive("heading", { level: 2 }), isPill: false }, { children: jsxRuntime.jsx(SvgH2Fill, {}, "ug-h2-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, Object.assign({ size: "small", onClick: () => editor.chain().focus().toggleHeading({ level: 3 }).run(), isBasic: !editor.isActive("heading", { level: 3 }), isPrimary: editor.isActive("heading", { level: 3 }), isPill: false }, { children: jsxRuntime.jsx(SvgH3Fill, {}, "ug-h3-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, Object.assign({ size: "small", onClick: () => editor.chain().focus().toggleBold().run(), isBasic: !editor.isActive("bold"), isPrimary: editor.isActive("bold"), isPill: false }, { children: jsxRuntime.jsx(SvgBoldFill, {}, "ug-bold-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, Object.assign({ size: "small", onClick: () => editor.chain().focus().toggleItalic().run(), isBasic: !editor.isActive("italic"), isPrimary: editor.isActive("italic"), isPill: false }, { children: jsxRuntime.jsx(SvgItalicFill, {}, "ug-italic-button-bubble-menu") })), jsxRuntime.jsx(StyledIconButton, Object.assign({ size: "small", onClick: () => editor.chain().focus().toggleBlockquote().run(), isBasic: !editor.isActive("blockquote"), isPrimary: editor.isActive("blockquote"), isPill: false }, { children: jsxRuntime.jsx(SvgQuoteFill, {}, "ug-quote-button-bubble-menu") }))] })) })));
+const CounterMultiselect = ({ options, label, i18n, onChange, isCompact, }) => {
+    var _a, _b;
+    const [selectedItems, setSelectedItems] = React.useState(options.filter((o) => o.selected));
+    const [inputValue, setInputValue] = React.useState("");
+    const [matchingOptions, setMatchingOptions] = React.useState(options);
+    React.useEffect(() => {
+        setMatchingOptions(options.filter((option) => option.label
+            .trim()
+            .toLowerCase()
+            .indexOf(inputValue.trim().toLowerCase()) !== -1));
+    }, [inputValue, options]);
+    React.useEffect(() => {
+        setSelectedItems(options.filter((o) => o.selected));
+    }, [options]);
+    const hasSelectedItems = selectedItems.length > 0;
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Dropdown, Object.assign({ inputValue: inputValue, selectedItems: selectedItems, onSelect: (items) => {
+                if (items) {
+                    setSelectedItems(items);
+                    if (onChange)
+                        onChange(items);
+                }
+            }, downshiftProps: {
+                itemToString: (item) => item && item.itemId,
+            }, onStateChange: (changes) => {
+                if (changes.isOpen === false)
+                    setInputValue("");
+            }, onInputValueChange: (value) => setInputValue(value) }, { children: [jsxRuntime.jsxs(Field$1, { children: [label && jsxRuntime.jsx(Label, { children: label }), jsxRuntime.jsx(StyledAutocomplete, Object.assign({ isCompact: isCompact, hasSelectedItems: hasSelectedItems }, { children: hasSelectedItems
+                                ? (i18n === null || i18n === void 0 ? void 0 : i18n.counterText)
+                                    ? i18n.counterText(selectedItems.length)
+                                    : `Items (${selectedItems.length})`
+                                : (_a = i18n === null || i18n === void 0 ? void 0 : i18n.noItems) !== null && _a !== void 0 ? _a : "No items" }))] }), jsxRuntime.jsx(Menu, Object.assign({ isCompact: isCompact }, { children: matchingOptions.length === 0 ? (jsxRuntime.jsx(Item$1, Object.assign({ disabled: true }, { children: (_b = i18n === null || i18n === void 0 ? void 0 : i18n.noMatches) !== null && _b !== void 0 ? _b : "No matches found" }))) : (matchingOptions.map((option) => (jsxRuntime.jsx(Item$1, Object.assign({ value: option }, option, { children: jsxRuntime.jsx("span", { children: option.label }) }), option.itemId)))) }))] })) }));
 };
 
 const Header$1 = styled__default["default"].div `
@@ -3010,7 +3172,7 @@ const Header$1 = styled__default["default"].div `
   padding: ${({ theme }) => theme.space.xs} ${({ theme }) => theme.space.md};
   border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
 `;
-const Title$1 = styled__default["default"](MD) `
+const Title = styled__default["default"](MD) `
   ${props => reactTheming.retrieveComponentStyles("text.primary", props)}
   ${props => props.validation === "success" && reactTheming.retrieveComponentStyles("text.success", props)}
   ${props => props.validation === "warning" && reactTheming.retrieveComponentStyles("text.warning", props)}
@@ -3018,7 +3180,7 @@ const Title$1 = styled__default["default"](MD) `
 `;
 const EditorHeader = (props) => {
     const { title, validation } = props;
-    return (jsxRuntime.jsx(Header$1, { children: jsxRuntime.jsx(Title$1, Object.assign({ isBold: true, validation: validation }, { children: title || "Write" })) }));
+    return (jsxRuntime.jsx(Header$1, { children: jsxRuntime.jsx(Title, Object.assign({ isBold: true, validation: validation }, { children: title || "Write" })) }));
 };
 
 const Footer$2 = styled__default["default"].div `
@@ -3479,11 +3641,6 @@ const Spinner = (props) => jsxRuntime.jsx(UgSpinner, Object.assign({}, props));
  */
 const Dots = (props) => jsxRuntime.jsx(reactLoaders.Dots, Object.assign({}, props));
 
-/**
- * Title is a basic component used to display a title. Often used in card headers.
- */
-const Title = (props) => jsxRuntime.jsx(reactNotifications.Title, Object.assign({}, props));
-
 var _path$k;
 function _extends$m() { _extends$m = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$m.apply(this, arguments); }
 var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
@@ -3540,7 +3697,7 @@ const StyledCard = styled__default["default"](ContainerCard) `
 const LoginForm = (props) => {
     const { width } = useWindowSize();
     const breakpointMd = parseInt(theme.breakpoints.md, 10);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(StyledCard, Object.assign({}, (width > breakpointMd && { isFloating: true }), props.card, { children: [jsxRuntime.jsx(Title, Object.assign({ style: {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(StyledCard, Object.assign({}, (width > breakpointMd && { isFloating: true }), props.card, { children: [jsxRuntime.jsx(Title$1, Object.assign({ style: {
                             textAlign: "center",
                             marginTop: theme.space.sm,
                             marginBottom: theme.space.lg,
@@ -4047,7 +4204,7 @@ const UgAnchor = styled__default["default"](reactButtons.Anchor).attrs((props) =
 }) `
   ${(props) => reactTheming.retrieveComponentStyles(CLOSE_COMPONENT_ID, props)};
 `;
-const UgTitle = styled__default["default"](Title).attrs((props) => {
+const UgTitle = styled__default["default"](Title$1).attrs((props) => {
     var _a;
     return ({
         "data-custom-id": (_a = props["data-custom-id"]) !== null && _a !== void 0 ? _a : TITLE_COMPONENT_ID,
@@ -5829,6 +5986,9 @@ exports.CampaignExperientialIcon = SvgCampaignExperiential;
 exports.CampaignFunctionalIcon = SvgCampaignFunctional;
 exports.Caption = Caption;
 exports.Card = Card;
+exports.Chat = Chat;
+exports.ChatContext = ChatContext;
+exports.ChatProvider = ChatContextProvider;
 exports.Checkbox = Checkbox;
 exports.CheckboxCard = CheckboxCard;
 exports.Chrome = Chrome;
@@ -5836,6 +5996,7 @@ exports.Close = Close;
 exports.Code = Code;
 exports.Col = Col;
 exports.ColorSwatch = ColorSwatch;
+exports.Comment = Comment;
 exports.ContainerCard = ContainerCard;
 exports.Content = Content$1;
 exports.CounterMultiselect = CounterMultiselect;
@@ -5938,7 +6099,7 @@ exports.TextLabel = TextLabel;
 exports.Textarea = Textarea;
 exports.Tiles = Tiles;
 exports.Timeline = Timeline;
-exports.Title = Title;
+exports.Title = Title$1;
 exports.ToastProvider = ToastProvider;
 exports.Toggle = Toggle;
 exports.Tooltip = Tooltip;
@@ -5952,4 +6113,5 @@ exports.XXXL = XXXL;
 exports.cardCmponentStyle = cardCmponentStyle;
 exports.getColor = getColor;
 exports.theme = theme;
+exports.useChatContext = useChatContext;
 exports.useToast = useToast;