@antscorp/antsomi-ui 1.3.5-beta.31 → 1.3.5-beta.310

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

@@ -0,0 +1,16 @@
+import React from 'react';
+export interface EditableNameHandle {
+    value: () => string;
+}
+interface EditableNameProps {
+    className?: string;
+    isLoading?: boolean;
+    defaultValue?: string;
+    required?: boolean;
+    error?: string;
+    value?: string;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onChange?: (value: string) => void;
+}
+export declare const EditableName: React.ForwardRefExoticComponent<EditableNameProps & React.RefAttributes<EditableNameHandle>>;
+export {};

package/es/components/molecules/EditableName/EditableName.js

@@ -0,0 +1,56 @@
+import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { InputWrapperStyled } from './styled';
+import { Input, Tooltip } from 'antd';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import Icon from '@antscorp/icons';
+import { Spin } from '../../atoms';
+export const EditableName = React.forwardRef((props, ref) => {
+    var _a;
+    const { className, isLoading, defaultValue, required, error, value, onBlur, onChange } = props;
+    const [inputWidth, setInputWidth] = useState(1);
+    const [internalValue, setInternalValue] = useState(value || defaultValue || '');
+    const requiredError = useMemo(() => {
+        const newValue = value ? value.trim() : internalValue.trim();
+        return required && newValue.length === 0 ? 'This field is required' : '';
+    }, [required, internalValue, value]);
+    const spanRef = useRef(null);
+    const inputRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+        value() {
+            return internalValue;
+        },
+    }), [internalValue]);
+    const onKeyDown = (e) => {
+        var _a;
+        if (e.key === 'Enter') {
+            onChange === null || onChange === void 0 ? void 0 : onChange(e.currentTarget.value);
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+        }
+    };
+    useEffect(() => {
+        var _a;
+        if (spanRef.current) {
+            spanRef.current.innerText = value || defaultValue || '';
+            setInputWidth(((_a = spanRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 1);
+        }
+        // NOTE: the defaultValue props should need use only one time and don't change in component life circle
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [value]);
+    return (React.createElement(InputWrapperStyled, { className: className || '' },
+        React.createElement(Tooltip, { title: value || internalValue },
+            React.createElement(Input, { ref: inputRef, style: { width: inputWidth + 2 }, defaultValue: defaultValue, value: value, onChange: event => {
+                    var _a;
+                    const newValue = event.target.value;
+                    if (spanRef.current)
+                        spanRef.current.innerText = newValue;
+                    setInputWidth(((_a = spanRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 1);
+                    setInternalValue(newValue);
+                    onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+                }, onBlur: onBlur, onKeyDown: onKeyDown })),
+        isLoading ? (React.createElement(Spin, { indicatorSize: 20, style: { paddingLeft: '5px', marginLeft: '10px' } })) : null,
+        (error || requiredError) && !isLoading ? (React.createElement("div", { className: "suffix-icon-error" },
+            React.createElement(Tooltip, { title: error || requiredError },
+                React.createElement(Icon, { type: "icon-ants-warning-circle", style: { color: '#F44336', fontSize: '19.2px' } })))) : (React.createElement("div", { className: "suffix-icon" },
+            React.createElement(Icon, { type: "icon-ants-pencil", style: { color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue7, fontSize: '24px' } }))),
+        React.createElement("span", { ref: spanRef, className: "hidden-span" })));
+});

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

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

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

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

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

@@ -0,0 +1 @@
+export declare const InputWrapperStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,71 @@
+var _a;
+import styled from 'styled-components';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const InputWrapperStyled = styled.div `
+  display: inline-block;
+  position: relative;
+  background-color: #fff;
+  border-bottom: 1px solid transparent;
+  max-width: 100%;
+  overflow: hidden;
+
+  display: inline-flex;
+  align-items: baseline;
+
+  &:has(input:focus) {
+    border-bottom: 1px solid ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue1};
+  }
+
+  input {
+    font-size: 20px !important;
+    font-weight: 700;
+    min-width: 23px !important;
+    height: 30px;
+    transition: none !important;
+    padding: 5px 0 !important;
+    border: none !important;
+    text-overflow: ellipsis;
+  }
+
+  .suffix-icon-error,
+  .suffix-icon {
+    display: flex;
+    align-self: stretch;
+    align-items: center;
+    padding: 0 5px;
+    padding-left: 15px;
+  }
+
+  .suffix-icon {
+    display: none;
+    &:hover {
+      display: flex;
+    }
+  }
+
+  input:hover {
+    background-color: transparent;
+
+    & + .suffix-icon {
+      display: flex;
+    }
+  }
+
+  input:focus + .suffix-icon {
+    display: none;
+  }
+
+  .hidden-span {
+    box-sizing: border-box;
+    visibility: hidden;
+    white-space: pre;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 30px;
+    font-family: inherit;
+    font-size: 20px;
+    font-weight: 700;
+    padding: 5px 0; /* Match the padding of the Input component */
+  }
+`;

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

@@ -1,3 +1,4 @@
+/// <reference types="react-ace/node_modules/ace-builds/ace-modules" />
 import React, { ReactNode } from 'react';
 import { IAceEditorProps } from 'react-ace';
 import 'ace-builds/webpack-resolver';

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

@@ -0,0 +1,35 @@
+import React from 'react';
+interface EditorTabItem {
+    showIcon?: boolean;
+    showDropdown?: boolean;
+    closeable?: boolean;
+    formatSelectedText: string;
+    formattedQuery: string;
+    id: string;
+    name: string;
+    query: string;
+    type: string;
+    selectedTextOut: string;
+    queryResult: any;
+    cursorSql?: string;
+    cursorSqlOut?: string;
+    refreshAndFocusId?: string;
+}
+interface EditorTabProps {
+    showArrow?: boolean;
+    showDropdown?: boolean;
+    disabledScroll?: boolean;
+    showComposeNewQuery?: boolean;
+    className?: string;
+    leftBlockClassName?: string;
+    tabItemClassName?: string;
+    listTab?: EditorTabItem[];
+    activeId?: string;
+    onActiveTab: (id: string) => void;
+    onCloseTab: (tab: EditorTabItem, index: number, newTabs: EditorTabItem[]) => void;
+    onConfigure: (id: string) => void;
+    onSaveName?: (id: string, value: string) => void;
+    handleAddTab: () => void;
+}
+export declare const EditorTab: React.FC<EditorTabProps>;
+export {};

package/es/components/molecules/EditorTab/EditorTab.js

@@ -0,0 +1,159 @@
+// Lib
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import classnames from 'classnames';
+// Components
+import Icon from '@antscorp/icons/main';
+import { Button, Typography, Dropdown, ContentEditable } from '@antscorp/antsomi-ui/es/components';
+// Styles
+import { EditorTabStyled } from './styled';
+// Utils
+import { handleError } from '@antscorp/antsomi-ui/es/utils';
+const PATH = 'src/components/EditorTab/index.jsx';
+const constants = {
+    TAB_TYPE: {
+        QUERY: 'query',
+        TABLE_DETAIL: 'table-detail',
+    },
+};
+export const EditorTab = props => {
+    var _a;
+    const { listTab = [], activeId = '', showArrow, showDropdown, disabledScroll, onCloseTab, onActiveTab, handleAddTab, onConfigure, onSaveName, showComposeNewQuery, className, leftBlockClassName, tabItemClassName, } = props;
+    const [activeTabId, setActiveTabId] = useState(activeId || ((_a = listTab === null || listTab === void 0 ? void 0 : listTab[0]) === null || _a === void 0 ? void 0 : _a.id));
+    const [arrTabs, setArrTabs] = useState(listTab || []);
+    const [isEditable, setIsEditable] = useState();
+    // Ref
+    const leftBlockRef = useRef(null);
+    const activeTabIdx = useMemo(() => {
+        return arrTabs.findIndex(tab => tab.id === activeId);
+    }, [activeId]);
+    useEffect(() => {
+        if (listTab.length - arrTabs.length === 1) {
+            setActiveTabId(listTab[listTab.length - 1].id);
+        }
+        setArrTabs(listTab);
+    }, [listTab]);
+    useEffect(() => {
+        onActiveTab(activeTabId);
+        setTimeout(() => {
+            if (!disabledScroll) {
+                const tabEl = document.getElementById(`tab-${activeTabId}`);
+                if (tabEl) {
+                    tabEl.scrollIntoView({ block: 'center', inline: 'center', behavior: 'smooth' });
+                }
+            }
+        }, 500);
+    }, [activeTabId]);
+    useEffect(() => {
+        if (activeId && activeTabId !== activeId) {
+            setActiveTabId(activeId);
+        }
+    }, [activeId]);
+    const handleAddNew = () => {
+        handleAddTab();
+    };
+    const handleCloseTab = (e, tab, idx) => {
+        e.stopPropagation();
+        if (arrTabs.length < 2) {
+            return;
+        }
+        if (activeTabId === tab.id) {
+            if (idx === arrTabs.length - 1) {
+                setActiveTabId(arrTabs[idx - 1].id);
+            }
+            else if (arrTabs.length > 1) {
+                setActiveTabId(arrTabs[idx + 1].id);
+            }
+        }
+        setArrTabs(prevTabs => {
+            const newTabs = [...prevTabs];
+            newTabs.splice(idx, 1);
+            onCloseTab(tab, idx, newTabs);
+            return newTabs;
+        });
+    };
+    const handleActiveTab = (tab, idx) => {
+        setActiveTabId(tab.id);
+    };
+    const onWheelLeftBlock = event => {
+        try {
+            if (!event.deltaY) {
+                return;
+            }
+            event.currentTarget.scrollLeft += event.deltaY + event.deltaX;
+        }
+        catch (error) {
+            handleError(error, {
+                path: PATH,
+                name: 'onWheelLeftBlock',
+                args: {},
+            });
+        }
+    };
+    const onClickArrow = (direction = 'left') => {
+        const idx = arrTabs.findIndex(tab => tab.id === activeTabId);
+        if (idx !== -1) {
+            switch (direction) {
+                case 'left':
+                    if (idx === 0) {
+                        return;
+                    }
+                    setActiveTabId(arrTabs[idx - 1].id);
+                    break;
+                case 'right':
+                    if (idx === arrTabs.length - 1) {
+                        return;
+                    }
+                    setActiveTabId(arrTabs[idx + 1].id);
+                    break;
+            }
+        }
+    };
+    return (React.createElement(EditorTabStyled, { className: className || '' },
+        showArrow && (React.createElement("div", { className: classnames('arrow-btn', {
+                '--disabled': activeTabIdx === 0,
+            }), onClick: () => onClickArrow('left') },
+            React.createElement(Icon, { type: "icon-ants-angle-left" }))),
+        React.createElement("div", { ref: leftBlockRef, className: classnames('left-block', leftBlockClassName), onWheel: onWheelLeftBlock }, arrTabs && arrTabs.length
+            ? arrTabs.map((tab, idx) => {
+                const { showIcon = true, closeable = true } = tab;
+                // const { showIcon = true, showDropdown = true, closeable = true } = tab;
+                return (React.createElement("div", { key: tab.id, id: `tab-${tab.id}`, onClick: () => handleActiveTab(tab, idx), className: classnames('tab-item', tabItemClassName, {
+                        active: tab.id === activeTabId,
+                    }) },
+                    showIcon &&
+                        (tab.type === constants.TAB_TYPE.QUERY ? (React.createElement(Icon, { type: "icon-ants-material-outline-manage-search", overlayStyle: { fontSize: 21 } })) : (React.createElement(Icon, { type: "icon-ants-table-vertical", overlayStyle: { fontSize: 21 } }))),
+                    isEditable === tab.id ? (React.createElement(ContentEditable, { value: tab.name, onSave: newValue => {
+                            setIsEditable(undefined);
+                            onSaveName === null || onSaveName === void 0 ? void 0 : onSaveName(tab.id, newValue);
+                        } })) : (React.createElement(Typography.Text, { ellipsis: { tooltip: true } }, tab.name)),
+                    showDropdown ? (React.createElement(Dropdown, { menu: {
+                            items: [
+                                { label: 'Configure', key: 'configure' },
+                                { label: 'Remove', key: 'remove' },
+                            ],
+                            onClick: ({ key, domEvent }) => {
+                                switch (key) {
+                                    case 'configure':
+                                        console.log('click configure', domEvent);
+                                        setIsEditable(tab.id);
+                                        onConfigure === null || onConfigure === void 0 ? void 0 : onConfigure(tab.id);
+                                        break;
+                                    case 'remove':
+                                        handleCloseTab(domEvent, tab, idx);
+                                        break;
+                                    default:
+                                        break;
+                                }
+                            },
+                        }, placement: "bottomRight", trigger: ['click'] },
+                        React.createElement(Button, { icon: React.createElement(Icon, { type: "icon-ants-angle-left", overlayStyle: { fontSize: 12 } }), style: { transform: 'rotate(-90deg)' }, size: "small" }))) : closeable ? (React.createElement(Button, { icon: React.createElement(Icon, { type: "icon-ants-remove-slim", onClick: e => handleCloseTab(e, tab, idx), overlayStyle: { fontSize: 12 } }), size: "small" })) : null));
+            })
+            : null),
+        showArrow && (React.createElement("div", { className: classnames('arrow-btn', '--right', {
+                '--disabled': activeTabIdx === arrTabs.length - 1,
+            }), onClick: () => onClickArrow('right') },
+            React.createElement(Icon, { type: "icon-ants-angle-right" }))),
+        showComposeNewQuery && (React.createElement(Button, { onClick: handleAddNew, className: "new-query-btn" },
+            React.createElement(Icon, { type: "icon-ants-add-square" }),
+            "New query"))));
+};

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

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

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

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

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

@@ -0,0 +1 @@
+export declare const EditorTabStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,132 @@
+var _a, _b, _c;
+import styled from 'styled-components';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+// const token = theme.getDesignToken(THEME);
+export const EditorTabStyled = styled.div `
+  position: relative;
+  height: 40px;
+  display: flex;
+  align-items: center;
+
+  /* Styled for icon button */
+  button.antsomi-btn-icon-only.antsomi-btn-sm {
+    margin-left: auto;
+    border: none !important;
+    background-color: transparent !important;
+    flex-shrink: 0;
+    width: 20px !important;
+    height: 20px !important;
+    &:hover {
+      background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue} !important;
+    }
+  }
+
+  .left-block {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    flex-grow: 1;
+    flex-flow: nowrap;
+    display: flex;
+    align-items: center;
+    overflow-x: auto;
+    overflow-y: hidden;
+
+    font-size: 14px;
+    color: #222;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    .tab-item {
+      position: relative;
+      box-sizing: border-box;
+
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+      gap: 7px;
+      width: 150px;
+      height: 40px;
+      padding: 0 10px;
+      overflow: hidden;
+      max-width: 200px;
+      background-color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw2};
+
+      &:hover {
+        background-color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.blue};
+      }
+
+      white-space: nowrap;
+
+      transition: background-color 300ms ease-in-out;
+      cursor: pointer;
+
+      i {
+        font-size: 20px;
+        color: #666;
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        height: 3px;
+        width: 100%;
+        background-color: #1f5fac;
+
+        transform-origin: center;
+        transform: scaleX(0);
+        transition: transform 300ms ease-in-out;
+      }
+
+      &.active {
+        &::after {
+          transform: scaleX(1);
+        }
+        background-color: #fff;
+      }
+    }
+
+    ::-webkit-scrollbar {
+      -webkit-appearance: none;
+      display: none !important;
+    }
+    ::-webkit-scrollbar-thumb {
+      display: none !important;
+    }
+  }
+
+  button.new-query-btn {
+    margin-left: 10px;
+    border: none;
+  }
+
+  .arrow-btn {
+    /* Structure Block */
+    flex-shrink: 0;
+    height: 100%;
+    width: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    /* border-right: 1px solid #e0e0e0; */
+
+    /* Typography Block */
+    font-size: 12px;
+
+    cursor: pointer;
+
+    &.--right {
+      border-right: 1px solid #e0e0e0;
+    }
+
+    &.--disabled {
+      cursor: not-allowed;
+      pointer-events: none;
+      opacity: 0.7;
+    }
+  }
+`;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface EmptyDataProps {
+    size?: TUISize;
+    icon?: React.ReactNode;
+    title?: React.ReactNode;
+    subTitle?: React.ReactNode;
+    description?: React.ReactNode;
+    loading?: boolean;
+    className?: string;
+    image?: string;
+    imageClassName?: string;
+    imageStyle?: React.CSSProperties;
+}
+export declare const EmptyData: React.FC<React.PropsWithChildren<EmptyDataProps>>;

package/es/components/molecules/EmptyData/EmptyData.js

@@ -0,0 +1,24 @@
+// Libraries
+import React from 'react';
+import { LoadingOutlined } from '@ant-design/icons';
+import { isString } from 'lodash';
+// Components
+import { Flex, Spin, Typography } from '@antscorp/antsomi-ui/es/components/atoms';
+// Components
+import { Icon } from '@antscorp/antsomi-ui/es/components';
+// Styled
+import { EmptyIcon, EmptyWrapper, ImageWrapper } from './styled';
+const { Text } = Typography;
+export const EmptyData = props => {
+    const { size = 'medium', icon = 'icon-ants-media', title, subTitle, description, loading, className, image, imageClassName, imageStyle, children, } = props;
+    return (React.createElement(EmptyWrapper, { className: className },
+        React.createElement(Flex, { vertical: true, align: "center", justify: "center", gap: 15 },
+            !image && (React.createElement(EmptyIcon, { className: "animate__animated animate__tada", "$size": size }, isString(icon) ? React.createElement(Icon, { type: icon }) : icon)),
+            image && (React.createElement(ImageWrapper, { className: imageClassName, style: imageStyle },
+                React.createElement("img", { src: image, alt: "" }))),
+            loading ? (React.createElement(Spin, { indicator: React.createElement(LoadingOutlined, { style: { fontSize: 24 }, spin: true }) })) : (React.createElement(Flex, { gap: 5, align: "center", justify: "center", vertical: true },
+                title && React.createElement(Text, { className: "title animate__animated animate__fadeInUp" }, title),
+                subTitle && (React.createElement(Text, { className: "subTitle animate__animated animate__fadeInUp" }, subTitle)),
+                description && (React.createElement(Text, { className: "description animate__animated animate__fadeInUp" }, description))))),
+        children));
+};

package/es/components/molecules/EmptyData/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const EMPTY_WRAPPER_SIZE: {
+    [x: string]: number;
+};
+export declare const EMPTY_ICON_SIZE: {
+    [x: string]: number;
+};

package/es/components/molecules/EmptyData/constants.js

@@ -0,0 +1,12 @@
+import { UI_SIZE } from '@antscorp/antsomi-ui/es/constants';
+const { SMALL, MEDIUM, LARGE } = UI_SIZE;
+export const EMPTY_WRAPPER_SIZE = {
+    [SMALL]: 60,
+    [MEDIUM]: 80,
+    [LARGE]: 100,
+};
+export const EMPTY_ICON_SIZE = {
+    [SMALL]: 27,
+    [MEDIUM]: 48,
+    [LARGE]: 60,
+};

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

@@ -0,0 +1,2 @@
+export { EmptyData } from './EmptyData';
+export type { EmptyDataProps } from './EmptyData';

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

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

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

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

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

@@ -0,0 +1,71 @@
+var _a, _b, _c;
+// Libraries
+import styled, { css } from 'styled-components';
+// Components
+import { Flex } from '@antscorp/antsomi-ui/es/components/atoms';
+// Constants
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { EMPTY_ICON_SIZE, EMPTY_WRAPPER_SIZE } from './constants';
+export const EmptyWrapper = styled(Flex) `
+  width: 100%;
+  height: 100%;
+
+  .title {
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 16.41px;
+    color: black;
+  }
+
+  .subTitle {
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 14.06px;
+    color: black;
+  }
+
+  .description {
+    font-size: 11px;
+    font-weight: 400;
+    line-height: 13px;
+    color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw8};
+  }
+`;
+EmptyWrapper.defaultProps = {
+    vertical: true,
+    align: 'center',
+    justify: 'center',
+    gap: 20,
+};
+export const EmptyIcon = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 100%;
+  background-color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw2};
+
+  /* Handle Size */
+  ${({ $size }) => {
+    if ($size) {
+        return css `
+        width: ${EMPTY_WRAPPER_SIZE[$size]}px;
+        height: ${EMPTY_WRAPPER_SIZE[$size]}px;
+
+        i {
+          font-size: ${EMPTY_ICON_SIZE[$size]}px;
+        }
+      `;
+    }
+}}
+
+  i {
+    color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw6};
+  }
+`;
+export const ImageWrapper = styled.div `
+  img {
+    width: 100%;
+    height: auto;
+    object-fit: contain;
+  }
+`;