@antscorp/antsomi-ui 2.0.114 → 2.0.115

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

@@ -2,49 +2,49 @@
 import styled, { css } from 'styled-components';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const TextWrapper = styled.div `
-  color: ${THEME.token?.colorTextBase};
-  font-size: ${THEME.token?.fontSize}px;
-  font-family: Roboto;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-
+export const TextWrapper = styled.div `
+  color: ${THEME.token?.colorTextBase};
+  font-size: ${THEME.token?.fontSize}px;
+  font-family: Roboto;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+
   ${p => {
     switch (p.size) {
         case 'small':
-            return css `
-          font-size: ${THEME.token?.fontSize}px;
+            return css `
+          font-size: ${THEME.token?.fontSize}px;
         `;
         case 'medium':
-            return css `
-          font-size: ${THEME.token?.fontSizeMd}px;
+            return css `
+          font-size: ${THEME.token?.fontSizeMd}px;
         `;
         case 'large':
-            return css `
-          font-size: ${THEME.token?.fontSizeLg}px;
+            return css `
+          font-size: ${THEME.token?.fontSizeLg}px;
         `;
         default:
-            return css `
-          font-size: ${p.size}px;
+            return css `
+          font-size: ${p.size}px;
         `;
     }
-}}
-
-  &.--disabled {
-    color: ${THEME.token?.colorTextDisabled};
-    pointer-events: none;
-  }
-
-  &.--secondary {
-    color: ${THEME.token?.colorIcon};
-  }
-
-  &.--error {
-    color: ${THEME.token?.red6};
-  }
-
-  &.--warning {
-    color: ${THEME.token?.colorWarning};
-  }
+}}
+
+  &.--disabled {
+    color: ${THEME.token?.colorTextDisabled};
+    pointer-events: none;
+  }
+
+  &.--secondary {
+    color: ${THEME.token?.colorIcon};
+  }
+
+  &.--error {
+    color: ${THEME.token?.red6};
+  }
+
+  &.--warning {
+    color: ${THEME.token?.colorWarning};
+  }
 `;

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

@@ -49,6 +49,7 @@ export * from './RateV2';
 export * from './Popover';
 export * from './Iframe';
 export * from './Avatar';
+export * from './SelectAssociatedTag';
 export * from './List';
 export * from './Upload';
 export * from './NotificationStatus';

package/es/components/atoms/index.js

@@ -49,6 +49,7 @@ export * from './RateV2';
 export * from './Popover';
 export * from './Iframe';
 export * from './Avatar';
+export * from './SelectAssociatedTag';
 export * from './List';
 export * from './Upload';
 export * from './NotificationStatus';

package/es/components/icons/CircleInfoIcon.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, ref: ref, width: width, height: height, children: [_jsx("g", { clipPath: "url(#clip0_1_5)", children: _jsx("path", { d: "M12 21.0002C10.22 21.0002 8.47991 20.4725 6.99987 19.4835C5.51983 18.4946 4.36628 17.0888 3.68509 15.4443C3.0039 13.7998 2.82567 11.9902 3.17294 10.2443C3.5202 8.49851 4.37737 6.89502 5.63604 5.63635C6.89472 4.37767 8.49836 3.52017 10.2442 3.1729C11.99 2.82564 13.7996 3.00399 15.4442 3.68518C17.0887 4.36637 18.4943 5.51986 19.4833 6.99991C20.4722 8.47995 21 10.2202 21 12.0003C20.9973 14.3863 20.0481 16.6738 18.361 18.361C16.6737 20.0482 14.3861 20.9975 12 21.0002ZM9.291 9.7013C9.15006 9.70129 9.01486 9.75744 8.91507 9.85699C8.81529 9.95653 8.75905 10.0915 8.75872 10.2324V11.1772C8.75905 11.3182 8.81529 11.4531 8.91507 11.5526C9.01486 11.6522 9.15006 11.7083 9.291 11.7083H10.6281V18.3541H13.1996V9.7013H9.291ZM11.7043 5.58739C11.3839 5.58713 11.0706 5.68143 10.804 5.85922C10.5375 6.03702 10.3297 6.29028 10.2068 6.5862C10.084 6.88212 10.0516 7.20731 10.1139 7.52161C10.1761 7.8359 10.3302 8.1248 10.5566 8.35155C10.783 8.57829 11.0715 8.73326 11.3857 8.79602C11.6999 8.85877 12.0256 8.82675 12.3218 8.70436C12.6179 8.58198 12.8711 8.37423 13.0493 8.10796C13.2275 7.8417 13.3228 7.52874 13.323 7.20834C13.3237 6.77823 13.1536 6.36547 12.85 6.06074C12.5465 5.756 12.1344 5.58401 11.7043 5.58299V5.58739Z", style: { fill: 'currentcolor' } }) }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_1_5", children: _jsx("rect", { width: "18", height: "18", fill: "white", transform: "translate(3 3)" }) }) })] }));
+    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/DomainManagementIcon.js

@@ -6,5 +6,5 @@ export const DomainManagementIcon = forwardRef((props, ref) => {
     return (_jsxs("svg", { 
         // width="29"
         // height="29"
-        viewBox: "0 0 29 29", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, children: [_jsx("path", { d: "M15.7,15.7l1.9,0.8c1.6-1.8,2.4-4.1,2.4-6.5c0-2-0.6-3.9-1.7-5.6c-1.1-1.6-2.7-2.9-4.5-3.7C12,0,10-0.2,8,0.2\n\tC6.1,0.6,4.3,1.5,2.9,2.9C1.5,4.3,0.6,6.1,0.2,8c-0.4,2-0.2,4,0.6,5.8s2,3.4,3.7,4.5C6.1,19.4,8,20,10,20c2.3,0,4.7-0.9,6.4-2.4\n\tL15.7,15.7z M5.5,16.5c-1.3-0.9-2.3-2.2-2.9-3.7C2.1,11.3,2,9.6,2.4,8.1C3.1,8.7,4.3,10,4.3,10l-0.5,2.5l1.8,1.6\n\tC5.6,14.9,5.6,15.7,5.5,16.5z M13.8,7.5c-0.5,0.3-1,0.7-1.3,1.3C11.9,11,14.7,11.9,15,12c0,0,0,3.2,0,4.1c-1,0.9-2.3,1.5-3.6,1.7\n\tc-1.3,0.2-2.7,0.1-4-0.3c0.3-0.6,0.7-1.5,1-2.3c0.2-0.5,0.4-0.9,0.5-1.2c0.3-0.4,0.4-0.9,0.5-1.4c0.1-0.5,0-1-0.1-1.5\n\tC8.9,9.9,7.4,8.4,6.6,8.4C6.3,8.4,6,8.6,5.8,8.8S5.5,9.3,5.5,9.6C5.2,9,4.9,8.4,4.5,7.9c0,0,2.2-0.9,2.7-1.8C7.3,6,7.3,5.8,7.4,5.7\n\tc0.6-1,0.9-2.2,1-3.4c1.2-0.3,2.5-0.2,3.7,0.1C12,2.5,12,2.6,12,2.7c0,0.1,0,0.2,0,0.3s0.1,0.1,0.2,0.2c0.1,0,0.2,0.1,0.3,0\n\tc0.1,0,0.2,0,0.3,0c0.5,0,0.7-0.1,0.8-0.3c0.3,0.1,0.6,0.3,0.8,0.5c-0.5,0.3-0.9,0.6-1.3,1c0.1,0.2,0.5,0.4,0.7,0.5v0.5H13\n\tc0,0.2,0,0.5,0.1,0.7c0.1,0.1,0.2,0.2,0.3,0.2c0.1,0.1,0.2,0.1,0.3,0.1c0.1,0,0.2,0,0.3,0c0.5,0,0.6-0.3,0.7-0.7\n\tc0-0.1,0-0.2,0.1-0.3C14.9,5.2,15,5,15.2,4.9c0.2,0.1,0.4,0.1,0.6,0h0.1c0,0,0.1,0,0.1,0.1c0.6,0.7,1.1,1.6,1.4,2.5\n\tc-0.6-0.2-1.3-0.4-1.9-0.3C14.9,7.1,14.3,7.2,13.8,7.5z" }), _jsx("path", { fill: "white", d: "M28.7,17L9.5,9.4L17,28.5l2.5-5.1l3.4,3.4l4.1-4l-3.4-3.3L28.7,17z M19,18c-0.1,0-0.2,0.2-0.3,0.4l-0.1,0.2\n\tl-0.2,0.1c-0.2,0.1-0.4,0.2-0.6,0.4l-0.5,0.5l-1.5-3.9l4.5,1.8L19,18z" }), _jsx("path", { d: "M20,19l3.7-1.7L13,13l4.1,10.6l1.7-3.5l4,3.9l1.2-1.2L20,19z M18.2,18.2c-0.3,0.1-0.6,0.3-0.8,0.5l-0.8-2.1l2.2,0.9\n\tC18.5,17.6,18.3,17.9,18.2,18.2z" })] }));
+        viewBox: "0 0 29 29", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props, ref: ref, width: width, height: height, children: [_jsx("path", { d: "M15.7,15.7l1.9,0.8c1.6-1.8,2.4-4.1,2.4-6.5c0-2-0.6-3.9-1.7-5.6c-1.1-1.6-2.7-2.9-4.5-3.7C12,0,10-0.2,8,0.2\r\n\tC6.1,0.6,4.3,1.5,2.9,2.9C1.5,4.3,0.6,6.1,0.2,8c-0.4,2-0.2,4,0.6,5.8s2,3.4,3.7,4.5C6.1,19.4,8,20,10,20c2.3,0,4.7-0.9,6.4-2.4\r\n\tL15.7,15.7z M5.5,16.5c-1.3-0.9-2.3-2.2-2.9-3.7C2.1,11.3,2,9.6,2.4,8.1C3.1,8.7,4.3,10,4.3,10l-0.5,2.5l1.8,1.6\r\n\tC5.6,14.9,5.6,15.7,5.5,16.5z M13.8,7.5c-0.5,0.3-1,0.7-1.3,1.3C11.9,11,14.7,11.9,15,12c0,0,0,3.2,0,4.1c-1,0.9-2.3,1.5-3.6,1.7\r\n\tc-1.3,0.2-2.7,0.1-4-0.3c0.3-0.6,0.7-1.5,1-2.3c0.2-0.5,0.4-0.9,0.5-1.2c0.3-0.4,0.4-0.9,0.5-1.4c0.1-0.5,0-1-0.1-1.5\r\n\tC8.9,9.9,7.4,8.4,6.6,8.4C6.3,8.4,6,8.6,5.8,8.8S5.5,9.3,5.5,9.6C5.2,9,4.9,8.4,4.5,7.9c0,0,2.2-0.9,2.7-1.8C7.3,6,7.3,5.8,7.4,5.7\r\n\tc0.6-1,0.9-2.2,1-3.4c1.2-0.3,2.5-0.2,3.7,0.1C12,2.5,12,2.6,12,2.7c0,0.1,0,0.2,0,0.3s0.1,0.1,0.2,0.2c0.1,0,0.2,0.1,0.3,0\r\n\tc0.1,0,0.2,0,0.3,0c0.5,0,0.7-0.1,0.8-0.3c0.3,0.1,0.6,0.3,0.8,0.5c-0.5,0.3-0.9,0.6-1.3,1c0.1,0.2,0.5,0.4,0.7,0.5v0.5H13\r\n\tc0,0.2,0,0.5,0.1,0.7c0.1,0.1,0.2,0.2,0.3,0.2c0.1,0.1,0.2,0.1,0.3,0.1c0.1,0,0.2,0,0.3,0c0.5,0,0.6-0.3,0.7-0.7\r\n\tc0-0.1,0-0.2,0.1-0.3C14.9,5.2,15,5,15.2,4.9c0.2,0.1,0.4,0.1,0.6,0h0.1c0,0,0.1,0,0.1,0.1c0.6,0.7,1.1,1.6,1.4,2.5\r\n\tc-0.6-0.2-1.3-0.4-1.9-0.3C14.9,7.1,14.3,7.2,13.8,7.5z" }), _jsx("path", { fill: "white", d: "M28.7,17L9.5,9.4L17,28.5l2.5-5.1l3.4,3.4l4.1-4l-3.4-3.3L28.7,17z M19,18c-0.1,0-0.2,0.2-0.3,0.4l-0.1,0.2\r\n\tl-0.2,0.1c-0.2,0.1-0.4,0.2-0.6,0.4l-0.5,0.5l-1.5-3.9l4.5,1.8L19,18z" }), _jsx("path", { d: "M20,19l3.7-1.7L13,13l4.1,10.6l1.7-3.5l4,3.9l1.2-1.2L20,19z M18.2,18.2c-0.3,0.1-0.6,0.3-0.8,0.5l-0.8-2.1l2.2,0.9\r\n\tC18.5,17.6,18.3,17.9,18.2,18.2z" })] }));
 });

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

@@ -408,4 +408,6 @@ export declare const LazyIcon: {
     WebPersonalizationIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     WidgetIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
     WritingAIAssitantIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    QRCodeManagementIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
+    QRSetDashboardIcon: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("../types").IconProps & import("react").RefAttributes<SVGSVGElement>>>;
 };

package/es/components/icons/LazyIcon/LazyIcon.js

@@ -411,4 +411,6 @@ export const LazyIcon = {
     WebPersonalizationIcon: lazy(() => import('../WebPersonalizationIcon').then(m => ({ default: m.WebPersonalizationIcon }))),
     WidgetIcon: lazy(() => import('../WidgetIcon').then(m => ({ default: m.WidgetIcon }))),
     WritingAIAssitantIcon: lazy(() => import('../WritingAIAssitantIcon').then(m => ({ default: m.WritingAIAssitantIcon }))),
+    QRCodeManagementIcon: lazy(() => import('../QRCodeManagementIcon').then(m => ({ default: m.QRCodeManagementIcon }))),
+    QRSetDashboardIcon: lazy(() => import('../QRSetDashboardIcon').then(m => ({ default: m.QRSetDashboardIcon }))),
 };

package/es/components/icons/LoadingIcon.js

@@ -2,39 +2,39 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import styled from 'styled-components';
 import { useIcon } from './hooks/useIcon';
-const StyleSvg = styled.svg `
-  animation: 1.5s linear 0s infinite normal none running spin;
-
-  circle.circle {
-    stroke: currentcolor;
-    stroke-dasharray: 80px, 200px;
-    stroke-dashoffset: 0;
-    animation: 1.5s ease-in-out 0s infinite normal none running animation-loading;
-  }
-
-  @keyframes animation-loading {
-    0% {
-      stroke-dasharray: 1px, 200px;
-      stroke-dashoffset: 0;
-    }
-    50% {
-      stroke-dasharray: 100px, 200px;
-      stroke-dashoffset: -15px;
-    }
-    100% {
-      stroke-dasharray: 100px, 200px;
-      stroke-dashoffset: -118px;
-    }
-  }
-
-  @keyframes spin {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
+const StyleSvg = styled.svg `
+  animation: 1.5s linear 0s infinite normal none running spin;
+
+  circle.circle {
+    stroke: currentcolor;
+    stroke-dasharray: 80px, 200px;
+    stroke-dashoffset: 0;
+    animation: 1.5s ease-in-out 0s infinite normal none running animation-loading;
+  }
+
+  @keyframes animation-loading {
+    0% {
+      stroke-dasharray: 1px, 200px;
+      stroke-dashoffset: 0;
+    }
+    50% {
+      stroke-dasharray: 100px, 200px;
+      stroke-dashoffset: -15px;
+    }
+    100% {
+      stroke-dasharray: 100px, 200px;
+      stroke-dashoffset: -118px;
+    }
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
 `;
 export const LoadingIcon = forwardRef(({ backgroundColor, ...restOfProps }, ref) => {
     const { width, height } = useIcon(restOfProps);

package/es/components/icons/document/styled.js

@@ -1,46 +1,46 @@
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 import styled from 'styled-components';
-export const IconGalleryStyled = styled.div `
-  .grid-container {
-    /* NOTE: I don't know why gutter of antd Row doesn't apply for row-gap */
-    /* row-gap: 16px; */
-    margin-top: 24px;
-    flex-wrap: wrap;
-  }
-
-  .grid-item {
-    width: calc((100% - 16px * 4) / 5);
-    flex-grow: 0;
-    flex-shrink: 0;
-
-    padding: 32px 16px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: 8px;
-    border-radius: ${globalToken?.borderRadius}px;
-
-    cursor: pointer;
-    transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
-
-    span {
-      font-size: 14px;
-    }
-
-    &:hover {
-      background-color: ${globalToken?.colorPrimary};
-
-      svg {
-        transform: scale(1.2);
-      }
-      svg,
-      span {
-        transition: all 0.3s ease-in-out;
-        will-change: transform;
-        fill: white;
-        color: white;
-      }
-    }
-  }
+export const IconGalleryStyled = styled.div `
+  .grid-container {
+    /* NOTE: I don't know why gutter of antd Row doesn't apply for row-gap */
+    /* row-gap: 16px; */
+    margin-top: 24px;
+    flex-wrap: wrap;
+  }
+
+  .grid-item {
+    width: calc((100% - 16px * 4) / 5);
+    flex-grow: 0;
+    flex-shrink: 0;
+
+    padding: 32px 16px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    border-radius: ${globalToken?.borderRadius}px;
+
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
+
+    span {
+      font-size: 14px;
+    }
+
+    &:hover {
+      background-color: ${globalToken?.colorPrimary};
+
+      svg {
+        transform: scale(1.2);
+      }
+      svg,
+      span {
+        transition: all 0.3s ease-in-out;
+        will-change: transform;
+        fill: white;
+        color: white;
+      }
+    }
+  }
 `;

package/es/components/index.scss

@@ -1,2 +1,2 @@
-@use './organism';
-@use './molecules';
+@use './organism';
+@use './molecules';

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

@@ -4,32 +4,32 @@ import styled from 'styled-components';
 import { Flex } from '@antscorp/antsomi-ui/es/components/atoms/Flex';
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 const { bw8, orange6 } = globalToken || {};
-export const AccessDeniedWrapper = styled(Flex) `
-  width: 100%;
-  height: 100%;
-
-  .access-denied {
-    &__lock {
-      width: 100px;
-      margin-bottom: 15px;
-    }
-
-    &__title {
-      color: ${orange6};
-      font-size: 20px;
-      line-height: 23.44px;
-    }
-
-    &__subtitle {
-      font-weight: 600;
-    }
-
-    &__description {
-      color: ${bw8};
-    }
-
-    &__actions {
-      margin-top: 20px;
-    }
-  }
+export const AccessDeniedWrapper = styled(Flex) `
+  width: 100%;
+  height: 100%;
+
+  .access-denied {
+    &__lock {
+      width: 100px;
+      margin-bottom: 15px;
+    }
+
+    &__title {
+      color: ${orange6};
+      font-size: 20px;
+      line-height: 23.44px;
+    }
+
+    &__subtitle {
+      font-weight: 600;
+    }
+
+    &__description {
+      color: ${bw8};
+    }
+
+    &__actions {
+      margin-top: 20px;
+    }
+  }
 `;

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

@@ -1,114 +1,114 @@
 import { globalToken, THEME } from '@antscorp/antsomi-ui/es/constants';
 import styled from 'styled-components';
-export const AccountSelectionStyled = styled.div `
-  background-color: white;
-  display: flex;
-  flex-direction: column;
-  width: 300px;
-  height: 450px;
-  box-shadow: 0px 3px 20px 0px #002e5933;
-
-  .antsomi-input-affix-wrapper {
-    padding: 8px 10px;
-    height: 40px;
-    box-sizing: border-box;
-    border-color: ${globalToken?.bw3};
-    &:hover,
-    &:focus,
-    &:focus-within {
-      border-color: ${globalToken?.bw3};
-    }
-  }
-
-  .recent-text {
-    color: ${THEME.token?.bw7};
-    padding: 6px 10px;
-  }
-
-  ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  ul.account-list {
-    border-top: 1px solid ${THEME.token?.bw3};
-    overflow-y: auto;
-  }
-
-  li {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 5px 10px;
-    margin-bottom: 6px;
-    cursor: pointer;
-
-    .account-name {
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .account-id {
-      flex-shrink: 0;
-    }
-  }
-
-  .all-account {
-    padding: 13px 10px;
-    height: 46px;
-    box-sizing: border-box;
-    border-top: 1px solid ${THEME.token?.bw3};
-    cursor: pointer;
-  }
-
-  li:hover,
-  .all-account:hover {
-    background-color: ${THEME.token?.blue};
-  }
-
-  li.is-selected,
-  .all-account.is-selected {
-    background-color: ${THEME.token?.blue1_1};
-  }
+export const AccountSelectionStyled = styled.div `
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+  width: 300px;
+  height: 450px;
+  box-shadow: 0px 3px 20px 0px #002e5933;
+
+  .antsomi-input-affix-wrapper {
+    padding: 8px 10px;
+    height: 40px;
+    box-sizing: border-box;
+    border-color: ${globalToken?.bw3};
+    &:hover,
+    &:focus,
+    &:focus-within {
+      border-color: ${globalToken?.bw3};
+    }
+  }
+
+  .recent-text {
+    color: ${THEME.token?.bw7};
+    padding: 6px 10px;
+  }
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  ul.account-list {
+    border-top: 1px solid ${THEME.token?.bw3};
+    overflow-y: auto;
+  }
+
+  li {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 5px 10px;
+    margin-bottom: 6px;
+    cursor: pointer;
+
+    .account-name {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .account-id {
+      flex-shrink: 0;
+    }
+  }
+
+  .all-account {
+    padding: 13px 10px;
+    height: 46px;
+    box-sizing: border-box;
+    border-top: 1px solid ${THEME.token?.bw3};
+    cursor: pointer;
+  }
+
+  li:hover,
+  .all-account:hover {
+    background-color: ${THEME.token?.blue};
+  }
+
+  li.is-selected,
+  .all-account.is-selected {
+    background-color: ${THEME.token?.blue1_1};
+  }
 `;
-export const PopoverFieldStyled = styled.div `
-  box-sizing: border-box;
-  width: 190px;
-  height: 36px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 10px;
-  cursor: pointer;
-
-  background-color: white;
-
-  font-size: 12px;
-  font-weight: bold;
-
-  span {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  i {
-    color: ${THEME.token?.bw8};
-  }
-
-  &.select {
-    border: 1px solid ${THEME.token?.bw3};
-    border-radius: 999px;
-  }
-
-  &.input {
-    border-bottom: 1px solid ${THEME.token?.colorPrimary};
-    width: 300px;
-  }
-
-  & .is-placeholder {
-    color: ${THEME.token?.bw6};
-    font-weight: normal;
-  }
+export const PopoverFieldStyled = styled.div `
+  box-sizing: border-box;
+  width: 190px;
+  height: 36px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10px;
+  cursor: pointer;
+
+  background-color: white;
+
+  font-size: 12px;
+  font-weight: bold;
+
+  span {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  i {
+    color: ${THEME.token?.bw8};
+  }
+
+  &.select {
+    border: 1px solid ${THEME.token?.bw3};
+    border-radius: 999px;
+  }
+
+  &.input {
+    border-bottom: 1px solid ${THEME.token?.colorPrimary};
+    width: 300px;
+  }
+
+  & .is-placeholder {
+    color: ${THEME.token?.bw6};
+    font-weight: normal;
+  }
 `;

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

@@ -2,29 +2,29 @@
 import { AutoComplete, Button } from 'antd';
 import styled from 'styled-components';
 import { Modal } from '../Modal';
-export const InputSuggestion = styled(AutoComplete) `
-  .antsomi-select-selector {
-    border-right: none !important;
-    border-left: none !important;
-    border-top: none !important;
-    border-bottom: 1px solid #d9d9d9 !important;
-  }
+export const InputSuggestion = styled(AutoComplete) `
+  .antsomi-select-selector {
+    border-right: none !important;
+    border-left: none !important;
+    border-top: none !important;
+    border-bottom: 1px solid #d9d9d9 !important;
+  }
 `;
-export const ModalCustom = styled(Modal) `
-  .antsomi-modal-body {
-    overflow: auto;
-    max-height: 500px;
-  }
+export const ModalCustom = styled(Modal) `
+  .antsomi-modal-body {
+    overflow: auto;
+    max-height: 500px;
+  }
 `;
-export const ButtonCustom = styled(Button) `
-  width: 64px;
-  background-color: rgb(191 219 254);
-
-  &:hover {
-    background-color: rgb(147 197 253);
-  }
-
-  &:focus {
-    background-color: rgb(147 197 253);
-  }
+export const ButtonCustom = styled(Button) `
+  width: 64px;
+  background-color: rgb(191 219 254);
+
+  &:hover {
+    background-color: rgb(147 197 253);
+  }
+
+  &:focus {
+    background-color: rgb(147 197 253);
+  }
 `;