@12-apps/ui 6.24.2 → 6.24.4
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/NATIVE.md +1 -1
- package/dist/_internal/components/data-display/Alert/Alert.js +5 -3
- package/dist/_internal/components/data-display/Alert/Alert.metrics.js +1 -1
- package/dist/_internal/components/data-display/Alert/Alert.styles.js +2 -2
- package/dist/_internal/components/data-display/Banner/Banner.js +7 -2
- package/dist/_internal/components/data-display/Banner/Banner.styles.js +10 -1
- package/dist/_internal/components/data-display/CardKit/card-actions-context.js +4 -4
- package/dist/_internal/components/data-display/CardKit/use-remove-confirm.js +5 -5
- package/dist/_internal/components/data-display/DataViews/DataViewsTableBase.js +5 -5
- package/dist/_internal/components/data-display/DataViews/data-views-table-parts.js +4 -4
- package/dist/_internal/components/data-display/index.js +5 -5
- package/dist/_internal/components/index.js +6 -6
- package/dist/_internal/components/navigation/AppHeader/AppHeader.identity.js +1 -1
- package/dist/_internal/components/navigation/index.js +1 -1
- package/dist/{chunk-7L6LAVJ7.js → chunk-4IVDVZZ2.js} +25 -11
- package/dist/chunk-4IVDVZZ2.js.map +1 -0
- package/dist/{chunk-U2YJCNRU.js → chunk-4T7TXRGM.js} +2 -2
- package/dist/{chunk-E27Y7FF2.js → chunk-57Z2ND3N.js} +9 -10
- package/dist/{chunk-E27Y7FF2.js.map → chunk-57Z2ND3N.js.map} +1 -1
- package/dist/{chunk-DI7HGYPX.js → chunk-JPV45AD6.js} +2 -2
- package/dist/{chunk-PRUSQQDT.js → chunk-KM5O4ICK.js} +2 -2
- package/dist/{chunk-2YEZONLX.js → chunk-M4LFDGI6.js} +30 -5
- package/dist/chunk-M4LFDGI6.js.map +1 -0
- package/dist/{chunk-O3336DJ6.js → chunk-SYJMI2NP.js} +2 -2
- package/dist/{chunk-W2YNUUVJ.js → chunk-TU6RNZUQ.js} +117 -78
- package/dist/chunk-TU6RNZUQ.js.map +1 -0
- package/dist/{chunk-B2Y3BABA.js → chunk-TXKZEKJN.js} +6 -9
- package/dist/chunk-TXKZEKJN.js.map +1 -0
- package/dist/{chunk-QFVFHIHE.js → chunk-WNMYWQ7D.js} +98 -30
- package/dist/chunk-WNMYWQ7D.js.map +1 -0
- package/dist/data-display/Alert.js +3 -3
- package/dist/data-display/Banner.js +7 -2
- package/dist/data-display/CardKit.js +5 -5
- package/dist/data-display/DataViews.js +5 -5
- package/dist/native/data-display/Alert.js +2 -5
- package/dist/native/data-display/Alert.js.map +1 -1
- package/dist/navigation/AppHeader.js +1 -1
- package/dist/types/components/data-display/Alert/Alert.d.ts +14 -0
- package/dist/types/components/data-display/Alert/Alert.d.ts.map +1 -1
- package/dist/types/components/data-display/Alert/Alert.metrics.d.ts +66 -23
- package/dist/types/components/data-display/Alert/Alert.metrics.d.ts.map +1 -1
- package/dist/types/components/data-display/Alert/Alert.styles.d.ts.map +1 -1
- package/dist/types/components/data-display/Banner/Banner.d.ts.map +1 -1
- package/dist/types/components/data-display/Banner/Banner.styles.d.ts +3 -0
- package/dist/types/components/data-display/Banner/Banner.styles.d.ts.map +1 -1
- package/dist/types/components/navigation/AppHeader/AppHeader.identity.d.ts +12 -5
- package/dist/types/components/navigation/AppHeader/AppHeader.identity.d.ts.map +1 -1
- package/dist/types/components/navigation/AppHeader/AppHeader.types.d.ts +12 -4
- package/dist/types/components/navigation/AppHeader/AppHeader.types.d.ts.map +1 -1
- package/dist/types-native/components/data-display/Alert/Alert.metrics.d.ts +66 -23
- 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.metrics.ts +66 -9
- package/src/components/data-display/Alert/Alert.styles.tsx +4 -5
- package/src/components/data-display/Alert/Alert.tsx +139 -21
- package/src/components/data-display/Alert/NATIVE-NOTES.md +1 -1
- package/src/components/data-display/Banner/Banner.styles.ts +40 -2
- package/src/components/data-display/Banner/Banner.tsx +22 -9
- package/src/components/navigation/AppHeader/AppHeader.identity.tsx +159 -86
- package/src/components/navigation/AppHeader/AppHeader.md +12 -5
- package/src/components/navigation/AppHeader/AppHeader.types.ts +12 -4
- package/dist/chunk-2YEZONLX.js.map +0 -1
- package/dist/chunk-7L6LAVJ7.js.map +0 -1
- package/dist/chunk-B2Y3BABA.js.map +0 -1
- package/dist/chunk-QFVFHIHE.js.map +0 -1
- package/dist/chunk-W2YNUUVJ.js.map +0 -1
- /package/dist/{chunk-U2YJCNRU.js.map → chunk-4T7TXRGM.js.map} +0 -0
- /package/dist/{chunk-DI7HGYPX.js.map → chunk-JPV45AD6.js.map} +0 -0
- /package/dist/{chunk-PRUSQQDT.js.map → chunk-KM5O4ICK.js.map} +0 -0
- /package/dist/{chunk-O3336DJ6.js.map → chunk-SYJMI2NP.js.map} +0 -0
package/NATIVE.md
CHANGED
|
@@ -84,7 +84,7 @@ Ported: **27 of 141** public subpaths carry a `react-native` condition.
|
|
|
84
84
|
|
|
85
85
|
| subpath | shared stories run natively | skipped (`native-skip`) | known gaps |
|
|
86
86
|
|---|---|---|---|
|
|
87
|
-
| `@12-apps/ui/data-display/Alert` | 41 | 2 | `glass` paints its 0.85 paper wash and hairline without the 20px backdrop blur and saturation — React Native has no backdrop filter.; `gradient` paints its first stop (`alpha(light, 0.9)`) flat and has no shimmer sweep — React Native core has no gradient fill and no pseudo-elements.; Hover
|
|
87
|
+
| `@12-apps/ui/data-display/Alert` | 41 | 2 | `glass` paints its 0.85 paper wash and hairline without the 20px backdrop blur and saturation — React Native has no backdrop filter.; `gradient` paints its first stop (`alpha(light, 0.9)`) flat and has no shimmer sweep — React Native core has no gradient fill and no pseudo-elements.; Hover (a 6% tint layer), press (a 20% one, easing back) and `:focus-visible` (the keyboard ring) have no touch equivalent; the close button's pressed state stands in for its hover.; The hairline the web draws around a `Button` placed inside the message is a descendant selector; native children are rendered as given. Consecutive text children DO flow as one sentence (`src/platform/text-children.tsx`); an element child breaks the run, as a block would on the web.; After dismissal the web keeps a collapsed, hidden node in the DOM; native unmounts once the 300ms collapse has run.; Title, description and children are set in MUI's default `body1`/`body2` numbers; a host that re-themes MUI's typography variants moves the web only. |
|
|
88
88
|
| `@12-apps/ui/data-display/Avatar` | 45 | 1 | Hover has no touch equivalent: the interactive lift (`scale(1.1) translateY(-2px)`, the `0 8px 20px` shadow and the brightness), the `:active` squeeze and the `:focus-visible` ring are all web-only. The avatar still reports itself as a button and takes a tab stop.; The shimmer that runs across a loading avatar is a moving gradient; React Native core has neither, so the box keeps its accent and only the overlay and its spinner say it is loading. `backdrop-filter: blur(2px)` behind that overlay has no equivalent either — the wash is the flat `alpha(paper, 0.7)`.; `glow` paints the halo but not the `brightness(1.05)` filter that goes with it; React Native has no filters.; `pulse` is a ring behind the avatar scaling out to 10px and fading, rather than MUI's growing `box-shadow` on an `::after` — the same colour, cadence and travel, drawn by a sibling.; The status dot is a bordered circle placed at MUI's `overlap="circular"` inset; MUI's `Badge` additionally draws a `::after` ripple layer over it.; `AvatarGroup` overlaps and counts exactly as the web does, but the web ALSO gives every child a paper ring through a `& > *` descendant rule. A native renderer cannot restyle children, so an avatar in a group takes `bordered` from its own prop.; The default and broken-image glyphs are the house `Icon` at 24px, which is what MUI's `SvgIcon` draws them at here; the initials are set in the theme's own font rather than MUI's `Avatar` typography. |
|
|
89
89
|
| `@12-apps/ui/data-display/Badge` | 55 | 1 | `gradient` paints the 135° run's first stop flat and `glass` keeps its 10% wash and 20% hairline without the `blur(10px) saturate(200%)` backdrop or the inset white highlight — React Native has no gradient fill, no backdrop filter and no inset shadow.; `shimmer` is a gradient sweeping across a pseudo-element and is not drawn at all; the chip keeps its variant's paint.; `glow` draws the 15px halo but not the `brightness(1.1)` filter beside it, and `glow` WITH `pulse` breathes only the scale and the opacity — the halo itself cannot be animated, because a box shadow is not an animatable style there.; Hover has no touch equivalent: the chip's `scale(1.1)` under the pointer and the glow's brighter hover halo are web-only.; `count` is drawn as a pill (`height / 2`); MUI asks for `border-radius: 50%`, which on a chip wider than it is tall is an ellipse React Native cannot express.; MUI's `transition: all 0.3s` on the chip has no equivalent: a colour or size change is drawn immediately. The mount, pulse and close animations are `Animated` and do run.; `onClick` on the badge reaches the DOM through react-native-web and fires there, as it does on the web; a device has no click, so a shared screen that needs a press should put one on its own child. |
|
|
90
90
|
| `@12-apps/ui/data-display/Chip` | 25 | 0 | Hover has no touch equivalent, so a press stands in for it: the chip takes MUI's hover wash (`palette[color].dark` filled, `alpha(main, 0.04)` outlined) while pressed, but not this package's own 1px lift or the `0 4px 12px` shadow under it, which are `:hover`-only.; The keyboard contract — Enter and Space activate, Delete and Backspace remove — is shared (`chipKeyAction`) and answered under react-native-web, half by its `Pressable` and half by the chip's own handler. On a DEVICE none of it runs: React Native delivers no key events to a `View`, so a chip there is pressed and removed by touch.; MUI restyles the leading icon ELEMENT through a class — 24px, 18px when small, and `inherit` ink on a coloured chip. A native renderer cannot restyle an arbitrary node, so the slot carries MUI's margins and the glyph keeps the size and colour it was given.; An `avatarSrc` is drawn as a round `Image` at MUI's 24px (18px small) box; MUI's own `Avatar` additionally shows an initials fallback and repaints itself in `primary.dark`/`secondary.dark` for those two colours.; MUI's `transition: background-color, box-shadow` and this package's `all 0.2s cubic-bezier(0.4, 0, 0.2, 1)` have no equivalent: a colour change is drawn immediately.; A keyboard activation (Space on a selectable chip, Delete on a deletable one) fires `onClick` and `onDelete` but not `onPress`: it only exists under react-native-web, where the chip synthesizes the activation `Pressable` will not, and so has no `GestureResponderEvent` to pass. A press on a device fires both. |
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import {
|
|
2
|
+
ALERT_ONLY_PROPS,
|
|
2
3
|
Alert
|
|
3
|
-
} from "../../../../chunk-
|
|
4
|
-
import "../../../../chunk-
|
|
5
|
-
import "../../../../chunk-B2Y3BABA.js";
|
|
4
|
+
} from "../../../../chunk-WNMYWQ7D.js";
|
|
5
|
+
import "../../../../chunk-57Z2ND3N.js";
|
|
6
6
|
import "../../../../chunk-N3QUEBNS.js";
|
|
7
|
+
import "../../../../chunk-TXKZEKJN.js";
|
|
7
8
|
import "../../../../chunk-TYJR4GOF.js";
|
|
8
9
|
import "../../../../chunk-NQN5Z36J.js";
|
|
9
10
|
import "../../../../chunk-AG66JBNH.js";
|
|
@@ -11,6 +12,7 @@ import "../../../../chunk-6JAIFIPW.js";
|
|
|
11
12
|
import "../../../../chunk-FZXKH2ZT.js";
|
|
12
13
|
import "../../../../chunk-PZ5AY32C.js";
|
|
13
14
|
export {
|
|
15
|
+
ALERT_ONLY_PROPS,
|
|
14
16
|
Alert
|
|
15
17
|
};
|
|
16
18
|
//# sourceMappingURL=Alert.js.map
|
|
@@ -33,7 +33,7 @@ import {
|
|
|
33
33
|
gradientSurface,
|
|
34
34
|
seconds,
|
|
35
35
|
semanticSurface
|
|
36
|
-
} from "../../../../chunk-
|
|
36
|
+
} from "../../../../chunk-TXKZEKJN.js";
|
|
37
37
|
import "../../../../chunk-NQN5Z36J.js";
|
|
38
38
|
import "../../../../chunk-AG66JBNH.js";
|
|
39
39
|
import "../../../../chunk-6JAIFIPW.js";
|
|
@@ -8,9 +8,9 @@ import {
|
|
|
8
8
|
iconRotate,
|
|
9
9
|
pulseAnimation,
|
|
10
10
|
shimmerAnimation
|
|
11
|
-
} from "../../../../chunk-
|
|
12
|
-
import "../../../../chunk-B2Y3BABA.js";
|
|
11
|
+
} from "../../../../chunk-57Z2ND3N.js";
|
|
13
12
|
import "../../../../chunk-N3QUEBNS.js";
|
|
13
|
+
import "../../../../chunk-TXKZEKJN.js";
|
|
14
14
|
import "../../../../chunk-NQN5Z36J.js";
|
|
15
15
|
import "../../../../chunk-AG66JBNH.js";
|
|
16
16
|
import "../../../../chunk-6JAIFIPW.js";
|
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
import {
|
|
2
2
|
Banner
|
|
3
|
-
} from "../../../../chunk-
|
|
4
|
-
import "../../../../chunk-
|
|
3
|
+
} from "../../../../chunk-4IVDVZZ2.js";
|
|
4
|
+
import "../../../../chunk-M4LFDGI6.js";
|
|
5
|
+
import "../../../../chunk-TXKZEKJN.js";
|
|
6
|
+
import "../../../../chunk-NQN5Z36J.js";
|
|
7
|
+
import "../../../../chunk-AG66JBNH.js";
|
|
8
|
+
import "../../../../chunk-6JAIFIPW.js";
|
|
9
|
+
import "../../../../chunk-FZXKH2ZT.js";
|
|
5
10
|
import "../../../../chunk-PZ5AY32C.js";
|
|
6
11
|
export {
|
|
7
12
|
Banner
|
|
@@ -1,11 +1,20 @@
|
|
|
1
1
|
import {
|
|
2
|
+
BANNER_TINT_S,
|
|
2
3
|
bannerPartStyles,
|
|
4
|
+
bannerPointerStates,
|
|
3
5
|
fadeInSlide,
|
|
4
6
|
getVariantColor
|
|
5
|
-
} from "../../../../chunk-
|
|
7
|
+
} from "../../../../chunk-M4LFDGI6.js";
|
|
8
|
+
import "../../../../chunk-TXKZEKJN.js";
|
|
9
|
+
import "../../../../chunk-NQN5Z36J.js";
|
|
10
|
+
import "../../../../chunk-AG66JBNH.js";
|
|
11
|
+
import "../../../../chunk-6JAIFIPW.js";
|
|
12
|
+
import "../../../../chunk-FZXKH2ZT.js";
|
|
6
13
|
import "../../../../chunk-PZ5AY32C.js";
|
|
7
14
|
export {
|
|
15
|
+
BANNER_TINT_S,
|
|
8
16
|
bannerPartStyles,
|
|
17
|
+
bannerPointerStates,
|
|
9
18
|
fadeInSlide,
|
|
10
19
|
getVariantColor
|
|
11
20
|
};
|
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
import {
|
|
3
3
|
CardActionsProvider,
|
|
4
4
|
useCardActions
|
|
5
|
-
} from "../../../../chunk-
|
|
5
|
+
} from "../../../../chunk-SYJMI2NP.js";
|
|
6
6
|
import "../../../../chunk-NUGT7LMR.js";
|
|
7
|
-
import "../../../../chunk-
|
|
8
|
-
import "../../../../chunk-
|
|
9
|
-
import "../../../../chunk-B2Y3BABA.js";
|
|
7
|
+
import "../../../../chunk-WNMYWQ7D.js";
|
|
8
|
+
import "../../../../chunk-57Z2ND3N.js";
|
|
10
9
|
import "../../../../chunk-N3QUEBNS.js";
|
|
10
|
+
import "../../../../chunk-TXKZEKJN.js";
|
|
11
11
|
import "../../../../chunk-TYJR4GOF.js";
|
|
12
12
|
import "../../../../chunk-NQN5Z36J.js";
|
|
13
13
|
import "../../../../chunk-AG66JBNH.js";
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import {
|
|
3
3
|
useRemoveConfirm
|
|
4
|
-
} from "../../../../chunk-
|
|
5
|
-
import "../../../../chunk-
|
|
4
|
+
} from "../../../../chunk-KM5O4ICK.js";
|
|
5
|
+
import "../../../../chunk-SYJMI2NP.js";
|
|
6
6
|
import "../../../../chunk-XCBQXSTR.js";
|
|
7
7
|
import "../../../../chunk-NWNSUHEB.js";
|
|
8
8
|
import "../../../../chunk-HJOABXKN.js";
|
|
@@ -10,12 +10,12 @@ import "../../../../chunk-3P4THDBM.js";
|
|
|
10
10
|
import "../../../../chunk-QQS3GQYS.js";
|
|
11
11
|
import "../../../../chunk-EMYESBIT.js";
|
|
12
12
|
import "../../../../chunk-NUGT7LMR.js";
|
|
13
|
-
import "../../../../chunk-
|
|
14
|
-
import "../../../../chunk-
|
|
15
|
-
import "../../../../chunk-B2Y3BABA.js";
|
|
13
|
+
import "../../../../chunk-WNMYWQ7D.js";
|
|
14
|
+
import "../../../../chunk-57Z2ND3N.js";
|
|
16
15
|
import "../../../../chunk-N3QUEBNS.js";
|
|
17
16
|
import "../../../../chunk-2IBFEHIX.js";
|
|
18
17
|
import "../../../../chunk-BWB2MVWP.js";
|
|
18
|
+
import "../../../../chunk-TXKZEKJN.js";
|
|
19
19
|
import "../../../../chunk-BA4RHQ3B.js";
|
|
20
20
|
import "../../../../chunk-YTOYMJPM.js";
|
|
21
21
|
import "../../../../chunk-JT6TERQL.js";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import {
|
|
3
3
|
DataViewsTableBase
|
|
4
|
-
} from "../../../../chunk-
|
|
4
|
+
} from "../../../../chunk-JPV45AD6.js";
|
|
5
5
|
import "../../../../chunk-4X4KM4ZB.js";
|
|
6
6
|
import "../../../../chunk-QX2PLXQA.js";
|
|
7
7
|
import "../../../../chunk-ZOLAYP2D.js";
|
|
@@ -39,7 +39,7 @@ import "../../../../chunk-SNR537TI.js";
|
|
|
39
39
|
import "../../../../chunk-XUJG2HFW.js";
|
|
40
40
|
import "../../../../chunk-ZPIMPOHV.js";
|
|
41
41
|
import "../../../../chunk-O6AZDQJJ.js";
|
|
42
|
-
import "../../../../chunk-
|
|
42
|
+
import "../../../../chunk-4T7TXRGM.js";
|
|
43
43
|
import "../../../../chunk-CHPZTF34.js";
|
|
44
44
|
import "../../../../chunk-6JGPPTLX.js";
|
|
45
45
|
import "../../../../chunk-5M4TYFR3.js";
|
|
@@ -139,12 +139,12 @@ import "../../../../chunk-KZLLTOB2.js";
|
|
|
139
139
|
import "../../../../chunk-E5LWJDI3.js";
|
|
140
140
|
import "../../../../chunk-G3E66C6J.js";
|
|
141
141
|
import "../../../../chunk-NUGT7LMR.js";
|
|
142
|
-
import "../../../../chunk-
|
|
143
|
-
import "../../../../chunk-
|
|
144
|
-
import "../../../../chunk-B2Y3BABA.js";
|
|
142
|
+
import "../../../../chunk-WNMYWQ7D.js";
|
|
143
|
+
import "../../../../chunk-57Z2ND3N.js";
|
|
145
144
|
import "../../../../chunk-N3QUEBNS.js";
|
|
146
145
|
import "../../../../chunk-2IBFEHIX.js";
|
|
147
146
|
import "../../../../chunk-BWB2MVWP.js";
|
|
147
|
+
import "../../../../chunk-TXKZEKJN.js";
|
|
148
148
|
import "../../../../chunk-6DPAWXZ3.js";
|
|
149
149
|
import "../../../../chunk-WEBEOBN5.js";
|
|
150
150
|
import "../../../../chunk-VUHLNYAE.js";
|
|
@@ -3,7 +3,7 @@ import {
|
|
|
3
3
|
ViewDialogs,
|
|
4
4
|
ViewMutationErrorAlert,
|
|
5
5
|
ViewsMenuSlot
|
|
6
|
-
} from "../../../../chunk-
|
|
6
|
+
} from "../../../../chunk-4T7TXRGM.js";
|
|
7
7
|
import "../../../../chunk-CHPZTF34.js";
|
|
8
8
|
import "../../../../chunk-6JGPPTLX.js";
|
|
9
9
|
import "../../../../chunk-5M4TYFR3.js";
|
|
@@ -43,12 +43,12 @@ import "../../../../chunk-5KEMPCW4.js";
|
|
|
43
43
|
import "../../../../chunk-VM3HRSAU.js";
|
|
44
44
|
import "../../../../chunk-GYXUCS37.js";
|
|
45
45
|
import "../../../../chunk-NUGT7LMR.js";
|
|
46
|
-
import "../../../../chunk-
|
|
47
|
-
import "../../../../chunk-
|
|
48
|
-
import "../../../../chunk-B2Y3BABA.js";
|
|
46
|
+
import "../../../../chunk-WNMYWQ7D.js";
|
|
47
|
+
import "../../../../chunk-57Z2ND3N.js";
|
|
49
48
|
import "../../../../chunk-N3QUEBNS.js";
|
|
50
49
|
import "../../../../chunk-2IBFEHIX.js";
|
|
51
50
|
import "../../../../chunk-BWB2MVWP.js";
|
|
51
|
+
import "../../../../chunk-TXKZEKJN.js";
|
|
52
52
|
import "../../../../chunk-6DPAWXZ3.js";
|
|
53
53
|
import "../../../../chunk-WEBEOBN5.js";
|
|
54
54
|
import "../../../../chunk-VUHLNYAE.js";
|
|
@@ -191,9 +191,8 @@ import "../../../chunk-MWFSIB6K.js";
|
|
|
191
191
|
import "../../../chunk-NUGT7LMR.js";
|
|
192
192
|
import {
|
|
193
193
|
Alert
|
|
194
|
-
} from "../../../chunk-
|
|
195
|
-
import "../../../chunk-
|
|
196
|
-
import "../../../chunk-B2Y3BABA.js";
|
|
194
|
+
} from "../../../chunk-WNMYWQ7D.js";
|
|
195
|
+
import "../../../chunk-57Z2ND3N.js";
|
|
197
196
|
import "../../../chunk-N3QUEBNS.js";
|
|
198
197
|
import "../../../chunk-2IBFEHIX.js";
|
|
199
198
|
import {
|
|
@@ -210,8 +209,9 @@ import "../../../chunk-HI2OFZSZ.js";
|
|
|
210
209
|
import "../../../chunk-KVEHH4SA.js";
|
|
211
210
|
import {
|
|
212
211
|
Banner
|
|
213
|
-
} from "../../../chunk-
|
|
214
|
-
import "../../../chunk-
|
|
212
|
+
} from "../../../chunk-4IVDVZZ2.js";
|
|
213
|
+
import "../../../chunk-M4LFDGI6.js";
|
|
214
|
+
import "../../../chunk-TXKZEKJN.js";
|
|
215
215
|
import "../../../chunk-5KLSLD72.js";
|
|
216
216
|
import {
|
|
217
217
|
SpecChart
|
|
@@ -88,7 +88,7 @@ import {
|
|
|
88
88
|
import {
|
|
89
89
|
AppHeaderIdentity,
|
|
90
90
|
AppHeaderStatus
|
|
91
|
-
} from "../../chunk-
|
|
91
|
+
} from "../../chunk-TU6RNZUQ.js";
|
|
92
92
|
import {
|
|
93
93
|
AppHeaderBrand
|
|
94
94
|
} from "../../chunk-H37GIAAM.js";
|
|
@@ -695,9 +695,8 @@ import "../../chunk-MWFSIB6K.js";
|
|
|
695
695
|
import "../../chunk-NUGT7LMR.js";
|
|
696
696
|
import {
|
|
697
697
|
Alert
|
|
698
|
-
} from "../../chunk-
|
|
699
|
-
import "../../chunk-
|
|
700
|
-
import "../../chunk-B2Y3BABA.js";
|
|
698
|
+
} from "../../chunk-WNMYWQ7D.js";
|
|
699
|
+
import "../../chunk-57Z2ND3N.js";
|
|
701
700
|
import "../../chunk-N3QUEBNS.js";
|
|
702
701
|
import "../../chunk-2IBFEHIX.js";
|
|
703
702
|
import {
|
|
@@ -714,8 +713,9 @@ import "../../chunk-HI2OFZSZ.js";
|
|
|
714
713
|
import "../../chunk-KVEHH4SA.js";
|
|
715
714
|
import {
|
|
716
715
|
Banner
|
|
717
|
-
} from "../../chunk-
|
|
718
|
-
import "../../chunk-
|
|
716
|
+
} from "../../chunk-4IVDVZZ2.js";
|
|
717
|
+
import "../../chunk-M4LFDGI6.js";
|
|
718
|
+
import "../../chunk-TXKZEKJN.js";
|
|
719
719
|
import "../../chunk-RTSK5OZT.js";
|
|
720
720
|
import "../../chunk-5KLSLD72.js";
|
|
721
721
|
import {
|
|
@@ -1,8 +1,13 @@
|
|
|
1
1
|
import {
|
|
2
|
+
BANNER_TINT_S,
|
|
2
3
|
bannerPartStyles,
|
|
4
|
+
bannerPointerStates,
|
|
3
5
|
fadeInSlide,
|
|
4
6
|
getVariantColor
|
|
5
|
-
} from "./chunk-
|
|
7
|
+
} from "./chunk-M4LFDGI6.js";
|
|
8
|
+
import {
|
|
9
|
+
FOCUS
|
|
10
|
+
} from "./chunk-TXKZEKJN.js";
|
|
6
11
|
|
|
7
12
|
// src/components/data-display/Banner/Banner.tsx
|
|
8
13
|
import CheckCircle from "@mui/icons-material/CheckCircle";
|
|
@@ -37,11 +42,19 @@ var StyledBanner = styled(Box, {
|
|
|
37
42
|
marginLeft: fullWidth ? "50%" : 0,
|
|
38
43
|
transform: fullWidth ? "translateX(-50%)" : "none",
|
|
39
44
|
animation: `${fadeInSlide} 0.3s ease-out`,
|
|
40
|
-
transition:
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
+
transition: `all 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow ${BANNER_TINT_S}s cubic-bezier(0.4, 0, 0.2, 1)`,
|
|
46
|
+
...bannerPointerStates(theme),
|
|
47
|
+
// Focus: `:focus-visible`, not `:focus-within`.
|
|
48
|
+
//
|
|
49
|
+
// The banner carries `tabIndex={0}`, so a MOUSE CLICK focused it and
|
|
50
|
+
// painted this ring — a keyboard affordance answering a pointer, which is
|
|
51
|
+
// what made clicking one look like an error state. `:focus-visible` is the
|
|
52
|
+
// browser's own answer to whether the focus came from the keyboard: the
|
|
53
|
+
// ring stays for whoever tabs here and never fires on a click. Same defect
|
|
54
|
+
// and same fix as `Alert`, which is the sibling surface (FUT-1458).
|
|
55
|
+
"&:focus-visible": {
|
|
56
|
+
outline: `${FOCUS.ringWidth}px solid ${alpha(colorPalette.main, FOCUS.ringAlpha)}`,
|
|
57
|
+
outlineOffset: `${FOCUS.offset}px`
|
|
45
58
|
},
|
|
46
59
|
...bannerPartStyles(theme, colorPalette),
|
|
47
60
|
// Responsive layout
|
|
@@ -97,9 +110,11 @@ var buildActionSx = (theme, variant, actionVariant) => {
|
|
|
97
110
|
...actionVariant === "primary" && {
|
|
98
111
|
backgroundColor: palette.main,
|
|
99
112
|
color: theme.palette.getContrastText(palette.main),
|
|
113
|
+
// Colour only. The banner itself moves nothing under a pointer, and an
|
|
114
|
+
// action that lifts inside one that does not is the inconsistency a
|
|
115
|
+
// reader notices without being able to name it (FUT-1458).
|
|
100
116
|
"&:hover": {
|
|
101
|
-
backgroundColor: palette.dark || palette.main
|
|
102
|
-
transform: "translateY(-1px)"
|
|
117
|
+
backgroundColor: palette.dark || palette.main
|
|
103
118
|
}
|
|
104
119
|
},
|
|
105
120
|
...actionVariant === "secondary" && {
|
|
@@ -107,8 +122,7 @@ var buildActionSx = (theme, variant, actionVariant) => {
|
|
|
107
122
|
color: palette.main,
|
|
108
123
|
"&:hover": {
|
|
109
124
|
backgroundColor: alpha(palette.main, 0.1),
|
|
110
|
-
borderColor: palette.main
|
|
111
|
-
transform: "translateY(-1px)"
|
|
125
|
+
borderColor: palette.main
|
|
112
126
|
}
|
|
113
127
|
}
|
|
114
128
|
};
|
|
@@ -246,4 +260,4 @@ Banner.displayName = "Banner";
|
|
|
246
260
|
export {
|
|
247
261
|
Banner
|
|
248
262
|
};
|
|
249
|
-
//# sourceMappingURL=chunk-
|
|
263
|
+
//# sourceMappingURL=chunk-4IVDVZZ2.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/data-display/Banner/Banner.tsx"],"sourcesContent":["import CheckCircle from '@mui/icons-material/CheckCircle';\nimport Close from '@mui/icons-material/Close';\nimport Error from '@mui/icons-material/Error';\nimport Info from '@mui/icons-material/Info';\nimport Warning from '@mui/icons-material/Warning';\nimport Box from '@mui/material/Box/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, styled } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { BANNER_TINT_S, bannerPartStyles, bannerPointerStates, fadeInSlide, getVariantColor } from './Banner.styles';\nimport { FOCUS } from '../Alert/Alert.metrics';\nimport type { BannerProps, BannerVariant } from './Banner.types';\n\n\n\nconst StyledBanner = styled(Box, {\n shouldForwardProp: (prop) => !['variant', 'sticky', 'fullWidth'].includes(prop as string),\n})<{\n variant: BannerVariant;\n sticky: boolean;\n fullWidth: boolean;\n}>(({ theme, variant, sticky, fullWidth }) => {\n\n const colorPalette = getVariantColor(theme, variant);\n\n return {\n display: 'flex',\n alignItems: 'flex-start',\n gap: theme.spacing(1.5),\n padding: theme.spacing(1.5, 2),\n borderRadius: theme.spacing(1),\n backgroundColor: alpha(colorPalette.main, 0.1),\n border: `1px solid ${alpha(colorPalette.main, 0.2)}`,\n color: colorPalette.main,\n position: sticky ? 'sticky' : 'relative',\n top: sticky ? 0 : 'auto',\n zIndex: sticky ? theme.zIndex.appBar : 'auto',\n width: fullWidth ? '100vw' : '100%',\n marginLeft: fullWidth ? '50%' : 0,\n transform: fullWidth ? 'translateX(-50%)' : 'none',\n animation: `${fadeInSlide} 0.3s ease-out`,\n transition: `all 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow ${BANNER_TINT_S}s cubic-bezier(0.4, 0, 0.2, 1)`,\n\n ...bannerPointerStates(theme),\n\n // Focus: `:focus-visible`, not `:focus-within`.\n //\n // The banner carries `tabIndex={0}`, so a MOUSE CLICK focused it and\n // painted this ring — a keyboard affordance answering a pointer, which is\n // what made clicking one look like an error state. `:focus-visible` is the\n // browser's own answer to whether the focus came from the keyboard: the\n // ring stays for whoever tabs here and never fires on a click. Same defect\n // and same fix as `Alert`, which is the sibling surface (FUT-1458).\n '&:focus-visible': {\n outline: `${FOCUS.ringWidth}px solid ${alpha(colorPalette.main, FOCUS.ringAlpha)}`,\n outlineOffset: `${FOCUS.offset}px`,\n },\n\n ...bannerPartStyles(theme, colorPalette),\n\n // Responsive layout\n [theme.breakpoints.down('sm')]: {\n flexDirection: 'column',\n alignItems: 'stretch',\n gap: theme.spacing(1),\n \n '.banner-content': {\n order: 1,\n },\n\n '.banner-actions': {\n order: 2,\n justifyContent: 'flex-start',\n marginTop: theme.spacing(1),\n marginLeft: 0,\n },\n },\n\n // Glass effect variant (optional enhancement)\n '&.banner-glass': {\n backgroundColor: alpha(theme.palette.background.paper, 0.1),\n backdropFilter: 'blur(20px)',\n border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n color: theme.palette.text.primary,\n \n '.banner-icon': {\n color: colorPalette.main,\n },\n },\n };\n});\n\nconst getVariantIcon = (variant: BannerVariant) => {\n const iconMap: Record<BannerVariant, React.ReactNode> = {\n info: <Info />,\n success: <CheckCircle />,\n warning: <Warning />,\n critical: <Error />,\n };\n return iconMap[variant];\n};\n\ntype BannerAction = NonNullable<BannerProps['actions']>[number];\n\n// Warnings and criticals interrupt the screen reader; the rest are announced\n// politely when it next pauses.\nconst resolveAriaAnnouncement = (variant: BannerVariant) => ({\n role: variant === 'warning' || variant === 'critical' ? 'alert' : 'status',\n live: (variant === 'critical' ? 'assertive' : 'polite') as 'assertive' | 'polite',\n});\n\nconst testIdFor = (base: string | undefined, suffix: string) =>\n base ? `${base}-${suffix}` : `banner-${suffix}`;\n\n// Resolves the banner's palette once, rather than per property as the inline\n// version did — getVariantColor was being called nine times to build one button.\nconst buildActionSx = (\n theme: Theme,\n variant: BannerVariant,\n actionVariant: BannerAction['variant'],\n) => {\n const palette = getVariantColor(theme, variant);\n\n return {\n minWidth: 'auto',\n px: 1.5,\n py: 0.5,\n fontSize: '0.8125rem',\n fontWeight: 500,\n borderRadius: 1,\n\n ...(actionVariant === 'primary' && {\n backgroundColor: palette.main,\n color: theme.palette.getContrastText(palette.main),\n\n // Colour only. The banner itself moves nothing under a pointer, and an\n // action that lifts inside one that does not is the inconsistency a\n // reader notices without being able to name it (FUT-1458).\n '&:hover': {\n backgroundColor: palette.dark || palette.main,\n },\n }),\n\n ...(actionVariant === 'secondary' && {\n borderColor: palette.main,\n color: palette.main,\n\n '&:hover': {\n backgroundColor: alpha(palette.main, 0.1),\n borderColor: palette.main,\n },\n }),\n };\n};\n\nconst BannerActionButton: React.FC<{\n action: BannerAction;\n variant: BannerVariant;\n dataTestId?: string;\n}> = ({ action, variant, dataTestId }) => (\n <Button\n size=\"small\"\n variant={action.variant === 'primary' ? 'contained' : 'outlined'}\n onClick={action.onClick}\n data-testid={testIdFor(dataTestId, 'action')}\n sx={(theme) => buildActionSx(theme, variant, action.variant)}\n >\n {action.label}\n </Button>\n);\n\nconst BannerBody: React.FC<{\n displayIcon: React.ReactNode;\n title?: BannerProps['title'];\n description?: BannerProps['description'];\n dataTestId?: string;\n children?: React.ReactNode;\n}> = ({ displayIcon, title, description, dataTestId, children }) => (\n <>\n {displayIcon && (\n <Box className=\"banner-icon\" aria-hidden=\"true\" data-testid={testIdFor(dataTestId, 'icon')}>\n {displayIcon}\n </Box>\n )}\n\n <Box className=\"banner-content\">\n {title && (\n <Typography\n className=\"banner-title\"\n variant=\"subtitle2\"\n component=\"div\"\n data-testid={testIdFor(dataTestId, 'title')}\n >\n {title}\n </Typography>\n )}\n {description && (\n <Typography\n className=\"banner-description\"\n variant=\"body2\"\n component=\"div\"\n data-testid={testIdFor(dataTestId, 'message')}\n >\n {description}\n </Typography>\n )}\n {children}\n </Box>\n </>\n);\n\nconst BannerTrailing: React.FC<{\n actions?: BannerProps['actions'];\n variant: BannerVariant;\n dismissible: boolean;\n onDismissClick: () => void;\n dismissLabel: string;\n dataTestId?: string;\n}> = ({ actions, variant, dismissible, onDismissClick, dismissLabel, dataTestId }) => (\n <Box display=\"flex\" alignItems=\"center\" gap={1}>\n {actions && actions.length > 0 && (\n <Box className=\"banner-actions\">\n {actions.map((action, index) => (\n <BannerActionButton\n key={index}\n action={action}\n variant={variant}\n dataTestId={dataTestId}\n />\n ))}\n </Box>\n )}\n\n {dismissible && (\n <IconButton\n className=\"banner-dismiss\"\n size=\"small\"\n onClick={onDismissClick}\n aria-label={dismissLabel}\n data-testid={testIdFor(dataTestId, 'close')}\n sx={{ transition: 'all 0.2s ease' }}\n >\n <Close fontSize=\"small\" />\n </IconButton>\n )}\n </Box>\n);\n\nexport const Banner = React.forwardRef<HTMLDivElement, BannerProps>(\n (\n {\n variant = 'info',\n title,\n description,\n icon,\n dismissible = false,\n dismissLabel,\n onDismiss,\n actions,\n sticky = false,\n fullWidth = false,\n className,\n children,\n 'data-testid': dataTestId = 'banner',\n ...props\n },\n ref,\n ) => {\n const [visible, setVisible] = React.useState(true);\n\n const handleDismiss = React.useCallback(() => {\n setVisible(false);\n onDismiss?.();\n }, [onDismiss]);\n\n const displayIcon = icon || getVariantIcon(variant);\n\n const { role: ariaRole, live: ariaLive } = resolveAriaAnnouncement(variant);\n\n if (!visible) {\n return null;\n }\n\n return (\n <StyledBanner\n ref={ref}\n variant={variant}\n sticky={sticky}\n fullWidth={fullWidth}\n className={className}\n role={ariaRole}\n aria-live={ariaLive}\n aria-atomic=\"true\"\n tabIndex={0}\n data-testid={dataTestId}\n {...props}\n >\n <BannerBody\n displayIcon={displayIcon}\n title={title}\n description={description}\n dataTestId={dataTestId}\n >\n {children}\n </BannerBody>\n\n <BannerTrailing\n actions={actions}\n variant={variant}\n dismissible={dismissible}\n onDismissClick={handleDismiss}\n dismissLabel={dismissLabel}\n dataTestId={dataTestId}\n />\n </StyledBanner>\n );\n },\n);\n\nBanner.displayName = 'Banner';"],"mappings":"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","names":[]}
|
|
@@ -12,7 +12,7 @@ import {
|
|
|
12
12
|
} from "./chunk-EFEZWG4C.js";
|
|
13
13
|
import {
|
|
14
14
|
Alert
|
|
15
|
-
} from "./chunk-
|
|
15
|
+
} from "./chunk-WNMYWQ7D.js";
|
|
16
16
|
|
|
17
17
|
// src/components/data-display/DataViews/data-views-table-parts.tsx
|
|
18
18
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -121,4 +121,4 @@ export {
|
|
|
121
121
|
ViewsMenuSlot,
|
|
122
122
|
ViewDialogs
|
|
123
123
|
};
|
|
124
|
-
//# sourceMappingURL=chunk-
|
|
124
|
+
//# sourceMappingURL=chunk-4T7TXRGM.js.map
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
import {
|
|
2
|
+
VARIANT_ICON
|
|
3
|
+
} from "./chunk-N3QUEBNS.js";
|
|
1
4
|
import {
|
|
2
5
|
ACTION_SLOT,
|
|
3
6
|
ALERT_EASING,
|
|
@@ -18,10 +21,7 @@ import {
|
|
|
18
21
|
SEMANTIC_SURFACE,
|
|
19
22
|
SEMANTIC_VARIANTS,
|
|
20
23
|
seconds
|
|
21
|
-
} from "./chunk-
|
|
22
|
-
import {
|
|
23
|
-
VARIANT_ICON
|
|
24
|
-
} from "./chunk-N3QUEBNS.js";
|
|
24
|
+
} from "./chunk-TXKZEKJN.js";
|
|
25
25
|
import {
|
|
26
26
|
px
|
|
27
27
|
} from "./chunk-NQN5Z36J.js";
|
|
@@ -216,15 +216,14 @@ var alertVariantStyles = (theme, customVariant, colorPalette) => ({
|
|
|
216
216
|
height: "100%",
|
|
217
217
|
background: `linear-gradient(90deg, transparent, ${alpha(theme.palette.common.white, GRADIENT.shimmerAlpha)}, transparent)`,
|
|
218
218
|
animation: `${shimmerAnimation} ${seconds(GRADIENT.shimmerMs)} infinite`
|
|
219
|
-
},
|
|
220
|
-
"&:hover": {
|
|
221
|
-
filter: `brightness(${GRADIENT.hoverBrightness})`,
|
|
222
|
-
transform: `translateY(-${GRADIENT.hoverLift}px) scale(${GRADIENT.hoverScale})`
|
|
223
219
|
}
|
|
224
220
|
}
|
|
225
221
|
});
|
|
226
222
|
var glowStyles = (colorPalette) => ({
|
|
227
|
-
|
|
223
|
+
// No `!important`: the pointer states paint their tint as an INSET shadow on
|
|
224
|
+
// the same property, and compose this one alongside it rather than fighting
|
|
225
|
+
// it. `glowShadow` in `Alert.tsx` is the other half of that pair.
|
|
226
|
+
boxShadow: `0 0 ${GLOW.blur}px ${GLOW.spread}px ${alpha(colorPalette.main, GLOW.alpha)}`,
|
|
228
227
|
filter: `brightness(${GLOW.brightness})`
|
|
229
228
|
});
|
|
230
229
|
var pulseAfter = (colorPalette) => ({
|
|
@@ -267,4 +266,4 @@ export {
|
|
|
267
266
|
alertVariantStyles,
|
|
268
267
|
alertEmphasisStyles
|
|
269
268
|
};
|
|
270
|
-
//# sourceMappingURL=chunk-
|
|
269
|
+
//# sourceMappingURL=chunk-57Z2ND3N.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/data-display/Alert/Alert.styles.tsx"],"sourcesContent":["import Error from '@mui/icons-material/Error';\nimport Info from '@mui/icons-material/Info';\nimport CheckCircle from '@mui/icons-material/CheckCircle';\nimport Warning from '@mui/icons-material/Warning';\nimport { alpha, darken, keyframes, lighten } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type { AlertVariant } from './Alert.base';\nimport { VARIANT_ICON } from './Alert.helpers';\nimport {\n ACTION_SLOT,\n ALERT_EASING,\n ALERT_PADDING_UNITS,\n ALERT_TRANSITION_MS,\n type AlertPalette,\n FADE_IN,\n GLASS,\n GLOW,\n GRADIENT,\n ICON_SLOT,\n ICON_SPIN,\n MESSAGE_BUTTON,\n MESSAGE_FONT_SIZE,\n MESSAGE_GAP_UNITS,\n MESSAGE_LINE_HEIGHT,\n NEUTRAL_GREY,\n PULSE,\n seconds,\n SEMANTIC_SURFACE,\n SEMANTIC_VARIANTS,\n} from './Alert.metrics';\nimport type { IconName } from '../../../icons/Icon.types';\nimport { px } from '../../../tokens/theme';\n\nexport type { AlertPalette } from './Alert.metrics';\n\nexport const pulseAnimation = keyframes`\n 0% {\n box-shadow: 0 0 0 0 currentColor;\n opacity: 1;\n }\n 70% {\n box-shadow: 0 0 0 ${PULSE.spread}px currentColor;\n opacity: 0;\n }\n 100% {\n box-shadow: 0 0 0 0 currentColor;\n opacity: 0;\n }\n`;\n\n// Additional animations can be enabled as needed\n// const slideInAnimation = keyframes`\n// from {\n// transform: translateX(-100%);\n// opacity: 0;\n// }\n// to {\n// transform: translateX(0);\n// opacity: 1;\n// }\n// `;\n\n// const bounceIn = keyframes`\n// 0% {\n// transform: scale(0.3);\n// opacity: 0;\n// }\n// 50% {\n// transform: scale(1.05);\n// }\n// 70% {\n// transform: scale(0.9);\n// }\n// 100% {\n// transform: scale(1);\n// opacity: 1;\n// }\n// `;\n\n// Removed unused slideInAnimation - can be re-added if needed for future features\n\nexport const shimmerAnimation = keyframes`\n 0% {\n background-position: -${GRADIENT.shimmerTravel}px 0;\n }\n 100% {\n background-position: ${GRADIENT.shimmerTravel}px 0;\n }\n`;\n\nexport const fadeInScale = keyframes`\n from {\n opacity: 0;\n transform: scale(${FADE_IN.scale}) translateY(-${FADE_IN.lift}px);\n }\n to {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n`;\n\nexport const iconRotate = keyframes`\n 0% {\n transform: rotate(0deg) scale(${ICON_SPIN.from});\n }\n 50% {\n transform: rotate(180deg) scale(${ICON_SPIN.mid});\n }\n 100% {\n transform: rotate(360deg) scale(1);\n }\n`;\n\n// The MUI-themed twin of `alertPalette` in `Alert.metrics.ts`: same names,\n// same three greys for `neutral`, same fallback to `info`.\nexport const getColorFromTheme = (theme: Theme, variant: string): AlertPalette => {\n const colorMap: Record<string, AlertPalette> = {\n info: theme.palette.info,\n success: theme.palette.success,\n warning: theme.palette.warning,\n danger: theme.palette.error,\n primary: theme.palette.primary,\n secondary: theme.palette.secondary,\n neutral: {\n main: theme.palette.grey[NEUTRAL_GREY.main] || '#9E9E9E',\n light: theme.palette.grey[NEUTRAL_GREY.light] || '#E0E0E0',\n dark: theme.palette.grey[NEUTRAL_GREY.dark] || '#616161',\n },\n };\n\n return colorMap[variant] || theme.palette.info;\n};\n\n/** The shared glyph names drawn with MUI's icons; the native side draws the same names from the icon set. */\nconst VARIANT_ICONS: Partial<Record<IconName, React.ReactNode>> = {\n Info: <Info />,\n CheckCircle: <CheckCircle />,\n Warning: <Warning />,\n Error: <Error />,\n};\n\nexport const getVariantIcon = (variant: string): React.ReactNode => {\n const name = VARIANT_ICON[variant as AlertVariant];\n return name ? VARIANT_ICONS[name] : undefined;\n};\n\n/**\n * The room the message is given — padding, the stack's rhythm, and where the\n * icon and the close button sit relative to it.\n *\n * Extracted for the same reason {@link alertVariantStyles} and\n * {@link alertEmphasisStyles} were: `styled()`'s callback is one function, and\n * every block written inline is counted against its length by the complexity\n * gate. Keeping the layout here means the callback assembles four named pieces\n * instead of carrying all of them.\n */\nexport const alertLayoutStyles = (\n theme: Theme,\n colorPalette: AlertPalette,\n animate: boolean | undefined,\n): CSSObject => ({\n // ROOM TO READ.\n //\n // MUI's `6px 16px` is sized for one line of text and nothing else. This Alert\n // routinely carries three things stacked — a sentence, a smaller explanation,\n // then a control — and at 6px they touched top and bottom and ran together\n // vertically, so the whole card read as one dense block instead of as a\n // message with parts. The generosity is what makes the structure legible; it\n // is not decoration.\n //\n // Padding stays overridable by an `sx` (a full-bleed strip legitimately wants\n // it tight), because this is a default rather than a rule.\n padding: theme.spacing(ALERT_PADDING_UNITS.vertical, ALERT_PADDING_UNITS.horizontal),\n\n '.MuiAlert-message': {\n display: 'flex',\n flexDirection: 'column',\n // 0.5 put a title, its explanation and a button 4px apart, which reads as a\n // spacing bug rather than as a group. 1 separates the lines; the extra\n // margin below goes to whatever CONTROL sits at the end, because the gap\n // between prose and a thing you press has to be bigger than the gap between\n // two lines of prose or the button looks like part of the text.\n gap: theme.spacing(MESSAGE_GAP_UNITS),\n fontSize: px(MESSAGE_FONT_SIZE),\n lineHeight: MESSAGE_LINE_HEIGHT,\n // No padding of its own — the root's is now doing that job, and MUI's\n // default `8px 0` on top of it would double the vertical space.\n padding: 0,\n // A CONTROL ON A TINTED PANEL NEEDS AN EDGE.\n //\n // `ghost` and `text` paint no background and no border — bare labels, which\n // works on white where the surrounding page is obviously not clickable.\n // Inside a coloured Alert it stops working: the label is one more coloured\n // phrase among several, and a \"Cancelar\" beside two lines of prose reads as\n // part of the prose.\n //\n // Only the BORDER is set, never the background or the colour, and that is\n // what makes it safe to apply to every button rather than just the bare\n // ones: a `solid` keeps its fill and its light label and gains a hairline\n // in the same hue, while a `ghost` gains the whole affordance.\n '.MuiButton-root': {\n marginTop: theme.spacing(MESSAGE_BUTTON.marginTopUnits),\n border: `1px solid ${alpha(colorPalette.main, MESSAGE_BUTTON.borderAlpha)}`,\n },\n },\n\n '.MuiAlert-icon': {\n transition: `transform ${seconds(ALERT_TRANSITION_MS)} ${ALERT_EASING}`,\n alignItems: 'center',\n // Clear of the words rather than nearly touching them, and aligned to the\n // FIRST line instead of centred on the whole block — an icon floating\n // halfway down a three-line message points at nothing.\n alignSelf: 'flex-start',\n marginRight: theme.spacing(ICON_SLOT.marginRightUnits),\n paddingTop: theme.spacing(ICON_SLOT.paddingTopUnits),\n animation: animate ? `${iconRotate} ${seconds(ICON_SPIN.ms)} ease-out` : 'none',\n },\n\n // The close button, kept off the text it sits beside.\n '.MuiAlert-action': {\n alignItems: 'flex-start',\n paddingLeft: theme.spacing(ACTION_SLOT.paddingLeftUnits),\n },\n});\n\n/**\n * A semantic Alert's surface and ink.\n *\n * ## Why this is not `alpha(main, 0.1)`\n *\n * It used to be, four times over, with `color: main` for the text. Both halves\n * were wrong, and independently so.\n *\n * The fill was TRANSLUCENT. A 10% wash only reads as a banner when something\n * opaque is behind it, so the component silently depended on where a consumer\n * put it. Placed over content — a floating notice, an invite anchored above a\n * catalogue — the page came straight through and the sentence interleaved with\n * whatever it was over. That is not a faint banner; it is an unreadable one,\n * and nothing in the component said so.\n *\n * The ink was the SEVERITY HUE at body size. `#0288d1`, this library's info\n * blue, is 3.03:1 on white — under the 4.5:1 WCAG AA floor before any wash is\n * involved. So the text failed on a plain white page too, where the fill was\n * behaving exactly as intended.\n *\n * ## Why `lighten`/`darken` rather than a hand-picked pair\n *\n * These are the same transforms MUI's own `standard` Alert uses, at the same\n * ratios — the recipe this component overrode. Reusing it means an OPAQUE tint\n * with a dark ink of the same hue, contrast that holds on any surface because\n * it no longer depends on one, and a pairing already proven across MUI's\n * palette rather than eyeballed here. Both modes are handled: on a dark theme\n * the tint darkens and the ink lightens, which an alpha wash could never do\n * because it carries the seed's own lightness through unchanged.\n *\n * The border keeps an alpha — it is a hairline over the tint it belongs to, so\n * translucency there costs nothing and lets the edge follow the fill.\n *\n * The ratios live in `Alert.metrics.ts` (`SEMANTIC_SURFACE`), where the\n * native renderer reads the same three through the same colour arithmetic.\n */\nconst semanticSurface = (theme: Theme, colorPalette: AlertPalette): CSSObject => {\n const dark = theme.palette.mode === 'dark';\n return {\n backgroundColor: dark\n ? darken(colorPalette.main, SEMANTIC_SURFACE.tint.dark)\n : lighten(colorPalette.main, SEMANTIC_SURFACE.tint.light),\n color: dark\n ? lighten(colorPalette.main, SEMANTIC_SURFACE.ink)\n : darken(colorPalette.main, SEMANTIC_SURFACE.ink),\n border: `1px solid ${alpha(colorPalette.main, SEMANTIC_SURFACE.borderAlpha)}`,\n '.MuiAlert-icon': {\n color: colorPalette.main,\n },\n };\n};\n\n// The six visual variants. Each block is spread in only when it matches, which\n// is how the original inline version read; keeping that shape here means the\n// styled() callback carries one branch instead of six. The four semantics were\n// four IDENTICAL copies of the same block — they now share one, so the next\n// change to a banner's surface cannot land on three of them.\nexport const alertVariantStyles = (\n theme: Theme,\n customVariant: string | undefined,\n colorPalette: AlertPalette,\n): CSSObject => ({\n ...(customVariant !== undefined &&\n SEMANTIC_VARIANTS.has(customVariant as AlertVariant) &&\n semanticSurface(theme, colorPalette)),\n\n ...(customVariant === 'glass' && {\n // 85%, not 10%. This is the variant that is MEANT to be see-through, and it\n // was the same mistake in a costume: at 0.1 the blur had almost nothing to\n // sit on, so `glass` was not frosted, it was a window. A frosted pane has to\n // be mostly pane — the backdrop should be legible AS texture behind the\n // text, never as competition with it.\n backgroundColor: alpha(theme.palette.background.paper, GLASS.backgroundAlpha),\n backdropFilter: `blur(${GLASS.blur}px) saturate(${GLASS.saturatePercent}%)`,\n WebkitBackdropFilter: `blur(${GLASS.blur}px) saturate(${GLASS.saturatePercent}%)`,\n border: `1px solid ${alpha(theme.palette.divider, GLASS.borderAlpha)}`,\n color: theme.palette.text.primary,\n '.MuiAlert-icon': {\n color: theme.palette.primary.main,\n },\n // Safari before 18 and Firefox with the filter disabled paint the declared\n // alpha with nothing blurred behind it — the see-through banner this is\n // fixing. There is no degraded frost to fall back to, so it falls back to an\n // opaque pane: less pretty, still readable.\n '@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))': {\n backgroundColor: theme.palette.background.paper,\n },\n }),\n\n ...(customVariant === 'gradient' && {\n background: `linear-gradient(${GRADIENT.angleDeg}deg, ${alpha(colorPalette.light || colorPalette.main, GRADIENT.stopAlpha)}, ${alpha(colorPalette.dark || colorPalette.main, GRADIENT.stopAlpha)})`,\n color: theme.palette.getContrastText(colorPalette.main),\n border: 'none',\n position: 'relative',\n overflow: 'hidden',\n '.MuiAlert-icon': {\n color: theme.palette.getContrastText(colorPalette.main),\n },\n '&::before': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: `-${GRADIENT.shimmerTravel}px`,\n width: '100%',\n height: '100%',\n background: `linear-gradient(90deg, transparent, ${alpha(theme.palette.common.white, GRADIENT.shimmerAlpha)}, transparent)`,\n animation: `${shimmerAnimation} ${seconds(GRADIENT.shimmerMs)} infinite`,\n },\n '&:hover': {\n filter: `brightness(${GRADIENT.hoverBrightness})`,\n transform: `translateY(-${GRADIENT.hoverLift}px) scale(${GRADIENT.hoverScale})`,\n },\n }),\n});\n\n/** The web's glow: a soft shadow of the hue and a touch of brightness. */\nconst glowStyles = (colorPalette: AlertPalette): CSSObject => ({\n boxShadow: `0 0 ${GLOW.blur}px ${GLOW.spread}px ${alpha(colorPalette.main, GLOW.alpha)} !important`,\n filter: `brightness(${GLOW.brightness})`,\n});\n\n/** The web's pulse: a wash of the hue over the whole card, fading out every two seconds. */\nconst pulseAfter = (colorPalette: AlertPalette): CSSObject => ({\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n borderRadius: 'inherit',\n backgroundColor: colorPalette.main,\n opacity: PULSE.alpha,\n animation: `${pulseAnimation} ${seconds(PULSE.ms)} infinite`,\n pointerEvents: 'none',\n zIndex: -1,\n});\n\n// glow and pulse combine into three distinct looks, so the combinations are\n// spelled out rather than layered — layering them would let the glow-only shadow\n// leak into the glow+pulse case. Declaration ORDER is kept as it has always\n// been, because emotion hashes the serialised block into the class name.\nexport const alertEmphasisStyles = (\n colorPalette: AlertPalette,\n glow: boolean,\n pulse: boolean,\n): CSSObject => ({\n ...(glow && !pulse && glowStyles(colorPalette)),\n\n // Pulse animation\n ...(pulse &&\n !glow && {\n position: 'relative',\n '&::after': pulseAfter(colorPalette),\n }),\n\n // Both glow and pulse\n ...(glow &&\n pulse && {\n position: 'relative',\n ...glowStyles(colorPalette),\n '&::after': pulseAfter(colorPalette),\n }),\n});\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../src/components/data-display/Alert/Alert.styles.tsx"],"sourcesContent":["import Error from '@mui/icons-material/Error';\nimport Info from '@mui/icons-material/Info';\nimport CheckCircle from '@mui/icons-material/CheckCircle';\nimport Warning from '@mui/icons-material/Warning';\nimport { alpha, darken, keyframes, lighten } from '@mui/material/styles/index.js';\nimport type { CSSObject, Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport type { AlertVariant } from './Alert.base';\nimport { VARIANT_ICON } from './Alert.helpers';\nimport {\n ACTION_SLOT,\n ALERT_EASING,\n ALERT_PADDING_UNITS,\n ALERT_TRANSITION_MS,\n type AlertPalette,\n FADE_IN,\n GLASS,\n GLOW,\n GRADIENT,\n ICON_SLOT,\n ICON_SPIN,\n MESSAGE_BUTTON,\n MESSAGE_FONT_SIZE,\n MESSAGE_GAP_UNITS,\n MESSAGE_LINE_HEIGHT,\n NEUTRAL_GREY,\n PULSE,\n seconds,\n SEMANTIC_SURFACE,\n SEMANTIC_VARIANTS,\n} from './Alert.metrics';\nimport type { IconName } from '../../../icons/Icon.types';\nimport { px } from '../../../tokens/theme';\n\nexport type { AlertPalette } from './Alert.metrics';\n\nexport const pulseAnimation = keyframes`\n 0% {\n box-shadow: 0 0 0 0 currentColor;\n opacity: 1;\n }\n 70% {\n box-shadow: 0 0 0 ${PULSE.spread}px currentColor;\n opacity: 0;\n }\n 100% {\n box-shadow: 0 0 0 0 currentColor;\n opacity: 0;\n }\n`;\n\n// Additional animations can be enabled as needed\n// const slideInAnimation = keyframes`\n// from {\n// transform: translateX(-100%);\n// opacity: 0;\n// }\n// to {\n// transform: translateX(0);\n// opacity: 1;\n// }\n// `;\n\n// const bounceIn = keyframes`\n// 0% {\n// transform: scale(0.3);\n// opacity: 0;\n// }\n// 50% {\n// transform: scale(1.05);\n// }\n// 70% {\n// transform: scale(0.9);\n// }\n// 100% {\n// transform: scale(1);\n// opacity: 1;\n// }\n// `;\n\n// Removed unused slideInAnimation - can be re-added if needed for future features\n\nexport const shimmerAnimation = keyframes`\n 0% {\n background-position: -${GRADIENT.shimmerTravel}px 0;\n }\n 100% {\n background-position: ${GRADIENT.shimmerTravel}px 0;\n }\n`;\n\nexport const fadeInScale = keyframes`\n from {\n opacity: 0;\n transform: scale(${FADE_IN.scale}) translateY(-${FADE_IN.lift}px);\n }\n to {\n opacity: 1;\n transform: scale(1) translateY(0);\n }\n`;\n\nexport const iconRotate = keyframes`\n 0% {\n transform: rotate(0deg) scale(${ICON_SPIN.from});\n }\n 50% {\n transform: rotate(180deg) scale(${ICON_SPIN.mid});\n }\n 100% {\n transform: rotate(360deg) scale(1);\n }\n`;\n\n// The MUI-themed twin of `alertPalette` in `Alert.metrics.ts`: same names,\n// same three greys for `neutral`, same fallback to `info`.\nexport const getColorFromTheme = (theme: Theme, variant: string): AlertPalette => {\n const colorMap: Record<string, AlertPalette> = {\n info: theme.palette.info,\n success: theme.palette.success,\n warning: theme.palette.warning,\n danger: theme.palette.error,\n primary: theme.palette.primary,\n secondary: theme.palette.secondary,\n neutral: {\n main: theme.palette.grey[NEUTRAL_GREY.main] || '#9E9E9E',\n light: theme.palette.grey[NEUTRAL_GREY.light] || '#E0E0E0',\n dark: theme.palette.grey[NEUTRAL_GREY.dark] || '#616161',\n },\n };\n\n return colorMap[variant] || theme.palette.info;\n};\n\n/** The shared glyph names drawn with MUI's icons; the native side draws the same names from the icon set. */\nconst VARIANT_ICONS: Partial<Record<IconName, React.ReactNode>> = {\n Info: <Info />,\n CheckCircle: <CheckCircle />,\n Warning: <Warning />,\n Error: <Error />,\n};\n\nexport const getVariantIcon = (variant: string): React.ReactNode => {\n const name = VARIANT_ICON[variant as AlertVariant];\n return name ? VARIANT_ICONS[name] : undefined;\n};\n\n/**\n * The room the message is given — padding, the stack's rhythm, and where the\n * icon and the close button sit relative to it.\n *\n * Extracted for the same reason {@link alertVariantStyles} and\n * {@link alertEmphasisStyles} were: `styled()`'s callback is one function, and\n * every block written inline is counted against its length by the complexity\n * gate. Keeping the layout here means the callback assembles four named pieces\n * instead of carrying all of them.\n */\nexport const alertLayoutStyles = (\n theme: Theme,\n colorPalette: AlertPalette,\n animate: boolean | undefined,\n): CSSObject => ({\n // ROOM TO READ.\n //\n // MUI's `6px 16px` is sized for one line of text and nothing else. This Alert\n // routinely carries three things stacked — a sentence, a smaller explanation,\n // then a control — and at 6px they touched top and bottom and ran together\n // vertically, so the whole card read as one dense block instead of as a\n // message with parts. The generosity is what makes the structure legible; it\n // is not decoration.\n //\n // Padding stays overridable by an `sx` (a full-bleed strip legitimately wants\n // it tight), because this is a default rather than a rule.\n padding: theme.spacing(ALERT_PADDING_UNITS.vertical, ALERT_PADDING_UNITS.horizontal),\n\n '.MuiAlert-message': {\n display: 'flex',\n flexDirection: 'column',\n // 0.5 put a title, its explanation and a button 4px apart, which reads as a\n // spacing bug rather than as a group. 1 separates the lines; the extra\n // margin below goes to whatever CONTROL sits at the end, because the gap\n // between prose and a thing you press has to be bigger than the gap between\n // two lines of prose or the button looks like part of the text.\n gap: theme.spacing(MESSAGE_GAP_UNITS),\n fontSize: px(MESSAGE_FONT_SIZE),\n lineHeight: MESSAGE_LINE_HEIGHT,\n // No padding of its own — the root's is now doing that job, and MUI's\n // default `8px 0` on top of it would double the vertical space.\n padding: 0,\n // A CONTROL ON A TINTED PANEL NEEDS AN EDGE.\n //\n // `ghost` and `text` paint no background and no border — bare labels, which\n // works on white where the surrounding page is obviously not clickable.\n // Inside a coloured Alert it stops working: the label is one more coloured\n // phrase among several, and a \"Cancelar\" beside two lines of prose reads as\n // part of the prose.\n //\n // Only the BORDER is set, never the background or the colour, and that is\n // what makes it safe to apply to every button rather than just the bare\n // ones: a `solid` keeps its fill and its light label and gains a hairline\n // in the same hue, while a `ghost` gains the whole affordance.\n '.MuiButton-root': {\n marginTop: theme.spacing(MESSAGE_BUTTON.marginTopUnits),\n border: `1px solid ${alpha(colorPalette.main, MESSAGE_BUTTON.borderAlpha)}`,\n },\n },\n\n '.MuiAlert-icon': {\n transition: `transform ${seconds(ALERT_TRANSITION_MS)} ${ALERT_EASING}`,\n alignItems: 'center',\n // Clear of the words rather than nearly touching them, and aligned to the\n // FIRST line instead of centred on the whole block — an icon floating\n // halfway down a three-line message points at nothing.\n alignSelf: 'flex-start',\n marginRight: theme.spacing(ICON_SLOT.marginRightUnits),\n paddingTop: theme.spacing(ICON_SLOT.paddingTopUnits),\n animation: animate ? `${iconRotate} ${seconds(ICON_SPIN.ms)} ease-out` : 'none',\n },\n\n // The close button, kept off the text it sits beside.\n '.MuiAlert-action': {\n alignItems: 'flex-start',\n paddingLeft: theme.spacing(ACTION_SLOT.paddingLeftUnits),\n },\n});\n\n/**\n * A semantic Alert's surface and ink.\n *\n * ## Why this is not `alpha(main, 0.1)`\n *\n * It used to be, four times over, with `color: main` for the text. Both halves\n * were wrong, and independently so.\n *\n * The fill was TRANSLUCENT. A 10% wash only reads as a banner when something\n * opaque is behind it, so the component silently depended on where a consumer\n * put it. Placed over content — a floating notice, an invite anchored above a\n * catalogue — the page came straight through and the sentence interleaved with\n * whatever it was over. That is not a faint banner; it is an unreadable one,\n * and nothing in the component said so.\n *\n * The ink was the SEVERITY HUE at body size. `#0288d1`, this library's info\n * blue, is 3.03:1 on white — under the 4.5:1 WCAG AA floor before any wash is\n * involved. So the text failed on a plain white page too, where the fill was\n * behaving exactly as intended.\n *\n * ## Why `lighten`/`darken` rather than a hand-picked pair\n *\n * These are the same transforms MUI's own `standard` Alert uses, at the same\n * ratios — the recipe this component overrode. Reusing it means an OPAQUE tint\n * with a dark ink of the same hue, contrast that holds on any surface because\n * it no longer depends on one, and a pairing already proven across MUI's\n * palette rather than eyeballed here. Both modes are handled: on a dark theme\n * the tint darkens and the ink lightens, which an alpha wash could never do\n * because it carries the seed's own lightness through unchanged.\n *\n * The border keeps an alpha — it is a hairline over the tint it belongs to, so\n * translucency there costs nothing and lets the edge follow the fill.\n *\n * The ratios live in `Alert.metrics.ts` (`SEMANTIC_SURFACE`), where the\n * native renderer reads the same three through the same colour arithmetic.\n */\nconst semanticSurface = (theme: Theme, colorPalette: AlertPalette): CSSObject => {\n const dark = theme.palette.mode === 'dark';\n return {\n backgroundColor: dark\n ? darken(colorPalette.main, SEMANTIC_SURFACE.tint.dark)\n : lighten(colorPalette.main, SEMANTIC_SURFACE.tint.light),\n color: dark\n ? lighten(colorPalette.main, SEMANTIC_SURFACE.ink)\n : darken(colorPalette.main, SEMANTIC_SURFACE.ink),\n border: `1px solid ${alpha(colorPalette.main, SEMANTIC_SURFACE.borderAlpha)}`,\n '.MuiAlert-icon': {\n color: colorPalette.main,\n },\n };\n};\n\n// The six visual variants. Each block is spread in only when it matches, which\n// is how the original inline version read; keeping that shape here means the\n// styled() callback carries one branch instead of six. The four semantics were\n// four IDENTICAL copies of the same block — they now share one, so the next\n// change to a banner's surface cannot land on three of them.\nexport const alertVariantStyles = (\n theme: Theme,\n customVariant: string | undefined,\n colorPalette: AlertPalette,\n): CSSObject => ({\n ...(customVariant !== undefined &&\n SEMANTIC_VARIANTS.has(customVariant as AlertVariant) &&\n semanticSurface(theme, colorPalette)),\n\n ...(customVariant === 'glass' && {\n // 85%, not 10%. This is the variant that is MEANT to be see-through, and it\n // was the same mistake in a costume: at 0.1 the blur had almost nothing to\n // sit on, so `glass` was not frosted, it was a window. A frosted pane has to\n // be mostly pane — the backdrop should be legible AS texture behind the\n // text, never as competition with it.\n backgroundColor: alpha(theme.palette.background.paper, GLASS.backgroundAlpha),\n backdropFilter: `blur(${GLASS.blur}px) saturate(${GLASS.saturatePercent}%)`,\n WebkitBackdropFilter: `blur(${GLASS.blur}px) saturate(${GLASS.saturatePercent}%)`,\n border: `1px solid ${alpha(theme.palette.divider, GLASS.borderAlpha)}`,\n color: theme.palette.text.primary,\n '.MuiAlert-icon': {\n color: theme.palette.primary.main,\n },\n // Safari before 18 and Firefox with the filter disabled paint the declared\n // alpha with nothing blurred behind it — the see-through banner this is\n // fixing. There is no degraded frost to fall back to, so it falls back to an\n // opaque pane: less pretty, still readable.\n '@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)))': {\n backgroundColor: theme.palette.background.paper,\n },\n }),\n\n ...(customVariant === 'gradient' && {\n background: `linear-gradient(${GRADIENT.angleDeg}deg, ${alpha(colorPalette.light || colorPalette.main, GRADIENT.stopAlpha)}, ${alpha(colorPalette.dark || colorPalette.main, GRADIENT.stopAlpha)})`,\n color: theme.palette.getContrastText(colorPalette.main),\n border: 'none',\n position: 'relative',\n overflow: 'hidden',\n '.MuiAlert-icon': {\n color: theme.palette.getContrastText(colorPalette.main),\n },\n '&::before': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: `-${GRADIENT.shimmerTravel}px`,\n width: '100%',\n height: '100%',\n background: `linear-gradient(90deg, transparent, ${alpha(theme.palette.common.white, GRADIENT.shimmerAlpha)}, transparent)`,\n animation: `${shimmerAnimation} ${seconds(GRADIENT.shimmerMs)} infinite`,\n },\n }),\n});\n\n/** The web's glow: a soft shadow of the hue and a touch of brightness. */\nconst glowStyles = (colorPalette: AlertPalette): CSSObject => ({\n // No `!important`: the pointer states paint their tint as an INSET shadow on\n // the same property, and compose this one alongside it rather than fighting\n // it. `glowShadow` in `Alert.tsx` is the other half of that pair.\n boxShadow: `0 0 ${GLOW.blur}px ${GLOW.spread}px ${alpha(colorPalette.main, GLOW.alpha)}`,\n filter: `brightness(${GLOW.brightness})`,\n});\n\n/** The web's pulse: a wash of the hue over the whole card, fading out every two seconds. */\nconst pulseAfter = (colorPalette: AlertPalette): CSSObject => ({\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n borderRadius: 'inherit',\n backgroundColor: colorPalette.main,\n opacity: PULSE.alpha,\n animation: `${pulseAnimation} ${seconds(PULSE.ms)} infinite`,\n pointerEvents: 'none',\n zIndex: -1,\n});\n\n// glow and pulse combine into three distinct looks, so the combinations are\n// spelled out rather than layered — layering them would let the glow-only shadow\n// leak into the glow+pulse case. Declaration ORDER is kept as it has always\n// been, because emotion hashes the serialised block into the class name.\nexport const alertEmphasisStyles = (\n colorPalette: AlertPalette,\n glow: boolean,\n pulse: boolean,\n): CSSObject => ({\n ...(glow && !pulse && glowStyles(colorPalette)),\n\n // Pulse animation\n ...(pulse &&\n !glow && {\n position: 'relative',\n '&::after': pulseAfter(colorPalette),\n }),\n\n // Both glow and pulse\n ...(glow &&\n pulse && {\n position: 'relative',\n ...glowStyles(colorPalette),\n '&::after': pulseAfter(colorPalette),\n }),\n});\n"],"mappings":"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","names":[]}
|
|
@@ -10,7 +10,7 @@ import {
|
|
|
10
10
|
import {
|
|
11
11
|
ViewDialogs,
|
|
12
12
|
ViewMutationErrorAlert
|
|
13
|
-
} from "./chunk-
|
|
13
|
+
} from "./chunk-4T7TXRGM.js";
|
|
14
14
|
import {
|
|
15
15
|
useSavedViewsController
|
|
16
16
|
} from "./chunk-HR7YTBR7.js";
|
|
@@ -178,4 +178,4 @@ function renderViewDialogs(ctl, fields, columns, views, testIdPrefix, onSaved) {
|
|
|
178
178
|
export {
|
|
179
179
|
DataViewsTableBase
|
|
180
180
|
};
|
|
181
|
-
//# sourceMappingURL=chunk-
|
|
181
|
+
//# sourceMappingURL=chunk-JPV45AD6.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
useCardActions
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-SYJMI2NP.js";
|
|
4
4
|
import {
|
|
5
5
|
ConfirmActionDialog
|
|
6
6
|
} from "./chunk-QQS3GQYS.js";
|
|
@@ -50,4 +50,4 @@ function useRemoveConfirm({
|
|
|
50
50
|
export {
|
|
51
51
|
useRemoveConfirm
|
|
52
52
|
};
|
|
53
|
-
//# sourceMappingURL=chunk-
|
|
53
|
+
//# sourceMappingURL=chunk-KM5O4ICK.js.map
|