@metamask-previews/design-system-react 0.13.0-preview.dbe1fac → 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.
- package/CHANGELOG.md +12 -1
- package/dist/components/AvatarAccount/AvatarAccount.cjs +6 -6
- package/dist/components/AvatarAccount/AvatarAccount.cjs.map +1 -1
- package/dist/components/AvatarAccount/AvatarAccount.constants.cjs +6 -6
- package/dist/components/AvatarAccount/AvatarAccount.constants.cjs.map +1 -1
- package/dist/components/AvatarAccount/AvatarAccount.constants.d.cts +1 -1
- package/dist/components/AvatarAccount/AvatarAccount.constants.d.cts.map +1 -1
- package/dist/components/AvatarAccount/AvatarAccount.constants.d.mts +1 -1
- package/dist/components/AvatarAccount/AvatarAccount.constants.d.mts.map +1 -1
- package/dist/components/AvatarAccount/AvatarAccount.constants.mjs +1 -1
- package/dist/components/AvatarAccount/AvatarAccount.constants.mjs.map +1 -1
- package/dist/components/AvatarAccount/AvatarAccount.d.cts.map +1 -1
- package/dist/components/AvatarAccount/AvatarAccount.d.mts.map +1 -1
- package/dist/components/AvatarAccount/AvatarAccount.mjs +1 -1
- package/dist/components/AvatarAccount/AvatarAccount.mjs.map +1 -1
- package/dist/components/AvatarAccount/AvatarAccount.types.cjs.map +1 -1
- package/dist/components/AvatarAccount/AvatarAccount.types.d.cts +2 -18
- package/dist/components/AvatarAccount/AvatarAccount.types.d.cts.map +1 -1
- package/dist/components/AvatarAccount/AvatarAccount.types.d.mts +2 -18
- package/dist/components/AvatarAccount/AvatarAccount.types.d.mts.map +1 -1
- package/dist/components/AvatarAccount/AvatarAccount.types.mjs.map +1 -1
- package/dist/components/AvatarAccount/index.cjs +3 -3
- package/dist/components/AvatarAccount/index.cjs.map +1 -1
- package/dist/components/AvatarAccount/index.d.cts +1 -1
- package/dist/components/AvatarAccount/index.d.cts.map +1 -1
- package/dist/components/AvatarAccount/index.d.mts +1 -1
- package/dist/components/AvatarAccount/index.d.mts.map +1 -1
- package/dist/components/AvatarAccount/index.mjs +1 -1
- package/dist/components/AvatarAccount/index.mjs.map +1 -1
- package/dist/components/AvatarBase/index.cjs.map +1 -1
- package/dist/components/AvatarBase/index.d.cts.map +1 -1
- package/dist/components/AvatarBase/index.d.mts.map +1 -1
- package/dist/components/AvatarBase/index.mjs.map +1 -1
- package/dist/components/AvatarFavicon/AvatarFavicon.cjs +2 -1
- package/dist/components/AvatarFavicon/AvatarFavicon.cjs.map +1 -1
- package/dist/components/AvatarFavicon/AvatarFavicon.d.cts.map +1 -1
- package/dist/components/AvatarFavicon/AvatarFavicon.d.mts.map +1 -1
- package/dist/components/AvatarFavicon/AvatarFavicon.mjs +2 -1
- package/dist/components/AvatarFavicon/AvatarFavicon.mjs.map +1 -1
- package/dist/components/AvatarNetwork/AvatarNetwork.cjs +2 -1
- package/dist/components/AvatarNetwork/AvatarNetwork.cjs.map +1 -1
- package/dist/components/AvatarNetwork/AvatarNetwork.d.cts.map +1 -1
- package/dist/components/AvatarNetwork/AvatarNetwork.d.mts.map +1 -1
- package/dist/components/AvatarNetwork/AvatarNetwork.mjs +2 -1
- package/dist/components/AvatarNetwork/AvatarNetwork.mjs.map +1 -1
- package/dist/components/AvatarToken/AvatarToken.cjs +3 -3
- package/dist/components/AvatarToken/AvatarToken.cjs.map +1 -1
- package/dist/components/AvatarToken/AvatarToken.d.cts.map +1 -1
- package/dist/components/AvatarToken/AvatarToken.d.mts.map +1 -1
- package/dist/components/AvatarToken/AvatarToken.mjs +1 -1
- package/dist/components/AvatarToken/AvatarToken.mjs.map +1 -1
- package/dist/components/AvatarToken/AvatarToken.types.cjs.map +1 -1
- package/dist/components/AvatarToken/AvatarToken.types.d.cts +6 -6
- package/dist/components/AvatarToken/AvatarToken.types.d.cts.map +1 -1
- package/dist/components/AvatarToken/AvatarToken.types.d.mts +6 -6
- package/dist/components/AvatarToken/AvatarToken.types.d.mts.map +1 -1
- package/dist/components/AvatarToken/AvatarToken.types.mjs.map +1 -1
- package/dist/components/AvatarToken/index.cjs +2 -2
- package/dist/components/AvatarToken/index.cjs.map +1 -1
- package/dist/components/AvatarToken/index.d.cts +1 -1
- package/dist/components/AvatarToken/index.d.cts.map +1 -1
- package/dist/components/AvatarToken/index.d.mts +1 -1
- package/dist/components/AvatarToken/index.d.mts.map +1 -1
- package/dist/components/AvatarToken/index.mjs +1 -1
- package/dist/components/AvatarToken/index.mjs.map +1 -1
- package/dist/components/BannerBase/BannerBase.cjs +4 -3
- package/dist/components/BannerBase/BannerBase.cjs.map +1 -1
- package/dist/components/BannerBase/BannerBase.d.cts.map +1 -1
- package/dist/components/BannerBase/BannerBase.d.mts.map +1 -1
- package/dist/components/BannerBase/BannerBase.mjs +2 -1
- package/dist/components/BannerBase/BannerBase.mjs.map +1 -1
- package/dist/components/Input/Input.cjs +2 -2
- package/dist/components/Input/Input.cjs.map +1 -1
- package/dist/components/Input/Input.d.cts +1 -1
- package/dist/components/Input/Input.d.cts.map +1 -1
- package/dist/components/Input/Input.d.mts +1 -1
- package/dist/components/Input/Input.d.mts.map +1 -1
- package/dist/components/Input/Input.mjs +1 -1
- package/dist/components/Input/Input.mjs.map +1 -1
- package/dist/components/Input/Input.types.cjs.map +1 -1
- package/dist/components/Input/Input.types.d.cts +1 -1
- package/dist/components/Input/Input.types.d.cts.map +1 -1
- package/dist/components/Input/Input.types.d.mts +1 -1
- package/dist/components/Input/Input.types.d.mts.map +1 -1
- package/dist/components/Input/Input.types.mjs.map +1 -1
- package/dist/components/Text/Text.cjs +5 -3
- package/dist/components/Text/Text.cjs.map +1 -1
- package/dist/components/Text/Text.constants.cjs +58 -44
- package/dist/components/Text/Text.constants.cjs.map +1 -1
- package/dist/components/Text/Text.constants.d.cts +4 -1
- package/dist/components/Text/Text.constants.d.cts.map +1 -1
- package/dist/components/Text/Text.constants.d.mts +4 -1
- package/dist/components/Text/Text.constants.d.mts.map +1 -1
- package/dist/components/Text/Text.constants.mjs +15 -1
- package/dist/components/Text/Text.constants.mjs.map +1 -1
- package/dist/components/Text/Text.d.cts.map +1 -1
- package/dist/components/Text/Text.d.mts.map +1 -1
- package/dist/components/Text/Text.mjs +5 -3
- package/dist/components/Text/Text.mjs.map +1 -1
- package/dist/components/Text/Text.types.cjs.map +1 -1
- package/dist/components/Text/Text.types.d.cts +4 -39
- package/dist/components/Text/Text.types.d.cts.map +1 -1
- package/dist/components/Text/Text.types.d.mts +4 -39
- package/dist/components/Text/Text.types.d.mts.map +1 -1
- package/dist/components/Text/Text.types.mjs.map +1 -1
- package/dist/components/Text/index.cjs +7 -6
- package/dist/components/Text/index.cjs.map +1 -1
- package/dist/components/Text/index.d.cts +2 -1
- package/dist/components/Text/index.d.cts.map +1 -1
- package/dist/components/Text/index.d.mts +2 -1
- package/dist/components/Text/index.d.mts.map +1 -1
- package/dist/components/Text/index.mjs +2 -1
- package/dist/components/Text/index.mjs.map +1 -1
- package/dist/types/index.cjs +23 -157
- package/dist/types/index.cjs.map +1 -1
- package/dist/types/index.d.cts +20 -133
- package/dist/types/index.d.cts.map +1 -1
- package/dist/types/index.d.mts +20 -133
- package/dist/types/index.d.mts.map +1 -1
- package/dist/types/index.mjs +17 -149
- package/dist/types/index.mjs.map +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarToken.d.cts","sourceRoot":"","sources":["../../../src/components/AvatarToken/AvatarToken.tsx"],"names":[],"mappings":"
|
|
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":"
|
|
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,
|
|
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 *
|
|
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
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
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,
|
|
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
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
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,
|
|
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 *
|
|
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
|
|
5
|
-
Object.defineProperty(exports, "AvatarTokenSize", { enumerable: true, get: function () { return
|
|
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
|
|
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 "
|
|
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,
|
|
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 "
|
|
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,
|
|
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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/AvatarToken/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,
|
|
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:
|
|
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:
|
|
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:
|
|
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":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,
|
|
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":"
|
|
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":"
|
|
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,
|
|
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":";;;;;;AAAA,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EACL,aAAa,EACb,kBAAkB,EAClB,cAAc,EACd,UAAU,EACV,
|
|
1
|
+
{"version":3,"file":"BannerBase.mjs","sourceRoot":"","sources":["../../../src/components/BannerBase/BannerBase.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,gDAAgD;AAClF,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EACL,aAAa,EACb,kBAAkB,EAClB,cAAc,EACd,UAAU,EACV,gBAAgB,EAChB,QAAQ,EACT,8BAAoB;AACrB,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,GAAG,EAAE,yBAAe;AAC7B,OAAO,EAAE,MAAM,EAAE,4BAAkB;AACnC,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAC3C,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAI/B,MAAM,aAAa,GAAG,CAAC,OAAwB,EAA8B,EAAE,CAC7E,OAAO,OAAO,KAAK,QAAQ,IAAI,OAAO,OAAO,KAAK,QAAQ,CAAC;AAE7D,MAAM,UAAU,GAAG,CAAC,OAAwB,EAAE,EAAE,CAC9C,OAAO,KAAK,IAAI,IAAI,OAAO,KAAK,SAAS,CAAC;AAE5C,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EACE,KAAK,EACL,UAAU,EACV,WAAW,EACX,gBAAgB,EAChB,QAAQ,EACR,oBAAoB,EACpB,iBAAiB,EACjB,mBAAmB,EACnB,iBAAiB,EACjB,cAAc,EACd,OAAO,EACP,gBAAgB,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,yBAAyB,GAAG,iBAAiB,IAAI,EAAE,CAAC;IAE1D,MAAM,EACJ,SAAS,EAAE,oBAAoB,GAAG,cAAc,EAChD,OAAO,EAAE,uBAAuB,EAChC,SAAS,EAAE,oBAAoB,EAC/B,GAAG,wBAAwB,EAC5B,GAAG,gBAAgB,IAAI,EAAE,CAAC;IAE3B,MAAM,qBAAqB,GAAG,OAAO,CAAC,OAAO,IAAI,gBAAgB,CAAC,CAAC;IACnE,MAAM,sBAAsB,GAAG,OAAO,CAAC,mBAAmB,CAAC,CAAC;IAE5D,OAAO,CACL,oBAAC,GAAG,IACF,GAAG,EAAE,GAAG,EACR,aAAa,EAAE,gBAAgB,CAAC,GAAG,EACnC,UAAU,EAAE,aAAa,CAAC,KAAK,EAC/B,GAAG,EAAE,CAAC,EACN,eAAe,EAAE,kBAAkB,CAAC,iBAAiB,EACrD,OAAO,EAAE,CAAC,EACV,SAAS,EAAE,OAAO,CAAC,YAAY,EAAE,SAAS,CAAC,KACvC,KAAK;QAER,cAAc;QAEf,oBAAC,GAAG,IAAC,SAAS,EAAC,gBAAgB;YAC5B,UAAU,CAAC,KAAK,CAAC;gBAChB,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CACtB,oBAAC,IAAI,IACH,OAAO,EAAE,WAAW,CAAC,MAAM,EAC3B,UAAU,EAAE,UAAU,CAAC,MAAM,KACzB,UAAU,IAEb,KAAK,CACD,CACR,CAAC,CAAC,CAAC,CACF,KAAK,CACN,CAAC;YAEH,UAAU,CAAC,WAAW,CAAC,IAAI,CAC1B,oBAAC,GAAG,IAAC,SAAS,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,IACnD,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAC5B,oBAAC,IAAI,IAAC,OAAO,EAAE,WAAW,CAAC,MAAM,KAAM,gBAAgB,IACpD,WAAW,CACP,CACR,CAAC,CAAC,CAAC,CACF,WAAW,CACZ,CACG,CACP;YAEA,UAAU,CAAC,QAAQ,CAAC;gBACnB,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CACzB,oBAAC,IAAI,IAAC,OAAO,EAAE,WAAW,CAAC,MAAM,KAAM,oBAAoB,IACxD,QAAQ,CACJ,CACR,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CAAC;YAEH,sBAAsB,IAAI,CACzB,oBAAC,GAAG,IAAC,SAAS,EAAC,MAAM;gBACnB,oBAAC,MAAM,IACL,IAAI,EAAE,UAAU,CAAC,EAAE,EACnB,OAAO,EAAE,mBAAmB,KACxB,yBAAyB,IAE5B,iBAAiB,CACX,CACL,CACP,CACG;QAEL,qBAAqB,IAAI,CACxB,oBAAC,UAAU,IACT,SAAS,EAAE,OAAO,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,EAC3D,QAAQ,EAAE,QAAQ,CAAC,KAAK,EACxB,IAAI,EAAE,cAAc,CAAC,EAAE,EACvB,SAAS,EAAE,oBAAoB,EAC/B,OAAO,EAAE,OAAO,IAAI,uBAAuB,KACvC,wBAAwB,GAC5B,CACH,CACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC","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 =
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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 {
|
|
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,
|
|
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,
|
|
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 {
|
|
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 =
|
|
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
|
|
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,
|
|
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"]}
|