@metamask-previews/design-system-react-native 0.30.2-preview.55a2d71 → 0.30.2-preview.808be73

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

@@ -27,6 +27,10 @@ export type BottomSheetDialogProps = {
      * @default true
      */
     keyboardAvoidingViewEnabled?: boolean;
+    /**
+     * Optional callback invoked when the sheet begins closing (before animation).
+     */
+    onDismissStart?: () => void;
     /**
      * Optional callback that gets triggered when the sheet is closed.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetDialog.types.d.cts","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/BottomSheetDialog.types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,qBAAqB;AAE9C;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACnC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,gBAAgB,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,gBAAgB,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,SAAS,CAAC;AAEd;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,aAAa,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IAC/C;;OAEG;IACH,YAAY,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;CAC/C,CAAC"}
+{"version":3,"file":"BottomSheetDialog.types.d.cts","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/BottomSheetDialog.types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,qBAAqB;AAE9C;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACnC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,gBAAgB,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,gBAAgB,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,SAAS,CAAC;AAEd;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,aAAa,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IAC/C;;OAEG;IACH,YAAY,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;CAC/C,CAAC"}

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

@@ -27,6 +27,10 @@ export type BottomSheetDialogProps = {
      * @default true
      */
     keyboardAvoidingViewEnabled?: boolean;
+    /**
+     * Optional callback invoked when the sheet begins closing (before animation).
+     */
+    onDismissStart?: () => void;
     /**
      * Optional callback that gets triggered when the sheet is closed.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetDialog.types.d.mts","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/BottomSheetDialog.types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,qBAAqB;AAE9C;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACnC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,gBAAgB,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,gBAAgB,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,SAAS,CAAC;AAEd;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,aAAa,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IAC/C;;OAEG;IACH,YAAY,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;CAC/C,CAAC"}
+{"version":3,"file":"BottomSheetDialog.types.d.mts","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/BottomSheetDialog.types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,qBAAqB;AAE9C;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACnC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,gBAAgB,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,gBAAgB,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC9C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,GAAG,SAAS,CAAC;AAEd;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC;;OAEG;IACH,aAAa,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IAC/C;;OAEG;IACH,YAAY,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;CAC/C,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetDialog.types.mjs","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/BottomSheetDialog.types.ts"],"names":[],"mappings":"","sourcesContent":["// Third party dependencies.\nimport type { ViewProps } from 'react-native';\n\n/**\n * BottomSheetDialog component props.\n */\nexport type BottomSheetDialogProps = {\n  /**\n   * Optional content to display inside the dialog.\n   */\n  children?: React.ReactNode;\n  /**\n   * Optional prop to toggle full screen state of BottomSheetDialog.\n   *\n   * @default false\n   */\n  isFullscreen?: boolean;\n  /**\n   * Optional boolean that indicates if the sheet is swippable.\n   * This affects whether or not tapping on the overlay will dismiss\n   * the sheet as well, and whether the drag handle indicator is shown.\n   *\n   * @default true\n   */\n  isInteractable?: boolean;\n  /**\n   * Optional boolean that indicates if the KeyboardAvoidingView is enabled.\n   *\n   * @default true\n   */\n  keyboardAvoidingViewEnabled?: boolean;\n  /**\n   * Optional callback that gets triggered when the sheet is closed.\n   */\n  onClose?: (hasPendingAction?: boolean) => void;\n  /**\n   * Optional callback that gets triggered when the sheet is opened.\n   */\n  onOpen?: (hasPendingAction?: boolean) => void;\n  /**\n   * Tailwind CSS classes for the dialog container.\n   */\n  twClassName?: string;\n} & ViewProps;\n\n/**\n * Ref handle for imperative control of the BottomSheetDialog.\n */\nexport type BottomSheetDialogRef = {\n  /**\n   * Imperatively close the dialog with an optional callback after animation completes.\n   */\n  onCloseDialog: (callback?: () => void) => void;\n  /**\n   * Imperatively open the dialog with an optional callback after animation completes.\n   */\n  onOpenDialog: (callback?: () => void) => void;\n};\n"]}
+{"version":3,"file":"BottomSheetDialog.types.mjs","sourceRoot":"","sources":["../../../src/components/BottomSheetDialog/BottomSheetDialog.types.ts"],"names":[],"mappings":"","sourcesContent":["// Third party dependencies.\nimport type { ViewProps } from 'react-native';\n\n/**\n * BottomSheetDialog component props.\n */\nexport type BottomSheetDialogProps = {\n  /**\n   * Optional content to display inside the dialog.\n   */\n  children?: React.ReactNode;\n  /**\n   * Optional prop to toggle full screen state of BottomSheetDialog.\n   *\n   * @default false\n   */\n  isFullscreen?: boolean;\n  /**\n   * Optional boolean that indicates if the sheet is swippable.\n   * This affects whether or not tapping on the overlay will dismiss\n   * the sheet as well, and whether the drag handle indicator is shown.\n   *\n   * @default true\n   */\n  isInteractable?: boolean;\n  /**\n   * Optional boolean that indicates if the KeyboardAvoidingView is enabled.\n   *\n   * @default true\n   */\n  keyboardAvoidingViewEnabled?: boolean;\n  /**\n   * Optional callback invoked when the sheet begins closing (before animation).\n   */\n  onDismissStart?: () => void;\n  /**\n   * Optional callback that gets triggered when the sheet is closed.\n   */\n  onClose?: (hasPendingAction?: boolean) => void;\n  /**\n   * Optional callback that gets triggered when the sheet is opened.\n   */\n  onOpen?: (hasPendingAction?: boolean) => void;\n  /**\n   * Tailwind CSS classes for the dialog container.\n   */\n  twClassName?: string;\n} & ViewProps;\n\n/**\n * Ref handle for imperative control of the BottomSheetDialog.\n */\nexport type BottomSheetDialogRef = {\n  /**\n   * Imperatively close the dialog with an optional callback after animation completes.\n   */\n  onCloseDialog: (callback?: () => void) => void;\n  /**\n   * Imperatively open the dialog with an optional callback after animation completes.\n   */\n  onOpenDialog: (callback?: () => void) => void;\n};\n"]}

package/dist/components/BottomSheetOverlay/BottomSheetOverlay.cjs

@@ -28,17 +28,33 @@ const design_system_twrnc_preset_1 = require("@metamask-previews/design-system-t
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const BottomSheetOverlay_constants_1 = require("./BottomSheetOverlay.constants.cjs");
-const BottomSheetOverlay = ({ style, twClassName, onPress, touchableOpacityProps, ...props }) => {
+exports.BottomSheetOverlay = (0, react_1.forwardRef)(({ style, twClassName, onPress, touchableOpacityProps, ...props }, ref) => {
     const tw = (0, design_system_twrnc_preset_1.useTailwind)();
     const opacityVal = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
-    (0, react_1.useEffect)(() => {
+    const fadeIn = (0, react_1.useCallback)(() => {
         react_native_1.Animated.timing(opacityVal, {
             toValue: 1,
             duration: BottomSheetOverlay_constants_1.DEFAULT_OVERLAY_ANIMATION_DURATION,
-            easing: react_native_1.Easing.linear,
+            easing: BottomSheetOverlay_constants_1.DEFAULT_OVERLAY_ANIMATION_EASING,
             useNativeDriver: true,
         }).start();
     }, [opacityVal]);
+    const fadeOut = (0, react_1.useCallback)((callback) => {
+        react_native_1.Animated.timing(opacityVal, {
+            toValue: 0,
+            duration: BottomSheetOverlay_constants_1.DEFAULT_OVERLAY_ANIMATION_DURATION,
+            easing: BottomSheetOverlay_constants_1.DEFAULT_OVERLAY_ANIMATION_EASING,
+            useNativeDriver: true,
+        }).start(({ finished }) => {
+            if (finished) {
+                callback?.();
+            }
+        });
+    }, [opacityVal]);
+    (0, react_1.useImperativeHandle)(ref, () => ({ fadeIn, fadeOut }), [fadeIn, fadeOut]);
+    (0, react_1.useEffect)(() => {
+        fadeIn();
+    }, [fadeIn]);
     return (<react_native_1.Animated.View style={[
             tw.style('absolute inset-0 bg-overlay-default', twClassName),
             style,
@@ -46,6 +62,6 @@ const BottomSheetOverlay = ({ style, twClassName, onPress, touchableOpacityProps
         ]} {...props}>
       {onPress && (<react_native_1.TouchableOpacity onPress={onPress} {...touchableOpacityProps} style={tw.style('flex-1')}/>)}
     </react_native_1.Animated.View>);
-};
-exports.BottomSheetOverlay = BottomSheetOverlay;
+});
+exports.BottomSheetOverlay.displayName = 'BottomSheetOverlay';
 //# sourceMappingURL=BottomSheetOverlay.cjs.map

package/dist/components/BottomSheetOverlay/BottomSheetOverlay.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetOverlay.cjs","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,8FAA4E;AAC5E,+CAAiD;AACjD,+CAAkE;AAElE,qFAAoF;AAG7E,MAAM,kBAAkB,GAAsC,CAAC,EACpE,KAAK,EACL,WAAW,EACX,OAAO,EACP,qBAAqB,EACrB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IACzB,MAAM,UAAU,GAAG,IAAA,cAAM,EAAC,IAAI,uBAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAEzD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,uBAAQ,CAAC,MAAM,CAAC,UAAU,EAAE;YAC1B,OAAO,EAAE,CAAC;YACV,QAAQ,EAAE,iEAAkC;YAC5C,MAAM,EAAE,qBAAM,CAAC,MAAM;YACrB,eAAe,EAAE,IAAI;SACtB,CAAC,CAAC,KAAK,EAAE,CAAC;IACb,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CACL,CAAC,uBAAQ,CAAC,IAAI,CACZ,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CAAC,qCAAqC,EAAE,WAAW,CAAC;YAC5D,KAAK;YACL,EAAE,OAAO,EAAE,UAAU,EAAE;SACxB,CAAC,CACF,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,OAAO,IAAI,CACV,CAAC,+BAAgB,CACf,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,IAAI,qBAAqB,CAAC,CAC1B,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,EAC1B,CACH,CACH;IAAA,EAAE,uBAAQ,CAAC,IAAI,CAAC,CACjB,CAAC;AACJ,CAAC,CAAC;AArCW,QAAA,kBAAkB,sBAqC7B","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useEffect, useRef } from 'react';\nimport { Animated, Easing, TouchableOpacity } from 'react-native';\n\nimport { DEFAULT_OVERLAY_ANIMATION_DURATION } from './BottomSheetOverlay.constants';\nimport { BottomSheetOverlayProps } from './BottomSheetOverlay.types';\n\nexport const BottomSheetOverlay: React.FC<BottomSheetOverlayProps> = ({\n  style,\n  twClassName,\n  onPress,\n  touchableOpacityProps,\n  ...props\n}) => {\n  const tw = useTailwind();\n  const opacityVal = useRef(new Animated.Value(0)).current;\n\n  useEffect(() => {\n    Animated.timing(opacityVal, {\n      toValue: 1,\n      duration: DEFAULT_OVERLAY_ANIMATION_DURATION,\n      easing: Easing.linear,\n      useNativeDriver: true,\n    }).start();\n  }, [opacityVal]);\n\n  return (\n    <Animated.View\n      style={[\n        tw.style('absolute inset-0 bg-overlay-default', twClassName),\n        style,\n        { opacity: opacityVal },\n      ]}\n      {...props}\n    >\n      {onPress && (\n        <TouchableOpacity\n          onPress={onPress}\n          {...touchableOpacityProps}\n          style={tw.style('flex-1')}\n        />\n      )}\n    </Animated.View>\n  );\n};\n"]}
+{"version":3,"file":"BottomSheetOverlay.cjs","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,8FAA4E;AAC5E,+CAMe;AACf,+CAA0D;AAE1D,qFAGwC;AAM3B,QAAA,kBAAkB,GAAG,IAAA,kBAAU,EAG1C,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,qBAAqB,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC1E,MAAM,EAAE,GAAG,IAAA,wCAAW,GAAE,CAAC;IACzB,MAAM,UAAU,GAAG,IAAA,cAAM,EAAC,IAAI,uBAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAEzD,MAAM,MAAM,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAC9B,uBAAQ,CAAC,MAAM,CAAC,UAAU,EAAE;YAC1B,OAAO,EAAE,CAAC;YACV,QAAQ,EAAE,iEAAkC;YAC5C,MAAM,EAAE,+DAAgC;YACxC,eAAe,EAAE,IAAI;SACtB,CAAC,CAAC,KAAK,EAAE,CAAC;IACb,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,OAAO,GAAG,IAAA,mBAAW,EACzB,CAAC,QAAqB,EAAE,EAAE;QACxB,uBAAQ,CAAC,MAAM,CAAC,UAAU,EAAE;YAC1B,OAAO,EAAE,CAAC;YACV,QAAQ,EAAE,iEAAkC;YAC5C,MAAM,EAAE,+DAAgC;YACxC,eAAe,EAAE,IAAI;SACtB,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;YACxB,IAAI,QAAQ,EAAE;gBACZ,QAAQ,EAAE,EAAE,CAAC;aACd;QACH,CAAC,CAAC,CAAC;IACL,CAAC,EACD,CAAC,UAAU,CAAC,CACb,CAAC;IAEF,IAAA,2BAAmB,EAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAEzE,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,EAAE,CAAC;IACX,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,CACL,CAAC,uBAAQ,CAAC,IAAI,CACZ,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CAAC,qCAAqC,EAAE,WAAW,CAAC;YAC5D,KAAK;YACL,EAAE,OAAO,EAAE,UAAU,EAAE;SACxB,CAAC,CACF,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,OAAO,IAAI,CACV,CAAC,+BAAgB,CACf,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,IAAI,qBAAqB,CAAC,CAC1B,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,EAC1B,CACH,CACH;IAAA,EAAE,uBAAQ,CAAC,IAAI,CAAC,CACjB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,0BAAkB,CAAC,WAAW,GAAG,oBAAoB,CAAC","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport { Animated, TouchableOpacity } from 'react-native';\n\nimport {\n  DEFAULT_OVERLAY_ANIMATION_DURATION,\n  DEFAULT_OVERLAY_ANIMATION_EASING,\n} from './BottomSheetOverlay.constants';\nimport type {\n  BottomSheetOverlayProps,\n  BottomSheetOverlayRef,\n} from './BottomSheetOverlay.types';\n\nexport const BottomSheetOverlay = forwardRef<\n  BottomSheetOverlayRef,\n  BottomSheetOverlayProps\n>(({ style, twClassName, onPress, touchableOpacityProps, ...props }, ref) => {\n  const tw = useTailwind();\n  const opacityVal = useRef(new Animated.Value(0)).current;\n\n  const fadeIn = useCallback(() => {\n    Animated.timing(opacityVal, {\n      toValue: 1,\n      duration: DEFAULT_OVERLAY_ANIMATION_DURATION,\n      easing: DEFAULT_OVERLAY_ANIMATION_EASING,\n      useNativeDriver: true,\n    }).start();\n  }, [opacityVal]);\n\n  const fadeOut = useCallback(\n    (callback?: () => void) => {\n      Animated.timing(opacityVal, {\n        toValue: 0,\n        duration: DEFAULT_OVERLAY_ANIMATION_DURATION,\n        easing: DEFAULT_OVERLAY_ANIMATION_EASING,\n        useNativeDriver: true,\n      }).start(({ finished }) => {\n        if (finished) {\n          callback?.();\n        }\n      });\n    },\n    [opacityVal],\n  );\n\n  useImperativeHandle(ref, () => ({ fadeIn, fadeOut }), [fadeIn, fadeOut]);\n\n  useEffect(() => {\n    fadeIn();\n  }, [fadeIn]);\n\n  return (\n    <Animated.View\n      style={[\n        tw.style('absolute inset-0 bg-overlay-default', twClassName),\n        style,\n        { opacity: opacityVal },\n      ]}\n      {...props}\n    >\n      {onPress && (\n        <TouchableOpacity\n          onPress={onPress}\n          {...touchableOpacityProps}\n          style={tw.style('flex-1')}\n        />\n      )}\n    </Animated.View>\n  );\n});\n\nBottomSheetOverlay.displayName = 'BottomSheetOverlay';\n"]}

package/dist/components/BottomSheetOverlay/BottomSheetOverlay.constants.cjs

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_OVERLAY_ANIMATION_DURATION = void 0;
+exports.DEFAULT_OVERLAY_ANIMATION_DURATION = exports.DEFAULT_OVERLAY_ANIMATION_EASING = void 0;
 const design_tokens_1 = require("@metamask-previews/design-tokens");
-// Defaults
-exports.DEFAULT_OVERLAY_ANIMATION_DURATION = design_tokens_1.AnimationDuration.Fast;
+const react_native_1 = require("react-native");
+/** Matches UIKit `curveEaseInOut` for a native modal scrim fade-in. */
+exports.DEFAULT_OVERLAY_ANIMATION_EASING = react_native_1.Easing.bezier(0.42, 0, 0.58, 1);
+exports.DEFAULT_OVERLAY_ANIMATION_DURATION = design_tokens_1.AnimationDuration.Regularly;
 //# sourceMappingURL=BottomSheetOverlay.constants.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetOverlay.constants.cjs","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.constants.ts"],"names":[],"mappings":";;;AAAA,oEAAqE;AAErE,WAAW;AACE,QAAA,kCAAkC,GAAG,iCAAiB,CAAC,IAAI,CAAC","sourcesContent":["import { AnimationDuration } from '@metamask-previews/design-tokens';\n\n// Defaults\nexport const DEFAULT_OVERLAY_ANIMATION_DURATION = AnimationDuration.Fast;\n"]}
+{"version":3,"file":"BottomSheetOverlay.constants.cjs","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.constants.ts"],"names":[],"mappings":";;;AAAA,oEAAqE;AACrE,+CAAsC;AAEtC,uEAAuE;AAC1D,QAAA,gCAAgC,GAAG,qBAAM,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;AAEnE,QAAA,kCAAkC,GAAG,iCAAiB,CAAC,SAAS,CAAC","sourcesContent":["import { AnimationDuration } from '@metamask-previews/design-tokens';\nimport { Easing } from 'react-native';\n\n/** Matches UIKit `curveEaseInOut` for a native modal scrim fade-in. */\nexport const DEFAULT_OVERLAY_ANIMATION_EASING = Easing.bezier(0.42, 0, 0.58, 1);\n\nexport const DEFAULT_OVERLAY_ANIMATION_DURATION = AnimationDuration.Regularly;\n"]}

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

@@ -1,3 +1,5 @@
 import { AnimationDuration } from "@metamask-previews/design-tokens";
-export declare const DEFAULT_OVERLAY_ANIMATION_DURATION = AnimationDuration.Fast;
+/** Matches UIKit `curveEaseInOut` for a native modal scrim fade-in. */
+export declare const DEFAULT_OVERLAY_ANIMATION_EASING: import("react-native").EasingFunction;
+export declare const DEFAULT_OVERLAY_ANIMATION_DURATION = AnimationDuration.Regularly;
 //# sourceMappingURL=BottomSheetOverlay.constants.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetOverlay.constants.d.cts","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,yCAAyC;AAGrE,eAAO,MAAM,kCAAkC,yBAAyB,CAAC"}
+{"version":3,"file":"BottomSheetOverlay.constants.d.cts","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,yCAAyC;AAGrE,uEAAuE;AACvE,eAAO,MAAM,gCAAgC,uCAAkC,CAAC;AAEhF,eAAO,MAAM,kCAAkC,8BAA8B,CAAC"}

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

@@ -1,3 +1,5 @@
 import { AnimationDuration } from "@metamask-previews/design-tokens";
-export declare const DEFAULT_OVERLAY_ANIMATION_DURATION = AnimationDuration.Fast;
+/** Matches UIKit `curveEaseInOut` for a native modal scrim fade-in. */
+export declare const DEFAULT_OVERLAY_ANIMATION_EASING: import("react-native").EasingFunction;
+export declare const DEFAULT_OVERLAY_ANIMATION_DURATION = AnimationDuration.Regularly;
 //# sourceMappingURL=BottomSheetOverlay.constants.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetOverlay.constants.d.mts","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,yCAAyC;AAGrE,eAAO,MAAM,kCAAkC,yBAAyB,CAAC"}
+{"version":3,"file":"BottomSheetOverlay.constants.d.mts","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,yCAAyC;AAGrE,uEAAuE;AACvE,eAAO,MAAM,gCAAgC,uCAAkC,CAAC;AAEhF,eAAO,MAAM,kCAAkC,8BAA8B,CAAC"}

package/dist/components/BottomSheetOverlay/BottomSheetOverlay.constants.mjs

@@ -1,4 +1,6 @@
 import { AnimationDuration } from "@metamask-previews/design-tokens";
-// Defaults
-export const DEFAULT_OVERLAY_ANIMATION_DURATION = AnimationDuration.Fast;
+import { Easing } from "react-native";
+/** Matches UIKit `curveEaseInOut` for a native modal scrim fade-in. */
+export const DEFAULT_OVERLAY_ANIMATION_EASING = Easing.bezier(0.42, 0, 0.58, 1);
+export const DEFAULT_OVERLAY_ANIMATION_DURATION = AnimationDuration.Regularly;
 //# sourceMappingURL=BottomSheetOverlay.constants.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetOverlay.constants.mjs","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,yCAAyC;AAErE,WAAW;AACX,MAAM,CAAC,MAAM,kCAAkC,GAAG,iBAAiB,CAAC,IAAI,CAAC","sourcesContent":["import { AnimationDuration } from '@metamask-previews/design-tokens';\n\n// Defaults\nexport const DEFAULT_OVERLAY_ANIMATION_DURATION = AnimationDuration.Fast;\n"]}
+{"version":3,"file":"BottomSheetOverlay.constants.mjs","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,yCAAyC;AACrE,OAAO,EAAE,MAAM,EAAE,qBAAqB;AAEtC,uEAAuE;AACvE,MAAM,CAAC,MAAM,gCAAgC,GAAG,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;AAEhF,MAAM,CAAC,MAAM,kCAAkC,GAAG,iBAAiB,CAAC,SAAS,CAAC","sourcesContent":["import { AnimationDuration } from '@metamask-previews/design-tokens';\nimport { Easing } from 'react-native';\n\n/** Matches UIKit `curveEaseInOut` for a native modal scrim fade-in. */\nexport const DEFAULT_OVERLAY_ANIMATION_EASING = Easing.bezier(0.42, 0, 0.58, 1);\n\nexport const DEFAULT_OVERLAY_ANIMATION_DURATION = AnimationDuration.Regularly;\n"]}

package/dist/components/BottomSheetOverlay/BottomSheetOverlay.d.cts

@@ -1,4 +1,8 @@
 import React from "react";
-import { BottomSheetOverlayProps } from "./BottomSheetOverlay.types.cjs";
-export declare const BottomSheetOverlay: React.FC<BottomSheetOverlayProps>;
+import type { BottomSheetOverlayRef } from "./BottomSheetOverlay.types.cjs";
+export declare const BottomSheetOverlay: React.ForwardRefExoticComponent<{
+    twClassName?: string | undefined;
+    onPress?: (() => void) | undefined;
+    touchableOpacityProps?: Omit<import("react-native").TouchableOpacityProps, "style" | "onPress"> | undefined;
+} & import("react-native").ViewProps & React.RefAttributes<BottomSheetOverlayRef>>;
 //# sourceMappingURL=BottomSheetOverlay.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetOverlay.d.cts","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,cAAc;AAIjD,OAAO,EAAE,uBAAuB,EAAE,uCAAmC;AAErE,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAqChE,CAAC"}
+{"version":3,"file":"BottomSheetOverlay.d.cts","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.tsx"],"names":[],"mappings":"AACA,OAAO,KAMN,cAAc;AAOf,OAAO,KAAK,EAEV,qBAAqB,EACtB,uCAAmC;AAEpC,eAAO,MAAM,kBAAkB;;;;kFAwD7B,CAAC"}

package/dist/components/BottomSheetOverlay/BottomSheetOverlay.d.mts

@@ -1,4 +1,8 @@
 import React from "react";
-import { BottomSheetOverlayProps } from "./BottomSheetOverlay.types.mjs";
-export declare const BottomSheetOverlay: React.FC<BottomSheetOverlayProps>;
+import type { BottomSheetOverlayRef } from "./BottomSheetOverlay.types.mjs";
+export declare const BottomSheetOverlay: React.ForwardRefExoticComponent<{
+    twClassName?: string | undefined;
+    onPress?: (() => void) | undefined;
+    touchableOpacityProps?: Omit<import("react-native").TouchableOpacityProps, "style" | "onPress"> | undefined;
+} & import("react-native").ViewProps & React.RefAttributes<BottomSheetOverlayRef>>;
 //# sourceMappingURL=BottomSheetOverlay.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetOverlay.d.mts","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,cAAc;AAIjD,OAAO,EAAE,uBAAuB,EAAE,uCAAmC;AAErE,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAqChE,CAAC"}
+{"version":3,"file":"BottomSheetOverlay.d.mts","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.tsx"],"names":[],"mappings":"AACA,OAAO,KAMN,cAAc;AAOf,OAAO,KAAK,EAEV,qBAAqB,EACtB,uCAAmC;AAEpC,eAAO,MAAM,kBAAkB;;;;kFAwD7B,CAAC"}

package/dist/components/BottomSheetOverlay/BottomSheetOverlay.mjs

@@ -5,21 +5,37 @@ function $importDefault(module) {
     return module;
 }
 import { useTailwind } from "@metamask-previews/design-system-twrnc-preset";
-import $React, { useEffect, useRef } from "react";
+import $React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from "react";
 const React = $importDefault($React);
-import { Animated, Easing, TouchableOpacity } from "react-native";
-import { DEFAULT_OVERLAY_ANIMATION_DURATION } from "./BottomSheetOverlay.constants.mjs";
-export const BottomSheetOverlay = ({ style, twClassName, onPress, touchableOpacityProps, ...props }) => {
+import { Animated, TouchableOpacity } from "react-native";
+import { DEFAULT_OVERLAY_ANIMATION_DURATION, DEFAULT_OVERLAY_ANIMATION_EASING } from "./BottomSheetOverlay.constants.mjs";
+export const BottomSheetOverlay = forwardRef(({ style, twClassName, onPress, touchableOpacityProps, ...props }, ref) => {
     const tw = useTailwind();
     const opacityVal = useRef(new Animated.Value(0)).current;
-    useEffect(() => {
+    const fadeIn = useCallback(() => {
         Animated.timing(opacityVal, {
             toValue: 1,
             duration: DEFAULT_OVERLAY_ANIMATION_DURATION,
-            easing: Easing.linear,
+            easing: DEFAULT_OVERLAY_ANIMATION_EASING,
             useNativeDriver: true,
         }).start();
     }, [opacityVal]);
+    const fadeOut = useCallback((callback) => {
+        Animated.timing(opacityVal, {
+            toValue: 0,
+            duration: DEFAULT_OVERLAY_ANIMATION_DURATION,
+            easing: DEFAULT_OVERLAY_ANIMATION_EASING,
+            useNativeDriver: true,
+        }).start(({ finished }) => {
+            if (finished) {
+                callback?.();
+            }
+        });
+    }, [opacityVal]);
+    useImperativeHandle(ref, () => ({ fadeIn, fadeOut }), [fadeIn, fadeOut]);
+    useEffect(() => {
+        fadeIn();
+    }, [fadeIn]);
     return (<Animated.View style={[
             tw.style('absolute inset-0 bg-overlay-default', twClassName),
             style,
@@ -27,5 +43,6 @@ export const BottomSheetOverlay = ({ style, twClassName, onPress, touchableOpaci
         ]} {...props}>
       {onPress && (<TouchableOpacity onPress={onPress} {...touchableOpacityProps} style={tw.style('flex-1')}/>)}
     </Animated.View>);
-};
+});
+BottomSheetOverlay.displayName = 'BottomSheetOverlay';
 //# sourceMappingURL=BottomSheetOverlay.mjs.map

package/dist/components/BottomSheetOverlay/BottomSheetOverlay.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetOverlay.mjs","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,QAAO,EAAE,SAAS,EAAE,MAAM,EAAE,cAAc;;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,gBAAgB,EAAE,qBAAqB;AAElE,OAAO,EAAE,kCAAkC,EAAE,2CAAuC;AAGpF,MAAM,CAAC,MAAM,kBAAkB,GAAsC,CAAC,EACpE,KAAK,EACL,WAAW,EACX,OAAO,EACP,qBAAqB,EACrB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IACzB,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAEzD,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,MAAM,CAAC,UAAU,EAAE;YAC1B,OAAO,EAAE,CAAC;YACV,QAAQ,EAAE,kCAAkC;YAC5C,MAAM,EAAE,MAAM,CAAC,MAAM;YACrB,eAAe,EAAE,IAAI;SACtB,CAAC,CAAC,KAAK,EAAE,CAAC;IACb,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,CACL,CAAC,QAAQ,CAAC,IAAI,CACZ,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CAAC,qCAAqC,EAAE,WAAW,CAAC;YAC5D,KAAK;YACL,EAAE,OAAO,EAAE,UAAU,EAAE;SACxB,CAAC,CACF,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,OAAO,IAAI,CACV,CAAC,gBAAgB,CACf,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,IAAI,qBAAqB,CAAC,CAC1B,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,EAC1B,CACH,CACH;IAAA,EAAE,QAAQ,CAAC,IAAI,CAAC,CACjB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, { useEffect, useRef } from 'react';\nimport { Animated, Easing, TouchableOpacity } from 'react-native';\n\nimport { DEFAULT_OVERLAY_ANIMATION_DURATION } from './BottomSheetOverlay.constants';\nimport { BottomSheetOverlayProps } from './BottomSheetOverlay.types';\n\nexport const BottomSheetOverlay: React.FC<BottomSheetOverlayProps> = ({\n  style,\n  twClassName,\n  onPress,\n  touchableOpacityProps,\n  ...props\n}) => {\n  const tw = useTailwind();\n  const opacityVal = useRef(new Animated.Value(0)).current;\n\n  useEffect(() => {\n    Animated.timing(opacityVal, {\n      toValue: 1,\n      duration: DEFAULT_OVERLAY_ANIMATION_DURATION,\n      easing: Easing.linear,\n      useNativeDriver: true,\n    }).start();\n  }, [opacityVal]);\n\n  return (\n    <Animated.View\n      style={[\n        tw.style('absolute inset-0 bg-overlay-default', twClassName),\n        style,\n        { opacity: opacityVal },\n      ]}\n      {...props}\n    >\n      {onPress && (\n        <TouchableOpacity\n          onPress={onPress}\n          {...touchableOpacityProps}\n          style={tw.style('flex-1')}\n        />\n      )}\n    </Animated.View>\n  );\n};\n"]}
+{"version":3,"file":"BottomSheetOverlay.mjs","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.tsx"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,sDAAsD;AAC5E,OAAO,QAAO,EACZ,UAAU,EACV,WAAW,EACX,SAAS,EACT,mBAAmB,EACnB,MAAM,EACP,cAAc;;AACf,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,qBAAqB;AAE1D,OAAO,EACL,kCAAkC,EAClC,gCAAgC,EACjC,2CAAuC;AAMxC,MAAM,CAAC,MAAM,kBAAkB,GAAG,UAAU,CAG1C,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,qBAAqB,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC1E,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IACzB,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAEzD,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9B,QAAQ,CAAC,MAAM,CAAC,UAAU,EAAE;YAC1B,OAAO,EAAE,CAAC;YACV,QAAQ,EAAE,kCAAkC;YAC5C,MAAM,EAAE,gCAAgC;YACxC,eAAe,EAAE,IAAI;SACtB,CAAC,CAAC,KAAK,EAAE,CAAC;IACb,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,OAAO,GAAG,WAAW,CACzB,CAAC,QAAqB,EAAE,EAAE;QACxB,QAAQ,CAAC,MAAM,CAAC,UAAU,EAAE;YAC1B,OAAO,EAAE,CAAC;YACV,QAAQ,EAAE,kCAAkC;YAC5C,MAAM,EAAE,gCAAgC;YACxC,eAAe,EAAE,IAAI;SACtB,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;YACxB,IAAI,QAAQ,EAAE;gBACZ,QAAQ,EAAE,EAAE,CAAC;aACd;QACH,CAAC,CAAC,CAAC;IACL,CAAC,EACD,CAAC,UAAU,CAAC,CACb,CAAC;IAEF,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAEzE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,EAAE,CAAC;IACX,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,CACL,CAAC,QAAQ,CAAC,IAAI,CACZ,KAAK,CAAC,CAAC;YACL,EAAE,CAAC,KAAK,CAAC,qCAAqC,EAAE,WAAW,CAAC;YAC5D,KAAK;YACL,EAAE,OAAO,EAAE,UAAU,EAAE;SACxB,CAAC,CACF,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,OAAO,IAAI,CACV,CAAC,gBAAgB,CACf,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,IAAI,qBAAqB,CAAC,CAC1B,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,EAC1B,CACH,CACH;IAAA,EAAE,QAAQ,CAAC,IAAI,CAAC,CACjB,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,WAAW,GAAG,oBAAoB,CAAC","sourcesContent":["import { useTailwind } from '@metamask-previews/design-system-twrnc-preset';\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport { Animated, TouchableOpacity } from 'react-native';\n\nimport {\n  DEFAULT_OVERLAY_ANIMATION_DURATION,\n  DEFAULT_OVERLAY_ANIMATION_EASING,\n} from './BottomSheetOverlay.constants';\nimport type {\n  BottomSheetOverlayProps,\n  BottomSheetOverlayRef,\n} from './BottomSheetOverlay.types';\n\nexport const BottomSheetOverlay = forwardRef<\n  BottomSheetOverlayRef,\n  BottomSheetOverlayProps\n>(({ style, twClassName, onPress, touchableOpacityProps, ...props }, ref) => {\n  const tw = useTailwind();\n  const opacityVal = useRef(new Animated.Value(0)).current;\n\n  const fadeIn = useCallback(() => {\n    Animated.timing(opacityVal, {\n      toValue: 1,\n      duration: DEFAULT_OVERLAY_ANIMATION_DURATION,\n      easing: DEFAULT_OVERLAY_ANIMATION_EASING,\n      useNativeDriver: true,\n    }).start();\n  }, [opacityVal]);\n\n  const fadeOut = useCallback(\n    (callback?: () => void) => {\n      Animated.timing(opacityVal, {\n        toValue: 0,\n        duration: DEFAULT_OVERLAY_ANIMATION_DURATION,\n        easing: DEFAULT_OVERLAY_ANIMATION_EASING,\n        useNativeDriver: true,\n      }).start(({ finished }) => {\n        if (finished) {\n          callback?.();\n        }\n      });\n    },\n    [opacityVal],\n  );\n\n  useImperativeHandle(ref, () => ({ fadeIn, fadeOut }), [fadeIn, fadeOut]);\n\n  useEffect(() => {\n    fadeIn();\n  }, [fadeIn]);\n\n  return (\n    <Animated.View\n      style={[\n        tw.style('absolute inset-0 bg-overlay-default', twClassName),\n        style,\n        { opacity: opacityVal },\n      ]}\n      {...props}\n    >\n      {onPress && (\n        <TouchableOpacity\n          onPress={onPress}\n          {...touchableOpacityProps}\n          style={tw.style('flex-1')}\n        />\n      )}\n    </Animated.View>\n  );\n});\n\nBottomSheetOverlay.displayName = 'BottomSheetOverlay';\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetOverlay.types.cjs","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.types.ts"],"names":[],"mappings":"","sourcesContent":["// Third party dependencies.\nimport type { TouchableOpacityProps, ViewProps } from 'react-native';\n\n/**\n * Overlay component props.\n */\nexport type BottomSheetOverlayProps = {\n  /**\n   * Tailwind CSS classes for the overlay container.\n   */\n  twClassName?: string;\n  /**\n   * Callback function triggered when the overlay is pressed.\n   */\n  onPress?: () => void;\n  /**\n   * Props spread to the TouchableOpacity component (e.g., testID for the button).\n   * Note: onPress should be passed as a top-level prop, not through this object.\n   */\n  touchableOpacityProps?: Omit<TouchableOpacityProps, 'onPress' | 'style'>;\n} & ViewProps;\n"]}
+{"version":3,"file":"BottomSheetOverlay.types.cjs","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.types.ts"],"names":[],"mappings":"","sourcesContent":["// Third party dependencies.\nimport type { TouchableOpacityProps, ViewProps } from 'react-native';\n\n/**\n * Overlay component props.\n */\nexport type BottomSheetOverlayProps = {\n  /**\n   * Tailwind CSS classes for the overlay container.\n   */\n  twClassName?: string;\n  /**\n   * Callback function triggered when the overlay is pressed.\n   */\n  onPress?: () => void;\n  /**\n   * Props spread to the TouchableOpacity component (e.g., testID for the button).\n   * Note: onPress should be passed as a top-level prop, not through this object.\n   */\n  touchableOpacityProps?: Omit<TouchableOpacityProps, 'onPress' | 'style'>;\n} & ViewProps;\n\n/**\n * Ref handle for imperative control of overlay fade animations.\n */\nexport type BottomSheetOverlayRef = {\n  /**\n   * Fade the overlay in.\n   */\n  fadeIn: () => void;\n  /**\n   * Fade the overlay out with an optional callback after animation completes.\n   */\n  fadeOut: (callback?: () => void) => void;\n};\n"]}

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

@@ -17,4 +17,17 @@ export type BottomSheetOverlayProps = {
      */
     touchableOpacityProps?: Omit<TouchableOpacityProps, 'onPress' | 'style'>;
 } & ViewProps;
+/**
+ * Ref handle for imperative control of overlay fade animations.
+ */
+export type BottomSheetOverlayRef = {
+    /**
+     * Fade the overlay in.
+     */
+    fadeIn: () => void;
+    /**
+     * Fade the overlay out with an optional callback after animation completes.
+     */
+    fadeOut: (callback?: () => void) => void;
+};
 //# sourceMappingURL=BottomSheetOverlay.types.d.cts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetOverlay.types.d.cts","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,qBAAqB;AAErE;;GAEG;AACH,MAAM,MAAM,uBAAuB,GAAG;IACpC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,IAAI,CAAC,qBAAqB,EAAE,SAAS,GAAG,OAAO,CAAC,CAAC;CAC1E,GAAG,SAAS,CAAC"}
+{"version":3,"file":"BottomSheetOverlay.types.d.cts","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,qBAAqB;AAErE;;GAEG;AACH,MAAM,MAAM,uBAAuB,GAAG;IACpC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,IAAI,CAAC,qBAAqB,EAAE,SAAS,GAAG,OAAO,CAAC,CAAC;CAC1E,GAAG,SAAS,CAAC;AAEd;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB;;OAEG;IACH,OAAO,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;CAC1C,CAAC"}

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

@@ -17,4 +17,17 @@ export type BottomSheetOverlayProps = {
      */
     touchableOpacityProps?: Omit<TouchableOpacityProps, 'onPress' | 'style'>;
 } & ViewProps;
+/**
+ * Ref handle for imperative control of overlay fade animations.
+ */
+export type BottomSheetOverlayRef = {
+    /**
+     * Fade the overlay in.
+     */
+    fadeIn: () => void;
+    /**
+     * Fade the overlay out with an optional callback after animation completes.
+     */
+    fadeOut: (callback?: () => void) => void;
+};
 //# sourceMappingURL=BottomSheetOverlay.types.d.mts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetOverlay.types.d.mts","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,qBAAqB;AAErE;;GAEG;AACH,MAAM,MAAM,uBAAuB,GAAG;IACpC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,IAAI,CAAC,qBAAqB,EAAE,SAAS,GAAG,OAAO,CAAC,CAAC;CAC1E,GAAG,SAAS,CAAC"}
+{"version":3,"file":"BottomSheetOverlay.types.d.mts","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,qBAAqB;AAErE;;GAEG;AACH,MAAM,MAAM,uBAAuB,GAAG;IACpC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,IAAI,CAAC,qBAAqB,EAAE,SAAS,GAAG,OAAO,CAAC,CAAC;CAC1E,GAAG,SAAS,CAAC;AAEd;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB;;OAEG;IACH,OAAO,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;CAC1C,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetOverlay.types.mjs","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.types.ts"],"names":[],"mappings":"","sourcesContent":["// Third party dependencies.\nimport type { TouchableOpacityProps, ViewProps } from 'react-native';\n\n/**\n * Overlay component props.\n */\nexport type BottomSheetOverlayProps = {\n  /**\n   * Tailwind CSS classes for the overlay container.\n   */\n  twClassName?: string;\n  /**\n   * Callback function triggered when the overlay is pressed.\n   */\n  onPress?: () => void;\n  /**\n   * Props spread to the TouchableOpacity component (e.g., testID for the button).\n   * Note: onPress should be passed as a top-level prop, not through this object.\n   */\n  touchableOpacityProps?: Omit<TouchableOpacityProps, 'onPress' | 'style'>;\n} & ViewProps;\n"]}
+{"version":3,"file":"BottomSheetOverlay.types.mjs","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/BottomSheetOverlay.types.ts"],"names":[],"mappings":"","sourcesContent":["// Third party dependencies.\nimport type { TouchableOpacityProps, ViewProps } from 'react-native';\n\n/**\n * Overlay component props.\n */\nexport type BottomSheetOverlayProps = {\n  /**\n   * Tailwind CSS classes for the overlay container.\n   */\n  twClassName?: string;\n  /**\n   * Callback function triggered when the overlay is pressed.\n   */\n  onPress?: () => void;\n  /**\n   * Props spread to the TouchableOpacity component (e.g., testID for the button).\n   * Note: onPress should be passed as a top-level prop, not through this object.\n   */\n  touchableOpacityProps?: Omit<TouchableOpacityProps, 'onPress' | 'style'>;\n} & ViewProps;\n\n/**\n * Ref handle for imperative control of overlay fade animations.\n */\nexport type BottomSheetOverlayRef = {\n  /**\n   * Fade the overlay in.\n   */\n  fadeIn: () => void;\n  /**\n   * Fade the overlay out with an optional callback after animation completes.\n   */\n  fadeOut: (callback?: () => void) => void;\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/index.ts"],"names":[],"mappings":";;;AAAA,+DAA0D;AAAjD,wHAAA,kBAAkB,OAAA","sourcesContent":["export { BottomSheetOverlay } from './BottomSheetOverlay';\nexport type { BottomSheetOverlayProps } from './BottomSheetOverlay.types';\n"]}
+{"version":3,"file":"index.cjs","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/index.ts"],"names":[],"mappings":";;;AAAA,+DAA0D;AAAjD,wHAAA,kBAAkB,OAAA","sourcesContent":["export { BottomSheetOverlay } from './BottomSheetOverlay';\nexport type {\n  BottomSheetOverlayProps,\n  BottomSheetOverlayRef,\n} from './BottomSheetOverlay.types';\n"]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,iCAA6B;AAC1D,YAAY,EAAE,uBAAuB,EAAE,uCAAmC"}
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,iCAA6B;AAC1D,YAAY,EACV,uBAAuB,EACvB,qBAAqB,GACtB,uCAAmC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,iCAA6B;AAC1D,YAAY,EAAE,uBAAuB,EAAE,uCAAmC"}
+{"version":3,"file":"index.d.mts","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,iCAA6B;AAC1D,YAAY,EACV,uBAAuB,EACvB,qBAAqB,GACtB,uCAAmC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,iCAA6B","sourcesContent":["export { BottomSheetOverlay } from './BottomSheetOverlay';\nexport type { BottomSheetOverlayProps } from './BottomSheetOverlay.types';\n"]}
+{"version":3,"file":"index.mjs","sourceRoot":"","sources":["../../../src/components/BottomSheetOverlay/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,iCAA6B","sourcesContent":["export { BottomSheetOverlay } from './BottomSheetOverlay';\nexport type {\n  BottomSheetOverlayProps,\n  BottomSheetOverlayRef,\n} from './BottomSheetOverlay.types';\n"]}

package/dist/components/Tag/Tag.constants.cjs

@@ -10,14 +10,14 @@ exports.MAP_TAG_SEVERITY_BACKGROUND = {
     [design_system_shared_1.TagSeverity.Info]: design_system_shared_1.BoxBackgroundColor.InfoMuted,
 };
 exports.MAP_TAG_SEVERITY_TEXT_COLOR = {
-    [design_system_shared_1.TagSeverity.Neutral]: design_system_shared_1.TextColor.TextDefault,
+    [design_system_shared_1.TagSeverity.Neutral]: design_system_shared_1.TextColor.TextAlternative,
     [design_system_shared_1.TagSeverity.Success]: design_system_shared_1.TextColor.SuccessDefault,
     [design_system_shared_1.TagSeverity.Danger]: design_system_shared_1.TextColor.ErrorDefault,
     [design_system_shared_1.TagSeverity.Warning]: design_system_shared_1.TextColor.WarningDefault,
     [design_system_shared_1.TagSeverity.Info]: design_system_shared_1.TextColor.InfoDefault,
 };
 exports.MAP_TAG_SEVERITY_ICON_COLOR = {
-    [design_system_shared_1.TagSeverity.Neutral]: design_system_shared_1.IconColor.IconDefault,
+    [design_system_shared_1.TagSeverity.Neutral]: design_system_shared_1.IconColor.IconAlternative,
     [design_system_shared_1.TagSeverity.Success]: design_system_shared_1.IconColor.SuccessDefault,
     [design_system_shared_1.TagSeverity.Danger]: design_system_shared_1.IconColor.ErrorDefault,
     [design_system_shared_1.TagSeverity.Warning]: design_system_shared_1.IconColor.WarningDefault,

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.constants.cjs","sourceRoot":"","sources":["../../../src/components/Tag/Tag.constants.ts"],"names":[],"mappings":";;;AAAA,kFAKiD;AAEpC,QAAA,2BAA2B,GAGpC;IACF,CAAC,kCAAW,CAAC,OAAO,CAAC,EAAE,yCAAkB,CAAC,eAAe;IACzD,CAAC,kCAAW,CAAC,OAAO,CAAC,EAAE,yCAAkB,CAAC,YAAY;IACtD,CAAC,kCAAW,CAAC,MAAM,CAAC,EAAE,yCAAkB,CAAC,UAAU;IACnD,CAAC,kCAAW,CAAC,OAAO,CAAC,EAAE,yCAAkB,CAAC,YAAY;IACtD,CAAC,kCAAW,CAAC,IAAI,CAAC,EAAE,yCAAkB,CAAC,SAAS;CACjD,CAAC;AAEW,QAAA,2BAA2B,GAAmC;IACzE,CAAC,kCAAW,CAAC,OAAO,CAAC,EAAE,gCAAS,CAAC,WAAW;IAC5C,CAAC,kCAAW,CAAC,OAAO,CAAC,EAAE,gCAAS,CAAC,cAAc;IAC/C,CAAC,kCAAW,CAAC,MAAM,CAAC,EAAE,gCAAS,CAAC,YAAY;IAC5C,CAAC,kCAAW,CAAC,OAAO,CAAC,EAAE,gCAAS,CAAC,cAAc;IAC/C,CAAC,kCAAW,CAAC,IAAI,CAAC,EAAE,gCAAS,CAAC,WAAW;CAC1C,CAAC;AAEW,QAAA,2BAA2B,GAAmC;IACzE,CAAC,kCAAW,CAAC,OAAO,CAAC,EAAE,gCAAS,CAAC,WAAW;IAC5C,CAAC,kCAAW,CAAC,OAAO,CAAC,EAAE,gCAAS,CAAC,cAAc;IAC/C,CAAC,kCAAW,CAAC,MAAM,CAAC,EAAE,gCAAS,CAAC,YAAY;IAC5C,CAAC,kCAAW,CAAC,OAAO,CAAC,EAAE,gCAAS,CAAC,cAAc;IAC/C,CAAC,kCAAW,CAAC,IAAI,CAAC,EAAE,gCAAS,CAAC,WAAW;CAC1C,CAAC","sourcesContent":["import {\n  BoxBackgroundColor,\n  IconColor,\n  TagSeverity,\n  TextColor,\n} from '@metamask-previews/design-system-shared';\n\nexport const MAP_TAG_SEVERITY_BACKGROUND: Record<\n  TagSeverity,\n  BoxBackgroundColor\n> = {\n  [TagSeverity.Neutral]: BoxBackgroundColor.BackgroundMuted,\n  [TagSeverity.Success]: BoxBackgroundColor.SuccessMuted,\n  [TagSeverity.Danger]: BoxBackgroundColor.ErrorMuted,\n  [TagSeverity.Warning]: BoxBackgroundColor.WarningMuted,\n  [TagSeverity.Info]: BoxBackgroundColor.InfoMuted,\n};\n\nexport const MAP_TAG_SEVERITY_TEXT_COLOR: Record<TagSeverity, TextColor> = {\n  [TagSeverity.Neutral]: TextColor.TextDefault,\n  [TagSeverity.Success]: TextColor.SuccessDefault,\n  [TagSeverity.Danger]: TextColor.ErrorDefault,\n  [TagSeverity.Warning]: TextColor.WarningDefault,\n  [TagSeverity.Info]: TextColor.InfoDefault,\n};\n\nexport const MAP_TAG_SEVERITY_ICON_COLOR: Record<TagSeverity, IconColor> = {\n  [TagSeverity.Neutral]: IconColor.IconDefault,\n  [TagSeverity.Success]: IconColor.SuccessDefault,\n  [TagSeverity.Danger]: IconColor.ErrorDefault,\n  [TagSeverity.Warning]: IconColor.WarningDefault,\n  [TagSeverity.Info]: IconColor.InfoDefault,\n};\n"]}
+{"version":3,"file":"Tag.constants.cjs","sourceRoot":"","sources":["../../../src/components/Tag/Tag.constants.ts"],"names":[],"mappings":";;;AAAA,kFAKiD;AAEpC,QAAA,2BAA2B,GAGpC;IACF,CAAC,kCAAW,CAAC,OAAO,CAAC,EAAE,yCAAkB,CAAC,eAAe;IACzD,CAAC,kCAAW,CAAC,OAAO,CAAC,EAAE,yCAAkB,CAAC,YAAY;IACtD,CAAC,kCAAW,CAAC,MAAM,CAAC,EAAE,yCAAkB,CAAC,UAAU;IACnD,CAAC,kCAAW,CAAC,OAAO,CAAC,EAAE,yCAAkB,CAAC,YAAY;IACtD,CAAC,kCAAW,CAAC,IAAI,CAAC,EAAE,yCAAkB,CAAC,SAAS;CACjD,CAAC;AAEW,QAAA,2BAA2B,GAAmC;IACzE,CAAC,kCAAW,CAAC,OAAO,CAAC,EAAE,gCAAS,CAAC,eAAe;IAChD,CAAC,kCAAW,CAAC,OAAO,CAAC,EAAE,gCAAS,CAAC,cAAc;IAC/C,CAAC,kCAAW,CAAC,MAAM,CAAC,EAAE,gCAAS,CAAC,YAAY;IAC5C,CAAC,kCAAW,CAAC,OAAO,CAAC,EAAE,gCAAS,CAAC,cAAc;IAC/C,CAAC,kCAAW,CAAC,IAAI,CAAC,EAAE,gCAAS,CAAC,WAAW;CAC1C,CAAC;AAEW,QAAA,2BAA2B,GAAmC;IACzE,CAAC,kCAAW,CAAC,OAAO,CAAC,EAAE,gCAAS,CAAC,eAAe;IAChD,CAAC,kCAAW,CAAC,OAAO,CAAC,EAAE,gCAAS,CAAC,cAAc;IAC/C,CAAC,kCAAW,CAAC,MAAM,CAAC,EAAE,gCAAS,CAAC,YAAY;IAC5C,CAAC,kCAAW,CAAC,OAAO,CAAC,EAAE,gCAAS,CAAC,cAAc;IAC/C,CAAC,kCAAW,CAAC,IAAI,CAAC,EAAE,gCAAS,CAAC,WAAW;CAC1C,CAAC","sourcesContent":["import {\n  BoxBackgroundColor,\n  IconColor,\n  TagSeverity,\n  TextColor,\n} from '@metamask-previews/design-system-shared';\n\nexport const MAP_TAG_SEVERITY_BACKGROUND: Record<\n  TagSeverity,\n  BoxBackgroundColor\n> = {\n  [TagSeverity.Neutral]: BoxBackgroundColor.BackgroundMuted,\n  [TagSeverity.Success]: BoxBackgroundColor.SuccessMuted,\n  [TagSeverity.Danger]: BoxBackgroundColor.ErrorMuted,\n  [TagSeverity.Warning]: BoxBackgroundColor.WarningMuted,\n  [TagSeverity.Info]: BoxBackgroundColor.InfoMuted,\n};\n\nexport const MAP_TAG_SEVERITY_TEXT_COLOR: Record<TagSeverity, TextColor> = {\n  [TagSeverity.Neutral]: TextColor.TextAlternative,\n  [TagSeverity.Success]: TextColor.SuccessDefault,\n  [TagSeverity.Danger]: TextColor.ErrorDefault,\n  [TagSeverity.Warning]: TextColor.WarningDefault,\n  [TagSeverity.Info]: TextColor.InfoDefault,\n};\n\nexport const MAP_TAG_SEVERITY_ICON_COLOR: Record<TagSeverity, IconColor> = {\n  [TagSeverity.Neutral]: IconColor.IconAlternative,\n  [TagSeverity.Success]: IconColor.SuccessDefault,\n  [TagSeverity.Danger]: IconColor.ErrorDefault,\n  [TagSeverity.Warning]: IconColor.WarningDefault,\n  [TagSeverity.Info]: IconColor.InfoDefault,\n};\n"]}

package/dist/components/Tag/Tag.constants.mjs

@@ -7,14 +7,14 @@ export const MAP_TAG_SEVERITY_BACKGROUND = {
     [TagSeverity.Info]: BoxBackgroundColor.InfoMuted,
 };
 export const MAP_TAG_SEVERITY_TEXT_COLOR = {
-    [TagSeverity.Neutral]: TextColor.TextDefault,
+    [TagSeverity.Neutral]: TextColor.TextAlternative,
     [TagSeverity.Success]: TextColor.SuccessDefault,
     [TagSeverity.Danger]: TextColor.ErrorDefault,
     [TagSeverity.Warning]: TextColor.WarningDefault,
     [TagSeverity.Info]: TextColor.InfoDefault,
 };
 export const MAP_TAG_SEVERITY_ICON_COLOR = {
-    [TagSeverity.Neutral]: IconColor.IconDefault,
+    [TagSeverity.Neutral]: IconColor.IconAlternative,
     [TagSeverity.Success]: IconColor.SuccessDefault,
     [TagSeverity.Danger]: IconColor.ErrorDefault,
     [TagSeverity.Warning]: IconColor.WarningDefault,

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.constants.mjs","sourceRoot":"","sources":["../../../src/components/Tag/Tag.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,SAAS,EACT,WAAW,EACX,SAAS,EACV,gDAAgD;AAEjD,MAAM,CAAC,MAAM,2BAA2B,GAGpC;IACF,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,kBAAkB,CAAC,eAAe;IACzD,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,kBAAkB,CAAC,YAAY;IACtD,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,kBAAkB,CAAC,UAAU;IACnD,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,kBAAkB,CAAC,YAAY;IACtD,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,kBAAkB,CAAC,SAAS;CACjD,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAmC;IACzE,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,WAAW;IAC5C,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,cAAc;IAC/C,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC,YAAY;IAC5C,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,cAAc;IAC/C,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,WAAW;CAC1C,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAmC;IACzE,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,WAAW;IAC5C,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,cAAc;IAC/C,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC,YAAY;IAC5C,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,cAAc;IAC/C,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,WAAW;CAC1C,CAAC","sourcesContent":["import {\n  BoxBackgroundColor,\n  IconColor,\n  TagSeverity,\n  TextColor,\n} from '@metamask-previews/design-system-shared';\n\nexport const MAP_TAG_SEVERITY_BACKGROUND: Record<\n  TagSeverity,\n  BoxBackgroundColor\n> = {\n  [TagSeverity.Neutral]: BoxBackgroundColor.BackgroundMuted,\n  [TagSeverity.Success]: BoxBackgroundColor.SuccessMuted,\n  [TagSeverity.Danger]: BoxBackgroundColor.ErrorMuted,\n  [TagSeverity.Warning]: BoxBackgroundColor.WarningMuted,\n  [TagSeverity.Info]: BoxBackgroundColor.InfoMuted,\n};\n\nexport const MAP_TAG_SEVERITY_TEXT_COLOR: Record<TagSeverity, TextColor> = {\n  [TagSeverity.Neutral]: TextColor.TextDefault,\n  [TagSeverity.Success]: TextColor.SuccessDefault,\n  [TagSeverity.Danger]: TextColor.ErrorDefault,\n  [TagSeverity.Warning]: TextColor.WarningDefault,\n  [TagSeverity.Info]: TextColor.InfoDefault,\n};\n\nexport const MAP_TAG_SEVERITY_ICON_COLOR: Record<TagSeverity, IconColor> = {\n  [TagSeverity.Neutral]: IconColor.IconDefault,\n  [TagSeverity.Success]: IconColor.SuccessDefault,\n  [TagSeverity.Danger]: IconColor.ErrorDefault,\n  [TagSeverity.Warning]: IconColor.WarningDefault,\n  [TagSeverity.Info]: IconColor.InfoDefault,\n};\n"]}
+{"version":3,"file":"Tag.constants.mjs","sourceRoot":"","sources":["../../../src/components/Tag/Tag.constants.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,SAAS,EACT,WAAW,EACX,SAAS,EACV,gDAAgD;AAEjD,MAAM,CAAC,MAAM,2BAA2B,GAGpC;IACF,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,kBAAkB,CAAC,eAAe;IACzD,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,kBAAkB,CAAC,YAAY;IACtD,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,kBAAkB,CAAC,UAAU;IACnD,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,kBAAkB,CAAC,YAAY;IACtD,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,kBAAkB,CAAC,SAAS;CACjD,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAmC;IACzE,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,eAAe;IAChD,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,cAAc;IAC/C,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC,YAAY;IAC5C,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,cAAc;IAC/C,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,WAAW;CAC1C,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAmC;IACzE,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,eAAe;IAChD,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,cAAc;IAC/C,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC,YAAY;IAC5C,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC,cAAc;IAC/C,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC,WAAW;CAC1C,CAAC","sourcesContent":["import {\n  BoxBackgroundColor,\n  IconColor,\n  TagSeverity,\n  TextColor,\n} from '@metamask-previews/design-system-shared';\n\nexport const MAP_TAG_SEVERITY_BACKGROUND: Record<\n  TagSeverity,\n  BoxBackgroundColor\n> = {\n  [TagSeverity.Neutral]: BoxBackgroundColor.BackgroundMuted,\n  [TagSeverity.Success]: BoxBackgroundColor.SuccessMuted,\n  [TagSeverity.Danger]: BoxBackgroundColor.ErrorMuted,\n  [TagSeverity.Warning]: BoxBackgroundColor.WarningMuted,\n  [TagSeverity.Info]: BoxBackgroundColor.InfoMuted,\n};\n\nexport const MAP_TAG_SEVERITY_TEXT_COLOR: Record<TagSeverity, TextColor> = {\n  [TagSeverity.Neutral]: TextColor.TextAlternative,\n  [TagSeverity.Success]: TextColor.SuccessDefault,\n  [TagSeverity.Danger]: TextColor.ErrorDefault,\n  [TagSeverity.Warning]: TextColor.WarningDefault,\n  [TagSeverity.Info]: TextColor.InfoDefault,\n};\n\nexport const MAP_TAG_SEVERITY_ICON_COLOR: Record<TagSeverity, IconColor> = {\n  [TagSeverity.Neutral]: IconColor.IconAlternative,\n  [TagSeverity.Success]: IconColor.SuccessDefault,\n  [TagSeverity.Danger]: IconColor.ErrorDefault,\n  [TagSeverity.Warning]: IconColor.WarningDefault,\n  [TagSeverity.Info]: IconColor.InfoDefault,\n};\n"]}

package/dist/components/TitleAlert/TitleAlert.cjs

@@ -12,14 +12,12 @@ const BoxRow_1 = require("../BoxRow/index.cjs");
 const IconAlert_1 = require("../IconAlert/index.cjs");
 const TextOrChildren_1 = require("../temp-components/TextOrChildren/index.cjs");
 /**
- * Displays a severity-based {@link IconAlert} above a centered title row with optional inline accessories.
+ * Displays a severity-based {@link IconAlert} above a centered title row.
  * Remaining `View` props are forwarded to the root {@link BoxColumn}.
  *
  * @param props - Component props
  * @param props.severity - Passed to {@link IconAlert} for glyph and color
  * @param props.title - Title row content; row renders only when `title` is renderable
- * @param props.titleStartAccessory - Optional inline accessory to the left of `title`
- * @param props.titleEndAccessory - Optional inline accessory to the right of `title`
  * @param props.titleWrapperProps - Optional props spread onto the title row {@link BoxRow}
  * @param props.titleProps - Optional props merged into title row `Text` when `title` is a string
  * @param props.description - Optional description below the title; uses {@link TextOrChildren}
@@ -28,7 +26,7 @@ const TextOrChildren_1 = require("../temp-components/TextOrChildren/index.cjs");
  *
  * @returns The rendered TitleAlert layout.
  */
-const TitleAlert = ({ severity, title, titleStartAccessory, titleEndAccessory, titleProps, titleWrapperProps, description, descriptionProps, twClassName = '', ...props }) => {
+const TitleAlert = ({ severity, title, titleProps, titleWrapperProps, description, descriptionProps, twClassName = '', ...props }) => {
     return (<BoxColumn_1.BoxColumn alignItems={design_system_shared_1.BoxAlignItems.Center} gap={1} topAccessory={<IconAlert_1.IconAlert severity={severity} size={design_system_shared_1.IconSize.Xl}/>} bottomAccessory={description ? (<Box_1.Box twClassName="self-stretch">
             <TextOrChildren_1.TextOrChildren textProps={{
                 variant: design_system_shared_1.TextVariant.BodySm,
@@ -40,7 +38,7 @@ const TitleAlert = ({ severity, title, titleStartAccessory, titleEndAccessory, t
               {description}
             </TextOrChildren_1.TextOrChildren>
           </Box_1.Box>) : undefined} twClassName={twClassName} {...props}>
-      {title ? (<BoxRow_1.BoxRow justifyContent={design_system_shared_1.BoxJustifyContent.Center} twClassName="self-stretch" {...titleWrapperProps} startAccessory={titleStartAccessory} endAccessory={titleEndAccessory} textProps={{
+      {title ? (<BoxRow_1.BoxRow justifyContent={design_system_shared_1.BoxJustifyContent.Center} twClassName="self-stretch" {...titleWrapperProps} textProps={{
                 variant: design_system_shared_1.TextVariant.HeadingLg,
                 color: design_system_shared_1.TextColor.TextDefault,
                 ...titleProps,

package/dist/components/TitleAlert/TitleAlert.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TitleAlert.cjs","sourceRoot":"","sources":["../../../src/components/TitleAlert/TitleAlert.tsx"],"names":[],"mappings":";;;;;;AAAA,kFAOiD;AACjD,kDAA0B;AAE1B,0CAA6B;AAC7B,sDAAyC;AACzC,gDAAmC;AACnC,sDAAyC;AACzC,gFAAmE;AAInE;;;;;;;;;;;;;;;;GAgBG;AACI,MAAM,UAAU,GAA8B,CAAC,EACpD,QAAQ,EACR,KAAK,EACL,mBAAmB,EACnB,iBAAiB,EACjB,UAAU,EACV,iBAAiB,EACjB,WAAW,EACX,gBAAgB,EAChB,WAAW,GAAG,EAAE,EAChB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,OAAO,CACL,CAAC,qBAAS,CACR,UAAU,CAAC,CAAC,oCAAa,CAAC,MAAM,CAAC,CACjC,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,YAAY,CAAC,CAAC,CAAC,qBAAS,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,+BAAQ,CAAC,EAAE,CAAC,EAAG,CAAC,CACnE,eAAe,CAAC,CACd,WAAW,CAAC,CAAC,CAAC,CACZ,CAAC,SAAG,CAAC,WAAW,CAAC,cAAc,CAC7B;YAAA,CAAC,+BAAc,CACb,SAAS,CAAC,CAAC;gBACT,OAAO,EAAE,kCAAW,CAAC,MAAM;gBAC3B,KAAK,EAAE,gCAAS,CAAC,eAAe;gBAChC,UAAU,EAAE,iCAAU,CAAC,MAAM;gBAC7B,GAAG,gBAAgB;gBACnB,KAAK,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,gBAAgB,EAAE,KAAK,CAAC;aAC1D,CAAC,CAEF;cAAA,CAAC,WAAW,CACd;YAAA,EAAE,+BAAc,CAClB;UAAA,EAAE,SAAG,CAAC,CACP,CAAC,CAAC,CAAC,SAAS,CACd,CACD,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CACP,CAAC,eAAM,CACL,cAAc,CAAC,CAAC,wCAAiB,CAAC,MAAM,CAAC,CACzC,WAAW,CAAC,cAAc,CAC1B,IAAI,iBAAiB,CAAC,CACtB,cAAc,CAAC,CAAC,mBAAmB,CAAC,CACpC,YAAY,CAAC,CAAC,iBAAiB,CAAC,CAChC,SAAS,CAAC,CAAC;gBACT,OAAO,EAAE,kCAAW,CAAC,SAAS;gBAC9B,KAAK,EAAE,gCAAS,CAAC,WAAW;gBAC5B,GAAG,UAAU;aACd,CAAC,CAEF;UAAA,CAAC,KAAK,CACR;QAAA,EAAE,eAAM,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CACV;IAAA,EAAE,qBAAS,CAAC,CACb,CAAC;AACJ,CAAC,CAAC;AAvDW,QAAA,UAAU,cAuDrB;AAEF,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import {\n  BoxAlignItems,\n  BoxJustifyContent,\n  FontWeight,\n  IconSize,\n  TextColor,\n  TextVariant,\n} from '@metamask-previews/design-system-shared';\nimport React from 'react';\n\nimport { Box } from '../Box';\nimport { BoxColumn } from '../BoxColumn';\nimport { BoxRow } from '../BoxRow';\nimport { IconAlert } from '../IconAlert';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport type { TitleAlertProps } from './TitleAlert.types';\n\n/**\n * Displays a severity-based {@link IconAlert} above a centered title row with optional inline accessories.\n * Remaining `View` props are forwarded to the root {@link BoxColumn}.\n *\n * @param props - Component props\n * @param props.severity - Passed to {@link IconAlert} for glyph and color\n * @param props.title - Title row content; row renders only when `title` is renderable\n * @param props.titleStartAccessory - Optional inline accessory to the left of `title`\n * @param props.titleEndAccessory - Optional inline accessory to the right of `title`\n * @param props.titleWrapperProps - Optional props spread onto the title row {@link BoxRow}\n * @param props.titleProps - Optional props merged into title row `Text` when `title` is a string\n * @param props.description - Optional description below the title; uses {@link TextOrChildren}\n * @param props.descriptionProps - Optional props merged into description `Text` when `description` is a string\n * @param props.twClassName - Optional Tailwind classes on the root BoxColumn\n *\n * @returns The rendered TitleAlert layout.\n */\nexport const TitleAlert: React.FC<TitleAlertProps> = ({\n  severity,\n  title,\n  titleStartAccessory,\n  titleEndAccessory,\n  titleProps,\n  titleWrapperProps,\n  description,\n  descriptionProps,\n  twClassName = '',\n  ...props\n}) => {\n  return (\n    <BoxColumn\n      alignItems={BoxAlignItems.Center}\n      gap={1}\n      topAccessory={<IconAlert severity={severity} size={IconSize.Xl} />}\n      bottomAccessory={\n        description ? (\n          <Box twClassName=\"self-stretch\">\n            <TextOrChildren\n              textProps={{\n                variant: TextVariant.BodySm,\n                color: TextColor.TextAlternative,\n                fontWeight: FontWeight.Medium,\n                ...descriptionProps,\n                style: [{ textAlign: 'center' }, descriptionProps?.style],\n              }}\n            >\n              {description}\n            </TextOrChildren>\n          </Box>\n        ) : undefined\n      }\n      twClassName={twClassName}\n      {...props}\n    >\n      {title ? (\n        <BoxRow\n          justifyContent={BoxJustifyContent.Center}\n          twClassName=\"self-stretch\"\n          {...titleWrapperProps}\n          startAccessory={titleStartAccessory}\n          endAccessory={titleEndAccessory}\n          textProps={{\n            variant: TextVariant.HeadingLg,\n            color: TextColor.TextDefault,\n            ...titleProps,\n          }}\n        >\n          {title}\n        </BoxRow>\n      ) : null}\n    </BoxColumn>\n  );\n};\n\nTitleAlert.displayName = 'TitleAlert';\n"]}
+{"version":3,"file":"TitleAlert.cjs","sourceRoot":"","sources":["../../../src/components/TitleAlert/TitleAlert.tsx"],"names":[],"mappings":";;;;;;AAAA,kFAOiD;AACjD,kDAA0B;AAE1B,0CAA6B;AAC7B,sDAAyC;AACzC,gDAAmC;AACnC,sDAAyC;AACzC,gFAAmE;AAInE;;;;;;;;;;;;;;GAcG;AACI,MAAM,UAAU,GAA8B,CAAC,EACpD,QAAQ,EACR,KAAK,EACL,UAAU,EACV,iBAAiB,EACjB,WAAW,EACX,gBAAgB,EAChB,WAAW,GAAG,EAAE,EAChB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,OAAO,CACL,CAAC,qBAAS,CACR,UAAU,CAAC,CAAC,oCAAa,CAAC,MAAM,CAAC,CACjC,GAAG,CAAC,CAAC,CAAC,CAAC,CACP,YAAY,CAAC,CAAC,CAAC,qBAAS,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,+BAAQ,CAAC,EAAE,CAAC,EAAG,CAAC,CACnE,eAAe,CAAC,CACd,WAAW,CAAC,CAAC,CAAC,CACZ,CAAC,SAAG,CAAC,WAAW,CAAC,cAAc,CAC7B;YAAA,CAAC,+BAAc,CACb,SAAS,CAAC,CAAC;gBACT,OAAO,EAAE,kCAAW,CAAC,MAAM;gBAC3B,KAAK,EAAE,gCAAS,CAAC,eAAe;gBAChC,UAAU,EAAE,iCAAU,CAAC,MAAM;gBAC7B,GAAG,gBAAgB;gBACnB,KAAK,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,gBAAgB,EAAE,KAAK,CAAC;aAC1D,CAAC,CAEF;cAAA,CAAC,WAAW,CACd;YAAA,EAAE,+BAAc,CAClB;UAAA,EAAE,SAAG,CAAC,CACP,CAAC,CAAC,CAAC,SAAS,CACd,CACD,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,IAAI,KAAK,CAAC,CAEV;MAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CACP,CAAC,eAAM,CACL,cAAc,CAAC,CAAC,wCAAiB,CAAC,MAAM,CAAC,CACzC,WAAW,CAAC,cAAc,CAC1B,IAAI,iBAAiB,CAAC,CACtB,SAAS,CAAC,CAAC;gBACT,OAAO,EAAE,kCAAW,CAAC,SAAS;gBAC9B,KAAK,EAAE,gCAAS,CAAC,WAAW;gBAC5B,GAAG,UAAU;aACd,CAAC,CAEF;UAAA,CAAC,KAAK,CACR;QAAA,EAAE,eAAM,CAAC,CACV,CAAC,CAAC,CAAC,IAAI,CACV;IAAA,EAAE,qBAAS,CAAC,CACb,CAAC;AACJ,CAAC,CAAC;AAnDW,QAAA,UAAU,cAmDrB;AAEF,kBAAU,CAAC,WAAW,GAAG,YAAY,CAAC","sourcesContent":["import {\n  BoxAlignItems,\n  BoxJustifyContent,\n  FontWeight,\n  IconSize,\n  TextColor,\n  TextVariant,\n} from '@metamask-previews/design-system-shared';\nimport React from 'react';\n\nimport { Box } from '../Box';\nimport { BoxColumn } from '../BoxColumn';\nimport { BoxRow } from '../BoxRow';\nimport { IconAlert } from '../IconAlert';\nimport { TextOrChildren } from '../temp-components/TextOrChildren';\n\nimport type { TitleAlertProps } from './TitleAlert.types';\n\n/**\n * Displays a severity-based {@link IconAlert} above a centered title row.\n * Remaining `View` props are forwarded to the root {@link BoxColumn}.\n *\n * @param props - Component props\n * @param props.severity - Passed to {@link IconAlert} for glyph and color\n * @param props.title - Title row content; row renders only when `title` is renderable\n * @param props.titleWrapperProps - Optional props spread onto the title row {@link BoxRow}\n * @param props.titleProps - Optional props merged into title row `Text` when `title` is a string\n * @param props.description - Optional description below the title; uses {@link TextOrChildren}\n * @param props.descriptionProps - Optional props merged into description `Text` when `description` is a string\n * @param props.twClassName - Optional Tailwind classes on the root BoxColumn\n *\n * @returns The rendered TitleAlert layout.\n */\nexport const TitleAlert: React.FC<TitleAlertProps> = ({\n  severity,\n  title,\n  titleProps,\n  titleWrapperProps,\n  description,\n  descriptionProps,\n  twClassName = '',\n  ...props\n}) => {\n  return (\n    <BoxColumn\n      alignItems={BoxAlignItems.Center}\n      gap={1}\n      topAccessory={<IconAlert severity={severity} size={IconSize.Xl} />}\n      bottomAccessory={\n        description ? (\n          <Box twClassName=\"self-stretch\">\n            <TextOrChildren\n              textProps={{\n                variant: TextVariant.BodySm,\n                color: TextColor.TextAlternative,\n                fontWeight: FontWeight.Medium,\n                ...descriptionProps,\n                style: [{ textAlign: 'center' }, descriptionProps?.style],\n              }}\n            >\n              {description}\n            </TextOrChildren>\n          </Box>\n        ) : undefined\n      }\n      twClassName={twClassName}\n      {...props}\n    >\n      {title ? (\n        <BoxRow\n          justifyContent={BoxJustifyContent.Center}\n          twClassName=\"self-stretch\"\n          {...titleWrapperProps}\n          textProps={{\n            variant: TextVariant.HeadingLg,\n            color: TextColor.TextDefault,\n            ...titleProps,\n          }}\n        >\n          {title}\n        </BoxRow>\n      ) : null}\n    </BoxColumn>\n  );\n};\n\nTitleAlert.displayName = 'TitleAlert';\n"]}

package/dist/components/TitleAlert/TitleAlert.d.cts

@@ -1,14 +1,12 @@
 import React from "react";
 import type { TitleAlertProps } from "./TitleAlert.types.cjs";
 /**
- * Displays a severity-based {@link IconAlert} above a centered title row with optional inline accessories.
+ * Displays a severity-based {@link IconAlert} above a centered title row.
  * Remaining `View` props are forwarded to the root {@link BoxColumn}.
  *
  * @param props - Component props
  * @param props.severity - Passed to {@link IconAlert} for glyph and color
  * @param props.title - Title row content; row renders only when `title` is renderable
- * @param props.titleStartAccessory - Optional inline accessory to the left of `title`
- * @param props.titleEndAccessory - Optional inline accessory to the right of `title`
  * @param props.titleWrapperProps - Optional props spread onto the title row {@link BoxRow}
  * @param props.titleProps - Optional props merged into title row `Text` when `title` is a string
  * @param props.description - Optional description below the title; uses {@link TextOrChildren}

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

@@ -1 +1 @@
-{"version":3,"file":"TitleAlert.d.cts","sourceRoot":"","sources":["../../../src/components/TitleAlert/TitleAlert.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,cAAc;AAQ1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAuDhD,CAAC"}
+{"version":3,"file":"TitleAlert.d.cts","sourceRoot":"","sources":["../../../src/components/TitleAlert/TitleAlert.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,cAAc;AAQ1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAmDhD,CAAC"}

package/dist/components/TitleAlert/TitleAlert.d.mts

@@ -1,14 +1,12 @@
 import React from "react";
 import type { TitleAlertProps } from "./TitleAlert.types.mjs";
 /**
- * Displays a severity-based {@link IconAlert} above a centered title row with optional inline accessories.
+ * Displays a severity-based {@link IconAlert} above a centered title row.
  * Remaining `View` props are forwarded to the root {@link BoxColumn}.
  *
  * @param props - Component props
  * @param props.severity - Passed to {@link IconAlert} for glyph and color
  * @param props.title - Title row content; row renders only when `title` is renderable
- * @param props.titleStartAccessory - Optional inline accessory to the left of `title`
- * @param props.titleEndAccessory - Optional inline accessory to the right of `title`
  * @param props.titleWrapperProps - Optional props spread onto the title row {@link BoxRow}
  * @param props.titleProps - Optional props merged into title row `Text` when `title` is a string
  * @param props.description - Optional description below the title; uses {@link TextOrChildren}

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

@@ -1 +1 @@
-{"version":3,"file":"TitleAlert.d.mts","sourceRoot":"","sources":["../../../src/components/TitleAlert/TitleAlert.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,cAAc;AAQ1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAuDhD,CAAC"}
+{"version":3,"file":"TitleAlert.d.mts","sourceRoot":"","sources":["../../../src/components/TitleAlert/TitleAlert.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,cAAc;AAQ1B,OAAO,KAAK,EAAE,eAAe,EAAE,+BAA2B;AAE1D;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAmDhD,CAAC"}