frosted-ui 0.0.1-canary.9 → 0.0.1-canary.91

package/dist/esm/icons.js

@@ -1,34 +1,50 @@
 import * as React from 'react';
-const ThickCheckIcon = React.forwardRef(({ color = 'currentColor', ...props }, forwardedRef) => {
-    return (React.createElement("svg", { width: "9", height: "9", viewBox: "0 0 9 9", fill: color, xmlns: "http://www.w3.org/2000/svg", ...props, ref: forwardedRef },
+const ThickCheckIcon = (props) => {
+    const { color = 'currentColor', ...restProps } = props;
+    return (React.createElement("svg", { width: "9", height: "9", viewBox: "0 0 9 9", fill: color, xmlns: "http://www.w3.org/2000/svg", ...restProps },
         React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.53547 0.62293C8.88226 0.849446 8.97976 1.3142 8.75325 1.66099L4.5083 8.1599C4.38833 8.34356 4.19397 8.4655 3.9764 8.49358C3.75883 8.52167 3.53987 8.45309 3.3772 8.30591L0.616113 5.80777C0.308959 5.52987 0.285246 5.05559 0.563148 4.74844C0.84105 4.44128 1.31533 4.41757 1.62249 4.69547L3.73256 6.60459L7.49741 0.840706C7.72393 0.493916 8.18868 0.396414 8.53547 0.62293Z" })));
-});
+};
 ThickCheckIcon.displayName = 'ThickCheckIcon';
-const ChevronDownIcon = React.forwardRef(({ color = 'currentColor', ...props }, forwardedRef) => {
-    return (React.createElement("svg", { width: "9", height: "9", viewBox: "0 0 9 9", fill: color, xmlns: "http://www.w3.org/2000/svg", ...props, ref: forwardedRef },
-        React.createElement("path", { d: "M0.135232 3.15803C0.324102 2.95657 0.640521 2.94637 0.841971 3.13523L4.5 6.56464L8.158 3.13523C8.3595 2.94637 8.6759 2.95657 8.8648 3.15803C9.0536 3.35949 9.0434 3.67591 8.842 3.86477L4.84197 7.6148C4.64964 7.7951 4.35036 7.7951 4.15803 7.6148L0.158031 3.86477C-0.0434285 3.67591 -0.0536285 3.35949 0.135232 3.15803Z" })));
-});
-ChevronDownIcon.displayName = 'ChevronDownIcon';
-const ThickChevronRightIcon = React.forwardRef(({ color = 'currentColor', ...props }, forwardedRef) => {
-    return (React.createElement("svg", { width: "9", height: "9", viewBox: "0 0 9 9", fill: color, xmlns: "http://www.w3.org/2000/svg", ...props, ref: forwardedRef },
+const ThickChevronRightIcon = (props) => {
+    const { color = 'currentColor', ...restProps } = props;
+    return (React.createElement("svg", { width: "9", height: "9", viewBox: "0 0 9 9", fill: color, xmlns: "http://www.w3.org/2000/svg", ...restProps },
         React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.23826 0.201711C3.54108 -0.0809141 4.01567 -0.0645489 4.29829 0.238264L7.79829 3.98826C8.06724 4.27642 8.06724 4.72359 7.79829 5.01174L4.29829 8.76174C4.01567 9.06455 3.54108 9.08092 3.23826 8.79829C2.93545 8.51567 2.91909 8.04108 3.20171 7.73826L6.22409 4.5L3.20171 1.26174C2.91909 0.958928 2.93545 0.484337 3.23826 0.201711Z" })));
-});
+};
 ThickChevronRightIcon.displayName = 'ThickChevronRightIcon';
-const ChevronRightIcon = React.forwardRef(({ color = 'currentColor', ...props }, forwardedRef) => {
-    return (React.createElement("svg", { width: "6", height: "10", viewBox: "0 0 6 10", xmlns: "http://www.w3.org/2000/svg", fill: color, ...props, ref: forwardedRef },
+const ChevronRightIcon = (props) => {
+    const { color = 'currentColor', ...restProps } = props;
+    return (React.createElement("svg", { width: "6", height: "10", viewBox: "0 0 6 10", xmlns: "http://www.w3.org/2000/svg", fill: color, ...restProps },
         React.createElement("path", { d: "M1.25 9.625C1.07422 9.625 0.917969 9.56641 0.800781 9.44922C0.546875 9.21484 0.546875 8.80469 0.800781 8.57031L4.10156 5.25L0.800781 1.94922C0.546875 1.71484 0.546875 1.30469 0.800781 1.07031C1.03516 0.816406 1.44531 0.816406 1.67969 1.07031L5.42969 4.82031C5.68359 5.05469 5.68359 5.46484 5.42969 5.69922L1.67969 9.44922C1.5625 9.56641 1.40625 9.625 1.25 9.625Z" })));
-});
+};
 ChevronRightIcon.displayName = 'ChevronRightIcon';
-const TriangleDownIcon = React.forwardRef(({ color = 'currentColor', ...props }, forwardedRef) => {
-    return (React.createElement("svg", { width: "6", height: "7", viewBox: "0 0 6 7", fill: color, xmlns: "http://www.w3.org/2000/svg", ...props, ref: forwardedRef },
+const TriangleDownIcon = (props) => {
+    const { color = 'currentColor', ...restProps } = props;
+    return (React.createElement("svg", { width: "6", height: "7", viewBox: "0 0 6 7", fill: color, xmlns: "http://www.w3.org/2000/svg", ...restProps },
         React.createElement("g", null,
             React.createElement("path", { d: "M2.40796 5.71173L0.097794 2.74247C-0.137283 2.44033 0.0780299 2 0.460851 2H5.53896C5.92178 2 6.13709 2.44033 5.90201 2.74247L3.59185 5.71173C3.29158 6.09767 2.70823 6.09767 2.40796 5.71173Z", fill: "currentColor" }))));
-});
+};
 TriangleDownIcon.displayName = 'TriangleDownIcon';
-const InfoCircledIcon = React.forwardRef(({ color = 'currentColor', ...props }, forwardedRef) => {
-    return (React.createElement("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, ref: forwardedRef },
+const InfoCircledIcon = (props) => {
+    const { color = 'currentColor', ...restProps } = props;
+    return (React.createElement("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...restProps },
         React.createElement("path", { d: "M7.49991 0.876892C3.84222 0.876892 0.877075 3.84204 0.877075 7.49972C0.877075 11.1574 3.84222 14.1226 7.49991 14.1226C11.1576 14.1226 14.1227 11.1574 14.1227 7.49972C14.1227 3.84204 11.1576 0.876892 7.49991 0.876892ZM1.82707 7.49972C1.82707 4.36671 4.36689 1.82689 7.49991 1.82689C10.6329 1.82689 13.1727 4.36671 13.1727 7.49972C13.1727 10.6327 10.6329 13.1726 7.49991 13.1726C4.36689 13.1726 1.82707 10.6327 1.82707 7.49972ZM8.24992 4.49999C8.24992 4.9142 7.91413 5.24999 7.49992 5.24999C7.08571 5.24999 6.74992 4.9142 6.74992 4.49999C6.74992 4.08577 7.08571 3.74999 7.49992 3.74999C7.91413 3.74999 8.24992 4.08577 8.24992 4.49999ZM6.00003 5.99999H6.50003H7.50003C7.77618 5.99999 8.00003 6.22384 8.00003 6.49999V9.99999H8.50003H9.00003V11H8.50003H7.50003H6.50003H6.00003V9.99999H6.50003H7.00003V6.99999H6.50003H6.00003V5.99999Z", fill: color, fillRule: "evenodd", clipRule: "evenodd" })));
-});
+};
 InfoCircledIcon.displayName = 'InfoCircledIcon';
-export { ChevronDownIcon, ChevronRightIcon, InfoCircledIcon, ThickCheckIcon, ThickChevronRightIcon, TriangleDownIcon, };
+function CalendarIcon({ size }) {
+    switch (size) {
+        case '1':
+            return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none" },
+                React.createElement("path", { d: "M1.25 5.75H10.75M3.75 0.75V2.75M8.25 0.75V2.75M2.5 11.25H9.5C10.1904 11.25 10.75 10.6904 10.75 10V4C10.75 3.30964 10.1904 2.75 9.5 2.75H2.5C1.80964 2.75 1.25 3.30964 1.25 4V10C1.25 10.6904 1.80964 11.25 2.5 11.25Z", stroke: "var(--gray-a11)", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })));
+        case '2':
+            return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" },
+                React.createElement("path", { d: "M1.5 7.22222H14.5M4.62 1V3.07407M11.38 1V3.07407M4.1 15H11.9C13.3359 15 14.5 13.8393 14.5 12.4074V5.66667C14.5 4.23482 13.3359 3.07407 11.9 3.07407H4.1C2.66406 3.07407 1.5 4.23482 1.5 5.66667V12.4074C1.5 13.8393 2.66406 15 4.1 15Z", stroke: "var(--gray-a11)", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })));
+        case '3':
+            return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" },
+                React.createElement("path", { d: "M1.75 7.75H18.25M6.75 1.75V3.75M13.25 1.75V3.75M4.32 18.25H15.68C17.0994 18.25 18.25 17.0994 18.25 15.68V6.32C18.25 4.90063 17.0994 3.75 15.68 3.75H4.32C2.90063 3.75 1.75 4.90063 1.75 6.32V15.68C1.75 17.0994 2.90063 18.25 4.32 18.25Z", stroke: "var(--gray-a11)", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })));
+        case '4':
+            return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" },
+                React.createElement("path", { d: "M1.75 7.75H18.25M6.75 1.75V3.75M13.25 1.75V3.75M4.32 18.25H15.68C17.0994 18.25 18.25 17.0994 18.25 15.68V6.32C18.25 4.90063 17.0994 3.75 15.68 3.75H4.32C2.90063 3.75 1.75 4.90063 1.75 6.32V15.68C1.75 17.0994 2.90063 18.25 4.32 18.25Z", stroke: "var(--gray-a11)", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })));
+    }
+}
+export { CalendarIcon, ChevronRightIcon, InfoCircledIcon, ThickCheckIcon, ThickChevronRightIcon, TriangleDownIcon };
 //# sourceMappingURL=icons.js.map

package/dist/esm/icons.js.map

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

package/dist/esm/tailwind-plugin.d.ts

@@ -3,11 +3,5 @@ export declare const grayColorNames: string[];
 type FrostedColorScales = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 export declare function getColorTokenName(number: FrostedColorScales, alpha?: boolean): number | string;
 export declare const getColorDefinitions: (color: string, alpha?: boolean) => Record<string, string>;
-export declare const frostedThemePlugin: {
-    (options: unknown): {
-        handler: import("tailwindcss/types/config").PluginCreator;
-        config?: Partial<import("tailwindcss/types/config").Config> | undefined;
-    };
-    __isOptionsFunction: true;
-};
+export declare const frostedThemePlugin: any;
 export {};

package/dist/esm/tailwind-plugin.js

@@ -1,7 +1,7 @@
 // Forked from https://github.com/needim/frosted-ui-themes-with-tailwind
-import * as colors from 'tailwindcss/colors';
+// @ts-expect-error -- TODO: fix this
 import plugin from 'tailwindcss/plugin';
-import { semanticColors, themeAccentColorsGrouped, themeGrayColorsGrouped, } from './theme-options';
+import { semanticColors, themeAccentColorsGrouped, themeGrayColorsGrouped } from './theme-options';
 export const accentColorNames = [];
 export const grayColorNames = [];
 const frostedColorScales = 12;
@@ -16,13 +16,11 @@ export function getColorTokenName(number, alpha) {
 }
 export const getColorDefinitions = (color, alpha) => {
     const colors = Array.from(Array(frostedColorScales).keys()).reduce((acc, _, i) => {
-        acc[getColorTokenName((i + 1), alpha)] =
-            `var(--${color}-${alpha ? 'a' : ''}${i + 1})`;
+        acc[getColorTokenName((i + 1), alpha)] = `var(--${color}-${alpha ? 'a' : ''}${i + 1})`;
         return acc;
     }, {});
     if (!alpha) {
-        colors[`${getColorTokenName(9, alpha)}-contrast`] =
-            `var(--${color}-9-contrast)`;
+        colors[`${getColorTokenName(9, alpha)}-contrast`] = `var(--${color}-9-contrast)`;
         colors['surface'] = `var(--${color}-surface)`;
         colors['DEFAULT'] = `var(--${color}-9)`;
         if (color === 'accent') {
@@ -33,6 +31,7 @@ export const getColorDefinitions = (color, alpha) => {
 };
 export const frostedThemePlugin = plugin.withOptions(() => {
     // TODO: make sure font styles are in sync with Text and Heading style
+    // @ts-expect-error -- TODO: fix this
     return ({ addBase }) => {
         addBase({
             '*': {
@@ -51,16 +50,11 @@ export const frostedThemePlugin = plugin.withOptions(() => {
             ...getColorDefinitions(colorName, true),
         };
         if (grayColorNames.includes(colorName)) {
-            c[`${getColorTokenName(2, false)}-translucent`] =
-                `var(--${colorName}-2-translucent)`;
+            c[`${getColorTokenName(2, false)}-translucent`] = `var(--${colorName}-2-translucent)`;
         }
         return c;
     }
-    const allFrostedColors = [
-        ...accentColorNames,
-        ...semanticColors,
-        ...grayColorNames,
-    ].reduce((acc, colorName) => {
+    const allFrostedColors = [...accentColorNames, ...semanticColors, ...grayColorNames].reduce((acc, colorName) => {
         acc[colorName] = { ...generateTailwindColors(colorName) };
         return acc;
     }, {});
@@ -75,6 +69,7 @@ export const frostedThemePlugin = plugin.withOptions(() => {
                 xl: '1640px',
             },
             fontSize: {
+                0: 'var(--font-size-0)',
                 1: 'var(--font-size-1)',
                 2: 'var(--font-size-2)',
                 3: 'var(--font-size-3)',
@@ -86,6 +81,7 @@ export const frostedThemePlugin = plugin.withOptions(() => {
                 9: 'var(--font-size-9)',
             },
             lineHeight: {
+                0: 'var(--line-height-0)',
                 1: 'var(--line-height-1)',
                 2: 'var(--line-height-2)',
                 3: 'var(--line-height-3)',
@@ -111,6 +107,7 @@ export const frostedThemePlugin = plugin.withOptions(() => {
                 quote: 'var(--quote-font-family)',
             },
             letterSpacing: {
+                0: 'var(--letter-spacing-0)',
                 1: 'var(--letter-spacing-1)',
                 2: 'var(--letter-spacing-2)',
                 3: 'var(--letter-spacing-3)',
@@ -142,13 +139,14 @@ export const frostedThemePlugin = plugin.withOptions(() => {
                 inherit: 'inherit',
                 transparent: 'transparent',
                 current: 'currentColor',
-                white: colors.white,
-                black: colors.black,
+                white: '#FFFFFF',
+                black: '#000000',
                 background: 'var(--color-background)',
                 surface: {
                     DEFAULT: 'var(--color-surface)',
                     accent: 'var(--color-surface-accent)',
                 },
+                stroke: 'var(--color-stroke)',
                 overlay: 'var(--color-overlay)',
                 panel: {
                     solid: 'var(--color-panel-solid)',

package/dist/esm/tailwind-plugin.js.map

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

package/dist/esm/theme-options.d.ts

@@ -18,13 +18,13 @@ declare const themePropDefs: {
     };
     accentColor: {
         type: "enum";
-        values: readonly ["tomato", "red", "ruby", "crimson", "pink", "plum", "purple", "violet", "iris", "indigo", "blue", "cyan", "teal", "jade", "green", "grass", "brown", "orange", "sky", "mint", "lime", "yellow", "amber", "gold", "bronze", "gray"];
-        default: "indigo";
+        values: readonly ["tomato", "red", "ruby", "crimson", "pink", "plum", "purple", "violet", "iris", "cyan", "teal", "jade", "green", "grass", "brown", "blue", "orange", "indigo", "sky", "mint", "yellow", "amber", "lime", "lemon", "magenta", "gold", "bronze", "gray"];
+        default: "blue";
     };
     grayColor: {
         type: "enum";
         values: readonly ["gray", "mauve", "slate", "sage", "olive", "sand", "auto"];
-        default: "auto";
+        default: "gray";
     };
     dangerColor: {
         type: "enum";

package/dist/esm/theme-options.js

@@ -15,8 +15,8 @@ const infoColors = ['blue', 'sky'];
 const themePropDefs = {
     hasBackground: { type: 'boolean', default: true },
     appearance: { type: 'enum', values: appearances, default: 'inherit' },
-    accentColor: { type: 'enum', values: accentColors, default: 'indigo' },
-    grayColor: { type: 'enum', values: grayColors, default: 'auto' },
+    accentColor: { type: 'enum', values: accentColors, default: 'blue' },
+    grayColor: { type: 'enum', values: grayColors, default: 'gray' },
     dangerColor: { type: 'enum', values: dangerColors, default: 'red' },
     warningColor: { type: 'enum', values: warningColors, default: 'amber' },
     successColor: { type: 'enum', values: successColors, default: 'green' },
@@ -41,7 +41,6 @@ const themeAccentColorsOrdered = [
     'brown',
     'yellow',
     'amber',
-    'orange',
     'tomato',
     'red',
     'ruby',
@@ -51,16 +50,20 @@ const themeAccentColorsOrdered = [
     'purple',
     'violet',
     'iris',
-    'indigo',
-    'blue',
     'cyan',
     'teal',
     'jade',
     'green',
     'grass',
-    'lime',
     'mint',
     'sky',
+    // Whop Brand Colors
+    'blue',
+    'orange',
+    'indigo',
+    'magenta',
+    'lemon',
+    'lime',
 ];
 const themeGrayColorsGrouped = [
     { label: 'Pure', values: [radixGrayScalePure] },

package/dist/esm/theme-options.js.map

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

package/dist/esm/theme-panel.d.ts

@@ -1,11 +1,10 @@
-import * as React from 'react';
-import { Box } from './index';
+import React from 'react';
 import type { ThemeOptions } from './index';
 interface ThemePanelProps extends Omit<ThemePanelImplProps, keyof ThemePanelImplPrivateProps> {
     defaultOpen?: boolean;
 }
 declare const ThemePanel: React.ForwardRefExoticComponent<ThemePanelProps & React.RefAttributes<HTMLDivElement>>;
-interface ThemePanelImplProps extends React.ComponentPropsWithoutRef<typeof Box>, ThemePanelImplPrivateProps {
+interface ThemePanelImplProps extends React.ComponentPropsWithoutRef<'div'>, ThemePanelImplPrivateProps {
     onAppearanceChange?: (value: Exclude<ThemeOptions['appearance'], 'inherit'>) => void;
 }
 interface ThemePanelImplPrivateProps {

package/dist/esm/theme-panel.js

@@ -1,12 +1,12 @@
 'use client';
 import { useCallbackRef } from '@radix-ui/react-use-callback-ref';
-import * as React from 'react';
-import { Box, Button, Flex, Grid, Heading, Kbd, ScrollArea, Text, Theme, Tooltip, dangerColors, getMatchingGrayColor, infoColors, radixGrayScalesDesaturated, successColors, themeAccentColorsOrdered, 
+import { Button, Heading, Kbd, ScrollArea, Text, Theme, Tooltip, dangerColors, getMatchingGrayColor, infoColors, radixGrayScalesDesaturated, successColors, themeAccentColorsOrdered, 
 // helpers
 themePropDefs, updateThemeAppearanceClass, useThemeContext, warningColors, } from './index';
+import React from 'react';
 const ThemePanel = React.forwardRef(({ defaultOpen = true, ...props }, forwardedRef) => {
     const [open, setOpen] = React.useState(defaultOpen);
-    return (React.createElement(ThemePanelImpl, { ...props, ref: forwardedRef, open: open, onOpenChange: setOpen }));
+    return React.createElement(ThemePanelImpl, { ...props, ref: forwardedRef, open: open, onOpenChange: setOpen });
 });
 ThemePanel.displayName = 'ThemePanel';
 const ThemePanelImpl = React.forwardRef((props, forwardedRef) => {
@@ -31,12 +31,8 @@ const ThemePanelImpl = React.forwardRef((props, forwardedRef) => {
     const [copyState, setCopyState] = React.useState('idle');
     async function handleCopyThemeConfig() {
         const theme = {
-            appearance: appearance === themePropDefs.appearance.default
-                ? undefined
-                : appearance,
-            accentColor: accentColor === themePropDefs.accentColor.default
-                ? undefined
-                : accentColor,
+            appearance: appearance === themePropDefs.appearance.default ? undefined : appearance,
+            accentColor: accentColor === themePropDefs.accentColor.default ? undefined : accentColor,
             grayColor: grayColor === themePropDefs.grayColor.default ? undefined : grayColor,
         };
         const props = Object.keys(theme)
@@ -53,11 +49,7 @@ const ThemePanelImpl = React.forwardRef((props, forwardedRef) => {
     React.useEffect(() => {
         function handleKeydown(event) {
             var _a;
-            const isCmdC = event.metaKey &&
-                event.key === 'c' &&
-                !event.shiftKey &&
-                !event.altKey &&
-                !event.ctrlKey;
+            const isCmdC = event.metaKey && event.key === 'c' && !event.shiftKey && !event.altKey && !event.ctrlKey;
             if (isCmdC && ((_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.toString()) === '') {
                 onOpenChange(!open);
             }
@@ -103,11 +95,18 @@ const ThemePanelImpl = React.forwardRef((props, forwardedRef) => {
         return () => observer.disconnect();
     }, [appearance, handleAppearanceChange]);
     return (React.createElement(Theme, { asChild: true },
-        React.createElement(Flex, { direction: "column", position: "fixed", top: "0", right: "0", mr: "4", mt: "4", 
+        React.createElement("div", { 
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
             inert: open ? undefined : '', ...panelProps, ref: forwardedRef, style: {
+                display: 'flex',
+                flexDirection: 'column',
+                position: 'fixed',
+                top: 0,
+                right: 0,
                 zIndex: 9999,
+                marginRight: 16,
+                marginTop: 16,
                 overflow: 'hidden',
                 maxHeight: 'calc(100vh - var(--space-4) - var(--space-4))',
                 borderRadius: 'var(--radius-4)',
@@ -121,64 +120,121 @@ const ThemePanelImpl = React.forwardRef((props, forwardedRef) => {
                 ...props.style,
             } },
             React.createElement(ScrollArea, null,
-                React.createElement(Box, { grow: "1", p: "5", position: "relative" },
-                    React.createElement(Box, { position: "absolute", top: "0", right: "0", m: "2" },
+                React.createElement("div", { style: { position: 'relative', flexGrow: 1, padding: 24 } },
+                    React.createElement("div", { style: { margin: 8, position: 'absolute', top: 0, right: 0 } },
                         React.createElement(Tooltip, { content: "Press \u2318\u2009C to show/hide the Theme Panel", side: "bottom", sideOffset: 6 },
                             React.createElement(Kbd, { size: "3", tabIndex: 0, className: "fui-ThemePanelShortcut" }, "\u2318\u2009C"))),
-                    React.createElement(Heading, { size: "5", trim: "both", as: "h3", mb: "5" }, "Theme"),
-                    React.createElement(Text, { id: "accent-color-title", as: "p", size: "2", weight: "medium", mt: "5" }, "Accent color"),
-                    React.createElement(Grid, { columns: "10", gap: "2", mt: "3", role: "group", "aria-labelledby": "accent-color-title" }, themeAccentColorsOrdered.map((color) => (React.createElement("label", { key: color, className: "fui-ThemePanelSwatch", style: { backgroundColor: `var(--${color}-9)` } },
+                    React.createElement(Heading, { size: "5", trim: "both", as: "h3", style: {
+                            marginBottom: 24,
+                        } }, "Theme"),
+                    React.createElement(Text, { id: "accent-color-title", as: "p", size: "2", weight: "medium", style: {
+                            marginTop: 24,
+                        } }, "Accent color"),
+                    React.createElement("div", { style: {
+                            display: 'grid',
+                            gridTemplateColumns: 'repeat(10, 1fr)',
+                            gap: 'var(--space-2)',
+                            marginTop: 12,
+                        }, role: "group", "aria-labelledby": "accent-color-title" }, themeAccentColorsOrdered.map((color) => (React.createElement("label", { key: color, className: "fui-ThemePanelSwatch", style: { backgroundColor: `var(--${color}-9)` } },
                         React.createElement(Tooltip, { content: `${upperFirst(color)}${accentColor === 'gray' && resolvedGrayColor !== 'gray'
                                 ? ` (${upperFirst(resolvedGrayColor)})`
                                 : ''}` },
                             React.createElement("input", { className: "fui-ThemePanelSwatchInput", type: "radio", name: "accentColor", value: color, checked: accentColor === color, onChange: (event) => onAccentColorChange(event.target.value) })))))),
-                    React.createElement(Flex, { asChild: true, align: "center", justify: "between" },
-                        React.createElement(Text, { as: "p", id: "gray-color-title", size: "2", weight: "medium", mt: "5" }, "Gray color")),
-                    React.createElement(Grid, { columns: "10", gap: "2", mt: "3", role: "group", "aria-labelledby": "gray-color-title" }, ['auto', 'gray', ...radixGrayScalesDesaturated].map((gray) => (React.createElement(Flex, { key: gray, asChild: true, align: "center", justify: "center" },
-                        React.createElement("label", { className: "fui-ThemePanelSwatch", style: {
-                                backgroundColor: gray === 'auto'
-                                    ? `var(--${autoMatchedGray}-9)`
-                                    : gray === 'gray'
-                                        ? 'var(--gray-9)'
-                                        : `var(--${gray}-9)`,
-                                // we override --gray so pure gray doesn't exist anymore
-                                // recover something as close as possible by desaturating
-                                filter: gray === 'gray' ? 'saturate(0)' : undefined,
-                            } },
-                            React.createElement(Tooltip, { content: `${upperFirst(gray)}${gray === 'auto'
-                                    ? ` (${upperFirst(autoMatchedGray)})`
-                                    : ''}` },
-                                React.createElement("input", { className: "fui-ThemePanelSwatchInput", type: "radio", name: "grayColor", value: gray, checked: grayColor === gray, onChange: (event) => onGrayColorChange(event.target.value) }))))))),
-                    React.createElement(Text, { id: "info-color-title", as: "p", size: "2", weight: "medium", mt: "5" }, "Info color"),
-                    React.createElement(Grid, { columns: "10", gap: "2", mt: "3", role: "group", "aria-labelledby": "info-color-title" }, infoColors.map((color) => (React.createElement("label", { key: color, className: "fui-ThemePanelSwatch", style: { backgroundColor: `var(--${color}-9)` } },
+                    React.createElement(Text, { as: "p", id: "gray-color-title", size: "2", weight: "medium", style: {
+                            marginTop: 24,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                        } }, "Gray color"),
+                    React.createElement("div", { style: {
+                            display: 'grid',
+                            gridTemplateColumns: 'repeat(10, 1fr)',
+                            gap: 'var(--space-2)',
+                            marginTop: 12,
+                        }, role: "group", "aria-labelledby": "gray-color-title" }, ['auto', 'gray', ...radixGrayScalesDesaturated].map((gray) => (React.createElement("label", { key: gray, className: "fui-ThemePanelSwatch", style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            backgroundColor: gray === 'auto'
+                                ? `var(--${autoMatchedGray}-9)`
+                                : gray === 'gray'
+                                    ? 'var(--gray-9)'
+                                    : `var(--${gray}-9)`,
+                            // we override --gray so pure gray doesn't exist anymore
+                            // recover something as close as possible by desaturating
+                            filter: gray === 'gray' ? 'saturate(0)' : undefined,
+                        } },
+                        React.createElement(Tooltip, { content: `${upperFirst(gray)}${gray === 'auto' ? ` (${upperFirst(autoMatchedGray)})` : ''}` },
+                            React.createElement("input", { className: "fui-ThemePanelSwatchInput", type: "radio", name: "grayColor", value: gray, checked: grayColor === gray, onChange: (event) => onGrayColorChange(event.target.value) })))))),
+                    React.createElement(Text, { id: "info-color-title", as: "p", size: "2", weight: "medium", style: {
+                            marginTop: 24,
+                        } }, "Info color"),
+                    React.createElement("div", { style: {
+                            display: 'grid',
+                            gridTemplateColumns: 'repeat(10, 1fr)',
+                            gap: 'var(--space-2)',
+                            marginTop: 12,
+                        }, role: "group", "aria-labelledby": "info-color-title" }, infoColors.map((color) => (React.createElement("label", { key: color, className: "fui-ThemePanelSwatch", style: { backgroundColor: `var(--${color}-9)` } },
                         React.createElement(Tooltip, { content: upperFirst(color) },
                             React.createElement("input", { className: "fui-ThemePanelSwatchInput", type: "radio", name: "infoColor", value: color, checked: infoColor === color, onChange: (event) => onInfoColorChange(event.target.value) })))))),
-                    React.createElement(Text, { id: "success-color-title", as: "p", size: "2", weight: "medium", mt: "5" }, "Success color"),
-                    React.createElement(Grid, { columns: "10", gap: "2", mt: "3", role: "group", "aria-labelledby": "success-color-title" }, successColors.map((color) => (React.createElement("label", { key: color, className: "fui-ThemePanelSwatch", style: { backgroundColor: `var(--${color}-9)` } },
+                    React.createElement(Text, { id: "success-color-title", as: "p", size: "2", weight: "medium", style: {
+                            marginTop: 24,
+                        } }, "Success color"),
+                    React.createElement("div", { style: {
+                            display: 'grid',
+                            gridTemplateColumns: 'repeat(10, 1fr)',
+                            gap: 'var(--space-2)',
+                            marginTop: 12,
+                        }, role: "group", "aria-labelledby": "success-color-title" }, successColors.map((color) => (React.createElement("label", { key: color, className: "fui-ThemePanelSwatch", style: { backgroundColor: `var(--${color}-9)` } },
                         React.createElement(Tooltip, { content: upperFirst(color) },
                             React.createElement("input", { className: "fui-ThemePanelSwatchInput", type: "radio", name: "successColor", value: color, checked: successColor === color, onChange: (event) => onSuccessColorChange(event.target.value) })))))),
-                    React.createElement(Text, { id: "warning-color-title", as: "p", size: "2", weight: "medium", mt: "5" }, "Warning color"),
-                    React.createElement(Grid, { columns: "10", gap: "2", mt: "3", role: "group", "aria-labelledby": "warning-color-title" }, warningColors.map((color) => (React.createElement("label", { key: color, className: "fui-ThemePanelSwatch", style: { backgroundColor: `var(--${color}-9)` } },
+                    React.createElement(Text, { id: "warning-color-title", as: "p", size: "2", weight: "medium", style: {
+                            marginTop: 24,
+                        } }, "Warning color"),
+                    React.createElement("div", { style: {
+                            display: 'grid',
+                            gridTemplateColumns: 'repeat(10, 1fr)',
+                            gap: 'var(--space-2)',
+                            marginTop: 12,
+                        }, role: "group", "aria-labelledby": "warning-color-title" }, warningColors.map((color) => (React.createElement("label", { key: color, className: "fui-ThemePanelSwatch", style: { backgroundColor: `var(--${color}-9)` } },
                         React.createElement(Tooltip, { content: upperFirst(color) },
                             React.createElement("input", { className: "fui-ThemePanelSwatchInput", type: "radio", name: "warningColor", value: color, checked: warningColor === color, onChange: (event) => onWarningColorChange(event.target.value) })))))),
-                    React.createElement(Text, { id: "danger-color-title", as: "p", size: "2", weight: "medium", mt: "5" }, "Danger color"),
-                    React.createElement(Grid, { columns: "10", gap: "2", mt: "3", role: "group", "aria-labelledby": "danger-color-title" }, dangerColors.map((color) => (React.createElement("label", { key: color, className: "fui-ThemePanelSwatch", style: { backgroundColor: `var(--${color}-9)` } },
+                    React.createElement(Text, { id: "danger-color-title", as: "p", size: "2", weight: "medium", style: {
+                            marginTop: 24,
+                        } }, "Danger color"),
+                    React.createElement("div", { style: {
+                            display: 'grid',
+                            gridTemplateColumns: 'repeat(10, 1fr)',
+                            gap: 'var(--space-2)',
+                            marginTop: 12,
+                        }, role: "group", "aria-labelledby": "danger-color-title" }, dangerColors.map((color) => (React.createElement("label", { key: color, className: "fui-ThemePanelSwatch", style: { backgroundColor: `var(--${color}-9)` } },
                         React.createElement(Tooltip, { content: upperFirst(color) },
                             React.createElement("input", { className: "fui-ThemePanelSwatchInput", type: "radio", name: "dangerColor", value: color, checked: dangerColor === color, onChange: (event) => onDangerColorChange(event.target.value) })))))),
-                    React.createElement(Text, { id: "appearance-title", as: "p", size: "2", weight: "medium", mt: "5" }, "Appearance"),
-                    React.createElement(Grid, { columns: "2", gap: "2", mt: "3", role: "group", "aria-labelledby": "appearance-title" }, ['light', 'dark'].map((value) => (React.createElement("label", { key: value, className: "fui-ThemePanelRadioCard" },
+                    React.createElement(Text, { id: "appearance-title", as: "p", size: "2", weight: "medium", style: {
+                            marginTop: 24,
+                        } }, "Appearance"),
+                    React.createElement("div", { style: { display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 'var(--space-2)', marginTop: 12 }, role: "group", "aria-labelledby": "appearance-title" }, ['light', 'dark'].map((value) => (React.createElement("label", { key: value, className: "fui-ThemePanelRadioCard" },
                         React.createElement("input", { className: "fui-ThemePanelRadioCardInput", type: "radio", name: "appearance", value: value, checked: resolvedAppearance === value, 
                             // TODO: Currently using `onClick` as a stop-gap solution for `onChange` not working after a few changes
                             // eslint-disable-next-line @typescript-eslint/no-unused-vars
                             onChange: (event) => {
                                 // handleAppearanceChange(event.target.value as ThemeOptions['appearance']);
                             }, onClick: () => handleAppearanceChange(value) }),
-                        React.createElement(Flex, { align: "center", justify: "center", height: "6", gap: "2" },
+                        React.createElement("div", { style: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                height: 'var(--space-6)',
+                                gap: 'var(--space-2)',
+                            } },
                             value === 'light' ? (React.createElement("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { margin: '0 -1px' } },
                                 React.createElement("path", { d: "M7.5 0C7.77614 0 8 0.223858 8 0.5V2.5C8 2.77614 7.77614 3 7.5 3C7.22386 3 7 2.77614 7 2.5V0.5C7 0.223858 7.22386 0 7.5 0ZM2.1967 2.1967C2.39196 2.00144 2.70854 2.00144 2.90381 2.1967L4.31802 3.61091C4.51328 3.80617 4.51328 4.12276 4.31802 4.31802C4.12276 4.51328 3.80617 4.51328 3.61091 4.31802L2.1967 2.90381C2.00144 2.70854 2.00144 2.39196 2.1967 2.1967ZM0.5 7C0.223858 7 0 7.22386 0 7.5C0 7.77614 0.223858 8 0.5 8H2.5C2.77614 8 3 7.77614 3 7.5C3 7.22386 2.77614 7 2.5 7H0.5ZM2.1967 12.8033C2.00144 12.608 2.00144 12.2915 2.1967 12.0962L3.61091 10.682C3.80617 10.4867 4.12276 10.4867 4.31802 10.682C4.51328 10.8772 4.51328 11.1938 4.31802 11.3891L2.90381 12.8033C2.70854 12.9986 2.39196 12.9986 2.1967 12.8033ZM12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8H14.5C14.7761 8 15 7.77614 15 7.5C15 7.22386 14.7761 7 14.5 7H12.5ZM10.682 4.31802C10.4867 4.12276 10.4867 3.80617 10.682 3.61091L12.0962 2.1967C12.2915 2.00144 12.608 2.00144 12.8033 2.1967C12.9986 2.39196 12.9986 2.70854 12.8033 2.90381L11.3891 4.31802C11.1938 4.51328 10.8772 4.51328 10.682 4.31802ZM8 12.5C8 12.2239 7.77614 12 7.5 12C7.22386 12 7 12.2239 7 12.5V14.5C7 14.7761 7.22386 15 7.5 15C7.77614 15 8 14.7761 8 14.5V12.5ZM10.682 10.682C10.8772 10.4867 11.1938 10.4867 11.3891 10.682L12.8033 12.0962C12.9986 12.2915 12.9986 12.608 12.8033 12.8033C12.608 12.9986 12.2915 12.9986 12.0962 12.8033L10.682 11.3891C10.4867 11.1938 10.4867 10.8772 10.682 10.682ZM5.5 7.5C5.5 6.39543 6.39543 5.5 7.5 5.5C8.60457 5.5 9.5 6.39543 9.5 7.5C9.5 8.60457 8.60457 9.5 7.5 9.5C6.39543 9.5 5.5 8.60457 5.5 7.5ZM7.5 4.5C5.84315 4.5 4.5 5.84315 4.5 7.5C4.5 9.15685 5.84315 10.5 7.5 10.5C9.15685 10.5 10.5 9.15685 10.5 7.5C10.5 5.84315 9.15685 4.5 7.5 4.5Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" }))) : (React.createElement("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { margin: '0 -1px' } },
                                 React.createElement("path", { d: "M2.89998 0.499976C2.89998 0.279062 2.72089 0.0999756 2.49998 0.0999756C2.27906 0.0999756 2.09998 0.279062 2.09998 0.499976V1.09998H1.49998C1.27906 1.09998 1.09998 1.27906 1.09998 1.49998C1.09998 1.72089 1.27906 1.89998 1.49998 1.89998H2.09998V2.49998C2.09998 2.72089 2.27906 2.89998 2.49998 2.89998C2.72089 2.89998 2.89998 2.72089 2.89998 2.49998V1.89998H3.49998C3.72089 1.89998 3.89998 1.72089 3.89998 1.49998C3.89998 1.27906 3.72089 1.09998 3.49998 1.09998H2.89998V0.499976ZM5.89998 3.49998C5.89998 3.27906 5.72089 3.09998 5.49998 3.09998C5.27906 3.09998 5.09998 3.27906 5.09998 3.49998V4.09998H4.49998C4.27906 4.09998 4.09998 4.27906 4.09998 4.49998C4.09998 4.72089 4.27906 4.89998 4.49998 4.89998H5.09998V5.49998C5.09998 5.72089 5.27906 5.89998 5.49998 5.89998C5.72089 5.89998 5.89998 5.72089 5.89998 5.49998V4.89998H6.49998C6.72089 4.89998 6.89998 4.72089 6.89998 4.49998C6.89998 4.27906 6.72089 4.09998 6.49998 4.09998H5.89998V3.49998ZM1.89998 6.49998C1.89998 6.27906 1.72089 6.09998 1.49998 6.09998C1.27906 6.09998 1.09998 6.27906 1.09998 6.49998V7.09998H0.499976C0.279062 7.09998 0.0999756 7.27906 0.0999756 7.49998C0.0999756 7.72089 0.279062 7.89998 0.499976 7.89998H1.09998V8.49998C1.09998 8.72089 1.27906 8.89997 1.49998 8.89997C1.72089 8.89997 1.89998 8.72089 1.89998 8.49998V7.89998H2.49998C2.72089 7.89998 2.89998 7.72089 2.89998 7.49998C2.89998 7.27906 2.72089 7.09998 2.49998 7.09998H1.89998V6.49998ZM8.54406 0.98184L8.24618 0.941586C8.03275 0.917676 7.90692 1.1655 8.02936 1.34194C8.17013 1.54479 8.29981 1.75592 8.41754 1.97445C8.91878 2.90485 9.20322 3.96932 9.20322 5.10022C9.20322 8.37201 6.82247 11.0878 3.69887 11.6097C3.45736 11.65 3.20988 11.6772 2.96008 11.6906C2.74563 11.702 2.62729 11.9535 2.77721 12.1072C2.84551 12.1773 2.91535 12.2458 2.98667 12.3128L3.05883 12.3795L3.31883 12.6045L3.50684 12.7532L3.62796 12.8433L3.81491 12.9742L3.99079 13.089C4.11175 13.1651 4.23536 13.2375 4.36157 13.3059L4.62496 13.4412L4.88553 13.5607L5.18837 13.6828L5.43169 13.7686C5.56564 13.8128 5.70149 13.8529 5.83857 13.8885C5.94262 13.9155 6.04767 13.9401 6.15405 13.9622C6.27993 13.9883 6.40713 14.0109 6.53544 14.0298L6.85241 14.0685L7.11934 14.0892C7.24637 14.0965 7.37436 14.1002 7.50322 14.1002C11.1483 14.1002 14.1032 11.1453 14.1032 7.50023C14.1032 7.25044 14.0893 7.00389 14.0623 6.76131L14.0255 6.48407C13.991 6.26083 13.9453 6.04129 13.8891 5.82642C13.8213 5.56709 13.7382 5.31398 13.6409 5.06881L13.5279 4.80132L13.4507 4.63542L13.3766 4.48666C13.2178 4.17773 13.0353 3.88295 12.8312 3.60423L12.6782 3.40352L12.4793 3.16432L12.3157 2.98361L12.1961 2.85951L12.0355 2.70246L11.8134 2.50184L11.4925 2.24191L11.2483 2.06498L10.9562 1.87446L10.6346 1.68894L10.3073 1.52378L10.1938 1.47176L9.95488 1.3706L9.67791 1.2669L9.42566 1.1846L9.10075 1.09489L8.83599 1.03486L8.54406 0.98184ZM10.4032 5.30023C10.4032 4.27588 10.2002 3.29829 9.83244 2.40604C11.7623 3.28995 13.1032 5.23862 13.1032 7.50023C13.1032 10.593 10.596 13.1002 7.50322 13.1002C6.63646 13.1002 5.81597 12.9036 5.08355 12.5522C6.5419 12.0941 7.81081 11.2082 8.74322 10.0416C8.87963 10.2284 9.10028 10.3497 9.34928 10.3497C9.76349 10.3497 10.0993 10.0139 10.0993 9.59971C10.0993 9.24256 9.84965 8.94373 9.51535 8.86816C9.57741 8.75165 9.63653 8.63334 9.6926 8.51332C9.88358 8.63163 10.1088 8.69993 10.35 8.69993C11.0403 8.69993 11.6 8.14028 11.6 7.44993C11.6 6.75976 11.0406 6.20024 10.3505 6.19993C10.3853 5.90487 10.4032 5.60464 10.4032 5.30023Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" }))),
                             React.createElement(Text, { size: "1", weight: "medium" }, upperFirst(value))))))),
-                    React.createElement(Button, { mt: "5", style: { width: '100%' }, onClick: handleCopyThemeConfig }, copyState === 'copied' ? 'Copied' : 'Copy Theme'))))));
+                    React.createElement(Button, { style: {
+                            marginTop: 24,
+                            width: '100%',
+                        }, onClick: handleCopyThemeConfig }, copyState === 'copied' ? 'Copied' : 'Copy Theme'))))));
 });
 ThemePanelImpl.displayName = 'ThemePanelImpl';
 // https://github.com/pacocoursey/next-themes/blob/main/packages/next-themes/src/index.tsx#L285