@mailstep/design-system 0.8.26 → 0.8.27

package/ui/Elements/SpaceAround/SpaceAround.js

@@ -0,0 +1,168 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = {}, sourceKeys, key, i;
+    if (typeof Reflect !== "undefined" && Reflect.ownKeys) {
+        sourceKeys = Reflect.ownKeys(Object(source));
+        for(i = 0; i < sourceKeys.length; i++){
+            key = sourceKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+        return target;
+    }
+    target = _object_without_properties_loose(source, excluded);
+    if (Object.getOwnPropertySymbols) {
+        sourceKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceKeys.length; i++){
+            key = sourceKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\n          margin-top: ",
+        ";\n          margin-right: ",
+        ";\n          margin-bottom: ",
+        ";\n          margin-left: ",
+        ";\n        "
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "\n          display: flex;\n          justify-content: space-between;\n        "
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    var data = _tagged_template_literal([
+        "\n  width: ",
+        ";\n  position: relative;\n  box-sizing: border-box;\n  ",
+        ";\n  ",
+        ";\n"
+    ]);
+    _templateObject2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import { jsx } from "react/jsx-runtime";
+import styled, { x, css, useTheme, th } from "@xstyled/styled-components";
+var Wrapper = styled(x.div)(_templateObject2(), function(param) {
+    var $marginLeft = param.$marginLeft, $marginRight = param.$marginRight;
+    return "calc(100% - ".concat($marginLeft || "0px", " - ").concat($marginRight || "0px", ")");
+}, function(param) {
+    var $spaceAround = param.$spaceAround;
+    return $spaceAround ? css(_templateObject(), $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(param) {
+    var $spaceBetween = param.$spaceBetween;
+    return $spaceBetween ? css(_templateObject1()) : "";
+});
+var SpaceAroundWrap = function SpaceAroundWrap(_0) {
+    var children = _0.children, _0_spaceBetween = _0.spaceBetween, spaceBetween = _0_spaceBetween === void 0 ? false : _0_spaceBetween, _0_spaceAround = _0.spaceAround, spaceAround = _0_spaceAround === void 0 ? true : _0_spaceAround, rest = _object_without_properties(_0, [
+        "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 /* @__PURE__ */ jsx(Wrapper, _object_spread_props(_object_spread({
+        $spaceAround: spaceAround,
+        $spaceBetween: spaceBetween,
+        $marginRight: themeMarginRight,
+        $marginLeft: themeMarginLeft
+    }, rest), {
+        children: children
+    }));
+};
+var SpaceAround_default = SpaceAroundWrap;
+export { SpaceAround_default as default };

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

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

package/ui/Elements/SpaceAround/index.js

@@ -0,0 +1,3 @@
+import SpaceAroundWrap from "./SpaceAround";
+var SpaceAround_default = SpaceAroundWrap;
+export { SpaceAroundWrap, SpaceAround_default as default };

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

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

package/ui/Elements/Spinner/Spinner.d.ts

@@ -1,6 +1,5 @@
-import { FC } from 'react';
-import { SpinnerProps } from './types';
-
+import { type FC } from 'react';
+import { type SpinnerProps } from './types';
 export declare const appearanceToColorMap: {
     error: string;
     concept: string;

package/ui/Elements/Spinner/Spinner.js

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

package/ui/Elements/Spinner/index.d.js

@@ -0,0 +1,2 @@
+var index_d_default = Spinner;
+export { index_d_default as default };

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

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

package/ui/Elements/Spinner/index.js

@@ -0,0 +1,3 @@
+import Spinner from "./Spinner";
+var Spinner_default = Spinner;
+export { Spinner, Spinner_default as default };

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

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

package/ui/Elements/Spinner/styles.d.ts

@@ -1,4 +1,4 @@
-export declare const Svg: import('styled-components').StyledComponent<"svg", import('@xstyled/system').Theme, {
+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

@@ -0,0 +1,66 @@
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\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"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "\n  100% {\n    transform: rotate(360deg);\n  }\n"
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    var data = _tagged_template_literal([
+        "\n  width: ",
+        "px;\n  height: ",
+        "px;\n  animation: ",
+        " 1.4s linear infinite;\n"
+    ]);
+    _templateObject2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject3() {
+    var data = _tagged_template_literal([
+        "\n  animation: ",
+        " 1.4s ease-in-out infinite;\n  stroke-dasharray: 80px, 200px;\n  stroke-dashoffset: 0px;\n  stroke: ",
+        ";\n"
+    ]);
+    _templateObject3 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import styled, { th, keyframes } from "@xstyled/styled-components";
+var KeyframesCircularDash = keyframes(_templateObject());
+var KeyframesCircularRotate = keyframes(_templateObject1());
+var Svg = styled.svg(_templateObject2(), function(param) {
+    var $variant = param.$variant;
+    return $variant === "sm" ? "16" : "40";
+}, function(param) {
+    var $variant = param.$variant;
+    return $variant === "sm" ? "16" : "40";
+}, KeyframesCircularRotate);
+var Circle = styled.circle(_templateObject3(), KeyframesCircularDash, function(param) {
+    var color = param.color;
+    return color ? th.color(color) : th.color("blue2");
+});
+export { Circle, Svg };

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

@@ -0,0 +1,78 @@
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\n  ",
+        ";\n  width: 100%;\n  border-collapse: collapse;\n  color: blue2;\n"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "\n  ",
+        ";\n  &:nth-child(even) {\n    background-color: bgLightGray;\n  }\n"
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    var data = _tagged_template_literal([
+        "\n  ",
+        ";\n"
+    ]);
+    _templateObject2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject3() {
+    var data = _tagged_template_literal([
+        "\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"
+    ]);
+    _templateObject3 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject4() {
+    var data = _tagged_template_literal([
+        "\n  ",
+        ";\n  td {\n    padding: 9px 4px;\n  }\n"
+    ]);
+    _templateObject4 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject5() {
+    var data = _tagged_template_literal([
+        "\n  ",
+        ";\n  background-color: bgLightGray1;\n\n  th {\n    padding: 10px 8px;\n  }\n"
+    ]);
+    _templateObject5 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import styled, { system } from "@xstyled/styled-components";
+var Table = styled.table(_templateObject(), system);
+var Tr = styled.tr(_templateObject1(), system);
+var Td = styled.td(_templateObject2(), system);
+var Th = styled.th(_templateObject3(), system);
+var Tbody = styled.tbody(_templateObject4(), system);
+var Thead = styled.thead(_templateObject5(), system);
+export { Table, Tbody, Td, Th, Thead, Tr };

package/ui/Elements/Table/index.js

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

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/Tag/Tag.d.ts

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

@@ -0,0 +1,87 @@
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\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"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+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 getTextColor(isNotSelected, textColor) {
+    if (textColor) {
+        return th.color(textColor);
+    }
+    return isNotSelected ? th.color("blue2") : "white";
+};
+var getBgColor = function getBgColor(color) {
+    return color ? th.color(color) : "rgba(157, 163, 169, 0.2)";
+};
+var Tag = styled.div(_templateObject(), function(param) {
+    var color = param.color;
+    return getBgColor(color);
+}, function(param) {
+    var marginRight = param.marginRight;
+    return marginRight || "10px";
+}, function(param) {
+    var isNotSelected = param.isNotSelected, textColor = param.textColor;
+    return getTextColor(isNotSelected, textColor);
+}, function(param) {
+    var size = param.size;
+    return "border-radius: ".concat(borderRadiusMap[size || "medium"]);
+}, function(param) {
+    var size = param.size;
+    return "font-size: ".concat(fontSizeMap[size || "medium"]);
+}, function(param) {
+    var size = param.size;
+    return "padding: ".concat(paddingMap[size || "medium"]);
+}, function(param) {
+    var border = param.border;
+    return border && "border: 1px solid rgba(0, 0, 0, 0.65);";
+}, function(param) {
+    var opacity = param.opacity;
+    return opacity && "opacity: 0.7";
+}, function(param) {
+    var pointer = param.pointer;
+    return pointer && "cursor: pointer;";
+}, function(param) {
+    var hover = param.hover;
+    return hover && "&: hover { opacity: 0.7}";
+});
+var Tag_default = Tag;
+export { Tag_default as default };

package/ui/Elements/Tag/index.d.js

@@ -0,0 +1,3 @@
+import { Props, Pallete } from "./types";
+var index_d_default = Tag;
+export { Pallete, Props, index_d_default as default };

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

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

package/ui/Elements/Tag/index.js

@@ -0,0 +1,4 @@
+import Tag from "./Tag";
+import { palettes } from "./palettes";
+var Tag_default = Tag;
+export { Tag_default as default, palettes };

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

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

package/ui/Elements/Tag/palettes.js

@@ -0,0 +1,47 @@
+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"
+    }
+};
+export { palettes };

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

@@ -1,8 +1,7 @@
-import { StoryObj } from '@storybook/react-webpack5';
-
+import type { 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: {};
 };