@bioturing/components 0.13.2 → 0.14.0

package/dist/Select.js

@@ -3,18 +3,107 @@ import * as __WEBPACK_EXTERNAL_MODULE__bioturing_assets_dd0c210d__ from "@biotur
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_select_005d200f__ from "antd/es/select";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_checkbox_80658bc3__ from "antd/es/checkbox";
 import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
-const MainSelectInner = ({ mode, className, popupClassName, ...rest }, ref)=>{
+import * as __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__ from "@floating-ui/react";
+import "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE_es_toolkit_82663681__ from "es-toolkit";
+"use client";
+function useControlledState(value, onChange, defaultValue) {
+    const [internalState, setInternalState] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(defaultValue);
+    const isControlled = void 0 !== value;
+    const setState = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)((next)=>{
+        const nextValue = "function" == typeof next ? next(value) : next;
+        if ("function" == typeof onChange) onChange(nextValue);
+        if (!isControlled) setInternalState(next);
+    }, [
+        value,
+        onChange,
+        isControlled
+    ]);
+    const state = isControlled ? value : internalState;
+    return [
+        state,
+        setState
+    ];
+}
+function cx(...args) {
+    const classes = [];
+    for (const arg of args)if (arg) {
+        if ("string" == typeof arg || "number" == typeof arg) classes.push(String(arg));
+        else if (Array.isArray(arg)) classes.push(...cx(...arg));
+        else if ("object" == typeof arg) {
+            for (const [key, value] of Object.entries(arg))if (value) classes.push(key);
+        }
+    }
+    return classes;
+}
+function clsx(...args) {
+    return cx(...args).join(" ");
+}
+var constants_PopupPanelSize = /*#__PURE__*/ function(PopupPanelSize) {
+    PopupPanelSize["xsmall"] = "320px";
+    PopupPanelSize["small"] = "400px";
+    PopupPanelSize["medium"] = "480px";
+    PopupPanelSize["large"] = "640px";
+    PopupPanelSize["xlarge"] = "840px";
+    return PopupPanelSize;
+}({});
+const MainSelectInner = ({ mode, className, open: openProp, defaultOpen, onOpenChange, popupClassName, onDropdownVisibleChange, enhancePositioner, getPopupContainer, popupSize, popupRender, classNames, styles = {}, ...rest }, ref)=>{
+    var _classNames_popup;
+    const portalNode = (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.useFloatingPortalNode)({});
     const isMultiple = "multiple" === mode || "tags" === mode;
+    const [open, setOpen] = useControlledState(openProp, onOpenChange || onDropdownVisibleChange, defaultOpen);
+    const { floatingStyles, refs } = (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.useFloating)({
+        placement: "bottom-start",
+        transform: false,
+        open: enhancePositioner && open,
+        middleware: [
+            (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.offset)({
+                mainAxis: 4
+            }),
+            (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.autoPlacement)({
+                allowedPlacements: [
+                    "bottom-start",
+                    "bottom-end",
+                    "bottom",
+                    "top-start",
+                    "top-end",
+                    "top"
+                ]
+            }),
+            (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.shift)({
+                padding: 8
+            }),
+            (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.size)({
+                padding: 8,
+                apply ({ availableHeight, availableWidth, elements }) {
+                    elements.floating.style.setProperty("--available-width", availableWidth + "px");
+                    elements.floating.style.setProperty("--available-height", availableHeight + "px");
+                }
+            })
+        ],
+        whileElementsMounted: __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.autoUpdate
+    });
+    const dsPopupClassName = clsx("ds-select-popup", isMultiple && "ds-select-multiple", (null == classNames ? void 0 : null == (_classNames_popup = classNames.popup) ? void 0 : _classNames_popup.root) || popupClassName, enhancePositioner && "ds-select-popup-enhanced");
+    const popupWidth = popupSize && "string" == typeof popupSize && popupSize in constants_PopupPanelSize ? constants_PopupPanelSize[popupSize] : "number" == typeof popupSize ? popupSize + "px" : popupSize || "fit-content";
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_antd_es_select_005d200f__["default"], {
-        ref: ref,
+        ref: (node)=>{
+            if (ref) if ("function" == typeof ref) ref(node);
+            else ref.current = node;
+            if (!node) return;
+            refs.setReference(null == node ? void 0 : node.nativeElement);
+        },
         suffixIcon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__bioturing_assets_dd0c210d__.CaretDown, {
             weight: "bold"
         }),
-        popupClassName: [
-            "ds-select-popup",
-            isMultiple && "ds-select-multiple",
-            popupClassName
-        ].filter(Boolean).join(" "),
+        open: open,
+        onOpenChange: setOpen,
+        popupClassName: dsPopupClassName,
+        classNames: {
+            popup: {
+                root: dsPopupClassName
+            },
+            ...classNames
+        },
         ...isMultiple ? {
             menuItemSelectedIcon: ({ isSelected })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
                     className: "ant-select-checkbox-indicator",
@@ -26,10 +115,36 @@ const MainSelectInner = ({ mode, className, popupClassName, ...rest }, ref)=>{
                 })
         } : {},
         mode: mode,
-        className: [
-            "ds-select",
-            className
-        ].filter(Boolean).join(" "),
+        className: clsx("ds-select", className),
+        styles: enhancePositioner ? (0, __WEBPACK_EXTERNAL_MODULE_es_toolkit_82663681__.toMerged)(styles, {
+            popup: {
+                root: {
+                    transition: "none",
+                    ...floatingStyles,
+                    "--ds-select-popup-width": popupWidth
+                }
+            }
+        }) : styles,
+        getPopupContainer: getPopupContainer || (enhancePositioner ? ()=>portalNode || document.body : void 0),
+        popupRender: (menu)=>{
+            if (!enhancePositioner) return popupRender ? popupRender(menu) : menu;
+            return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.FloatingOverlay, {
+                        lockScroll: true,
+                        onClick: ()=>setOpen(false)
+                    }),
+                    /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                        ref: (node)=>{
+                            if (!node) return;
+                            const popupEl = node.closest(".ds-select-dropdown");
+                            refs.setFloating(popupEl);
+                        },
+                        children: popupRender ? popupRender(menu) : menu
+                    })
+                ]
+            });
+        },
         ...rest
     });
 };

package/dist/Table.js

@@ -53,7 +53,7 @@ const Empty = ({ image, size = "medium", className, ...rest })=>{
     });
 };
 const component = Empty;
-const InternalTable = ({ columns, locale, emptyDescription, loading, ...rest })=>{
+const InternalTable = ({ columns, locale, emptyDescription, loading, scroll = {}, ...rest })=>{
     const cls = useCls();
     const modifiedColumns = columns ? columns.map((column)=>({
             sortIcon: ({ sortOrder })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
@@ -107,7 +107,8 @@ const InternalTable = ({ columns, locale, emptyDescription, loading, ...rest })=
         loading: spinProps,
         locale: modifiedLocale,
         scroll: {
-            x: "max-content"
+            x: "fit-content",
+            ...scroll
         },
         ...rest
     });

package/dist/ThemeProvider.js

@@ -4,134 +4,276 @@ import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
 import "antd/es/theme/useToken";
 import "tailwind-merge";
 import * as __WEBPACK_EXTERNAL_MODULE__ant_design_cssinjs_c619260f__ from "@ant-design/cssinjs";
-const figmaToAntDesignTokens = {
-    lightMode: {
-        colorText: "rgba(0, 0, 0, 0.88)",
-        colorTextSecondary: "rgba(0, 0, 0, 0.65)",
-        colorTextTertiary: "rgba(0, 0, 0, 0.45)",
-        colorTextQuaternary: "rgba(0, 0, 0, 0.25)",
-        colorPrimary: "#175CD3",
-        colorPrimaryBg: "#E9F2FF",
-        colorPrimaryBgHover: "#D1E9FF",
-        colorPrimaryBorder: "#84CAFF",
-        colorPrimaryBorderHover: "#53B1FD",
-        colorPrimaryHover: "#1570EF",
-        colorPrimaryActive: "#175CD3",
-        colorPrimaryTextHover: "#1570EF",
-        colorPrimaryTextActive: "#175CD3",
-        colorInfo: "#175CD3",
-        colorInfoBg: "#E9F2FF",
-        colorInfoBgHover: "#D1E9FF",
-        colorInfoBorder: "#84CAFF",
-        colorInfoBorderHover: "#53B1FD",
-        colorInfoHover: "#1570EF",
-        colorInfoActive: "#175CD3",
-        colorInfoTextHover: "#1570EF",
-        colorInfoTextActive: "#175CD3",
-        colorSuccess: "#4CB200",
-        colorSuccessBg: "#F6FFF0",
-        colorSuccessBgHover: "#D9F7BE",
-        colorSuccessBorder: "#B7EB8F",
-        colorSuccessBorderHover: "#95DE64",
-        colorSuccessHover: "#73D13D",
-        colorSuccessActive: "#389E0D",
-        colorSuccessTextHover: "#237804",
-        colorSuccessTextActive: "#092B00",
-        colorWarning: "#FA8C16",
-        colorWarningBg: "#FFF7E6",
-        colorWarningBgHover: "#FFE7BA",
-        colorWarningBorder: "#FFD591",
-        colorWarningBorderHover: "#FFC069",
-        colorWarningHover: "#FFA940",
-        colorWarningActive: "#D46B08",
-        colorWarningTextHover: "#AD4E00",
-        colorWarningTextActive: "#873800",
-        colorError: "#D92D20",
-        colorErrorBg: "#FEF3F2",
-        colorErrorBgHover: "#FEE4E2",
-        colorErrorBorder: "#FDA29B",
-        colorErrorBorderHover: "#F97066",
-        colorErrorHover: "#F04438",
-        colorErrorActive: "#D92D20",
-        colorErrorTextHover: "#F04438",
-        colorErrorTextActive: "#D92D20",
-        colorFill: "rgba(0, 0, 0, 0.15)",
-        colorFillSecondary: "rgba(0, 0, 0, 0.06)",
-        colorFillTertiary: "rgba(0, 0, 0, 0.04)",
-        colorFillQuaternary: "rgba(0, 0, 0, 0.02)",
-        colorFillAlter: "rgba(0, 0, 0, 0.02)",
-        colorBorder: "rgba(0, 0, 0, 0.16)",
-        colorBorderSecondary: "rgba(0, 0, 0, 0.06)",
-        colorIcon: "rgba(0, 0, 0, 0.58)",
-        colorIconHover: "rgba(0, 0, 0, 0.88)",
-        controlOutline: "rgba(0, 0, 0, 0.12)"
-    },
-    darkMode: {
-        colorText: "rgba(255, 255, 255, 0.85)",
-        colorTextSecondary: "rgba(255, 255, 255, 0.65)",
-        colorTextTertiary: "rgba(255, 255, 255, 0.45)",
-        colorTextQuaternary: "rgba(255, 255, 255, 0.25)",
-        colorBgContainer: "#26262C",
-        colorBgElevated: "#2F2F37",
-        colorBgLayout: "#1A1A1E",
-        colorBgSpotlight: "#505D5D",
-        colorBgMask: "rgba(0, 0, 0, 0.45)",
-        colorBgBase: "#13131A",
-        colorFill: "rgba(255, 255, 255, 0.15)",
-        colorFillSecondary: "rgba(255, 255, 255, 0.06)",
-        colorFillTertiary: "rgba(255, 255, 255, 0.04)",
-        colorFillQuaternary: "rgba(255, 255, 255, 0.02)",
-        colorFillAlter: "rgba(255, 255, 255, 0.02)",
-        colorBorder: "rgba(255, 255, 255, 0.16)",
-        colorBorderSecondary: "rgba(255, 255, 255, 0.06)",
-        colorPrimary: "#2E90FA",
-        colorPrimaryBg: "#152137",
-        colorPrimaryBgHover: "#112545",
-        colorPrimaryBorder: "#1C3959",
-        colorPrimaryBorderHover: "#204C7C",
-        colorPrimaryHover: "#50A0E8",
-        colorPrimaryActive: "#2565AB",
-        colorPrimaryTextHover: "#50A0E8",
-        colorPrimaryTextActive: "#2565AB",
-        colorInfo: "#2E90FA",
-        colorInfoBg: "#152137",
-        colorInfoBgHover: "#112545",
-        colorInfoBorder: "#1C3959",
-        colorInfoBorderHover: "#204C7C",
-        colorInfoHover: "#50A0E8",
-        colorInfoActive: "#2565AB",
-        colorInfoTextHover: "#50A0E8",
-        colorInfoTextActive: "#2565AB",
-        colorSuccess: "#389E0D",
-        colorSuccessBg: "#162100",
-        colorSuccessBgHover: "#1D2B00",
-        colorSuccessBorder: "#274916",
-        colorSuccessBorderHover: "#306317",
-        colorSuccessHover: "#52C41A",
-        colorSuccessActive: "#237804",
-        colorSuccessTextHover: "#52C41A",
-        colorSuccessTextActive: "#237804",
-        colorWarning: "#D48806",
-        colorWarningBg: "#281800",
-        colorWarningBgHover: "#3D2200",
-        colorWarningBorder: "#443B16",
-        colorWarningBorderHover: "#594E1A",
-        colorWarningHover: "#E8B339",
-        colorWarningActive: "#AA7714",
-        colorWarningTextHover: "#E8B339",
-        colorWarningTextActive: "#AA7714",
-        colorError: "#CF3D33",
-        colorErrorBg: "#291414",
-        colorErrorBgHover: "#411A18",
-        colorErrorBorder: "#562222",
-        colorErrorBorderHover: "#772A24",
-        colorErrorHover: "#E5695A",
-        colorErrorActive: "#A3332B",
-        colorErrorTextHover: "#E5695A",
-        colorErrorTextActive: "#A3332B",
-        colorIcon: "rgba(255, 255, 255, 0.58)",
-        colorIconHover: "rgba(255, 255, 255, 0.88)",
-        controlOutline: "rgba(255, 255, 255, 0.12)"
+const getTokensByTheme = (originTokens, theme)=>{
+    const tokens = {};
+    Object.entries(originTokens).forEach(([key, value])=>{
+        if (value && "object" == typeof value && "light" in value && "dark" in value) {
+            const tokenValue = value;
+            tokens[key] = tokenValue[theme];
+        } else if ("string" == typeof value) tokens[key] = value;
+    });
+    return tokens;
+};
+const antdColorTokens = {
+    colorText: {
+        light: "rgba(0, 0, 0, 0.88)",
+        dark: "rgba(255, 255, 255, 0.85)"
+    },
+    colorTextSecondary: {
+        light: "rgba(0, 0, 0, 0.65)",
+        dark: "rgba(255, 255, 255, 0.65)"
+    },
+    colorTextTertiary: {
+        light: "rgba(0, 0, 0, 0.45)",
+        dark: "rgba(255, 255, 255, 0.45)"
+    },
+    colorTextQuaternary: {
+        light: "rgba(0, 0, 0, 0.25)",
+        dark: "rgba(255, 255, 255, 0.25)"
+    },
+    colorPrimary: {
+        light: "#175CD3",
+        dark: "#2E90FA"
+    },
+    colorPrimaryBg: {
+        light: "#E9F2FF",
+        dark: "#152137"
+    },
+    colorPrimaryBgHover: {
+        light: "#D1E9FF",
+        dark: "#112545"
+    },
+    colorPrimaryBorder: {
+        light: "#84CAFF",
+        dark: "#1C3959"
+    },
+    colorPrimaryBorderHover: {
+        light: "#53B1FD",
+        dark: "#204C7C"
+    },
+    colorPrimaryHover: {
+        light: "#1570EF",
+        dark: "#50A0E8"
+    },
+    colorPrimaryActive: {
+        light: "#175CD3",
+        dark: "#2565AB"
+    },
+    colorPrimaryTextHover: {
+        light: "#1570EF",
+        dark: "#50A0E8"
+    },
+    colorPrimaryTextActive: {
+        light: "#175CD3",
+        dark: "#2565AB"
+    },
+    colorInfo: {
+        light: "#175CD3",
+        dark: "#2E90FA"
+    },
+    colorInfoBg: {
+        light: "#E9F2FF",
+        dark: "#152137"
+    },
+    colorInfoBgHover: {
+        light: "#D1E9FF",
+        dark: "#112545"
+    },
+    colorInfoBorder: {
+        light: "#84CAFF",
+        dark: "#1C3959"
+    },
+    colorInfoBorderHover: {
+        light: "#53B1FD",
+        dark: "#204C7C"
+    },
+    colorInfoHover: {
+        light: "#1570EF",
+        dark: "#50A0E8"
+    },
+    colorInfoActive: {
+        light: "#175CD3",
+        dark: "#2565AB"
+    },
+    colorInfoTextHover: {
+        light: "#1570EF",
+        dark: "#50A0E8"
+    },
+    colorInfoTextActive: {
+        light: "#175CD3",
+        dark: "#2565AB"
+    },
+    colorSuccess: {
+        light: "#4CB200",
+        dark: "#389E0D"
+    },
+    colorSuccessBg: {
+        light: "#F6FFF0",
+        dark: "#162100"
+    },
+    colorSuccessBgHover: {
+        light: "#D9F7BE",
+        dark: "#1D2B00"
+    },
+    colorSuccessBorder: {
+        light: "#B7EB8F",
+        dark: "#274916"
+    },
+    colorSuccessBorderHover: {
+        light: "#95DE64",
+        dark: "#306317"
+    },
+    colorSuccessHover: {
+        light: "#73D13D",
+        dark: "#52C41A"
+    },
+    colorSuccessActive: {
+        light: "#389E0D",
+        dark: "#237804"
+    },
+    colorSuccessTextHover: {
+        light: "#237804",
+        dark: "#52C41A"
+    },
+    colorSuccessTextActive: {
+        light: "#092B00",
+        dark: "#237804"
+    },
+    colorWarning: {
+        light: "#FA8C16",
+        dark: "#D48806"
+    },
+    colorWarningBg: {
+        light: "#FFF7E6",
+        dark: "#281800"
+    },
+    colorWarningBgHover: {
+        light: "#FFE7BA",
+        dark: "#3D2200"
+    },
+    colorWarningBorder: {
+        light: "#FFD591",
+        dark: "#443B16"
+    },
+    colorWarningBorderHover: {
+        light: "#FFC069",
+        dark: "#594E1A"
+    },
+    colorWarningHover: {
+        light: "#FFA940",
+        dark: "#E8B339"
+    },
+    colorWarningActive: {
+        light: "#D46B08",
+        dark: "#AA7714"
+    },
+    colorWarningTextHover: {
+        light: "#AD4E00",
+        dark: "#E8B339"
+    },
+    colorWarningTextActive: {
+        light: "#873800",
+        dark: "#AA7714"
+    },
+    colorError: {
+        light: "#D92D20",
+        dark: "#CF3D33"
+    },
+    colorErrorBg: {
+        light: "#FEF3F2",
+        dark: "#291414"
+    },
+    colorErrorBgHover: {
+        light: "#FEE4E2",
+        dark: "#411A18"
+    },
+    colorErrorBorder: {
+        light: "#FDA29B",
+        dark: "#562222"
+    },
+    colorErrorBorderHover: {
+        light: "#F97066",
+        dark: "#772A24"
+    },
+    colorErrorHover: {
+        light: "#F04438",
+        dark: "#E5695A"
+    },
+    colorErrorActive: {
+        light: "#D92D20",
+        dark: "#A3332B"
+    },
+    colorErrorTextHover: {
+        light: "#F04438",
+        dark: "#E5695A"
+    },
+    colorErrorTextActive: {
+        light: "#D92D20",
+        dark: "#A3332B"
+    },
+    colorFill: {
+        light: "rgba(0, 0, 0, 0.15)",
+        dark: "rgba(255, 255, 255, 0.15)"
+    },
+    colorFillSecondary: {
+        light: "rgba(0, 0, 0, 0.06)",
+        dark: "rgba(255, 255, 255, 0.06)"
+    },
+    colorFillTertiary: {
+        light: "rgba(0, 0, 0, 0.04)",
+        dark: "rgba(255, 255, 255, 0.04)"
+    },
+    colorFillQuaternary: {
+        light: "rgba(0, 0, 0, 0.02)",
+        dark: "rgba(255, 255, 255, 0.02)"
+    },
+    colorFillAlter: {
+        light: "rgba(0, 0, 0, 0.02)",
+        dark: "rgba(255, 255, 255, 0.02)"
+    },
+    colorBorder: {
+        light: "rgba(0, 0, 0, 0.16)",
+        dark: "rgba(255, 255, 255, 0.16)"
+    },
+    colorBorderSecondary: {
+        light: "rgba(0, 0, 0, 0.06)",
+        dark: "rgba(255, 255, 255, 0.06)"
+    },
+    colorIcon: {
+        light: "rgba(0, 0, 0, 0.58)",
+        dark: "rgba(255, 255, 255, 0.58)"
+    },
+    colorIconHover: {
+        light: "rgba(0, 0, 0, 0.88)",
+        dark: "rgba(255, 255, 255, 0.88)"
+    },
+    colorBgContainer: {
+        light: "#FFFFFF",
+        dark: "#26262C"
+    },
+    colorBgElevated: {
+        light: "#FFFFFF",
+        dark: "#2F2F37"
+    },
+    colorBgLayout: {
+        light: "#F5F5F5",
+        dark: "#1A1A1E"
+    },
+    colorBgSpotlight: {
+        light: "rgba(0, 0, 0, 0.85)",
+        dark: "#505D5D"
+    },
+    colorBgMask: {
+        light: "rgba(0, 0, 0, 0.45)",
+        dark: "rgba(0, 0, 0, 0.45)"
+    },
+    colorBgBase: {
+        light: "#FFFFFF",
+        dark: "#13131A"
+    },
+    controlOutline: {
+        light: "rgba(0, 0, 0, 0.12)",
+        dark: "rgba(255, 255, 255, 0.12)"
     }
 };
 const sharedTokens = {
@@ -152,7 +294,7 @@ const sharedTokens = {
     lineHeightSM: 16 / 12,
     fontWeightStrong: 600,
     boxShadow: "0px 1px 2px rgba(0, 0, 0, 0.06), 0px 1px 6px rgba(0, 0, 0, 0.04), 0px 2px 10px rgba(0, 0, 0, 0.04)",
-    boxShadowSecondary: "0px 0px 1px rgba(0, 0, 0, 0.24), 0px 3px 6px 1px rgba(0, 0, 0, 0.08), 0px 6px 26px 2px rgba(0, 0, 0, 0.08), 0px 4px 52px rgba(0, 0, 0, 0.05)",
+    boxShadowSecondary: "0px 0px 1px 0px var(--ds-color-border-modal), 0px 3px 6px 1px rgba(0, 0, 0, 0.08), 0px 6px 26px 2px rgba(0, 0, 0, 0.08), 0px 4px 52px 0px rgba(0, 0, 0, 0.05)",
     colorBgSpotlight: "rgba(0, 0, 0, 0.85)"
 };
 const sharedThemeConfig = {
@@ -193,14 +335,14 @@ const sharedThemeConfig = {
 };
 const lightTheme = {
     token: {
-        ...figmaToAntDesignTokens.lightMode,
+        ...getTokensByTheme(antdColorTokens, "light"),
         ...sharedTokens
     },
     ...sharedThemeConfig
 };
 const darkTheme = {
     token: {
-        ...figmaToAntDesignTokens.darkMode,
+        ...getTokensByTheme(antdColorTokens, "dark"),
         ...sharedTokens
     },
     ...sharedThemeConfig