@12-apps/ui 6.96.0 → 6.96.2

package/NATIVE.md

@@ -89,7 +89,7 @@ Ported: **28 of 154** public subpaths carry a `react-native` condition.
 | `@12-apps/ui/data-display/Alert` | 42 | 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. |
 | `@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. |
 | `@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. |
-| `@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. |
+| `@12-apps/ui/data-display/Chip` | 25 | 1 | 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. |
 | `@12-apps/ui/data-display/EmptyState` | 23 | 0 | The actions are house `Button`s (solid/outline, `sm`) sized to MUI's medium contained and outlined buttons — same padding, 14px type, radius, half-alpha border, elevation-2 shadow, 20px icon and 120px floor; MUI additionally uppercases the label and sets the icon 8px from the label where the house button sets 4.; The help link opens through `Linking.openURL` on a device; `target`/`rel` are web-only and reach the DOM through react-native-web's anchor.; Title, description and link are set in MUI's default `h6`/`body2`/`body1` numbers; a host that re-themes MUI's typography variants moves the web only. |
 | `@12-apps/ui/data-display/ErrorState` | 13 | 0 | The retry is the house `Button` (outline, `sm`) sized to MUI's medium outlined button — same 5px/15px padding, 14px type, radius, 20px icon and 120px floor; MUI additionally uppercases the label, draws its border at `alpha(main, 0.5)`, and sets the icon 8px from the label where the house button sets 4.; Title and message are set in MUI's default `h6`/`body2` numbers; a host that re-themes MUI's typography variants moves the web only. |
 | `@12-apps/ui/data-display/FleetMap` | 23 | 2 | There is no MAP. `MapPreview` — which projects, tiles and decorates its own surface across ~2,200 lines — has no React Native build, so the native board renders the roster alone and its copy interface has neither `map` nor `mapLabel`: a caller should not be asked to name controls nothing draws. What that costs is smaller than the missing half suggests, because the web already treats this list as the component's real content rather than a sidebar — every fact a pin carries (who, how recently, how precisely, what they are carrying) is on a row, in an order the map cannot express. It is where the map goes when `MapPreview` is ported.; Every row is ALSO a tab stop. The list itself carries `tabIndex={0}` and `aria-activedescendant` exactly as the web's listbox does, so the arrow keys work and the selection is announced — but react-native-web additionally gives each `Pressable` its own `tabindex`, which the web half's `Box` rows never had. Measured on the rendered DOM: a fleet of thirty is thirty-one tab stops here against the web's one. Removing them would mean making the rows non-focusable, which would take the press target away on the renderer that has no touch.; The arrow keys are web-only. `onKeyDown` reaches the list through react-native-web's DOM events, so a browser still walks the roster with Up and Down, wrapping at both ends, declining a modified arrow and leaving the page to scroll when nothing can move. React Native delivers no key events to a `View`, so on a DEVICE none of it runs and the selection is made by touch.; `aria-selected` is passed as the attribute AND as `accessibilityState.selected`, because react-native-web derives neither from the other: without the attribute the web build announced no selection at all and conveyed it by background colour alone, which is the one thing this component refuses to do for freshness.; Hover has no touch equivalent, so the pressed wash stands in for it — and, as on the web, it must never WEAKEN the selection: a selected row keeps `action.selected` whether or not a finger is on it, rather than taking the lighter `action.hover`.; Keeping the selected row in view is the web's own arithmetic against different numbers. The web reads `offsetTop`/`scrollTop`/`clientHeight`; native gathers the same three from a row's `onLayout`, the `ScrollView`'s `onLayout` and its `onScroll`. So it needs one layout pass before it can act: a board mounted with a selection already set scrolls on the next commit rather than the first, where the web scrolls immediately.; The reload announcement is `accessibilityLiveRegion="polite"` plus `aria-live="polite"`. The first is Android's and the second is react-native-web's; iOS has no live region at all, and announcing there needs `AccessibilityInfo.announceForAccessibility`, which this component does not call — a host that must be heard on iOS makes that call itself.; A long unbroken label overflows rather than breaking mid-token: the web sets `overflowWrap: 'anywhere'` and React Native has no equivalent style, so a 40-character name with no spaces is clipped by the row instead of wrapped inside it.; `maxHeight` is a NUMBER of pixels where the web's `height` is any CSS length: React Native has no `calc`, no viewport units, and no percentage that resolves against a parent which has not sized itself.; The title, the row label and the meta line are set in MUI's default `body1`/`body2`/`caption` numbers; a host that re-themes MUI's typography variants moves the web only. |

package/dist/_internal/components/data-display/Avatar/Avatar.js

@@ -1,7 +1,7 @@
 import {
   Avatar,
   AvatarGroup
-} from "../../../../chunk-JIEVKHOH.js";
+} from "../../../../chunk-EXEBN5ZP.js";
 import "../../../../chunk-7XSCEHGA.js";
 import "../../../../chunk-MTEQEPNY.js";
 import "../../../../chunk-6ZZGK5DT.js";

package/dist/_internal/components/data-display/Chip/Chip.js

@@ -1,8 +1,8 @@
 import {
   Chip
-} from "../../../../chunk-NI67M453.js";
-import "../../../../chunk-DHAXUVMR.js";
-import "../../../../chunk-E5I776YW.js";
+} from "../../../../chunk-L2ICH44N.js";
+import "../../../../chunk-44I2KXKW.js";
+import "../../../../chunk-GZBLDPXY.js";
 import "../../../../chunk-BF4FYOAR.js";
 import "../../../../chunk-XJAD6E3V.js";
 import "../../../../chunk-F5H2ZXST.js";

package/dist/_internal/components/data-display/Chip/Chip.metrics.js

@@ -11,10 +11,12 @@ import {
   HOVER_SHADOW,
   OUTLINED_BORDER_ALPHA,
   OUTLINED_HOVER_ALPHA,
+  SOFT_FOCUS_RING,
   SOFT_GROUND_ALPHA,
   SOFT_HOVER_ALPHA,
+  SOFT_WARNING_LIGHT_DARKEN,
   chipMuiSize
-} from "../../../../chunk-E5I776YW.js";
+} from "../../../../chunk-GZBLDPXY.js";
 import "../../../../chunk-PZ5AY32C.js";
 export {
   CHIP_DISABLED_OPACITY,
@@ -29,8 +31,10 @@ export {
   HOVER_SHADOW,
   OUTLINED_BORDER_ALPHA,
   OUTLINED_HOVER_ALPHA,
+  SOFT_FOCUS_RING,
   SOFT_GROUND_ALPHA,
   SOFT_HOVER_ALPHA,
+  SOFT_WARNING_LIGHT_DARKEN,
   chipMuiSize
 };
 //# sourceMappingURL=Chip.metrics.js.map

package/dist/_internal/components/data-display/Chip/Chip.styles.js

@@ -3,8 +3,8 @@ import {
   chipStyles,
   iconWithTestId,
   makeKeyDownHandler
-} from "../../../../chunk-DHAXUVMR.js";
-import "../../../../chunk-E5I776YW.js";
+} from "../../../../chunk-44I2KXKW.js";
+import "../../../../chunk-GZBLDPXY.js";
 import "../../../../chunk-BF4FYOAR.js";
 import "../../../../chunk-XJAD6E3V.js";
 import "../../../../chunk-F5H2ZXST.js";

package/dist/_internal/components/data-display/index.js

@@ -200,9 +200,9 @@ import {
 } from "../../../chunk-M2M4IDFU.js";
 import {
   Chip
-} from "../../../chunk-NI67M453.js";
-import "../../../chunk-DHAXUVMR.js";
-import "../../../chunk-E5I776YW.js";
+} from "../../../chunk-L2ICH44N.js";
+import "../../../chunk-44I2KXKW.js";
+import "../../../chunk-GZBLDPXY.js";
 import "../../../chunk-BF4FYOAR.js";
 import "../../../chunk-ARGVUTTL.js";
 import "../../../chunk-PZS7N74L.js";
@@ -314,7 +314,7 @@ import {
 import {
   Avatar,
   AvatarGroup
-} from "../../../chunk-JIEVKHOH.js";
+} from "../../../chunk-EXEBN5ZP.js";
 import "../../../chunk-7XSCEHGA.js";
 import "../../../chunk-MTEQEPNY.js";
 import "../../../chunk-6ZZGK5DT.js";

package/dist/_internal/components/index.js

@@ -187,24 +187,24 @@ import "../../chunk-QUWK7SYN.js";
 import "../../chunk-QGUNUXTT.js";
 import {
   SettingCard
-} from "../../chunk-SKIAWOUC.js";
+} from "../../chunk-XSLF3YGH.js";
 import {
   SettingToggle
-} from "../../chunk-E4NFH77Z.js";
+} from "../../chunk-SSWNJR36.js";
 import {
   SettingGroup
-} from "../../chunk-6ZAKPYWX.js";
+} from "../../chunk-RCULGFEH.js";
 import "../../chunk-SALQ65SM.js";
-import "../../chunk-ZDAAHCIS.js";
-import "../../chunk-X2GWR75Q.js";
+import "../../chunk-44BTMZB6.js";
+import "../../chunk-2C7AWMV7.js";
 import "../../chunk-XJQNSMGA.js";
 import {
   SETTING_GRID_CONTAINER,
   SettingGrid
-} from "../../chunk-CW5Z67NA.js";
-import "../../chunk-3EIRRLCQ.js";
-import "../../chunk-IQWPVPV5.js";
-import "../../chunk-BFRVMCQM.js";
+} from "../../chunk-IAPFZJ6I.js";
+import "../../chunk-F3UHWLTD.js";
+import "../../chunk-UJ7EHEXG.js";
+import "../../chunk-KSZ6GH3J.js";
 import "../../chunk-UJP2VS2H.js";
 import {
   UploadButton
@@ -641,9 +641,9 @@ import {
 import "../../chunk-2GTORM5E.js";
 import {
   Chip
-} from "../../chunk-NI67M453.js";
-import "../../chunk-DHAXUVMR.js";
-import "../../chunk-E5I776YW.js";
+} from "../../chunk-L2ICH44N.js";
+import "../../chunk-44I2KXKW.js";
+import "../../chunk-GZBLDPXY.js";
 import "../../chunk-BF4FYOAR.js";
 import "../../chunk-NCS2TBIP.js";
 import {
@@ -924,7 +924,7 @@ import "../../chunk-DVRNW33K.js";
 import {
   Avatar,
   AvatarGroup
-} from "../../chunk-JIEVKHOH.js";
+} from "../../chunk-EXEBN5ZP.js";
 import "../../chunk-7XSCEHGA.js";
 import "../../chunk-MTEQEPNY.js";
 import "../../chunk-6ZZGK5DT.js";

package/dist/_internal/components/layout/SettingCard/SettingCard.js

@@ -1,11 +1,11 @@
 import {
   SettingCard
-} from "../../../../chunk-SKIAWOUC.js";
+} from "../../../../chunk-XSLF3YGH.js";
 import "../../../../chunk-SALQ65SM.js";
-import "../../../../chunk-X2GWR75Q.js";
-import "../../../../chunk-3EIRRLCQ.js";
-import "../../../../chunk-IQWPVPV5.js";
-import "../../../../chunk-BFRVMCQM.js";
+import "../../../../chunk-2C7AWMV7.js";
+import "../../../../chunk-F3UHWLTD.js";
+import "../../../../chunk-UJ7EHEXG.js";
+import "../../../../chunk-KSZ6GH3J.js";
 import "../../../../chunk-RN7UJI7S.js";
 import "../../../../chunk-JYWF76Z5.js";
 import "../../../../chunk-GGMB6LJH.js";
@@ -14,9 +14,9 @@ import "../../../../chunk-Z5WUSI47.js";
 import "../../../../chunk-BCWL7HUO.js";
 import "../../../../chunk-QYJ25FWM.js";
 import "../../../../chunk-2GTORM5E.js";
-import "../../../../chunk-NI67M453.js";
-import "../../../../chunk-DHAXUVMR.js";
-import "../../../../chunk-E5I776YW.js";
+import "../../../../chunk-L2ICH44N.js";
+import "../../../../chunk-44I2KXKW.js";
+import "../../../../chunk-GZBLDPXY.js";
 import "../../../../chunk-BF4FYOAR.js";
 import "../../../../chunk-LV7LSPBF.js";
 import "../../../../chunk-PGGGKYWG.js";

package/dist/_internal/components/layout/SettingCard/SettingCard.metrics.js

@@ -2,7 +2,7 @@ import {
   SETTING_CARD,
   SETTING_GRID_GAP_UNITS,
   SETTING_GROUP_INACTIVE_OPACITY
-} from "../../../../chunk-BFRVMCQM.js";
+} from "../../../../chunk-KSZ6GH3J.js";
 import "../../../../chunk-PZ5AY32C.js";
 export {
   SETTING_CARD,

package/dist/_internal/components/layout/SettingCard/SettingCard.parts.js

@@ -4,16 +4,16 @@ import {
   SaveError,
   SettingHeader,
   partTestId
-} from "../../../../chunk-3EIRRLCQ.js";
-import "../../../../chunk-IQWPVPV5.js";
-import "../../../../chunk-BFRVMCQM.js";
+} from "../../../../chunk-F3UHWLTD.js";
+import "../../../../chunk-UJ7EHEXG.js";
+import "../../../../chunk-KSZ6GH3J.js";
 import "../../../../chunk-RN7UJI7S.js";
 import "../../../../chunk-JYWF76Z5.js";
 import "../../../../chunk-GGMB6LJH.js";
 import "../../../../chunk-2GTORM5E.js";
-import "../../../../chunk-NI67M453.js";
-import "../../../../chunk-DHAXUVMR.js";
-import "../../../../chunk-E5I776YW.js";
+import "../../../../chunk-L2ICH44N.js";
+import "../../../../chunk-44I2KXKW.js";
+import "../../../../chunk-GZBLDPXY.js";
 import "../../../../chunk-BF4FYOAR.js";
 import "../../../../chunk-PGGGKYWG.js";
 import "../../../../chunk-YEKPQAOW.js";

package/dist/_internal/components/layout/SettingCard/SettingCard.styles.js

@@ -14,8 +14,8 @@ import {
   surfaceStyles,
   titleStyles,
   withCallerSx
-} from "../../../../chunk-IQWPVPV5.js";
-import "../../../../chunk-BFRVMCQM.js";
+} from "../../../../chunk-UJ7EHEXG.js";
+import "../../../../chunk-KSZ6GH3J.js";
 import "../../../../chunk-HDBP55R3.js";
 import "../../../../chunk-F5H2ZXST.js";
 import "../../../../chunk-N3GAFIXG.js";

package/dist/_internal/components/layout/SettingCard/SettingCard.summary.js

@@ -2,10 +2,10 @@ import {
   SummaryInfo,
   useClamped,
   useSummaryInfo
-} from "../../../../chunk-X2GWR75Q.js";
-import "../../../../chunk-3EIRRLCQ.js";
-import "../../../../chunk-IQWPVPV5.js";
-import "../../../../chunk-BFRVMCQM.js";
+} from "../../../../chunk-2C7AWMV7.js";
+import "../../../../chunk-F3UHWLTD.js";
+import "../../../../chunk-UJ7EHEXG.js";
+import "../../../../chunk-KSZ6GH3J.js";
 import "../../../../chunk-RN7UJI7S.js";
 import "../../../../chunk-JYWF76Z5.js";
 import "../../../../chunk-GGMB6LJH.js";
@@ -14,9 +14,9 @@ import "../../../../chunk-Z5WUSI47.js";
 import "../../../../chunk-BCWL7HUO.js";
 import "../../../../chunk-QYJ25FWM.js";
 import "../../../../chunk-2GTORM5E.js";
-import "../../../../chunk-NI67M453.js";
-import "../../../../chunk-DHAXUVMR.js";
-import "../../../../chunk-E5I776YW.js";
+import "../../../../chunk-L2ICH44N.js";
+import "../../../../chunk-44I2KXKW.js";
+import "../../../../chunk-GZBLDPXY.js";
 import "../../../../chunk-BF4FYOAR.js";
 import "../../../../chunk-PGGGKYWG.js";
 import "../../../../chunk-YEKPQAOW.js";

package/dist/_internal/components/layout/SettingCard/SettingGrid.js

@@ -2,17 +2,17 @@ import {
   SETTING_GRID_CONTAINER,
   SettingGrid,
   settingGridStyles
-} from "../../../../chunk-CW5Z67NA.js";
-import "../../../../chunk-3EIRRLCQ.js";
-import "../../../../chunk-IQWPVPV5.js";
-import "../../../../chunk-BFRVMCQM.js";
+} from "../../../../chunk-IAPFZJ6I.js";
+import "../../../../chunk-F3UHWLTD.js";
+import "../../../../chunk-UJ7EHEXG.js";
+import "../../../../chunk-KSZ6GH3J.js";
 import "../../../../chunk-RN7UJI7S.js";
 import "../../../../chunk-JYWF76Z5.js";
 import "../../../../chunk-GGMB6LJH.js";
 import "../../../../chunk-2GTORM5E.js";
-import "../../../../chunk-NI67M453.js";
-import "../../../../chunk-DHAXUVMR.js";
-import "../../../../chunk-E5I776YW.js";
+import "../../../../chunk-L2ICH44N.js";
+import "../../../../chunk-44I2KXKW.js";
+import "../../../../chunk-GZBLDPXY.js";
 import "../../../../chunk-BF4FYOAR.js";
 import "../../../../chunk-PGGGKYWG.js";
 import "../../../../chunk-YEKPQAOW.js";

package/dist/_internal/components/layout/SettingCard/SettingGroup.js

@@ -1,13 +1,13 @@
 import {
   SettingGroup
-} from "../../../../chunk-6ZAKPYWX.js";
+} from "../../../../chunk-RCULGFEH.js";
 import "../../../../chunk-SALQ65SM.js";
-import "../../../../chunk-ZDAAHCIS.js";
-import "../../../../chunk-X2GWR75Q.js";
+import "../../../../chunk-44BTMZB6.js";
+import "../../../../chunk-2C7AWMV7.js";
 import "../../../../chunk-XJQNSMGA.js";
-import "../../../../chunk-3EIRRLCQ.js";
-import "../../../../chunk-IQWPVPV5.js";
-import "../../../../chunk-BFRVMCQM.js";
+import "../../../../chunk-F3UHWLTD.js";
+import "../../../../chunk-UJ7EHEXG.js";
+import "../../../../chunk-KSZ6GH3J.js";
 import "../../../../chunk-RN7UJI7S.js";
 import "../../../../chunk-JYWF76Z5.js";
 import "../../../../chunk-GGMB6LJH.js";
@@ -17,9 +17,9 @@ import "../../../../chunk-Z5WUSI47.js";
 import "../../../../chunk-BCWL7HUO.js";
 import "../../../../chunk-QYJ25FWM.js";
 import "../../../../chunk-2GTORM5E.js";
-import "../../../../chunk-NI67M453.js";
-import "../../../../chunk-DHAXUVMR.js";
-import "../../../../chunk-E5I776YW.js";
+import "../../../../chunk-L2ICH44N.js";
+import "../../../../chunk-44I2KXKW.js";
+import "../../../../chunk-GZBLDPXY.js";
 import "../../../../chunk-BF4FYOAR.js";
 import "../../../../chunk-4PJ52YBO.js";
 import "../../../../chunk-EIMFA7KP.js";

package/dist/_internal/components/layout/SettingCard/SettingSwitch.js

@@ -1,11 +1,11 @@
 import {
   SettingSwitchBlock,
   useSettingSwitchIds
-} from "../../../../chunk-ZDAAHCIS.js";
-import "../../../../chunk-X2GWR75Q.js";
-import "../../../../chunk-3EIRRLCQ.js";
-import "../../../../chunk-IQWPVPV5.js";
-import "../../../../chunk-BFRVMCQM.js";
+} from "../../../../chunk-44BTMZB6.js";
+import "../../../../chunk-2C7AWMV7.js";
+import "../../../../chunk-F3UHWLTD.js";
+import "../../../../chunk-UJ7EHEXG.js";
+import "../../../../chunk-KSZ6GH3J.js";
 import "../../../../chunk-RN7UJI7S.js";
 import "../../../../chunk-JYWF76Z5.js";
 import "../../../../chunk-GGMB6LJH.js";
@@ -15,9 +15,9 @@ import "../../../../chunk-Z5WUSI47.js";
 import "../../../../chunk-BCWL7HUO.js";
 import "../../../../chunk-QYJ25FWM.js";
 import "../../../../chunk-2GTORM5E.js";
-import "../../../../chunk-NI67M453.js";
-import "../../../../chunk-DHAXUVMR.js";
-import "../../../../chunk-E5I776YW.js";
+import "../../../../chunk-L2ICH44N.js";
+import "../../../../chunk-44I2KXKW.js";
+import "../../../../chunk-GZBLDPXY.js";
 import "../../../../chunk-BF4FYOAR.js";
 import "../../../../chunk-4PJ52YBO.js";
 import "../../../../chunk-EIMFA7KP.js";

package/dist/_internal/components/layout/SettingCard/SettingToggle.js

@@ -1,13 +1,13 @@
 import {
   SettingToggle
-} from "../../../../chunk-E4NFH77Z.js";
+} from "../../../../chunk-SSWNJR36.js";
 import "../../../../chunk-SALQ65SM.js";
-import "../../../../chunk-ZDAAHCIS.js";
-import "../../../../chunk-X2GWR75Q.js";
+import "../../../../chunk-44BTMZB6.js";
+import "../../../../chunk-2C7AWMV7.js";
 import "../../../../chunk-XJQNSMGA.js";
-import "../../../../chunk-3EIRRLCQ.js";
-import "../../../../chunk-IQWPVPV5.js";
-import "../../../../chunk-BFRVMCQM.js";
+import "../../../../chunk-F3UHWLTD.js";
+import "../../../../chunk-UJ7EHEXG.js";
+import "../../../../chunk-KSZ6GH3J.js";
 import "../../../../chunk-RN7UJI7S.js";
 import "../../../../chunk-JYWF76Z5.js";
 import "../../../../chunk-GGMB6LJH.js";
@@ -17,9 +17,9 @@ import "../../../../chunk-Z5WUSI47.js";
 import "../../../../chunk-BCWL7HUO.js";
 import "../../../../chunk-QYJ25FWM.js";
 import "../../../../chunk-2GTORM5E.js";
-import "../../../../chunk-NI67M453.js";
-import "../../../../chunk-DHAXUVMR.js";
-import "../../../../chunk-E5I776YW.js";
+import "../../../../chunk-L2ICH44N.js";
+import "../../../../chunk-44I2KXKW.js";
+import "../../../../chunk-GZBLDPXY.js";
 import "../../../../chunk-BF4FYOAR.js";
 import "../../../../chunk-4PJ52YBO.js";
 import "../../../../chunk-EIMFA7KP.js";

package/dist/_internal/components/layout/index.js

@@ -43,24 +43,24 @@ import "../../../chunk-QUWK7SYN.js";
 import "../../../chunk-QGUNUXTT.js";
 import {
   SettingCard
-} from "../../../chunk-SKIAWOUC.js";
+} from "../../../chunk-XSLF3YGH.js";
 import {
   SettingToggle
-} from "../../../chunk-E4NFH77Z.js";
+} from "../../../chunk-SSWNJR36.js";
 import {
   SettingGroup
-} from "../../../chunk-6ZAKPYWX.js";
+} from "../../../chunk-RCULGFEH.js";
 import "../../../chunk-SALQ65SM.js";
-import "../../../chunk-ZDAAHCIS.js";
-import "../../../chunk-X2GWR75Q.js";
+import "../../../chunk-44BTMZB6.js";
+import "../../../chunk-2C7AWMV7.js";
 import "../../../chunk-XJQNSMGA.js";
 import {
   SETTING_GRID_CONTAINER,
   SettingGrid
-} from "../../../chunk-CW5Z67NA.js";
-import "../../../chunk-3EIRRLCQ.js";
-import "../../../chunk-IQWPVPV5.js";
-import "../../../chunk-BFRVMCQM.js";
+} from "../../../chunk-IAPFZJ6I.js";
+import "../../../chunk-F3UHWLTD.js";
+import "../../../chunk-UJ7EHEXG.js";
+import "../../../chunk-KSZ6GH3J.js";
 import "../../../chunk-QS5OHHBY.js";
 import {
   Accordion,
@@ -97,9 +97,9 @@ import "../../../chunk-QD4TM6UK.js";
 import "../../../chunk-EMPVMZAB.js";
 import "../../../chunk-7WDPC46N.js";
 import "../../../chunk-2GTORM5E.js";
-import "../../../chunk-NI67M453.js";
-import "../../../chunk-DHAXUVMR.js";
-import "../../../chunk-E5I776YW.js";
+import "../../../chunk-L2ICH44N.js";
+import "../../../chunk-44I2KXKW.js";
+import "../../../chunk-GZBLDPXY.js";
 import "../../../chunk-BF4FYOAR.js";
 import "../../../chunk-4NS4PJJH.js";
 import {

package/dist/_internal/user-avatar/user-avatar.js

@@ -2,10 +2,10 @@
 import {
   UserAvatar,
   UserMenu
-} from "../../chunk-E2UOEI7N.js";
+} from "../../chunk-JJYECKEL.js";
 import "../../chunk-DQ22UKMZ.js";
 import "../../chunk-UDQSIRAP.js";
-import "../../chunk-JIEVKHOH.js";
+import "../../chunk-EXEBN5ZP.js";
 import "../../chunk-7XSCEHGA.js";
 import "../../chunk-MTEQEPNY.js";
 import "../../chunk-6ZZGK5DT.js";

package/dist/{chunk-X2GWR75Q.js → chunk-2C7AWMV7.js}

@@ -1,9 +1,9 @@
 import {
   partTestId
-} from "./chunk-3EIRRLCQ.js";
+} from "./chunk-F3UHWLTD.js";
 import {
   SETTING_CARD
-} from "./chunk-BFRVMCQM.js";
+} from "./chunk-KSZ6GH3J.js";
 import {
   InteractiveTooltip
 } from "./chunk-Z5WUSI47.js";
@@ -59,6 +59,11 @@ var SummaryInfo = ({
             display: "inline-flex",
             alignItems: "center",
             justifyContent: "center",
+            // A real box, not an overlay: a 16 px glyph in a 40 px target whose extra
+            // height is handed back as margin, so the title row keeps its height.
+            minWidth: rem(theme, SETTING_CARD.infoTapTarget),
+            minHeight: rem(theme, SETTING_CARD.infoTapTarget),
+            margin: `${rem(theme, SETTING_CARD.infoTapMarginBlock)} ${rem(theme, SETTING_CARD.infoTapMarginInline)}`,
             padding: 0,
             border: 0,
             background: "none",
@@ -92,4 +97,4 @@ export {
   SummaryInfo,
   useSummaryInfo
 };
-//# sourceMappingURL=chunk-X2GWR75Q.js.map
+//# sourceMappingURL=chunk-2C7AWMV7.js.map

package/dist/chunk-2C7AWMV7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/SettingCard/SettingCard.summary.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport React, { useCallback, useLayoutEffect, useState } from 'react';\n\nimport { Icon } from '../../../icons';\nimport { rem } from '../../../tokens/relative';\nimport { InteractiveTooltip } from '../../data-display/InteractiveTooltip';\n\nimport { SETTING_CARD } from './SettingCard.metrics';\nimport { partTestId } from './SettingCard.parts';\n\n/**\n * Whether a clamped element is hiding text — measured, never guessed from the\n * string's length, because what fits depends on the width the card is GIVEN.\n * Re-measured whenever the element resizes, so a card that widens drops its [i].\n */\nexport const useClamped = (content?: unknown): { ref: (node: HTMLElement | null) => void; clamped: boolean } => {\n  const [node, setNode] = useState<HTMLElement | null>(null);\n  const [clamped, setClamped] = useState(false);\n  const ref = useCallback((next: HTMLElement | null) => setNode(next), []);\n\n  useLayoutEffect(() => {\n    if (!node) return undefined;\n    const measure = (): void => setClamped(node.scrollHeight > node.clientHeight + 1);\n    measure();\n    if (typeof ResizeObserver === 'undefined') return undefined;\n    const observer = new ResizeObserver(measure);\n    observer.observe(node);\n    return () => observer.disconnect();\n    // `content` too: a summary that grows from two lines to three inside the\n    // same clamped height fires no resize, so the text changing re-measures.\n  }, [node, content]);\n\n  return { ref, clamped };\n};\n\n/**\n * The [i] beside a card's title while its summary is cut: hover shows the whole\n * text, a click or tap pins it — so it works on a phone, where there is no hover.\n */\nexport const SummaryInfo: React.FC<{ label: string; summary: React.ReactNode; dataTestId?: string }> = ({\n  label,\n  summary,\n  dataTestId,\n}) => {\n  const theme = useTheme();\n  return (\n    <InteractiveTooltip\n      variant=\"light\"\n      size=\"sm\"\n      maxWidth={SETTING_CARD.infoMaxWidth}\n      hoverContent={summary}\n      pinnedContent={summary}\n      dataTestId={partTestId(dataTestId, 'info')}\n    >\n      <Box\n        component=\"button\"\n        type=\"button\"\n        aria-label={label}\n        sx={{\n          display: 'inline-flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          // A real box, not an overlay: a 16 px glyph in a 40 px target whose extra\n          // height is handed back as margin, so the title row keeps its height.\n          minWidth: rem(theme, SETTING_CARD.infoTapTarget),\n          minHeight: rem(theme, SETTING_CARD.infoTapTarget),\n          margin: `${rem(theme, SETTING_CARD.infoTapMarginBlock)} ${rem(theme, SETTING_CARD.infoTapMarginInline)}`,\n          padding: 0,\n          border: 0,\n          background: 'none',\n          color: theme.palette.text.secondary,\n          cursor: 'pointer',\n          borderRadius: '50%',\n          '&:focus-visible': {\n            outline: `${rem(theme, SETTING_CARD.infoFocusRingWidth)} solid ${theme.palette.primary.main}`,\n            outlineOffset: rem(theme, SETTING_CARD.infoFocusRingOffset),\n          },\n        }}\n      >\n        <Icon name=\"InfoOutlined\" size=\"xs\" />\n      </Box>\n    </InteractiveTooltip>\n  );\n};\n\n/**\n * The summary's measuring ref, and the [i] for the header while it is cut —\n * `null` when there is no summary, it fits, or `show` is false (an open card).\n */\nexport const useSummaryInfo = ({\n  summary,\n  show = true,\n  label,\n  dataTestId,\n}: {\n  summary: React.ReactNode;\n  show?: boolean;\n  label: string;\n  dataTestId?: string;\n}): { ref: (node: HTMLElement | null) => void; info: React.ReactNode } => {\n  const { ref, clamped } = useClamped(summary);\n  const visible = show && clamped && summary != null;\n  return { ref, info: visible ? <SummaryInfo label={label} summary={summary} dataTestId={dataTestId} /> : null };\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA,OAAO,SAAS;AAChB,SAAS,gBAAgB;AACzB,SAAgB,aAAa,iBAAiB,gBAAgB;AA8EtD;AAhED,IAAM,aAAa,CAAC,YAAqF;AAC9G,QAAM,CAAC,MAAM,OAAO,IAAI,SAA6B,IAAI;AACzD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,MAAM,YAAY,CAAC,SAA6B,QAAQ,IAAI,GAAG,CAAC,CAAC;AAEvE,kBAAgB,MAAM;AACpB,QAAI,CAAC,KAAM,QAAO;AAClB,UAAM,UAAU,MAAY,WAAW,KAAK,eAAe,KAAK,eAAe,CAAC;AAChF,YAAQ;AACR,QAAI,OAAO,mBAAmB,YAAa,QAAO;AAClD,UAAM,WAAW,IAAI,eAAe,OAAO;AAC3C,aAAS,QAAQ,IAAI;AACrB,WAAO,MAAM,SAAS,WAAW;AAAA,EAGnC,GAAG,CAAC,MAAM,OAAO,CAAC;AAElB,SAAO,EAAE,KAAK,QAAQ;AACxB;AAMO,IAAM,cAA0F,CAAC;AAAA,EACtG;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QAAQ,SAAS;AACvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,UAAU,aAAa;AAAA,MACvB,cAAc;AAAA,MACd,eAAe;AAAA,MACf,YAAY,WAAW,YAAY,MAAM;AAAA,MAEzC;AAAA,QAAC;AAAA;AAAA,UACC,WAAU;AAAA,UACV,MAAK;AAAA,UACL,cAAY;AAAA,UACZ,IAAI;AAAA,YACF,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,gBAAgB;AAAA;AAAA;AAAA,YAGhB,UAAU,IAAI,OAAO,aAAa,aAAa;AAAA,YAC/C,WAAW,IAAI,OAAO,aAAa,aAAa;AAAA,YAChD,QAAQ,GAAG,IAAI,OAAO,aAAa,kBAAkB,CAAC,IAAI,IAAI,OAAO,aAAa,mBAAmB,CAAC;AAAA,YACtG,SAAS;AAAA,YACT,QAAQ;AAAA,YACR,YAAY;AAAA,YACZ,OAAO,MAAM,QAAQ,KAAK;AAAA,YAC1B,QAAQ;AAAA,YACR,cAAc;AAAA,YACd,mBAAmB;AAAA,cACjB,SAAS,GAAG,IAAI,OAAO,aAAa,kBAAkB,CAAC,UAAU,MAAM,QAAQ,QAAQ,IAAI;AAAA,cAC3F,eAAe,IAAI,OAAO,aAAa,mBAAmB;AAAA,YAC5D;AAAA,UACF;AAAA,UAEA,8BAAC,QAAK,MAAK,gBAAe,MAAK,MAAK;AAAA;AAAA,MACtC;AAAA;AAAA,EACF;AAEJ;AAMO,IAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AACF,MAK0E;AACxE,QAAM,EAAE,KAAK,QAAQ,IAAI,WAAW,OAAO;AAC3C,QAAM,UAAU,QAAQ,WAAW,WAAW;AAC9C,SAAO,EAAE,KAAK,MAAM,UAAU,oBAAC,eAAY,OAAc,SAAkB,YAAwB,IAAK,KAAK;AAC/G;","names":[]}

package/dist/{chunk-ZDAAHCIS.js → chunk-44BTMZB6.js}

@@ -1,16 +1,16 @@
 import {
   useSummaryInfo
-} from "./chunk-X2GWR75Q.js";
+} from "./chunk-2C7AWMV7.js";
 import {
   PendingSpinner,
   SaveError,
   SettingHeader,
   partTestId
-} from "./chunk-3EIRRLCQ.js";
+} from "./chunk-F3UHWLTD.js";
 import {
   clampStyles,
   descriptionStyles
-} from "./chunk-IQWPVPV5.js";
+} from "./chunk-UJ7EHEXG.js";
 import {
   SR_ONLY_SX
 } from "./chunk-PUFA7FQ7.js";
@@ -87,4 +87,4 @@ export {
   useSettingSwitchIds,
   SettingSwitchBlock
 };
-//# sourceMappingURL=chunk-ZDAAHCIS.js.map
+//# sourceMappingURL=chunk-44BTMZB6.js.map

package/dist/{chunk-DHAXUVMR.js → chunk-44I2KXKW.js}

@@ -4,9 +4,11 @@ import {
   CHIP_TRANSITION_MS,
   HOVER_LIFT_PX,
   HOVER_SHADOW,
+  SOFT_FOCUS_RING,
   SOFT_GROUND_ALPHA,
-  SOFT_HOVER_ALPHA
-} from "./chunk-E5I776YW.js";
+  SOFT_HOVER_ALPHA,
+  SOFT_WARNING_LIGHT_DARKEN
+} from "./chunk-GZBLDPXY.js";
 import {
   chipKeyAction
 } from "./chunk-BF4FYOAR.js";
@@ -22,7 +24,7 @@ import {
 // src/components/data-display/Chip/Chip.styles.tsx
 import Avatar from "@mui/material/Avatar/index.js";
 import React from "react";
-import { alpha } from "@mui/material/styles/index.js";
+import { alpha, darken } from "@mui/material/styles/index.js";
 import { jsx } from "react/jsx-runtime";
 var makeKeyDownHandler = (args) => (event) => {
   const action = chipKeyAction(event.key, args);
@@ -55,7 +57,11 @@ var paletteKey = (color) => {
 var softStyles = (color) => {
   const key = paletteKey(color);
   const ground = (theme) => key ? alpha(theme.palette[key].main, SOFT_GROUND_ALPHA) : theme.palette.action.selected;
-  const ink = (theme) => key ? theme.palette[key].dark : theme.palette.text.secondary;
+  const ink = (theme) => {
+    if (!key) return theme.palette.text.secondary;
+    if (theme.palette.mode === "dark") return theme.palette[key].light;
+    return key === "warning" ? darken(theme.palette.warning.dark, SOFT_WARNING_LIGHT_DARKEN) : theme.palette[key].dark;
+  };
   return {
     backgroundColor: ground,
     color: ink,
@@ -64,9 +70,21 @@ var softStyles = (color) => {
     "& .MuiChip-icon": { color: ink },
     "&.MuiChip-clickable:hover": {
       backgroundColor: (theme) => key ? alpha(theme.palette[key].main, SOFT_HOVER_ALPHA) : theme.palette.action.hover
-    }
+    },
+    // `neutral` keeps MUI's glyph and focus exactly as they were.
+    ...key ? accentedStates(key, ink) : {}
   };
 };
+var accentedStates = (key, ink) => ({
+  "& .MuiChip-deleteIcon": { color: ink, "&:hover": { color: ink } },
+  "&.Mui-focusVisible": {
+    backgroundColor: (theme) => alpha(theme.palette[key].main, SOFT_GROUND_ALPHA),
+    outlineStyle: "solid",
+    outlineWidth: (theme) => rem(theme, SOFT_FOCUS_RING.width),
+    outlineColor: ink,
+    outlineOffset: (theme) => rem(theme, SOFT_FOCUS_RING.offset)
+  }
+});
 var chipStyles = ({
   variant,
   color = "primary",
@@ -110,4 +128,4 @@ export {
   chipStyles,
   iconWithTestId
 };
-//# sourceMappingURL=chunk-DHAXUVMR.js.map
+//# sourceMappingURL=chunk-44I2KXKW.js.map

package/dist/chunk-44I2KXKW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Chip/Chip.styles.tsx"],"sourcesContent":["import Avatar from '@mui/material/Avatar/index.js';\nimport type { SxProps, Theme } from '@mui/material/styles/index.js';\nimport type { KeyboardEvent, ReactElement } from 'react';\nimport React from 'react';\n\nimport { chipKeyAction, type ChipKeyArgs } from './Chip.helpers';\nimport { alpha, darken } from '@mui/material/styles/index.js';\n\nimport {\n  CHIP_SIZES,\n  CHIP_TRANSITION_EASING,\n  CHIP_TRANSITION_MS,\n  HOVER_LIFT_PX,\n  HOVER_SHADOW,\n  SOFT_FOCUS_RING,\n  SOFT_GROUND_ALPHA,\n  SOFT_HOVER_ALPHA,\n  SOFT_WARNING_LIGHT_DARKEN,\n} from './Chip.metrics';\nimport type { ChipProps } from './Chip.types';\nimport { shadowInk } from '../../../tokens/ink';\nimport { rem, rems, sxRem } from '../../../tokens/relative';\n\n/**\n * A chip is not a native control, so the two keyboard conventions it stands in\n * for are wired by hand: Delete/Backspace removes it, Enter/Space activates it.\n * The DECISION is `chipKeyAction`, which the native half reads too.\n */\nexport const makeKeyDownHandler =\n  (args: ChipKeyArgs & { onClick?: () => void; onDelete?: () => void }) =>\n  (event: KeyboardEvent): void => {\n    const action = chipKeyAction(event.key, args);\n    if (action === null) return;\n    event.preventDefault();\n    if (action === 'delete') {\n      args.onDelete?.();\n      return;\n    }\n    args.onClick?.();\n  };\n\nexport const avatarFor = (\n  avatar: ChipProps['avatar'],\n  avatarSrc?: string,\n): ReactElement | undefined => {\n  if (avatar && React.isValidElement(avatar)) {\n    return avatar;\n  }\n  if (avatarSrc) {\n    const { avatarSize } = CHIP_SIZES.medium;\n    return <Avatar src={avatarSrc} sx={{ width: sxRem(avatarSize), height: sxRem(avatarSize) }} />;\n  }\n  return undefined;\n};\n\ninterface ChipStyleArgs {\n  variant: ChipProps['variant'];\n  color?: ChipProps['color'];\n  selected?: boolean;\n  clickable?: boolean;\n  disabled?: boolean;\n}\n\n/** The lift's shadow, per mode — the same numbers the native chip reads. */\nconst hoverShadow = (theme: Theme): string =>\n  `0 ${rems(theme, HOVER_SHADOW.offsetY, HOVER_SHADOW.blur)} ${shadowInk(\n    theme,\n    theme.palette.mode === 'dark' ? HOVER_SHADOW.alphaDark : HOVER_SHADOW.alphaLight,\n  )}`;\n\n/**\n * Selection styling uses SEMANTIC palette tokens (not hardcoded rgba). A filled\n * selected chip keeps MUI's solid `color.main` + contrast text (clear active\n * state); an outlined selected chip gets a subtle theme-driven `action.selected`\n * tint so it reads as active without muddying the fill.\n */\n/** The palette entry a colour paints with; `neutral` has none and takes the ink. */\nconst paletteKey = (color: NonNullable<ChipProps['color']>): 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | null => {\n  if (color === 'neutral') return null;\n  return color === 'danger' ? 'error' : color;\n};\n\n/**\n * `soft`: the colour's tint for a ground, and for ink the step that reads on it:\n * the `dark` step in light mode, the `light` step in dark mode (FUT-4442). The\n * ground is a 14% tint over the page, so on a near-black page the ink has to be\n * lighter than `main`; `dark` there is 2.6 to 3.9:1, `light` clears 4.5:1. In\n * light mode warning's `dark` is 3.25:1 on its tint, so it is darkened by\n * `SOFT_WARNING_LIGHT_DARKEN` (4.77:1, FUT-4464). The label, the icon and the\n * delete glyph all take it.\n */\nconst softStyles = (color: NonNullable<ChipProps['color']>): SxProps<Theme> => {\n  const key = paletteKey(color);\n  const ground = (theme: Theme): string =>\n    key ? alpha(theme.palette[key].main, SOFT_GROUND_ALPHA) : theme.palette.action.selected;\n  const ink = (theme: Theme): string => {\n    if (!key) return theme.palette.text.secondary;\n    if (theme.palette.mode === 'dark') return theme.palette[key].light;\n    // Warning's `dark` step is too light for its own tint (FUT-4464).\n    return key === 'warning' ? darken(theme.palette.warning.dark, SOFT_WARNING_LIGHT_DARKEN) : theme.palette[key].dark;\n  };\n  return {\n    backgroundColor: ground,\n    color: ink,\n    // A state is read at a glance: the label is set semibold.\n    fontWeight: 600,\n    '& .MuiChip-icon': { color: ink },\n    '&.MuiChip-clickable:hover': {\n      backgroundColor: (theme: Theme) => (key ? alpha(theme.palette[key].main, SOFT_HOVER_ALPHA) : theme.palette.action.hover),\n    },\n    // `neutral` keeps MUI's glyph and focus exactly as they were.\n    ...(key ? (accentedStates(key, ink) as object) : {}),\n  };\n};\n\n/**\n * What only an accented soft chip changes (FUT-4442, FUT-4461). MUI paints the\n * delete glyph in `contrastText` at 0.7, near-black on a dark ground, so the glyph\n * takes the ink. Focus, in both modes: the chip keeps its resting ground (MUI's\n * `dark` step puts the ink at about 1:1 in light mode and sinks the light ink in\n * dark mode) and draws a ring in the ink, so focus shows without the ground.\n */\nconst accentedStates = (\n  key: Exclude<ReturnType<typeof paletteKey>, null>,\n  ink: (theme: Theme) => string,\n): SxProps<Theme> => ({\n  '& .MuiChip-deleteIcon': { color: ink, '&:hover': { color: ink } },\n  '&.Mui-focusVisible': {\n    backgroundColor: (theme: Theme) => alpha(theme.palette[key].main, SOFT_GROUND_ALPHA),\n    outlineStyle: 'solid',\n    outlineWidth: (theme: Theme) => rem(theme, SOFT_FOCUS_RING.width),\n    outlineColor: ink,\n    outlineOffset: (theme: Theme) => rem(theme, SOFT_FOCUS_RING.offset),\n  },\n});\n\nexport const chipStyles = ({\n  variant,\n  color = 'primary',\n  selected,\n  clickable,\n  disabled,\n}: ChipStyleArgs): SxProps<Theme> => {\n  const lifts = clickable && !disabled;\n\n  return {\n    ...(variant === 'soft' ? (softStyles(color) as object) : {}),\n    // Enhanced styling for outlined variant\n    ...(variant === 'outlined' && {\n      borderWidth: '1px',\n      borderStyle: 'solid',\n      backgroundColor: 'transparent',\n    }),\n    ...(selected &&\n      variant === 'outlined' && {\n        backgroundColor: (theme: Theme) => theme.palette.action.selected,\n      }),\n    '&:hover': {\n      ...(lifts && {\n        transform: (theme: Theme) => `translateY(${rem(theme, -HOVER_LIFT_PX)})`,\n        boxShadow: (theme: Theme) => hoverShadow(theme),\n      }),\n    },\n    '&:active': {\n      ...(lifts && {\n        transform: 'translateY(0px)',\n      }),\n    },\n    transition: `all ${CHIP_TRANSITION_MS / 1000}s ${CHIP_TRANSITION_EASING}`,\n  };\n};\n\nexport const iconWithTestId = (\n  icon: ChipProps['icon'],\n  testId: string,\n): ReactElement | undefined =>\n  icon && React.isValidElement(icon)\n    ? React.cloneElement(icon as ReactElement, {\n        'data-testid': testId,\n      } as Record<string, unknown>)\n    : undefined;\n"],"mappings":"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","names":[]}