@malloydata/malloy-explorer 0.0.257-dev250410160631

package/dist/types/components/primitives/styles.d.ts

@@ -0,0 +1,74 @@
+export declare const tooltipStyles: Readonly<{
+    readonly default: Readonly<{
+        readonly padding: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"padding", "4px 8px">;
+        readonly borderRadius: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"borderRadius", "12px">;
+        readonly color: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"color", "rgba(221, 226, 232, 1)">;
+        readonly backgroundColor: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"backgroundColor", "rgba(37, 54, 63, 1)">;
+        readonly maxWidth: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"maxWidth", "360px">;
+        readonly boxShadow: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"boxShadow", "0px 2px 12px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.1)">;
+        readonly zIndex: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"zIndex", 2>;
+    }>;
+    readonly card: Readonly<{
+        readonly width: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"width", "var(--radix-tooltip-trigger-width)">;
+        readonly maxHeight: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"maxHeight", "var(--radix-tooltip-content-available-height)">;
+        readonly zIndex: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"zIndex", 2>;
+    }>;
+}>;
+export declare const fontStyles: Readonly<{
+    readonly largeEmphasized: Readonly<{
+        readonly fontFamily: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"fontFamily", "SF Pro Text, -apple-system, system-ui, sans-serif">;
+        readonly color: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"color", "rgba(5, 5, 5, 1)">;
+        readonly fontWeight: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"fontWeight", 700>;
+        readonly fontSize: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"fontSize", "16px">;
+        readonly lineHeight: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"lineHeight", "24px">;
+        readonly letterSpacing: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"letterSpacing", "-0.24px">;
+    }>;
+    readonly largeBody: Readonly<{
+        readonly fontFamily: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"fontFamily", "SF Pro Text, -apple-system, system-ui, sans-serif">;
+        readonly color: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"color", "rgba(5, 5, 5, 1)">;
+        readonly fontWeight: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"fontWeight", 400>;
+        readonly fontSize: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"fontSize", "16px">;
+        readonly lineHeight: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"lineHeight", "20px">;
+        readonly letterSpacing: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"letterSpacing", "0px">;
+    }>;
+    readonly emphasized: Readonly<{
+        readonly fontFamily: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"fontFamily", "SF Pro Text, -apple-system, system-ui, sans-serif">;
+        readonly color: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"color", "rgba(5, 5, 5, 1)">;
+        readonly fontWeight: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"fontWeight", 700>;
+        readonly fontSize: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"fontSize", "14px">;
+        readonly lineHeight: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"lineHeight", "20px">;
+        readonly letterSpacing: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"letterSpacing", "-0.24px">;
+    }>;
+    readonly body: Readonly<{
+        readonly fontFamily: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"fontFamily", "SF Pro Text, -apple-system, system-ui, sans-serif">;
+        readonly color: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"color", "rgba(5, 5, 5, 1)">;
+        readonly fontWeight: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"fontWeight", 400>;
+        readonly fontSize: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"fontSize", "14px">;
+        readonly lineHeight: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"lineHeight", "20px">;
+        readonly letterSpacing: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"letterSpacing", "0px">;
+    }>;
+    readonly link: Readonly<{
+        readonly fontFamily: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"fontFamily", "SF Pro Text, -apple-system, system-ui, sans-serif">;
+        readonly color: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"color", "rgba(0, 100, 224, 1)">;
+        readonly fontWeight: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"fontWeight", 400>;
+        readonly fontSize: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"fontSize", "14px">;
+        readonly lineHeight: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"lineHeight", "20px">;
+        readonly letterSpacing: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"letterSpacing", "0px">;
+    }>;
+    readonly supporting: Readonly<{
+        readonly fontFamily: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"fontFamily", "SF Pro Text, -apple-system, system-ui, sans-serif">;
+        readonly color: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"color", "rgba(5, 5, 5, 1)">;
+        readonly fontWeight: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"fontWeight", 400>;
+        readonly fontSize: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"fontSize", "12px">;
+        readonly lineHeight: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"lineHeight", "16px">;
+        readonly letterSpacing: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"letterSpacing", "0px">;
+    }>;
+    readonly badge: Readonly<{
+        readonly fontFamily: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"fontFamily", "SF Pro Text, -apple-system, system-ui, sans-serif">;
+        readonly color: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"color", "rgba(228, 230, 235, 1)">;
+        readonly fontWeight: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"fontWeight", 600>;
+        readonly fontSize: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"fontSize", "12px">;
+        readonly lineHeight: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"lineHeight", "16px">;
+        readonly letterSpacing: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"letterSpacing", "-0.24px">;
+    }>;
+}>;

package/dist/types/components/primitives/syntax_highlighting/malloyGrammar.d.ts

@@ -0,0 +1,279 @@
+export declare const MALLOY_GRAMMAR: {
+    scopeName: string;
+    patterns: {
+        include: string;
+    }[];
+    repository: {
+        'malloy-language': {
+            patterns: {
+                include: string;
+            }[];
+        };
+        'malloy-matched': {
+            begin: string;
+            end: string;
+            patterns: {
+                include: string;
+            }[];
+        };
+        'malloy-in-sql': {
+            begin: string;
+            name: string;
+            end: string;
+            patterns: {
+                include: string;
+            }[];
+        };
+        'sql-string': {
+            patterns: {
+                begin: string;
+                end: string;
+                beginCaptures: {
+                    '1': {
+                        name: string;
+                    };
+                    '3': {
+                        name: string;
+                    };
+                    '5': {
+                        name: string;
+                    };
+                };
+                endCaptures: {
+                    '0': {
+                        name: string;
+                    };
+                };
+                name: string;
+                patterns: {
+                    include: string;
+                }[];
+            }[];
+        };
+        functions: {
+            patterns: ({
+                match: string;
+                captures: {
+                    '1': {
+                        name: string;
+                    };
+                    '3': {
+                        name: string;
+                    };
+                };
+            } | {
+                match: string;
+                captures: {
+                    '1': {
+                        name: string;
+                    };
+                    '3'?: undefined;
+                };
+            })[];
+        };
+        datetimes: {
+            patterns: {
+                match: string;
+                name: string;
+            }[];
+        };
+        'identifiers-quoted': {
+            patterns: {
+                match: string;
+                name: string;
+            }[];
+        };
+        'identifiers-unquoted': {
+            patterns: {
+                match: string;
+                name: string;
+            }[];
+        };
+        timeframes: {
+            patterns: {
+                match: string;
+                name: string;
+            }[];
+        };
+        comments: {
+            patterns: ({
+                begin: string;
+                end: string;
+                beginCaptures: {
+                    '0': {
+                        name: string;
+                    };
+                };
+                endCaptures: {
+                    '0': {
+                        name: string;
+                    };
+                };
+                name: string;
+            } | {
+                begin: string;
+                end: string;
+                beginCaptures: {
+                    '0': {
+                        name: string;
+                    };
+                };
+                name: string;
+                endCaptures?: undefined;
+            })[];
+        };
+        tags: {
+            patterns: ({
+                match: string;
+                name: string;
+                captures: {
+                    '0': {
+                        name: string;
+                    };
+                };
+                begin?: undefined;
+                end?: undefined;
+                beginCaptures?: undefined;
+                patterns?: undefined;
+            } | {
+                begin: string;
+                end: string;
+                beginCaptures: {
+                    '0': {
+                        name: string;
+                    };
+                };
+                name: string;
+                match?: undefined;
+                captures?: undefined;
+                patterns?: undefined;
+            } | {
+                begin: string;
+                end: string;
+                beginCaptures: {
+                    '0': {
+                        name: string;
+                    };
+                };
+                name: string;
+                patterns: {
+                    include: string;
+                }[];
+                match?: undefined;
+                captures?: undefined;
+            })[];
+            repository: {
+                'tag-values': {
+                    name: string;
+                    match: string;
+                    captures: {
+                        '1': {
+                            name: string;
+                        };
+                        '2': {
+                            name: string;
+                        };
+                        '3': {
+                            name: string;
+                        };
+                        '4': {
+                            name: string;
+                        };
+                    };
+                };
+            };
+        };
+        strings: {
+            patterns: ({
+                begin: string;
+                end: string;
+                beginCaptures: {
+                    '0': {
+                        name: string;
+                    };
+                };
+                endCaptures: {
+                    '0': {
+                        name: string;
+                    };
+                };
+                name: string;
+                patterns: {
+                    include: string;
+                }[];
+            } | {
+                begin: string;
+                end: string;
+                beginCaptures: {
+                    '0': {
+                        name: string;
+                    };
+                };
+                endCaptures: {
+                    '0': {
+                        name: string;
+                    };
+                };
+                name: string;
+                patterns?: undefined;
+            } | {
+                begin: string;
+                end: string;
+                name: string;
+                patterns: {
+                    include: string;
+                }[];
+                beginCaptures?: undefined;
+                endCaptures?: undefined;
+            })[];
+            repository: {
+                escapes: {
+                    name: string;
+                    match: string;
+                    captures: {
+                        '0': {
+                            name: string;
+                        };
+                    };
+                };
+                'regex-escapes': {
+                    name: string;
+                    match: string;
+                    captures: {
+                        '0': {
+                            name: string;
+                        };
+                    };
+                };
+            };
+        };
+        numbers: {
+            match: string;
+            name: string;
+        };
+        constants: {
+            patterns: {
+                match: string;
+                name: string;
+            }[];
+        };
+        types: {
+            patterns: {
+                match: string;
+                name: string;
+            }[];
+        };
+        properties: {
+            patterns: {
+                match: string;
+                name: string;
+            }[];
+        };
+        keywords: {
+            patterns: {
+                match: string;
+                name: string;
+            }[];
+        };
+    };
+};

package/dist/types/components/primitives/syntax_highlighting/syntaxHighlighter.d.ts

@@ -0,0 +1,6 @@
+import { TransformerOptions } from './transformers/transformers';
+export type SupportedLang = 'json' | 'sql' | 'malloy';
+export type SupportedTheme = 'light-plus' | 'dark-plus';
+type HighlighterOptions = {} & TransformerOptions;
+export declare function highlightPre(code: string, lang: SupportedLang, theme: SupportedTheme, { showLineNumbers, lineSpacing }: HighlighterOptions): Promise<HTMLDivElement>;
+export {};

package/dist/types/components/primitives/syntax_highlighting/transformers/lineNumberTransformer.d.ts

@@ -0,0 +1,3 @@
+import { GetTransformer } from './transformers';
+declare const getLineNumberTransformer: GetTransformer;
+export default getLineNumberTransformer;

package/dist/types/components/primitives/syntax_highlighting/transformers/lineSpacingTransformer.d.ts

@@ -0,0 +1,8 @@
+import { GetTransformer } from './transformers';
+declare const LINE_SPACING_MAP: {
+    single: string;
+    double: string;
+};
+export type LineSpacing = keyof typeof LINE_SPACING_MAP;
+declare const getLineSpacingTransformer: GetTransformer;
+export default getLineSpacingTransformer;

package/dist/types/components/primitives/syntax_highlighting/transformers/transformers.d.ts

@@ -0,0 +1,8 @@
+import { ShikiTransformer } from '@shikijs/types';
+import { LineSpacing } from './lineSpacingTransformer';
+export type TransformerOptions = {
+    showLineNumbers: boolean;
+    lineSpacing: LineSpacing;
+};
+export type GetTransformer = (options: TransformerOptions) => ShikiTransformer | undefined;
+export default function getTransformers(options: TransformerOptions): Array<ShikiTransformer>;

package/dist/types/components/primitives/tokens/EditableToken.d.ts

@@ -0,0 +1,50 @@
+import { StyleXStyles } from '@stylexjs/stylex';
+import { IconType } from '../utils/icon';
+import { TokenColor, TokenSize } from './types';
+interface EditableTokenBaseProps<T> {
+    /**
+     * The current value of the token.
+     */
+    value: T;
+    /**
+     * Callback function called when the token's value changes.
+     *
+     * @param value The new value of the token.
+     */
+    onChange: (value: T) => void;
+    /**
+     * Optional callback function called when the token is removed.
+     */
+    onRemove?: () => void;
+    /**
+     * Optional icon to display in the token.
+     *
+     * Must be a key from the ICON_MAP object.
+     */
+    icon?: IconType;
+    /**
+     * Optional color of the token.
+     */
+    color?: TokenColor;
+    /**
+     * Optional size of the token.
+     */
+    size?: TokenSize;
+    /**
+     * Optional custom styles for the token.
+     */
+    customStyle?: StyleXStyles;
+    /**
+     * Optional error message to show. If an error message exists, the token will
+     * include error styles.
+     */
+    errorMessage?: string;
+}
+interface EditableTokenStringProps extends EditableTokenBaseProps<string> {
+    type?: 'string';
+}
+interface EditableTokenNumberProps extends EditableTokenBaseProps<number> {
+    type: 'number';
+}
+export default function EditableToken({ value, onChange, onRemove, icon, color, size, customStyle, type, errorMessage, }: EditableTokenStringProps | EditableTokenNumberProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/primitives/tokens/SelectorToken.d.ts

@@ -0,0 +1,18 @@
+import { StyleXStyles } from '@stylexjs/stylex';
+import { IconType } from '../utils/icon';
+import { TokenColor, TokenSize } from './types';
+export interface SelectorTokenItem<T extends string> {
+    label: string;
+    value: T;
+}
+export interface SelectorTokenProps<T extends string> {
+    value: T | undefined;
+    onChange: (value: T) => void;
+    icon?: IconType;
+    color?: TokenColor;
+    size?: TokenSize;
+    items: SelectorTokenItem<T>[];
+    isSearchable?: boolean;
+    customStyle?: StyleXStyles;
+}
+export default function SelectorToken<T extends string>({ value, onChange, icon, color, size, items, isSearchable, customStyle, }: SelectorTokenProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/primitives/tokens/Token.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { StyleXStyles } from '@stylexjs/stylex';
+import { IconType } from '../utils/icon';
+import { TokenColor, TokenSize } from './types';
+export interface TokenProps extends React.ComponentProps<'button'> {
+    /**
+     * The label to display on the token.
+     */
+    label?: string;
+    /**
+     * The icon to display on the token.
+     */
+    icon?: IconType;
+    /**
+     * The color of the token.
+     */
+    color?: TokenColor;
+    /**
+     * The size of the token.
+     */
+    size?: TokenSize;
+    /**
+     * Called when the token is clicked. Adding this will make the token appear interactive.
+     */
+    onClick?: (event: React.MouseEvent) => void;
+    /**
+     * Called when the token is hovered or not hovered.
+     */
+    onHover?: (isHovered: boolean) => void;
+    /**
+     * If true, the token will behave as button trigger without requiring an onClick event handler prop.
+     */
+    asButtonTrigger?: boolean;
+    /**
+     * The tooltip to show when hovering over the token.
+     */
+    tooltip?: string | React.ReactElement;
+    tooltipProps?: {
+        align?: 'start' | 'center' | 'end';
+        side?: 'top' | 'bottom' | 'left' | 'right';
+        alignOffset?: number;
+        sideOffset?: number;
+    };
+    /**
+     * Custom styles for the token.
+     */
+    customStyle?: StyleXStyles;
+}
+export default function Token({ label, icon, color, size, onClick, onHover, asButtonTrigger, tooltip, tooltipProps, customStyle, ...props }: TokenProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/primitives/tokens/TokenGroup.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import Token, { TokenProps } from './Token';
+import { StyleXStyles } from '@stylexjs/stylex';
+import { TokenColor } from './types';
+interface TokenGroupProps {
+    /**
+     * An array of Token components to be rendered within the group.
+     */
+    children: React.ReactElement<TokenProps, typeof Token>[];
+    /**
+     * The color to be applied to all tokens in the group. If not provided,
+     * the color will be determined by each token's individual color prop.
+     */
+    color?: TokenColor;
+    /**
+     * Custom styles
+     */
+    customStyle?: StyleXStyles;
+}
+export default function TokenGroup({ children, color, customStyle, }: TokenGroupProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/components/primitives/tokens/styles.d.ts

@@ -0,0 +1,45 @@
+export declare const tokenStyles: Readonly<{
+    readonly main: Readonly<{
+        readonly display: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"justifyContent", "center">;
+        readonly gap: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"gap", "8px">;
+        readonly borderRadius: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"borderRadius", "4px">;
+        readonly borderWidth: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"borderWidth", "0px">;
+        readonly outline: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"outline", "none">;
+        readonly cursor: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"cursor", "pointer">;
+        readonly overflow: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"overflow", "hidden">;
+        readonly background: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"background", string>;
+        readonly position: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"position", "relative">;
+    }>;
+    readonly icon: Readonly<{
+        readonly color: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"color", null>;
+    }>;
+    readonly label: Readonly<{
+        readonly color: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"color", null>;
+        readonly textOverflow: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"textOverflow", "ellipsis">;
+        readonly overflow: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"overflow", "hidden">;
+    }>;
+}>;
+export declare const tokenColorVariants: Readonly<{
+    readonly default: Readonly<{
+        readonly [x: string]: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<string, string>;
+    }>;
+    readonly purple: Readonly<{
+        readonly [x: string]: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<string, string>;
+    }>;
+    readonly green: Readonly<{
+        readonly [x: string]: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<string, string>;
+    }>;
+    readonly cyan: Readonly<{
+        readonly [x: string]: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<string, string>;
+    }>;
+}>;
+export declare const tokenSizeVariants: Readonly<{
+    readonly default: Readonly<{
+        readonly padding: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"padding", "4px 8px">;
+    }>;
+    readonly compact: Readonly<{
+        readonly padding: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"padding", "2px 4px">;
+    }>;
+}>;

package/dist/types/components/primitives/tokens/token.stylex.d.ts

@@ -0,0 +1,6 @@
+export declare const labelVars: import("@stylexjs/stylex").VarGroup<Readonly<{
+    color: null;
+}>, symbol>;
+export declare const iconVars: import("@stylexjs/stylex").VarGroup<Readonly<{
+    color: null;
+}>, symbol>;

package/dist/types/components/primitives/tokens/types.d.ts

@@ -0,0 +1,5 @@
+import { tokenColorVariants, tokenSizeVariants } from './styles';
+export declare const DEFAULT_TOKEN_COLOR = "default";
+export declare const DEFAULT_TOKEN_SIZE = "default";
+export type TokenColor = keyof typeof tokenColorVariants;
+export type TokenSize = keyof typeof tokenSizeVariants;