@metamask-previews/design-system-react 0.0.0-preview.04cb60f → 0.0.0-preview.31cc4ac

package/dist/components/icon/Icon.cjs

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = void 0;
+const react_1 = __importDefault(require("react"));
+const tw_merge_1 = require("../../utils/tw-merge.cjs");
+const Icon_types_1 = require("./Icon.types.cjs");
+const Icon_constants_1 = require("./Icon.constants.cjs");
+const Icon = ({ name, size = Icon_types_1.IconSize.Md, color = Icon_types_1.IconColor.IconDefault, className, style, ...props }) => {
+    if (!name) {
+        console.warn('Icon name is required');
+        return null;
+    }
+    const mergedClassName = (0, tw_merge_1.twMerge)('inline-block', Icon_constants_1.ICON_SIZE_CLASS_MAP[size], color, className);
+    return (react_1.default.createElement("svg", { className: mergedClassName, ...props, style: style, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", fill: "currentColor" },
+        react_1.default.createElement("path", { d: "m337 51l-171 0c-75 0-119 45-119 119l0 172c0 74 44 119 119 119l171 0c75 0 119-45 119-119l0-172c1-74-44-119-119-119z m-3 220l-67 0 0 67c0 8-7 15-15 15-9 0-16-7-16-15l0-67-66 0c-9 0-16-7-16-15 0-8 7-15 16-15l66 0 0-67c0-8 7-15 16-15 8 0 15 7 15 15l0 67 67 0c8 0 15 7 15 15 0 8-7 15-15 15z" })));
+};
+exports.Icon = Icon;
+//# sourceMappingURL=Icon.cjs.map

package/dist/components/icon/Icon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.cjs","sourceRoot":"","sources":["../../../src/components/icon/Icon.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,uDAA+C;AAC/C,iDAAmD;AAEnD,yDAAuD;AAEhD,MAAM,IAAI,GAAwB,CAAC,EACxC,IAAI,EACJ,IAAI,GAAG,qBAAQ,CAAC,EAAE,EAClB,KAAK,GAAG,sBAAS,CAAC,WAAW,EAC7B,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;QACtC,OAAO,IAAI,CAAC;KACb;IACD,MAAM,eAAe,GAAG,IAAA,kBAAO,EAC7B,cAAc,EACd,oCAAmB,CAAC,IAAI,CAAC,EACzB,KAAK,EACL,SAAS,CACV,CAAC;IAEF,OAAO,CACL,uCACE,SAAS,EAAE,eAAe,KACrB,KAAuC,EAC5C,KAAK,EAAE,KAAK,EACZ,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,cAAc;QAEnB,wCAAM,CAAC,EAAC,+RAA+R,GAAG,CACtS,CACP,CAAC;AACJ,CAAC,CAAC;AA/BW,QAAA,IAAI,QA+Bf","sourcesContent":["import React from 'react';\nimport { twMerge } from '../../utils/tw-merge';\nimport { IconSize, IconColor } from './Icon.types';\nimport type { IconProps } from './Icon.types';\nimport { ICON_SIZE_CLASS_MAP } from './Icon.constants';\n\nexport const Icon: React.FC<IconProps> = ({\n  name,\n  size = IconSize.Md,\n  color = IconColor.IconDefault,\n  className,\n  style,\n  ...props\n}) => {\n  if (!name) {\n    console.warn('Icon name is required');\n    return null;\n  }\n  const mergedClassName = twMerge(\n    'inline-block',\n    ICON_SIZE_CLASS_MAP[size],\n    color,\n    className,\n  );\n\n  return (\n    <svg\n      className={mergedClassName}\n      {...(props as React.SVGProps<SVGSVGElement>)}\n      style={style}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 512 512\"\n      fill=\"currentColor\"\n    >\n      <path d=\"m337 51l-171 0c-75 0-119 45-119 119l0 172c0 74 44 119 119 119l171 0c75 0 119-45 119-119l0-172c1-74-44-119-119-119z m-3 220l-67 0 0 67c0 8-7 15-15 15-9 0-16-7-16-15l0-67-66 0c-9 0-16-7-16-15 0-8 7-15 16-15l66 0 0-67c0-8 7-15 16-15 8 0 15 7 15 15l0 67 67 0c8 0 15 7 15 15 0 8-7 15-15 15z\" />\n    </svg>\n  );\n};\n"]}

package/dist/components/icon/Icon.constants.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ICON_SIZE_CLASS_MAP = void 0;
+const Icon_types_1 = require("./Icon.types.cjs");
+exports.ICON_SIZE_CLASS_MAP = {
+    [Icon_types_1.IconSize.Xs]: 'w-3 h-3',
+    [Icon_types_1.IconSize.Sm]: 'w-4 h-4',
+    [Icon_types_1.IconSize.Md]: 'w-5 h-5',
+    [Icon_types_1.IconSize.Lg]: 'w-6 h-6',
+    [Icon_types_1.IconSize.Xl]: 'w-8 h-8', // 32px
+};
+//# sourceMappingURL=Icon.constants.cjs.map

package/dist/components/icon/Icon.constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.constants.cjs","sourceRoot":"","sources":["../../../src/components/icon/Icon.constants.ts"],"names":[],"mappings":";;;AAAA,iDAAwC;AAE3B,QAAA,mBAAmB,GAA6B;IAC3D,CAAC,qBAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,qBAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,qBAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,qBAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,qBAAQ,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO;CAClC,CAAC","sourcesContent":["import { IconSize } from './Icon.types';\n\nexport const ICON_SIZE_CLASS_MAP: Record<IconSize, string> = {\n  [IconSize.Xs]: 'w-3 h-3', // 12px\n  [IconSize.Sm]: 'w-4 h-4', // 16px\n  [IconSize.Md]: 'w-5 h-5', // 20px\n  [IconSize.Lg]: 'w-6 h-6', // 24px\n  [IconSize.Xl]: 'w-8 h-8', // 32px\n};\n"]}

package/dist/components/icon/Icon.constants.d.cts

@@ -0,0 +1,3 @@
+import { IconSize } from "./Icon.types.cjs";
+export declare const ICON_SIZE_CLASS_MAP: Record<IconSize, string>;
+//# sourceMappingURL=Icon.constants.d.cts.map

package/dist/components/icon/Icon.constants.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.constants.d.cts","sourceRoot":"","sources":["../../../src/components/icon/Icon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,yBAAqB;AAExC,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAMxD,CAAC"}

package/dist/components/icon/Icon.constants.d.mts

@@ -0,0 +1,3 @@
+import { IconSize } from "./Icon.types.mjs";
+export declare const ICON_SIZE_CLASS_MAP: Record<IconSize, string>;
+//# sourceMappingURL=Icon.constants.d.mts.map

package/dist/components/icon/Icon.constants.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.constants.d.mts","sourceRoot":"","sources":["../../../src/components/icon/Icon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,yBAAqB;AAExC,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAMxD,CAAC"}

package/dist/components/icon/Icon.constants.mjs

@@ -0,0 +1,9 @@
+import { IconSize } from "./Icon.types.mjs";
+export const ICON_SIZE_CLASS_MAP = {
+    [IconSize.Xs]: 'w-3 h-3',
+    [IconSize.Sm]: 'w-4 h-4',
+    [IconSize.Md]: 'w-5 h-5',
+    [IconSize.Lg]: 'w-6 h-6',
+    [IconSize.Xl]: 'w-8 h-8', // 32px
+};
+//# sourceMappingURL=Icon.constants.mjs.map

package/dist/components/icon/Icon.constants.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.constants.mjs","sourceRoot":"","sources":["../../../src/components/icon/Icon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,yBAAqB;AAExC,MAAM,CAAC,MAAM,mBAAmB,GAA6B;IAC3D,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO;CAClC,CAAC","sourcesContent":["import { IconSize } from './Icon.types';\n\nexport const ICON_SIZE_CLASS_MAP: Record<IconSize, string> = {\n  [IconSize.Xs]: 'w-3 h-3', // 12px\n  [IconSize.Sm]: 'w-4 h-4', // 16px\n  [IconSize.Md]: 'w-5 h-5', // 20px\n  [IconSize.Lg]: 'w-6 h-6', // 24px\n  [IconSize.Xl]: 'w-8 h-8', // 32px\n};\n"]}

package/dist/components/icon/Icon.d.cts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { IconProps } from "./Icon.types.cjs";
+export declare const Icon: React.FC<IconProps>;
+//# sourceMappingURL=Icon.d.cts.map

package/dist/components/icon/Icon.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.cts","sourceRoot":"","sources":["../../../src/components/icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc;AAG1B,OAAO,KAAK,EAAE,SAAS,EAAE,yBAAqB;AAG9C,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA+BpC,CAAC"}

package/dist/components/icon/Icon.d.mts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { IconProps } from "./Icon.types.mjs";
+export declare const Icon: React.FC<IconProps>;
+//# sourceMappingURL=Icon.d.mts.map

package/dist/components/icon/Icon.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.mts","sourceRoot":"","sources":["../../../src/components/icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc;AAG1B,OAAO,KAAK,EAAE,SAAS,EAAE,yBAAqB;AAG9C,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA+BpC,CAAC"}

package/dist/components/icon/Icon.mjs

@@ -0,0 +1,21 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import $React from "react";
+const React = $importDefault($React);
+import { twMerge } from "../../utils/tw-merge.mjs";
+import { IconSize, IconColor } from "./Icon.types.mjs";
+import { ICON_SIZE_CLASS_MAP } from "./Icon.constants.mjs";
+export const Icon = ({ name, size = IconSize.Md, color = IconColor.IconDefault, className, style, ...props }) => {
+    if (!name) {
+        console.warn('Icon name is required');
+        return null;
+    }
+    const mergedClassName = twMerge('inline-block', ICON_SIZE_CLASS_MAP[size], color, className);
+    return (React.createElement("svg", { className: mergedClassName, ...props, style: style, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", fill: "currentColor" },
+        React.createElement("path", { d: "m337 51l-171 0c-75 0-119 45-119 119l0 172c0 74 44 119 119 119l171 0c75 0 119-45 119-119l0-172c1-74-44-119-119-119z m-3 220l-67 0 0 67c0 8-7 15-15 15-9 0-16-7-16-15l0-67-66 0c-9 0-16-7-16-15 0-8 7-15 16-15l66 0 0-67c0-8 7-15 16-15 8 0 15 7 15 15l0 67 67 0c8 0 15 7 15 15 0 8-7 15-15 15z" })));
+};
+//# sourceMappingURL=Icon.mjs.map

package/dist/components/icon/Icon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.mjs","sourceRoot":"","sources":["../../../src/components/icon/Icon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,MAAK,cAAc;;AAC1B,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,yBAAqB;AAEnD,OAAO,EAAE,mBAAmB,EAAE,6BAAyB;AAEvD,MAAM,CAAC,MAAM,IAAI,GAAwB,CAAC,EACxC,IAAI,EACJ,IAAI,GAAG,QAAQ,CAAC,EAAE,EAClB,KAAK,GAAG,SAAS,CAAC,WAAW,EAC7B,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;QACtC,OAAO,IAAI,CAAC;KACb;IACD,MAAM,eAAe,GAAG,OAAO,CAC7B,cAAc,EACd,mBAAmB,CAAC,IAAI,CAAC,EACzB,KAAK,EACL,SAAS,CACV,CAAC;IAEF,OAAO,CACL,6BACE,SAAS,EAAE,eAAe,KACrB,KAAuC,EAC5C,KAAK,EAAE,KAAK,EACZ,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,cAAc;QAEnB,8BAAM,CAAC,EAAC,+RAA+R,GAAG,CACtS,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { twMerge } from '../../utils/tw-merge';\nimport { IconSize, IconColor } from './Icon.types';\nimport type { IconProps } from './Icon.types';\nimport { ICON_SIZE_CLASS_MAP } from './Icon.constants';\n\nexport const Icon: React.FC<IconProps> = ({\n  name,\n  size = IconSize.Md,\n  color = IconColor.IconDefault,\n  className,\n  style,\n  ...props\n}) => {\n  if (!name) {\n    console.warn('Icon name is required');\n    return null;\n  }\n  const mergedClassName = twMerge(\n    'inline-block',\n    ICON_SIZE_CLASS_MAP[size],\n    color,\n    className,\n  );\n\n  return (\n    <svg\n      className={mergedClassName}\n      {...(props as React.SVGProps<SVGSVGElement>)}\n      style={style}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      viewBox=\"0 0 512 512\"\n      fill=\"currentColor\"\n    >\n      <path d=\"m337 51l-171 0c-75 0-119 45-119 119l0 172c0 74 44 119 119 119l171 0c75 0 119-45 119-119l0-172c1-74-44-119-119-119z m-3 220l-67 0 0 67c0 8-7 15-15 15-9 0-16-7-16-15l0-67-66 0c-9 0-16-7-16-15 0-8 7-15 16-15l66 0 0-67c0-8 7-15 16-15 8 0 15 7 15 15l0 67 67 0c8 0 15 7 15 15 0 8-7 15-15 15z\" />\n    </svg>\n  );\n};\n"]}

package/dist/components/icon/Icon.types.cjs

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconName = exports.IconColor = exports.IconSize = void 0;
+var IconSize;
+(function (IconSize) {
+    /** Extra small - 12px */
+    IconSize["Xs"] = "xs";
+    /** Small - 16px */
+    IconSize["Sm"] = "sm";
+    /** Medium - 20px (Default) */
+    IconSize["Md"] = "md";
+    /** Large - 24px */
+    IconSize["Lg"] = "lg";
+    /** Extra large - 32px */
+    IconSize["Xl"] = "xl";
+})(IconSize || (exports.IconSize = IconSize = {}));
+var IconColor;
+(function (IconColor) {
+    /** For default neutral icons */
+    IconColor["IconDefault"] = "text-icon-default";
+    /** For softer neutral icons */
+    IconColor["IconAlternative"] = "text-icon-alternative";
+    /** For the weakest contrast neutral icons (not accessible) */
+    IconColor["IconMuted"] = "text-icon-muted";
+    /** For elements used on top of overlay/alternative. Used for text, icon or border */
+    IconColor["OverlayInverse"] = "text-overlay-inverse";
+    /** For interactive, active, and selected semantics. Used for text, background, icon or border */
+    IconColor["PrimaryDefault"] = "text-primary-default";
+    /** For elements used on top of primary/default. Used for text, icon or border */
+    IconColor["PrimaryInverse"] = "text-primary-inverse";
+    /** For the critical alert semantic elements. Used for text, background, icon or border */
+    IconColor["ErrorDefault"] = "text-error-default";
+    /** For elements used on top of error/default. Used for text, icon or border */
+    IconColor["ErrorInverse"] = "text-error-inverse";
+    /** For the positive semantic elements. Used for text, background, icon or border */
+    IconColor["SuccessDefault"] = "text-success-default";
+    /** For elements used on top of success/default. Used for text, icon or border */
+    IconColor["SuccessInverse"] = "text-success-inverse";
+    /** For the caution alert semantic elements. Used for text, background, icon or border */
+    IconColor["WarningDefault"] = "text-warning-default";
+    /** For elements used on top of warning/default. Used for text, icon or border */
+    IconColor["WarningInverse"] = "text-warning-inverse";
+    /** For informational read-only elements. Used for text, background, icon or border */
+    IconColor["InfoDefault"] = "text-info-default";
+    /** For elements used on top of info/default. Used for text, icon or border */
+    IconColor["InfoInverse"] = "text-info-inverse";
+})(IconColor || (exports.IconColor = IconColor = {}));
+// TODO: Add more icons see draft PR https://github.com/MetaMask/metamask-design-system/pull/199
+var IconName;
+(function (IconName) {
+    IconName["AddSquare"] = "AddSquare";
+})(IconName || (exports.IconName = IconName = {}));
+//# sourceMappingURL=Icon.types.cjs.map

package/dist/components/icon/Icon.types.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.types.cjs","sourceRoot":"","sources":["../../../src/components/icon/Icon.types.ts"],"names":[],"mappings":";;;AAuBA,IAAY,QAWX;AAXD,WAAY,QAAQ;IAClB,yBAAyB;IACzB,qBAAS,CAAA;IACT,mBAAmB;IACnB,qBAAS,CAAA;IACT,8BAA8B;IAC9B,qBAAS,CAAA;IACT,mBAAmB;IACnB,qBAAS,CAAA;IACT,yBAAyB;IACzB,qBAAS,CAAA;AACX,CAAC,EAXW,QAAQ,wBAAR,QAAQ,QAWnB;AAED,IAAY,SA6BX;AA7BD,WAAY,SAAS;IACnB,gCAAgC;IAChC,8CAAiC,CAAA;IACjC,+BAA+B;IAC/B,sDAAyC,CAAA;IACzC,8DAA8D;IAC9D,0CAA6B,CAAA;IAC7B,qFAAqF;IACrF,oDAAuC,CAAA;IACvC,iGAAiG;IACjG,oDAAuC,CAAA;IACvC,iFAAiF;IACjF,oDAAuC,CAAA;IACvC,0FAA0F;IAC1F,gDAAmC,CAAA;IACnC,+EAA+E;IAC/E,gDAAmC,CAAA;IACnC,oFAAoF;IACpF,oDAAuC,CAAA;IACvC,iFAAiF;IACjF,oDAAuC,CAAA;IACvC,yFAAyF;IACzF,oDAAuC,CAAA;IACvC,iFAAiF;IACjF,oDAAuC,CAAA;IACvC,sFAAsF;IACtF,8CAAiC,CAAA;IACjC,8EAA8E;IAC9E,8CAAiC,CAAA;AACnC,CAAC,EA7BW,SAAS,yBAAT,SAAS,QA6BpB;AAED,gGAAgG;AAChG,IAAY,QAEX;AAFD,WAAY,QAAQ;IAClB,mCAAuB,CAAA;AACzB,CAAC,EAFW,QAAQ,wBAAR,QAAQ,QAEnB","sourcesContent":["import type { SVGProps, ComponentPropsWithoutRef } from 'react';\n\n// Use ComponentPropsWithoutRef to get SVG element props without relying on global SVGElement\ntype SVGElementProps = ComponentPropsWithoutRef<'svg'>;\n\nexport type IconProps = SVGProps<SVGElementProps> & {\n  /**\n   * Required prop to specify which icon to render from the icon set\n   */\n  name: IconName;\n  /**\n   * Optional prop to control the size of the icon\n   * Different sizes map to specific pixel dimensions\n   * @default IconSize.Md\n   */\n  size?: IconSize;\n  /**\n   * Optional prop that sets the color of the icon using predefined theme colors\n   * @default IconColor.IconDefault\n   */\n  color?: IconColor;\n};\n\nexport enum IconSize {\n  /** Extra small - 12px */\n  Xs = 'xs',\n  /** Small - 16px */\n  Sm = 'sm',\n  /** Medium - 20px (Default) */\n  Md = 'md',\n  /** Large - 24px */\n  Lg = 'lg',\n  /** Extra large - 32px */\n  Xl = 'xl',\n}\n\nexport enum IconColor {\n  /** For default neutral icons */\n  IconDefault = 'text-icon-default',\n  /** For softer neutral icons */\n  IconAlternative = 'text-icon-alternative',\n  /** For the weakest contrast neutral icons (not accessible) */\n  IconMuted = 'text-icon-muted',\n  /** For elements used on top of overlay/alternative. Used for text, icon or border */\n  OverlayInverse = 'text-overlay-inverse',\n  /** For interactive, active, and selected semantics. Used for text, background, icon or border */\n  PrimaryDefault = 'text-primary-default',\n  /** For elements used on top of primary/default. Used for text, icon or border */\n  PrimaryInverse = 'text-primary-inverse',\n  /** For the critical alert semantic elements. Used for text, background, icon or border */\n  ErrorDefault = 'text-error-default',\n  /** For elements used on top of error/default. Used for text, icon or border */\n  ErrorInverse = 'text-error-inverse',\n  /** For the positive semantic elements. Used for text, background, icon or border */\n  SuccessDefault = 'text-success-default',\n  /** For elements used on top of success/default. Used for text, icon or border */\n  SuccessInverse = 'text-success-inverse',\n  /** For the caution alert semantic elements. Used for text, background, icon or border */\n  WarningDefault = 'text-warning-default',\n  /** For elements used on top of warning/default. Used for text, icon or border */\n  WarningInverse = 'text-warning-inverse',\n  /** For informational read-only elements. Used for text, background, icon or border */\n  InfoDefault = 'text-info-default',\n  /** For elements used on top of info/default. Used for text, icon or border */\n  InfoInverse = 'text-info-inverse',\n}\n\n// TODO: Add more icons see draft PR https://github.com/MetaMask/metamask-design-system/pull/199\nexport enum IconName {\n  AddSquare = 'AddSquare',\n}\n"]}

package/dist/components/icon/Icon.types.d.cts

@@ -0,0 +1,66 @@
+import type { SVGProps, ComponentPropsWithoutRef } from "react";
+type SVGElementProps = ComponentPropsWithoutRef<'svg'>;
+export type IconProps = SVGProps<SVGElementProps> & {
+    /**
+     * Required prop to specify which icon to render from the icon set
+     */
+    name: IconName;
+    /**
+     * Optional prop to control the size of the icon
+     * Different sizes map to specific pixel dimensions
+     * @default IconSize.Md
+     */
+    size?: IconSize;
+    /**
+     * Optional prop that sets the color of the icon using predefined theme colors
+     * @default IconColor.IconDefault
+     */
+    color?: IconColor;
+};
+export declare enum IconSize {
+    /** Extra small - 12px */
+    Xs = "xs",
+    /** Small - 16px */
+    Sm = "sm",
+    /** Medium - 20px (Default) */
+    Md = "md",
+    /** Large - 24px */
+    Lg = "lg",
+    /** Extra large - 32px */
+    Xl = "xl"
+}
+export declare enum IconColor {
+    /** For default neutral icons */
+    IconDefault = "text-icon-default",
+    /** For softer neutral icons */
+    IconAlternative = "text-icon-alternative",
+    /** For the weakest contrast neutral icons (not accessible) */
+    IconMuted = "text-icon-muted",
+    /** For elements used on top of overlay/alternative. Used for text, icon or border */
+    OverlayInverse = "text-overlay-inverse",
+    /** For interactive, active, and selected semantics. Used for text, background, icon or border */
+    PrimaryDefault = "text-primary-default",
+    /** For elements used on top of primary/default. Used for text, icon or border */
+    PrimaryInverse = "text-primary-inverse",
+    /** For the critical alert semantic elements. Used for text, background, icon or border */
+    ErrorDefault = "text-error-default",
+    /** For elements used on top of error/default. Used for text, icon or border */
+    ErrorInverse = "text-error-inverse",
+    /** For the positive semantic elements. Used for text, background, icon or border */
+    SuccessDefault = "text-success-default",
+    /** For elements used on top of success/default. Used for text, icon or border */
+    SuccessInverse = "text-success-inverse",
+    /** For the caution alert semantic elements. Used for text, background, icon or border */
+    WarningDefault = "text-warning-default",
+    /** For elements used on top of warning/default. Used for text, icon or border */
+    WarningInverse = "text-warning-inverse",
+    /** For informational read-only elements. Used for text, background, icon or border */
+    InfoDefault = "text-info-default",
+    /** For elements used on top of info/default. Used for text, icon or border */
+    InfoInverse = "text-info-inverse"
+}
+export declare enum IconName {
+    AddSquare = "AddSquare"
+}
+export {};
+//# sourceMappingURL=Icon.types.d.cts.map

package/dist/components/icon/Icon.types.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.types.d.cts","sourceRoot":"","sources":["../../../src/components/icon/Icon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,wBAAwB,EAAE,cAAc;AAGhE,KAAK,eAAe,GAAG,wBAAwB,CAAC,KAAK,CAAC,CAAC;AAEvD,MAAM,MAAM,SAAS,GAAG,QAAQ,CAAC,eAAe,CAAC,GAAG;IAClD;;OAEG;IACH,IAAI,EAAE,QAAQ,CAAC;IACf;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,oBAAY,QAAQ;IAClB,yBAAyB;IACzB,EAAE,OAAO;IACT,mBAAmB;IACnB,EAAE,OAAO;IACT,8BAA8B;IAC9B,EAAE,OAAO;IACT,mBAAmB;IACnB,EAAE,OAAO;IACT,yBAAyB;IACzB,EAAE,OAAO;CACV;AAED,oBAAY,SAAS;IACnB,gCAAgC;IAChC,WAAW,sBAAsB;IACjC,+BAA+B;IAC/B,eAAe,0BAA0B;IACzC,8DAA8D;IAC9D,SAAS,oBAAoB;IAC7B,qFAAqF;IACrF,cAAc,yBAAyB;IACvC,iGAAiG;IACjG,cAAc,yBAAyB;IACvC,iFAAiF;IACjF,cAAc,yBAAyB;IACvC,0FAA0F;IAC1F,YAAY,uBAAuB;IACnC,+EAA+E;IAC/E,YAAY,uBAAuB;IACnC,oFAAoF;IACpF,cAAc,yBAAyB;IACvC,iFAAiF;IACjF,cAAc,yBAAyB;IACvC,yFAAyF;IACzF,cAAc,yBAAyB;IACvC,iFAAiF;IACjF,cAAc,yBAAyB;IACvC,sFAAsF;IACtF,WAAW,sBAAsB;IACjC,8EAA8E;IAC9E,WAAW,sBAAsB;CAClC;AAGD,oBAAY,QAAQ;IAClB,SAAS,cAAc;CACxB"}

package/dist/components/icon/Icon.types.d.mts

@@ -0,0 +1,66 @@
+import type { SVGProps, ComponentPropsWithoutRef } from "react";
+type SVGElementProps = ComponentPropsWithoutRef<'svg'>;
+export type IconProps = SVGProps<SVGElementProps> & {
+    /**
+     * Required prop to specify which icon to render from the icon set
+     */
+    name: IconName;
+    /**
+     * Optional prop to control the size of the icon
+     * Different sizes map to specific pixel dimensions
+     * @default IconSize.Md
+     */
+    size?: IconSize;
+    /**
+     * Optional prop that sets the color of the icon using predefined theme colors
+     * @default IconColor.IconDefault
+     */
+    color?: IconColor;
+};
+export declare enum IconSize {
+    /** Extra small - 12px */
+    Xs = "xs",
+    /** Small - 16px */
+    Sm = "sm",
+    /** Medium - 20px (Default) */
+    Md = "md",
+    /** Large - 24px */
+    Lg = "lg",
+    /** Extra large - 32px */
+    Xl = "xl"
+}
+export declare enum IconColor {
+    /** For default neutral icons */
+    IconDefault = "text-icon-default",
+    /** For softer neutral icons */
+    IconAlternative = "text-icon-alternative",
+    /** For the weakest contrast neutral icons (not accessible) */
+    IconMuted = "text-icon-muted",
+    /** For elements used on top of overlay/alternative. Used for text, icon or border */
+    OverlayInverse = "text-overlay-inverse",
+    /** For interactive, active, and selected semantics. Used for text, background, icon or border */
+    PrimaryDefault = "text-primary-default",
+    /** For elements used on top of primary/default. Used for text, icon or border */
+    PrimaryInverse = "text-primary-inverse",
+    /** For the critical alert semantic elements. Used for text, background, icon or border */
+    ErrorDefault = "text-error-default",
+    /** For elements used on top of error/default. Used for text, icon or border */
+    ErrorInverse = "text-error-inverse",
+    /** For the positive semantic elements. Used for text, background, icon or border */
+    SuccessDefault = "text-success-default",
+    /** For elements used on top of success/default. Used for text, icon or border */
+    SuccessInverse = "text-success-inverse",
+    /** For the caution alert semantic elements. Used for text, background, icon or border */
+    WarningDefault = "text-warning-default",
+    /** For elements used on top of warning/default. Used for text, icon or border */
+    WarningInverse = "text-warning-inverse",
+    /** For informational read-only elements. Used for text, background, icon or border */
+    InfoDefault = "text-info-default",
+    /** For elements used on top of info/default. Used for text, icon or border */
+    InfoInverse = "text-info-inverse"
+}
+export declare enum IconName {
+    AddSquare = "AddSquare"
+}
+export {};
+//# sourceMappingURL=Icon.types.d.mts.map

package/dist/components/icon/Icon.types.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.types.d.mts","sourceRoot":"","sources":["../../../src/components/icon/Icon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,wBAAwB,EAAE,cAAc;AAGhE,KAAK,eAAe,GAAG,wBAAwB,CAAC,KAAK,CAAC,CAAC;AAEvD,MAAM,MAAM,SAAS,GAAG,QAAQ,CAAC,eAAe,CAAC,GAAG;IAClD;;OAEG;IACH,IAAI,EAAE,QAAQ,CAAC;IACf;;;;OAIG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,CAAC;AAEF,oBAAY,QAAQ;IAClB,yBAAyB;IACzB,EAAE,OAAO;IACT,mBAAmB;IACnB,EAAE,OAAO;IACT,8BAA8B;IAC9B,EAAE,OAAO;IACT,mBAAmB;IACnB,EAAE,OAAO;IACT,yBAAyB;IACzB,EAAE,OAAO;CACV;AAED,oBAAY,SAAS;IACnB,gCAAgC;IAChC,WAAW,sBAAsB;IACjC,+BAA+B;IAC/B,eAAe,0BAA0B;IACzC,8DAA8D;IAC9D,SAAS,oBAAoB;IAC7B,qFAAqF;IACrF,cAAc,yBAAyB;IACvC,iGAAiG;IACjG,cAAc,yBAAyB;IACvC,iFAAiF;IACjF,cAAc,yBAAyB;IACvC,0FAA0F;IAC1F,YAAY,uBAAuB;IACnC,+EAA+E;IAC/E,YAAY,uBAAuB;IACnC,oFAAoF;IACpF,cAAc,yBAAyB;IACvC,iFAAiF;IACjF,cAAc,yBAAyB;IACvC,yFAAyF;IACzF,cAAc,yBAAyB;IACvC,iFAAiF;IACjF,cAAc,yBAAyB;IACvC,sFAAsF;IACtF,WAAW,sBAAsB;IACjC,8EAA8E;IAC9E,WAAW,sBAAsB;CAClC;AAGD,oBAAY,QAAQ;IAClB,SAAS,cAAc;CACxB"}

package/dist/components/icon/Icon.types.mjs

@@ -0,0 +1,50 @@
+export var IconSize;
+(function (IconSize) {
+    /** Extra small - 12px */
+    IconSize["Xs"] = "xs";
+    /** Small - 16px */
+    IconSize["Sm"] = "sm";
+    /** Medium - 20px (Default) */
+    IconSize["Md"] = "md";
+    /** Large - 24px */
+    IconSize["Lg"] = "lg";
+    /** Extra large - 32px */
+    IconSize["Xl"] = "xl";
+})(IconSize || (IconSize = {}));
+export var IconColor;
+(function (IconColor) {
+    /** For default neutral icons */
+    IconColor["IconDefault"] = "text-icon-default";
+    /** For softer neutral icons */
+    IconColor["IconAlternative"] = "text-icon-alternative";
+    /** For the weakest contrast neutral icons (not accessible) */
+    IconColor["IconMuted"] = "text-icon-muted";
+    /** For elements used on top of overlay/alternative. Used for text, icon or border */
+    IconColor["OverlayInverse"] = "text-overlay-inverse";
+    /** For interactive, active, and selected semantics. Used for text, background, icon or border */
+    IconColor["PrimaryDefault"] = "text-primary-default";
+    /** For elements used on top of primary/default. Used for text, icon or border */
+    IconColor["PrimaryInverse"] = "text-primary-inverse";
+    /** For the critical alert semantic elements. Used for text, background, icon or border */
+    IconColor["ErrorDefault"] = "text-error-default";
+    /** For elements used on top of error/default. Used for text, icon or border */
+    IconColor["ErrorInverse"] = "text-error-inverse";
+    /** For the positive semantic elements. Used for text, background, icon or border */
+    IconColor["SuccessDefault"] = "text-success-default";
+    /** For elements used on top of success/default. Used for text, icon or border */
+    IconColor["SuccessInverse"] = "text-success-inverse";
+    /** For the caution alert semantic elements. Used for text, background, icon or border */
+    IconColor["WarningDefault"] = "text-warning-default";
+    /** For elements used on top of warning/default. Used for text, icon or border */
+    IconColor["WarningInverse"] = "text-warning-inverse";
+    /** For informational read-only elements. Used for text, background, icon or border */
+    IconColor["InfoDefault"] = "text-info-default";
+    /** For elements used on top of info/default. Used for text, icon or border */
+    IconColor["InfoInverse"] = "text-info-inverse";
+})(IconColor || (IconColor = {}));
+// TODO: Add more icons see draft PR https://github.com/MetaMask/metamask-design-system/pull/199
+export var IconName;
+(function (IconName) {
+    IconName["AddSquare"] = "AddSquare";
+})(IconName || (IconName = {}));
+//# sourceMappingURL=Icon.types.mjs.map

package/dist/components/icon/Icon.types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.types.mjs","sourceRoot":"","sources":["../../../src/components/icon/Icon.types.ts"],"names":[],"mappings":"AAuBA,MAAM,CAAN,IAAY,QAWX;AAXD,WAAY,QAAQ;IAClB,yBAAyB;IACzB,qBAAS,CAAA;IACT,mBAAmB;IACnB,qBAAS,CAAA;IACT,8BAA8B;IAC9B,qBAAS,CAAA;IACT,mBAAmB;IACnB,qBAAS,CAAA;IACT,yBAAyB;IACzB,qBAAS,CAAA;AACX,CAAC,EAXW,QAAQ,KAAR,QAAQ,QAWnB;AAED,MAAM,CAAN,IAAY,SA6BX;AA7BD,WAAY,SAAS;IACnB,gCAAgC;IAChC,8CAAiC,CAAA;IACjC,+BAA+B;IAC/B,sDAAyC,CAAA;IACzC,8DAA8D;IAC9D,0CAA6B,CAAA;IAC7B,qFAAqF;IACrF,oDAAuC,CAAA;IACvC,iGAAiG;IACjG,oDAAuC,CAAA;IACvC,iFAAiF;IACjF,oDAAuC,CAAA;IACvC,0FAA0F;IAC1F,gDAAmC,CAAA;IACnC,+EAA+E;IAC/E,gDAAmC,CAAA;IACnC,oFAAoF;IACpF,oDAAuC,CAAA;IACvC,iFAAiF;IACjF,oDAAuC,CAAA;IACvC,yFAAyF;IACzF,oDAAuC,CAAA;IACvC,iFAAiF;IACjF,oDAAuC,CAAA;IACvC,sFAAsF;IACtF,8CAAiC,CAAA;IACjC,8EAA8E;IAC9E,8CAAiC,CAAA;AACnC,CAAC,EA7BW,SAAS,KAAT,SAAS,QA6BpB;AAED,gGAAgG;AAChG,MAAM,CAAN,IAAY,QAEX;AAFD,WAAY,QAAQ;IAClB,mCAAuB,CAAA;AACzB,CAAC,EAFW,QAAQ,KAAR,QAAQ,QAEnB","sourcesContent":["import type { SVGProps, ComponentPropsWithoutRef } from 'react';\n\n// Use ComponentPropsWithoutRef to get SVG element props without relying on global SVGElement\ntype SVGElementProps = ComponentPropsWithoutRef<'svg'>;\n\nexport type IconProps = SVGProps<SVGElementProps> & {\n  /**\n   * Required prop to specify which icon to render from the icon set\n   */\n  name: IconName;\n  /**\n   * Optional prop to control the size of the icon\n   * Different sizes map to specific pixel dimensions\n   * @default IconSize.Md\n   */\n  size?: IconSize;\n  /**\n   * Optional prop that sets the color of the icon using predefined theme colors\n   * @default IconColor.IconDefault\n   */\n  color?: IconColor;\n};\n\nexport enum IconSize {\n  /** Extra small - 12px */\n  Xs = 'xs',\n  /** Small - 16px */\n  Sm = 'sm',\n  /** Medium - 20px (Default) */\n  Md = 'md',\n  /** Large - 24px */\n  Lg = 'lg',\n  /** Extra large - 32px */\n  Xl = 'xl',\n}\n\nexport enum IconColor {\n  /** For default neutral icons */\n  IconDefault = 'text-icon-default',\n  /** For softer neutral icons */\n  IconAlternative = 'text-icon-alternative',\n  /** For the weakest contrast neutral icons (not accessible) */\n  IconMuted = 'text-icon-muted',\n  /** For elements used on top of overlay/alternative. Used for text, icon or border */\n  OverlayInverse = 'text-overlay-inverse',\n  /** For interactive, active, and selected semantics. Used for text, background, icon or border */\n  PrimaryDefault = 'text-primary-default',\n  /** For elements used on top of primary/default. Used for text, icon or border */\n  PrimaryInverse = 'text-primary-inverse',\n  /** For the critical alert semantic elements. Used for text, background, icon or border */\n  ErrorDefault = 'text-error-default',\n  /** For elements used on top of error/default. Used for text, icon or border */\n  ErrorInverse = 'text-error-inverse',\n  /** For the positive semantic elements. Used for text, background, icon or border */\n  SuccessDefault = 'text-success-default',\n  /** For elements used on top of success/default. Used for text, icon or border */\n  SuccessInverse = 'text-success-inverse',\n  /** For the caution alert semantic elements. Used for text, background, icon or border */\n  WarningDefault = 'text-warning-default',\n  /** For elements used on top of warning/default. Used for text, icon or border */\n  WarningInverse = 'text-warning-inverse',\n  /** For informational read-only elements. Used for text, background, icon or border */\n  InfoDefault = 'text-info-default',\n  /** For elements used on top of info/default. Used for text, icon or border */\n  InfoInverse = 'text-info-inverse',\n}\n\n// TODO: Add more icons see draft PR https://github.com/MetaMask/metamask-design-system/pull/199\nexport enum IconName {\n  AddSquare = 'AddSquare',\n}\n"]}

package/dist/components/icon/index.cjs

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconColor = exports.IconSize = exports.IconName = exports.Icon = void 0;
+var Icon_1 = require("./Icon.cjs");
+Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return Icon_1.Icon; } });
+var Icon_types_1 = require("./Icon.types.cjs");
+Object.defineProperty(exports, "IconName", { enumerable: true, get: function () { return Icon_types_1.IconName; } });
+Object.defineProperty(exports, "IconSize", { enumerable: true, get: function () { return Icon_types_1.IconSize; } });
+Object.defineProperty(exports, "IconColor", { enumerable: true, get: function () { return Icon_types_1.IconColor; } });
+//# sourceMappingURL=index.cjs.map

package/dist/components/icon/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/icon/index.ts"],"names":[],"mappings":";;;AAAA,mCAA8B;AAArB,4FAAA,IAAI,OAAA;AACb,+CAA6D;AAApD,sGAAA,QAAQ,OAAA;AAAE,sGAAA,QAAQ,OAAA;AAAE,uGAAA,SAAS,OAAA","sourcesContent":["export { Icon } from './Icon';\nexport { IconName, IconSize, IconColor } from './Icon.types';\nexport type { IconProps } from './Icon.types';\n"]}

package/dist/components/icon/index.d.cts

@@ -0,0 +1,4 @@
+export { Icon } from "./Icon.cjs";
+export { IconName, IconSize, IconColor } from "./Icon.types.cjs";
+export type { IconProps } from "./Icon.types.cjs";
+//# sourceMappingURL=index.d.cts.map

package/dist/components/icon/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,mBAAe;AAC9B,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,yBAAqB;AAC7D,YAAY,EAAE,SAAS,EAAE,yBAAqB"}

package/dist/components/icon/index.d.mts

@@ -0,0 +1,4 @@
+export { Icon } from "./Icon.mjs";
+export { IconName, IconSize, IconColor } from "./Icon.types.mjs";
+export type { IconProps } from "./Icon.types.mjs";
+//# sourceMappingURL=index.d.mts.map

package/dist/components/icon/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,mBAAe;AAC9B,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,yBAAqB;AAC7D,YAAY,EAAE,SAAS,EAAE,yBAAqB"}

package/dist/components/icon/index.mjs

@@ -0,0 +1,3 @@
+export { Icon } from "./Icon.mjs";
+export { IconName, IconSize, IconColor } from "./Icon.types.mjs";
+//# sourceMappingURL=index.mjs.map

package/dist/components/icon/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,mBAAe;AAC9B,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,yBAAqB","sourcesContent":["export { Icon } from './Icon';\nexport { IconName, IconSize, IconColor } from './Icon.types';\nexport type { IconProps } from './Icon.types';\n"]}

package/dist/components/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Button = exports.OverflowWrap = exports.TextTransform = exports.FontStyle = exports.FontWeight = exports.TextAlign = exports.TextColor = exports.TextVariant = exports.Text = void 0;
+exports.IconColor = exports.IconSize = exports.IconName = exports.Icon = exports.Button = exports.OverflowWrap = exports.TextTransform = exports.FontStyle = exports.FontWeight = exports.TextAlign = exports.TextColor = exports.TextVariant = exports.Text = void 0;
 var text_1 = require("./text/index.cjs");
 Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return text_1.Text; } });
 var text_2 = require("./text/index.cjs");
@@ -13,4 +13,10 @@ Object.defineProperty(exports, "TextTransform", { enumerable: true, get: functio
 Object.defineProperty(exports, "OverflowWrap", { enumerable: true, get: function () { return text_2.OverflowWrap; } });
 var button_1 = require("./button/index.cjs");
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return button_1.Button; } });
+var icon_1 = require("./icon/index.cjs");
+Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return icon_1.Icon; } });
+var icon_2 = require("./icon/index.cjs");
+Object.defineProperty(exports, "IconName", { enumerable: true, get: function () { return icon_2.IconName; } });
+Object.defineProperty(exports, "IconSize", { enumerable: true, get: function () { return icon_2.IconSize; } });
+Object.defineProperty(exports, "IconColor", { enumerable: true, get: function () { return icon_2.IconColor; } });
 //# sourceMappingURL=index.cjs.map

package/dist/components/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":";;;AAAA,yCAA8B;AAArB,4FAAA,IAAI,OAAA;AACb,yCAQgB;AAPd,mGAAA,WAAW,OAAA;AACX,iGAAA,SAAS,OAAA;AACT,iGAAA,SAAS,OAAA;AACT,kGAAA,UAAU,OAAA;AACV,iGAAA,SAAS,OAAA;AACT,qGAAA,aAAa,OAAA;AACb,oGAAA,YAAY,OAAA;AAId,6CAAkC;AAAzB,gGAAA,MAAM,OAAA","sourcesContent":["export { Text } from './text';\nexport {\n  TextVariant,\n  TextColor,\n  TextAlign,\n  FontWeight,\n  FontStyle,\n  TextTransform,\n  OverflowWrap,\n} from './text';\nexport type { TextProps } from './text';\n\nexport { Button } from './button';\nexport type { ButtonProps } from './button';\n"]}
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":";;;AAAA,yCAA8B;AAArB,4FAAA,IAAI,OAAA;AACb,yCAQgB;AAPd,mGAAA,WAAW,OAAA;AACX,iGAAA,SAAS,OAAA;AACT,iGAAA,SAAS,OAAA;AACT,kGAAA,UAAU,OAAA;AACV,iGAAA,SAAS,OAAA;AACT,qGAAA,aAAa,OAAA;AACb,oGAAA,YAAY,OAAA;AAId,6CAAkC;AAAzB,gGAAA,MAAM,OAAA;AAGf,yCAA8B;AAArB,4FAAA,IAAI,OAAA;AACb,yCAAuD;AAA9C,gGAAA,QAAQ,OAAA;AAAE,gGAAA,QAAQ,OAAA;AAAE,iGAAA,SAAS,OAAA","sourcesContent":["export { Text } from './text';\nexport {\n  TextVariant,\n  TextColor,\n  TextAlign,\n  FontWeight,\n  FontStyle,\n  TextTransform,\n  OverflowWrap,\n} from './text';\nexport type { TextProps } from './text';\n\nexport { Button } from './button';\nexport type { ButtonProps } from './button';\n\nexport { Icon } from './icon';\nexport { IconName, IconSize, IconColor } from './icon';\nexport type { IconProps } from './icon';\n"]}

package/dist/components/index.d.cts

@@ -3,4 +3,7 @@ export { TextVariant, TextColor, TextAlign, FontWeight, FontStyle, TextTransform
 export type { TextProps } from "./text/index.cjs";
 export { Button } from "./button/index.cjs";
 export type { ButtonProps } from "./button/index.cjs";
+export { Icon } from "./icon/index.cjs";
+export { IconName, IconSize, IconColor } from "./icon/index.cjs";
+export type { IconProps } from "./icon/index.cjs";
 //# sourceMappingURL=index.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,yBAAe;AAC9B,OAAO,EACL,WAAW,EACX,SAAS,EACT,SAAS,EACT,UAAU,EACV,SAAS,EACT,aAAa,EACb,YAAY,GACb,yBAAe;AAChB,YAAY,EAAE,SAAS,EAAE,yBAAe;AAExC,OAAO,EAAE,MAAM,EAAE,2BAAiB;AAClC,YAAY,EAAE,WAAW,EAAE,2BAAiB"}
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,yBAAe;AAC9B,OAAO,EACL,WAAW,EACX,SAAS,EACT,SAAS,EACT,UAAU,EACV,SAAS,EACT,aAAa,EACb,YAAY,GACb,yBAAe;AAChB,YAAY,EAAE,SAAS,EAAE,yBAAe;AAExC,OAAO,EAAE,MAAM,EAAE,2BAAiB;AAClC,YAAY,EAAE,WAAW,EAAE,2BAAiB;AAE5C,OAAO,EAAE,IAAI,EAAE,yBAAe;AAC9B,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,yBAAe;AACvD,YAAY,EAAE,SAAS,EAAE,yBAAe"}

package/dist/components/index.d.mts

@@ -3,4 +3,7 @@ export { TextVariant, TextColor, TextAlign, FontWeight, FontStyle, TextTransform
 export type { TextProps } from "./text/index.mjs";
 export { Button } from "./button/index.mjs";
 export type { ButtonProps } from "./button/index.mjs";
+export { Icon } from "./icon/index.mjs";
+export { IconName, IconSize, IconColor } from "./icon/index.mjs";
+export type { IconProps } from "./icon/index.mjs";
 //# sourceMappingURL=index.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,yBAAe;AAC9B,OAAO,EACL,WAAW,EACX,SAAS,EACT,SAAS,EACT,UAAU,EACV,SAAS,EACT,aAAa,EACb,YAAY,GACb,yBAAe;AAChB,YAAY,EAAE,SAAS,EAAE,yBAAe;AAExC,OAAO,EAAE,MAAM,EAAE,2BAAiB;AAClC,YAAY,EAAE,WAAW,EAAE,2BAAiB"}
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,yBAAe;AAC9B,OAAO,EACL,WAAW,EACX,SAAS,EACT,SAAS,EACT,UAAU,EACV,SAAS,EACT,aAAa,EACb,YAAY,GACb,yBAAe;AAChB,YAAY,EAAE,SAAS,EAAE,yBAAe;AAExC,OAAO,EAAE,MAAM,EAAE,2BAAiB;AAClC,YAAY,EAAE,WAAW,EAAE,2BAAiB;AAE5C,OAAO,EAAE,IAAI,EAAE,yBAAe;AAC9B,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,yBAAe;AACvD,YAAY,EAAE,SAAS,EAAE,yBAAe"}

package/dist/components/index.mjs

@@ -1,4 +1,6 @@
 export { Text } from "./text/index.mjs";
 export { TextVariant, TextColor, TextAlign, FontWeight, FontStyle, TextTransform, OverflowWrap } from "./text/index.mjs";
 export { Button } from "./button/index.mjs";
+export { Icon } from "./icon/index.mjs";
+export { IconName, IconSize, IconColor } from "./icon/index.mjs";
 //# sourceMappingURL=index.mjs.map

package/dist/components/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,yBAAe;AAC9B,OAAO,EACL,WAAW,EACX,SAAS,EACT,SAAS,EACT,UAAU,EACV,SAAS,EACT,aAAa,EACb,YAAY,EACb,yBAAe;AAGhB,OAAO,EAAE,MAAM,EAAE,2BAAiB","sourcesContent":["export { Text } from './text';\nexport {\n  TextVariant,\n  TextColor,\n  TextAlign,\n  FontWeight,\n  FontStyle,\n  TextTransform,\n  OverflowWrap,\n} from './text';\nexport type { TextProps } from './text';\n\nexport { Button } from './button';\nexport type { ButtonProps } from './button';\n"]}
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,yBAAe;AAC9B,OAAO,EACL,WAAW,EACX,SAAS,EACT,SAAS,EACT,UAAU,EACV,SAAS,EACT,aAAa,EACb,YAAY,EACb,yBAAe;AAGhB,OAAO,EAAE,MAAM,EAAE,2BAAiB;AAGlC,OAAO,EAAE,IAAI,EAAE,yBAAe;AAC9B,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,yBAAe","sourcesContent":["export { Text } from './text';\nexport {\n  TextVariant,\n  TextColor,\n  TextAlign,\n  FontWeight,\n  FontStyle,\n  TextTransform,\n  OverflowWrap,\n} from './text';\nexport type { TextProps } from './text';\n\nexport { Button } from './button';\nexport type { ButtonProps } from './button';\n\nexport { Icon } from './icon';\nexport { IconName, IconSize, IconColor } from './icon';\nexport type { IconProps } from './icon';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metamask-previews/design-system-react",
-  "version": "0.0.0-preview.04cb60f",
+  "version": "0.0.0-preview.31cc4ac",
   "description": "Design system react ui components",
   "keywords": [
     "MetaMask",
@@ -50,7 +50,7 @@
     "tailwind-merge": "^2.0.0"
   },
   "devDependencies": {
-    "@metamask-previews/design-system-tailwind-preset": "0.0.0-preview.04cb60f",
+    "@metamask-previews/design-system-tailwind-preset": "0.0.0-preview.31cc4ac",
     "@metamask/auto-changelog": "^3.4.4",
     "@storybook/react": "^8.3.5",
     "@storybook/test": "^8.3.5",