@metamask/design-system-react-native 0.25.0 → 0.26.0

package/CHANGELOG.md

@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.26.0]
+
+### Added
+
+- Added `TitleAlert` for alert-style headings with a severity icon, title row, and optional description in modals, bottom sheets, and other compact surfaces ([#1131](https://github.com/MetaMask/metamask-design-system/pull/1131))
+- Added `SectionHeader` for section titles with optional start and end accessories, icon shortcuts, and an inline title accessory ([#1175](https://github.com/MetaMask/metamask-design-system/pull/1175))
+- Added `SectionDivider` as a horizontal rule with a muted top border and default vertical spacing for separating screen sections ([#1174](https://github.com/MetaMask/metamask-design-system/pull/1174))
+
+### Changed
+
+- Updated the `Telegram` icon asset to match the official Telegram logo ([#1176](https://github.com/MetaMask/metamask-design-system/pull/1176))
+
 ## [0.25.0]
 
 ### Added
@@ -434,7 +446,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Full TypeScript support with type definitions and enums
 - React Native integration with TWRNC preset support
 
-[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.25.0...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.26.0...HEAD
+[0.26.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.25.0...@metamask/design-system-react-native@0.26.0
 [0.25.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.24.0...@metamask/design-system-react-native@0.25.0
 [0.24.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.23.0...@metamask/design-system-react-native@0.24.0
 [0.23.0]: https://github.com/MetaMask/metamask-design-system/compare/@metamask/design-system-react-native@0.22.0...@metamask/design-system-react-native@0.23.0

package/dist/components/Icon/assets/telegram.svg

@@ -1,3 +1 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path d="M9.78 18.65l.28-4.23 7.68-6.92c.34-.31-.07-.46-.52-.19L7.74 13.3 3.64 12c-.88-.25-.89-.86.2-1.3l15.97-6.16c.73-.33 1.43.18 1.15 1.3l-2.72 12.81c-.19.91-.74 1.13-1.5.71L12.6 16.3l-1.99 1.93c-.23.23-.42.42-.83.42z"/>
-</svg>
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20.2949 3.81315C20.2949 3.81315 22.145 3.09173 21.9908 4.84377C21.9395 5.5652 21.4769 8.0902 21.1172 10.8213L19.8837 18.9117C19.8837 18.9117 19.781 20.0969 18.8559 20.303C17.9308 20.5091 16.5432 19.5816 16.2862 19.3754C16.0807 19.2209 12.4318 16.902 11.1469 15.7683C10.7872 15.4591 10.376 14.8407 11.1983 14.1193L16.5946 8.96625C17.2113 8.34787 17.828 6.90501 15.2584 8.65706L8.06338 13.5525C8.06338 13.5525 7.24109 14.0678 5.69933 13.604L2.35877 12.5734C2.35877 12.5734 1.12534 11.8004 3.23245 11.0274C8.37176 8.60549 14.6931 6.13201 20.2949 3.81315Z"/></svg>

package/dist/components/SectionDivider/SectionDivider.cjs

@@ -0,0 +1,47 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionDivider = void 0;
+const design_system_shared_1 = require("@metamask/design-system-shared");
+const design_system_twrnc_preset_1 = require("@metamask/design-system-twrnc-preset");
+const react_1 = __importStar(require("react"));
+const Box_1 = require("../Box/index.cjs");
+exports.SectionDivider = (0, react_1.forwardRef)(({ borderWidth, borderColor, marginVertical, twClassName, style, ...rest }, ref) => {
+    const tw = (0, design_system_twrnc_preset_1.useTailwind)();
+    const w = borderWidth ?? 1;
+    let borderTopClass;
+    if (w === 0) {
+        borderTopClass = 'border-t-0';
+    }
+    else if (w === 1) {
+        borderTopClass = 'border-t';
+    }
+    else {
+        borderTopClass = `border-t-${w}`;
+    }
+    return (<Box_1.Box ref={ref} borderColor={borderColor ?? design_system_shared_1.BoxBorderColor.BorderMuted} marginVertical={marginVertical ?? 5} style={[tw.style('self-stretch', borderTopClass, twClassName), style]} {...rest}/>);
+});
+exports.SectionDivider.displayName = 'SectionDivider';
+//# sourceMappingURL=SectionDivider.cjs.map

package/dist/components/SectionDivider/SectionDivider.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionDivider.cjs","sourceRoot":"","sources":["../../../src/components/SectionDivider/SectionDivider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,yEAAgE;AAChE,qFAAmE;AACnE,+CAA0C;AAG1C,0CAA6B;AAIhB,QAAA,cAAc,GAAG,IAAA,kBAAU,EACtC,CACE,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,WAAW,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EACzE,GAAG,EACH,EAAE;IACF,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IACzB,MAAM,CAAC,GAAG,WAAW,IAAI,CAAC,CAAC;IAC3B,IAAI,cAAsB,CAAC;IAC3B,IAAI,CAAC,KAAK,CAAC,EAAE;QACX,cAAc,GAAG,YAAY,CAAC;KAC/B;SAAM,IAAI,CAAC,KAAK,CAAC,EAAE;QAClB,cAAc,GAAG,UAAU,CAAC;KAC7B;SAAM;QACL,cAAc,GAAG,YAAY,CAAC,EAAE,CAAC;KAClC;IAED,OAAO,CACL,CAAC,SAAG,CACF,GAAG,CAAC,CAAC,GAAG,CAAC,CACT,WAAW,CAAC,CAAC,WAAW,IAAI,qCAAc,CAAC,WAAW,CAAC,CACvD,cAAc,CAAC,CAAC,cAAc,IAAI,CAAC,CAAC,CACpC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,EAAE,cAAc,EAAE,WAAW,CAAC,EAAE,KAAK,CAAC,CAAC,CACtE,IAAI,IAAI,CAAC,EACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,sBAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC","sourcesContent":["import { BoxBorderColor } from '@metamask/design-system-shared';\nimport { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React, { forwardRef } from 'react';\nimport type { View } from 'react-native';\n\nimport { Box } from '../Box';\n\nimport type { SectionDividerProps } from './SectionDivider.types';\n\nexport const SectionDivider = forwardRef<View, SectionDividerProps>(\n  (\n    { borderWidth, borderColor, marginVertical, twClassName, style, ...rest },\n    ref,\n  ) => {\n    const tw = useTailwind();\n    const w = borderWidth ?? 1;\n    let borderTopClass: string;\n    if (w === 0) {\n      borderTopClass = 'border-t-0';\n    } else if (w === 1) {\n      borderTopClass = 'border-t';\n    } else {\n      borderTopClass = `border-t-${w}`;\n    }\n\n    return (\n      <Box\n        ref={ref}\n        borderColor={borderColor ?? BoxBorderColor.BorderMuted}\n        marginVertical={marginVertical ?? 5}\n        style={[tw.style('self-stretch', borderTopClass, twClassName), style]}\n        {...rest}\n      />\n    );\n  },\n);\n\nSectionDivider.displayName = 'SectionDivider';\n"]}

package/dist/components/SectionDivider/SectionDivider.d.cts

@@ -0,0 +1,6 @@
+import React from "react";
+import type { View } from "react-native/index.js";
+export declare const SectionDivider: React.ForwardRefExoticComponent<import("@metamask/design-system-shared").BoxPropsShared & import("react-native").ViewProps & {
+    twClassName?: string | undefined;
+} & React.RefAttributes<View>>;
+//# sourceMappingURL=SectionDivider.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SectionDivider.d.cts","sourceRoot":"","sources":["../../../src/components/SectionDivider/SectionDivider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,cAAc;AAC1C,OAAO,KAAK,EAAE,IAAI,EAAE,8BAAqB;AAMzC,eAAO,MAAM,cAAc;;8BA0B1B,CAAC"}

package/dist/components/SectionDivider/SectionDivider.d.mts

@@ -0,0 +1,6 @@
+import React from "react";
+import type { View } from "react-native/index.js";
+export declare const SectionDivider: React.ForwardRefExoticComponent<import("@metamask/design-system-shared").BoxPropsShared & import("react-native").ViewProps & {
+    twClassName?: string | undefined;
+} & React.RefAttributes<View>>;
+//# sourceMappingURL=SectionDivider.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SectionDivider.d.mts","sourceRoot":"","sources":["../../../src/components/SectionDivider/SectionDivider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,cAAc;AAC1C,OAAO,KAAK,EAAE,IAAI,EAAE,8BAAqB;AAMzC,eAAO,MAAM,cAAc;;8BA0B1B,CAAC"}

package/dist/components/SectionDivider/SectionDivider.mjs

@@ -0,0 +1,28 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import { BoxBorderColor } from "@metamask/design-system-shared";
+import { useTailwind } from "@metamask/design-system-twrnc-preset";
+import $React, { forwardRef } from "react";
+const React = $importDefault($React);
+import { Box } from "../Box/index.mjs";
+export const SectionDivider = forwardRef(({ borderWidth, borderColor, marginVertical, twClassName, style, ...rest }, ref) => {
+    const tw = useTailwind();
+    const w = borderWidth ?? 1;
+    let borderTopClass;
+    if (w === 0) {
+        borderTopClass = 'border-t-0';
+    }
+    else if (w === 1) {
+        borderTopClass = 'border-t';
+    }
+    else {
+        borderTopClass = `border-t-${w}`;
+    }
+    return (<Box ref={ref} borderColor={borderColor ?? BoxBorderColor.BorderMuted} marginVertical={marginVertical ?? 5} style={[tw.style('self-stretch', borderTopClass, twClassName), style]} {...rest}/>);
+});
+SectionDivider.displayName = 'SectionDivider';
+//# sourceMappingURL=SectionDivider.mjs.map

package/dist/components/SectionDivider/SectionDivider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionDivider.mjs","sourceRoot":"","sources":["../../../src/components/SectionDivider/SectionDivider.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,cAAc,EAAE,uCAAuC;AAChE,OAAO,EAAE,WAAW,EAAE,6CAA6C;AACnE,OAAO,QAAO,EAAE,UAAU,EAAE,cAAc;;AAG1C,OAAO,EAAE,GAAG,EAAE,yBAAe;AAI7B,MAAM,CAAC,MAAM,cAAc,GAAG,UAAU,CACtC,CACE,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,WAAW,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EACzE,GAAG,EACH,EAAE;IACF,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IACzB,MAAM,CAAC,GAAG,WAAW,IAAI,CAAC,CAAC;IAC3B,IAAI,cAAsB,CAAC;IAC3B,IAAI,CAAC,KAAK,CAAC,EAAE;QACX,cAAc,GAAG,YAAY,CAAC;KAC/B;SAAM,IAAI,CAAC,KAAK,CAAC,EAAE;QAClB,cAAc,GAAG,UAAU,CAAC;KAC7B;SAAM;QACL,cAAc,GAAG,YAAY,CAAC,EAAE,CAAC;KAClC;IAED,OAAO,CACL,CAAC,GAAG,CACF,GAAG,CAAC,CAAC,GAAG,CAAC,CACT,WAAW,CAAC,CAAC,WAAW,IAAI,cAAc,CAAC,WAAW,CAAC,CACvD,cAAc,CAAC,CAAC,cAAc,IAAI,CAAC,CAAC,CACpC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,EAAE,cAAc,EAAE,WAAW,CAAC,EAAE,KAAK,CAAC,CAAC,CACtE,IAAI,IAAI,CAAC,EACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC","sourcesContent":["import { BoxBorderColor } from '@metamask/design-system-shared';\nimport { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React, { forwardRef } from 'react';\nimport type { View } from 'react-native';\n\nimport { Box } from '../Box';\n\nimport type { SectionDividerProps } from './SectionDivider.types';\n\nexport const SectionDivider = forwardRef<View, SectionDividerProps>(\n  (\n    { borderWidth, borderColor, marginVertical, twClassName, style, ...rest },\n    ref,\n  ) => {\n    const tw = useTailwind();\n    const w = borderWidth ?? 1;\n    let borderTopClass: string;\n    if (w === 0) {\n      borderTopClass = 'border-t-0';\n    } else if (w === 1) {\n      borderTopClass = 'border-t';\n    } else {\n      borderTopClass = `border-t-${w}`;\n    }\n\n    return (\n      <Box\n        ref={ref}\n        borderColor={borderColor ?? BoxBorderColor.BorderMuted}\n        marginVertical={marginVertical ?? 5}\n        style={[tw.style('self-stretch', borderTopClass, twClassName), style]}\n        {...rest}\n      />\n    );\n  },\n);\n\nSectionDivider.displayName = 'SectionDivider';\n"]}

package/dist/components/SectionDivider/SectionDivider.types.cjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SectionDivider.types.cjs","sourceRoot":"","sources":["../../../src/components/SectionDivider/SectionDivider.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BoxProps } from '../Box/Box.types';\n\nexport type SectionDividerProps = BoxProps;\n"]}

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

@@ -0,0 +1,3 @@
+import type { BoxProps } from "../Box/Box.types.cjs";
+export type SectionDividerProps = BoxProps;
+//# sourceMappingURL=SectionDivider.types.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SectionDivider.types.d.cts","sourceRoot":"","sources":["../../../src/components/SectionDivider/SectionDivider.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,6BAAyB;AAEjD,MAAM,MAAM,mBAAmB,GAAG,QAAQ,CAAC"}

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

@@ -0,0 +1,3 @@
+import type { BoxProps } from "../Box/Box.types.mjs";
+export type SectionDividerProps = BoxProps;
+//# sourceMappingURL=SectionDivider.types.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SectionDivider.types.d.mts","sourceRoot":"","sources":["../../../src/components/SectionDivider/SectionDivider.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,6BAAyB;AAEjD,MAAM,MAAM,mBAAmB,GAAG,QAAQ,CAAC"}

package/dist/components/SectionDivider/SectionDivider.types.mjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SectionDivider.types.mjs","sourceRoot":"","sources":["../../../src/components/SectionDivider/SectionDivider.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { BoxProps } from '../Box/Box.types';\n\nexport type SectionDividerProps = BoxProps;\n"]}

package/dist/components/SectionDivider/index.cjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/SectionDivider/index.ts"],"names":[],"mappings":";;;AAAA,uDAAkD;AAAzC,gHAAA,cAAc,OAAA","sourcesContent":["export { SectionDivider } from './SectionDivider';\nexport type { SectionDividerProps } from './SectionDivider.types';\n"]}

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

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

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

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

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

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

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

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

package/dist/components/SectionDivider/index.mjs

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

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

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

package/dist/components/SectionHeader/SectionHeader.cjs

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionHeader = void 0;
+const design_system_shared_1 = require("@metamask/design-system-shared");
+const react_1 = __importDefault(require("react"));
+const BoxRow_1 = require("../BoxRow/index.cjs");
+const Icon_1 = require("../Icon/index.cjs");
+/**
+ * Horizontal section header: optional start/end icons or accessories, and a title row with optional inline accessory.
+ * Remaining `View` props are forwarded to the outer {@link BoxRow}.
+ *
+ * @param props - Component props
+ * @param props.title - Title content for the inner row (required)
+ * @param props.titleAccessory - Optional node to the right of `title` in the inner row
+ * @param props.titleProps - Optional props merged into inner row `Text` when `title` is a string
+ * @param props.titleWrapperProps - Optional props spread onto the inner `BoxRow`
+ * @param props.startAccessory - Optional custom node before the title row on the outer row; used when no start icon is resolved
+ * @param props.startIconName - Optional start icon; takes precedence over `startAccessory` when resolved
+ * @param props.startIconProps - Props merged into the start `Icon` (defaults include medium size and default icon color)
+ * @param props.endAccessory - Optional custom node after the title row on the outer row; used when no end icon is resolved
+ * @param props.endIconName - Optional end icon; takes precedence over `endAccessory` when resolved
+ * @param props.endIconProps - Props merged into the end `Icon`
+ * @param props.twClassName - Optional Tailwind classes on the outer row
+ *
+ * @returns The rendered SectionHeader layout.
+ */
+const SectionHeader = ({ title, titleAccessory, titleProps, titleWrapperProps, startAccessory, startIconName, startIconProps, endAccessory, endIconName, endIconProps, twClassName = '', ...rest }) => {
+    const finalStartIconName = startIconName ?? startIconProps?.name;
+    const finalEndIconName = endIconName ?? endIconProps?.name;
+    return (<BoxRow_1.BoxRow {...rest} gap={1} twClassName={twClassName} startAccessory={finalStartIconName ? (<Icon_1.Icon size={design_system_shared_1.IconSize.Md} color={design_system_shared_1.IconColor.IconDefault} twClassName="shrink-0" {...startIconProps} name={finalStartIconName}/>) : (startAccessory)} endAccessory={finalEndIconName ? (<Icon_1.Icon size={design_system_shared_1.IconSize.Md} color={design_system_shared_1.IconColor.IconDefault} twClassName="shrink-0" {...endIconProps} name={finalEndIconName}/>) : (endAccessory)}>
+      {title ? (<BoxRow_1.BoxRow {...titleWrapperProps} gap={1} endAccessory={titleAccessory} textProps={{
+                variant: design_system_shared_1.TextVariant.HeadingMd,
+                color: design_system_shared_1.TextColor.TextDefault,
+                ...titleProps,
+            }}>
+          {title}
+        </BoxRow_1.BoxRow>) : null}
+    </BoxRow_1.BoxRow>);
+};
+exports.SectionHeader = SectionHeader;
+exports.SectionHeader.displayName = 'SectionHeader';
+//# sourceMappingURL=SectionHeader.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SectionHeader.cjs","sourceRoot":"","sources":["../../../src/components/SectionHeader/SectionHeader.tsx"],"names":[],"mappings":";;;;;;AAAA,yEAKwC;AACxC,kDAA0B;AAE1B,gDAAmC;AACnC,4CAA+B;AAI/B;;;;;;;;;;;;;;;;;;GAkBG;AACI,MAAM,aAAa,GAAiC,CAAC,EAC1D,KAAK,EACL,cAAc,EACd,UAAU,EACV,iBAAiB,EACjB,cAAc,EACd,aAAa,EACb,cAAc,EACd,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,WAAW,GAAG,EAAE,EAChB,GAAG,IAAI,EACR,EAAE,EAAE;IACH,MAAM,kBAAkB,GAAG,aAAa,IAAI,cAAc,EAAE,IAAI,CAAC;IACjE,MAAM,gBAAgB,GAAG,WAAW,IAAI,YAAY,EAAE,IAAI,CAAC;IAE3D,OAAO,CACL,CAAC,eAAM,CACL,IAAI,IAAI,CAAC,CACT,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,cAAc,CAAC,CACb,kBAAkB,CAAC,CAAC,CAAC,CACnB,CAAC,WAAI,CACH,IAAI,CAAC,CAAC,+BAAQ,CAAC,EAAE,CAAC,CAClB,KAAK,CAAC,CAAC,gCAAS,CAAC,WAAW,CAAC,CAC7B,WAAW,CAAC,UAAU,CACtB,IAAI,cAAc,CAAC,CACnB,IAAI,CAAC,CAAC,kBAAkB,CAAC,EACzB,CACH,CAAC,CAAC,CAAC,CACF,cAAc,CACf,CACF,CACD,YAAY,CAAC,CACX,gBAAgB,CAAC,CAAC,CAAC,CACjB,CAAC,WAAI,CACH,IAAI,CAAC,CAAC,+BAAQ,CAAC,EAAE,CAAC,CAClB,KAAK,CAAC,CAAC,gCAAS,CAAC,WAAW,CAAC,CAC7B,WAAW,CAAC,UAAU,CACtB,IAAI,YAAY,CAAC,CACjB,IAAI,CAAC,CAAC,gBAAgB,CAAC,EACvB,CACH,CAAC,CAAC,CAAC,CACF,YAAY,CACb,CACF,CAED;MAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CACP,CAAC,eAAM,CACL,IAAI,iBAAiB,CAAC,CACtB,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,YAAY,CAAC,CAAC,cAAc,CAAC,CAC7B,SAAS,CAAC,CAAC;gBACT,OAAO,EAAE,kCAAW,CAAC,SAAS;gBAC9B,KAAK,EAAE,gCAAS,CAAC,WAAW;gBAC5B,GAAG,UAAU;aACd,CAAC,CAEF;UAAA,CAAC,KAAK,CACR;QAAA,EAAE,eAAM,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CACV;IAAA,EAAE,eAAM,CAAC,CACV,CAAC;AACJ,CAAC,CAAC;AAjEW,QAAA,aAAa,iBAiExB;AAEF,qBAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import {\n  IconColor,\n  IconSize,\n  TextColor,\n  TextVariant,\n} from '@metamask/design-system-shared';\nimport React from 'react';\n\nimport { BoxRow } from '../BoxRow';\nimport { Icon } from '../Icon';\n\nimport type { SectionHeaderProps } from './SectionHeader.types';\n\n/**\n * Horizontal section header: optional start/end icons or accessories, and a title row with optional inline accessory.\n * Remaining `View` props are forwarded to the outer {@link BoxRow}.\n *\n * @param props - Component props\n * @param props.title - Title content for the inner row (required)\n * @param props.titleAccessory - Optional node to the right of `title` in the inner row\n * @param props.titleProps - Optional props merged into inner row `Text` when `title` is a string\n * @param props.titleWrapperProps - Optional props spread onto the inner `BoxRow`\n * @param props.startAccessory - Optional custom node before the title row on the outer row; used when no start icon is resolved\n * @param props.startIconName - Optional start icon; takes precedence over `startAccessory` when resolved\n * @param props.startIconProps - Props merged into the start `Icon` (defaults include medium size and default icon color)\n * @param props.endAccessory - Optional custom node after the title row on the outer row; used when no end icon is resolved\n * @param props.endIconName - Optional end icon; takes precedence over `endAccessory` when resolved\n * @param props.endIconProps - Props merged into the end `Icon`\n * @param props.twClassName - Optional Tailwind classes on the outer row\n *\n * @returns The rendered SectionHeader layout.\n */\nexport const SectionHeader: React.FC<SectionHeaderProps> = ({\n  title,\n  titleAccessory,\n  titleProps,\n  titleWrapperProps,\n  startAccessory,\n  startIconName,\n  startIconProps,\n  endAccessory,\n  endIconName,\n  endIconProps,\n  twClassName = '',\n  ...rest\n}) => {\n  const finalStartIconName = startIconName ?? startIconProps?.name;\n  const finalEndIconName = endIconName ?? endIconProps?.name;\n\n  return (\n    <BoxRow\n      {...rest}\n      gap={1}\n      twClassName={twClassName}\n      startAccessory={\n        finalStartIconName ? (\n          <Icon\n            size={IconSize.Md}\n            color={IconColor.IconDefault}\n            twClassName=\"shrink-0\"\n            {...startIconProps}\n            name={finalStartIconName}\n          />\n        ) : (\n          startAccessory\n        )\n      }\n      endAccessory={\n        finalEndIconName ? (\n          <Icon\n            size={IconSize.Md}\n            color={IconColor.IconDefault}\n            twClassName=\"shrink-0\"\n            {...endIconProps}\n            name={finalEndIconName}\n          />\n        ) : (\n          endAccessory\n        )\n      }\n    >\n      {title ? (\n        <BoxRow\n          {...titleWrapperProps}\n          gap={1}\n          endAccessory={titleAccessory}\n          textProps={{\n            variant: TextVariant.HeadingMd,\n            color: TextColor.TextDefault,\n            ...titleProps,\n          }}\n        >\n          {title}\n        </BoxRow>\n      ) : null}\n    </BoxRow>\n  );\n};\n\nSectionHeader.displayName = 'SectionHeader';\n"]}

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

@@ -0,0 +1,23 @@
+import React from "react";
+import type { SectionHeaderProps } from "./SectionHeader.types.cjs";
+/**
+ * Horizontal section header: optional start/end icons or accessories, and a title row with optional inline accessory.
+ * Remaining `View` props are forwarded to the outer {@link BoxRow}.
+ *
+ * @param props - Component props
+ * @param props.title - Title content for the inner row (required)
+ * @param props.titleAccessory - Optional node to the right of `title` in the inner row
+ * @param props.titleProps - Optional props merged into inner row `Text` when `title` is a string
+ * @param props.titleWrapperProps - Optional props spread onto the inner `BoxRow`
+ * @param props.startAccessory - Optional custom node before the title row on the outer row; used when no start icon is resolved
+ * @param props.startIconName - Optional start icon; takes precedence over `startAccessory` when resolved
+ * @param props.startIconProps - Props merged into the start `Icon` (defaults include medium size and default icon color)
+ * @param props.endAccessory - Optional custom node after the title row on the outer row; used when no end icon is resolved
+ * @param props.endIconName - Optional end icon; takes precedence over `endAccessory` when resolved
+ * @param props.endIconProps - Props merged into the end `Icon`
+ * @param props.twClassName - Optional Tailwind classes on the outer row
+ *
+ * @returns The rendered SectionHeader layout.
+ */
+export declare const SectionHeader: React.FC<SectionHeaderProps>;
+//# sourceMappingURL=SectionHeader.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SectionHeader.d.cts","sourceRoot":"","sources":["../../../src/components/SectionHeader/SectionHeader.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,cAAc;AAK1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAiEtD,CAAC"}

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

@@ -0,0 +1,23 @@
+import React from "react";
+import type { SectionHeaderProps } from "./SectionHeader.types.mjs";
+/**
+ * Horizontal section header: optional start/end icons or accessories, and a title row with optional inline accessory.
+ * Remaining `View` props are forwarded to the outer {@link BoxRow}.
+ *
+ * @param props - Component props
+ * @param props.title - Title content for the inner row (required)
+ * @param props.titleAccessory - Optional node to the right of `title` in the inner row
+ * @param props.titleProps - Optional props merged into inner row `Text` when `title` is a string
+ * @param props.titleWrapperProps - Optional props spread onto the inner `BoxRow`
+ * @param props.startAccessory - Optional custom node before the title row on the outer row; used when no start icon is resolved
+ * @param props.startIconName - Optional start icon; takes precedence over `startAccessory` when resolved
+ * @param props.startIconProps - Props merged into the start `Icon` (defaults include medium size and default icon color)
+ * @param props.endAccessory - Optional custom node after the title row on the outer row; used when no end icon is resolved
+ * @param props.endIconName - Optional end icon; takes precedence over `endAccessory` when resolved
+ * @param props.endIconProps - Props merged into the end `Icon`
+ * @param props.twClassName - Optional Tailwind classes on the outer row
+ *
+ * @returns The rendered SectionHeader layout.
+ */
+export declare const SectionHeader: React.FC<SectionHeaderProps>;
+//# sourceMappingURL=SectionHeader.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SectionHeader.d.mts","sourceRoot":"","sources":["../../../src/components/SectionHeader/SectionHeader.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,cAAc;AAK1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,kCAA8B;AAEhE;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAiEtD,CAAC"}

package/dist/components/SectionHeader/SectionHeader.mjs

@@ -0,0 +1,45 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import { IconColor, IconSize, TextColor, TextVariant } from "@metamask/design-system-shared";
+import $React from "react";
+const React = $importDefault($React);
+import { BoxRow } from "../BoxRow/index.mjs";
+import { Icon } from "../Icon/index.mjs";
+/**
+ * Horizontal section header: optional start/end icons or accessories, and a title row with optional inline accessory.
+ * Remaining `View` props are forwarded to the outer {@link BoxRow}.
+ *
+ * @param props - Component props
+ * @param props.title - Title content for the inner row (required)
+ * @param props.titleAccessory - Optional node to the right of `title` in the inner row
+ * @param props.titleProps - Optional props merged into inner row `Text` when `title` is a string
+ * @param props.titleWrapperProps - Optional props spread onto the inner `BoxRow`
+ * @param props.startAccessory - Optional custom node before the title row on the outer row; used when no start icon is resolved
+ * @param props.startIconName - Optional start icon; takes precedence over `startAccessory` when resolved
+ * @param props.startIconProps - Props merged into the start `Icon` (defaults include medium size and default icon color)
+ * @param props.endAccessory - Optional custom node after the title row on the outer row; used when no end icon is resolved
+ * @param props.endIconName - Optional end icon; takes precedence over `endAccessory` when resolved
+ * @param props.endIconProps - Props merged into the end `Icon`
+ * @param props.twClassName - Optional Tailwind classes on the outer row
+ *
+ * @returns The rendered SectionHeader layout.
+ */
+export const SectionHeader = ({ title, titleAccessory, titleProps, titleWrapperProps, startAccessory, startIconName, startIconProps, endAccessory, endIconName, endIconProps, twClassName = '', ...rest }) => {
+    const finalStartIconName = startIconName ?? startIconProps?.name;
+    const finalEndIconName = endIconName ?? endIconProps?.name;
+    return (<BoxRow {...rest} gap={1} twClassName={twClassName} startAccessory={finalStartIconName ? (<Icon size={IconSize.Md} color={IconColor.IconDefault} twClassName="shrink-0" {...startIconProps} name={finalStartIconName}/>) : (startAccessory)} endAccessory={finalEndIconName ? (<Icon size={IconSize.Md} color={IconColor.IconDefault} twClassName="shrink-0" {...endIconProps} name={finalEndIconName}/>) : (endAccessory)}>
+      {title ? (<BoxRow {...titleWrapperProps} gap={1} endAccessory={titleAccessory} textProps={{
+                variant: TextVariant.HeadingMd,
+                color: TextColor.TextDefault,
+                ...titleProps,
+            }}>
+          {title}
+        </BoxRow>) : null}
+    </BoxRow>);
+};
+SectionHeader.displayName = 'SectionHeader';
+//# sourceMappingURL=SectionHeader.mjs.map

package/dist/components/SectionHeader/SectionHeader.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionHeader.mjs","sourceRoot":"","sources":["../../../src/components/SectionHeader/SectionHeader.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EACL,SAAS,EACT,QAAQ,EACR,SAAS,EACT,WAAW,EACZ,uCAAuC;AACxC,OAAO,MAAK,cAAc;;AAE1B,OAAO,EAAE,MAAM,EAAE,4BAAkB;AACnC,OAAO,EAAE,IAAI,EAAE,0BAAgB;AAI/B;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,aAAa,GAAiC,CAAC,EAC1D,KAAK,EACL,cAAc,EACd,UAAU,EACV,iBAAiB,EACjB,cAAc,EACd,aAAa,EACb,cAAc,EACd,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,WAAW,GAAG,EAAE,EAChB,GAAG,IAAI,EACR,EAAE,EAAE;IACH,MAAM,kBAAkB,GAAG,aAAa,IAAI,cAAc,EAAE,IAAI,CAAC;IACjE,MAAM,gBAAgB,GAAG,WAAW,IAAI,YAAY,EAAE,IAAI,CAAC;IAE3D,OAAO,CACL,CAAC,MAAM,CACL,IAAI,IAAI,CAAC,CACT,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,cAAc,CAAC,CACb,kBAAkB,CAAC,CAAC,CAAC,CACnB,CAAC,IAAI,CACH,IAAI,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAClB,KAAK,CAAC,CAAC,SAAS,CAAC,WAAW,CAAC,CAC7B,WAAW,CAAC,UAAU,CACtB,IAAI,cAAc,CAAC,CACnB,IAAI,CAAC,CAAC,kBAAkB,CAAC,EACzB,CACH,CAAC,CAAC,CAAC,CACF,cAAc,CACf,CACF,CACD,YAAY,CAAC,CACX,gBAAgB,CAAC,CAAC,CAAC,CACjB,CAAC,IAAI,CACH,IAAI,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAClB,KAAK,CAAC,CAAC,SAAS,CAAC,WAAW,CAAC,CAC7B,WAAW,CAAC,UAAU,CACtB,IAAI,YAAY,CAAC,CACjB,IAAI,CAAC,CAAC,gBAAgB,CAAC,EACvB,CACH,CAAC,CAAC,CAAC,CACF,YAAY,CACb,CACF,CAED;MAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CACP,CAAC,MAAM,CACL,IAAI,iBAAiB,CAAC,CACtB,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,YAAY,CAAC,CAAC,cAAc,CAAC,CAC7B,SAAS,CAAC,CAAC;gBACT,OAAO,EAAE,WAAW,CAAC,SAAS;gBAC9B,KAAK,EAAE,SAAS,CAAC,WAAW;gBAC5B,GAAG,UAAU;aACd,CAAC,CAEF;UAAA,CAAC,KAAK,CACR;QAAA,EAAE,MAAM,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CACV;IAAA,EAAE,MAAM,CAAC,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC","sourcesContent":["import {\n  IconColor,\n  IconSize,\n  TextColor,\n  TextVariant,\n} from '@metamask/design-system-shared';\nimport React from 'react';\n\nimport { BoxRow } from '../BoxRow';\nimport { Icon } from '../Icon';\n\nimport type { SectionHeaderProps } from './SectionHeader.types';\n\n/**\n * Horizontal section header: optional start/end icons or accessories, and a title row with optional inline accessory.\n * Remaining `View` props are forwarded to the outer {@link BoxRow}.\n *\n * @param props - Component props\n * @param props.title - Title content for the inner row (required)\n * @param props.titleAccessory - Optional node to the right of `title` in the inner row\n * @param props.titleProps - Optional props merged into inner row `Text` when `title` is a string\n * @param props.titleWrapperProps - Optional props spread onto the inner `BoxRow`\n * @param props.startAccessory - Optional custom node before the title row on the outer row; used when no start icon is resolved\n * @param props.startIconName - Optional start icon; takes precedence over `startAccessory` when resolved\n * @param props.startIconProps - Props merged into the start `Icon` (defaults include medium size and default icon color)\n * @param props.endAccessory - Optional custom node after the title row on the outer row; used when no end icon is resolved\n * @param props.endIconName - Optional end icon; takes precedence over `endAccessory` when resolved\n * @param props.endIconProps - Props merged into the end `Icon`\n * @param props.twClassName - Optional Tailwind classes on the outer row\n *\n * @returns The rendered SectionHeader layout.\n */\nexport const SectionHeader: React.FC<SectionHeaderProps> = ({\n  title,\n  titleAccessory,\n  titleProps,\n  titleWrapperProps,\n  startAccessory,\n  startIconName,\n  startIconProps,\n  endAccessory,\n  endIconName,\n  endIconProps,\n  twClassName = '',\n  ...rest\n}) => {\n  const finalStartIconName = startIconName ?? startIconProps?.name;\n  const finalEndIconName = endIconName ?? endIconProps?.name;\n\n  return (\n    <BoxRow\n      {...rest}\n      gap={1}\n      twClassName={twClassName}\n      startAccessory={\n        finalStartIconName ? (\n          <Icon\n            size={IconSize.Md}\n            color={IconColor.IconDefault}\n            twClassName=\"shrink-0\"\n            {...startIconProps}\n            name={finalStartIconName}\n          />\n        ) : (\n          startAccessory\n        )\n      }\n      endAccessory={\n        finalEndIconName ? (\n          <Icon\n            size={IconSize.Md}\n            color={IconColor.IconDefault}\n            twClassName=\"shrink-0\"\n            {...endIconProps}\n            name={finalEndIconName}\n          />\n        ) : (\n          endAccessory\n        )\n      }\n    >\n      {title ? (\n        <BoxRow\n          {...titleWrapperProps}\n          gap={1}\n          endAccessory={titleAccessory}\n          textProps={{\n            variant: TextVariant.HeadingMd,\n            color: TextColor.TextDefault,\n            ...titleProps,\n          }}\n        >\n          {title}\n        </BoxRow>\n      ) : null}\n    </BoxRow>\n  );\n};\n\nSectionHeader.displayName = 'SectionHeader';\n"]}

package/dist/components/SectionHeader/SectionHeader.types.cjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SectionHeader.types.cjs","sourceRoot":"","sources":["../../../src/components/SectionHeader/SectionHeader.types.ts"],"names":[],"mappings":"","sourcesContent":["// Third party dependencies.\nimport type { SectionHeaderPropsShared } from '@metamask/design-system-shared';\nimport type { ViewProps } from 'react-native';\n\n// Internal dependencies.\nimport type { BoxRowProps } from '../BoxRow/BoxRow.types';\nimport type { IconProps } from '../Icon';\nimport type { TextProps } from '../Text/Text.types';\n\n/**\n * SectionHeader component props (React Native).\n * Extends {@link SectionHeaderPropsShared} with platform `Text` / `Icon` passthroughs, `twClassName`, and `View` props.\n */\nexport type SectionHeaderProps = SectionHeaderPropsShared & {\n  /**\n   * Optional props merged into {@link BoxRow} `textProps` when `title` is a string.\n   */\n  titleProps?: Omit<Partial<TextProps>, 'children'>;\n  /**\n   * Optional props spread onto the title row {@link BoxRow}. Omits `children`, `endAccessory`, and `textProps` (SectionHeader sets those via `title`, `titleAccessory`, and `titleProps`).\n   */\n  titleWrapperProps?: Omit<\n    Partial<BoxRowProps>,\n    'children' | 'endAccessory' | 'textProps'\n  >;\n  /**\n   * Optional prop to pass additional properties to the start icon.\n   */\n  startIconProps?: Partial<IconProps>;\n  /**\n   * Optional prop to pass additional properties to the end icon.\n   */\n  endIconProps?: Partial<IconProps>;\n  /**\n   * Optional Tailwind class name to apply to the outer row.\n   */\n  twClassName?: string;\n} & Omit<ViewProps, 'children'>;\n"]}

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

@@ -0,0 +1,32 @@
+import type { SectionHeaderPropsShared } from "@metamask/design-system-shared";
+import type { ViewProps } from "react-native/index.js";
+import type { BoxRowProps } from "../BoxRow/BoxRow.types.cjs";
+import type { IconProps } from "../Icon/index.cjs";
+import type { TextProps } from "../Text/Text.types.cjs";
+/**
+ * SectionHeader component props (React Native).
+ * Extends {@link SectionHeaderPropsShared} with platform `Text` / `Icon` passthroughs, `twClassName`, and `View` props.
+ */
+export type SectionHeaderProps = SectionHeaderPropsShared & {
+    /**
+     * Optional props merged into {@link BoxRow} `textProps` when `title` is a string.
+     */
+    titleProps?: Omit<Partial<TextProps>, 'children'>;
+    /**
+     * Optional props spread onto the title row {@link BoxRow}. Omits `children`, `endAccessory`, and `textProps` (SectionHeader sets those via `title`, `titleAccessory`, and `titleProps`).
+     */
+    titleWrapperProps?: Omit<Partial<BoxRowProps>, 'children' | 'endAccessory' | 'textProps'>;
+    /**
+     * Optional prop to pass additional properties to the start icon.
+     */
+    startIconProps?: Partial<IconProps>;
+    /**
+     * Optional prop to pass additional properties to the end icon.
+     */
+    endIconProps?: Partial<IconProps>;
+    /**
+     * Optional Tailwind class name to apply to the outer row.
+     */
+    twClassName?: string;
+} & Omit<ViewProps, 'children'>;
+//# sourceMappingURL=SectionHeader.types.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SectionHeader.types.d.cts","sourceRoot":"","sources":["../../../src/components/SectionHeader/SectionHeader.types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,uCAAuC;AAC/E,OAAO,KAAK,EAAE,SAAS,EAAE,8BAAqB;AAG9C,OAAO,KAAK,EAAE,WAAW,EAAE,mCAA+B;AAC1D,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA2B;AAEpD;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,wBAAwB,GAAG;IAC1D;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;IAClD;;OAEG;IACH,iBAAiB,CAAC,EAAE,IAAI,CACtB,OAAO,CAAC,WAAW,CAAC,EACpB,UAAU,GAAG,cAAc,GAAG,WAAW,CAC1C,CAAC;IACF;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACpC;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAClC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC"}

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

@@ -0,0 +1,32 @@
+import type { SectionHeaderPropsShared } from "@metamask/design-system-shared";
+import type { ViewProps } from "react-native/index.js";
+import type { BoxRowProps } from "../BoxRow/BoxRow.types.mjs";
+import type { IconProps } from "../Icon/index.mjs";
+import type { TextProps } from "../Text/Text.types.mjs";
+/**
+ * SectionHeader component props (React Native).
+ * Extends {@link SectionHeaderPropsShared} with platform `Text` / `Icon` passthroughs, `twClassName`, and `View` props.
+ */
+export type SectionHeaderProps = SectionHeaderPropsShared & {
+    /**
+     * Optional props merged into {@link BoxRow} `textProps` when `title` is a string.
+     */
+    titleProps?: Omit<Partial<TextProps>, 'children'>;
+    /**
+     * Optional props spread onto the title row {@link BoxRow}. Omits `children`, `endAccessory`, and `textProps` (SectionHeader sets those via `title`, `titleAccessory`, and `titleProps`).
+     */
+    titleWrapperProps?: Omit<Partial<BoxRowProps>, 'children' | 'endAccessory' | 'textProps'>;
+    /**
+     * Optional prop to pass additional properties to the start icon.
+     */
+    startIconProps?: Partial<IconProps>;
+    /**
+     * Optional prop to pass additional properties to the end icon.
+     */
+    endIconProps?: Partial<IconProps>;
+    /**
+     * Optional Tailwind class name to apply to the outer row.
+     */
+    twClassName?: string;
+} & Omit<ViewProps, 'children'>;
+//# sourceMappingURL=SectionHeader.types.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SectionHeader.types.d.mts","sourceRoot":"","sources":["../../../src/components/SectionHeader/SectionHeader.types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,wBAAwB,EAAE,uCAAuC;AAC/E,OAAO,KAAK,EAAE,SAAS,EAAE,8BAAqB;AAG9C,OAAO,KAAK,EAAE,WAAW,EAAE,mCAA+B;AAC1D,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA2B;AAEpD;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,wBAAwB,GAAG;IAC1D;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;IAClD;;OAEG;IACH,iBAAiB,CAAC,EAAE,IAAI,CACtB,OAAO,CAAC,WAAW,CAAC,EACpB,UAAU,GAAG,cAAc,GAAG,WAAW,CAC1C,CAAC;IACF;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IACpC;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAClC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC"}

package/dist/components/SectionHeader/SectionHeader.types.mjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SectionHeader.types.mjs","sourceRoot":"","sources":["../../../src/components/SectionHeader/SectionHeader.types.ts"],"names":[],"mappings":"","sourcesContent":["// Third party dependencies.\nimport type { SectionHeaderPropsShared } from '@metamask/design-system-shared';\nimport type { ViewProps } from 'react-native';\n\n// Internal dependencies.\nimport type { BoxRowProps } from '../BoxRow/BoxRow.types';\nimport type { IconProps } from '../Icon';\nimport type { TextProps } from '../Text/Text.types';\n\n/**\n * SectionHeader component props (React Native).\n * Extends {@link SectionHeaderPropsShared} with platform `Text` / `Icon` passthroughs, `twClassName`, and `View` props.\n */\nexport type SectionHeaderProps = SectionHeaderPropsShared & {\n  /**\n   * Optional props merged into {@link BoxRow} `textProps` when `title` is a string.\n   */\n  titleProps?: Omit<Partial<TextProps>, 'children'>;\n  /**\n   * Optional props spread onto the title row {@link BoxRow}. Omits `children`, `endAccessory`, and `textProps` (SectionHeader sets those via `title`, `titleAccessory`, and `titleProps`).\n   */\n  titleWrapperProps?: Omit<\n    Partial<BoxRowProps>,\n    'children' | 'endAccessory' | 'textProps'\n  >;\n  /**\n   * Optional prop to pass additional properties to the start icon.\n   */\n  startIconProps?: Partial<IconProps>;\n  /**\n   * Optional prop to pass additional properties to the end icon.\n   */\n  endIconProps?: Partial<IconProps>;\n  /**\n   * Optional Tailwind class name to apply to the outer row.\n   */\n  twClassName?: string;\n} & Omit<ViewProps, 'children'>;\n"]}

package/dist/components/SectionHeader/index.cjs

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/SectionHeader/index.mjs

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

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

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

package/dist/components/TitleAlert/TitleAlert.cjs

@@ -0,0 +1,54 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TitleAlert = void 0;
+const design_system_shared_1 = require("@metamask/design-system-shared");
+const react_1 = __importDefault(require("react"));
+const Box_1 = require("../Box/index.cjs");
+const BoxColumn_1 = require("../BoxColumn/index.cjs");
+const BoxRow_1 = require("../BoxRow/index.cjs");
+const IconAlert_1 = require("../IconAlert/index.cjs");
+const TextOrChildren_1 = require("../temp-components/TextOrChildren/index.cjs");
+/**
+ * Displays a severity-based {@link IconAlert} above a centered title row with optional inline accessories.
+ * Remaining `View` props are forwarded to the root {@link BoxColumn}.
+ *
+ * @param props - Component props
+ * @param props.severity - Passed to {@link IconAlert} for glyph and color
+ * @param props.title - Title row content; row renders only when `title` is renderable
+ * @param props.titleStartAccessory - Optional inline accessory to the left of `title`
+ * @param props.titleEndAccessory - Optional inline accessory to the right of `title`
+ * @param props.titleWrapperProps - Optional props spread onto the title row {@link BoxRow}
+ * @param props.titleProps - Optional props merged into title row `Text` when `title` is a string
+ * @param props.description - Optional description below the title; uses {@link TextOrChildren}
+ * @param props.descriptionProps - Optional props merged into description `Text` when `description` is a string
+ * @param props.twClassName - Optional Tailwind classes on the root BoxColumn
+ *
+ * @returns The rendered TitleAlert layout.
+ */
+const TitleAlert = ({ severity, title, titleStartAccessory, titleEndAccessory, titleProps, titleWrapperProps, description, descriptionProps, twClassName = '', ...props }) => {
+    return (<BoxColumn_1.BoxColumn alignItems={design_system_shared_1.BoxAlignItems.Center} gap={1} topAccessory={<IconAlert_1.IconAlert severity={severity} size={design_system_shared_1.IconSize.Xl}/>} bottomAccessory={description ? (<Box_1.Box twClassName="self-stretch">
+            <TextOrChildren_1.TextOrChildren textProps={{
+                variant: design_system_shared_1.TextVariant.BodySm,
+                color: design_system_shared_1.TextColor.TextAlternative,
+                fontWeight: design_system_shared_1.FontWeight.Medium,
+                ...descriptionProps,
+                style: [{ textAlign: 'center' }, descriptionProps?.style],
+            }}>
+              {description}
+            </TextOrChildren_1.TextOrChildren>
+          </Box_1.Box>) : undefined} twClassName={twClassName} {...props}>
+      {title ? (<BoxRow_1.BoxRow justifyContent={design_system_shared_1.BoxJustifyContent.Center} twClassName="self-stretch" {...titleWrapperProps} startAccessory={titleStartAccessory} endAccessory={titleEndAccessory} textProps={{
+                variant: design_system_shared_1.TextVariant.HeadingLg,
+                color: design_system_shared_1.TextColor.TextDefault,
+                ...titleProps,
+            }}>
+          {title}
+        </BoxRow_1.BoxRow>) : null}
+    </BoxColumn_1.BoxColumn>);
+};
+exports.TitleAlert = TitleAlert;
+exports.TitleAlert.displayName = 'TitleAlert';
+//# sourceMappingURL=TitleAlert.cjs.map