@metamask-previews/design-system-react 0.17.0-preview.9d477a9 → 0.17.1-preview.1679aa9

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

@@ -1,3 +1,3 @@
-import { IconSize } from "@metamask-previews/design-system-shared";
+import { IconSize } from "../../types/index.mjs";
 export declare const TWCLASSMAP_ICON_SIZE_DIMENSION: Record<IconSize, string>;
 //# sourceMappingURL=Icon.constants.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.constants.d.mts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,gDAAgD;AAEnE,eAAO,MAAM,8BAA8B,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAMnE,CAAC"}
+{"version":3,"file":"Icon.constants.d.mts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,8BAAoB;AAEvC,eAAO,MAAM,8BAA8B,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAMnE,CAAC"}

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

@@ -1,4 +1,4 @@
-import { IconSize } from "@metamask-previews/design-system-shared";
+import { IconSize } from "../../types/index.mjs";
 export const TWCLASSMAP_ICON_SIZE_DIMENSION = {
     [IconSize.Xs]: 'w-3 h-3',
     [IconSize.Sm]: 'w-4 h-4',

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.constants.mjs","sourceRoot":"","sources":["../../../src/components/Icon/Icon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,gDAAgD;AAEnE,MAAM,CAAC,MAAM,8BAA8B,GAA6B;IACtE,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO;CAClC,CAAC","sourcesContent":["import { IconSize } from '@metamask-previews/design-system-shared';\n\nexport const TWCLASSMAP_ICON_SIZE_DIMENSION: Record<IconSize, string> = {\n  [IconSize.Xs]: 'w-3 h-3', // 12px\n  [IconSize.Sm]: 'w-4 h-4', // 16px\n  [IconSize.Md]: 'w-5 h-5', // 20px\n  [IconSize.Lg]: 'w-6 h-6', // 24px\n  [IconSize.Xl]: 'w-8 h-8', // 32px\n};\n"]}
+{"version":3,"file":"Icon.constants.mjs","sourceRoot":"","sources":["../../../src/components/Icon/Icon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,8BAAoB;AAEvC,MAAM,CAAC,MAAM,8BAA8B,GAA6B;IACtE,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS;IACxB,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO;CAClC,CAAC","sourcesContent":["import { IconSize } from '../../types';\n\nexport const TWCLASSMAP_ICON_SIZE_DIMENSION: Record<IconSize, string> = {\n  [IconSize.Xs]: 'w-3 h-3', // 12px\n  [IconSize.Sm]: 'w-4 h-4', // 16px\n  [IconSize.Md]: 'w-5 h-5', // 20px\n  [IconSize.Lg]: 'w-6 h-6', // 24px\n  [IconSize.Xl]: 'w-8 h-8', // 32px\n};\n"]}

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

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

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

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

package/dist/components/Icon/Icon.mjs

@@ -4,9 +4,9 @@ function $importDefault(module) {
     }
     return module;
 }
-import { IconSize, IconColor } from "@metamask-previews/design-system-shared";
 import $React from "react";
 const React = $importDefault($React);
+import { IconSize, IconColor } from "../../types/index.mjs";
 import { twMerge } from "../../utils/tw-merge.mjs";
 import { TWCLASSMAP_ICON_SIZE_DIMENSION } from "./Icon.constants.mjs";
 import { Icons } from "./icons/index.mjs";

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,QAAQ,EAAE,SAAS,EAAE,gDAAgD;AAC9E,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAE/C,OAAO,EAAE,8BAA8B,EAAE,6BAAyB;AAElE,OAAO,EAAE,KAAK,EAAE,0BAAgB;AAEhC,MAAM,CAAC,MAAM,IAAI,GAAwB,CAAC,EACxC,IAAI,EACJ,IAAI,GAAG,QAAQ,CAAC,EAAE,EAClB,KAAK,GAAG,SAAS,CAAC,WAAW,EAC7B,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;QACtC,OAAO,IAAI,CAAC;KACb;IAED,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;IAElC,IAAI,CAAC,aAAa,EAAE;QAClB,OAAO,CAAC,IAAI,CAAC,SAAS,IAAI,aAAa,CAAC,CAAC;QACzC,OAAO,IAAI,CAAC;KACb;IAED,MAAM,eAAe,GAAG,OAAO,CAC7B,cAAc,EACd,8BAA8B,CAAC,IAAI,CAAC,EACpC,KAAK,EACL,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,aAAa,IACZ,SAAS,EAAE,eAAe,KACrB,KAAuC,EAC5C,KAAK,EAAE,KAAK,GACZ,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { IconSize, IconColor } from '@metamask-previews/design-system-shared';\nimport React from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\n\nimport { TWCLASSMAP_ICON_SIZE_DIMENSION } from './Icon.constants';\nimport type { IconProps } from './Icon.types';\nimport { Icons } from './icons';\n\nexport const Icon: React.FC<IconProps> = ({\n  name,\n  size = IconSize.Md,\n  color = IconColor.IconDefault,\n  className,\n  style,\n  ...props\n}) => {\n  if (!name) {\n    console.warn('Icon name is required');\n    return null;\n  }\n\n  const IconComponent = Icons[name];\n\n  if (!IconComponent) {\n    console.warn(`Icon \"${name}\" not found`);\n    return null;\n  }\n\n  const mergedClassName = twMerge(\n    'inline-block',\n    TWCLASSMAP_ICON_SIZE_DIMENSION[size],\n    color,\n    className,\n  );\n\n  return (\n    <IconComponent\n      className={mergedClassName}\n      {...(props as React.SVGProps<SVGSVGElement>)}\n      style={style}\n    />\n  );\n};\n"]}
+{"version":3,"file":"Icon.mjs","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,8BAAoB;AAClD,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAE/C,OAAO,EAAE,8BAA8B,EAAE,6BAAyB;AAElE,OAAO,EAAE,KAAK,EAAE,0BAAgB;AAEhC,MAAM,CAAC,MAAM,IAAI,GAAwB,CAAC,EACxC,IAAI,EACJ,IAAI,GAAG,QAAQ,CAAC,EAAE,EAClB,KAAK,GAAG,SAAS,CAAC,WAAW,EAC7B,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;QACtC,OAAO,IAAI,CAAC;KACb;IAED,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;IAElC,IAAI,CAAC,aAAa,EAAE;QAClB,OAAO,CAAC,IAAI,CAAC,SAAS,IAAI,aAAa,CAAC,CAAC;QACzC,OAAO,IAAI,CAAC;KACb;IAED,MAAM,eAAe,GAAG,OAAO,CAC7B,cAAc,EACd,8BAA8B,CAAC,IAAI,CAAC,EACpC,KAAK,EACL,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAC,aAAa,IACZ,SAAS,EAAE,eAAe,KACrB,KAAuC,EAC5C,KAAK,EAAE,KAAK,GACZ,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { IconSize, IconColor } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\n\nimport { TWCLASSMAP_ICON_SIZE_DIMENSION } from './Icon.constants';\nimport type { IconProps } from './Icon.types';\nimport { Icons } from './icons';\n\nexport const Icon: React.FC<IconProps> = ({\n  name,\n  size = IconSize.Md,\n  color = IconColor.IconDefault,\n  className,\n  style,\n  ...props\n}) => {\n  if (!name) {\n    console.warn('Icon name is required');\n    return null;\n  }\n\n  const IconComponent = Icons[name];\n\n  if (!IconComponent) {\n    console.warn(`Icon \"${name}\" not found`);\n    return null;\n  }\n\n  const mergedClassName = twMerge(\n    'inline-block',\n    TWCLASSMAP_ICON_SIZE_DIMENSION[size],\n    color,\n    className,\n  );\n\n  return (\n    <IconComponent\n      className={mergedClassName}\n      {...(props as React.SVGProps<SVGSVGElement>)}\n      style={style}\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 { IconPropsShared } from '@metamask-previews/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"]}
+{"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"]}

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

@@ -1,7 +1,24 @@
-import type { IconPropsShared } from "@metamask-previews/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> & IconPropsShared & {
+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;
     /**
      * 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,eAAe,EAAE,gDAAgD;AAC/E,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"}
+{"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"}

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

@@ -1,7 +1,24 @@
-import type { IconPropsShared } from "@metamask-previews/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> & IconPropsShared & {
+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;
     /**
      * 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,eAAe,EAAE,gDAAgD;AAC/E,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"}
+{"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"}

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 { IconPropsShared } from '@metamask-previews/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"]}
+{"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"]}