@antscorp/antsomi-ui 1.3.6-beta.2 → 1.3.6-beta.200

package/es/assets/css/main.scss

@@ -1,4 +1,8 @@
+@import url('../../components/index.scss');
+
 :root {
   --primary-color: #005fb8;
   --text-base-color: #222222;
+  --antsomi-box-shadow-secondary: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
+    0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
 }

package/es/components/atoms/Eyedropper/Eyedropper.d.ts

@@ -0,0 +1,2 @@
+import { EyedropperProps } from './types';
+export declare const Eyedropper: (props: EyedropperProps) => import("react/jsx-runtime").JSX.Element;

package/es/components/atoms/Eyedropper/Eyedropper.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Typography, message } from 'antd';
+import { BgColorsOutlined } from '@ant-design/icons'; // Icon hình giọt nước
+import { ColorSwatch, StyledButton, StyledColorTag, StyledEyedropperContainer } from './styled';
+import tinycolor from 'tinycolor2';
+import clsx from 'clsx';
+const { Text } = Typography;
+export const Eyedropper = (props) => {
+    const { defaultColor, onColorPick, className } = props;
+    const [pickedColor, setPickedColor] = useState(defaultColor);
+    const [isLoading, setIsLoading] = useState(false);
+    const apiSupported = 'EyeDropper' in window;
+    // Cập nhật màu mặc định nếu prop thay đổi
+    useEffect(() => {
+        setPickedColor(defaultColor);
+    }, [defaultColor]);
+    const handlePickColor = async () => {
+        if (!apiSupported) {
+            message.error('Trình duyệt của bạn không hỗ trợ EyeDropper API.');
+            return;
+        }
+        setIsLoading(true);
+        try {
+            const eyeDropper = new window.EyeDropper();
+            const { sRGBHex } = await eyeDropper.open();
+            setPickedColor(sRGBHex);
+            message.success(`Đã chọn màu: ${sRGBHex}`);
+            onColorPick?.(sRGBHex);
+        }
+        catch (e) {
+            if (e instanceof Error && e.name === 'AbortError') {
+                message.info('Người dùng đã hủy chọn màu.');
+            }
+            else if (e instanceof Error) {
+                message.error(`Đã xảy ra lỗi khi chọn màu: ${e.message}`);
+            }
+        }
+        finally {
+            setIsLoading(false);
+        }
+    };
+    const isCurrentColorLight = tinycolor(pickedColor).isLight();
+    return (_jsxs(StyledEyedropperContainer, { className: className, children: [_jsxs(Typography.Title, { level: 4, children: [_jsx(BgColorsOutlined, {}), " C\u00F4ng c\u1EE5 tr\u00EDch xu\u1EA5t m\u00E0u"] }), _jsx(Text, { type: "secondary", children: "B\u1EA5m n\u00FAt b\u00EAn d\u01B0\u1EDBi \u0111\u1EC3 k\u00EDch ho\u1EA1t c\u00F4ng c\u1EE5 Eyedropper c\u1EE7a tr\u00ECnh duy\u1EC7t v\u00E0 ch\u1ECDn m\u00E0u t\u1EEB b\u1EA5t k\u1EF3 \u0111\u00E2u tr\u00EAn m\u00E0n h\u00ECnh." }), _jsx(StyledButton, { type: "primary", icon: _jsx(BgColorsOutlined, {}), onClick: handlePickColor, loading: isLoading, disabled: isLoading || !apiSupported, size: "large", children: "Ch\u1ECDn M\u00E0u" }), pickedColor && (_jsxs("div", { style: {
+                    marginTop: '20px',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    gap: '10px',
+                }, children: [_jsx(Text, { children: "M\u00E0u \u0111\u00E3 ch\u1ECDn:" }), _jsx(StyledColorTag, { color: pickedColor, className: clsx({
+                            'is-lightcolor': isCurrentColorLight,
+                        }), children: pickedColor }), _jsx(ColorSwatch, { "$color": pickedColor })] })), !apiSupported && (_jsx(Text, { type: "danger", style: { marginTop: '15px', display: 'block' }, children: "Tr\u00ECnh duy\u1EC7t hi\u1EC7n t\u1EA1i kh\u00F4ng h\u1ED7 tr\u1EE3 EyeDropper API. Vui l\u00F2ng s\u1EED d\u1EE5ng Chrome, Edge ho\u1EB7c c\u00E1c tr\u00ECnh duy\u1EC7t d\u1EF1a tr\u00EAn Chromium." }))] }));
+};

package/es/components/atoms/Eyedropper/index.js

@@ -0,0 +1 @@
+"use strict";

package/es/components/atoms/Eyedropper/styled.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const StyledEyedropperContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
+    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
+}, any, {}, never>;
+export declare const StyledColorTag: import("styled-components").StyledComponent<import("antd").TagType, any, {}, never>;
+export declare const ColorSwatch: import("styled-components").StyledComponent<"div", any, {
+    $color: string;
+}, never>;

package/es/components/atoms/Eyedropper/styled.js

@@ -0,0 +1,45 @@
+import { Button, Tag } from 'antd';
+import styled from 'styled-components';
+export const StyledEyedropperContainer = styled.div `
+  padding: 20px;
+  border: 1px solid #e8e8e8;
+  border-radius: 8px;
+  max-width: 450px;
+  margin: 20px auto;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
+  text-align: center; /* Căn giữa nội dung */
+
+  h4 {
+    margin-bottom: 15px;
+    color: #333;
+    display: flex;
+    align-items: center;
+    justify-content: center; /* Căn giữa icon và tiêu đề */
+    gap: 8px; /* Khoảng cách giữa icon và chữ */
+  }
+`;
+export const StyledButton = styled(Button) `
+  margin-top: 20px;
+  width: auto; /* Để nút không bị giãn full chiều rộng */
+`;
+export const StyledColorTag = styled(Tag) `
+  padding: 4px 8px;
+  font-size: 1em;
+  font-weight: bold;
+  min-width: 100px;
+  text-align: center;
+  border: none;
+  color: white;
+
+  &.is-lightcolor {
+    border: 1px solid #d9d9d9;
+    color: #333;
+  }
+`;
+export const ColorSwatch = styled.div `
+  width: 30px;
+  height: 30px;
+  background-color: ${props => props.$color || 'transparent'}; /* Nhận prop $color */
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+`;

package/es/components/atoms/Eyedropper/types.d.ts

@@ -0,0 +1,5 @@
+export type EyedropperProps = {
+    defaultColor?: string;
+    onColorPick?: (color: string) => void;
+    className?: string;
+};

package/es/components/atoms/Eyedropper/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/atoms/Input/Input.d.ts

@@ -1,35 +1,15 @@
-/// <reference types="hoist-non-react-statics" />
-import React, { ReactNode } from 'react';
-import { InputProps as AntdInputProps, Input as AntdInput, InputRef } from 'antd';
-export interface InputProps extends AntdInputProps {
-    noborder?: 'true' | 'false' | boolean;
-    debounce?: number;
-    label?: ReactNode;
-    onAfterChange?: (value: string) => void;
-    errorArchive?: string;
-    required?: boolean;
-    isReverseMask?: boolean;
-    labelColor?: string;
-    isHideErrMessage?: boolean;
-    focused?: boolean;
-    errorMsg?: string;
-    disableUndo?: boolean;
-    withWrapper?: boolean;
-}
-export declare const Input: string & import("styled-components").StyledComponentBase<React.ForwardRefExoticComponent<AntdInputProps & React.RefAttributes<InputRef>> & {
-    Group: React.FC<import("antd/es/input").GroupProps>;
-    Search: React.ForwardRefExoticComponent<import("antd/es/input").SearchProps & React.RefAttributes<InputRef>>;
-    TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
-    Password: React.ForwardRefExoticComponent<import("antd/es/input").PasswordProps & React.RefAttributes<InputRef>>;
-}, any, InputProps, never> & import("hoist-non-react-statics").NonReactStatics<React.ForwardRefExoticComponent<AntdInputProps & React.RefAttributes<InputRef>> & {
-    Group: React.FC<import("antd/es/input").GroupProps>;
-    Search: React.ForwardRefExoticComponent<import("antd/es/input").SearchProps & React.RefAttributes<InputRef>>;
-    TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
-    Password: React.ForwardRefExoticComponent<import("antd/es/input").PasswordProps & React.RefAttributes<InputRef>>;
-}, {}> & {
-    DefaultInput: typeof AntdInput;
-    CustomSearch: typeof SearchInput;
+import React from 'react';
+import { InputRef } from 'antd';
+import { InputProps } from './types';
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>> & {
+    readonly DefaultInput: React.ForwardRefExoticComponent<import("antd").InputProps & React.RefAttributes<InputRef>> & {
+        Group: React.FC<import("antd/es/input").GroupProps>;
+        Search: React.ForwardRefExoticComponent<import("antd/es/input").SearchProps & React.RefAttributes<InputRef>>;
+        TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
+        Password: React.ForwardRefExoticComponent<import("antd/es/input").PasswordProps & React.RefAttributes<InputRef>>;
+    };
+    readonly CustomSearch: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>;
+    readonly TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
+    readonly Password: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>;
 };
-declare const SearchInput: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>;
 export declare const TextArea: React.ForwardRefExoticComponent<import("antd/es/input").TextAreaProps & React.RefAttributes<import("antd/es/input/TextArea").TextAreaRef>>;
-export {};

package/es/components/atoms/Input/Input.js

@@ -8,7 +8,7 @@ import { Input as AntdInput } from 'antd';
 // Components
 import { Icon, RequiredLabel, Text } from '@antscorp/antsomi-ui/es/components/atoms';
 // Utils
-import { handleError } from '@antscorp/antsomi-ui/es/utils';
+import { handleError } from '@antscorp/antsomi-ui/es/utils/handleError';
 import { getPreventKeyboardAction } from '@antscorp/antsomi-ui/es/utils/web';
 import { StyledIconWrapper, StyledInput } from './styled';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
@@ -17,7 +17,7 @@ import { PreviewVisibilityEyeIcon, VisibilityOffEyeIcon } from '../../icons';
 const PATH = '@antscorp/antsomi-ui/es/components/atoms/Input/Input.tsx';
 const OriginInput = React.forwardRef((props, ref) => {
     // Props
-    const { withWrapper, debounce, errorArchive, required, labelColor, isReverseMask, isHideErrMessage, focused, label, onAfterChange, onChange, errorMsg, ...restProps } = props;
+    const { debounce = 400, isHideErrMessage = false, withWrapper = true, errorArchive, required, labelColor, isReverseMask, focused, label, onAfterChange, onChange, errorMsg, ...restProps } = props;
     // State
     const [value, setValue] = useState(props.value);
     const [isFocused, setFocused] = useState(false);
@@ -79,16 +79,12 @@ const OriginInput = React.forwardRef((props, ref) => {
         return content;
     return _jsx("div", { className: "input__wrapper", children: content });
 });
-OriginInput.defaultProps = {
-    debounce: 400,
-    isHideErrMessage: false,
-    withWrapper: true,
-};
-export const Input = OriginInput;
 const SearchInput = React.forwardRef((props, ref) => (_jsx(OriginInput, { bordered: false, autoFocus: true, suffix: _jsx(Icon, { type: "icon-ants-search-2", size: 24, color: globalToken?.bw8 }), ...props, ref: ref, className: `${props.className} antsomi-search-input` })));
 const PasswordInput = React.forwardRef((props, ref) => (_jsx(AntdInput.Password, { iconRender: visible => visible ? (_jsx(StyledIconWrapper, { type: "text", children: _jsx(PreviewVisibilityEyeIcon, {}) })) : (_jsx(StyledIconWrapper, { type: "text", children: _jsx(VisibilityOffEyeIcon, {}) })), ...props, ref: ref })));
-Input.CustomSearch = SearchInput;
-Input.TextArea = StyledInput.TextArea;
-Input.DefaultInput = AntdInput;
-Input.Password = PasswordInput;
+export const Input = Object.assign(OriginInput, {
+    DefaultInput: AntdInput,
+    CustomSearch: SearchInput,
+    TextArea: StyledInput.TextArea,
+    Password: PasswordInput,
+});
 export const { TextArea } = StyledInput;

package/es/components/atoms/Input/index.d.ts

@@ -1,2 +1,2 @@
 export { Input, TextArea } from './Input';
-export type { InputProps } from './Input';
+export type { InputProps } from './types';

package/es/components/atoms/Input/styled.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { InputProps } from './Input';
+import { InputProps } from './types';
 export declare const StyledInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").InputProps & import("react").RefAttributes<import("antd").InputRef>> & {
     Group: import("react").FC<import("antd/es/input").GroupProps>;
     Search: import("react").ForwardRefExoticComponent<import("antd/es/input").SearchProps & import("react").RefAttributes<import("antd").InputRef>>;

package/es/components/atoms/Input/types.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+import { InputProps as AntdInputProps } from 'antd';
+export interface InputProps extends AntdInputProps {
+    noborder?: 'true' | 'false' | boolean;
+    debounce?: number;
+    label?: ReactNode;
+    onAfterChange?: (value: string) => void;
+    errorArchive?: string;
+    required?: boolean;
+    isReverseMask?: boolean;
+    labelColor?: string;
+    isHideErrMessage?: boolean;
+    focused?: boolean;
+    errorMsg?: string;
+    disableUndo?: boolean;
+    withWrapper?: boolean;
+}

package/es/components/atoms/Input/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/atoms/MobileBrandingBar/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export interface MobileBrandingBarProps {
+    showBadge?: boolean;
+    brandingName: string;
+    logo: string;
+}
+declare const _default: import("react").MemoExoticComponent<(props: MobileBrandingBarProps) => import("react/jsx-runtime").JSX.Element>;
+export default _default;

package/es/components/atoms/MobileBrandingBar/index.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Libraries
+import { memo } from 'react';
+// Assets
+import AntLogo from '@antscorp/antsomi-ui/es/assets/images/logo/sub-logo-antsomi.png';
+// Components
+import { Flex } from 'antd';
+import { BadgeContainer, BoxImage, BrandingName } from './styled';
+import { CheckSlimIcon } from '../../icons';
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+export default memo((props) => {
+    const { logo, brandingName, showBadge } = props;
+    return (_jsxs(Flex, { align: "center", gap: 6, style: { height: 30 }, children: [_jsx(BoxImage, { children: _jsx("img", { src: logo || AntLogo, alt: "branding logo", width: 15 }) }), _jsx(BrandingName, { ellipsis: { tooltip: true }, style: { flex: 1 }, children: brandingName }), showBadge ? (_jsx(BadgeContainer, { children: _jsx(CheckSlimIcon, { style: { color: globalToken?.bw0, width: 12, height: 12 } }) })) : null] }));
+});

package/es/components/atoms/MobileBrandingBar/styled.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const BoxImage: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BrandingName: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+export declare const BadgeContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/atoms/MobileBrandingBar/styled.js

@@ -0,0 +1,32 @@
+// Libraries
+import styled from 'styled-components';
+// Assets
+import BadgeBackground from '@antscorp/antsomi-ui/es/assets/images/background/badge-background.png';
+// Components
+import { Typography } from 'antd';
+// Constants
+import { globalToken } from '@antscorp/antsomi-ui/es/constants';
+export const BoxImage = styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 30px;
+  height: 30px;
+  padding: 5px;
+  border-radius: 50%;
+  background-color: ${globalToken?.bw0};
+`;
+export const BrandingName = styled(Typography.Text) `
+  font-weight: 600;
+  font-size: 14px;
+  color: #171717;
+`;
+export const BadgeContainer = styled.div `
+  background: url(${BadgeBackground}) no-repeat center center;
+  background-size: contain;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;

package/es/components/atoms/MobileFrameV3/MobileFrame.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { MobileBrandingBarProps } from '../MobileBrandingBar';
+export interface MobileFrameProps extends React.HtmlHTMLAttributes<HTMLDivElement> {
+    size?: 'large' | 'medium';
+    backgroundColor?: string;
+    branding: MobileBrandingBarProps;
+}
+export declare const MobileFrameV3: React.FC<React.PropsWithChildren<MobileFrameProps>>;

package/es/components/atoms/MobileFrameV3/MobileFrame.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Libraries
+import { useEffect, useRef, useState } from 'react';
+// Styled
+import MobileBrandingBar from '../MobileBrandingBar';
+import { Scrollbars } from '../Scrollbars';
+import { MobileWrapper, MobileInner, MobileBottomLine, ScreenContainer, BrandPosition, } from './styled';
+// Constants
+import { DEFAULT_DIMENSIONS } from './constants';
+const { MEDIUM, LARGE } = DEFAULT_DIMENSIONS;
+export const MobileFrameV3 = ({ children, ...restOfProps }) => {
+    const containerRef = useRef(null);
+    const screenRef = useRef(null);
+    const [dimensions, setDimensions] = useState({ top: 0, left: 0, width: 0, height: 0 });
+    const [brandDimensions, setBrandDimensions] = useState({ top: 0, left: 0 });
+    const { top: brandTop, left: brandLeft } = brandDimensions;
+    const { top, left, width, height } = dimensions;
+    useEffect(() => {
+        const updateDimensions = () => {
+            if (!containerRef.current)
+                return;
+            const isMedium = restOfProps.size === 'medium';
+            const offsetStatic = {
+                top: isMedium ? 71 : 85,
+                bottom: isMedium ? 60 : 70.2,
+                padding: isMedium ? 12.5 : 14.2,
+            };
+            const offsetBrandStatic = {
+                top: isMedium ? -28 : -34,
+                left: isMedium ? 40 : 50,
+            };
+            const bothPadding = offsetStatic.padding * 2;
+            const { width, height } = containerRef.current.getBoundingClientRect();
+            // Base dimensions
+            const maxWidth = isMedium ? MEDIUM.WIDTH : LARGE.WIDTH;
+            const maxHeight = isMedium ? MEDIUM.HEIGHT : LARGE.HEIGHT;
+            // Scaling factor
+            const scale = Math.min(width / maxWidth, height / maxHeight);
+            // Offsets
+            const offsetTop = offsetStatic.top * scale;
+            const offsetBottom = offsetStatic.bottom * scale;
+            const verticalAdjustment = (height - height * scale) / 2;
+            const horizontalAdjustment = offsetStatic.padding - offsetStatic.padding * scale;
+            setDimensions({
+                top: offsetTop + verticalAdjustment,
+                left: (offsetStatic.padding + horizontalAdjustment) * scale,
+                width: (maxWidth - (bothPadding + (bothPadding - bothPadding * scale))) * scale,
+                height: height - offsetTop - offsetBottom - 2 * verticalAdjustment,
+            });
+            setBrandDimensions({
+                top: offsetBrandStatic.top * scale,
+                left: offsetBrandStatic.left * scale,
+            });
+        };
+        const resizeObserver = new ResizeObserver(updateDimensions);
+        if (containerRef.current) {
+            resizeObserver.observe(containerRef.current);
+        }
+        // Cleanup observer on unmount
+        return () => resizeObserver.disconnect();
+    }, [restOfProps.size]);
+    return (_jsx(MobileWrapper, { ...restOfProps, children: _jsxs(MobileInner, { ref: containerRef, backgroundColor: restOfProps.backgroundColor, size: restOfProps.size, children: [_jsxs(ScreenContainer, { ref: screenRef, style: {
+                        top: `${top}px`,
+                        left: `${left}px`,
+                        width: `${width}px`,
+                        height: `${height}px`,
+                    }, children: [_jsx(BrandPosition, { style: {
+                                top: `${brandTop}px`,
+                                left: `${brandLeft}px`,
+                                maxWidth: `calc(${width}px - 120px)`,
+                            }, children: _jsx(MobileBrandingBar, { ...restOfProps.branding }) }), _jsx(Scrollbars, { autoHeight: true, autoHeightMax: height, children: children })] }), _jsx(MobileBottomLine, {})] }) }));
+};

package/es/components/atoms/MobileFrameV3/constants.d.ts

@@ -0,0 +1,10 @@
+export declare const DEFAULT_DIMENSIONS: {
+    MEDIUM: {
+        WIDTH: number;
+        HEIGHT: number;
+    };
+    LARGE: {
+        WIDTH: number;
+        HEIGHT: number;
+    };
+};

package/es/components/atoms/MobileFrameV3/constants.js

@@ -0,0 +1,10 @@
+export const DEFAULT_DIMENSIONS = {
+    MEDIUM: {
+        WIDTH: 290,
+        HEIGHT: 600,
+    },
+    LARGE: {
+        WIDTH: 336,
+        HEIGHT: 695,
+    },
+};

package/es/components/atoms/MobileFrameV3/index.d.ts

@@ -0,0 +1,2 @@
+export { MobileFrameV3 } from './MobileFrame';
+export type { MobileFrameProps } from './MobileFrame';

package/es/components/atoms/MobileFrameV3/index.js

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

package/es/components/atoms/MobileFrameV3/styled.d.ts

@@ -0,0 +1,6 @@
+import type { MobileFrameProps } from './MobileFrame';
+export declare const MobileWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MobileInner: import("styled-components").StyledComponent<"div", any, Pick<MobileFrameProps, "size" | "backgroundColor">, never>;
+export declare const ScreenContainer: import("styled-components").StyledComponent<"main", any, {}, never>;
+export declare const BrandPosition: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MobileBottomLine: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/atoms/MobileFrameV3/styled.js

@@ -0,0 +1,44 @@
+// Libraries
+import styled, { css } from 'styled-components';
+// Assets
+import MobileFrame from '@antscorp/antsomi-ui/es/assets/images/previews/iphonev2.png';
+// Constants
+import { DEFAULT_DIMENSIONS } from './constants';
+const { MEDIUM, LARGE } = DEFAULT_DIMENSIONS;
+export const MobileWrapper = styled.div `
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  background: url(${MobileFrame}) no-repeat center center;
+  background-size: contain;
+`;
+export const MobileInner = styled.div `
+  position: relative;
+  width: 100%;
+  max-width: ${props => (props.size === 'medium' ? MEDIUM.WIDTH : LARGE.WIDTH)}px;
+  height: ${props => (props.size === 'medium' ? MEDIUM.HEIGHT : LARGE.HEIGHT)}px;
+  overflow: hidden;
+
+  ${props => props.backgroundColor &&
+    css `
+      background-color: ${props.backgroundColor};
+    `}
+`;
+export const ScreenContainer = styled.main `
+  position: absolute;
+`;
+export const BrandPosition = styled.div `
+  position: absolute;
+`;
+export const MobileBottomLine = styled.div `
+  width: 145px;
+  height: 5px;
+  background-color: #000000;
+  border-radius: 20px;
+  position: absolute;
+  margin: auto;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
+`;

package/es/components/atoms/SelectAssociatedTag/SelectAssociatedTag.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Components
 import { StyledSpace } from './styled';
 import { Divider } from 'antd';
-import { Select } from '../../molecules';
+import { Select } from '../../molecules/Select';
 import SelectTag from './SelectTag';
 // Constants
 import { defaultProps } from './constants';

package/es/components/atoms/SelectAssociatedTag/constants.d.ts

@@ -4,7 +4,7 @@ export declare const DEFAULT_TAGS: {
     readonly md5: "md5";
     readonly sha_256: "sha_256";
     readonly MD5: "MD5";
-    readonly SHA_265: "SHA_265";
+    readonly SHA_256: "SHA_256";
 };
 export declare const DEFAULT_TAGS_OPTS: Record<string, TagItem>;
 export declare const DEFAULT_TAGS_LIST: TagItem[];

package/es/components/atoms/SelectAssociatedTag/constants.js

@@ -7,7 +7,7 @@ export const DEFAULT_TAGS = {
     md5: 'md5',
     sha_256: 'sha_256',
     MD5: 'MD5',
-    SHA_265: 'SHA_265',
+    SHA_256: 'SHA_256',
 };
 export const DEFAULT_TAGS_OPTS = {
     RAW: { label: 'RAW', value: DEFAULT_TAGS.RAW, color: globalToken?.bw0, background: '#4CB4C9' },
@@ -20,8 +20,8 @@ export const DEFAULT_TAGS_OPTS = {
     },
     MD5: { label: 'MD5', value: DEFAULT_TAGS.MD5, color: globalToken?.bw0, background: '#3B8FDE' },
     SHA_265: {
-        label: 'SHA265',
-        value: DEFAULT_TAGS.SHA_265,
+        label: 'SHA-256',
+        value: DEFAULT_TAGS.SHA_256,
         color: globalToken?.bw0,
         background: '#12B800',
     },
@@ -35,7 +35,7 @@ export const defaultProps = {
     },
     selected: {
         tag: DEFAULT_TAGS.RAW,
-        value: DEFAULT_TAGS.SHA_265,
+        value: DEFAULT_TAGS.SHA_256,
     },
     options: DEFAULT_TAGS_LIST,
     onSelect: () => { },

package/es/components/atoms/SlideBar/SlideBar.d.ts

@@ -19,6 +19,10 @@ export type SlideBarState = {
     notiUpdateScroll: number;
 };
 export interface SlideBarProps {
+    size?: 'small' | 'medium';
+    isMore?: boolean;
+    borderless?: boolean;
+    badgeNumber?: boolean;
     isViewMode?: boolean;
     isShowLabelSequentially?: boolean;
     isShowAdd?: boolean;