@voiceflow/style 1.1.0

package/build/cjs/main.js

@@ -0,0 +1,24 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.clsx = void 0;
+__exportStar(require("./styled"), exports);
+__exportStar(require("./ThemeContext"), exports);
+__exportStar(require("@vanilla-extract/css"), exports);
+__exportStar(require("@vanilla-extract/dynamic"), exports);
+__exportStar(require("@vanilla-extract/recipes"), exports);
+var clsx_1 = require("clsx");
+Object.defineProperty(exports, "clsx", { enumerable: true, get: function () { return clsx_1.clsx; } });

package/build/cjs/package.json

@@ -0,0 +1 @@
+{ "type": "commonjs" }

package/build/cjs/styled/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const STYLED_CLASS: unique symbol;
+//# sourceMappingURL=constants.d.ts.map

package/build/cjs/styled/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/styled/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,YAAY,eAAyB,CAAC"}

package/build/cjs/styled/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.STYLED_CLASS = void 0;
+exports.STYLED_CLASS = Symbol('styled_class');

package/build/cjs/styled/factory.d.ts

@@ -0,0 +1,180 @@
+import type { StyledFactory } from './types';
+export declare const styled: {
+    a: StyledFactory<"a">;
+    abbr: StyledFactory<"abbr">;
+    address: StyledFactory<"address">;
+    area: StyledFactory<"area">;
+    article: StyledFactory<"article">;
+    aside: StyledFactory<"aside">;
+    audio: StyledFactory<"audio">;
+    b: StyledFactory<"b">;
+    base: StyledFactory<"base">;
+    bdi: StyledFactory<"bdi">;
+    bdo: StyledFactory<"bdo">;
+    big: StyledFactory<"big">;
+    blockquote: StyledFactory<"blockquote">;
+    body: StyledFactory<"body">;
+    br: StyledFactory<"br">;
+    button: StyledFactory<"button">;
+    canvas: StyledFactory<"canvas">;
+    caption: StyledFactory<"caption">;
+    center: StyledFactory<"center">;
+    cite: StyledFactory<"cite">;
+    code: StyledFactory<"code">;
+    col: StyledFactory<"col">;
+    colgroup: StyledFactory<"colgroup">;
+    data: StyledFactory<"data">;
+    datalist: StyledFactory<"datalist">;
+    dd: StyledFactory<"dd">;
+    del: StyledFactory<"del">;
+    details: StyledFactory<"details">;
+    dfn: StyledFactory<"dfn">;
+    dialog: StyledFactory<"dialog">;
+    div: StyledFactory<"div">;
+    dl: StyledFactory<"dl">;
+    dt: StyledFactory<"dt">;
+    em: StyledFactory<"em">;
+    embed: StyledFactory<"embed">;
+    fieldset: StyledFactory<"fieldset">;
+    figcaption: StyledFactory<"figcaption">;
+    figure: StyledFactory<"figure">;
+    footer: StyledFactory<"footer">;
+    form: StyledFactory<"form">;
+    h1: StyledFactory<"h1">;
+    h2: StyledFactory<"h2">;
+    h3: StyledFactory<"h3">;
+    h4: StyledFactory<"h4">;
+    h5: StyledFactory<"h5">;
+    h6: StyledFactory<"h6">;
+    head: StyledFactory<"head">;
+    header: StyledFactory<"header">;
+    hgroup: StyledFactory<"hgroup">;
+    hr: StyledFactory<"hr">;
+    html: StyledFactory<"html">;
+    i: StyledFactory<"i">;
+    iframe: StyledFactory<"iframe">;
+    img: StyledFactory<"img">;
+    input: StyledFactory<"input">;
+    ins: StyledFactory<"ins">;
+    kbd: StyledFactory<"kbd">;
+    keygen: StyledFactory<"keygen">;
+    label: StyledFactory<"label">;
+    legend: StyledFactory<"legend">;
+    li: StyledFactory<"li">;
+    link: StyledFactory<"link">;
+    main: StyledFactory<"main">;
+    map: StyledFactory<"map">;
+    mark: StyledFactory<"mark">;
+    menu: StyledFactory<"menu">;
+    menuitem: StyledFactory<"menuitem">;
+    meta: StyledFactory<"meta">;
+    meter: StyledFactory<"meter">;
+    nav: StyledFactory<"nav">;
+    noindex: StyledFactory<"noindex">;
+    noscript: StyledFactory<"noscript">;
+    object: StyledFactory<"object">;
+    ol: StyledFactory<"ol">;
+    optgroup: StyledFactory<"optgroup">;
+    option: StyledFactory<"option">;
+    output: StyledFactory<"output">;
+    p: StyledFactory<"p">;
+    param: StyledFactory<"param">;
+    picture: StyledFactory<"picture">;
+    pre: StyledFactory<"pre">;
+    progress: StyledFactory<"progress">;
+    q: StyledFactory<"q">;
+    rp: StyledFactory<"rp">;
+    rt: StyledFactory<"rt">;
+    ruby: StyledFactory<"ruby">;
+    s: StyledFactory<"s">;
+    samp: StyledFactory<"samp">;
+    slot: StyledFactory<"slot">;
+    script: StyledFactory<"script">;
+    section: StyledFactory<"section">;
+    select: StyledFactory<"select">;
+    small: StyledFactory<"small">;
+    source: StyledFactory<"source">;
+    span: StyledFactory<"span">;
+    strong: StyledFactory<"strong">;
+    style: StyledFactory<"style">;
+    sub: StyledFactory<"sub">;
+    summary: StyledFactory<"summary">;
+    sup: StyledFactory<"sup">;
+    table: StyledFactory<"table">;
+    template: StyledFactory<"template">;
+    tbody: StyledFactory<"tbody">;
+    td: StyledFactory<"td">;
+    textarea: StyledFactory<"textarea">;
+    tfoot: StyledFactory<"tfoot">;
+    th: StyledFactory<"th">;
+    thead: StyledFactory<"thead">;
+    time: StyledFactory<"time">;
+    title: StyledFactory<"title">;
+    tr: StyledFactory<"tr">;
+    track: StyledFactory<"track">;
+    u: StyledFactory<"u">;
+    ul: StyledFactory<"ul">;
+    var: StyledFactory<"var">;
+    video: StyledFactory<"video">;
+    wbr: StyledFactory<"wbr">;
+    webview: StyledFactory<"webview">;
+    svg: StyledFactory<"svg">;
+    animate: StyledFactory<"animate">;
+    animateMotion: StyledFactory<"animateMotion">;
+    animateTransform: StyledFactory<"animateTransform">;
+    circle: StyledFactory<"circle">;
+    clipPath: StyledFactory<"clipPath">;
+    defs: StyledFactory<"defs">;
+    desc: StyledFactory<"desc">;
+    ellipse: StyledFactory<"ellipse">;
+    feBlend: StyledFactory<"feBlend">;
+    feColorMatrix: StyledFactory<"feColorMatrix">;
+    feComponentTransfer: StyledFactory<"feComponentTransfer">;
+    feComposite: StyledFactory<"feComposite">;
+    feConvolveMatrix: StyledFactory<"feConvolveMatrix">;
+    feDiffuseLighting: StyledFactory<"feDiffuseLighting">;
+    feDisplacementMap: StyledFactory<"feDisplacementMap">;
+    feDistantLight: StyledFactory<"feDistantLight">;
+    feDropShadow: StyledFactory<"feDropShadow">;
+    feFlood: StyledFactory<"feFlood">;
+    feFuncA: StyledFactory<"feFuncA">;
+    feFuncB: StyledFactory<"feFuncB">;
+    feFuncG: StyledFactory<"feFuncG">;
+    feFuncR: StyledFactory<"feFuncR">;
+    feGaussianBlur: StyledFactory<"feGaussianBlur">;
+    feImage: StyledFactory<"feImage">;
+    feMerge: StyledFactory<"feMerge">;
+    feMergeNode: StyledFactory<"feMergeNode">;
+    feMorphology: StyledFactory<"feMorphology">;
+    feOffset: StyledFactory<"feOffset">;
+    fePointLight: StyledFactory<"fePointLight">;
+    feSpecularLighting: StyledFactory<"feSpecularLighting">;
+    feSpotLight: StyledFactory<"feSpotLight">;
+    feTile: StyledFactory<"feTile">;
+    feTurbulence: StyledFactory<"feTurbulence">;
+    filter: StyledFactory<"filter">;
+    foreignObject: StyledFactory<"foreignObject">;
+    g: StyledFactory<"g">;
+    image: StyledFactory<"image">;
+    line: StyledFactory<"line">;
+    linearGradient: StyledFactory<"linearGradient">;
+    marker: StyledFactory<"marker">;
+    mask: StyledFactory<"mask">;
+    metadata: StyledFactory<"metadata">;
+    mpath: StyledFactory<"mpath">;
+    path: StyledFactory<"path">;
+    pattern: StyledFactory<"pattern">;
+    polygon: StyledFactory<"polygon">;
+    polyline: StyledFactory<"polyline">;
+    radialGradient: StyledFactory<"radialGradient">;
+    rect: StyledFactory<"rect">;
+    stop: StyledFactory<"stop">;
+    switch: StyledFactory<"switch">;
+    symbol: StyledFactory<"symbol">;
+    text: StyledFactory<"text">;
+    textPath: StyledFactory<"textPath">;
+    tspan: StyledFactory<"tspan">;
+    use: StyledFactory<"use">;
+    view: StyledFactory<"view">;
+};
+//# sourceMappingURL=factory.d.ts.map

package/build/cjs/styled/factory.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"factory.d.ts","sourceRoot":"","sources":["../../../src/styled/factory.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAMV,aAAa,EACd,MAAM,SAAS,CAAC;AAGjB,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuBjB,CAAC"}

package/build/cjs/styled/factory.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.styled = void 0;
+const clsx_1 = require("clsx");
+const react_1 = require("react");
+const ThemeContext_1 = require("../ThemeContext");
+const constants_1 = require("./constants");
+const utils_1 = require("./utils");
+exports.styled = new Proxy({}, {
+    get: (_target, tag) => (firstArg, secondArg, thirdArg) => {
+        const staticClass = (0, utils_1.getStaticClass)(firstArg, secondArg);
+        const dynamicOptions = (0, utils_1.getDynamicOptions)(secondArg, thirdArg);
+        const StyledComponent = (props) => {
+            const themeClass = (0, ThemeContext_1.useTheme)();
+            const dynamicClass = (0, utils_1.useDynamicClass)(firstArg, props);
+            const inlineStyle = (0, utils_1.useInlineStyle)(props, dynamicOptions);
+            return (0, react_1.createElement)(tag, {
+                ...props,
+                className: (0, clsx_1.clsx)(themeClass, staticClass, dynamicClass, props.className),
+                style: { ...inlineStyle, ...props.style },
+            });
+        };
+        return Object.assign(StyledComponent, { [constants_1.STYLED_CLASS]: staticClass });
+    },
+});

package/build/cjs/styled/factory.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=factory.test.d.ts.map

package/build/cjs/styled/factory.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"factory.test.d.ts","sourceRoot":"","sources":["../../../src/styled/factory.test.tsx"],"names":[],"mappings":""}

package/build/cjs/styled/factory.test.js

@@ -0,0 +1,140 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const vitest_1 = require("vitest");
+const __fixtures__1 = require("../__fixtures__");
+const ThemeContext_1 = require("../ThemeContext");
+const BASE_STYLE = {
+    padding: '20px',
+    borderRadius: '10px',
+    margin: '10px',
+};
+(0, vitest_1.describe)('styled factory', () => {
+    (0, vitest_1.describe)('static styling', () => {
+        (0, vitest_1.it)('should inherit styles from static CSS', () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(__fixtures__1.Button, {}));
+            const el = react_1.screen.getByRole('button');
+            expect(el).toHaveClass(__fixtures__1.Button.css.base);
+            expect(el).toHaveStyle(BASE_STYLE);
+        });
+    });
+    (0, vitest_1.describe)('reusable CSS', () => {
+        (0, vitest_1.it)('should extend static CSS with overrides', () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(__fixtures__1.ReuseCSS, {}));
+            const el = react_1.screen.getByRole('button');
+            expect(el).toHaveClass(__fixtures__1.Button.css.base, __fixtures__1.ReuseCSS.css.base);
+            expect(el).toHaveStyle({
+                padding: '20px',
+                margin: '10px',
+                backgroundColor: 'red',
+                borderRadius: '0',
+            });
+        });
+    });
+    (0, vitest_1.describe)('reusable styled components', () => {
+        (0, vitest_1.it)('should extend styled component with overrides', () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(__fixtures__1.ReuseStyled, {}));
+            const el = react_1.screen.getByRole('button');
+            expect(el).toHaveClass(__fixtures__1.Button.css.base, __fixtures__1.ReuseStyled.css.override);
+            expect(el).toHaveStyle({
+                padding: '20px',
+                border: '1px solid red',
+                margin: '2px',
+            });
+        });
+    });
+    (0, vitest_1.describe)('style variants', () => {
+        (0, vitest_1.it)('should render the primary style variant', () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(__fixtures__1.VariantButton, { variant: "primary" }));
+            const el = react_1.screen.getByRole('button');
+            expect(el).toHaveClass(__fixtures__1.Button.css.base, __fixtures__1.VariantButton.css.variants.primary);
+            expect(el).toHaveStyle({
+                ...BASE_STYLE,
+                borderWidth: '2px',
+                borderColor: 'pink',
+            });
+        });
+        (0, vitest_1.it)('should render the secondary style variant', () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(__fixtures__1.VariantButton, { variant: "secondary" }));
+            const el = react_1.screen.getByRole('button');
+            expect(el).toHaveClass(__fixtures__1.Button.css.base, __fixtures__1.VariantButton.css.variants.secondary);
+            expect(el).toHaveStyle({
+                ...BASE_STYLE,
+                borderWidth: '2px',
+                borderColor: 'blue',
+            });
+        });
+    });
+    (0, vitest_1.describe)('style recipes', () => {
+        (0, vitest_1.it)('should render a recipe with default variants', () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(__fixtures__1.RecipeButton, {}));
+            const el = react_1.screen.getByRole('button');
+            expect(el).toHaveClass(__fixtures__1.Button.css.base);
+            expect(el).toHaveStyle({
+                ...BASE_STYLE,
+                border: '1px dashed black',
+                fontSize: '18px',
+            });
+        });
+        (0, vitest_1.it)('should render a recipe with selected variants', () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(__fixtures__1.RecipeButton, { fontSize: "sm", color: "warn" }));
+            const el = react_1.screen.getByRole('button');
+            expect(el).toHaveClass(__fixtures__1.Button.css.base);
+            expect(el).toHaveStyle({
+                ...BASE_STYLE,
+                border: '1px dashed black',
+                backgroundColor: 'orange',
+                fontSize: '10px',
+            });
+        });
+    });
+    // unable to test CSS variables fully in JSDOM it seems
+    // https://github.com/jsdom/jsdom/pull/3299
+    vitest_1.describe.skip('themed components', () => {
+        (0, vitest_1.it)('should render styles from the provided theme', () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(ThemeContext_1.ThemeProvider, { theme: __fixtures__1.Theme.light, children: (0, jsx_runtime_1.jsx)(__fixtures__1.ThemedButton, {}) }));
+            const el = react_1.screen.getByRole('button');
+            expect(el).toHaveClass(__fixtures__1.Button.css.base, __fixtures__1.ThemedButton.css.themed);
+            expect(el).toHaveStyle({
+                ...BASE_STYLE,
+                color: 'red',
+                borderRadius: '0',
+            });
+        });
+        (0, vitest_1.it)('should override styles with contextual themes', () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(ThemeContext_1.ThemeProvider, { theme: __fixtures__1.Theme.light, children: (0, jsx_runtime_1.jsx)(ThemeContext_1.ThemeProvider, { theme: __fixtures__1.Theme.dark, children: (0, jsx_runtime_1.jsx)(__fixtures__1.ThemedButton, {}) }) }));
+            const el = react_1.screen.getByRole('button');
+            expect(el).toHaveClass(__fixtures__1.Button.css.base, __fixtures__1.ThemedButton.css.themed);
+            expect(el).toHaveStyle({
+                ...BASE_STYLE,
+                color: 'blue',
+                borderRadius: '0',
+            });
+        });
+    });
+    vitest_1.describe.skip('inline CSS variables', () => {
+        (0, vitest_1.it)('should render style from dynamic values', () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(__fixtures__1.InlineVarButton, { brandColor: "green" }));
+            const el = react_1.screen.getByRole('button');
+            expect(el).toHaveClass(__fixtures__1.Button.css.base, __fixtures__1.InlineVarButton.css.base);
+            expect(el).toHaveStyle({
+                ...BASE_STYLE,
+                color: 'green',
+                borderRadius: '0',
+            });
+        });
+    });
+    vitest_1.describe.skip('inline theme', () => {
+        (0, vitest_1.it)('should render style from inline theme', () => {
+            (0, react_1.render)((0, jsx_runtime_1.jsx)(__fixtures__1.InlineThemedButton, { brandColor: "green" }));
+            const el = react_1.screen.getByRole('button');
+            expect(el).toHaveClass(__fixtures__1.Button.css.base, __fixtures__1.InlineThemedButton.css.themed);
+            expect(el).toHaveStyle({
+                ...BASE_STYLE,
+                color: 'green',
+                borderRadius: '0',
+            });
+        });
+    });
+});

package/build/cjs/styled/index.d.ts

@@ -0,0 +1,5 @@
+export * from './constants';
+export * from './factory';
+export * from './types';
+export * from './utils';
+//# sourceMappingURL=index.d.ts.map

package/build/cjs/styled/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styled/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/build/cjs/styled/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./constants"), exports);
+__exportStar(require("./factory"), exports);
+__exportStar(require("./types"), exports);
+__exportStar(require("./utils"), exports);

package/build/cjs/styled/types.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import type { assignInlineVars } from '@vanilla-extract/dynamic';
+import type { RecipeVariants, RuntimeFn } from '@vanilla-extract/recipes';
+import type { STYLED_CLASS } from './constants';
+export type ThemeContract = Parameters<typeof assignInlineVars>[0];
+export interface DynamicOptions<Theme extends ThemeContract | null = ThemeContract, Variables extends Record<string, string> | null = Record<string, string>> {
+    /**
+     * the contract for a theme that can be overridden via a `theme` prop
+     */
+    theme?: Theme;
+    /**
+     * variables that can be overridden via a `vars` prop
+     */
+    vars?: Variables;
+}
+export type DynamicThemeProps<Theme> = Theme extends ThemeContract ? {
+    /**
+     * inline override for the theme used to style this component
+     */
+    theme?: Parameters<typeof assignInlineVars<Theme>>[1];
+} : {};
+export type DynamicVariablesProps<Variables> = Variables extends Record<string, string> ? {
+    /**
+     * inline override for variables used to styled this component
+     */
+    vars?: Partial<{
+        [K in keyof Variables]: string;
+    }>;
+} : {};
+export type StyledComponentProps<Tag extends keyof JSX.IntrinsicElements, Theme, Variables, Extras extends object = {}> = React.ComponentProps<Tag> & DynamicThemeProps<Theme> & DynamicVariablesProps<Variables> & Extras;
+export interface StyledComponent<Props = {}> extends React.FunctionComponent<Props> {
+    (props: Props, context?: any): React.ReactElement<any, any> | null;
+    [STYLED_CLASS]: string | null;
+}
+export type StyleSource = StyledComponent | string;
+export interface StyledFactory<Tag extends keyof JSX.IntrinsicElements> {
+    <Recipe extends RuntimeFn<Record<string, any>>, Theme extends ThemeContract | null = null, Variables extends Record<string, string> | null = null>(recipe: Recipe, sources?: StyleSource[], dynamic?: DynamicOptions<Theme, Variables>): StyledComponent<StyledComponentProps<Tag, Theme, Variables, {
+        variants: RecipeVariants<Recipe>;
+    }>>;
+    <Variant extends string, Theme extends ThemeContract | null = null, Variables extends Record<string, string> | null = null>(variants: Record<Variant, string>, sources?: StyleSource[], dynamic?: DynamicOptions<Theme, Variables>): StyledComponent<StyledComponentProps<Tag, Theme, Variables, {
+        variant: Variant;
+    }>>;
+    <Theme extends ThemeContract | null = null, Variables extends Record<string, string> | null = null>(sources: StyleSource[], dynamic?: DynamicOptions<Theme, Variables>): StyledComponent<StyledComponentProps<Tag, Theme, Variables>>;
+}
+export type FirstStyledArgument<Variants extends {} = any> = RuntimeFn<Variants> | Record<string, string> | StyleSource[];
+export type SecondStyledArgument = StyleSource[] | DynamicOptions;
+//# sourceMappingURL=types.d.ts.map

package/build/cjs/styled/types.d.ts.map

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

package/build/cjs/styled/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/build/cjs/styled/utils.d.ts

@@ -0,0 +1,9 @@
+import type { DynamicOptions, FirstStyledArgument, SecondStyledArgument, StyledComponentProps, ThemeContract } from './types';
+export declare const getStaticClass: (firstArg: FirstStyledArgument, secondArg?: SecondStyledArgument) => string | null;
+export declare const getDynamicOptions: (secondArg?: SecondStyledArgument, thirdArg?: DynamicOptions) => DynamicOptions | null;
+export declare const useDynamicClass: (firstArg: FirstStyledArgument<any>, props: {
+    variant?: string;
+    variants?: Record<string, any>;
+}) => string | null;
+export declare const useInlineStyle: (props: StyledComponentProps<keyof JSX.IntrinsicElements, ThemeContract, Record<string, string>>, dynamicOptions: DynamicOptions | null) => {};
+//# sourceMappingURL=utils.d.ts.map

package/build/cjs/styled/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/styled/utils.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EACV,cAAc,EACd,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,EACpB,aAAa,EACd,MAAM,SAAS,CAAC;AAEjB,eAAO,MAAM,cAAc,aAAc,mBAAmB,cAAc,oBAAoB,KAAG,MAAM,GAAG,IAOzG,CAAC;AAEF,eAAO,MAAM,iBAAiB,eAAgB,oBAAoB,aAAa,cAAc,KAAG,cAAc,GAAG,IACtD,CAAC;AAE5D,eAAO,MAAM,eAAe,aAChB,oBAAoB,GAAG,CAAC,SAC3B;IAAE,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE,kBAOd,CAAC;AAEhD,eAAO,MAAM,cAAc,UAClB,qBAAqB,MAAM,IAAI,iBAAiB,EAAE,aAAa,EAAE,OAAO,MAAM,EAAE,MAAM,CAAC,CAAC,kBAC/E,cAAc,GAAG,IAAI,OAiBtC,CAAC"}

package/build/cjs/styled/utils.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInlineStyle = exports.useDynamicClass = exports.getDynamicOptions = exports.getStaticClass = void 0;
+const dynamic_1 = require("@vanilla-extract/dynamic");
+const clsx_1 = require("clsx");
+const react_1 = require("react");
+const constants_1 = require("./constants");
+const getStaticClass = (firstArg, secondArg) => {
+    // eslint-disable-next-line no-nested-ternary
+    const classNames = (Array.isArray(firstArg) ? firstArg : Array.isArray(secondArg) ? secondArg : []).map((source) => typeof source === 'string' ? source : source[constants_1.STYLED_CLASS]);
+    return classNames.length ? (0, clsx_1.clsx)(classNames) : null;
+};
+exports.getStaticClass = getStaticClass;
+const getDynamicOptions = (secondArg, thirdArg) => (Array.isArray(secondArg) ? thirdArg : secondArg) ?? null;
+exports.getDynamicOptions = getDynamicOptions;
+const useDynamicClass = (firstArg, props) => (0, react_1.useMemo)(() => {
+    if (typeof firstArg === 'function')
+        return firstArg(props.variants);
+    if (Array.isArray(firstArg) || !props.variant)
+        return null;
+    return firstArg[props.variant];
+}, [firstArg, props.variants, props.variant]);
+exports.useDynamicClass = useDynamicClass;
+const useInlineStyle = (props, dynamicOptions) => {
+    const { theme, vars } = dynamicOptions ?? {};
+    return (0, react_1.useMemo)(() => {
+        const style = {};
+        if (theme && props.theme) {
+            Object.assign(style, (0, dynamic_1.assignInlineVars)(theme, props.theme));
+        }
+        if (vars && props.vars) {
+            Object.assign(style, (0, dynamic_1.assignInlineVars)(props.vars));
+        }
+        return style;
+    }, [props.theme, props.vars]);
+};
+exports.useInlineStyle = useInlineStyle;

package/build/esm/ThemeContext.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const ThemeContext: import("react").Context<string | null>;
+export declare const ThemeConsumer: import("react").Consumer<string | null>;
+export interface ThemeProviderProps extends React.PropsWithChildren {
+    theme: string;
+}
+export declare const ThemeProvider: React.FC<ThemeProviderProps>;
+export declare const useTheme: () => string | null;
+//# sourceMappingURL=ThemeContext.d.ts.map

package/build/esm/ThemeContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../src/ThemeContext.tsx"],"names":[],"mappings":";AAEA,eAAO,MAAM,YAAY,wCAAqC,CAAC;AAC/D,eAAO,MAAkB,aAAa,yCAAiB,CAAC;AAExD,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,iBAAiB;IACjE,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAEtD,CAAC;AAEF,eAAO,MAAM,QAAQ,qBAAiC,CAAC"}

package/build/esm/ThemeContext.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+export const ThemeContext = createContext(null);
+export const { Consumer: ThemeConsumer } = ThemeContext;
+export const ThemeProvider = ({ theme, children }) => (_jsx(ThemeContext.Provider, { value: theme, children: children }));
+export const useTheme = () => useContext(ThemeContext);

package/build/esm/__fixtures__/Button/Button.component.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface ButtonProps extends React.PropsWithChildren {
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
+export declare const Button: React.FC<ButtonProps>;
+//# sourceMappingURL=Button.component.d.ts.map

package/build/esm/__fixtures__/Button/Button.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.component.d.ts","sourceRoot":"","sources":["../../../../src/__fixtures__/Button/Button.component.tsx"],"names":[],"mappings":";AAEA,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,iBAAiB;IAC1D,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;CACtD;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAA4E,CAAC"}

package/build/esm/__fixtures__/Button/Button.component.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as S from './Button.styled.js';
+export const Button = ({ onClick, children }) => _jsx(S.Base, { onClick: onClick, children: children });

package/build/esm/__fixtures__/Button/Button.css.d.ts

@@ -0,0 +1,2 @@
+export declare const base: string;
+//# sourceMappingURL=Button.css.d.ts.map

package/build/esm/__fixtures__/Button/Button.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.css.d.ts","sourceRoot":"","sources":["../../../../src/__fixtures__/Button/Button.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI,QAIf,CAAC"}

package/build/esm/__fixtures__/Button/Button.css.js

@@ -0,0 +1,6 @@
+import { style } from '../../main.js';
+export const base = style({
+    padding: 20,
+    borderRadius: 10,
+    margin: 10,
+});

package/build/esm/__fixtures__/Button/Button.styled.d.ts

@@ -0,0 +1,2 @@
+export declare const Base: import("../../main.js").StyledComponent<import("../../main.js").StyledComponentProps<"button", null, null, {}>>;
+//# sourceMappingURL=Button.styled.d.ts.map

package/build/esm/__fixtures__/Button/Button.styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.styled.d.ts","sourceRoot":"","sources":["../../../../src/__fixtures__/Button/Button.styled.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,mGAAwB,CAAC"}

package/build/esm/__fixtures__/Button/Button.styled.js

@@ -0,0 +1,3 @@
+import { styled } from '../../main.js';
+import { base } from './Button.css.js';
+export const Base = styled.button([base]);

package/build/esm/__fixtures__/Button/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import * as css from './Button.css.js';
+import * as styled from './Button.styled.js';
+export type { ButtonProps } from './Button.component.js';
+export declare const Button: import("react").FC<import("./Button.component.js").ButtonProps> & typeof styled & {
+    css: typeof css;
+};
+//# sourceMappingURL=index.d.ts.map

package/build/esm/__fixtures__/Button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/__fixtures__/Button/index.ts"],"names":[],"mappings":";AACA,OAAO,KAAK,GAAG,MAAM,cAAc,CAAC;AACpC,OAAO,KAAK,MAAM,MAAM,iBAAiB,CAAC;AAE1C,YAAY,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEtD,eAAO,MAAM,MAAM;;CAAkD,CAAC"}

package/build/esm/__fixtures__/Button/index.js

@@ -0,0 +1,4 @@
+import { Button as ButtonComponent } from './Button.component.js';
+import * as css from './Button.css.js';
+import * as styled from './Button.styled.js';
+export const Button = Object.assign(ButtonComponent, styled, { css });