StaticContainer

import {StaticContainer, TextView, TextStyle} from '@wearables-ui-toolkit/mrbd';

function ServiceNotice() {
  return (
    <StaticContainer>
      <TextView className="notice-body" textStyle={TextStyle.BODY1}>
        Service resumes after the scheduled inspection.
      </TextView>
    </StaticContainer>
  );
}

.notice-body {
  padding: var(--uit-spacing-large);
}

import {BackgroundStyle, StaticContainer} from '@wearables-ui-toolkit/mrbd';

<StaticContainer backgroundStyle={BackgroundStyle.NONE}>
  <img className="clipped-media" src={posterUrl} alt="" />
</StaticContainer>;

import {StaticContainer, TextView, TextStyle} from '@wearables-ui-toolkit/mrbd';
import {useEffect, useState} from 'react';

function StatusPill({status}: {status: string}) {
  const [transitionToken, setTransitionToken] = useState(0);

  useEffect(() => {
    setTransitionToken(token => token + 1);
  }, [status]);

  return (
    <StaticContainer
      layoutTransitionToken={transitionToken}
      layoutTransitionAnchor="start"
    >
      <TextView className="status-pill" textStyle={TextStyle.META1}>
        {status}
      </TextView>
    </StaticContainer>
  );
}

• No interaction.StaticContainer has no tab index, focus or press handling, activation, or content-scale animation. Use Container when a composition needs interaction so the toolkit can provide consistent focus, press, and keyboard behavior.
• Fixed visual state. The toolkit holds the material at visualState until that prop changes. BackgroundStyle.NONE always resolves to VisualState.NONE, regardless of visualState, and hides the material.
• Hidden material is not rendered. The toolkit removes material layers from the tree when the resolved state is NONE or the material is hidden or fully transparent, rather than rendering invisible layers.
• Material opacity stays on the material. The toolkit multiplies the material’s own alpha and per-state alpha on the layer wrappers, never on the root. A translucent backdrop therefore leaves content at its authored opacity.
• Smooth corners need a size. The toolkit generates the smooth path after it knows the size from numeric width and height props or measurement. Auto-sized content receives the same measured path for its clip and material. Until the size is known, and whenever useSmoothCorners is false, the toolkit uses the shape provider’s plain CSS border radius.
• Geometry uses the untransformed box. The toolkit derives material paths and canvas sizes from the border box, so a StaticContainer inside a scaled ancestor still draws its material at full size.
• Material insets. When a material declares an inset, the toolkit places its layers inside the element box and regenerates their path at the smaller size.
• Clipping and stacking.clipContent clips only the caller’s content subtree, allowing material overflow such as a glow stroke or drop shadow to remain visible. The root establishes a stacking context so background layers paint behind content and foreground layers paint above it. If the material declares backdrop blending, the root instead opens that context and receives data-uit-background-blends-with-backdrop.
• Layout transitions. Intrinsic content changes would otherwise snap the box and material to a new size. Increment layoutTransitionToken or change layoutTransitionSignature to ask the toolkit to animate the size, material bounds, material canvases, and content clip on one clock. layoutTransitionAnchor selects the fixed edge, and onLayoutTransitionComplete runs at the end. The toolkit skips a transition when start and end sizes match and clears any remaining transition geometry. It also skips transitions when the user prefers reduced motion.
• Content sizing. The root is an inline flex box and hugs its content by default. The content wrapper fills the box when width or height is explicit and hugs its content when both remain 'auto'.

• Inset authored, non-full-bleed content with var(--uit-spacing-large), and let full-bleed media use the component’s clipping.
• Use BackgroundStyle.NONE when the application needs shape and clipping without a visible backdrop.
• Give every mounted container its own material instance and keep it stable with useMemo. Immutable shape providers can be shared.
• Increment layoutTransitionToken when an application-owned content change resizes the box, so the toolkit can keep material and clip geometry synchronized.
• Keep an inset rounded child concentric with its owner by choosing the corner-radius token equal to the owner’s radius minus the inset token.

• Do not nest Container, StaticContainer, Surface, Button, Chip, Tag, or Header inside a StaticContainer. These components each own surface or interaction behavior, so nesting produces an unsupported composition.
• Prefer the corresponding component or ordinary text hierarchy instead of stretching one short label, count, or status across a full-width rounded StaticContainer to imitate a Tag, Chip, Header, or Button.
• Avoid another rounded surface around text that already sits on a static material; one surface owner keeps the hierarchy clear.
• Do not add click handlers to imitate an interactive surface. StaticContainer has no focus, press, or keyboard support; use Container for an accessible interaction target.
• Do not reconstruct an unsupported variant of an existing component from foundation primitives. Treat that need as a library gap so behavior and accessibility remain consistent.