@metamask/design-system-react-native 0.29.0 → 0.30.1

package/dist/components/{SegmentButton/SegmentButton.mjs → FilterButton/FilterButton.mjs}

@@ -4,25 +4,27 @@ function $importDefault(module) {
     }
     return module;
 }
-import { ButtonBaseSize, SegmentButtonVariant, SegmentGroupContext } from "@metamask/design-system-shared";
+import { ButtonBaseSize, FilterButtonVariant, FilterButtonGroupContext } from "@metamask/design-system-shared";
 import $React, { useContext } from "react";
 const React = $importDefault($React);
 import { ButtonBase } from "../ButtonBase/index.mjs";
 import { IconColor } from "../Icon/index.mjs";
 import { TextColor } from "../Text/index.mjs";
-export const SegmentButton = ({ children, textProps, startIconProps, endIconProps, value, isSelected = false, variant, isLoading = false, size = ButtonBaseSize.Sm, twClassName = '', style, onPress, ...buttonBaseRest }) => {
-    const segmentGroup = useContext(SegmentGroupContext);
-    const usesGroupSelection = segmentGroup !== null && value !== undefined;
-    const effectiveVariant = variant ?? segmentGroup?.variant ?? SegmentButtonVariant.Primary;
+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;
+    const effectiveVariant = variant ?? filterButtonGroup?.variant ?? FilterButtonVariant.Primary;
+    const effectiveSize = size ?? filterButtonGroup?.size ?? ButtonBaseSize.Sm;
+    const effectiveIsFullWidth = isFullWidth ?? filterButtonGroup?.isEqualWidth ?? false;
     const effectiveIsSelected = usesGroupSelection
-        ? segmentGroup.value === value
+        ? filterButtonGroup.value === value
         : isSelected;
     const getTextAndIconClassName = () => {
-        if (effectiveVariant === SegmentButtonVariant.Primary &&
+        if (effectiveVariant === FilterButtonVariant.Primary &&
             effectiveIsSelected) {
             return 'text-primary-inverse';
         }
-        if (effectiveVariant === SegmentButtonVariant.Secondary &&
+        if (effectiveVariant === FilterButtonVariant.Secondary &&
             effectiveIsSelected) {
             return 'text-default';
         }
@@ -30,14 +32,14 @@ export const SegmentButton = ({ children, textProps, startIconProps, endIconProp
     };
     const handlePress = (event) => {
         if (usesGroupSelection &&
-            segmentGroup !== null &&
+            filterButtonGroup !== null &&
             value !== undefined &&
-            segmentGroup.value !== value) {
-            segmentGroup.onChange(value);
+            filterButtonGroup.value !== value) {
+            filterButtonGroup.onChange(value);
         }
         onPress?.(event);
     };
-    return (<ButtonBase {...buttonBaseRest} size={size} isLoading={isLoading} children={children} onPress={handlePress} textProps={{
+    return (<ButtonBase {...buttonBaseRest} size={effectiveSize} isFullWidth={effectiveIsFullWidth} isLoading={isLoading} children={children} onPress={handlePress} textProps={{
             ...(!effectiveIsSelected ? { color: TextColor.TextAlternative } : {}),
             ...textProps,
         }} startIconProps={{
@@ -47,13 +49,13 @@ export const SegmentButton = ({ children, textProps, startIconProps, endIconProp
             ...(!effectiveIsSelected ? { color: IconColor.IconAlternative } : {}),
             ...endIconProps,
         }} twClassName={(pressed) => {
-            if (effectiveVariant === SegmentButtonVariant.Primary &&
+            if (effectiveVariant === FilterButtonVariant.Primary &&
                 effectiveIsSelected) {
                 return `${pressed || isLoading ? 'bg-icon-default-pressed' : 'bg-icon-default'} ${typeof twClassName === 'function'
                     ? twClassName(pressed)
                     : twClassName}`;
             }
-            if (effectiveVariant === SegmentButtonVariant.Secondary &&
+            if (effectiveVariant === FilterButtonVariant.Secondary &&
                 effectiveIsSelected) {
                 return `${pressed || isLoading ? 'bg-muted-pressed' : 'bg-muted'} ${typeof twClassName === 'function'
                     ? twClassName(pressed)
@@ -62,5 +64,5 @@ export const SegmentButton = ({ children, textProps, startIconProps, endIconProp
             return `${pressed || isLoading ? 'bg-pressed' : 'bg-transparent'} border-0 ${typeof twClassName === 'function' ? twClassName(pressed) : twClassName}`;
         }} textClassName={getTextAndIconClassName} iconClassName={getTextAndIconClassName} style={style}/>);
 };
-SegmentButton.displayName = 'SegmentButton';
-//# sourceMappingURL=SegmentButton.mjs.map
+FilterButton.displayName = 'FilterButton';
+//# sourceMappingURL=FilterButton.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterButton.mjs","sourceRoot":"","sources":["../../../src/components/FilterButton/FilterButton.tsx"],"names":[],"mappings":"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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"]}

package/dist/components/{SegmentGroup/SegmentGroup.types.cjs → FilterButton/FilterButton.types.cjs}

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterButton.types.cjs","sourceRoot":"","sources":["../../../src/components/FilterButton/FilterButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { FilterButtonPropsShared } from '@metamask/design-system-shared';\n\nimport type { ButtonBaseProps } from '../ButtonBase/ButtonBase.types';\n\n/**\n * FilterButton component props.\n */\nexport type FilterButtonProps = FilterButtonPropsShared &\n  Omit<ButtonBaseProps, 'onPress'> & {\n    onPress?: ButtonBaseProps['onPress'];\n  };\n"]}

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

@@ -0,0 +1,9 @@
+import type { FilterButtonPropsShared } from "@metamask/design-system-shared";
+import type { ButtonBaseProps } from "../ButtonBase/ButtonBase.types.cjs";
+/**
+ * FilterButton component props.
+ */
+export type FilterButtonProps = FilterButtonPropsShared & Omit<ButtonBaseProps, 'onPress'> & {
+    onPress?: ButtonBaseProps['onPress'];
+};
+//# sourceMappingURL=FilterButton.types.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterButton.types.d.cts","sourceRoot":"","sources":["../../../src/components/FilterButton/FilterButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,uCAAuC;AAE9E,OAAO,KAAK,EAAE,eAAe,EAAE,2CAAuC;AAEtE;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,uBAAuB,GACrD,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC,GAAG;IACjC,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;CACtC,CAAC"}

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

@@ -0,0 +1,9 @@
+import type { FilterButtonPropsShared } from "@metamask/design-system-shared";
+import type { ButtonBaseProps } from "../ButtonBase/ButtonBase.types.mjs";
+/**
+ * FilterButton component props.
+ */
+export type FilterButtonProps = FilterButtonPropsShared & Omit<ButtonBaseProps, 'onPress'> & {
+    onPress?: ButtonBaseProps['onPress'];
+};
+//# sourceMappingURL=FilterButton.types.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterButton.types.d.mts","sourceRoot":"","sources":["../../../src/components/FilterButton/FilterButton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,uCAAuC;AAE9E,OAAO,KAAK,EAAE,eAAe,EAAE,2CAAuC;AAEtE;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,uBAAuB,GACrD,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC,GAAG;IACjC,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;CACtC,CAAC"}

package/dist/components/FilterButton/FilterButton.types.mjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterButton.types.mjs","sourceRoot":"","sources":["../../../src/components/FilterButton/FilterButton.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { FilterButtonPropsShared } from '@metamask/design-system-shared';\n\nimport type { ButtonBaseProps } from '../ButtonBase/ButtonBase.types';\n\n/**\n * FilterButton component props.\n */\nexport type FilterButtonProps = FilterButtonPropsShared &\n  Omit<ButtonBaseProps, 'onPress'> & {\n    onPress?: ButtonBaseProps['onPress'];\n  };\n"]}

package/dist/components/FilterButton/index.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterButton = exports.FilterButtonVariant = void 0;
+var design_system_shared_1 = require("@metamask/design-system-shared");
+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; } });
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,4 @@
+export { 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

@@ -0,0 +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"}

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

@@ -0,0 +1,4 @@
+export { 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

@@ -0,0 +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"}

package/dist/components/FilterButton/index.mjs

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

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

@@ -0,0 +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"]}

package/dist/components/{SegmentGroup/SegmentGroup.cjs → FilterButtonGroup/FilterButtonGroup.cjs}

@@ -23,23 +23,23 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SegmentGroup = void 0;
+exports.FilterButtonGroup = void 0;
 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 = __importStar(require("react"));
 const react_native_1 = require("react-native");
-const SegmentGroup = ({ value, onChange, variant, children, twClassName, style, contentContainerStyle, ...scrollRest }) => {
+const FilterButtonGroup = ({ value, onChange, variant, children, twClassName, style, contentContainerStyle, ...scrollRest }) => {
     const tw = (0, design_system_twrnc_preset_1.useTailwind)();
     const contextValue = (0, react_1.useMemo)(() => ({ value, onChange, variant }), [value, onChange, variant]);
-    return (<design_system_shared_1.SegmentGroupContext.Provider value={contextValue}>
+    return (<design_system_shared_1.FilterButtonGroupContext.Provider value={contextValue}>
       <react_native_1.ScrollView {...scrollRest} horizontal showsHorizontalScrollIndicator={false} accessibilityRole="tablist" style={[tw.style('self-stretch'), style]} contentContainerStyle={[
             tw.style('flex flex-row items-center gap-1', twClassName),
             contentContainerStyle,
         ]}>
         {children}
       </react_native_1.ScrollView>
-    </design_system_shared_1.SegmentGroupContext.Provider>);
+    </design_system_shared_1.FilterButtonGroupContext.Provider>);
 };
-exports.SegmentGroup = SegmentGroup;
-exports.SegmentGroup.displayName = 'SegmentGroup';
-//# sourceMappingURL=SegmentGroup.cjs.map
+exports.FilterButtonGroup = FilterButtonGroup;
+exports.FilterButtonGroup.displayName = 'FilterButtonGroup';
+//# sourceMappingURL=FilterButtonGroup.cjs.map

package/dist/components/FilterButtonGroup/FilterButtonGroup.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterButtonGroup.cjs","sourceRoot":"","sources":["../../../src/components/FilterButtonGroup/FilterButtonGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yEAA0E;AAC1E,qFAAmE;AACnE,+CAAuC;AACvC,+CAA0C;AAInC,MAAM,iBAAiB,GAAG,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,WAAW,EACX,KAAK,EACL,qBAAqB,EACrB,GAAG,UAAU,EACU,EAAE,EAAE;IAC3B,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,MAAM,YAAY,GAAG,IAAA,eAAO,EAC1B,GAAG,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACpC,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,CAAC,CAC3B,CAAC;IAEF,OAAO,CACL,CAAC,+CAAwB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CACrD;MAAA,CAAC,yBAAU,CACT,IAAI,UAAU,CAAC,CACf,UAAU,CACV,8BAA8B,CAAC,CAAC,KAAK,CAAC,CACtC,iBAAiB,CAAC,SAAS,CAC3B,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,CAAC,CACzC,qBAAqB,CAAC,CAAC;YACrB,EAAE,CAAC,KAAK,CAAC,kCAAkC,EAAE,WAAW,CAAC;YACzD,qBAAqB;SACtB,CAAC,CAEF;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,yBAAU,CACd;IAAA,EAAE,+CAAwB,CAAC,QAAQ,CAAC,CACrC,CAAC;AACJ,CAAC,CAAC;AAlCW,QAAA,iBAAiB,qBAkC5B;AAEF,yBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAC","sourcesContent":["import { FilterButtonGroupContext } from '@metamask/design-system-shared';\nimport { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React, { useMemo } from 'react';\nimport { ScrollView } from 'react-native';\n\nimport type { FilterButtonGroupProps } from './FilterButtonGroup.types';\n\nexport const FilterButtonGroup = ({\n  value,\n  onChange,\n  variant,\n  children,\n  twClassName,\n  style,\n  contentContainerStyle,\n  ...scrollRest\n}: FilterButtonGroupProps) => {\n  const tw = useTailwind();\n\n  const contextValue = useMemo(\n    () => ({ value, onChange, variant }),\n    [value, onChange, variant],\n  );\n\n  return (\n    <FilterButtonGroupContext.Provider value={contextValue}>\n      <ScrollView\n        {...scrollRest}\n        horizontal\n        showsHorizontalScrollIndicator={false}\n        accessibilityRole=\"tablist\"\n        style={[tw.style('self-stretch'), style]}\n        contentContainerStyle={[\n          tw.style('flex flex-row items-center gap-1', twClassName),\n          contentContainerStyle,\n        ]}\n      >\n        {children}\n      </ScrollView>\n    </FilterButtonGroupContext.Provider>\n  );\n};\n\nFilterButtonGroup.displayName = 'FilterButtonGroup';\n"]}

package/dist/components/FilterButtonGroup/FilterButtonGroup.d.cts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { FilterButtonGroupProps } from "./FilterButtonGroup.types.cjs";
+export declare const FilterButtonGroup: {
+    ({ value, onChange, variant, children, twClassName, style, contentContainerStyle, ...scrollRest }: FilterButtonGroupProps): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=FilterButtonGroup.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterButtonGroup.d.cts","sourceRoot":"","sources":["../../../src/components/FilterButtonGroup/FilterButtonGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkB,cAAc;AAGvC,OAAO,KAAK,EAAE,sBAAsB,EAAE,sCAAkC;AAExE,eAAO,MAAM,iBAAiB;uGAS3B,sBAAsB;;CAyBxB,CAAC"}

package/dist/components/FilterButtonGroup/FilterButtonGroup.d.mts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { FilterButtonGroupProps } from "./FilterButtonGroup.types.mjs";
+export declare const FilterButtonGroup: {
+    ({ value, onChange, variant, children, twClassName, style, contentContainerStyle, ...scrollRest }: FilterButtonGroupProps): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=FilterButtonGroup.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterButtonGroup.d.mts","sourceRoot":"","sources":["../../../src/components/FilterButtonGroup/FilterButtonGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkB,cAAc;AAGvC,OAAO,KAAK,EAAE,sBAAsB,EAAE,sCAAkC;AAExE,eAAO,MAAM,iBAAiB;uGAS3B,sBAAsB;;CAyBxB,CAAC"}

package/dist/components/{SegmentGroup/SegmentGroup.mjs → FilterButtonGroup/FilterButtonGroup.mjs}

@@ -4,22 +4,22 @@ function $importDefault(module) {
     }
     return module;
 }
-import { SegmentGroupContext } from "@metamask/design-system-shared";
+import { FilterButtonGroupContext } from "@metamask/design-system-shared";
 import { useTailwind } from "@metamask/design-system-twrnc-preset";
 import $React, { useMemo } from "react";
 const React = $importDefault($React);
 import { ScrollView } from "react-native";
-export const SegmentGroup = ({ value, onChange, variant, children, twClassName, style, contentContainerStyle, ...scrollRest }) => {
+export const FilterButtonGroup = ({ value, onChange, variant, children, twClassName, style, contentContainerStyle, ...scrollRest }) => {
     const tw = useTailwind();
     const contextValue = useMemo(() => ({ value, onChange, variant }), [value, onChange, variant]);
-    return (<SegmentGroupContext.Provider value={contextValue}>
+    return (<FilterButtonGroupContext.Provider value={contextValue}>
       <ScrollView {...scrollRest} horizontal showsHorizontalScrollIndicator={false} accessibilityRole="tablist" style={[tw.style('self-stretch'), style]} contentContainerStyle={[
             tw.style('flex flex-row items-center gap-1', twClassName),
             contentContainerStyle,
         ]}>
         {children}
       </ScrollView>
-    </SegmentGroupContext.Provider>);
+    </FilterButtonGroupContext.Provider>);
 };
-SegmentGroup.displayName = 'SegmentGroup';
-//# sourceMappingURL=SegmentGroup.mjs.map
+FilterButtonGroup.displayName = 'FilterButtonGroup';
+//# sourceMappingURL=FilterButtonGroup.mjs.map

package/dist/components/FilterButtonGroup/FilterButtonGroup.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterButtonGroup.mjs","sourceRoot":"","sources":["../../../src/components/FilterButtonGroup/FilterButtonGroup.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,wBAAwB,EAAE,uCAAuC;AAC1E,OAAO,EAAE,WAAW,EAAE,6CAA6C;AACnE,OAAO,QAAO,EAAE,OAAO,EAAE,cAAc;;AACvC,OAAO,EAAE,UAAU,EAAE,qBAAqB;AAI1C,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,WAAW,EACX,KAAK,EACL,qBAAqB,EACrB,GAAG,UAAU,EACU,EAAE,EAAE;IAC3B,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzB,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACpC,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,CAAC,CAC3B,CAAC;IAEF,OAAO,CACL,CAAC,wBAAwB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CACrD;MAAA,CAAC,UAAU,CACT,IAAI,UAAU,CAAC,CACf,UAAU,CACV,8BAA8B,CAAC,CAAC,KAAK,CAAC,CACtC,iBAAiB,CAAC,SAAS,CAC3B,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,CAAC,CACzC,qBAAqB,CAAC,CAAC;YACrB,EAAE,CAAC,KAAK,CAAC,kCAAkC,EAAE,WAAW,CAAC;YACzD,qBAAqB;SACtB,CAAC,CAEF;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,UAAU,CACd;IAAA,EAAE,wBAAwB,CAAC,QAAQ,CAAC,CACrC,CAAC;AACJ,CAAC,CAAC;AAEF,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAC","sourcesContent":["import { FilterButtonGroupContext } from '@metamask/design-system-shared';\nimport { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React, { useMemo } from 'react';\nimport { ScrollView } from 'react-native';\n\nimport type { FilterButtonGroupProps } from './FilterButtonGroup.types';\n\nexport const FilterButtonGroup = ({\n  value,\n  onChange,\n  variant,\n  children,\n  twClassName,\n  style,\n  contentContainerStyle,\n  ...scrollRest\n}: FilterButtonGroupProps) => {\n  const tw = useTailwind();\n\n  const contextValue = useMemo(\n    () => ({ value, onChange, variant }),\n    [value, onChange, variant],\n  );\n\n  return (\n    <FilterButtonGroupContext.Provider value={contextValue}>\n      <ScrollView\n        {...scrollRest}\n        horizontal\n        showsHorizontalScrollIndicator={false}\n        accessibilityRole=\"tablist\"\n        style={[tw.style('self-stretch'), style]}\n        contentContainerStyle={[\n          tw.style('flex flex-row items-center gap-1', twClassName),\n          contentContainerStyle,\n        ]}\n      >\n        {children}\n      </ScrollView>\n    </FilterButtonGroupContext.Provider>\n  );\n};\n\nFilterButtonGroup.displayName = 'FilterButtonGroup';\n"]}

package/dist/components/FilterButtonGroup/FilterButtonGroup.types.cjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterButtonGroup.types.cjs","sourceRoot":"","sources":["../../../src/components/FilterButtonGroup/FilterButtonGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { FilterButtonGroupPropsShared } from '@metamask/design-system-shared';\nimport type { ScrollViewProps } from 'react-native';\n\n/**\n * FilterButtonGroup component props.\n */\nexport type FilterButtonGroupProps = FilterButtonGroupPropsShared &\n  Omit<ScrollViewProps, 'horizontal' | 'showsHorizontalScrollIndicator'> & {\n    /**\n     * Optional twrnc classes merged into `contentContainerStyle` after the default row layout.\n     */\n    twClassName?: string;\n  };\n"]}

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

@@ -0,0 +1,12 @@
+import type { FilterButtonGroupPropsShared } from "@metamask/design-system-shared";
+import type { ScrollViewProps } from "react-native";
+/**
+ * FilterButtonGroup component props.
+ */
+export type FilterButtonGroupProps = FilterButtonGroupPropsShared & Omit<ScrollViewProps, 'horizontal' | 'showsHorizontalScrollIndicator'> & {
+    /**
+     * Optional twrnc classes merged into `contentContainerStyle` after the default row layout.
+     */
+    twClassName?: string;
+};
+//# sourceMappingURL=FilterButtonGroup.types.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterButtonGroup.types.d.cts","sourceRoot":"","sources":["../../../src/components/FilterButtonGroup/FilterButtonGroup.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,4BAA4B,EAAE,uCAAuC;AACnF,OAAO,KAAK,EAAE,eAAe,EAAE,qBAAqB;AAEpD;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG,4BAA4B,GAC/D,IAAI,CAAC,eAAe,EAAE,YAAY,GAAG,gCAAgC,CAAC,GAAG;IACvE;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC"}

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

@@ -0,0 +1,12 @@
+import type { FilterButtonGroupPropsShared } from "@metamask/design-system-shared";
+import type { ScrollViewProps } from "react-native";
+/**
+ * FilterButtonGroup component props.
+ */
+export type FilterButtonGroupProps = FilterButtonGroupPropsShared & Omit<ScrollViewProps, 'horizontal' | 'showsHorizontalScrollIndicator'> & {
+    /**
+     * Optional twrnc classes merged into `contentContainerStyle` after the default row layout.
+     */
+    twClassName?: string;
+};
+//# sourceMappingURL=FilterButtonGroup.types.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterButtonGroup.types.d.mts","sourceRoot":"","sources":["../../../src/components/FilterButtonGroup/FilterButtonGroup.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,4BAA4B,EAAE,uCAAuC;AACnF,OAAO,KAAK,EAAE,eAAe,EAAE,qBAAqB;AAEpD;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG,4BAA4B,GAC/D,IAAI,CAAC,eAAe,EAAE,YAAY,GAAG,gCAAgC,CAAC,GAAG;IACvE;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC"}

package/dist/components/FilterButtonGroup/FilterButtonGroup.types.mjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterButtonGroup.types.mjs","sourceRoot":"","sources":["../../../src/components/FilterButtonGroup/FilterButtonGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { FilterButtonGroupPropsShared } from '@metamask/design-system-shared';\nimport type { ScrollViewProps } from 'react-native';\n\n/**\n * FilterButtonGroup component props.\n */\nexport type FilterButtonGroupProps = FilterButtonGroupPropsShared &\n  Omit<ScrollViewProps, 'horizontal' | 'showsHorizontalScrollIndicator'> & {\n    /**\n     * Optional twrnc classes merged into `contentContainerStyle` after the default row layout.\n     */\n    twClassName?: string;\n  };\n"]}

package/dist/components/FilterButtonGroup/index.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FilterButtonGroup = void 0;
+var FilterButtonGroup_1 = require("./FilterButtonGroup.cjs");
+Object.defineProperty(exports, "FilterButtonGroup", { enumerable: true, get: function () { return FilterButtonGroup_1.FilterButtonGroup; } });
+//# sourceMappingURL=index.cjs.map

package/dist/components/FilterButtonGroup/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/FilterButtonGroup/index.ts"],"names":[],"mappings":";;;AAAA,6DAAwD;AAA/C,sHAAA,iBAAiB,OAAA","sourcesContent":["export { FilterButtonGroup } from './FilterButtonGroup';\nexport type { FilterButtonGroupProps } from './FilterButtonGroup.types';\n"]}

package/dist/components/FilterButtonGroup/index.d.cts

@@ -0,0 +1,3 @@
+export { FilterButtonGroup } from "./FilterButtonGroup.cjs";
+export type { FilterButtonGroupProps } from "./FilterButtonGroup.types.cjs";
+//# sourceMappingURL=index.d.cts.map

package/dist/components/FilterButtonGroup/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/FilterButtonGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,gCAA4B;AACxD,YAAY,EAAE,sBAAsB,EAAE,sCAAkC"}

package/dist/components/FilterButtonGroup/index.d.mts

@@ -0,0 +1,3 @@
+export { FilterButtonGroup } from "./FilterButtonGroup.mjs";
+export type { FilterButtonGroupProps } from "./FilterButtonGroup.types.mjs";
+//# sourceMappingURL=index.d.mts.map

package/dist/components/FilterButtonGroup/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/FilterButtonGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,gCAA4B;AACxD,YAAY,EAAE,sBAAsB,EAAE,sCAAkC"}

package/dist/components/FilterButtonGroup/index.mjs

@@ -0,0 +1,2 @@
+export { FilterButtonGroup } from "./FilterButtonGroup.mjs";
+//# sourceMappingURL=index.mjs.map

package/dist/components/FilterButtonGroup/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/FilterButtonGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,gCAA4B","sourcesContent":["export { FilterButtonGroup } from './FilterButtonGroup';\nexport type { FilterButtonGroupProps } from './FilterButtonGroup.types';\n"]}

package/dist/components/HeaderRoot/HeaderRoot.cjs

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HeaderRoot = void 0;
 // Third party dependencies.
+const design_system_shared_1 = require("@metamask/design-system-shared");
 const react_1 = __importDefault(require("react"));
 const react_native_safe_area_context_1 = require("react-native-safe-area-context");
 // External dependencies.
@@ -40,7 +41,7 @@ const HeaderRoot = ({ children, title, titleProps, titleAccessory, endAccessory,
         }
         return null;
     };
-    return (<Box_1.Box flexDirection={Box_1.BoxFlexDirection.Row} alignItems={Box_1.BoxAlignItems.Center} gap={4} paddingLeft={4} paddingRight={2} twClassName={`min-h-14 ${twClassName ?? ''}`.trim()} style={[includesTopInset && { marginTop: insets.top }, style]} testID={testID} {...viewProps}>
+    return (<Box_1.Box flexDirection={Box_1.BoxFlexDirection.Row} alignItems={Box_1.BoxAlignItems.Center} gap={4} paddingLeft={4} paddingRight={2} twClassName={(0, design_system_shared_1.mergeTwClassName)('min-h-14', twClassName)} style={[includesTopInset && { marginTop: insets.top }, style]} testID={testID} {...viewProps}>
       {renderLeftSection()}
       {endSectionContent ? (<Box_1.Box flexDirection={Box_1.BoxFlexDirection.Row} gap={2} twClassName="ml-auto">
           {endSectionContent}

package/dist/components/HeaderRoot/HeaderRoot.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderRoot.cjs","sourceRoot":"","sources":["../../../src/components/HeaderRoot/HeaderRoot.tsx"],"names":[],"mappings":";;;;;;AAAA,4BAA4B;AAC5B,kDAA0B;AAC1B,mFAAmE;AAEnE,yBAAyB;AACzB,0CAA8D;AAC9D,gDAAmC;AACnC,wDAA2D;AAC3D,4CAAsC;AAK/B,MAAM,UAAU,GAAG,CAAC,EACzB,QAAQ,EACR,KAAK,EACL,UAAU,EACV,cAAc,EACd,YAAY,EACZ,kBAAkB,EAClB,gBAAgB,GAAG,KAAK,EACxB,KAAK,EACL,MAAM,EACN,WAAW,EACX,GAAG,SAAS,EACI,EAAE,EAAE;IACpB,MAAM,MAAM,GAAG,IAAA,kDAAiB,GAAE,CAAC;IAEnC,MAAM,iBAAiB,GAAG,CAAC,GAAG,EAAE;QAC9B,IAAI,YAAY,EAAE;YAChB,OAAO,YAAY,CAAC;SACrB;QACD,IAAI,kBAAkB,IAAI,kBAAkB,CAAC,MAAM,GAAG,CAAC,EAAE;YACvD,MAAM,aAAa,GAAG,kBAAkB;iBACrC,GAAG,CAAC,CAAC,KAAK,EAAE,aAAa,EAAE,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,CAAC,CAAC;iBACzD,OAAO,EAAE,CAAC;YACb,OAAO,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC,CACrD,CAAC,uBAAU,CACT,GAAG,CAAC,CAAC,mBAAmB,aAAa,EAAE,CAAC,CACxC,IAAI,CAAC,CAAC,2BAAc,CAAC,EAAE,CAAC,CACxB,IAAI,KAAK,CAAC,EACV,CACH,CAAC,CAAC;SACJ;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC,EAAE,CAAC;IAEL,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,IAAI,QAAQ,EAAE;YACZ,OAAO,QAAQ,CAAC;SACjB;QACD,IAAI,KAAK,EAAE;YACT,OAAO,CACL,CAAC,eAAM,CACL,YAAY,CAAC,CAAC,cAAc,CAAC,CAC7B,SAAS,CAAC,CAAC;oBACT,OAAO,EAAE,kBAAW,CAAC,SAAS;oBAC9B,GAAG,UAAU;iBACd,CAAC,CACF,WAAW,CAAC,QAAQ,CAEpB;UAAA,CAAC,KAAK,CACR;QAAA,EAAE,eAAM,CAAC,CACV,CAAC;SACH;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,SAAG,CACF,aAAa,CAAC,CAAC,sBAAgB,CAAC,GAAG,CAAC,CACpC,UAAU,CAAC,CAAC,mBAAa,CAAC,MAAM,CAAC,CACjC,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,WAAW,CAAC,CAAC,CAAC,CAAC,CACf,YAAY,CAAC,CAAC,CAAC,CAAC,CAChB,WAAW,CAAC,CAAC,YAAY,WAAW,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,CAAC,CACpD,KAAK,CAAC,CAAC,CAAC,gBAAgB,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,GAAG,EAAE,EAAE,KAAK,CAAC,CAAC,CAC9D,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,IAAI,SAAS,CAAC,CAEd;MAAA,CAAC,iBAAiB,EAAE,CACpB;MAAA,CAAC,iBAAiB,CAAC,CAAC,CAAC,CACnB,CAAC,SAAG,CAAC,aAAa,CAAC,CAAC,sBAAgB,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,SAAS,CACrE;UAAA,CAAC,iBAAiB,CACpB;QAAA,EAAE,SAAG,CAAC,CACP,CAAC,CAAC,CAAC,IAAI,CACV;IAAA,EAAE,SAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AA3EW,QAAA,UAAU,cA2ErB;AAEF,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["// Third party dependencies.\nimport React from 'react';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\n// External dependencies.\nimport { Box, BoxAlignItems, BoxFlexDirection } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { ButtonIcon, ButtonIconSize } from '../ButtonIcon';\nimport { TextVariant } from '../Text';\n\n// Internal dependencies.\nimport type { HeaderRootProps } from './HeaderRoot.types';\n\nexport const HeaderRoot = ({\n  children,\n  title,\n  titleProps,\n  titleAccessory,\n  endAccessory,\n  endButtonIconProps,\n  includesTopInset = false,\n  style,\n  testID,\n  twClassName,\n  ...viewProps\n}: HeaderRootProps) => {\n  const insets = useSafeAreaInsets();\n\n  const endSectionContent = (() => {\n    if (endAccessory) {\n      return endAccessory;\n    }\n    if (endButtonIconProps && endButtonIconProps.length > 0) {\n      const reversedProps = endButtonIconProps\n        .map((props, originalIndex) => ({ props, originalIndex }))\n        .reverse();\n      return reversedProps.map(({ props, originalIndex }) => (\n        <ButtonIcon\n          key={`end-button-icon-${originalIndex}`}\n          size={ButtonIconSize.Md}\n          {...props}\n        />\n      ));\n    }\n    return null;\n  })();\n\n  const renderLeftSection = () => {\n    if (children) {\n      return children;\n    }\n    if (title) {\n      return (\n        <BoxRow\n          endAccessory={titleAccessory}\n          textProps={{\n            variant: TextVariant.HeadingLg,\n            ...titleProps,\n          }}\n          twClassName=\"flex-1\"\n        >\n          {title}\n        </BoxRow>\n      );\n    }\n    return null;\n  };\n\n  return (\n    <Box\n      flexDirection={BoxFlexDirection.Row}\n      alignItems={BoxAlignItems.Center}\n      gap={4}\n      paddingLeft={4}\n      paddingRight={2}\n      twClassName={`min-h-14 ${twClassName ?? ''}`.trim()}\n      style={[includesTopInset && { marginTop: insets.top }, style]}\n      testID={testID}\n      {...viewProps}\n    >\n      {renderLeftSection()}\n      {endSectionContent ? (\n        <Box flexDirection={BoxFlexDirection.Row} gap={2} twClassName=\"ml-auto\">\n          {endSectionContent}\n        </Box>\n      ) : null}\n    </Box>\n  );\n};\n\nHeaderRoot.displayName = 'HeaderRoot';\n"]}
+{"version":3,"file":"HeaderRoot.cjs","sourceRoot":"","sources":["../../../src/components/HeaderRoot/HeaderRoot.tsx"],"names":[],"mappings":"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","sourcesContent":["// Third party dependencies.\nimport { mergeTwClassName } from '@metamask/design-system-shared';\nimport React from 'react';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\n// External dependencies.\nimport { Box, BoxAlignItems, BoxFlexDirection } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { ButtonIcon, ButtonIconSize } from '../ButtonIcon';\nimport { TextVariant } from '../Text';\n\n// Internal dependencies.\nimport type { HeaderRootProps } from './HeaderRoot.types';\n\nexport const HeaderRoot = ({\n  children,\n  title,\n  titleProps,\n  titleAccessory,\n  endAccessory,\n  endButtonIconProps,\n  includesTopInset = false,\n  style,\n  testID,\n  twClassName,\n  ...viewProps\n}: HeaderRootProps) => {\n  const insets = useSafeAreaInsets();\n\n  const endSectionContent = (() => {\n    if (endAccessory) {\n      return endAccessory;\n    }\n    if (endButtonIconProps && endButtonIconProps.length > 0) {\n      const reversedProps = endButtonIconProps\n        .map((props, originalIndex) => ({ props, originalIndex }))\n        .reverse();\n      return reversedProps.map(({ props, originalIndex }) => (\n        <ButtonIcon\n          key={`end-button-icon-${originalIndex}`}\n          size={ButtonIconSize.Md}\n          {...props}\n        />\n      ));\n    }\n    return null;\n  })();\n\n  const renderLeftSection = () => {\n    if (children) {\n      return children;\n    }\n    if (title) {\n      return (\n        <BoxRow\n          endAccessory={titleAccessory}\n          textProps={{\n            variant: TextVariant.HeadingLg,\n            ...titleProps,\n          }}\n          twClassName=\"flex-1\"\n        >\n          {title}\n        </BoxRow>\n      );\n    }\n    return null;\n  };\n\n  return (\n    <Box\n      flexDirection={BoxFlexDirection.Row}\n      alignItems={BoxAlignItems.Center}\n      gap={4}\n      paddingLeft={4}\n      paddingRight={2}\n      twClassName={mergeTwClassName('min-h-14', twClassName)}\n      style={[includesTopInset && { marginTop: insets.top }, style]}\n      testID={testID}\n      {...viewProps}\n    >\n      {renderLeftSection()}\n      {endSectionContent ? (\n        <Box flexDirection={BoxFlexDirection.Row} gap={2} twClassName=\"ml-auto\">\n          {endSectionContent}\n        </Box>\n      ) : null}\n    </Box>\n  );\n};\n\nHeaderRoot.displayName = 'HeaderRoot';\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderRoot.d.cts","sourceRoot":"","sources":["../../../src/components/HeaderRoot/HeaderRoot.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAU1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU;oJAYpB,eAAe;;CA+DjB,CAAC"}
+{"version":3,"file":"HeaderRoot.d.cts","sourceRoot":"","sources":["../../../src/components/HeaderRoot/HeaderRoot.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,cAAc;AAU1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU;oJAYpB,eAAe;;CA+DjB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderRoot.d.mts","sourceRoot":"","sources":["../../../src/components/HeaderRoot/HeaderRoot.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAU1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU;oJAYpB,eAAe;;CA+DjB,CAAC"}
+{"version":3,"file":"HeaderRoot.d.mts","sourceRoot":"","sources":["../../../src/components/HeaderRoot/HeaderRoot.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,cAAc;AAU1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D,eAAO,MAAM,UAAU;oJAYpB,eAAe;;CA+DjB,CAAC"}

package/dist/components/HeaderRoot/HeaderRoot.mjs

@@ -5,6 +5,7 @@ function $importDefault(module) {
     return module;
 }
 // Third party dependencies.
+import { mergeTwClassName } from "@metamask/design-system-shared";
 import $React from "react";
 const React = $importDefault($React);
 import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -41,7 +42,7 @@ export const HeaderRoot = ({ children, title, titleProps, titleAccessory, endAcc
         }
         return null;
     };
-    return (<Box flexDirection={BoxFlexDirection.Row} alignItems={BoxAlignItems.Center} gap={4} paddingLeft={4} paddingRight={2} twClassName={`min-h-14 ${twClassName ?? ''}`.trim()} style={[includesTopInset && { marginTop: insets.top }, style]} testID={testID} {...viewProps}>
+    return (<Box flexDirection={BoxFlexDirection.Row} alignItems={BoxAlignItems.Center} gap={4} paddingLeft={4} paddingRight={2} twClassName={mergeTwClassName('min-h-14', twClassName)} style={[includesTopInset && { marginTop: insets.top }, style]} testID={testID} {...viewProps}>
       {renderLeftSection()}
       {endSectionContent ? (<Box flexDirection={BoxFlexDirection.Row} gap={2} twClassName="ml-auto">
           {endSectionContent}

package/dist/components/HeaderRoot/HeaderRoot.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderRoot.mjs","sourceRoot":"","sources":["../../../src/components/HeaderRoot/HeaderRoot.tsx"],"names":[],"mappings":"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","sourcesContent":["// Third party dependencies.\nimport React from 'react';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\n// External dependencies.\nimport { Box, BoxAlignItems, BoxFlexDirection } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { ButtonIcon, ButtonIconSize } from '../ButtonIcon';\nimport { TextVariant } from '../Text';\n\n// Internal dependencies.\nimport type { HeaderRootProps } from './HeaderRoot.types';\n\nexport const HeaderRoot = ({\n  children,\n  title,\n  titleProps,\n  titleAccessory,\n  endAccessory,\n  endButtonIconProps,\n  includesTopInset = false,\n  style,\n  testID,\n  twClassName,\n  ...viewProps\n}: HeaderRootProps) => {\n  const insets = useSafeAreaInsets();\n\n  const endSectionContent = (() => {\n    if (endAccessory) {\n      return endAccessory;\n    }\n    if (endButtonIconProps && endButtonIconProps.length > 0) {\n      const reversedProps = endButtonIconProps\n        .map((props, originalIndex) => ({ props, originalIndex }))\n        .reverse();\n      return reversedProps.map(({ props, originalIndex }) => (\n        <ButtonIcon\n          key={`end-button-icon-${originalIndex}`}\n          size={ButtonIconSize.Md}\n          {...props}\n        />\n      ));\n    }\n    return null;\n  })();\n\n  const renderLeftSection = () => {\n    if (children) {\n      return children;\n    }\n    if (title) {\n      return (\n        <BoxRow\n          endAccessory={titleAccessory}\n          textProps={{\n            variant: TextVariant.HeadingLg,\n            ...titleProps,\n          }}\n          twClassName=\"flex-1\"\n        >\n          {title}\n        </BoxRow>\n      );\n    }\n    return null;\n  };\n\n  return (\n    <Box\n      flexDirection={BoxFlexDirection.Row}\n      alignItems={BoxAlignItems.Center}\n      gap={4}\n      paddingLeft={4}\n      paddingRight={2}\n      twClassName={`min-h-14 ${twClassName ?? ''}`.trim()}\n      style={[includesTopInset && { marginTop: insets.top }, style]}\n      testID={testID}\n      {...viewProps}\n    >\n      {renderLeftSection()}\n      {endSectionContent ? (\n        <Box flexDirection={BoxFlexDirection.Row} gap={2} twClassName=\"ml-auto\">\n          {endSectionContent}\n        </Box>\n      ) : null}\n    </Box>\n  );\n};\n\nHeaderRoot.displayName = 'HeaderRoot';\n"]}
+{"version":3,"file":"HeaderRoot.mjs","sourceRoot":"","sources":["../../../src/components/HeaderRoot/HeaderRoot.tsx"],"names":[],"mappings":"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","sourcesContent":["// Third party dependencies.\nimport { mergeTwClassName } from '@metamask/design-system-shared';\nimport React from 'react';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\n// External dependencies.\nimport { Box, BoxAlignItems, BoxFlexDirection } from '../Box';\nimport { BoxRow } from '../BoxRow';\nimport { ButtonIcon, ButtonIconSize } from '../ButtonIcon';\nimport { TextVariant } from '../Text';\n\n// Internal dependencies.\nimport type { HeaderRootProps } from './HeaderRoot.types';\n\nexport const HeaderRoot = ({\n  children,\n  title,\n  titleProps,\n  titleAccessory,\n  endAccessory,\n  endButtonIconProps,\n  includesTopInset = false,\n  style,\n  testID,\n  twClassName,\n  ...viewProps\n}: HeaderRootProps) => {\n  const insets = useSafeAreaInsets();\n\n  const endSectionContent = (() => {\n    if (endAccessory) {\n      return endAccessory;\n    }\n    if (endButtonIconProps && endButtonIconProps.length > 0) {\n      const reversedProps = endButtonIconProps\n        .map((props, originalIndex) => ({ props, originalIndex }))\n        .reverse();\n      return reversedProps.map(({ props, originalIndex }) => (\n        <ButtonIcon\n          key={`end-button-icon-${originalIndex}`}\n          size={ButtonIconSize.Md}\n          {...props}\n        />\n      ));\n    }\n    return null;\n  })();\n\n  const renderLeftSection = () => {\n    if (children) {\n      return children;\n    }\n    if (title) {\n      return (\n        <BoxRow\n          endAccessory={titleAccessory}\n          textProps={{\n            variant: TextVariant.HeadingLg,\n            ...titleProps,\n          }}\n          twClassName=\"flex-1\"\n        >\n          {title}\n        </BoxRow>\n      );\n    }\n    return null;\n  };\n\n  return (\n    <Box\n      flexDirection={BoxFlexDirection.Row}\n      alignItems={BoxAlignItems.Center}\n      gap={4}\n      paddingLeft={4}\n      paddingRight={2}\n      twClassName={mergeTwClassName('min-h-14', twClassName)}\n      style={[includesTopInset && { marginTop: insets.top }, style]}\n      testID={testID}\n      {...viewProps}\n    >\n      {renderLeftSection()}\n      {endSectionContent ? (\n        <Box flexDirection={BoxFlexDirection.Row} gap={2} twClassName=\"ml-auto\">\n          {endSectionContent}\n        </Box>\n      ) : null}\n    </Box>\n  );\n};\n\nHeaderRoot.displayName = 'HeaderRoot';\n"]}

package/dist/components/HeaderStandard/HeaderStandard.cjs

@@ -25,6 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HeaderStandard = void 0;
 // Third party dependencies.
+const design_system_shared_1 = require("@metamask/design-system-shared");
 const react_1 = __importStar(require("react"));
 const HeaderBase_1 = require("../HeaderBase/index.cjs");
 const Icon_1 = require("../Icon/index.cjs");
@@ -68,7 +69,7 @@ const HeaderStandard = ({ title, titleProps, subtitle, subtitleProps, children,
         }
         return null;
     };
-    return (<HeaderBase_1.HeaderBase testID={testID} startButtonIconProps={resolvedStartButtonIconProps} endButtonIconProps={resolvedEndButtonIconProps} {...headerBaseProps} twClassName={`px-2 ${twClassName}`}>
+    return (<HeaderBase_1.HeaderBase testID={testID} startButtonIconProps={resolvedStartButtonIconProps} endButtonIconProps={resolvedEndButtonIconProps} {...headerBaseProps} twClassName={(0, design_system_shared_1.mergeTwClassName)('px-2', twClassName)}>
       {renderContent()}
     </HeaderBase_1.HeaderBase>);
 };

package/dist/components/HeaderStandard/HeaderStandard.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderStandard.cjs","sourceRoot":"","sources":["../../../src/components/HeaderStandard/HeaderStandard.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,4BAA4B;AAC5B,+CAAuC;AAIvC,wDAA2C;AAC3C,4CAAmC;AACnC,wGAA2F;AAKpF,MAAM,cAAc,GAAkC,CAAC,EAC5D,KAAK,EACL,UAAU,EACV,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,MAAM,EACN,eAAe,EACf,OAAO,EACP,gBAAgB,EAChB,kBAAkB,EAClB,oBAAoB,EACpB,WAAW,GAAG,EAAE,EAChB,MAAM,EACN,GAAG,eAAe,EACnB,EAAE,EAAE;IACH,MAAM,4BAA4B,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAChD,IAAI,oBAAoB,EAAE;YACxB,OAAO,oBAAoB,CAAC;SAC7B;QACD,IAAI,MAAM,IAAI,eAAe,EAAE;YAC7B,MAAM,UAAU,GAAoB;gBAClC,QAAQ,EAAE,eAAQ,CAAC,SAAS;gBAC5B,GAAG,CAAC,eAAe,IAAI,EAAE,CAAC;gBAC1B,OAAO,EAAE,eAAe,EAAE,OAAO,IAAI,MAAM;aAC5C,CAAC;YACF,OAAO,UAAU,CAAC;SACnB;QACD,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAEpD,MAAM,0BAA0B,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC9C,MAAM,KAAK,GAAsB,EAAE,CAAC;QAEpC,IAAI,OAAO,IAAI,gBAAgB,EAAE;YAC/B,MAAM,UAAU,GAAoB;gBAClC,QAAQ,EAAE,eAAQ,CAAC,KAAK;gBACxB,GAAG,CAAC,gBAAgB,IAAI,EAAE,CAAC;gBAC3B,OAAO,EAAE,gBAAgB,EAAE,OAAO,IAAI,OAAO;aAC9C,CAAC;YACF,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;SACxB;QAED,IAAI,kBAAkB,EAAE;YACtB,KAAK,CAAC,IAAI,CAAC,GAAG,kBAAkB,CAAC,CAAC;SACnC;QACD,OAAO,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;IAC9C,CAAC,EAAE,CAAC,kBAAkB,EAAE,OAAO,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAEpD,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,IAAI,QAAQ,EAAE;YACZ,OAAO,QAAQ,CAAC;SACjB;QACD,IAAI,KAAK,EAAE;YACT,OAAO,CACL,CAAC,uDAA0B,CACzB,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,aAAa,CAAC,CAAC,aAAa,CAAC,EAC7B,CACH,CAAC;SACH;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,uBAAU,CACT,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,oBAAoB,CAAC,CAAC,4BAA4B,CAAC,CACnD,kBAAkB,CAAC,CAAC,0BAA0B,CAAC,CAC/C,IAAI,eAAe,CAAC,CACpB,WAAW,CAAC,CAAC,QAAQ,WAAW,EAAE,CAAC,CAEnC;MAAA,CAAC,aAAa,EAAE,CAClB;IAAA,EAAE,uBAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC;AA7EW,QAAA,cAAc,kBA6EzB;AAEF,sBAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC","sourcesContent":["// Third party dependencies.\nimport React, { useMemo } from 'react';\n\n// External dependencies.\nimport type { ButtonIconProps } from '../ButtonIcon';\nimport { HeaderBase } from '../HeaderBase';\nimport { IconName } from '../Icon';\nimport { HeaderStandardCenterColumn } from '../temp-components/HeaderStandardCenterColumn';\n\n// Internal dependencies.\nimport type { HeaderStandardProps } from './HeaderStandard.types';\n\nexport const HeaderStandard: React.FC<HeaderStandardProps> = ({\n  title,\n  titleProps,\n  subtitle,\n  subtitleProps,\n  children,\n  onBack,\n  backButtonProps,\n  onClose,\n  closeButtonProps,\n  endButtonIconProps,\n  startButtonIconProps,\n  twClassName = '',\n  testID,\n  ...headerBaseProps\n}) => {\n  const resolvedStartButtonIconProps = useMemo(() => {\n    if (startButtonIconProps) {\n      return startButtonIconProps;\n    }\n    if (onBack || backButtonProps) {\n      const startProps: ButtonIconProps = {\n        iconName: IconName.ArrowLeft,\n        ...(backButtonProps ?? {}),\n        onPress: backButtonProps?.onPress ?? onBack,\n      };\n      return startProps;\n    }\n    return undefined;\n  }, [onBack, backButtonProps, startButtonIconProps]);\n\n  const resolvedEndButtonIconProps = useMemo(() => {\n    const props: ButtonIconProps[] = [];\n\n    if (onClose || closeButtonProps) {\n      const closeProps: ButtonIconProps = {\n        iconName: IconName.Close,\n        ...(closeButtonProps || {}),\n        onPress: closeButtonProps?.onPress ?? onClose,\n      };\n      props.push(closeProps);\n    }\n\n    if (endButtonIconProps) {\n      props.push(...endButtonIconProps);\n    }\n    return props.length > 0 ? props : undefined;\n  }, [endButtonIconProps, onClose, closeButtonProps]);\n\n  const renderContent = () => {\n    if (children) {\n      return children;\n    }\n    if (title) {\n      return (\n        <HeaderStandardCenterColumn\n          title={title}\n          titleProps={titleProps}\n          subtitle={subtitle}\n          subtitleProps={subtitleProps}\n        />\n      );\n    }\n    return null;\n  };\n\n  return (\n    <HeaderBase\n      testID={testID}\n      startButtonIconProps={resolvedStartButtonIconProps}\n      endButtonIconProps={resolvedEndButtonIconProps}\n      {...headerBaseProps}\n      twClassName={`px-2 ${twClassName}`}\n    >\n      {renderContent()}\n    </HeaderBase>\n  );\n};\n\nHeaderStandard.displayName = 'HeaderStandard';\n"]}
+{"version":3,"file":"HeaderStandard.cjs","sourceRoot":"","sources":["../../../src/components/HeaderStandard/HeaderStandard.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,4BAA4B;AAC5B,yEAAkE;AAClE,+CAAuC;AAIvC,wDAA2C;AAC3C,4CAAmC;AACnC,wGAA2F;AAKpF,MAAM,cAAc,GAAkC,CAAC,EAC5D,KAAK,EACL,UAAU,EACV,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,MAAM,EACN,eAAe,EACf,OAAO,EACP,gBAAgB,EAChB,kBAAkB,EAClB,oBAAoB,EACpB,WAAW,GAAG,EAAE,EAChB,MAAM,EACN,GAAG,eAAe,EACnB,EAAE,EAAE;IACH,MAAM,4BAA4B,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAChD,IAAI,oBAAoB,EAAE;YACxB,OAAO,oBAAoB,CAAC;SAC7B;QACD,IAAI,MAAM,IAAI,eAAe,EAAE;YAC7B,MAAM,UAAU,GAAoB;gBAClC,QAAQ,EAAE,eAAQ,CAAC,SAAS;gBAC5B,GAAG,CAAC,eAAe,IAAI,EAAE,CAAC;gBAC1B,OAAO,EAAE,eAAe,EAAE,OAAO,IAAI,MAAM;aAC5C,CAAC;YACF,OAAO,UAAU,CAAC;SACnB;QACD,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAEpD,MAAM,0BAA0B,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC9C,MAAM,KAAK,GAAsB,EAAE,CAAC;QAEpC,IAAI,OAAO,IAAI,gBAAgB,EAAE;YAC/B,MAAM,UAAU,GAAoB;gBAClC,QAAQ,EAAE,eAAQ,CAAC,KAAK;gBACxB,GAAG,CAAC,gBAAgB,IAAI,EAAE,CAAC;gBAC3B,OAAO,EAAE,gBAAgB,EAAE,OAAO,IAAI,OAAO;aAC9C,CAAC;YACF,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;SACxB;QAED,IAAI,kBAAkB,EAAE;YACtB,KAAK,CAAC,IAAI,CAAC,GAAG,kBAAkB,CAAC,CAAC;SACnC;QACD,OAAO,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;IAC9C,CAAC,EAAE,CAAC,kBAAkB,EAAE,OAAO,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAEpD,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,IAAI,QAAQ,EAAE;YACZ,OAAO,QAAQ,CAAC;SACjB;QACD,IAAI,KAAK,EAAE;YACT,OAAO,CACL,CAAC,uDAA0B,CACzB,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,aAAa,CAAC,CAAC,aAAa,CAAC,EAC7B,CACH,CAAC;SACH;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,uBAAU,CACT,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,oBAAoB,CAAC,CAAC,4BAA4B,CAAC,CACnD,kBAAkB,CAAC,CAAC,0BAA0B,CAAC,CAC/C,IAAI,eAAe,CAAC,CACpB,WAAW,CAAC,CAAC,IAAA,uCAAgB,EAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAEnD;MAAA,CAAC,aAAa,EAAE,CAClB;IAAA,EAAE,uBAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC;AA7EW,QAAA,cAAc,kBA6EzB;AAEF,sBAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC","sourcesContent":["// Third party dependencies.\nimport { mergeTwClassName } from '@metamask/design-system-shared';\nimport React, { useMemo } from 'react';\n\n// External dependencies.\nimport type { ButtonIconProps } from '../ButtonIcon';\nimport { HeaderBase } from '../HeaderBase';\nimport { IconName } from '../Icon';\nimport { HeaderStandardCenterColumn } from '../temp-components/HeaderStandardCenterColumn';\n\n// Internal dependencies.\nimport type { HeaderStandardProps } from './HeaderStandard.types';\n\nexport const HeaderStandard: React.FC<HeaderStandardProps> = ({\n  title,\n  titleProps,\n  subtitle,\n  subtitleProps,\n  children,\n  onBack,\n  backButtonProps,\n  onClose,\n  closeButtonProps,\n  endButtonIconProps,\n  startButtonIconProps,\n  twClassName = '',\n  testID,\n  ...headerBaseProps\n}) => {\n  const resolvedStartButtonIconProps = useMemo(() => {\n    if (startButtonIconProps) {\n      return startButtonIconProps;\n    }\n    if (onBack || backButtonProps) {\n      const startProps: ButtonIconProps = {\n        iconName: IconName.ArrowLeft,\n        ...(backButtonProps ?? {}),\n        onPress: backButtonProps?.onPress ?? onBack,\n      };\n      return startProps;\n    }\n    return undefined;\n  }, [onBack, backButtonProps, startButtonIconProps]);\n\n  const resolvedEndButtonIconProps = useMemo(() => {\n    const props: ButtonIconProps[] = [];\n\n    if (onClose || closeButtonProps) {\n      const closeProps: ButtonIconProps = {\n        iconName: IconName.Close,\n        ...(closeButtonProps || {}),\n        onPress: closeButtonProps?.onPress ?? onClose,\n      };\n      props.push(closeProps);\n    }\n\n    if (endButtonIconProps) {\n      props.push(...endButtonIconProps);\n    }\n    return props.length > 0 ? props : undefined;\n  }, [endButtonIconProps, onClose, closeButtonProps]);\n\n  const renderContent = () => {\n    if (children) {\n      return children;\n    }\n    if (title) {\n      return (\n        <HeaderStandardCenterColumn\n          title={title}\n          titleProps={titleProps}\n          subtitle={subtitle}\n          subtitleProps={subtitleProps}\n        />\n      );\n    }\n    return null;\n  };\n\n  return (\n    <HeaderBase\n      testID={testID}\n      startButtonIconProps={resolvedStartButtonIconProps}\n      endButtonIconProps={resolvedEndButtonIconProps}\n      {...headerBaseProps}\n      twClassName={mergeTwClassName('px-2', twClassName)}\n    >\n      {renderContent()}\n    </HeaderBase>\n  );\n};\n\nHeaderStandard.displayName = 'HeaderStandard';\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderStandard.d.cts","sourceRoot":"","sources":["../../../src/components/HeaderStandard/HeaderStandard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,cAAc;AASvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,mCAA+B;AAElE,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA6ExD,CAAC"}
+{"version":3,"file":"HeaderStandard.d.cts","sourceRoot":"","sources":["../../../src/components/HeaderStandard/HeaderStandard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkB,cAAc;AASvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,mCAA+B;AAElE,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA6ExD,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderStandard.d.mts","sourceRoot":"","sources":["../../../src/components/HeaderStandard/HeaderStandard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,cAAc;AASvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,mCAA+B;AAElE,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA6ExD,CAAC"}
+{"version":3,"file":"HeaderStandard.d.mts","sourceRoot":"","sources":["../../../src/components/HeaderStandard/HeaderStandard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkB,cAAc;AASvC,OAAO,KAAK,EAAE,mBAAmB,EAAE,mCAA+B;AAElE,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA6ExD,CAAC"}

package/dist/components/HeaderStandard/HeaderStandard.mjs

@@ -5,6 +5,7 @@ function $importDefault(module) {
     return module;
 }
 // Third party dependencies.
+import { mergeTwClassName } from "@metamask/design-system-shared";
 import $React, { useMemo } from "react";
 const React = $importDefault($React);
 import { HeaderBase } from "../HeaderBase/index.mjs";
@@ -49,7 +50,7 @@ export const HeaderStandard = ({ title, titleProps, subtitle, subtitleProps, chi
         }
         return null;
     };
-    return (<HeaderBase testID={testID} startButtonIconProps={resolvedStartButtonIconProps} endButtonIconProps={resolvedEndButtonIconProps} {...headerBaseProps} twClassName={`px-2 ${twClassName}`}>
+    return (<HeaderBase testID={testID} startButtonIconProps={resolvedStartButtonIconProps} endButtonIconProps={resolvedEndButtonIconProps} {...headerBaseProps} twClassName={mergeTwClassName('px-2', twClassName)}>
       {renderContent()}
     </HeaderBase>);
 };

package/dist/components/HeaderStandard/HeaderStandard.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderStandard.mjs","sourceRoot":"","sources":["../../../src/components/HeaderStandard/HeaderStandard.tsx"],"names":[],"mappings":";;;;;;AAAA,4BAA4B;AAC5B,OAAO,QAAO,EAAE,OAAO,EAAE,cAAc;;AAIvC,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAC3C,OAAO,EAAE,QAAQ,EAAE,0BAAgB;AACnC,OAAO,EAAE,0BAA0B,EAAE,gEAAsD;AAK3F,MAAM,CAAC,MAAM,cAAc,GAAkC,CAAC,EAC5D,KAAK,EACL,UAAU,EACV,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,MAAM,EACN,eAAe,EACf,OAAO,EACP,gBAAgB,EAChB,kBAAkB,EAClB,oBAAoB,EACpB,WAAW,GAAG,EAAE,EAChB,MAAM,EACN,GAAG,eAAe,EACnB,EAAE,EAAE;IACH,MAAM,4BAA4B,GAAG,OAAO,CAAC,GAAG,EAAE;QAChD,IAAI,oBAAoB,EAAE;YACxB,OAAO,oBAAoB,CAAC;SAC7B;QACD,IAAI,MAAM,IAAI,eAAe,EAAE;YAC7B,MAAM,UAAU,GAAoB;gBAClC,QAAQ,EAAE,QAAQ,CAAC,SAAS;gBAC5B,GAAG,CAAC,eAAe,IAAI,EAAE,CAAC;gBAC1B,OAAO,EAAE,eAAe,EAAE,OAAO,IAAI,MAAM;aAC5C,CAAC;YACF,OAAO,UAAU,CAAC;SACnB;QACD,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAEpD,MAAM,0BAA0B,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9C,MAAM,KAAK,GAAsB,EAAE,CAAC;QAEpC,IAAI,OAAO,IAAI,gBAAgB,EAAE;YAC/B,MAAM,UAAU,GAAoB;gBAClC,QAAQ,EAAE,QAAQ,CAAC,KAAK;gBACxB,GAAG,CAAC,gBAAgB,IAAI,EAAE,CAAC;gBAC3B,OAAO,EAAE,gBAAgB,EAAE,OAAO,IAAI,OAAO;aAC9C,CAAC;YACF,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;SACxB;QAED,IAAI,kBAAkB,EAAE;YACtB,KAAK,CAAC,IAAI,CAAC,GAAG,kBAAkB,CAAC,CAAC;SACnC;QACD,OAAO,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;IAC9C,CAAC,EAAE,CAAC,kBAAkB,EAAE,OAAO,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAEpD,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,IAAI,QAAQ,EAAE;YACZ,OAAO,QAAQ,CAAC;SACjB;QACD,IAAI,KAAK,EAAE;YACT,OAAO,CACL,CAAC,0BAA0B,CACzB,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,aAAa,CAAC,CAAC,aAAa,CAAC,EAC7B,CACH,CAAC;SACH;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,UAAU,CACT,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,oBAAoB,CAAC,CAAC,4BAA4B,CAAC,CACnD,kBAAkB,CAAC,CAAC,0BAA0B,CAAC,CAC/C,IAAI,eAAe,CAAC,CACpB,WAAW,CAAC,CAAC,QAAQ,WAAW,EAAE,CAAC,CAEnC;MAAA,CAAC,aAAa,EAAE,CAClB;IAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC","sourcesContent":["// Third party dependencies.\nimport React, { useMemo } from 'react';\n\n// External dependencies.\nimport type { ButtonIconProps } from '../ButtonIcon';\nimport { HeaderBase } from '../HeaderBase';\nimport { IconName } from '../Icon';\nimport { HeaderStandardCenterColumn } from '../temp-components/HeaderStandardCenterColumn';\n\n// Internal dependencies.\nimport type { HeaderStandardProps } from './HeaderStandard.types';\n\nexport const HeaderStandard: React.FC<HeaderStandardProps> = ({\n  title,\n  titleProps,\n  subtitle,\n  subtitleProps,\n  children,\n  onBack,\n  backButtonProps,\n  onClose,\n  closeButtonProps,\n  endButtonIconProps,\n  startButtonIconProps,\n  twClassName = '',\n  testID,\n  ...headerBaseProps\n}) => {\n  const resolvedStartButtonIconProps = useMemo(() => {\n    if (startButtonIconProps) {\n      return startButtonIconProps;\n    }\n    if (onBack || backButtonProps) {\n      const startProps: ButtonIconProps = {\n        iconName: IconName.ArrowLeft,\n        ...(backButtonProps ?? {}),\n        onPress: backButtonProps?.onPress ?? onBack,\n      };\n      return startProps;\n    }\n    return undefined;\n  }, [onBack, backButtonProps, startButtonIconProps]);\n\n  const resolvedEndButtonIconProps = useMemo(() => {\n    const props: ButtonIconProps[] = [];\n\n    if (onClose || closeButtonProps) {\n      const closeProps: ButtonIconProps = {\n        iconName: IconName.Close,\n        ...(closeButtonProps || {}),\n        onPress: closeButtonProps?.onPress ?? onClose,\n      };\n      props.push(closeProps);\n    }\n\n    if (endButtonIconProps) {\n      props.push(...endButtonIconProps);\n    }\n    return props.length > 0 ? props : undefined;\n  }, [endButtonIconProps, onClose, closeButtonProps]);\n\n  const renderContent = () => {\n    if (children) {\n      return children;\n    }\n    if (title) {\n      return (\n        <HeaderStandardCenterColumn\n          title={title}\n          titleProps={titleProps}\n          subtitle={subtitle}\n          subtitleProps={subtitleProps}\n        />\n      );\n    }\n    return null;\n  };\n\n  return (\n    <HeaderBase\n      testID={testID}\n      startButtonIconProps={resolvedStartButtonIconProps}\n      endButtonIconProps={resolvedEndButtonIconProps}\n      {...headerBaseProps}\n      twClassName={`px-2 ${twClassName}`}\n    >\n      {renderContent()}\n    </HeaderBase>\n  );\n};\n\nHeaderStandard.displayName = 'HeaderStandard';\n"]}
+{"version":3,"file":"HeaderStandard.mjs","sourceRoot":"","sources":["../../../src/components/HeaderStandard/HeaderStandard.tsx"],"names":[],"mappings":";;;;;;AAAA,4BAA4B;AAC5B,OAAO,EAAE,gBAAgB,EAAE,uCAAuC;AAClE,OAAO,QAAO,EAAE,OAAO,EAAE,cAAc;;AAIvC,OAAO,EAAE,UAAU,EAAE,gCAAsB;AAC3C,OAAO,EAAE,QAAQ,EAAE,0BAAgB;AACnC,OAAO,EAAE,0BAA0B,EAAE,gEAAsD;AAK3F,MAAM,CAAC,MAAM,cAAc,GAAkC,CAAC,EAC5D,KAAK,EACL,UAAU,EACV,QAAQ,EACR,aAAa,EACb,QAAQ,EACR,MAAM,EACN,eAAe,EACf,OAAO,EACP,gBAAgB,EAChB,kBAAkB,EAClB,oBAAoB,EACpB,WAAW,GAAG,EAAE,EAChB,MAAM,EACN,GAAG,eAAe,EACnB,EAAE,EAAE;IACH,MAAM,4BAA4B,GAAG,OAAO,CAAC,GAAG,EAAE;QAChD,IAAI,oBAAoB,EAAE;YACxB,OAAO,oBAAoB,CAAC;SAC7B;QACD,IAAI,MAAM,IAAI,eAAe,EAAE;YAC7B,MAAM,UAAU,GAAoB;gBAClC,QAAQ,EAAE,QAAQ,CAAC,SAAS;gBAC5B,GAAG,CAAC,eAAe,IAAI,EAAE,CAAC;gBAC1B,OAAO,EAAE,eAAe,EAAE,OAAO,IAAI,MAAM;aAC5C,CAAC;YACF,OAAO,UAAU,CAAC;SACnB;QACD,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,MAAM,EAAE,eAAe,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAEpD,MAAM,0BAA0B,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9C,MAAM,KAAK,GAAsB,EAAE,CAAC;QAEpC,IAAI,OAAO,IAAI,gBAAgB,EAAE;YAC/B,MAAM,UAAU,GAAoB;gBAClC,QAAQ,EAAE,QAAQ,CAAC,KAAK;gBACxB,GAAG,CAAC,gBAAgB,IAAI,EAAE,CAAC;gBAC3B,OAAO,EAAE,gBAAgB,EAAE,OAAO,IAAI,OAAO;aAC9C,CAAC;YACF,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;SACxB;QAED,IAAI,kBAAkB,EAAE;YACtB,KAAK,CAAC,IAAI,CAAC,GAAG,kBAAkB,CAAC,CAAC;SACnC;QACD,OAAO,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;IAC9C,CAAC,EAAE,CAAC,kBAAkB,EAAE,OAAO,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAEpD,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,IAAI,QAAQ,EAAE;YACZ,OAAO,QAAQ,CAAC;SACjB;QACD,IAAI,KAAK,EAAE;YACT,OAAO,CACL,CAAC,0BAA0B,CACzB,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,aAAa,CAAC,CAAC,aAAa,CAAC,EAC7B,CACH,CAAC;SACH;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,UAAU,CACT,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,oBAAoB,CAAC,CAAC,4BAA4B,CAAC,CACnD,kBAAkB,CAAC,CAAC,0BAA0B,CAAC,CAC/C,IAAI,eAAe,CAAC,CACpB,WAAW,CAAC,CAAC,gBAAgB,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAEnD;MAAA,CAAC,aAAa,EAAE,CAClB;IAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC","sourcesContent":["// Third party dependencies.\nimport { mergeTwClassName } from '@metamask/design-system-shared';\nimport React, { useMemo } from 'react';\n\n// External dependencies.\nimport type { ButtonIconProps } from '../ButtonIcon';\nimport { HeaderBase } from '../HeaderBase';\nimport { IconName } from '../Icon';\nimport { HeaderStandardCenterColumn } from '../temp-components/HeaderStandardCenterColumn';\n\n// Internal dependencies.\nimport type { HeaderStandardProps } from './HeaderStandard.types';\n\nexport const HeaderStandard: React.FC<HeaderStandardProps> = ({\n  title,\n  titleProps,\n  subtitle,\n  subtitleProps,\n  children,\n  onBack,\n  backButtonProps,\n  onClose,\n  closeButtonProps,\n  endButtonIconProps,\n  startButtonIconProps,\n  twClassName = '',\n  testID,\n  ...headerBaseProps\n}) => {\n  const resolvedStartButtonIconProps = useMemo(() => {\n    if (startButtonIconProps) {\n      return startButtonIconProps;\n    }\n    if (onBack || backButtonProps) {\n      const startProps: ButtonIconProps = {\n        iconName: IconName.ArrowLeft,\n        ...(backButtonProps ?? {}),\n        onPress: backButtonProps?.onPress ?? onBack,\n      };\n      return startProps;\n    }\n    return undefined;\n  }, [onBack, backButtonProps, startButtonIconProps]);\n\n  const resolvedEndButtonIconProps = useMemo(() => {\n    const props: ButtonIconProps[] = [];\n\n    if (onClose || closeButtonProps) {\n      const closeProps: ButtonIconProps = {\n        iconName: IconName.Close,\n        ...(closeButtonProps || {}),\n        onPress: closeButtonProps?.onPress ?? onClose,\n      };\n      props.push(closeProps);\n    }\n\n    if (endButtonIconProps) {\n      props.push(...endButtonIconProps);\n    }\n    return props.length > 0 ? props : undefined;\n  }, [endButtonIconProps, onClose, closeButtonProps]);\n\n  const renderContent = () => {\n    if (children) {\n      return children;\n    }\n    if (title) {\n      return (\n        <HeaderStandardCenterColumn\n          title={title}\n          titleProps={titleProps}\n          subtitle={subtitle}\n          subtitleProps={subtitleProps}\n        />\n      );\n    }\n    return null;\n  };\n\n  return (\n    <HeaderBase\n      testID={testID}\n      startButtonIconProps={resolvedStartButtonIconProps}\n      endButtonIconProps={resolvedEndButtonIconProps}\n      {...headerBaseProps}\n      twClassName={mergeTwClassName('px-2', twClassName)}\n    >\n      {renderContent()}\n    </HeaderBase>\n  );\n};\n\nHeaderStandard.displayName = 'HeaderStandard';\n"]}