@mailstep/design-system 0.8.25 → 0.8.26-beta.0

package/ui/Blocks/SideMenu/stories/SideMenu.stories.js

@@ -1,23 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import SideMenu from '../';
-import { menuItems } from './menuItems';
-import { LinguiContainer } from '../../../utils/LinguiContainer';
-var meta = {
-    title: 'Blocks/SideMenu',
-    component: SideMenu,
-    tags: ['autodocs'],
-    argTypes: {}
-};
-export default meta;
-export var Dark = function () {
-    return (_jsx(LinguiContainer, { children: _jsx(SideMenu, { variant: "dark", isCompact: false, menuItems: menuItems }) }));
-};
-export var DarkCompact = function () {
-    return (_jsx(LinguiContainer, { children: _jsx(SideMenu, { variant: "dark", isCompact: true, menuItems: menuItems }) }));
-};
-export var Light = function () {
-    return (_jsx(LinguiContainer, { children: _jsx(SideMenu, { variant: "light", isCompact: false, menuItems: menuItems }) }));
-};
-export var LightCompact = function () {
-    return (_jsx(LinguiContainer, { children: _jsx(SideMenu, { variant: "light", isCompact: true, menuItems: menuItems }) }));
-};

package/ui/Blocks/SideMenu/stories/menuItems.js

@@ -1,102 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Complaint, Income, Transfer, Return, Expeditions, Inventory, Products } from '../../../Elements/Icon/icons';
-export var menuItems = [
-    {
-        title: 'Products',
-        icon: _jsx(Products, {}),
-        link: '/',
-        id: 'product'
-    },
-    {
-        title: 'Inventory',
-        icon: _jsx(Inventory, {}),
-        link: '/inventory',
-        id: 'inventory',
-        items: [
-            {
-                title: 'Stocks',
-                link: '/inventory/stock',
-                id: 'stock'
-            },
-            {
-                title: 'Reservations',
-                link: '/inventory/reservations',
-                id: 'reservations'
-            },
-            {
-                title: 'Movements',
-                link: '/inventory/movements',
-                id: 'movements'
-            },
-            {
-                title: 'Inventory movements',
-                link: '/inventory/inventory-movements',
-                id: 'inventoryMovements'
-            },
-            {
-                title: 'Internal inv. movements',
-                link: '/inventory/internal-inv-movements',
-                id: 'internalInvMovements'
-            }
-        ]
-    },
-    {
-        title: 'Expeditions',
-        icon: _jsx(Expeditions, {}),
-        link: '/expeditions',
-        id: 'expeditions',
-        items: [
-            {
-                title: 'Expeditions',
-                link: '/expeditions',
-                id: 'expeditionsChild'
-            },
-            {
-                title: 'Outbound receipts',
-                link: '/expeditions/outbound-receipts',
-                id: 'outboundReceipts'
-            },
-            {
-                title: 'Missing goods',
-                link: '/expeditions/missing-goods',
-                id: 'missingGoods'
-            }
-        ]
-    },
-    {
-        title: 'Inbound',
-        icon: _jsx(Income, {}),
-        link: '/inbound',
-        id: 'inbound',
-        items: [
-            {
-                title: 'Stock advices',
-                link: '/inbound/stock-advices',
-                id: 'stockAdvices'
-            },
-            {
-                title: 'Inbound receipt',
-                link: '/inbound/inbound-receipt',
-                id: 'inboundReceipts'
-            }
-        ]
-    },
-    {
-        title: 'Returns',
-        icon: _jsx(Return, {}),
-        link: '/returns',
-        id: 'returns'
-    },
-    {
-        title: 'Transfers',
-        icon: _jsx(Transfer, {}),
-        link: '/transfers',
-        id: 'transfers'
-    },
-    {
-        title: 'Claims',
-        icon: _jsx(Complaint, {}),
-        link: '/claims',
-        id: 'claims'
-    }
-];

package/ui/Blocks/SideMenu/styles.js

@@ -1,162 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { NavLink } from 'react-router-dom';
-import Icon from '../../Elements/Icon/Icon';
-import createRgba from '../../utils/CreateRgba/createRgba';
-import { compactMenuWidth, expandedMenuWidth } from './utils/constants';
-import styled, { css } from '@xstyled/styled-components';
-import { th } from '@xstyled/system';
-var leftMenuAfter = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ::after {\n    content: '';\n    position: absolute;\n    width: 60px;\n    height: 40px;\n    z-index: -1;\n    border-radius: 9px 0 0 9px;\n    left: 8px;\n    top: -1px;\n  }\n"], ["\n  ::after {\n    content: '';\n    position: absolute;\n    width: 60px;\n    height: 40px;\n    z-index: -1;\n    border-radius: 9px 0 0 9px;\n    left: 8px;\n    top: -1px;\n  }\n"])));
-var compactMenuItem = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 40px;\n  width: 40px;\n  padding: 9px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 9px;\n"], ["\n  height: 40px;\n  width: 40px;\n  padding: 9px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 9px;\n"])));
-export var Container = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: ", ";\n\n  @media (min-width: 1024px) {\n    display: block;\n    align-self: stretch;\n    height: fit-content;\n\n    @media print {\n      display: none;\n    }\n  }\n"], ["\n  display: ", ";\n\n  @media (min-width: 1024px) {\n    display: block;\n    align-self: stretch;\n    height: fit-content;\n\n    @media print {\n      display: none;\n    }\n  }\n"])), function (_a) {
-    var isLeftMenuOpen = _a.isLeftMenuOpen;
-    return (isLeftMenuOpen ? 'block' : 'none');
-});
-export var SubItemsWrap = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-left: 23px;\n  border-left: 1.5px solid;\n  border-color: ", ";\n"], ["\n  margin-left: 23px;\n  border-left: 1.5px solid;\n  border-color: ", ";\n"])), th('colors.red1'));
-export var ItemsSeparator = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 1px;\n  width: 100%;\n  margin: 12px 0;\n  background-color: ", ";\n"], ["\n  height: 1px;\n  width: 100%;\n  margin: 12px 0;\n  background-color: ", ";\n"])), th('colors.lightGray6'));
-export var ItemLabel = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-direction: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"])), function (_a) {
-    var $isCompact = _a.$isCompact;
-    return ($isCompact ? 'column' : 'row');
-}, function (_a) {
-    var $isCompact = _a.$isCompact;
-    return ($isCompact ? '10px' : '0');
-}, function (_a) {
-    var isSubitem = _a.isSubitem;
-    return (isSubitem ? '15px' : '0');
-});
-export var ItemDropdownArrow = styled(Icon)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  color: ", ";\n  svg {\n    max-width: 11px;\n  }\n"], ["\n  color: ", ";\n  svg {\n    max-width: 11px;\n  }\n"])), function (_a) {
-    var $lightMode = _a.$lightMode;
-    return ($lightMode ? th.color('typoPrimary') : 'white');
-});
-export var TooltipItemLabel = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  line-height: 1.5;\n  letter-spacing: 0.4px;\n"], ["\n  line-height: 1.5;\n  letter-spacing: 0.4px;\n"])));
-export var ItemLinkWrap = styled(NavLink)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  align-items: center;\n  cursor: pointer;\n  height: ", ";\n  border-radius: ", ";\n  font-weight: 600;\n  letter-spacing: 0.4px;\n  position: relative;\n  color: ", ";\n  transition: moving 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);\n  transition-property: transform;\n\n  &.toplevel {\n    margin: ", ";\n    padding: ", ";\n    gap: ", ";\n    justify-content: ", ";\n    &.active {\n      color: ", ";\n    }\n  }\n\n  &.nestedlevel {\n    padding: 0;\n    :hover {\n      color: ", ";\n    }\n  }\n\n  &.active > ", " {\n    background-color: ", ";\n    color: ", ";\n    width: 100%;\n    border-left: 4px solid ", ";\n    :last-child {\n      border-bottom-right-radius: 10px;\n    }\n    :first-child {\n      border-top-right-radius: 10px;\n    }\n  }\n\n  ", " {\n    color: ", ";\n    padding-left: 10px;\n    width: -webkit-fill-available;\n    height: -webkit-fill-available;\n  }\n\n  &.active,\n  &.selected {\n    ", " {\n      color: ", ";\n    }\n  }\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  align-items: center;\n  cursor: pointer;\n  height: ", ";\n  border-radius: ", ";\n  font-weight: 600;\n  letter-spacing: 0.4px;\n  position: relative;\n  color: ", ";\n  transition: moving 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);\n  transition-property: transform;\n\n  &.toplevel {\n    margin: ", ";\n    padding: ", ";\n    gap: ", ";\n    justify-content: ", ";\n    &.active {\n      color: ", ";\n    }\n  }\n\n  &.nestedlevel {\n    padding: 0;\n    :hover {\n      color: ", ";\n    }\n  }\n\n  &.active > ", " {\n    background-color: ", ";\n    color: ", ";\n    width: 100%;\n    border-left: 4px solid ", ";\n    :last-child {\n      border-bottom-right-radius: 10px;\n    }\n    :first-child {\n      border-top-right-radius: 10px;\n    }\n  }\n\n  ", " {\n    color: ", ";\n    padding-left: 10px;\n    width: -webkit-fill-available;\n    height: -webkit-fill-available;\n  }\n\n  &.active,\n  &.selected {\n    ", " {\n      color: ", ";\n    }\n  }\n"])), function (_a) {
-    var $isCompact = _a.$isCompact;
-    return ($isCompact ? 'column' : 'row');
-}, function (_a) {
-    var $isCompact = _a.$isCompact;
-    return ($isCompact ? '60px' : '40px');
-}, function (_a) {
-    var $lightMode = _a.$lightMode;
-    return ($lightMode ? '8px' : '10px');
-}, function (_a) {
-    var $lightMode = _a.$lightMode;
-    return ($lightMode ? th.color('typoPrimary') : th.color('lightGray5'));
-}, function (_a) {
-    var $isCompact = _a.$isCompact;
-    return ($isCompact ? '0 0 12px 0' : '16px 0');
-}, function (_a) {
-    var $isCompact = _a.$isCompact;
-    return ($isCompact ? '10px 14px 6px 13px' : '9px 10px');
-}, function (_a) {
-    var $isCompact = _a.$isCompact;
-    return ($isCompact ? 'none' : '30px');
-}, function (_a) {
-    var $isCompact = _a.$isCompact;
-    return ($isCompact ? 'center' : 'space-between');
-}, function (_a) {
-    var $lightMode = _a.$lightMode;
-    return ($lightMode ? th('colors.red1') : 'white');
-}, function (_a) {
-    var $lightMode = _a.$lightMode;
-    return ($lightMode ? th('colors.red1') : 'white');
-}, TooltipItemLabel, function (_a) {
-    var $lightMode = _a.$lightMode;
-    return ($lightMode ? th.color('red20') : th.color('blue2'));
-}, function (_a) {
-    var $lightMode = _a.$lightMode;
-    return ($lightMode ? th.color('red1') : th.color('white'));
-}, th('colors.red1'), TooltipItemLabel, function (_a) {
-    var $lightMode = _a.$lightMode;
-    return ($lightMode ? th.color('typoPrimary') : th.color('white'));
-}, ItemDropdownArrow, function (_a) {
-    var $lightMode = _a.$lightMode;
-    return ($lightMode ? th.color('red1') : th.color('white'));
-});
-export var MenuItemContainer = styled.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n   z-index: 1;\n   stroke: ", ";\n   .selected > ", ", .active > ", " {\n     color: ", ";\n     stroke: ", ";\n   }\n\n    .toplevel {\n      ", "\n\n        ", "\n\n          &.active, &.selected {\n            ", "\n       \n            background-color: ", ";\n            svg {\n              stroke: ", ";\n            }\n          }\n\n          &.expanded > ", " {\n            visibility: visible;\n            svg {\n              transform: rotate(180deg);\n            }\n          }\n    }\n\n    &:hover {\n      ", ".toplevel {\n        background-color: ", ";\n      }\n      ", ".toplevel.active, ", ".toplevel.selected {\n        background-color: ", ";\n      }\n      ", ".nestedlevel {\n        background-color: inherit;\n      }\n    }\n  }\n"], ["\n   z-index: 1;\n   stroke: ", ";\n   .selected > ", ", .active > ", " {\n     color: ", ";\n     stroke: ", ";\n   }\n\n    .toplevel {\n      ", "\n\n        ", "\n\n          &.active, &.selected {\n            ", "\n       \n            background-color: ", ";\n            svg {\n              stroke: ", ";\n            }\n          }\n\n          &.expanded > ", " {\n            visibility: visible;\n            svg {\n              transform: rotate(180deg);\n            }\n          }\n    }\n\n    &:hover {\n      ", ".toplevel {\n        background-color: ", ";\n      }\n      ", ".toplevel.active, ", ".toplevel.selected {\n        background-color: ", ";\n      }\n      ", ".nestedlevel {\n        background-color: inherit;\n      }\n    }\n  }\n"])), function (_a) {
-    var $lightMode = _a.$lightMode;
-    return ($lightMode ? th.color('blue2') : undefined);
-}, ItemLabel, ItemLabel, function (_a) {
-    var $lightMode = _a.$lightMode;
-    return ($lightMode ? th.color('red1') : th.color('white'));
-}, function (_a) {
-    var $lightMode = _a.$lightMode;
-    return ($lightMode ? th.color('red1') : th.color('blue2'));
-}, function (_a) {
-    var $isCompact = _a.$isCompact, hasChildren = _a.hasChildren, isHovering = _a.isHovering;
-    return $isCompact &&
-        hasChildren &&
-        isHovering && css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n          & ", " {\n            ", "\n            ::after {\n              background-color: ", ";\n            }\n          }\n        "], ["\n          & ", " {\n            ", "\n            ::after {\n              background-color: ", ";\n            }\n          }\n        "])), ItemIcon, leftMenuAfter, function (_a) {
-        var $lightMode = _a.$lightMode;
-        return ($lightMode ? th.color('neutral20') : th.color('neutral500'));
-    });
-}, function (_a) {
-    var $isCompact = _a.$isCompact, $lightMode = _a.$lightMode, hasChildren = _a.hasChildren;
-    return $isCompact && css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n            & ", " {\n              ", "\n              :hover {\n                background-color: ", ";\n              }\n            }\n          "], ["\n            & ", " {\n              ", "\n              :hover {\n                background-color: ", ";\n              }\n            }\n          "])), ItemIcon, compactMenuItem, hasChildren ? 'transparent' : $lightMode ? th.color('neutral20') : th.color('neutral500'));
-}, function (_a) {
-    var $isCompact = _a.$isCompact, hasChildren = _a.hasChildren, isHovering = _a.isHovering, $lightMode = _a.$lightMode;
-    return $isCompact && hasChildren && isHovering
-        ? css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n                    & ", " {\n                      ", "\n                      ::after {\n                        background-color: ", ";\n                      }\n                    }\n                  "], ["\n                    & ", " {\n                      ", "\n                      ::after {\n                        background-color: ", ";\n                      }\n                    }\n                  "])), ItemIcon, leftMenuAfter, $lightMode ? th.color('red20') : th.color('neutral500')) : css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n                    & ", " {\n                      background-color: ", ";\n                      :hover {\n                        background-color: ", ";\n                      }\n                    }\n                  "], ["\n                    & ", " {\n                      background-color: ", ";\n                      :hover {\n                        background-color: ", ";\n                      }\n                    }\n                  "])), ItemIcon, !$isCompact ? 'transparent' : $lightMode ? th.color('red20') : th.color('red1'), $lightMode ? th.color('red20') : 'none');
-}, function (_a) {
-    var $isCompact = _a.$isCompact, $lightMode = _a.$lightMode;
-    if ($isCompact)
-        return 'none';
-    if ($lightMode)
-        return th.color('red20');
-    return th.color('red1');
-}, function (_a) {
-    var $lightMode = _a.$lightMode;
-    return ($lightMode ? th.color('red1') : th.color('white'));
-}, ItemDropdownArrow, ItemLinkWrap, function (_a) {
-    var $isCompact = _a.$isCompact, $lightMode = _a.$lightMode;
-    return $isCompact ? 'none' : $lightMode ? th.color('neutral20') : th.color('blue4');
-}, ItemLinkWrap, ItemLinkWrap, function (_a) {
-    var $lightMode = _a.$lightMode, $isCompact = _a.$isCompact;
-    if ($isCompact)
-        return 'none';
-    if ($lightMode)
-        return th.color('red20');
-    return th.color('red70');
-}, ItemLinkWrap);
-export var ItemIcon = styled.span(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  flex-shrink: 0;\n  margin-right: ", ";\n  margin-bottom: ", ";\n"], ["\n  display: flex;\n  justify-content: center;\n  flex-shrink: 0;\n  margin-right: ", ";\n  margin-bottom: ", ";\n"])), function (_a) {
-    var $isCompact = _a.$isCompact;
-    return ($isCompact ? '0' : '11px');
-}, function (_a) {
-    var $isCompact = _a.$isCompact;
-    return ($isCompact ? '4px' : '0');
-});
-export var TooltipWrap = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  position: absolute;\n  background-color: ", ";\n  white-space: nowrap;\n  transform: translateX(8px);\n  width: 248px;\n  border-radius: 0 10px 10px 0;\n  z-index: 5;\n  &::before {\n    content: '';\n    position: absolute;\n    border-radius: 10px;\n    width: calc(100% + 80px);\n    height: calc(100% + 100px);\n    left: -16px;\n    top: -50px;\n  }\n\n  & :not(:last-child) {\n    border-radius: 0;\n    border-bottom: 0.5px solid ", ";\n  }\n\n  &:first-child > {\n    :hover {\n      border-top-right-radius: 10px;\n      background-color: ", ";\n    }\n  }\n\n  & :not(:first-child) {\n    :hover {\n      border-top-right-radius: 0;\n    }\n  }\n\n  & :last-child > {\n    :hover {\n      border-bottom-right-radius: 10px;\n      background-color: ", ";\n    }\n  }\n"], ["\n  position: absolute;\n  background-color: ", ";\n  white-space: nowrap;\n  transform: translateX(8px);\n  width: 248px;\n  border-radius: 0 10px 10px 0;\n  z-index: 5;\n  &::before {\n    content: '';\n    position: absolute;\n    border-radius: 10px;\n    width: calc(100% + 80px);\n    height: calc(100% + 100px);\n    left: -16px;\n    top: -50px;\n  }\n\n  & :not(:last-child) {\n    border-radius: 0;\n    border-bottom: 0.5px solid ", ";\n  }\n\n  &:first-child > {\n    :hover {\n      border-top-right-radius: 10px;\n      background-color: ", ";\n    }\n  }\n\n  & :not(:first-child) {\n    :hover {\n      border-top-right-radius: 0;\n    }\n  }\n\n  & :last-child > {\n    :hover {\n      border-bottom-right-radius: 10px;\n      background-color: ", ";\n    }\n  }\n"])), function (_a) {
-    var $lightMode = _a.$lightMode;
-    return ($lightMode ? th.color('white') : th.color('neutral500'));
-}, function (_a) {
-    var $lightMode = _a.$lightMode;
-    return ($lightMode ? th.color('neutral20') : th('colors.textTertiary'));
-}, function (_a) {
-    var $lightMode = _a.$lightMode;
-    return ($lightMode ? th.color('red20') : th.color('blue2'));
-}, function (_a) {
-    var $lightMode = _a.$lightMode;
-    return ($lightMode ? th.color('red20') : th.color('blue2'));
-});
-export var OverflowWithEllipsis = styled.span(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  max-width: 140px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"], ["\n  max-width: 140px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
-export var TopLevelWrap = styled.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  background-color: ", ";\n  border-right: 1px solid ", ";\n  height: -webkit-fill-available;\n  transition: width 0.5s ease;\n  width: ", ";\n\n  z-index: 7;\n  position: absolute;\n  top: ", ";\n  height: ", ";\n\n  display: flex;\n  flex-direction: column;\n\n  @media (min-width: 1024px) {\n    top: inherit;\n    z-index: 2;\n  }\n"], ["\n  background-color: ", ";\n  border-right: 1px solid ", ";\n  height: -webkit-fill-available;\n  transition: width 0.5s ease;\n  width: ", ";\n\n  z-index: 7;\n  position: absolute;\n  top: ", ";\n  height: ", ";\n\n  display: flex;\n  flex-direction: column;\n\n  @media (min-width: 1024px) {\n    top: inherit;\n    z-index: 2;\n  }\n"])), function (_a) {
-    var lightMode = _a.lightMode;
-    return (lightMode ? 'white' : th('colors.blue3'));
-}, th('colors.lightGray6'), function (_a) {
-    var isCompact = _a.isCompact;
-    return "".concat(isCompact ? compactMenuWidth : expandedMenuWidth, "px");
-}, function (_a) {
-    var isLeftMenuOpen = _a.isLeftMenuOpen;
-    return (isLeftMenuOpen ? '0' : undefined);
-}, function (_a) {
-    var isLeftMenuOpen = _a.isLeftMenuOpen;
-    return (isLeftMenuOpen ? '100%' : 'calc(100% - 52px)');
-});
-export var ScrollWrap = styled.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  overflow-y: auto;\n  flex-grow: 1;\n  scrollbar-width: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  overflow-y: auto;\n  flex-grow: 1;\n  scrollbar-width: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"])));
-export var BodyWrap = styled.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  width: 100%;\n  text-align: center;\n  padding: ", ";\n  height: calc(100% - 52px);\n"], ["\n  width: 100%;\n  text-align: center;\n  padding: ", ";\n  height: calc(100% - 52px);\n"])), function (_a) {
-    var isCompact = _a.isCompact;
-    return (isCompact ? '24px 9px' : '24px 22px');
-});
-export var Overlay = styled.div(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  z-index: 6;\n  height: 100%;\n  width: 100%;\n  background-color: ", ";\n  @media (min-width: 1024px) {\n    display: none;\n  }\n"], ["\n  position: fixed;\n  top: 0;\n  z-index: 6;\n  height: 100%;\n  width: 100%;\n  background-color: ", ";\n  @media (min-width: 1024px) {\n    display: none;\n  }\n"])), createRgba('blue2', 0.6));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21;

package/ui/Blocks/SideMenu/types.js

@@ -1 +0,0 @@
-export {};

package/ui/Blocks/SideMenu/utils/constants.js

@@ -1,2 +0,0 @@
-export var compactMenuWidth = 75;
-export var expandedMenuWidth = 255;

package/ui/Blocks/Stepper/Stepper.js

@@ -1,21 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo } from 'react';
-import { StepItem } from './components/StepItem';
-import { Container, ItemsWrapper } from './styles';
-export var Stepper = function (_a) {
-    var items = _a.items, activeStep = _a.activeStep, hasStepNumbering = _a.hasStepNumbering, handleChangeStep = _a.handleChangeStep, handleGoToNextStep = _a.handleGoToNextStep, isLoading = _a.isLoading;
-    var Component = useMemo(function () { var _a; return (_a = items[activeStep]) === null || _a === void 0 ? void 0 : _a.component; }, [items, activeStep]);
-    useEffect(function () {
-        var _a;
-        if (!!activeStep && !((_a = items[activeStep - 1]) === null || _a === void 0 ? void 0 : _a.completed)) {
-            handleChangeStep === null || handleChangeStep === void 0 ? void 0 : handleChangeStep(0)();
-        }
-    }, [items]);
-    if (!(items === null || items === void 0 ? void 0 : items.length))
-        return null;
-    return (_jsxs(Container, { children: [_jsx(ItemsWrapper, { total: items.length, hasComponent: !!Component, children: items.map(function (_a, index) {
-                    var _b;
-                    var title = _a.title, disabled = _a.disabled, visible = _a.visible, completed = _a.completed, icon = _a.icon;
-                    return (_jsx(StepItem, { isPrevStepCompleted: (_b = items[index - 1]) === null || _b === void 0 ? void 0 : _b.completed, onClick: handleChangeStep === null || handleChangeStep === void 0 ? void 0 : handleChangeStep(index), title: title, index: index, total: items.length, activeStep: activeStep, disabled: disabled, visible: visible, completed: completed, hasStepNumbering: hasStepNumbering, icon: icon }, title));
-                }) }), Component && _jsx(Component, { handleGoToNextStep: handleGoToNextStep, isLoading: isLoading })] }));
-};

package/ui/Blocks/Stepper/components/StepCircle/index.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Icon from '../../../../Elements/Icon';
-import { StepCircleContainer } from './styles';
-export var StepCircle = function (_a) {
-    var icon = _a.icon, isCompleted = _a.isCompleted, children = _a.children, isActiveStep = _a.isActiveStep;
-    return (_jsx(StepCircleContainer, { isCompleted: isCompleted, isActiveStep: isActiveStep, children: icon ? _jsx(Icon, { icon: icon, size: "12px", fill: isCompleted || isActiveStep ? 'red1' : 'lightGray6' }) : children }));
-};

package/ui/Blocks/Stepper/components/StepCircle/styles.js

@@ -1,19 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import styled, { css, th } from '@xstyled/styled-components';
-export var StepCircleContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: 16px;\n  font-weight: 600;\n  border-radius: 50%;\n  color: ", ";\n  border: ", ";\n  border-color: ", ";\n  background: white;\n  height: 36px;\n  width: 36px;\n  display: flex;\n  flex: 0 0 36px;\n  justify-content: center;\n  align-items: center;\n\n  ", "\n"], ["\n  font-size: 16px;\n  font-weight: 600;\n  border-radius: 50%;\n  color: ", ";\n  border: ", ";\n  border-color: ", ";\n  background: white;\n  height: 36px;\n  width: 36px;\n  display: flex;\n  flex: 0 0 36px;\n  justify-content: center;\n  align-items: center;\n\n  ", "\n"])), function (_a) {
-    var isActiveStep = _a.isActiveStep;
-    return (isActiveStep ? th.color('red1') : th.color('lightGray6'));
-}, function (_a) {
-    var isCompleted = _a.isCompleted;
-    return "".concat(isCompleted ? 8 : 2, "px solid");
-}, function (_a) {
-    var isCompleted = _a.isCompleted, isActiveStep = _a.isActiveStep;
-    return th.color(isActiveStep || isCompleted ? 'red1' : 'lightGray6');
-}, function (_a) {
-    var isActiveStep = _a.isActiveStep;
-    return isActiveStep && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      box-shadow: 0 0 0 4px ", ";\n    "], ["\n      box-shadow: 0 0 0 4px ", ";\n    "])), th.color('red20'));
-});
-var templateObject_1, templateObject_2;

package/ui/Blocks/Stepper/components/StepItem/index.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Paragraph2, H7 } from '../../../../Elements/Typography/Typography';
-import { StepCircle } from '../StepCircle';
-import { Trans } from '@lingui/react';
-import { x } from '@xstyled/styled-components';
-import isBoolean from 'lodash/isBoolean';
-import { Line, StepItemContainer, ContentWrapper } from './styles';
-export var StepItem = function (_a) {
-    var title = _a.title, index = _a.index, disabled = _a.disabled, isPrevStepCompleted = _a.isPrevStepCompleted, activeStep = _a.activeStep, completed = _a.completed, icon = _a.icon, _b = _a.hasStepNumbering, hasStepNumbering = _b === void 0 ? true : _b, _c = _a.visible, visible = _c === void 0 ? true : _c, total = _a.total, onClick = _a.onClick;
-    var isActiveStep = index === activeStep;
-    var isCompletedStep = isBoolean(completed) ? completed : index < activeStep;
-    return (_jsxs(StepItemContainer, { onClick: !disabled && (isCompletedStep || isPrevStepCompleted) ? onClick : undefined, isActiveStep: isActiveStep, isDisabled: disabled, isVisible: visible, total: total, children: [_jsx(Line, { isActiveStep: isActiveStep, isCompletedStep: isCompletedStep }), _jsxs(ContentWrapper, { children: [_jsx(StepCircle, { icon: isCompletedStep ? 'check' : icon, isCompleted: isCompletedStep, isActiveStep: isActiveStep, children: index + 1 }), _jsxs(x.div, { alignSelf: "center", children: [hasStepNumbering && (_jsx(x.span, { textTransform: "uppercase", children: _jsxs(H7, { color: isCompletedStep ? 'red1' : 'gray1', variant: "semiBold", mt: 0, mb: "4px", children: [_jsx(Trans, { id: "step", message: "Step" }), ": ", index + 1] }) })), _jsx(Paragraph2, { variant: "medium", children: title })] })] })] }));
-};

package/ui/Blocks/Stepper/components/StepItem/styles.js

@@ -1,36 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { StepCircleContainer } from '../StepCircle/styles';
-import styled, { css, th } from '@xstyled/styled-components';
-var responsiveCss = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  padding: 8px;\n\n  h6 {\n    font-size: 10px;\n  }\n\n  p {\n    font-size: 12px;\n  }\n\n  ", " {\n    display: flex;\n  }\n\n  @media (min-width: ", "px) {\n    width: 150px;\n    padding: 16px;\n\n    ", " {\n      display: none;\n    }\n  }\n\n  @media (min-width: ", "px) {\n    width: 200px;\n    padding: 24px;\n\n    ", " {\n      display: flex;\n    }\n  }\n\n  @media (min-width: ", "px) {\n    width: 240px;\n\n    p {\n      font-size: 16px;\n    }\n    h6 {\n      font-size: 12px;\n    }\n\n    ", " {\n      display: flex;\n    }\n  }\n"], ["\n  width: 100%;\n  padding: 8px;\n\n  h6 {\n    font-size: 10px;\n  }\n\n  p {\n    font-size: 12px;\n  }\n\n  ", " {\n    display: flex;\n  }\n\n  @media (min-width: ", "px) {\n    width: 150px;\n    padding: 16px;\n\n    ", " {\n      display: none;\n    }\n  }\n\n  @media (min-width: ", "px) {\n    width: 200px;\n    padding: 24px;\n\n    ", " {\n      display: flex;\n    }\n  }\n\n  @media (min-width: ", "px) {\n    width: 240px;\n\n    p {\n      font-size: 16px;\n    }\n    h6 {\n      font-size: 12px;\n    }\n\n    ", " {\n      display: flex;\n    }\n  }\n"])), StepCircleContainer, function (_a) {
-    var total = _a.total;
-    return total * 150;
-}, StepCircleContainer, function (_a) {
-    var total = _a.total;
-    return total * 200;
-}, StepCircleContainer, function (_a) {
-    var total = _a.total;
-    return total * 240;
-}, StepCircleContainer);
-export var StepItemContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-radius: 10px;\n  width: 240px;\n  padding: 24px;\n  background-color: ", ";\n  cursor: ", ";\n  display: ", ";\n  ", "\n"], ["\n  border-radius: 10px;\n  width: 240px;\n  padding: 24px;\n  background-color: ", ";\n  cursor: ", ";\n  display: ", ";\n  ", "\n"])), function (_a) {
-    var isActiveStep = _a.isActiveStep;
-    return (isActiveStep ? th.color('bgLightGray1') : 'transparent');
-}, function (_a) {
-    var isDisabled = _a.isDisabled, onClick = _a.onClick;
-    return (isDisabled ? 'not-allowed' : onClick ? 'pointer' : 'auto');
-}, function (_a) {
-    var isVisible = _a.isVisible;
-    return (isVisible ? 'block' : 'none');
-}, responsiveCss);
-export var Line = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 4px;\n  border-radius: 8px;\n  width: 100%;\n  background-color: ", ";\n  margin-bottom: 16px;\n"], ["\n  height: 4px;\n  border-radius: 8px;\n  width: 100%;\n  background-color: ", ";\n  margin-bottom: 16px;\n"])), function (_a) {
-    var isActiveStep = _a.isActiveStep, isCompletedStep = _a.isCompletedStep;
-    if (isActiveStep)
-        return th.color('red1');
-    if (isCompletedStep)
-        return th.color('red20');
-    return th.color('lightGray7');
-});
-export var ContentWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  column-gap: 16px;\n  align-items: flex-start;\n"], ["\n  display: flex;\n  column-gap: 16px;\n  align-items: flex-start;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/ui/Blocks/Stepper/hooks/useStepper.js

@@ -1,22 +0,0 @@
-import { useCallback, useState } from 'react';
-export var useStepper = function (_a) {
-    var totalSteps = _a.totalSteps;
-    var _b = useState(0), activeStep = _b[0], setActiveStep = _b[1];
-    var _c = useState(false), isSuccess = _c[0], setSuccess = _c[1];
-    var handleReset = useCallback(function () {
-        setActiveStep(0);
-        setSuccess(false);
-    }, []);
-    var handleGoToNextStep = useCallback(function () {
-        if (activeStep + 1 === totalSteps) {
-            handleReset();
-            setSuccess(true);
-            return;
-        }
-        setActiveStep(activeStep + 1);
-    }, [activeStep, totalSteps, handleReset]);
-    var handleChangeStep = useCallback(function (step) { return function () {
-        setActiveStep(step);
-    }; }, []);
-    return { activeStep: activeStep, handleChangeStep: handleChangeStep, handleGoToNextStep: handleGoToNextStep, isSuccess: isSuccess, handleReset: handleReset };
-};

package/ui/Blocks/Stepper/index.js

@@ -1,3 +0,0 @@
-export { Stepper as default } from './Stepper';
-export { useStepper } from './hooks/useStepper';
-export { StepCircle } from './components/StepCircle';

package/ui/Blocks/Stepper/stories/Stepper.stories.js

@@ -1,86 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Stepper from '../';
-import Button from '../../../Elements/Button/Button';
-import { LinguiContainer } from '../../../utils/LinguiContainer';
-import { useStepper } from '../hooks/useStepper';
-var items = [
-    {
-        title: 'Scan product or package',
-        component: function (_a) {
-            var handleGoToNextStep = _a.handleGoToNextStep;
-            return (_jsxs("div", { children: ["Scan product ", _jsx(Button, { onClick: handleGoToNextStep, children: "Go next" })] }));
-        }
-    },
-    {
-        title: 'Measurement',
-        component: function (_a) {
-            var handleGoToNextStep = _a.handleGoToNextStep;
-            return (_jsxs("div", { children: ["Measurement page ", _jsx(Button, { onClick: handleGoToNextStep, children: "Go next" })] }));
-        }
-    },
-    {
-        title: 'Logistic info',
-        component: function (_a) {
-            var handleGoToNextStep = _a.handleGoToNextStep;
-            return (_jsxs("div", { children: ["Logistic info ", _jsx(Button, { onClick: handleGoToNextStep, children: "Go next" })] }));
-        }
-    },
-    {
-        title: 'Color',
-        component: function (_a) {
-            var handleGoToNextStep = _a.handleGoToNextStep;
-            return (_jsxs("div", { children: ["Select color ", _jsx(Button, { onClick: handleGoToNextStep, children: "Finish" })] }));
-        }
-    }
-];
-var iconItems = [
-    {
-        title: 'Order created',
-        icon: 'peopleCarry',
-        completed: true
-    },
-    {
-        title: 'Processed in stock',
-        icon: 'boxRamp',
-    },
-    {
-        title: 'Log Processed in stock',
-        icon: 'flatBox'
-    },
-    {
-        title: 'PPL parcelshop',
-        icon: 'truck'
-    },
-    {
-        title: 'Delivered',
-        icon: 'circleCheck'
-    }
-];
-var completedItems = items.map(function (item) { return (__assign(__assign({}, item), { completed: true })); });
-var meta = {
-    title: 'Blocks/Stepper',
-    tags: ['autodocs']
-};
-export default meta;
-export var Default = function () {
-    var _a = useStepper({ totalSteps: items.length }), activeStep = _a.activeStep, handleChangeStep = _a.handleChangeStep, handleGoToNextStep = _a.handleGoToNextStep;
-    return (_jsx(LinguiContainer, { children: _jsx(Stepper, { items: items, activeStep: activeStep, handleChangeStep: handleChangeStep, handleGoToNextStep: handleGoToNextStep }) }));
-};
-export var WithIcons = function () {
-    return (_jsx(LinguiContainer, { children: _jsx(Stepper, { items: iconItems, activeStep: 1, hasStepNumbering: false }) }));
-};
-export var AllStepsCompleted = function () {
-    var _a = useStepper({ totalSteps: completedItems.length }), activeStep = _a.activeStep, handleChangeStep = _a.handleChangeStep, handleGoToNextStep = _a.handleGoToNextStep;
-    return (_jsx(LinguiContainer, { children: _jsx(Stepper, { items: completedItems, activeStep: activeStep, handleChangeStep: handleChangeStep, handleGoToNextStep: handleGoToNextStep }) }));
-};

package/ui/Blocks/Stepper/styles.js

@@ -1,14 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import styled from '@xstyled/styled-components';
-export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: fit-content;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  flex-direction: column;\n"])));
-export var ItemsWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  margin-bottom: ", ";\n  flex-direction: column;\n  width: 100%;\n\n  @media (min-width: ", "px) {\n    flex-direction: row;\n    width: auto;\n    max-width: 100%;\n  }\n"], ["\n  display: flex;\n  margin-bottom: ", ";\n  flex-direction: column;\n  width: 100%;\n\n  @media (min-width: ", "px) {\n    flex-direction: row;\n    width: auto;\n    max-width: 100%;\n  }\n"])), function (_a) {
-    var hasComponent = _a.hasComponent;
-    return (hasComponent ? '36px' : '0');
-}, function (_a) {
-    var total = _a.total;
-    return total * 150;
-});
-var templateObject_1, templateObject_2;

package/ui/Blocks/Stepper/types.js

@@ -1 +0,0 @@
-export {};

package/ui/Blocks/Table/Table.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Table as TableComponent, Thead, Tr, Td, Th, Tbody } from '../../Elements/Table';
-export var Table = function (_a) {
-    var columnDefinitions = _a.columnDefinitions, data = _a.data, onRowClick = _a.onRowClick;
-    return (_jsxs(TableComponent, { children: [_jsx(Thead, { children: _jsx(Tr, { children: columnDefinitions.map(function (column) { return (_jsx(Th, { children: column.title })); }) }) }), _jsx(Tbody, { children: data === null || data === void 0 ? void 0 : data.map(function (item) { return (_jsx(Tr, { onClick: function () { return onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(item); }, cursor: onRowClick ? 'pointer' : 'auto', children: columnDefinitions.map(function (column) { return (_jsx(Td, { children: item[column.name] }, column.name)); }) }, item.id)); }) })] }));
-};

package/ui/Blocks/Table/index.js

@@ -1 +0,0 @@
-export { Table } from './Table';

package/ui/Blocks/Table/stories/Table.stories.js

@@ -1,20 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Table } from '../';
-var meta = {
-    title: 'Blocks/Table',
-    component: Table,
-    tags: ['autodocs'],
-    argTypes: {}
-};
-export default meta;
-var columnDefinitions = [
-    { name: 'name', title: 'Name' },
-    { name: 'surname', title: 'Surname' },
-    { name: 'age', title: 'Age' }
-];
-var data = [
-    { id: 'id1', name: 'Fred', surname: 'Borow', age: 15 },
-    { id: 'id2', name: 'Karl', surname: 'Boxer', age: 25 },
-    { id: 'id3', name: 'Igor', surname: 'Laryngtown', age: 35 },
-];
-export var Default = function () { return (_jsx(Table, { columnDefinitions: columnDefinitions, data: data, onRowClick: function (dataRow) { return console.log(dataRow); } })); };

package/ui/Blocks/Table/types.js

@@ -1 +0,0 @@
-export {};

package/ui/Blocks/Tabs/TabContent.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Activity } from 'react';
-export var TabContent = function (_a) {
-    var activeTab = _a.activeTab, value = _a.value, children = _a.children;
-    return (_jsx(Activity, { mode: activeTab === value ? 'visible' : 'hidden', children: children }));
-};

package/ui/Blocks/Tabs/Tabs.js

@@ -1,20 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback } from 'react';
-import { Icon } from '../../Elements/Icon';
-import { Text } from '../../Elements/Text';
-import { RoundedWrap, StyledImageBox, Tab as StyledTab, StyledTabWrapper, TabPanel } from './styles';
-var Tab = function (_a) {
-    var tabDefinition = _a.tabDefinition, value = _a.value, isActive = _a.isActive, onTabSwitch = _a.onTabSwitch, minWidth = _a.minWidth;
-    var icon = tabDefinition.icon, label = tabDefinition.label, badgeCount = tabDefinition.badgeCount, disabled = tabDefinition.disabled;
-    var handleOnClick = useCallback(function () {
-        onTabSwitch(value);
-    }, [onTabSwitch, value]);
-    return (_jsx(StyledTabWrapper, { children: _jsxs(StyledTab, { onClick: !disabled ? handleOnClick : undefined, active: isActive, disabled: disabled, minWidth: minWidth, "data-testid": "tab-".concat(value), children: [icon && (_jsx(StyledImageBox, { children: _jsx(Icon, { icon: icon }) })), _jsx(Text, { children: label }), badgeCount === 0 ||
-                    (badgeCount && badgeCount > 0 && (_jsx(RoundedWrap, { children: _jsx(Text, { variant: "medium", children: badgeCount }) })))] }) }));
-};
-export var Tabs = function (_a) {
-    var tabsDefinition = _a.tabsDefinition, activeTab = _a.activeTab, onTabSwitch = _a.onTabSwitch, mb = _a.mb, mt = _a.mt, minTabWidth = _a.minTabWidth;
-    return (_jsx(TabPanel, { "$mb": mb, "$mt": mt, children: tabsDefinition.map(function (item, index) {
-            return (_jsx(Tab, { value: index, tabDefinition: item, isActive: index === activeTab, minWidth: minTabWidth, onTabSwitch: onTabSwitch }, index));
-        }) }));
-};

package/ui/Blocks/Tabs/hooks/useTabs.js

@@ -1,10 +0,0 @@
-import { useCallback, useState } from 'react';
-export var useTabs = function (tabDefinitions) {
-    var index = tabDefinitions.map(function (item) { return item.default; }).indexOf(true);
-    var initialValue = index === -1 ? 0 : index;
-    var _a = useState(initialValue), activeTab = _a[0], setActiveTab = _a[1];
-    var onTabSwitch = useCallback(function (value) {
-        setActiveTab(value);
-    }, []);
-    return { activeTab: activeTab, onTabSwitch: onTabSwitch };
-};