@metamask/design-system-react-native 0.30.1 → 0.30.2
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 +8 -1
- package/dist/components/Content/Content.cjs +2 -2
- package/dist/components/Content/Content.cjs.map +1 -1
- package/dist/components/Content/Content.d.cts.map +1 -1
- package/dist/components/Content/Content.d.mts.map +1 -1
- package/dist/components/Content/Content.mjs +3 -3
- package/dist/components/Content/Content.mjs.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
7
7
|
|
|
8
8
|
## [Unreleased]
|
|
9
9
|
|
|
10
|
+
## [0.30.2]
|
|
11
|
+
|
|
12
|
+
### Fixed
|
|
13
|
+
|
|
14
|
+
- Fixed `Content` value and subvalue to right-align in list rows when token amounts and fiat equivalents differ in length, including in `ListItem` ([#1257](https://github.com/MetaMask/metamask-design-system/pull/1257))
|
|
15
|
+
|
|
10
16
|
## [0.30.1]
|
|
11
17
|
|
|
12
18
|
### Fixed
|
|
@@ -522,7 +528,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
522
528
|
- Full TypeScript support with type definitions and enums
|
|
523
529
|
- React Native integration with TWRNC preset support
|
|
524
530
|
|
|
525
|
-
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.30.
|
|
531
|
+
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.30.2...HEAD
|
|
532
|
+
[0.30.2]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.30.1...@metamask/design-system-react-native@0.30.2
|
|
526
533
|
[0.30.1]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.30.0...@metamask/design-system-react-native@0.30.1
|
|
527
534
|
[0.30.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.29.0...@metamask/design-system-react-native@0.30.0
|
|
528
535
|
[0.29.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.28.0...@metamask/design-system-react-native@0.29.0
|
|
@@ -37,7 +37,7 @@ const Content = ({ verticalAlignment = design_system_shared_1.ContentVerticalAli
|
|
|
37
37
|
</BoxRow_1.BoxRow>) : null}
|
|
38
38
|
</BoxColumn_1.BoxColumn>
|
|
39
39
|
{/* Value and subvalue Column */}
|
|
40
|
-
{value || subvalue ? (<BoxColumn_1.BoxColumn twClassName="min-w-0" bottomAccessory={subvalue ? (<BoxRow_1.BoxRow
|
|
40
|
+
{value || subvalue ? (<BoxColumn_1.BoxColumn alignItems={design_system_shared_1.BoxAlignItems.End} twClassName="min-w-0" bottomAccessory={subvalue ? (<BoxRow_1.BoxRow startAccessory={subvalueStartAccessory} endAccessory={subvalueEndAccessory} gap={1}>
|
|
41
41
|
<TextOrChildren_1.TextOrChildren textProps={{
|
|
42
42
|
variant: design_system_shared_1.TextVariant.BodySm,
|
|
43
43
|
fontWeight: design_system_shared_1.FontWeight.Medium,
|
|
@@ -47,7 +47,7 @@ const Content = ({ verticalAlignment = design_system_shared_1.ContentVerticalAli
|
|
|
47
47
|
{subvalue}
|
|
48
48
|
</TextOrChildren_1.TextOrChildren>
|
|
49
49
|
</BoxRow_1.BoxRow>) : null}>
|
|
50
|
-
{value ? (<BoxRow_1.BoxRow
|
|
50
|
+
{value ? (<BoxRow_1.BoxRow startAccessory={valueStartAccessory} endAccessory={valueEndAccessory} gap={1}>
|
|
51
51
|
<TextOrChildren_1.TextOrChildren textProps={{
|
|
52
52
|
variant: design_system_shared_1.TextVariant.BodyMd,
|
|
53
53
|
fontWeight: design_system_shared_1.FontWeight.Medium,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Content.cjs","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":";;;;;;AAAA,
|
|
1
|
+
{"version":3,"file":"Content.cjs","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n BoxAlignItems,\n BoxFlexDirection,\n ContentVerticalAlignment,\n FontWeight,\n mergeTwClassName,\n TextColor,\n TextVariant,\n} from '@metamask/design-system-shared';\nimport React from 'react';\n\nimport { Box } from '../Box';\nimport { BoxColumn } from '../BoxColumn';\nimport { BoxRow } from '../BoxRow';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport { VERTICAL_ALIGNMENT_MAP } from './Content.constants';\nimport type { ContentProps } from './Content.types';\n\nexport const Content: React.FC<ContentProps> = ({\n verticalAlignment = ContentVerticalAlignment.Center,\n avatar,\n twClassName,\n title,\n titleProps,\n titleStartAccessory,\n titleEndAccessory,\n description,\n descriptionProps,\n descriptionStartAccessory,\n descriptionEndAccessory,\n value,\n valueProps,\n valueStartAccessory,\n valueEndAccessory,\n subvalue,\n subvalueProps,\n subvalueStartAccessory,\n subvalueEndAccessory,\n ...props\n}) => {\n return (\n <Box\n flexDirection={BoxFlexDirection.Row}\n alignItems={VERTICAL_ALIGNMENT_MAP[verticalAlignment]}\n gap={4}\n twClassName={mergeTwClassName('min-h-[46px]', twClassName)}\n {...props}\n >\n {avatar}\n {/* Title and description Column */}\n <BoxColumn\n twClassName=\"flex-1 min-w-0\"\n bottomAccessory={\n description ? (\n <BoxRow\n twClassName=\"w-full\"\n startAccessory={descriptionStartAccessory}\n endAccessory={descriptionEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodySm,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextAlternative,\n ...descriptionProps,\n }}\n >\n {description}\n </TextOrChildren>\n </BoxRow>\n ) : null\n }\n >\n {title ? (\n <BoxRow\n twClassName=\"w-full\"\n startAccessory={titleStartAccessory}\n endAccessory={titleEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodyMd,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextDefault,\n ...titleProps,\n }}\n >\n {title}\n </TextOrChildren>\n </BoxRow>\n ) : null}\n </BoxColumn>\n {/* Value and subvalue Column */}\n {value || subvalue ? (\n <BoxColumn\n alignItems={BoxAlignItems.End}\n twClassName=\"min-w-0\"\n bottomAccessory={\n subvalue ? (\n <BoxRow\n startAccessory={subvalueStartAccessory}\n endAccessory={subvalueEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodySm,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextAlternative,\n ...subvalueProps,\n }}\n >\n {subvalue}\n </TextOrChildren>\n </BoxRow>\n ) : null\n }\n >\n {value ? (\n <BoxRow\n startAccessory={valueStartAccessory}\n endAccessory={valueEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodyMd,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextDefault,\n ...valueProps,\n }}\n >\n {value}\n </TextOrChildren>\n </BoxRow>\n ) : null}\n </BoxColumn>\n ) : null}\n </Box>\n );\n};\n\nContent.displayName = 'Content';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Content.d.cts","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Content.d.cts","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,cAAc;AAQ1B,OAAO,KAAK,EAAE,YAAY,EAAE,4BAAwB;AAEpD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA4H1C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Content.d.mts","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Content.d.mts","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,cAAc;AAQ1B,OAAO,KAAK,EAAE,YAAY,EAAE,4BAAwB;AAEpD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CA4H1C,CAAC"}
|
|
@@ -4,7 +4,7 @@ function $importDefault(module) {
|
|
|
4
4
|
}
|
|
5
5
|
return module;
|
|
6
6
|
}
|
|
7
|
-
import { BoxFlexDirection, ContentVerticalAlignment, FontWeight, mergeTwClassName, TextColor, TextVariant } from "@metamask/design-system-shared";
|
|
7
|
+
import { BoxAlignItems, BoxFlexDirection, ContentVerticalAlignment, FontWeight, mergeTwClassName, TextColor, TextVariant } from "@metamask/design-system-shared";
|
|
8
8
|
import $React from "react";
|
|
9
9
|
const React = $importDefault($React);
|
|
10
10
|
import { Box } from "../Box/index.mjs";
|
|
@@ -38,7 +38,7 @@ export const Content = ({ verticalAlignment = ContentVerticalAlignment.Center, a
|
|
|
38
38
|
</BoxRow>) : null}
|
|
39
39
|
</BoxColumn>
|
|
40
40
|
{/* Value and subvalue Column */}
|
|
41
|
-
{value || subvalue ? (<BoxColumn twClassName="min-w-0" bottomAccessory={subvalue ? (<BoxRow
|
|
41
|
+
{value || subvalue ? (<BoxColumn alignItems={BoxAlignItems.End} twClassName="min-w-0" bottomAccessory={subvalue ? (<BoxRow startAccessory={subvalueStartAccessory} endAccessory={subvalueEndAccessory} gap={1}>
|
|
42
42
|
<TextOrChildren textProps={{
|
|
43
43
|
variant: TextVariant.BodySm,
|
|
44
44
|
fontWeight: FontWeight.Medium,
|
|
@@ -48,7 +48,7 @@ export const Content = ({ verticalAlignment = ContentVerticalAlignment.Center, a
|
|
|
48
48
|
{subvalue}
|
|
49
49
|
</TextOrChildren>
|
|
50
50
|
</BoxRow>) : null}>
|
|
51
|
-
{value ? (<BoxRow
|
|
51
|
+
{value ? (<BoxRow startAccessory={valueStartAccessory} endAccessory={valueEndAccessory} gap={1}>
|
|
52
52
|
<TextOrChildren textProps={{
|
|
53
53
|
variant: TextVariant.BodyMd,
|
|
54
54
|
fontWeight: FontWeight.Medium,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Content.mjs","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,gBAAgB,EAChB,wBAAwB,EACxB,UAAU,EACV,gBAAgB,EAChB,SAAS,EACT,WAAW,EACZ,uCAAuC;AACxC,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,GAAG,EAAE,yBAAe;AAC7B,OAAO,EAAE,SAAS,EAAE,+BAAqB;AACzC,OAAO,EAAE,MAAM,EAAE,4BAAkB;AACnC,OAAO,EAAE,cAAc,EAAE,oDAA0C;AAEnE,OAAO,EAAE,sBAAsB,EAAE,gCAA4B;AAG7D,MAAM,CAAC,MAAM,OAAO,GAA2B,CAAC,EAC9C,iBAAiB,GAAG,wBAAwB,CAAC,MAAM,EACnD,MAAM,EACN,WAAW,EACX,KAAK,EACL,UAAU,EACV,mBAAmB,EACnB,iBAAiB,EACjB,WAAW,EACX,gBAAgB,EAChB,yBAAyB,EACzB,uBAAuB,EACvB,KAAK,EACL,UAAU,EACV,mBAAmB,EACnB,iBAAiB,EACjB,QAAQ,EACR,aAAa,EACb,sBAAsB,EACtB,oBAAoB,EACpB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,OAAO,CACL,CAAC,GAAG,CACF,aAAa,CAAC,CAAC,gBAAgB,CAAC,GAAG,CAAC,CACpC,UAAU,CAAC,CAAC,sBAAsB,CAAC,iBAAiB,CAAC,CAAC,CACtD,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,WAAW,CAAC,CAAC,gBAAgB,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC,CAC3D,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,MAAM,CACP;MAAA,CAAC,kCAAkC,CACnC;MAAA,CAAC,SAAS,CACR,WAAW,CAAC,gBAAgB,CAC5B,eAAe,CAAC,CACd,WAAW,CAAC,CAAC,CAAC,CACZ,CAAC,MAAM,CACL,WAAW,CAAC,QAAQ,CACpB,cAAc,CAAC,CAAC,yBAAyB,CAAC,CAC1C,YAAY,CAAC,CAAC,uBAAuB,CAAC,CACtC,GAAG,CAAC,CAAC,CAAC,CAAC,CAEP;cAAA,CAAC,cAAc,CACb,SAAS,CAAC,CAAC;gBACT,OAAO,EAAE,WAAW,CAAC,MAAM;gBAC3B,UAAU,EAAE,UAAU,CAAC,MAAM;gBAC7B,KAAK,EAAE,SAAS,CAAC,eAAe;gBAChC,GAAG,gBAAgB;aACpB,CAAC,CAEF;gBAAA,CAAC,WAAW,CACd;cAAA,EAAE,cAAc,CAClB;YAAA,EAAE,MAAM,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CACT,CAED;QAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CACP,CAAC,MAAM,CACL,WAAW,CAAC,QAAQ,CACpB,cAAc,CAAC,CAAC,mBAAmB,CAAC,CACpC,YAAY,CAAC,CAAC,iBAAiB,CAAC,CAChC,GAAG,CAAC,CAAC,CAAC,CAAC,CAEP;YAAA,CAAC,cAAc,CACb,SAAS,CAAC,CAAC;gBACT,OAAO,EAAE,WAAW,CAAC,MAAM;gBAC3B,UAAU,EAAE,UAAU,CAAC,MAAM;gBAC7B,KAAK,EAAE,SAAS,CAAC,WAAW;gBAC5B,GAAG,UAAU;aACd,CAAC,CAEF;cAAA,CAAC,KAAK,CACR;YAAA,EAAE,cAAc,CAClB;UAAA,EAAE,MAAM,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CACV;MAAA,EAAE,SAAS,CACX;MAAA,CAAC,+BAA+B,CAChC;MAAA,CAAC,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,CACnB,CAAC,SAAS,CACR,WAAW,CAAC,SAAS,CACrB,eAAe,CAAC,CACd,QAAQ,CAAC,CAAC,CAAC,CACT,CAAC,MAAM,CACL,
|
|
1
|
+
{"version":3,"file":"Content.mjs","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,aAAa,EACb,gBAAgB,EAChB,wBAAwB,EACxB,UAAU,EACV,gBAAgB,EAChB,SAAS,EACT,WAAW,EACZ,uCAAuC;AACxC,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,GAAG,EAAE,yBAAe;AAC7B,OAAO,EAAE,SAAS,EAAE,+BAAqB;AACzC,OAAO,EAAE,MAAM,EAAE,4BAAkB;AACnC,OAAO,EAAE,cAAc,EAAE,oDAA0C;AAEnE,OAAO,EAAE,sBAAsB,EAAE,gCAA4B;AAG7D,MAAM,CAAC,MAAM,OAAO,GAA2B,CAAC,EAC9C,iBAAiB,GAAG,wBAAwB,CAAC,MAAM,EACnD,MAAM,EACN,WAAW,EACX,KAAK,EACL,UAAU,EACV,mBAAmB,EACnB,iBAAiB,EACjB,WAAW,EACX,gBAAgB,EAChB,yBAAyB,EACzB,uBAAuB,EACvB,KAAK,EACL,UAAU,EACV,mBAAmB,EACnB,iBAAiB,EACjB,QAAQ,EACR,aAAa,EACb,sBAAsB,EACtB,oBAAoB,EACpB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,OAAO,CACL,CAAC,GAAG,CACF,aAAa,CAAC,CAAC,gBAAgB,CAAC,GAAG,CAAC,CACpC,UAAU,CAAC,CAAC,sBAAsB,CAAC,iBAAiB,CAAC,CAAC,CACtD,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,WAAW,CAAC,CAAC,gBAAgB,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC,CAC3D,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,MAAM,CACP;MAAA,CAAC,kCAAkC,CACnC;MAAA,CAAC,SAAS,CACR,WAAW,CAAC,gBAAgB,CAC5B,eAAe,CAAC,CACd,WAAW,CAAC,CAAC,CAAC,CACZ,CAAC,MAAM,CACL,WAAW,CAAC,QAAQ,CACpB,cAAc,CAAC,CAAC,yBAAyB,CAAC,CAC1C,YAAY,CAAC,CAAC,uBAAuB,CAAC,CACtC,GAAG,CAAC,CAAC,CAAC,CAAC,CAEP;cAAA,CAAC,cAAc,CACb,SAAS,CAAC,CAAC;gBACT,OAAO,EAAE,WAAW,CAAC,MAAM;gBAC3B,UAAU,EAAE,UAAU,CAAC,MAAM;gBAC7B,KAAK,EAAE,SAAS,CAAC,eAAe;gBAChC,GAAG,gBAAgB;aACpB,CAAC,CAEF;gBAAA,CAAC,WAAW,CACd;cAAA,EAAE,cAAc,CAClB;YAAA,EAAE,MAAM,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CACT,CAED;QAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CACP,CAAC,MAAM,CACL,WAAW,CAAC,QAAQ,CACpB,cAAc,CAAC,CAAC,mBAAmB,CAAC,CACpC,YAAY,CAAC,CAAC,iBAAiB,CAAC,CAChC,GAAG,CAAC,CAAC,CAAC,CAAC,CAEP;YAAA,CAAC,cAAc,CACb,SAAS,CAAC,CAAC;gBACT,OAAO,EAAE,WAAW,CAAC,MAAM;gBAC3B,UAAU,EAAE,UAAU,CAAC,MAAM;gBAC7B,KAAK,EAAE,SAAS,CAAC,WAAW;gBAC5B,GAAG,UAAU;aACd,CAAC,CAEF;cAAA,CAAC,KAAK,CACR;YAAA,EAAE,cAAc,CAClB;UAAA,EAAE,MAAM,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CACV;MAAA,EAAE,SAAS,CACX;MAAA,CAAC,+BAA+B,CAChC;MAAA,CAAC,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,CACnB,CAAC,SAAS,CACR,UAAU,CAAC,CAAC,aAAa,CAAC,GAAG,CAAC,CAC9B,WAAW,CAAC,SAAS,CACrB,eAAe,CAAC,CACd,QAAQ,CAAC,CAAC,CAAC,CACT,CAAC,MAAM,CACL,cAAc,CAAC,CAAC,sBAAsB,CAAC,CACvC,YAAY,CAAC,CAAC,oBAAoB,CAAC,CACnC,GAAG,CAAC,CAAC,CAAC,CAAC,CAEP;gBAAA,CAAC,cAAc,CACb,SAAS,CAAC,CAAC;oBACT,OAAO,EAAE,WAAW,CAAC,MAAM;oBAC3B,UAAU,EAAE,UAAU,CAAC,MAAM;oBAC7B,KAAK,EAAE,SAAS,CAAC,eAAe;oBAChC,GAAG,aAAa;iBACjB,CAAC,CAEF;kBAAA,CAAC,QAAQ,CACX;gBAAA,EAAE,cAAc,CAClB;cAAA,EAAE,MAAM,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CACT,CAED;UAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CACP,CAAC,MAAM,CACL,cAAc,CAAC,CAAC,mBAAmB,CAAC,CACpC,YAAY,CAAC,CAAC,iBAAiB,CAAC,CAChC,GAAG,CAAC,CAAC,CAAC,CAAC,CAEP;cAAA,CAAC,cAAc,CACb,SAAS,CAAC,CAAC;oBACT,OAAO,EAAE,WAAW,CAAC,MAAM;oBAC3B,UAAU,EAAE,UAAU,CAAC,MAAM;oBAC7B,KAAK,EAAE,SAAS,CAAC,WAAW;oBAC5B,GAAG,UAAU;iBACd,CAAC,CAEF;gBAAA,CAAC,KAAK,CACR;cAAA,EAAE,cAAc,CAClB;YAAA,EAAE,MAAM,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CACV;QAAA,EAAE,SAAS,CAAC,CACb,CAAC,CAAC,CAAC,IAAI,CACV;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC","sourcesContent":["import {\n BoxAlignItems,\n BoxFlexDirection,\n ContentVerticalAlignment,\n FontWeight,\n mergeTwClassName,\n TextColor,\n TextVariant,\n} from '@metamask/design-system-shared';\nimport React from 'react';\n\nimport { Box } from '../Box';\nimport { BoxColumn } from '../BoxColumn';\nimport { BoxRow } from '../BoxRow';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport { VERTICAL_ALIGNMENT_MAP } from './Content.constants';\nimport type { ContentProps } from './Content.types';\n\nexport const Content: React.FC<ContentProps> = ({\n verticalAlignment = ContentVerticalAlignment.Center,\n avatar,\n twClassName,\n title,\n titleProps,\n titleStartAccessory,\n titleEndAccessory,\n description,\n descriptionProps,\n descriptionStartAccessory,\n descriptionEndAccessory,\n value,\n valueProps,\n valueStartAccessory,\n valueEndAccessory,\n subvalue,\n subvalueProps,\n subvalueStartAccessory,\n subvalueEndAccessory,\n ...props\n}) => {\n return (\n <Box\n flexDirection={BoxFlexDirection.Row}\n alignItems={VERTICAL_ALIGNMENT_MAP[verticalAlignment]}\n gap={4}\n twClassName={mergeTwClassName('min-h-[46px]', twClassName)}\n {...props}\n >\n {avatar}\n {/* Title and description Column */}\n <BoxColumn\n twClassName=\"flex-1 min-w-0\"\n bottomAccessory={\n description ? (\n <BoxRow\n twClassName=\"w-full\"\n startAccessory={descriptionStartAccessory}\n endAccessory={descriptionEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodySm,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextAlternative,\n ...descriptionProps,\n }}\n >\n {description}\n </TextOrChildren>\n </BoxRow>\n ) : null\n }\n >\n {title ? (\n <BoxRow\n twClassName=\"w-full\"\n startAccessory={titleStartAccessory}\n endAccessory={titleEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodyMd,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextDefault,\n ...titleProps,\n }}\n >\n {title}\n </TextOrChildren>\n </BoxRow>\n ) : null}\n </BoxColumn>\n {/* Value and subvalue Column */}\n {value || subvalue ? (\n <BoxColumn\n alignItems={BoxAlignItems.End}\n twClassName=\"min-w-0\"\n bottomAccessory={\n subvalue ? (\n <BoxRow\n startAccessory={subvalueStartAccessory}\n endAccessory={subvalueEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodySm,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextAlternative,\n ...subvalueProps,\n }}\n >\n {subvalue}\n </TextOrChildren>\n </BoxRow>\n ) : null\n }\n >\n {value ? (\n <BoxRow\n startAccessory={valueStartAccessory}\n endAccessory={valueEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodyMd,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextDefault,\n ...valueProps,\n }}\n >\n {value}\n </TextOrChildren>\n </BoxRow>\n ) : null}\n </BoxColumn>\n ) : null}\n </Box>\n );\n};\n\nContent.displayName = 'Content';\n"]}
|