@mailstep/design-system 0.4.21 → 0.5.0-beta.10

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    font-weight: bold;\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    font-weight: bold;\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/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/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

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

package/ui/Elements/Pagination/Pagination.js

@@ -5,9 +5,9 @@ var Pagination = function (_a) {
     var onPageChange = _a.onPageChange, itemPerPage = _a.itemPerPage, itemCount = _a.itemCount, page = _a.page;
     var setPage = useCallback(function (number) { return function () {
         if (onPageChange) {
-            onPageChange(number);
+            onPageChange(number, itemPerPage);
         }
-    }; }, [onPageChange]);
+    }; }, [itemPerPage, onPageChange]);
     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 +25,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);

package/ui/Elements/Pagination/styled.js

@@ -3,9 +3,9 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import styled, { x } from '@xstyled/styled-components';
-import { th } from '@xstyled/styled-components';
-import { Icon } from '../Icon';
-export var Wrapper = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n\n  & > *:not(:last-child) {\n    margin-right: 4px;\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n\n  & > *:not(:last-child) {\n    margin-right: 4px;\n  }\n"])));
+import { th } from '@xstyled/system';
+import Icon from '../Icon';
+export var Wrapper = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n\n  & > *:not(:last-child) {\n    margin-right: 1px;\n    @media (min-width: 1024px) {\n      margin-right: 4px;\n    }\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n\n  & > *:not(:last-child) {\n    margin-right: 1px;\n    @media (min-width: 1024px) {\n      margin-right: 4px;\n    }\n  }\n"])));
 export var Btn = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: transparent;\n  border: none;\n  cursor: ", ";\n  opacity: ", ";\n"], ["\n  background-color: transparent;\n  border: none;\n  cursor: ", ";\n  opacity: ", ";\n"])), function (_a) {
     var disabled = _a.disabled;
     return (disabled ? 'default' : 'pointer');
@@ -13,14 +13,14 @@ export var Btn = styled.button(templateObject_2 || (templateObject_2 = __makeTem
     var disabled = _a.disabled;
     return (disabled ? 0 : 1);
 });
-export var ArrowIcon = styled(Icon)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 50%;\n  aspect-ratio: 1 / 1;\n  width: 16px;\n  display: flex;\n  align-items: center;\n  color: gray1;\n\n  &:hover {\n    color: blue2;\n  }\n"], ["\n  border-radius: 50%;\n  aspect-ratio: 1 / 1;\n  width: 16px;\n  display: flex;\n  align-items: center;\n  color: gray1;\n\n  &:hover {\n    color: blue2;\n  }\n"])));
-export var GoIcon = styled(ArrowIcon)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 0 8px;\n  font-size: 11px;\n  & > svg {\n    width: 10px;\n  }\n"], ["\n  margin: 0 8px;\n  font-size: 11px;\n  & > svg {\n    width: 10px;\n  }\n"])));
+export var ArrowIcon = styled(Icon)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-radius: 50%;\n  aspect-ratio: 1 / 1;\n  width: 16px;\n  display: flex;\n  align-items: center;\n  color: blue2;\n\n  &:hover {\n    color: blue2;\n  }\n"], ["\n  border-radius: 50%;\n  aspect-ratio: 1 / 1;\n  width: 16px;\n  display: flex;\n  align-items: center;\n  color: blue2;\n\n  &:hover {\n    color: blue2;\n  }\n"])));
+export var GoIcon = styled(ArrowIcon)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 0 8px;\n  font-size: 12px;\n  & > svg {\n    width: 10px;\n  }\n"], ["\n  margin: 0 8px;\n  font-size: 12px;\n  & > svg {\n    width: 10px;\n  }\n"])));
 export var DotsWrapper = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  color: gray1;\n"], ["\n  color: gray1;\n"])));
 export var PageBtn = styled.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  height: 18px;\n  min-width: 18px;\n  display: flex;\n  border-radius: 50%;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  margin: 0 4px;\n  color: ", ";\n  font-size: 14px;\n  font-weight: ", ";\n  font-family: ", ";\n  line-height: 1em;\n\n  &:hover {\n    color: blue2;\n  }\n"], ["\n  height: 18px;\n  min-width: 18px;\n  display: flex;\n  border-radius: 50%;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  margin: 0 4px;\n  color: ", ";\n  font-size: 14px;\n  font-weight: ", ";\n  font-family: ", ";\n  line-height: 1em;\n\n  &:hover {\n    color: blue2;\n  }\n"])), function (_a) {
     var isCurrent = _a.isCurrent;
     return (isCurrent ? th.color('red1') : th.color('gray1'));
 }, function (_a) {
     var isCurrent = _a.isCurrent;
-    return (isCurrent ? th.fontWeight('semiBold') : th.fontWeight('medium'));
+    return (isCurrent ? th.fontWeight('semiBold') : th.fontWeight('normal'));
 }, th('fonts.primary'));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/ui/Elements/Select/Select.d.ts

@@ -0,0 +1,3 @@
+import { SelectProps } from './types';
+declare const Select: ({ label, name, value, options, defaultOptions, loadOptions, onChange, onBlur, error, isInvalid, isLoading, isDarkPlaceholderText, spaceAround, disabled, onInputChange, isSearchable, isMulti, className, useSimplifiedOptions, showSelectAllButton, showResetGridButton, style, optionVariant, multiLabelVariant, containerVariant, placeholder, placeholderIcon, innerRef, maxMenuHeight, getOptionValue, resetGrid, ...passTroughProps }: SelectProps) => JSX.Element;
+export default Select;

package/ui/Elements/Select/Select.js

@@ -0,0 +1,69 @@
+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 } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
+import { Wrapper, StyledReactSelect, StyledAsyncSelect } from './styles';
+import { useStylesAndComponents } from './themes';
+import { useTheme } from '@xstyled/styled-components';
+import { t } from '@lingui/macro';
+import SpaceAroundWrap from '../SpaceAround';
+import { FieldLabel } from '../Label';
+import { ErrorMessage } from '../ErrorMessage';
+var emptyOptions = [];
+var noOptionsMessage = function () { return t({ id: 'select.noOptions', message: 'no options' }); };
+var loadingMessage = function () { return t({ id: 'components.dropdown.loading', message: 'Loading...' }); };
+var Select = function (_a) {
+    var label = _a.label, name = _a.name, _b = _a.value, value = _b === void 0 ? '' : _b, _c = _a.options, options = _c === void 0 ? emptyOptions : _c, defaultOptions = _a.defaultOptions, loadOptions = _a.loadOptions, onChange = _a.onChange, onBlur = _a.onBlur, error = _a.error, isInvalid = _a.isInvalid, isLoading = _a.isLoading, isDarkPlaceholderText = _a.isDarkPlaceholderText, _d = _a.spaceAround, spaceAround = _d === void 0 ? false : _d, disabled = _a.disabled, onInputChange = _a.onInputChange, isSearchable = _a.isSearchable, isMulti = _a.isMulti, className = _a.className, _e = _a.useSimplifiedOptions, useSimplifiedOptions = _e === void 0 ? false : _e, _f = _a.showSelectAllButton, showSelectAllButton = _f === void 0 ? false : _f, _g = _a.showResetGridButton, showResetGridButton = _g === void 0 ? false : _g, style = _a.style, optionVariant = _a.optionVariant, multiLabelVariant = _a.multiLabelVariant, containerVariant = _a.containerVariant, placeholder = _a.placeholder, placeholderIcon = _a.placeholderIcon, innerRef = _a.innerRef, maxMenuHeight = _a.maxMenuHeight, getOptionValue = _a.getOptionValue, resetGrid = _a.resetGrid, passTroughProps = __rest(_a, ["label", "name", "value", "options", "defaultOptions", "loadOptions", "onChange", "onBlur", "error", "isInvalid", "isLoading", "isDarkPlaceholderText", "spaceAround", "disabled", "onInputChange", "isSearchable", "isMulti", "className", "useSimplifiedOptions", "showSelectAllButton", "showResetGridButton", "style", "optionVariant", "multiLabelVariant", "containerVariant", "placeholder", "placeholderIcon", "innerRef", "maxMenuHeight", "getOptionValue", "resetGrid"]);
+    var isAsync = !!loadOptions;
+    if (showSelectAllButton && (loadOptions || !isMulti)) {
+        console.error('CheckboxSelect incompatible props');
+    }
+    var setAllOptions = useCallback(function () {
+        onChange === null || onChange === void 0 ? void 0 : onChange((options || []));
+    }, [onChange, options]);
+    var unsetAllOptions = useCallback(function () {
+        if (typeof onChange === 'function') {
+            onChange === null || onChange === void 0 ? void 0 : onChange(emptyOptions);
+        }
+    }, [onChange]);
+    var icon = containerVariant === 'search' ? 'search' : placeholderIcon ? placeholderIcon : undefined;
+    var modifiedMaxMenuHeight = showResetGridButton && showSelectAllButton && maxMenuHeight ? maxMenuHeight - 30 : maxMenuHeight;
+    var _h = useStylesAndComponents(style, optionVariant, multiLabelVariant, containerVariant, useSimplifiedOptions, showSelectAllButton, showResetGridButton), customComponents = _h[0], customTheme = _h[1], customStyles = _h[2];
+    var RenderComponent = isAsync ? StyledAsyncSelect : StyledReactSelect;
+    var selectedOption;
+    var localGetOptionValue = useMemo(function () { return getOptionValue || (function (option) { return option === null || option === void 0 ? void 0 : option.value; }); }, [getOptionValue]);
+    if (Array.isArray(value)) {
+        selectedOption = (defaultOptions || options).filter(function (option) { return value.includes(localGetOptionValue(option)); });
+        selectedOption = (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.length) ? selectedOption : null;
+    }
+    else if (value !== undefined) {
+        selectedOption = (defaultOptions || options).find(function (option) { return localGetOptionValue(option) === value; }) || null;
+    }
+    var theme = useTheme();
+    // strip extra params
+    var handleLoadOptions = useMemo(function () {
+        return loadOptions ? function (fulltext) { return loadOptions(fulltext); } : undefined;
+    }, [loadOptions]);
+    return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, className: className, children: [_jsxs(Wrapper, { children: [label && _jsx(FieldLabel, { htmlFor: name, children: label }), _jsx(RenderComponent, __assign({ id: name, name: name, options: options, loadOptions: handleLoadOptions, defaultOptions: defaultOptions, value: selectedOption, onChange: onChange, onBlur: onBlur, isDisabled: disabled || isLoading, isLoading: isLoading, isInvalid: isInvalid !== undefined ? isInvalid : !!error, isDarkPlaceholderText: isDarkPlaceholderText, placeholder: placeholder || t({ id: 'components.dropdown.placeholder', message: 'Select...' }), styles: customStyles, theme: customTheme, icon: icon, hideSelectedOptions: !!(isMulti && multiLabelVariant != 'count'), onInputChange: onInputChange, isSearchable: isAsync || isSearchable, isMulti: isMulti, classNamePrefix: "react-select", components: customComponents, closeMenuOnSelect: isMulti ? false : undefined }, passTroughProps, { ref: innerRef, tabIndex: null, systemTheme: theme, resetGrid: resetGrid, onCustomSelectAll: setAllOptions, onCustomDeselectAll: unsetAllOptions, selectAllButton: showSelectAllButton, resetGridButton: showResetGridButton, maxMenuHeight: modifiedMaxMenuHeight, getOptionValue: getOptionValue, noOptionsMessage: noOptionsMessage, loadingMessage: loadingMessage }))] }), error && _jsx(ErrorMessage, { children: error })] }));
+};
+export default Select;

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

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

package/ui/Elements/Select/index.js

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

package/ui/Elements/Select/styles.d.ts

@@ -0,0 +1,5 @@
+import ReactSelect from 'react-select';
+import AsyncSelect from 'react-select/async';
+export declare const Wrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const StyledReactSelect: import("styled-components").StyledComponent<ReactSelect, import("@xstyled/system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, never>;
+export declare const StyledAsyncSelect: import("styled-components").StyledComponent<AsyncSelect, import("@xstyled/system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, never>;

package/ui/Elements/Select/styles.js

@@ -0,0 +1,12 @@
+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';
+import ReactSelect from 'react-select';
+import AsyncSelect from 'react-select/async';
+import { system } from '@xstyled/system';
+export var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+export var StyledReactSelect = styled(ReactSelect)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n  font-size: 14px;\n"], ["\n  ", ";\n  font-size: 14px;\n"])), system);
+export var StyledAsyncSelect = styled(AsyncSelect)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n  font-size: 14px;\n"], ["\n  ", ";\n  font-size: 14px;\n"])), system);
+var templateObject_1, templateObject_2, templateObject_3;

package/ui/Elements/Select/themes/CustomComponents.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare const SimplifiedOption: React.MemoExoticComponent<(props: any) => any>;
+export declare const IconValueContainer: (props: any) => any;
+export declare const CountMultiValue: (props: any) => any;
+export declare const ChevronOption: (props: any) => any;
+export declare const HighlightOption: (props: any) => any;
+export declare const ConnectedMenu: (props: any) => any;
+export declare const CustomInput: (props: any) => any;
+export declare const DropdownIndicator: (props: any) => any;