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

package/ui/Elements/Link/Link.js

@@ -1,3 +1,4 @@
+"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;
@@ -13,14 +14,38 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-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';
-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 __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) {
     var color = _a.color;
-    return createRgba(color, 0.7);
+    return (0, utils_1.createRgba)(color, 0.7);
 }, function (_a) {
     var color = _a.color;
     return color;
@@ -30,19 +55,19 @@ var StyledLink = styled(ReactLink)(templateObject_2 || (templateObject_2 = __mak
 }, function (_a) {
     var color = _a.color;
     return color;
-}, th('fonts.primary'), function (_a) {
+}, (0, styled_components_2.th)('fonts.primary'), function (_a) {
     var size = _a.size;
     return size;
 }, function (_a) {
     var disabled = _a.disabled;
     return disabled
-        ? 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;
+        ? (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;
 });
 var Link = function (props) {
-    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 })));
+    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 })));
 };
 Link.defaultProps = {
     to: '',
@@ -52,5 +77,5 @@ Link.defaultProps = {
     padding: '0',
     replace: false,
 };
-export default Link;
+exports.default = Link;
 var templateObject_1, templateObject_2;

package/ui/Elements/Link/index.js

@@ -1,3 +1,9 @@
-import Link from './Link';
-export { Link };
-export default Link;
+"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;

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

@@ -1,13 +1,16 @@
-import { Link } from '../';
+"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("../");
 var meta = {
     title: 'Elements/Link',
-    component: Link,
+    component: __1.Link,
     tags: ['autodocs'],
     argTypes: {},
     decorators: [],
 };
-export default meta;
-export var External = {
+exports.default = meta;
+exports.External = {
     args: {
         to: { pathname: 'https://www.inventi.cz/' },
         size: 1,
@@ -15,7 +18,7 @@ export var External = {
         children: "This is a link",
     },
 };
-export var Success = {
+exports.Success = {
     args: {
         to: { pathname: 'https://www.inventi.cz/' },
         size: 1,
@@ -23,7 +26,7 @@ export var Success = {
         children: "This is a link",
     },
 };
-export var Warning = {
+exports.Warning = {
     args: {
         to: { pathname: 'https://www.inventi.cz/' },
         size: 1,
@@ -31,7 +34,7 @@ export var Warning = {
         children: "This is a link",
     },
 };
-export var Disabled = {
+exports.Disabled = {
     args: {
         to: { pathname: 'https://www.inventi.cz/' },
         size: 1,
@@ -40,21 +43,21 @@ export var Disabled = {
         children: "This is a link",
     },
 };
-export var Size3 = {
+exports.Size3 = {
     args: {
         to: { pathname: 'https://www.inventi.cz/' },
         size: 3,
         children: "This is a link",
     },
 };
-export var Size5 = {
+exports.Size5 = {
     args: {
         to: { pathname: 'https://www.inventi.cz/' },
         size: 5,
         children: "This is a link",
     },
 };
-export var Size7 = {
+exports.Size7 = {
     args: {
         to: { pathname: 'https://www.inventi.cz/' },
         size: 7,

package/ui/Elements/Logo/Logo.js

@@ -1,3 +1,4 @@
+"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;
@@ -24,18 +25,22 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-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 __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"));
 var defaultSizes = {
     small: '30px',
     medium: '46px',
@@ -43,27 +48,27 @@ var defaultSizes = {
 };
 var variantMap = {
     mailship: {
-        white: logoWhiteImage,
-        black: logoBlackImage,
-        m: logoMImage,
-        s: logoSvg,
+        white: logo_white_png_1.default,
+        black: logo_black_png_1.default,
+        m: logo_m_png_1.default,
+        s: mailship_logo_svg_1.default,
     },
     mailwise: {
-        black: logoMailwise,
-        s: logoMailwiseSmall,
+        black: mailwiseLogo_svg_1.default,
+        s: mailwiseLogoSmall_svg_1.default,
     },
     mailstock: {
-        black: logoMailstock,
+        black: mailstock_svg_1.default,
     },
     mailstep: {
-        black: logoMailstepBlack,
-        white: logoMailstepWhite,
+        black: mailstep_black_svg_1.default,
+        white: mailstep_white_svg_1.default,
     },
     mailwrap: {
-        black: logoMailwrap,
+        black: mailwrapLogo_svg_1.default,
     },
 };
-var StyledImage = styled.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n"], ["\n  width: ", ";\n  height: ", ";\n"])), function (_a) {
+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 width = _a.width;
     return width || 'auto';
 }, function (_a) {
@@ -78,7 +83,7 @@ var Logo = function (_a) {
         console.warn('No variant for this logo exists.');
         return null;
     }
-    return _jsx(StyledImage, __assign({ src: logo, size: size, width: width, height: height }, rest));
+    return (0, jsx_runtime_1.jsx)(StyledImage, __assign({ src: logo, size: size, width: width, height: height }, rest));
 };
-export default Logo;
+exports.default = Logo;
 var templateObject_1;

package/ui/Elements/Logo/index.js

@@ -1,3 +1,9 @@
-import Logo from './Logo';
-export { Logo };
-export default Logo;
+"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;

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

@@ -1,7 +1,13 @@
-import Logo from '../Logo';
+"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"));
 var meta = {
     title: 'Elements/Logo',
-    component: Logo,
+    component: Logo_1.default,
     parameters: {
         backgrounds: {
             default: 'darkGray',
@@ -14,96 +20,96 @@ var meta = {
     tags: ['autodocs'],
     argTypes: {},
 };
-export default meta;
-export var MailshipBlack = {
+exports.default = meta;
+exports.MailshipBlack = {
     args: {
         variant: 'black',
         brand: 'mailship',
     },
 };
-export var MailshipWhite = {
+exports.MailshipWhite = {
     args: {
         brand: 'mailship',
         variant: 'white',
     },
 };
-export var MailshipM = {
+exports.MailshipM = {
     args: {
         brand: 'mailship',
         variant: 'm',
     },
 };
-export var MailshipS = {
+exports.MailshipS = {
     args: {
         brand: 'mailship',
         variant: 's',
     },
 };
-export var MailwiseBlack = {
+exports.MailwiseBlack = {
     args: {
         brand: 'mailwise',
         variant: 'black',
     },
 };
-export var MailwiseS = {
+exports.MailwiseS = {
     args: {
         brand: 'mailwise',
         variant: 's',
     },
 };
-export var MailstockBlack = {
+exports.MailstockBlack = {
     args: {
         brand: 'mailstock',
         variant: 'black',
     },
 };
-export var MailwrapBlack = {
+exports.MailwrapBlack = {
     args: {
         brand: 'mailwrap',
         variant: 'black',
     },
 };
-export var MailstepBlack = {
+exports.MailstepBlack = {
     args: {
         brand: 'mailstep',
         variant: 'black',
     },
 };
-export var MailstepWhite = {
+exports.MailstepWhite = {
     args: {
         brand: 'mailstep',
         variant: 'white',
     },
 };
-export var SizeSmall = {
+exports.SizeSmall = {
     args: {
         variant: 'black',
         brand: 'mailship',
         size: 'small',
     },
 };
-export var SizeMedium = {
+exports.SizeMedium = {
     args: {
         variant: 'black',
         brand: 'mailship',
         size: 'medium',
     },
 };
-export var SizeBig = {
+exports.SizeBig = {
     args: {
         variant: 'black',
         brand: 'mailship',
         size: 'big',
     },
 };
-export var SizeCustomWidth = {
+exports.SizeCustomWidth = {
     args: {
         variant: 'black',
         brand: 'mailship',
         width: '400px',
     },
 };
-export var SizeCustomHeight = {
+exports.SizeCustomHeight = {
     args: {
         variant: 'black',
         brand: 'mailship',

package/ui/Elements/Logo/types.js

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

package/ui/Elements/MultiSelect/MultiSelect.js

@@ -1,3 +1,4 @@
+"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -20,10 +21,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import Select from '../Select';
+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"));
 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 })));
+    return ((0, jsx_runtime_1.jsx)(Select_1.default, __assign({}, restProps, { optionVariant: "checkbox", multiLabelVariant: "count", isMulti: true, showSelectAllButton: checkAllButton })));
 };
-export default SelectFilter;
+exports.default = SelectFilter;

package/ui/Elements/MultiSelect/index.js

@@ -1,2 +1,7 @@
-import MultiSelect from './MultiSelect';
-export default MultiSelect;
+"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;

package/ui/Elements/Pagination/Pagination.js

@@ -1,9 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo } from 'react';
-import { Btn, GoIcon, Wrapper, PageBtn, DotsWrapper } from './styled';
+"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");
 var Pagination = function (_a) {
     var onPageChange = _a.onPageChange, itemPerPage = _a.itemPerPage, itemCount = _a.itemCount, page = _a.page, customPaginationHandler = _a.customPaginationHandler;
-    var setPage = useCallback(function (number) { return function () {
+    var setPage = (0, react_1.useCallback)(function (number) { return function () {
         if (customPaginationHandler) {
             customPaginationHandler(number, itemPerPage);
             return;
@@ -14,7 +16,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 = useMemo(function () {
+    var arrayOfPages = (0, react_1.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)
@@ -38,6 +40,6 @@ var Pagination = function (_a) {
             return pageNumbers.slice(pageX - 3, pageX + 2);
         }
     }, [pageCount, pageX]);
-    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 }) })] }));
+    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 }) })] }));
 };
-export default Pagination;
+exports.default = Pagination;

package/ui/Elements/Pagination/index.js

@@ -1,3 +1,9 @@
-import Pagination from './Pagination';
-export { Pagination };
-export default Pagination;
+"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;

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

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

package/ui/Elements/Pagination/styled.js

@@ -1,26 +1,55 @@
+"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;
 };
-import styled, { x } from '@xstyled/styled-components';
-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 __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) {
     var disabled = _a.disabled;
     return (disabled ? 'default' : 'pointer');
 }, function (_a) {
     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: 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) {
+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) {
     var isCurrent = _a.isCurrent;
-    return (isCurrent ? th.color('red1') : th.color('gray1'));
+    return (isCurrent ? system_1.th.color('red1') : system_1.th.color('gray1'));
 }, function (_a) {
     var isCurrent = _a.isCurrent;
-    return (isCurrent ? th.fontWeight('semiBold') : th.fontWeight('normal'));
-}, th('fonts.primary'));
+    return (isCurrent ? system_1.th.fontWeight('semiBold') : system_1.th.fontWeight('normal'));
+}, (0, system_1.th)('fonts.primary'));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/ui/Elements/Portal/index.js

@@ -1,14 +1,21 @@
-import { useEffect, useState } from 'react';
-import ReactDom from 'react-dom';
-export var Portal = function (_a) {
+"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) {
     var children = _a.children;
-    var container = useState(function () { return document.createElement('div'); })[0];
-    useEffect(function () {
+    var container = (0, react_1.useState)(function () { return document.createElement('div'); })[0];
+    (0, react_1.useEffect)(function () {
         document.body.appendChild(container);
         return function () {
             document.body.removeChild(container);
         };
     }, []);
-    return ReactDom.createPortal(children, container);
+    return react_dom_1.default.createPortal(children, container);
 };
-export default Portal;
+exports.Portal = Portal;
+exports.default = exports.Portal;