@appquality/unguess-design-system 3.1.1 → 3.1.2-beta.0

package/build/index.js

@@ -28,6 +28,7 @@ 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');
@@ -64,6 +65,7 @@ var UAParser__default = /*#__PURE__*/_interopDefaultLegacy(UAParser);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
+var Link__default = /*#__PURE__*/_interopDefaultLegacy(Link);
 var StarterKit__default = /*#__PURE__*/_interopDefaultLegacy(StarterKit);
 var Placeholder__default = /*#__PURE__*/_interopDefaultLegacy(Placeholder);
 var CharacterCount__default = /*#__PURE__*/_interopDefaultLegacy(CharacterCount);
@@ -438,7 +440,7 @@ const components = Object.assign(Object.assign(Object.assign(Object.assign({}, r
             "&:hover": {
                 borderColor: getColor(colors.accentHue, 800),
                 color: getColor(colors.accentHue, 800),
-                backgroundColor: palette.blue[50],
+                backgroundColor: getColor(colors.primaryHue, 600, undefined, 0.08),
             },
             "&:active": {
                 borderColor: getColor(colors.accentHue, 800),
@@ -448,7 +450,7 @@ const components = Object.assign(Object.assign(Object.assign(Object.assign({}, r
         })), (isAccent && isBasic && {
             color: getColor(colors.accentHue, 700),
             "&:hover": {
-                backgroundColor: palette.blue[50],
+                backgroundColor: getColor(colors.primaryHue, 600, undefined, 0.08),
                 color: getColor(colors.accentHue, 800),
             },
             "&:active": {
@@ -492,7 +494,7 @@ const components = Object.assign(Object.assign(Object.assign(Object.assign({}, r
             "&:hover": {
                 borderColor: getColor(colors.accentHue, 800),
                 color: getColor(colors.accentHue, 800),
-                backgroundColor: palette.blue[50],
+                backgroundColor: getColor(colors.primaryHue, 600, undefined, 0.08),
             },
             "&:active": {
                 borderColor: getColor(colors.accentHue, 800),
@@ -510,7 +512,7 @@ const components = Object.assign(Object.assign(Object.assign(Object.assign({}, r
         })), (isAccent && isBasic && {
             color: getColor(colors.accentHue, 700),
             "&:hover": {
-                backgroundColor: palette.blue[50],
+                backgroundColor: getColor(colors.primaryHue, 600, undefined, 0.08),
                 color: getColor(colors.accentHue, 800),
             },
             "&:active": {
@@ -2663,6 +2665,7 @@ const Editor = (_a) => {
     };
     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") {
@@ -3348,29 +3351,62 @@ const UgProjectSubtitle = styled__default["default"](NavItemText) `
   font-size: ${(props) => props.theme.fontSizes.sm};
 `;
 const UgNavItem = styled__default["default"](NavItem) `
+  display: flex;
   flex-flow: column;
-  align-items: flex-start;
-  padding: 12px 8px;
-  opacity: 1;
-  padding-left: ${({ theme }) => theme.space.xxl}; //Accordion Alingment
+  width: 100%;
+  overflow: hidden;
+  padding: ${({ theme }) => theme.space.sm} ${({ theme }) => theme.space.xs};
+  padding-left: ${({ theme }) => theme.space.xxl};
 `;
 const NavItemComponent = React.forwardRef((props, ref) => jsxRuntime.jsx(UgNavItem, Object.assign({ ref: ref }, props)));
 const NavItemProject = NavItemComponent;
 NavItemProject.Title = NavItemText;
 NavItemProject.SubTitle = UgProjectSubtitle;
 
+const NavAccordionItem = styled__default["default"](Accordion) `
+  ${sidebarNavItemExpanded}
+  ${props => !props.isExpanded && sidebarNavItemHidden}
+  order: 1;
+  margin: ${({ theme }) => theme.space.xs} 0;
+  padding-left: 8.5px;
+`;
+const AccordionItemHeader = styled__default["default"](Accordion.Header) `
+  > svg {
+    flex-shrink: 0;
+    
+    &:first-of-type {
+      margin: 0 8.5px;
+    }
+  }
+`;
+const AccordionItemPanel = styled__default["default"](Accordion.Panel) `
+  max-height: 180px;
+  overflow-y: auto;
+`;
+const AccordionItemLabel = styled__default["default"](Accordion.Label) `
+  ${props => reactTheming.retrieveComponentStyles("text.primary", props)}
+  font-weight: ${({ theme }) => theme.fontWeights.regular};
+  padding: 0;
+  margin: 0 8.5px;
+`;
+NavAccordionItem.Panel = AccordionItemPanel;
+NavAccordionItem.Header = AccordionItemHeader;
+NavAccordionItem.Label = AccordionItemLabel;
+
 var _path$j;
 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 SvgHomeFill = function SvgHomeFill(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
-    xmlns: "http://www.w3.org/2000/svg",
     width: 26,
     height: 26,
-    focusable: "false",
-    viewBox: "0 0 26 26"
+    viewBox: "0 0 26 26",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
   }, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
-    fill: "currentColor",
-    d: "M23.885 13.2l-1.328 1.639a.522.522 0 01-.737.084l-1.444-1.155v7.182c0 .577-.474 1.05-1.054 1.05H16.51c-.58 0-1.054-.473-1.054-1.05v-3.182a2.43 2.43 0 00-.716-1.732 2.448 2.448 0 00-1.74-.714 2.45 2.45 0 00-1.739.714 2.43 2.43 0 00-.716 1.732v3.182c0 .577-.474 1.05-1.054 1.05H6.678c-.582 0-1.054-.47-1.054-1.05v-7.182L4.18 14.923a.522.522 0 01-.737-.084L2.115 13.2a.52.52 0 01.084-.735l10.474-8.348a.51.51 0 01.654 0L23.8 12.466a.52.52 0 01.084.735"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11.027 21H5.973C5.436 21 5 20.523 5 19.935V17.065C5 16.475 5.436 16 5.973 16H11.027C11.564 16 12 16.476 12 17.065V19.935C12 20.523 11.564 21 11.027 21ZM11.024 14H5.977C5.437 14 5 13.577 5 13.055V5.945C5 5.425 5.438 5 5.977 5H11.024C11.564 5 12 5.424 12 5.946V13.056C12 13.577 11.563 14 11.024 14ZM14.979 5H20.021C20.561 5 21 5.478 21 6.069V8.932C21 9.522 20.561 10 20.021 10H14.979C14.439 10 14 9.522 14 8.932V6.07C14 5.48 14.439 5.001 14.979 5.001M14.972 12H20.028C20.565 12 21 12.42 21 12.94V20.06C21 20.579 20.565 21 20.028 21H14.972C14.435 21 14 20.579 14 20.06V12.94C14 12.42 14.435 12 14.972 12Z",
+    fill: "#336179"
   })));
 };
 
@@ -3378,11 +3414,11 @@ var _linearGradient, _path$i;
 function _extends$l() { _extends$l = 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$l.apply(this, arguments); }
 var SvgHomeFillStyled = function SvgHomeFillStyled(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
-    xmlns: "http://www.w3.org/2000/svg",
     width: 26,
     height: 26,
-    focusable: "false",
-    viewBox: "0 0 26 26"
+    viewBox: "0 0 26 26",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
   }, props), _linearGradient || (_linearGradient = /*#__PURE__*/React__namespace.createElement("linearGradient", {
     id: "unguessIconGradient"
   }, /*#__PURE__*/React__namespace.createElement("stop", {
@@ -3395,7 +3431,9 @@ var SvgHomeFillStyled = function SvgHomeFillStyled(props) {
     stopColor: "#001825"
   }))), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "url(#unguessIconGradient)",
-    d: "M23.885 13.2l-1.328 1.639a.522.522 0 01-.737.084l-1.444-1.155v7.182c0 .577-.474 1.05-1.054 1.05H16.51c-.58 0-1.054-.473-1.054-1.05v-3.182a2.43 2.43 0 00-.716-1.732 2.448 2.448 0 00-1.74-.714 2.45 2.45 0 00-1.739.714 2.43 2.43 0 00-.716 1.732v3.182c0 .577-.474 1.05-1.054 1.05H6.678c-.582 0-1.054-.47-1.054-1.05v-7.182L4.18 14.923a.522.522 0 01-.737-.084L2.115 13.2a.52.52 0 01.084-.735l10.474-8.348a.51.51 0 01.654 0L23.8 12.466a.52.52 0 01.084.735"
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11.027 21H5.973C5.436 21 5 20.523 5 19.935V17.065C5 16.475 5.436 16 5.973 16H11.027C11.564 16 12 16.476 12 17.065V19.935C12 20.523 11.564 21 11.027 21ZM11.024 14H5.977C5.437 14 5 13.577 5 13.055V5.945C5 5.425 5.438 5 5.977 5H11.024C11.564 5 12 5.424 12 5.946V13.056C12 13.577 11.563 14 11.024 14ZM14.979 5H20.021C20.561 5 21 5.478 21 6.069V8.932C21 9.522 20.561 10 20.021 10H14.979C14.439 10 14 9.522 14 8.932V6.07C14 5.48 14.439 5.001 14.979 5.001M14.972 12H20.028C20.565 12 21 12.42 21 12.94V20.06C21 20.579 20.565 21 20.028 21H14.972C14.435 21 14 20.579 14 20.06V12.94C14 12.42 14.435 12 14.972 12Z"
   })));
 };
 
@@ -3440,17 +3478,19 @@ var SvgToken = function SvgToken(props) {
 
 var _path$h;
 function _extends$j() { _extends$j = 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$j.apply(this, arguments); }
-var SvgFolderIcon = function SvgFolderIcon(props) {
+var SvgProjectsIcon = function SvgProjectsIcon(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
-    width: 12,
-    height: 12,
-    viewBox: "0 0 12 12",
+    width: 26,
+    height: 26,
+    viewBox: "0 0 26 26",
+    fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M9.99976 4H6.99976V3.5C6.99976 2.62386 6.3759 2 5.49976 2H2.49976C1.62362 2 0.999758 2.62386 0.999758 3.5V6H0.499758C0.174472 6 -0.0642066 6.30569 0.0146868 6.62127L1.01469 10.6213C1.07033 10.8439 1.27032 11 1.49976 11H10.4998C10.7292 11 10.9292 10.8439 10.9848 10.6213L11.9848 6.62127C12.0637 6.30569 11.825 6 11.4998 6H10.9998V5C10.9998 4.42386 10.5759 4 9.99976 4ZM10.8594 7H1.14015L1.89015 10H10.1094L10.8594 7ZM1.99976 6H9.99976V5H5.99976V3.5C5.99976 3.17614 5.82362 3 5.49976 3H2.49976C2.1759 3 1.99976 3.17614 1.99976 3.5V6Z",
-    fill: "currentColor"
+    d: "M20.5 8H14.25V7.375C14.25 6.34232 13.4077 5.5 12.375 5.5H6.125C5.09232 5.5 4.25 6.34232 4.25 7.375V13.005C3.53426 13.0685 3.01354 13.7329 3.1335 14.4527L4.171 20.7027C4.27098 21.3026 4.79293 21.75 5.4 21.75H20.6C21.2071 21.75 21.729 21.3026 21.829 20.7027L22.8666 14.4523C22.9865 13.7329 22.4657 13.0685 21.75 13.005V9.25C21.75 8.55482 21.1952 8 20.5 8ZM21.633 14.25H4.36695L5.404 20.4973C5.40404 20.4974 20.6 20.5 20.6 20.5C20.5929 20.5 21.633 14.25 21.633 14.25ZM5.5 13H20.5V9.25H13V7.375C13 7.03268 12.7173 6.75 12.375 6.75H6.125C5.78268 6.75 5.5 7.03268 5.5 7.375V13Z",
+    fill: "#336179",
+    stroke: "#336179"
   })));
 };
 
@@ -3521,48 +3561,6 @@ const LoadingSidebar = (props) => {
     return (jsxRuntime.jsxs(StyledNav, Object.assign({}, props, { isExpanded: isExpanded }, { children: [jsxRuntime.jsx(NavToggle, { isExpanded: isExpanded }), jsxRuntime.jsxs(NavItem, Object.assign({ isExpanded: isExpanded, isCurrent: true }, { children: [jsxRuntime.jsx(NavItemIcon, Object.assign({ isStyled: true }, { children: jsxRuntime.jsx(Skeleton, { width: "32px", height: "32px", style: { borderRadius: "100%" } }) })), jsxRuntime.jsx(Skeleton, { height: "12px", width: "60%" }), jsxRuntime.jsx(NavItemText, {})] })), jsxRuntime.jsx(NavDivider, { isExpanded: isExpanded }), jsxRuntime.jsxs(NavItemProject, Object.assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 1), jsxRuntime.jsxs(NavItemProject, Object.assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 2), jsxRuntime.jsxs(NavItemProject, Object.assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 3), jsxRuntime.jsxs(NavItemProject, Object.assign({ isExpanded: isExpanded, isCurrent: false }, { children: [jsxRuntime.jsx(Skeleton, { width: "60%", style: { marginBottom: "6px" } }), jsxRuntime.jsx(Skeleton, { height: "12px", width: "80%" })] }), 4), jsxRuntime.jsxs(NavItem, Object.assign({ isExpanded: isExpanded, hasBrandmark: true, title: "Be smart from the start", style: { pointerEvents: "none" } }, { children: [jsxRuntime.jsx(NavItemIcon, { children: jsxRuntime.jsx(Skeleton, { width: "32px", height: "32px", style: { borderRadius: "100%" } }) }), jsxRuntime.jsx(NavItemText, { children: "UNGUESS" })] }))] })));
 };
 
-const AccordionItem = styled__default["default"](Accordion) `
-  opacity: 1;
-  ${sidebarNavItemExpanded}
-  ${(props) => !props.isExpanded && sidebarNavItemHidden}
-  order: 1;
-  margin-top: ${({ theme }) => theme.space.xs}px;
-`;
-const AccordionItemHeader = styled__default["default"](Accordion.Header) `
-  flex-direction: row-reverse;
-  border-top-left-radius: ${({ theme }) => theme.space.base * 6}px;
-  border-bottom-left-radius: ${({ theme }) => theme.space.base * 6}px;
-
-  > button {
-    padding-left: 2px;
-  }
-
-  svg {
-    width: 26px;
-  }
-`;
-const AccordionItemPanel = styled__default["default"](Accordion.Panel) `
-  max-height: 180px;
-  padding: 0;
-  padding-left: 5px;
-  overflow-y: hidden;
-  opacity: 1;
-  &:hover {
-    overflow-y: auto;
-  }
-`;
-const AccordionItemLabel = styled__default["default"](Accordion.Label) `
-  padding: 12px 9px;
-  ${({ theme }) => `
-    fill: ${getColor(theme.colors.primaryHue, 600)};
-    font-weight: ${theme.fontWeights.medium};
-  `}
-  ${props => reactTheming.retrieveComponentStyles("text.primary", props)}
-`;
-AccordionItem.Panel = AccordionItemPanel;
-AccordionItem.Header = AccordionItemHeader;
-AccordionItem.Label = AccordionItemLabel;
-
 const TokenContainer = styled__default["default"].div `
   display: flex;
   align-items: center;
@@ -3631,7 +3629,7 @@ const Sidebar = (_a) => {
     }, [props.isExpanded]);
     return props.isLoading ? (jsxRuntime.jsx(LoadingSidebar, Object.assign({}, props))) : (jsxRuntime.jsxs(Nav, Object.assign({}, props, { children: [jsxRuntime.jsxs(ScrollingContainer, { children: [jsxRuntime.jsx(NavToggle, { onClick: toggleNav, isExpanded: props.isExpanded }), showWorkspacesDropdown &&
                         props.workspaces &&
-                        props.workspaces.length > 1 && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(StyledNavItem, Object.assign({ title: "Workspaces", hasLogo: true, isExpanded: props.isExpanded, style: padding }, { children: jsxRuntime.jsx(WorkspacesDropdown, { workspaces: props.workspaces, workspacesLabel: props.workspacesLabel, activeWorkspace: props.activeWorkspace, onWorkspaceChange: props.onWorkspaceChange, isCompact: true }) })) })), props.tokens && (jsxRuntime.jsx(SidebarLabel, Object.assign({ isExpanded: props.isExpanded }, { children: props.activityLabel || "My activity" }))), jsxRuntime.jsxs(NavItem, Object.assign({ className: "sidebar-first-level-item", title: "Home", isExpanded: props.isExpanded, isCurrent: nav === "home", onClick: () => navigate("home") }, { children: [jsxRuntime.jsx(NavItemIcon, Object.assign({ isStyled: true }, { children: nav === "home" ? jsxRuntime.jsx(SvgHomeFillStyled, {}) : jsxRuntime.jsx(SvgHomeFill, {}) })), jsxRuntime.jsx(NavItemText, { children: props.homeItemLabel || "My Campaigns" })] })), projects && projects.length ? (jsxRuntime.jsx(AccordionItem, Object.assign({ className: "sidebar-project-accordion-first-item", level: 4, defaultExpandedSections: defaultAccordionPanels, isExpanded: props.isExpanded, isAnimated: false }, { children: jsxRuntime.jsxs(AccordionItem.Section, { children: [jsxRuntime.jsx(AccordionItem.Header, { children: jsxRuntime.jsxs(AccordionItem.Label, { children: [props.dividerLabel || "", " ", jsxRuntime.jsx(SvgFolderIcon, { style: { marginLeft: theme.space.xs } })] }) }), jsxRuntime.jsx(AccordionItem.Panel, { children: projects.map((project) => (jsxRuntime.jsxs(NavItemProject, Object.assign({ className: "sidebar-project-item", isExpanded: props.isExpanded, isCurrent: nav === `projects/${project.id}` }, (nav === `projects/${project.id}` && { ref: prjRef }), { onClick: () => navigate("projects", project.id) }, { children: [jsxRuntime.jsx(NavItemProject.Title, { title: project.title, children: project.title }), jsxRuntime.jsx(NavItemProject.SubTitle, { children: project.campaigns })] }), project.id))) })] }) }))) : null, jsxRuntime.jsx(NavDivider, { isExpanded: props.isExpanded }), jsxRuntime.jsxs(NavItem, Object.assign({ className: "sidebar-first-level-item", title: "Services", isExpanded: props.isExpanded, isCurrent: nav === "services", onClick: () => navigate("services"), style: { marginBottom: "16px" } }, { children: [jsxRuntime.jsx(NavItemIcon, Object.assign({ isStyled: true }, { children: nav === "services" ? jsxRuntime.jsx(SvgTemplatesActive, {}) : jsxRuntime.jsx(SvgTemplates, {}) })), jsxRuntime.jsx(NavItemText, { children: props.servicesItemLabel || "Services" })] })), props.tokens && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SidebarLabel, Object.assign({ isExpanded: props.isExpanded }, { children: props.walletLabel || "Wallet" })), jsxRuntime.jsx(StyledNavItem, Object.assign({ title: "Tokens", isExpanded: props.isExpanded, style: { pointerEvents: "none", paddingTop: 0 } }, { children: jsxRuntime.jsx(Card, Object.assign({ style: { padding: theme.space.sm } }, { children: jsxRuntime.jsxs(TokenContainer, { children: [jsxRuntime.jsx(SvgToken, { width: 32 }), jsxRuntime.jsx(Span, Object.assign({ isBold: true, style: {
+                        props.workspaces.length > 1 && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(StyledNavItem, Object.assign({ title: "Workspaces", hasLogo: true, isExpanded: props.isExpanded, style: padding }, { children: jsxRuntime.jsx(WorkspacesDropdown, { workspaces: props.workspaces, workspacesLabel: props.workspacesLabel, activeWorkspace: props.activeWorkspace, onWorkspaceChange: props.onWorkspaceChange, isCompact: true }) })) })), props.tokens && (jsxRuntime.jsx(SidebarLabel, Object.assign({ isExpanded: props.isExpanded }, { children: props.activityLabel || "My activity" }))), jsxRuntime.jsxs(NavItem, Object.assign({ className: "sidebar-first-level-item", title: "Home", isExpanded: props.isExpanded, isCurrent: nav === "home", onClick: () => navigate("home") }, { children: [jsxRuntime.jsx(NavItemIcon, Object.assign({ isStyled: true }, { children: nav === "home" ? jsxRuntime.jsx(SvgHomeFillStyled, {}) : jsxRuntime.jsx(SvgHomeFill, {}) })), jsxRuntime.jsx(NavItemText, { children: props.homeItemLabel || "My Campaigns" })] })), projects && projects.length ? (jsxRuntime.jsx(NavAccordionItem, Object.assign({ className: "sidebar-project-accordion-first-item", level: 4, defaultExpandedSections: defaultAccordionPanels, isExpanded: props.isExpanded, isAnimated: false }, { children: jsxRuntime.jsxs(NavAccordionItem.Section, { children: [jsxRuntime.jsxs(NavAccordionItem.Header, { children: [jsxRuntime.jsx(SvgProjectsIcon, {}), jsxRuntime.jsxs(NavAccordionItem.Label, { children: [props.dividerLabel || "", " "] })] }), jsxRuntime.jsx(NavAccordionItem.Panel, Object.assign({ style: { padding: 0 } }, { children: projects.map((project) => (jsxRuntime.jsxs(NavItemProject, Object.assign({ className: "sidebar-project-item", isExpanded: props.isExpanded, isCurrent: nav === `projects/${project.id}` }, (nav === `projects/${project.id}` && { ref: prjRef }), { onClick: () => navigate("projects", project.id) }, { children: [jsxRuntime.jsx(NavItemProject.Title, { title: project.title, children: project.title }), jsxRuntime.jsx(NavItemProject.SubTitle, { children: project.campaigns })] }), project.id))) }))] }) }))) : null, jsxRuntime.jsx(NavDivider, { isExpanded: props.isExpanded }), jsxRuntime.jsxs(NavItem, Object.assign({ className: "sidebar-first-level-item", title: "Services", isExpanded: props.isExpanded, isCurrent: nav === "services", onClick: () => navigate("services"), style: { marginBottom: "16px" } }, { children: [jsxRuntime.jsx(NavItemIcon, Object.assign({ isStyled: true }, { children: nav === "services" ? jsxRuntime.jsx(SvgTemplatesActive, {}) : jsxRuntime.jsx(SvgTemplates, {}) })), jsxRuntime.jsx(NavItemText, { children: props.servicesItemLabel || "Services" })] })), props.tokens && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(SidebarLabel, Object.assign({ isExpanded: props.isExpanded }, { children: props.walletLabel || "Wallet" })), jsxRuntime.jsx(StyledNavItem, Object.assign({ title: "Tokens", isExpanded: props.isExpanded, style: { pointerEvents: "none", paddingTop: 0 } }, { children: jsxRuntime.jsx(Card, Object.assign({ style: { padding: theme.space.sm } }, { children: jsxRuntime.jsxs(TokenContainer, { children: [jsxRuntime.jsx(SvgToken, { width: 32 }), jsxRuntime.jsx(Span, Object.assign({ isBold: true, style: {
                                                     marginLeft: theme.space.xs,
                                                     color: theme.palette.grey[800],
                                                 } }, { children: props.tokens + " " + (props.tokensLabel || "tokens") }))] }) })) }))] }))] }), jsxRuntime.jsxs(NavItem, Object.assign({ isExpanded: props.isExpanded, hasBrandmark: true, title: "Be smart from the start", style: { pointerEvents: "none", paddingBottom: theme.space.md } }, { children: [jsxRuntime.jsx(NavItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }), jsxRuntime.jsx(NavItemText, { children: "UNGUESS" })] }))] })));
@@ -5661,6 +5659,7 @@ exports.Modal = Modal;
 exports.ModalFullScreen = ModalFullScreen;
 exports.MultiSelect = MultiSelect;
 exports.Nav = Nav;
+exports.NavAccordionItem = NavAccordionItem;
 exports.NavDivider = NavDivider;
 exports.NavItem = NavItem;
 exports.NavItemIcon = NavItemIcon;

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

@@ -1,3 +1,4 @@
+/// <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/dropdowns/select/index.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DropdownArgs, SelectArgs } from "./_types";
 import { MenuArgs } from "../menu/_types";
 interface IItem {

package/build/stories/editor/index.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { EditorArgs } from "./_types";
 interface EditorStoryArgs extends EditorArgs {
     children?: any;

package/build/stories/navigation/nav/nav-item/accordionItem.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
 import { AccordionArgs } from "../../../accordions/_types";
 import { NavItemArgs } from "./_types";
-declare const AccordionItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<AccordionArgs & import("react").RefAttributes<HTMLDivElement>> & {
+declare const NavAccordionItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<AccordionArgs & import("react").RefAttributes<HTMLDivElement>> & {
     Section: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
     Header: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
     Label: import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
     Panel: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
 }, import("styled-components").DefaultTheme, AccordionArgs & NavItemArgs, never>;
-export { AccordionItem };
+export { NavAccordionItem };

package/build/stories/navigation/nav/nav-item/index.d.ts

@@ -4,4 +4,5 @@ import { NavItemText } from "./navItemText";
 import { NavToggle } from "./navToggle";
 import { NavDivider } from "./navDivider";
 import { NavItemProject } from "./navItemProject";
-export { NavItem, NavItemIcon, NavItemText, NavToggle, NavDivider, NavItemProject };
+import { NavAccordionItem } from "./accordionItem";
+export { NavItem, NavItemIcon, NavItemText, NavToggle, NavDivider, NavItemProject, NavAccordionItem, };

package/build/stories/navigation/sidebar/index.stories.d.ts

@@ -2,9 +2,5 @@ import { SidebarArgs } from "./_types";
 interface SidebarStoryArgs extends SidebarArgs {
 }
 export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, SidebarStoryArgs>;
-export declare const SingleProject: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, SidebarStoryArgs>;
-export declare const MultipleWorkspaces: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, SidebarStoryArgs>;
-export declare const WithTokens: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, SidebarStoryArgs>;
-export declare const WithAll: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, SidebarStoryArgs>;
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, SidebarArgs>;
 export default _default;

package/build/stories/theme/components.d.ts

@@ -96,16 +96,11 @@ export declare const components: {
         "&:hover"?: {
             borderColor: string | undefined;
             color: string | undefined;
-            backgroundColor: string;
-            "& svg"?: undefined;
-        } | {
-            backgroundColor: string;
-            color: string | undefined;
-            borderColor?: undefined;
+            backgroundColor: string | undefined;
             "& svg"?: undefined;
         } | {
             backgroundColor: string | undefined;
-            color: string;
+            color: string | undefined;
             borderColor?: undefined;
             "& svg"?: undefined;
         } | {
@@ -148,13 +143,13 @@ export declare const components: {
         "&:hover"?: {
             borderColor: string | undefined;
             color: string | undefined;
-            backgroundColor: string;
+            backgroundColor: string | undefined;
         } | {
             backgroundColor: string | undefined;
             borderColor?: undefined;
             color?: undefined;
         } | {
-            backgroundColor: string;
+            backgroundColor: string | undefined;
             color: string | undefined;
             borderColor?: undefined;
         } | {

package/build/stories/theme/index.d.ts

@@ -204,18 +204,6 @@ declare const theme: {
         xxxl: string;
     };
     components: {
-        "text.primary": () => {
-            color: string | undefined;
-        };
-        "text.success": () => {
-            color: string | undefined;
-        };
-        "text.warning": () => {
-            color: string | undefined;
-        };
-        "text.danger": () => {
-            color: string | undefined;
-        };
         "navigation.hoverableItem": ({ isCurrent }: {
             isCurrent: boolean;
         }) => {
@@ -301,47 +289,35 @@ declare const theme: {
                 borderColor: string | undefined;
                 color: string | undefined;
                 backgroundColor: string;
-                "& svg"?: undefined;
             } | {
                 backgroundColor: string;
                 color: string | undefined;
                 borderColor?: undefined;
-                "& svg"?: undefined;
             } | {
                 backgroundColor: string | undefined;
                 color: string;
                 borderColor?: undefined;
-                "& svg"?: undefined;
             } | {
                 backgroundColor: string;
-                color: string;
-                "& svg": {
-                    color: string;
-                };
                 borderColor?: undefined;
+                color?: undefined;
             } | undefined;
             "&:active"?: {
                 borderColor: string | undefined;
                 color: string | undefined;
                 backgroundColor: string;
-                "& svg"?: undefined;
             } | {
                 backgroundColor: string;
                 color: string | undefined;
                 borderColor?: undefined;
-                "& svg"?: undefined;
             } | {
                 backgroundColor: string | undefined;
                 color: string;
                 borderColor?: undefined;
-                "& svg"?: undefined;
             } | {
                 backgroundColor: string;
-                color: string;
-                "& svg": {
-                    color: string;
-                };
                 borderColor?: undefined;
+                color?: undefined;
             } | undefined;
             borderColor?: string | undefined;
         };
@@ -389,6 +365,9 @@ declare const theme: {
             border: string;
         };
         chrome: any;
+        colors: {
+            primaryText: string;
+        };
         notification: any;
     };
     shadows: {

package/build/stories/tooltip/index.stories.d.ts

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

package/build/stories/typography/typescale/anchortag/index.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const AnchorTag: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, {
     [x: string]: any;

package/build/stories/typography/typescale/index.stories.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, {
     [x: string]: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "3.1.1",
+  "version": "3.1.2-beta.0",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -36,6 +36,7 @@
     "@nivo/waffle": "^0.80.0",
     "@tiptap/extension-bubble-menu": "^2.0.0-beta.61",
     "@tiptap/extension-character-count": "^2.0.0-beta.31",
+    "@tiptap/extension-link": "^2.0.4",
     "@tiptap/extension-placeholder": "^2.0.0-beta.53",
     "@tiptap/extension-typography": "^2.0.0-beta.22",
     "@tiptap/pm": "^2.0.3",
@@ -90,8 +91,8 @@
     "formik": "^2.2.9",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
-    "react-scripts": "^5.0.1",
     "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1",
     "rimraf": "3.0.2",
     "rollup": "~2.66",
     "rollup-plugin-typescript2": "^0.34.1",