npm - @metamask/design-system-react-native - Versions diffs - 0.34.0 → 0.36.0 - Mend

@metamask/design-system-react-native 0.34.0 → 0.36.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (124) hide show

package/dist/components/Content/Content.cjs CHANGED Viewed

@@ -10,20 +10,33 @@ const Box_1 = require("../Box/index.cjs");
 const BoxColumn_1 = require("../BoxColumn/index.cjs");
 const BoxRow_1 = require("../BoxRow/index.cjs");
 const TextOrChildren_1 = require("../temp-components/TextOrChildren/index.cjs");
-const Content_constants_1 = require("./Content.constants.cjs");
-const Content = ({ verticalAlignment = design_system_shared_1.ContentVerticalAlignment.Center, avatar, twClassName, title, titleProps, titleStartAccessory, titleEndAccessory, description, descriptionProps, descriptionStartAccessory, descriptionEndAccessory, value, valueProps, valueStartAccessory, valueEndAccessory, subvalue, subvalueProps, subvalueStartAccessory, subvalueEndAccessory, ...props }) => {
-    return (<Box_1.Box flexDirection={design_system_shared_1.BoxFlexDirection.Row} alignItems={Content_constants_1.VERTICAL_ALIGNMENT_MAP[verticalAlignment]} gap={4} twClassName={(0, design_system_shared_1.mergeTwClassName)('min-h-[46px]', twClassName)} {...props}>
+const Content = ({ variant = design_system_shared_1.ContentVariant.TwoLines, avatar, twClassName, title, titleProps, titleStartAccessory, titleEndAccessory, description, descriptionProps, descriptionStartAccessory, descriptionEndAccessory, value, valueProps, valueStartAccessory, valueEndAccessory, subvalue, subvalueProps, subvalueStartAccessory, subvalueEndAccessory, ...props }) => {
+    const isOneLine = variant === design_system_shared_1.ContentVariant.OneLine;
+    const isMultiLine = variant === design_system_shared_1.ContentVariant.MultiLine;
+    const showDescription = !isOneLine && description;
+    const showSubvalue = !isOneLine && subvalue;
+    const alignItems = isMultiLine ? design_system_shared_1.BoxAlignItems.Start : design_system_shared_1.BoxAlignItems.Center;
+    if (__DEV__) {
+        if (isOneLine && description) {
+            console.warn('Content: `description` is ignored when `variant` is `ContentVariant.OneLine`.');
+        }
+        if (isOneLine && subvalue) {
+            console.warn('Content: `subvalue` is ignored when `variant` is `ContentVariant.OneLine`.');
+        }
+    }
+    return (<Box_1.Box flexDirection={design_system_shared_1.BoxFlexDirection.Row} alignItems={alignItems} gap={4} twClassName={twClassName} {...props}>
       {avatar}
-      {/* Title and description Column */}
-      <BoxColumn_1.BoxColumn twClassName="flex-1 min-w-0" bottomAccessory={description ? (<BoxRow_1.BoxRow twClassName="w-full" startAccessory={descriptionStartAccessory} endAccessory={descriptionEndAccessory} gap={1}>
-              <TextOrChildren_1.TextOrChildren textProps={{
+      <BoxColumn_1.BoxColumn twClassName="flex-1 min-w-0" bottomAccessory={showDescription ? (<BoxRow_1.BoxRow twClassName="w-full" alignItems={alignItems} startAccessory={descriptionStartAccessory} endAccessory={descriptionEndAccessory} gap={1}>
+              <BoxColumn_1.BoxColumn twClassName="flex-1 min-w-0">
+                <TextOrChildren_1.TextOrChildren textProps={{
                 variant: design_system_shared_1.TextVariant.BodySm,
                 fontWeight: design_system_shared_1.FontWeight.Medium,
                 color: design_system_shared_1.TextColor.TextAlternative,
                 ...descriptionProps,
             }}>
-                {description}
-              </TextOrChildren_1.TextOrChildren>
+                  {description}
+                </TextOrChildren_1.TextOrChildren>
+              </BoxColumn_1.BoxColumn>
             </BoxRow_1.BoxRow>) : null}>
         {title ? (<BoxRow_1.BoxRow twClassName="w-full" startAccessory={titleStartAccessory} endAccessory={titleEndAccessory} gap={1}>
             <TextOrChildren_1.TextOrChildren textProps={{
@@ -36,16 +49,17 @@ const Content = ({ verticalAlignment = design_system_shared_1.ContentVerticalAli
             </TextOrChildren_1.TextOrChildren>
           </BoxRow_1.BoxRow>) : null}
       </BoxColumn_1.BoxColumn>
-      {/* Value and subvalue Column */}
-      {value || subvalue ? (<BoxColumn_1.BoxColumn alignItems={design_system_shared_1.BoxAlignItems.End} twClassName="min-w-0" bottomAccessory={subvalue ? (<BoxRow_1.BoxRow startAccessory={subvalueStartAccessory} endAccessory={subvalueEndAccessory} gap={1}>
-                <TextOrChildren_1.TextOrChildren textProps={{
+      {value || showSubvalue ? (<BoxColumn_1.BoxColumn alignItems={design_system_shared_1.BoxAlignItems.End} twClassName="min-w-0" bottomAccessory={showSubvalue ? (<BoxRow_1.BoxRow alignItems={alignItems} startAccessory={subvalueStartAccessory} endAccessory={subvalueEndAccessory} gap={1}>
+                <BoxColumn_1.BoxColumn twClassName="min-w-0">
+                  <TextOrChildren_1.TextOrChildren textProps={{
                     variant: design_system_shared_1.TextVariant.BodySm,
                     fontWeight: design_system_shared_1.FontWeight.Medium,
                     color: design_system_shared_1.TextColor.TextAlternative,
                     ...subvalueProps,
                 }}>
-                  {subvalue}
-                </TextOrChildren_1.TextOrChildren>
+                    {subvalue}
+                  </TextOrChildren_1.TextOrChildren>
+                </BoxColumn_1.BoxColumn>
               </BoxRow_1.BoxRow>) : null}>
           {value ? (<BoxRow_1.BoxRow startAccessory={valueStartAccessory} endAccessory={valueEndAccessory} gap={1}>
               <TextOrChildren_1.TextOrChildren textProps={{

package/dist/components/Content/Content.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Content.cjs","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":";;;;;;AAAA,~~yEAQwC~~;AACxC,kDAA0B;AAE1B,0CAA6B;AAC7B,sDAAyC;AACzC,gDAAmC;AACnC,gFAAmE;~~AAEnE,+DAA6D;AAGtD~~,MAAM,OAAO,GAA2B,CAAC,EAC9C,~~iBAAiB~~,GAAG~~,+CAAwB~~,CAAC,~~MAAM~~,~~EACnD~~,MAAM,EACN,WAAW,EACX,KAAK,EACL,UAAU,EACV,mBAAmB,EACnB,iBAAiB,EACjB,WAAW,EACX,gBAAgB,EAChB,yBAAyB,EACzB,uBAAuB,EACvB,KAAK,EACL,UAAU,EACV,mBAAmB,EACnB,iBAAiB,EACjB,QAAQ,EACR,aAAa,EACb,sBAAsB,EACtB,oBAAoB,EACpB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,OAAO,~~CACL~~,CAAC,~~SAAG~~,~~CACF~~,~~aAAa~~,CAAC,CAAC,~~uCAAgB~~,CAAC,GAAG,CAAC,~~CACpC~~,UAAU,CAAC,CAAC,~~0CAAsB~~,CAAC,~~iBAAiB~~,CAAC,CAAC,~~CACtD~~,~~GAAG~~,CAAC,CAAC,CAAC,CAAC,~~CACP~~,~~WAAW~~,CAAC,CAAC,~~IAAA~~,uCAAgB,~~EAAC~~,~~cAAc~~,~~EAAE~~,WAAW,CAAC,CAAC,~~CAC3D~~,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,MAAM,CACP;MAAA,CAAC,~~kCAAkC,CACnC;MAAA,CAAC,~~qBAAS,CACR,WAAW,CAAC,gBAAgB,CAC5B,eAAe,CAAC,CACd,~~WAAW~~,CAAC,CAAC,CAAC,~~CACZ~~,CAAC,eAAM,CACL,WAAW,CAAC,QAAQ,CACpB,cAAc,CAAC,CAAC,yBAAyB,CAAC,CAC1C,YAAY,CAAC,CAAC,uBAAuB,CAAC,CACtC,GAAG,CAAC,CAAC,CAAC,CAAC,CAEP;cAAA,CAAC,+BAAc,CACb,SAAS,CAAC,CAAC;gBACT,OAAO,EAAE,kCAAW,CAAC,MAAM;gBAC3B,UAAU,EAAE,iCAAU,CAAC,MAAM;gBAC7B,KAAK,EAAE,gCAAS,CAAC,eAAe;gBAChC,GAAG,gBAAgB;aACpB,CAAC,CAEF;~~gBAAA~~,CAAC,WAAW,CACd;~~cAAA~~,EAAE,+BAAc,CAClB;YAAA,EAAE,eAAM,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CACT,CAED;QAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CACP,CAAC,eAAM,CACL,WAAW,CAAC,QAAQ,CACpB,cAAc,CAAC,CAAC,mBAAmB,CAAC,CACpC,YAAY,CAAC,CAAC,iBAAiB,CAAC,CAChC,GAAG,CAAC,CAAC,CAAC,CAAC,CAEP;YAAA,CAAC,+BAAc,CACb,SAAS,CAAC,CAAC;gBACT,OAAO,EAAE,kCAAW,CAAC,MAAM;gBAC3B,UAAU,EAAE,iCAAU,CAAC,MAAM;gBAC7B,KAAK,EAAE,gCAAS,CAAC,WAAW;gBAC5B,GAAG,UAAU;aACd,CAAC,CAEF;cAAA,CAAC,KAAK,CACR;YAAA,EAAE,+BAAc,CAClB;UAAA,EAAE,eAAM,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CACV;MAAA,EAAE,qBAAS,CACX;MAAA,CAAC~~,+BAA+B~~,~~CAChC;MAAA,CAAC,~~KAAK,IAAI,~~QAAQ~~,CAAC,CAAC,CAAC,~~CACnB~~,CAAC,qBAAS,CACR,UAAU,CAAC,CAAC,oCAAa,CAAC,GAAG,CAAC,CAC9B,WAAW,CAAC,SAAS,CACrB,eAAe,CAAC,CACd,~~QAAQ~~,CAAC,CAAC,CAAC,~~CACT~~,CAAC,eAAM,CACL,cAAc,CAAC,CAAC,sBAAsB,CAAC,CACvC,YAAY,CAAC,CAAC,oBAAoB,CAAC,CACnC,GAAG,CAAC,CAAC,CAAC,CAAC,CAEP;gBAAA,CAAC,+BAAc,CACb,SAAS,CAAC,CAAC;oBACT,OAAO,EAAE,kCAAW,CAAC,MAAM;oBAC3B,UAAU,EAAE,iCAAU,CAAC,MAAM;oBAC7B,KAAK,EAAE,gCAAS,CAAC,eAAe;oBAChC,GAAG,aAAa;iBACjB,CAAC,CAEF;~~kBAAA~~,CAAC,QAAQ,CACX;~~gBAAA~~,EAAE,+BAAc,CAClB;cAAA,EAAE,eAAM,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CACT,CAED;UAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CACP,CAAC,eAAM,CACL,cAAc,CAAC,CAAC,mBAAmB,CAAC,CACpC,YAAY,CAAC,CAAC,iBAAiB,CAAC,CAChC,GAAG,CAAC,CAAC,CAAC,CAAC,CAEP;cAAA,CAAC,+BAAc,CACb,SAAS,CAAC,CAAC;oBACT,OAAO,EAAE,kCAAW,CAAC,MAAM;oBAC3B,UAAU,EAAE,iCAAU,CAAC,MAAM;oBAC7B,KAAK,EAAE,gCAAS,CAAC,WAAW;oBAC5B,GAAG,UAAU;iBACd,CAAC,CAEF;gBAAA,CAAC,KAAK,CACR;cAAA,EAAE,+BAAc,CAClB;YAAA,EAAE,eAAM,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CACV;QAAA,EAAE,qBAAS,CAAC,CACb,CAAC,CAAC,CAAC,IAAI,CACV;IAAA,EAAE,SAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;~~AA5HW~~,QAAA,OAAO,~~WA4HlB~~;AAEF,eAAO,CAAC,WAAW,GAAG,SAAS,CAAC","sourcesContent":["import {\n BoxAlignItems,\n BoxFlexDirection,\n ~~ContentVerticalAlignment~~,\n FontWeight,\n ~~mergeTwClassName,\n~~ TextColor,\n TextVariant,\n} from '@metamask/design-system-shared';\nimport React from 'react';\n\nimport { Box } from '../Box';\nimport { BoxColumn } from '../BoxColumn';\nimport { BoxRow } from '../BoxRow';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport ~~{ VERTICAL_ALIGNMENT_MAP } from './Content.constants';\nimport~~ type { ContentProps } from './Content.types';\n\nexport const Content: React.FC<ContentProps> = ({\n ~~verticalAlignment~~ = ~~ContentVerticalAlignment~~.~~Center~~,\n avatar,\n twClassName,\n title,\n titleProps,\n titleStartAccessory,\n titleEndAccessory,\n description,\n descriptionProps,\n descriptionStartAccessory,\n descriptionEndAccessory,\n value,\n valueProps,\n valueStartAccessory,\n valueEndAccessory,\n subvalue,\n subvalueProps,\n subvalueStartAccessory,\n subvalueEndAccessory,\n ...props\n}) => {\n return (\n <Box\n flexDirection={BoxFlexDirection.Row}\n alignItems={~~VERTICAL_ALIGNMENT_MAP[verticalAlignment]~~}\n gap={4}\n twClassName={~~mergeTwClassName('min-h-[46px]',~~ twClassName)}\n {...props}\n >\n {avatar}\n ~~{/* Title and description Column /}\n~~ <BoxColumn\n twClassName=\"flex-1 min-w-0\"\n bottomAccessory={\n ~~description~~ ? (\n <BoxRow\n twClassName=\"w-full\"\n startAccessory={descriptionStartAccessory}\n endAccessory={descriptionEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodySm,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextAlternative,\n ...descriptionProps,\n }}\n >\n {description}\n </TextOrChildren>\n </BoxRow>\n ) : null\n }\n >\n {title ? (\n <BoxRow\n twClassName=\"w-full\"\n startAccessory={titleStartAccessory}\n endAccessory={titleEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodyMd,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextDefault,\n ...titleProps,\n }}\n >\n {title}\n </TextOrChildren>\n </BoxRow>\n ) : null}\n </BoxColumn>\n {~~/ Value and subvalue Column */}\n {~~value \|\| ~~subvalue~~ ? (\n <BoxColumn\n alignItems={BoxAlignItems.End}\n twClassName=\"min-w-0\"\n bottomAccessory={\n ~~subvalue~~ ? (\n <BoxRow\n startAccessory={subvalueStartAccessory}\n endAccessory={subvalueEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodySm,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextAlternative,\n ...subvalueProps,\n }}\n >\n {subvalue}\n </TextOrChildren>\n </BoxRow>\n ) : null\n }\n >\n {value ? (\n <BoxRow\n startAccessory={valueStartAccessory}\n endAccessory={valueEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodyMd,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextDefault,\n ...valueProps,\n }}\n >\n {value}\n </TextOrChildren>\n </BoxRow>\n ) : null}\n </BoxColumn>\n ) : null}\n </Box>\n );\n};\n\nContent.displayName = 'Content';\n"]}
1	+ {"version":3,"file":"Content.cjs","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n BoxAlignItems,\n BoxFlexDirection,\n ContentVariant,\n FontWeight,\n TextColor,\n TextVariant,\n} from '@metamask/design-system-shared';\nimport React from 'react';\n\nimport { Box } from '../Box';\nimport { BoxColumn } from '../BoxColumn';\nimport { BoxRow } from '../BoxRow';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport type { ContentProps } from './Content.types';\n\nexport const Content: React.FC<ContentProps> = ({\n variant = ContentVariant.TwoLines,\n avatar,\n twClassName,\n title,\n titleProps,\n titleStartAccessory,\n titleEndAccessory,\n description,\n descriptionProps,\n descriptionStartAccessory,\n descriptionEndAccessory,\n value,\n valueProps,\n valueStartAccessory,\n valueEndAccessory,\n subvalue,\n subvalueProps,\n subvalueStartAccessory,\n subvalueEndAccessory,\n ...props\n}) => {\n const isOneLine = variant === ContentVariant.OneLine;\n const isMultiLine = variant === ContentVariant.MultiLine;\n const showDescription = !isOneLine && description;\n const showSubvalue = !isOneLine && subvalue;\n const alignItems = isMultiLine ? BoxAlignItems.Start : BoxAlignItems.Center;\n\n if (__DEV__) {\n if (isOneLine && description) {\n console.warn(\n 'Content: `description` is ignored when `variant` is `ContentVariant.OneLine`.',\n );\n }\n if (isOneLine && subvalue) {\n console.warn(\n 'Content: `subvalue` is ignored when `variant` is `ContentVariant.OneLine`.',\n );\n }\n }\n\n return (\n <Box\n flexDirection={BoxFlexDirection.Row}\n alignItems={alignItems}\n gap={4}\n twClassName={twClassName}\n {...props}\n >\n {avatar}\n <BoxColumn\n twClassName=\"flex-1 min-w-0\"\n bottomAccessory={\n showDescription ? (\n <BoxRow\n twClassName=\"w-full\"\n alignItems={alignItems}\n startAccessory={descriptionStartAccessory}\n endAccessory={descriptionEndAccessory}\n gap={1}\n >\n <BoxColumn twClassName=\"flex-1 min-w-0\">\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodySm,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextAlternative,\n ...descriptionProps,\n }}\n >\n {description}\n </TextOrChildren>\n </BoxColumn>\n </BoxRow>\n ) : null\n }\n >\n {title ? (\n <BoxRow\n twClassName=\"w-full\"\n startAccessory={titleStartAccessory}\n endAccessory={titleEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodyMd,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextDefault,\n ...titleProps,\n }}\n >\n {title}\n </TextOrChildren>\n </BoxRow>\n ) : null}\n </BoxColumn>\n {value \|\| showSubvalue ? (\n <BoxColumn\n alignItems={BoxAlignItems.End}\n twClassName=\"min-w-0\"\n bottomAccessory={\n showSubvalue ? (\n <BoxRow\n alignItems={alignItems}\n startAccessory={subvalueStartAccessory}\n endAccessory={subvalueEndAccessory}\n gap={1}\n >\n <BoxColumn twClassName=\"min-w-0\">\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodySm,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextAlternative,\n ...subvalueProps,\n }}\n >\n {subvalue}\n </TextOrChildren>\n </BoxColumn>\n </BoxRow>\n ) : null\n }\n >\n {value ? (\n <BoxRow\n startAccessory={valueStartAccessory}\n endAccessory={valueEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodyMd,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextDefault,\n ...valueProps,\n }}\n >\n {value}\n </TextOrChildren>\n </BoxRow>\n ) : null}\n </BoxColumn>\n ) : null}\n </Box>\n );\n};\n\nContent.displayName = 'Content';\n"]}

package/dist/components/Content/Content.d.cts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Content.d.cts","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":"~~AASA~~,OAAO,KAAK,cAAc;~~AAQ1B~~,OAAO,KAAK,EAAE,YAAY,EAAE,4BAAwB;AAEpD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,~~CA4H1C~~,CAAC"}
1	+ {"version":3,"file":"Content.d.cts","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,YAAY,EAAE,4BAAwB;AAEpD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAmJ1C,CAAC"}

package/dist/components/Content/Content.d.mts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Content.d.mts","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":"~~AASA~~,OAAO,KAAK,cAAc;~~AAQ1B~~,OAAO,KAAK,EAAE,YAAY,EAAE,4BAAwB;AAEpD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,~~CA4H1C~~,CAAC"}
1	+ {"version":3,"file":"Content.d.mts","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,YAAY,EAAE,4BAAwB;AAEpD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAmJ1C,CAAC"}

package/dist/components/Content/Content.mjs CHANGED Viewed

@@ -4,27 +4,40 @@ function $importDefault(module) {
     }
     return module;
 }
-import { BoxAlignItems, BoxFlexDirection, ContentVerticalAlignment, FontWeight, mergeTwClassName, TextColor, TextVariant } from "@metamask/design-system-shared";
+import { BoxAlignItems, BoxFlexDirection, ContentVariant, FontWeight, TextColor, TextVariant } from "@metamask/design-system-shared";
 import $React from "react";
 const React = $importDefault($React);
 import { Box } from "../Box/index.mjs";
 import { BoxColumn } from "../BoxColumn/index.mjs";
 import { BoxRow } from "../BoxRow/index.mjs";
 import { TextOrChildren } from "../temp-components/TextOrChildren/index.mjs";
-import { VERTICAL_ALIGNMENT_MAP } from "./Content.constants.mjs";
-export const Content = ({ verticalAlignment = ContentVerticalAlignment.Center, avatar, twClassName, title, titleProps, titleStartAccessory, titleEndAccessory, description, descriptionProps, descriptionStartAccessory, descriptionEndAccessory, value, valueProps, valueStartAccessory, valueEndAccessory, subvalue, subvalueProps, subvalueStartAccessory, subvalueEndAccessory, ...props }) => {
-    return (<Box flexDirection={BoxFlexDirection.Row} alignItems={VERTICAL_ALIGNMENT_MAP[verticalAlignment]} gap={4} twClassName={mergeTwClassName('min-h-[46px]', twClassName)} {...props}>
+export const Content = ({ variant = ContentVariant.TwoLines, avatar, twClassName, title, titleProps, titleStartAccessory, titleEndAccessory, description, descriptionProps, descriptionStartAccessory, descriptionEndAccessory, value, valueProps, valueStartAccessory, valueEndAccessory, subvalue, subvalueProps, subvalueStartAccessory, subvalueEndAccessory, ...props }) => {
+    const isOneLine = variant === ContentVariant.OneLine;
+    const isMultiLine = variant === ContentVariant.MultiLine;
+    const showDescription = !isOneLine && description;
+    const showSubvalue = !isOneLine && subvalue;
+    const alignItems = isMultiLine ? BoxAlignItems.Start : BoxAlignItems.Center;
+    if (__DEV__) {
+        if (isOneLine && description) {
+            console.warn('Content: `description` is ignored when `variant` is `ContentVariant.OneLine`.');
+        }
+        if (isOneLine && subvalue) {
+            console.warn('Content: `subvalue` is ignored when `variant` is `ContentVariant.OneLine`.');
+        }
+    }
+    return (<Box flexDirection={BoxFlexDirection.Row} alignItems={alignItems} gap={4} twClassName={twClassName} {...props}>
       {avatar}
-      {/* Title and description Column */}
-      <BoxColumn twClassName="flex-1 min-w-0" bottomAccessory={description ? (<BoxRow twClassName="w-full" startAccessory={descriptionStartAccessory} endAccessory={descriptionEndAccessory} gap={1}>
-              <TextOrChildren textProps={{
+      <BoxColumn twClassName="flex-1 min-w-0" bottomAccessory={showDescription ? (<BoxRow twClassName="w-full" alignItems={alignItems} startAccessory={descriptionStartAccessory} endAccessory={descriptionEndAccessory} gap={1}>
+              <BoxColumn twClassName="flex-1 min-w-0">
+                <TextOrChildren textProps={{
                 variant: TextVariant.BodySm,
                 fontWeight: FontWeight.Medium,
                 color: TextColor.TextAlternative,
                 ...descriptionProps,
             }}>
-                {description}
-              </TextOrChildren>
+                  {description}
+                </TextOrChildren>
+              </BoxColumn>
             </BoxRow>) : null}>
         {title ? (<BoxRow twClassName="w-full" startAccessory={titleStartAccessory} endAccessory={titleEndAccessory} gap={1}>
             <TextOrChildren textProps={{
@@ -37,16 +50,17 @@ export const Content = ({ verticalAlignment = ContentVerticalAlignment.Center, a
             </TextOrChildren>
           </BoxRow>) : null}
       </BoxColumn>
-      {/* Value and subvalue Column */}
-      {value || subvalue ? (<BoxColumn alignItems={BoxAlignItems.End} twClassName="min-w-0" bottomAccessory={subvalue ? (<BoxRow startAccessory={subvalueStartAccessory} endAccessory={subvalueEndAccessory} gap={1}>
-                <TextOrChildren textProps={{
+      {value || showSubvalue ? (<BoxColumn alignItems={BoxAlignItems.End} twClassName="min-w-0" bottomAccessory={showSubvalue ? (<BoxRow alignItems={alignItems} startAccessory={subvalueStartAccessory} endAccessory={subvalueEndAccessory} gap={1}>
+                <BoxColumn twClassName="min-w-0">
+                  <TextOrChildren textProps={{
                     variant: TextVariant.BodySm,
                     fontWeight: FontWeight.Medium,
                     color: TextColor.TextAlternative,
                     ...subvalueProps,
                 }}>
-                  {subvalue}
-                </TextOrChildren>
+                    {subvalue}
+                  </TextOrChildren>
+                </BoxColumn>
               </BoxRow>) : null}>
           {value ? (<BoxRow startAccessory={valueStartAccessory} endAccessory={valueEndAccessory} gap={1}>
               <TextOrChildren textProps={{

package/dist/components/Content/Content.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Content.mjs","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,aAAa,EACb,gBAAgB,EAChB,~~wBAAwB~~,~~EACxB~~,UAAU,EACV,~~gBAAgB,EAChB,~~SAAS,EACT,WAAW,EACZ,uCAAuC;AACxC,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,GAAG,EAAE,yBAAe;AAC7B,OAAO,EAAE,SAAS,EAAE,+BAAqB;AACzC,OAAO,EAAE,MAAM,EAAE,4BAAkB;AACnC,OAAO,EAAE,cAAc,EAAE,oDAA0C;~~AAEnE~~,~~OAAO,EAAE,sBAAsB,EAAE,gCAA4B;AAG7D,~~MAAM,CAAC,MAAM,OAAO,GAA2B,CAAC,EAC9C,~~iBAAiB~~,GAAG,~~wBAAwB~~,CAAC,~~MAAM~~,~~EACnD~~,MAAM,EACN,WAAW,EACX,KAAK,EACL,UAAU,EACV,mBAAmB,EACnB,iBAAiB,EACjB,WAAW,EACX,gBAAgB,EAChB,yBAAyB,EACzB,uBAAuB,EACvB,KAAK,EACL,UAAU,EACV,mBAAmB,EACnB,iBAAiB,EACjB,QAAQ,EACR,aAAa,EACb,sBAAsB,EACtB,oBAAoB,EACpB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,OAAO,~~CACL~~,CAAC,GAAG,~~CACF~~,~~aAAa~~,CAAC,CAAC,~~gBAAgB~~,CAAC,GAAG,CAAC,~~CACpC~~,UAAU,CAAC,CAAC,~~sBAAsB~~,CAAC,~~iBAAiB~~,CAAC,CAAC,~~CACtD~~,~~GAAG~~,CAAC,CAAC,CAAC,CAAC,~~CACP~~,~~WAAW~~,CAAC,CAAC,gBAAgB,CAAC,~~cAAc~~,~~EAAE~~,WAAW,CAAC,CAAC,~~CAC3D~~,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,MAAM,CACP;MAAA,CAAC,~~kCAAkC,CACnC;MAAA,CAAC,~~SAAS,CACR,WAAW,CAAC,gBAAgB,CAC5B,eAAe,CAAC,CACd,~~WAAW~~,CAAC,CAAC,CAAC,~~CACZ~~,CAAC,MAAM,CACL,WAAW,CAAC,QAAQ,CACpB,cAAc,CAAC,CAAC,yBAAyB,CAAC,CAC1C,YAAY,CAAC,CAAC,uBAAuB,CAAC,CACtC,GAAG,CAAC,CAAC,CAAC,CAAC,CAEP;cAAA,CAAC,cAAc,CACb,SAAS,CAAC,CAAC;gBACT,OAAO,EAAE,WAAW,CAAC,MAAM;gBAC3B,UAAU,EAAE,UAAU,CAAC,MAAM;gBAC7B,KAAK,EAAE,SAAS,CAAC,eAAe;gBAChC,GAAG,gBAAgB;aACpB,CAAC,CAEF;~~gBAAA~~,CAAC,WAAW,CACd;~~cAAA~~,EAAE,cAAc,CAClB;YAAA,EAAE,MAAM,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CACT,CAED;QAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CACP,CAAC,MAAM,CACL,WAAW,CAAC,QAAQ,CACpB,cAAc,CAAC,CAAC,mBAAmB,CAAC,CACpC,YAAY,CAAC,CAAC,iBAAiB,CAAC,CAChC,GAAG,CAAC,CAAC,CAAC,CAAC,CAEP;YAAA,CAAC,cAAc,CACb,SAAS,CAAC,CAAC;gBACT,OAAO,EAAE,WAAW,CAAC,MAAM;gBAC3B,UAAU,EAAE,UAAU,CAAC,MAAM;gBAC7B,KAAK,EAAE,SAAS,CAAC,WAAW;gBAC5B,GAAG,UAAU;aACd,CAAC,CAEF;cAAA,CAAC,KAAK,CACR;YAAA,EAAE,cAAc,CAClB;UAAA,EAAE,MAAM,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CACV;MAAA,EAAE,SAAS,CACX;MAAA,CAAC~~,+BAA+B~~,~~CAChC;MAAA,CAAC,~~KAAK,IAAI,~~QAAQ~~,CAAC,CAAC,CAAC,~~CACnB~~,CAAC,SAAS,CACR,UAAU,CAAC,CAAC,aAAa,CAAC,GAAG,CAAC,CAC9B,WAAW,CAAC,SAAS,CACrB,eAAe,CAAC,CACd,~~QAAQ~~,CAAC,CAAC,CAAC,~~CACT~~,CAAC,MAAM,CACL,cAAc,CAAC,CAAC,sBAAsB,CAAC,CACvC,YAAY,CAAC,CAAC,oBAAoB,CAAC,CACnC,GAAG,CAAC,CAAC,CAAC,CAAC,CAEP;gBAAA,CAAC,cAAc,CACb,SAAS,CAAC,CAAC;oBACT,OAAO,EAAE,WAAW,CAAC,MAAM;oBAC3B,UAAU,EAAE,UAAU,CAAC,MAAM;oBAC7B,KAAK,EAAE,SAAS,CAAC,eAAe;oBAChC,GAAG,aAAa;iBACjB,CAAC,CAEF;~~kBAAA~~,CAAC,QAAQ,CACX;~~gBAAA~~,EAAE,cAAc,CAClB;cAAA,EAAE,MAAM,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CACT,CAED;UAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CACP,CAAC,MAAM,CACL,cAAc,CAAC,CAAC,mBAAmB,CAAC,CACpC,YAAY,CAAC,CAAC,iBAAiB,CAAC,CAChC,GAAG,CAAC,CAAC,CAAC,CAAC,CAEP;cAAA,CAAC,cAAc,CACb,SAAS,CAAC,CAAC;oBACT,OAAO,EAAE,WAAW,CAAC,MAAM;oBAC3B,UAAU,EAAE,UAAU,CAAC,MAAM;oBAC7B,KAAK,EAAE,SAAS,CAAC,WAAW;oBAC5B,GAAG,UAAU;iBACd,CAAC,CAEF;gBAAA,CAAC,KAAK,CACR;cAAA,EAAE,cAAc,CAClB;YAAA,EAAE,MAAM,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CACV;QAAA,EAAE,SAAS,CAAC,CACb,CAAC,CAAC,CAAC,IAAI,CACV;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC","sourcesContent":["import {\n BoxAlignItems,\n BoxFlexDirection,\n ~~ContentVerticalAlignment~~,\n FontWeight,\n ~~mergeTwClassName,\n~~ TextColor,\n TextVariant,\n} from '@metamask/design-system-shared';\nimport React from 'react';\n\nimport { Box } from '../Box';\nimport { BoxColumn } from '../BoxColumn';\nimport { BoxRow } from '../BoxRow';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport ~~{ VERTICAL_ALIGNMENT_MAP } from './Content.constants';\nimport~~ type { ContentProps } from './Content.types';\n\nexport const Content: React.FC<ContentProps> = ({\n ~~verticalAlignment~~ = ~~ContentVerticalAlignment~~.~~Center~~,\n avatar,\n twClassName,\n title,\n titleProps,\n titleStartAccessory,\n titleEndAccessory,\n description,\n descriptionProps,\n descriptionStartAccessory,\n descriptionEndAccessory,\n value,\n valueProps,\n valueStartAccessory,\n valueEndAccessory,\n subvalue,\n subvalueProps,\n subvalueStartAccessory,\n subvalueEndAccessory,\n ...props\n}) => {\n return (\n <Box\n flexDirection={BoxFlexDirection.Row}\n alignItems={~~VERTICAL_ALIGNMENT_MAP[verticalAlignment]~~}\n gap={4}\n twClassName={~~mergeTwClassName('min-h-[46px]',~~ twClassName)}\n {...props}\n >\n {avatar}\n ~~{/* Title and description Column /}\n~~ <BoxColumn\n twClassName=\"flex-1 min-w-0\"\n bottomAccessory={\n ~~description~~ ? (\n <BoxRow\n twClassName=\"w-full\"\n startAccessory={descriptionStartAccessory}\n endAccessory={descriptionEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodySm,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextAlternative,\n ...descriptionProps,\n }}\n >\n {description}\n </TextOrChildren>\n </BoxRow>\n ) : null\n }\n >\n {title ? (\n <BoxRow\n twClassName=\"w-full\"\n startAccessory={titleStartAccessory}\n endAccessory={titleEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodyMd,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextDefault,\n ...titleProps,\n }}\n >\n {title}\n </TextOrChildren>\n </BoxRow>\n ) : null}\n </BoxColumn>\n {~~/ Value and subvalue Column */}\n {~~value \|\| ~~subvalue~~ ? (\n <BoxColumn\n alignItems={BoxAlignItems.End}\n twClassName=\"min-w-0\"\n bottomAccessory={\n ~~subvalue~~ ? (\n <BoxRow\n startAccessory={subvalueStartAccessory}\n endAccessory={subvalueEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodySm,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextAlternative,\n ...subvalueProps,\n }}\n >\n {subvalue}\n </TextOrChildren>\n </BoxRow>\n ) : null\n }\n >\n {value ? (\n <BoxRow\n startAccessory={valueStartAccessory}\n endAccessory={valueEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodyMd,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextDefault,\n ...valueProps,\n }}\n >\n {value}\n </TextOrChildren>\n </BoxRow>\n ) : null}\n </BoxColumn>\n ) : null}\n </Box>\n );\n};\n\nContent.displayName = 'Content';\n"]}
1	+ {"version":3,"file":"Content.mjs","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n BoxAlignItems,\n BoxFlexDirection,\n ContentVariant,\n FontWeight,\n TextColor,\n TextVariant,\n} from '@metamask/design-system-shared';\nimport React from 'react';\n\nimport { Box } from '../Box';\nimport { BoxColumn } from '../BoxColumn';\nimport { BoxRow } from '../BoxRow';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport type { ContentProps } from './Content.types';\n\nexport const Content: React.FC<ContentProps> = ({\n variant = ContentVariant.TwoLines,\n avatar,\n twClassName,\n title,\n titleProps,\n titleStartAccessory,\n titleEndAccessory,\n description,\n descriptionProps,\n descriptionStartAccessory,\n descriptionEndAccessory,\n value,\n valueProps,\n valueStartAccessory,\n valueEndAccessory,\n subvalue,\n subvalueProps,\n subvalueStartAccessory,\n subvalueEndAccessory,\n ...props\n}) => {\n const isOneLine = variant === ContentVariant.OneLine;\n const isMultiLine = variant === ContentVariant.MultiLine;\n const showDescription = !isOneLine && description;\n const showSubvalue = !isOneLine && subvalue;\n const alignItems = isMultiLine ? BoxAlignItems.Start : BoxAlignItems.Center;\n\n if (__DEV__) {\n if (isOneLine && description) {\n console.warn(\n 'Content: `description` is ignored when `variant` is `ContentVariant.OneLine`.',\n );\n }\n if (isOneLine && subvalue) {\n console.warn(\n 'Content: `subvalue` is ignored when `variant` is `ContentVariant.OneLine`.',\n );\n }\n }\n\n return (\n <Box\n flexDirection={BoxFlexDirection.Row}\n alignItems={alignItems}\n gap={4}\n twClassName={twClassName}\n {...props}\n >\n {avatar}\n <BoxColumn\n twClassName=\"flex-1 min-w-0\"\n bottomAccessory={\n showDescription ? (\n <BoxRow\n twClassName=\"w-full\"\n alignItems={alignItems}\n startAccessory={descriptionStartAccessory}\n endAccessory={descriptionEndAccessory}\n gap={1}\n >\n <BoxColumn twClassName=\"flex-1 min-w-0\">\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodySm,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextAlternative,\n ...descriptionProps,\n }}\n >\n {description}\n </TextOrChildren>\n </BoxColumn>\n </BoxRow>\n ) : null\n }\n >\n {title ? (\n <BoxRow\n twClassName=\"w-full\"\n startAccessory={titleStartAccessory}\n endAccessory={titleEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodyMd,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextDefault,\n ...titleProps,\n }}\n >\n {title}\n </TextOrChildren>\n </BoxRow>\n ) : null}\n </BoxColumn>\n {value \|\| showSubvalue ? (\n <BoxColumn\n alignItems={BoxAlignItems.End}\n twClassName=\"min-w-0\"\n bottomAccessory={\n showSubvalue ? (\n <BoxRow\n alignItems={alignItems}\n startAccessory={subvalueStartAccessory}\n endAccessory={subvalueEndAccessory}\n gap={1}\n >\n <BoxColumn twClassName=\"min-w-0\">\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodySm,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextAlternative,\n ...subvalueProps,\n }}\n >\n {subvalue}\n </TextOrChildren>\n </BoxColumn>\n </BoxRow>\n ) : null\n }\n >\n {value ? (\n <BoxRow\n startAccessory={valueStartAccessory}\n endAccessory={valueEndAccessory}\n gap={1}\n >\n <TextOrChildren\n textProps={{\n variant: TextVariant.BodyMd,\n fontWeight: FontWeight.Medium,\n color: TextColor.TextDefault,\n ...valueProps,\n }}\n >\n {value}\n </TextOrChildren>\n </BoxRow>\n ) : null}\n </BoxColumn>\n ) : null}\n </Box>\n );\n};\n\nContent.displayName = 'Content';\n"]}

package/dist/components/Content/index.cjs CHANGED Viewed

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Content = exports.ContentVerticalAlignment = void 0;
-var design_system_shared_1 = require("@metamask/design-system-shared");
-Object.defineProperty(exports, "ContentVerticalAlignment", { enumerable: true, get: function () { return design_system_shared_1.ContentVerticalAlignment; } });
+exports.ContentVariant = exports.Content = void 0;
 var Content_1 = require("./Content.cjs");
 Object.defineProperty(exports, "Content", { enumerable: true, get: function () { return Content_1.Content; } });
+var design_system_shared_1 = require("@metamask/design-system-shared");
+Object.defineProperty(exports, "ContentVariant", { enumerable: true, get: function () { return design_system_shared_1.ContentVariant; } });
 //# sourceMappingURL=index.cjs.map

package/dist/components/Content/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/Content/index.ts"],"names":[],"mappings":";;;AAAA,~~uEAA0E~~;~~AAAjE~~,~~gIAAA~~,~~wBAAwB~~,OAAA;~~AACjC~~,~~yCAAoC~~;~~AAA3B~~,~~kGAAA~~,~~OAAO~~,OAAA","sourcesContent":["export { ~~ContentVerticalAlignment~~ } from '~~@metamask/design-system-shared~~';\nexport { ~~Content~~ } from '~~./Content~~';\nexport type { ContentProps } from './Content.types';\n"]}
1	+ {"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/Content/index.ts"],"names":[],"mappings":";;;AAAA,yCAAoC;AAA3B,kGAAA,OAAO,OAAA;AAChB,uEAAgE;AAAvD,sHAAA,cAAc,OAAA","sourcesContent":["export { Content } from './Content';\nexport { ContentVariant } from '@metamask/design-system-shared';\nexport type { ContentProps } from './Content.types';\n"]}

package/dist/components/Content/index.d.cts CHANGED Viewed

@@ -1,4 +1,4 @@
-export { ContentVerticalAlignment } from "@metamask/design-system-shared";
 export { Content } from "./Content.cjs";
+export { ContentVariant } from "@metamask/design-system-shared";
 export type { ContentProps } from "./Content.types.cjs";
 //# sourceMappingURL=index.d.cts.map

package/dist/components/Content/index.d.cts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Content/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,~~wBAAwB~~,EAAE,~~uCAAuC~~;~~AAC1E~~,OAAO,EAAE,~~OAAO~~,EAAE,~~sBAAkB~~;~~AACpC~~,YAAY,EAAE,YAAY,EAAE,4BAAwB"}
1	+ {"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Content/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,sBAAkB;AACpC,OAAO,EAAE,cAAc,EAAE,uCAAuC;AAChE,YAAY,EAAE,YAAY,EAAE,4BAAwB"}

package/dist/components/Content/index.d.mts CHANGED Viewed

@@ -1,4 +1,4 @@
-export { ContentVerticalAlignment } from "@metamask/design-system-shared";
 export { Content } from "./Content.mjs";
+export { ContentVariant } from "@metamask/design-system-shared";
 export type { ContentProps } from "./Content.types.mjs";
 //# sourceMappingURL=index.d.mts.map

package/dist/components/Content/index.d.mts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/Content/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,~~wBAAwB~~,EAAE,~~uCAAuC~~;~~AAC1E~~,OAAO,EAAE,~~OAAO~~,EAAE,~~sBAAkB~~;~~AACpC~~,YAAY,EAAE,YAAY,EAAE,4BAAwB"}
1	+ {"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/Content/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,sBAAkB;AACpC,OAAO,EAAE,cAAc,EAAE,uCAAuC;AAChE,YAAY,EAAE,YAAY,EAAE,4BAAwB"}

package/dist/components/Content/index.mjs CHANGED Viewed

@@ -1,3 +1,3 @@
-export { ContentVerticalAlignment } from "@metamask/design-system-shared";
 export { Content } from "./Content.mjs";
+export { ContentVariant } from "@metamask/design-system-shared";
 //# sourceMappingURL=index.mjs.map

package/dist/components/Content/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/Content/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,~~wBAAwB~~,EAAE,~~uCAAuC~~;~~AAC1E~~,OAAO,EAAE,~~OAAO~~,EAAE,~~sBAAkB~~","sourcesContent":["export { ~~ContentVerticalAlignment~~ } from '~~@metamask/design-system-shared~~';\nexport { ~~Content~~ } from '~~./Content~~';\nexport type { ContentProps } from './Content.types';\n"]}
1	+ {"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/Content/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,sBAAkB;AACpC,OAAO,EAAE,cAAc,EAAE,uCAAuC","sourcesContent":["export { Content } from './Content';\nexport { ContentVariant } from '@metamask/design-system-shared';\nexport type { ContentProps } from './Content.types';\n"]}

package/dist/components/FilterButton/FilterButton.cjs CHANGED Viewed

@@ -26,9 +26,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FilterButton = void 0;
 const design_system_shared_1 = require("@metamask/design-system-shared");
 const react_1 = __importStar(require("react"));
-const ButtonBase_1 = require("../ButtonBase/index.cjs");
+const Button_1 = require("../Button/index.cjs");
 const Icon_1 = require("../Icon/index.cjs");
 const Text_1 = require("../Text/index.cjs");
+const SELECTED_BUTTON_VARIANT_BY_FILTER_VARIANT = {
+    [design_system_shared_1.FilterButtonVariant.Primary]: design_system_shared_1.ButtonVariant.Primary,
+    [design_system_shared_1.FilterButtonVariant.Secondary]: design_system_shared_1.ButtonVariant.Secondary,
+};
 const FilterButton = ({ children, textProps, startIconProps, endIconProps, value, isSelected = false, variant, isLoading = false, size, isFullWidth, twClassName = '', style, onPress, ...buttonBaseRest }) => {
     const filterButtonGroup = (0, react_1.useContext)(design_system_shared_1.FilterButtonGroupContext);
     const usesGroupSelection = filterButtonGroup !== null && value !== undefined;
@@ -38,17 +42,6 @@ const FilterButton = ({ children, textProps, startIconProps, endIconProps, value
     const effectiveIsSelected = usesGroupSelection
         ? filterButtonGroup.value === value
         : isSelected;
-    const getTextAndIconClassName = () => {
-        if (effectiveVariant === design_system_shared_1.FilterButtonVariant.Primary &&
-            effectiveIsSelected) {
-            return 'text-primary-inverse';
-        }
-        if (effectiveVariant === design_system_shared_1.FilterButtonVariant.Secondary &&
-            effectiveIsSelected) {
-            return 'text-default';
-        }
-        return '';
-    };
     const handlePress = (event) => {
         if (usesGroupSelection &&
             filterButtonGroup !== null &&
@@ -58,30 +51,25 @@ const FilterButton = ({ children, textProps, startIconProps, endIconProps, value
         }
         onPress?.(event);
     };
-    return (<ButtonBase_1.ButtonBase {...buttonBaseRest} size={effectiveSize} isFullWidth={effectiveIsFullWidth} isLoading={isLoading} children={children} onPress={handlePress} textProps={{
-            ...(!effectiveIsSelected ? { color: Text_1.TextColor.TextAlternative } : {}),
-            ...textProps,
-        }} startIconProps={{
-            ...(!effectiveIsSelected ? { color: Icon_1.IconColor.IconAlternative } : {}),
-            ...startIconProps,
-        }} endIconProps={{
-            ...(!effectiveIsSelected ? { color: Icon_1.IconColor.IconAlternative } : {}),
-            ...endIconProps,
-        }} twClassName={(pressed) => {
-            if (effectiveVariant === design_system_shared_1.FilterButtonVariant.Primary &&
-                effectiveIsSelected) {
-                return `${pressed || isLoading ? 'bg-icon-default-pressed' : 'bg-icon-default'} ${typeof twClassName === 'function'
-                    ? twClassName(pressed)
-                    : twClassName}`;
-            }
-            if (effectiveVariant === design_system_shared_1.FilterButtonVariant.Secondary &&
-                effectiveIsSelected) {
-                return `${pressed || isLoading ? 'bg-muted-pressed' : 'bg-muted'} ${typeof twClassName === 'function'
-                    ? twClassName(pressed)
-                    : twClassName}`;
-            }
-            return `${pressed || isLoading ? 'bg-pressed' : 'bg-transparent'} border-0 ${typeof twClassName === 'function' ? twClassName(pressed) : twClassName}`;
-        }} textClassName={getTextAndIconClassName} iconClassName={getTextAndIconClassName} style={style}/>);
+    const buttonVariant = effectiveIsSelected
+        ? SELECTED_BUTTON_VARIANT_BY_FILTER_VARIANT[effectiveVariant]
+        : design_system_shared_1.ButtonVariant.Tertiary;
+    return (<Button_1.Button {...buttonBaseRest} variant={buttonVariant} size={effectiveSize} isFullWidth={effectiveIsFullWidth} isLoading={isLoading} children={children} onPress={handlePress} style={style} twClassName={twClassName} textProps={effectiveIsSelected
+            ? textProps
+            : {
+                ...textProps,
+                twClassName: (0, design_system_shared_1.mergeTwClassName)(Text_1.TextColor.TextAlternative, textProps?.twClassName),
+            }} startIconProps={effectiveIsSelected
+            ? startIconProps
+            : {
+                ...startIconProps,
+                twClassName: (0, design_system_shared_1.mergeTwClassName)(Icon_1.IconColor.IconAlternative, startIconProps?.twClassName),
+            }} endIconProps={effectiveIsSelected
+            ? endIconProps
+            : {
+                ...endIconProps,
+                twClassName: (0, design_system_shared_1.mergeTwClassName)(Icon_1.IconColor.IconAlternative, endIconProps?.twClassName),
+            }}/>);
 };
 exports.FilterButton = FilterButton;
 exports.FilterButton.displayName = 'FilterButton';

package/dist/components/FilterButton/FilterButton.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FilterButton.cjs","sourceRoot":"","sources":["../../../src/components/FilterButton/FilterButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,~~yEAIwC~~;AACxC,+CAA0C;AAG1C,~~wDAA2C~~;~~AAC3C~~,4CAAoC;AACpC,4CAAoC;~~AAI7B~~,MAAM,YAAY,GAAG,CAAC,EAC3B,QAAQ,EACR,SAAS,EACT,cAAc,EACd,YAAY,EACZ,KAAK,EACL,UAAU,GAAG,KAAK,EAClB,OAAO,EACP,SAAS,GAAG,KAAK,EACjB,IAAI,EACJ,WAAW,EACX,WAAW,GAAG,EAAE,EAChB,KAAK,EACL,OAAO,EACP,GAAG,cAAc,EACC,EAAE,EAAE;IACtB,MAAM,iBAAiB,GAAG,IAAA,kBAAU,EAAC,+CAAwB,CAAC,CAAC;IAC/D,MAAM,kBAAkB,GAAG,iBAAiB,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,CAAC;IAE7E,MAAM,gBAAgB,GACpB,OAAO,IAAI,iBAAiB,EAAE,OAAO,IAAI,0CAAmB,CAAC,OAAO,CAAC;IAEvE,MAAM,aAAa,GAAG,IAAI,IAAI,iBAAiB,EAAE,IAAI,IAAI,uCAAgB,CAAC,EAAE,CAAC;IAE7E,MAAM,oBAAoB,GACxB,WAAW,IAAI,iBAAiB,EAAE,YAAY,IAAI,KAAK,CAAC;IAE1D,MAAM,mBAAmB,GAAG,kBAAkB;QAC5C,CAAC,CAAC,iBAAiB,CAAC,KAAK,KAAK,KAAK;QACnC,CAAC,CAAC,UAAU,CAAC;IAEf,MAAM,uBAAuB,GAAG,GAAG,EAAE;QACnC,IACE,gBAAgB,KAAK,0CAAmB,CAAC,OAAO;YAChD,mBAAmB,EACnB;YACA,OAAO,sBAAsB,CAAC;SAC/B;QACD,IACE,gBAAgB,KAAK,0CAAmB,CAAC,SAAS;YAClD,mBAAmB,EACnB;YACA,OAAO,cAAc,CAAC;SACvB;QACD,OAAO,EAAE,CAAC;IACZ,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,KAA4B,EAAE,EAAE;QACnD,IACE,kBAAkB;YAClB,iBAAiB,KAAK,IAAI;YAC1B,KAAK,KAAK,SAAS;YACnB,iBAAiB,CAAC,KAAK,KAAK,KAAK,EACjC;YACA,iBAAiB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;SACnC;QACD,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,CAAC;IAEF,~~OAAO~~,~~CACL~~,~~CAAC~~,~~uBAAU~~,~~CACT~~,~~IAAI,cAAc,~~CAAC,~~CACnB~~,~~IAAI,~~CAAC,~~CAAC~~,~~aAAa,~~CAAC,~~CACpB,WAAW,~~CAAC,CAAC,~~oBAAoB~~,CAAC,~~CAClC~~,~~SAAS,~~CAAC,~~CAAC~~,~~SAAS~~,CAAC,~~CACrB~~,~~QAAQ~~,~~CAAC~~,~~CAAC~~,~~QAAQ,~~CAAC,CACnB,OAAO,CAAC,CAAC,~~WAAW~~,CAAC,~~CACrB~~,~~SAAS~~,CAAC,CAAC~~;YACT~~,~~GAAG~~,CAAC,~~CAAC~~,~~mBAAmB~~,CAAC,CAAC,~~CAAC~~,~~EAAE,KAAK,EAAE,gBAAS,~~CAAC,~~eAAe~~,~~EAAE~~,CAAC,CAAC,~~CAAC,EAAE,CAAC;YACrE,GAAG,~~SAAS~~;SACb~~,CAAC,~~CACF~~,~~cAAc~~,CAAC,CAAC~~;YACd~~,~~GAAG~~,CAAC,~~CAAC~~,~~mBAAmB~~,CAAC,CAAC,CAAC,~~EAAE~~,KAAK,~~EAAE~~,~~gBAAS,~~CAAC,~~eAAe~~,~~EAAE,~~CAAC,~~CAAC~~,~~CAAC~~,~~EAAE,~~CAAC~~;YACrE~~,~~GAAG,cAAc;SAClB,~~CAAC,~~CACF~~,~~YAAY,~~CAAC,~~CAAC;YACZ~~,~~GAAG~~,CAAC,~~CAAC~~,mBAAmB,CAAC,CAAC,~~CAAC~~,~~EAAE,KAAK,EAAE,gBAAS,~~CAAC,~~eAAe,EAAE,~~CAAC~~,CAAC,CAAC,EAAE,CAAC~~;~~YACrE~~,GAAG,~~YAAY~~;~~SAChB~~,~~CAAC,CACF,~~WAAW,~~CAAC,CAAC,CAAC,OAAO,~~EAAE,~~EAAE;YACvB~~,~~IACE~~,~~gBAAgB~~,~~KAAK~~,~~0CAAmB,~~CAAC,~~OAAO;gBAChD~~,~~mBAAmB~~,~~EACnB;gBACA,OAAO,GAAG,OAAO,IAAI,~~SAAS,~~CAAC~~,~~CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,iBAAiB,IAC5E,OAAO,~~WAAW,~~KAAK,UAAU~~;~~oBAC/B~~,~~CAAC~~,~~CAAC~~,~~WAAW~~,CAAC,~~OAAO~~,~~CAAC~~;~~oBACtB~~,CAAC,CAAC,~~WACN~~,~~EAAE,~~CAAC~~;aACJ;YAED~~,~~IACE,gBAAgB,KAAK,0CAAmB,~~CAAC~~,SAAS~~;~~gBAClD~~,~~mBAAmB~~,~~EACnB~~;~~gBACA~~,~~OAAO~~,~~GAAG~~,~~OAAO~~,~~IAAI~~,~~SAAS~~,~~CAAC~~,CAAC,~~CAAC~~,~~kBAAkB~~,~~CAAC~~,~~CAAC~~,~~CAAC,UAAU,IAC9D,OAAO,~~WAAW,~~KAAK,UAAU~~;~~oBAC/B~~,~~CAAC~~,~~CAAC~~,~~WAAW~~,CAAC,~~OAAO~~,~~CAAC~~;~~oBACtB~~,CAAC,CAAC,~~WACN~~,~~EAAE~~,CAAC;~~aACJ;YAED~~,~~OAAO,~~GAAG,~~OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,~~YAAY,~~CAAC,CAAC,CAAC,gBAAgB,aAC9D,OAAO,~~WAAW,~~KAAK~~,~~UAAU~~,~~CAAC~~,~~CAAC~~,~~CAAC~~,~~WAAW,~~CAAC,~~OAAO~~,~~CAAC~~,~~CAAC~~,~~CAAC~~,~~CAAC~~,~~WAC7D,EAAE,CAAC~~;~~QACL~~,~~CAAC~~,~~CAAC~~,~~CACF,aAAa,CAAC,CAAC,uBAAuB,CAAC,CACvC,aAAa,CAAC,CAAC,uBAAuB,CAAC,CACvC,KAAK,CAAC,CAAC,KAAK,CAAC,EACb,~~CACH,CAAC;AACJ,CAAC,CAAC;~~AA/GW~~,QAAA,YAAY,~~gBA+GvB~~;AAEF,oBAAY,CAAC,WAAW,GAAG,cAAc,CAAC","sourcesContent":["import {\n FilterButtonSize,\n FilterButtonVariant,\n FilterButtonGroupContext,\n} from '@metamask/design-system-shared';\nimport React, { useContext } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\n\nimport { ~~ButtonBase~~ } from '../~~ButtonBase~~';\nimport { IconColor } from '../Icon';\nimport { TextColor } from '../Text';\n\nimport type { FilterButtonProps } from './FilterButton.types';\n\nexport const FilterButton = ({\n children,\n textProps,\n startIconProps,\n endIconProps,\n value,\n isSelected = false,\n variant,\n isLoading = false,\n size,\n isFullWidth,\n twClassName = '',\n style,\n onPress,\n ...buttonBaseRest\n}: FilterButtonProps) => {\n const filterButtonGroup = useContext(FilterButtonGroupContext);\n const usesGroupSelection = filterButtonGroup !== null && value !== undefined;\n\n const effectiveVariant =\n variant ?? filterButtonGroup?.variant ?? FilterButtonVariant.Primary;\n\n const effectiveSize = size ?? filterButtonGroup?.size ?? FilterButtonSize.Sm;\n\n const effectiveIsFullWidth =\n isFullWidth ?? filterButtonGroup?.isEqualWidth ?? false;\n\n const effectiveIsSelected = usesGroupSelection\n ? filterButtonGroup.value === value\n : isSelected;\n\n const getTextAndIconClassName = () => {\n if (\n effectiveVariant === FilterButtonVariant.Primary &&\n effectiveIsSelected\n ) {\n return 'text-primary-inverse';\n }\n if (\n effectiveVariant === FilterButtonVariant.Secondary &&\n effectiveIsSelected\n ) {\n return 'text-default';\n }\n return '';\n };\n\n const handlePress = (event: GestureResponderEvent) => {\n if (\n usesGroupSelection &&\n filterButtonGroup !== null &&\n value !== undefined &&\n filterButtonGroup.value !== value\n ) {\n filterButtonGroup.onChange(value);\n }\n onPress?.(event);\n };\n\n return (\n <~~ButtonBase~~\n {...buttonBaseRest}\n size={effectiveSize}\n isFullWidth={effectiveIsFullWidth}\n isLoading={isLoading}\n children={children}\n onPress={handlePress}\n ~~textProps~~={{\n ~~...(!effectiveIsSelected ?~~ { ~~color: TextColor.TextAlternative~~ } ~~: {}),\n ...textProps,\n }}~~\n ~~startIconProps~~={{\n ~~...(!~~effectiveIsSelected ? ~~{ color~~: ~~IconColor.IconAlternative } :~~ {~~}),\~~n ...~~startIconProps~~,\n }}\n ~~endIconProps={{\n ...(!effectiveIsSelected ? { color: IconColor~~.~~IconAlternative } : {})~~,\n ~~...endIconProps~~,\n }}\n ~~twClassName~~={~~(pressed) => {~~\n ~~if (~~\n ~~effectiveVariant~~ ~~=== FilterButtonVariant.Primary &&\n effectiveIsSelected~~\n ~~) {\n~~ ~~return `${pressed \|\| isLoading ? 'bg-icon-default-pressed'~~ : ~~'bg-icon-default'} $~~{\n ~~typeof twClassName === 'function'\~~n ? ~~twClassName~~(~~pressed)~~\n : twClassName\n }~~`;\~~n }\n\n ~~if (~~\n ~~effectiveVariant~~ ~~=== FilterButtonVariant.Secondary &&\n effectiveIsSelected~~\n ~~) {\n~~ ~~return `${pressed \|\| isLoading ? 'bg-muted-pressed'~~ : ~~'bg-muted'} $~~{\n ~~typeof twClassName === 'function'\n~~ ~~? twClassName(pressed)\~~n : twClassName~~\n }`;\n }\n\n return `${pressed \|\| isLoading ? 'bg-pressed'~~ : ~~'bg-transparent'} border-0 ${\n typeof twClassName === 'function' ? twClassName~~(~~pressed) : twClassName~~\n ~~}`;\~~n ~~}}\~~n ~~textClassName={getTextAndIconClassName}\~~n ~~iconClassName={getTextAndIconClassName~~}\n ~~style={style~~}\n />\n );\n};\n\nFilterButton.displayName = 'FilterButton';\n"]}
1	+ {"version":3,"file":"FilterButton.cjs","sourceRoot":"","sources":["../../../src/components/FilterButton/FilterButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ButtonVariant,\n FilterButtonSize,\n FilterButtonVariant,\n FilterButtonGroupContext,\n mergeTwClassName,\n} from '@metamask/design-system-shared';\nimport React, { useContext } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\n\nimport { Button } from '../Button';\nimport { IconColor } from '../Icon';\nimport { TextColor } from '../Text';\n\nimport type { FilterButtonProps } from './FilterButton.types';\n\nconst SELECTED_BUTTON_VARIANT_BY_FILTER_VARIANT: Record<\n FilterButtonVariant,\n ButtonVariant\n> = {\n [FilterButtonVariant.Primary]: ButtonVariant.Primary,\n [FilterButtonVariant.Secondary]: ButtonVariant.Secondary,\n};\n\nexport const FilterButton = ({\n children,\n textProps,\n startIconProps,\n endIconProps,\n value,\n isSelected = false,\n variant,\n isLoading = false,\n size,\n isFullWidth,\n twClassName = '',\n style,\n onPress,\n ...buttonBaseRest\n}: FilterButtonProps) => {\n const filterButtonGroup = useContext(FilterButtonGroupContext);\n const usesGroupSelection = filterButtonGroup !== null && value !== undefined;\n\n const effectiveVariant =\n variant ?? filterButtonGroup?.variant ?? FilterButtonVariant.Primary;\n\n const effectiveSize = size ?? filterButtonGroup?.size ?? FilterButtonSize.Sm;\n\n const effectiveIsFullWidth =\n isFullWidth ?? filterButtonGroup?.isEqualWidth ?? false;\n\n const effectiveIsSelected = usesGroupSelection\n ? filterButtonGroup.value === value\n : isSelected;\n\n const handlePress = (event: GestureResponderEvent) => {\n if (\n usesGroupSelection &&\n filterButtonGroup !== null &&\n value !== undefined &&\n filterButtonGroup.value !== value\n ) {\n filterButtonGroup.onChange(value);\n }\n onPress?.(event);\n };\n\n const buttonVariant = effectiveIsSelected\n ? SELECTED_BUTTON_VARIANT_BY_FILTER_VARIANT[effectiveVariant]\n : ButtonVariant.Tertiary;\n\n return (\n <Button\n {...buttonBaseRest}\n variant={buttonVariant}\n size={effectiveSize}\n isFullWidth={effectiveIsFullWidth}\n isLoading={isLoading}\n children={children}\n onPress={handlePress}\n style={style}\n twClassName={twClassName}\n textProps={\n effectiveIsSelected\n ? textProps\n : {\n ...textProps,\n twClassName: mergeTwClassName(\n TextColor.TextAlternative,\n textProps?.twClassName,\n ),\n }\n }\n startIconProps={\n effectiveIsSelected\n ? startIconProps\n : {\n ...startIconProps,\n twClassName: mergeTwClassName(\n IconColor.IconAlternative,\n startIconProps?.twClassName,\n ),\n }\n }\n endIconProps={\n effectiveIsSelected\n ? endIconProps\n : {\n ...endIconProps,\n twClassName: mergeTwClassName(\n IconColor.IconAlternative,\n endIconProps?.twClassName,\n ),\n }\n }\n />\n );\n};\n\nFilterButton.displayName = 'FilterButton';\n"]}

package/dist/components/FilterButton/FilterButton.d.cts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FilterButton.d.cts","sourceRoot":"","sources":["../../../src/components/FilterButton/FilterButton.tsx"],"names":[],"mappings":"~~AAKA~~,OAAO,KAAqB,cAAc;AAO1C,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;~~AAE9D~~,eAAO,MAAM,YAAY;sKAetB,iBAAiB;;~~CAgGnB~~,CAAC"}
1	+ {"version":3,"file":"FilterButton.d.cts","sourceRoot":"","sources":["../../../src/components/FilterButton/FilterButton.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAqB,cAAc;AAO1C,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;AAU9D,eAAO,MAAM,YAAY;sKAetB,iBAAiB;;CA8EnB,CAAC"}

package/dist/components/FilterButton/FilterButton.d.mts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FilterButton.d.mts","sourceRoot":"","sources":["../../../src/components/FilterButton/FilterButton.tsx"],"names":[],"mappings":"~~AAKA~~,OAAO,KAAqB,cAAc;AAO1C,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;~~AAE9D~~,eAAO,MAAM,YAAY;sKAetB,iBAAiB;;~~CAgGnB~~,CAAC"}
1	+ {"version":3,"file":"FilterButton.d.mts","sourceRoot":"","sources":["../../../src/components/FilterButton/FilterButton.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAqB,cAAc;AAO1C,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;AAU9D,eAAO,MAAM,YAAY;sKAetB,iBAAiB;;CA8EnB,CAAC"}

package/dist/components/FilterButton/FilterButton.mjs CHANGED Viewed

@@ -4,12 +4,16 @@ function $importDefault(module) {
     }
     return module;
 }
-import { FilterButtonSize, FilterButtonVariant, FilterButtonGroupContext } from "@metamask/design-system-shared";
+import { ButtonVariant, FilterButtonSize, FilterButtonVariant, FilterButtonGroupContext, mergeTwClassName } from "@metamask/design-system-shared";
 import $React, { useContext } from "react";
 const React = $importDefault($React);
-import { ButtonBase } from "../ButtonBase/index.mjs";
+import { Button } from "../Button/index.mjs";
 import { IconColor } from "../Icon/index.mjs";
 import { TextColor } from "../Text/index.mjs";
+const SELECTED_BUTTON_VARIANT_BY_FILTER_VARIANT = {
+    [FilterButtonVariant.Primary]: ButtonVariant.Primary,
+    [FilterButtonVariant.Secondary]: ButtonVariant.Secondary,
+};
 export const FilterButton = ({ children, textProps, startIconProps, endIconProps, value, isSelected = false, variant, isLoading = false, size, isFullWidth, twClassName = '', style, onPress, ...buttonBaseRest }) => {
     const filterButtonGroup = useContext(FilterButtonGroupContext);
     const usesGroupSelection = filterButtonGroup !== null && value !== undefined;
@@ -19,17 +23,6 @@ export const FilterButton = ({ children, textProps, startIconProps, endIconProps
     const effectiveIsSelected = usesGroupSelection
         ? filterButtonGroup.value === value
         : isSelected;
-    const getTextAndIconClassName = () => {
-        if (effectiveVariant === FilterButtonVariant.Primary &&
-            effectiveIsSelected) {
-            return 'text-primary-inverse';
-        }
-        if (effectiveVariant === FilterButtonVariant.Secondary &&
-            effectiveIsSelected) {
-            return 'text-default';
-        }
-        return '';
-    };
     const handlePress = (event) => {
         if (usesGroupSelection &&
             filterButtonGroup !== null &&
@@ -39,30 +32,25 @@ export const FilterButton = ({ children, textProps, startIconProps, endIconProps
         }
         onPress?.(event);
     };
-    return (<ButtonBase {...buttonBaseRest} size={effectiveSize} isFullWidth={effectiveIsFullWidth} isLoading={isLoading} children={children} onPress={handlePress} textProps={{
-            ...(!effectiveIsSelected ? { color: TextColor.TextAlternative } : {}),
-            ...textProps,
-        }} startIconProps={{
-            ...(!effectiveIsSelected ? { color: IconColor.IconAlternative } : {}),
-            ...startIconProps,
-        }} endIconProps={{
-            ...(!effectiveIsSelected ? { color: IconColor.IconAlternative } : {}),
-            ...endIconProps,
-        }} twClassName={(pressed) => {
-            if (effectiveVariant === FilterButtonVariant.Primary &&
-                effectiveIsSelected) {
-                return `${pressed || isLoading ? 'bg-icon-default-pressed' : 'bg-icon-default'} ${typeof twClassName === 'function'
-                    ? twClassName(pressed)
-                    : twClassName}`;
-            }
-            if (effectiveVariant === FilterButtonVariant.Secondary &&
-                effectiveIsSelected) {
-                return `${pressed || isLoading ? 'bg-muted-pressed' : 'bg-muted'} ${typeof twClassName === 'function'
-                    ? twClassName(pressed)
-                    : twClassName}`;
-            }
-            return `${pressed || isLoading ? 'bg-pressed' : 'bg-transparent'} border-0 ${typeof twClassName === 'function' ? twClassName(pressed) : twClassName}`;
-        }} textClassName={getTextAndIconClassName} iconClassName={getTextAndIconClassName} style={style}/>);
+    const buttonVariant = effectiveIsSelected
+        ? SELECTED_BUTTON_VARIANT_BY_FILTER_VARIANT[effectiveVariant]
+        : ButtonVariant.Tertiary;
+    return (<Button {...buttonBaseRest} variant={buttonVariant} size={effectiveSize} isFullWidth={effectiveIsFullWidth} isLoading={isLoading} children={children} onPress={handlePress} style={style} twClassName={twClassName} textProps={effectiveIsSelected
+            ? textProps
+            : {
+                ...textProps,
+                twClassName: mergeTwClassName(TextColor.TextAlternative, textProps?.twClassName),
+            }} startIconProps={effectiveIsSelected
+            ? startIconProps
+            : {
+                ...startIconProps,
+                twClassName: mergeTwClassName(IconColor.IconAlternative, startIconProps?.twClassName),
+            }} endIconProps={effectiveIsSelected
+            ? endIconProps
+            : {
+                ...endIconProps,
+                twClassName: mergeTwClassName(IconColor.IconAlternative, endIconProps?.twClassName),
+            }}/>);
 };
 FilterButton.displayName = 'FilterButton';
 //# sourceMappingURL=FilterButton.mjs.map

package/dist/components/FilterButton/FilterButton.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FilterButton.mjs","sourceRoot":"","sources":["../../../src/components/FilterButton/FilterButton.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,gBAAgB,EAChB,mBAAmB,EACnB,wBAAwB,~~EACzB~~,uCAAuC;AACxC,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAG1C,OAAO,EAAE,~~UAAU~~,EAAE,~~gCAAsB~~;~~AAC3C~~,OAAO,EAAE,SAAS,EAAE,0BAAgB;AACpC,OAAO,EAAE,SAAS,EAAE,0BAAgB;AAIpC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,QAAQ,EACR,SAAS,EACT,cAAc,EACd,YAAY,EACZ,KAAK,EACL,UAAU,GAAG,KAAK,EAClB,OAAO,EACP,SAAS,GAAG,KAAK,EACjB,IAAI,EACJ,WAAW,EACX,WAAW,GAAG,EAAE,EAChB,KAAK,EACL,OAAO,EACP,GAAG,cAAc,EACC,EAAE,EAAE;IACtB,MAAM,iBAAiB,GAAG,UAAU,CAAC,wBAAwB,CAAC,CAAC;IAC/D,MAAM,kBAAkB,GAAG,iBAAiB,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,CAAC;IAE7E,MAAM,gBAAgB,GACpB,OAAO,IAAI,iBAAiB,EAAE,OAAO,IAAI,mBAAmB,CAAC,OAAO,CAAC;IAEvE,MAAM,aAAa,GAAG,IAAI,IAAI,iBAAiB,EAAE,IAAI,IAAI,gBAAgB,CAAC,EAAE,CAAC;IAE7E,MAAM,oBAAoB,GACxB,WAAW,IAAI,iBAAiB,EAAE,YAAY,IAAI,KAAK,CAAC;IAE1D,MAAM,mBAAmB,GAAG,kBAAkB;QAC5C,CAAC,CAAC,iBAAiB,CAAC,KAAK,KAAK,KAAK;QACnC,CAAC,CAAC,UAAU,CAAC;IAEf,MAAM,uBAAuB,GAAG,GAAG,EAAE;QACnC,IACE,gBAAgB,KAAK,mBAAmB,CAAC,OAAO;YAChD,mBAAmB,EACnB;YACA,OAAO,sBAAsB,CAAC;SAC/B;QACD,IACE,gBAAgB,KAAK,mBAAmB,CAAC,SAAS;YAClD,mBAAmB,EACnB;YACA,OAAO,cAAc,CAAC;SACvB;QACD,OAAO,EAAE,CAAC;IACZ,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,KAA4B,EAAE,EAAE;QACnD,IACE,kBAAkB;YAClB,iBAAiB,KAAK,IAAI;YAC1B,KAAK,KAAK,SAAS;YACnB,iBAAiB,CAAC,KAAK,KAAK,KAAK,EACjC;YACA,iBAAiB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;SACnC;QACD,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,CAAC;IAEF,~~OAAO~~,~~CACL~~,~~CAAC~~,~~UAAU~~,~~CACT~~,~~IAAI,cAAc,~~CAAC,~~CACnB~~,~~IAAI,~~CAAC,~~CAAC~~,~~aAAa,~~CAAC,~~CACpB,WAAW,~~CAAC,CAAC,~~oBAAoB~~,CAAC,~~CAClC~~,~~SAAS,~~CAAC,~~CAAC~~,~~SAAS~~,CAAC,~~CACrB~~,~~QAAQ~~,~~CAAC~~,~~CAAC~~,~~QAAQ,~~CAAC,CACnB,OAAO,CAAC,CAAC,~~WAAW~~,CAAC,~~CACrB~~,~~SAAS~~,CAAC,CAAC~~;YACT~~,~~GAAG~~,CAAC,~~CAAC~~,~~mBAAmB~~,CAAC,CAAC,CAAC,~~EAAE~~,~~KAAK,EAAE,~~SAAS,CAAC,~~eAAe,EAAE,~~CAAC,~~CAAC,CAAC,EAAE,CAAC;YACrE,GAAG,~~SAAS~~;SACb~~,CAAC,~~CACF~~,~~cAAc~~,CAAC,CAAC~~;YACd~~,~~GAAG~~,CAAC,~~CAAC~~,~~mBAAmB~~,CAAC,CAAC,CAAC,~~EAAE~~,KAAK,~~EAAE~~,~~SAAS,~~CAAC,~~eAAe~~,~~EAAE,~~CAAC,~~CAAC~~,~~CAAC~~,~~EAAE,~~CAAC~~;YACrE~~,~~GAAG,cAAc;SAClB,~~CAAC,~~CACF~~,~~YAAY,~~CAAC,~~CAAC;YACZ~~,~~GAAG~~,CAAC,~~CAAC~~,mBAAmB,CAAC,CAAC,~~CAAC,EAAE,KAAK,EAAE,~~SAAS,CAAC,~~eAAe,EAAE,~~CAAC~~,CAAC,CAAC,EAAE,CAAC~~;~~YACrE~~,GAAG,~~YAAY~~;~~SAChB~~,~~CAAC,CACF,~~WAAW,~~CAAC,CAAC,CAAC,OAAO,~~EAAE,~~EAAE;YACvB,IACE,~~gBAAgB,~~KAAK~~,~~mBAAmB~~,CAAC,~~OAAO;gBAChD~~,~~mBAAmB~~,~~EACnB;gBACA,OAAO,GAAG,OAAO,IAAI,~~SAAS,~~CAAC~~,~~CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,iBAAiB,IAC5E,OAAO,~~WAAW,~~KAAK,UAAU~~;~~oBAC/B~~,~~CAAC~~,~~CAAC~~,~~WAAW~~,CAAC,~~OAAO~~,~~CAAC~~;~~oBACtB~~,CAAC,CAAC,~~WACN~~,~~EAAE,~~CAAC~~;aACJ;YAED~~,~~IACE,gBAAgB,KAAK,mBAAmB,~~CAAC~~,SAAS~~;~~gBAClD~~,~~mBAAmB~~,~~EACnB~~;~~gBACA~~,~~OAAO~~,~~GAAG~~,~~OAAO~~,~~IAAI~~,SAAS,CAAC,~~CAAC~~,~~CAAC~~,~~kBAAkB~~,~~CAAC~~,~~CAAC,CAAC,UAAU,IAC9D,OAAO,~~WAAW,~~KAAK,UAAU~~;~~oBAC/B~~,~~CAAC~~,~~CAAC~~,~~WAAW~~,CAAC,~~OAAO~~,~~CAAC~~;~~oBACtB~~,CAAC,CAAC,~~WACN~~,~~EAAE~~,CAAC;~~aACJ;YAED~~,~~OAAO,~~GAAG,~~OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,~~YAAY,~~CAAC~~,~~CAAC~~,~~CAAC,~~gBAAgB,~~aAC9D~~,~~OAAO~~,~~WAAW~~,~~KAAK~~,~~UAAU~~,~~CAAC~~,~~CAAC~~,~~CAAC,~~WAAW,~~CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,WAC7D,EAAE,CAAC~~;~~QACL~~,~~CAAC~~,~~CAAC~~,~~CACF,aAAa,CAAC,CAAC,uBAAuB,CAAC,CACvC,aAAa,CAAC,CAAC,uBAAuB,CAAC,CACvC,KAAK,CAAC,CAAC,KAAK,CAAC,EACb,~~CACH,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC","sourcesContent":["import {\n FilterButtonSize,\n FilterButtonVariant,\n FilterButtonGroupContext,\n} from '@metamask/design-system-shared';\nimport React, { useContext } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\n\nimport { ~~ButtonBase~~ } from '../~~ButtonBase~~';\nimport { IconColor } from '../Icon';\nimport { TextColor } from '../Text';\n\nimport type { FilterButtonProps } from './FilterButton.types';\n\nexport const FilterButton = ({\n children,\n textProps,\n startIconProps,\n endIconProps,\n value,\n isSelected = false,\n variant,\n isLoading = false,\n size,\n isFullWidth,\n twClassName = '',\n style,\n onPress,\n ...buttonBaseRest\n}: FilterButtonProps) => {\n const filterButtonGroup = useContext(FilterButtonGroupContext);\n const usesGroupSelection = filterButtonGroup !== null && value !== undefined;\n\n const effectiveVariant =\n variant ?? filterButtonGroup?.variant ?? FilterButtonVariant.Primary;\n\n const effectiveSize = size ?? filterButtonGroup?.size ?? FilterButtonSize.Sm;\n\n const effectiveIsFullWidth =\n isFullWidth ?? filterButtonGroup?.isEqualWidth ?? false;\n\n const effectiveIsSelected = usesGroupSelection\n ? filterButtonGroup.value === value\n : isSelected;\n\n const getTextAndIconClassName = () => {\n if (\n effectiveVariant === FilterButtonVariant.Primary &&\n effectiveIsSelected\n ) {\n return 'text-primary-inverse';\n }\n if (\n effectiveVariant === FilterButtonVariant.Secondary &&\n effectiveIsSelected\n ) {\n return 'text-default';\n }\n return '';\n };\n\n const handlePress = (event: GestureResponderEvent) => {\n if (\n usesGroupSelection &&\n filterButtonGroup !== null &&\n value !== undefined &&\n filterButtonGroup.value !== value\n ) {\n filterButtonGroup.onChange(value);\n }\n onPress?.(event);\n };\n\n return (\n <~~ButtonBase~~\n {...buttonBaseRest}\n size={effectiveSize}\n isFullWidth={effectiveIsFullWidth}\n isLoading={isLoading}\n children={children}\n onPress={handlePress}\n ~~textProps~~={{\n ~~...(!effectiveIsSelected ?~~ { ~~color: TextColor.TextAlternative~~ } ~~: {}),\n ...textProps,\n }}~~\n ~~startIconProps~~={{\n ~~...(!~~effectiveIsSelected ? ~~{ color~~: ~~IconColor.IconAlternative } :~~ {~~}),\~~n ...~~startIconProps~~,\n }}\n ~~endIconProps={{\n ...(!effectiveIsSelected ? { color: IconColor~~.~~IconAlternative } : {})~~,\n ~~...endIconProps~~,\n }}\n ~~twClassName~~={~~(pressed) => {~~\n ~~if (~~\n ~~effectiveVariant~~ ~~=== FilterButtonVariant.Primary &&\n effectiveIsSelected~~\n ~~) {\n~~ ~~return `${pressed \|\| isLoading ? 'bg-icon-default-pressed'~~ : ~~'bg-icon-default'} $~~{\n ~~typeof twClassName === 'function'\~~n ? ~~twClassName~~(~~pressed)~~\n : twClassName\n }~~`;\~~n }\n\n ~~if (~~\n ~~effectiveVariant~~ ~~=== FilterButtonVariant.Secondary &&\n effectiveIsSelected~~\n ~~) {\n~~ ~~return `${pressed \|\| isLoading ? 'bg-muted-pressed'~~ : ~~'bg-muted'} $~~{\n ~~typeof twClassName === 'function'\n~~ ~~? twClassName(pressed)\~~n : twClassName~~\n }`;\n }\n\n return `${pressed \|\| isLoading ? 'bg-pressed'~~ : ~~'bg-transparent'} border-0 ${\n typeof twClassName === 'function' ? twClassName~~(~~pressed) : twClassName~~\n ~~}`;\~~n ~~}}\~~n ~~textClassName={getTextAndIconClassName}\~~n ~~iconClassName={getTextAndIconClassName~~}\n ~~style={style~~}\n />\n );\n};\n\nFilterButton.displayName = 'FilterButton';\n"]}
1	+ {"version":3,"file":"FilterButton.mjs","sourceRoot":"","sources":["../../../src/components/FilterButton/FilterButton.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ButtonVariant,\n FilterButtonSize,\n FilterButtonVariant,\n FilterButtonGroupContext,\n mergeTwClassName,\n} from '@metamask/design-system-shared';\nimport React, { useContext } from 'react';\nimport type { GestureResponderEvent } from 'react-native';\n\nimport { Button } from '../Button';\nimport { IconColor } from '../Icon';\nimport { TextColor } from '../Text';\n\nimport type { FilterButtonProps } from './FilterButton.types';\n\nconst SELECTED_BUTTON_VARIANT_BY_FILTER_VARIANT: Record<\n FilterButtonVariant,\n ButtonVariant\n> = {\n [FilterButtonVariant.Primary]: ButtonVariant.Primary,\n [FilterButtonVariant.Secondary]: ButtonVariant.Secondary,\n};\n\nexport const FilterButton = ({\n children,\n textProps,\n startIconProps,\n endIconProps,\n value,\n isSelected = false,\n variant,\n isLoading = false,\n size,\n isFullWidth,\n twClassName = '',\n style,\n onPress,\n ...buttonBaseRest\n}: FilterButtonProps) => {\n const filterButtonGroup = useContext(FilterButtonGroupContext);\n const usesGroupSelection = filterButtonGroup !== null && value !== undefined;\n\n const effectiveVariant =\n variant ?? filterButtonGroup?.variant ?? FilterButtonVariant.Primary;\n\n const effectiveSize = size ?? filterButtonGroup?.size ?? FilterButtonSize.Sm;\n\n const effectiveIsFullWidth =\n isFullWidth ?? filterButtonGroup?.isEqualWidth ?? false;\n\n const effectiveIsSelected = usesGroupSelection\n ? filterButtonGroup.value === value\n : isSelected;\n\n const handlePress = (event: GestureResponderEvent) => {\n if (\n usesGroupSelection &&\n filterButtonGroup !== null &&\n value !== undefined &&\n filterButtonGroup.value !== value\n ) {\n filterButtonGroup.onChange(value);\n }\n onPress?.(event);\n };\n\n const buttonVariant = effectiveIsSelected\n ? SELECTED_BUTTON_VARIANT_BY_FILTER_VARIANT[effectiveVariant]\n : ButtonVariant.Tertiary;\n\n return (\n <Button\n {...buttonBaseRest}\n variant={buttonVariant}\n size={effectiveSize}\n isFullWidth={effectiveIsFullWidth}\n isLoading={isLoading}\n children={children}\n onPress={handlePress}\n style={style}\n twClassName={twClassName}\n textProps={\n effectiveIsSelected\n ? textProps\n : {\n ...textProps,\n twClassName: mergeTwClassName(\n TextColor.TextAlternative,\n textProps?.twClassName,\n ),\n }\n }\n startIconProps={\n effectiveIsSelected\n ? startIconProps\n : {\n ...startIconProps,\n twClassName: mergeTwClassName(\n IconColor.IconAlternative,\n startIconProps?.twClassName,\n ),\n }\n }\n endIconProps={\n effectiveIsSelected\n ? endIconProps\n : {\n ...endIconProps,\n twClassName: mergeTwClassName(\n IconColor.IconAlternative,\n endIconProps?.twClassName,\n ),\n }\n }\n />\n );\n};\n\nFilterButton.displayName = 'FilterButton';\n"]}