@metamask/design-system-react 0.27.0 → 0.27.1
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/Tag/Tag.cjs +2 -2
- package/dist/components/Tag/Tag.cjs.map +1 -1
- package/dist/components/Tag/Tag.d.cts.map +1 -1
- package/dist/components/Tag/Tag.d.mts.map +1 -1
- package/dist/components/Tag/Tag.mjs +2 -2
- package/dist/components/Tag/Tag.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.27.1]
|
|
11
|
+
|
|
12
|
+
### Fixed
|
|
13
|
+
|
|
14
|
+
- Fixed `Tag` gap between icon and label from 4px to 2px to match design spec ([#1236](https://github.com/MetaMask/metamask-design-system/pull/1236))
|
|
15
|
+
|
|
10
16
|
## [0.27.0]
|
|
11
17
|
|
|
12
18
|
### Added
|
|
@@ -371,7 +377,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
371
377
|
- Full TypeScript support with type definitions and enums
|
|
372
378
|
- Tailwind CSS integration with design token support
|
|
373
379
|
|
|
374
|
-
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.27.
|
|
380
|
+
[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.27.1...HEAD
|
|
381
|
+
[0.27.1]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.27.0...@metamask/design-system-react@0.27.1
|
|
375
382
|
[0.27.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.26.0...@metamask/design-system-react@0.27.0
|
|
376
383
|
[0.26.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.25.0...@metamask/design-system-react@0.26.0
|
|
377
384
|
[0.25.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react@0.24.0...@metamask/design-system-react@0.25.0
|
|
@@ -41,8 +41,8 @@ exports.Tag = (0, react_1.forwardRef)(({ children, severity = design_system_shar
|
|
|
41
41
|
const resolvedStartAccessory = finalStartIconName ? (react_1.default.createElement(Icon_1.Icon, { name: finalStartIconName, color: iconColor, size: design_system_shared_1.IconSize.Xs, className: "shrink-0", ...startIconProps })) : ((startAccessory ?? null));
|
|
42
42
|
const resolvedEndAccessory = finalEndIconName ? (react_1.default.createElement(Icon_1.Icon, { name: finalEndIconName, color: iconColor, size: design_system_shared_1.IconSize.Xs, className: "shrink-0", ...endIconProps })) : ((endAccessory ?? null));
|
|
43
43
|
const content = isTextContent(children) ? (react_1.default.createElement(Text_1.Text, { variant: design_system_shared_1.TextVariant.BodyXs, color: textColor, fontWeight: design_system_shared_1.FontWeight.Medium }, children)) : (children);
|
|
44
|
-
const mergedClassName = (0, tw_merge_1.twMerge)('inline-flex self-start rounded-md', finalStartIconName ? 'pl-1' : 'pl-1.5', finalEndIconName ? 'pr-1' : 'pr-1.5', className);
|
|
45
|
-
return (react_1.default.createElement(Box_1.Box, { ref: ref, flexDirection: design_system_shared_1.BoxFlexDirection.Row, alignItems: design_system_shared_1.BoxAlignItems.Center,
|
|
44
|
+
const mergedClassName = (0, tw_merge_1.twMerge)('inline-flex gap-0.5 self-start rounded-md', finalStartIconName ? 'pl-1' : 'pl-1.5', finalEndIconName ? 'pr-1' : 'pr-1.5', className);
|
|
45
|
+
return (react_1.default.createElement(Box_1.Box, { ref: ref, flexDirection: design_system_shared_1.BoxFlexDirection.Row, alignItems: design_system_shared_1.BoxAlignItems.Center, backgroundColor: backgroundColor, className: mergedClassName, style: style, ...props },
|
|
46
46
|
resolvedStartAccessory,
|
|
47
47
|
content,
|
|
48
48
|
resolvedEndAccessory));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.cjs","sourceRoot":"","sources":["../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yEAOwC;AACxC,+CAA0C;AAE1C,uDAA+C;AAC/C,0CAA6B;AAC7B,4CAA+B;AAC/B,4CAA+B;AAE/B,uDAIyB;AAGzB,MAAM,aAAa,GAAG,CAAC,OAAwB,EAA8B,EAAE,CAC7E,OAAO,OAAO,KAAK,QAAQ,IAAI,OAAO,OAAO,KAAK,QAAQ,CAAC;AAEhD,QAAA,GAAG,GAAG,IAAA,kBAAU,EAC3B,CACE,EACE,QAAQ,EACR,QAAQ,GAAG,kCAAW,CAAC,OAAO,EAC9B,aAAa,EACb,cAAc,EACd,cAAc,EACd,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,eAAe,GAAG,2CAA2B,CAAC,QAAQ,CAAC,CAAC;IAC9D,MAAM,SAAS,GAAG,2CAA2B,CAAC,QAAQ,CAAC,CAAC;IACxD,MAAM,SAAS,GAAG,2CAA2B,CAAC,QAAQ,CAAC,CAAC;IAExD,MAAM,kBAAkB,GAAG,aAAa,IAAI,cAAc,EAAE,IAAI,CAAC;IACjE,MAAM,gBAAgB,GAAG,WAAW,IAAI,YAAY,EAAE,IAAI,CAAC;IAE3D,MAAM,sBAAsB,GAAG,kBAAkB,CAAC,CAAC,CAAC,CAClD,8BAAC,WAAI,IACH,IAAI,EAAE,kBAAkB,EACxB,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,+BAAQ,CAAC,EAAE,EACjB,SAAS,EAAC,UAAU,KAChB,cAAc,GAClB,CACH,CAAC,CAAC,CAAC,CACF,CAAC,cAAc,IAAI,IAAI,CAAC,CACzB,CAAC;IAEF,MAAM,oBAAoB,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAC9C,8BAAC,WAAI,IACH,IAAI,EAAE,gBAAgB,EACtB,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,+BAAQ,CAAC,EAAE,EACjB,SAAS,EAAC,UAAU,KAChB,YAAY,GAChB,CACH,CAAC,CAAC,CAAC,CACF,CAAC,YAAY,IAAI,IAAI,CAAC,CACvB,CAAC;IAEF,MAAM,OAAO,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CACxC,8BAAC,WAAI,IACH,OAAO,EAAE,kCAAW,CAAC,MAAM,EAC3B,KAAK,EAAE,SAAS,EAChB,UAAU,EAAE,iCAAU,CAAC,MAAM,IAE5B,QAAQ,CACJ,CACR,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CAAC;IAEF,MAAM,eAAe,GAAG,IAAA,kBAAO,EAC7B,
|
|
1
|
+
{"version":3,"file":"Tag.cjs","sourceRoot":"","sources":["../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yEAOwC;AACxC,+CAA0C;AAE1C,uDAA+C;AAC/C,0CAA6B;AAC7B,4CAA+B;AAC/B,4CAA+B;AAE/B,uDAIyB;AAGzB,MAAM,aAAa,GAAG,CAAC,OAAwB,EAA8B,EAAE,CAC7E,OAAO,OAAO,KAAK,QAAQ,IAAI,OAAO,OAAO,KAAK,QAAQ,CAAC;AAEhD,QAAA,GAAG,GAAG,IAAA,kBAAU,EAC3B,CACE,EACE,QAAQ,EACR,QAAQ,GAAG,kCAAW,CAAC,OAAO,EAC9B,aAAa,EACb,cAAc,EACd,cAAc,EACd,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,eAAe,GAAG,2CAA2B,CAAC,QAAQ,CAAC,CAAC;IAC9D,MAAM,SAAS,GAAG,2CAA2B,CAAC,QAAQ,CAAC,CAAC;IACxD,MAAM,SAAS,GAAG,2CAA2B,CAAC,QAAQ,CAAC,CAAC;IAExD,MAAM,kBAAkB,GAAG,aAAa,IAAI,cAAc,EAAE,IAAI,CAAC;IACjE,MAAM,gBAAgB,GAAG,WAAW,IAAI,YAAY,EAAE,IAAI,CAAC;IAE3D,MAAM,sBAAsB,GAAG,kBAAkB,CAAC,CAAC,CAAC,CAClD,8BAAC,WAAI,IACH,IAAI,EAAE,kBAAkB,EACxB,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,+BAAQ,CAAC,EAAE,EACjB,SAAS,EAAC,UAAU,KAChB,cAAc,GAClB,CACH,CAAC,CAAC,CAAC,CACF,CAAC,cAAc,IAAI,IAAI,CAAC,CACzB,CAAC;IAEF,MAAM,oBAAoB,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAC9C,8BAAC,WAAI,IACH,IAAI,EAAE,gBAAgB,EACtB,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,+BAAQ,CAAC,EAAE,EACjB,SAAS,EAAC,UAAU,KAChB,YAAY,GAChB,CACH,CAAC,CAAC,CAAC,CACF,CAAC,YAAY,IAAI,IAAI,CAAC,CACvB,CAAC;IAEF,MAAM,OAAO,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CACxC,8BAAC,WAAI,IACH,OAAO,EAAE,kCAAW,CAAC,MAAM,EAC3B,KAAK,EAAE,SAAS,EAChB,UAAU,EAAE,iCAAU,CAAC,MAAM,IAE5B,QAAQ,CACJ,CACR,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CAAC;IAEF,MAAM,eAAe,GAAG,IAAA,kBAAO,EAC7B,2CAA2C,EAC3C,kBAAkB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EACtC,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EACpC,SAAS,CACV,CAAC;IAEF,OAAO,CACL,8BAAC,SAAG,IACF,GAAG,EAAE,GAAG,EACR,aAAa,EAAE,uCAAgB,CAAC,GAAG,EACnC,UAAU,EAAE,oCAAa,CAAC,MAAM,EAChC,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE,KAAK,KACR,KAAK;QAER,sBAAsB;QACtB,OAAO;QACP,oBAAoB,CACjB,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAG,CAAC,WAAW,GAAG,KAAK,CAAC","sourcesContent":["import {\n BoxAlignItems,\n BoxFlexDirection,\n FontWeight,\n IconSize,\n TagSeverity,\n TextVariant,\n} from '@metamask/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Box } from '../Box';\nimport { Icon } from '../Icon';\nimport { Text } from '../Text';\n\nimport {\n MAP_TAG_SEVERITY_BACKGROUND,\n MAP_TAG_SEVERITY_ICON_COLOR,\n MAP_TAG_SEVERITY_TEXT_COLOR,\n} from './Tag.constants';\nimport type { TagProps } from './Tag.types';\n\nconst isTextContent = (content: React.ReactNode): content is string | number =>\n typeof content === 'string' || typeof content === 'number';\n\nexport const Tag = forwardRef<HTMLDivElement, TagProps>(\n (\n {\n children,\n severity = TagSeverity.Neutral,\n startIconName,\n startIconProps,\n startAccessory,\n endIconName,\n endIconProps,\n endAccessory,\n className,\n style,\n ...props\n },\n ref,\n ) => {\n const backgroundColor = MAP_TAG_SEVERITY_BACKGROUND[severity];\n const textColor = MAP_TAG_SEVERITY_TEXT_COLOR[severity];\n const iconColor = MAP_TAG_SEVERITY_ICON_COLOR[severity];\n\n const finalStartIconName = startIconName ?? startIconProps?.name;\n const finalEndIconName = endIconName ?? endIconProps?.name;\n\n const resolvedStartAccessory = finalStartIconName ? (\n <Icon\n name={finalStartIconName}\n color={iconColor}\n size={IconSize.Xs}\n className=\"shrink-0\"\n {...startIconProps}\n />\n ) : (\n (startAccessory ?? null)\n );\n\n const resolvedEndAccessory = finalEndIconName ? (\n <Icon\n name={finalEndIconName}\n color={iconColor}\n size={IconSize.Xs}\n className=\"shrink-0\"\n {...endIconProps}\n />\n ) : (\n (endAccessory ?? null)\n );\n\n const content = isTextContent(children) ? (\n <Text\n variant={TextVariant.BodyXs}\n color={textColor}\n fontWeight={FontWeight.Medium}\n >\n {children}\n </Text>\n ) : (\n children\n );\n\n const mergedClassName = twMerge(\n 'inline-flex gap-0.5 self-start rounded-md',\n finalStartIconName ? 'pl-1' : 'pl-1.5',\n finalEndIconName ? 'pr-1' : 'pr-1.5',\n className,\n );\n\n return (\n <Box\n ref={ref}\n flexDirection={BoxFlexDirection.Row}\n alignItems={BoxAlignItems.Center}\n backgroundColor={backgroundColor}\n className={mergedClassName}\n style={style}\n {...props}\n >\n {resolvedStartAccessory}\n {content}\n {resolvedEndAccessory}\n </Box>\n );\n },\n);\n\nTag.displayName = 'Tag';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.d.cts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAqB,cAAc;AAY1C,OAAO,KAAK,EAAE,QAAQ,EAAE,wBAAoB;AAK5C,eAAO,MAAM,GAAG,
|
|
1
|
+
{"version":3,"file":"Tag.d.cts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAqB,cAAc;AAY1C,OAAO,KAAK,EAAE,QAAQ,EAAE,wBAAoB;AAK5C,eAAO,MAAM,GAAG,8FAmFf,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.d.mts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAqB,cAAc;AAY1C,OAAO,KAAK,EAAE,QAAQ,EAAE,wBAAoB;AAK5C,eAAO,MAAM,GAAG,
|
|
1
|
+
{"version":3,"file":"Tag.d.mts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAqB,cAAc;AAY1C,OAAO,KAAK,EAAE,QAAQ,EAAE,wBAAoB;AAK5C,eAAO,MAAM,GAAG,8FAmFf,CAAC"}
|
|
@@ -22,8 +22,8 @@ export const Tag = forwardRef(({ children, severity = TagSeverity.Neutral, start
|
|
|
22
22
|
const resolvedStartAccessory = finalStartIconName ? (React.createElement(Icon, { name: finalStartIconName, color: iconColor, size: IconSize.Xs, className: "shrink-0", ...startIconProps })) : ((startAccessory ?? null));
|
|
23
23
|
const resolvedEndAccessory = finalEndIconName ? (React.createElement(Icon, { name: finalEndIconName, color: iconColor, size: IconSize.Xs, className: "shrink-0", ...endIconProps })) : ((endAccessory ?? null));
|
|
24
24
|
const content = isTextContent(children) ? (React.createElement(Text, { variant: TextVariant.BodyXs, color: textColor, fontWeight: FontWeight.Medium }, children)) : (children);
|
|
25
|
-
const mergedClassName = twMerge('inline-flex self-start rounded-md', finalStartIconName ? 'pl-1' : 'pl-1.5', finalEndIconName ? 'pr-1' : 'pr-1.5', className);
|
|
26
|
-
return (React.createElement(Box, { ref: ref, flexDirection: BoxFlexDirection.Row, alignItems: BoxAlignItems.Center,
|
|
25
|
+
const mergedClassName = twMerge('inline-flex gap-0.5 self-start rounded-md', finalStartIconName ? 'pl-1' : 'pl-1.5', finalEndIconName ? 'pr-1' : 'pr-1.5', className);
|
|
26
|
+
return (React.createElement(Box, { ref: ref, flexDirection: BoxFlexDirection.Row, alignItems: BoxAlignItems.Center, backgroundColor: backgroundColor, className: mergedClassName, style: style, ...props },
|
|
27
27
|
resolvedStartAccessory,
|
|
28
28
|
content,
|
|
29
29
|
resolvedEndAccessory));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tag.mjs","sourceRoot":"","sources":["../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,aAAa,EACb,gBAAgB,EAChB,UAAU,EACV,QAAQ,EACR,WAAW,EACX,WAAW,EACZ,uCAAuC;AACxC,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAE1C,OAAO,EAAE,OAAO,EAAE,iCAA6B;AAC/C,OAAO,EAAE,GAAG,EAAE,yBAAe;AAC7B,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAC/B,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAE/B,OAAO,EACL,2BAA2B,EAC3B,2BAA2B,EAC3B,2BAA2B,EAC5B,4BAAwB;AAGzB,MAAM,aAAa,GAAG,CAAC,OAAwB,EAA8B,EAAE,CAC7E,OAAO,OAAO,KAAK,QAAQ,IAAI,OAAO,OAAO,KAAK,QAAQ,CAAC;AAE7D,MAAM,CAAC,MAAM,GAAG,GAAG,UAAU,CAC3B,CACE,EACE,QAAQ,EACR,QAAQ,GAAG,WAAW,CAAC,OAAO,EAC9B,aAAa,EACb,cAAc,EACd,cAAc,EACd,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,eAAe,GAAG,2BAA2B,CAAC,QAAQ,CAAC,CAAC;IAC9D,MAAM,SAAS,GAAG,2BAA2B,CAAC,QAAQ,CAAC,CAAC;IACxD,MAAM,SAAS,GAAG,2BAA2B,CAAC,QAAQ,CAAC,CAAC;IAExD,MAAM,kBAAkB,GAAG,aAAa,IAAI,cAAc,EAAE,IAAI,CAAC;IACjE,MAAM,gBAAgB,GAAG,WAAW,IAAI,YAAY,EAAE,IAAI,CAAC;IAE3D,MAAM,sBAAsB,GAAG,kBAAkB,CAAC,CAAC,CAAC,CAClD,oBAAC,IAAI,IACH,IAAI,EAAE,kBAAkB,EACxB,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,QAAQ,CAAC,EAAE,EACjB,SAAS,EAAC,UAAU,KAChB,cAAc,GAClB,CACH,CAAC,CAAC,CAAC,CACF,CAAC,cAAc,IAAI,IAAI,CAAC,CACzB,CAAC;IAEF,MAAM,oBAAoB,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAC9C,oBAAC,IAAI,IACH,IAAI,EAAE,gBAAgB,EACtB,KAAK,EAAE,SAAS,EAChB,IAAI,EAAE,QAAQ,CAAC,EAAE,EACjB,SAAS,EAAC,UAAU,KAChB,YAAY,GAChB,CACH,CAAC,CAAC,CAAC,CACF,CAAC,YAAY,IAAI,IAAI,CAAC,CACvB,CAAC;IAEF,MAAM,OAAO,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CACxC,oBAAC,IAAI,IACH,OAAO,EAAE,WAAW,CAAC,MAAM,EAC3B,KAAK,EAAE,SAAS,EAChB,UAAU,EAAE,UAAU,CAAC,MAAM,IAE5B,QAAQ,CACJ,CACR,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CAAC;IAEF,MAAM,eAAe,GAAG,OAAO,CAC7B,
|
|
1
|
+
{"version":3,"file":"Tag.mjs","sourceRoot":"","sources":["../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n BoxAlignItems,\n BoxFlexDirection,\n FontWeight,\n IconSize,\n TagSeverity,\n TextVariant,\n} from '@metamask/design-system-shared';\nimport React, { forwardRef } from 'react';\n\nimport { twMerge } from '../../utils/tw-merge';\nimport { Box } from '../Box';\nimport { Icon } from '../Icon';\nimport { Text } from '../Text';\n\nimport {\n MAP_TAG_SEVERITY_BACKGROUND,\n MAP_TAG_SEVERITY_ICON_COLOR,\n MAP_TAG_SEVERITY_TEXT_COLOR,\n} from './Tag.constants';\nimport type { TagProps } from './Tag.types';\n\nconst isTextContent = (content: React.ReactNode): content is string | number =>\n typeof content === 'string' || typeof content === 'number';\n\nexport const Tag = forwardRef<HTMLDivElement, TagProps>(\n (\n {\n children,\n severity = TagSeverity.Neutral,\n startIconName,\n startIconProps,\n startAccessory,\n endIconName,\n endIconProps,\n endAccessory,\n className,\n style,\n ...props\n },\n ref,\n ) => {\n const backgroundColor = MAP_TAG_SEVERITY_BACKGROUND[severity];\n const textColor = MAP_TAG_SEVERITY_TEXT_COLOR[severity];\n const iconColor = MAP_TAG_SEVERITY_ICON_COLOR[severity];\n\n const finalStartIconName = startIconName ?? startIconProps?.name;\n const finalEndIconName = endIconName ?? endIconProps?.name;\n\n const resolvedStartAccessory = finalStartIconName ? (\n <Icon\n name={finalStartIconName}\n color={iconColor}\n size={IconSize.Xs}\n className=\"shrink-0\"\n {...startIconProps}\n />\n ) : (\n (startAccessory ?? null)\n );\n\n const resolvedEndAccessory = finalEndIconName ? (\n <Icon\n name={finalEndIconName}\n color={iconColor}\n size={IconSize.Xs}\n className=\"shrink-0\"\n {...endIconProps}\n />\n ) : (\n (endAccessory ?? null)\n );\n\n const content = isTextContent(children) ? (\n <Text\n variant={TextVariant.BodyXs}\n color={textColor}\n fontWeight={FontWeight.Medium}\n >\n {children}\n </Text>\n ) : (\n children\n );\n\n const mergedClassName = twMerge(\n 'inline-flex gap-0.5 self-start rounded-md',\n finalStartIconName ? 'pl-1' : 'pl-1.5',\n finalEndIconName ? 'pr-1' : 'pr-1.5',\n className,\n );\n\n return (\n <Box\n ref={ref}\n flexDirection={BoxFlexDirection.Row}\n alignItems={BoxAlignItems.Center}\n backgroundColor={backgroundColor}\n className={mergedClassName}\n style={style}\n {...props}\n >\n {resolvedStartAccessory}\n {content}\n {resolvedEndAccessory}\n </Box>\n );\n },\n);\n\nTag.displayName = 'Tag';\n"]}
|