@appquality/unguess-design-system 3.1.55 → 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');
@@ -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,297 +2291,328 @@ 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)));
+  ul {
+    list-style: disc;
+  }
 
-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} {
+  ol {
+    list-style: decimal;
+  }
+
+  li {
+    padding: 0 0.618rem;
+    line-height: 1.618;
+  }
+
+  dt {
+    text-indent: -0.618rem;
+  }
+
+  dd {
+    margin: 0;
+    padding: 0 0.618rem 0 0.618rem;
+  }
+
+  hr {
+    border: none;
+    border-top: 2px solid rgba(#0d0d0d, 0.1);
+    margin: 2rem 0;
+  }
+
+  p,
+  blockquote {
+    line-height: 1.618;
+  }
+
+  p {
+    font-size: 1rem;
+    margin-bottom: 0.618em;
+  }
+
+  blockquote {
+    border-left: 3px solid;
+    border-color: ${({ theme }) => theme.palette.grey["300"]};
+    margin: 1.618em 0.618rem;
+    padding-left: 0.618em;
+  }
+
+  em,
+  i,
+  cite {
+    font-style: italic;
+  }
+
+  strong,
+  b {
+    font-weight: 500;
+  }
+
+  cite {
     display: block;
+    text-align: right;
   }
-`;
-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};
+  u {
+    text-decoration: none;
+    border-bottom: 1px dotted red;
+  }
+
+  small,
+  sub,
+  sup {
+    font-size: 0.618rem;
+    line-height: 1;
+  }
+
+  sub {
+    vertical-align: sub;
+  }
+
+  sup {
+    vertical-align: super;
+  }
+
+  s,
+  strike,
+  del {
+    text-decoration: strikethrough;
+  }
+
+  ins,
+  del {
+    background-color: rgba(220, 220, 220, 0.25);
+  }
+
+  ins {
+    text-decoration: none;
+  }
+
+  /*
+      mark and selection should be different, so user knows which one they've selected.
+      
+      mark and selections:
+      saturation: 44%
+      lightness: 75%
+      Hue is different
+      */
+  mark {
+    background-color: rgba(165, 220, 165, 0.9);
+  }
+
+  ::selection {
+    background-color: rgba(165, 220, 220, 0.9);
+  }
+
+  /* Because mark and selection have same saturation, brightenss, mark won't easily stand out if it's selected */
+  mark::selection {
+    background-color: rgba(165, 220, 110, 0.9);
+  }
+
+  /* dfn and dt both do the same thing: denote a term to be defined */
+  dfn,
+  dt {
+    font-style: oblique;
+    font-weight: 700;
+    text-transform: capitalize;
+  }
+
+  code {
+    background-color: ${({ theme }) => theme.palette.grey[200]};
+    color: ${({ theme }) => theme.palette.red[600]};
+    padding: 0.2rem 0.3rem;
+    border-radius: 4px;
+  }
+
+  pre {
+    background: #0d0d0d;
+    color: #fff;
+    font-family: "JetBrainsMono", monospace;
+    padding: 0.75rem 1rem;
+    border-radius: 0.5rem;
+
+    code {
+      color: inherit;
+      padding: 0;
+      background: none;
+      font-size: 0.8rem;
     }
-  `}
-`;
-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)))) }))] })) }));
-};
+  }
+
+  kbd,
+  samp,
+  data {
+    background-color: rgba(165, 165, 165, 0.2);
+  }
+
+  kbd {
+    font-size: 0.75rem;
+    padding: 0.25ex 0.5ex;
+    border: 1px solid rgb(193, 193, 193);
+    border-radius: 3px;
+  }
+
+  /*Treat samp like a mini blockquote. because basically you're quoting what the computer would do*/
+  samp,
+  data {
+    padding: 0 10px;
+  }
+
+  var,
+  data {
+    font-style: italic;
+  }
+
+  samp {
+    border-left: 5px solid rgb(193, 193, 193);
+  }
+
+  data {
+    padding: 0 10px;
+  }
+
+  /* Placeholder (at the top) */
+    /*p.is-editor-empty:first-child::before {
+    content: attr(data-placeholder);
+    float: left;
+    color: #ced4da;
+    pointer-events: none;
+    height: 0;
+  }*/
+
+  /* Placeholder (on every new line) */
+  .is-empty::before {
+    content: attr(data-placeholder);
+    float: left;
+    color: #ced4da;
+    pointer-events: none;
+    height: 0;
+  }
+`;
 
 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,
@@ -2594,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,
@@ -2612,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,
@@ -2633,9 +2664,9 @@ 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); }
+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$r({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$s({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
@@ -2663,9 +2694,9 @@ var SvgH1Fill = function SvgH1Fill(props) {
 };
 
 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); }
+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$q({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$r({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
@@ -2693,9 +2724,9 @@ var SvgH2Fill = function SvgH2Fill(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); }
+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$p({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$q({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
@@ -2722,317 +2753,448 @@ var SvgH3Fill = function SvgH3Fill(props) {
   }))));
 };
 
-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 Header$1 = styled__default["default"].div `
-  display: flex;
-  flex-direction: column;
-  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) `
-  ${props => reactTheming.retrieveComponentStyles("text.primary", props)}
-  ${props => props.validation === "success" && reactTheming.retrieveComponentStyles("text.success", props)}
-  ${props => props.validation === "warning" && reactTheming.retrieveComponentStyles("text.warning", props)}
-  ${props => props.validation === "error" && reactTheming.retrieveComponentStyles("text.danger", props)}
-`;
-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" })) }));
-};
-
-const Footer$2 = styled__default["default"].div `
-  display: flex;
-  flex-direction: row;
-  padding: ${({ theme }) => theme.space.sm} 16px;
-  background-color: ${({ theme }) => theme.palette.grey[100]};
-`;
-const Text = styled__default["default"](SM) `
-  line-height: 1.7;
-`;
-const EditorFooter = ({ saveText }) => {
-    return jsxRuntime.jsxs(Footer$2, { children: [jsxRuntime.jsxs(Tag, { children: [isMac() ? "Cmd" : "Ctrl", "+enter"] }), "\u00A0", jsxRuntime.jsx(Text, { children: saveText || "to save" })] });
-};
-
-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;
-  }
-
-  ol {
-    list-style: decimal;
-  }
-
-  li {
-    padding: 0 0.618rem;
-    line-height: 1.618;
-  }
-
-  dt {
-    text-indent: -0.618rem;
-  }
-
-  dd {
-    margin: 0;
-    padding: 0 0.618rem 0 0.618rem;
-  }
-
-  hr {
-    border: none;
-    border-top: 2px solid rgba(#0d0d0d, 0.1);
-    margin: 2rem 0;
-  }
+const StyledIconButton = styled__default["default"](IconButton) ``;
+const MenuContainer = styled__default["default"](Card) `
+  padding: ${({ theme }) => theme.space.xxs};
 
-  p,
-  blockquote {
-    line-height: 1.618;
-  }
+  ${StyledIconButton} {
+    :first-child {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
 
-  p {
-    font-size: 1rem;
-    margin-bottom: 0.618em;
-  }
+    :last-child {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
 
-  blockquote {
-    border-left: 3px solid;
-    border-color: ${({ theme }) => theme.palette.grey["300"]};
-    margin: 1.618em 0.618rem;
-    padding-left: 0.618em;
+    :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") }))] })) })));
+};
 
-  em,
-  i,
-  cite {
-    font-style: italic;
-  }
+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;
 
-  strong,
-  b {
-    font-weight: 500;
+    ${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 }) })] })] }));
+};
 
-  cite {
-    display: block;
-    text-align: right;
-  }
+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] }));
+};
 
-  u {
-    text-decoration: none;
-    border-bottom: 1px dotted red;
-  }
+/**
+ * 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;
 
-  small,
-  sub,
-  sup {
-    font-size: 0.618rem;
-    line-height: 1;
-  }
+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));
 
-  sub {
-    vertical-align: sub;
-  }
+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"
+  })));
+};
 
-  sup {
-    vertical-align: super;
-  }
+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 })) })));
+};
 
-  s,
-  strike,
-  del {
-    text-decoration: strikethrough;
+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;
 
-  ins,
-  del {
-    background-color: rgba(220, 220, 220, 0.25);
-  }
+const Field$1 = styled__default["default"](reactDropdowns.Field) ``;
 
-  ins {
-    text-decoration: none;
-  }
+var index$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Field: Field$1
+});
 
-  /*
-      mark and selection should be different, so user knows which one they've selected.
-      
-      mark and selections:
-      saturation: 44%
-      lightness: 75%
-      Hue is different
-      */
-  mark {
-    background-color: rgba(165, 220, 165, 0.9);
-  }
+const UgItem = styled__default["default"](reactDropdowns.Item) `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
 
-  ::selection {
-    background-color: rgba(165, 220, 220, 0.9);
+  > div {
+    height: 100%;
   }
 
-  /* Because mark and selection have same saturation, brightenss, mark won't easily stand out if it's selected */
-  mark::selection {
-    background-color: rgba(165, 220, 110, 0.9);
+  &[disabled] * {
+    opacity: 0.85;
   }
 
-  /* dfn and dt both do the same thing: denote a term to be defined */
-  dfn,
-  dt {
-    font-style: oblique;
-    font-weight: 700;
-    text-transform: capitalize;
+  &[disabled] svg {
+    opacity: 0.5;
   }
 
-  code {
-    background-color: ${({ theme }) => theme.palette.grey[200]};
-    color: ${({ theme }) => theme.palette.red[600]};
-    padding: 0.2rem 0.3rem;
-    border-radius: 4px;
+  &[disabled]:hover {
+    background-color: transparent;
   }
+`;
+const Item$1 = (props) => jsxRuntime.jsx(UgItem, Object.assign({}, props));
 
-  pre {
-    background: #0d0d0d;
-    color: #fff;
-    font-family: "JetBrainsMono", monospace;
-    padding: 0.75rem 1rem;
-    border-radius: 0.5rem;
+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};
 
-    code {
-      color: inherit;
-      padding: 0;
-      background: none;
-      font-size: 0.8rem;
-    }
+  > 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 })] })] }));
+};
 
-  kbd,
-  samp,
-  data {
-    background-color: rgba(165, 165, 165, 0.2);
-  }
+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)));
 
-  kbd {
-    font-size: 0.75rem;
-    padding: 0.25ex 0.5ex;
-    border: 1px solid rgb(193, 193, 193);
-    border-radius: 3px;
-  }
+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)));
 
-  /*Treat samp like a mini blockquote. because basically you're quoting what the computer would do*/
-  samp,
-  data {
-    padding: 0 10px;
-  }
+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));
 
-  var,
-  data {
-    font-style: italic;
-  }
+const MenuHeaderItem = (props) => (jsxRuntime.jsx(reactDropdowns.HeaderItem, Object.assign({}, props)));
 
-  samp {
-    border-left: 5px solid rgb(193, 193, 193);
+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;
 
-  data {
-    padding: 0 10px;
-  }
+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)))) }))] })) }));
+};
 
-  /* Placeholder (at the top) */
-    /*p.is-editor-empty:first-child::before {
-    content: attr(data-placeholder);
-    float: left;
-    color: #ced4da;
-    pointer-events: none;
-    height: 0;
-  }*/
+const Header$1 = styled__default["default"].div `
+  display: flex;
+  flex-direction: column;
+  padding: ${({ theme }) => theme.space.xs} ${({ theme }) => theme.space.md};
+  border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+`;
+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)}
+  ${props => props.validation === "error" && reactTheming.retrieveComponentStyles("text.danger", props)}
+`;
+const EditorHeader = (props) => {
+    const { title, validation } = props;
+    return (jsxRuntime.jsx(Header$1, { children: jsxRuntime.jsx(Title, Object.assign({ isBold: true, validation: validation }, { children: title || "Write" })) }));
+};
 
-  /* Placeholder (on every new line) */
-  .is-empty::before {
-    content: attr(data-placeholder);
-    float: left;
-    color: #ced4da;
-    pointer-events: none;
-    height: 0;
-  }
-`;
+const Footer$2 = styled__default["default"].div `
+  display: flex;
+  flex-direction: row;
+  padding: ${({ theme }) => theme.space.sm} 16px;
+  background-color: ${({ theme }) => theme.palette.grey[100]};
+`;
+const Text = styled__default["default"](SM) `
+  line-height: 1.7;
+`;
+const EditorFooter = ({ saveText }) => {
+    return jsxRuntime.jsxs(Footer$2, { children: [jsxRuntime.jsxs(Tag, { children: [isMac() ? "Cmd" : "Ctrl", "+enter"] }), "\u00A0", jsxRuntime.jsx(Text, { children: saveText || "to save" })] });
+};
 
 const EditorContainer = styled__default["default"](reactForms.FauxInput) `
   
@@ -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;