@metamask-previews/design-system-react-native 0.14.0-preview.dff9dce → 0.16.0-preview.d854123

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/BoxColumn/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,wBAAoB;AACxC,YAAY,EAAE,cAAc,EAAE,8BAA0B"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/BoxColumn/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,wBAAoB;AACxC,YAAY,EAAE,cAAc,EAAE,8BAA0B"}

package/dist/components/BoxColumn/index.mjs

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

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

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

package/dist/components/{BoxHorizontal/BoxHorizontal.cjs → BoxRow/BoxRow.cjs}

@@ -3,16 +3,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BoxHorizontal = void 0;
+exports.BoxRow = void 0;
 const react_1 = __importDefault(require("react"));
 const types_1 = require("../../types/index.cjs");
 const Box_1 = require("../Box/index.cjs");
 const TextOrChildren_1 = require("../temp-components/TextOrChildren/index.cjs");
-const BoxHorizontal = ({ children, textProps, startAccessory, endAccessory, twClassName, ...rest }) => (<Box_1.Box flexDirection={types_1.BoxFlexDirection.Row} alignItems={types_1.BoxAlignItems.Center} gap={1} twClassName={twClassName} {...rest}>
+const BoxRow = ({ children, textProps, startAccessory, endAccessory, twClassName, ...rest }) => (<Box_1.Box flexDirection={types_1.BoxFlexDirection.Row} alignItems={types_1.BoxAlignItems.Center} gap={1} twClassName={twClassName} {...rest}>
     {startAccessory}
     <TextOrChildren_1.TextOrChildren textProps={textProps}>{children}</TextOrChildren_1.TextOrChildren>
     {endAccessory}
   </Box_1.Box>);
-exports.BoxHorizontal = BoxHorizontal;
-exports.BoxHorizontal.displayName = 'BoxHorizontal';
-//# sourceMappingURL=BoxHorizontal.cjs.map
+exports.BoxRow = BoxRow;
+exports.BoxRow.displayName = 'BoxRow';
+//# sourceMappingURL=BoxRow.cjs.map

package/dist/components/BoxRow/BoxRow.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoxRow.cjs","sourceRoot":"","sources":["../../../src/components/BoxRow/BoxRow.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,iDAA8D;AAC9D,0CAA6B;AAC7B,gFAAmE;AAI5D,MAAM,MAAM,GAAG,CAAC,EACrB,QAAQ,EACR,SAAS,EACT,cAAc,EACd,YAAY,EACZ,WAAW,EACX,GAAG,IAAI,EACK,EAAE,EAAE,CAAC,CACjB,CAAC,SAAG,CACF,aAAa,CAAC,CAAC,wBAAgB,CAAC,GAAG,CAAC,CACpC,UAAU,CAAC,CAAC,qBAAa,CAAC,MAAM,CAAC,CACjC,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,IAAI,IAAI,CAAC,CAET;IAAA,CAAC,cAAc,CACf;IAAA,CAAC,+BAAc,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,+BAAc,CAChE;IAAA,CAAC,YAAY,CACf;EAAA,EAAE,SAAG,CAAC,CACP,CAAC;AAnBW,QAAA,MAAM,UAmBjB;AAEF,cAAM,CAAC,WAAW,GAAG,QAAQ,CAAC","sourcesContent":["import React from 'react';\n\nimport { BoxAlignItems, BoxFlexDirection } from '../../types';\nimport { Box } from '../Box';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport type { BoxRowProps } from './BoxRow.types';\n\nexport const BoxRow = ({\n  children,\n  textProps,\n  startAccessory,\n  endAccessory,\n  twClassName,\n  ...rest\n}: BoxRowProps) => (\n  <Box\n    flexDirection={BoxFlexDirection.Row}\n    alignItems={BoxAlignItems.Center}\n    gap={1}\n    twClassName={twClassName}\n    {...rest}\n  >\n    {startAccessory}\n    <TextOrChildren textProps={textProps}>{children}</TextOrChildren>\n    {endAccessory}\n  </Box>\n);\n\nBoxRow.displayName = 'BoxRow';\n"]}

package/dist/components/BoxRow/BoxRow.d.cts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { BoxRowProps } from "./BoxRow.types.cjs";
+export declare const BoxRow: {
+    ({ children, textProps, startAccessory, endAccessory, twClassName, ...rest }: BoxRowProps): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=BoxRow.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BoxRow.d.cts","sourceRoot":"","sources":["../../../src/components/BoxRow/BoxRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc;AAM1B,OAAO,KAAK,EAAE,WAAW,EAAE,2BAAuB;AAElD,eAAO,MAAM,MAAM;kFAOhB,WAAW;;CAYb,CAAC"}

package/dist/components/BoxRow/BoxRow.d.mts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { BoxRowProps } from "./BoxRow.types.mjs";
+export declare const BoxRow: {
+    ({ children, textProps, startAccessory, endAccessory, twClassName, ...rest }: BoxRowProps): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=BoxRow.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BoxRow.d.mts","sourceRoot":"","sources":["../../../src/components/BoxRow/BoxRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc;AAM1B,OAAO,KAAK,EAAE,WAAW,EAAE,2BAAuB;AAElD,eAAO,MAAM,MAAM;kFAOhB,WAAW;;CAYb,CAAC"}

package/dist/components/{BoxHorizontal/BoxHorizontal.mjs → BoxRow/BoxRow.mjs}

@@ -9,10 +9,10 @@ const React = $importDefault($React);
 import { BoxAlignItems, BoxFlexDirection } from "../../types/index.mjs";
 import { Box } from "../Box/index.mjs";
 import { TextOrChildren } from "../temp-components/TextOrChildren/index.mjs";
-export const BoxHorizontal = ({ children, textProps, startAccessory, endAccessory, twClassName, ...rest }) => (<Box flexDirection={BoxFlexDirection.Row} alignItems={BoxAlignItems.Center} gap={1} twClassName={twClassName} {...rest}>
+export const BoxRow = ({ children, textProps, startAccessory, endAccessory, twClassName, ...rest }) => (<Box flexDirection={BoxFlexDirection.Row} alignItems={BoxAlignItems.Center} gap={1} twClassName={twClassName} {...rest}>
     {startAccessory}
     <TextOrChildren textProps={textProps}>{children}</TextOrChildren>
     {endAccessory}
   </Box>);
-BoxHorizontal.displayName = 'BoxHorizontal';
-//# sourceMappingURL=BoxHorizontal.mjs.map
+BoxRow.displayName = 'BoxRow';
+//# sourceMappingURL=BoxRow.mjs.map

package/dist/components/BoxRow/BoxRow.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoxRow.mjs","sourceRoot":"","sources":["../../../src/components/BoxRow/BoxRow.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,8BAAoB;AAC9D,OAAO,EAAE,GAAG,EAAE,yBAAe;AAC7B,OAAO,EAAE,cAAc,EAAE,oDAA0C;AAInE,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EACrB,QAAQ,EACR,SAAS,EACT,cAAc,EACd,YAAY,EACZ,WAAW,EACX,GAAG,IAAI,EACK,EAAE,EAAE,CAAC,CACjB,CAAC,GAAG,CACF,aAAa,CAAC,CAAC,gBAAgB,CAAC,GAAG,CAAC,CACpC,UAAU,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,CACjC,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,IAAI,IAAI,CAAC,CAET;IAAA,CAAC,cAAc,CACf;IAAA,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,cAAc,CAChE;IAAA,CAAC,YAAY,CACf;EAAA,EAAE,GAAG,CAAC,CACP,CAAC;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC","sourcesContent":["import React from 'react';\n\nimport { BoxAlignItems, BoxFlexDirection } from '../../types';\nimport { Box } from '../Box';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport type { BoxRowProps } from './BoxRow.types';\n\nexport const BoxRow = ({\n  children,\n  textProps,\n  startAccessory,\n  endAccessory,\n  twClassName,\n  ...rest\n}: BoxRowProps) => (\n  <Box\n    flexDirection={BoxFlexDirection.Row}\n    alignItems={BoxAlignItems.Center}\n    gap={1}\n    twClassName={twClassName}\n    {...rest}\n  >\n    {startAccessory}\n    <TextOrChildren textProps={textProps}>{children}</TextOrChildren>\n    {endAccessory}\n  </Box>\n);\n\nBoxRow.displayName = 'BoxRow';\n"]}

package/dist/components/{BoxHorizontal/BoxHorizontal.types.cjs → BoxRow/BoxRow.types.cjs}

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"BoxRow.types.cjs","sourceRoot":"","sources":["../../../src/components/BoxRow/BoxRow.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BoxRowPropsShared } from '@metamask-previews/design-system-shared';\n\nimport type { BoxProps } from '../Box/Box.types';\nimport type { TextProps } from '../Text';\n\n/**\n * BoxRow component props.\n */\nexport type BoxRowProps = BoxRowPropsShared &\n  Omit<BoxProps, 'children' | 'flexDirection'> & {\n    /**\n     * Optional props passed to `Text` when `children` is a string.\n     */\n    textProps?: Omit<Partial<TextProps>, 'children'>;\n  };\n"]}

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

@@ -0,0 +1,13 @@
+import type { BoxRowPropsShared } from "@metamask-previews/design-system-shared";
+import type { BoxProps } from "../Box/Box.types.cjs";
+import type { TextProps } from "../Text/index.cjs";
+/**
+ * BoxRow component props.
+ */
+export type BoxRowProps = BoxRowPropsShared & Omit<BoxProps, 'children' | 'flexDirection'> & {
+    /**
+     * Optional props passed to `Text` when `children` is a string.
+     */
+    textProps?: Omit<Partial<TextProps>, 'children'>;
+};
+//# sourceMappingURL=BoxRow.types.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BoxRow.types.d.cts","sourceRoot":"","sources":["../../../src/components/BoxRow/BoxRow.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,gDAAgD;AAEjF,OAAO,KAAK,EAAE,QAAQ,EAAE,6BAAyB;AACjD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,iBAAiB,GACzC,IAAI,CAAC,QAAQ,EAAE,UAAU,GAAG,eAAe,CAAC,GAAG;IAC7C;;OAEG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;CAClD,CAAC"}

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

@@ -0,0 +1,13 @@
+import type { BoxRowPropsShared } from "@metamask-previews/design-system-shared";
+import type { BoxProps } from "../Box/Box.types.mjs";
+import type { TextProps } from "../Text/index.mjs";
+/**
+ * BoxRow component props.
+ */
+export type BoxRowProps = BoxRowPropsShared & Omit<BoxProps, 'children' | 'flexDirection'> & {
+    /**
+     * Optional props passed to `Text` when `children` is a string.
+     */
+    textProps?: Omit<Partial<TextProps>, 'children'>;
+};
+//# sourceMappingURL=BoxRow.types.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BoxRow.types.d.mts","sourceRoot":"","sources":["../../../src/components/BoxRow/BoxRow.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,gDAAgD;AAEjF,OAAO,KAAK,EAAE,QAAQ,EAAE,6BAAyB;AACjD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,iBAAiB,GACzC,IAAI,CAAC,QAAQ,EAAE,UAAU,GAAG,eAAe,CAAC,GAAG;IAC7C;;OAEG;IACH,SAAS,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;CAClD,CAAC"}

package/dist/components/BoxRow/BoxRow.types.mjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"BoxRow.types.mjs","sourceRoot":"","sources":["../../../src/components/BoxRow/BoxRow.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BoxRowPropsShared } from '@metamask-previews/design-system-shared';\n\nimport type { BoxProps } from '../Box/Box.types';\nimport type { TextProps } from '../Text';\n\n/**\n * BoxRow component props.\n */\nexport type BoxRowProps = BoxRowPropsShared &\n  Omit<BoxProps, 'children' | 'flexDirection'> & {\n    /**\n     * Optional props passed to `Text` when `children` is a string.\n     */\n    textProps?: Omit<Partial<TextProps>, 'children'>;\n  };\n"]}

package/dist/components/BoxRow/index.cjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/BoxRow/index.ts"],"names":[],"mappings":";;;AAAA,uCAAkC;AAAzB,gGAAA,MAAM,OAAA","sourcesContent":["export { BoxRow } from './BoxRow';\nexport type { BoxRowProps } from './BoxRow.types';\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/BoxRow/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,qBAAiB;AAClC,YAAY,EAAE,WAAW,EAAE,2BAAuB"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/BoxRow/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,qBAAiB;AAClC,YAAY,EAAE,WAAW,EAAE,2BAAuB"}

package/dist/components/BoxRow/index.mjs

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

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

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

package/dist/components/HeaderRoot/HeaderRoot.cjs

@@ -10,7 +10,7 @@ const react_1 = __importDefault(require("react"));
 const react_native_safe_area_context_1 = require("react-native-safe-area-context");
 // External dependencies.
 const Box_1 = require("../Box/index.cjs");
-const BoxHorizontal_1 = require("../BoxHorizontal/index.cjs");
+const BoxRow_1 = require("../BoxRow/index.cjs");
 const ButtonIcon_1 = require("../ButtonIcon/index.cjs");
 const Text_1 = require("../Text/index.cjs");
 const HeaderRoot = ({ children, title, titleProps, titleAccessory, endAccessory, endButtonIconProps, includesTopInset = false, style, testID, twClassName, ...viewProps }) => {
@@ -38,12 +38,12 @@ const HeaderRoot = ({ children, title, titleProps, titleAccessory, endAccessory,
         }
         if (shouldRenderTitleRow) {
             const titleNode = (0, design_system_shared_1.isReactNodeRenderable)(title) && title !== '' ? title : null;
-            return (<BoxHorizontal_1.BoxHorizontal endAccessory={titleAccessory} textProps={{
+            return (<BoxRow_1.BoxRow endAccessory={titleAccessory} textProps={{
                     variant: Text_1.TextVariant.HeadingLg,
                     ...titleProps,
                 }}>
           {titleNode}
-        </BoxHorizontal_1.BoxHorizontal>);
+        </BoxRow_1.BoxRow>);
         }
         return null;
     };

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderRoot.cjs","sourceRoot":"","sources":["../../../src/components/HeaderRoot/HeaderRoot.tsx"],"names":[],"mappings":"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","sourcesContent":["// Third party dependencies.\nimport { isReactNodeRenderable } 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 { BoxHorizontal } from '../BoxHorizontal';\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 hasRenderableChildren = isReactNodeRenderable(children);\n\n  const hasTitleContent =\n    title !== false &&\n    (isReactNodeRenderable(title) || isReactNodeRenderable(titleAccessory));\n\n  const shouldRenderTitleRow = !hasRenderableChildren && hasTitleContent;\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 hasEndSection = Boolean(endSectionContent);\n\n  const renderLeftSection = () => {\n    if (hasRenderableChildren) {\n      return children;\n    }\n    if (shouldRenderTitleRow) {\n      const titleNode =\n        isReactNodeRenderable(title) && title !== '' ? title : null;\n      return (\n        <BoxHorizontal\n          endAccessory={titleAccessory}\n          textProps={{\n            variant: TextVariant.HeadingLg,\n            ...titleProps,\n          }}\n        >\n          {titleNode}\n        </BoxHorizontal>\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      <Box alignItems={BoxAlignItems.Start} style={{ flex: 1 }}>\n        {renderLeftSection()}\n      </Box>\n      {hasEndSection ? (\n        <Box flexDirection={BoxFlexDirection.Row} gap={2}>\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 { isReactNodeRenderable } 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 hasRenderableChildren = isReactNodeRenderable(children);\n\n  const hasTitleContent =\n    title !== false &&\n    (isReactNodeRenderable(title) || isReactNodeRenderable(titleAccessory));\n\n  const shouldRenderTitleRow = !hasRenderableChildren && hasTitleContent;\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 hasEndSection = Boolean(endSectionContent);\n\n  const renderLeftSection = () => {\n    if (hasRenderableChildren) {\n      return children;\n    }\n    if (shouldRenderTitleRow) {\n      const titleNode =\n        isReactNodeRenderable(title) && title !== '' ? title : null;\n      return (\n        <BoxRow\n          endAccessory={titleAccessory}\n          textProps={{\n            variant: TextVariant.HeadingLg,\n            ...titleProps,\n          }}\n        >\n          {titleNode}\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      <Box alignItems={BoxAlignItems.Start} style={{ flex: 1 }}>\n        {renderLeftSection()}\n      </Box>\n      {hasEndSection ? (\n        <Box flexDirection={BoxFlexDirection.Row} gap={2}>\n          {endSectionContent}\n        </Box>\n      ) : null}\n    </Box>\n  );\n};\n\nHeaderRoot.displayName = 'HeaderRoot';\n"]}

package/dist/components/HeaderRoot/HeaderRoot.mjs

@@ -11,7 +11,7 @@ const React = $importDefault($React);
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 // External dependencies.
 import { Box, BoxAlignItems, BoxFlexDirection } from "../Box/index.mjs";
-import { BoxHorizontal } from "../BoxHorizontal/index.mjs";
+import { BoxRow } from "../BoxRow/index.mjs";
 import { ButtonIcon, ButtonIconSize } from "../ButtonIcon/index.mjs";
 import { TextVariant } from "../Text/index.mjs";
 export const HeaderRoot = ({ children, title, titleProps, titleAccessory, endAccessory, endButtonIconProps, includesTopInset = false, style, testID, twClassName, ...viewProps }) => {
@@ -39,12 +39,12 @@ export const HeaderRoot = ({ children, title, titleProps, titleAccessory, endAcc
         }
         if (shouldRenderTitleRow) {
             const titleNode = isReactNodeRenderable(title) && title !== '' ? title : null;
-            return (<BoxHorizontal endAccessory={titleAccessory} textProps={{
+            return (<BoxRow endAccessory={titleAccessory} textProps={{
                     variant: TextVariant.HeadingLg,
                     ...titleProps,
                 }}>
           {titleNode}
-        </BoxHorizontal>);
+        </BoxRow>);
         }
         return null;
     };

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 { isReactNodeRenderable } 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 { BoxHorizontal } from '../BoxHorizontal';\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 hasRenderableChildren = isReactNodeRenderable(children);\n\n  const hasTitleContent =\n    title !== false &&\n    (isReactNodeRenderable(title) || isReactNodeRenderable(titleAccessory));\n\n  const shouldRenderTitleRow = !hasRenderableChildren && hasTitleContent;\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 hasEndSection = Boolean(endSectionContent);\n\n  const renderLeftSection = () => {\n    if (hasRenderableChildren) {\n      return children;\n    }\n    if (shouldRenderTitleRow) {\n      const titleNode =\n        isReactNodeRenderable(title) && title !== '' ? title : null;\n      return (\n        <BoxHorizontal\n          endAccessory={titleAccessory}\n          textProps={{\n            variant: TextVariant.HeadingLg,\n            ...titleProps,\n          }}\n        >\n          {titleNode}\n        </BoxHorizontal>\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      <Box alignItems={BoxAlignItems.Start} style={{ flex: 1 }}>\n        {renderLeftSection()}\n      </Box>\n      {hasEndSection ? (\n        <Box flexDirection={BoxFlexDirection.Row} gap={2}>\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 { isReactNodeRenderable } 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 hasRenderableChildren = isReactNodeRenderable(children);\n\n  const hasTitleContent =\n    title !== false &&\n    (isReactNodeRenderable(title) || isReactNodeRenderable(titleAccessory));\n\n  const shouldRenderTitleRow = !hasRenderableChildren && hasTitleContent;\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 hasEndSection = Boolean(endSectionContent);\n\n  const renderLeftSection = () => {\n    if (hasRenderableChildren) {\n      return children;\n    }\n    if (shouldRenderTitleRow) {\n      const titleNode =\n        isReactNodeRenderable(title) && title !== '' ? title : null;\n      return (\n        <BoxRow\n          endAccessory={titleAccessory}\n          textProps={{\n            variant: TextVariant.HeadingLg,\n            ...titleProps,\n          }}\n        >\n          {titleNode}\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      <Box alignItems={BoxAlignItems.Start} style={{ flex: 1 }}>\n        {renderLeftSection()}\n      </Box>\n      {hasEndSection ? (\n        <Box flexDirection={BoxFlexDirection.Row} gap={2}>\n          {endSectionContent}\n        </Box>\n      ) : null}\n    </Box>\n  );\n};\n\nHeaderRoot.displayName = 'HeaderRoot';\n"]}

package/dist/components/HeaderSearch/HeaderSearch.cjs

@@ -0,0 +1,80 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderSearch = void 0;
+const design_system_shared_1 = require("@metamask-previews/design-system-shared");
+const react_1 = __importDefault(require("react"));
+const Box_1 = require("../Box/index.cjs");
+const Button_1 = require("../Button/index.cjs");
+const ButtonIcon_1 = require("../ButtonIcon/index.cjs");
+const Icon_1 = require("../Icon/index.cjs");
+const TextFieldSearch_1 = require("../TextFieldSearch/index.cjs");
+const CANCEL_LABEL = 'Cancel';
+/**
+ * HeaderSearch is a header component that combines a search field
+ * with either a back button (screen variant) or cancel button (inline variant).
+ *
+ * @example
+ * // Screen variant with back button
+ * <HeaderSearch
+ *   variant={HeaderSearchVariant.Screen}
+ *   onPressBackButton={handleBack}
+ *   textFieldSearchProps={{
+ *     value: searchText,
+ *     onChangeText: setSearchText,
+ *     onPressClearButton: () => setSearchText(''),
+ *     placeholder: 'Search...',
+ *   }}
+ * />
+ *
+ * @example
+ * // Inline variant with cancel button
+ * <HeaderSearch
+ *   variant={HeaderSearchVariant.Inline}
+ *   onPressCancelButton={handleCancel}
+ *   textFieldSearchProps={{
+ *     value: searchText,
+ *     onChangeText: setSearchText,
+ *     onPressClearButton: () => setSearchText(''),
+ *     placeholder: 'Search...',
+ *   }}
+ * />
+ *
+ * @param props - Header row props (discriminated by `variant`).
+ * @returns The header search UI for the active variant.
+ */
+const HeaderSearch = (props) => {
+    const baseTwClassName = 'h-14 flex-row items-center';
+    if (props.variant === design_system_shared_1.HeaderSearchVariant.Screen) {
+        const { variant: _variant, textFieldSearchProps, twClassName, onPressBackButton, backButtonProps, ...screenBoxProps } = props;
+        return (<Box_1.Box {...screenBoxProps} twClassName={twClassName
+                ? `${baseTwClassName} ml-1 mr-4 gap-2 ${twClassName}`
+                : `${baseTwClassName} ml-1 mr-4 gap-2`}>
+        <ButtonIcon_1.ButtonIcon size={ButtonIcon_1.ButtonIconSize.Md} {...backButtonProps} iconName={Icon_1.IconName.ArrowLeft} onPress={onPressBackButton}/>
+        <TextFieldSearch_1.TextFieldSearch {...textFieldSearchProps} twClassName={textFieldSearchProps.twClassName
+                ? `flex-1 ${textFieldSearchProps.twClassName}`
+                : 'flex-1'}/>
+      </Box_1.Box>);
+    }
+    const { variant: _variant, textFieldSearchProps, twClassName, onPressCancelButton, cancelButtonProps, ...inlineBoxProps } = props;
+    return (<Box_1.Box {...inlineBoxProps} twClassName={twClassName
+            ? `${baseTwClassName} ml-4 ${twClassName}`
+            : `${baseTwClassName} ml-4`}>
+      <TextFieldSearch_1.TextFieldSearch {...textFieldSearchProps} twClassName={textFieldSearchProps.twClassName
+            ? `flex-1 ${textFieldSearchProps.twClassName}`
+            : 'flex-1'}/>
+      <Button_1.Button {...cancelButtonProps} variant={Button_1.ButtonVariant.Tertiary} onPress={onPressCancelButton} textProps={{
+            ...cancelButtonProps?.textProps,
+            twClassName: cancelButtonProps?.textProps?.twClassName
+                ? `text-default ${cancelButtonProps.textProps.twClassName}`
+                : 'text-default',
+        }}>
+        {CANCEL_LABEL}
+      </Button_1.Button>
+    </Box_1.Box>);
+};
+exports.HeaderSearch = HeaderSearch;
+exports.HeaderSearch.displayName = 'HeaderSearch';
+//# sourceMappingURL=HeaderSearch.cjs.map

package/dist/components/HeaderSearch/HeaderSearch.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderSearch.cjs","sourceRoot":"","sources":["../../../src/components/HeaderSearch/HeaderSearch.tsx"],"names":[],"mappings":";;;;;;AAAA,kFAA8E;AAC9E,kDAA0B;AAE1B,0CAA6B;AAC7B,gDAAkD;AAClD,wDAA2D;AAC3D,4CAAmC;AACnC,kEAAqD;AAKrD,MAAM,YAAY,GAAG,QAAQ,CAAC;AAE9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACI,MAAM,YAAY,GAAgC,CAAC,KAAK,EAAE,EAAE;IACjE,MAAM,eAAe,GAAG,4BAA4B,CAAC;IAErD,IAAI,KAAK,CAAC,OAAO,KAAK,0CAAmB,CAAC,MAAM,EAAE;QAChD,MAAM,EACJ,OAAO,EAAE,QAAQ,EACjB,oBAAoB,EACpB,WAAW,EACX,iBAAiB,EACjB,eAAe,EACf,GAAG,cAAc,EAClB,GAAG,KAAK,CAAC;QAEV,OAAO,CACL,CAAC,SAAG,CACF,IAAI,cAAc,CAAC,CACnB,WAAW,CAAC,CACV,WAAW;gBACT,CAAC,CAAC,GAAG,eAAe,oBAAoB,WAAW,EAAE;gBACrD,CAAC,CAAC,GAAG,eAAe,kBAAkB,CACzC,CAED;QAAA,CAAC,uBAAU,CACT,IAAI,CAAC,CAAC,2BAAc,CAAC,EAAE,CAAC,CACxB,IAAI,eAAe,CAAC,CACpB,QAAQ,CAAC,CAAC,eAAQ,CAAC,SAAS,CAAC,CAC7B,OAAO,CAAC,CAAC,iBAAiB,CAAC,EAE7B;QAAA,CAAC,iCAAe,CACd,IAAK,oBAA6C,CAAC,CACnD,WAAW,CAAC,CACV,oBAAoB,CAAC,WAAW;gBAC9B,CAAC,CAAC,UAAU,oBAAoB,CAAC,WAAW,EAAE;gBAC9C,CAAC,CAAC,QAAQ,CACb,EAEL;MAAA,EAAE,SAAG,CAAC,CACP,CAAC;KACH;IAED,MAAM,EACJ,OAAO,EAAE,QAAQ,EACjB,oBAAoB,EACpB,WAAW,EACX,mBAAmB,EACnB,iBAAiB,EACjB,GAAG,cAAc,EAClB,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,CAAC,SAAG,CACF,IAAI,cAAc,CAAC,CACnB,WAAW,CAAC,CACV,WAAW;YACT,CAAC,CAAC,GAAG,eAAe,SAAS,WAAW,EAAE;YAC1C,CAAC,CAAC,GAAG,eAAe,OAAO,CAC9B,CAED;MAAA,CAAC,iCAAe,CACd,IAAK,oBAA6C,CAAC,CACnD,WAAW,CAAC,CACV,oBAAoB,CAAC,WAAW;YAC9B,CAAC,CAAC,UAAU,oBAAoB,CAAC,WAAW,EAAE;YAC9C,CAAC,CAAC,QAAQ,CACb,EAEH;MAAA,CAAC,eAAM,CACL,IAAI,iBAAiB,CAAC,CACtB,OAAO,CAAC,CAAC,sBAAa,CAAC,QAAQ,CAAC,CAChC,OAAO,CAAC,CAAC,mBAAmB,CAAC,CAC7B,SAAS,CAAC,CAAC;YACT,GAAG,iBAAiB,EAAE,SAAS;YAC/B,WAAW,EAAE,iBAAiB,EAAE,SAAS,EAAE,WAAW;gBACpD,CAAC,CAAC,gBAAgB,iBAAiB,CAAC,SAAS,CAAC,WAAW,EAAE;gBAC3D,CAAC,CAAC,cAAc;SACnB,CAAC,CAEF;QAAA,CAAC,YAAY,CACf;MAAA,EAAE,eAAM,CACV;IAAA,EAAE,SAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AAjFW,QAAA,YAAY,gBAiFvB;AAEF,oBAAY,CAAC,WAAW,GAAG,cAAc,CAAC","sourcesContent":["import { HeaderSearchVariant } from '@metamask-previews/design-system-shared';\nimport React from 'react';\n\nimport { Box } from '../Box';\nimport { Button, ButtonVariant } from '../Button';\nimport { ButtonIcon, ButtonIconSize } from '../ButtonIcon';\nimport { IconName } from '../Icon';\nimport { TextFieldSearch } from '../TextFieldSearch';\nimport type { TextFieldSearchProps } from '../TextFieldSearch';\n\nimport type { HeaderSearchProps } from './HeaderSearch.types';\n\nconst CANCEL_LABEL = 'Cancel';\n\n/**\n * HeaderSearch is a header component that combines a search field\n * with either a back button (screen variant) or cancel button (inline variant).\n *\n * @example\n * // Screen variant with back button\n * <HeaderSearch\n *   variant={HeaderSearchVariant.Screen}\n *   onPressBackButton={handleBack}\n *   textFieldSearchProps={{\n *     value: searchText,\n *     onChangeText: setSearchText,\n *     onPressClearButton: () => setSearchText(''),\n *     placeholder: 'Search...',\n *   }}\n * />\n *\n * @example\n * // Inline variant with cancel button\n * <HeaderSearch\n *   variant={HeaderSearchVariant.Inline}\n *   onPressCancelButton={handleCancel}\n *   textFieldSearchProps={{\n *     value: searchText,\n *     onChangeText: setSearchText,\n *     onPressClearButton: () => setSearchText(''),\n *     placeholder: 'Search...',\n *   }}\n * />\n *\n * @param props - Header row props (discriminated by `variant`).\n * @returns The header search UI for the active variant.\n */\nexport const HeaderSearch: React.FC<HeaderSearchProps> = (props) => {\n  const baseTwClassName = 'h-14 flex-row items-center';\n\n  if (props.variant === HeaderSearchVariant.Screen) {\n    const {\n      variant: _variant,\n      textFieldSearchProps,\n      twClassName,\n      onPressBackButton,\n      backButtonProps,\n      ...screenBoxProps\n    } = props;\n\n    return (\n      <Box\n        {...screenBoxProps}\n        twClassName={\n          twClassName\n            ? `${baseTwClassName} ml-1 mr-4 gap-2 ${twClassName}`\n            : `${baseTwClassName} ml-1 mr-4 gap-2`\n        }\n      >\n        <ButtonIcon\n          size={ButtonIconSize.Md}\n          {...backButtonProps}\n          iconName={IconName.ArrowLeft}\n          onPress={onPressBackButton}\n        />\n        <TextFieldSearch\n          {...(textFieldSearchProps as TextFieldSearchProps)}\n          twClassName={\n            textFieldSearchProps.twClassName\n              ? `flex-1 ${textFieldSearchProps.twClassName}`\n              : 'flex-1'\n          }\n        />\n      </Box>\n    );\n  }\n\n  const {\n    variant: _variant,\n    textFieldSearchProps,\n    twClassName,\n    onPressCancelButton,\n    cancelButtonProps,\n    ...inlineBoxProps\n  } = props;\n\n  return (\n    <Box\n      {...inlineBoxProps}\n      twClassName={\n        twClassName\n          ? `${baseTwClassName} ml-4 ${twClassName}`\n          : `${baseTwClassName} ml-4`\n      }\n    >\n      <TextFieldSearch\n        {...(textFieldSearchProps as TextFieldSearchProps)}\n        twClassName={\n          textFieldSearchProps.twClassName\n            ? `flex-1 ${textFieldSearchProps.twClassName}`\n            : 'flex-1'\n        }\n      />\n      <Button\n        {...cancelButtonProps}\n        variant={ButtonVariant.Tertiary}\n        onPress={onPressCancelButton}\n        textProps={{\n          ...cancelButtonProps?.textProps,\n          twClassName: cancelButtonProps?.textProps?.twClassName\n            ? `text-default ${cancelButtonProps.textProps.twClassName}`\n            : 'text-default',\n        }}\n      >\n        {CANCEL_LABEL}\n      </Button>\n    </Box>\n  );\n};\n\nHeaderSearch.displayName = 'HeaderSearch';\n"]}

package/dist/components/HeaderSearch/HeaderSearch.d.cts

@@ -0,0 +1,37 @@
+import React from "react";
+import type { HeaderSearchProps } from "./HeaderSearch.types.cjs";
+/**
+ * HeaderSearch is a header component that combines a search field
+ * with either a back button (screen variant) or cancel button (inline variant).
+ *
+ * @example
+ * // Screen variant with back button
+ * <HeaderSearch
+ *   variant={HeaderSearchVariant.Screen}
+ *   onPressBackButton={handleBack}
+ *   textFieldSearchProps={{
+ *     value: searchText,
+ *     onChangeText: setSearchText,
+ *     onPressClearButton: () => setSearchText(''),
+ *     placeholder: 'Search...',
+ *   }}
+ * />
+ *
+ * @example
+ * // Inline variant with cancel button
+ * <HeaderSearch
+ *   variant={HeaderSearchVariant.Inline}
+ *   onPressCancelButton={handleCancel}
+ *   textFieldSearchProps={{
+ *     value: searchText,
+ *     onChangeText: setSearchText,
+ *     onPressClearButton: () => setSearchText(''),
+ *     placeholder: 'Search...',
+ *   }}
+ * />
+ *
+ * @param props - Header row props (discriminated by `variant`).
+ * @returns The header search UI for the active variant.
+ */
+export declare const HeaderSearch: React.FC<HeaderSearchProps>;
+//# sourceMappingURL=HeaderSearch.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderSearch.d.cts","sourceRoot":"","sources":["../../../src/components/HeaderSearch/HeaderSearch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAS1B,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;AAI9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAiFpD,CAAC"}

package/dist/components/HeaderSearch/HeaderSearch.d.mts

@@ -0,0 +1,37 @@
+import React from "react";
+import type { HeaderSearchProps } from "./HeaderSearch.types.mjs";
+/**
+ * HeaderSearch is a header component that combines a search field
+ * with either a back button (screen variant) or cancel button (inline variant).
+ *
+ * @example
+ * // Screen variant with back button
+ * <HeaderSearch
+ *   variant={HeaderSearchVariant.Screen}
+ *   onPressBackButton={handleBack}
+ *   textFieldSearchProps={{
+ *     value: searchText,
+ *     onChangeText: setSearchText,
+ *     onPressClearButton: () => setSearchText(''),
+ *     placeholder: 'Search...',
+ *   }}
+ * />
+ *
+ * @example
+ * // Inline variant with cancel button
+ * <HeaderSearch
+ *   variant={HeaderSearchVariant.Inline}
+ *   onPressCancelButton={handleCancel}
+ *   textFieldSearchProps={{
+ *     value: searchText,
+ *     onChangeText: setSearchText,
+ *     onPressClearButton: () => setSearchText(''),
+ *     placeholder: 'Search...',
+ *   }}
+ * />
+ *
+ * @param props - Header row props (discriminated by `variant`).
+ * @returns The header search UI for the active variant.
+ */
+export declare const HeaderSearch: React.FC<HeaderSearchProps>;
+//# sourceMappingURL=HeaderSearch.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderSearch.d.mts","sourceRoot":"","sources":["../../../src/components/HeaderSearch/HeaderSearch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAS1B,OAAO,KAAK,EAAE,iBAAiB,EAAE,iCAA6B;AAI9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAiFpD,CAAC"}

package/dist/components/HeaderSearch/HeaderSearch.mjs

@@ -0,0 +1,80 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import { HeaderSearchVariant } from "@metamask-previews/design-system-shared";
+import $React from "react";
+const React = $importDefault($React);
+import { Box } from "../Box/index.mjs";
+import { Button, ButtonVariant } from "../Button/index.mjs";
+import { ButtonIcon, ButtonIconSize } from "../ButtonIcon/index.mjs";
+import { IconName } from "../Icon/index.mjs";
+import { TextFieldSearch } from "../TextFieldSearch/index.mjs";
+const CANCEL_LABEL = 'Cancel';
+/**
+ * HeaderSearch is a header component that combines a search field
+ * with either a back button (screen variant) or cancel button (inline variant).
+ *
+ * @example
+ * // Screen variant with back button
+ * <HeaderSearch
+ *   variant={HeaderSearchVariant.Screen}
+ *   onPressBackButton={handleBack}
+ *   textFieldSearchProps={{
+ *     value: searchText,
+ *     onChangeText: setSearchText,
+ *     onPressClearButton: () => setSearchText(''),
+ *     placeholder: 'Search...',
+ *   }}
+ * />
+ *
+ * @example
+ * // Inline variant with cancel button
+ * <HeaderSearch
+ *   variant={HeaderSearchVariant.Inline}
+ *   onPressCancelButton={handleCancel}
+ *   textFieldSearchProps={{
+ *     value: searchText,
+ *     onChangeText: setSearchText,
+ *     onPressClearButton: () => setSearchText(''),
+ *     placeholder: 'Search...',
+ *   }}
+ * />
+ *
+ * @param props - Header row props (discriminated by `variant`).
+ * @returns The header search UI for the active variant.
+ */
+export const HeaderSearch = (props) => {
+    const baseTwClassName = 'h-14 flex-row items-center';
+    if (props.variant === HeaderSearchVariant.Screen) {
+        const { variant: _variant, textFieldSearchProps, twClassName, onPressBackButton, backButtonProps, ...screenBoxProps } = props;
+        return (<Box {...screenBoxProps} twClassName={twClassName
+                ? `${baseTwClassName} ml-1 mr-4 gap-2 ${twClassName}`
+                : `${baseTwClassName} ml-1 mr-4 gap-2`}>
+        <ButtonIcon size={ButtonIconSize.Md} {...backButtonProps} iconName={IconName.ArrowLeft} onPress={onPressBackButton}/>
+        <TextFieldSearch {...textFieldSearchProps} twClassName={textFieldSearchProps.twClassName
+                ? `flex-1 ${textFieldSearchProps.twClassName}`
+                : 'flex-1'}/>
+      </Box>);
+    }
+    const { variant: _variant, textFieldSearchProps, twClassName, onPressCancelButton, cancelButtonProps, ...inlineBoxProps } = props;
+    return (<Box {...inlineBoxProps} twClassName={twClassName
+            ? `${baseTwClassName} ml-4 ${twClassName}`
+            : `${baseTwClassName} ml-4`}>
+      <TextFieldSearch {...textFieldSearchProps} twClassName={textFieldSearchProps.twClassName
+            ? `flex-1 ${textFieldSearchProps.twClassName}`
+            : 'flex-1'}/>
+      <Button {...cancelButtonProps} variant={ButtonVariant.Tertiary} onPress={onPressCancelButton} textProps={{
+            ...cancelButtonProps?.textProps,
+            twClassName: cancelButtonProps?.textProps?.twClassName
+                ? `text-default ${cancelButtonProps.textProps.twClassName}`
+                : 'text-default',
+        }}>
+        {CANCEL_LABEL}
+      </Button>
+    </Box>);
+};
+HeaderSearch.displayName = 'HeaderSearch';
+//# sourceMappingURL=HeaderSearch.mjs.map

package/dist/components/HeaderSearch/HeaderSearch.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderSearch.mjs","sourceRoot":"","sources":["../../../src/components/HeaderSearch/HeaderSearch.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,mBAAmB,EAAE,gDAAgD;AAC9E,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,GAAG,EAAE,yBAAe;AAC7B,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,4BAAkB;AAClD,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,gCAAsB;AAC3D,OAAO,EAAE,QAAQ,EAAE,0BAAgB;AACnC,OAAO,EAAE,eAAe,EAAE,qCAA2B;AAKrD,MAAM,YAAY,GAAG,QAAQ,CAAC;AAE9B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,CAAC,MAAM,YAAY,GAAgC,CAAC,KAAK,EAAE,EAAE;IACjE,MAAM,eAAe,GAAG,4BAA4B,CAAC;IAErD,IAAI,KAAK,CAAC,OAAO,KAAK,mBAAmB,CAAC,MAAM,EAAE;QAChD,MAAM,EACJ,OAAO,EAAE,QAAQ,EACjB,oBAAoB,EACpB,WAAW,EACX,iBAAiB,EACjB,eAAe,EACf,GAAG,cAAc,EAClB,GAAG,KAAK,CAAC;QAEV,OAAO,CACL,CAAC,GAAG,CACF,IAAI,cAAc,CAAC,CACnB,WAAW,CAAC,CACV,WAAW;gBACT,CAAC,CAAC,GAAG,eAAe,oBAAoB,WAAW,EAAE;gBACrD,CAAC,CAAC,GAAG,eAAe,kBAAkB,CACzC,CAED;QAAA,CAAC,UAAU,CACT,IAAI,CAAC,CAAC,cAAc,CAAC,EAAE,CAAC,CACxB,IAAI,eAAe,CAAC,CACpB,QAAQ,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC,CAC7B,OAAO,CAAC,CAAC,iBAAiB,CAAC,EAE7B;QAAA,CAAC,eAAe,CACd,IAAK,oBAA6C,CAAC,CACnD,WAAW,CAAC,CACV,oBAAoB,CAAC,WAAW;gBAC9B,CAAC,CAAC,UAAU,oBAAoB,CAAC,WAAW,EAAE;gBAC9C,CAAC,CAAC,QAAQ,CACb,EAEL;MAAA,EAAE,GAAG,CAAC,CACP,CAAC;KACH;IAED,MAAM,EACJ,OAAO,EAAE,QAAQ,EACjB,oBAAoB,EACpB,WAAW,EACX,mBAAmB,EACnB,iBAAiB,EACjB,GAAG,cAAc,EAClB,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,CAAC,GAAG,CACF,IAAI,cAAc,CAAC,CACnB,WAAW,CAAC,CACV,WAAW;YACT,CAAC,CAAC,GAAG,eAAe,SAAS,WAAW,EAAE;YAC1C,CAAC,CAAC,GAAG,eAAe,OAAO,CAC9B,CAED;MAAA,CAAC,eAAe,CACd,IAAK,oBAA6C,CAAC,CACnD,WAAW,CAAC,CACV,oBAAoB,CAAC,WAAW;YAC9B,CAAC,CAAC,UAAU,oBAAoB,CAAC,WAAW,EAAE;YAC9C,CAAC,CAAC,QAAQ,CACb,EAEH;MAAA,CAAC,MAAM,CACL,IAAI,iBAAiB,CAAC,CACtB,OAAO,CAAC,CAAC,aAAa,CAAC,QAAQ,CAAC,CAChC,OAAO,CAAC,CAAC,mBAAmB,CAAC,CAC7B,SAAS,CAAC,CAAC;YACT,GAAG,iBAAiB,EAAE,SAAS;YAC/B,WAAW,EAAE,iBAAiB,EAAE,SAAS,EAAE,WAAW;gBACpD,CAAC,CAAC,gBAAgB,iBAAiB,CAAC,SAAS,CAAC,WAAW,EAAE;gBAC3D,CAAC,CAAC,cAAc;SACnB,CAAC,CAEF;QAAA,CAAC,YAAY,CACf;MAAA,EAAE,MAAM,CACV;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC","sourcesContent":["import { HeaderSearchVariant } from '@metamask-previews/design-system-shared';\nimport React from 'react';\n\nimport { Box } from '../Box';\nimport { Button, ButtonVariant } from '../Button';\nimport { ButtonIcon, ButtonIconSize } from '../ButtonIcon';\nimport { IconName } from '../Icon';\nimport { TextFieldSearch } from '../TextFieldSearch';\nimport type { TextFieldSearchProps } from '../TextFieldSearch';\n\nimport type { HeaderSearchProps } from './HeaderSearch.types';\n\nconst CANCEL_LABEL = 'Cancel';\n\n/**\n * HeaderSearch is a header component that combines a search field\n * with either a back button (screen variant) or cancel button (inline variant).\n *\n * @example\n * // Screen variant with back button\n * <HeaderSearch\n *   variant={HeaderSearchVariant.Screen}\n *   onPressBackButton={handleBack}\n *   textFieldSearchProps={{\n *     value: searchText,\n *     onChangeText: setSearchText,\n *     onPressClearButton: () => setSearchText(''),\n *     placeholder: 'Search...',\n *   }}\n * />\n *\n * @example\n * // Inline variant with cancel button\n * <HeaderSearch\n *   variant={HeaderSearchVariant.Inline}\n *   onPressCancelButton={handleCancel}\n *   textFieldSearchProps={{\n *     value: searchText,\n *     onChangeText: setSearchText,\n *     onPressClearButton: () => setSearchText(''),\n *     placeholder: 'Search...',\n *   }}\n * />\n *\n * @param props - Header row props (discriminated by `variant`).\n * @returns The header search UI for the active variant.\n */\nexport const HeaderSearch: React.FC<HeaderSearchProps> = (props) => {\n  const baseTwClassName = 'h-14 flex-row items-center';\n\n  if (props.variant === HeaderSearchVariant.Screen) {\n    const {\n      variant: _variant,\n      textFieldSearchProps,\n      twClassName,\n      onPressBackButton,\n      backButtonProps,\n      ...screenBoxProps\n    } = props;\n\n    return (\n      <Box\n        {...screenBoxProps}\n        twClassName={\n          twClassName\n            ? `${baseTwClassName} ml-1 mr-4 gap-2 ${twClassName}`\n            : `${baseTwClassName} ml-1 mr-4 gap-2`\n        }\n      >\n        <ButtonIcon\n          size={ButtonIconSize.Md}\n          {...backButtonProps}\n          iconName={IconName.ArrowLeft}\n          onPress={onPressBackButton}\n        />\n        <TextFieldSearch\n          {...(textFieldSearchProps as TextFieldSearchProps)}\n          twClassName={\n            textFieldSearchProps.twClassName\n              ? `flex-1 ${textFieldSearchProps.twClassName}`\n              : 'flex-1'\n          }\n        />\n      </Box>\n    );\n  }\n\n  const {\n    variant: _variant,\n    textFieldSearchProps,\n    twClassName,\n    onPressCancelButton,\n    cancelButtonProps,\n    ...inlineBoxProps\n  } = props;\n\n  return (\n    <Box\n      {...inlineBoxProps}\n      twClassName={\n        twClassName\n          ? `${baseTwClassName} ml-4 ${twClassName}`\n          : `${baseTwClassName} ml-4`\n      }\n    >\n      <TextFieldSearch\n        {...(textFieldSearchProps as TextFieldSearchProps)}\n        twClassName={\n          textFieldSearchProps.twClassName\n            ? `flex-1 ${textFieldSearchProps.twClassName}`\n            : 'flex-1'\n        }\n      />\n      <Button\n        {...cancelButtonProps}\n        variant={ButtonVariant.Tertiary}\n        onPress={onPressCancelButton}\n        textProps={{\n          ...cancelButtonProps?.textProps,\n          twClassName: cancelButtonProps?.textProps?.twClassName\n            ? `text-default ${cancelButtonProps.textProps.twClassName}`\n            : 'text-default',\n        }}\n      >\n        {CANCEL_LABEL}\n      </Button>\n    </Box>\n  );\n};\n\nHeaderSearch.displayName = 'HeaderSearch';\n"]}

package/dist/components/HeaderSearch/HeaderSearch.types.cjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderSearch.types.cjs","sourceRoot":"","sources":["../../../src/components/HeaderSearch/HeaderSearch.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n  HeaderSearchInlinePropsShared,\n  HeaderSearchScreenPropsShared,\n} from '@metamask-previews/design-system-shared';\n\nimport type { BoxProps } from '../Box';\nimport type { ButtonProps } from '../Button';\nimport type { ButtonIconProps } from '../ButtonIcon';\nimport type { TextFieldSearchProps } from '../TextFieldSearch';\n\ntype HeaderSearchBaseProps = Omit<BoxProps, 'children'> & {\n  /**\n   * Props to pass to the TextFieldSearch component.\n   */\n  textFieldSearchProps: Omit<TextFieldSearchProps, 'style'>;\n};\n\n/**\n * Screen variant props.\n * Renders a back button (ArrowLeft) on the left side.\n */\nexport type HeaderSearchScreenProps = HeaderSearchScreenPropsShared &\n  HeaderSearchBaseProps & {\n    onPressBackButton: () => void;\n    backButtonProps?: Omit<ButtonIconProps, 'iconName' | 'onPress'>;\n  };\n\n/**\n * Inline variant props.\n * Renders a cancel button on the right side.\n */\nexport type HeaderSearchInlineProps = HeaderSearchInlinePropsShared &\n  HeaderSearchBaseProps & {\n    onPressCancelButton: () => void;\n    cancelButtonProps?: Omit<ButtonProps, 'variant' | 'onPress' | 'children'>;\n  };\n\n/**\n * HeaderSearch component props.\n */\nexport type HeaderSearchProps =\n  | HeaderSearchScreenProps\n  | HeaderSearchInlineProps;\n"]}