@mailstep/design-system 0.8.26-beta.3 → 0.8.26-beta.4

package/ui/Blocks/Header/index.js

@@ -0,0 +1,61 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Link } from "react-router-dom";
+import Logo from "../../Elements/Logo";
+import LanguageSwitch from "../LanguageSwitch";
+import { HamburgerMenuButton } from "../SideMenu";
+import { MenuItems } from "./components/MenuItems";
+import { UserMenu } from "./components/UserMenu";
+import { useChangeLanguage } from "./hooks/useChangeLanguage";
+import { languageItems as defaultLanguageItems } from "./utils/languageItems";
+import { Container, LeftSide, RightSide, LanguageWrapper } from "./styles";
+var Header = function Header(param) {
+    var isMobileMenuOpen = param.isMobileMenuOpen, homeLink = param.homeLink, logo = param.logo, logoVariant = param.logoVariant, logoSrc = param.logoSrc, logoSrcWidth = param.logoSrcWidth, user = param.user, currentLanguage = param.currentLanguage, _param_hasUserMenu = param.hasUserMenu, hasUserMenu = _param_hasUserMenu === void 0 ? false : _param_hasUserMenu, rightMenuItems = param.rightMenuItems, showLanguageWithTitle = param.showLanguageWithTitle, languageFlagWrapBackgroundColor = param.languageFlagWrapBackgroundColor, _param_languageItems = param.languageItems, languageItems = _param_languageItems === void 0 ? defaultLanguageItems : _param_languageItems, _param_withLanguageSwitch = param.withLanguageSwitch, withLanguageSwitch = _param_withLanguageSwitch === void 0 ? true : _param_withLanguageSwitch, onOpenMobileSideMenu = param.onOpenMobileSideMenu, onChangeLanguage = param.onChangeLanguage, onLogout = param.onLogout;
+    var handleChangeLanguage = useChangeLanguage({
+        onChangeLanguage: onChangeLanguage
+    }).handleChangeLanguage;
+    return /* @__PURE__ */ jsxs(Container, {
+        children: [
+            /* @__PURE__ */ jsxs(LeftSide, {
+                children: [
+                    onOpenMobileSideMenu && /* @__PURE__ */ jsx(HamburgerMenuButton, {
+                        isLeftMenuOpen: isMobileMenuOpen,
+                        onClick: onOpenMobileSideMenu
+                    }),
+                    /* @__PURE__ */ jsx(Link, {
+                        to: homeLink,
+                        children: logoSrc ? /* @__PURE__ */ jsx("img", {
+                            src: logoSrc,
+                            alt: "logo",
+                            width: logoSrcWidth
+                        }) : logo && /* @__PURE__ */ jsx(Logo, {
+                            brand: logo,
+                            variant: logoVariant,
+                            width: "145px"
+                        })
+                    })
+                ]
+            }),
+            /* @__PURE__ */ jsxs(RightSide, {
+                children: [
+                    Array.isArray(rightMenuItems) && (rightMenuItems === null || rightMenuItems === void 0 ? void 0 : rightMenuItems.length) > 0 && /* @__PURE__ */ jsx(MenuItems, {
+                        items: rightMenuItems
+                    }),
+                    withLanguageSwitch && /* @__PURE__ */ jsx(LanguageWrapper, {
+                        children: /* @__PURE__ */ jsx(LanguageSwitch, {
+                            languageItems: languageItems,
+                            withTitle: showLanguageWithTitle,
+                            onLanguageChange: handleChangeLanguage,
+                            activeLanguage: currentLanguage,
+                            languageFlagWrapBackgroundColor: languageFlagWrapBackgroundColor
+                        })
+                    }),
+                    hasUserMenu && /* @__PURE__ */ jsx(UserMenu, {
+                        user: user,
+                        onLogout: onLogout
+                    })
+                ]
+            })
+        ]
+    });
+};
+export { Header };

package/ui/Blocks/Header/styles.js

@@ -0,0 +1,55 @@
+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: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 8px;\n  height: ",
+        ";\n  border-bottom: 1px solid ",
+        ";\n\n  @media (min-width: 768px) {\n    padding: 0 20px;\n  }\n"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n"
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  justify-content: flex-end;\n"
+    ]);
+    _templateObject2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject3() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  gap: 4px;\n  align-items: center;\n\n  @media (min-width: 768px) {\n    gap: 20px;\n  }\n"
+    ]);
+    _templateObject3 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import { headerHeight } from "./utils/constants";
+import styled, { th } from "@xstyled/styled-components";
+var Container = styled.header(_templateObject(), headerHeight, th.color("lightGray7"));
+var LeftSide = styled.div(_templateObject1());
+var LanguageWrapper = styled.div(_templateObject2());
+var RightSide = styled.div(_templateObject3());
+export { Container, LanguageWrapper, LeftSide, RightSide };

package/ui/Blocks/Header/utils/constants.js

@@ -0,0 +1,2 @@
+var headerHeight = "52px";
+export { headerHeight };

package/ui/Blocks/Header/utils/languageItems.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { FlagCZ } from "../../../Elements/Icon/icons/FlagCZ";
+import { FlagUSA } from "../../../Elements/Icon/icons/FlagUSA";
+var languageItems = [
+    {
+        languageCode: "cs",
+        icon: /* @__PURE__ */ jsx(FlagCZ, {
+            height: "16px"
+        }),
+        title: "\u010Cesky"
+    },
+    {
+        languageCode: "en",
+        icon: /* @__PURE__ */ jsx(FlagUSA, {
+            height: "16px"
+        }),
+        title: "English"
+    }
+];
+export { languageItems };

package/ui/Blocks/HidePrint/HidePrint.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  display: contents;\n  @media print {\n    display: none;\n  }\n"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import { jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+var HideWrapper = styled.div(_templateObject());
+var HidePrint = function HidePrint(param) {
+    var children = param.children;
+    return /* @__PURE__ */ jsx(HideWrapper, {
+        children: children
+    });
+};
+var HidePrint_default = HidePrint;
+export { HidePrint_default as default };

package/ui/Blocks/ImageList/ImageList.js

@@ -0,0 +1,135 @@
+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;
+}
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useDraggable } from "react-use-draggable-scroll";
+import Icon from "../../Elements/Icon/Icon";
+import LightBox, { useLightBox } from "../LightBox";
+import { AddPhoto } from "./components/AddPhoto";
+import { ImageElement } from "./components/ImageElement";
+import { useControls } from "./hooks/useControls";
+import { useOnElementClick } from "./hooks/useOnElementClick";
+import { x } from "@xstyled/styled-components";
+import { ImageListContainer, Control } from "./styles";
+var ImageList = function ImageList(param) {
+    var onImageUpload = param.onImageUpload, onImageRemove = param.onImageRemove, onImageClick = param.onImageClick, lightBoxAction = param.lightBoxAction, lightBoxActionTitle = param.lightBoxActionTitle, images = param.images, isDisabled = param.isDisabled, selectable = param.selectable, max = param.max;
+    var ref = useRef(null);
+    var events = useDraggable(ref, {
+        isMounted: !!(images === null || images === void 0 ? void 0 : images.length)
+    }).events;
+    var _useLightBox = useLightBox(), isLightBoxOpen = _useLightBox.isLightBoxOpen, onCloseLightBox = _useLightBox.onCloseLightBox, onOpenLightBox = _useLightBox.onOpenLightBox, lightBoxData = _useLightBox.lightBoxData;
+    var _useOnElementClick = useOnElementClick({
+        onImageClick: onImageClick,
+        onOpenLightBox: onOpenLightBox,
+        selectable: selectable
+    }), handleOnClick = _useOnElementClick.handleOnClick, selected = _useOnElementClick.selected;
+    var _useControls = useControls({
+        max: max,
+        total: images === null || images === void 0 ? void 0 : images.length
+    }), hasControls = _useControls.hasControls, position = _useControls.position, moveList = _useControls.moveList;
+    return /* @__PURE__ */ jsxs(x.div, {
+        display: "flex",
+        alignItems: "center",
+        children: [
+            /* @__PURE__ */ jsx(AddPhoto, {
+                onImageUpload: onImageUpload,
+                isDisabled: isDisabled,
+                hasRemove: !!onImageRemove
+            }),
+            hasControls && /* @__PURE__ */ jsx(Control, {
+                onClick: moveList(-1),
+                isLeft: true,
+                isDisabled: position === 0,
+                hasRemove: !!onImageRemove,
+                children: /* @__PURE__ */ jsx(Icon, {
+                    icon: "lessThen",
+                    size: "24px"
+                })
+            }),
+            images && /* @__PURE__ */ jsx(ImageListContainer, _object_spread_props(_object_spread({
+                ref: ref
+            }, events), {
+                children: images.map(function(item, index) {
+                    var _item_smallUrl, _item_id;
+                    return /* @__PURE__ */ jsx(ImageElement, {
+                        imageUrl: (_item_smallUrl = item.smallUrl) !== null && _item_smallUrl !== void 0 ? _item_smallUrl : item.url,
+                        onImageRemove: onImageRemove === null || onImageRemove === void 0 ? void 0 : onImageRemove(item.id),
+                        onClick: handleOnClick(item, index),
+                        isDisabled: isDisabled,
+                        label: item === null || item === void 0 ? void 0 : item.label,
+                        selected: index === selected,
+                        visible: !max || index >= position && index < position + max
+                    }, (_item_id = item.id) !== null && _item_id !== void 0 ? _item_id : index);
+                })
+            })),
+            hasControls && /* @__PURE__ */ jsx(Control, {
+                onClick: moveList(1),
+                isDisabled: !!images && !!max && position >= (images === null || images === void 0 ? void 0 : images.length) - max,
+                hasRemove: !!onImageRemove,
+                children: /* @__PURE__ */ jsx(Icon, {
+                    icon: "greaterThan",
+                    size: "24px"
+                })
+            }),
+            /* @__PURE__ */ jsx(LightBox, {
+                initialSlide: lightBoxData === null || lightBoxData === void 0 ? void 0 : lightBoxData.initialSlide,
+                isLightBoxOpen: isLightBoxOpen,
+                onCloseLightBox: onCloseLightBox,
+                lightBoxAction: lightBoxAction,
+                lightBoxActionTitle: lightBoxActionTitle,
+                images: images
+            })
+        ]
+    });
+};
+export { ImageList };

package/ui/Blocks/ImageList/components/AddPhoto/index.js

@@ -0,0 +1,185 @@
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) {
+        resolve(value);
+    } else {
+        Promise.resolve(value).then(_next, _throw);
+    }
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(undefined);
+        });
+    };
+}
+function _ts_generator(thisArg, body) {
+    var f, y, t, _ = {
+        label: 0,
+        sent: function() {
+            if (t[0] & 1) throw t[1];
+            return t[1];
+        },
+        trys: [],
+        ops: []
+    }, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype), d = Object.defineProperty;
+    return d(g, "next", {
+        value: verb(0)
+    }), d(g, "throw", {
+        value: verb(1)
+    }), d(g, "return", {
+        value: verb(2)
+    }), typeof Symbol === "function" && d(g, Symbol.iterator, {
+        value: function() {
+            return this;
+        }
+    }), g;
+    function verb(n) {
+        return function(v) {
+            return step([
+                n,
+                v
+            ]);
+        };
+    }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while(g && (g = 0, op[0] && (_ = 0)), _)try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [
+                op[0] & 2,
+                t.value
+            ];
+            switch(op[0]){
+                case 0:
+                case 1:
+                    t = op;
+                    break;
+                case 4:
+                    _.label++;
+                    return {
+                        value: op[1],
+                        done: false
+                    };
+                case 5:
+                    _.label++;
+                    y = op[1];
+                    op = [
+                        0
+                    ];
+                    continue;
+                case 7:
+                    op = _.ops.pop();
+                    _.trys.pop();
+                    continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                        _ = 0;
+                        continue;
+                    }
+                    if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+                        _.label = op[1];
+                        break;
+                    }
+                    if (op[0] === 6 && _.label < t[1]) {
+                        _.label = t[1];
+                        t = op;
+                        break;
+                    }
+                    if (t && _.label < t[2]) {
+                        _.label = t[2];
+                        _.ops.push(op);
+                        break;
+                    }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop();
+                    continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) {
+            op = [
+                6,
+                e
+            ];
+            y = 0;
+        } finally{
+            f = t = 0;
+        }
+        if (op[0] & 5) throw op[1];
+        return {
+            value: op[0] ? op[1] : void 0,
+            done: true
+        };
+    }
+}
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { AddPhoto as AddPhotoIcon } from "../../../../Elements/Icon/icons/AddPhoto";
+import { Container, HiddenInput } from "./styles";
+var AddPhoto = function AddPhoto(param) {
+    var onImageUpload = param.onImageUpload, isDisabled = param.isDisabled, hasRemove = param.hasRemove;
+    var handleImageUpload = useCallback(function(event) {
+        var _event_target_files, _event_target;
+        if (!((_event_target = event.target) === null || _event_target === void 0 ? void 0 : (_event_target_files = _event_target.files) === null || _event_target_files === void 0 ? void 0 : _event_target_files[0])) return;
+        var reader = new FileReader();
+        reader.readAsDataURL(event.target.files[0]);
+        reader.onload = function() {
+            return _async_to_generator(function() {
+                var _reader_result, _event_target_files;
+                return _ts_generator(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            return [
+                                4,
+                                onImageUpload === null || onImageUpload === void 0 ? void 0 : onImageUpload({
+                                    base64image: (_reader_result = reader.result) === null || _reader_result === void 0 ? void 0 : _reader_result.split(",").pop(),
+                                    base64WithDataDeclaration: reader.result,
+                                    file: (_event_target_files = event.target.files) === null || _event_target_files === void 0 ? void 0 : _event_target_files[0]
+                                })
+                            ];
+                        case 1:
+                            _state.sent();
+                            return [
+                                2
+                            ];
+                    }
+                });
+            })();
+        };
+    }, [
+        onImageUpload
+    ]);
+    if (!onImageUpload) return null;
+    return /* @__PURE__ */ jsxs(Container, {
+        isDisabled: isDisabled,
+        hasRemove: hasRemove,
+        children: [
+            /* @__PURE__ */ jsx(HiddenInput, {
+                disabled: isDisabled,
+                onChange: handleImageUpload,
+                type: "file",
+                accept: "image/*;capture=camera",
+                capture: "environment"
+            }),
+            /* @__PURE__ */ jsx(AddPhotoIcon, {
+                width: "36",
+                height: "36"
+            })
+        ]
+    });
+};
+export { AddPhoto };

package/ui/Blocks/ImageList/components/AddPhoto/styles.js

@@ -0,0 +1,43 @@
+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  position: relative;\n  flex-shrink: 0;\n  transition: all 0.2s linear;\n  height: 85px !important;\n  width: 85px !important;\n  border-radius: ",
+        ";\n  border: ",
+        ";\n  border-color: ",
+        ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  margin-right: 15px;\n  opacity: ",
+        ";\n  margin-top: ",
+        ";\n"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "\n  opacity: 0;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n"
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import styled, { th } from "@xstyled/styled-components";
+var Container = styled.div(_templateObject(), th.radius("lg"), th.border("mediumSlim"), th.color("red1"), function(param) {
+    var isDisabled = param.isDisabled;
+    return isDisabled ? 0.6 : 1;
+}, function(param) {
+    var hasRemove = param.hasRemove;
+    return hasRemove ? "15px" : "";
+});
+var HiddenInput = styled.input(_templateObject1());
+export { Container, HiddenInput };

package/ui/Blocks/ImageList/components/CloseButton/index.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { Icon } from "../../../../Elements/Icon";
+import { Container } from "./styles";
+var CloseButton = function CloseButton(param) {
+    var onImageRemove = param.onImageRemove, isDisabled = param.isDisabled;
+    return /* @__PURE__ */ jsx(Container, {
+        onClick: !isDisabled ? onImageRemove : void 0,
+        isDisabled: isDisabled,
+        children: /* @__PURE__ */ jsx(Icon, {
+            icon: "close",
+            size: "22px",
+            fill: isDisabled ? "magenta60" : "red1"
+        })
+    });
+};
+export { CloseButton };

package/ui/Blocks/ImageList/components/CloseButton/styles.js

@@ -0,0 +1,26 @@
+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  position: absolute;\n  top: 0;\n  right: 0;\n  width: 30px;\n  height: 30px;\n  background-color: ",
+        ";\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s linear;\n"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import styled, { th } from "@xstyled/styled-components";
+var Container = styled.div(_templateObject(), function(param) {
+    var isDisabled = param.isDisabled;
+    return th.color(isDisabled ? "bgLightGray1" : "red20");
+});
+export { Container };

package/ui/Blocks/ImageList/components/ImageElement/index.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CloseButton } from "../CloseButton";
+import { ImageTag } from "../ImageTag";
+import { Image, ImageWrapper } from "./styles";
+var ImageElement = function ImageElement(param) {
+    var label = param.label, onImageRemove = param.onImageRemove, isDisabled = param.isDisabled, onClick = param.onClick, imageUrl = param.imageUrl, selected = param.selected, visible = param.visible;
+    if (!imageUrl) return null;
+    return /* @__PURE__ */ jsxs(ImageWrapper, {
+        visible: visible,
+        hasImageRemove: !!onImageRemove,
+        children: [
+            /* @__PURE__ */ jsx(Image, {
+                src: imageUrl,
+                alt: "",
+                width: "85px",
+                height: "85px",
+                onClick: onClick,
+                selected: selected
+            }),
+            onImageRemove && /* @__PURE__ */ jsx(CloseButton, {
+                onImageRemove: onImageRemove,
+                isDisabled: isDisabled
+            }),
+            /* @__PURE__ */ jsx(ImageTag, {
+                label: label
+            })
+        ]
+    });
+};
+export { ImageElement };

package/ui/Blocks/ImageList/components/ImageElement/styles.js

@@ -0,0 +1,64 @@
+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([
+        ""
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "\n  border-radius: ",
+        ";\n  border: ",
+        ";\n  border-color: red1;\n  cursor: pointer;\n  transition: all 0.2s;\n"
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    var data = _tagged_template_literal([
+        "\n  position: relative;\n  padding-right: ",
+        ";\n  padding-top: ",
+        ";\n  width: 100px;\n  height: ",
+        ";\n  display: ",
+        ";\n  user-select: none;\n"
+    ]);
+    _templateObject2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import styled from "@xstyled/styled-components";
+import { th } from "@xstyled/system";
+var Container = styled.div(_templateObject());
+var Image = styled.img(_templateObject1(), th.radius("lg"), function(param) {
+    var selected = param.selected;
+    return selected ? "3px solid" : "0";
+});
+var ImageWrapper = styled.div(_templateObject2(), function(param) {
+    var hasImageRemove = param.hasImageRemove;
+    return hasImageRemove ? "15px" : "0";
+}, function(param) {
+    var hasImageRemove = param.hasImageRemove;
+    return hasImageRemove ? "15px" : "0";
+}, function(param) {
+    var hasImageRemove = param.hasImageRemove;
+    return hasImageRemove ? "100px" : "85px";
+}, function(param) {
+    var visible = param.visible;
+    return visible ? "block" : "none";
+});
+export { Container, Image, ImageWrapper };