@mailstep/design-system 0.5.1-beta.1 → 0.6.0

package/ui/Elements/DropdownMenu/DropdownMenu.js

@@ -0,0 +1,36 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import styled from '@xstyled/styled-components';
+import MenuList from './components/MenuList';
+import DefaultItem from './components/DefaultItem';
+var StyledDropdownWrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: fit-content;\n  height: fit-content;\n  background-color: white;\n  padding: 2;\n  display: block;\n  border: slim;\n  border-color: lightGray2;\n  border-radius: 10px;\n  box-shadow: dropdownMenuShadow;\n  color: red2;\n  z-index: 1;\n"], ["\n  width: fit-content;\n  height: fit-content;\n  background-color: white;\n  padding: 2;\n  display: block;\n  border: slim;\n  border-color: lightGray2;\n  border-radius: 10px;\n  box-shadow: dropdownMenuShadow;\n  color: red2;\n  z-index: 1;\n"])));
+export var DropdownMenu = function (_a) {
+    var items = _a.items, showMenu = _a.showMenu, className = _a.className, _b = _a.ItemComponent, ItemComponent = _b === void 0 ? DefaultItem : _b, header = _a.header, footer = _a.footer, rest = __rest(_a, ["items", "showMenu", "className", "ItemComponent", "header", "footer"]);
+    return (_jsx(_Fragment, { children: showMenu && (_jsxs(StyledDropdownWrap, __assign({ className: className }, rest, { children: [header ? header : null, _jsx(MenuList, { items: items, ItemComponent: ItemComponent }), footer ? footer : null] }))) }));
+};
+var templateObject_1;

package/ui/Elements/DropdownMenu/components/DefaultItem.d.ts

@@ -0,0 +1,3 @@
+import { DefaultItem } from '../types';
+declare const MenuItem: ({ icon, title, hasSeparator }: DefaultItem) => JSX.Element;
+export default MenuItem;

package/ui/Elements/DropdownMenu/components/DefaultItem.js

@@ -0,0 +1,16 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { css } from '@xstyled/styled-components';
+var StyledListItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 10px;\n  font-size: 12px;\n  color: typoPrimary;\n  font-weight: normal;\n\n  :hover {\n    background-color: bgLightGray1;\n    cursor: pointer;\n  }\n\n  ", ";\n"], ["\n  padding: 10px;\n  font-size: 12px;\n  color: typoPrimary;\n  font-weight: normal;\n\n  :hover {\n    background-color: bgLightGray1;\n    cursor: pointer;\n  }\n\n  ", ";\n"])), function (props) {
+    return props.hasSeparator && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      border-top: slim;\n      border-color: lightGray2;\n    "], ["\n      border-top: slim;\n      border-color: lightGray2;\n    "])));
+});
+var IconWrap = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-right: 10px;\n"], ["\n  margin-right: 10px;\n"])));
+var MenuItem = function (_a) {
+    var icon = _a.icon, title = _a.title, hasSeparator = _a.hasSeparator;
+    return (_jsxs(StyledListItem, { hasSeparator: hasSeparator, children: [icon && _jsx(IconWrap, { children: icon }), title] }));
+};
+export default MenuItem;
+var templateObject_1, templateObject_2, templateObject_3;

package/ui/Elements/DropdownMenu/components/MenuItem.d.ts

@@ -0,0 +1,3 @@
+import { Item, MenuItemProps } from '../types';
+declare const MenuItem: <ItemType extends Item>({ item, ItemComponent, onClose }: MenuItemProps<ItemType>) => JSX.Element;
+export default MenuItem;

package/ui/Elements/DropdownMenu/components/MenuItem.js

@@ -0,0 +1,51 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import styled from '@xstyled/styled-components';
+import { useLocation } from 'react-router';
+import Link from '../../Link/Link';
+var StyledLink = styled(Link)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  border-top: ", ";\n  padding-top: ", ";\n  color: typoPrimary;\n\n  :hover > * {\n    color: typoPrimary;\n    background-color: bgLightGray1;\n    border-radius: 6px;\n  }\n  ", "\n"], ["\n  display: block;\n  border-top: ", ";\n  padding-top: ", ";\n  color: typoPrimary;\n\n  :hover > * {\n    color: typoPrimary;\n    background-color: bgLightGray1;\n    border-radius: 6px;\n  }\n  ", "\n"])), function (_a) {
+    var $hasSeparator = _a.$hasSeparator;
+    return ($hasSeparator ? '1px solid #D2D8DF' : 'none');
+}, function (_a) {
+    var $hasSeparator = _a.$hasSeparator;
+    return ($hasSeparator ? '4px' : '0');
+}, function (_a) {
+    var $isActive = _a.$isActive;
+    return $isActive &&
+        "\n    background-color: red1;\n    color: white;\n    border-radius: 6px;\n    :hover {\n      & svg {\n        stroke: typoPrimary;\n      }\n    }\n    & svg {\n      stroke: white;\n    }\n  }\n";
+});
+var MenuItem = function (_a) {
+    var item = _a.item, ItemComponent = _a.ItemComponent, onClose = _a.onClose;
+    var onClick = item.onClick, link = item.link, hasSeparator = item.hasSeparator, name = item.name, autoClose = item.autoClose;
+    var location = useLocation();
+    var isActive = link === location.pathname;
+    var onClickCallback = useCallback(function (e) {
+        if (onClick) {
+            e.preventDefault();
+            onClick();
+        }
+        if (autoClose && onClose) {
+            setTimeout(function () {
+                onClose();
+            }, 200);
+        }
+    }, [autoClose, onClick, onClose]);
+    return (_jsx(StyledLink, { to: link, "$isActive": isActive, onClick: onClickCallback, "$hasSeparator": !!hasSeparator, "data-cy": name, size: "inherit", children: _jsx(ItemComponent, __assign({}, item)) }));
+};
+export default MenuItem;
+var templateObject_1;

package/ui/Elements/DropdownMenu/components/MenuList.d.ts

@@ -0,0 +1,3 @@
+import { Item, MenuItems } from '../types';
+declare const MenuList: <ItemType extends Item>({ items, ItemComponent, onClose }: MenuItems<ItemType>) => JSX.Element;
+export default MenuList;

package/ui/Elements/DropdownMenu/components/MenuList.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import MenuItem from './MenuItem';
+var MenuList = function (_a) {
+    var items = _a.items, ItemComponent = _a.ItemComponent, onClose = _a.onClose;
+    return (_jsx("ul", { children: items &&
+            items.map(function (item, i) {
+                return !item.hidden && _jsx(MenuItem, { item: item, ItemComponent: ItemComponent, onClose: onClose }, i);
+            }) }));
+};
+export default MenuList;

package/ui/Elements/DropdownMenu/index.d.ts

@@ -0,0 +1 @@
+export { DropdownMenu as default } from './DropdownMenu';

package/ui/Elements/DropdownMenu/index.js

@@ -0,0 +1 @@
+export { DropdownMenu as default } from './DropdownMenu';

package/ui/Elements/DropdownMenu/types.d.ts

@@ -0,0 +1,41 @@
+import { Ref } from 'react';
+export type Pathname = {
+    pathname: string;
+};
+export type DefaultItem = {
+    icon?: React.ReactNode;
+    title?: string | JSX.Element;
+    link?: string | Pathname;
+    onClick?: Function;
+    hasSeparator?: boolean;
+    hidden?: boolean;
+    count?: number;
+    autoClose?: boolean;
+};
+export type Item = {
+    link?: string | Pathname;
+    onClick?: Function;
+    hasSeparator?: boolean;
+    name?: string;
+    autoClose?: boolean;
+    hidden?: boolean;
+};
+export type MenuItemProps<ItemType extends Item> = {
+    item: ItemType;
+    ItemComponent: React.ComponentType<Omit<ItemType, 'onClick' | 'link'>>;
+    onClose?: Function;
+};
+export type MenuItems<ItemType extends Item> = {
+    items?: ItemType[];
+    ItemComponent: React.ComponentType<Omit<ItemType, 'onClick' | 'link'>>;
+    onClose?: Function;
+};
+export type DropdownMenuProps<ItemType extends Item = DefaultItem> = {
+    showMenu?: boolean;
+    className?: string;
+    childRef?: Ref<any>;
+    items?: ItemType[];
+    ItemComponent?: React.ComponentType<Omit<ItemType, 'onClick' | 'link'>>;
+    header?: React.ReactNode;
+    footer?: React.ReactNode;
+};

package/ui/Elements/DropdownMenu/types.js

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

package/ui/Elements/DropdownSelect/DropdownSelect.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { AppearanceValue } from '../Button/index';
+type Item = {
+    label: string | JSX.Element;
+    value: string;
+    name?: string;
+};
+type DropdownSelectProps = {
+    label: string | JSX.Element;
+    appearance?: AppearanceValue;
+    options: Item[];
+    showChevron?: boolean;
+    onSelect?: (value: Item['value']) => void;
+    icon?: JSX.Element;
+    disabled?: boolean;
+    ButtonComponent?: React.FC;
+};
+export declare const CustomSelectButton: import("styled-components").StyledComponent<"button", import("@xstyled/system").Theme, {}, never>;
+declare const DropdownSelect: ({ label, appearance, options, showChevron, onSelect, disabled, icon, ButtonComponent, }: DropdownSelectProps) => JSX.Element;
+export default DropdownSelect;
+export type { Item as DropdownSelectItem };

package/ui/Elements/DropdownSelect/DropdownSelect.js

@@ -0,0 +1,47 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useRef } from 'react';
+import styled from '@xstyled/styled-components';
+import Icon from '../Icon/Icon';
+import DropdownMenu from '../DropdownMenu';
+import Button from '../Button/index';
+import Popover from '../../Blocks/Popover';
+var ArrowIcon = styled(Icon)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  flex-shrink: 0;\n  margin-left: 2;\n"], ["\n  flex-shrink: 0;\n  margin-left: 2;\n"])));
+var CustomIconWrap = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin-right: 1;\n"], ["\n  margin-right: 1;\n"])));
+var StyledDropdownMenu = styled(DropdownMenu)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: 8px;\n  min-width: ", ";\n  width: max-content;\n"], ["\n  position: absolute;\n  top: 8px;\n  min-width: ", ";\n  width: max-content;\n"])), function (_a) {
+    var $fixedWidth = _a.$fixedWidth;
+    return ($fixedWidth ? '160px' : 'max-content');
+});
+var ContentWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n"], ["\n  display: flex;\n  align-items: center;\n"])));
+var ChevronWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border-left: ", ";\n"], ["\n  border-left: ", ";\n"])), function (_a) {
+    var $hasBorder = _a.$hasBorder;
+    return ($hasBorder ? '1px solid white' : 'none');
+});
+export var CustomSelectButton = styled.button(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: none;\n  min-width: 160px;\n  height: 38px;\n  padding: 0;\n  background-color: red1;\n  color: white;\n  font-size: 14px;\n  line-height: 14px;\n  font-weight: 600;\n  border: none;\n  border-radius: lg;\n  outline: none;\n  cursor: pointer;\n  :disabled {\n    border: slim;\n    background-color: bgLightGray;\n    border-color: lightGray5;\n    color: gray3;\n    opacity: 0.6;\n    cursor: auto;\n  }\n\n  @media (min-width: 1024px) {\n    display: block;\n\n    :focus {\n      outline: none;\n    }\n  }\n\n  ", " {\n    justify-content: space-between;\n    padding-left: 14px;\n  }\n\n  ", " {\n    margin-left: 20px;\n    padding: 12px 14px;\n  }\n"], ["\n  display: none;\n  min-width: 160px;\n  height: 38px;\n  padding: 0;\n  background-color: red1;\n  color: white;\n  font-size: 14px;\n  line-height: 14px;\n  font-weight: 600;\n  border: none;\n  border-radius: lg;\n  outline: none;\n  cursor: pointer;\n  :disabled {\n    border: slim;\n    background-color: bgLightGray;\n    border-color: lightGray5;\n    color: gray3;\n    opacity: 0.6;\n    cursor: auto;\n  }\n\n  @media (min-width: 1024px) {\n    display: block;\n\n    :focus {\n      outline: none;\n    }\n  }\n\n  ", " {\n    justify-content: space-between;\n    padding-left: 14px;\n  }\n\n  ", " {\n    margin-left: 20px;\n    padding: 12px 14px;\n  }\n"])), ContentWrapper, ChevronWrapper);
+var DropdownSelect = function (_a) {
+    var label = _a.label, appearance = _a.appearance, options = _a.options, showChevron = _a.showChevron, onSelect = _a.onSelect, disabled = _a.disabled, icon = _a.icon, ButtonComponent = _a.ButtonComponent;
+    var _b = React.useState(false), showDropdownMenu = _b[0], setShowDropdownMenu = _b[1];
+    var onClose = useCallback(function () { return setShowDropdownMenu(false); }, []);
+    var toggleDropdownMenu = React.useCallback(function () {
+        setShowDropdownMenu(function (prev) { return !prev; });
+    }, []);
+    var handleSelectItem = React.useCallback(function (item) {
+        setShowDropdownMenu(false);
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(item.value);
+    }, [onSelect]);
+    var ref = useRef(null);
+    var items = options.map(function (item) { return ({
+        title: item.label,
+        onClick: function () { return handleSelectItem(item); },
+        link: '#',
+        name: item.name,
+    }); });
+    var ComponentOfButton = ButtonComponent || Button;
+    var isCustomBtn = !!ButtonComponent;
+    return (_jsxs("div", { ref: ref, children: [_jsx(ComponentOfButton, { type: "button", appearance: appearance, onClick: toggleDropdownMenu, disabled: disabled, "data-cy": "createProductDropdownMenuBtn", children: _jsxs(ContentWrapper, { children: [icon && _jsx(CustomIconWrap, { children: icon }), _jsx("span", { children: label }), showChevron && (_jsx(ChevronWrapper, { "$hasBorder": isCustomBtn, children: _jsx(ArrowIcon, { icon: "chevronDown", size: isCustomBtn ? '100%' : '80%', fixedWidth: isCustomBtn }) }))] }) }), showDropdownMenu && (_jsx(Popover, { parentRef: ref, onClose: onClose, placement: "bottom-start", children: _jsx(StyledDropdownMenu, { showMenu: true, items: items, "$fixedWidth": isCustomBtn }) }))] }));
+};
+export default DropdownSelect;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/ui/Elements/DropdownSelect/index.d.ts

@@ -0,0 +1,4 @@
+import DropdownSelect from './DropdownSelect';
+export { CustomSelectButton } from './DropdownSelect';
+export type { DropdownSelectItem } from './DropdownSelect';
+export default DropdownSelect;

package/ui/Elements/DropdownSelect/index.js

@@ -0,0 +1,3 @@
+import DropdownSelect from './DropdownSelect';
+export { CustomSelectButton } from './DropdownSelect';
+export default DropdownSelect;

package/ui/Elements/HighlightBox/HighlightBox.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+export type FlagAppearanceType = 'neutralBold' | 'neutralSubtle' | 'blueBold' | 'blueSubtle' | 'tealBold' | 'tealSubtle' | 'greenBold' | 'greenSubtle' | 'orangeBold' | 'orangeSubtle' | 'yellowBold' | 'yellowSubtle' | 'pinkBold' | 'pinkSubtle' | 'purpleBold' | 'purpleSubtle' | 'redBold' | 'redSubtle';
+export declare const flagAppearanceToColorMap: {
+    neutralBold: string;
+    neutralSubtle: string;
+    blueBold: string;
+    blueSubtle: string;
+    tealBold: string;
+    tealSubtle: string;
+    greenBold: string;
+    greenSubtle: string;
+    orangeBold: string;
+    orangeSubtle: string;
+    yellowBold: string;
+    yellowSubtle: string;
+    pinkBold: string;
+    pinkSubtle: string;
+    purpleBold: string;
+    purpleSubtle: string;
+    redBold: string;
+    redSubtle: string;
+};
+export declare const flagAppearanceToFontColorMap: {
+    neutralBold: string;
+    neutralSubtle: string;
+    blueBold: string;
+    blueSubtle: string;
+    tealBold: string;
+    tealSubtle: string;
+    greenBold: string;
+    greenSubtle: string;
+    orangeBold: string;
+    orangeSubtle: string;
+    yellowBold: string;
+    yellowSubtle: string;
+    pinkBold: string;
+    pinkSubtle: string;
+    purpleBold: string;
+    purpleSubtle: string;
+    redBold: string;
+    redSubtle: string;
+};
+type HighlightBoxType = {
+    children: React.ReactNode;
+    appearance: FlagAppearanceType;
+    size?: 'default' | 'small' | 'wide' | 'fitContent';
+    prefix?: string;
+};
+declare const HighlightBox: ({ children, appearance, size, prefix }: HighlightBoxType) => JSX.Element;
+export default HighlightBox;

package/ui/Elements/HighlightBox/HighlightBox.js

@@ -0,0 +1,65 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled, { useTheme } from '@xstyled/styled-components';
+import { th } from '@xstyled/system';
+var StyledHighlightBox = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: flex-start;\n  border-radius: ml;\n  font-size: 12px;\n  text-align: center;\n  line-height: 19.2px;\n  min-width: 0;\n  font-weight: semiBold;\n  .default {\n    height: 24px;\n    padding: 2px 8px;\n  }\n  .small {\n    height: 18px;\n    padding: 1px 6px;\n  }\n  .wide {\n    height: 2.75em;\n    display: flex;\n    flex-flow: row wrap;\n    width: 11rem;\n    align-content: center;\n    line-height: 14px;\n    padding: 0.5px 12px;\n  }\n  .fitContent {\n    width: fit-content;\n    height: auto;\n    padding: 4px 5px;\n    font-size: 13px;\n    line-height: 15px;\n    font-weight: 400;\n  }\n  background-color: ", ";\n  color: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: flex-start;\n  border-radius: ml;\n  font-size: 12px;\n  text-align: center;\n  line-height: 19.2px;\n  min-width: 0;\n  font-weight: semiBold;\n  .default {\n    height: 24px;\n    padding: 2px 8px;\n  }\n  .small {\n    height: 18px;\n    padding: 1px 6px;\n  }\n  .wide {\n    height: 2.75em;\n    display: flex;\n    flex-flow: row wrap;\n    width: 11rem;\n    align-content: center;\n    line-height: 14px;\n    padding: 0.5px 12px;\n  }\n  .fitContent {\n    width: fit-content;\n    height: auto;\n    padding: 4px 5px;\n    font-size: 13px;\n    line-height: 15px;\n    font-weight: 400;\n  }\n  background-color: ", ";\n  color: ", ";\n"])), function (_a) {
+    var $bgcolor = _a.$bgcolor;
+    return $bgcolor;
+}, function (_a) {
+    var $fontColor = _a.$fontColor;
+    return $fontColor;
+});
+var OverflowWrap = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  text-overflow: ellipsis;\n  overflow: hidden;\n"], ["\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
+export var flagAppearanceToColorMap = {
+    neutralBold: 'neutral300',
+    neutralSubtle: 'neutral20',
+    blueBold: 'blue70',
+    blueSubtle: 'blue20',
+    tealBold: 'teal60',
+    tealSubtle: 'teal20',
+    greenBold: 'green60',
+    greenSubtle: 'green20',
+    orangeBold: 'orange60',
+    orangeSubtle: 'orange20',
+    yellowBold: 'yellow60',
+    yellowSubtle: 'yellow20',
+    pinkBold: 'magenta60',
+    pinkSubtle: 'magenta20',
+    purpleBold: 'purple60',
+    purpleSubtle: 'purple20',
+    redBold: 'red60',
+    redSubtle: 'red20',
+};
+export var flagAppearanceToFontColorMap = {
+    neutralBold: 'white',
+    neutralSubtle: 'typoPrimary',
+    blueBold: 'white',
+    blueSubtle: 'blue80',
+    tealBold: 'white',
+    tealSubtle: 'teal90',
+    greenBold: 'white',
+    greenSubtle: 'green80',
+    orangeBold: 'white',
+    orangeSubtle: 'orange80',
+    yellowBold: 'typoPrimary',
+    yellowSubtle: 'typoPrimary',
+    pinkBold: 'white',
+    pinkSubtle: 'magenta80',
+    purpleBold: 'white',
+    purpleSubtle: 'purple80',
+    redBold: 'white',
+    redSubtle: 'red80',
+};
+var HighlightBox = function (_a) {
+    var children = _a.children, appearance = _a.appearance, _b = _a.size, size = _b === void 0 ? 'default' : _b, prefix = _a.prefix;
+    var theme = useTheme();
+    var bgColor = th.color(appearance ? flagAppearanceToColorMap[appearance] : 'transparent')({ theme: theme });
+    var fontColor = th.color(appearance ? flagAppearanceToFontColorMap[appearance] : 'typoPrimary')({ theme: theme });
+    var name = !!prefix ? "".concat(prefix, "Label") : 'label';
+    return (_jsx(StyledHighlightBox, { "$bgcolor": bgColor, "$fontColor": fontColor, "data-cy": name, children: _jsx(OverflowWrap, { className: size, children: children }) }));
+};
+export default HighlightBox;
+var templateObject_1, templateObject_2;

package/ui/Elements/HighlightBox/index.d.ts

@@ -0,0 +1,2 @@
+import HighlightBox from './HighlightBox';
+export default HighlightBox;

package/ui/Elements/HighlightBox/index.js

@@ -0,0 +1,2 @@
+import HighlightBox from './HighlightBox';
+export default HighlightBox;

package/ui/Elements/Icon/icons/Company.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from '../types';
+import { FC } from 'react';
+export declare const Company: FC<SvgProps>;

package/ui/Elements/Icon/icons/Company.js

@@ -0,0 +1,13 @@
+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";
+export var Company = function (props) { return (_jsxs("svg", __assign({ width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, props, { children: [_jsxs("g", { clipPath: "url(#clip0_1076_22920)", children: [_jsx("path", { d: "M14.0003 14.6663H5.66699C4.01014 14.6663 2.66699 13.3232 2.66699 11.6663V4.33301C2.66699 2.67615 4.01014 1.33301 5.66699 1.33301H11.0401C12.675 1.33301 14.0003 2.65834 14.0003 4.29323V4.29323V14.6663Z", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("rect", { x: "6", y: "10", width: "4.66667", height: "4.66667", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M5.16699 7.38867H7.00033", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M9.55566 7.38867H11.389", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M5.16699 5.55566H7.00033", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M9.55566 5.55566H11.389", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M5.16699 3.72168H7.00033", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M9.55566 3.72168H11.389", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_1076_22920", children: _jsx("rect", { width: "16", height: "16", fill: "white" }) }) })] }))); };

package/ui/Elements/Icon/icons/Integrations.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from '../types';
+import { FC } from 'react';
+export declare const Integrations: FC<SvgProps>;

package/ui/Elements/Icon/icons/Integrations.js

@@ -0,0 +1,13 @@
+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 } from "react/jsx-runtime";
+export var Integrations = function (props) { return (_jsx("svg", __assign({ width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, props, { children: _jsx("path", { d: "M7.33301 2.66683C7.33301 1.93045 7.92994 1.3335 8.66634 1.3335C9.40274 1.3335 9.99967 1.93045 9.99967 2.66683V3.3335C9.99967 3.70168 10.2981 4.00016 10.6663 4.00016H12.6663C13.0345 4.00016 13.333 4.29864 13.333 4.66683V6.66683C13.333 7.03503 13.0345 7.3335 12.6663 7.3335H11.9997C11.2633 7.3335 10.6663 7.93043 10.6663 8.66683C10.6663 9.40323 11.2633 10.0002 11.9997 10.0002H12.6663C13.0345 10.0002 13.333 10.2986 13.333 10.6668V12.6668C13.333 13.035 13.0345 13.3335 12.6663 13.3335H10.6663C10.2981 13.3335 9.99967 13.035 9.99967 12.6668V12.0002C9.99967 11.2638 9.40274 10.6668 8.66634 10.6668C7.92994 10.6668 7.33301 11.2638 7.33301 12.0002V12.6668C7.33301 13.035 7.03454 13.3335 6.66634 13.3335H4.66634C4.29815 13.3335 3.99967 13.035 3.99967 12.6668V10.6668C3.99967 10.2986 3.70119 10.0002 3.33301 10.0002H2.66634C1.92996 10.0002 1.33301 9.40323 1.33301 8.66683C1.33301 7.93043 1.92996 7.3335 2.66634 7.3335H3.33301C3.70119 7.3335 3.99967 7.03503 3.99967 6.66683V4.66683C3.99967 4.29864 4.29815 4.00016 4.66634 4.00016H6.66634C7.03454 4.00016 7.33301 3.70168 7.33301 3.3335V2.66683Z", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }))); };

package/ui/Elements/Icon/icons/ShoppingBag.d.ts

@@ -0,0 +1,3 @@
+import { type FC } from 'react';
+import { SvgProps } from '../types';
+export declare const ShoppingBag: FC<SvgProps>;

package/ui/Elements/Icon/icons/ShoppingBag.js

@@ -0,0 +1,13 @@
+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 } from "react/jsx-runtime";
+export var ShoppingBag = function (props) { return (_jsx("svg", __assign({ width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, props, { children: _jsx("path", { d: "M10.667 7.33333V4.66667C10.667 3.19391 9.47306 2 8.00033 2C6.52757 2 5.33366 3.19391 5.33366 4.66667V7.33333M3.33366 6H12.667L13.3337 14H2.66699L3.33366 6Z", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }))); };

package/ui/Elements/Icon/icons/Truck.d.ts

@@ -0,0 +1,3 @@
+import { type FC } from 'react';
+import { SvgProps } from '../types';
+export declare const Truck: FC<SvgProps>;

package/ui/Elements/Icon/icons/Truck.js

@@ -0,0 +1,13 @@
+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";
+export var Truck = function (props) { return (_jsxs("svg", __assign({ width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, props, { children: [_jsxs("g", { clipPath: "url(#clip0_1076_22693)", children: [_jsx("path", { d: "M5.33268 13.6663C6.25316 13.6663 6.99935 12.9201 6.99935 11.9997C6.99935 11.0792 6.25316 10.333 5.33268 10.333C4.41221 10.333 3.66602 11.0792 3.66602 11.9997C3.66602 12.9201 4.41221 13.6663 5.33268 13.6663Z", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M12.6667 13.6663C13.5871 13.6663 14.3333 12.9201 14.3333 11.9997C14.3333 11.0792 13.5871 10.333 12.6667 10.333C11.7462 10.333 11 11.0792 11 11.9997C11 12.9201 11.7462 13.6663 12.6667 13.6663Z", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M5.66602 8.99967V2.33301H15.666V11.6663", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M0.333008 12.3333V7.66667C0.333008 6.20067 1.53367 5 2.99967 5H5.66634", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M8.33301 11.666H9.66634", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M0.333008 12.333H2.33301", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M2.66602 9.33301V8.08301C2.66602 7.67051 3.00402 7.33301 3.41602 7.33301H4.66602", strokeWidth: "1.5", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_1076_22693", children: _jsx("rect", { width: "16", height: "16", fill: "white" }) }) })] }))); };

package/ui/Elements/Icon/icons/TwoUsers.d.ts

@@ -0,0 +1,3 @@
+import { type FC } from 'react';
+import { SvgProps } from '../types';
+export declare const TwoUsers: FC<SvgProps>;

package/ui/Elements/Icon/icons/TwoUsers.js

@@ -0,0 +1,13 @@
+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";
+export var TwoUsers = function (props) { return (_jsxs("svg", __assign({ width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, props, { children: [_jsx("path", { d: "M10.6797 7.27588C11.8937 7.27588 12.8777 6.29188 12.8777 5.07788C12.8777 3.86455 11.8937 2.87988 10.6797 2.87988", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M11.6904 9.66406C12.0531 9.68873 12.4131 9.74073 12.7684 9.8194C13.2611 9.9174 13.8544 10.1194 14.0651 10.5614C14.1998 10.8447 14.1998 11.1747 14.0651 11.4581C13.8551 11.9001 13.2611 12.1021 12.7684 12.2034", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.39465 10.1377C8.85463 10.1377 10.956 10.5104 10.956 11.999C10.956 13.4884 8.86796 13.8737 6.39465 13.8737C3.93465 13.8737 1.83398 13.5017 1.83398 12.0124C1.83398 10.523 3.92132 10.1377 6.39465 10.1377Z", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.39435 8.013C4.77168 8.013 3.47168 6.71233 3.47168 5.08966C3.47168 3.46766 4.77168 2.16699 6.39435 2.16699C8.01701 2.16699 9.31768 3.46766 9.31768 5.08966C9.31768 6.71233 8.01701 8.013 6.39435 8.013Z", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }))); };

package/ui/Elements/Icon/icons/index.d.ts

@@ -48,3 +48,8 @@ export { Calendar } from './Calendar';
 export { QRCode } from './QRCode';
 export { Rows } from './Rows';
 export { Group } from './Group';
+export { Company } from './Company';
+export { ShoppingBag } from './ShoppingBag';
+export { Truck } from './Truck';
+export { TwoUsers } from './TwoUsers';
+export { Integrations } from './Integrations';

package/ui/Elements/Icon/icons/index.js

@@ -48,3 +48,8 @@ export { Calendar } from './Calendar';
 export { QRCode } from './QRCode';
 export { Rows } from './Rows';
 export { Group } from './Group';
+export { Company } from './Company';
+export { ShoppingBag } from './ShoppingBag';
+export { Truck } from './Truck';
+export { TwoUsers } from './TwoUsers';
+export { Integrations } from './Integrations';

package/ui/Elements/MultiSelect/MultiSelect.d.ts

@@ -0,0 +1,6 @@
+import { SelectProps } from '../Select/types';
+type Props = {
+    checkAllButton?: boolean;
+} & Omit<SelectProps, 'isMulti'>;
+declare const SelectFilter: ({ checkAllButton, ...restProps }: Props) => JSX.Element;
+export default SelectFilter;

package/ui/Elements/MultiSelect/MultiSelect.js

@@ -0,0 +1,29 @@
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import Select from '../Select';
+var SelectFilter = function (_a) {
+    var checkAllButton = _a.checkAllButton, restProps = __rest(_a, ["checkAllButton"]);
+    return (_jsx(Select, __assign({}, restProps, { optionVariant: "checkbox", multiLabelVariant: "count", isMulti: true, showSelectAllButton: checkAllButton })));
+};
+export default SelectFilter;

package/ui/Elements/MultiSelect/index.d.ts

@@ -0,0 +1,2 @@
+import MultiSelect from './MultiSelect';
+export default MultiSelect;

package/ui/Elements/MultiSelect/index.js

@@ -0,0 +1,2 @@
+import MultiSelect from './MultiSelect';
+export default MultiSelect;

package/ui/Elements/Pagination/Pagination.d.ts

@@ -1,8 +1,9 @@
 export type Props = {
     page?: number;
     itemCount?: number;
-    itemPerPage?: number;
-    onPageChange?: (number: number) => void;
+    itemPerPage: number;
+    onPageChange?: (number: number, rows: number) => void;
+    customPaginationHandler?: (page: number, rows: number) => void;
 };
-declare const Pagination: ({ onPageChange, itemPerPage, itemCount, page }: Props) => JSX.Element;
+declare const Pagination: ({ onPageChange, itemPerPage, itemCount, page, customPaginationHandler }: Props) => JSX.Element;
 export default Pagination;

package/ui/Elements/Pagination/Pagination.js

@@ -2,12 +2,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo } from 'react';
 import { Btn, GoIcon, Wrapper, PageBtn, DotsWrapper } from './styled';
 var Pagination = function (_a) {
-    var onPageChange = _a.onPageChange, itemPerPage = _a.itemPerPage, itemCount = _a.itemCount, page = _a.page;
+    var onPageChange = _a.onPageChange, itemPerPage = _a.itemPerPage, itemCount = _a.itemCount, page = _a.page, customPaginationHandler = _a.customPaginationHandler;
     var setPage = useCallback(function (number) { return function () {
+        if (customPaginationHandler) {
+            customPaginationHandler(number, itemPerPage);
+            return;
+        }
         if (onPageChange) {
-            onPageChange(number);
+            onPageChange(number, itemPerPage);
         }
-    }; }, [onPageChange]);
+    }; }, [itemPerPage, onPageChange, customPaginationHandler]);
     var pageX = page !== null && page !== void 0 ? page : 1;
     var pageCount = Math.max(Math.ceil((itemCount !== null && itemCount !== void 0 ? itemCount : 0) / (itemPerPage !== null && itemPerPage !== void 0 ? itemPerPage : 3)), 1);
     var arrayOfPages = useMemo(function () {
@@ -25,6 +29,10 @@ var Pagination = function (_a) {
         else if (pageX > pageCount - 4) {
             return pageNumbers.slice(pageCount - 5, pageCount - 1);
         }
+        else if (window.innerWidth < 768) {
+            // display dispersion of 1 chars from current page (part between dots)
+            return pageNumbers.slice(pageX - 2, pageX + 1);
+        }
         else {
             // display dispersion of 2 chars from current page (part between dots)
             return pageNumbers.slice(pageX - 3, pageX + 2);