@metamask-previews/design-system-react-native 0.18.0-preview.ba86146 → 0.22.0-preview.f515a62

package/dist/components/KeyValueColumn/KeyValueColumn.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"KeyValueColumn.cjs","sourceRoot":"","sources":["../../../src/components/KeyValueColumn/KeyValueColumn.tsx"],"names":[],"mappings":";;;;;;AAAA,kFAIiD;AACjD,kDAA0B;AAE1B,iDAAwD;AACxD,sDAAyC;AACzC,gDAAmC;AACnC,wDAA2C;AAIpC,MAAM,cAAc,GAAG,CAAC,EAC7B,iBAAiB,EACjB,eAAe,EACf,qBAAqB,EACrB,QAAQ,EAAE,UAAU,EACpB,YAAY,EACZ,mBAAmB,EACnB,iBAAiB,EACjB,uBAAuB,EACvB,KAAK,EAAE,YAAY,EACnB,cAAc,EACd,WAAW,EACX,GAAG,SAAS,EACQ,EAAE,EAAE;IACxB,MAAM,mBAAmB,GACvB,qBAAqB,EAAE,QAAQ,KAAK,SAAS;QAC7C,qBAAqB,CAAC,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,CACxC,CAAC,uBAAU,CACT,IAAI,CAAC,CAAC,sBAAc,CAAC,EAAE,CAAC,CACxB,SAAS,CAAC,CAAC,EAAE,KAAK,EAAE,iBAAS,CAAC,eAAe,EAAE,CAAC,CAChD,IAAI,qBAAqB,CAAC,CAC1B,QAAQ,CAAC,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EACzC,CACH,CAAC,CAAC,CAAC,CACF,eAAe,CAChB,CAAC;IAEJ,MAAM,qBAAqB,GACzB,uBAAuB,EAAE,QAAQ,KAAK,SAAS;QAC/C,uBAAuB,CAAC,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,CAC1C,CAAC,uBAAU,CACT,IAAI,CAAC,CAAC,sBAAc,CAAC,EAAE,CAAC,CACxB,SAAS,CAAC,CAAC,EAAE,KAAK,EAAE,iBAAS,CAAC,WAAW,EAAE,CAAC,CAC5C,IAAI,uBAAuB,CAAC,CAC5B,QAAQ,CAAC,CAAC,uBAAuB,CAAC,QAAQ,CAAC,EAC3C,CACH,CAAC,CAAC,CAAC,CACF,iBAAiB,CAClB,CAAC;IAEJ,MAAM,MAAM,GAAG,CACb,CAAC,eAAM,CACL,cAAc,CAAC,CAAC,iBAAiB,CAAC,CAClC,YAAY,CAAC,CAAC,mBAAmB,CAAC,CAClC,SAAS,CAAC,CAAC;YACT,OAAO,EAAE,kCAAW,CAAC,MAAM;YAC3B,UAAU,EAAE,iCAAU,CAAC,MAAM;YAC7B,KAAK,EAAE,gCAAS,CAAC,eAAe;YAChC,aAAa,EAAE,CAAC;YAChB,aAAa,EAAE,MAAM;YACrB,GAAG,YAAY;SAChB,CAAC,CACF,WAAW,CAAC,gBAAgB,CAE5B;MAAA,CAAC,UAAU,CACb;IAAA,EAAE,eAAM,CAAC,CACV,CAAC;IAEF,MAAM,QAAQ,GAAG,CACf,CAAC,eAAM,CACL,cAAc,CAAC,CAAC,mBAAmB,CAAC,CACpC,YAAY,CAAC,CAAC,qBAAqB,CAAC,CACpC,SAAS,CAAC,CAAC;YACT,OAAO,EAAE,kCAAW,CAAC,MAAM;YAC3B,UAAU,EAAE,iCAAU,CAAC,MAAM;YAC7B,KAAK,EAAE,gCAAS,CAAC,WAAW;YAC5B,aAAa,EAAE,CAAC;YAChB,aAAa,EAAE,MAAM;YACrB,GAAG,cAAc;SAClB,CAAC,CACF,WAAW,CAAC,gBAAgB,CAE5B;MAAA,CAAC,YAAY,CACf;IAAA,EAAE,eAAM,CAAC,CACV,CAAC;IAEF,OAAO,CACL,CAAC,qBAAS,CACR,eAAe,CAAC,CAAC,QAAQ,CAAC,CAC1B,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,IAAI,SAAS,CAAC,CAEd;MAAA,CAAC,MAAM,CACT;IAAA,EAAE,qBAAS,CAAC,CACb,CAAC;AACJ,CAAC,CAAC;AArFW,QAAA,cAAc,kBAqFzB;AAEF,sBAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC","sourcesContent":["import {\n  FontWeight,\n  TextColor,\n  TextVariant,\n} from '@metamask-previews/design-system-shared';\nimport React from 'react';\n\nimport { ButtonIconSize, IconColor } from '../../types';\nimport { BoxColumn } from '../BoxColumn';\nimport { BoxRow } from '../BoxRow';\nimport { ButtonIcon } from '../ButtonIcon';\n\nimport type { KeyValueColumnProps } from './KeyValueColumn.types';\n\nexport const KeyValueColumn = ({\n  keyStartAccessory,\n  keyEndAccessory,\n  keyEndButtonIconProps,\n  keyLabel: keyContent,\n  keyTextProps,\n  valueStartAccessory,\n  valueEndAccessory,\n  valueEndButtonIconProps,\n  value: valueContent,\n  valueTextProps,\n  twClassName,\n  ...viewProps\n}: KeyValueColumnProps) => {\n  const keyEndAccessoryNode =\n    keyEndButtonIconProps?.iconName !== undefined &&\n    keyEndButtonIconProps.iconName !== null ? (\n      <ButtonIcon\n        size={ButtonIconSize.Sm}\n        iconProps={{ color: IconColor.IconAlternative }}\n        {...keyEndButtonIconProps}\n        iconName={keyEndButtonIconProps.iconName}\n      />\n    ) : (\n      keyEndAccessory\n    );\n\n  const valueEndAccessoryNode =\n    valueEndButtonIconProps?.iconName !== undefined &&\n    valueEndButtonIconProps.iconName !== null ? (\n      <ButtonIcon\n        size={ButtonIconSize.Sm}\n        iconProps={{ color: IconColor.IconDefault }}\n        {...valueEndButtonIconProps}\n        iconName={valueEndButtonIconProps.iconName}\n      />\n    ) : (\n      valueEndAccessory\n    );\n\n  const keyBox = (\n    <BoxRow\n      startAccessory={keyStartAccessory}\n      endAccessory={keyEndAccessoryNode}\n      textProps={{\n        variant: TextVariant.BodyMd,\n        fontWeight: FontWeight.Medium,\n        color: TextColor.TextAlternative,\n        numberOfLines: 1,\n        ellipsizeMode: 'tail',\n        ...keyTextProps,\n      }}\n      twClassName=\"w-full min-w-0\"\n    >\n      {keyContent}\n    </BoxRow>\n  );\n\n  const valueBox = (\n    <BoxRow\n      startAccessory={valueStartAccessory}\n      endAccessory={valueEndAccessoryNode}\n      textProps={{\n        variant: TextVariant.BodyMd,\n        fontWeight: FontWeight.Medium,\n        color: TextColor.TextDefault,\n        numberOfLines: 1,\n        ellipsizeMode: 'tail',\n        ...valueTextProps,\n      }}\n      twClassName=\"w-full min-w-0\"\n    >\n      {valueContent}\n    </BoxRow>\n  );\n\n  return (\n    <BoxColumn\n      bottomAccessory={valueBox}\n      twClassName={twClassName}\n      {...viewProps}\n    >\n      {keyBox}\n    </BoxColumn>\n  );\n};\n\nKeyValueColumn.displayName = 'KeyValueColumn';\n"]}
+{"version":3,"file":"KeyValueColumn.cjs","sourceRoot":"","sources":["../../../src/components/KeyValueColumn/KeyValueColumn.tsx"],"names":[],"mappings":";;;;;;AAAA,kFAKiD;AACjD,kDAA0B;AAE1B,iDAAwC;AACxC,sDAAyC;AACzC,gDAAmC;AACnC,wDAA2C;AAIpC,MAAM,cAAc,GAAG,CAAC,EAC7B,iBAAiB,EACjB,eAAe,EACf,qBAAqB,EACrB,QAAQ,EAAE,UAAU,EACpB,YAAY,EACZ,mBAAmB,EACnB,iBAAiB,EACjB,uBAAuB,EACvB,KAAK,EAAE,YAAY,EACnB,cAAc,EACd,WAAW,EACX,GAAG,SAAS,EACQ,EAAE,EAAE;IACxB,MAAM,mBAAmB,GACvB,qBAAqB,EAAE,QAAQ,KAAK,SAAS;QAC7C,qBAAqB,CAAC,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,CACxC,CAAC,uBAAU,CACT,IAAI,CAAC,CAAC,qCAAc,CAAC,EAAE,CAAC,CACxB,SAAS,CAAC,CAAC,EAAE,KAAK,EAAE,iBAAS,CAAC,eAAe,EAAE,CAAC,CAChD,IAAI,qBAAqB,CAAC,CAC1B,QAAQ,CAAC,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EACzC,CACH,CAAC,CAAC,CAAC,CACF,eAAe,CAChB,CAAC;IAEJ,MAAM,qBAAqB,GACzB,uBAAuB,EAAE,QAAQ,KAAK,SAAS;QAC/C,uBAAuB,CAAC,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,CAC1C,CAAC,uBAAU,CACT,IAAI,CAAC,CAAC,qCAAc,CAAC,EAAE,CAAC,CACxB,SAAS,CAAC,CAAC,EAAE,KAAK,EAAE,iBAAS,CAAC,WAAW,EAAE,CAAC,CAC5C,IAAI,uBAAuB,CAAC,CAC5B,QAAQ,CAAC,CAAC,uBAAuB,CAAC,QAAQ,CAAC,EAC3C,CACH,CAAC,CAAC,CAAC,CACF,iBAAiB,CAClB,CAAC;IAEJ,MAAM,MAAM,GAAG,CACb,CAAC,eAAM,CACL,cAAc,CAAC,CAAC,iBAAiB,CAAC,CAClC,YAAY,CAAC,CAAC,mBAAmB,CAAC,CAClC,SAAS,CAAC,CAAC;YACT,OAAO,EAAE,kCAAW,CAAC,MAAM;YAC3B,UAAU,EAAE,iCAAU,CAAC,MAAM;YAC7B,KAAK,EAAE,gCAAS,CAAC,eAAe;YAChC,aAAa,EAAE,CAAC;YAChB,aAAa,EAAE,MAAM;YACrB,GAAG,YAAY;SAChB,CAAC,CACF,WAAW,CAAC,gBAAgB,CAE5B;MAAA,CAAC,UAAU,CACb;IAAA,EAAE,eAAM,CAAC,CACV,CAAC;IAEF,MAAM,QAAQ,GAAG,CACf,CAAC,eAAM,CACL,cAAc,CAAC,CAAC,mBAAmB,CAAC,CACpC,YAAY,CAAC,CAAC,qBAAqB,CAAC,CACpC,SAAS,CAAC,CAAC;YACT,OAAO,EAAE,kCAAW,CAAC,MAAM;YAC3B,UAAU,EAAE,iCAAU,CAAC,MAAM;YAC7B,KAAK,EAAE,gCAAS,CAAC,WAAW;YAC5B,aAAa,EAAE,CAAC;YAChB,aAAa,EAAE,MAAM;YACrB,GAAG,cAAc;SAClB,CAAC,CACF,WAAW,CAAC,gBAAgB,CAE5B;MAAA,CAAC,YAAY,CACf;IAAA,EAAE,eAAM,CAAC,CACV,CAAC;IAEF,OAAO,CACL,CAAC,qBAAS,CACR,eAAe,CAAC,CAAC,QAAQ,CAAC,CAC1B,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,IAAI,SAAS,CAAC,CAEd;MAAA,CAAC,MAAM,CACT;IAAA,EAAE,qBAAS,CAAC,CACb,CAAC;AACJ,CAAC,CAAC;AArFW,QAAA,cAAc,kBAqFzB;AAEF,sBAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC","sourcesContent":["import {\n  ButtonIconSize,\n  FontWeight,\n  TextColor,\n  TextVariant,\n} from '@metamask-previews/design-system-shared';\nimport React from 'react';\n\nimport { IconColor } from '../../types';\nimport { BoxColumn } from '../BoxColumn';\nimport { BoxRow } from '../BoxRow';\nimport { ButtonIcon } from '../ButtonIcon';\n\nimport type { KeyValueColumnProps } from './KeyValueColumn.types';\n\nexport const KeyValueColumn = ({\n  keyStartAccessory,\n  keyEndAccessory,\n  keyEndButtonIconProps,\n  keyLabel: keyContent,\n  keyTextProps,\n  valueStartAccessory,\n  valueEndAccessory,\n  valueEndButtonIconProps,\n  value: valueContent,\n  valueTextProps,\n  twClassName,\n  ...viewProps\n}: KeyValueColumnProps) => {\n  const keyEndAccessoryNode =\n    keyEndButtonIconProps?.iconName !== undefined &&\n    keyEndButtonIconProps.iconName !== null ? (\n      <ButtonIcon\n        size={ButtonIconSize.Sm}\n        iconProps={{ color: IconColor.IconAlternative }}\n        {...keyEndButtonIconProps}\n        iconName={keyEndButtonIconProps.iconName}\n      />\n    ) : (\n      keyEndAccessory\n    );\n\n  const valueEndAccessoryNode =\n    valueEndButtonIconProps?.iconName !== undefined &&\n    valueEndButtonIconProps.iconName !== null ? (\n      <ButtonIcon\n        size={ButtonIconSize.Sm}\n        iconProps={{ color: IconColor.IconDefault }}\n        {...valueEndButtonIconProps}\n        iconName={valueEndButtonIconProps.iconName}\n      />\n    ) : (\n      valueEndAccessory\n    );\n\n  const keyBox = (\n    <BoxRow\n      startAccessory={keyStartAccessory}\n      endAccessory={keyEndAccessoryNode}\n      textProps={{\n        variant: TextVariant.BodyMd,\n        fontWeight: FontWeight.Medium,\n        color: TextColor.TextAlternative,\n        numberOfLines: 1,\n        ellipsizeMode: 'tail',\n        ...keyTextProps,\n      }}\n      twClassName=\"w-full min-w-0\"\n    >\n      {keyContent}\n    </BoxRow>\n  );\n\n  const valueBox = (\n    <BoxRow\n      startAccessory={valueStartAccessory}\n      endAccessory={valueEndAccessoryNode}\n      textProps={{\n        variant: TextVariant.BodyMd,\n        fontWeight: FontWeight.Medium,\n        color: TextColor.TextDefault,\n        numberOfLines: 1,\n        ellipsizeMode: 'tail',\n        ...valueTextProps,\n      }}\n      twClassName=\"w-full min-w-0\"\n    >\n      {valueContent}\n    </BoxRow>\n  );\n\n  return (\n    <BoxColumn\n      bottomAccessory={valueBox}\n      twClassName={twClassName}\n      {...viewProps}\n    >\n      {keyBox}\n    </BoxColumn>\n  );\n};\n\nKeyValueColumn.displayName = 'KeyValueColumn';\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"KeyValueColumn.d.cts","sourceRoot":"","sources":["../../../src/components/KeyValueColumn/KeyValueColumn.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,mCAA+B;AAElE,eAAO,MAAM,cAAc;yOAaxB,mBAAmB;;CAwErB,CAAC"}
+{"version":3,"file":"KeyValueColumn.d.cts","sourceRoot":"","sources":["../../../src/components/KeyValueColumn/KeyValueColumn.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,mCAA+B;AAElE,eAAO,MAAM,cAAc;yOAaxB,mBAAmB;;CAwErB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"KeyValueColumn.d.mts","sourceRoot":"","sources":["../../../src/components/KeyValueColumn/KeyValueColumn.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,mCAA+B;AAElE,eAAO,MAAM,cAAc;yOAaxB,mBAAmB;;CAwErB,CAAC"}
+{"version":3,"file":"KeyValueColumn.d.mts","sourceRoot":"","sources":["../../../src/components/KeyValueColumn/KeyValueColumn.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,mCAA+B;AAElE,eAAO,MAAM,cAAc;yOAaxB,mBAAmB;;CAwErB,CAAC"}

package/dist/components/KeyValueColumn/KeyValueColumn.mjs

@@ -4,10 +4,10 @@ function $importDefault(module) {
     }
     return module;
 }
-import { FontWeight, TextColor, TextVariant } from "@metamask-previews/design-system-shared";
+import { ButtonIconSize, FontWeight, TextColor, TextVariant } from "@metamask-previews/design-system-shared";
 import $React from "react";
 const React = $importDefault($React);
-import { ButtonIconSize, IconColor } from "../../types/index.mjs";
+import { IconColor } from "../../types/index.mjs";
 import { BoxColumn } from "../BoxColumn/index.mjs";
 import { BoxRow } from "../BoxRow/index.mjs";
 import { ButtonIcon } from "../ButtonIcon/index.mjs";

package/dist/components/KeyValueColumn/KeyValueColumn.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"KeyValueColumn.mjs","sourceRoot":"","sources":["../../../src/components/KeyValueColumn/KeyValueColumn.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FontWeight,\n  TextColor,\n  TextVariant,\n} from '@metamask-previews/design-system-shared';\nimport React from 'react';\n\nimport { ButtonIconSize, IconColor } from '../../types';\nimport { BoxColumn } from '../BoxColumn';\nimport { BoxRow } from '../BoxRow';\nimport { ButtonIcon } from '../ButtonIcon';\n\nimport type { KeyValueColumnProps } from './KeyValueColumn.types';\n\nexport const KeyValueColumn = ({\n  keyStartAccessory,\n  keyEndAccessory,\n  keyEndButtonIconProps,\n  keyLabel: keyContent,\n  keyTextProps,\n  valueStartAccessory,\n  valueEndAccessory,\n  valueEndButtonIconProps,\n  value: valueContent,\n  valueTextProps,\n  twClassName,\n  ...viewProps\n}: KeyValueColumnProps) => {\n  const keyEndAccessoryNode =\n    keyEndButtonIconProps?.iconName !== undefined &&\n    keyEndButtonIconProps.iconName !== null ? (\n      <ButtonIcon\n        size={ButtonIconSize.Sm}\n        iconProps={{ color: IconColor.IconAlternative }}\n        {...keyEndButtonIconProps}\n        iconName={keyEndButtonIconProps.iconName}\n      />\n    ) : (\n      keyEndAccessory\n    );\n\n  const valueEndAccessoryNode =\n    valueEndButtonIconProps?.iconName !== undefined &&\n    valueEndButtonIconProps.iconName !== null ? (\n      <ButtonIcon\n        size={ButtonIconSize.Sm}\n        iconProps={{ color: IconColor.IconDefault }}\n        {...valueEndButtonIconProps}\n        iconName={valueEndButtonIconProps.iconName}\n      />\n    ) : (\n      valueEndAccessory\n    );\n\n  const keyBox = (\n    <BoxRow\n      startAccessory={keyStartAccessory}\n      endAccessory={keyEndAccessoryNode}\n      textProps={{\n        variant: TextVariant.BodyMd,\n        fontWeight: FontWeight.Medium,\n        color: TextColor.TextAlternative,\n        numberOfLines: 1,\n        ellipsizeMode: 'tail',\n        ...keyTextProps,\n      }}\n      twClassName=\"w-full min-w-0\"\n    >\n      {keyContent}\n    </BoxRow>\n  );\n\n  const valueBox = (\n    <BoxRow\n      startAccessory={valueStartAccessory}\n      endAccessory={valueEndAccessoryNode}\n      textProps={{\n        variant: TextVariant.BodyMd,\n        fontWeight: FontWeight.Medium,\n        color: TextColor.TextDefault,\n        numberOfLines: 1,\n        ellipsizeMode: 'tail',\n        ...valueTextProps,\n      }}\n      twClassName=\"w-full min-w-0\"\n    >\n      {valueContent}\n    </BoxRow>\n  );\n\n  return (\n    <BoxColumn\n      bottomAccessory={valueBox}\n      twClassName={twClassName}\n      {...viewProps}\n    >\n      {keyBox}\n    </BoxColumn>\n  );\n};\n\nKeyValueColumn.displayName = 'KeyValueColumn';\n"]}
+{"version":3,"file":"KeyValueColumn.mjs","sourceRoot":"","sources":["../../../src/components/KeyValueColumn/KeyValueColumn.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,cAAc,EACd,UAAU,EACV,SAAS,EACT,WAAW,EACZ,gDAAgD;AACjD,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,SAAS,EAAE,8BAAoB;AACxC,OAAO,EAAE,SAAS,EAAE,+BAAqB;AACzC,OAAO,EAAE,MAAM,EAAE,4BAAkB;AACnC,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAI3C,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,iBAAiB,EACjB,eAAe,EACf,qBAAqB,EACrB,QAAQ,EAAE,UAAU,EACpB,YAAY,EACZ,mBAAmB,EACnB,iBAAiB,EACjB,uBAAuB,EACvB,KAAK,EAAE,YAAY,EACnB,cAAc,EACd,WAAW,EACX,GAAG,SAAS,EACQ,EAAE,EAAE;IACxB,MAAM,mBAAmB,GACvB,qBAAqB,EAAE,QAAQ,KAAK,SAAS;QAC7C,qBAAqB,CAAC,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,CACxC,CAAC,UAAU,CACT,IAAI,CAAC,CAAC,cAAc,CAAC,EAAE,CAAC,CACxB,SAAS,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,eAAe,EAAE,CAAC,CAChD,IAAI,qBAAqB,CAAC,CAC1B,QAAQ,CAAC,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EACzC,CACH,CAAC,CAAC,CAAC,CACF,eAAe,CAChB,CAAC;IAEJ,MAAM,qBAAqB,GACzB,uBAAuB,EAAE,QAAQ,KAAK,SAAS;QAC/C,uBAAuB,CAAC,QAAQ,KAAK,IAAI,CAAC,CAAC,CAAC,CAC1C,CAAC,UAAU,CACT,IAAI,CAAC,CAAC,cAAc,CAAC,EAAE,CAAC,CACxB,SAAS,CAAC,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,WAAW,EAAE,CAAC,CAC5C,IAAI,uBAAuB,CAAC,CAC5B,QAAQ,CAAC,CAAC,uBAAuB,CAAC,QAAQ,CAAC,EAC3C,CACH,CAAC,CAAC,CAAC,CACF,iBAAiB,CAClB,CAAC;IAEJ,MAAM,MAAM,GAAG,CACb,CAAC,MAAM,CACL,cAAc,CAAC,CAAC,iBAAiB,CAAC,CAClC,YAAY,CAAC,CAAC,mBAAmB,CAAC,CAClC,SAAS,CAAC,CAAC;YACT,OAAO,EAAE,WAAW,CAAC,MAAM;YAC3B,UAAU,EAAE,UAAU,CAAC,MAAM;YAC7B,KAAK,EAAE,SAAS,CAAC,eAAe;YAChC,aAAa,EAAE,CAAC;YAChB,aAAa,EAAE,MAAM;YACrB,GAAG,YAAY;SAChB,CAAC,CACF,WAAW,CAAC,gBAAgB,CAE5B;MAAA,CAAC,UAAU,CACb;IAAA,EAAE,MAAM,CAAC,CACV,CAAC;IAEF,MAAM,QAAQ,GAAG,CACf,CAAC,MAAM,CACL,cAAc,CAAC,CAAC,mBAAmB,CAAC,CACpC,YAAY,CAAC,CAAC,qBAAqB,CAAC,CACpC,SAAS,CAAC,CAAC;YACT,OAAO,EAAE,WAAW,CAAC,MAAM;YAC3B,UAAU,EAAE,UAAU,CAAC,MAAM;YAC7B,KAAK,EAAE,SAAS,CAAC,WAAW;YAC5B,aAAa,EAAE,CAAC;YAChB,aAAa,EAAE,MAAM;YACrB,GAAG,cAAc;SAClB,CAAC,CACF,WAAW,CAAC,gBAAgB,CAE5B;MAAA,CAAC,YAAY,CACf;IAAA,EAAE,MAAM,CAAC,CACV,CAAC;IAEF,OAAO,CACL,CAAC,SAAS,CACR,eAAe,CAAC,CAAC,QAAQ,CAAC,CAC1B,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,IAAI,SAAS,CAAC,CAEd;MAAA,CAAC,MAAM,CACT;IAAA,EAAE,SAAS,CAAC,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC","sourcesContent":["import {\n  ButtonIconSize,\n  FontWeight,\n  TextColor,\n  TextVariant,\n} from '@metamask-previews/design-system-shared';\nimport React from 'react';\n\nimport { IconColor } from '../../types';\nimport { BoxColumn } from '../BoxColumn';\nimport { BoxRow } from '../BoxRow';\nimport { ButtonIcon } from '../ButtonIcon';\n\nimport type { KeyValueColumnProps } from './KeyValueColumn.types';\n\nexport const KeyValueColumn = ({\n  keyStartAccessory,\n  keyEndAccessory,\n  keyEndButtonIconProps,\n  keyLabel: keyContent,\n  keyTextProps,\n  valueStartAccessory,\n  valueEndAccessory,\n  valueEndButtonIconProps,\n  value: valueContent,\n  valueTextProps,\n  twClassName,\n  ...viewProps\n}: KeyValueColumnProps) => {\n  const keyEndAccessoryNode =\n    keyEndButtonIconProps?.iconName !== undefined &&\n    keyEndButtonIconProps.iconName !== null ? (\n      <ButtonIcon\n        size={ButtonIconSize.Sm}\n        iconProps={{ color: IconColor.IconAlternative }}\n        {...keyEndButtonIconProps}\n        iconName={keyEndButtonIconProps.iconName}\n      />\n    ) : (\n      keyEndAccessory\n    );\n\n  const valueEndAccessoryNode =\n    valueEndButtonIconProps?.iconName !== undefined &&\n    valueEndButtonIconProps.iconName !== null ? (\n      <ButtonIcon\n        size={ButtonIconSize.Sm}\n        iconProps={{ color: IconColor.IconDefault }}\n        {...valueEndButtonIconProps}\n        iconName={valueEndButtonIconProps.iconName}\n      />\n    ) : (\n      valueEndAccessory\n    );\n\n  const keyBox = (\n    <BoxRow\n      startAccessory={keyStartAccessory}\n      endAccessory={keyEndAccessoryNode}\n      textProps={{\n        variant: TextVariant.BodyMd,\n        fontWeight: FontWeight.Medium,\n        color: TextColor.TextAlternative,\n        numberOfLines: 1,\n        ellipsizeMode: 'tail',\n        ...keyTextProps,\n      }}\n      twClassName=\"w-full min-w-0\"\n    >\n      {keyContent}\n    </BoxRow>\n  );\n\n  const valueBox = (\n    <BoxRow\n      startAccessory={valueStartAccessory}\n      endAccessory={valueEndAccessoryNode}\n      textProps={{\n        variant: TextVariant.BodyMd,\n        fontWeight: FontWeight.Medium,\n        color: TextColor.TextDefault,\n        numberOfLines: 1,\n        ellipsizeMode: 'tail',\n        ...valueTextProps,\n      }}\n      twClassName=\"w-full min-w-0\"\n    >\n      {valueContent}\n    </BoxRow>\n  );\n\n  return (\n    <BoxColumn\n      bottomAccessory={valueBox}\n      twClassName={twClassName}\n      {...viewProps}\n    >\n      {keyBox}\n    </BoxColumn>\n  );\n};\n\nKeyValueColumn.displayName = 'KeyValueColumn';\n"]}

package/dist/components/KeyValueRow/KeyValueRow.cjs

@@ -14,12 +14,12 @@ const ButtonIcon_1 = require("../ButtonIcon/index.cjs");
 const KeyValueRow = ({ keyStartAccessory, keyEndAccessory, keyEndButtonIconProps, keyLabel: keyContent, keyTextProps, valueStartAccessory, valueEndAccessory, valueEndButtonIconProps, value: valueContent, valueTextProps, variant = design_system_shared_1.KeyValueRowVariant.Summary, twClassName, style, ...viewProps }) => {
     const tw = (0, design_system_twrnc_preset_1.useTailwind)();
     const keyEndAccessoryNode = keyEndButtonIconProps?.iconName !== undefined &&
-        keyEndButtonIconProps.iconName !== null ? (<ButtonIcon_1.ButtonIcon size={types_1.ButtonIconSize.Sm} {...keyEndButtonIconProps} iconName={keyEndButtonIconProps.iconName} iconProps={{
+        keyEndButtonIconProps.iconName !== null ? (<ButtonIcon_1.ButtonIcon size={design_system_shared_1.ButtonIconSize.Sm} {...keyEndButtonIconProps} iconName={keyEndButtonIconProps.iconName} iconProps={{
             color: types_1.IconColor.IconAlternative,
             ...keyEndButtonIconProps.iconProps,
         }}/>) : (keyEndAccessory);
     const valueEndAccessoryNode = valueEndButtonIconProps?.iconName !== undefined &&
-        valueEndButtonIconProps.iconName !== null ? (<ButtonIcon_1.ButtonIcon size={types_1.ButtonIconSize.Sm} {...valueEndButtonIconProps} iconName={valueEndButtonIconProps.iconName} iconProps={{
+        valueEndButtonIconProps.iconName !== null ? (<ButtonIcon_1.ButtonIcon size={design_system_shared_1.ButtonIconSize.Sm} {...valueEndButtonIconProps} iconName={valueEndButtonIconProps.iconName} iconProps={{
             color: types_1.IconColor.IconDefault,
             ...valueEndButtonIconProps.iconProps,
         }}/>) : (valueEndAccessory);

package/dist/components/KeyValueRow/KeyValueRow.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"KeyValueRow.cjs","sourceRoot":"","sources":["../../../src/components/KeyValueRow/KeyValueRow.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FontWeight,\n  KeyValueRowVariant,\n  TextColor,\n  TextVariant,\n} from '@metamask-previews/design-system-shared';\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\n\nimport { ButtonIconSize, IconColor } from '../../types';\nimport { Box } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { ButtonIcon } from '../ButtonIcon';\n\nimport type { KeyValueRowProps } from './KeyValueRow.types';\n\nexport const KeyValueRow = ({\n  keyStartAccessory,\n  keyEndAccessory,\n  keyEndButtonIconProps,\n  keyLabel: keyContent,\n  keyTextProps,\n  valueStartAccessory,\n  valueEndAccessory,\n  valueEndButtonIconProps,\n  value: valueContent,\n  valueTextProps,\n  variant = KeyValueRowVariant.Summary,\n  twClassName,\n  style,\n  ...viewProps\n}: KeyValueRowProps) => {\n  const tw = useTailwind();\n\n  const keyEndAccessoryNode =\n    keyEndButtonIconProps?.iconName !== undefined &&\n    keyEndButtonIconProps.iconName !== null ? (\n      <ButtonIcon\n        size={ButtonIconSize.Sm}\n        {...keyEndButtonIconProps}\n        iconName={keyEndButtonIconProps.iconName}\n        iconProps={{\n          color: IconColor.IconAlternative,\n          ...keyEndButtonIconProps.iconProps,\n        }}\n      />\n    ) : (\n      keyEndAccessory\n    );\n\n  const valueEndAccessoryNode =\n    valueEndButtonIconProps?.iconName !== undefined &&\n    valueEndButtonIconProps.iconName !== null ? (\n      <ButtonIcon\n        size={ButtonIconSize.Sm}\n        {...valueEndButtonIconProps}\n        iconName={valueEndButtonIconProps.iconName}\n        iconProps={{\n          color: IconColor.IconDefault,\n          ...valueEndButtonIconProps.iconProps,\n        }}\n      />\n    ) : (\n      valueEndAccessory\n    );\n\n  const keyBox = (\n    <BoxRow\n      startAccessory={keyStartAccessory}\n      endAccessory={keyEndAccessoryNode}\n      textProps={{\n        variant: TextVariant.BodyMd,\n        fontWeight: FontWeight.Medium,\n        color: TextColor.TextAlternative,\n        numberOfLines: 1,\n        ellipsizeMode: 'tail',\n        ...keyTextProps,\n      }}\n    >\n      {keyContent}\n    </BoxRow>\n  );\n\n  const valueBox = (\n    <BoxRow\n      startAccessory={valueStartAccessory}\n      endAccessory={valueEndAccessoryNode}\n      textProps={{\n        variant: TextVariant.BodyMd,\n        fontWeight: FontWeight.Medium,\n        color: TextColor.TextDefault,\n        numberOfLines: 1,\n        ellipsizeMode: 'tail',\n        ...valueTextProps,\n      }}\n      twClassName=\"flex-1 min-w-0 justify-end\"\n    >\n      {valueContent}\n    </BoxRow>\n  );\n\n  return (\n    <BoxRow\n      endAccessory={valueBox}\n      gap={4}\n      style={[\n        tw.style(\n          variant === KeyValueRowVariant.Input ? 'h-12' : 'h-10',\n          twClassName,\n        ),\n        style,\n      ]}\n      {...viewProps}\n    >\n      <Box twClassName=\"shrink-0\">{keyBox}</Box>\n    </BoxRow>\n  );\n};\n\nKeyValueRow.displayName = 'KeyValueRow';\n"]}
+{"version":3,"file":"KeyValueRow.cjs","sourceRoot":"","sources":["../../../src/components/KeyValueRow/KeyValueRow.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ButtonIconSize,\n  FontWeight,\n  KeyValueRowVariant,\n  TextColor,\n  TextVariant,\n} from '@metamask-previews/design-system-shared';\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\n\nimport { IconColor } from '../../types';\nimport { Box } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { ButtonIcon } from '../ButtonIcon';\n\nimport type { KeyValueRowProps } from './KeyValueRow.types';\n\nexport const KeyValueRow = ({\n  keyStartAccessory,\n  keyEndAccessory,\n  keyEndButtonIconProps,\n  keyLabel: keyContent,\n  keyTextProps,\n  valueStartAccessory,\n  valueEndAccessory,\n  valueEndButtonIconProps,\n  value: valueContent,\n  valueTextProps,\n  variant = KeyValueRowVariant.Summary,\n  twClassName,\n  style,\n  ...viewProps\n}: KeyValueRowProps) => {\n  const tw = useTailwind();\n\n  const keyEndAccessoryNode =\n    keyEndButtonIconProps?.iconName !== undefined &&\n    keyEndButtonIconProps.iconName !== null ? (\n      <ButtonIcon\n        size={ButtonIconSize.Sm}\n        {...keyEndButtonIconProps}\n        iconName={keyEndButtonIconProps.iconName}\n        iconProps={{\n          color: IconColor.IconAlternative,\n          ...keyEndButtonIconProps.iconProps,\n        }}\n      />\n    ) : (\n      keyEndAccessory\n    );\n\n  const valueEndAccessoryNode =\n    valueEndButtonIconProps?.iconName !== undefined &&\n    valueEndButtonIconProps.iconName !== null ? (\n      <ButtonIcon\n        size={ButtonIconSize.Sm}\n        {...valueEndButtonIconProps}\n        iconName={valueEndButtonIconProps.iconName}\n        iconProps={{\n          color: IconColor.IconDefault,\n          ...valueEndButtonIconProps.iconProps,\n        }}\n      />\n    ) : (\n      valueEndAccessory\n    );\n\n  const keyBox = (\n    <BoxRow\n      startAccessory={keyStartAccessory}\n      endAccessory={keyEndAccessoryNode}\n      textProps={{\n        variant: TextVariant.BodyMd,\n        fontWeight: FontWeight.Medium,\n        color: TextColor.TextAlternative,\n        numberOfLines: 1,\n        ellipsizeMode: 'tail',\n        ...keyTextProps,\n      }}\n    >\n      {keyContent}\n    </BoxRow>\n  );\n\n  const valueBox = (\n    <BoxRow\n      startAccessory={valueStartAccessory}\n      endAccessory={valueEndAccessoryNode}\n      textProps={{\n        variant: TextVariant.BodyMd,\n        fontWeight: FontWeight.Medium,\n        color: TextColor.TextDefault,\n        numberOfLines: 1,\n        ellipsizeMode: 'tail',\n        ...valueTextProps,\n      }}\n      twClassName=\"flex-1 min-w-0 justify-end\"\n    >\n      {valueContent}\n    </BoxRow>\n  );\n\n  return (\n    <BoxRow\n      endAccessory={valueBox}\n      gap={4}\n      style={[\n        tw.style(\n          variant === KeyValueRowVariant.Input ? 'h-12' : 'h-10',\n          twClassName,\n        ),\n        style,\n      ]}\n      {...viewProps}\n    >\n      <Box twClassName=\"shrink-0\">{keyBox}</Box>\n    </BoxRow>\n  );\n};\n\nKeyValueRow.displayName = 'KeyValueRow';\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"KeyValueRow.d.cts","sourceRoot":"","sources":["../../../src/components/KeyValueRow/KeyValueRow.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW;yPAerB,gBAAgB;;CAsFlB,CAAC"}
+{"version":3,"file":"KeyValueRow.d.cts","sourceRoot":"","sources":["../../../src/components/KeyValueRow/KeyValueRow.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW;yPAerB,gBAAgB;;CAsFlB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"KeyValueRow.d.mts","sourceRoot":"","sources":["../../../src/components/KeyValueRow/KeyValueRow.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW;yPAerB,gBAAgB;;CAsFlB,CAAC"}
+{"version":3,"file":"KeyValueRow.d.mts","sourceRoot":"","sources":["../../../src/components/KeyValueRow/KeyValueRow.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW;yPAerB,gBAAgB;;CAsFlB,CAAC"}

package/dist/components/KeyValueRow/KeyValueRow.mjs

@@ -4,11 +4,11 @@ function $importDefault(module) {
     }
     return module;
 }
-import { FontWeight, KeyValueRowVariant, TextColor, TextVariant } from "@metamask-previews/design-system-shared";
+import { ButtonIconSize, FontWeight, KeyValueRowVariant, TextColor, TextVariant } from "@metamask-previews/design-system-shared";
 import { useTailwind } from "@metamask-previews/design-system-twrnc-preset";
 import $React from "react";
 const React = $importDefault($React);
-import { ButtonIconSize, IconColor } from "../../types/index.mjs";
+import { IconColor } from "../../types/index.mjs";
 import { Box } from "../Box/index.mjs";
 import { BoxRow } from "../BoxRow/index.mjs";
 import { ButtonIcon } from "../ButtonIcon/index.mjs";

package/dist/components/KeyValueRow/KeyValueRow.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"KeyValueRow.mjs","sourceRoot":"","sources":["../../../src/components/KeyValueRow/KeyValueRow.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FontWeight,\n  KeyValueRowVariant,\n  TextColor,\n  TextVariant,\n} from '@metamask-previews/design-system-shared';\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\n\nimport { ButtonIconSize, IconColor } from '../../types';\nimport { Box } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { ButtonIcon } from '../ButtonIcon';\n\nimport type { KeyValueRowProps } from './KeyValueRow.types';\n\nexport const KeyValueRow = ({\n  keyStartAccessory,\n  keyEndAccessory,\n  keyEndButtonIconProps,\n  keyLabel: keyContent,\n  keyTextProps,\n  valueStartAccessory,\n  valueEndAccessory,\n  valueEndButtonIconProps,\n  value: valueContent,\n  valueTextProps,\n  variant = KeyValueRowVariant.Summary,\n  twClassName,\n  style,\n  ...viewProps\n}: KeyValueRowProps) => {\n  const tw = useTailwind();\n\n  const keyEndAccessoryNode =\n    keyEndButtonIconProps?.iconName !== undefined &&\n    keyEndButtonIconProps.iconName !== null ? (\n      <ButtonIcon\n        size={ButtonIconSize.Sm}\n        {...keyEndButtonIconProps}\n        iconName={keyEndButtonIconProps.iconName}\n        iconProps={{\n          color: IconColor.IconAlternative,\n          ...keyEndButtonIconProps.iconProps,\n        }}\n      />\n    ) : (\n      keyEndAccessory\n    );\n\n  const valueEndAccessoryNode =\n    valueEndButtonIconProps?.iconName !== undefined &&\n    valueEndButtonIconProps.iconName !== null ? (\n      <ButtonIcon\n        size={ButtonIconSize.Sm}\n        {...valueEndButtonIconProps}\n        iconName={valueEndButtonIconProps.iconName}\n        iconProps={{\n          color: IconColor.IconDefault,\n          ...valueEndButtonIconProps.iconProps,\n        }}\n      />\n    ) : (\n      valueEndAccessory\n    );\n\n  const keyBox = (\n    <BoxRow\n      startAccessory={keyStartAccessory}\n      endAccessory={keyEndAccessoryNode}\n      textProps={{\n        variant: TextVariant.BodyMd,\n        fontWeight: FontWeight.Medium,\n        color: TextColor.TextAlternative,\n        numberOfLines: 1,\n        ellipsizeMode: 'tail',\n        ...keyTextProps,\n      }}\n    >\n      {keyContent}\n    </BoxRow>\n  );\n\n  const valueBox = (\n    <BoxRow\n      startAccessory={valueStartAccessory}\n      endAccessory={valueEndAccessoryNode}\n      textProps={{\n        variant: TextVariant.BodyMd,\n        fontWeight: FontWeight.Medium,\n        color: TextColor.TextDefault,\n        numberOfLines: 1,\n        ellipsizeMode: 'tail',\n        ...valueTextProps,\n      }}\n      twClassName=\"flex-1 min-w-0 justify-end\"\n    >\n      {valueContent}\n    </BoxRow>\n  );\n\n  return (\n    <BoxRow\n      endAccessory={valueBox}\n      gap={4}\n      style={[\n        tw.style(\n          variant === KeyValueRowVariant.Input ? 'h-12' : 'h-10',\n          twClassName,\n        ),\n        style,\n      ]}\n      {...viewProps}\n    >\n      <Box twClassName=\"shrink-0\">{keyBox}</Box>\n    </BoxRow>\n  );\n};\n\nKeyValueRow.displayName = 'KeyValueRow';\n"]}
+{"version":3,"file":"KeyValueRow.mjs","sourceRoot":"","sources":["../../../src/components/KeyValueRow/KeyValueRow.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ButtonIconSize,\n  FontWeight,\n  KeyValueRowVariant,\n  TextColor,\n  TextVariant,\n} from '@metamask-previews/design-system-shared';\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\n\nimport { IconColor } from '../../types';\nimport { Box } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { ButtonIcon } from '../ButtonIcon';\n\nimport type { KeyValueRowProps } from './KeyValueRow.types';\n\nexport const KeyValueRow = ({\n  keyStartAccessory,\n  keyEndAccessory,\n  keyEndButtonIconProps,\n  keyLabel: keyContent,\n  keyTextProps,\n  valueStartAccessory,\n  valueEndAccessory,\n  valueEndButtonIconProps,\n  value: valueContent,\n  valueTextProps,\n  variant = KeyValueRowVariant.Summary,\n  twClassName,\n  style,\n  ...viewProps\n}: KeyValueRowProps) => {\n  const tw = useTailwind();\n\n  const keyEndAccessoryNode =\n    keyEndButtonIconProps?.iconName !== undefined &&\n    keyEndButtonIconProps.iconName !== null ? (\n      <ButtonIcon\n        size={ButtonIconSize.Sm}\n        {...keyEndButtonIconProps}\n        iconName={keyEndButtonIconProps.iconName}\n        iconProps={{\n          color: IconColor.IconAlternative,\n          ...keyEndButtonIconProps.iconProps,\n        }}\n      />\n    ) : (\n      keyEndAccessory\n    );\n\n  const valueEndAccessoryNode =\n    valueEndButtonIconProps?.iconName !== undefined &&\n    valueEndButtonIconProps.iconName !== null ? (\n      <ButtonIcon\n        size={ButtonIconSize.Sm}\n        {...valueEndButtonIconProps}\n        iconName={valueEndButtonIconProps.iconName}\n        iconProps={{\n          color: IconColor.IconDefault,\n          ...valueEndButtonIconProps.iconProps,\n        }}\n      />\n    ) : (\n      valueEndAccessory\n    );\n\n  const keyBox = (\n    <BoxRow\n      startAccessory={keyStartAccessory}\n      endAccessory={keyEndAccessoryNode}\n      textProps={{\n        variant: TextVariant.BodyMd,\n        fontWeight: FontWeight.Medium,\n        color: TextColor.TextAlternative,\n        numberOfLines: 1,\n        ellipsizeMode: 'tail',\n        ...keyTextProps,\n      }}\n    >\n      {keyContent}\n    </BoxRow>\n  );\n\n  const valueBox = (\n    <BoxRow\n      startAccessory={valueStartAccessory}\n      endAccessory={valueEndAccessoryNode}\n      textProps={{\n        variant: TextVariant.BodyMd,\n        fontWeight: FontWeight.Medium,\n        color: TextColor.TextDefault,\n        numberOfLines: 1,\n        ellipsizeMode: 'tail',\n        ...valueTextProps,\n      }}\n      twClassName=\"flex-1 min-w-0 justify-end\"\n    >\n      {valueContent}\n    </BoxRow>\n  );\n\n  return (\n    <BoxRow\n      endAccessory={valueBox}\n      gap={4}\n      style={[\n        tw.style(\n          variant === KeyValueRowVariant.Input ? 'h-12' : 'h-10',\n          twClassName,\n        ),\n        style,\n      ]}\n      {...viewProps}\n    >\n      <Box twClassName=\"shrink-0\">{keyBox}</Box>\n    </BoxRow>\n  );\n};\n\nKeyValueRow.displayName = 'KeyValueRow';\n"]}

package/dist/components/TabEmptyState/TabEmptyState.cjs

@@ -13,7 +13,7 @@ const TabEmptyState = ({ icon, description, descriptionProps, actionButtonText,
     {description && (<Text_1.Text variant={Text_1.TextVariant.BodyMd} color={Text_1.TextColor.TextAlternative} twClassName="text-center" {...descriptionProps}>
         {description}
       </Text_1.Text>)}
-    {actionButtonText && onAction && (<Button_1.Button variant={Button_1.ButtonVariant.Secondary} onPress={onAction} {...actionButtonProps}>
+    {actionButtonText && onAction && (<Button_1.Button variant={Button_1.ButtonVariant.Secondary} onPress={onAction} twClassName="self-center" {...actionButtonProps}>
         {actionButtonText}
       </Button_1.Button>)}
     {children}

package/dist/components/TabEmptyState/TabEmptyState.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabEmptyState.cjs","sourceRoot":"","sources":["../../../src/components/TabEmptyState/TabEmptyState.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,0CAMgB;AAChB,gDAAkD;AAClD,4CAAuD;AAIhD,MAAM,aAAa,GAAG,CAAC,EAC5B,IAAI,EACJ,WAAW,EACX,gBAAgB,EAChB,gBAAgB,EAChB,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,WAAW,GAAG,EAAE,EAChB,GAAG,KAAK,EACW,EAAE,EAAE,CAAC,CACxB,CAAC,SAAG,CACF,aAAa,CAAC,CAAC,sBAAgB,CAAC,MAAM,CAAC,CACvC,UAAU,CAAC,CAAC,mBAAa,CAAC,MAAM,CAAC,CACjC,cAAc,CAAC,CAAC,uBAAiB,CAAC,MAAM,CAAC,CACzC,eAAe,CAAC,CAAC,wBAAkB,CAAC,iBAAiB,CAAC,CACtD,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,WAAW,CAAC,CAAC,YAAY,WAAW,EAAE,CAAC,CACvC,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,IAAI,KAAK,CAAC,CAEV;IAAA,CAAC,IAAI,CACL;IAAA,CAAC,WAAW,IAAI,CACd,CAAC,WAAI,CACH,OAAO,CAAC,CAAC,kBAAW,CAAC,MAAM,CAAC,CAC5B,KAAK,CAAC,CAAC,gBAAS,CAAC,eAAe,CAAC,CACjC,WAAW,CAAC,aAAa,CACzB,IAAI,gBAAgB,CAAC,CAErB;QAAA,CAAC,WAAW,CACd;MAAA,EAAE,WAAI,CAAC,CACR,CACD;IAAA,CAAC,gBAAgB,IAAI,QAAQ,IAAI,CAC/B,CAAC,eAAM,CACL,OAAO,CAAC,CAAC,sBAAa,CAAC,SAAS,CAAC,CACjC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAClB,IAAI,iBAAiB,CAAC,CAEtB;QAAA,CAAC,gBAAgB,CACnB;MAAA,EAAE,eAAM,CAAC,CACV,CACD;IAAA,CAAC,QAAQ,CACX;EAAA,EAAE,SAAG,CAAC,CACP,CAAC;AA5CW,QAAA,aAAa,iBA4CxB","sourcesContent":["import React from 'react';\n\nimport {\n  Box,\n  BoxFlexDirection,\n  BoxAlignItems,\n  BoxJustifyContent,\n  BoxBackgroundColor,\n} from '../Box';\nimport { Button, ButtonVariant } from '../Button';\nimport { Text, TextVariant, TextColor } from '../Text';\n\nimport type { TabEmptyStateProps } from './TabEmptyState.types';\n\nexport const TabEmptyState = ({\n  icon,\n  description,\n  descriptionProps,\n  actionButtonText,\n  actionButtonProps,\n  onAction,\n  children,\n  style,\n  twClassName = '',\n  ...props\n}: TabEmptyStateProps) => (\n  <Box\n    flexDirection={BoxFlexDirection.Column}\n    alignItems={BoxAlignItems.Center}\n    justifyContent={BoxJustifyContent.Center}\n    backgroundColor={BoxBackgroundColor.BackgroundDefault}\n    gap={3}\n    twClassName={`max-w-64 ${twClassName}`}\n    style={style}\n    {...props}\n  >\n    {icon}\n    {description && (\n      <Text\n        variant={TextVariant.BodyMd}\n        color={TextColor.TextAlternative}\n        twClassName=\"text-center\"\n        {...descriptionProps}\n      >\n        {description}\n      </Text>\n    )}\n    {actionButtonText && onAction && (\n      <Button\n        variant={ButtonVariant.Secondary}\n        onPress={onAction}\n        {...actionButtonProps}\n      >\n        {actionButtonText}\n      </Button>\n    )}\n    {children}\n  </Box>\n);\n"]}
+{"version":3,"file":"TabEmptyState.cjs","sourceRoot":"","sources":["../../../src/components/TabEmptyState/TabEmptyState.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,0CAMgB;AAChB,gDAAkD;AAClD,4CAAuD;AAIhD,MAAM,aAAa,GAAG,CAAC,EAC5B,IAAI,EACJ,WAAW,EACX,gBAAgB,EAChB,gBAAgB,EAChB,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,WAAW,GAAG,EAAE,EAChB,GAAG,KAAK,EACW,EAAE,EAAE,CAAC,CACxB,CAAC,SAAG,CACF,aAAa,CAAC,CAAC,sBAAgB,CAAC,MAAM,CAAC,CACvC,UAAU,CAAC,CAAC,mBAAa,CAAC,MAAM,CAAC,CACjC,cAAc,CAAC,CAAC,uBAAiB,CAAC,MAAM,CAAC,CACzC,eAAe,CAAC,CAAC,wBAAkB,CAAC,iBAAiB,CAAC,CACtD,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,WAAW,CAAC,CAAC,YAAY,WAAW,EAAE,CAAC,CACvC,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,IAAI,KAAK,CAAC,CAEV;IAAA,CAAC,IAAI,CACL;IAAA,CAAC,WAAW,IAAI,CACd,CAAC,WAAI,CACH,OAAO,CAAC,CAAC,kBAAW,CAAC,MAAM,CAAC,CAC5B,KAAK,CAAC,CAAC,gBAAS,CAAC,eAAe,CAAC,CACjC,WAAW,CAAC,aAAa,CACzB,IAAI,gBAAgB,CAAC,CAErB;QAAA,CAAC,WAAW,CACd;MAAA,EAAE,WAAI,CAAC,CACR,CACD;IAAA,CAAC,gBAAgB,IAAI,QAAQ,IAAI,CAC/B,CAAC,eAAM,CACL,OAAO,CAAC,CAAC,sBAAa,CAAC,SAAS,CAAC,CACjC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAClB,WAAW,CAAC,aAAa,CACzB,IAAI,iBAAiB,CAAC,CAEtB;QAAA,CAAC,gBAAgB,CACnB;MAAA,EAAE,eAAM,CAAC,CACV,CACD;IAAA,CAAC,QAAQ,CACX;EAAA,EAAE,SAAG,CAAC,CACP,CAAC;AA7CW,QAAA,aAAa,iBA6CxB","sourcesContent":["import React from 'react';\n\nimport {\n  Box,\n  BoxFlexDirection,\n  BoxAlignItems,\n  BoxJustifyContent,\n  BoxBackgroundColor,\n} from '../Box';\nimport { Button, ButtonVariant } from '../Button';\nimport { Text, TextVariant, TextColor } from '../Text';\n\nimport type { TabEmptyStateProps } from './TabEmptyState.types';\n\nexport const TabEmptyState = ({\n  icon,\n  description,\n  descriptionProps,\n  actionButtonText,\n  actionButtonProps,\n  onAction,\n  children,\n  style,\n  twClassName = '',\n  ...props\n}: TabEmptyStateProps) => (\n  <Box\n    flexDirection={BoxFlexDirection.Column}\n    alignItems={BoxAlignItems.Center}\n    justifyContent={BoxJustifyContent.Center}\n    backgroundColor={BoxBackgroundColor.BackgroundDefault}\n    gap={3}\n    twClassName={`max-w-64 ${twClassName}`}\n    style={style}\n    {...props}\n  >\n    {icon}\n    {description && (\n      <Text\n        variant={TextVariant.BodyMd}\n        color={TextColor.TextAlternative}\n        twClassName=\"text-center\"\n        {...descriptionProps}\n      >\n        {description}\n      </Text>\n    )}\n    {actionButtonText && onAction && (\n      <Button\n        variant={ButtonVariant.Secondary}\n        onPress={onAction}\n        twClassName=\"self-center\"\n        {...actionButtonProps}\n      >\n        {actionButtonText}\n      </Button>\n    )}\n    {children}\n  </Box>\n);\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"TabEmptyState.d.cts","sourceRoot":"","sources":["../../../src/components/TabEmptyState/TabEmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc;AAY1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,mIAWvB,kBAAkB,sBAiCpB,CAAC"}
+{"version":3,"file":"TabEmptyState.d.cts","sourceRoot":"","sources":["../../../src/components/TabEmptyState/TabEmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc;AAY1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,mIAWvB,kBAAkB,sBAkCpB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"TabEmptyState.d.mts","sourceRoot":"","sources":["../../../src/components/TabEmptyState/TabEmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc;AAY1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,mIAWvB,kBAAkB,sBAiCpB,CAAC"}
+{"version":3,"file":"TabEmptyState.d.mts","sourceRoot":"","sources":["../../../src/components/TabEmptyState/TabEmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc;AAY1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa,mIAWvB,kBAAkB,sBAkCpB,CAAC"}

package/dist/components/TabEmptyState/TabEmptyState.mjs

@@ -14,7 +14,7 @@ export const TabEmptyState = ({ icon, description, descriptionProps, actionButto
     {description && (<Text variant={TextVariant.BodyMd} color={TextColor.TextAlternative} twClassName="text-center" {...descriptionProps}>
         {description}
       </Text>)}
-    {actionButtonText && onAction && (<Button variant={ButtonVariant.Secondary} onPress={onAction} {...actionButtonProps}>
+    {actionButtonText && onAction && (<Button variant={ButtonVariant.Secondary} onPress={onAction} twClassName="self-center" {...actionButtonProps}>
         {actionButtonText}
       </Button>)}
     {children}

package/dist/components/TabEmptyState/TabEmptyState.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabEmptyState.mjs","sourceRoot":"","sources":["../../../src/components/TabEmptyState/TabEmptyState.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,MAAK,cAAc;;AAE1B,OAAO,EACL,GAAG,EACH,gBAAgB,EAChB,aAAa,EACb,iBAAiB,EACjB,kBAAkB,EACnB,yBAAe;AAChB,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,4BAAkB;AAClD,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,0BAAgB;AAIvD,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,IAAI,EACJ,WAAW,EACX,gBAAgB,EAChB,gBAAgB,EAChB,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,WAAW,GAAG,EAAE,EAChB,GAAG,KAAK,EACW,EAAE,EAAE,CAAC,CACxB,CAAC,GAAG,CACF,aAAa,CAAC,CAAC,gBAAgB,CAAC,MAAM,CAAC,CACvC,UAAU,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,CACjC,cAAc,CAAC,CAAC,iBAAiB,CAAC,MAAM,CAAC,CACzC,eAAe,CAAC,CAAC,kBAAkB,CAAC,iBAAiB,CAAC,CACtD,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,WAAW,CAAC,CAAC,YAAY,WAAW,EAAE,CAAC,CACvC,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,IAAI,KAAK,CAAC,CAEV;IAAA,CAAC,IAAI,CACL;IAAA,CAAC,WAAW,IAAI,CACd,CAAC,IAAI,CACH,OAAO,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAC5B,KAAK,CAAC,CAAC,SAAS,CAAC,eAAe,CAAC,CACjC,WAAW,CAAC,aAAa,CACzB,IAAI,gBAAgB,CAAC,CAErB;QAAA,CAAC,WAAW,CACd;MAAA,EAAE,IAAI,CAAC,CACR,CACD;IAAA,CAAC,gBAAgB,IAAI,QAAQ,IAAI,CAC/B,CAAC,MAAM,CACL,OAAO,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,CACjC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAClB,IAAI,iBAAiB,CAAC,CAEtB;QAAA,CAAC,gBAAgB,CACnB;MAAA,EAAE,MAAM,CAAC,CACV,CACD;IAAA,CAAC,QAAQ,CACX;EAAA,EAAE,GAAG,CAAC,CACP,CAAC","sourcesContent":["import React from 'react';\n\nimport {\n  Box,\n  BoxFlexDirection,\n  BoxAlignItems,\n  BoxJustifyContent,\n  BoxBackgroundColor,\n} from '../Box';\nimport { Button, ButtonVariant } from '../Button';\nimport { Text, TextVariant, TextColor } from '../Text';\n\nimport type { TabEmptyStateProps } from './TabEmptyState.types';\n\nexport const TabEmptyState = ({\n  icon,\n  description,\n  descriptionProps,\n  actionButtonText,\n  actionButtonProps,\n  onAction,\n  children,\n  style,\n  twClassName = '',\n  ...props\n}: TabEmptyStateProps) => (\n  <Box\n    flexDirection={BoxFlexDirection.Column}\n    alignItems={BoxAlignItems.Center}\n    justifyContent={BoxJustifyContent.Center}\n    backgroundColor={BoxBackgroundColor.BackgroundDefault}\n    gap={3}\n    twClassName={`max-w-64 ${twClassName}`}\n    style={style}\n    {...props}\n  >\n    {icon}\n    {description && (\n      <Text\n        variant={TextVariant.BodyMd}\n        color={TextColor.TextAlternative}\n        twClassName=\"text-center\"\n        {...descriptionProps}\n      >\n        {description}\n      </Text>\n    )}\n    {actionButtonText && onAction && (\n      <Button\n        variant={ButtonVariant.Secondary}\n        onPress={onAction}\n        {...actionButtonProps}\n      >\n        {actionButtonText}\n      </Button>\n    )}\n    {children}\n  </Box>\n);\n"]}
+{"version":3,"file":"TabEmptyState.mjs","sourceRoot":"","sources":["../../../src/components/TabEmptyState/TabEmptyState.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,MAAK,cAAc;;AAE1B,OAAO,EACL,GAAG,EACH,gBAAgB,EAChB,aAAa,EACb,iBAAiB,EACjB,kBAAkB,EACnB,yBAAe;AAChB,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,4BAAkB;AAClD,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,0BAAgB;AAIvD,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,IAAI,EACJ,WAAW,EACX,gBAAgB,EAChB,gBAAgB,EAChB,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,WAAW,GAAG,EAAE,EAChB,GAAG,KAAK,EACW,EAAE,EAAE,CAAC,CACxB,CAAC,GAAG,CACF,aAAa,CAAC,CAAC,gBAAgB,CAAC,MAAM,CAAC,CACvC,UAAU,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,CACjC,cAAc,CAAC,CAAC,iBAAiB,CAAC,MAAM,CAAC,CACzC,eAAe,CAAC,CAAC,kBAAkB,CAAC,iBAAiB,CAAC,CACtD,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,WAAW,CAAC,CAAC,YAAY,WAAW,EAAE,CAAC,CACvC,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,IAAI,KAAK,CAAC,CAEV;IAAA,CAAC,IAAI,CACL;IAAA,CAAC,WAAW,IAAI,CACd,CAAC,IAAI,CACH,OAAO,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAC5B,KAAK,CAAC,CAAC,SAAS,CAAC,eAAe,CAAC,CACjC,WAAW,CAAC,aAAa,CACzB,IAAI,gBAAgB,CAAC,CAErB;QAAA,CAAC,WAAW,CACd;MAAA,EAAE,IAAI,CAAC,CACR,CACD;IAAA,CAAC,gBAAgB,IAAI,QAAQ,IAAI,CAC/B,CAAC,MAAM,CACL,OAAO,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,CACjC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAClB,WAAW,CAAC,aAAa,CACzB,IAAI,iBAAiB,CAAC,CAEtB;QAAA,CAAC,gBAAgB,CACnB;MAAA,EAAE,MAAM,CAAC,CACV,CACD;IAAA,CAAC,QAAQ,CACX;EAAA,EAAE,GAAG,CAAC,CACP,CAAC","sourcesContent":["import React from 'react';\n\nimport {\n  Box,\n  BoxFlexDirection,\n  BoxAlignItems,\n  BoxJustifyContent,\n  BoxBackgroundColor,\n} from '../Box';\nimport { Button, ButtonVariant } from '../Button';\nimport { Text, TextVariant, TextColor } from '../Text';\n\nimport type { TabEmptyStateProps } from './TabEmptyState.types';\n\nexport const TabEmptyState = ({\n  icon,\n  description,\n  descriptionProps,\n  actionButtonText,\n  actionButtonProps,\n  onAction,\n  children,\n  style,\n  twClassName = '',\n  ...props\n}: TabEmptyStateProps) => (\n  <Box\n    flexDirection={BoxFlexDirection.Column}\n    alignItems={BoxAlignItems.Center}\n    justifyContent={BoxJustifyContent.Center}\n    backgroundColor={BoxBackgroundColor.BackgroundDefault}\n    gap={3}\n    twClassName={`max-w-64 ${twClassName}`}\n    style={style}\n    {...props}\n  >\n    {icon}\n    {description && (\n      <Text\n        variant={TextVariant.BodyMd}\n        color={TextColor.TextAlternative}\n        twClassName=\"text-center\"\n        {...descriptionProps}\n      >\n        {description}\n      </Text>\n    )}\n    {actionButtonText && onAction && (\n      <Button\n        variant={ButtonVariant.Secondary}\n        onPress={onAction}\n        twClassName=\"self-center\"\n        {...actionButtonProps}\n      >\n        {actionButtonText}\n      </Button>\n    )}\n    {children}\n  </Box>\n);\n"]}

package/dist/components/Tag/Tag.cjs

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tag = void 0;
+const design_system_shared_1 = require("@metamask-previews/design-system-shared");
+const design_system_twrnc_preset_1 = require("@metamask-previews/design-system-twrnc-preset");
+const react_1 = __importDefault(require("react"));
+const Box_1 = require("../Box/index.cjs");
+const BoxRow_1 = require("../BoxRow/index.cjs");
+const Icon_1 = require("../Icon/index.cjs");
+const Tag_constants_1 = require("./Tag.constants.cjs");
+const Tag = ({ children, severity = design_system_shared_1.TagSeverity.Neutral, startIconName, startIconProps, startAccessory, endIconName, endIconProps, endAccessory, twClassName, style, ...props }) => {
+    const tw = (0, design_system_twrnc_preset_1.useTailwind)();
+    const backgroundColor = Tag_constants_1.MAP_TAG_SEVERITY_BACKGROUND[severity];
+    const textColor = Tag_constants_1.MAP_TAG_SEVERITY_TEXT_COLOR[severity];
+    const iconColor = Tag_constants_1.MAP_TAG_SEVERITY_ICON_COLOR[severity];
+    return (<Box_1.Box {...props} backgroundColor={backgroundColor} style={[
+            tw.style('rounded-md self-start', (startIconName ?? startIconProps?.name) ? 'pl-1' : 'pl-1.5', (endIconName ?? endIconProps?.name) ? 'pr-1' : 'pr-1.5', twClassName),
+            style,
+        ]}>
+      <BoxRow_1.BoxRow textProps={{
+            color: textColor,
+            variant: design_system_shared_1.TextVariant.BodyXs,
+            fontWeight: design_system_shared_1.FontWeight.Medium,
+        }} startAccessory={(() => {
+            const name = startIconName ?? startIconProps?.name;
+            if (!name) {
+                return startAccessory ?? null;
+            }
+            return (<Icon_1.Icon name={name} color={iconColor} size={Icon_1.IconSize.Xs} twClassName="shrink-0" {...startIconProps}/>);
+        })()} endAccessory={(() => {
+            const name = endIconName ?? endIconProps?.name;
+            if (!name) {
+                return endAccessory ?? null;
+            }
+            return (<Icon_1.Icon name={name} color={iconColor} size={Icon_1.IconSize.Xs} twClassName="shrink-0" {...endIconProps}/>);
+        })()}>
+        {children}
+      </BoxRow_1.BoxRow>
+    </Box_1.Box>);
+};
+exports.Tag = Tag;
+//# sourceMappingURL=Tag.cjs.map

package/dist/components/Tag/Tag.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.cjs","sourceRoot":"","sources":["../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":";;;;;;AAAA,kFAIiD;AACjD,8FAA4E;AAC5E,kDAA0B;AAE1B,0CAA6B;AAC7B,gDAAmC;AACnC,4CAAyC;AAEzC,uDAIyB;AAGlB,MAAM,GAAG,GAAuB,CAAC,EACtC,QAAQ,EACR,QAAQ,GAAG,kCAAW,CAAC,OAAO,EAC9B,aAAa,EACb,cAAc,EACd,cAAc,EACd,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IACzB,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,OAAO,CACL,CAAC,SAAG,CACF,IAAI,KAAK,CAAC,CACV,eAAe,CAAC,CAAC,eAAe,CAAC,CACjC,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CACN,uBAAuB,EACvB,CAAC,aAAa,IAAI,cAAc,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EAC3D,CAAC,WAAW,IAAI,YAAY,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EACvD,WAAW,CACZ;YACD,KAAK;SACN,CAAC,CAEF;MAAA,CAAC,eAAM,CACL,SAAS,CAAC,CAAC;YACT,KAAK,EAAE,SAAS;YAChB,OAAO,EAAE,kCAAW,CAAC,MAAM;YAC3B,UAAU,EAAE,iCAAU,CAAC,MAAM;SAC9B,CAAC,CACF,cAAc,CAAC,CAAC,CAAC,GAAG,EAAE;YACpB,MAAM,IAAI,GAAG,aAAa,IAAI,cAAc,EAAE,IAAI,CAAC;YACnD,IAAI,CAAC,IAAI,EAAE;gBACT,OAAO,cAAc,IAAI,IAAI,CAAC;aAC/B;YACD,OAAO,CACL,CAAC,WAAI,CACH,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,KAAK,CAAC,CAAC,SAAS,CAAC,CACjB,IAAI,CAAC,CAAC,eAAQ,CAAC,EAAE,CAAC,CAClB,WAAW,CAAC,UAAU,CACtB,IAAI,cAAc,CAAC,EACnB,CACH,CAAC;QACJ,CAAC,CAAC,EAAE,CAAC,CACL,YAAY,CAAC,CAAC,CAAC,GAAG,EAAE;YAClB,MAAM,IAAI,GAAG,WAAW,IAAI,YAAY,EAAE,IAAI,CAAC;YAC/C,IAAI,CAAC,IAAI,EAAE;gBACT,OAAO,YAAY,IAAI,IAAI,CAAC;aAC7B;YACD,OAAO,CACL,CAAC,WAAI,CACH,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,KAAK,CAAC,CAAC,SAAS,CAAC,CACjB,IAAI,CAAC,CAAC,eAAQ,CAAC,EAAE,CAAC,CAClB,WAAW,CAAC,UAAU,CACtB,IAAI,YAAY,CAAC,EACjB,CACH,CAAC;QACJ,CAAC,CAAC,EAAE,CAAC,CAEL;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,eAAM,CACV;IAAA,EAAE,SAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AAzEW,QAAA,GAAG,OAyEd","sourcesContent":["import {\n  FontWeight,\n  TagSeverity,\n  TextVariant,\n} from '@metamask-previews/design-system-shared';\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\n\nimport { Box } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { Icon, IconSize } from '../Icon';\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\nexport const Tag: React.FC<TagProps> = ({\n  children,\n  severity = TagSeverity.Neutral,\n  startIconName,\n  startIconProps,\n  startAccessory,\n  endIconName,\n  endIconProps,\n  endAccessory,\n  twClassName,\n  style,\n  ...props\n}) => {\n  const tw = useTailwind();\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  return (\n    <Box\n      {...props}\n      backgroundColor={backgroundColor}\n      style={[\n        tw.style(\n          'rounded-md self-start',\n          (startIconName ?? startIconProps?.name) ? 'pl-1' : 'pl-1.5',\n          (endIconName ?? endIconProps?.name) ? 'pr-1' : 'pr-1.5',\n          twClassName,\n        ),\n        style,\n      ]}\n    >\n      <BoxRow\n        textProps={{\n          color: textColor,\n          variant: TextVariant.BodyXs,\n          fontWeight: FontWeight.Medium,\n        }}\n        startAccessory={(() => {\n          const name = startIconName ?? startIconProps?.name;\n          if (!name) {\n            return startAccessory ?? null;\n          }\n          return (\n            <Icon\n              name={name}\n              color={iconColor}\n              size={IconSize.Xs}\n              twClassName=\"shrink-0\"\n              {...startIconProps}\n            />\n          );\n        })()}\n        endAccessory={(() => {\n          const name = endIconName ?? endIconProps?.name;\n          if (!name) {\n            return endAccessory ?? null;\n          }\n          return (\n            <Icon\n              name={name}\n              color={iconColor}\n              size={IconSize.Xs}\n              twClassName=\"shrink-0\"\n              {...endIconProps}\n            />\n          );\n        })()}\n      >\n        {children}\n      </BoxRow>\n    </Box>\n  );\n};\n"]}

package/dist/components/Tag/Tag.constants.cjs

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MAP_TAG_SEVERITY_ICON_COLOR = exports.MAP_TAG_SEVERITY_TEXT_COLOR = exports.MAP_TAG_SEVERITY_BACKGROUND = void 0;
+const design_system_shared_1 = require("@metamask-previews/design-system-shared");
+const types_1 = require("../../types/index.cjs");
+exports.MAP_TAG_SEVERITY_BACKGROUND = {
+    [design_system_shared_1.TagSeverity.Neutral]: design_system_shared_1.BoxBackgroundColor.BackgroundMuted,
+    [design_system_shared_1.TagSeverity.Success]: design_system_shared_1.BoxBackgroundColor.SuccessMuted,
+    [design_system_shared_1.TagSeverity.Error]: design_system_shared_1.BoxBackgroundColor.ErrorMuted,
+    [design_system_shared_1.TagSeverity.Warning]: design_system_shared_1.BoxBackgroundColor.WarningMuted,
+    [design_system_shared_1.TagSeverity.Info]: design_system_shared_1.BoxBackgroundColor.InfoMuted,
+};
+exports.MAP_TAG_SEVERITY_TEXT_COLOR = {
+    [design_system_shared_1.TagSeverity.Neutral]: design_system_shared_1.TextColor.TextDefault,
+    [design_system_shared_1.TagSeverity.Success]: design_system_shared_1.TextColor.SuccessDefault,
+    [design_system_shared_1.TagSeverity.Error]: design_system_shared_1.TextColor.ErrorDefault,
+    [design_system_shared_1.TagSeverity.Warning]: design_system_shared_1.TextColor.WarningDefault,
+    [design_system_shared_1.TagSeverity.Info]: design_system_shared_1.TextColor.InfoDefault,
+};
+exports.MAP_TAG_SEVERITY_ICON_COLOR = {
+    [design_system_shared_1.TagSeverity.Neutral]: types_1.IconColor.IconDefault,
+    [design_system_shared_1.TagSeverity.Success]: types_1.IconColor.SuccessDefault,
+    [design_system_shared_1.TagSeverity.Error]: types_1.IconColor.ErrorDefault,
+    [design_system_shared_1.TagSeverity.Warning]: types_1.IconColor.WarningDefault,
+    [design_system_shared_1.TagSeverity.Info]: types_1.IconColor.InfoDefault,
+};
+//# sourceMappingURL=Tag.constants.cjs.map

package/dist/components/Tag/Tag.constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.constants.cjs","sourceRoot":"","sources":["../../../src/components/Tag/Tag.constants.ts"],"names":[],"mappings":";;;AAAA,kFAIiD;AAEjD,iDAAwC;AAE3B,QAAA,2BAA2B,GAGpC;IACF,CAAC,kCAAW,CAAC,OAAO,CAAC,EAAE,yCAAkB,CAAC,eAAe;IACzD,CAAC,kCAAW,CAAC,OAAO,CAAC,EAAE,yCAAkB,CAAC,YAAY;IACtD,CAAC,kCAAW,CAAC,KAAK,CAAC,EAAE,yCAAkB,CAAC,UAAU;IAClD,CAAC,kCAAW,CAAC,OAAO,CAAC,EAAE,yCAAkB,CAAC,YAAY;IACtD,CAAC,kCAAW,CAAC,IAAI,CAAC,EAAE,yCAAkB,CAAC,SAAS;CACjD,CAAC;AAEW,QAAA,2BAA2B,GAAmC;IACzE,CAAC,kCAAW,CAAC,OAAO,CAAC,EAAE,gCAAS,CAAC,WAAW;IAC5C,CAAC,kCAAW,CAAC,OAAO,CAAC,EAAE,gCAAS,CAAC,cAAc;IAC/C,CAAC,kCAAW,CAAC,KAAK,CAAC,EAAE,gCAAS,CAAC,YAAY;IAC3C,CAAC,kCAAW,CAAC,OAAO,CAAC,EAAE,gCAAS,CAAC,cAAc;IAC/C,CAAC,kCAAW,CAAC,IAAI,CAAC,EAAE,gCAAS,CAAC,WAAW;CAC1C,CAAC;AAEW,QAAA,2BAA2B,GAAmC;IACzE,CAAC,kCAAW,CAAC,OAAO,CAAC,EAAE,iBAAS,CAAC,WAAW;IAC5C,CAAC,kCAAW,CAAC,OAAO,CAAC,EAAE,iBAAS,CAAC,cAAc;IAC/C,CAAC,kCAAW,CAAC,KAAK,CAAC,EAAE,iBAAS,CAAC,YAAY;IAC3C,CAAC,kCAAW,CAAC,OAAO,CAAC,EAAE,iBAAS,CAAC,cAAc;IAC/C,CAAC,kCAAW,CAAC,IAAI,CAAC,EAAE,iBAAS,CAAC,WAAW;CAC1C,CAAC","sourcesContent":["import {\n  BoxBackgroundColor,\n  TagSeverity,\n  TextColor,\n} from '@metamask-previews/design-system-shared';\n\nimport { IconColor } from '../../types';\n\nexport const MAP_TAG_SEVERITY_BACKGROUND: Record<\n  TagSeverity,\n  BoxBackgroundColor\n> = {\n  [TagSeverity.Neutral]: BoxBackgroundColor.BackgroundMuted,\n  [TagSeverity.Success]: BoxBackgroundColor.SuccessMuted,\n  [TagSeverity.Error]: BoxBackgroundColor.ErrorMuted,\n  [TagSeverity.Warning]: BoxBackgroundColor.WarningMuted,\n  [TagSeverity.Info]: BoxBackgroundColor.InfoMuted,\n};\n\nexport const MAP_TAG_SEVERITY_TEXT_COLOR: Record<TagSeverity, TextColor> = {\n  [TagSeverity.Neutral]: TextColor.TextDefault,\n  [TagSeverity.Success]: TextColor.SuccessDefault,\n  [TagSeverity.Error]: TextColor.ErrorDefault,\n  [TagSeverity.Warning]: TextColor.WarningDefault,\n  [TagSeverity.Info]: TextColor.InfoDefault,\n};\n\nexport const MAP_TAG_SEVERITY_ICON_COLOR: Record<TagSeverity, IconColor> = {\n  [TagSeverity.Neutral]: IconColor.IconDefault,\n  [TagSeverity.Success]: IconColor.SuccessDefault,\n  [TagSeverity.Error]: IconColor.ErrorDefault,\n  [TagSeverity.Warning]: IconColor.WarningDefault,\n  [TagSeverity.Info]: IconColor.InfoDefault,\n};\n"]}

package/dist/components/Tag/Tag.constants.d.cts

@@ -0,0 +1,6 @@
+import { BoxBackgroundColor, TagSeverity, TextColor } from "@metamask-previews/design-system-shared";
+import { IconColor } from "../../types/index.cjs";
+export declare const MAP_TAG_SEVERITY_BACKGROUND: Record<TagSeverity, BoxBackgroundColor>;
+export declare const MAP_TAG_SEVERITY_TEXT_COLOR: Record<TagSeverity, TextColor>;
+export declare const MAP_TAG_SEVERITY_ICON_COLOR: Record<TagSeverity, IconColor>;
+//# sourceMappingURL=Tag.constants.d.cts.map

package/dist/components/Tag/Tag.constants.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.constants.d.cts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,WAAW,EACX,SAAS,EACV,gDAAgD;AAEjD,OAAO,EAAE,SAAS,EAAE,8BAAoB;AAExC,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAC9C,WAAW,EACX,kBAAkB,CAOnB,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,WAAW,EAAE,SAAS,CAMtE,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,WAAW,EAAE,SAAS,CAMtE,CAAC"}

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

@@ -0,0 +1,6 @@
+import { BoxBackgroundColor, TagSeverity, TextColor } from "@metamask-previews/design-system-shared";
+import { IconColor } from "../../types/index.mjs";
+export declare const MAP_TAG_SEVERITY_BACKGROUND: Record<TagSeverity, BoxBackgroundColor>;
+export declare const MAP_TAG_SEVERITY_TEXT_COLOR: Record<TagSeverity, TextColor>;
+export declare const MAP_TAG_SEVERITY_ICON_COLOR: Record<TagSeverity, IconColor>;
+//# sourceMappingURL=Tag.constants.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.constants.d.mts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,WAAW,EACX,SAAS,EACV,gDAAgD;AAEjD,OAAO,EAAE,SAAS,EAAE,8BAAoB;AAExC,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAC9C,WAAW,EACX,kBAAkB,CAOnB,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,WAAW,EAAE,SAAS,CAMtE,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,WAAW,EAAE,SAAS,CAMtE,CAAC"}

package/dist/components/Tag/Tag.constants.mjs

@@ -0,0 +1,24 @@
+import { BoxBackgroundColor, TagSeverity, TextColor } from "@metamask-previews/design-system-shared";
+import { IconColor } from "../../types/index.mjs";
+export const MAP_TAG_SEVERITY_BACKGROUND = {
+    [TagSeverity.Neutral]: BoxBackgroundColor.BackgroundMuted,
+    [TagSeverity.Success]: BoxBackgroundColor.SuccessMuted,
+    [TagSeverity.Error]: BoxBackgroundColor.ErrorMuted,
+    [TagSeverity.Warning]: BoxBackgroundColor.WarningMuted,
+    [TagSeverity.Info]: BoxBackgroundColor.InfoMuted,
+};
+export const MAP_TAG_SEVERITY_TEXT_COLOR = {
+    [TagSeverity.Neutral]: TextColor.TextDefault,
+    [TagSeverity.Success]: TextColor.SuccessDefault,
+    [TagSeverity.Error]: TextColor.ErrorDefault,
+    [TagSeverity.Warning]: TextColor.WarningDefault,
+    [TagSeverity.Info]: TextColor.InfoDefault,
+};
+export const MAP_TAG_SEVERITY_ICON_COLOR = {
+    [TagSeverity.Neutral]: IconColor.IconDefault,
+    [TagSeverity.Success]: IconColor.SuccessDefault,
+    [TagSeverity.Error]: IconColor.ErrorDefault,
+    [TagSeverity.Warning]: IconColor.WarningDefault,
+    [TagSeverity.Info]: IconColor.InfoDefault,
+};
+//# sourceMappingURL=Tag.constants.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.constants.mjs","sourceRoot":"","sources":["../../../src/components/Tag/Tag.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,WAAW,EACX,SAAS,EACV,gDAAgD;AAEjD,OAAO,EAAE,SAAS,EAAE,8BAAoB;AAExC,MAAM,CAAC,MAAM,2BAA2B,GAGpC;IACF,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,kBAAkB,CAAC,eAAe;IACzD,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,kBAAkB,CAAC,YAAY;IACtD,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,kBAAkB,CAAC,UAAU;IAClD,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,kBAAkB,CAAC,YAAY;IACtD,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,kBAAkB,CAAC,SAAS;CACjD,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAmC;IACzE,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,WAAW;IAC5C,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,cAAc;IAC/C,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,YAAY;IAC3C,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,cAAc;IAC/C,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,WAAW;CAC1C,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAmC;IACzE,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,WAAW;IAC5C,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,cAAc;IAC/C,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,YAAY;IAC3C,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,cAAc;IAC/C,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,WAAW;CAC1C,CAAC","sourcesContent":["import {\n  BoxBackgroundColor,\n  TagSeverity,\n  TextColor,\n} from '@metamask-previews/design-system-shared';\n\nimport { IconColor } from '../../types';\n\nexport const MAP_TAG_SEVERITY_BACKGROUND: Record<\n  TagSeverity,\n  BoxBackgroundColor\n> = {\n  [TagSeverity.Neutral]: BoxBackgroundColor.BackgroundMuted,\n  [TagSeverity.Success]: BoxBackgroundColor.SuccessMuted,\n  [TagSeverity.Error]: BoxBackgroundColor.ErrorMuted,\n  [TagSeverity.Warning]: BoxBackgroundColor.WarningMuted,\n  [TagSeverity.Info]: BoxBackgroundColor.InfoMuted,\n};\n\nexport const MAP_TAG_SEVERITY_TEXT_COLOR: Record<TagSeverity, TextColor> = {\n  [TagSeverity.Neutral]: TextColor.TextDefault,\n  [TagSeverity.Success]: TextColor.SuccessDefault,\n  [TagSeverity.Error]: TextColor.ErrorDefault,\n  [TagSeverity.Warning]: TextColor.WarningDefault,\n  [TagSeverity.Info]: TextColor.InfoDefault,\n};\n\nexport const MAP_TAG_SEVERITY_ICON_COLOR: Record<TagSeverity, IconColor> = {\n  [TagSeverity.Neutral]: IconColor.IconDefault,\n  [TagSeverity.Success]: IconColor.SuccessDefault,\n  [TagSeverity.Error]: IconColor.ErrorDefault,\n  [TagSeverity.Warning]: IconColor.WarningDefault,\n  [TagSeverity.Info]: IconColor.InfoDefault,\n};\n"]}

package/dist/components/Tag/Tag.d.cts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { TagProps } from "./Tag.types.cjs";
+export declare const Tag: React.FC<TagProps>;
+//# sourceMappingURL=Tag.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.d.cts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,cAAc;AAW1B,OAAO,KAAK,EAAE,QAAQ,EAAE,wBAAoB;AAE5C,eAAO,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAyElC,CAAC"}

package/dist/components/Tag/Tag.d.mts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { TagProps } from "./Tag.types.mjs";
+export declare const Tag: React.FC<TagProps>;
+//# sourceMappingURL=Tag.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.d.mts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,cAAc;AAW1B,OAAO,KAAK,EAAE,QAAQ,EAAE,wBAAoB;AAE5C,eAAO,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAyElC,CAAC"}

package/dist/components/Tag/Tag.mjs

@@ -0,0 +1,45 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import { FontWeight, TagSeverity, TextVariant } from "@metamask-previews/design-system-shared";
+import { useTailwind } from "@metamask-previews/design-system-twrnc-preset";
+import $React from "react";
+const React = $importDefault($React);
+import { Box } from "../Box/index.mjs";
+import { BoxRow } from "../BoxRow/index.mjs";
+import { Icon, IconSize } from "../Icon/index.mjs";
+import { MAP_TAG_SEVERITY_BACKGROUND, MAP_TAG_SEVERITY_ICON_COLOR, MAP_TAG_SEVERITY_TEXT_COLOR } from "./Tag.constants.mjs";
+export const Tag = ({ children, severity = TagSeverity.Neutral, startIconName, startIconProps, startAccessory, endIconName, endIconProps, endAccessory, twClassName, style, ...props }) => {
+    const tw = useTailwind();
+    const backgroundColor = MAP_TAG_SEVERITY_BACKGROUND[severity];
+    const textColor = MAP_TAG_SEVERITY_TEXT_COLOR[severity];
+    const iconColor = MAP_TAG_SEVERITY_ICON_COLOR[severity];
+    return (<Box {...props} backgroundColor={backgroundColor} style={[
+            tw.style('rounded-md self-start', (startIconName ?? startIconProps?.name) ? 'pl-1' : 'pl-1.5', (endIconName ?? endIconProps?.name) ? 'pr-1' : 'pr-1.5', twClassName),
+            style,
+        ]}>
+      <BoxRow textProps={{
+            color: textColor,
+            variant: TextVariant.BodyXs,
+            fontWeight: FontWeight.Medium,
+        }} startAccessory={(() => {
+            const name = startIconName ?? startIconProps?.name;
+            if (!name) {
+                return startAccessory ?? null;
+            }
+            return (<Icon name={name} color={iconColor} size={IconSize.Xs} twClassName="shrink-0" {...startIconProps}/>);
+        })()} endAccessory={(() => {
+            const name = endIconName ?? endIconProps?.name;
+            if (!name) {
+                return endAccessory ?? null;
+            }
+            return (<Icon name={name} color={iconColor} size={IconSize.Xs} twClassName="shrink-0" {...endIconProps}/>);
+        })()}>
+        {children}
+      </BoxRow>
+    </Box>);
+};
+//# sourceMappingURL=Tag.mjs.map

package/dist/components/Tag/Tag.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.mjs","sourceRoot":"","sources":["../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,UAAU,EACV,WAAW,EACX,WAAW,EACZ,gDAAgD;AACjD,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,GAAG,EAAE,yBAAe;AAC7B,OAAO,EAAE,MAAM,EAAE,4BAAkB;AACnC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,0BAAgB;AAEzC,OAAO,EACL,2BAA2B,EAC3B,2BAA2B,EAC3B,2BAA2B,EAC5B,4BAAwB;AAGzB,MAAM,CAAC,MAAM,GAAG,GAAuB,CAAC,EACtC,QAAQ,EACR,QAAQ,GAAG,WAAW,CAAC,OAAO,EAC9B,aAAa,EACb,cAAc,EACd,cAAc,EACd,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IACzB,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,OAAO,CACL,CAAC,GAAG,CACF,IAAI,KAAK,CAAC,CACV,eAAe,CAAC,CAAC,eAAe,CAAC,CACjC,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CACN,uBAAuB,EACvB,CAAC,aAAa,IAAI,cAAc,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EAC3D,CAAC,WAAW,IAAI,YAAY,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EACvD,WAAW,CACZ;YACD,KAAK;SACN,CAAC,CAEF;MAAA,CAAC,MAAM,CACL,SAAS,CAAC,CAAC;YACT,KAAK,EAAE,SAAS;YAChB,OAAO,EAAE,WAAW,CAAC,MAAM;YAC3B,UAAU,EAAE,UAAU,CAAC,MAAM;SAC9B,CAAC,CACF,cAAc,CAAC,CAAC,CAAC,GAAG,EAAE;YACpB,MAAM,IAAI,GAAG,aAAa,IAAI,cAAc,EAAE,IAAI,CAAC;YACnD,IAAI,CAAC,IAAI,EAAE;gBACT,OAAO,cAAc,IAAI,IAAI,CAAC;aAC/B;YACD,OAAO,CACL,CAAC,IAAI,CACH,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,KAAK,CAAC,CAAC,SAAS,CAAC,CACjB,IAAI,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAClB,WAAW,CAAC,UAAU,CACtB,IAAI,cAAc,CAAC,EACnB,CACH,CAAC;QACJ,CAAC,CAAC,EAAE,CAAC,CACL,YAAY,CAAC,CAAC,CAAC,GAAG,EAAE;YAClB,MAAM,IAAI,GAAG,WAAW,IAAI,YAAY,EAAE,IAAI,CAAC;YAC/C,IAAI,CAAC,IAAI,EAAE;gBACT,OAAO,YAAY,IAAI,IAAI,CAAC;aAC7B;YACD,OAAO,CACL,CAAC,IAAI,CACH,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,KAAK,CAAC,CAAC,SAAS,CAAC,CACjB,IAAI,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAClB,WAAW,CAAC,UAAU,CACtB,IAAI,YAAY,CAAC,EACjB,CACH,CAAC;QACJ,CAAC,CAAC,EAAE,CAAC,CAEL;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,MAAM,CACV;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {\n  FontWeight,\n  TagSeverity,\n  TextVariant,\n} from '@metamask-previews/design-system-shared';\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React from 'react';\n\nimport { Box } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { Icon, IconSize } from '../Icon';\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\nexport const Tag: React.FC<TagProps> = ({\n  children,\n  severity = TagSeverity.Neutral,\n  startIconName,\n  startIconProps,\n  startAccessory,\n  endIconName,\n  endIconProps,\n  endAccessory,\n  twClassName,\n  style,\n  ...props\n}) => {\n  const tw = useTailwind();\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  return (\n    <Box\n      {...props}\n      backgroundColor={backgroundColor}\n      style={[\n        tw.style(\n          'rounded-md self-start',\n          (startIconName ?? startIconProps?.name) ? 'pl-1' : 'pl-1.5',\n          (endIconName ?? endIconProps?.name) ? 'pr-1' : 'pr-1.5',\n          twClassName,\n        ),\n        style,\n      ]}\n    >\n      <BoxRow\n        textProps={{\n          color: textColor,\n          variant: TextVariant.BodyXs,\n          fontWeight: FontWeight.Medium,\n        }}\n        startAccessory={(() => {\n          const name = startIconName ?? startIconProps?.name;\n          if (!name) {\n            return startAccessory ?? null;\n          }\n          return (\n            <Icon\n              name={name}\n              color={iconColor}\n              size={IconSize.Xs}\n              twClassName=\"shrink-0\"\n              {...startIconProps}\n            />\n          );\n        })()}\n        endAccessory={(() => {\n          const name = endIconName ?? endIconProps?.name;\n          if (!name) {\n            return endAccessory ?? null;\n          }\n          return (\n            <Icon\n              name={name}\n              color={iconColor}\n              size={IconSize.Xs}\n              twClassName=\"shrink-0\"\n              {...endIconProps}\n            />\n          );\n        })()}\n      >\n        {children}\n      </BoxRow>\n    </Box>\n  );\n};\n"]}

package/dist/components/Tag/Tag.types.cjs

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=Tag.types.cjs.map

package/dist/components/Tag/Tag.types.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.types.cjs","sourceRoot":"","sources":["../../../src/components/Tag/Tag.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { TagPropsShared } from '@metamask-previews/design-system-shared';\nimport type { ViewProps, StyleProp, ViewStyle } from 'react-native';\n\nimport type { IconName, IconProps } from '../Icon';\n\n/**\n * Tag component props (React Native platform-specific).\n * Extends shared props from @metamask-previews/design-system-shared with React Native specific platform concerns.\n */\nexport type TagProps = TagPropsShared & {\n  /**\n   * Optional prop to specify an icon to show at the start of the tag (`IconSize.Xs` unless overridden in `startIconProps`).\n   */\n  startIconName?: IconName;\n  /**\n   * Optional prop to pass additional properties to the start icon. You may set `name` here instead of `startIconName`.\n   */\n  startIconProps?: Partial<IconProps>;\n  /**\n   * Optional prop to specify an icon to show at the end of the tag (`IconSize.Xs` unless overridden in `endIconProps`).\n   */\n  endIconName?: IconName;\n  /**\n   * Optional prop to pass additional properties to the end icon. You may set `name` here instead of `endIconName`.\n   */\n  endIconProps?: Partial<IconProps>;\n  /**\n   * Additional Tailwind classes to be applied to the Tag container.\n   */\n  twClassName?: string;\n  /**\n   * Test identifier for selecting the component in tests.\n   */\n  testID?: string;\n  /**\n   * Optional container styles.\n   */\n  style?: StyleProp<ViewStyle>;\n} & Omit<ViewProps, 'children' | 'style'>;\n"]}

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

@@ -0,0 +1,38 @@
+import type { TagPropsShared } from "@metamask-previews/design-system-shared";
+import type { ViewProps, StyleProp, ViewStyle } from "react-native/index.js";
+import type { IconName, IconProps } from "../Icon/index.cjs";
+/**
+ * Tag component props (React Native platform-specific).
+ * Extends shared props from @metamask-previews/design-system-shared with React Native specific platform concerns.
+ */
+export type TagProps = TagPropsShared & {
+    /**
+     * Optional prop to specify an icon to show at the start of the tag (`IconSize.Xs` unless overridden in `startIconProps`).
+     */
+    startIconName?: IconName;
+    /**
+     * Optional prop to pass additional properties to the start icon. You may set `name` here instead of `startIconName`.
+     */
+    startIconProps?: Partial<IconProps>;
+    /**
+     * Optional prop to specify an icon to show at the end of the tag (`IconSize.Xs` unless overridden in `endIconProps`).
+     */
+    endIconName?: IconName;
+    /**
+     * Optional prop to pass additional properties to the end icon. You may set `name` here instead of `endIconName`.
+     */
+    endIconProps?: Partial<IconProps>;
+    /**
+     * Additional Tailwind classes to be applied to the Tag container.
+     */
+    twClassName?: string;
+    /**
+     * Test identifier for selecting the component in tests.
+     */
+    testID?: string;
+    /**
+     * Optional container styles.
+     */
+    style?: StyleProp<ViewStyle>;
+} & Omit<ViewProps, 'children' | 'style'>;
+//# sourceMappingURL=Tag.types.d.cts.map

package/dist/components/Tag/Tag.types.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.types.d.cts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,gDAAgD;AAC9E,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,8BAAqB;AAEpE,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,0BAAgB;AAEnD;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,cAAc,GAAG;IACtC;;OAEG;IACH,aAAa,CAAC,EAAE,QAAQ,CAAC;IACzB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACpC;;OAEG;IACH,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAClC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,OAAO,CAAC,CAAC"}

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

@@ -0,0 +1,38 @@
+import type { TagPropsShared } from "@metamask-previews/design-system-shared";
+import type { ViewProps, StyleProp, ViewStyle } from "react-native/index.js";
+import type { IconName, IconProps } from "../Icon/index.mjs";
+/**
+ * Tag component props (React Native platform-specific).
+ * Extends shared props from @metamask-previews/design-system-shared with React Native specific platform concerns.
+ */
+export type TagProps = TagPropsShared & {
+    /**
+     * Optional prop to specify an icon to show at the start of the tag (`IconSize.Xs` unless overridden in `startIconProps`).
+     */
+    startIconName?: IconName;
+    /**
+     * Optional prop to pass additional properties to the start icon. You may set `name` here instead of `startIconName`.
+     */
+    startIconProps?: Partial<IconProps>;
+    /**
+     * Optional prop to specify an icon to show at the end of the tag (`IconSize.Xs` unless overridden in `endIconProps`).
+     */
+    endIconName?: IconName;
+    /**
+     * Optional prop to pass additional properties to the end icon. You may set `name` here instead of `endIconName`.
+     */
+    endIconProps?: Partial<IconProps>;
+    /**
+     * Additional Tailwind classes to be applied to the Tag container.
+     */
+    twClassName?: string;
+    /**
+     * Test identifier for selecting the component in tests.
+     */
+    testID?: string;
+    /**
+     * Optional container styles.
+     */
+    style?: StyleProp<ViewStyle>;
+} & Omit<ViewProps, 'children' | 'style'>;
+//# sourceMappingURL=Tag.types.d.mts.map

package/dist/components/Tag/Tag.types.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.types.d.mts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,gDAAgD;AAC9E,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,8BAAqB;AAEpE,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,0BAAgB;AAEnD;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,cAAc,GAAG;IACtC;;OAEG;IACH,aAAa,CAAC,EAAE,QAAQ,CAAC;IACzB;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACpC;;OAEG;IACH,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAClC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,OAAO,CAAC,CAAC"}

package/dist/components/Tag/Tag.types.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Tag.types.mjs.map

package/dist/components/Tag/Tag.types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.types.mjs","sourceRoot":"","sources":["../../../src/components/Tag/Tag.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { TagPropsShared } from '@metamask-previews/design-system-shared';\nimport type { ViewProps, StyleProp, ViewStyle } from 'react-native';\n\nimport type { IconName, IconProps } from '../Icon';\n\n/**\n * Tag component props (React Native platform-specific).\n * Extends shared props from @metamask-previews/design-system-shared with React Native specific platform concerns.\n */\nexport type TagProps = TagPropsShared & {\n  /**\n   * Optional prop to specify an icon to show at the start of the tag (`IconSize.Xs` unless overridden in `startIconProps`).\n   */\n  startIconName?: IconName;\n  /**\n   * Optional prop to pass additional properties to the start icon. You may set `name` here instead of `startIconName`.\n   */\n  startIconProps?: Partial<IconProps>;\n  /**\n   * Optional prop to specify an icon to show at the end of the tag (`IconSize.Xs` unless overridden in `endIconProps`).\n   */\n  endIconName?: IconName;\n  /**\n   * Optional prop to pass additional properties to the end icon. You may set `name` here instead of `endIconName`.\n   */\n  endIconProps?: Partial<IconProps>;\n  /**\n   * Additional Tailwind classes to be applied to the Tag container.\n   */\n  twClassName?: string;\n  /**\n   * Test identifier for selecting the component in tests.\n   */\n  testID?: string;\n  /**\n   * Optional container styles.\n   */\n  style?: StyleProp<ViewStyle>;\n} & Omit<ViewProps, 'children' | 'style'>;\n"]}