@wheelx/widget 0.0.1

package/dist/internal/stores/useDifferentAddressStore.js

@@ -0,0 +1,8 @@
+import { create } from 'zustand';
+export const useDifferentAddressStore = create((set) => ({
+    differentAddress: undefined,
+    setDifferentAddress: (differentAddress) => set({ differentAddress }),
+    isDepositPlatformToken: false,
+    setIsDepositPlatformToken: (isDepositPlatformToken) => set({ isDepositPlatformToken })
+}));
+//# sourceMappingURL=useDifferentAddressStore.js.map

package/dist/internal/stores/useDifferentAddressStore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDifferentAddressStore.js","sourceRoot":"","sources":["../../../src/internal/stores/useDifferentAddressStore.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAQhC,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAuB,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;IAC7E,gBAAgB,EAAE,SAAS;IAC3B,mBAAmB,EAAE,CAAC,gBAAgB,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACpE,sBAAsB,EAAE,KAAK;IAC7B,yBAAyB,EAAE,CAAC,sBAAsB,EAAE,EAAE,CACpD,GAAG,CAAC,EAAE,sBAAsB,EAAE,CAAC;CAClC,CAAC,CAAC,CAAA"}

package/dist/internal/ui/BoxWithBg.d.ts

@@ -0,0 +1,4 @@
+import { BoxProps } from '@chakra-ui/react';
+import { PropsWithChildren } from 'react';
+export declare const BoxWithBg: ({ children, ...props }: PropsWithChildren<BoxProps>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BoxWithBg.d.ts.map

package/dist/internal/ui/BoxWithBg.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoxWithBg.d.ts","sourceRoot":"","sources":["../../../src/internal/ui/BoxWithBg.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAEzC,eAAO,MAAM,SAAS,GAAI,wBAGvB,iBAAiB,CAAC,QAAQ,CAAC,4CAM7B,CAAA"}

package/dist/internal/ui/BoxWithBg.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@chakra-ui/react';
+export const BoxWithBg = ({ children, ...props }) => {
+    return (_jsx(Box, { w: '100%', bg: '#F5F6FF', borderRadius: '16px', p: 3, ...props, children: children }));
+};
+//# sourceMappingURL=BoxWithBg.js.map

package/dist/internal/ui/BoxWithBg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoxWithBg.js","sourceRoot":"","sources":["../../../src/internal/ui/BoxWithBg.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAY,MAAM,kBAAkB,CAAA;AAGhD,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACxB,QAAQ,EACR,GAAG,KAAK,EACoB,EAAE,EAAE;IAChC,OAAO,CACL,KAAC,GAAG,IAAC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,KAAM,KAAK,YACjE,QAAQ,GACL,CACP,CAAA;AACH,CAAC,CAAA"}

package/dist/internal/ui/WidgetAnimationsGlobalStyle.d.ts

@@ -0,0 +1,2 @@
+export declare const WidgetAnimationsGlobalStyle: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=WidgetAnimationsGlobalStyle.d.ts.map

package/dist/internal/ui/WidgetAnimationsGlobalStyle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetAnimationsGlobalStyle.d.ts","sourceRoot":"","sources":["../../../src/internal/ui/WidgetAnimationsGlobalStyle.tsx"],"names":[],"mappings":"AAaA,eAAO,MAAM,2BAA2B,+CAgTvC,CAAA"}

package/dist/internal/ui/WidgetAnimationsGlobalStyle.js

@@ -0,0 +1,312 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Global, css } from '@emotion/react';
+import wheelSprites from '../assets/images/wheel-sprites.png';
+import successSprites from '../assets/images/success-sprites.png';
+import errorImage from '../assets/images/error.png';
+import { getAssetSrc } from '../utils/getAssetSrc';
+const wheelSpriteUrl = getAssetSrc(wheelSprites);
+const successSpriteUrl = getAssetSrc(successSprites);
+const errorImageUrl = getAssetSrc(errorImage);
+export const WidgetAnimationsGlobalStyle = () => (_jsx(Global, { styles: css `
+      .animation-wheel {
+        width: 280px;
+        height: 280px;
+        background-image: url(${wheelSpriteUrl});
+        background-repeat: no-repeat;
+        animation-name: keyframes-wheel;
+        animation-duration: 5s;
+        animation-delay: 0s;
+        animation-iteration-count: infinite;
+        animation-fill-mode: forwards;
+        animation-timing-function: steps(1);
+      }
+
+      .animation-success {
+        width: 280px;
+        height: 280px;
+        background-image: url(${successSpriteUrl});
+        background-repeat: no-repeat;
+        animation-name: keyframes-success;
+        animation-duration: 2s;
+        animation-delay: 0s;
+        animation-iteration-count: 1;
+        animation-fill-mode: forwards;
+        animation-timing-function: steps(1);
+      }
+
+      .animation-loading {
+        animation-duration: 1s;
+        animation-iteration-count: 1;
+        animation-timing-function: ease-in-out;
+        transform-origin: center;
+      }
+
+      .failure {
+        width: 280px;
+        height: 280px;
+        background: url(${errorImageUrl}) no-repeat center center/126px 126px;
+      }
+
+      @keyframes keyframes-loading {
+        0% {
+          transform: rotate(0deg);
+        }
+
+        100% {
+          transform: rotate(-360deg);
+        }
+      }
+
+      @keyframes keyframes-wheel {
+        0% {
+          width: 280px;
+          height: 280px;
+          background-image: url(${wheelSpriteUrl});
+        }
+
+        3.13% {
+          background-position: -280px 0px;
+        }
+
+        6.25% {
+          background-position: -560px 0px;
+        }
+
+        9.38% {
+          background-position: -840px 0px;
+        }
+
+        12.5% {
+          background-position: -1120px 0px;
+        }
+
+        15.63% {
+          background-position: -1400px 0px;
+        }
+
+        18.75% {
+          background-position: -1680px 0px;
+        }
+
+        21.88% {
+          background-position: -1960px 0px;
+        }
+
+        25% {
+          background-position: -2240px 0px;
+        }
+
+        28.13% {
+          background-position: -2520px 0px;
+        }
+
+        31.25% {
+          background-position: -2800px 0px;
+        }
+
+        34.38% {
+          background-position: -3080px 0px;
+        }
+
+        37.5% {
+          background-position: -3360px 0px;
+        }
+
+        40.63% {
+          background-position: -3640px 0px;
+        }
+
+        43.75% {
+          background-position: -3920px 0px;
+        }
+
+        46.88% {
+          background-position: -4200px 0px;
+        }
+
+        50% {
+          background-position: -4480px 0px;
+        }
+
+        53.13% {
+          background-position: -4760px 0px;
+        }
+
+        56.25% {
+          background-position: -5040px 0px;
+        }
+
+        59.38% {
+          background-position: -5320px 0px;
+        }
+
+        62.5% {
+          background-position: -5600px 0px;
+        }
+
+        65.63% {
+          background-position: -5880px 0px;
+        }
+
+        68.75% {
+          background-position: -6160px 0px;
+        }
+
+        71.88% {
+          background-position: -6440px 0px;
+        }
+
+        75% {
+          background-position: -6720px 0px;
+        }
+
+        78.13% {
+          background-position: -7000px 0px;
+        }
+
+        81.25% {
+          background-position: -7280px 0px;
+        }
+
+        84.38% {
+          background-position: -7560px 0px;
+        }
+
+        87.5% {
+          background-position: -7840px 0px;
+        }
+
+        90.63% {
+          background-position: -8120px 0px;
+        }
+
+        93.75% {
+          background-position: -8400px 0px;
+        }
+
+        96.88%,
+        100% {
+          background-position: -8680px 0px;
+        }
+      }
+
+      @keyframes keyframes-success {
+        0% {
+          width: 280px;
+          height: 280px;
+          background-image: url(${successSpriteUrl});
+        }
+
+        3.85% {
+          background-position: -280px 0px;
+        }
+
+        7.69% {
+          background-position: -560px 0px;
+        }
+
+        11.54% {
+          background-position: -840px 0px;
+        }
+
+        15.38% {
+          background-position: -1120px 0px;
+        }
+
+        19.23% {
+          background-position: -1400px 0px;
+        }
+
+        23.08% {
+          background-position: -1680px 0px;
+        }
+
+        26.92% {
+          background-position: -1960px 0px;
+        }
+
+        30.77% {
+          background-position: -2240px 0px;
+        }
+
+        34.62% {
+          background-position: -2520px 0px;
+        }
+
+        38.46% {
+          background-position: -2800px 0px;
+        }
+
+        42.31% {
+          background-position: -3080px 0px;
+        }
+
+        46.15% {
+          background-position: -3360px 0px;
+        }
+
+        50% {
+          background-position: -3640px 0px;
+        }
+
+        53.85% {
+          background-position: -3920px 0px;
+        }
+
+        57.69% {
+          background-position: -4200px 0px;
+        }
+
+        61.54% {
+          background-position: -4480px 0px;
+        }
+
+        65.38% {
+          background-position: -4760px 0px;
+        }
+
+        69.23% {
+          background-position: -5040px 0px;
+        }
+
+        73.08% {
+          background-position: -5320px 0px;
+        }
+
+        76.92% {
+          background-position: -5600px 0px;
+        }
+
+        80.77% {
+          background-position: -5880px 0px;
+        }
+
+        84.62% {
+          background-position: -6160px 0px;
+        }
+
+        88.46% {
+          background-position: -6440px 0px;
+        }
+
+        92.31% {
+          background-position: -6720px 0px;
+        }
+
+        100% {
+          background-position: -7000px 0px;
+        }
+      }
+
+      @keyframes svg_loader {
+        0% {
+          stroke-dasharray: 0, 101;
+        }
+
+        100% {
+          stroke-dasharray: 65, 101;
+        }
+      }
+    ` }));
+//# sourceMappingURL=WidgetAnimationsGlobalStyle.js.map

package/dist/internal/ui/WidgetAnimationsGlobalStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetAnimationsGlobalStyle.js","sourceRoot":"","sources":["../../../src/internal/ui/WidgetAnimationsGlobalStyle.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAA;AAE5C,OAAO,YAAY,MAAM,oCAAoC,CAAA;AAC7D,OAAO,cAAc,MAAM,sCAAsC,CAAA;AACjE,OAAO,UAAU,MAAM,4BAA4B,CAAA;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAElD,MAAM,cAAc,GAAG,WAAW,CAAC,YAAY,CAAC,CAAA;AAChD,MAAM,gBAAgB,GAAG,WAAW,CAAC,cAAc,CAAC,CAAA;AACpD,MAAM,aAAa,GAAG,WAAW,CAAC,UAAU,CAAC,CAAA;AAE7C,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAG,EAAE,CAAC,CAC/C,KAAC,MAAM,IACL,MAAM,EAAE,GAAG,CAAA;;;;gCAIiB,cAAc;;;;;;;;;;;;;gCAad,gBAAgB;;;;;;;;;;;;;;;;;;;;0BAoBtB,aAAa;;;;;;;;;;;;;;;;;kCAiBL,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kCAqId,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiH7C,GACD,CACH,CAAA"}

package/dist/internal/ui/color-mode.d.ts

@@ -0,0 +1,22 @@
+import type { IconButtonProps, SpanProps } from '@chakra-ui/react';
+import type { ThemeProviderProps } from 'next-themes';
+import * as React from 'react';
+export interface ColorModeProviderProps extends ThemeProviderProps {
+}
+export declare function ColorModeProvider(props: ColorModeProviderProps): import("react/jsx-runtime").JSX.Element;
+export type ColorMode = 'light' | 'dark';
+export interface UseColorModeReturn {
+    colorMode: ColorMode;
+    setColorMode: (colorMode: ColorMode) => void;
+    toggleColorMode: () => void;
+}
+export declare function useColorMode(): UseColorModeReturn;
+export declare function useColorModeValue<T>(light: T, dark: T): T;
+export declare function ColorModeIcon(): import("react/jsx-runtime").JSX.Element;
+interface ColorModeButtonProps extends Omit<IconButtonProps, 'aria-label'> {
+}
+export declare const ColorModeButton: React.ForwardRefExoticComponent<ColorModeButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const LightMode: React.ForwardRefExoticComponent<SpanProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const DarkMode: React.ForwardRefExoticComponent<SpanProps & React.RefAttributes<HTMLSpanElement>>;
+export {};
+//# sourceMappingURL=color-mode.d.ts.map

package/dist/internal/ui/color-mode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-mode.d.ts","sourceRoot":"","sources":["../../../src/internal/ui/color-mode.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAGlE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,WAAW,sBAAuB,SAAQ,kBAAkB;CAAG;AAErE,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,2CAI9D;AAED,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;AAExC,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,SAAS,CAAA;IACpB,YAAY,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAA;IAC5C,eAAe,EAAE,MAAM,IAAI,CAAA;CAC5B;AAED,wBAAgB,YAAY,IAAI,kBAAkB,CAUjD;AAED,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,KAGrD;AAED,wBAAgB,aAAa,4CAG5B;AAGD,UAAU,oBAAqB,SAAQ,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC;CAAG;AAE7E,eAAO,MAAM,eAAe,gGAyB1B,CAAA;AAEF,eAAO,MAAM,SAAS,mFAcrB,CAAA;AAED,eAAO,MAAM,QAAQ,mFAcpB,CAAA"}

package/dist/internal/ui/color-mode.js

@@ -0,0 +1,44 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ClientOnly, IconButton, Skeleton, Span } from '@chakra-ui/react';
+import { ThemeProvider, useTheme } from 'next-themes';
+import * as React from 'react';
+import { LuMoon, LuSun } from 'react-icons/lu';
+export function ColorModeProvider(props) {
+    return (_jsx(ThemeProvider, { attribute: "class", disableTransitionOnChange: true, ...props }));
+}
+export function useColorMode() {
+    const { resolvedTheme, setTheme } = useTheme();
+    const toggleColorMode = () => {
+        setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
+    };
+    return {
+        colorMode: resolvedTheme,
+        setColorMode: setTheme,
+        toggleColorMode
+    };
+}
+export function useColorModeValue(light, dark) {
+    const { colorMode } = useColorMode();
+    return colorMode === 'dark' ? dark : light;
+}
+export function ColorModeIcon() {
+    const { colorMode } = useColorMode();
+    return colorMode === 'dark' ? _jsx(LuMoon, {}) : _jsx(LuSun, {});
+}
+export const ColorModeButton = React.forwardRef(function ColorModeButton(props, ref) {
+    const { toggleColorMode } = useColorMode();
+    return (_jsx(ClientOnly, { fallback: _jsx(Skeleton, { boxSize: "8" }), children: _jsx(IconButton, { onClick: toggleColorMode, variant: "ghost", "aria-label": "Toggle color mode", size: "sm", ref: ref, ...props, css: {
+                _icon: {
+                    width: '5',
+                    height: '5'
+                }
+            }, children: _jsx(ColorModeIcon, {}) }) }));
+});
+export const LightMode = React.forwardRef(function LightMode(props, ref) {
+    return (_jsx(Span, { color: "fg", display: "contents", className: "chakra-theme light", colorPalette: "gray", colorScheme: "light", ref: ref, ...props }));
+});
+export const DarkMode = React.forwardRef(function DarkMode(props, ref) {
+    return (_jsx(Span, { color: "fg", display: "contents", className: "chakra-theme dark", colorPalette: "gray", colorScheme: "dark", ref: ref, ...props }));
+});
+//# sourceMappingURL=color-mode.js.map

package/dist/internal/ui/color-mode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-mode.js","sourceRoot":"","sources":["../../../src/internal/ui/color-mode.tsx"],"names":[],"mappings":"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"}

package/dist/internal/ui/componentRecipes/button.d.ts

@@ -0,0 +1,123 @@
+export declare const buttonRecipe: import("@chakra-ui/react").RecipeDefinition<{
+    colorPalette: {
+        lightBlue: {
+            bg: "rgb(90 127 242)";
+            color: "white";
+            _hover: {
+                bg: "color-mix(in srgb, rgb(90 127 242) 90%, transparent)";
+            };
+        };
+        blue: {
+            bg: "rgba(0,82,255,1)";
+            color: "white";
+            _hover: {
+                bg: "color-mix(in srgb, rgba(0,82,255,1) 90%, transparent)";
+            };
+        };
+        red: {
+            bg: "rgba(255,4,33,1)";
+            color: "white";
+            _hover: {
+                bg: "color-mix(in srgb, rgba(255,4,33,1) 90%, transparent)";
+            };
+        };
+        lightCyan: {
+            bg: "#067eb7";
+            color: "white";
+            _hover: {
+                bg: "color-mix(in srgb, #067eb7 90%, transparent)";
+            };
+        };
+        black: {
+            bg: "blackAlpha.900";
+            color: "white";
+            _hover: {
+                bg: "color-mix(in srgb, var(--chakra-colors-black-alpha-900) 90%, transparent)";
+            };
+        };
+        pink: {
+            bg: "#f50cb4";
+            color: "white";
+            _hover: {
+                bg: "color-mix(in srgb, #f50cb4 90%, transparent)";
+            };
+        };
+        green: {
+            bg: "#09cd6e";
+            color: "white";
+            _hover: {
+                bg: "color-mix(in srgb, #09cd6e 90%, transparent)";
+            };
+        };
+        orange: {
+            bg: "#f25d00";
+            color: "white";
+            _hover: {
+                bg: "color-mix(in srgb, #f25d00 90%, transparent)";
+            };
+        };
+        teal: {
+            bg: "#98fbe5";
+            color: "blackAlpha.900";
+            _hover: {
+                bg: "color-mix(in srgb, #98fbe5 90%, transparent)";
+            };
+        };
+        purple: {
+            bg: "#8143FF";
+            color: "white";
+            _hover: {
+                bg: "color-mix(in srgb, #8143FF 90%, transparent)";
+            };
+        };
+        yellow900: {
+            bg: "#F6FF09";
+            color: "#083286";
+            _hover: {
+                bg: "color-mix(in srgb, #F6FF09 90%, transparent)";
+            };
+        };
+        green800: {
+            bg: "#00AB00";
+            color: "white";
+            _hover: {
+                bg: "color-mix(in srgb, #00AB00 90%, transparent)";
+            };
+        };
+        blue600: {
+            bg: "#02FEFF";
+            color: "#5E7290";
+            _hover: {
+                bg: "color-mix(in srgb, #02FEFF 90%, transparent)";
+            };
+        };
+        blue900: {
+            bg: "#02132f";
+            color: "#fff";
+            _hover: {
+                bg: "color-mix(in srgb, #02132f 90%, transparent)";
+            };
+        };
+        blue1000: {
+            bg: "#081e1b";
+            color: "#fff";
+            _hover: {
+                bg: "color-mix(in srgb, #081e1b 90%, transparent)";
+            };
+        };
+        wheel: {
+            bg: "linear-gradient(90deg, #4BBAFF 0%, #8143FF 100%)";
+            color: "white";
+            border: "none";
+            _hover: {
+                bg: "linear-gradient(90deg, #4BBAFF 0%, #8143FF 100%)";
+                opacity: number;
+            };
+            _disabled: {
+                bg: "linear-gradient(264.36deg, #B49BA4 0.54%, #869AA6 108.37%)";
+                opacity: number;
+            };
+        };
+    };
+}>;
+//# sourceMappingURL=button.d.ts.map

package/dist/internal/ui/componentRecipes/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/internal/ui/componentRecipes/button.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkGvB,CAAA"}

package/dist/internal/ui/componentRecipes/button.js

@@ -0,0 +1,101 @@
+import { defineRecipe } from '@chakra-ui/react';
+export const buttonRecipe = defineRecipe({
+    base: {
+        borderRadius: '8px'
+    },
+    variants: {
+        colorPalette: {
+            lightBlue: {
+                bg: 'rgb(90 127 242)',
+                color: 'white',
+                _hover: { bg: 'color-mix(in srgb, rgb(90 127 242) 90%, transparent)' }
+            },
+            blue: {
+                bg: 'rgba(0,82,255,1)',
+                color: 'white',
+                _hover: { bg: 'color-mix(in srgb, rgba(0,82,255,1) 90%, transparent)' }
+            },
+            red: {
+                bg: 'rgba(255,4,33,1)',
+                color: 'white',
+                _hover: { bg: 'color-mix(in srgb, rgba(255,4,33,1) 90%, transparent)' }
+            },
+            lightCyan: {
+                bg: '#067eb7',
+                color: 'white',
+                _hover: { bg: 'color-mix(in srgb, #067eb7 90%, transparent)' }
+            },
+            black: {
+                bg: 'blackAlpha.900',
+                color: 'white',
+                _hover: {
+                    bg: 'color-mix(in srgb, var(--chakra-colors-black-alpha-900) 90%, transparent)'
+                }
+            },
+            pink: {
+                bg: '#f50cb4',
+                color: 'white',
+                _hover: { bg: 'color-mix(in srgb, #f50cb4 90%, transparent)' }
+            },
+            green: {
+                bg: '#09cd6e',
+                color: 'white',
+                _hover: { bg: 'color-mix(in srgb, #09cd6e 90%, transparent)' }
+            },
+            orange: {
+                bg: '#f25d00',
+                color: 'white',
+                _hover: { bg: 'color-mix(in srgb, #f25d00 90%, transparent)' }
+            },
+            teal: {
+                bg: '#98fbe5',
+                color: 'blackAlpha.900',
+                _hover: { bg: 'color-mix(in srgb, #98fbe5 90%, transparent)' }
+            },
+            purple: {
+                bg: '#8143FF',
+                color: 'white',
+                _hover: { bg: 'color-mix(in srgb, #8143FF 90%, transparent)' }
+            },
+            yellow900: {
+                bg: '#F6FF09',
+                color: '#083286',
+                _hover: { bg: 'color-mix(in srgb, #F6FF09 90%, transparent)' }
+            },
+            green800: {
+                bg: '#00AB00',
+                color: 'white',
+                _hover: { bg: 'color-mix(in srgb, #00AB00 90%, transparent)' }
+            },
+            blue600: {
+                bg: '#02FEFF',
+                color: '#5E7290',
+                _hover: { bg: 'color-mix(in srgb, #02FEFF 90%, transparent)' }
+            },
+            blue900: {
+                bg: '#02132f',
+                color: '#fff',
+                _hover: { bg: 'color-mix(in srgb, #02132f 90%, transparent)' }
+            },
+            blue1000: {
+                bg: '#081e1b',
+                color: '#fff',
+                _hover: { bg: 'color-mix(in srgb, #081e1b 90%, transparent)' }
+            },
+            wheel: {
+                bg: 'linear-gradient(90deg, #4BBAFF 0%, #8143FF 100%)',
+                color: 'white',
+                border: 'none',
+                _hover: {
+                    bg: 'linear-gradient(90deg, #4BBAFF 0%, #8143FF 100%)',
+                    opacity: 0.9
+                },
+                _disabled: {
+                    bg: 'linear-gradient(264.36deg, #B49BA4 0.54%, #869AA6 108.37%)',
+                    opacity: 1
+                }
+            }
+        }
+    }
+});
+//# sourceMappingURL=button.js.map

package/dist/internal/ui/componentRecipes/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../src/internal/ui/componentRecipes/button.ts"],"names":[],"mappings":"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"}