@mailstep/design-system 0.2.0-beta.0 → 0.2.0-beta.2

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,
+    },
+};

package/Elements/SpaceAround/types.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export type SpaceAroundProps = {
+    marginTop?: number;
+    marginRight?: number;
+    marginBottom?: number;
+    marginLeft?: number;
+};
+export type SpaceAround = boolean | SpaceAroundProps;
+export type Props = {
+    children: React.ReactNode;
+    spaceAround?: SpaceAround;
+    className?: string;
+    spaceBetween?: boolean;
+};

package/Elements/SpaceAround/types.js

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

package/Elements/Spinner/Spinner.d.ts

@@ -0,0 +1,14 @@
+import { ISpinner } from './types';
+export declare const appearanceToColorMap: {
+    error: string;
+    concept: string;
+    done: string;
+    info: string;
+    processing: string;
+    success: string;
+    warning: string;
+    waiting: string;
+};
+export declare const appearanceToFontColorMap: Record<string, string>;
+export declare const Spinner: ISpinner;
+export default Spinner;

package/Elements/Spinner/Spinner.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Svg, Circle } from './styles';
+export var appearanceToColorMap = {
+    error: 'red1',
+    concept: 'bgLightGray1',
+    done: 'darkGreen',
+    info: 'lightGray6',
+    processing: 'blue2',
+    success: 'green',
+    warning: 'yellow1',
+    waiting: 'gray1',
+};
+export var appearanceToFontColorMap = {
+    error: 'white',
+    concept: 'blue2',
+    done: 'white',
+    info: 'blue2',
+    processing: 'white',
+    success: 'white',
+    warning: 'blue2',
+    waiting: 'white',
+};
+export var Spinner = function (_a) {
+    var _b = _a.variant, variant = _b === void 0 ? 'default' : _b, appearance = _a.appearance;
+    var color = appearance ? appearanceToFontColorMap[appearance] : 'blue2';
+    return (_jsx(Svg, { viewBox: "22 22 44 44", "$variant": variant, children: _jsx(Circle, { cx: "44", cy: "44", r: "20.2", fill: "none", strokeWidth: "3.6", color: color }) }));
+};
+export default Spinner;

package/Elements/Spinner/index.d.ts

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

package/Elements/Spinner/index.js

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

package/Elements/Spinner/stories/Spinner.stories.d.ts

@@ -0,0 +1,19 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("../types").ISpinner;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Sm: Story;
+export declare const AppearanceConcept: Story;
+export declare const AppearanceDone: Story;
+export declare const AppearanceError: Story;
+export declare const AppearanceInfo: Story;
+export declare const AppearanceProcessing: Story;
+export declare const AppearanceSuccess: Story;
+export declare const AppearanceWarning: Story;
+export declare const AppearanceWaiting: Story;

package/Elements/Spinner/stories/Spinner.stories.js

@@ -0,0 +1,56 @@
+import { Spinner } from '../';
+var meta = {
+    title: 'Elements/Spinner',
+    component: Spinner,
+    tags: ['autodocs'],
+    argTypes: {},
+};
+export default meta;
+export var Default = {
+    args: {},
+};
+export var Sm = {
+    args: {
+        variant: 'sm',
+    },
+};
+export var AppearanceConcept = {
+    args: {
+        appearance: 'concept',
+    },
+};
+export var AppearanceDone = {
+    args: {
+        appearance: 'done',
+    },
+};
+export var AppearanceError = {
+    args: {
+        appearance: 'error',
+    },
+};
+export var AppearanceInfo = {
+    args: {
+        appearance: 'info',
+    },
+};
+export var AppearanceProcessing = {
+    args: {
+        appearance: 'processing',
+    },
+};
+export var AppearanceSuccess = {
+    args: {
+        appearance: 'success',
+    },
+};
+export var AppearanceWarning = {
+    args: {
+        appearance: 'warning',
+    },
+};
+export var AppearanceWaiting = {
+    args: {
+        appearance: 'waiting',
+    },
+};

package/Elements/Spinner/styles.d.ts

@@ -0,0 +1,4 @@
+export declare const Svg: import("styled-components").StyledComponent<"svg", import("@xstyled/system").Theme, {
+    $variant: 'default' | 'sm';
+}, never>;
+export declare const Circle: import("styled-components").StyledComponent<"circle", import("@xstyled/system").Theme, {}, never>;

package/Elements/Spinner/styles.js

@@ -0,0 +1,20 @@
+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, { th } from '@xstyled/styled-components';
+import { keyframes } from 'styled-components';
+var KeyframesCircularDash = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    stroke-dasharray: 1px, 200px;\n    stroke-dashoffset: 0px;\n  }\n\n  50% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -15px;\n  }\n\n  100% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -125px;\n  }\n"], ["\n  0% {\n    stroke-dasharray: 1px, 200px;\n    stroke-dashoffset: 0px;\n  }\n\n  50% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -15px;\n  }\n\n  100% {\n    stroke-dasharray: 100px, 200px;\n    stroke-dashoffset: -125px;\n  }\n"])));
+var KeyframesCircularRotate = keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  100% {\n    transform: rotate(360deg);\n  }\n"], ["\n  100% {\n    transform: rotate(360deg);\n  }\n"])));
+export var Svg = styled.svg(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: ", "px;\n  height: ", "px;\n  animation: ", " 1.4s linear infinite;\n"], ["\n  width: ", "px;\n  height: ", "px;\n  animation: ", " 1.4s linear infinite;\n"])), function (_a) {
+    var $variant = _a.$variant;
+    return ($variant === 'sm' ? '16' : '40');
+}, function (_a) {
+    var $variant = _a.$variant;
+    return ($variant === 'sm' ? '16' : '40');
+}, KeyframesCircularRotate);
+export var Circle = styled.circle(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  animation: ", " 1.4s ease-in-out infinite;\n  stroke-dasharray: 80px, 200px;\n  stroke-dashoffset: 0px;\n  stroke: ", ";\n"], ["\n  animation: ", " 1.4s ease-in-out infinite;\n  stroke-dasharray: 80px, 200px;\n  stroke-dashoffset: 0px;\n  stroke: ", ";\n"])), KeyframesCircularDash, function (_a) {
+    var color = _a.color;
+    return (color ? th.color(color) : th.color('blue2'));
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Elements/Spinner/types.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export type AppearanceType = 'concept' | 'done' | 'error' | 'info' | 'processing' | 'success' | 'warning' | 'waiting';
+export interface SpinnerProps {
+    variant?: 'default' | 'sm';
+    appearance?: AppearanceType;
+}
+export type ISpinner = (props: SpinnerProps) => JSX.Element;

package/Elements/Spinner/types.js

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

package/Elements/Tag/Tag.d.ts

@@ -0,0 +1,3 @@
+import type { Props } from './types';
+export declare const Tag: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, Props, never>;
+export default Tag;

package/Elements/Tag/Tag.js

@@ -0,0 +1,59 @@
+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, { th } from '@xstyled/styled-components';
+var fontSizeMap = {
+    small: '14px',
+    medium: '16px',
+    big: '20px',
+};
+var paddingMap = {
+    small: '2px 8px',
+    medium: '7px 10px',
+    big: '12px 12px',
+};
+var borderRadiusMap = {
+    small: '6px',
+    medium: '20px',
+    big: '20px',
+};
+var getTextColor = function (isNotSelected, textColor) {
+    if (textColor) {
+        return th.color(textColor);
+    }
+    return isNotSelected ? th.color('blue2') : 'white';
+};
+var getBgColor = function (color) {
+    return color ? th.color(color) : 'rgba(157, 163, 169, 0.2)';
+};
+export var Tag = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  margin-right: 10px;\n  color: ", ";\n  width: fit-content;\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  text-align: center;\n  white-space: nowrap;\n  display: flex;\n  align-items: center;\n  font-size: 14px;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  & span {\n    &:first-letter {\n      text-transform: uppercase;\n    }\n  }\n}\n"], ["\n  background-color: ", ";\n  margin-right: 10px;\n  color: ", ";\n  width: fit-content;\n  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  text-align: center;\n  white-space: nowrap;\n  display: flex;\n  align-items: center;\n  font-size: 14px;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  & span {\n    &:first-letter {\n      text-transform: uppercase;\n    }\n  }\n}\n"])), function (_a) {
+    var color = _a.color;
+    return getBgColor(color);
+}, function (_a) {
+    var isNotSelected = _a.isNotSelected, textColor = _a.textColor;
+    return getTextColor(isNotSelected, textColor);
+}, function (_a) {
+    var size = _a.size;
+    return "border-radius: ".concat(borderRadiusMap[size || 'medium']);
+}, function (_a) {
+    var size = _a.size;
+    return "font-size: ".concat(fontSizeMap[size || 'medium']);
+}, function (_a) {
+    var size = _a.size;
+    return "padding: ".concat(paddingMap[size || 'medium']);
+}, function (_a) {
+    var border = _a.border;
+    return border && 'border: 1px solid rgba(0, 0, 0, 0.65);';
+}, function (_a) {
+    var opacity = _a.opacity;
+    return opacity && 'opacity: 0.7';
+}, function (_a) {
+    var pointer = _a.pointer;
+    return pointer && 'cursor: pointer;';
+}, function (_a) {
+    var hover = _a.hover;
+    return hover && '&: hover { opacity: 0.7}';
+});
+export default Tag;
+var templateObject_1;

package/Elements/Tag/index.d.ts

@@ -0,0 +1,4 @@
+import Tag from './Tag';
+export { palletes } from './palletes';
+export { Tag };
+export default Tag;

package/Elements/Tag/index.js

@@ -0,0 +1,4 @@
+import Tag from './Tag';
+export { palletes } from './palletes';
+export { Tag };
+export default Tag;

package/Elements/Tag/palletes.d.ts

@@ -0,0 +1,5 @@
+import type { Pallete } from './types';
+/**
+ * [string, string]: [background, text]
+ */
+export declare const palletes: Record<string, Pallete>;

package/Elements/Tag/palletes.js

@@ -0,0 +1,10 @@
+/**
+ * [string, string]: [background, text]
+ */
+export var palletes = {
+    greenWhite: { color: 'green60', textColor: 'white' },
+    blueBlue: { color: 'blue20', textColor: 'blue80' },
+    magentaWhite: { color: 'magenta60', textColor: 'white' },
+    magentaMagenta: { color: 'magenta20', textColor: 'magenta80' },
+    tealTeal: { color: 'teal20', textColor: 'teal90' },
+};

package/Elements/Tag/stories/Tag.stories.d.ts

@@ -0,0 +1,19 @@
+import type { StoryObj } from '@storybook/react';
+declare const meta: {
+    title: string;
+    component: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, import("../types").Props, never>;
+    tags: string[];
+    argTypes: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const AllPalletes: Story;
+export declare const Default: Story;
+export declare const RedTag: Story;
+export declare const NotSelected: Story;
+export declare const Pointer: Story;
+export declare const Hover: Story;
+export declare const Opacity: Story;
+export declare const Border: Story;
+export declare const Small: Story;
+export declare const Big: Story;

package/Elements/Tag/stories/Tag.stories.js

@@ -0,0 +1,72 @@
+import PredefinedTags from './components/predefinedTags';
+import { Tag } from '../';
+var meta = {
+    title: 'Elements/Tag',
+    component: Tag,
+    tags: ['autodocs'],
+    argTypes: {},
+};
+export default meta;
+export var AllPalletes = {
+    decorators: [PredefinedTags],
+};
+export var Default = {
+    args: {
+        children: 'Label',
+    },
+};
+export var RedTag = {
+    args: {
+        color: 'red1',
+        children: 'This tag has color red1',
+    },
+};
+export var NotSelected = {
+    args: {
+        isNotSelected: true,
+        children: 'This tag is not selected',
+        color: 'red1',
+    },
+};
+export var Pointer = {
+    args: {
+        pointer: true,
+        children: 'This tag has pointer',
+        color: 'red1',
+    },
+};
+export var Hover = {
+    args: {
+        hover: true,
+        children: 'This tag has hover effect',
+        color: 'red1',
+    },
+};
+export var Opacity = {
+    args: {
+        opacity: true,
+        children: 'This tag has opacity 0.7',
+        color: 'red1',
+    },
+};
+export var Border = {
+    args: {
+        border: true,
+        children: 'This tag has border',
+        color: 'red1',
+    },
+};
+export var Small = {
+    args: {
+        children: 'Small',
+        color: 'teal60',
+        size: 'small',
+    },
+};
+export var Big = {
+    args: {
+        children: 'Big',
+        color: 'teal60',
+        size: 'big',
+    },
+};

package/Elements/Tag/stories/components/predefinedTags.d.ts

@@ -0,0 +1,2 @@
+declare const PredefinedTags: () => JSX.Element;
+export default PredefinedTags;

package/Elements/Tag/stories/components/predefinedTags.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { x } from '@xstyled/styled-components';
+import { Tag } from '../../';
+import { palletes } from '../../palletes';
+var PredefinedTags = function () {
+    return (_jsx(x.div, { display: "flex", flexWrap: "wrap", fontFamily: "monospace", children: Object.keys(palletes).map(function (pallete, i) { return (_jsx(Tag, { color: palletes[pallete].color, textColor: palletes[pallete].textColor, children: pallete })); }) }));
+};
+export default PredefinedTags;

package/Elements/Tag/types.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export type Props = {
+    color?: string;
+    textColor?: string;
+    isNotSelected?: boolean;
+    pointer?: boolean;
+    hover?: boolean;
+    opacity?: boolean;
+    border?: boolean;
+    size?: 'small' | 'medium' | 'big';
+    children?: React.ReactNode;
+    onClick?: () => void;
+};
+export type Pallete = {
+    color: string;
+    textColor: string;
+};

package/Elements/Tag/types.js

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

package/Elements/Text/Text.d.ts

@@ -0,0 +1,3 @@
+import type { TextProps } from './types';
+declare const Text: (props: TextProps) => JSX.Element;
+export default Text;

package/Elements/Text/Text.js

@@ -0,0 +1,15 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { x } from '@xstyled/styled-components';
+var Text = function (props) { return _jsx(x.div, __assign({ as: "span" }, props)); };
+export default Text;

package/Elements/Text/index.d.ts

@@ -0,0 +1,3 @@
+import Text from './Text';
+export type { TextProps } from './types';
+export { Text };

package/Elements/Text/index.js

@@ -0,0 +1,2 @@
+import Text from './Text';
+export { Text };