@portnet/ui 6.0.2 → 6.0.3

package/dist/esm/v2/components/Layout.js

@@ -1,20 +1,3 @@
-var _excluded = ["as", "sx", "style", "className", "children"],
-  _excluded2 = ["direction", "gap", "align", "justify", "wrap", "sx", "children"];
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 import * as React from "react";
 import { mq, BREAKPOINT_KEYS } from "../tokens";
 
@@ -73,18 +56,16 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * never emits a media query. Sourced from the canonical breakpoints
  * token (tokens/breakpoints.js) so the order can't drift from the scale
  * wired into the MUI theme. */
-var BP_ORDER = BREAKPOINT_KEYS;
+const BP_ORDER = BREAKPOINT_KEYS;
 function isPlainObject(v) {
-  return v != null && _typeof(v) === "object" && !Array.isArray(v);
+  return v != null && typeof v === "object" && !Array.isArray(v);
 }
 function isBreakpointObject(v) {
   if (!isPlainObject(v)) return false;
   // Treat as responsive only if EVERY key is a known breakpoint name.
   // Avoids misreading a nested style object as a breakpoint map.
-  var keys = Object.keys(v);
-  return keys.length > 0 && keys.every(function (k) {
-    return BP_ORDER.includes(k);
-  });
+  const keys = Object.keys(v);
+  return keys.length > 0 && keys.every(k => BP_ORDER.includes(k));
 }
 
 /**
@@ -113,49 +94,37 @@ function resolveSx(sx) {
 
   // Content-addressed signature. Derived ONCE from the sx so the class
   // and every generated var name are stable across renders/instances.
-  var sig = Math.abs(hashString(JSON.stringify(sx))).toString(36);
+  const sig = Math.abs(hashString(JSON.stringify(sx))).toString(36);
 
   // inlineStyle is the returned CSSProperties; styleWrite is the same
   // object viewed as a keyed record so dynamic string keys can be written
   // (CSSProperties has no string index signature, so the view needs a
   // cast — the two are the SAME object at runtime).
-  var inlineStyle = {};
-  var styleWrite = inlineStyle;
+  const inlineStyle = {};
+  const styleWrite = inlineStyle;
   /* Per-breakpoint declaration buckets, e.g. byBp.md === "--pui-rsp-<sig>-0:row;" */
-  var byBp = {
+  const byBp = {
     xs: "",
     sm: "",
     md: "",
     lg: "",
     xl: ""
   };
-  var hasResponsive = false;
-  var varSeq = 0;
-  for (var _i = 0, _Object$entries = Object.entries(sx); _i < _Object$entries.length; _i++) {
-    var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
-      prop = _Object$entries$_i[0],
-      value = _Object$entries$_i[1];
+  let hasResponsive = false;
+  let varSeq = 0;
+  for (const [prop, value] of Object.entries(sx)) {
     if (isBreakpointObject(value)) {
       hasResponsive = true;
       // Stable, signature-scoped var name (local index, not a global
       // counter). Only ever declared inside `.${className}`, so the name
       // is effectively scoped to elements carrying that class.
-      var varName = "--pui-rsp-".concat(sig, "-").concat(varSeq++);
-      styleWrite[prop] = "var(".concat(varName, ")");
-      var _iterator = _createForOfIteratorHelper(BP_ORDER),
-        _step;
-      try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var bp = _step.value;
-          var bpVal = value[bp];
-          if (bpVal != null) {
-            byBp[bp] += "".concat(varName, ":").concat(bpVal, ";");
-          }
+      const varName = `--pui-rsp-${sig}-${varSeq++}`;
+      styleWrite[prop] = `var(${varName})`;
+      for (const bp of BP_ORDER) {
+        const bpVal = value[bp];
+        if (bpVal != null) {
+          byBp[bp] += `${varName}:${bpVal};`;
         }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
       }
     } else {
       styleWrite[prop] = value;
@@ -163,34 +132,25 @@ function resolveSx(sx) {
   }
   if (!hasResponsive) {
     return {
-      inlineStyle: inlineStyle,
+      inlineStyle,
       css: "",
       className: undefined
     };
   }
-  var className = "pui-rsp-".concat(sig);
-  var css = "";
+  const className = `pui-rsp-${sig}`;
+  let css = "";
   // xs = base (no media query), then ascending min-width queries built
   // by the shared mq.up() helper (single breakpoint→media-query engine).
-  if (byBp.xs) css += ".".concat(className, "{").concat(byBp.xs, "}");
-  var _iterator2 = _createForOfIteratorHelper(["sm", "md", "lg", "xl"]),
-    _step2;
-  try {
-    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-      var _bp = _step2.value;
-      if (byBp[_bp]) {
-        css += "".concat(mq.up(_bp), "{.").concat(className, "{").concat(byBp[_bp], "}}");
-      }
+  if (byBp.xs) css += `.${className}{${byBp.xs}}`;
+  for (const bp of ["sm", "md", "lg", "xl"]) {
+    if (byBp[bp]) {
+      css += `${mq.up(bp)}{.${className}{${byBp[bp]}}}`;
     }
-  } catch (err) {
-    _iterator2.e(err);
-  } finally {
-    _iterator2.f();
   }
   return {
-    inlineStyle: inlineStyle,
-    css: css,
-    className: className
+    inlineStyle,
+    css,
+    className
   };
 }
 
@@ -198,8 +158,8 @@ function resolveSx(sx) {
  * Used to content-address identical sx signatures so their generated
  * class + <style> rule de-duplicate in the DOM. */
 function hashString(str) {
-  var h = 5381;
-  for (var i = 0; i < str.length; i++) {
+  let h = 5381;
+  for (let i = 0; i < str.length; i++) {
     h = h * 33 ^ str.charCodeAt(i);
   }
   return h | 0;
@@ -209,11 +169,11 @@ function hashString(str) {
  * unique className. Idempotent: a second Box with the same sx signature
  * reuses the existing <style>. */
 function useResponsiveStyleInjection(css, className) {
-  React.useInsertionEffect(function () {
+  React.useInsertionEffect(() => {
     if (!css || !className || typeof document === "undefined") return undefined;
-    var id = "pui-rsp-style-".concat(className);
+    const id = `pui-rsp-style-${className}`;
     if (document.getElementById(id)) return undefined;
-    var el = document.createElement("style");
+    const el = document.createElement("style");
     el.id = id;
     el.textContent = css;
     document.head.appendChild(el);
@@ -224,61 +184,65 @@ function useResponsiveStyleInjection(css, className) {
     return undefined;
   }, [css, className]);
 }
-export var Box = /*#__PURE__*/React.forwardRef(function Box(_ref, ref) {
-  var _ref$as = _ref.as,
-    Component = _ref$as === void 0 ? "div" : _ref$as,
-    sx = _ref.sx,
-    style = _ref.style,
-    className = _ref.className,
-    children = _ref.children,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var _React$useMemo = React.useMemo(function () {
-      return resolveSx(sx);
-    }, [sx]),
-    inlineStyle = _React$useMemo.inlineStyle,
-    css = _React$useMemo.css,
-    rspClass = _React$useMemo.className;
+export const Box = /*#__PURE__*/React.forwardRef(function Box({
+  as: Component = "div",
+  sx,
+  style,
+  className,
+  children,
+  ...rest
+}, ref) {
+  const {
+    inlineStyle,
+    css,
+    className: rspClass
+  } = React.useMemo(() => resolveSx(sx), [sx]);
   useResponsiveStyleInjection(css, rspClass);
 
   /* Merge sx-derived inline style + explicit style — style wins. */
-  var merged = inlineStyle && style ? _objectSpread(_objectSpread({}, inlineStyle), style) : inlineStyle ? inlineStyle : style ? style : undefined;
-  var mergedClass = [className, rspClass].filter(Boolean).join(" ") || undefined;
-  return /*#__PURE__*/_jsx(Component, _objectSpread(_objectSpread({
+  const merged = inlineStyle && style ? {
+    ...inlineStyle,
+    ...style
+  } : inlineStyle ? inlineStyle : style ? style : undefined;
+  const mergedClass = [className, rspClass].filter(Boolean).join(" ") || undefined;
+  return /*#__PURE__*/_jsx(Component, {
     ref: ref,
     style: merged,
-    className: mergedClass
-  }, rest), {}, {
+    className: mergedClass,
+    ...rest,
     children: children
-  }));
+  });
 });
-export var Stack = /*#__PURE__*/React.forwardRef(function Stack(_ref2, ref) {
-  var _ref2$direction = _ref2.direction,
-    direction = _ref2$direction === void 0 ? "column" : _ref2$direction,
-    _ref2$gap = _ref2.gap,
-    gap = _ref2$gap === void 0 ? "var(--s-3)" : _ref2$gap,
-    align = _ref2.align,
-    justify = _ref2.justify,
-    _ref2$wrap = _ref2.wrap,
-    wrap = _ref2$wrap === void 0 ? false : _ref2$wrap,
-    sx = _ref2.sx,
-    children = _ref2.children,
-    rest = _objectWithoutProperties(_ref2, _excluded2);
-  var layoutSx = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+export const Stack = /*#__PURE__*/React.forwardRef(function Stack({
+  direction = "column",
+  gap = "var(--s-3)",
+  align,
+  justify,
+  wrap = false,
+  sx,
+  children,
+  ...rest
+}, ref) {
+  const layoutSx = {
     display: "flex",
     flexDirection: direction,
-    gap: gap
-  }, align ? {
-    alignItems: align
-  } : null), justify ? {
-    justifyContent: justify
-  } : null), wrap ? {
-    flexWrap: "wrap"
-  } : null), sx);
-  return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
+    gap,
+    ...(align ? {
+      alignItems: align
+    } : null),
+    ...(justify ? {
+      justifyContent: justify
+    } : null),
+    ...(wrap ? {
+      flexWrap: "wrap"
+    } : null),
+    ...sx
+  };
+  return /*#__PURE__*/_jsx(Box, {
     ref: ref,
-    sx: layoutSx
-  }, rest), {}, {
+    sx: layoutSx,
+    ...rest,
     children: children
-  }));
+  });
 });
 //# sourceMappingURL=Layout.js.map

package/dist/esm/v2/components/Layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.js","names":["React","mq","BREAKPOINT_KEYS","jsx","_jsx","BP_ORDER","isPlainObject","v","_typeof","Array","isArray","isBreakpointObject","keys","Object","length","every","k","includes","resolveSx","sx","inlineStyle","undefined","css","className","sig","Math","abs","hashString","JSON","stringify","toString","styleWrite","byBp","xs","sm","md","lg","xl","hasResponsive","varSeq","_i","_Object$entries","entries","_Object$entries$_i","_slicedToArray","prop","value","varName","concat","_iterator","_createForOfIteratorHelper","_step","s","n","done","bp","bpVal","err","e","f","_iterator2","_step2","up","str","h","i","charCodeAt","useResponsiveStyleInjection","useInsertionEffect","document","id","getElementById","el","createElement","textContent","head","appendChild","Box","forwardRef","_ref","ref","_ref$as","as","Component","style","children","rest","_objectWithoutProperties","_excluded","_React$useMemo","useMemo","rspClass","merged","_objectSpread","mergedClass","filter","Boolean","join","Stack","_ref2","_ref2$direction","direction","_ref2$gap","gap","align","justify","_ref2$wrap","wrap","_excluded2","layoutSx","display","flexDirection","alignItems","justifyContent","flexWrap"],"sources":["../../../../src/lib/v2/components/Layout.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { mq, BREAKPOINT_KEYS } from \"../tokens\";\r\nimport type { Breakpoint } from \"../types/common\";\r\n\r\n/**\r\n * v2.Box / v2.Stack — token-driven layout primitives.\r\n *\r\n * These render through the inline `style` attribute and stay theme-free\r\n * (no MUI theme runtime, no emotion). Tokens flow through CSS variables\r\n * on :root, exactly as before.\r\n *\r\n * Responsive escape hatch (R-RS.4)\r\n * --------------------------------\r\n * Historically `sx` accepted ONLY plain CSS-property values; a\r\n * breakpoint object (`{ xs, sm, md, lg, xl }`) was silently dropped to\r\n * \"[object Object]\" because inline styles can't carry media queries.\r\n * Modules that needed responsive variation were pushed into bespoke,\r\n * per-module CSS files — which fragments the breakpoint contract and\r\n * violates centralisation.\r\n *\r\n * `sx` now ALSO accepts breakpoint objects on any property, resolved\r\n * against the DESIGN-SYSTEM breakpoint TOKENS (tokens/breakpoints.js),\r\n * the same scale wired into the MUI theme. The mechanism is the standard\r\n * \"CSS variable swapped by media query\" technique, kept entirely inside\r\n * the lib so consumers never hand-write a media query:\r\n *\r\n *   <Box sx={{ flexDirection: { xs: \"column\", md: \"row\" }, gap: \"var(--s-3)\" }} />\r\n *\r\n *   →  a generated scoped class sets, for that element only:\r\n *        --pui-rsp-<sig>-0: column;                    (base, mobile-first)\r\n *        ${mq.up(\"md\")} { --pui-rsp-<sig>-0: row }      (md token)\r\n *      and the inline style references flexDirection: var(--pui-rsp-<sig>-0).\r\n *\r\n * `xs` is treated as the base (min-width 0). sm/md/lg/xl emit\r\n * min-width media queries at the token values via mq.up(), so the\r\n * generated queries are byte-identical to theme.breakpoints.up().\r\n *\r\n * The generated class + variable names are CONTENT-ADDRESSED (derived\r\n * from a hash of the sx), so an identical sx signature always produces\r\n * the identical class and the identical <style> rule — injected once and\r\n * shared by every instance and every re-render. (A volatile counter here\r\n * would mint a fresh class + <style> on each render of an inline-sx Box,\r\n * leaking <style> tags into <head> without bound.)\r\n *\r\n * Precedence: `style` (explicit escape hatch) still overrides `sx`.\r\n *\r\n *   <Box as=\"section\" sx={{ display: \"flex\" }} style={{ background: \"var(--surface)\" }} className=\"x\" />\r\n */\r\n\r\n/** A single CSS value, or a per-breakpoint map of CSS values (responsive). */\r\ntype SxValue =\r\n  | string\r\n  | number\r\n  | Partial<Record<Breakpoint, string | number | undefined>>;\r\n\r\n/** Token-driven inline style; each property is a value or a responsive map. */\r\ntype Sx = { [property: string]: SxValue };\r\n\r\n/** Result of splitting an sx into inline style + generated responsive CSS. */\r\ntype ResolvedSx = {\r\n  inlineStyle: React.CSSProperties | undefined;\r\n  css: string;\r\n  className: string | undefined;\r\n};\r\n\r\n/* Token breakpoint keys, ascending. xs is the mobile-first base and\r\n * never emits a media query. Sourced from the canonical breakpoints\r\n * token (tokens/breakpoints.js) so the order can't drift from the scale\r\n * wired into the MUI theme. */\r\nconst BP_ORDER = BREAKPOINT_KEYS;\r\n\r\nfunction isPlainObject(v: unknown): boolean {\r\n  return v != null && typeof v === \"object\" && !Array.isArray(v);\r\n}\r\n\r\nfunction isBreakpointObject(\r\n  v: unknown,\r\n): v is Partial<Record<Breakpoint, string | number | undefined>> {\r\n  if (!isPlainObject(v)) return false;\r\n  // Treat as responsive only if EVERY key is a known breakpoint name.\r\n  // Avoids misreading a nested style object as a breakpoint map.\r\n  const keys = Object.keys(v as Record<string, unknown>);\r\n  return keys.length > 0 && keys.every((k) => (BP_ORDER as readonly string[]).includes(k));\r\n}\r\n\r\n/**\r\n * Split an sx object into:\r\n *   - inlineStyle : plain props written directly (responsive props point\r\n *                   at a generated CSS variable)\r\n *   - css         : a scoped stylesheet string (or \"\" when nothing is\r\n *                   responsive)\r\n *   - className   : the generated scope class (or undefined)\r\n *\r\n * The className and the generated variable names are both derived from a\r\n * single content hash of the sx, so the result is STABLE across renders\r\n * and identical across instances that share the same sx — which is what\r\n * makes the <style> injection idempotent (see useResponsiveStyleInjection).\r\n *\r\n * Returns a stable result for a given sx via useMemo at the call site.\r\n */\r\nfunction resolveSx(sx: Sx | undefined): ResolvedSx {\r\n  if (sx == null || !isPlainObject(sx)) {\r\n    return { inlineStyle: undefined, css: \"\", className: undefined };\r\n  }\r\n\r\n  // Content-addressed signature. Derived ONCE from the sx so the class\r\n  // and every generated var name are stable across renders/instances.\r\n  const sig = Math.abs(hashString(JSON.stringify(sx))).toString(36);\r\n\r\n  // inlineStyle is the returned CSSProperties; styleWrite is the same\r\n  // object viewed as a keyed record so dynamic string keys can be written\r\n  // (CSSProperties has no string index signature, so the view needs a\r\n  // cast — the two are the SAME object at runtime).\r\n  const inlineStyle: React.CSSProperties = {};\r\n  const styleWrite = inlineStyle as unknown as Record<string, string | number | undefined>;\r\n  /* Per-breakpoint declaration buckets, e.g. byBp.md === \"--pui-rsp-<sig>-0:row;\" */\r\n  const byBp: Record<Breakpoint, string> = { xs: \"\", sm: \"\", md: \"\", lg: \"\", xl: \"\" };\r\n  let hasResponsive = false;\r\n  let varSeq = 0;\r\n\r\n  for (const [prop, value] of Object.entries(sx)) {\r\n    if (isBreakpointObject(value)) {\r\n      hasResponsive = true;\r\n      // Stable, signature-scoped var name (local index, not a global\r\n      // counter). Only ever declared inside `.${className}`, so the name\r\n      // is effectively scoped to elements carrying that class.\r\n      const varName = `--pui-rsp-${sig}-${varSeq++}`;\r\n      styleWrite[prop] = `var(${varName})`;\r\n      for (const bp of BP_ORDER) {\r\n        const bpVal = value[bp];\r\n        if (bpVal != null) {\r\n          byBp[bp] += `${varName}:${bpVal};`;\r\n        }\r\n      }\r\n    } else {\r\n      styleWrite[prop] = value;\r\n    }\r\n  }\r\n\r\n  if (!hasResponsive) {\r\n    return { inlineStyle, css: \"\", className: undefined };\r\n  }\r\n\r\n  const className = `pui-rsp-${sig}`;\r\n\r\n  let css = \"\";\r\n  // xs = base (no media query), then ascending min-width queries built\r\n  // by the shared mq.up() helper (single breakpoint→media-query engine).\r\n  if (byBp.xs) css += `.${className}{${byBp.xs}}`;\r\n  for (const bp of [\"sm\", \"md\", \"lg\", \"xl\"] as const) {\r\n    if (byBp[bp]) {\r\n      css += `${mq.up(bp)}{.${className}{${byBp[bp]}}}`;\r\n    }\r\n  }\r\n\r\n  return { inlineStyle, css, className };\r\n}\r\n\r\n/* Small, stable, dependency-free string hash (djb2) for class naming.\r\n * Used to content-address identical sx signatures so their generated\r\n * class + <style> rule de-duplicate in the DOM. */\r\nfunction hashString(str: string): number {\r\n  let h = 5381;\r\n  for (let i = 0; i < str.length; i++) {\r\n    h = (h * 33) ^ str.charCodeAt(i);\r\n  }\r\n  return h | 0;\r\n}\r\n\r\n/* Injects the generated stylesheet for a responsive sx exactly once per\r\n * unique className. Idempotent: a second Box with the same sx signature\r\n * reuses the existing <style>. */\r\nfunction useResponsiveStyleInjection(css: string, className: string | undefined): void {\r\n  React.useInsertionEffect(() => {\r\n    if (!css || !className || typeof document === \"undefined\") return undefined;\r\n    const id = `pui-rsp-style-${className}`;\r\n    if (document.getElementById(id)) return undefined;\r\n    const el = document.createElement(\"style\");\r\n    el.id = id;\r\n    el.textContent = css;\r\n    document.head.appendChild(el);\r\n    // Not removed on unmount: the rule is keyed by content hash and may\r\n    // be shared by sibling instances; leaving it is cheap and avoids a\r\n    // flash if the same sx remounts. The set is bounded by the number of\r\n    // DISTINCT responsive sx signatures in the app, not instances.\r\n    return undefined;\r\n  }, [css, className]);\r\n}\r\n\r\nexport interface BoxProps extends React.HTMLAttributes<HTMLElement> {\r\n  /** Element or component to render. @default \"div\" */\r\n  as?: React.ElementType | undefined;\r\n  /**\r\n   * Token-driven inline style. Each property may be a plain CSS value or a\r\n   * responsive breakpoint map (`{ xs, sm, md, lg, xl }`) resolved against the\r\n   * design-system breakpoint tokens. `style` still overrides `sx`.\r\n   */\r\n  sx?: Sx | undefined;\r\n}\r\n\r\nexport const Box = React.forwardRef<HTMLElement, BoxProps>(function Box(\r\n  { as: Component = \"div\", sx, style, className, children, ...rest },\r\n  ref,\r\n) {\r\n  const { inlineStyle, css, className: rspClass } = React.useMemo(\r\n    () => resolveSx(sx),\r\n    [sx],\r\n  );\r\n  useResponsiveStyleInjection(css, rspClass);\r\n\r\n  /* Merge sx-derived inline style + explicit style — style wins. */\r\n  const merged =\r\n    inlineStyle && style ? { ...inlineStyle, ...style } :\r\n    inlineStyle ? inlineStyle :\r\n    style ? style :\r\n    undefined;\r\n\r\n  const mergedClass = [className, rspClass].filter(Boolean).join(\" \") || undefined;\r\n\r\n  return (\r\n    <Component ref={ref} style={merged} className={mergedClass} {...rest}>\r\n      {children}\r\n    </Component>\r\n  );\r\n});\r\n\r\nexport interface StackProps extends BoxProps {\r\n  /** Flex direction. @default \"column\" */\r\n  direction?: React.CSSProperties[\"flexDirection\"] | undefined;\r\n  /** Gap between children (any CSS length or spacing var). @default \"var(--s-3)\" */\r\n  gap?: string | number | undefined;\r\n  /** align-items. */\r\n  align?: React.CSSProperties[\"alignItems\"] | undefined;\r\n  /** justify-content. */\r\n  justify?: React.CSSProperties[\"justifyContent\"] | undefined;\r\n  /** Set flex-wrap: wrap. @default false */\r\n  wrap?: boolean | undefined;\r\n}\r\n\r\nexport const Stack = React.forwardRef<HTMLElement, StackProps>(function Stack(\r\n  {\r\n    direction = \"column\",\r\n    gap = \"var(--s-3)\",\r\n    align,\r\n    justify,\r\n    wrap = false,\r\n    sx,\r\n    children,\r\n    ...rest\r\n  },\r\n  ref,\r\n) {\r\n  const layoutSx: Sx = {\r\n    display: \"flex\",\r\n    flexDirection: direction,\r\n    gap,\r\n    ...(align    ? { alignItems:     align   } : null),\r\n    ...(justify  ? { justifyContent: justify } : null),\r\n    ...(wrap     ? { flexWrap: \"wrap\" }        : null),\r\n    ...sx,\r\n  };\r\n\r\n  return (\r\n    <Box ref={ref} sx={layoutSx} {...rest}>\r\n      {children}\r\n    </Box>\r\n  );\r\n});\r\n"],"mappings":";;;;;;;;;;;;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,EAAE,EAAEC,eAAe,QAAQ,WAAW;;AAG/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAMA;;AAGA;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAOA;AACA;AACA;AACA;AACA,IAAMC,QAAQ,GAAGH,eAAe;AAEhC,SAASI,aAAaA,CAACC,CAAU,EAAW;EAC1C,OAAOA,CAAC,IAAI,IAAI,IAAIC,OAAA,CAAOD,CAAC,MAAK,QAAQ,IAAI,CAACE,KAAK,CAACC,OAAO,CAACH,CAAC,CAAC;AAChE;AAEA,SAASI,kBAAkBA,CACzBJ,CAAU,EACqD;EAC/D,IAAI,CAACD,aAAa,CAACC,CAAC,CAAC,EAAE,OAAO,KAAK;EACnC;EACA;EACA,IAAMK,IAAI,GAAGC,MAAM,CAACD,IAAI,CAACL,CAA4B,CAAC;EACtD,OAAOK,IAAI,CAACE,MAAM,GAAG,CAAC,IAAIF,IAAI,CAACG,KAAK,CAAC,UAACC,CAAC;IAAA,OAAMX,QAAQ,CAAuBY,QAAQ,CAACD,CAAC,CAAC;EAAA,EAAC;AAC1F;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASE,SAASA,CAACC,EAAkB,EAAc;EACjD,IAAIA,EAAE,IAAI,IAAI,IAAI,CAACb,aAAa,CAACa,EAAE,CAAC,EAAE;IACpC,OAAO;MAAEC,WAAW,EAAEC,SAAS;MAAEC,GAAG,EAAE,EAAE;MAAEC,SAAS,EAAEF;IAAU,CAAC;EAClE;;EAEA;EACA;EACA,IAAMG,GAAG,GAAGC,IAAI,CAACC,GAAG,CAACC,UAAU,CAACC,IAAI,CAACC,SAAS,CAACV,EAAE,CAAC,CAAC,CAAC,CAACW,QAAQ,CAAC,EAAE,CAAC;;EAEjE;EACA;EACA;EACA;EACA,IAAMV,WAAgC,GAAG,CAAC,CAAC;EAC3C,IAAMW,UAAU,GAAGX,WAAqE;EACxF;EACA,IAAMY,IAAgC,GAAG;IAAEC,EAAE,EAAE,EAAE;IAAEC,EAAE,EAAE,EAAE;IAAEC,EAAE,EAAE,EAAE;IAAEC,EAAE,EAAE,EAAE;IAAEC,EAAE,EAAE;EAAG,CAAC;EACnF,IAAIC,aAAa,GAAG,KAAK;EACzB,IAAIC,MAAM,GAAG,CAAC;EAEd,SAAAC,EAAA,MAAAC,eAAA,GAA4B5B,MAAM,CAAC6B,OAAO,CAACvB,EAAE,CAAC,EAAAqB,EAAA,GAAAC,eAAA,CAAA3B,MAAA,EAAA0B,EAAA,IAAE;IAA3C,IAAAG,kBAAA,GAAAC,cAAA,CAAAH,eAAA,CAAAD,EAAA;MAAOK,IAAI,GAAAF,kBAAA;MAAEG,KAAK,GAAAH,kBAAA;IACrB,IAAIhC,kBAAkB,CAACmC,KAAK,CAAC,EAAE;MAC7BR,aAAa,GAAG,IAAI;MACpB;MACA;MACA;MACA,IAAMS,OAAO,gBAAAC,MAAA,CAAgBxB,GAAG,OAAAwB,MAAA,CAAIT,MAAM,EAAE,CAAE;MAC9CR,UAAU,CAACc,IAAI,CAAC,UAAAG,MAAA,CAAUD,OAAO,MAAG;MAAC,IAAAE,SAAA,GAAAC,0BAAA,CACpB7C,QAAQ;QAAA8C,KAAA;MAAA;QAAzB,KAAAF,SAAA,CAAAG,CAAA,MAAAD,KAAA,GAAAF,SAAA,CAAAI,CAAA,IAAAC,IAAA,GAA2B;UAAA,IAAhBC,EAAE,GAAAJ,KAAA,CAAAL,KAAA;UACX,IAAMU,KAAK,GAAGV,KAAK,CAACS,EAAE,CAAC;UACvB,IAAIC,KAAK,IAAI,IAAI,EAAE;YACjBxB,IAAI,CAACuB,EAAE,CAAC,OAAAP,MAAA,CAAOD,OAAO,OAAAC,MAAA,CAAIQ,KAAK,MAAG;UACpC;QACF;MAAC,SAAAC,GAAA;QAAAR,SAAA,CAAAS,CAAA,CAAAD,GAAA;MAAA;QAAAR,SAAA,CAAAU,CAAA;MAAA;IACH,CAAC,MAAM;MACL5B,UAAU,CAACc,IAAI,CAAC,GAAGC,KAAK;IAC1B;EACF;EAEA,IAAI,CAACR,aAAa,EAAE;IAClB,OAAO;MAAElB,WAAW,EAAXA,WAAW;MAAEE,GAAG,EAAE,EAAE;MAAEC,SAAS,EAAEF;IAAU,CAAC;EACvD;EAEA,IAAME,SAAS,cAAAyB,MAAA,CAAcxB,GAAG,CAAE;EAElC,IAAIF,GAAG,GAAG,EAAE;EACZ;EACA;EACA,IAAIU,IAAI,CAACC,EAAE,EAAEX,GAAG,QAAA0B,MAAA,CAAQzB,SAAS,OAAAyB,MAAA,CAAIhB,IAAI,CAACC,EAAE,MAAG;EAAC,IAAA2B,UAAA,GAAAV,0BAAA,CAC/B,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;IAAAW,MAAA;EAAA;IAAzC,KAAAD,UAAA,CAAAR,CAAA,MAAAS,MAAA,GAAAD,UAAA,CAAAP,CAAA,IAAAC,IAAA,GAAoD;MAAA,IAAzCC,GAAE,GAAAM,MAAA,CAAAf,KAAA;MACX,IAAId,IAAI,CAACuB,GAAE,CAAC,EAAE;QACZjC,GAAG,OAAA0B,MAAA,CAAO/C,EAAE,CAAC6D,EAAE,CAACP,GAAE,CAAC,QAAAP,MAAA,CAAKzB,SAAS,OAAAyB,MAAA,CAAIhB,IAAI,CAACuB,GAAE,CAAC,OAAI;MACnD;IACF;EAAC,SAAAE,GAAA;IAAAG,UAAA,CAAAF,CAAA,CAAAD,GAAA;EAAA;IAAAG,UAAA,CAAAD,CAAA;EAAA;EAED,OAAO;IAAEvC,WAAW,EAAXA,WAAW;IAAEE,GAAG,EAAHA,GAAG;IAAEC,SAAS,EAATA;EAAU,CAAC;AACxC;;AAEA;AACA;AACA;AACA,SAASI,UAAUA,CAACoC,GAAW,EAAU;EACvC,IAAIC,CAAC,GAAG,IAAI;EACZ,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGF,GAAG,CAACjD,MAAM,EAAEmD,CAAC,EAAE,EAAE;IACnCD,CAAC,GAAIA,CAAC,GAAG,EAAE,GAAID,GAAG,CAACG,UAAU,CAACD,CAAC,CAAC;EAClC;EACA,OAAOD,CAAC,GAAG,CAAC;AACd;;AAEA;AACA;AACA;AACA,SAASG,2BAA2BA,CAAC7C,GAAW,EAAEC,SAA6B,EAAQ;EACrFvB,KAAK,CAACoE,kBAAkB,CAAC,YAAM;IAC7B,IAAI,CAAC9C,GAAG,IAAI,CAACC,SAAS,IAAI,OAAO8C,QAAQ,KAAK,WAAW,EAAE,OAAOhD,SAAS;IAC3E,IAAMiD,EAAE,oBAAAtB,MAAA,CAAoBzB,SAAS,CAAE;IACvC,IAAI8C,QAAQ,CAACE,cAAc,CAACD,EAAE,CAAC,EAAE,OAAOjD,SAAS;IACjD,IAAMmD,EAAE,GAAGH,QAAQ,CAACI,aAAa,CAAC,OAAO,CAAC;IAC1CD,EAAE,CAACF,EAAE,GAAGA,EAAE;IACVE,EAAE,CAACE,WAAW,GAAGpD,GAAG;IACpB+C,QAAQ,CAACM,IAAI,CAACC,WAAW,CAACJ,EAAE,CAAC;IAC7B;IACA;IACA;IACA;IACA,OAAOnD,SAAS;EAClB,CAAC,EAAE,CAACC,GAAG,EAAEC,SAAS,CAAC,CAAC;AACtB;AAaA,OAAO,IAAMsD,GAAG,gBAAG7E,KAAK,CAAC8E,UAAU,CAAwB,SAASD,GAAGA,CAAAE,IAAA,EAErEC,GAAG,EACH;EAAA,IAAAC,OAAA,GAAAF,IAAA,CAFEG,EAAE;IAAEC,SAAS,GAAAF,OAAA,cAAG,KAAK,GAAAA,OAAA;IAAE9D,EAAE,GAAA4D,IAAA,CAAF5D,EAAE;IAAEiE,KAAK,GAAAL,IAAA,CAALK,KAAK;IAAE7D,SAAS,GAAAwD,IAAA,CAATxD,SAAS;IAAE8D,QAAQ,GAAAN,IAAA,CAARM,QAAQ;IAAKC,IAAI,GAAAC,wBAAA,CAAAR,IAAA,EAAAS,SAAA;EAGhE,IAAAC,cAAA,GAAkDzF,KAAK,CAAC0F,OAAO,CAC7D;MAAA,OAAMxE,SAAS,CAACC,EAAE,CAAC;IAAA,GACnB,CAACA,EAAE,CACL,CAAC;IAHOC,WAAW,GAAAqE,cAAA,CAAXrE,WAAW;IAAEE,GAAG,GAAAmE,cAAA,CAAHnE,GAAG;IAAaqE,QAAQ,GAAAF,cAAA,CAAnBlE,SAAS;EAInC4C,2BAA2B,CAAC7C,GAAG,EAAEqE,QAAQ,CAAC;;EAE1C;EACA,IAAMC,MAAM,GACVxE,WAAW,IAAIgE,KAAK,GAAAS,aAAA,CAAAA,aAAA,KAAQzE,WAAW,GAAKgE,KAAK,IACjDhE,WAAW,GAAGA,WAAW,GACzBgE,KAAK,GAAGA,KAAK,GACb/D,SAAS;EAEX,IAAMyE,WAAW,GAAG,CAACvE,SAAS,EAAEoE,QAAQ,CAAC,CAACI,MAAM,CAACC,OAAO,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC,IAAI5E,SAAS;EAEhF,oBACEjB,IAAA,CAAC+E,SAAS,EAAAU,aAAA,CAAAA,aAAA;IAACb,GAAG,EAAEA,GAAI;IAACI,KAAK,EAAEQ,MAAO;IAACrE,SAAS,EAAEuE;EAAY,GAAKR,IAAI;IAAAD,QAAA,EACjEA;EAAQ,EACA,CAAC;AAEhB,CAAC,CAAC;AAeF,OAAO,IAAMa,KAAK,gBAAGlG,KAAK,CAAC8E,UAAU,CAA0B,SAASoB,KAAKA,CAAAC,KAAA,EAW3EnB,GAAG,EACH;EAAA,IAAAoB,eAAA,GAAAD,KAAA,CAVEE,SAAS;IAATA,SAAS,GAAAD,eAAA,cAAG,QAAQ,GAAAA,eAAA;IAAAE,SAAA,GAAAH,KAAA,CACpBI,GAAG;IAAHA,GAAG,GAAAD,SAAA,cAAG,YAAY,GAAAA,SAAA;IAClBE,KAAK,GAAAL,KAAA,CAALK,KAAK;IACLC,OAAO,GAAAN,KAAA,CAAPM,OAAO;IAAAC,UAAA,GAAAP,KAAA,CACPQ,IAAI;IAAJA,IAAI,GAAAD,UAAA,cAAG,KAAK,GAAAA,UAAA;IACZvF,EAAE,GAAAgF,KAAA,CAAFhF,EAAE;IACFkE,QAAQ,GAAAc,KAAA,CAARd,QAAQ;IACLC,IAAI,GAAAC,wBAAA,CAAAY,KAAA,EAAAS,UAAA;EAIT,IAAMC,QAAY,GAAAhB,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAAA,aAAA;IAChBiB,OAAO,EAAE,MAAM;IACfC,aAAa,EAAEV,SAAS;IACxBE,GAAG,EAAHA;EAAG,GACCC,KAAK,GAAM;IAAEQ,UAAU,EAAMR;EAAQ,CAAC,GAAG,IAAI,GAC7CC,OAAO,GAAI;IAAEQ,cAAc,EAAER;EAAQ,CAAC,GAAG,IAAI,GAC7CE,IAAI,GAAO;IAAEO,QAAQ,EAAE;EAAO,CAAC,GAAU,IAAI,GAC9C/F,EAAE,CACN;EAED,oBACEf,IAAA,CAACyE,GAAG,EAAAgB,aAAA,CAAAA,aAAA;IAACb,GAAG,EAAEA,GAAI;IAAC7D,EAAE,EAAE0F;EAAS,GAAKvB,IAAI;IAAAD,QAAA,EAClCA;EAAQ,EACN,CAAC;AAEV,CAAC,CAAC","ignoreList":[]}
+{"version":3,"file":"Layout.js","names":["React","mq","BREAKPOINT_KEYS","jsx","_jsx","BP_ORDER","isPlainObject","v","Array","isArray","isBreakpointObject","keys","Object","length","every","k","includes","resolveSx","sx","inlineStyle","undefined","css","className","sig","Math","abs","hashString","JSON","stringify","toString","styleWrite","byBp","xs","sm","md","lg","xl","hasResponsive","varSeq","prop","value","entries","varName","bp","bpVal","up","str","h","i","charCodeAt","useResponsiveStyleInjection","useInsertionEffect","document","id","getElementById","el","createElement","textContent","head","appendChild","Box","forwardRef","as","Component","style","children","rest","ref","rspClass","useMemo","merged","mergedClass","filter","Boolean","join","Stack","direction","gap","align","justify","wrap","layoutSx","display","flexDirection","alignItems","justifyContent","flexWrap"],"sources":["../../../../src/lib/v2/components/Layout.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { mq, BREAKPOINT_KEYS } from \"../tokens\";\r\nimport type { Breakpoint } from \"../types/common\";\r\n\r\n/**\r\n * v2.Box / v2.Stack — token-driven layout primitives.\r\n *\r\n * These render through the inline `style` attribute and stay theme-free\r\n * (no MUI theme runtime, no emotion). Tokens flow through CSS variables\r\n * on :root, exactly as before.\r\n *\r\n * Responsive escape hatch (R-RS.4)\r\n * --------------------------------\r\n * Historically `sx` accepted ONLY plain CSS-property values; a\r\n * breakpoint object (`{ xs, sm, md, lg, xl }`) was silently dropped to\r\n * \"[object Object]\" because inline styles can't carry media queries.\r\n * Modules that needed responsive variation were pushed into bespoke,\r\n * per-module CSS files — which fragments the breakpoint contract and\r\n * violates centralisation.\r\n *\r\n * `sx` now ALSO accepts breakpoint objects on any property, resolved\r\n * against the DESIGN-SYSTEM breakpoint TOKENS (tokens/breakpoints.js),\r\n * the same scale wired into the MUI theme. The mechanism is the standard\r\n * \"CSS variable swapped by media query\" technique, kept entirely inside\r\n * the lib so consumers never hand-write a media query:\r\n *\r\n *   <Box sx={{ flexDirection: { xs: \"column\", md: \"row\" }, gap: \"var(--s-3)\" }} />\r\n *\r\n *   →  a generated scoped class sets, for that element only:\r\n *        --pui-rsp-<sig>-0: column;                    (base, mobile-first)\r\n *        ${mq.up(\"md\")} { --pui-rsp-<sig>-0: row }      (md token)\r\n *      and the inline style references flexDirection: var(--pui-rsp-<sig>-0).\r\n *\r\n * `xs` is treated as the base (min-width 0). sm/md/lg/xl emit\r\n * min-width media queries at the token values via mq.up(), so the\r\n * generated queries are byte-identical to theme.breakpoints.up().\r\n *\r\n * The generated class + variable names are CONTENT-ADDRESSED (derived\r\n * from a hash of the sx), so an identical sx signature always produces\r\n * the identical class and the identical <style> rule — injected once and\r\n * shared by every instance and every re-render. (A volatile counter here\r\n * would mint a fresh class + <style> on each render of an inline-sx Box,\r\n * leaking <style> tags into <head> without bound.)\r\n *\r\n * Precedence: `style` (explicit escape hatch) still overrides `sx`.\r\n *\r\n *   <Box as=\"section\" sx={{ display: \"flex\" }} style={{ background: \"var(--surface)\" }} className=\"x\" />\r\n */\r\n\r\n/** A single CSS value, or a per-breakpoint map of CSS values (responsive). */\r\ntype SxValue =\r\n  | string\r\n  | number\r\n  | Partial<Record<Breakpoint, string | number | undefined>>;\r\n\r\n/** Token-driven inline style; each property is a value or a responsive map. */\r\ntype Sx = { [property: string]: SxValue };\r\n\r\n/** Result of splitting an sx into inline style + generated responsive CSS. */\r\ntype ResolvedSx = {\r\n  inlineStyle: React.CSSProperties | undefined;\r\n  css: string;\r\n  className: string | undefined;\r\n};\r\n\r\n/* Token breakpoint keys, ascending. xs is the mobile-first base and\r\n * never emits a media query. Sourced from the canonical breakpoints\r\n * token (tokens/breakpoints.js) so the order can't drift from the scale\r\n * wired into the MUI theme. */\r\nconst BP_ORDER = BREAKPOINT_KEYS;\r\n\r\nfunction isPlainObject(v: unknown): boolean {\r\n  return v != null && typeof v === \"object\" && !Array.isArray(v);\r\n}\r\n\r\nfunction isBreakpointObject(\r\n  v: unknown,\r\n): v is Partial<Record<Breakpoint, string | number | undefined>> {\r\n  if (!isPlainObject(v)) return false;\r\n  // Treat as responsive only if EVERY key is a known breakpoint name.\r\n  // Avoids misreading a nested style object as a breakpoint map.\r\n  const keys = Object.keys(v as Record<string, unknown>);\r\n  return keys.length > 0 && keys.every((k) => (BP_ORDER as readonly string[]).includes(k));\r\n}\r\n\r\n/**\r\n * Split an sx object into:\r\n *   - inlineStyle : plain props written directly (responsive props point\r\n *                   at a generated CSS variable)\r\n *   - css         : a scoped stylesheet string (or \"\" when nothing is\r\n *                   responsive)\r\n *   - className   : the generated scope class (or undefined)\r\n *\r\n * The className and the generated variable names are both derived from a\r\n * single content hash of the sx, so the result is STABLE across renders\r\n * and identical across instances that share the same sx — which is what\r\n * makes the <style> injection idempotent (see useResponsiveStyleInjection).\r\n *\r\n * Returns a stable result for a given sx via useMemo at the call site.\r\n */\r\nfunction resolveSx(sx: Sx | undefined): ResolvedSx {\r\n  if (sx == null || !isPlainObject(sx)) {\r\n    return { inlineStyle: undefined, css: \"\", className: undefined };\r\n  }\r\n\r\n  // Content-addressed signature. Derived ONCE from the sx so the class\r\n  // and every generated var name are stable across renders/instances.\r\n  const sig = Math.abs(hashString(JSON.stringify(sx))).toString(36);\r\n\r\n  // inlineStyle is the returned CSSProperties; styleWrite is the same\r\n  // object viewed as a keyed record so dynamic string keys can be written\r\n  // (CSSProperties has no string index signature, so the view needs a\r\n  // cast — the two are the SAME object at runtime).\r\n  const inlineStyle: React.CSSProperties = {};\r\n  const styleWrite = inlineStyle as unknown as Record<string, string | number | undefined>;\r\n  /* Per-breakpoint declaration buckets, e.g. byBp.md === \"--pui-rsp-<sig>-0:row;\" */\r\n  const byBp: Record<Breakpoint, string> = { xs: \"\", sm: \"\", md: \"\", lg: \"\", xl: \"\" };\r\n  let hasResponsive = false;\r\n  let varSeq = 0;\r\n\r\n  for (const [prop, value] of Object.entries(sx)) {\r\n    if (isBreakpointObject(value)) {\r\n      hasResponsive = true;\r\n      // Stable, signature-scoped var name (local index, not a global\r\n      // counter). Only ever declared inside `.${className}`, so the name\r\n      // is effectively scoped to elements carrying that class.\r\n      const varName = `--pui-rsp-${sig}-${varSeq++}`;\r\n      styleWrite[prop] = `var(${varName})`;\r\n      for (const bp of BP_ORDER) {\r\n        const bpVal = value[bp];\r\n        if (bpVal != null) {\r\n          byBp[bp] += `${varName}:${bpVal};`;\r\n        }\r\n      }\r\n    } else {\r\n      styleWrite[prop] = value;\r\n    }\r\n  }\r\n\r\n  if (!hasResponsive) {\r\n    return { inlineStyle, css: \"\", className: undefined };\r\n  }\r\n\r\n  const className = `pui-rsp-${sig}`;\r\n\r\n  let css = \"\";\r\n  // xs = base (no media query), then ascending min-width queries built\r\n  // by the shared mq.up() helper (single breakpoint→media-query engine).\r\n  if (byBp.xs) css += `.${className}{${byBp.xs}}`;\r\n  for (const bp of [\"sm\", \"md\", \"lg\", \"xl\"] as const) {\r\n    if (byBp[bp]) {\r\n      css += `${mq.up(bp)}{.${className}{${byBp[bp]}}}`;\r\n    }\r\n  }\r\n\r\n  return { inlineStyle, css, className };\r\n}\r\n\r\n/* Small, stable, dependency-free string hash (djb2) for class naming.\r\n * Used to content-address identical sx signatures so their generated\r\n * class + <style> rule de-duplicate in the DOM. */\r\nfunction hashString(str: string): number {\r\n  let h = 5381;\r\n  for (let i = 0; i < str.length; i++) {\r\n    h = (h * 33) ^ str.charCodeAt(i);\r\n  }\r\n  return h | 0;\r\n}\r\n\r\n/* Injects the generated stylesheet for a responsive sx exactly once per\r\n * unique className. Idempotent: a second Box with the same sx signature\r\n * reuses the existing <style>. */\r\nfunction useResponsiveStyleInjection(css: string, className: string | undefined): void {\r\n  React.useInsertionEffect(() => {\r\n    if (!css || !className || typeof document === \"undefined\") return undefined;\r\n    const id = `pui-rsp-style-${className}`;\r\n    if (document.getElementById(id)) return undefined;\r\n    const el = document.createElement(\"style\");\r\n    el.id = id;\r\n    el.textContent = css;\r\n    document.head.appendChild(el);\r\n    // Not removed on unmount: the rule is keyed by content hash and may\r\n    // be shared by sibling instances; leaving it is cheap and avoids a\r\n    // flash if the same sx remounts. The set is bounded by the number of\r\n    // DISTINCT responsive sx signatures in the app, not instances.\r\n    return undefined;\r\n  }, [css, className]);\r\n}\r\n\r\nexport interface BoxProps extends React.HTMLAttributes<HTMLElement> {\r\n  /** Element or component to render. @default \"div\" */\r\n  as?: React.ElementType | undefined;\r\n  /**\r\n   * Token-driven inline style. Each property may be a plain CSS value or a\r\n   * responsive breakpoint map (`{ xs, sm, md, lg, xl }`) resolved against the\r\n   * design-system breakpoint tokens. `style` still overrides `sx`.\r\n   */\r\n  sx?: Sx | undefined;\r\n}\r\n\r\nexport const Box = React.forwardRef<HTMLElement, BoxProps>(function Box(\r\n  { as: Component = \"div\", sx, style, className, children, ...rest },\r\n  ref,\r\n) {\r\n  const { inlineStyle, css, className: rspClass } = React.useMemo(\r\n    () => resolveSx(sx),\r\n    [sx],\r\n  );\r\n  useResponsiveStyleInjection(css, rspClass);\r\n\r\n  /* Merge sx-derived inline style + explicit style — style wins. */\r\n  const merged =\r\n    inlineStyle && style ? { ...inlineStyle, ...style } :\r\n    inlineStyle ? inlineStyle :\r\n    style ? style :\r\n    undefined;\r\n\r\n  const mergedClass = [className, rspClass].filter(Boolean).join(\" \") || undefined;\r\n\r\n  return (\r\n    <Component ref={ref} style={merged} className={mergedClass} {...rest}>\r\n      {children}\r\n    </Component>\r\n  );\r\n});\r\n\r\nexport interface StackProps extends BoxProps {\r\n  /** Flex direction. @default \"column\" */\r\n  direction?: React.CSSProperties[\"flexDirection\"] | undefined;\r\n  /** Gap between children (any CSS length or spacing var). @default \"var(--s-3)\" */\r\n  gap?: string | number | undefined;\r\n  /** align-items. */\r\n  align?: React.CSSProperties[\"alignItems\"] | undefined;\r\n  /** justify-content. */\r\n  justify?: React.CSSProperties[\"justifyContent\"] | undefined;\r\n  /** Set flex-wrap: wrap. @default false */\r\n  wrap?: boolean | undefined;\r\n}\r\n\r\nexport const Stack = React.forwardRef<HTMLElement, StackProps>(function Stack(\r\n  {\r\n    direction = \"column\",\r\n    gap = \"var(--s-3)\",\r\n    align,\r\n    justify,\r\n    wrap = false,\r\n    sx,\r\n    children,\r\n    ...rest\r\n  },\r\n  ref,\r\n) {\r\n  const layoutSx: Sx = {\r\n    display: \"flex\",\r\n    flexDirection: direction,\r\n    gap,\r\n    ...(align    ? { alignItems:     align   } : null),\r\n    ...(justify  ? { justifyContent: justify } : null),\r\n    ...(wrap     ? { flexWrap: \"wrap\" }        : null),\r\n    ...sx,\r\n  };\r\n\r\n  return (\r\n    <Box ref={ref} sx={layoutSx} {...rest}>\r\n      {children}\r\n    </Box>\r\n  );\r\n});\r\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/v2/components/MobileRowCard.js

@@ -1,9 +1,3 @@
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 import * as React from "react";
 import Box from "@mui/material/Box";
 import OverflowMenu from "./OverflowMenu";
@@ -111,13 +105,13 @@ import KV from "./KV";
  *   in a wrapping row.
  */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var CARD_INNER_SX = Object.freeze({
+const CARD_INNER_SX = Object.freeze({
   display: "flex",
   flexDirection: "column",
   gap: "var(--s-2)",
   padding: "var(--s-3)"
 });
-var HEADER_SX = Object.freeze({
+const HEADER_SX = Object.freeze({
   display: "flex",
   alignItems: "flex-start",
   justifyContent: "space-between",
@@ -127,19 +121,19 @@ var HEADER_SX = Object.freeze({
 /* Groups `leading` + title on the left of the header so the kebab keeps its
  * space-between position. `minWidth: 0` is what lets the title's ellipsis
  * actually engage inside a flex child. */
-var HEADER_MAIN_SX = Object.freeze({
+const HEADER_MAIN_SX = Object.freeze({
   display: "flex",
   alignItems: "center",
   gap: "var(--s-2)",
   minWidth: 0,
   flex: 1
 });
-var LEADING_SX = Object.freeze({
+const LEADING_SX = Object.freeze({
   display: "inline-flex",
   alignItems: "center",
   flexShrink: 0
 });
-var TITLE_BASE_SX = Object.freeze({
+const TITLE_BASE_SX = Object.freeze({
   fontWeight: "var(--fw-semibold)",
   fontSize: "var(--text-sm)",
   color: "var(--fg)",
@@ -149,23 +143,24 @@ var TITLE_BASE_SX = Object.freeze({
   textOverflow: "ellipsis",
   whiteSpace: "nowrap"
 });
-var TITLE_MONO_SX = Object.freeze(_objectSpread(_objectSpread({}, TITLE_BASE_SX), {}, {
+const TITLE_MONO_SX = Object.freeze({
+  ...TITLE_BASE_SX,
   fontFamily: "var(--font-mono)"
-}));
-var SUBTITLE_SX = Object.freeze({
+});
+const SUBTITLE_SX = Object.freeze({
   fontSize: "var(--text-sm)",
   color: "var(--fg-muted)",
   overflow: "hidden",
   textOverflow: "ellipsis",
   whiteSpace: "nowrap"
 });
-var CHIPS_SX = Object.freeze({
+const CHIPS_SX = Object.freeze({
   display: "flex",
   alignItems: "center",
   gap: "var(--s-1)",
   flexWrap: "wrap"
 });
-var META_SX = Object.freeze({
+const META_SX = Object.freeze({
   fontSize: "var(--text-xs)",
   color: "var(--fg-subtle)"
 });
@@ -174,7 +169,7 @@ var META_SX = Object.freeze({
  * a single column would be more readable, but 320px is the Charter's narrowest
  * supported breakpoint (§07.2 xs) and two columns still fit there. Matches the
  * MOBILE_CARD_KV_SX both modules converged on independently. */
-var KV_GRID_SX = Object.freeze({
+const KV_GRID_SX = Object.freeze({
   display: "grid",
   gridTemplateColumns: "1fr 1fr",
   gap: "var(--s-2)"
@@ -183,7 +178,7 @@ var KV_GRID_SX = Object.freeze({
 /* Right cluster of the header row: [trailing] then the kebab. One shared
  * wrapper so a card can carry both a visible action and an overflow menu, and
  * so propagation is stopped once for the whole interactive cluster. */
-var HEADER_END_SX = Object.freeze({
+const HEADER_END_SX = Object.freeze({
   display: "inline-flex",
   alignItems: "center",
   gap: "var(--s-1)",
@@ -192,60 +187,56 @@ var HEADER_END_SX = Object.freeze({
 
 /** One label/value pair in the card's `kv` grid. Mirrors v2.KV's own props. */
 
-function MobileRowCard(_ref) {
-  var leading = _ref.leading,
-    trailing = _ref.trailing,
-    title = _ref.title,
-    _ref$titleMono = _ref.titleMono,
-    titleMono = _ref$titleMono === void 0 ? false : _ref$titleMono,
-    subtitle = _ref.subtitle,
-    chips = _ref.chips,
-    kv = _ref.kv,
-    meta = _ref.meta,
-    actions = _ref.actions,
-    actionsAriaLabel = _ref.actionsAriaLabel;
+function MobileRowCard({
+  leading,
+  trailing,
+  title,
+  titleMono = false,
+  subtitle,
+  chips,
+  kv,
+  meta,
+  actions,
+  /* No default — see the prop's doc comment. Forwarded only when the host
+   * supplies one, so OverflowMenu's own default applies otherwise. */
+  actionsAriaLabel
+}) {
   // Filter out divider entries (OverflowMenu separator marks) and
   // null/undefined actions so the kebab only renders when there is
   // at least one real action available.
-  var visibleActions = React.useMemo(function () {
+  const visibleActions = React.useMemo(() => {
     if (!Array.isArray(actions)) return [];
-    return actions.filter(function (a) {
-      return a && !a.divider;
-    });
+    return actions.filter(a => a && !a.divider);
   }, [actions]);
-  var visibleChips = React.useMemo(function () {
+  const visibleChips = React.useMemo(() => {
     if (!Array.isArray(chips)) return [];
     return chips.filter(Boolean);
   }, [chips]);
-  var metaParts = React.useMemo(function () {
+  const metaParts = React.useMemo(() => {
     if (!Array.isArray(meta)) return [];
-    return meta.filter(function (p) {
-      return p != null && p !== "";
-    });
+    return meta.filter(p => p != null && p !== "");
   }, [meta]);
 
   /* Only `label` is required — a pair with an empty value is kept on purpose so
    * KV renders its "—" placeholder and the grid keeps its shape across rows.
    * Entries missing a label are dropped: KV would emit an empty eyebrow and an
    * aria-labelledby pointing at nothing. */
-  var kvPairs = React.useMemo(function () {
+  const kvPairs = React.useMemo(() => {
     if (!Array.isArray(kv)) return [];
-    return kv.filter(function (p) {
-      return p != null && p.label != null && p.label !== "";
-    });
+    return kv.filter(p => p != null && p.label != null && p.label !== "");
   }, [kv]);
-  var hasActions = visibleActions.length > 0;
-  var hasTitle = title != null && title !== "";
-  var hasLeading = leading != null && leading !== "";
-  var hasTrailing = trailing != null && trailing !== "";
-  var hasHeader = hasTitle || hasActions || hasLeading || hasTrailing;
-  var hasSubtitle = subtitle != null && subtitle !== "";
+  const hasActions = visibleActions.length > 0;
+  const hasTitle = title != null && title !== "";
+  const hasLeading = leading != null && leading !== "";
+  const hasTrailing = trailing != null && trailing !== "";
+  const hasHeader = hasTitle || hasActions || hasLeading || hasTrailing;
+  const hasSubtitle = subtitle != null && subtitle !== "";
 
   // Title attribute (native hover tooltip) is set only when the value
   // is a string — wrapping a React node yields a "[object Object]"
   // tooltip which is worse than no tooltip.
-  var titleAttr = typeof title === "string" ? title : undefined;
-  var subtitleAttr = typeof subtitle === "string" ? subtitle : undefined;
+  const titleAttr = typeof title === "string" ? title : undefined;
+  const subtitleAttr = typeof subtitle === "string" ? subtitle : undefined;
   return /*#__PURE__*/_jsxs(Box, {
     sx: CARD_INNER_SX,
     children: [hasHeader && /*#__PURE__*/_jsxs(Box, {
@@ -268,17 +259,16 @@ function MobileRowCard(_ref) {
       // the kebab, doesn't also fire onRowClick.
       _jsxs(Box, {
         sx: HEADER_END_SX,
-        onClick: function onClick(e) {
-          return e.stopPropagation();
-        },
-        onKeyDown: function onKeyDown(e) {
-          return e.stopPropagation();
-        },
-        children: [hasTrailing && trailing, hasActions && /*#__PURE__*/_jsx(OverflowMenu, _objectSpread(_objectSpread({}, actionsAriaLabel !== undefined ? {
-          ariaLabel: actionsAriaLabel
-        } : {}), actions !== undefined ? {
-          actions: actions
-        } : {}))]
+        onClick: e => e.stopPropagation(),
+        onKeyDown: e => e.stopPropagation(),
+        children: [hasTrailing && trailing, hasActions && /*#__PURE__*/_jsx(OverflowMenu, {
+          ...(actionsAriaLabel !== undefined ? {
+            ariaLabel: actionsAriaLabel
+          } : {}),
+          ...(actions !== undefined ? {
+            actions
+          } : {})
+        })]
       })]
     }), hasSubtitle && /*#__PURE__*/_jsx(Box, {
       sx: SUBTITLE_SX,
@@ -286,24 +276,23 @@ function MobileRowCard(_ref) {
       children: subtitle
     }), visibleChips.length > 0 && /*#__PURE__*/_jsx(Box, {
       sx: CHIPS_SX,
-      children: visibleChips.map(function (c, i) {
-        return /*#__PURE__*/_jsx(React.Fragment, {
-          children: c
-        }, i);
-      })
+      children: visibleChips.map((c, i) => /*#__PURE__*/_jsx(React.Fragment, {
+        children: c
+      }, i))
     }), kvPairs.length > 0 && /*#__PURE__*/_jsx(Box, {
       sx: KV_GRID_SX,
-      children: kvPairs.map(function (pair, i) {
-        return /*#__PURE__*/_jsx(KV, _objectSpread(_objectSpread(_objectSpread({
-          label: pair.label
-        }, pair.value !== undefined ? {
+      children: kvPairs.map((pair, i) => /*#__PURE__*/_jsx(KV, {
+        label: pair.label,
+        ...(pair.value !== undefined ? {
           value: pair.value
-        } : {}), pair.mono !== undefined ? {
+        } : {}),
+        ...(pair.mono !== undefined ? {
           mono: pair.mono
-        } : {}), pair.fallback !== undefined ? {
+        } : {}),
+        ...(pair.fallback !== undefined ? {
           fallback: pair.fallback
-        } : {}), i);
-      })
+        } : {})
+      }, i))
     }), metaParts.length > 0 && /*#__PURE__*/_jsx(Box, {
       sx: META_SX,
       children: metaParts.join(" · ")