@12-apps/ui 6.96.0 → 6.96.2

package/dist/types/components/data-display/Chip/Chip.metrics.d.ts

@@ -62,4 +62,15 @@ export declare const CHIP_TRANSITION_EASING = "cubic-bezier(0.4, 0, 0.2, 1)";
 export declare const SOFT_GROUND_ALPHA = 0.14;
 /** A soft chip's hover ground. */
 export declare const SOFT_HOVER_ALPHA = 0.22;
+/**
+ * How much a light-mode soft WARNING ink darkens its `dark` step (FUT-4464). With
+ * the default theme, `warning.dark` (#e65100) on its 14% tint is 3.25:1; darkened
+ * by 0.2 it is 4.77:1. The other five colours clear 4.5:1 on `dark` as it is.
+ */
+export declare const SOFT_WARNING_LIGHT_DARKEN = 0.2;
+/** A soft chip's keyboard-focus ring, in design px (read through `rem`). */
+export declare const SOFT_FOCUS_RING: {
+    readonly width: 2;
+    readonly offset: 2;
+};
 //# sourceMappingURL=Chip.metrics.d.ts.map

package/dist/types/components/data-display/Chip/Chip.metrics.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.metrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Chip/Chip.metrics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C;;;;;;;;;GASG;AAEH,2EAA2E;AAC3E,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE7C,eAAO,MAAM,WAAW,GAAI,MAAM,QAAQ,KAAG,WACQ,CAAC;AAEtD,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,mFAAmF;IACnF,YAAY,EAAE,MAAM,CAAC;IACrB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,oEAAoE;IACpE,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,eAAe,EAAE,MAAM,CAAC;IACxB,qDAAqD;IACrD,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;IACzB,wBAAwB,EAAE,MAAM,CAAC;IACjC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,+CAA+C;IAC/C,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,MAAM,CAAC;IACzB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,yBAAyB,EAAE,MAAM,CAAC;CACnC;AAED,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,WAAW,EAAE,eAAe,CAqC3D,CAAC;AAEF,uFAAuF;AACvF,eAAO,MAAM,WAAW,KAAK,CAAC;AAC9B,oFAAoF;AACpF,eAAO,MAAM,cAAc,KAAK,CAAC;AACjC,8CAA8C;AAC9C,eAAO,MAAM,qBAAqB,OAAO,CAAC;AAC1C,mFAAmF;AACnF,eAAO,MAAM,qBAAqB,MAAM,CAAC;AACzC,yEAAyE;AACzE,eAAO,MAAM,iBAAiB,OAAO,CAAC;AACtC,eAAO,MAAM,0BAA0B,MAAM,CAAC;AAC9C,6EAA6E;AAC7E,eAAO,MAAM,oBAAoB,OAAO,CAAC;AAIzC,yEAAyE;AACzE,eAAO,MAAM,aAAa,IAAI,CAAC;AAC/B,eAAO,MAAM,YAAY;;;;;CAAsE,CAAC;AAChG,eAAO,MAAM,kBAAkB,MAAM,CAAC;AACtC,eAAO,MAAM,sBAAsB,iCAAiC,CAAC;AAErE,oEAAoE;AACpE,eAAO,MAAM,iBAAiB,OAAO,CAAC;AACtC,kCAAkC;AAClC,eAAO,MAAM,gBAAgB,OAAO,CAAC"}
+{"version":3,"file":"Chip.metrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Chip/Chip.metrics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C;;;;;;;;;GASG;AAEH,2EAA2E;AAC3E,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE7C,eAAO,MAAM,WAAW,GAAI,MAAM,QAAQ,KAAG,WACQ,CAAC;AAEtD,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,mFAAmF;IACnF,YAAY,EAAE,MAAM,CAAC;IACrB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,oEAAoE;IACpE,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,eAAe,EAAE,MAAM,CAAC;IACxB,qDAAqD;IACrD,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;IACzB,wBAAwB,EAAE,MAAM,CAAC;IACjC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,+CAA+C;IAC/C,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,MAAM,CAAC;IACzB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,yBAAyB,EAAE,MAAM,CAAC;CACnC;AAED,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,WAAW,EAAE,eAAe,CAqC3D,CAAC;AAEF,uFAAuF;AACvF,eAAO,MAAM,WAAW,KAAK,CAAC;AAC9B,oFAAoF;AACpF,eAAO,MAAM,cAAc,KAAK,CAAC;AACjC,8CAA8C;AAC9C,eAAO,MAAM,qBAAqB,OAAO,CAAC;AAC1C,mFAAmF;AACnF,eAAO,MAAM,qBAAqB,MAAM,CAAC;AACzC,yEAAyE;AACzE,eAAO,MAAM,iBAAiB,OAAO,CAAC;AACtC,eAAO,MAAM,0BAA0B,MAAM,CAAC;AAC9C,6EAA6E;AAC7E,eAAO,MAAM,oBAAoB,OAAO,CAAC;AAIzC,yEAAyE;AACzE,eAAO,MAAM,aAAa,IAAI,CAAC;AAC/B,eAAO,MAAM,YAAY;;;;;CAAsE,CAAC;AAChG,eAAO,MAAM,kBAAkB,MAAM,CAAC;AACtC,eAAO,MAAM,sBAAsB,iCAAiC,CAAC;AAErE,oEAAoE;AACpE,eAAO,MAAM,iBAAiB,OAAO,CAAC;AACtC,kCAAkC;AAClC,eAAO,MAAM,gBAAgB,OAAO,CAAC;AACrC;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,MAAM,CAAC;AAC7C,4EAA4E;AAC5E,eAAO,MAAM,eAAe;;;CAAmC,CAAC"}

package/dist/types/components/data-display/Chip/Chip.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Chip/Chip.styles.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGzD,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAYjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9C;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAC5B,MAAM,WAAW,GAAG;IAAE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,MACnE,OAAO,aAAa,KAAG,IASvB,CAAC;AAEJ,eAAO,MAAM,SAAS,GACpB,QAAQ,SAAS,CAAC,QAAQ,CAAC,EAC3B,YAAY,MAAM,KACjB,YAAY,GAAG,SASjB,CAAC;AAEF,UAAU,aAAa;IACrB,OAAO,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAuCD,eAAO,MAAM,UAAU,GAAI,oDAMxB,aAAa,KAAG,OAAO,CAAC,KAAK,CA4B/B,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,MAAM,SAAS,CAAC,MAAM,CAAC,EACvB,QAAQ,MAAM,KACb,YAAY,GAAG,SAKH,CAAC"}
+{"version":3,"file":"Chip.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Chip/Chip.styles.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGzD,OAAO,EAAiB,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAcjE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9C;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAC5B,MAAM,WAAW,GAAG;IAAE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,MACnE,OAAO,aAAa,KAAG,IASvB,CAAC;AAEJ,eAAO,MAAM,SAAS,GACpB,QAAQ,SAAS,CAAC,QAAQ,CAAC,EAC3B,YAAY,MAAM,KACjB,YAAY,GAAG,SASjB,CAAC;AAEF,UAAU,aAAa;IACrB,OAAO,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA2ED,eAAO,MAAM,UAAU,GAAI,oDAMxB,aAAa,KAAG,OAAO,CAAC,KAAK,CA4B/B,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,MAAM,SAAS,CAAC,MAAM,CAAC,EACvB,QAAQ,MAAM,KACb,YAAY,GAAG,SAKH,CAAC"}

package/dist/types/components/layout/SettingCard/SettingCard.metrics.d.ts

@@ -15,9 +15,26 @@ export declare const SETTING_CARD: {
     readonly gridMinColumnWidth: 320;
     /** The widest the [i]'s full-summary tooltip gets. */
     readonly infoMaxWidth: 360;
-    /** The [i]'s keyboard focus ring: its width, and its gap from the glyph. */
+    /**
+     * The [i]'s tap target, the house 40 px floor (FUT-4443). The glyph stays 16 px
+     * (`xs`); a negative margin of `(infoTapTarget - glyph) / 2` gives the box back
+     * to the title row, so nothing moves.
+     */
+    readonly infoTapTarget: 40;
+    /** Above and below the glyph: (40 - 16) / 2, so the title row keeps its height. */
+    readonly infoTapMarginBlock: -12;
+    /**
+     * Beside the glyph: minus the title row's `gap` (8 px), not (40 - 16) / 2, so the
+     * box ends where the status pill ends and never overlaps it.
+     */
+    readonly infoTapMarginInline: -8;
+    /**
+     * The [i]'s keyboard focus ring: its width, and its offset from the box. The
+     * offset is negative so the ring's OUTER edge is the 40 px box (a 40 px circle
+     * round a 16 px glyph), instead of a 44 px one crowding the title and the pill.
+     */
     readonly infoFocusRingWidth: 2;
-    readonly infoFocusRingOffset: 2;
+    readonly infoFocusRingOffset: -2;
 };
 /** The grid's default gap, in theme SPACING units (not px): what `sx`'s `gap: 2` means. */
 export declare const SETTING_GRID_GAP_UNITS = 2;

package/dist/types/components/layout/SettingCard/SettingCard.metrics.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SettingCard.metrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/SettingCard/SettingCard.metrics.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,YAAY;IACvB,sCAAsC;;IAEtC,4DAA4D;;IAE5D,oEAAoE;;IAEpE,0DAA0D;;IAE1D,mDAAmD;;IAEnD,sDAAsD;;IAEtD,4EAA4E;;;CAGpE,CAAC;AAEX,2FAA2F;AAC3F,eAAO,MAAM,sBAAsB,IAAI,CAAC;AAExC,2EAA2E;AAC3E,eAAO,MAAM,8BAA8B,MAAM,CAAC"}
+{"version":3,"file":"SettingCard.metrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/SettingCard/SettingCard.metrics.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,YAAY;IACvB,sCAAsC;;IAEtC,4DAA4D;;IAE5D,oEAAoE;;IAEpE,0DAA0D;;IAE1D,mDAAmD;;IAEnD,sDAAsD;;IAEtD;;;;OAIG;;IAEH,mFAAmF;;IAEnF;;;OAGG;;IAEH;;;;OAIG;;;CAGK,CAAC;AAEX,2FAA2F;AAC3F,eAAO,MAAM,sBAAsB,IAAI,CAAC;AAExC,2EAA2E;AAC3E,eAAO,MAAM,8BAA8B,MAAM,CAAC"}

package/dist/types/components/layout/SettingCard/SettingCard.summary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SettingCard.summary.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/SettingCard/SettingCard.summary.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAStE;;;;GAIG;AACH,eAAO,MAAM,UAAU,GAAI,UAAU,OAAO,KAAG;IAAE,GAAG,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAkBzG,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,CAuClG,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,GAAI,uCAK5B;IACD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,KAAG;IAAE,GAAG,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAAC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;CAInE,CAAC"}
+{"version":3,"file":"SettingCard.summary.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/SettingCard/SettingCard.summary.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAStE;;;;GAIG;AACH,eAAO,MAAM,UAAU,GAAI,UAAU,OAAO,KAAG;IAAE,GAAG,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAkBzG,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,CA4ClG,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,GAAI,uCAK5B;IACD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,KAAG;IAAE,GAAG,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAAC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;CAInE,CAAC"}

package/dist/types-native/components/data-display/Chip/Chip.base.d.ts

@@ -8,8 +8,10 @@ import type { ColorValue, SizeValue } from '../../../tokens/vocabulary';
  * consumer has no `@mui/material` to resolve a type import against.
  */
 /**
- * `soft` is a status chip's look: the colour's tint for a ground and its dark
- * step for ink, so a row of states reads without a row of solid blocks.
+ * `soft` is a status chip's look: the colour's tint for a ground and, for ink,
+ * its dark step in light mode (warning's darkened a step further) and its light
+ * step in dark mode (4.5:1 on the tint either way), so a row of states reads
+ * without a row of solid blocks.
  */
 export type ChipVariant = 'filled' | 'outlined' | 'soft';
 /**

package/dist/types-native/components/data-display/Chip/Chip.base.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.base.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Chip/Chip.base.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAExE;;;;;;GAMG;AACH;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AAEzD;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,QAAQ,GAAG,SAAS,CAAC;AAEjC;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,SAAS,GAAG,UAAU,CAAC;AAEnC,MAAM,WAAW,aAAa;IAC5B,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IAEd,2BAA2B;IAC3B,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB,uBAAuB;IACvB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,kCAAkC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,qDAAqD;IACrD,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB,oCAAoC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
+{"version":3,"file":"Chip.base.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Chip/Chip.base.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAExE;;;;;;GAMG;AACH;;;;;GAKG;AACH,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;AAEzD;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,QAAQ,GAAG,SAAS,CAAC;AAEjC;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,SAAS,GAAG,UAAU,CAAC;AAEnC,MAAM,WAAW,aAAa;IAC5B,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IAEd,2BAA2B;IAC3B,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB,uBAAuB;IACvB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,kCAAkC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,qDAAqD;IACrD,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB,oCAAoC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/dist/types-native/components/data-display/Chip/Chip.look.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.look.native.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Chip/Chip.look.native.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAErE,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,EAWL,KAAK,WAAW,EAChB,KAAK,eAAe,EACrB,MAAM,gBAAgB,CAAC;AAExB,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAKrD,MAAM,WAAW,SAAS;IACxB,SAAS,EAAE,SAAS,CAAC;IACrB,uEAAuE;IACvE,OAAO,EAAE,SAAS,CAAC;IACnB,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;CACrB;AAgED;;;;GAIG;AACH,wBAAgB,SAAS,CACvB,KAAK,EAAE,OAAO,EACd,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,OAAO,GAChB,SAAS,CAQX;AAED,6EAA6E;AAC7E,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,OAAO,GAAG,SAAS,CAWzF;AAED,iFAAiF;AACjF,wBAAgB,cAAc,CAC5B,KAAK,EAAE,OAAO,EACd,OAAO,EAAE,eAAe,EACxB,OAAO,EAAE,WAAW,GACnB,SAAS,CASX;AAED,oFAAoF;AACpF,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,eAAe,EACxB,OAAO,EAAE,WAAW,EACpB,IAAI,EAAE,MAAM,GAAG,QAAQ,GACtB,SAAS,CAYX;AAED,gFAAgF;AAChF,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,WAAW,GAAG,SAAS,CAQ7F;AAED,yDAAyD;AACzD,wBAAgB,eAAe,CAAC,OAAO,EAAE,eAAe,GAAG,UAAU,CAOpE;AAED,eAAO,MAAM,WAAW,GAAI,MAAM,WAAW,KAAG,eAAmC,CAAC"}
+{"version":3,"file":"Chip.look.native.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Chip/Chip.look.native.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAErE,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,EAYL,KAAK,WAAW,EAChB,KAAK,eAAe,EACrB,MAAM,gBAAgB,CAAC;AAExB,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAKrD,MAAM,WAAW,SAAS;IACxB,SAAS,EAAE,SAAS,CAAC;IACrB,uEAAuE;IACvE,OAAO,EAAE,SAAS,CAAC;IACnB,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;CACrB;AAoED;;;;GAIG;AACH,wBAAgB,SAAS,CACvB,KAAK,EAAE,OAAO,EACd,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,OAAO,GAChB,SAAS,CAQX;AAED,6EAA6E;AAC7E,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,OAAO,GAAG,SAAS,CAWzF;AAED,iFAAiF;AACjF,wBAAgB,cAAc,CAC5B,KAAK,EAAE,OAAO,EACd,OAAO,EAAE,eAAe,EACxB,OAAO,EAAE,WAAW,GACnB,SAAS,CASX;AAED,oFAAoF;AACpF,wBAAgB,oBAAoB,CAClC,OAAO,EAAE,eAAe,EACxB,OAAO,EAAE,WAAW,EACpB,IAAI,EAAE,MAAM,GAAG,QAAQ,GACtB,SAAS,CAYX;AAED,gFAAgF;AAChF,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,eAAe,EAAE,OAAO,EAAE,WAAW,GAAG,SAAS,CAQ7F;AAED,yDAAyD;AACzD,wBAAgB,eAAe,CAAC,OAAO,EAAE,eAAe,GAAG,UAAU,CAOpE;AAED,eAAO,MAAM,WAAW,GAAI,MAAM,WAAW,KAAG,eAAmC,CAAC"}

package/dist/types-native/components/data-display/Chip/Chip.metrics.d.ts

@@ -62,4 +62,15 @@ export declare const CHIP_TRANSITION_EASING = "cubic-bezier(0.4, 0, 0.2, 1)";
 export declare const SOFT_GROUND_ALPHA = 0.14;
 /** A soft chip's hover ground. */
 export declare const SOFT_HOVER_ALPHA = 0.22;
+/**
+ * How much a light-mode soft WARNING ink darkens its `dark` step (FUT-4464). With
+ * the default theme, `warning.dark` (#e65100) on its 14% tint is 3.25:1; darkened
+ * by 0.2 it is 4.77:1. The other five colours clear 4.5:1 on `dark` as it is.
+ */
+export declare const SOFT_WARNING_LIGHT_DARKEN = 0.2;
+/** A soft chip's keyboard-focus ring, in design px (read through `rem`). */
+export declare const SOFT_FOCUS_RING: {
+    readonly width: 2;
+    readonly offset: 2;
+};
 //# sourceMappingURL=Chip.metrics.d.ts.map

package/dist/types-native/components/data-display/Chip/Chip.metrics.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.metrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Chip/Chip.metrics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C;;;;;;;;;GASG;AAEH,2EAA2E;AAC3E,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE7C,eAAO,MAAM,WAAW,GAAI,MAAM,QAAQ,KAAG,WACQ,CAAC;AAEtD,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,mFAAmF;IACnF,YAAY,EAAE,MAAM,CAAC;IACrB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,oEAAoE;IACpE,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,eAAe,EAAE,MAAM,CAAC;IACxB,qDAAqD;IACrD,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;IACzB,wBAAwB,EAAE,MAAM,CAAC;IACjC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,+CAA+C;IAC/C,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,MAAM,CAAC;IACzB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,yBAAyB,EAAE,MAAM,CAAC;CACnC;AAED,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,WAAW,EAAE,eAAe,CAqC3D,CAAC;AAEF,uFAAuF;AACvF,eAAO,MAAM,WAAW,KAAK,CAAC;AAC9B,oFAAoF;AACpF,eAAO,MAAM,cAAc,KAAK,CAAC;AACjC,8CAA8C;AAC9C,eAAO,MAAM,qBAAqB,OAAO,CAAC;AAC1C,mFAAmF;AACnF,eAAO,MAAM,qBAAqB,MAAM,CAAC;AACzC,yEAAyE;AACzE,eAAO,MAAM,iBAAiB,OAAO,CAAC;AACtC,eAAO,MAAM,0BAA0B,MAAM,CAAC;AAC9C,6EAA6E;AAC7E,eAAO,MAAM,oBAAoB,OAAO,CAAC;AAIzC,yEAAyE;AACzE,eAAO,MAAM,aAAa,IAAI,CAAC;AAC/B,eAAO,MAAM,YAAY;;;;;CAAsE,CAAC;AAChG,eAAO,MAAM,kBAAkB,MAAM,CAAC;AACtC,eAAO,MAAM,sBAAsB,iCAAiC,CAAC;AAErE,oEAAoE;AACpE,eAAO,MAAM,iBAAiB,OAAO,CAAC;AACtC,kCAAkC;AAClC,eAAO,MAAM,gBAAgB,OAAO,CAAC"}
+{"version":3,"file":"Chip.metrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/data-display/Chip/Chip.metrics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C;;;;;;;;;GASG;AAEH,2EAA2E;AAC3E,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE7C,eAAO,MAAM,WAAW,GAAI,MAAM,QAAQ,KAAG,WACQ,CAAC;AAEtD,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,mFAAmF;IACnF,YAAY,EAAE,MAAM,CAAC;IACrB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,oEAAoE;IACpE,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,sBAAsB,EAAE,MAAM,CAAC;IAC/B,eAAe,EAAE,MAAM,CAAC;IACxB,qDAAqD;IACrD,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,gBAAgB,EAAE,MAAM,CAAC;IACzB,wBAAwB,EAAE,MAAM,CAAC;IACjC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,+CAA+C;IAC/C,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,MAAM,CAAC;IACzB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,yBAAyB,EAAE,MAAM,CAAC;CACnC;AAED,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,WAAW,EAAE,eAAe,CAqC3D,CAAC;AAEF,uFAAuF;AACvF,eAAO,MAAM,WAAW,KAAK,CAAC;AAC9B,oFAAoF;AACpF,eAAO,MAAM,cAAc,KAAK,CAAC;AACjC,8CAA8C;AAC9C,eAAO,MAAM,qBAAqB,OAAO,CAAC;AAC1C,mFAAmF;AACnF,eAAO,MAAM,qBAAqB,MAAM,CAAC;AACzC,yEAAyE;AACzE,eAAO,MAAM,iBAAiB,OAAO,CAAC;AACtC,eAAO,MAAM,0BAA0B,MAAM,CAAC;AAC9C,6EAA6E;AAC7E,eAAO,MAAM,oBAAoB,OAAO,CAAC;AAIzC,yEAAyE;AACzE,eAAO,MAAM,aAAa,IAAI,CAAC;AAC/B,eAAO,MAAM,YAAY;;;;;CAAsE,CAAC;AAChG,eAAO,MAAM,kBAAkB,MAAM,CAAC;AACtC,eAAO,MAAM,sBAAsB,iCAAiC,CAAC;AAErE,oEAAoE;AACpE,eAAO,MAAM,iBAAiB,OAAO,CAAC;AACtC,kCAAkC;AAClC,eAAO,MAAM,gBAAgB,OAAO,CAAC;AACrC;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,MAAM,CAAC;AAC7C,4EAA4E;AAC5E,eAAO,MAAM,eAAe;;;CAAmC,CAAC"}

package/dist/user-avatar.js

@@ -1,10 +1,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@12-apps/ui",
-  "version": "6.96.0",
+  "version": "6.96.2",
   "license": "MIT",
   "packageManager": "pnpm@10.34.5",
   "type": "module",

package/src/components/data-display/Avatar/Avatar.tsx

@@ -59,9 +59,13 @@ interface ImageState {
 }
 
 /**
- * Tracks the `<img>` load lifecycle. `imageLoading` starts true whenever there is
- * a `src` and clears on load/error — the handlers must be wired to the actual img
- * (via `slotProps.img` in the view), since load/error don't bubble to the root.
+ * Tracks the image's load lifecycle. `imageLoading` starts true whenever there is
+ * a `src` and clears on load/error. Two sources report it: the `<img>`'s own
+ * events (wired via `slotProps.img` in the view, since load/error don't bubble to
+ * the root), and a probe of the same src. The probe is needed because MUI's
+ * Avatar runs its own probe and, once that one errors, stops rendering the
+ * `<img>` — whose error event then never fires, leaving the avatar blank under
+ * the spinner forever (FUT-4467). Whichever reports first wins.
  */
 function useImageState(src: string | undefined, onError?: React.ReactEventHandler): ImageState {
   const [imageError, setImageError] = useState(false);
@@ -70,6 +74,21 @@ function useImageState(src: string | undefined, onError?: React.ReactEventHandle
   useEffect(() => {
     setImageError(false);
     setImageLoading(!!src);
+    if (!src || typeof Image === 'undefined') return undefined;
+    let current = true;
+    const probe = new Image();
+    probe.onload = () => {
+      if (current) setImageLoading(false);
+    };
+    probe.onerror = () => {
+      if (!current) return;
+      setImageError(true);
+      setImageLoading(false);
+    };
+    probe.src = src;
+    return () => {
+      current = false;
+    };
   }, [src]);
 
   const handleImageError = useCallback<React.ReactEventHandler>(

package/src/components/data-display/Chip/Chip.base.ts

@@ -10,8 +10,10 @@ import type { ColorValue, SizeValue } from '../../../tokens/vocabulary';
  * consumer has no `@mui/material` to resolve a type import against.
  */
 /**
- * `soft` is a status chip's look: the colour's tint for a ground and its dark
- * step for ink, so a row of states reads without a row of solid blocks.
+ * `soft` is a status chip's look: the colour's tint for a ground and, for ink,
+ * its dark step in light mode (warning's darkened a step further) and its light
+ * step in dark mode (4.5:1 on the tint either way), so a row of states reads
+ * without a row of solid blocks.
  */
 export type ChipVariant = 'filled' | 'outlined' | 'soft';
 

package/src/components/data-display/Chip/Chip.look.native.ts

@@ -12,10 +12,11 @@ import {
   OUTLINED_HOVER_ALPHA,
   SOFT_GROUND_ALPHA,
   SOFT_HOVER_ALPHA,
+  SOFT_WARNING_LIGHT_DARKEN,
   type ChipMuiSize,
   type ChipSizeMetrics,
 } from './Chip.metrics';
-import { alpha } from '../../../tokens/color';
+import { alpha, darken } from '../../../tokens/color';
 import type { UiTheme } from '../../../tokens/theme';
 
 /** MUI's `action.selectedOpacity`; its hover wash adds `OUTLINED_HOVER_ALPHA` on top. */
@@ -64,11 +65,15 @@ function softPaint(theme: UiTheme, color: ChipColor): ChipPaint {
     };
   }
   const accent = theme.palette[color];
+  // The ink that reads on a 14% tint: `dark` over a light page, `light` over a dark
+  // one; a light-mode warning darkens `dark` further, as the web does (FUT-4464).
+  const lightInk = color === 'warning' ? darken(accent.dark, SOFT_WARNING_LIGHT_DARKEN) : accent.dark;
+  const ink = theme.mode === 'dark' ? accent.light : lightInk;
   return {
     container: { backgroundColor: alpha(accent.main, SOFT_GROUND_ALPHA) },
     pressed: { backgroundColor: alpha(accent.main, SOFT_HOVER_ALPHA) },
-    label: { color: accent.dark, fontWeight: '600' },
-    deleteColor: alpha(accent.dark, DELETE_ICON_ALPHA),
+    label: { color: ink, fontWeight: '600' },
+    deleteColor: ink,
   };
 }
 

package/src/components/data-display/Chip/Chip.metrics.ts

@@ -105,3 +105,11 @@ export const CHIP_TRANSITION_EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';
 export const SOFT_GROUND_ALPHA = 0.14;
 /** A soft chip's hover ground. */
 export const SOFT_HOVER_ALPHA = 0.22;
+/**
+ * How much a light-mode soft WARNING ink darkens its `dark` step (FUT-4464). With
+ * the default theme, `warning.dark` (#e65100) on its 14% tint is 3.25:1; darkened
+ * by 0.2 it is 4.77:1. The other five colours clear 4.5:1 on `dark` as it is.
+ */
+export const SOFT_WARNING_LIGHT_DARKEN = 0.2;
+/** A soft chip's keyboard-focus ring, in design px (read through `rem`). */
+export const SOFT_FOCUS_RING = { width: 2, offset: 2 } as const;

package/src/components/data-display/Chip/Chip.styles.tsx

@@ -4,7 +4,7 @@ import type { KeyboardEvent, ReactElement } from 'react';
 import React from 'react';
 
 import { chipKeyAction, type ChipKeyArgs } from './Chip.helpers';
-import { alpha } from '@mui/material/styles/index.js';
+import { alpha, darken } from '@mui/material/styles/index.js';
 
 import {
   CHIP_SIZES,
@@ -12,8 +12,10 @@ import {
   CHIP_TRANSITION_MS,
   HOVER_LIFT_PX,
   HOVER_SHADOW,
+  SOFT_FOCUS_RING,
   SOFT_GROUND_ALPHA,
   SOFT_HOVER_ALPHA,
+  SOFT_WARNING_LIGHT_DARKEN,
 } from './Chip.metrics';
 import type { ChipProps } from './Chip.types';
 import { shadowInk } from '../../../tokens/ink';
@@ -78,12 +80,25 @@ const paletteKey = (color: NonNullable<ChipProps['color']>): 'primary' | 'second
   return color === 'danger' ? 'error' : color;
 };
 
-/** `soft`: the colour's tint for a ground, its dark step for ink (and the icon). */
+/**
+ * `soft`: the colour's tint for a ground, and for ink the step that reads on it:
+ * the `dark` step in light mode, the `light` step in dark mode (FUT-4442). The
+ * ground is a 14% tint over the page, so on a near-black page the ink has to be
+ * lighter than `main`; `dark` there is 2.6 to 3.9:1, `light` clears 4.5:1. In
+ * light mode warning's `dark` is 3.25:1 on its tint, so it is darkened by
+ * `SOFT_WARNING_LIGHT_DARKEN` (4.77:1, FUT-4464). The label, the icon and the
+ * delete glyph all take it.
+ */
 const softStyles = (color: NonNullable<ChipProps['color']>): SxProps<Theme> => {
   const key = paletteKey(color);
   const ground = (theme: Theme): string =>
     key ? alpha(theme.palette[key].main, SOFT_GROUND_ALPHA) : theme.palette.action.selected;
-  const ink = (theme: Theme): string => (key ? theme.palette[key].dark : theme.palette.text.secondary);
+  const ink = (theme: Theme): string => {
+    if (!key) return theme.palette.text.secondary;
+    if (theme.palette.mode === 'dark') return theme.palette[key].light;
+    // Warning's `dark` step is too light for its own tint (FUT-4464).
+    return key === 'warning' ? darken(theme.palette.warning.dark, SOFT_WARNING_LIGHT_DARKEN) : theme.palette[key].dark;
+  };
   return {
     backgroundColor: ground,
     color: ink,
@@ -93,9 +108,32 @@ const softStyles = (color: NonNullable<ChipProps['color']>): SxProps<Theme> => {
     '&.MuiChip-clickable:hover': {
       backgroundColor: (theme: 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) as object) : {}),
   };
 };
 
+/**
+ * What only an accented soft chip changes (FUT-4442, FUT-4461). MUI paints the
+ * delete glyph in `contrastText` at 0.7, near-black on a dark ground, so the glyph
+ * takes the ink. Focus, in both modes: the chip keeps its resting ground (MUI's
+ * `dark` step puts the ink at about 1:1 in light mode and sinks the light ink in
+ * dark mode) and draws a ring in the ink, so focus shows without the ground.
+ */
+const accentedStates = (
+  key: Exclude<ReturnType<typeof paletteKey>, null>,
+  ink: (theme: Theme) => string,
+): SxProps<Theme> => ({
+  '& .MuiChip-deleteIcon': { color: ink, '&:hover': { color: ink } },
+  '&.Mui-focusVisible': {
+    backgroundColor: (theme: Theme) => alpha(theme.palette[key].main, SOFT_GROUND_ALPHA),
+    outlineStyle: 'solid',
+    outlineWidth: (theme: Theme) => rem(theme, SOFT_FOCUS_RING.width),
+    outlineColor: ink,
+    outlineOffset: (theme: Theme) => rem(theme, SOFT_FOCUS_RING.offset),
+  },
+});
+
 export const chipStyles = ({
   variant,
   color = 'primary',

package/src/components/data-display/Chip/chip.md

@@ -29,7 +29,7 @@ interface ChipProps {
 
 **Features**
 
-- Filled/Outlined/Soft variants; optional avatar or icon. `soft` is a status chip: the colour's tint for a ground and its dark step for ink.
+- Filled/Outlined/Soft variants; optional avatar or icon. `soft` is a status chip: the colour's tint for a ground and, for ink, its dark step in light mode (warning's darkened a step further, FUT-4464) and its light step in dark mode.
 - Selectable (toggle) and/or deletable (× button).
 - Keyboard: Space/Enter activates; Delete/Backspace triggers remove when focused.
 

package/src/components/layout/SettingCard/SettingCard.metrics.ts

@@ -15,9 +15,26 @@ export const SETTING_CARD = {
   gridMinColumnWidth: 320,
   /** The widest the [i]'s full-summary tooltip gets. */
   infoMaxWidth: 360,
-  /** The [i]'s keyboard focus ring: its width, and its gap from the glyph. */
+  /**
+   * The [i]'s tap target, the house 40 px floor (FUT-4443). The glyph stays 16 px
+   * (`xs`); a negative margin of `(infoTapTarget - glyph) / 2` gives the box back
+   * to the title row, so nothing moves.
+   */
+  infoTapTarget: 40,
+  /** Above and below the glyph: (40 - 16) / 2, so the title row keeps its height. */
+  infoTapMarginBlock: -12,
+  /**
+   * Beside the glyph: minus the title row's `gap` (8 px), not (40 - 16) / 2, so the
+   * box ends where the status pill ends and never overlaps it.
+   */
+  infoTapMarginInline: -8,
+  /**
+   * The [i]'s keyboard focus ring: its width, and its offset from the box. The
+   * offset is negative so the ring's OUTER edge is the 40 px box (a 40 px circle
+   * round a 16 px glyph), instead of a 44 px one crowding the title and the pill.
+   */
   infoFocusRingWidth: 2,
-  infoFocusRingOffset: 2,
+  infoFocusRingOffset: -2,
 } as const;
 
 /** The grid's default gap, in theme SPACING units (not px): what `sx`'s `gap: 2` means. */

package/src/components/layout/SettingCard/SettingCard.summary.tsx

@@ -61,6 +61,11 @@ export const SummaryInfo: React.FC<{ label: string; summary: React.ReactNode; da
           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',

package/dist/chunk-BFRVMCQM.js

@@ -1,27 +0,0 @@
-// src/components/layout/SettingCard/SettingCard.metrics.ts
-var SETTING_CARD = {
-  /** Between the icon and the title. */
-  iconGap: 12,
-  /** The spinner beside a switch while its flip is saving. */
-  spinnerSize: 16,
-  /** How far a group's dependent rows sit in from its main switch. */
-  groupIndent: 24,
-  /** The rule down the left of a group's dependent rows. */
-  groupRuleWidth: 2,
-  /** The narrowest a grid column gets by default. */
-  gridMinColumnWidth: 320,
-  /** The widest the [i]'s full-summary tooltip gets. */
-  infoMaxWidth: 360,
-  /** The [i]'s keyboard focus ring: its width, and its gap from the glyph. */
-  infoFocusRingWidth: 2,
-  infoFocusRingOffset: 2
-};
-var SETTING_GRID_GAP_UNITS = 2;
-var SETTING_GROUP_INACTIVE_OPACITY = 0.5;
-
-export {
-  SETTING_CARD,
-  SETTING_GRID_GAP_UNITS,
-  SETTING_GROUP_INACTIVE_OPACITY
-};
-//# sourceMappingURL=chunk-BFRVMCQM.js.map

package/dist/chunk-BFRVMCQM.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/layout/SettingCard/SettingCard.metrics.ts"],"sourcesContent":["/**\n * The setting-card family's lengths, in design px. The web reads every one\n * through `rem(theme, n)`, so they scale with the host's type scale.\n */\nexport const SETTING_CARD = {\n  /** Between the icon and the title. */\n  iconGap: 12,\n  /** The spinner beside a switch while its flip is saving. */\n  spinnerSize: 16,\n  /** How far a group's dependent rows sit in from its main switch. */\n  groupIndent: 24,\n  /** The rule down the left of a group's dependent rows. */\n  groupRuleWidth: 2,\n  /** The narrowest a grid column gets by default. */\n  gridMinColumnWidth: 320,\n  /** The widest the [i]'s full-summary tooltip gets. */\n  infoMaxWidth: 360,\n  /** The [i]'s keyboard focus ring: its width, and its gap from the glyph. */\n  infoFocusRingWidth: 2,\n  infoFocusRingOffset: 2,\n} as const;\n\n/** The grid's default gap, in theme SPACING units (not px): what `sx`'s `gap: 2` means. */\nexport const SETTING_GRID_GAP_UNITS = 2;\n\n/** How faded a group's dependent rows are while the main switch is off. */\nexport const SETTING_GROUP_INACTIVE_OPACITY = 0.5;\n"],"mappings":";AAIO,IAAM,eAAe;AAAA;AAAA,EAE1B,SAAS;AAAA;AAAA,EAET,aAAa;AAAA;AAAA,EAEb,aAAa;AAAA;AAAA,EAEb,gBAAgB;AAAA;AAAA,EAEhB,oBAAoB;AAAA;AAAA,EAEpB,cAAc;AAAA;AAAA,EAEd,oBAAoB;AAAA,EACpB,qBAAqB;AACvB;AAGO,IAAM,yBAAyB;AAG/B,IAAM,iCAAiC;","names":[]}

package/dist/chunk-DHAXUVMR.js.map

@@ -1 +0,0 @@
-{"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 } 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_GROUND_ALPHA,\n  SOFT_HOVER_ALPHA,\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/** `soft`: the colour's tint for a ground, its dark step for ink (and the icon). */\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 => (key ? theme.palette[key].dark : theme.palette.text.secondary);\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  };\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":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,YAAY;AAGnB,OAAO,WAAW;AAGlB,SAAS,aAAa;AA0CX;AAtBJ,IAAM,qBACX,CAAC,SACD,CAAC,UAA+B;AAC9B,QAAM,SAAS,cAAc,MAAM,KAAK,IAAI;AAC5C,MAAI,WAAW,KAAM;AACrB,QAAM,eAAe;AACrB,MAAI,WAAW,UAAU;AACvB,SAAK,WAAW;AAChB;AAAA,EACF;AACA,OAAK,UAAU;AACjB;AAEK,IAAM,YAAY,CACvB,QACA,cAC6B;AAC7B,MAAI,UAAU,MAAM,eAAe,MAAM,GAAG;AAC1C,WAAO;AAAA,EACT;AACA,MAAI,WAAW;AACb,UAAM,EAAE,WAAW,IAAI,WAAW;AAClC,WAAO,oBAAC,UAAO,KAAK,WAAW,IAAI,EAAE,OAAO,MAAM,UAAU,GAAG,QAAQ,MAAM,UAAU,EAAE,GAAG;AAAA,EAC9F;AACA,SAAO;AACT;AAWA,IAAM,cAAc,CAAC,UACnB,KAAK,KAAK,OAAO,aAAa,SAAS,aAAa,IAAI,CAAC,IAAI;AAAA,EAC3D;AAAA,EACA,MAAM,QAAQ,SAAS,SAAS,aAAa,YAAY,aAAa;AACxE,CAAC;AASH,IAAM,aAAa,CAAC,UAAsH;AACxI,MAAI,UAAU,UAAW,QAAO;AAChC,SAAO,UAAU,WAAW,UAAU;AACxC;AAGA,IAAM,aAAa,CAAC,UAA2D;AAC7E,QAAM,MAAM,WAAW,KAAK;AAC5B,QAAM,SAAS,CAAC,UACd,MAAM,MAAM,MAAM,QAAQ,GAAG,EAAE,MAAM,iBAAiB,IAAI,MAAM,QAAQ,OAAO;AACjF,QAAM,MAAM,CAAC,UAA0B,MAAM,MAAM,QAAQ,GAAG,EAAE,OAAO,MAAM,QAAQ,KAAK;AAC1F,SAAO;AAAA,IACL,iBAAiB;AAAA,IACjB,OAAO;AAAA;AAAA,IAEP,YAAY;AAAA,IACZ,mBAAmB,EAAE,OAAO,IAAI;AAAA,IAChC,6BAA6B;AAAA,MAC3B,iBAAiB,CAAC,UAAkB,MAAM,MAAM,MAAM,QAAQ,GAAG,EAAE,MAAM,gBAAgB,IAAI,MAAM,QAAQ,OAAO;AAAA,IACpH;AAAA,EACF;AACF;AAEO,IAAM,aAAa,CAAC;AAAA,EACzB;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AACF,MAAqC;AACnC,QAAM,QAAQ,aAAa,CAAC;AAE5B,SAAO;AAAA,IACL,GAAI,YAAY,SAAU,WAAW,KAAK,IAAe,CAAC;AAAA;AAAA,IAE1D,GAAI,YAAY,cAAc;AAAA,MAC5B,aAAa;AAAA,MACb,aAAa;AAAA,MACb,iBAAiB;AAAA,IACnB;AAAA,IACA,GAAI,YACF,YAAY,cAAc;AAAA,MACxB,iBAAiB,CAAC,UAAiB,MAAM,QAAQ,OAAO;AAAA,IAC1D;AAAA,IACF,WAAW;AAAA,MACT,GAAI,SAAS;AAAA,QACX,WAAW,CAAC,UAAiB,cAAc,IAAI,OAAO,CAAC,aAAa,CAAC;AAAA,QACrE,WAAW,CAAC,UAAiB,YAAY,KAAK;AAAA,MAChD;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACV,GAAI,SAAS;AAAA,QACX,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,YAAY,OAAO,qBAAqB,GAAI,KAAK,sBAAsB;AAAA,EACzE;AACF;AAEO,IAAM,iBAAiB,CAC5B,MACA,WAEA,QAAQ,MAAM,eAAe,IAAI,IAC7B,MAAM,aAAa,MAAsB;AAAA,EACvC,eAAe;AACjB,CAA4B,IAC5B;","names":[]}

package/dist/chunk-JIEVKHOH.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/data-display/Avatar/Avatar.tsx"],"sourcesContent":["import BrokenImage from '@mui/icons-material/BrokenImage';\nimport Person from '@mui/icons-material/Person';\nimport { styled } from '@mui/material/styles/index.js';\nimport React, { useCallback, useEffect, useState } from 'react';\n\nimport {\n  AVATAR_DEFAULTS,\n  contentTypeOf,\n  pickAvatarContent,\n  type AvatarContentPick,\n} from './Avatar.helpers';\nimport { GROUP_MAX, GROUP_OVERLAP, GROUP_HOVER, BORDER_WIDTH } from './Avatar.metrics';\nimport type { AvatarProps, ContentType } from './Avatar.types';\nimport { rem } from '../../../tokens/relative';\nimport { AvatarView, type AvatarViewProps } from './Avatar.view';\nimport { EN_US_UI_LABELS } from '../../../en-US.labels';\n\n/** The node behind the winning content slot; the pick itself is shared. */\nfunction resolveContent(args: {\n  children?: React.ReactNode;\n  fallback?: React.ReactNode;\n  icon?: React.ReactNode;\n  imageError: boolean;\n  showFallbackOnError: boolean;\n}): { content: React.ReactNode; contentType: ContentType } {\n  const { children, fallback, icon, imageError, showFallbackOnError } = args;\n  const pick = pickAvatarContent({\n    hasChildren: Boolean(children),\n    hasFallback: Boolean(fallback),\n    hasIcon: Boolean(icon),\n    imageError,\n    showFallbackOnError,\n  });\n  const NODES: Record<AvatarContentPick, React.ReactNode> = {\n    children,\n    fallback,\n    icon,\n    broken: <BrokenImage />,\n    default: <Person />,\n  };\n  return { content: NODES[pick], contentType: contentTypeOf(pick) };\n}\n\n/** Fades the avatar in after `animationDelay`ms. */\nfunction useMountedFade(animationDelay: number): boolean {\n  const [mounted, setMounted] = useState(false);\n  useEffect(() => {\n    const timer = window.setTimeout(() => setMounted(true), animationDelay);\n    return () => window.clearTimeout(timer);\n  }, [animationDelay]);\n  return mounted;\n}\n\ninterface ImageState {\n  imageError: boolean;\n  imageLoading: boolean;\n  handleImageError: React.ReactEventHandler;\n  handleImageLoad: () => void;\n}\n\n/**\n * Tracks the `<img>` load lifecycle. `imageLoading` starts true whenever there is\n * a `src` and clears on load/error — the handlers must be wired to the actual img\n * (via `slotProps.img` in the view), since load/error don't bubble to the root.\n */\nfunction useImageState(src: string | undefined, onError?: React.ReactEventHandler): ImageState {\n  const [imageError, setImageError] = useState(false);\n  const [imageLoading, setImageLoading] = useState(!!src);\n\n  useEffect(() => {\n    setImageError(false);\n    setImageLoading(!!src);\n  }, [src]);\n\n  const handleImageError = useCallback<React.ReactEventHandler>(\n    (event) => {\n      setImageError(true);\n      setImageLoading(false);\n      onError?.(event);\n    },\n    [onError],\n  );\n\n  const handleImageLoad = useCallback(() => setImageLoading(false), []);\n\n  return { imageError, imageLoading, handleImageError, handleImageLoad };\n}\n\n/** Normalizes props (defaults + rest passthrough) and derives everything the view needs. */\nfunction useAvatarModel(raw: AvatarProps, ref: React.Ref<HTMLDivElement>): AvatarViewProps {\n  const {\n    variant,\n    size,\n    glow,\n    pulse,\n    status,\n    fallback,\n    icon,\n    bordered,\n    color,\n    src,\n    alt,\n    children,\n    loading,\n    onError,\n    onClick,\n    interactive,\n    showFallbackOnError,\n    animationDelay,\n    className,\n    dataTestId,\n    // React Native's spelling of the same id; it names the component on both\n    // sides and must not reach the DOM as an attribute.\n    testID,\n    ...rest\n  } = { ...AVATAR_DEFAULTS, ...raw };\n\n  const mounted = useMountedFade(animationDelay);\n  const { imageError, imageLoading, handleImageError, handleImageLoad } = useImageState(src, onError);\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => onClick?.(event),\n    [onClick],\n  );\n  const { content, contentType } = resolveContent({\n    children,\n    fallback,\n    icon,\n    imageError,\n    showFallbackOnError,\n  });\n\n  return {\n    mounted,\n    variant,\n    size,\n    color,\n    glow,\n    pulse,\n    bordered,\n    showSpinner: loading || imageLoading,\n    imageError,\n    clickable: interactive || !!onClick,\n    imgSrc: imageError ? undefined : src,\n    alt,\n    ariaLabel: (rest['aria-label'] as string) || alt || EN_US_UI_LABELS.avatar.name,\n    content,\n    contentType,\n    className,\n    dataTestId: testID ?? dataTestId,\n    status,\n    forwardedRef: ref,\n    onClick: handleClick,\n    handleImageError,\n    handleImageLoad,\n    rest,\n  };\n}\n\nexport const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>((props, ref) => (\n  <AvatarView {...useAvatarModel(props, ref)} />\n));\n\nAvatar.displayName = 'Avatar';\n\nconst AvatarGroupContainer = styled('div')<{ overlap?: number }>(({ theme, overlap = GROUP_OVERLAP }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  '& > *': {\n    marginLeft: rem(theme, -overlap),\n    transition: 'all 0.3s ease',\n    position: 'relative',\n    border: `${rem(theme, BORDER_WIDTH)} solid ${theme.palette.background.paper}`,\n    '&:hover': {\n      zIndex: 100,\n      transform: `scale(${GROUP_HOVER.scale}) translateY(${rem(theme, -GROUP_HOVER.lift)})`,\n    },\n    '&:first-of-type': {\n      marginLeft: 0,\n    },\n  },\n}));\n\n// Export AvatarGroup for grouped avatars\nexport const AvatarGroup: React.FC<{\n  children: React.ReactNode;\n  max?: number;\n  overlap?: number;\n  className?: string;\n  dataTestId?: string;\n}> = ({ children, max = GROUP_MAX, overlap = GROUP_OVERLAP, className, dataTestId }) => {\n  const childrenArray = React.Children.toArray(children);\n  const visibleChildren = max ? childrenArray.slice(0, max) : childrenArray;\n  const remainingCount = childrenArray.length - visibleChildren.length;\n\n  return (\n    <AvatarGroupContainer overlap={overlap} className={className} data-testid={dataTestId}>\n      {visibleChildren}\n      {remainingCount > 0 && (\n        <Avatar\n          size={(visibleChildren[0] as React.ReactElement<AvatarProps>)?.props?.size || 'md'}\n          color=\"neutral\"\n          fallback={`+${remainingCount}`}\n          bordered\n          dataTestId={dataTestId ? `${dataTestId}-overflow` : undefined}\n        />\n      )}\n    </AvatarGroupContainer>\n  );\n};\n\nAvatarGroup.displayName = 'AvatarGroup';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,iBAAiB;AACxB,OAAO,YAAY;AACnB,SAAS,cAAc;AACvB,OAAO,SAAS,aAAa,WAAW,gBAAgB;AAkC5C,cA8JR,YA9JQ;AAnBZ,SAAS,eAAe,MAMmC;AACzD,QAAM,EAAE,UAAU,UAAU,MAAM,YAAY,oBAAoB,IAAI;AACtE,QAAM,OAAO,kBAAkB;AAAA,IAC7B,aAAa,QAAQ,QAAQ;AAAA,IAC7B,aAAa,QAAQ,QAAQ;AAAA,IAC7B,SAAS,QAAQ,IAAI;AAAA,IACrB;AAAA,IACA;AAAA,EACF,CAAC;AACD,QAAM,QAAoD;AAAA,IACxD;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ,oBAAC,eAAY;AAAA,IACrB,SAAS,oBAAC,UAAO;AAAA,EACnB;AACA,SAAO,EAAE,SAAS,MAAM,IAAI,GAAG,aAAa,cAAc,IAAI,EAAE;AAClE;AAGA,SAAS,eAAe,gBAAiC;AACvD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,YAAU,MAAM;AACd,UAAM,QAAQ,OAAO,WAAW,MAAM,WAAW,IAAI,GAAG,cAAc;AACtE,WAAO,MAAM,OAAO,aAAa,KAAK;AAAA,EACxC,GAAG,CAAC,cAAc,CAAC;AACnB,SAAO;AACT;AAcA,SAAS,cAAc,KAAyB,SAA+C;AAC7F,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,CAAC,CAAC,GAAG;AAEtD,YAAU,MAAM;AACd,kBAAc,KAAK;AACnB,oBAAgB,CAAC,CAAC,GAAG;AAAA,EACvB,GAAG,CAAC,GAAG,CAAC;AAER,QAAM,mBAAmB;AAAA,IACvB,CAAC,UAAU;AACT,oBAAc,IAAI;AAClB,sBAAgB,KAAK;AACrB,gBAAU,KAAK;AAAA,IACjB;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,kBAAkB,YAAY,MAAM,gBAAgB,KAAK,GAAG,CAAC,CAAC;AAEpE,SAAO,EAAE,YAAY,cAAc,kBAAkB,gBAAgB;AACvE;AAGA,SAAS,eAAe,KAAkB,KAAiD;AACzF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,EAAE,GAAG,iBAAiB,GAAG,IAAI;AAEjC,QAAM,UAAU,eAAe,cAAc;AAC7C,QAAM,EAAE,YAAY,cAAc,kBAAkB,gBAAgB,IAAI,cAAc,KAAK,OAAO;AAClG,QAAM,cAAc;AAAA,IAClB,CAAC,UAA4C,UAAU,KAAK;AAAA,IAC5D,CAAC,OAAO;AAAA,EACV;AACA,QAAM,EAAE,SAAS,YAAY,IAAI,eAAe;AAAA,IAC9C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,WAAW;AAAA,IACxB;AAAA,IACA,WAAW,eAAe,CAAC,CAAC;AAAA,IAC5B,QAAQ,aAAa,SAAY;AAAA,IACjC;AAAA,IACA,WAAY,KAAK,YAAY,KAAgB,OAAO,gBAAgB,OAAO;AAAA,IAC3E;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY,UAAU;AAAA,IACtB;AAAA,IACA,cAAc;AAAA,IACd,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAEO,IAAM,SAAS,MAAM,WAAwC,CAAC,OAAO,QAC1E,oBAAC,cAAY,GAAG,eAAe,OAAO,GAAG,GAAG,CAC7C;AAED,OAAO,cAAc;AAErB,IAAM,uBAAuB,OAAO,KAAK,EAAwB,CAAC,EAAE,OAAO,UAAU,cAAc,OAAO;AAAA,EACxG,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,SAAS;AAAA,IACP,YAAY,IAAI,OAAO,CAAC,OAAO;AAAA,IAC/B,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ,GAAG,IAAI,OAAO,YAAY,CAAC,UAAU,MAAM,QAAQ,WAAW,KAAK;AAAA,IAC3E,WAAW;AAAA,MACT,QAAQ;AAAA,MACR,WAAW,SAAS,YAAY,KAAK,gBAAgB,IAAI,OAAO,CAAC,YAAY,IAAI,CAAC;AAAA,IACpF;AAAA,IACA,mBAAmB;AAAA,MACjB,YAAY;AAAA,IACd;AAAA,EACF;AACF,EAAE;AAGK,IAAM,cAMR,CAAC,EAAE,UAAU,MAAM,WAAW,UAAU,eAAe,WAAW,WAAW,MAAM;AACtF,QAAM,gBAAgB,MAAM,SAAS,QAAQ,QAAQ;AACrD,QAAM,kBAAkB,MAAM,cAAc,MAAM,GAAG,GAAG,IAAI;AAC5D,QAAM,iBAAiB,cAAc,SAAS,gBAAgB;AAE9D,SACE,qBAAC,wBAAqB,SAAkB,WAAsB,eAAa,YACxE;AAAA;AAAA,IACA,iBAAiB,KAChB;AAAA,MAAC;AAAA;AAAA,QACC,MAAO,gBAAgB,CAAC,GAAuC,OAAO,QAAQ;AAAA,QAC9E,OAAM;AAAA,QACN,UAAU,IAAI,cAAc;AAAA,QAC5B,UAAQ;AAAA,QACR,YAAY,aAAa,GAAG,UAAU,cAAc;AAAA;AAAA,IACtD;AAAA,KAEJ;AAEJ;AAEA,YAAY,cAAc;","names":[]}

package/dist/chunk-X2GWR75Q.js.map

@@ -1 +0,0 @@
-{"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          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;AAyEtD;AA3DD,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,YAChB,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":[]}