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

package/dist/components/Card/Card.cjs

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Card = void 0;
 const design_system_twrnc_preset_1 = require("@metamask/design-system-twrnc-preset");
 const react_1 = __importDefault(require("react"));
-const react_native_1 = require("react-native/index.js");
+const react_native_1 = require("react-native");
 const Card = ({ children, onPress, twClassName, touchableOpacityProps, style, ...props }) => {
     const tw = (0, design_system_twrnc_preset_1.useTailwind)();
     const cardStyle = [
@@ -14,7 +14,7 @@ const Card = ({ children, onPress, twClassName, touchableOpacityProps, style, ..
         style,
     ];
     if (onPress) {
-        return (<react_native_1.TouchableOpacity onPress={onPress} style={cardStyle} {...touchableOpacityProps} {...props}>
+        return (<react_native_1.TouchableOpacity {...props} onPress={onPress} style={cardStyle} {...touchableOpacityProps}>
         {children}
       </react_native_1.TouchableOpacity>);
     }

package/dist/components/Card/Card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.cjs","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";;;;;;AAAA,qFAAmE;AACnE,kDAA0B;AAC1B,wDAAsD;AAI/C,MAAM,IAAI,GAAG,CAAC,EACnB,QAAQ,EACR,OAAO,EACP,WAAW,EACX,qBAAqB,EACrB,KAAK,EACL,GAAG,KAAK,EACE,EAAE,EAAE;IACd,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,MAAM,SAAS,GAAG;QAChB,EAAE,CAAC,KAAK,CAAC,8CAA8C,EAAE,WAAW,CAAC;QACrE,KAAK;KACN,CAAC;IAEF,IAAI,OAAO,EAAE;QACX,OAAO,CACL,CAAC,+BAAgB,CACf,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,KAAK,CAAC,CAAC,SAAS,CAAC,CACjB,IAAI,qBAAqB,CAAC,CAC1B,IAAI,KAAK,CAAC,CAEV;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,+BAAgB,CAAC,CACpB,CAAC;KACH;IAED,OAAO,CACL,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC,IAAI,KAAK,CAAC,CAChC;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAjCW,QAAA,IAAI,QAiCf","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\nimport { TouchableOpacity, View } from 'react-native';\n\nimport type { CardProps } from './Card.types';\n\nexport const Card = ({\n  children,\n  onPress,\n  twClassName,\n  touchableOpacityProps,\n  style,\n  ...props\n}: CardProps) => {\n  const tw = useTailwind();\n\n  const cardStyle = [\n    tw.style('p-4 rounded border border-default bg-default', twClassName),\n    style,\n  ];\n\n  if (onPress) {\n    return (\n      <TouchableOpacity\n        onPress={onPress}\n        style={cardStyle}\n        {...touchableOpacityProps}\n        {...props}\n      >\n        {children}\n      </TouchableOpacity>\n    );\n  }\n\n  return (\n    <View style={cardStyle} {...props}>\n      {children}\n    </View>\n  );\n};\n"]}
+{"version":3,"file":"Card.cjs","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";;;;;;AAAA,qFAAmE;AACnE,kDAA0B;AAC1B,+CAAsD;AAI/C,MAAM,IAAI,GAAG,CAAC,EACnB,QAAQ,EACR,OAAO,EACP,WAAW,EACX,qBAAqB,EACrB,KAAK,EACL,GAAG,KAAK,EACE,EAAE,EAAE;IACd,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IAEzB,MAAM,SAAS,GAAG;QAChB,EAAE,CAAC,KAAK,CAAC,8CAA8C,EAAE,WAAW,CAAC;QACrE,KAAK;KACN,CAAC;IAEF,IAAI,OAAO,EAAE;QACX,OAAO,CACL,CAAC,+BAAgB,CACf,IAAI,KAAK,CAAC,CACV,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,KAAK,CAAC,CAAC,SAAS,CAAC,CACjB,IAAI,qBAAqB,CAAC,CAE1B;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,+BAAgB,CAAC,CACpB,CAAC;KACH;IAED,OAAO,CACL,CAAC,mBAAI,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC,IAAI,KAAK,CAAC,CAChC;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,mBAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAjCW,QAAA,IAAI,QAiCf","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\nimport { TouchableOpacity, View } from 'react-native';\n\nimport type { CardProps } from './Card.types';\n\nexport const Card = ({\n  children,\n  onPress,\n  twClassName,\n  touchableOpacityProps,\n  style,\n  ...props\n}: CardProps) => {\n  const tw = useTailwind();\n\n  const cardStyle = [\n    tw.style('p-4 rounded border border-default bg-default', twClassName),\n    style,\n  ];\n\n  if (onPress) {\n    return (\n      <TouchableOpacity\n        {...props}\n        onPress={onPress}\n        style={cardStyle}\n        {...touchableOpacityProps}\n      >\n        {children}\n      </TouchableOpacity>\n    );\n  }\n\n  return (\n    <View style={cardStyle} {...props}>\n      {children}\n    </View>\n  );\n};\n"]}

package/dist/components/Card/Card.mjs

@@ -7,7 +7,7 @@ function $importDefault(module) {
 import { useTailwind } from "@metamask/design-system-twrnc-preset";
 import $React from "react";
 const React = $importDefault($React);
-import { TouchableOpacity, View } from "react-native/index.js";
+import { TouchableOpacity, View } from "react-native";
 export const Card = ({ children, onPress, twClassName, touchableOpacityProps, style, ...props }) => {
     const tw = useTailwind();
     const cardStyle = [
@@ -15,7 +15,7 @@ export const Card = ({ children, onPress, twClassName, touchableOpacityProps, st
         style,
     ];
     if (onPress) {
-        return (<TouchableOpacity onPress={onPress} style={cardStyle} {...touchableOpacityProps} {...props}>
+        return (<TouchableOpacity {...props} onPress={onPress} style={cardStyle} {...touchableOpacityProps}>
         {children}
       </TouchableOpacity>);
     }

package/dist/components/Card/Card.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.mjs","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,6CAA6C;AACnE,OAAO,MAAK,cAAc;;AAC1B,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,8BAAqB;AAItD,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EACnB,QAAQ,EACR,OAAO,EACP,WAAW,EACX,qBAAqB,EACrB,KAAK,EACL,GAAG,KAAK,EACE,EAAE,EAAE;IACd,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzB,MAAM,SAAS,GAAG;QAChB,EAAE,CAAC,KAAK,CAAC,8CAA8C,EAAE,WAAW,CAAC;QACrE,KAAK;KACN,CAAC;IAEF,IAAI,OAAO,EAAE;QACX,OAAO,CACL,CAAC,gBAAgB,CACf,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,KAAK,CAAC,CAAC,SAAS,CAAC,CACjB,IAAI,qBAAqB,CAAC,CAC1B,IAAI,KAAK,CAAC,CAEV;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,gBAAgB,CAAC,CACpB,CAAC;KACH;IAED,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC,IAAI,KAAK,CAAC,CAChC;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\nimport { TouchableOpacity, View } from 'react-native';\n\nimport type { CardProps } from './Card.types';\n\nexport const Card = ({\n  children,\n  onPress,\n  twClassName,\n  touchableOpacityProps,\n  style,\n  ...props\n}: CardProps) => {\n  const tw = useTailwind();\n\n  const cardStyle = [\n    tw.style('p-4 rounded border border-default bg-default', twClassName),\n    style,\n  ];\n\n  if (onPress) {\n    return (\n      <TouchableOpacity\n        onPress={onPress}\n        style={cardStyle}\n        {...touchableOpacityProps}\n        {...props}\n      >\n        {children}\n      </TouchableOpacity>\n    );\n  }\n\n  return (\n    <View style={cardStyle} {...props}>\n      {children}\n    </View>\n  );\n};\n"]}
+{"version":3,"file":"Card.mjs","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,6CAA6C;AACnE,OAAO,MAAK,cAAc;;AAC1B,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,qBAAqB;AAItD,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EACnB,QAAQ,EACR,OAAO,EACP,WAAW,EACX,qBAAqB,EACrB,KAAK,EACL,GAAG,KAAK,EACE,EAAE,EAAE;IACd,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEzB,MAAM,SAAS,GAAG;QAChB,EAAE,CAAC,KAAK,CAAC,8CAA8C,EAAE,WAAW,CAAC;QACrE,KAAK;KACN,CAAC;IAEF,IAAI,OAAO,EAAE;QACX,OAAO,CACL,CAAC,gBAAgB,CACf,IAAI,KAAK,CAAC,CACV,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,KAAK,CAAC,CAAC,SAAS,CAAC,CACjB,IAAI,qBAAqB,CAAC,CAE1B;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,gBAAgB,CAAC,CACpB,CAAC;KACH;IAED,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC,IAAI,KAAK,CAAC,CAChC;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React from 'react';\nimport { TouchableOpacity, View } from 'react-native';\n\nimport type { CardProps } from './Card.types';\n\nexport const Card = ({\n  children,\n  onPress,\n  twClassName,\n  touchableOpacityProps,\n  style,\n  ...props\n}: CardProps) => {\n  const tw = useTailwind();\n\n  const cardStyle = [\n    tw.style('p-4 rounded border border-default bg-default', twClassName),\n    style,\n  ];\n\n  if (onPress) {\n    return (\n      <TouchableOpacity\n        {...props}\n        onPress={onPress}\n        style={cardStyle}\n        {...touchableOpacityProps}\n      >\n        {children}\n      </TouchableOpacity>\n    );\n  }\n\n  return (\n    <View style={cardStyle} {...props}>\n      {children}\n    </View>\n  );\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Card.types.cjs","sourceRoot":"","sources":["../../../src/components/Card/Card.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode } from 'react';\nimport type { TouchableOpacityProps, ViewProps } from 'react-native';\n\n/**\n * Card component props.\n */\nexport type CardProps = {\n  /**\n   * Content to display inside the card.\n   */\n  children: ReactNode;\n  /**\n   * Optional callback when the card is pressed.\n   * When provided, the card wraps content in a TouchableOpacity.\n   */\n  onPress?: () => void;\n  /**\n   * Optional prop to add twrnc overriding classNames.\n   */\n  twClassName?: string;\n  /**\n   * Optional props to pass to the underlying TouchableOpacity when onPress is provided.\n   */\n  touchableOpacityProps?: Omit<\n    TouchableOpacityProps,\n    'onPress' | 'style' | 'children'\n  >;\n} & ViewProps;\n"]}
+{"version":3,"file":"Card.types.cjs","sourceRoot":"","sources":["../../../src/components/Card/Card.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode } from 'react';\nimport type { TouchableOpacityProps } from 'react-native';\n\n/**\n * Card component props.\n */\nexport type CardProps = {\n  /**\n   * Content to display inside the card.\n   */\n  children: ReactNode;\n  /**\n   * Optional callback when the card is pressed.\n   * When provided, the card wraps content in a TouchableOpacity.\n   */\n  onPress?: () => void;\n  /**\n   * Optional prop to add twrnc overriding classNames.\n   */\n  twClassName?: string;\n  /**\n   * Optional props to pass to the underlying TouchableOpacity when onPress is provided.\n   */\n  touchableOpacityProps?: Omit<\n    TouchableOpacityProps,\n    'onPress' | 'style' | 'children'\n  >;\n} & TouchableOpacityProps;\n"]}

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { TouchableOpacityProps, ViewProps } from "react-native/index.js";
+import type { TouchableOpacityProps } from "react-native";
 /**
  * Card component props.
  */
@@ -21,5 +21,5 @@ export type CardProps = {
      * Optional props to pass to the underlying TouchableOpacity when onPress is provided.
      */
     touchableOpacityProps?: Omit<TouchableOpacityProps, 'onPress' | 'style' | 'children'>;
-} & ViewProps;
+} & TouchableOpacityProps;
 //# sourceMappingURL=Card.types.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Card.types.d.cts","sourceRoot":"","sources":["../../../src/components/Card/Card.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc;AACvC,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,8BAAqB;AAErE;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,qBAAqB,CAAC,EAAE,IAAI,CAC1B,qBAAqB,EACrB,SAAS,GAAG,OAAO,GAAG,UAAU,CACjC,CAAC;CACH,GAAG,SAAS,CAAC"}
+{"version":3,"file":"Card.types.d.cts","sourceRoot":"","sources":["../../../src/components/Card/Card.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc;AACvC,OAAO,KAAK,EAAE,qBAAqB,EAAE,qBAAqB;AAE1D;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,qBAAqB,CAAC,EAAE,IAAI,CAC1B,qBAAqB,EACrB,SAAS,GAAG,OAAO,GAAG,UAAU,CACjC,CAAC;CACH,GAAG,qBAAqB,CAAC"}

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { TouchableOpacityProps, ViewProps } from "react-native/index.js";
+import type { TouchableOpacityProps } from "react-native";
 /**
  * Card component props.
  */
@@ -21,5 +21,5 @@ export type CardProps = {
      * Optional props to pass to the underlying TouchableOpacity when onPress is provided.
      */
     touchableOpacityProps?: Omit<TouchableOpacityProps, 'onPress' | 'style' | 'children'>;
-} & ViewProps;
+} & TouchableOpacityProps;
 //# sourceMappingURL=Card.types.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Card.types.d.mts","sourceRoot":"","sources":["../../../src/components/Card/Card.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc;AACvC,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,8BAAqB;AAErE;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,qBAAqB,CAAC,EAAE,IAAI,CAC1B,qBAAqB,EACrB,SAAS,GAAG,OAAO,GAAG,UAAU,CACjC,CAAC;CACH,GAAG,SAAS,CAAC"}
+{"version":3,"file":"Card.types.d.mts","sourceRoot":"","sources":["../../../src/components/Card/Card.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc;AACvC,OAAO,KAAK,EAAE,qBAAqB,EAAE,qBAAqB;AAE1D;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,qBAAqB,CAAC,EAAE,IAAI,CAC1B,qBAAqB,EACrB,SAAS,GAAG,OAAO,GAAG,UAAU,CACjC,CAAC;CACH,GAAG,qBAAqB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Card.types.mjs","sourceRoot":"","sources":["../../../src/components/Card/Card.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode } from 'react';\nimport type { TouchableOpacityProps, ViewProps } from 'react-native';\n\n/**\n * Card component props.\n */\nexport type CardProps = {\n  /**\n   * Content to display inside the card.\n   */\n  children: ReactNode;\n  /**\n   * Optional callback when the card is pressed.\n   * When provided, the card wraps content in a TouchableOpacity.\n   */\n  onPress?: () => void;\n  /**\n   * Optional prop to add twrnc overriding classNames.\n   */\n  twClassName?: string;\n  /**\n   * Optional props to pass to the underlying TouchableOpacity when onPress is provided.\n   */\n  touchableOpacityProps?: Omit<\n    TouchableOpacityProps,\n    'onPress' | 'style' | 'children'\n  >;\n} & ViewProps;\n"]}
+{"version":3,"file":"Card.types.mjs","sourceRoot":"","sources":["../../../src/components/Card/Card.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ReactNode } from 'react';\nimport type { TouchableOpacityProps } from 'react-native';\n\n/**\n * Card component props.\n */\nexport type CardProps = {\n  /**\n   * Content to display inside the card.\n   */\n  children: ReactNode;\n  /**\n   * Optional callback when the card is pressed.\n   * When provided, the card wraps content in a TouchableOpacity.\n   */\n  onPress?: () => void;\n  /**\n   * Optional prop to add twrnc overriding classNames.\n   */\n  twClassName?: string;\n  /**\n   * Optional props to pass to the underlying TouchableOpacity when onPress is provided.\n   */\n  touchableOpacityProps?: Omit<\n    TouchableOpacityProps,\n    'onPress' | 'style' | 'children'\n  >;\n} & TouchableOpacityProps;\n"]}

package/dist/components/Checkbox/Checkbox.cjs

@@ -26,7 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkbox = void 0;
 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 Icon_1 = require("../Icon/index.cjs");
 const TextOrChildren_1 = require("../temp-components/TextOrChildren/index.cjs");
 const AnimatedView = react_native_1.Animated.View;

package/dist/components/Checkbox/Checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.cjs","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React, {\n  forwardRef,\n  useRef,\n  useImperativeHandle,\n  useCallback,\n  useEffect,\n} from 'react';\nimport type { PressableStateCallbackType } from 'react-native';\nimport { Pressable, Animated, Easing } from 'react-native';\n\nimport { Icon, IconName, IconColor, IconSize } from '../Icon';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport type { CheckboxProps } from './Checkbox.types';\n\nconst AnimatedView = Animated.View;\n\nexport const Checkbox = forwardRef<{ toggle: () => void }, CheckboxProps>(\n  (\n    {\n      isSelected,\n      isDisabled = false,\n      isInvalid = false,\n      label = '',\n      labelProps,\n      onChange,\n      checkboxContainerProps,\n      checkedIconProps,\n      twClassName,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    // Animation values\n    const scaleAnim = useRef(new Animated.Value(1)).current;\n    const iconAnim = useRef(new Animated.Value(isSelected ? 1 : 0)).current;\n\n    // Sync icon opacity whenever selection changes\n    useEffect(() => {\n      Animated.timing(iconAnim, {\n        toValue: isSelected ? 1 : 0,\n        duration: 300,\n        easing: Easing.ease,\n        useNativeDriver: true,\n      }).start();\n    }, [isSelected, iconAnim]);\n\n    // Bounce effect when toggling\n    const animateScale = useCallback(() => {\n      Animated.sequence([\n        Animated.timing(scaleAnim, {\n          toValue: 1.15,\n          duration: 100,\n          easing: Easing.ease,\n          useNativeDriver: true,\n        }),\n        Animated.timing(scaleAnim, {\n          toValue: 1,\n          duration: 100,\n          easing: Easing.ease,\n          useNativeDriver: true,\n        }),\n      ]).start();\n    }, [scaleAnim]);\n\n    // Press handler: notify parent, then bounce\n    const handlePress = () => {\n      if (isDisabled) {\n        return;\n      }\n      onChange?.(!isSelected);\n      animateScale();\n    };\n\n    useImperativeHandle(ref, () => ({ toggle: handlePress }), [handlePress]);\n\n    const tw = useTailwind();\n    const twContainerClassNames = tw.style(\n      'flex-row items-center',\n      isDisabled ? 'opacity-50' : 'opacity-100',\n      twClassName,\n    );\n\n    const getCheckboxContainerStyle = useCallback(\n      (pressed: boolean): string => {\n        const baseBg = isSelected ? 'bg-primary-default' : 'bg-default';\n        let baseBorder = 'border-default';\n        if (isSelected) {\n          baseBorder = 'border-primary-default';\n        } else if (isInvalid) {\n          baseBorder = 'border-error-default';\n        }\n        const pressedBg = isSelected\n          ? 'bg-primary-default-pressed'\n          : 'bg-default-pressed';\n        let pressedBorder = 'border-default';\n        if (isSelected) {\n          pressedBorder = 'border-primary-default-pressed';\n        } else if (isInvalid) {\n          pressedBorder = 'border-error-default';\n        }\n        return pressed\n          ? `${pressedBg} ${pressedBorder}`\n          : `${baseBg} ${baseBorder}`;\n      },\n      [isSelected, isInvalid],\n    );\n\n    return (\n      <Pressable\n        onPress={handlePress}\n        accessible\n        accessibilityRole=\"checkbox\"\n        accessibilityState={{\n          checked: isSelected,\n          disabled: isDisabled,\n        }}\n        accessibilityLabel={typeof label === 'string' ? label : undefined}\n        disabled={isDisabled}\n        {...props}\n        style={(state: PressableStateCallbackType) => [\n          twContainerClassNames,\n          typeof style === 'function' ? style(state) : style,\n        ]}\n      >\n        {({ pressed }) => (\n          <>\n            <AnimatedView\n              {...checkboxContainerProps}\n              style={[\n                tw`${getCheckboxContainerStyle(pressed)} flex size-[22px] items-center justify-center rounded border-2`,\n                { transform: [{ scale: scaleAnim }] },\n              ]}\n            >\n              {/* Always render icon, opacity driven by iconAnim */}\n              <Animated.View style={{ opacity: iconAnim }}>\n                <Icon\n                  name={IconName.Check}\n                  color={IconColor.PrimaryInverse}\n                  size={IconSize.Sm}\n                  {...checkedIconProps}\n                />\n              </Animated.View>\n            </AnimatedView>\n            {label ? (\n              <TextOrChildren\n                textProps={{ ...labelProps, twClassName: 'ml-3' }}\n              >\n                {label}\n              </TextOrChildren>\n            ) : null}\n          </>\n        )}\n      </Pressable>\n    );\n  },\n);\n"]}
+{"version":3,"file":"Checkbox.cjs","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React, {\n  forwardRef,\n  useRef,\n  useImperativeHandle,\n  useCallback,\n  useEffect,\n} from 'react';\nimport type { PressableStateCallbackType } from 'react-native';\nimport { Pressable, Animated, Easing } from 'react-native';\n\nimport { Icon, IconName, IconColor, IconSize } from '../Icon';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport type { CheckboxProps } from './Checkbox.types';\n\nconst AnimatedView = Animated.View;\n\nexport const Checkbox = forwardRef<{ toggle: () => void }, CheckboxProps>(\n  (\n    {\n      isSelected,\n      isDisabled = false,\n      isInvalid = false,\n      label = '',\n      labelProps,\n      onChange,\n      checkboxContainerProps,\n      checkedIconProps,\n      twClassName,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    // Animation values\n    const scaleAnim = useRef(new Animated.Value(1)).current;\n    const iconAnim = useRef(new Animated.Value(isSelected ? 1 : 0)).current;\n\n    // Sync icon opacity whenever selection changes\n    useEffect(() => {\n      Animated.timing(iconAnim, {\n        toValue: isSelected ? 1 : 0,\n        duration: 300,\n        easing: Easing.ease,\n        useNativeDriver: true,\n      }).start();\n    }, [isSelected, iconAnim]);\n\n    // Bounce effect when toggling\n    const animateScale = useCallback(() => {\n      Animated.sequence([\n        Animated.timing(scaleAnim, {\n          toValue: 1.15,\n          duration: 100,\n          easing: Easing.ease,\n          useNativeDriver: true,\n        }),\n        Animated.timing(scaleAnim, {\n          toValue: 1,\n          duration: 100,\n          easing: Easing.ease,\n          useNativeDriver: true,\n        }),\n      ]).start();\n    }, [scaleAnim]);\n\n    // Press handler: notify parent, then bounce\n    const handlePress = () => {\n      if (isDisabled) {\n        return;\n      }\n      onChange?.(!isSelected);\n      animateScale();\n    };\n\n    useImperativeHandle(ref, () => ({ toggle: handlePress }), [handlePress]);\n\n    const tw = useTailwind();\n    const twContainerClassNames = tw.style(\n      'flex-row items-center',\n      isDisabled ? 'opacity-50' : 'opacity-100',\n      twClassName,\n    );\n\n    const getCheckboxContainerStyle = useCallback(\n      (pressed: boolean): string => {\n        const baseBg = isSelected ? 'bg-primary-default' : 'bg-default';\n        let baseBorder = 'border-default';\n        if (isSelected) {\n          baseBorder = 'border-primary-default';\n        } else if (isInvalid) {\n          baseBorder = 'border-error-default';\n        }\n        const pressedBg = isSelected\n          ? 'bg-primary-default-pressed'\n          : 'bg-default-pressed';\n        let pressedBorder = 'border-default';\n        if (isSelected) {\n          pressedBorder = 'border-primary-default-pressed';\n        } else if (isInvalid) {\n          pressedBorder = 'border-error-default';\n        }\n        return pressed\n          ? `${pressedBg} ${pressedBorder}`\n          : `${baseBg} ${baseBorder}`;\n      },\n      [isSelected, isInvalid],\n    );\n\n    return (\n      <Pressable\n        onPress={handlePress}\n        accessible\n        accessibilityRole=\"checkbox\"\n        accessibilityState={{\n          checked: isSelected,\n          disabled: isDisabled,\n        }}\n        accessibilityLabel={typeof label === 'string' ? label : undefined}\n        disabled={isDisabled}\n        {...props}\n        style={(state: PressableStateCallbackType) => [\n          twContainerClassNames,\n          typeof style === 'function' ? style(state) : style,\n        ]}\n      >\n        {({ pressed }) => (\n          <>\n            <AnimatedView\n              {...checkboxContainerProps}\n              style={[\n                tw`${getCheckboxContainerStyle(pressed)} flex size-[22px] items-center justify-center rounded border-2`,\n                { transform: [{ scale: scaleAnim }] },\n              ]}\n            >\n              {/* Always render icon, opacity driven by iconAnim */}\n              <Animated.View style={{ opacity: iconAnim }}>\n                <Icon\n                  name={IconName.Check}\n                  color={IconColor.PrimaryInverse}\n                  size={IconSize.Sm}\n                  {...checkedIconProps}\n                />\n              </Animated.View>\n            </AnimatedView>\n            {label ? (\n              <TextOrChildren\n                textProps={{ ...labelProps, twClassName: 'ml-3' }}\n              >\n                {label}\n              </TextOrChildren>\n            ) : null}\n          </>\n        )}\n      </Pressable>\n    );\n  },\n);\n"]}

package/dist/components/Checkbox/Checkbox.d.cts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { PressableStateCallbackType } from "react-native/index.js";
+import type { PressableStateCallbackType } from "react-native";
 export declare const Checkbox: React.ForwardRefExoticComponent<import("@metamask/design-system-shared").CheckboxPropsShared & {
     labelProps?: Omit<Partial<import("../index.cjs").TextProps>, "children"> | undefined;
     checkboxContainerProps?: Omit<Partial<import("react-native").ViewProps>, "children"> | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.cts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAMN,cAAc;AACf,OAAO,KAAK,EAAE,0BAA0B,EAAE,8BAAqB;AAU/D,eAAO,MAAM,QAAQ;;;;;;;YAAwB,MAAM,IAAI;GA4ItD,CAAC"}
+{"version":3,"file":"Checkbox.d.cts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAMN,cAAc;AACf,OAAO,KAAK,EAAE,0BAA0B,EAAE,qBAAqB;AAU/D,eAAO,MAAM,QAAQ;;;;;;;YAAwB,MAAM,IAAI;GA4ItD,CAAC"}

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

@@ -1,5 +1,5 @@
 import React from "react";
-import type { PressableStateCallbackType } from "react-native/index.js";
+import type { PressableStateCallbackType } from "react-native";
 export declare const Checkbox: React.ForwardRefExoticComponent<import("@metamask/design-system-shared").CheckboxPropsShared & {
     labelProps?: Omit<Partial<import("../index.mjs").TextProps>, "children"> | undefined;
     checkboxContainerProps?: Omit<Partial<import("react-native").ViewProps>, "children"> | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.mts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAMN,cAAc;AACf,OAAO,KAAK,EAAE,0BAA0B,EAAE,8BAAqB;AAU/D,eAAO,MAAM,QAAQ;;;;;;;YAAwB,MAAM,IAAI;GA4ItD,CAAC"}
+{"version":3,"file":"Checkbox.d.mts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAMN,cAAc;AACf,OAAO,KAAK,EAAE,0BAA0B,EAAE,qBAAqB;AAU/D,eAAO,MAAM,QAAQ;;;;;;;YAAwB,MAAM,IAAI;GA4ItD,CAAC"}

package/dist/components/Checkbox/Checkbox.mjs

@@ -7,7 +7,7 @@ function $importDefault(module) {
 import { useTailwind } from "@metamask/design-system-twrnc-preset";
 import $React, { forwardRef, useRef, useImperativeHandle, useCallback, useEffect } from "react";
 const React = $importDefault($React);
-import { Pressable, Animated, Easing } from "react-native/index.js";
+import { Pressable, Animated, Easing } from "react-native";
 import { Icon, IconName, IconColor, IconSize } from "../Icon/index.mjs";
 import { TextOrChildren } from "../temp-components/TextOrChildren/index.mjs";
 const AnimatedView = Animated.View;

package/dist/components/Checkbox/Checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.mjs","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React, {\n  forwardRef,\n  useRef,\n  useImperativeHandle,\n  useCallback,\n  useEffect,\n} from 'react';\nimport type { PressableStateCallbackType } from 'react-native';\nimport { Pressable, Animated, Easing } from 'react-native';\n\nimport { Icon, IconName, IconColor, IconSize } from '../Icon';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport type { CheckboxProps } from './Checkbox.types';\n\nconst AnimatedView = Animated.View;\n\nexport const Checkbox = forwardRef<{ toggle: () => void }, CheckboxProps>(\n  (\n    {\n      isSelected,\n      isDisabled = false,\n      isInvalid = false,\n      label = '',\n      labelProps,\n      onChange,\n      checkboxContainerProps,\n      checkedIconProps,\n      twClassName,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    // Animation values\n    const scaleAnim = useRef(new Animated.Value(1)).current;\n    const iconAnim = useRef(new Animated.Value(isSelected ? 1 : 0)).current;\n\n    // Sync icon opacity whenever selection changes\n    useEffect(() => {\n      Animated.timing(iconAnim, {\n        toValue: isSelected ? 1 : 0,\n        duration: 300,\n        easing: Easing.ease,\n        useNativeDriver: true,\n      }).start();\n    }, [isSelected, iconAnim]);\n\n    // Bounce effect when toggling\n    const animateScale = useCallback(() => {\n      Animated.sequence([\n        Animated.timing(scaleAnim, {\n          toValue: 1.15,\n          duration: 100,\n          easing: Easing.ease,\n          useNativeDriver: true,\n        }),\n        Animated.timing(scaleAnim, {\n          toValue: 1,\n          duration: 100,\n          easing: Easing.ease,\n          useNativeDriver: true,\n        }),\n      ]).start();\n    }, [scaleAnim]);\n\n    // Press handler: notify parent, then bounce\n    const handlePress = () => {\n      if (isDisabled) {\n        return;\n      }\n      onChange?.(!isSelected);\n      animateScale();\n    };\n\n    useImperativeHandle(ref, () => ({ toggle: handlePress }), [handlePress]);\n\n    const tw = useTailwind();\n    const twContainerClassNames = tw.style(\n      'flex-row items-center',\n      isDisabled ? 'opacity-50' : 'opacity-100',\n      twClassName,\n    );\n\n    const getCheckboxContainerStyle = useCallback(\n      (pressed: boolean): string => {\n        const baseBg = isSelected ? 'bg-primary-default' : 'bg-default';\n        let baseBorder = 'border-default';\n        if (isSelected) {\n          baseBorder = 'border-primary-default';\n        } else if (isInvalid) {\n          baseBorder = 'border-error-default';\n        }\n        const pressedBg = isSelected\n          ? 'bg-primary-default-pressed'\n          : 'bg-default-pressed';\n        let pressedBorder = 'border-default';\n        if (isSelected) {\n          pressedBorder = 'border-primary-default-pressed';\n        } else if (isInvalid) {\n          pressedBorder = 'border-error-default';\n        }\n        return pressed\n          ? `${pressedBg} ${pressedBorder}`\n          : `${baseBg} ${baseBorder}`;\n      },\n      [isSelected, isInvalid],\n    );\n\n    return (\n      <Pressable\n        onPress={handlePress}\n        accessible\n        accessibilityRole=\"checkbox\"\n        accessibilityState={{\n          checked: isSelected,\n          disabled: isDisabled,\n        }}\n        accessibilityLabel={typeof label === 'string' ? label : undefined}\n        disabled={isDisabled}\n        {...props}\n        style={(state: PressableStateCallbackType) => [\n          twContainerClassNames,\n          typeof style === 'function' ? style(state) : style,\n        ]}\n      >\n        {({ pressed }) => (\n          <>\n            <AnimatedView\n              {...checkboxContainerProps}\n              style={[\n                tw`${getCheckboxContainerStyle(pressed)} flex size-[22px] items-center justify-center rounded border-2`,\n                { transform: [{ scale: scaleAnim }] },\n              ]}\n            >\n              {/* Always render icon, opacity driven by iconAnim */}\n              <Animated.View style={{ opacity: iconAnim }}>\n                <Icon\n                  name={IconName.Check}\n                  color={IconColor.PrimaryInverse}\n                  size={IconSize.Sm}\n                  {...checkedIconProps}\n                />\n              </Animated.View>\n            </AnimatedView>\n            {label ? (\n              <TextOrChildren\n                textProps={{ ...labelProps, twClassName: 'ml-3' }}\n              >\n                {label}\n              </TextOrChildren>\n            ) : null}\n          </>\n        )}\n      </Pressable>\n    );\n  },\n);\n"]}
+{"version":3,"file":"Checkbox.mjs","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,6CAA6C;AACnE,OAAO,QAAO,EACZ,UAAU,EACV,MAAM,EACN,mBAAmB,EACnB,WAAW,EACX,SAAS,EACV,cAAc;;AAEf,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,qBAAqB;AAE3D,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,0BAAgB;AAC9D,OAAO,EAAE,cAAc,EAAE,oDAA0C;AAInE,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC;AAEnC,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EACE,UAAU,EACV,UAAU,GAAG,KAAK,EAClB,SAAS,GAAG,KAAK,EACjB,KAAK,GAAG,EAAE,EACV,UAAU,EACV,QAAQ,EACR,sBAAsB,EACtB,gBAAgB,EAChB,WAAW,EACX,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,mBAAmB;IACnB,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IACxD,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAExE,+CAA+C;IAC/C,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,MAAM,CAAC,QAAQ,EAAE;YACxB,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC3B,QAAQ,EAAE,GAAG;YACb,MAAM,EAAE,MAAM,CAAC,IAAI;YACnB,eAAe,EAAE,IAAI;SACtB,CAAC,CAAC,KAAK,EAAE,CAAC;IACb,CAAC,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE3B,8BAA8B;IAC9B,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QACpC,QAAQ,CAAC,QAAQ,CAAC;YAChB,QAAQ,CAAC,MAAM,CAAC,SAAS,EAAE;gBACzB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,GAAG;gBACb,MAAM,EAAE,MAAM,CAAC,IAAI;gBACnB,eAAe,EAAE,IAAI;aACtB,CAAC;YACF,QAAQ,CAAC,MAAM,CAAC,SAAS,EAAE;gBACzB,OAAO,EAAE,CAAC;gBACV,QAAQ,EAAE,GAAG;gBACb,MAAM,EAAE,MAAM,CAAC,IAAI;gBACnB,eAAe,EAAE,IAAI;aACtB,CAAC;SACH,CAAC,CAAC,KAAK,EAAE,CAAC;IACb,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,4CAA4C;IAC5C,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,UAAU,EAAE;YACd,OAAO;SACR;QACD,QAAQ,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC;QACxB,YAAY,EAAE,CAAC;IACjB,CAAC,CAAC;IAEF,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAEzE,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IACzB,MAAM,qBAAqB,GAAG,EAAE,CAAC,KAAK,CACpC,uBAAuB,EACvB,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,EACzC,WAAW,CACZ,CAAC;IAEF,MAAM,yBAAyB,GAAG,WAAW,CAC3C,CAAC,OAAgB,EAAU,EAAE;QAC3B,MAAM,MAAM,GAAG,UAAU,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,YAAY,CAAC;QAChE,IAAI,UAAU,GAAG,gBAAgB,CAAC;QAClC,IAAI,UAAU,EAAE;YACd,UAAU,GAAG,wBAAwB,CAAC;SACvC;aAAM,IAAI,SAAS,EAAE;YACpB,UAAU,GAAG,sBAAsB,CAAC;SACrC;QACD,MAAM,SAAS,GAAG,UAAU;YAC1B,CAAC,CAAC,4BAA4B;YAC9B,CAAC,CAAC,oBAAoB,CAAC;QACzB,IAAI,aAAa,GAAG,gBAAgB,CAAC;QACrC,IAAI,UAAU,EAAE;YACd,aAAa,GAAG,gCAAgC,CAAC;SAClD;aAAM,IAAI,SAAS,EAAE;YACpB,aAAa,GAAG,sBAAsB,CAAC;SACxC;QACD,OAAO,OAAO;YACZ,CAAC,CAAC,GAAG,SAAS,IAAI,aAAa,EAAE;YACjC,CAAC,CAAC,GAAG,MAAM,IAAI,UAAU,EAAE,CAAC;IAChC,CAAC,EACD,CAAC,UAAU,EAAE,SAAS,CAAC,CACxB,CAAC;IAEF,OAAO,CACL,CAAC,SAAS,CACR,OAAO,CAAC,CAAC,WAAW,CAAC,CACrB,UAAU,CACV,iBAAiB,CAAC,UAAU,CAC5B,kBAAkB,CAAC,CAAC;YAClB,OAAO,EAAE,UAAU;YACnB,QAAQ,EAAE,UAAU;SACrB,CAAC,CACF,kBAAkB,CAAC,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAClE,QAAQ,CAAC,CAAC,UAAU,CAAC,CACrB,IAAI,KAAK,CAAC,CACV,KAAK,CAAC,CAAC,CAAC,KAAiC,EAAE,EAAE,CAAC;YAC5C,qBAAqB;YACrB,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK;SACnD,CAAC,CAEF;QAAA,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAChB,EACE;YAAA,CAAC,YAAY,CACX,IAAI,sBAAsB,CAAC,CAC3B,KAAK,CAAC,CAAC;gBACL,EAAE,CAAA,GAAG,yBAAyB,CAAC,OAAO,CAAC,gEAAgE;gBACvG,EAAE,SAAS,EAAE,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EAAE;aACtC,CAAC,CAEF;cAAA,CAAC,oDAAoD,CACrD;cAAA,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,CAC1C;gBAAA,CAAC,IAAI,CACH,IAAI,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CACrB,KAAK,CAAC,CAAC,SAAS,CAAC,cAAc,CAAC,CAChC,IAAI,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAClB,IAAI,gBAAgB,CAAC,EAEzB;cAAA,EAAE,QAAQ,CAAC,IAAI,CACjB;YAAA,EAAE,YAAY,CACd;YAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CACP,CAAC,cAAc,CACb,SAAS,CAAC,CAAC,EAAE,GAAG,UAAU,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC,CAElD;gBAAA,CAAC,KAAK,CACR;cAAA,EAAE,cAAc,CAAC,CAClB,CAAC,CAAC,CAAC,IAAI,CACV;UAAA,GAAG,CACJ,CACH;MAAA,EAAE,SAAS,CAAC,CACb,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["import { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React, {\n  forwardRef,\n  useRef,\n  useImperativeHandle,\n  useCallback,\n  useEffect,\n} from 'react';\nimport type { PressableStateCallbackType } from 'react-native';\nimport { Pressable, Animated, Easing } from 'react-native';\n\nimport { Icon, IconName, IconColor, IconSize } from '../Icon';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport type { CheckboxProps } from './Checkbox.types';\n\nconst AnimatedView = Animated.View;\n\nexport const Checkbox = forwardRef<{ toggle: () => void }, CheckboxProps>(\n  (\n    {\n      isSelected,\n      isDisabled = false,\n      isInvalid = false,\n      label = '',\n      labelProps,\n      onChange,\n      checkboxContainerProps,\n      checkedIconProps,\n      twClassName,\n      style,\n      ...props\n    },\n    ref,\n  ) => {\n    // Animation values\n    const scaleAnim = useRef(new Animated.Value(1)).current;\n    const iconAnim = useRef(new Animated.Value(isSelected ? 1 : 0)).current;\n\n    // Sync icon opacity whenever selection changes\n    useEffect(() => {\n      Animated.timing(iconAnim, {\n        toValue: isSelected ? 1 : 0,\n        duration: 300,\n        easing: Easing.ease,\n        useNativeDriver: true,\n      }).start();\n    }, [isSelected, iconAnim]);\n\n    // Bounce effect when toggling\n    const animateScale = useCallback(() => {\n      Animated.sequence([\n        Animated.timing(scaleAnim, {\n          toValue: 1.15,\n          duration: 100,\n          easing: Easing.ease,\n          useNativeDriver: true,\n        }),\n        Animated.timing(scaleAnim, {\n          toValue: 1,\n          duration: 100,\n          easing: Easing.ease,\n          useNativeDriver: true,\n        }),\n      ]).start();\n    }, [scaleAnim]);\n\n    // Press handler: notify parent, then bounce\n    const handlePress = () => {\n      if (isDisabled) {\n        return;\n      }\n      onChange?.(!isSelected);\n      animateScale();\n    };\n\n    useImperativeHandle(ref, () => ({ toggle: handlePress }), [handlePress]);\n\n    const tw = useTailwind();\n    const twContainerClassNames = tw.style(\n      'flex-row items-center',\n      isDisabled ? 'opacity-50' : 'opacity-100',\n      twClassName,\n    );\n\n    const getCheckboxContainerStyle = useCallback(\n      (pressed: boolean): string => {\n        const baseBg = isSelected ? 'bg-primary-default' : 'bg-default';\n        let baseBorder = 'border-default';\n        if (isSelected) {\n          baseBorder = 'border-primary-default';\n        } else if (isInvalid) {\n          baseBorder = 'border-error-default';\n        }\n        const pressedBg = isSelected\n          ? 'bg-primary-default-pressed'\n          : 'bg-default-pressed';\n        let pressedBorder = 'border-default';\n        if (isSelected) {\n          pressedBorder = 'border-primary-default-pressed';\n        } else if (isInvalid) {\n          pressedBorder = 'border-error-default';\n        }\n        return pressed\n          ? `${pressedBg} ${pressedBorder}`\n          : `${baseBg} ${baseBorder}`;\n      },\n      [isSelected, isInvalid],\n    );\n\n    return (\n      <Pressable\n        onPress={handlePress}\n        accessible\n        accessibilityRole=\"checkbox\"\n        accessibilityState={{\n          checked: isSelected,\n          disabled: isDisabled,\n        }}\n        accessibilityLabel={typeof label === 'string' ? label : undefined}\n        disabled={isDisabled}\n        {...props}\n        style={(state: PressableStateCallbackType) => [\n          twContainerClassNames,\n          typeof style === 'function' ? style(state) : style,\n        ]}\n      >\n        {({ pressed }) => (\n          <>\n            <AnimatedView\n              {...checkboxContainerProps}\n              style={[\n                tw`${getCheckboxContainerStyle(pressed)} flex size-[22px] items-center justify-center rounded border-2`,\n                { transform: [{ scale: scaleAnim }] },\n              ]}\n            >\n              {/* Always render icon, opacity driven by iconAnim */}\n              <Animated.View style={{ opacity: iconAnim }}>\n                <Icon\n                  name={IconName.Check}\n                  color={IconColor.PrimaryInverse}\n                  size={IconSize.Sm}\n                  {...checkedIconProps}\n                />\n              </Animated.View>\n            </AnimatedView>\n            {label ? (\n              <TextOrChildren\n                textProps={{ ...labelProps, twClassName: 'ml-3' }}\n              >\n                {label}\n              </TextOrChildren>\n            ) : null}\n          </>\n        )}\n      </Pressable>\n    );\n  },\n);\n"]}

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

@@ -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.cjs";
 import type { TextProps } from "../Text/index.cjs";
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.types.d.cts","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.cts","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/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/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

package/dist/components/HeaderBase/HeaderBase.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderBase.cjs","sourceRoot":"","sources":["../../../src/components/HeaderBase/HeaderBase.tsx"],"names":[],"mappings":"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","sourcesContent":["// Third party dependencies.\nimport { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React, { useCallback, useState } from 'react';\nimport type { LayoutChangeEvent } from 'react-native';\nimport { View } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\n// External dependencies.\nimport { Box } from '../Box';\nimport { ButtonIcon, ButtonIconSize } from '../ButtonIcon';\nimport { Text } from '../Text';\n\n// Internal dependencies.\nimport { HEADERBASE_VARIANT_TEXT_VARIANTS } from './HeaderBase.constants';\nimport type { HeaderBaseProps } from './HeaderBase.types';\nimport { HeaderBaseVariant } from './HeaderBase.types';\n\nexport const HeaderBase: React.FC<HeaderBaseProps> = ({\n  children,\n  style,\n  variant = HeaderBaseVariant.Compact,\n  startAccessory,\n  endAccessory,\n  startButtonIconProps,\n  endButtonIconProps,\n  includesTopInset = false,\n  startAccessoryWrapperProps,\n  endAccessoryWrapperProps,\n  titleTestID,\n  twClassName,\n  ...props\n}) => {\n  const tw = useTailwind();\n  const insets = useSafeAreaInsets();\n\n  const [startAccessoryWidth, setStartAccessoryWidth] = useState(0);\n  const [endAccessoryWidth, setEndAccessoryWidth] = useState(0);\n\n  const handleStartAccessoryLayout = useCallback((e: LayoutChangeEvent) => {\n    setStartAccessoryWidth(e.nativeEvent.layout.width);\n  }, []);\n\n  const handleEndAccessoryLayout = useCallback((e: LayoutChangeEvent) => {\n    setEndAccessoryWidth(e.nativeEvent.layout.width);\n  }, []);\n\n  // Determine what to render for start/end\n  const hasStartContent = startAccessory || startButtonIconProps;\n  const hasEndContent =\n    endAccessory || (endButtonIconProps && endButtonIconProps.length > 0);\n  const hasAnyAccessory = hasStartContent || hasEndContent;\n\n  const isCompact = variant === HeaderBaseVariant.Compact;\n\n  // For Compact variant, render both wrappers if any accessory exists (for centering)\n  // For Display variant, only render wrappers when they have content\n  const shouldRenderStartWrapper = isCompact\n    ? Boolean(hasAnyAccessory)\n    : Boolean(hasStartContent);\n  const shouldRenderEndWrapper = isCompact\n    ? Boolean(hasAnyAccessory)\n    : Boolean(hasEndContent);\n\n  // Calculate equal width for both accessory wrappers to ensure title stays centered (Compact only)\n  const accessoryWrapperWidth =\n    isCompact && hasAnyAccessory && (startAccessoryWidth || endAccessoryWidth)\n      ? Math.max(startAccessoryWidth, endAccessoryWidth)\n      : undefined;\n\n  const renderStartContent = () => {\n    if (startAccessory) {\n      return startAccessory;\n    }\n    if (startButtonIconProps) {\n      return <ButtonIcon size={ButtonIconSize.Md} {...startButtonIconProps} />;\n    }\n    return null;\n  };\n\n  const renderEndContent = () => {\n    if (endAccessory) {\n      return endAccessory;\n    }\n    if (endButtonIconProps && endButtonIconProps.length > 0) {\n      // Reverse the array so first item appears rightmost\n      // Use original index (before reversal) for stable React keys\n      const reversedProps = endButtonIconProps\n        .map((iconProps, originalIndex) => ({\n          iconProps,\n          originalIndex,\n        }))\n        .reverse();\n      return reversedProps.map(({ iconProps, originalIndex }) => (\n        <ButtonIcon\n          key={`end-button-icon-${originalIndex}`}\n          size={ButtonIconSize.Md}\n          {...iconProps}\n        />\n      ));\n    }\n    return null;\n  };\n\n  // Check if we have multiple end buttons for layout styling\n  const hasMultipleEndButtons =\n    !endAccessory && endButtonIconProps && endButtonIconProps.length > 1;\n\n  // Merge default styles with passed-in twClassName\n  const baseStyles = 'flex-row items-center gap-4 h-14';\n  const resolvedTwClassName = twClassName\n    ? `${baseStyles} ${twClassName}`\n    : baseStyles;\n\n  return (\n    <View\n      style={[\n        tw.style(resolvedTwClassName),\n        includesTopInset && { marginTop: insets.top },\n        style,\n      ]}\n      {...props}\n    >\n      {/* Start accessory */}\n      {shouldRenderStartWrapper && (\n        <View\n          style={\n            accessoryWrapperWidth\n              ? tw.style('items-start', { width: accessoryWrapperWidth })\n              : undefined\n          }\n          {...startAccessoryWrapperProps}\n        >\n          <View onLayout={handleStartAccessoryLayout}>\n            {renderStartContent()}\n          </View>\n        </View>\n      )}\n\n      {/* Title */}\n      <Box twClassName={isCompact ? 'flex-1 items-center' : 'flex-1'}>\n        {typeof children === 'string' ? (\n          <Text\n            variant={HEADERBASE_VARIANT_TEXT_VARIANTS[variant]}\n            testID={titleTestID}\n            style={isCompact ? tw.style('text-center') : undefined}\n          >\n            {children}\n          </Text>\n        ) : (\n          children\n        )}\n      </Box>\n\n      {/* End accessory */}\n      {shouldRenderEndWrapper && (\n        <View\n          style={\n            accessoryWrapperWidth\n              ? tw.style('items-end', { width: accessoryWrapperWidth })\n              : undefined\n          }\n          {...endAccessoryWrapperProps}\n        >\n          <View\n            onLayout={handleEndAccessoryLayout}\n            style={\n              hasMultipleEndButtons ? tw.style('flex-row gap-2') : undefined\n            }\n          >\n            {renderEndContent()}\n          </View>\n        </View>\n      )}\n    </View>\n  );\n};\n"]}
+{"version":3,"file":"HeaderBase.cjs","sourceRoot":"","sources":["../../../src/components/HeaderBase/HeaderBase.tsx"],"names":[],"mappings":"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","sourcesContent":["// Third party dependencies.\nimport { TextVariant } from '@metamask/design-system-shared';\nimport { useTailwind } from '@metamask/design-system-twrnc-preset';\nimport React, { useCallback, useState } from 'react';\nimport type { LayoutChangeEvent } from 'react-native';\nimport { View } from 'react-native';\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\n\n// External dependencies.\nimport { ButtonIcon, ButtonIconSize } from '../ButtonIcon';\nimport type { ButtonIconProps } from '../ButtonIcon';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport type { HeaderBaseProps } from './HeaderBase.types';\n\n// `startAccessory` is the primary escape hatch. `startButtonIconProps`\n// remains as a convenience path for the common single-back-button case.\nconst resolveStartAccessory = ({\n  startAccessory,\n  startButtonIconProps,\n}: Pick<HeaderBaseProps, 'startAccessory' | 'startButtonIconProps'>) => {\n  if (startAccessory) {\n    return startAccessory;\n  }\n\n  if (startButtonIconProps) {\n    return <ButtonIcon size={ButtonIconSize.Md} {...startButtonIconProps} />;\n  }\n\n  return null;\n};\n\n// Only the end side supports built-in multiple buttons. More complex\n// start-side layouts should be composed explicitly with `startAccessory`.\nconst renderEndButtonIcons = (endButtonIconProps: ButtonIconProps[]) =>\n  endButtonIconProps\n    .map((iconProps, originalIndex) => ({\n      iconProps,\n      originalIndex,\n    }))\n    .reverse()\n    .map(({ iconProps, originalIndex }) => (\n      <ButtonIcon\n        key={`end-button-icon-${originalIndex}`}\n        size={ButtonIconSize.Md}\n        {...iconProps}\n      />\n    ));\n\n// `endAccessory` takes precedence over the shorthand icon-props array.\nconst resolveEndAccessory = ({\n  endAccessory,\n  endButtonIconProps,\n}: Pick<HeaderBaseProps, 'endAccessory' | 'endButtonIconProps'>) => {\n  if (endAccessory) {\n    return {\n      resolvedEndAccessory: endAccessory,\n      hasMultipleEndButtons: false,\n    };\n  }\n\n  if (endButtonIconProps && endButtonIconProps.length > 0) {\n    return {\n      resolvedEndAccessory: renderEndButtonIcons(endButtonIconProps),\n      hasMultipleEndButtons: endButtonIconProps.length > 1,\n    };\n  }\n\n  return {\n    resolvedEndAccessory: null,\n    hasMultipleEndButtons: false,\n  };\n};\n\nexport const HeaderBase: React.FC<HeaderBaseProps> = ({\n  children,\n  style,\n  startAccessory,\n  endAccessory,\n  startButtonIconProps,\n  endButtonIconProps,\n  includesTopInset = false,\n  startAccessoryWrapperProps,\n  endAccessoryWrapperProps,\n  childrenWrapperProps,\n  textProps,\n  twClassName,\n  ...props\n}) => {\n  const tw = useTailwind();\n  const insets = useSafeAreaInsets();\n\n  const [startAccessoryWidth, setStartAccessoryWidth] = useState(0);\n  const [endAccessoryWidth, setEndAccessoryWidth] = useState(0);\n\n  const handleStartAccessoryLayout = useCallback((e: LayoutChangeEvent) => {\n    setStartAccessoryWidth(e.nativeEvent.layout.width);\n  }, []);\n\n  const handleEndAccessoryLayout = useCallback((e: LayoutChangeEvent) => {\n    setEndAccessoryWidth(e.nativeEvent.layout.width);\n  }, []);\n\n  // Normalize the public API into resolved slots so the render path only deals\n  // with layout and title rendering.\n  const resolvedStartAccessory = resolveStartAccessory({\n    startAccessory,\n    startButtonIconProps,\n  });\n  const { resolvedEndAccessory, hasMultipleEndButtons } = resolveEndAccessory({\n    endAccessory,\n    endButtonIconProps,\n  });\n\n  const hasStartAccessory = Boolean(resolvedStartAccessory);\n  const hasEndAccessory = Boolean(resolvedEndAccessory);\n  const hasAnyAccessory = hasStartAccessory || hasEndAccessory;\n\n  // Calculate equal width for both accessory wrappers to ensure title stays centered.\n  const accessoryWrapperWidth =\n    hasAnyAccessory && (startAccessoryWidth || endAccessoryWidth)\n      ? Math.max(startAccessoryWidth, endAccessoryWidth)\n      : undefined;\n\n  const renderAccessoryWrapper = ({\n    wrapperProps,\n    alignment,\n    onLayout,\n    content,\n    measuredContentStyle,\n  }: {\n    wrapperProps?: HeaderBaseProps['startAccessoryWrapperProps'];\n    alignment: 'items-start' | 'items-end';\n    onLayout: (e: LayoutChangeEvent) => void;\n    content: React.ReactNode;\n    measuredContentStyle?: ReturnType<typeof tw.style>;\n  }) => {\n    if (!hasAnyAccessory) {\n      return null;\n    }\n\n    return (\n      <View\n        style={\n          accessoryWrapperWidth\n            ? tw.style(alignment, { width: accessoryWrapperWidth })\n            : undefined\n        }\n        {...wrapperProps}\n      >\n        <View onLayout={onLayout} style={measuredContentStyle}>\n          {content}\n        </View>\n      </View>\n    );\n  };\n\n  return (\n    <View\n      style={[\n        tw.style('flex-row items-center gap-4 h-14', twClassName),\n        includesTopInset && { marginTop: insets.top },\n        style,\n      ]}\n      {...props}\n    >\n      {/* Start accessory */}\n      {renderAccessoryWrapper({\n        wrapperProps: startAccessoryWrapperProps,\n        alignment: 'items-start',\n        onLayout: handleStartAccessoryLayout,\n        content: resolvedStartAccessory,\n      })}\n\n      {/* Title */}\n      <View style={tw.style('flex-1 items-center')} {...childrenWrapperProps}>\n        <TextOrChildren\n          textProps={{\n            variant: TextVariant.HeadingSm,\n            ...textProps,\n            style: [tw.style('text-center'), textProps?.style],\n          }}\n        >\n          {children}\n        </TextOrChildren>\n      </View>\n\n      {/* End accessory */}\n      {renderAccessoryWrapper({\n        wrapperProps: endAccessoryWrapperProps,\n        alignment: 'items-end',\n        onLayout: handleEndAccessoryLayout,\n        content: resolvedEndAccessory,\n        measuredContentStyle: hasMultipleEndButtons\n          ? tw.style('flex-row gap-2')\n          : undefined,\n      })}\n    </View>\n  );\n};\n\nHeaderBase.displayName = 'HeaderBase';\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderBase.d.cts","sourceRoot":"","sources":["../../../src/components/HeaderBase/HeaderBase.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgC,cAAc;AAYrD,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAG1D,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA8JhD,CAAC"}
+{"version":3,"file":"HeaderBase.d.cts","sourceRoot":"","sources":["../../../src/components/HeaderBase/HeaderBase.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAgC,cAAc;AAUrD,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AA6D1D,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA6HhD,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderBase.d.mts","sourceRoot":"","sources":["../../../src/components/HeaderBase/HeaderBase.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAgC,cAAc;AAYrD,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAG1D,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA8JhD,CAAC"}
+{"version":3,"file":"HeaderBase.d.mts","sourceRoot":"","sources":["../../../src/components/HeaderBase/HeaderBase.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAgC,cAAc;AAUrD,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AA6D1D,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA6HhD,CAAC"}