@voiceflow/style 1.7.0 → 1.9.0

package/CHANGELOG.md

@@ -1,105 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.7.0](https://github.com/voiceflow/design/compare/@voiceflow/style@1.6.1...@voiceflow/style@1.7.0) (2024-02-06)
-
-### Features
-
-* add testID to all components (DX-1006) ([#377](https://github.com/voiceflow/design/issues/377)) ([676a7ab](https://github.com/voiceflow/design/commit/676a7ab65de1055c351772302165bbfbe81840c2))
-
-## [1.6.1](https://github.com/voiceflow/design/compare/@voiceflow/style@1.6.0...@voiceflow/style@1.6.1) (2024-01-19)
-
-**Note:** Version bump only for package @voiceflow/style
-
-# [1.6.0](https://github.com/voiceflow/design/compare/@voiceflow/style@1.5.3...@voiceflow/style@1.6.0) (2023-09-18)
-
-### Features
-
-* adds classes identifiers (CV3-352) ([#215](https://github.com/voiceflow/design/issues/215)) ([b87182c](https://github.com/voiceflow/design/commit/b87182c68dbb1823eefe09523957ae74bca65a0f))
-
-## [1.5.3](https://github.com/voiceflow/design/compare/@voiceflow/style@1.5.2...@voiceflow/style@1.5.3) (2023-09-12)
-
-**Note:** Version bump only for package @voiceflow/style
-
-## [1.5.2](https://github.com/voiceflow/design/compare/@voiceflow/style@1.5.1...@voiceflow/style@1.5.2) (2023-09-07)
-
-**Note:** Version bump only for package @voiceflow/style
-
-## [1.5.1](https://github.com/voiceflow/design/compare/@voiceflow/style@1.5.0...@voiceflow/style@1.5.1) (2023-08-28)
-
-**Note:** Version bump only for package @voiceflow/style
-
-# [1.5.0](https://github.com/voiceflow/design/compare/@voiceflow/style@1.4.1...@voiceflow/style@1.5.0) (2023-08-10)
-
-### Features
-
-* update some libs ([#169](https://github.com/voiceflow/design/issues/169)) ([fb3ef72](https://github.com/voiceflow/design/commit/fb3ef72974a9e2db7645e8d385d3e5d08c4753ab))
-
-## [1.4.1](https://github.com/voiceflow/design/compare/@voiceflow/style@1.4.0...@voiceflow/style@1.4.1) (2023-07-18)
-
-**Note:** Version bump only for package @voiceflow/style
-
-# [1.4.0](https://github.com/voiceflow/design/compare/@voiceflow/style@1.3.0...@voiceflow/style@1.4.0) (2023-07-07)
-
-### Features
-
-* improve components to support SlateEditor (DX-000) ([#105](https://github.com/voiceflow/design/issues/105)) ([51c41e5](https://github.com/voiceflow/design/commit/51c41e53dc20c05244186638f8b22b2b2b768e75))
-
-# [1.3.0](https://github.com/voiceflow/design/compare/@voiceflow/style@1.2.5...@voiceflow/style@1.3.0) (2023-07-07)
-
-### Features
-
-* improve menu component (DX-000) ([#110](https://github.com/voiceflow/design/issues/110)) ([fc772b5](https://github.com/voiceflow/design/commit/fc772b53d9b1c6184cff239354b7e085117c065b))
-
-## [1.2.5](https://github.com/voiceflow/design/compare/@voiceflow/style@1.2.4...@voiceflow/style@1.2.5) (2023-07-05)
-
-### Bug Fixes
-
-* types ([a5e92b0](https://github.com/voiceflow/design/commit/a5e92b0b370331e69d18ebd495e181283b411b3e))
-
-## [1.2.4](https://github.com/voiceflow/design/compare/@voiceflow/style@1.2.3...@voiceflow/style@1.2.4) (2023-06-12)
-
-**Note:** Version bump only for package @voiceflow/style
-
-## [1.2.3](https://github.com/voiceflow/design/compare/@voiceflow/style@1.2.2...@voiceflow/style@1.2.3) (2023-06-06)
-
-**Note:** Version bump only for package @voiceflow/style
-
-## [1.2.2](https://github.com/voiceflow/design/compare/@voiceflow/style@1.2.1...@voiceflow/style@1.2.2) (2023-05-23)
-
-**Note:** Version bump only for package @voiceflow/style
-
-## [1.2.1](https://github.com/voiceflow/design/compare/@voiceflow/style@1.2.0...@voiceflow/style@1.2.1) (2023-05-18)
-
-**Note:** Version bump only for package @voiceflow/style
-
-# [1.2.0](https://github.com/voiceflow/design/compare/@voiceflow/style@1.1.1...@voiceflow/style@1.2.0) (2023-05-09)
-
-### Features
-
-* Button Component (DX-385) ([#19](https://github.com/voiceflow/design/issues/19)) ([1793b66](https://github.com/voiceflow/design/commit/1793b666a6dd80e5a86d820eb8fa14b3e8135b7e))
-
-## [1.1.1](https://github.com/voiceflow/design/compare/@voiceflow/style@1.1.0...@voiceflow/style@1.1.1) (2023-05-08)
-
-### Bug Fixes
-
-* add basic README docs ([c7041be](https://github.com/voiceflow/design/commit/c7041bea8ecc73c7381985b2d9a85ab6fb706a5c))
-
-# 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/styled/factory.test.d.ts

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

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

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

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

@@ -1,140 +0,0 @@
-"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/esm/styled/factory.test.d.ts

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

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

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

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

@@ -1,138 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { render, screen } from '@testing-library/react';
-import { describe, it } from 'vitest';
-import { Button, InlineThemedButton, InlineVarButton, RecipeButton, ReuseCSS, ReuseStyled, Theme, ThemedButton, VariantButton, } from '../__fixtures__/index.js';
-import { ThemeProvider } from '../ThemeContext.js';
-const BASE_STYLE = {
-    padding: '20px',
-    borderRadius: '10px',
-    margin: '10px',
-};
-describe('styled factory', () => {
-    describe('static styling', () => {
-        it('should inherit styles from static CSS', () => {
-            render(_jsx(Button, {}));
-            const el = screen.getByRole('button');
-            expect(el).toHaveClass(Button.css.base);
-            expect(el).toHaveStyle(BASE_STYLE);
-        });
-    });
-    describe('reusable CSS', () => {
-        it('should extend static CSS with overrides', () => {
-            render(_jsx(ReuseCSS, {}));
-            const el = screen.getByRole('button');
-            expect(el).toHaveClass(Button.css.base, ReuseCSS.css.base);
-            expect(el).toHaveStyle({
-                padding: '20px',
-                margin: '10px',
-                backgroundColor: 'red',
-                borderRadius: '0',
-            });
-        });
-    });
-    describe('reusable styled components', () => {
-        it('should extend styled component with overrides', () => {
-            render(_jsx(ReuseStyled, {}));
-            const el = screen.getByRole('button');
-            expect(el).toHaveClass(Button.css.base, ReuseStyled.css.override);
-            expect(el).toHaveStyle({
-                padding: '20px',
-                border: '1px solid red',
-                margin: '2px',
-            });
-        });
-    });
-    describe('style variants', () => {
-        it('should render the primary style variant', () => {
-            render(_jsx(VariantButton, { variant: "primary" }));
-            const el = screen.getByRole('button');
-            expect(el).toHaveClass(Button.css.base, VariantButton.css.variants.primary);
-            expect(el).toHaveStyle({
-                ...BASE_STYLE,
-                borderWidth: '2px',
-                borderColor: 'pink',
-            });
-        });
-        it('should render the secondary style variant', () => {
-            render(_jsx(VariantButton, { variant: "secondary" }));
-            const el = screen.getByRole('button');
-            expect(el).toHaveClass(Button.css.base, VariantButton.css.variants.secondary);
-            expect(el).toHaveStyle({
-                ...BASE_STYLE,
-                borderWidth: '2px',
-                borderColor: 'blue',
-            });
-        });
-    });
-    describe('style recipes', () => {
-        it('should render a recipe with default variants', () => {
-            render(_jsx(RecipeButton, {}));
-            const el = screen.getByRole('button');
-            expect(el).toHaveClass(Button.css.base);
-            expect(el).toHaveStyle({
-                ...BASE_STYLE,
-                border: '1px dashed black',
-                fontSize: '18px',
-            });
-        });
-        it('should render a recipe with selected variants', () => {
-            render(_jsx(RecipeButton, { fontSize: "sm", color: "warn" }));
-            const el = screen.getByRole('button');
-            expect(el).toHaveClass(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
-    describe.skip('themed components', () => {
-        it('should render styles from the provided theme', () => {
-            render(_jsx(ThemeProvider, { theme: Theme.light, children: _jsx(ThemedButton, {}) }));
-            const el = screen.getByRole('button');
-            expect(el).toHaveClass(Button.css.base, ThemedButton.css.themed);
-            expect(el).toHaveStyle({
-                ...BASE_STYLE,
-                color: 'red',
-                borderRadius: '0',
-            });
-        });
-        it('should override styles with contextual themes', () => {
-            render(_jsx(ThemeProvider, { theme: Theme.light, children: _jsx(ThemeProvider, { theme: Theme.dark, children: _jsx(ThemedButton, {}) }) }));
-            const el = screen.getByRole('button');
-            expect(el).toHaveClass(Button.css.base, ThemedButton.css.themed);
-            expect(el).toHaveStyle({
-                ...BASE_STYLE,
-                color: 'blue',
-                borderRadius: '0',
-            });
-        });
-    });
-    describe.skip('inline CSS variables', () => {
-        it('should render style from dynamic values', () => {
-            render(_jsx(InlineVarButton, { brandColor: "green" }));
-            const el = screen.getByRole('button');
-            expect(el).toHaveClass(Button.css.base, InlineVarButton.css.base);
-            expect(el).toHaveStyle({
-                ...BASE_STYLE,
-                color: 'green',
-                borderRadius: '0',
-            });
-        });
-    });
-    describe.skip('inline theme', () => {
-        it('should render style from inline theme', () => {
-            render(_jsx(InlineThemedButton, { brandColor: "green" }));
-            const el = screen.getByRole('button');
-            expect(el).toHaveClass(Button.css.base, InlineThemedButton.css.themed);
-            expect(el).toHaveStyle({
-                ...BASE_STYLE,
-                color: 'green',
-                borderRadius: '0',
-            });
-        });
-    });
-});

package/config/test/setup.js

@@ -1,9 +0,0 @@
-import matchers from '@testing-library/jest-dom/matchers';
-import { cleanup } from '@testing-library/react';
-import { afterEach, expect } from 'vitest';
-
-expect.extend(matchers);
-
-afterEach(() => {
-  cleanup();
-});

package/sonar-project.properties

@@ -1,10 +0,0 @@
-sonar.projectName=design-style
-sonar.sources=src/
-sonar.tests=src/
-sonar.exclusions=src/**/*.test.ts,src/**/test-utils/
-sonar.test.inclusions=src/**/*.test.ts,src/**/test-utils/
-sonar.cpd.exclusions=src/**/*.test.ts,src/**/test-utils/
-sonar.coverage.exclusions=**/**
-sonar.eslint.reportPaths=sonar/report.json
-sonar.typescript.tsconfigPath=./tsconfig.json
-#sonar.javascript.lcov.reportPaths=nyc_coverage_unit/lcov.info

package/src/ThemeContext.tsx

@@ -1,14 +0,0 @@
-import { createContext, useContext } from 'react';
-
-export const ThemeContext = createContext<string | null>(null);
-export const { Consumer: ThemeConsumer } = ThemeContext;
-
-export interface ThemeProviderProps extends React.PropsWithChildren {
-  theme: string;
-}
-
-export const ThemeProvider: React.FC<ThemeProviderProps> = ({ theme, children }) => (
-  <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
-);
-
-export const useTheme = () => useContext(ThemeContext);

package/src/__fixtures__/Button/Button.component.tsx

@@ -1,7 +0,0 @@
-import * as S from './Button.styled';
-
-export interface ButtonProps extends React.PropsWithChildren {
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
-}
-
-export const Button: React.FC<ButtonProps> = ({ onClick, children }) => <S.Base onClick={onClick}>{children}</S.Base>;

package/src/__fixtures__/Button/Button.css.ts

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

package/src/__fixtures__/Button/Button.styled.ts

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

package/src/__fixtures__/Button/index.ts

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

package/src/__fixtures__/InlineThemedButton/InlineThemedButton.component.tsx

@@ -1,13 +0,0 @@
-import type { ButtonProps } from '../Button';
-import * as Theme from '../theme.css';
-import * as S from './InlineThemedButton.styled';
-
-export interface InlineThemedButtonProps extends ButtonProps {
-  brandColor: string;
-}
-
-export const InlineThemedButton: React.FC<InlineThemedButtonProps> = ({ brandColor, onClick, children }) => (
-  <S.Base onClick={onClick} theme={{ color: { brand: brandColor }, spacing: Theme.spacing }}>
-    {children}
-  </S.Base>
-);

package/src/__fixtures__/InlineThemedButton/InlineThemedButton.css.ts

@@ -1,8 +0,0 @@
-import { style } from '@/main';
-
-import * as Theme from '../theme.css';
-
-export const themed = style({
-  color: Theme.vars.color.brand,
-  borderRadius: 0,
-});

package/src/__fixtures__/InlineThemedButton/InlineThemedButton.styled.ts

@@ -1,7 +0,0 @@
-import { styled } from '@/main';
-
-import { Button } from '../Button';
-import * as Theme from '../theme.css';
-import { themed } from './InlineThemedButton.css';
-
-export const Base = styled.button([Button.Base, themed], { theme: Theme.vars });

package/src/__fixtures__/InlineThemedButton/index.ts

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

package/src/__fixtures__/InlineVarButton/InlineVarButton.component.tsx

@@ -1,12 +0,0 @@
-import type { ButtonProps } from '../Button';
-import * as S from './InlineVarButton.styled';
-
-export interface InlineVarButtonProps extends ButtonProps {
-  brandColor: string;
-}
-
-export const InlineVarButton: React.FC<InlineVarButtonProps> = ({ brandColor, onClick, children }) => (
-  <S.Base onClick={onClick} vars={{ brandColor }}>
-    {children}
-  </S.Base>
-);

package/src/__fixtures__/InlineVarButton/InlineVarButton.css.ts

@@ -1,12 +0,0 @@
-import { createVar, style } from '@/main';
-
-export const colorVar = createVar();
-
-export const base = style({
-  vars: {
-    [colorVar]: 'red',
-  },
-
-  backgroundColor: colorVar,
-  borderRadius: 0,
-});

package/src/__fixtures__/InlineVarButton/InlineVarButton.styled.ts

@@ -1,10 +0,0 @@
-import { styled } from '@/main';
-
-import { Button } from '../Button';
-import { base, colorVar } from './InlineVarButton.css';
-
-export const Base = styled.button([Button.Base, base], {
-  vars: {
-    brandColor: colorVar,
-  },
-});

package/src/__fixtures__/InlineVarButton/index.ts

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

package/src/__fixtures__/RecipeButton/RecipeButton.component.tsx

@@ -1,13 +0,0 @@
-import type { VariantProps } from '@/main';
-
-import type { ButtonProps } from '../Button';
-import type { complex } from './RecipeButton.css';
-import * as S from './RecipeButton.styled';
-
-export interface RecipeButtonProps extends ButtonProps, VariantProps<typeof complex> {}
-
-export const RecipeButton: React.FC<RecipeButtonProps> = ({ color, fontSize, onClick, children }) => (
-  <S.Base variants={{ color, fontSize }} onClick={onClick}>
-    {children}
-  </S.Base>
-);

package/src/__fixtures__/RecipeButton/RecipeButton.css.ts

@@ -1,22 +0,0 @@
-import { recipe } from '@/main';
-
-export const complex = 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/src/__fixtures__/RecipeButton/RecipeButton.styled.ts

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

package/src/__fixtures__/RecipeButton/index.ts

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

package/src/__fixtures__/ReuseCSS/ReuseCSS.component.tsx

@@ -1,8 +0,0 @@
-import type { ButtonProps } from '../Button';
-import { base } from './ReuseCSS.css';
-
-export const ReuseCSS: React.FC<ButtonProps> = ({ onClick, children }) => (
-  <button className={base} onClick={onClick}>
-    {children}
-  </button>
-);

package/src/__fixtures__/ReuseCSS/ReuseCSS.css.ts

@@ -1,11 +0,0 @@
-import { style } from '@/main';
-
-import { Button } from '../Button';
-
-export const base = style([
-  Button.css.base,
-  {
-    backgroundColor: 'red',
-    borderRadius: 0,
-  },
-]);

package/src/__fixtures__/ReuseCSS/index.ts

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

package/src/__fixtures__/ReuseStyled/ReuseStyled.component.tsx

@@ -1,6 +0,0 @@
-import type { ButtonProps } from '../Button';
-import * as S from './ReuseStyled.styled';
-
-export const ReuseStyled: React.FC<ButtonProps> = ({ onClick, children }) => (
-  <S.Base onClick={onClick}>{children}</S.Base>
-);

package/src/__fixtures__/ReuseStyled/ReuseStyled.css.ts

@@ -1,6 +0,0 @@
-import { style } from '@/main';
-
-export const override = style({
-  border: '1px solid red',
-  margin: 2,
-});