@mailstep/design-system 0.8.26 → 0.8.27

package/ui/Elements/Alert/Alert.js

@@ -0,0 +1,100 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { x, useTheme } from "@xstyled/styled-components";
+import { th } from "@xstyled/styled-components";
+import { Icon } from "../Icon";
+import { IconWrap, LinkWrapper, StyledAlert, VerticalSeparator, Text, Title, CloseBtn, ActionButton, Description } from "./styles";
+var alertBackgroundColor = {
+    success: "green10",
+    info: "blue10",
+    warning: "yellow10",
+    danger: "red10"
+};
+var alertColorFill = {
+    success: "successColor",
+    info: "blue60",
+    warning: "yellow70",
+    danger: "dangerColor"
+};
+var alertIconMap = {
+    success: "circleCheck",
+    info: "info",
+    warning: "circleTriangle",
+    danger: "circleTriangle"
+};
+var Alert = function Alert(props) {
+    var intent = props.intent, inline = props.inline, onClick = props.onClick, onClose = props.onClose, title = props.title, text = props.text, href = props.href, actionLabel = props.actionLabel, actionType = props.actionType, desc = props.desc, _props_closeAnywhere = props.closeAnywhere, closeAnywhere = _props_closeAnywhere === void 0 ? false : _props_closeAnywhere;
+    var theme = useTheme();
+    var bgColor = th.color(intent ? alertBackgroundColor[intent] : "transparent")({
+        theme: theme
+    });
+    var colorFill = th.color(intent ? alertColorFill[intent] : "transparent")({
+        theme: theme
+    });
+    var icon = intent && alertIconMap[intent];
+    return /* @__PURE__ */ jsxs(StyledAlert, {
+        $bgColor: bgColor,
+        $colorFill: colorFill,
+        $inline: inline,
+        onClick: closeAnywhere ? onClose : void 0,
+        children: [
+            /* @__PURE__ */ jsxs(x.div, {
+                display: "flex",
+                alignItems: "center",
+                children: [
+                    inline && /* @__PURE__ */ jsx(VerticalSeparator, {
+                        $colorFill: colorFill
+                    }),
+                    icon && /* @__PURE__ */ jsx(IconWrap, {
+                        children: /* @__PURE__ */ jsx(Icon, {
+                            icon: icon,
+                            size: "20px",
+                            fill: colorFill
+                        })
+                    }),
+                    /* @__PURE__ */ jsxs("div", {
+                        children: [
+                            /* @__PURE__ */ jsx(Title, {
+                                children: title
+                            }),
+                            /* @__PURE__ */ jsxs(Text, {
+                                children: [
+                                    " ",
+                                    text
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /* @__PURE__ */ jsxs(x.div, {
+                display: "flex",
+                alignItems: "center",
+                children: [
+                    href && actionType === "link" && /* @__PURE__ */ jsx(LinkWrapper, {
+                        $colorFill: colorFill,
+                        to: href,
+                        children: actionLabel !== null && actionLabel !== void 0 ? actionLabel : "Link"
+                    }),
+                    onClick && actionType === "button" && /* @__PURE__ */ jsx(ActionButton, {
+                        $colorFill: colorFill,
+                        onClick: onClick,
+                        children: actionLabel !== null && actionLabel !== void 0 ? actionLabel : "Submit"
+                    }),
+                    onClose && !closeAnywhere && /* @__PURE__ */ jsx(CloseBtn, {
+                        onClick: onClose,
+                        children: /* @__PURE__ */ jsx(Icon, {
+                            icon: "close",
+                            size: "15px",
+                            fill: "gray"
+                        })
+                    }),
+                    desc && /* @__PURE__ */ jsx(Description, {
+                        children: desc
+                    })
+                ]
+            })
+        ]
+    });
+};
+var Alert_default = Alert;
+export { Alert_default as default };

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

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

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

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

package/ui/Elements/Alert/index.js

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

package/ui/Elements/Alert/stories/Alert.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('../types').IAlert;
+    component: import("../types").IAlert;
     tags: string[];
     argTypes: {};
 };

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

@@ -1,15 +1,15 @@
-export declare const StyledAlert: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import('react').ReactElement<any, string>, any, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme> & {
+export declare const StyledAlert: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, any, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme> & {
     $inline?: boolean;
     $colorFill: string;
     $bgColor: string;
 }, "color">;
-export declare const VerticalSeparator: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import('react').ReactElement<any, string>, any, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme> & {
+export declare const VerticalSeparator: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, any, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme> & {
     $colorFill?: string;
 }, "color">;
-export declare const IconWrap: import('styled-components').StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import('react').ReactElement<any, string>, any, import('@xstyled/system').SystemProps<import('@xstyled/system').Theme>, "color">;
-export declare const Title: import('styled-components').StyledComponent<"span", any, {}, never>;
-export declare const Text: import('styled-components').StyledComponent<"span", any, {}, never>;
-export declare const LinkWrapper: import('styled-components').StyledComponent<import('react').FC<{
+export declare const IconWrap: import("styled-components").StyledComponent<(props: Omit<JSX.IntrinsicElements[string], "color">) => import("react").ReactElement<any, string>, any, import("@xstyled/system").SystemProps<import("@xstyled/system").Theme>, "color">;
+export declare const Title: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const Text: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const LinkWrapper: import("styled-components").StyledComponent<import("react").FC<{
     as?: any;
     children?: React.ReactNode;
     to?: string | {
@@ -26,8 +26,8 @@ export declare const LinkWrapper: import('styled-components').StyledComponent<im
 }>, any, {
     $colorFill: string;
 }, never>;
-export declare const ActionButton: import('styled-components').StyledComponent<"button", any, {
+export declare const ActionButton: import("styled-components").StyledComponent<"button", any, {
     $colorFill: string;
 }, never>;
-export declare const CloseBtn: import('styled-components').StyledComponent<"button", any, {}, never>;
-export declare const Description: import('styled-components').StyledComponent<"div", any, import('@xstyled/util').Props<import('@xstyled/system').Theme>, never>;
+export declare const CloseBtn: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const Description: import("styled-components").StyledComponent<"div", any, import("@xstyled/util").Props<import("@xstyled/system").Theme>, never>;

package/ui/Elements/Alert/styles.js

@@ -0,0 +1,127 @@
+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  width: calc(100vw - 20px);\n  display: flex;\n  min-height: 48px;\n  align-items: center;\n  justify-content: space-between;\n  border: ",
+        ";\n  border-radius: 8px;\n  background-color: ",
+        ";\n  color: ",
+        ";\n  font-family: ",
+        ";\n  padding: 6px 5px 6px 5px;\n  margin-bottom: 5px;\n  position: sticky;\n  left: 10px;\n  @media (min-width: 1024px) {\n    position: relative;\n    left: 0;\n    width: 100%;\n  }\n"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "\n  width: 4px;\n  height: 36px;\n  border-radius: 94px;\n  background-color: ",
+        ";\n"
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    var data = _tagged_template_literal([
+        "\n  margin: 0 13px 0 9px;\n"
+    ]);
+    _templateObject2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject3() {
+    var data = _tagged_template_literal([
+        "\n  font-size: 14px;\n  line-height: 18px;\n  font-weight: 600;\n"
+    ]);
+    _templateObject3 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject4() {
+    var data = _tagged_template_literal([
+        "\n  font-size: 14px;\n  line-height: 20px;\n  font-weight: 400;\n"
+    ]);
+    _templateObject4 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject5() {
+    var data = _tagged_template_literal([
+        "\n  font-size: 14px;\n  font-weight: 600;\n  color: ",
+        ";\n  margin-right: 10px;\n"
+    ]);
+    _templateObject5 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject6() {
+    var data = _tagged_template_literal([
+        "\n  margin-right: 10px;\n  font-size: 14px;\n  font-weight: 600;\n  color: ",
+        ";\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n"
+    ]);
+    _templateObject6 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject7() {
+    var data = _tagged_template_literal([
+        "\n  height: 30px;\n  width: 30px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: none;\n  margin-right: 5px;\n  background-color: transparent;\n  & :hover {\n    cursor: pointer;\n  }\n"
+    ]);
+    _templateObject7 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject8() {
+    var data = _tagged_template_literal([
+        "\n  position: absolute;\n  top: 3px;\n  right: 8px;\n  color: ",
+        ";\n  font-size: 10px;\n"
+    ]);
+    _templateObject8 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import styled from "styled-components";
+import { Link } from "../Link";
+import { x, th } from "@xstyled/styled-components";
+var StyledAlert = styled(x.div)(_templateObject(), function(param) {
+    var $inline = param.$inline, $colorFill = param.$colorFill;
+    return $inline ? "solid 1px ".concat($colorFill) : "none";
+}, function(param) {
+    var $bgColor = param.$bgColor;
+    return $bgColor;
+}, th("colors.textPrimary"), th("fonts.primary"));
+var VerticalSeparator = styled(x.div)(_templateObject1(), function(param) {
+    var $colorFill = param.$colorFill;
+    return $colorFill;
+});
+var IconWrap = styled(x.div)(_templateObject2());
+var Title = styled.span(_templateObject3());
+var Text = styled.span(_templateObject4());
+var LinkWrapper = styled(Link)(_templateObject5(), function(param) {
+    var $colorFill = param.$colorFill;
+    return $colorFill;
+});
+var ActionButton = styled.button(_templateObject6(), function(param) {
+    var $colorFill = param.$colorFill;
+    return $colorFill;
+});
+var CloseBtn = styled.button(_templateObject7());
+var Description = styled.div(_templateObject8(), th("colors.gray"));
+export { ActionButton, CloseBtn, Description, IconWrap, LinkWrapper, StyledAlert, Text, Title, VerticalSeparator };

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

@@ -1,5 +1,4 @@
-import { FC, ReactNode } from 'react';
-
+import type { FC, ReactNode } from 'react';
 export type AlertProps = {
     intent?: 'success' | 'info' | 'warning' | 'danger';
     inline?: boolean;

package/ui/Elements/AsyncSelect/AsyncSelect.d.ts

@@ -1,8 +1,7 @@
-import { FC } from 'react';
-import { Option } from '../Select/types';
-import { SpaceAround } from '../SpaceAround';
-import { AsyncProps } from 'react-select/async';
-
+import { type FC } from 'react';
+import { type Option } from '../Select/types';
+import { type SpaceAround } from '../SpaceAround';
+import { type AsyncProps } from 'react-select/async';
 export type AsyncSelectProps = {
     name?: string;
     error?: string;

package/ui/Elements/AsyncSelect/AsyncSelect.js

@@ -0,0 +1,161 @@
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+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 _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+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 _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 _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+import { jsx, jsxs } from "react/jsx-runtime";
+import ErrorMessage from "../ErrorMessage/ErrorMessage";
+import { FieldLabel } from "../Label";
+import { StyledAsyncSelect, Wrapper } from "../Select/styles";
+import { useStylesAndComponents } from "../Select/themes";
+import SpaceAroundWrap from "../SpaceAround";
+import { i18n } from "@lingui/core";
+var AsyncSelect = function AsyncSelect(_0) {
+    var error = _0.error, label = _0.label, className = _0.className, spaceAround = _0.spaceAround, name = _0.name, placeholder = _0.placeholder, _0_style = _0.style, style = _0_style === void 0 ? "form" : _0_style, _0_optionVariant = _0.optionVariant, optionVariant = _0_optionVariant === void 0 ? "checkbox" : _0_optionVariant, _0_multiLabelVariant = _0.multiLabelVariant, multiLabelVariant = _0_multiLabelVariant === void 0 ? "count" : _0_multiLabelVariant, props = _object_without_properties(_0, [
+        "error",
+        "label",
+        "className",
+        "spaceAround",
+        "name",
+        "placeholder",
+        "style",
+        "optionVariant",
+        "multiLabelVariant"
+    ]);
+    var _useStylesAndComponents = _sliced_to_array(useStylesAndComponents(style, optionVariant, multiLabelVariant), 3), customComponents = _useStylesAndComponents[0], customTheme = _useStylesAndComponents[1], customStyles = _useStylesAndComponents[2];
+    return /* @__PURE__ */ jsxs(SpaceAroundWrap, {
+        spaceAround: spaceAround,
+        className: className,
+        children: [
+            /* @__PURE__ */ jsxs(Wrapper, {
+                children: [
+                    label && /* @__PURE__ */ jsx(FieldLabel, {
+                        htmlFor: name,
+                        children: label
+                    }),
+                    /* @__PURE__ */ jsx(StyledAsyncSelect, _object_spread({
+                        id: name,
+                        name: name,
+                        theme: customTheme,
+                        components: customComponents,
+                        styles: customStyles,
+                        classNamePrefix: "react-select",
+                        placeholder: placeholder || i18n._({
+                            id: "components.dropdown.placeholder",
+                            message: "Select..."
+                        })
+                    }, props))
+                ]
+            }),
+            error && /* @__PURE__ */ jsx(ErrorMessage, {
+                children: error
+            })
+        ]
+    });
+};
+export { AsyncSelect };

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

@@ -1,4 +1,3 @@
-import { AsyncSelect, AsyncSelectProps } from './AsyncSelect';
-
+import { AsyncSelect, type AsyncSelectProps } from './AsyncSelect';
 export default AsyncSelect;
 export type { AsyncSelectProps };

package/ui/Elements/AsyncSelect/index.js

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

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

@@ -1,6 +1,6 @@
 declare const meta: {
     title: string;
-    component: import('react').FC<import('..').AsyncSelectProps>;
+    component: import("react").FC<import("..").AsyncSelectProps>;
     tags: string[];
     argTypes: {};
 };

package/ui/Elements/Avatar/Avatar.d.ts

@@ -1,4 +1,3 @@
-import { FC } from 'react';
-import { Props } from './types';
-
+import { type FC } from 'react';
+import { type Props } from './types';
 export declare const Avatar: FC<Props>;

package/ui/Elements/Avatar/Avatar.js

@@ -0,0 +1,153 @@
+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  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 50%;\n  overflow: hidden;\n  color: ",
+        ";\n  background-color: ",
+        ";\n  width: ",
+        ";\n  height: ",
+        ";\n  :hover {\n    background-color: ",
+        ";\n  }\n"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import { Fragment, jsx } from "react/jsx-runtime";
+import { Profile } from "../Icon";
+import styled, { th } from "@xstyled/styled-components";
+var defaultDimension = 100;
+var StyledAvatarWrap = styled.div(_templateObject(), function(props) {
+    return props.$colorFront ? th.color(props.$colorFront) : "auto";
+}, function(props) {
+    return props.$colorBack ? th.color(props.$colorBack) : "auto";
+}, function(props) {
+    return "".concat(props.size, "px");
+}, function(props) {
+    return "".concat(props.size, "px");
+}, function(props) {
+    return props.$hoverColorBack ? th.color(props.$hoverColorBack) : "auto";
+});
+var Avatar = function Avatar(_0) {
+    var src = _0.src, _0_size = _0.size, size = _0_size === void 0 ? defaultDimension : _0_size, colorFront = _0.colorFront, colorBack = _0.colorBack, className = _0.className, hoverColorBack = _0.hoverColorBack, rest = _object_without_properties(_0, [
+        "src",
+        "size",
+        "colorFront",
+        "colorBack",
+        "className",
+        "hoverColorBack"
+    ]);
+    return /* @__PURE__ */ jsx(Fragment, {
+        children: /* @__PURE__ */ jsx(StyledAvatarWrap, _object_spread_props(_object_spread({
+            size: size || 34,
+            className: className,
+            $colorBack: colorBack || "neutral20",
+            $colorFront: colorFront || "blue2",
+            $hoverColorBack: hoverColorBack || "lightGray7"
+        }, rest), {
+            children: src ? /* @__PURE__ */ jsx("img", {
+                src: src,
+                width: size,
+                height: size
+            }) : /* @__PURE__ */ jsx(Profile, {})
+        }))
+    });
+};
+export { Avatar };

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

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

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

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