@metamask-previews/design-system-react-native 0.28.0-preview.1f40f69f → 0.30.0-preview.0a4d6f8

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-previews/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-previews/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-previews/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-previews/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,kFAA2E;AAC3E,+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-previews/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-previews/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,gDAAgD;AAC3E,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-previews/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/HeaderSubpage/HeaderSubpage.cjs

@@ -0,0 +1,90 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderSubpage = void 0;
+// Third party dependencies.
+const design_system_shared_1 = require("@metamask-previews/design-system-shared");
+const design_system_twrnc_preset_1 = require("@metamask-previews/design-system-twrnc-preset");
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
+// External dependencies.
+const ButtonIcon_1 = require("../ButtonIcon/index.cjs");
+const Icon_1 = require("../Icon/index.cjs");
+const ListItem_1 = require("../ListItem/index.cjs");
+const renderEndButtonIcons = (endButtonIconProps) => endButtonIconProps
+    .map((iconProps, originalIndex) => ({
+    iconProps,
+    originalIndex,
+}))
+    .reverse()
+    .map(({ iconProps, originalIndex }) => (<ButtonIcon_1.ButtonIcon key={`end-button-icon-${originalIndex}`} size={ButtonIcon_1.ButtonIconSize.Md} {...iconProps}/>));
+const HeaderSubpage = ({ onBack, backButtonProps, onClose, closeButtonProps, startButtonIconProps, endButtonIconProps, startAccessory, endAccessory, includesTopInset = false, twClassName = '', style, accessoryGap = 2, testID, ...listItemProps }) => {
+    const tw = (0, design_system_twrnc_preset_1.useTailwind)();
+    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    const resolvedStartAccessory = (0, react_1.useMemo)(() => {
+        if (startAccessory) {
+            return startAccessory;
+        }
+        if (startButtonIconProps) {
+            return <ButtonIcon_1.ButtonIcon size={ButtonIcon_1.ButtonIconSize.Md} {...startButtonIconProps}/>;
+        }
+        if (onBack || backButtonProps) {
+            return (<ButtonIcon_1.ButtonIcon iconName={Icon_1.IconName.ArrowLeft} size={ButtonIcon_1.ButtonIconSize.Md} {...(backButtonProps ?? {})} onPress={backButtonProps?.onPress ?? onBack}/>);
+        }
+        return undefined;
+    }, [startAccessory, startButtonIconProps, onBack, backButtonProps]);
+    const resolvedEndButtonIconProps = (0, react_1.useMemo)(() => {
+        const props = [];
+        if (onClose || closeButtonProps) {
+            props.push({
+                iconName: Icon_1.IconName.Close,
+                ...(closeButtonProps || {}),
+                onPress: closeButtonProps?.onPress ?? onClose,
+            });
+        }
+        if (endButtonIconProps) {
+            props.push(...endButtonIconProps);
+        }
+        return props.length > 0 ? props : undefined;
+    }, [endButtonIconProps, onClose, closeButtonProps]);
+    const resolvedEndAccessory = (0, react_1.useMemo)(() => {
+        if (endAccessory) {
+            return endAccessory;
+        }
+        if (resolvedEndButtonIconProps && resolvedEndButtonIconProps.length > 0) {
+            const icons = renderEndButtonIcons(resolvedEndButtonIconProps);
+            if (resolvedEndButtonIconProps.length > 1) {
+                return <react_native_1.View style={tw.style('flex-row gap-2')}>{icons}</react_native_1.View>;
+            }
+            return icons;
+        }
+        return undefined;
+    }, [endAccessory, resolvedEndButtonIconProps, tw]);
+    return (<ListItem_1.ListItem {...listItemProps} testID={testID} startAccessory={resolvedStartAccessory} endAccessory={resolvedEndAccessory} accessoryGap={accessoryGap} twClassName={(0, design_system_shared_1.mergeTwClassName)('h-14 px-2 py-0 justify-center', twClassName)} style={[includesTopInset && { marginTop: insets.top }, style]}/>);
+};
+exports.HeaderSubpage = HeaderSubpage;
+exports.HeaderSubpage.displayName = 'HeaderSubpage';
+//# sourceMappingURL=HeaderSubpage.cjs.map

package/dist/components/HeaderSubpage/HeaderSubpage.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderSubpage.cjs","sourceRoot":"","sources":["../../../src/components/HeaderSubpage/HeaderSubpage.tsx"],"names":[],"mappings":"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","sourcesContent":["// Third party dependencies.\nimport { mergeTwClassName } from '@metamask-previews/design-system-shared';\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useMemo } from 'react';\nimport { View } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\n// External dependencies.\nimport { ButtonIcon, ButtonIconSize } from '../ButtonIcon';\nimport type { ButtonIconProps } from '../ButtonIcon';\nimport { IconName } from '../Icon';\nimport { ListItem } from '../ListItem';\n\n// Internal dependencies.\nimport type { HeaderSubpageProps } from './HeaderSubpage.types';\n\nconst renderEndButtonIcons = (endButtonIconProps: ButtonIconProps[]) =>\n  endButtonIconProps\n    .map((iconProps, originalIndex) => ({\n      iconProps,\n      originalIndex,\n    }))\n    .reverse()\n    .map(({ iconProps, originalIndex }) => (\n      <ButtonIcon\n        key={`end-button-icon-${originalIndex}`}\n        size={ButtonIconSize.Md}\n        {...iconProps}\n      />\n    ));\n\nexport const HeaderSubpage: React.FC<HeaderSubpageProps> = ({\n  onBack,\n  backButtonProps,\n  onClose,\n  closeButtonProps,\n  startButtonIconProps,\n  endButtonIconProps,\n  startAccessory,\n  endAccessory,\n  includesTopInset = false,\n  twClassName = '',\n  style,\n  accessoryGap = 2,\n  testID,\n  ...listItemProps\n}) => {\n  const tw = useTailwind();\n  const insets = useSafeAreaInsets();\n\n  const resolvedStartAccessory = useMemo(() => {\n    if (startAccessory) {\n      return startAccessory;\n    }\n\n    if (startButtonIconProps) {\n      return <ButtonIcon size={ButtonIconSize.Md} {...startButtonIconProps} />;\n    }\n\n    if (onBack || backButtonProps) {\n      return (\n        <ButtonIcon\n          iconName={IconName.ArrowLeft}\n          size={ButtonIconSize.Md}\n          {...(backButtonProps ?? {})}\n          onPress={backButtonProps?.onPress ?? onBack}\n        />\n      );\n    }\n\n    return undefined;\n  }, [startAccessory, startButtonIconProps, onBack, backButtonProps]);\n\n  const resolvedEndButtonIconProps = useMemo(() => {\n    const props: ButtonIconProps[] = [];\n\n    if (onClose || closeButtonProps) {\n      props.push({\n        iconName: IconName.Close,\n        ...(closeButtonProps || {}),\n        onPress: closeButtonProps?.onPress ?? onClose,\n      });\n    }\n\n    if (endButtonIconProps) {\n      props.push(...endButtonIconProps);\n    }\n\n    return props.length > 0 ? props : undefined;\n  }, [endButtonIconProps, onClose, closeButtonProps]);\n\n  const resolvedEndAccessory = useMemo(() => {\n    if (endAccessory) {\n      return endAccessory;\n    }\n\n    if (resolvedEndButtonIconProps && resolvedEndButtonIconProps.length > 0) {\n      const icons = renderEndButtonIcons(resolvedEndButtonIconProps);\n\n      if (resolvedEndButtonIconProps.length > 1) {\n        return <View style={tw.style('flex-row gap-2')}>{icons}</View>;\n      }\n\n      return icons;\n    }\n\n    return undefined;\n  }, [endAccessory, resolvedEndButtonIconProps, tw]);\n\n  return (\n    <ListItem\n      {...listItemProps}\n      testID={testID}\n      startAccessory={resolvedStartAccessory}\n      endAccessory={resolvedEndAccessory}\n      accessoryGap={accessoryGap}\n      twClassName={mergeTwClassName(\n        'h-14 px-2 py-0 justify-center',\n        twClassName,\n      )}\n      style={[includesTopInset && { marginTop: insets.top }, style]}\n    />\n  );\n};\n\nHeaderSubpage.displayName = 'HeaderSubpage';\n"]}

package/dist/components/HeaderSubpage/HeaderSubpage.d.cts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderSubpage.d.cts","sourceRoot":"","sources":["../../../src/components/HeaderSubpage/HeaderSubpage.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAkB,cAAc;AAWvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAiBhE,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA4FtD,CAAC"}

package/dist/components/HeaderSubpage/HeaderSubpage.d.mts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderSubpage.d.mts","sourceRoot":"","sources":["../../../src/components/HeaderSubpage/HeaderSubpage.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAkB,cAAc;AAWvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAiBhE,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA4FtD,CAAC"}

package/dist/components/HeaderSubpage/HeaderSubpage.mjs

@@ -0,0 +1,70 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+// Third party dependencies.
+import { mergeTwClassName } from "@metamask-previews/design-system-shared";
+import { useTailwind } from "@metamask-previews/design-system-twrnc-preset";
+import $React, { useMemo } from "react";
+const React = $importDefault($React);
+import { View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+// External dependencies.
+import { ButtonIcon, ButtonIconSize } from "../ButtonIcon/index.mjs";
+import { IconName } from "../Icon/index.mjs";
+import { ListItem } from "../ListItem/index.mjs";
+const renderEndButtonIcons = (endButtonIconProps) => endButtonIconProps
+    .map((iconProps, originalIndex) => ({
+    iconProps,
+    originalIndex,
+}))
+    .reverse()
+    .map(({ iconProps, originalIndex }) => (<ButtonIcon key={`end-button-icon-${originalIndex}`} size={ButtonIconSize.Md} {...iconProps}/>));
+export const HeaderSubpage = ({ onBack, backButtonProps, onClose, closeButtonProps, startButtonIconProps, endButtonIconProps, startAccessory, endAccessory, includesTopInset = false, twClassName = '', style, accessoryGap = 2, testID, ...listItemProps }) => {
+    const tw = useTailwind();
+    const insets = useSafeAreaInsets();
+    const resolvedStartAccessory = useMemo(() => {
+        if (startAccessory) {
+            return startAccessory;
+        }
+        if (startButtonIconProps) {
+            return <ButtonIcon size={ButtonIconSize.Md} {...startButtonIconProps}/>;
+        }
+        if (onBack || backButtonProps) {
+            return (<ButtonIcon iconName={IconName.ArrowLeft} size={ButtonIconSize.Md} {...(backButtonProps ?? {})} onPress={backButtonProps?.onPress ?? onBack}/>);
+        }
+        return undefined;
+    }, [startAccessory, startButtonIconProps, onBack, backButtonProps]);
+    const resolvedEndButtonIconProps = useMemo(() => {
+        const props = [];
+        if (onClose || closeButtonProps) {
+            props.push({
+                iconName: IconName.Close,
+                ...(closeButtonProps || {}),
+                onPress: closeButtonProps?.onPress ?? onClose,
+            });
+        }
+        if (endButtonIconProps) {
+            props.push(...endButtonIconProps);
+        }
+        return props.length > 0 ? props : undefined;
+    }, [endButtonIconProps, onClose, closeButtonProps]);
+    const resolvedEndAccessory = useMemo(() => {
+        if (endAccessory) {
+            return endAccessory;
+        }
+        if (resolvedEndButtonIconProps && resolvedEndButtonIconProps.length > 0) {
+            const icons = renderEndButtonIcons(resolvedEndButtonIconProps);
+            if (resolvedEndButtonIconProps.length > 1) {
+                return <View style={tw.style('flex-row gap-2')}>{icons}</View>;
+            }
+            return icons;
+        }
+        return undefined;
+    }, [endAccessory, resolvedEndButtonIconProps, tw]);
+    return (<ListItem {...listItemProps} testID={testID} startAccessory={resolvedStartAccessory} endAccessory={resolvedEndAccessory} accessoryGap={accessoryGap} twClassName={mergeTwClassName('h-14 px-2 py-0 justify-center', twClassName)} style={[includesTopInset && { marginTop: insets.top }, style]}/>);
+};
+HeaderSubpage.displayName = 'HeaderSubpage';
+//# sourceMappingURL=HeaderSubpage.mjs.map

package/dist/components/HeaderSubpage/HeaderSubpage.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderSubpage.mjs","sourceRoot":"","sources":["../../../src/components/HeaderSubpage/HeaderSubpage.tsx"],"names":[],"mappings":"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","sourcesContent":["// Third party dependencies.\nimport { mergeTwClassName } from '@metamask-previews/design-system-shared';\nimport { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useMemo } from 'react';\nimport { View } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\n// External dependencies.\nimport { ButtonIcon, ButtonIconSize } from '../ButtonIcon';\nimport type { ButtonIconProps } from '../ButtonIcon';\nimport { IconName } from '../Icon';\nimport { ListItem } from '../ListItem';\n\n// Internal dependencies.\nimport type { HeaderSubpageProps } from './HeaderSubpage.types';\n\nconst renderEndButtonIcons = (endButtonIconProps: ButtonIconProps[]) =>\n  endButtonIconProps\n    .map((iconProps, originalIndex) => ({\n      iconProps,\n      originalIndex,\n    }))\n    .reverse()\n    .map(({ iconProps, originalIndex }) => (\n      <ButtonIcon\n        key={`end-button-icon-${originalIndex}`}\n        size={ButtonIconSize.Md}\n        {...iconProps}\n      />\n    ));\n\nexport const HeaderSubpage: React.FC<HeaderSubpageProps> = ({\n  onBack,\n  backButtonProps,\n  onClose,\n  closeButtonProps,\n  startButtonIconProps,\n  endButtonIconProps,\n  startAccessory,\n  endAccessory,\n  includesTopInset = false,\n  twClassName = '',\n  style,\n  accessoryGap = 2,\n  testID,\n  ...listItemProps\n}) => {\n  const tw = useTailwind();\n  const insets = useSafeAreaInsets();\n\n  const resolvedStartAccessory = useMemo(() => {\n    if (startAccessory) {\n      return startAccessory;\n    }\n\n    if (startButtonIconProps) {\n      return <ButtonIcon size={ButtonIconSize.Md} {...startButtonIconProps} />;\n    }\n\n    if (onBack || backButtonProps) {\n      return (\n        <ButtonIcon\n          iconName={IconName.ArrowLeft}\n          size={ButtonIconSize.Md}\n          {...(backButtonProps ?? {})}\n          onPress={backButtonProps?.onPress ?? onBack}\n        />\n      );\n    }\n\n    return undefined;\n  }, [startAccessory, startButtonIconProps, onBack, backButtonProps]);\n\n  const resolvedEndButtonIconProps = useMemo(() => {\n    const props: ButtonIconProps[] = [];\n\n    if (onClose || closeButtonProps) {\n      props.push({\n        iconName: IconName.Close,\n        ...(closeButtonProps || {}),\n        onPress: closeButtonProps?.onPress ?? onClose,\n      });\n    }\n\n    if (endButtonIconProps) {\n      props.push(...endButtonIconProps);\n    }\n\n    return props.length > 0 ? props : undefined;\n  }, [endButtonIconProps, onClose, closeButtonProps]);\n\n  const resolvedEndAccessory = useMemo(() => {\n    if (endAccessory) {\n      return endAccessory;\n    }\n\n    if (resolvedEndButtonIconProps && resolvedEndButtonIconProps.length > 0) {\n      const icons = renderEndButtonIcons(resolvedEndButtonIconProps);\n\n      if (resolvedEndButtonIconProps.length > 1) {\n        return <View style={tw.style('flex-row gap-2')}>{icons}</View>;\n      }\n\n      return icons;\n    }\n\n    return undefined;\n  }, [endAccessory, resolvedEndButtonIconProps, tw]);\n\n  return (\n    <ListItem\n      {...listItemProps}\n      testID={testID}\n      startAccessory={resolvedStartAccessory}\n      endAccessory={resolvedEndAccessory}\n      accessoryGap={accessoryGap}\n      twClassName={mergeTwClassName(\n        'h-14 px-2 py-0 justify-center',\n        twClassName,\n      )}\n      style={[includesTopInset && { marginTop: insets.top }, style]}\n    />\n  );\n};\n\nHeaderSubpage.displayName = 'HeaderSubpage';\n"]}

package/dist/components/{SegmentButton/SegmentButton.types.cjs → HeaderSubpage/HeaderSubpage.types.cjs}

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderSubpage.types.cjs","sourceRoot":"","sources":["../../../src/components/HeaderSubpage/HeaderSubpage.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode } from 'react';\n\nimport type { ButtonIconProps } from '../ButtonIcon';\nimport type { ListItemProps } from '../ListItem';\n\n/**\n * HeaderSubpage component props.\n *\n * Subpage navigation row built on {@link ListItem} with optional back/close\n * shortcuts matching {@link HeaderStandard}.\n */\nexport type HeaderSubpageProps = Omit<\n  ListItemProps,\n  'startAccessory' | 'endAccessory' | 'isInteractive' | 'children'\n> & {\n  /**\n   * Callback when the back button is pressed.\n   * If provided, a back button will be rendered as the start accessory.\n   */\n  onBack?: () => void;\n  /**\n   * Additional props to pass to the back ButtonIcon.\n   * If provided, a back button will be rendered with these props spread.\n   */\n  backButtonProps?: Omit<ButtonIconProps, 'iconName'>;\n  /**\n   * Callback when the close button is pressed.\n   * If provided, a close button will be added to the end accessories.\n   */\n  onClose?: () => void;\n  /**\n   * Additional props to pass to the close ButtonIcon.\n   * If provided, a close button will be added with these props spread.\n   */\n  closeButtonProps?: Omit<ButtonIconProps, 'iconName'>;\n  /**\n   * Optional ButtonIcon props to render as the start accessory.\n   * Only used if `startAccessory` is not provided.\n   */\n  startButtonIconProps?: ButtonIconProps;\n  /**\n   * Optional array of ButtonIcon props to render as additional end accessories.\n   * Rendered in reverse order (first item appears rightmost).\n   * Only used if `endAccessory` is not provided.\n   */\n  endButtonIconProps?: ButtonIconProps[];\n  /**\n   * Optional content before the ListItem content row.\n   * Takes priority over `startButtonIconProps` and back shortcuts.\n   */\n  startAccessory?: ReactNode;\n  /**\n   * Optional content after the ListItem content row.\n   * Takes priority over `endButtonIconProps` and close shortcuts.\n   */\n  endAccessory?: ReactNode;\n  /**\n   * When true, applies top safe-area inset as `marginTop` on the root ListItem.\n   *\n   * @default false\n   */\n  includesTopInset?: boolean;\n};\n"]}

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

@@ -0,0 +1,59 @@
+import type { ReactNode } from "react";
+import type { ButtonIconProps } from "../ButtonIcon/index.cjs";
+import type { ListItemProps } from "../ListItem/index.cjs";
+/**
+ * HeaderSubpage component props.
+ *
+ * Subpage navigation row built on {@link ListItem} with optional back/close
+ * shortcuts matching {@link HeaderStandard}.
+ */
+export type HeaderSubpageProps = Omit<ListItemProps, 'startAccessory' | 'endAccessory' | 'isInteractive' | 'children'> & {
+    /**
+     * Callback when the back button is pressed.
+     * If provided, a back button will be rendered as the start accessory.
+     */
+    onBack?: () => void;
+    /**
+     * Additional props to pass to the back ButtonIcon.
+     * If provided, a back button will be rendered with these props spread.
+     */
+    backButtonProps?: Omit<ButtonIconProps, 'iconName'>;
+    /**
+     * Callback when the close button is pressed.
+     * If provided, a close button will be added to the end accessories.
+     */
+    onClose?: () => void;
+    /**
+     * Additional props to pass to the close ButtonIcon.
+     * If provided, a close button will be added with these props spread.
+     */
+    closeButtonProps?: Omit<ButtonIconProps, 'iconName'>;
+    /**
+     * Optional ButtonIcon props to render as the start accessory.
+     * Only used if `startAccessory` is not provided.
+     */
+    startButtonIconProps?: ButtonIconProps;
+    /**
+     * Optional array of ButtonIcon props to render as additional end accessories.
+     * Rendered in reverse order (first item appears rightmost).
+     * Only used if `endAccessory` is not provided.
+     */
+    endButtonIconProps?: ButtonIconProps[];
+    /**
+     * Optional content before the ListItem content row.
+     * Takes priority over `startButtonIconProps` and back shortcuts.
+     */
+    startAccessory?: ReactNode;
+    /**
+     * Optional content after the ListItem content row.
+     * Takes priority over `endButtonIconProps` and close shortcuts.
+     */
+    endAccessory?: ReactNode;
+    /**
+     * When true, applies top safe-area inset as `marginTop` on the root ListItem.
+     *
+     * @default false
+     */
+    includesTopInset?: boolean;
+};
+//# sourceMappingURL=HeaderSubpage.types.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderSubpage.types.d.cts","sourceRoot":"","sources":["../../../src/components/HeaderSubpage/HeaderSubpage.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc;AAEvC,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,aAAa,EAAE,8BAAoB;AAEjD;;;;;GAKG;AACH,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,aAAa,EACb,gBAAgB,GAAG,cAAc,GAAG,eAAe,GAAG,UAAU,CACjE,GAAG;IACF;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;IACpD;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;IACrD;;;OAGG;IACH,oBAAoB,CAAC,EAAE,eAAe,CAAC;IACvC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,eAAe,EAAE,CAAC;IACvC;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC"}

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

@@ -0,0 +1,59 @@
+import type { ReactNode } from "react";
+import type { ButtonIconProps } from "../ButtonIcon/index.mjs";
+import type { ListItemProps } from "../ListItem/index.mjs";
+/**
+ * HeaderSubpage component props.
+ *
+ * Subpage navigation row built on {@link ListItem} with optional back/close
+ * shortcuts matching {@link HeaderStandard}.
+ */
+export type HeaderSubpageProps = Omit<ListItemProps, 'startAccessory' | 'endAccessory' | 'isInteractive' | 'children'> & {
+    /**
+     * Callback when the back button is pressed.
+     * If provided, a back button will be rendered as the start accessory.
+     */
+    onBack?: () => void;
+    /**
+     * Additional props to pass to the back ButtonIcon.
+     * If provided, a back button will be rendered with these props spread.
+     */
+    backButtonProps?: Omit<ButtonIconProps, 'iconName'>;
+    /**
+     * Callback when the close button is pressed.
+     * If provided, a close button will be added to the end accessories.
+     */
+    onClose?: () => void;
+    /**
+     * Additional props to pass to the close ButtonIcon.
+     * If provided, a close button will be added with these props spread.
+     */
+    closeButtonProps?: Omit<ButtonIconProps, 'iconName'>;
+    /**
+     * Optional ButtonIcon props to render as the start accessory.
+     * Only used if `startAccessory` is not provided.
+     */
+    startButtonIconProps?: ButtonIconProps;
+    /**
+     * Optional array of ButtonIcon props to render as additional end accessories.
+     * Rendered in reverse order (first item appears rightmost).
+     * Only used if `endAccessory` is not provided.
+     */
+    endButtonIconProps?: ButtonIconProps[];
+    /**
+     * Optional content before the ListItem content row.
+     * Takes priority over `startButtonIconProps` and back shortcuts.
+     */
+    startAccessory?: ReactNode;
+    /**
+     * Optional content after the ListItem content row.
+     * Takes priority over `endButtonIconProps` and close shortcuts.
+     */
+    endAccessory?: ReactNode;
+    /**
+     * When true, applies top safe-area inset as `marginTop` on the root ListItem.
+     *
+     * @default false
+     */
+    includesTopInset?: boolean;
+};
+//# sourceMappingURL=HeaderSubpage.types.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderSubpage.types.d.mts","sourceRoot":"","sources":["../../../src/components/HeaderSubpage/HeaderSubpage.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc;AAEvC,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,aAAa,EAAE,8BAAoB;AAEjD;;;;;GAKG;AACH,MAAM,MAAM,kBAAkB,GAAG,IAAI,CACnC,aAAa,EACb,gBAAgB,GAAG,cAAc,GAAG,eAAe,GAAG,UAAU,CACjE,GAAG;IACF;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;IACpD;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,CAAC;IACrD;;;OAGG;IACH,oBAAoB,CAAC,EAAE,eAAe,CAAC;IACvC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,eAAe,EAAE,CAAC;IACvC;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC"}

package/dist/components/HeaderSubpage/HeaderSubpage.types.mjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderSubpage.types.mjs","sourceRoot":"","sources":["../../../src/components/HeaderSubpage/HeaderSubpage.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode } from 'react';\n\nimport type { ButtonIconProps } from '../ButtonIcon';\nimport type { ListItemProps } from '../ListItem';\n\n/**\n * HeaderSubpage component props.\n *\n * Subpage navigation row built on {@link ListItem} with optional back/close\n * shortcuts matching {@link HeaderStandard}.\n */\nexport type HeaderSubpageProps = Omit<\n  ListItemProps,\n  'startAccessory' | 'endAccessory' | 'isInteractive' | 'children'\n> & {\n  /**\n   * Callback when the back button is pressed.\n   * If provided, a back button will be rendered as the start accessory.\n   */\n  onBack?: () => void;\n  /**\n   * Additional props to pass to the back ButtonIcon.\n   * If provided, a back button will be rendered with these props spread.\n   */\n  backButtonProps?: Omit<ButtonIconProps, 'iconName'>;\n  /**\n   * Callback when the close button is pressed.\n   * If provided, a close button will be added to the end accessories.\n   */\n  onClose?: () => void;\n  /**\n   * Additional props to pass to the close ButtonIcon.\n   * If provided, a close button will be added with these props spread.\n   */\n  closeButtonProps?: Omit<ButtonIconProps, 'iconName'>;\n  /**\n   * Optional ButtonIcon props to render as the start accessory.\n   * Only used if `startAccessory` is not provided.\n   */\n  startButtonIconProps?: ButtonIconProps;\n  /**\n   * Optional array of ButtonIcon props to render as additional end accessories.\n   * Rendered in reverse order (first item appears rightmost).\n   * Only used if `endAccessory` is not provided.\n   */\n  endButtonIconProps?: ButtonIconProps[];\n  /**\n   * Optional content before the ListItem content row.\n   * Takes priority over `startButtonIconProps` and back shortcuts.\n   */\n  startAccessory?: ReactNode;\n  /**\n   * Optional content after the ListItem content row.\n   * Takes priority over `endButtonIconProps` and close shortcuts.\n   */\n  endAccessory?: ReactNode;\n  /**\n   * When true, applies top safe-area inset as `marginTop` on the root ListItem.\n   *\n   * @default false\n   */\n  includesTopInset?: boolean;\n};\n"]}

package/dist/components/HeaderSubpage/index.cjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/HeaderSubpage/index.ts"],"names":[],"mappings":";;;AAAA,qDAAgD;AAAvC,8GAAA,aAAa,OAAA","sourcesContent":["export { HeaderSubpage } from './HeaderSubpage';\nexport type { HeaderSubpageProps } from './HeaderSubpage.types';\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/HeaderSubpage/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,4BAAwB;AAChD,YAAY,EAAE,kBAAkB,EAAE,kCAA8B"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/HeaderSubpage/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,4BAAwB;AAChD,YAAY,EAAE,kBAAkB,EAAE,kCAA8B"}

package/dist/components/HeaderSubpage/index.mjs

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

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

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

package/dist/components/Icon/Icon.assets.cjs

@@ -271,6 +271,7 @@ const translate_svg_1 = __importDefault(require("./assets/translate.svg"));
 const trash_svg_1 = __importDefault(require("./assets/trash.svg"));
 const trend_down_svg_1 = __importDefault(require("./assets/trend-down.svg"));
 const trend_up_svg_1 = __importDefault(require("./assets/trend-up.svg"));
+const trophy_svg_1 = __importDefault(require("./assets/trophy.svg"));
 const undo_svg_1 = __importDefault(require("./assets/undo.svg"));
 const unfold_svg_1 = __importDefault(require("./assets/unfold.svg"));
 const unlocked_filled_svg_1 = __importDefault(require("./assets/unlocked-filled.svg"));
@@ -565,6 +566,7 @@ exports.assetByIconName = {
     Trash: trash_svg_1.default,
     TrendDown: trend_down_svg_1.default,
     TrendUp: trend_up_svg_1.default,
+    Trophy: trophy_svg_1.default,
     Undo: undo_svg_1.default,
     Unfold: unfold_svg_1.default,
     UnlockedFilled: unlocked_filled_svg_1.default,