@metamask-previews/design-system-react 0.0.0-preview.909f2e9

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+[Unreleased]: https://github.com/MetaMask/metamask-design-system/

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2024 MetaMask
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE

package/README.md

@@ -0,0 +1,15 @@
+# `@metamask/design-system-react`
+
+Design system react ui components
+
+## Installation
+
+`yarn add @metamask/design-system-react`
+
+or
+
+`npm install @metamask/design-system-react`
+
+## Contributing
+
+This package is part of a monorepo. Instructions for contributing can be found in the [monorepo README](https://github.com/MetaMask/metamask-design-system#readme).

package/dist/Button.cjs

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const react_1 = __importDefault(require("react"));
+const Button = ({ children, ...props }) => (react_1.default.createElement("button", { className: "px-4 h-8 rounded-full bg-primary-default text-primary-inverse", ...props }, children));
+exports.Button = Button;
+//# sourceMappingURL=Button.cjs.map

package/dist/Button.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.cjs","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAQnB,MAAM,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAe,EAAE,EAAE,CAAC,CAC7D,0CACE,SAAS,EAAC,+DAA+D,KACrE,KAAK,IAER,QAAQ,CACF,CACV,CAAC;AAPW,QAAA,MAAM,UAOjB","sourcesContent":["import React from 'react';\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Button contents */\n  children: React.ReactNode;\n}\n\nexport const Button = ({ children, ...props }: ButtonProps) => (\n  <button\n    className=\"px-4 h-8 rounded-full bg-primary-default text-primary-inverse\"\n    {...props}\n  >\n    {children}\n  </button>\n);\n"]}

package/dist/Button.d.cts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Button contents */
+    children: React.ReactNode;
+}
+export declare const Button: ({ children, ...props }: ButtonProps) => React.JSX.Element;
+//# sourceMappingURL=Button.d.cts.map

package/dist/Button.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.cts","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc;AAE1B,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,sBAAsB;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,MAAM,2BAA4B,WAAW,sBAOzD,CAAC"}

package/dist/Button.d.mts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Button contents */
+    children: React.ReactNode;
+}
+export declare const Button: ({ children, ...props }: ButtonProps) => React.JSX.Element;
+//# sourceMappingURL=Button.d.mts.map

package/dist/Button.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.mts","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc;AAE1B,MAAM,WAAW,WACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACrD,sBAAsB;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,MAAM,2BAA4B,WAAW,sBAOzD,CAAC"}

package/dist/Button.mjs

@@ -0,0 +1,10 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import $React from "react";
+const React = $importDefault($React);
+export const Button = ({ children, ...props }) => (React.createElement("button", { className: "px-4 h-8 rounded-full bg-primary-default text-primary-inverse", ...props }, children));
+//# sourceMappingURL=Button.mjs.map

package/dist/Button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.mjs","sourceRoot":"","sources":["../src/Button.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,MAAK,cAAc;;AAQ1B,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAe,EAAE,EAAE,CAAC,CAC7D,gCACE,SAAS,EAAC,+DAA+D,KACrE,KAAK,IAER,QAAQ,CACF,CACV,CAAC","sourcesContent":["import React from 'react';\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Button contents */\n  children: React.ReactNode;\n}\n\nexport const Button = ({ children, ...props }: ButtonProps) => (\n  <button\n    className=\"px-4 h-8 rounded-full bg-primary-default text-primary-inverse\"\n    {...props}\n  >\n    {children}\n  </button>\n);\n"]}

package/dist/Button.test.cjs

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const Button_1 = require("./Button.cjs");
+describe('Button Component', () => {
+    it('renders children correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(Button_1.Button, null, "Click Me"));
+        expect(react_2.screen.getByText('Click Me')).toBeInTheDocument();
+    });
+    it('applies the correct classes', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(Button_1.Button, null, "Styled Button"));
+        expect(container.firstChild).toHaveClass('px-4 h-8 rounded-full bg-primary-default text-primary-inverse');
+    });
+    it('handles click events', () => {
+        const handleClick = jest.fn();
+        (0, react_2.render)(react_1.default.createElement(Button_1.Button, { onClick: handleClick }, "Click"));
+        react_2.fireEvent.click(react_2.screen.getByText('Click'));
+        expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+    it('passes additional props to the button element', () => {
+        (0, react_2.render)(react_1.default.createElement(Button_1.Button, { "aria-label": "custom-button" }, "Accessible Button"));
+        expect(react_2.screen.getByLabelText('custom-button')).toBeInTheDocument();
+    });
+});
+//# sourceMappingURL=Button.test.cjs.map

package/dist/Button.test.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.test.cjs","sourceRoot":"","sources":["../src/Button.test.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,kDAAmE;AACnE,yCAAkC;AAElC,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,4BAA4B,EAAE,GAAG,EAAE;QACpC,IAAA,cAAM,EAAC,8BAAC,eAAM,mBAAkB,CAAC,CAAC;QAClC,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC3D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE,GAAG,EAAE;QACrC,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAAC,8BAAC,eAAM,wBAAuB,CAAC,CAAC;QAC7D,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,WAAW,CACtC,+DAA+D,CAChE,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sBAAsB,EAAE,GAAG,EAAE;QAC9B,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QAC9B,IAAA,cAAM,EAAC,8BAAC,eAAM,IAAC,OAAO,EAAE,WAAW,YAAgB,CAAC,CAAC;QACrD,iBAAS,CAAC,KAAK,CAAC,cAAM,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;QAC3C,MAAM,CAAC,WAAW,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;IAC/C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+CAA+C,EAAE,GAAG,EAAE;QACvD,IAAA,cAAM,EAAC,8BAAC,eAAM,kBAAY,eAAe,wBAA2B,CAAC,CAAC;QACtE,MAAM,CAAC,cAAM,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACrE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { render, screen, fireEvent } from '@testing-library/react';\nimport { Button } from './Button';\n\ndescribe('Button Component', () => {\n  it('renders children correctly', () => {\n    render(<Button>Click Me</Button>);\n    expect(screen.getByText('Click Me')).toBeInTheDocument();\n  });\n\n  it('applies the correct classes', () => {\n    const { container } = render(<Button>Styled Button</Button>);\n    expect(container.firstChild).toHaveClass(\n      'px-4 h-8 rounded-full bg-primary-default text-primary-inverse',\n    );\n  });\n\n  it('handles click events', () => {\n    const handleClick = jest.fn();\n    render(<Button onClick={handleClick}>Click</Button>);\n    fireEvent.click(screen.getByText('Click'));\n    expect(handleClick).toHaveBeenCalledTimes(1);\n  });\n\n  it('passes additional props to the button element', () => {\n    render(<Button aria-label=\"custom-button\">Accessible Button</Button>);\n    expect(screen.getByLabelText('custom-button')).toBeInTheDocument();\n  });\n});\n"]}

package/dist/Button.test.d.cts

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

package/dist/Button.test.d.cts.map

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

package/dist/Button.test.d.mts

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

package/dist/Button.test.d.mts.map

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

package/dist/Button.test.mjs

@@ -0,0 +1,32 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import $React from "react";
+const React = $importDefault($React);
+import $testinglibraryreact from "@testing-library/react";
+const { render, screen, fireEvent } = $testinglibraryreact;
+import { Button } from "./Button.mjs";
+describe('Button Component', () => {
+    it('renders children correctly', () => {
+        render(React.createElement(Button, null, "Click Me"));
+        expect(screen.getByText('Click Me')).toBeInTheDocument();
+    });
+    it('applies the correct classes', () => {
+        const { container } = render(React.createElement(Button, null, "Styled Button"));
+        expect(container.firstChild).toHaveClass('px-4 h-8 rounded-full bg-primary-default text-primary-inverse');
+    });
+    it('handles click events', () => {
+        const handleClick = jest.fn();
+        render(React.createElement(Button, { onClick: handleClick }, "Click"));
+        fireEvent.click(screen.getByText('Click'));
+        expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+    it('passes additional props to the button element', () => {
+        render(React.createElement(Button, { "aria-label": "custom-button" }, "Accessible Button"));
+        expect(screen.getByLabelText('custom-button')).toBeInTheDocument();
+    });
+});
+//# sourceMappingURL=Button.test.mjs.map

package/dist/Button.test.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.test.mjs","sourceRoot":"","sources":["../src/Button.test.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,MAAK,cAAc;;;;AAE1B,OAAO,EAAE,MAAM,EAAE,qBAAiB;AAElC,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,4BAA4B,EAAE,GAAG,EAAE;QACpC,MAAM,CAAC,oBAAC,MAAM,mBAAkB,CAAC,CAAC;QAClC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC3D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE,GAAG,EAAE;QACrC,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,oBAAC,MAAM,wBAAuB,CAAC,CAAC;QAC7D,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,WAAW,CACtC,+DAA+D,CAChE,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sBAAsB,EAAE,GAAG,EAAE;QAC9B,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QAC9B,MAAM,CAAC,oBAAC,MAAM,IAAC,OAAO,EAAE,WAAW,YAAgB,CAAC,CAAC;QACrD,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;QAC3C,MAAM,CAAC,WAAW,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;IAC/C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+CAA+C,EAAE,GAAG,EAAE;QACvD,MAAM,CAAC,oBAAC,MAAM,kBAAY,eAAe,wBAA2B,CAAC,CAAC;QACtE,MAAM,CAAC,MAAM,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACrE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { render, screen, fireEvent } from '@testing-library/react';\nimport { Button } from './Button';\n\ndescribe('Button Component', () => {\n  it('renders children correctly', () => {\n    render(<Button>Click Me</Button>);\n    expect(screen.getByText('Click Me')).toBeInTheDocument();\n  });\n\n  it('applies the correct classes', () => {\n    const { container } = render(<Button>Styled Button</Button>);\n    expect(container.firstChild).toHaveClass(\n      'px-4 h-8 rounded-full bg-primary-default text-primary-inverse',\n    );\n  });\n\n  it('handles click events', () => {\n    const handleClick = jest.fn();\n    render(<Button onClick={handleClick}>Click</Button>);\n    fireEvent.click(screen.getByText('Click'));\n    expect(handleClick).toHaveBeenCalledTimes(1);\n  });\n\n  it('passes additional props to the button element', () => {\n    render(<Button aria-label=\"custom-button\">Accessible Button</Button>);\n    expect(screen.getByLabelText('custom-button')).toBeInTheDocument();\n  });\n});\n"]}

package/dist/Text.cjs

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Text = exports.TextVariant = void 0;
+const react_1 = __importDefault(require("react"));
+var TextVariant;
+(function (TextVariant) {
+    // Display Sizes
+    TextVariant["DisplayMd"] = "display-md";
+    // Heading Sizes
+    TextVariant["HeadingLg"] = "heading-lg";
+    TextVariant["HeadingMd"] = "heading-md";
+    TextVariant["HeadingSm"] = "heading-sm";
+    // Font Sizes
+    TextVariant["BodyLg"] = "body-lg";
+    TextVariant["BodyMd"] = "body-md";
+    TextVariant["BodySm"] = "body-sm";
+    TextVariant["BodyXs"] = "body-xs";
+})(TextVariant || (exports.TextVariant = TextVariant = {}));
+// Create a mapping from TextVariant to Tailwind class names
+const typographyClassMap = {
+    [TextVariant.DisplayMd]: 'text-s-display-md font-s-display-md leading-s-display-md tracking-s-display-md lg:text-l-display-md lg:font-l-display-md lg:leading-l-display-md lg:tracking-l-display-md',
+    [TextVariant.HeadingLg]: 'text-s-heading-lg font-s-heading-lg leading-s-heading-lg tracking-s-heading-lg lg:text-l-heading-lg lg:font-l-heading-lg lg:leading-l-heading-lg lg:tracking-l-heading-lg',
+    [TextVariant.HeadingMd]: 'text-s-heading-md font-s-heading-md leading-s-heading-md tracking-s-heading-md lg:text-l-heading-md lg:font-l-heading-md lg:leading-l-heading-md lg:tracking-l-heading-md',
+    [TextVariant.HeadingSm]: 'text-s-heading-sm font-s-heading-sm leading-s-heading-sm tracking-s-heading-sm lg:text-l-heading-sm lg:font-l-heading-sm lg:leading-l-heading-sm lg:tracking-l-heading-sm',
+    [TextVariant.BodyLg]: 'text-s-body-lg-medium font-s-body-lg-medium leading-s-body-lg-medium tracking-s-body-lg-medium lg:text-l-body-lg-medium lg:font-l-body-lg-medium lg:leading-l-body-lg-medium lg:tracking-l-body-lg-medium',
+    [TextVariant.BodyMd]: 'text-s-body-md font-s-body-md leading-s-body-md tracking-s-body-md lg:text-l-body-md lg:font-l-body-md lg:leading-l-body-md lg:tracking-l-body-md',
+    [TextVariant.BodySm]: 'text-s-body-sm font-s-body-sm leading-s-body-sm tracking-s-body-sm lg:text-l-body-sm lg:font-l-body-sm lg:leading-l-body-sm lg:tracking-l-body-sm',
+    [TextVariant.BodyXs]: 'text-s-body-xs font-s-body-xs leading-s-body-xs tracking-s-body-xs lg:text-l-body-xs lg:font-l-body-xs lg:leading-l-body-xs lg:tracking-l-body-xs',
+};
+// Update the Text component to use the TextVariant enum
+const Text = ({ variant, children, className }) => {
+    // Map the TextVariant to corresponding class names from typography.ts
+    const variantClass = typographyClassMap[variant];
+    return react_1.default.createElement("p", { className: `${variantClass} ${className}` }, children);
+};
+exports.Text = Text;
+//# sourceMappingURL=Text.cjs.map

package/dist/Text.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.cjs","sourceRoot":"","sources":["../src/Text.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,IAAY,WAcX;AAdD,WAAY,WAAW;IACrB,gBAAgB;IAChB,uCAAwB,CAAA;IAExB,gBAAgB;IAChB,uCAAwB,CAAA;IACxB,uCAAwB,CAAA;IACxB,uCAAwB,CAAA;IAExB,aAAa;IACb,iCAAkB,CAAA;IAClB,iCAAkB,CAAA;IAClB,iCAAkB,CAAA;IAClB,iCAAkB,CAAA;AACpB,CAAC,EAdW,WAAW,2BAAX,WAAW,QActB;AAQD,4DAA4D;AAC5D,MAAM,kBAAkB,GAAgC;IACtD,CAAC,WAAW,CAAC,SAAS,CAAC,EACrB,2KAA2K;IAC7K,CAAC,WAAW,CAAC,SAAS,CAAC,EACrB,2KAA2K;IAC7K,CAAC,WAAW,CAAC,SAAS,CAAC,EACrB,2KAA2K;IAC7K,CAAC,WAAW,CAAC,SAAS,CAAC,EACrB,2KAA2K;IAC7K,CAAC,WAAW,CAAC,MAAM,CAAC,EAClB,2MAA2M;IAC7M,CAAC,WAAW,CAAC,MAAM,CAAC,EAClB,mJAAmJ;IACrJ,CAAC,WAAW,CAAC,MAAM,CAAC,EAClB,mJAAmJ;IACrJ,CAAC,WAAW,CAAC,MAAM,CAAC,EAClB,mJAAmJ;CACtJ,CAAC;AAEF,wDAAwD;AACjD,MAAM,IAAI,GAAwB,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE;IAC5E,sEAAsE;IACtE,MAAM,YAAY,GAAG,kBAAkB,CAAC,OAAO,CAAC,CAAC;IAEjD,OAAO,qCAAG,SAAS,EAAE,GAAG,YAAY,IAAI,SAAS,EAAE,IAAG,QAAQ,CAAK,CAAC;AACtE,CAAC,CAAC;AALW,QAAA,IAAI,QAKf","sourcesContent":["import React from 'react';\n\nexport enum TextVariant {\n  // Display Sizes\n  DisplayMd = 'display-md',\n\n  // Heading Sizes\n  HeadingLg = 'heading-lg',\n  HeadingMd = 'heading-md',\n  HeadingSm = 'heading-sm',\n\n  // Font Sizes\n  BodyLg = 'body-lg',\n  BodyMd = 'body-md',\n  BodySm = 'body-sm',\n  BodyXs = 'body-xs',\n}\n\ninterface TextProps {\n  variant: TextVariant;\n  children: React.ReactNode;\n  className?: string;\n}\n\n// Create a mapping from TextVariant to Tailwind class names\nconst typographyClassMap: Record<TextVariant, string> = {\n  [TextVariant.DisplayMd]:\n    'text-s-display-md font-s-display-md leading-s-display-md tracking-s-display-md lg:text-l-display-md lg:font-l-display-md lg:leading-l-display-md lg:tracking-l-display-md',\n  [TextVariant.HeadingLg]:\n    'text-s-heading-lg font-s-heading-lg leading-s-heading-lg tracking-s-heading-lg lg:text-l-heading-lg lg:font-l-heading-lg lg:leading-l-heading-lg lg:tracking-l-heading-lg',\n  [TextVariant.HeadingMd]:\n    'text-s-heading-md font-s-heading-md leading-s-heading-md tracking-s-heading-md lg:text-l-heading-md lg:font-l-heading-md lg:leading-l-heading-md lg:tracking-l-heading-md',\n  [TextVariant.HeadingSm]:\n    'text-s-heading-sm font-s-heading-sm leading-s-heading-sm tracking-s-heading-sm lg:text-l-heading-sm lg:font-l-heading-sm lg:leading-l-heading-sm lg:tracking-l-heading-sm',\n  [TextVariant.BodyLg]:\n    'text-s-body-lg-medium font-s-body-lg-medium leading-s-body-lg-medium tracking-s-body-lg-medium lg:text-l-body-lg-medium lg:font-l-body-lg-medium lg:leading-l-body-lg-medium lg:tracking-l-body-lg-medium',\n  [TextVariant.BodyMd]:\n    'text-s-body-md font-s-body-md leading-s-body-md tracking-s-body-md lg:text-l-body-md lg:font-l-body-md lg:leading-l-body-md lg:tracking-l-body-md',\n  [TextVariant.BodySm]:\n    'text-s-body-sm font-s-body-sm leading-s-body-sm tracking-s-body-sm lg:text-l-body-sm lg:font-l-body-sm lg:leading-l-body-sm lg:tracking-l-body-sm',\n  [TextVariant.BodyXs]:\n    'text-s-body-xs font-s-body-xs leading-s-body-xs tracking-s-body-xs lg:text-l-body-xs lg:font-l-body-xs lg:leading-l-body-xs lg:tracking-l-body-xs',\n};\n\n// Update the Text component to use the TextVariant enum\nexport const Text: React.FC<TextProps> = ({ variant, children, className }) => {\n  // Map the TextVariant to corresponding class names from typography.ts\n  const variantClass = typographyClassMap[variant];\n\n  return <p className={`${variantClass} ${className}`}>{children}</p>;\n};\n"]}

package/dist/Text.d.cts

@@ -0,0 +1,19 @@
+import React from "react";
+export declare enum TextVariant {
+    DisplayMd = "display-md",
+    HeadingLg = "heading-lg",
+    HeadingMd = "heading-md",
+    HeadingSm = "heading-sm",
+    BodyLg = "body-lg",
+    BodyMd = "body-md",
+    BodySm = "body-sm",
+    BodyXs = "body-xs"
+}
+interface TextProps {
+    variant: TextVariant;
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const Text: React.FC<TextProps>;
+export {};
+//# sourceMappingURL=Text.d.cts.map

package/dist/Text.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.d.cts","sourceRoot":"","sources":["../src/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc;AAE1B,oBAAY,WAAW;IAErB,SAAS,eAAe;IAGxB,SAAS,eAAe;IACxB,SAAS,eAAe;IACxB,SAAS,eAAe;IAGxB,MAAM,YAAY;IAClB,MAAM,YAAY;IAClB,MAAM,YAAY;IAClB,MAAM,YAAY;CACnB;AAED,UAAU,SAAS;IACjB,OAAO,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAuBD,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAKpC,CAAC"}

package/dist/Text.d.mts

@@ -0,0 +1,19 @@
+import React from "react";
+export declare enum TextVariant {
+    DisplayMd = "display-md",
+    HeadingLg = "heading-lg",
+    HeadingMd = "heading-md",
+    HeadingSm = "heading-sm",
+    BodyLg = "body-lg",
+    BodyMd = "body-md",
+    BodySm = "body-sm",
+    BodyXs = "body-xs"
+}
+interface TextProps {
+    variant: TextVariant;
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const Text: React.FC<TextProps>;
+export {};
+//# sourceMappingURL=Text.d.mts.map

package/dist/Text.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.d.mts","sourceRoot":"","sources":["../src/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc;AAE1B,oBAAY,WAAW;IAErB,SAAS,eAAe;IAGxB,SAAS,eAAe;IACxB,SAAS,eAAe;IACxB,SAAS,eAAe;IAGxB,MAAM,YAAY;IAClB,MAAM,YAAY;IAClB,MAAM,YAAY;IAClB,MAAM,YAAY;CACnB;AAED,UAAU,SAAS;IACjB,OAAO,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAuBD,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAKpC,CAAC"}

package/dist/Text.mjs

@@ -0,0 +1,40 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import $React from "react";
+const React = $importDefault($React);
+export var TextVariant;
+(function (TextVariant) {
+    // Display Sizes
+    TextVariant["DisplayMd"] = "display-md";
+    // Heading Sizes
+    TextVariant["HeadingLg"] = "heading-lg";
+    TextVariant["HeadingMd"] = "heading-md";
+    TextVariant["HeadingSm"] = "heading-sm";
+    // Font Sizes
+    TextVariant["BodyLg"] = "body-lg";
+    TextVariant["BodyMd"] = "body-md";
+    TextVariant["BodySm"] = "body-sm";
+    TextVariant["BodyXs"] = "body-xs";
+})(TextVariant || (TextVariant = {}));
+// Create a mapping from TextVariant to Tailwind class names
+const typographyClassMap = {
+    [TextVariant.DisplayMd]: 'text-s-display-md font-s-display-md leading-s-display-md tracking-s-display-md lg:text-l-display-md lg:font-l-display-md lg:leading-l-display-md lg:tracking-l-display-md',
+    [TextVariant.HeadingLg]: 'text-s-heading-lg font-s-heading-lg leading-s-heading-lg tracking-s-heading-lg lg:text-l-heading-lg lg:font-l-heading-lg lg:leading-l-heading-lg lg:tracking-l-heading-lg',
+    [TextVariant.HeadingMd]: 'text-s-heading-md font-s-heading-md leading-s-heading-md tracking-s-heading-md lg:text-l-heading-md lg:font-l-heading-md lg:leading-l-heading-md lg:tracking-l-heading-md',
+    [TextVariant.HeadingSm]: 'text-s-heading-sm font-s-heading-sm leading-s-heading-sm tracking-s-heading-sm lg:text-l-heading-sm lg:font-l-heading-sm lg:leading-l-heading-sm lg:tracking-l-heading-sm',
+    [TextVariant.BodyLg]: 'text-s-body-lg-medium font-s-body-lg-medium leading-s-body-lg-medium tracking-s-body-lg-medium lg:text-l-body-lg-medium lg:font-l-body-lg-medium lg:leading-l-body-lg-medium lg:tracking-l-body-lg-medium',
+    [TextVariant.BodyMd]: 'text-s-body-md font-s-body-md leading-s-body-md tracking-s-body-md lg:text-l-body-md lg:font-l-body-md lg:leading-l-body-md lg:tracking-l-body-md',
+    [TextVariant.BodySm]: 'text-s-body-sm font-s-body-sm leading-s-body-sm tracking-s-body-sm lg:text-l-body-sm lg:font-l-body-sm lg:leading-l-body-sm lg:tracking-l-body-sm',
+    [TextVariant.BodyXs]: 'text-s-body-xs font-s-body-xs leading-s-body-xs tracking-s-body-xs lg:text-l-body-xs lg:font-l-body-xs lg:leading-l-body-xs lg:tracking-l-body-xs',
+};
+// Update the Text component to use the TextVariant enum
+export const Text = ({ variant, children, className }) => {
+    // Map the TextVariant to corresponding class names from typography.ts
+    const variantClass = typographyClassMap[variant];
+    return React.createElement("p", { className: `${variantClass} ${className}` }, children);
+};
+//# sourceMappingURL=Text.mjs.map

package/dist/Text.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.mjs","sourceRoot":"","sources":["../src/Text.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,MAAK,cAAc;;AAE1B,MAAM,CAAN,IAAY,WAcX;AAdD,WAAY,WAAW;IACrB,gBAAgB;IAChB,uCAAwB,CAAA;IAExB,gBAAgB;IAChB,uCAAwB,CAAA;IACxB,uCAAwB,CAAA;IACxB,uCAAwB,CAAA;IAExB,aAAa;IACb,iCAAkB,CAAA;IAClB,iCAAkB,CAAA;IAClB,iCAAkB,CAAA;IAClB,iCAAkB,CAAA;AACpB,CAAC,EAdW,WAAW,KAAX,WAAW,QActB;AAQD,4DAA4D;AAC5D,MAAM,kBAAkB,GAAgC;IACtD,CAAC,WAAW,CAAC,SAAS,CAAC,EACrB,2KAA2K;IAC7K,CAAC,WAAW,CAAC,SAAS,CAAC,EACrB,2KAA2K;IAC7K,CAAC,WAAW,CAAC,SAAS,CAAC,EACrB,2KAA2K;IAC7K,CAAC,WAAW,CAAC,SAAS,CAAC,EACrB,2KAA2K;IAC7K,CAAC,WAAW,CAAC,MAAM,CAAC,EAClB,2MAA2M;IAC7M,CAAC,WAAW,CAAC,MAAM,CAAC,EAClB,mJAAmJ;IACrJ,CAAC,WAAW,CAAC,MAAM,CAAC,EAClB,mJAAmJ;IACrJ,CAAC,WAAW,CAAC,MAAM,CAAC,EAClB,mJAAmJ;CACtJ,CAAC;AAEF,wDAAwD;AACxD,MAAM,CAAC,MAAM,IAAI,GAAwB,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE;IAC5E,sEAAsE;IACtE,MAAM,YAAY,GAAG,kBAAkB,CAAC,OAAO,CAAC,CAAC;IAEjD,OAAO,2BAAG,SAAS,EAAE,GAAG,YAAY,IAAI,SAAS,EAAE,IAAG,QAAQ,CAAK,CAAC;AACtE,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nexport enum TextVariant {\n  // Display Sizes\n  DisplayMd = 'display-md',\n\n  // Heading Sizes\n  HeadingLg = 'heading-lg',\n  HeadingMd = 'heading-md',\n  HeadingSm = 'heading-sm',\n\n  // Font Sizes\n  BodyLg = 'body-lg',\n  BodyMd = 'body-md',\n  BodySm = 'body-sm',\n  BodyXs = 'body-xs',\n}\n\ninterface TextProps {\n  variant: TextVariant;\n  children: React.ReactNode;\n  className?: string;\n}\n\n// Create a mapping from TextVariant to Tailwind class names\nconst typographyClassMap: Record<TextVariant, string> = {\n  [TextVariant.DisplayMd]:\n    'text-s-display-md font-s-display-md leading-s-display-md tracking-s-display-md lg:text-l-display-md lg:font-l-display-md lg:leading-l-display-md lg:tracking-l-display-md',\n  [TextVariant.HeadingLg]:\n    'text-s-heading-lg font-s-heading-lg leading-s-heading-lg tracking-s-heading-lg lg:text-l-heading-lg lg:font-l-heading-lg lg:leading-l-heading-lg lg:tracking-l-heading-lg',\n  [TextVariant.HeadingMd]:\n    'text-s-heading-md font-s-heading-md leading-s-heading-md tracking-s-heading-md lg:text-l-heading-md lg:font-l-heading-md lg:leading-l-heading-md lg:tracking-l-heading-md',\n  [TextVariant.HeadingSm]:\n    'text-s-heading-sm font-s-heading-sm leading-s-heading-sm tracking-s-heading-sm lg:text-l-heading-sm lg:font-l-heading-sm lg:leading-l-heading-sm lg:tracking-l-heading-sm',\n  [TextVariant.BodyLg]:\n    'text-s-body-lg-medium font-s-body-lg-medium leading-s-body-lg-medium tracking-s-body-lg-medium lg:text-l-body-lg-medium lg:font-l-body-lg-medium lg:leading-l-body-lg-medium lg:tracking-l-body-lg-medium',\n  [TextVariant.BodyMd]:\n    'text-s-body-md font-s-body-md leading-s-body-md tracking-s-body-md lg:text-l-body-md lg:font-l-body-md lg:leading-l-body-md lg:tracking-l-body-md',\n  [TextVariant.BodySm]:\n    'text-s-body-sm font-s-body-sm leading-s-body-sm tracking-s-body-sm lg:text-l-body-sm lg:font-l-body-sm lg:leading-l-body-sm lg:tracking-l-body-sm',\n  [TextVariant.BodyXs]:\n    'text-s-body-xs font-s-body-xs leading-s-body-xs tracking-s-body-xs lg:text-l-body-xs lg:font-l-body-xs lg:leading-l-body-xs lg:tracking-l-body-xs',\n};\n\n// Update the Text component to use the TextVariant enum\nexport const Text: React.FC<TextProps> = ({ variant, children, className }) => {\n  // Map the TextVariant to corresponding class names from typography.ts\n  const variantClass = typographyClassMap[variant];\n\n  return <p className={`${variantClass} ${className}`}>{children}</p>;\n};\n"]}

package/dist/Text.test.cjs

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const Text_1 = require("./Text.cjs");
+describe('Text Component', () => {
+    it('renders children correctly', () => {
+        (0, react_2.render)(react_1.default.createElement(Text_1.Text, { variant: Text_1.TextVariant.BodyMd }, "Hello, World!"));
+        expect(react_2.screen.getByText('Hello, World!')).toBeInTheDocument();
+    });
+    it('applies the correct variant classes', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(Text_1.Text, { variant: Text_1.TextVariant.HeadingLg }, "Heading"));
+        expect(container.firstChild).toHaveClass('text-s-heading-lg font-s-heading-lg leading-s-heading-lg tracking-s-heading-lg lg:text-l-heading-lg lg:font-l-heading-lg lg:leading-l-heading-lg lg:tracking-l-heading-lg');
+    });
+    it('merges additional class names', () => {
+        const { container } = (0, react_2.render)(react_1.default.createElement(Text_1.Text, { variant: Text_1.TextVariant.BodySm, className: "custom-class" }, "Custom Class"));
+        expect(container.firstChild).toHaveClass('text-s-body-sm font-s-body-sm leading-s-body-sm tracking-s-body-sm lg:text-l-body-sm lg:font-l-body-sm lg:leading-l-body-sm lg:tracking-l-body-sm custom-class');
+    });
+});
+//# sourceMappingURL=Text.test.cjs.map

package/dist/Text.test.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.test.cjs","sourceRoot":"","sources":["../src/Text.test.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,kDAAwD;AACxD,qCAA2C;AAE3C,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,EAAE,CAAC,4BAA4B,EAAE,GAAG,EAAE;QACpC,IAAA,cAAM,EAAC,8BAAC,WAAI,IAAC,OAAO,EAAE,kBAAW,CAAC,MAAM,oBAAsB,CAAC,CAAC;QAChE,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAChE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qCAAqC,EAAE,GAAG,EAAE;QAC7C,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAC1B,8BAAC,WAAI,IAAC,OAAO,EAAE,kBAAW,CAAC,SAAS,cAAgB,CACrD,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,WAAW,CACtC,2KAA2K,CAC5K,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+BAA+B,EAAE,GAAG,EAAE;QACvC,MAAM,EAAE,SAAS,EAAE,GAAG,IAAA,cAAM,EAC1B,8BAAC,WAAI,IAAC,OAAO,EAAE,kBAAW,CAAC,MAAM,EAAE,SAAS,EAAC,cAAc,mBAEpD,CACR,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,WAAW,CACtC,gKAAgK,CACjK,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { render, screen } from '@testing-library/react';\nimport { Text, TextVariant } from './Text';\n\ndescribe('Text Component', () => {\n  it('renders children correctly', () => {\n    render(<Text variant={TextVariant.BodyMd}>Hello, World!</Text>);\n    expect(screen.getByText('Hello, World!')).toBeInTheDocument();\n  });\n\n  it('applies the correct variant classes', () => {\n    const { container } = render(\n      <Text variant={TextVariant.HeadingLg}>Heading</Text>,\n    );\n    expect(container.firstChild).toHaveClass(\n      'text-s-heading-lg font-s-heading-lg leading-s-heading-lg tracking-s-heading-lg lg:text-l-heading-lg lg:font-l-heading-lg lg:leading-l-heading-lg lg:tracking-l-heading-lg',\n    );\n  });\n\n  it('merges additional class names', () => {\n    const { container } = render(\n      <Text variant={TextVariant.BodySm} className=\"custom-class\">\n        Custom Class\n      </Text>,\n    );\n    expect(container.firstChild).toHaveClass(\n      'text-s-body-sm font-s-body-sm leading-s-body-sm tracking-s-body-sm lg:text-l-body-sm lg:font-l-body-sm lg:leading-l-body-sm lg:tracking-l-body-sm custom-class',\n    );\n  });\n});\n"]}

package/dist/Text.test.d.cts

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

package/dist/Text.test.d.cts.map

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

package/dist/Text.test.d.mts

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

package/dist/Text.test.d.mts.map

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

package/dist/Text.test.mjs

@@ -0,0 +1,26 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import $React from "react";
+const React = $importDefault($React);
+import $testinglibraryreact from "@testing-library/react";
+const { render, screen } = $testinglibraryreact;
+import { Text, TextVariant } from "./Text.mjs";
+describe('Text Component', () => {
+    it('renders children correctly', () => {
+        render(React.createElement(Text, { variant: TextVariant.BodyMd }, "Hello, World!"));
+        expect(screen.getByText('Hello, World!')).toBeInTheDocument();
+    });
+    it('applies the correct variant classes', () => {
+        const { container } = render(React.createElement(Text, { variant: TextVariant.HeadingLg }, "Heading"));
+        expect(container.firstChild).toHaveClass('text-s-heading-lg font-s-heading-lg leading-s-heading-lg tracking-s-heading-lg lg:text-l-heading-lg lg:font-l-heading-lg lg:leading-l-heading-lg lg:tracking-l-heading-lg');
+    });
+    it('merges additional class names', () => {
+        const { container } = render(React.createElement(Text, { variant: TextVariant.BodySm, className: "custom-class" }, "Custom Class"));
+        expect(container.firstChild).toHaveClass('text-s-body-sm font-s-body-sm leading-s-body-sm tracking-s-body-sm lg:text-l-body-sm lg:font-l-body-sm lg:leading-l-body-sm lg:tracking-l-body-sm custom-class');
+    });
+});
+//# sourceMappingURL=Text.test.mjs.map

package/dist/Text.test.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.test.mjs","sourceRoot":"","sources":["../src/Text.test.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,MAAK,cAAc;;;;AAE1B,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,mBAAe;AAE3C,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,EAAE,CAAC,4BAA4B,EAAE,GAAG,EAAE;QACpC,MAAM,CAAC,oBAAC,IAAI,IAAC,OAAO,EAAE,WAAW,CAAC,MAAM,oBAAsB,CAAC,CAAC;QAChE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAChE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qCAAqC,EAAE,GAAG,EAAE;QAC7C,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,oBAAC,IAAI,IAAC,OAAO,EAAE,WAAW,CAAC,SAAS,cAAgB,CACrD,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,WAAW,CACtC,2KAA2K,CAC5K,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+BAA+B,EAAE,GAAG,EAAE;QACvC,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,oBAAC,IAAI,IAAC,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,SAAS,EAAC,cAAc,mBAEpD,CACR,CAAC;QACF,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,WAAW,CACtC,gKAAgK,CACjK,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { render, screen } from '@testing-library/react';\nimport { Text, TextVariant } from './Text';\n\ndescribe('Text Component', () => {\n  it('renders children correctly', () => {\n    render(<Text variant={TextVariant.BodyMd}>Hello, World!</Text>);\n    expect(screen.getByText('Hello, World!')).toBeInTheDocument();\n  });\n\n  it('applies the correct variant classes', () => {\n    const { container } = render(\n      <Text variant={TextVariant.HeadingLg}>Heading</Text>,\n    );\n    expect(container.firstChild).toHaveClass(\n      'text-s-heading-lg font-s-heading-lg leading-s-heading-lg tracking-s-heading-lg lg:text-l-heading-lg lg:font-l-heading-lg lg:leading-l-heading-lg lg:tracking-l-heading-lg',\n    );\n  });\n\n  it('merges additional class names', () => {\n    const { container } = render(\n      <Text variant={TextVariant.BodySm} className=\"custom-class\">\n        Custom Class\n      </Text>,\n    );\n    expect(container.firstChild).toHaveClass(\n      'text-s-body-sm font-s-body-sm leading-s-body-sm tracking-s-body-sm lg:text-l-body-sm lg:font-l-body-sm lg:leading-l-body-sm lg:tracking-l-body-sm custom-class',\n    );\n  });\n});\n"]}

package/dist/index.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Text = exports.Button = void 0;
+var Button_1 = require("./Button.cjs");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
+var Text_1 = require("./Text.cjs");
+Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return Text_1.Text; } });
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,uCAAkC;AAAzB,gGAAA,MAAM,OAAA;AACf,mCAA8B;AAArB,4FAAA,IAAI,OAAA","sourcesContent":["export { Button } from './Button';\nexport { Text } from './Text';\n"]}

package/dist/index.d.cts

@@ -0,0 +1,3 @@
+export { Button } from "./Button.cjs";
+export { Text } from "./Text.cjs";
+//# sourceMappingURL=index.d.cts.map

package/dist/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,qBAAiB;AAClC,OAAO,EAAE,IAAI,EAAE,mBAAe"}

package/dist/index.d.mts

@@ -0,0 +1,3 @@
+export { Button } from "./Button.mjs";
+export { Text } from "./Text.mjs";
+//# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,qBAAiB;AAClC,OAAO,EAAE,IAAI,EAAE,mBAAe"}

package/dist/index.mjs

@@ -0,0 +1,3 @@
+export { Button } from "./Button.mjs";
+export { Text } from "./Text.mjs";
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,qBAAiB;AAClC,OAAO,EAAE,IAAI,EAAE,mBAAe","sourcesContent":["export { Button } from './Button';\nexport { Text } from './Text';\n"]}

package/package.json

@@ -0,0 +1,79 @@
+{
+  "name": "@metamask-previews/design-system-react",
+  "version": "0.0.0-preview.909f2e9",
+  "description": "Design system react ui components",
+  "keywords": [
+    "MetaMask",
+    "Ethereum"
+  ],
+  "homepage": "https://github.com/MetaMask/metamask-design-system/tree/main/packages/design-system-react#readme",
+  "bugs": {
+    "url": "https://github.com/MetaMask/metamask-design-system/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/MetaMask/metamask-design-system.git"
+  },
+  "license": "MIT",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.cjs",
+  "types": "./dist/index.d.cts",
+  "files": [
+    "dist/"
+  ],
+  "scripts": {
+    "build": "ts-bridge --project tsconfig.build.json --verbose --clean --no-references",
+    "build:docs": "typedoc",
+    "changelog:update": "../../scripts/update-changelog.sh @metamask/design-system-react",
+    "changelog:validate": "../../scripts/validate-changelog.sh @metamask/design-system-react",
+    "publish:preview": "yarn npm publish --tag preview",
+    "since-latest-release": "../../scripts/since-latest-release.sh",
+    "test": "NODE_OPTIONS=--experimental-vm-modules jest --reporters=jest-silent-reporter",
+    "test:clean": "NODE_OPTIONS=--experimental-vm-modules jest --clearCache",
+    "test:verbose": "NODE_OPTIONS=--experimental-vm-modules jest --verbose",
+    "test:watch": "NODE_OPTIONS=--experimental-vm-modules jest --watch"
+  },
+  "devDependencies": {
+    "@metamask-previews/design-system-tailwind-preset": "0.0.0-preview.909f2e9",
+    "@metamask/auto-changelog": "^3.4.4",
+    "@storybook/react": "^8.3.5",
+    "@storybook/test": "^8.3.5",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.0.1",
+    "@types/jest": "^27.4.1",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "deepmerge": "^4.2.2",
+    "jest": "^27.5.1",
+    "ts-jest": "^27.1.4",
+    "typedoc": "^0.24.8",
+    "typedoc-plugin-missing-exports": "^2.0.0",
+    "typescript": "~5.2.2"
+  },
+  "peerDependencies": {
+    "@metamask/design-tokens": "^4.0.0",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "tailwindcss": "^3.0.0"
+  },
+  "engines": {
+    "node": "^18.18 || >=20"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}