@antscorp/antsomi-ui 2.0.7 → 2.0.8-3.text-editor-beta.1

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

@@ -1,4 +1,3 @@
-var _a, _b, _c, _d;
 // Libraries
 import styled from 'styled-components';
 // Components
@@ -7,20 +6,22 @@ import { Radio as AntdRadio } from 'antd';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const Radio = styled(AntdRadio) `
   font-family: 'Roboto';
-  color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorTextBase};
-  font-size: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.fontSize}px;
+  color: ${THEME.token?.colorTextBase};
+  font-size: ${THEME.token?.fontSize}px;
 
   .antsomi-radio {
     .antsomi-radio-inner {
       border-width: 2px;
-      border-color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorPrimary};
+      border-color: ${THEME.token?.colorPrimary};
 
       &::after {
         flex-shrink: 0;
-        background-color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorPrimary};
+        background-color: ${THEME.token?.colorPrimary};
       }
     }
   }
 `;
-export const RadioButton = styled(AntdRadio.Button) ``;
-export const RadioGroupSub = styled(AntdRadio.Group) ``;
+export const RadioButton = AntdRadio.Button;
+export const RadioGroupSub = AntdRadio.Group;
+// export const RadioButton = styled(AntdRadio.Button)``;
+// export const RadioGroupSub = styled(AntdRadio.Group)``;

package/es/components/atoms/RateV2/RateV2.js

@@ -1,7 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
 import StarImage from '@antscorp/antsomi-ui/es/assets/images/stars_slider.png';
 const STAR_WIDTH = 30;
-const parseNumDecimals = (input, decimals) => +Number.parseFloat(input === null || input === void 0 ? void 0 : input.toString()).toFixed(decimals);
+const parseNumDecimals = (input, decimals) => +Number.parseFloat(input?.toString()).toFixed(decimals);
 const roundHalf = (num) => {
     const multiplier = 1 / 0.5;
     return Math.round(num * multiplier) / multiplier;
@@ -48,26 +49,24 @@ export const RateV2 = ({ count = 5, className, defaultValue = 0, value, type = '
             setFillWidth(width);
         }
     }, [value]);
-    return (React.createElement("div", { className: `antsomi-rate-continuous${className ? ` ${className}` : ''}`, style: {
+    return (_jsxs("div", { className: `antsomi-rate-continuous${className ? ` ${className}` : ''}`, style: {
             position: 'relative',
             width: `${fullWidth}px`,
             backgroundPosition: '-27px',
             height: '28px',
-        }, onMouseMove: handleMouseMove, onMouseLeave: () => setFillWidth(currWidth || 0), onClick: handleClick },
-        React.createElement("div", { className: "custom-rate custom-rate--fill", style: {
-                position: 'absolute',
-                background: `url(${StarImage}) 0px 0px`,
-                width: `${fillWidth}px`,
-                height: '26px',
-                zIndex: 1,
-            } }),
-        React.createElement("div", { className: "custom-rate custom-rate--empty", style: {
-                position: 'absolute',
-                top: '0px',
-                left: '0px',
-                backgroundImage: 'none',
-                background: `transparent url(${StarImage}) 0px -26px`,
-                width: `${fullWidth}px`,
-                height: '26px',
-            } })));
+        }, onMouseMove: handleMouseMove, onMouseLeave: () => setFillWidth(currWidth || 0), onClick: handleClick, children: [_jsx("div", { className: "custom-rate custom-rate--fill", style: {
+                    position: 'absolute',
+                    background: `url(${StarImage}) 0px 0px`,
+                    width: `${fillWidth}px`,
+                    height: '26px',
+                    zIndex: 1,
+                } }), _jsx("div", { className: "custom-rate custom-rate--empty", style: {
+                    position: 'absolute',
+                    top: '0px',
+                    left: '0px',
+                    backgroundImage: 'none',
+                    background: `transparent url(${StarImage}) 0px -26px`,
+                    width: `${fullWidth}px`,
+                    height: '26px',
+                } })] }));
 };

package/es/components/atoms/ReactIframe/ReactIframe.js

@@ -1,16 +1,6 @@
-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 { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // Styled
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 import Frame from 'react-frame-component';
 // Styled
 import { useForceUpdate } from '@antscorp/antsomi-ui/es/hooks';
@@ -21,7 +11,7 @@ const bodyStyle = `
   }
 `;
 export const ReactIframe = props => {
-    const { head, style } = props, restOfProps = __rest(props, ["head", "style"]);
+    const { head, style, ...restOfProps } = props;
     const forceUpdate = useForceUpdate();
     // Refs
     const frameRef = useRef();
@@ -33,10 +23,7 @@ export const ReactIframe = props => {
             forceUpdate();
         }, 500);
     }, [forceUpdate]);
-    return (React.createElement(Frame, Object.assign({}, restOfProps, { style: Object.assign({ border: 'none', width: '100%', height: '100%' }, style), ref: ref => {
+    return (_jsx(Frame, { ...restOfProps, style: { border: 'none', width: '100%', height: '100%', ...style }, ref: ref => {
             frameRef.current = ref;
-        }, head: React.createElement(React.Fragment, null,
-            React.createElement("style", null, documentHead === null || documentHead === void 0 ? void 0 : documentHead.innerHTML),
-            React.createElement("style", null, bodyStyle),
-            head) })));
+        }, head: _jsxs(_Fragment, { children: [_jsx("style", { children: documentHead?.innerHTML }), _jsx("style", { children: bodyStyle }), head] }) }));
 };

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

@@ -1,4 +1,3 @@
-var _a;
 // Libraries
 import styled from 'styled-components';
 // Constants
@@ -7,7 +6,7 @@ import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const StyledIframeContent = styled.div `
   width: 100%;
   padding: 20px;
-  border: 1px solid ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw3};
+  border: 1px solid ${THEME.token?.bw3};
   box-sizing: border-box;
 
   body {

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

@@ -1,25 +1,12 @@
-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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import React, { memo } from 'react';
+import { memo } from 'react';
 // Atoms
 import { Text } from '../Text';
 // Styled
 import { StyledRequired } from './styled';
 export const RequiredLabel = memo(props => {
     // Props
-    const { children, isReverseMask = false } = props, restProps = __rest(props, ["children", "isReverseMask"]);
-    return (React.createElement(Text, Object.assign({}, restProps),
-        !isReverseMask && React.createElement(StyledRequired, null, "*"),
-        children,
-        isReverseMask && (React.createElement(StyledRequired, { style: { marginLeft: 4, marginRight: 0 } }, "*"))));
+    const { children, isReverseMask = false, ...restProps } = props;
+    return (_jsxs(Text, { ...restProps, children: [!isReverseMask && _jsx(StyledRequired, { children: "*" }), children, isReverseMask && (_jsx(StyledRequired, { style: { marginLeft: 4, marginRight: 0 }, children: "*" }))] }));
 });

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

@@ -1,9 +1,8 @@
-var _a;
 // Libraries
 import styled from 'styled-components';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const StyledRequired = styled.span `
-  color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.red6};
+  color: ${THEME.token?.red6};
   margin-right: 4px;
 `;

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

@@ -1,22 +1,11 @@
-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;
-};
-var _a;
+import { jsx as _jsx } from "react/jsx-runtime";
 /* eslint-disable @typescript-eslint/no-unused-expressions */
-import React, { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import styled from 'styled-components';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 export const ScrollBox = props => {
-    const { children, height, maxHeight, isPadding, loadMore, style } = props, restOf = __rest(props, ["children", "height", "maxHeight", "isPadding", "loadMore", "style"]);
+    const { children, height, maxHeight, isPadding, loadMore, style, ...restOf } = props;
     const wrapperRef = useRef(null);
     const [isScroll, setIsScroll] = useState(false);
     useEffect(() => {
@@ -38,12 +27,18 @@ export const ScrollBox = props => {
     };
     return (
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
-    React.createElement(Wrapper, Object.assign({ ref: wrapperRef }, restOf, { style: Object.assign(Object.assign(Object.assign(Object.assign({}, style), (height && { height })), (maxHeight && { maxHeight })), { paddingRight: isScroll && isPadding ? 8 : 0 }), onScroll: handleScroll }), children));
+    _jsx(Wrapper, { ref: wrapperRef, ...restOf,
+        style: {
+            ...style,
+            ...(height && { height }),
+            ...(maxHeight && { maxHeight }),
+            paddingRight: isScroll && isPadding ? 8 : 0,
+        }, onScroll: handleScroll, children: children }));
 };
 const Wrapper = styled.div `
   height: 100%;
   width: 100%;
-  background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw0};
+  background-color: ${THEME.token?.bw0};
   overflow: auto;
 `;
 ScrollBox.defaultProps = {

package/es/components/atoms/Scrollbars/Scrollbars.js

@@ -1,25 +1,15 @@
-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 { jsx as _jsx } from "react/jsx-runtime";
 import { Scrollbars as CustomScrollbars, } from 'react-custom-scrollbars';
 import { cloneDeep } from 'lodash';
 // Libraries
-import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import { forwardRef, useImperativeHandle, useRef } from 'react';
 // Styled
 import { HorizontalTrack, ThumbBar, VerticalTrack } from './styled';
 const THUMB_SIZE = 4;
 const MARGIN = 3;
 export const Scrollbars = forwardRef((props, refProp) => {
     // Props
-    const { autoHide = true, autoHeightMax = 0, className } = props, restProps = __rest(props, ["autoHide", "autoHeightMax", "className"]);
+    const { autoHide = true, autoHeightMax = 0, className, ...restProps } = props;
     // Refs
     const ref = useRef(null);
     useImperativeHandle(refProp, () => ref.current, []);
@@ -58,13 +48,7 @@ export const Scrollbars = forwardRef((props, refProp) => {
         ref.current.trackHorizontal.style.visibility =
             scrollWidth <= clientWidth ? 'hidden' : 'visible';
     };
-    return (React.createElement(CustomScrollbars, Object.assign({ className: `custom-scrollbars ${className || ''}`, autoHide: autoHide, autoHeightMax: autoHeightMax, renderThumbVertical: props => React.createElement(ThumbBar, Object.assign({ className: "thumb-vertical" }, props)), renderThumbHorizontal: props => React.createElement(ThumbBar, Object.assign({ className: "thumb-horizontal" }, props)), renderTrackVertical: (_a) => {
-            var { style } = _a, restOfProps = __rest(_a, ["style"]);
-            return (React.createElement(VerticalTrack, Object.assign({ className: "scrollbar-track" }, restOfProps, { style: Object.assign(Object.assign({}, style), { display: 'block' }) })));
-        }, renderTrackHorizontal: (_a) => {
-            var { style } = _a, restOfProps = __rest(_a, ["style"]);
-            return (React.createElement(HorizontalTrack, Object.assign({ className: "scrollbar-track" }, restOfProps, { style: Object.assign(Object.assign({}, style), { display: 'block' }) })));
-        }, renderView: props => {
+    return (_jsx(CustomScrollbars, { className: `custom-scrollbars ${className || ''}`, autoHide: autoHide, autoHeightMax: autoHeightMax, renderThumbVertical: props => _jsx(ThumbBar, { className: "thumb-vertical", ...props }), renderThumbHorizontal: props => _jsx(ThumbBar, { className: "thumb-horizontal", ...props }), renderTrackVertical: ({ style, ...restOfProps }) => (_jsx(VerticalTrack, { className: "scrollbar-track", ...restOfProps, style: { ...style, display: 'block' } })), renderTrackHorizontal: ({ style, ...restOfProps }) => (_jsx(HorizontalTrack, { className: "scrollbar-track", ...restOfProps, style: { ...style, display: 'block' } })), renderView: props => {
             const { style } = props || {};
             const newStyle = cloneDeep(style);
             // Adjust the margins to account for the custom scrollbar size
@@ -77,6 +61,6 @@ export const Scrollbars = forwardRef((props, refProp) => {
             //   newStyle.maxHeight = parseInt(`${autoHeightMax}`) + THUMB_SIZE;
             // }
             // Return a div element with the adjusted styles and original props, applying a custom class for styling
-            return React.createElement("div", Object.assign({ className: "scrollbar-view" }, props, { style: newStyle }));
-        }, onUpdate: onUpdate, hideTracksWhenNotNeeded: true }, restProps, { ref: ref })));
+            return _jsx("div", { className: "scrollbar-view", ...props, style: newStyle });
+        }, onUpdate: onUpdate, hideTracksWhenNotNeeded: true, ...restProps, ref: ref }));
 });

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

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 export const ScrollbarsWrapper = styled.div ``;
 export const ThumbBar = styled.div `
-  background: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.gray5};
+  background: ${globalToken?.gray5};
   border-radius: 4px;
 `;
 export const VerticalTrack = styled.div `

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;

package/es/components/atoms/SlideBar/SlideBar.js

@@ -1,5 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import React, { useRef, useEffect, useState, useMemo } from 'react';
+import { useRef, useEffect, useState, useMemo } from 'react';
+import classNames from 'classnames';
 import _ from 'lodash';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 // Components
@@ -10,19 +12,24 @@ import { ContainerSlideBar, MainContent, MenuItem, MenuList, SlideItem, SliderWr
 import { PlusCircleFilled } from '@ant-design/icons';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-import { BTN_ADD_SIZE, slideActionType, WIDTH_SLIDE_ITEM } from './constants';
+import { slideActionType, WIDTH_SLIDE_ITEM } from './constants';
+import { EditFilledIcon } from '../../icons';
 // Utils
 import { getObjectPropSafely, handleError } from '@antscorp/antsomi-ui/es/utils';
+import { getOffsetSizeAdd } from './utils';
 // Locales
 import i18nInstance from '@antscorp/antsomi-ui/es/locales/i18n';
 import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
-const getItemStyle = (isDragging, draggableStyle) => (Object.assign({ 
+const getItemStyle = (isDragging, draggableStyle) => ({
     // some basic styles to make the items look a bit nicer
-    userSelect: 'none', borderLeft: isDragging ? '1px solid #e0e0e0' : 'none' }, draggableStyle));
+    userSelect: 'none',
+    borderLeft: isDragging ? '1px solid #e0e0e0' : 'none',
+    // styles we need to apply on draggables
+    ...draggableStyle,
+});
 const PATH = 'src/components/atoms/SlideBar/SlideBar.tsx';
 export const SlideBar = props => {
-    var _a, _b, _c, _d;
-    const { isViewMode, isShowLabelSequentially, isDragDisabled, isShowAdd, disabled, prefix, options, activeId, limit, errors, callback, } = props;
+    const { size, borderless, isMore, badgeNumber, isViewMode, isShowLabelSequentially, isDragDisabled, isShowAdd, disabled, prefix, options, activeId, limit, errors, callback, } = props;
     // States
     const [state, setState] = useState({
         cacheInfoClicked: {
@@ -36,14 +43,17 @@ export const SlideBar = props => {
     });
     // Refs
     const wrapperOverflowRef = useRef(null);
-    const disabledAdd = useMemo(() => disabled || isViewMode || (limit && options.length >= (limit === null || limit === void 0 ? void 0 : limit.max)), [disabled, isViewMode, limit, options.length]);
-    const disabledDuplicate = useMemo(() => (limit && options.length >= (limit === null || limit === void 0 ? void 0 : limit.max)) || isViewMode || disabled, [disabled, isViewMode, limit, options.length]);
-    const disabledDelete = useMemo(() => (limit && options.length <= (limit === null || limit === void 0 ? void 0 : limit.min)) || isViewMode || disabled, [disabled, isViewMode, limit, options.length]);
+    const disabledAdd = useMemo(() => disabled || isViewMode || (limit && options.length >= limit?.max), [disabled, isViewMode, limit, options.length]);
+    const disabledDuplicate = useMemo(() => (limit && options.length >= limit?.max) || isViewMode || disabled, [disabled, isViewMode, limit, options.length]);
+    const disabledDelete = useMemo(() => (limit && options.length <= limit?.min) || isViewMode || disabled, [disabled, isViewMode, limit, options.length]);
     // Locales
     const { t } = i18nInstance;
     const handleClick = (event, slideInfo) => {
         event.stopPropagation();
-        setState(prev => (Object.assign(Object.assign({}, prev), { cacheInfoClicked: slideInfo })));
+        setState(prev => ({
+            ...prev,
+            cacheInfoClicked: slideInfo,
+        }));
     };
     const reorder = (list, startIndex, endIndex) => {
         const result = Array.from(list);
@@ -95,7 +105,10 @@ export const SlideBar = props => {
         }
     };
     const handleClosePopover = () => {
-        setState(prev => (Object.assign(Object.assign({}, prev), { openPopover: {} })));
+        setState(prev => ({
+            ...prev,
+            openPopover: {},
+        }));
     };
     const handleDuplicateSlide = (slideInfo) => {
         try {
@@ -152,7 +165,10 @@ export const SlideBar = props => {
             else if (type === 'NEXT') {
                 wrapperOverflowRef.current.scrollLeft += WIDTH_SLIDE_ITEM;
             }
-            setState(prev => (Object.assign(Object.assign({}, prev), { notiUpdateScroll: prev.notiUpdateScroll + 1 })));
+            setState(prev => ({
+                ...prev,
+                notiUpdateScroll: prev.notiUpdateScroll + 1,
+            }));
         }
         catch (error) {
             handleError(error, {
@@ -184,12 +200,18 @@ export const SlideBar = props => {
         }
     };
     const handleOpenChange = (newOpen, itemId) => {
-        setState(prev => (Object.assign(Object.assign({}, prev), { openPopover: {
+        setState(prev => ({
+            ...prev,
+            openPopover: {
                 [itemId]: newOpen,
-            } })));
+            },
+        }));
     };
     useEffect(() => () => {
-        setState(prev => (Object.assign(Object.assign({}, prev), { cacheInfoClicked: { label: '', value: '' } })));
+        setState(prev => ({
+            ...prev,
+            cacheInfoClicked: { label: '', value: '' },
+        }));
     }, []);
     // Calculator center selected template
     useEffect(() => {
@@ -208,74 +230,75 @@ export const SlideBar = props => {
     }, [activeId]);
     useEffect(() => {
         if (!_.isEmpty(wrapperOverflowRef.current)) {
-            const isDisabledPrevTmp = getObjectPropSafely(() => { var _a; return ((_a = wrapperOverflowRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) === 0; });
+            const isDisabledPrevTmp = getObjectPropSafely(() => wrapperOverflowRef.current?.scrollLeft === 0);
             const isDisabledNextTmp = getObjectPropSafely(() => {
                 const { scrollLeft = 0, offsetWidth = 0, scrollWidth = 0, } = wrapperOverflowRef.current || {};
                 return offsetWidth === scrollWidth || scrollWidth <= Math.ceil(scrollLeft) + offsetWidth;
             });
-            setState(prev => (Object.assign(Object.assign({}, prev), { disabledPrev: isDisabledPrevTmp, disabledNext: isDisabledNextTmp })));
+            setState(prev => ({
+                ...prev,
+                disabledPrev: isDisabledPrevTmp,
+                disabledNext: isDisabledNextTmp,
+            }));
         }
     }, [options, state.notiUpdateScroll]);
     const renderMainContent = () => options.map((item, index) => {
+        const isActive = activeId === item.value;
         let { label } = _.cloneDeep(item);
         if (isShowLabelSequentially) {
             label = `${prefix} ${index + 1}`;
         }
-        return (React.createElement(Draggable, { key: item.value, isDragDisabled: isViewMode || disabled || isDragDisabled, draggableId: item.value, index: index }, (providedDraggable, snapshotDraggable) => {
-            var _a, _b;
-            return (React.createElement(SlideItem, Object.assign({ id: `template-slide-${item.value}`, isActive: activeId === item.value, className: "slide-item", ref: providedDraggable.innerRef }, providedDraggable.draggableProps, providedDraggable.dragHandleProps, { isSlideError: Array.isArray(errors) && errors.includes(item.value), style: getItemStyle(snapshotDraggable.isDragging, providedDraggable.draggableProps.style), onClick: (e) => {
+        if (badgeNumber) {
+            label = [isActive ? prefix : undefined, index + 1].join(' ');
+        }
+        return (_jsx(Draggable, { isDragDisabled: isViewMode || disabled || isDragDisabled, draggableId: item.value, index: index, children: (providedDraggable, snapshotDraggable) => (_jsxs(SlideItem, { id: `template-slide-${item.value}`, isActive: isActive, className: classNames('slide-item', {
+                    'slide-item--badge-number': badgeNumber,
+                    'slide-item--active': isActive,
+                }), ref: providedDraggable.innerRef, ...providedDraggable.draggableProps, ...providedDraggable.dragHandleProps, size: size, isSlideError: Array.isArray(errors) && errors.includes(item.value), style: getItemStyle(snapshotDraggable.isDragging, providedDraggable.draggableProps.style), onClick: (e) => {
                     e.stopPropagation();
                     handleActiveSlide(e, item);
-                } }),
-                React.createElement(SlideText, { isActive: activeId === item.value }, label),
-                !isViewMode && (React.createElement(Popover, { placement: "bottomLeft", trigger: "click", open: state.openPopover[item.value], onOpenChange: newOpen => handleOpenChange(newOpen, item.value), content: React.createElement(MenuList, null,
-                        React.createElement(WrapperDisable, { disabled: disabledDuplicate },
-                            React.createElement(MenuItem, { isDisabled: disabledDuplicate, onClick: (e) => {
-                                    e.stopPropagation();
-                                    if (!disabledDuplicate) {
-                                        handleDuplicateSlide(state.cacheInfoClicked);
-                                    }
-                                } }, t(translations.duplicate.title))),
-                        React.createElement(WrapperDisable, { disabled: disabledDelete },
-                            React.createElement(MenuItem, { isDisabled: disabledDelete, onClick: (e) => {
-                                    e.stopPropagation();
-                                    if (!disabledDelete) {
-                                        handleDeleteSlide(state.cacheInfoClicked);
-                                    }
-                                } }, t(translations.delete.title)))), arrow: false },
-                    React.createElement(Icon, { type: "icon-ants-three-dot-vertical", color: activeId === item.value ? (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary : (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorText, size: "20px", onClick: (event) => handleClick(event, item), disabled: false })))));
-        }));
+                }, children: [_jsxs(SlideText, { size: size, isActive: isActive, className: classNames('slide-item__text', {
+                            'slide-item__text--circle': badgeNumber && !isActive,
+                            'slide-item__text--active': isActive,
+                        }), children: [badgeNumber && isActive ? (_jsx("span", { className: "slide-item__text--icon", children: _jsx(EditFilledIcon, { size: 16 }) })) : null, label] }), !isViewMode && isMore && (_jsx(Popover, { placement: "bottomLeft", trigger: "click", open: state.openPopover[item.value], onOpenChange: newOpen => handleOpenChange(newOpen, item.value), content: _jsxs(MenuList, { children: [_jsx(WrapperDisable, { disabled: disabledDuplicate, children: _jsx(MenuItem, { isDisabled: disabledDuplicate, onClick: (e) => {
+                                            e.stopPropagation();
+                                            if (!disabledDuplicate) {
+                                                handleDuplicateSlide(state.cacheInfoClicked);
+                                            }
+                                        }, children: t(translations.duplicate.title) }) }), _jsx(WrapperDisable, { disabled: disabledDelete, children: _jsx(MenuItem, { isDisabled: disabledDelete, onClick: (e) => {
+                                            e.stopPropagation();
+                                            if (!disabledDelete) {
+                                                handleDeleteSlide(state.cacheInfoClicked);
+                                            }
+                                        }, children: t(translations.delete.title) }) })] }), arrow: false, children: _jsx(Icon, { type: "icon-ants-three-dot-vertical", color: activeId === item.value ? THEME.token?.colorPrimary : THEME.token?.colorText, size: "20px", onClick: (event) => handleClick(event, item), disabled: false }) }))] })) }, item.value));
     });
-    const renderSliderDragDrop = () => (React.createElement(WrapperOverflow, { ref: wrapperOverflowRef, id: "wrapper-overflow" },
-        React.createElement(DragDropContext, { onDragEnd: handleDragEnd },
-            React.createElement(Droppable, { droppableId: "droppable", direction: "horizontal" }, (providedDroppable, _snapshotDroppable) => (React.createElement(MainContent, Object.assign({ ref: providedDroppable.innerRef }, providedDroppable.droppableProps), renderMainContent()))))));
-    return (React.createElement(ContainerSlideBar, null,
-        React.createElement(SliderWrapper, { isViewMode: isViewMode },
-            React.createElement(Icon, { type: "icon-ants-angle-left", style: { fontSize: '16px', cursor: 'pointer', color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorPrimary }, className: "btn-arrow-left btn-action-slide-template", disabled: state.disabledPrev, onClick: (e) => {
+    const renderSliderDragDrop = () => (_jsx(WrapperOverflow, { ref: wrapperOverflowRef, id: "wrapper-overflow", children: _jsx(DragDropContext, { onDragEnd: handleDragEnd, children: _jsx(Droppable, { droppableId: "droppable", direction: "horizontal", children: (providedDroppable, _snapshotDroppable) => (_jsx(MainContent, { ref: providedDroppable.innerRef, ...providedDroppable.droppableProps, children: renderMainContent() })) }) }) }));
+    return (_jsxs(ContainerSlideBar, { children: [_jsxs(SliderWrapper, { size: size, isViewMode: isViewMode, className: classNames({ 'slider-wrapper--borderless': borderless }), children: [_jsx(Icon, { type: "icon-ants-angle-left", style: { fontSize: '16px', cursor: 'pointer', color: THEME.token?.colorPrimary }, className: "btn-arrow-left btn-action-slide-template", disabled: state.disabledPrev, onClick: (e) => {
+                            e.stopPropagation();
+                            handleChangeScrollDirection('PREVIOUS');
+                        } }), renderSliderDragDrop(), _jsx(Icon, { type: "icon-ants-angle-right", style: { fontSize: '16px', cursor: 'pointer', color: THEME.token?.colorPrimary }, className: "btn-arrow-right btn-action-slide-template", disabled: state.disabledNext, onClick: (e) => {
+                            e.stopPropagation();
+                            handleChangeScrollDirection('NEXT');
+                        } })] }), isShowAdd && (_jsx(PlusCircleFilled, { style: {
+                    fontSize: `${getOffsetSizeAdd(size)}px`,
+                    cursor: disabledAdd ? 'not-allowed' : 'pointer',
+                    color: disabledAdd ? THEME.token?.colorTextDisabled : THEME.token?.colorPrimary,
+                }, 
+                // disabled={disabledAdd}
+                onClick: (e) => {
                     e.stopPropagation();
-                    handleChangeScrollDirection('PREVIOUS');
-                } }),
-            renderSliderDragDrop(),
-            React.createElement(Icon, { type: "icon-ants-angle-right", style: { fontSize: '16px', cursor: 'pointer', color: (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.colorPrimary }, className: "btn-arrow-right btn-action-slide-template", disabled: state.disabledNext, onClick: (e) => {
-                    e.stopPropagation();
-                    handleChangeScrollDirection('NEXT');
-                } })),
-        isShowAdd && (React.createElement(PlusCircleFilled, { style: {
-                fontSize: `${BTN_ADD_SIZE}px`,
-                cursor: disabledAdd ? 'not-allowed' : 'pointer',
-                color: disabledAdd ? (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorTextDisabled : (_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorPrimary,
-            }, 
-            // disabled={disabledAdd}
-            onClick: (e) => {
-                e.stopPropagation();
-                if (!disabledAdd) {
-                    handleAddSlide();
-                }
-            } }))));
+                    if (!disabledAdd) {
+                        handleAddSlide();
+                    }
+                } }))] }));
 };
 SlideBar.defaultProps = {
     isViewMode: false,
     disabled: false,
+    size: 'small',
+    borderless: false,
+    isMore: true,
+    badgeNumber: false,
     isShowLabelSequentially: true,
     isShowAdd: true,
     isDragDisabled: false,

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

@@ -1,5 +1,7 @@
 export declare const OFFSET_SIZE_SLIDE = 32;
+export declare const OFFSET_SIZE_SLIDE_MD = 40;
 export declare const BTN_ADD_SIZE = 32;
+export declare const BTN_ADD_SIZE_MD = 40;
 export declare const WIDTH_SLIDE_ITEM = 105;
 export declare const slideActionType: {
     readonly ADD: "ADD_SLIDE";

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

@@ -1,5 +1,7 @@
 export const OFFSET_SIZE_SLIDE = 32;
+export const OFFSET_SIZE_SLIDE_MD = 40;
 export const BTN_ADD_SIZE = 32;
+export const BTN_ADD_SIZE_MD = 40;
 export const WIDTH_SLIDE_ITEM = 105;
 export const slideActionType = {
     ADD: 'ADD_SLIDE',

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

@@ -1,14 +1,18 @@
+import type { SlideBarProps } from './SlideBar';
 export declare const SliderWrapper: import("styled-components").StyledComponent<"div", any, {
     isViewMode?: boolean | undefined;
+    size?: SlideBarProps['size'];
 }, never>;
 export declare const WrapperOverflow: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const MainContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SlideItem: import("styled-components").StyledComponent<"div", any, {
     isActive?: boolean | undefined;
     isSlideError?: boolean | undefined;
+    size?: SlideBarProps['size'];
 }, never>;
 export declare const SlideText: import("styled-components").StyledComponent<"div", any, {
     isActive?: boolean | undefined;
+    size?: SlideBarProps['size'];
 }, never>;
 export declare const MenuList: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const MenuItem: import("styled-components").StyledComponent<"div", any, {