@mailstep/design-system 0.2.0-beta.1 → 0.2.0-beta.3

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

@@ -0,0 +1,112 @@
+import Logo from '../Logo';
+var meta = {
+    title: 'Elements/Logo',
+    component: Logo,
+    parameters: {
+        backgrounds: {
+            default: 'darkGray',
+            values: [
+                { name: 'darkGray', value: '#333' },
+                { name: 'lightGray', value: '#eee' },
+            ],
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {},
+};
+export default meta;
+export var MailshipBlack = {
+    args: {
+        variant: 'black',
+        brand: 'mailship',
+    },
+};
+export var MailshipWhite = {
+    args: {
+        brand: 'mailship',
+        variant: 'white',
+    },
+};
+export var MailshipM = {
+    args: {
+        brand: 'mailship',
+        variant: 'm',
+    },
+};
+export var MailshipS = {
+    args: {
+        brand: 'mailship',
+        variant: 's',
+    },
+};
+export var MailwiseBlack = {
+    args: {
+        brand: 'mailwise',
+        variant: 'black',
+    },
+};
+export var MailwiseS = {
+    args: {
+        brand: 'mailwise',
+        variant: 's',
+    },
+};
+export var MailstockBlack = {
+    args: {
+        brand: 'mailstock',
+        variant: 'black',
+    },
+};
+export var MailwrapBlack = {
+    args: {
+        brand: 'mailwrap',
+        variant: 'black',
+    },
+};
+export var MailstepBlack = {
+    args: {
+        brand: 'mailstep',
+        variant: 'black',
+    },
+};
+export var MailstepWhite = {
+    args: {
+        brand: 'mailstep',
+        variant: 'white',
+    },
+};
+export var SizeSmall = {
+    args: {
+        variant: 'black',
+        brand: 'mailship',
+        size: 'small',
+    },
+};
+export var SizeMedium = {
+    args: {
+        variant: 'black',
+        brand: 'mailship',
+        size: 'medium',
+    },
+};
+export var SizeBig = {
+    args: {
+        variant: 'black',
+        brand: 'mailship',
+        size: 'big',
+    },
+};
+export var SizeCustomWidth = {
+    args: {
+        variant: 'black',
+        brand: 'mailship',
+        width: '400px',
+    },
+};
+export var SizeCustomHeight = {
+    args: {
+        variant: 'black',
+        brand: 'mailship',
+        height: '200px',
+    },
+};

package/Elements/Logo/types.d.ts

@@ -0,0 +1,10 @@
+export type Brand = 'mailship' | 'mailwise' | 'mailstock' | 'mailstep' | 'mailwrap';
+export type Variant = 'white' | 'black' | 'm' | 's';
+export type Size = 'small' | 'medium' | 'big' | undefined;
+export type LogoProps = {
+    variant?: Variant;
+    size?: Size;
+    brand?: Brand;
+    width?: string;
+    height?: string;
+};

package/Elements/Logo/types.js

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

package/Elements/Pagination/Pagination.d.ts

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

package/Elements/Pagination/Pagination.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
+import { Btn, GoIcon, Wrapper, PageBtn, DotsWrapper } from './styled';
+var Pagination = function (_a) {
+    var onPageChange = _a.onPageChange, itemPerPage = _a.itemPerPage, itemCount = _a.itemCount, page = _a.page;
+    var setPage = useCallback(function (number) { return function () {
+        if (onPageChange) {
+            onPageChange(number);
+        }
+    }; }, [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 () {
+        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)
+        if (pageCount < 6) {
+            return pageNumbers.slice(1, pageCount - 1);
+            // if current page is less than 5 (display first 5 pages)
+        }
+        else if (pageX < 5) {
+            return pageNumbers.slice(1, 5);
+            // display last 5 pages
+        }
+        else if (pageX > pageCount - 4) {
+            return pageNumbers.slice(pageCount - 5, pageCount - 1);
+        }
+        else {
+            // display dispersion of 2 chars from current page (part between dots)
+            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 }) })] }));
+};
+export default Pagination;

package/Elements/Pagination/index.d.ts

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

package/Elements/Pagination/index.js

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

package/Elements/Pagination/stories/Pagination.stories.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ onPageChange, itemPerPage, itemCount, page }: import("../Pagination").Props) => JSX.Element;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const ManyPages: Story;

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

@@ -0,0 +1,22 @@
+import { Pagination } from '../';
+var meta = {
+    title: 'Elements/Pagination',
+    component: Pagination,
+    tags: ['autodocs'],
+    argTypes: {},
+};
+export default meta;
+export var Default = {
+    args: {
+        itemCount: 100,
+        itemPerPage: 8,
+        page: 1,
+    },
+};
+export var ManyPages = {
+    args: {
+        itemCount: 1000,
+        itemPerPage: 8,
+        page: 1,
+    },
+};

package/Elements/Pagination/styled.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export declare const Wrapper: import("styled-components").StyledComponent<(props: Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color">) => import("react").ReactElement<any, "div">, import("@xstyled/system").Theme, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
+export declare const Btn: import("styled-components").StyledComponent<"button", import("@xstyled/system").Theme, {
+    disabled: boolean;
+}, never>;
+export declare const ArrowIcon: import("styled-components").StyledComponent<({ icon, fill, style, size, className, secondaryColor, fixedWidth, spinning, }: import("../Icon").IconProps) => JSX.Element, import("@xstyled/system").Theme, {
+    isActive: boolean;
+}, never>;
+export declare const GoIcon: import("styled-components").StyledComponent<({ icon, fill, style, size, className, secondaryColor, fixedWidth, spinning, }: import("../Icon").IconProps) => JSX.Element, import("@xstyled/system").Theme, {
+    isActive: boolean;
+}, never>;
+export declare const DotsWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const PageBtn: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {
+    isCurrent: boolean;
+}, never>;

package/Elements/Pagination/styled.js

@@ -0,0 +1,26 @@
+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/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"])));
+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);
+});
+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 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'));
+}, th('fonts.primary'));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/Elements/Paragraph/Paragraph.d.ts

@@ -0,0 +1,2 @@
+declare const Paragraph: () => import("react/jsx-runtime").JSX.Element;
+export default Paragraph;

package/Elements/Paragraph/Paragraph.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+var Paragraph = function () { return _jsx("p", { children: "paragraph" }); };
+export default Paragraph;

package/Elements/Paragraph/index.d.ts

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

package/Elements/Paragraph/index.js

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

package/Elements/Paragraph/stories/Paragraph.stories.d.ts

@@ -0,0 +1,17 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: () => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    argTypes: {
+        backgroundColor: {
+            control: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Large: Story;
+export declare const Small: Story;

package/Elements/Paragraph/stories/Paragraph.stories.js

@@ -0,0 +1,34 @@
+import { Paragraph } from '../';
+var meta = {
+    title: 'Elements/Paragraph',
+    component: Paragraph,
+    tags: ['autodocs'],
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+};
+export default meta;
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export var Primary = {
+    args: {
+        primary: true,
+        label: 'Paragraph',
+    },
+};
+export var Secondary = {
+    args: {
+        label: 'Paragraph',
+    },
+};
+export var Large = {
+    args: {
+        size: 'large',
+        label: 'Paragraph',
+    },
+};
+export var Small = {
+    args: {
+        size: 'small',
+        label: 'Paragraph',
+    },
+};

package/Elements/Portal/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const Portal: ({ children }: {
+    children: JSX.Element;
+}) => import("react").ReactPortal;
+export default Portal;

package/Elements/Portal/index.js

@@ -0,0 +1,14 @@
+import { useEffect, useState } from 'react';
+import ReactDom from 'react-dom';
+export var Portal = function (_a) {
+    var children = _a.children;
+    var container = useState(function () { return document.createElement('div'); })[0];
+    useEffect(function () {
+        document.body.appendChild(container);
+        return function () {
+            document.body.removeChild(container);
+        };
+    }, []);
+    return ReactDom.createPortal(children, container);
+};
+export default Portal;

package/Elements/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    progress?: number;
+    status?: 'loading' | 'finished' | 'error';
+    errorMessage?: string;
+    noText?: boolean;
+    variant?: 'normal' | 'thin';
+};
+declare const ProgressBar: ({ progress, status, errorMessage, noText, variant }: Props) => JSX.Element;
+export default ProgressBar;

package/Elements/ProgressBar/ProgressBar.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyledProgressBar, Progress, ProgressDescription } from './styles';
+var ProgressBar = function (_a) {
+    var _b = _a.progress, progress = _b === void 0 ? 0 : _b, status = _a.status, errorMessage = _a.errorMessage, noText = _a.noText, variant = _a.variant;
+    if (progress > 100 || progress < 0)
+        console.warn('Progress value should be number between 0 and 100.');
+    return (_jsxs(StyledProgressBar, { status: status, variant: variant, children: [_jsx(Progress, { progress: progress, status: status }), !noText && _jsx(ProgressDescription, { children: status === 'error' && errorMessage ? errorMessage : "".concat(progress, "%") })] }));
+};
+export default ProgressBar;

package/Elements/ProgressBar/index.d.ts

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

package/Elements/ProgressBar/index.js

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

package/Elements/ProgressBar/stories/ProgressBar.stories.d.ts

@@ -0,0 +1,18 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ progress, status, errorMessage, noText, variant }: {
+        progress?: number | undefined;
+        status?: "error" | "loading" | "finished" | undefined;
+        errorMessage?: string | undefined;
+        noText?: boolean | undefined;
+        variant?: "normal" | "thin" | undefined;
+    }) => JSX.Element;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Loading: Story;
+export declare const Finished: Story;
+export declare const Error: Story;

package/Elements/ProgressBar/stories/ProgressBar.stories.js

@@ -0,0 +1,27 @@
+import ProgressBar from '../ProgressBar';
+var meta = {
+    title: 'Elements/ProgressBar',
+    component: ProgressBar,
+    tags: ['autodocs'],
+    argTypes: {},
+};
+export default meta;
+export var Loading = {
+    args: {
+        progress: 10,
+        status: "loading"
+    },
+};
+export var Finished = {
+    args: {
+        progress: 100,
+        status: "finished"
+    },
+};
+export var Error = {
+    args: {
+        progress: 30,
+        status: "error",
+        errorMessage: "There has been some issues on the way."
+    },
+};

package/Elements/ProgressBar/styles.d.ts

@@ -0,0 +1,9 @@
+export declare const StyledProgressBar: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    status: string | null | undefined;
+    variant?: "normal" | "thin" | undefined;
+}, never>;
+export declare const Progress: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    progress: number;
+    status: string | null | undefined;
+}, never>;
+export declare const ProgressDescription: import("styled-components").StyledComponent<"span", import("@xstyled/system").Theme, {}, never>;

package/Elements/ProgressBar/styles.js

@@ -0,0 +1,19 @@
+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, { keyframes, css } from '@xstyled/styled-components';
+import { th } from '@xstyled/styled-components';
+import { createRgba } from '../../utils';
+export var StyledProgressBar = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  width: 100%;\n  min-width: 250px;\n  height: ", ";\n  color: ", ";\n  background-color: ", ";\n  justify-content: center;\n  border: slim;\n  border-color: ", ";\n  border-radius: md;\n  overflow: hidden;\n"], ["\n  position: relative;\n  display: flex;\n  width: 100%;\n  min-width: 250px;\n  height: ", ";\n  color: ", ";\n  background-color: ", ";\n  justify-content: center;\n  border: slim;\n  border-color: ", ";\n  border-radius: md;\n  overflow: hidden;\n"])), function (props) { return (props.variant === 'thin' ? "12px" : "35px"); }, th('colors.white'), function (props) {
+    return props.status === 'finished' ? createRgba(props.theme.colors.success, 0.4) : "".concat(th('colors.red1'));
+}, function (props) { return (props.status === 'finished' ? "".concat(th('colors.success')) : "".concat(th('colors.red1'))); });
+var slide = keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n0%{\n  background-position-x: 0%;\n}\n100% {\n  background-position-x: 500px;\n}\n"], ["\n0%{\n  background-position-x: 0%;\n}\n100% {\n  background-position-x: 500px;\n}\n"])));
+var StyledStatusFinished = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: repeating-linear-gradient(\n    -45deg,\n    ", ",\n    ", " 10px,\n    ", " 10px,\n    ", " 22.1px\n  );\n  background-size: 4000px 50px;\n"], ["\n  background: repeating-linear-gradient(\n    -45deg,\n    ", ",\n    ", " 10px,\n    ", " 10px,\n    ", " 22.1px\n  );\n  background-size: 4000px 50px;\n"])), function (props) { return createRgba(props.theme.colors.success, 0.4); }, function (props) { return createRgba(props.theme.colors.success, 0.4); }, th('colors.success'), th('colors.success'));
+var StyledStatusLoading = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background: repeating-linear-gradient(\n    -45deg,\n    ", ",\n    ", " 10px,\n    ", " 10px,\n    ", " 22.1px\n  );\n  background-size: 4000px 50px;\n"], ["\n  background: repeating-linear-gradient(\n    -45deg,\n    ", ",\n    ", " 10px,\n    ", " 10px,\n    ", " 22.1px\n  );\n  background-size: 4000px 50px;\n"])), th('colors.red1'), th('colors.red1'), th('colors.red1'), th('colors.red1'));
+var StyledStatusError = css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background: repeating-linear-gradient(\n    -45deg,\n    ", ",\n    ", " 10px,\n    ", " 10px,\n    ", " 22.1px\n  );\n  background-size: 4000px 50px;\n"], ["\n  background: repeating-linear-gradient(\n    -45deg,\n    ", ",\n    ", " 10px,\n    ", " 10px,\n    ", " 22.1px\n  );\n  background-size: 4000px 50px;\n"])), th('colors.red1'), th('colors.red1'), th('colors.red1'), th('colors.red1'));
+export var Progress = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: ", ";\n  height: 35px;\n  animation: ", " 20s linear infinite;\n  transition: width 500ms;\n  ", "\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: ", ";\n  height: 35px;\n  animation: ", " 20s linear infinite;\n  transition: width 500ms;\n  ", "\n"])), function (props) { return "".concat(props.progress, "%"); }, slide, function (props) {
+    return props.status === 'finished' ? StyledStatusFinished : props.status === 'error' ? StyledStatusError : StyledStatusLoading;
+});
+export var ProgressDescription = styled.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n  align-self: center;\n"], ["\n  position: relative;\n  align-self: center;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/Elements/SimpleLink/SimpleLink.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Link as ReactLink } from 'react-router-dom';
+export type ToObjectType = {
+    pathname?: string;
+    search?: string;
+    hash?: string;
+    state?: object;
+};
+export type Props = {
+    as?: string;
+    children?: React.ReactNode;
+    to?: string | ToObjectType | Function;
+    target?: string;
+    disabled?: boolean;
+    onClick?: Function;
+    $decorate?: boolean;
+};
+declare const StyledLink: import("styled-components").StyledComponent<typeof ReactLink, import("@xstyled/system").Theme, Props, never>;
+export default StyledLink;

package/Elements/SimpleLink/SimpleLink.js

@@ -0,0 +1,17 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { Link as ReactLink } from 'react-router-dom';
+import styled, { css } from '@xstyled/styled-components';
+var StyledLink = styled(ReactLink)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: inherit;\n  cursor: pointer;\n\n  :visited {\n    color: inherit;\n  }\n  :hover {\n    color: inherit;\n  }\n  :active {\n    color: inherit;\n  }\n  :focus {\n    outline: none;\n  }\n\n  ", "\n\n  ", "\n"], ["\n  color: inherit;\n  cursor: pointer;\n\n  :visited {\n    color: inherit;\n  }\n  :hover {\n    color: inherit;\n  }\n  :active {\n    color: inherit;\n  }\n  :focus {\n    outline: none;\n  }\n\n  ", "\n\n  ", "\n"])), 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;
+}, function (_a) {
+    var $decorate = _a.$decorate;
+    return $decorate
+        ? css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          text-decoration: underline;\n        "], ["\n          text-decoration: underline;\n        "]))) : null;
+});
+export default StyledLink;
+var templateObject_1, templateObject_2, templateObject_3;

package/Elements/SimpleLink/index.d.ts

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

package/Elements/SimpleLink/index.js

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

package/Elements/SpaceAround/SpaceAround.d.ts

@@ -0,0 +1,3 @@
+import { Props } from './types';
+declare const SpaceAroundWrap: ({ children, spaceBetween, spaceAround, ...rest }: Props) => JSX.Element;
+export default SpaceAroundWrap;

package/Elements/SpaceAround/SpaceAround.js

@@ -0,0 +1,54 @@
+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 } from "react/jsx-runtime";
+import styled, { x, css, useTheme } from '@xstyled/styled-components';
+import { th } from '@xstyled/styled-components';
+var Wrapper = styled(x.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: ", ";\n  position: relative;\n  box-sizing: border-box;\n  ", ";\n  ", ";\n"], ["\n  width: ", ";\n  position: relative;\n  box-sizing: border-box;\n  ", ";\n  ", ";\n"])), function (_a) {
+    var $marginLeft = _a.$marginLeft, $marginRight = _a.$marginRight;
+    return "calc(100% - ".concat($marginLeft || '0px', " - ").concat($marginRight || '0px', ")");
+}, function (_a) {
+    var $spaceAround = _a.$spaceAround;
+    return $spaceAround
+        ? css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          margin-top: ", ";\n          margin-right: ", ";\n          margin-bottom: ", ";\n          margin-left: ", ";\n        "], ["\n          margin-top: ", ";\n          margin-right: ", ";\n          margin-bottom: ", ";\n          margin-left: ", ";\n        "])), $spaceAround === true || typeof ($spaceAround === null || $spaceAround === void 0 ? void 0 : $spaceAround.marginTop) === 'undefined' ? 1 : $spaceAround.marginTop, $spaceAround === true || typeof ($spaceAround === null || $spaceAround === void 0 ? void 0 : $spaceAround.marginRight) === 'undefined'
+            ? 1
+            : $spaceAround.marginRight, $spaceAround === true || typeof ($spaceAround === null || $spaceAround === void 0 ? void 0 : $spaceAround.marginBottom) === 'undefined'
+            ? 2
+            : $spaceAround.marginBottom, $spaceAround === true || typeof ($spaceAround === null || $spaceAround === void 0 ? void 0 : $spaceAround.marginLeft) === 'undefined' ? 0 : $spaceAround.marginLeft) : '';
+}, function (_a) {
+    var $spaceBetween = _a.$spaceBetween;
+    return $spaceBetween
+        ? css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          display: flex;\n          justify-content: space-between;\n        "], ["\n          display: flex;\n          justify-content: space-between;\n        "]))) : '';
+});
+var SpaceAroundWrap = function (_a) {
+    var children = _a.children, _b = _a.spaceBetween, spaceBetween = _b === void 0 ? false : _b, _c = _a.spaceAround, spaceAround = _c === void 0 ? true : _c, rest = __rest(_a, ["children", "spaceBetween", "spaceAround"]);
+    var theme = useTheme();
+    var themeMarginLeft = typeof spaceAround !== 'boolean' && (spaceAround === null || spaceAround === void 0 ? void 0 : spaceAround.marginLeft) ? th.space(spaceAround === null || spaceAround === void 0 ? void 0 : spaceAround.marginLeft)({ theme: theme }) : 0;
+    var themeMarginRight = typeof spaceAround !== 'boolean' && (spaceAround === null || spaceAround === void 0 ? void 0 : spaceAround.marginRight) ? th.space(spaceAround === null || spaceAround === void 0 ? void 0 : spaceAround.marginRight)({ theme: theme }) : 0;
+    return (_jsx(Wrapper, __assign({ "$spaceAround": spaceAround, "$spaceBetween": spaceBetween, "$marginRight": themeMarginRight, "$marginLeft": themeMarginLeft }, rest, { children: children })));
+};
+export default SpaceAroundWrap;
+var templateObject_1, templateObject_2, templateObject_3;

package/Elements/SpaceAround/index.d.ts

@@ -0,0 +1,4 @@
+import SpaceAroundWrap from './SpaceAround';
+export type { SpaceAround } from './types';
+export { SpaceAroundWrap };
+export default SpaceAroundWrap;

package/Elements/SpaceAround/index.js

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

package/Elements/SpaceAround/stories/SpaceAround.stories.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: ({ children, spaceBetween, spaceAround, ...rest }: import("../types").Props) => JSX.Element;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const ManyPages: Story;

package/Elements/SpaceAround/stories/SpaceAround.stories.js

@@ -0,0 +1,22 @@
+import { SpaceAroundWrap } from '../';
+var meta = {
+    title: 'Elements/SpaceAround',
+    component: SpaceAroundWrap,
+    tags: ['autodocs'],
+    argTypes: {},
+};
+export default meta;
+export var Default = {
+    args: {
+        children: 'This is a content',
+        spaceBetween: false,
+        spaceAround: true,
+    },
+};
+export var ManyPages = {
+    args: {
+        children: 'This is a content',
+        spaceBetween: true,
+        spaceAround: false,
+    },
+};