npm - @metamask/design-system-react-native - Versions diffs - 0.30.2 → 0.31.0 - Mend

@metamask/design-system-react-native 0.30.2 → 0.31.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 (120) hide show

package/dist/components/ButtonIcon/ButtonIcon.constants.d.mts CHANGED Viewed

@@ -1,5 +1,6 @@
 import { ButtonIconSize, IconSize } from "@metamask/design-system-shared";
 export declare const TWCLASSMAP_BUTTONICON_SIZE_DIMENSION: {
+    xs: string;
     sm: string;
     md: string;
     lg: string;

package/dist/components/ButtonIcon/ButtonIcon.constants.d.mts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ButtonIcon.constants.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,uCAAuC;AAG1E,eAAO,MAAM,oCAAoC~~;;;;CAIhD~~,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,MAAM,CAAC,cAAc,EAAE,QAAQ,~~CAIzE~~,CAAC"}
1	+ {"version":3,"file":"ButtonIcon.constants.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,uCAAuC;AAG1E,eAAO,MAAM,oCAAoC;;;;;CAKhD,CAAC;AAEF,eAAO,MAAM,4BAA4B,EAAE,MAAM,CAAC,cAAc,EAAE,QAAQ,CAKzE,CAAC"}

package/dist/components/ButtonIcon/ButtonIcon.constants.mjs CHANGED Viewed

@@ -1,11 +1,13 @@
 import { ButtonIconSize, IconSize } from "@metamask/design-system-shared";
 // Mappings
 export const TWCLASSMAP_BUTTONICON_SIZE_DIMENSION = {
+    [ButtonIconSize.Xs]: 'h-5 w-5',
     [ButtonIconSize.Sm]: 'h-6 w-6',
     [ButtonIconSize.Md]: 'h-8 w-8',
     [ButtonIconSize.Lg]: 'h-10 w-10',
 };
 export const MAP_BUTTONICON_SIZE_ICONSIZE = {
+    [ButtonIconSize.Xs]: IconSize.Sm,
     [ButtonIconSize.Sm]: IconSize.Md,
     [ButtonIconSize.Md]: IconSize.Lg,
     [ButtonIconSize.Lg]: IconSize.Xl,

package/dist/components/ButtonIcon/ButtonIcon.constants.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ButtonIcon.constants.mjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,uCAAuC;AAE1E,WAAW;AACX,MAAM,CAAC,MAAM,oCAAoC,GAAG;IAClD,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,WAAW;CACjC,CAAC;AAEF,MAAM,CAAC,MAAM,4BAA4B,GAAqC;IAC5E,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;CACjC,CAAC","sourcesContent":["import { ButtonIconSize, IconSize } from '@metamask/design-system-shared';\n\n// Mappings\nexport const TWCLASSMAP_BUTTONICON_SIZE_DIMENSION = {\n [ButtonIconSize.Sm]: 'h-6 w-6',\n [ButtonIconSize.Md]: 'h-8 w-8',\n [ButtonIconSize.Lg]: 'h-10 w-10',\n};\n\nexport const MAP_BUTTONICON_SIZE_ICONSIZE: Record<ButtonIconSize, IconSize> = {\n [ButtonIconSize.Sm]: IconSize.Md,\n [ButtonIconSize.Md]: IconSize.Lg,\n [ButtonIconSize.Lg]: IconSize.Xl,\n};\n"]}
1	+ {"version":3,"file":"ButtonIcon.constants.mjs","sourceRoot":"","sources":["../../../src/components/ButtonIcon/ButtonIcon.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,uCAAuC;AAE1E,WAAW;AACX,MAAM,CAAC,MAAM,oCAAoC,GAAG;IAClD,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,SAAS;IAC9B,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,WAAW;CACjC,CAAC;AAEF,MAAM,CAAC,MAAM,4BAA4B,GAAqC;IAC5E,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;IAChC,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,QAAQ,CAAC,EAAE;CACjC,CAAC","sourcesContent":["import { ButtonIconSize, IconSize } from '@metamask/design-system-shared';\n\n// Mappings\nexport const TWCLASSMAP_BUTTONICON_SIZE_DIMENSION = {\n [ButtonIconSize.Xs]: 'h-5 w-5',\n [ButtonIconSize.Sm]: 'h-6 w-6',\n [ButtonIconSize.Md]: 'h-8 w-8',\n [ButtonIconSize.Lg]: 'h-10 w-10',\n};\n\nexport const MAP_BUTTONICON_SIZE_ICONSIZE: Record<ButtonIconSize, IconSize> = {\n [ButtonIconSize.Xs]: IconSize.Sm,\n [ButtonIconSize.Sm]: IconSize.Md,\n [ButtonIconSize.Md]: IconSize.Lg,\n [ButtonIconSize.Lg]: IconSize.Xl,\n};\n"]}

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

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ButtonSemanticSeverity = exports.ButtonSemantic = void 0;
+exports.ButtonSemanticSeverity = exports.ButtonSemantic = exports.ButtonSemanticSize = void 0;
+var design_system_shared_1 = require("@metamask/design-system-shared");
+Object.defineProperty(exports, "ButtonSemanticSize", { enumerable: true, get: function () { return design_system_shared_1.ButtonSemanticSize; } });
 var ButtonSemantic_1 = require("./ButtonSemantic.cjs");
 Object.defineProperty(exports, "ButtonSemantic", { enumerable: true, get: function () { return ButtonSemantic_1.ButtonSemantic; } });
 var ButtonSemantic_types_1 = require("./ButtonSemantic.types.cjs");

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/ButtonSemantic/index.ts"],"names":[],"mappings":";;;AAAA,uDAAkD;AAAzC,gHAAA,cAAc,OAAA;AACvB,mEAAgE;AAAvD,8HAAA,sBAAsB,OAAA","sourcesContent":["export { ButtonSemantic } from './ButtonSemantic';\nexport { ButtonSemanticSeverity } from './ButtonSemantic.types';\nexport type { ButtonSemanticProps } from './ButtonSemantic.types';\n"]}
1	+ {"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/ButtonSemantic/index.ts"],"names":[],"mappings":";;;AAAA,uEAAoE;AAA3D,0HAAA,kBAAkB,OAAA;AAC3B,uDAAkD;AAAzC,gHAAA,cAAc,OAAA;AACvB,mEAAgE;AAAvD,8HAAA,sBAAsB,OAAA","sourcesContent":["export { ButtonSemanticSize } from '@metamask/design-system-shared';\nexport { ButtonSemantic } from './ButtonSemantic';\nexport { ButtonSemanticSeverity } from './ButtonSemantic.types';\nexport type { ButtonSemanticProps } from './ButtonSemantic.types';\n"]}

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

@@ -1,3 +1,4 @@
+export { ButtonSemanticSize } from "@metamask/design-system-shared";
 export { ButtonSemantic } from "./ButtonSemantic.cjs";
 export { ButtonSemanticSeverity } from "./ButtonSemantic.types.cjs";
 export type { ButtonSemanticProps } from "./ButtonSemantic.types.cjs";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonSemantic/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,6BAAyB;AAClD,OAAO,EAAE,sBAAsB,EAAE,mCAA+B;AAChE,YAAY,EAAE,mBAAmB,EAAE,mCAA+B"}
1	+ {"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/ButtonSemantic/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,uCAAuC;AACpE,OAAO,EAAE,cAAc,EAAE,6BAAyB;AAClD,OAAO,EAAE,sBAAsB,EAAE,mCAA+B;AAChE,YAAY,EAAE,mBAAmB,EAAE,mCAA+B"}

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

@@ -1,3 +1,4 @@
+export { ButtonSemanticSize } from "@metamask/design-system-shared";
 export { ButtonSemantic } from "./ButtonSemantic.mjs";
 export { ButtonSemanticSeverity } from "./ButtonSemantic.types.mjs";
 export type { ButtonSemanticProps } from "./ButtonSemantic.types.mjs";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonSemantic/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,6BAAyB;AAClD,OAAO,EAAE,sBAAsB,EAAE,mCAA+B;AAChE,YAAY,EAAE,mBAAmB,EAAE,mCAA+B"}
1	+ {"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/ButtonSemantic/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,uCAAuC;AACpE,OAAO,EAAE,cAAc,EAAE,6BAAyB;AAClD,OAAO,EAAE,sBAAsB,EAAE,mCAA+B;AAChE,YAAY,EAAE,mBAAmB,EAAE,mCAA+B"}

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

@@ -1,3 +1,4 @@
+export { ButtonSemanticSize } from "@metamask/design-system-shared";
 export { ButtonSemantic } from "./ButtonSemantic.mjs";
 export { ButtonSemanticSeverity } from "./ButtonSemantic.types.mjs";
 //# sourceMappingURL=index.mjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/ButtonSemantic/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,6BAAyB;AAClD,OAAO,EAAE,sBAAsB,EAAE,mCAA+B","sourcesContent":["export { ButtonSemantic } from './ButtonSemantic';\nexport { ButtonSemanticSeverity } from './ButtonSemantic.types';\nexport type { ButtonSemanticProps } from './ButtonSemantic.types';\n"]}
1	+ {"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/ButtonSemantic/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,uCAAuC;AACpE,OAAO,EAAE,cAAc,EAAE,6BAAyB;AAClD,OAAO,EAAE,sBAAsB,EAAE,mCAA+B","sourcesContent":["export { ButtonSemanticSize } from '@metamask/design-system-shared';\nexport { ButtonSemantic } from './ButtonSemantic';\nexport { ButtonSemanticSeverity } from './ButtonSemantic.types';\nexport type { ButtonSemanticProps } from './ButtonSemantic.types';\n"]}

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

@@ -33,7 +33,7 @@ const FilterButton = ({ children, textProps, startIconProps, endIconProps, value
     const filterButtonGroup = (0, react_1.useContext)(design_system_shared_1.FilterButtonGroupContext);
     const usesGroupSelection = filterButtonGroup !== null && value !== undefined;
     const effectiveVariant = variant ?? filterButtonGroup?.variant ?? design_system_shared_1.FilterButtonVariant.Primary;
-    const effectiveSize = size ?? filterButtonGroup?.size ?? design_system_shared_1.ButtonBaseSize.Sm;
+    const effectiveSize = size ?? filterButtonGroup?.size ?? design_system_shared_1.FilterButtonSize.Sm;
     const effectiveIsFullWidth = isFullWidth ?? filterButtonGroup?.isEqualWidth ?? false;
     const effectiveIsSelected = usesGroupSelection
         ? filterButtonGroup.value === value

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,~~qCAAc~~,CAAC,EAAE,CAAC;~~IAE3E~~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","sourcesContent":["import {\n ~~ButtonBaseSize~~,\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 ?? ~~ButtonBaseSize~~.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 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"]}

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

@@ -4,7 +4,7 @@ function $importDefault(module) {
     }
     return module;
 }
-import { ButtonBaseSize, FilterButtonVariant, FilterButtonGroupContext } from "@metamask/design-system-shared";
+import { FilterButtonSize, FilterButtonVariant, FilterButtonGroupContext } from "@metamask/design-system-shared";
 import $React, { useContext } from "react";
 const React = $importDefault($React);
 import { ButtonBase } from "../ButtonBase/index.mjs";
@@ -14,7 +14,7 @@ export const FilterButton = ({ children, textProps, startIconProps, endIconProps
     const filterButtonGroup = useContext(FilterButtonGroupContext);
     const usesGroupSelection = filterButtonGroup !== null && value !== undefined;
     const effectiveVariant = variant ?? filterButtonGroup?.variant ?? FilterButtonVariant.Primary;
-    const effectiveSize = size ?? filterButtonGroup?.size ?? ButtonBaseSize.Sm;
+    const effectiveSize = size ?? filterButtonGroup?.size ?? FilterButtonSize.Sm;
     const effectiveIsFullWidth = isFullWidth ?? filterButtonGroup?.isEqualWidth ?? false;
     const effectiveIsSelected = usesGroupSelection
         ? filterButtonGroup.value === value

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,~~cAAc~~,~~EACd~~,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,~~cAAc~~,CAAC,EAAE,CAAC;~~IAE3E~~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","sourcesContent":["import {\n ~~ButtonBaseSize~~,\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 ?? ~~ButtonBaseSize~~.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":";;;;;;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"]}

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

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilterButton = exports.FilterButtonVariant = void 0;
+exports.FilterButton = exports.FilterButtonVariant = exports.FilterButtonSize = void 0;
 var design_system_shared_1 = require("@metamask/design-system-shared");
+Object.defineProperty(exports, "FilterButtonSize", { enumerable: true, get: function () { return design_system_shared_1.FilterButtonSize; } });
 Object.defineProperty(exports, "FilterButtonVariant", { enumerable: true, get: function () { return design_system_shared_1.FilterButtonVariant; } });
 var FilterButton_1 = require("./FilterButton.cjs");
 Object.defineProperty(exports, "FilterButton", { enumerable: true, get: function () { return FilterButton_1.FilterButton; } });

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/FilterButton/index.ts"],"names":[],"mappings":";;;AAAA,~~uEAAqE~~;~~AAA5D~~,2HAAA,mBAAmB,OAAA;~~AAC5B~~,mDAA8C;AAArC,4GAAA,YAAY,OAAA","sourcesContent":["export { FilterButtonVariant } from '@metamask/design-system-shared';\nexport { FilterButton } from './FilterButton';\nexport type { FilterButtonProps } from './FilterButton.types';\n"]}
1	+ {"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/FilterButton/index.ts"],"names":[],"mappings":";;;AAAA,uEAGwC;AAFtC,wHAAA,gBAAgB,OAAA;AAChB,2HAAA,mBAAmB,OAAA;AAErB,mDAA8C;AAArC,4GAAA,YAAY,OAAA","sourcesContent":["export {\n FilterButtonSize,\n FilterButtonVariant,\n} from '@metamask/design-system-shared';\nexport { FilterButton } from './FilterButton';\nexport type { FilterButtonProps } from './FilterButton.types';\n"]}

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

@@ -1,4 +1,4 @@
-export { FilterButtonVariant } from "@metamask/design-system-shared";
+export { FilterButtonSize, FilterButtonVariant, } from "@metamask/design-system-shared";
 export { FilterButton } from "./FilterButton.cjs";
 export type { FilterButtonProps } from "./FilterButton.types.cjs";
 //# sourceMappingURL=index.d.cts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/FilterButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,~~EAAE~~,mBAAmB,~~EAAE~~,uCAAuC;~~AACrE~~,OAAO,EAAE,YAAY,EAAE,2BAAuB;AAC9C,YAAY,EAAE,iBAAiB,EAAE,iCAA6B"}
1	+ {"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/FilterButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,mBAAmB,GACpB,uCAAuC;AACxC,OAAO,EAAE,YAAY,EAAE,2BAAuB;AAC9C,YAAY,EAAE,iBAAiB,EAAE,iCAA6B"}

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

@@ -1,4 +1,4 @@
-export { FilterButtonVariant } from "@metamask/design-system-shared";
+export { FilterButtonSize, FilterButtonVariant, } from "@metamask/design-system-shared";
 export { FilterButton } from "./FilterButton.mjs";
 export type { FilterButtonProps } from "./FilterButton.types.mjs";
 //# sourceMappingURL=index.d.mts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/FilterButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,~~EAAE~~,mBAAmB,~~EAAE~~,uCAAuC;~~AACrE~~,OAAO,EAAE,YAAY,EAAE,2BAAuB;AAC9C,YAAY,EAAE,iBAAiB,EAAE,iCAA6B"}
1	+ {"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/FilterButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,mBAAmB,GACpB,uCAAuC;AACxC,OAAO,EAAE,YAAY,EAAE,2BAAuB;AAC9C,YAAY,EAAE,iBAAiB,EAAE,iCAA6B"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/FilterButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,~~EAAE~~,mBAAmB,~~EAAE~~,uCAAuC;~~AACrE~~,OAAO,EAAE,YAAY,EAAE,2BAAuB","sourcesContent":["export { FilterButtonVariant } from '@metamask/design-system-shared';\nexport { FilterButton } from './FilterButton';\nexport type { FilterButtonProps } from './FilterButton.types';\n"]}
1	+ {"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/FilterButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,mBAAmB,EACpB,uCAAuC;AACxC,OAAO,EAAE,YAAY,EAAE,2BAAuB","sourcesContent":["export {\n FilterButtonSize,\n FilterButtonVariant,\n} from '@metamask/design-system-shared';\nexport { FilterButton } from './FilterButton';\nexport type { FilterButtonProps } from './FilterButton.types';\n"]}

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

@@ -12,7 +12,7 @@ const Text_1 = require("../Text/index.cjs");
 const MainActionButton = ({ iconName, label, iconProps, labelProps, onPress, onPressIn, onPressOut, style, isDisabled = false, twClassName = '', ...props }) => {
     const tw = (0, design_system_twrnc_preset_1.useTailwind)();
     return (<ButtonAnimated_1.ButtonAnimated disabled={isDisabled} accessible onPress={!isDisabled ? onPress : undefined} onPressIn={!isDisabled ? onPressIn : undefined} onPressOut={!isDisabled ? onPressOut : undefined} style={({ pressed }) => {
-            const baseStyle = tw.style('items-center justify-center rounded-xl px-1 py-4 min-w-[68px]', pressed && !isDisabled ? 'bg-muted-pressed' : 'bg-muted', isDisabled ? 'opacity-50' : 'opacity-100', twClassName);
+            const baseStyle = tw.style('items-center justify-center rounded-xl px-1 py-3 min-w-[68px]', pressed && !isDisabled ? 'bg-muted-pressed' : 'bg-muted', isDisabled ? 'opacity-50' : 'opacity-100', twClassName);
             const additionalStyle = typeof style === 'function' ? style({ pressed }) : style;
             return additionalStyle ? [baseStyle, additionalStyle] : [baseStyle];
         }} {...props}>

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MainActionButton.cjs","sourceRoot":"","sources":["../../../src/components/MainActionButton/MainActionButton.tsx"],"names":[],"mappings":";;;;;;AAAA,qFAAmE;AACnE,kDAA0B;AAG1B,4CAAoD;AACpD,gFAAmE;AACnE,4CAAmE;AAI5D,MAAM,gBAAgB,GAAG,CAAC,EAC/B,QAAQ,EACR,KAAK,EACL,SAAS,EACT,UAAU,EACV,OAAO,EACP,SAAS,EACT,UAAU,EACV,KAAK,EACL,UAAU,GAAG,KAAK,EAClB,WAAW,GAAG,EAAE,EAChB,GAAG,KAAK,EACc,EAAE,EAAE;IAC1B,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,OAAO,CACL,CAAC,+BAAc,CACb,QAAQ,CAAC,CAAC,UAAU,CAAC,CACrB,UAAU,CACV,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAC3C,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAC/C,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CACjD,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;YACrB,MAAM,SAAS,GAAG,EAAE,CAAC,KAAK,CACxB,+DAA+D,EAC/D,OAAO,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,UAAU,EACxD,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,EACzC,WAAW,CACY,CAAC;YAE1B,MAAM,eAAe,GACnB,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;YAE3D,OAAO,eAAe,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;QACtE,CAAC,CAAC,CACF,IAAI,KAAK,CAAC,CAEV;MAAA,EACE;QAAA,CAAC,WAAI,CACH,IAAI,SAAS,CAAC,CACd,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,IAAI,CAAC,CAAC,eAAQ,CAAC,EAAE,CAAC,CAClB,KAAK,CAAC,CAAC,gBAAS,CAAC,eAAe,CAAC,EAEnC;QAAA,CAAC,WAAI,CACH,IAAI,UAAU,CAAC,CACf,OAAO,CAAC,CAAC,kBAAW,CAAC,MAAM,CAAC,CAC5B,UAAU,CAAC,CAAC,iBAAU,CAAC,MAAM,CAAC,CAC9B,KAAK,CAAC,CAAC,gBAAS,CAAC,WAAW,CAAC,CAC7B,WAAW,CAAC,kCAAkC,CAC9C,aAAa,CAAC,CAAC,CAAC,CAAC,CACjB,aAAa,CAAC,MAAM,CAEpB;UAAA,CAAC,KAAK,CACR;QAAA,EAAE,WAAI,CACR;MAAA,GACF;IAAA,EAAE,+BAAc,CAAC,CAClB,CAAC;AACJ,CAAC,CAAC;AA1DW,QAAA,gBAAgB,oBA0D3B","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nimport { Icon, IconColor, IconSize } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\nimport { Text, FontWeight, TextColor, TextVariant } from '../Text';\n\nimport type { MainActionButtonProps } from './MainActionButton.types';\n\nexport const MainActionButton = ({\n iconName,\n label,\n iconProps,\n labelProps,\n onPress,\n onPressIn,\n onPressOut,\n style,\n isDisabled = false,\n twClassName = '',\n ...props\n}: MainActionButtonProps) => {\n const tw = useTailwind();\n\n return (\n <ButtonAnimated\n disabled={isDisabled}\n accessible\n onPress={!isDisabled ? onPress : undefined}\n onPressIn={!isDisabled ? onPressIn : undefined}\n onPressOut={!isDisabled ? onPressOut : undefined}\n style={({ pressed }) => {\n const baseStyle = tw.style(\n 'items-center justify-center rounded-xl px-1 py-4 min-w-[68px]',\n pressed && !isDisabled ? 'bg-muted-pressed' : 'bg-muted',\n isDisabled ? 'opacity-50' : 'opacity-100',\n twClassName,\n ) as StyleProp<ViewStyle>;\n\n const additionalStyle =\n typeof style === 'function' ? style({ pressed }) : style;\n\n return additionalStyle ? [baseStyle, additionalStyle] : [baseStyle];\n }}\n {...props}\n >\n <>\n <Icon\n {...iconProps}\n name={iconName}\n size={IconSize.Lg}\n color={IconColor.IconAlternative}\n />\n <Text\n {...labelProps}\n variant={TextVariant.BodySm}\n fontWeight={FontWeight.Medium}\n color={TextColor.TextDefault}\n twClassName=\"mt-0.5 w-full text-center shrink\"\n numberOfLines={1}\n ellipsizeMode=\"tail\"\n >\n {label}\n </Text>\n </>\n </ButtonAnimated>\n );\n};\n"]}
1	+ {"version":3,"file":"MainActionButton.cjs","sourceRoot":"","sources":["../../../src/components/MainActionButton/MainActionButton.tsx"],"names":[],"mappings":";;;;;;AAAA,qFAAmE;AACnE,kDAA0B;AAG1B,4CAAoD;AACpD,gFAAmE;AACnE,4CAAmE;AAI5D,MAAM,gBAAgB,GAAG,CAAC,EAC/B,QAAQ,EACR,KAAK,EACL,SAAS,EACT,UAAU,EACV,OAAO,EACP,SAAS,EACT,UAAU,EACV,KAAK,EACL,UAAU,GAAG,KAAK,EAClB,WAAW,GAAG,EAAE,EAChB,GAAG,KAAK,EACc,EAAE,EAAE;IAC1B,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,OAAO,CACL,CAAC,+BAAc,CACb,QAAQ,CAAC,CAAC,UAAU,CAAC,CACrB,UAAU,CACV,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAC3C,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAC/C,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CACjD,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;YACrB,MAAM,SAAS,GAAG,EAAE,CAAC,KAAK,CACxB,+DAA+D,EAC/D,OAAO,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,UAAU,EACxD,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,EACzC,WAAW,CACY,CAAC;YAE1B,MAAM,eAAe,GACnB,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;YAE3D,OAAO,eAAe,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;QACtE,CAAC,CAAC,CACF,IAAI,KAAK,CAAC,CAEV;MAAA,EACE;QAAA,CAAC,WAAI,CACH,IAAI,SAAS,CAAC,CACd,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,IAAI,CAAC,CAAC,eAAQ,CAAC,EAAE,CAAC,CAClB,KAAK,CAAC,CAAC,gBAAS,CAAC,eAAe,CAAC,EAEnC;QAAA,CAAC,WAAI,CACH,IAAI,UAAU,CAAC,CACf,OAAO,CAAC,CAAC,kBAAW,CAAC,MAAM,CAAC,CAC5B,UAAU,CAAC,CAAC,iBAAU,CAAC,MAAM,CAAC,CAC9B,KAAK,CAAC,CAAC,gBAAS,CAAC,WAAW,CAAC,CAC7B,WAAW,CAAC,kCAAkC,CAC9C,aAAa,CAAC,CAAC,CAAC,CAAC,CACjB,aAAa,CAAC,MAAM,CAEpB;UAAA,CAAC,KAAK,CACR;QAAA,EAAE,WAAI,CACR;MAAA,GACF;IAAA,EAAE,+BAAc,CAAC,CAClB,CAAC;AACJ,CAAC,CAAC;AA1DW,QAAA,gBAAgB,oBA0D3B","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nimport { Icon, IconColor, IconSize } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\nimport { Text, FontWeight, TextColor, TextVariant } from '../Text';\n\nimport type { MainActionButtonProps } from './MainActionButton.types';\n\nexport const MainActionButton = ({\n iconName,\n label,\n iconProps,\n labelProps,\n onPress,\n onPressIn,\n onPressOut,\n style,\n isDisabled = false,\n twClassName = '',\n ...props\n}: MainActionButtonProps) => {\n const tw = useTailwind();\n\n return (\n <ButtonAnimated\n disabled={isDisabled}\n accessible\n onPress={!isDisabled ? onPress : undefined}\n onPressIn={!isDisabled ? onPressIn : undefined}\n onPressOut={!isDisabled ? onPressOut : undefined}\n style={({ pressed }) => {\n const baseStyle = tw.style(\n 'items-center justify-center rounded-xl px-1 py-3 min-w-[68px]',\n pressed && !isDisabled ? 'bg-muted-pressed' : 'bg-muted',\n isDisabled ? 'opacity-50' : 'opacity-100',\n twClassName,\n ) as StyleProp<ViewStyle>;\n\n const additionalStyle =\n typeof style === 'function' ? style({ pressed }) : style;\n\n return additionalStyle ? [baseStyle, additionalStyle] : [baseStyle];\n }}\n {...props}\n >\n <>\n <Icon\n {...iconProps}\n name={iconName}\n size={IconSize.Lg}\n color={IconColor.IconAlternative}\n />\n <Text\n {...labelProps}\n variant={TextVariant.BodySm}\n fontWeight={FontWeight.Medium}\n color={TextColor.TextDefault}\n twClassName=\"mt-0.5 w-full text-center shrink\"\n numberOfLines={1}\n ellipsizeMode=\"tail\"\n >\n {label}\n </Text>\n </>\n </ButtonAnimated>\n );\n};\n"]}

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

@@ -13,7 +13,7 @@ import { Text, FontWeight, TextColor, TextVariant } from "../Text/index.mjs";
 export const MainActionButton = ({ iconName, label, iconProps, labelProps, onPress, onPressIn, onPressOut, style, isDisabled = false, twClassName = '', ...props }) => {
     const tw = useTailwind();
     return (<ButtonAnimated disabled={isDisabled} accessible onPress={!isDisabled ? onPress : undefined} onPressIn={!isDisabled ? onPressIn : undefined} onPressOut={!isDisabled ? onPressOut : undefined} style={({ pressed }) => {
-            const baseStyle = tw.style('items-center justify-center rounded-xl px-1 py-4 min-w-[68px]', pressed && !isDisabled ? 'bg-muted-pressed' : 'bg-muted', isDisabled ? 'opacity-50' : 'opacity-100', twClassName);
+            const baseStyle = tw.style('items-center justify-center rounded-xl px-1 py-3 min-w-[68px]', pressed && !isDisabled ? 'bg-muted-pressed' : 'bg-muted', isDisabled ? 'opacity-50' : 'opacity-100', twClassName);
             const additionalStyle = typeof style === 'function' ? style({ pressed }) : style;
             return additionalStyle ? [baseStyle, additionalStyle] : [baseStyle];
         }} {...props}>

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MainActionButton.mjs","sourceRoot":"","sources":["../../../src/components/MainActionButton/MainActionButton.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,6CAA6C;AACnE,OAAO,MAAK,cAAc;;AAG1B,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,0BAAgB;AACpD,OAAO,EAAE,cAAc,EAAE,oDAA0C;AACnE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,0BAAgB;AAInE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAC/B,QAAQ,EACR,KAAK,EACL,SAAS,EACT,UAAU,EACV,OAAO,EACP,SAAS,EACT,UAAU,EACV,KAAK,EACL,UAAU,GAAG,KAAK,EAClB,WAAW,GAAG,EAAE,EAChB,GAAG,KAAK,EACc,EAAE,EAAE;IAC1B,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzB,OAAO,CACL,CAAC,cAAc,CACb,QAAQ,CAAC,CAAC,UAAU,CAAC,CACrB,UAAU,CACV,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAC3C,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAC/C,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CACjD,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;YACrB,MAAM,SAAS,GAAG,EAAE,CAAC,KAAK,CACxB,+DAA+D,EAC/D,OAAO,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,UAAU,EACxD,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,EACzC,WAAW,CACY,CAAC;YAE1B,MAAM,eAAe,GACnB,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;YAE3D,OAAO,eAAe,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;QACtE,CAAC,CAAC,CACF,IAAI,KAAK,CAAC,CAEV;MAAA,EACE;QAAA,CAAC,IAAI,CACH,IAAI,SAAS,CAAC,CACd,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,IAAI,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAClB,KAAK,CAAC,CAAC,SAAS,CAAC,eAAe,CAAC,EAEnC;QAAA,CAAC,IAAI,CACH,IAAI,UAAU,CAAC,CACf,OAAO,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAC5B,UAAU,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAC9B,KAAK,CAAC,CAAC,SAAS,CAAC,WAAW,CAAC,CAC7B,WAAW,CAAC,kCAAkC,CAC9C,aAAa,CAAC,CAAC,CAAC,CAAC,CACjB,aAAa,CAAC,MAAM,CAEpB;UAAA,CAAC,KAAK,CACR;QAAA,EAAE,IAAI,CACR;MAAA,GACF;IAAA,EAAE,cAAc,CAAC,CAClB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nimport { Icon, IconColor, IconSize } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\nimport { Text, FontWeight, TextColor, TextVariant } from '../Text';\n\nimport type { MainActionButtonProps } from './MainActionButton.types';\n\nexport const MainActionButton = ({\n iconName,\n label,\n iconProps,\n labelProps,\n onPress,\n onPressIn,\n onPressOut,\n style,\n isDisabled = false,\n twClassName = '',\n ...props\n}: MainActionButtonProps) => {\n const tw = useTailwind();\n\n return (\n <ButtonAnimated\n disabled={isDisabled}\n accessible\n onPress={!isDisabled ? onPress : undefined}\n onPressIn={!isDisabled ? onPressIn : undefined}\n onPressOut={!isDisabled ? onPressOut : undefined}\n style={({ pressed }) => {\n const baseStyle = tw.style(\n 'items-center justify-center rounded-xl px-1 py-4 min-w-[68px]',\n pressed && !isDisabled ? 'bg-muted-pressed' : 'bg-muted',\n isDisabled ? 'opacity-50' : 'opacity-100',\n twClassName,\n ) as StyleProp<ViewStyle>;\n\n const additionalStyle =\n typeof style === 'function' ? style({ pressed }) : style;\n\n return additionalStyle ? [baseStyle, additionalStyle] : [baseStyle];\n }}\n {...props}\n >\n <>\n <Icon\n {...iconProps}\n name={iconName}\n size={IconSize.Lg}\n color={IconColor.IconAlternative}\n />\n <Text\n {...labelProps}\n variant={TextVariant.BodySm}\n fontWeight={FontWeight.Medium}\n color={TextColor.TextDefault}\n twClassName=\"mt-0.5 w-full text-center shrink\"\n numberOfLines={1}\n ellipsizeMode=\"tail\"\n >\n {label}\n </Text>\n </>\n </ButtonAnimated>\n );\n};\n"]}
1	+ {"version":3,"file":"MainActionButton.mjs","sourceRoot":"","sources":["../../../src/components/MainActionButton/MainActionButton.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,6CAA6C;AACnE,OAAO,MAAK,cAAc;;AAG1B,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,0BAAgB;AACpD,OAAO,EAAE,cAAc,EAAE,oDAA0C;AACnE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,0BAAgB;AAInE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAC/B,QAAQ,EACR,KAAK,EACL,SAAS,EACT,UAAU,EACV,OAAO,EACP,SAAS,EACT,UAAU,EACV,KAAK,EACL,UAAU,GAAG,KAAK,EAClB,WAAW,GAAG,EAAE,EAChB,GAAG,KAAK,EACc,EAAE,EAAE;IAC1B,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzB,OAAO,CACL,CAAC,cAAc,CACb,QAAQ,CAAC,CAAC,UAAU,CAAC,CACrB,UAAU,CACV,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAC3C,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAC/C,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CACjD,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;YACrB,MAAM,SAAS,GAAG,EAAE,CAAC,KAAK,CACxB,+DAA+D,EAC/D,OAAO,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,UAAU,EACxD,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,EACzC,WAAW,CACY,CAAC;YAE1B,MAAM,eAAe,GACnB,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;YAE3D,OAAO,eAAe,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;QACtE,CAAC,CAAC,CACF,IAAI,KAAK,CAAC,CAEV;MAAA,EACE;QAAA,CAAC,IAAI,CACH,IAAI,SAAS,CAAC,CACd,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,IAAI,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAClB,KAAK,CAAC,CAAC,SAAS,CAAC,eAAe,CAAC,EAEnC;QAAA,CAAC,IAAI,CACH,IAAI,UAAU,CAAC,CACf,OAAO,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAC5B,UAAU,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAC9B,KAAK,CAAC,CAAC,SAAS,CAAC,WAAW,CAAC,CAC7B,WAAW,CAAC,kCAAkC,CAC9C,aAAa,CAAC,CAAC,CAAC,CAAC,CACjB,aAAa,CAAC,MAAM,CAEpB;UAAA,CAAC,KAAK,CACR;QAAA,EAAE,IAAI,CACR;MAAA,GACF;IAAA,EAAE,cAAc,CAAC,CAClB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\nimport type { StyleProp, ViewStyle } from 'react-native';\n\nimport { Icon, IconColor, IconSize } from '../Icon';\nimport { ButtonAnimated } from '../temp-components/ButtonAnimated';\nimport { Text, FontWeight, TextColor, TextVariant } from '../Text';\n\nimport type { MainActionButtonProps } from './MainActionButton.types';\n\nexport const MainActionButton = ({\n iconName,\n label,\n iconProps,\n labelProps,\n onPress,\n onPressIn,\n onPressOut,\n style,\n isDisabled = false,\n twClassName = '',\n ...props\n}: MainActionButtonProps) => {\n const tw = useTailwind();\n\n return (\n <ButtonAnimated\n disabled={isDisabled}\n accessible\n onPress={!isDisabled ? onPress : undefined}\n onPressIn={!isDisabled ? onPressIn : undefined}\n onPressOut={!isDisabled ? onPressOut : undefined}\n style={({ pressed }) => {\n const baseStyle = tw.style(\n 'items-center justify-center rounded-xl px-1 py-3 min-w-[68px]',\n pressed && !isDisabled ? 'bg-muted-pressed' : 'bg-muted',\n isDisabled ? 'opacity-50' : 'opacity-100',\n twClassName,\n ) as StyleProp<ViewStyle>;\n\n const additionalStyle =\n typeof style === 'function' ? style({ pressed }) : style;\n\n return additionalStyle ? [baseStyle, additionalStyle] : [baseStyle];\n }}\n {...props}\n >\n <>\n <Icon\n {...iconProps}\n name={iconName}\n size={IconSize.Lg}\n color={IconColor.IconAlternative}\n />\n <Text\n {...labelProps}\n variant={TextVariant.BodySm}\n fontWeight={FontWeight.Medium}\n color={TextColor.TextDefault}\n twClassName=\"mt-0.5 w-full text-center shrink\"\n numberOfLines={1}\n ellipsizeMode=\"tail\"\n >\n {label}\n </Text>\n </>\n </ButtonAnimated>\n );\n};\n"]}

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

@@ -8,6 +8,7 @@ const design_system_shared_1 = require("@metamask/design-system-shared");
 const design_system_twrnc_preset_1 = require("@metamask/design-system-twrnc-preset");
 const react_1 = __importDefault(require("react"));
 const react_native_1 = require("react-native");
+const Box_1 = require("../Box/index.cjs");
 const BoxRow_1 = require("../BoxRow/index.cjs");
 const Icon_1 = require("../Icon/index.cjs");
 /**
@@ -17,14 +18,15 @@ const Icon_1 = require("../Icon/index.cjs");
  *
  * @param sectionHeaderProps - Component props
  * @param sectionHeaderProps.title - Title content for the inner row (required)
- * @param sectionHeaderProps.titleAccessory - Optional node to the right of `title` in the inner row
+ * @param sectionHeaderProps.titleAccessory - Optional inline metadata beside `title` in the inner row (not for trailing chevrons; use `endIconName` / `endIconProps`)
+ * @param sectionHeaderProps.children - Optional full-width content below the header row
  * @param sectionHeaderProps.titleProps - Optional props merged into inner row `Text` when `title` is a string
  * @param sectionHeaderProps.titleWrapperProps - Optional props spread onto the inner `BoxRow`
  * @param sectionHeaderProps.startAccessory - Optional custom node before the title row on the outer row; used when no start icon is resolved
  * @param sectionHeaderProps.startIconName - Optional start icon; takes precedence over `startAccessory` when set
  * @param sectionHeaderProps.startIconProps - Props merged into the start `Icon` (defaults include medium size and default icon color)
  * @param sectionHeaderProps.endAccessory - Optional custom node after the title row on the outer row; used when no end icon is resolved
- * @param sectionHeaderProps.endIconName - Optional end icon; takes precedence over `endAccessory` when set. Defaults to `IconName.ArrowRight` when `isInteractive` is `true` and no end icon or `endAccessory` is provided
+ * @param sectionHeaderProps.endIconName - Optional end icon on the outer header row (trailing chevrons, disclosure arrows); takes precedence over `endAccessory` when set. Defaults to `IconName.ArrowRight` when `isInteractive` is `true` and no end icon or `endAccessory` is provided
  * @param sectionHeaderProps.endIconProps - Props merged into the end `Icon`
  * @param sectionHeaderProps.isInteractive - When `true`, wraps the header in a `Pressable` with reduced opacity on press
  * @param sectionHeaderProps.style - Optional style on the outer wrapper (`View` or `Pressable` style, including function form when interactive)
@@ -33,19 +35,31 @@ const Icon_1 = require("../Icon/index.cjs");
  * @returns The rendered SectionHeader layout.
  */
 const SectionHeader = (sectionHeaderProps) => {
-    const { title, titleAccessory, titleProps, titleWrapperProps, startAccessory, startIconName, startIconProps, endAccessory, endIconName, endIconProps, isInteractive, twClassName = '', style, ...props } = sectionHeaderProps;
+    const { title, children, titleAccessory, titleProps, titleWrapperProps, startAccessory, startIconName, startIconProps, endAccessory, endIconName, endIconProps, isInteractive, twClassName = '', style, ...props } = sectionHeaderProps;
     const tw = (0, design_system_twrnc_preset_1.useTailwind)();
     const resolvedEndIconName = endIconName ??
         (isInteractive && !endAccessory ? design_system_shared_1.IconName.ArrowRight : undefined);
-    const resolvedStartAccessory = startIconName ? (<Icon_1.Icon size={design_system_shared_1.IconSize.Md} color={design_system_shared_1.IconColor.IconDefault} twClassName="shrink-0" {...startIconProps} name={startIconName}/>) : (startAccessory);
-    const resolvedEndAccessory = resolvedEndIconName ? (<Icon_1.Icon size={design_system_shared_1.IconSize.Md} color={design_system_shared_1.IconColor.IconAlternative} twClassName="shrink-0" {...endIconProps} name={resolvedEndIconName}/>) : (endAccessory);
-    const titleRow = title ? (<BoxRow_1.BoxRow {...titleWrapperProps} gap={1} endAccessory={titleAccessory} textProps={{
+    const resolvedStartAccessory = startIconName ? (<Icon_1.Icon size={design_system_shared_1.IconSize.Sm} color={design_system_shared_1.IconColor.IconDefault} twClassName="shrink-0" {...startIconProps} name={startIconName}/>) : (startAccessory);
+    const resolvedEndAccessory = resolvedEndIconName ? (<Icon_1.Icon size={design_system_shared_1.IconSize.Sm} color={design_system_shared_1.IconColor.IconAlternative} twClassName="shrink-0" {...endIconProps} name={resolvedEndIconName}/>) : (endAccessory);
+    const hasAccessories = Boolean(resolvedStartAccessory) || Boolean(resolvedEndAccessory);
+    const titleRow = title ? (<BoxRow_1.BoxRow {...titleWrapperProps} gap={1} endAccessory={titleAccessory} twClassName={(0, design_system_shared_1.mergeTwClassName)(hasAccessories ? 'w-full shrink min-w-0' : '', titleWrapperProps?.twClassName)} textProps={{
             variant: design_system_shared_1.TextVariant.HeadingMd,
             color: design_system_shared_1.TextColor.TextDefault,
             ...titleProps,
         }}>
       {title}
     </BoxRow_1.BoxRow>) : null;
+    let mainContent = null;
+    if (titleRow) {
+        mainContent = hasAccessories ? (<Box_1.Box twClassName="shrink min-w-0">{titleRow}</Box_1.Box>) : (titleRow);
+    }
+    const headerRow = (<BoxRow_1.BoxRow gap={1} startAccessory={resolvedStartAccessory} endAccessory={resolvedEndAccessory}>
+      {mainContent}
+    </BoxRow_1.BoxRow>);
+    const body = children ? (<Box_1.Box gap={1}>
+      {headerRow}
+      {children}
+    </Box_1.Box>) : (headerRow);
     if (isInteractive) {
         const { disabled, accessibilityRole = 'button' } = sectionHeaderProps;
         const isDisabled = Boolean(disabled);
@@ -54,13 +68,17 @@ const SectionHeader = (sectionHeaderProps) => {
                 const additionalStyle = typeof style === 'function' ? style({ pressed }) : style;
                 return additionalStyle ? [baseStyle, additionalStyle] : baseStyle;
             }} {...props}>
-        <BoxRow_1.BoxRow gap={1} startAccessory={resolvedStartAccessory} endAccessory={resolvedEndAccessory}>
-          {titleRow}
-        </BoxRow_1.BoxRow>
+        {body}
       </react_native_1.Pressable>);
     }
+    if (children) {
+        return (<Box_1.Box {...props} gap={1} style={style} twClassName={(0, design_system_shared_1.mergeTwClassName)('px-4 pb-2 pt-3', twClassName)}>
+        {headerRow}
+        {children}
+      </Box_1.Box>);
+    }
     return (<BoxRow_1.BoxRow {...props} gap={1} style={style} twClassName={(0, design_system_shared_1.mergeTwClassName)('px-4 pb-2 pt-3', twClassName)} startAccessory={resolvedStartAccessory} endAccessory={resolvedEndAccessory}>
-      {titleRow}
+      {mainContent}
     </BoxRow_1.BoxRow>);
 };
 exports.SectionHeader = SectionHeader;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SectionHeader.cjs","sourceRoot":"","sources":["../../../src/components/SectionHeader/SectionHeader.tsx"],"names":[],"mappings":";;;;;;AAAA,yEAOwC;AACxC,qFAAmE;AACnE,kDAA0B;AAC1B,+CAAyC;AAEzC,gDAAmC;AACnC,4CAA+B;AAI/B~~;;;;;;;;;;;;;;;;;;;;;GAqBG~~;AACI,MAAM,aAAa,GAAiC,CACzD,kBAAkB,EAClB,EAAE;IACF,MAAM,EACJ,KAAK,EACL,cAAc,EACd,UAAU,EACV,iBAAiB,EACjB,cAAc,EACd,aAAa,EACb,cAAc,EACd,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,aAAa,EACb,WAAW,GAAG,EAAE,EAChB,KAAK,EACL,GAAG,KAAK,EACT,GAAG,kBAAkB,CAAC;IAEvB,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IACzB,MAAM,mBAAmB,GACvB,WAAW;QACX,CAAC,aAAa,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,+BAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAErE,MAAM,sBAAsB,GAAG,aAAa,CAAC,CAAC,CAAC,CAC7C,CAAC,WAAI,CACH,IAAI,CAAC,CAAC,+BAAQ,CAAC,EAAE,CAAC,CAClB,KAAK,CAAC,CAAC,gCAAS,CAAC,WAAW,CAAC,CAC7B,WAAW,CAAC,UAAU,CACtB,IAAI,cAAc,CAAC,CACnB,IAAI,CAAC,CAAC,aAAa,CAAC,EACpB,CACH,CAAC,CAAC,CAAC,CACF,cAAc,CACf,CAAC;IAEF,MAAM,oBAAoB,GAAG,mBAAmB,CAAC,CAAC,CAAC,CACjD,CAAC,WAAI,CACH,IAAI,CAAC,CAAC,+BAAQ,CAAC,EAAE,CAAC,CAClB,KAAK,CAAC,CAAC,gCAAS,CAAC,eAAe,CAAC,CACjC,WAAW,CAAC,UAAU,CACtB,IAAI,YAAY,CAAC,CACjB,IAAI,CAAC,CAAC,mBAAmB,CAAC,EAC1B,CACH,CAAC,CAAC,CAAC,CACF,YAAY,CACb,CAAC;IAEF,MAAM,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,CACvB,CAAC,eAAM,CACL,IAAI,iBAAiB,CAAC,CACtB,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,YAAY,CAAC,CAAC,cAAc,CAAC,CAC7B,SAAS,CAAC,CAAC;YACT,OAAO,EAAE,kCAAW,CAAC,SAAS;YAC9B,KAAK,EAAE,gCAAS,CAAC,WAAW;YAC5B,GAAG,UAAU;SACd,CAAC,CAEF;MAAA,CAAC,KAAK,CACR;IAAA,EAAE,eAAM,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CAAC;IAET,IAAI,aAAa,EAAE;QACjB,MAAM,EAAE,QAAQ,EAAE,iBAAiB,GAAG,QAAQ,EAAE,GAAG,kBAAkB,CAAC;QACtE,MAAM,UAAU,GAAG,OAAO,CAAC,QAAQ,CAAC,CAAC;QAErC,OAAO,CACL,CAAC,wBAAS,CACR,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;gBACrB,MAAM,SAAS,GAAG,EAAE,CAAC,KAAK,CACxB,gBAAgB,EAChB,WAAW,EACX,OAAO,IAAI,CAAC,UAAU,IAAI,YAAY,CACvC,CAAC;gBACF,MAAM,eAAe,GACnB,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;gBAE3D,OAAO,eAAe,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;YACpE,CAAC,CAAC,CACF,IAAI,KAAK,CAAC,CAEV;QAAA,CAAC,~~eAAM~~,CACL,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,~~cAAc~~,CAAC,CAAC,~~sBAAsB~~,CAAC,~~CACvC~~,~~YAAY~~,CAAC,CAAC,~~oBAAoB~~,CAAC,~~CAEnC~~;~~UAAA~~,CAAC,~~QAAQ~~,~~CACX~~;QAAA,~~EAAE~~,~~eAAM~~,~~CACV~~;MAAA,EAAE,~~wBAAS~~,CAAC,~~CACb~~,CAAC;KACH;IAED,OAAO,CACL,CAAC,eAAM,CACL,IAAI,KAAK,CAAC,CACV,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,WAAW,CAAC,CAAC,IAAA,uCAAgB,EAAC,gBAAgB,EAAE,WAAW,CAAC,CAAC,CAC7D,cAAc,CAAC,CAAC,sBAAsB,CAAC,CACvC,YAAY,CAAC,CAAC,oBAAoB,CAAC,CAEnC;MAAA,CAAC,~~QAAQ~~,~~CACX~~;IAAA,EAAE,eAAM,CAAC,CACV,CAAC;AACJ,CAAC,CAAC;~~AA3GW~~,QAAA,aAAa,~~iBA2GxB~~;AAEF,qBAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import {\n IconColor,\n IconName,\n IconSize,\n mergeTwClassName,\n TextColor,\n TextVariant,\n} from '@metamask/design-system-shared';\nimport { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\nimport { Pressable } from 'react-native';\n\nimport { BoxRow } from '../BoxRow';\nimport { Icon } from '../Icon';\n\nimport type { SectionHeaderProps } from './SectionHeader.types';\n\n/*\n Horizontal section header: optional start/end icons or accessories, and a title row with optional inline accessory.\n * When `isInteractive` is `true`, the header is wrapped in a `Pressable` and remaining `PressableProps` are forwarded to it.\n * Otherwise, remaining `View` props are forwarded to the outer {@link BoxRow}.\n \n @param sectionHeaderProps - Component props\n * @param sectionHeaderProps.title - Title content for the inner row (required)\n * @param sectionHeaderProps.titleAccessory - Optional ~~node~~ to ~~the~~ ~~right of~~ `title` in the inner row\n * @param sectionHeaderProps.titleProps - Optional props merged into inner row `Text` when `title` is a string\n * @param sectionHeaderProps.titleWrapperProps - Optional props spread onto the inner `BoxRow`\n * @param sectionHeaderProps.startAccessory - Optional custom node before the title row on the outer row; used when no start icon is resolved\n * @param sectionHeaderProps.startIconName - Optional start icon; takes precedence over `startAccessory` when set\n * @param sectionHeaderProps.startIconProps - Props merged into the start `Icon` (defaults include medium size and default icon color)\n * @param sectionHeaderProps.endAccessory - Optional custom node after the title row on the outer row; used when no end icon is resolved\n * @param sectionHeaderProps.endIconName - Optional end icon; takes precedence over `endAccessory` when set. Defaults to `IconName.ArrowRight` when `isInteractive` is `true` and no end icon or `endAccessory` is provided\n * @param sectionHeaderProps.endIconProps - Props merged into the end `Icon`\n * @param sectionHeaderProps.isInteractive - When `true`, wraps the header in a `Pressable` with reduced opacity on press\n * @param sectionHeaderProps.style - Optional style on the outer wrapper (`View` or `Pressable` style, including function form when interactive)\n * @param sectionHeaderProps.twClassName - Optional Tailwind classes on the outer row\n \n @returns The rendered SectionHeader layout.\n */\nexport const SectionHeader: React.FC<SectionHeaderProps> = (\n sectionHeaderProps,\n) => {\n const {\n title,\n titleAccessory,\n titleProps,\n titleWrapperProps,\n startAccessory,\n startIconName,\n startIconProps,\n endAccessory,\n endIconName,\n endIconProps,\n isInteractive,\n twClassName = '',\n style,\n ...props\n } = sectionHeaderProps;\n\n const tw = useTailwind();\n const resolvedEndIconName =\n endIconName ??\n (isInteractive && !endAccessory ? IconName.ArrowRight : undefined);\n\n const resolvedStartAccessory = startIconName ? (\n <Icon\n size={IconSize.Md}\n color={IconColor.IconDefault}\n twClassName=\"shrink-0\"\n {...startIconProps}\n name={startIconName}\n />\n ) : (\n startAccessory\n );\n\n const resolvedEndAccessory = resolvedEndIconName ? (\n <Icon\n size={IconSize.Md}\n color={IconColor.IconAlternative}\n twClassName=\"shrink-0\"\n {...endIconProps}\n name={resolvedEndIconName}\n />\n ) : (\n endAccessory\n );\n\n const titleRow = title ? (\n <BoxRow\n {...titleWrapperProps}\n gap={1}\n endAccessory={titleAccessory}\n textProps={{\n variant: TextVariant.HeadingMd,\n color: TextColor.TextDefault,\n ...titleProps,\n }}\n >\n {title}\n </BoxRow>\n ) : null;\n\n if (isInteractive) {\n const { disabled, accessibilityRole = 'button' } = sectionHeaderProps;\n const isDisabled = Boolean(disabled);\n\n return (\n <Pressable\n accessibilityRole={accessibilityRole}\n style={({ pressed }) => {\n const baseStyle = tw.style(\n 'px-4 pb-2 pt-3',\n twClassName,\n pressed && !isDisabled && 'opacity-70',\n );\n const additionalStyle =\n typeof style === 'function' ? style({ pressed }) : style;\n\n return additionalStyle ? [baseStyle, additionalStyle] : baseStyle;\n }}\n {...props}\n >\n <~~BoxRow~~\n gap={1}\n ~~startAccessory~~={~~resolvedStartAccessory~~}\n ~~endAccessory~~={~~resolvedEndAccessory~~}\n >\n {~~titleRow~~}\n ~~</BoxRow>\~~n </~~Pressable~~>\n );\n }\n\n return (\n <BoxRow\n {...props}\n gap={1}\n style={style}\n twClassName={mergeTwClassName('px-4 pb-2 pt-3', twClassName)}\n startAccessory={resolvedStartAccessory}\n endAccessory={resolvedEndAccessory}\n >\n {~~titleRow~~}\n </BoxRow>\n );\n};\n\nSectionHeader.displayName = 'SectionHeader';\n"]}
1	+ {"version":3,"file":"SectionHeader.cjs","sourceRoot":"","sources":["../../../src/components/SectionHeader/SectionHeader.tsx"],"names":[],"mappings":";;;;;;AAAA,yEAOwC;AACxC,qFAAmE;AACnE,kDAA0B;AAC1B,+CAAyC;AAEzC,0CAA6B;AAC7B,gDAAmC;AACnC,4CAA+B;AAI/B;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACI,MAAM,aAAa,GAAiC,CACzD,kBAAkB,EAClB,EAAE;IACF,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,cAAc,EACd,UAAU,EACV,iBAAiB,EACjB,cAAc,EACd,aAAa,EACb,cAAc,EACd,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,aAAa,EACb,WAAW,GAAG,EAAE,EAChB,KAAK,EACL,GAAG,KAAK,EACT,GAAG,kBAAkB,CAAC;IAEvB,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IACzB,MAAM,mBAAmB,GACvB,WAAW;QACX,CAAC,aAAa,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,+BAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAErE,MAAM,sBAAsB,GAAG,aAAa,CAAC,CAAC,CAAC,CAC7C,CAAC,WAAI,CACH,IAAI,CAAC,CAAC,+BAAQ,CAAC,EAAE,CAAC,CAClB,KAAK,CAAC,CAAC,gCAAS,CAAC,WAAW,CAAC,CAC7B,WAAW,CAAC,UAAU,CACtB,IAAI,cAAc,CAAC,CACnB,IAAI,CAAC,CAAC,aAAa,CAAC,EACpB,CACH,CAAC,CAAC,CAAC,CACF,cAAc,CACf,CAAC;IAEF,MAAM,oBAAoB,GAAG,mBAAmB,CAAC,CAAC,CAAC,CACjD,CAAC,WAAI,CACH,IAAI,CAAC,CAAC,+BAAQ,CAAC,EAAE,CAAC,CAClB,KAAK,CAAC,CAAC,gCAAS,CAAC,eAAe,CAAC,CACjC,WAAW,CAAC,UAAU,CACtB,IAAI,YAAY,CAAC,CACjB,IAAI,CAAC,CAAC,mBAAmB,CAAC,EAC1B,CACH,CAAC,CAAC,CAAC,CACF,YAAY,CACb,CAAC;IAEF,MAAM,cAAc,GAClB,OAAO,CAAC,sBAAsB,CAAC,IAAI,OAAO,CAAC,oBAAoB,CAAC,CAAC;IAEnE,MAAM,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,CACvB,CAAC,eAAM,CACL,IAAI,iBAAiB,CAAC,CACtB,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,YAAY,CAAC,CAAC,cAAc,CAAC,CAC7B,WAAW,CAAC,CAAC,IAAA,uCAAgB,EAC3B,cAAc,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,EAC7C,iBAAiB,EAAE,WAAW,CAC/B,CAAC,CACF,SAAS,CAAC,CAAC;YACT,OAAO,EAAE,kCAAW,CAAC,SAAS;YAC9B,KAAK,EAAE,gCAAS,CAAC,WAAW;YAC5B,GAAG,UAAU;SACd,CAAC,CAEF;MAAA,CAAC,KAAK,CACR;IAAA,EAAE,eAAM,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CAAC;IAET,IAAI,WAAW,GAAG,IAAI,CAAC;IACvB,IAAI,QAAQ,EAAE;QACZ,WAAW,GAAG,cAAc,CAAC,CAAC,CAAC,CAC7B,CAAC,SAAG,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC,QAAQ,CAAC,EAAE,SAAG,CAAC,CACnD,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CAAC;KACH;IAED,MAAM,SAAS,GAAG,CAChB,CAAC,eAAM,CACL,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,cAAc,CAAC,CAAC,sBAAsB,CAAC,CACvC,YAAY,CAAC,CAAC,oBAAoB,CAAC,CAEnC;MAAA,CAAC,WAAW,CACd;IAAA,EAAE,eAAM,CAAC,CACV,CAAC;IAEF,MAAM,IAAI,GAAG,QAAQ,CAAC,CAAC,CAAC,CACtB,CAAC,SAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CACV;MAAA,CAAC,SAAS,CACV;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,SAAG,CAAC,CACP,CAAC,CAAC,CAAC,CACF,SAAS,CACV,CAAC;IAEF,IAAI,aAAa,EAAE;QACjB,MAAM,EAAE,QAAQ,EAAE,iBAAiB,GAAG,QAAQ,EAAE,GAAG,kBAAkB,CAAC;QACtE,MAAM,UAAU,GAAG,OAAO,CAAC,QAAQ,CAAC,CAAC;QAErC,OAAO,CACL,CAAC,wBAAS,CACR,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;gBACrB,MAAM,SAAS,GAAG,EAAE,CAAC,KAAK,CACxB,gBAAgB,EAChB,WAAW,EACX,OAAO,IAAI,CAAC,UAAU,IAAI,YAAY,CACvC,CAAC;gBACF,MAAM,eAAe,GACnB,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;gBAE3D,OAAO,eAAe,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;YACpE,CAAC,CAAC,CACF,IAAI,KAAK,CAAC,CAEV;QAAA,CAAC,IAAI,CACP;MAAA,EAAE,wBAAS,CAAC,CACb,CAAC;KACH;IAED,IAAI,QAAQ,EAAE;QACZ,OAAO,CACL,CAAC,SAAG,CACF,IAAI,KAAK,CAAC,CACV,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,WAAW,CAAC,CAAC,IAAA,uCAAgB,EAAC,gBAAgB,EAAE,WAAW,CAAC,CAAC,CAE7D;QAAA,CAAC,SAAS,CACV;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,SAAG,CAAC,CACP,CAAC;KACH;IAED,OAAO,CACL,CAAC,eAAM,CACL,IAAI,KAAK,CAAC,CACV,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,WAAW,CAAC,CAAC,IAAA,uCAAgB,EAAC,gBAAgB,EAAE,WAAW,CAAC,CAAC,CAC7D,cAAc,CAAC,CAAC,sBAAsB,CAAC,CACvC,YAAY,CAAC,CAAC,oBAAoB,CAAC,CAEnC;MAAA,CAAC,WAAW,CACd;IAAA,EAAE,eAAM,CAAC,CACV,CAAC;AACJ,CAAC,CAAC;AAvJW,QAAA,aAAa,iBAuJxB;AAEF,qBAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import {\n IconColor,\n IconName,\n IconSize,\n mergeTwClassName,\n TextColor,\n TextVariant,\n} from '@metamask/design-system-shared';\nimport { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\nimport { Pressable } from 'react-native';\n\nimport { Box } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { Icon } from '../Icon';\n\nimport type { SectionHeaderProps } from './SectionHeader.types';\n\n/*\n Horizontal section header: optional start/end icons or accessories, and a title row with optional inline accessory.\n * When `isInteractive` is `true`, the header is wrapped in a `Pressable` and remaining `PressableProps` are forwarded to it.\n * Otherwise, remaining `View` props are forwarded to the outer {@link BoxRow}.\n \n @param sectionHeaderProps - Component props\n * @param sectionHeaderProps.title - Title content for the inner row (required)\n * @param sectionHeaderProps.titleAccessory - Optional inline metadata beside `title` in the inner row (not for trailing chevrons; use `endIconName` / `endIconProps`)\n * @param sectionHeaderProps.children - Optional full-width content below the header row\n * @param sectionHeaderProps.titleProps - Optional props merged into inner row `Text` when `title` is a string\n * @param sectionHeaderProps.titleWrapperProps - Optional props spread onto the inner `BoxRow`\n * @param sectionHeaderProps.startAccessory - Optional custom node before the title row on the outer row; used when no start icon is resolved\n * @param sectionHeaderProps.startIconName - Optional start icon; takes precedence over `startAccessory` when set\n * @param sectionHeaderProps.startIconProps - Props merged into the start `Icon` (defaults include medium size and default icon color)\n * @param sectionHeaderProps.endAccessory - Optional custom node after the title row on the outer row; used when no end icon is resolved\n * @param sectionHeaderProps.endIconName - Optional end icon on the outer header row (trailing chevrons, disclosure arrows); takes precedence over `endAccessory` when set. Defaults to `IconName.ArrowRight` when `isInteractive` is `true` and no end icon or `endAccessory` is provided\n * @param sectionHeaderProps.endIconProps - Props merged into the end `Icon`\n * @param sectionHeaderProps.isInteractive - When `true`, wraps the header in a `Pressable` with reduced opacity on press\n * @param sectionHeaderProps.style - Optional style on the outer wrapper (`View` or `Pressable` style, including function form when interactive)\n * @param sectionHeaderProps.twClassName - Optional Tailwind classes on the outer row\n \n @returns The rendered SectionHeader layout.\n */\nexport const SectionHeader: React.FC<SectionHeaderProps> = (\n sectionHeaderProps,\n) => {\n const {\n title,\n children,\n titleAccessory,\n titleProps,\n titleWrapperProps,\n startAccessory,\n startIconName,\n startIconProps,\n endAccessory,\n endIconName,\n endIconProps,\n isInteractive,\n twClassName = '',\n style,\n ...props\n } = sectionHeaderProps;\n\n const tw = useTailwind();\n const resolvedEndIconName =\n endIconName ??\n (isInteractive && !endAccessory ? IconName.ArrowRight : undefined);\n\n const resolvedStartAccessory = startIconName ? (\n <Icon\n size={IconSize.Sm}\n color={IconColor.IconDefault}\n twClassName=\"shrink-0\"\n {...startIconProps}\n name={startIconName}\n />\n ) : (\n startAccessory\n );\n\n const resolvedEndAccessory = resolvedEndIconName ? (\n <Icon\n size={IconSize.Sm}\n color={IconColor.IconAlternative}\n twClassName=\"shrink-0\"\n {...endIconProps}\n name={resolvedEndIconName}\n />\n ) : (\n endAccessory\n );\n\n const hasAccessories =\n Boolean(resolvedStartAccessory) \|\| Boolean(resolvedEndAccessory);\n\n const titleRow = title ? (\n <BoxRow\n {...titleWrapperProps}\n gap={1}\n endAccessory={titleAccessory}\n twClassName={mergeTwClassName(\n hasAccessories ? 'w-full shrink min-w-0' : '',\n titleWrapperProps?.twClassName,\n )}\n textProps={{\n variant: TextVariant.HeadingMd,\n color: TextColor.TextDefault,\n ...titleProps,\n }}\n >\n {title}\n </BoxRow>\n ) : null;\n\n let mainContent = null;\n if (titleRow) {\n mainContent = hasAccessories ? (\n <Box twClassName=\"shrink min-w-0\">{titleRow}</Box>\n ) : (\n titleRow\n );\n }\n\n const headerRow = (\n <BoxRow\n gap={1}\n startAccessory={resolvedStartAccessory}\n endAccessory={resolvedEndAccessory}\n >\n {mainContent}\n </BoxRow>\n );\n\n const body = children ? (\n <Box gap={1}>\n {headerRow}\n {children}\n </Box>\n ) : (\n headerRow\n );\n\n if (isInteractive) {\n const { disabled, accessibilityRole = 'button' } = sectionHeaderProps;\n const isDisabled = Boolean(disabled);\n\n return (\n <Pressable\n accessibilityRole={accessibilityRole}\n style={({ pressed }) => {\n const baseStyle = tw.style(\n 'px-4 pb-2 pt-3',\n twClassName,\n pressed && !isDisabled && 'opacity-70',\n );\n const additionalStyle =\n typeof style === 'function' ? style({ pressed }) : style;\n\n return additionalStyle ? [baseStyle, additionalStyle] : baseStyle;\n }}\n {...props}\n >\n {body}\n </Pressable>\n );\n }\n\n if (children) {\n return (\n <Box\n {...props}\n gap={1}\n style={style}\n twClassName={mergeTwClassName('px-4 pb-2 pt-3', twClassName)}\n >\n {headerRow}\n {children}\n </Box>\n );\n }\n\n return (\n <BoxRow\n {...props}\n gap={1}\n style={style}\n twClassName={mergeTwClassName('px-4 pb-2 pt-3', twClassName)}\n startAccessory={resolvedStartAccessory}\n endAccessory={resolvedEndAccessory}\n >\n {mainContent}\n </BoxRow>\n );\n};\n\nSectionHeader.displayName = 'SectionHeader';\n"]}

package/dist/components/SectionHeader/SectionHeader.d.cts CHANGED Viewed

@@ -7,14 +7,15 @@ import type { SectionHeaderProps } from "./SectionHeader.types.cjs";
  *
  * @param sectionHeaderProps - Component props
  * @param sectionHeaderProps.title - Title content for the inner row (required)
- * @param sectionHeaderProps.titleAccessory - Optional node to the right of `title` in the inner row
+ * @param sectionHeaderProps.titleAccessory - Optional inline metadata beside `title` in the inner row (not for trailing chevrons; use `endIconName` / `endIconProps`)
+ * @param sectionHeaderProps.children - Optional full-width content below the header row
  * @param sectionHeaderProps.titleProps - Optional props merged into inner row `Text` when `title` is a string
  * @param sectionHeaderProps.titleWrapperProps - Optional props spread onto the inner `BoxRow`
  * @param sectionHeaderProps.startAccessory - Optional custom node before the title row on the outer row; used when no start icon is resolved
  * @param sectionHeaderProps.startIconName - Optional start icon; takes precedence over `startAccessory` when set
  * @param sectionHeaderProps.startIconProps - Props merged into the start `Icon` (defaults include medium size and default icon color)
  * @param sectionHeaderProps.endAccessory - Optional custom node after the title row on the outer row; used when no end icon is resolved
- * @param sectionHeaderProps.endIconName - Optional end icon; takes precedence over `endAccessory` when set. Defaults to `IconName.ArrowRight` when `isInteractive` is `true` and no end icon or `endAccessory` is provided
+ * @param sectionHeaderProps.endIconName - Optional end icon on the outer header row (trailing chevrons, disclosure arrows); takes precedence over `endAccessory` when set. Defaults to `IconName.ArrowRight` when `isInteractive` is `true` and no end icon or `endAccessory` is provided
  * @param sectionHeaderProps.endIconProps - Props merged into the end `Icon`
  * @param sectionHeaderProps.isInteractive - When `true`, wraps the header in a `Pressable` with reduced opacity on press
  * @param sectionHeaderProps.style - Optional style on the outer wrapper (`View` or `Pressable` style, including function form when interactive)

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SectionHeader.d.cts","sourceRoot":"","sources":["../../../src/components/SectionHeader/SectionHeader.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,cAAc;~~AAM1B~~,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE~~;;;;;;;;;;;;;;;;;;;;;GAqBG~~;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,~~CA2GtD~~,CAAC"}
1	+ {"version":3,"file":"SectionHeader.d.cts","sourceRoot":"","sources":["../../../src/components/SectionHeader/SectionHeader.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAuJtD,CAAC"}

package/dist/components/SectionHeader/SectionHeader.d.mts CHANGED Viewed

@@ -7,14 +7,15 @@ import type { SectionHeaderProps } from "./SectionHeader.types.mjs";
  *
  * @param sectionHeaderProps - Component props
  * @param sectionHeaderProps.title - Title content for the inner row (required)
- * @param sectionHeaderProps.titleAccessory - Optional node to the right of `title` in the inner row
+ * @param sectionHeaderProps.titleAccessory - Optional inline metadata beside `title` in the inner row (not for trailing chevrons; use `endIconName` / `endIconProps`)
+ * @param sectionHeaderProps.children - Optional full-width content below the header row
  * @param sectionHeaderProps.titleProps - Optional props merged into inner row `Text` when `title` is a string
  * @param sectionHeaderProps.titleWrapperProps - Optional props spread onto the inner `BoxRow`
  * @param sectionHeaderProps.startAccessory - Optional custom node before the title row on the outer row; used when no start icon is resolved
  * @param sectionHeaderProps.startIconName - Optional start icon; takes precedence over `startAccessory` when set
  * @param sectionHeaderProps.startIconProps - Props merged into the start `Icon` (defaults include medium size and default icon color)
  * @param sectionHeaderProps.endAccessory - Optional custom node after the title row on the outer row; used when no end icon is resolved
- * @param sectionHeaderProps.endIconName - Optional end icon; takes precedence over `endAccessory` when set. Defaults to `IconName.ArrowRight` when `isInteractive` is `true` and no end icon or `endAccessory` is provided
+ * @param sectionHeaderProps.endIconName - Optional end icon on the outer header row (trailing chevrons, disclosure arrows); takes precedence over `endAccessory` when set. Defaults to `IconName.ArrowRight` when `isInteractive` is `true` and no end icon or `endAccessory` is provided
  * @param sectionHeaderProps.endIconProps - Props merged into the end `Icon`
  * @param sectionHeaderProps.isInteractive - When `true`, wraps the header in a `Pressable` with reduced opacity on press
  * @param sectionHeaderProps.style - Optional style on the outer wrapper (`View` or `Pressable` style, including function form when interactive)

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SectionHeader.d.mts","sourceRoot":"","sources":["../../../src/components/SectionHeader/SectionHeader.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,cAAc;~~AAM1B~~,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE~~;;;;;;;;;;;;;;;;;;;;;GAqBG~~;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,~~CA2GtD~~,CAAC"}
1	+ {"version":3,"file":"SectionHeader.d.mts","sourceRoot":"","sources":["../../../src/components/SectionHeader/SectionHeader.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAuJtD,CAAC"}

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

@@ -9,6 +9,7 @@ import { useTailwind } from "@metamask/design-system-twrnc-preset";
 import $React from "react";
 const React = $importDefault($React);
 import { Pressable } from "react-native";
+import { Box } from "../Box/index.mjs";
 import { BoxRow } from "../BoxRow/index.mjs";
 import { Icon } from "../Icon/index.mjs";
 /**
@@ -18,14 +19,15 @@ import { Icon } from "../Icon/index.mjs";
  *
  * @param sectionHeaderProps - Component props
  * @param sectionHeaderProps.title - Title content for the inner row (required)
- * @param sectionHeaderProps.titleAccessory - Optional node to the right of `title` in the inner row
+ * @param sectionHeaderProps.titleAccessory - Optional inline metadata beside `title` in the inner row (not for trailing chevrons; use `endIconName` / `endIconProps`)
+ * @param sectionHeaderProps.children - Optional full-width content below the header row
  * @param sectionHeaderProps.titleProps - Optional props merged into inner row `Text` when `title` is a string
  * @param sectionHeaderProps.titleWrapperProps - Optional props spread onto the inner `BoxRow`
  * @param sectionHeaderProps.startAccessory - Optional custom node before the title row on the outer row; used when no start icon is resolved
  * @param sectionHeaderProps.startIconName - Optional start icon; takes precedence over `startAccessory` when set
  * @param sectionHeaderProps.startIconProps - Props merged into the start `Icon` (defaults include medium size and default icon color)
  * @param sectionHeaderProps.endAccessory - Optional custom node after the title row on the outer row; used when no end icon is resolved
- * @param sectionHeaderProps.endIconName - Optional end icon; takes precedence over `endAccessory` when set. Defaults to `IconName.ArrowRight` when `isInteractive` is `true` and no end icon or `endAccessory` is provided
+ * @param sectionHeaderProps.endIconName - Optional end icon on the outer header row (trailing chevrons, disclosure arrows); takes precedence over `endAccessory` when set. Defaults to `IconName.ArrowRight` when `isInteractive` is `true` and no end icon or `endAccessory` is provided
  * @param sectionHeaderProps.endIconProps - Props merged into the end `Icon`
  * @param sectionHeaderProps.isInteractive - When `true`, wraps the header in a `Pressable` with reduced opacity on press
  * @param sectionHeaderProps.style - Optional style on the outer wrapper (`View` or `Pressable` style, including function form when interactive)
@@ -34,19 +36,31 @@ import { Icon } from "../Icon/index.mjs";
  * @returns The rendered SectionHeader layout.
  */
 export const SectionHeader = (sectionHeaderProps) => {
-    const { title, titleAccessory, titleProps, titleWrapperProps, startAccessory, startIconName, startIconProps, endAccessory, endIconName, endIconProps, isInteractive, twClassName = '', style, ...props } = sectionHeaderProps;
+    const { title, children, titleAccessory, titleProps, titleWrapperProps, startAccessory, startIconName, startIconProps, endAccessory, endIconName, endIconProps, isInteractive, twClassName = '', style, ...props } = sectionHeaderProps;
     const tw = useTailwind();
     const resolvedEndIconName = endIconName ??
         (isInteractive && !endAccessory ? IconName.ArrowRight : undefined);
-    const resolvedStartAccessory = startIconName ? (<Icon size={IconSize.Md} color={IconColor.IconDefault} twClassName="shrink-0" {...startIconProps} name={startIconName}/>) : (startAccessory);
-    const resolvedEndAccessory = resolvedEndIconName ? (<Icon size={IconSize.Md} color={IconColor.IconAlternative} twClassName="shrink-0" {...endIconProps} name={resolvedEndIconName}/>) : (endAccessory);
-    const titleRow = title ? (<BoxRow {...titleWrapperProps} gap={1} endAccessory={titleAccessory} textProps={{
+    const resolvedStartAccessory = startIconName ? (<Icon size={IconSize.Sm} color={IconColor.IconDefault} twClassName="shrink-0" {...startIconProps} name={startIconName}/>) : (startAccessory);
+    const resolvedEndAccessory = resolvedEndIconName ? (<Icon size={IconSize.Sm} color={IconColor.IconAlternative} twClassName="shrink-0" {...endIconProps} name={resolvedEndIconName}/>) : (endAccessory);
+    const hasAccessories = Boolean(resolvedStartAccessory) || Boolean(resolvedEndAccessory);
+    const titleRow = title ? (<BoxRow {...titleWrapperProps} gap={1} endAccessory={titleAccessory} twClassName={mergeTwClassName(hasAccessories ? 'w-full shrink min-w-0' : '', titleWrapperProps?.twClassName)} textProps={{
             variant: TextVariant.HeadingMd,
             color: TextColor.TextDefault,
             ...titleProps,
         }}>
       {title}
     </BoxRow>) : null;
+    let mainContent = null;
+    if (titleRow) {
+        mainContent = hasAccessories ? (<Box twClassName="shrink min-w-0">{titleRow}</Box>) : (titleRow);
+    }
+    const headerRow = (<BoxRow gap={1} startAccessory={resolvedStartAccessory} endAccessory={resolvedEndAccessory}>
+      {mainContent}
+    </BoxRow>);
+    const body = children ? (<Box gap={1}>
+      {headerRow}
+      {children}
+    </Box>) : (headerRow);
     if (isInteractive) {
         const { disabled, accessibilityRole = 'button' } = sectionHeaderProps;
         const isDisabled = Boolean(disabled);
@@ -55,13 +69,17 @@ export const SectionHeader = (sectionHeaderProps) => {
                 const additionalStyle = typeof style === 'function' ? style({ pressed }) : style;
                 return additionalStyle ? [baseStyle, additionalStyle] : baseStyle;
             }} {...props}>
-        <BoxRow gap={1} startAccessory={resolvedStartAccessory} endAccessory={resolvedEndAccessory}>
-          {titleRow}
-        </BoxRow>
+        {body}
       </Pressable>);
     }
+    if (children) {
+        return (<Box {...props} gap={1} style={style} twClassName={mergeTwClassName('px-4 pb-2 pt-3', twClassName)}>
+        {headerRow}
+        {children}
+      </Box>);
+    }
     return (<BoxRow {...props} gap={1} style={style} twClassName={mergeTwClassName('px-4 pb-2 pt-3', twClassName)} startAccessory={resolvedStartAccessory} endAccessory={resolvedEndAccessory}>
-      {titleRow}
+      {mainContent}
     </BoxRow>);
 };
 SectionHeader.displayName = 'SectionHeader';