@metamask-previews/design-system-react 0.0.0-preview.6fee845 → 0.0.0-preview.8561168

package/dist/utils/tw-merge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tw-merge.mjs","sourceRoot":"","sources":["../../src/utils/tw-merge.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,uBAAuB;AAErD,MAAM,kBAAkB,GAAG;IACzB,cAAc;IACd,cAAc;IACd,cAAc;IACd,cAAc;IACd,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,cAAc;IACd,cAAc;IACd,cAAc;IACd,cAAc;IACd,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;CACZ,CAAC;AAEF;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,mBAAmB,CAAC;IACzC,MAAM,EAAE;QACN,WAAW,EAAE;YACX,YAAY,EAAE,CAAC,cAAc,EAAE,kBAAkB,EAAE,YAAY,CAAC;YAChE,WAAW,EAAE;gBACX;oBACE,IAAI,EAAE,kBAAkB;iBACzB;aACF;YACD,aAAa,EAAE;gBACb,iCAAiC;gBACjC,WAAW;gBACX,iBAAiB;gBACjB,YAAY;gBACZ,aAAa;gBACb,aAAa;gBACb,eAAe;gBACf,WAAW;gBACX,gBAAgB;gBAChB,YAAY;gBACZ,4BAA4B;gBAC5B;oBACE,IAAI,EAAE,kBAAkB;iBACzB;aACF;SACF;QACD,sBAAsB,EAAE;YACtB,YAAY,EAAE,CAAC,YAAY,CAAC;YAC5B,WAAW,EAAE,CAAC,WAAW,CAAC;YAC1B,aAAa,EAAE,CAAC,aAAa,CAAC;SAC/B;KACF;CACF,CAAC,CAAC","sourcesContent":["import { extendTailwindMerge } from 'tailwind-merge';\n\nconst variantClassGroups = [\n  's-display-md',\n  's-heading-lg',\n  's-heading-md',\n  's-heading-sm',\n  's-body-lg',\n  's-body-md',\n  's-body-sm',\n  's-body-xs',\n  'l-display-md',\n  'l-heading-lg',\n  'l-heading-md',\n  'l-heading-sm',\n  'l-body-lg',\n  'l-body-md',\n  'l-body-sm',\n  'l-body-xs',\n];\n\n/**\n * Custom Tailwind Merge configuration to handle our design system's typography classes.\n * This extends the default Tailwind Merge behavior to properly handle conflicts between:\n * 1. Custom text color classes (text-default, text-alternative, text-muted)\n * 2. Typography variant classes for font sizes (e.g., s-body-md, l-heading-lg)\n * 3. Standard and custom font weight classes\n *\n * Without this configuration, Tailwind Merge wouldn't know these classes are meant\n * to override each other, potentially leading to multiple conflicting classes\n * being applied simultaneously.\n */\nexport const twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'text-color': ['text-default', 'text-alternative', 'text-muted'],\n      'font-size': [\n        {\n          text: variantClassGroups,\n        },\n      ],\n      'font-weight': [\n        // Standard Tailwind font weights\n        'font-thin',\n        'font-extralight',\n        'font-light',\n        'font-normal',\n        'font-medium',\n        'font-semibold',\n        'font-bold',\n        'font-extrabold',\n        'font-black',\n        // Custom typography classes\n        {\n          font: variantClassGroups,\n        },\n      ],\n    },\n    conflictingClassGroups: {\n      'text-color': ['text-color'],\n      'font-size': ['font-size'],\n      'font-weight': ['font-weight'],\n    },\n  },\n});\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metamask-previews/design-system-react",
-  "version": "0.0.0-preview.6fee845",
+  "version": "0.0.0-preview.8561168",
   "description": "Design system react ui components",
   "keywords": [
     "MetaMask",
@@ -35,10 +35,13 @@
     "dist/"
   ],
   "scripts": {
-    "build": "ts-bridge --project tsconfig.build.json --verbose --clean --no-references",
-    "build:docs": "typedoc",
+    "build": "yarn generate:icons && ts-bridge --project tsconfig.build.json --verbose --clean --no-references",
     "changelog:update": "../../scripts/update-changelog.sh @metamask/design-system-react",
     "changelog:validate": "../../scripts/validate-changelog.sh @metamask/design-system-react",
+    "clean:icons": "rimraf src/components/icon/icons",
+    "create-component": "ts-node scripts/create-component",
+    "generate:icons": "yarn clean:icons && svgr --config-file src/components/icon/.svgrrc.js -d src/components/icon/icons src/components/icon/assets/*.svg && yarn generate:icons:index",
+    "generate:icons:index": "ts-node scripts/generate-icons-index.ts",
     "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",
@@ -46,27 +49,36 @@
     "test:verbose": "NODE_OPTIONS=--experimental-vm-modules jest --verbose",
     "test:watch": "NODE_OPTIONS=--experimental-vm-modules jest --watch"
   },
+  "dependencies": {
+    "@radix-ui/react-slot": "^1.1.0",
+    "tailwind-merge": "^2.0.0"
+  },
   "devDependencies": {
-    "@metamask-previews/design-system-tailwind-preset": "0.0.0-preview.6fee845",
-    "@metamask/auto-changelog": "^3.4.4",
-    "@storybook/react": "^8.3.5",
-    "@storybook/test": "^8.3.5",
+    "@jest/globals": "^29.7.0",
+    "@metamask-previews/design-system-tailwind-preset": "0.0.0-preview.8561168",
+    "@metamask/auto-changelog": "^4.1.0",
+    "@storybook/react": "^8.5.3",
+    "@storybook/test": "^8.5.3",
+    "@svgr/cli": "^8.1.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
+    "@ts-bridge/cli": "^0.5.1",
     "@types/jest": "^27.4.1",
+    "@types/node": "^16.18.54",
     "@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",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "rimraf": "^5.0.5",
+    "ts-jest": "^29.2.5",
+    "ts-node": "^10.9.1",
     "typescript": "~5.2.2"
   },
   "peerDependencies": {
-    "@metamask/design-tokens": "^4.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "@metamask/design-tokens": "^5.0.0",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
     "tailwindcss": "^3.0.0"
   },
   "engines": {

package/dist/Button.cjs

@@ -1,9 +0,0 @@
-"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;

package/dist/Button.d.cts

@@ -1,7 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,7 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,9 +0,0 @@
-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));

package/dist/Button.stories.cjs

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
-const test_1 = require("@storybook/test");
-const Button_1 = require("./Button.cjs");
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-    title: 'Components/Button',
-    component: Button_1.Button,
-    tags: ['autodocs'],
-    args: { onClick: (0, test_1.fn)() },
-};
-exports.default = meta;
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-exports.Default = {
-    args: {
-        children: 'Button',
-    },
-};

package/dist/Button.stories.d.cts

@@ -1,7 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Button } from "./Button.cjs";
-declare const meta: Meta<typeof Button>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
-//# sourceMappingURL=Button.stories.d.cts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Button.stories.d.cts","sourceRoot":"","sources":["../src/Button.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,yBAAyB;AAGvD,OAAO,EAAE,MAAM,EAAE,qBAAiB;AAGlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAK7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC"}

package/dist/Button.stories.d.mts

@@ -1,7 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Button } from "./Button.mjs";
-declare const meta: Meta<typeof Button>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
-//# sourceMappingURL=Button.stories.d.mts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Button.stories.d.mts","sourceRoot":"","sources":["../src/Button.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,yBAAyB;AAGvD,OAAO,EAAE,MAAM,EAAE,qBAAiB;AAGlC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAK7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAC"}

package/dist/Button.stories.mjs

@@ -1,16 +0,0 @@
-import { fn } from "@storybook/test";
-import { Button } from "./Button.mjs";
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-    title: 'Components/Button',
-    component: Button,
-    tags: ['autodocs'],
-    args: { onClick: fn() },
-};
-export default meta;
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Default = {
-    args: {
-        children: 'Button',
-    },
-};

package/dist/Button.test.cjs

@@ -1,28 +0,0 @@
-"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();
-    });
-});

package/dist/Button.test.d.cts

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

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

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

package/dist/Button.test.d.mts

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

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

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

package/dist/Button.test.mjs

@@ -1,31 +0,0 @@
-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();
-    });
-});

package/dist/Text.cjs

@@ -1,39 +0,0 @@
-"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;

package/dist/Text.d.cts

@@ -1,19 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,19 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,39 +0,0 @@
-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);
-};

package/dist/Text.stories.cjs

@@ -1,29 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Default = void 0;
-const react_1 = __importDefault(require("react"));
-const Text_1 = require("./Text.cjs");
-const meta = {
-    title: 'Components/Text',
-    component: Text_1.Text,
-    tags: ['autodocs'],
-};
-exports.default = meta;
-const variants = [
-    { name: 'DisplayMd', variant: Text_1.TextVariant.DisplayMd },
-    { name: 'HeadingLg', variant: Text_1.TextVariant.HeadingLg },
-    { name: 'HeadingMd', variant: Text_1.TextVariant.HeadingMd },
-    { name: 'HeadingSm', variant: Text_1.TextVariant.HeadingSm },
-    { name: 'BodyLg', variant: Text_1.TextVariant.BodyLg },
-    { name: 'BodyMd', variant: Text_1.TextVariant.BodyMd },
-    { name: 'BodySm', variant: Text_1.TextVariant.BodySm },
-    { name: 'BodyXs', variant: Text_1.TextVariant.BodyXs },
-];
-// Update the AllTypography story to use the CSF3.0 Story format
-exports.Default = {
-    render: () => (react_1.default.createElement("div", { className: "space-y-4 p-4" }, variants.map(({ name, variant }) => (react_1.default.createElement("div", { key: variant },
-        react_1.default.createElement(Text_1.Text, { className: "text-default", variant: variant }, name)))))),
-};

package/dist/Text.stories.d.cts

@@ -1,7 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Text } from "./Text.cjs";
-declare const meta: Meta<typeof Text>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
-//# sourceMappingURL=Text.stories.d.cts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Text.stories.d.cts","sourceRoot":"","sources":["../src/Text.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,yBAAyB;AACvD,OAAO,EAAE,IAAI,EAAe,mBAAe;AAE3C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAI3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAcnC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC"}

package/dist/Text.stories.d.mts

@@ -1,7 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Text } from "./Text.mjs";
-declare const meta: Meta<typeof Text>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
-//# sourceMappingURL=Text.stories.d.mts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Text.stories.d.mts","sourceRoot":"","sources":["../src/Text.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,yBAAyB;AACvD,OAAO,EAAE,IAAI,EAAe,mBAAe;AAE3C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,IAAI,CAI3B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAcnC,eAAO,MAAM,OAAO,EAAE,KAYrB,CAAC"}

package/dist/Text.stories.mjs

@@ -1,30 +0,0 @@
-function $importDefault(module) {
-    if (module?.__esModule) {
-        return module.default;
-    }
-    return module;
-}
-import $React from "react";
-const React = $importDefault($React);
-import { Text, TextVariant } from "./Text.mjs";
-const meta = {
-    title: 'Components/Text',
-    component: Text,
-    tags: ['autodocs'],
-};
-export default meta;
-const variants = [
-    { name: 'DisplayMd', variant: TextVariant.DisplayMd },
-    { name: 'HeadingLg', variant: TextVariant.HeadingLg },
-    { name: 'HeadingMd', variant: TextVariant.HeadingMd },
-    { name: 'HeadingSm', variant: TextVariant.HeadingSm },
-    { name: 'BodyLg', variant: TextVariant.BodyLg },
-    { name: 'BodyMd', variant: TextVariant.BodyMd },
-    { name: 'BodySm', variant: TextVariant.BodySm },
-    { name: 'BodyXs', variant: TextVariant.BodyXs },
-];
-// Update the AllTypography story to use the CSF3.0 Story format
-export const Default = {
-    render: () => (React.createElement("div", { className: "space-y-4 p-4" }, variants.map(({ name, variant }) => (React.createElement("div", { key: variant },
-        React.createElement(Text, { className: "text-default", variant: variant }, name)))))),
-};

package/dist/Text.test.cjs

@@ -1,22 +0,0 @@
-"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');
-    });
-});

package/dist/Text.test.d.cts

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

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

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

package/dist/Text.test.d.mts

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

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

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

package/dist/Text.test.mjs

@@ -1,25 +0,0 @@
-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');
-    });
-});

package/dist/index.test.cjs

@@ -1,11 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const _1 = require("./index.cjs");
-describe('Design System React Index', () => {
-    it('should export Button component', () => {
-        expect(_1.Button).toBeDefined();
-    });
-    it('should export Text component', () => {
-        expect(_1.Text).toBeDefined();
-    });
-});

package/dist/index.test.d.cts

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

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

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

package/dist/index.test.d.mts

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

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

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

package/dist/index.test.mjs

@@ -1,9 +0,0 @@
-import { Button, Text } from "./index.mjs";
-describe('Design System React Index', () => {
-    it('should export Button component', () => {
-        expect(Button).toBeDefined();
-    });
-    it('should export Text component', () => {
-        expect(Text).toBeDefined();
-    });
-});