@antscorp/antsomi-ui 1.3.5-beta.82 → 1.3.5-beta.821

package/es/{components/common → providers}/ConfigProvider/GlobalStyle.js

@@ -1,20 +1,40 @@
-// Libraries
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Global, css } from '@emotion/react';
 // Constants
-import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { THEME, globalToken } from '@antscorp/antsomi-ui/es/constants';
 // FontAwesome
 import { library } from '@fortawesome/fontawesome-svg-core';
 import { fas } from '@fortawesome/free-solid-svg-icons';
 import { far } from '@fortawesome/free-regular-svg-icons';
 import { fab } from '@fortawesome/free-brands-svg-icons';
 library.add(fas, far, fab);
-const { accent6, accent7, scrollBarSize } = THEME.token || {};
-export const GlobalStyle = () => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37;
-    return (React.createElement(Global, { styles: css `
+const { accent7, gray5, scrollBarSize, bw3, bw4, bw5 } = THEME.token || {};
+export const GlobalStyle = () => (_jsx(Global, { styles: css `
       @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
 
+      :root {
+        --divider-1: ${bw3};
+        --divider-2: ${bw4};
+        --divider-3: ${bw5};
+      }
+
+      *,
+      *:before,
+      *:after {
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+      }
+
+      hr {
+        border-color: var(--divider-1);
+      }
+
+      .rc-virtual-list-scrollbar {
+        width: 4px !important;
+        height: 4px !important;
+      }
+
       /* Custom */
       .antsomi-scrollbar-hidden {
         -ms-overflow-style: none; /* for Internet Explorer, Edge */
@@ -27,25 +47,92 @@ export const GlobalStyle = () => {
 
       /* width */
       ::-webkit-scrollbar {
-        width: ${scrollBarSize};
-        height: ${scrollBarSize};
+        background: transparent !important;
+        width: ${scrollBarSize} !important;
+        height: ${scrollBarSize} !important;
       }
 
       /* Track */
       ::-webkit-scrollbar-track {
-        background: ${accent6};
+        background: transparent !important;
       }
 
       /* Handle */
       ::-webkit-scrollbar-thumb {
-        background: ${accent7};
+        background-color: transparent;
+        border-radius: 4px;
+      }
+
+      *:hover {
+        &::-webkit-scrollbar-thumb {
+          background-color: ${gray5} !important;
+        }
+      }
+
+      .rc-virtual-list {
+        .rc-virtual-list-scrollbar-vertical {
+          width: ${scrollBarSize} !important;
+        }
+
+        .rc-virtual-list-scrollbar-thumb {
+          background: ${accent7} !important;
+        }
+      }
+
+      .custom-scrollbars {
+        &:hover {
+          > .scrollbar-track {
+            opacity: 1 !important;
+          }
+        }
       }
 
-      .scrollbar--gutter-stable {
+      .antsomi-scroll-box {
         overflow-y: auto;
-        scrollbar-gutter: stable;
-        margin-right: -${scrollBarSize};
-        padding-right: -${scrollBarSize};
+        scrollbar-gutter: stable !important;
+        margin-right: -${scrollBarSize} !important;
+
+        &.on-scroll {
+          ::-webkit-scrollbar-thumb {
+            display: block !important;
+          }
+        }
+
+        .scroll-content {
+          margin-right: -${scrollBarSize} !important;
+        }
+
+        ::-webkit-scrollbar {
+          width: ${scrollBarSize} !important;
+          height: ${scrollBarSize} !important;
+          background-color: transparent !important;
+        }
+
+        ::-webkit-scrollbar-track {
+          background-color: transparent !important;
+        }
+
+        ::-webkit-scrollbar-thumb {
+          background-color: ${gray5} !important;
+          border-radius: 15px !important;
+          display: none !important;
+
+          &:hover {
+            display: block !important;
+          }
+        }
+      }
+
+      /* Tooltip */
+      .antsomi-tooltip {
+        .antsomi-tooltip-content {
+          .antsomi-tooltip-inner {
+            a {
+              color: inherit;
+              font-weight: bold;
+            }
+          }
+        }
       }
 
       /* Button */
@@ -54,7 +141,7 @@ export const GlobalStyle = () => {
         display: inline-flex !important;
         align-items: center !important;
         justify-content: center !important;
-        gap: 5px !important;
+        gap: 8px;
 
         i {
           font-size: 20px;
@@ -63,20 +150,20 @@ export const GlobalStyle = () => {
 
       .antsomi-btn-default {
         &:not(:disabled):hover {
-          border-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue3} !important;
-          background-color: ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.blue} !important;
+          border-color: ${THEME.token?.blue3} !important;
+          background-color: ${THEME.token?.blue} !important;
         }
         &:not(:disabled).antsomi-btn-default-active {
-          border-color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorPrimary} !important;
-          background-color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.blue1_1} !important;
+          border-color: ${THEME.token?.colorPrimary} !important;
+          background-color: ${THEME.token?.blue1_1} !important;
         }
 
         &.antsomi-btn-dangerous {
-          border-color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.red2} !important;
+          border-color: ${THEME.token?.red2} !important;
 
           &:not(:disabled):hover {
-            border-color: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.red3} !important;
-            background-color: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.red} !important;
+            border-color: ${THEME.token?.red3} !important;
+            background-color: ${THEME.token?.red} !important;
           }
         }
 
@@ -84,28 +171,72 @@ export const GlobalStyle = () => {
           width: 36px !important;
           height: 36px !important;
         }
+
+        &.antsomi-btn-icon-only.antsomi-btn-default {
+          width: 30px !important;
+          height: 30px !important;
+        }
+
+        &.antsomi-btn-icon-only.antsomi-btn-sm {
+          /* Important to override the above code before */
+          width: 24px !important;
+          height: 24px !important;
+        }
       }
 
       .antsomi-btn-text:disabled,
       .antsomi-btn-link:disabled {
-        color: ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.bw6} !important;
+        color: ${THEME.token?.bw6} !important;
       }
 
-      .antsomi-btn-primary:disabled,
+      /* .antsomi-btn-primary:disabled, */
       .antsomi-btn-default:disabled,
       .antsomi-btn-dashed:disabled,
       .antsomi-btn-disabled,
       .antsomi-btn-default.antsomi-btn-dangerous:disabled,
       .antsomi-btn-primary.antsomi-btn-dangerous:disabled {
-        border-color: ${(_j = THEME.token) === null || _j === void 0 ? void 0 : _j.bw4} !important;
+        border-color: ${THEME.token?.bw4} !important;
       }
 
       .antsomi-btn-default:disabled,
       .antsomi-btn-dashed:disabled,
       .antsomi-btn-disabled,
       .antsomi-btn-default.antsomi-btn-dangerous:disabled {
-        color: ${(_k = THEME.token) === null || _k === void 0 ? void 0 : _k.bw6} !important;
-        background-color: ${(_l = THEME.token) === null || _l === void 0 ? void 0 : _l.bw2} !important;
+        color: ${THEME.token?.bw6} !important;
+        background-color: ${THEME.token?.bw2} !important;
+      }
+
+      // NOTE: Just hot fix for easy looking
+      .antsomi-btn-primary.antsomi-btn-compact-item.antsomi-btn-compact-first-item {
+        padding-right: 6px !important;
+      }
+      .antsomi-btn-compact-item.antsomi-btn-primary.antsomi-btn-compact-last-item {
+        width: fit-content;
+        //padding: 0px !important;
+        padding: 0px 4px !important;
+        &::before {
+          content: '';
+          position: absolute;
+          left: 0px;
+          background-color: ${globalToken?.blue5} !important;
+          top: auto !important;
+          height: 80% !important;
+          width: 1px !important;
+        }
+
+        &:disabled {
+          &::before {
+            background-color: ${globalToken?.bw4} !important;
+          }
+        }
+
+        &:not(:disabled) {
+          &:hover {
+            &::before {
+              opacity: 0;
+            }
+          }
+        }
       }
 
       /* Input */
@@ -115,28 +246,28 @@ export const GlobalStyle = () => {
         box-shadow: none !important;
 
         &:hover {
-          background-color: ${(_m = THEME.token) === null || _m === void 0 ? void 0 : _m.blue};
+          background-color: ${THEME.token?.blue};
         }
       }
 
       .antsomi-input {
         &:focus {
-          background-color: ${(_o = THEME.token) === null || _o === void 0 ? void 0 : _o.bw0};
+          background-color: ${THEME.token?.bw0};
         }
       }
 
       .antsomi-input-affix-wrapper {
         &:hover {
           > input.antsomi-input {
-            background-color: ${(_p = THEME.token) === null || _p === void 0 ? void 0 : _p.blue};
+            background-color: ${THEME.token?.blue};
           }
         }
 
         &.antsomi-input-affix-wrapper-focused {
-          background-color: ${(_q = THEME.token) === null || _q === void 0 ? void 0 : _q.bw0};
+          background-color: ${THEME.token?.bw0};
 
           > input.antsomi-input {
-            background-color: ${(_r = THEME.token) === null || _r === void 0 ? void 0 : _r.bw0};
+            background-color: ${THEME.token?.bw0};
           }
         }
       }
@@ -145,7 +276,7 @@ export const GlobalStyle = () => {
           .antsomi-input-borderless
         ).antsomi-input {
         &:hover {
-          background-color: ${(_s = THEME.token) === null || _s === void 0 ? void 0 : _s.red};
+          background-color: ${THEME.token?.red};
         }
       }
 
@@ -153,7 +284,7 @@ export const GlobalStyle = () => {
           .antsomi-input-borderless
         ).antsomi-input {
         &:hover {
-          background-color: ${(_t = THEME.token) === null || _t === void 0 ? void 0 : _t.gold1};
+          background-color: ${THEME.token?.gold1};
         }
       }
 
@@ -162,7 +293,7 @@ export const GlobalStyle = () => {
         ).antsomi-input-affix-wrapper {
         &:hover,
         &:hover > input.antsomi-input {
-          background-color: ${(_u = THEME.token) === null || _u === void 0 ? void 0 : _u.red};
+          background-color: ${THEME.token?.red};
         }
       }
 
@@ -171,10 +302,15 @@ export const GlobalStyle = () => {
         ).antsomi-input-affix-wrapper {
         &:hover,
         &:hover > input.antsomi-input {
-          background-color: ${(_v = THEME.token) === null || _v === void 0 ? void 0 : _v.gold1};
+          background-color: ${THEME.token?.gold1};
         }
       }
 
+      /* For custom search input */
+      .antsomi-input-affix-wrapper.antsomi-search-input:hover > input.antsomi-input {
+        background-color: transparent;
+      }
+
       // Select
       .antsomi-select .antsomi-select-arrow {
         right: 5px !important;
@@ -184,17 +320,17 @@ export const GlobalStyle = () => {
           .antsomi-pagination-size-changer
         ):hover
         .antsomi-select-selector {
-        border-color: ${(_w = THEME.token) === null || _w === void 0 ? void 0 : _w.blue1} !important;
-        background-color: ${(_x = THEME.token) === null || _x === void 0 ? void 0 : _x.blue} !important;
+        border-color: ${THEME.token?.blue1} !important;
+        background-color: ${THEME.token?.blue} !important;
       }
 
       .antsomi-select-disabled.antsomi-select:not(.antsomi-select-customize-input)
         .antsomi-select-selector {
-        border-color: ${(_y = THEME.token) === null || _y === void 0 ? void 0 : _y.bw4};
+        border-color: ${THEME.token?.bw4};
       }
 
       .antsomi-select-disabled.antsomi-select:not(.antsomi-select-customize-input) .antsomi-tag {
-        background-color: ${(_z = THEME.token) === null || _z === void 0 ? void 0 : _z.bw4} !important;
+        background-color: ${THEME.token?.bw4} !important;
       }
 
       .antsomi-select-selector {
@@ -202,8 +338,14 @@ export const GlobalStyle = () => {
         box-shadow: none !important;
       }
 
+      .antsomi-select-auto-complete {
+        .antsomi-select-selector {
+          border: none !important;
+        }
+      }
+
       .antsomi-select-dropdown {
-        padding: 0 !important;
+        padding: 8px 0 !important;
         z-index: 3002 !important;
       }
 
@@ -211,6 +353,11 @@ export const GlobalStyle = () => {
         gap: 5px;
       }
 
+      // Dropdown
+      .antsomi-dropdown-menu {
+        padding: 8px 0 !important;
+      }
+
       // Input Number
       .antsomi-input-number,
       .antsomi-input-number-affix-wrapper {
@@ -226,28 +373,28 @@ export const GlobalStyle = () => {
 
       .antsomi-input-number-group-addon {
         border-width: 0 0 1px 0 !important;
-        background-color: ${(_0 = THEME.token) === null || _0 === void 0 ? void 0 : _0.bw0} !important;
+        background-color: ${THEME.token?.bw0} !important;
         box-shadow: none !important;
       }
 
       .antsomi-input-number:hover {
-        background-color: ${(_1 = THEME.token) === null || _1 === void 0 ? void 0 : _1.blue};
+        background-color: ${THEME.token?.blue};
 
         .antsomi-input-number-handler {
-          background-color: ${(_2 = THEME.token) === null || _2 === void 0 ? void 0 : _2.blue};
+          background-color: ${THEME.token?.blue};
         }
       }
 
       .antsomi-input-number:focus,
       .antsomi-input-number-focused {
-        border-color: ${(_3 = THEME.token) === null || _3 === void 0 ? void 0 : _3.colorPrimary} !important;
+        border-color: ${THEME.token?.colorPrimary} !important;
       }
 
       .antsomi-input-number-handler {
         border: none !important;
 
         &:hover i {
-          color: ${(_4 = THEME.token) === null || _4 === void 0 ? void 0 : _4.colorPrimary};
+          color: ${THEME.token?.colorPrimary};
         }
       }
 
@@ -259,17 +406,17 @@ export const GlobalStyle = () => {
 
       .antsomi-picker:hover,
       .antsomi-picker-focused {
-        background-color: ${(_5 = THEME.token) === null || _5 === void 0 ? void 0 : _5.blue};
+        background-color: ${THEME.token?.blue};
       }
 
       .antsomi-picker:not(.antsomi-picker-status-error) .antsomi-picker-suffix {
-        color: ${(_6 = THEME.token) === null || _6 === void 0 ? void 0 : _6.bw10};
+        color: ${THEME.token?.bw10};
       }
 
       .antsomi-picker:not(.antsomi-picker-disabled).antsomi-picker-status-error:not(
           [disabled]
         ):hover {
-        background-color: ${(_7 = THEME.token) === null || _7 === void 0 ? void 0 : _7.red} !important;
+        background-color: ${THEME.token?.red} !important;
       }
 
       // Custom
@@ -278,6 +425,10 @@ export const GlobalStyle = () => {
       }
 
       .antsomi-picker-dropdown__advanced {
+        &.antsomi-picker-dropdown > .antsomi-picker-panel-container {
+          border-radius: 10px;
+        }
+
         > .antsomi-picker-panel-container > .antsomi-picker-panel-layout > .antsomi-picker-panel {
           flex-direction: column-reverse;
           padding-bottom: 60px;
@@ -316,11 +467,11 @@ export const GlobalStyle = () => {
             }
 
             .antsomi-picker-time-panel-cell-selected {
-              background-color: ${(_8 = THEME.token) === null || _8 === void 0 ? void 0 : _8.colorPrimary};
+              background-color: ${THEME.token?.colorPrimary};
               color: #fff;
             }
             .antsomi-picker-time-panel-cell-selected:hover {
-              background-color: ${(_9 = THEME.token) === null || _9 === void 0 ? void 0 : _9.colorPrimary};
+              background-color: ${THEME.token?.colorPrimary};
             }
 
             .antsomi-picker-cell-inner {
@@ -539,14 +690,14 @@ export const GlobalStyle = () => {
         .antsomi-slider-rail {
           border-radius: 2px !important;
           transition: background-color 0.3s !important;
-          background-color: ${(_10 = THEME.token) === null || _10 === void 0 ? void 0 : _10.accent1} !important;
+          background-color: ${THEME.token?.accent1} !important;
         }
 
         .antsomi-slider-track {
           position: absolute !important;
           border-radius: 2px !important;
           transition: background-color 0.3s !important;
-          background-color: ${(_11 = THEME.token) === null || _11 === void 0 ? void 0 : _11.colorPrimary} !important;
+          background-color: ${THEME.token?.colorPrimary} !important;
         }
 
         .antsomi-slider-step {
@@ -563,7 +714,9 @@ export const GlobalStyle = () => {
           border-radius: 50%;
           box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 2px 0px;
           cursor: pointer;
-          transition: border-color 0.3s, box-shadow 0.6s,
+          transition:
+            border-color 0.3s,
+            box-shadow 0.6s,
             transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28) !important;
         }
 
@@ -580,16 +733,16 @@ export const GlobalStyle = () => {
         }
 
         .antsomi-slider-handle::after {
-          background-color: ${(_12 = THEME.token) === null || _12 === void 0 ? void 0 : _12.colorPrimary} !important;
+          background-color: ${THEME.token?.colorPrimary} !important;
         }
 
         &:hover {
           .antsomi-slider-track {
-            background-color: ${(_13 = THEME.token) === null || _13 === void 0 ? void 0 : _13.colorPrimary} !important;
+            background-color: ${THEME.token?.colorPrimary} !important;
           }
 
           .antsomi-slider-rail {
-            background-color: ${(_14 = THEME.token) === null || _14 === void 0 ? void 0 : _14.accent1} !important;
+            background-color: ${THEME.token?.accent1} !important;
           }
 
           .antsomi-slider-handle::after {
@@ -597,7 +750,7 @@ export const GlobalStyle = () => {
           }
 
           .antsomi-slider-handle {
-            border-color: ${(_15 = THEME.token) === null || _15 === void 0 ? void 0 : _15.colorPrimary} !important;
+            border-color: ${THEME.token?.colorPrimary} !important;
           }
         }
 
@@ -607,8 +760,8 @@ export const GlobalStyle = () => {
 
         &.antsomi-slider-disabled {
           .antsomi-slider-handle {
-            background-color: ${(_16 = THEME.token) === null || _16 === void 0 ? void 0 : _16.accent2} !important;
-            border-color: ${(_17 = THEME.token) === null || _17 === void 0 ? void 0 : _17.accent2} !important;
+            background-color: ${THEME.token?.accent2} !important;
+            border-color: ${THEME.token?.accent2} !important;
           }
         }
       }
@@ -622,8 +775,8 @@ export const GlobalStyle = () => {
           padding-left: 20px;
           padding-right: 20px;
           font-family: 'Roboto';
-          color: ${(_18 = THEME.token) === null || _18 === void 0 ? void 0 : _18.colorTextBase};
-          font-size: ${(_19 = THEME.token) === null || _19 === void 0 ? void 0 : _19.fontSize}px;
+          color: ${THEME.token?.colorTextBase};
+          font-size: ${THEME.token?.fontSize}px;
 
           &:focus-within {
             --tw-shadow: 0 0 #0000;
@@ -633,31 +786,31 @@ export const GlobalStyle = () => {
           }
 
           &:first-child {
-            border-top-left-radius: ${(_20 = THEME.token) === null || _20 === void 0 ? void 0 : _20.borderRadius}px;
-            border-bottom-left-radius: ${(_21 = THEME.token) === null || _21 === void 0 ? void 0 : _21.borderRadius}px;
+            border-top-left-radius: ${THEME.token?.borderRadius}px;
+            border-bottom-left-radius: ${THEME.token?.borderRadius}px;
           }
 
           &:last-child {
-            border-top-right-radius: ${(_22 = THEME.token) === null || _22 === void 0 ? void 0 : _22.borderRadius}px;
-            border-bottom-right-radius: ${(_23 = THEME.token) === null || _23 === void 0 ? void 0 : _23.borderRadius}px;
+            border-top-right-radius: ${THEME.token?.borderRadius}px;
+            border-bottom-right-radius: ${THEME.token?.borderRadius}px;
           }
 
           &.antsomi-radio-button-wrapper-checked {
-            border-color: ${(_24 = THEME.token) === null || _24 === void 0 ? void 0 : _24.accent1};
-            background-color: ${(_25 = THEME.token) === null || _25 === void 0 ? void 0 : _25.colorTextActive};
-            color: ${(_26 = THEME.token) === null || _26 === void 0 ? void 0 : _26.colorPrimary};
+            border-color: ${THEME.token?.accent1};
+            background-color: ${THEME.token?.colorTextActive};
+            color: ${THEME.token?.colorPrimary};
             font-weight: 700;
 
             &::before {
-              background-color: ${(_27 = THEME.token) === null || _27 === void 0 ? void 0 : _27.accent1};
+              background-color: ${THEME.token?.accent1};
             }
           }
         }
 
         .antsomi-radio-wrapper {
           font-family: 'Roboto';
-          color: ${(_28 = THEME.token) === null || _28 === void 0 ? void 0 : _28.colorTextBase};
-          font-size: ${(_29 = THEME.token) === null || _29 === void 0 ? void 0 : _29.fontSize}px;
+          color: ${THEME.token?.colorTextBase};
+          font-size: ${THEME.token?.fontSize}px;
           margin-right: 0;
 
           .antsomi-radio-disabled {
@@ -677,6 +830,7 @@ export const GlobalStyle = () => {
           }
 
           .antsomi-radio-inner::after {
+            flex-shrink: 0;
             position: unset !important;
             transition: none !important;
             transform: scale(0.6);
@@ -688,12 +842,12 @@ export const GlobalStyle = () => {
             .antsomi-radio-inner {
               width: 16px;
               height: 16px;
-              border-color: ${(_30 = THEME.token) === null || _30 === void 0 ? void 0 : _30.colorPrimary};
+              border-color: ${THEME.token?.colorPrimary};
               border-width: 2px;
-              background-color: ${(_31 = THEME.token) === null || _31 === void 0 ? void 0 : _31.bw0};
+              background-color: ${THEME.token?.bw0};
 
               &::after {
-                background-color: ${(_32 = THEME.token) === null || _32 === void 0 ? void 0 : _32.colorPrimary};
+                background-color: ${THEME.token?.colorPrimary};
               }
             }
           }
@@ -704,9 +858,28 @@ export const GlobalStyle = () => {
         }
       }
 
+      /* Checkbox */
+      .antsomi-checkbox-wrapper {
+        .antsomi-checkbox-indeterminate {
+          .antsomi-checkbox-inner::after {
+            width: 10px !important;
+            height: 2px !important;
+          }
+        }
+
+        .antsomi-checkbox-indeterminate:not(.antsomi-checkbox-disabled) {
+          .antsomi-checkbox-inner {
+            background-color: ${THEME.token?.colorPrimary} !important;
+            &::after {
+              background-color: ${THEME.token?.bw0} !important;
+            }
+          }
+        }
+      }
+
       /* Modal Close */
       .antsomi-modal-root .antsomi-modal-wrap {
-        z-index: 3001 !important;
+        z-index: 3001;
       }
 
       .antsomi-modal .antsomi-modal-close {
@@ -728,8 +901,8 @@ export const GlobalStyle = () => {
             word-wrap: break-word;
           }
         }
+
         .antsomi-modal-body {
-          font-size: 14px !important;
           p {
             margin: 0;
           }
@@ -738,8 +911,16 @@ export const GlobalStyle = () => {
 
             .antsomi-modal-confirm-body {
               display: flex;
-              gap: 13px;
-              color: ${(_33 = THEME.token) === null || _33 === void 0 ? void 0 : _33.colorPrimary};
+
+              /* Style for icon */
+              > i {
+                color: ${THEME.token?.colorPrimary};
+                margin-right: 13px;
+              }
+            }
+
+            .antsomi-modal-confirm-body:has(i) ~ .antsomi-modal-confirm-btns {
+              padding-left: 30px;
             }
 
             .antsomi-modal-confirm-btns {
@@ -747,7 +928,6 @@ export const GlobalStyle = () => {
               flex-direction: row-reverse;
               justify-content: start;
               gap: 8px;
-              padding-left: 30px;
 
               .antsomi-btn {
                 margin: 0px;
@@ -756,6 +936,7 @@ export const GlobalStyle = () => {
           }
         }
         .antsomi-modal-footer {
+          margin-top: 0px;
           padding: 15px !important;
           text-align: right;
           background: transparent;
@@ -763,6 +944,20 @@ export const GlobalStyle = () => {
           border-radius: 0 0 2px 2px;
         }
       }
+      /* Override style for Modal confirm in Editor Tab */
+      .editor-tab__modal-confirm .antsomi-modal-content .antsomi-modal-body {
+        .antsomi-modal-confirm-body-wrapper {
+          padding: 0;
+
+          .antsomi-modal-confirm-body {
+            padding: 20px 20px 0 20px;
+          }
+          .antsomi-modal-confirm-btns {
+            padding: 12px 20px 20px;
+            border-top: 1px solid ${THEME.token?.bw4};
+          }
+        }
+      }
 
       /* Message Notification */
       .ant-message {
@@ -776,7 +971,7 @@ export const GlobalStyle = () => {
 
       .antsomi-collapse {
         &.antsomi-collapse-borderless {
-          border-bottom: 1px solid ${(_34 = THEME.token) === null || _34 === void 0 ? void 0 : _34.gray5};
+          border-bottom: 1px solid ${THEME.token?.gray5};
         }
 
         > .antsomi-collapse-item > .antsomi-collapse-header .antsomi-collapse-arrow {
@@ -786,24 +981,37 @@ export const GlobalStyle = () => {
 
       /* Switch */
       .antsomi-switch {
-        border: 2px solid ${(_35 = THEME.token) === null || _35 === void 0 ? void 0 : _35.colorPrimary} !important;
+        border: 2px solid ${THEME.token?.colorPrimary} !important;
 
         &.antsomi-switch-checked {
           > .antsomi-switch-handle {
             &::before {
-              background-color: ${(_36 = THEME.token) === null || _36 === void 0 ? void 0 : _36.bw0} !important;
+              background-color: ${THEME.token?.bw0} !important;
             }
           }
         }
+
+        .antsomi-switch-inner {
+          padding-inline-start: 4px !important;
+          padding-inline-end: 18px !important;
+        }
       }
 
       /* Tabs */
       .antsomi-tabs {
         .antsomi-tabs-tab {
-          &.antsomi-tabs-tab-active {
-            font-weight: bold;
+          font-weight: bold;
+
+          &:not(.antsomi-tabs-tab-active):hover {
+            background-color: ${THEME.token?.blue};
           }
         }
+        .antsomi-tabs-tab-active {
+          z-index: 2;
+        }
+        .antsomi-tabs-nav::before {
+          z-index: 1;
+        }
       }
 
       /* Form */
@@ -828,15 +1036,122 @@ export const GlobalStyle = () => {
             padding: 0 !important;
           }
         }
+        .antsomi-popover-inner {
+          overflow: hidden;
+        }
+
+        &.antsomi-emoji-popover .antsomi-popover-inner {
+          padding: 15px;
+          width: 530px;
+          height: 275px;
+        }
       }
 
       /* Menu */
       .antsomi-menu {
         .antsomi-menu-submenu.antsomi-menu-submenu-selected {
           .antsomi-menu-item.antsomi-menu-item-selected {
-            background-color: ${(_37 = THEME.token) === null || _37 === void 0 ? void 0 : _37.blue};
+            background-color: ${THEME.token?.blue};
+          }
+        }
+      }
+
+      .antsomi-typography {
+        &.antsomi-typography-danger,
+        &.antsomi-typography-warning {
+          font-size: 11px;
+        }
+      }
+
+      /* Tree */
+      .antsomi-tree-list {
+        .antsomi-tree-treenode {
+          align-items: center !important;
+
+          .antsomi-tree-checkbox {
+            margin: 3px 0px;
+          }
+        }
+
+        > .antsomi-tree-list-scrollbar-vertical {
+          width: ${scrollBarSize} !important;
+
+          > .antsomi-tree-list-scrollbar-thumb {
+            background: ${accent7} !important;
+          }
+        }
+      }
+
+      /* Checkbox */
+      .antsomi-checkbox,
+      .antsomi-tree-checkbox {
+        &.antsomi-checkbox-disabled,
+        &.antsomi-tree-checkbox-disabled {
+          .antsomi-checkbox-inner,
+          .antsomi-tree-checkbox-inner {
+            background-color: ${globalToken?.bw0};
+            border-color: ${globalToken?.bw5} !important;
+          }
+
+          &.antsomi-checkbox-checked,
+          &.antsomi-tree-checkbox-checked {
+            .antsomi-checkbox-inner,
+            .antsomi-tree-checkbox-inner {
+              background-color: ${globalToken?.bw5};
+
+              &::after {
+                border-color: ${globalToken?.bw0};
+              }
+            }
           }
         }
       }
+
+      /* Tags */
+      .antsomi-tag {
+        padding-inline: 10px !important;
+        align-items: center;
+        display: flex !important;
+        line-height: 1;
+        min-height: 24px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        .antsomi-tag-close-icon {
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%);
+          right: 4px;
+          opacity: 0;
+        }
+
+        &:hover {
+          .antsomi-tag-close-icon {
+            opacity: 1;
+          }
+        }
+      }
+
+      /* Notification */
+      .antsomi-notification-notice {
+        display: flex;
+        max-width: 340px !important;
+
+        .antsomi-notification-notice-content {
+          display: flex;
+          flex: 1;
+        }
+
+        .antsomi-notification-notice-with-icon {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+        }
+
+        .antsomi-notification-notice-close {
+          position: relative !important;
+          top: 0 !important;
+          inset-inline-end: 0 !important;
+        }
+      }
     ` }));
-};