@mailstep/design-system 0.6.2-beta.3 → 0.6.2-beta.5

package/ui/Elements/Link/Link.js

@@ -1,4 +1,3 @@
-"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
@@ -14,38 +13,14 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_router_dom_1 = require("react-router-dom");
-var styled_components_1 = __importStar(require("@xstyled/styled-components"));
-var styled_components_2 = require("@xstyled/styled-components");
-var utils_1 = require("../../utils");
-var StyledLink = (0, styled_components_1.default)(react_router_dom_1.NavLink)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n  cursor: pointer;\n  :visited {\n    color: ", ";\n  }\n  :hover {\n    color: ", ";\n  }\n  :active {\n    color: ", ";\n  }\n  :focus {\n    outline: none;\n  }\n  font-family: ", ";\n  font-size: ", ";\n\n  ", "\n"], ["\n  color: ", ";\n  cursor: pointer;\n  :visited {\n    color: ", ";\n  }\n  :hover {\n    color: ", ";\n  }\n  :active {\n    color: ", ";\n  }\n  :focus {\n    outline: none;\n  }\n  font-family: ", ";\n  font-size: ", ";\n\n  ", "\n"])), function (_a) {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NavLink as ReactLink } from 'react-router-dom';
+import styled, { css, useTheme } from '@xstyled/styled-components';
+import { th } from '@xstyled/styled-components';
+import { createRgba } from '../../utils/index.js';
+var StyledLink = styled(ReactLink)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n  cursor: pointer;\n  :visited {\n    color: ", ";\n  }\n  :hover {\n    color: ", ";\n  }\n  :active {\n    color: ", ";\n  }\n  :focus {\n    outline: none;\n  }\n  font-family: ", ";\n  font-size: ", ";\n\n  ", "\n"], ["\n  color: ", ";\n  cursor: pointer;\n  :visited {\n    color: ", ";\n  }\n  :hover {\n    color: ", ";\n  }\n  :active {\n    color: ", ";\n  }\n  :focus {\n    outline: none;\n  }\n  font-family: ", ";\n  font-size: ", ";\n\n  ", "\n"])), function (_a) {
     var color = _a.color;
-    return (0, utils_1.createRgba)(color, 0.7);
+    return createRgba(color, 0.7);
 }, function (_a) {
     var color = _a.color;
     return color;
@@ -55,19 +30,19 @@ var StyledLink = (0, styled_components_1.default)(react_router_dom_1.NavLink)(te
 }, function (_a) {
     var color = _a.color;
     return color;
-}, (0, styled_components_2.th)('fonts.primary'), function (_a) {
+}, th('fonts.primary'), function (_a) {
     var size = _a.size;
     return size;
 }, function (_a) {
     var disabled = _a.disabled;
     return disabled
-        ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          pointer-events: none;\n          opacity: 0.5;\n        "], ["\n          pointer-events: none;\n          opacity: 0.5;\n        "]))) : null;
+        ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          pointer-events: none;\n          opacity: 0.5;\n        "], ["\n          pointer-events: none;\n          opacity: 0.5;\n        "]))) : null;
 });
 var Link = function (props) {
-    var theme = (0, styled_components_1.useTheme)();
-    var themeColor = props.color ? styled_components_2.th.color(props.color)({ theme: theme }) : undefined;
-    var themeFontSize = styled_components_2.th.fontSize(props.size)({ theme: theme });
-    return ((0, jsx_runtime_1.jsx)(StyledLink, __assign({}, props, { color: themeColor, size: themeFontSize, children: props.children })));
+    var theme = useTheme();
+    var themeColor = props.color ? th.color(props.color)({ theme: theme }) : undefined;
+    var themeFontSize = th.fontSize(props.size)({ theme: theme });
+    return (_jsx(StyledLink, __assign({}, props, { color: themeColor, size: themeFontSize, children: props.children })));
 };
 Link.defaultProps = {
     to: '',
@@ -77,5 +52,5 @@ Link.defaultProps = {
     padding: '0',
     replace: false,
 };
-exports.default = Link;
+export default Link;
 var templateObject_1, templateObject_2;

package/ui/Elements/Link/index.js

@@ -1,9 +1,3 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Link = void 0;
-var Link_1 = __importDefault(require("./Link"));
-exports.Link = Link_1.default;
-exports.default = Link_1.default;
+import Link from './Link.js';
+export { Link };
+export default Link;

package/ui/Elements/Link/stories/Link.stories.js

@@ -1,16 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Size7 = exports.Size5 = exports.Size3 = exports.Disabled = exports.Warning = exports.Success = exports.External = void 0;
-var __1 = require("../");
+import { Link } from '../index.js';
 var meta = {
     title: 'Elements/Link',
-    component: __1.Link,
+    component: Link,
     tags: ['autodocs'],
     argTypes: {},
     decorators: [],
 };
-exports.default = meta;
-exports.External = {
+export default meta;
+export var External = {
     args: {
         to: { pathname: 'https://www.inventi.cz/' },
         size: 1,
@@ -18,7 +15,7 @@ exports.External = {
         children: "This is a link",
     },
 };
-exports.Success = {
+export var Success = {
     args: {
         to: { pathname: 'https://www.inventi.cz/' },
         size: 1,
@@ -26,7 +23,7 @@ exports.Success = {
         children: "This is a link",
     },
 };
-exports.Warning = {
+export var Warning = {
     args: {
         to: { pathname: 'https://www.inventi.cz/' },
         size: 1,
@@ -34,7 +31,7 @@ exports.Warning = {
         children: "This is a link",
     },
 };
-exports.Disabled = {
+export var Disabled = {
     args: {
         to: { pathname: 'https://www.inventi.cz/' },
         size: 1,
@@ -43,21 +40,21 @@ exports.Disabled = {
         children: "This is a link",
     },
 };
-exports.Size3 = {
+export var Size3 = {
     args: {
         to: { pathname: 'https://www.inventi.cz/' },
         size: 3,
         children: "This is a link",
     },
 };
-exports.Size5 = {
+export var Size5 = {
     args: {
         to: { pathname: 'https://www.inventi.cz/' },
         size: 5,
         children: "This is a link",
     },
 };
-exports.Size7 = {
+export var Size7 = {
     args: {
         to: { pathname: 'https://www.inventi.cz/' },
         size: 7,

package/ui/Elements/Logo/Logo.js

@@ -1,4 +1,3 @@
-"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
@@ -25,22 +24,18 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styled_components_1 = __importDefault(require("@xstyled/styled-components"));
-var logo_white_png_1 = __importDefault(require("./assets/mailship/logo_white.png"));
-var logo_black_png_1 = __importDefault(require("./assets/mailship/logo_black.png"));
-var logo_m_png_1 = __importDefault(require("./assets/mailship/logo_m.png"));
-var mailship_logo_svg_1 = __importDefault(require("./assets/mailship/mailship-logo.svg"));
-var mailstep_black_svg_1 = __importDefault(require("./assets/mailstep/mailstep_black.svg"));
-var mailstep_white_svg_1 = __importDefault(require("./assets/mailstep/mailstep_white.svg"));
-var mailwiseLogo_svg_1 = __importDefault(require("./assets/mailwise/mailwiseLogo.svg"));
-var mailwiseLogoSmall_svg_1 = __importDefault(require("./assets/mailwise/mailwiseLogoSmall.svg"));
-var mailwrapLogo_svg_1 = __importDefault(require("./assets/mailwrap/mailwrapLogo.svg"));
-var mailstock_svg_1 = __importDefault(require("./assets/mailstock/mailstock.svg"));
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from '@xstyled/styled-components';
+import logoWhiteImage from './assets/mailship/logo_white.png';
+import logoBlackImage from './assets/mailship/logo_black.png';
+import logoMImage from './assets/mailship/logo_m.png';
+import logoSvg from './assets/mailship/mailship-logo.svg';
+import logoMailstepBlack from './assets/mailstep/mailstep_black.svg';
+import logoMailstepWhite from './assets/mailstep/mailstep_white.svg';
+import logoMailwise from './assets/mailwise/mailwiseLogo.svg';
+import logoMailwiseSmall from './assets/mailwise/mailwiseLogoSmall.svg';
+import logoMailwrap from './assets/mailwrap/mailwrapLogo.svg';
+import logoMailstock from './assets/mailstock/mailstock.svg';
 var defaultSizes = {
     small: '30px',
     medium: '46px',
@@ -48,27 +43,27 @@ var defaultSizes = {
 };
 var variantMap = {
     mailship: {
-        white: logo_white_png_1.default,
-        black: logo_black_png_1.default,
-        m: logo_m_png_1.default,
-        s: mailship_logo_svg_1.default,
+        white: logoWhiteImage,
+        black: logoBlackImage,
+        m: logoMImage,
+        s: logoSvg,
     },
     mailwise: {
-        black: mailwiseLogo_svg_1.default,
-        s: mailwiseLogoSmall_svg_1.default,
+        black: logoMailwise,
+        s: logoMailwiseSmall,
     },
     mailstock: {
-        black: mailstock_svg_1.default,
+        black: logoMailstock,
     },
     mailstep: {
-        black: mailstep_black_svg_1.default,
-        white: mailstep_white_svg_1.default,
+        black: logoMailstepBlack,
+        white: logoMailstepWhite,
     },
     mailwrap: {
-        black: mailwrapLogo_svg_1.default,
+        black: logoMailwrap,
     },
 };
-var StyledImage = styled_components_1.default.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n"], ["\n  width: ", ";\n  height: ", ";\n"])), function (_a) {
+var StyledImage = styled.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n"], ["\n  width: ", ";\n  height: ", ";\n"])), function (_a) {
     var width = _a.width;
     return width || 'auto';
 }, function (_a) {
@@ -83,7 +78,7 @@ var Logo = function (_a) {
         console.warn('No variant for this logo exists.');
         return null;
     }
-    return (0, jsx_runtime_1.jsx)(StyledImage, __assign({ src: logo, size: size, width: width, height: height }, rest));
+    return _jsx(StyledImage, __assign({ src: logo, size: size, width: width, height: height }, rest));
 };
-exports.default = Logo;
+export default Logo;
 var templateObject_1;

package/ui/Elements/Logo/index.js

@@ -1,9 +1,3 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Logo = void 0;
-var Logo_1 = __importDefault(require("./Logo"));
-exports.Logo = Logo_1.default;
-exports.default = Logo_1.default;
+import Logo from './Logo.js';
+export { Logo };
+export default Logo;

package/ui/Elements/Logo/stories/Logo.stories.js

@@ -1,13 +1,7 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SizeCustomHeight = exports.SizeCustomWidth = exports.SizeBig = exports.SizeMedium = exports.SizeSmall = exports.MailstepWhite = exports.MailstepBlack = exports.MailwrapBlack = exports.MailstockBlack = exports.MailwiseS = exports.MailwiseBlack = exports.MailshipS = exports.MailshipM = exports.MailshipWhite = exports.MailshipBlack = void 0;
-var Logo_1 = __importDefault(require("../Logo"));
+import Logo from '../Logo.js';
 var meta = {
     title: 'Elements/Logo',
-    component: Logo_1.default,
+    component: Logo,
     parameters: {
         backgrounds: {
             default: 'darkGray',
@@ -20,96 +14,96 @@ var meta = {
     tags: ['autodocs'],
     argTypes: {},
 };
-exports.default = meta;
-exports.MailshipBlack = {
+export default meta;
+export var MailshipBlack = {
     args: {
         variant: 'black',
         brand: 'mailship',
     },
 };
-exports.MailshipWhite = {
+export var MailshipWhite = {
     args: {
         brand: 'mailship',
         variant: 'white',
     },
 };
-exports.MailshipM = {
+export var MailshipM = {
     args: {
         brand: 'mailship',
         variant: 'm',
     },
 };
-exports.MailshipS = {
+export var MailshipS = {
     args: {
         brand: 'mailship',
         variant: 's',
     },
 };
-exports.MailwiseBlack = {
+export var MailwiseBlack = {
     args: {
         brand: 'mailwise',
         variant: 'black',
     },
 };
-exports.MailwiseS = {
+export var MailwiseS = {
     args: {
         brand: 'mailwise',
         variant: 's',
     },
 };
-exports.MailstockBlack = {
+export var MailstockBlack = {
     args: {
         brand: 'mailstock',
         variant: 'black',
     },
 };
-exports.MailwrapBlack = {
+export var MailwrapBlack = {
     args: {
         brand: 'mailwrap',
         variant: 'black',
     },
 };
-exports.MailstepBlack = {
+export var MailstepBlack = {
     args: {
         brand: 'mailstep',
         variant: 'black',
     },
 };
-exports.MailstepWhite = {
+export var MailstepWhite = {
     args: {
         brand: 'mailstep',
         variant: 'white',
     },
 };
-exports.SizeSmall = {
+export var SizeSmall = {
     args: {
         variant: 'black',
         brand: 'mailship',
         size: 'small',
     },
 };
-exports.SizeMedium = {
+export var SizeMedium = {
     args: {
         variant: 'black',
         brand: 'mailship',
         size: 'medium',
     },
 };
-exports.SizeBig = {
+export var SizeBig = {
     args: {
         variant: 'black',
         brand: 'mailship',
         size: 'big',
     },
 };
-exports.SizeCustomWidth = {
+export var SizeCustomWidth = {
     args: {
         variant: 'black',
         brand: 'mailship',
         width: '400px',
     },
 };
-exports.SizeCustomHeight = {
+export var SizeCustomHeight = {
     args: {
         variant: 'black',
         brand: 'mailship',

package/ui/Elements/Logo/types.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/ui/Elements/MultiSelect/MultiSelect.js

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -21,14 +20,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var Select_1 = __importDefault(require("../Select"));
+import { jsx as _jsx } from "react/jsx-runtime";
+import Select from '../Select/index.js';
 var SelectFilter = function (_a) {
     var checkAllButton = _a.checkAllButton, restProps = __rest(_a, ["checkAllButton"]);
-    return ((0, jsx_runtime_1.jsx)(Select_1.default, __assign({}, restProps, { optionVariant: "checkbox", multiLabelVariant: "count", isMulti: true, showSelectAllButton: checkAllButton })));
+    return (_jsx(Select, __assign({}, restProps, { optionVariant: "checkbox", multiLabelVariant: "count", isMulti: true, showSelectAllButton: checkAllButton })));
 };
-exports.default = SelectFilter;
+export default SelectFilter;

package/ui/Elements/MultiSelect/index.js

@@ -1,7 +1,2 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var MultiSelect_1 = __importDefault(require("./MultiSelect"));
-exports.default = MultiSelect_1.default;
+import MultiSelect from './MultiSelect.js';
+export default MultiSelect;

package/ui/Elements/Pagination/Pagination.js

@@ -1,11 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var styled_1 = require("./styled");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
+import { Btn, GoIcon, Wrapper, PageBtn, DotsWrapper } from './styled.js';
 var Pagination = function (_a) {
     var onPageChange = _a.onPageChange, itemPerPage = _a.itemPerPage, itemCount = _a.itemCount, page = _a.page, customPaginationHandler = _a.customPaginationHandler;
-    var setPage = (0, react_1.useCallback)(function (number) { return function () {
+    var setPage = useCallback(function (number) { return function () {
         if (customPaginationHandler) {
             customPaginationHandler(number, itemPerPage);
             return;
@@ -16,7 +14,7 @@ var Pagination = function (_a) {
     }; }, [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 = (0, react_1.useMemo)(function () {
+    var arrayOfPages = useMemo(function () {
         var pageNumbers = Array.from({ length: pageCount }, function (_, i) { return i + 1; });
         // first and last page are still visible
         // if number of pages is less than 6 (display all pages without dots and duplication of first and last char)
@@ -40,6 +38,6 @@ var Pagination = function (_a) {
             return pageNumbers.slice(pageX - 3, pageX + 2);
         }
     }, [pageCount, pageX]);
-    return ((0, jsx_runtime_1.jsxs)(styled_1.Wrapper, { children: [(0, jsx_runtime_1.jsx)(styled_1.Btn, { disabled: pageX <= 1, onClick: setPage(pageX - 1), children: (0, jsx_runtime_1.jsx)(styled_1.GoIcon, { icon: "goLeft", isActive: pageX > 1 }) }), (0, jsx_runtime_1.jsx)(styled_1.PageBtn, { isCurrent: pageX === 1, onClick: setPage(1), children: 1 }), pageX >= 5 && pageCount > 6 && (0, jsx_runtime_1.jsx)(styled_1.DotsWrapper, { children: "..." }), arrayOfPages === null || arrayOfPages === void 0 ? void 0 : arrayOfPages.map(function (number) { return ((0, jsx_runtime_1.jsx)(styled_1.PageBtn, { isCurrent: pageX === number, onClick: setPage(number !== null && number !== void 0 ? number : 1), children: number }, number)); }), pageX < pageCount - 3 && pageCount > 6 && (0, jsx_runtime_1.jsx)(styled_1.DotsWrapper, { children: "..." }), pageCount !== 1 && ((0, jsx_runtime_1.jsx)(styled_1.PageBtn, { isCurrent: pageX === pageCount, onClick: setPage(pageCount), children: pageCount })), (0, jsx_runtime_1.jsx)(styled_1.Btn, { disabled: pageX >= pageCount, onClick: setPage(pageX + 1), children: (0, jsx_runtime_1.jsx)(styled_1.GoIcon, { icon: "goRight", isActive: pageX < pageCount }) })] }));
+    return (_jsxs(Wrapper, { children: [_jsx(Btn, { disabled: pageX <= 1, onClick: setPage(pageX - 1), children: _jsx(GoIcon, { icon: "goLeft", isActive: pageX > 1 }) }), _jsx(PageBtn, { isCurrent: pageX === 1, onClick: setPage(1), children: 1 }), pageX >= 5 && pageCount > 6 && _jsx(DotsWrapper, { children: "..." }), arrayOfPages === null || arrayOfPages === void 0 ? void 0 : arrayOfPages.map(function (number) { return (_jsx(PageBtn, { isCurrent: pageX === number, onClick: setPage(number !== null && number !== void 0 ? number : 1), children: number }, number)); }), pageX < pageCount - 3 && pageCount > 6 && _jsx(DotsWrapper, { children: "..." }), pageCount !== 1 && (_jsx(PageBtn, { isCurrent: pageX === pageCount, onClick: setPage(pageCount), children: pageCount })), _jsx(Btn, { disabled: pageX >= pageCount, onClick: setPage(pageX + 1), children: _jsx(GoIcon, { icon: "goRight", isActive: pageX < pageCount }) })] }));
 };
-exports.default = Pagination;
+export default Pagination;

package/ui/Elements/Pagination/index.js

@@ -1,9 +1,3 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Pagination = void 0;
-var Pagination_1 = __importDefault(require("./Pagination"));
-exports.Pagination = Pagination_1.default;
-exports.default = Pagination_1.default;
+import Pagination from './Pagination.js';
+export { Pagination };
+export default Pagination;

package/ui/Elements/Pagination/stories/Pagination.stories.js

@@ -1,22 +1,19 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ManyPages = exports.Default = void 0;
-var __1 = require("../");
+import { Pagination } from '../index.js';
 var meta = {
     title: 'Elements/Pagination',
-    component: __1.Pagination,
+    component: Pagination,
     tags: ['autodocs'],
     argTypes: {},
 };
-exports.default = meta;
-exports.Default = {
+export default meta;
+export var Default = {
     args: {
         itemCount: 100,
         itemPerPage: 8,
         page: 1,
     },
 };
-exports.ManyPages = {
+export var ManyPages = {
     args: {
         itemCount: 1000,
         itemPerPage: 8,

package/ui/Elements/Pagination/styled.js

@@ -1,55 +1,26 @@
-"use strict";
 var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PageBtn = exports.DotsWrapper = exports.GoIcon = exports.ArrowIcon = exports.Btn = exports.Wrapper = void 0;
-var styled_components_1 = __importStar(require("@xstyled/styled-components"));
-var system_1 = require("@xstyled/system");
-var Icon_1 = __importDefault(require("../Icon"));
-exports.Wrapper = (0, styled_components_1.default)(styled_components_1.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"])));
-exports.Btn = styled_components_1.default.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) {
+import styled, { x } from '@xstyled/styled-components';
+import { th } from '@xstyled/system';
+import Icon from '../Icon/index.js';
+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');
 }, function (_a) {
     var disabled = _a.disabled;
     return (disabled ? 0 : 1);
 });
-exports.ArrowIcon = (0, styled_components_1.default)(Icon_1.default)(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"])));
-exports.GoIcon = (0, styled_components_1.default)(exports.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"])));
-exports.DotsWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  color: gray1;\n"], ["\n  color: gray1;\n"])));
-exports.PageBtn = styled_components_1.default.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) {
+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 ? system_1.th.color('red1') : system_1.th.color('gray1'));
+    return (isCurrent ? th.color('red1') : th.color('gray1'));
 }, function (_a) {
     var isCurrent = _a.isCurrent;
-    return (isCurrent ? system_1.th.fontWeight('semiBold') : system_1.th.fontWeight('normal'));
-}, (0, system_1.th)('fonts.primary'));
+    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/Portal/index.js

@@ -1,21 +1,14 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Portal = void 0;
-var react_1 = require("react");
-var react_dom_1 = __importDefault(require("react-dom"));
-var Portal = function (_a) {
+import { useEffect, useState } from 'react';
+import ReactDom from 'react-dom';
+export var Portal = function (_a) {
     var children = _a.children;
-    var container = (0, react_1.useState)(function () { return document.createElement('div'); })[0];
-    (0, react_1.useEffect)(function () {
+    var container = useState(function () { return document.createElement('div'); })[0];
+    useEffect(function () {
         document.body.appendChild(container);
         return function () {
             document.body.removeChild(container);
         };
     }, []);
-    return react_dom_1.default.createPortal(children, container);
+    return ReactDom.createPortal(children, container);
 };
-exports.Portal = Portal;
-exports.default = exports.Portal;
+export default Portal;