@voiceflow/style 1.1.0

package/CHANGELOG.md

@@ -0,0 +1,21 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 1.1.0 (2023-04-26)
+
+### Bug Fixes
+
+* correct import ([127fc98](https://github.com/voiceflow/design/commit/127fc9851e8e5e4e5dbea6d6b4216be6312da922))
+* working build ([4802e0c](https://github.com/voiceflow/design/commit/4802e0c7aee6a75d280e9c559be49f4e5c31c7d6))
+
+### Features
+
+* add support for second argument to styled factory ([57c356d](https://github.com/voiceflow/design/commit/57c356d3efbce73a50675f10cba4b900f48844ef))
+* Add test setup && storybook setup (DX-407) ([#12](https://github.com/voiceflow/design/issues/12)) ([2c1a679](https://github.com/voiceflow/design/commit/2c1a679fc1e2fd939a83ed29dc73a00b156ce0f1))
+* add ui and style scaffolding ([f515d20](https://github.com/voiceflow/design/commit/f515d20df910d52d25a6e0d9b462c488048f27a0))
+* inline vars working ([6dbe628](https://github.com/voiceflow/design/commit/6dbe6288c803f971c5d53894257880a76aacb46e))
+* style variants ([f8f55d0](https://github.com/voiceflow/design/commit/f8f55d0c8d83e7bf4870e19843ae0f5df57b02e4))
+* styled component utils ([8d4a3ab](https://github.com/voiceflow/design/commit/8d4a3abfe20e62bfca810254635ceb1f4ed8afdc))
+* styled working ([622a4f1](https://github.com/voiceflow/design/commit/622a4f196051f262fd2bba52545c3dbe73a63306))

package/build/cjs/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/cjs/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/cjs/ThemeContext.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTheme = exports.ThemeProvider = exports.ThemeConsumer = exports.ThemeContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.ThemeContext = (0, react_1.createContext)(null);
+exports.ThemeConsumer = exports.ThemeContext.Consumer;
+const ThemeProvider = ({ theme, children }) => ((0, jsx_runtime_1.jsx)(exports.ThemeContext.Provider, { value: theme, children: children }));
+exports.ThemeProvider = ThemeProvider;
+const useTheme = () => (0, react_1.useContext)(exports.ThemeContext);
+exports.useTheme = useTheme;

package/build/cjs/__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/cjs/__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/cjs/__fixtures__/Button/Button.component.js

@@ -0,0 +1,30 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const S = __importStar(require("./Button.styled"));
+const Button = ({ onClick, children }) => (0, jsx_runtime_1.jsx)(S.Base, { onClick: onClick, children: children });
+exports.Button = Button;

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

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

package/build/cjs/__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/cjs/__fixtures__/Button/Button.css.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.base = void 0;
+const main_1 = require("../../main");
+exports.base = (0, main_1.style)({
+    padding: 20,
+    borderRadius: 10,
+    margin: 10,
+});

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

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

package/build/cjs/__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/cjs/__fixtures__/Button/Button.styled.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Base = void 0;
+const main_1 = require("../../main");
+const Button_css_1 = require("./Button.css");
+exports.Base = main_1.styled.button([Button_css_1.base]);

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

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

package/build/cjs/__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/cjs/__fixtures__/Button/index.js

@@ -0,0 +1,30 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const Button_component_1 = require("./Button.component");
+const css = __importStar(require("./Button.css"));
+const styled = __importStar(require("./Button.styled"));
+exports.Button = Object.assign(Button_component_1.Button, styled, { css });

package/build/cjs/__fixtures__/InlineThemedButton/InlineThemedButton.component.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { ButtonProps } from '../Button';
+export interface InlineThemedButtonProps extends ButtonProps {
+    brandColor: string;
+}
+export declare const InlineThemedButton: React.FC<InlineThemedButtonProps>;
+//# sourceMappingURL=InlineThemedButton.component.d.ts.map

package/build/cjs/__fixtures__/InlineThemedButton/InlineThemedButton.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineThemedButton.component.d.ts","sourceRoot":"","sources":["../../../../src/__fixtures__/InlineThemedButton/InlineThemedButton.component.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAI7C,MAAM,WAAW,uBAAwB,SAAQ,WAAW;IAC1D,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAIhE,CAAC"}

package/build/cjs/__fixtures__/InlineThemedButton/InlineThemedButton.component.js

@@ -0,0 +1,31 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InlineThemedButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Theme = __importStar(require("../theme.css"));
+const S = __importStar(require("./InlineThemedButton.styled"));
+const InlineThemedButton = ({ brandColor, onClick, children }) => ((0, jsx_runtime_1.jsx)(S.Base, { onClick: onClick, theme: { color: { brand: brandColor }, spacing: Theme.spacing }, children: children }));
+exports.InlineThemedButton = InlineThemedButton;

package/build/cjs/__fixtures__/InlineThemedButton/InlineThemedButton.css.d.ts

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

package/build/cjs/__fixtures__/InlineThemedButton/InlineThemedButton.css.d.ts.map

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

package/build/cjs/__fixtures__/InlineThemedButton/InlineThemedButton.css.js

@@ -0,0 +1,32 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.themed = void 0;
+const main_1 = require("../../main");
+const Theme = __importStar(require("../theme.css"));
+exports.themed = (0, main_1.style)({
+    color: Theme.vars.color.brand,
+    borderRadius: 0,
+});

package/build/cjs/__fixtures__/InlineThemedButton/InlineThemedButton.styled.d.ts

@@ -0,0 +1,11 @@
+export declare const Base: import("../../main").StyledComponent<import("../../main").StyledComponentProps<"button", {
+    color: {
+        brand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+    spacing: {
+        sm: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        md: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        lg: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+    };
+}, null, {}>>;
+//# sourceMappingURL=InlineThemedButton.styled.d.ts.map

package/build/cjs/__fixtures__/InlineThemedButton/InlineThemedButton.styled.d.ts.map

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

package/build/cjs/__fixtures__/InlineThemedButton/InlineThemedButton.styled.js

@@ -0,0 +1,31 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Base = void 0;
+const main_1 = require("../../main");
+const Button_1 = require("../Button");
+const Theme = __importStar(require("../theme.css"));
+const InlineThemedButton_css_1 = require("./InlineThemedButton.css");
+exports.Base = main_1.styled.button([Button_1.Button.Base, InlineThemedButton_css_1.themed], { theme: Theme.vars });

package/build/cjs/__fixtures__/InlineThemedButton/index.d.ts

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

package/build/cjs/__fixtures__/InlineThemedButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/__fixtures__/InlineThemedButton/index.ts"],"names":[],"mappings":";AACA,OAAO,KAAK,GAAG,MAAM,0BAA0B,CAAC;AAEhD,eAAO,MAAM,kBAAkB;;CAAsD,CAAC"}

package/build/cjs/__fixtures__/InlineThemedButton/index.js

@@ -0,0 +1,29 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InlineThemedButton = void 0;
+const InlineThemedButton_component_1 = require("./InlineThemedButton.component");
+const css = __importStar(require("./InlineThemedButton.css"));
+exports.InlineThemedButton = Object.assign(InlineThemedButton_component_1.InlineThemedButton, { css });

package/build/cjs/__fixtures__/InlineVarButton/InlineVarButton.component.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { ButtonProps } from '../Button';
+export interface InlineVarButtonProps extends ButtonProps {
+    brandColor: string;
+}
+export declare const InlineVarButton: React.FC<InlineVarButtonProps>;
+//# sourceMappingURL=InlineVarButton.component.d.ts.map

package/build/cjs/__fixtures__/InlineVarButton/InlineVarButton.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineVarButton.component.d.ts","sourceRoot":"","sources":["../../../../src/__fixtures__/InlineVarButton/InlineVarButton.component.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAG7C,MAAM,WAAW,oBAAqB,SAAQ,WAAW;IACvD,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAI1D,CAAC"}

package/build/cjs/__fixtures__/InlineVarButton/InlineVarButton.component.js

@@ -0,0 +1,30 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InlineVarButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const S = __importStar(require("./InlineVarButton.styled"));
+const InlineVarButton = ({ brandColor, onClick, children }) => ((0, jsx_runtime_1.jsx)(S.Base, { onClick: onClick, vars: { brandColor }, children: children }));
+exports.InlineVarButton = InlineVarButton;

package/build/cjs/__fixtures__/InlineVarButton/InlineVarButton.css.d.ts

@@ -0,0 +1,3 @@
+export declare const colorVar: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+export declare const base: string;
+//# sourceMappingURL=InlineVarButton.css.d.ts.map

package/build/cjs/__fixtures__/InlineVarButton/InlineVarButton.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineVarButton.css.d.ts","sourceRoot":"","sources":["../../../../src/__fixtures__/InlineVarButton/InlineVarButton.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,oFAAc,CAAC;AAEpC,eAAO,MAAM,IAAI,QAOf,CAAC"}

package/build/cjs/__fixtures__/InlineVarButton/InlineVarButton.css.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.base = exports.colorVar = void 0;
+const main_1 = require("../../main");
+exports.colorVar = (0, main_1.createVar)();
+exports.base = (0, main_1.style)({
+    vars: {
+        [exports.colorVar]: 'red',
+    },
+    backgroundColor: exports.colorVar,
+    borderRadius: 0,
+});

package/build/cjs/__fixtures__/InlineVarButton/InlineVarButton.styled.d.ts

@@ -0,0 +1,4 @@
+export declare const Base: import("../../main").StyledComponent<import("../../main").StyledComponentProps<"button", null, {
+    brandColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+}, {}>>;
+//# sourceMappingURL=InlineVarButton.styled.d.ts.map

package/build/cjs/__fixtures__/InlineVarButton/InlineVarButton.styled.d.ts.map

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

package/build/cjs/__fixtures__/InlineVarButton/InlineVarButton.styled.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Base = void 0;
+const main_1 = require("../../main");
+const Button_1 = require("../Button");
+const InlineVarButton_css_1 = require("./InlineVarButton.css");
+exports.Base = main_1.styled.button([Button_1.Button.Base, InlineVarButton_css_1.base], {
+    vars: {
+        brandColor: InlineVarButton_css_1.colorVar,
+    },
+});

package/build/cjs/__fixtures__/InlineVarButton/index.d.ts

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

package/build/cjs/__fixtures__/InlineVarButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/__fixtures__/InlineVarButton/index.ts"],"names":[],"mappings":";AACA,OAAO,KAAK,GAAG,MAAM,uBAAuB,CAAC;AAE7C,eAAO,MAAM,eAAe;;CAAmD,CAAC"}

package/build/cjs/__fixtures__/InlineVarButton/index.js

@@ -0,0 +1,29 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InlineVarButton = void 0;
+const InlineVarButton_component_1 = require("./InlineVarButton.component");
+const css = __importStar(require("./InlineVarButton.css"));
+exports.InlineVarButton = Object.assign(InlineVarButton_component_1.InlineVarButton, { css });

package/build/cjs/__fixtures__/RecipeButton/RecipeButton.component.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { RecipeVariants } from '../../main';
+import type { ButtonProps } from '../Button';
+import type { complex } from './RecipeButton.css';
+export type RecipeButtonProps = ButtonProps & RecipeVariants<typeof complex>;
+export declare const RecipeButton: React.FC<RecipeButtonProps>;
+//# sourceMappingURL=RecipeButton.component.d.ts.map

package/build/cjs/__fixtures__/RecipeButton/RecipeButton.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecipeButton.component.d.ts","sourceRoot":"","sources":["../../../../src/__fixtures__/RecipeButton/RecipeButton.component.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAE7C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAGlD,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG,cAAc,CAAC,OAAO,OAAO,CAAC,CAAC;AAE7E,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAIpD,CAAC"}

package/build/cjs/__fixtures__/RecipeButton/RecipeButton.component.js

@@ -0,0 +1,30 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RecipeButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const S = __importStar(require("./RecipeButton.styled"));
+const RecipeButton = ({ color, fontSize, onClick, children }) => ((0, jsx_runtime_1.jsx)(S.Base, { variants: { color, fontSize }, onClick: onClick, children: children }));
+exports.RecipeButton = RecipeButton;

package/build/cjs/__fixtures__/RecipeButton/RecipeButton.css.d.ts

@@ -0,0 +1,22 @@
+export declare const complex: import("@vanilla-extract/recipes").RuntimeFn<{
+    color: {
+        ok: {
+            backgroundColor: "cyan";
+        };
+        warn: {
+            backgroundColor: "orange";
+        };
+    };
+    fontSize: {
+        sm: {
+            fontSize: number;
+        };
+        md: {
+            fontSize: number;
+        };
+        lg: {
+            fontSize: number;
+        };
+    };
+}>;
+//# sourceMappingURL=RecipeButton.css.d.ts.map

package/build/cjs/__fixtures__/RecipeButton/RecipeButton.css.d.ts.map

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

package/build/cjs/__fixtures__/RecipeButton/RecipeButton.css.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.complex = void 0;
+const main_1 = require("../../main");
+exports.complex = (0, main_1.recipe)({
+    base: {
+        border: '1px dashed black',
+    },
+    variants: {
+        color: {
+            ok: { backgroundColor: 'cyan' },
+            warn: { backgroundColor: 'orange' },
+        },
+        fontSize: {
+            sm: { fontSize: 10 },
+            md: { fontSize: 14 },
+            lg: { fontSize: 18 },
+        },
+    },
+    defaultVariants: {
+        fontSize: 'lg',
+    },
+});

package/build/cjs/__fixtures__/RecipeButton/RecipeButton.styled.d.ts

@@ -0,0 +1,7 @@
+export declare const Base: import("../../main").StyledComponent<import("../../main").StyledComponentProps<"button", null, null, {
+    variants: {
+        color?: "ok" | "warn" | undefined;
+        fontSize?: "sm" | "md" | "lg" | undefined;
+    } | undefined;
+}>>;
+//# sourceMappingURL=RecipeButton.styled.d.ts.map

package/build/cjs/__fixtures__/RecipeButton/RecipeButton.styled.d.ts.map

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

package/build/cjs/__fixtures__/RecipeButton/RecipeButton.styled.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Base = void 0;
+const main_1 = require("../../main");
+const Button_1 = require("../Button");
+const RecipeButton_css_1 = require("./RecipeButton.css");
+exports.Base = main_1.styled.button(RecipeButton_css_1.complex, [Button_1.Button.Base]);

package/build/cjs/__fixtures__/RecipeButton/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import * as css from './RecipeButton.css';
+export declare const RecipeButton: import("react").FC<import("..").ButtonProps & {
+    color?: "ok" | "warn" | undefined;
+    fontSize?: "sm" | "md" | "lg" | undefined;
+}> & {
+    css: typeof css;
+};
+//# sourceMappingURL=index.d.ts.map

package/build/cjs/__fixtures__/RecipeButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/__fixtures__/RecipeButton/index.ts"],"names":[],"mappings":";AACA,OAAO,KAAK,GAAG,MAAM,oBAAoB,CAAC;AAE1C,eAAO,MAAM,YAAY;;;;;CAAgD,CAAC"}