@mailstep/design-system 0.8.30 → 0.8.31-beta.2

package/ui/Blocks/ImageList/components/ImageTag/index.d.ts

@@ -1,4 +1,5 @@
-import { type FC } from 'react';
+import { FC } from 'react';
+
 interface ImageTagProps {
     label?: string;
 }

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

@@ -1,15 +1,9 @@
-import Tag_default from "../../../../Elements/Tag/index.js";
-import { Container } from "./styles.js";
-import { jsx } from "react/jsx-runtime";
-//#region packages/ui/Blocks/ImageList/components/ImageTag/index.tsx
-const ImageTag = ({ label }) => {
-	if (!label) return null;
-	return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(Tag_default, {
-		size: "small",
-		color: "darkGreen",
-		textColor: "white",
-		children: /* @__PURE__ */ jsx("b", { children: label })
-	}) });
+import { jsx as _jsx } from "react/jsx-runtime";
+import Tag from '../../../../Elements/Tag';
+import { Container } from './styles';
+export var ImageTag = function (_a) {
+    var label = _a.label;
+    if (!label)
+        return null;
+    return (_jsx(Container, { children: _jsx(Tag, { size: "small", color: "darkGreen", textColor: "white", children: _jsx("b", { children: label }) }) }));
 };
-//#endregion
-export { ImageTag };

package/ui/Blocks/ImageList/components/ImageTag/styles.d.ts

@@ -1 +1 @@
-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, {}, never>;

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

@@ -1,9 +1,7 @@
-import styled$1 from "@xstyled/styled-components";
-//#region packages/ui/Blocks/ImageList/components/ImageTag/styles.ts
-const Container = styled$1.div`
-  position: absolute;
-  bottom: 2px;
-  left: 2px;
-`;
-//#endregion
-export { Container };
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from '@xstyled/styled-components';
+export var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 2px;\n  left: 2px;\n"], ["\n  position: absolute;\n  bottom: 2px;\n  left: 2px;\n"])));
+var templateObject_1;

package/ui/Blocks/ImageList/hooks/useControls.js

@@ -1,14 +1,15 @@
-import { useCallback, useState } from "react";
-//#region packages/ui/Blocks/ImageList/hooks/useControls.ts
-const useControls = ({ max, total = 0 }) => {
-	const [position, setPosition] = useState(0);
-	return {
-		moveList: useCallback((direction) => () => {
-			if (max) setPosition((position) => Math.min(Math.max(position + direction, 0), total - max));
-		}, [total]),
-		position,
-		hasControls: !!max && total > max
-	};
+import { useState, useCallback } from 'react';
+export var useControls = function (_a) {
+    var max = _a.max, _b = _a.total, total = _b === void 0 ? 0 : _b;
+    var _c = useState(0), position = _c[0], setPosition = _c[1];
+    var moveList = useCallback(function (direction) { return function () {
+        if (max) {
+            setPosition(function (position) { return Math.min(Math.max(position + direction, 0), total - max); });
+        }
+    }; }, [total]);
+    return {
+        moveList: moveList,
+        position: position,
+        hasControls: !!max && total > max
+    };
 };
-//#endregion
-export { useControls };

package/ui/Blocks/ImageList/hooks/useOnElementClick.d.ts

@@ -1,4 +1,5 @@
-import { type ImageData } from '../../LightBox';
+import { ImageData } from '../../LightBox';
+
 type Props = {
     onImageClick?: (item: ImageData) => void;
     onOpenLightBox: (index: number) => () => void;

package/ui/Blocks/ImageList/hooks/useOnElementClick.js

@@ -1,15 +1,20 @@
-import { useCallback, useState } from "react";
-//#region packages/ui/Blocks/ImageList/hooks/useOnElementClick.ts
-const useOnElementClick = ({ onImageClick, onOpenLightBox, selectable }) => {
-	const [selected, setSelected] = useState(-1);
-	return {
-		handleOnClick: useCallback((item, index) => () => {
-			if (onImageClick) onImageClick(item);
-			else onOpenLightBox(index)();
-			if (selectable) setSelected((selected) => selected !== index ? index : -1);
-		}, [onImageClick, onOpenLightBox]),
-		selected
-	};
+import { useCallback, useState } from 'react';
+export var useOnElementClick = function (_a) {
+    var onImageClick = _a.onImageClick, onOpenLightBox = _a.onOpenLightBox, selectable = _a.selectable;
+    var _b = useState(-1), selected = _b[0], setSelected = _b[1];
+    var handleOnClick = useCallback(function (item, index) { return function () {
+        if (onImageClick) {
+            onImageClick(item);
+        }
+        else {
+            onOpenLightBox(index)();
+        }
+        if (selectable) {
+            setSelected(function (selected) { return selected !== index ? index : -1; });
+        }
+    }; }, [onImageClick, onOpenLightBox]);
+    return {
+        handleOnClick: handleOnClick,
+        selected: selected
+    };
 };
-//#endregion
-export { useOnElementClick };

package/ui/Blocks/ImageList/index.d.ts

@@ -1,5 +1,6 @@
 import { ImageList } from './ImageList';
-import { type ImageData } from '../LightBox';
+import { ImageData } from '../LightBox';
+
 export { type ImageUploadProps } from './types';
 export { type ImageData };
 export default ImageList;

package/ui/Blocks/ImageList/index.js

@@ -1,5 +1,2 @@
-import { ImageList } from "./ImageList.js";
-//#region packages/ui/Blocks/ImageList/index.ts
-var ImageList_default = ImageList;
-//#endregion
-export { ImageList_default as default };
+import { ImageList } from './ImageList';
+export default ImageList;

package/ui/Blocks/ImageList/stories/ImageList.stories.d.ts

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

package/ui/Blocks/ImageList/stories/ImageList.stories.js

@@ -0,0 +1,63 @@
+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 { ImageList } from '../ImageList';
+var meta = {
+    title: 'Blocks/ImageList',
+    component: ImageList,
+    tags: ['autodocs'],
+    argTypes: {},
+};
+export default meta;
+var images = [
+    { id: '1', smallUrl: 'https://picsum.photos/200/300', url: 'https://picsum.photos/200/300' },
+    { id: '2', smallUrl: 'https://picsum.photos/200/400', url: 'https://picsum.photos/200/400' },
+    { id: '3', smallUrl: 'https://picsum.photos/200/500', url: 'https://picsum.photos/200/500' },
+    { id: '4', smallUrl: 'https://picsum.photos/200/700', url: 'https://picsum.photos/200/700' },
+    { id: '5', smallUrl: 'https://picsum.photos/200/800', url: 'https://picsum.photos/200/800' },
+    { id: '6', smallUrl: 'https://picsum.photos/100/300', url: 'https://picsum.photos/100/300' },
+    { id: '7', smallUrl: 'https://picsum.photos/100/400', url: 'https://picsum.photos/100/400' },
+    { id: '8', smallUrl: 'https://picsum.photos/100/500', url: 'https://picsum.photos/100/500' },
+];
+export var ImageListDefault = {
+    args: {
+        images: images,
+        isDisabled: false,
+        onImageRemove: function (id) { return function () { return null; }; }
+    },
+};
+export var ImageListDisabled = {
+    args: {
+        images: images,
+        isDisabled: true,
+    },
+};
+export var ImageListWithItemDescription = {
+    args: {
+        images: images.map(function (img) { return (__assign(__assign({}, img), { label: 'Lorem Ipsum', date: '24.12.2024', description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur explicabo harum' })); }),
+    },
+};
+export var ImageListSelectable = {
+    args: {
+        images: images,
+        selectable: true,
+    },
+};
+export var ImageListLimited = {
+    args: {
+        images: [
+            { id: '1', smallUrl: 'https://picsum.photos/200/300', url: 'https://picsum.photos/200/300' },
+            { id: '2', smallUrl: 'https://picsum.photos/200/400', url: 'https://picsum.photos/200/400' },
+        ],
+        selectable: true,
+        max: 1,
+    },
+};

package/ui/Blocks/ImageList/styles.d.ts

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

package/ui/Blocks/ImageList/styles.js

@@ -1,29 +1,20 @@
-import styled$1 from "@xstyled/styled-components";
-//#region packages/ui/Blocks/ImageList/styles.ts
-const ImageListContainer = styled$1.div`
-  display: flex;
-  overflow-x: scroll;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  position: relative;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-`;
-const Control = styled$1.div`
-  width: 24px;
-  margin-right: ${({ isLeft }) => isLeft ? "15px" : 0};
-  margin-top: ${({ hasRemove }) => hasRemove ? "15px" : 0};
-  cursor: pointer;
-  display: flex;
-  transition: all 0.4s;
-
-  color: ${({ isDisabled }) => isDisabled ? "gray" : "black"};
-
-  &:hover {
-    color: ${({ isDisabled }) => isDisabled ? "gray" : "red1"};
-  }
-`;
-//#endregion
-export { Control, ImageListContainer };
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from '@xstyled/styled-components';
+export var ImageListContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  overflow-x: scroll;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  position: relative;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"], ["\n  display: flex;\n  overflow-x: scroll;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  position: relative;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n"])));
+export var Control = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 24px;\n  margin-right: ", ";\n  margin-top: ", ";\n  cursor: pointer;\n  display: flex;\n  transition: all 0.4s;\n\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"], ["\n  width: 24px;\n  margin-right: ", ";\n  margin-top: ", ";\n  cursor: pointer;\n  display: flex;\n  transition: all 0.4s;\n\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"])), function (_a) {
+    var isLeft = _a.isLeft;
+    return (isLeft ? '15px' : 0);
+}, function (_a) {
+    var hasRemove = _a.hasRemove;
+    return (hasRemove ? '15px' : 0);
+}, function (_a) {
+    var isDisabled = _a.isDisabled;
+    return (isDisabled ? 'gray' : 'black');
+}, function (_a) {
+    var isDisabled = _a.isDisabled;
+    return (isDisabled ? 'gray' : 'red1');
+});
+var templateObject_1, templateObject_2;

package/ui/Blocks/ImageList/types.d.ts

@@ -1,4 +1,5 @@
-import { type ImageData } from '../LightBox';
+import { ImageData } from '../LightBox';
+
 export interface ImageUploadProps {
     base64image?: string;
     base64WithDataDeclaration?: string;

package/ui/Blocks/LanguageSwitch/LanguageSwitch.d.ts

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

package/ui/Blocks/LanguageSwitch/LanguageSwitch.js

@@ -1,53 +1,40 @@
-import Icon from "../../Elements/Icon/Icon.js";
-import { DropdownMenu } from "../../Elements/DropdownMenu/DropdownMenu.js";
-import "../../Elements/DropdownMenu/index.js";
-import Popover from "../Popover/index.js";
-import { LanguageFlagWrap, LanguageSwitchWrap, StyledFlag } from "./styles.js";
-import { useCallback, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region packages/ui/Blocks/LanguageSwitch/LanguageSwitch.tsx
-const placementMap = {
-	left: "bottom-start",
-	right: "bottom-end"
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef, useState } from 'react';
+import DropdownMenu from '../../Elements/DropdownMenu';
+import Icon from '../../Elements/Icon/Icon';
+import Popover from '../Popover';
+import { StyledFlag, LanguageFlagWrap, LanguageSwitchWrap } from './styles';
+var placementMap = {
+    left: 'bottom-start',
+    right: 'bottom-end'
 };
-const LanguageSwitch = ({ activeLanguage, onLanguageChange, languageItems, placement = "right", withTitle, languageFlagWrapBackgroundColor }) => {
-	const [flagDropdownVisible, setFlagDropdownVisible] = useState(false);
-	const flagWrapRef = useRef(null);
-	const onClose = useCallback(() => {
-		setFlagDropdownVisible(false);
-	}, []);
-	const handleFlagClick = useCallback(() => {
-		setFlagDropdownVisible(!flagDropdownVisible);
-	}, [flagDropdownVisible]);
-	const languageToggle = useCallback((languageCode) => () => {
-		onLanguageChange?.(languageCode);
-	}, [onLanguageChange]);
-	const activeLanguageObj = useMemo(() => languageItems?.find((language) => language.languageCode === activeLanguage), [activeLanguage, languageItems]);
-	const filteredLanguages = useMemo(() => languageItems?.filter((language) => language.languageCode !== activeLanguage), [languageItems, activeLanguage]);
-	const formattedLanguages = useMemo(() => filteredLanguages?.map(({ title, icon, languageCode }) => ({
-		title,
-		icon,
-		onClick: languageToggle(languageCode)
-	})), [filteredLanguages, languageToggle]);
-	if (!activeLanguageObj || !languageItems) return null;
-	return /* @__PURE__ */ jsxs(LanguageSwitchWrap, { children: [/* @__PURE__ */ jsxs(LanguageFlagWrap, {
-		ref: flagWrapRef,
-		onClick: handleFlagClick,
-		backgroundColor: languageFlagWrapBackgroundColor,
-		withTitle,
-		children: [/* @__PURE__ */ jsxs(StyledFlag, { children: [activeLanguageObj.icon, withTitle && activeLanguageObj.title] }), /* @__PURE__ */ jsx(Icon, {
-			icon: "chevronDown",
-			size: "10px"
-		})]
-	}), flagDropdownVisible && /* @__PURE__ */ jsx(Popover, {
-		parentRef: flagWrapRef,
-		onClose,
-		placement: placementMap[placement],
-		children: /* @__PURE__ */ jsx(DropdownMenu, {
-			showMenu: true,
-			items: formattedLanguages
-		})
-	})] });
+var LanguageSwitch = function (_a) {
+    var activeLanguage = _a.activeLanguage, onLanguageChange = _a.onLanguageChange, languageItems = _a.languageItems, _b = _a.placement, placement = _b === void 0 ? 'right' : _b, withTitle = _a.withTitle, languageFlagWrapBackgroundColor = _a.languageFlagWrapBackgroundColor;
+    var _c = useState(false), flagDropdownVisible = _c[0], setFlagDropdownVisible = _c[1];
+    var flagWrapRef = useRef(null);
+    var onClose = useCallback(function () {
+        setFlagDropdownVisible(false);
+    }, []);
+    var handleFlagClick = useCallback(function () {
+        setFlagDropdownVisible(!flagDropdownVisible);
+    }, [flagDropdownVisible]);
+    var languageToggle = useCallback(function (languageCode) { return function () {
+        onLanguageChange === null || onLanguageChange === void 0 ? void 0 : onLanguageChange(languageCode);
+    }; }, [onLanguageChange]);
+    var activeLanguageObj = useMemo(function () { return languageItems === null || languageItems === void 0 ? void 0 : languageItems.find(function (language) { return language.languageCode === activeLanguage; }); }, [activeLanguage, languageItems]);
+    var filteredLanguages = useMemo(function () { return languageItems === null || languageItems === void 0 ? void 0 : languageItems.filter(function (language) { return language.languageCode !== activeLanguage; }); }, [languageItems, activeLanguage]);
+    var formattedLanguages = useMemo(function () {
+        return filteredLanguages === null || filteredLanguages === void 0 ? void 0 : filteredLanguages.map(function (_a) {
+            var title = _a.title, icon = _a.icon, languageCode = _a.languageCode;
+            return ({
+                title: title,
+                icon: icon,
+                onClick: languageToggle(languageCode)
+            });
+        });
+    }, [filteredLanguages, languageToggle]);
+    if (!activeLanguageObj || !languageItems)
+        return null;
+    return (_jsxs(LanguageSwitchWrap, { children: [_jsxs(LanguageFlagWrap, { ref: flagWrapRef, onClick: handleFlagClick, backgroundColor: languageFlagWrapBackgroundColor, withTitle: withTitle, children: [_jsxs(StyledFlag, { children: [activeLanguageObj.icon, withTitle && activeLanguageObj.title] }), _jsx(Icon, { icon: "chevronDown", size: "10px" })] }), flagDropdownVisible && (_jsx(Popover, { parentRef: flagWrapRef, onClose: onClose, placement: placementMap[placement], children: _jsx(DropdownMenu, { showMenu: true, items: formattedLanguages }) }))] }));
 };
-//#endregion
-export { LanguageSwitch as default };
+export default LanguageSwitch;

package/ui/Blocks/LanguageSwitch/index.d.ts

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

package/ui/Blocks/LanguageSwitch/index.js

@@ -1,5 +1,2 @@
-import LanguageSwitch from "./LanguageSwitch.js";
-//#region packages/ui/Blocks/LanguageSwitch/index.ts
-var LanguageSwitch_default = LanguageSwitch;
-//#endregion
-export { LanguageSwitch_default as default };
+import LanguageSwitch from './LanguageSwitch';
+export default LanguageSwitch;

package/ui/Blocks/LanguageSwitch/stories/LanguageSwith.stories.d.ts

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

package/ui/Blocks/LanguageSwitch/stories/LanguageSwith.stories.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import LanguageSwitch from '../';
+import { FlagCZ, FlagUSA } from '../../../Elements/Icon';
+var languageItems = [
+    {
+        languageCode: 'cs',
+        icon: _jsx(FlagCZ, {}),
+        title: 'Česky'
+    },
+    {
+        languageCode: 'en',
+        icon: _jsx(FlagUSA, {}),
+        title: 'English'
+    }
+];
+var meta = {
+    title: 'Blocks/LanguageSwitch',
+    component: LanguageSwitch,
+    tags: ['autodocs'],
+    argTypes: {}
+};
+export default meta;
+export var Default = {
+    args: {
+        languageItems: languageItems,
+        activeLanguage: 'en',
+        onLanguageChange: function (languageCode) {
+            console.log('Language changed:', languageCode);
+        }
+    }
+};

package/ui/Blocks/LanguageSwitch/styles.d.ts

@@ -1,6 +1,6 @@
-export declare const StyledFlag: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const LanguageSwitchWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
-export declare const LanguageFlagWrap: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
-    backgroundColor?: string;
-    withTitle?: boolean;
+export declare const StyledFlag: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const LanguageSwitchWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const LanguageFlagWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+    backgroundColor?: string | undefined;
+    withTitle?: boolean | undefined;
 }, never>;

package/ui/Blocks/LanguageSwitch/styles.js

@@ -1,32 +1,15 @@
-import styled$1 from "@xstyled/styled-components";
-//#region packages/ui/Blocks/LanguageSwitch/styles.ts
-const StyledFlag = styled$1.div`
-  cursor: pointer;
-  font-size: 16px;
-  display: flex;
-  gap: 6px;
-  align-items: center;
-`;
-const LanguageSwitchWrap = styled$1.div`
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: fit-content;
-`;
-const LanguageFlagWrap = styled$1.div`
-  cursor: pointer;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: ${({ withTitle }) => withTitle ? "16px" : "8px"};
-  padding: 6px;
-  border-radius: 10px;
-  background: ${({ backgroundColor }) => backgroundColor || "white"};
-
-  @media (min-width: 768px) {
-    padding: 7px 12px;
-  }
-`;
-//#endregion
-export { LanguageFlagWrap, LanguageSwitchWrap, StyledFlag };
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from '@xstyled/styled-components';
+export var StyledFlag = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  cursor: pointer;\n  font-size: 16px;\n  display: flex;\n  gap: 6px;\n  align-items: center;\n"], ["\n  cursor: pointer;\n  font-size: 16px;\n  display: flex;\n  gap: 6px;\n  align-items: center;\n"])));
+export var LanguageSwitchWrap = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n"])));
+export var LanguageFlagWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  padding: 6px;\n  border-radius: 10px;\n  background: ", ";\n\n  @media (min-width: 768px) {\n    padding: 7px 12px;\n  }\n"], ["\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ", ";\n  padding: 6px;\n  border-radius: 10px;\n  background: ", ";\n\n  @media (min-width: 768px) {\n    padding: 7px 12px;\n  }\n"])), function (_a) {
+    var withTitle = _a.withTitle;
+    return (withTitle ? '16px' : '8px');
+}, function (_a) {
+    var backgroundColor = _a.backgroundColor;
+    return backgroundColor || 'white';
+});
+var templateObject_1, templateObject_2, templateObject_3;

package/ui/Blocks/LanguageSwitch/types.d.ts

@@ -1,4 +1,5 @@
 import { ReactElement } from 'react';
+
 export type LanguageItem = {
     languageCode: string;
     icon: ReactElement;

package/ui/Blocks/LightBox/LightBox.d.ts

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

package/ui/Blocks/LightBox/LightBox.js

@@ -1,41 +1,14 @@
-import Button from "../../Elements/Button/Button.js";
-import "../../Elements/Button/index.js";
-import Modal_default from "../Modal/index.js";
-import { ButtonContainer, Container, Description, Image } from "./styles.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Swiper, SwiperSlide } from "swiper/react";
-//#region packages/ui/Blocks/LightBox/LightBox.tsx
-const LightBox = ({ isLightBoxOpen, onCloseLightBox, lightBoxAction, lightBoxActionTitle, images, initialSlide = 0 }) => {
-	if (!images?.length) return null;
-	return /* @__PURE__ */ jsx(Modal_default, {
-		isShown: isLightBoxOpen,
-		onClose: onCloseLightBox,
-		variant: "mobileFullscreen",
-		top: "10px",
-		children: /* @__PURE__ */ jsx(Swiper, {
-			initialSlide,
-			slidesPerView: 1,
-			autoHeight: true,
-			children: images.map((item) => /* @__PURE__ */ jsx(SwiperSlide, { children: /* @__PURE__ */ jsxs(Container, { children: [
-				/* @__PURE__ */ jsx(Image, {
-					src: item.originalUrl ?? item.url,
-					loading: "lazy",
-					alt: ""
-				}),
-				(item.date || item.description) && /* @__PURE__ */ jsxs(Description, { children: [
-					item.date,
-					" ",
-					item.description
-				] }),
-				!!item.withLightBoxAction && lightBoxAction && lightBoxActionTitle && /* @__PURE__ */ jsx(ButtonContainer, { children: /* @__PURE__ */ jsx(Button, {
-					onClick: lightBoxAction(item.id),
-					appearance: "primary",
-					variant: "default",
-					children: lightBoxActionTitle
-				}) })
-			] }) }, item.id))
-		})
-	});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../Elements/Button';
+import Modal from '../Modal';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Container, Image, ButtonContainer, Description } from './styles';
+export var LightBox = function (_a) {
+    var isLightBoxOpen = _a.isLightBoxOpen, onCloseLightBox = _a.onCloseLightBox, lightBoxAction = _a.lightBoxAction, lightBoxActionTitle = _a.lightBoxActionTitle, images = _a.images, _b = _a.initialSlide, initialSlide = _b === void 0 ? 0 : _b;
+    if (!(images === null || images === void 0 ? void 0 : images.length))
+        return null;
+    return (_jsx(Modal, { isShown: isLightBoxOpen, onClose: onCloseLightBox, variant: "mobileFullscreen", top: "10px", children: _jsx(Swiper, { initialSlide: initialSlide, slidesPerView: 1, autoHeight: true, children: images.map(function (item) {
+                var _a;
+                return (_jsx(SwiperSlide, { children: _jsxs(Container, { children: [_jsx(Image, { src: (_a = item.originalUrl) !== null && _a !== void 0 ? _a : item.url, loading: "lazy", alt: "" }), (item.date || item.description) && (_jsxs(Description, { children: [item.date, " ", item.description] })), !!item.withLightBoxAction && lightBoxAction && lightBoxActionTitle && (_jsx(ButtonContainer, { children: _jsx(Button, { onClick: lightBoxAction(item.id), appearance: "primary", variant: 'default', children: lightBoxActionTitle }) }))] }) }, item.id));
+            }) }) }));
 };
-//#endregion
-export { LightBox };

package/ui/Blocks/LightBox/hooks/useLightBox.d.ts

@@ -1,2 +1,3 @@
-import { type UseLightBoxHookType } from '../types';
+import { UseLightBoxHookType } from '../types';
+
 export declare const useLightBox: UseLightBoxHookType;