@1money/component-ui 0.0.95-alpha.1 → 0.0.95-alpha.10

package/es/components/ActionBar/constants.d.ts

@@ -22,6 +22,14 @@ export type ActionBarLayout = (typeof ACTION_BAR_LAYOUTS)[number];
  *   "Dialog Body" spec).
  */
 export declare const ACTION_BAR_BUTTON_SIZE: Record<ActionBarLayout, ButtonSize>;
+/**
+ * Footnote row alignment. The DS uses `center` for a prompt + action pair and
+ * `start` for a bare action link sitting under the buttons (the auth card's
+ * "Forgot your password?", Figma 39579:28516).
+ */
+export declare const ACTION_BAR_FOOTNOTE_ALIGNS: readonly ["center", "start"];
+export type ActionBarFootnoteAlign = (typeof ACTION_BAR_FOOTNOTE_ALIGNS)[number];
+export declare const ACTION_BAR_FOOTNOTE_DEFAULT_ALIGN: ActionBarFootnoteAlign;
 export declare const ACTION_BAR_SLOT: {
     readonly root: "root";
     readonly actions: "actions";

package/es/components/ActionBar/constants.js

@@ -22,9 +22,16 @@ export var ACTION_BAR_BUTTON_SIZE = {
   fill: 'large',
   compact: 'medium'
 };
+/**
+ * Footnote row alignment. The DS uses `center` for a prompt + action pair and
+ * `start` for a bare action link sitting under the buttons (the auth card's
+ * "Forgot your password?", Figma 39579:28516).
+ */
+export var ACTION_BAR_FOOTNOTE_ALIGNS = ['center', 'start'];
+export var ACTION_BAR_FOOTNOTE_DEFAULT_ALIGN = 'center';
 export var ACTION_BAR_SLOT = {
   root: 'root',
   actions: 'actions',
   footnote: 'footnote'
 };
-//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvc3JjL2NvbXBvbmVudHMvQWN0aW9uQmFyL2NvbnN0YW50cy50cyIsImNvbXBvbmVudHMvQWN0aW9uQmFyL2NvbnN0YW50cy5qcyJdLCJuYW1lcyI6WyJBQ1RJT05fQkFSX1BSRUZJWCIsIkFDVElPTl9CQVJfREVGQVVMVFMiLCJwcmltYXJ5TGFiZWwiLCJzZWNvbmRhcnlMYWJlbCIsInByaW1hcnlDb2xvciIsInNlY29uZGFyeUNvbG9yIiwiQUNUSU9OX0JBUl9MQVlPVVRTIiwiQUNUSU9OX0JBUl9ESVJFQ1RJT05TIiwiQUNUSU9OX0JBUl9CVVRUT05fU0laRSIsImZpbGwiLCJjb21wYWN0IiwiQUNUSU9OX0JBUl9TTE9UIiwicm9vdCIsImFjdGlvbnMiLCJmb290bm90ZSJdLCJtYXBwaW5ncyI6IkFBRUEsT0FBTyxJQUFNQSxpQkFBaUIsR0FBRyxZQUFZO0FBRTdDO0FDRkE7QUFDQTtBQUNBO0FESUEsT0FBTyxJQUFNQyxtQkFBbUIsR0FBRztFQUNqQ0MsWUFBWSxFQUFFLFNBQVM7RUFDdkJDLGNBQWMsRUFBRSxRQUFRO0VBQ3hCQyxZQUFZLEVBQUUsU0FBcUQ7RUFDbkVDLGNBQWMsRUFBRTtBQ0ZsQixDREdVO0FBRVYsT0FBTyxJQUFNQyxrQkFBa0IsR0FBRyxDQUFDLE1BQU0sRUFBRSxTQUFTLENBQVU7QUFFOUQsT0FBTyxJQUFNQyxxQkFBcUIsR0FBRyxDQUFDLFlBQVksRUFBRSxVQUFVLENBQVU7QUFXeEU7QUNkQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QURnQkEsT0FBTyxJQUFNQyxzQkFBc0IsR0FBd0M7RUFDekVDLElBQUksRUFBRSxPQUFPO0VBQ2JDLE9BQU8sRUFBRTtBQ2RYLENEZUM7QUFFRCxPQUFPLElBQU1DLGVBQWUsR0FBRztFQUM3QkMsSUFBSSxFQUFFLE1BQU07RUFDWkMsT0FBTyxFQUFFLFNBQVM7RUFDbEJDLFFBQVEsRUFBRTtBQ2ZaLENEZ0JVIiwiZmlsZSI6ImNvbXBvbmVudHMvQWN0aW9uQmFyL2NvbnN0YW50cy5qcyIsInNvdXJjZXNDb250ZW50IjpbbnVsbCwiZXhwb3J0IGNvbnN0IEFDVElPTl9CQVJfUFJFRklYID0gJ2FjdGlvbi1iYXInO1xuLyoqXG4gKiBHZW5lcmljLCBvdmVycmlkYWJsZSBVSSB2b2NhYnVsYXJ5IOKAlCBOT1QgcHJvZHVjdCBjb3B5LiBTY2VuYXJpbyBjb3B5XG4gKiAodGl0bGVzLCBkZXNjcmlwdGlvbnMsIHNjZW5hcmlvIGJ1dHRvbiBsYWJlbHMpIGFsd2F5cyBjb21lcyBmcm9tIGNvbnN1bWVycy5cbiAqL1xuZXhwb3J0IGNvbnN0IEFDVElPTl9CQVJfREVGQVVMVFMgPSB7XG4gICAgcHJpbWFyeUxhYmVsOiAnQ29uZmlybScsXG4gICAgc2Vjb25kYXJ5TGFiZWw6ICdDYW5jZWwnLFxuICAgIHByaW1hcnlDb2xvcjogJ3ByaW1hcnknLFxuICAgIHNlY29uZGFyeUNvbG9yOiAnZ3JleScsXG59O1xuZXhwb3J0IGNvbnN0IEFDVElPTl9CQVJfTEFZT1VUUyA9IFsnZmlsbCcsICdjb21wYWN0J107XG5leHBvcnQgY29uc3QgQUNUSU9OX0JBUl9ESVJFQ1RJT05TID0gWydob3Jpem9udGFsJywgJ3ZlcnRpY2FsJ107XG4vKipcbiAqIExheW91dCBpcyBjaG9zZW4gYnkgdGhlIFNDRU5BUklPIFNIRUxMLCBuZXZlciBieSBidXNpbmVzcyBjb2RlOlxuICogLSBgZmlsbGAg4oCUIGJ1dHRvbnMgc2hhcmUgdGhlIGZ1bGwgcm93IChyZXN1bHQgZGlhbG9ncywgcGFnZSBmb3Jtcyk7XG4gKiAgIG9uZSBhY3Rpb24gc3BhbnMgdGhlIHJvdywgdHdvIHNwbGl0IGl0IGV2ZW5seS5cbiAqIC0gYGNvbXBhY3RgIOKAlCBhdXRvLXdpZHRoIGJ1dHRvbnMsIGxlZnQtYWxpZ25lZCAoZm9ybSBkaWFsb2dzLCBwZXIgdGhlIERTXG4gKiAgIFwiRGlhbG9nIEJvZHlcIiBzcGVjKS5cbiAqL1xuZXhwb3J0IGNvbnN0IEFDVElPTl9CQVJfQlVUVE9OX1NJWkUgPSB7XG4gICAgZmlsbDogJ2xhcmdlJyxcbiAgICBjb21wYWN0OiAnbWVkaXVtJyxcbn07XG5leHBvcnQgY29uc3QgQUNUSU9OX0JBUl9TTE9UID0ge1xuICAgIHJvb3Q6ICdyb290JyxcbiAgICBhY3Rpb25zOiAnYWN0aW9ucycsXG4gICAgZm9vdG5vdGU6ICdmb290bm90ZScsXG59OyJdLCJzb3VyY2VSb290IjoiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjIn0=
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvc3JjL2NvbXBvbmVudHMvQWN0aW9uQmFyL2NvbnN0YW50cy50cyIsImNvbXBvbmVudHMvQWN0aW9uQmFyL2NvbnN0YW50cy5qcyJdLCJuYW1lcyI6WyJBQ1RJT05fQkFSX1BSRUZJWCIsIkFDVElPTl9CQVJfREVGQVVMVFMiLCJwcmltYXJ5TGFiZWwiLCJzZWNvbmRhcnlMYWJlbCIsInByaW1hcnlDb2xvciIsInNlY29uZGFyeUNvbG9yIiwiQUNUSU9OX0JBUl9MQVlPVVRTIiwiQUNUSU9OX0JBUl9ESVJFQ1RJT05TIiwiQUNUSU9OX0JBUl9CVVRUT05fU0laRSIsImZpbGwiLCJjb21wYWN0IiwiQUNUSU9OX0JBUl9GT09UTk9URV9BTElHTlMiLCJBQ1RJT05fQkFSX0ZPT1ROT1RFX0RFRkFVTFRfQUxJR04iLCJBQ1RJT05fQkFSX1NMT1QiLCJyb290IiwiYWN0aW9ucyIsImZvb3Rub3RlIl0sIm1hcHBpbmdzIjoiQUFFQSxPQUFPLElBQU1BLGlCQUFpQixHQUFHLFlBQVk7QUFFN0M7QUNGQTtBQUNBO0FBQ0E7QURJQSxPQUFPLElBQU1DLG1CQUFtQixHQUFHO0VBQ2pDQyxZQUFZLEVBQUUsU0FBUztFQUN2QkMsY0FBYyxFQUFFLFFBQVE7RUFDeEJDLFlBQVksRUFBRSxTQUFxRDtFQUNuRUMsY0FBYyxFQUFFO0FDRmxCLENER1U7QUFFVixPQUFPLElBQU1DLGtCQUFrQixHQUFHLENBQUMsTUFBTSxFQUFFLFNBQVMsQ0FBVTtBQUU5RCxPQUFPLElBQU1DLHFCQUFxQixHQUFHLENBQUMsWUFBWSxFQUFFLFVBQVUsQ0FBVTtBQVd4RTtBQ2RBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBRGdCQSxPQUFPLElBQU1DLHNCQUFzQixHQUF3QztFQUN6RUMsSUFBSSxFQUFFLE9BQU87RUFDYkMsT0FBTyxFQUFFO0FDZFgsQ0RlQztBQUVEO0FDZkE7QUFDQTtBQUNBO0FBQ0E7QURpQkEsT0FBTyxJQUFNQywwQkFBMEIsR0FBRyxDQUFDLFFBQVEsRUFBRSxPQUFPLENBQVU7QUFJdEUsT0FBTyxJQUFNQyxpQ0FBaUMsR0FBMkIsUUFBUTtBQUVqRixPQUFPLElBQU1DLGVBQWUsR0FBRztFQUM3QkMsSUFBSSxFQUFFLE1BQU07RUFDWkMsT0FBTyxFQUFFLFNBQVM7RUFDbEJDLFFBQVEsRUFBRTtBQ25CWixDRG9CVSIsImZpbGUiOiJjb21wb25lbnRzL0FjdGlvbkJhci9jb25zdGFudHMuanMiLCJzb3VyY2VzQ29udGVudCI6W251bGwsImV4cG9ydCBjb25zdCBBQ1RJT05fQkFSX1BSRUZJWCA9ICdhY3Rpb24tYmFyJztcbi8qKlxuICogR2VuZXJpYywgb3ZlcnJpZGFibGUgVUkgdm9jYWJ1bGFyeSDigJQgTk9UIHByb2R1Y3QgY29weS4gU2NlbmFyaW8gY29weVxuICogKHRpdGxlcywgZGVzY3JpcHRpb25zLCBzY2VuYXJpbyBidXR0b24gbGFiZWxzKSBhbHdheXMgY29tZXMgZnJvbSBjb25zdW1lcnMuXG4gKi9cbmV4cG9ydCBjb25zdCBBQ1RJT05fQkFSX0RFRkFVTFRTID0ge1xuICAgIHByaW1hcnlMYWJlbDogJ0NvbmZpcm0nLFxuICAgIHNlY29uZGFyeUxhYmVsOiAnQ2FuY2VsJyxcbiAgICBwcmltYXJ5Q29sb3I6ICdwcmltYXJ5JyxcbiAgICBzZWNvbmRhcnlDb2xvcjogJ2dyZXknLFxufTtcbmV4cG9ydCBjb25zdCBBQ1RJT05fQkFSX0xBWU9VVFMgPSBbJ2ZpbGwnLCAnY29tcGFjdCddO1xuZXhwb3J0IGNvbnN0IEFDVElPTl9CQVJfRElSRUNUSU9OUyA9IFsnaG9yaXpvbnRhbCcsICd2ZXJ0aWNhbCddO1xuLyoqXG4gKiBMYXlvdXQgaXMgY2hvc2VuIGJ5IHRoZSBTQ0VOQVJJTyBTSEVMTCwgbmV2ZXIgYnkgYnVzaW5lc3MgY29kZTpcbiAqIC0gYGZpbGxgIOKAlCBidXR0b25zIHNoYXJlIHRoZSBmdWxsIHJvdyAocmVzdWx0IGRpYWxvZ3MsIHBhZ2UgZm9ybXMpO1xuICogICBvbmUgYWN0aW9uIHNwYW5zIHRoZSByb3csIHR3byBzcGxpdCBpdCBldmVubHkuXG4gKiAtIGBjb21wYWN0YCDigJQgYXV0by13aWR0aCBidXR0b25zLCBsZWZ0LWFsaWduZWQgKGZvcm0gZGlhbG9ncywgcGVyIHRoZSBEU1xuICogICBcIkRpYWxvZyBCb2R5XCIgc3BlYykuXG4gKi9cbmV4cG9ydCBjb25zdCBBQ1RJT05fQkFSX0JVVFRPTl9TSVpFID0ge1xuICAgIGZpbGw6ICdsYXJnZScsXG4gICAgY29tcGFjdDogJ21lZGl1bScsXG59O1xuLyoqXG4gKiBGb290bm90ZSByb3cgYWxpZ25tZW50LiBUaGUgRFMgdXNlcyBgY2VudGVyYCBmb3IgYSBwcm9tcHQgKyBhY3Rpb24gcGFpciBhbmRcbiAqIGBzdGFydGAgZm9yIGEgYmFyZSBhY3Rpb24gbGluayBzaXR0aW5nIHVuZGVyIHRoZSBidXR0b25zICh0aGUgYXV0aCBjYXJkJ3NcbiAqIFwiRm9yZ290IHlvdXIgcGFzc3dvcmQ/XCIsIEZpZ21hIDM5NTc5OjI4NTE2KS5cbiAqL1xuZXhwb3J0IGNvbnN0IEFDVElPTl9CQVJfRk9PVE5PVEVfQUxJR05TID0gWydjZW50ZXInLCAnc3RhcnQnXTtcbmV4cG9ydCBjb25zdCBBQ1RJT05fQkFSX0ZPT1ROT1RFX0RFRkFVTFRfQUxJR04gPSAnY2VudGVyJztcbmV4cG9ydCBjb25zdCBBQ1RJT05fQkFSX1NMT1QgPSB7XG4gICAgcm9vdDogJ3Jvb3QnLFxuICAgIGFjdGlvbnM6ICdhY3Rpb25zJyxcbiAgICBmb290bm90ZTogJ2Zvb3Rub3RlJyxcbn07Il0sInNvdXJjZVJvb3QiOiIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9zcmMifQ==

package/es/components/ActionBar/interface.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import type { ButtonColor, ButtonProps, ButtonSize } from "../Button";
-import type { ActionBarDirection, ActionBarLayout } from './constants';
-export type { ActionBarDirection, ActionBarLayout } from './constants';
+import type { ActionBarDirection, ActionBarFootnoteAlign, ActionBarLayout } from './constants';
+export type { ActionBarDirection, ActionBarFootnoteAlign, ActionBarLayout } from './constants';
 /**
  * One footer action. The bar owns size, order, and layout; consumers only
  * supply label, behavior, and (optionally) a color tone override.
@@ -48,7 +48,7 @@ export interface ActionBarAction {
  */
 export type ActionBarPrimarySlot = ReactNode;
 /**
- * Optional centered footnote row under the actions, e.g.
+ * Optional footnote row under the actions, e.g.
  * `"Don't have access to your 2FA?  Reset 2FA"`.
  */
 export interface ActionBarFootnote {
@@ -56,9 +56,32 @@ export interface ActionBarFootnote {
     prompt?: ReactNode;
     /** Trailing brand-colored action text. */
     action?: ReactNode;
+    /**
+     * Row alignment. Defaults to `center` (the prompt + action pair). Use
+     * `start` for a bare action link under the buttons — the auth card's
+     * "Forgot your password?" sits left-aligned while the passkey row below it
+     * stays centered.
+     */
+    align?: ActionBarFootnoteAlign;
+    /**
+     * Destination for an action that navigates. The action already renders as
+     * an anchor, so giving it the `href` is what makes it behave like the link
+     * it looks like — open-in-new-tab, middle click, copy address, and the
+     * status bar preview all come back. Handing it an `onClick` that navigates
+     * instead leaves an anchor with no destination, which none of those work on.
+     */
+    href?: string;
+    /** Anchor target, e.g. `_blank`. Only meaningful with `href`. */
+    target?: string;
+    /** Anchor rel, e.g. `noopener noreferrer`. Only meaningful with `href`. */
+    rel?: string;
     /** Fires when the action text is clicked or activated via keyboard. */
     onClick?: () => void;
-    /** Render a hairline divider above the row (matches the OTP dialog design). */
+    /**
+     * Render a hairline divider above the row (matches the OTP dialog design).
+     * The divider is a row of the bar in its own right, so the bar's uniform
+     * gap surrounds it — it carries no margin of its own.
+     */
     divided?: boolean;
 }
 export interface ActionBarProps {
@@ -69,8 +92,13 @@ export interface ActionBarProps {
      */
     layout?: ActionBarLayout;
     /**
-     * Arrangement: `horizontal` (default) or `vertical` (stacked, each button
-     * full-width — result-dialog style).
+     * Arrangement: `horizontal` (default — two actions split the row) or
+     * `vertical` (stacked, each button full-width).
+     *
+     * The default applies everywhere, result surfaces included: `PanelLayout`
+     * and `BaseDialog` pass this straight through and set no default of their
+     * own. `vertical` is opt-in, for flows that want the actions read
+     * top-to-bottom rather than weighed side by side.
      */
     direction?: ActionBarDirection;
     /**
@@ -81,8 +109,14 @@ export interface ActionBarProps {
     primarySlot?: ReactNode;
     /** Optional secondary (left) action. */
     secondary?: ActionBarAction;
-    /** Optional centered footnote row below the actions. */
-    footnote?: ActionBarFootnote;
+    /**
+     * Footnote row(s) below the actions. Pass an array for surfaces that stack
+     * more than one — the auth card (Figma 39579:28516) puts a left-aligned
+     * "Forgot your password?" directly under the buttons, then a divided,
+     * centered passkey row. Rows render in array order and are spaced by the
+     * bar's own gap.
+     */
+    footnote?: ActionBarFootnote | ActionBarFootnote[];
     /** CSS class prefix. */
     prefixCls?: string;
     /** Additional class on the root element. */

package/es/components/ActionBar/style/ActionBar.css

@@ -41,4 +41,7 @@
 }
 .om-component-ui-action-bar-footnote a {
   cursor: pointer;
+}
+.om-component-ui-action-bar > .om-component-ui-divider {
+  margin: 0;
 }

package/es/components/Dialog/interface.d.ts

@@ -15,10 +15,16 @@ export interface DialogProps extends Omit<HTMLAttributes<HTMLDivElement>, 'child
     fullWidth?: boolean;
     fixed?: boolean;
     /**
-     * Bare panel mode: keep the overlay machinery (portal, mask, Esc, close /
-     * back controls, viewport max-height, width presets) but render NO panel
-     * chrome and NO header/body/footer slots — children fill the panel
-     * directly. For surfaces that bring their own chrome (e.g. FormLayout).
+     * Bare panel mode: keep the overlay machinery (portal, mask, Esc, the close
+     * control, viewport max-height, width presets) but render NO panel chrome
+     * and NO header/body/footer slots — children fill the panel directly. For
+     * surfaces that bring their own chrome (e.g. FormLayout).
+     *
+     * `showBackIcon` is NOT honoured here. The close control is absolutely
+     * positioned overlay chrome and works in either mode, but the back arrow
+     * takes its own row in the content flow — and a bare panel has no content
+     * flow to put it in. A bare host that needs one renders it into its own
+     * surface instead (PanelLayout takes `showBackIcon`/`onBack` of its own).
      */
     bare?: boolean;
     width?: number | string;

package/es/components/FormLayout/config.d.ts

@@ -50,24 +50,28 @@ export type FormLayoutSize = (typeof FORM_LAYOUT_SIZES)[number];
 /**
  * Per-size density overrides on a variant's baseline (the baseline IS the
  * `large` size). Only `page/small` exists today — the compact auth-card
- * surface (448 wide, matching the app's sign-in card): a narrower panel with
- * 24 padding and a uniform 16 spacing (row gap, column gutter, AND the region
- * gap between header / fields / footer). It is tighter than the baseline in
- * width and padding, but its 16 row gap / column gutter are LOOSER than the
- * baseline's 12 — the auth card is deliberately airier between fields.
- * Only `actionGap` and `controlSize` fall back to the baseline. A variant/size with no entry
- * uses the baseline unchanged, so `large` never needs an entry. `modal`
- * intentionally has no `small`: the 380 confirm/result dialog is BaseDialog,
- * which is not a form surface and does not use FormLayout.
+ * surface: a narrower, less padded panel that keeps the page baseline's gap
+ * rhythm untouched (12 row gap / 12 column gutter / 16 region gap), so a field
+ * stack reads identically in the auth card and in the full-width page form.
+ * Width and padding are the ONLY deviations.
+ *
+ * Its 380 width is the SAME number `PanelLayout` uses, and deliberately so:
+ * an auth flow swaps a form card for a result panel in place (forgot-password
+ * → "we've sent a link"), so a different width would make the card jump.
+ * The two tables still hold it separately — they are different surfaces that
+ * happen to agree, not one value with two readers.
+ *
+ * Every gap (rowGap / colGutter / regionGap / actionGap) plus `controlSize`
+ * falls back to the baseline. A variant/size with no entry uses the baseline
+ * unchanged, so `large` never needs an entry. `modal` intentionally has no
+ * `small`: the confirm/result dialog is BaseDialog, which is not a form
+ * surface and does not use FormLayout.
  */
 export declare const FORM_LAYOUT_SIZE: {
     readonly page: {
         readonly small: {
-            readonly width: 448;
+            readonly width: 380;
             readonly padding: 24;
-            readonly rowGap: 16;
-            readonly colGutter: 16;
-            readonly regionGap: 16;
         };
     };
 };
@@ -77,18 +81,18 @@ export declare const FORM_LAYOUT_SIZE: {
  * (BaseProForm) read, so width / padding / gaps / control size never diverge.
  */
 export declare const resolveFormLayoutConfig: (variant: FormLayoutVariant, size?: FormLayoutSize) => {
-    width: 640 | 448;
+    width: 640 | 380;
     padding: 24;
-    rowGap: 16 | 12;
-    colGutter: 16 | 12;
+    rowGap: 12;
+    colGutter: 12;
     regionGap: 16;
     actionGap: 12;
     controlSize: "small";
 } | {
-    width: 738 | 448;
+    width: 738 | 380;
     padding: 32 | 24;
-    rowGap: 16 | 12;
-    colGutter: 16 | 12;
+    rowGap: 12;
+    colGutter: 12;
     regionGap: 16;
     actionGap: 12;
     controlSize: "large";

package/es/components/FormLayout/config.js

@@ -47,24 +47,28 @@ export var FORM_LAYOUT_SIZES = ['large', 'small'];
 /**
  * Per-size density overrides on a variant's baseline (the baseline IS the
  * `large` size). Only `page/small` exists today — the compact auth-card
- * surface (448 wide, matching the app's sign-in card): a narrower panel with
- * 24 padding and a uniform 16 spacing (row gap, column gutter, AND the region
- * gap between header / fields / footer). It is tighter than the baseline in
- * width and padding, but its 16 row gap / column gutter are LOOSER than the
- * baseline's 12 — the auth card is deliberately airier between fields.
- * Only `actionGap` and `controlSize` fall back to the baseline. A variant/size with no entry
- * uses the baseline unchanged, so `large` never needs an entry. `modal`
- * intentionally has no `small`: the 380 confirm/result dialog is BaseDialog,
- * which is not a form surface and does not use FormLayout.
+ * surface: a narrower, less padded panel that keeps the page baseline's gap
+ * rhythm untouched (12 row gap / 12 column gutter / 16 region gap), so a field
+ * stack reads identically in the auth card and in the full-width page form.
+ * Width and padding are the ONLY deviations.
+ *
+ * Its 380 width is the SAME number `PanelLayout` uses, and deliberately so:
+ * an auth flow swaps a form card for a result panel in place (forgot-password
+ * → "we've sent a link"), so a different width would make the card jump.
+ * The two tables still hold it separately — they are different surfaces that
+ * happen to agree, not one value with two readers.
+ *
+ * Every gap (rowGap / colGutter / regionGap / actionGap) plus `controlSize`
+ * falls back to the baseline. A variant/size with no entry uses the baseline
+ * unchanged, so `large` never needs an entry. `modal` intentionally has no
+ * `small`: the confirm/result dialog is BaseDialog, which is not a form
+ * surface and does not use FormLayout.
  */
 export var FORM_LAYOUT_SIZE = {
   page: {
     small: {
-      width: 448,
-      padding: 24,
-      rowGap: 16,
-      colGutter: 16,
-      regionGap: 16
+      width: 380,
+      padding: 24
     }
   }
 };
@@ -98,4 +102,4 @@ export var formLayoutCssVars = function formLayoutCssVars(variant) {
     '--form-layout-action-gap': "".concat(config.actionGap, "px")
   };
 };
-//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvc3JjL2NvbXBvbmVudHMvRm9ybUxheW91dC9jb25maWcudHMiLCJjb21wb25lbnRzL0Zvcm1MYXlvdXQvY29uZmlnLmpzIl0sIm5hbWVzIjpbIkZPUk1fTEFZT1VUX1BSRUZJWCIsIkZPUk1fTEFZT1VUX0NPTkZJRyIsIm1vZGFsIiwid2lkdGgiLCJwYWRkaW5nIiwicm93R2FwIiwiY29sR3V0dGVyIiwicmVnaW9uR2FwIiwiYWN0aW9uR2FwIiwiY29udHJvbFNpemUiLCJwYWdlIiwiRk9STV9MQVlPVVRfVkFSSUFOVFMiLCJPYmplY3QiLCJrZXlzIiwiRk9STV9MQVlPVVRfU0laRVMiLCJGT1JNX0xBWU9VVF9TSVpFIiwic21hbGwiLCJyZXNvbHZlRm9ybUxheW91dENvbmZpZyIsInZhcmlhbnQiLCJzaXplIiwiYXJndW1lbnRzIiwibGVuZ3RoIiwidW5kZWZpbmVkIiwib3ZlcnJpZGVzIiwib3ZlcnJpZGUiLCJhc3NpZ24iLCJGT1JNX0xBWU9VVF9TTE9UIiwiaGVhZGVyIiwidGl0bGUiLCJleHRyYSIsImNvbnRlbnQiLCJmb290ZXIiLCJmb3JtTGF5b3V0Q3NzVmFycyIsImNvbmZpZyIsImNvbmNhdCJdLCJtYXBwaW5ncyI6IkFBRUEsT0FBTyxJQUFNQSxrQkFBa0IsR0FBRyxhQUFhO0FBRS9DO0FDRkE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FESUEsT0FBTyxJQUFNQyxrQkFBa0IsR0FBRztFQUNoQztFQUNBQyxLQUFLLEVBQUU7SUFDTDtJQUNBQyxLQUFLLEVBQUUsR0FBRztJQUNWO0lBQ0FDLE9BQU8sRUFBRSxFQUFFO0lBQ1g7SUFDQUMsTUFBTSxFQUFFLEVBQUU7SUFDVjtJQUNBQyxTQUFTLEVBQUUsRUFBRTtJQUNiO0lBQ0FDLFNBQVMsRUFBRSxFQUFFO0lBQ2I7SUFDQUMsU0FBUyxFQUFFLEVBQUU7SUFDYjtJQUNBQyxXQUFXLEVBQUU7RUNGYixDREdEO0VBQ0Q7QUNGRjtBQUNBO0FBQ0E7QUFDQTtFRElFQyxJQUFJLEVBQUU7SUFDSlAsS0FBSyxFQUFFLEdBQUc7SUFDVkMsT0FBTyxFQUFFLEVBQUU7SUFDWEMsTUFBTSxFQUFFLEVBQUU7SUFDVkMsU0FBUyxFQUFFLEVBQUU7SUFDYkMsU0FBUyxFQUFFLEVBQUU7SUFDYkMsU0FBUyxFQUFFLEVBQUU7SUFDYkMsV0FBVyxFQUFFO0VDRmI7QUFDSixDREdVO0FBSVYsT0FBTyxJQUFNRSxvQkFBb0IsR0FBR0MsTUFBTSxDQUFDQyxJQUFJLENBQUNaLGtCQUFrQixDQUF3QjtBQUUxRixPQUFPLElBQU1hLGlCQUFpQixHQUFHLENBQUMsT0FBTyxFQUFFLE9BQU8sQ0FBVTtBQWM1RDtBQ25CQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QURxQkEsT0FBTyxJQUFNQyxnQkFBZ0IsR0FBRztFQUM5QkwsSUFBSSxFQUFFO0lBQ0pNLEtBQUssRUFBRTtNQUFFYixLQUFLLEVBQUUsR0FBRztNQUFFQyxPQUFPLEVBQUUsRUFBRTtNQUFFQyxNQUFNLEVBQUUsRUFBRTtNQUFFQyxTQUFTLEVBQUUsRUFBRTtNQUFFQyxTQUFTLEVBQUU7SUFBRTtFQ25CMUU7QUFDSixDRG9CNEc7QUFFNUc7QUNwQkE7QUFDQTtBQUNBO0FBQ0E7QURzQkEsT0FBTyxJQUFNVSx1QkFBdUIsR0FBRyxTQUExQkEsdUJBQXVCQSxDQUFJQyxPQUEwQixFQUFvQztFQUFBLElBQWxDQyxJQUFBLEdBQUFDLFNBQUEsQ0FBQUMsTUFBQSxRQUFBRCxTQUFBLFFBQUFFLFNBQUEsR0FBQUYsU0FBQSxNQUF1QixPQUFPO0VBQ2hHLElBQU1HLFNBQVMsR0FBR1IsZ0JBQWdCLENBQUNHLE9BQXdDLENBQUM7RUFDNUUsSUFBTU0sUUFBUSxHQUFHRCxTQUFTLEdBQUdBLFNBQVMsQ0FBQ0osSUFBOEIsQ0FBQyxHQUFHRyxTQUFTO0VBQ2xGLE9BQUFWLE1BQUEsQ0FBQWEsTUFBQSxDQUFBYixNQUFBLENBQUFhLE1BQUEsQ0FBQSxDQUFBLENBQUEsRUFBWXhCLGtCQUFrQixDQUFDaUIsT0FBTyxDQUFDLENBQUEsRUFBS00sUUFBUSxDQUFBO0FBQ3RELENBQUM7QUFFRCxPQUFPLElBQU1FLGdCQUFnQixHQUFHO0VBQzlCQyxNQUFNLEVBQUUsUUFBUTtFQUNoQkMsS0FBSyxFQUFFLE9BQU87RUFDZEMsS0FBSyxFQUFFLE9BQU87RUFDZEMsT0FBTyxFQUFFLFNBQVM7RUFDbEJDLE1BQU0sRUFBRTtBQ3JCVixDRHNCVTtBQUVWO0FBQ0EsT0FBTyxJQUFNQyxpQkFBaUIsR0FBRyxTQUFwQkEsaUJBQWlCQSxDQUM1QmQsT0FBMEIsRUFFVDtFQUFBLElBRGpCQyxJQUFBLEdBQUFDLFNBQUEsQ0FBQUMsTUFBQSxRQUFBRCxTQUFBLFFBQUFFLFNBQUEsR0FBQUYsU0FBQSxNQUF1QixPQUFPO0VBRTlCLElBQU1hLE1BQU0sR0FBR2hCLHVCQUF1QixDQUFDQyxPQUFPLEVBQUVDLElBQUksQ0FBQztFQUNyRCxPQUFPO0lBQ0wscUJBQXFCLEtBQUFlLE1BQUEsQ0FBS0QsTUFBTSxDQUFDOUIsS0FBSyxPQUFJO0lBQzFDLHVCQUF1QixLQUFBK0IsTUFBQSxDQUFLRCxNQUFNLENBQUM3QixPQUFPLE9BQUk7SUFDOUMsdUJBQXVCLEtBQUE4QixNQUFBLENBQUtELE1BQU0sQ0FBQzVCLE1BQU0sT0FBSTtJQUM3QywwQkFBMEIsS0FBQTZCLE1BQUEsQ0FBS0QsTUFBTSxDQUFDMUIsU0FBUyxPQUFJO0lBQ25ELDBCQUEwQixLQUFBMkIsTUFBQSxDQUFLRCxNQUFNLENBQUN6QixTQUFTO0VDekIvQyxDRDBCZ0I7QUFDcEIsQ0FBQyIsImZpbGUiOiJjb21wb25lbnRzL0Zvcm1MYXlvdXQvY29uZmlnLmpzIiwic291cmNlc0NvbnRlbnQiOltudWxsLCJleHBvcnQgY29uc3QgRk9STV9MQVlPVVRfUFJFRklYID0gJ2Zvcm0tbGF5b3V0Jztcbi8qKlxuICogVEhFIGRlbnNpdHkgdGFibGUgZm9yIGZvcm0gc3VyZmFjZXMg4oCUIHRoZSBzaW5nbGUgdGhpbmcgdG8gZWRpdCB3aGVuIHRoZVxuICogZGVzaWduIGNoYW5nZXMgb3IgYSBuZXcgZGVuc2l0eSBpcyBhZGRlZC4gRXZlcnkgdmFsdWUgaXMgY29uc3VtZWQgdGhyb3VnaFxuICogQ1NTIGN1c3RvbSBwcm9wZXJ0aWVzIChjb250YWluZXIgc3BhY2luZykgb3IgcmVhZCBieSB0aGUgZm9ybSBwcmVzZXRcbiAqIChyb3cgZ2FwIC8gY29sdW1uIGd1dHRlciBmb3IgUHJvRm9ybSksIHNvIGFkZGluZyBhIHZhcmlhbnQgaGVyZSBpcyB0aGVcbiAqIHdob2xlIGpvYi5cbiAqXG4gKiBTb3VyY2U6IDFNb25leSBEZXNpZ24gU3lzdGVtIChCZXRhKSDigJQgXCJEaWFsb2cgQm9keVwiIChub2RlIDM5NzQzLTQ2MzQpXG4gKiBmb3IgYG1vZGFsYDsgcGFnZSB1c2FnZSAobm9kZSAzOTk1Ni05NzEyKSBmb3IgYHBhZ2VgLlxuICovXG5leHBvcnQgY29uc3QgRk9STV9MQVlPVVRfQ09ORklHID0ge1xuICAgIC8qKiBJbnNpZGUgYSBkaWFsb2c6IHRpZ2h0ZXIgZGVuc2l0eS4gKi9cbiAgICBtb2RhbDoge1xuICAgICAgICAvKiogRGVmYXVsdCBwYW5lbCB3aWR0aCAocHgpOyB0aGUgYHdpZHRoYCBwcm9wIG92ZXJyaWRlcy4gKi9cbiAgICAgICAgd2lkdGg6IDY0MCxcbiAgICAgICAgLyoqIFBhbmVsIHBhZGRpbmcgKHB4KS4gKi9cbiAgICAgICAgcGFkZGluZzogMjQsXG4gICAgICAgIC8qKiBWZXJ0aWNhbCBnYXAgYmV0d2VlbiBmaWVsZCByb3dzIChweCkuICovXG4gICAgICAgIHJvd0dhcDogMTIsXG4gICAgICAgIC8qKiBIb3Jpem9udGFsIGd1dHRlciBiZXR3ZWVuIGNvbHVtbnMgaW4gYSByb3cgKHB4KS4gKi9cbiAgICAgICAgY29sR3V0dGVyOiAxMixcbiAgICAgICAgLyoqIEdhcCBiZXR3ZWVuIHRoZSBoZWFkZXIgLyBmaWVsZHMgLyBmb290ZXIgcmVnaW9ucyAocHgpLiAqL1xuICAgICAgICByZWdpb25HYXA6IDE2LFxuICAgICAgICAvKiogR2FwIGJldHdlZW4gZm9vdGVyIGFjdGlvbiBidXR0b25zIChweCk7IEFjdGlvbkJhciByZWFkcyBpdCB2aWEgdmFyLiAqL1xuICAgICAgICBhY3Rpb25HYXA6IDEyLFxuICAgICAgICAvKiogQ29udHJvbCBzaXplIGNhc2NhZGVkIHRvIGV2ZXJ5IGZpZWxkIHZpYSBQcm9Gb3JtIGBzaXplYC4gKi9cbiAgICAgICAgY29udHJvbFNpemU6ICdzbWFsbCcsXG4gICAgfSxcbiAgICAvKipcbiAgICAgKiBTdGFuZGFsb25lIG9uIGEgcGFnZTogYSB3aWRlciBwYW5lbCB3aXRoIHJvb21pZXIgcGFkZGluZywgYnV0IHRoZSBTQU1FXG4gICAgICogdGlnaHQgMTIvMTYgZ2FwIHJoeXRobSBhcyB0aGUgZGlhbG9nIOKAlCBvbmx5IGB3aWR0aGAgKDczOCkgYW5kIGBwYWRkaW5nYFxuICAgICAqICgzMikgc2VwYXJhdGUgdGhlIHR3byBkZW5zaXRpZXMsIHBsdXMgdGhlIGxhcmdlIGNvbnRyb2wgc2l6ZS5cbiAgICAgKi9cbiAgICBwYWdlOiB7XG4gICAgICAgIHdpZHRoOiA3MzgsXG4gICAgICAgIHBhZGRpbmc6IDMyLFxuICAgICAgICByb3dHYXA6IDEyLFxuICAgICAgICBjb2xHdXR0ZXI6IDEyLFxuICAgICAgICByZWdpb25HYXA6IDE2LFxuICAgICAgICBhY3Rpb25HYXA6IDEyLFxuICAgICAgICBjb250cm9sU2l6ZTogJ2xhcmdlJyxcbiAgICB9LFxufTtcbmV4cG9ydCBjb25zdCBGT1JNX0xBWU9VVF9WQVJJQU5UUyA9IE9iamVjdC5rZXlzKEZPUk1fTEFZT1VUX0NPTkZJRyk7XG5leHBvcnQgY29uc3QgRk9STV9MQVlPVVRfU0laRVMgPSBbJ2xhcmdlJywgJ3NtYWxsJ107XG4vKipcbiAqIFBlci1zaXplIGRlbnNpdHkgb3ZlcnJpZGVzIG9uIGEgdmFyaWFudCdzIGJhc2VsaW5lICh0aGUgYmFzZWxpbmUgSVMgdGhlXG4gKiBgbGFyZ2VgIHNpemUpLiBPbmx5IGBwYWdlL3NtYWxsYCBleGlzdHMgdG9kYXkg4oCUIHRoZSBjb21wYWN0IGF1dGgtY2FyZFxuICogc3VyZmFjZSAoNDQ4IHdpZGUsIG1hdGNoaW5nIHRoZSBhcHAncyBzaWduLWluIGNhcmQpOiBhIG5hcnJvd2VyIHBhbmVsIHdpdGhcbiAqIDI0IHBhZGRpbmcgYW5kIGEgdW5pZm9ybSAxNiBzcGFjaW5nIChyb3cgZ2FwLCBjb2x1bW4gZ3V0dGVyLCBBTkQgdGhlIHJlZ2lvblxuICogZ2FwIGJldHdlZW4gaGVhZGVyIC8gZmllbGRzIC8gZm9vdGVyKS4gSXQgaXMgdGlnaHRlciB0aGFuIHRoZSBiYXNlbGluZSBpblxuICogd2lkdGggYW5kIHBhZGRpbmcsIGJ1dCBpdHMgMTYgcm93IGdhcCAvIGNvbHVtbiBndXR0ZXIgYXJlIExPT1NFUiB0aGFuIHRoZVxuICogYmFzZWxpbmUncyAxMiDigJQgdGhlIGF1dGggY2FyZCBpcyBkZWxpYmVyYXRlbHkgYWlyaWVyIGJldHdlZW4gZmllbGRzLlxuICogT25seSBgYWN0aW9uR2FwYCBhbmQgYGNvbnRyb2xTaXplYCBmYWxsIGJhY2sgdG8gdGhlIGJhc2VsaW5lLiBBIHZhcmlhbnQvc2l6ZSB3aXRoIG5vIGVudHJ5XG4gKiB1c2VzIHRoZSBiYXNlbGluZSB1bmNoYW5nZWQsIHNvIGBsYXJnZWAgbmV2ZXIgbmVlZHMgYW4gZW50cnkuIGBtb2RhbGBcbiAqIGludGVudGlvbmFsbHkgaGFzIG5vIGBzbWFsbGA6IHRoZSAzODAgY29uZmlybS9yZXN1bHQgZGlhbG9nIGlzIEJhc2VEaWFsb2csXG4gKiB3aGljaCBpcyBub3QgYSBmb3JtIHN1cmZhY2UgYW5kIGRvZXMgbm90IHVzZSBGb3JtTGF5b3V0LlxuICovXG5leHBvcnQgY29uc3QgRk9STV9MQVlPVVRfU0laRSA9IHtcbiAgICBwYWdlOiB7XG4gICAgICAgIHNtYWxsOiB7IHdpZHRoOiA0NDgsIHBhZGRpbmc6IDI0LCByb3dHYXA6IDE2LCBjb2xHdXR0ZXI6IDE2LCByZWdpb25HYXA6IDE2IH0sXG4gICAgfSxcbn07XG4vKipcbiAqIEJhc2VsaW5lIGRlbnNpdHkgZm9yIGEgdmFyaWFudCBtZXJnZWQgd2l0aCB0aGUgcmVxdWVzdGVkIHNpemUncyBkZXZpYXRpb25zLlxuICogVGhlIHNpbmdsZSBsb29rdXAgYm90aCB0aGUgc3VyZmFjZSAoRm9ybUxheW91dCkgYW5kIHRoZSBmb3JtIHByZXNldFxuICogKEJhc2VQcm9Gb3JtKSByZWFkLCBzbyB3aWR0aCAvIHBhZGRpbmcgLyBnYXBzIC8gY29udHJvbCBzaXplIG5ldmVyIGRpdmVyZ2UuXG4gKi9cbmV4cG9ydCBjb25zdCByZXNvbHZlRm9ybUxheW91dENvbmZpZyA9ICh2YXJpYW50LCBzaXplID0gJ2xhcmdlJykgPT4ge1xuICAgIGNvbnN0IG92ZXJyaWRlcyA9IEZPUk1fTEFZT1VUX1NJWkVbdmFyaWFudF07XG4gICAgY29uc3Qgb3ZlcnJpZGUgPSBvdmVycmlkZXMgPyBvdmVycmlkZXNbc2l6ZV0gOiB1bmRlZmluZWQ7XG4gICAgcmV0dXJuIE9iamVjdC5hc3NpZ24oT2JqZWN0LmFzc2lnbih7fSwgRk9STV9MQVlPVVRfQ09ORklHW3ZhcmlhbnRdKSwgb3ZlcnJpZGUpO1xufTtcbmV4cG9ydCBjb25zdCBGT1JNX0xBWU9VVF9TTE9UID0ge1xuICAgIGhlYWRlcjogJ2hlYWRlcicsXG4gICAgdGl0bGU6ICd0aXRsZScsXG4gICAgZXh0cmE6ICdleHRyYScsXG4gICAgY29udGVudDogJ2NvbnRlbnQnLFxuICAgIGZvb3RlcjogJ2Zvb3RlcicsXG59O1xuLyoqIEJyaWRnZSB0aGUgcmVzb2x2ZWQgKHZhcmlhbnQsIHNpemUpIG51bWJlcnMgaW50byBDU1MgY3VzdG9tIHByb3BlcnRpZXMuICovXG5leHBvcnQgY29uc3QgZm9ybUxheW91dENzc1ZhcnMgPSAodmFyaWFudCwgc2l6ZSA9ICdsYXJnZScpID0+IHtcbiAgICBjb25zdCBjb25maWcgPSByZXNvbHZlRm9ybUxheW91dENvbmZpZyh2YXJpYW50LCBzaXplKTtcbiAgICByZXR1cm4ge1xuICAgICAgICAnLS1mb3JtLWxheW91dC13aWR0aCc6IGAke2NvbmZpZy53aWR0aH1weGAsXG4gICAgICAgICctLWZvcm0tbGF5b3V0LXBhZGRpbmcnOiBgJHtjb25maWcucGFkZGluZ31weGAsXG4gICAgICAgICctLWZvcm0tbGF5b3V0LXJvdy1nYXAnOiBgJHtjb25maWcucm93R2FwfXB4YCxcbiAgICAgICAgJy0tZm9ybS1sYXlvdXQtcmVnaW9uLWdhcCc6IGAke2NvbmZpZy5yZWdpb25HYXB9cHhgLFxuICAgICAgICAnLS1mb3JtLWxheW91dC1hY3Rpb24tZ2FwJzogYCR7Y29uZmlnLmFjdGlvbkdhcH1weGAsXG4gICAgfTtcbn07Il0sInNvdXJjZVJvb3QiOiIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9zcmMifQ==
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvc3JjL2NvbXBvbmVudHMvRm9ybUxheW91dC9jb25maWcudHMiLCJjb21wb25lbnRzL0Zvcm1MYXlvdXQvY29uZmlnLmpzIl0sIm5hbWVzIjpbIkZPUk1fTEFZT1VUX1BSRUZJWCIsIkZPUk1fTEFZT1VUX0NPTkZJRyIsIm1vZGFsIiwid2lkdGgiLCJwYWRkaW5nIiwicm93R2FwIiwiY29sR3V0dGVyIiwicmVnaW9uR2FwIiwiYWN0aW9uR2FwIiwiY29udHJvbFNpemUiLCJwYWdlIiwiRk9STV9MQVlPVVRfVkFSSUFOVFMiLCJPYmplY3QiLCJrZXlzIiwiRk9STV9MQVlPVVRfU0laRVMiLCJGT1JNX0xBWU9VVF9TSVpFIiwic21hbGwiLCJyZXNvbHZlRm9ybUxheW91dENvbmZpZyIsInZhcmlhbnQiLCJzaXplIiwiYXJndW1lbnRzIiwibGVuZ3RoIiwidW5kZWZpbmVkIiwib3ZlcnJpZGVzIiwib3ZlcnJpZGUiLCJhc3NpZ24iLCJGT1JNX0xBWU9VVF9TTE9UIiwiaGVhZGVyIiwidGl0bGUiLCJleHRyYSIsImNvbnRlbnQiLCJmb290ZXIiLCJmb3JtTGF5b3V0Q3NzVmFycyIsImNvbmZpZyIsImNvbmNhdCJdLCJtYXBwaW5ncyI6IkFBRUEsT0FBTyxJQUFNQSxrQkFBa0IsR0FBRyxhQUFhO0FBRS9DO0FDRkE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FESUEsT0FBTyxJQUFNQyxrQkFBa0IsR0FBRztFQUNoQztFQUNBQyxLQUFLLEVBQUU7SUFDTDtJQUNBQyxLQUFLLEVBQUUsR0FBRztJQUNWO0lBQ0FDLE9BQU8sRUFBRSxFQUFFO0lBQ1g7SUFDQUMsTUFBTSxFQUFFLEVBQUU7SUFDVjtJQUNBQyxTQUFTLEVBQUUsRUFBRTtJQUNiO0lBQ0FDLFNBQVMsRUFBRSxFQUFFO0lBQ2I7SUFDQUMsU0FBUyxFQUFFLEVBQUU7SUFDYjtJQUNBQyxXQUFXLEVBQUU7RUNGYixDREdEO0VBQ0Q7QUNGRjtBQUNBO0FBQ0E7QUFDQTtFRElFQyxJQUFJLEVBQUU7SUFDSlAsS0FBSyxFQUFFLEdBQUc7SUFDVkMsT0FBTyxFQUFFLEVBQUU7SUFDWEMsTUFBTSxFQUFFLEVBQUU7SUFDVkMsU0FBUyxFQUFFLEVBQUU7SUFDYkMsU0FBUyxFQUFFLEVBQUU7SUFDYkMsU0FBUyxFQUFFLEVBQUU7SUFDYkMsV0FBVyxFQUFFO0VDRmI7QUFDSixDREdVO0FBSVYsT0FBTyxJQUFNRSxvQkFBb0IsR0FBR0MsTUFBTSxDQUFDQyxJQUFJLENBQUNaLGtCQUFrQixDQUF3QjtBQUUxRixPQUFPLElBQU1hLGlCQUFpQixHQUFHLENBQUMsT0FBTyxFQUFFLE9BQU8sQ0FBVTtBQWM1RDtBQ25CQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBRHFCQSxPQUFPLElBQU1DLGdCQUFnQixHQUFHO0VBQzlCTCxJQUFJLEVBQUU7SUFDSk0sS0FBSyxFQUFFO01BQUViLEtBQUssRUFBRSxHQUFHO01BQUVDLE9BQU8sRUFBRTtJQUFFO0VDbkJoQztBQUNKLENEb0I0RztBQUU1RztBQ3BCQTtBQUNBO0FBQ0E7QUFDQTtBRHNCQSxPQUFPLElBQU1hLHVCQUF1QixHQUFHLFNBQTFCQSx1QkFBdUJBLENBQUlDLE9BQTBCLEVBQW9DO0VBQUEsSUFBbENDLElBQUEsR0FBQUMsU0FBQSxDQUFBQyxNQUFBLFFBQUFELFNBQUEsUUFBQUUsU0FBQSxHQUFBRixTQUFBLE1BQXVCLE9BQU87RUFDaEcsSUFBTUcsU0FBUyxHQUFHUixnQkFBZ0IsQ0FBQ0csT0FBd0MsQ0FBQztFQUM1RSxJQUFNTSxRQUFRLEdBQUdELFNBQVMsR0FBR0EsU0FBUyxDQUFDSixJQUE4QixDQUFDLEdBQUdHLFNBQVM7RUFDbEYsT0FBQVYsTUFBQSxDQUFBYSxNQUFBLENBQUFiLE1BQUEsQ0FBQWEsTUFBQSxDQUFBLENBQUEsQ0FBQSxFQUFZeEIsa0JBQWtCLENBQUNpQixPQUFPLENBQUMsQ0FBQSxFQUFLTSxRQUFRLENBQUE7QUFDdEQsQ0FBQztBQUVELE9BQU8sSUFBTUUsZ0JBQWdCLEdBQUc7RUFDOUJDLE1BQU0sRUFBRSxRQUFRO0VBQ2hCQyxLQUFLLEVBQUUsT0FBTztFQUNkQyxLQUFLLEVBQUUsT0FBTztFQUNkQyxPQUFPLEVBQUUsU0FBUztFQUNsQkMsTUFBTSxFQUFFO0FDckJWLENEc0JVO0FBRVY7QUFDQSxPQUFPLElBQU1DLGlCQUFpQixHQUFHLFNBQXBCQSxpQkFBaUJBLENBQzVCZCxPQUEwQixFQUVUO0VBQUEsSUFEakJDLElBQUEsR0FBQUMsU0FBQSxDQUFBQyxNQUFBLFFBQUFELFNBQUEsUUFBQUUsU0FBQSxHQUFBRixTQUFBLE1BQXVCLE9BQU87RUFFOUIsSUFBTWEsTUFBTSxHQUFHaEIsdUJBQXVCLENBQUNDLE9BQU8sRUFBRUMsSUFBSSxDQUFDO0VBQ3JELE9BQU87SUFDTCxxQkFBcUIsS0FBQWUsTUFBQSxDQUFLRCxNQUFNLENBQUM5QixLQUFLLE9BQUk7SUFDMUMsdUJBQXVCLEtBQUErQixNQUFBLENBQUtELE1BQU0sQ0FBQzdCLE9BQU8sT0FBSTtJQUM5Qyx1QkFBdUIsS0FBQThCLE1BQUEsQ0FBS0QsTUFBTSxDQUFDNUIsTUFBTSxPQUFJO0lBQzdDLDBCQUEwQixLQUFBNkIsTUFBQSxDQUFLRCxNQUFNLENBQUMxQixTQUFTLE9BQUk7SUFDbkQsMEJBQTBCLEtBQUEyQixNQUFBLENBQUtELE1BQU0sQ0FBQ3pCLFNBQVM7RUN6Qi9DLENEMEJnQjtBQUNwQixDQUFDIiwiZmlsZSI6ImNvbXBvbmVudHMvRm9ybUxheW91dC9jb25maWcuanMiLCJzb3VyY2VzQ29udGVudCI6W251bGwsImV4cG9ydCBjb25zdCBGT1JNX0xBWU9VVF9QUkVGSVggPSAnZm9ybS1sYXlvdXQnO1xuLyoqXG4gKiBUSEUgZGVuc2l0eSB0YWJsZSBmb3IgZm9ybSBzdXJmYWNlcyDigJQgdGhlIHNpbmdsZSB0aGluZyB0byBlZGl0IHdoZW4gdGhlXG4gKiBkZXNpZ24gY2hhbmdlcyBvciBhIG5ldyBkZW5zaXR5IGlzIGFkZGVkLiBFdmVyeSB2YWx1ZSBpcyBjb25zdW1lZCB0aHJvdWdoXG4gKiBDU1MgY3VzdG9tIHByb3BlcnRpZXMgKGNvbnRhaW5lciBzcGFjaW5nKSBvciByZWFkIGJ5IHRoZSBmb3JtIHByZXNldFxuICogKHJvdyBnYXAgLyBjb2x1bW4gZ3V0dGVyIGZvciBQcm9Gb3JtKSwgc28gYWRkaW5nIGEgdmFyaWFudCBoZXJlIGlzIHRoZVxuICogd2hvbGUgam9iLlxuICpcbiAqIFNvdXJjZTogMU1vbmV5IERlc2lnbiBTeXN0ZW0gKEJldGEpIOKAlCBcIkRpYWxvZyBCb2R5XCIgKG5vZGUgMzk3NDMtNDYzNClcbiAqIGZvciBgbW9kYWxgOyBwYWdlIHVzYWdlIChub2RlIDM5OTU2LTk3MTIpIGZvciBgcGFnZWAuXG4gKi9cbmV4cG9ydCBjb25zdCBGT1JNX0xBWU9VVF9DT05GSUcgPSB7XG4gICAgLyoqIEluc2lkZSBhIGRpYWxvZzogdGlnaHRlciBkZW5zaXR5LiAqL1xuICAgIG1vZGFsOiB7XG4gICAgICAgIC8qKiBEZWZhdWx0IHBhbmVsIHdpZHRoIChweCk7IHRoZSBgd2lkdGhgIHByb3Agb3ZlcnJpZGVzLiAqL1xuICAgICAgICB3aWR0aDogNjQwLFxuICAgICAgICAvKiogUGFuZWwgcGFkZGluZyAocHgpLiAqL1xuICAgICAgICBwYWRkaW5nOiAyNCxcbiAgICAgICAgLyoqIFZlcnRpY2FsIGdhcCBiZXR3ZWVuIGZpZWxkIHJvd3MgKHB4KS4gKi9cbiAgICAgICAgcm93R2FwOiAxMixcbiAgICAgICAgLyoqIEhvcml6b250YWwgZ3V0dGVyIGJldHdlZW4gY29sdW1ucyBpbiBhIHJvdyAocHgpLiAqL1xuICAgICAgICBjb2xHdXR0ZXI6IDEyLFxuICAgICAgICAvKiogR2FwIGJldHdlZW4gdGhlIGhlYWRlciAvIGZpZWxkcyAvIGZvb3RlciByZWdpb25zIChweCkuICovXG4gICAgICAgIHJlZ2lvbkdhcDogMTYsXG4gICAgICAgIC8qKiBHYXAgYmV0d2VlbiBmb290ZXIgYWN0aW9uIGJ1dHRvbnMgKHB4KTsgQWN0aW9uQmFyIHJlYWRzIGl0IHZpYSB2YXIuICovXG4gICAgICAgIGFjdGlvbkdhcDogMTIsXG4gICAgICAgIC8qKiBDb250cm9sIHNpemUgY2FzY2FkZWQgdG8gZXZlcnkgZmllbGQgdmlhIFByb0Zvcm0gYHNpemVgLiAqL1xuICAgICAgICBjb250cm9sU2l6ZTogJ3NtYWxsJyxcbiAgICB9LFxuICAgIC8qKlxuICAgICAqIFN0YW5kYWxvbmUgb24gYSBwYWdlOiBhIHdpZGVyIHBhbmVsIHdpdGggcm9vbWllciBwYWRkaW5nLCBidXQgdGhlIFNBTUVcbiAgICAgKiB0aWdodCAxMi8xNiBnYXAgcmh5dGhtIGFzIHRoZSBkaWFsb2cg4oCUIG9ubHkgYHdpZHRoYCAoNzM4KSBhbmQgYHBhZGRpbmdgXG4gICAgICogKDMyKSBzZXBhcmF0ZSB0aGUgdHdvIGRlbnNpdGllcywgcGx1cyB0aGUgbGFyZ2UgY29udHJvbCBzaXplLlxuICAgICAqL1xuICAgIHBhZ2U6IHtcbiAgICAgICAgd2lkdGg6IDczOCxcbiAgICAgICAgcGFkZGluZzogMzIsXG4gICAgICAgIHJvd0dhcDogMTIsXG4gICAgICAgIGNvbEd1dHRlcjogMTIsXG4gICAgICAgIHJlZ2lvbkdhcDogMTYsXG4gICAgICAgIGFjdGlvbkdhcDogMTIsXG4gICAgICAgIGNvbnRyb2xTaXplOiAnbGFyZ2UnLFxuICAgIH0sXG59O1xuZXhwb3J0IGNvbnN0IEZPUk1fTEFZT1VUX1ZBUklBTlRTID0gT2JqZWN0LmtleXMoRk9STV9MQVlPVVRfQ09ORklHKTtcbmV4cG9ydCBjb25zdCBGT1JNX0xBWU9VVF9TSVpFUyA9IFsnbGFyZ2UnLCAnc21hbGwnXTtcbi8qKlxuICogUGVyLXNpemUgZGVuc2l0eSBvdmVycmlkZXMgb24gYSB2YXJpYW50J3MgYmFzZWxpbmUgKHRoZSBiYXNlbGluZSBJUyB0aGVcbiAqIGBsYXJnZWAgc2l6ZSkuIE9ubHkgYHBhZ2Uvc21hbGxgIGV4aXN0cyB0b2RheSDigJQgdGhlIGNvbXBhY3QgYXV0aC1jYXJkXG4gKiBzdXJmYWNlOiBhIG5hcnJvd2VyLCBsZXNzIHBhZGRlZCBwYW5lbCB0aGF0IGtlZXBzIHRoZSBwYWdlIGJhc2VsaW5lJ3MgZ2FwXG4gKiByaHl0aG0gdW50b3VjaGVkICgxMiByb3cgZ2FwIC8gMTIgY29sdW1uIGd1dHRlciAvIDE2IHJlZ2lvbiBnYXApLCBzbyBhIGZpZWxkXG4gKiBzdGFjayByZWFkcyBpZGVudGljYWxseSBpbiB0aGUgYXV0aCBjYXJkIGFuZCBpbiB0aGUgZnVsbC13aWR0aCBwYWdlIGZvcm0uXG4gKiBXaWR0aCBhbmQgcGFkZGluZyBhcmUgdGhlIE9OTFkgZGV2aWF0aW9ucy5cbiAqXG4gKiBJdHMgMzgwIHdpZHRoIGlzIHRoZSBTQU1FIG51bWJlciBgUGFuZWxMYXlvdXRgIHVzZXMsIGFuZCBkZWxpYmVyYXRlbHkgc286XG4gKiBhbiBhdXRoIGZsb3cgc3dhcHMgYSBmb3JtIGNhcmQgZm9yIGEgcmVzdWx0IHBhbmVsIGluIHBsYWNlIChmb3Jnb3QtcGFzc3dvcmRcbiAqIOKGkiBcIndlJ3ZlIHNlbnQgYSBsaW5rXCIpLCBzbyBhIGRpZmZlcmVudCB3aWR0aCB3b3VsZCBtYWtlIHRoZSBjYXJkIGp1bXAuXG4gKiBUaGUgdHdvIHRhYmxlcyBzdGlsbCBob2xkIGl0IHNlcGFyYXRlbHkg4oCUIHRoZXkgYXJlIGRpZmZlcmVudCBzdXJmYWNlcyB0aGF0XG4gKiBoYXBwZW4gdG8gYWdyZWUsIG5vdCBvbmUgdmFsdWUgd2l0aCB0d28gcmVhZGVycy5cbiAqXG4gKiBFdmVyeSBnYXAgKHJvd0dhcCAvIGNvbEd1dHRlciAvIHJlZ2lvbkdhcCAvIGFjdGlvbkdhcCkgcGx1cyBgY29udHJvbFNpemVgXG4gKiBmYWxscyBiYWNrIHRvIHRoZSBiYXNlbGluZS4gQSB2YXJpYW50L3NpemUgd2l0aCBubyBlbnRyeSB1c2VzIHRoZSBiYXNlbGluZVxuICogdW5jaGFuZ2VkLCBzbyBgbGFyZ2VgIG5ldmVyIG5lZWRzIGFuIGVudHJ5LiBgbW9kYWxgIGludGVudGlvbmFsbHkgaGFzIG5vXG4gKiBgc21hbGxgOiB0aGUgY29uZmlybS9yZXN1bHQgZGlhbG9nIGlzIEJhc2VEaWFsb2csIHdoaWNoIGlzIG5vdCBhIGZvcm1cbiAqIHN1cmZhY2UgYW5kIGRvZXMgbm90IHVzZSBGb3JtTGF5b3V0LlxuICovXG5leHBvcnQgY29uc3QgRk9STV9MQVlPVVRfU0laRSA9IHtcbiAgICBwYWdlOiB7XG4gICAgICAgIHNtYWxsOiB7IHdpZHRoOiAzODAsIHBhZGRpbmc6IDI0IH0sXG4gICAgfSxcbn07XG4vKipcbiAqIEJhc2VsaW5lIGRlbnNpdHkgZm9yIGEgdmFyaWFudCBtZXJnZWQgd2l0aCB0aGUgcmVxdWVzdGVkIHNpemUncyBkZXZpYXRpb25zLlxuICogVGhlIHNpbmdsZSBsb29rdXAgYm90aCB0aGUgc3VyZmFjZSAoRm9ybUxheW91dCkgYW5kIHRoZSBmb3JtIHByZXNldFxuICogKEJhc2VQcm9Gb3JtKSByZWFkLCBzbyB3aWR0aCAvIHBhZGRpbmcgLyBnYXBzIC8gY29udHJvbCBzaXplIG5ldmVyIGRpdmVyZ2UuXG4gKi9cbmV4cG9ydCBjb25zdCByZXNvbHZlRm9ybUxheW91dENvbmZpZyA9ICh2YXJpYW50LCBzaXplID0gJ2xhcmdlJykgPT4ge1xuICAgIGNvbnN0IG92ZXJyaWRlcyA9IEZPUk1fTEFZT1VUX1NJWkVbdmFyaWFudF07XG4gICAgY29uc3Qgb3ZlcnJpZGUgPSBvdmVycmlkZXMgPyBvdmVycmlkZXNbc2l6ZV0gOiB1bmRlZmluZWQ7XG4gICAgcmV0dXJuIE9iamVjdC5hc3NpZ24oT2JqZWN0LmFzc2lnbih7fSwgRk9STV9MQVlPVVRfQ09ORklHW3ZhcmlhbnRdKSwgb3ZlcnJpZGUpO1xufTtcbmV4cG9ydCBjb25zdCBGT1JNX0xBWU9VVF9TTE9UID0ge1xuICAgIGhlYWRlcjogJ2hlYWRlcicsXG4gICAgdGl0bGU6ICd0aXRsZScsXG4gICAgZXh0cmE6ICdleHRyYScsXG4gICAgY29udGVudDogJ2NvbnRlbnQnLFxuICAgIGZvb3RlcjogJ2Zvb3RlcicsXG59O1xuLyoqIEJyaWRnZSB0aGUgcmVzb2x2ZWQgKHZhcmlhbnQsIHNpemUpIG51bWJlcnMgaW50byBDU1MgY3VzdG9tIHByb3BlcnRpZXMuICovXG5leHBvcnQgY29uc3QgZm9ybUxheW91dENzc1ZhcnMgPSAodmFyaWFudCwgc2l6ZSA9ICdsYXJnZScpID0+IHtcbiAgICBjb25zdCBjb25maWcgPSByZXNvbHZlRm9ybUxheW91dENvbmZpZyh2YXJpYW50LCBzaXplKTtcbiAgICByZXR1cm4ge1xuICAgICAgICAnLS1mb3JtLWxheW91dC13aWR0aCc6IGAke2NvbmZpZy53aWR0aH1weGAsXG4gICAgICAgICctLWZvcm0tbGF5b3V0LXBhZGRpbmcnOiBgJHtjb25maWcucGFkZGluZ31weGAsXG4gICAgICAgICctLWZvcm0tbGF5b3V0LXJvdy1nYXAnOiBgJHtjb25maWcucm93R2FwfXB4YCxcbiAgICAgICAgJy0tZm9ybS1sYXlvdXQtcmVnaW9uLWdhcCc6IGAke2NvbmZpZy5yZWdpb25HYXB9cHhgLFxuICAgICAgICAnLS1mb3JtLWxheW91dC1hY3Rpb24tZ2FwJzogYCR7Y29uZmlnLmFjdGlvbkdhcH1weGAsXG4gICAgfTtcbn07Il0sInNvdXJjZVJvb3QiOiIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9zcmMifQ==

package/es/components/FormLayout/interface.d.ts

@@ -17,7 +17,7 @@ export interface FormLayoutProps extends Omit<HTMLAttributes<HTMLDivElement>, 't
     /**
      * Panel size within the variant. `large` (default) is the variant baseline;
      * `small` layers a deviation. Only `page/small` deviates today — the compact
-     * auth-card surface (448 wide, 24 padding, 16 gaps); other variant/size
+     * auth-card surface (380 wide, 24 padding, 16 gaps); other variant/size
      * combos fall back to the baseline.
      */
     size?: FormLayoutSize;
@@ -27,7 +27,12 @@ export interface FormLayoutProps extends Omit<HTMLAttributes<HTMLDivElement>, 't
      * footer stay pinned); when `false` content always grows the panel.
      */
     scroll?: boolean;
-    /** Heading; a plain string renders as Headline/md (24px). */
+    /**
+     * Heading; a plain string renders as `Headline/sm` (24 / 28) regardless of
+     * variant or size. Pass a node to compose your own header block (e.g. a
+     * title with a description under it) — the automatic wrapping is skipped,
+     * so supply the `Headline/sm` typography yourself.
+     */
     title?: ReactNode;
     /** Trailing slot on the title row (e.g. an environment switcher). */
     extra?: ReactNode;

package/es/components/PanelLayout/PanelLayout.d.ts

@@ -0,0 +1,3 @@
+import type { PanelLayoutProps } from './interface';
+import './style';
+export declare const PanelLayout: import("react").NamedExoticComponent<PanelLayoutProps>;

package/es/components/PanelLayout/PanelLayout.js

@@ -0,0 +1,163 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { ActionBar } from '../ActionBar';
+import { FormLayout } from '../FormLayout';
+import { Icons } from '../Icons';
+import { Typography } from '../Typography';
+import { default as classnames, joinCls } from '../../utils/classnames';
+import { PANEL_LAYOUT_BACK_ICON_SIZE, PANEL_LAYOUT_BACK_LABEL, PANEL_LAYOUT_PREFIX, resolvePanelLayoutConfig } from './constants';
+import './style';
+/**
+ * The non-form content PANEL — the counterpart to `FormLayout`: that one
+ * holds fields, this one holds an illustration, copy and actions. ONE surface
+ * serving two hosts:
+ *
+ *   page host    <PanelLayout />                         used directly
+ *   dialog host  BaseDialog = Dialog(bare) + this(modal) only adds the overlay
+ *
+ * Deliberately NOT named for a scenario, because it carries several: a
+ * verification challenge, a stepped wizard (2FA setup — hence the back
+ * arrow), a terminal page with no action at all.
+ *
+ * On a page, ONE of those scenarios has a shell of its own and the rest do
+ * not — which decides where business code should reach:
+ *
+ *   a result (success / failure / expired / …)  → `ResultForm`, business/Form
+ *   anything else                               → this, directly
+ *
+ * So being used directly is the normal case here, not a fallback. Only add
+ * another shell on top when a scenario earns a name AND recurring copy (a
+ * `preset`); a shell that just re-exports this one buys nothing.
+ *
+ * Assembly:
+ *
+ *   FormLayout          card chrome (surface, hairline, radius) + the 24
+ *   │                   padding and 16 region gap. Its `page/small` width
+ *   │                   (448, the sign-in card) is NOT used — the panel width
+ *   │                   comes from the config table.
+ *   ├─ header slot      back / illustration / eyebrow / title / description as
+ *   │                   ONE block on 8px seams. It goes in the title slot, not
+ *   │                   the content region, because it is all header copy —
+ *   │                   that also keeps it pinned when the content scrolls.
+ *   ├─ content region   `children` — free-form (a QR code, an OTP input, rows)
+ *   └─ ActionBar(fill)  the actions.
+ *
+ * It owns no copy and no loose numbers: everything host-specific comes from
+ * `PANEL_LAYOUT_CONFIG`, so a divergence between page and dialog is a value
+ * change in that table and nothing else.
+ */
+var PanelLayoutBase = function PanelLayoutBase(_ref) {
+  var _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'page' : _ref$variant,
+    scroll = _ref.scroll,
+    width = _ref.width,
+    className = _ref.className,
+    showBackIcon = _ref.showBackIcon,
+    onBack = _ref.onBack,
+    backIcon = _ref.backIcon,
+    eyebrow = _ref.eyebrow,
+    title = _ref.title,
+    description = _ref.description,
+    _ref$descriptionStron = _ref.descriptionStrong,
+    descriptionStrong = _ref$descriptionStron === void 0 ? true : _ref$descriptionStron,
+    illustration = _ref.illustration,
+    primary = _ref.primary,
+    secondary = _ref.secondary,
+    direction = _ref.direction,
+    footnote = _ref.footnote,
+    children = _ref.children;
+  var classes = classnames(PANEL_LAYOUT_PREFIX);
+  var config = resolvePanelLayoutConfig(variant);
+  // A plain string becomes the family heading; a node passes through so
+  // callers can compose (e.g. a Tag above a two-line title).
+  var titleNode = typeof title === 'string' || typeof title === 'number' ? _jsx(Typography.Headline, {
+    size: 'sm',
+    as: 'h2',
+    color: 'default',
+    children: title
+  }) : title;
+  // Same contract as `title`: a plain string gets the family treatment (the
+  // muted label of "Step 2 of 3"), a node passes through so a Tag or a
+  // composed row still works. Without this every caller with a text eyebrow
+  // would hand-roll the same Typography.
+  //
+  // An EMPTY string counts as absent. Callers routinely hold the eyebrow in a
+  // state object that starts as `''`, and rendering an empty label would open
+  // an 8px seam above the title for nothing — so they can pass the value
+  // straight through instead of guarding it at every call site.
+  var eyebrowNode = eyebrow == null || eyebrow === '' ? null : typeof eyebrow === 'string' || typeof eyebrow === 'number' ? _jsx(Typography.Body, {
+    size: 'sm',
+    color: 'default-tertiary',
+    children: eyebrow
+  }) : eyebrow;
+  var illustrationNode = typeof illustration === 'string' ? _jsx(Icons, {
+    name: illustration,
+    size: config.illustrationSize
+  }) : illustration;
+  // Its own row above everything else, on the block's 8px seam — the shape
+  // stepped flows use in both hosts (2FA setup on a page, wizard dialogs).
+  var backNode = showBackIcon ? _jsx("button", {
+    type: 'button',
+    className: classes('back'),
+    "aria-label": PANEL_LAYOUT_BACK_LABEL,
+    onClick: onBack,
+    children: backIcon !== null && backIcon !== void 0 ? backIcon : _jsx(Icons, {
+      name: 'arrowLeft',
+      size: PANEL_LAYOUT_BACK_ICON_SIZE
+    })
+  }) : null;
+  var hasHeader = showBackIcon || illustration != null || eyebrowNode != null || title != null || description != null;
+  var header = hasHeader ? _jsxs("div", {
+    className: classes('header'),
+    children: [backNode, illustrationNode != null && _jsx("div", {
+      className: classes('illustration'),
+      children: illustrationNode
+    }), eyebrowNode, titleNode, description != null && _jsx(Typography.Body, {
+      as: 'p',
+      size: 'md',
+      strong: descriptionStrong,
+      color: 'default-secondary',
+      className: classes('description'),
+      children: description
+    })]
+  }) : undefined;
+  // The bar owns the button size, so the family size is applied per action
+  // rather than as a bar-level prop; an explicit per-action `size` still wins.
+  var withSize = function withSize(action) {
+    var _a;
+    return action && Object.assign(Object.assign({}, action), {
+      size: (_a = action.size) !== null && _a !== void 0 ? _a : config.buttonSize
+    });
+  };
+  var footer = primary || secondary || footnote ? _jsx(ActionBar, {
+    direction: direction,
+    primary: withSize(primary),
+    secondary: withSize(secondary),
+    footnote: footnote
+  }) : undefined;
+  return _jsx(FormLayout
+  // `page/small` is used for its 24 padding and 16 region gap, which are
+  // already the result family's numbers. Its 448 width is NOT — that is
+  // the sign-in card; the result panel is 380, from the config table.
+  , {
+    // `page/small` is used for its 24 padding and 16 region gap, which are
+    // already the result family's numbers. Its 448 width is NOT — that is
+    // the sign-in card; the result panel is 380, from the config table.
+    variant: 'page',
+    size: 'small',
+    scroll: scroll,
+    // In a dialog the Dialog panel carries the width (BaseDialog reads the
+    // same entry) and the layout fills it: sizing a bare panel from its
+    // child hits the shrink-to-fit percentage circularity.
+    width: width !== null && width !== void 0 ? width : variant === 'modal' ? '100%' : config.width,
+    className: joinCls(classes(), classes(variant), className),
+    style: {
+      '--form-layout-action-gap': "".concat(config.actionGap, "px")
+    },
+    title: header,
+    footer: footer,
+    children: children
+  });
+};
+export var PanelLayout = /*#__PURE__*/memo(PanelLayoutBase);
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvUGFuZWxMYXlvdXQvUGFuZWxMYXlvdXQuanMiLCJjb21wb25lbnRzL3NyYy9jb21wb25lbnRzL1BhbmVsTGF5b3V0L1BhbmVsTGF5b3V0LnRzeCJdLCJuYW1lcyI6WyJqc3giLCJfanN4IiwianN4cyIsIl9qc3hzIiwibWVtbyIsIkFjdGlvbkJhciIsIkZvcm1MYXlvdXQiLCJJY29ucyIsIlR5cG9ncmFwaHkiLCJkZWZhdWx0IiwiY2xhc3NuYW1lcyIsImpvaW5DbHMiLCJQQU5FTF9MQVlPVVRfQkFDS19JQ09OX1NJWkUiLCJQQU5FTF9MQVlPVVRfQkFDS19MQUJFTCIsIlBBTkVMX0xBWU9VVF9QUkVGSVgiLCJyZXNvbHZlUGFuZWxMYXlvdXRDb25maWciLCJQYW5lbExheW91dEJhc2UiLCJfcmVmIiwiX3JlZiR2YXJpYW50IiwidmFyaWFudCIsInNjcm9sbCIsIndpZHRoIiwiY2xhc3NOYW1lIiwic2hvd0JhY2tJY29uIiwib25CYWNrIiwiYmFja0ljb24iLCJleWVicm93IiwidGl0bGUiLCJkZXNjcmlwdGlvbiIsIl9yZWYkZGVzY3JpcHRpb25TdHJvbiIsImRlc2NyaXB0aW9uU3Ryb25nIiwiaWxsdXN0cmF0aW9uIiwicHJpbWFyeSIsInNlY29uZGFyeSIsImRpcmVjdGlvbiIsImZvb3Rub3RlIiwiY2hpbGRyZW4iLCJjbGFzc2VzIiwiY29uZmlnIiwidGl0bGVOb2RlIiwiSGVhZGxpbmUiLCJzaXplIiwiYXMiLCJjb2xvciIsImV5ZWJyb3dOb2RlIiwiQm9keSIsImlsbHVzdHJhdGlvbk5vZGUiLCJuYW1lIiwiaWxsdXN0cmF0aW9uU2l6ZSIsImJhY2tOb2RlIiwidHlwZSIsIm9uQ2xpY2siLCJoYXNIZWFkZXIiLCJoZWFkZXIiLCJzdHJvbmciLCJ1bmRlZmluZWQiLCJ3aXRoU2l6ZSIsImFjdGlvbiIsIl9hIiwiT2JqZWN0IiwiYXNzaWduIiwiYnV0dG9uU2l6ZSIsImZvb3RlciIsInN0eWxlIiwiY29uY2F0IiwiYWN0aW9uR2Fw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LE9BQ0V0RCxJQUFBLENBQUNLO0VBQ0M7RUFDQTtFQUNBO0VBQUEsRURoR0E7SUM4RkE7SUFDQTtJQUNBO0lBQ0FhLE9BQU8sRUFBQyxNQUFNO0lBQ2RzQixJQUFJLEVBQUMsT0FBTztJQUNackIsTUFBTSxFQUFFQSxNQUFNO0lBQ2Q7SUFDQTtJQUNBO0lBQ0FDLEtBQUssRUFBRUEsS0FBSyxLQUFBLElBQUEsSUFBTEEsS0FBSyxLQUFBLEtBQUEsQ0FBQSxHQUFMQSxLQUFLLEdBQUtGLE9BQU8sS0FBSyxPQUFPLEdBQUcsTUFBTSxHQUFHbUIsTUFBTSxDQUFDakIsS0FBTTtJQUM3REMsU0FBUyxFQUFFWCxPQUFPLENBQUMwQixPQUFPLENBQUEsQ0FBRSxFQUFFQSxPQUFPLENBQUNsQixPQUFPLENBQUMsRUFBRUcsU0FBUyxDQUFDO0lBQzFEeUMsS0FBSyxFQUFFO01BQUUsMEJBQTBCLEtBQUFDLE1BQUEsQ0FBSzFCLE1BQU0sQ0FBQzJCLFNBQVM7SUFBSSxDQUFtQjtJQUMvRXRDLEtBQUssRUFBRTBCLE1BQU07SUFDYlMsTUFBTSxFQUFFQSxNQUFNO0lBQUExQixRQUFBLEVBRWJBO0VBQVEsQ0FBQSxDQUNFO0FBRWpCLENBQUM7QUFFRCxPQUFPLElBQU04QixXQUFXLGdCQUFHOUQsSUFBSSxDQUFDWSxlQUFlLENBQUMiLCJmaWxlIjoiY29tcG9uZW50cy9QYW5lbExheW91dC9QYW5lbExheW91dC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGpzeCBhcyBfanN4LCBqc3hzIGFzIF9qc3hzIH0gZnJvbSBcInJlYWN0L2pzeC1ydW50aW1lXCI7XG5pbXBvcnQgeyBtZW1vIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgQWN0aW9uQmFyIH0gZnJvbSAnLi4vQWN0aW9uQmFyJztcbmltcG9ydCB7IEZvcm1MYXlvdXQgfSBmcm9tICcuLi9Gb3JtTGF5b3V0JztcbmltcG9ydCB7IEljb25zIH0gZnJvbSAnLi4vSWNvbnMnO1xuaW1wb3J0IHsgVHlwb2dyYXBoeSB9IGZyb20gJy4uL1R5cG9ncmFwaHknO1xuaW1wb3J0IHsgZGVmYXVsdCBhcyBjbGFzc25hbWVzLCBqb2luQ2xzIH0gZnJvbSAnLi4vLi4vdXRpbHMvY2xhc3NuYW1lcyc7XG5pbXBvcnQgeyBQQU5FTF9MQVlPVVRfQkFDS19JQ09OX1NJWkUsIFBBTkVMX0xBWU9VVF9CQUNLX0xBQkVMLCBQQU5FTF9MQVlPVVRfUFJFRklYLCByZXNvbHZlUGFuZWxMYXlvdXRDb25maWcsIH0gZnJvbSAnLi9jb25zdGFudHMnO1xuaW1wb3J0ICcuL3N0eWxlJztcbi8qKlxuICogVGhlIG5vbi1mb3JtIGNvbnRlbnQgUEFORUwg4oCUIHRoZSBjb3VudGVycGFydCB0byBgRm9ybUxheW91dGA6IHRoYXQgb25lXG4gKiBob2xkcyBmaWVsZHMsIHRoaXMgb25lIGhvbGRzIGFuIGlsbHVzdHJhdGlvbiwgY29weSBhbmQgYWN0aW9ucy4gT05FIHN1cmZhY2VcbiAqIHNlcnZpbmcgdHdvIGhvc3RzOlxuICpcbiAqICAgcGFnZSBob3N0ICAgIDxQYW5lbExheW91dCAvPiAgICAgICAgICAgICAgICAgICAgICAgICB1c2VkIGRpcmVjdGx5XG4gKiAgIGRpYWxvZyBob3N0ICBCYXNlRGlhbG9nID0gRGlhbG9nKGJhcmUpICsgdGhpcyhtb2RhbCkgb25seSBhZGRzIHRoZSBvdmVybGF5XG4gKlxuICogRGVsaWJlcmF0ZWx5IE5PVCBuYW1lZCBmb3IgYSBzY2VuYXJpbywgYmVjYXVzZSBpdCBjYXJyaWVzIHNldmVyYWw6IGFcbiAqIHZlcmlmaWNhdGlvbiBjaGFsbGVuZ2UsIGEgc3RlcHBlZCB3aXphcmQgKDJGQSBzZXR1cCDigJQgaGVuY2UgdGhlIGJhY2tcbiAqIGFycm93KSwgYSB0ZXJtaW5hbCBwYWdlIHdpdGggbm8gYWN0aW9uIGF0IGFsbC5cbiAqXG4gKiBPbiBhIHBhZ2UsIE9ORSBvZiB0aG9zZSBzY2VuYXJpb3MgaGFzIGEgc2hlbGwgb2YgaXRzIG93biBhbmQgdGhlIHJlc3QgZG9cbiAqIG5vdCDigJQgd2hpY2ggZGVjaWRlcyB3aGVyZSBidXNpbmVzcyBjb2RlIHNob3VsZCByZWFjaDpcbiAqXG4gKiAgIGEgcmVzdWx0IChzdWNjZXNzIC8gZmFpbHVyZSAvIGV4cGlyZWQgLyDigKYpICDihpIgYFJlc3VsdEZvcm1gLCBidXNpbmVzcy9Gb3JtXG4gKiAgIGFueXRoaW5nIGVsc2UgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg4oaSIHRoaXMsIGRpcmVjdGx5XG4gKlxuICogU28gYmVpbmcgdXNlZCBkaXJlY3RseSBpcyB0aGUgbm9ybWFsIGNhc2UgaGVyZSwgbm90IGEgZmFsbGJhY2suIE9ubHkgYWRkXG4gKiBhbm90aGVyIHNoZWxsIG9uIHRvcCB3aGVuIGEgc2NlbmFyaW8gZWFybnMgYSBuYW1lIEFORCByZWN1cnJpbmcgY29weSAoYVxuICogYHByZXNldGApOyBhIHNoZWxsIHRoYXQganVzdCByZS1leHBvcnRzIHRoaXMgb25lIGJ1eXMgbm90aGluZy5cbiAqXG4gKiBBc3NlbWJseTpcbiAqXG4gKiAgIEZvcm1MYXlvdXQgICAgICAgICAgY2FyZCBjaHJvbWUgKHN1cmZhY2UsIGhhaXJsaW5lLCByYWRpdXMpICsgdGhlIDI0XG4gKiAgIOKUgiAgICAgICAgICAgICAgICAgICBwYWRkaW5nIGFuZCAxNiByZWdpb24gZ2FwLiBJdHMgYHBhZ2Uvc21hbGxgIHdpZHRoXG4gKiAgIOKUgiAgICAgICAgICAgICAgICAgICAoNDQ4LCB0aGUgc2lnbi1pbiBjYXJkKSBpcyBOT1QgdXNlZCDigJQgdGhlIHBhbmVsIHdpZHRoXG4gKiAgIOKUgiAgICAgICAgICAgICAgICAgICBjb21lcyBmcm9tIHRoZSBjb25maWcgdGFibGUuXG4gKiAgIOKUnOKUgCBoZWFkZXIgc2xvdCAgICAgIGJhY2sgLyBpbGx1c3RyYXRpb24gLyBleWVicm93IC8gdGl0bGUgLyBkZXNjcmlwdGlvbiBhc1xuICogICDilIIgICAgICAgICAgICAgICAgICAgT05FIGJsb2NrIG9uIDhweCBzZWFtcy4gSXQgZ29lcyBpbiB0aGUgdGl0bGUgc2xvdCwgbm90XG4gKiAgIOKUgiAgICAgICAgICAgICAgICAgICB0aGUgY29udGVudCByZWdpb24sIGJlY2F1c2UgaXQgaXMgYWxsIGhlYWRlciBjb3B5IOKAlFxuICogICDilIIgICAgICAgICAgICAgICAgICAgdGhhdCBhbHNvIGtlZXBzIGl0IHBpbm5lZCB3aGVuIHRoZSBjb250ZW50IHNjcm9sbHMuXG4gKiAgIOKUnOKUgCBjb250ZW50IHJlZ2lvbiAgIGBjaGlsZHJlbmAg4oCUIGZyZWUtZm9ybSAoYSBRUiBjb2RlLCBhbiBPVFAgaW5wdXQsIHJvd3MpXG4gKiAgIOKUlOKUgCBBY3Rpb25CYXIoZmlsbCkgIHRoZSBhY3Rpb25zLlxuICpcbiAqIEl0IG93bnMgbm8gY29weSBhbmQgbm8gbG9vc2UgbnVtYmVyczogZXZlcnl0aGluZyBob3N0LXNwZWNpZmljIGNvbWVzIGZyb21cbiAqIGBQQU5FTF9MQVlPVVRfQ09ORklHYCwgc28gYSBkaXZlcmdlbmNlIGJldHdlZW4gcGFnZSBhbmQgZGlhbG9nIGlzIGEgdmFsdWVcbiAqIGNoYW5nZSBpbiB0aGF0IHRhYmxlIGFuZCBub3RoaW5nIGVsc2UuXG4gKi9cbmNvbnN0IFBhbmVsTGF5b3V0QmFzZSA9ICh7IHZhcmlhbnQgPSAncGFnZScsIHNjcm9sbCwgd2lkdGgsIGNsYXNzTmFtZSwgc2hvd0JhY2tJY29uLCBvbkJhY2ssIGJhY2tJY29uLCBleWVicm93LCB0aXRsZSwgZGVzY3JpcHRpb24sIGRlc2NyaXB0aW9uU3Ryb25nID0gdHJ1ZSwgaWxsdXN0cmF0aW9uLCBwcmltYXJ5LCBzZWNvbmRhcnksIGRpcmVjdGlvbiwgZm9vdG5vdGUsIGNoaWxkcmVuLCB9KSA9PiB7XG4gICAgY29uc3QgY2xhc3NlcyA9IGNsYXNzbmFtZXMoUEFORUxfTEFZT1VUX1BSRUZJWCk7XG4gICAgY29uc3QgY29uZmlnID0gcmVzb2x2ZVBhbmVsTGF5b3V0Q29uZmlnKHZhcmlhbnQpO1xuICAgIC8vIEEgcGxhaW4gc3RyaW5nIGJlY29tZXMgdGhlIGZhbWlseSBoZWFkaW5nOyBhIG5vZGUgcGFzc2VzIHRocm91Z2ggc29cbiAgICAvLyBjYWxsZXJzIGNhbiBjb21wb3NlIChlLmcuIGEgVGFnIGFib3ZlIGEgdHdvLWxpbmUgdGl0bGUpLlxuICAgIGNvbnN0IHRpdGxlTm9kZSA9IHR5cGVvZiB0aXRsZSA9PT0gJ3N0cmluZycgfHwgdHlwZW9mIHRpdGxlID09PSAnbnVtYmVyJyA/IChfanN4KFR5cG9ncmFwaHkuSGVhZGxpbmUsIHsgc2l6ZTogJ3NtJywgYXM6ICdoMicsIGNvbG9yOiAnZGVmYXVsdCcsIGNoaWxkcmVuOiB0aXRsZSB9KSkgOiAodGl0bGUpO1xuICAgIC8vIFNhbWUgY29udHJhY3QgYXMgYHRpdGxlYDogYSBwbGFpbiBzdHJpbmcgZ2V0cyB0aGUgZmFtaWx5IHRyZWF0bWVudCAodGhlXG4gICAgLy8gbXV0ZWQgbGFiZWwgb2YgXCJTdGVwIDIgb2YgM1wiKSwgYSBub2RlIHBhc3NlcyB0aHJvdWdoIHNvIGEgVGFnIG9yIGFcbiAgICAvLyBjb21wb3NlZCByb3cgc3RpbGwgd29ya3MuIFdpdGhvdXQgdGhpcyBldmVyeSBjYWxsZXIgd2l0aCBhIHRleHQgZXllYnJvd1xuICAgIC8vIHdvdWxkIGhhbmQtcm9sbCB0aGUgc2FtZSBUeXBvZ3JhcGh5LlxuICAgIC8vXG4gICAgLy8gQW4gRU1QVFkgc3RyaW5nIGNvdW50cyBhcyBhYnNlbnQuIENhbGxlcnMgcm91dGluZWx5IGhvbGQgdGhlIGV5ZWJyb3cgaW4gYVxuICAgIC8vIHN0YXRlIG9iamVjdCB0aGF0IHN0YXJ0cyBhcyBgJydgLCBhbmQgcmVuZGVyaW5nIGFuIGVtcHR5IGxhYmVsIHdvdWxkIG9wZW5cbiAgICAvLyBhbiA4cHggc2VhbSBhYm92ZSB0aGUgdGl0bGUgZm9yIG5vdGhpbmcg4oCUIHNvIHRoZXkgY2FuIHBhc3MgdGhlIHZhbHVlXG4gICAgLy8gc3RyYWlnaHQgdGhyb3VnaCBpbnN0ZWFkIG9mIGd1YXJkaW5nIGl0IGF0IGV2ZXJ5IGNhbGwgc2l0ZS5cbiAgICBjb25zdCBleWVicm93Tm9kZSA9IGV5ZWJyb3cgPT0gbnVsbCB8fCBleWVicm93ID09PSAnJyA/IG51bGxcbiAgICAgICAgOiB0eXBlb2YgZXllYnJvdyA9PT0gJ3N0cmluZycgfHwgdHlwZW9mIGV5ZWJyb3cgPT09ICdudW1iZXInID8gKF9qc3goVHlwb2dyYXBoeS5Cb2R5LCB7IHNpemU6ICdzbScsIGNvbG9yOiAnZGVmYXVsdC10ZXJ0aWFyeScsIGNoaWxkcmVuOiBleWVicm93IH0pKSA6IChleWVicm93KTtcbiAgICBjb25zdCBpbGx1c3RyYXRpb25Ob2RlID0gdHlwZW9mIGlsbHVzdHJhdGlvbiA9PT0gJ3N0cmluZycgPyAoX2pzeChJY29ucywgeyBuYW1lOiBpbGx1c3RyYXRpb24sIHNpemU6IGNvbmZpZy5pbGx1c3RyYXRpb25TaXplIH0pKSA6IChpbGx1c3RyYXRpb24pO1xuICAgIC8vIEl0cyBvd24gcm93IGFib3ZlIGV2ZXJ5dGhpbmcgZWxzZSwgb24gdGhlIGJsb2NrJ3MgOHB4IHNlYW0g4oCUIHRoZSBzaGFwZVxuICAgIC8vIHN0ZXBwZWQgZmxvd3MgdXNlIGluIGJvdGggaG9zdHMgKDJGQSBzZXR1cCBvbiBhIHBhZ2UsIHdpemFyZCBkaWFsb2dzKS5cbiAgICBjb25zdCBiYWNrTm9kZSA9IHNob3dCYWNrSWNvbiA/IChfanN4KFwiYnV0dG9uXCIsIHsgdHlwZTogJ2J1dHRvbicsIGNsYXNzTmFtZTogY2xhc3NlcygnYmFjaycpLCBcImFyaWEtbGFiZWxcIjogUEFORUxfTEFZT1VUX0JBQ0tfTEFCRUwsIG9uQ2xpY2s6IG9uQmFjaywgY2hpbGRyZW46IGJhY2tJY29uICE9PSBudWxsICYmIGJhY2tJY29uICE9PSB2b2lkIDAgPyBiYWNrSWNvbiA6IF9qc3goSWNvbnMsIHsgbmFtZTogJ2Fycm93TGVmdCcsIHNpemU6IFBBTkVMX0xBWU9VVF9CQUNLX0lDT05fU0laRSB9KSB9KSkgOiBudWxsO1xuICAgIGNvbnN0IGhhc0hlYWRlciA9IHNob3dCYWNrSWNvbiB8fFxuICAgICAgICBpbGx1c3RyYXRpb24gIT0gbnVsbCB8fFxuICAgICAgICBleWVicm93Tm9kZSAhPSBudWxsIHx8XG4gICAgICAgIHRpdGxlICE9IG51bGwgfHxcbiAgICAgICAgZGVzY3JpcHRpb24gIT0gbnVsbDtcbiAgICBjb25zdCBoZWFkZXIgPSBoYXNIZWFkZXIgPyAoX2pzeHMoXCJkaXZcIiwgeyBjbGFzc05hbWU6IGNsYXNzZXMoJ2hlYWRlcicpLCBjaGlsZHJlbjogW2JhY2tOb2RlLCBpbGx1c3RyYXRpb25Ob2RlICE9IG51bGwgJiYgKF9qc3goXCJkaXZcIiwgeyBjbGFzc05hbWU6IGNsYXNzZXMoJ2lsbHVzdHJhdGlvbicpLCBjaGlsZHJlbjogaWxsdXN0cmF0aW9uTm9kZSB9KSksIGV5ZWJyb3dOb2RlLCB0aXRsZU5vZGUsIGRlc2NyaXB0aW9uICE9IG51bGwgJiYgKF9qc3goVHlwb2dyYXBoeS5Cb2R5LCB7IGFzOiAncCcsIHNpemU6ICdtZCcsIHN0cm9uZzogZGVzY3JpcHRpb25TdHJvbmcsIGNvbG9yOiAnZGVmYXVsdC1zZWNvbmRhcnknLCBjbGFzc05hbWU6IGNsYXNzZXMoJ2Rlc2NyaXB0aW9uJyksIGNoaWxkcmVuOiBkZXNjcmlwdGlvbiB9KSldIH0pKSA6IHVuZGVmaW5lZDtcbiAgICAvLyBUaGUgYmFyIG93bnMgdGhlIGJ1dHRvbiBzaXplLCBzbyB0aGUgZmFtaWx5IHNpemUgaXMgYXBwbGllZCBwZXIgYWN0aW9uXG4gICAgLy8gcmF0aGVyIHRoYW4gYXMgYSBiYXItbGV2ZWwgcHJvcDsgYW4gZXhwbGljaXQgcGVyLWFjdGlvbiBgc2l6ZWAgc3RpbGwgd2lucy5cbiAgICBjb25zdCB3aXRoU2l6ZSA9IChhY3Rpb24pID0+IHsgdmFyIF9hOyByZXR1cm4gYWN0aW9uICYmIE9iamVjdC5hc3NpZ24oT2JqZWN0LmFzc2lnbih7fSwgYWN0aW9uKSwgeyBzaXplOiAoX2EgPSBhY3Rpb24uc2l6ZSkgIT09IG51bGwgJiYgX2EgIT09IHZvaWQgMCA/IF9hIDogY29uZmlnLmJ1dHRvblNpemUgfSk7IH07XG4gICAgY29uc3QgZm9vdGVyID0gcHJpbWFyeSB8fCBzZWNvbmRhcnkgfHwgZm9vdG5vdGUgPyAoX2pzeChBY3Rpb25CYXIsIHsgZGlyZWN0aW9uOiBkaXJlY3Rpb24sIHByaW1hcnk6IHdpdGhTaXplKHByaW1hcnkpLCBzZWNvbmRhcnk6IHdpdGhTaXplKHNlY29uZGFyeSksIGZvb3Rub3RlOiBmb290bm90ZSB9KSkgOiB1bmRlZmluZWQ7XG4gICAgcmV0dXJuIChfanN4KEZvcm1MYXlvdXRcbiAgICAvLyBgcGFnZS9zbWFsbGAgaXMgdXNlZCBmb3IgaXRzIDI0IHBhZGRpbmcgYW5kIDE2IHJlZ2lvbiBnYXAsIHdoaWNoIGFyZVxuICAgIC8vIGFscmVhZHkgdGhlIHJlc3VsdCBmYW1pbHkncyBudW1iZXJzLiBJdHMgNDQ4IHdpZHRoIGlzIE5PVCDigJQgdGhhdCBpc1xuICAgIC8vIHRoZSBzaWduLWluIGNhcmQ7IHRoZSByZXN1bHQgcGFuZWwgaXMgMzgwLCBmcm9tIHRoZSBjb25maWcgdGFibGUuXG4gICAgLCB7IFxuICAgICAgICAvLyBgcGFnZS9zbWFsbGAgaXMgdXNlZCBmb3IgaXRzIDI0IHBhZGRpbmcgYW5kIDE2IHJlZ2lvbiBnYXAsIHdoaWNoIGFyZVxuICAgICAgICAvLyBhbHJlYWR5IHRoZSByZXN1bHQgZmFtaWx5J3MgbnVtYmVycy4gSXRzIDQ0OCB3aWR0aCBpcyBOT1Qg4oCUIHRoYXQgaXNcbiAgICAgICAgLy8gdGhlIHNpZ24taW4gY2FyZDsgdGhlIHJlc3VsdCBwYW5lbCBpcyAzODAsIGZyb20gdGhlIGNvbmZpZyB0YWJsZS5cbiAgICAgICAgdmFyaWFudDogJ3BhZ2UnLCBzaXplOiAnc21hbGwnLCBzY3JvbGw6IHNjcm9sbCwgXG4gICAgICAgIC8vIEluIGEgZGlhbG9nIHRoZSBEaWFsb2cgcGFuZWwgY2FycmllcyB0aGUgd2lkdGggKEJhc2VEaWFsb2cgcmVhZHMgdGhlXG4gICAgICAgIC8vIHNhbWUgZW50cnkpIGFuZCB0aGUgbGF5b3V0IGZpbGxzIGl0OiBzaXppbmcgYSBiYXJlIHBhbmVsIGZyb20gaXRzXG4gICAgICAgIC8vIGNoaWxkIGhpdHMgdGhlIHNocmluay10by1maXQgcGVyY2VudGFnZSBjaXJjdWxhcml0eS5cbiAgICAgICAgd2lkdGg6IHdpZHRoICE9PSBudWxsICYmIHdpZHRoICE9PSB2b2lkIDAgPyB3aWR0aCA6ICh2YXJpYW50ID09PSAnbW9kYWwnID8gJzEwMCUnIDogY29uZmlnLndpZHRoKSwgY2xhc3NOYW1lOiBqb2luQ2xzKGNsYXNzZXMoKSwgY2xhc3Nlcyh2YXJpYW50KSwgY2xhc3NOYW1lKSwgc3R5bGU6IHsgJy0tZm9ybS1sYXlvdXQtYWN0aW9uLWdhcCc6IGAke2NvbmZpZy5hY3Rpb25HYXB9cHhgIH0sIHRpdGxlOiBoZWFkZXIsIGZvb3RlcjogZm9vdGVyLCBjaGlsZHJlbjogY2hpbGRyZW4gfSkpO1xufTtcbmV4cG9ydCBjb25zdCBQYW5lbExheW91dCA9IG1lbW8oUGFuZWxMYXlvdXRCYXNlKTsiLG51bGxdLCJzb3VyY2VSb290IjoiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjIn0=

package/es/components/PanelLayout/constants.d.ts

@@ -0,0 +1,60 @@
+export declare const PANEL_LAYOUT_PREFIX = "panel-layout";
+/** Back-arrow control: 24px icon, and its accessible name. */
+export declare const PANEL_LAYOUT_BACK_ICON_SIZE = 24;
+export declare const PANEL_LAYOUT_BACK_LABEL = "Go back";
+/**
+ * THE density table for content panels — the single thing to edit when the
+ * design changes. Same shape as `FORM_LAYOUT_CONFIG`: one entry per host, so
+ * a divergence between the two is a value change, never a structural one.
+ *
+ * The two entries are currently IDENTICAL, and that is the design: a panel
+ * renders the same on a page and in a dialog, the only difference being
+ * whether a `Dialog(bare)` is wrapped around it. They are still spelled out
+ * separately so that (a) the sameness reads as deliberate rather than as an
+ * oversight, and (b) a divergence later is a value change here and nothing
+ * else — no consumer passes these numbers, they only pass `variant`.
+ *
+ * `width` is the panel width used in BOTH hosts (380). It is NOT inherited
+ * from FormLayout's `page/small` density — that entry is 448, the app's
+ * sign-in card, a different surface. Only the padding (24) and the region gap
+ * (16) come from that density, and those already match. Inside a dialog the
+ * value goes on the Dialog panel and the layout fills at 100%: sizing a bare
+ * panel from its child hits the shrink-to-fit percentage circularity (the
+ * same reason FormDialog gives).
+ */
+export declare const PANEL_LAYOUT_CONFIG: {
+    /** Standalone on a page. */
+    readonly page: {
+        /** Panel width (px). */
+        readonly width: 380;
+        /** Illustration above the header copy (px). */
+        readonly illustrationSize: 52;
+        /** Footer action button size. */
+        readonly buttonSize: "medium";
+        /** Gap between footer action buttons (px); ActionBar reads it via var. */
+        readonly actionGap: 8;
+    };
+    /** Inside a dialog, wrapped by `BaseDialog` in a `Dialog(bare)`. */
+    readonly modal: {
+        readonly width: 380;
+        readonly illustrationSize: 52;
+        readonly buttonSize: "medium";
+        readonly actionGap: 8;
+    };
+};
+export type PanelLayoutVariant = keyof typeof PANEL_LAYOUT_CONFIG;
+export declare const resolvePanelLayoutConfig: (variant: PanelLayoutVariant) => {
+    /** Panel width (px). */
+    readonly width: 380;
+    /** Illustration above the header copy (px). */
+    readonly illustrationSize: 52;
+    /** Footer action button size. */
+    readonly buttonSize: "medium";
+    /** Gap between footer action buttons (px); ActionBar reads it via var. */
+    readonly actionGap: 8;
+} | {
+    readonly width: 380;
+    readonly illustrationSize: 52;
+    readonly buttonSize: "medium";
+    readonly actionGap: 8;
+};