@ensofinance/checkout-widget 0.0.1

package/orval.config.ts

@@ -0,0 +1,25 @@
+export default {
+    enso: {
+        output: {
+            baseUrl: "https://api.enso.finance",
+            mode: "single",
+            prettier: true,
+            target: "src/enso-api/index.ts",
+            schemas: "src/enso-api/model",
+            client: "react-query",
+            override: {
+                query: {
+                    options: {
+                        refetchInterval: 30_000,
+                        retry: 2,
+                    },
+                },
+                mutator: {
+                    path: "./src/enso-api/custom-instance.ts",
+                    name: "useCustomClient",
+                },
+            },
+        },
+        input: "https://api.enso.finance/api-yaml",
+    },
+};

package/package.json

@@ -0,0 +1,79 @@
+{
+    "name": "@ensofinance/checkout-widget",
+    "version": "0.0.1",
+    "type": "module",
+    "homepage": "https://www.enso.build/",
+    "repository": {
+        "url": "https://github.com/EnsoFinance/checkout-widget",
+        "type": "git",
+        "directory": "widget"
+    },
+    "author": "Enso finance",
+    "license": "MIT",
+    "description": "Multi-purpose widget utilizing Enso API",
+    "pnpm": {
+        "overrides": {
+            "viem": "2.32.0"
+        }
+    },
+    "scripts": {
+        "bump": "npm version patch",
+        "generate-api": "orval",
+        "publish": "npm publish --access public",
+        "dev": "vite build --watch --mode=dev --minify=false --sourcemap=false --emptyOutDir=false",
+        "build": "vite build",
+        "preview": "vite preview"
+    },
+    "dependencies": {
+        "@chakra-ui/react": "^3.19.1",
+        "@emotion/cache": "^11.14.0",
+        "@emotion/react": "^11.14.0",
+        "@ensofinance/checkout-ui-library": "^0.0.2",
+        "@ensofinance/sdk": "^1.0.18",
+        "@meshconnect/web-link-sdk": "^3.2.14",
+        "@uidotdev/usehooks": "^2.4.1",
+        "axios": "^1.11.0",
+        "lucide-react": "^0.469.0",
+        "next-themes": "^0.4.4",
+        "posthog-js": "^1.223.3",
+        "react-icons": "^5.4.0",
+        "react-shadow": "^20.6.0",
+        "react-window": "^1.8.11",
+        "url": "^0.11.4",
+        "viem": "^2.33.2",
+        "zustand": "^5.0.3"
+    },
+    "peerDependencies": {
+        "@tanstack/react-query": "^5.62.10",
+        "react": "^18.2.0 || ^19.0.0",
+        "react-dom": "^18.2.0 || ^19.0.0",
+        "wagmi": "^2.14.12"
+    },
+    "devDependencies": {
+        "@eslint/js": "^9.17.0",
+        "@types/react": "^18.3.18",
+        "@types/react-dom": "^18.3.5",
+        "@vitejs/plugin-react": "^4.3.4",
+        "eslint": "^9.17.0",
+        "eslint-plugin-react-hooks": "^5.0.0",
+        "eslint-plugin-react-refresh": "^0.4.16",
+        "globals": "^15.14.0",
+        "orval": "^7.10.0",
+        "prettier": "^3.4.2",
+        "typescript": "~5.8.2",
+        "typescript-eslint": "^8.18.2",
+        "vite": "^6.0.5",
+        "vite-plugin-dts": "^4.4.0",
+        "vite-plugin-lib-inject-css": "^2.2.1",
+        "vite-tsconfig-paths": "^5.1.4"
+    },
+    "main": "./dist/checkout-widget.umd.js",
+    "module": "./dist/checkout-widget.es.js",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/checkout-widget.es.js",
+            "require": "./dist/checkout-widget.umd.js"
+        }
+    }
+}

package/src/assets/BinanceBadge.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.5" width="32" height="32" rx="16" fill="#2F2B32"/>
+<path d="M22.5582 20.6133L16.0006 27.1709L9.4469 20.6172L9.44397 20.6133L11.858 18.2061L16.0006 22.3496L20.1481 18.2021L22.5582 20.6133ZM18.4469 16.502L16.0006 18.9521L13.5543 16.5059V16.498L13.984 16.0693L14.194 15.8633L16.0006 14.0557L18.4469 16.502ZM26.6666 16.5029L24.2565 18.9131L21.8473 16.5029L24.2565 14.0928L26.6666 16.5029ZM10.153 16.501L7.7428 18.9111L5.33264 16.501L7.7428 14.0908L10.153 16.501ZM22.5582 12.3906L20.1481 14.8018L16.0006 10.6543L11.858 14.7979L9.4469 12.3867L16.0006 5.83301L22.5582 12.3906Z" fill="#F3BA2F"/>
+</svg>

package/src/assets/CoinbaseIcon.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.5" width="32" height="32" rx="16" fill="#0052FF"/>
+<path d="M16.0064 21.85C13.0504 21.85 10.6561 19.4558 10.6561 16.4998C10.6561 13.5438 13.0504 11.1495 16.0064 11.1495C18.6548 11.1495 20.8528 13.0801 21.2764 15.6081H26.6667C26.212 10.1152 21.6152 5.79932 16.0064 5.79932C10.0988 5.79932 5.30591 10.5922 5.30591 16.4998C5.30591 22.4073 10.0988 27.2002 16.0064 27.2002C21.6152 27.2002 26.212 22.8844 26.6667 17.3915H21.2719C20.8484 19.9195 18.6548 21.85 16.0064 21.85Z" fill="white"/>
+</svg>

package/src/assets/USD Coin (USDC).svg

@@ -0,0 +1,5 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.1667 21.3333C17.0778 21.3333 21.8333 16.5778 21.8333 10.6667C21.8333 4.75552 17.0778 0 11.1667 0C5.25552 0 0.5 4.75552 0.5 10.6667C0.5 16.5778 5.25552 21.3333 11.1667 21.3333Z" fill="#2775CA"/>
+<path d="M14.1001 12.3555C14.1001 10.7999 13.1667 10.2666 11.3001 10.0444C9.96672 9.8666 9.70005 9.51108 9.70005 8.88879C9.70005 8.26649 10.1445 7.8666 11.0334 7.8666C11.8334 7.8666 12.2779 8.13327 12.5001 8.79993C12.5445 8.93327 12.6779 9.02212 12.8112 9.02212H13.5222C13.7001 9.02212 13.8334 8.88879 13.8334 8.71108V8.6666C13.6556 7.68879 12.8556 6.93327 11.8334 6.84441V5.77775C11.8334 5.59993 11.7001 5.4666 11.4779 5.42212H10.8112C10.6334 5.42212 10.5001 5.55545 10.4556 5.77775V6.79993C9.12224 6.97775 8.27786 7.8666 8.27786 8.97775C8.27786 10.4444 9.16672 11.0221 11.0334 11.2444C12.2779 11.4666 12.6779 11.7333 12.6779 12.4444C12.6779 13.1556 12.0556 13.6444 11.2112 13.6444C10.0556 13.6444 9.65557 13.1555 9.52224 12.4888C9.47786 12.3111 9.34453 12.2221 9.2112 12.2221H8.45557C8.27786 12.2221 8.14453 12.3555 8.14453 12.5333V12.5777C8.32224 13.6888 9.03338 14.4888 10.5001 14.7111V15.7777C10.5001 15.9555 10.6334 16.0888 10.8556 16.1333H11.5222C11.7001 16.1333 11.8334 15.9999 11.8779 15.7777V14.7111C13.2112 14.4888 14.1001 13.5555 14.1001 12.3555Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.94453 8.48879C3.65557 11.9111 5.43339 15.7778 8.90005 17.0221C9.03339 17.1111 9.16672 17.2888 9.16672 17.4221V18.0444C9.16672 18.1333 9.16672 18.1778 9.12224 18.2221C9.07786 18.3999 8.90005 18.4888 8.72224 18.3999C6.23339 17.5999 4.32224 15.6888 3.52224 13.1999C2.18891 8.97775 4.50005 4.48879 8.72224 3.15546C8.76672 3.11108 8.85557 3.11108 8.90005 3.11108C9.07786 3.15546 9.16672 3.28879 9.16672 3.4666V4.08879C9.16672 4.31108 9.07786 4.44442 8.90005 4.53327C7.07786 5.19994 5.6112 6.62212 4.94453 8.48879ZM13.2112 3.33327C13.2556 3.15546 13.4334 3.0666 13.6112 3.15546C16.0556 3.95546 18.0112 5.8666 18.8112 8.39994C20.1445 12.6221 17.8334 17.1111 13.6112 18.4444C13.5667 18.4888 13.4779 18.4888 13.4334 18.4888C13.2556 18.4444 13.1667 18.3111 13.1667 18.1333V17.5111C13.1667 17.2888 13.2556 17.1555 13.4334 17.0666C15.2556 16.3999 16.7222 14.9778 17.3889 13.1111C18.6779 9.68879 16.9001 5.82212 13.4334 4.57775C13.3001 4.48879 13.1667 4.31108 13.1667 4.13327V3.51108C13.1667 3.42212 13.1667 3.37775 13.2112 3.33327Z" fill="white"/>
+</svg>

package/src/assets/avecIcon.svg

@@ -0,0 +1,5 @@
+<svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1.3335" y="0.833496" width="11.6667" height="11.6667" rx="5.83333" stroke="white"/>
+<circle cx="7.16683" cy="6.66683" r="5.33333" fill="#E84142"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.48594 2.91662C7.30117 2.59746 7.0072 2.59746 6.82243 2.91662L3.46704 8.82528C3.28227 9.14864 3.43345 9.40481 3.803 9.40481H5.48699C5.82715 9.38381 6.13371 9.20323 6.31849 8.91767L8.34684 5.40271C8.49382 5.10034 8.49382 4.74339 8.34684 4.44103L7.74211 3.37856L7.48594 2.91662ZM9.71586 6.80533C9.53109 6.48617 9.23293 6.48617 9.04815 6.80533L7.8765 8.82528C7.69592 9.14444 7.8471 9.4048 8.21245 9.4048H10.5306C10.9001 9.4048 11.0513 9.14444 10.8665 8.82528L9.71586 6.80533Z" fill="white"/>
+</svg>

package/src/assets/depositIcon.svg

@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="18" height="18" rx="9" stroke="white" stroke-width="2"/>
+<path d="M17.7589 11.9352C16.6904 16.221 12.3496 18.8292 8.06336 17.7605C3.77889 16.692 1.17066 12.351 2.23959 8.06558C3.30758 3.77935 7.64835 1.17093 11.9333 2.23939C16.2192 3.30785 18.8273 7.64936 17.7587 11.9353L17.7588 11.9352H17.7589Z" fill="#14AE5C"/>
+<path d="M11.9997 4.66675C12.3679 4.66675 12.6663 4.96522 12.6663 5.33341C12.6663 5.7016 12.3679 6.00008 11.9997 6.00008H7.99967C7.63148 6.00008 7.33301 5.7016 7.33301 5.33341C7.33301 4.96522 7.63148 4.66675 7.99967 4.66675H11.9997Z" fill="white"/>
+<path d="M12.0003 7.33325C12.3685 7.33325 12.667 7.63173 12.667 7.99992V9.33325H14.667C14.9366 9.33325 15.1797 9.49564 15.2829 9.74471C15.386 9.99383 15.329 10.2806 15.1383 10.4713L10.4717 15.1379C10.2113 15.3983 9.7893 15.3983 9.52895 15.1379L4.86229 10.4713C4.67162 10.2806 4.61457 9.99383 4.71775 9.74471C4.82096 9.49564 5.06403 9.33325 5.33364 9.33325H7.33364V7.99992C7.33364 7.63173 7.63212 7.33325 8.00031 7.33325H12.0003ZM8.66697 9.99992C8.66697 10.3681 8.3685 10.6666 8.00031 10.6666H6.94301L10.0003 13.7239L13.0576 10.6666H12.0003C11.6321 10.6666 11.3336 10.3681 11.3336 9.99992V8.66659H8.66697V9.99992Z" fill="white"/>
+</svg>

package/src/assets/ethMainnetIcon.svg

@@ -0,0 +1,10 @@
+<svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1.3335" y="0.833496" width="11.6667" height="11.6667" rx="5.83333" stroke="white"/>
+<circle cx="7.16683" cy="6.66683" r="5.33333" fill="#EDF0F4"/>
+<path d="M7.15229 3.4668L7.10986 3.61091V7.7924L7.15229 7.83472L9.09325 6.68741L7.15229 3.4668Z" fill="#343434"/>
+<path d="M7.15243 3.4668L5.21143 6.68741L7.15243 7.83472V5.80515V3.4668Z" fill="#8C8C8C"/>
+<path d="M7.15233 8.20214L7.12842 8.2313V9.72081L7.15233 9.79062L9.09448 7.05542L7.15233 8.20214Z" fill="#3C3C3B"/>
+<path d="M7.15243 9.79062V8.20214L5.21143 7.05542L7.15243 9.79062Z" fill="#8C8C8C"/>
+<path d="M7.15234 7.83475L9.0933 6.68743L7.15234 5.80518V7.83475Z" fill="#1E171F"/>
+<path d="M5.21143 6.68743L7.15243 7.83475V5.80518L5.21143 6.68743Z" fill="#393939"/>
+</svg>

package/src/assets/fail.svg

@@ -0,0 +1,5 @@
+<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="29" cy="29" r="29" fill="#E84142"/>
+<path d="M34.2929 22.2929C34.6834 21.9024 35.3164 21.9024 35.707 22.2929C36.0975 22.6834 36.0975 23.3164 35.707 23.707L23.707 35.707C23.3164 36.0975 22.6834 36.0975 22.2929 35.707C21.9024 35.3164 21.9024 34.6834 22.2929 34.2929L34.2929 22.2929Z" fill="white"/>
+<path d="M22.2929 22.2929C22.6834 21.9024 23.3164 21.9024 23.707 22.2929L35.707 34.2929L35.7753 34.3691C36.0957 34.7618 36.0731 35.3408 35.707 35.707C35.3408 36.0731 34.7618 36.0957 34.3691 35.7753L34.2929 35.707L22.2929 23.707C21.9024 23.3164 21.9024 22.6834 22.2929 22.2929Z" fill="white"/>
+</svg>

package/src/assets/logo.svg

@@ -0,0 +1,10 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_126_8587)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.3686 10.6232C16.3715 10.6146 16.359 10.6097 16.355 10.6179C14.975 13.5085 12.2144 15.5112 8.66017 15.5112C4.88611 15.5112 1.35008 12.688 1.35008 8.37011C1.35008 4.65011 4.30812 1.56104 7.74213 1.56104C10.6321 1.56104 12.6382 3.28819 12.6382 4.51714C12.6382 5.08189 12.2642 5.48041 11.6862 5.48041C10.3602 5.48041 9.85022 3.15536 7.33413 3.15536C4.78406 3.15536 2.6081 5.54683 2.6081 8.37011C2.6081 12.0238 5.56614 14.4153 8.52417 14.4153C9.68043 14.4153 10.322 14.1182 10.5073 14.0169C10.515 14.0126 10.51 14.0012 10.5017 14.0037C10.3174 14.0604 9.73839 14.2159 8.93211 14.2159C5.29405 14.2159 3.83206 11.4591 3.83206 9.66544C3.83206 8.30367 4.71606 7.73906 5.43016 7.73906C7.33413 7.73906 7.06219 11.7248 11.7542 11.7248C14.2023 11.7248 16.4803 10.0972 16.4803 6.87544C16.4803 3.22178 12.9442 0 8.66017 0C4.17214 0 0.5 3.554 0.5 7.97156C0.5 12.4223 4.30812 15.9763 8.66017 15.9763C12.4804 15.9763 15.3429 13.5242 16.3686 10.6232Z" fill="#1E171F"/>
+</g>
+<defs>
+<clipPath id="clip0_126_8587">
+<rect width="16" height="16" fill="white" transform="translate(0.5)"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/success.svg

@@ -0,0 +1,4 @@
+<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="29" cy="29" r="29" fill="#14AE5C"/>
+<path d="M36.2929 22.2929C36.6834 21.9024 37.3164 21.9024 37.707 22.2929C38.0975 22.6834 38.0975 23.3164 37.707 23.707L26.707 34.707C26.3164 35.0975 25.6834 35.0975 25.2929 34.707L20.2929 29.707C19.9024 29.3164 19.9024 28.6834 20.2929 28.2929C20.659 27.9268 21.238 27.9042 21.6308 28.2245L21.707 28.2929L25.9999 32.5859L36.2929 22.2929Z" fill="white"/>
+</svg>

package/src/components/BridgeFee.tsx

@@ -0,0 +1,58 @@
+import { useEnsoPrice, useEnsoToken } from "@/enso-api/api";
+import {
+    compareCaseInsensitive,
+    formatNumber,
+    formatUSD,
+    normalizeValue,
+} from "@/util";
+import { ETH_ADDRESS } from "@/util/constants";
+import { useAppDetails, useRouteData } from "@/util/enso-hooks";
+import { useMemo } from "react";
+import { Text } from "@chakra-ui/react";
+import { Fuel } from "lucide-react";
+import { Tooltip } from "./ui/tooltip";
+
+const BridgingFee = () => {
+    const { routerData } = useRouteData();
+    const { tokenIn, chainIdIn, amountIn } = useAppDetails();
+    const { data: nativeTokenPriceData } = useEnsoPrice(chainIdIn, ETH_ADDRESS);
+    const {
+        data: [nativeTokenInfo],
+    } = useEnsoToken(ETH_ADDRESS, chainIdIn);
+
+    const gasValue = useMemo(() => {
+        let txCost = +(routerData?.tx?.value ?? 0);
+
+        if (compareCaseInsensitive(tokenIn, ETH_ADDRESS)) {
+            txCost -= +amountIn;
+        }
+
+        return normalizeValue(Math.max(0, txCost).toString(), 18);
+    }, [routerData?.tx?.value, tokenIn, amountIn]);
+
+    const gasCostUSD = +gasValue * +(nativeTokenPriceData ?? 0);
+
+    return (
+        <Text
+            title={"Bridging fee"}
+            cursor={"default"}
+            display={"flex"}
+            alignItems={"center"}
+            gap={1}
+            color="fg.subtle"
+            fontSize={"xs"}
+        >
+            <Fuel size={12} />
+            {/* {formatNumber(gasValue, true)} {nativeTokenInfo?.symbol},{" "} */}
+            <Tooltip
+                content={`${formatNumber(gasValue, true)} ${nativeTokenInfo?.symbol}`}
+            >
+                <Text fontSize={"xs"} color="fg.subtle">
+                    {formatUSD(gasCostUSD)}
+                </Text>
+            </Tooltip>
+        </Text>
+    );
+};
+
+export default BridgingFee;

package/src/components/ChakraProvider.tsx

@@ -0,0 +1,372 @@
+import {
+    ChakraProvider as ChakraProviderWrapper,
+    EnvironmentProvider,
+    SystemConfig,
+    createSystem,
+    defaultConfig,
+    defineConfig,
+    defineRecipe,
+    defineSlotRecipe,
+} from "@chakra-ui/react";
+import { tableAnatomy, selectAnatomy } from "@chakra-ui/react/anatomy";
+import { CacheProvider } from "@emotion/react";
+import { useEffect, useMemo, useState } from "react";
+import createCache from "@emotion/cache";
+import root from "react-shadow/emotion";
+
+const varRoot = ":host";
+
+export const buttonRecipe = defineRecipe({
+    base: {
+        display: "flex",
+        width: "100%",
+        justifyContent: "center",
+        alignItems: "center",
+        borderRadius: "md",
+    },
+    variants: {
+        variant: {
+            primary: { bg: "primary", color: "bg" },
+            secondary: { bg: "bg.emphasized", color: "fg" },
+            lightGray: { bg: "bg.subtle", color: "fg" },
+        },
+        size: {
+            mdPlus: {
+                padding: "8px 16px",
+                fontSize: "14px",
+                fontWeight: "medium",
+            },
+        },
+    },
+});
+
+export const inputRecipe = defineRecipe({
+    variants: {
+        variant: {
+            text: {
+                border: "none",
+                outline: "none",
+                bg: "transparent",
+                color: "fg",
+                textAlign: "center",
+                fontSize: "48px",
+                fontWeight: 600,
+                lineHeight: "120%",
+            },
+        },
+    },
+});
+
+export const selectSlotRecipe = defineSlotRecipe({
+    slots: selectAnatomy.keys(),
+    base: {
+        trigger: {
+            borderRadius: "6px",
+            boxShadow: "none",
+        },
+        content: {
+            borderRadius: "6px",
+            boxShadow: "none",
+        },
+    },
+    variants: {
+        variant: {
+            filled: {
+                trigger: {
+                    bg: "bg.subtle",
+                    color: "fg.muted",
+                    fontWeight: 500,
+                },
+                content: {
+                    bg: "bg.subtle",
+                    color: "fg.muted",
+                    fontWeight: 400,
+                },
+            },
+            customOutline: {
+                trigger: {
+                    bg: "bg",
+                    color: "fg.muted",
+                    fontWeight: 400,
+                    border: "1px solid",
+                    borderColor: "border",
+                },
+                content: {
+                    bg: "bg",
+                    color: "fg.muted",
+                    fontWeight: 400,
+                    border: "1px solid",
+                    borderColor: "border",
+                },
+            },
+        },
+    },
+});
+
+export const tableSlotRecipe = defineSlotRecipe({
+    className: "chakra-table",
+    slots: tableAnatomy.keys(),
+    base: {
+        root: {
+            fontVariantNumeric: "lining-nums tabular-nums",
+            borderCollapse: "collapse",
+            borderRadius: 6,
+            width: "full",
+            textAlign: "start",
+            verticalAlign: "top",
+        },
+        row: {
+            _selected: {
+                bg: "colorPalette.subtle",
+            },
+        },
+        cell: {
+            textAlign: "start",
+            alignItems: "center",
+        },
+        columnHeader: {
+            fontWeight: "medium",
+            textAlign: "start",
+            color: "fg",
+        },
+        caption: {
+            fontWeight: "medium",
+            textStyle: "xs",
+        },
+        footer: {
+            fontWeight: "medium",
+        },
+    },
+
+    variants: {
+        interactive: {
+            true: {
+                // @ts-ignore
+                body: {
+                    "& tr": {
+                        _hover: {
+                            bg: "colorPalette.subtle",
+                        },
+                    },
+                },
+            },
+        },
+
+        stickyHeader: {
+            true: {
+                header: {
+                    "& :where(tr)": {
+                        top: "var(--table-sticky-offset, 0)",
+                        position: "sticky",
+                        zIndex: 1,
+                    },
+                },
+            },
+        },
+
+        striped: {
+            true: {
+                row: {
+                    "&:nth-of-type(odd) td": {
+                        bg: "bg.muted",
+                    },
+                },
+            },
+        },
+
+        showColumnBorder: {
+            true: {
+                columnHeader: {
+                    "&:not(:last-of-type)": {
+                        borderInlineEndWidth: "1px",
+                    },
+                },
+                cell: {
+                    "&:not(:last-of-type)": {
+                        borderInlineEndWidth: "1px",
+                    },
+                },
+            },
+        },
+
+        variant: {
+            line: {
+                columnHeader: {
+                    borderBottomWidth: "1px",
+                },
+                cell: {
+                    borderBottomWidth: "1px",
+                },
+                row: {
+                    bg: "bg",
+                },
+            },
+
+            outline: {
+                root: {
+                    boxShadow: "0 0 0 1px {colors.border}",
+                    overflow: "hidden",
+                },
+                columnHeader: {
+                    borderBottomWidth: "1px",
+                },
+                header: {
+                    bg: "bg.muted",
+                },
+                row: {
+                    "&:not(:last-of-type)": {
+                        borderBottomWidth: "1px",
+                    },
+                },
+                footer: {
+                    borderTopWidth: "1px",
+                },
+            },
+        },
+
+        size: {
+            sm: {
+                root: {
+                    textStyle: "sm",
+                },
+                columnHeader: {
+                    px: "2",
+                    py: "2",
+                },
+                cell: {
+                    px: "2",
+                    py: "2",
+                },
+            },
+
+            md: {
+                root: {
+                    textStyle: "sm",
+                },
+                columnHeader: {
+                    px: "3",
+                    py: "3",
+                },
+                cell: {
+                    px: "3",
+                    py: "3",
+                },
+            },
+
+            lg: {
+                root: {
+                    textStyle: "md",
+                },
+                columnHeader: {
+                    px: "4",
+                    py: "3",
+                },
+                cell: {
+                    px: "4",
+                    py: "3",
+                },
+            },
+        },
+    },
+
+    defaultVariants: {
+        // @ts-ignore
+        variant: "line",
+        size: "md",
+    },
+});
+
+export const config = defineConfig({
+    theme: {
+        semanticTokens: {
+            colors: {
+                border: {
+                    value: "#E4E4E7",
+                },
+                "border.emphasized": {
+                    value: "#1e171f4d",
+                },
+                primary: { value: "black" },
+                customBlack: { value: "#1E171F" },
+                customWhite: { value: "#FAFAFA" },
+                gray: {
+                    50: { value: "#F4F4F5" },
+                    100: { value: "#707070" },
+                    200: { value: "#F4F4F5" },
+                    300: { value: "#E4E4E7" },
+                    400: { value: "#433E44" },
+                },
+                pink: { value: "#FF21FF" },
+                green: { value: "#52C86E" },
+            },
+        },
+        recipes: {
+            input: inputRecipe,
+            button: buttonRecipe,
+        },
+        slotRecipes: {
+            select: selectSlotRecipe,
+            table: tableSlotRecipe,
+        },
+    },
+});
+
+const ChakraProvider = ({
+    children,
+    themeConfig,
+}: {
+    children: React.ReactNode;
+    themeConfig?: SystemConfig;
+}) => {
+    const [shadow, setShadow] = useState<HTMLElement | null>(null);
+    const [cache, setCache] = useState<ReturnType<typeof createCache> | null>(
+        null,
+    );
+
+    useEffect(() => {
+        if (!shadow?.shadowRoot || cache) return;
+        const emotionCache = createCache({
+            key: "root",
+            container: shadow.shadowRoot,
+        });
+        setCache(emotionCache);
+    }, [shadow, cache]);
+
+    const system = useMemo(
+        () =>
+            createSystem(defaultConfig, config, themeConfig, {
+                cssVarsRoot: varRoot,
+                preflight: { scope: varRoot },
+                conditions: {
+                    light: `${varRoot} &, .light &`,
+                },
+                globalCss: {
+                    [varRoot]: {
+                        ...defaultConfig.globalCss?.html,
+                        borderRadius: "xl",
+                        shadow: "sm",
+                        border: "none",
+                    },
+                },
+            }),
+        [themeConfig],
+    );
+
+    return (
+        <root.div ref={setShadow}>
+            {shadow && cache && (
+                <EnvironmentProvider
+                    value={() => shadow.shadowRoot ?? document}
+                >
+                    <CacheProvider value={cache}>
+                        <ChakraProviderWrapper value={system}>
+                            {children}
+                        </ChakraProviderWrapper>
+                    </CacheProvider>
+                </EnvironmentProvider>
+            )}
+        </root.div>
+    );
+};
+
+export default ChakraProvider;