Remove use of flatten where possible (#9325)

* remove use of flatten where possible

* restore flatten where it says it's needed

* missing utils alpha

src/components/Dialog/index.web.tsx

@@ -16,7 +16,7 @@ import {RemoveScrollBar} from 'react-remove-scroll-bar'
 import {logger} from '#/logger'
 import {useA11y} from '#/state/a11y'
 import {useDialogStateControlContext} from '#/state/dialogs'
-import {atoms as a, flatten, useBreakpoints, useTheme, web} from '#/alf'
+import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
 import {Button, ButtonIcon} from '#/components/Button'
 import {Context} from '#/components/Dialog/context'
 import {
@@ -180,7 +180,7 @@ export function Inner({
         onClick={stopPropagation}
         onStartShouldSetResponder={_ => true}
         onTouchEnd={stopPropagation}
-        style={flatten([
+        style={[
           a.relative,
           a.rounded_md,
           a.w_full,
@@ -195,7 +195,7 @@ export function Inner({
           },
           !reduceMotionEnabled && a.zoom_fade_in,
           style,
-        ])}>
+        ]}>
         <DismissableLayer.DismissableLayer
           onInteractOutside={preventDefault}
           onFocusOutside={preventDefault}
@@ -244,7 +244,7 @@ export const InnerFlatList = React.forwardRef<
       contentContainerStyle={[a.h_full, a.px_0, webInnerContentContainerStyle]}>
       <FlatList
         ref={ref}
-        style={[a.h_full, gtMobile ? a.px_2xl : a.px_xl, flatten(style)]}
+        style={[a.h_full, gtMobile ? a.px_2xl : a.px_xl, style]}
         {...props}
       />
       {footer}