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

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
 import { useRef, useEffect, useState, useMemo } from 'react';
+import classNames from 'classnames';
 import _ from 'lodash';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 // Components
@@ -11,9 +12,11 @@ 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';
@@ -26,7 +29,7 @@ const getItemStyle = (isDragging, draggableStyle) => ({
 });
 const PATH = 'src/components/atoms/SlideBar/SlideBar.tsx';
 export const SlideBar = props => {
-    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: {
@@ -240,14 +243,24 @@ export const SlideBar = props => {
         }
     }, [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 (_jsx(Draggable, { isDragDisabled: isViewMode || disabled || isDragDisabled, draggableId: item.value, index: index, children: (providedDraggable, snapshotDraggable) => (_jsxs(SlideItem, { 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);
-                }, children: [_jsx(SlideText, { isActive: activeId === item.value, children: label }), !isViewMode && (_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) => {
+                }, 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);
@@ -260,14 +273,14 @@ export const SlideBar = props => {
                                         }, 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: 20, onClick: (event) => handleClick(event, item), disabled: false }) }))] })) }, item.value));
     });
     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, { isViewMode: isViewMode, 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) => {
+    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: `${BTN_ADD_SIZE}px`,
+                    fontSize: `${getOffsetSizeAdd(size)}px`,
                     cursor: disabledAdd ? 'not-allowed' : 'pointer',
                     color: disabledAdd ? THEME.token?.colorTextDisabled : THEME.token?.colorPrimary,
                 }, onClick: (e) => {
@@ -280,6 +293,10 @@ export const SlideBar = props => {
 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, {

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

@@ -3,7 +3,9 @@
 import styled, { css } from 'styled-components';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-import { BTN_ADD_SIZE, OFFSET_SIZE_SLIDE, WIDTH_SLIDE_ITEM } from './constants';
+import { WIDTH_SLIDE_ITEM } from './constants';
+// Utils
+import { getOffsetSize, getOffsetSizeAdd } from './utils';
 export const SliderWrapper = styled.div `
   position: relative;
   display: flex;
@@ -12,14 +14,16 @@ export const SliderWrapper = styled.div `
   border: 1px solid ${THEME.token?.accent1};
   box-sizing: border-box;
   // max-width: ${props => (props.isViewMode ? '100%' : 'calc(100% - 40px)')};
-  width: calc(100% - ${BTN_ADD_SIZE}px - ${OFFSET_SIZE_SLIDE * 2}px);
+  width: calc(
+    100% - ${({ size }) => getOffsetSizeAdd(size)}px - ${({ size }) => getOffsetSize(size) * 2}px
+  );
   flex: 1;
-  height: ${OFFSET_SIZE_SLIDE}px;
-  padding: 0px ${OFFSET_SIZE_SLIDE}px;
+  height: ${({ size }) => getOffsetSize(size)}px;
+  padding: 0px ${({ size }) => getOffsetSize(size)}px;
 
   .btn-action-slide-template {
-    width: ${OFFSET_SIZE_SLIDE}px !important;
-    height: ${OFFSET_SIZE_SLIDE - 2}px !important;
+    width: ${({ size }) => getOffsetSize(size)}px !important;
+    height: ${({ size }) => getOffsetSize(size) - 2}px !important;
     box-sizing: border-box;
     display: flex;
     align-items: center;
@@ -39,6 +43,84 @@ export const SliderWrapper = styled.div `
       border-left: 1px solid ${THEME.token?.accent1};
     }
   }
+
+  &.slider-wrapper--borderless {
+    border-radius: unset;
+    box-shadow: 0px 3px 3px 0px rgba(0, 46, 89, 0.1);
+    border: none;
+    border-bottom: 1px solid ${THEME.token?.bw4};
+
+    #wrapper-overflow {
+      height: ${({ size }) => getOffsetSize(size) - 1}px;
+      background-color: ${THEME.token?.bw2};
+    }
+
+    .slide-item {
+      background-color: transparent;
+      border-top: none;
+      border-right-color: ${THEME.token?.bw3};
+
+      &.slide-item--active {
+        background-color: ${THEME.token?.bw0};
+      }
+
+      &.slide-item--badge-number {
+        justify-content: center;
+        padding: 0px;
+        width: ${({ size }) => getOffsetSize(size)}px;
+        height: ${({ size }) => getOffsetSize(size) - 1}px;
+        border-bottom: none;
+
+        &.slide-item--active {
+          width: 90px;
+        }
+
+        .slide-item__text {
+          &--active {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+            color: ${THEME.token?.colorText};
+          }
+
+          &--circle {
+            font-size: 14px;
+            font-weight: 700;
+            color: ${THEME.token?.colorPrimary};
+            line-height: 22px;
+            text-align: center;
+            display: inline-block;
+            background-color: ${THEME.token?.bw0};
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            border: 1px solid ${THEME.token?.blue1};
+          }
+
+          &--icon {
+            color: ${THEME.token?.bw0};
+            background: ${THEME.token?.colorPrimary};
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+          }
+        }
+      }
+    }
+
+    .btn-action-slide-template {
+      height: ${({ size }) => getOffsetSize(size)}px !important;
+    }
+
+    .btn-action-slide-template.btn-arrow-left,
+    .btn-action-slide-template.btn-arrow-right {
+      border-right-color: ${THEME.token?.bw4};
+    }
+  }
 `;
 export const WrapperOverflow = styled.div `
   overflow-x: auto;
@@ -69,7 +151,7 @@ export const SlideItem = styled.div `
 
   border-top: 1px solid ${THEME.token?.accent1};
   border-bottom: 1px solid ${THEME.token?.accent1};
-  height: ${OFFSET_SIZE_SLIDE}px;
+  height: ${({ size }) => getOffsetSize(size)}px;
   width: ${WIDTH_SLIDE_ITEM}px;
   padding: 0px 10px;
   cursor: pointer;
@@ -87,7 +169,7 @@ export const SlideItem = styled.div `
 export const SlideText = styled.div `
   font-size: ${THEME.token?.fontSize}px;
   font-weight: 400;
-  line-height: ${OFFSET_SIZE_SLIDE}px;
+  line-height: ${({ size }) => getOffsetSize(size)}px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;

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

@@ -0,0 +1,3 @@
+import type { SlideBarProps } from './SlideBar';
+export declare const getOffsetSize: (size?: SlideBarProps['size']) => 32 | 40;
+export declare const getOffsetSizeAdd: (size?: SlideBarProps['size']) => 32 | 40;

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

@@ -0,0 +1,18 @@
+// Constants
+import { BTN_ADD_SIZE, BTN_ADD_SIZE_MD, OFFSET_SIZE_SLIDE, OFFSET_SIZE_SLIDE_MD, } from './constants';
+export const getOffsetSize = (size) => {
+    switch (size) {
+        case 'medium':
+            return OFFSET_SIZE_SLIDE_MD;
+        default:
+            return OFFSET_SIZE_SLIDE;
+    }
+};
+export const getOffsetSizeAdd = (size) => {
+    switch (size) {
+        case 'medium':
+            return BTN_ADD_SIZE_MD;
+        default:
+            return BTN_ADD_SIZE;
+    }
+};

package/es/components/atoms/Switch/Switch.js

@@ -3,6 +3,7 @@ import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import { StyledSwitch } from './styled';
 const Switch = props => {
     const { color = THEME.token?.colorPrimary || '#005eb8', style, ...rest } = props;
-    return _jsx(StyledSwitch, { style: { ...style, '--switch-color': color }, ...rest });
+    const validatedColor = CSS.supports('color', color) ? color : THEME.token?.colorPrimary;
+    return _jsx(StyledSwitch, { style: { ...style, '--switch-color': validatedColor }, ...rest });
 };
 export { Switch };

package/es/components/atoms/Tag/Tag.js

@@ -10,7 +10,7 @@ import { CloseIcon } from '../../icons';
 import { Flex } from '../Flex';
 import { Button } from '../Button';
 import { Typography } from '../Typography';
-import { SearchPopover } from '../../molecules/SearchPopover';
+import { SearchPopover } from '../../molecules/SearchPopover/SearchPopover';
 // Constants
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 import { translate, translations } from '@antscorp/antsomi-ui/es/locales';

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

@@ -0,0 +1,2 @@
+export { Upload } from 'antd';
+export type { UploadProps, UploadFile } from 'antd';

package/es/components/atoms/Upload/Upload.js

@@ -0,0 +1 @@
+export { Upload } from 'antd';

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

@@ -0,0 +1 @@
+export * from './Upload';

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

@@ -0,0 +1 @@
+export * from './Upload';

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

@@ -34,6 +34,8 @@ export { Image } from './Image';
 export { IconField } from './IconField';
 export { Suspense } from './Suspense';
 export { App } from './App';
+export { default as MobileBrandingBar } from './MobileBrandingBar';
+export { MobileFrameV3 } from './MobileFrameV3';
 export * from './Flex';
 export * from './PreviewTabs';
 export * from './MobileFrame';
@@ -50,6 +52,7 @@ export * from './Avatar';
 export * from './NotificationStatus';
 export * from './List';
 export * from './SelectAssociatedTag';
+export * from './Upload';
 export type { SliderProps } from './Slider';
 export type { PaginationProps } from './Pagination';
 export type { InputDynamicProps } from './InputDynamic';

package/es/components/atoms/index.js

@@ -34,6 +34,8 @@ export { Image } from './Image';
 export { IconField } from './IconField';
 export { Suspense } from './Suspense';
 export { App } from './App';
+export { default as MobileBrandingBar } from './MobileBrandingBar';
+export { MobileFrameV3 } from './MobileFrameV3';
 export * from './Flex';
 export * from './PreviewTabs';
 export * from './MobileFrame';
@@ -50,3 +52,4 @@ export * from './Avatar';
 export * from './NotificationStatus';
 export * from './List';
 export * from './SelectAssociatedTag';
+export * from './Upload';

package/es/components/icons/ALignRightIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconProps } from './types';
+export declare const ALignRightIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/ALignRightIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const ALignRightIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, children: _jsx("path", { d: "M3 21H21V19H3V21ZM9 17H21V15H9V17ZM3 13H21V11H3V13ZM9 9H21V7H9V9ZM3 3V5H21V3H3Z", fill: "currentColor" }) }));
+});

package/es/components/icons/AlignCenterIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconProps } from './types';
+export declare const AlignCenterIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/AlignCenterIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const AlignCenterIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, children: _jsx("path", { d: "M7 15V17H17V15H7ZM3 21H21V19H3V21ZM3 13H21V11H3V13ZM7 7V9H17V7H7ZM3 3V5H21V3H3Z", fill: "currentColor" }) }));
+});

package/es/components/icons/AlignJustifyIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconProps } from './types';
+export declare const AlignJustifyIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/AlignJustifyIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const AlignJustifyIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, children: _jsx("path", { d: "M3 21H21V19H3V21ZM3 17H21V15H3V17ZM3 13H21V11H3V13ZM3 9H21V7H3V9ZM3 3V5H21V3H3Z", fill: "currentColor" }) }));
+});

package/es/components/icons/AlignLeftIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconProps } from './types';
+export declare const AlignLeftIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/AlignLeftIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const AlignLeftIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, children: _jsx("path", { d: "M15 15H3V17H15V15ZM15 7H3V9H15V7ZM3 13H21V11H3V13ZM3 21H21V19H3V21ZM3 3V5H21V3H3Z", fill: "currentColor" }) }));
+});

package/es/components/icons/AntsomiAIIcon.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+/// <reference types="react" />
 import { IconProps } from './types';
-export declare const AntsomiAIIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
+export declare const AntsomiAIIcon: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;

package/es/components/icons/AntsomiAIIcon.js

@@ -3,5 +3,7 @@ import { forwardRef } from 'react';
 import { useIcon } from './hooks/useIcon';
 export const AntsomiAIIcon = forwardRef((props, ref) => {
     const { width, height } = useIcon(props);
-    return (_jsxs("svg", { viewBox: "0 0 60 60", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, children: [_jsx("path", { d: "M33.0997 25.3651L25.1083 7.28237C24.8076 6.60568 24.3188 6.02566 23.6905 5.61749C23.0675 5.20933 22.3371 4.99451 21.596 4.99451C20.8548 4.99451 20.1244 5.20933 19.5014 5.61749C18.8784 6.02566 18.3844 6.60031 18.0836 7.28237L0.3285 47.4328C0.124418 47.8946 0.0116362 48.3887 0.000895095 48.8882C-0.00984604 49.3876 0.0760831 49.8925 0.258682 50.3597C0.441282 50.827 0.715181 51.2566 1.06427 51.6218C1.41335 51.987 1.82689 52.277 2.28876 52.4811C2.75063 52.6852 3.24472 52.7926 3.74955 52.8087C4.25439 52.8248 4.75385 52.7335 5.22646 52.5509C5.69907 52.3683 6.12872 52.0998 6.48854 51.7507C6.84837 51.4016 7.14375 50.9881 7.34783 50.5316L21.5906 18.3189L27.278 31.176L33.0997 25.3651Z", fill: "#005EB8" }), _jsx("path", { d: "M42.8598 47.4327L37.6718 35.6873L31.8555 41.4821L35.8458 50.51C36.2593 51.4391 37.022 52.1642 37.9725 52.5347C38.9231 52.8999 39.9811 52.8784 40.9102 52.4703C41.8394 52.0621 42.5698 51.2995 42.9403 50.3543C43.3109 49.4091 43.284 48.3564 42.8705 47.4273", fill: "#005EB8" }), _jsx("path", { d: "M42.063 20.494C41.3433 19.7744 40.3659 19.3716 39.3509 19.3716C38.3358 19.3716 37.3584 19.7744 36.6387 20.494L21.4991 35.5746L15.5378 29.6347L12.2188 37.1482L18.7816 43.6841C19.5012 44.4038 20.4787 44.8066 21.4937 44.8066C22.5088 44.8066 23.4862 44.4038 24.2059 43.6841L42.0576 25.8915C42.7773 25.1772 43.1801 24.1997 43.1801 23.1847C43.1801 22.1696 42.7773 21.1976 42.0576 20.4833L42.063 20.494Z", fill: "#EF3340" }), _jsx("path", { d: "M16.6787 29.4307L12.5273 38.8185L6.71094 33.0236L10.8624 23.6359L16.6787 29.4307Z", fill: "#005EB8" }), _jsx("path", { d: "M57.004 49.8386C57.7881 49.8386 58.4164 49.2049 58.8837 47.9428L60.0007 48.12C60.0007 48.5174 59.845 49.0276 59.5281 49.6614C59.2542 50.2521 58.9213 50.7462 58.5292 51.1436C57.5088 52.25 55.9782 52.8032 53.9427 52.8032C49.7483 52.8032 47.6484 50.8483 47.6484 46.9331V23.5497C47.6484 21.3424 49.4368 19.5486 51.6495 19.5486C53.8568 19.5486 55.6506 21.337 55.6506 23.5497V47.8193C55.6506 49.1619 56.1017 49.8332 57.004 49.8332V49.8386Z", fill: "url(#paint0_linear_2513_38963)" }), _jsx("path", { d: "M51.4106 16.0149C54.2284 16.0149 56.5127 13.7306 56.5127 10.9128C56.5127 8.09505 54.2284 5.81079 51.4106 5.81079C48.5929 5.81079 46.3086 8.09505 46.3086 10.9128C46.3086 13.7306 48.5929 16.0149 51.4106 16.0149Z", fill: "#EF3340" })] }));
+    return (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, children: [_jsxs("g", { clipPath: "url(#a)", children: [_jsx("mask", { id: "b", style: {
+                            maskType: 'luminance',
+                        }, maskUnits: "userSpaceOnUse", x: 3, y: 3, width: 18, height: 18, children: _jsx("path", { d: "M21 3H3v18h18V3Z", fill: "#fff" }) }), _jsxs("g", { mask: "url(#b)", children: [_jsx("path", { d: "m12.93 10.61-2.397-5.425a1.153 1.153 0 0 0-2.108 0L3.1 17.23a1.142 1.142 0 0 0 .22 1.256 1.15 1.15 0 0 0 1.885-.326l4.273-9.664 1.706 3.857 1.747-1.743ZM15.857 17.23l-1.556-3.524-1.745 1.739 1.197 2.708a1.157 1.157 0 0 0 1.52.588c.278-.122.497-.351.608-.635.111-.283.103-.599-.02-.878", fill: "#005EB8" }), _jsx("path", { d: "M15.619 9.148a1.151 1.151 0 0 0-1.627 0L9.45 13.672 7.66 11.89l-.995 2.255 1.969 1.96a1.152 1.152 0 0 0 1.627 0l5.355-5.338a1.144 1.144 0 0 0 0-1.622l.002.003Z", fill: "#EF3340" }), _jsx("path", { d: "m8.003 11.83-1.245 2.816-1.745-1.739 1.245-2.816 1.745 1.738Z", fill: "#005EB8" }), _jsx("path", { d: "M20.1 17.952c.235 0 .424-.19.564-.57l.335.054c0 .12-.047.272-.142.462a1.562 1.562 0 0 1-.3.445c-.306.332-.765.498-1.375.498-1.259 0-1.889-.587-1.889-1.761v-7.015a1.2 1.2 0 1 1 2.4 0v7.28c0 .404.136.605.407.605v.002Z", fill: "url(#c)" }), _jsx("path", { d: "M18.422 7.804a1.53 1.53 0 1 0 0-3.06 1.53 1.53 0 0 0 0 3.06Z", fill: "#EF3340" })] })] }), _jsxs("defs", { children: [_jsxs("linearGradient", { id: "c", x1: 19.148, y1: 18.841, x2: 19.148, y2: 8.866, gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#005EB8" }), _jsx("stop", { offset: 1, stopColor: "#EF3340" })] }), _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", transform: "translate(3 3)", d: "M0 0h18v18H0z" }) })] })] }));
 });

package/es/components/icons/ArrowDropDownIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconProps } from './types';
+export declare const ArrowDropDownIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/ArrowDropDownIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const ArrowDropDownIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, children: _jsx("path", { d: "M7 10L12 15L17 10H7Z", fill: "black" }) }));
+});

package/es/components/icons/ChevronRightIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconProps } from './types';
+export declare const ChevronRightIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/ChevronRightIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const ChevronRightIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", ...props, ref: ref, width: width, height: height, children: _jsx("path", { d: "m9 18 6-6-6-6" }) }));
+});

package/es/components/icons/CircleInfoIcon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IconProps } from './types';
+export declare const CircleInfoIcon: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;

package/es/components/icons/CircleInfoIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const CircleInfoIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, ref: ref, width: width, height: height, children: _jsx("path", { d: "M12 22C10.0222 22 8.08879 21.4136 6.4443 20.3148C4.79981 19.216 3.51809 17.6541 2.76121 15.8268C2.00433 13.9996 1.8063 11.9889 2.19215 10.0492C2.578 8.10937 3.53041 6.32775 4.92894 4.92924C6.32746 3.53073 8.10929 2.57796 10.0491 2.19211C11.9889 1.80627 13.9996 2.00444 15.8269 2.7613C17.6541 3.51817 19.2159 4.79981 20.3148 6.44429C21.4135 8.08876 22 10.0224 22 12.0002C21.997 14.6513 20.9424 17.1929 19.0677 19.0675C17.193 20.9423 14.6513 21.997 12 22ZM8.99 9.44579C8.8334 9.44578 8.68318 9.50817 8.5723 9.61878C8.46144 9.72938 8.39895 9.8793 8.39857 10.0359V11.0857C8.39895 11.2423 8.46144 11.3922 8.5723 11.5028C8.68318 11.6134 8.8334 11.6758 8.99 11.6758H10.4757V19.0599H13.3329V9.44579H8.99ZM11.6714 4.87484C11.3154 4.87455 10.9673 4.97932 10.6712 5.17687C10.375 5.37442 10.1441 5.65582 10.0076 5.98461C9.87108 6.31341 9.83514 6.67473 9.90431 7.02395C9.97349 7.37316 10.1447 7.69415 10.3962 7.94609C10.6477 8.19802 10.9683 8.37021 11.3174 8.43994C11.6665 8.50967 12.0285 8.47408 12.3575 8.3381C12.6865 8.20212 12.9678 7.97129 13.1659 7.67544C13.3639 7.3796 13.4697 7.03187 13.47 6.67588C13.4708 6.19798 13.2817 5.73937 12.9445 5.40078C12.6072 5.06219 12.1493 4.87109 11.6714 4.86995V4.87484Z", fill: "currentColor" }) }));
+});

package/es/components/icons/ColorizeIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconProps } from './types';
+export declare const ColorizeIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/ColorizeIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const ColorizeIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, children: _jsx("path", { d: "M21.6764 4.92454L19.0766 2.32489C18.9738 2.2219 18.8517 2.1402 18.7173 2.08445C18.5829 2.0287 18.4388 2 18.2933 2C18.1478 2 18.0037 2.0287 17.8693 2.08445C17.7349 2.1402 17.6128 2.2219 17.51 2.32489L14.0436 5.79109L11.8993 3.66916L10.3327 5.23561L11.9104 6.81317L2 16.7229V22H7.27741L17.1878 12.0902L18.7655 13.6678L20.332 12.1013L18.1989 9.9683L21.6653 6.50211C22.1097 6.05772 22.1097 5.35782 21.6764 4.92454ZM6.35525 19.7781L4.22207 17.645L13.177 8.6907L15.3102 10.8237L6.35525 19.7781Z", fill: "black" }) }));
+});

package/es/components/icons/EmotionFeedbackIcon.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IconProps } from './types';
+export declare const EmotionFeedbackIcon: React.ForwardRefExoticComponent<IconProps & {
+    iconHappyColor?: string | undefined;
+    iconSadColor?: string | undefined;
+} & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/EmotionFeedbackIcon.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const EmotionFeedbackIcon = forwardRef((props, ref) => {
+    const { iconHappyColor, iconSadColor } = props;
+    const { width, height } = useIcon(props);
+    return (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, children: [_jsx("path", { d: "M7.46387 2C11.0421 2 13.9414 4.89894 13.9414 8.4707C13.9414 8.62276 13.9332 8.77341 13.9229 8.92285C13.4325 9.0975 12.9645 9.31902 12.5254 9.58398C12.604 9.22531 12.6475 8.85305 12.6475 8.4707C12.6475 5.61074 10.3307 3.29401 7.4707 3.29395C4.6107 3.29395 2.29395 5.6107 2.29395 8.4707C2.29401 11.3307 4.61074 13.6475 7.4707 13.6475C8.13206 13.6474 8.76342 13.5208 9.34473 13.2949C9.15122 13.7675 9.00388 14.2636 8.90625 14.7773C8.44232 14.8828 7.9598 14.9414 7.46387 14.9414C3.89226 14.9413 1.00006 12.0423 1 8.4707C1 4.89902 3.89222 2.00014 7.46387 2Z", fill: iconSadColor || 'currentColor' }), _jsx("path", { d: "M7.4707 9.76465C8.72592 9.76469 9.82718 10.4161 10.46 11.3994C10.299 11.6014 10.1484 11.8117 10.0078 12.0293H9.70312C9.2502 11.2593 8.4283 10.7354 7.4707 10.7354C6.5131 10.7354 5.68477 11.2594 5.23828 12.0293H4.15723C4.67487 10.7028 5.96306 9.76465 7.4707 9.76465Z", fill: iconSadColor || 'currentColor' }), _jsx("path", { d: "M5.20605 5.88281C5.74188 5.88291 6.17654 6.31674 6.17676 6.85254C6.17676 7.38852 5.74202 7.82315 5.20605 7.82324C4.67001 7.82324 4.23535 7.38858 4.23535 6.85254C4.23557 6.31668 4.67015 5.88281 5.20605 5.88281Z", fill: iconSadColor || 'currentColor' }), _jsx("path", { d: "M9.73535 5.88281C10.2713 5.88281 10.7058 6.31668 10.7061 6.85254C10.7061 7.38858 10.2714 7.82324 9.73535 7.82324C9.19936 7.82319 8.76465 7.38855 8.76465 6.85254C8.76487 6.31672 9.19949 5.88287 9.73535 5.88281Z", fill: iconSadColor || 'currentColor' }), _jsx("path", { d: "M14.2971 17.529C14.7501 18.2988 15.572 18.8229 16.5295 18.8229C17.4871 18.8229 18.3155 18.2989 18.762 17.529H19.842C19.3243 18.8552 18.037 19.7936 16.5295 19.7936C15.0219 19.7936 13.7337 18.8554 13.2161 17.529H14.2971Z", fill: iconHappyColor || 'currentColor' }), _jsx("path", { d: "M14.2649 13.6461C14.8008 13.6463 15.2356 14.0809 15.2356 14.6169C15.2356 15.1528 14.8008 15.5874 14.2649 15.5876C13.7289 15.5876 13.2942 15.1529 13.2942 14.6169C13.2942 14.0808 13.7289 13.6461 14.2649 13.6461Z", fill: iconHappyColor || 'currentColor' }), _jsx("path", { d: "M18.7942 13.6461C19.3302 13.6461 19.7649 14.0808 19.7649 14.6169C19.7649 15.1529 19.3302 15.5876 18.7942 15.5876C18.2582 15.5875 17.8235 15.1529 17.8235 14.6169C17.8235 14.0808 18.2582 13.6462 18.7942 13.6461Z", fill: iconHappyColor || 'currentColor' }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M16.5227 9.76431C20.1009 9.76431 23.0002 12.6633 23.0002 16.235C23 19.8066 20.1008 22.7047 16.5227 22.7047C12.9512 22.7046 10.0591 19.8065 10.0588 16.235C10.0588 12.6633 12.951 9.76443 16.5227 9.76431ZM16.5295 11.0583C13.6695 11.0583 11.3528 13.375 11.3528 16.235C11.353 19.0948 13.6697 21.4108 16.5295 21.4108C19.3893 21.4107 21.706 19.0948 21.7063 16.235C21.7063 13.3751 19.3895 11.0583 16.5295 11.0583Z", fill: iconHappyColor || 'currentColor' }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M16.5227 9.76431C20.1009 9.76431 23.0002 12.6633 23.0002 16.235C23 19.8066 20.1008 22.7047 16.5227 22.7047C12.9512 22.7046 10.0591 19.8065 10.0588 16.235C10.0588 12.6633 12.951 9.76443 16.5227 9.76431ZM16.5295 11.0583C13.6695 11.0583 11.3528 13.375 11.3528 16.235C11.353 19.0948 13.6697 21.4108 16.5295 21.4108C19.3893 21.4107 21.706 19.0948 21.7063 16.235C21.7063 13.3751 19.3895 11.0583 16.5295 11.0583Z", fill: iconHappyColor || 'currentColor' })] }));
+});

package/es/components/icons/FailSlim.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconProps } from './types';
+export declare const FailSlim: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/FailSlim.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const FailSlim = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (_jsx("svg", { viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, children: _jsx("path", { d: "M3.65625 6.34375H10.3438V7.65625H3.65625V6.34375ZM7 0.34375C10.6875 0.34375 13.6562 3.3125 13.6562 7C13.6562 10.6875 10.6875 13.6562 7 13.6562C3.3125 13.6562 0.34375 10.6875 0.34375 7C0.34375 3.3125 3.3125 0.34375 7 0.34375ZM7 12.3438C9.9375 12.3438 12.3438 9.9375 12.3438 7C12.3438 4.0625 9.9375 1.65625 7 1.65625C4.0625 1.65625 1.65625 4.0625 1.65625 7C1.65625 9.9375 4.0625 12.3438 7 12.3438Z", fill: "currentColor" }) }));
+});

package/es/components/icons/FeedbackRatingIcon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconProps } from './types';
+export declare const FeedbackRatingIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;

package/es/components/icons/FeedbackRatingIcon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { useIcon } from './hooks/useIcon';
+export const FeedbackRatingIcon = forwardRef((props, ref) => {
+    const { width, height } = useIcon(props);
+    return (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, children: [_jsx("path", { d: "M19.3058 16.2229L16.9275 15.1776C16.8461 15.14 16.7523 15.115 16.6521 15.115H16.2453V12.2984C16.2453 11.4346 15.5443 10.7336 14.6806 10.7336C13.8169 10.7336 13.1159 11.4346 13.1159 12.2984V17.3996L11.9455 17.1492C11.8266 17.1304 11.3071 17.0553 10.8628 17.4997L9.98653 18.3822L13.191 21.6307C13.4226 21.8686 13.7418 22 14.0735 22H18.173C18.7864 22 19.3058 21.5619 19.406 20.9547L19.9818 17.5498C20.0757 17.0115 19.8003 16.4732 19.3058 16.2229ZM18.173 20.7482H14.0735L11.7578 18.3822L14.3677 18.9393V12.2984C14.3677 12.1231 14.5054 11.9854 14.6806 11.9854C14.8558 11.9854 14.9935 12.1231 14.9935 12.2984V16.1665H16.0951L18.7488 17.3432L18.173 20.7482Z", fill: "currentColor" }), _jsx("path", { d: "M12.8444 7.08751L18.37 7.56427L16.2652 9.39032C15.8423 9.15932 15.3637 9.01754 14.8546 8.99116L15.3654 8.54851L11.9993 8.25597L10.685 5.15144L9.37845 8.24829L6.01226 8.54084L8.56398 10.7541L7.79556 14.0437L10.685 12.2987L11.369 12.7123V14.1486L10.685 13.7358L5.9355 16.6024L7.19601 11.1993L3 7.56427L8.5256 7.09518L10.685 2L12.8444 7.08751Z", fill: "currentColor" })] }));
+});