@1money/component-ui 0.0.89 → 0.0.90-alpha.0

package/lib/components/FormLayout/FormLayout.js

@@ -0,0 +1,134 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FormRow = exports.FormLayout = exports.FormCell = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
+var _Typography = require("../Typography");
+var _classnames = _interopRequireWildcard(require("../../utils/classnames"));
+var _config = require("./config");
+var _context = require("./context");
+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; }
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var SCROLL_FADE_DELAY = 1000;
+var FormLayoutBase = function FormLayoutBase(_a) {
+  var _a$variant = _a.variant,
+    variant = _a$variant === void 0 ? 'page' : _a$variant,
+    scroll = _a.scroll,
+    title = _a.title,
+    extra = _a.extra,
+    children = _a.children,
+    footer = _a.footer,
+    width = _a.width,
+    maxHeight = _a.maxHeight,
+    _a$prefixCls = _a.prefixCls,
+    prefixCls = _a$prefixCls === void 0 ? _config.FORM_LAYOUT_PREFIX : _a$prefixCls,
+    className = _a.className,
+    style = _a.style,
+    rest = __rest(_a, ["variant", "scroll", "title", "extra", "children", "footer", "width", "maxHeight", "prefixCls", "className", "style"]);
+  var classes = (0, _classnames["default"])(prefixCls);
+  var resolvedWidth = typeof width === 'number' ? "".concat(width, "px") : width;
+  // While a scroll is in flight the content carries a `-scrolling` class so
+  // the (otherwise invisible) overlay scrollbar thumb shows, fading out one
+  // second after the last scroll event — ported from the app's PopupForm.
+  // Scroll policy: the variant supplies the default (modal → true,
+  // page → false); an explicit `scroll` prop overrides it.
+  var scrollable = scroll !== null && scroll !== void 0 ? scroll : variant === 'modal';
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    scrolling = _useState2[0],
+    setScrolling = _useState2[1];
+  var fadeTimer = (0, _react.useRef)(undefined);
+  (0, _react.useEffect)(function () {
+    return function () {
+      return clearTimeout(fadeTimer.current);
+    };
+  }, []);
+  var handleScroll = scrollable ? function () {
+    setScrolling(true);
+    clearTimeout(fadeTimer.current);
+    fadeTimer.current = setTimeout(function () {
+      return setScrolling(false);
+    }, SCROLL_FADE_DELAY);
+  } : undefined;
+  var titleNode = typeof title === 'string' || typeof title === 'number' ? (0, _jsxRuntime.jsx)(_Typography.Typography.Headline, {
+    size: 'sm',
+    as: 'h2',
+    color: 'default',
+    children: title
+  }) : title;
+  return (0, _jsxRuntime.jsx)(_context.FormControlSizeContext.Provider, {
+    value: _config.FORM_LAYOUT_CONFIG[variant].controlSize,
+    children: (0, _jsxRuntime.jsxs)("div", Object.assign({}, rest, {
+      className: (0, _classnames.joinCls)(classes(), classes(variant), scrollable && classes('scrollable'), className),
+      style: Object.assign(Object.assign(Object.assign(Object.assign({}, (0, _config.formLayoutCssVars)(variant)), resolvedWidth ? {
+        width: resolvedWidth
+      } : null), maxHeight != null ? {
+        maxHeight: typeof maxHeight === 'number' ? "".concat(maxHeight, "px") : maxHeight
+      } : null), style),
+      children: [(title != null || extra != null) && (0, _jsxRuntime.jsxs)("div", {
+        className: classes(_config.FORM_LAYOUT_SLOT.header),
+        children: [title != null && (0, _jsxRuntime.jsx)("div", {
+          className: classes(_config.FORM_LAYOUT_SLOT.title),
+          children: titleNode
+        }), extra != null && (0, _jsxRuntime.jsx)("div", {
+          className: classes(_config.FORM_LAYOUT_SLOT.extra),
+          children: extra
+        })]
+      }), children != null && (0, _jsxRuntime.jsx)("div", {
+        className: (0, _classnames.joinCls)(classes(_config.FORM_LAYOUT_SLOT.content), scrolling && classes("".concat(_config.FORM_LAYOUT_SLOT.content, "-scrolling"))),
+        onScroll: handleScroll,
+        children: children
+      }), footer != null && (0, _jsxRuntime.jsx)("div", {
+        className: classes(_config.FORM_LAYOUT_SLOT.footer),
+        children: footer
+      })]
+    }))
+  });
+};
+/**
+ * One multi-column row inside the fields region. Cells share the row evenly;
+ * the gutter reads the SAME css variable the layout sets, so it follows the
+ * variant density automatically. Full-width fields don't need a FormRow —
+ * they are direct children of the layout. Rows and full-width children mix
+ * freely. Also available as `FormLayout.Row`.
+ */
+var FormRow = exports.FormRow = function FormRow(_ref) {
+  var children = _ref.children,
+    className = _ref.className;
+  return (0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames.joinCls)((0, _classnames["default"])(_config.FORM_LAYOUT_PREFIX)('row'), className),
+    children: children
+  });
+};
+/**
+ * One cell of a FormRow; cells split the row evenly and clip long content.
+ * Also available as `FormLayout.Cell`.
+ */
+var FormCell = exports.FormCell = function FormCell(_ref2) {
+  var children = _ref2.children,
+    className = _ref2.className;
+  return (0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames.joinCls)((0, _classnames["default"])(_config.FORM_LAYOUT_PREFIX)('cell'), className),
+    children: children
+  });
+};
+var FormLayout = exports.FormLayout = Object.assign(/*#__PURE__*/(0, _react.memo)(FormLayoutBase), {
+  Row: FormRow,
+  Cell: FormCell
+});
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvRm9ybUxheW91dC9Gb3JtTGF5b3V0LmpzIiwiY29tcG9uZW50cy9zcmMvY29tcG9uZW50cy9Gb3JtTGF5b3V0L0Zvcm1MYXlvdXQudHN4Il0sIm5hbWVzIjpbIl9qc3hSdW50aW1lIiwicmVxdWlyZSIsIl9yZWFjdCIsIl9UeXBvZ3JhcGh5IiwiX2NsYXNzbmFtZXMiLCJfaW50ZXJvcFJlcXVpcmVXaWxkY2FyZCIsIl9jb25maWciLCJfY29udGV4dCIsIl9nZXRSZXF1aXJlV2lsZGNhcmRDYWNoZSIsImUiLCJXZWFrTWFwIiwiciIsInQiLCJfX2VzTW9kdWxlIiwiX3R5cGVvZiIsImhhcyIsImdldCIsIm4iLCJfX3Byb3RvX18iLCJhIiwiT2JqZWN0IiwiZGVmaW5lUHJvcGVydHkiLCJnZXRPd25Qcm9wZXJ0eURlc2NyaXB0b3IiLCJ1IiwiaGFzT3duUHJvcGVydHkiLCJjYWxsIiwiaSIsInNldCIsIl9fcmVzdCIsInMiLCJwIiwicHJvdG90eXBlIiwiaW5kZXhPZiIsImdldE93blByb3BlcnR5U3ltYm9scyIsImxlbmd0aCIsInByb3BlcnR5SXNFbnVtZXJhYmxlIiwiU0NST0xMX0ZBREVfREVMQVkiLCJGb3JtTGF5b3V0QmFzZSIsIl9hIiwiX2EkdmFyaWFudCIsInZhcmlhbnQiLCJzY3JvbGwiLCJ0aXRsZSIsImV4dHJhIiwiY2hpbGRyZW4iLCJmb290ZXIiLCJ3aWR0aCIsIm1heEhlaWdodCIsIl9hJHByZWZpeENscyIsInByZWZpeENscyIsIkZPUk1fTEFZT1VUX1BSRUZJWCIsImNsYXNzTmFtZSIsInN0eWxlIiwicmVzdCIsImNsYXNzZXMiLCJjbGFzc25hbWVzIiwicmVzb2x2ZWRXaWR0aCIsImNvbmNhdCIsInNjcm9sbGFibGUiLCJfdXNlU3RhdGUiLCJ1c2VTdGF0ZSIsIl91c2VTdGF0ZTIiLCJfc2xpY2VkVG9BcnJheTIiLCJzY3JvbGxpbmciLCJzZXRTY3JvbGxpbmciLCJmYWRlVGltZXIiLCJ1c2VSZWYiLCJ1bmRlZmluZWQiLCJ1c2VFZmZlY3QiLCJjbGVhclRpbWVvdXQiLCJjdXJyZW50IiwiaGFuZGxlU2Nyb2xsIiwic2V0VGltZW91dCIsInRpdGxlTm9kZSIsIl9qc3giLCJUeXBvZ3JhcGh5IiwiSGVhZGxpbmUiLCJzaXplIiwiYXMiLCJjb2xvciIsIkZvcm1Db250cm9sU2l6ZUNvbnRleHQiLCJQcm92aWRlciIsInZhbHVlIiwiRk9STV9MQVlPVVRfQ09ORklHIiwiY29udHJvbFNpemUiLCJfanN4cyIsImFzc2lnbiIsImpvaW5DbHMiLCJmb3JtTGF5b3V0Q3NzVmFycyIsIkZPUk1fTEFZT1VUX1NMT1QiLCJoZWFkZXIiLCJjb250ZW50Iiwib25TY3JvbGwiLCJGb3JtUm93IiwiZXhwb3J0cyIsIl9yZWYiLCJGb3JtQ2VsbCIsIl9yZWYyIiwiRm9ybUxheW91dCIsIm1lbW8iLCJSb3ciLCJDZWxsIl0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7QUFXQSxJQUFBQSxXQUFBLEdBQUFDLE9BQUE7QUNYQSxJQUFBQyxNQUFBLEdBQUFELE9BQUE7QUFDQSxJQUFBRSxXQUFBLEdBQUFGLE9BQUE7QUFDQSxJQUFBRyxXQUFBLEdBQUFDLHVCQUFBLENBQUFKLE9BQUE7QUFDQSxJQUFBSyxPQUFBLEdBQUFMLE9BQUE7QUFDQSxJQUFBTSxRQUFBLEdBQUFOLE9BQUE7QUFHQUEsT0FBQTtBQUFpQixTQUFBTyx5QkFBQUMsQ0FBQSw2QkFBQUMsT0FBQSxtQkFBQUMsQ0FBQSxPQUFBRCxPQUFBLElBQUFFLENBQUEsT0FBQUYsT0FBQSxZQUFBRix3QkFBQSxZQUFBQSx5QkFBQUMsQ0FBQSxXQUFBQSxDQUFBLEdBQUFHLENBQUEsR0FBQUQsQ0FBQSxLQUFBRixDQUFBO0FBQUEsU0FBQUosd0JBQUFJLENBQUEsRUFBQUUsQ0FBQSxTQUFBQSxDQUFBLElBQUFGLENBQUEsSUFBQUEsQ0FBQSxDQUFBSSxVQUFBLFNBQUFKLENBQUEsZUFBQUEsQ0FBQSxnQkFBQUssT0FBQSxDQUFBTCxDQUFBLDBCQUFBQSxDQUFBLHNCQUFBQSxDQUFBLFFBQUFH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RSxNQUFNLENBQUNrRSxNQUFNLGNBQUMsSUFBQWEsV0FBSSxFQUFDOUQsY0FBYyxDQUFDLEVBQUU7RUFDNUQrRCxHQUFHLEVBQUVQLE9BQU87RUFDWlEsSUFBSSxFQUFFTDtBRGpFUixDQ2tFQyxDQUFDIiwiZmlsZSI6ImNvbXBvbmVudHMvRm9ybUxheW91dC9Gb3JtTGF5b3V0LmpzIiwic291cmNlc0NvbnRlbnQiOlsidmFyIF9fcmVzdCA9ICh0aGlzICYmIHRoaXMuX19yZXN0KSB8fCBmdW5jdGlvbiAocywgZSkge1xuICAgIHZhciB0ID0ge307XG4gICAgZm9yICh2YXIgcCBpbiBzKSBpZiAoT2JqZWN0LnByb3RvdHlwZS5oYXNPd25Qcm9wZXJ0eS5jYWxsKHMsIHApICYmIGUuaW5kZXhPZihwKSA8IDApXG4gICAgICAgIHRbcF0gPSBzW3BdO1xuICAgIGlmIChzICE9IG51bGwgJiYgdHlwZW9mIE9iamVjdC5nZXRPd25Qcm9wZXJ0eVN5bWJvbHMgPT09IFwiZnVuY3Rpb25cIilcbiAgICAgICAgZm9yICh2YXIgaSA9IDAsIHAgPSBPYmplY3QuZ2V0T3duUHJvcGVydHlTeW1ib2xzKHMpOyBpIDwgcC5sZW5ndGg7IGkrKykge1xuICAgICAgICAgICAgaWYgKGUuaW5kZXhPZihwW2ldKSA8IDAgJiYgT2JqZWN0LnByb3RvdHlwZS5wcm9wZXJ0eUlzRW51bWVyYWJsZS5jYWxsKHMsIHBbaV0pKVxuICAgICAgICAgICAgICAgIHRbcFtpXV0gPSBzW3BbaV1dO1xuICAgICAgICB9XG4gICAgcmV0dXJuIHQ7XG59O1xuaW1wb3J0IHsganN4IGFzIF9qc3gsIGpzeHMgYXMgX2pzeHMgfSBmcm9tIFwicmVhY3QvanN4LXJ1bnRpbWVcIjtcbmltcG9ydCB7IG1lbW8sIHVzZUVmZmVjdCwgdXNlUmVmLCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IFR5cG9ncmFwaHkgfSBmcm9tICcuLi9UeXBvZ3JhcGh5JztcbmltcG9ydCB7IGRlZmF1bHQgYXMgY2xhc3NuYW1lcywgam9pbkNscyB9IGZyb20gJy4uLy4uL3V0aWxzL2NsYXNzbmFtZXMnO1xuaW1wb3J0IHsgRk9STV9MQVlPVVRfQ09ORklHLCBGT1JNX0xBWU9VVF9QUkVGSVgsIEZPUk1fTEFZT1VUX1NMT1QsIGZvcm1MYXlvdXRDc3NWYXJzIH0gZnJvbSAnLi9jb25maWcnO1xuaW1wb3J0IHsgRm9ybUNvbnRyb2xTaXplQ29udGV4dCB9IGZyb20gJy4vY29udGV4dCc7XG5pbXBvcnQgJy4vc3R5bGUnO1xuY29uc3QgU0NST0xMX0ZBREVfREVMQVkgPSAxMDAwO1xuY29uc3QgRm9ybUxheW91dEJhc2UgPSAoX2EpID0+IHtcbiAgICB2YXIgeyB2YXJpYW50ID0gJ3BhZ2UnLCBzY3JvbGwsIHRpdGxlLCBleHRyYSwgY2hpbGRyZW4sIGZvb3Rlciwgd2lkdGgsIG1heEhlaWdodCwgcHJlZml4Q2xzID0gRk9STV9MQVlPVVRfUFJFRklYLCBjbGFzc05hbWUsIHN0eWxlIH0gPSBfYSwgcmVzdCA9IF9fcmVzdChfYSwgW1widmFyaWFudFwiLCBcInNjcm9sbFwiLCBcInRpdGxlXCIsIFwiZXh0cmFcIiwgXCJjaGlsZHJlblwiLCBcImZvb3RlclwiLCBcIndpZHRoXCIsIFwibWF4SGVpZ2h0XCIsIFwicHJlZml4Q2xzXCIsIFwiY2xhc3NOYW1lXCIsIFwic3R5bGVcIl0pO1xuICAgIGNvbnN0IGNsYXNzZXMgPSBjbGFzc25hbWVzKHByZWZpeENscyk7XG4gICAgY29uc3QgcmVzb2x2ZWRXaWR0aCA9IHR5cGVvZiB3aWR0aCA9PT0gJ251bWJlcicgPyBgJHt3aWR0aH1weGAgOiB3aWR0aDtcbiAgICAvLyBXaGlsZSBhIHNjcm9sbCBpcyBpbiBmbGlnaHQgdGhlIGNvbnRlbnQgY2FycmllcyBhIGAtc2Nyb2xsaW5nYCBjbGFzcyBzb1xuICAgIC8vIHRoZSAob3RoZXJ3aXNlIGludmlzaWJsZSkgb3ZlcmxheSBzY3JvbGxiYXIgdGh1bWIgc2hvd3MsIGZhZGluZyBvdXQgb25lXG4gICAgLy8gc2Vjb25kIGFmdGVyIHRoZSBsYXN0IHNjcm9sbCBldmVudCDigJQgcG9ydGVkIGZyb20gdGhlIGFwcCdzIFBvcHVwRm9ybS5cbiAgICAvLyBTY3JvbGwgcG9saWN5OiB0aGUgdmFyaWFudCBzdXBwbGllcyB0aGUgZGVmYXVsdCAobW9kYWwg4oaSIHRydWUsXG4gICAgLy8gcGFnZSDihpIgZmFsc2UpOyBhbiBleHBsaWNpdCBgc2Nyb2xsYCBwcm9wIG92ZXJyaWRlcyBpdC5cbiAgICBjb25zdCBzY3JvbGxhYmxlID0gc2Nyb2xsICE9PSBudWxsICYmIHNjcm9sbCAhPT0gdm9pZCAwID8gc2Nyb2xsIDogdmFyaWFudCA9PT0gJ21vZGFsJztcbiAgICBjb25zdCBbc2Nyb2xsaW5nLCBzZXRTY3JvbGxpbmddID0gdXNlU3RhdGUoZmFsc2UpO1xuICAgIGNvbnN0IGZhZGVUaW1lciA9IHVzZVJlZih1bmRlZmluZWQpO1xuICAgIHVzZUVmZmVjdCgoKSA9PiAoKSA9PiBjbGVhclRpbWVvdXQoZmFkZVRpbWVyLmN1cnJlbnQpLCBbXSk7XG4gICAgY29uc3QgaGFuZGxlU2Nyb2xsID0gc2Nyb2xsYWJsZVxuICAgICAgICA/ICgpID0+IHtcbiAgICAgICAgICAgIHNldFNjcm9sbGluZyh0cnVlKTtcbiAgICAgICAgICAgIGNsZWFyVGltZW91dChmYWRlVGltZXIuY3VycmVudCk7XG4gICAgICAgICAgICBmYWRlVGltZXIuY3VycmVudCA9IHNldFRpbWVvdXQoKCkgPT4gc2V0U2Nyb2xsaW5nKGZhbHNlKSwgU0NST0xMX0ZBREVfREVMQVkpO1xuICAgICAgICB9XG4gICAgICAgIDogdW5kZWZpbmVkO1xuICAgIGNvbnN0IHRpdGxlTm9kZSA9IHR5cGVvZiB0aXRsZSA9PT0gJ3N0cmluZycgfHwgdHlwZW9mIHRpdGxlID09PSAnbnVtYmVyJyA/IChfanN4KFR5cG9ncmFwaHkuSGVhZGxpbmUsIHsgc2l6ZTogJ3NtJywgYXM6ICdoMicsIGNvbG9yOiAnZGVmYXVsdCcsIGNoaWxkcmVuOiB0aXRsZSB9KSkgOiAodGl0bGUpO1xuICAgIHJldHVybiAoX2pzeChGb3JtQ29udHJvbFNpemVDb250ZXh0LlByb3ZpZGVyLCB7IHZhbHVlOiBGT1JNX0xBWU9VVF9DT05GSUdbdmFyaWFudF0uY29udHJvbFNpemUsIGNoaWxkcmVuOiBfanN4cyhcImRpdlwiLCBPYmplY3QuYXNzaWduKHt9LCByZXN0LCB7IGNsYXNzTmFtZTogam9pbkNscyhjbGFzc2VzKCksIGNsYXNzZXModmFyaWFudCksIHNjcm9sbGFibGUgJiYgY2xhc3Nlcygnc2Nyb2xsYWJsZScpLCBjbGFzc05hbWUpLCBzdHlsZTogT2JqZWN0LmFzc2lnbihPYmplY3QuYXNzaWduKE9iamVjdC5hc3NpZ24oT2JqZWN0LmFzc2lnbih7fSwgZm9ybUxheW91dENzc1ZhcnModmFyaWFudCkpLCAocmVzb2x2ZWRXaWR0aCA/IHsgd2lkdGg6IHJlc29sdmVkV2lkdGggfSA6IG51bGwpKSwgKG1heEhlaWdodCAhPSBudWxsXG4gICAgICAgICAgICAgICAgPyB7IG1heEhlaWdodDogdHlwZW9mIG1heEhlaWdodCA9PT0gJ251bWJlcicgPyBgJHttYXhIZWlnaHR9cHhgIDogbWF4SGVpZ2h0IH1cbiAgICAgICAgICAgICAgICA6IG51bGwpKSwgc3R5bGUpLCBjaGlsZHJlbjogWyh0aXRsZSAhPSBudWxsIHx8IGV4dHJhICE9IG51bGwpICYmIChfanN4cyhcImRpdlwiLCB7IGNsYXNzTmFtZTogY2xhc3NlcyhGT1JNX0xBWU9VVF9TTE9ULmhlYWRlciksIGNoaWxkcmVuOiBbdGl0bGUgIT0gbnVsbCAmJiBfanN4KFwiZGl2XCIsIHsgY2xhc3NOYW1lOiBjbGFzc2VzKEZPUk1fTEFZT1VUX1NMT1QudGl0bGUpLCBjaGlsZHJlbjogdGl0bGVOb2RlIH0pLCBleHRyYSAhPSBudWxsICYmIF9qc3goXCJkaXZcIiwgeyBjbGFzc05hbWU6IGNsYXNzZXMoRk9STV9MQVlPVVRfU0xPVC5leHRyYSksIGNoaWxkcmVuOiBleHRyYSB9KV0gfSkpLCBjaGlsZHJlbiAhPSBudWxsICYmIChfanN4KFwiZGl2XCIsIHsgY2xhc3NOYW1lOiBqb2luQ2xzKGNsYXNzZXMoRk9STV9MQVlPVVRfU0xPVC5jb250ZW50KSwgc2Nyb2xsaW5nICYmIGNsYXNzZXMoYCR7Rk9STV9MQVlPVVRfU0xPVC5jb250ZW50fS1zY3JvbGxpbmdgKSksIG9uU2Nyb2xsOiBoYW5kbGVTY3JvbGwsIGNoaWxkcmVuOiBjaGlsZHJlbiB9KSksIGZvb3RlciAhPSBudWxsICYmIF9qc3goXCJkaXZcIiwgeyBjbGFzc05hbWU6IGNsYXNzZXMoRk9STV9MQVlPVVRfU0xPVC5mb290ZXIpLCBjaGlsZHJlbjogZm9vdGVyIH0pXSB9KSkgfSkpO1xufTtcbi8qKlxuICogT25lIG11bHRpLWNvbHVtbiByb3cgaW5zaWRlIHRoZSBmaWVsZHMgcmVnaW9uLiBDZWxscyBzaGFyZSB0aGUgcm93IGV2ZW5seTtcbiAqIHRoZSBndXR0ZXIgcmVhZHMgdGhlIFNBTUUgY3NzIHZhcmlhYmxlIHRoZSBsYXlvdXQgc2V0cywgc28gaXQgZm9sbG93cyB0aGVcbiAqIHZhcmlhbnQgZGVuc2l0eSBhdXRvbWF0aWNhbGx5LiBGdWxsLXdpZHRoIGZpZWxkcyBkb24ndCBuZWVkIGEgRm9ybVJvdyDigJRcbiAqIHRoZXkgYXJlIGRpcmVjdCBjaGlsZHJlbiBvZiB0aGUgbGF5b3V0LiBSb3dzIGFuZCBmdWxsLXdpZHRoIGNoaWxkcmVuIG1peFxuICogZnJlZWx5LiBBbHNvIGF2YWlsYWJsZSBhcyBgRm9ybUxheW91dC5Sb3dgLlxuICovXG5leHBvcnQgY29uc3QgRm9ybVJvdyA9ICh7IGNoaWxkcmVuLCBjbGFzc05hbWUgfSkgPT4gKF9qc3goXCJkaXZcIiwgeyBjbGFzc05hbWU6IGpvaW5DbHMoY2xhc3NuYW1lcyhGT1JNX0xBWU9VVF9QUkVGSVgpKCdyb3cnKSwgY2xhc3NOYW1lKSwgY2hpbGRyZW46IGNoaWxkcmVuIH0pKTtcbi8qKlxuICogT25lIGNlbGwgb2YgYSBGb3JtUm93OyBjZWxscyBzcGxpdCB0aGUgcm93IGV2ZW5seSBhbmQgY2xpcCBsb25nIGNvbnRlbnQuXG4gKiBBbHNvIGF2YWlsYWJsZSBhcyBgRm9ybUxheW91dC5DZWxsYC5cbiAqL1xuZXhwb3J0IGNvbnN0IEZvcm1DZWxsID0gKHsgY2hpbGRyZW4sIGNsYXNzTmFtZSB9KSA9PiAoX2pzeChcImRpdlwiLCB7IGNsYXNzTmFtZTogam9pbkNscyhjbGFzc25hbWVzKEZPUk1fTEFZT1VUX1BSRUZJWCkoJ2NlbGwnKSwgY2xhc3NOYW1lKSwgY2hpbGRyZW46IGNoaWxkcmVuIH0pKTtcbmV4cG9ydCBjb25zdCBGb3JtTGF5b3V0ID0gT2JqZWN0LmFzc2lnbihtZW1vKEZvcm1MYXlvdXRCYXNlKSwge1xuICAgIFJvdzogRm9ybVJvdyxcbiAgICBDZWxsOiBGb3JtQ2VsbCxcbn0pOyIsbnVsbF0sInNvdXJjZVJvb3QiOiIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9zcmMifQ==

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

@@ -0,0 +1,52 @@
+import type { CSSProperties } from 'react';
+export declare const FORM_LAYOUT_PREFIX = "form-layout";
+/**
+ * THE density table for form surfaces — the single thing to edit when the
+ * design changes or a new density is added. Every value is consumed through
+ * CSS custom properties (container spacing) or read by the form preset
+ * (row gap / column gutter for ProForm), so adding a variant here is the
+ * whole job.
+ *
+ * Source: 1Money Design System (Beta) — "Dialog Body" (node 39743-4634)
+ * for `modal`; page usage (node 39956-9712) for `page`.
+ */
+export declare const FORM_LAYOUT_CONFIG: {
+    /** Inside a dialog: tighter density. */
+    readonly modal: {
+        /** Default panel width (px); the `width` prop overrides. */
+        readonly width: 640;
+        /** Panel padding (px). */
+        readonly padding: 24;
+        /** Vertical gap between field rows (px). */
+        readonly rowGap: 12;
+        /** Horizontal gutter between columns in a row (px). */
+        readonly colGutter: 12;
+        /** Gap between the header / fields / footer regions (px). */
+        readonly regionGap: 16;
+        /** Gap between footer action buttons (px); ActionBar reads it via var. */
+        readonly actionGap: 12;
+        /** Control size cascaded to every field via ProForm `size`. */
+        readonly controlSize: "small";
+    };
+    /** Standalone on a page: roomier density. */
+    readonly page: {
+        readonly width: 738;
+        readonly padding: 32;
+        readonly rowGap: 24;
+        readonly colGutter: 24;
+        readonly regionGap: 24;
+        readonly actionGap: 12;
+        readonly controlSize: "large";
+    };
+};
+export type FormLayoutVariant = keyof typeof FORM_LAYOUT_CONFIG;
+export declare const FORM_LAYOUT_VARIANTS: FormLayoutVariant[];
+export declare const FORM_LAYOUT_SLOT: {
+    readonly header: "header";
+    readonly title: "title";
+    readonly extra: "extra";
+    readonly content: "content";
+    readonly footer: "footer";
+};
+/** Bridge the variant's numbers into CSS custom properties for the stylesheet. */
+export declare const formLayoutCssVars: (variant: FormLayoutVariant) => CSSProperties;

package/lib/components/FormLayout/config.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formLayoutCssVars = exports.FORM_LAYOUT_VARIANTS = exports.FORM_LAYOUT_SLOT = exports.FORM_LAYOUT_PREFIX = exports.FORM_LAYOUT_CONFIG = void 0;
+var FORM_LAYOUT_PREFIX = exports.FORM_LAYOUT_PREFIX = 'form-layout';
+/**
+ * THE density table for form surfaces — the single thing to edit when the
+ * design changes or a new density is added. Every value is consumed through
+ * CSS custom properties (container spacing) or read by the form preset
+ * (row gap / column gutter for ProForm), so adding a variant here is the
+ * whole job.
+ *
+ * Source: 1Money Design System (Beta) — "Dialog Body" (node 39743-4634)
+ * for `modal`; page usage (node 39956-9712) for `page`.
+ */
+var FORM_LAYOUT_CONFIG = exports.FORM_LAYOUT_CONFIG = {
+  /** Inside a dialog: tighter density. */
+  modal: {
+    /** Default panel width (px); the `width` prop overrides. */
+    width: 640,
+    /** Panel padding (px). */
+    padding: 24,
+    /** Vertical gap between field rows (px). */
+    rowGap: 12,
+    /** Horizontal gutter between columns in a row (px). */
+    colGutter: 12,
+    /** Gap between the header / fields / footer regions (px). */
+    regionGap: 16,
+    /** Gap between footer action buttons (px); ActionBar reads it via var. */
+    actionGap: 12,
+    /** Control size cascaded to every field via ProForm `size`. */
+    controlSize: 'small'
+  },
+  /** Standalone on a page: roomier density. */
+  page: {
+    width: 738,
+    padding: 32,
+    rowGap: 24,
+    colGutter: 24,
+    regionGap: 24,
+    actionGap: 12,
+    controlSize: 'large'
+  }
+};
+var FORM_LAYOUT_VARIANTS = exports.FORM_LAYOUT_VARIANTS = Object.keys(FORM_LAYOUT_CONFIG);
+var FORM_LAYOUT_SLOT = exports.FORM_LAYOUT_SLOT = {
+  header: 'header',
+  title: 'title',
+  extra: 'extra',
+  content: 'content',
+  footer: 'footer'
+};
+/** Bridge the variant's numbers into CSS custom properties for the stylesheet. */
+var formLayoutCssVars = exports.formLayoutCssVars = function formLayoutCssVars(variant) {
+  var config = FORM_LAYOUT_CONFIG[variant];
+  return {
+    '--form-layout-width': "".concat(config.width, "px"),
+    '--form-layout-padding': "".concat(config.padding, "px"),
+    '--form-layout-row-gap': "".concat(config.rowGap, "px"),
+    '--form-layout-region-gap': "".concat(config.regionGap, "px"),
+    '--form-layout-action-gap': "".concat(config.actionGap, "px")
+  };
+};
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvc3JjL2NvbXBvbmVudHMvRm9ybUxheW91dC9jb25maWcudHMiLCJjb21wb25lbnRzL0Zvcm1MYXlvdXQvY29uZmlnLmpzIl0sIm5hbWVzIjpbIkZPUk1fTEFZT1VUX1BSRUZJWCIsImV4cG9ydHMiLCJGT1JNX0xBWU9VVF9DT05GSUciLCJtb2RhbCIsIndpZHRoIiwicGFkZGluZyIsInJvd0dhcCIsImNvbEd1dHRlciIsInJlZ2lvbkdhcCIsImFjdGlvbkdhcCIsImNvbnRyb2xTaXplIiwicGFnZSIsIkZPUk1fTEFZT1VUX1ZBUklBTlRTIiwiT2JqZWN0Iiwia2V5cyIsIkZPUk1fTEFZT1VUX1NMT1QiLCJoZWFkZXIiLCJ0aXRsZSIsImV4dHJhIiwiY29udGVudCIsImZvb3RlciIsImZvcm1MYXlvdXRDc3NWYXJzIiwidmFyaWFudCIsImNvbmZpZyIsImNvbmNhdCJdLCJtYXBwaW5ncyI6Ijs7Ozs7O0FBRU8sSUFBTUEsa0JBQWtCLEdBQUFDLE9BQUEsQ0FBQUQsa0JBQUEsR0FBRyxhQUFhO0FBRS9DO0FDRkE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FESU8sSUFBTUUsa0JBQWtCLEdBQUFELE9BQUEsQ0FBQUMsa0JBQUEsR0FBRztFQUNoQztFQUNBQyxLQUFLLEVBQUU7SUFDTDtJQUNBQyxLQUFLLEVBQUUsR0FBRztJQUNWO0lBQ0FDLE9BQU8sRUFBRSxFQUFFO0lBQ1g7SUFDQUMsTUFBTSxFQUFFLEVBQUU7SUFDVjtJQUNBQyxTQUFTLEVBQUUsRUFBRTtJQUNiO0lBQ0FDLFNBQVMsRUFBRSxFQUFFO0lBQ2I7SUFDQUMsU0FBUyxFQUFFLEVBQUU7SUFDYjtJQUNBQyxXQUFXLEVBQUU7RUNGYixDREdEO0VBQ0Q7RUFDQUMsSUFBSSxFQUFFO0lBQ0pQLEtBQUssRUFBRSxHQUFHO0lBQ1ZDLE9BQU8sRUFBRSxFQUFFO0lBQ1hDLE1BQU0sRUFBRSxFQUFFO0lBQ1ZDLFNBQVMsRUFBRSxFQUFFO0lBQ2JDLFNBQVMsRUFBRSxFQUFFO0lBQ2JDLFNBQVMsRUFBRSxFQUFFO0lBQ2JDLFdBQVcsRUFBRTtFQ0ZiO0FBQ0osQ0RHVTtBQUlILElBQU1FLG9CQUFvQixHQUFBWCxPQUFBLENBQUFXLG9CQUFBLEdBQUdDLE1BQU0sQ0FBQ0MsSUFBSSxDQUFDWixrQkFBa0IsQ0FBd0I7QUFFbkYsSUFBTWEsZ0JBQWdCLEdBQUFkLE9BQUEsQ0FBQWMsZ0JBQUEsR0FBRztFQUM5QkMsTUFBTSxFQUFFLFFBQVE7RUFDaEJDLEtBQUssRUFBRSxPQUFPO0VBQ2RDLEtBQUssRUFBRSxPQUFPO0VBQ2RDLE9BQU8sRUFBRSxTQUFTO0VBQ2xCQyxNQUFNLEVBQUU7QUNOVixDRE9VO0FBRVY7QUFDTyxJQUFNQyxpQkFBaUIsR0FBQXBCLE9BQUEsQ0FBQW9CLGlCQUFBLEdBQUcsU0FBcEJBLGlCQUFpQkEsQ0FBSUMsT0FBMEIsRUFBbUI7RUFDN0UsSUFBTUMsTUFBTSxHQUFHckIsa0JBQWtCLENBQUNvQixPQUFPLENBQUM7RUFDMUMsT0FBTztJQUNMLHFCQUFxQixLQUFBRSxNQUFBLENBQUtELE1BQU0sQ0FBQ25CLEtBQUssT0FBSTtJQUMxQyx1QkFBdUIsS0FBQW9CLE1BQUEsQ0FBS0QsTUFBTSxDQUFDbEIsT0FBTyxPQUFJO0lBQzlDLHVCQUF1QixLQUFBbUIsTUFBQSxDQUFLRCxNQUFNLENBQUNqQixNQUFNLE9BQUk7SUFDN0MsMEJBQTBCLEtBQUFrQixNQUFBLENBQUtELE1BQU0sQ0FBQ2YsU0FBUyxPQUFJO0lBQ25ELDBCQUEwQixLQUFBZ0IsTUFBQSxDQUFLRCxNQUFNLENBQUNkLFNBQVM7RUNQL0MsQ0RRZ0I7QUFDcEIsQ0FBQyIsImZpbGUiOiJjb21wb25lbnRzL0Zvcm1MYXlvdXQvY29uZmlnLmpzIiwic291cmNlc0NvbnRlbnQiOltudWxsLCJleHBvcnQgY29uc3QgRk9STV9MQVlPVVRfUFJFRklYID0gJ2Zvcm0tbGF5b3V0Jztcbi8qKlxuICogVEhFIGRlbnNpdHkgdGFibGUgZm9yIGZvcm0gc3VyZmFjZXMg4oCUIHRoZSBzaW5nbGUgdGhpbmcgdG8gZWRpdCB3aGVuIHRoZVxuICogZGVzaWduIGNoYW5nZXMgb3IgYSBuZXcgZGVuc2l0eSBpcyBhZGRlZC4gRXZlcnkgdmFsdWUgaXMgY29uc3VtZWQgdGhyb3VnaFxuICogQ1NTIGN1c3RvbSBwcm9wZXJ0aWVzIChjb250YWluZXIgc3BhY2luZykgb3IgcmVhZCBieSB0aGUgZm9ybSBwcmVzZXRcbiAqIChyb3cgZ2FwIC8gY29sdW1uIGd1dHRlciBmb3IgUHJvRm9ybSksIHNvIGFkZGluZyBhIHZhcmlhbnQgaGVyZSBpcyB0aGVcbiAqIHdob2xlIGpvYi5cbiAqXG4gKiBTb3VyY2U6IDFNb25leSBEZXNpZ24gU3lzdGVtIChCZXRhKSDigJQgXCJEaWFsb2cgQm9keVwiIChub2RlIDM5NzQzLTQ2MzQpXG4gKiBmb3IgYG1vZGFsYDsgcGFnZSB1c2FnZSAobm9kZSAzOTk1Ni05NzEyKSBmb3IgYHBhZ2VgLlxuICovXG5leHBvcnQgY29uc3QgRk9STV9MQVlPVVRfQ09ORklHID0ge1xuICAgIC8qKiBJbnNpZGUgYSBkaWFsb2c6IHRpZ2h0ZXIgZGVuc2l0eS4gKi9cbiAgICBtb2RhbDoge1xuICAgICAgICAvKiogRGVmYXVsdCBwYW5lbCB3aWR0aCAocHgpOyB0aGUgYHdpZHRoYCBwcm9wIG92ZXJyaWRlcy4gKi9cbiAgICAgICAgd2lkdGg6IDY0MCxcbiAgICAgICAgLyoqIFBhbmVsIHBhZGRpbmcgKHB4KS4gKi9cbiAgICAgICAgcGFkZGluZzogMjQsXG4gICAgICAgIC8qKiBWZXJ0aWNhbCBnYXAgYmV0d2VlbiBmaWVsZCByb3dzIChweCkuICovXG4gICAgICAgIHJvd0dhcDogMTIsXG4gICAgICAgIC8qKiBIb3Jpem9udGFsIGd1dHRlciBiZXR3ZWVuIGNvbHVtbnMgaW4gYSByb3cgKHB4KS4gKi9cbiAgICAgICAgY29sR3V0dGVyOiAxMixcbiAgICAgICAgLyoqIEdhcCBiZXR3ZWVuIHRoZSBoZWFkZXIgLyBmaWVsZHMgLyBmb290ZXIgcmVnaW9ucyAocHgpLiAqL1xuICAgICAgICByZWdpb25HYXA6IDE2LFxuICAgICAgICAvKiogR2FwIGJldHdlZW4gZm9vdGVyIGFjdGlvbiBidXR0b25zIChweCk7IEFjdGlvbkJhciByZWFkcyBpdCB2aWEgdmFyLiAqL1xuICAgICAgICBhY3Rpb25HYXA6IDEyLFxuICAgICAgICAvKiogQ29udHJvbCBzaXplIGNhc2NhZGVkIHRvIGV2ZXJ5IGZpZWxkIHZpYSBQcm9Gb3JtIGBzaXplYC4gKi9cbiAgICAgICAgY29udHJvbFNpemU6ICdzbWFsbCcsXG4gICAgfSxcbiAgICAvKiogU3RhbmRhbG9uZSBvbiBhIHBhZ2U6IHJvb21pZXIgZGVuc2l0eS4gKi9cbiAgICBwYWdlOiB7XG4gICAgICAgIHdpZHRoOiA3MzgsXG4gICAgICAgIHBhZGRpbmc6IDMyLFxuICAgICAgICByb3dHYXA6IDI0LFxuICAgICAgICBjb2xHdXR0ZXI6IDI0LFxuICAgICAgICByZWdpb25HYXA6IDI0LFxuICAgICAgICBhY3Rpb25HYXA6IDEyLFxuICAgICAgICBjb250cm9sU2l6ZTogJ2xhcmdlJyxcbiAgICB9LFxufTtcbmV4cG9ydCBjb25zdCBGT1JNX0xBWU9VVF9WQVJJQU5UUyA9IE9iamVjdC5rZXlzKEZPUk1fTEFZT1VUX0NPTkZJRyk7XG5leHBvcnQgY29uc3QgRk9STV9MQVlPVVRfU0xPVCA9IHtcbiAgICBoZWFkZXI6ICdoZWFkZXInLFxuICAgIHRpdGxlOiAndGl0bGUnLFxuICAgIGV4dHJhOiAnZXh0cmEnLFxuICAgIGNvbnRlbnQ6ICdjb250ZW50JyxcbiAgICBmb290ZXI6ICdmb290ZXInLFxufTtcbi8qKiBCcmlkZ2UgdGhlIHZhcmlhbnQncyBudW1iZXJzIGludG8gQ1NTIGN1c3RvbSBwcm9wZXJ0aWVzIGZvciB0aGUgc3R5bGVzaGVldC4gKi9cbmV4cG9ydCBjb25zdCBmb3JtTGF5b3V0Q3NzVmFycyA9ICh2YXJpYW50KSA9PiB7XG4gICAgY29uc3QgY29uZmlnID0gRk9STV9MQVlPVVRfQ09ORklHW3ZhcmlhbnRdO1xuICAgIHJldHVybiB7XG4gICAgICAgICctLWZvcm0tbGF5b3V0LXdpZHRoJzogYCR7Y29uZmlnLndpZHRofXB4YCxcbiAgICAgICAgJy0tZm9ybS1sYXlvdXQtcGFkZGluZyc6IGAke2NvbmZpZy5wYWRkaW5nfXB4YCxcbiAgICAgICAgJy0tZm9ybS1sYXlvdXQtcm93LWdhcCc6IGAke2NvbmZpZy5yb3dHYXB9cHhgLFxuICAgICAgICAnLS1mb3JtLWxheW91dC1yZWdpb24tZ2FwJzogYCR7Y29uZmlnLnJlZ2lvbkdhcH1weGAsXG4gICAgICAgICctLWZvcm0tbGF5b3V0LWFjdGlvbi1nYXAnOiBgJHtjb25maWcuYWN0aW9uR2FwfXB4YCxcbiAgICB9O1xufTsiXSwic291cmNlUm9vdCI6Ii4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYyJ9

package/lib/components/FormLayout/context.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Default control size a FormLayout broadcasts to BARE controls inside it
+ * (`modal` → small, `page` → large). Input/Select read it when no explicit
+ * `size` prop is given, so shell-only migrations (no ProForm) get the
+ * variant's control size for free. An explicit `size` always wins; outside
+ * a FormLayout the components keep their own `'large'` default.
+ */
+export declare const FormControlSizeContext: import("react").Context<"small" | "large" | undefined>;
+export declare const useFormControlSize: () => "small" | "large" | undefined;

package/lib/components/FormLayout/context.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFormControlSize = exports.FormControlSizeContext = void 0;
+var _react = require("react");
+/**
+ * Default control size a FormLayout broadcasts to BARE controls inside it
+ * (`modal` → small, `page` → large). Input/Select read it when no explicit
+ * `size` prop is given, so shell-only migrations (no ProForm) get the
+ * variant's control size for free. An explicit `size` always wins; outside
+ * a FormLayout the components keep their own `'large'` default.
+ */
+var FormControlSizeContext = exports.FormControlSizeContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+var useFormControlSize = exports.useFormControlSize = function useFormControlSize() {
+  return (0, _react.useContext)(FormControlSizeContext);
+};
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvc3JjL2NvbXBvbmVudHMvRm9ybUxheW91dC9jb250ZXh0LnRzIiwiY29tcG9uZW50cy9Gb3JtTGF5b3V0L2NvbnRleHQuanMiXSwibmFtZXMiOlsiX3JlYWN0IiwicmVxdWlyZSIsIkZvcm1Db250cm9sU2l6ZUNvbnRleHQiLCJleHBvcnRzIiwiY3JlYXRlQ29udGV4dCIsInVuZGVmaW5lZCIsInVzZUZvcm1Db250cm9sU2l6ZSIsInVzZUNvbnRleHQiXSwibWFwcGluZ3MiOiI7Ozs7OztBQUFBLElBQUFBLE1BQUEsR0FBQUMsT0FBQTtBQUVBO0FDQUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FERU8sSUFBTUMsc0JBQXNCLEdBQUFDLE9BQUEsQ0FBQUQsc0JBQUEsZ0JBQUcsSUFBQUUsb0JBQWEsRUFBZ0NDLFNBQVMsQ0FBQztBQUV0RixJQUFNQyxrQkFBa0IsR0FBQUgsT0FBQSxDQUFBRyxrQkFBQSxHQUFHLFNBQXJCQSxrQkFBa0JBLENBQUE7RUFBQSxPQUFTLElBQUFDLGlCQUFVLEVBQUNMLHNCQUFzQixDQUFDO0FBQUEiLCJmaWxlIjoiY29tcG9uZW50cy9Gb3JtTGF5b3V0L2NvbnRleHQuanMiLCJzb3VyY2VzQ29udGVudCI6W251bGwsImltcG9ydCB7IGNyZWF0ZUNvbnRleHQsIHVzZUNvbnRleHQgfSBmcm9tICdyZWFjdCc7XG4vKipcbiAqIERlZmF1bHQgY29udHJvbCBzaXplIGEgRm9ybUxheW91dCBicm9hZGNhc3RzIHRvIEJBUkUgY29udHJvbHMgaW5zaWRlIGl0XG4gKiAoYG1vZGFsYCDihpIgc21hbGwsIGBwYWdlYCDihpIgbGFyZ2UpLiBJbnB1dC9TZWxlY3QgcmVhZCBpdCB3aGVuIG5vIGV4cGxpY2l0XG4gKiBgc2l6ZWAgcHJvcCBpcyBnaXZlbiwgc28gc2hlbGwtb25seSBtaWdyYXRpb25zIChubyBQcm9Gb3JtKSBnZXQgdGhlXG4gKiB2YXJpYW50J3MgY29udHJvbCBzaXplIGZvciBmcmVlLiBBbiBleHBsaWNpdCBgc2l6ZWAgYWx3YXlzIHdpbnM7IG91dHNpZGVcbiAqIGEgRm9ybUxheW91dCB0aGUgY29tcG9uZW50cyBrZWVwIHRoZWlyIG93biBgJ2xhcmdlJ2AgZGVmYXVsdC5cbiAqL1xuZXhwb3J0IGNvbnN0IEZvcm1Db250cm9sU2l6ZUNvbnRleHQgPSBjcmVhdGVDb250ZXh0KHVuZGVmaW5lZCk7XG5leHBvcnQgY29uc3QgdXNlRm9ybUNvbnRyb2xTaXplID0gKCkgPT4gdXNlQ29udGV4dChGb3JtQ29udHJvbFNpemVDb250ZXh0KTsiXSwic291cmNlUm9vdCI6Ii4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYyJ9

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

@@ -0,0 +1,7 @@
+import { FormLayout } from './FormLayout';
+export { FormLayout, FormRow, FormCell } from './FormLayout';
+export type { FormRowProps, FormCellProps } from './FormLayout';
+export default FormLayout;
+export * from './interface';
+export { FORM_LAYOUT_CONFIG, FORM_LAYOUT_VARIANTS, formLayoutCssVars, } from './config';
+export { FormControlSizeContext, useFormControlSize } from './context';

package/lib/components/FormLayout/index.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  FormLayout: true,
+  FormRow: true,
+  FormCell: true,
+  FORM_LAYOUT_CONFIG: true,
+  FORM_LAYOUT_VARIANTS: true,
+  formLayoutCssVars: true,
+  FormControlSizeContext: true,
+  useFormControlSize: true
+};
+Object.defineProperty(exports, "FORM_LAYOUT_CONFIG", {
+  enumerable: true,
+  get: function get() {
+    return _config.FORM_LAYOUT_CONFIG;
+  }
+});
+Object.defineProperty(exports, "FORM_LAYOUT_VARIANTS", {
+  enumerable: true,
+  get: function get() {
+    return _config.FORM_LAYOUT_VARIANTS;
+  }
+});
+Object.defineProperty(exports, "FormCell", {
+  enumerable: true,
+  get: function get() {
+    return _FormLayout.FormCell;
+  }
+});
+Object.defineProperty(exports, "FormControlSizeContext", {
+  enumerable: true,
+  get: function get() {
+    return _context.FormControlSizeContext;
+  }
+});
+Object.defineProperty(exports, "FormLayout", {
+  enumerable: true,
+  get: function get() {
+    return _FormLayout.FormLayout;
+  }
+});
+Object.defineProperty(exports, "FormRow", {
+  enumerable: true,
+  get: function get() {
+    return _FormLayout.FormRow;
+  }
+});
+exports["default"] = void 0;
+Object.defineProperty(exports, "formLayoutCssVars", {
+  enumerable: true,
+  get: function get() {
+    return _config.formLayoutCssVars;
+  }
+});
+Object.defineProperty(exports, "useFormControlSize", {
+  enumerable: true,
+  get: function get() {
+    return _context.useFormControlSize;
+  }
+});
+var _FormLayout = require("./FormLayout");
+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 _config = require("./config");
+var _context = require("./context");
+var _default = exports["default"] = _FormLayout.FormLayout;
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImNvbXBvbmVudHMvc3JjL2NvbXBvbmVudHMvRm9ybUxheW91dC9pbmRleC50cyJdLCJuYW1lcyI6WyJfRm9ybUxheW91dCIsInJlcXVpcmUiLCJfaW50ZXJmYWNlIiwiT2JqZWN0Iiwia2V5cyIsImZvckVhY2giLCJrZXkiLCJwcm90b3R5cGUiLCJoYXNPd25Qcm9wZXJ0eSIsImNhbGwiLCJfZXhwb3J0TmFtZXMiLCJleHBvcnRzIiwiZGVmaW5lUHJvcGVydHkiLCJlbnVtZXJhYmxlIiwiZ2V0IiwiX2NvbmZpZyIsIl9jb250ZXh0IiwiX2RlZmF1bHQiLCJGb3JtTGF5b3V0Il0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUEsSUFBQUEsV0FBQSxHQUFBQyxPQUFBO0FBT0EsSUFBQUMsVUFBQSxHQUFBRCxPQUFBO0FBQUFFLE1BQUEsQ0FBQUMsSUFBQSxDQUFBRixVQUFBLEVBQUFHLE9BQUEsV0FBQUMsR0FBQTtFQUFBLElBQUFBLEdBQUEsa0JBQUFBLEdBQUE7RUFBQSxJQUFBSCxNQUFBLENBQUFJLFNBQUEsQ0FBQUMsY0FBQSxDQUFBQyxJQUFBLENBQUFDLFlBQUEsRUFBQUosR0FBQTtFQUFBLElBQUFBLEdBQUEsSUFBQUssT0FBQSxJQUFBQSxPQUFBLENBQUFMLEdBQUEsTUFBQUosVUFBQSxDQUFBSSxHQUFBO0VBQUFILE1BQUEsQ0FBQVMsY0FBQSxDQUFBRCxPQUFBLEVBQUFMLEdBQUE7SUFBQU8sVUFBQTtJQUFBQyxHQUFBLFdBQUFBLElBQUE7TUFBQSxPQUFBWixVQUFBLENBQUFJLEdBQUE7SUFBQTtFQUFBO0FBQUE7QUFDQSxJQUFBUyxPQUFBLEdBQUFkLE9BQUE7QUFLQSxJQUFBZSxRQUFBLEdBQUFmLE9BQUE7QUFBdUUsSUFBQWdCLFFBQUEsR0FBQU4sT0FBQSxjQVJ4RE8sc0JBQVUiLCJmaWxlIjoiY29tcG9uZW50cy9Gb3JtTGF5b3V0L2luZGV4LmpzIiwic291cmNlc0NvbnRlbnQiOltudWxsXSwic291cmNlUm9vdCI6Ii4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3NyYyJ9

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

@@ -0,0 +1,44 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { FormLayoutVariant } from './config';
+export type { FormLayoutVariant } from './config';
+/**
+ * Form-only surface layout: panel chrome (white surface, hairline border,
+ * radius) + three regions (header with title/extra, fields content, footer)
+ * with variant-driven density. Used directly on pages (`variant="page"`) and
+ * nested inside Dialog for form dialogs (`variant="modal"`).
+ *
+ * Scroll policy is owned here: `modal` pins header/footer and scrolls the
+ * fields region when height-constrained (scrollbar rides the middle of the
+ * right padding); `page` never scrolls internally — content grows the panel.
+ */
+export interface FormLayoutProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Density + scroll-policy variant. */
+    variant?: FormLayoutVariant;
+    /**
+     * Override the variant's scroll policy (modal → `true`, page → `false`).
+     * When `true` the fields region scrolls IF height-constrained (header and
+     * footer stay pinned); when `false` content always grows the panel.
+     */
+    scroll?: boolean;
+    /** Heading; a plain string renders as Headline/md (24px). */
+    title?: ReactNode;
+    /** Trailing slot on the title row (e.g. an environment switcher). */
+    extra?: ReactNode;
+    /** Fields region content. */
+    children?: ReactNode;
+    /** Footer region, typically the action buttons. */
+    footer?: ReactNode;
+    /**
+     * Panel width (number → px). Defaults to the variant's configured width
+     * (modal → 640, page → 738), capped at 100% of the container.
+     */
+    width?: number | string;
+    /**
+     * Explicit height cap (number → px) for standalone usage. Inside a Dialog
+     * the constraint arrives from the panel's own max-height instead — no
+     * measuring or calculation is involved in either path.
+     */
+    maxHeight?: number | string;
+    /** CSS class prefix. */
+    prefixCls?: string;
+}

package/lib/components/FormLayout/interface.js

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

package/lib/components/FormLayout/style/FormLayout.css

@@ -0,0 +1,110 @@
+/**
+  * 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-form-layout {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--form-layout-region-gap);
+  align-items: stretch;
+  width: min(100%, var(--form-layout-width));
+  min-width: 0;
+  padding: var(--form-layout-padding);
+  background-color: var(--om-bg-default, #fff);
+  border: 1px solid var(--om-border-neutral, #e3e4e4);
+  border-radius: var(--om-radius-600, 24px);
+}
+.om-component-ui-form-layout-header {
+  display: flex;
+  flex-shrink: 0;
+  gap: var(--om-spacing-300, 12px);
+  align-items: center;
+  justify-content: space-between;
+  min-width: 0;
+}
+.om-component-ui-form-layout-title {
+  min-width: 0;
+  color: var(--om-text-default, #131313);
+}
+.om-component-ui-form-layout-extra {
+  flex-shrink: 0;
+}
+.om-component-ui-form-layout-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--form-layout-row-gap);
+  min-width: 0;
+}
+.om-component-ui-form-layout:has(.om-component-ui-form-layout-content > form:last-child) .om-component-ui-form-layout-footer {
+  margin-top: calc(var(--form-layout-row-gap) * -1);
+}
+.om-component-ui-form-layout-footer {
+  flex-shrink: 0;
+  width: 100%;
+}
+.om-component-ui-form-layout-row {
+  display: flex;
+  gap: var(--form-layout-row-gap);
+  width: 100%;
+  min-width: 0;
+}
+.om-component-ui-form-layout-cell {
+  flex: 1 1 0;
+  min-width: 0;
+}
+.om-component-ui-form-layout-modal {
+  box-shadow: var(--om-shadow-200, 0 10px 22px rgba(0, 0, 0, 0.1));
+}
+.om-component-ui-form-layout-scrollable {
+  max-height: 100%;
+}
+.om-component-ui-form-layout-scrollable .om-component-ui-form-layout-content {
+  flex: 1 1 auto;
+  min-height: 0;
+  margin-right: calc(var(--form-layout-padding) * -0.5);
+  padding-right: calc(var(--form-layout-padding) * 0.5);
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+.om-component-ui-form-layout-scrollable .om-component-ui-form-layout-content::-webkit-scrollbar {
+  width: 4px;
+}
+.om-component-ui-form-layout-scrollable .om-component-ui-form-layout-content::-webkit-scrollbar-thumb {
+  background-color: transparent;
+  border-radius: 4px;
+}
+@supports not selector(::-webkit-scrollbar) {
+  .om-component-ui-form-layout-scrollable .om-component-ui-form-layout-content {
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+  }
+}
+.om-component-ui-form-layout-scrollable:hover .om-component-ui-form-layout-content::-webkit-scrollbar-thumb,
+.om-component-ui-form-layout-scrollable .om-component-ui-form-layout-content-scrolling::-webkit-scrollbar-thumb {
+  background-color: var(--om-bg-neutral-tertiary-hover, #e3e4e4);
+}
+@supports not selector(::-webkit-scrollbar) {
+  .om-component-ui-form-layout-scrollable:hover .om-component-ui-form-layout-content,
+  .om-component-ui-form-layout-scrollable .om-component-ui-form-layout-content-scrolling {
+    scrollbar-color: var(--om-bg-neutral-tertiary-hover, #e3e4e4) transparent;
+  }
+}

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

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

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

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

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

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

package/lib/components/Grid/Col.d.ts

@@ -1,4 +1,5 @@
 import type { PropsWithChildren } from 'react';
 import type { GridColProps } from './interface';
+import './style';
 export declare const Col: import("react").NamedExoticComponent<PropsWithChildren<GridColProps>>;
 export default Col;