@mailstep/design-system 0.2.0-beta.2 → 0.2.0-beta.3

package/Blocks/ImageList/ImageList.js

@@ -18,12 +18,12 @@ import { ImageElement } from './components/ImageElement';
 import { x } from '@xstyled/styled-components';
 import { ImageListContainer } from './styles';
 export var ImageList = function (_a) {
-    var onImageUpload = _a.onImageUpload, onImageRemove = _a.onImageRemove, lightBoxAction = _a.lightBoxAction, lightBoxActionTitle = _a.lightBoxActionTitle, images = _a.images;
+    var onImageUpload = _a.onImageUpload, onImageRemove = _a.onImageRemove, lightBoxAction = _a.lightBoxAction, lightBoxActionTitle = _a.lightBoxActionTitle, images = _a.images, isDisabled = _a.isDisabled;
     var ref = useRef();
     var events = useDraggable(ref, { isMounted: !!(images === null || images === void 0 ? void 0 : images.length) }).events;
     var _b = useLightBox(), isLightBoxOpen = _b.isLightBoxOpen, onCloseLightBox = _b.onCloseLightBox, onOpenLightBox = _b.onOpenLightBox, lightBoxData = _b.lightBoxData;
-    return (_jsxs(x.div, { display: "flex", alignItems: "flex-end", children: [_jsx(AddPhoto, { onImageUpload: onImageUpload }), images && (_jsx(ImageListContainer, __assign({ ref: ref }, events, { children: images.map(function (item, index) {
+    return (_jsxs(x.div, { display: "flex", alignItems: "flex-end", children: [_jsx(AddPhoto, { onImageUpload: onImageUpload, isDisabled: isDisabled }), images && (_jsx(ImageListContainer, __assign({ ref: ref }, events, { children: images.map(function (item, index) {
                     var _a, _b;
-                    return (_jsx(ImageElement, { imageUrl: (_a = item.smallUrl) !== null && _a !== void 0 ? _a : item.url, onImageRemove: onImageRemove === null || onImageRemove === void 0 ? void 0 : onImageRemove(item.id), onOpenLightBox: onOpenLightBox(index) }, (_b = item.id) !== null && _b !== void 0 ? _b : index));
+                    return (_jsx(ImageElement, { imageUrl: (_a = item.smallUrl) !== null && _a !== void 0 ? _a : item.url, onImageRemove: onImageRemove === null || onImageRemove === void 0 ? void 0 : onImageRemove(item.id), onOpenLightBox: onOpenLightBox(index), isDisabled: isDisabled }, (_b = item.id) !== null && _b !== void 0 ? _b : index));
                 }) }))), _jsx(LightBox, { initialSlide: lightBoxData === null || lightBoxData === void 0 ? void 0 : lightBoxData.initialSlide, isLightBoxOpen: isLightBoxOpen, onCloseLightBox: onCloseLightBox, lightBoxAction: lightBoxAction, lightBoxActionTitle: lightBoxActionTitle, images: images })] }));
 };

package/Blocks/ImageList/components/AddPhoto/index.d.ts

@@ -2,6 +2,7 @@ import { type FC } from 'react';
 import { type ImageUploadProps } from '../../types';
 interface AddPhotoProps {
     onImageUpload?: (props: ImageUploadProps) => Promise<void>;
+    isDisabled?: boolean;
 }
 export declare const AddPhoto: FC<AddPhotoProps>;
 export {};

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

@@ -37,8 +37,9 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from 'react';
 import { Container, HiddenInput } from './styles';
+import { AddPhoto as AddPhotoIcon } from '../../../../Elements/Icon/icons/AddPhoto';
 export var AddPhoto = function (_a) {
-    var onImageUpload = _a.onImageUpload;
+    var onImageUpload = _a.onImageUpload, isDisabled = _a.isDisabled;
     var handleImageUpload = useCallback(function (event) {
         var _a, _b;
         if (!((_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0]))
@@ -46,12 +47,16 @@ export var AddPhoto = function (_a) {
         var reader = new FileReader();
         reader.readAsDataURL(event.target.files[0]);
         reader.onload = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var _a;
-            return __generator(this, function (_b) {
-                switch (_b.label) {
-                    case 0: return [4 /*yield*/, (onImageUpload === null || onImageUpload === void 0 ? void 0 : onImageUpload({ base64: reader.result, file: (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0] }))];
+            var _a, _b;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0: return [4 /*yield*/, (onImageUpload === null || onImageUpload === void 0 ? void 0 : onImageUpload({
+                            base64image: (_a = reader.result) === null || _a === void 0 ? void 0 : _a.split(',').pop(),
+                            base64WithDataDeclaration: reader.result,
+                            file: (_b = event.target.files) === null || _b === void 0 ? void 0 : _b[0],
+                        }))];
                     case 1:
-                        _b.sent();
+                        _c.sent();
                         return [2 /*return*/];
                 }
             });
@@ -59,5 +64,5 @@ export var AddPhoto = function (_a) {
     }, [onImageUpload]);
     if (!onImageUpload)
         return null;
-    return (_jsxs(Container, { children: [_jsx(HiddenInput, { onChange: handleImageUpload, type: "file", accept: "image/*" }), _jsxs("svg", { width: "36", height: "36", viewBox: "0 0 37 34", fill: "#DB2B19", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.82792 6.14124C10.7187 5.25044 11.9269 4.75 13.1867 4.75H19C19.8745 4.75 20.5833 5.45889 20.5833 6.33333C20.5833 7.20778 19.8745 7.91667 19 7.91667H13.1867C12.7668 7.91667 12.364 8.08349 12.0671 8.38041L10.7554 9.69209C9.86461 10.5829 8.65643 11.0833 7.39665 11.0833H4.75C3.87556 11.0833 3.16667 11.7922 3.16667 12.6667V28.5C3.16667 29.3745 3.87556 30.0833 4.75 30.0833H26.9167C27.7911 30.0833 28.5 29.3745 28.5 28.5V17.4167C28.5 16.5422 29.2089 15.8333 30.0833 15.8333C30.9578 15.8333 31.6667 16.5422 31.6667 17.4167V28.5C31.6667 31.1234 29.5401 33.25 26.9167 33.25H4.75C2.12665 33.25 0 31.1234 0 28.5V12.6667C0 10.0433 2.12665 7.91667 4.75 7.91667H7.39665C7.81658 7.91667 8.21931 7.74985 8.51624 7.45292L9.82792 6.14124Z" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.9165 20.5834C7.9165 16.2112 11.4609 12.6667 15.8332 12.6667C20.2054 12.6667 23.7498 16.2112 23.7498 20.5834C23.7498 24.9556 20.2054 28.5001 15.8332 28.5001C11.4609 28.5001 7.9165 24.9556 7.9165 20.5834ZM15.8332 15.8334C13.2098 15.8334 11.0832 17.96 11.0832 20.5834C11.0832 23.2068 13.2098 25.3334 15.8332 25.3334C18.4566 25.3334 20.5832 23.2068 20.5832 20.5834C20.5832 17.96 18.4566 15.8334 15.8332 15.8334Z" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M23.75 6.33333C23.75 5.45889 24.4589 4.75 25.3333 4.75H34.8333C35.7078 4.75 36.4167 5.45889 36.4167 6.33333C36.4167 7.20778 35.7078 7.91667 34.8333 7.91667H25.3333C24.4589 7.91667 23.75 7.20778 23.75 6.33333Z" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M30.0833 0C30.9578 0 31.6667 0.70889 31.6667 1.58333V11.0833C31.6667 11.9578 30.9578 12.6667 30.0833 12.6667C29.2089 12.6667 28.5 11.9578 28.5 11.0833V1.58333C28.5 0.70889 29.2089 0 30.0833 0Z" })] })] }));
+    return (_jsxs(Container, { isDisabled: isDisabled, children: [_jsx(HiddenInput, { disabled: isDisabled, onChange: handleImageUpload, type: "file", accept: "image/*" }), _jsx(AddPhotoIcon, { width: "36", height: "36" })] }));
 };

package/Blocks/ImageList/components/AddPhoto/styles.d.ts

@@ -1,2 +1,4 @@
-export declare const Container: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const Container: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    isDisabled?: boolean | undefined;
+}, never>;
 export declare const HiddenInput: import("styled-components").StyledComponent<"input", import("@xstyled/system").Theme, {}, never>;

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

@@ -3,6 +3,9 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import styled, { th } from '@xstyled/styled-components';
-export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  flex-shrink: 0;\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"], ["\n  position: relative;\n  flex-shrink: 0;\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"])), th.radius('lg'), th.border('mediumSlim'), th.color('red1'));
+export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\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"], ["\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"])), th.radius('lg'), th.border('mediumSlim'), th.color('red1'), function (_a) {
+    var isDisabled = _a.isDisabled;
+    return (isDisabled ? 0.6 : 1);
+});
 export var HiddenInput = styled.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  opacity: 0;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n"], ["\n  opacity: 0;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n"])));
 var templateObject_1, templateObject_2;

package/Blocks/ImageList/components/CloseButton/index.d.ts

@@ -1,6 +1,7 @@
 import { type FC } from 'react';
 interface CloseButtonProps {
     onImageRemove: () => void;
+    isDisabled?: boolean;
 }
 export declare const CloseButton: FC<CloseButtonProps>;
 export {};

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

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon } from '../../../../Elements/Icon';
 import { Container } from './styles';
 export var CloseButton = function (_a) {
-    var onImageRemove = _a.onImageRemove;
-    return (_jsx(Container, { onClick: onImageRemove, children: _jsx(Icon, { icon: "close", size: "22px", fill: "red1" }) }));
+    var onImageRemove = _a.onImageRemove, isDisabled = _a.isDisabled;
+    return (_jsx(Container, { onClick: !isDisabled ? onImageRemove : undefined, isDisabled: isDisabled, children: _jsx(Icon, { icon: "close", size: "22px", fill: isDisabled ? 'magenta60' : 'red1' }) }));
 };

package/Blocks/ImageList/components/CloseButton/styles.d.ts

@@ -1 +1,3 @@
-export declare const Container: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const Container: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    isDisabled?: boolean | undefined;
+}, never>;

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

@@ -3,5 +3,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import styled, { th } from '@xstyled/styled-components';
-export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\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"], ["\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"])), th.color('red20'));
+export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\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"], ["\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"])), function (_a) {
+    var isDisabled = _a.isDisabled;
+    return th.color(isDisabled ? 'bgLightGray1' : 'red20');
+});
 var templateObject_1;

package/Blocks/ImageList/components/ImageElement/index.d.ts

@@ -4,6 +4,7 @@ interface ImageElementProps {
     onImageRemove?: () => void;
     onOpenLightBox: () => void;
     imageUrl: string | undefined;
+    isDisabled?: boolean;
 }
 export declare const ImageElement: FC<ImageElementProps>;
 export {};

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

@@ -4,8 +4,8 @@ import { ImageTag } from '../ImageTag';
 import { CloseButton } from '../CloseButton';
 import { x } from '@xstyled/styled-components';
 export var ImageElement = function (_a) {
-    var label = _a.label, onImageRemove = _a.onImageRemove, onOpenLightBox = _a.onOpenLightBox, imageUrl = _a.imageUrl;
+    var label = _a.label, onImageRemove = _a.onImageRemove, isDisabled = _a.isDisabled, onOpenLightBox = _a.onOpenLightBox, imageUrl = _a.imageUrl;
     if (!imageUrl)
         return null;
-    return (_jsxs(x.div, { position: "relative", pr: "15px", pt: "15px", w: "100px", children: [_jsx(Image, { src: imageUrl, alt: "", width: "85px", height: "85px", onClick: onOpenLightBox }), onImageRemove && _jsx(CloseButton, { onImageRemove: onImageRemove }), _jsx(ImageTag, { label: label })] }));
+    return (_jsxs(x.div, { position: "relative", pr: "15px", pt: "15px", w: "100px", children: [_jsx(Image, { src: imageUrl, alt: "", width: "85px", height: "85px", onClick: onOpenLightBox }), onImageRemove && _jsx(CloseButton, { onImageRemove: onImageRemove, isDisabled: isDisabled }), _jsx(ImageTag, { label: label })] }));
 };

package/Blocks/ImageList/components/ImageTag/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Tag } from '../../../../Elements/Tag';
+import Tag from '../../../../Elements/Tag';
 import { Container } from './styles';
 export var ImageTag = function (_a) {
     var label = _a.label;

package/Blocks/ImageList/types.d.ts

@@ -1,6 +1,7 @@
 import { type ImageData } from '../LightBox';
 export interface ImageUploadProps {
-    base64?: string;
+    base64image?: string;
+    base64WithDataDeclaration?: string;
     file?: File;
 }
 export interface ImageListProps {
@@ -9,4 +10,5 @@ export interface ImageListProps {
     onImageRemove?: (id?: string) => () => void;
     lightBoxAction?: (id?: string) => () => Promise<void>;
     lightBoxActionTitle?: string;
+    isDisabled?: boolean;
 }

package/Blocks/LightBox/LightBox.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../../Elements/Button';
 import Modal from '../Modal';
-import 'swiper/css';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { Container, Image, ButtonContainer } from './styles';
 export var LightBox = function (_a) {

package/Blocks/Modal/styles.js

@@ -4,11 +4,11 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import styled, { th } from '@xstyled/styled-components';
 import { createRgba } from '../../utils';
-export var DialogOverlay = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed; /* Stay in place */\n  z-index: 5;\n  left: 0;\n  top: 0;\n  width: 100%; /* Full width */\n  height: 100%; /* Full height */\n  overflow: auto; /* Enable scroll if needed */\n  background-color: ", ";\n  text-align: center;\n  @media print {\n    position: absolute !important;\n    left: 0 !important;\n    top: 0 !important;\n    height: auto !important;\n    visibility: hidden;\n  }\n"], ["\n  position: fixed; /* Stay in place */\n  z-index: 5;\n  left: 0;\n  top: 0;\n  width: 100%; /* Full width */\n  height: 100%; /* Full height */\n  overflow: auto; /* Enable scroll if needed */\n  background-color: ", ";\n  text-align: center;\n  @media print {\n    position: absolute !important;\n    left: 0 !important;\n    top: 0 !important;\n    height: auto !important;\n    visibility: hidden;\n  }\n"])), function (_a) {
+export var DialogOverlay = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed; /* Stay in place */\n  z-index: 5;\n  left: 0;\n  top: 0;\n  width: 100%; /* Full width */\n  height: 100%; /* Full height */\n  overflow: auto; /* Enable scroll if needed */\n  background-color: ", ";\n  text-align: center;\n  @media print {\n    position: absolute !important;\n    left: 0 !important;\n    top: 0 !important;\n    height: auto !important;\n    visibility: hidden;\n  }\n  @media (max-width: 576px) {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 16px 0;\n  }\n"], ["\n  position: fixed; /* Stay in place */\n  z-index: 5;\n  left: 0;\n  top: 0;\n  width: 100%; /* Full width */\n  height: 100%; /* Full height */\n  overflow: auto; /* Enable scroll if needed */\n  background-color: ", ";\n  text-align: center;\n  @media print {\n    position: absolute !important;\n    left: 0 !important;\n    top: 0 !important;\n    height: auto !important;\n    visibility: hidden;\n  }\n  @media (max-width: 576px) {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 16px 0;\n  }\n"])), function (_a) {
     var _b = _a.backgroundColor, backgroundColor = _b === void 0 ? 'blue2' : _b;
     return createRgba(backgroundColor, 0.6);
 });
-export var DialogWindow = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  margin: 100px auto 0 auto; /* Location of the box */\n  padding: 0;\n  border: 0;\n  border-radius: 1rem;\n  box-shadow: dialogShadow;\n  min-width: ", ";\n  max-width: ", ";\n  min-height: ", ";\n  max-height: ", ";\n  display: inline-block;\n  position: relative;\n  text-align: left;\n  @media print {\n    background-color: #fff;\n    margin: 0;\n    visibility: visible;\n    overflow: visible;\n    box-shadow: none;\n    max-width: 100%;\n  }\n\n  @media (max-width: 576px) {\n    margin: 20% auto 50px auto;\n    ", "\n  }\n"], ["\n  background-color: ", ";\n  margin: 100px auto 0 auto; /* Location of the box */\n  padding: 0;\n  border: 0;\n  border-radius: 1rem;\n  box-shadow: dialogShadow;\n  min-width: ", ";\n  max-width: ", ";\n  min-height: ", ";\n  max-height: ", ";\n  display: inline-block;\n  position: relative;\n  text-align: left;\n  @media print {\n    background-color: #fff;\n    margin: 0;\n    visibility: visible;\n    overflow: visible;\n    box-shadow: none;\n    max-width: 100%;\n  }\n\n  @media (max-width: 576px) {\n    margin: 20% auto 50px auto;\n    ", "\n  }\n"])), function (_a) {
+export var DialogWindow = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  margin: 100px auto 0 auto; /* Location of the box */\n  padding: 0;\n  border: 0;\n  border-radius: 1rem;\n  box-shadow: dialogShadow;\n  min-width: ", ";\n  max-width: ", ";\n  min-height: ", ";\n  max-height: ", ";\n  display: inline-block;\n  position: relative;\n  text-align: left;\n  @media print {\n    background-color: #fff;\n    margin: 0;\n    visibility: visible;\n    overflow: visible;\n    box-shadow: none;\n    max-width: 100%;\n  }\n\n  @media (max-width: 576px) {\n    margin: auto;\n    ", ";\n  }\n"], ["\n  background-color: ", ";\n  margin: 100px auto 0 auto; /* Location of the box */\n  padding: 0;\n  border: 0;\n  border-radius: 1rem;\n  box-shadow: dialogShadow;\n  min-width: ", ";\n  max-width: ", ";\n  min-height: ", ";\n  max-height: ", ";\n  display: inline-block;\n  position: relative;\n  text-align: left;\n  @media print {\n    background-color: #fff;\n    margin: 0;\n    visibility: visible;\n    overflow: visible;\n    box-shadow: none;\n    max-width: 100%;\n  }\n\n  @media (max-width: 576px) {\n    margin: auto;\n    ", ";\n  }\n"])), function (_a) {
     var $whiteBg = _a.$whiteBg;
     return ($whiteBg ? th.color('white') : '#fefefe');
 }, function (_a) {
@@ -25,18 +25,18 @@ export var DialogWindow = styled.div(templateObject_2 || (templateObject_2 = __m
     return $maxHeight || 'auto';
 }, function (_a) {
     var $mobileFullscreen = _a.$mobileFullscreen;
-    return $mobileFullscreen && "border-radius: 0; max-width: 100% !important;";
+    return $mobileFullscreen && 'border-radius: 0; max-width: 100% !important;';
 });
 export var HeaderContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  padding: 30px;\n  padding-bottom: ", ";\n\n  @media (max-width: 576px) {\n    padding: 18px;\n    border-bottom: 1px solid ", ";\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  padding: 30px;\n  padding-bottom: ", ";\n\n  @media (max-width: 576px) {\n    padding: 18px;\n    border-bottom: 1px solid ", ";\n  }\n"])), function (_a) {
     var topSpace = _a.topSpace;
     return topSpace;
 }, th.color('lightGray6'));
-export var ContentContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: 30px;\n  padding-top: ", ";\n\n  @media (max-width: 576px) {\n    padding: ", ";\n    font-size: 16px;\n    line-height: 1.4;\n  }\n  \n  \n"], ["\n  padding: 30px;\n  padding-top: ", ";\n\n  @media (max-width: 576px) {\n    padding: ", ";\n    font-size: 16px;\n    line-height: 1.4;\n  }\n  \n  \n"])), function (_a) {
+export var ContentContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: 30px;\n  padding-top: ", ";\n\n  @media (max-width: 576px) {\n    padding: ", ";\n    font-size: 16px;\n    line-height: 1.4;\n  }\n"], ["\n  padding: 30px;\n  padding-top: ", ";\n\n  @media (max-width: 576px) {\n    padding: ", ";\n    font-size: 16px;\n    line-height: 1.4;\n  }\n"])), function (_a) {
     var topSpace = _a.topSpace;
     return topSpace;
 }, function (_a) {
     var $mobileFullscreen = _a.$mobileFullscreen;
-    return $mobileFullscreen ? '0' : '18px';
+    return ($mobileFullscreen ? '0' : '18px');
 });
 export var TitleContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: row;\n  align-items: center;\n  > div:first-of-type {\n    margin-right: 0.5em;\n    display: block;\n  }\n\n  .icon {\n    font-size: 24px;\n    margin-right: 15px;\n    display: flex;\n\n    @media (max-width: 576px) {\n      font-size: 18px;\n      margin-right: 12px;\n    }\n  }\n"], ["\n  display: flex;\n  flex-flow: row;\n  align-items: center;\n  > div:first-of-type {\n    margin-right: 0.5em;\n    display: block;\n  }\n\n  .icon {\n    font-size: 24px;\n    margin-right: 15px;\n    display: flex;\n\n    @media (max-width: 576px) {\n      font-size: 18px;\n      margin-right: 12px;\n    }\n  }\n"])));
 export var H4 = styled.h4(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: typoPrimary;\n  margin: 0;\n  font-size: 24px;\n  line-height: 28px;\n  font-weight: 700;\n\n  @media (max-width: 576px) {\n    font-size: 18px;\n    line-height: 18px;\n  }\n"], ["\n  color: typoPrimary;\n  margin: 0;\n  font-size: 24px;\n  line-height: 28px;\n  font-weight: 700;\n\n  @media (max-width: 576px) {\n    font-size: 18px;\n    line-height: 18px;\n  }\n"])));

package/Blocks/Tabs/TabContent.d.ts

@@ -1,2 +1,3 @@
 import { TabContentProps } from './types';
-export declare const TabContent: ({ activeTab, value, children }: TabContentProps) => React.ReactNode | React.ReactNode[];
+import { ReactElement } from 'react';
+export declare const TabContent: ({ activeTab, value, children }: TabContentProps) => ReactElement | null;

package/Blocks/Tabs/Tabs.d.ts

@@ -1,2 +1,2 @@
 import { TabsProps } from './types';
-export declare const Tabs: ({ tabsDefinition, activeTab, onTabSwitch }: TabsProps) => JSX.Element;
+export declare const Tabs: ({ tabsDefinition, activeTab, onTabSwitch, mb }: TabsProps) => JSX.Element;

package/Blocks/Tabs/Tabs.js

@@ -12,8 +12,8 @@ var Tab = function (_a) {
     return (_jsx(StyledTabWrapper, { children: _jsxs(StyledTab, { onClick: handleOnClick, active: isActive, children: [icon && (_jsx(StyledImageBox, { children: _jsx(Icon, { icon: icon }) })), _jsx(Text, { children: label }), isActive && badgeCount && badgeCount > 0 && (_jsx(RoundedWrap, { children: _jsx(Text, { variant: "medium", children: badgeCount }) }))] }) }));
 };
 export var Tabs = function (_a) {
-    var tabsDefinition = _a.tabsDefinition, activeTab = _a.activeTab, onTabSwitch = _a.onTabSwitch;
-    return (_jsx(TabPanel, { children: tabsDefinition.map(function (item, index) {
+    var tabsDefinition = _a.tabsDefinition, activeTab = _a.activeTab, onTabSwitch = _a.onTabSwitch, mb = _a.mb;
+    return (_jsx(TabPanel, { "$mb": mb, children: tabsDefinition.map(function (item, index) {
             return _jsx(Tab, { value: index, tabDefinition: item, isActive: index === activeTab, onTabSwitch: onTabSwitch }, index);
         }) }));
 };

package/Blocks/Tabs/index.d.ts

@@ -1,5 +1,5 @@
 import { Tabs } from './Tabs';
-export { Tabs } from './Tabs';
+export { TabContent } from './TabContent';
 export { useTabs } from './hooks/useTabs';
 export type { TabDefinition } from './types';
 export default Tabs;

package/Blocks/Tabs/index.js

@@ -1,4 +1,4 @@
 import { Tabs } from './Tabs';
-export { Tabs } from './Tabs';
+export { TabContent } from './TabContent';
 export { useTabs } from './hooks/useTabs';
 export default Tabs;

package/Blocks/Tabs/stories/Tabs.stories.d.ts

@@ -2,7 +2,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ tabsDefinition, activeTab, onTabSwitch }: import("../types").TabsProps) => JSX.Element;
+    component: ({ tabsDefinition, activeTab, onTabSwitch, mb }: import("../types").TabsProps) => JSX.Element;
     tags: string[];
     argTypes: {};
 };

package/Blocks/Tabs/styles.d.ts

@@ -5,4 +5,6 @@ export declare const RoundedWrap: import("styled-components").StyledComponent<"d
 export declare const Tab: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     active: boolean;
 }, never>;
-export declare const TabPanel: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const TabPanel: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
+    $mb?: string | undefined;
+}, never>;

package/Blocks/Tabs/styles.js

@@ -7,9 +7,12 @@ export var StyledImageBox = styled(x.div)(templateObject_1 || (templateObject_1
 export var StyledTabWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: baseline;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: baseline;\n"])));
 export var RoundedWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex !important;\n  justify-content: center;\n  align-items: center;\n  height: 23px;\n  background-color: ", ";\n  border-radius: 29px;\n  padding: 3px 10px;\n  margin-left: 8px;\n"], ["\n  display: flex !important;\n  justify-content: center;\n  align-items: center;\n  height: 23px;\n  background-color: ", ";\n  border-radius: 29px;\n  padding: 3px 10px;\n  margin-left: 8px;\n"])), th.color('lightGray7'));
 var activeTab = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: ", ";\n  position: relative;\n  &:after {\n    content: '';\n    position: absolute;\n    bottom: 2;\n    left: 0;\n    right: 0;\n    background-color: ", ";\n    height: 4px;\n    border-radius: 6px 6px 0px 0px;\n  }\n  & > div {\n    display: inline;\n    color: ", ";\n  }\n"], ["\n  color: ", ";\n  position: relative;\n  &:after {\n    content: '';\n    position: absolute;\n    bottom: 2;\n    left: 0;\n    right: 0;\n    background-color: ", ";\n    height: 4px;\n    border-radius: 6px 6px 0px 0px;\n  }\n  & > div {\n    display: inline;\n    color: ", ";\n  }\n"])), th.color('red1'), th.color('red1'), th.color('typoPrimary'));
-export var Tab = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  padding: 0.6rem;\n  transition: 200ms;\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  height: 46px;\n  letter-spacing: 0.03em;\n  margin-top: 10px;\n  min-width: 120px;\n  & > div {\n    display: none;\n  }\n  &:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n\n  :hover {\n    color: ", ";\n  }\n\n  :active {\n    ", "\n  }\n\n  ", "\n"], ["\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n  padding: 0.6rem;\n  transition: 200ms;\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  height: 46px;\n  letter-spacing: 0.03em;\n  margin-top: 10px;\n  min-width: 120px;\n  & > div {\n    display: none;\n  }\n  &:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n\n  :hover {\n    color: ", ";\n  }\n\n  :active {\n    ", "\n  }\n\n  ", "\n"])), th.color('gray'), th.color('typoPrimary'), activeTab, function (_a) {
+export var Tab = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  padding: 0.6rem;\n  transition: 200ms;\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  height: 46px;\n  letter-spacing: 0.03em;\n  margin-top: 10px;\n  min-width: 120px;\n  & > div {\n    display: none;\n  }\n  &:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n\n  :hover {\n    color: ", ";\n  }\n\n  :active {\n    ", "\n  }\n\n  ", "\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  padding: 0.6rem;\n  transition: 200ms;\n  color: ", ";\n  font-weight: bold;\n  font-size: 14px;\n  height: 46px;\n  letter-spacing: 0.03em;\n  margin-top: 10px;\n  min-width: 120px;\n  & > div {\n    display: none;\n  }\n  &:not(:last-child) {\n    margin-right: 0.5rem;\n  }\n\n  :hover {\n    color: ", ";\n  }\n\n  :active {\n    ", "\n  }\n\n  ", "\n"])), th.color('gray'), th.color('typoPrimary'), activeTab, function (_a) {
     var active = _a.active;
     return (active ? activeTab : '');
 });
-export var TabPanel = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  min-height: 3rem;\n  display: flex;\n  align-items: flex-end;\n  overflow: auto;\n  width: fit-content;\n  position: relative;\n  &:after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-color: ", ";\n    height: 2px;\n  }\n"], ["\n  min-height: 3rem;\n  display: flex;\n  align-items: flex-end;\n  overflow: auto;\n  width: fit-content;\n  position: relative;\n  &:after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-color: ", ";\n    height: 2px;\n  }\n"])), th.color('bgLightGray1'));
+export var TabPanel = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  min-height: 3rem;\n  display: flex;\n  align-items: flex-end;\n  overflow: auto;\n  width: fit-content;\n  position: relative;\n  margin-bottom: ", ";\n  &:after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-color: ", ";\n    height: 2px;\n  }\n"], ["\n  min-height: 3rem;\n  display: flex;\n  align-items: flex-end;\n  overflow: auto;\n  width: fit-content;\n  position: relative;\n  margin-bottom: ", ";\n  &:after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background-color: ", ";\n    height: 2px;\n  }\n"])), function (_a) {
+    var _b = _a.$mb, $mb = _b === void 0 ? 0 : _b;
+    return $mb;
+}, th.color('bgLightGray1'));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/Blocks/Tabs/types.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { ReactElement } from 'react';
 export type TabDefinition = {
     label: string;
     icon?: string;
@@ -9,6 +9,7 @@ export type TabsProps = {
     tabsDefinition: TabDefinition[];
     activeTab: number;
     onTabSwitch: (tab: number) => void;
+    mb?: string;
 };
 export type TabElementProps = {
     tabDefinition: TabDefinition;
@@ -23,5 +24,5 @@ export type UseTabsHook = (tabDefinitions: TabDefinition[]) => {
 export type TabContentProps = {
     activeTab: number;
     value: number;
-    children: React.ReactNode | React.ReactNode[];
+    children: ReactElement | null;
 };

package/Elements/Button/styles.d.ts

@@ -12,8 +12,8 @@ export declare const StyledButton: import("styled-components").StyledComponent<"
     children?: any;
     onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
     fullWidth: boolean;
-    mt?: string | number | undefined;
-    mr?: string | number | undefined;
-    mb?: string | number | undefined;
-    ml?: string | number | undefined;
+    mt?: string | undefined;
+    mr?: string | undefined;
+    mb?: string | undefined;
+    ml?: string | undefined;
 }, never>;

package/Elements/Button/styles.js

@@ -14,21 +14,21 @@ export var StyledIcon = styled(Icon)(templateObject_3 || (templateObject_3 = __m
     var $addMargin = _a.$addMargin;
     return ($addMargin ? '0.5em' : '0');
 });
-export var StyledButton = styled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  height: 2.5em;\n  border: slim;\n  text-align: center;\n  text-decoration: none;\n  display: ", ";\n  flex-direction: ", ";\n  align-items: ", ";\n  font-family: ", ";\n  font-weight: semiBold;\n  border-radius: lg;\n  cursor: pointer;\n  transition-duration: 0.1s;\n  align-items: center;\n  justify-content: center;\n  transition: all 300ms ease-out;\n  pointer-events: ", ";\n  opacity: ", ";\n\n  :disabled {\n    color: lightGray5;\n  }\n\n  :focus {\n    outline: none;\n  }\n\n  &[data-appearance='primary'] {\n    background-color: red1;\n    color: white;\n    border-color: red1;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: white;\n        color: red1;\n        border-color: red1;\n      }\n    }\n\n    :active {\n      background-color: red1;\n      color: red1;\n      border: none;\n    }\n\n    :disabled {\n      background-color: bgLightGray;\n      border-color: lightGray5;\n      color: gray3;\n    }\n  }\n\n  &[data-appearance='primaryLight'] {\n    color: red1;\n    background-color: red20;\n    border-color: red20;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: red1;\n        color: white;\n        border-color: red1;\n      }\n    }\n\n    :active {\n      background-color: red1;\n      color: white;\n      border-color: red1;\n    }\n\n    :disabled {\n      background-color: bgLightGray;\n      border-color: lightGray5;\n      color: gray3;\n    }\n  }\n\n  &[data-appearance='success'] {\n    background-color: successColor;\n    color: white;\n    border-color: successColor;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: white;\n        color: successColor;\n      }\n    }\n\n    :active {\n      background-color: white;\n      color: successColor;\n    }\n\n    :disabled {\n      background-color: bgLightGray;\n      border-color: lightGray5;\n      color: gray3;\n    }\n  }\n\n  &[data-appearance='secondary'] {\n    background-color: white;\n    color: red1;\n    border-color: red1;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: red1;\n        color: white;\n        border-color: red1;\n      }\n    }\n\n    :active {\n      background-color: red1;\n      color: red1;\n      border-color: red1;\n    }\n\n    :disabled {\n      background-color: white;\n      border-color: lightGray7;\n    }\n  }\n\n  &[data-appearance='secondaryLg'] {\n    background-color: white;\n    color: typoPrimary;\n    border-color: blue2;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: blue2;\n        color: white;\n        border-color: blue2;\n      }\n    }\n\n    :active {\n      background-color: gray;\n      color: white;\n      border: none;\n    }\n\n    :disabled {\n      background-color: white;\n      border-color: bgLightGray1;\n    }\n  }\n\n  &[data-appearance='primaryLg'] {\n    background-color: blue2;\n    color: white;\n    border-color: blue2;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: white;\n        color: typoPrimary;\n        border-color: blue2;\n      }\n    }\n\n    :active {\n      background-color: gray;\n      color: white;\n      border: none;\n    }\n\n    :disabled {\n      background-color: bgLightGray1;\n      border-color: bgLightGray1;\n    }\n  }\n\n  &[data-appearance='minimal'] {\n    background-color: transparent;\n    border: none !important;\n    color: blue2;\n\n    :disabled {\n      color: blue2;\n    }\n  }\n\n  &[data-appearance='minimalRed'] {\n    background-color: transparent;\n    border: none !important;\n    color: red1;\n\n    @media (hover: hover) {\n      &:hover {\n        color: red3;\n        svg {\n          fill: red3 !important;\n        }\n      }\n    }\n    \n    :disabled,\n    :active {\n      color: red3;\n      svg {\n        fill: red3 !important;\n      }\n    }\n  }\n\n  &[data-sizing='icon'] {\n    aspect-ratio: 4 / 3;\n    padding: 0.5em 0.875em;\n  }\n\n  &[data-sizing='iconLg'] {\n    min-width: 42px;\n    min-height: 38px;\n    padding: 0.5em 0.875em;\n    svg {\n      height: 16px;\n    }\n  }\n\n  &[data-sizing='normal'] {\n    min-width: 7rem;\n    padding: 12px 18px;\n    min-height: 38px;\n    line-height: 14px;\n    font-size: 14px;\n  }\n\n  &[data-sizing='large'] {\n    min-width: 12rem;\n    padding: 0.75em 1.5em;\n    min-height: 34px;\n    font-size: 12px;\n  }\n\n  &[data-sizing='grid'] {\n    min-width: 5rem;\n    padding: 0.5em 1.25em;\n    font-size: 10px;\n    border-radius: 5px;\n  }\n"], ["\n  width: ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  height: 2.5em;\n  border: slim;\n  text-align: center;\n  text-decoration: none;\n  display: ", ";\n  flex-direction: ", ";\n  align-items: ", ";\n  font-family: ", ";\n  font-weight: semiBold;\n  border-radius: lg;\n  cursor: pointer;\n  transition-duration: 0.1s;\n  align-items: center;\n  justify-content: center;\n  transition: all 300ms ease-out;\n  pointer-events: ", ";\n  opacity: ", ";\n\n  :disabled {\n    color: lightGray5;\n  }\n\n  :focus {\n    outline: none;\n  }\n\n  &[data-appearance='primary'] {\n    background-color: red1;\n    color: white;\n    border-color: red1;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: white;\n        color: red1;\n        border-color: red1;\n      }\n    }\n\n    :active {\n      background-color: red1;\n      color: red1;\n      border: none;\n    }\n\n    :disabled {\n      background-color: bgLightGray;\n      border-color: lightGray5;\n      color: gray3;\n    }\n  }\n\n  &[data-appearance='primaryLight'] {\n    color: red1;\n    background-color: red20;\n    border-color: red20;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: red1;\n        color: white;\n        border-color: red1;\n      }\n    }\n\n    :active {\n      background-color: red1;\n      color: white;\n      border-color: red1;\n    }\n\n    :disabled {\n      background-color: bgLightGray;\n      border-color: lightGray5;\n      color: gray3;\n    }\n  }\n\n  &[data-appearance='success'] {\n    background-color: successColor;\n    color: white;\n    border-color: successColor;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: white;\n        color: successColor;\n      }\n    }\n\n    :active {\n      background-color: white;\n      color: successColor;\n    }\n\n    :disabled {\n      background-color: bgLightGray;\n      border-color: lightGray5;\n      color: gray3;\n    }\n  }\n\n  &[data-appearance='secondary'] {\n    background-color: white;\n    color: red1;\n    border-color: red1;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: red1;\n        color: white;\n        border-color: red1;\n      }\n    }\n\n    :active {\n      background-color: red1;\n      color: red1;\n      border-color: red1;\n    }\n\n    :disabled {\n      background-color: white;\n      border-color: lightGray7;\n    }\n  }\n\n  &[data-appearance='secondaryLg'] {\n    background-color: white;\n    color: typoPrimary;\n    border-color: blue2;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: blue2;\n        color: white;\n        border-color: blue2;\n      }\n    }\n\n    :active {\n      background-color: gray;\n      color: white;\n      border: none;\n    }\n\n    :disabled {\n      background-color: white;\n      border-color: bgLightGray1;\n    }\n  }\n\n  &[data-appearance='primaryLg'] {\n    background-color: blue2;\n    color: white;\n    border-color: blue2;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: white;\n        color: typoPrimary;\n        border-color: blue2;\n      }\n    }\n\n    :active {\n      background-color: gray;\n      color: white;\n      border: none;\n    }\n\n    :disabled {\n      background-color: bgLightGray1;\n      border-color: bgLightGray1;\n    }\n  }\n\n  &[data-appearance='minimal'] {\n    background-color: transparent;\n    border: none !important;\n    color: blue2;\n\n    :disabled {\n      color: blue2;\n    }\n  }\n\n  &[data-appearance='minimalRed'] {\n    background-color: transparent;\n    border: none !important;\n    color: red1;\n\n    @media (hover: hover) {\n      &:hover {\n        color: red3;\n        svg {\n          fill: red3 !important;\n        }\n      }\n    }\n    \n    :disabled,\n    :active {\n      color: red3;\n      svg {\n        fill: red3 !important;\n      }\n    }\n  }\n\n  &[data-sizing='icon'] {\n    aspect-ratio: 4 / 3;\n    padding: 0.5em 0.875em;\n  }\n\n  &[data-sizing='iconLg'] {\n    min-width: 42px;\n    min-height: 38px;\n    padding: 0.5em 0.875em;\n    svg {\n      height: 16px;\n    }\n  }\n\n  &[data-sizing='normal'] {\n    min-width: 7rem;\n    padding: 12px 18px;\n    min-height: 38px;\n    line-height: 14px;\n    font-size: 14px;\n  }\n\n  &[data-sizing='large'] {\n    min-width: 12rem;\n    padding: 0.75em 1.5em;\n    min-height: 34px;\n    font-size: 12px;\n  }\n\n  &[data-sizing='grid'] {\n    min-width: 5rem;\n    padding: 0.5em 1.25em;\n    font-size: 10px;\n    border-radius: 5px;\n  }\n"])), function (_a) {
+export var StyledButton = styled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  height: 2.5em;\n  border: slim;\n  text-align: center;\n  text-decoration: none;\n  display: ", ";\n  flex-direction: ", ";\n  align-items: ", ";\n  font-family: ", ";\n  font-weight: semiBold;\n  border-radius: lg;\n  cursor: pointer;\n  transition-duration: 0.1s;\n  align-items: center;\n  justify-content: center;\n  transition: all 300ms ease-out;\n  pointer-events: ", ";\n  opacity: ", ";\n\n  :disabled {\n    color: lightGray5;\n  }\n\n  :focus {\n    outline: none;\n  }\n\n  &[data-appearance='primary'] {\n    background-color: red1;\n    color: white;\n    border-color: red1;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: white;\n        color: red1;\n        border-color: red1;\n      }\n    }\n\n    :active {\n      background-color: red1;\n      color: red1;\n      border: none;\n    }\n\n    :disabled {\n      background-color: bgLightGray;\n      border-color: lightGray5;\n      color: gray3;\n    }\n  }\n\n  &[data-appearance='primaryLight'] {\n    color: red1;\n    background-color: red20;\n    border-color: red20;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: red1;\n        color: white;\n        border-color: red1;\n      }\n    }\n\n    :active {\n      background-color: red1;\n      color: white;\n      border-color: red1;\n    }\n\n    :disabled {\n      background-color: bgLightGray;\n      border-color: lightGray5;\n      color: gray3;\n    }\n  }\n\n  &[data-appearance='success'] {\n    background-color: successColor;\n    color: white;\n    border-color: successColor;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: white;\n        color: successColor;\n      }\n    }\n\n    :active {\n      background-color: white;\n      color: successColor;\n    }\n\n    :disabled {\n      background-color: bgLightGray;\n      border-color: lightGray5;\n      color: gray3;\n    }\n  }\n\n  &[data-appearance='secondary'] {\n    background-color: white;\n    color: red1;\n    border-color: red1;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: red1;\n        color: white;\n        border-color: red1;\n      }\n    }\n\n    :active {\n      background-color: red1;\n      color: red1;\n      border-color: red1;\n    }\n\n    :disabled {\n      background-color: white;\n      border-color: lightGray7;\n    }\n  }\n\n  &[data-appearance='secondaryLg'] {\n    background-color: white;\n    color: typoPrimary;\n    border-color: blue2;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: blue2;\n        color: white;\n        border-color: blue2;\n      }\n    }\n\n    :active {\n      background-color: gray;\n      color: white;\n      border: none;\n    }\n\n    :disabled {\n      background-color: white;\n      border-color: bgLightGray1;\n    }\n  }\n\n  &[data-appearance='primaryLg'] {\n    background-color: blue2;\n    color: white;\n    border-color: blue2;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: white;\n        color: typoPrimary;\n        border-color: blue2;\n      }\n    }\n\n    :active {\n      background-color: gray;\n      color: white;\n      border: none;\n    }\n\n    :disabled {\n      background-color: bgLightGray1;\n      border-color: bgLightGray1;\n    }\n  }\n\n  &[data-appearance='minimal'] {\n    background-color: transparent;\n    border: none !important;\n    color: blue2;\n\n    :disabled {\n      color: blue2;\n    }\n  }\n\n  &[data-appearance='minimalRed'] {\n    background-color: transparent;\n    border: none !important;\n    color: red1;\n\n    @media (hover: hover) {\n      &:hover {\n        color: red3;\n        svg {\n          fill: red3 !important;\n        }\n      }\n    }\n\n    :disabled,\n    :active {\n      color: red3;\n      svg {\n        fill: red3 !important;\n      }\n    }\n  }\n\n  &[data-sizing='icon'] {\n    aspect-ratio: 4 / 3;\n    padding: 0.5em 0.875em;\n  }\n\n  &[data-sizing='iconLg'] {\n    min-width: 42px;\n    min-height: 38px;\n    padding: 0.5em 0.875em;\n    svg {\n      height: 16px;\n    }\n  }\n\n  &[data-sizing='normal'] {\n    min-width: 7rem;\n    padding: 12px 18px;\n    min-height: 38px;\n    line-height: 14px;\n    font-size: 14px;\n  }\n\n  &[data-sizing='large'] {\n    min-width: 12rem;\n    padding: 0.75em 1.5em;\n    min-height: 34px;\n    font-size: 12px;\n  }\n\n  &[data-sizing='grid'] {\n    min-width: 5rem;\n    padding: 0.5em 1.25em;\n    font-size: 10px;\n    border-radius: 5px;\n  }\n"], ["\n  width: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  height: 2.5em;\n  border: slim;\n  text-align: center;\n  text-decoration: none;\n  display: ", ";\n  flex-direction: ", ";\n  align-items: ", ";\n  font-family: ", ";\n  font-weight: semiBold;\n  border-radius: lg;\n  cursor: pointer;\n  transition-duration: 0.1s;\n  align-items: center;\n  justify-content: center;\n  transition: all 300ms ease-out;\n  pointer-events: ", ";\n  opacity: ", ";\n\n  :disabled {\n    color: lightGray5;\n  }\n\n  :focus {\n    outline: none;\n  }\n\n  &[data-appearance='primary'] {\n    background-color: red1;\n    color: white;\n    border-color: red1;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: white;\n        color: red1;\n        border-color: red1;\n      }\n    }\n\n    :active {\n      background-color: red1;\n      color: red1;\n      border: none;\n    }\n\n    :disabled {\n      background-color: bgLightGray;\n      border-color: lightGray5;\n      color: gray3;\n    }\n  }\n\n  &[data-appearance='primaryLight'] {\n    color: red1;\n    background-color: red20;\n    border-color: red20;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: red1;\n        color: white;\n        border-color: red1;\n      }\n    }\n\n    :active {\n      background-color: red1;\n      color: white;\n      border-color: red1;\n    }\n\n    :disabled {\n      background-color: bgLightGray;\n      border-color: lightGray5;\n      color: gray3;\n    }\n  }\n\n  &[data-appearance='success'] {\n    background-color: successColor;\n    color: white;\n    border-color: successColor;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: white;\n        color: successColor;\n      }\n    }\n\n    :active {\n      background-color: white;\n      color: successColor;\n    }\n\n    :disabled {\n      background-color: bgLightGray;\n      border-color: lightGray5;\n      color: gray3;\n    }\n  }\n\n  &[data-appearance='secondary'] {\n    background-color: white;\n    color: red1;\n    border-color: red1;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: red1;\n        color: white;\n        border-color: red1;\n      }\n    }\n\n    :active {\n      background-color: red1;\n      color: red1;\n      border-color: red1;\n    }\n\n    :disabled {\n      background-color: white;\n      border-color: lightGray7;\n    }\n  }\n\n  &[data-appearance='secondaryLg'] {\n    background-color: white;\n    color: typoPrimary;\n    border-color: blue2;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: blue2;\n        color: white;\n        border-color: blue2;\n      }\n    }\n\n    :active {\n      background-color: gray;\n      color: white;\n      border: none;\n    }\n\n    :disabled {\n      background-color: white;\n      border-color: bgLightGray1;\n    }\n  }\n\n  &[data-appearance='primaryLg'] {\n    background-color: blue2;\n    color: white;\n    border-color: blue2;\n\n    @media (hover: hover) {\n      &:hover {\n        background-color: white;\n        color: typoPrimary;\n        border-color: blue2;\n      }\n    }\n\n    :active {\n      background-color: gray;\n      color: white;\n      border: none;\n    }\n\n    :disabled {\n      background-color: bgLightGray1;\n      border-color: bgLightGray1;\n    }\n  }\n\n  &[data-appearance='minimal'] {\n    background-color: transparent;\n    border: none !important;\n    color: blue2;\n\n    :disabled {\n      color: blue2;\n    }\n  }\n\n  &[data-appearance='minimalRed'] {\n    background-color: transparent;\n    border: none !important;\n    color: red1;\n\n    @media (hover: hover) {\n      &:hover {\n        color: red3;\n        svg {\n          fill: red3 !important;\n        }\n      }\n    }\n\n    :disabled,\n    :active {\n      color: red3;\n      svg {\n        fill: red3 !important;\n      }\n    }\n  }\n\n  &[data-sizing='icon'] {\n    aspect-ratio: 4 / 3;\n    padding: 0.5em 0.875em;\n  }\n\n  &[data-sizing='iconLg'] {\n    min-width: 42px;\n    min-height: 38px;\n    padding: 0.5em 0.875em;\n    svg {\n      height: 16px;\n    }\n  }\n\n  &[data-sizing='normal'] {\n    min-width: 7rem;\n    padding: 12px 18px;\n    min-height: 38px;\n    line-height: 14px;\n    font-size: 14px;\n  }\n\n  &[data-sizing='large'] {\n    min-width: 12rem;\n    padding: 0.75em 1.5em;\n    min-height: 34px;\n    font-size: 12px;\n  }\n\n  &[data-sizing='grid'] {\n    min-width: 5rem;\n    padding: 0.5em 1.25em;\n    font-size: 10px;\n    border-radius: 5px;\n  }\n"])), function (_a) {
     var fullWidth = _a.fullWidth;
     return (fullWidth ? '100%' : 'initial');
 }, function (_a) {
     var mt = _a.mt;
-    return (mt ? 'margin-top: 0;' : '');
+    return mt || 0;
 }, function (_a) {
     var mr = _a.mr;
-    return (mr ? 'margin-right: 0;' : '');
+    return mr || 0;
 }, function (_a) {
     var mb = _a.mb;
-    return (mb ? 'margin-bottom: 0;' : '');
+    return mb || 0;
 }, function (_a) {
     var ml = _a.ml;
-    return (ml ? 'margin-left: 0;' : '');
+    return ml || 0;
 }, function (_a) {
     var columnAlign = _a.columnAlign;
     return (columnAlign ? 'flex' : 'inline-flex');

package/Elements/Button/types.d.ts

@@ -15,8 +15,8 @@ export type Props = React.HTMLProps<HTMLButtonElement> & {
     icon?: string | JSX.Element;
     type?: 'button' | 'submit' | 'reset';
     fullWidth?: boolean;
-    mt?: string | number;
-    mr?: string | number;
-    mb?: string | number;
-    ml?: string | number;
+    mt?: string;
+    mr?: string;
+    mb?: string;
+    ml?: string;
 };

package/Elements/Icon/icons/AddPhoto.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from '../types';
+import { FC } from 'react';
+export declare const AddPhoto: FC<SvgProps>;

package/Elements/Icon/icons/AddPhoto.js

@@ -0,0 +1,13 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var AddPhoto = function (props) { return (_jsxs("svg", __assign({ width: "36", height: "36", viewBox: "0 0 37 34", fill: "#DB2B19", xmlns: "http://www.w3.org/2000/svg" }, props, { children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.82792 6.14124C10.7187 5.25044 11.9269 4.75 13.1867 4.75H19C19.8745 4.75 20.5833 5.45889 20.5833 6.33333C20.5833 7.20778 19.8745 7.91667 19 7.91667H13.1867C12.7668 7.91667 12.364 8.08349 12.0671 8.38041L10.7554 9.69209C9.86461 10.5829 8.65643 11.0833 7.39665 11.0833H4.75C3.87556 11.0833 3.16667 11.7922 3.16667 12.6667V28.5C3.16667 29.3745 3.87556 30.0833 4.75 30.0833H26.9167C27.7911 30.0833 28.5 29.3745 28.5 28.5V17.4167C28.5 16.5422 29.2089 15.8333 30.0833 15.8333C30.9578 15.8333 31.6667 16.5422 31.6667 17.4167V28.5C31.6667 31.1234 29.5401 33.25 26.9167 33.25H4.75C2.12665 33.25 0 31.1234 0 28.5V12.6667C0 10.0433 2.12665 7.91667 4.75 7.91667H7.39665C7.81658 7.91667 8.21931 7.74985 8.51624 7.45292L9.82792 6.14124Z" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.9165 20.5834C7.9165 16.2112 11.4609 12.6667 15.8332 12.6667C20.2054 12.6667 23.7498 16.2112 23.7498 20.5834C23.7498 24.9556 20.2054 28.5001 15.8332 28.5001C11.4609 28.5001 7.9165 24.9556 7.9165 20.5834ZM15.8332 15.8334C13.2098 15.8334 11.0832 17.96 11.0832 20.5834C11.0832 23.2068 13.2098 25.3334 15.8332 25.3334C18.4566 25.3334 20.5832 23.2068 20.5832 20.5834C20.5832 17.96 18.4566 15.8334 15.8332 15.8334Z" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M23.75 6.33333C23.75 5.45889 24.4589 4.75 25.3333 4.75H34.8333C35.7078 4.75 36.4167 5.45889 36.4167 6.33333C36.4167 7.20778 35.7078 7.91667 34.8333 7.91667H25.3333C24.4589 7.91667 23.75 7.20778 23.75 6.33333Z" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M30.0833 0C30.9578 0 31.6667 0.70889 31.6667 1.58333V11.0833C31.6667 11.9578 30.9578 12.6667 30.0833 12.6667C29.2089 12.6667 28.5 11.9578 28.5 11.0833V1.58333C28.5 0.70889 29.2089 0 30.0833 0Z" })] }))); };

package/Elements/Icon/icons/BarcodeScan.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from '../types';
+import { FC } from 'react';
+export declare const BarcodeScan: FC<SvgProps>;

package/Elements/Icon/icons/BarcodeScan.js

@@ -0,0 +1,13 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+export var BarcodeScan = function (props) { return (_jsx("svg", __assign({ width: "24", height: "16", viewBox: "0 0 24 16", fill: "#22394E", xmlns: "http://www.w3.org/2000/svg" }, props, { children: _jsx("path", { d: "M3.3 -6.10352e-05C2.80125 -6.10352e-05 2.4 0.382082 2.4 0.857082V5.71422H4.2V0.857082C4.2 0.382082 3.79875 -6.10352e-05 3.3 -6.10352e-05ZM2.4 15.1428C2.4 15.6178 2.80125 15.9999 3.3 15.9999C3.79875 15.9999 4.2 15.6178 4.2 15.1428V10.2857H2.4V15.1428ZM6 15.4285C6 15.7428 6.27 15.9999 6.6 15.9999C6.93 15.9999 7.2 15.7428 7.2 15.4285V10.2857H6V15.4285ZM8.4 15.1428C8.4 15.6178 8.80125 15.9999 9.3 15.9999C9.79875 15.9999 10.2 15.6178 10.2 15.1428V10.2857H8.4V15.1428ZM8.4 0.857082V5.71422H10.2V0.857082C10.2 0.382082 9.79875 -6.10352e-05 9.3 -6.10352e-05C8.80125 -6.10352e-05 8.4 0.382082 8.4 0.857082ZM12.6 15.1428C12.6 15.6178 13.0013 15.9999 13.5 15.9999C13.9988 15.9999 14.4 15.6178 14.4 15.1428V10.2857H12.6V15.1428ZM12.6 0.857082V5.71422H14.4V0.857082C14.4 0.382082 13.9988 -6.10352e-05 13.5 -6.10352e-05C13.0013 -6.10352e-05 12.6 0.382082 12.6 0.857082ZM17.4 15.4285C17.4 15.7428 17.67 15.9999 18 15.9999C18.33 15.9999 18.6 15.7428 18.6 15.4285V10.2857H17.4V15.4285ZM17.4 0.571368V5.71422H18.6V0.571368C18.6 0.257082 18.33 -6.10352e-05 18 -6.10352e-05C17.67 -6.10352e-05 17.4 0.257082 17.4 0.571368ZM19.8 15.1428C19.8 15.6178 20.2013 15.9999 20.7 15.9999C21.1988 15.9999 21.6 15.6178 21.6 15.1428V10.2857H19.8V15.1428ZM19.8 0.857082V5.71422H21.6V0.857082C21.6 0.382082 21.1988 -6.10352e-05 20.7 -6.10352e-05C20.2013 -6.10352e-05 19.8 0.382082 19.8 0.857082ZM6 5.71422H7.2V0.571368C7.2 0.257082 6.93 -6.10352e-05 6.6 -6.10352e-05C6.27 -6.10352e-05 6 0.257082 6 0.571368V5.71422ZM0 7.99994C0 8.47494 0.40125 8.85708 0.9 8.85708H23.1C23.5988 8.85708 24 8.47494 24 7.99994C24 7.52494 23.5988 7.1428 23.1 7.1428H0.9C0.40125 7.1428 0 7.52494 0 7.99994Z" }) }))); };

package/Elements/Icon/icons/Box.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from '../types';
+import { FC } from 'react';
+export declare const Box: FC<SvgProps>;

package/Elements/Icon/icons/Box.js

@@ -0,0 +1,13 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+export var Box = function (props) { return (_jsx("svg", __assign({ width: "43", height: "33", viewBox: "0 0 43 33", fill: "none", stroke: "#22394E", xmlns: "http://www.w3.org/2000/svg" }, props, { children: _jsx("path", { d: "M5.38112 10.4486V29.2438C5.38112 30.3073 6.24322 31.1694 7.30669 31.1694H21.3431M36.7729 9.82071V10.4486V29.2438C36.7729 30.3073 35.9108 31.1694 34.8474 31.1694H21.3431M36.7729 9.82071H38.6544C40.0334 9.82071 40.9654 8.41366 40.4274 7.14395L38.8667 3.46026C38.5651 2.74835 37.8669 2.28588 37.0937 2.28588H21.3431M36.7729 9.82071H25.8109C25.0377 9.82071 24.3395 9.35825 24.0379 8.64633L21.3431 2.28588M21.3431 2.28588L4.70988 2.28588C3.848 2.28588 3.09109 2.85861 2.85681 3.68804L1.81633 7.37174C1.46925 8.60055 2.39251 9.82071 3.6694 9.82071H16.8752C17.6484 9.82071 18.3466 9.35825 18.6482 8.64633L21.3431 2.28588ZM21.3431 2.28588V17.3555M21.3431 22.3788V31.1694M9.63763 26.1462H13.8941M9.63763 21.1229H16.2884", strokeWidth: "2.88835" }) }))); };

package/Elements/Icon/icons/Complaint.js

@@ -10,4 +10,4 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export var Complaint = function (props) { return (_jsxs("svg", __assign({ width: "22", height: "22", viewBox: "0 0 22 22", fill: "none" }, props, { children: [_jsxs("g", { clipPath: "url(#clip0_7_1621)", children: [_jsx("path", { d: "M19.2501 17.4667C19.2501 18.9578 18.0413 20.1667 16.5501 20.1667H6.36675C4.87558 20.1667 3.66675 18.9578 3.66675 17.4667V4.53333C3.66675 3.04216 4.87558 1.83333 6.36675 1.83333H12.7404C13.3915 1.83333 14.0207 2.06863 14.512 2.49589L18.3218 5.8087C18.9115 6.3215 19.2501 7.06465 19.2501 7.84614V17.4667Z", stroke: "#A3B3C1", strokeWidth: "1.35", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M13.2917 2.29166V6.89166C13.2917 7.38871 13.6947 7.79166 14.1917 7.79166H18.7917", stroke: "#A3B3C1", strokeWidth: "1.35", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M6.41675 9.16666H10.0834", stroke: "#A3B3C1", strokeWidth: "1.35", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M6.41675 11.9167H16.5001", stroke: "#A3B3C1", strokeWidth: "1.35", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M6.41675 14.6667H16.5001", stroke: "#A3B3C1", strokeWidth: "1.35", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_7_1621", children: _jsx("rect", { width: "22", height: "22", fill: "white" }) }) })] }))); };
+export var Complaint = function (props) { return (_jsxs("svg", __assign({ width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", stroke: "#A3B3C1" }, props, { children: [_jsxs("g", { clipPath: "url(#clip0_7_1621)", children: [_jsx("path", { d: "M19.2501 17.4667C19.2501 18.9578 18.0413 20.1667 16.5501 20.1667H6.36675C4.87558 20.1667 3.66675 18.9578 3.66675 17.4667V4.53333C3.66675 3.04216 4.87558 1.83333 6.36675 1.83333H12.7404C13.3915 1.83333 14.0207 2.06863 14.512 2.49589L18.3218 5.8087C18.9115 6.3215 19.2501 7.06465 19.2501 7.84614V17.4667Z", strokeWidth: "1.35", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M13.2917 2.29166V6.89166C13.2917 7.38871 13.6947 7.79166 14.1917 7.79166H18.7917", strokeWidth: "1.35", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M6.41675 9.16666H10.0834", strokeWidth: "1.35", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M6.41675 11.9167H16.5001", strokeWidth: "1.35", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M6.41675 14.6667H16.5001", strokeWidth: "1.35", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_7_1621", children: _jsx("rect", { width: "22", height: "22", fill: "white" }) }) })] }))); };

package/Elements/Icon/icons/Expeditions.js

@@ -10,4 +10,4 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export var Expeditions = function (props) { return (_jsxs("svg", __assign({ width: "22", height: "22", viewBox: "0 0 22 22", fill: "none" }, props, { children: [_jsx("path", { d: "M11.1603 15.0024C11.1603 16.1027 10.2683 16.9946 9.16807 16.9946C8.0678 16.9946 7.17585 16.1027 7.17585 15.0024C7.17585 13.9021 8.0678 13.0102 9.16807 13.0102C10.2683 13.0102 11.1603 13.9021 11.1603 15.0024Z", stroke: "#A3B3C1", strokeWidth: "1.35" }), _jsx("path", { d: "M18.4952 15.0024C18.4952 16.1027 17.6033 16.9946 16.503 16.9946C15.4028 16.9946 14.5108 16.1027 14.5108 15.0024C14.5108 13.9021 15.4028 13.0102 16.503 13.0102C17.6033 13.0102 18.4952 13.9021 18.4952 15.0024Z", stroke: "#A3B3C1", strokeWidth: "1.35" }), _jsx("line", { x1: "10.9655", y1: "14.0546", x2: "14.2389", y2: "14.0546", stroke: "#A3B3C1", strokeWidth: "1.35" }), _jsx("path", { d: "M4.41858 13.5637C4.04579 13.5637 3.74358 13.8659 3.74358 14.2387C3.74358 14.6115 4.04579 14.9137 4.41858 14.9137L4.41858 13.5637ZM4.41858 14.9137L7.0373 14.9137L7.0373 13.5637L4.41858 13.5637L4.41858 14.9137Z", fill: "#A3B3C1", strokeWidth: "0" }), _jsx("line", { x1: "18.1671", y1: "14.0546", x2: "20.7858", y2: "14.0546", stroke: "#A3B3C1", strokeWidth: "1.35" }), _jsx("path", { d: "M5.83411 2.99166C5.46131 2.99166 5.15911 3.29386 5.15911 3.66666C5.15911 4.03945 5.46131 4.34166 5.83411 4.34166V2.99166ZM17.6841 5.36216L17.0804 5.66403L17.6841 5.36216ZM20.6937 10.4888L21.2208 10.0671L20.6937 10.4888ZM21.5122 15.0023V10.8978H20.1622V15.0023H21.5122ZM21.2208 10.0671L20.0307 8.57942L18.9765 9.42276L20.1667 10.9104L21.2208 10.0671ZM20.1073 8.69922L18.2879 5.06029L17.0804 5.66403L18.8999 9.30296L20.1073 8.69922ZM17.0986 4.32527H13.8358V5.67526H17.0986V4.32527ZM14.5108 5.00027V4.32134H13.1608V5.00027H14.5108ZM13.1811 2.99166H5.83411V4.34166H13.1811V2.99166ZM13.1608 5.00027V8.34641H14.5108V5.00027H13.1608ZM14.4904 9.67609H19.5036V8.32609H14.4904V9.67609ZM13.1608 8.34641C13.1608 9.08077 13.7561 9.67609 14.4904 9.67609V8.32609C14.492 8.32609 14.4952 8.32654 14.4986 8.32796C14.5015 8.3292 14.5035 8.33069 14.5048 8.33204C14.5062 8.33339 14.5076 8.33537 14.5089 8.33829C14.5103 8.34166 14.5108 8.34485 14.5108 8.34641H13.1608ZM14.5108 4.32134C14.5108 3.58698 13.9154 2.99166 13.1811 2.99166V4.34166C13.1795 4.34166 13.1763 4.34121 13.173 4.33978C13.17 4.33855 13.1681 4.33705 13.1667 4.33571C13.1654 4.33436 13.1639 4.33237 13.1626 4.32945C13.1612 4.32608 13.1608 4.3229 13.1608 4.32134H14.5108ZM18.2879 5.06029C18.0626 4.60982 17.6022 4.32527 17.0986 4.32527V5.67526C17.0909 5.67526 17.0838 5.67092 17.0804 5.66403L18.2879 5.06029ZM21.5122 10.8978C21.5122 10.5958 21.4094 10.3029 21.2208 10.0671L20.1667 10.9104C20.1638 10.9068 20.1622 10.9024 20.1622 10.8978H21.5122Z", fill: "#A3B3C1", strokeWidth: "0" }), _jsx("path", { d: "M9.16811 5.66718H3.16687", stroke: "#A3B3C1", strokeWidth: "1.35", strokeLinecap: "round" }), _jsx("path", { d: "M7.83461 8.33435H1.83337", stroke: "#A3B3C1", strokeWidth: "1.35", strokeLinecap: "round" }), _jsx("path", { d: "M8.50148 11.0016H2.50024", stroke: "#A3B3C1", strokeWidth: "1.35", strokeLinecap: "round" })] }))); };
+export var Expeditions = function (props) { return (_jsxs("svg", __assign({ width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", stroke: "#A3B3C1" }, props, { children: [_jsx("path", { d: "M11.1603 15.0024C11.1603 16.1027 10.2683 16.9946 9.16807 16.9946C8.0678 16.9946 7.17585 16.1027 7.17585 15.0024C7.17585 13.9021 8.0678 13.0102 9.16807 13.0102C10.2683 13.0102 11.1603 13.9021 11.1603 15.0024Z", strokeWidth: "1.35" }), _jsx("path", { d: "M18.4952 15.0024C18.4952 16.1027 17.6033 16.9946 16.503 16.9946C15.4028 16.9946 14.5108 16.1027 14.5108 15.0024C14.5108 13.9021 15.4028 13.0102 16.503 13.0102C17.6033 13.0102 18.4952 13.9021 18.4952 15.0024Z", strokeWidth: "1.35" }), _jsx("line", { x1: "10.9655", y1: "14.0546", x2: "14.2389", y2: "14.0546", strokeWidth: "1.35" }), _jsx("path", { d: "M4.41858 13.5637C4.04579 13.5637 3.74358 13.8659 3.74358 14.2387C3.74358 14.6115 4.04579 14.9137 4.41858 14.9137L4.41858 13.5637ZM4.41858 14.9137L7.0373 14.9137L7.0373 13.5637L4.41858 13.5637L4.41858 14.9137Z", fill: "#A3B3C1", strokeWidth: "0" }), _jsx("line", { x1: "18.1671", y1: "14.0546", x2: "20.7858", y2: "14.0546", strokeWidth: "1.35" }), _jsx("path", { d: "M5.83411 2.99166C5.46131 2.99166 5.15911 3.29386 5.15911 3.66666C5.15911 4.03945 5.46131 4.34166 5.83411 4.34166V2.99166ZM17.6841 5.36216L17.0804 5.66403L17.6841 5.36216ZM20.6937 10.4888L21.2208 10.0671L20.6937 10.4888ZM21.5122 15.0023V10.8978H20.1622V15.0023H21.5122ZM21.2208 10.0671L20.0307 8.57942L18.9765 9.42276L20.1667 10.9104L21.2208 10.0671ZM20.1073 8.69922L18.2879 5.06029L17.0804 5.66403L18.8999 9.30296L20.1073 8.69922ZM17.0986 4.32527H13.8358V5.67526H17.0986V4.32527ZM14.5108 5.00027V4.32134H13.1608V5.00027H14.5108ZM13.1811 2.99166H5.83411V4.34166H13.1811V2.99166ZM13.1608 5.00027V8.34641H14.5108V5.00027H13.1608ZM14.4904 9.67609H19.5036V8.32609H14.4904V9.67609ZM13.1608 8.34641C13.1608 9.08077 13.7561 9.67609 14.4904 9.67609V8.32609C14.492 8.32609 14.4952 8.32654 14.4986 8.32796C14.5015 8.3292 14.5035 8.33069 14.5048 8.33204C14.5062 8.33339 14.5076 8.33537 14.5089 8.33829C14.5103 8.34166 14.5108 8.34485 14.5108 8.34641H13.1608ZM14.5108 4.32134C14.5108 3.58698 13.9154 2.99166 13.1811 2.99166V4.34166C13.1795 4.34166 13.1763 4.34121 13.173 4.33978C13.17 4.33855 13.1681 4.33705 13.1667 4.33571C13.1654 4.33436 13.1639 4.33237 13.1626 4.32945C13.1612 4.32608 13.1608 4.3229 13.1608 4.32134H14.5108ZM18.2879 5.06029C18.0626 4.60982 17.6022 4.32527 17.0986 4.32527V5.67526C17.0909 5.67526 17.0838 5.67092 17.0804 5.66403L18.2879 5.06029ZM21.5122 10.8978C21.5122 10.5958 21.4094 10.3029 21.2208 10.0671L20.1667 10.9104C20.1638 10.9068 20.1622 10.9024 20.1622 10.8978H21.5122Z", fill: "#A3B3C1", strokeWidth: "0" }), _jsx("path", { d: "M9.16811 5.66718H3.16687", strokeWidth: "1.35", strokeLinecap: "round" }), _jsx("path", { d: "M7.83461 8.33435H1.83337", strokeWidth: "1.35", strokeLinecap: "round" }), _jsx("path", { d: "M8.50148 11.0016H2.50024", strokeWidth: "1.35", strokeLinecap: "round" })] }))); };

package/Elements/Icon/icons/FlagCZ.js

@@ -10,4 +10,4 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export var FlagCZ = function (props) { return (_jsxs("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", id: "flag-icons-cz", viewBox: "0 0 640 480", height: "1em", width: "1em" }, props, { children: [_jsx("path", { fill: "#fff", d: "M0 0h640v240H0z" }), _jsx("path", { fill: "#d7141a", d: "M0 240h640v240H0z" }), _jsx("path", { fill: "#11457e", d: "M360 240 0 0v480z" })] }))); };
+export var FlagCZ = function (props) { return (_jsxs("svg", __assign({ width: "28", height: "20", viewBox: "0 0 28 20", fill: "none" }, props, { children: [_jsx("rect", { x: "0.25", y: "0.25", width: "27.5", height: "19.5", rx: "1.75", fill: "white", stroke: "#F5F5F5", strokeWidth: "0.5" }), _jsx("mask", { id: "mask0_48_769", maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "28", height: "20", children: _jsx("rect", { x: "0.25", y: "0.25", width: "27.5", height: "19.5", rx: "1.75", fill: "white", stroke: "white", strokeWidth: "0.5" }) }), _jsxs("g", { mask: "url(#mask0_48_769)", children: [_jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0 20H28V10H0V20Z", fill: "#E8252A" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0 0L13.3333 10L0 20V0Z", fill: "#17579E" })] })] }))); };

package/Elements/Icon/icons/FlagEL.d.ts

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

package/Elements/Icon/icons/FlagEL.js

@@ -0,0 +1,13 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export var FlagEL = function (props) { return (_jsxs("svg", __assign({ width: "28", height: "20", viewBox: "0 0 28 20", fill: "none" }, props, { children: [_jsx("rect", { x: "0.25", y: "0.25", width: "27.5", height: "19.5", rx: "1.75", fill: "white", stroke: "#F5F5F5", strokeWidth: "0.5" }), _jsx("mask", { id: "mask0_48_990", maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "28", height: "20", children: _jsx("rect", { x: "0.25", y: "0.25", width: "27.5", height: "19.5", rx: "1.75", fill: "white", stroke: "white", strokeWidth: "0.5" }) }), _jsx("g", { mask: "url(#mask0_48_990)", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.33333 0H0V5.33333H5.33333V0ZM13.3333 0H8V5.33333H13.3333L13.3333 8H8V13.3333H13.3333H28V10.6667H13.3333V8H28V5.33333H13.3333L13.3333 2.66667H28V0H13.3333ZM28 16H0V18.6667H28V16ZM5.33333 8H0V13.3333H5.33333V8Z", fill: "#1C6DC1" }) })] }))); };

package/Elements/Icon/icons/FlagESP.d.ts

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