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

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

@@ -1,5 +1,5 @@
 import type { CheckboxPropsShared } from "@metamask/design-system-shared";
-import type { PressableProps, ViewProps } from "react-native/index.js";
+import type { PressableProps, ViewProps } from "react-native";
 import type { IconProps } from "../Icon/index.mjs";
 import type { TextProps } from "../Text/index.mjs";
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.types.d.mts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,uCAAuC;AAC1E,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,8BAAqB;AAE9D,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG;IAChD;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;IAElD;;OAEG;IACH,sBAAsB,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;IAE9D;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAEtC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;CACjC,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC"}
+{"version":3,"file":"Checkbox.types.d.mts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,uCAAuC;AAC1E,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,qBAAqB;AAE9D,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AACzC,OAAO,KAAK,EAAE,SAAS,EAAE,0BAAgB;AAEzC;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,mBAAmB,GAAG;IAChD;;OAEG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;IAElD;;OAEG;IACH,sBAAsB,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC,CAAC;IAE9D;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;IAEtC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;CACjC,GAAG,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC"}

package/dist/components/Content/Content.cjs

@@ -0,0 +1,71 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Content = void 0;
+const design_system_shared_1 = require("@metamask/design-system-shared");
+const react_1 = __importDefault(require("react"));
+const BoxColumn_1 = require("../BoxColumn/index.cjs");
+const BoxRow_1 = require("../BoxRow/index.cjs");
+const TextOrChildren_1 = require("../temp-components/TextOrChildren/index.cjs");
+const Content_constants_1 = require("./Content.constants.cjs");
+const Content = ({ startAccessory, endAccessory, topAccessory, bottomAccessory, verticalAlignment = design_system_shared_1.ContentVerticalAlignment.Center, avatar, twClassName, title, titleProps, titleStartAccessory, titleEndAccessory, description, descriptionProps, descriptionStartAccessory, descriptionEndAccessory, value, valueProps, valueStartAccessory, valueEndAccessory, subvalue, subvalueProps, subvalueStartAccessory, subvalueEndAccessory, ...props }) => {
+    const hasColumnShell = Boolean(topAccessory) || Boolean(bottomAccessory);
+    const contentRow = (<BoxRow_1.BoxRow startAccessory={startAccessory} endAccessory={endAccessory} alignItems={Content_constants_1.VERTICAL_ALIGNMENT_MAP[verticalAlignment]} gap={4} twClassName={`min-h-[46px] ${hasColumnShell ? 'min-w-0' : (twClassName ?? '')}`.trim()} {...(hasColumnShell ? {} : props)}>
+      {avatar}
+      {/* Title and description Column */}
+      <BoxColumn_1.BoxColumn twClassName="flex-1 min-w-0" bottomAccessory={description ? (<BoxRow_1.BoxRow twClassName="w-full" startAccessory={descriptionStartAccessory} endAccessory={descriptionEndAccessory} gap={1}>
+              <TextOrChildren_1.TextOrChildren textProps={{
+                variant: design_system_shared_1.TextVariant.BodySm,
+                fontWeight: design_system_shared_1.FontWeight.Medium,
+                color: design_system_shared_1.TextColor.TextAlternative,
+                ...descriptionProps,
+            }}>
+                {description}
+              </TextOrChildren_1.TextOrChildren>
+            </BoxRow_1.BoxRow>) : null}>
+        {title ? (<BoxRow_1.BoxRow twClassName="w-full" startAccessory={titleStartAccessory} endAccessory={titleEndAccessory} gap={1}>
+            <TextOrChildren_1.TextOrChildren textProps={{
+                variant: design_system_shared_1.TextVariant.BodyMd,
+                fontWeight: design_system_shared_1.FontWeight.Medium,
+                color: design_system_shared_1.TextColor.TextDefault,
+                ...titleProps,
+            }}>
+              {title}
+            </TextOrChildren_1.TextOrChildren>
+          </BoxRow_1.BoxRow>) : null}
+      </BoxColumn_1.BoxColumn>
+      {/* Value and subvalue Column */}
+      {value || subvalue ? (<BoxColumn_1.BoxColumn twClassName="min-w-0" bottomAccessory={subvalue ? (<BoxRow_1.BoxRow twClassName="w-full" startAccessory={subvalueStartAccessory} endAccessory={subvalueEndAccessory} gap={1}>
+                <TextOrChildren_1.TextOrChildren textProps={{
+                    variant: design_system_shared_1.TextVariant.BodySm,
+                    fontWeight: design_system_shared_1.FontWeight.Medium,
+                    color: design_system_shared_1.TextColor.TextAlternative,
+                    ...subvalueProps,
+                }}>
+                  {subvalue}
+                </TextOrChildren_1.TextOrChildren>
+              </BoxRow_1.BoxRow>) : null}>
+          {value ? (<BoxRow_1.BoxRow twClassName="w-full" startAccessory={valueStartAccessory} endAccessory={valueEndAccessory} gap={1}>
+              <TextOrChildren_1.TextOrChildren textProps={{
+                    variant: design_system_shared_1.TextVariant.BodyMd,
+                    fontWeight: design_system_shared_1.FontWeight.Medium,
+                    color: design_system_shared_1.TextColor.TextDefault,
+                    ...valueProps,
+                }}>
+                {value}
+              </TextOrChildren_1.TextOrChildren>
+            </BoxRow_1.BoxRow>) : null}
+        </BoxColumn_1.BoxColumn>) : null}
+    </BoxRow_1.BoxRow>);
+    if (hasColumnShell) {
+        return (<BoxColumn_1.BoxColumn gap={1} topAccessory={topAccessory} bottomAccessory={bottomAccessory} twClassName={twClassName} {...props}>
+        {contentRow}
+      </BoxColumn_1.BoxColumn>);
+    }
+    return contentRow;
+};
+exports.Content = Content;
+exports.Content.displayName = 'Content';
+//# sourceMappingURL=Content.cjs.map

package/dist/components/Content/Content.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Content.cjs","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ContentVerticalAlignment,\n  FontWeight,\n  TextColor,\n  TextVariant,\n} from '@metamask/design-system-shared';\nimport React from 'react';\n\nimport { BoxColumn } from '../BoxColumn';\nimport { BoxRow } from '../BoxRow';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport { VERTICAL_ALIGNMENT_MAP } from './Content.constants';\nimport type { ContentProps } from './Content.types';\n\nexport const Content: React.FC<ContentProps> = ({\n  startAccessory,\n  endAccessory,\n  topAccessory,\n  bottomAccessory,\n  verticalAlignment = ContentVerticalAlignment.Center,\n  avatar,\n  twClassName,\n  title,\n  titleProps,\n  titleStartAccessory,\n  titleEndAccessory,\n  description,\n  descriptionProps,\n  descriptionStartAccessory,\n  descriptionEndAccessory,\n  value,\n  valueProps,\n  valueStartAccessory,\n  valueEndAccessory,\n  subvalue,\n  subvalueProps,\n  subvalueStartAccessory,\n  subvalueEndAccessory,\n  ...props\n}) => {\n  const hasColumnShell = Boolean(topAccessory) || Boolean(bottomAccessory);\n\n  const contentRow = (\n    <BoxRow\n      startAccessory={startAccessory}\n      endAccessory={endAccessory}\n      alignItems={VERTICAL_ALIGNMENT_MAP[verticalAlignment]}\n      gap={4}\n      twClassName={`min-h-[46px] ${hasColumnShell ? 'min-w-0' : (twClassName ?? '')}`.trim()}\n      {...(hasColumnShell ? {} : props)}\n    >\n      {avatar}\n      {/* Title and description Column */}\n      <BoxColumn\n        twClassName=\"flex-1 min-w-0\"\n        bottomAccessory={\n          description ? (\n            <BoxRow\n              twClassName=\"w-full\"\n              startAccessory={descriptionStartAccessory}\n              endAccessory={descriptionEndAccessory}\n              gap={1}\n            >\n              <TextOrChildren\n                textProps={{\n                  variant: TextVariant.BodySm,\n                  fontWeight: FontWeight.Medium,\n                  color: TextColor.TextAlternative,\n                  ...descriptionProps,\n                }}\n              >\n                {description}\n              </TextOrChildren>\n            </BoxRow>\n          ) : null\n        }\n      >\n        {title ? (\n          <BoxRow\n            twClassName=\"w-full\"\n            startAccessory={titleStartAccessory}\n            endAccessory={titleEndAccessory}\n            gap={1}\n          >\n            <TextOrChildren\n              textProps={{\n                variant: TextVariant.BodyMd,\n                fontWeight: FontWeight.Medium,\n                color: TextColor.TextDefault,\n                ...titleProps,\n              }}\n            >\n              {title}\n            </TextOrChildren>\n          </BoxRow>\n        ) : null}\n      </BoxColumn>\n      {/* Value and subvalue Column */}\n      {value || subvalue ? (\n        <BoxColumn\n          twClassName=\"min-w-0\"\n          bottomAccessory={\n            subvalue ? (\n              <BoxRow\n                twClassName=\"w-full\"\n                startAccessory={subvalueStartAccessory}\n                endAccessory={subvalueEndAccessory}\n                gap={1}\n              >\n                <TextOrChildren\n                  textProps={{\n                    variant: TextVariant.BodySm,\n                    fontWeight: FontWeight.Medium,\n                    color: TextColor.TextAlternative,\n                    ...subvalueProps,\n                  }}\n                >\n                  {subvalue}\n                </TextOrChildren>\n              </BoxRow>\n            ) : null\n          }\n        >\n          {value ? (\n            <BoxRow\n              twClassName=\"w-full\"\n              startAccessory={valueStartAccessory}\n              endAccessory={valueEndAccessory}\n              gap={1}\n            >\n              <TextOrChildren\n                textProps={{\n                  variant: TextVariant.BodyMd,\n                  fontWeight: FontWeight.Medium,\n                  color: TextColor.TextDefault,\n                  ...valueProps,\n                }}\n              >\n                {value}\n              </TextOrChildren>\n            </BoxRow>\n          ) : null}\n        </BoxColumn>\n      ) : null}\n    </BoxRow>\n  );\n\n  if (hasColumnShell) {\n    return (\n      <BoxColumn\n        gap={1}\n        topAccessory={topAccessory}\n        bottomAccessory={bottomAccessory}\n        twClassName={twClassName}\n        {...props}\n      >\n        {contentRow}\n      </BoxColumn>\n    );\n  }\n\n  return contentRow;\n};\n\nContent.displayName = 'Content';\n"]}

package/dist/components/Content/Content.constants.cjs

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VERTICAL_ALIGNMENT_MAP = void 0;
+const design_system_shared_1 = require("@metamask/design-system-shared");
+exports.VERTICAL_ALIGNMENT_MAP = {
+    [design_system_shared_1.ContentVerticalAlignment.Top]: design_system_shared_1.BoxAlignItems.Start,
+    [design_system_shared_1.ContentVerticalAlignment.Center]: design_system_shared_1.BoxAlignItems.Center,
+};
+//# sourceMappingURL=Content.constants.cjs.map

package/dist/components/Content/Content.constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Content.constants.cjs","sourceRoot":"","sources":["../../../src/components/Content/Content.constants.ts"],"names":[],"mappings":";;;AAAA,yEAGwC;AAE3B,QAAA,sBAAsB,GAG/B;IACF,CAAC,+CAAwB,CAAC,GAAG,CAAC,EAAE,oCAAa,CAAC,KAAK;IACnD,CAAC,+CAAwB,CAAC,MAAM,CAAC,EAAE,oCAAa,CAAC,MAAM;CACxD,CAAC","sourcesContent":["import {\n  BoxAlignItems,\n  ContentVerticalAlignment,\n} from '@metamask/design-system-shared';\n\nexport const VERTICAL_ALIGNMENT_MAP: Record<\n  ContentVerticalAlignment,\n  BoxAlignItems\n> = {\n  [ContentVerticalAlignment.Top]: BoxAlignItems.Start,\n  [ContentVerticalAlignment.Center]: BoxAlignItems.Center,\n};\n"]}

package/dist/components/Content/Content.constants.d.cts

@@ -0,0 +1,3 @@
+import { BoxAlignItems, ContentVerticalAlignment } from "@metamask/design-system-shared";
+export declare const VERTICAL_ALIGNMENT_MAP: Record<ContentVerticalAlignment, BoxAlignItems>;
+//# sourceMappingURL=Content.constants.d.cts.map

package/dist/components/Content/Content.constants.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Content.constants.d.cts","sourceRoot":"","sources":["../../../src/components/Content/Content.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,wBAAwB,EACzB,uCAAuC;AAExC,eAAO,MAAM,sBAAsB,EAAE,MAAM,CACzC,wBAAwB,EACxB,aAAa,CAId,CAAC"}

package/dist/components/Content/Content.constants.d.mts

@@ -0,0 +1,3 @@
+import { BoxAlignItems, ContentVerticalAlignment } from "@metamask/design-system-shared";
+export declare const VERTICAL_ALIGNMENT_MAP: Record<ContentVerticalAlignment, BoxAlignItems>;
+//# sourceMappingURL=Content.constants.d.mts.map

package/dist/components/Content/Content.constants.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Content.constants.d.mts","sourceRoot":"","sources":["../../../src/components/Content/Content.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,wBAAwB,EACzB,uCAAuC;AAExC,eAAO,MAAM,sBAAsB,EAAE,MAAM,CACzC,wBAAwB,EACxB,aAAa,CAId,CAAC"}

package/dist/components/Content/Content.constants.mjs

@@ -0,0 +1,6 @@
+import { BoxAlignItems, ContentVerticalAlignment } from "@metamask/design-system-shared";
+export const VERTICAL_ALIGNMENT_MAP = {
+    [ContentVerticalAlignment.Top]: BoxAlignItems.Start,
+    [ContentVerticalAlignment.Center]: BoxAlignItems.Center,
+};
+//# sourceMappingURL=Content.constants.mjs.map

package/dist/components/Content/Content.constants.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Content.constants.mjs","sourceRoot":"","sources":["../../../src/components/Content/Content.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,wBAAwB,EACzB,uCAAuC;AAExC,MAAM,CAAC,MAAM,sBAAsB,GAG/B;IACF,CAAC,wBAAwB,CAAC,GAAG,CAAC,EAAE,aAAa,CAAC,KAAK;IACnD,CAAC,wBAAwB,CAAC,MAAM,CAAC,EAAE,aAAa,CAAC,MAAM;CACxD,CAAC","sourcesContent":["import {\n  BoxAlignItems,\n  ContentVerticalAlignment,\n} from '@metamask/design-system-shared';\n\nexport const VERTICAL_ALIGNMENT_MAP: Record<\n  ContentVerticalAlignment,\n  BoxAlignItems\n> = {\n  [ContentVerticalAlignment.Top]: BoxAlignItems.Start,\n  [ContentVerticalAlignment.Center]: BoxAlignItems.Center,\n};\n"]}

package/dist/components/Content/Content.d.cts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Content.d.cts","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,YAAY,EAAE,4BAAwB;AAEpD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAoJ1C,CAAC"}

package/dist/components/Content/Content.d.mts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Content.d.mts","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,cAAc;AAO1B,OAAO,KAAK,EAAE,YAAY,EAAE,4BAAwB;AAEpD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAoJ1C,CAAC"}

package/dist/components/Content/Content.mjs

@@ -0,0 +1,71 @@
+function $importDefault(module) {
+    if (module?.__esModule) {
+        return module.default;
+    }
+    return module;
+}
+import { ContentVerticalAlignment, FontWeight, TextColor, TextVariant } from "@metamask/design-system-shared";
+import $React from "react";
+const React = $importDefault($React);
+import { BoxColumn } from "../BoxColumn/index.mjs";
+import { BoxRow } from "../BoxRow/index.mjs";
+import { TextOrChildren } from "../temp-components/TextOrChildren/index.mjs";
+import { VERTICAL_ALIGNMENT_MAP } from "./Content.constants.mjs";
+export const Content = ({ startAccessory, endAccessory, topAccessory, bottomAccessory, verticalAlignment = ContentVerticalAlignment.Center, avatar, twClassName, title, titleProps, titleStartAccessory, titleEndAccessory, description, descriptionProps, descriptionStartAccessory, descriptionEndAccessory, value, valueProps, valueStartAccessory, valueEndAccessory, subvalue, subvalueProps, subvalueStartAccessory, subvalueEndAccessory, ...props }) => {
+    const hasColumnShell = Boolean(topAccessory) || Boolean(bottomAccessory);
+    const contentRow = (<BoxRow startAccessory={startAccessory} endAccessory={endAccessory} alignItems={VERTICAL_ALIGNMENT_MAP[verticalAlignment]} gap={4} twClassName={`min-h-[46px] ${hasColumnShell ? 'min-w-0' : (twClassName ?? '')}`.trim()} {...(hasColumnShell ? {} : props)}>
+      {avatar}
+      {/* Title and description Column */}
+      <BoxColumn twClassName="flex-1 min-w-0" bottomAccessory={description ? (<BoxRow twClassName="w-full" startAccessory={descriptionStartAccessory} endAccessory={descriptionEndAccessory} gap={1}>
+              <TextOrChildren textProps={{
+                variant: TextVariant.BodySm,
+                fontWeight: FontWeight.Medium,
+                color: TextColor.TextAlternative,
+                ...descriptionProps,
+            }}>
+                {description}
+              </TextOrChildren>
+            </BoxRow>) : null}>
+        {title ? (<BoxRow twClassName="w-full" startAccessory={titleStartAccessory} endAccessory={titleEndAccessory} gap={1}>
+            <TextOrChildren textProps={{
+                variant: TextVariant.BodyMd,
+                fontWeight: FontWeight.Medium,
+                color: TextColor.TextDefault,
+                ...titleProps,
+            }}>
+              {title}
+            </TextOrChildren>
+          </BoxRow>) : null}
+      </BoxColumn>
+      {/* Value and subvalue Column */}
+      {value || subvalue ? (<BoxColumn twClassName="min-w-0" bottomAccessory={subvalue ? (<BoxRow twClassName="w-full" startAccessory={subvalueStartAccessory} endAccessory={subvalueEndAccessory} gap={1}>
+                <TextOrChildren textProps={{
+                    variant: TextVariant.BodySm,
+                    fontWeight: FontWeight.Medium,
+                    color: TextColor.TextAlternative,
+                    ...subvalueProps,
+                }}>
+                  {subvalue}
+                </TextOrChildren>
+              </BoxRow>) : null}>
+          {value ? (<BoxRow twClassName="w-full" startAccessory={valueStartAccessory} endAccessory={valueEndAccessory} gap={1}>
+              <TextOrChildren textProps={{
+                    variant: TextVariant.BodyMd,
+                    fontWeight: FontWeight.Medium,
+                    color: TextColor.TextDefault,
+                    ...valueProps,
+                }}>
+                {value}
+              </TextOrChildren>
+            </BoxRow>) : null}
+        </BoxColumn>) : null}
+    </BoxRow>);
+    if (hasColumnShell) {
+        return (<BoxColumn gap={1} topAccessory={topAccessory} bottomAccessory={bottomAccessory} twClassName={twClassName} {...props}>
+        {contentRow}
+      </BoxColumn>);
+    }
+    return contentRow;
+};
+Content.displayName = 'Content';
+//# sourceMappingURL=Content.mjs.map

package/dist/components/Content/Content.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Content.mjs","sourceRoot":"","sources":["../../../src/components/Content/Content.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  ContentVerticalAlignment,\n  FontWeight,\n  TextColor,\n  TextVariant,\n} from '@metamask/design-system-shared';\nimport React from 'react';\n\nimport { BoxColumn } from '../BoxColumn';\nimport { BoxRow } from '../BoxRow';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport { VERTICAL_ALIGNMENT_MAP } from './Content.constants';\nimport type { ContentProps } from './Content.types';\n\nexport const Content: React.FC<ContentProps> = ({\n  startAccessory,\n  endAccessory,\n  topAccessory,\n  bottomAccessory,\n  verticalAlignment = ContentVerticalAlignment.Center,\n  avatar,\n  twClassName,\n  title,\n  titleProps,\n  titleStartAccessory,\n  titleEndAccessory,\n  description,\n  descriptionProps,\n  descriptionStartAccessory,\n  descriptionEndAccessory,\n  value,\n  valueProps,\n  valueStartAccessory,\n  valueEndAccessory,\n  subvalue,\n  subvalueProps,\n  subvalueStartAccessory,\n  subvalueEndAccessory,\n  ...props\n}) => {\n  const hasColumnShell = Boolean(topAccessory) || Boolean(bottomAccessory);\n\n  const contentRow = (\n    <BoxRow\n      startAccessory={startAccessory}\n      endAccessory={endAccessory}\n      alignItems={VERTICAL_ALIGNMENT_MAP[verticalAlignment]}\n      gap={4}\n      twClassName={`min-h-[46px] ${hasColumnShell ? 'min-w-0' : (twClassName ?? '')}`.trim()}\n      {...(hasColumnShell ? {} : props)}\n    >\n      {avatar}\n      {/* Title and description Column */}\n      <BoxColumn\n        twClassName=\"flex-1 min-w-0\"\n        bottomAccessory={\n          description ? (\n            <BoxRow\n              twClassName=\"w-full\"\n              startAccessory={descriptionStartAccessory}\n              endAccessory={descriptionEndAccessory}\n              gap={1}\n            >\n              <TextOrChildren\n                textProps={{\n                  variant: TextVariant.BodySm,\n                  fontWeight: FontWeight.Medium,\n                  color: TextColor.TextAlternative,\n                  ...descriptionProps,\n                }}\n              >\n                {description}\n              </TextOrChildren>\n            </BoxRow>\n          ) : null\n        }\n      >\n        {title ? (\n          <BoxRow\n            twClassName=\"w-full\"\n            startAccessory={titleStartAccessory}\n            endAccessory={titleEndAccessory}\n            gap={1}\n          >\n            <TextOrChildren\n              textProps={{\n                variant: TextVariant.BodyMd,\n                fontWeight: FontWeight.Medium,\n                color: TextColor.TextDefault,\n                ...titleProps,\n              }}\n            >\n              {title}\n            </TextOrChildren>\n          </BoxRow>\n        ) : null}\n      </BoxColumn>\n      {/* Value and subvalue Column */}\n      {value || subvalue ? (\n        <BoxColumn\n          twClassName=\"min-w-0\"\n          bottomAccessory={\n            subvalue ? (\n              <BoxRow\n                twClassName=\"w-full\"\n                startAccessory={subvalueStartAccessory}\n                endAccessory={subvalueEndAccessory}\n                gap={1}\n              >\n                <TextOrChildren\n                  textProps={{\n                    variant: TextVariant.BodySm,\n                    fontWeight: FontWeight.Medium,\n                    color: TextColor.TextAlternative,\n                    ...subvalueProps,\n                  }}\n                >\n                  {subvalue}\n                </TextOrChildren>\n              </BoxRow>\n            ) : null\n          }\n        >\n          {value ? (\n            <BoxRow\n              twClassName=\"w-full\"\n              startAccessory={valueStartAccessory}\n              endAccessory={valueEndAccessory}\n              gap={1}\n            >\n              <TextOrChildren\n                textProps={{\n                  variant: TextVariant.BodyMd,\n                  fontWeight: FontWeight.Medium,\n                  color: TextColor.TextDefault,\n                  ...valueProps,\n                }}\n              >\n                {value}\n              </TextOrChildren>\n            </BoxRow>\n          ) : null}\n        </BoxColumn>\n      ) : null}\n    </BoxRow>\n  );\n\n  if (hasColumnShell) {\n    return (\n      <BoxColumn\n        gap={1}\n        topAccessory={topAccessory}\n        bottomAccessory={bottomAccessory}\n        twClassName={twClassName}\n        {...props}\n      >\n        {contentRow}\n      </BoxColumn>\n    );\n  }\n\n  return contentRow;\n};\n\nContent.displayName = 'Content';\n"]}

package/dist/components/Content/Content.types.cjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Content.types.cjs","sourceRoot":"","sources":["../../../src/components/Content/Content.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ContentPropsShared } from '@metamask/design-system-shared';\n\nimport type { BoxProps } from '../Box/Box.types';\nimport type { TextProps } from '../Text/Text.types';\n\n/**\n * Content component props.\n *\n * Props-only layout for list rows (`title`, `avatar`, accessories, etc.).\n */\nexport type ContentProps = Omit<BoxProps, 'children'> &\n  ContentPropsShared & {\n    /**\n     * Optional props for the title Text when `title` is a string.\n     * Default: TextVariant.BodyMd, FontWeight.Medium, TextColor.TextDefault.\n     */\n    titleProps?: Partial<Omit<TextProps, 'children'>>;\n    /**\n     * Optional props for the description Text when `description` is a string.\n     * Default: TextVariant.BodySm, FontWeight.Medium, TextColor.TextAlternative.\n     */\n    descriptionProps?: Partial<Omit<TextProps, 'children'>>;\n    /**\n     * Optional props for the value Text when `value` is a string.\n     * Default: TextVariant.BodyMd, FontWeight.Medium, TextColor.TextDefault.\n     */\n    valueProps?: Partial<Omit<TextProps, 'children'>>;\n    /**\n     * Optional props for the subvalue Text when `subvalue` is a string.\n     * Default: TextVariant.BodySm, FontWeight.Medium, TextColor.TextAlternative.\n     */\n    subvalueProps?: Partial<Omit<TextProps, 'children'>>;\n  };\n"]}

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

@@ -0,0 +1,31 @@
+import type { ContentPropsShared } from "@metamask/design-system-shared";
+import type { BoxProps } from "../Box/Box.types.cjs";
+import type { TextProps } from "../Text/Text.types.cjs";
+/**
+ * Content component props.
+ *
+ * Props-only layout for list rows (`title`, `avatar`, accessories, etc.).
+ */
+export type ContentProps = Omit<BoxProps, 'children'> & ContentPropsShared & {
+    /**
+     * Optional props for the title Text when `title` is a string.
+     * Default: TextVariant.BodyMd, FontWeight.Medium, TextColor.TextDefault.
+     */
+    titleProps?: Partial<Omit<TextProps, 'children'>>;
+    /**
+     * Optional props for the description Text when `description` is a string.
+     * Default: TextVariant.BodySm, FontWeight.Medium, TextColor.TextAlternative.
+     */
+    descriptionProps?: Partial<Omit<TextProps, 'children'>>;
+    /**
+     * Optional props for the value Text when `value` is a string.
+     * Default: TextVariant.BodyMd, FontWeight.Medium, TextColor.TextDefault.
+     */
+    valueProps?: Partial<Omit<TextProps, 'children'>>;
+    /**
+     * Optional props for the subvalue Text when `subvalue` is a string.
+     * Default: TextVariant.BodySm, FontWeight.Medium, TextColor.TextAlternative.
+     */
+    subvalueProps?: Partial<Omit<TextProps, 'children'>>;
+};
+//# sourceMappingURL=Content.types.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Content.types.d.cts","sourceRoot":"","sources":["../../../src/components/Content/Content.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,uCAAuC;AAEzE,OAAO,KAAK,EAAE,QAAQ,EAAE,6BAAyB;AACjD,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA2B;AAEpD;;;;GAIG;AACH,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,GACnD,kBAAkB,GAAG;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IAClD;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IACxD;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IAClD;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;CACtD,CAAC"}

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

@@ -0,0 +1,31 @@
+import type { ContentPropsShared } from "@metamask/design-system-shared";
+import type { BoxProps } from "../Box/Box.types.mjs";
+import type { TextProps } from "../Text/Text.types.mjs";
+/**
+ * Content component props.
+ *
+ * Props-only layout for list rows (`title`, `avatar`, accessories, etc.).
+ */
+export type ContentProps = Omit<BoxProps, 'children'> & ContentPropsShared & {
+    /**
+     * Optional props for the title Text when `title` is a string.
+     * Default: TextVariant.BodyMd, FontWeight.Medium, TextColor.TextDefault.
+     */
+    titleProps?: Partial<Omit<TextProps, 'children'>>;
+    /**
+     * Optional props for the description Text when `description` is a string.
+     * Default: TextVariant.BodySm, FontWeight.Medium, TextColor.TextAlternative.
+     */
+    descriptionProps?: Partial<Omit<TextProps, 'children'>>;
+    /**
+     * Optional props for the value Text when `value` is a string.
+     * Default: TextVariant.BodyMd, FontWeight.Medium, TextColor.TextDefault.
+     */
+    valueProps?: Partial<Omit<TextProps, 'children'>>;
+    /**
+     * Optional props for the subvalue Text when `subvalue` is a string.
+     * Default: TextVariant.BodySm, FontWeight.Medium, TextColor.TextAlternative.
+     */
+    subvalueProps?: Partial<Omit<TextProps, 'children'>>;
+};
+//# sourceMappingURL=Content.types.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Content.types.d.mts","sourceRoot":"","sources":["../../../src/components/Content/Content.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,uCAAuC;AAEzE,OAAO,KAAK,EAAE,QAAQ,EAAE,6BAAyB;AACjD,OAAO,KAAK,EAAE,SAAS,EAAE,+BAA2B;AAEpD;;;;GAIG;AACH,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC,GACnD,kBAAkB,GAAG;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IAClD;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IACxD;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;IAClD;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC;CACtD,CAAC"}

package/dist/components/Content/Content.types.mjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Content.types.mjs","sourceRoot":"","sources":["../../../src/components/Content/Content.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ContentPropsShared } from '@metamask/design-system-shared';\n\nimport type { BoxProps } from '../Box/Box.types';\nimport type { TextProps } from '../Text/Text.types';\n\n/**\n * Content component props.\n *\n * Props-only layout for list rows (`title`, `avatar`, accessories, etc.).\n */\nexport type ContentProps = Omit<BoxProps, 'children'> &\n  ContentPropsShared & {\n    /**\n     * Optional props for the title Text when `title` is a string.\n     * Default: TextVariant.BodyMd, FontWeight.Medium, TextColor.TextDefault.\n     */\n    titleProps?: Partial<Omit<TextProps, 'children'>>;\n    /**\n     * Optional props for the description Text when `description` is a string.\n     * Default: TextVariant.BodySm, FontWeight.Medium, TextColor.TextAlternative.\n     */\n    descriptionProps?: Partial<Omit<TextProps, 'children'>>;\n    /**\n     * Optional props for the value Text when `value` is a string.\n     * Default: TextVariant.BodyMd, FontWeight.Medium, TextColor.TextDefault.\n     */\n    valueProps?: Partial<Omit<TextProps, 'children'>>;\n    /**\n     * Optional props for the subvalue Text when `subvalue` is a string.\n     * Default: TextVariant.BodySm, FontWeight.Medium, TextColor.TextAlternative.\n     */\n    subvalueProps?: Partial<Omit<TextProps, 'children'>>;\n  };\n"]}

package/dist/components/Content/index.cjs

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Content = exports.ContentVerticalAlignment = void 0;
+var design_system_shared_1 = require("@metamask/design-system-shared");
+Object.defineProperty(exports, "ContentVerticalAlignment", { enumerable: true, get: function () { return design_system_shared_1.ContentVerticalAlignment; } });
+var Content_1 = require("./Content.cjs");
+Object.defineProperty(exports, "Content", { enumerable: true, get: function () { return Content_1.Content; } });
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/Content/index.ts"],"names":[],"mappings":";;;AAAA,uEAA0E;AAAjE,gIAAA,wBAAwB,OAAA;AACjC,yCAAoC;AAA3B,kGAAA,OAAO,OAAA","sourcesContent":["export { ContentVerticalAlignment } from '@metamask/design-system-shared';\nexport { Content } from './Content';\nexport type { ContentProps } from './Content.types';\n"]}

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

@@ -0,0 +1,4 @@
+export { ContentVerticalAlignment } from "@metamask/design-system-shared";
+export { Content } from "./Content.cjs";
+export type { ContentProps } from "./Content.types.cjs";
+//# sourceMappingURL=index.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Content/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,uCAAuC;AAC1E,OAAO,EAAE,OAAO,EAAE,sBAAkB;AACpC,YAAY,EAAE,YAAY,EAAE,4BAAwB"}

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

@@ -0,0 +1,4 @@
+export { ContentVerticalAlignment } from "@metamask/design-system-shared";
+export { Content } from "./Content.mjs";
+export type { ContentProps } from "./Content.types.mjs";
+//# sourceMappingURL=index.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/Content/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,uCAAuC;AAC1E,OAAO,EAAE,OAAO,EAAE,sBAAkB;AACpC,YAAY,EAAE,YAAY,EAAE,4BAAwB"}

package/dist/components/Content/index.mjs

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/Content/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,uCAAuC;AAC1E,OAAO,EAAE,OAAO,EAAE,sBAAkB","sourcesContent":["export { ContentVerticalAlignment } from '@metamask/design-system-shared';\nexport { Content } from './Content';\nexport type { ContentProps } from './Content.types';\n"]}

package/dist/components/HeaderBase/HeaderBase.cjs

@@ -25,18 +25,54 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HeaderBase = void 0;
 // Third party dependencies.
+const design_system_shared_1 = require("@metamask/design-system-shared");
 const design_system_twrnc_preset_1 = require("@metamask/design-system-twrnc-preset");
 const react_1 = __importStar(require("react"));
-const react_native_1 = require("react-native/index.js");
+const react_native_1 = require("react-native");
 const react_native_safe_area_context_1 = require("react-native-safe-area-context");
 // External dependencies.
-const Box_1 = require("../Box/index.cjs");
 const ButtonIcon_1 = require("../ButtonIcon/index.cjs");
-const Text_1 = require("../Text/index.cjs");
-// Internal dependencies.
-const HeaderBase_constants_1 = require("./HeaderBase.constants.cjs");
-const HeaderBase_types_1 = require("./HeaderBase.types.cjs");
-const HeaderBase = ({ children, style, variant = HeaderBase_types_1.HeaderBaseVariant.Compact, startAccessory, endAccessory, startButtonIconProps, endButtonIconProps, includesTopInset = false, startAccessoryWrapperProps, endAccessoryWrapperProps, titleTestID, twClassName, ...props }) => {
+const TextOrChildren_1 = require("../temp-components/TextOrChildren/index.cjs");
+// `startAccessory` is the primary escape hatch. `startButtonIconProps`
+// remains as a convenience path for the common single-back-button case.
+const resolveStartAccessory = ({ startAccessory, startButtonIconProps, }) => {
+    if (startAccessory) {
+        return startAccessory;
+    }
+    if (startButtonIconProps) {
+        return <ButtonIcon_1.ButtonIcon size={ButtonIcon_1.ButtonIconSize.Md} {...startButtonIconProps}/>;
+    }
+    return null;
+};
+// Only the end side supports built-in multiple buttons. More complex
+// start-side layouts should be composed explicitly with `startAccessory`.
+const renderEndButtonIcons = (endButtonIconProps) => endButtonIconProps
+    .map((iconProps, originalIndex) => ({
+    iconProps,
+    originalIndex,
+}))
+    .reverse()
+    .map(({ iconProps, originalIndex }) => (<ButtonIcon_1.ButtonIcon key={`end-button-icon-${originalIndex}`} size={ButtonIcon_1.ButtonIconSize.Md} {...iconProps}/>));
+// `endAccessory` takes precedence over the shorthand icon-props array.
+const resolveEndAccessory = ({ endAccessory, endButtonIconProps, }) => {
+    if (endAccessory) {
+        return {
+            resolvedEndAccessory: endAccessory,
+            hasMultipleEndButtons: false,
+        };
+    }
+    if (endButtonIconProps && endButtonIconProps.length > 0) {
+        return {
+            resolvedEndAccessory: renderEndButtonIcons(endButtonIconProps),
+            hasMultipleEndButtons: endButtonIconProps.length > 1,
+        };
+    }
+    return {
+        resolvedEndAccessory: null,
+        hasMultipleEndButtons: false,
+    };
+};
+const HeaderBase = ({ children, style, startAccessory, endAccessory, startButtonIconProps, endButtonIconProps, includesTopInset = false, startAccessoryWrapperProps, endAccessoryWrapperProps, childrenWrapperProps, textProps, twClassName, ...props }) => {
     const tw = (0, design_system_twrnc_preset_1.useTailwind)();
     const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
     const [startAccessoryWidth, setStartAccessoryWidth] = (0, react_1.useState)(0);
@@ -47,86 +83,71 @@ const HeaderBase = ({ children, style, variant = HeaderBase_types_1.HeaderBaseVa
     const handleEndAccessoryLayout = (0, react_1.useCallback)((e) => {
         setEndAccessoryWidth(e.nativeEvent.layout.width);
     }, []);
-    // Determine what to render for start/end
-    const hasStartContent = startAccessory || startButtonIconProps;
-    const hasEndContent = endAccessory || (endButtonIconProps && endButtonIconProps.length > 0);
-    const hasAnyAccessory = hasStartContent || hasEndContent;
-    const isCompact = variant === HeaderBase_types_1.HeaderBaseVariant.Compact;
-    // For Compact variant, render both wrappers if any accessory exists (for centering)
-    // For Display variant, only render wrappers when they have content
-    const shouldRenderStartWrapper = isCompact
-        ? Boolean(hasAnyAccessory)
-        : Boolean(hasStartContent);
-    const shouldRenderEndWrapper = isCompact
-        ? Boolean(hasAnyAccessory)
-        : Boolean(hasEndContent);
-    // Calculate equal width for both accessory wrappers to ensure title stays centered (Compact only)
-    const accessoryWrapperWidth = isCompact && hasAnyAccessory && (startAccessoryWidth || endAccessoryWidth)
+    // Normalize the public API into resolved slots so the render path only deals
+    // with layout and title rendering.
+    const resolvedStartAccessory = resolveStartAccessory({
+        startAccessory,
+        startButtonIconProps,
+    });
+    const { resolvedEndAccessory, hasMultipleEndButtons } = resolveEndAccessory({
+        endAccessory,
+        endButtonIconProps,
+    });
+    const hasStartAccessory = Boolean(resolvedStartAccessory);
+    const hasEndAccessory = Boolean(resolvedEndAccessory);
+    const hasAnyAccessory = hasStartAccessory || hasEndAccessory;
+    // Calculate equal width for both accessory wrappers to ensure title stays centered.
+    const accessoryWrapperWidth = hasAnyAccessory && (startAccessoryWidth || endAccessoryWidth)
         ? Math.max(startAccessoryWidth, endAccessoryWidth)
         : undefined;
-    const renderStartContent = () => {
-        if (startAccessory) {
-            return startAccessory;
-        }
-        if (startButtonIconProps) {
-            return <ButtonIcon_1.ButtonIcon size={ButtonIcon_1.ButtonIconSize.Md} {...startButtonIconProps}/>;
-        }
-        return null;
-    };
-    const renderEndContent = () => {
-        if (endAccessory) {
-            return endAccessory;
-        }
-        if (endButtonIconProps && endButtonIconProps.length > 0) {
-            // Reverse the array so first item appears rightmost
-            // Use original index (before reversal) for stable React keys
-            const reversedProps = endButtonIconProps
-                .map((iconProps, originalIndex) => ({
-                iconProps,
-                originalIndex,
-            }))
-                .reverse();
-            return reversedProps.map(({ iconProps, originalIndex }) => (<ButtonIcon_1.ButtonIcon key={`end-button-icon-${originalIndex}`} size={ButtonIcon_1.ButtonIconSize.Md} {...iconProps}/>));
+    const renderAccessoryWrapper = ({ wrapperProps, alignment, onLayout, content, measuredContentStyle, }) => {
+        if (!hasAnyAccessory) {
+            return null;
         }
-        return null;
+        return (<react_native_1.View style={accessoryWrapperWidth
+                ? tw.style(alignment, { width: accessoryWrapperWidth })
+                : undefined} {...wrapperProps}>
+        <react_native_1.View onLayout={onLayout} style={measuredContentStyle}>
+          {content}
+        </react_native_1.View>
+      </react_native_1.View>);
     };
-    // Check if we have multiple end buttons for layout styling
-    const hasMultipleEndButtons = !endAccessory && endButtonIconProps && endButtonIconProps.length > 1;
-    // Merge default styles with passed-in twClassName
-    const baseStyles = 'flex-row items-center gap-4 h-14';
-    const resolvedTwClassName = twClassName
-        ? `${baseStyles} ${twClassName}`
-        : baseStyles;
     return (<react_native_1.View style={[
-            tw.style(resolvedTwClassName),
+            tw.style('flex-row items-center gap-4 h-14', twClassName),
             includesTopInset && { marginTop: insets.top },
             style,
         ]} {...props}>
       {/* Start accessory */}
-      {shouldRenderStartWrapper && (<react_native_1.View style={accessoryWrapperWidth
-                ? tw.style('items-start', { width: accessoryWrapperWidth })
-                : undefined} {...startAccessoryWrapperProps}>
-          <react_native_1.View onLayout={handleStartAccessoryLayout}>
-            {renderStartContent()}
-          </react_native_1.View>
-        </react_native_1.View>)}
+      {renderAccessoryWrapper({
+            wrapperProps: startAccessoryWrapperProps,
+            alignment: 'items-start',
+            onLayout: handleStartAccessoryLayout,
+            content: resolvedStartAccessory,
+        })}
 
       {/* Title */}
-      <Box_1.Box twClassName={isCompact ? 'flex-1 items-center' : 'flex-1'}>
-        {typeof children === 'string' ? (<Text_1.Text variant={HeaderBase_constants_1.HEADERBASE_VARIANT_TEXT_VARIANTS[variant]} testID={titleTestID} style={isCompact ? tw.style('text-center') : undefined}>
-            {children}
-          </Text_1.Text>) : (children)}
-      </Box_1.Box>
+      <react_native_1.View style={tw.style('flex-1 items-center')} {...childrenWrapperProps}>
+        <TextOrChildren_1.TextOrChildren textProps={{
+            variant: design_system_shared_1.TextVariant.HeadingSm,
+            ...textProps,
+            style: [tw.style('text-center'), textProps?.style],
+        }}>
+          {children}
+        </TextOrChildren_1.TextOrChildren>
+      </react_native_1.View>
 
       {/* End accessory */}
-      {shouldRenderEndWrapper && (<react_native_1.View style={accessoryWrapperWidth
-                ? tw.style('items-end', { width: accessoryWrapperWidth })
-                : undefined} {...endAccessoryWrapperProps}>
-          <react_native_1.View onLayout={handleEndAccessoryLayout} style={hasMultipleEndButtons ? tw.style('flex-row gap-2') : undefined}>
-            {renderEndContent()}
-          </react_native_1.View>
-        </react_native_1.View>)}
+      {renderAccessoryWrapper({
+            wrapperProps: endAccessoryWrapperProps,
+            alignment: 'items-end',
+            onLayout: handleEndAccessoryLayout,
+            content: resolvedEndAccessory,
+            measuredContentStyle: hasMultipleEndButtons
+                ? tw.style('flex-row gap-2')
+                : undefined,
+        })}
     </react_native_1.View>);
 };
 exports.HeaderBase = HeaderBase;
+exports.HeaderBase.displayName = 'HeaderBase';
 //# sourceMappingURL=HeaderBase.cjs.map