@12-apps/ui 6.44.0 → 6.44.2

package/NATIVE.md

@@ -95,7 +95,7 @@ Ported: **27 of 144** public subpaths carry a `react-native` condition.
 | `@12-apps/ui/data-display/Progress` | 27 | 2 | `gradient` paints its first stop (`main`) flat: React Native core has no gradient fill, so the 90° run to `dark` is lost. `glass` keeps the 80% wash and the 30% hairline but not the 10px backdrop blur, which React Native has no equivalent of.; `glow` draws the web's `0 0 10px 2px alpha(main, 0.4)` shadow (and `0 0 6px 1px` on a filled segment) but not the `filter: brightness(1.1)` that goes with it, nor the circular variant's `drop-shadow` — the dial takes a box shadow round its square instead.; The indeterminate linear bar is ONE band a third of the track wide crossing every 2.1s; MUI runs two bars on two keyframe tracks. The indeterminate dial spins a quarter-circle arc once every 1.4s rather than growing and shrinking it.; The determinate bar is a clamped WIDTH; MUI translates a full-width bar by `value - 100`%. The two agree between 0 and 100 — outside it the web slides the bar off the track and native stops at the ends.; MUI's `transition: all 0.3s ease` on the bar and on every segment has no equivalent: a value change is drawn immediately.; The label is set in MUI's default `caption` ratios at the size's own step; a host that re-themes MUI's typography variants moves the web only. |
 | `@12-apps/ui/feedback/Dialog` | 26 | 5 | `glass` paints its 0.1 paper wash and primary hairline without the 20px backdrop blur, and the scrim behind it is a flat `alpha(black, 0.2)` without its 8px blur — React Native has no backdrop filter.; `gradient` adds nothing on native: it is a `linear-gradient` background IMAGE layered over the paper colour, and React Native core has neither a gradient fill nor a second background layer.; `role="dialog"` sits on React Native's `Modal`, which is the dialog on this side; the web puts it on MUI's paper. react-native-web gives that role to the TOP-MOST modal only, so two stacked dialogs announce one.; The modal mounts and unmounts without a transition where the web fades the paper in through MUI's `Fade`. React Native's own `animationType` is forwarded, so a consumer who wants `"fade"` or `"slide"` passes it.; The paper is `maxHeight: '100%'` inside an overlay inset by the web's `theme.spacing(2)` margin; the web writes `calc(100% - 64px)`, which React Native has no `calc` for, and 90vw, which the inset overlay stands in for.; `borderRadius` has no effect on `variant="drawer"` on EITHER renderer, so native paints the drawer SQUARE — which is what the web shows. Two things have to fail for that and both do: the web builds `${radius}px 0 0 ${radius}px` out of `theme.spacing()`, which already returns a px string, so the declaration reads `16pxpx 0 0 16pxpx` and is dropped; and that `sx` lands on a plain `Box` inside the Drawer rather than on a Paper, and MUI renders the Drawer's own Paper with `square: true`, so `shape.borderRadius` paints nothing either. Rounding the drawer is a web change (`Dialog.styles.ts` plus where the `sx` lands), made once, for both.; A `DialogContent` or `DialogActions` passed through a COMPONENT boundary still gets the padded wrapper here. The web catches that case with a `:has()` selector, which asks the DOM one step after React can; native has only the element-type check, so a body split into its own component is padded twice and stops being a sibling of the action bar.; `DialogContent` is a `ScrollView` — React Native's `overflow-y: auto` — so its padding lives on the scrolling content container rather than on the box the test id names.; The tighter top padding a body gets under a title (FUT-544) is decided by context rather than by the web's `.MuiDialogTitle-root + &`, so a SECOND `DialogContent` further down the dialog gets it too.; A `glow`ing paper stops clipping its children to its corners: a view's own shadow is clipped by its own overflow on a device, so the halo the caller asked for would not paint. The web keeps its clip and shows both.; The close button is a `Pressable` around the shared `Close` glyph at MUI's 8px `IconButton` padding; its pressed wash stands in for the web's hover.; Title, subtitle and raw text children 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/form/Button` | 24 | 2 | — |
-| `@12-apps/ui/form/Checkbox` | 25 | 0 | The control is a pressable carrying `role="checkbox"` and `aria-checked` — the state the web's hidden `<input type="checkbox">` announces — rather than a real form element. So it is a tab stop and a screen reader reads it correctly, but the `disabled` ATTRIBUTE a DOM assertion like `toBeDisabled()` looks for is `aria-disabled` here.; The box itself IS MUI's glyph: `@12-apps/ui/icons` generates `CheckBox`, `CheckBoxOutlineBlank` and `IndeterminateCheckBox` from the same `@mui/icons-material` package MUI's own `Checkbox` imports them from.; `glow` is a static shadow of MUI's default blue rather than one breathing between a 5px and a 20px blur, and `pulse` — an expanding ring drawn with `box-shadow` spread — is not drawn at all: React Native has neither keyframes on a shadow nor shadow spread.; Hover has no touch equivalent, so the 0.1 wash the web puts behind a hovered box is not drawn; `ripple` becomes Android's own ripple and is nothing on iOS.; `rounded` and `toggle` clip and scale the glyph's own box, as the web does — which on a transparent glyph shows only where the box would have clipped it. The web's `borderRadius` on an `<svg>` is the same near-invisible change.; Both renderers check in `primary.main` whatever `color` says: `Checkbox.tsx` overrides MUI's per-colour rule with primary and wins on source order. Fixing that is a web change.; The label and the helper text are set in MUI's own numbers (`body2` at 14px, `caption` at 12px, four spacing units of helper inset); a host that re-themes MUI's typography moves the web only. |
+| `@12-apps/ui/form/Checkbox` | 26 | 0 | The control is a pressable carrying `role="checkbox"` and `aria-checked` — the state the web's hidden `<input type="checkbox">` announces — rather than a real form element. So it is a tab stop and a screen reader reads it correctly, but the `disabled` ATTRIBUTE a DOM assertion like `toBeDisabled()` looks for is `aria-disabled` here.; The box itself IS MUI's glyph: `@12-apps/ui/icons` generates `CheckBox`, `CheckBoxOutlineBlank` and `IndeterminateCheckBox` from the same `@mui/icons-material` package MUI's own `Checkbox` imports them from.; `glow` is a static shadow of MUI's default blue rather than one breathing between a 5px and a 20px blur, and `pulse` — an expanding ring drawn with `box-shadow` spread — is not drawn at all: React Native has neither keyframes on a shadow nor shadow spread.; Hover has no touch equivalent, so the 0.1 wash the web puts behind a hovered box is not drawn; `ripple` becomes Android's own ripple and is nothing on iOS.; `rounded` and `toggle` clip and scale the glyph's own box, as the web does — which on a transparent glyph shows only where the box would have clipped it. The web's `borderRadius` on an `<svg>` is the same near-invisible change.; Both renderers check in `primary.main` whatever `color` says: `Checkbox.tsx` overrides MUI's per-colour rule with primary and wins on source order. Fixing that is a web change.; The label and the helper text are set in MUI's own numbers (`body2` at 14px, `caption` at 12px, four spacing units of helper inset); a host that re-themes MUI's typography moves the web only. |
 | `@12-apps/ui/form/Input` | 23 | 2 | The label sits ABOVE the field at its shrunk size (12px, aligned with the value's own left inset) instead of floating into a notch in the border: React Native can neither cut a notch in a border nor animate a label into one, so `floating` has nothing left to move.; `filled` keeps MUI's lopsided `25px 12px 8px` inset, which on the web is where the floating label sits inside the box — so a native filled field reads low in its box, with the label above it.; `glass` paints its 0.1 paper wash and hairline without the 20px backdrop blur (React Native has no backdrop filter), and draws ONE border where the web draws two — its own on the field root, plus the outlined fieldset's underneath.; `gradient` paints the first stop of its 135° fill flat and gives the 2px ring the gradient's first hue: React Native core has no gradient fill and no masked pseudo-element border.; Hover has no touch equivalent, so the web's hover border, its brighter glass wash and its deeper filled wash are not drawn; focus is, and it carries the same colours.; `pulse` grows by scaling the bar rather than spreading a box-shadow, which React Native does not have; `glow` is a shadow on iOS and an elevation on Android, so its halo is not symmetrical there.; `onClick` fires from the DOM click under react-native-web and from `onPressIn` on a device — react-native-web forwards only the first and React Native only the second, so exactly one runs and never both.; Enter keeps focus (`blurOnSubmit={false}`), as it does in a web `<input>`; React Native's own default for a single-line field is to dismiss the keyboard, and a caller wanting that passes its own.; An HTML `type` React Native has no keyboard for (`date`, `time`, `file`, `color`) renders a plain text field; `text`, `search`, `email`, `tel`, `url` and `number` pick the keyboard and `password` sets secure entry.; The value, label and helper text are set in MUI's own numbers (`body1` at 16px on a 23px line, the 0.75 shrunk label, `caption` at 12px); a host that re-themes MUI's typography variants moves the web only. |
 | `@12-apps/ui/form/Select` | 29 | 1 | The option list is an absolutely positioned panel under the field, not a portal over the screen: React Native's `Modal` traps focus and covers the viewport, which is right for a dialog and wrong for a dropdown. So the list is clipped by any ancestor that hides its overflow, it cannot escape a `ScrollView`, and there is no backdrop — the list closes on a pick, on Escape, or when the field is pressed again, never by a tap elsewhere.; Arrow keys open the list and Escape closes it, through react-native-web's DOM key events; `Enter` toggles it, because react-native-web's `Pressable` already answers `Enter` as a press. None of the three exists on a device, where the list is a touch surface — so there is no highlighted option to walk.; The label sits above the field rather than floating into a notch in its border, and the arrow is laid out in flow rather than absolutely at `right: 7`; the 1px difference that costs is taken out of the gap before the glyph, so the value still stops 32px from the edge. Both follow from React Native having no notched outline and no `position: absolute` inside a text run.; `glass` paints its 0.1 paper wash without the 20px backdrop blur (React Native has no backdrop filter), and `gradient` paints the first stop of its 135° fill flat inside a 2px ring of the gradient's first hue — React Native core has no gradient fill and no masked pseudo-element border.; Hover has no touch equivalent: the web's hover border, its brighter glass wash and the `action.hover` wash under a menu row are not drawn. `glow` is a shadow on iOS and an elevation on Android, so its halo is not symmetrical there, and it does not brighten on focus the way the web's does.; `defaultValue` selects an option here and does nothing on the web, where `Select.tsx` passes `value={value ?? ''}` and MUI's controlled value wins over it. Fixing that is a web change.; The list is rendered in full inside a `ScrollView` capped at the window height less 96px, where MUI's `Menu` measures the anchor and flips or shifts to stay on screen; a list opened near the bottom of a device screen runs off it.; The display slot, the option labels, the label and the helper text are set in MUI's own numbers (`body1` at 16px on a 23px line, the 0.75 shrunk label, `caption` at 12px); a host that re-themes MUI's typography variants moves the web only. |
 | `@12-apps/ui/form/Switch` | 26 | 3 | The control is drawn here rather than handed to React Native's own `Switch`, which is the platform control at the platform's size: no size scale, no track geometry, no thumb radius per look, no room for an icon or a word inside the track. What that costs is the platform's own switch on a device — this one is a pressable carrying `role="checkbox"` and `aria-checked`, which is what the web's hidden `<input type="checkbox">` announces, but a `role="switch"` would announce better where nothing needs `getByRole('checkbox')` to find it.; Hover has no touch equivalent, so the thumb does not lift or take its halo, and `ripple` — a wash that expands from the thumb under the pointer on the web — is not drawn at all.; `glow` paints its halo and inner wash as a static shadow rather than breathing every two seconds, and `gradient` paints the gradient's first stop flat (`light` checked, `alpha(light, 0.3)` at rest): React Native core has no gradient fill, no keyframes on a shadow and no shimmer sweep.; `glass` washes the track and the thumb at MUI's alphas without the 20px and 10px backdrop blurs — React Native has no backdrop filter.; `loading` turns the platform's `ActivityIndicator` inside the thumb at MUI's 0.6 of the thumb's size, where the web draws its own 2px ring with one transparent quarter.; An `onIcon` or `offIcon` is rendered as given, centred in its box. The web sets `color` and `fontSize` on the wrapper and an MUI glyph inherits both; React Native has no inheritance, so pass an `<Icon size color>` that is already the size and colour you want.; The keyboard reaches the control only through react-native-web: `Enter` presses it (react-native-web's `Pressable` answers it), the space bar toggles it through a DOM key handler, and neither exists on a device.; `checked`, the label, the description and the helper text are set in MUI's own numbers (`body2` at 14px, `caption` at 12px, the 300ms `cubic-bezier(0.4, 0, 0.2, 1)`); a host that re-themes MUI's typography or its elevations moves the web only. |

package/dist/_internal/components/data-display/DataViews/base-card.js

@@ -1,15 +1,15 @@
 "use client";
 import {
   BaseCard
-} from "../../../../chunk-CEJTGG6J.js";
+} from "../../../../chunk-CIBTYBBN.js";
 import "../../../../chunk-BYH5GPLT.js";
 import "../../../../chunk-K4EKTMTC.js";
 import "../../../../chunk-LHHAYZ55.js";
 import "../../../../chunk-KHG57NAE.js";
 import "../../../../chunk-SJRTT3PA.js";
-import "../../../../chunk-FOM7OMJR.js";
+import "../../../../chunk-DDL6W7JS.js";
 import "../../../../chunk-TZ633UZA.js";
-import "../../../../chunk-TIQXDPIX.js";
+import "../../../../chunk-RIJGMRJK.js";
 import "../../../../chunk-3UIDKLML.js";
 import "../../../../chunk-PYC4CWCQ.js";
 import "../../../../chunk-6DPAWXZ3.js";
@@ -23,6 +23,7 @@ import "../../../../chunk-YZHX2HTC.js";
 import "../../../../chunk-6IWO7CM2.js";
 import "../../../../chunk-TYJR4GOF.js";
 import "../../../../chunk-HPK33ACY.js";
+import "../../../../chunk-7ZPUN7TV.js";
 import "../../../../chunk-6WZUZHJM.js";
 import "../../../../chunk-2BYKTBDL.js";
 import "../../../../chunk-AG66JBNH.js";

package/dist/_internal/components/data-display/DataViews/base-list-card-gutters.js

@@ -3,16 +3,18 @@ import {
   DiscloseSlot,
   DragSlot,
   SelectSlot
-} from "../../../../chunk-B2ZITMYG.js";
+} from "../../../../chunk-26QYVCDK.js";
 import "../../../../chunk-K4EKTMTC.js";
 import "../../../../chunk-KHG57NAE.js";
 import "../../../../chunk-SJRTT3PA.js";
-import "../../../../chunk-FOM7OMJR.js";
+import "../../../../chunk-DDL6W7JS.js";
 import "../../../../chunk-TZ633UZA.js";
-import "../../../../chunk-TIQXDPIX.js";
+import "../../../../chunk-RIJGMRJK.js";
 import "../../../../chunk-6DPAWXZ3.js";
 import "../../../../chunk-TYJR4GOF.js";
 import "../../../../chunk-HPK33ACY.js";
+import "../../../../chunk-7ZPUN7TV.js";
+import "../../../../chunk-FZXKH2ZT.js";
 import "../../../../chunk-6JAIFIPW.js";
 import "../../../../chunk-N3GAFIXG.js";
 import "../../../../chunk-YKCAJ2TN.js";

package/dist/_internal/components/data-display/DataViews/base-list-card.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   BaseListCard
-} from "../../../../chunk-KMC6WP66.js";
-import "../../../../chunk-B2ZITMYG.js";
+} from "../../../../chunk-KPZ53JY6.js";
+import "../../../../chunk-26QYVCDK.js";
 import "../../../../chunk-XLQYOBHP.js";
 import {
   META_BREAK,
@@ -21,9 +21,9 @@ import "../../../../chunk-MNHIK2OR.js";
 import "../../../../chunk-4RWPGWJW.js";
 import "../../../../chunk-6LOGBWLG.js";
 import "../../../../chunk-SJRTT3PA.js";
-import "../../../../chunk-FOM7OMJR.js";
+import "../../../../chunk-DDL6W7JS.js";
 import "../../../../chunk-TZ633UZA.js";
-import "../../../../chunk-TIQXDPIX.js";
+import "../../../../chunk-RIJGMRJK.js";
 import "../../../../chunk-SNCSGLJ6.js";
 import "../../../../chunk-DSHM7VN6.js";
 import "../../../../chunk-3UIDKLML.js";
@@ -39,6 +39,7 @@ import "../../../../chunk-YZHX2HTC.js";
 import "../../../../chunk-6IWO7CM2.js";
 import "../../../../chunk-TYJR4GOF.js";
 import "../../../../chunk-HPK33ACY.js";
+import "../../../../chunk-7ZPUN7TV.js";
 import "../../../../chunk-2GG5W6LR.js";
 import "../../../../chunk-532XOWZ5.js";
 import "../../../../chunk-M47ZOUGF.js";

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

@@ -1,6 +1,6 @@
 import {
   LazyImage
-} from "../../../../chunk-QWFAEUFV.js";
+} from "../../../../chunk-EO6LCGGQ.js";
 import "../../../../chunk-2TSGRQ2J.js";
 import "../../../../chunk-724ZONOL.js";
 import "../../../../chunk-BEGTLELZ.js";
@@ -8,6 +8,12 @@ import "../../../../chunk-E2QIKJX2.js";
 import "../../../../chunk-EMPVMZAB.js";
 import "../../../../chunk-7WDPC46N.js";
 import "../../../../chunk-TYJR4GOF.js";
+import "../../../../chunk-M47ZOUGF.js";
+import "../../../../chunk-7FDU3FIN.js";
+import "../../../../chunk-EPEJMTCQ.js";
+import "../../../../chunk-GDN2LUTZ.js";
+import "../../../../chunk-O6MJWHU5.js";
+import "../../../../chunk-26X4CZVR.js";
 import "../../../../chunk-FQ6UW7IY.js";
 import "../../../../chunk-6JAIFIPW.js";
 import "../../../../chunk-N3GAFIXG.js";

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

@@ -91,7 +91,7 @@ import "../../../chunk-S5UY5U73.js";
 import "../../../chunk-5ZFO7ROE.js";
 import {
   LazyImage
-} from "../../../chunk-QWFAEUFV.js";
+} from "../../../chunk-EO6LCGGQ.js";
 import "../../../chunk-2TSGRQ2J.js";
 import "../../../chunk-724ZONOL.js";
 import "../../../chunk-UM35GGCS.js";

package/dist/_internal/components/form/Checkbox/Checkbox.js

@@ -1,10 +1,12 @@
 import {
   Checkbox
-} from "../../../../chunk-FOM7OMJR.js";
+} from "../../../../chunk-DDL6W7JS.js";
 import "../../../../chunk-TZ633UZA.js";
-import "../../../../chunk-TIQXDPIX.js";
+import "../../../../chunk-RIJGMRJK.js";
 import "../../../../chunk-TYJR4GOF.js";
 import "../../../../chunk-HPK33ACY.js";
+import "../../../../chunk-7ZPUN7TV.js";
+import "../../../../chunk-FZXKH2ZT.js";
 import "../../../../chunk-6JAIFIPW.js";
 import "../../../../chunk-N3GAFIXG.js";
 import "../../../../chunk-YKCAJ2TN.js";

package/dist/_internal/components/form/Checkbox/Checkbox.metrics.js

@@ -11,8 +11,11 @@ import {
   CHECKBOX_TRANSITION_MS,
   CHECKBOX_VARIANT,
   effectInk,
-  glyphSize
-} from "../../../../chunk-TIQXDPIX.js";
+  glyphSize,
+  resolveCheckboxSize
+} from "../../../../chunk-RIJGMRJK.js";
+import "../../../../chunk-7ZPUN7TV.js";
+import "../../../../chunk-FZXKH2ZT.js";
 import "../../../../chunk-6JAIFIPW.js";
 import "../../../../chunk-N3GAFIXG.js";
 import "../../../../chunk-PZ5AY32C.js";
@@ -29,6 +32,7 @@ export {
   CHECKBOX_TRANSITION_MS,
   CHECKBOX_VARIANT,
   effectInk,
-  glyphSize
+  glyphSize,
+  resolveCheckboxSize
 };
 //# sourceMappingURL=Checkbox.metrics.js.map

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

@@ -185,9 +185,9 @@ import "../../../chunk-SZS7VZJN.js";
 import "../../../chunk-SJRTT3PA.js";
 import {
   Checkbox
-} from "../../../chunk-FOM7OMJR.js";
+} from "../../../chunk-DDL6W7JS.js";
 import "../../../chunk-TZ633UZA.js";
-import "../../../chunk-TIQXDPIX.js";
+import "../../../chunk-RIJGMRJK.js";
 import "../../../chunk-FDMQ7H22.js";
 import "../../../chunk-QYKDY4EI.js";
 import {

package/dist/_internal/components/index.js

@@ -505,7 +505,7 @@ import "../../chunk-S5UY5U73.js";
 import "../../chunk-5ZFO7ROE.js";
 import {
   LazyImage
-} from "../../chunk-QWFAEUFV.js";
+} from "../../chunk-EO6LCGGQ.js";
 import "../../chunk-2TSGRQ2J.js";
 import "../../chunk-724ZONOL.js";
 import "../../chunk-UM35GGCS.js";
@@ -613,9 +613,9 @@ import "../../chunk-SZS7VZJN.js";
 import "../../chunk-SJRTT3PA.js";
 import {
   Checkbox
-} from "../../chunk-FOM7OMJR.js";
+} from "../../chunk-DDL6W7JS.js";
 import "../../chunk-TZ633UZA.js";
-import "../../chunk-TIQXDPIX.js";
+import "../../chunk-RIJGMRJK.js";
 import "../../chunk-FDMQ7H22.js";
 import "../../chunk-QYKDY4EI.js";
 import {

package/dist/{chunk-B2ZITMYG.js → chunk-26QYVCDK.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-KHG57NAE.js";
 import {
   Checkbox
-} from "./chunk-FOM7OMJR.js";
+} from "./chunk-DDL6W7JS.js";
 import {
   default as default2
 } from "./chunk-6DPAWXZ3.js";
@@ -134,4 +134,4 @@ export {
   SelectSlot,
   DiscloseSlot
 };
-//# sourceMappingURL=chunk-B2ZITMYG.js.map
+//# sourceMappingURL=chunk-26QYVCDK.js.map

package/dist/{chunk-CEJTGG6J.js → chunk-CIBTYBBN.js}

@@ -17,7 +17,7 @@ import {
 } from "./chunk-KHG57NAE.js";
 import {
   Checkbox
-} from "./chunk-FOM7OMJR.js";
+} from "./chunk-DDL6W7JS.js";
 import {
   default as default2
 } from "./chunk-6DPAWXZ3.js";
@@ -268,4 +268,4 @@ function BaseCard(props) {
 export {
   BaseCard
 };
-//# sourceMappingURL=chunk-CEJTGG6J.js.map
+//# sourceMappingURL=chunk-CIBTYBBN.js.map

package/dist/{chunk-FOM7OMJR.js → chunk-DDL6W7JS.js}

@@ -11,8 +11,9 @@ import {
   CHECKBOX_SPINNER,
   CHECKBOX_TRANSITION_MS,
   CHECKBOX_VARIANT,
-  effectInk
-} from "./chunk-TIQXDPIX.js";
+  effectInk,
+  resolveCheckboxSize
+} from "./chunk-RIJGMRJK.js";
 import {
   splitTestId
 } from "./chunk-TYJR4GOF.js";
@@ -116,6 +117,7 @@ var Checkbox = React.forwardRef(
       glow: glow2,
       pulse: pulse2,
       disabled,
+      size,
       ...others
     } = resolveCheckboxProps(rawProps);
     const theme = useTheme();
@@ -132,6 +134,7 @@ var Checkbox = React.forwardRef(
           glow: glow2,
           pulse: pulse2,
           disabled: isDisabled,
+          size: resolveCheckboxSize(size),
           "data-testid": dataTestId || "checkbox",
           ...props
         }
@@ -180,4 +183,4 @@ Checkbox.displayName = "Checkbox";
 export {
   Checkbox
 };
-//# sourceMappingURL=chunk-FOM7OMJR.js.map
+//# sourceMappingURL=chunk-DDL6W7JS.js.map

package/dist/chunk-DDL6W7JS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Checkbox/Checkbox.tsx"],"sourcesContent":["import MuiCheckbox from '@mui/material/Checkbox/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport FormControlLabel from '@mui/material/FormControlLabel/index.js';\nimport FormHelperText from '@mui/material/FormHelperText/index.js';\nimport { alpha, keyframes, styled, useTheme } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { makeTestId, resolveCheckboxProps } from './Checkbox.helpers';\nimport {\n  CHECKBOX_GLOW,\n  CHECKBOX_HELPER,\n  CHECKBOX_HOVER_ALPHA,\n  CHECKBOX_LABEL,\n  CHECKBOX_PULSE,\n  CHECKBOX_SPINNER,\n  CHECKBOX_TRANSITION_MS,\n  CHECKBOX_VARIANT,\n  effectInk,\n  resolveCheckboxSize,\n} from './Checkbox.metrics';\nimport type { CheckboxProps } from './Checkbox.types';\nimport { splitTestId } from '../../../platform/test-id';\nimport { rem, sxRem } from '../../../tokens/relative';\n\nconst pulse = (theme: Theme) => keyframes`\n  0% {\n    box-shadow: 0 0 0 0 ${effectInk(CHECKBOX_PULSE.alpha)};\n  }\n  70% {\n    box-shadow: 0 0 0 ${rem(theme, CHECKBOX_PULSE.spread)} ${effectInk(0)};\n  }\n  100% {\n    box-shadow: 0 0 0 0 ${effectInk(0)};\n  }\n`;\n\nconst glow = (theme: Theme) => keyframes`\n  0%, 100% {\n    box-shadow: 0 0 ${rem(theme, CHECKBOX_GLOW.blur.from)} ${effectInk(CHECKBOX_GLOW.alpha.from)};\n  }\n  50% {\n    box-shadow: 0 0 ${rem(theme, CHECKBOX_GLOW.blur.to)} ${effectInk(CHECKBOX_GLOW.alpha.to)};\n  }\n`;\n\n/** A variant's corner: a design-px number through the type scale, a percentage as it is. */\nconst cornerOf = (theme: Theme, radius: number | string | undefined): string | undefined =>\n  typeof radius === 'number' ? rem(theme, radius) : radius;\n\nconst StyledCheckbox = styled(MuiCheckbox, {\n  shouldForwardProp: (prop) => !['customVariant', 'ripple', 'glow', 'pulse'].includes(prop as string),\n})<{ \n  customVariant?: CheckboxProps['variant'];\n  ripple?: boolean;\n  glow?: boolean;\n  pulse?: boolean;\n}>(\n  ({ theme, customVariant, ripple, glow: glowProp, pulse: pulseProp }) => ({\n    ...(customVariant === 'rounded' && {\n      '& .MuiSvgIcon-root': {\n        borderRadius: cornerOf(theme, CHECKBOX_VARIANT.rounded.radius),\n      },\n    }),\n    \n    ...(customVariant === 'toggle' && {\n      '& .MuiSvgIcon-root': {\n        borderRadius: cornerOf(theme, CHECKBOX_VARIANT.toggle.radius),\n        transform: `scale(${CHECKBOX_VARIANT.toggle.scale})`,\n      },\n    }),\n    \n    '&.MuiCheckbox-root': {\n      transition: `all ${CHECKBOX_TRANSITION_MS / 1000}s ease`,\n      ...(ripple === false && {\n        '& .MuiTouchRipple-root': {\n          display: 'none',\n        },\n      }),\n      ...(glowProp && {\n        animation: `${glow(theme)} ${CHECKBOX_GLOW.ms / 1000}s ease-in-out infinite`,\n      }),\n      ...(pulseProp && {\n        animation: `${pulse(theme)} ${CHECKBOX_PULSE.ms / 1000}s infinite`,\n      }),\n      '&:hover': {\n        backgroundColor: alpha(theme.palette.primary.main, CHECKBOX_HOVER_ALPHA),\n      },\n    },\n    \n    '&.Mui-checked': {\n      color: theme.palette.primary.main,\n    },\n    \n    '&.MuiCheckbox-indeterminate': {\n      color: theme.palette.primary.main,\n    },\n  })\n);\n\nconst StyledFormControlLabel = styled(FormControlLabel, {\n  shouldForwardProp: (prop) => prop !== 'error',\n})<{ error?: boolean }>(\n  ({ theme, error }) => ({\n    marginLeft: rem(theme, CHECKBOX_LABEL.marginLeft),\n    '& .MuiFormControlLabel-label': {\n      color: error ? theme.palette.error.main : theme.palette.text.primary,\n      fontSize: rem(theme, CHECKBOX_LABEL.fontSize),\n    },\n  })\n);\n\nconst StyledFormHelperText = styled(FormHelperText)(({ theme }) => ({\n  marginLeft: theme.spacing(CHECKBOX_HELPER.marginLeftUnits),\n  marginTop: theme.spacing(CHECKBOX_HELPER.marginTopUnits),\n}));\n\nexport const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(\n  (rawProps, ref) => {\n    const {\n      variant,\n      label,\n      error,\n      helperText,\n      loading,\n      ripple,\n      glow,\n      pulse,\n      disabled,\n      size,\n      ...others\n    } = resolveCheckboxProps(rawProps);\n    const theme = useTheme();\n    const isDisabled = disabled || loading;\n    const { testId: dataTestId, rest: props } = splitTestId(others);\n    const testId = makeTestId(dataTestId);\n\n    const checkbox = (\n      <div style={{ position: 'relative', display: 'inline-flex' }}>\n        <StyledCheckbox\n          ref={ref}\n          customVariant={variant}\n          ripple={ripple}\n          glow={glow}\n          pulse={pulse}\n          disabled={isDisabled}\n          size={resolveCheckboxSize(size)}\n          data-testid={dataTestId || 'checkbox'}\n          {...props}\n        />\n        {loading && (\n          <CircularProgress\n            size={rem(theme, CHECKBOX_SPINNER.size)}\n            sx={{\n              position: 'absolute',\n              top: '50%',\n              left: '50%',\n              marginTop: sxRem(CHECKBOX_SPINNER.offset),\n              marginLeft: sxRem(CHECKBOX_SPINNER.offset),\n              color: 'primary.main',\n            }}\n          />\n        )}\n      </div>\n    );\n    \n    if (label) {\n      return (\n        <div data-testid={testId('container')}>\n          <StyledFormControlLabel\n            control={checkbox}\n            label={label}\n            error={error}\n            disabled={isDisabled}\n          />\n          {helperText && (\n            <StyledFormHelperText \n              error={error}\n              data-testid={testId('helper')}\n            >\n              {helperText}\n            </StyledFormHelperText>\n          )}\n        </div>\n      );\n    }\n    \n    return checkbox;\n  }\n);\n\nCheckbox.displayName = 'Checkbox';"],"mappings":"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","names":["glow","pulse"]}

package/dist/{chunk-QWFAEUFV.js → chunk-EO6LCGGQ.js}

@@ -6,6 +6,9 @@ import {
 import {
   Skeleton
 } from "./chunk-BEGTLELZ.js";
+import {
+  fieldHeight
+} from "./chunk-M47ZOUGF.js";
 import {
   sheen
 } from "./chunk-FQ6UW7IY.js";
@@ -61,14 +64,41 @@ var sxLength = (theme, value) => isFraction(value) ? `${value * 100}%` : styleLe
 var innerLength = (theme, value) => isFraction(value) ? "100%" : styleLength(theme, value);
 var orDefault = (value, fallback) => value === void 0 || value === "" ? fallback : value;
 var emptyToUnset = (value) => value === "" ? void 0 : value;
+var isRelativeLength = (value) => isFraction(value) || typeof value === "string" && value.trim().endsWith("%");
+var placeholderAxis = (theme, width, height, resolve) => {
+  const w = emptyToUnset(width);
+  const h = height === "auto" ? void 0 : emptyToUnset(height);
+  if (w === void 0 && h === void 0) {
+    const field = fieldHeight(theme);
+    return { width: field, height: field };
+  }
+  if (h === void 0) {
+    if (isRelativeLength(w)) return { width: resolve(theme, w), height: "auto", aspectRatio: "1 / 1" };
+    const resolved = resolve(theme, w);
+    return { width: resolved, height: resolved };
+  }
+  if (w === void 0) {
+    if (isRelativeLength(h)) return { width: "auto", height: resolve(theme, h), aspectRatio: "1 / 1" };
+    const resolved = resolve(theme, h);
+    return { width: resolved, height: resolved };
+  }
+  return { width: resolve(theme, w), height: resolve(theme, h) };
+};
+var containerAxisFor = (theme, props, hasError) => {
+  const { width, height, fallback } = props;
+  const needsPlaceholderSize = hasError && Boolean(fallback) && typeof fallback !== "string";
+  return needsPlaceholderSize ? placeholderAxis(theme, width, height, sxLength) : { width: sxLength(theme, orDefault(width, "auto")), height: sxLength(theme, orDefault(height, "auto")) };
+};
 var SkeletonIndicator = ({ props }) => {
   const theme = useTheme();
+  const { width, height, aspectRatio } = placeholderAxis(theme, props.width, props.height, innerLength);
   return /* @__PURE__ */ jsx(
     Skeleton,
     {
       variant: props.skeletonProps.variant ?? "rectangular",
-      width: innerLength(theme, orDefault(props.width, "100%")),
-      height: innerLength(theme, orDefault(props.height, "auto")),
+      width,
+      height,
+      style: aspectRatio ? { aspectRatio } : void 0,
       animation: props.skeletonProps.animation ?? "pulse",
       intensity: props.skeletonProps.intensity,
       borderRadius: styleLength(theme, props.borderRadius),
@@ -148,17 +178,9 @@ var ErrorFallback = ({ props, metrics }) => {
     FallbackContainer,
     {
       sx: {
-        // FUT-2774 #4 (see `emptyToUnset`). Does NOT change the confirmed
-        // height collapse — `ImageContainer`'s own height was already `'auto'`
-        // either way; see `LazyImage.test.stories.tsx` for that separate,
-        // unresolved defect. `orDefault(height, 'auto')` is safe to share with
-        // `SkeletonIndicator` (unlike width's `'100%'`, deliberately NOT
-        // shared — see `emptyToUnset`): a PERCENTAGE height against an
-        // auto-height containing block computes to `auto` by spec regardless,
-        // so whether `sx.height` is omitted (falling through to
-        // `FallbackContainer`'s own `height: '100%'`) or set to the literal
-        // `'auto'` here, an unset-height container gives the same result
-        // either way — nothing for this fallback to protect against.
+        // FUT-2774 #4 (see `emptyToUnset`); the collapse is fixed by
+        // `LazyImage` giving `ImageContainer` ITSELF a size now
+        // (`containerAxisFor`) — this `position: absolute` box just fills it.
         width: innerLength(theme, emptyToUnset(width)),
         height: innerLength(theme, orDefault(height, "auto")),
         borderRadius: styleLength(theme, borderRadius)
@@ -197,14 +219,16 @@ var LazyImage = React.memo(function LazyImage2(rawProps) {
     objectPosition: props.objectPosition,
     borderRadius: styleLength(theme, borderRadius)
   };
+  const containerAxis = containerAxisFor(theme, props, state.hasError);
   return /* @__PURE__ */ jsxs(
     ImageContainer,
     {
       ref: containerRef,
       className: props.className,
       sx: {
-        width: sxLength(theme, orDefault(width, "auto")),
-        height: sxLength(theme, orDefault(height, "auto")),
+        width: containerAxis.width,
+        height: containerAxis.height,
+        aspectRatio: containerAxis.aspectRatio,
         // The same px length the image gets (`metrics`): in `sx` a bare number
         // would be a multiple of `shape.borderRadius`, and this box clips (FUT-2656).
         borderRadius: metrics.borderRadius
@@ -250,4 +274,4 @@ LazyImage.displayName = "LazyImage";
 export {
   LazyImage
 };
-//# sourceMappingURL=chunk-QWFAEUFV.js.map
+//# sourceMappingURL=chunk-EO6LCGGQ.js.map

package/dist/chunk-EO6LCGGQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/LazyImage/LazyImage.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport { styled, useTheme, type Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\nimport { Skeleton } from '../../layout/Skeleton';\nimport type { ResolvedLazyImageProps } from './LazyImage.hooks';\nimport { imgPassThrough, resolveLazyImageProps, useLazyImage } from './LazyImage.hooks';\nimport type { LazyImageProps } from './LazyImage.types';\nimport { sheen } from '../../../tokens/ink';\nimport { rem } from '../../../tokens/relative';\nimport { fieldHeight } from '../../../tokens/field-height';\n\nconst ImageContainer = styled(Box)(() => ({\n  position: 'relative',\n  display: 'inline-block',\n  overflow: 'hidden',\n}));\n\nconst StyledImage = styled('img')<{\n  fadeIn?: boolean;\n  fadeInDuration?: number;\n  isLoaded?: boolean;\n}>(({ fadeIn, fadeInDuration = 300, isLoaded }) => ({\n  display: 'block',\n  maxWidth: '100%',\n  height: 'auto',\n  opacity: fadeIn ? (isLoaded ? 1 : 0) : 1,\n  transition: fadeIn ? `opacity ${fadeInDuration}ms ease-in-out` : 'none',\n}));\n\nconst SpinnerOverlay = styled(Box)(({ theme }) => ({\n  position: 'absolute',\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  backgroundColor: sheen(theme, 0.8),\n  borderRadius: '50%',\n  padding: theme.spacing(1),\n}));\n\nconst FallbackContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  backgroundColor: theme.palette.action.disabledBackground,\n  color: theme.palette.text.secondary,\n  width: '100%',\n  height: '100%',\n  position: 'absolute',\n  top: 0,\n  left: 0,\n}));\n\ntype Length = number | string | undefined;\n\n/** A length prop as React `style` and MUI's `Skeleton` read it: a number is design px. */\nconst styleLength = (theme: Theme, value: Length): string | undefined =>\n  typeof value === 'number' ? rem(theme, value) : value;\n\n/**\n * A width or height above 0 and up to 1 is a fraction of the container's parent, as in `sx`.\n * A negative number is no fraction: it stays a (negative, so invalid) length.\n */\nconst isFraction = (value: Length): value is number =>\n  typeof value === 'number' && value > 0 && value <= 1;\n\n/**\n * A length prop as `sx` reads it on a width or height: a number of 1 or less is\n * a fraction of the parent, and that stays so; any other number is design px.\n */\nconst sxLength = (theme: Theme, value: Length): string | undefined =>\n  isFraction(value) ? `${value * 100}%` : styleLength(theme, value);\n\n/**\n * A width or height for what is drawn inside the container. The container alone\n * takes a fraction, so everything in it fills it: a percentage here is measured\n * against the container and would stack (FUT-2666). Otherwise the same as `styleLength`.\n */\nconst innerLength = (theme: Theme, value: Length): string | undefined =>\n  isFraction(value) ? '100%' : styleLength(theme, value);\n\n/**\n * A width or height with its default. Only an unset or empty size takes it: `0`\n * is a size, which `||` read as unset (FUT-2669), and `sx` reads `''` as `0%`.\n */\nconst orDefault = (value: Length, fallback: number | string): number | string =>\n  value === undefined || value === '' ? fallback : value;\n\n/**\n * A width/height as `metrics` and the `ReactNode` `ErrorFallback` read it\n * (FUT-2774 #4): an explicit empty string is normalized to \"as if unset\"\n * rather than mapped to a component-wide default. Unlike `SkeletonIndicator`\n * (a content-less box with nothing else to size by, hence its own deliberate\n * `'100%'`/`'auto'` fallback), these draw the real image or a `ReactNode`\n * fallback — both have their own intrinsic size, so leaving an unset width\n * unset lets it size naturally (`brand-link.tsx`'s logo relies on exactly\n * this: an unset width capped by its own `sx.maxWidth`).\n */\nconst emptyToUnset = (value: Length): Length => (value === '' ? undefined : value);\n\n/** A length, already resolved to CSS — {@link innerLength} or {@link sxLength}. */\ntype LengthResolver = (theme: Theme, value: Length) => string | undefined;\n\n/**\n * Whether a length is a PERCENTAGE (a numeric {@link isFraction} or a `%`\n * string) — copying it onto the OTHER axis re-creates this ticket's own\n * collapse either way (width%/height% measure different boxes; Chromium-confirmed).\n */\nconst isRelativeLength = (value: Length): boolean =>\n  isFraction(value) || (typeof value === 'string' && value.trim().endsWith('%'));\n\n/** A resolved axis pair; `aspectRatio` is set when the OTHER axis comes from CSS, not a length. */\ntype AxisPair = { width: string | undefined; height: string | undefined; aspectRatio?: string };\n\n/**\n * The unset-axis DEFAULT for a PLACEHOLDER only (skeleton, `ReactNode`\n * fallback) — never the real image/`metrics` (an unset width sizes it\n * naturally; `brand-link.tsx`'s logo relies on that). Decision (FUT-2805): an\n * unset axis borrows the set one (a square); neither set, both take the\n * theme's field height; both set stays unchanged. `resolve` is `innerLength`\n * (skeleton) or `sxLength` (the container). A RELATIVE single axis\n * ({@link isRelativeLength}) cannot borrow the same way: it keeps its value\n * and squares up via `aspectRatio: '1 / 1'`, the other axis explicitly\n * `'auto'` (never `undefined` — `Skeleton`'s own default, a fixed `40`,\n * would silently win otherwise).\n */\nconst placeholderAxis = (theme: Theme, width: Length, height: Length, resolve: LengthResolver): AxisPair => {\n  const w = emptyToUnset(width);\n  // `height` always arrives defaulted to the literal `'auto'` when unset\n  // (`LAZY_IMAGE_DEFAULTS`) — indistinguishable from an explicit `\"auto\"`,\n  // and no distinction is needed: both mean \"no fixed height requested\".\n  const h = height === 'auto' ? undefined : emptyToUnset(height);\n\n  if (w === undefined && h === undefined) {\n    const field = fieldHeight(theme);\n    return { width: field, height: field };\n  }\n  if (h === undefined) {\n    if (isRelativeLength(w)) return { width: resolve(theme, w), height: 'auto', aspectRatio: '1 / 1' };\n    const resolved = resolve(theme, w);\n    return { width: resolved, height: resolved };\n  }\n  if (w === undefined) {\n    if (isRelativeLength(h)) return { width: 'auto', height: resolve(theme, h), aspectRatio: '1 / 1' };\n    const resolved = resolve(theme, h);\n    return { width: resolved, height: resolved };\n  }\n  return { width: resolve(theme, w), height: resolve(theme, h) };\n};\n\n/**\n * `ImageContainer`'s own axis: the ordinary `orDefault(...,'auto')` in every\n * state, except a ReactNode `fallback` while showing — the one case where\n * the container is the only thing that CAN fix its own collapse\n * (`FallbackContainer` is `position: absolute`, never feeding shrink-to-fit).\n */\nconst containerAxisFor = (theme: Theme, props: ResolvedLazyImageProps, hasError: boolean): AxisPair => {\n  const { width, height, fallback } = props;\n  const needsPlaceholderSize = hasError && Boolean(fallback) && typeof fallback !== 'string';\n  return needsPlaceholderSize\n    ? placeholderAxis(theme, width, height, sxLength)\n    : { width: sxLength(theme, orDefault(width, 'auto')), height: sxLength(theme, orDefault(height, 'auto')) };\n};\n\n/** The box the image occupies, as CSS, shared by the real image and every stand-in for it. */\ninterface BoxMetrics {\n  width?: string;\n  height?: string;\n  objectFit: NonNullable<LazyImageProps['objectFit']>;\n  objectPosition: string;\n  borderRadius?: string;\n}\n\ninterface IndicatorProps {\n  props: ResolvedLazyImageProps;\n  metrics: BoxMetrics;\n}\n\nconst SkeletonIndicator: React.FC<IndicatorProps> = ({ props }) => {\n  const theme = useTheme();\n  // FUT-2805: replaces the old literal `'100%'`/`'auto'` fallbacks, which\n  // collapsed to 0 in a shrink-to-fit `ImageContainer` with nothing to\n  // resolve against.\n  const { width, height, aspectRatio } = placeholderAxis(theme, props.width, props.height, innerLength);\n  return (\n    <Skeleton\n      // FUT-2774 #5: `skeletonProps.variant` was typed but never read — the\n      // variant was hard-coded regardless of what a caller passed.\n      variant={props.skeletonProps.variant ?? 'rectangular'}\n      width={width}\n      height={height}\n      style={aspectRatio ? { aspectRatio } : undefined}\n      // FUT-2774 #5: `||` reads a caller's `false` the same as \"unset\", so\n      // `skeletonProps.animation={false}` could never turn the animation off.\n      animation={props.skeletonProps.animation ?? 'pulse'}\n      intensity={props.skeletonProps.intensity}\n      borderRadius={styleLength(theme, props.borderRadius)}\n      data-testid={`${props['data-testid']}-skeleton`}\n    />\n  );\n};\n\nconst SpinnerIndicator: React.FC<IndicatorProps> = ({ props }) => {\n  const theme = useTheme();\n  const { spinnerProps } = props;\n\n  return (\n    <SpinnerOverlay>\n      <CircularProgress\n        // FUT-2774 #5: `||` read `spinnerProps.size`/`thickness` of `0` the\n        // same as unset — the same class of bug FUT-2669 fixed for\n        // `width`/`height`, missed here.\n        size={styleLength(theme, spinnerProps.size ?? 40)}\n        thickness={spinnerProps.thickness ?? 4}\n        sx={{ color: spinnerProps.color || theme.palette.primary.main }}\n        data-testid={`${props['data-testid']}-spinner`}\n      />\n    </SpinnerOverlay>\n  );\n};\n\n/**\n * The placeholder sits in the box's flow and gives the box its size: the box's\n * own when one is set, the placeholder's when not. The real image is drawn over\n * it (`OVER_PLACEHOLDER`) until it has faded in. Its load and error are not the\n * image's, so neither reaches the caller; a failing one just retires.\n */\nconst PlaceholderIndicator: React.FC<IndicatorProps & { onError: () => void }> = ({\n  props,\n  metrics,\n  onError,\n}) => {\n  if (!props.placeholder) return null;\n\n  return (\n    <StyledImage\n      src={props.placeholder}\n      alt={`${props.alt} (loading)`}\n      style={metrics}\n      decoding={props.decoding}\n      loading={props.lazy ? 'lazy' : props.loading}\n      onError={onError}\n      data-testid={`${props['data-testid']}-placeholder`}\n    />\n  );\n};\n\nconst LoadingIndicator: React.FC<\n  IndicatorProps & { kind: NonNullable<LazyImageProps['loadingState']>; onPlaceholderError: () => void }\n> = ({ kind, onPlaceholderError, ...rest }) => {\n  switch (kind) {\n    case 'skeleton':\n      return <SkeletonIndicator {...rest} />;\n    case 'spinner':\n      return <SpinnerIndicator {...rest} />;\n    case 'placeholder':\n      return <PlaceholderIndicator {...rest} onError={onPlaceholderError} />;\n    default:\n      return null;\n  }\n};\n\n/**\n * The real image while the placeholder is up: laid over it and cropped by\n * `objectFit`, so the box never grows to hold both. It takes the flow back\n * when the placeholder goes.\n */\nconst OVER_PLACEHOLDER: React.CSSProperties = {\n  position: 'absolute',\n  inset: 0,\n  width: '100%',\n  height: '100%',\n};\n\nconst ErrorFallback: React.FC<IndicatorProps> = ({ props, metrics }) => {\n  const theme = useTheme();\n  const { alt, fallback, width, height, borderRadius } = props;\n  const testId = props['data-testid'];\n\n  if (!fallback) return null;\n\n  if (typeof fallback === 'string') {\n    return (\n      <StyledImage\n        src={fallback}\n        alt={`${alt} (fallback)`}\n        style={metrics}\n        fadeIn={false}\n        isLoaded={true}\n        data-testid={`${testId}-fallback`}\n      />\n    );\n  }\n\n  return (\n    <FallbackContainer\n      sx={{\n        // FUT-2774 #4 (see `emptyToUnset`); the collapse is fixed by\n        // `LazyImage` giving `ImageContainer` ITSELF a size now\n        // (`containerAxisFor`) — this `position: absolute` box just fills it.\n        width: innerLength(theme, emptyToUnset(width)),\n        height: innerLength(theme, orDefault(height, 'auto')),\n        borderRadius: styleLength(theme, borderRadius),\n      }}\n      data-testid={`${testId}-fallback`}\n    >\n      {fallback}\n    </FallbackContainer>\n  );\n};\n\n/**\n * LazyImage component with enhanced features for optimized image loading\n * Supports lazy loading, placeholders, error handling, and various loading states\n */\nexport const LazyImage = React.memo<LazyImageProps>(function LazyImage(rawProps) {\n  const props = resolveLazyImageProps(rawProps);\n  const theme = useTheme();\n  const {\n    state,\n    containerRef,\n    effectiveLoadingState,\n    handleImageLoad,\n    handleImageError,\n    handlePlaceholderError,\n    showImage,\n    showLoading,\n    showPlaceholder,\n  } = useLazyImage(props);\n\n  const { width, height, borderRadius, alt } = props;\n  const testId = props['data-testid'];\n  const metrics: BoxMetrics = {\n    // FUT-2774 #4 (see `emptyToUnset`): `metrics` also sizes the REAL `<img>`,\n    // where an unset width means \"the image's own intrinsic size\" —\n    // `brand-link.tsx`'s logo relies on exactly that. `height`'s `'auto'`\n    // fallback has no such live case to protect: a percentage height against\n    // an auto-height containing block computes to `auto` regardless, so\n    // sharing `SkeletonIndicator`'s fallback changes nothing observable.\n    width: innerLength(theme, emptyToUnset(width)),\n    height: innerLength(theme, orDefault(height, 'auto')),\n    objectFit: props.objectFit,\n    objectPosition: props.objectPosition,\n    borderRadius: styleLength(theme, borderRadius),\n  };\n\n  const containerAxis = containerAxisFor(theme, props, state.hasError);\n\n  return (\n    <ImageContainer\n      ref={containerRef}\n      className={props.className}\n      sx={{\n        width: containerAxis.width,\n        height: containerAxis.height,\n        aspectRatio: containerAxis.aspectRatio,\n        // The same px length the image gets (`metrics`): in `sx` a bare number\n        // would be a multiple of `shape.borderRadius`, and this box clips (FUT-2656).\n        borderRadius: metrics.borderRadius,\n      }}\n      data-testid={testId}\n    >\n      {showLoading && (\n        <LoadingIndicator\n          kind={effectiveLoadingState}\n          props={props}\n          metrics={metrics}\n          onPlaceholderError={handlePlaceholderError}\n        />\n      )}\n\n      {showImage && (\n        <StyledImage\n          src={state.currentSrc || undefined}\n          alt={alt}\n          onLoad={handleImageLoad}\n          onError={handleImageError}\n          fadeIn={props.fadeIn}\n          fadeInDuration={props.fadeInDuration}\n          isLoaded={!state.isLoading}\n          decoding={props.decoding}\n          loading={props.lazy ? 'lazy' : props.loading}\n          style={{ ...metrics, ...props.sx, ...(showPlaceholder && OVER_PLACEHOLDER) }}\n          aria-label={props['aria-label'] || alt}\n          aria-describedby={props['aria-describedby']}\n          role={props.role}\n          data-testid={`${testId}-img`}\n          {...imgPassThrough(props)}\n        />\n      )}\n\n      {state.hasError && <ErrorFallback props={props} metrics={metrics} />}\n    </ImageContainer>\n  );\n});\n\nLazyImage.displayName = 'LazyImage';\n"],"mappings":"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","names":["LazyImage"]}

package/dist/{chunk-KMC6WP66.js → chunk-KPZ53JY6.js}

@@ -2,7 +2,7 @@ import {
   DiscloseSlot,
   DragSlot,
   SelectSlot
-} from "./chunk-B2ZITMYG.js";
+} from "./chunk-26QYVCDK.js";
 import {
   actionProps,
   metaShape,
@@ -179,4 +179,4 @@ function BaseListCard(props) {
 export {
   BaseListCard
 };
-//# sourceMappingURL=chunk-KMC6WP66.js.map
+//# sourceMappingURL=chunk-KPZ53JY6.js.map

package/dist/{chunk-TIQXDPIX.js → chunk-RIJGMRJK.js}

@@ -1,3 +1,6 @@
+import {
+  muiSize
+} from "./chunk-7ZPUN7TV.js";
 import {
   alpha
 } from "./chunk-6JAIFIPW.js";
@@ -9,6 +12,11 @@ import {
 var CHECKBOX_PADDING = 9;
 var CHECKBOX_GLYPH_SIZES = { small: 20, medium: 24, large: 35 };
 var glyphSize = (size) => CHECKBOX_GLYPH_SIZES[size ?? "medium"] ?? CHECKBOX_GLYPH_SIZES.medium;
+var resolveCheckboxSize = (size) => {
+  if (size === void 0) return void 0;
+  if (size === "small" || size === "medium" || size === "large") return size;
+  return muiSize(size);
+};
 var CHECKBOX_GLYPH = {
   checked: "CheckBox",
   unchecked: "CheckBoxOutlineBlank",
@@ -32,6 +40,7 @@ export {
   CHECKBOX_PADDING,
   CHECKBOX_GLYPH_SIZES,
   glyphSize,
+  resolveCheckboxSize,
   CHECKBOX_GLYPH,
   CHECKBOX_VARIANT,
   CHECKBOX_HOVER_ALPHA,
@@ -43,4 +52,4 @@ export {
   CHECKBOX_LABEL,
   CHECKBOX_HELPER
 };
-//# sourceMappingURL=chunk-TIQXDPIX.js.map
+//# sourceMappingURL=chunk-RIJGMRJK.js.map

package/dist/chunk-RIJGMRJK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/Checkbox/Checkbox.metrics.ts"],"sourcesContent":["import { alpha } from '../../../tokens/color';\nimport { EFFECT_GLOW } from '../../../tokens/ink.core';\nimport { muiSize } from '../../../tokens/vocabulary';\nimport type { SizeValue } from '../../../tokens/vocabulary';\n\nimport type { CheckboxSize, CheckboxVariant } from './Checkbox.base';\n\nexport type { CheckboxSize } from './Checkbox.base';\n\n/**\n * THE NUMBERS BOTH `Checkbox` RENDERERS DRAW WITH.\n *\n * `Checkbox.tsx` (web, emotion over MUI's `Checkbox`) and\n * `Checkbox.native.tsx` (React Native) read this one table. As with the other\n * fields, some of it is what the web writes itself — the two variants' corner\n * treatment, the glow and pulse keyframes, the helper text's inset — and some\n * is what MUI supplies underneath: `SwitchBase`'s 9px padding, `SvgIcon`'s\n * three sizes, and the ink a box is drawn in.\n */\n\n/** MUI's `SwitchBase`: 9px of padding around the glyph, at every size. */\nexport const CHECKBOX_PADDING = 9;\n\n/**\n * `SvgIcon`'s own three steps. MUI passes the `size` prop straight to the\n * glyph. Typed against {@link CheckboxSize} (declared in `Checkbox.base.ts`,\n * the contract file, since it is part of the public prop type) rather than the\n * other way around, so a step added to one and not the other fails here.\n */\nexport const CHECKBOX_GLYPH_SIZES: Record<CheckboxSize, number> = { small: 20, medium: 24, large: 35 };\n\nexport const glyphSize = (size: CheckboxSize | undefined): number =>\n  CHECKBOX_GLYPH_SIZES[size ?? 'medium'] ?? CHECKBOX_GLYPH_SIZES.medium;\n\n/**\n * `size` at the MUI boundary.\n *\n * A `SizeValue` is translated via `muiSize()` — the pattern `Chip`/`Button`/\n * `Carousel` already follow. MUI's own deprecated word (see\n * {@link CheckboxSize}) is passed through UNCHANGED rather than re-derived,\n * so a caller who has not migrated renders at exactly the size it always has —\n * translating it through `muiSize()` too would not change any of the three\n * words' own geometry, but passing it through untouched is the one route that\n * cannot drift from what \"unchanged\" already means. `undefined` stays\n * `undefined`, so a caller who names no size keeps MUI's own default.\n */\nexport const resolveCheckboxSize = (\n  size: SizeValue | CheckboxSize | undefined,\n): CheckboxSize | undefined => {\n  if (size === undefined) return undefined;\n  if (size === 'small' || size === 'medium' || size === 'large') return size;\n  return muiSize(size);\n};\n\n/**\n * The three glyphs MUI draws, by state.\n *\n * `@12-apps/ui/icons` generates their paths from the same\n * `@mui/icons-material` package MUI's own `Checkbox` imports them from, so the\n * native box is the web box rather than a hand-drawn square.\n */\nexport const CHECKBOX_GLYPH = {\n  checked: 'CheckBox',\n  unchecked: 'CheckBoxOutlineBlank',\n  indeterminate: 'IndeterminateCheckBox',\n} as const;\n\n/**\n * The corner each variant gives the glyph's box.\n *\n * `rounded` is a circle and `toggle` a 12px radius at 1.2 scale — both applied\n * to the SVG's own box on the web, where they show only through what the box\n * clips. Native gives them the same radius and the same scale.\n */\nexport const CHECKBOX_VARIANT: Record<CheckboxVariant, { radius?: number | string; scale?: number }> = {\n  default: {},\n  rounded: { radius: '50%' },\n  toggle: { radius: 12, scale: 1.2 },\n};\n\n/** The wash a hovered box takes, and the 0.3s every state change runs over. */\nexport const CHECKBOX_HOVER_ALPHA = 0.1;\nexport const CHECKBOX_TRANSITION_MS = 300;\n\n/** `loading`: MUI's 20px `CircularProgress`, centred over the box. */\nexport const CHECKBOX_SPINNER = { size: 20, offset: -10 } as const;\n\n/**\n * `glow` and `pulse` are keyed to MUI's DEFAULT blue rather than the theme's\n * primary — `EFFECT_GLOW.muiBlue` (`tokens/ink.core`) — on both renderers.\n */\nexport const CHECKBOX_GLOW = { blur: { from: 5, to: 20 }, alpha: { from: 0.5, to: 0.8 }, ms: 2000 } as const;\nexport const CHECKBOX_PULSE = { spread: 10, alpha: 0.7, ms: 2000 } as const;\n\n/** MUI's default blue at an alpha, as the web's keyframes spell it. */\nexport const effectInk = (alphaValue: number): string => alpha(EFFECT_GLOW.muiBlue, alphaValue);\n\n/** `FormControlLabel`: flush left, its label at MUI's `body2` size. */\nexport const CHECKBOX_LABEL = { marginLeft: 0, fontSize: 14 } as const;\n\n/** `FormHelperText`: four spacing units in, half a unit down. */\nexport const CHECKBOX_HELPER = { marginLeftUnits: 4, marginTopUnits: 0.5, fontSize: 12, lineHeight: 1.66 } as const;\n"],"mappings":";;;;;;;;;;;AAqBO,IAAM,mBAAmB;AAQzB,IAAM,uBAAqD,EAAE,OAAO,IAAI,QAAQ,IAAI,OAAO,GAAG;AAE9F,IAAM,YAAY,CAAC,SACxB,qBAAqB,QAAQ,QAAQ,KAAK,qBAAqB;AAc1D,IAAM,sBAAsB,CACjC,SAC6B;AAC7B,MAAI,SAAS,OAAW,QAAO;AAC/B,MAAI,SAAS,WAAW,SAAS,YAAY,SAAS,QAAS,QAAO;AACtE,SAAO,QAAQ,IAAI;AACrB;AASO,IAAM,iBAAiB;AAAA,EAC5B,SAAS;AAAA,EACT,WAAW;AAAA,EACX,eAAe;AACjB;AASO,IAAM,mBAA0F;AAAA,EACrG,SAAS,CAAC;AAAA,EACV,SAAS,EAAE,QAAQ,MAAM;AAAA,EACzB,QAAQ,EAAE,QAAQ,IAAI,OAAO,IAAI;AACnC;AAGO,IAAM,uBAAuB;AAC7B,IAAM,yBAAyB;AAG/B,IAAM,mBAAmB,EAAE,MAAM,IAAI,QAAQ,IAAI;AAMjD,IAAM,gBAAgB,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,GAAG,OAAO,EAAE,MAAM,KAAK,IAAI,IAAI,GAAG,IAAI,IAAK;AAC3F,IAAM,iBAAiB,EAAE,QAAQ,IAAI,OAAO,KAAK,IAAI,IAAK;AAG1D,IAAM,YAAY,CAAC,eAA+B,MAAM,YAAY,SAAS,UAAU;AAGvF,IAAM,iBAAiB,EAAE,YAAY,GAAG,UAAU,GAAG;AAGrD,IAAM,kBAAkB,EAAE,iBAAiB,GAAG,gBAAgB,KAAK,UAAU,IAAI,YAAY,KAAK;","names":[]}

package/dist/data-display/DataViews.js

@@ -7,14 +7,14 @@ import {
 } from "../chunk-6B4UTB4O.js";
 import {
   BaseListCard
-} from "../chunk-KMC6WP66.js";
-import "../chunk-B2ZITMYG.js";
+} from "../chunk-KPZ53JY6.js";
+import "../chunk-26QYVCDK.js";
 import "../chunk-XLQYOBHP.js";
 import "../chunk-KRA75CKC.js";
 import "../chunk-2JCRNWHE.js";
 import {
   BaseCard
-} from "../chunk-CEJTGG6J.js";
+} from "../chunk-CIBTYBBN.js";
 import "../chunk-BYH5GPLT.js";
 import {
   DragContainerProvider,
@@ -129,9 +129,9 @@ import "../chunk-RIEV4VXF.js";
 import "../chunk-TNBJ4DK4.js";
 import "../chunk-SZS7VZJN.js";
 import "../chunk-SJRTT3PA.js";
-import "../chunk-FOM7OMJR.js";
+import "../chunk-DDL6W7JS.js";
 import "../chunk-TZ633UZA.js";
-import "../chunk-TIQXDPIX.js";
+import "../chunk-RIJGMRJK.js";
 import "../chunk-FDMQ7H22.js";
 import "../chunk-N5ZWC6CB.js";
 import "../chunk-WQ3KTELX.js";

package/dist/data-display/LazyImage.js

@@ -1,7 +1,7 @@
 import "../chunk-5ZFO7ROE.js";
 import {
   LazyImage
-} from "../chunk-QWFAEUFV.js";
+} from "../chunk-EO6LCGGQ.js";
 import "../chunk-2TSGRQ2J.js";
 import "../chunk-724ZONOL.js";
 import "../chunk-BEGTLELZ.js";
@@ -9,6 +9,12 @@ import "../chunk-E2QIKJX2.js";
 import "../chunk-EMPVMZAB.js";
 import "../chunk-7WDPC46N.js";
 import "../chunk-TYJR4GOF.js";
+import "../chunk-M47ZOUGF.js";
+import "../chunk-7FDU3FIN.js";
+import "../chunk-EPEJMTCQ.js";
+import "../chunk-GDN2LUTZ.js";
+import "../chunk-O6MJWHU5.js";
+import "../chunk-26X4CZVR.js";
 import "../chunk-FQ6UW7IY.js";
 import "../chunk-6JAIFIPW.js";
 import "../chunk-N3GAFIXG.js";

package/dist/form/Checkbox.js

@@ -1,11 +1,13 @@
 import "../chunk-SJRTT3PA.js";
 import {
   Checkbox
-} from "../chunk-FOM7OMJR.js";
+} from "../chunk-DDL6W7JS.js";
 import "../chunk-TZ633UZA.js";
-import "../chunk-TIQXDPIX.js";
+import "../chunk-RIJGMRJK.js";
 import "../chunk-TYJR4GOF.js";
 import "../chunk-HPK33ACY.js";
+import "../chunk-7ZPUN7TV.js";
+import "../chunk-FZXKH2ZT.js";
 import "../chunk-6JAIFIPW.js";
 import "../chunk-N3GAFIXG.js";
 import "../chunk-YKCAJ2TN.js";