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

package/lib/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/lib/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/lib/components/PanelLayout/PanelLayout.js

@@ -0,0 +1,172 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PanelLayout = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _ActionBar = require("../ActionBar");
+var _FormLayout = require("../FormLayout");
+var _Icons = require("../Icons");
+var _Typography = require("../Typography");
+var _classnames = _interopRequireWildcard(require("../../utils/classnames"));
+var _constants = require("./constants");
+require("./style");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+/**
+ * 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 = (0, _classnames["default"])(_constants.PANEL_LAYOUT_PREFIX);
+  var config = (0, _constants.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' ? (0, _jsxRuntime.jsx)(_Typography.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' ? (0, _jsxRuntime.jsx)(_Typography.Typography.Body, {
+    size: 'sm',
+    color: 'default-tertiary',
+    children: eyebrow
+  }) : eyebrow;
+  var illustrationNode = typeof illustration === 'string' ? (0, _jsxRuntime.jsx)(_Icons.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 ? (0, _jsxRuntime.jsx)("button", {
+    type: 'button',
+    className: classes('back'),
+    "aria-label": _constants.PANEL_LAYOUT_BACK_LABEL,
+    onClick: onBack,
+    children: backIcon !== null && backIcon !== void 0 ? backIcon : (0, _jsxRuntime.jsx)(_Icons.Icons, {
+      name: 'arrowLeft',
+      size: _constants.PANEL_LAYOUT_BACK_ICON_SIZE
+    })
+  }) : null;
+  var hasHeader = showBackIcon || illustration != null || eyebrowNode != null || title != null || description != null;
+  var header = hasHeader ? (0, _jsxRuntime.jsxs)("div", {
+    className: classes('header'),
+    children: [backNode, illustrationNode != null && (0, _jsxRuntime.jsx)("div", {
+      className: classes('illustration'),
+      children: illustrationNode
+    }), eyebrowNode, titleNode, description != null && (0, _jsxRuntime.jsx)(_Typography.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 ? (0, _jsxRuntime.jsx)(_ActionBar.ActionBar, {
+    direction: direction,
+    primary: withSize(primary),
+    secondary: withSize(secondary),
+    footnote: footnote
+  }) : undefined;
+  return (0, _jsxRuntime.jsx)(_FormLayout.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: (0, _classnames.joinCls)(classes(), classes(variant), className),
+    style: {
+      '--form-layout-action-gap': "".concat(config.actionGap, "px")
+    },
+    title: header,
+    footer: footer,
+    children: children
+  });
+};
+var PanelLayout = exports.PanelLayout = /*#__PURE__*/(0, _react.memo)(PanelLayoutBase);
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvUGFuZWxMYXlvdXQvUGFuZWxMYXlvdXQuanMiLCJjb21wb25lbnRzL3NyYy9jb21wb25lbnRzL1BhbmVsTGF5b3V0L1BhbmVsTGF5b3V0LnRzeCJdLCJuYW1lcyI6WyJfanN4UnVudGltZSIsInJlcXVpcmUiLCJfcmVhY3QiLCJfQWN0aW9uQmFyIiwiX0Zvcm1MYXlvdXQiLCJfSWNvbnMiLCJfVHlwb2dyYXBoeSIsIl9jbGFzc25hbWVzIiwiX2ludGVyb3BSZXF1aXJlV2lsZGNhcmQiLCJfY29uc3RhbnRzIiwiX2dldFJlcXVpcmVXaWxkY2FyZENhY2hlIiwiZSIsIldlYWtNYXAiLCJyIiwidCIsIl9fZXNNb2R1bGUiLCJfdHlwZW9mIiwiaGFzIiwiZ2V0IiwibiIsIl9fcHJvdG9fXyIsImEiLCJPYmplY3QiLCJkZWZpbmVQcm9wZXJ0eSIsImdldE93blByb3BlcnR5RGVzY3JpcHRvciIsInUiLCJoYXNPd25Qcm9wZXJ0eSIsImNhbGwiLCJpIiwic2V0IiwiUGFuZWxMYXlvdXRCYXNlIiwiX3JlZiIsIl9yZWYkdmFyaWFudCIsInZhcmlhbnQiLCJzY3JvbGwiLCJ3aWR0aCIsImNsYXNzTmFtZSIsInNob3dCYWNrSWNvbiIsIm9uQmFjayIsImJhY2tJY29uIiwiZXllYnJvdyIsInRpdGxlIiwiZGVzY3JpcHRpb24iLCJfcmVmJGRlc2NyaXB0aW9uU3Ryb24iLCJkZXNjcmlwdGlvblN0cm9uZyIsImlsbHVzdHJhdGlvbiIsInByaW1hcnkiLCJzZWNvbmRhcnkiLCJkaXJlY3Rpb24iLCJmb290bm90ZSIsImNoaWxkcmVuIiwiY2xhc3NlcyIsImNsYXNzbmFtZXMiLCJQQU5FTF9MQVlPVVRfUFJFRklYIiwiY29uZmlnIiwicmVzb2x2ZVBhbmVsTGF5b3V0Q29uZmlnIiwidGl0bGVOb2RlIiwiX2pzeCIsIlR5cG9ncmFwaHkiLCJIZWFkbGluZSIsInNpemUiLCJhcyIsImNvbG9yIiwiZXllYnJvd05vZGUiLCJCb2R5IiwiaWxsdXN0cmF0aW9uTm9kZSIsIkljb25zIiwibmFtZSIsImlsbHVzdHJhdGlvblNpemUiLCJiYWNrTm9kZSIsInR5cGUiLCJQQU5FTF9MQVlPVVRfQkFDS19MQUJFTCIsIm9uQ2xpY2siLCJQQU5FTF9MQVlPVVRfQkFDS19JQ09OX1NJWkUiLCJoYXNIZWFkZXIiLCJoZWFkZXIiLCJfanN4cyIsInN0cm9uZyIsInVuZGVmaW5lZCIsIndpdGhTaXplIiwiYWN0aW9uIiwiX2EiLCJhc3NpZ24iLCJidXR0b25TaXplIiwiZm9vdGVyIiwiQWN0aW9uQmFyIiwiRm9ybUxheW91dCIsImpvaW5DbHMiLCJzdHlsZSIsImNvbmNhdCIsImFjdGlvbkdhcCIsIlBhbmVsTGF5b3V0IiwiZXhwb3J0cyIsIm1lbW8iXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFBQSxJQUFBQSxXQUFBLEdBQUFDLE9BQUE7QUNBQSxJQUFBQyxNQUFBLEdBQUFELE9BQUE7QUFDQSxJQUFBRSxVQUFBLEdBQUFGLE9BQUE7QUFDQSxJQUFBRyxXQUFBLEdBQUFILE9BQUE7QUFDQSxJQUFBSSxNQUFBLEdBQUFKLE9BQUE7QUFDQSxJQUFBSyxXQUFBLEdBQUFMLE9BQUE7QUFDQSxJQUFBTSxXQUFBLEdBQUFDLHVCQUFBLENBQUFQLE9BQUE7QUFDQSxJQUFBUSxVQUFBLEdBQUFSLE9BQUE7QUFVQUEsT0FBQTtBQUFpQixTQUFBUyx5QkFBQUMsQ0FBQSw2QkFBQUMsT0FBQSxtQkFBQUMsQ0FBQSxPQUFBRCxPQUFBLElBQUFFLENBQUEsT0FBQUYsT0FBQSxZQUFBRix3QkFBQSxZQUFBQSx5QkFBQUMsQ0FBQSxXQUFBQSxDQUFBLEdBQUFHLENBQUEsR0FBQUQsQ0FBQSxLQUFBRixDQUFBO0FBQUEsU0FBQUgsd0JBQUFHLENBQUEsRUFBQUUsQ0FBQSxTQUFBQSxDQUFBLElBQUFGLENBQUEsSUFBQUEsQ0FBQSxDQUFBSSxVQUFBLFNBQUFKLENBQUEsZUFBQUEsQ0FBQSxnQkFBQUssT0FBQSxDQUFBTCxDQUFBLDBCQUFBQSxDQUFBLHNCQUFBQSxDQUFBLFFBQUFHLENBQUEsR0FB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bExheW91dC5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGpzeCBhcyBfanN4LCBqc3hzIGFzIF9qc3hzIH0gZnJvbSBcInJlYWN0L2pzeC1ydW50aW1lXCI7XG5pbXBvcnQgeyBtZW1vIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgQWN0aW9uQmFyIH0gZnJvbSAnLi4vQWN0aW9uQmFyJztcbmltcG9ydCB7IEZvcm1MYXlvdXQgfSBmcm9tICcuLi9Gb3JtTGF5b3V0JztcbmltcG9ydCB7IEljb25zIH0gZnJvbSAnLi4vSWNvbnMnO1xuaW1wb3J0IHsgVHlwb2dyYXBoeSB9IGZyb20gJy4uL1R5cG9ncmFwaHknO1xuaW1wb3J0IHsgZGVmYXVsdCBhcyBjbGFzc25hbWVzLCBqb2luQ2xzIH0gZnJvbSAnLi4vLi4vdXRpbHMvY2xhc3NuYW1lcyc7XG5pbXBvcnQgeyBQQU5FTF9MQVlPVVRfQkFDS19JQ09OX1NJWkUsIFBBTkVMX0xBWU9VVF9CQUNLX0xBQkVMLCBQQU5FTF9MQVlPVVRfUFJFRklYLCByZXNvbHZlUGFuZWxMYXlvdXRDb25maWcsIH0gZnJvbSAnLi9jb25zdGFudHMnO1xuaW1wb3J0ICcuL3N0eWxlJztcbi8qKlxuICogVGhlIG5vbi1mb3JtIGNvbnRlbnQgUEFORUwg4oCUIHRoZSBjb3VudGVycGFydCB0byBgRm9ybUxheW91dGA6IHRoYXQgb25lXG4gKiBob2xkcyBmaWVsZHMsIHRoaXMgb25lIGhvbGRzIGFuIGlsbHVzdHJhdGlvbiwgY29weSBhbmQgYWN0aW9ucy4gT05FIHN1cmZhY2VcbiAqIHNlcnZpbmcgdHdvIGhvc3RzOlxuICpcbiAqICAgcGFnZSBob3N0ICAgIDxQYW5lbExheW91dCAvPiAgICAgICAgICAgICAgICAgICAgICAgICB1c2VkIGRpcmVjdGx5XG4gKiAgIGRpYWxvZyBob3N0ICBCYXNlRGlhbG9nID0gRGlhbG9nKGJhcmUpICsgdGhpcyhtb2RhbCkgb25seSBhZGRzIHRoZSBvdmVybGF5XG4gKlxuICogRGVsaWJlcmF0ZWx5IE5PVCBuYW1lZCBmb3IgYSBzY2VuYXJpbywgYmVjYXVzZSBpdCBjYXJyaWVzIHNldmVyYWw6IGFcbiAqIHZlcmlmaWNhdGlvbiBjaGFsbGVuZ2UsIGEgc3RlcHBlZCB3aXphcmQgKDJGQSBzZXR1cCDigJQgaGVuY2UgdGhlIGJhY2tcbiAqIGFycm93KSwgYSB0ZXJtaW5hbCBwYWdlIHdpdGggbm8gYWN0aW9uIGF0IGFsbC5cbiAqXG4gKiBPbiBhIHBhZ2UsIE9ORSBvZiB0aG9zZSBzY2VuYXJpb3MgaGFzIGEgc2hlbGwgb2YgaXRzIG93biBhbmQgdGhlIHJlc3QgZG9cbiAqIG5vdCDigJQgd2hpY2ggZGVjaWRlcyB3aGVyZSBidXNpbmVzcyBjb2RlIHNob3VsZCByZWFjaDpcbiAqXG4gKiAgIGEgcmVzdWx0IChzdWNjZXNzIC8gZmFpbHVyZSAvIGV4cGlyZWQgLyDigKYpICDihpIgYFJlc3VsdEZvcm1gLCBidXNpbmVzcy9Gb3JtXG4gKiAgIGFueXRoaW5nIGVsc2UgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAg4oaSIHRoaXMsIGRpcmVjdGx5XG4gKlxuICogU28gYmVpbmcgdXNlZCBkaXJlY3RseSBpcyB0aGUgbm9ybWFsIGNhc2UgaGVyZSwgbm90IGEgZmFsbGJhY2suIE9ubHkgYWRkXG4gKiBhbm90aGVyIHNoZWxsIG9uIHRvcCB3aGVuIGEgc2NlbmFyaW8gZWFybnMgYSBuYW1lIEFORCByZWN1cnJpbmcgY29weSAoYVxuICogYHByZXNldGApOyBhIHNoZWxsIHRoYXQganVzdCByZS1leHBvcnRzIHRoaXMgb25lIGJ1eXMgbm90aGluZy5cbiAqXG4gKiBBc3NlbWJseTpcbiAqXG4gKiAgIEZvcm1MYXlvdXQgICAgICAgICAgY2FyZCBjaHJvbWUgKHN1cmZhY2UsIGhhaXJsaW5lLCByYWRpdXMpICsgdGhlIDI0XG4gKiAgIOKUgiAgICAgICAgICAgICAgICAgICBwYWRkaW5nIGFuZCAxNiByZWdpb24gZ2FwLiBJdHMgYHBhZ2Uvc21hbGxgIHdpZHRoXG4gKiAgIOKUgiAgICAgICAgICAgICAgICAgICAoNDQ4LCB0aGUgc2lnbi1pbiBjYXJkKSBpcyBOT1QgdXNlZCDigJQgdGhlIHBhbmVsIHdpZHRoXG4gKiAgIOKUgiAgICAgICAgICAgICAgICAgICBjb21lcyBmcm9tIHRoZSBjb25maWcgdGFibGUuXG4gKiAgIOKUnOKUgCBoZWFkZXIgc2xvdCAgICAgIGJhY2sgLyBpbGx1c3RyYXRpb24gLyBleWVicm93IC8gdGl0bGUgLyBkZXNjcmlwdGlvbiBhc1xuICogICDilIIgICAgICAgICAgICAgICAgICAgT05FIGJsb2NrIG9uIDhweCBzZWFtcy4gSXQgZ29lcyBpbiB0aGUgdGl0bGUgc2xvdCwgbm90XG4gKiAgIOKUgiAgICAgICAgICAgICAgICAgICB0aGUgY29udGVudCByZWdpb24sIGJlY2F1c2UgaXQgaXMgYWxsIGhlYWRlciBjb3B5IOKAlFxuICogICDilIIgICAgICAgICAgICAgICAgICAgdGhhdCBhbHNvIGtlZXBzIGl0IHBpbm5lZCB3aGVuIHRoZSBjb250ZW50IHNjcm9sbHMuXG4gKiAgIOKUnOKUgCBjb250ZW50IHJlZ2lvbiAgIGBjaGlsZHJlbmAg4oCUIGZyZWUtZm9ybSAoYSBRUiBjb2RlLCBhbiBPVFAgaW5wdXQsIHJvd3MpXG4gKiAgIOKUlOKUgCBBY3Rpb25CYXIoZmlsbCkgIHRoZSBhY3Rpb25zLlxuICpcbiAqIEl0IG93bnMgbm8gY29weSBhbmQgbm8gbG9vc2UgbnVtYmVyczogZXZlcnl0aGluZyBob3N0LXNwZWNpZmljIGNvbWVzIGZyb21cbiAqIGBQQU5FTF9MQVlPVVRfQ09ORklHYCwgc28gYSBkaXZlcmdlbmNlIGJldHdlZW4gcGFnZSBhbmQgZGlhbG9nIGlzIGEgdmFsdWVcbiAqIGNoYW5nZSBpbiB0aGF0IHRhYmxlIGFuZCBub3RoaW5nIGVsc2UuXG4gKi9cbmNvbnN0IFBhbmVsTGF5b3V0QmFzZSA9ICh7IHZhcmlhbnQgPSAncGFnZScsIHNjcm9sbCwgd2lkdGgsIGNsYXNzTmFtZSwgc2hvd0JhY2tJY29uLCBvbkJhY2ssIGJhY2tJY29uLCBleWVicm93LCB0aXRsZSwgZGVzY3JpcHRpb24sIGRlc2NyaXB0aW9uU3Ryb25nID0gdHJ1ZSwgaWxsdXN0cmF0aW9uLCBwcmltYXJ5LCBzZWNvbmRhcnksIGRpcmVjdGlvbiwgZm9vdG5vdGUsIGNoaWxkcmVuLCB9KSA9PiB7XG4gICAgY29uc3QgY2xhc3NlcyA9IGNsYXNzbmFtZXMoUEFORUxfTEFZT1VUX1BSRUZJWCk7XG4gICAgY29uc3QgY29uZmlnID0gcmVzb2x2ZVBhbmVsTGF5b3V0Q29uZmlnKHZhcmlhbnQpO1xuICAgIC8vIEEgcGxhaW4gc3RyaW5nIGJlY29tZXMgdGhlIGZhbWlseSBoZWFkaW5nOyBhIG5vZGUgcGFzc2VzIHRocm91Z2ggc29cbiAgICAvLyBjYWxsZXJzIGNhbiBjb21wb3NlIChlLmcuIGEgVGFnIGFib3ZlIGEgdHdvLWxpbmUgdGl0bGUpLlxuICAgIGNvbnN0IHRpdGxlTm9kZSA9IHR5cGVvZiB0aXRsZSA9PT0gJ3N0cmluZycgfHwgdHlwZW9mIHRpdGxlID09PSAnbnVtYmVyJyA/IChfanN4KFR5cG9ncmFwaHkuSGVhZGxpbmUsIHsgc2l6ZTogJ3NtJywgYXM6ICdoMicsIGNvbG9yOiAnZGVmYXVsdCcsIGNoaWxkcmVuOiB0aXRsZSB9KSkgOiAodGl0bGUpO1xuICAgIC8vIFNhbWUgY29udHJhY3QgYXMgYHRpdGxlYDogYSBwbGFpbiBzdHJpbmcgZ2V0cyB0aGUgZmFtaWx5IHRyZWF0bWVudCAodGhlXG4gICAgLy8gbXV0ZWQgbGFiZWwgb2YgXCJTdGVwIDIgb2YgM1wiKSwgYSBub2RlIHBhc3NlcyB0aHJvdWdoIHNvIGEgVGFnIG9yIGFcbiAgICAvLyBjb21wb3NlZCByb3cgc3RpbGwgd29ya3MuIFdpdGhvdXQgdGhpcyBldmVyeSBjYWxsZXIgd2l0aCBhIHRleHQgZXllYnJvd1xuICAgIC8vIHdvdWxkIGhhbmQtcm9sbCB0aGUgc2FtZSBUeXBvZ3JhcGh5LlxuICAgIC8vXG4gICAgLy8gQW4gRU1QVFkgc3RyaW5nIGNvdW50cyBhcyBhYnNlbnQuIENhbGxlcnMgcm91dGluZWx5IGhvbGQgdGhlIGV5ZWJyb3cgaW4gYVxuICAgIC8vIHN0YXRlIG9iamVjdCB0aGF0IHN0YXJ0cyBhcyBgJydgLCBhbmQgcmVuZGVyaW5nIGFuIGVtcHR5IGxhYmVsIHdvdWxkIG9wZW5cbiAgICAvLyBhbiA4cHggc2VhbSBhYm92ZSB0aGUgdGl0bGUgZm9yIG5vdGhpbmcg4oCUIHNvIHRoZXkgY2FuIHBhc3MgdGhlIHZhbHVlXG4gICAgLy8gc3RyYWlnaHQgdGhyb3VnaCBpbnN0ZWFkIG9mIGd1YXJkaW5nIGl0IGF0IGV2ZXJ5IGNhbGwgc2l0ZS5cbiAgICBjb25zdCBleWVicm93Tm9kZSA9IGV5ZWJyb3cgPT0gbnVsbCB8fCBleWVicm93ID09PSAnJyA/IG51bGxcbiAgICAgICAgOiB0eXBlb2YgZXllYnJvdyA9PT0gJ3N0cmluZycgfHwgdHlwZW9mIGV5ZWJyb3cgPT09ICdudW1iZXInID8gKF9qc3goVHlwb2dyYXBoeS5Cb2R5LCB7IHNpemU6ICdzbScsIGNvbG9yOiAnZGVmYXVsdC10ZXJ0aWFyeScsIGNoaWxkcmVuOiBleWVicm93IH0pKSA6IChleWVicm93KTtcbiAgICBjb25zdCBpbGx1c3RyYXRpb25Ob2RlID0gdHlwZW9mIGlsbHVzdHJhdGlvbiA9PT0gJ3N0cmluZycgPyAoX2pzeChJY29ucywgeyBuYW1lOiBpbGx1c3RyYXRpb24sIHNpemU6IGNvbmZpZy5pbGx1c3RyYXRpb25TaXplIH0pKSA6IChpbGx1c3RyYXRpb24pO1xuICAgIC8vIEl0cyBvd24gcm93IGFib3ZlIGV2ZXJ5dGhpbmcgZWxzZSwgb24gdGhlIGJsb2NrJ3MgOHB4IHNlYW0g4oCUIHRoZSBzaGFwZVxuICAgIC8vIHN0ZXBwZWQgZmxvd3MgdXNlIGluIGJvdGggaG9zdHMgKDJGQSBzZXR1cCBvbiBhIHBhZ2UsIHdpemFyZCBkaWFsb2dzKS5cbiAgICBjb25zdCBiYWNrTm9kZSA9IHNob3dCYWNrSWNvbiA/IChfanN4KFwiYnV0dG9uXCIsIHsgdHlwZTogJ2J1dHRvbicsIGNsYXNzTmFtZTogY2xhc3NlcygnYmFjaycpLCBcImFyaWEtbGFiZWxcIjogUEFORUxfTEFZT1VUX0JBQ0tfTEFCRUwsIG9uQ2xpY2s6IG9uQmFjaywgY2hpbGRyZW46IGJhY2tJY29uICE9PSBudWxsICYmIGJhY2tJY29uICE9PSB2b2lkIDAgPyBiYWNrSWNvbiA6IF9qc3goSWNvbnMsIHsgbmFtZTogJ2Fycm93TGVmdCcsIHNpemU6IFBBTkVMX0xBWU9VVF9CQUNLX0lDT05fU0laRSB9KSB9KSkgOiBudWxsO1xuICAgIGNvbnN0IGhhc0hlYWRlciA9IHNob3dCYWNrSWNvbiB8fFxuICAgICAgICBpbGx1c3RyYXRpb24gIT0gbnVsbCB8fFxuICAgICAgICBleWVicm93Tm9kZSAhPSBudWxsIHx8XG4gICAgICAgIHRpdGxlICE9IG51bGwgfHxcbiAgICAgICAgZGVzY3JpcHRpb24gIT0gbnVsbDtcbiAgICBjb25zdCBoZWFkZXIgPSBoYXNIZWFkZXIgPyAoX2pzeHMoXCJkaXZcIiwgeyBjbGFzc05hbWU6IGNsYXNzZXMoJ2hlYWRlcicpLCBjaGlsZHJlbjogW2JhY2tOb2RlLCBpbGx1c3RyYXRpb25Ob2RlICE9IG51bGwgJiYgKF9qc3goXCJkaXZcIiwgeyBjbGFzc05hbWU6IGNsYXNzZXMoJ2lsbHVzdHJhdGlvbicpLCBjaGlsZHJlbjogaWxsdXN0cmF0aW9uTm9kZSB9KSksIGV5ZWJyb3dOb2RlLCB0aXRsZU5vZGUsIGRlc2NyaXB0aW9uICE9IG51bGwgJiYgKF9qc3goVHlwb2dyYXBoeS5Cb2R5LCB7IGFzOiAncCcsIHNpemU6ICdtZCcsIHN0cm9uZzogZGVzY3JpcHRpb25TdHJvbmcsIGNvbG9yOiAnZGVmYXVsdC1zZWNvbmRhcnknLCBjbGFzc05hbWU6IGNsYXNzZXMoJ2Rlc2NyaXB0aW9uJyksIGNoaWxkcmVuOiBkZXNjcmlwdGlvbiB9KSldIH0pKSA6IHVuZGVmaW5lZDtcbiAgICAvLyBUaGUgYmFyIG93bnMgdGhlIGJ1dHRvbiBzaXplLCBzbyB0aGUgZmFtaWx5IHNpemUgaXMgYXBwbGllZCBwZXIgYWN0aW9uXG4gICAgLy8gcmF0aGVyIHRoYW4gYXMgYSBiYXItbGV2ZWwgcHJvcDsgYW4gZXhwbGljaXQgcGVyLWFjdGlvbiBgc2l6ZWAgc3RpbGwgd2lucy5cbiAgICBjb25zdCB3aXRoU2l6ZSA9IChhY3Rpb24pID0+IHsgdmFyIF9hOyByZXR1cm4gYWN0aW9uICYmIE9iamVjdC5hc3NpZ24oT2JqZWN0LmFzc2lnbih7fSwgYWN0aW9uKSwgeyBzaXplOiAoX2EgPSBhY3Rpb24uc2l6ZSkgIT09IG51bGwgJiYgX2EgIT09IHZvaWQgMCA/IF9hIDogY29uZmlnLmJ1dHRvblNpemUgfSk7IH07XG4gICAgY29uc3QgZm9vdGVyID0gcHJpbWFyeSB8fCBzZWNvbmRhcnkgfHwgZm9vdG5vdGUgPyAoX2pzeChBY3Rpb25CYXIsIHsgZGlyZWN0aW9uOiBkaXJlY3Rpb24sIHByaW1hcnk6IHdpdGhTaXplKHByaW1hcnkpLCBzZWNvbmRhcnk6IHdpdGhTaXplKHNlY29uZGFyeSksIGZvb3Rub3RlOiBmb290bm90ZSB9KSkgOiB1bmRlZmluZWQ7XG4gICAgcmV0dXJuIChfanN4KEZvcm1MYXlvdXRcbiAgICAvLyBgcGFnZS9zbWFsbGAgaXMgdXNlZCBmb3IgaXRzIDI0IHBhZGRpbmcgYW5kIDE2IHJlZ2lvbiBnYXAsIHdoaWNoIGFyZVxuICAgIC8vIGFscmVhZHkgdGhlIHJlc3VsdCBmYW1pbHkncyBudW1iZXJzLiBJdHMgNDQ4IHdpZHRoIGlzIE5PVCDigJQgdGhhdCBpc1xuICAgIC8vIHRoZSBzaWduLWluIGNhcmQ7IHRoZSByZXN1bHQgcGFuZWwgaXMgMzgwLCBmcm9tIHRoZSBjb25maWcgdGFibGUuXG4gICAgLCB7IFxuICAgICAgICAvLyBgcGFnZS9zbWFsbGAgaXMgdXNlZCBmb3IgaXRzIDI0IHBhZGRpbmcgYW5kIDE2IHJlZ2lvbiBnYXAsIHdoaWNoIGFyZVxuICAgICAgICAvLyBhbHJlYWR5IHRoZSByZXN1bHQgZmFtaWx5J3MgbnVtYmVycy4gSXRzIDQ0OCB3aWR0aCBpcyBOT1Qg4oCUIHRoYXQgaXNcbiAgICAgICAgLy8gdGhlIHNpZ24taW4gY2FyZDsgdGhlIHJlc3VsdCBwYW5lbCBpcyAzODAsIGZyb20gdGhlIGNvbmZpZyB0YWJsZS5cbiAgICAgICAgdmFyaWFudDogJ3BhZ2UnLCBzaXplOiAnc21hbGwnLCBzY3JvbGw6IHNjcm9sbCwgXG4gICAgICAgIC8vIEluIGEgZGlhbG9nIHRoZSBEaWFsb2cgcGFuZWwgY2FycmllcyB0aGUgd2lkdGggKEJhc2VEaWFsb2cgcmVhZHMgdGhlXG4gICAgICAgIC8vIHNhbWUgZW50cnkpIGFuZCB0aGUgbGF5b3V0IGZpbGxzIGl0OiBzaXppbmcgYSBiYXJlIHBhbmVsIGZyb20gaXRzXG4gICAgICAgIC8vIGNoaWxkIGhpdHMgdGhlIHNocmluay10by1maXQgcGVyY2VudGFnZSBjaXJjdWxhcml0eS5cbiAgICAgICAgd2lkdGg6IHdpZHRoICE9PSBudWxsICYmIHdpZHRoICE9PSB2b2lkIDAgPyB3aWR0aCA6ICh2YXJpYW50ID09PSAnbW9kYWwnID8gJzEwMCUnIDogY29uZmlnLndpZHRoKSwgY2xhc3NOYW1lOiBqb2luQ2xzKGNsYXNzZXMoKSwgY2xhc3Nlcyh2YXJpYW50KSwgY2xhc3NOYW1lKSwgc3R5bGU6IHsgJy0tZm9ybS1sYXlvdXQtYWN0aW9uLWdhcCc6IGAke2NvbmZpZy5hY3Rpb25HYXB9cHhgIH0sIHRpdGxlOiBoZWFkZXIsIGZvb3RlcjogZm9vdGVyLCBjaGlsZHJlbjogY2hpbGRyZW4gfSkpO1xufTtcbmV4cG9ydCBjb25zdCBQYW5lbExheW91dCA9IG1lbW8oUGFuZWxMYXlvdXRCYXNlKTsiLG51bGxdLCJzb3VyY2VSb290IjoiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjIn0=

package/lib/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;
+};

package/lib/components/PanelLayout/constants.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.resolvePanelLayoutConfig = exports.PANEL_LAYOUT_PREFIX = exports.PANEL_LAYOUT_CONFIG = exports.PANEL_LAYOUT_BACK_LABEL = exports.PANEL_LAYOUT_BACK_ICON_SIZE = void 0;
+var PANEL_LAYOUT_PREFIX = exports.PANEL_LAYOUT_PREFIX = 'panel-layout';
+/** Back-arrow control: 24px icon, and its accessible name. */
+var PANEL_LAYOUT_BACK_ICON_SIZE = exports.PANEL_LAYOUT_BACK_ICON_SIZE = 24;
+var PANEL_LAYOUT_BACK_LABEL = exports.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).
+ */
+var PANEL_LAYOUT_CONFIG = exports.PANEL_LAYOUT_CONFIG = {
+  /** Standalone on a page. */
+  page: {
+    /** Panel width (px). */
+    width: 380,
+    /** Illustration above the header copy (px). */
+    illustrationSize: 52,
+    /** Footer action button size. */
+    buttonSize: 'medium',
+    /** Gap between footer action buttons (px); ActionBar reads it via var. */
+    actionGap: 8
+  },
+  /** Inside a dialog, wrapped by `BaseDialog` in a `Dialog(bare)`. */
+  modal: {
+    width: 380,
+    illustrationSize: 52,
+    buttonSize: 'medium',
+    actionGap: 8
+  }
+};
+var resolvePanelLayoutConfig = exports.resolvePanelLayoutConfig = function resolvePanelLayoutConfig(variant) {
+  return PANEL_LAYOUT_CONFIG[variant];
+};
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvc3JjL2NvbXBvbmVudHMvUGFuZWxMYXlvdXQvY29uc3RhbnRzLnRzIiwiY29tcG9uZW50cy9QYW5lbExheW91dC9jb25zdGFudHMuanMiXSwibmFtZXMiOlsiUEFORUxfTEFZT1VUX1BSRUZJWCIsImV4cG9ydHMiLCJQQU5FTF9MQVlPVVRfQkFDS19JQ09OX1NJWkUiLCJQQU5FTF9MQVlPVVRfQkFDS19MQUJFTCIsIlBBTkVMX0xBWU9VVF9DT05GSUciLCJwYWdlIiwid2lkdGgiLCJpbGx1c3RyYXRpb25TaXplIiwiYnV0dG9uU2l6ZSIsImFjdGlvbkdhcCIsIm1vZGFsIiwicmVzb2x2ZVBhbmVsTGF5b3V0Q29uZmlnIiwidmFyaWFudCJdLCJtYXBwaW5ncyI6Ijs7Ozs7O0FBRU8sSUFBTUEsbUJBQW1CLEdBQUFDLE9BQUEsQ0FBQUQsbUJBQUEsR0FBRyxjQUFjO0FBRWpEO0FBQ08sSUFBTUUsMkJBQTJCLEdBQUFELE9BQUEsQ0FBQUMsMkJBQUEsR0FBRyxFQUFFO0FBQ3RDLElBQU1DLHVCQUF1QixHQUFBRixPQUFBLENBQUFFLHVCQUFBLEdBQUcsU0FBUztBQUVoRDtBQ0hBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FES08sSUFBTUMsbUJBQW1CLEdBQUFILE9BQUEsQ0FBQUcsbUJBQUEsR0FBRztFQUNqQztFQUNBQyxJQUFJLEVBQUU7SUFDSjtJQUNBQyxLQUFLLEVBQUUsR0FBRztJQUNWO0lBQ0FDLGdCQUFnQixFQUFFLEVBQUU7SUFDcEI7SUFDQUMsVUFBVSxFQUFFLFFBQTZCO0lBQ3pDO0lBQ0FDLFNBQVMsRUFBRTtFQ0hYLENESUQ7RUFDRDtFQUNBQyxLQUFLLEVBQUU7SUFDTEosS0FBSyxFQUFFLEdBQUc7SUFDVkMsZ0JBQWdCLEVBQUUsRUFBRTtJQUNwQkMsVUFBVSxFQUFFLFFBQTZCO0lBQ3pDQyxTQUFTLEVBQUU7RUNIWDtBQUNKLENESVU7QUFJSCxJQUFNRSx3QkFBd0IsR0FBQVYsT0FBQSxDQUFBVSx3QkFBQSxHQUFHLFNBQTNCQSx3QkFBd0JBLENBQUlDLE9BQTJCO0VBQUEsT0FDbEVSLG1CQUFtQixDQUFDUSxPQUFPLENBQUM7QUFBQSIsImZpbGUiOiJjb21wb25lbnRzL1BhbmVsTGF5b3V0L2NvbnN0YW50cy5qcyIsInNvdXJjZXNDb250ZW50IjpbbnVsbCwiZXhwb3J0IGNvbnN0IFBBTkVMX0xBWU9VVF9QUkVGSVggPSAncGFuZWwtbGF5b3V0Jztcbi8qKiBCYWNrLWFycm93IGNvbnRyb2w6IDI0cHggaWNvbiwgYW5kIGl0cyBhY2Nlc3NpYmxlIG5hbWUuICovXG5leHBvcnQgY29uc3QgUEFORUxfTEFZT1VUX0JBQ0tfSUNPTl9TSVpFID0gMjQ7XG5leHBvcnQgY29uc3QgUEFORUxfTEFZT1VUX0JBQ0tfTEFCRUwgPSAnR28gYmFjayc7XG4vKipcbiAqIFRIRSBkZW5zaXR5IHRhYmxlIGZvciBjb250ZW50IHBhbmVscyDigJQgdGhlIHNpbmdsZSB0aGluZyB0byBlZGl0IHdoZW4gdGhlXG4gKiBkZXNpZ24gY2hhbmdlcy4gU2FtZSBzaGFwZSBhcyBgRk9STV9MQVlPVVRfQ09ORklHYDogb25lIGVudHJ5IHBlciBob3N0LCBzb1xuICogYSBkaXZlcmdlbmNlIGJldHdlZW4gdGhlIHR3byBpcyBhIHZhbHVlIGNoYW5nZSwgbmV2ZXIgYSBzdHJ1Y3R1cmFsIG9uZS5cbiAqXG4gKiBUaGUgdHdvIGVudHJpZXMgYXJlIGN1cnJlbnRseSBJREVOVElDQUwsIGFuZCB0aGF0IGlzIHRoZSBkZXNpZ246IGEgcGFuZWxcbiAqIHJlbmRlcnMgdGhlIHNhbWUgb24gYSBwYWdlIGFuZCBpbiBhIGRpYWxvZywgdGhlIG9ubHkgZGlmZmVyZW5jZSBiZWluZ1xuICogd2hldGhlciBhIGBEaWFsb2coYmFyZSlgIGlzIHdyYXBwZWQgYXJvdW5kIGl0LiBUaGV5IGFyZSBzdGlsbCBzcGVsbGVkIG91dFxuICogc2VwYXJhdGVseSBzbyB0aGF0IChhKSB0aGUgc2FtZW5lc3MgcmVhZHMgYXMgZGVsaWJlcmF0ZSByYXRoZXIgdGhhbiBhcyBhblxuICogb3ZlcnNpZ2h0LCBhbmQgKGIpIGEgZGl2ZXJnZW5jZSBsYXRlciBpcyBhIHZhbHVlIGNoYW5nZSBoZXJlIGFuZCBub3RoaW5nXG4gKiBlbHNlIOKAlCBubyBjb25zdW1lciBwYXNzZXMgdGhlc2UgbnVtYmVycywgdGhleSBvbmx5IHBhc3MgYHZhcmlhbnRgLlxuICpcbiAqIGB3aWR0aGAgaXMgdGhlIHBhbmVsIHdpZHRoIHVzZWQgaW4gQk9USCBob3N0cyAoMzgwKS4gSXQgaXMgTk9UIGluaGVyaXRlZFxuICogZnJvbSBGb3JtTGF5b3V0J3MgYHBhZ2Uvc21hbGxgIGRlbnNpdHkg4oCUIHRoYXQgZW50cnkgaXMgNDQ4LCB0aGUgYXBwJ3NcbiAqIHNpZ24taW4gY2FyZCwgYSBkaWZmZXJlbnQgc3VyZmFjZS4gT25seSB0aGUgcGFkZGluZyAoMjQpIGFuZCB0aGUgcmVnaW9uIGdhcFxuICogKDE2KSBjb21lIGZyb20gdGhhdCBkZW5zaXR5LCBhbmQgdGhvc2UgYWxyZWFkeSBtYXRjaC4gSW5zaWRlIGEgZGlhbG9nIHRoZVxuICogdmFsdWUgZ29lcyBvbiB0aGUgRGlhbG9nIHBhbmVsIGFuZCB0aGUgbGF5b3V0IGZpbGxzIGF0IDEwMCU6IHNpemluZyBhIGJhcmVcbiAqIHBhbmVsIGZyb20gaXRzIGNoaWxkIGhpdHMgdGhlIHNocmluay10by1maXQgcGVyY2VudGFnZSBjaXJjdWxhcml0eSAodGhlXG4gKiBzYW1lIHJlYXNvbiBGb3JtRGlhbG9nIGdpdmVzKS5cbiAqL1xuZXhwb3J0IGNvbnN0IFBBTkVMX0xBWU9VVF9DT05GSUcgPSB7XG4gICAgLyoqIFN0YW5kYWxvbmUgb24gYSBwYWdlLiAqL1xuICAgIHBhZ2U6IHtcbiAgICAgICAgLyoqIFBhbmVsIHdpZHRoIChweCkuICovXG4gICAgICAgIHdpZHRoOiAzODAsXG4gICAgICAgIC8qKiBJbGx1c3RyYXRpb24gYWJvdmUgdGhlIGhlYWRlciBjb3B5IChweCkuICovXG4gICAgICAgIGlsbHVzdHJhdGlvblNpemU6IDUyLFxuICAgICAgICAvKiogRm9vdGVyIGFjdGlvbiBidXR0b24gc2l6ZS4gKi9cbiAgICAgICAgYnV0dG9uU2l6ZTogJ21lZGl1bScsXG4gICAgICAgIC8qKiBHYXAgYmV0d2VlbiBmb290ZXIgYWN0aW9uIGJ1dHRvbnMgKHB4KTsgQWN0aW9uQmFyIHJlYWRzIGl0IHZpYSB2YXIuICovXG4gICAgICAgIGFjdGlvbkdhcDogOCxcbiAgICB9LFxuICAgIC8qKiBJbnNpZGUgYSBkaWFsb2csIHdyYXBwZWQgYnkgYEJhc2VEaWFsb2dgIGluIGEgYERpYWxvZyhiYXJlKWAuICovXG4gICAgbW9kYWw6IHtcbiAgICAgICAgd2lkdGg6IDM4MCxcbiAgICAgICAgaWxsdXN0cmF0aW9uU2l6ZTogNTIsXG4gICAgICAgIGJ1dHRvblNpemU6ICdtZWRpdW0nLFxuICAgICAgICBhY3Rpb25HYXA6IDgsXG4gICAgfSxcbn07XG5leHBvcnQgY29uc3QgcmVzb2x2ZVBhbmVsTGF5b3V0Q29uZmlnID0gKHZhcmlhbnQpID0+IFBBTkVMX0xBWU9VVF9DT05GSUdbdmFyaWFudF07Il0sInNvdXJjZVJvb3QiOiIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9zcmMifQ==

package/lib/components/PanelLayout/index.d.ts

@@ -0,0 +1,6 @@
+import { PanelLayout } from './PanelLayout';
+export { PanelLayout } from './PanelLayout';
+export default PanelLayout;
+export * from './interface';
+export { PANEL_LAYOUT_CONFIG, PANEL_LAYOUT_PREFIX, resolvePanelLayoutConfig, } from './constants';
+export type { PanelLayoutVariant } from './constants';

package/lib/components/PanelLayout/index.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  PanelLayout: true,
+  PANEL_LAYOUT_CONFIG: true,
+  PANEL_LAYOUT_PREFIX: true,
+  resolvePanelLayoutConfig: true
+};
+Object.defineProperty(exports, "PANEL_LAYOUT_CONFIG", {
+  enumerable: true,
+  get: function get() {
+    return _constants.PANEL_LAYOUT_CONFIG;
+  }
+});
+Object.defineProperty(exports, "PANEL_LAYOUT_PREFIX", {
+  enumerable: true,
+  get: function get() {
+    return _constants.PANEL_LAYOUT_PREFIX;
+  }
+});
+Object.defineProperty(exports, "PanelLayout", {
+  enumerable: true,
+  get: function get() {
+    return _PanelLayout.PanelLayout;
+  }
+});
+exports["default"] = void 0;
+Object.defineProperty(exports, "resolvePanelLayoutConfig", {
+  enumerable: true,
+  get: function get() {
+    return _constants.resolvePanelLayoutConfig;
+  }
+});
+var _PanelLayout = require("./PanelLayout");
+var _interface = require("./interface");
+Object.keys(_interface).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _interface[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _interface[key];
+    }
+  });
+});
+var _constants = require("./constants");
+var _default = exports["default"] = _PanelLayout.PanelLayout;
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvc3JjL2NvbXBvbmVudHMvUGFuZWxMYXlvdXQvaW5kZXgudHMiXSwibmFtZXMiOlsiX1BhbmVsTGF5b3V0IiwicmVxdWlyZSIsIl9pbnRlcmZhY2UiLCJPYmplY3QiLCJrZXlzIiwiZm9yRWFjaCIsImtleSIsInByb3RvdHlwZSIsImhhc093blByb3BlcnR5IiwiY2FsbCIsIl9leHBvcnROYW1lcyIsImV4cG9ydHMiLCJkZWZpbmVQcm9wZXJ0eSIsImVudW1lcmFibGUiLCJnZXQiLCJfY29uc3RhbnRzIiwiX2RlZmF1bHQiLCJQYW5lbExheW91dCJdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUEsSUFBQUEsWUFBQSxHQUFBQyxPQUFBO0FBTUEsSUFBQUMsVUFBQSxHQUFBRCxPQUFBO0FBQUFFLE1BQUEsQ0FBQUMsSUFBQSxDQUFBRixVQUFBLEVBQUFHLE9BQUEsV0FBQUMsR0FBQTtFQUFBLElBQUFBLEdBQUEsa0JBQUFBLEdBQUE7RUFBQSxJQUFBSCxNQUFBLENBQUFJLFNBQUEsQ0FBQUMsY0FBQSxDQUFBQyxJQUFBLENBQUFDLFlBQUEsRUFBQUosR0FBQTtFQUFBLElBQUFBLEdBQUEsSUFBQUssT0FBQSxJQUFBQSxPQUFBLENBQUFMLEdBQUEsTUFBQUosVUFBQSxDQUFBSSxHQUFBO0VBQUFILE1BQUEsQ0FBQVMsY0FBQSxDQUFBRCxPQUFBLEVBQUFMLEdBQUE7SUFBQU8sVUFBQTtJQUFBQyxHQUFBLFdBQUFBLElBQUE7TUFBQSxPQUFBWixVQUFBLENBQUFJLEdBQUE7SUFBQTtFQUFBO0FBQUE7QUFDQSxJQUFBUyxVQUFBLEdBQUFkLE9BQUE7QUFJcUIsSUFBQWUsUUFBQSxHQUFBTCxPQUFBLGNBUE5NLHdCQUFXIiwiZmlsZSI6ImNvbXBvbmVudHMvUGFuZWxMYXlvdXQvaW5kZXguanMiLCJzb3VyY2VzQ29udGVudCI6W251bGxdLCJzb3VyY2VSb290IjoiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjIn0=

package/lib/components/PanelLayout/interface.d.ts

@@ -0,0 +1,73 @@
+import type { ReactNode } from 'react';
+import type { ActionBarAction, ActionBarDirection, ActionBarFootnote } from "../ActionBar";
+import type { FormLayoutProps } from "../FormLayout";
+import type { IconName } from "../Icons";
+import type { PanelLayoutVariant } from './constants';
+export interface PanelLayoutProps extends Pick<FormLayoutProps, 'width' | 'className'> {
+    /**
+     * Which host this panel renders in. Selects the entry in
+     * `PANEL_LAYOUT_CONFIG` and the underlying FormLayout density / scroll
+     * policy. `page` (default) is the standalone card; `modal` is the panel
+     * `BaseDialog` wraps in a `Dialog(bare)`.
+     *
+     * There is deliberately no `size`: a result has ONE shape. `PageForm`
+     * exposes a size axis because a form's density varies with its field count.
+     */
+    variant?: PanelLayoutVariant;
+    /**
+     * Override the host's scroll policy. `page` never scrolls internally;
+     * `modal` pins header/footer and scrolls the content region when
+     * height-constrained. `BaseDialog` maps its `fixed` prop onto this — the
+     * two defaults are opposites, so that mapping must stay explicit.
+     */
+    scroll?: boolean;
+    /**
+     * Show the back arrow at the TOP of the header block, on the same 8px seam
+     * as everything else in it.
+     *
+     * The panel owns this control in BOTH hosts — stepped page flows (2FA setup)
+     * carry it just like dialog flows do. It belongs to the content flow, unlike
+     * the dialog's close icon, which is absolutely positioned overlay chrome and
+     * stays with Dialog. That is also why `Dialog(bare)` does not render it.
+     */
+    showBackIcon?: boolean;
+    /** Fires when the back arrow is activated. */
+    onBack?: () => void;
+    /** Replace the default back arrow node (keeps its slot and seam). */
+    backIcon?: ReactNode;
+    /**
+     * Small label row above the title ("Step 2 of 3"). Same contract as
+     * `title`: a plain string is rendered in the family style, a node passes
+     * through (e.g. a Tag). An empty string counts as absent, so a value held
+     * in state needs no guard at the call site.
+     */
+    eyebrow?: ReactNode;
+    /** Heading. A plain string renders as `Headline sm`. */
+    title?: ReactNode;
+    /** Supporting copy under the title. */
+    description?: ReactNode;
+    /**
+     * Render the description in the strong (medium) weight — the family spec.
+     * Defaults to `true`. Pass `false` for plain body copy, e.g. when the copy
+     * embeds an email (or other span) that should be the emphasized part.
+     */
+    descriptionStrong?: boolean;
+    /** Illustration above the title, `IconName` or node. */
+    illustration?: ReactNode | IconName;
+    /**
+     * Primary action. With only one action the button spans the full row; with
+     * both, secondary sits left and they split the row evenly.
+     */
+    primary?: ActionBarAction;
+    /** Optional secondary (left) action. */
+    secondary?: ActionBarAction;
+    /**
+     * Action arrangement, forwarded to ActionBar: `horizontal` (default,
+     * row-splitting) or `vertical` (stacked full-width).
+     */
+    direction?: ActionBarDirection;
+    /** Optional centered footnote row below the actions. */
+    footnote?: ActionBarFootnote;
+    /** Extra content between the header block and the actions (e.g. bricks). */
+    children?: ReactNode;
+}

package/lib/components/PanelLayout/interface.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tcG9uZW50cy9QYW5lbExheW91dC9pbnRlcmZhY2UuanMiLCJuYW1lcyI6W10sInNvdXJjZVJvb3QiOiIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9zcmMiLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvUGFuZWxMYXlvdXQvaW50ZXJmYWNlLmpzIl0sInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCB7fTsiXSwibWFwcGluZ3MiOiIiLCJpZ25vcmVMaXN0IjpbXX0=

package/lib/components/PanelLayout/style/PanelLayout.css

@@ -0,0 +1,56 @@
+/**
+  * Retrieves the spacing value for a given token key.
+  *
+  * @param {string} $key - The spacing token key (e.g., '100', '200').
+  * @return {length|null} The computed spacing value or null if the key is invalid.
+  * @example
+  *   .element {
+  *     padding: om-spacing-token('200'); // Returns 8px if $om-sys-spacing-unit is 4px
+  *   }
+  */
+/**
+  * Computes the spacing value based on a token key or a direct length value.
+  *
+  * @param {string|length} $value - The spacing token key (e.g., '100') or a direct length value (e.g., '16px').
+  * @return {length} The computed spacing value.
+  * @example
+  *   .element {
+  *     margin: om-spacing-value('300'); // Returns 12px if $om-sys-spacing-unit is 4px
+  *     padding: om-spacing-value(16px); // Returns 16px
+  *     gap: om-spacing-value(2); // Returns 8px if $om-sys-spacing-unit is 4px
+  *   }
+  */
+.om-component-ui-panel-layout .om-component-ui-panel-layout-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--om-spacing-200, 8px);
+  align-items: flex-start;
+  width: 100%;
+}
+.om-component-ui-panel-layout .om-component-ui-panel-layout-description {
+  overflow-wrap: anywhere;
+}
+.om-component-ui-panel-layout .om-component-ui-panel-layout-illustration {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  line-height: 0;
+}
+.om-component-ui-panel-layout .om-component-ui-action-bar-actions {
+  gap: var(--form-layout-action-gap, var(--om-spacing-200, 8px));
+}
+.om-component-ui-panel-layout .om-component-ui-panel-layout-back {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  color: var(--om-icon-default, #131313);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+.om-component-ui-panel-layout .om-component-ui-panel-layout-back .om-component-ui-icons-wrapper {
+  --icon-color: currentcolor;
+}

package/lib/components/PanelLayout/style/css.js

@@ -0,0 +1,4 @@
+"use strict";
+
+require("./PanelLayout.css");
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvUGFuZWxMYXlvdXQvc3JjL2NvbXBvbmVudHMvUGFuZWxMYXlvdXQvc3R5bGUvaW5kZXgudHMiXSwibmFtZXMiOlsicmVxdWlyZSJdLCJtYXBwaW5ncyI6Ijs7QUFBQUEsT0FBQSIsImZpbGUiOiJjb21wb25lbnRzL1BhbmVsTGF5b3V0L3N0eWxlL2Nzcy5qcyIsInNvdXJjZXNDb250ZW50IjpbbnVsbF0sInNvdXJjZVJvb3QiOiIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9zcmMifQ==

package/lib/components/PanelLayout/style/index.d.ts

@@ -0,0 +1 @@
+import './PanelLayout.css';

package/lib/components/PanelLayout/style/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+require("./PanelLayout.css");
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvUGFuZWxMYXlvdXQvc3JjL2NvbXBvbmVudHMvUGFuZWxMYXlvdXQvc3R5bGUvaW5kZXgudHMiXSwibmFtZXMiOlsicmVxdWlyZSJdLCJtYXBwaW5ncyI6Ijs7QUFBQUEsT0FBQSIsImZpbGUiOiJjb21wb25lbnRzL1BhbmVsTGF5b3V0L3N0eWxlL2luZGV4LmpzIiwic291cmNlc0NvbnRlbnQiOltudWxsXSwic291cmNlUm9vdCI6Ii4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYyJ9