@appquality/unguess-design-system 3.1.53 → 3.1.55

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+# v3.1.55 (Fri Dec 22 2023)
+
+#### 🐛 Bug Fix
+
+- add-bug-comments-components [#280](https://github.com/AppQuality/unguess-design-system/pull/280) ([@cannarocks](https://github.com/cannarocks) [@iDome89](https://github.com/iDome89))
+- Bugcomments components [#279](https://github.com/AppQuality/unguess-design-system/pull/279) ([@cannarocks](https://github.com/cannarocks) [@marcbon](https://github.com/marcbon))
+
+#### Authors: 3
+
+- [@iDome89](https://github.com/iDome89)
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
+# v3.1.54 (Tue Nov 14 2023)
+
+#### 🐛 Bug Fix
+
+- chore(styled-components): update to 6.1.1 [#278](https://github.com/AppQuality/unguess-design-system/pull/278) ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
 # v3.1.53 (Thu Nov 09 2023)
 
 #### 🐛 Bug Fix

package/build/index.js

@@ -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;
@@ -2578,6 +2578,208 @@ const CounterMultiselect = ({ options, label, i18n, onChange, isCompact, }) => {
                                 : (_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)))) }))] })) }));
 };
 
+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); }
+var SvgBoldFill = function SvgBoldFill(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16"
+  }, props), _path$o || (_path$o = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M7.5 0C9.952 0 12 2.048 12 4.5a4.483 4.483 0 01-1.27 3.108C12.078 8.39 13 9.855 13 11.5c0 2.452-2.048 4.5-4.5 4.5H4a1 1 0 01-1-1V1a1 1 0 011-1h3.5zM5 14h3.5c1.348 0 2.5-1.152 2.5-2.5S9.848 9 8.5 9H5v5zM7.5 2H5v5h2.5C8.848 7 10 5.848 10 4.5S8.848 2 7.5 2z"
+  })));
+};
+
+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); }
+var SvgItalicFill = function SvgItalicFill(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    focusable: "false",
+    viewBox: "0 0 16 16"
+  }, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeWidth: 2,
+    d: "M8 1h3M9.5 1l-3 14M5 15h3"
+  })));
+};
+
+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); }
+var SvgQuoteFill = function SvgQuoteFill(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), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M7 8H4c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v3c0 .55-.45 1-1 1zm6 0h-3c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v3c0 .55-.45 1-1 1z"
+  })), _path2$6 || (_path2$6 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeWidth: 2,
+    d: "M5.5 12C6.5 11 7 9.5 7 8V6m4.5 6c1-1 1.5-2.5 1.5-4V6"
+  })));
+};
+
+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$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)"
+  }))));
+};
+
+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 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;
@@ -2832,208 +3034,6 @@ 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); }
-var SvgBoldFill = function SvgBoldFill(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$u({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16"
-  }, props), _path$o || (_path$o = /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "currentColor",
-    d: "M7.5 0C9.952 0 12 2.048 12 4.5a4.483 4.483 0 01-1.27 3.108C12.078 8.39 13 9.855 13 11.5c0 2.452-2.048 4.5-4.5 4.5H4a1 1 0 01-1-1V1a1 1 0 011-1h3.5zM5 14h3.5c1.348 0 2.5-1.152 2.5-2.5S9.848 9 8.5 9H5v5zM7.5 2H5v5h2.5C8.848 7 10 5.848 10 4.5S8.848 2 7.5 2z"
-  })));
-};
-
-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); }
-var SvgItalicFill = function SvgItalicFill(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$t({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 16,
-    height: 16,
-    focusable: "false",
-    viewBox: "0 0 16 16"
-  }, props), _path$n || (_path$n = /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeWidth: 2,
-    d: "M8 1h3M9.5 1l-3 14M5 15h3"
-  })));
-};
-
-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); }
-var SvgQuoteFill = function SvgQuoteFill(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), _path$m || (_path$m = /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "currentColor",
-    d: "M7 8H4c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v3c0 .55-.45 1-1 1zm6 0h-3c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v3c0 .55-.45 1-1 1z"
-  })), _path2$6 || (_path2$6 = /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "none",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeWidth: 2,
-    d: "M5.5 12C6.5 11 7 9.5 7 8V6m4.5 6c1-1 1.5-2.5 1.5-4V6"
-  })));
-};
-
-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$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)"
-  }))));
-};
-
-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 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 EditorContainer = styled__default["default"](reactForms.FauxInput) `
   
   ${({ editable }) => !editable &&

package/build/stories/buttons/button/index.stories.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ButtonArgs } from "./_types";
 export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ButtonArgs>;
 export declare const Basic: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ButtonArgs>;

package/build/stories/buttons/utils.d.ts

@@ -8,18 +8,18 @@ export declare const variants: readonly [{}, {
     readonly disabled: true;
 }];
 export declare const Row: import("styled-components").IStyledComponent<"web", {
-    alignItems?: "end" | "start" | "center" | "baseline" | "stretch" | undefined;
-    alignItemsXs?: "end" | "start" | "center" | "baseline" | "stretch" | undefined;
-    alignItemsSm?: "end" | "start" | "center" | "baseline" | "stretch" | undefined;
-    alignItemsMd?: "end" | "start" | "center" | "baseline" | "stretch" | undefined;
-    alignItemsLg?: "end" | "start" | "center" | "baseline" | "stretch" | undefined;
-    alignItemsXl?: "end" | "start" | "center" | "baseline" | "stretch" | undefined;
-    justifyContent?: "end" | "start" | "center" | "between" | "around" | undefined;
-    justifyContentXs?: "end" | "start" | "center" | "between" | "around" | undefined;
-    justifyContentSm?: "end" | "start" | "center" | "between" | "around" | undefined;
-    justifyContentMd?: "end" | "start" | "center" | "between" | "around" | undefined;
-    justifyContentLg?: "end" | "start" | "center" | "between" | "around" | undefined;
-    justifyContentXl?: "end" | "start" | "center" | "between" | "around" | undefined;
+    alignItems?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
+    alignItemsXs?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
+    alignItemsSm?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
+    alignItemsMd?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
+    alignItemsLg?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
+    alignItemsXl?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
+    justifyContent?: "start" | "center" | "end" | "between" | "around" | undefined;
+    justifyContentXs?: "start" | "center" | "end" | "between" | "around" | undefined;
+    justifyContentSm?: "start" | "center" | "end" | "between" | "around" | undefined;
+    justifyContentMd?: "start" | "center" | "end" | "between" | "around" | undefined;
+    justifyContentLg?: "start" | "center" | "end" | "between" | "around" | undefined;
+    justifyContentXl?: "start" | "center" | "end" | "between" | "around" | undefined;
     wrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
     wrapXs?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
     wrapSm?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
@@ -73,7 +73,7 @@ export declare const Row: import("styled-components").IStyledComponent<"web", {
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "decimal" | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
@@ -299,18 +299,18 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
     md?: string | number | boolean | undefined;
     lg?: string | number | boolean | undefined;
     xl?: string | number | boolean | undefined;
-    alignSelf?: "auto" | "end" | "start" | "center" | "baseline" | "stretch" | undefined;
-    alignSelfXs?: "auto" | "end" | "start" | "center" | "baseline" | "stretch" | undefined;
-    alignSelfSm?: "auto" | "end" | "start" | "center" | "baseline" | "stretch" | undefined;
-    alignSelfMd?: "auto" | "end" | "start" | "center" | "baseline" | "stretch" | undefined;
-    alignSelfLg?: "auto" | "end" | "start" | "center" | "baseline" | "stretch" | undefined;
-    alignSelfXl?: "auto" | "end" | "start" | "center" | "baseline" | "stretch" | undefined;
-    textAlign?: "end" | "start" | "center" | "justify" | undefined;
-    textAlignXs?: "end" | "start" | "center" | "justify" | undefined;
-    textAlignSm?: "end" | "start" | "center" | "justify" | undefined;
-    textAlignMd?: "end" | "start" | "center" | "justify" | undefined;
-    textAlignLg?: "end" | "start" | "center" | "justify" | undefined;
-    textAlignXl?: "end" | "start" | "center" | "justify" | undefined;
+    alignSelf?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
+    alignSelfXs?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
+    alignSelfSm?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
+    alignSelfMd?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
+    alignSelfLg?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
+    alignSelfXl?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
+    textAlign?: "start" | "center" | "end" | "justify" | undefined;
+    textAlignXs?: "start" | "center" | "end" | "justify" | undefined;
+    textAlignSm?: "start" | "center" | "end" | "justify" | undefined;
+    textAlignMd?: "start" | "center" | "end" | "justify" | undefined;
+    textAlignLg?: "start" | "center" | "end" | "justify" | undefined;
+    textAlignXl?: "start" | "center" | "end" | "justify" | undefined;
     offset?: string | number | undefined;
     offsetXs?: string | number | undefined;
     offsetSm?: string | number | undefined;
@@ -370,7 +370,7 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "decimal" | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
@@ -640,7 +640,7 @@ export declare const MD: import("styled-components").IStyledComponent<"web", {
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "decimal" | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;

package/build/stories/chat/_types.d.ts

@@ -0,0 +1,21 @@
+import { PlaceholderOptions } from "@tiptap/extension-placeholder";
+import { BubbleMenuProps, Editor, EditorOptions } from "@tiptap/react";
+type validationStatus = "success" | "warning" | "error";
+export interface ChatArgs extends Partial<EditorOptions> {
+    placeholderOptions?: Partial<PlaceholderOptions>;
+    hasInlineMenu?: boolean;
+    bubbleOptions?: any;
+    author: {
+        avatar: string;
+        avatarType?: "icon" | "image" | "text";
+    };
+    onSave?: (editor: Editor) => void;
+    triggerSave?: () => void;
+}
+export interface EditorHeaderArgs {
+    title?: string;
+    validation?: validationStatus;
+}
+export interface FloatingMenuArgs extends Partial<BubbleMenuProps> {
+}
+export {};

package/build/stories/chat/chatInput.d.ts

@@ -0,0 +1 @@
+export declare const ChatInput: () => void;

package/build/stories/chat/context/chatContext.d.ts

@@ -0,0 +1,17 @@
+import { Editor } from "@tiptap/react";
+import React from "react";
+export type ChatContextType = {
+    isEditing: boolean;
+    setIsEditing: (isEditing: boolean) => void;
+    comment: string;
+    setComment: (comment: string) => void;
+    triggerSave: () => void;
+    editor?: Editor;
+    setEditor: React.Dispatch<React.SetStateAction<Editor | undefined>>;
+};
+export declare const ChatContext: React.Context<ChatContextType | null>;
+export declare const ChatContextProvider: ({ onSave, children, }: {
+    onSave?: ((editor: Editor) => void) | undefined;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useChatContext: () => ChatContextType;