@metamask-previews/design-system-twrnc-preset 0.0.0-preview.04cb60f

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-twrnc-preset`
+
+Design System twrnc preset
+
+## Installation
+
+`yarn add @metamask/design-system-twrnc-preset`
+
+or
+
+`npm install @metamask/design-system-twrnc-preset`
+
+## 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/Theme/Theme.hooks.d.ts

@@ -0,0 +1,2 @@
+export declare const useTailwind: () => import("twrnc").TailwindFn;
+//# sourceMappingURL=Theme.hooks.d.ts.map

package/dist/Theme/Theme.hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Theme.hooks.d.ts","sourceRoot":"","sources":["../../src/Theme/Theme.hooks.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,WAAW,kCAGvB,CAAC"}

package/dist/Theme/Theme.hooks.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTailwind = void 0;
+const react_1 = require("react");
+const Theme_providers_1 = require("./Theme.providers");
+const useTailwind = () => {
+    const { tw } = (0, react_1.useContext)(Theme_providers_1.ThemeContext);
+    return tw;
+};
+exports.useTailwind = useTailwind;
+//# sourceMappingURL=Theme.hooks.js.map

package/dist/Theme/Theme.hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Theme.hooks.js","sourceRoot":"","sources":["../../src/Theme/Theme.hooks.ts"],"names":[],"mappings":";;;AAAA,iCAAmC;AAEnC,uDAAiD;AAE1C,MAAM,WAAW,GAAG,GAAG,EAAE;IAC9B,MAAM,EAAE,EAAE,EAAE,GAAG,IAAA,kBAAU,EAAC,8BAAY,CAAC,CAAC;IACxC,OAAO,EAAE,CAAC;AACZ,CAAC,CAAC;AAHW,QAAA,WAAW,eAGtB","sourcesContent":["import { useContext } from 'react';\n\nimport { ThemeContext } from './Theme.providers';\n\nexport const useTailwind = () => {\n  const { tw } = useContext(ThemeContext);\n  return tw;\n};\n"]}

package/dist/Theme/Theme.providers.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { ThemeContextProps, ThemeProviderProps } from './Theme.types';
+export declare const defaultThemeContextValue: ThemeContextProps;
+export declare const ThemeContext: React.Context<ThemeContextProps>;
+export declare const ThemeProvider: React.FC<ThemeProviderProps>;
+//# sourceMappingURL=Theme.providers.d.ts.map

package/dist/Theme/Theme.providers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Theme.providers.d.ts","sourceRoot":"","sources":["../../src/Theme/Theme.providers.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAKhE,OAAO,KAAK,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAI3E,eAAO,MAAM,wBAAwB,EAAE,iBAMtC,CAAC;AAEF,eAAO,MAAM,YAAY,kCAExB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA6CtD,CAAC"}

package/dist/Theme/Theme.providers.js

@@ -0,0 +1,75 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeProvider = exports.ThemeContext = exports.defaultThemeContextValue = void 0;
+/* eslint-disable @typescript-eslint/no-empty-function */
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const twrnc_1 = require("twrnc");
+const twrnc_settings_1 = require("../twrnc-settings");
+const Theme_types_1 = require("./Theme.types");
+const Theme_utilities_1 = require("./Theme.utilities");
+exports.defaultThemeContextValue = {
+    tw: (0, twrnc_1.create)((0, Theme_utilities_1.generateTailwindConfig)(twrnc_settings_1.ColorSet.Brand, twrnc_settings_1.ColorScheme.Light)),
+    colorSet: twrnc_settings_1.ColorSet.Brand,
+    theme: Theme_types_1.Theme.Light,
+    setColorSet: () => { },
+    setTheme: () => { },
+};
+exports.ThemeContext = (0, react_1.createContext)(exports.defaultThemeContextValue);
+const ThemeProvider = ({ children, colorSet = twrnc_settings_1.ColorSet.Brand, theme = Theme_types_1.Theme.Default, }) => {
+    const [currentColorSet, setCurrentColorSet] = (0, react_1.useState)(colorSet);
+    const [currentTheme, setCurrentTheme] = (0, react_1.useState)(theme);
+    const systemColorScheme = (0, react_native_1.useColorScheme)(); // 'light' | 'dark' | null
+    const activeColorScheme = (0, react_1.useMemo)(() => {
+        if (currentTheme === Theme_types_1.Theme.Default) {
+            return systemColorScheme === 'dark'
+                ? twrnc_settings_1.ColorScheme.Dark
+                : twrnc_settings_1.ColorScheme.Light;
+        }
+        if (currentTheme === Theme_types_1.Theme.Light) {
+            return twrnc_settings_1.ColorScheme.Light;
+        }
+        if (currentTheme === Theme_types_1.Theme.Dark) {
+            return twrnc_settings_1.ColorScheme.Dark;
+        }
+        throw new Error('Invalid theme value');
+    }, [currentTheme, systemColorScheme]);
+    const tw = (0, react_1.useMemo)(() => {
+        const tailwindConfig = (0, Theme_utilities_1.generateTailwindConfig)(currentColorSet, activeColorScheme);
+        return (0, twrnc_1.create)(tailwindConfig);
+    }, [currentColorSet, activeColorScheme]);
+    return (<exports.ThemeContext.Provider value={{
+            tw,
+            colorSet: currentColorSet,
+            theme: currentTheme,
+            setColorSet: setCurrentColorSet,
+            setTheme: setCurrentTheme,
+        }}>
+      {children}
+    </exports.ThemeContext.Provider>);
+};
+exports.ThemeProvider = ThemeProvider;
+//# sourceMappingURL=Theme.providers.js.map

package/dist/Theme/Theme.providers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Theme.providers.js","sourceRoot":"","sources":["../../src/Theme/Theme.providers.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yDAAyD;AACzD,+CAAgE;AAChE,+CAA8C;AAC9C,iCAA+B;AAE/B,sDAA0D;AAE1D,+CAAsC;AACtC,uDAA2D;AAE9C,QAAA,wBAAwB,GAAsB;IACzD,EAAE,EAAE,IAAA,cAAM,EAAC,IAAA,wCAAsB,EAAC,yBAAQ,CAAC,KAAK,EAAE,4BAAW,CAAC,KAAK,CAAC,CAAC;IACrE,QAAQ,EAAE,yBAAQ,CAAC,KAAK;IACxB,KAAK,EAAE,mBAAK,CAAC,KAAK;IAClB,WAAW,EAAE,GAAG,EAAE,GAAE,CAAC;IACrB,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;CACnB,CAAC;AAEW,QAAA,YAAY,GAAG,IAAA,qBAAa,EACvC,gCAAwB,CACzB,CAAC;AAEK,MAAM,aAAa,GAAiC,CAAC,EAC1D,QAAQ,EACR,QAAQ,GAAG,yBAAQ,CAAC,KAAK,EACzB,KAAK,GAAG,mBAAK,CAAC,OAAO,GACtB,EAAE,EAAE;IACH,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,IAAA,gBAAQ,EAAW,QAAQ,CAAC,CAAC;IAC3E,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAQ,KAAK,CAAC,CAAC;IAC/D,MAAM,iBAAiB,GAAG,IAAA,6BAAc,GAAE,CAAC,CAAC,0BAA0B;IAEtE,MAAM,iBAAiB,GAAgB,IAAA,eAAO,EAAC,GAAG,EAAE;QAClD,IAAI,YAAY,KAAK,mBAAK,CAAC,OAAO,EAAE;YAClC,OAAO,iBAAiB,KAAK,MAAM;gBACjC,CAAC,CAAC,4BAAW,CAAC,IAAI;gBAClB,CAAC,CAAC,4BAAW,CAAC,KAAK,CAAC;SACvB;QACD,IAAI,YAAY,KAAK,mBAAK,CAAC,KAAK,EAAE;YAChC,OAAO,4BAAW,CAAC,KAAK,CAAC;SAC1B;QACD,IAAI,YAAY,KAAK,mBAAK,CAAC,IAAI,EAAE;YAC/B,OAAO,4BAAW,CAAC,IAAI,CAAC;SACzB;QACD,MAAM,IAAI,KAAK,CAAC,qBAAqB,CAAC,CAAC;IACzC,CAAC,EAAE,CAAC,YAAY,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAEtC,MAAM,EAAE,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACtB,MAAM,cAAc,GAAG,IAAA,wCAAsB,EAC3C,eAAe,EACf,iBAAiB,CAClB,CAAC;QACF,OAAO,IAAA,cAAM,EAAC,cAAc,CAAC,CAAC;IAChC,CAAC,EAAE,CAAC,eAAe,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAEzC,OAAO,CACL,CAAC,oBAAY,CAAC,QAAQ,CACpB,KAAK,CAAC,CAAC;YACL,EAAE;YACF,QAAQ,EAAE,eAAe;YACzB,KAAK,EAAE,YAAY;YACnB,WAAW,EAAE,kBAAkB;YAC/B,QAAQ,EAAE,eAAe;SAC1B,CAAC,CAEF;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,oBAAY,CAAC,QAAQ,CAAC,CACzB,CAAC;AACJ,CAAC,CAAC;AA7CW,QAAA,aAAa,iBA6CxB","sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\nimport React, { createContext, useState, useMemo } from 'react';\nimport { useColorScheme } from 'react-native';\nimport { create } from 'twrnc';\n\nimport { ColorSet, ColorScheme } from '../twrnc-settings';\nimport type { ThemeContextProps, ThemeProviderProps } from './Theme.types';\nimport { Theme } from './Theme.types';\nimport { generateTailwindConfig } from './Theme.utilities';\n\nexport const defaultThemeContextValue: ThemeContextProps = {\n  tw: create(generateTailwindConfig(ColorSet.Brand, ColorScheme.Light)),\n  colorSet: ColorSet.Brand,\n  theme: Theme.Light,\n  setColorSet: () => {},\n  setTheme: () => {},\n};\n\nexport const ThemeContext = createContext<ThemeContextProps>(\n  defaultThemeContextValue,\n);\n\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({\n  children,\n  colorSet = ColorSet.Brand,\n  theme = Theme.Default,\n}) => {\n  const [currentColorSet, setCurrentColorSet] = useState<ColorSet>(colorSet);\n  const [currentTheme, setCurrentTheme] = useState<Theme>(theme);\n  const systemColorScheme = useColorScheme(); // 'light' | 'dark' | null\n\n  const activeColorScheme: ColorScheme = useMemo(() => {\n    if (currentTheme === Theme.Default) {\n      return systemColorScheme === 'dark'\n        ? ColorScheme.Dark\n        : ColorScheme.Light;\n    }\n    if (currentTheme === Theme.Light) {\n      return ColorScheme.Light;\n    }\n    if (currentTheme === Theme.Dark) {\n      return ColorScheme.Dark;\n    }\n    throw new Error('Invalid theme value');\n  }, [currentTheme, systemColorScheme]);\n\n  const tw = useMemo(() => {\n    const tailwindConfig = generateTailwindConfig(\n      currentColorSet,\n      activeColorScheme,\n    );\n    return create(tailwindConfig);\n  }, [currentColorSet, activeColorScheme]);\n\n  return (\n    <ThemeContext.Provider\n      value={{\n        tw,\n        colorSet: currentColorSet,\n        theme: currentTheme,\n        setColorSet: setCurrentColorSet,\n        setTheme: setCurrentTheme,\n      }}\n    >\n      {children}\n    </ThemeContext.Provider>\n  );\n};\n"]}

package/dist/Theme/Theme.types.d.ts

@@ -0,0 +1,20 @@
+import type { create } from 'twrnc';
+import type { ColorSet } from '../twrnc-settings';
+export declare enum Theme {
+    Default = "default",
+    Light = "light",
+    Dark = "dark"
+}
+export type ThemeContextProps = {
+    tw: ReturnType<typeof create>;
+    colorSet: ColorSet;
+    theme: Theme;
+    setColorSet: (theme: ColorSet) => void;
+    setTheme: (scheme: Theme) => void;
+};
+export type ThemeProviderProps = {
+    children: React.ReactNode;
+    colorSet?: ColorSet;
+    theme?: Theme;
+};
+//# sourceMappingURL=Theme.types.d.ts.map

package/dist/Theme/Theme.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Theme.types.d.ts","sourceRoot":"","sources":["../../src/Theme/Theme.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAGpC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAElD,oBAAY,KAAK;IACf,OAAO,YAAY;IACnB,KAAK,UAAoB;IACzB,IAAI,SAAmB;CACxB;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;IAC9B,QAAQ,EAAE,QAAQ,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC;IACb,WAAW,EAAE,CAAC,KAAK,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvC,QAAQ,EAAE,CAAC,MAAM,EAAE,KAAK,KAAK,IAAI,CAAC;CACnC,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,CAAC"}

package/dist/Theme/Theme.types.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Theme = void 0;
+var Theme;
+(function (Theme) {
+    Theme["Default"] = "default";
+    Theme["Light"] = "light";
+    Theme["Dark"] = "dark";
+})(Theme || (exports.Theme = Theme = {}));
+//# sourceMappingURL=Theme.types.js.map

package/dist/Theme/Theme.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Theme.types.js","sourceRoot":"","sources":["../../src/Theme/Theme.types.ts"],"names":[],"mappings":";;;AAKA,IAAY,KAIX;AAJD,WAAY,KAAK;IACf,4BAAmB,CAAA;IACnB,wBAAyB,CAAA;IACzB,sBAAuB,CAAA;AACzB,CAAC,EAJW,KAAK,qBAAL,KAAK,QAIhB","sourcesContent":["import type { create } from 'twrnc';\n\nimport { ColorScheme } from '../twrnc-settings';\nimport type { ColorSet } from '../twrnc-settings';\n\nexport enum Theme {\n  Default = 'default',\n  Light = ColorScheme.Light,\n  Dark = ColorScheme.Dark,\n}\n\nexport type ThemeContextProps = {\n  tw: ReturnType<typeof create>;\n  colorSet: ColorSet;\n  theme: Theme;\n  setColorSet: (theme: ColorSet) => void;\n  setTheme: (scheme: Theme) => void;\n};\n\nexport type ThemeProviderProps = {\n  children: React.ReactNode;\n  colorSet?: ColorSet;\n  theme?: Theme;\n};\n"]}

package/dist/Theme/Theme.utilities.d.ts

@@ -0,0 +1,49 @@
+import type { ColorSet, ColorScheme } from '../twrnc-settings';
+/**
+ * Generates a Tailwind CSS configuration object based on the specified color set and color scheme.
+ * This configuration extends the base Tailwind settings with custom theme colors, typography settings,
+ * and other style properties for use in React Native with `twrnc`.
+ *
+ * @param colorSet - The color set to use (e.g., 'Brand', 'Neutral'). Determines the base palette for the theme.
+ * @param colorScheme - The current color scheme ('light' or 'dark'). Specifies whether to use light or dark mode styles.
+ * @returns A Tailwind CSS configuration object with extended theme properties and plugins.
+ * @example
+ * const colorSet = 'Brand';
+ * const colorScheme = 'dark';
+ *
+ * const tailwindConfig = generateTailwindConfig(colorSet, colorScheme);
+ * console.log(tailwindConfig);
+ *
+ * // Output:
+ * // {
+ * //   theme: {
+ * //     extend: {
+ * //       colors: {
+ * //         primary: '#1a202c',
+ * //         secondary: '#2d3748',
+ * //         // ...additional flattened colors
+ * //       },
+ * //       fontSize: {
+ * //         'display-md': [32, { lineHeight: '40', letterSpacing: '0', fontWeight: '700' }],
+ * //         // ...other font sizes
+ * //       },
+ * //       fontFamily: {
+ * //         sans: ['Euclid Circular B', 'Helvetica Neue', 'Arial', 'sans-serif'],
+ * //         // ...other font families
+ * //       },
+ * //       letterSpacing: {
+ * //         'display-md': '0',
+ * //         // ...other letter spacings
+ * //       },
+ * //       lineHeight: {
+ * //         'display-md': '40',
+ * //         // ...other line heights
+ * //       },
+ * //     },
+ * //   },
+ * //   plugins: [],
+ * // }
+ * @throws Will log an error and return an empty object if theme colors are not found for the specified color set and color scheme.
+ */
+export declare const generateTailwindConfig: (colorSet: ColorSet, colorScheme: ColorScheme) => {};
+//# sourceMappingURL=Theme.utilities.d.ts.map

package/dist/Theme/Theme.utilities.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Theme.utilities.d.ts","sourceRoot":"","sources":["../../src/Theme/Theme.utilities.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAG/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,eAAO,MAAM,sBAAsB,aACvB,QAAQ,eACL,WAAW,OAmCzB,CAAC"}

package/dist/Theme/Theme.utilities.js

@@ -0,0 +1,90 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateTailwindConfig = void 0;
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const tailwind_config_1 = __importDefault(require("../../tailwind.config"));
+const twrnc_settings_1 = require("../twrnc-settings");
+/**
+ * Generates a Tailwind CSS configuration object based on the specified color set and color scheme.
+ * This configuration extends the base Tailwind settings with custom theme colors, typography settings,
+ * and other style properties for use in React Native with `twrnc`.
+ *
+ * @param colorSet - The color set to use (e.g., 'Brand', 'Neutral'). Determines the base palette for the theme.
+ * @param colorScheme - The current color scheme ('light' or 'dark'). Specifies whether to use light or dark mode styles.
+ * @returns A Tailwind CSS configuration object with extended theme properties and plugins.
+ * @example
+ * const colorSet = 'Brand';
+ * const colorScheme = 'dark';
+ *
+ * const tailwindConfig = generateTailwindConfig(colorSet, colorScheme);
+ * console.log(tailwindConfig);
+ *
+ * // Output:
+ * // {
+ * //   theme: {
+ * //     extend: {
+ * //       colors: {
+ * //         primary: '#1a202c',
+ * //         secondary: '#2d3748',
+ * //         // ...additional flattened colors
+ * //       },
+ * //       fontSize: {
+ * //         'display-md': [32, { lineHeight: '40', letterSpacing: '0', fontWeight: '700' }],
+ * //         // ...other font sizes
+ * //       },
+ * //       fontFamily: {
+ * //         sans: ['Euclid Circular B', 'Helvetica Neue', 'Arial', 'sans-serif'],
+ * //         // ...other font families
+ * //       },
+ * //       letterSpacing: {
+ * //         'display-md': '0',
+ * //         // ...other letter spacings
+ * //       },
+ * //       lineHeight: {
+ * //         'display-md': '40',
+ * //         // ...other line heights
+ * //       },
+ * //     },
+ * //   },
+ * //   plugins: [],
+ * // }
+ * @throws Will log an error and return an empty object if theme colors are not found for the specified color set and color scheme.
+ */
+const generateTailwindConfig = (colorSet, colorScheme) => {
+    const themeColors = twrnc_settings_1.colorSetList[colorSet][colorScheme];
+    if (!themeColors) {
+        console.error('Theme colors not found.');
+        return {};
+    }
+    return {
+        ...tailwind_config_1.default,
+        theme: {
+            ...tailwind_config_1.default.theme,
+            extend: {
+                ...tailwind_config_1.default.theme?.extend,
+                colors: {
+                    ...tailwind_config_1.default.theme?.extend?.colors,
+                    ...themeColors,
+                },
+                fontSize: {
+                    ...twrnc_settings_1.typographyTailwindConfig.fontSize,
+                },
+                fontFamily: {
+                    ...twrnc_settings_1.typographyTailwindConfig.fontFamily,
+                },
+                letterSpacing: {
+                    ...twrnc_settings_1.typographyTailwindConfig.letterSpacing,
+                },
+                lineHeight: {
+                    ...twrnc_settings_1.typographyTailwindConfig.lineHeight,
+                },
+            },
+        },
+        plugins: tailwind_config_1.default.plugins || [],
+    };
+};
+exports.generateTailwindConfig = generateTailwindConfig;
+//# sourceMappingURL=Theme.utilities.js.map

package/dist/Theme/Theme.utilities.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Theme.utilities.js","sourceRoot":"","sources":["../../src/Theme/Theme.utilities.ts"],"names":[],"mappings":";;;;;;AAAA,uDAAuD;AACvD,4EAA+C;AAE/C,sDAA2E;AAE3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACI,MAAM,sBAAsB,GAAG,CACpC,QAAkB,EAClB,WAAwB,EACxB,EAAE;IACF,MAAM,WAAW,GAAG,6BAAY,CAAC,QAAQ,CAAC,CAAC,WAAW,CAAC,CAAC;IAExD,IAAI,CAAC,WAAW,EAAE;QAChB,OAAO,CAAC,KAAK,CAAC,yBAAyB,CAAC,CAAC;QACzC,OAAO,EAAE,CAAC;KACX;IAED,OAAO;QACL,GAAG,yBAAU;QACb,KAAK,EAAE;YACL,GAAG,yBAAU,CAAC,KAAK;YACnB,MAAM,EAAE;gBACN,GAAG,yBAAU,CAAC,KAAK,EAAE,MAAM;gBAC3B,MAAM,EAAE;oBACN,GAAG,yBAAU,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM;oBACnC,GAAG,WAAW;iBACf;gBACD,QAAQ,EAAE;oBACR,GAAG,yCAAwB,CAAC,QAAQ;iBACrC;gBACD,UAAU,EAAE;oBACV,GAAG,yCAAwB,CAAC,UAAU;iBACvC;gBACD,aAAa,EAAE;oBACb,GAAG,yCAAwB,CAAC,aAAa;iBAC1C;gBACD,UAAU,EAAE;oBACV,GAAG,yCAAwB,CAAC,UAAU;iBACvC;aACF;SACF;QACD,OAAO,EAAE,yBAAU,CAAC,OAAO,IAAI,EAAE;KAClC,CAAC;AACJ,CAAC,CAAC;AArCW,QAAA,sBAAsB,0BAqCjC","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport baseConfig from '../../tailwind.config';\nimport type { ColorSet, ColorScheme } from '../twrnc-settings';\nimport { colorSetList, typographyTailwindConfig } from '../twrnc-settings';\n\n/**\n * Generates a Tailwind CSS configuration object based on the specified color set and color scheme.\n * This configuration extends the base Tailwind settings with custom theme colors, typography settings,\n * and other style properties for use in React Native with `twrnc`.\n *\n * @param colorSet - The color set to use (e.g., 'Brand', 'Neutral'). Determines the base palette for the theme.\n * @param colorScheme - The current color scheme ('light' or 'dark'). Specifies whether to use light or dark mode styles.\n * @returns A Tailwind CSS configuration object with extended theme properties and plugins.\n * @example\n * const colorSet = 'Brand';\n * const colorScheme = 'dark';\n *\n * const tailwindConfig = generateTailwindConfig(colorSet, colorScheme);\n * console.log(tailwindConfig);\n *\n * // Output:\n * // {\n * //   theme: {\n * //     extend: {\n * //       colors: {\n * //         primary: '#1a202c',\n * //         secondary: '#2d3748',\n * //         // ...additional flattened colors\n * //       },\n * //       fontSize: {\n * //         'display-md': [32, { lineHeight: '40', letterSpacing: '0', fontWeight: '700' }],\n * //         // ...other font sizes\n * //       },\n * //       fontFamily: {\n * //         sans: ['Euclid Circular B', 'Helvetica Neue', 'Arial', 'sans-serif'],\n * //         // ...other font families\n * //       },\n * //       letterSpacing: {\n * //         'display-md': '0',\n * //         // ...other letter spacings\n * //       },\n * //       lineHeight: {\n * //         'display-md': '40',\n * //         // ...other line heights\n * //       },\n * //     },\n * //   },\n * //   plugins: [],\n * // }\n * @throws Will log an error and return an empty object if theme colors are not found for the specified color set and color scheme.\n */\nexport const generateTailwindConfig = (\n  colorSet: ColorSet,\n  colorScheme: ColorScheme,\n) => {\n  const themeColors = colorSetList[colorSet][colorScheme];\n\n  if (!themeColors) {\n    console.error('Theme colors not found.');\n    return {};\n  }\n\n  return {\n    ...baseConfig,\n    theme: {\n      ...baseConfig.theme,\n      extend: {\n        ...baseConfig.theme?.extend,\n        colors: {\n          ...baseConfig.theme?.extend?.colors,\n          ...themeColors,\n        },\n        fontSize: {\n          ...typographyTailwindConfig.fontSize,\n        },\n        fontFamily: {\n          ...typographyTailwindConfig.fontFamily,\n        },\n        letterSpacing: {\n          ...typographyTailwindConfig.letterSpacing,\n        },\n        lineHeight: {\n          ...typographyTailwindConfig.lineHeight,\n        },\n      },\n    },\n    plugins: baseConfig.plugins || [],\n  };\n};\n"]}

package/dist/Theme/index.d.ts

@@ -0,0 +1,5 @@
+export { useTailwind } from './Theme.hooks';
+export { ThemeContext, ThemeProvider, defaultThemeContextValue, } from './Theme.providers';
+export { Theme } from './Theme.types';
+export type { ThemeContextProps, ThemeProviderProps } from './Theme.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/Theme/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EACL,YAAY,EACZ,aAAa,EACb,wBAAwB,GACzB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC"}

package/dist/Theme/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Theme = exports.defaultThemeContextValue = exports.ThemeProvider = exports.ThemeContext = exports.useTailwind = void 0;
+var Theme_hooks_1 = require("./Theme.hooks");
+Object.defineProperty(exports, "useTailwind", { enumerable: true, get: function () { return Theme_hooks_1.useTailwind; } });
+var Theme_providers_1 = require("./Theme.providers");
+Object.defineProperty(exports, "ThemeContext", { enumerable: true, get: function () { return Theme_providers_1.ThemeContext; } });
+Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return Theme_providers_1.ThemeProvider; } });
+Object.defineProperty(exports, "defaultThemeContextValue", { enumerable: true, get: function () { return Theme_providers_1.defaultThemeContextValue; } });
+var Theme_types_1 = require("./Theme.types");
+Object.defineProperty(exports, "Theme", { enumerable: true, get: function () { return Theme_types_1.Theme; } });
+//# sourceMappingURL=index.js.map

package/dist/Theme/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Theme/index.ts"],"names":[],"mappings":";;;AAAA,6CAA4C;AAAnC,0GAAA,WAAW,OAAA;AACpB,qDAI2B;AAHzB,+GAAA,YAAY,OAAA;AACZ,gHAAA,aAAa,OAAA;AACb,2HAAA,wBAAwB,OAAA;AAE1B,6CAAsC;AAA7B,oGAAA,KAAK,OAAA","sourcesContent":["export { useTailwind } from './Theme.hooks';\nexport {\n  ThemeContext,\n  ThemeProvider,\n  defaultThemeContextValue,\n} from './Theme.providers';\nexport { Theme } from './Theme.types';\nexport type { ThemeContextProps, ThemeProviderProps } from './Theme.types';\n"]}

package/dist/hocs/index.d.ts

@@ -0,0 +1,2 @@
+export { withThemeProvider } from './withThemeProvider';
+//# sourceMappingURL=index.d.ts.map

package/dist/hocs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hocs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/hocs/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withThemeProvider = void 0;
+var withThemeProvider_1 = require("./withThemeProvider");
+Object.defineProperty(exports, "withThemeProvider", { enumerable: true, get: function () { return withThemeProvider_1.withThemeProvider; } });
+//# sourceMappingURL=index.js.map

package/dist/hocs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hocs/index.ts"],"names":[],"mappings":";;;AAAA,yDAAwD;AAA/C,sHAAA,iBAAiB,OAAA","sourcesContent":["export { withThemeProvider } from './withThemeProvider';\n"]}

package/dist/hocs/withThemeProvider.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+/**
+ * HOC to wrap components with ThemeProvider if none is present.
+ * @param Component - The component to wrap with ThemeProvider.
+ */
+export declare function withThemeProvider<Props extends object>(Component: React.ComponentType<Props>): React.ForwardRefExoticComponent<React.PropsWithoutRef<Props> & React.RefAttributes<any>>;
+//# sourceMappingURL=withThemeProvider.d.ts.map

package/dist/hocs/withThemeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"withThemeProvider.d.ts","sourceRoot":"","sources":["../../src/hocs/withThemeProvider.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAiC,MAAM,OAAO,CAAC;AAUtD;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,SAAS,MAAM,EACpD,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,4FAoBtC"}

package/dist/hocs/withThemeProvider.js

@@ -0,0 +1,53 @@
+"use strict";
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable jsdoc/require-returns */
+// src/hocs/withThemeProvider.tsx
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withThemeProvider = void 0;
+const react_1 = __importStar(require("react"));
+const Theme_1 = require("../Theme");
+const twrnc_settings_1 = require("../twrnc-settings");
+/**
+ * HOC to wrap components with ThemeProvider if none is present.
+ * @param Component - The component to wrap with ThemeProvider.
+ */
+function withThemeProvider(Component) {
+    const WrappedComponent = (0, react_1.forwardRef)((props, ref) => {
+        // Check if a ThemeProvider is already present
+        const themeContext = (0, react_1.useContext)(Theme_1.ThemeContext);
+        // If ThemeProvider exists, use the component as is
+        if (themeContext !== Theme_1.defaultThemeContextValue) {
+            return <Component {...props} ref={ref}/>;
+        }
+        // Otherwise, wrap with ThemeProvider
+        return (<Theme_1.ThemeProvider colorSet={twrnc_settings_1.ColorSet.Brand} theme={Theme_1.Theme.Default}>
+        <Component {...props} ref={ref}/>
+      </Theme_1.ThemeProvider>);
+    });
+    return WrappedComponent;
+}
+exports.withThemeProvider = withThemeProvider;
+//# sourceMappingURL=withThemeProvider.js.map

package/dist/hocs/withThemeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"withThemeProvider.js","sourceRoot":"","sources":["../../src/hocs/withThemeProvider.tsx"],"names":[],"mappings":";AAAA,uDAAuD;AACvD,0CAA0C;AAC1C,iCAAiC;;;;;;;;;;;;;;;;;;;;;;;;;;AAEjC,+CAAsD;AAEtD,oCAKkB;AAClB,sDAA6C;AAE7C;;;GAGG;AACH,SAAgB,iBAAiB,CAC/B,SAAqC;IAErC,MAAM,gBAAgB,GAAG,IAAA,kBAAU,EAAa,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;QAC7D,8CAA8C;QAC9C,MAAM,YAAY,GAAG,IAAA,kBAAU,EAAC,oBAAY,CAAC,CAAC;QAE9C,mDAAmD;QACnD,IAAI,YAAY,KAAK,gCAAwB,EAAE;YAC7C,OAAO,CAAC,SAAS,CAAC,IAAK,KAAe,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAG,CAAC;SACtD;QAED,qCAAqC;QACrC,OAAO,CACL,CAAC,qBAAa,CAAC,QAAQ,CAAC,CAAC,yBAAQ,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,aAAK,CAAC,OAAO,CAAC,CAC5D;QAAA,CAAC,SAAS,CAAC,IAAK,KAAe,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAC5C;MAAA,EAAE,qBAAa,CAAC,CACjB,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,OAAO,gBAAgB,CAAC;AAC1B,CAAC;AArBD,8CAqBC","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable jsdoc/require-returns */\n// src/hocs/withThemeProvider.tsx\n\nimport React, { forwardRef, useContext } from 'react';\n\nimport {\n  ThemeProvider,\n  ThemeContext,\n  Theme,\n  defaultThemeContextValue,\n} from '../Theme';\nimport { ColorSet } from '../twrnc-settings';\n\n/**\n * HOC to wrap components with ThemeProvider if none is present.\n * @param Component - The component to wrap with ThemeProvider.\n */\nexport function withThemeProvider<Props extends object>(\n  Component: React.ComponentType<Props>,\n) {\n  const WrappedComponent = forwardRef<any, Props>((props, ref) => {\n    // Check if a ThemeProvider is already present\n    const themeContext = useContext(ThemeContext);\n\n    // If ThemeProvider exists, use the component as is\n    if (themeContext !== defaultThemeContextValue) {\n      return <Component {...(props as Props)} ref={ref} />;\n    }\n\n    // Otherwise, wrap with ThemeProvider\n    return (\n      <ThemeProvider colorSet={ColorSet.Brand} theme={Theme.Default}>\n        <Component {...(props as Props)} ref={ref} />\n      </ThemeProvider>\n    );\n  });\n\n  return WrappedComponent;\n}\n"]}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export type { ThemeContextProps, ThemeProviderProps } from './Theme';
+export { useTailwind, ThemeContext, ThemeProvider, Theme } from './Theme';
+export { ColorSet } from './twrnc-settings';
+export { withThemeProvider } from './hocs';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAE1E,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC"}

package/dist/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.withThemeProvider = exports.ColorSet = exports.Theme = exports.ThemeProvider = exports.ThemeContext = exports.useTailwind = void 0;
+var Theme_1 = require("./Theme");
+Object.defineProperty(exports, "useTailwind", { enumerable: true, get: function () { return Theme_1.useTailwind; } });
+Object.defineProperty(exports, "ThemeContext", { enumerable: true, get: function () { return Theme_1.ThemeContext; } });
+Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return Theme_1.ThemeProvider; } });
+Object.defineProperty(exports, "Theme", { enumerable: true, get: function () { return Theme_1.Theme; } });
+var twrnc_settings_1 = require("./twrnc-settings");
+Object.defineProperty(exports, "ColorSet", { enumerable: true, get: function () { return twrnc_settings_1.ColorSet; } });
+var hocs_1 = require("./hocs");
+Object.defineProperty(exports, "withThemeProvider", { enumerable: true, get: function () { return hocs_1.withThemeProvider; } });
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AACA,iCAA0E;AAAjE,oGAAA,WAAW,OAAA;AAAE,qGAAA,YAAY,OAAA;AAAE,sGAAA,aAAa,OAAA;AAAE,8FAAA,KAAK,OAAA;AAExD,mDAA4C;AAAnC,0GAAA,QAAQ,OAAA;AAEjB,+BAA2C;AAAlC,yGAAA,iBAAiB,OAAA","sourcesContent":["export type { ThemeContextProps, ThemeProviderProps } from './Theme';\nexport { useTailwind, ThemeContext, ThemeProvider, Theme } from './Theme';\n\nexport { ColorSet } from './twrnc-settings';\n\nexport { withThemeProvider } from './hocs';\n"]}

package/dist/twrnc-settings/colors.d.ts

@@ -0,0 +1,3 @@
+import type { ColorSetListProps } from './colors.types';
+export declare const colorSetList: ColorSetListProps;
+//# sourceMappingURL=colors.d.ts.map

package/dist/twrnc-settings/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/twrnc-settings/colors.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAIxD,eAAO,MAAM,YAAY,EAAE,iBAK1B,CAAC"}

package/dist/twrnc-settings/colors.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.colorSetList = void 0;
+const design_tokens_1 = require("@metamask-previews/design-tokens");
+const colors_types_1 = require("./colors.types");
+const colors_utilities_1 = require("./colors.utilities");
+exports.colorSetList = {
+    [colors_types_1.ColorSet.Brand]: {
+        [colors_types_1.ColorScheme.Light]: (0, colors_utilities_1.flattenColors)(design_tokens_1.lightTheme.colors),
+        [colors_types_1.ColorScheme.Dark]: (0, colors_utilities_1.flattenColors)(design_tokens_1.darkTheme.colors),
+    },
+};
+//# sourceMappingURL=colors.js.map

package/dist/twrnc-settings/colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../src/twrnc-settings/colors.ts"],"names":[],"mappings":";;;AAAA,oEAAyE;AAGzE,iDAAuD;AACvD,yDAAmD;AAEtC,QAAA,YAAY,GAAsB;IAC7C,CAAC,uBAAQ,CAAC,KAAK,CAAC,EAAE;QAChB,CAAC,0BAAW,CAAC,KAAK,CAAC,EAAE,IAAA,gCAAa,EAAC,0BAAU,CAAC,MAAM,CAAC;QACrD,CAAC,0BAAW,CAAC,IAAI,CAAC,EAAE,IAAA,gCAAa,EAAC,yBAAS,CAAC,MAAM,CAAC;KACpD;CACF,CAAC","sourcesContent":["import { lightTheme, darkTheme } from '@metamask-previews/design-tokens';\n\nimport type { ColorSetListProps } from './colors.types';\nimport { ColorSet, ColorScheme } from './colors.types';\nimport { flattenColors } from './colors.utilities';\n\nexport const colorSetList: ColorSetListProps = {\n  [ColorSet.Brand]: {\n    [ColorScheme.Light]: flattenColors(lightTheme.colors),\n    [ColorScheme.Dark]: flattenColors(darkTheme.colors),\n  },\n};\n"]}

package/dist/twrnc-settings/colors.types.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Enum for different color set options.
+ */
+export declare enum ColorSet {
+    Brand = "brand"
+}
+/**
+ * Enum for different color scheme options.
+ */
+export declare enum ColorScheme {
+    Light = "light",
+    Dark = "dark"
+}
+/**
+ * Props for ColorSet. Each color set - color scheme should contain
+ * an object with twrnc-className string as key and color string as value.
+ * @example
+ * // {
+ * //   'primary-default': '#abc',
+ * //   'primary-alternative ': '#123',
+ * //   'secondary': '#456'
+ * // }
+ */
+export type ColorSetListProps = {
+    brand: {
+        [ColorScheme.Light]: Record<string, string>;
+        [ColorScheme.Dark]: Record<string, string>;
+    };
+};
+//# sourceMappingURL=colors.types.d.ts.map

package/dist/twrnc-settings/colors.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.types.d.ts","sourceRoot":"","sources":["../../src/twrnc-settings/colors.types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,oBAAY,QAAQ;IAClB,KAAK,UAAU;CAChB;AAED;;GAEG;AACH,oBAAY,WAAW;IACrB,KAAK,UAAU;IACf,IAAI,SAAS;CACd;AAED;;;;;;;;;GASG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE;QACL,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAC5C,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;KAC5C,CAAC;CACH,CAAC"}

package/dist/twrnc-settings/colors.types.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorScheme = exports.ColorSet = void 0;
+/**
+ * Enum for different color set options.
+ */
+var ColorSet;
+(function (ColorSet) {
+    ColorSet["Brand"] = "brand";
+})(ColorSet || (exports.ColorSet = ColorSet = {}));
+/**
+ * Enum for different color scheme options.
+ */
+var ColorScheme;
+(function (ColorScheme) {
+    ColorScheme["Light"] = "light";
+    ColorScheme["Dark"] = "dark";
+})(ColorScheme || (exports.ColorScheme = ColorScheme = {}));
+//# sourceMappingURL=colors.types.js.map

package/dist/twrnc-settings/colors.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.types.js","sourceRoot":"","sources":["../../src/twrnc-settings/colors.types.ts"],"names":[],"mappings":";;;AAAA;;GAEG;AACH,IAAY,QAEX;AAFD,WAAY,QAAQ;IAClB,2BAAe,CAAA;AACjB,CAAC,EAFW,QAAQ,wBAAR,QAAQ,QAEnB;AAED;;GAEG;AACH,IAAY,WAGX;AAHD,WAAY,WAAW;IACrB,8BAAe,CAAA;IACf,4BAAa,CAAA;AACf,CAAC,EAHW,WAAW,2BAAX,WAAW,QAGtB","sourcesContent":["/**\n * Enum for different color set options.\n */\nexport enum ColorSet {\n  Brand = 'brand',\n}\n\n/**\n * Enum for different color scheme options.\n */\nexport enum ColorScheme {\n  Light = 'light',\n  Dark = 'dark',\n}\n\n/**\n * Props for ColorSet. Each color set - color scheme should contain\n * an object with twrnc-className string as key and color string as value.\n * @example\n * // {\n * //   'primary-default': '#abc',\n * //   'primary-alternative ': '#123',\n * //   'secondary': '#456'\n * // }\n */\nexport type ColorSetListProps = {\n  brand: {\n    [ColorScheme.Light]: Record<string, string>;\n    [ColorScheme.Dark]: Record<string, string>;\n  };\n};\n"]}

package/dist/twrnc-settings/colors.utilities.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Helper function to flatten a nested color object into a single-level object
+ * with keys as kebab-case strings and values as strings.
+ *
+ * @param colors - A nested object representing color values.
+ * @param prefix - A string prefix used for constructing flattened keys.
+ * @returns A single-level object with flattened keys and their corresponding color values.
+ * @example
+ * const colors = {
+ *   primary: {
+ *     default: '#abc',
+ *     alternative: '#123',
+ *   },
+ *   secondary: '#456',
+ * };
+ *
+ * flattenColors(colors);
+ * // Returns:
+ * // {
+ * //   'primary-default': '#abc',
+ * //   'primary-alternative': '#123',
+ * //   'secondary': '#456'
+ * // }
+ */
+export declare const flattenColors: (colors: Record<string, any>, prefix?: string) => Record<string, string>;
+//# sourceMappingURL=colors.utilities.d.ts.map

package/dist/twrnc-settings/colors.utilities.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.utilities.d.ts","sourceRoot":"","sources":["../../src/twrnc-settings/colors.utilities.ts"],"names":[],"mappings":"AACA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,aAAa,WAAY,OAAO,MAAM,EAAE,GAAG,CAAC,4CAYxD,CAAC"}

package/dist/twrnc-settings/colors.utilities.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.flattenColors = void 0;
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * Helper function to flatten a nested color object into a single-level object
+ * with keys as kebab-case strings and values as strings.
+ *
+ * @param colors - A nested object representing color values.
+ * @param prefix - A string prefix used for constructing flattened keys.
+ * @returns A single-level object with flattened keys and their corresponding color values.
+ * @example
+ * const colors = {
+ *   primary: {
+ *     default: '#abc',
+ *     alternative: '#123',
+ *   },
+ *   secondary: '#456',
+ * };
+ *
+ * flattenColors(colors);
+ * // Returns:
+ * // {
+ * //   'primary-default': '#abc',
+ * //   'primary-alternative': '#123',
+ * //   'secondary': '#456'
+ * // }
+ */
+const flattenColors = (colors, prefix = '') => {
+    let result = {};
+    for (const [key, value] of Object.entries(colors)) {
+        if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
+            result = { ...result, ...(0, exports.flattenColors)(value, `${prefix}${key}-`) };
+        }
+        else if (typeof value === 'string') {
+            result[`${prefix}${key}`] = value;
+        }
+        else {
+            console.warn(`Invalid color value for ${prefix}${key}:`, value);
+        }
+    }
+    return result;
+};
+exports.flattenColors = flattenColors;
+//# sourceMappingURL=colors.utilities.js.map

package/dist/twrnc-settings/colors.utilities.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.utilities.js","sourceRoot":"","sources":["../../src/twrnc-settings/colors.utilities.ts"],"names":[],"mappings":";;;AAAA,uDAAuD;AACvD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACI,MAAM,aAAa,GAAG,CAAC,MAA2B,EAAE,MAAM,GAAG,EAAE,EAAE,EAAE;IACxE,IAAI,MAAM,GAA2B,EAAE,CAAC;IACxC,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;QACjD,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;YACxE,MAAM,GAAG,EAAE,GAAG,MAAM,EAAE,GAAG,IAAA,qBAAa,EAAC,KAAK,EAAE,GAAG,MAAM,GAAG,GAAG,GAAG,CAAC,EAAE,CAAC;SACrE;aAAM,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;YACpC,MAAM,CAAC,GAAG,MAAM,GAAG,GAAG,EAAE,CAAC,GAAG,KAAK,CAAC;SACnC;aAAM;YACL,OAAO,CAAC,IAAI,CAAC,2BAA2B,MAAM,GAAG,GAAG,GAAG,EAAE,KAAK,CAAC,CAAC;SACjE;KACF;IACD,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAZW,QAAA,aAAa,iBAYxB","sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/**\n * Helper function to flatten a nested color object into a single-level object\n * with keys as kebab-case strings and values as strings.\n *\n * @param colors - A nested object representing color values.\n * @param prefix - A string prefix used for constructing flattened keys.\n * @returns A single-level object with flattened keys and their corresponding color values.\n * @example\n * const colors = {\n *   primary: {\n *     default: '#abc',\n *     alternative: '#123',\n *   },\n *   secondary: '#456',\n * };\n *\n * flattenColors(colors);\n * // Returns:\n * // {\n * //   'primary-default': '#abc',\n * //   'primary-alternative': '#123',\n * //   'secondary': '#456'\n * // }\n */\nexport const flattenColors = (colors: Record<string, any>, prefix = '') => {\n  let result: Record<string, string> = {};\n  for (const [key, value] of Object.entries(colors)) {\n    if (typeof value === 'object' && value !== null && !Array.isArray(value)) {\n      result = { ...result, ...flattenColors(value, `${prefix}${key}-`) };\n    } else if (typeof value === 'string') {\n      result[`${prefix}${key}`] = value;\n    } else {\n      console.warn(`Invalid color value for ${prefix}${key}:`, value);\n    }\n  }\n  return result;\n};\n"]}

package/dist/twrnc-settings/index.d.ts

@@ -0,0 +1,4 @@
+export { colorSetList } from './colors';
+export { ColorSet, ColorScheme } from './colors.types';
+export { typographyTailwindConfig } from './typography';
+//# sourceMappingURL=index.d.ts.map

package/dist/twrnc-settings/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/twrnc-settings/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAEvD,OAAO,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAC"}

package/dist/twrnc-settings/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.typographyTailwindConfig = exports.ColorScheme = exports.ColorSet = exports.colorSetList = void 0;
+var colors_1 = require("./colors");
+Object.defineProperty(exports, "colorSetList", { enumerable: true, get: function () { return colors_1.colorSetList; } });
+var colors_types_1 = require("./colors.types");
+Object.defineProperty(exports, "ColorSet", { enumerable: true, get: function () { return colors_types_1.ColorSet; } });
+Object.defineProperty(exports, "ColorScheme", { enumerable: true, get: function () { return colors_types_1.ColorScheme; } });
+var typography_1 = require("./typography");
+Object.defineProperty(exports, "typographyTailwindConfig", { enumerable: true, get: function () { return typography_1.typographyTailwindConfig; } });
+//# sourceMappingURL=index.js.map

package/dist/twrnc-settings/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/twrnc-settings/index.ts"],"names":[],"mappings":";;;AAAA,mCAAwC;AAA/B,sGAAA,YAAY,OAAA;AACrB,+CAAuD;AAA9C,wGAAA,QAAQ,OAAA;AAAE,2GAAA,WAAW,OAAA;AAE9B,2CAAwD;AAA/C,sHAAA,wBAAwB,OAAA","sourcesContent":["export { colorSetList } from './colors';\nexport { ColorSet, ColorScheme } from './colors.types';\n\nexport { typographyTailwindConfig } from './typography';\n"]}

package/dist/twrnc-settings/typography.d.ts

@@ -0,0 +1,3 @@
+import type { TypographyTailwindConfigProps } from './typography.types';
+export declare const typographyTailwindConfig: TypographyTailwindConfigProps;
+//# sourceMappingURL=typography.d.ts.map

package/dist/twrnc-settings/typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../src/twrnc-settings/typography.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,6BAA6B,EAG9B,MAAM,oBAAoB,CAAC;AAG5B,eAAO,MAAM,wBAAwB,EAAE,6BAmOtC,CAAC"}

package/dist/twrnc-settings/typography.js

@@ -0,0 +1,139 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.typographyTailwindConfig = void 0;
+/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */
+const design_tokens_1 = require("@metamask-previews/design-tokens");
+const typography_utilities_1 = require("./typography.utilities");
+exports.typographyTailwindConfig = {
+    fontSize: {
+        'display-md': [
+            design_tokens_1.typography.sDisplayMD.fontSize,
+            {
+                lineHeight: `${design_tokens_1.typography.sDisplayMD.lineHeight}px`,
+                letterSpacing: `${design_tokens_1.typography.sDisplayMD.letterSpacing}`,
+                fontWeight: design_tokens_1.typography.sDisplayMD.fontWeight,
+            },
+        ],
+        'heading-lg': [
+            design_tokens_1.typography.sHeadingLG.fontSize,
+            {
+                lineHeight: `${design_tokens_1.typography.sHeadingLG.lineHeight}px`,
+                letterSpacing: `${design_tokens_1.typography.sHeadingLG.letterSpacing}`,
+                fontWeight: design_tokens_1.typography.sHeadingLG.fontWeight,
+            },
+        ],
+        'heading-md': [
+            design_tokens_1.typography.sHeadingMD.fontSize,
+            {
+                lineHeight: `${design_tokens_1.typography.sHeadingMD.lineHeight}px`,
+                letterSpacing: `${design_tokens_1.typography.sHeadingMD.letterSpacing}`,
+                fontWeight: design_tokens_1.typography.sHeadingMD.fontWeight,
+            },
+        ],
+        'heading-sm': [
+            design_tokens_1.typography.sHeadingSM.fontSize,
+            {
+                lineHeight: `${design_tokens_1.typography.sHeadingSM.lineHeight}px`,
+                letterSpacing: `${design_tokens_1.typography.sHeadingSM.letterSpacing}`,
+                fontWeight: design_tokens_1.typography.sHeadingSM.fontWeight,
+            },
+        ],
+        'body-lg': [
+            design_tokens_1.typography.sBodyLGMedium.fontSize,
+            {
+                lineHeight: `${design_tokens_1.typography.sBodyLGMedium.lineHeight}px`,
+                letterSpacing: `${design_tokens_1.typography.sBodyLGMedium.letterSpacing}`,
+                fontWeight: design_tokens_1.typography.sBodyLGMedium.fontWeight,
+            },
+        ],
+        'body-md': [
+            design_tokens_1.typography.sBodyMD.fontSize,
+            {
+                lineHeight: `${design_tokens_1.typography.sBodyMD.lineHeight}px`,
+                letterSpacing: `${design_tokens_1.typography.sBodyMD.letterSpacing}`,
+                fontWeight: design_tokens_1.typography.sBodyMD.fontWeight,
+            },
+        ],
+        'body-sm': [
+            design_tokens_1.typography.sBodySM.fontSize,
+            {
+                lineHeight: `${design_tokens_1.typography.sBodySM.lineHeight}px`,
+                letterSpacing: `${design_tokens_1.typography.sBodySM.letterSpacing}`,
+                fontWeight: design_tokens_1.typography.sBodySM.fontWeight,
+            },
+        ],
+        'body-xs': [
+            design_tokens_1.typography.sBodyXS.fontSize,
+            {
+                lineHeight: `${design_tokens_1.typography.sBodyXS.lineHeight}px`,
+                letterSpacing: `${design_tokens_1.typography.sBodyXS.letterSpacing}`,
+                fontWeight: design_tokens_1.typography.sBodyXS.fontWeight,
+            },
+        ],
+    },
+    fontFamily: {
+        sans: [
+            'EuclidCircularB-Regular',
+            'Helvetica Neue',
+            'Helvetica',
+            'Arial',
+            'sans-serif',
+        ],
+        bold: (0, typography_utilities_1.getFontFamilyFromWeightAndStyle)('700', 'normal'),
+        italic: (0, typography_utilities_1.getFontFamilyFromWeightAndStyle)('400', 'italic'),
+        'bold-italic': (0, typography_utilities_1.getFontFamilyFromWeightAndStyle)('700', 'italic'),
+        'display-md': (0, typography_utilities_1.getFontFamilyFromWeightAndStyle)(design_tokens_1.typography.sDisplayMD.fontWeight, 'normal'),
+        'display-md-bold': (0, typography_utilities_1.getFontFamilyFromWeightAndStyle)('700', 'normal'),
+        'display-md-italic': (0, typography_utilities_1.getFontFamilyFromWeightAndStyle)(design_tokens_1.typography.sDisplayMD.fontWeight, 'italic'),
+        'display-md-bold-italic': (0, typography_utilities_1.getFontFamilyFromWeightAndStyle)('700', 'italic'),
+        'heading-lg': (0, typography_utilities_1.getFontFamilyFromWeightAndStyle)(design_tokens_1.typography.sHeadingLG.fontWeight, 'normal'),
+        'heading-lg-bold': (0, typography_utilities_1.getFontFamilyFromWeightAndStyle)('700', 'normal'),
+        'heading-lg-italic': (0, typography_utilities_1.getFontFamilyFromWeightAndStyle)(design_tokens_1.typography.sHeadingLG.fontWeight, 'italic'),
+        'heading-lg-bold-italic': (0, typography_utilities_1.getFontFamilyFromWeightAndStyle)('700', 'italic'),
+        'heading-md': (0, typography_utilities_1.getFontFamilyFromWeightAndStyle)(design_tokens_1.typography.sHeadingMD.fontWeight, 'normal'),
+        'heading-md-bold': (0, typography_utilities_1.getFontFamilyFromWeightAndStyle)('700', 'normal'),
+        'heading-md-italic': (0, typography_utilities_1.getFontFamilyFromWeightAndStyle)(design_tokens_1.typography.sHeadingMD.fontWeight, 'italic'),
+        'heading-md-bold-italic': (0, typography_utilities_1.getFontFamilyFromWeightAndStyle)('700', 'italic'),
+        'heading-sm': (0, typography_utilities_1.getFontFamilyFromWeightAndStyle)(design_tokens_1.typography.sHeadingSM.fontWeight, 'normal'),
+        'heading-sm-bold': (0, typography_utilities_1.getFontFamilyFromWeightAndStyle)('700', 'normal'),
+        'heading-sm-italic': (0, typography_utilities_1.getFontFamilyFromWeightAndStyle)(design_tokens_1.typography.sHeadingSM.fontWeight, 'italic'),
+        'heading-sm-bold-italic': (0, typography_utilities_1.getFontFamilyFromWeightAndStyle)('700', 'italic'),
+        'body-lg': (0, typography_utilities_1.getFontFamilyFromWeightAndStyle)(design_tokens_1.typography.sBodyLGMedium.fontWeight, 'normal'),
+        'body-lg-bold': (0, typography_utilities_1.getFontFamilyFromWeightAndStyle)('700', 'normal'),
+        'body-lg-italic': (0, typography_utilities_1.getFontFamilyFromWeightAndStyle)(design_tokens_1.typography.sBodyLGMedium.fontWeight, 'italic'),
+        'body-lg-bold-italic': (0, typography_utilities_1.getFontFamilyFromWeightAndStyle)('700', 'italic'),
+        'body-md': (0, typography_utilities_1.getFontFamilyFromWeightAndStyle)(design_tokens_1.typography.sBodyMD.fontWeight, 'normal'),
+        'body-md-bold': (0, typography_utilities_1.getFontFamilyFromWeightAndStyle)('700', 'normal'),
+        'body-md-italic': (0, typography_utilities_1.getFontFamilyFromWeightAndStyle)(design_tokens_1.typography.sBodyMD.fontWeight, 'italic'),
+        'body-md-bold-italic': (0, typography_utilities_1.getFontFamilyFromWeightAndStyle)('700', 'italic'),
+        'body-sm': (0, typography_utilities_1.getFontFamilyFromWeightAndStyle)(design_tokens_1.typography.sBodySM.fontWeight, 'normal'),
+        'body-sm-bold': (0, typography_utilities_1.getFontFamilyFromWeightAndStyle)('700', 'normal'),
+        'body-sm-italic': (0, typography_utilities_1.getFontFamilyFromWeightAndStyle)(design_tokens_1.typography.sBodySM.fontWeight, 'italic'),
+        'body-sm-bold-italic': (0, typography_utilities_1.getFontFamilyFromWeightAndStyle)('700', 'italic'),
+        'body-xs': (0, typography_utilities_1.getFontFamilyFromWeightAndStyle)(design_tokens_1.typography.sBodyXS.fontWeight, 'normal'),
+        'body-xs-bold': (0, typography_utilities_1.getFontFamilyFromWeightAndStyle)('700', 'normal'),
+        'body-xs-italic': (0, typography_utilities_1.getFontFamilyFromWeightAndStyle)(design_tokens_1.typography.sBodyXS.fontWeight, 'italic'),
+        'body-xs-bold-italic': (0, typography_utilities_1.getFontFamilyFromWeightAndStyle)('700', 'italic'),
+    },
+    letterSpacing: {
+        'display-md': `${design_tokens_1.typography.sDisplayMD.letterSpacing}`,
+        'heading-lg': `${design_tokens_1.typography.sHeadingLG.letterSpacing}`,
+        'heading-md': `${design_tokens_1.typography.sHeadingMD.letterSpacing}`,
+        'heading-sm': `${design_tokens_1.typography.sHeadingSM.letterSpacing}`,
+        'body-lg': `${design_tokens_1.typography.sBodyLGMedium.letterSpacing}`,
+        'body-md': `${design_tokens_1.typography.sBodyMD.letterSpacing}`,
+        'body-sm': `${design_tokens_1.typography.sBodySM.letterSpacing}`,
+        'body-xs': `${design_tokens_1.typography.sBodyXS.letterSpacing}`,
+    },
+    lineHeight: {
+        'display-md': `${design_tokens_1.typography.sDisplayMD.lineHeight}px`,
+        'heading-lg': `${design_tokens_1.typography.sHeadingLG.lineHeight}px`,
+        'heading-md': `${design_tokens_1.typography.sHeadingMD.lineHeight}px`,
+        'heading-sm': `${design_tokens_1.typography.sHeadingSM.lineHeight}px`,
+        'body-lg': `${design_tokens_1.typography.sBodyLGMedium.lineHeight}px`,
+        'body-md': `${design_tokens_1.typography.sBodyMD.lineHeight}px`,
+        'body-sm': `${design_tokens_1.typography.sBodySM.lineHeight}px`,
+        'body-xs': `${design_tokens_1.typography.sBodyXS.lineHeight}px`,
+    },
+};
+//# sourceMappingURL=typography.js.map

package/dist/twrnc-settings/typography.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.js","sourceRoot":"","sources":["../../src/twrnc-settings/typography.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */\nimport { typography } from '@metamask-previews/design-tokens';\n\nimport type {\n  TypographyTailwindConfigProps,\n  FontStyle,\n  FontWeight,\n} from './typography.types';\nimport { getFontFamilyFromWeightAndStyle } from './typography.utilities';\n\nexport const typographyTailwindConfig: TypographyTailwindConfigProps = {\n  fontSize: {\n    'display-md': [\n      typography.sDisplayMD.fontSize,\n      {\n        lineHeight: `${typography.sDisplayMD.lineHeight as number}px`,\n        letterSpacing: `${typography.sDisplayMD.letterSpacing as number}`,\n        fontWeight: typography.sDisplayMD.fontWeight,\n      },\n    ],\n    'heading-lg': [\n      typography.sHeadingLG.fontSize,\n      {\n        lineHeight: `${typography.sHeadingLG.lineHeight as number}px`,\n        letterSpacing: `${typography.sHeadingLG.letterSpacing as number}`,\n        fontWeight: typography.sHeadingLG.fontWeight,\n      },\n    ],\n    'heading-md': [\n      typography.sHeadingMD.fontSize,\n      {\n        lineHeight: `${typography.sHeadingMD.lineHeight as number}px`,\n        letterSpacing: `${typography.sHeadingMD.letterSpacing as number}`,\n        fontWeight: typography.sHeadingMD.fontWeight,\n      },\n    ],\n    'heading-sm': [\n      typography.sHeadingSM.fontSize,\n      {\n        lineHeight: `${typography.sHeadingSM.lineHeight as number}px`,\n        letterSpacing: `${typography.sHeadingSM.letterSpacing as number}`,\n        fontWeight: typography.sHeadingSM.fontWeight,\n      },\n    ],\n    'body-lg': [\n      typography.sBodyLGMedium.fontSize,\n      {\n        lineHeight: `${typography.sBodyLGMedium.lineHeight as number}px`,\n        letterSpacing: `${typography.sBodyLGMedium.letterSpacing as number}`,\n        fontWeight: typography.sBodyLGMedium.fontWeight,\n      },\n    ],\n    'body-md': [\n      typography.sBodyMD.fontSize,\n      {\n        lineHeight: `${typography.sBodyMD.lineHeight as number}px`,\n        letterSpacing: `${typography.sBodyMD.letterSpacing as number}`,\n        fontWeight: typography.sBodyMD.fontWeight,\n      },\n    ],\n    'body-sm': [\n      typography.sBodySM.fontSize,\n      {\n        lineHeight: `${typography.sBodySM.lineHeight as number}px`,\n        letterSpacing: `${typography.sBodySM.letterSpacing as number}`,\n        fontWeight: typography.sBodySM.fontWeight,\n      },\n    ],\n    'body-xs': [\n      typography.sBodyXS.fontSize,\n      {\n        lineHeight: `${typography.sBodyXS.lineHeight as number}px`,\n        letterSpacing: `${typography.sBodyXS.letterSpacing as number}`,\n        fontWeight: typography.sBodyXS.fontWeight,\n      },\n    ],\n  },\n  fontFamily: {\n    sans: [\n      'EuclidCircularB-Regular',\n      'Helvetica Neue',\n      'Helvetica',\n      'Arial',\n      'sans-serif',\n    ],\n    bold: getFontFamilyFromWeightAndStyle('700', 'normal'),\n    italic: getFontFamilyFromWeightAndStyle('400', 'italic'),\n    'bold-italic': getFontFamilyFromWeightAndStyle('700', 'italic'),\n    'display-md': getFontFamilyFromWeightAndStyle(\n      typography.sDisplayMD.fontWeight as FontWeight,\n      'normal' as FontStyle,\n    ),\n    'display-md-bold': getFontFamilyFromWeightAndStyle(\n      '700' as FontWeight,\n      'normal' as FontStyle,\n    ),\n    'display-md-italic': getFontFamilyFromWeightAndStyle(\n      typography.sDisplayMD.fontWeight as FontWeight,\n      'italic' as FontStyle,\n    ),\n    'display-md-bold-italic': getFontFamilyFromWeightAndStyle(\n      '700',\n      'italic' as FontStyle,\n    ),\n    'heading-lg': getFontFamilyFromWeightAndStyle(\n      typography.sHeadingLG.fontWeight as FontWeight,\n      'normal' as FontStyle,\n    ),\n    'heading-lg-bold': getFontFamilyFromWeightAndStyle(\n      '700' as FontWeight,\n      'normal' as FontStyle,\n    ),\n    'heading-lg-italic': getFontFamilyFromWeightAndStyle(\n      typography.sHeadingLG.fontWeight as FontWeight,\n      'italic' as FontStyle,\n    ),\n    'heading-lg-bold-italic': getFontFamilyFromWeightAndStyle(\n      '700',\n      'italic' as FontStyle,\n    ),\n    'heading-md': getFontFamilyFromWeightAndStyle(\n      typography.sHeadingMD.fontWeight as FontWeight,\n      'normal' as FontStyle,\n    ),\n    'heading-md-bold': getFontFamilyFromWeightAndStyle(\n      '700' as FontWeight,\n      'normal' as FontStyle,\n    ),\n    'heading-md-italic': getFontFamilyFromWeightAndStyle(\n      typography.sHeadingMD.fontWeight as FontWeight,\n      'italic' as FontStyle,\n    ),\n    'heading-md-bold-italic': getFontFamilyFromWeightAndStyle(\n      '700',\n      'italic' as FontStyle,\n    ),\n    'heading-sm': getFontFamilyFromWeightAndStyle(\n      typography.sHeadingSM.fontWeight as FontWeight,\n      'normal' as FontStyle,\n    ),\n    'heading-sm-bold': getFontFamilyFromWeightAndStyle(\n      '700' as FontWeight,\n      'normal' as FontStyle,\n    ),\n    'heading-sm-italic': getFontFamilyFromWeightAndStyle(\n      typography.sHeadingSM.fontWeight as FontWeight,\n      'italic' as FontStyle,\n    ),\n    'heading-sm-bold-italic': getFontFamilyFromWeightAndStyle(\n      '700',\n      'italic' as FontStyle,\n    ),\n    'body-lg': getFontFamilyFromWeightAndStyle(\n      typography.sBodyLGMedium.fontWeight as FontWeight,\n      'normal' as FontStyle,\n    ),\n    'body-lg-bold': getFontFamilyFromWeightAndStyle(\n      '700' as FontWeight,\n      'normal' as FontStyle,\n    ),\n    'body-lg-italic': getFontFamilyFromWeightAndStyle(\n      typography.sBodyLGMedium.fontWeight as FontWeight,\n      'italic' as FontStyle,\n    ),\n    'body-lg-bold-italic': getFontFamilyFromWeightAndStyle(\n      '700',\n      'italic' as FontStyle,\n    ),\n    'body-md': getFontFamilyFromWeightAndStyle(\n      typography.sBodyMD.fontWeight as FontWeight,\n      'normal' as FontStyle,\n    ),\n    'body-md-bold': getFontFamilyFromWeightAndStyle(\n      '700' as FontWeight,\n      'normal' as FontStyle,\n    ),\n    'body-md-italic': getFontFamilyFromWeightAndStyle(\n      typography.sBodyMD.fontWeight as FontWeight,\n      'italic' as FontStyle,\n    ),\n    'body-md-bold-italic': getFontFamilyFromWeightAndStyle(\n      '700',\n      'italic' as FontStyle,\n    ),\n    'body-sm': getFontFamilyFromWeightAndStyle(\n      typography.sBodySM.fontWeight as FontWeight,\n      'normal' as FontStyle,\n    ),\n    'body-sm-bold': getFontFamilyFromWeightAndStyle(\n      '700' as FontWeight,\n      'normal' as FontStyle,\n    ),\n    'body-sm-italic': getFontFamilyFromWeightAndStyle(\n      typography.sBodySM.fontWeight as FontWeight,\n      'italic' as FontStyle,\n    ),\n    'body-sm-bold-italic': getFontFamilyFromWeightAndStyle(\n      '700',\n      'italic' as FontStyle,\n    ),\n    'body-xs': getFontFamilyFromWeightAndStyle(\n      typography.sBodyXS.fontWeight as FontWeight,\n      'normal' as FontStyle,\n    ),\n    'body-xs-bold': getFontFamilyFromWeightAndStyle(\n      '700' as FontWeight,\n      'normal' as FontStyle,\n    ),\n    'body-xs-italic': getFontFamilyFromWeightAndStyle(\n      typography.sBodyXS.fontWeight as FontWeight,\n      'italic' as FontStyle,\n    ),\n    'body-xs-bold-italic': getFontFamilyFromWeightAndStyle(\n      '700',\n      'italic' as FontStyle,\n    ),\n  },\n  letterSpacing: {\n    'display-md': `${typography.sDisplayMD.letterSpacing as number}`,\n    'heading-lg': `${typography.sHeadingLG.letterSpacing as number}`,\n    'heading-md': `${typography.sHeadingMD.letterSpacing as number}`,\n    'heading-sm': `${typography.sHeadingSM.letterSpacing as number}`,\n    'body-lg': `${typography.sBodyLGMedium.letterSpacing as number}`,\n    'body-md': `${typography.sBodyMD.letterSpacing as number}`,\n    'body-sm': `${typography.sBodySM.letterSpacing as number}`,\n    'body-xs': `${typography.sBodyXS.letterSpacing as number}`,\n  },\n  lineHeight: {\n    'display-md': `${typography.sDisplayMD.lineHeight as number}px`,\n    'heading-lg': `${typography.sHeadingLG.lineHeight as number}px`,\n    'heading-md': `${typography.sHeadingMD.lineHeight as number}px`,\n    'heading-sm': `${typography.sHeadingSM.lineHeight as number}px`,\n    'body-lg': `${typography.sBodyLGMedium.lineHeight as number}px`,\n    'body-md': `${typography.sBodyMD.lineHeight as number}px`,\n    'body-sm': `${typography.sBodySM.lineHeight as number}px`,\n    'body-xs': `${typography.sBodyXS.lineHeight as number}px`,\n  },\n};\n"]}

package/dist/twrnc-settings/typography.types.d.ts

@@ -0,0 +1,64 @@
+/**
+ * Different Typography variants to be used as twrnc classNames
+ */
+export type TypographyVariant = 'display-md' | 'heading-lg' | 'heading-md' | 'heading-sm' | 'body-lg' | 'body-md' | 'body-sm' | 'body-xs';
+/**
+ * Different FontFamily variants to be used as twrnc classNames
+ */
+export type FontFamilyVariant = TypographyVariant | 'display-md-bold' | 'display-md-italic' | 'display-md-bold-italic' | 'heading-lg-bold' | 'heading-lg-italic' | 'heading-lg-bold-italic' | 'heading-md-bold' | 'heading-md-italic' | 'heading-md-bold-italic' | 'heading-sm-bold' | 'heading-sm-italic' | 'heading-sm-bold-italic' | 'body-lg-bold' | 'body-lg-italic' | 'body-lg-bold-italic' | 'body-md-bold' | 'body-md-italic' | 'body-md-bold-italic' | 'body-sm-bold' | 'body-sm-italic' | 'body-sm-bold-italic' | 'body-xs-bold' | 'body-xs-italic' | 'body-xs-bold-italic' | 'bold' | 'italic' | 'bold-italic';
+/**
+ * Different FontWeight and FontStyle to be used to calculate the FontFamily
+ * in getFontFamilyFromWeightAndStyle
+ */
+export type FontWeight = '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | 'normal' | 'bold';
+export type FontStyle = 'normal' | 'italic';
+/**
+ * Props for TypographyTailwindConfig
+ * @example
+ * // {
+ * //   fontSize: {
+ * //     'display-md': {
+ * //       fontFamily: 'EuclidCircularB-Bold',
+ * //       fontSize: '32',
+ * //       fontWeight: '700',
+ * //       letterSpacing: '0',
+ * //       lineHeight: '40px',
+ * //     },
+ * //   },
+ * //   fontFamily: {
+ * //     sans: [
+ * //       'EuclidCircularB',
+ * //       'Helvetica Neue',
+ * //       'Helvetica',
+ * //       'Arial',
+ * //       'sans-serif',
+ * //     ],
+ * //     'display-md': 'EuclidCircularB',
+ * //   },
+ * //   letterSpacing: {
+ * //     'display-md': '0',
+ * //   },
+ * //   fontWeight: {
+ * //     'display-md': '400',
+ * //   },
+ * //   lineHeight: {
+ * //     'display-md': '40px',
+ * //   },
+ * // }
+ */
+export type TypographyTailwindConfigProps = {
+    fontSize: Record<TypographyVariant, [
+        number,
+        {
+            lineHeight: string;
+            letterSpacing: string;
+            fontWeight: string;
+        }
+    ]>;
+    fontFamily: {
+        sans: string[];
+    } & Record<FontFamilyVariant, string>;
+    letterSpacing: Record<TypographyVariant, string>;
+    lineHeight: Record<TypographyVariant, string>;
+};
+//# sourceMappingURL=typography.types.d.ts.map

package/dist/twrnc-settings/typography.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.types.d.ts","sourceRoot":"","sources":["../../src/twrnc-settings/typography.types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,MAAM,iBAAiB,GACzB,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,YAAY,GACZ,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,CAAC;AAEd;;GAEG;AACH,MAAM,MAAM,iBAAiB,GACzB,iBAAiB,GACjB,iBAAiB,GACjB,mBAAmB,GACnB,wBAAwB,GACxB,iBAAiB,GACjB,mBAAmB,GACnB,wBAAwB,GACxB,iBAAiB,GACjB,mBAAmB,GACnB,wBAAwB,GACxB,iBAAiB,GACjB,mBAAmB,GACnB,wBAAwB,GACxB,cAAc,GACd,gBAAgB,GAChB,qBAAqB,GACrB,cAAc,GACd,gBAAgB,GAChB,qBAAqB,GACrB,cAAc,GACd,gBAAgB,GAChB,qBAAqB,GACrB,cAAc,GACd,gBAAgB,GAChB,qBAAqB,GACrB,MAAM,GACN,QAAQ,GACR,aAAa,CAAC;AAElB;;;GAGG;AACH,MAAM,MAAM,UAAU,GAClB,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,QAAQ,GACR,MAAM,CAAC;AACX,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,MAAM,6BAA6B,GAAG;IAC1C,QAAQ,EAAE,MAAM,CACd,iBAAiB,EACjB;QACE,MAAM;QACN;YACE,UAAU,EAAE,MAAM,CAAC;YACnB,aAAa,EAAE,MAAM,CAAC;YACtB,UAAU,EAAE,MAAM,CAAC;SACpB;KACF,CACF,CAAC;IACF,UAAU,EAAE;QACV,IAAI,EAAE,MAAM,EAAE,CAAC;KAChB,GAAG,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC;IACtC,aAAa,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC;IACjD,UAAU,EAAE,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC;CAC/C,CAAC"}

package/dist/twrnc-settings/typography.types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=typography.types.js.map

package/dist/twrnc-settings/typography.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.types.js","sourceRoot":"","sources":["../../src/twrnc-settings/typography.types.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * Different Typography variants to be used as twrnc classNames\n */\nexport type TypographyVariant =\n  | 'display-md'\n  | 'heading-lg'\n  | 'heading-md'\n  | 'heading-sm'\n  | 'body-lg'\n  | 'body-md'\n  | 'body-sm'\n  | 'body-xs';\n\n/**\n * Different FontFamily variants to be used as twrnc classNames\n */\nexport type FontFamilyVariant =\n  | TypographyVariant\n  | 'display-md-bold'\n  | 'display-md-italic'\n  | 'display-md-bold-italic'\n  | 'heading-lg-bold'\n  | 'heading-lg-italic'\n  | 'heading-lg-bold-italic'\n  | 'heading-md-bold'\n  | 'heading-md-italic'\n  | 'heading-md-bold-italic'\n  | 'heading-sm-bold'\n  | 'heading-sm-italic'\n  | 'heading-sm-bold-italic'\n  | 'body-lg-bold'\n  | 'body-lg-italic'\n  | 'body-lg-bold-italic'\n  | 'body-md-bold'\n  | 'body-md-italic'\n  | 'body-md-bold-italic'\n  | 'body-sm-bold'\n  | 'body-sm-italic'\n  | 'body-sm-bold-italic'\n  | 'body-xs-bold'\n  | 'body-xs-italic'\n  | 'body-xs-bold-italic'\n  | 'bold'\n  | 'italic'\n  | 'bold-italic';\n\n/**\n * Different FontWeight and FontStyle to be used to calculate the FontFamily\n * in getFontFamilyFromWeightAndStyle\n */\nexport type FontWeight =\n  | '100'\n  | '200'\n  | '300'\n  | '400'\n  | '500'\n  | '600'\n  | '700'\n  | '800'\n  | '900'\n  | 'normal'\n  | 'bold';\nexport type FontStyle = 'normal' | 'italic';\n\n/**\n * Props for TypographyTailwindConfig\n * @example\n * // {\n * //   fontSize: {\n * //     'display-md': {\n * //       fontFamily: 'EuclidCircularB-Bold',\n * //       fontSize: '32',\n * //       fontWeight: '700',\n * //       letterSpacing: '0',\n * //       lineHeight: '40px',\n * //     },\n * //   },\n * //   fontFamily: {\n * //     sans: [\n * //       'EuclidCircularB',\n * //       'Helvetica Neue',\n * //       'Helvetica',\n * //       'Arial',\n * //       'sans-serif',\n * //     ],\n * //     'display-md': 'EuclidCircularB',\n * //   },\n * //   letterSpacing: {\n * //     'display-md': '0',\n * //   },\n * //   fontWeight: {\n * //     'display-md': '400',\n * //   },\n * //   lineHeight: {\n * //     'display-md': '40px',\n * //   },\n * // }\n */\nexport type TypographyTailwindConfigProps = {\n  fontSize: Record<\n    TypographyVariant,\n    [\n      number,\n      {\n        lineHeight: string; // Make sure to include units - \"40px\" instead of \"40\"\n        letterSpacing: string;\n        fontWeight: string;\n      },\n    ]\n  >;\n  fontFamily: {\n    sans: string[];\n  } & Record<FontFamilyVariant, string>;\n  letterSpacing: Record<TypographyVariant, string>;\n  lineHeight: Record<TypographyVariant, string>; // Make sure to include units - \"40px\" instead of \"40\"\n};\n"]}

package/dist/twrnc-settings/typography.utilities.d.ts

@@ -0,0 +1,22 @@
+import type { FontStyle, FontWeight } from './typography.types';
+/**
+ * Helper function to determine the font family based on the font weight and style.
+ *
+ * @param fontWeight - The weight of the font as a string (e.g., '400', '500', 'bold').
+ * Default is '400'.
+ * @param fontStyle - The style of the font as a string (e.g., 'normal', 'italic').
+ * Default is 'normal'.
+ * @returns A string representing the font family name constructed based on the weight
+ * and style provided.
+ * @example
+ * getFontFamilyFromWeightAndStyle('400', 'normal');
+ * // Returns: 'EuclidCircularB-Regular'
+ *
+ * getFontFamilyFromWeightAndStyle('700', 'italic');
+ * // Returns: 'EuclidCircularB-BoldItalic'
+ *
+ * getFontFamilyFromWeightAndStyle('500');
+ * // Returns: 'EuclidCircularB-Medium'
+ */
+export declare const getFontFamilyFromWeightAndStyle: (fontWeight?: FontWeight, fontStyle?: FontStyle) => string;
+//# sourceMappingURL=typography.utilities.d.ts.map

package/dist/twrnc-settings/typography.utilities.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.utilities.d.ts","sourceRoot":"","sources":["../../src/twrnc-settings/typography.utilities.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhE;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,+BAA+B,gBAC9B,UAAU,cACX,SAAS,KACnB,MAoBF,CAAC"}

package/dist/twrnc-settings/typography.utilities.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFontFamilyFromWeightAndStyle = void 0;
+/**
+ * Helper function to determine the font family based on the font weight and style.
+ *
+ * @param fontWeight - The weight of the font as a string (e.g., '400', '500', 'bold').
+ * Default is '400'.
+ * @param fontStyle - The style of the font as a string (e.g., 'normal', 'italic').
+ * Default is 'normal'.
+ * @returns A string representing the font family name constructed based on the weight
+ * and style provided.
+ * @example
+ * getFontFamilyFromWeightAndStyle('400', 'normal');
+ * // Returns: 'EuclidCircularB-Regular'
+ *
+ * getFontFamilyFromWeightAndStyle('700', 'italic');
+ * // Returns: 'EuclidCircularB-BoldItalic'
+ *
+ * getFontFamilyFromWeightAndStyle('500');
+ * // Returns: 'EuclidCircularB-Medium'
+ */
+const getFontFamilyFromWeightAndStyle = (fontWeight = '400', fontStyle = 'normal') => {
+    const weightMap = {
+        '100': 'Regular',
+        '200': 'Regular',
+        '300': 'Regular',
+        '400': 'Regular',
+        '500': 'Medium',
+        '600': 'Medium',
+        '700': 'Bold',
+        '800': 'Bold',
+        '900': 'Bold',
+        normal: 'Regular',
+        bold: 'Bold',
+    };
+    const styleSuffix = fontStyle === 'italic' ? 'Italic' : '';
+    const fontSuffix = weightMap[fontWeight];
+    return `EuclidCircularB-${fontSuffix}${styleSuffix}`;
+};
+exports.getFontFamilyFromWeightAndStyle = getFontFamilyFromWeightAndStyle;
+//# sourceMappingURL=typography.utilities.js.map

package/dist/twrnc-settings/typography.utilities.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.utilities.js","sourceRoot":"","sources":["../../src/twrnc-settings/typography.utilities.ts"],"names":[],"mappings":";;;AAEA;;;;;;;;;;;;;;;;;;GAkBG;AACI,MAAM,+BAA+B,GAAG,CAC7C,aAAyB,KAAK,EAC9B,YAAuB,QAAQ,EACvB,EAAE;IACV,MAAM,SAAS,GAAoC;QACjD,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,QAAQ;QACf,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,MAAM;QACb,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,SAAS;QACjB,IAAI,EAAE,MAAM;KACb,CAAC;IAEF,MAAM,WAAW,GAAG,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAE3D,MAAM,UAAU,GAAG,SAAS,CAAC,UAAU,CAAC,CAAC;IAEzC,OAAO,mBAAmB,UAAU,GAAG,WAAW,EAAE,CAAC;AACvD,CAAC,CAAC;AAvBW,QAAA,+BAA+B,mCAuB1C","sourcesContent":["import type { FontStyle, FontWeight } from './typography.types';\n\n/**\n * Helper function to determine the font family based on the font weight and style.\n *\n * @param fontWeight - The weight of the font as a string (e.g., '400', '500', 'bold').\n * Default is '400'.\n * @param fontStyle - The style of the font as a string (e.g., 'normal', 'italic').\n * Default is 'normal'.\n * @returns A string representing the font family name constructed based on the weight\n * and style provided.\n * @example\n * getFontFamilyFromWeightAndStyle('400', 'normal');\n * // Returns: 'EuclidCircularB-Regular'\n *\n * getFontFamilyFromWeightAndStyle('700', 'italic');\n * // Returns: 'EuclidCircularB-BoldItalic'\n *\n * getFontFamilyFromWeightAndStyle('500');\n * // Returns: 'EuclidCircularB-Medium'\n */\nexport const getFontFamilyFromWeightAndStyle = (\n  fontWeight: FontWeight = '400',\n  fontStyle: FontStyle = 'normal',\n): string => {\n  const weightMap: { [key in FontWeight]: string } = {\n    '100': 'Regular',\n    '200': 'Regular',\n    '300': 'Regular',\n    '400': 'Regular',\n    '500': 'Medium',\n    '600': 'Medium',\n    '700': 'Bold',\n    '800': 'Bold',\n    '900': 'Bold',\n    normal: 'Regular',\n    bold: 'Bold',\n  };\n\n  const styleSuffix = fontStyle === 'italic' ? 'Italic' : '';\n\n  const fontSuffix = weightMap[fontWeight];\n\n  return `EuclidCircularB-${fontSuffix}${styleSuffix}`;\n};\n"]}

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@metamask-previews/design-system-twrnc-preset",
+  "version": "0.0.0-preview.04cb60f",
+  "description": "Design System twrnc Preset",
+  "keywords": [
+    "MetaMask",
+    "Ethereum"
+  ],
+  "homepage": "https://github.com/MetaMask/metamask-design-system/tree/main/packages/design-system-twrnc-preset#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": {
+    ".": {
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/"
+  ],
+  "scripts": {
+    "build": "rm -rf tsconfig.build.tsbuildinfo dist && tsc --project tsconfig.build.json",
+    "changelog:update": "../../scripts/update-changelog.sh @metamask/design-system-twrnc-preset",
+    "changelog:validate": "../../scripts/validate-changelog.sh @metamask/design-system-twrnc-preset",
+    "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 -passWithNoTests",
+    "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"
+  },
+  "dependencies": {
+    "@metamask-previews/design-tokens": "4.1.0-preview.04cb60f"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.23.5",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.25.9",
+    "@babel/preset-typescript": "^7.23.3",
+    "@metamask/auto-changelog": "^3.4.4",
+    "@testing-library/react-native": "^12.8.1",
+    "@types/babel__preset-env": "^7",
+    "@types/jest": "^27.4.1",
+    "@types/react-test-renderer": "^18",
+    "babel-jest": "^29.7.0",
+    "deepmerge": "^4.2.2",
+    "jest": "^29.7.0",
+    "metro-react-native-babel-preset": "^0.77.0",
+    "react-test-renderer": "^18.3.1",
+    "ts-jest": "^29.2.5",
+    "typescript": "~5.2.2"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-native": "0.72.15",
+    "twrnc": "^4.5.1"
+  },
+  "engines": {
+    "node": "^18.18 || >=20"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
+}