@metamask-previews/design-system-react 0.13.0-preview.beee588 → 0.14.0-preview.4ce710b

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (122) hide show
  1. package/CHANGELOG.md +12 -1
  2. package/dist/components/AvatarAccount/AvatarAccount.cjs +6 -6
  3. package/dist/components/AvatarAccount/AvatarAccount.cjs.map +1 -1
  4. package/dist/components/AvatarAccount/AvatarAccount.constants.cjs +6 -6
  5. package/dist/components/AvatarAccount/AvatarAccount.constants.cjs.map +1 -1
  6. package/dist/components/AvatarAccount/AvatarAccount.constants.d.cts +1 -1
  7. package/dist/components/AvatarAccount/AvatarAccount.constants.d.cts.map +1 -1
  8. package/dist/components/AvatarAccount/AvatarAccount.constants.d.mts +1 -1
  9. package/dist/components/AvatarAccount/AvatarAccount.constants.d.mts.map +1 -1
  10. package/dist/components/AvatarAccount/AvatarAccount.constants.mjs +1 -1
  11. package/dist/components/AvatarAccount/AvatarAccount.constants.mjs.map +1 -1
  12. package/dist/components/AvatarAccount/AvatarAccount.d.cts.map +1 -1
  13. package/dist/components/AvatarAccount/AvatarAccount.d.mts.map +1 -1
  14. package/dist/components/AvatarAccount/AvatarAccount.mjs +1 -1
  15. package/dist/components/AvatarAccount/AvatarAccount.mjs.map +1 -1
  16. package/dist/components/AvatarAccount/AvatarAccount.types.cjs.map +1 -1
  17. package/dist/components/AvatarAccount/AvatarAccount.types.d.cts +2 -18
  18. package/dist/components/AvatarAccount/AvatarAccount.types.d.cts.map +1 -1
  19. package/dist/components/AvatarAccount/AvatarAccount.types.d.mts +2 -18
  20. package/dist/components/AvatarAccount/AvatarAccount.types.d.mts.map +1 -1
  21. package/dist/components/AvatarAccount/AvatarAccount.types.mjs.map +1 -1
  22. package/dist/components/AvatarAccount/index.cjs +3 -3
  23. package/dist/components/AvatarAccount/index.cjs.map +1 -1
  24. package/dist/components/AvatarAccount/index.d.cts +1 -1
  25. package/dist/components/AvatarAccount/index.d.cts.map +1 -1
  26. package/dist/components/AvatarAccount/index.d.mts +1 -1
  27. package/dist/components/AvatarAccount/index.d.mts.map +1 -1
  28. package/dist/components/AvatarAccount/index.mjs +1 -1
  29. package/dist/components/AvatarAccount/index.mjs.map +1 -1
  30. package/dist/components/AvatarBase/index.cjs.map +1 -1
  31. package/dist/components/AvatarBase/index.d.cts.map +1 -1
  32. package/dist/components/AvatarBase/index.d.mts.map +1 -1
  33. package/dist/components/AvatarBase/index.mjs.map +1 -1
  34. package/dist/components/AvatarFavicon/AvatarFavicon.cjs +2 -1
  35. package/dist/components/AvatarFavicon/AvatarFavicon.cjs.map +1 -1
  36. package/dist/components/AvatarFavicon/AvatarFavicon.d.cts.map +1 -1
  37. package/dist/components/AvatarFavicon/AvatarFavicon.d.mts.map +1 -1
  38. package/dist/components/AvatarFavicon/AvatarFavicon.mjs +2 -1
  39. package/dist/components/AvatarFavicon/AvatarFavicon.mjs.map +1 -1
  40. package/dist/components/AvatarNetwork/AvatarNetwork.cjs +2 -1
  41. package/dist/components/AvatarNetwork/AvatarNetwork.cjs.map +1 -1
  42. package/dist/components/AvatarNetwork/AvatarNetwork.d.cts.map +1 -1
  43. package/dist/components/AvatarNetwork/AvatarNetwork.d.mts.map +1 -1
  44. package/dist/components/AvatarNetwork/AvatarNetwork.mjs +2 -1
  45. package/dist/components/AvatarNetwork/AvatarNetwork.mjs.map +1 -1
  46. package/dist/components/AvatarToken/AvatarToken.cjs +3 -3
  47. package/dist/components/AvatarToken/AvatarToken.cjs.map +1 -1
  48. package/dist/components/AvatarToken/AvatarToken.d.cts.map +1 -1
  49. package/dist/components/AvatarToken/AvatarToken.d.mts.map +1 -1
  50. package/dist/components/AvatarToken/AvatarToken.mjs +1 -1
  51. package/dist/components/AvatarToken/AvatarToken.mjs.map +1 -1
  52. package/dist/components/AvatarToken/AvatarToken.types.cjs.map +1 -1
  53. package/dist/components/AvatarToken/AvatarToken.types.d.cts +6 -6
  54. package/dist/components/AvatarToken/AvatarToken.types.d.cts.map +1 -1
  55. package/dist/components/AvatarToken/AvatarToken.types.d.mts +6 -6
  56. package/dist/components/AvatarToken/AvatarToken.types.d.mts.map +1 -1
  57. package/dist/components/AvatarToken/AvatarToken.types.mjs.map +1 -1
  58. package/dist/components/AvatarToken/index.cjs +2 -2
  59. package/dist/components/AvatarToken/index.cjs.map +1 -1
  60. package/dist/components/AvatarToken/index.d.cts +1 -1
  61. package/dist/components/AvatarToken/index.d.cts.map +1 -1
  62. package/dist/components/AvatarToken/index.d.mts +1 -1
  63. package/dist/components/AvatarToken/index.d.mts.map +1 -1
  64. package/dist/components/AvatarToken/index.mjs +1 -1
  65. package/dist/components/AvatarToken/index.mjs.map +1 -1
  66. package/dist/components/BannerBase/BannerBase.cjs +4 -3
  67. package/dist/components/BannerBase/BannerBase.cjs.map +1 -1
  68. package/dist/components/BannerBase/BannerBase.d.cts.map +1 -1
  69. package/dist/components/BannerBase/BannerBase.d.mts.map +1 -1
  70. package/dist/components/BannerBase/BannerBase.mjs +2 -1
  71. package/dist/components/BannerBase/BannerBase.mjs.map +1 -1
  72. package/dist/components/Input/Input.cjs +2 -2
  73. package/dist/components/Input/Input.cjs.map +1 -1
  74. package/dist/components/Input/Input.d.cts +1 -1
  75. package/dist/components/Input/Input.d.cts.map +1 -1
  76. package/dist/components/Input/Input.d.mts +1 -1
  77. package/dist/components/Input/Input.d.mts.map +1 -1
  78. package/dist/components/Input/Input.mjs +1 -1
  79. package/dist/components/Input/Input.mjs.map +1 -1
  80. package/dist/components/Input/Input.types.cjs.map +1 -1
  81. package/dist/components/Input/Input.types.d.cts +1 -1
  82. package/dist/components/Input/Input.types.d.cts.map +1 -1
  83. package/dist/components/Input/Input.types.d.mts +1 -1
  84. package/dist/components/Input/Input.types.d.mts.map +1 -1
  85. package/dist/components/Input/Input.types.mjs.map +1 -1
  86. package/dist/components/Text/Text.cjs +5 -3
  87. package/dist/components/Text/Text.cjs.map +1 -1
  88. package/dist/components/Text/Text.constants.cjs +58 -44
  89. package/dist/components/Text/Text.constants.cjs.map +1 -1
  90. package/dist/components/Text/Text.constants.d.cts +4 -1
  91. package/dist/components/Text/Text.constants.d.cts.map +1 -1
  92. package/dist/components/Text/Text.constants.d.mts +4 -1
  93. package/dist/components/Text/Text.constants.d.mts.map +1 -1
  94. package/dist/components/Text/Text.constants.mjs +15 -1
  95. package/dist/components/Text/Text.constants.mjs.map +1 -1
  96. package/dist/components/Text/Text.d.cts.map +1 -1
  97. package/dist/components/Text/Text.d.mts.map +1 -1
  98. package/dist/components/Text/Text.mjs +5 -3
  99. package/dist/components/Text/Text.mjs.map +1 -1
  100. package/dist/components/Text/Text.types.cjs.map +1 -1
  101. package/dist/components/Text/Text.types.d.cts +4 -39
  102. package/dist/components/Text/Text.types.d.cts.map +1 -1
  103. package/dist/components/Text/Text.types.d.mts +4 -39
  104. package/dist/components/Text/Text.types.d.mts.map +1 -1
  105. package/dist/components/Text/Text.types.mjs.map +1 -1
  106. package/dist/components/Text/index.cjs +7 -6
  107. package/dist/components/Text/index.cjs.map +1 -1
  108. package/dist/components/Text/index.d.cts +2 -1
  109. package/dist/components/Text/index.d.cts.map +1 -1
  110. package/dist/components/Text/index.d.mts +2 -1
  111. package/dist/components/Text/index.d.mts.map +1 -1
  112. package/dist/components/Text/index.mjs +2 -1
  113. package/dist/components/Text/index.mjs.map +1 -1
  114. package/dist/types/index.cjs +23 -157
  115. package/dist/types/index.cjs.map +1 -1
  116. package/dist/types/index.d.cts +20 -133
  117. package/dist/types/index.d.cts.map +1 -1
  118. package/dist/types/index.d.mts +20 -133
  119. package/dist/types/index.d.mts.map +1 -1
  120. package/dist/types/index.mjs +17 -149
  121. package/dist/types/index.mjs.map +1 -1
  122. package/package.json +3 -3
@@ -1 +1 @@
1
- {"version":3,"file":"AvatarToken.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,cAAc;AAKpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW,sGA6CvB,CAAC"}
1
+ {"version":3,"file":"AvatarToken.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA+B,cAAc;AAIpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW,sGA6CvB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"AvatarToken.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,cAAc;AAKpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW,sGA6CvB,CAAC"}
1
+ {"version":3,"file":"AvatarToken.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA+B,cAAc;AAIpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW,sGA6CvB,CAAC"}
@@ -4,9 +4,9 @@ function $importDefault(module) {
4
4
  }
5
5
  return module;
6
6
  }
7
+ import { AvatarBaseShape, AvatarTokenSize } from "@metamask-previews/design-system-shared";
7
8
  import $React, { forwardRef, useState } from "react";
8
9
  const React = $importDefault($React);
9
- import { AvatarTokenSize, AvatarBaseShape } from "../../types/index.mjs";
10
10
  import { AvatarBase } from "../AvatarBase/index.mjs";
11
11
  export const AvatarToken = forwardRef(({ src, name = '', fallbackText, fallbackTextProps, className, size = AvatarTokenSize.Md, imageProps, ...props }, ref) => {
12
12
  const [finalFallbackText, setFinalFallbackText] = useState('');
@@ -1 +1 @@
1
- {"version":3,"file":"AvatarToken.mjs","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc;;AAEpD,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,8BAAoB;AAC/D,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAI3C,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,CACE,EACE,GAAG,EACH,IAAI,GAAG,EAAE,EACT,YAAY,EACZ,iBAAiB,EACjB,SAAS,EACT,IAAI,GAAG,eAAe,CAAC,EAAE,EACzB,UAAU,EACV,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IACvE,MAAM,kBAAkB,GAAG,YAAY,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAC3D,MAAM,OAAO,GAAG,IAAI,IAAI,YAAY,CAAC,CAAC,yCAAyC;IAE/E,MAAM,cAAc,GAAG,CAAC,CAAyC,EAAE,EAAE;QACnE,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;QACzC,UAAU,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,eAAe,CAAC,MAAM,EAC7B,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,GAAG,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,EAC1D,iBAAiB,EAAE,iBAAiB,KAChC,KAAK,IAER,GAAG,IAAI,CACN,6BACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,OAAO,EACZ,SAAS,EAAC,0BAA0B,EACpC,OAAO,EAAE,cAAc,KACnB,UAAU,GACd,CACH,CACU,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC","sourcesContent":["import React, { forwardRef, useState } from 'react';\n\nimport { AvatarTokenSize, AvatarBaseShape } from '../../types';\nimport { AvatarBase } from '../AvatarBase';\n\nimport type { AvatarTokenProps } from './AvatarToken.types';\n\nexport const AvatarToken = forwardRef<HTMLDivElement, AvatarTokenProps>(\n (\n {\n src,\n name = '',\n fallbackText,\n fallbackTextProps,\n className,\n size = AvatarTokenSize.Md,\n imageProps,\n ...props\n },\n ref,\n ) => {\n const [finalFallbackText, setFinalFallbackText] = useState<string>('');\n const backupFallbackText = fallbackText || name?.[0] || '';\n const altText = name || 'Token logo'; // TBC: Add localization for default text\n\n const onErrorHandler = (e: React.SyntheticEvent<HTMLImageElement>) => {\n setFinalFallbackText(backupFallbackText);\n imageProps?.onError?.(e);\n };\n\n return (\n <AvatarBase\n ref={ref}\n shape={AvatarBaseShape.Circle}\n size={size}\n className={className}\n fallbackText={src ? finalFallbackText : backupFallbackText}\n fallbackTextProps={fallbackTextProps}\n {...props}\n >\n {src && (\n <img\n src={src}\n alt={altText}\n className=\"size-full object-contain\"\n onError={onErrorHandler}\n {...imageProps}\n />\n )}\n </AvatarBase>\n );\n },\n);\n\nAvatarToken.displayName = 'AvatarToken';\n"]}
1
+ {"version":3,"file":"AvatarToken.mjs","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,eAAe,EACf,eAAe,EAChB,gDAAgD;AACjD,OAAO,QAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,cAAc;;AAEpD,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAI3C,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,CACE,EACE,GAAG,EACH,IAAI,GAAG,EAAE,EACT,YAAY,EACZ,iBAAiB,EACjB,SAAS,EACT,IAAI,GAAG,eAAe,CAAC,EAAE,EACzB,UAAU,EACV,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IACvE,MAAM,kBAAkB,GAAG,YAAY,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IAC3D,MAAM,OAAO,GAAG,IAAI,IAAI,YAAY,CAAC,CAAC,yCAAyC;IAE/E,MAAM,cAAc,GAAG,CAAC,CAAyC,EAAE,EAAE;QACnE,oBAAoB,CAAC,kBAAkB,CAAC,CAAC;QACzC,UAAU,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,UAAU,IACT,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,eAAe,CAAC,MAAM,EAC7B,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,GAAG,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,kBAAkB,EAC1D,iBAAiB,EAAE,iBAAiB,KAChC,KAAK,IAER,GAAG,IAAI,CACN,6BACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,OAAO,EACZ,SAAS,EAAC,0BAA0B,EACpC,OAAO,EAAE,cAAc,KACnB,UAAU,GACd,CACH,CACU,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC","sourcesContent":["import {\n AvatarBaseShape,\n AvatarTokenSize,\n} from '@metamask-previews/design-system-shared';\nimport React, { forwardRef, useState } from 'react';\n\nimport { AvatarBase } from '../AvatarBase';\n\nimport type { AvatarTokenProps } from './AvatarToken.types';\n\nexport const AvatarToken = forwardRef<HTMLDivElement, AvatarTokenProps>(\n (\n {\n src,\n name = '',\n fallbackText,\n fallbackTextProps,\n className,\n size = AvatarTokenSize.Md,\n imageProps,\n ...props\n },\n ref,\n ) => {\n const [finalFallbackText, setFinalFallbackText] = useState<string>('');\n const backupFallbackText = fallbackText || name?.[0] || '';\n const altText = name || 'Token logo'; // TBC: Add localization for default text\n\n const onErrorHandler = (e: React.SyntheticEvent<HTMLImageElement>) => {\n setFinalFallbackText(backupFallbackText);\n imageProps?.onError?.(e);\n };\n\n return (\n <AvatarBase\n ref={ref}\n shape={AvatarBaseShape.Circle}\n size={size}\n className={className}\n fallbackText={src ? finalFallbackText : backupFallbackText}\n fallbackTextProps={fallbackTextProps}\n {...props}\n >\n {src && (\n <img\n src={src}\n alt={altText}\n className=\"size-full object-contain\"\n onError={onErrorHandler}\n {...imageProps}\n />\n )}\n </AvatarBase>\n );\n },\n);\n\nAvatarToken.displayName = 'AvatarToken';\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"AvatarToken.types.cjs","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type { AvatarBaseProps } from '../AvatarBase';\n\nexport type AvatarTokenProps = Omit<\n ComponentProps<'img'>,\n 'children' | 'size'\n> &\n Omit<AvatarBaseProps, 'children'> & {\n /**\n * Required name of the token\n * Used as alt text for image and first letter is used as fallback if no fallbackText provided\n */\n name?: string;\n /**\n * Optional URL for the token image\n * When provided, displays the image instead of fallback text\n */\n src?: string;\n /**\n * Optional prop to pass to the underlying img element\n * Useful for overriding the default alt text which is the token name\n */\n imageProps?: ComponentProps<'img'> & {\n 'data-testid'?: string;\n };\n };\n"]}
1
+ {"version":3,"file":"AvatarToken.types.cjs","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarTokenPropsShared } from '@metamask-previews/design-system-shared';\nimport type { ComponentProps } from 'react';\n\nimport type { AvatarBaseProps } from '../AvatarBase';\n\n/**\n * AvatarToken component props (React platform-specific)\n * Extends shared props from @metamask-previews/design-system-shared with React-specific platform concerns\n */\nexport type AvatarTokenProps = Omit<\n ComponentProps<'img'>,\n 'children' | 'size'\n> &\n Omit<AvatarBaseProps, 'children'> &\n AvatarTokenPropsShared & {\n /**\n * Optional URL for the token image\n * When provided, displays the image instead of fallback text\n */\n src?: string;\n /**\n * Optional prop to pass to the underlying img element\n * Useful for overriding the default alt text which is the token name\n */\n imageProps?: ComponentProps<'img'> & {\n 'data-testid'?: string;\n };\n };\n"]}
@@ -1,11 +1,11 @@
1
+ import type { AvatarTokenPropsShared } from "@metamask-previews/design-system-shared";
1
2
  import type { ComponentProps } from "react";
2
3
  import type { AvatarBaseProps } from "../AvatarBase/index.cjs";
3
- export type AvatarTokenProps = Omit<ComponentProps<'img'>, 'children' | 'size'> & Omit<AvatarBaseProps, 'children'> & {
4
- /**
5
- * Required name of the token
6
- * Used as alt text for image and first letter is used as fallback if no fallbackText provided
7
- */
8
- name?: string;
4
+ /**
5
+ * AvatarToken component props (React platform-specific)
6
+ * Extends shared props from @metamask-previews/design-system-shared with React-specific platform concerns
7
+ */
8
+ export type AvatarTokenProps = Omit<ComponentProps<'img'>, 'children' | 'size'> & Omit<AvatarBaseProps, 'children'> & AvatarTokenPropsShared & {
9
9
  /**
10
10
  * Optional URL for the token image
11
11
  * When provided, displays the image instead of fallback text
@@ -1 +1 @@
1
- {"version":3,"file":"AvatarToken.types.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AAErD,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,cAAc,CAAC,KAAK,CAAC,EACrB,UAAU,GAAG,MAAM,CACpB,GACC,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,GAAG;IAClC;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;QACnC,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB,CAAC;CACH,CAAC"}
1
+ {"version":3,"file":"AvatarToken.types.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,gDAAgD;AACtF,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AAErD;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,cAAc,CAAC,KAAK,CAAC,EACrB,UAAU,GAAG,MAAM,CACpB,GACC,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,GACjC,sBAAsB,GAAG;IACvB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;QACnC,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB,CAAC;CACH,CAAC"}
@@ -1,11 +1,11 @@
1
+ import type { AvatarTokenPropsShared } from "@metamask-previews/design-system-shared";
1
2
  import type { ComponentProps } from "react";
2
3
  import type { AvatarBaseProps } from "../AvatarBase/index.mjs";
3
- export type AvatarTokenProps = Omit<ComponentProps<'img'>, 'children' | 'size'> & Omit<AvatarBaseProps, 'children'> & {
4
- /**
5
- * Required name of the token
6
- * Used as alt text for image and first letter is used as fallback if no fallbackText provided
7
- */
8
- name?: string;
4
+ /**
5
+ * AvatarToken component props (React platform-specific)
6
+ * Extends shared props from @metamask-previews/design-system-shared with React-specific platform concerns
7
+ */
8
+ export type AvatarTokenProps = Omit<ComponentProps<'img'>, 'children' | 'size'> & Omit<AvatarBaseProps, 'children'> & AvatarTokenPropsShared & {
9
9
  /**
10
10
  * Optional URL for the token image
11
11
  * When provided, displays the image instead of fallback text
@@ -1 +1 @@
1
- {"version":3,"file":"AvatarToken.types.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AAErD,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,cAAc,CAAC,KAAK,CAAC,EACrB,UAAU,GAAG,MAAM,CACpB,GACC,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,GAAG;IAClC;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;QACnC,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB,CAAC;CACH,CAAC"}
1
+ {"version":3,"file":"AvatarToken.types.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,gDAAgD;AACtF,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc;AAE5C,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AAErD;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,cAAc,CAAC,KAAK,CAAC,EACrB,UAAU,GAAG,MAAM,CACpB,GACC,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,GACjC,sBAAsB,GAAG;IACvB;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,GAAG;QACnC,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB,CAAC;CACH,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"AvatarToken.types.mjs","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps } from 'react';\n\nimport type { AvatarBaseProps } from '../AvatarBase';\n\nexport type AvatarTokenProps = Omit<\n ComponentProps<'img'>,\n 'children' | 'size'\n> &\n Omit<AvatarBaseProps, 'children'> & {\n /**\n * Required name of the token\n * Used as alt text for image and first letter is used as fallback if no fallbackText provided\n */\n name?: string;\n /**\n * Optional URL for the token image\n * When provided, displays the image instead of fallback text\n */\n src?: string;\n /**\n * Optional prop to pass to the underlying img element\n * Useful for overriding the default alt text which is the token name\n */\n imageProps?: ComponentProps<'img'> & {\n 'data-testid'?: string;\n };\n };\n"]}
1
+ {"version":3,"file":"AvatarToken.types.mjs","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { AvatarTokenPropsShared } from '@metamask-previews/design-system-shared';\nimport type { ComponentProps } from 'react';\n\nimport type { AvatarBaseProps } from '../AvatarBase';\n\n/**\n * AvatarToken component props (React platform-specific)\n * Extends shared props from @metamask-previews/design-system-shared with React-specific platform concerns\n */\nexport type AvatarTokenProps = Omit<\n ComponentProps<'img'>,\n 'children' | 'size'\n> &\n Omit<AvatarBaseProps, 'children'> &\n AvatarTokenPropsShared & {\n /**\n * Optional URL for the token image\n * When provided, displays the image instead of fallback text\n */\n src?: string;\n /**\n * Optional prop to pass to the underlying img element\n * Useful for overriding the default alt text which is the token name\n */\n imageProps?: ComponentProps<'img'> & {\n 'data-testid'?: string;\n };\n };\n"]}
@@ -1,8 +1,8 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.AvatarToken = exports.AvatarTokenSize = void 0;
4
- var types_1 = require("../../types/index.cjs");
5
- Object.defineProperty(exports, "AvatarTokenSize", { enumerable: true, get: function () { return types_1.AvatarTokenSize; } });
4
+ var design_system_shared_1 = require("@metamask-previews/design-system-shared");
5
+ Object.defineProperty(exports, "AvatarTokenSize", { enumerable: true, get: function () { return design_system_shared_1.AvatarTokenSize; } });
6
6
  var AvatarToken_1 = require("./AvatarToken.cjs");
7
7
  Object.defineProperty(exports, "AvatarToken", { enumerable: true, get: function () { return AvatarToken_1.AvatarToken; } });
8
8
  //# sourceMappingURL=index.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/AvatarToken/index.ts"],"names":[],"mappings":";;;AAAA,+CAA8C;AAArC,wGAAA,eAAe,OAAA;AACxB,iDAA4C;AAAnC,0GAAA,WAAW,OAAA","sourcesContent":["export { AvatarTokenSize } from '../../types';\nexport { AvatarToken } from './AvatarToken';\nexport type { AvatarTokenProps } from './AvatarToken.types';\n"]}
1
+ {"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/AvatarToken/index.ts"],"names":[],"mappings":";;;AAAA,gFAA0E;AAAjE,uHAAA,eAAe,OAAA;AACxB,iDAA4C;AAAnC,0GAAA,WAAW,OAAA","sourcesContent":["export { AvatarTokenSize } from '@metamask-previews/design-system-shared';\nexport { AvatarToken } from './AvatarToken';\nexport type { AvatarTokenProps } from './AvatarToken.types';\n"]}
@@ -1,4 +1,4 @@
1
- export { AvatarTokenSize } from "../../types/index.cjs";
1
+ export { AvatarTokenSize } from "@metamask-previews/design-system-shared";
2
2
  export { AvatarToken } from "./AvatarToken.cjs";
3
3
  export type { AvatarTokenProps } from "./AvatarToken.types.cjs";
4
4
  //# sourceMappingURL=index.d.cts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarToken/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,8BAAoB;AAC9C,OAAO,EAAE,WAAW,EAAE,0BAAsB;AAC5C,YAAY,EAAE,gBAAgB,EAAE,gCAA4B"}
1
+ {"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarToken/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,gDAAgD;AAC1E,OAAO,EAAE,WAAW,EAAE,0BAAsB;AAC5C,YAAY,EAAE,gBAAgB,EAAE,gCAA4B"}
@@ -1,4 +1,4 @@
1
- export { AvatarTokenSize } from "../../types/index.mjs";
1
+ export { AvatarTokenSize } from "@metamask-previews/design-system-shared";
2
2
  export { AvatarToken } from "./AvatarToken.mjs";
3
3
  export type { AvatarTokenProps } from "./AvatarToken.types.mjs";
4
4
  //# sourceMappingURL=index.d.mts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarToken/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,8BAAoB;AAC9C,OAAO,EAAE,WAAW,EAAE,0BAAsB;AAC5C,YAAY,EAAE,gBAAgB,EAAE,gCAA4B"}
1
+ {"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/AvatarToken/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,gDAAgD;AAC1E,OAAO,EAAE,WAAW,EAAE,0BAAsB;AAC5C,YAAY,EAAE,gBAAgB,EAAE,gCAA4B"}
@@ -1,3 +1,3 @@
1
- export { AvatarTokenSize } from "../../types/index.mjs";
1
+ export { AvatarTokenSize } from "@metamask-previews/design-system-shared";
2
2
  export { AvatarToken } from "./AvatarToken.mjs";
3
3
  //# sourceMappingURL=index.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/AvatarToken/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,8BAAoB;AAC9C,OAAO,EAAE,WAAW,EAAE,0BAAsB","sourcesContent":["export { AvatarTokenSize } from '../../types';\nexport { AvatarToken } from './AvatarToken';\nexport type { AvatarTokenProps } from './AvatarToken.types';\n"]}
1
+ {"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/AvatarToken/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,gDAAgD;AAC1E,OAAO,EAAE,WAAW,EAAE,0BAAsB","sourcesContent":["export { AvatarTokenSize } from '@metamask-previews/design-system-shared';\nexport { AvatarToken } from './AvatarToken';\nexport type { AvatarTokenProps } from './AvatarToken.types';\n"]}
@@ -24,6 +24,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
24
24
  };
25
25
  Object.defineProperty(exports, "__esModule", { value: true });
26
26
  exports.BannerBase = void 0;
27
+ const design_system_shared_1 = require("@metamask-previews/design-system-shared");
27
28
  const react_1 = __importStar(require("react"));
28
29
  const types_1 = require("../../types/index.cjs");
29
30
  const tw_merge_1 = require("../../utils/tw-merge.cjs");
@@ -42,10 +43,10 @@ exports.BannerBase = (0, react_1.forwardRef)(({ title, titleProps, description,
42
43
  startAccessory,
43
44
  react_1.default.createElement(Box_1.Box, { className: "min-w-0 flex-1" },
44
45
  hasContent(title) &&
45
- (isTextContent(title) ? (react_1.default.createElement(Text_1.Text, { variant: types_1.TextVariant.BodyMd, fontWeight: types_1.FontWeight.Medium, ...titleProps }, title)) : (title)),
46
- hasContent(description) && (react_1.default.createElement(Box_1.Box, { className: hasContent(title) ? 'mt-1' : undefined }, isTextContent(description) ? (react_1.default.createElement(Text_1.Text, { variant: types_1.TextVariant.BodySm, ...descriptionProps }, description)) : (description))),
46
+ (isTextContent(title) ? (react_1.default.createElement(Text_1.Text, { variant: design_system_shared_1.TextVariant.BodyMd, fontWeight: design_system_shared_1.FontWeight.Medium, ...titleProps }, title)) : (title)),
47
+ hasContent(description) && (react_1.default.createElement(Box_1.Box, { className: hasContent(title) ? 'mt-1' : undefined }, isTextContent(description) ? (react_1.default.createElement(Text_1.Text, { variant: design_system_shared_1.TextVariant.BodySm, ...descriptionProps }, description)) : (description))),
47
48
  hasContent(children) &&
48
- (isTextContent(children) ? (react_1.default.createElement(Text_1.Text, { variant: types_1.TextVariant.BodyMd, ...childrenWrapperProps }, children)) : (children)),
49
+ (isTextContent(children) ? (react_1.default.createElement(Text_1.Text, { variant: design_system_shared_1.TextVariant.BodyMd, ...childrenWrapperProps }, children)) : (children)),
49
50
  shouldShowActionButton && (react_1.default.createElement(Box_1.Box, { className: "mt-4" },
50
51
  react_1.default.createElement(Button_1.Button, { size: types_1.ButtonSize.Md, onClick: actionButtonOnClick, ...resolvedActionButtonProps }, actionButtonLabel)))),
51
52
  shouldShowCloseButton && (react_1.default.createElement(ButtonIcon_1.ButtonIcon, { className: (0, tw_merge_1.twMerge)('ml-3 self-start', closeButtonClassName), iconName: types_1.IconName.Close, size: types_1.ButtonIconSize.Sm, ariaLabel: closeButtonAriaLabel, onClick: onClose ?? closeButtonPropsOnClick, ...resolvedCloseButtonProps }))));
@@ -1 +1 @@
1
- {"version":3,"file":"BannerBase.cjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport {\n BoxAlignItems,\n BoxBackgroundColor,\n ButtonIconSize,\n ButtonSize,\n FontWeight,\n BoxFlexDirection,\n IconName,\n TextVariant,\n} from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Text } from '../Text';\n\nimport type { BannerBaseProps } from './BannerBase.types';\n\nconst isTextContent = (content: React.ReactNode): content is string | number =>\n typeof content === 'string' || typeof content === 'number';\n\nconst hasContent = (content: React.ReactNode) =>\n content !== null && content !== undefined;\n\nexport const BannerBase = forwardRef<HTMLDivElement, BannerBaseProps>(\n (\n {\n title,\n titleProps,\n description,\n descriptionProps,\n children,\n childrenWrapperProps,\n actionButtonLabel,\n actionButtonOnClick,\n actionButtonProps,\n startAccessory,\n onClose,\n closeButtonProps,\n className,\n ...props\n },\n ref,\n ) => {\n const resolvedActionButtonProps = actionButtonProps ?? {};\n\n const {\n ariaLabel: closeButtonAriaLabel = 'Close banner',\n onClick: closeButtonPropsOnClick,\n className: closeButtonClassName,\n ...resolvedCloseButtonProps\n } = closeButtonProps ?? {};\n\n const shouldShowCloseButton = Boolean(onClose || closeButtonProps);\n const shouldShowActionButton = Boolean(actionButtonOnClick);\n\n return (\n <Box\n ref={ref}\n flexDirection={BoxFlexDirection.Row}\n alignItems={BoxAlignItems.Start}\n gap={2}\n backgroundColor={BoxBackgroundColor.BackgroundDefault}\n padding={3}\n className={twMerge('rounded-sm', className)}\n {...props}\n >\n {startAccessory}\n\n <Box className=\"min-w-0 flex-1\">\n {hasContent(title) &&\n (isTextContent(title) ? (\n <Text\n variant={TextVariant.BodyMd}\n fontWeight={FontWeight.Medium}\n {...titleProps}\n >\n {title}\n </Text>\n ) : (\n title\n ))}\n\n {hasContent(description) && (\n <Box className={hasContent(title) ? 'mt-1' : undefined}>\n {isTextContent(description) ? (\n <Text variant={TextVariant.BodySm} {...descriptionProps}>\n {description}\n </Text>\n ) : (\n description\n )}\n </Box>\n )}\n\n {hasContent(children) &&\n (isTextContent(children) ? (\n <Text variant={TextVariant.BodyMd} {...childrenWrapperProps}>\n {children}\n </Text>\n ) : (\n children\n ))}\n\n {shouldShowActionButton && (\n <Box className=\"mt-4\">\n <Button\n size={ButtonSize.Md}\n onClick={actionButtonOnClick}\n {...resolvedActionButtonProps}\n >\n {actionButtonLabel}\n </Button>\n </Box>\n )}\n </Box>\n\n {shouldShowCloseButton && (\n <ButtonIcon\n className={twMerge('ml-3 self-start', closeButtonClassName)}\n iconName={IconName.Close}\n size={ButtonIconSize.Sm}\n ariaLabel={closeButtonAriaLabel}\n onClick={onClose ?? closeButtonPropsOnClick}\n {...resolvedCloseButtonProps}\n />\n )}\n </Box>\n );\n },\n);\n\nBannerBase.displayName = 'BannerBase';\n"]}
1
+ {"version":3,"file":"BannerBase.cjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FontWeight, TextVariant } from '@metamask-previews/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport {\n BoxAlignItems,\n BoxBackgroundColor,\n ButtonIconSize,\n ButtonSize,\n BoxFlexDirection,\n IconName,\n} from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Text } from '../Text';\n\nimport type { BannerBaseProps } from './BannerBase.types';\n\nconst isTextContent = (content: React.ReactNode): content is string | number =>\n typeof content === 'string' || typeof content === 'number';\n\nconst hasContent = (content: React.ReactNode) =>\n content !== null && content !== undefined;\n\nexport const BannerBase = forwardRef<HTMLDivElement, BannerBaseProps>(\n (\n {\n title,\n titleProps,\n description,\n descriptionProps,\n children,\n childrenWrapperProps,\n actionButtonLabel,\n actionButtonOnClick,\n actionButtonProps,\n startAccessory,\n onClose,\n closeButtonProps,\n className,\n ...props\n },\n ref,\n ) => {\n const resolvedActionButtonProps = actionButtonProps ?? {};\n\n const {\n ariaLabel: closeButtonAriaLabel = 'Close banner',\n onClick: closeButtonPropsOnClick,\n className: closeButtonClassName,\n ...resolvedCloseButtonProps\n } = closeButtonProps ?? {};\n\n const shouldShowCloseButton = Boolean(onClose || closeButtonProps);\n const shouldShowActionButton = Boolean(actionButtonOnClick);\n\n return (\n <Box\n ref={ref}\n flexDirection={BoxFlexDirection.Row}\n alignItems={BoxAlignItems.Start}\n gap={2}\n backgroundColor={BoxBackgroundColor.BackgroundDefault}\n padding={3}\n className={twMerge('rounded-sm', className)}\n {...props}\n >\n {startAccessory}\n\n <Box className=\"min-w-0 flex-1\">\n {hasContent(title) &&\n (isTextContent(title) ? (\n <Text\n variant={TextVariant.BodyMd}\n fontWeight={FontWeight.Medium}\n {...titleProps}\n >\n {title}\n </Text>\n ) : (\n title\n ))}\n\n {hasContent(description) && (\n <Box className={hasContent(title) ? 'mt-1' : undefined}>\n {isTextContent(description) ? (\n <Text variant={TextVariant.BodySm} {...descriptionProps}>\n {description}\n </Text>\n ) : (\n description\n )}\n </Box>\n )}\n\n {hasContent(children) &&\n (isTextContent(children) ? (\n <Text variant={TextVariant.BodyMd} {...childrenWrapperProps}>\n {children}\n </Text>\n ) : (\n children\n ))}\n\n {shouldShowActionButton && (\n <Box className=\"mt-4\">\n <Button\n size={ButtonSize.Md}\n onClick={actionButtonOnClick}\n {...resolvedActionButtonProps}\n >\n {actionButtonLabel}\n </Button>\n </Box>\n )}\n </Box>\n\n {shouldShowCloseButton && (\n <ButtonIcon\n className={twMerge('ml-3 self-start', closeButtonClassName)}\n iconName={IconName.Close}\n size={ButtonIconSize.Sm}\n ariaLabel={closeButtonAriaLabel}\n onClick={onClose ?? closeButtonPropsOnClick}\n {...resolvedCloseButtonProps}\n />\n )}\n </Box>\n );\n },\n);\n\nBannerBase.displayName = 'BannerBase';\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"BannerBase.d.cts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,cAAc;AAE1C,OAAO,EAIL,UAAU,EAGV,QAAQ,EAET,8BAAoB;AAerB,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDA0GtB,CAAC"}
1
+ {"version":3,"file":"BannerBase.d.cts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,cAAc;AAE1C,OAAO,EAIL,UAAU,EAEV,QAAQ,EACT,8BAAoB;AAerB,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDA0GtB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"BannerBase.d.mts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,cAAc;AAE1C,OAAO,EAIL,UAAU,EAGV,QAAQ,EAET,8BAAoB;AAerB,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDA0GtB,CAAC"}
1
+ {"version":3,"file":"BannerBase.d.mts","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAqB,cAAc;AAE1C,OAAO,EAIL,UAAU,EAEV,QAAQ,EACT,8BAAoB;AAerB,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iDA0GtB,CAAC"}
@@ -4,9 +4,10 @@ function $importDefault(module) {
4
4
  }
5
5
  return module;
6
6
  }
7
+ import { FontWeight, TextVariant } from "@metamask-previews/design-system-shared";
7
8
  import $React, { forwardRef } from "react";
8
9
  const React = $importDefault($React);
9
- import { BoxAlignItems, BoxBackgroundColor, ButtonIconSize, ButtonSize, FontWeight, BoxFlexDirection, IconName, TextVariant } from "../../types/index.mjs";
10
+ import { BoxAlignItems, BoxBackgroundColor, ButtonIconSize, ButtonSize, BoxFlexDirection, IconName } from "../../types/index.mjs";
10
11
  import { twMerge } from "../../utils/tw-merge.mjs";
11
12
  import { Box } from "../Box/index.mjs";
12
13
  import { Button } from "../Button/index.mjs";
@@ -1 +1 @@
1
- {"version":3,"file":"BannerBase.mjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport {\n BoxAlignItems,\n BoxBackgroundColor,\n ButtonIconSize,\n ButtonSize,\n FontWeight,\n BoxFlexDirection,\n IconName,\n TextVariant,\n} from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Text } from '../Text';\n\nimport type { BannerBaseProps } from './BannerBase.types';\n\nconst isTextContent = (content: React.ReactNode): content is string | number =>\n typeof content === 'string' || typeof content === 'number';\n\nconst hasContent = (content: React.ReactNode) =>\n content !== null && content !== undefined;\n\nexport const BannerBase = forwardRef<HTMLDivElement, BannerBaseProps>(\n (\n {\n title,\n titleProps,\n description,\n descriptionProps,\n children,\n childrenWrapperProps,\n actionButtonLabel,\n actionButtonOnClick,\n actionButtonProps,\n startAccessory,\n onClose,\n closeButtonProps,\n className,\n ...props\n },\n ref,\n ) => {\n const resolvedActionButtonProps = actionButtonProps ?? {};\n\n const {\n ariaLabel: closeButtonAriaLabel = 'Close banner',\n onClick: closeButtonPropsOnClick,\n className: closeButtonClassName,\n ...resolvedCloseButtonProps\n } = closeButtonProps ?? {};\n\n const shouldShowCloseButton = Boolean(onClose || closeButtonProps);\n const shouldShowActionButton = Boolean(actionButtonOnClick);\n\n return (\n <Box\n ref={ref}\n flexDirection={BoxFlexDirection.Row}\n alignItems={BoxAlignItems.Start}\n gap={2}\n backgroundColor={BoxBackgroundColor.BackgroundDefault}\n padding={3}\n className={twMerge('rounded-sm', className)}\n {...props}\n >\n {startAccessory}\n\n <Box className=\"min-w-0 flex-1\">\n {hasContent(title) &&\n (isTextContent(title) ? (\n <Text\n variant={TextVariant.BodyMd}\n fontWeight={FontWeight.Medium}\n {...titleProps}\n >\n {title}\n </Text>\n ) : (\n title\n ))}\n\n {hasContent(description) && (\n <Box className={hasContent(title) ? 'mt-1' : undefined}>\n {isTextContent(description) ? (\n <Text variant={TextVariant.BodySm} {...descriptionProps}>\n {description}\n </Text>\n ) : (\n description\n )}\n </Box>\n )}\n\n {hasContent(children) &&\n (isTextContent(children) ? (\n <Text variant={TextVariant.BodyMd} {...childrenWrapperProps}>\n {children}\n </Text>\n ) : (\n children\n ))}\n\n {shouldShowActionButton && (\n <Box className=\"mt-4\">\n <Button\n size={ButtonSize.Md}\n onClick={actionButtonOnClick}\n {...resolvedActionButtonProps}\n >\n {actionButtonLabel}\n </Button>\n </Box>\n )}\n </Box>\n\n {shouldShowCloseButton && (\n <ButtonIcon\n className={twMerge('ml-3 self-start', closeButtonClassName)}\n iconName={IconName.Close}\n size={ButtonIconSize.Sm}\n ariaLabel={closeButtonAriaLabel}\n onClick={onClose ?? closeButtonPropsOnClick}\n {...resolvedCloseButtonProps}\n />\n )}\n </Box>\n );\n },\n);\n\nBannerBase.displayName = 'BannerBase';\n"]}
1
+ {"version":3,"file":"BannerBase.mjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FontWeight, TextVariant } from '@metamask-previews/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport {\n BoxAlignItems,\n BoxBackgroundColor,\n ButtonIconSize,\n ButtonSize,\n BoxFlexDirection,\n IconName,\n} from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Text } from '../Text';\n\nimport type { BannerBaseProps } from './BannerBase.types';\n\nconst isTextContent = (content: React.ReactNode): content is string | number =>\n typeof content === 'string' || typeof content === 'number';\n\nconst hasContent = (content: React.ReactNode) =>\n content !== null && content !== undefined;\n\nexport const BannerBase = forwardRef<HTMLDivElement, BannerBaseProps>(\n (\n {\n title,\n titleProps,\n description,\n descriptionProps,\n children,\n childrenWrapperProps,\n actionButtonLabel,\n actionButtonOnClick,\n actionButtonProps,\n startAccessory,\n onClose,\n closeButtonProps,\n className,\n ...props\n },\n ref,\n ) => {\n const resolvedActionButtonProps = actionButtonProps ?? {};\n\n const {\n ariaLabel: closeButtonAriaLabel = 'Close banner',\n onClick: closeButtonPropsOnClick,\n className: closeButtonClassName,\n ...resolvedCloseButtonProps\n } = closeButtonProps ?? {};\n\n const shouldShowCloseButton = Boolean(onClose || closeButtonProps);\n const shouldShowActionButton = Boolean(actionButtonOnClick);\n\n return (\n <Box\n ref={ref}\n flexDirection={BoxFlexDirection.Row}\n alignItems={BoxAlignItems.Start}\n gap={2}\n backgroundColor={BoxBackgroundColor.BackgroundDefault}\n padding={3}\n className={twMerge('rounded-sm', className)}\n {...props}\n >\n {startAccessory}\n\n <Box className=\"min-w-0 flex-1\">\n {hasContent(title) &&\n (isTextContent(title) ? (\n <Text\n variant={TextVariant.BodyMd}\n fontWeight={FontWeight.Medium}\n {...titleProps}\n >\n {title}\n </Text>\n ) : (\n title\n ))}\n\n {hasContent(description) && (\n <Box className={hasContent(title) ? 'mt-1' : undefined}>\n {isTextContent(description) ? (\n <Text variant={TextVariant.BodySm} {...descriptionProps}>\n {description}\n </Text>\n ) : (\n description\n )}\n </Box>\n )}\n\n {hasContent(children) &&\n (isTextContent(children) ? (\n <Text variant={TextVariant.BodyMd} {...childrenWrapperProps}>\n {children}\n </Text>\n ) : (\n children\n ))}\n\n {shouldShowActionButton && (\n <Box className=\"mt-4\">\n <Button\n size={ButtonSize.Md}\n onClick={actionButtonOnClick}\n {...resolvedActionButtonProps}\n >\n {actionButtonLabel}\n </Button>\n </Box>\n )}\n </Box>\n\n {shouldShowCloseButton && (\n <ButtonIcon\n className={twMerge('ml-3 self-start', closeButtonClassName)}\n iconName={IconName.Close}\n size={ButtonIconSize.Sm}\n ariaLabel={closeButtonAriaLabel}\n onClick={onClose ?? closeButtonPropsOnClick}\n {...resolvedCloseButtonProps}\n />\n )}\n </Box>\n );\n },\n);\n\nBannerBase.displayName = 'BannerBase';\n"]}
@@ -24,11 +24,11 @@ var __importStar = (this && this.__importStar) || function (mod) {
24
24
  };
25
25
  Object.defineProperty(exports, "__esModule", { value: true });
26
26
  exports.Input = void 0;
27
+ const design_system_shared_1 = require("@metamask-previews/design-system-shared");
27
28
  const react_1 = __importStar(require("react"));
28
- const types_1 = require("../../types/index.cjs");
29
29
  const tw_merge_1 = require("../../utils/tw-merge.cjs");
30
30
  const Text_constants_1 = require("../Text/Text.constants.cjs");
31
- exports.Input = (0, react_1.forwardRef)(({ textVariant = types_1.TextVariant.BodyMd, isDisabled = false, isReadonly = false, className, style, ...rest }, ref) => {
31
+ exports.Input = (0, react_1.forwardRef)(({ textVariant = design_system_shared_1.TextVariant.BodyMd, isDisabled = false, isReadonly = false, className, style, ...rest }, ref) => {
32
32
  const mergedClassName = (0, tw_merge_1.twMerge)('w-full rounded border bg-default text-default outline-none transition-colors', 'border-transparent focus:border-primary-default focus:outline-none', 'placeholder:text-alternative', Text_constants_1.CLASSMAP_TEXT_VARIANT_FONTSTYLE[textVariant], Text_constants_1.CLASSMAP_TEXT_VARIANT_FONTWEIGHT[textVariant], isDisabled && 'cursor-not-allowed opacity-50', className);
33
33
  return (react_1.default.createElement("input", { ref: ref, className: mergedClassName, style: style, ...rest, disabled: isDisabled, readOnly: isReadonly }));
34
34
  });
@@ -1 +1 @@
1
- {"version":3,"file":"Input.cjs","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,iDAA0C;AAC1C,uDAA+C;AAC/C,+DAGgC;AAInB,QAAA,KAAK,GAAG,IAAA,kBAAU,EAC7B,CACE,EACE,WAAW,GAAG,mBAAW,CAAC,MAAM,EAChC,UAAU,GAAG,KAAK,EAClB,UAAU,GAAG,KAAK,EAClB,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EACD,GAAG,EACH,EAAE;IACF,MAAM,eAAe,GAAG,IAAA,kBAAO,EAC7B,8EAA8E,EAC9E,oEAAoE,EACpE,8BAA8B,EAC9B,gDAA+B,CAAC,WAAW,CAAC,EAC5C,iDAAgC,CAAC,WAAW,CAAC,EAC7C,UAAU,IAAI,+BAA+B,EAC7C,SAAS,CACV,CAAC;IAEF,OAAO,CACL,yCACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE,KAAK,KACR,IAAI,EACR,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,UAAU,GACpB,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAK,CAAC,WAAW,GAAG,OAAO,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { TextVariant } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport {\n CLASSMAP_TEXT_VARIANT_FONTSTYLE,\n CLASSMAP_TEXT_VARIANT_FONTWEIGHT,\n} from '../Text/Text.constants';\n\nimport type { InputProps } from './Input.types';\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n (\n {\n textVariant = TextVariant.BodyMd,\n isDisabled = false,\n isReadonly = false,\n className,\n style,\n ...rest\n },\n ref,\n ) => {\n const mergedClassName = twMerge(\n 'w-full rounded border bg-default text-default outline-none transition-colors',\n 'border-transparent focus:border-primary-default focus:outline-none',\n 'placeholder:text-alternative',\n CLASSMAP_TEXT_VARIANT_FONTSTYLE[textVariant],\n CLASSMAP_TEXT_VARIANT_FONTWEIGHT[textVariant],\n isDisabled && 'cursor-not-allowed opacity-50',\n className,\n );\n\n return (\n <input\n ref={ref}\n className={mergedClassName}\n style={style}\n {...rest}\n disabled={isDisabled}\n readOnly={isReadonly}\n />\n );\n },\n);\n\nInput.displayName = 'Input';\n"]}
1
+ {"version":3,"file":"Input.cjs","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kFAAsE;AACtE,+CAA0C;AAE1C,uDAA+C;AAC/C,+DAGgC;AAInB,QAAA,KAAK,GAAG,IAAA,kBAAU,EAC7B,CACE,EACE,WAAW,GAAG,kCAAW,CAAC,MAAM,EAChC,UAAU,GAAG,KAAK,EAClB,UAAU,GAAG,KAAK,EAClB,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EACD,GAAG,EACH,EAAE;IACF,MAAM,eAAe,GAAG,IAAA,kBAAO,EAC7B,8EAA8E,EAC9E,oEAAoE,EACpE,8BAA8B,EAC9B,gDAA+B,CAAC,WAAW,CAAC,EAC5C,iDAAgC,CAAC,WAAW,CAAC,EAC7C,UAAU,IAAI,+BAA+B,EAC7C,SAAS,CACV,CAAC;IAEF,OAAO,CACL,yCACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE,KAAK,KACR,IAAI,EACR,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,UAAU,GACpB,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,aAAK,CAAC,WAAW,GAAG,OAAO,CAAC","sourcesContent":["import { TextVariant } from '@metamask-previews/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport {\n CLASSMAP_TEXT_VARIANT_FONTSTYLE,\n CLASSMAP_TEXT_VARIANT_FONTWEIGHT,\n} from '../Text/Text.constants';\n\nimport type { InputProps } from './Input.types';\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n (\n {\n textVariant = TextVariant.BodyMd,\n isDisabled = false,\n isReadonly = false,\n className,\n style,\n ...rest\n },\n ref,\n ) => {\n const mergedClassName = twMerge(\n 'w-full rounded border bg-default text-default outline-none transition-colors',\n 'border-transparent focus:border-primary-default focus:outline-none',\n 'placeholder:text-alternative',\n CLASSMAP_TEXT_VARIANT_FONTSTYLE[textVariant],\n CLASSMAP_TEXT_VARIANT_FONTWEIGHT[textVariant],\n isDisabled && 'cursor-not-allowed opacity-50',\n className,\n );\n\n return (\n <input\n ref={ref}\n className={mergedClassName}\n style={style}\n {...rest}\n disabled={isDisabled}\n readOnly={isReadonly}\n />\n );\n },\n);\n\nInput.displayName = 'Input';\n"]}
@@ -1,5 +1,5 @@
1
+ import { TextVariant } from "@metamask-previews/design-system-shared";
1
2
  import React from "react";
2
- import { TextVariant } from "../../types/index.cjs";
3
3
  export declare const Input: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "disabled" | "readOnly"> & {
4
4
  textVariant?: TextVariant | undefined;
5
5
  isDisabled?: boolean | undefined;
@@ -1 +1 @@
1
- {"version":3,"file":"Input.d.cts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,cAAc;AAE1C,OAAO,EAAE,WAAW,EAAE,8BAAoB;AAS1C,eAAO,MAAM,KAAK;;;;;;0CAiCjB,CAAC"}
1
+ {"version":3,"file":"Input.d.cts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,gDAAgD;AACtE,OAAO,KAAqB,cAAc;AAU1C,eAAO,MAAM,KAAK;;;;;;0CAiCjB,CAAC"}
@@ -1,5 +1,5 @@
1
+ import { TextVariant } from "@metamask-previews/design-system-shared";
1
2
  import React from "react";
2
- import { TextVariant } from "../../types/index.mjs";
3
3
  export declare const Input: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "disabled" | "readOnly"> & {
4
4
  textVariant?: TextVariant | undefined;
5
5
  isDisabled?: boolean | undefined;
@@ -1 +1 @@
1
- {"version":3,"file":"Input.d.mts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,cAAc;AAE1C,OAAO,EAAE,WAAW,EAAE,8BAAoB;AAS1C,eAAO,MAAM,KAAK;;;;;;0CAiCjB,CAAC"}
1
+ {"version":3,"file":"Input.d.mts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,gDAAgD;AACtE,OAAO,KAAqB,cAAc;AAU1C,eAAO,MAAM,KAAK;;;;;;0CAiCjB,CAAC"}
@@ -4,9 +4,9 @@ function $importDefault(module) {
4
4
  }
5
5
  return module;
6
6
  }
7
+ import { TextVariant } from "@metamask-previews/design-system-shared";
7
8
  import $React, { forwardRef } from "react";
8
9
  const React = $importDefault($React);
9
- import { TextVariant } from "../../types/index.mjs";
10
10
  import { twMerge } from "../../utils/tw-merge.mjs";
11
11
  import { CLASSMAP_TEXT_VARIANT_FONTSTYLE, CLASSMAP_TEXT_VARIANT_FONTWEIGHT } from "../Text/Text.constants.mjs";
12
12
  export const Input = forwardRef(({ textVariant = TextVariant.BodyMd, isDisabled = false, isReadonly = false, className, style, ...rest }, ref) => {
@@ -1 +1 @@
1
- {"version":3,"file":"Input.mjs","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,WAAW,EAAE,8BAAoB;AAC1C,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EACL,+BAA+B,EAC/B,gCAAgC,EACjC,mCAA+B;AAIhC,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EACE,WAAW,GAAG,WAAW,CAAC,MAAM,EAChC,UAAU,GAAG,KAAK,EAClB,UAAU,GAAG,KAAK,EAClB,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EACD,GAAG,EACH,EAAE;IACF,MAAM,eAAe,GAAG,OAAO,CAC7B,8EAA8E,EAC9E,oEAAoE,EACpE,8BAA8B,EAC9B,+BAA+B,CAAC,WAAW,CAAC,EAC5C,gCAAgC,CAAC,WAAW,CAAC,EAC7C,UAAU,IAAI,+BAA+B,EAC7C,SAAS,CACV,CAAC;IAEF,OAAO,CACL,+BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE,KAAK,KACR,IAAI,EACR,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,UAAU,GACpB,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC","sourcesContent":["import React, { forwardRef } from 'react';\n\nimport { TextVariant } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\nimport {\n CLASSMAP_TEXT_VARIANT_FONTSTYLE,\n CLASSMAP_TEXT_VARIANT_FONTWEIGHT,\n} from '../Text/Text.constants';\n\nimport type { InputProps } from './Input.types';\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n (\n {\n textVariant = TextVariant.BodyMd,\n isDisabled = false,\n isReadonly = false,\n className,\n style,\n ...rest\n },\n ref,\n ) => {\n const mergedClassName = twMerge(\n 'w-full rounded border bg-default text-default outline-none transition-colors',\n 'border-transparent focus:border-primary-default focus:outline-none',\n 'placeholder:text-alternative',\n CLASSMAP_TEXT_VARIANT_FONTSTYLE[textVariant],\n CLASSMAP_TEXT_VARIANT_FONTWEIGHT[textVariant],\n isDisabled && 'cursor-not-allowed opacity-50',\n className,\n );\n\n return (\n <input\n ref={ref}\n className={mergedClassName}\n style={style}\n {...rest}\n disabled={isDisabled}\n readOnly={isReadonly}\n />\n );\n },\n);\n\nInput.displayName = 'Input';\n"]}
1
+ {"version":3,"file":"Input.mjs","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,gDAAgD;AACtE,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EACL,+BAA+B,EAC/B,gCAAgC,EACjC,mCAA+B;AAIhC,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAC7B,CACE,EACE,WAAW,GAAG,WAAW,CAAC,MAAM,EAChC,UAAU,GAAG,KAAK,EAClB,UAAU,GAAG,KAAK,EAClB,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EACD,GAAG,EACH,EAAE;IACF,MAAM,eAAe,GAAG,OAAO,CAC7B,8EAA8E,EAC9E,oEAAoE,EACpE,8BAA8B,EAC9B,+BAA+B,CAAC,WAAW,CAAC,EAC5C,gCAAgC,CAAC,WAAW,CAAC,EAC7C,UAAU,IAAI,+BAA+B,EAC7C,SAAS,CACV,CAAC;IAEF,OAAO,CACL,+BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE,KAAK,KACR,IAAI,EACR,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,UAAU,GACpB,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC","sourcesContent":["import { TextVariant } from '@metamask-previews/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport {\n CLASSMAP_TEXT_VARIANT_FONTSTYLE,\n CLASSMAP_TEXT_VARIANT_FONTWEIGHT,\n} from '../Text/Text.constants';\n\nimport type { InputProps } from './Input.types';\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n (\n {\n textVariant = TextVariant.BodyMd,\n isDisabled = false,\n isReadonly = false,\n className,\n style,\n ...rest\n },\n ref,\n ) => {\n const mergedClassName = twMerge(\n 'w-full rounded border bg-default text-default outline-none transition-colors',\n 'border-transparent focus:border-primary-default focus:outline-none',\n 'placeholder:text-alternative',\n CLASSMAP_TEXT_VARIANT_FONTSTYLE[textVariant],\n CLASSMAP_TEXT_VARIANT_FONTWEIGHT[textVariant],\n isDisabled && 'cursor-not-allowed opacity-50',\n className,\n );\n\n return (\n <input\n ref={ref}\n className={mergedClassName}\n style={style}\n {...rest}\n disabled={isDisabled}\n readOnly={isReadonly}\n />\n );\n },\n);\n\nInput.displayName = 'Input';\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"Input.types.cjs","sourceRoot":"","sources":["../../../src/components/Input/Input.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\n\nimport type { TextVariant } from '../../types';\n\nexport type InputProps = Omit<\n ComponentPropsWithoutRef<'input'>,\n 'disabled' | 'readOnly'\n> & {\n /**\n * Optional enum to select between Typography variants.\n *\n * @default TextVariant.BodyMd\n */\n textVariant?: TextVariant;\n /**\n * Optional boolean to disable Input.\n *\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Optional boolean to show readonly input.\n *\n * @default false\n */\n isReadonly?: boolean;\n /**\n * Optional prop for additional CSS classes.\n */\n className?: string;\n /**\n * Optional inline styles.\n */\n style?: React.CSSProperties;\n};\n"]}
1
+ {"version":3,"file":"Input.types.cjs","sourceRoot":"","sources":["../../../src/components/Input/Input.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { TextVariant } from '@metamask-previews/design-system-shared';\nimport type { ComponentPropsWithoutRef } from 'react';\n\nexport type InputProps = Omit<\n ComponentPropsWithoutRef<'input'>,\n 'disabled' | 'readOnly'\n> & {\n /**\n * Optional enum to select between Typography variants.\n *\n * @default TextVariant.BodyMd\n */\n textVariant?: TextVariant;\n /**\n * Optional boolean to disable Input.\n *\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Optional boolean to show readonly input.\n *\n * @default false\n */\n isReadonly?: boolean;\n /**\n * Optional prop for additional CSS classes.\n */\n className?: string;\n /**\n * Optional inline styles.\n */\n style?: React.CSSProperties;\n};\n"]}
@@ -1,5 +1,5 @@
1
+ import type { TextVariant } from "@metamask-previews/design-system-shared";
1
2
  import type { ComponentPropsWithoutRef } from "react";
2
- import type { TextVariant } from "../../types/index.cjs";
3
3
  export type InputProps = Omit<ComponentPropsWithoutRef<'input'>, 'disabled' | 'readOnly'> & {
4
4
  /**
5
5
  * Optional enum to select between Typography variants.
@@ -1 +1 @@
1
- {"version":3,"file":"Input.types.d.cts","sourceRoot":"","sources":["../../../src/components/Input/Input.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,cAAc;AAEtD,OAAO,KAAK,EAAE,WAAW,EAAE,8BAAoB;AAE/C,MAAM,MAAM,UAAU,GAAG,IAAI,CAC3B,wBAAwB,CAAC,OAAO,CAAC,EACjC,UAAU,GAAG,UAAU,CACxB,GAAG;IACF;;;;OAIG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC"}
1
+ {"version":3,"file":"Input.types.d.cts","sourceRoot":"","sources":["../../../src/components/Input/Input.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,gDAAgD;AAC3E,OAAO,KAAK,EAAE,wBAAwB,EAAE,cAAc;AAEtD,MAAM,MAAM,UAAU,GAAG,IAAI,CAC3B,wBAAwB,CAAC,OAAO,CAAC,EACjC,UAAU,GAAG,UAAU,CACxB,GAAG;IACF;;;;OAIG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC"}
@@ -1,5 +1,5 @@
1
+ import type { TextVariant } from "@metamask-previews/design-system-shared";
1
2
  import type { ComponentPropsWithoutRef } from "react";
2
- import type { TextVariant } from "../../types/index.mjs";
3
3
  export type InputProps = Omit<ComponentPropsWithoutRef<'input'>, 'disabled' | 'readOnly'> & {
4
4
  /**
5
5
  * Optional enum to select between Typography variants.
@@ -1 +1 @@
1
- {"version":3,"file":"Input.types.d.mts","sourceRoot":"","sources":["../../../src/components/Input/Input.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,wBAAwB,EAAE,cAAc;AAEtD,OAAO,KAAK,EAAE,WAAW,EAAE,8BAAoB;AAE/C,MAAM,MAAM,UAAU,GAAG,IAAI,CAC3B,wBAAwB,CAAC,OAAO,CAAC,EACjC,UAAU,GAAG,UAAU,CACxB,GAAG;IACF;;;;OAIG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC"}
1
+ {"version":3,"file":"Input.types.d.mts","sourceRoot":"","sources":["../../../src/components/Input/Input.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,gDAAgD;AAC3E,OAAO,KAAK,EAAE,wBAAwB,EAAE,cAAc;AAEtD,MAAM,MAAM,UAAU,GAAG,IAAI,CAC3B,wBAAwB,CAAC,OAAO,CAAC,EACjC,UAAU,GAAG,UAAU,CACxB,GAAG;IACF;;;;OAIG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"Input.types.mjs","sourceRoot":"","sources":["../../../src/components/Input/Input.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentPropsWithoutRef } from 'react';\n\nimport type { TextVariant } from '../../types';\n\nexport type InputProps = Omit<\n ComponentPropsWithoutRef<'input'>,\n 'disabled' | 'readOnly'\n> & {\n /**\n * Optional enum to select between Typography variants.\n *\n * @default TextVariant.BodyMd\n */\n textVariant?: TextVariant;\n /**\n * Optional boolean to disable Input.\n *\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Optional boolean to show readonly input.\n *\n * @default false\n */\n isReadonly?: boolean;\n /**\n * Optional prop for additional CSS classes.\n */\n className?: string;\n /**\n * Optional inline styles.\n */\n style?: React.CSSProperties;\n};\n"]}
1
+ {"version":3,"file":"Input.types.mjs","sourceRoot":"","sources":["../../../src/components/Input/Input.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { TextVariant } from '@metamask-previews/design-system-shared';\nimport type { ComponentPropsWithoutRef } from 'react';\n\nexport type InputProps = Omit<\n ComponentPropsWithoutRef<'input'>,\n 'disabled' | 'readOnly'\n> & {\n /**\n * Optional enum to select between Typography variants.\n *\n * @default TextVariant.BodyMd\n */\n textVariant?: TextVariant;\n /**\n * Optional boolean to disable Input.\n *\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Optional boolean to show readonly input.\n *\n * @default false\n */\n isReadonly?: boolean;\n /**\n * Optional prop for additional CSS classes.\n */\n className?: string;\n /**\n * Optional inline styles.\n */\n style?: React.CSSProperties;\n};\n"]}
@@ -4,16 +4,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.Text = void 0;
7
+ const design_system_shared_1 = require("@metamask-previews/design-system-shared");
7
8
  const react_slot_1 = require("@radix-ui/react-slot");
8
9
  const react_1 = __importDefault(require("react"));
9
- const types_1 = require("../../types/index.cjs");
10
10
  const tw_merge_1 = require("../../utils/tw-merge.cjs");
11
11
  const Text_constants_1 = require("./Text.constants.cjs");
12
- const Text = ({ variant = types_1.TextVariant.BodyMd, children, className, fontWeight, fontFamily = types_1.FontFamily.Default, fontStyle, textTransform, textAlign, overflowWrap, ellipsis, asChild, color = types_1.TextColor.TextDefault, style, ...props }) => {
12
+ const Text = ({ variant = design_system_shared_1.TextVariant.BodyMd, children, className, fontWeight, fontFamily = design_system_shared_1.FontFamily.Default, fontStyle, textTransform, textAlign, overflowWrap, ellipsis, asChild, color = design_system_shared_1.TextColor.TextDefault, style, ...props }) => {
13
13
  // When asChild is true, use Radix Slot to merge props onto the child component.
14
14
  // Otherwise, render the semantic HTML element mapped to this variant (e.g. h1-h4, p).
15
15
  const Component = asChild ? react_slot_1.Slot : Text_constants_1.MAP_TEXT_VARIANT_TAG[variant];
16
- const mergedClassName = `${(0, tw_merge_1.twMerge)(color, Text_constants_1.CLASSMAP_TEXT_VARIANT_FONTSTYLE[variant], fontWeight || Text_constants_1.CLASSMAP_TEXT_VARIANT_FONTWEIGHT[variant], fontStyle, fontFamily, textTransform, textAlign, overflowWrap, ellipsis && 'truncate', className)}`;
16
+ const mergedClassName = `${(0, tw_merge_1.twMerge)(color, Text_constants_1.CLASSMAP_TEXT_VARIANT_FONTSTYLE[variant], fontWeight
17
+ ? Text_constants_1.MAP_FONTWEIGHT_CLASS[fontWeight]
18
+ : Text_constants_1.CLASSMAP_TEXT_VARIANT_FONTWEIGHT[variant], fontStyle ? Text_constants_1.MAP_FONTSTYLE_CLASS[fontStyle] : undefined, Text_constants_1.MAP_FONTFAMILY_CLASS[fontFamily], textTransform, textAlign, overflowWrap, ellipsis && 'truncate', className)}`;
17
19
  return (react_1.default.createElement(Component, { className: mergedClassName, style: style, ...props }, children));
18
20
  };
19
21
  exports.Text = Text;
@@ -1 +1 @@
1
- {"version":3,"file":"Text.cjs","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":";;;;;;AAAA,qDAA4C;AAC5C,kDAA0B;AAE1B,iDAAiE;AACjE,uDAA+C;AAE/C,yDAI0B;AAGnB,MAAM,IAAI,GAAwB,CAAC,EACxC,OAAO,GAAG,mBAAW,CAAC,MAAM,EAC5B,QAAQ,EACR,SAAS,EACT,UAAU,EACV,UAAU,GAAG,kBAAU,CAAC,OAAO,EAC/B,SAAS,EACT,aAAa,EACb,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,OAAO,EACP,KAAK,GAAG,iBAAS,CAAC,WAAW,EAC7B,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,gFAAgF;IAChF,sFAAsF;IACtF,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,iBAAI,CAAC,CAAC,CAAC,qCAAoB,CAAC,OAAO,CAAC,CAAC;IAEjE,MAAM,eAAe,GAAG,GAAG,IAAA,kBAAO,EAChC,KAAK,EACL,gDAA+B,CAAC,OAAO,CAAC,EACxC,UAAU,IAAI,iDAAgC,CAAC,OAAO,CAAC,EACvD,SAAS,EACT,UAAU,EACV,aAAa,EACb,SAAS,EACT,YAAY,EACZ,QAAQ,IAAI,UAAU,EACtB,SAAS,CACV,EAAE,CAAC;IAEJ,OAAO,CACL,8BAAC,SAAS,IAAC,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,KAAM,KAAK,IAC3D,QAAQ,CACC,CACb,CAAC;AACJ,CAAC,CAAC;AAtCW,QAAA,IAAI,QAsCf","sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport React from 'react';\n\nimport { FontFamily, TextColor, TextVariant } from '../../types';\nimport { twMerge } from '../../utils/tw-merge';\n\nimport {\n CLASSMAP_TEXT_VARIANT_FONTSTYLE,\n CLASSMAP_TEXT_VARIANT_FONTWEIGHT,\n MAP_TEXT_VARIANT_TAG,\n} from './Text.constants';\nimport type { TextProps } from './Text.types';\n\nexport const Text: React.FC<TextProps> = ({\n variant = TextVariant.BodyMd,\n children,\n className,\n fontWeight,\n fontFamily = FontFamily.Default,\n fontStyle,\n textTransform,\n textAlign,\n overflowWrap,\n ellipsis,\n asChild,\n color = TextColor.TextDefault,\n style,\n ...props\n}) => {\n // When asChild is true, use Radix Slot to merge props onto the child component.\n // Otherwise, render the semantic HTML element mapped to this variant (e.g. h1-h4, p).\n const Component = asChild ? Slot : MAP_TEXT_VARIANT_TAG[variant];\n\n const mergedClassName = `${twMerge(\n color,\n CLASSMAP_TEXT_VARIANT_FONTSTYLE[variant],\n fontWeight || CLASSMAP_TEXT_VARIANT_FONTWEIGHT[variant],\n fontStyle,\n fontFamily,\n textTransform,\n textAlign,\n overflowWrap,\n ellipsis && 'truncate',\n className,\n )}`;\n\n return (\n <Component className={mergedClassName} style={style} {...props}>\n {children}\n </Component>\n );\n};\n"]}
1
+ {"version":3,"file":"Text.cjs","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":";;;;;;AAAA,kFAIiD;AACjD,qDAA4C;AAC5C,kDAA0B;AAE1B,uDAA+C;AAE/C,yDAO0B;AAGnB,MAAM,IAAI,GAAwB,CAAC,EACxC,OAAO,GAAG,kCAAW,CAAC,MAAM,EAC5B,QAAQ,EACR,SAAS,EACT,UAAU,EACV,UAAU,GAAG,iCAAU,CAAC,OAAO,EAC/B,SAAS,EACT,aAAa,EACb,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,OAAO,EACP,KAAK,GAAG,gCAAS,CAAC,WAAW,EAC7B,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,gFAAgF;IAChF,sFAAsF;IACtF,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,iBAAI,CAAC,CAAC,CAAC,qCAAoB,CAAC,OAAO,CAAC,CAAC;IAEjE,MAAM,eAAe,GAAG,GAAG,IAAA,kBAAO,EAChC,KAAK,EACL,gDAA+B,CAAC,OAAO,CAAC,EACxC,UAAU;QACR,CAAC,CAAC,qCAAoB,CAAC,UAAU,CAAC;QAClC,CAAC,CAAC,iDAAgC,CAAC,OAAO,CAAC,EAC7C,SAAS,CAAC,CAAC,CAAC,oCAAmB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,EACtD,qCAAoB,CAAC,UAAU,CAAC,EAChC,aAAa,EACb,SAAS,EACT,YAAY,EACZ,QAAQ,IAAI,UAAU,EACtB,SAAS,CACV,EAAE,CAAC;IAEJ,OAAO,CACL,8BAAC,SAAS,IAAC,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,KAAK,KAAM,KAAK,IAC3D,QAAQ,CACC,CACb,CAAC;AACJ,CAAC,CAAC;AAxCW,QAAA,IAAI,QAwCf","sourcesContent":["import {\n FontFamily,\n TextColor,\n TextVariant,\n} from '@metamask-previews/design-system-shared';\nimport { Slot } from '@radix-ui/react-slot';\nimport React from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\n\nimport {\n CLASSMAP_TEXT_VARIANT_FONTSTYLE,\n CLASSMAP_TEXT_VARIANT_FONTWEIGHT,\n MAP_FONTFAMILY_CLASS,\n MAP_FONTSTYLE_CLASS,\n MAP_FONTWEIGHT_CLASS,\n MAP_TEXT_VARIANT_TAG,\n} from './Text.constants';\nimport type { TextProps } from './Text.types';\n\nexport const Text: React.FC<TextProps> = ({\n variant = TextVariant.BodyMd,\n children,\n className,\n fontWeight,\n fontFamily = FontFamily.Default,\n fontStyle,\n textTransform,\n textAlign,\n overflowWrap,\n ellipsis,\n asChild,\n color = TextColor.TextDefault,\n style,\n ...props\n}) => {\n // When asChild is true, use Radix Slot to merge props onto the child component.\n // Otherwise, render the semantic HTML element mapped to this variant (e.g. h1-h4, p).\n const Component = asChild ? Slot : MAP_TEXT_VARIANT_TAG[variant];\n\n const mergedClassName = `${twMerge(\n color,\n CLASSMAP_TEXT_VARIANT_FONTSTYLE[variant],\n fontWeight\n ? MAP_FONTWEIGHT_CLASS[fontWeight]\n : CLASSMAP_TEXT_VARIANT_FONTWEIGHT[variant],\n fontStyle ? MAP_FONTSTYLE_CLASS[fontStyle] : undefined,\n MAP_FONTFAMILY_CLASS[fontFamily],\n textTransform,\n textAlign,\n overflowWrap,\n ellipsis && 'truncate',\n className,\n )}`;\n\n return (\n <Component className={mergedClassName} style={style} {...props}>\n {children}\n </Component>\n );\n};\n"]}