@12-apps/ui 6.98.0 → 6.99.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/_internal/components/data-display/Alert/Alert.content.js +4 -2
- package/dist/_internal/components/data-display/Alert/Alert.ink.js +27 -0
- package/dist/_internal/components/data-display/Alert/Alert.js +6 -5
- package/dist/_internal/components/data-display/Alert/Alert.metrics.js +5 -1
- package/dist/_internal/components/data-display/Alert/Alert.styles.js +2 -2
- package/dist/_internal/components/data-display/Banner/Banner.js +3 -3
- package/dist/_internal/components/data-display/Banner/Banner.styles.js +2 -2
- package/dist/_internal/components/data-display/CardKit/card-actions-context.js +8 -7
- package/dist/_internal/components/data-display/CardKit/use-remove-confirm.js +9 -8
- package/dist/_internal/components/data-display/Carousel/Carousel.js +2 -2
- package/dist/_internal/components/data-display/Chart/SpecChart.js +3 -3
- package/dist/_internal/components/data-display/DataGrid/DataGrid.js +1 -1
- package/dist/_internal/components/data-display/DataViews/DataViewsGrid.js +17 -17
- package/dist/_internal/components/data-display/DataViews/DataViewsTableBase.js +26 -25
- package/dist/_internal/components/data-display/DataViews/base-list-card-geometry.js +1 -1
- package/dist/_internal/components/data-display/DataViews/base-list-card-layout.js +1 -1
- package/dist/_internal/components/data-display/DataViews/base-list-card-slots.js +1 -1
- package/dist/_internal/components/data-display/DataViews/base-list-card.js +4 -4
- package/dist/_internal/components/data-display/DataViews/data-views-grid-bodies.js +2 -2
- package/dist/_internal/components/data-display/DataViews/data-views-grid-parts.js +14 -14
- package/dist/_internal/components/data-display/DataViews/data-views-inline-bar.js +6 -6
- package/dist/_internal/components/data-display/DataViews/data-views-more-fields.js +2 -2
- package/dist/_internal/components/data-display/DataViews/data-views-more-filters.js +3 -3
- package/dist/_internal/components/data-display/DataViews/data-views-table-parts.js +8 -7
- package/dist/_internal/components/data-display/DataViews/list-card-rails.js +1 -1
- package/dist/_internal/components/data-display/DataViews/use-data-views-state.js +2 -2
- package/dist/_internal/components/data-display/DayRuler/DayRuler.footer.js +2 -2
- package/dist/_internal/components/data-display/DayRuler/DayRuler.js +7 -7
- package/dist/_internal/components/data-display/DayRuler/DayRuler.keyboard.js +2 -2
- package/dist/_internal/components/data-display/DayRuler/DayRuler.parts.js +3 -3
- package/dist/_internal/components/data-display/DayRuler/useRulerDrag.js +2 -2
- package/dist/_internal/components/data-display/FleetMap/FleetBody.js +6 -6
- package/dist/_internal/components/data-display/FleetMap/FleetCanvas.js +5 -5
- package/dist/_internal/components/data-display/FleetMap/FleetMap.js +7 -7
- package/dist/_internal/components/data-display/HoverCard/HoverCard.js +2 -2
- package/dist/_internal/components/data-display/Lightbox/Lightbox.js +3 -3
- package/dist/_internal/components/data-display/MapPreview/MapLayers.js +2 -2
- package/dist/_internal/components/data-display/MapPreview/MapPreview.js +4 -4
- package/dist/_internal/components/data-display/Progress/Progress.js +2 -2
- package/dist/_internal/components/data-display/RegionMap/RegionMap.fixtures.js +1 -1
- package/dist/_internal/components/data-display/RegionMap/RegionMap.helpers.js +3 -1
- package/dist/_internal/components/data-display/RegionMap/RegionMap.hooks.js +3 -3
- package/dist/_internal/components/data-display/RegionMap/RegionMap.js +6 -5
- package/dist/_internal/components/data-display/RegionMap/RegionMap.view.js +2 -2
- package/dist/_internal/components/data-display/RegionMap/RegionMapDrawing.js +3 -2
- package/dist/_internal/components/data-display/RegionMap/RegionMapPin.js +26 -0
- package/dist/_internal/components/data-display/index.js +60 -50
- package/dist/_internal/components/feedback/NotificationStatusNotice/NotificationStatusNotice.js +7 -6
- package/dist/_internal/components/feedback/SequenceResolver/SequenceResolver.frame.js +4 -4
- package/dist/_internal/components/feedback/SequenceResolver/SequenceResolver.header.js +3 -3
- package/dist/_internal/components/feedback/SequenceResolver/SequenceResolver.js +14 -13
- package/dist/_internal/components/feedback/SequenceResolver/SequenceResolver.overview.js +9 -8
- package/dist/_internal/components/feedback/SequenceResolver/SequenceResolver.parts.js +8 -7
- package/dist/_internal/components/feedback/index.js +15 -14
- package/dist/_internal/components/index.js +66 -56
- package/dist/charts.js +11 -11
- package/dist/{chunk-WYNGH2WL.js → chunk-255WTBZ5.js} +8 -8
- package/dist/{chunk-QIP37Y2C.js → chunk-2RC6EAGD.js} +2 -2
- package/dist/{chunk-ZKVSFVIA.js → chunk-37MJZLQU.js} +2 -2
- package/dist/{chunk-BQBEN44R.js → chunk-3I7KE2N6.js} +2 -2
- package/dist/{chunk-L4FWEI2P.js → chunk-3V3Z4EML.js} +5 -5
- package/dist/{chunk-E4MJA52O.js → chunk-3V5V44UP.js} +16 -18
- package/dist/chunk-3V5V44UP.js.map +1 -0
- package/dist/{chunk-6RYSSNOO.js → chunk-54DOLCJ3.js} +2 -2
- package/dist/{chunk-74IH3ZGD.js → chunk-643YFWNK.js} +2 -2
- package/dist/{chunk-FRQGZIYU.js → chunk-6WAP7BJS.js} +2 -2
- package/dist/chunk-AG4F6NVT.js +1 -0
- package/dist/chunk-AG4F6NVT.js.map +1 -0
- package/dist/{chunk-3CXRHRGE.js → chunk-AYDVNXGR.js} +7 -3
- package/dist/chunk-AYDVNXGR.js.map +1 -0
- package/dist/{chunk-JO6D7YGN.js → chunk-CWRQGA2T.js} +2 -2
- package/dist/chunk-DRYBA76G.js +293 -0
- package/dist/chunk-DRYBA76G.js.map +1 -0
- package/dist/{chunk-ZW7Q3IRL.js → chunk-FYJL432J.js} +4 -4
- package/dist/{chunk-G6TKWNF2.js → chunk-GZITNT7O.js} +11 -11
- package/dist/{chunk-RFMQBIE6.js → chunk-HBHBRRSW.js} +4 -4
- package/dist/{chunk-U4Z6GZDW.js → chunk-HN36UVOE.js} +4 -4
- package/dist/{chunk-WK577LQL.js → chunk-J2IQ6FJ5.js} +4 -4
- package/dist/{chunk-HCTHY66U.js → chunk-KAGXV3ID.js} +4 -4
- package/dist/{chunk-FWAY2SAI.js → chunk-KAZWBDIH.js} +2 -2
- package/dist/{chunk-DKPELKGL.js → chunk-KV7LTOWC.js} +5 -5
- package/dist/{chunk-UC7DLGMP.js → chunk-KVP5A3YK.js} +2 -2
- package/dist/chunk-LNZJJFZQ.js +41 -0
- package/dist/chunk-LNZJJFZQ.js.map +1 -0
- package/dist/{chunk-EGBQR5GH.js → chunk-LOLYBFYY.js} +5 -5
- package/dist/{chunk-SOXO2VN3.js → chunk-MEMVZW64.js} +3 -3
- package/dist/{chunk-COOSJKZL.js → chunk-MNJZPJ5S.js} +2 -1
- package/dist/chunk-MNJZPJ5S.js.map +1 -0
- package/dist/{chunk-G2NVBCF7.js → chunk-NWUMGE6T.js} +3 -3
- package/dist/{chunk-NQCTANF3.js → chunk-Q5SCBQLY.js} +18 -11
- package/dist/chunk-Q5SCBQLY.js.map +1 -0
- package/dist/{chunk-64LNNC54.js → chunk-QLKUWDMQ.js} +4 -4
- package/dist/{chunk-MPVH2GM5.js → chunk-RAQD5QCM.js} +4 -4
- package/dist/{chunk-KXDLLS62.js → chunk-REHGWN5M.js} +4 -4
- package/dist/{chunk-Z4ZFJ565.js → chunk-SRAIV6U6.js} +3 -3
- package/dist/{chunk-5ZY3IIIG.js → chunk-TBQR5VCN.js} +11 -1
- package/dist/chunk-TBQR5VCN.js.map +1 -0
- package/dist/{chunk-3N2HWNKT.js → chunk-UIJLDAV7.js} +2 -2
- package/dist/{chunk-7HZ36QDH.js → chunk-UN5WU2OX.js} +9 -3
- package/dist/chunk-UN5WU2OX.js.map +1 -0
- package/dist/{chunk-A27J4CIZ.js → chunk-UTIYB6VE.js} +11 -11
- package/dist/{chunk-5V7IZBRY.js → chunk-VRSW7PIO.js} +5 -5
- package/dist/{chunk-U4PV2ZKK.js → chunk-WDEVKND3.js} +3 -3
- package/dist/chunk-WGKLBVDZ.js +1 -0
- package/dist/chunk-WGKLBVDZ.js.map +1 -0
- package/dist/{chunk-AP7GEUJS.js → chunk-XFOKLWJZ.js} +2 -2
- package/dist/{chunk-6D5AMANO.js → chunk-XQAFSC66.js} +2 -2
- package/dist/{chunk-YNZUYZ2O.js → chunk-XR474YYX.js} +2 -2
- package/dist/{chunk-L5RS6QAT.js → chunk-YBF2WUGQ.js} +2 -2
- package/dist/{chunk-RCTHCXS6.js → chunk-YQ5GQ32T.js} +2 -2
- package/dist/{chunk-YLZXIR6B.js → chunk-Z5V5E3JW.js} +4 -4
- package/dist/data-display/Alert.js +10 -6
- package/dist/data-display/Banner.js +3 -3
- package/dist/data-display/CardKit.js +9 -8
- package/dist/data-display/Carousel.js +2 -2
- package/dist/data-display/Chart.js +11 -11
- package/dist/data-display/DataGrid.js +1 -1
- package/dist/data-display/DataViews.js +33 -32
- package/dist/data-display/DayRuler.js +7 -7
- package/dist/data-display/FleetMap.js +7 -7
- package/dist/data-display/HoverCard.js +2 -2
- package/dist/data-display/Lightbox.js +3 -3
- package/dist/data-display/MapPreview.js +4 -4
- package/dist/data-display/Progress.js +2 -2
- package/dist/data-display/RegionMap.js +14 -8
- package/dist/feedback/NotificationStatusNotice.js +7 -6
- package/dist/feedback/SequenceResolver.js +14 -13
- package/dist/native/data-display/Alert.js +10 -0
- package/dist/native/data-display/Alert.js.map +1 -1
- package/dist/types/components/data-display/Alert/Alert.content.d.ts.map +1 -1
- package/dist/types/components/data-display/Alert/Alert.d.ts.map +1 -1
- package/dist/types/components/data-display/Alert/Alert.ink.d.ts +65 -0
- package/dist/types/components/data-display/Alert/Alert.ink.d.ts.map +1 -0
- package/dist/types/components/data-display/Alert/Alert.metrics.d.ts +73 -5
- package/dist/types/components/data-display/Alert/Alert.metrics.d.ts.map +1 -1
- package/dist/types/components/data-display/Alert/index.d.ts +1 -0
- package/dist/types/components/data-display/Alert/index.d.ts.map +1 -1
- package/dist/types/components/data-display/RegionMap/RegionMap.d.ts +1 -1
- package/dist/types/components/data-display/RegionMap/RegionMap.d.ts.map +1 -1
- package/dist/types/components/data-display/RegionMap/RegionMap.helpers.d.ts +9 -0
- package/dist/types/components/data-display/RegionMap/RegionMap.helpers.d.ts.map +1 -1
- package/dist/types/components/data-display/RegionMap/RegionMap.types.d.ts +45 -1
- package/dist/types/components/data-display/RegionMap/RegionMap.types.d.ts.map +1 -1
- package/dist/types/components/data-display/RegionMap/RegionMapDrawing.d.ts +4 -1
- package/dist/types/components/data-display/RegionMap/RegionMapDrawing.d.ts.map +1 -1
- package/dist/types/components/data-display/RegionMap/RegionMapPin.d.ts +102 -0
- package/dist/types/components/data-display/RegionMap/RegionMapPin.d.ts.map +1 -0
- package/dist/types/components/data-display/RegionMap/index.d.ts +2 -1
- package/dist/types/components/data-display/RegionMap/index.d.ts.map +1 -1
- package/dist/types-native/components/data-display/Alert/Alert.metrics.d.ts +73 -5
- package/dist/types-native/components/data-display/Alert/Alert.metrics.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/data-display/Alert/Alert.content.tsx +16 -1
- package/src/components/data-display/Alert/Alert.ink.ts +106 -0
- package/src/components/data-display/Alert/Alert.md +40 -0
- package/src/components/data-display/Alert/Alert.metrics.ts +57 -5
- package/src/components/data-display/Alert/Alert.tsx +18 -7
- package/src/components/data-display/Alert/index.ts +1 -0
- package/src/components/data-display/RegionMap/RegionMap.helpers.ts +1 -1
- package/src/components/data-display/RegionMap/RegionMap.md +19 -2
- package/src/components/data-display/RegionMap/RegionMap.tsx +4 -0
- package/src/components/data-display/RegionMap/RegionMap.types.ts +49 -1
- package/src/components/data-display/RegionMap/RegionMapDrawing.tsx +11 -13
- package/src/components/data-display/RegionMap/RegionMapPin.tsx +388 -0
- package/src/components/data-display/RegionMap/index.ts +5 -0
- package/dist/chunk-3CXRHRGE.js.map +0 -1
- package/dist/chunk-5ZY3IIIG.js.map +0 -1
- package/dist/chunk-7HZ36QDH.js.map +0 -1
- package/dist/chunk-COOSJKZL.js.map +0 -1
- package/dist/chunk-DY2I6LMX.js +0 -1
- package/dist/chunk-E4MJA52O.js.map +0 -1
- package/dist/chunk-NQCTANF3.js.map +0 -1
- package/dist/chunk-NUGT7LMR.js +0 -1
- /package/dist/{chunk-DY2I6LMX.js.map → _internal/components/data-display/Alert/Alert.ink.js.map} +0 -0
- /package/dist/{chunk-NUGT7LMR.js.map → _internal/components/data-display/RegionMap/RegionMapPin.js.map} +0 -0
- /package/dist/{chunk-WYNGH2WL.js.map → chunk-255WTBZ5.js.map} +0 -0
- /package/dist/{chunk-QIP37Y2C.js.map → chunk-2RC6EAGD.js.map} +0 -0
- /package/dist/{chunk-ZKVSFVIA.js.map → chunk-37MJZLQU.js.map} +0 -0
- /package/dist/{chunk-BQBEN44R.js.map → chunk-3I7KE2N6.js.map} +0 -0
- /package/dist/{chunk-L4FWEI2P.js.map → chunk-3V3Z4EML.js.map} +0 -0
- /package/dist/{chunk-6RYSSNOO.js.map → chunk-54DOLCJ3.js.map} +0 -0
- /package/dist/{chunk-74IH3ZGD.js.map → chunk-643YFWNK.js.map} +0 -0
- /package/dist/{chunk-FRQGZIYU.js.map → chunk-6WAP7BJS.js.map} +0 -0
- /package/dist/{chunk-JO6D7YGN.js.map → chunk-CWRQGA2T.js.map} +0 -0
- /package/dist/{chunk-ZW7Q3IRL.js.map → chunk-FYJL432J.js.map} +0 -0
- /package/dist/{chunk-G6TKWNF2.js.map → chunk-GZITNT7O.js.map} +0 -0
- /package/dist/{chunk-RFMQBIE6.js.map → chunk-HBHBRRSW.js.map} +0 -0
- /package/dist/{chunk-U4Z6GZDW.js.map → chunk-HN36UVOE.js.map} +0 -0
- /package/dist/{chunk-WK577LQL.js.map → chunk-J2IQ6FJ5.js.map} +0 -0
- /package/dist/{chunk-HCTHY66U.js.map → chunk-KAGXV3ID.js.map} +0 -0
- /package/dist/{chunk-FWAY2SAI.js.map → chunk-KAZWBDIH.js.map} +0 -0
- /package/dist/{chunk-DKPELKGL.js.map → chunk-KV7LTOWC.js.map} +0 -0
- /package/dist/{chunk-UC7DLGMP.js.map → chunk-KVP5A3YK.js.map} +0 -0
- /package/dist/{chunk-EGBQR5GH.js.map → chunk-LOLYBFYY.js.map} +0 -0
- /package/dist/{chunk-SOXO2VN3.js.map → chunk-MEMVZW64.js.map} +0 -0
- /package/dist/{chunk-G2NVBCF7.js.map → chunk-NWUMGE6T.js.map} +0 -0
- /package/dist/{chunk-64LNNC54.js.map → chunk-QLKUWDMQ.js.map} +0 -0
- /package/dist/{chunk-MPVH2GM5.js.map → chunk-RAQD5QCM.js.map} +0 -0
- /package/dist/{chunk-KXDLLS62.js.map → chunk-REHGWN5M.js.map} +0 -0
- /package/dist/{chunk-Z4ZFJ565.js.map → chunk-SRAIV6U6.js.map} +0 -0
- /package/dist/{chunk-3N2HWNKT.js.map → chunk-UIJLDAV7.js.map} +0 -0
- /package/dist/{chunk-A27J4CIZ.js.map → chunk-UTIYB6VE.js.map} +0 -0
- /package/dist/{chunk-5V7IZBRY.js.map → chunk-VRSW7PIO.js.map} +0 -0
- /package/dist/{chunk-U4PV2ZKK.js.map → chunk-WDEVKND3.js.map} +0 -0
- /package/dist/{chunk-AP7GEUJS.js.map → chunk-XFOKLWJZ.js.map} +0 -0
- /package/dist/{chunk-6D5AMANO.js.map → chunk-XQAFSC66.js.map} +0 -0
- /package/dist/{chunk-YNZUYZ2O.js.map → chunk-XR474YYX.js.map} +0 -0
- /package/dist/{chunk-L5RS6QAT.js.map → chunk-YBF2WUGQ.js.map} +0 -0
- /package/dist/{chunk-RCTHCXS6.js.map → chunk-YQ5GQ32T.js.map} +0 -0
- /package/dist/{chunk-YLZXIR6B.js.map → chunk-Z5V5E3JW.js.map} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/data-display/Alert/Alert.native.tsx","../../../src/components/data-display/Alert/Alert.helpers.ts","../../../src/components/data-display/Alert/Alert.metrics.ts","../../../src/components/data-display/Alert/Alert.look.native.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n Animated,\n Easing,\n type LayoutChangeEvent,\n Platform,\n Pressable,\n type Role,\n StyleSheet,\n Text as RNText,\n View,\n type ViewStyle,\n} from 'react-native';\n\nimport { resolveAlertProps, resolveAnnouncement, testIdFor, VARIANT_ICON } from './Alert.helpers';\nimport {\n actionSlotStyle,\n alertLook,\n closeButtonStyle,\n descriptionStyle,\n iconSlotStyle,\n messageSlotStyle,\n messageTextStyle,\n titleStyle,\n} from './Alert.look.native';\nimport { CLOSE_BUTTON, CLOSE_DELAY_MS, COLLAPSE_MS, FADE_IN, ICON_SLOT, ICON_SPIN, PULSE } from './Alert.metrics';\nimport type { AlertProps, AlertVariant } from './Alert.types.native';\nimport { Icon } from '../../../icons/Icon.native';\nimport { webAria } from '../../../platform/aria';\nimport { renderTextChildren } from '../../../platform/text-children';\nimport { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\n\ntype AnimatedStyle = Animated.WithAnimatedValue<ViewStyle>;\nconst nativeDriver = Platform.OS !== 'web';\n\n/** A 0→1 progress that starts on mount when `animate` is set, else sits at 1. */\nfunction useProgress(animate: boolean, duration: number): Animated.Value {\n const progress = React.useRef(new Animated.Value(animate ? 0 : 1)).current;\n React.useEffect(() => {\n if (!animate) return undefined;\n const timing = Animated.timing(progress, { toValue: 1, duration, easing: Easing.out(Easing.ease), useNativeDriver: nativeDriver });\n timing.start();\n return () => timing.stop();\n }, [animate, duration, progress]);\n return progress;\n}\n\n/** The web's `fadeInScale` keyframes: in from 0 opacity, 0.95 scale and 10px above, over 300ms. */\nfunction useFadeIn(animate: boolean): AnimatedStyle | undefined {\n const progress = useProgress(animate, FADE_IN.ms);\n if (!animate) return undefined;\n return {\n opacity: progress,\n transform: [\n { scale: progress.interpolate({ inputRange: [0, 1], outputRange: [FADE_IN.scale, 1] }) },\n { translateY: progress.interpolate({ inputRange: [0, 1], outputRange: [-FADE_IN.lift, 0] }) },\n ],\n };\n}\n\n/** The web's `iconRotate` keyframes: one full turn, 0.8 → 1.1 → 1, over 600ms. */\nfunction useIconSpin(animate: boolean): AnimatedStyle | undefined {\n const progress = useProgress(animate, ICON_SPIN.ms);\n if (!animate) return undefined;\n return {\n transform: [\n { rotate: progress.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '360deg'] }) },\n { scale: progress.interpolate({ inputRange: [0, 0.5, 1], outputRange: [ICON_SPIN.from, ICON_SPIN.mid, 1] }) },\n ],\n };\n}\n\n/** The web's `::after` pulse: a wash of the hue over the card, fading out every two seconds, behind the words. */\nfunction Pulse({ color, radius, testID }: { color: string; radius: number; testID: string }): React.JSX.Element {\n const progress = React.useRef(new Animated.Value(0)).current;\n React.useEffect(() => {\n const loop = Animated.loop(\n Animated.timing(progress, { toValue: 1, duration: PULSE.ms, easing: Easing.linear, useNativeDriver: nativeDriver }),\n );\n loop.start();\n return () => loop.stop();\n }, [progress]);\n return (\n <Animated.View\n testID={testID}\n aria-hidden\n style={[\n StyleSheet.absoluteFill,\n {\n pointerEvents: 'none',\n borderRadius: radius,\n backgroundColor: color,\n opacity: progress.interpolate({ inputRange: [0, 0.7, 1], outputRange: [PULSE.alpha, 0, 0] }),\n },\n ]}\n />\n );\n}\n\n/**\n * MUI's `Collapse`: open, it is a plain wrapper with its overflow visible (so\n * a glow can escape); closing, it clips and shrinks over 300ms, then says so.\n */\nfunction Collapse({ open, onCollapsed, children }: { open: boolean; onCollapsed: () => void; children: React.ReactNode }): React.JSX.Element {\n const [height, setHeight] = React.useState<number | null>(null);\n const progress = React.useRef(new Animated.Value(1)).current;\n React.useEffect(() => {\n if (open) return undefined;\n const timing = Animated.timing(progress, { toValue: 0, duration: COLLAPSE_MS, easing: Easing.inOut(Easing.ease), useNativeDriver: false });\n timing.start(({ finished }) => {\n if (finished) onCollapsed();\n });\n return () => timing.stop();\n }, [open, onCollapsed, progress]);\n const onLayout = (event: LayoutChangeEvent): void => {\n if (open) setHeight(event.nativeEvent.layout.height);\n };\n const shrink: AnimatedStyle = height == null ? {} : { maxHeight: progress.interpolate({ inputRange: [0, 1], outputRange: [0, height] }) };\n return (\n <Animated.View style={[{ overflow: open ? 'visible' : 'hidden', opacity: progress }, shrink]}>\n <View onLayout={onLayout}>{children}</View>\n </Animated.View>\n );\n}\n\ninterface IconSlotProps {\n variant: AlertVariant;\n icon: React.ReactNode;\n color: string;\n animate: boolean;\n testID: string;\n}\n\n/** The icon slot; `glass` and `gradient` have no glyph of their own, so theirs is empty unless an `icon` is given — as on the web. */\nfunction IconSlot({ variant, icon, color, animate, testID }: IconSlotProps): React.JSX.Element {\n const theme = useUiTheme();\n const spin = useIconSpin(animate);\n const glyph = VARIANT_ICON[variant];\n return (\n <Animated.View testID={testID} style={[iconSlotStyle(theme), spin]}>\n {icon || (glyph ? <Icon name={glyph} size={ICON_SLOT.size} color={color} /> : null)}\n </Animated.View>\n );\n}\n\nfunction CloseButton({ label, ink, onPress, testID }: { label: string | undefined; ink: string; onPress: () => void; testID: string }): React.JSX.Element {\n const theme = useUiTheme();\n return (\n <Pressable role=\"button\" aria-label={label} testID={testID} onPress={onPress} style={({ pressed }) => closeButtonStyle(theme, pressed)}>\n <Icon name=\"Close\" size={CLOSE_BUTTON.iconSize} color={ink} />\n </Pressable>\n );\n}\n\ninterface ContentProps {\n title?: string;\n description?: string;\n children?: React.ReactNode;\n ink: string;\n testId: string;\n}\n\nfunction AlertContent({ title, description, children, ink, testId }: ContentProps): React.JSX.Element {\n const theme = useUiTheme();\n return (\n <View style={messageSlotStyle(theme)}>\n {title ? (\n <RNText testID={testIdFor(testId, 'title')} style={titleStyle(theme, ink, Boolean(description))}>\n {title}\n </RNText>\n ) : null}\n {description ? (\n <RNText testID={testIdFor(testId, 'message')} style={descriptionStyle(theme, ink)}>\n {description}\n </RNText>\n ) : null}\n {renderTextChildren(children, messageTextStyle(theme, ink))}\n </View>\n );\n}\n\n/** The dismiss sequence the web runs: mark closing, fire `onClose` 200ms in, stay until the collapse has run. */\nfunction useDismiss(onClose: (() => void) | undefined): { open: boolean; gone: boolean; close: () => void; onCollapsed: () => void } {\n const [closing, setClosing] = React.useState(false);\n const [gone, setGone] = React.useState(false);\n const timer = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n React.useEffect(() => () => {\n if (timer.current) clearTimeout(timer.current);\n }, []);\n const close = (): void => {\n setClosing(true);\n timer.current = setTimeout(() => onClose?.(), CLOSE_DELAY_MS);\n };\n const onCollapsed = React.useCallback(() => setGone(true), []);\n return { open: !closing, gone, close, onCollapsed };\n}\n\nexport const Alert = React.forwardRef<View, AlertProps>((alertProps, ref) => {\n const {\n variant, color, glow, pulse, icon, showIcon, onClose, title, description, children, animate,\n // `role`, `announce` and `aria-live` all leave here and are resolved\n // TOGETHER below, off `alertProps` — see `resolveAnnouncement`.\n role: _role, announce: _announce,\n 'aria-atomic': ariaAtomic, 'aria-live': _ariaLive, closable, closeLabel, style, ...others\n } = resolveAlertProps(alertProps);\n const theme = useUiTheme();\n const testId = resolveTestId(others, 'alert') as string;\n const rest = withoutTestIdProps(others);\n const look = alertLook(theme, { variant, color, glow, pulse });\n const fadeIn = useFadeIn(animate);\n const dismiss = useDismiss(onClose);\n const announcement = resolveAnnouncement(alertProps, variant);\n\n if (dismiss.gone) return null;\n return (\n <Collapse open={dismiss.open} onCollapsed={dismiss.onCollapsed}>\n <Animated.View\n ref={ref}\n role={announcement.role as Role}\n aria-live={announcement['aria-live']}\n {...webAria({ 'aria-atomic': ariaAtomic })}\n tabIndex={0}\n testID={testId}\n style={[look.root, fadeIn, style]}\n {...rest}\n >\n {pulse ? <Pulse color={look.palette.main} radius={look.root.borderRadius as number} testID={testIdFor(testId, 'pulse')} /> : null}\n {showIcon ? <IconSlot variant={variant} icon={icon} color={look.iconColor} animate={animate} testID={testIdFor(testId, 'icon')} /> : null}\n <AlertContent title={title} description={description} ink={look.ink} testId={testId}>\n {children}\n </AlertContent>\n {closable ? (\n <View style={actionSlotStyle(theme)}>\n <CloseButton label={closeLabel} ink={look.ink} onPress={dismiss.close} testID={testIdFor(testId, 'close')} />\n </View>\n ) : null}\n </Animated.View>\n </Collapse>\n );\n});\n\nAlert.displayName = 'Alert';\n","import type { AlertBaseFields, AlertVariant } from './Alert.base';\nimport type { IconName } from '../../../icons/Icon.types';\n\ntype AlertDefaultedKeys = 'variant' | 'glow' | 'pulse' | 'showIcon' | 'animate' | 'role' | 'aria-atomic';\n\nexport const ALERT_DEFAULTS: Required<Pick<AlertBaseFields, AlertDefaultedKeys>> & { closable: false } = {\n variant: 'info',\n glow: false,\n pulse: false,\n showIcon: true,\n closable: false,\n animate: true,\n role: 'alert',\n 'aria-atomic': 'true',\n};\n\n/**\n * Generic over the renderer's own props: the web and the native `Alert` pass\n * different extras through, and both come back out untouched.\n */\nexport type ResolvedAlertProps<P extends AlertBaseFields> = P &\n Required<Pick<AlertBaseFields, AlertDefaultedKeys>>;\n\n// Strips explicitly-undefined props before the merge so `prop={undefined}` still\n// falls back to the default, the way a destructuring default would.\nconst definedProps = <P extends AlertBaseFields>(props: P): Partial<P> =>\n Object.fromEntries(\n Object.entries(props).filter(([, value]) => value !== undefined),\n ) as Partial<P>;\n\n// Through `unknown`: `closable: false` in the defaults belongs to the dismiss\n// union rather than to `AlertBaseFields`, so TypeScript cannot see the merge as\n// comparable to `P` although every field of `P` survives it untouched.\nexport const resolveAlertProps = <P extends AlertBaseFields>(props: P): ResolvedAlertProps<P> =>\n ({ ...ALERT_DEFAULTS, ...definedProps(props) }) as unknown as ResolvedAlertProps<P>;\n\n/** `danger` announces itself; everything else waits its turn. */\nexport const defaultAriaLive = (variant: AlertVariant): 'polite' | 'assertive' =>\n variant === 'danger' ? 'assertive' : 'polite';\n\n/**\n * The ARIA role each `announce` level is spelled with.\n *\n * Both roles carry an IMPLICIT live setting, and that implicit one is what\n * assistive tech acts on — `alert` is assertive, `status` is polite. Pairing\n * them here is what stops `role` and `aria-live` from contradicting each\n * other, which they do by default: every alert is `role=\"alert\"` regardless of\n * variant, so an `info` alert asks to be polite in one attribute and to\n * interrupt in the other.\n */\nexport const ANNOUNCE_ROLE: Record<NonNullable<AlertBaseFields['announce']>, string> = {\n assertive: 'alert',\n polite: 'status',\n};\n\n/**\n * The two attributes that decide whether an alert interrupts, resolved TOGETHER.\n *\n * Both renderers therefore let `role` and `announce` leave their destructure\n * unused (`_role`, `_announce`) and call this instead — the first because the\n * defaults have already answered it, the second because it must never reach\n * the DOM.\n *\n * Reads the caller's own props rather than the defaulted ones, because the\n * whole question is which of them the caller actually spelled:\n * {@link ALERT_DEFAULTS} supplies `role: 'alert'` for everything, so after the\n * merge there is no longer any difference between an alert that asked to\n * interrupt and one that never mentioned it.\n *\n * Precedence, most specific first — an explicit `role` or `aria-live` beats\n * `announce`, so a call site that already spells either by hand is untouched:\n *\n * 1. `role` / `aria-live` as given;\n * 2. {@link AlertBaseFields.announce}, which supplies both;\n * 3. today's behaviour — `ALERT_DEFAULTS.role` and {@link defaultAriaLive}.\n *\n * With none of the three named, the result is byte-for-byte what it was before\n * `announce` existed.\n */\nexport const resolveAnnouncement = (\n props: Pick<AlertBaseFields, 'announce' | 'role' | 'aria-live'>,\n variant: AlertVariant,\n): { role: string; 'aria-live': 'polite' | 'assertive' | 'off' } => {\n const announce = props.announce;\n return {\n role: props.role ?? (announce === undefined ? ALERT_DEFAULTS.role : ANNOUNCE_ROLE[announce]),\n 'aria-live': props['aria-live'] ?? announce ?? defaultAriaLive(variant),\n };\n};\n\nexport const testIdFor = (base: string | undefined, suffix: string): string =>\n base ? `${base}-${suffix}` : `alert-${suffix}`;\n\n/**\n * The glyph each semantic variant carries, by the shared icon set's name.\n * `glass` and `gradient` carry none of their own: the web renders an empty\n * icon slot for them unless the caller passes an `icon`, and so does native.\n */\nexport const VARIANT_ICON: Partial<Record<AlertVariant, IconName>> = {\n info: 'Info',\n success: 'CheckCircle',\n warning: 'Warning',\n danger: 'Error',\n};\n","import type { AlertVariant } from './Alert.base';\nimport { alpha, darken, lighten } from '../../../tokens/color';\nimport { NEUTRAL_RAMP } from '../../../tokens/ink.core';\nimport { contrastText, type UiGreyStep, type UiTheme } from '../../../tokens/theme';\n\n/**\n * THE NUMBERS BOTH `Alert` RENDERERS DRAW WITH.\n *\n * `Alert.styles.tsx` / `Alert.tsx` (MUI) and `Alert.native.tsx` (React\n * Native) read this one table. Spacing is in SPACING UNITS where the web\n * writes `theme.spacing(n)`; durations are ms (the web turns them into `s`\n * through {@link seconds} so its emitted CSS is byte-for-byte what it was);\n * everything else is px, a ratio or an alpha. The hover, active and focus\n * numbers are here too although only the DOM can honour them — a number the\n * web draws with belongs in the table whether or not native can reach it.\n */\n\n/** The root: 12px corners, 14px 16px of padding, one 300ms curve for everything. */\nexport const ALERT_RADIUS_UNITS = 1.5;\nexport const ALERT_PADDING_UNITS = { vertical: 1.75, horizontal: 2 } as const;\nexport const ALERT_TRANSITION_MS = 300;\nexport const ALERT_EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';\n\n/** Mount: the web's `fadeInScale` keyframes and the icon's `iconRotate`. */\nexport const FADE_IN = { ms: 300, scale: 0.95, lift: 10 } as const;\nexport const ICON_SPIN = { ms: 600, from: 0.8, mid: 1.1 } as const;\n/** Dismiss: MUI `Collapse` runs 300ms; `onClose` fires 200ms in. */\nexport const COLLAPSE_MS = 300;\nexport const CLOSE_DELAY_MS = 200;\n\n/** The message column: 8px between title, description and children; 0.95rem body on 1.5. */\nexport const MESSAGE_GAP_UNITS = 1;\nexport const MESSAGE_FONT_SIZE = 15.2;\nexport const MESSAGE_LINE_HEIGHT = 1.5;\n/** A control inside the message gets an edge: 4px above, a hairline at 0.45 of the hue. */\nexport const MESSAGE_BUTTON = { marginTopUnits: 0.5, borderAlpha: 0.45 } as const;\n\n/** The title: 1.05rem at 600; MUI's `AlertTitle` lifts it 2px; 4px below it when a description follows. */\nexport const TITLE = { fontSize: 16.8, fontWeight: 600, marginTop: -2, marginBottomUnits: 0.5 } as const;\n/** The description: 0.925rem, slightly faded. */\nexport const DESCRIPTION = { fontSize: 14.8, opacity: 0.9 } as const;\n\n/** The icon on the title's line (`iconPlacement: 'title'`): 10px from the title, centred on its first line (1.5). */\nexport const TITLE_ICON = { gapUnits: 1.25, lineHeight: 1.5 } as const;\n/** The icon slot: MUI's 22px glyph at 0.9, 14px from the words, 2px down (MUI's 7px stays below). */\nexport const ICON_SLOT = { size: 22, opacity: 0.9, marginRightUnits: 1.75, paddingTopUnits: 0.25, paddingBottom: 7 } as const;\n/** The action slot: MUI's `4px 0 0 16px` with the 16px ours, pushed right, 8px into the padding. */\nexport const ACTION_SLOT = { paddingLeftUnits: 2, paddingTop: 4, marginRight: -8 } as const;\n/** The close button: MUI's small `IconButton` (5px padding, 18px glyph) at 0.7. */\nexport const CLOSE_BUTTON = { padding: 5, iconSize: 18, opacity: 0.7, washAlpha: 0.1 } as const;\n\n/**\n * A semantic Alert's surface and ink: an OPAQUE tint of the hue with a dark\n * ink of the same hue — MUI's own `standard` recipe, at its ratios. See\n * `semanticSurface` in `Alert.styles.tsx` for why not `alpha(main, 0.1)`.\n */\nexport const SEMANTIC_SURFACE = { tint: { light: 0.9, dark: 0.8 }, ink: 0.6, borderAlpha: 0.35 } as const;\n/** `glass`: 85% paper under a 20px blur, a 0.4 divider hairline. */\nexport const GLASS = { backgroundAlpha: 0.85, borderAlpha: 0.4, blur: 20, saturatePercent: 180 } as const;\n/**\n * `gradient`: light→dark at 0.9 along 135°, a 0.2 white shimmer sweeping 1000px every 3s.\n *\n * It carries no hover of its own, and that is load-bearing rather than an\n * omission. `alertVariantStyles` is spread AFTER the root's `'&:hover'` in the\n * same object literal, so a second `'&:hover'` key does not merge with it — it\n * REPLACES it. While this variant had one, `gradient` was the only alert that\n * brightened on hover while every other variant darkened, and the only one to\n * lose the shimmer reveal the root's hover performs.\n */\nexport const GRADIENT = {\n angleDeg: 135,\n stopAlpha: 0.9,\n shimmerAlpha: 0.2,\n shimmerMs: 3000,\n shimmerTravel: 1000,\n} as const;\n\n/** Emphasis: the glow's shadow and brightness, the pulse's wash. */\nexport const GLOW = { blur: 20, spread: 5, alpha: 0.3, brightness: 1.05 } as const;\nexport const PULSE = { alpha: 0.2, ms: 2000, spread: 10 } as const;\n\n/**\n * Pointer states — DOM only, kept so the web derives them.\n *\n * HOVER and ACTIVE carry NO geometry, and that is the point rather than an\n * omission. They used to lift the card 3px, scale it 1.01, grow a 20px shadow\n * and spin the icon 10deg at 1.15 — four things moving at once on a surface\n * that is not a control, which made a page of alerts twitch under the pointer.\n *\n * Both are a TINT now: a flat inset layer over the surface. Two mechanisms\n * came before it and each failed on a case the next had to fix. Dropping the\n * element's `opacity` composites toward the PAGE, so it inverted the hover on\n * a light tint (L* 95.0 idle, 89.1 hovered, 91.1 pressed) and vanished on a\n * dark one. A `filter: brightness()` fixed the direction but is MULTIPLICATIVE,\n * so it moved a near-black `glass` by four counts (ΔE76 1.71, under the JND)\n * and Banner's 10%-alpha wash by ΔE76 0.44. A layer is additive: it reads the\n * same on an opaque tint, a translucent wash and a gradient, and because it\n * paints above the background and below the content the ink keeps its own\n * contrast.\n */\nexport const HOVER = { tintAlpha: 0.06 } as const;\n\n/**\n * The press: a 20% tint LAYER, eased back fast.\n *\n * The layer is the point. The first attempt dropped the whole element's\n * opacity, which composites toward the PAGE and so behaves differently on\n * every surface it is asked about. Measured: over a light page it made a light\n * tint LIGHTER (L* 95.0 idle, 89.1 hovered, 91.1 pressed), so pushing the\n * surface looked like the pointer leaving; over a dark page it landed back on\n * the idle surface (ΔE76 0.82 on `glass`); on `gradient` it washed white body\n * copy to 2.31:1, under AA; and it diluted the ink during a text-selection\n * drag. A `brightness()` step instead of it fixed the direction but not the\n * reach — a multiplier does nothing to a near-black `glass` in dark mode\n * (ΔE76 1.71) and nothing to Banner's 10%-alpha wash (ΔE76 0.44), because it\n * scales only what the element already paints.\n *\n * An inset shadow at 100vmax is a flat tint over the whole surface: ADDITIVE,\n * so it reads the same on an opaque tint, a translucent wash and a gradient;\n * painted above the background and below the content, so the ink keeps its\n * own contrast; and animatable, which `background-image` is not.\n *\n * `ms` is 250 and not the 1000 first asked for, and the reason is that ONE\n * property carries both states. CSS runs a transition from the DESTINATION\n * state's declaration, and entering hover and releasing a press share that\n * destination — so they cannot have different durations without a second\n * animatable property, and both free pseudo-elements are already spent on the\n * `gradient` shimmer and the `pulse` wash. At 1000ms the hover inherited the\n * second: crossing an alert in 300ms peaked at a ≈ 0.024, under the JND, and\n * for ~360ms the alert you had just LEFT was darker than the one under the\n * pointer. A fast press-return is the smaller loss, and it is the call the\n * product owner made when shown both.\n */\nexport const ACTIVE = { tintAlpha: 0.2, ms: 250 } as const;\n\nexport const FOCUS = { ringWidth: 2, ringAlpha: 1, offset: 2 } as const;\n\n/** `neutral` has no palette slot; the web has always drawn it from three greys. */\nexport const NEUTRAL_GREY: Record<'main' | 'light' | 'dark', UiGreyStep> = { main: 500, light: 300, dark: 700 };\n\n/** A duration as the CSS the web has always emitted: `2000` → `2s`, `300` → `0.3s`. */\nexport const seconds = (ms: number): string => `${ms / 1000}s`;\n\n/** The palette shape the web's `getColorFromTheme` returns — a main plus optional shades. */\nexport interface AlertPalette {\n main: string;\n light?: string;\n dark?: string;\n}\n\n/**\n * The renderer-free twin of the web's `getColorFromTheme`: a variant or\n * colour name to its palette, `neutral` from the greys, anything unknown\n * (`glass`, `gradient`) to `info`.\n */\nexport function alertPalette(theme: UiTheme, key: string | undefined): AlertPalette {\n switch (key) {\n case 'info':\n case 'success':\n case 'warning':\n case 'danger':\n case 'primary':\n case 'secondary':\n return theme.palette[key];\n case 'neutral':\n return {\n main: NEUTRAL_RAMP[NEUTRAL_GREY.main],\n light: NEUTRAL_RAMP[NEUTRAL_GREY.light],\n dark: NEUTRAL_RAMP[NEUTRAL_GREY.dark],\n };\n default:\n return theme.palette.info;\n }\n}\n\n/** What a variant paints: its fill, its ink, its hairline if any, and the colour of its glyph. */\nexport interface AlertSurface {\n backgroundColor: string;\n color: string;\n borderColor?: string;\n iconColor: string;\n}\n\nexport const SEMANTIC_VARIANTS: ReadonlySet<AlertVariant> = new Set(['info', 'success', 'warning', 'danger']);\n\n/** The opaque tint and same-hue ink, inverted for dark mode; the hairline keeps its alpha. */\nexport function semanticSurface(theme: UiTheme, palette: AlertPalette): AlertSurface {\n const dark = theme.mode === 'dark';\n return {\n backgroundColor: dark\n ? darken(palette.main, SEMANTIC_SURFACE.tint.dark)\n : lighten(palette.main, SEMANTIC_SURFACE.tint.light),\n color: dark ? lighten(palette.main, SEMANTIC_SURFACE.ink) : darken(palette.main, SEMANTIC_SURFACE.ink),\n borderColor: alpha(palette.main, SEMANTIC_SURFACE.borderAlpha),\n iconColor: palette.main,\n };\n}\n\nexport function glassSurface(theme: UiTheme): AlertSurface {\n return {\n backgroundColor: alpha(theme.palette.background.paper, GLASS.backgroundAlpha),\n color: theme.palette.text.primary,\n borderColor: alpha(theme.palette.divider, GLASS.borderAlpha),\n iconColor: theme.palette.primary.main,\n };\n}\n\n/** The gradient's two stops; a renderer with no gradient fill paints `from`. */\nexport function gradientStops(palette: AlertPalette): { from: string; to: string } {\n return {\n from: alpha(palette.light || palette.main, GRADIENT.stopAlpha),\n to: alpha(palette.dark || palette.main, GRADIENT.stopAlpha),\n };\n}\n\nexport function gradientSurface(palette: AlertPalette): AlertSurface {\n const ink = contrastText(palette.main);\n return { backgroundColor: gradientStops(palette).from, color: ink, iconColor: ink };\n}\n\n/** The surface for a variant, `glass` and `gradient` included. */\nexport function alertSurface(theme: UiTheme, variant: AlertVariant, palette: AlertPalette): AlertSurface {\n if (variant === 'glass') return glassSurface(theme);\n if (variant === 'gradient') return gradientSurface(palette);\n return semanticSurface(theme, palette);\n}\n","import type { TextStyle, ViewStyle } from 'react-native';\n\nimport type { AlertVariant } from './Alert.base';\nimport {\n ACTION_SLOT,\n ALERT_PADDING_UNITS,\n ALERT_RADIUS_UNITS,\n type AlertPalette,\n alertPalette,\n alertSurface,\n CLOSE_BUTTON,\n DESCRIPTION,\n GLOW,\n ICON_SLOT,\n MESSAGE_FONT_SIZE,\n MESSAGE_GAP_UNITS,\n MESSAGE_LINE_HEIGHT,\n TITLE,\n} from './Alert.metrics';\nimport { alpha } from '../../../tokens/color';\nimport { muiTypeStyle } from '../../../tokens/mui-type';\nimport type { UiTheme } from '../../../tokens/theme';\nimport type { ColorValue } from '../../../tokens/vocabulary';\n\n/**\n * THE PAINT, KEPT APART FROM THE STRUCTURE.\n *\n * `Alert.native.tsx` reads as what renders where; this file reads as\n * arithmetic — the same palette slots, alphas and px the web's\n * `Alert.styles.tsx` derives from `Alert.metrics.ts`.\n */\n\nexport interface AlertLookArgs {\n variant: AlertVariant;\n color: ColorValue | undefined;\n glow: boolean;\n pulse: boolean;\n}\n\nexport interface AlertLook {\n palette: AlertPalette;\n /** What the words are set in. */\n ink: string;\n iconColor: string;\n root: ViewStyle;\n}\n\n/**\n * The root's paint. The web keeps `overflow: hidden` (its pulse wash is\n * clipped to the card, as it is here); only the glow opens it, because a\n * view's own shadow is clipped by its own overflow on a device.\n */\nexport function alertLook(theme: UiTheme, a: AlertLookArgs): AlertLook {\n const palette = alertPalette(theme, a.color ?? a.variant);\n const surface = alertSurface(theme, a.variant, palette);\n const root: ViewStyle = {\n flexDirection: 'row',\n paddingVertical: theme.spacing(ALERT_PADDING_UNITS.vertical),\n paddingHorizontal: theme.spacing(ALERT_PADDING_UNITS.horizontal),\n borderRadius: theme.spacing(ALERT_RADIUS_UNITS),\n overflow: a.glow ? 'visible' : 'hidden',\n backgroundColor: surface.backgroundColor,\n ...(surface.borderColor ? { borderWidth: 1, borderColor: surface.borderColor } : {}),\n ...(a.glow\n ? {\n boxShadow: `0 0 ${GLOW.blur}px ${GLOW.spread}px ${alpha(palette.main, GLOW.alpha)}`,\n filter: `brightness(${GLOW.brightness})`,\n }\n : {}),\n };\n return { palette, ink: surface.color, iconColor: surface.iconColor, root };\n}\n\n/** The message column: 8px between its lines, allowed to shrink so long text wraps beside the icon. */\nexport const messageSlotStyle = (theme: UiTheme): ViewStyle => ({\n flexDirection: 'column',\n gap: theme.spacing(MESSAGE_GAP_UNITS),\n flexShrink: 1,\n minWidth: 0,\n});\n\n/** A string child: MUI's `body2` letter-spacing at 0.95rem on the message's 1.5. */\nexport const messageTextStyle = (theme: UiTheme, ink: string): TextStyle => ({\n ...muiTypeStyle(theme, 'body2', MESSAGE_FONT_SIZE),\n lineHeight: MESSAGE_FONT_SIZE * MESSAGE_LINE_HEIGHT,\n color: ink,\n});\n\n/** MUI's `AlertTitle` (a `body1` Typography) at 1.05rem and 600, lifted 2px, 4px above a description. */\nexport const titleStyle = (theme: UiTheme, ink: string, hasDescription: boolean): TextStyle => ({\n ...muiTypeStyle(theme, 'body1', TITLE.fontSize),\n fontWeight: `${TITLE.fontWeight}`,\n color: ink,\n marginTop: TITLE.marginTop,\n marginBottom: hasDescription ? theme.spacing(TITLE.marginBottomUnits) : 0,\n});\n\n/** The description: 0.925rem on the message's 1.5, faded to 0.9. */\nexport const descriptionStyle = (theme: UiTheme, ink: string): TextStyle => ({\n ...muiTypeStyle(theme, 'body2', DESCRIPTION.fontSize),\n lineHeight: DESCRIPTION.fontSize * MESSAGE_LINE_HEIGHT,\n color: ink,\n opacity: DESCRIPTION.opacity,\n});\n\n/** MUI's `.MuiAlert-icon` with the web's overrides: first-line aligned, 14px from the words, 2px down. */\nexport const iconSlotStyle = (theme: UiTheme): ViewStyle => ({\n alignSelf: 'flex-start',\n alignItems: 'center',\n marginRight: theme.spacing(ICON_SLOT.marginRightUnits),\n paddingTop: theme.spacing(ICON_SLOT.paddingTopUnits),\n paddingBottom: ICON_SLOT.paddingBottom,\n opacity: ICON_SLOT.opacity,\n});\n\n/** MUI's `.MuiAlert-action`: top-aligned, pushed to the right edge, 16px off the text. */\nexport const actionSlotStyle = (theme: UiTheme): ViewStyle => ({\n alignItems: 'flex-start',\n paddingTop: ACTION_SLOT.paddingTop,\n paddingLeft: theme.spacing(ACTION_SLOT.paddingLeftUnits),\n marginLeft: 'auto',\n marginRight: ACTION_SLOT.marginRight,\n});\n\n/** MUI's small `IconButton` at 0.7; pressed stands in for the web's hover (full opacity, a faint wash). */\nexport const closeButtonStyle = (theme: UiTheme, pressed: boolean): ViewStyle => ({\n padding: CLOSE_BUTTON.padding,\n borderRadius: theme.radius.full,\n opacity: pressed ? 1 : CLOSE_BUTTON.opacity,\n backgroundColor: pressed ? alpha(theme.palette.action.hover, CLOSE_BUTTON.washAlpha) : 'transparent',\n});\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/data-display/Alert/Alert.native.tsx","../../../src/components/data-display/Alert/Alert.helpers.ts","../../../src/components/data-display/Alert/Alert.metrics.ts","../../../src/components/data-display/Alert/Alert.look.native.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n Animated,\n Easing,\n type LayoutChangeEvent,\n Platform,\n Pressable,\n type Role,\n StyleSheet,\n Text as RNText,\n View,\n type ViewStyle,\n} from 'react-native';\n\nimport { resolveAlertProps, resolveAnnouncement, testIdFor, VARIANT_ICON } from './Alert.helpers';\nimport {\n actionSlotStyle,\n alertLook,\n closeButtonStyle,\n descriptionStyle,\n iconSlotStyle,\n messageSlotStyle,\n messageTextStyle,\n titleStyle,\n} from './Alert.look.native';\nimport { CLOSE_BUTTON, CLOSE_DELAY_MS, COLLAPSE_MS, FADE_IN, ICON_SLOT, ICON_SPIN, PULSE } from './Alert.metrics';\nimport type { AlertProps, AlertVariant } from './Alert.types.native';\nimport { Icon } from '../../../icons/Icon.native';\nimport { webAria } from '../../../platform/aria';\nimport { renderTextChildren } from '../../../platform/text-children';\nimport { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\n\ntype AnimatedStyle = Animated.WithAnimatedValue<ViewStyle>;\nconst nativeDriver = Platform.OS !== 'web';\n\n/** A 0→1 progress that starts on mount when `animate` is set, else sits at 1. */\nfunction useProgress(animate: boolean, duration: number): Animated.Value {\n const progress = React.useRef(new Animated.Value(animate ? 0 : 1)).current;\n React.useEffect(() => {\n if (!animate) return undefined;\n const timing = Animated.timing(progress, { toValue: 1, duration, easing: Easing.out(Easing.ease), useNativeDriver: nativeDriver });\n timing.start();\n return () => timing.stop();\n }, [animate, duration, progress]);\n return progress;\n}\n\n/** The web's `fadeInScale` keyframes: in from 0 opacity, 0.95 scale and 10px above, over 300ms. */\nfunction useFadeIn(animate: boolean): AnimatedStyle | undefined {\n const progress = useProgress(animate, FADE_IN.ms);\n if (!animate) return undefined;\n return {\n opacity: progress,\n transform: [\n { scale: progress.interpolate({ inputRange: [0, 1], outputRange: [FADE_IN.scale, 1] }) },\n { translateY: progress.interpolate({ inputRange: [0, 1], outputRange: [-FADE_IN.lift, 0] }) },\n ],\n };\n}\n\n/** The web's `iconRotate` keyframes: one full turn, 0.8 → 1.1 → 1, over 600ms. */\nfunction useIconSpin(animate: boolean): AnimatedStyle | undefined {\n const progress = useProgress(animate, ICON_SPIN.ms);\n if (!animate) return undefined;\n return {\n transform: [\n { rotate: progress.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '360deg'] }) },\n { scale: progress.interpolate({ inputRange: [0, 0.5, 1], outputRange: [ICON_SPIN.from, ICON_SPIN.mid, 1] }) },\n ],\n };\n}\n\n/** The web's `::after` pulse: a wash of the hue over the card, fading out every two seconds, behind the words. */\nfunction Pulse({ color, radius, testID }: { color: string; radius: number; testID: string }): React.JSX.Element {\n const progress = React.useRef(new Animated.Value(0)).current;\n React.useEffect(() => {\n const loop = Animated.loop(\n Animated.timing(progress, { toValue: 1, duration: PULSE.ms, easing: Easing.linear, useNativeDriver: nativeDriver }),\n );\n loop.start();\n return () => loop.stop();\n }, [progress]);\n return (\n <Animated.View\n testID={testID}\n aria-hidden\n style={[\n StyleSheet.absoluteFill,\n {\n pointerEvents: 'none',\n borderRadius: radius,\n backgroundColor: color,\n opacity: progress.interpolate({ inputRange: [0, 0.7, 1], outputRange: [PULSE.alpha, 0, 0] }),\n },\n ]}\n />\n );\n}\n\n/**\n * MUI's `Collapse`: open, it is a plain wrapper with its overflow visible (so\n * a glow can escape); closing, it clips and shrinks over 300ms, then says so.\n */\nfunction Collapse({ open, onCollapsed, children }: { open: boolean; onCollapsed: () => void; children: React.ReactNode }): React.JSX.Element {\n const [height, setHeight] = React.useState<number | null>(null);\n const progress = React.useRef(new Animated.Value(1)).current;\n React.useEffect(() => {\n if (open) return undefined;\n const timing = Animated.timing(progress, { toValue: 0, duration: COLLAPSE_MS, easing: Easing.inOut(Easing.ease), useNativeDriver: false });\n timing.start(({ finished }) => {\n if (finished) onCollapsed();\n });\n return () => timing.stop();\n }, [open, onCollapsed, progress]);\n const onLayout = (event: LayoutChangeEvent): void => {\n if (open) setHeight(event.nativeEvent.layout.height);\n };\n const shrink: AnimatedStyle = height == null ? {} : { maxHeight: progress.interpolate({ inputRange: [0, 1], outputRange: [0, height] }) };\n return (\n <Animated.View style={[{ overflow: open ? 'visible' : 'hidden', opacity: progress }, shrink]}>\n <View onLayout={onLayout}>{children}</View>\n </Animated.View>\n );\n}\n\ninterface IconSlotProps {\n variant: AlertVariant;\n icon: React.ReactNode;\n color: string;\n animate: boolean;\n testID: string;\n}\n\n/** The icon slot; `glass` and `gradient` have no glyph of their own, so theirs is empty unless an `icon` is given — as on the web. */\nfunction IconSlot({ variant, icon, color, animate, testID }: IconSlotProps): React.JSX.Element {\n const theme = useUiTheme();\n const spin = useIconSpin(animate);\n const glyph = VARIANT_ICON[variant];\n return (\n <Animated.View testID={testID} style={[iconSlotStyle(theme), spin]}>\n {icon || (glyph ? <Icon name={glyph} size={ICON_SLOT.size} color={color} /> : null)}\n </Animated.View>\n );\n}\n\nfunction CloseButton({ label, ink, onPress, testID }: { label: string | undefined; ink: string; onPress: () => void; testID: string }): React.JSX.Element {\n const theme = useUiTheme();\n return (\n <Pressable role=\"button\" aria-label={label} testID={testID} onPress={onPress} style={({ pressed }) => closeButtonStyle(theme, pressed)}>\n <Icon name=\"Close\" size={CLOSE_BUTTON.iconSize} color={ink} />\n </Pressable>\n );\n}\n\ninterface ContentProps {\n title?: string;\n description?: string;\n children?: React.ReactNode;\n ink: string;\n testId: string;\n}\n\nfunction AlertContent({ title, description, children, ink, testId }: ContentProps): React.JSX.Element {\n const theme = useUiTheme();\n return (\n <View style={messageSlotStyle(theme)}>\n {title ? (\n <RNText testID={testIdFor(testId, 'title')} style={titleStyle(theme, ink, Boolean(description))}>\n {title}\n </RNText>\n ) : null}\n {description ? (\n <RNText testID={testIdFor(testId, 'message')} style={descriptionStyle(theme, ink)}>\n {description}\n </RNText>\n ) : null}\n {renderTextChildren(children, messageTextStyle(theme, ink))}\n </View>\n );\n}\n\n/** The dismiss sequence the web runs: mark closing, fire `onClose` 200ms in, stay until the collapse has run. */\nfunction useDismiss(onClose: (() => void) | undefined): { open: boolean; gone: boolean; close: () => void; onCollapsed: () => void } {\n const [closing, setClosing] = React.useState(false);\n const [gone, setGone] = React.useState(false);\n const timer = React.useRef<ReturnType<typeof setTimeout> | null>(null);\n React.useEffect(() => () => {\n if (timer.current) clearTimeout(timer.current);\n }, []);\n const close = (): void => {\n setClosing(true);\n timer.current = setTimeout(() => onClose?.(), CLOSE_DELAY_MS);\n };\n const onCollapsed = React.useCallback(() => setGone(true), []);\n return { open: !closing, gone, close, onCollapsed };\n}\n\nexport const Alert = React.forwardRef<View, AlertProps>((alertProps, ref) => {\n const {\n variant, color, glow, pulse, icon, showIcon, onClose, title, description, children, animate,\n // `role`, `announce` and `aria-live` all leave here and are resolved\n // TOGETHER below, off `alertProps` — see `resolveAnnouncement`.\n role: _role, announce: _announce,\n 'aria-atomic': ariaAtomic, 'aria-live': _ariaLive, closable, closeLabel, style, ...others\n } = resolveAlertProps(alertProps);\n const theme = useUiTheme();\n const testId = resolveTestId(others, 'alert') as string;\n const rest = withoutTestIdProps(others);\n const look = alertLook(theme, { variant, color, glow, pulse });\n const fadeIn = useFadeIn(animate);\n const dismiss = useDismiss(onClose);\n const announcement = resolveAnnouncement(alertProps, variant);\n\n if (dismiss.gone) return null;\n return (\n <Collapse open={dismiss.open} onCollapsed={dismiss.onCollapsed}>\n <Animated.View\n ref={ref}\n role={announcement.role as Role}\n aria-live={announcement['aria-live']}\n {...webAria({ 'aria-atomic': ariaAtomic })}\n tabIndex={0}\n testID={testId}\n style={[look.root, fadeIn, style]}\n {...rest}\n >\n {pulse ? <Pulse color={look.palette.main} radius={look.root.borderRadius as number} testID={testIdFor(testId, 'pulse')} /> : null}\n {showIcon ? <IconSlot variant={variant} icon={icon} color={look.iconColor} animate={animate} testID={testIdFor(testId, 'icon')} /> : null}\n <AlertContent title={title} description={description} ink={look.ink} testId={testId}>\n {children}\n </AlertContent>\n {closable ? (\n <View style={actionSlotStyle(theme)}>\n <CloseButton label={closeLabel} ink={look.ink} onPress={dismiss.close} testID={testIdFor(testId, 'close')} />\n </View>\n ) : null}\n </Animated.View>\n </Collapse>\n );\n});\n\nAlert.displayName = 'Alert';\n","import type { AlertBaseFields, AlertVariant } from './Alert.base';\nimport type { IconName } from '../../../icons/Icon.types';\n\ntype AlertDefaultedKeys = 'variant' | 'glow' | 'pulse' | 'showIcon' | 'animate' | 'role' | 'aria-atomic';\n\nexport const ALERT_DEFAULTS: Required<Pick<AlertBaseFields, AlertDefaultedKeys>> & { closable: false } = {\n variant: 'info',\n glow: false,\n pulse: false,\n showIcon: true,\n closable: false,\n animate: true,\n role: 'alert',\n 'aria-atomic': 'true',\n};\n\n/**\n * Generic over the renderer's own props: the web and the native `Alert` pass\n * different extras through, and both come back out untouched.\n */\nexport type ResolvedAlertProps<P extends AlertBaseFields> = P &\n Required<Pick<AlertBaseFields, AlertDefaultedKeys>>;\n\n// Strips explicitly-undefined props before the merge so `prop={undefined}` still\n// falls back to the default, the way a destructuring default would.\nconst definedProps = <P extends AlertBaseFields>(props: P): Partial<P> =>\n Object.fromEntries(\n Object.entries(props).filter(([, value]) => value !== undefined),\n ) as Partial<P>;\n\n// Through `unknown`: `closable: false` in the defaults belongs to the dismiss\n// union rather than to `AlertBaseFields`, so TypeScript cannot see the merge as\n// comparable to `P` although every field of `P` survives it untouched.\nexport const resolveAlertProps = <P extends AlertBaseFields>(props: P): ResolvedAlertProps<P> =>\n ({ ...ALERT_DEFAULTS, ...definedProps(props) }) as unknown as ResolvedAlertProps<P>;\n\n/** `danger` announces itself; everything else waits its turn. */\nexport const defaultAriaLive = (variant: AlertVariant): 'polite' | 'assertive' =>\n variant === 'danger' ? 'assertive' : 'polite';\n\n/**\n * The ARIA role each `announce` level is spelled with.\n *\n * Both roles carry an IMPLICIT live setting, and that implicit one is what\n * assistive tech acts on — `alert` is assertive, `status` is polite. Pairing\n * them here is what stops `role` and `aria-live` from contradicting each\n * other, which they do by default: every alert is `role=\"alert\"` regardless of\n * variant, so an `info` alert asks to be polite in one attribute and to\n * interrupt in the other.\n */\nexport const ANNOUNCE_ROLE: Record<NonNullable<AlertBaseFields['announce']>, string> = {\n assertive: 'alert',\n polite: 'status',\n};\n\n/**\n * The two attributes that decide whether an alert interrupts, resolved TOGETHER.\n *\n * Both renderers therefore let `role` and `announce` leave their destructure\n * unused (`_role`, `_announce`) and call this instead — the first because the\n * defaults have already answered it, the second because it must never reach\n * the DOM.\n *\n * Reads the caller's own props rather than the defaulted ones, because the\n * whole question is which of them the caller actually spelled:\n * {@link ALERT_DEFAULTS} supplies `role: 'alert'` for everything, so after the\n * merge there is no longer any difference between an alert that asked to\n * interrupt and one that never mentioned it.\n *\n * Precedence, most specific first — an explicit `role` or `aria-live` beats\n * `announce`, so a call site that already spells either by hand is untouched:\n *\n * 1. `role` / `aria-live` as given;\n * 2. {@link AlertBaseFields.announce}, which supplies both;\n * 3. today's behaviour — `ALERT_DEFAULTS.role` and {@link defaultAriaLive}.\n *\n * With none of the three named, the result is byte-for-byte what it was before\n * `announce` existed.\n */\nexport const resolveAnnouncement = (\n props: Pick<AlertBaseFields, 'announce' | 'role' | 'aria-live'>,\n variant: AlertVariant,\n): { role: string; 'aria-live': 'polite' | 'assertive' | 'off' } => {\n const announce = props.announce;\n return {\n role: props.role ?? (announce === undefined ? ALERT_DEFAULTS.role : ANNOUNCE_ROLE[announce]),\n 'aria-live': props['aria-live'] ?? announce ?? defaultAriaLive(variant),\n };\n};\n\nexport const testIdFor = (base: string | undefined, suffix: string): string =>\n base ? `${base}-${suffix}` : `alert-${suffix}`;\n\n/**\n * The glyph each semantic variant carries, by the shared icon set's name.\n * `glass` and `gradient` carry none of their own: the web renders an empty\n * icon slot for them unless the caller passes an `icon`, and so does native.\n */\nexport const VARIANT_ICON: Partial<Record<AlertVariant, IconName>> = {\n info: 'Info',\n success: 'CheckCircle',\n warning: 'Warning',\n danger: 'Error',\n};\n","import type { AlertVariant } from './Alert.base';\nimport { alpha, darken, lighten } from '../../../tokens/color';\nimport { NEUTRAL_RAMP } from '../../../tokens/ink.core';\nimport { contrastText, type UiGreyStep, type UiTheme } from '../../../tokens/theme';\n\n/**\n * THE NUMBERS BOTH `Alert` RENDERERS DRAW WITH.\n *\n * `Alert.styles.tsx` / `Alert.tsx` (MUI) and `Alert.native.tsx` (React\n * Native) read this one table. Spacing is in SPACING UNITS where the web\n * writes `theme.spacing(n)`; durations are ms (the web turns them into `s`\n * through {@link seconds} so its emitted CSS is byte-for-byte what it was);\n * everything else is px, a ratio or an alpha. The hover, active and focus\n * numbers are here too although only the DOM can honour them — a number the\n * web draws with belongs in the table whether or not native can reach it.\n */\n\n/** The root: 12px corners, 14px 16px of padding, one 300ms curve for everything. */\nexport const ALERT_RADIUS_UNITS = 1.5;\nexport const ALERT_PADDING_UNITS = { vertical: 1.75, horizontal: 2 } as const;\nexport const ALERT_TRANSITION_MS = 300;\nexport const ALERT_EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';\n\n/** Mount: the web's `fadeInScale` keyframes and the icon's `iconRotate`. */\nexport const FADE_IN = { ms: 300, scale: 0.95, lift: 10 } as const;\nexport const ICON_SPIN = { ms: 600, from: 0.8, mid: 1.1 } as const;\n/** Dismiss: MUI `Collapse` runs 300ms; `onClose` fires 200ms in. */\nexport const COLLAPSE_MS = 300;\nexport const CLOSE_DELAY_MS = 200;\n\n/** The message column: 8px between title, description and children; 0.95rem body on 1.5. */\nexport const MESSAGE_GAP_UNITS = 1;\nexport const MESSAGE_FONT_SIZE = 15.2;\nexport const MESSAGE_LINE_HEIGHT = 1.5;\n/** A control inside the message gets an edge: 4px above, a hairline at 0.45 of the hue. */\nexport const MESSAGE_BUTTON = { marginTopUnits: 0.5, borderAlpha: 0.45 } as const;\n\n/** The title: 1.05rem at 600; MUI's `AlertTitle` lifts it 2px; 4px below it when a description follows. */\nexport const TITLE = { fontSize: 16.8, fontWeight: 600, marginTop: -2, marginBottomUnits: 0.5 } as const;\n/** The description: 0.925rem, slightly faded. */\nexport const DESCRIPTION = { fontSize: 14.8, opacity: 0.9 } as const;\n\n/** The icon on the title's line (`iconPlacement: 'title'`): 10px from the title, centred on its first line (1.5). */\nexport const TITLE_ICON = { gapUnits: 1.25, lineHeight: 1.5 } as const;\n/** The icon slot: MUI's 22px glyph at 0.9, 14px from the words, 2px down (MUI's 7px stays below). */\nexport const ICON_SLOT = { size: 22, opacity: 0.9, marginRightUnits: 1.75, paddingTopUnits: 0.25, paddingBottom: 7 } as const;\n/** The action slot: MUI's `4px 0 0 16px` with the 16px ours, pushed right, 8px into the padding. */\nexport const ACTION_SLOT = { paddingLeftUnits: 2, paddingTop: 4, marginRight: -8 } as const;\n/** The close button: MUI's small `IconButton` (5px padding, 18px glyph) at 0.7. */\nexport const CLOSE_BUTTON = { padding: 5, iconSize: 18, opacity: 0.7, washAlpha: 0.1 } as const;\n\n/**\n * A semantic Alert's surface and ink: an OPAQUE tint of the hue with a dark\n * ink of the same hue — MUI's own `standard` recipe, at its ratios. See\n * `semanticSurface` in `Alert.styles.tsx` for why not `alpha(main, 0.1)`.\n */\nexport const SEMANTIC_SURFACE = { tint: { light: 0.9, dark: 0.8 }, ink: 0.6, borderAlpha: 0.35 } as const;\n/** `glass`: 85% paper under a 20px blur, a 0.4 divider hairline. */\nexport const GLASS = { backgroundAlpha: 0.85, borderAlpha: 0.4, blur: 20, saturatePercent: 180 } as const;\n/**\n * `gradient`: light→dark at 0.9 along 135°, a 0.2 white shimmer sweeping 1000px every 3s.\n *\n * It carries no hover of its own, and that is load-bearing rather than an\n * omission. `alertVariantStyles` is spread AFTER the root's `'&:hover'` in the\n * same object literal, so a second `'&:hover'` key does not merge with it — it\n * REPLACES it. While this variant had one, `gradient` was the only alert that\n * brightened on hover while every other variant darkened, and the only one to\n * lose the shimmer reveal the root's hover performs.\n */\nexport const GRADIENT = {\n angleDeg: 135,\n stopAlpha: 0.9,\n shimmerAlpha: 0.2,\n shimmerMs: 3000,\n shimmerTravel: 1000,\n} as const;\n\n/** Emphasis: the glow's shadow and brightness, the pulse's wash. */\nexport const GLOW = { blur: 20, spread: 5, alpha: 0.3, brightness: 1.05 } as const;\nexport const PULSE = { alpha: 0.2, ms: 2000, spread: 10 } as const;\n\n/**\n * Pointer states — DOM only, kept so the web derives them.\n *\n * HOVER and ACTIVE carry NO geometry, and that is the point rather than an\n * omission. They used to lift the card 3px, scale it 1.01, grow a 20px shadow\n * and spin the icon 10deg at 1.15 — four things moving at once on a surface\n * that is not a control, which made a page of alerts twitch under the pointer.\n *\n * Both are a TINT now: a flat inset layer over the surface. Two mechanisms\n * came before it and each failed on a case the next had to fix. Dropping the\n * element's `opacity` composites toward the PAGE, so it inverted the hover on\n * a light tint (L* 95.0 idle, 89.1 hovered, 91.1 pressed) and vanished on a\n * dark one. A `filter: brightness()` fixed the direction but is MULTIPLICATIVE,\n * so it moved a near-black `glass` by four counts (ΔE76 1.71, under the JND)\n * and Banner's 10%-alpha wash by ΔE76 0.44. A layer is additive: it reads the\n * same on an opaque tint, a translucent wash and a gradient.\n *\n * Painting above the background and below the content keeps the layer off the\n * INK, but not off the ink's CONTRAST: the layer moves the surface toward the\n * mode's absolute, which is the side the ink is on, so the two close in. That\n * is what {@link POINTER_INK_STEP} answers (FUT-4506).\n */\nexport const HOVER = { tintAlpha: 0.06 } as const;\n\n/**\n * The press: a 20% tint LAYER, eased back fast.\n *\n * The layer is the point. The first attempt dropped the whole element's\n * opacity, which composites toward the PAGE and so behaves differently on\n * every surface it is asked about. Measured: over a light page it made a light\n * tint LIGHTER (L* 95.0 idle, 89.1 hovered, 91.1 pressed), so pushing the\n * surface looked like the pointer leaving; over a dark page it landed back on\n * the idle surface (ΔE76 0.82 on `glass`); on `gradient` it washed white body\n * copy to 2.31:1, under AA; and it diluted the ink during a text-selection\n * drag. A `brightness()` step instead of it fixed the direction but not the\n * reach — a multiplier does nothing to a near-black `glass` in dark mode\n * (ΔE76 1.71) and nothing to Banner's 10%-alpha wash (ΔE76 0.44), because it\n * scales only what the element already paints.\n *\n * An inset shadow at 100vmax is a flat tint over the whole surface: ADDITIVE,\n * so it reads the same on an opaque tint, a translucent wash and a gradient;\n * painted above the background and below the content, so it never dims the\n * ink itself; and animatable, which `background-image` is not. It DOES dim the\n * ink's contrast, because it darkens a light surface toward a dark ink (and\n * lightens a dark one toward a light ink) — on Alert, {@link POINTER_INK_STEP}\n * is the other half of the press.\n *\n * `ms` is 250 and not the 1000 first asked for, and the reason is that ONE\n * property carries both states. CSS runs a transition from the DESTINATION\n * state's declaration, and entering hover and releasing a press share that\n * destination — so they cannot have different durations without a second\n * animatable property, and both free pseudo-elements are already spent on the\n * `gradient` shimmer and the `pulse` wash. At 1000ms the hover inherited the\n * second: crossing an alert in 300ms peaked at a ≈ 0.024, under the JND, and\n * for ~360ms the alert you had just LEFT was darker than the one under the\n * pointer. A fast press-return is the smaller loss, and it is the call the\n * product owner made when shown both.\n */\nexport const ACTIVE = { tintAlpha: 0.2, ms: 250 } as const;\n\n/**\n * How far the MESSAGE ink — title, description and children — steps toward the\n * absolute on its own side while the alert is hovered or pressed (FUT-4506,\n * option C).\n *\n * The tint layer above moves the surface toward the mode's absolute — black in\n * light mode, white in dark — which is the side the ink sits on, so every\n * pointer state CLOSED the gap the ink is read across. Measured on a host pane\n * whose summary sat at 4.71:1 idle: 4.22 hovered, 3.17 pressed in light mode,\n * and down to 2.68 pressed in dark. The title, at 16.8px/600, is not WCAG\n * \"large\" text, so it is held to 4.5:1 as well.\n *\n * The answer keeps the layer (the pointer still gets its feedback) and moves\n * the ink FURTHER the same way, so the gap re-opens. The amounts are the\n * prototype's measured steps on that host pane, the worst case in reach: they\n * hold the 0.9 summary at 4.75–6.07:1 there, and at 6.38:1 or more on this\n * package's default palette in both modes. White needs the bigger step because\n * a light ink has less room above it than a dark ink has below it, and dark\n * mode's pressed step needs at least 0.55.\n *\n * Keyed by the absolute the ink moves TOWARD, which is the mode's: black in\n * light mode, white in dark. The web applies the step as `color-mix()` over\n * `currentColor`, so its AMOUNT lands on whatever ink is actually painted — a\n * host's repaint of a semantic or `glass` alert included. Its DIRECTION is the\n * mode's, which is only safe where the surface tracks the mode, so `gradient`\n * is not stepped at all (`inkAbsolute` in `Alert.ink.ts`): a host that\n * repaints it to a light pane and a dark ink would otherwise have its ink\n * stepped toward white under a black layer. DOM only; native has no pointer\n * states. `Banner` paints the same tint and does not step yet.\n */\nexport const POINTER_INK_STEP = {\n hover: { black: 0.15, white: 0.2 },\n press: { black: 0.35, white: 0.6 },\n} as const;\n\n/**\n * Both pointer states as a host reads them: the tint layer's alpha and the ink\n * step, per absolute. Exported (as `ALERT_POINTER_STATES`) so a theme that\n * repaints the alert's pane and ink can assert its own tones still clear 4.5:1\n * hovered and pressed, against the numbers the package actually draws with.\n */\nexport const POINTER_STATES = {\n hover: { tintAlpha: HOVER.tintAlpha, inkStep: POINTER_INK_STEP.hover },\n press: { tintAlpha: ACTIVE.tintAlpha, inkStep: POINTER_INK_STEP.press },\n} as const;\n\nexport const FOCUS = { ringWidth: 2, ringAlpha: 1, offset: 2 } as const;\n\n/** `neutral` has no palette slot; the web has always drawn it from three greys. */\nexport const NEUTRAL_GREY: Record<'main' | 'light' | 'dark', UiGreyStep> = { main: 500, light: 300, dark: 700 };\n\n/** A duration as the CSS the web has always emitted: `2000` → `2s`, `300` → `0.3s`. */\nexport const seconds = (ms: number): string => `${ms / 1000}s`;\n\n/** The palette shape the web's `getColorFromTheme` returns — a main plus optional shades. */\nexport interface AlertPalette {\n main: string;\n light?: string;\n dark?: string;\n}\n\n/**\n * The renderer-free twin of the web's `getColorFromTheme`: a variant or\n * colour name to its palette, `neutral` from the greys, anything unknown\n * (`glass`, `gradient`) to `info`.\n */\nexport function alertPalette(theme: UiTheme, key: string | undefined): AlertPalette {\n switch (key) {\n case 'info':\n case 'success':\n case 'warning':\n case 'danger':\n case 'primary':\n case 'secondary':\n return theme.palette[key];\n case 'neutral':\n return {\n main: NEUTRAL_RAMP[NEUTRAL_GREY.main],\n light: NEUTRAL_RAMP[NEUTRAL_GREY.light],\n dark: NEUTRAL_RAMP[NEUTRAL_GREY.dark],\n };\n default:\n return theme.palette.info;\n }\n}\n\n/** What a variant paints: its fill, its ink, its hairline if any, and the colour of its glyph. */\nexport interface AlertSurface {\n backgroundColor: string;\n color: string;\n borderColor?: string;\n iconColor: string;\n}\n\nexport const SEMANTIC_VARIANTS: ReadonlySet<AlertVariant> = new Set(['info', 'success', 'warning', 'danger']);\n\n/** The opaque tint and same-hue ink, inverted for dark mode; the hairline keeps its alpha. */\nexport function semanticSurface(theme: UiTheme, palette: AlertPalette): AlertSurface {\n const dark = theme.mode === 'dark';\n return {\n backgroundColor: dark\n ? darken(palette.main, SEMANTIC_SURFACE.tint.dark)\n : lighten(palette.main, SEMANTIC_SURFACE.tint.light),\n color: dark ? lighten(palette.main, SEMANTIC_SURFACE.ink) : darken(palette.main, SEMANTIC_SURFACE.ink),\n borderColor: alpha(palette.main, SEMANTIC_SURFACE.borderAlpha),\n iconColor: palette.main,\n };\n}\n\nexport function glassSurface(theme: UiTheme): AlertSurface {\n return {\n backgroundColor: alpha(theme.palette.background.paper, GLASS.backgroundAlpha),\n color: theme.palette.text.primary,\n borderColor: alpha(theme.palette.divider, GLASS.borderAlpha),\n iconColor: theme.palette.primary.main,\n };\n}\n\n/** The gradient's two stops; a renderer with no gradient fill paints `from`. */\nexport function gradientStops(palette: AlertPalette): { from: string; to: string } {\n return {\n from: alpha(palette.light || palette.main, GRADIENT.stopAlpha),\n to: alpha(palette.dark || palette.main, GRADIENT.stopAlpha),\n };\n}\n\nexport function gradientSurface(palette: AlertPalette): AlertSurface {\n const ink = contrastText(palette.main);\n return { backgroundColor: gradientStops(palette).from, color: ink, iconColor: ink };\n}\n\n/** The surface for a variant, `glass` and `gradient` included. */\nexport function alertSurface(theme: UiTheme, variant: AlertVariant, palette: AlertPalette): AlertSurface {\n if (variant === 'glass') return glassSurface(theme);\n if (variant === 'gradient') return gradientSurface(palette);\n return semanticSurface(theme, palette);\n}\n","import type { TextStyle, ViewStyle } from 'react-native';\n\nimport type { AlertVariant } from './Alert.base';\nimport {\n ACTION_SLOT,\n ALERT_PADDING_UNITS,\n ALERT_RADIUS_UNITS,\n type AlertPalette,\n alertPalette,\n alertSurface,\n CLOSE_BUTTON,\n DESCRIPTION,\n GLOW,\n ICON_SLOT,\n MESSAGE_FONT_SIZE,\n MESSAGE_GAP_UNITS,\n MESSAGE_LINE_HEIGHT,\n TITLE,\n} from './Alert.metrics';\nimport { alpha } from '../../../tokens/color';\nimport { muiTypeStyle } from '../../../tokens/mui-type';\nimport type { UiTheme } from '../../../tokens/theme';\nimport type { ColorValue } from '../../../tokens/vocabulary';\n\n/**\n * THE PAINT, KEPT APART FROM THE STRUCTURE.\n *\n * `Alert.native.tsx` reads as what renders where; this file reads as\n * arithmetic — the same palette slots, alphas and px the web's\n * `Alert.styles.tsx` derives from `Alert.metrics.ts`.\n */\n\nexport interface AlertLookArgs {\n variant: AlertVariant;\n color: ColorValue | undefined;\n glow: boolean;\n pulse: boolean;\n}\n\nexport interface AlertLook {\n palette: AlertPalette;\n /** What the words are set in. */\n ink: string;\n iconColor: string;\n root: ViewStyle;\n}\n\n/**\n * The root's paint. The web keeps `overflow: hidden` (its pulse wash is\n * clipped to the card, as it is here); only the glow opens it, because a\n * view's own shadow is clipped by its own overflow on a device.\n */\nexport function alertLook(theme: UiTheme, a: AlertLookArgs): AlertLook {\n const palette = alertPalette(theme, a.color ?? a.variant);\n const surface = alertSurface(theme, a.variant, palette);\n const root: ViewStyle = {\n flexDirection: 'row',\n paddingVertical: theme.spacing(ALERT_PADDING_UNITS.vertical),\n paddingHorizontal: theme.spacing(ALERT_PADDING_UNITS.horizontal),\n borderRadius: theme.spacing(ALERT_RADIUS_UNITS),\n overflow: a.glow ? 'visible' : 'hidden',\n backgroundColor: surface.backgroundColor,\n ...(surface.borderColor ? { borderWidth: 1, borderColor: surface.borderColor } : {}),\n ...(a.glow\n ? {\n boxShadow: `0 0 ${GLOW.blur}px ${GLOW.spread}px ${alpha(palette.main, GLOW.alpha)}`,\n filter: `brightness(${GLOW.brightness})`,\n }\n : {}),\n };\n return { palette, ink: surface.color, iconColor: surface.iconColor, root };\n}\n\n/** The message column: 8px between its lines, allowed to shrink so long text wraps beside the icon. */\nexport const messageSlotStyle = (theme: UiTheme): ViewStyle => ({\n flexDirection: 'column',\n gap: theme.spacing(MESSAGE_GAP_UNITS),\n flexShrink: 1,\n minWidth: 0,\n});\n\n/** A string child: MUI's `body2` letter-spacing at 0.95rem on the message's 1.5. */\nexport const messageTextStyle = (theme: UiTheme, ink: string): TextStyle => ({\n ...muiTypeStyle(theme, 'body2', MESSAGE_FONT_SIZE),\n lineHeight: MESSAGE_FONT_SIZE * MESSAGE_LINE_HEIGHT,\n color: ink,\n});\n\n/** MUI's `AlertTitle` (a `body1` Typography) at 1.05rem and 600, lifted 2px, 4px above a description. */\nexport const titleStyle = (theme: UiTheme, ink: string, hasDescription: boolean): TextStyle => ({\n ...muiTypeStyle(theme, 'body1', TITLE.fontSize),\n fontWeight: `${TITLE.fontWeight}`,\n color: ink,\n marginTop: TITLE.marginTop,\n marginBottom: hasDescription ? theme.spacing(TITLE.marginBottomUnits) : 0,\n});\n\n/** The description: 0.925rem on the message's 1.5, faded to 0.9. */\nexport const descriptionStyle = (theme: UiTheme, ink: string): TextStyle => ({\n ...muiTypeStyle(theme, 'body2', DESCRIPTION.fontSize),\n lineHeight: DESCRIPTION.fontSize * MESSAGE_LINE_HEIGHT,\n color: ink,\n opacity: DESCRIPTION.opacity,\n});\n\n/** MUI's `.MuiAlert-icon` with the web's overrides: first-line aligned, 14px from the words, 2px down. */\nexport const iconSlotStyle = (theme: UiTheme): ViewStyle => ({\n alignSelf: 'flex-start',\n alignItems: 'center',\n marginRight: theme.spacing(ICON_SLOT.marginRightUnits),\n paddingTop: theme.spacing(ICON_SLOT.paddingTopUnits),\n paddingBottom: ICON_SLOT.paddingBottom,\n opacity: ICON_SLOT.opacity,\n});\n\n/** MUI's `.MuiAlert-action`: top-aligned, pushed to the right edge, 16px off the text. */\nexport const actionSlotStyle = (theme: UiTheme): ViewStyle => ({\n alignItems: 'flex-start',\n paddingTop: ACTION_SLOT.paddingTop,\n paddingLeft: theme.spacing(ACTION_SLOT.paddingLeftUnits),\n marginLeft: 'auto',\n marginRight: ACTION_SLOT.marginRight,\n});\n\n/** MUI's small `IconButton` at 0.7; pressed stands in for the web's hover (full opacity, a faint wash). */\nexport const closeButtonStyle = (theme: UiTheme, pressed: boolean): ViewStyle => ({\n padding: CLOSE_BUTTON.padding,\n borderRadius: theme.radius.full,\n opacity: pressed ? 1 : CLOSE_BUTTON.opacity,\n backgroundColor: pressed ? alpha(theme.palette.action.hover, CLOSE_BUTTON.washAlpha) : 'transparent',\n});\n"],"mappings":"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","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.content.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Alert/Alert.content.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Alert.content.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Alert/Alert.content.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAqBhD;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAClC,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC5B,WAAW,CAAC,EAAE,UAAU,CAAC,aAAa,CAAC,CAAC;IACxC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CA4DA,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Alert/Alert.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Alert/Alert.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,MAAM,OAAO,CAAC;AAuR1B,eAAO,MAAM,KAAK;;;;;;;;iDA4EhB,CAAC;AAEH;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,gBAAgB,qCAAsC,CAAC"}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import type { CSSObject, Theme } from '@mui/material/styles/index.js';
|
|
2
|
+
import { POINTER_INK_STEP } from './Alert.metrics';
|
|
3
|
+
/**
|
|
4
|
+
* THE INK HALF OF THE POINTER STATES (FUT-4506, option C).
|
|
5
|
+
*
|
|
6
|
+
* The hover and press tint (`pointerShadow` in `Alert.tsx`) moves the SURFACE
|
|
7
|
+
* toward an absolute. On every surface that tracks the mode that is the side
|
|
8
|
+
* the ink is on, so the gap the message is read across closed under the
|
|
9
|
+
* pointer — a host summary at 4.71:1 idle fell to 3.17:1 pressed. These rules
|
|
10
|
+
* move the INK further the same way, by {@link POINTER_INK_STEP}, so it
|
|
11
|
+
* re-opens.
|
|
12
|
+
*/
|
|
13
|
+
/** The summary's class, so the pointer states can reach it without a test id. */
|
|
14
|
+
export declare const ALERT_DESCRIPTION_CLASS = "alert-description";
|
|
15
|
+
/**
|
|
16
|
+
* The wrapper `AlertContent` puts around `children`, at `display: contents`:
|
|
17
|
+
* no box of its own, so the column's flex layout is what it was, and a bare
|
|
18
|
+
* text node still inherits its colour.
|
|
19
|
+
*/
|
|
20
|
+
export declare const ALERT_CHILDREN_CLASS = "alert-children";
|
|
21
|
+
export type PointerInkState = keyof typeof POINTER_INK_STEP;
|
|
22
|
+
export type InkAbsolute = 'black' | 'white';
|
|
23
|
+
/**
|
|
24
|
+
* The absolute the ink steps toward — the mode's, the side the ink is on — or
|
|
25
|
+
* `null` for `gradient`, which does not step at all.
|
|
26
|
+
*
|
|
27
|
+
* Every other variant's surface tracks the mode: a dark ink on a light tint,
|
|
28
|
+
* a light ink on a dark one, so the step is toward black in light mode and
|
|
29
|
+
* toward white in dark, the same absolute the tint layer moves the surface to.
|
|
30
|
+
*
|
|
31
|
+
* `gradient` is the one surface where the package cannot know which side its
|
|
32
|
+
* ink is on. Its own ink is `getContrastText` of the hue, but a host that
|
|
33
|
+
* repaints alerts repaints the gradient too: a light pane and a dark ink under
|
|
34
|
+
* the variant's BLACK layer. Stepping by the package's own ink then moved that
|
|
35
|
+
* dark ink toward white — 1.02:1 pressed. A step that reads `currentColor` for
|
|
36
|
+
* its amount but not for its direction is only safe where the direction is the
|
|
37
|
+
* mode's, so `gradient` keeps today's ink. Its rest contrast and its dark ink
|
|
38
|
+
* on dark mode's light hues are FUT-4516's.
|
|
39
|
+
*/
|
|
40
|
+
export declare function inkAbsolute(theme: Theme, variant: string | undefined): InkAbsolute | null;
|
|
41
|
+
/**
|
|
42
|
+
* The CSS for the ink at one pointer state: the ink actually painted
|
|
43
|
+
* (`currentColor`, inherited from the root — a host's repaint included) mixed
|
|
44
|
+
* toward the absolute by the state's step.
|
|
45
|
+
*
|
|
46
|
+
* `currentColor` in a `color` declaration is the PARENT's colour, which is why
|
|
47
|
+
* this sits on the message's parts and never on the root: on the root it would
|
|
48
|
+
* read the page's text colour instead of the alert's ink. None of the three
|
|
49
|
+
* parts is nested in another, so nothing steps twice.
|
|
50
|
+
*/
|
|
51
|
+
export declare function steppedInkCss(absolute: string, step: number): string;
|
|
52
|
+
/**
|
|
53
|
+
* The three pieces of the ink's pointer behaviour, spread into the root's
|
|
54
|
+
* blocks by `Alert.tsx`:
|
|
55
|
+
*
|
|
56
|
+
* - `rest` eases the ink on the box-shadow's own clock, so ink and tint arrive
|
|
57
|
+
* together rather than the ink snapping while the surface eases;
|
|
58
|
+
* - `hover` and `press` step it. The press declares `transition: none` for the
|
|
59
|
+
* same reason the root's `:active` does: a click's `:active` is too short to
|
|
60
|
+
* ease into. A `:hover` block declares no transition, ever (see `ACTIVE`).
|
|
61
|
+
*
|
|
62
|
+
* All three are empty for a variant that does not step.
|
|
63
|
+
*/
|
|
64
|
+
export declare function pointerInkStyles(theme: Theme, variant: string | undefined): Record<'rest' | PointerInkState, CSSObject>;
|
|
65
|
+
//# sourceMappingURL=Alert.ink.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Alert.ink.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Alert/Alert.ink.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAItE,OAAO,EAAwB,gBAAgB,EAAW,MAAM,iBAAiB,CAAC;AAElF;;;;;;;;;GASG;AAEH,iFAAiF;AACjF,eAAO,MAAM,uBAAuB,sBAAsB,CAAC;AAC3D;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,mBAAmB,CAAC;AAoBrD,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAC5D,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,OAAO,CAAC;AAE5C;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,WAAW,GAAG,IAAI,CAGzF;AAED;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAEpE;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC,MAAM,GAAG,eAAe,EAAE,SAAS,CAAC,CAUvH"}
|
|
@@ -144,9 +144,12 @@ export declare const PULSE: {
|
|
|
144
144
|
* dark one. A `filter: brightness()` fixed the direction but is MULTIPLICATIVE,
|
|
145
145
|
* so it moved a near-black `glass` by four counts (ΔE76 1.71, under the JND)
|
|
146
146
|
* and Banner's 10%-alpha wash by ΔE76 0.44. A layer is additive: it reads the
|
|
147
|
-
* same on an opaque tint, a translucent wash and a gradient
|
|
148
|
-
*
|
|
149
|
-
*
|
|
147
|
+
* same on an opaque tint, a translucent wash and a gradient.
|
|
148
|
+
*
|
|
149
|
+
* Painting above the background and below the content keeps the layer off the
|
|
150
|
+
* INK, but not off the ink's CONTRAST: the layer moves the surface toward the
|
|
151
|
+
* mode's absolute, which is the side the ink is on, so the two close in. That
|
|
152
|
+
* is what {@link POINTER_INK_STEP} answers (FUT-4506).
|
|
150
153
|
*/
|
|
151
154
|
export declare const HOVER: {
|
|
152
155
|
readonly tintAlpha: 0.06;
|
|
@@ -168,8 +171,11 @@ export declare const HOVER: {
|
|
|
168
171
|
*
|
|
169
172
|
* An inset shadow at 100vmax is a flat tint over the whole surface: ADDITIVE,
|
|
170
173
|
* so it reads the same on an opaque tint, a translucent wash and a gradient;
|
|
171
|
-
* painted above the background and below the content, so
|
|
172
|
-
*
|
|
174
|
+
* painted above the background and below the content, so it never dims the
|
|
175
|
+
* ink itself; and animatable, which `background-image` is not. It DOES dim the
|
|
176
|
+
* ink's contrast, because it darkens a light surface toward a dark ink (and
|
|
177
|
+
* lightens a dark one toward a light ink) — on Alert, {@link POINTER_INK_STEP}
|
|
178
|
+
* is the other half of the press.
|
|
173
179
|
*
|
|
174
180
|
* `ms` is 250 and not the 1000 first asked for, and the reason is that ONE
|
|
175
181
|
* property carries both states. CSS runs a transition from the DESTINATION
|
|
@@ -186,6 +192,68 @@ export declare const ACTIVE: {
|
|
|
186
192
|
readonly tintAlpha: 0.2;
|
|
187
193
|
readonly ms: 250;
|
|
188
194
|
};
|
|
195
|
+
/**
|
|
196
|
+
* How far the MESSAGE ink — title, description and children — steps toward the
|
|
197
|
+
* absolute on its own side while the alert is hovered or pressed (FUT-4506,
|
|
198
|
+
* option C).
|
|
199
|
+
*
|
|
200
|
+
* The tint layer above moves the surface toward the mode's absolute — black in
|
|
201
|
+
* light mode, white in dark — which is the side the ink sits on, so every
|
|
202
|
+
* pointer state CLOSED the gap the ink is read across. Measured on a host pane
|
|
203
|
+
* whose summary sat at 4.71:1 idle: 4.22 hovered, 3.17 pressed in light mode,
|
|
204
|
+
* and down to 2.68 pressed in dark. The title, at 16.8px/600, is not WCAG
|
|
205
|
+
* "large" text, so it is held to 4.5:1 as well.
|
|
206
|
+
*
|
|
207
|
+
* The answer keeps the layer (the pointer still gets its feedback) and moves
|
|
208
|
+
* the ink FURTHER the same way, so the gap re-opens. The amounts are the
|
|
209
|
+
* prototype's measured steps on that host pane, the worst case in reach: they
|
|
210
|
+
* hold the 0.9 summary at 4.75–6.07:1 there, and at 6.38:1 or more on this
|
|
211
|
+
* package's default palette in both modes. White needs the bigger step because
|
|
212
|
+
* a light ink has less room above it than a dark ink has below it, and dark
|
|
213
|
+
* mode's pressed step needs at least 0.55.
|
|
214
|
+
*
|
|
215
|
+
* Keyed by the absolute the ink moves TOWARD, which is the mode's: black in
|
|
216
|
+
* light mode, white in dark. The web applies the step as `color-mix()` over
|
|
217
|
+
* `currentColor`, so its AMOUNT lands on whatever ink is actually painted — a
|
|
218
|
+
* host's repaint of a semantic or `glass` alert included. Its DIRECTION is the
|
|
219
|
+
* mode's, which is only safe where the surface tracks the mode, so `gradient`
|
|
220
|
+
* is not stepped at all (`inkAbsolute` in `Alert.ink.ts`): a host that
|
|
221
|
+
* repaints it to a light pane and a dark ink would otherwise have its ink
|
|
222
|
+
* stepped toward white under a black layer. DOM only; native has no pointer
|
|
223
|
+
* states. `Banner` paints the same tint and does not step yet.
|
|
224
|
+
*/
|
|
225
|
+
export declare const POINTER_INK_STEP: {
|
|
226
|
+
readonly hover: {
|
|
227
|
+
readonly black: 0.15;
|
|
228
|
+
readonly white: 0.2;
|
|
229
|
+
};
|
|
230
|
+
readonly press: {
|
|
231
|
+
readonly black: 0.35;
|
|
232
|
+
readonly white: 0.6;
|
|
233
|
+
};
|
|
234
|
+
};
|
|
235
|
+
/**
|
|
236
|
+
* Both pointer states as a host reads them: the tint layer's alpha and the ink
|
|
237
|
+
* step, per absolute. Exported (as `ALERT_POINTER_STATES`) so a theme that
|
|
238
|
+
* repaints the alert's pane and ink can assert its own tones still clear 4.5:1
|
|
239
|
+
* hovered and pressed, against the numbers the package actually draws with.
|
|
240
|
+
*/
|
|
241
|
+
export declare const POINTER_STATES: {
|
|
242
|
+
readonly hover: {
|
|
243
|
+
readonly tintAlpha: 0.06;
|
|
244
|
+
readonly inkStep: {
|
|
245
|
+
readonly black: 0.15;
|
|
246
|
+
readonly white: 0.2;
|
|
247
|
+
};
|
|
248
|
+
};
|
|
249
|
+
readonly press: {
|
|
250
|
+
readonly tintAlpha: 0.2;
|
|
251
|
+
readonly inkStep: {
|
|
252
|
+
readonly black: 0.35;
|
|
253
|
+
readonly white: 0.6;
|
|
254
|
+
};
|
|
255
|
+
};
|
|
256
|
+
};
|
|
189
257
|
export declare const FOCUS: {
|
|
190
258
|
readonly ringWidth: 2;
|
|
191
259
|
readonly ringAlpha: 1;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.metrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Alert/Alert.metrics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAGjD,OAAO,EAAgB,KAAK,UAAU,EAAE,KAAK,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEpF;;;;;;;;;;GAUG;AAEH,oFAAoF;AACpF,eAAO,MAAM,kBAAkB,MAAM,CAAC;AACtC,eAAO,MAAM,mBAAmB;;;CAA6C,CAAC;AAC9E,eAAO,MAAM,mBAAmB,MAAM,CAAC;AACvC,eAAO,MAAM,YAAY,iCAAiC,CAAC;AAE3D,4EAA4E;AAC5E,eAAO,MAAM,OAAO;;;;CAA8C,CAAC;AACnE,eAAO,MAAM,SAAS;;;;CAA4C,CAAC;AACnE,oEAAoE;AACpE,eAAO,MAAM,WAAW,MAAM,CAAC;AAC/B,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC,4FAA4F;AAC5F,eAAO,MAAM,iBAAiB,IAAI,CAAC;AACnC,eAAO,MAAM,iBAAiB,OAAO,CAAC;AACtC,eAAO,MAAM,mBAAmB,MAAM,CAAC;AACvC,2FAA2F;AAC3F,eAAO,MAAM,cAAc;;;CAAsD,CAAC;AAElF,2GAA2G;AAC3G,eAAO,MAAM,KAAK;;;;;CAAsF,CAAC;AACzG,iDAAiD;AACjD,eAAO,MAAM,WAAW;;;CAA4C,CAAC;AAErE,qHAAqH;AACrH,eAAO,MAAM,UAAU;;;CAA+C,CAAC;AACvE,qGAAqG;AACrG,eAAO,MAAM,SAAS;;;;;;CAAuG,CAAC;AAC9H,oGAAoG;AACpG,eAAO,MAAM,WAAW;;;;CAAmE,CAAC;AAC5F,mFAAmF;AACnF,eAAO,MAAM,YAAY;;;;;CAAsE,CAAC;AAEhG;;;;GAIG;AACH,eAAO,MAAM,gBAAgB;;;;;;;CAA4E,CAAC;AAC1G,oEAAoE;AACpE,eAAO,MAAM,KAAK;;;;;CAAuF,CAAC;AAC1G;;;;;;;;;GASG;AACH,eAAO,MAAM,QAAQ;;;;;;CAMX,CAAC;AAEX,oEAAoE;AACpE,eAAO,MAAM,IAAI;;;;;CAAiE,CAAC;AACnF,eAAO,MAAM,KAAK;;;;CAAgD,CAAC;AAEnE
|
|
1
|
+
{"version":3,"file":"Alert.metrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Alert/Alert.metrics.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Alert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EACV,cAAc,EACd,kBAAkB,EAClB,UAAU,EACV,YAAY,EACZ,YAAY,GACb,MAAM,eAAe,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Alert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EACV,cAAc,EACd,kBAAkB,EAClB,UAAU,EACV,YAAY,EACZ,YAAY,GACb,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,cAAc,IAAI,oBAAoB,EAAE,MAAM,iBAAiB,CAAC"}
|
|
@@ -24,5 +24,5 @@ import type { RegionMapProps } from './RegionMap.types';
|
|
|
24
24
|
* - **A toggle is cheap.** Geometry is projected once per `rings` identity,
|
|
25
25
|
* and the base layer is memoised, so a tap re-renders the hatch and labels.
|
|
26
26
|
*/
|
|
27
|
-
export declare function RegionMap({ regions, center, circles, reach, overlay, onToggle, highlightedIds, copy, listMode, listSort, maxHeight, className, dataTestId, }: RegionMapProps): React.JSX.Element | null;
|
|
27
|
+
export declare function RegionMap({ regions, center, circles, pin, ghost, dots, reach, overlay, onToggle, highlightedIds, copy, listMode, listSort, maxHeight, className, dataTestId, }: RegionMapProps): React.JSX.Element | null;
|
|
28
28
|
//# sourceMappingURL=RegionMap.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RegionMap.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/RegionMap/RegionMap.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAQxD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,MAAM,EACN,OAAO,EACP,KAAK,EACL,OAAO,EACP,QAAQ,EACR,cAAuB,EACvB,IAAI,EACJ,QAAsB,EACtB,QAAkB,EAClB,SAAS,EACT,SAAS,EACT,UAAyB,GAC1B,EAAE,cAAc,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,
|
|
1
|
+
{"version":3,"file":"RegionMap.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/RegionMap/RegionMap.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAQxD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,MAAM,EACN,OAAO,EACP,GAAG,EACH,KAAK,EACL,IAAI,EACJ,KAAK,EACL,OAAO,EACP,QAAQ,EACR,cAAuB,EACvB,IAAI,EACJ,QAAsB,EACtB,QAAkB,EAClB,SAAS,EACT,SAAS,EACT,UAAyB,GAC1B,EAAE,cAAc,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CA2C3C"}
|
|
@@ -1,4 +1,13 @@
|
|
|
1
1
|
import type { RegionMapPoint, RegionMapRegion, RegionMapRing } from './RegionMap.types';
|
|
2
|
+
/**
|
|
3
|
+
* The geometry behind `RegionMap`, kept pure so it is tested without a DOM.
|
|
4
|
+
*
|
|
5
|
+
* Coordinates are projected to METRES on a plane around the centre
|
|
6
|
+
* (equirectangular): within the tens of kilometres a map like this spans, its
|
|
7
|
+
* error is far below any outline's own. `y` grows SOUTH, as SVG's does.
|
|
8
|
+
*/
|
|
9
|
+
/** Metres per degree of latitude on the mean sphere. */
|
|
10
|
+
export declare const METRES_PER_DEGREE = 111195;
|
|
2
11
|
/** A projected point, metres east (`x`) and south (`y`) of the centre. */
|
|
3
12
|
export interface PlanePoint {
|
|
4
13
|
x: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RegionMap.helpers.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/RegionMap/RegionMap.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"RegionMap.helpers.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/RegionMap/RegionMap.helpers.ts"],"names":[],"mappings":"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"}
|
|
@@ -43,6 +43,42 @@ export interface RegionMapRegion {
|
|
|
43
43
|
*/
|
|
44
44
|
detail?: string;
|
|
45
45
|
}
|
|
46
|
+
/** A latitude/longitude pair, by name. */
|
|
47
|
+
export interface RegionMapCenter {
|
|
48
|
+
latitude: number;
|
|
49
|
+
longitude: number;
|
|
50
|
+
}
|
|
51
|
+
/**
|
|
52
|
+
* The centre as a pin the viewer moves (a store's door). The VIEW stays on
|
|
53
|
+
* `center`; the pin, and the circles with it, are drawn at `at`. Moves are
|
|
54
|
+
* reported, never applied: the host passes the new `at` back.
|
|
55
|
+
*/
|
|
56
|
+
export interface RegionMapPin {
|
|
57
|
+
at: RegionMapCenter;
|
|
58
|
+
/** Printed beside the pin, e.g. "Store". */
|
|
59
|
+
label: string;
|
|
60
|
+
/** The pin's accessible name, e.g. "Store pin. Drag it, or use the arrow keys, to move it". */
|
|
61
|
+
ariaLabel: string;
|
|
62
|
+
/** Every point while a pointer drags it. */
|
|
63
|
+
onMove?: (at: RegionMapCenter) => void;
|
|
64
|
+
/** Where it came to rest: the pointer let go, or an arrow key moved it. */
|
|
65
|
+
onDrop: (at: RegionMapCenter) => void;
|
|
66
|
+
/** Metres one arrow key moves it. Default 50. */
|
|
67
|
+
stepMetres?: number;
|
|
68
|
+
/** Held in place (a save in flight). */
|
|
69
|
+
disabled?: boolean;
|
|
70
|
+
}
|
|
71
|
+
/** Where the pin's outermost circle stood: a dashed ring of `radiusMetres` and a dashed dot at `at`. */
|
|
72
|
+
export interface RegionMapGhost {
|
|
73
|
+
at: RegionMapCenter;
|
|
74
|
+
radiusMetres: number;
|
|
75
|
+
}
|
|
76
|
+
/** A small point on the map (an address), filled or hollow. Not tappable. */
|
|
77
|
+
export interface RegionMapDot {
|
|
78
|
+
id: string;
|
|
79
|
+
at: RegionMapCenter;
|
|
80
|
+
filled: boolean;
|
|
81
|
+
}
|
|
46
82
|
/** A circle drawn around the centre, e.g. a delivery ring. */
|
|
47
83
|
export interface RegionMapCircle {
|
|
48
84
|
radiusMetres: number;
|
|
@@ -96,6 +132,8 @@ export interface RegionMapCopy {
|
|
|
96
132
|
excluded: string;
|
|
97
133
|
outside: string;
|
|
98
134
|
};
|
|
135
|
+
/** A scale bar's length, e.g. "1 km". Omit for no scale bar. */
|
|
136
|
+
scale?: (metres: number) => string;
|
|
99
137
|
}
|
|
100
138
|
/** The order of the list: as given (e.g. nearest first), or by name. */
|
|
101
139
|
export type RegionMapListSort = 'given' | 'name';
|
|
@@ -117,8 +155,14 @@ export interface RegionMapProps {
|
|
|
117
155
|
latitude: number;
|
|
118
156
|
longitude: number;
|
|
119
157
|
} | null;
|
|
120
|
-
/** Circles around the centre; the view fits the largest. */
|
|
158
|
+
/** Circles around the centre (around `pin.at` when there is a pin); the view fits the largest. */
|
|
121
159
|
circles?: readonly RegionMapCircle[];
|
|
160
|
+
/** The centre as a draggable pin; it replaces the centre's dot, and the circles follow it. */
|
|
161
|
+
pin?: RegionMapPin;
|
|
162
|
+
/** A dashed ring and dot where the circles stood (drawn with a `pin`). */
|
|
163
|
+
ghost?: RegionMapGhost;
|
|
164
|
+
/** Small points, filled or hollow, over the areas and under the pin. */
|
|
165
|
+
dots?: readonly RegionMapDot[];
|
|
122
166
|
/**
|
|
123
167
|
* An extent the view must ALSO fit, before its margin — something the host
|
|
124
168
|
* draws past the largest circle. With circles the view stays centred on the
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RegionMap.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/RegionMap/RegionMap.types.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEhE,gDAAgD;AAChD,MAAM,MAAM,cAAc,GAAG,SAAS,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC;AAE5E,+EAA+E;AAC/E,MAAM,MAAM,aAAa,GAAG,SAAS,cAAc,EAAE,CAAC;AAEtD,sBAAsB;AACtB,MAAM,WAAW,eAAe;IAC9B,2CAA2C;IAC3C,EAAE,EAAE,MAAM,CAAC;IACX,qEAAqE;IACrE,IAAI,EAAE,MAAM,CAAC;IACb;;;;OAIG;IACH,KAAK,EAAE,SAAS,aAAa,EAAE,CAAC;IAChC,wDAAwD;IACxD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,8DAA8D;AAC9D,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,8DAA8D;AAC9D,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;;;GAIG;AACH,MAAM,MAAM,cAAc,GAAG;IAAE,YAAY,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,MAAM,EAAE,eAAe,CAAA;CAAE,CAAC;AAEpF,4EAA4E;AAC5E,MAAM,WAAW,cAAc;IAC7B,4CAA4C;IAC5C,IAAI,EAAE,QAAQ,CAAC;IACf,kEAAkE;IAClE,UAAU,EAAE,UAAU,CAAC;CACxB;AAED,8CAA8C;AAC9C,MAAM,WAAW,aAAa;IAC5B,oDAAoD;IACpD,QAAQ,EAAE,MAAM,CAAC;IACjB,sDAAsD;IACtD,cAAc,EAAE,MAAM,CAAC;IACvB,6EAA6E;IAC7E,YAAY,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,MAAM,CAAC;IAC/C,6CAA6C;IAC7C,YAAY,EAAE,MAAM,CAAC;IACrB,6DAA6D;IAC7D,SAAS,EAAE,MAAM,CAAC;IAClB,uEAAuE;IACvE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACpC,sCAAsC;IACtC,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,QAAQ,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"RegionMap.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/RegionMap/RegionMap.types.ts"],"names":[],"mappings":"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"}
|
|
@@ -3,6 +3,7 @@ import React from 'react';
|
|
|
3
3
|
import { type PlaneBox } from './RegionMap.helpers';
|
|
4
4
|
import type { RegionMapModel } from './RegionMap.hooks';
|
|
5
5
|
import type { RegionMapLayer } from './RegionMap.types';
|
|
6
|
+
import type { Moving } from './RegionMapPin';
|
|
6
7
|
export interface RegionMapDrawingProps {
|
|
7
8
|
model: RegionMapModel & {
|
|
8
9
|
view: PlaneBox;
|
|
@@ -10,6 +11,8 @@ export interface RegionMapDrawingProps {
|
|
|
10
11
|
/** The host's layer, drawn inside the SVG under the circles (`RegionMapProps.overlay`). */
|
|
11
12
|
overlay?: (layer: RegionMapLayer) => React.ReactNode;
|
|
12
13
|
showCenter: boolean;
|
|
14
|
+
/** The movable centre and what is drawn with it (`RegionMapProps.pin`, `ghost`, `dots`). */
|
|
15
|
+
moving?: Moving;
|
|
13
16
|
highlightedIds: readonly string[];
|
|
14
17
|
maxHeight: string | undefined;
|
|
15
18
|
label: string;
|
|
@@ -27,5 +30,5 @@ export interface RegionMapDrawingProps {
|
|
|
27
30
|
* The base areas are a memoised layer: a toggle changes `excluded`, not the
|
|
28
31
|
* geometry, so only the hatch, highlight and label layers re-render.
|
|
29
32
|
*/
|
|
30
|
-
export declare function RegionMapDrawing(
|
|
33
|
+
export declare function RegionMapDrawing(props: RegionMapDrawingProps): React.JSX.Element;
|
|
31
34
|
//# sourceMappingURL=RegionMapDrawing.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RegionMapDrawing.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/RegionMap/RegionMapDrawing.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAsD,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACxG,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"RegionMapDrawing.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/RegionMap/RegionMapDrawing.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAsD,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AACxG,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAExD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAG7C,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,cAAc,GAAG;QAAE,IAAI,EAAE,QAAQ,CAAA;KAAE,CAAC;IAC3C,2FAA2F;IAC3F,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,KAAK,CAAC,SAAS,CAAC;IACrD,UAAU,EAAE,OAAO,CAAC;IACpB,4FAA4F;IAC5F,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,EAAE,SAAS,MAAM,EAAE,CAAC;IAClC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,KAAK,CAAC;CACd;AAED;;;;;;;;;GASG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAuEhF"}
|