@activecollab/components 2.0.363 → 2.0.364

package/dist/cjs/presentation/stackedCard/resizePolicy.js

@@ -0,0 +1,183 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.snap = exports.measurePercent = exports.makeStart = exports.keyboardResize = exports.isResizeKey = exports.effectiveBounds = exports.clamp = exports.applyResize = exports.SHIFT_STEP_MULTIPLIER = exports.RESIZE_KEYS = exports.DEFAULT_KEYBOARD_STEP = void 0;
+/**
+ * StackedCard resize policy — pure math (story-local, presentation-only).
+ *
+ * The card only reports deltas; the HOST applies a resize policy (note 52097
+ * §7). This module is that policy, packaged as pure functions so the SAME code
+ * path serves both the pointer drag and the keyboard resize (task 5/8). Nothing
+ * here touches the DOM, React, or the content — it takes a start size, a delta,
+ * and a policy, and returns a clamped size. The story wires events to it; the
+ * card's intrinsic content minimum is measured story-side and passed in as
+ * `contentMin`, so this module knows nothing about heroes or footers.
+ *
+ * The policy has four parts, all preserved from the concept:
+ *  - bounds        — optional min/max per axis; unset means unbounded.
+ *  - proportional  — lock the aspect ratio captured at the start of the gesture;
+ *                    the scale is clamped by the BINDING axis so the ratio never
+ *                    distorts at a bound.
+ *  - step          — optional grid snap; proportion wins over the grid.
+ *  - content min   — the effective min is max(policyMin, contentMin) per axis,
+ *                    so the card can never be crushed below what its content needs.
+ */
+
+/** The card's intrinsic minimum, measured from its real content. */
+
+/** The size captured at the start of a gesture (pointer down or a key press). */
+
+/** Keyboard resize nudges by the policy step, or this when no step is set. */
+var DEFAULT_KEYBOARD_STEP = exports.DEFAULT_KEYBOARD_STEP = 8;
+
+/** Shift + arrow resizes by a larger increment (the familiar coarse nudge). */
+var SHIFT_STEP_MULTIPLIER = exports.SHIFT_STEP_MULTIPLIER = 4;
+
+/** Keys the separator handles; everything else falls through to the browser. */
+var RESIZE_KEYS = exports.RESIZE_KEYS = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"];
+var isResizeKey = exports.isResizeKey = function isResizeKey(key) {
+  return RESIZE_KEYS.includes(key);
+};
+var clamp = exports.clamp = function clamp(v, lo, hi) {
+  return Math.min(hi !== null && hi !== void 0 ? hi : Number.POSITIVE_INFINITY, Math.max(lo, v));
+};
+var snap = exports.snap = function snap(v, step) {
+  return step && step > 0 ? Math.round(v / step) * step : v;
+};
+var makeStart = exports.makeStart = function makeStart(size, contentMin) {
+  return {
+    w: size.w,
+    h: size.h,
+    contentMin
+  };
+};
+
+/**
+ * The effective bounds a size is clamped to: the policy min floored by the
+ * content min, and the policy max (unbounded when unset). Independent of any
+ * live gesture, so the story can also use it for the aria value and Home/End.
+ */
+var effectiveBounds = exports.effectiveBounds = function effectiveBounds(policy, contentMin) {
+  var _policy$minW, _policy$minH, _policy$maxW, _policy$maxH;
+  return {
+    wMin: Math.max((_policy$minW = policy.minW) !== null && _policy$minW !== void 0 ? _policy$minW : 0, contentMin.w),
+    hMin: Math.max((_policy$minH = policy.minH) !== null && _policy$minH !== void 0 ? _policy$minH : 0, contentMin.h),
+    wMax: (_policy$maxW = policy.maxW) !== null && _policy$maxW !== void 0 ? _policy$maxW : Number.POSITIVE_INFINITY,
+    hMax: (_policy$maxH = policy.maxH) !== null && _policy$maxH !== void 0 ? _policy$maxH : Number.POSITIVE_INFINITY
+  };
+};
+
+/**
+ * Apply a delta to the start size under the policy — the single path for both
+ * inputs. `constrain` is the transient Shift-to-constrain lock: a free-form
+ * policy behaves proportionally for that one gesture; a proportional policy is
+ * already locked and ignores it.
+ */
+var applyResize = exports.applyResize = function applyResize(start, delta, policy) {
+  var opts = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  var _effectiveBounds = effectiveBounds(policy, start.contentMin),
+    wMin = _effectiveBounds.wMin,
+    hMin = _effectiveBounds.hMin,
+    wMax = _effectiveBounds.wMax,
+    hMax = _effectiveBounds.hMax;
+  var proportional = policy.proportional || opts.constrain === true;
+  var w;
+  var h;
+  if (proportional) {
+    // one scale drives both axes; the corner's dominant direction wins, so a
+    // vertical drag is as effective as a horizontal one
+    var sW = (start.w + delta.dx) / start.w;
+    var sH = (start.h + delta.dy) / start.h;
+    var scale = Math.abs(sW - 1) >= Math.abs(sH - 1) ? sW : sH;
+
+    // clamp the SCALE so both axes stay in bounds (binding constraint): the
+    // ratio can never break at a bound — whichever edge is limiting stops both
+    var scaleMin = Math.max(wMin / start.w, hMin / start.h);
+    var scaleMax = Math.min(wMax / start.w, hMax / start.h);
+    scale = clamp(scale, scaleMin, Math.max(scaleMin, scaleMax));
+
+    // step: proportion wins. Snap via the scale (driven off the width edge) and
+    // re-clamp, so ratio and bounds always hold; the grid yields when honoring
+    // it would cost the ratio
+    if (policy.step) {
+      var snappedScale = snap(start.w * scale, policy.step) / start.w;
+      scale = clamp(snappedScale, scaleMin, Math.max(scaleMin, scaleMax));
+    }
+    w = start.w * scale;
+    h = start.h * scale;
+  } else {
+    w = clamp(snap(start.w + delta.dx, policy.step), wMin, wMax);
+    h = clamp(snap(start.h + delta.dy, policy.step), hMin, hMax);
+  }
+  return {
+    w: Math.round(w),
+    h: Math.round(h)
+  };
+};
+
+/**
+ * Translate a resize key into the next size, reusing `applyResize` so the
+ * keyboard clamps exactly like the pointer. Arrows nudge by the step (Shift ×4);
+ * Home/End jump to the min/max of the allowed range. Returns null for any key
+ * the handle does not own.
+ */
+var keyboardResize = exports.keyboardResize = function keyboardResize(key, size, policy, contentMin) {
+  var opts = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
+  var base = policy.step && policy.step > 0 ? policy.step : DEFAULT_KEYBOARD_STEP;
+  var step = base * (opts.shiftKey ? SHIFT_STEP_MULTIPLIER : 1);
+  var start = makeStart(size, contentMin);
+  var b = effectiveBounds(policy, contentMin);
+  switch (key) {
+    case "ArrowRight":
+      return applyResize(start, {
+        dx: step,
+        dy: 0
+      }, policy);
+    case "ArrowLeft":
+      return applyResize(start, {
+        dx: -step,
+        dy: 0
+      }, policy);
+    case "ArrowDown":
+      return applyResize(start, {
+        dx: 0,
+        dy: step
+      }, policy);
+    case "ArrowUp":
+      return applyResize(start, {
+        dx: 0,
+        dy: -step
+      }, policy);
+    case "Home":
+      // jump to the min corner (a huge negative delta clamps to the floor)
+      return applyResize(start, {
+        dx: b.wMin - size.w,
+        dy: b.hMin - size.h
+      }, policy);
+    case "End":
+      // jump to the max corner; an unbounded axis simply doesn't move
+      return applyResize(start, {
+        dx: Number.isFinite(b.wMax) ? b.wMax - size.w : 0,
+        dy: Number.isFinite(b.hMax) ? b.hMax - size.h : 0
+      }, policy);
+    default:
+      return null;
+  }
+};
+
+/**
+ * The handle's `aria-valuenow`: the current size as a percent (0–100) of its
+ * allowed range. The corner resizes both axes, but the value must be a single
+ * number, so it reports the WIDTH axis — the one axis both the fixed-box and the
+ * width-only cards share. Returns 0 when the range isn't finite (no max bound).
+ */
+var measurePercent = exports.measurePercent = function measurePercent(size, policy, contentMin) {
+  var _effectiveBounds2 = effectiveBounds(policy, contentMin),
+    wMin = _effectiveBounds2.wMin,
+    wMax = _effectiveBounds2.wMax;
+  if (!Number.isFinite(wMax) || wMax <= wMin) return 0;
+  return Math.round(clamp((size.w - wMin) / (wMax - wMin) * 100, 0, 100));
+};
+//# sourceMappingURL=resizePolicy.js.map

package/dist/cjs/presentation/stackedCard/resizePolicy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resizePolicy.js","names":["DEFAULT_KEYBOARD_STEP","exports","SHIFT_STEP_MULTIPLIER","RESIZE_KEYS","isResizeKey","key","includes","clamp","v","lo","hi","Math","min","Number","POSITIVE_INFINITY","max","snap","step","round","makeStart","size","contentMin","w","h","effectiveBounds","policy","_policy$minW","_policy$minH","_policy$maxW","_policy$maxH","wMin","minW","hMin","minH","wMax","maxW","hMax","maxH","applyResize","start","delta","opts","arguments","length","undefined","_effectiveBounds","proportional","constrain","sW","dx","sH","dy","scale","abs","scaleMin","scaleMax","snappedScale","keyboardResize","base","shiftKey","b","isFinite","measurePercent","_effectiveBounds2"],"sources":["../../../../src/presentation/stackedCard/resizePolicy.ts"],"sourcesContent":["/**\n * StackedCard resize policy — pure math (story-local, presentation-only).\n *\n * The card only reports deltas; the HOST applies a resize policy (note 52097\n * §7). This module is that policy, packaged as pure functions so the SAME code\n * path serves both the pointer drag and the keyboard resize (task 5/8). Nothing\n * here touches the DOM, React, or the content — it takes a start size, a delta,\n * and a policy, and returns a clamped size. The story wires events to it; the\n * card's intrinsic content minimum is measured story-side and passed in as\n * `contentMin`, so this module knows nothing about heroes or footers.\n *\n * The policy has four parts, all preserved from the concept:\n *  - bounds        — optional min/max per axis; unset means unbounded.\n *  - proportional  — lock the aspect ratio captured at the start of the gesture;\n *                    the scale is clamped by the BINDING axis so the ratio never\n *                    distorts at a bound.\n *  - step          — optional grid snap; proportion wins over the grid.\n *  - content min   — the effective min is max(policyMin, contentMin) per axis,\n *                    so the card can never be crushed below what its content needs.\n */\n\nexport interface Size {\n  w: number;\n  h: number;\n}\n\n/** The card's intrinsic minimum, measured from its real content. */\nexport interface ContentMin {\n  w: number;\n  h: number;\n}\n\nexport interface Policy {\n  minW?: number;\n  maxW?: number;\n  minH?: number;\n  maxH?: number;\n  /** Lock the aspect ratio for the whole gesture. */\n  proportional: boolean;\n  /** Grid snap increment in px; omitted / 0 means continuous. */\n  step?: number;\n}\n\n/** The size captured at the start of a gesture (pointer down or a key press). */\nexport interface ResizeStart {\n  w: number;\n  h: number;\n  contentMin: ContentMin;\n}\n\nexport interface ResizeDelta {\n  dx: number;\n  dy: number;\n}\n\nexport interface EffectiveBounds {\n  wMin: number;\n  wMax: number;\n  hMin: number;\n  hMax: number;\n}\n\n/** Keyboard resize nudges by the policy step, or this when no step is set. */\nexport const DEFAULT_KEYBOARD_STEP = 8;\n\n/** Shift + arrow resizes by a larger increment (the familiar coarse nudge). */\nexport const SHIFT_STEP_MULTIPLIER = 4;\n\n/** Keys the separator handles; everything else falls through to the browser. */\nexport const RESIZE_KEYS: ReadonlyArray<string> = [\n  \"ArrowLeft\",\n  \"ArrowRight\",\n  \"ArrowUp\",\n  \"ArrowDown\",\n  \"Home\",\n  \"End\",\n];\n\nexport const isResizeKey = (key: string): boolean => RESIZE_KEYS.includes(key);\n\nexport const clamp = (v: number, lo: number, hi?: number): number =>\n  Math.min(hi ?? Number.POSITIVE_INFINITY, Math.max(lo, v));\n\nexport const snap = (v: number, step?: number): number =>\n  step && step > 0 ? Math.round(v / step) * step : v;\n\nexport const makeStart = (size: Size, contentMin: ContentMin): ResizeStart => ({\n  w: size.w,\n  h: size.h,\n  contentMin,\n});\n\n/**\n * The effective bounds a size is clamped to: the policy min floored by the\n * content min, and the policy max (unbounded when unset). Independent of any\n * live gesture, so the story can also use it for the aria value and Home/End.\n */\nexport const effectiveBounds = (\n  policy: Policy,\n  contentMin: ContentMin\n): EffectiveBounds => ({\n  wMin: Math.max(policy.minW ?? 0, contentMin.w),\n  hMin: Math.max(policy.minH ?? 0, contentMin.h),\n  wMax: policy.maxW ?? Number.POSITIVE_INFINITY,\n  hMax: policy.maxH ?? Number.POSITIVE_INFINITY,\n});\n\n/**\n * Apply a delta to the start size under the policy — the single path for both\n * inputs. `constrain` is the transient Shift-to-constrain lock: a free-form\n * policy behaves proportionally for that one gesture; a proportional policy is\n * already locked and ignores it.\n */\nexport const applyResize = (\n  start: ResizeStart,\n  delta: ResizeDelta,\n  policy: Policy,\n  opts: { constrain?: boolean } = {}\n): Size => {\n  const { wMin, hMin, wMax, hMax } = effectiveBounds(policy, start.contentMin);\n  const proportional = policy.proportional || opts.constrain === true;\n\n  let w: number;\n  let h: number;\n\n  if (proportional) {\n    // one scale drives both axes; the corner's dominant direction wins, so a\n    // vertical drag is as effective as a horizontal one\n    const sW = (start.w + delta.dx) / start.w;\n    const sH = (start.h + delta.dy) / start.h;\n    let scale = Math.abs(sW - 1) >= Math.abs(sH - 1) ? sW : sH;\n\n    // clamp the SCALE so both axes stay in bounds (binding constraint): the\n    // ratio can never break at a bound — whichever edge is limiting stops both\n    const scaleMin = Math.max(wMin / start.w, hMin / start.h);\n    const scaleMax = Math.min(wMax / start.w, hMax / start.h);\n    scale = clamp(scale, scaleMin, Math.max(scaleMin, scaleMax));\n\n    // step: proportion wins. Snap via the scale (driven off the width edge) and\n    // re-clamp, so ratio and bounds always hold; the grid yields when honoring\n    // it would cost the ratio\n    if (policy.step) {\n      const snappedScale = snap(start.w * scale, policy.step) / start.w;\n      scale = clamp(snappedScale, scaleMin, Math.max(scaleMin, scaleMax));\n    }\n\n    w = start.w * scale;\n    h = start.h * scale;\n  } else {\n    w = clamp(snap(start.w + delta.dx, policy.step), wMin, wMax);\n    h = clamp(snap(start.h + delta.dy, policy.step), hMin, hMax);\n  }\n\n  return { w: Math.round(w), h: Math.round(h) };\n};\n\n/**\n * Translate a resize key into the next size, reusing `applyResize` so the\n * keyboard clamps exactly like the pointer. Arrows nudge by the step (Shift ×4);\n * Home/End jump to the min/max of the allowed range. Returns null for any key\n * the handle does not own.\n */\nexport const keyboardResize = (\n  key: string,\n  size: Size,\n  policy: Policy,\n  contentMin: ContentMin,\n  opts: { shiftKey?: boolean } = {}\n): Size | null => {\n  const base =\n    policy.step && policy.step > 0 ? policy.step : DEFAULT_KEYBOARD_STEP;\n  const step = base * (opts.shiftKey ? SHIFT_STEP_MULTIPLIER : 1);\n  const start = makeStart(size, contentMin);\n  const b = effectiveBounds(policy, contentMin);\n\n  switch (key) {\n    case \"ArrowRight\":\n      return applyResize(start, { dx: step, dy: 0 }, policy);\n    case \"ArrowLeft\":\n      return applyResize(start, { dx: -step, dy: 0 }, policy);\n    case \"ArrowDown\":\n      return applyResize(start, { dx: 0, dy: step }, policy);\n    case \"ArrowUp\":\n      return applyResize(start, { dx: 0, dy: -step }, policy);\n    case \"Home\":\n      // jump to the min corner (a huge negative delta clamps to the floor)\n      return applyResize(\n        start,\n        { dx: b.wMin - size.w, dy: b.hMin - size.h },\n        policy\n      );\n    case \"End\":\n      // jump to the max corner; an unbounded axis simply doesn't move\n      return applyResize(\n        start,\n        {\n          dx: Number.isFinite(b.wMax) ? b.wMax - size.w : 0,\n          dy: Number.isFinite(b.hMax) ? b.hMax - size.h : 0,\n        },\n        policy\n      );\n    default:\n      return null;\n  }\n};\n\n/**\n * The handle's `aria-valuenow`: the current size as a percent (0–100) of its\n * allowed range. The corner resizes both axes, but the value must be a single\n * number, so it reports the WIDTH axis — the one axis both the fixed-box and the\n * width-only cards share. Returns 0 when the range isn't finite (no max bound).\n */\nexport const measurePercent = (\n  size: Size,\n  policy: Policy,\n  contentMin: ContentMin\n): number => {\n  const { wMin, wMax } = effectiveBounds(policy, contentMin);\n  if (!Number.isFinite(wMax) || wMax <= wMin) return 0;\n  return Math.round(clamp(((size.w - wMin) / (wMax - wMin)) * 100, 0, 100));\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/presentation/stackedCard/shell.js

@@ -0,0 +1,165 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StackedCard = exports.ResizeHandleGlyph = exports.COVER_RATIO_SWATCH = exports.COVER_RATIO_IMAGE = exports.COVER_RATIO_HERO = exports.COVER_RATIO = exports.CARD_WIDTH = exports.CARD_RADIUS = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _excluded = ["selected", "disabled", "pending", "isDragSource", "isDragPreview", "entered", "forceHover", "resizable", "priorityColor", "onResizeDelta", "children"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+/**
+ * StackedCard shell (story-local, presentation-only).
+ *
+ * The hollow frame every typed content component composes. Extracted from the
+ * concept spec story (task 2/8) so the StackedCard concept stories share one
+ * shell instead of re-declaring it. The rule the whole subsystem hangs on:
+ *
+ *   THE SHELL STAYS HOLLOW.
+ *
+ * There is no `contentType` enum here, no per-type prop soup, no `if task …`.
+ * The shell owns only VISUAL STATES (selected, disabled, pending, priority,
+ * drag source/preview, entered) and the intent surface (`onResizeDelta`, the
+ * DOM props it forwards). Content — a task, a link, an image, a swatch, a note
+ * — is passed in as `children` and composes the layout primitives. A new
+ * content type later is a new wrapper, with ZERO changes in this file.
+ *
+ * Not exported from the design-system barrel; it lives here so the concept
+ * stories share one source of truth.
+ */
+
+/* ------------------------------------------------------------------ */
+/* Reference dimensions (from the concept)                             */
+/* ------------------------------------------------------------------ */
+
+var CARD_WIDTH = exports.CARD_WIDTH = 260;
+var CARD_RADIUS = exports.CARD_RADIUS = 8;
+
+/* Cover heights are reserved with aspect-ratio (width / height) so a late image
+   never reflows the card. Per-type ratios live with the shell so every content
+   component reserves the same space its skeleton does. */
+var COVER_RATIO = exports.COVER_RATIO = "260 / 132";
+var COVER_RATIO_HERO = exports.COVER_RATIO_HERO = "320 / 190";
+var COVER_RATIO_IMAGE = exports.COVER_RATIO_IMAGE = "260 / 168";
+var COVER_RATIO_SWATCH = exports.COVER_RATIO_SWATCH = "260 / 104";
+
+/* ------------------------------------------------------------------ */
+/* Shell chrome                                                        */
+/* ------------------------------------------------------------------ */
+
+var hoverStyle = (0, _styledComponents.css)(["box-shadow:0 4px 12px rgba(0,0,0,0.12);border-color:var(--color-theme-500);"]);
+
+/* Controls (cover + entity) share one reveal rule: hidden until the card is
+   hovered OR holds focus, so they are reachable by keyboard, not mouse-only.
+   The cover also reveals its own controls; `&&` gives the forced-on state the
+   specificity to win over that resting rule. */
+var revealControls = (0, _styledComponents.css)([".sc-control{opacity:0;transition:opacity 120ms ease;}&:hover .sc-control,&:focus-within .sc-control{opacity:1;}"]);
+var StyledCard = _styledComponents.default.div.withConfig({
+  displayName: "shell__StyledCard",
+  componentId: "sc-nmi1iu-0"
+})(["position:relative;display:flex;flex-direction:column;width:", "px;border-radius:", "px;background-color:var(--page-paper-main);border:1px solid var(--border-primary);box-shadow:0 1px 3px rgba(0,0,0,0.08);overflow:hidden;transition:box-shadow 150ms ease,border-color 150ms ease;", " &:hover{", "}&:focus-visible{outline:none;", " box-shadow:0 0 0 2px var(--sc-selection-ring);}", " ", " ", " ", " ", " ", " ", " ", ""], CARD_WIDTH, CARD_RADIUS, revealControls, hoverStyle, hoverStyle, function (_ref) {
+  var $forceHover = _ref.$forceHover;
+  return $forceHover && (0, _styledComponents.css)(["", " && .sc-control{opacity:1;}"], hoverStyle);
+}, function (_ref2) {
+  var $priorityColor = _ref2.$priorityColor;
+  return $priorityColor && (0, _styledComponents.css)(["&::before{content:\"\";position:absolute;top:0;bottom:0;left:0;width:4px;background:", ";z-index:2;}"], $priorityColor);
+}, function (_ref3) {
+  var $selected = _ref3.$selected;
+  return $selected && (0, _styledComponents.css)(["border-color:var(--sc-selection-ring);box-shadow:0 0 0 2px var(--sc-selection-ring);"]);
+}, function (_ref4) {
+  var $disabled = _ref4.$disabled;
+  return $disabled && (0, _styledComponents.css)(["opacity:0.5;pointer-events:none;"]);
+}, function (_ref5) {
+  var $pending = _ref5.$pending;
+  return $pending && (0, _styledComponents.css)(["opacity:0.6;pointer-events:none;cursor:progress;"]);
+}, function (_ref6) {
+  var $isDragSource = _ref6.$isDragSource;
+  return $isDragSource && (0, _styledComponents.css)(["background:transparent;border:1px dashed var(--color-theme-500);box-shadow:none;&:hover{box-shadow:none;border-color:var(--color-theme-500);}> *{visibility:hidden;}"]);
+}, function (_ref7) {
+  var $isDragPreview = _ref7.$isDragPreview;
+  return $isDragPreview && (0, _styledComponents.css)(["box-shadow:0 12px 28px rgba(0,0,0,0.24);cursor:grabbing;"]);
+}, function (_ref8) {
+  var $entered = _ref8.$entered;
+  return $entered && (0, _styledComponents.css)(["&&{border-color:var(--sc-selection-ring);box-shadow:inset 0 0 0 2px var(--sc-selection-ring),0 0 0 2px var(--sc-selection-ring);}"]);
+});
+
+/* ------------------------------------------------------------------ */
+/* Resize (opt-in): handle on hover, card reports deltas               */
+/* ------------------------------------------------------------------ */
+
+var StyledResizeHandle = _styledComponents.default.span.withConfig({
+  displayName: "shell__StyledResizeHandle",
+  componentId: "sc-nmi1iu-1"
+})(["position:absolute;right:2px;bottom:2px;width:14px;height:14px;cursor:nwse-resize;color:var(--color-theme-600);z-index:2;svg{display:block;}"]);
+var ResizeHandleGlyph = exports.ResizeHandleGlyph = function ResizeHandleGlyph() {
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M12 6v6H6M12 9.5L9.5 12",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round"
+  }));
+};
+/* The shell forwards its ref and spreads DOM props (tabIndex, role, aria-*, the
+   keyboard/click handlers) so the focus-model and open-vs-select demos can
+   drive it — but it owns NO drag, selection, or content logic itself. */
+var StackedCard = exports.StackedCard = /*#__PURE__*/_react.default.forwardRef(function (_ref9, ref) {
+  var selected = _ref9.selected,
+    disabled = _ref9.disabled,
+    pending = _ref9.pending,
+    isDragSource = _ref9.isDragSource,
+    isDragPreview = _ref9.isDragPreview,
+    entered = _ref9.entered,
+    forceHover = _ref9.forceHover,
+    resizable = _ref9.resizable,
+    priorityColor = _ref9.priorityColor,
+    onResizeDelta = _ref9.onResizeDelta,
+    children = _ref9.children,
+    rest = _objectWithoutProperties(_ref9, _excluded);
+  var dragOrigin = (0, _react.useRef)(null);
+  var handlePointerDown = (0, _react.useCallback)(function (e) {
+    dragOrigin.current = {
+      x: e.clientX,
+      y: e.clientY
+    };
+    e.target.setPointerCapture(e.pointerId);
+    e.preventDefault();
+  }, []);
+  var handlePointerMove = (0, _react.useCallback)(function (e) {
+    if (!dragOrigin.current || !onResizeDelta) return;
+    onResizeDelta(e.clientX - dragOrigin.current.x, e.clientY - dragOrigin.current.y);
+    dragOrigin.current = {
+      x: e.clientX,
+      y: e.clientY
+    };
+  }, [onResizeDelta]);
+  var handlePointerUp = (0, _react.useCallback)(function () {
+    dragOrigin.current = null;
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(StyledCard, _extends({
+    ref: ref,
+    $selected: selected,
+    $disabled: disabled,
+    $pending: pending,
+    $isDragSource: isDragSource,
+    $isDragPreview: isDragPreview,
+    $entered: entered,
+    $forceHover: forceHover,
+    $priorityColor: priorityColor
+  }, rest), children, resizable ? /*#__PURE__*/_react.default.createElement(StyledResizeHandle, {
+    className: "sc-control",
+    onPointerDown: handlePointerDown,
+    onPointerMove: handlePointerMove,
+    onPointerUp: handlePointerUp
+  }, /*#__PURE__*/_react.default.createElement(ResizeHandleGlyph, null)) : null);
+});
+StackedCard.displayName = "StackedCard";
+//# sourceMappingURL=shell.js.map

package/dist/cjs/presentation/stackedCard/shell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shell.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_excluded","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","_objectWithoutProperties","_objectWithoutPropertiesLoose","getOwnPropertySymbols","indexOf","propertyIsEnumerable","CARD_WIDTH","exports","CARD_RADIUS","COVER_RATIO","COVER_RATIO_HERO","COVER_RATIO_IMAGE","COVER_RATIO_SWATCH","hoverStyle","css","revealControls","StyledCard","styled","div","withConfig","displayName","componentId","_ref","$forceHover","_ref2","$priorityColor","_ref3","$selected","_ref4","$disabled","_ref5","$pending","_ref6","$isDragSource","_ref7","$isDragPreview","_ref8","$entered","StyledResizeHandle","span","ResizeHandleGlyph","createElement","width","height","viewBox","fill","d","stroke","strokeWidth","strokeLinecap","StackedCard","React","forwardRef","_ref9","ref","selected","disabled","pending","isDragSource","isDragPreview","entered","forceHover","resizable","priorityColor","onResizeDelta","children","rest","dragOrigin","useRef","handlePointerDown","useCallback","current","x","clientX","y","clientY","target","setPointerCapture","pointerId","preventDefault","handlePointerMove","handlePointerUp","className","onPointerDown","onPointerMove","onPointerUp"],"sources":["../../../../src/presentation/stackedCard/shell.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode, useCallback, useRef } from \"react\";\n\nimport styled, { css } from \"styled-components\";\n\n/**\n * StackedCard shell (story-local, presentation-only).\n *\n * The hollow frame every typed content component composes. Extracted from the\n * concept spec story (task 2/8) so the StackedCard concept stories share one\n * shell instead of re-declaring it. The rule the whole subsystem hangs on:\n *\n *   THE SHELL STAYS HOLLOW.\n *\n * There is no `contentType` enum here, no per-type prop soup, no `if task …`.\n * The shell owns only VISUAL STATES (selected, disabled, pending, priority,\n * drag source/preview, entered) and the intent surface (`onResizeDelta`, the\n * DOM props it forwards). Content — a task, a link, an image, a swatch, a note\n * — is passed in as `children` and composes the layout primitives. A new\n * content type later is a new wrapper, with ZERO changes in this file.\n *\n * Not exported from the design-system barrel; it lives here so the concept\n * stories share one source of truth.\n */\n\n/* ------------------------------------------------------------------ */\n/* Reference dimensions (from the concept)                             */\n/* ------------------------------------------------------------------ */\n\nexport const CARD_WIDTH = 260;\nexport const CARD_RADIUS = 8;\n\n/* Cover heights are reserved with aspect-ratio (width / height) so a late image\n   never reflows the card. Per-type ratios live with the shell so every content\n   component reserves the same space its skeleton does. */\nexport const COVER_RATIO = \"260 / 132\";\nexport const COVER_RATIO_HERO = \"320 / 190\";\nexport const COVER_RATIO_IMAGE = \"260 / 168\";\nexport const COVER_RATIO_SWATCH = \"260 / 104\";\n\n/* ------------------------------------------------------------------ */\n/* Shell chrome                                                        */\n/* ------------------------------------------------------------------ */\n\ninterface StyledCardProps {\n  $selected?: boolean;\n  $disabled?: boolean;\n  $pending?: boolean;\n  $isDragSource?: boolean;\n  $isDragPreview?: boolean;\n  $entered?: boolean;\n  $forceHover?: boolean;\n  $priorityColor?: string;\n}\n\nconst hoverStyle = css`\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);\n  border-color: var(--color-theme-500);\n`;\n\n/* Controls (cover + entity) share one reveal rule: hidden until the card is\n   hovered OR holds focus, so they are reachable by keyboard, not mouse-only.\n   The cover also reveals its own controls; `&&` gives the forced-on state the\n   specificity to win over that resting rule. */\nconst revealControls = css`\n  .sc-control {\n    opacity: 0;\n    transition: opacity 120ms ease;\n  }\n\n  &:hover .sc-control,\n  &:focus-within .sc-control {\n    opacity: 1;\n  }\n`;\n\nconst StyledCard = styled.div<StyledCardProps>`\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: ${CARD_WIDTH}px;\n  border-radius: ${CARD_RADIUS}px;\n  background-color: var(--page-paper-main);\n  border: 1px solid var(--border-primary);\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n  overflow: hidden;\n  transition: box-shadow 150ms ease, border-color 150ms ease;\n\n  ${revealControls}\n\n  &:hover {\n    ${hoverStyle}\n  }\n\n  &:focus-visible {\n    outline: none;\n    ${hoverStyle}\n    box-shadow: 0 0 0 2px var(--sc-selection-ring);\n  }\n\n  ${({ $forceHover }) =>\n    $forceHover &&\n    css`\n      ${hoverStyle}\n      && .sc-control {\n        opacity: 1;\n      }\n    `}\n\n  ${({ $priorityColor }) =>\n    $priorityColor &&\n    css`\n      &::before {\n        content: \"\";\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        width: 4px;\n        background: ${$priorityColor};\n        z-index: 2;\n      }\n    `}\n\n  ${({ $selected }) =>\n    $selected &&\n    css`\n      border-color: var(--sc-selection-ring);\n      box-shadow: 0 0 0 2px var(--sc-selection-ring);\n    `}\n\n  ${({ $disabled }) =>\n    $disabled &&\n    css`\n      opacity: 0.5;\n      pointer-events: none;\n    `}\n\n  /* Pending / optimistic — the card was just created or moved and the server\n     has not confirmed it yet. Dimmed, non-interactive and NOT draggable, but\n     distinct from disabled (it is a transient in-flight state, not a policy). */\n  ${({ $pending }) =>\n    $pending &&\n    css`\n      opacity: 0.6;\n      pointer-events: none;\n      cursor: progress;\n    `}\n\n  /* Drag SOURCE — full-size outline placeholder. Content is hidden but keeps\n     its box (visibility, not display) so the card holds identical dimensions\n     and the surrounding cards never move. */\n  ${({ $isDragSource }) =>\n    $isDragSource &&\n    css`\n      background: transparent;\n      border: 1px dashed var(--color-theme-500);\n      box-shadow: none;\n\n      &:hover {\n        box-shadow: none;\n        border-color: var(--color-theme-500);\n      }\n\n      > * {\n        visibility: hidden;\n      }\n    `}\n\n  /* Drag PREVIEW — the 1:1 copy the host floats in the drag layer. Elevated\n     shadow ONLY: no rotate, no scale, no translate. */\n  ${({ $isDragPreview }) =>\n    $isDragPreview &&\n    css`\n      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);\n      cursor: grabbing;\n    `}\n\n  /* Entered (focus model) — focus is on one of the card's inner controls. */\n  ${({ $entered }) =>\n    $entered &&\n    css`\n      && {\n        border-color: var(--sc-selection-ring);\n        box-shadow: inset 0 0 0 2px var(--sc-selection-ring),\n          0 0 0 2px var(--sc-selection-ring);\n      }\n    `}\n`;\n\n/* ------------------------------------------------------------------ */\n/* Resize (opt-in): handle on hover, card reports deltas               */\n/* ------------------------------------------------------------------ */\n\nconst StyledResizeHandle = styled.span`\n  position: absolute;\n  right: 2px;\n  bottom: 2px;\n  width: 14px;\n  height: 14px;\n  cursor: nwse-resize;\n  color: var(--color-theme-600);\n  z-index: 2;\n\n  svg {\n    display: block;\n  }\n`;\n\nexport const ResizeHandleGlyph = (): ReactElement => (\n  <svg\n    width=\"14\"\n    height=\"14\"\n    viewBox=\"0 0 14 14\"\n    fill=\"none\"\n    aria-hidden=\"true\"\n  >\n    <path\n      d=\"M12 6v6H6M12 9.5L9.5 12\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n    />\n  </svg>\n);\n\nexport interface StackedCardProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onResize\"> {\n  selected?: boolean;\n  disabled?: boolean;\n  /** Optimistic in-flight state — dimmed, non-interactive, not draggable. */\n  pending?: boolean;\n  /** Full-size outline placeholder left in the source position while dragging. */\n  isDragSource?: boolean;\n  /** The 1:1 elevated copy the host floats in the drag layer. */\n  isDragPreview?: boolean;\n  /** Focus model: the card has been entered and focus is on an inner control. */\n  entered?: boolean;\n  forceHover?: boolean;\n  resizable?: boolean;\n  priorityColor?: string;\n  onResizeDelta?: (dx: number, dy: number) => void;\n  children: ReactNode;\n}\n\n/* The shell forwards its ref and spreads DOM props (tabIndex, role, aria-*, the\n   keyboard/click handlers) so the focus-model and open-vs-select demos can\n   drive it — but it owns NO drag, selection, or content logic itself. */\nexport const StackedCard = React.forwardRef<HTMLDivElement, StackedCardProps>(\n  (\n    {\n      selected,\n      disabled,\n      pending,\n      isDragSource,\n      isDragPreview,\n      entered,\n      forceHover,\n      resizable,\n      priorityColor,\n      onResizeDelta,\n      children,\n      ...rest\n    },\n    ref\n  ): ReactElement => {\n    const dragOrigin = useRef<{ x: number; y: number } | null>(null);\n\n    const handlePointerDown = useCallback((e: React.PointerEvent) => {\n      dragOrigin.current = { x: e.clientX, y: e.clientY };\n      (e.target as HTMLElement).setPointerCapture(e.pointerId);\n      e.preventDefault();\n    }, []);\n\n    const handlePointerMove = useCallback(\n      (e: React.PointerEvent) => {\n        if (!dragOrigin.current || !onResizeDelta) return;\n        onResizeDelta(\n          e.clientX - dragOrigin.current.x,\n          e.clientY - dragOrigin.current.y\n        );\n        dragOrigin.current = { x: e.clientX, y: e.clientY };\n      },\n      [onResizeDelta]\n    );\n\n    const handlePointerUp = useCallback(() => {\n      dragOrigin.current = null;\n    }, []);\n\n    return (\n      <StyledCard\n        ref={ref}\n        $selected={selected}\n        $disabled={disabled}\n        $pending={pending}\n        $isDragSource={isDragSource}\n        $isDragPreview={isDragPreview}\n        $entered={entered}\n        $forceHover={forceHover}\n        $priorityColor={priorityColor}\n        {...rest}\n      >\n        {children}\n        {resizable ? (\n          <StyledResizeHandle\n            className=\"sc-control\"\n            onPointerDown={handlePointerDown}\n            onPointerMove={handlePointerMove}\n            onPointerUp={handlePointerUp}\n          >\n            <ResizeHandleGlyph />\n          </StyledResizeHandle>\n        ) : null}\n      </StyledCard>\n    );\n  }\n);\n\nStackedCard.displayName = \"StackedCard\";\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/presentation/stackedCard/storyScaffold.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledSheet = exports.StyledGrid = exports.StyledColumn = exports.SheetHeading = exports.Section = exports.Labeled = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Typography = require("../../components/Typography");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Shared spec-sheet scaffolding for the StackedCard concept stories (Sheet,
+ * Section, Labeled, Grid, Column) plus the DS token candidates the subsystem
+ * needs. Presentation-only; keeps the three StackedCard stories laying out the
+ * same way instead of each re-declaring the sheet chrome.
+ *
+ * The `--sc-*` variables are declared here as design-system PROPOSALS (a
+ * selection ring + a dark scrim family). The shell and primitives reference
+ * these only, so no rgba/hex is baked into a reusable style.
+ */
+
+var StyledSheet = exports.StyledSheet = _styledComponents.default.div.withConfig({
+  displayName: "storyScaffold__StyledSheet",
+  componentId: "sc-7oxew-0"
+})(["--sc-selection-ring:var(--color-primary-500,#2f6bff);--sc-scrim:rgba(0,0,0,0.55);--sc-scrim-strong:rgba(0,0,0,0.72);--sc-scrim-fg:#ffffff;--sc-completed-tint:rgba(72,201,176,0.16);min-height:100vh;padding:32px 40px 64px;background:var(--page-paper-dimmed,var(--color-theme-200));.sheet-title{margin-bottom:8px;}.sheet-lede{display:block;margin-bottom:24px;max-width:760px;}"]);
+var StyledSection = _styledComponents.default.section.withConfig({
+  displayName: "storyScaffold__StyledSection",
+  componentId: "sc-7oxew-1"
+})(["margin-top:40px;> .section-caption{display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:0.06em;}> .section-note{display:block;margin-bottom:16px;max-width:720px;}"]);
+var StyledGrid = exports.StyledGrid = _styledComponents.default.div.withConfig({
+  displayName: "storyScaffold__StyledGrid",
+  componentId: "sc-7oxew-2"
+})(["display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start;"]);
+var StyledColumn = exports.StyledColumn = _styledComponents.default.div.withConfig({
+  displayName: "storyScaffold__StyledColumn",
+  componentId: "sc-7oxew-3"
+})(["display:flex;flex-direction:column;gap:12px;"]);
+var StyledLabeled = _styledComponents.default.figure.withConfig({
+  displayName: "storyScaffold__StyledLabeled",
+  componentId: "sc-7oxew-4"
+})(["margin:0;display:flex;flex-direction:column;gap:8px;> figcaption{order:-1;max-width:320px;}"]);
+var Labeled = exports.Labeled = function Labeled(_ref) {
+  var label = _ref.label,
+    children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement(StyledLabeled, null, /*#__PURE__*/_react.default.createElement("figcaption", null, /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
+    color: "secondary"
+  }, label)), children);
+};
+var Section = exports.Section = function Section(_ref2) {
+  var caption = _ref2.caption,
+    note = _ref2.note,
+    children = _ref2.children;
+  return /*#__PURE__*/_react.default.createElement(StyledSection, null, /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
+    weight: "bold",
+    color: "tertiary",
+    className: "section-caption"
+  }, caption), note ? /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
+    color: "tertiary",
+    className: "section-note"
+  }, note) : null, /*#__PURE__*/_react.default.createElement(StyledGrid, null, children));
+};
+var SheetHeading = exports.SheetHeading = function SheetHeading(_ref3) {
+  var title = _ref3.title,
+    children = _ref3.children;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.Title2, {
+    className: "sheet-title"
+  }, title), /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
+    color: "tertiary",
+    className: "sheet-lede"
+  }, children));
+};
+//# sourceMappingURL=storyScaffold.js.map

package/dist/cjs/presentation/stackedCard/storyScaffold.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"storyScaffold.js","names":["_react","_interopRequireDefault","require","_styledComponents","_Typography","e","__esModule","default","StyledSheet","exports","styled","div","withConfig","displayName","componentId","StyledSection","section","StyledGrid","StyledColumn","StyledLabeled","figure","Labeled","_ref","label","children","createElement","Caption1","color","Section","_ref2","caption","note","weight","className","SheetHeading","_ref3","title","Fragment","Title2"],"sources":["../../../../src/presentation/stackedCard/storyScaffold.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode } from \"react\";\n\nimport styled from \"styled-components\";\n\nimport { Caption1, Title2 } from \"../../components/Typography\";\n\n/**\n * Shared spec-sheet scaffolding for the StackedCard concept stories (Sheet,\n * Section, Labeled, Grid, Column) plus the DS token candidates the subsystem\n * needs. Presentation-only; keeps the three StackedCard stories laying out the\n * same way instead of each re-declaring the sheet chrome.\n *\n * The `--sc-*` variables are declared here as design-system PROPOSALS (a\n * selection ring + a dark scrim family). The shell and primitives reference\n * these only, so no rgba/hex is baked into a reusable style.\n */\n\nexport const StyledSheet = styled.div`\n  --sc-selection-ring: var(--color-primary-500, #2f6bff);\n  --sc-scrim: rgba(0, 0, 0, 0.55);\n  --sc-scrim-strong: rgba(0, 0, 0, 0.72);\n  --sc-scrim-fg: #ffffff;\n  --sc-completed-tint: rgba(72, 201, 176, 0.16);\n\n  min-height: 100vh;\n  padding: 32px 40px 64px;\n  background: var(--page-paper-dimmed, var(--color-theme-200));\n\n  .sheet-title {\n    margin-bottom: 8px;\n  }\n\n  .sheet-lede {\n    display: block;\n    margin-bottom: 24px;\n    max-width: 760px;\n  }\n`;\n\nconst StyledSection = styled.section`\n  margin-top: 40px;\n\n  > .section-caption {\n    display: block;\n    margin-bottom: 4px;\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n  }\n\n  > .section-note {\n    display: block;\n    margin-bottom: 16px;\n    max-width: 720px;\n  }\n`;\n\nexport const StyledGrid = styled.div`\n  display: flex;\n  flex-wrap: wrap;\n  gap: 24px;\n  align-items: flex-start;\n`;\n\nexport const StyledColumn = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n`;\n\nconst StyledLabeled = styled.figure`\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  > figcaption {\n    order: -1;\n    max-width: 320px;\n  }\n`;\n\nexport const Labeled = ({\n  label,\n  children,\n}: {\n  label: ReactNode;\n  children: ReactNode;\n}): ReactElement => (\n  <StyledLabeled>\n    <figcaption>\n      <Caption1 color=\"secondary\">{label}</Caption1>\n    </figcaption>\n    {children}\n  </StyledLabeled>\n);\n\nexport const Section = ({\n  caption,\n  note,\n  children,\n}: {\n  caption: string;\n  note?: ReactNode;\n  children: ReactNode;\n}): ReactElement => (\n  <StyledSection>\n    <Caption1 weight=\"bold\" color=\"tertiary\" className=\"section-caption\">\n      {caption}\n    </Caption1>\n    {note ? (\n      <Caption1 color=\"tertiary\" className=\"section-note\">\n        {note}\n      </Caption1>\n    ) : null}\n    <StyledGrid>{children}</StyledGrid>\n  </StyledSection>\n);\n\nexport const SheetHeading = ({\n  title,\n  children,\n}: {\n  title: string;\n  children: ReactNode;\n}): ReactElement => (\n  <>\n    <Title2 className=\"sheet-title\">{title}</Title2>\n    <Caption1 color=\"tertiary\" className=\"sheet-lede\">\n      {children}\n    </Caption1>\n  </>\n);\n"],"mappings":"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","ignoreList":[]}