@antscorp/antsomi-ui 1.3.5-beta.13 → 1.3.5-beta.15

package/es/assets/svg/mobile-frame.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="416.004" height="713" viewBox="0 0 416.004 713">
+  <path id="mobile_frame" data-name="mobile frame" d="M17657,3124a32.975,32.975,0,0,1-33-33V2444a32.977,32.977,0,0,1,33-33H18004a32.97,32.97,0,0,1,33,33v122.032a3.5,3.5,0,0,1,3,3.464v110a3.5,3.5,0,0,1-3,3.469v31.07a3.5,3.5,0,0,1,3,3.464v44a3.5,3.5,0,0,1-3,3.464V3091a32.97,32.97,0,0,1-33,33Zm-22-681v618a21.022,21.022,0,0,0,21,21h349.008a21.022,21.022,0,0,0,21-21V2443a21.022,21.022,0,0,0-21-21H17656A21.022,21.022,0,0,0,17635,2443Z" transform="translate(-17623.998 -2411)" fill="black"/>
+</svg>

package/es/components/common/ConfigProvider/ConfigProvider.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 // Libraries
 import { StyleProvider } from '@ant-design/cssinjs';
-import { ConfigProvider as AntdConfigProvider } from 'antd';
+import { ConfigProvider as AntdConfigProvider, App } from 'antd';
 import dayjs from 'dayjs';
 import React, { useEffect } from 'react';
 import weekday from 'dayjs/plugin/weekday';
@@ -28,6 +28,8 @@ import '@antscorp/antsomi-ui/es/assets/css/main.scss';
 // import '@antscorp/antsomi-ui/es/locales/i18n';
 import i18next from '@antscorp/antsomi-ui/es/locales/i18n';
 import 'animate.css';
+// Providers
+import { QueryClientProviderAntsomiUI, queryClientAntsomiUI, } from '@antscorp/antsomi-ui/es/queries';
 // NOTE: HOT fix DatePicker Advanced
 dayjs.extend(weekday);
 dayjs.extend(localeData);
@@ -43,8 +45,10 @@ const ConfigProvider = props => {
         }
     }, [locale]);
     return (React.createElement(AntdConfigProvider, Object.assign({}, restOfProps),
-        React.createElement(GlobalStyle, null),
-        React.createElement(StyleProvider, { hashPriority: "high" }, children)));
+        React.createElement(App, null,
+            React.createElement(QueryClientProviderAntsomiUI, { client: queryClientAntsomiUI },
+                React.createElement(GlobalStyle, null),
+                React.createElement(StyleProvider, { hashPriority: "high" }, children)))));
 };
 ConfigProvider.defaultProps = {
     theme: THEME,

package/es/components/molecules/TemplateSaveAs/TemplateSaveAs.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import { ShareAccessProps } from '../ShareAccess/types';
+type categoriesProps = Array<{
+    label: string;
+    key: string | number;
+    children: Array<{
+        label: string;
+        key: string | number;
+    }>;
+}>;
+export interface TemplateValueOptions {
+    saveOption?: string;
+    templateName?: {
+        id?: string | number;
+        label?: string;
+    };
+    templateDesc?: string;
+    defaultThumbnail?: number;
+    categories?: categoriesProps;
+    accessInfo?: ShareAccessProps['accessInfo'];
+}
+export interface ImagePreviewOptions {
+    thumbnails: (string | undefined)[];
+    skeleton?: boolean;
+    previewNavigation?: boolean;
+    slidesPerView?: number;
+}
+export interface TemplateSaveAsProps {
+    className?: string;
+    shareAccess: Omit<{
+        show: boolean;
+    } & ShareAccessProps, 'accessInfo' | 'onChange'>;
+    imageReview: ImagePreviewOptions;
+    saveOptions?: {
+        saveNewText?: string;
+        saveExistText?: string;
+        saveNewValue?: string;
+        saveExistValue?: string;
+    };
+    /**
+     * Default thumbnail - order of default thumbnail in thumbnails array
+     */
+    categories?: categoriesProps;
+    templateNames: Array<{
+        label: string;
+        id: string | number;
+    }>;
+    value?: TemplateValueOptions;
+    onChange?: (value: Partial<TemplateValueOptions>) => void;
+}
+export declare const TemplateSaveAs: React.FC<TemplateSaveAsProps>;
+export {};

package/es/components/molecules/TemplateSaveAs/TemplateSaveAs.js

@@ -0,0 +1,144 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import React, { useState } from 'react';
+import { Dropdown } from 'antd';
+import dayjs from 'dayjs';
+// Components
+import { Button, Flex, Input, Typography, Select, ShareAccess, RadioGroup, Radio, } from '@antscorp/antsomi-ui/es/components';
+// Styles
+import { TemplateSaveAsStyled } from './styled';
+import { ImageSlider } from './components';
+const { Text } = Typography;
+export const TemplateSaveAs = props => {
+    const { className, shareAccess, saveOptions, imageReview, categories, templateNames, value, onChange, } = props;
+    const { show: isShowShareAccess } = shareAccess, shareAccessProps = __rest(shareAccess, ["show"]);
+    const { thumbnails, skeleton, previewNavigation, slidesPerView } = imageReview;
+    const { saveNewText = 'Save as a new media Template', saveExistText = 'Save as an existing media Template', saveNewValue = 'save-new', saveExistValue = 'save-exist', } = saveOptions || {};
+    const { saveOption = saveNewValue, templateName: defaultTemplateName, templateDesc: defaultTemplateDesc, defaultThumbnail = 0, categories: categoriesValue = [], accessInfo, } = value || {};
+    const [templateName, setTemplateName] = useState(`Untitled Media Template#${dayjs().format('YYYY-MM-DD HH:mm:ss')}`);
+    const [templateNameExist, setTemplateNameExist] = useState((defaultTemplateName === null || defaultTemplateName === void 0 ? void 0 : defaultTemplateName.id) ? defaultTemplateName : templateNames === null || templateNames === void 0 ? void 0 : templateNames[0]);
+    const handleChangeValue = (newValue) => {
+        if (onChange) {
+            onChange(Object.assign(Object.assign(Object.assign({}, value), newValue), { 
+                // TODO: return saveOption and templateName generate default value if not pass as value props
+                saveOption: !(value === null || value === void 0 ? void 0 : value.saveOption) && !newValue.saveOption
+                    ? saveOption
+                    : newValue.saveOption || (value === null || value === void 0 ? void 0 : value.saveOption), templateName: !defaultTemplateName && !newValue.templateName
+                    ? saveOption === saveNewValue
+                        ? { id: undefined, label: templateName }
+                        : templateNameExist
+                    : newValue.templateName || defaultTemplateName }));
+        }
+    };
+    const handleAddCategory = ({ parent, parentKey, item, }) => {
+        const currCategory = categoriesValue.find(category => category.label === parent);
+        if (currCategory) {
+            currCategory.children.push(item);
+            const newCategoryList = categoriesValue.filter(item => item.label !== currCategory.label);
+            const newCategory = [...newCategoryList, currCategory];
+            handleChangeValue({ categories: newCategory });
+        }
+        const newCategory = [...categoriesValue, { label: parent, key: parentKey, children: [item] }];
+        handleChangeValue({ categories: newCategory });
+    };
+    const handleRemoveCategory = ({ parent, item }) => {
+        const currCategory = categoriesValue.find(category => category.label === parent);
+        if (!currCategory)
+            return;
+        const newChildren = currCategory.children.filter(child => child.label !== item.label);
+        const newCategoryList = categoriesValue.filter(child => child.label !== currCategory.label);
+        handleChangeValue({
+            categories: [...newCategoryList, Object.assign(Object.assign({}, currCategory), { children: newChildren })],
+        });
+    };
+    return (React.createElement(TemplateSaveAsStyled, { className: className || '', vertical: true },
+        React.createElement(Flex, { className: "save-options-container" },
+            React.createElement(RadioGroup, { value: saveOption, onChange: e => handleChangeValue({
+                    saveOption: e.target.value,
+                    templateName: e.target.value === saveNewValue
+                        ? { id: undefined, label: templateName }
+                        : templateNameExist,
+                }) },
+                React.createElement(Radio, { value: saveNewValue }, saveNewText),
+                React.createElement(Radio, { value: saveExistValue }, saveExistText))),
+        React.createElement(Flex, null,
+            React.createElement(Flex, { vertical: true, gap: 20, className: "template-container" },
+                React.createElement(Flex, { className: "field-container" },
+                    React.createElement(Text, { className: "field-title field-title--middle" },
+                        "Template name ",
+                        React.createElement("span", null, " *")),
+                    saveOption === saveNewValue ? (React.createElement(Input, { debounce: 1000, className: "field-input", value: templateName, onAfterChange: value => {
+                            handleChangeValue({ templateName: { id: undefined, label: value } });
+                            setTemplateName(value);
+                        }, required: true })) : (React.createElement(Select, { className: "field-input", value: templateNameExist === null || templateNameExist === void 0 ? void 0 : templateNameExist.id, options: (templateNames === null || templateNames === void 0 ? void 0 : templateNames.length) > 0
+                            ? templateNames.map(item => ({ value: item.id, label: item.label }))
+                            : [], onChange: value => {
+                            var _a, _b;
+                            handleChangeValue({
+                                templateName: {
+                                    id: value,
+                                    label: ((_a = templateNames.find(item => item.id === value)) === null || _a === void 0 ? void 0 : _a.label) || '',
+                                },
+                            });
+                            setTemplateNameExist({
+                                id: value,
+                                label: ((_b = templateNames.find(item => item.id === value)) === null || _b === void 0 ? void 0 : _b.label) || '',
+                            });
+                        } }))),
+                React.createElement(Flex, { className: "field-container" },
+                    React.createElement(Text, { className: "field-title field-title--middle" }, "Description"),
+                    React.createElement(Input, { placeholder: "Describe your media template", className: "field-input", value: defaultTemplateDesc, debounce: 1000, onAfterChange: value => handleChangeValue({ templateDesc: value }) })),
+                React.createElement(Flex, { className: "field-container" },
+                    React.createElement(Text, { className: "field-title" },
+                        "Thumbnail template ",
+                        React.createElement("span", null, "*")),
+                    React.createElement(ImageSlider, { thumbnails: thumbnails, skeleton: skeleton, previewNavigation: previewNavigation, slidesPerView: slidesPerView, defaultThumbnail: defaultThumbnail, onSelectDefault: value => handleChangeValue({ defaultThumbnail: value }) })), categories === null || categories === void 0 ? void 0 :
+                categories.map(parentCategory => {
+                    var _a, _b;
+                    const selectedChildren = (_a = categoriesValue
+                        .find(item => item.label === parentCategory.label)) === null || _a === void 0 ? void 0 : _a.children.map(item => item.label);
+                    const remainChildren = parentCategory.children.filter(item => !(selectedChildren === null || selectedChildren === void 0 ? void 0 : selectedChildren.includes(item.label)));
+                    const formatData = remainChildren.map((item, idx) => ({
+                        label: item.label,
+                        key: idx,
+                    }));
+                    return (React.createElement(Flex, { key: parentCategory.label, className: "field-container" },
+                        React.createElement(Text, { className: "field-title" }, parentCategory.label),
+                        React.createElement(Flex, { wrap: "wrap", gap: 10, className: "category-container" }, 
+                        /* selectedCategory */
+                        (_b = categoriesValue
+                            .find(item => item.label === parentCategory.label)) === null || _b === void 0 ? void 0 :
+                            _b.children.map(selectedItem => (React.createElement(Flex, { key: selectedItem.label, className: "selected-category", justify: "space-between", align: "center" },
+                                React.createElement(Text, null, selectedItem.label),
+                                ' ',
+                                React.createElement("span", { className: "remove-btn", onClick: () => handleRemoveCategory({
+                                        parent: parentCategory.label,
+                                        item: selectedItem,
+                                    }) }, "\u00D7")))),
+                            React.createElement(Dropdown, { menu: {
+                                    items: formatData,
+                                    onClick: ({ key }) => {
+                                        handleAddCategory({
+                                            parent: parentCategory.label,
+                                            parentKey: parentCategory.key,
+                                            item: remainChildren[key],
+                                        });
+                                    },
+                                }, getPopupContainer: triggerNode => triggerNode.parentElement, trigger: ['click'] },
+                                React.createElement(Button, null,
+                                    "+ Add ",
+                                    parentCategory.label.toLowerCase())))));
+                })),
+            isShowShareAccess ? (React.createElement("div", { className: "share-access-container" },
+                React.createElement(ShareAccess, Object.assign({ accessInfo: accessInfo, onChange: value => handleChangeValue({ accessInfo: value }) }, shareAccessProps)))) : null)));
+};

package/es/components/molecules/TemplateSaveAs/TemplateSaveAsModal.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ModalV2Props } from '../ModalV2';
+import { TemplateSaveAsProps, TemplateValueOptions } from './TemplateSaveAs';
+interface TemplateSaveAsModalProps extends ModalV2Props {
+    templateProps: TemplateSaveAsProps;
+    defaultValue?: TemplateValueOptions;
+    onOk?: (e: React.MouseEvent<HTMLButtonElement>, value?: TemplateValueOptions) => void;
+}
+export declare const TemplateSaveAsModal: React.FC<TemplateSaveAsModalProps>;
+export {};

package/es/components/molecules/TemplateSaveAs/TemplateSaveAsModal.js

@@ -0,0 +1,38 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useState } from 'react';
+import { ModalV2 } from '../ModalV2';
+import { TemplateSaveAs } from './TemplateSaveAs';
+// NOTE: helper link (read more about controlled and uncontrolled component)
+// Inspiration form input component https://react.dev/reference/react-dom/components/input
+export const TemplateSaveAsModal = props => {
+    const { open, onCancel, okText, onOk, title, templateProps, defaultValue } = props, restProps = __rest(props, ["open", "onCancel", "okText", "onOk", "title", "templateProps", "defaultValue"]);
+    const { onChange: templateOnChange, value: templateValue } = templateProps, restTemplateProps = __rest(templateProps, ["onChange", "value"]);
+    const [internalValue, setInternalValue] = useState(defaultValue || templateValue);
+    const handleOnChange = (value) => {
+        if (templateOnChange) {
+            templateOnChange(value);
+        }
+        // NOTE: If there are no templateValue and templateOnChange => uncontrolled component => return templateValue
+        if (defaultValue && !templateValue && !templateOnChange) {
+            setInternalValue(value);
+        }
+    };
+    const handleOk = (event) => {
+        if (onOk) {
+            // NOTE: If there are templateValue and templateOnChange => controlled component => return templateValue
+            onOk(event, templateValue && templateOnChange ? templateValue : internalValue);
+        }
+    };
+    return (React.createElement(ModalV2, Object.assign({ open: open, onCancel: onCancel, onOk: handleOk, okText: okText || 'Save', width: 1177, title: title || 'Save as my template' }, restProps),
+        React.createElement(TemplateSaveAs, Object.assign({ onChange: handleOnChange, value: templateValue || internalValue }, restTemplateProps))));
+};

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/ImageSlider.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface ImageSliderProps {
+    thumbnails: (string | undefined)[];
+    className?: string;
+    skeleton?: boolean;
+    previewNavigation?: boolean;
+    slidesPerView?: number;
+    /**
+     * Default thumbnail - order of default thumbnail in thumbnails array
+     */
+    defaultThumbnail?: number;
+    onSelectDefault?: (imgIndex: number) => void;
+}
+export declare const ImageSlider: React.FC<ImageSliderProps>;
+export {};

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/ImageSlider.js

@@ -0,0 +1,68 @@
+// Libraries
+import React, { useState, useRef } from 'react';
+import { Image } from 'antd';
+import Icon from '@antscorp/icons';
+// Components
+import { Button, Flex } from '@antscorp/antsomi-ui/es/components';
+// Styles
+import { ImageSliderStyled } from './styled';
+import clsx from 'clsx';
+export const ImageSlider = props => {
+    var _a, _b;
+    const { thumbnails, className, skeleton, previewNavigation, slidesPerView = 3, defaultThumbnail, onSelectDefault, } = props;
+    console.log('🚀 ~ ImageSlider ~ thumbnails:', thumbnails);
+    const sliderContainerRef = useRef(null);
+    const thumbnailSelectedRef = useRef(null);
+    const [selectedThumbnail, setSelectedThumbnail] = useState(0);
+    console.log('🚀 ~ selectedThumbnail:', selectedThumbnail);
+    const [defaultThumbnailInternal, setDefaultThumbnailInternal] = useState(defaultThumbnail || 0);
+    console.log('🚀 ~ defaultThumbnailInternal:', defaultThumbnailInternal);
+    (_a = thumbnailSelectedRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
+        left: selectedThumbnail * 330,
+        behavior: 'smooth',
+    });
+    (_b = sliderContainerRef.current) === null || _b === void 0 ? void 0 : _b.scrollTo({
+        left: selectedThumbnail * (330 / slidesPerView),
+        behavior: 'smooth',
+    });
+    const handleNextThumbnail = () => {
+        setSelectedThumbnail(prev => (prev === thumbnails.length - 1 ? 0 : prev + 1));
+    };
+    const handlePrevThumbnail = () => {
+        setSelectedThumbnail(prev => (prev === 0 ? thumbnails.length - 1 : prev - 1));
+    };
+    // useEffect(() => {
+    //   handleScrollToImage();
+    //   // eslint-disable-next-line react-hooks/exhaustive-deps
+    // }, [selectedThumbnail]);
+    return (React.createElement(ImageSliderStyled, { className: className || '', "$skeleton": skeleton, "$slidesPerView": slidesPerView, vertical: true, gap: 10 },
+        React.createElement(Flex, { className: "thumbnail-preview-container", ref: thumbnailSelectedRef }, thumbnails.map((url, index) => (React.createElement("div", { key: `image-big_${url}_${index * 2}`, className: clsx('image-container--big', {
+                'image-container--default': defaultThumbnailInternal === index,
+                // 'image-container--default': isSelectedDefault,
+            }) },
+            React.createElement(Image, { preview: false, width: "80%", height: "96%", src: thumbnails[index] }),
+            React.createElement(Button, { className: "set-default-button", onClick: () => {
+                    setDefaultThumbnailInternal(selectedThumbnail);
+                    if (onSelectDefault) {
+                        onSelectDefault(selectedThumbnail);
+                    }
+                } },
+                defaultThumbnailInternal === index ? (React.createElement(Icon, { type: "icon-ants-check", style: { fontSize: '12px' } })) : null,
+                defaultThumbnailInternal === index ? 'Default thumbnail' : 'Set as default'))))),
+        React.createElement(Flex, { gap: 10, className: "thumbnail-slider-container", ref: sliderContainerRef }, thumbnails.map((url, index) => {
+            console.log('🚀 ~ ImageSlider ~ render list ~ thumbnails:', { url, index });
+            return (React.createElement("div", { key: `${url}_${index * 2}`, className: clsx('image-container--small', {
+                    'image-container--selected': index === selectedThumbnail,
+                }), onClick: () => setSelectedThumbnail(index) },
+                React.createElement(Image, { key: url, preview: false, width: "80%", height: "96%", src: url })));
+        })),
+        previewNavigation ? (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "change-preview-button change-preview-button--left", onClick: handlePrevThumbnail },
+                React.createElement(Icon, { type: "icon-ants-angle-left" })),
+            React.createElement("div", { className: "change-preview-button change-preview-button--right", onClick: handleNextThumbnail },
+                React.createElement(Icon, { type: "icon-ants-angle-right" })))) : null,
+        React.createElement("div", { className: "slider-button slider-button--left", onClick: handlePrevThumbnail },
+            React.createElement(Icon, { type: "icon-ants-angle-left" })),
+        React.createElement("div", { className: "slider-button slider-button--right", onClick: handleNextThumbnail },
+            React.createElement(Icon, { type: "icon-ants-angle-right" }))));
+};

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/index.d.ts

@@ -0,0 +1 @@
+export { ImageSlider } from './ImageSlider';

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/index.js

@@ -0,0 +1 @@
+export { ImageSlider } from './ImageSlider';

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/styled.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const ImageSliderStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {
+    $skeleton?: boolean | undefined;
+    $slidesPerView?: number | undefined;
+}, never>;

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/styled.js

@@ -0,0 +1,175 @@
+// Libraries
+import styled, { css } from 'styled-components';
+import { Flex } from '@antscorp/antsomi-ui/es/components';
+// Assets
+import SkeletonBg from '@antscorp/antsomi-ui/es/assets/images/skeleton_bg.png';
+const backgroundImage = css `
+  ${props => props.$skeleton
+    ? css `
+          background: url(${SkeletonBg}) no-repeat center center, #e5e5e5;
+          background-size: contain;
+        `
+    : css `
+          background: #e5e5e5;
+        `}
+`;
+const setWidthHeight = ({ w, h }) => `
+  width: ${w};
+  height: ${h};
+`;
+const centerBlock = css `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+export const ImageSliderStyled = styled(Flex) `
+  /* NOTE: Style for prev and next button in thumbnail slider */
+  position: relative;
+
+  .change-preview-button {
+    ${centerBlock}
+    position: absolute;
+    top: 115px;
+    transform: translateY(-50%);
+    font-size: 24px;
+    color: #fafafa;
+
+    cursor: pointer;
+    z-index: 1;
+
+    &--left {
+      left: 6px;
+    }
+    &--right {
+      right: 6px;
+    }
+  }
+
+  .slider-button {
+    ${centerBlock}
+    position: absolute;
+    bottom: 36px;
+    transform: translateY(50%);
+
+    font-size: 12px;
+
+    ${setWidthHeight({ w: '24px', h: '24px' })}
+    border-radius: 999px;
+    background-color: #fff;
+
+    cursor: pointer;
+    z-index: 1;
+
+    &--left {
+      left: 2px;
+    }
+    &--right {
+      right: 2px;
+    }
+  }
+
+  .thumbnail-preview-container {
+    width: 330px;
+    overflow-x: scroll;
+    scrollbar-width: none;
+
+    /* NOTE: set border-radius for parent of thumbnail list make better UI when scroll horizontal */
+    border-radius: 5px;
+
+    & > div {
+      overflow: hidden;
+    }
+  }
+
+  .thumbnail-slider-container {
+    position: relative;
+    width: 330px;
+    overflow-x: scroll;
+    scrollbar-width: none;
+  }
+
+  .image-container {
+    &--big,
+    &--small {
+      ${centerBlock}
+      ${backgroundImage}
+      img {
+        object-fit: contain;
+      }
+
+      div:has(> img) {
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    &--big {
+      ${setWidthHeight({ w: '100%', h: '230px' })}
+      /* ${setWidthHeight({ w: '330px', h: '230px' })} */
+      flex-shrink: 0;
+
+      position: relative;
+      /* border-radius: 5px; */
+      overflow: hidden;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.5);
+        z-index: 1;
+      }
+    }
+
+    &--small {
+      width: ${props => `calc(100% / ${props.$slidesPerView || 3} - 10px)`};
+      height: 72px;
+      flex-shrink: 0;
+
+      border: 2px solid #e5e5e5;
+      border-radius: 2px;
+      user-select: none;
+      cursor: pointer;
+    }
+    &--selected {
+      border: 2px solid var(--primary-color);
+    }
+  }
+
+  .set-default-button {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 2;
+  }
+
+  /* .swiper-button-prev,
+  .swiper-button-next {
+    background: #fff;
+    width: 24px;
+    height: 24px;
+    border-radius: 999px;
+    &:after {
+      font-size: 14px;
+      font-weight: bold;
+      color: #000;
+    }
+    &.swiper-button-disabled {
+      opacity: 1;
+      cursor: pointer;
+    }
+  } */
+
+  /* .swiper-button-prev.swiper-button-disabled {
+    opacity: 1;
+    cursor: pointer;
+  } */
+
+  /* .swiper-button-lock {
+    display: flex;
+  } */
+`;

package/es/components/molecules/TemplateSaveAs/components/index.d.ts

@@ -0,0 +1 @@
+export { ImageSlider } from './ImageSlider';

package/es/components/molecules/TemplateSaveAs/components/index.js

@@ -0,0 +1 @@
+export { ImageSlider } from './ImageSlider';

package/es/components/molecules/TemplateSaveAs/index.d.ts

@@ -0,0 +1,3 @@
+export { TemplateSaveAs } from './TemplateSaveAs';
+export { TemplateSaveAsModal } from './TemplateSaveAsModal';
+export type { TemplateValueOptions } from './TemplateSaveAs';

package/es/components/molecules/TemplateSaveAs/index.js

@@ -0,0 +1,2 @@
+export { TemplateSaveAs } from './TemplateSaveAs';
+export { TemplateSaveAsModal } from './TemplateSaveAsModal';

package/es/components/molecules/TemplateSaveAs/styled.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const TemplateSaveAsStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {
+    $skeleton?: boolean | undefined;
+}, never>;

package/es/components/molecules/TemplateSaveAs/styled.js

@@ -0,0 +1,70 @@
+var _a;
+// Libraries
+import styled from 'styled-components';
+// Components
+import { Flex } from '@antscorp/antsomi-ui/es/components';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const TemplateSaveAsStyled = styled(Flex) `
+  padding: 10px;
+  /* max-width: 1177px; */
+
+  .save-options-container {
+    padding: 15px 0;
+    margin-bottom: 20px;
+    border-bottom: 1px dashed #e5e5e5;
+  }
+
+  .template-container {
+    width: 698px;
+    /* max-height: 567px; */
+    max-height: 50vh;
+    padding-right: 28px;
+    overflow-y: auto;
+  }
+  .share-access-container {
+    flex: 1;
+    padding: 0 28px;
+    border-left: 1px solid #e5e5e5;
+  }
+
+  .field-container {
+    gap: 10px;
+  }
+
+  .field-title {
+    font-size: 12px;
+    width: 150px;
+    /* background-color: violet; */
+    span {
+      color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.red6};
+    }
+
+    &--middle {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  div:has(> .field-input) {
+    width: 330px;
+  }
+
+  .category-container {
+    flex: 1;
+  }
+
+  .selected-category {
+    width: 240px;
+    height: 30px;
+    border: 1px solid #b8cfe6;
+    padding: 0 5px;
+    border-radius: 3px;
+
+    & > span.remove-btn {
+      font-size: 20px;
+      font-weight: bold;
+      cursor: pointer;
+      user-select: none;
+    }
+  }
+`;