@appquality/unguess-design-system 3.1.1 → 3.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
1
+ # v3.1.2 (Fri Jun 16 2023)
2
+
3
+ #### 🐛 Bug Fix
4
+
5
+ - Update sidebar items [#255](https://github.com/AppQuality/unguess-design-system/pull/255) ([@cannarocks](https://github.com/cannarocks) [@marcbon](https://github.com/marcbon))
6
+ - Reverse project accordion item [#254](https://github.com/AppQuality/unguess-design-system/pull/254) ([@cannarocks](https://github.com/cannarocks) [@marcbon](https://github.com/marcbon))
7
+
8
+ #### Authors: 2
9
+
10
+ - Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
11
+ - Marco Bonomo ([@marcbon](https://github.com/marcbon))
12
+
13
+ ---
14
+
1
15
  # v3.0.5 (Wed May 31 2023)
2
16
 
3
17
  #### 🐛 Bug Fix
package/build/index.js CHANGED
@@ -3348,29 +3348,62 @@ const UgProjectSubtitle = styled__default["default"](NavItemText) `
3348
3348
  font-size: ${(props) => props.theme.fontSizes.sm};
3349
3349
  `;
3350
3350
  const UgNavItem = styled__default["default"](NavItem) `
3351
+ display: flex;
3351
3352
  flex-flow: column;
3352
- align-items: flex-start;
3353
- padding: 12px 8px;
3354
- opacity: 1;
3355
- padding-left: ${({ theme }) => theme.space.xxl}; //Accordion Alingment
3353
+ width: 100%;
3354
+ overflow: hidden;
3355
+ padding: ${({ theme }) => theme.space.sm} ${({ theme }) => theme.space.xs};
3356
+ padding-left: ${({ theme }) => theme.space.xxl};
3356
3357
  `;
3357
3358
  const NavItemComponent = React.forwardRef((props, ref) => jsxRuntime.jsx(UgNavItem, Object.assign({ ref: ref }, props)));
3358
3359
  const NavItemProject = NavItemComponent;
3359
3360
  NavItemProject.Title = NavItemText;
3360
3361
  NavItemProject.SubTitle = UgProjectSubtitle;
3361
3362
 
3363
+ const NavAccordionItem = styled__default["default"](Accordion) `
3364
+ ${sidebarNavItemExpanded}
3365
+ ${props => !props.isExpanded && sidebarNavItemHidden}
3366
+ order: 1;
3367
+ margin: ${({ theme }) => theme.space.xs} 0;
3368
+ padding-left: 8.5px;
3369
+ `;
3370
+ const AccordionItemHeader = styled__default["default"](Accordion.Header) `
3371
+ > svg {
3372
+ flex-shrink: 0;
3373
+
3374
+ &:first-of-type {
3375
+ margin: 0 8.5px;
3376
+ }
3377
+ }
3378
+ `;
3379
+ const AccordionItemPanel = styled__default["default"](Accordion.Panel) `
3380
+ max-height: 180px;
3381
+ overflow-y: auto;
3382
+ `;
3383
+ const AccordionItemLabel = styled__default["default"](Accordion.Label) `
3384
+ ${props => reactTheming.retrieveComponentStyles("text.primary", props)}
3385
+ font-weight: ${({ theme }) => theme.fontWeights.regular};
3386
+ padding: 0;
3387
+ margin: 0 8.5px;
3388
+ `;
3389
+ NavAccordionItem.Panel = AccordionItemPanel;
3390
+ NavAccordionItem.Header = AccordionItemHeader;
3391
+ NavAccordionItem.Label = AccordionItemLabel;
3392
+
3362
3393
  var _path$j;
3363
3394
  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); }
3364
3395
  var SvgHomeFill = function SvgHomeFill(props) {
3365
3396
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$m({
3366
- xmlns: "http://www.w3.org/2000/svg",
3367
3397
  width: 26,
3368
3398
  height: 26,
3369
- focusable: "false",
3370
- viewBox: "0 0 26 26"
3399
+ viewBox: "0 0 26 26",
3400
+ fill: "none",
3401
+ xmlns: "http://www.w3.org/2000/svg"
3371
3402
  }, props), _path$j || (_path$j = /*#__PURE__*/React__namespace.createElement("path", {
3372
- fill: "currentColor",
3373
- 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"
3403
+ fillRule: "evenodd",
3404
+ clipRule: "evenodd",
3405
+ 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",
3406
+ fill: "#336179"
3374
3407
  })));
3375
3408
  };
3376
3409
 
@@ -3378,11 +3411,11 @@ var _linearGradient, _path$i;
3378
3411
  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); }
3379
3412
  var SvgHomeFillStyled = function SvgHomeFillStyled(props) {
3380
3413
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$l({
3381
- xmlns: "http://www.w3.org/2000/svg",
3382
3414
  width: 26,
3383
3415
  height: 26,
3384
- focusable: "false",
3385
- viewBox: "0 0 26 26"
3416
+ viewBox: "0 0 26 26",
3417
+ fill: "none",
3418
+ xmlns: "http://www.w3.org/2000/svg"
3386
3419
  }, props), _linearGradient || (_linearGradient = /*#__PURE__*/React__namespace.createElement("linearGradient", {
3387
3420
  id: "unguessIconGradient"
3388
3421
  }, /*#__PURE__*/React__namespace.createElement("stop", {
@@ -3395,7 +3428,9 @@ var SvgHomeFillStyled = function SvgHomeFillStyled(props) {
3395
3428
  stopColor: "#001825"
3396
3429
  }))), _path$i || (_path$i = /*#__PURE__*/React__namespace.createElement("path", {
3397
3430
  fill: "url(#unguessIconGradient)",
3398
- 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"
3431
+ fillRule: "evenodd",
3432
+ clipRule: "evenodd",
3433
+ 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"
3399
3434
  })));
3400
3435
  };
3401
3436
 
@@ -3440,17 +3475,19 @@ var SvgToken = function SvgToken(props) {
3440
3475
 
3441
3476
  var _path$h;
3442
3477
  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); }
3443
- var SvgFolderIcon = function SvgFolderIcon(props) {
3478
+ var SvgProjectsIcon = function SvgProjectsIcon(props) {
3444
3479
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$j({
3445
- width: 12,
3446
- height: 12,
3447
- viewBox: "0 0 12 12",
3480
+ width: 26,
3481
+ height: 26,
3482
+ viewBox: "0 0 26 26",
3483
+ fill: "none",
3448
3484
  xmlns: "http://www.w3.org/2000/svg"
3449
3485
  }, props), _path$h || (_path$h = /*#__PURE__*/React__namespace.createElement("path", {
3450
3486
  fillRule: "evenodd",
3451
3487
  clipRule: "evenodd",
3452
- 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",
3453
- fill: "currentColor"
3488
+ 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",
3489
+ fill: "#336179",
3490
+ stroke: "#336179"
3454
3491
  })));
3455
3492
  };
3456
3493
 
@@ -3521,48 +3558,6 @@ const LoadingSidebar = (props) => {
3521
3558
  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" })] }))] })));
3522
3559
  };
3523
3560
 
3524
- const AccordionItem = styled__default["default"](Accordion) `
3525
- opacity: 1;
3526
- ${sidebarNavItemExpanded}
3527
- ${(props) => !props.isExpanded && sidebarNavItemHidden}
3528
- order: 1;
3529
- margin-top: ${({ theme }) => theme.space.xs}px;
3530
- `;
3531
- const AccordionItemHeader = styled__default["default"](Accordion.Header) `
3532
- flex-direction: row-reverse;
3533
- border-top-left-radius: ${({ theme }) => theme.space.base * 6}px;
3534
- border-bottom-left-radius: ${({ theme }) => theme.space.base * 6}px;
3535
-
3536
- > button {
3537
- padding-left: 2px;
3538
- }
3539
-
3540
- svg {
3541
- width: 26px;
3542
- }
3543
- `;
3544
- const AccordionItemPanel = styled__default["default"](Accordion.Panel) `
3545
- max-height: 180px;
3546
- padding: 0;
3547
- padding-left: 5px;
3548
- overflow-y: hidden;
3549
- opacity: 1;
3550
- &:hover {
3551
- overflow-y: auto;
3552
- }
3553
- `;
3554
- const AccordionItemLabel = styled__default["default"](Accordion.Label) `
3555
- padding: 12px 9px;
3556
- ${({ theme }) => `
3557
- fill: ${getColor(theme.colors.primaryHue, 600)};
3558
- font-weight: ${theme.fontWeights.medium};
3559
- `}
3560
- ${props => reactTheming.retrieveComponentStyles("text.primary", props)}
3561
- `;
3562
- AccordionItem.Panel = AccordionItemPanel;
3563
- AccordionItem.Header = AccordionItemHeader;
3564
- AccordionItem.Label = AccordionItemLabel;
3565
-
3566
3561
  const TokenContainer = styled__default["default"].div `
3567
3562
  display: flex;
3568
3563
  align-items: center;
@@ -3631,7 +3626,7 @@ const Sidebar = (_a) => {
3631
3626
  }, [props.isExpanded]);
3632
3627
  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 &&
3633
3628
  props.workspaces &&
3634
- 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: {
3629
+ 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: {
3635
3630
  marginLeft: theme.space.xs,
3636
3631
  color: theme.palette.grey[800],
3637
3632
  } }, { 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 +5656,7 @@ exports.Modal = Modal;
5661
5656
  exports.ModalFullScreen = ModalFullScreen;
5662
5657
  exports.MultiSelect = MultiSelect;
5663
5658
  exports.Nav = Nav;
5659
+ exports.NavAccordionItem = NavAccordionItem;
5664
5660
  exports.NavDivider = NavDivider;
5665
5661
  exports.NavItem = NavItem;
5666
5662
  exports.NavItemIcon = NavItemIcon;
@@ -1,10 +1,10 @@
1
1
  /// <reference types="react" />
2
2
  import { AccordionArgs } from "../../../accordions/_types";
3
3
  import { NavItemArgs } from "./_types";
4
- declare const AccordionItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<AccordionArgs & import("react").RefAttributes<HTMLDivElement>> & {
4
+ declare const NavAccordionItem: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<AccordionArgs & import("react").RefAttributes<HTMLDivElement>> & {
5
5
  Section: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
6
6
  Header: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
7
7
  Label: import("react").ForwardRefExoticComponent<import("react").ButtonHTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
8
8
  Panel: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
9
9
  }, import("styled-components").DefaultTheme, AccordionArgs & NavItemArgs, never>;
10
- export { AccordionItem };
10
+ export { NavAccordionItem };
@@ -4,4 +4,5 @@ import { NavItemText } from "./navItemText";
4
4
  import { NavToggle } from "./navToggle";
5
5
  import { NavDivider } from "./navDivider";
6
6
  import { NavItemProject } from "./navItemProject";
7
- export { NavItem, NavItemIcon, NavItemText, NavToggle, NavDivider, NavItemProject };
7
+ import { NavAccordionItem } from "./accordionItem";
8
+ export { NavItem, NavItemIcon, NavItemText, NavToggle, NavDivider, NavItemProject, NavAccordionItem, };
@@ -2,9 +2,5 @@ import { SidebarArgs } from "./_types";
2
2
  interface SidebarStoryArgs extends SidebarArgs {
3
3
  }
4
4
  export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, SidebarStoryArgs>;
5
- export declare const SingleProject: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, SidebarStoryArgs>;
6
- export declare const MultipleWorkspaces: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, SidebarStoryArgs>;
7
- export declare const WithTokens: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, SidebarStoryArgs>;
8
- export declare const WithAll: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, SidebarStoryArgs>;
9
5
  declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, SidebarArgs>;
10
6
  export default _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appquality/unguess-design-system",
3
- "version": "3.1.1",
3
+ "version": "3.1.2",
4
4
  "description": "",
5
5
  "main": "build/index.js",
6
6
  "types": "build/index.d.ts",