@metamask/design-system-react 0.17.1 → 0.19.0

package/dist/components/Box/Box.types.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Box.types.d.mts","sourceRoot":"","sources":["../../../src/components/Box/Box.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EACV,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,cAAc,EACd,aAAa,EACb,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,EACf,8BAAoB;AAErB,MAAM,MAAM,QAAQ,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC7C;;OAEG;IACH,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB;;;OAGG;IACH,GAAG,CAAC,EAAE,UAAU,CAAC;IACjB;;OAEG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,iBAAiB,CAAC;IACnC;;;OAGG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB;;;OAGG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAC9B;;;OAGG;IACH,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B;;;OAGG;IACH,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC/B;;;OAGG;IACH,eAAe,CAAC,EAAE,UAAU,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B;;OAEG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B;;OAEG;IACH,eAAe,CAAC,EAAE,kBAAkB,CAAC;IACrC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC"}
+{"version":3,"file":"Box.types.d.mts","sourceRoot":"","sources":["../../../src/components/Box/Box.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,uCAAuC;AACrE,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,MAAM,MAAM,QAAQ,GAAG,cAAc,CAAC,KAAK,CAAC,GAC1C,cAAc,GAAG;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC"}

package/dist/components/Box/Box.types.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Box.types.mjs","sourceRoot":"","sources":["../../../src/components/Box/Box.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type {\n  BoxFlexDirection,\n  BoxFlexWrap,\n  BoxSpacing,\n  BoxBorderWidth,\n  BoxAlignItems,\n  BoxJustifyContent,\n  BoxBackgroundColor,\n  BoxBorderColor,\n} from '../../types';\n\nexport type BoxProps = ComponentProps<'div'> & {\n  /**\n   * The flex-direction style of the component.\n   */\n  flexDirection?: BoxFlexDirection;\n  /**\n   * The flex-wrap style of the component.\n   */\n  flexWrap?: BoxFlexWrap;\n  /**\n   * The gap between the component's children.\n   * Use 0-12 for a gap of 0px-48px.\n   */\n  gap?: BoxSpacing;\n  /**\n   * The align-items style of the component.\n   */\n  alignItems?: BoxAlignItems;\n  /**\n   * The justify-content style of the component.\n   */\n  justifyContent?: BoxJustifyContent;\n  /**\n   * The margin of the component.\n   * Use 0-12 for margin of 0px-48px.\n   */\n  margin?: BoxSpacing;\n  /**\n   * The top margin of the component.\n   * Use 0-12 for margin of 0px-48px.\n   */\n  marginTop?: BoxSpacing;\n  /**\n   * The right margin of the component.\n   * Use 0-12 for margin of 0px-48px.\n   */\n  marginRight?: BoxSpacing;\n  /**\n   * The bottom margin of the component.\n   * Use 0-12 for margin of 0px-48px.\n   */\n  marginBottom?: BoxSpacing;\n  /**\n   * The left margin of the component.\n   * Use 0-12 for margin of 0px-48px.\n   */\n  marginLeft?: BoxSpacing;\n  /**\n   * The horizontal margin of the component.\n   * Use 0-12 for margin of 0px-48px.\n   */\n  marginHorizontal?: BoxSpacing;\n  /**\n   * The vertical margin of the component.\n   * Use 0-12 for margin of 0px-48px.\n   */\n  marginVertical?: BoxSpacing;\n  /**\n   * The padding of the component.\n   * Use 0-12 for padding of 0px-48px.\n   */\n  padding?: BoxSpacing;\n  /**\n   * The top padding of the component.\n   * Use 0-12 for padding of 0px-48px.\n   */\n  paddingTop?: BoxSpacing;\n  /**\n   * The right padding of the component.\n   * Use 0-12 for padding of 0px-48px.\n   */\n  paddingRight?: BoxSpacing;\n  /**\n   * The bottom padding of the component.\n   * Use 0-12 for padding of 0px-48px.\n   */\n  paddingBottom?: BoxSpacing;\n  /**\n   * The left padding of the component.\n   * Use 0-12 for padding of 0px-48px.\n   */\n  paddingLeft?: BoxSpacing;\n  /**\n   * The horizontal padding of the component.\n   * Use 0-12 for padding of 0px-48px.\n   */\n  paddingHorizontal?: BoxSpacing;\n  /**\n   * The vertical padding of the component.\n   * Use 0-12 for padding of 0px-48px.\n   */\n  paddingVertical?: BoxSpacing;\n  /**\n   * The border width of the component.\n   * Use 0, 1, 2, 4, or 8 for border width of 0px, 1px, 2px, 4px, or 8px.\n   */\n  borderWidth?: BoxBorderWidth;\n  /**\n   * The border color of the component.\n   */\n  borderColor?: BoxBorderColor;\n  /**\n   * The background color of the component.\n   */\n  backgroundColor?: BoxBackgroundColor;\n  /**\n   * Optional prop for additional CSS classes to be applied to the Box component.\n   */\n  className?: string;\n  /**\n   * Optional boolean that determines if the component should merge its props onto its immediate child\n   * instead of rendering a div element\n   *\n   * @default false\n   */\n  asChild?: boolean;\n};\n"]}
+{"version":3,"file":"Box.types.mjs","sourceRoot":"","sources":["../../../src/components/Box/Box.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BoxPropsShared } from '@metamask/design-system-shared';\nimport type { ComponentProps } from 'react';\n\nexport type BoxProps = ComponentProps<'div'> &\n  BoxPropsShared & {\n    /**\n     * Optional prop for additional CSS classes to be applied to the Box component.\n     */\n    className?: string;\n    /**\n     * Optional boolean that determines if the component should merge its props onto its immediate child\n     * instead of rendering a div element\n     *\n     * @default false\n     */\n    asChild?: boolean;\n  };\n"]}

package/dist/components/Box/index.cjs

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Box = exports.BoxBorderColor = exports.BoxBackgroundColor = exports.BoxJustifyContent = exports.BoxAlignItems = exports.BoxFlexWrap = exports.BoxFlexDirection = void 0;
-var types_1 = require("../../types/index.cjs");
-Object.defineProperty(exports, "BoxFlexDirection", { enumerable: true, get: function () { return types_1.BoxFlexDirection; } });
-Object.defineProperty(exports, "BoxFlexWrap", { enumerable: true, get: function () { return types_1.BoxFlexWrap; } });
-Object.defineProperty(exports, "BoxAlignItems", { enumerable: true, get: function () { return types_1.BoxAlignItems; } });
-Object.defineProperty(exports, "BoxJustifyContent", { enumerable: true, get: function () { return types_1.BoxJustifyContent; } });
-Object.defineProperty(exports, "BoxBackgroundColor", { enumerable: true, get: function () { return types_1.BoxBackgroundColor; } });
-Object.defineProperty(exports, "BoxBorderColor", { enumerable: true, get: function () { return types_1.BoxBorderColor; } });
+var design_system_shared_1 = require("@metamask/design-system-shared");
+Object.defineProperty(exports, "BoxFlexDirection", { enumerable: true, get: function () { return design_system_shared_1.BoxFlexDirection; } });
+Object.defineProperty(exports, "BoxFlexWrap", { enumerable: true, get: function () { return design_system_shared_1.BoxFlexWrap; } });
+Object.defineProperty(exports, "BoxAlignItems", { enumerable: true, get: function () { return design_system_shared_1.BoxAlignItems; } });
+Object.defineProperty(exports, "BoxJustifyContent", { enumerable: true, get: function () { return design_system_shared_1.BoxJustifyContent; } });
+Object.defineProperty(exports, "BoxBackgroundColor", { enumerable: true, get: function () { return design_system_shared_1.BoxBackgroundColor; } });
+Object.defineProperty(exports, "BoxBorderColor", { enumerable: true, get: function () { return design_system_shared_1.BoxBorderColor; } });
 var Box_1 = require("./Box.cjs");
 Object.defineProperty(exports, "Box", { enumerable: true, get: function () { return Box_1.Box; } });
 //# sourceMappingURL=index.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/Box/index.ts"],"names":[],"mappings":";;;AAAA,+CAOqB;AANnB,yGAAA,gBAAgB,OAAA;AAChB,oGAAA,WAAW,OAAA;AACX,sGAAA,aAAa,OAAA;AACb,0GAAA,iBAAiB,OAAA;AACjB,2GAAA,kBAAkB,OAAA;AAClB,uGAAA,cAAc,OAAA;AAGhB,iCAA4B;AAAnB,0FAAA,GAAG,OAAA","sourcesContent":["export {\n  BoxFlexDirection,\n  BoxFlexWrap,\n  BoxAlignItems,\n  BoxJustifyContent,\n  BoxBackgroundColor,\n  BoxBorderColor,\n} from '../../types';\nexport type { BoxSpacing } from '../../types';\nexport { Box } from './Box';\nexport type { BoxProps } from './Box.types';\n"]}
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/Box/index.ts"],"names":[],"mappings":";;;AAAA,uEASwC;AARtC,wHAAA,gBAAgB,OAAA;AAChB,mHAAA,WAAW,OAAA;AACX,qHAAA,aAAa,OAAA;AACb,yHAAA,iBAAiB,OAAA;AACjB,0HAAA,kBAAkB,OAAA;AAClB,sHAAA,cAAc,OAAA;AAIhB,iCAA4B;AAAnB,0FAAA,GAAG,OAAA","sourcesContent":["export {\n  BoxFlexDirection,\n  BoxFlexWrap,\n  BoxAlignItems,\n  BoxJustifyContent,\n  BoxBackgroundColor,\n  BoxBorderColor,\n  type BoxSpacing,\n  type BoxBorderWidth,\n} from '@metamask/design-system-shared';\nexport { Box } from './Box';\nexport type { BoxProps } from './Box.types';\n"]}

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

@@ -1,5 +1,4 @@
-export { BoxFlexDirection, BoxFlexWrap, BoxAlignItems, BoxJustifyContent, BoxBackgroundColor, BoxBorderColor, } from "../../types/index.cjs";
-export type { BoxSpacing } from "../../types/index.cjs";
+export { BoxFlexDirection, BoxFlexWrap, BoxAlignItems, BoxJustifyContent, BoxBackgroundColor, BoxBorderColor, type BoxSpacing, type BoxBorderWidth, } from "@metamask/design-system-shared";
 export { Box } from "./Box.cjs";
 export type { BoxProps } from "./Box.types.cjs";
 //# sourceMappingURL=index.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Box/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,GACf,8BAAoB;AACrB,YAAY,EAAE,UAAU,EAAE,8BAAoB;AAC9C,OAAO,EAAE,GAAG,EAAE,kBAAc;AAC5B,YAAY,EAAE,QAAQ,EAAE,wBAAoB"}
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Box/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,EACd,KAAK,UAAU,EACf,KAAK,cAAc,GACpB,uCAAuC;AACxC,OAAO,EAAE,GAAG,EAAE,kBAAc;AAC5B,YAAY,EAAE,QAAQ,EAAE,wBAAoB"}

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

@@ -1,5 +1,4 @@
-export { BoxFlexDirection, BoxFlexWrap, BoxAlignItems, BoxJustifyContent, BoxBackgroundColor, BoxBorderColor, } from "../../types/index.mjs";
-export type { BoxSpacing } from "../../types/index.mjs";
+export { BoxFlexDirection, BoxFlexWrap, BoxAlignItems, BoxJustifyContent, BoxBackgroundColor, BoxBorderColor, type BoxSpacing, type BoxBorderWidth, } from "@metamask/design-system-shared";
 export { Box } from "./Box.mjs";
 export type { BoxProps } from "./Box.types.mjs";
 //# sourceMappingURL=index.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/Box/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,GACf,8BAAoB;AACrB,YAAY,EAAE,UAAU,EAAE,8BAAoB;AAC9C,OAAO,EAAE,GAAG,EAAE,kBAAc;AAC5B,YAAY,EAAE,QAAQ,EAAE,wBAAoB"}
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/Box/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,EACd,KAAK,UAAU,EACf,KAAK,cAAc,GACpB,uCAAuC;AACxC,OAAO,EAAE,GAAG,EAAE,kBAAc;AAC5B,YAAY,EAAE,QAAQ,EAAE,wBAAoB"}

package/dist/components/Box/index.mjs

@@ -1,3 +1,3 @@
-export { BoxFlexDirection, BoxFlexWrap, BoxAlignItems, BoxJustifyContent, BoxBackgroundColor, BoxBorderColor } from "../../types/index.mjs";
+export { BoxFlexDirection, BoxFlexWrap, BoxAlignItems, BoxJustifyContent, BoxBackgroundColor, BoxBorderColor } from "@metamask/design-system-shared";
 export { Box } from "./Box.mjs";
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/Box/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,EACf,8BAAoB;AAErB,OAAO,EAAE,GAAG,EAAE,kBAAc","sourcesContent":["export {\n  BoxFlexDirection,\n  BoxFlexWrap,\n  BoxAlignItems,\n  BoxJustifyContent,\n  BoxBackgroundColor,\n  BoxBorderColor,\n} from '../../types';\nexport type { BoxSpacing } from '../../types';\nexport { Box } from './Box';\nexport type { BoxProps } from './Box.types';\n"]}
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/Box/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,EAGf,uCAAuC;AACxC,OAAO,EAAE,GAAG,EAAE,kBAAc","sourcesContent":["export {\n  BoxFlexDirection,\n  BoxFlexWrap,\n  BoxAlignItems,\n  BoxJustifyContent,\n  BoxBackgroundColor,\n  BoxBorderColor,\n  type BoxSpacing,\n  type BoxBorderWidth,\n} from '@metamask/design-system-shared';\nexport { Box } from './Box';\nexport type { BoxProps } from './Box.types';\n"]}

package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.cjs

@@ -33,7 +33,7 @@ exports.ButtonTertiary = (0, react_1.forwardRef)(({ className, isDanger, isInver
     // Default tertiary styles
     !isDanger &&
         !isInverse && [
-        'bg-transparent text-primary-default',
+        'bg-transparent text-default',
         // Loading state uses pressed color
         isLoading && 'bg-pressed',
     ], 

package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonTertiary.cjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,6DAAqD;AACrD,8DAAiD;AAIpC,QAAA,cAAc,GAAG,IAAA,kBAAU,EAItC,CACE,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,IAAA,kBAAO;IAC7B,0BAA0B;IAC1B,CAAC,QAAQ;QACP,CAAC,SAAS,IAAI;QACZ,qCAAqC;QACrC,mCAAmC;QACnC,SAAS,IAAI,YAAY;KAC1B;IACH,gBAAgB;IAChB,QAAQ;QACN,CAAC,SAAS,IAAI;QACZ,mCAAmC;QACnC,+CAA+C;QAC/C,SAAS,IAAI,mDAAmD;KACjE;IACH,iBAAiB;IACjB,SAAS;QACP,CAAC,QAAQ,IAAI;QACX,qCAAqC;QACrC,mCAAmC;QACnC,SAAS,IAAI,YAAY;KAC1B;IACH,wBAAwB;IACxB,SAAS;QACP,QAAQ,IAAI;QACV,+BAA+B;QAC/B,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,sDAAsD;IACtD,aAAa,IAAI;QACf,gBAAgB;QAChB,mBAAmB;QACnB,SAAS;YACP,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;QACrE,QAAQ;YACN,CAAC,SAAS,IAAI;YACZ,4BAA4B;YAC5B,+BAA+B;SAChC;KACJ,EACD,iDAAiD,EACjD,SAAS;QACP,CAAC,CAAC,uHAAuH;QACzH,CAAC,CAAC,oHAAoH;IACxH,iBAAiB;IACjB,SAAS,IAAI,oBAAoB;IACjC,oCAAoC;IACpC,UAAU,IAAI,CAAC,SAAS,IAAI,CAAC,YAAY,EAAE,oBAAoB,CAAC,EAChE,SAAS,CACV,CAAC;IAEF,OAAO,CACL,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,sBAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../../../utils/tw-merge';\nimport { ButtonBase } from '../../../ButtonBase';\n\nimport type { ButtonTertiaryProps } from './ButtonTertiary.types';\n\nexport const ButtonTertiary = forwardRef<\n  HTMLButtonElement,\n  ButtonTertiaryProps\n>(\n  (\n    { className, isDanger, isInverse, isDisabled, isLoading, ...props },\n    ref,\n  ) => {\n    const isInteractive = !(isDisabled ?? isLoading);\n\n    const mergedClassName = twMerge(\n      // Default tertiary styles\n      !isDanger &&\n        !isInverse && [\n          'bg-transparent text-primary-default',\n          // Loading state uses pressed color\n          isLoading && 'bg-pressed',\n        ],\n      // Danger styles\n      isDanger &&\n        !isInverse && [\n          'bg-transparent text-error-default',\n          // Loading state uses error muted pressed color\n          isLoading && 'bg-error-muted-pressed text-error-default-pressed',\n        ],\n      // Inverse styles\n      isInverse &&\n        !isDanger && [\n          'bg-transparent text-primary-inverse',\n          // Loading state uses pressed color\n          isLoading && 'bg-pressed',\n        ],\n      // Inverse danger styles\n      isInverse &&\n        isDanger && [\n          'bg-default text-error-default',\n          // Loading state uses pressed color\n          isLoading && 'bg-default-pressed',\n        ],\n      // Hover/Active states - only applied when interactive\n      isInteractive && [\n        'hover:bg-hover',\n        'active:bg-pressed',\n        isInverse &&\n          isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],\n        isDanger &&\n          !isInverse && [\n            'hover:bg-error-muted-hover',\n            'active:bg-error-muted-pressed',\n          ],\n      ],\n      'focus-visible:outline-none focus-visible:ring-0',\n      isInverse\n        ? 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default'\n        : 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default',\n      // Loading styles\n      isLoading && 'cursor-not-allowed',\n      // Disabled styles (but not loading)\n      isDisabled && !isLoading && ['opacity-50', 'cursor-not-allowed'],\n      className,\n    );\n\n    return (\n      <ButtonBase\n        ref={ref}\n        className={mergedClassName}\n        isDisabled={isDisabled}\n        isLoading={isLoading}\n        {...props}\n      />\n    );\n  },\n);\n\nButtonTertiary.displayName = 'ButtonTertiary';\n"]}
+{"version":3,"file":"ButtonTertiary.cjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,6DAAqD;AACrD,8DAAiD;AAIpC,QAAA,cAAc,GAAG,IAAA,kBAAU,EAItC,CACE,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,IAAA,kBAAO;IAC7B,0BAA0B;IAC1B,CAAC,QAAQ;QACP,CAAC,SAAS,IAAI;QACZ,6BAA6B;QAC7B,mCAAmC;QACnC,SAAS,IAAI,YAAY;KAC1B;IACH,gBAAgB;IAChB,QAAQ;QACN,CAAC,SAAS,IAAI;QACZ,mCAAmC;QACnC,+CAA+C;QAC/C,SAAS,IAAI,mDAAmD;KACjE;IACH,iBAAiB;IACjB,SAAS;QACP,CAAC,QAAQ,IAAI;QACX,qCAAqC;QACrC,mCAAmC;QACnC,SAAS,IAAI,YAAY;KAC1B;IACH,wBAAwB;IACxB,SAAS;QACP,QAAQ,IAAI;QACV,+BAA+B;QAC/B,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,sDAAsD;IACtD,aAAa,IAAI;QACf,gBAAgB;QAChB,mBAAmB;QACnB,SAAS;YACP,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;QACrE,QAAQ;YACN,CAAC,SAAS,IAAI;YACZ,4BAA4B;YAC5B,+BAA+B;SAChC;KACJ,EACD,iDAAiD,EACjD,SAAS;QACP,CAAC,CAAC,uHAAuH;QACzH,CAAC,CAAC,oHAAoH;IACxH,iBAAiB;IACjB,SAAS,IAAI,oBAAoB;IACjC,oCAAoC;IACpC,UAAU,IAAI,CAAC,SAAS,IAAI,CAAC,YAAY,EAAE,oBAAoB,CAAC,EAChE,SAAS,CACV,CAAC;IAEF,OAAO,CACL,8BAAC,uBAAU,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,sBAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../../../utils/tw-merge';\nimport { ButtonBase } from '../../../ButtonBase';\n\nimport type { ButtonTertiaryProps } from './ButtonTertiary.types';\n\nexport const ButtonTertiary = forwardRef<\n  HTMLButtonElement,\n  ButtonTertiaryProps\n>(\n  (\n    { className, isDanger, isInverse, isDisabled, isLoading, ...props },\n    ref,\n  ) => {\n    const isInteractive = !(isDisabled ?? isLoading);\n\n    const mergedClassName = twMerge(\n      // Default tertiary styles\n      !isDanger &&\n        !isInverse && [\n          'bg-transparent text-default',\n          // Loading state uses pressed color\n          isLoading && 'bg-pressed',\n        ],\n      // Danger styles\n      isDanger &&\n        !isInverse && [\n          'bg-transparent text-error-default',\n          // Loading state uses error muted pressed color\n          isLoading && 'bg-error-muted-pressed text-error-default-pressed',\n        ],\n      // Inverse styles\n      isInverse &&\n        !isDanger && [\n          'bg-transparent text-primary-inverse',\n          // Loading state uses pressed color\n          isLoading && 'bg-pressed',\n        ],\n      // Inverse danger styles\n      isInverse &&\n        isDanger && [\n          'bg-default text-error-default',\n          // Loading state uses pressed color\n          isLoading && 'bg-default-pressed',\n        ],\n      // Hover/Active states - only applied when interactive\n      isInteractive && [\n        'hover:bg-hover',\n        'active:bg-pressed',\n        isInverse &&\n          isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],\n        isDanger &&\n          !isInverse && [\n            'hover:bg-error-muted-hover',\n            'active:bg-error-muted-pressed',\n          ],\n      ],\n      'focus-visible:outline-none focus-visible:ring-0',\n      isInverse\n        ? 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default'\n        : 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default',\n      // Loading styles\n      isLoading && 'cursor-not-allowed',\n      // Disabled styles (but not loading)\n      isDisabled && !isLoading && ['opacity-50', 'cursor-not-allowed'],\n      className,\n    );\n\n    return (\n      <ButtonBase\n        ref={ref}\n        className={mergedClassName}\n        isDisabled={isDisabled}\n        isLoading={isLoading}\n        {...props}\n      />\n    );\n  },\n);\n\nButtonTertiary.displayName = 'ButtonTertiary';\n"]}

package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.mjs

@@ -14,7 +14,7 @@ export const ButtonTertiary = forwardRef(({ className, isDanger, isInverse, isDi
     // Default tertiary styles
     !isDanger &&
         !isInverse && [
-        'bg-transparent text-primary-default',
+        'bg-transparent text-default',
         // Loading state uses pressed color
         isLoading && 'bg-pressed',
     ], 

package/dist/components/Button/variants/ButtonTertiary/ButtonTertiary.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonTertiary.mjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,uCAAmC;AACrD,OAAO,EAAE,UAAU,EAAE,sCAA4B;AAIjD,MAAM,CAAC,MAAM,cAAc,GAAG,UAAU,CAItC,CACE,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,OAAO;IAC7B,0BAA0B;IAC1B,CAAC,QAAQ;QACP,CAAC,SAAS,IAAI;QACZ,qCAAqC;QACrC,mCAAmC;QACnC,SAAS,IAAI,YAAY;KAC1B;IACH,gBAAgB;IAChB,QAAQ;QACN,CAAC,SAAS,IAAI;QACZ,mCAAmC;QACnC,+CAA+C;QAC/C,SAAS,IAAI,mDAAmD;KACjE;IACH,iBAAiB;IACjB,SAAS;QACP,CAAC,QAAQ,IAAI;QACX,qCAAqC;QACrC,mCAAmC;QACnC,SAAS,IAAI,YAAY;KAC1B;IACH,wBAAwB;IACxB,SAAS;QACP,QAAQ,IAAI;QACV,+BAA+B;QAC/B,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,sDAAsD;IACtD,aAAa,IAAI;QACf,gBAAgB;QAChB,mBAAmB;QACnB,SAAS;YACP,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;QACrE,QAAQ;YACN,CAAC,SAAS,IAAI;YACZ,4BAA4B;YAC5B,+BAA+B;SAChC;KACJ,EACD,iDAAiD,EACjD,SAAS;QACP,CAAC,CAAC,uHAAuH;QACzH,CAAC,CAAC,oHAAoH;IACxH,iBAAiB;IACjB,SAAS,IAAI,oBAAoB;IACjC,oCAAoC;IACpC,UAAU,IAAI,CAAC,SAAS,IAAI,CAAC,YAAY,EAAE,oBAAoB,CAAC,EAChE,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../../../utils/tw-merge';\nimport { ButtonBase } from '../../../ButtonBase';\n\nimport type { ButtonTertiaryProps } from './ButtonTertiary.types';\n\nexport const ButtonTertiary = forwardRef<\n  HTMLButtonElement,\n  ButtonTertiaryProps\n>(\n  (\n    { className, isDanger, isInverse, isDisabled, isLoading, ...props },\n    ref,\n  ) => {\n    const isInteractive = !(isDisabled ?? isLoading);\n\n    const mergedClassName = twMerge(\n      // Default tertiary styles\n      !isDanger &&\n        !isInverse && [\n          'bg-transparent text-primary-default',\n          // Loading state uses pressed color\n          isLoading && 'bg-pressed',\n        ],\n      // Danger styles\n      isDanger &&\n        !isInverse && [\n          'bg-transparent text-error-default',\n          // Loading state uses error muted pressed color\n          isLoading && 'bg-error-muted-pressed text-error-default-pressed',\n        ],\n      // Inverse styles\n      isInverse &&\n        !isDanger && [\n          'bg-transparent text-primary-inverse',\n          // Loading state uses pressed color\n          isLoading && 'bg-pressed',\n        ],\n      // Inverse danger styles\n      isInverse &&\n        isDanger && [\n          'bg-default text-error-default',\n          // Loading state uses pressed color\n          isLoading && 'bg-default-pressed',\n        ],\n      // Hover/Active states - only applied when interactive\n      isInteractive && [\n        'hover:bg-hover',\n        'active:bg-pressed',\n        isInverse &&\n          isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],\n        isDanger &&\n          !isInverse && [\n            'hover:bg-error-muted-hover',\n            'active:bg-error-muted-pressed',\n          ],\n      ],\n      'focus-visible:outline-none focus-visible:ring-0',\n      isInverse\n        ? 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default'\n        : 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default',\n      // Loading styles\n      isLoading && 'cursor-not-allowed',\n      // Disabled styles (but not loading)\n      isDisabled && !isLoading && ['opacity-50', 'cursor-not-allowed'],\n      className,\n    );\n\n    return (\n      <ButtonBase\n        ref={ref}\n        className={mergedClassName}\n        isDisabled={isDisabled}\n        isLoading={isLoading}\n        {...props}\n      />\n    );\n  },\n);\n\nButtonTertiary.displayName = 'ButtonTertiary';\n"]}
+{"version":3,"file":"ButtonTertiary.mjs","sourceRoot":"","sources":["../../../../../src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,uCAAmC;AACrD,OAAO,EAAE,UAAU,EAAE,sCAA4B;AAIjD,MAAM,CAAC,MAAM,cAAc,GAAG,UAAU,CAItC,CACE,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,CAAC,CAAC,UAAU,IAAI,SAAS,CAAC,CAAC;IAEjD,MAAM,eAAe,GAAG,OAAO;IAC7B,0BAA0B;IAC1B,CAAC,QAAQ;QACP,CAAC,SAAS,IAAI;QACZ,6BAA6B;QAC7B,mCAAmC;QACnC,SAAS,IAAI,YAAY;KAC1B;IACH,gBAAgB;IAChB,QAAQ;QACN,CAAC,SAAS,IAAI;QACZ,mCAAmC;QACnC,+CAA+C;QAC/C,SAAS,IAAI,mDAAmD;KACjE;IACH,iBAAiB;IACjB,SAAS;QACP,CAAC,QAAQ,IAAI;QACX,qCAAqC;QACrC,mCAAmC;QACnC,SAAS,IAAI,YAAY;KAC1B;IACH,wBAAwB;IACxB,SAAS;QACP,QAAQ,IAAI;QACV,+BAA+B;QAC/B,mCAAmC;QACnC,SAAS,IAAI,oBAAoB;KAClC;IACH,sDAAsD;IACtD,aAAa,IAAI;QACf,gBAAgB;QAChB,mBAAmB;QACnB,SAAS;YACP,QAAQ,IAAI,CAAC,wBAAwB,EAAE,2BAA2B,CAAC;QACrE,QAAQ;YACN,CAAC,SAAS,IAAI;YACZ,4BAA4B;YAC5B,+BAA+B;SAChC;KACJ,EACD,iDAAiD,EACjD,SAAS;QACP,CAAC,CAAC,uHAAuH;QACzH,CAAC,CAAC,oHAAoH;IACxH,iBAAiB;IACjB,SAAS,IAAI,oBAAoB;IACjC,oCAAoC;IACpC,UAAU,IAAI,CAAC,SAAS,IAAI,CAAC,YAAY,EAAE,oBAAoB,CAAC,EAChE,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,KAChB,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../../../utils/tw-merge';\nimport { ButtonBase } from '../../../ButtonBase';\n\nimport type { ButtonTertiaryProps } from './ButtonTertiary.types';\n\nexport const ButtonTertiary = forwardRef<\n  HTMLButtonElement,\n  ButtonTertiaryProps\n>(\n  (\n    { className, isDanger, isInverse, isDisabled, isLoading, ...props },\n    ref,\n  ) => {\n    const isInteractive = !(isDisabled ?? isLoading);\n\n    const mergedClassName = twMerge(\n      // Default tertiary styles\n      !isDanger &&\n        !isInverse && [\n          'bg-transparent text-default',\n          // Loading state uses pressed color\n          isLoading && 'bg-pressed',\n        ],\n      // Danger styles\n      isDanger &&\n        !isInverse && [\n          'bg-transparent text-error-default',\n          // Loading state uses error muted pressed color\n          isLoading && 'bg-error-muted-pressed text-error-default-pressed',\n        ],\n      // Inverse styles\n      isInverse &&\n        !isDanger && [\n          'bg-transparent text-primary-inverse',\n          // Loading state uses pressed color\n          isLoading && 'bg-pressed',\n        ],\n      // Inverse danger styles\n      isInverse &&\n        isDanger && [\n          'bg-default text-error-default',\n          // Loading state uses pressed color\n          isLoading && 'bg-default-pressed',\n        ],\n      // Hover/Active states - only applied when interactive\n      isInteractive && [\n        'hover:bg-hover',\n        'active:bg-pressed',\n        isInverse &&\n          isDanger && ['hover:bg-default-hover', 'active:bg-default-pressed'],\n        isDanger &&\n          !isInverse && [\n            'hover:bg-error-muted-hover',\n            'active:bg-error-muted-pressed',\n          ],\n      ],\n      'focus-visible:outline-none focus-visible:ring-0',\n      isInverse\n        ? 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-background-default'\n        : 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default',\n      // Loading styles\n      isLoading && 'cursor-not-allowed',\n      // Disabled styles (but not loading)\n      isDisabled && !isLoading && ['opacity-50', 'cursor-not-allowed'],\n      className,\n    );\n\n    return (\n      <ButtonBase\n        ref={ref}\n        className={mergedClassName}\n        isDisabled={isDisabled}\n        isLoading={isLoading}\n        {...props}\n      />\n    );\n  },\n);\n\nButtonTertiary.displayName = 'ButtonTertiary';\n"]}

package/dist/components/ButtonIcon/ButtonIcon.constants.d.cts

@@ -1,12 +1,11 @@
-import { IconSize } from "../Icon/index.cjs";
 export declare const TWCLASSMAP_BUTTONICON_SIZE_DIMENSION: {
     readonly sm: "h-6 w-6";
     readonly md: "h-8 w-8";
     readonly lg: "h-10 w-10";
 };
 export declare const MAP_BUTTONICON_SIZE_ICONSIZE: {
-    readonly sm: IconSize.Md;
-    readonly md: IconSize.Lg;
-    readonly lg: IconSize.Xl;
+    readonly sm: "md";
+    readonly md: "lg";
+    readonly lg: "xl";
 };
 //# sourceMappingURL=ButtonIcon.constants.d.cts.map

package/dist/components/ButtonIcon/ButtonIcon.constants.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.constants.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,0BAAgB;AAEnC,eAAO,MAAM,oCAAoC;;;;CAIvC,CAAC;AAEX,eAAO,MAAM,4BAA4B;;;;CAI/B,CAAC"}
+{"version":3,"file":"ButtonIcon.constants.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,oCAAoC;;;;CAIvC,CAAC;AAEX,eAAO,MAAM,4BAA4B;;;;CAI/B,CAAC"}

package/dist/components/ButtonIcon/ButtonIcon.constants.d.mts

@@ -1,12 +1,11 @@
-import { IconSize } from "../Icon/index.mjs";
 export declare const TWCLASSMAP_BUTTONICON_SIZE_DIMENSION: {
     readonly sm: "h-6 w-6";
     readonly md: "h-8 w-8";
     readonly lg: "h-10 w-10";
 };
 export declare const MAP_BUTTONICON_SIZE_ICONSIZE: {
-    readonly sm: IconSize.Md;
-    readonly md: IconSize.Lg;
-    readonly lg: IconSize.Xl;
+    readonly sm: "md";
+    readonly md: "lg";
+    readonly lg: "xl";
 };
 //# sourceMappingURL=ButtonIcon.constants.d.mts.map

package/dist/components/ButtonIcon/ButtonIcon.constants.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.constants.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,0BAAgB;AAEnC,eAAO,MAAM,oCAAoC;;;;CAIvC,CAAC;AAEX,eAAO,MAAM,4BAA4B;;;;CAI/B,CAAC"}
+{"version":3,"file":"ButtonIcon.constants.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,oCAAoC;;;;CAIvC,CAAC;AAEX,eAAO,MAAM,4BAA4B;;;;CAI/B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.types.cjs","sourceRoot":"","sources":["../../../src/components/Icon/Icon.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { SVGProps, ComponentPropsWithoutRef } from 'react';\n\nimport type { IconName, IconSize, IconColor } from '../../types';\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   *\n   * @default IconSize.Md\n   */\n  size?: IconSize;\n  /**\n   * Optional prop that sets the color of the icon using predefined theme colors\n   *\n   * @default IconColor.IconDefault\n   */\n  color?: IconColor;\n  /**\n   * Additional CSS classes to be added to the component.\n   * These classes will be merged with the component's default classes using twMerge.\n   */\n  className?: string;\n  /**\n   * Optional CSS styles to be applied to the component.\n   * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n   */\n  style?: React.CSSProperties;\n  /**\n   * Optional prop to add a test id to the icon\n   */\n  'data-testid'?: string;\n};\n"]}
+{"version":3,"file":"Icon.types.cjs","sourceRoot":"","sources":["../../../src/components/Icon/Icon.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { IconPropsShared } from '@metamask/design-system-shared';\nimport 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  IconPropsShared & {\n    /**\n     * Additional CSS classes to be added to the component.\n     * These classes will be merged with the component's default classes using twMerge.\n     */\n    className?: string;\n    /**\n     * Optional CSS styles to be applied to the component.\n     * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n     */\n    style?: React.CSSProperties;\n    /**\n     * Optional prop to add a test id to the icon\n     */\n    'data-testid'?: string;\n  };\n"]}

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

@@ -1,24 +1,7 @@
+import type { IconPropsShared } from "@metamask/design-system-shared";
 import type { SVGProps, ComponentPropsWithoutRef } from "react";
-import type { IconName, IconSize, IconColor } from "../../types/index.cjs";
 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 type IconProps = SVGProps<SVGElementProps> & IconPropsShared & {
     /**
      * Additional CSS classes to be added to the component.
      * These classes will be merged with the component's default classes using twMerge.

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

@@ -1 +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;AAEhE,OAAO,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,8BAAoB;AAGjE,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;;;;;OAKG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC"}
+{"version":3,"file":"Icon.types.d.cts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,uCAAuC;AACtE,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,GAC/C,eAAe,GAAG;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC"}

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

@@ -1,24 +1,7 @@
+import type { IconPropsShared } from "@metamask/design-system-shared";
 import type { SVGProps, ComponentPropsWithoutRef } from "react";
-import type { IconName, IconSize, IconColor } from "../../types/index.mjs";
 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 type IconProps = SVGProps<SVGElementProps> & IconPropsShared & {
     /**
      * Additional CSS classes to be added to the component.
      * These classes will be merged with the component's default classes using twMerge.

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

@@ -1 +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;AAEhE,OAAO,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,8BAAoB;AAGjE,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;;;;;OAKG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC"}
+{"version":3,"file":"Icon.types.d.mts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,uCAAuC;AACtE,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,GAC/C,eAAe,GAAG;IAChB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.types.mjs","sourceRoot":"","sources":["../../../src/components/Icon/Icon.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { SVGProps, ComponentPropsWithoutRef } from 'react';\n\nimport type { IconName, IconSize, IconColor } from '../../types';\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   *\n   * @default IconSize.Md\n   */\n  size?: IconSize;\n  /**\n   * Optional prop that sets the color of the icon using predefined theme colors\n   *\n   * @default IconColor.IconDefault\n   */\n  color?: IconColor;\n  /**\n   * Additional CSS classes to be added to the component.\n   * These classes will be merged with the component's default classes using twMerge.\n   */\n  className?: string;\n  /**\n   * Optional CSS styles to be applied to the component.\n   * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n   */\n  style?: React.CSSProperties;\n  /**\n   * Optional prop to add a test id to the icon\n   */\n  'data-testid'?: string;\n};\n"]}
+{"version":3,"file":"Icon.types.mjs","sourceRoot":"","sources":["../../../src/components/Icon/Icon.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { IconPropsShared } from '@metamask/design-system-shared';\nimport 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  IconPropsShared & {\n    /**\n     * Additional CSS classes to be added to the component.\n     * These classes will be merged with the component's default classes using twMerge.\n     */\n    className?: string;\n    /**\n     * Optional CSS styles to be applied to the component.\n     * Should be used sparingly and only for dynamic styles that can't be achieved with className.\n     */\n    style?: React.CSSProperties;\n    /**\n     * Optional prop to add a test id to the icon\n     */\n    'data-testid'?: string;\n  };\n"]}

package/dist/components/Icon/icons/Telegram.cjs

@@ -0,0 +1,32 @@
+"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 });
+const React = __importStar(require("react"));
+const react_1 = require("react");
+const SvgTelegram = (props, ref) => React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", ref: ref, ...props },
+    React.createElement("path", { d: "m9.78 18.65.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42" }));
+const ForwardRef = (0, react_1.forwardRef)(SvgTelegram);
+exports.default = ForwardRef;
+//# sourceMappingURL=Telegram.cjs.map

package/dist/components/Icon/icons/Telegram.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Telegram.cjs","sourceRoot":"","sources":["../../../../src/components/Icon/icons/Telegram.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAE/B,iCAAwC;AACxC,MAAM,WAAW,GAAG,CAAC,KAA8B,EAAE,GAAuB,EAAE,EAAE,CAAC,6BAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,EAAC,GAAG,EAAE,GAAG,KAAM,KAAK;IAAE,8BAAM,CAAC,EAAC,mNAAmN,GAAG,CAAM,CAAC;AAC3Z,MAAM,UAAU,GAAG,IAAA,kBAAU,EAAC,WAAW,CAAC,CAAC;AAC3C,kBAAe,UAAU,CAAC","sourcesContent":["import * as React from \"react\";\nimport type { SVGProps } from \"react\";\nimport { Ref, forwardRef } from \"react\";\nconst SvgTelegram = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" ref={ref} {...props}><path d=\"m9.78 18.65.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42\" /></svg>;\nconst ForwardRef = forwardRef(SvgTelegram);\nexport default ForwardRef;"]}

package/dist/components/Icon/icons/Telegram.d.cts

@@ -0,0 +1,4 @@
+import * as React from "react";
+declare const ForwardRef: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export default ForwardRef;
+//# sourceMappingURL=Telegram.d.cts.map

package/dist/components/Icon/icons/Telegram.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Telegram.d.cts","sourceRoot":"","sources":["../../../../src/components/Icon/icons/Telegram.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,cAAc;AAI/B,QAAA,MAAM,UAAU,kHAA0B,CAAC;AAC3C,eAAe,UAAU,CAAC"}

package/dist/components/Icon/icons/Telegram.d.mts

@@ -0,0 +1,4 @@
+import * as React from "react";
+declare const ForwardRef: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export default ForwardRef;
+//# sourceMappingURL=Telegram.d.mts.map

package/dist/components/Icon/icons/Telegram.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Telegram.d.mts","sourceRoot":"","sources":["../../../../src/components/Icon/icons/Telegram.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,cAAc;AAI/B,QAAA,MAAM,UAAU,kHAA0B,CAAC;AAC3C,eAAe,UAAU,CAAC"}

package/dist/components/Icon/icons/Telegram.mjs

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { forwardRef } from "react";
+const SvgTelegram = (props, ref) => React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", ref: ref, ...props },
+    React.createElement("path", { d: "m9.78 18.65.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42" }));
+const ForwardRef = forwardRef(SvgTelegram);
+export default ForwardRef;
+//# sourceMappingURL=Telegram.mjs.map

package/dist/components/Icon/icons/Telegram.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Telegram.mjs","sourceRoot":"","sources":["../../../../src/components/Icon/icons/Telegram.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,cAAc;AAE/B,OAAO,EAAO,UAAU,EAAE,cAAc;AACxC,MAAM,WAAW,GAAG,CAAC,KAA8B,EAAE,GAAuB,EAAE,EAAE,CAAC,6BAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,cAAc,EAAC,GAAG,EAAE,GAAG,KAAM,KAAK;IAAE,8BAAM,CAAC,EAAC,mNAAmN,GAAG,CAAM,CAAC;AAC3Z,MAAM,UAAU,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;AAC3C,eAAe,UAAU,CAAC","sourcesContent":["import * as React from \"react\";\nimport type { SVGProps } from \"react\";\nimport { Ref, forwardRef } from \"react\";\nconst SvgTelegram = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" ref={ref} {...props}><path d=\"m9.78 18.65.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42\" /></svg>;\nconst ForwardRef = forwardRef(SvgTelegram);\nexport default ForwardRef;"]}