@12-apps/ui 6.19.0 → 6.19.1

package/NATIVE.md

@@ -93,7 +93,7 @@ Ported: **15 of 140** public subpaths carry a `react-native` condition.
 | `@12-apps/ui/data-display/LoadingState` | 11 | 1 | The spinner is the platform's `ActivityIndicator`, not MUI's 3.6-unit arc: same diameter and primary colour, the platform's own stroke; on iOS the two built-in sizes stand in for the five (`md` and up draw `large`).; The skeleton rows are the static tint (`alpha(text.primary, 0.13)`); MUI's `wave` sweep is a gradient pseudo-element React Native cannot draw.; The message is set in MUI's default `body2`/`body1`/`h6` numbers; a host that re-themes MUI's typography variants moves the web only. |
 | `@12-apps/ui/form/Button` | 24 | 2 | — |
 | `@12-apps/ui/layout/Box` | 7 | 1 | — |
-| `@12-apps/ui/layout/Container` | 36 | 0 | `variant="padded"` adds no vertical padding on either renderer: the web declares its 64px above and below BEFORE the `padding` shorthand, which overrides them, and native paints the same insets so the two agree. The fix is a web change (`Container.tsx` order) plus `containerPaddingUnits`, made together.; `padding="none"` paints the `md` inset on either renderer: the web reads its map with `||`, so `none`'s 0 falls through to the default. Same one-place fix.; `responsive` reads `useWindowDimensions().width < 600` in place of MUI's `sm` media query, and `centered` reads the window height in place of `100vh`; both track the window, as CSS would, but a container inside a narrower parent still measures the window, not the parent. |
+| `@12-apps/ui/layout/Container` | 36 | 0 | `responsive` reads `useWindowDimensions().width < 600` in place of MUI's `sm` media query, and `centered` reads the window height in place of `100vh`; both track the window, as CSS would, but a container inside a narrower parent still measures the window, not the parent. |
 | `@12-apps/ui/layout/Spacer` | 21 | 1 | — |
 | `@12-apps/ui/layout/Stack` | 6 | 0 | — |
 | `@12-apps/ui/typography/Heading` | 26 | 1 | `gradient` paints the gradient's first stop as a flat colour: React Native has no `background-clip: text` and no gradient fill in core. A host wanting the real thing adds a masked-gradient library. |

package/dist/_internal/components/index.js

@@ -161,8 +161,8 @@ import "../../chunk-TVL5V2JK.js";
 import "../../chunk-DTKYXNCE.js";
 import {
   Container
-} from "../../chunk-LLABVZM3.js";
-import "../../chunk-JZT5XP23.js";
+} from "../../chunk-HEK4LQT6.js";
+import "../../chunk-YBVKLJAL.js";
 import "../../chunk-LVDRVPGD.js";
 import {
   Dashboard,

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

@@ -1,7 +1,7 @@
 import {
   Container
-} from "../../../../chunk-LLABVZM3.js";
-import "../../../../chunk-JZT5XP23.js";
+} from "../../../../chunk-HEK4LQT6.js";
+import "../../../../chunk-YBVKLJAL.js";
 import "../../../../chunk-QLWBQQW7.js";
 import "../../../../chunk-PZ5AY32C.js";
 export {

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

@@ -8,8 +8,9 @@ import {
   CONTAINER_PADDED_VERTICAL_UNITS,
   CONTAINER_PADDING_UNITS,
   containerPaddingUnits,
+  containerVerticalUnits,
   resolveContainerMaxWidth
-} from "../../../../chunk-JZT5XP23.js";
+} from "../../../../chunk-YBVKLJAL.js";
 import "../../../../chunk-PZ5AY32C.js";
 export {
   CONTAINER_CENTERED_MAX_WIDTH,
@@ -21,6 +22,7 @@ export {
   CONTAINER_PADDED_VERTICAL_UNITS,
   CONTAINER_PADDING_UNITS,
   containerPaddingUnits,
+  containerVerticalUnits,
   resolveContainerMaxWidth
 };
 //# sourceMappingURL=Container.metrics.js.map

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

@@ -33,8 +33,8 @@ import "../../../chunk-TVL5V2JK.js";
 import "../../../chunk-DTKYXNCE.js";
 import {
   Container
-} from "../../../chunk-LLABVZM3.js";
-import "../../../chunk-JZT5XP23.js";
+} from "../../../chunk-HEK4LQT6.js";
+import "../../../chunk-YBVKLJAL.js";
 import "../../../chunk-LVDRVPGD.js";
 import {
   Dashboard,

package/dist/{chunk-LLABVZM3.js → chunk-HEK4LQT6.js}

@@ -1,9 +1,9 @@
 import {
   CONTAINER_COMPACT_PADDING_UNITS,
-  CONTAINER_PADDED_VERTICAL_UNITS,
   containerPaddingUnits,
+  containerVerticalUnits,
   resolveContainerMaxWidth
-} from "./chunk-JZT5XP23.js";
+} from "./chunk-YBVKLJAL.js";
 import {
   resolveTestId,
   withoutTestIdProps
@@ -33,14 +33,20 @@ var Container = ({
       justifyContent: "center",
       minHeight: "100vh"
     },
+    // The shorthand FIRST: a `paddingTop` declared before it is overridden by
+    // it, which is how `variant="padded"` painted no vertical inset at all.
+    padding: theme.spacing(containerPaddingUnits(padding, false)),
     ...variant === "padded" && {
-      paddingTop: theme.spacing(CONTAINER_PADDED_VERTICAL_UNITS),
-      paddingBottom: theme.spacing(CONTAINER_PADDED_VERTICAL_UNITS)
+      paddingTop: theme.spacing(containerVerticalUnits(variant, padding, false)),
+      paddingBottom: theme.spacing(containerVerticalUnits(variant, padding, false))
     },
-    padding: theme.spacing(containerPaddingUnits(padding, false)),
     ...responsive && {
       [theme.breakpoints.down("sm")]: {
-        padding: theme.spacing(CONTAINER_COMPACT_PADDING_UNITS)
+        padding: theme.spacing(CONTAINER_COMPACT_PADDING_UNITS),
+        ...variant === "padded" && {
+          paddingTop: theme.spacing(containerVerticalUnits(variant, padding, true)),
+          paddingBottom: theme.spacing(containerVerticalUnits(variant, padding, true))
+        }
       }
     },
     ...sx || {}
@@ -60,4 +66,4 @@ var Container = ({
 export {
   Container
 };
-//# sourceMappingURL=chunk-LLABVZM3.js.map
+//# sourceMappingURL=chunk-HEK4LQT6.js.map

package/dist/chunk-HEK4LQT6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Container/Container.tsx"],"sourcesContent":["import MuiContainer from '@mui/material/Container/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport type { SxProps, Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport {\n  CONTAINER_COMPACT_PADDING_UNITS,\n  containerPaddingUnits,\n  containerVerticalUnits,\n  resolveContainerMaxWidth,\n} from './Container.metrics';\nimport type { ContainerProps } from './Container.types';\nimport { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\n\nexport const Container: React.FC<ContainerProps> = ({\n  children,\n  maxWidth = 'lg',\n  variant = 'default',\n  padding = 'md',\n  responsive = true,\n  sx,\n  ...others\n}) => {\n  const theme = useTheme();\n  // `testID` and `dataTestId` are the shared contract's spellings; the DOM\n  // wants `data-testid`, and must not see the other two as attributes.\n  const testId = resolveTestId(others, 'container');\n  const props = withoutTestIdProps(others);\n\n  // From the shared metrics, not tables of our own: the native `Container`\n  // reads the same units and the same max-width rule, so the two renderers\n  // cannot disagree on an inset or a column width.\n  const containerStyles: SxProps<Theme> = {\n    ...(variant === 'centered' && {\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'center',\n      justifyContent: 'center',\n      minHeight: '100vh',\n    }),\n    // The shorthand FIRST: a `paddingTop` declared before it is overridden by\n    // it, which is how `variant=\"padded\"` painted no vertical inset at all.\n    padding: theme.spacing(containerPaddingUnits(padding, false)),\n    ...(variant === 'padded' && {\n      paddingTop: theme.spacing(containerVerticalUnits(variant, padding, false)),\n      paddingBottom: theme.spacing(containerVerticalUnits(variant, padding, false)),\n    }),\n    ...(responsive && {\n      [theme.breakpoints.down('sm')]: {\n        padding: theme.spacing(CONTAINER_COMPACT_PADDING_UNITS),\n        ...(variant === 'padded' && {\n          paddingTop: theme.spacing(containerVerticalUnits(variant, padding, true)),\n          paddingBottom: theme.spacing(containerVerticalUnits(variant, padding, true)),\n        }),\n      },\n    }),\n    ...(sx || {}),\n  };\n\n  return (\n    <MuiContainer\n      maxWidth={resolveContainerMaxWidth(variant, maxWidth)}\n      sx={containerStyles}\n      data-testid={testId}\n      {...props}\n    >\n      {children}\n    </MuiContainer>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAAA,OAAO,kBAAkB;AACzB,SAAS,gBAAgB;AA2DrB;AA9CG,IAAM,YAAsC,CAAC;AAAA,EAClD;AAAA,EACA,WAAW;AAAA,EACX,UAAU;AAAA,EACV,UAAU;AAAA,EACV,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,QAAQ,SAAS;AAGvB,QAAM,SAAS,cAAc,QAAQ,WAAW;AAChD,QAAM,QAAQ,mBAAmB,MAAM;AAKvC,QAAM,kBAAkC;AAAA,IACtC,GAAI,YAAY,cAAc;AAAA,MAC5B,SAAS;AAAA,MACT,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,WAAW;AAAA,IACb;AAAA;AAAA;AAAA,IAGA,SAAS,MAAM,QAAQ,sBAAsB,SAAS,KAAK,CAAC;AAAA,IAC5D,GAAI,YAAY,YAAY;AAAA,MAC1B,YAAY,MAAM,QAAQ,uBAAuB,SAAS,SAAS,KAAK,CAAC;AAAA,MACzE,eAAe,MAAM,QAAQ,uBAAuB,SAAS,SAAS,KAAK,CAAC;AAAA,IAC9E;AAAA,IACA,GAAI,cAAc;AAAA,MAChB,CAAC,MAAM,YAAY,KAAK,IAAI,CAAC,GAAG;AAAA,QAC9B,SAAS,MAAM,QAAQ,+BAA+B;AAAA,QACtD,GAAI,YAAY,YAAY;AAAA,UAC1B,YAAY,MAAM,QAAQ,uBAAuB,SAAS,SAAS,IAAI,CAAC;AAAA,UACxE,eAAe,MAAM,QAAQ,uBAAuB,SAAS,SAAS,IAAI,CAAC;AAAA,QAC7E;AAAA,MACF;AAAA,IACF;AAAA,IACA,GAAI,MAAM,CAAC;AAAA,EACb;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,yBAAyB,SAAS,QAAQ;AAAA,MACpD,IAAI;AAAA,MACJ,eAAa;AAAA,MACZ,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/{chunk-JZT5XP23.js → chunk-YBVKLJAL.js}

@@ -30,7 +30,11 @@ function resolveContainerMaxWidth(variant, maxWidth) {
 function containerPaddingUnits(padding, compact) {
   if (compact) return CONTAINER_COMPACT_PADDING_UNITS;
   const units = CONTAINER_PADDING_UNITS[padding];
-  return units || CONTAINER_PADDING_UNITS[CONTAINER_DEFAULT_PADDING];
+  return units ?? CONTAINER_PADDING_UNITS[CONTAINER_DEFAULT_PADDING];
+}
+function containerVerticalUnits(variant, padding, compact) {
+  if (variant !== "padded") return containerPaddingUnits(padding, compact);
+  return compact ? CONTAINER_COMPACT_PADDING_UNITS : CONTAINER_PADDED_VERTICAL_UNITS;
 }
 
 export {
@@ -43,6 +47,7 @@ export {
   CONTAINER_COMPACT_PADDING_UNITS,
   CONTAINER_COMPACT_BELOW,
   resolveContainerMaxWidth,
-  containerPaddingUnits
+  containerPaddingUnits,
+  containerVerticalUnits
 };
-//# sourceMappingURL=chunk-JZT5XP23.js.map
+//# sourceMappingURL=chunk-YBVKLJAL.js.map

package/dist/{chunk-JZT5XP23.js.map → chunk-YBVKLJAL.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/layout/Container/Container.metrics.ts"],"sourcesContent":["import type { ContainerMaxWidth, ContainerPadding, ContainerVariant } from './Container.base';\n\n/**\n * THE NUMBERS BOTH `Container` RENDERERS DRAW WITH.\n *\n * `Container.tsx` used to hold these as `theme.spacing(…)` calls and MUI's\n * breakpoint names inside the component; the native renderer has no MUI\n * breakpoints to name, so the values live here in SPACING UNITS and px, and\n * each renderer multiplies the units out through its own `theme.spacing`.\n */\nexport type ContainerMaxWidthKey = Exclude<ContainerMaxWidth, false>;\n\n/**\n * MUI's default breakpoints, which its `Container` reads as `max-width`\n * (`xs` is `Math.max(values.xs, 444)`). MUI applies each under\n * `min-width: <breakpoint>`, but below it the column is `width: 100%` and\n * narrower anyway, so a plain `maxWidth` paints the same.\n */\nexport const CONTAINER_MAX_WIDTHS: Record<ContainerMaxWidthKey, number> = {\n  xs: 444,\n  sm: 600,\n  md: 900,\n  lg: 1200,\n  xl: 1536,\n};\n\nexport const CONTAINER_DEFAULT_MAX_WIDTH: ContainerMaxWidthKey = 'lg';\n/** The `centered` variant reads at `md`, whatever `maxWidth` says. */\nexport const CONTAINER_CENTERED_MAX_WIDTH: ContainerMaxWidthKey = 'md';\n\nexport const CONTAINER_PADDING_UNITS: Record<ContainerPadding, number> = {\n  none: 0,\n  xs: 1,\n  sm: 2,\n  md: 3,\n  lg: 4,\n  xl: 6,\n};\n\nexport const CONTAINER_DEFAULT_PADDING: ContainerPadding = 'md';\n\n/** What `variant=\"padded\"` declares above and below, in spacing units. */\nexport const CONTAINER_PADDED_VERTICAL_UNITS = 8;\n\n/** Under {@link CONTAINER_COMPACT_BELOW}, a `responsive` container tightens to this. */\nexport const CONTAINER_COMPACT_PADDING_UNITS = 2;\n\n/** MUI's `sm` breakpoint: `theme.breakpoints.down('sm')` is `max-width: 599.95px`. */\nexport const CONTAINER_COMPACT_BELOW = 600;\n\nconst isMaxWidthKey = (value: string): value is ContainerMaxWidthKey => value in CONTAINER_MAX_WIDTHS;\n\n/**\n * The breakpoint the column is limited to, or `false` for none. `fluid` drops\n * the limit, `centered` fixes it at `md`, and a string outside the vocabulary\n * reads as the default — the rules `Container.tsx` has always applied.\n */\nexport function resolveContainerMaxWidth(\n  variant: ContainerVariant,\n  maxWidth: ContainerMaxWidth | string,\n): ContainerMaxWidthKey | false {\n  if (variant === 'fluid') return false;\n  if (variant === 'centered') return CONTAINER_CENTERED_MAX_WIDTH;\n  if (typeof maxWidth === 'string' && isMaxWidthKey(maxWidth)) return maxWidth;\n  return maxWidth === false ? false : CONTAINER_DEFAULT_MAX_WIDTH;\n}\n\n/**\n * The inset every side of the container is PAINTED with, in spacing units.\n *\n * This is the web's painted result, not its declared intent, and two of its\n * rules are worth knowing before reaching for them:\n *\n * - `padding=\"none\"` paints the default. The web reads its map with `||`, so\n *   `none`'s 0 falls through to `md`.\n * - `variant=\"padded\"` paints the same inset as `default`. The web declares its\n *   {@link CONTAINER_PADDED_VERTICAL_UNITS} above and below BEFORE the\n *   `padding` shorthand, which therefore overrides them.\n *\n * Both renderers read this one function so they agree today; either fix is a\n * change to the web's emitted CSS and to this function, made together.\n */\nexport function containerPaddingUnits(padding: ContainerPadding | string, compact: boolean): number {\n  if (compact) return CONTAINER_COMPACT_PADDING_UNITS;\n  const units = (CONTAINER_PADDING_UNITS as Record<string, number | undefined>)[padding];\n  return units || CONTAINER_PADDING_UNITS[CONTAINER_DEFAULT_PADDING];\n}\n"],"mappings":";AAkBO,IAAM,uBAA6D;AAAA,EACxE,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,IAAM,8BAAoD;AAE1D,IAAM,+BAAqD;AAE3D,IAAM,0BAA4D;AAAA,EACvE,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,IAAM,4BAA8C;AAGpD,IAAM,kCAAkC;AAGxC,IAAM,kCAAkC;AAGxC,IAAM,0BAA0B;AAEvC,IAAM,gBAAgB,CAAC,UAAiD,SAAS;AAO1E,SAAS,yBACd,SACA,UAC8B;AAC9B,MAAI,YAAY,QAAS,QAAO;AAChC,MAAI,YAAY,WAAY,QAAO;AACnC,MAAI,OAAO,aAAa,YAAY,cAAc,QAAQ,EAAG,QAAO;AACpE,SAAO,aAAa,QAAQ,QAAQ;AACtC;AAiBO,SAAS,sBAAsB,SAAoC,SAA0B;AAClG,MAAI,QAAS,QAAO;AACpB,QAAM,QAAS,wBAA+D,OAAO;AACrF,SAAO,SAAS,wBAAwB,yBAAyB;AACnE;","names":[]}
+{"version":3,"sources":["../src/components/layout/Container/Container.metrics.ts"],"sourcesContent":["import type { ContainerMaxWidth, ContainerPadding, ContainerVariant } from './Container.base';\n\n/**\n * THE NUMBERS BOTH `Container` RENDERERS DRAW WITH.\n *\n * `Container.tsx` used to hold these as `theme.spacing(…)` calls and MUI's\n * breakpoint names inside the component; the native renderer has no MUI\n * breakpoints to name, so the values live here in SPACING UNITS and px, and\n * each renderer multiplies the units out through its own `theme.spacing`.\n */\nexport type ContainerMaxWidthKey = Exclude<ContainerMaxWidth, false>;\n\n/**\n * MUI's default breakpoints, which its `Container` reads as `max-width`\n * (`xs` is `Math.max(values.xs, 444)`). MUI applies each under\n * `min-width: <breakpoint>`, but below it the column is `width: 100%` and\n * narrower anyway, so a plain `maxWidth` paints the same.\n */\nexport const CONTAINER_MAX_WIDTHS: Record<ContainerMaxWidthKey, number> = {\n  xs: 444,\n  sm: 600,\n  md: 900,\n  lg: 1200,\n  xl: 1536,\n};\n\nexport const CONTAINER_DEFAULT_MAX_WIDTH: ContainerMaxWidthKey = 'lg';\n/** The `centered` variant reads at `md`, whatever `maxWidth` says. */\nexport const CONTAINER_CENTERED_MAX_WIDTH: ContainerMaxWidthKey = 'md';\n\nexport const CONTAINER_PADDING_UNITS: Record<ContainerPadding, number> = {\n  none: 0,\n  xs: 1,\n  sm: 2,\n  md: 3,\n  lg: 4,\n  xl: 6,\n};\n\nexport const CONTAINER_DEFAULT_PADDING: ContainerPadding = 'md';\n\n/** What `variant=\"padded\"` declares above and below, in spacing units. */\nexport const CONTAINER_PADDED_VERTICAL_UNITS = 8;\n\n/** Under {@link CONTAINER_COMPACT_BELOW}, a `responsive` container tightens to this. */\nexport const CONTAINER_COMPACT_PADDING_UNITS = 2;\n\n/** MUI's `sm` breakpoint: `theme.breakpoints.down('sm')` is `max-width: 599.95px`. */\nexport const CONTAINER_COMPACT_BELOW = 600;\n\nconst isMaxWidthKey = (value: string): value is ContainerMaxWidthKey => value in CONTAINER_MAX_WIDTHS;\n\n/**\n * The breakpoint the column is limited to, or `false` for none. `fluid` drops\n * the limit, `centered` fixes it at `md`, and a string outside the vocabulary\n * reads as the default — the rules `Container.tsx` has always applied.\n */\nexport function resolveContainerMaxWidth(\n  variant: ContainerVariant,\n  maxWidth: ContainerMaxWidth | string,\n): ContainerMaxWidthKey | false {\n  if (variant === 'fluid') return false;\n  if (variant === 'centered') return CONTAINER_CENTERED_MAX_WIDTH;\n  if (typeof maxWidth === 'string' && isMaxWidthKey(maxWidth)) return maxWidth;\n  return maxWidth === false ? false : CONTAINER_DEFAULT_MAX_WIDTH;\n}\n\n/**\n * The inset every side of the container is painted with, in spacing units.\n *\n * `??`, not `||`: `none` is 0, and 0 is falsy. Reading the map with `||` sent\n * `padding=\"none\"` through to the `md` default, so the one value a caller\n * would reach for to remove the inset was the one value that could not.\n * A word outside the vocabulary still reads as the default.\n */\nexport function containerPaddingUnits(padding: ContainerPadding | string, compact: boolean): number {\n  if (compact) return CONTAINER_COMPACT_PADDING_UNITS;\n  const units = (CONTAINER_PADDING_UNITS as Record<string, number | undefined>)[padding];\n  return units ?? CONTAINER_PADDING_UNITS[CONTAINER_DEFAULT_PADDING];\n}\n\n/**\n * What `variant=\"padded\"` paints above and below, in spacing units — the\n * horizontal inset stays whatever `padding` says.\n *\n * The variant used to paint nothing of its own: the web declared these before\n * the `padding` shorthand, which overrode them, and the native half copied the\n * painted result so the two would agree. Now both read this.\n *\n * A `responsive` container under {@link CONTAINER_COMPACT_BELOW} compacts, as\n * every other inset does; a tall vertical inset is the first thing a phone\n * cannot spare.\n */\nexport function containerVerticalUnits(\n  variant: ContainerVariant,\n  padding: ContainerPadding | string,\n  compact: boolean,\n): number {\n  if (variant !== 'padded') return containerPaddingUnits(padding, compact);\n  return compact ? CONTAINER_COMPACT_PADDING_UNITS : CONTAINER_PADDED_VERTICAL_UNITS;\n}\n"],"mappings":";AAkBO,IAAM,uBAA6D;AAAA,EACxE,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,IAAM,8BAAoD;AAE1D,IAAM,+BAAqD;AAE3D,IAAM,0BAA4D;AAAA,EACvE,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,IAAM,4BAA8C;AAGpD,IAAM,kCAAkC;AAGxC,IAAM,kCAAkC;AAGxC,IAAM,0BAA0B;AAEvC,IAAM,gBAAgB,CAAC,UAAiD,SAAS;AAO1E,SAAS,yBACd,SACA,UAC8B;AAC9B,MAAI,YAAY,QAAS,QAAO;AAChC,MAAI,YAAY,WAAY,QAAO;AACnC,MAAI,OAAO,aAAa,YAAY,cAAc,QAAQ,EAAG,QAAO;AACpE,SAAO,aAAa,QAAQ,QAAQ;AACtC;AAUO,SAAS,sBAAsB,SAAoC,SAA0B;AAClG,MAAI,QAAS,QAAO;AACpB,QAAM,QAAS,wBAA+D,OAAO;AACrF,SAAO,SAAS,wBAAwB,yBAAyB;AACnE;AAcO,SAAS,uBACd,SACA,SACA,SACQ;AACR,MAAI,YAAY,SAAU,QAAO,sBAAsB,SAAS,OAAO;AACvE,SAAO,UAAU,kCAAkC;AACrD;","names":[]}

package/dist/layout/Container.js

@@ -1,8 +1,8 @@
 import "../chunk-DTKYXNCE.js";
 import {
   Container
-} from "../chunk-LLABVZM3.js";
-import "../chunk-JZT5XP23.js";
+} from "../chunk-HEK4LQT6.js";
+import "../chunk-YBVKLJAL.js";
 import "../chunk-QLWBQQW7.js";
 import "../chunk-PZ5AY32C.js";
 export {

package/dist/native/layout/Container.js

@@ -30,6 +30,7 @@ var CONTAINER_PADDING_UNITS = {
   xl: 6
 };
 var CONTAINER_DEFAULT_PADDING = "md";
+var CONTAINER_PADDED_VERTICAL_UNITS = 8;
 var CONTAINER_COMPACT_PADDING_UNITS = 2;
 var CONTAINER_COMPACT_BELOW = 600;
 var isMaxWidthKey = (value) => value in CONTAINER_MAX_WIDTHS;
@@ -42,7 +43,11 @@ function resolveContainerMaxWidth(variant, maxWidth) {
 function containerPaddingUnits(padding, compact) {
   if (compact) return CONTAINER_COMPACT_PADDING_UNITS;
   const units = CONTAINER_PADDING_UNITS[padding];
-  return units || CONTAINER_PADDING_UNITS[CONTAINER_DEFAULT_PADDING];
+  return units ?? CONTAINER_PADDING_UNITS[CONTAINER_DEFAULT_PADDING];
+}
+function containerVerticalUnits(variant, padding, compact) {
+  if (variant !== "padded") return containerPaddingUnits(padding, compact);
+  return compact ? CONTAINER_COMPACT_PADDING_UNITS : CONTAINER_PADDED_VERTICAL_UNITS;
 }
 
 // src/components/layout/Container/Container.native.tsx
@@ -56,6 +61,7 @@ function containerStyle(theme, a) {
     marginRight: "auto",
     maxWidth: limit === false ? void 0 : CONTAINER_MAX_WIDTHS[limit],
     padding: theme.spacing(containerPaddingUnits(a.padding, compact)),
+    paddingVertical: theme.spacing(containerVerticalUnits(a.variant, a.padding, compact)),
     ...a.variant === "centered" ? { alignItems: "center", justifyContent: "center", minHeight: a.window.height } : null
   };
 }

package/dist/native/layout/Container.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/layout/Container/Container.native.tsx","../../../src/components/layout/Container/Container.metrics.ts"],"sourcesContent":["import * as React from 'react';\nimport { View, useWindowDimensions, type ViewStyle } from 'react-native';\n\nimport {\n  CONTAINER_COMPACT_BELOW,\n  CONTAINER_MAX_WIDTHS,\n  containerPaddingUnits,\n  resolveContainerMaxWidth,\n} from './Container.metrics';\nimport type { ContainerMaxWidth, ContainerPadding, ContainerProps, ContainerVariant } from './Container.types.native';\nimport { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport type { UiTheme } from '../../../tokens/theme';\n\nexport interface ContainerStyleArgs {\n  variant: ContainerVariant;\n  maxWidth: ContainerMaxWidth | string;\n  padding: ContainerPadding;\n  responsive: boolean;\n  /** The window, for the two things CSS answers with a media query and `100vh`. */\n  window: { width: number; height: number };\n}\n\n/**\n * The style MUI's `Container` plus the web `sx` paint, in absolute numbers.\n *\n * `width: 100%` between auto margins is MUI's own centring rule; `maxWidth` is\n * the breakpoint the web applies under `min-width` (below it the column is\n * narrower anyway); the `responsive` media query becomes a window-width test;\n * `centered`'s `100vh` becomes the window height. `padded` and `padding=\"none\"`\n * paint what the web paints — see `containerPaddingUnits`.\n */\nexport function containerStyle(theme: UiTheme, a: ContainerStyleArgs): ViewStyle {\n  const compact = a.responsive && a.window.width < CONTAINER_COMPACT_BELOW;\n  const limit = resolveContainerMaxWidth(a.variant, a.maxWidth);\n  return {\n    width: '100%',\n    marginLeft: 'auto',\n    marginRight: 'auto',\n    maxWidth: limit === false ? undefined : CONTAINER_MAX_WIDTHS[limit],\n    padding: theme.spacing(containerPaddingUnits(a.padding, compact)),\n    ...(a.variant === 'centered'\n      ? { alignItems: 'center', justifyContent: 'center', minHeight: a.window.height }\n      : null),\n  };\n}\n\n/** The native `Container`: a `View` sized by the same rules MUI's `Container` and the web `sx` apply. */\nexport const Container = React.forwardRef<View, ContainerProps>(\n  ({ children, maxWidth = 'lg', variant = 'default', padding = 'md', responsive = true, style, ...others }, ref) => {\n    const theme = useUiTheme();\n    const window = useWindowDimensions();\n    const resolved = React.useMemo(\n      () => containerStyle(theme, { variant, maxWidth, padding, responsive, window }),\n      [theme, variant, maxWidth, padding, responsive, window],\n    );\n\n    return (\n      <View\n        ref={ref}\n        style={[resolved, style]}\n        testID={resolveTestId(others, 'container')}\n        {...withoutTestIdProps(others)}\n      >\n        {children}\n      </View>\n    );\n  },\n);\n\nContainer.displayName = 'Container';\n","import type { ContainerMaxWidth, ContainerPadding, ContainerVariant } from './Container.base';\n\n/**\n * THE NUMBERS BOTH `Container` RENDERERS DRAW WITH.\n *\n * `Container.tsx` used to hold these as `theme.spacing(…)` calls and MUI's\n * breakpoint names inside the component; the native renderer has no MUI\n * breakpoints to name, so the values live here in SPACING UNITS and px, and\n * each renderer multiplies the units out through its own `theme.spacing`.\n */\nexport type ContainerMaxWidthKey = Exclude<ContainerMaxWidth, false>;\n\n/**\n * MUI's default breakpoints, which its `Container` reads as `max-width`\n * (`xs` is `Math.max(values.xs, 444)`). MUI applies each under\n * `min-width: <breakpoint>`, but below it the column is `width: 100%` and\n * narrower anyway, so a plain `maxWidth` paints the same.\n */\nexport const CONTAINER_MAX_WIDTHS: Record<ContainerMaxWidthKey, number> = {\n  xs: 444,\n  sm: 600,\n  md: 900,\n  lg: 1200,\n  xl: 1536,\n};\n\nexport const CONTAINER_DEFAULT_MAX_WIDTH: ContainerMaxWidthKey = 'lg';\n/** The `centered` variant reads at `md`, whatever `maxWidth` says. */\nexport const CONTAINER_CENTERED_MAX_WIDTH: ContainerMaxWidthKey = 'md';\n\nexport const CONTAINER_PADDING_UNITS: Record<ContainerPadding, number> = {\n  none: 0,\n  xs: 1,\n  sm: 2,\n  md: 3,\n  lg: 4,\n  xl: 6,\n};\n\nexport const CONTAINER_DEFAULT_PADDING: ContainerPadding = 'md';\n\n/** What `variant=\"padded\"` declares above and below, in spacing units. */\nexport const CONTAINER_PADDED_VERTICAL_UNITS = 8;\n\n/** Under {@link CONTAINER_COMPACT_BELOW}, a `responsive` container tightens to this. */\nexport const CONTAINER_COMPACT_PADDING_UNITS = 2;\n\n/** MUI's `sm` breakpoint: `theme.breakpoints.down('sm')` is `max-width: 599.95px`. */\nexport const CONTAINER_COMPACT_BELOW = 600;\n\nconst isMaxWidthKey = (value: string): value is ContainerMaxWidthKey => value in CONTAINER_MAX_WIDTHS;\n\n/**\n * The breakpoint the column is limited to, or `false` for none. `fluid` drops\n * the limit, `centered` fixes it at `md`, and a string outside the vocabulary\n * reads as the default — the rules `Container.tsx` has always applied.\n */\nexport function resolveContainerMaxWidth(\n  variant: ContainerVariant,\n  maxWidth: ContainerMaxWidth | string,\n): ContainerMaxWidthKey | false {\n  if (variant === 'fluid') return false;\n  if (variant === 'centered') return CONTAINER_CENTERED_MAX_WIDTH;\n  if (typeof maxWidth === 'string' && isMaxWidthKey(maxWidth)) return maxWidth;\n  return maxWidth === false ? false : CONTAINER_DEFAULT_MAX_WIDTH;\n}\n\n/**\n * The inset every side of the container is PAINTED with, in spacing units.\n *\n * This is the web's painted result, not its declared intent, and two of its\n * rules are worth knowing before reaching for them:\n *\n * - `padding=\"none\"` paints the default. The web reads its map with `||`, so\n *   `none`'s 0 falls through to `md`.\n * - `variant=\"padded\"` paints the same inset as `default`. The web declares its\n *   {@link CONTAINER_PADDED_VERTICAL_UNITS} above and below BEFORE the\n *   `padding` shorthand, which therefore overrides them.\n *\n * Both renderers read this one function so they agree today; either fix is a\n * change to the web's emitted CSS and to this function, made together.\n */\nexport function containerPaddingUnits(padding: ContainerPadding | string, compact: boolean): number {\n  if (compact) return CONTAINER_COMPACT_PADDING_UNITS;\n  const units = (CONTAINER_PADDING_UNITS as Record<string, number | undefined>)[padding];\n  return units || CONTAINER_PADDING_UNITS[CONTAINER_DEFAULT_PADDING];\n}\n"],"mappings":";;;;;;;;;;AAAA,YAAY,WAAW;AACvB,SAAS,MAAM,2BAA2C;;;ACiBnD,IAAM,uBAA6D;AAAA,EACxE,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,IAAM,8BAAoD;AAE1D,IAAM,+BAAqD;AAE3D,IAAM,0BAA4D;AAAA,EACvE,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,IAAM,4BAA8C;AAMpD,IAAM,kCAAkC;AAGxC,IAAM,0BAA0B;AAEvC,IAAM,gBAAgB,CAAC,UAAiD,SAAS;AAO1E,SAAS,yBACd,SACA,UAC8B;AAC9B,MAAI,YAAY,QAAS,QAAO;AAChC,MAAI,YAAY,WAAY,QAAO;AACnC,MAAI,OAAO,aAAa,YAAY,cAAc,QAAQ,EAAG,QAAO;AACpE,SAAO,aAAa,QAAQ,QAAQ;AACtC;AAiBO,SAAS,sBAAsB,SAAoC,SAA0B;AAClG,MAAI,QAAS,QAAO;AACpB,QAAM,QAAS,wBAA+D,OAAO;AACrF,SAAO,SAAS,wBAAwB,yBAAyB;AACnE;;;AD5BM;AA1BC,SAAS,eAAe,OAAgB,GAAkC;AAC/E,QAAM,UAAU,EAAE,cAAc,EAAE,OAAO,QAAQ;AACjD,QAAM,QAAQ,yBAAyB,EAAE,SAAS,EAAE,QAAQ;AAC5D,SAAO;AAAA,IACL,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,UAAU,UAAU,QAAQ,SAAY,qBAAqB,KAAK;AAAA,IAClE,SAAS,MAAM,QAAQ,sBAAsB,EAAE,SAAS,OAAO,CAAC;AAAA,IAChE,GAAI,EAAE,YAAY,aACd,EAAE,YAAY,UAAU,gBAAgB,UAAU,WAAW,EAAE,OAAO,OAAO,IAC7E;AAAA,EACN;AACF;AAGO,IAAM,YAAkB;AAAA,EAC7B,CAAC,EAAE,UAAU,WAAW,MAAM,UAAU,WAAW,UAAU,MAAM,aAAa,MAAM,OAAO,GAAG,OAAO,GAAG,QAAQ;AAChH,UAAM,QAAQ,WAAW;AACzB,UAAM,SAAS,oBAAoB;AACnC,UAAM,WAAiB;AAAA,MACrB,MAAM,eAAe,OAAO,EAAE,SAAS,UAAU,SAAS,YAAY,OAAO,CAAC;AAAA,MAC9E,CAAC,OAAO,SAAS,UAAU,SAAS,YAAY,MAAM;AAAA,IACxD;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO,CAAC,UAAU,KAAK;AAAA,QACvB,QAAQ,cAAc,QAAQ,WAAW;AAAA,QACxC,GAAG,mBAAmB,MAAM;AAAA,QAE5B;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,UAAU,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components/layout/Container/Container.native.tsx","../../../src/components/layout/Container/Container.metrics.ts"],"sourcesContent":["import * as React from 'react';\nimport { View, useWindowDimensions, type ViewStyle } from 'react-native';\n\nimport {\n  CONTAINER_COMPACT_BELOW,\n  CONTAINER_MAX_WIDTHS,\n  containerPaddingUnits,\n  containerVerticalUnits,\n  resolveContainerMaxWidth,\n} from './Container.metrics';\nimport type { ContainerMaxWidth, ContainerPadding, ContainerProps, ContainerVariant } from './Container.types.native';\nimport { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\nimport { useUiTheme } from '../../../provider/use-ui-theme.native';\nimport type { UiTheme } from '../../../tokens/theme';\n\nexport interface ContainerStyleArgs {\n  variant: ContainerVariant;\n  maxWidth: ContainerMaxWidth | string;\n  padding: ContainerPadding;\n  responsive: boolean;\n  /** The window, for the two things CSS answers with a media query and `100vh`. */\n  window: { width: number; height: number };\n}\n\n/**\n * The style MUI's `Container` plus the web `sx` paint, in absolute numbers.\n *\n * `width: 100%` between auto margins is MUI's own centring rule; `maxWidth` is\n * the breakpoint the web applies under `min-width` (below it the column is\n * narrower anyway); the `responsive` media query becomes a window-width test;\n * `centered`'s `100vh` becomes the window height. `padded`'s vertical inset\n * and `padding=\"none\"`'s zero come from the same two functions the web reads.\n */\nexport function containerStyle(theme: UiTheme, a: ContainerStyleArgs): ViewStyle {\n  const compact = a.responsive && a.window.width < CONTAINER_COMPACT_BELOW;\n  const limit = resolveContainerMaxWidth(a.variant, a.maxWidth);\n  return {\n    width: '100%',\n    marginLeft: 'auto',\n    marginRight: 'auto',\n    maxWidth: limit === false ? undefined : CONTAINER_MAX_WIDTHS[limit],\n    padding: theme.spacing(containerPaddingUnits(a.padding, compact)),\n    paddingVertical: theme.spacing(containerVerticalUnits(a.variant, a.padding, compact)),\n    ...(a.variant === 'centered'\n      ? { alignItems: 'center', justifyContent: 'center', minHeight: a.window.height }\n      : null),\n  };\n}\n\n/** The native `Container`: a `View` sized by the same rules MUI's `Container` and the web `sx` apply. */\nexport const Container = React.forwardRef<View, ContainerProps>(\n  ({ children, maxWidth = 'lg', variant = 'default', padding = 'md', responsive = true, style, ...others }, ref) => {\n    const theme = useUiTheme();\n    const window = useWindowDimensions();\n    const resolved = React.useMemo(\n      () => containerStyle(theme, { variant, maxWidth, padding, responsive, window }),\n      [theme, variant, maxWidth, padding, responsive, window],\n    );\n\n    return (\n      <View\n        ref={ref}\n        style={[resolved, style]}\n        testID={resolveTestId(others, 'container')}\n        {...withoutTestIdProps(others)}\n      >\n        {children}\n      </View>\n    );\n  },\n);\n\nContainer.displayName = 'Container';\n","import type { ContainerMaxWidth, ContainerPadding, ContainerVariant } from './Container.base';\n\n/**\n * THE NUMBERS BOTH `Container` RENDERERS DRAW WITH.\n *\n * `Container.tsx` used to hold these as `theme.spacing(…)` calls and MUI's\n * breakpoint names inside the component; the native renderer has no MUI\n * breakpoints to name, so the values live here in SPACING UNITS and px, and\n * each renderer multiplies the units out through its own `theme.spacing`.\n */\nexport type ContainerMaxWidthKey = Exclude<ContainerMaxWidth, false>;\n\n/**\n * MUI's default breakpoints, which its `Container` reads as `max-width`\n * (`xs` is `Math.max(values.xs, 444)`). MUI applies each under\n * `min-width: <breakpoint>`, but below it the column is `width: 100%` and\n * narrower anyway, so a plain `maxWidth` paints the same.\n */\nexport const CONTAINER_MAX_WIDTHS: Record<ContainerMaxWidthKey, number> = {\n  xs: 444,\n  sm: 600,\n  md: 900,\n  lg: 1200,\n  xl: 1536,\n};\n\nexport const CONTAINER_DEFAULT_MAX_WIDTH: ContainerMaxWidthKey = 'lg';\n/** The `centered` variant reads at `md`, whatever `maxWidth` says. */\nexport const CONTAINER_CENTERED_MAX_WIDTH: ContainerMaxWidthKey = 'md';\n\nexport const CONTAINER_PADDING_UNITS: Record<ContainerPadding, number> = {\n  none: 0,\n  xs: 1,\n  sm: 2,\n  md: 3,\n  lg: 4,\n  xl: 6,\n};\n\nexport const CONTAINER_DEFAULT_PADDING: ContainerPadding = 'md';\n\n/** What `variant=\"padded\"` declares above and below, in spacing units. */\nexport const CONTAINER_PADDED_VERTICAL_UNITS = 8;\n\n/** Under {@link CONTAINER_COMPACT_BELOW}, a `responsive` container tightens to this. */\nexport const CONTAINER_COMPACT_PADDING_UNITS = 2;\n\n/** MUI's `sm` breakpoint: `theme.breakpoints.down('sm')` is `max-width: 599.95px`. */\nexport const CONTAINER_COMPACT_BELOW = 600;\n\nconst isMaxWidthKey = (value: string): value is ContainerMaxWidthKey => value in CONTAINER_MAX_WIDTHS;\n\n/**\n * The breakpoint the column is limited to, or `false` for none. `fluid` drops\n * the limit, `centered` fixes it at `md`, and a string outside the vocabulary\n * reads as the default — the rules `Container.tsx` has always applied.\n */\nexport function resolveContainerMaxWidth(\n  variant: ContainerVariant,\n  maxWidth: ContainerMaxWidth | string,\n): ContainerMaxWidthKey | false {\n  if (variant === 'fluid') return false;\n  if (variant === 'centered') return CONTAINER_CENTERED_MAX_WIDTH;\n  if (typeof maxWidth === 'string' && isMaxWidthKey(maxWidth)) return maxWidth;\n  return maxWidth === false ? false : CONTAINER_DEFAULT_MAX_WIDTH;\n}\n\n/**\n * The inset every side of the container is painted with, in spacing units.\n *\n * `??`, not `||`: `none` is 0, and 0 is falsy. Reading the map with `||` sent\n * `padding=\"none\"` through to the `md` default, so the one value a caller\n * would reach for to remove the inset was the one value that could not.\n * A word outside the vocabulary still reads as the default.\n */\nexport function containerPaddingUnits(padding: ContainerPadding | string, compact: boolean): number {\n  if (compact) return CONTAINER_COMPACT_PADDING_UNITS;\n  const units = (CONTAINER_PADDING_UNITS as Record<string, number | undefined>)[padding];\n  return units ?? CONTAINER_PADDING_UNITS[CONTAINER_DEFAULT_PADDING];\n}\n\n/**\n * What `variant=\"padded\"` paints above and below, in spacing units — the\n * horizontal inset stays whatever `padding` says.\n *\n * The variant used to paint nothing of its own: the web declared these before\n * the `padding` shorthand, which overrode them, and the native half copied the\n * painted result so the two would agree. Now both read this.\n *\n * A `responsive` container under {@link CONTAINER_COMPACT_BELOW} compacts, as\n * every other inset does; a tall vertical inset is the first thing a phone\n * cannot spare.\n */\nexport function containerVerticalUnits(\n  variant: ContainerVariant,\n  padding: ContainerPadding | string,\n  compact: boolean,\n): number {\n  if (variant !== 'padded') return containerPaddingUnits(padding, compact);\n  return compact ? CONTAINER_COMPACT_PADDING_UNITS : CONTAINER_PADDED_VERTICAL_UNITS;\n}\n"],"mappings":";;;;;;;;;;AAAA,YAAY,WAAW;AACvB,SAAS,MAAM,2BAA2C;;;ACiBnD,IAAM,uBAA6D;AAAA,EACxE,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,IAAM,8BAAoD;AAE1D,IAAM,+BAAqD;AAE3D,IAAM,0BAA4D;AAAA,EACvE,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,IAAM,4BAA8C;AAGpD,IAAM,kCAAkC;AAGxC,IAAM,kCAAkC;AAGxC,IAAM,0BAA0B;AAEvC,IAAM,gBAAgB,CAAC,UAAiD,SAAS;AAO1E,SAAS,yBACd,SACA,UAC8B;AAC9B,MAAI,YAAY,QAAS,QAAO;AAChC,MAAI,YAAY,WAAY,QAAO;AACnC,MAAI,OAAO,aAAa,YAAY,cAAc,QAAQ,EAAG,QAAO;AACpE,SAAO,aAAa,QAAQ,QAAQ;AACtC;AAUO,SAAS,sBAAsB,SAAoC,SAA0B;AAClG,MAAI,QAAS,QAAO;AACpB,QAAM,QAAS,wBAA+D,OAAO;AACrF,SAAO,SAAS,wBAAwB,yBAAyB;AACnE;AAcO,SAAS,uBACd,SACA,SACA,SACQ;AACR,MAAI,YAAY,SAAU,QAAO,sBAAsB,SAAS,OAAO;AACvE,SAAO,UAAU,kCAAkC;AACrD;;;ADxCM;AA3BC,SAAS,eAAe,OAAgB,GAAkC;AAC/E,QAAM,UAAU,EAAE,cAAc,EAAE,OAAO,QAAQ;AACjD,QAAM,QAAQ,yBAAyB,EAAE,SAAS,EAAE,QAAQ;AAC5D,SAAO;AAAA,IACL,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,UAAU,UAAU,QAAQ,SAAY,qBAAqB,KAAK;AAAA,IAClE,SAAS,MAAM,QAAQ,sBAAsB,EAAE,SAAS,OAAO,CAAC;AAAA,IAChE,iBAAiB,MAAM,QAAQ,uBAAuB,EAAE,SAAS,EAAE,SAAS,OAAO,CAAC;AAAA,IACpF,GAAI,EAAE,YAAY,aACd,EAAE,YAAY,UAAU,gBAAgB,UAAU,WAAW,EAAE,OAAO,OAAO,IAC7E;AAAA,EACN;AACF;AAGO,IAAM,YAAkB;AAAA,EAC7B,CAAC,EAAE,UAAU,WAAW,MAAM,UAAU,WAAW,UAAU,MAAM,aAAa,MAAM,OAAO,GAAG,OAAO,GAAG,QAAQ;AAChH,UAAM,QAAQ,WAAW;AACzB,UAAM,SAAS,oBAAoB;AACnC,UAAM,WAAiB;AAAA,MACrB,MAAM,eAAe,OAAO,EAAE,SAAS,UAAU,SAAS,YAAY,OAAO,CAAC;AAAA,MAC9E,CAAC,OAAO,SAAS,UAAU,SAAS,YAAY,MAAM;AAAA,IACxD;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,OAAO,CAAC,UAAU,KAAK;AAAA,QACvB,QAAQ,cAAc,QAAQ,WAAW;AAAA,QACxC,GAAG,mBAAmB,MAAM;AAAA,QAE5B;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,UAAU,cAAc;","names":[]}

package/dist/types/components/layout/Container/Container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/Container/Container.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGxD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAiD9C,CAAC"}
+{"version":3,"file":"Container.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/Container/Container.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAGxD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAuD9C,CAAC"}

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

@@ -33,19 +33,25 @@ export declare const CONTAINER_COMPACT_BELOW = 600;
  */
 export declare function resolveContainerMaxWidth(variant: ContainerVariant, maxWidth: ContainerMaxWidth | string): ContainerMaxWidthKey | false;
 /**
- * The inset every side of the container is PAINTED with, in spacing units.
+ * The inset every side of the container is painted with, in spacing units.
  *
- * This is the web's painted result, not its declared intent, and two of its
- * rules are worth knowing before reaching for them:
+ * `??`, not `||`: `none` is 0, and 0 is falsy. Reading the map with `||` sent
+ * `padding="none"` through to the `md` default, so the one value a caller
+ * would reach for to remove the inset was the one value that could not.
+ * A word outside the vocabulary still reads as the default.
+ */
+export declare function containerPaddingUnits(padding: ContainerPadding | string, compact: boolean): number;
+/**
+ * What `variant="padded"` paints above and below, in spacing units — the
+ * horizontal inset stays whatever `padding` says.
  *
- * - `padding="none"` paints the default. The web reads its map with `||`, so
- *   `none`'s 0 falls through to `md`.
- * - `variant="padded"` paints the same inset as `default`. The web declares its
- *   {@link CONTAINER_PADDED_VERTICAL_UNITS} above and below BEFORE the
- *   `padding` shorthand, which therefore overrides them.
+ * The variant used to paint nothing of its own: the web declared these before
+ * the `padding` shorthand, which overrode them, and the native half copied the
+ * painted result so the two would agree. Now both read this.
  *
- * Both renderers read this one function so they agree today; either fix is a
- * change to the web's emitted CSS and to this function, made together.
+ * A `responsive` container under {@link CONTAINER_COMPACT_BELOW} compacts, as
+ * every other inset does; a tall vertical inset is the first thing a phone
+ * cannot spare.
  */
-export declare function containerPaddingUnits(padding: ContainerPadding | string, compact: boolean): number;
+export declare function containerVerticalUnits(variant: ContainerVariant, padding: ContainerPadding | string, compact: boolean): number;
 //# sourceMappingURL=Container.metrics.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Container.metrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/Container/Container.metrics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAE9F;;;;;;;GAOG;AACH,MAAM,MAAM,oBAAoB,GAAG,OAAO,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAC;AAErE;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,oBAAoB,EAAE,MAAM,CAMrE,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,oBAA2B,CAAC;AACtE,sEAAsE;AACtE,eAAO,MAAM,4BAA4B,EAAE,oBAA2B,CAAC;AAEvE,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAOpE,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,gBAAuB,CAAC;AAEhE,0EAA0E;AAC1E,eAAO,MAAM,+BAA+B,IAAI,CAAC;AAEjD,wFAAwF;AACxF,eAAO,MAAM,+BAA+B,IAAI,CAAC;AAEjD,sFAAsF;AACtF,eAAO,MAAM,uBAAuB,MAAM,CAAC;AAI3C;;;;GAIG;AACH,wBAAgB,wBAAwB,CACtC,OAAO,EAAE,gBAAgB,EACzB,QAAQ,EAAE,iBAAiB,GAAG,MAAM,GACnC,oBAAoB,GAAG,KAAK,CAK9B;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,gBAAgB,GAAG,MAAM,EAAE,OAAO,EAAE,OAAO,GAAG,MAAM,CAIlG"}
+{"version":3,"file":"Container.metrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/Container/Container.metrics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAE9F;;;;;;;GAOG;AACH,MAAM,MAAM,oBAAoB,GAAG,OAAO,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAC;AAErE;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,oBAAoB,EAAE,MAAM,CAMrE,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,oBAA2B,CAAC;AACtE,sEAAsE;AACtE,eAAO,MAAM,4BAA4B,EAAE,oBAA2B,CAAC;AAEvE,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAOpE,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,gBAAuB,CAAC;AAEhE,0EAA0E;AAC1E,eAAO,MAAM,+BAA+B,IAAI,CAAC;AAEjD,wFAAwF;AACxF,eAAO,MAAM,+BAA+B,IAAI,CAAC;AAEjD,sFAAsF;AACtF,eAAO,MAAM,uBAAuB,MAAM,CAAC;AAI3C;;;;GAIG;AACH,wBAAgB,wBAAwB,CACtC,OAAO,EAAE,gBAAgB,EACzB,QAAQ,EAAE,iBAAiB,GAAG,MAAM,GACnC,oBAAoB,GAAG,KAAK,CAK9B;AAED;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,gBAAgB,GAAG,MAAM,EAAE,OAAO,EAAE,OAAO,GAAG,MAAM,CAIlG;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,gBAAgB,EACzB,OAAO,EAAE,gBAAgB,GAAG,MAAM,EAClC,OAAO,EAAE,OAAO,GACf,MAAM,CAGR"}

package/dist/types-native/components/layout/Container/Container.metrics.d.ts

@@ -33,19 +33,25 @@ export declare const CONTAINER_COMPACT_BELOW = 600;
  */
 export declare function resolveContainerMaxWidth(variant: ContainerVariant, maxWidth: ContainerMaxWidth | string): ContainerMaxWidthKey | false;
 /**
- * The inset every side of the container is PAINTED with, in spacing units.
+ * The inset every side of the container is painted with, in spacing units.
  *
- * This is the web's painted result, not its declared intent, and two of its
- * rules are worth knowing before reaching for them:
+ * `??`, not `||`: `none` is 0, and 0 is falsy. Reading the map with `||` sent
+ * `padding="none"` through to the `md` default, so the one value a caller
+ * would reach for to remove the inset was the one value that could not.
+ * A word outside the vocabulary still reads as the default.
+ */
+export declare function containerPaddingUnits(padding: ContainerPadding | string, compact: boolean): number;
+/**
+ * What `variant="padded"` paints above and below, in spacing units — the
+ * horizontal inset stays whatever `padding` says.
  *
- * - `padding="none"` paints the default. The web reads its map with `||`, so
- *   `none`'s 0 falls through to `md`.
- * - `variant="padded"` paints the same inset as `default`. The web declares its
- *   {@link CONTAINER_PADDED_VERTICAL_UNITS} above and below BEFORE the
- *   `padding` shorthand, which therefore overrides them.
+ * The variant used to paint nothing of its own: the web declared these before
+ * the `padding` shorthand, which overrode them, and the native half copied the
+ * painted result so the two would agree. Now both read this.
  *
- * Both renderers read this one function so they agree today; either fix is a
- * change to the web's emitted CSS and to this function, made together.
+ * A `responsive` container under {@link CONTAINER_COMPACT_BELOW} compacts, as
+ * every other inset does; a tall vertical inset is the first thing a phone
+ * cannot spare.
  */
-export declare function containerPaddingUnits(padding: ContainerPadding | string, compact: boolean): number;
+export declare function containerVerticalUnits(variant: ContainerVariant, padding: ContainerPadding | string, compact: boolean): number;
 //# sourceMappingURL=Container.metrics.d.ts.map

package/dist/types-native/components/layout/Container/Container.metrics.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Container.metrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/Container/Container.metrics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAE9F;;;;;;;GAOG;AACH,MAAM,MAAM,oBAAoB,GAAG,OAAO,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAC;AAErE;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,oBAAoB,EAAE,MAAM,CAMrE,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,oBAA2B,CAAC;AACtE,sEAAsE;AACtE,eAAO,MAAM,4BAA4B,EAAE,oBAA2B,CAAC;AAEvE,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAOpE,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,gBAAuB,CAAC;AAEhE,0EAA0E;AAC1E,eAAO,MAAM,+BAA+B,IAAI,CAAC;AAEjD,wFAAwF;AACxF,eAAO,MAAM,+BAA+B,IAAI,CAAC;AAEjD,sFAAsF;AACtF,eAAO,MAAM,uBAAuB,MAAM,CAAC;AAI3C;;;;GAIG;AACH,wBAAgB,wBAAwB,CACtC,OAAO,EAAE,gBAAgB,EACzB,QAAQ,EAAE,iBAAiB,GAAG,MAAM,GACnC,oBAAoB,GAAG,KAAK,CAK9B;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,gBAAgB,GAAG,MAAM,EAAE,OAAO,EAAE,OAAO,GAAG,MAAM,CAIlG"}
+{"version":3,"file":"Container.metrics.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/Container/Container.metrics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAE9F;;;;;;;GAOG;AACH,MAAM,MAAM,oBAAoB,GAAG,OAAO,CAAC,iBAAiB,EAAE,KAAK,CAAC,CAAC;AAErE;;;;;GAKG;AACH,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,oBAAoB,EAAE,MAAM,CAMrE,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,oBAA2B,CAAC;AACtE,sEAAsE;AACtE,eAAO,MAAM,4BAA4B,EAAE,oBAA2B,CAAC;AAEvE,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAOpE,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,gBAAuB,CAAC;AAEhE,0EAA0E;AAC1E,eAAO,MAAM,+BAA+B,IAAI,CAAC;AAEjD,wFAAwF;AACxF,eAAO,MAAM,+BAA+B,IAAI,CAAC;AAEjD,sFAAsF;AACtF,eAAO,MAAM,uBAAuB,MAAM,CAAC;AAI3C;;;;GAIG;AACH,wBAAgB,wBAAwB,CACtC,OAAO,EAAE,gBAAgB,EACzB,QAAQ,EAAE,iBAAiB,GAAG,MAAM,GACnC,oBAAoB,GAAG,KAAK,CAK9B;AAED;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CAAC,OAAO,EAAE,gBAAgB,GAAG,MAAM,EAAE,OAAO,EAAE,OAAO,GAAG,MAAM,CAIlG;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,gBAAgB,EACzB,OAAO,EAAE,gBAAgB,GAAG,MAAM,EAClC,OAAO,EAAE,OAAO,GACf,MAAM,CAGR"}

package/dist/types-native/components/layout/Container/Container.native.d.ts

@@ -19,8 +19,8 @@ export interface ContainerStyleArgs {
  * `width: 100%` between auto margins is MUI's own centring rule; `maxWidth` is
  * the breakpoint the web applies under `min-width` (below it the column is
  * narrower anyway); the `responsive` media query becomes a window-width test;
- * `centered`'s `100vh` becomes the window height. `padded` and `padding="none"`
- * paint what the web paints — see `containerPaddingUnits`.
+ * `centered`'s `100vh` becomes the window height. `padded`'s vertical inset
+ * and `padding="none"`'s zero come from the same two functions the web reads.
  */
 export declare function containerStyle(theme: UiTheme, a: ContainerStyleArgs): ViewStyle;
 /** The native `Container`: a `View` sized by the same rules MUI's `Container` and the web `sx` apply. */

package/dist/types-native/components/layout/Container/Container.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Container.native.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/Container/Container.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAuB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAQzE,OAAO,KAAK,EAAE,iBAAiB,EAAE,gBAAgB,EAAkB,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAGtH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAErD,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,gBAAgB,CAAC;IAC1B,QAAQ,EAAE,iBAAiB,GAAG,MAAM,CAAC;IACrC,OAAO,EAAE,gBAAgB,CAAC;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,iFAAiF;IACjF,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CAC3C;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC,EAAE,kBAAkB,GAAG,SAAS,CAa/E;AAED,yGAAyG;AACzG,eAAO,MAAM,SAAS;;8BAoBrB,CAAC"}
+{"version":3,"file":"Container.native.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/Container/Container.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAuB,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AASzE,OAAO,KAAK,EAAE,iBAAiB,EAAE,gBAAgB,EAAkB,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAGtH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAErD,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,gBAAgB,CAAC;IAC1B,QAAQ,EAAE,iBAAiB,GAAG,MAAM,CAAC;IACrC,OAAO,EAAE,gBAAgB,CAAC;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,iFAAiF;IACjF,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CAC3C;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC,EAAE,kBAAkB,GAAG,SAAS,CAc/E;AAED,yGAAyG;AACzG,eAAO,MAAM,SAAS;;8BAoBrB,CAAC"}

package/package.json

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

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

@@ -66,22 +66,36 @@ export function resolveContainerMaxWidth(
 }
 
 /**
- * The inset every side of the container is PAINTED with, in spacing units.
+ * The inset every side of the container is painted with, in spacing units.
  *
- * This is the web's painted result, not its declared intent, and two of its
- * rules are worth knowing before reaching for them:
- *
- * - `padding="none"` paints the default. The web reads its map with `||`, so
- *   `none`'s 0 falls through to `md`.
- * - `variant="padded"` paints the same inset as `default`. The web declares its
- *   {@link CONTAINER_PADDED_VERTICAL_UNITS} above and below BEFORE the
- *   `padding` shorthand, which therefore overrides them.
- *
- * Both renderers read this one function so they agree today; either fix is a
- * change to the web's emitted CSS and to this function, made together.
+ * `??`, not `||`: `none` is 0, and 0 is falsy. Reading the map with `||` sent
+ * `padding="none"` through to the `md` default, so the one value a caller
+ * would reach for to remove the inset was the one value that could not.
+ * A word outside the vocabulary still reads as the default.
  */
 export function containerPaddingUnits(padding: ContainerPadding | string, compact: boolean): number {
   if (compact) return CONTAINER_COMPACT_PADDING_UNITS;
   const units = (CONTAINER_PADDING_UNITS as Record<string, number | undefined>)[padding];
-  return units || CONTAINER_PADDING_UNITS[CONTAINER_DEFAULT_PADDING];
+  return units ?? CONTAINER_PADDING_UNITS[CONTAINER_DEFAULT_PADDING];
+}
+
+/**
+ * What `variant="padded"` paints above and below, in spacing units — the
+ * horizontal inset stays whatever `padding` says.
+ *
+ * The variant used to paint nothing of its own: the web declared these before
+ * the `padding` shorthand, which overrode them, and the native half copied the
+ * painted result so the two would agree. Now both read this.
+ *
+ * A `responsive` container under {@link CONTAINER_COMPACT_BELOW} compacts, as
+ * every other inset does; a tall vertical inset is the first thing a phone
+ * cannot spare.
+ */
+export function containerVerticalUnits(
+  variant: ContainerVariant,
+  padding: ContainerPadding | string,
+  compact: boolean,
+): number {
+  if (variant !== 'padded') return containerPaddingUnits(padding, compact);
+  return compact ? CONTAINER_COMPACT_PADDING_UNITS : CONTAINER_PADDED_VERTICAL_UNITS;
 }

package/src/components/layout/Container/Container.native.tsx

@@ -5,6 +5,7 @@ import {
   CONTAINER_COMPACT_BELOW,
   CONTAINER_MAX_WIDTHS,
   containerPaddingUnits,
+  containerVerticalUnits,
   resolveContainerMaxWidth,
 } from './Container.metrics';
 import type { ContainerMaxWidth, ContainerPadding, ContainerProps, ContainerVariant } from './Container.types.native';
@@ -27,8 +28,8 @@ export interface ContainerStyleArgs {
  * `width: 100%` between auto margins is MUI's own centring rule; `maxWidth` is
  * the breakpoint the web applies under `min-width` (below it the column is
  * narrower anyway); the `responsive` media query becomes a window-width test;
- * `centered`'s `100vh` becomes the window height. `padded` and `padding="none"`
- * paint what the web paints — see `containerPaddingUnits`.
+ * `centered`'s `100vh` becomes the window height. `padded`'s vertical inset
+ * and `padding="none"`'s zero come from the same two functions the web reads.
  */
 export function containerStyle(theme: UiTheme, a: ContainerStyleArgs): ViewStyle {
   const compact = a.responsive && a.window.width < CONTAINER_COMPACT_BELOW;
@@ -39,6 +40,7 @@ export function containerStyle(theme: UiTheme, a: ContainerStyleArgs): ViewStyle
     marginRight: 'auto',
     maxWidth: limit === false ? undefined : CONTAINER_MAX_WIDTHS[limit],
     padding: theme.spacing(containerPaddingUnits(a.padding, compact)),
+    paddingVertical: theme.spacing(containerVerticalUnits(a.variant, a.padding, compact)),
     ...(a.variant === 'centered'
       ? { alignItems: 'center', justifyContent: 'center', minHeight: a.window.height }
       : null),

package/src/components/layout/Container/Container.tsx

@@ -5,8 +5,8 @@ import React from 'react';
 
 import {
   CONTAINER_COMPACT_PADDING_UNITS,
-  CONTAINER_PADDED_VERTICAL_UNITS,
   containerPaddingUnits,
+  containerVerticalUnits,
   resolveContainerMaxWidth,
 } from './Container.metrics';
 import type { ContainerProps } from './Container.types';
@@ -38,14 +38,20 @@ export const Container: React.FC<ContainerProps> = ({
       justifyContent: 'center',
       minHeight: '100vh',
     }),
+    // The shorthand FIRST: a `paddingTop` declared before it is overridden by
+    // it, which is how `variant="padded"` painted no vertical inset at all.
+    padding: theme.spacing(containerPaddingUnits(padding, false)),
     ...(variant === 'padded' && {
-      paddingTop: theme.spacing(CONTAINER_PADDED_VERTICAL_UNITS),
-      paddingBottom: theme.spacing(CONTAINER_PADDED_VERTICAL_UNITS),
+      paddingTop: theme.spacing(containerVerticalUnits(variant, padding, false)),
+      paddingBottom: theme.spacing(containerVerticalUnits(variant, padding, false)),
     }),
-    padding: theme.spacing(containerPaddingUnits(padding, false)),
     ...(responsive && {
       [theme.breakpoints.down('sm')]: {
         padding: theme.spacing(CONTAINER_COMPACT_PADDING_UNITS),
+        ...(variant === 'padded' && {
+          paddingTop: theme.spacing(containerVerticalUnits(variant, padding, true)),
+          paddingBottom: theme.spacing(containerVerticalUnits(variant, padding, true)),
+        }),
       },
     }),
     ...(sx || {}),

package/src/components/layout/Container/NATIVE-NOTES.md

@@ -1,5 +1,3 @@
 # Container on React Native — known gaps
 
-- `variant="padded"` adds no vertical padding on either renderer: the web declares its 64px above and below BEFORE the `padding` shorthand, which overrides them, and native paints the same insets so the two agree. The fix is a web change (`Container.tsx` order) plus `containerPaddingUnits`, made together.
-- `padding="none"` paints the `md` inset on either renderer: the web reads its map with `||`, so `none`'s 0 falls through to the default. Same one-place fix.
 - `responsive` reads `useWindowDimensions().width < 600` in place of MUI's `sm` media query, and `centered` reads the window height in place of `100vh`; both track the window, as CSS would, but a container inside a narrower parent still measures the window, not the parent.

package/dist/chunk-LLABVZM3.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/layout/Container/Container.tsx"],"sourcesContent":["import MuiContainer from '@mui/material/Container/index.js';\nimport { useTheme } from '@mui/material/styles/index.js';\nimport type { SxProps, Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport {\n  CONTAINER_COMPACT_PADDING_UNITS,\n  CONTAINER_PADDED_VERTICAL_UNITS,\n  containerPaddingUnits,\n  resolveContainerMaxWidth,\n} from './Container.metrics';\nimport type { ContainerProps } from './Container.types';\nimport { resolveTestId, withoutTestIdProps } from '../../../platform/test-id';\n\nexport const Container: React.FC<ContainerProps> = ({\n  children,\n  maxWidth = 'lg',\n  variant = 'default',\n  padding = 'md',\n  responsive = true,\n  sx,\n  ...others\n}) => {\n  const theme = useTheme();\n  // `testID` and `dataTestId` are the shared contract's spellings; the DOM\n  // wants `data-testid`, and must not see the other two as attributes.\n  const testId = resolveTestId(others, 'container');\n  const props = withoutTestIdProps(others);\n\n  // From the shared metrics, not tables of our own: the native `Container`\n  // reads the same units and the same max-width rule, so the two renderers\n  // cannot disagree on an inset or a column width.\n  const containerStyles: SxProps<Theme> = {\n    ...(variant === 'centered' && {\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'center',\n      justifyContent: 'center',\n      minHeight: '100vh',\n    }),\n    ...(variant === 'padded' && {\n      paddingTop: theme.spacing(CONTAINER_PADDED_VERTICAL_UNITS),\n      paddingBottom: theme.spacing(CONTAINER_PADDED_VERTICAL_UNITS),\n    }),\n    padding: theme.spacing(containerPaddingUnits(padding, false)),\n    ...(responsive && {\n      [theme.breakpoints.down('sm')]: {\n        padding: theme.spacing(CONTAINER_COMPACT_PADDING_UNITS),\n      },\n    }),\n    ...(sx || {}),\n  };\n\n  return (\n    <MuiContainer\n      maxWidth={resolveContainerMaxWidth(variant, maxWidth)}\n      sx={containerStyles}\n      data-testid={testId}\n      {...props}\n    >\n      {children}\n    </MuiContainer>\n  );\n};\n"],"mappings":";;;;;;;;;;;;AAAA,OAAO,kBAAkB;AACzB,SAAS,gBAAgB;AAqDrB;AAxCG,IAAM,YAAsC,CAAC;AAAA,EAClD;AAAA,EACA,WAAW;AAAA,EACX,UAAU;AAAA,EACV,UAAU;AAAA,EACV,aAAa;AAAA,EACb;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,QAAQ,SAAS;AAGvB,QAAM,SAAS,cAAc,QAAQ,WAAW;AAChD,QAAM,QAAQ,mBAAmB,MAAM;AAKvC,QAAM,kBAAkC;AAAA,IACtC,GAAI,YAAY,cAAc;AAAA,MAC5B,SAAS;AAAA,MACT,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,WAAW;AAAA,IACb;AAAA,IACA,GAAI,YAAY,YAAY;AAAA,MAC1B,YAAY,MAAM,QAAQ,+BAA+B;AAAA,MACzD,eAAe,MAAM,QAAQ,+BAA+B;AAAA,IAC9D;AAAA,IACA,SAAS,MAAM,QAAQ,sBAAsB,SAAS,KAAK,CAAC;AAAA,IAC5D,GAAI,cAAc;AAAA,MAChB,CAAC,MAAM,YAAY,KAAK,IAAI,CAAC,GAAG;AAAA,QAC9B,SAAS,MAAM,QAAQ,+BAA+B;AAAA,MACxD;AAAA,IACF;AAAA,IACA,GAAI,MAAM,CAAC;AAAA,EACb;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,yBAAyB,SAAS,QAAQ;AAAA,MACpD,IAAI;AAAA,MACJ,eAAa;AAAA,MACZ,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;","names":[]}