@mailstep/design-system 0.8.26 → 0.8.27

package/ui/Elements/Button/styles.js

@@ -0,0 +1,98 @@
+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"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "\n  & svg {\n    margin-right: ",
+        ";\n  }\n"
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    var data = _tagged_template_literal([
+        "\n  & svg {\n    margin-right: ",
+        ";\n    margin-left: ",
+        ";\n  }\n"
+    ]);
+    _templateObject2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject3() {
+    var data = _tagged_template_literal([
+        "\n  width: ",
+        ";\n  font-weight: semiBold;\n  font-size: 14px;\n  font-family: ",
+        ";\n  display: flex;\n  text-align: center;\n  align-items: center;\n  justify-content: center;\n  border-radius: 8px;\n  height: ",
+        ";\n  border: none;\n  transition-duration: 0.1s;\n  transition: all 300ms ease-out;\n  gap: 8px;\n  padding: ",
+        ";\n  opacity: ",
+        ";\n  cursor: ",
+        ";\n\n  :focus {\n    outline: none;\n  }\n\n  &[data-variant='default'] {\n    &[data-appearance='primary'] {\n      background-color: red1;\n      color: white;\n\n      :not(:disabled) {\n        @media (hover: hover) {\n          :hover {\n            background-color: red80;\n          }\n        }\n      }\n    }\n\n    &[data-appearance='secondary'] {\n      background-color: neutral20;\n      color: typoPrimary;\n\n      @media (hover: hover) {\n        :hover {\n          background-color: lightGray7;\n        }\n      }\n    }\n\n    &[data-appearance='tertiary'] {\n      background-color: red20;\n      color: red1;\n\n      @media (hover: hover) {\n        :hover {\n          background-color: red30;\n        }\n      }\n    }\n  }\n\n  &[data-variant='success'] {\n    background-color: successColor;\n    color: white;\n\n    @media (hover: hover) {\n      :hover {\n        background-color: green70;\n      }\n    }\n  }\n  &[data-variant='outline'] {\n    background-color: white;\n    border: slim;\n    &[data-appearance='primary'] {\n      color: typoPrimary;\n      border-color: typoPrimary;\n\n      @media (hover: hover) {\n        :hover {\n          background-color: neutral20;\n        }\n      }\n    }\n    &[data-appearance='secondary'] {\n      color: red1;\n      border-color: red1;\n\n      @media (hover: hover) {\n        :hover {\n          background-color: red20;\n        }\n      }\n    }\n  }\n  &[data-variant='ghost'] {\n    background-color: white;\n    &[data-appearance='primary'] {\n      color: typoPrimary;\n\n      @media (hover: hover) {\n        :hover {\n          background-color: neutral20;\n        }\n      }\n    }\n    &[data-appearance='secondary'] {\n      color: red1;\n\n      @media (hover: hover) {\n        :hover {\n          background-color: red20;\n        }\n      }\n    }\n  }\n\n  &[data-variant='link'] {\n    background-color: transparent;\n    height: ",
+        ";\n    &[data-appearance='primary'] {\n      color: typoPrimary;\n\n      @media (hover: hover) {\n        :hover {\n          color: neutral500;\n        }\n      }\n    }\n    &[data-appearance='secondary'] {\n      color: red1;\n\n      @media (hover: hover) {\n        :hover {\n          color: red70;\n        }\n      }\n    }\n  }\n\n  &[data-variant='icon'] {\n    width: 38px;\n    height: ",
+        ";\n    gap: 10px;\n\n    &[data-appearance='primary'] {\n      background-color: red1;\n      color: white;\n\n      @media (hover: hover) {\n        :hover {\n          background-color: red70;\n        }\n      }\n    }\n\n    &[data-appearance='secondary'] {\n      background-color: neutral20;\n      color: typoPrimary;\n\n      @media (hover: hover) {\n        :hover {\n          background-color: lightGray7;\n        }\n      }\n    }\n\n    &[data-appearance='tertiary'] {\n      background-color: red20;\n      color: red1;\n\n      @media (hover: hover) {\n        :hover {\n          background-color: red30;\n        }\n      }\n    }\n\n    &[data-appearance='ghost'] {\n      background-color: transparent;\n      color: typoPrimary;\n\n      @media (hover: hover) {\n        :hover {\n          color: neutral500;\n        }\n      }\n    }\n  }\n\n  &[data-variant='floating'] {\n    &[data-appearance='primary'] {\n      width: 56px;\n      height: ",
+        ";\n      background-color: red1;\n      color: white;\n      border-radius: 50%;\n\n      @media (hover: hover) {\n        :hover {\n          background-color: red70;\n        }\n      }\n    }\n  }\n"
+    ]);
+    _templateObject3 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import { Icon } from "../Icon";
+import styled, { th } from "@xstyled/styled-components";
+var StyledWrapper = styled.span(_templateObject());
+var LoadingIconWrapper = styled.div(_templateObject1(), function(param) {
+    var $addMarginRight = param.$addMarginRight;
+    return $addMarginRight ? "8px" : "0";
+});
+var StyledIcon = styled(Icon)(_templateObject2(), function(param) {
+    var $addMarginRight = param.$addMarginRight;
+    return $addMarginRight ? "8px" : "0";
+}, function(param) {
+    var $addMarginLeft = param.$addMarginLeft;
+    return $addMarginLeft ? "8px" : "0";
+});
+var StyledButton = styled.button(_templateObject3(), function(param) {
+    var fullWidth = param.fullWidth;
+    return fullWidth ? "100%" : "initial";
+}, th("fonts.primary"), function(param) {
+    var height = param.height;
+    return height || "38px";
+}, function(param) {
+    var iconPadding = param.iconPadding;
+    return iconPadding ? "9px" : "7px 18px";
+}, function(param) {
+    var disabled = param.disabled;
+    return disabled ? 0.6 : 1;
+}, function(param) {
+    var disabled = param.disabled;
+    return disabled ? "not-allowed" : "pointer";
+}, function(param) {
+    var height = param.height;
+    return height || "20px";
+}, function(param) {
+    var height = param.height;
+    return height || "38px";
+}, function(param) {
+    var height = param.height;
+    return height || "56px";
+});
+export { LoadingIconWrapper, StyledButton, StyledIcon, StyledWrapper };

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

@@ -1,5 +1,4 @@
-import { ReactNode } from 'react';
-
+import type { ReactNode } from 'react';
 export type VariantValue = 'default' | 'success' | 'outline' | 'ghost' | 'link' | 'icon' | 'floating';
 export type AppearanceValue = 'primary' | 'secondary' | 'tertiary' | 'ghost';
 export type Props = React.HTMLProps<HTMLButtonElement> & {

package/ui/Elements/Card/Card.d.ts

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

package/ui/Elements/Card/Card.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { StyledCard } from "./styles";
+var Card = function Card(param) {
+    var children = param.children, _param_display = param.display, display = _param_display === void 0 ? "block" : _param_display, bg = param.bg, onClick = param.onClick, maxWidth = param.maxWidth;
+    return /* @__PURE__ */ jsx(StyledCard, {
+        onClick: onClick,
+        bg: bg,
+        display: display,
+        maxWidth: maxWidth,
+        hasOnClick: !!onClick,
+        children: children
+    });
+};
+var Card_default = Card;
+export { Card_default as default };

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

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

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

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

package/ui/Elements/Card/index.js

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

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

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

@@ -1,6 +1,5 @@
 import { Display } from './types';
-
-export declare const StyledCard: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const StyledCard: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     display: Display;
     bg?: string;
     hasOnClick: boolean;

package/ui/Elements/Card/styles.js

@@ -0,0 +1,50 @@
+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      cursor: pointer;\n      &:hover {\n        border-color: ",
+        ";\n      }\n    "
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "\n  display: ",
+        ";\n  padding: 20px;\n  border: 1px solid;\n  background-color: ",
+        ";\n  border-color: ",
+        ";\n  border-radius: 12px;\n  width: 100%;\n\n  ",
+        "\n\n  ",
+        "\n"
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import styled, { css } from "@xstyled/styled-components";
+import { th } from "@xstyled/styled-components";
+var StyledCard = styled.div(_templateObject1(), function(param) {
+    var display = param.display;
+    return display;
+}, function(param) {
+    var bg = param.bg;
+    return bg ? th.color(bg) : "white";
+}, th.color("lightGray6"), function(param) {
+    var maxWidth = param.maxWidth;
+    return maxWidth && "max-width: ".concat(maxWidth, ";");
+}, function(param) {
+    var hasOnClick = param.hasOnClick;
+    return hasOnClick && css(_templateObject(), th.color("gray1"));
+});
+export { StyledCard };

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

@@ -1,5 +1,4 @@
-import { FC } from 'react';
-
+import { type FC } from 'react';
 type CheckedCircleProps = {
     checked?: boolean;
     color?: string;

package/ui/Elements/CheckedCircle/index.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import Icon from "../Icon";
+import { CheckedCircleContainer } from "./styles";
+var CheckedCircle = function CheckedCircle(param) {
+    var _param_checked = param.checked, checked = _param_checked === void 0 ? true : _param_checked, _param_color = param.color, color = _param_color === void 0 ? "red1" : _param_color;
+    return /* @__PURE__ */ jsx(CheckedCircleContainer, {
+        color: color,
+        children: checked && /* @__PURE__ */ jsx(Icon, {
+            icon: "check",
+            size: "12px"
+        })
+    });
+};
+export { CheckedCircle };

package/ui/Elements/CheckedCircle/storries/CheckedCircle.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<{
+    component: import("react").FC<{
         checked?: boolean;
         color?: string;
     }>;

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

@@ -1,3 +1,3 @@
-export declare const CheckedCircleContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const CheckedCircleContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     color: string;
 }, never>;

package/ui/Elements/CheckedCircle/styles.js

@@ -0,0 +1,30 @@
+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  border-radius: 50%;\n  border: 8px solid ",
+        ";\n  color: ",
+        ";\n  height: 36px;\n  width: 36px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: white;\n"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import styled, { th } from "@xstyled/styled-components";
+var CheckedCircleContainer = styled.div(_templateObject(), function(param) {
+    var color = param.color;
+    return th.color(color);
+}, function(param) {
+    var color = param.color;
+    return th.color(color);
+});
+export { CheckedCircleContainer };

package/ui/Elements/DatePicker/DatePicker.d.ts

@@ -1,7 +1,11 @@
-import { default as React } from 'react';
-import { SpaceAround } from '../SpaceAround';
-import { DateTimeOthers, DatetimepickerProps } from './Datetime/types';
-
+import React from 'react';
+import type { SpaceAround } from '../SpaceAround';
+import type { DateTimeOthers, DatetimepickerProps } from './Datetime/types';
+import 'moment/dist/locale/cs';
+import 'moment/dist/locale/el';
+import 'moment/dist/locale/it';
+import 'moment/dist/locale/ru';
+import 'moment/dist/locale/sk';
 export type DatePickerType = DatetimepickerProps & {
     onChange: (value: string | Date) => void;
     disabled?: boolean;

package/ui/Elements/DatePicker/DatePicker.js

@@ -0,0 +1,211 @@
+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_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(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(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _non_iterable_spread() {
+    throw new TypeError("Invalid attempt to spread 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 _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
+}
+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 } from "react/jsx-runtime";
+import React, { useCallback, useContext } from "react";
+import moment from "moment";
+import Input from "../../Forms/Input";
+import { LanguageContext } from "../../ThemeProvider/ThemeProvider";
+import SpaceAroundWrap from "../SpaceAround";
+import DatetimePicker from "./Datetime/DateTime";
+import { x } from "@xstyled/styled-components";
+import "moment/dist/locale/cs";
+import "moment/dist/locale/el";
+import "moment/dist/locale/it";
+import "moment/dist/locale/ru";
+import "moment/dist/locale/sk";
+import { DatePickerBase } from "./styles";
+var defaultDateFormat = "DD.MM.YYYY";
+var DatePicker = function DatePicker(_0) {
+    var name = _0.name, value = _0.value, initialViewDate = _0.initialViewDate, error = _0.error, label = _0.label, disabled = _0.disabled, isValidDate = _0.isValidDate, onChange = _0.onChange, _0_dateFormat = _0.dateFormat, dateFormat = _0_dateFormat === void 0 ? defaultDateFormat : _0_dateFormat, _0_timeFormat = _0.timeFormat, timeFormat = _0_timeFormat === void 0 ? false : _0_timeFormat, open = _0.open, _0_secondValue = _0.secondValue, secondValue = _0_secondValue === void 0 ? null : _0_secondValue, input = _0.input, _0_icon = _0.icon, icon = _0_icon === void 0 ? true : _0_icon, _0_showInputLabel = _0.showInputLabel, showInputLabel = _0_showInputLabel === void 0 ? false : _0_showInputLabel, _0_showCalendarLabel = _0.showCalendarLabel, showCalendarLabel = _0_showCalendarLabel === void 0 ? true : _0_showCalendarLabel, _0_spaceAround = _0.spaceAround, spaceAround = _0_spaceAround === void 0 ? false : _0_spaceAround, className = _0.className, onClear = _0.onClear, onInputChange = _0.onInputChange, passProps = _object_without_properties(_0, [
+        "name",
+        "value",
+        "initialViewDate",
+        "error",
+        "label",
+        "disabled",
+        "isValidDate",
+        "onChange",
+        "dateFormat",
+        "timeFormat",
+        "open",
+        "secondValue",
+        "input",
+        "icon",
+        "showInputLabel",
+        "showCalendarLabel",
+        "spaceAround",
+        "className",
+        "onClear",
+        "onInputChange"
+    ]);
+    var format = "".concat(dateFormat).concat(timeFormat ? " ".concat(timeFormat) : "");
+    var isValid = !!value && moment(value, format, true).isValid();
+    var stringValue = isValid ? moment(value, format).format(format) : value;
+    var locale = useContext(LanguageContext);
+    var handleRenderInput = useCallback(function(_, openCalendar) {
+        return /* @__PURE__ */ jsx(Input, {
+            type: "text",
+            icon: icon ? "calendar" : void 0,
+            name: name,
+            error: error,
+            disabled: disabled,
+            isInvalid: !!error,
+            onChange: onInputChange,
+            label: showInputLabel ? label : void 0,
+            value: stringValue,
+            onFocus: openCalendar,
+            iconOnClick: openCalendar,
+            onClear: onClear,
+            autoComplete: "off"
+        });
+    }, [
+        name,
+        stringValue,
+        error,
+        label,
+        showInputLabel,
+        isValid,
+        disabled
+    ]);
+    var handleRenderView = useCallback(function(_, renderCalendar) {
+        if (label && !showInputLabel) {
+            return /* @__PURE__ */ jsx(x.div, {
+                display: "flex",
+                flexDirection: "column",
+                children: renderCalendar()
+            });
+        }
+        return renderCalendar();
+    }, [
+        label,
+        showInputLabel
+    ]);
+    var handleChange = useCallback(function(value2) {
+        var _value2_toDate;
+        var parsed = typeof value2 === "string" ? value2 : value2 === null || value2 === void 0 ? void 0 : (_value2_toDate = value2.toDate) === null || _value2_toDate === void 0 ? void 0 : _value2_toDate.call(value2);
+        onChange === null || onChange === void 0 ? void 0 : onChange(parsed);
+    }, [
+        onChange
+    ]);
+    var handleIsValid = useCallback(function(current, selected) {
+        var _current_toDate, _selected_toDate;
+        var parsed = [
+            current === null || current === void 0 ? void 0 : (_current_toDate = current.toDate) === null || _current_toDate === void 0 ? void 0 : _current_toDate.call(current),
+            selected === null || selected === void 0 ? void 0 : (_selected_toDate = selected.toDate) === null || _selected_toDate === void 0 ? void 0 : _selected_toDate.call(selected)
+        ];
+        return isValidDate ? isValidDate.apply(void 0, _to_consumable_array(parsed)) : true;
+    }, [
+        isValidDate
+    ]);
+    return /* @__PURE__ */ jsx(SpaceAroundWrap, {
+        spaceAround: spaceAround,
+        children: /* @__PURE__ */ jsx(DatePickerBase, {
+            className: className,
+            children: /* @__PURE__ */ jsx(DatetimePicker, _object_spread({
+                value: value,
+                dateFormat: dateFormat,
+                timeFormat: timeFormat,
+                secondValue: secondValue,
+                open: open,
+                input: input,
+                label: showCalendarLabel ? label : void 0,
+                onChange: handleChange,
+                isValidDate: handleIsValid,
+                renderView: handleRenderView,
+                renderInput: handleRenderInput,
+                initialViewDate: initialViewDate,
+                locale: locale,
+                disabled: disabled
+            }, passProps))
+        })
+    });
+};
+var DatePicker_default = React.memo(DatePicker);
+export { DatePicker_default as default };

package/ui/Elements/DatePicker/Datetime/DateTime.d.ts

@@ -1,7 +1,6 @@
-import { default as React } from 'react';
-import { default as moment } from 'moment';
-import { DatetimepickerProps } from './types';
-
+import React from 'react';
+import moment from 'moment';
+import type { DatetimepickerProps } from './types';
 export default class Datetime extends React.Component<DatetimepickerProps> {
     static defaultProps: {
         onOpen: () => void;