@metamask-previews/design-system-react-native 0.13.0-preview.69c659c → 0.13.0-preview.8028c20

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

@@ -1,9 +1,113 @@
-import type { BoxPropsShared } from "@metamask-previews/design-system-shared";
 import type { ViewProps } from "react-native/index.js";
-export type BoxProps = BoxPropsShared & ViewProps & {
+import type { BoxFlexDirection, BoxFlexWrap, BoxSpacing, BoxBorderWidth, BoxAlignItems, BoxJustifyContent, BoxBackgroundColor, BoxBorderColor } from "../../types/index.mjs";
+export type BoxProps = {
+    /**
+     * The flexDirection style of the component.
+     */
+    flexDirection?: BoxFlexDirection;
+    /**
+     * The flexWrap style of the component.
+     */
+    flexWrap?: BoxFlexWrap;
+    /**
+     * The gap between the component's children.
+     * Use 1-12 for a gap of 4px-48px.
+     */
+    gap?: BoxSpacing;
+    /**
+     * The alignItems style of the component.
+     */
+    alignItems?: BoxAlignItems;
+    /**
+     * The justifyContent style of the component.
+     */
+    justifyContent?: BoxJustifyContent;
+    /**
+     * The margin of the component.
+     * Use 1-12 for margin of 4px-48px.
+     */
+    margin?: BoxSpacing;
+    /**
+     * The top margin of the component.
+     * Use 1-12 for margin of 4px-48px.
+     */
+    marginTop?: BoxSpacing;
+    /**
+     * The right margin of the component.
+     * Use 1-12 for margin of 4px-48px.
+     */
+    marginRight?: BoxSpacing;
+    /**
+     * The bottom margin of the component.
+     * Use 1-12 for margin of 4px-48px.
+     */
+    marginBottom?: BoxSpacing;
+    /**
+     * The left margin of the component.
+     * Use 1-12 for margin of 4px-48px.
+     */
+    marginLeft?: BoxSpacing;
+    /**
+     * The horizontal margin of the component.
+     * Use 1-12 for margin of 4px-48px.
+     */
+    marginHorizontal?: BoxSpacing;
+    /**
+     * The vertical margin of the component.
+     * Use 1-12 for margin of 4px-48px.
+     */
+    marginVertical?: BoxSpacing;
+    /**
+     * The padding of the component.
+     * Use 1-12 for padding of 4px-48px.
+     */
+    padding?: BoxSpacing;
+    /**
+     * The top padding of the component.
+     * Use 1-12 for padding of 4px-48px.
+     */
+    paddingTop?: BoxSpacing;
+    /**
+     * The right padding of the component.
+     * Use 1-12 for padding of 4px-48px.
+     */
+    paddingRight?: BoxSpacing;
+    /**
+     * The bottom padding of the component.
+     * Use 1-12 for padding of 4px-48px.
+     */
+    paddingBottom?: BoxSpacing;
+    /**
+     * The left padding of the component.
+     * Use 1-12 for padding of 4px-48px.
+     */
+    paddingLeft?: BoxSpacing;
+    /**
+     * The horizontal padding of the component.
+     * Use 1-12 for padding of 4px-48px.
+     */
+    paddingHorizontal?: BoxSpacing;
+    /**
+     * The vertical padding of the component.
+     * Use 1-12 for padding of 4px-48px.
+     */
+    paddingVertical?: BoxSpacing;
+    /**
+     * The border width of the component.
+     * Use 0, 1, 2, 4, or 8 for border width of 0px, 1px, 2px, 4px, or 8px.
+     */
+    borderWidth?: BoxBorderWidth;
+    /**
+     * The border color of the component.
+     */
+    borderColor?: BoxBorderColor;
+    /**
+     * The background color of the component.
+     */
+    backgroundColor?: BoxBackgroundColor;
     /**
      * Optional prop to add twrnc overriding classNames.
      */
     twClassName?: string;
-};
+} & ViewProps;
 //# sourceMappingURL=Box.types.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Box.types.d.mts","sourceRoot":"","sources":["../../../src/components/Box/Box.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,gDAAgD;AAC9E,OAAO,KAAK,EAAE,SAAS,EAAE,8BAAqB;AAE9C,MAAM,MAAM,QAAQ,GAAG,cAAc,GACnC,SAAS,GAAG;IACV;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC"}
+{"version":3,"file":"Box.types.d.mts","sourceRoot":"","sources":["../../../src/components/Box/Box.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,8BAAqB;AAE9C,OAAO,KAAK,EACV,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,cAAc,EACd,aAAa,EACb,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,EACf,8BAAoB;AAErB,MAAM,MAAM,QAAQ,GAAG;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB;;;OAGG;IACH,GAAG,CAAC,EAAE,UAAU,CAAC;IACjB;;OAEG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,iBAAiB,CAAC;IACnC;;;OAGG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB;;;OAGG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAC9B;;;OAGG;IACH,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B;;;OAGG;IACH,aAAa,CAAC,EAAE,UAAU,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,UAAU,CAAC;IAC/B;;;OAGG;IACH,eAAe,CAAC,EAAE,UAAU,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B;;OAEG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC;IAC7B;;OAEG;IACH,eAAe,CAAC,EAAE,kBAAkB,CAAC;IACrC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,SAAS,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Box.types.mjs","sourceRoot":"","sources":["../../../src/components/Box/Box.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BoxPropsShared } from '@metamask-previews/design-system-shared';\nimport type { ViewProps } from 'react-native';\n\nexport type BoxProps = BoxPropsShared &\n  ViewProps & {\n    /**\n     * Optional prop to add twrnc overriding classNames.\n     */\n    twClassName?: string;\n  };\n"]}
+{"version":3,"file":"Box.types.mjs","sourceRoot":"","sources":["../../../src/components/Box/Box.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ViewProps } from 'react-native';\n\nimport type {\n  BoxFlexDirection,\n  BoxFlexWrap,\n  BoxSpacing,\n  BoxBorderWidth,\n  BoxAlignItems,\n  BoxJustifyContent,\n  BoxBackgroundColor,\n  BoxBorderColor,\n} from '../../types';\n\nexport type BoxProps = {\n  /**\n   * The flexDirection style of the component.\n   */\n  flexDirection?: BoxFlexDirection;\n  /**\n   * The flexWrap style of the component.\n   */\n  flexWrap?: BoxFlexWrap;\n  /**\n   * The gap between the component's children.\n   * Use 1-12 for a gap of 4px-48px.\n   */\n  gap?: BoxSpacing;\n  /**\n   * The alignItems style of the component.\n   */\n  alignItems?: BoxAlignItems;\n  /**\n   * The justifyContent style of the component.\n   */\n  justifyContent?: BoxJustifyContent;\n  /**\n   * The margin of the component.\n   * Use 1-12 for margin of 4px-48px.\n   */\n  margin?: BoxSpacing;\n  /**\n   * The top margin of the component.\n   * Use 1-12 for margin of 4px-48px.\n   */\n  marginTop?: BoxSpacing;\n  /**\n   * The right margin of the component.\n   * Use 1-12 for margin of 4px-48px.\n   */\n  marginRight?: BoxSpacing;\n  /**\n   * The bottom margin of the component.\n   * Use 1-12 for margin of 4px-48px.\n   */\n  marginBottom?: BoxSpacing;\n  /**\n   * The left margin of the component.\n   * Use 1-12 for margin of 4px-48px.\n   */\n  marginLeft?: BoxSpacing;\n  /**\n   * The horizontal margin of the component.\n   * Use 1-12 for margin of 4px-48px.\n   */\n  marginHorizontal?: BoxSpacing;\n  /**\n   * The vertical margin of the component.\n   * Use 1-12 for margin of 4px-48px.\n   */\n  marginVertical?: BoxSpacing;\n  /**\n   * The padding of the component.\n   * Use 1-12 for padding of 4px-48px.\n   */\n  padding?: BoxSpacing;\n  /**\n   * The top padding of the component.\n   * Use 1-12 for padding of 4px-48px.\n   */\n  paddingTop?: BoxSpacing;\n  /**\n   * The right padding of the component.\n   * Use 1-12 for padding of 4px-48px.\n   */\n  paddingRight?: BoxSpacing;\n  /**\n   * The bottom padding of the component.\n   * Use 1-12 for padding of 4px-48px.\n   */\n  paddingBottom?: BoxSpacing;\n  /**\n   * The left padding of the component.\n   * Use 1-12 for padding of 4px-48px.\n   */\n  paddingLeft?: BoxSpacing;\n  /**\n   * The horizontal padding of the component.\n   * Use 1-12 for padding of 4px-48px.\n   */\n  paddingHorizontal?: BoxSpacing;\n  /**\n   * The vertical padding of the component.\n   * Use 1-12 for padding of 4px-48px.\n   */\n  paddingVertical?: BoxSpacing;\n  /**\n   * The border width of the component.\n   * Use 0, 1, 2, 4, or 8 for border width of 0px, 1px, 2px, 4px, or 8px.\n   */\n  borderWidth?: BoxBorderWidth;\n  /**\n   * The border color of the component.\n   */\n  borderColor?: BoxBorderColor;\n  /**\n   * The background color of the component.\n   */\n  backgroundColor?: BoxBackgroundColor;\n  /**\n   * Optional prop to add twrnc overriding classNames.\n   */\n  twClassName?: string;\n} & ViewProps;\n"]}

package/dist/components/Box/index.cjs

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Box = exports.BoxBorderColor = exports.BoxBackgroundColor = exports.BoxJustifyContent = exports.BoxAlignItems = exports.BoxFlexWrap = exports.BoxFlexDirection = void 0;
-var design_system_shared_1 = require("@metamask-previews/design-system-shared");
-Object.defineProperty(exports, "BoxFlexDirection", { enumerable: true, get: function () { return design_system_shared_1.BoxFlexDirection; } });
-Object.defineProperty(exports, "BoxFlexWrap", { enumerable: true, get: function () { return design_system_shared_1.BoxFlexWrap; } });
-Object.defineProperty(exports, "BoxAlignItems", { enumerable: true, get: function () { return design_system_shared_1.BoxAlignItems; } });
-Object.defineProperty(exports, "BoxJustifyContent", { enumerable: true, get: function () { return design_system_shared_1.BoxJustifyContent; } });
-Object.defineProperty(exports, "BoxBackgroundColor", { enumerable: true, get: function () { return design_system_shared_1.BoxBackgroundColor; } });
-Object.defineProperty(exports, "BoxBorderColor", { enumerable: true, get: function () { return design_system_shared_1.BoxBorderColor; } });
+var types_1 = require("../../types/index.cjs");
+Object.defineProperty(exports, "BoxFlexDirection", { enumerable: true, get: function () { return types_1.BoxFlexDirection; } });
+Object.defineProperty(exports, "BoxFlexWrap", { enumerable: true, get: function () { return types_1.BoxFlexWrap; } });
+Object.defineProperty(exports, "BoxAlignItems", { enumerable: true, get: function () { return types_1.BoxAlignItems; } });
+Object.defineProperty(exports, "BoxJustifyContent", { enumerable: true, get: function () { return types_1.BoxJustifyContent; } });
+Object.defineProperty(exports, "BoxBackgroundColor", { enumerable: true, get: function () { return types_1.BoxBackgroundColor; } });
+Object.defineProperty(exports, "BoxBorderColor", { enumerable: true, get: function () { return types_1.BoxBorderColor; } });
 var Box_1 = require("./Box.cjs");
 Object.defineProperty(exports, "Box", { enumerable: true, get: function () { return Box_1.Box; } });
 //# sourceMappingURL=index.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/Box/index.ts"],"names":[],"mappings":";;;AAAA,gFASiD;AAR/C,wHAAA,gBAAgB,OAAA;AAChB,mHAAA,WAAW,OAAA;AACX,qHAAA,aAAa,OAAA;AACb,yHAAA,iBAAiB,OAAA;AACjB,0HAAA,kBAAkB,OAAA;AAClB,sHAAA,cAAc,OAAA;AAIhB,iCAA4B;AAAnB,0FAAA,GAAG,OAAA","sourcesContent":["export {\n  BoxFlexDirection,\n  BoxFlexWrap,\n  BoxAlignItems,\n  BoxJustifyContent,\n  BoxBackgroundColor,\n  BoxBorderColor,\n  type BoxSpacing,\n  type BoxBorderWidth,\n} from '@metamask-previews/design-system-shared';\nexport { Box } from './Box';\nexport type { BoxProps } from './Box.types';\n"]}
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/Box/index.ts"],"names":[],"mappings":";;;AAAA,+CAOqB;AANnB,yGAAA,gBAAgB,OAAA;AAChB,oGAAA,WAAW,OAAA;AACX,sGAAA,aAAa,OAAA;AACb,0GAAA,iBAAiB,OAAA;AACjB,2GAAA,kBAAkB,OAAA;AAClB,uGAAA,cAAc,OAAA;AAGhB,iCAA4B;AAAnB,0FAAA,GAAG,OAAA","sourcesContent":["export {\n  BoxFlexDirection,\n  BoxFlexWrap,\n  BoxAlignItems,\n  BoxJustifyContent,\n  BoxBackgroundColor,\n  BoxBorderColor,\n} from '../../types';\nexport type { BoxSpacing, BoxBorderWidth } from '../../types';\nexport { Box } from './Box';\nexport type { BoxProps } from './Box.types';\n"]}

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

@@ -1,4 +1,5 @@
-export { BoxFlexDirection, BoxFlexWrap, BoxAlignItems, BoxJustifyContent, BoxBackgroundColor, BoxBorderColor, type BoxSpacing, type BoxBorderWidth, } from "@metamask-previews/design-system-shared";
+export { BoxFlexDirection, BoxFlexWrap, BoxAlignItems, BoxJustifyContent, BoxBackgroundColor, BoxBorderColor, } from "../../types/index.cjs";
+export type { BoxSpacing, BoxBorderWidth } from "../../types/index.cjs";
 export { Box } from "./Box.cjs";
 export type { BoxProps } from "./Box.types.cjs";
 //# sourceMappingURL=index.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Box/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,EACd,KAAK,UAAU,EACf,KAAK,cAAc,GACpB,gDAAgD;AACjD,OAAO,EAAE,GAAG,EAAE,kBAAc;AAC5B,YAAY,EAAE,QAAQ,EAAE,wBAAoB"}
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Box/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,GACf,8BAAoB;AACrB,YAAY,EAAE,UAAU,EAAE,cAAc,EAAE,8BAAoB;AAC9D,OAAO,EAAE,GAAG,EAAE,kBAAc;AAC5B,YAAY,EAAE,QAAQ,EAAE,wBAAoB"}

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

@@ -1,4 +1,5 @@
-export { BoxFlexDirection, BoxFlexWrap, BoxAlignItems, BoxJustifyContent, BoxBackgroundColor, BoxBorderColor, type BoxSpacing, type BoxBorderWidth, } from "@metamask-previews/design-system-shared";
+export { BoxFlexDirection, BoxFlexWrap, BoxAlignItems, BoxJustifyContent, BoxBackgroundColor, BoxBorderColor, } from "../../types/index.mjs";
+export type { BoxSpacing, BoxBorderWidth } from "../../types/index.mjs";
 export { Box } from "./Box.mjs";
 export type { BoxProps } from "./Box.types.mjs";
 //# sourceMappingURL=index.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/Box/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,EACd,KAAK,UAAU,EACf,KAAK,cAAc,GACpB,gDAAgD;AACjD,OAAO,EAAE,GAAG,EAAE,kBAAc;AAC5B,YAAY,EAAE,QAAQ,EAAE,wBAAoB"}
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/Box/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,GACf,8BAAoB;AACrB,YAAY,EAAE,UAAU,EAAE,cAAc,EAAE,8BAAoB;AAC9D,OAAO,EAAE,GAAG,EAAE,kBAAc;AAC5B,YAAY,EAAE,QAAQ,EAAE,wBAAoB"}

package/dist/components/Box/index.mjs

@@ -1,3 +1,3 @@
-export { BoxFlexDirection, BoxFlexWrap, BoxAlignItems, BoxJustifyContent, BoxBackgroundColor, BoxBorderColor } from "@metamask-previews/design-system-shared";
+export { BoxFlexDirection, BoxFlexWrap, BoxAlignItems, BoxJustifyContent, BoxBackgroundColor, BoxBorderColor } from "../../types/index.mjs";
 export { Box } from "./Box.mjs";
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/Box/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,EAGf,gDAAgD;AACjD,OAAO,EAAE,GAAG,EAAE,kBAAc","sourcesContent":["export {\n  BoxFlexDirection,\n  BoxFlexWrap,\n  BoxAlignItems,\n  BoxJustifyContent,\n  BoxBackgroundColor,\n  BoxBorderColor,\n  type BoxSpacing,\n  type BoxBorderWidth,\n} from '@metamask-previews/design-system-shared';\nexport { Box } from './Box';\nexport type { BoxProps } from './Box.types';\n"]}
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/Box/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,EACf,8BAAoB;AAErB,OAAO,EAAE,GAAG,EAAE,kBAAc","sourcesContent":["export {\n  BoxFlexDirection,\n  BoxFlexWrap,\n  BoxAlignItems,\n  BoxJustifyContent,\n  BoxBackgroundColor,\n  BoxBorderColor,\n} from '../../types';\nexport type { BoxSpacing, BoxBorderWidth } from '../../types';\nexport { Box } from './Box';\nexport type { BoxProps } from './Box.types';\n"]}

package/dist/components/BoxHorizontal/BoxHorizontal.cjs

@@ -4,11 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BoxHorizontal = void 0;
-const design_system_shared_1 = require("@metamask-previews/design-system-shared");
 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={design_system_shared_1.BoxFlexDirection.Row} alignItems={design_system_shared_1.BoxAlignItems.Center} gap={1} twClassName={twClassName} {...rest}>
+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}>
     {startAccessory}
     <TextOrChildren_1.TextOrChildren textProps={textProps}>{children}</TextOrChildren_1.TextOrChildren>
     {endAccessory}

package/dist/components/BoxHorizontal/BoxHorizontal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BoxHorizontal.cjs","sourceRoot":"","sources":["../../../src/components/BoxHorizontal/BoxHorizontal.tsx"],"names":[],"mappings":";;;;;;AAAA,kFAGiD;AACjD,kDAA0B;AAE1B,0CAA6B;AAC7B,gFAAmE;AAI5D,MAAM,aAAa,GAAG,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,cAAc,EACd,YAAY,EACZ,WAAW,EACX,GAAG,IAAI,EACY,EAAE,EAAE,CAAC,CACxB,CAAC,SAAG,CACF,aAAa,CAAC,CAAC,uCAAgB,CAAC,GAAG,CAAC,CACpC,UAAU,CAAC,CAAC,oCAAa,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,aAAa,iBAmBxB;AAEF,qBAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import {\n  BoxAlignItems,\n  BoxFlexDirection,\n} from '@metamask-previews/design-system-shared';\nimport React from 'react';\n\nimport { Box } from '../Box';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport type { BoxHorizontalProps } from './BoxHorizontal.types';\n\nexport const BoxHorizontal = ({\n  children,\n  textProps,\n  startAccessory,\n  endAccessory,\n  twClassName,\n  ...rest\n}: BoxHorizontalProps) => (\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\nBoxHorizontal.displayName = 'BoxHorizontal';\n"]}
+{"version":3,"file":"BoxHorizontal.cjs","sourceRoot":"","sources":["../../../src/components/BoxHorizontal/BoxHorizontal.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,iDAA8D;AAC9D,0CAA6B;AAC7B,gFAAmE;AAI5D,MAAM,aAAa,GAAG,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,cAAc,EACd,YAAY,EACZ,WAAW,EACX,GAAG,IAAI,EACY,EAAE,EAAE,CAAC,CACxB,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,aAAa,iBAmBxB;AAEF,qBAAa,CAAC,WAAW,GAAG,eAAe,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 { BoxHorizontalProps } from './BoxHorizontal.types';\n\nexport const BoxHorizontal = ({\n  children,\n  textProps,\n  startAccessory,\n  endAccessory,\n  twClassName,\n  ...rest\n}: BoxHorizontalProps) => (\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\nBoxHorizontal.displayName = 'BoxHorizontal';\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"BoxHorizontal.d.cts","sourceRoot":"","sources":["../../../src/components/BoxHorizontal/BoxHorizontal.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,cAAc;AAK1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa;kFAOvB,kBAAkB;;CAYpB,CAAC"}
+{"version":3,"file":"BoxHorizontal.d.cts","sourceRoot":"","sources":["../../../src/components/BoxHorizontal/BoxHorizontal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc;AAM1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa;kFAOvB,kBAAkB;;CAYpB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"BoxHorizontal.d.mts","sourceRoot":"","sources":["../../../src/components/BoxHorizontal/BoxHorizontal.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,cAAc;AAK1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa;kFAOvB,kBAAkB;;CAYpB,CAAC"}
+{"version":3,"file":"BoxHorizontal.d.mts","sourceRoot":"","sources":["../../../src/components/BoxHorizontal/BoxHorizontal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc;AAM1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE,eAAO,MAAM,aAAa;kFAOvB,kBAAkB;;CAYpB,CAAC"}

package/dist/components/BoxHorizontal/BoxHorizontal.mjs

@@ -4,9 +4,9 @@ function $importDefault(module) {
     }
     return module;
 }
-import { BoxAlignItems, BoxFlexDirection } from "@metamask-previews/design-system-shared";
 import $React from "react";
 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}>

package/dist/components/BoxHorizontal/BoxHorizontal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BoxHorizontal.mjs","sourceRoot":"","sources":["../../../src/components/BoxHorizontal/BoxHorizontal.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,aAAa,EACb,gBAAgB,EACjB,gDAAgD;AACjD,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,GAAG,EAAE,yBAAe;AAC7B,OAAO,EAAE,cAAc,EAAE,oDAA0C;AAInE,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,cAAc,EACd,YAAY,EACZ,WAAW,EACX,GAAG,IAAI,EACY,EAAE,EAAE,CAAC,CACxB,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,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import {\n  BoxAlignItems,\n  BoxFlexDirection,\n} from '@metamask-previews/design-system-shared';\nimport React from 'react';\n\nimport { Box } from '../Box';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport type { BoxHorizontalProps } from './BoxHorizontal.types';\n\nexport const BoxHorizontal = ({\n  children,\n  textProps,\n  startAccessory,\n  endAccessory,\n  twClassName,\n  ...rest\n}: BoxHorizontalProps) => (\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\nBoxHorizontal.displayName = 'BoxHorizontal';\n"]}
+{"version":3,"file":"BoxHorizontal.mjs","sourceRoot":"","sources":["../../../src/components/BoxHorizontal/BoxHorizontal.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,aAAa,GAAG,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,cAAc,EACd,YAAY,EACZ,WAAW,EACX,GAAG,IAAI,EACY,EAAE,EAAE,CAAC,CACxB,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,aAAa,CAAC,WAAW,GAAG,eAAe,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 { BoxHorizontalProps } from './BoxHorizontal.types';\n\nexport const BoxHorizontal = ({\n  children,\n  textProps,\n  startAccessory,\n  endAccessory,\n  twClassName,\n  ...rest\n}: BoxHorizontalProps) => (\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\nBoxHorizontal.displayName = 'BoxHorizontal';\n"]}

package/dist/components/BoxVertical/BoxVertical.cjs

@@ -4,11 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BoxVertical = void 0;
-const design_system_shared_1 = require("@metamask-previews/design-system-shared");
 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 BoxVertical = ({ children, textProps, topAccessory, bottomAccessory, twClassName, ...rest }) => (<Box_1.Box flexDirection={design_system_shared_1.BoxFlexDirection.Column} twClassName={twClassName} {...rest}>
+const BoxVertical = ({ children, textProps, topAccessory, bottomAccessory, twClassName, ...rest }) => (<Box_1.Box flexDirection={types_1.BoxFlexDirection.Column} twClassName={twClassName} {...rest}>
     {topAccessory}
     <TextOrChildren_1.TextOrChildren textProps={textProps}>{children}</TextOrChildren_1.TextOrChildren>
     {bottomAccessory}

package/dist/components/BoxVertical/BoxVertical.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BoxVertical.cjs","sourceRoot":"","sources":["../../../src/components/BoxVertical/BoxVertical.tsx"],"names":[],"mappings":";;;;;;AAAA,kFAA2E;AAC3E,kDAA0B;AAE1B,0CAA6B;AAC7B,gFAAmE;AAI5D,MAAM,WAAW,GAAG,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,eAAe,EACf,WAAW,EACX,GAAG,IAAI,EACU,EAAE,EAAE,CAAC,CACtB,CAAC,SAAG,CACF,aAAa,CAAC,CAAC,uCAAgB,CAAC,MAAM,CAAC,CACvC,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,IAAI,IAAI,CAAC,CAET;IAAA,CAAC,YAAY,CACb;IAAA,CAAC,+BAAc,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,+BAAc,CAChE;IAAA,CAAC,eAAe,CAClB;EAAA,EAAE,SAAG,CAAC,CACP,CAAC;AAjBW,QAAA,WAAW,eAiBtB;AAEF,mBAAW,CAAC,WAAW,GAAG,aAAa,CAAC","sourcesContent":["import { BoxFlexDirection } from '@metamask-previews/design-system-shared';\nimport React from 'react';\n\nimport { Box } from '../Box';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport type { BoxVerticalProps } from './BoxVertical.types';\n\nexport const BoxVertical = ({\n  children,\n  textProps,\n  topAccessory,\n  bottomAccessory,\n  twClassName,\n  ...rest\n}: BoxVerticalProps) => (\n  <Box\n    flexDirection={BoxFlexDirection.Column}\n    twClassName={twClassName}\n    {...rest}\n  >\n    {topAccessory}\n    <TextOrChildren textProps={textProps}>{children}</TextOrChildren>\n    {bottomAccessory}\n  </Box>\n);\n\nBoxVertical.displayName = 'BoxVertical';\n"]}
+{"version":3,"file":"BoxVertical.cjs","sourceRoot":"","sources":["../../../src/components/BoxVertical/BoxVertical.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,iDAA+C;AAC/C,0CAA6B;AAC7B,gFAAmE;AAI5D,MAAM,WAAW,GAAG,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,eAAe,EACf,WAAW,EACX,GAAG,IAAI,EACU,EAAE,EAAE,CAAC,CACtB,CAAC,SAAG,CACF,aAAa,CAAC,CAAC,wBAAgB,CAAC,MAAM,CAAC,CACvC,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,IAAI,IAAI,CAAC,CAET;IAAA,CAAC,YAAY,CACb;IAAA,CAAC,+BAAc,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,+BAAc,CAChE;IAAA,CAAC,eAAe,CAClB;EAAA,EAAE,SAAG,CAAC,CACP,CAAC;AAjBW,QAAA,WAAW,eAiBtB;AAEF,mBAAW,CAAC,WAAW,GAAG,aAAa,CAAC","sourcesContent":["import React from 'react';\n\nimport { BoxFlexDirection } from '../../types';\nimport { Box } from '../Box';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport type { BoxVerticalProps } from './BoxVertical.types';\n\nexport const BoxVertical = ({\n  children,\n  textProps,\n  topAccessory,\n  bottomAccessory,\n  twClassName,\n  ...rest\n}: BoxVerticalProps) => (\n  <Box\n    flexDirection={BoxFlexDirection.Column}\n    twClassName={twClassName}\n    {...rest}\n  >\n    {topAccessory}\n    <TextOrChildren textProps={textProps}>{children}</TextOrChildren>\n    {bottomAccessory}\n  </Box>\n);\n\nBoxVertical.displayName = 'BoxVertical';\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"BoxVertical.d.cts","sourceRoot":"","sources":["../../../src/components/BoxVertical/BoxVertical.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAK1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW;mFAOrB,gBAAgB;;CAUlB,CAAC"}
+{"version":3,"file":"BoxVertical.d.cts","sourceRoot":"","sources":["../../../src/components/BoxVertical/BoxVertical.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc;AAM1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW;mFAOrB,gBAAgB;;CAUlB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"BoxVertical.d.mts","sourceRoot":"","sources":["../../../src/components/BoxVertical/BoxVertical.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,cAAc;AAK1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW;mFAOrB,gBAAgB;;CAUlB,CAAC"}
+{"version":3,"file":"BoxVertical.d.mts","sourceRoot":"","sources":["../../../src/components/BoxVertical/BoxVertical.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,cAAc;AAM1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,gCAA4B;AAE5D,eAAO,MAAM,WAAW;mFAOrB,gBAAgB;;CAUlB,CAAC"}

package/dist/components/BoxVertical/BoxVertical.mjs

@@ -4,9 +4,9 @@ function $importDefault(module) {
     }
     return module;
 }
-import { BoxFlexDirection } from "@metamask-previews/design-system-shared";
 import $React from "react";
 const React = $importDefault($React);
+import { BoxFlexDirection } from "../../types/index.mjs";
 import { Box } from "../Box/index.mjs";
 import { TextOrChildren } from "../temp-components/TextOrChildren/index.mjs";
 export const BoxVertical = ({ children, textProps, topAccessory, bottomAccessory, twClassName, ...rest }) => (<Box flexDirection={BoxFlexDirection.Column} twClassName={twClassName} {...rest}>

package/dist/components/BoxVertical/BoxVertical.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BoxVertical.mjs","sourceRoot":"","sources":["../../../src/components/BoxVertical/BoxVertical.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,gBAAgB,EAAE,gDAAgD;AAC3E,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,GAAG,EAAE,yBAAe;AAC7B,OAAO,EAAE,cAAc,EAAE,oDAA0C;AAInE,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,eAAe,EACf,WAAW,EACX,GAAG,IAAI,EACU,EAAE,EAAE,CAAC,CACtB,CAAC,GAAG,CACF,aAAa,CAAC,CAAC,gBAAgB,CAAC,MAAM,CAAC,CACvC,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,IAAI,IAAI,CAAC,CAET;IAAA,CAAC,YAAY,CACb;IAAA,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,cAAc,CAChE;IAAA,CAAC,eAAe,CAClB;EAAA,EAAE,GAAG,CAAC,CACP,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC","sourcesContent":["import { BoxFlexDirection } from '@metamask-previews/design-system-shared';\nimport React from 'react';\n\nimport { Box } from '../Box';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport type { BoxVerticalProps } from './BoxVertical.types';\n\nexport const BoxVertical = ({\n  children,\n  textProps,\n  topAccessory,\n  bottomAccessory,\n  twClassName,\n  ...rest\n}: BoxVerticalProps) => (\n  <Box\n    flexDirection={BoxFlexDirection.Column}\n    twClassName={twClassName}\n    {...rest}\n  >\n    {topAccessory}\n    <TextOrChildren textProps={textProps}>{children}</TextOrChildren>\n    {bottomAccessory}\n  </Box>\n);\n\nBoxVertical.displayName = 'BoxVertical';\n"]}
+{"version":3,"file":"BoxVertical.mjs","sourceRoot":"","sources":["../../../src/components/BoxVertical/BoxVertical.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,gBAAgB,EAAE,8BAAoB;AAC/C,OAAO,EAAE,GAAG,EAAE,yBAAe;AAC7B,OAAO,EAAE,cAAc,EAAE,oDAA0C;AAInE,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,eAAe,EACf,WAAW,EACX,GAAG,IAAI,EACU,EAAE,EAAE,CAAC,CACtB,CAAC,GAAG,CACF,aAAa,CAAC,CAAC,gBAAgB,CAAC,MAAM,CAAC,CACvC,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,IAAI,IAAI,CAAC,CAET;IAAA,CAAC,YAAY,CACb;IAAA,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,cAAc,CAChE;IAAA,CAAC,eAAe,CAClB;EAAA,EAAE,GAAG,CAAC,CACP,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC","sourcesContent":["import React from 'react';\n\nimport { BoxFlexDirection } from '../../types';\nimport { Box } from '../Box';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport type { BoxVerticalProps } from './BoxVertical.types';\n\nexport const BoxVertical = ({\n  children,\n  textProps,\n  topAccessory,\n  bottomAccessory,\n  twClassName,\n  ...rest\n}: BoxVerticalProps) => (\n  <Box\n    flexDirection={BoxFlexDirection.Column}\n    twClassName={twClassName}\n    {...rest}\n  >\n    {topAccessory}\n    <TextOrChildren textProps={textProps}>{children}</TextOrChildren>\n    {bottomAccessory}\n  </Box>\n);\n\nBoxVertical.displayName = 'BoxVertical';\n"]}

package/dist/components/HeaderRoot/HeaderRoot.cjs

@@ -0,0 +1,61 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HeaderRoot = void 0;
+// Third party dependencies.
+const design_system_shared_1 = require("@metamask-previews/design-system-shared");
+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 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 }) => {
+    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    const hasRenderableChildren = (0, design_system_shared_1.isReactNodeRenderable)(children);
+    const hasTitleContent = title !== false &&
+        ((0, design_system_shared_1.isReactNodeRenderable)(title) || (0, design_system_shared_1.isReactNodeRenderable)(titleAccessory));
+    const shouldRenderTitleRow = !hasRenderableChildren && hasTitleContent;
+    const endSectionContent = (() => {
+        if (endAccessory) {
+            return endAccessory;
+        }
+        if (endButtonIconProps && endButtonIconProps.length > 0) {
+            const reversedProps = endButtonIconProps
+                .map((props, originalIndex) => ({ props, originalIndex }))
+                .reverse();
+            return reversedProps.map(({ props, originalIndex }) => (<ButtonIcon_1.ButtonIcon key={`end-button-icon-${originalIndex}`} size={ButtonIcon_1.ButtonIconSize.Md} {...props}/>));
+        }
+        return null;
+    })();
+    const hasEndSection = Boolean(endSectionContent);
+    const renderLeftSection = () => {
+        if (hasRenderableChildren) {
+            return children;
+        }
+        if (shouldRenderTitleRow) {
+            const titleNode = (0, design_system_shared_1.isReactNodeRenderable)(title) && title !== '' ? title : null;
+            return (<BoxHorizontal_1.BoxHorizontal endAccessory={titleAccessory} textProps={{
+                    variant: Text_1.TextVariant.HeadingLg,
+                    ...titleProps,
+                }}>
+          {titleNode}
+        </BoxHorizontal_1.BoxHorizontal>);
+        }
+        return null;
+    };
+    return (<Box_1.Box flexDirection={Box_1.BoxFlexDirection.Row} alignItems={Box_1.BoxAlignItems.Center} gap={4} paddingLeft={4} paddingRight={2} twClassName={`min-h-14 ${twClassName ?? ''}`.trim()} style={[includesTopInset && { marginTop: insets.top }, style]} testID={testID} {...viewProps}>
+      <Box_1.Box alignItems={Box_1.BoxAlignItems.Start} style={{ flex: 1 }}>
+        {renderLeftSection()}
+      </Box_1.Box>
+      {hasEndSection ? (<Box_1.Box flexDirection={Box_1.BoxFlexDirection.Row} gap={2}>
+          {endSectionContent}
+        </Box_1.Box>) : null}
+    </Box_1.Box>);
+};
+exports.HeaderRoot = HeaderRoot;
+exports.HeaderRoot.displayName = 'HeaderRoot';
+//# sourceMappingURL=HeaderRoot.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderRoot.cjs","sourceRoot":"","sources":["../../../src/components/HeaderRoot/HeaderRoot.tsx"],"names":[],"mappings":";;;;;;AAAA,4BAA4B;AAC5B,kFAAgF;AAChF,kDAA0B;AAC1B,mFAAmE;AAEnE,yBAAyB;AACzB,0CAA8D;AAC9D,8DAAiD;AACjD,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,qBAAqB,GAAG,IAAA,4CAAqB,EAAC,QAAQ,CAAC,CAAC;IAE9D,MAAM,eAAe,GACnB,KAAK,KAAK,KAAK;QACf,CAAC,IAAA,4CAAqB,EAAC,KAAK,CAAC,IAAI,IAAA,4CAAqB,EAAC,cAAc,CAAC,CAAC,CAAC;IAE1E,MAAM,oBAAoB,GAAG,CAAC,qBAAqB,IAAI,eAAe,CAAC;IAEvE,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,aAAa,GAAG,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAEjD,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,IAAI,qBAAqB,EAAE;YACzB,OAAO,QAAQ,CAAC;SACjB;QACD,IAAI,oBAAoB,EAAE;YACxB,MAAM,SAAS,GACb,IAAA,4CAAqB,EAAC,KAAK,CAAC,IAAI,KAAK,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;YAC9D,OAAO,CACL,CAAC,6BAAa,CACZ,YAAY,CAAC,CAAC,cAAc,CAAC,CAC7B,SAAS,CAAC,CAAC;oBACT,OAAO,EAAE,kBAAW,CAAC,SAAS;oBAC9B,GAAG,UAAU;iBACd,CAAC,CAEF;UAAA,CAAC,SAAS,CACZ;QAAA,EAAE,6BAAa,CAAC,CACjB,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,SAAG,CAAC,UAAU,CAAC,CAAC,mBAAa,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,CACvD;QAAA,CAAC,iBAAiB,EAAE,CACtB;MAAA,EAAE,SAAG,CACL;MAAA,CAAC,aAAa,CAAC,CAAC,CAAC,CACf,CAAC,SAAG,CAAC,aAAa,CAAC,CAAC,sBAAgB,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAC/C;UAAA,CAAC,iBAAiB,CACpB;QAAA,EAAE,SAAG,CAAC,CACP,CAAC,CAAC,CAAC,IAAI,CACV;IAAA,EAAE,SAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AAxFW,QAAA,UAAU,cAwFrB;AAEF,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC","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"]}

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

@@ -0,0 +1,7 @@
+import React from "react";
+import type { HeaderRootProps } from "./HeaderRoot.types.cjs";
+export declare const HeaderRoot: {
+    ({ children, title, titleProps, titleAccessory, endAccessory, endButtonIconProps, includesTopInset, style, testID, twClassName, ...viewProps }: HeaderRootProps): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=HeaderRoot.d.cts.map

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

@@ -0,0 +1 @@
+{"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;;CA4EjB,CAAC"}

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

@@ -0,0 +1,7 @@
+import React from "react";
+import type { HeaderRootProps } from "./HeaderRoot.types.mjs";
+export declare const HeaderRoot: {
+    ({ children, title, titleProps, titleAccessory, endAccessory, endButtonIconProps, includesTopInset, style, testID, twClassName, ...viewProps }: HeaderRootProps): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=HeaderRoot.d.mts.map

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

@@ -0,0 +1 @@
+{"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;;CA4EjB,CAAC"}

package/dist/components/HeaderRoot/HeaderRoot.mjs

@@ -0,0 +1,61 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+// Third party dependencies.
+import { isReactNodeRenderable } from "@metamask-previews/design-system-shared";
+import $React from "react";
+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 { 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 }) => {
+    const insets = useSafeAreaInsets();
+    const hasRenderableChildren = isReactNodeRenderable(children);
+    const hasTitleContent = title !== false &&
+        (isReactNodeRenderable(title) || isReactNodeRenderable(titleAccessory));
+    const shouldRenderTitleRow = !hasRenderableChildren && hasTitleContent;
+    const endSectionContent = (() => {
+        if (endAccessory) {
+            return endAccessory;
+        }
+        if (endButtonIconProps && endButtonIconProps.length > 0) {
+            const reversedProps = endButtonIconProps
+                .map((props, originalIndex) => ({ props, originalIndex }))
+                .reverse();
+            return reversedProps.map(({ props, originalIndex }) => (<ButtonIcon key={`end-button-icon-${originalIndex}`} size={ButtonIconSize.Md} {...props}/>));
+        }
+        return null;
+    })();
+    const hasEndSection = Boolean(endSectionContent);
+    const renderLeftSection = () => {
+        if (hasRenderableChildren) {
+            return children;
+        }
+        if (shouldRenderTitleRow) {
+            const titleNode = isReactNodeRenderable(title) && title !== '' ? title : null;
+            return (<BoxHorizontal endAccessory={titleAccessory} textProps={{
+                    variant: TextVariant.HeadingLg,
+                    ...titleProps,
+                }}>
+          {titleNode}
+        </BoxHorizontal>);
+        }
+        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}>
+      <Box alignItems={BoxAlignItems.Start} style={{ flex: 1 }}>
+        {renderLeftSection()}
+      </Box>
+      {hasEndSection ? (<Box flexDirection={BoxFlexDirection.Row} gap={2}>
+          {endSectionContent}
+        </Box>) : null}
+    </Box>);
+};
+HeaderRoot.displayName = 'HeaderRoot';
+//# sourceMappingURL=HeaderRoot.mjs.map

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

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

package/dist/components/HeaderRoot/HeaderRoot.types.cjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderRoot.types.cjs","sourceRoot":"","sources":["../../../src/components/HeaderRoot/HeaderRoot.types.ts"],"names":[],"mappings":"","sourcesContent":["// Third party dependencies.\nimport { ReactNode } from 'react';\nimport { ViewProps, StyleProp, ViewStyle } from 'react-native';\n\n// External dependencies.\nimport type { ButtonIconProps } from '../ButtonIcon';\nimport type { TextProps } from '../Text';\n\n/**\n * HeaderRoot component props.\n * Left section renders either children or a title row (mutually exclusive).\n * End section matches HeaderBase (endAccessory or endButtonIconProps).\n */\nexport type HeaderRootProps = ViewProps & {\n  /**\n   * Optional custom content for the left section.\n   * When provided, title/titleAccessory are not rendered (mutually exclusive).\n   */\n  children?: ReactNode;\n  /**\n   * Optional content displayed after the title in the title row.\n   * Only used when children is not provided and title or titleAccessory is set.\n   */\n  titleAccessory?: ReactNode;\n  /**\n   * Optional main title. Can be a string or a React node.\n   * Only used when children is not provided.\n   * When string: rendered via TextOrChildren with TextVariant.HeadingLg; titleProps apply.\n   * When node: rendered via TextOrChildren as-is; titleProps are not applied to the node.\n   */\n  title?: ReactNode;\n  /**\n   * Optional props passed to the Text component when title is a string (TextOrChildren textProps).\n   */\n  titleProps?: Partial<TextProps>;\n  /**\n   * Optional content to be displayed in the end section.\n   * Takes priority over endButtonIconProps if both are provided.\n   */\n  endAccessory?: ReactNode;\n  /**\n   * Optional array of ButtonIcon props to render multiple ButtonIcons as 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 prop to include the top inset so the header is visible below the device safe area.\n   */\n  includesTopInset?: boolean;\n  /**\n   * Optional style for the header container.\n   */\n  style?: StyleProp<ViewStyle>;\n  /**\n   * Optional test ID for the header container.\n   */\n  testID?: string;\n  /**\n   * Optional Tailwind class names for the header container.\n   */\n  twClassName?: string;\n};\n"]}

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

@@ -0,0 +1,60 @@
+import { ReactNode } from "react";
+import { ViewProps, StyleProp, ViewStyle } from "react-native/index.js";
+import type { ButtonIconProps } from "../ButtonIcon/index.cjs";
+import type { TextProps } from "../Text/index.cjs";
+/**
+ * HeaderRoot component props.
+ * Left section renders either children or a title row (mutually exclusive).
+ * End section matches HeaderBase (endAccessory or endButtonIconProps).
+ */
+export type HeaderRootProps = ViewProps & {
+    /**
+     * Optional custom content for the left section.
+     * When provided, title/titleAccessory are not rendered (mutually exclusive).
+     */
+    children?: ReactNode;
+    /**
+     * Optional content displayed after the title in the title row.
+     * Only used when children is not provided and title or titleAccessory is set.
+     */
+    titleAccessory?: ReactNode;
+    /**
+     * Optional main title. Can be a string or a React node.
+     * Only used when children is not provided.
+     * When string: rendered via TextOrChildren with TextVariant.HeadingLg; titleProps apply.
+     * When node: rendered via TextOrChildren as-is; titleProps are not applied to the node.
+     */
+    title?: ReactNode;
+    /**
+     * Optional props passed to the Text component when title is a string (TextOrChildren textProps).
+     */
+    titleProps?: Partial<TextProps>;
+    /**
+     * Optional content to be displayed in the end section.
+     * Takes priority over endButtonIconProps if both are provided.
+     */
+    endAccessory?: ReactNode;
+    /**
+     * Optional array of ButtonIcon props to render multiple ButtonIcons as end accessories.
+     * Rendered in reverse order (first item appears rightmost).
+     * Only used if endAccessory is not provided.
+     */
+    endButtonIconProps?: ButtonIconProps[];
+    /**
+     * Optional prop to include the top inset so the header is visible below the device safe area.
+     */
+    includesTopInset?: boolean;
+    /**
+     * Optional style for the header container.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Optional test ID for the header container.
+     */
+    testID?: string;
+    /**
+     * Optional Tailwind class names for the header container.
+     */
+    twClassName?: string;
+};
+//# sourceMappingURL=HeaderRoot.types.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderRoot.types.d.cts","sourceRoot":"","sources":["../../../src/components/HeaderRoot/HeaderRoot.types.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,cAAc;AAClC,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,8BAAqB;AAG/D,OAAO,KAAK,EAAE,eAAe,EAAE,gCAAsB;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;;;GAIG;AACH,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG;IACxC;;;OAGG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAChC;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,eAAe,EAAE,CAAC;IACvC;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC"}