@metamask-previews/design-system-react-native 0.16.0-preview.d854123 → 0.18.0-preview.ba86146

package/dist/components/Icon/Icon.mjs

@@ -4,16 +4,17 @@ function $importDefault(module) {
     }
     return module;
 }
-import { IconColor, IconSize } from "@metamask-previews/design-system-shared";
 import { useTailwind } from "@metamask-previews/design-system-twrnc-preset";
 import $React from "react";
 const React = $importDefault($React);
+import { IconColor, IconSize } from "../../types/index.mjs";
 import { assetByIconName } from "./Icon.assets.mjs";
 import { TWCLASSMAP_ICON_SIZE_DIMENSION } from "./Icon.constants.mjs";
 export const Icon = ({ size = IconSize.Md, name, color = IconColor.IconDefault, twClassName, style, ...props }) => {
     const tw = useTailwind();
     const SVG = assetByIconName[name];
+    const { hitSlop, ...svgProps } = props;
     const twStyle = tw.style(color, TWCLASSMAP_ICON_SIZE_DIMENSION[size], twClassName);
-    return (<SVG name={name} fill="currentColor" style={[twStyle, style]} {...props}/>);
+    return (<SVG name={name} fill="currentColor" style={[twStyle, style]} hitSlop={hitSlop ?? undefined} {...svgProps}/>);
 };
 //# sourceMappingURL=Icon.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.mjs","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,gDAAgD;AAC9E,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,eAAe,EAAE,0BAAsB;AAChD,OAAO,EAAE,8BAA8B,EAAE,6BAAyB;AAGlE,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EACnB,IAAI,GAAG,QAAQ,CAAC,EAAE,EAClB,IAAI,EACJ,KAAK,GAAG,SAAS,CAAC,WAAW,EAC7B,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACE,EAAE,EAAE;IACd,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IACzB,MAAM,GAAG,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC;IAClC,MAAM,OAAO,GAAG,EAAE,CAAC,KAAK,CACtB,KAAK,EACL,8BAA8B,CAAC,IAAI,CAAC,EACpC,WAAW,CACZ,CAAC;IAEF,OAAO,CACL,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,EAAG,CAC5E,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { IconColor, IconSize } from '@metamask-previews/design-system-shared';\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\n\nimport { assetByIconName } from './Icon.assets';\nimport { TWCLASSMAP_ICON_SIZE_DIMENSION } from './Icon.constants';\nimport type { IconProps } from './Icon.types';\n\nexport const Icon = ({\n  size = IconSize.Md,\n  name,\n  color = IconColor.IconDefault,\n  twClassName,\n  style,\n  ...props\n}: IconProps) => {\n  const tw = useTailwind();\n  const SVG = assetByIconName[name];\n  const twStyle = tw.style(\n    color,\n    TWCLASSMAP_ICON_SIZE_DIMENSION[size],\n    twClassName,\n  );\n\n  return (\n    <SVG name={name} fill=\"currentColor\" style={[twStyle, style]} {...props} />\n  );\n};\n"]}
+{"version":3,"file":"Icon.mjs","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,8BAAoB;AAElD,OAAO,EAAE,eAAe,EAAE,0BAAsB;AAChD,OAAO,EAAE,8BAA8B,EAAE,6BAAyB;AAGlE,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EACnB,IAAI,GAAG,QAAQ,CAAC,EAAE,EAClB,IAAI,EACJ,KAAK,GAAG,SAAS,CAAC,WAAW,EAC7B,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACE,EAAE,EAAE;IACd,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IACzB,MAAM,GAAG,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC;IAClC,MAAM,EAAE,OAAO,EAAE,GAAG,QAAQ,EAAE,GAAG,KAAK,CAAC;IACvC,MAAM,OAAO,GAAG,EAAE,CAAC,KAAK,CACtB,KAAK,EACL,8BAA8B,CAAC,IAAI,CAAC,EACpC,WAAW,CACZ,CAAC;IAEF,OAAO,CACL,CAAC,GAAG,CACF,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,IAAI,CAAC,cAAc,CACnB,KAAK,CAAC,CAAC,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CACxB,OAAO,CAAC,CAAC,OAAO,IAAI,SAAS,CAAC,CAC9B,IAAI,QAAQ,CAAC,EACb,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\n\nimport { IconColor, IconSize } from '../../types';\n\nimport { assetByIconName } from './Icon.assets';\nimport { TWCLASSMAP_ICON_SIZE_DIMENSION } from './Icon.constants';\nimport type { IconProps } from './Icon.types';\n\nexport const Icon = ({\n  size = IconSize.Md,\n  name,\n  color = IconColor.IconDefault,\n  twClassName,\n  style,\n  ...props\n}: IconProps) => {\n  const tw = useTailwind();\n  const SVG = assetByIconName[name];\n  const { hitSlop, ...svgProps } = props;\n  const twStyle = tw.style(\n    color,\n    TWCLASSMAP_ICON_SIZE_DIMENSION[size],\n    twClassName,\n  );\n\n  return (\n    <SVG\n      name={name}\n      fill=\"currentColor\"\n      style={[twStyle, style]}\n      hitSlop={hitSlop ?? undefined}\n      {...svgProps}\n    />\n  );\n};\n"]}

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 {\n  IconColor,\n  IconName,\n  IconPropsShared,\n  IconSize,\n} from '@metamask-previews/design-system-shared';\nimport type React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { SvgProps } from 'react-native-svg';\n\n/**\n * Icon component props.\n */\nexport type IconProps = IconPropsShared & {\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   * Optional prop to add twrnc overriding classNames.\n   */\n  twClassName?: string;\n} & ViewProps;\n\n/**\n * Asset stored by icon name\n */\nexport type AssetByIconName = {\n  [key in IconName]: React.FC<SvgProps & { name: string }>;\n};\n"]}
+{"version":3,"file":"Icon.types.cjs","sourceRoot":"","sources":["../../../src/components/Icon/Icon.types.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\nimport type { SvgProps } from 'react-native-svg';\n\nimport type { IconColor, IconName, IconSize } from '../../types';\n\n/**\n * Icon component props.\n */\nexport type IconProps = {\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   * Optional prop to add twrnc overriding classNames.\n   */\n  twClassName?: string;\n} & Omit<SvgProps, 'color' | 'name'>;\n\n/**\n * Asset stored by icon name\n */\nexport type AssetByIconName = {\n  [key in IconName]: React.FC<SvgProps & { name: string }>;\n};\n"]}

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

@@ -1,11 +1,10 @@
-import type { IconColor, IconName, IconPropsShared, IconSize } from "@metamask-previews/design-system-shared";
 import type React from "react";
-import type { ViewProps } from "react-native/index.js";
 import type { SvgProps } from "react-native-svg";
+import type { IconColor, IconName, IconSize } from "../../types/index.cjs";
 /**
  * Icon component props.
  */
-export type IconProps = IconPropsShared & {
+export type IconProps = {
     /**
      * Required prop to specify which icon to render from the icon set
      */
@@ -27,7 +26,7 @@ export type IconProps = IconPropsShared & {
      * Optional prop to add twrnc overriding classNames.
      */
     twClassName?: string;
-} & ViewProps;
+} & Omit<SvgProps, 'color' | 'name'>;
 /**
  * Asset stored by icon name
  */

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,EACV,SAAS,EACT,QAAQ,EACR,eAAe,EACf,QAAQ,EACT,gDAAgD;AACjD,OAAO,KAAK,KAAK,cAAc;AAC/B,OAAO,KAAK,EAAE,SAAS,EAAE,8BAAqB;AAC9C,OAAO,KAAK,EAAE,QAAQ,EAAE,yBAAyB;AAEjD;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,eAAe,GAAG;IACxC;;OAEG;IACH,IAAI,EAAE,QAAQ,CAAC;IACf;;;;;OAKG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,SAAS,CAAC;AAEd;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;KAC3B,GAAG,IAAI,QAAQ,GAAG,KAAK,CAAC,EAAE,CAAC,QAAQ,GAAG;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;CACzD,CAAC"}
+{"version":3,"file":"Icon.types.d.cts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,cAAc;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,yBAAyB;AAEjD,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,8BAAoB;AAEjE;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,IAAI,EAAE,QAAQ,CAAC;IACf;;;;;OAKG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,IAAI,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;AAErC;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;KAC3B,GAAG,IAAI,QAAQ,GAAG,KAAK,CAAC,EAAE,CAAC,QAAQ,GAAG;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;CACzD,CAAC"}

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

@@ -1,11 +1,10 @@
-import type { IconColor, IconName, IconPropsShared, IconSize } from "@metamask-previews/design-system-shared";
 import type React from "react";
-import type { ViewProps } from "react-native/index.js";
 import type { SvgProps } from "react-native-svg";
+import type { IconColor, IconName, IconSize } from "../../types/index.mjs";
 /**
  * Icon component props.
  */
-export type IconProps = IconPropsShared & {
+export type IconProps = {
     /**
      * Required prop to specify which icon to render from the icon set
      */
@@ -27,7 +26,7 @@ export type IconProps = IconPropsShared & {
      * Optional prop to add twrnc overriding classNames.
      */
     twClassName?: string;
-} & ViewProps;
+} & Omit<SvgProps, 'color' | 'name'>;
 /**
  * Asset stored by icon name
  */

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,EACV,SAAS,EACT,QAAQ,EACR,eAAe,EACf,QAAQ,EACT,gDAAgD;AACjD,OAAO,KAAK,KAAK,cAAc;AAC/B,OAAO,KAAK,EAAE,SAAS,EAAE,8BAAqB;AAC9C,OAAO,KAAK,EAAE,QAAQ,EAAE,yBAAyB;AAEjD;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,eAAe,GAAG;IACxC;;OAEG;IACH,IAAI,EAAE,QAAQ,CAAC;IACf;;;;;OAKG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,SAAS,CAAC;AAEd;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;KAC3B,GAAG,IAAI,QAAQ,GAAG,KAAK,CAAC,EAAE,CAAC,QAAQ,GAAG;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;CACzD,CAAC"}
+{"version":3,"file":"Icon.types.d.mts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,cAAc;AAC/B,OAAO,KAAK,EAAE,QAAQ,EAAE,yBAAyB;AAEjD,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,8BAAoB;AAEjE;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,IAAI,EAAE,QAAQ,CAAC;IACf;;;;;OAKG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,IAAI,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,CAAC,CAAC;AAErC;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;KAC3B,GAAG,IAAI,QAAQ,GAAG,KAAK,CAAC,EAAE,CAAC,QAAQ,GAAG;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;CACzD,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 {\n  IconColor,\n  IconName,\n  IconPropsShared,\n  IconSize,\n} from '@metamask-previews/design-system-shared';\nimport type React from 'react';\nimport type { ViewProps } from 'react-native';\nimport type { SvgProps } from 'react-native-svg';\n\n/**\n * Icon component props.\n */\nexport type IconProps = IconPropsShared & {\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   * Optional prop to add twrnc overriding classNames.\n   */\n  twClassName?: string;\n} & ViewProps;\n\n/**\n * Asset stored by icon name\n */\nexport type AssetByIconName = {\n  [key in IconName]: React.FC<SvgProps & { name: string }>;\n};\n"]}
+{"version":3,"file":"Icon.types.mjs","sourceRoot":"","sources":["../../../src/components/Icon/Icon.types.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\nimport type { SvgProps } from 'react-native-svg';\n\nimport type { IconColor, IconName, IconSize } from '../../types';\n\n/**\n * Icon component props.\n */\nexport type IconProps = {\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   * Optional prop to add twrnc overriding classNames.\n   */\n  twClassName?: string;\n} & Omit<SvgProps, 'color' | 'name'>;\n\n/**\n * Asset stored by icon name\n */\nexport type AssetByIconName = {\n  [key in IconName]: React.FC<SvgProps & { name: string }>;\n};\n"]}

package/dist/components/Icon/assets/after-hours.svg

@@ -1 +1 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.9873 3.9873c-2.23105.00294-4.12144.77965-5.67089 2.32911-1.5524 1.55239-2.32911 3.44701-2.32911 5.68359 0 2.2366.77671 4.1312 2.32911 5.6836 1.54945 1.5494 3.43984 2.3252 5.67089 2.3281v1.9746c-1.377-.0016-2.6715-.2624-3.88281-.7851-1.21513-.5244-2.27214-1.236-3.1709-2.1348-.89875-.8987-1.61038-1.9558-2.13476-3.1709-.5243-1.215-.78613-2.5138-.78613-3.8955s.26183-2.68047.78613-3.89551c.52438-1.21513 1.23601-2.27214 2.13476-3.1709.89876-.89875 1.95577-1.61038 3.1709-2.13476 1.21131-.52269 2.50581-.78453 3.88281-.78613zm3.2627 15.0254c.3468 0 .6396.1191.8789.3584s.3584.5321.3584.8789-.1191.6396-.3584.8789-.5321.3584-.8789.3584-.6396-.1191-.8789-.3584-.3584-.5321-.3584-.8789.1191-.6396.3584-.8789.5321-.3584.8789-.3584zm4-3.5c.3468 0 .6396.1191.8789.3584s.3584.5321.3584.8789-.1191.6396-.3584.8789-.5321.3584-.8789.3584-.6396-.1191-.8789-.3584-.3584-.5321-.3584-.8789.1191-.6396.3584-.8789.5321-.3584.8789-.3584zm-6.2627-8.5v4.5869h-.0049l3.7002 3.7002-1.3828 1.3828-4.2871-4.2871v-5.3828zm7.7627 3.75c.3468 0 .6396.1191.8789.3584s.3584.5321.3584.8789-.1191.6396-.3584.8789-.5321.3584-.8789.3584-.6396-.1191-.8789-.3584-.3584-.5321-.3584-.8789.1191-.6396.3584-.8789.5321-.3584.8789-.3584zm-1.5-4.75c.3468 0 .6396.11913.8789.35839s.3584.53214.3584.87891-.1191.63965-.3584.87891-.5321.35839-.8789.35839-.6396-.11913-.8789-.35839-.3584-.53214-.3584-.87891.1191-.63965.3584-.87891.5321-.35839.8789-.35839zm-4-3.5c.3468 0 .6396.11913.8789.35839s.3584.53214.3584.87891-.1191.63965-.3584.87891-.5321.35839-.8789.35839-.6396-.11913-.8789-.35839-.3584-.53214-.3584-.87891.1191-.63965.3584-.87891.5321-.35839.8789-.35839z" stroke-width=".025"/></svg>
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m11.9873 3.9873c-2.23105.00294-4.12144.77965-5.67089 2.32911-1.5524 1.55239-2.32911 3.44701-2.32911 5.68359 0 2.2366.77671 4.1312 2.32911 5.6836 1.54945 1.5494 3.43984 2.3252 5.67089 2.3281v1.9746c-1.377-.0016-2.6715-.2624-3.88281-.7851-1.21513-.5244-2.27214-1.236-3.1709-2.1348-.89875-.8987-1.61038-1.9558-2.13476-3.1709-.5243-1.215-.78613-2.5138-.78613-3.8955s.26183-2.68047.78613-3.89551c.52438-1.21513 1.23601-2.27214 2.13476-3.1709.89876-.89875 1.95577-1.61038 3.1709-2.13476 1.21131-.52269 2.50581-.78453 3.88281-.78613zm3.2627 15.0254c.3468 0 .6396.1191.8789.3584s.3584.5321.3584.8789-.1191.6396-.3584.8789-.5321.3584-.8789.3584-.6396-.1191-.8789-.3584-.3584-.5321-.3584-.8789.1191-.6396.3584-.8789.5321-.3584.8789-.3584zm4-3.5c.3468 0 .6396.1191.8789.3584s.3584.5321.3584.8789-.1191.6396-.3584.8789-.5321.3584-.8789.3584-.6396-.1191-.8789-.3584-.3584-.5321-.3584-.8789.1191-.6396.3584-.8789.5321-.3584.8789-.3584zm-6.2627-8.5v4.5869h-.0049l3.7002 3.7002-1.3828 1.3828-4.2871-4.2871v-5.3828zm7.7627 3.75c.3468 0 .6396.1191.8789.3584s.3584.5321.3584.8789-.1191.6396-.3584.8789-.5321.3584-.8789.3584-.6396-.1191-.8789-.3584-.3584-.5321-.3584-.8789.1191-.6396.3584-.8789.5321-.3584.8789-.3584zm-1.5-4.75c.3468 0 .6396.11913.8789.35839s.3584.53214.3584.87891-.1191.63965-.3584.87891-.5321.35839-.8789.35839-.6396-.11913-.8789-.35839-.3584-.53214-.3584-.87891.1191-.63965.3584-.87891.5321-.35839.8789-.35839zm-4-3.5c.3468 0 .6396.11913.8789.35839s.3584.53214.3584.87891-.1191.63965-.3584.87891-.5321.35839-.8789.35839-.6396-.11913-.8789-.35839-.3584-.53214-.3584-.87891.1191-.63965.3584-.87891.5321-.35839.8789-.35839z" /></svg>

package/dist/components/Icon/index.cjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/Icon/index.ts"],"names":[],"mappings":";;;AAAA,gFAAwF;AAA/E,iHAAA,SAAS,OAAA;AAAE,gHAAA,QAAQ,OAAA;AAAE,gHAAA,QAAQ,OAAA;AACtC,mCAA8B;AAArB,4FAAA,IAAI,OAAA","sourcesContent":["export { IconColor, IconName, IconSize } from '@metamask-previews/design-system-shared';\nexport { Icon } from './Icon';\nexport type { IconProps } from './Icon.types';\n"]}
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/Icon/index.ts"],"names":[],"mappings":";;;AAAA,+CAA4D;AAAnD,kGAAA,SAAS,OAAA;AAAE,iGAAA,QAAQ,OAAA;AAAE,iGAAA,QAAQ,OAAA;AACtC,mCAA8B;AAArB,4FAAA,IAAI,OAAA","sourcesContent":["export { IconColor, IconName, IconSize } from '../../types';\nexport { Icon } from './Icon';\nexport type { IconProps } from './Icon.types';\n"]}

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

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

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

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

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

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

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

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

package/dist/components/Icon/index.mjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/Icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,gDAAgD;AACxF,OAAO,EAAE,IAAI,EAAE,mBAAe","sourcesContent":["export { IconColor, IconName, IconSize } from '@metamask-previews/design-system-shared';\nexport { Icon } from './Icon';\nexport type { IconProps } from './Icon.types';\n"]}
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/Icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,8BAAoB;AAC5D,OAAO,EAAE,IAAI,EAAE,mBAAe","sourcesContent":["export { IconColor, IconName, IconSize } from '../../types';\nexport { Icon } from './Icon';\nexport type { IconProps } from './Icon.types';\n"]}

package/dist/components/IconAlert/IconAlert.cjs

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconAlert = void 0;
+const react_1 = __importDefault(require("react"));
+const Icon_1 = require("../Icon/index.cjs");
+const IconAlert_constants_1 = require("./IconAlert.constants.cjs");
+const IconAlert = ({ severity, ...props }) => {
+    const { name, color } = IconAlert_constants_1.ICON_ALERT_SEVERITY_MAP[severity];
+    return <Icon_1.Icon {...props} color={color} name={name}/>;
+};
+exports.IconAlert = IconAlert;
+exports.IconAlert.displayName = 'IconAlert';
+//# sourceMappingURL=IconAlert.cjs.map

package/dist/components/IconAlert/IconAlert.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconAlert.cjs","sourceRoot":"","sources":["../../../src/components/IconAlert/IconAlert.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,4CAA+B;AAE/B,mEAAgE;AAGzD,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAkB,EAAE,EAAE;IAClE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,6CAAuB,CAAC,QAAQ,CAAC,CAAC;IAC1D,OAAO,CAAC,WAAI,CAAC,IAAI,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAG,CAAC;AACvD,CAAC,CAAC;AAHW,QAAA,SAAS,aAGpB;AAEF,iBAAS,CAAC,WAAW,GAAG,WAAW,CAAC","sourcesContent":["import React from 'react';\n\nimport { Icon } from '../Icon';\n\nimport { ICON_ALERT_SEVERITY_MAP } from './IconAlert.constants';\nimport type { IconAlertProps } from './IconAlert.types';\n\nexport const IconAlert = ({ severity, ...props }: IconAlertProps) => {\n  const { name, color } = ICON_ALERT_SEVERITY_MAP[severity];\n  return <Icon {...props} color={color} name={name} />;\n};\n\nIconAlert.displayName = 'IconAlert';\n"]}

package/dist/components/IconAlert/IconAlert.constants.cjs

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ICON_ALERT_SEVERITY_MAP = void 0;
+const design_system_shared_1 = require("@metamask-previews/design-system-shared");
+const types_1 = require("../../types/index.cjs");
+exports.ICON_ALERT_SEVERITY_MAP = {
+    [design_system_shared_1.IconAlertSeverity.Info]: {
+        name: types_1.IconName.Info,
+        color: types_1.IconColor.PrimaryDefault,
+    },
+    [design_system_shared_1.IconAlertSeverity.Success]: {
+        name: types_1.IconName.Confirmation,
+        color: types_1.IconColor.SuccessDefault,
+    },
+    [design_system_shared_1.IconAlertSeverity.Warning]: {
+        name: types_1.IconName.Danger,
+        color: types_1.IconColor.WarningDefault,
+    },
+    [design_system_shared_1.IconAlertSeverity.Error]: {
+        name: types_1.IconName.Error,
+        color: types_1.IconColor.ErrorDefault,
+    },
+};
+//# sourceMappingURL=IconAlert.constants.cjs.map

package/dist/components/IconAlert/IconAlert.constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconAlert.constants.cjs","sourceRoot":"","sources":["../../../src/components/IconAlert/IconAlert.constants.ts"],"names":[],"mappings":";;;AAAA,kFAA4E;AAE5E,iDAAkD;AAErC,QAAA,uBAAuB,GAGhC;IACF,CAAC,wCAAiB,CAAC,IAAI,CAAC,EAAE;QACxB,IAAI,EAAE,gBAAQ,CAAC,IAAI;QACnB,KAAK,EAAE,iBAAS,CAAC,cAAc;KAChC;IACD,CAAC,wCAAiB,CAAC,OAAO,CAAC,EAAE;QAC3B,IAAI,EAAE,gBAAQ,CAAC,YAAY;QAC3B,KAAK,EAAE,iBAAS,CAAC,cAAc;KAChC;IACD,CAAC,wCAAiB,CAAC,OAAO,CAAC,EAAE;QAC3B,IAAI,EAAE,gBAAQ,CAAC,MAAM;QACrB,KAAK,EAAE,iBAAS,CAAC,cAAc;KAChC;IACD,CAAC,wCAAiB,CAAC,KAAK,CAAC,EAAE;QACzB,IAAI,EAAE,gBAAQ,CAAC,KAAK;QACpB,KAAK,EAAE,iBAAS,CAAC,YAAY;KAC9B;CACF,CAAC","sourcesContent":["import { IconAlertSeverity } from '@metamask-previews/design-system-shared';\n\nimport { IconColor, IconName } from '../../types';\n\nexport const ICON_ALERT_SEVERITY_MAP: Record<\n  IconAlertSeverity,\n  { name: IconName; color: IconColor }\n> = {\n  [IconAlertSeverity.Info]: {\n    name: IconName.Info,\n    color: IconColor.PrimaryDefault,\n  },\n  [IconAlertSeverity.Success]: {\n    name: IconName.Confirmation,\n    color: IconColor.SuccessDefault,\n  },\n  [IconAlertSeverity.Warning]: {\n    name: IconName.Danger,\n    color: IconColor.WarningDefault,\n  },\n  [IconAlertSeverity.Error]: {\n    name: IconName.Error,\n    color: IconColor.ErrorDefault,\n  },\n};\n"]}

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

@@ -0,0 +1,7 @@
+import { IconAlertSeverity } from "@metamask-previews/design-system-shared";
+import { IconColor, IconName } from "../../types/index.cjs";
+export declare const ICON_ALERT_SEVERITY_MAP: Record<IconAlertSeverity, {
+    name: IconName;
+    color: IconColor;
+}>;
+//# sourceMappingURL=IconAlert.constants.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconAlert.constants.d.cts","sourceRoot":"","sources":["../../../src/components/IconAlert/IconAlert.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,gDAAgD;AAE5E,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,8BAAoB;AAElD,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAC1C,iBAAiB,EACjB;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,KAAK,EAAE,SAAS,CAAA;CAAE,CAkBrC,CAAC"}

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

@@ -0,0 +1,7 @@
+import { IconAlertSeverity } from "@metamask-previews/design-system-shared";
+import { IconColor, IconName } from "../../types/index.mjs";
+export declare const ICON_ALERT_SEVERITY_MAP: Record<IconAlertSeverity, {
+    name: IconName;
+    color: IconColor;
+}>;
+//# sourceMappingURL=IconAlert.constants.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconAlert.constants.d.mts","sourceRoot":"","sources":["../../../src/components/IconAlert/IconAlert.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,gDAAgD;AAE5E,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,8BAAoB;AAElD,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAC1C,iBAAiB,EACjB;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,KAAK,EAAE,SAAS,CAAA;CAAE,CAkBrC,CAAC"}

package/dist/components/IconAlert/IconAlert.constants.mjs

@@ -0,0 +1,21 @@
+import { IconAlertSeverity } from "@metamask-previews/design-system-shared";
+import { IconColor, IconName } from "../../types/index.mjs";
+export const ICON_ALERT_SEVERITY_MAP = {
+    [IconAlertSeverity.Info]: {
+        name: IconName.Info,
+        color: IconColor.PrimaryDefault,
+    },
+    [IconAlertSeverity.Success]: {
+        name: IconName.Confirmation,
+        color: IconColor.SuccessDefault,
+    },
+    [IconAlertSeverity.Warning]: {
+        name: IconName.Danger,
+        color: IconColor.WarningDefault,
+    },
+    [IconAlertSeverity.Error]: {
+        name: IconName.Error,
+        color: IconColor.ErrorDefault,
+    },
+};
+//# sourceMappingURL=IconAlert.constants.mjs.map

package/dist/components/IconAlert/IconAlert.constants.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconAlert.constants.mjs","sourceRoot":"","sources":["../../../src/components/IconAlert/IconAlert.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,gDAAgD;AAE5E,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,8BAAoB;AAElD,MAAM,CAAC,MAAM,uBAAuB,GAGhC;IACF,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE;QACxB,IAAI,EAAE,QAAQ,CAAC,IAAI;QACnB,KAAK,EAAE,SAAS,CAAC,cAAc;KAChC;IACD,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE;QAC3B,IAAI,EAAE,QAAQ,CAAC,YAAY;QAC3B,KAAK,EAAE,SAAS,CAAC,cAAc;KAChC;IACD,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE;QAC3B,IAAI,EAAE,QAAQ,CAAC,MAAM;QACrB,KAAK,EAAE,SAAS,CAAC,cAAc;KAChC;IACD,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAAE;QACzB,IAAI,EAAE,QAAQ,CAAC,KAAK;QACpB,KAAK,EAAE,SAAS,CAAC,YAAY;KAC9B;CACF,CAAC","sourcesContent":["import { IconAlertSeverity } from '@metamask-previews/design-system-shared';\n\nimport { IconColor, IconName } from '../../types';\n\nexport const ICON_ALERT_SEVERITY_MAP: Record<\n  IconAlertSeverity,\n  { name: IconName; color: IconColor }\n> = {\n  [IconAlertSeverity.Info]: {\n    name: IconName.Info,\n    color: IconColor.PrimaryDefault,\n  },\n  [IconAlertSeverity.Success]: {\n    name: IconName.Confirmation,\n    color: IconColor.SuccessDefault,\n  },\n  [IconAlertSeverity.Warning]: {\n    name: IconName.Danger,\n    color: IconColor.WarningDefault,\n  },\n  [IconAlertSeverity.Error]: {\n    name: IconName.Error,\n    color: IconColor.ErrorDefault,\n  },\n};\n"]}

package/dist/components/IconAlert/IconAlert.d.cts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { IconAlertProps } from "./IconAlert.types.cjs";
+export declare const IconAlert: {
+    ({ severity, ...props }: IconAlertProps): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=IconAlert.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconAlert.d.cts","sourceRoot":"","sources":["../../../src/components/IconAlert/IconAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc;AAK1B,OAAO,KAAK,EAAE,cAAc,EAAE,8BAA0B;AAExD,eAAO,MAAM,SAAS;6BAA4B,cAAc;;CAG/D,CAAC"}

package/dist/components/IconAlert/IconAlert.d.mts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { IconAlertProps } from "./IconAlert.types.mjs";
+export declare const IconAlert: {
+    ({ severity, ...props }: IconAlertProps): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=IconAlert.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconAlert.d.mts","sourceRoot":"","sources":["../../../src/components/IconAlert/IconAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc;AAK1B,OAAO,KAAK,EAAE,cAAc,EAAE,8BAA0B;AAExD,eAAO,MAAM,SAAS;6BAA4B,cAAc;;CAG/D,CAAC"}

package/dist/components/IconAlert/IconAlert.mjs

@@ -0,0 +1,16 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import $React from "react";
+const React = $importDefault($React);
+import { Icon } from "../Icon/index.mjs";
+import { ICON_ALERT_SEVERITY_MAP } from "./IconAlert.constants.mjs";
+export const IconAlert = ({ severity, ...props }) => {
+    const { name, color } = ICON_ALERT_SEVERITY_MAP[severity];
+    return <Icon {...props} color={color} name={name}/>;
+};
+IconAlert.displayName = 'IconAlert';
+//# sourceMappingURL=IconAlert.mjs.map

package/dist/components/IconAlert/IconAlert.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconAlert.mjs","sourceRoot":"","sources":["../../../src/components/IconAlert/IconAlert.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAE/B,OAAO,EAAE,uBAAuB,EAAE,kCAA8B;AAGhE,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAkB,EAAE,EAAE;IAClE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,uBAAuB,CAAC,QAAQ,CAAC,CAAC;IAC1D,OAAO,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAG,CAAC;AACvD,CAAC,CAAC;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC","sourcesContent":["import React from 'react';\n\nimport { Icon } from '../Icon';\n\nimport { ICON_ALERT_SEVERITY_MAP } from './IconAlert.constants';\nimport type { IconAlertProps } from './IconAlert.types';\n\nexport const IconAlert = ({ severity, ...props }: IconAlertProps) => {\n  const { name, color } = ICON_ALERT_SEVERITY_MAP[severity];\n  return <Icon {...props} color={color} name={name} />;\n};\n\nIconAlert.displayName = 'IconAlert';\n"]}

package/dist/components/IconAlert/IconAlert.types.cjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconAlert.types.cjs","sourceRoot":"","sources":["../../../src/components/IconAlert/IconAlert.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { IconAlertPropsShared } from '@metamask-previews/design-system-shared';\n\nimport type { IconProps } from '../Icon';\n\nexport type IconAlertProps = IconAlertPropsShared &\n  Omit<IconProps, 'name' | 'color' | keyof IconAlertPropsShared>;\n"]}

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

@@ -0,0 +1,4 @@
+import type { IconAlertPropsShared } from "@metamask-previews/design-system-shared";
+import type { IconProps } from "../Icon/index.cjs";
+export type IconAlertProps = IconAlertPropsShared & Omit<IconProps, 'name' | 'color' | keyof IconAlertPropsShared>;
+//# sourceMappingURL=IconAlert.types.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconAlert.types.d.cts","sourceRoot":"","sources":["../../../src/components/IconAlert/IconAlert.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,gDAAgD;AAEpF,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,MAAM,MAAM,cAAc,GAAG,oBAAoB,GAC/C,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,oBAAoB,CAAC,CAAC"}

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

@@ -0,0 +1,4 @@
+import type { IconAlertPropsShared } from "@metamask-previews/design-system-shared";
+import type { IconProps } from "../Icon/index.mjs";
+export type IconAlertProps = IconAlertPropsShared & Omit<IconProps, 'name' | 'color' | keyof IconAlertPropsShared>;
+//# sourceMappingURL=IconAlert.types.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconAlert.types.d.mts","sourceRoot":"","sources":["../../../src/components/IconAlert/IconAlert.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,gDAAgD;AAEpF,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC,MAAM,MAAM,cAAc,GAAG,oBAAoB,GAC/C,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,oBAAoB,CAAC,CAAC"}

package/dist/components/IconAlert/IconAlert.types.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=IconAlert.types.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconAlert.types.mjs","sourceRoot":"","sources":["../../../src/components/IconAlert/IconAlert.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { IconAlertPropsShared } from '@metamask-previews/design-system-shared';\n\nimport type { IconProps } from '../Icon';\n\nexport type IconAlertProps = IconAlertPropsShared &\n  Omit<IconProps, 'name' | 'color' | keyof IconAlertPropsShared>;\n"]}

package/dist/components/IconAlert/index.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconAlert = exports.IconAlertSeverity = void 0;
+var design_system_shared_1 = require("@metamask-previews/design-system-shared");
+Object.defineProperty(exports, "IconAlertSeverity", { enumerable: true, get: function () { return design_system_shared_1.IconAlertSeverity; } });
+var IconAlert_1 = require("./IconAlert.cjs");
+Object.defineProperty(exports, "IconAlert", { enumerable: true, get: function () { return IconAlert_1.IconAlert; } });
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/IconAlert/index.ts"],"names":[],"mappings":";;;AAAA,gFAA4E;AAAnE,yHAAA,iBAAiB,OAAA;AAC1B,6CAAwC;AAA/B,sGAAA,SAAS,OAAA","sourcesContent":["export { IconAlertSeverity } from '@metamask-previews/design-system-shared';\nexport { IconAlert } from './IconAlert';\nexport type { IconAlertProps } from './IconAlert.types';\n"]}

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

@@ -0,0 +1,4 @@
+export { IconAlertSeverity } from "@metamask-previews/design-system-shared";
+export { IconAlert } from "./IconAlert.cjs";
+export type { IconAlertProps } from "./IconAlert.types.cjs";
+//# sourceMappingURL=index.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/IconAlert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,gDAAgD;AAC5E,OAAO,EAAE,SAAS,EAAE,wBAAoB;AACxC,YAAY,EAAE,cAAc,EAAE,8BAA0B"}

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

@@ -0,0 +1,4 @@
+export { IconAlertSeverity } from "@metamask-previews/design-system-shared";
+export { IconAlert } from "./IconAlert.mjs";
+export type { IconAlertProps } from "./IconAlert.types.mjs";
+//# sourceMappingURL=index.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/IconAlert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,gDAAgD;AAC5E,OAAO,EAAE,SAAS,EAAE,wBAAoB;AACxC,YAAY,EAAE,cAAc,EAAE,8BAA0B"}

package/dist/components/IconAlert/index.mjs

@@ -0,0 +1,3 @@
+export { IconAlertSeverity } from "@metamask-previews/design-system-shared";
+export { IconAlert } from "./IconAlert.mjs";
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/IconAlert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,gDAAgD;AAC5E,OAAO,EAAE,SAAS,EAAE,wBAAoB","sourcesContent":["export { IconAlertSeverity } from '@metamask-previews/design-system-shared';\nexport { IconAlert } from './IconAlert';\nexport type { IconAlertProps } from './IconAlert.types';\n"]}

package/dist/components/Input/Input.cjs

@@ -1,23 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Input = void 0;
+const design_system_shared_1 = require("@metamask-previews/design-system-shared");
 const design_system_twrnc_preset_1 = require("@metamask-previews/design-system-twrnc-preset");
 const design_tokens_1 = require("@metamask-previews/design-tokens");
 const react_1 = require("react");
 const react_native_1 = require("react-native/index.js");
-const types_1 = require("../../types/index.cjs");
 const Text_constants_1 = require("../Text/Text.constants.cjs");
 const Input_constants_1 = require("./Input.constants.cjs");
-exports.Input = (0, react_1.forwardRef)(({ style, textVariant = types_1.TextVariant.BodyMd, isStateStylesDisabled, isDisabled = false, isReadonly = false, value, placeholder, twClassName, onBlur, onFocus, autoFocus = false, ...props }, ref) => {
+exports.Input = (0, react_1.forwardRef)(({ style, textVariant = design_system_shared_1.TextVariant.BodyMd, isStateStylesDisabled, isDisabled = false, isReadonly = false, value, placeholder, twClassName, onBlur, onFocus, autoFocus = false, ...props }, ref) => {
     const [isFocused, setIsFocused] = (0, react_1.useState)(autoFocus);
     const tw = (0, design_system_twrnc_preset_1.useTailwind)();
     const theme = (0, design_system_twrnc_preset_1.useTheme)();
     const placeholderTextColor = (0, react_1.useMemo)(() => theme === design_system_twrnc_preset_1.Theme.Light
         ? design_tokens_1.lightTheme.colors.text.alternative
         : design_tokens_1.darkTheme.colors.text.alternative, [theme]);
-    const finalFontWeight = Text_constants_1.MAP_TEXT_VARIANT_FONTWEIGHT[textVariant];
+    const finalFontWeight = Text_constants_1.TWCLASSMAP_TEXT_VARIANT_FONTWEIGHT[textVariant];
     const fontSuffix = Text_constants_1.TWCLASSMAP_TEXT_FONTWEIGHT[finalFontWeight];
-    const fontClass = `font-${types_1.FontFamily.Default}${fontSuffix}`;
+    const fontClass = `font-${design_system_shared_1.FontFamily.Default}${fontSuffix}`;
     const hasPlaceholder = placeholder !== undefined && placeholder !== null && placeholder !== '';
     // Only apply placeholder-mode styling when a placeholder is present and
     // the controlled value is empty. This keeps the iOS lineHeight workaround

package/dist/components/Input/Input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Input.cjs","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Theme,\n  useTailwind,\n  useTheme,\n} from '@metamask-previews/design-system-twrnc-preset';\nimport { darkTheme, lightTheme } from '@metamask-previews/design-tokens';\nimport { forwardRef, useCallback, useMemo, useState } from 'react';\nimport { Platform, TextInput } from 'react-native';\n\nimport { FontFamily, TextVariant } from '../../types';\nimport {\n  MAP_TEXT_VARIANT_FONTWEIGHT,\n  TWCLASSMAP_TEXT_FONTWEIGHT,\n} from '../Text/Text.constants';\n\nimport { MAP_TEXT_VARIANT_INPUT_METRICS } from './Input.constants';\nimport type { InputProps } from './Input.types';\n\nexport const Input = forwardRef<TextInput, InputProps>(\n  (\n    {\n      style,\n      textVariant = TextVariant.BodyMd,\n      isStateStylesDisabled,\n      isDisabled = false,\n      isReadonly = false,\n      value,\n      placeholder,\n      twClassName,\n      onBlur,\n      onFocus,\n      autoFocus = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const [isFocused, setIsFocused] = useState(autoFocus);\n    const tw = useTailwind();\n    const theme = useTheme();\n\n    const placeholderTextColor = useMemo(\n      () =>\n        theme === Theme.Light\n          ? lightTheme.colors.text.alternative\n          : darkTheme.colors.text.alternative,\n      [theme],\n    );\n\n    const finalFontWeight = MAP_TEXT_VARIANT_FONTWEIGHT[textVariant];\n    const fontSuffix = TWCLASSMAP_TEXT_FONTWEIGHT[finalFontWeight];\n    const fontClass = `font-${FontFamily.Default}${fontSuffix}`;\n    const hasPlaceholder =\n      placeholder !== undefined && placeholder !== null && placeholder !== '';\n    // Only apply placeholder-mode styling when a placeholder is present and\n    // the controlled value is empty. This keeps the iOS lineHeight workaround\n    // scoped to the placeholder-visible state without affecting typed text.\n    const isPlaceholderVisible = hasPlaceholder && value === '';\n\n    const inputStyle = useMemo(\n      () =>\n        tw.style(\n          fontClass,\n          'text-default',\n          'bg-default',\n          'border',\n          'border-transparent',\n          !isStateStylesDisabled && isDisabled && 'opacity-50',\n          !isStateStylesDisabled &&\n            !isDisabled &&\n            isFocused &&\n            'border-primary-default',\n          twClassName,\n        ),\n      [\n        fontClass,\n        isStateStylesDisabled,\n        isDisabled,\n        isFocused,\n        twClassName,\n        tw,\n      ],\n    );\n\n    const variantTextStyle = useMemo(\n      () => MAP_TEXT_VARIANT_INPUT_METRICS[textVariant],\n      [textVariant],\n    );\n\n    /* istanbul ignore next: handler body covered by focus/blur tests */\n    const onBlurHandler = useCallback(\n      (e: Parameters<NonNullable<InputProps['onBlur']>>[0]) => {\n        if (!isDisabled) {\n          setIsFocused(false);\n          onBlur?.(e);\n        }\n      },\n      [isDisabled, onBlur],\n    );\n\n    /* istanbul ignore next: handler body covered by focus/blur tests */\n    const onFocusHandler = useCallback(\n      (e: Parameters<NonNullable<InputProps['onFocus']>>[0]) => {\n        if (!isDisabled) {\n          setIsFocused(true);\n          onFocus?.(e);\n        }\n      },\n      [isDisabled, onFocus],\n    );\n    const resolvedStyle = [\n      inputStyle,\n      variantTextStyle,\n      // iOS-only workaround: when a placeholder is visible, native iOS\n      // TextInput can render placeholder text vertically offset.\n      // Keep this iOS-only because lineHeight: 0 can collapse text on Android.\n      Platform.OS === 'ios' &&\n        isPlaceholderVisible && { lineHeight: 0 as const },\n      style,\n    ].filter(Boolean);\n\n    return (\n      <TextInput\n        ref={ref}\n        placeholderTextColor={placeholderTextColor}\n        {...props}\n        placeholder={placeholder}\n        value={value}\n        style={resolvedStyle}\n        editable={!isDisabled && !isReadonly}\n        autoFocus={autoFocus}\n        onBlur={onBlurHandler}\n        onFocus={onFocusHandler}\n      />\n    );\n  },\n);\n"]}
+{"version":3,"file":"Input.cjs","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FontFamily, TextVariant } from '@metamask-previews/design-system-shared';\nimport {\n  Theme,\n  useTailwind,\n  useTheme,\n} from '@metamask-previews/design-system-twrnc-preset';\nimport { darkTheme, lightTheme } from '@metamask-previews/design-tokens';\nimport { forwardRef, useCallback, useMemo, useState } from 'react';\nimport { Platform, TextInput } from 'react-native';\n\nimport {\n  TWCLASSMAP_TEXT_VARIANT_FONTWEIGHT,\n  TWCLASSMAP_TEXT_FONTWEIGHT,\n} from '../Text/Text.constants';\n\nimport { MAP_TEXT_VARIANT_INPUT_METRICS } from './Input.constants';\nimport type { InputProps } from './Input.types';\n\nexport const Input = forwardRef<TextInput, InputProps>(\n  (\n    {\n      style,\n      textVariant = TextVariant.BodyMd,\n      isStateStylesDisabled,\n      isDisabled = false,\n      isReadonly = false,\n      value,\n      placeholder,\n      twClassName,\n      onBlur,\n      onFocus,\n      autoFocus = false,\n      ...props\n    },\n    ref,\n  ) => {\n    const [isFocused, setIsFocused] = useState(autoFocus);\n    const tw = useTailwind();\n    const theme = useTheme();\n\n    const placeholderTextColor = useMemo(\n      () =>\n        theme === Theme.Light\n          ? lightTheme.colors.text.alternative\n          : darkTheme.colors.text.alternative,\n      [theme],\n    );\n\n    const finalFontWeight = TWCLASSMAP_TEXT_VARIANT_FONTWEIGHT[textVariant];\n    const fontSuffix = TWCLASSMAP_TEXT_FONTWEIGHT[finalFontWeight];\n    const fontClass = `font-${FontFamily.Default}${fontSuffix}`;\n    const hasPlaceholder =\n      placeholder !== undefined && placeholder !== null && placeholder !== '';\n    // Only apply placeholder-mode styling when a placeholder is present and\n    // the controlled value is empty. This keeps the iOS lineHeight workaround\n    // scoped to the placeholder-visible state without affecting typed text.\n    const isPlaceholderVisible = hasPlaceholder && value === '';\n\n    const inputStyle = useMemo(\n      () =>\n        tw.style(\n          fontClass,\n          'text-default',\n          'bg-default',\n          'border',\n          'border-transparent',\n          !isStateStylesDisabled && isDisabled && 'opacity-50',\n          !isStateStylesDisabled &&\n            !isDisabled &&\n            isFocused &&\n            'border-primary-default',\n          twClassName,\n        ),\n      [\n        fontClass,\n        isStateStylesDisabled,\n        isDisabled,\n        isFocused,\n        twClassName,\n        tw,\n      ],\n    );\n\n    const variantTextStyle = useMemo(\n      () => MAP_TEXT_VARIANT_INPUT_METRICS[textVariant],\n      [textVariant],\n    );\n\n    /* istanbul ignore next: handler body covered by focus/blur tests */\n    const onBlurHandler = useCallback(\n      (e: Parameters<NonNullable<InputProps['onBlur']>>[0]) => {\n        if (!isDisabled) {\n          setIsFocused(false);\n          onBlur?.(e);\n        }\n      },\n      [isDisabled, onBlur],\n    );\n\n    /* istanbul ignore next: handler body covered by focus/blur tests */\n    const onFocusHandler = useCallback(\n      (e: Parameters<NonNullable<InputProps['onFocus']>>[0]) => {\n        if (!isDisabled) {\n          setIsFocused(true);\n          onFocus?.(e);\n        }\n      },\n      [isDisabled, onFocus],\n    );\n    const resolvedStyle = [\n      inputStyle,\n      variantTextStyle,\n      // iOS-only workaround: when a placeholder is visible, native iOS\n      // TextInput can render placeholder text vertically offset.\n      // Keep this iOS-only because lineHeight: 0 can collapse text on Android.\n      Platform.OS === 'ios' &&\n        isPlaceholderVisible && { lineHeight: 0 as const },\n      style,\n    ].filter(Boolean);\n\n    return (\n      <TextInput\n        ref={ref}\n        placeholderTextColor={placeholderTextColor}\n        {...props}\n        placeholder={placeholder}\n        value={value}\n        style={resolvedStyle}\n        editable={!isDisabled && !isReadonly}\n        autoFocus={autoFocus}\n        onBlur={onBlurHandler}\n        onFocus={onFocusHandler}\n      />\n    );\n  },\n);\n"]}

package/dist/components/Input/Input.constants.cjs

@@ -1,67 +1,67 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MAP_TEXT_VARIANT_INPUT_METRICS = void 0;
+const design_system_shared_1 = require("@metamask-previews/design-system-shared");
 const design_tokens_1 = require("@metamask-previews/design-tokens");
-const types_1 = require("../../types/index.cjs");
 /**
  * Typographic metrics for Input: same tokens as `text-*` utilities but **without** `lineHeight`.
  * React Native `TextInput` aligns single-line text more predictably when line height is not set
  * from the design-system paragraph specs (matches legacy / temp Input.styles behavior).
  */
 exports.MAP_TEXT_VARIANT_INPUT_METRICS = {
-    [types_1.TextVariant.DisplayLg]: {
+    [design_system_shared_1.TextVariant.DisplayLg]: {
         fontSize: design_tokens_1.typography.sDisplayLG.fontSize,
         letterSpacing: design_tokens_1.typography.sDisplayLG.letterSpacing,
     },
-    [types_1.TextVariant.DisplayMd]: {
+    [design_system_shared_1.TextVariant.DisplayMd]: {
         fontSize: design_tokens_1.typography.sDisplayMD.fontSize,
         letterSpacing: design_tokens_1.typography.sDisplayMD.letterSpacing,
     },
-    [types_1.TextVariant.HeadingLg]: {
+    [design_system_shared_1.TextVariant.HeadingLg]: {
         fontSize: design_tokens_1.typography.sHeadingLG.fontSize,
         letterSpacing: design_tokens_1.typography.sHeadingLG.letterSpacing,
     },
-    [types_1.TextVariant.HeadingMd]: {
+    [design_system_shared_1.TextVariant.HeadingMd]: {
         fontSize: design_tokens_1.typography.sHeadingMD.fontSize,
         letterSpacing: design_tokens_1.typography.sHeadingMD.letterSpacing,
     },
-    [types_1.TextVariant.HeadingSm]: {
+    [design_system_shared_1.TextVariant.HeadingSm]: {
         fontSize: design_tokens_1.typography.sHeadingSM.fontSize,
         letterSpacing: design_tokens_1.typography.sHeadingSM.letterSpacing,
     },
-    [types_1.TextVariant.BodyLg]: {
+    [design_system_shared_1.TextVariant.BodyLg]: {
         fontSize: design_tokens_1.typography.sBodyLGMedium.fontSize,
         letterSpacing: design_tokens_1.typography.sBodyLGMedium.letterSpacing,
     },
-    [types_1.TextVariant.BodyMd]: {
+    [design_system_shared_1.TextVariant.BodyMd]: {
         fontSize: design_tokens_1.typography.sBodyMD.fontSize,
         letterSpacing: design_tokens_1.typography.sBodyMD.letterSpacing,
     },
-    [types_1.TextVariant.BodySm]: {
+    [design_system_shared_1.TextVariant.BodySm]: {
         fontSize: design_tokens_1.typography.sBodySM.fontSize,
         letterSpacing: design_tokens_1.typography.sBodySM.letterSpacing,
     },
-    [types_1.TextVariant.BodyXs]: {
+    [design_system_shared_1.TextVariant.BodyXs]: {
         fontSize: design_tokens_1.typography.sBodyXS.fontSize,
         letterSpacing: design_tokens_1.typography.sBodyXS.letterSpacing,
     },
-    [types_1.TextVariant.PageHeading]: {
+    [design_system_shared_1.TextVariant.PageHeading]: {
         fontSize: design_tokens_1.typography.sPageHeading.fontSize,
         letterSpacing: design_tokens_1.typography.sPageHeading.letterSpacing,
     },
-    [types_1.TextVariant.SectionHeading]: {
+    [design_system_shared_1.TextVariant.SectionHeading]: {
         fontSize: design_tokens_1.typography.sSectionHeading.fontSize,
         letterSpacing: design_tokens_1.typography.sSectionHeading.letterSpacing,
     },
-    [types_1.TextVariant.ButtonLabelMd]: {
+    [design_system_shared_1.TextVariant.ButtonLabelMd]: {
         fontSize: design_tokens_1.typography.sButtonLabelMd.fontSize,
         letterSpacing: design_tokens_1.typography.sButtonLabelMd.letterSpacing,
     },
-    [types_1.TextVariant.ButtonLabelLg]: {
+    [design_system_shared_1.TextVariant.ButtonLabelLg]: {
         fontSize: design_tokens_1.typography.sButtonLabelLg.fontSize,
         letterSpacing: design_tokens_1.typography.sButtonLabelLg.letterSpacing,
     },
-    [types_1.TextVariant.AmountDisplayLg]: {
+    [design_system_shared_1.TextVariant.AmountDisplayLg]: {
         fontSize: design_tokens_1.typography.sAmountDisplayLg.fontSize,
         letterSpacing: design_tokens_1.typography.sAmountDisplayLg.letterSpacing,
     },