@mailstep/design-system 0.8.30 → 0.8.31-beta.2

package/ui/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/ui/Elements/Spinner/styles.d.ts

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

package/ui/Elements/Spinner/styles.js

@@ -1,36 +1,19 @@
-import styled$1, { keyframes, th } from "@xstyled/styled-components";
-//#region packages/ui/Elements/Spinner/styles.ts
-const KeyframesCircularDash = keyframes`
-  0% {
-    stroke-dasharray: 1px, 200px;
-    stroke-dashoffset: 0px;
-  }
-
-  50% {
-    stroke-dasharray: 100px, 200px;
-    stroke-dashoffset: -15px;
-  }
-
-  100% {
-    stroke-dasharray: 100px, 200px;
-    stroke-dashoffset: -125px;
-  }
-`;
-const KeyframesCircularRotate = keyframes`
-  100% {
-    transform: rotate(360deg);
-  }
-`;
-const Svg = styled$1.svg`
-  width: ${({ $variant }) => $variant === "sm" ? "16" : "40"}px;
-  height: ${({ $variant }) => $variant === "sm" ? "16" : "40"}px;
-  animation: ${KeyframesCircularRotate} 1.4s linear infinite;
-`;
-const Circle = styled$1.circle`
-  animation: ${KeyframesCircularDash} 1.4s ease-in-out infinite;
-  stroke-dasharray: 80px, 200px;
-  stroke-dashoffset: 0px;
-  stroke: ${({ color }) => color ? th.color(color) : th.color("blue2")};
-`;
-//#endregion
-export { Circle, Svg };
+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, keyframes } from '@xstyled/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/ui/Elements/Table/Table.d.ts

@@ -1,6 +1,6 @@
-export declare const Table: import("styled-components").StyledComponent<"table", import("@xstyled/system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, never>;
-export declare const Tr: import("styled-components").StyledComponent<"tr", import("@xstyled/system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, never>;
-export declare const Td: import("styled-components").StyledComponent<"td", import("@xstyled/system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, never>;
-export declare const Th: import("styled-components").StyledComponent<"th", import("@xstyled/system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, never>;
-export declare const Tbody: import("styled-components").StyledComponent<"tbody", import("@xstyled/system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, never>;
-export declare const Thead: import("styled-components").StyledComponent<"thead", import("@xstyled/system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, never>;
+export declare const Table: import('styled-components').StyledComponent<"table", import('@xstyled/system').Theme, import('@xstyled/util').Props<import('@xstyled/system').Theme> & import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, never>;
+export declare const Tr: import('styled-components').StyledComponent<"tr", import('@xstyled/system').Theme, import('@xstyled/util').Props<import('@xstyled/system').Theme> & import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, never>;
+export declare const Td: import('styled-components').StyledComponent<"td", import('@xstyled/system').Theme, import('@xstyled/util').Props<import('@xstyled/system').Theme> & import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, never>;
+export declare const Th: import('styled-components').StyledComponent<"th", import('@xstyled/system').Theme, import('@xstyled/util').Props<import('@xstyled/system').Theme> & import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, never>;
+export declare const Tbody: import('styled-components').StyledComponent<"tbody", import('@xstyled/system').Theme, import('@xstyled/util').Props<import('@xstyled/system').Theme> & import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, never>;
+export declare const Thead: import('styled-components').StyledComponent<"thead", import('@xstyled/system').Theme, import('@xstyled/util').Props<import('@xstyled/system').Theme> & import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, never>;

package/ui/Elements/Table/Table.js

@@ -1,45 +1,12 @@
-import styled$1, { system } from "@xstyled/styled-components";
-//#region packages/ui/Elements/Table/Table.tsx
-const Table = styled$1.table`
-  ${system};
-  width: 100%;
-  border-collapse: collapse;
-  color: blue2;
-`;
-const Tr = styled$1.tr`
-  ${system};
-  &:nth-child(even) {
-    background-color: bgLightGray;
-  }
-`;
-const Td = styled$1.td`
-  ${system};
-`;
-const Th = styled$1.th`
-  ${system};
-  font-weight: semiBold;
-  text-align: left;
-  border-top: 1px solid;
-  border-top-color: lightGray6;
-
-  &:not(:last-child) {
-    border-right: 1px dashed;
-    border-right-color: lightGray6;
-  }
-`;
-const Tbody = styled$1.tbody`
-  ${system};
-  td {
-    padding: 9px 4px;
-  }
-`;
-const Thead = styled$1.thead`
-  ${system};
-  background-color: bgLightGray1;
-
-  th {
-    padding: 10px 8px;
-  }
-`;
-//#endregion
-export { Table, Tbody, Td, Th, Thead, Tr };
+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, { system } from '@xstyled/styled-components';
+export var Table = styled.table(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n  width: 100%;\n  border-collapse: collapse;\n  color: blue2;\n"], ["\n  ", ";\n  width: 100%;\n  border-collapse: collapse;\n  color: blue2;\n"])), system);
+export var Tr = styled.tr(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n  &:nth-child(even) {\n    background-color: bgLightGray;\n  }\n"], ["\n  ", ";\n  &:nth-child(even) {\n    background-color: bgLightGray;\n  }\n"])), system);
+export var Td = styled.td(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), system);
+export var Th = styled.th(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  font-weight: semiBold;\n  text-align: left;\n  border-top: 1px solid;\n  border-top-color: lightGray6;\n\n  &:not(:last-child) {\n    border-right: 1px dashed;\n    border-right-color: lightGray6;\n  }\n"], ["\n  ", ";\n  font-weight: semiBold;\n  text-align: left;\n  border-top: 1px solid;\n  border-top-color: lightGray6;\n\n  &:not(:last-child) {\n    border-right: 1px dashed;\n    border-right-color: lightGray6;\n  }\n"])), system);
+export var Tbody = styled.tbody(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", ";\n  td {\n    padding: 9px 4px;\n  }\n"], ["\n  ", ";\n  td {\n    padding: 9px 4px;\n  }\n"])), system);
+export var Thead = styled.thead(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", ";\n  background-color: bgLightGray1;\n\n  th {\n    padding: 10px 8px;\n  }\n"], ["\n  ", ";\n  background-color: bgLightGray1;\n\n  th {\n    padding: 10px 8px;\n  }\n"])), system);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/ui/Elements/Table/index.js

@@ -1,2 +1 @@
-import { Table, Tbody, Td, Th, Thead, Tr } from "./Table.js";
-export { Table, Tbody, Td, Th, Thead, Tr };
+export { Table, Thead, Tr, Th, Td, Tbody } from './Table';

package/ui/Elements/Table/stories/Table.stories.d.ts

@@ -1,6 +1,6 @@
 declare const meta: {
     title: string;
-    component: import("styled-components").StyledComponent<"table", import("@xstyled/system").Theme, import("@xstyled/util").Props<import("@xstyled/system").Theme> & import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, never>;
+    component: import('styled-components').StyledComponent<"table", import('@xstyled/system').Theme, import('@xstyled/util').Props<import('@xstyled/system').Theme> & import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, never>;
     tags: string[];
     argTypes: {};
 };

package/ui/Elements/Table/stories/Table.stories.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Table, Thead, Tr, Th, Td, Tbody } from '../';
+var meta = {
+    title: 'Elements/Table',
+    component: Table,
+    tags: ['autodocs'],
+    argTypes: {}
+};
+export default meta;
+export var Default = function () { return (_jsxs(Table, { children: [_jsx(Thead, { children: _jsxs(Tr, { children: [_jsx(Th, { children: "Name" }), _jsx(Th, { children: "Address" }), _jsx(Th, { children: "City" })] }) }), _jsxs(Tbody, { children: [_jsxs(Tr, { children: [_jsx(Td, { children: "John Doe" }), _jsx(Td, { children: "123 Main St" }), _jsx(Td, { children: "Anytown" })] }), _jsxs(Tr, { children: [_jsx(Td, { children: "John Doe" }), _jsx(Td, { children: "123 Main St" }), _jsx(Td, { children: "Anytown" })] }), _jsxs(Tr, { children: [_jsx(Td, { children: "John Doe" }), _jsx(Td, { children: "123 Main St" }), _jsx(Td, { children: "Anytown" })] })] })] })); };

package/ui/Elements/Tag/Tag.d.ts

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

package/ui/Elements/Tag/Tag.js

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

@@ -1,4 +1,5 @@
-import Tag from './Tag';
+import { default as Tag } from './Tag';
+
 export { palettes } from './palettes';
 export { type Palette } from './types';
 export default Tag;

package/ui/Elements/Tag/index.js

@@ -1,6 +1,3 @@
-import Tag from "./Tag.js";
-import { palettes } from "./palettes.js";
-//#region packages/ui/Elements/Tag/index.ts
-var Tag_default = Tag;
-//#endregion
-export { Tag_default as default, palettes };
+import Tag from './Tag';
+export { palettes } from './palettes';
+export default Tag;

package/ui/Elements/Tag/palettes.d.ts

@@ -1,4 +1,5 @@
-import type { Palette, PaletteNames } from './types';
+import { Palette, PaletteNames } from './types';
+
 /**
  * [string, string]: [background, text]
  */

package/ui/Elements/Tag/palettes.js

@@ -1,52 +1,16 @@
-//#region packages/ui/Elements/Tag/palettes.ts
 /**
-* [string, string]: [background, text]
-*/
-const palettes = {
-	greenWhite: {
-		color: "green60",
-		textColor: "white"
-	},
-	greenGreen: {
-		color: "green30",
-		textColor: "green80"
-	},
-	blueBlue: {
-		color: "blue20",
-		textColor: "blue80"
-	},
-	magentaWhite: {
-		color: "magenta60",
-		textColor: "white"
-	},
-	magentaMagenta: {
-		color: "magenta20",
-		textColor: "magenta80"
-	},
-	tealTeal: {
-		color: "teal20",
-		textColor: "teal90"
-	},
-	orangeOrange: {
-		color: "orange20",
-		textColor: "orange80"
-	},
-	grayGray: {
-		color: "neutral20",
-		textColor: "typoPrimary"
-	},
-	redWhite: {
-		color: "red1",
-		textColor: "white"
-	},
-	redRed: {
-		color: "red30",
-		textColor: "red1"
-	},
-	purplePurple: {
-		color: "purple20",
-		textColor: "purple80"
-	}
+ * [string, string]: [background, text]
+ */
+export var palettes = {
+    greenWhite: { color: 'green60', textColor: 'white' },
+    greenGreen: { color: 'green30', textColor: 'green80' },
+    blueBlue: { color: 'blue20', textColor: 'blue80' },
+    magentaWhite: { color: 'magenta60', textColor: 'white' },
+    magentaMagenta: { color: 'magenta20', textColor: 'magenta80' },
+    tealTeal: { color: 'teal20', textColor: 'teal90' },
+    orangeOrange: { color: 'orange20', textColor: 'orange80' },
+    grayGray: { color: 'neutral20', textColor: 'typoPrimary' },
+    redWhite: { color: 'red1', textColor: 'white' },
+    redRed: { color: 'red30', textColor: 'red1' },
+    purplePurple: { color: 'purple20', textColor: 'purple80' }
 };
-//#endregion
-export { palettes };

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

@@ -1,7 +1,8 @@
-import type { StoryObj } from '@storybook/react-webpack5';
+import { StoryObj } from '@storybook/react-webpack5';
+
 declare const meta: {
     title: string;
-    component: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, import("../types").Props, never>;
+    component: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, import('../types').Props, never>;
     tags: string[];
     argTypes: {};
 };

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

@@ -0,0 +1,72 @@
+import Tag from '../';
+import PredefinedTags from './components/predefinedTags';
+var meta = {
+    title: 'Elements/Tag',
+    component: Tag,
+    tags: ['autodocs'],
+    argTypes: {}
+};
+export default meta;
+export var AllPalettes = {
+    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/ui/Elements/Tag/stories/components/predefinedTags.js

@@ -1,19 +1,8 @@
-import Tag from "../../Tag.js";
-import { palettes } from "../../palettes.js";
-import { x } from "@xstyled/styled-components";
-import { jsx } from "react/jsx-runtime";
-//#region packages/ui/Elements/Tag/stories/components/predefinedTags.tsx
-const PredefinedTags = () => {
-	return /* @__PURE__ */ jsx(x.div, {
-		display: "flex",
-		flexWrap: "wrap",
-		fontFamily: "monospace",
-		children: Object.keys(palettes).map((paletteName) => /* @__PURE__ */ jsx(Tag, {
-			color: palettes[paletteName].color,
-			textColor: palettes[paletteName].textColor,
-			children: paletteName
-		}, paletteName))
-	});
+import { jsx as _jsx } from "react/jsx-runtime";
+import Tag from '../../Tag';
+import { palettes } from '../../palettes';
+import { x } from '@xstyled/styled-components';
+var PredefinedTags = function () {
+    return (_jsx(x.div, { display: "flex", flexWrap: "wrap", fontFamily: "monospace", children: Object.keys(palettes).map(function (paletteName) { return (_jsx(Tag, { color: palettes[paletteName].color, textColor: palettes[paletteName].textColor, children: paletteName }, paletteName)); }) }));
 };
-//#endregion
-export { PredefinedTags as default };
+export default PredefinedTags;

package/ui/Elements/Tag/types.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export type Props = {
     color?: string;
     textColor?: string;

package/ui/Elements/Text/Text.d.ts

@@ -1,4 +1,5 @@
-import { type FC } from 'react';
-import type { TextProps } from './types';
+import { FC } from 'react';
+import { TextProps } from './types';
+
 declare const Text: FC<TextProps>;
 export default Text;

package/ui/Elements/Text/Text.js

@@ -1,10 +1,29 @@
-import "react";
-import { x } from "@xstyled/styled-components";
-import { jsx } from "react/jsx-runtime";
-//#region packages/ui/Elements/Text/Text.tsx
-const Text = ({ as = "span", ...props }) => /* @__PURE__ */ jsx(x.div, {
-	as,
-	...props
-});
-//#endregion
-export { Text as default };
+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 { x } from '@xstyled/styled-components';
+var Text = function (_a) {
+    var _b = _a.as, as = _b === void 0 ? 'span' : _b, props = __rest(_a, ["as"]);
+    return _jsx(x.div, __assign({ as: as }, props));
+};
+export default Text;

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

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

package/ui/Elements/Text/index.js

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

package/ui/Elements/Text/stories/Text.stories.d.ts

@@ -1,7 +1,8 @@
-import type { StoryObj } from '@storybook/react-webpack5';
+import { StoryObj } from '@storybook/react-webpack5';
+
 declare const meta: {
     title: string;
-    component: import("react").FC<import("..").TextProps>;
+    component: import('react').FC<import('..').TextProps>;
     tags: string[];
     argTypes: {};
 };