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

package/lib/components/PanelLayout/PanelLayout.js

@@ -0,0 +1,151 @@
+"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: results and confirms are only some
+ * of what it carries — `VerificationDialog` is a challenge, the 2FA setup
+ * flow is a stepped wizard (hence `backSlot`), and terminal pages carry no
+ * action at all. A scenario shell that needs recurring copy (a `preset`) is
+ * built ON TOP of this, not inside it.
+ *
+ * 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;
+  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 || eyebrow != 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
+    }), eyebrow != null && (0, _jsxRuntime.jsx)("div", {
+      children: eyebrow
+    }), titleNode, description != null && (0, _jsxRuntime.jsx)(_Typography.Typography.Body, {
+      as: 'p',
+      size: 'md',
+      strong: descriptionStrong,
+      color: 'default-secondary',
+      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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvUGFuZWxMYXlvdXQvUGFuZWxMYXlvdXQuanMiLCJjb21wb25lbnRzL3NyYy9jb21wb25lbnRzL1BhbmVsTGF5b3V0L1BhbmVsTGF5b3V0LnRzeCJdLCJuYW1lcyI6WyJfanN4UnVudGltZSIsInJlcXVpcmUiLCJfcmVhY3QiLCJfQWN0aW9uQmFyIiwiX0Zvcm1MYXlvdXQiLCJfSWNvbnMiLCJfVHlwb2dyYXBoeSIsIl9jbGFzc25hbWVzIiwiX2ludGVyb3BSZXF1aXJlV2lsZGNhcmQiLCJfY29uc3RhbnRzIiwiX2dldFJlcXVpcmVXaWxkY2FyZENhY2hlIiwiZSIsIldlYWtNYXAiLCJyIiwidCIsIl9fZXNNb2R1bGUiLCJfdHlwZW9mIiwiaGFzIiwiZ2V0IiwibiIsIl9fcHJvdG9fXyIsImEiLCJPYmplY3QiLCJkZWZpbmVQcm9wZXJ0eSIsImdldE93blByb3BlcnR5RGVzY3JpcHRvciIsInUiLCJoYXNPd25Qcm9wZXJ0eSIsImNhbGwiLCJpIiwic2V0IiwiUGFuZWxMYXlvdXRCYXNlIiwiX3JlZiIsIl9yZWYkdmFyaWFudCIsInZhcmlhbnQiLCJzY3JvbGwiLCJ3aWR0aCIsImNsYXNzTmFtZSIsInNob3dCYWNrSWNvbiIsIm9uQmFjayIsImJhY2tJY29uIiwiZXllYnJvdyIsInRpdGxlIiwiZGVzY3JpcHRpb24iLCJfcmVmJGRlc2NyaXB0aW9uU3Ryb24iLCJkZXNjcmlwdGlvblN0cm9uZyIsImlsbHVzdHJhdGlvbiIsInByaW1hcnkiLCJzZWNvbmRhcnkiLCJkaXJlY3Rpb24iLCJmb290bm90ZSIsImNoaWxkcmVuIiwiY2xhc3NlcyIsImNsYXNzbmFtZXMiLCJQQU5FTF9MQVlPVVRfUFJFRklYIiwiY29uZmlnIiwicmVzb2x2ZVBhbmVsTGF5b3V0Q29uZmlnIiwidGl0bGVOb2RlIiwiX2pzeCIsIlR5cG9ncmFwaHkiLCJIZWFkbGluZSIsInNpemUiLCJhcyIsImNvbG9yIiwiaWxsdXN0cmF0aW9uTm9kZSIsIkljb25zIiwibmFtZSIsImlsbHVzdHJhdGlvblNpemUiLCJiYWNrTm9kZSIsInR5cGUiLCJQQU5FTF9MQVlPVVRfQkFDS19MQUJFTCIsIm9uQ2xpY2siLCJQQU5FTF9MQVlPVVRfQkFDS19JQ09OX1NJWkUiLCJoYXNIZWFkZXIiLCJoZWFkZXIiLCJfanN4cyIsIkJvZHkiLCJzdHJvbmciLCJ1bmRlZmluZWQiLCJ3aXRoU2l6ZSIsImFjdGlvbiIsIl9hIiwiYXNzaWduIiwiYnV0dG9uU2l6ZSIsImZvb3RlciIsIkFjdGlvbkJhciIsIkZvcm1MYXlvdXQiLCJqb2luQ2xzIiwic3R5bGUiLCJjb25jYXQiLCJhY3Rpb25HYXAiLCJQYW5lbExheW91dCIsImV4cG9ydHMiLCJtZW1vIl0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBQUEsSUFBQUEsV0FBQSxHQUFBQyxPQUFBO0FDQUEsSUFBQUMsTUFBQSxHQUFBRCxPQUFBO0FBQ0EsSUFBQUUsVUFBQSxHQUFBRixPQUFBO0FBQ0EsSUFBQUcsV0FBQSxHQUFBSCxPQUFBO0FBQ0EsSUFBQUksTUFBQSxHQUFBSixPQUFBO0FBQ0EsSUFBQUssV0FBQSxHQUFBTCxPQUFBO0FBQ0EsSUFBQU0sV0FBQSxHQUFBQyx1QkFBQSxDQUFBUCxPQUFBO0FBQ0EsSUFBQVEsVUFBQSxHQUFBUixPQUFBO0FBVUFBLE9BQUE7QUFBaUIsU0FBQVMseUJBQUFDLENBQUEsNkJBQUFDLE9BQUEsbUJBQUFDLENBQUEsT0FBQUQsT0FBQSxJQUFBRSxDQUFBLE9BQUFGLE9BQUEsWUFBQUYsd0JBQUEsWUFBQUEseUJBQUFDLENBQUEsV0FBQUEsQ0FBQSxHQUFBRyxDQUFBLEdBQUFELENBQUEsS0FBQUYsQ0FBQTtBQUFBLFNBQUFILHdCQUFBRyxDQUFBLEVBQUFFLENBQUEsU0FBQUEsQ0FBQSxJQUFBRixDQUFBLElBQUFBLENBQUEsQ0FBQUksVUFBQSxTQUFBSixDQUFBLGVBQUFBLENBQUEsZ0JBQUFLLE9BQUEsQ0FBQUwsQ0FBQSwwQkFBQUEsQ0FBQSxzQkFBQUEsQ0FBQSxRQUFBRyxDQUFBLEdBQUFKLHdCQUFBLENBQUFH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SUFDQXBELE9BQU8sRUFBQyxNQUFNO0lBQ2QyQixJQUFJLEVBQUMsT0FBTztJQUNaMUIsTUFBTSxFQUFFQSxNQUFNO0lBQ2Q7SUFDQTtJQUNBO0lBQ0FDLEtBQUssRUFBRUEsS0FBSyxLQUFBLElBQUEsSUFBTEEsS0FBSyxLQUFBLEtBQUEsQ0FBQSxHQUFMQSxLQUFLLEdBQUtGLE9BQU8sS0FBSyxPQUFPLEdBQUcsTUFBTSxHQUFHcUIsTUFBTSxDQUFDbkIsS0FBTTtJQUM3REMsU0FBUyxFQUFFLElBQUFrRCxtQkFBTyxFQUFDbkMsT0FBTyxDQUFBLENBQUUsRUFBRUEsT0FBTyxDQUFDbEIsT0FBTyxDQUFDLEVBQUVHLFNBQVMsQ0FBQztJQUMxRG1ELEtBQUssRUFBRTtNQUFFLDBCQUEwQixLQUFBQyxNQUFBLENBQUtsQyxNQUFNLENBQUNtQyxTQUFTO0lBQUksQ0FBbUI7SUFDL0VoRCxLQUFLLEVBQUVnQyxNQUFNO0lBQ2JVLE1BQU0sRUFBRUEsTUFBTTtJQUFBakMsUUFBQSxFQUViQTtFQUFRLENBQUEsQ0FDRTtBQUVqQixDQUFDO0FBRU0sSUFBTXdDLFdBQVcsR0FBQUMsT0FBQSxDQUFBRCxXQUFBLGdCQUFHLElBQUFFLFdBQUksRUFBQzlELGVBQWUsQ0FBQyIsImZpbGUiOiJjb21wb25lbnRzL1BhbmVsTGF5b3V0L1BhbmVsTGF5b3V0LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsganN4IGFzIF9qc3gsIGpzeHMgYXMgX2pzeHMgfSBmcm9tIFwicmVhY3QvanN4LXJ1bnRpbWVcIjtcbmltcG9ydCB7IG1lbW8gfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyBBY3Rpb25CYXIgfSBmcm9tICcuLi9BY3Rpb25CYXInO1xuaW1wb3J0IHsgRm9ybUxheW91dCB9IGZyb20gJy4uL0Zvcm1MYXlvdXQnO1xuaW1wb3J0IHsgSWNvbnMgfSBmcm9tICcuLi9JY29ucyc7XG5pbXBvcnQgeyBUeXBvZ3JhcGh5IH0gZnJvbSAnLi4vVHlwb2dyYXBoeSc7XG5pbXBvcnQgeyBkZWZhdWx0IGFzIGNsYXNzbmFtZXMsIGpvaW5DbHMgfSBmcm9tICcuLi8uLi91dGlscy9jbGFzc25hbWVzJztcbmltcG9ydCB7IFBBTkVMX0xBWU9VVF9CQUNLX0lDT05fU0laRSwgUEFORUxfTEFZT1VUX0JBQ0tfTEFCRUwsIFBBTkVMX0xBWU9VVF9QUkVGSVgsIHJlc29sdmVQYW5lbExheW91dENvbmZpZywgfSBmcm9tICcuL2NvbnN0YW50cyc7XG5pbXBvcnQgJy4vc3R5bGUnO1xuLyoqXG4gKiBUaGUgbm9uLWZvcm0gY29udGVudCBQQU5FTCDigJQgdGhlIGNvdW50ZXJwYXJ0IHRvIGBGb3JtTGF5b3V0YDogdGhhdCBvbmVcbiAqIGhvbGRzIGZpZWxkcywgdGhpcyBvbmUgaG9sZHMgYW4gaWxsdXN0cmF0aW9uLCBjb3B5IGFuZCBhY3Rpb25zLiBPTkUgc3VyZmFjZVxuICogc2VydmluZyB0d28gaG9zdHM6XG4gKlxuICogICBwYWdlIGhvc3QgICAgPFBhbmVsTGF5b3V0IC8+ICAgICAgICAgICAgICAgICAgICAgICAgIHVzZWQgZGlyZWN0bHlcbiAqICAgZGlhbG9nIGhvc3QgIEJhc2VEaWFsb2cgPSBEaWFsb2coYmFyZSkgKyB0aGlzKG1vZGFsKSBvbmx5IGFkZHMgdGhlIG92ZXJsYXlcbiAqXG4gKiBEZWxpYmVyYXRlbHkgTk9UIG5hbWVkIGZvciBhIHNjZW5hcmlvOiByZXN1bHRzIGFuZCBjb25maXJtcyBhcmUgb25seSBzb21lXG4gKiBvZiB3aGF0IGl0IGNhcnJpZXMg4oCUIGBWZXJpZmljYXRpb25EaWFsb2dgIGlzIGEgY2hhbGxlbmdlLCB0aGUgMkZBIHNldHVwXG4gKiBmbG93IGlzIGEgc3RlcHBlZCB3aXphcmQgKGhlbmNlIGBiYWNrU2xvdGApLCBhbmQgdGVybWluYWwgcGFnZXMgY2Fycnkgbm9cbiAqIGFjdGlvbiBhdCBhbGwuIEEgc2NlbmFyaW8gc2hlbGwgdGhhdCBuZWVkcyByZWN1cnJpbmcgY29weSAoYSBgcHJlc2V0YCkgaXNcbiAqIGJ1aWx0IE9OIFRPUCBvZiB0aGlzLCBub3QgaW5zaWRlIGl0LlxuICpcbiAqIEFzc2VtYmx5OlxuICpcbiAqICAgRm9ybUxheW91dCAgICAgICAgICBjYXJkIGNocm9tZSAoc3VyZmFjZSwgaGFpcmxpbmUsIHJhZGl1cykgKyB0aGUgMjRcbiAqICAg4pSCICAgICAgICAgICAgICAgICAgIHBhZGRpbmcgYW5kIDE2IHJlZ2lvbiBnYXAuIEl0cyBgcGFnZS9zbWFsbGAgd2lkdGhcbiAqICAg4pSCICAgICAgICAgICAgICAgICAgICg0NDgsIHRoZSBzaWduLWluIGNhcmQpIGlzIE5PVCB1c2VkIOKAlCB0aGUgcGFuZWwgd2lkdGhcbiAqICAg4pSCICAgICAgICAgICAgICAgICAgIGNvbWVzIGZyb20gdGhlIGNvbmZpZyB0YWJsZS5cbiAqICAg4pSc4pSAIGhlYWRlciBzbG90ICAgICAgYmFjayAvIGlsbHVzdHJhdGlvbiAvIGV5ZWJyb3cgLyB0aXRsZSAvIGRlc2NyaXB0aW9uIGFzXG4gKiAgIOKUgiAgICAgICAgICAgICAgICAgICBPTkUgYmxvY2sgb24gOHB4IHNlYW1zLiBJdCBnb2VzIGluIHRoZSB0aXRsZSBzbG90LCBub3RcbiAqICAg4pSCICAgICAgICAgICAgICAgICAgIHRoZSBjb250ZW50IHJlZ2lvbiwgYmVjYXVzZSBpdCBpcyBhbGwgaGVhZGVyIGNvcHkg4oCUXG4gKiAgIOKUgiAgICAgICAgICAgICAgICAgICB0aGF0IGFsc28ga2VlcHMgaXQgcGlubmVkIHdoZW4gdGhlIGNvbnRlbnQgc2Nyb2xscy5cbiAqICAg4pSc4pSAIGNvbnRlbnQgcmVnaW9uICAgYGNoaWxkcmVuYCDigJQgZnJlZS1mb3JtIChhIFFSIGNvZGUsIGFuIE9UUCBpbnB1dCwgcm93cylcbiAqICAg4pSU4pSAIEFjdGlvbkJhcihmaWxsKSAgdGhlIGFjdGlvbnMuXG4gKlxuICogSXQgb3ducyBubyBjb3B5IGFuZCBubyBsb29zZSBudW1iZXJzOiBldmVyeXRoaW5nIGhvc3Qtc3BlY2lmaWMgY29tZXMgZnJvbVxuICogYFBBTkVMX0xBWU9VVF9DT05GSUdgLCBzbyBhIGRpdmVyZ2VuY2UgYmV0d2VlbiBwYWdlIGFuZCBkaWFsb2cgaXMgYSB2YWx1ZVxuICogY2hhbmdlIGluIHRoYXQgdGFibGUgYW5kIG5vdGhpbmcgZWxzZS5cbiAqL1xuY29uc3QgUGFuZWxMYXlvdXRCYXNlID0gKHsgdmFyaWFudCA9ICdwYWdlJywgc2Nyb2xsLCB3aWR0aCwgY2xhc3NOYW1lLCBzaG93QmFja0ljb24sIG9uQmFjaywgYmFja0ljb24sIGV5ZWJyb3csIHRpdGxlLCBkZXNjcmlwdGlvbiwgZGVzY3JpcHRpb25TdHJvbmcgPSB0cnVlLCBpbGx1c3RyYXRpb24sIHByaW1hcnksIHNlY29uZGFyeSwgZGlyZWN0aW9uLCBmb290bm90ZSwgY2hpbGRyZW4sIH0pID0+IHtcbiAgICBjb25zdCBjbGFzc2VzID0gY2xhc3NuYW1lcyhQQU5FTF9MQVlPVVRfUFJFRklYKTtcbiAgICBjb25zdCBjb25maWcgPSByZXNvbHZlUGFuZWxMYXlvdXRDb25maWcodmFyaWFudCk7XG4gICAgLy8gQSBwbGFpbiBzdHJpbmcgYmVjb21lcyB0aGUgZmFtaWx5IGhlYWRpbmc7IGEgbm9kZSBwYXNzZXMgdGhyb3VnaCBzb1xuICAgIC8vIGNhbGxlcnMgY2FuIGNvbXBvc2UgKGUuZy4gYSBUYWcgYWJvdmUgYSB0d28tbGluZSB0aXRsZSkuXG4gICAgY29uc3QgdGl0bGVOb2RlID0gdHlwZW9mIHRpdGxlID09PSAnc3RyaW5nJyB8fCB0eXBlb2YgdGl0bGUgPT09ICdudW1iZXInID8gKF9qc3goVHlwb2dyYXBoeS5IZWFkbGluZSwgeyBzaXplOiAnc20nLCBhczogJ2gyJywgY29sb3I6ICdkZWZhdWx0JywgY2hpbGRyZW46IHRpdGxlIH0pKSA6ICh0aXRsZSk7XG4gICAgY29uc3QgaWxsdXN0cmF0aW9uTm9kZSA9IHR5cGVvZiBpbGx1c3RyYXRpb24gPT09ICdzdHJpbmcnID8gKF9qc3goSWNvbnMsIHsgbmFtZTogaWxsdXN0cmF0aW9uLCBzaXplOiBjb25maWcuaWxsdXN0cmF0aW9uU2l6ZSB9KSkgOiAoaWxsdXN0cmF0aW9uKTtcbiAgICAvLyBJdHMgb3duIHJvdyBhYm92ZSBldmVyeXRoaW5nIGVsc2UsIG9uIHRoZSBibG9jaydzIDhweCBzZWFtIOKAlCB0aGUgc2hhcGVcbiAgICAvLyBzdGVwcGVkIGZsb3dzIHVzZSBpbiBib3RoIGhvc3RzICgyRkEgc2V0dXAgb24gYSBwYWdlLCB3aXphcmQgZGlhbG9ncykuXG4gICAgY29uc3QgYmFja05vZGUgPSBzaG93QmFja0ljb24gPyAoX2pzeChcImJ1dHRvblwiLCB7IHR5cGU6ICdidXR0b24nLCBjbGFzc05hbWU6IGNsYXNzZXMoJ2JhY2snKSwgXCJhcmlhLWxhYmVsXCI6IFBBTkVMX0xBWU9VVF9CQUNLX0xBQkVMLCBvbkNsaWNrOiBvbkJhY2ssIGNoaWxkcmVuOiBiYWNrSWNvbiAhPT0gbnVsbCAmJiBiYWNrSWNvbiAhPT0gdm9pZCAwID8gYmFja0ljb24gOiBfanN4KEljb25zLCB7IG5hbWU6ICdhcnJvd0xlZnQnLCBzaXplOiBQQU5FTF9MQVlPVVRfQkFDS19JQ09OX1NJWkUgfSkgfSkpIDogbnVsbDtcbiAgICBjb25zdCBoYXNIZWFkZXIgPSBzaG93QmFja0ljb24gfHxcbiAgICAgICAgaWxsdXN0cmF0aW9uICE9IG51bGwgfHxcbiAgICAgICAgZXllYnJvdyAhPSBudWxsIHx8XG4gICAgICAgIHRpdGxlICE9IG51bGwgfHxcbiAgICAgICAgZGVzY3JpcHRpb24gIT0gbnVsbDtcbiAgICBjb25zdCBoZWFkZXIgPSBoYXNIZWFkZXIgPyAoX2pzeHMoXCJkaXZcIiwgeyBjbGFzc05hbWU6IGNsYXNzZXMoJ2hlYWRlcicpLCBjaGlsZHJlbjogW2JhY2tOb2RlLCBpbGx1c3RyYXRpb25Ob2RlICE9IG51bGwgJiYgKF9qc3goXCJkaXZcIiwgeyBjbGFzc05hbWU6IGNsYXNzZXMoJ2lsbHVzdHJhdGlvbicpLCBjaGlsZHJlbjogaWxsdXN0cmF0aW9uTm9kZSB9KSksIGV5ZWJyb3cgIT0gbnVsbCAmJiBfanN4KFwiZGl2XCIsIHsgY2hpbGRyZW46IGV5ZWJyb3cgfSksIHRpdGxlTm9kZSwgZGVzY3JpcHRpb24gIT0gbnVsbCAmJiAoX2pzeChUeXBvZ3JhcGh5LkJvZHksIHsgYXM6ICdwJywgc2l6ZTogJ21kJywgc3Ryb25nOiBkZXNjcmlwdGlvblN0cm9uZywgY29sb3I6ICdkZWZhdWx0LXNlY29uZGFyeScsIGNoaWxkcmVuOiBkZXNjcmlwdGlvbiB9KSldIH0pKSA6IHVuZGVmaW5lZDtcbiAgICAvLyBUaGUgYmFyIG93bnMgdGhlIGJ1dHRvbiBzaXplLCBzbyB0aGUgZmFtaWx5IHNpemUgaXMgYXBwbGllZCBwZXIgYWN0aW9uXG4gICAgLy8gcmF0aGVyIHRoYW4gYXMgYSBiYXItbGV2ZWwgcHJvcDsgYW4gZXhwbGljaXQgcGVyLWFjdGlvbiBgc2l6ZWAgc3RpbGwgd2lucy5cbiAgICBjb25zdCB3aXRoU2l6ZSA9IChhY3Rpb24pID0+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,68 @@
+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 badge/label row rendered above the title (e.g. a Tag). */
+    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,50 @@
+/**
+  * 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-illustration {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  line-height: 0;
+}
+.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