@activecollab/components 2.0.409 → 2.0.410

package/dist/cjs/presentation/shared/MessageDialog.js

@@ -0,0 +1,351 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.messageComponents = exports.MessageDialog = exports.DocLinkContext = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _BreakPoints = require("../../components/BreakPoints");
+var _Button = require("../../components/Button");
+var _Columns = require("../../components/Columns");
+var _IconButton = require("../../components/IconButton");
+var _Icons = require("../../components/Icons");
+var _InfoBox = require("../../components/InfoBox");
+var _Media = require("../../components/Media");
+var _Modal = require("../../components/Modal");
+var _PortableText = require("../../components/PortableText");
+var _Styles = require("../../components/PortableText/Styles");
+var _Row = require("../../components/Row");
+var _Stack = require("../../components/Stack");
+var _Tiles = require("../../components/Tiles");
+var _Tooltip = require("../../components/Tooltip");
+var _Typography = require("../../components/Typography");
+var _Typography2 = require("../../components/Typography/Typography");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+/**
+ * The in-app message dialog, as a Presentation mock.
+ *
+ * Two pieces, mirroring how the product is split:
+ *
+ * - {@link MessageDialog} — the hollow dialog shell (width, closing,
+ *   feedback), built only from design-system parts. In the product this shell
+ *   lives in the application as `InAppMessageDialog`.
+ * - {@link messageComponents} — a demo message element catalog injected into
+ *   the design-system Portable Text engine, exactly like the typed cards
+ *   injected into the hollow StackedCard shell. In the product the catalog is
+ *   application code; the presentation ships this demo copy so the stories
+ *   need no app imports.
+ */
+
+/* ---- the dialog shell ---------------------------------------------- */
+
+var DIALOG_WIDTH = {
+  sm: "520px",
+  md: "720px",
+  lg: "880px"
+};
+
+/* Feedback — the thumbs up / down slot. Down-vote reuses the up icon,
+   rotated (the DS set only ships ThumbUpOutlineIcon). */
+var StyledFeedback = _styledComponents.default.div.withConfig({
+  displayName: "MessageDialog__StyledFeedback",
+  componentId: "sc-1kt5lil-0"
+})(["display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 24px 28px;", "{padding:4px 24px 24px;}.fb-question{margin-right:4px;}.fb-btn svg{width:18px;height:18px;}.fb-down svg{transform:rotate(180deg);}"], _BreakPoints.screenBelow.sm);
+var DialogFeedback = function DialogFeedback(_ref) {
+  var onVote = _ref.onVote;
+  var _useState = (0, _react.useState)(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    voted = _useState2[0],
+    setVoted = _useState2[1];
+  var vote = (0, _react.useCallback)(function (value) {
+    setVoted(value);
+    onVote === null || onVote === void 0 || onVote(value);
+  }, [onVote]);
+  return /*#__PURE__*/_react.default.createElement(StyledFeedback, null, voted ? /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
+    color: "secondary"
+  }, "Thanks for your feedback!") : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
+    color: "secondary",
+    className: "fb-question"
+  }, "Was this helpful?"), /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+    title: "Yes, helpful"
+  }, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
+    type: "button",
+    variant: "text gray",
+    className: "fb-btn",
+    "aria-label": "Yes, helpful",
+    onClick: function onClick() {
+      return vote("up");
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Icons.ThumbUpOutlineIcon, null))), /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+    title: "No, not helpful"
+  }, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
+    type: "button",
+    variant: "text gray",
+    className: "fb-btn fb-down",
+    "aria-label": "No, not helpful",
+    onClick: function onClick() {
+      return vote("down");
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Icons.ThumbUpOutlineIcon, null)))));
+};
+
+/* The shell is behaviour only: it sizes itself, closes on click-outside /
+   Esc (DS Modal) / the X, and shows the feedback slot when an onVote handler
+   is supplied. Content is whatever the caller renders as children — usually
+   the Portable Text engine with the demo catalog injected. */
+var StyledDialog = _styledComponents.default.div.withConfig({
+  displayName: "MessageDialog__StyledDialog",
+  componentId: "sc-1kt5lil-1"
+})(["position:relative;box-sizing:border-box;display:flex;flex-direction:column;width:calc(100% - 32px);max-width:", ";max-height:calc(100vh - 96px);margin:56px auto 40px;overflow-y:auto;background-color:var(--page-paper-main);color:var(--color-theme-900);border-radius:12px;box-shadow:var(--shadow-primary);", "{margin:16px auto;}.dlg-close{position:absolute;top:12px;right:12px;z-index:2;}.dlg-content{padding:40px;}", "{.dlg-content{padding:32px 20px 24px;}}"], function (_ref2) {
+  var $size = _ref2.$size;
+  return DIALOG_WIDTH[$size];
+}, _BreakPoints.screenBelow.sm, _BreakPoints.screenBelow.sm);
+var MessageDialog = exports.MessageDialog = function MessageDialog(_ref3) {
+  var open = _ref3.open,
+    onClose = _ref3.onClose,
+    _ref3$size = _ref3.size,
+    size = _ref3$size === void 0 ? "md" : _ref3$size,
+    onVote = _ref3.onVote,
+    children = _ref3.children;
+  return /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
+    open: open,
+    onClose: onClose
+  }, /*#__PURE__*/_react.default.createElement(StyledDialog, {
+    $size: size
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "dlg-close"
+  }, /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+    title: "Close"
+  }, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
+    type: "button",
+    variant: "text gray",
+    "aria-label": "Close",
+    onClick: onClose
+  }, /*#__PURE__*/_react.default.createElement(_Icons.CancelCrossIcon, null)))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "dlg-content"
+  }, children), onVote ? /*#__PURE__*/_react.default.createElement(DialogFeedback, {
+    onVote: onVote
+  }) : null));
+};
+
+/* ---- doc-link wiring ------------------------------------------------ */
+
+/** How a doc-link mark opens its article (by a slug-like reference). The
+    surface that renders the message supplies the handler — in the product it
+    closes the dialog and opens the article Sheet. */
+
+var DocLinkContext = exports.DocLinkContext = /*#__PURE__*/_react.default.createContext(function () {
+  return undefined;
+});
+
+/* ---- the demo message element catalog ------------------------------- */
+
+/* Inline marks ------------------------------------------------------- */
+
+/* interface-name — the name of an interface element, e.g. the Security page. */
+var StyledInterfaceName = _styledComponents.default.span.withConfig({
+  displayName: "MessageDialog__StyledInterfaceName",
+  componentId: "sc-1kt5lil-2"
+})(["padding:0 4px;border-radius:4px;background-color:var(--color-theme-300);color:var(--color-theme-900);font-weight:600;white-space:nowrap;"]);
+var InterfaceNameMark = function InterfaceNameMark(_ref4) {
+  var children = _ref4.children;
+  return /*#__PURE__*/_react.default.createElement(StyledInterfaceName, null, children);
+};
+
+/* keyboard-key — a keyboard key cap. */
+var StyledKeyboardKey = _styledComponents.default.kbd.withConfig({
+  displayName: "MessageDialog__StyledKeyboardKey",
+  componentId: "sc-1kt5lil-3"
+})(["display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border:1px solid var(--border-primary);border-bottom-width:2px;border-radius:5px;background-color:var(--color-theme-200);color:var(--color-theme-900);font-family:ui-monospace,\"SFMono-Regular\",Menlo,Consolas,monospace;font-size:11px;font-weight:600;line-height:1;vertical-align:baseline;"]);
+var KeyboardKeyMark = function KeyboardKeyMark(_ref5) {
+  var children = _ref5.children;
+  return /*#__PURE__*/_react.default.createElement(StyledKeyboardKey, null, children);
+};
+
+/* doc-link — an inline link that opens a full help article. The mark carries
+   an article reference; the open behaviour comes from DocLinkContext, so the
+   authored content stays declarative. */
+/* Built on the engine's inline anchor so a doc-link sits in the sentence
+   exactly like a default link mark — same size, weight and line box as the
+   surrounding copy — just recoloured. */
+var StyledDocLink = (0, _styledComponents.default)(_Styles.StyledLink).withConfig({
+  displayName: "MessageDialog__StyledDocLink",
+  componentId: "sc-1kt5lil-4"
+})(["color:var(--color-secondary);text-decoration-color:var(--color-secondary);"]);
+var DocLinkMark = function DocLinkMark(_ref6) {
+  var mark = _ref6.mark,
+    children = _ref6.children;
+  var openArticle = (0, _react.useContext)(DocLinkContext);
+  return /*#__PURE__*/_react.default.createElement(StyledDocLink, {
+    href: "#",
+    onClick: function onClick(event) {
+      event.preventDefault();
+      openArticle(mark === null || mark === void 0 ? void 0 : mark.article);
+    }
+  }, children);
+};
+
+/* Component objects --------------------------------------------------- */
+
+/* callout — rendered with the DS InfoBox; the catalog keeps its own tone
+   vocabulary and maps it to InfoBox types. */
+
+var CALLOUT_TYPE = {
+  info: "default",
+  note: "note",
+  success: "success"
+};
+var CalloutObject = function CalloutObject(_ref7) {
+  var _ref8;
+  var node = _ref7.node,
+    children = _ref7.children;
+  return /*#__PURE__*/_react.default.createElement(_InfoBox.InfoBox, {
+    type: CALLOUT_TYPE[(_ref8 = node.tone) !== null && _ref8 !== void 0 ? _ref8 : "info"],
+    title: node.title,
+    showIcon: true
+  }, children);
+};
+
+/* button-reference — a real DS Button shown for reference as its own block,
+   so a message can point at a button instead of screenshotting it. It is
+   intentionally non-interactive. */
+var StyledButtonReference = _styledComponents.default.div.withConfig({
+  displayName: "MessageDialog__StyledButtonReference",
+  componentId: "sc-1kt5lil-5"
+})(["display:flex;.c-button{pointer-events:none;}"]);
+var ButtonReferenceObject = function ButtonReferenceObject(_ref9) {
+  var _ref0;
+  var node = _ref9.node;
+  if (typeof node.label !== "string") {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(StyledButtonReference, {
+    "aria-hidden": "true"
+  }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    variant: (_ref0 = node.variant) !== null && _ref0 !== void 0 ? _ref0 : "primary",
+    size: "small",
+    type: "button",
+    tabIndex: -1
+  }, node.label));
+};
+
+/* row — a horizontal run of blocks (e.g. two button references). */
+var RowObject = function RowObject(_ref1) {
+  var _ref10;
+  var node = _ref1.node,
+    children = _ref1.children;
+  return /*#__PURE__*/_react.default.createElement(_Row.Row, {
+    space: (_ref10 = node.space) !== null && _ref10 !== void 0 ? _ref10 : "sm"
+  }, children);
+};
+
+/* tiles — an equal-size mosaic of blocks. */
+var TilesObject = function TilesObject(_ref11) {
+  var _ref12;
+  var node = _ref11.node,
+    children = _ref11.children;
+  return /*#__PURE__*/_react.default.createElement(_Tiles.Tiles, {
+    columns: (_ref12 = node.columns) !== null && _ref12 !== void 0 ? _ref12 : 3,
+    space: "md",
+    collapseBelow: "sm"
+  }, children);
+};
+
+/* split — text beside media, with the one layout rule the messages follow:
+   screenshots sit on the right, flat illustrations on the left. `widths` is
+   authored as [text, media] and reordered with the columns. */
+
+var SplitObject = function SplitObject(_ref13) {
+  var _ref14;
+  var node = _ref13.node,
+    children = _ref13.children;
+  var media = node.media;
+  var widths = (_ref14 = node.widths) !== null && _ref14 !== void 0 ? _ref14 : [1, 1];
+  var textColumn = /*#__PURE__*/_react.default.createElement(_Stack.Stack, {
+    space: "lg"
+  }, children);
+
+  // A split without media degrades to its text column instead of crashing.
+  if (!(media !== null && media !== void 0 && media.src)) {
+    return textColumn;
+  }
+  var screenshot = media.variant === "screenshot";
+  var mediaColumn = /*#__PURE__*/_react.default.createElement(_Media.Media, {
+    src: media.src,
+    alt: media.alt,
+    variant: media.variant,
+    caption: media.caption
+  });
+  return /*#__PURE__*/_react.default.createElement(_Columns.Columns, {
+    widths: screenshot ? widths : [...widths].reverse(),
+    space: "xl",
+    alignY: "center",
+    collapseBelow: "md"
+  }, screenshot ? textColumn : mediaColumn, screenshot ? mediaColumn : textColumn);
+};
+
+/* Default-block overrides --------------------------------------------- */
+
+/* The engine's defaults use Body 1 primary; the messages are designed on the
+   quieter Body 2 secondary voice, so the catalog overrides the text blocks —
+   demonstrating the `blocks` half of the injection contract. */
+var ParagraphBlock = function ParagraphBlock(_ref15) {
+  var children = _ref15.children;
+  return /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
+    color: "secondary",
+    lineHeight: "loose"
+  }, children);
+};
+var ListItemBlock = function ListItemBlock(_ref16) {
+  var children = _ref16.children;
+  return /*#__PURE__*/_react.default.createElement(_Typography2.Typography, {
+    variant: "Body 2",
+    as: "li",
+    color: "secondary",
+    lineHeight: "loose"
+  }, children);
+};
+
+/* Only the delta from the default renderer: the messages want a roomier
+   rhythm between a titled section's content nodes. */
+var DefaultTitledText = _PortableText.portableTextDefaultBlockRenderers["titled-text"];
+var TitledTextBlock = function TitledTextBlock(_ref17) {
+  var block = _ref17.block,
+    children = _ref17.children;
+  return /*#__PURE__*/_react.default.createElement(DefaultTitledText, {
+    block: block
+  }, children ? /*#__PURE__*/_react.default.createElement(_Stack.Stack, {
+    space: "sm"
+  }, children) : undefined);
+};
+
+/** The demo catalog the presentations inject into the Portable Text engine —
+    the stand-in for the application's `messageComponents` map. */
+var messageComponents = exports.messageComponents = {
+  marks: {
+    "interface-name": InterfaceNameMark,
+    "keyboard-key": KeyboardKeyMark,
+    "doc-link": DocLinkMark
+  },
+  objects: {
+    callout: CalloutObject,
+    "button-reference": ButtonReferenceObject,
+    row: RowObject,
+    tiles: TilesObject,
+    split: SplitObject
+  },
+  blocks: {
+    paragraph: ParagraphBlock,
+    "list-item": ListItemBlock,
+    "titled-text": TitledTextBlock
+  }
+};
+//# sourceMappingURL=MessageDialog.js.map

package/dist/cjs/presentation/shared/MessageDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageDialog.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_BreakPoints","_Button","_Columns","_IconButton","_Icons","_InfoBox","_Media","_Modal","_PortableText","_Styles","_Row","_Stack","_Tiles","_Tooltip","_Typography","_Typography2","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_slicedToArray","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","a","_arrayLikeToArray","toString","slice","constructor","name","Array","from","test","length","l","Symbol","iterator","u","next","done","push","value","return","isArray","DIALOG_WIDTH","sm","md","lg","StyledFeedback","styled","div","withConfig","displayName","componentId","screenBelow","DialogFeedback","_ref","onVote","_useState","useState","_useState2","voted","setVoted","vote","useCallback","createElement","Body2","color","Fragment","className","Tooltip","title","IconButton","type","variant","onClick","ThumbUpOutlineIcon","StyledDialog","_ref2","$size","MessageDialog","exports","_ref3","open","onClose","_ref3$size","size","children","Modal","CancelCrossIcon","DocLinkContext","React","createContext","undefined","StyledInterfaceName","span","InterfaceNameMark","_ref4","StyledKeyboardKey","kbd","KeyboardKeyMark","_ref5","StyledDocLink","InlineLink","DocLinkMark","_ref6","mark","openArticle","useContext","href","event","preventDefault","article","CALLOUT_TYPE","info","note","success","CalloutObject","_ref7","_ref8","node","InfoBox","tone","showIcon","StyledButtonReference","ButtonReferenceObject","_ref9","_ref0","label","Button","tabIndex","RowObject","_ref1","_ref10","Row","space","TilesObject","_ref11","_ref12","Tiles","columns","collapseBelow","SplitObject","_ref13","_ref14","media","widths","textColumn","Stack","src","screenshot","mediaColumn","Media","alt","caption","Columns","reverse","alignY","ParagraphBlock","_ref15","lineHeight","ListItemBlock","_ref16","Typography","as","DefaultTitledText","portableTextDefaultBlockRenderers","TitledTextBlock","_ref17","block","messageComponents","marks","objects","callout","row","tiles","split","blocks","paragraph"],"sources":["../../../../src/presentation/shared/MessageDialog.tsx"],"sourcesContent":["import React, {\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useState,\n} from \"react\";\n\nimport styled from \"styled-components\";\n\nimport { screenBelow } from \"../../components/BreakPoints\";\nimport { Button } from \"../../components/Button\";\nimport { Columns } from \"../../components/Columns\";\nimport { IconButton } from \"../../components/IconButton\";\nimport { CancelCrossIcon, ThumbUpOutlineIcon } from \"../../components/Icons\";\nimport { InfoBox, InfoBoxType } from \"../../components/InfoBox\";\nimport { Space } from \"../../components/LayoutTokens\";\nimport { Media } from \"../../components/Media\";\nimport { Modal } from \"../../components/Modal\";\nimport {\n  portableTextDefaultBlockRenderers,\n  PortableTextBlockRenderer,\n  PortableTextComponents,\n  PortableTextMarkRenderer,\n  PortableTextMediaVariant,\n  PortableTextObjectRenderer,\n} from \"../../components/PortableText\";\nimport { StyledLink as InlineLink } from \"../../components/PortableText/Styles\";\nimport { Row } from \"../../components/Row\";\nimport { Stack } from \"../../components/Stack\";\nimport { Tiles } from \"../../components/Tiles\";\nimport { Tooltip } from \"../../components/Tooltip\";\nimport { Body2 } from \"../../components/Typography\";\nimport { Typography } from \"../../components/Typography/Typography\";\n\n/**\n * The in-app message dialog, as a Presentation mock.\n *\n * Two pieces, mirroring how the product is split:\n *\n * - {@link MessageDialog} — the hollow dialog shell (width, closing,\n *   feedback), built only from design-system parts. In the product this shell\n *   lives in the application as `InAppMessageDialog`.\n * - {@link messageComponents} — a demo message element catalog injected into\n *   the design-system Portable Text engine, exactly like the typed cards\n *   injected into the hollow StackedCard shell. In the product the catalog is\n *   application code; the presentation ships this demo copy so the stories\n *   need no app imports.\n */\n\n/* ---- the dialog shell ---------------------------------------------- */\n\nexport type MessageDialogSize = \"sm\" | \"md\" | \"lg\";\n\nconst DIALOG_WIDTH: Record<MessageDialogSize, string> = {\n  sm: \"520px\",\n  md: \"720px\",\n  lg: \"880px\",\n};\n\n/* Feedback — the thumbs up / down slot. Down-vote reuses the up icon,\n   rotated (the DS set only ships ThumbUpOutlineIcon). */\nconst StyledFeedback = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  padding: 8px 24px 28px;\n\n  ${screenBelow.sm} {\n    padding: 4px 24px 24px;\n  }\n\n  .fb-question {\n    margin-right: 4px;\n  }\n\n  .fb-btn svg {\n    width: 18px;\n    height: 18px;\n  }\n\n  .fb-down svg {\n    transform: rotate(180deg);\n  }\n`;\n\nconst DialogFeedback = ({\n  onVote,\n}: {\n  onVote?: (vote: \"up\" | \"down\") => void;\n}): ReactElement => {\n  const [voted, setVoted] = useState<\"up\" | \"down\" | null>(null);\n  const vote = useCallback(\n    (value: \"up\" | \"down\") => {\n      setVoted(value);\n      onVote?.(value);\n    },\n    [onVote]\n  );\n\n  return (\n    <StyledFeedback>\n      {voted ? (\n        <Body2 color=\"secondary\">Thanks for your feedback!</Body2>\n      ) : (\n        <>\n          <Body2 color=\"secondary\" className=\"fb-question\">\n            Was this helpful?\n          </Body2>\n          <Tooltip title=\"Yes, helpful\">\n            <IconButton\n              type=\"button\"\n              variant=\"text gray\"\n              className=\"fb-btn\"\n              aria-label=\"Yes, helpful\"\n              onClick={() => vote(\"up\")}\n            >\n              <ThumbUpOutlineIcon />\n            </IconButton>\n          </Tooltip>\n          <Tooltip title=\"No, not helpful\">\n            <IconButton\n              type=\"button\"\n              variant=\"text gray\"\n              className=\"fb-btn fb-down\"\n              aria-label=\"No, not helpful\"\n              onClick={() => vote(\"down\")}\n            >\n              <ThumbUpOutlineIcon />\n            </IconButton>\n          </Tooltip>\n        </>\n      )}\n    </StyledFeedback>\n  );\n};\n\n/* The shell is behaviour only: it sizes itself, closes on click-outside /\n   Esc (DS Modal) / the X, and shows the feedback slot when an onVote handler\n   is supplied. Content is whatever the caller renders as children — usually\n   the Portable Text engine with the demo catalog injected. */\nconst StyledDialog = styled.div<{ $size: MessageDialogSize }>`\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  width: calc(100% - 32px);\n  max-width: ${({ $size }) => DIALOG_WIDTH[$size]};\n  max-height: calc(100vh - 96px);\n  margin: 56px auto 40px;\n  overflow-y: auto;\n  background-color: var(--page-paper-main);\n  color: var(--color-theme-900);\n  border-radius: 12px;\n  box-shadow: var(--shadow-primary);\n\n  ${screenBelow.sm} {\n    margin: 16px auto;\n  }\n\n  /* X floats in the corner and overlaps the content padding — it does not\n     reserve a row of its own. */\n  .dlg-close {\n    position: absolute;\n    top: 12px;\n    right: 12px;\n    z-index: 2;\n  }\n\n  .dlg-content {\n    padding: 40px;\n  }\n\n  ${screenBelow.sm} {\n    .dlg-content {\n      padding: 32px 20px 24px;\n    }\n  }\n`;\n\nexport interface MessageDialogProps {\n  open: boolean;\n  onClose: () => void;\n  size?: MessageDialogSize;\n  /** Supplying a handler shows the centred helpful / not-helpful vote. */\n  onVote?: (vote: \"up\" | \"down\") => void;\n  children: ReactNode;\n}\n\nexport const MessageDialog = ({\n  open,\n  onClose,\n  size = \"md\",\n  onVote,\n  children,\n}: MessageDialogProps): ReactElement => (\n  <Modal open={open} onClose={onClose}>\n    <StyledDialog $size={size}>\n      <div className=\"dlg-close\">\n        <Tooltip title=\"Close\">\n          <IconButton\n            type=\"button\"\n            variant=\"text gray\"\n            aria-label=\"Close\"\n            onClick={onClose}\n          >\n            <CancelCrossIcon />\n          </IconButton>\n        </Tooltip>\n      </div>\n      <div className=\"dlg-content\">{children}</div>\n      {onVote ? <DialogFeedback onVote={onVote} /> : null}\n    </StyledDialog>\n  </Modal>\n);\n\n/* ---- doc-link wiring ------------------------------------------------ */\n\n/** How a doc-link mark opens its article (by a slug-like reference). The\n    surface that renders the message supplies the handler — in the product it\n    closes the dialog and opens the article Sheet. */\nexport type OpenArticleHandler = (article?: string) => void;\n\nexport const DocLinkContext = React.createContext<OpenArticleHandler>(\n  () => undefined\n);\n\n/* ---- the demo message element catalog ------------------------------- */\n\n/* Inline marks ------------------------------------------------------- */\n\n/* interface-name — the name of an interface element, e.g. the Security page. */\nconst StyledInterfaceName = styled.span`\n  padding: 0 4px;\n  border-radius: 4px;\n  background-color: var(--color-theme-300);\n  color: var(--color-theme-900);\n  font-weight: 600;\n  white-space: nowrap;\n`;\nconst InterfaceNameMark: PortableTextMarkRenderer = ({ children }) => (\n  <StyledInterfaceName>{children}</StyledInterfaceName>\n);\n\n/* keyboard-key — a keyboard key cap. */\nconst StyledKeyboardKey = styled.kbd`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 20px;\n  height: 20px;\n  padding: 0 6px;\n  border: 1px solid var(--border-primary);\n  border-bottom-width: 2px;\n  border-radius: 5px;\n  background-color: var(--color-theme-200);\n  color: var(--color-theme-900);\n  font-family: ui-monospace, \"SFMono-Regular\", Menlo, Consolas, monospace;\n  font-size: 11px;\n  font-weight: 600;\n  line-height: 1;\n  vertical-align: baseline;\n`;\nconst KeyboardKeyMark: PortableTextMarkRenderer = ({ children }) => (\n  <StyledKeyboardKey>{children}</StyledKeyboardKey>\n);\n\n/* doc-link — an inline link that opens a full help article. The mark carries\n   an article reference; the open behaviour comes from DocLinkContext, so the\n   authored content stays declarative. */\n/* Built on the engine's inline anchor so a doc-link sits in the sentence\n   exactly like a default link mark — same size, weight and line box as the\n   surrounding copy — just recoloured. */\nconst StyledDocLink = styled(InlineLink)`\n  color: var(--color-secondary);\n  text-decoration-color: var(--color-secondary);\n`;\nconst DocLinkMark: PortableTextMarkRenderer = ({ mark, children }) => {\n  const openArticle = useContext(DocLinkContext);\n  return (\n    <StyledDocLink\n      href=\"#\"\n      onClick={(event: React.MouseEvent) => {\n        event.preventDefault();\n        openArticle(mark?.article as string | undefined);\n      }}\n    >\n      {children}\n    </StyledDocLink>\n  );\n};\n\n/* Component objects --------------------------------------------------- */\n\n/* callout — rendered with the DS InfoBox; the catalog keeps its own tone\n   vocabulary and maps it to InfoBox types. */\ntype CalloutTone = \"info\" | \"note\" | \"success\";\nconst CALLOUT_TYPE: Record<CalloutTone, InfoBoxType> = {\n  info: \"default\",\n  note: \"note\",\n  success: \"success\",\n};\nconst CalloutObject: PortableTextObjectRenderer = ({ node, children }) => (\n  <InfoBox\n    type={CALLOUT_TYPE[(node.tone as CalloutTone | undefined) ?? \"info\"]}\n    title={node.title as string | undefined}\n    showIcon\n  >\n    {children}\n  </InfoBox>\n);\n\n/* button-reference — a real DS Button shown for reference as its own block,\n   so a message can point at a button instead of screenshotting it. It is\n   intentionally non-interactive. */\nconst StyledButtonReference = styled.div`\n  display: flex;\n\n  .c-button {\n    pointer-events: none;\n  }\n`;\ntype ButtonReferenceVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"text colored\"\n  | \"text gray\";\nconst ButtonReferenceObject: PortableTextObjectRenderer = ({ node }) => {\n  if (typeof node.label !== \"string\") {\n    return null;\n  }\n\n  return (\n    <StyledButtonReference aria-hidden=\"true\">\n      <Button\n        variant={\n          (node.variant as ButtonReferenceVariant | undefined) ?? \"primary\"\n        }\n        size=\"small\"\n        type=\"button\"\n        tabIndex={-1}\n      >\n        {node.label}\n      </Button>\n    </StyledButtonReference>\n  );\n};\n\n/* row — a horizontal run of blocks (e.g. two button references). */\nconst RowObject: PortableTextObjectRenderer = ({ node, children }) => (\n  <Row space={(node.space as Space | undefined) ?? \"sm\"}>{children}</Row>\n);\n\n/* tiles — an equal-size mosaic of blocks. */\nconst TilesObject: PortableTextObjectRenderer = ({ node, children }) => (\n  <Tiles\n    columns={(node.columns as number | undefined) ?? 3}\n    space=\"md\"\n    collapseBelow=\"sm\"\n  >\n    {children}\n  </Tiles>\n);\n\n/* split — text beside media, with the one layout rule the messages follow:\n   screenshots sit on the right, flat illustrations on the left. `widths` is\n   authored as [text, media] and reordered with the columns. */\ninterface SplitMedia {\n  src: string;\n  alt?: string;\n  variant?: PortableTextMediaVariant;\n  caption?: string;\n}\nconst SplitObject: PortableTextObjectRenderer = ({ node, children }) => {\n  const media = node.media as SplitMedia | undefined;\n  const widths = (node.widths as number[] | undefined) ?? [1, 1];\n  const textColumn = <Stack space=\"lg\">{children}</Stack>;\n\n  // A split without media degrades to its text column instead of crashing.\n  if (!media?.src) {\n    return textColumn;\n  }\n\n  const screenshot = media.variant === \"screenshot\";\n\n  const mediaColumn = (\n    <Media\n      src={media.src}\n      alt={media.alt}\n      variant={media.variant}\n      caption={media.caption}\n    />\n  );\n\n  return (\n    <Columns\n      widths={screenshot ? widths : [...widths].reverse()}\n      space=\"xl\"\n      alignY=\"center\"\n      collapseBelow=\"md\"\n    >\n      {screenshot ? textColumn : mediaColumn}\n      {screenshot ? mediaColumn : textColumn}\n    </Columns>\n  );\n};\n\n/* Default-block overrides --------------------------------------------- */\n\n/* The engine's defaults use Body 1 primary; the messages are designed on the\n   quieter Body 2 secondary voice, so the catalog overrides the text blocks —\n   demonstrating the `blocks` half of the injection contract. */\nconst ParagraphBlock: PortableTextBlockRenderer = ({ children }) => (\n  <Body2 color=\"secondary\" lineHeight=\"loose\">\n    {children}\n  </Body2>\n);\n\nconst ListItemBlock: PortableTextBlockRenderer = ({ children }) => (\n  <Typography variant=\"Body 2\" as=\"li\" color=\"secondary\" lineHeight=\"loose\">\n    {children}\n  </Typography>\n);\n\n/* Only the delta from the default renderer: the messages want a roomier\n   rhythm between a titled section's content nodes. */\nconst DefaultTitledText = portableTextDefaultBlockRenderers[\"titled-text\"];\nconst TitledTextBlock: PortableTextBlockRenderer = ({ block, children }) => (\n  <DefaultTitledText block={block}>\n    {children ? <Stack space=\"sm\">{children}</Stack> : undefined}\n  </DefaultTitledText>\n);\n\n/** The demo catalog the presentations inject into the Portable Text engine —\n    the stand-in for the application's `messageComponents` map. */\nexport const messageComponents: PortableTextComponents = {\n  marks: {\n    \"interface-name\": InterfaceNameMark,\n    \"keyboard-key\": KeyboardKeyMark,\n    \"doc-link\": DocLinkMark,\n  },\n  objects: {\n    callout: CalloutObject,\n    \"button-reference\": ButtonReferenceObject,\n    row: RowObject,\n    tiles: TilesObject,\n    split: SplitObject,\n  },\n  blocks: {\n    paragraph: ParagraphBlock,\n    \"list-item\": ListItemBlock,\n    \"titled-text\": TitledTextBlock,\n  },\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/presentation/shared/index.js

@@ -12,6 +12,9 @@ var _exportNames = {
   ProjectPageHeader: true,
   TabHeader: true,
   FloatingControls: true,
+  MessageDialog: true,
+  DocLinkContext: true,
+  messageComponents: true,
   HelpAndSupportMenu: true,
   LinkingCommandsButton: true,
   LinkBranchOrPullRequestDialog: true,
@@ -85,6 +88,12 @@ Object.defineProperty(exports, "CreateLoginCodeDialogs", {
     return _TwoFactorDialogs.CreateLoginCodeDialogs;
   }
 });
+Object.defineProperty(exports, "DocLinkContext", {
+  enumerable: true,
+  get: function get() {
+    return _MessageDialog.DocLinkContext;
+  }
+});
 Object.defineProperty(exports, "FloatingControls", {
   enumerable: true,
   get: function get() {
@@ -127,6 +136,12 @@ Object.defineProperty(exports, "MainLogo", {
     return _MainLogo.MainLogo;
   }
 });
+Object.defineProperty(exports, "MessageDialog", {
+  enumerable: true,
+  get: function get() {
+    return _MessageDialog.MessageDialog;
+  }
+});
 Object.defineProperty(exports, "PROJECT_REPOSITORIES", {
   enumerable: true,
   get: function get() {
@@ -271,6 +286,12 @@ Object.defineProperty(exports, "buildRepoOptions", {
     return _ConnectRepositoryDialog.buildRepoOptions;
   }
 });
+Object.defineProperty(exports, "messageComponents", {
+  enumerable: true,
+  get: function get() {
+    return _MessageDialog.messageComponents;
+  }
+});
 var _tokens = require("./tokens");
 Object.keys(_tokens).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -288,6 +309,7 @@ var _RoundAvatar = require("./RoundAvatar");
 var _PresentationShell = require("./PresentationShell");
 var _headers = require("./headers");
 var _FloatingControls = require("./FloatingControls");
+var _MessageDialog = require("./MessageDialog");
 var _HelpAndSupportMenu = require("./HelpAndSupportMenu");
 var _LinkingCommandsButton = require("./LinkingCommandsButton");
 var _LinkBranchOrPullRequestDialog = require("./LinkBranchOrPullRequestDialog");

package/dist/cjs/presentation/shared/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_tokens","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_MainLogo","_RoundAvatar","_PresentationShell","_headers","_FloatingControls","_HelpAndSupportMenu","_LinkingCommandsButton","_LinkBranchOrPullRequestDialog","_ConnectRepositoryDialog","_WebhookLogsDialog","_SourceCodeSection","_SuggestSubtasksButton","_TaskOptionsMenu","_UserMenu","_TwoFactorShield","_TwoFactorDialogs","_settings"],"sources":["../../../../src/presentation/shared/index.ts"],"sourcesContent":["/**\n * Shared building blocks for the Presentation mock-ups (`Presentation/*`\n * stories). The application shell, page headers, tab bar and small widgets are\n * defined once here and reused by the List view, Column view, Task sheet and\n * empty-page stories so the chrome stays identical and in one place.\n */\nexport * from \"./tokens\";\nexport { MainLogo } from \"./MainLogo\";\nexport { RoundAvatar } from \"./RoundAvatar\";\nexport { PresentationShell, StyledPagePaper } from \"./PresentationShell\";\nexport type { PresentationShellProps } from \"./PresentationShell\";\nexport { PageHeader, ProjectPageHeader, TabHeader } from \"./headers\";\nexport type {\n  PageHeaderProps,\n  ProjectPageHeaderProps,\n  TabHeaderProps,\n} from \"./headers\";\nexport { FloatingControls } from \"./FloatingControls\";\nexport { HelpAndSupportMenu } from \"./HelpAndSupportMenu\";\nexport type { HelpAndSupportMenuProps } from \"./HelpAndSupportMenu\";\nexport { LinkingCommandsButton } from \"./LinkingCommandsButton\";\nexport { LinkBranchOrPullRequestDialog } from \"./LinkBranchOrPullRequestDialog\";\nexport type { LinkBranchOrPullRequestDialogProps } from \"./LinkBranchOrPullRequestDialog\";\nexport {\n  ConnectRepositoryDialog,\n  RepositorySelect,\n  buildRepoOptions,\n  CONNECTIONS,\n  PROJECT_REPOSITORIES,\n  CONNECTABLE_REPOSITORIES,\n} from \"./ConnectRepositoryDialog\";\nexport type {\n  ConnectRepositoryDialogProps,\n  RepositorySelectProps,\n  Connection,\n  ConnectionService,\n  Repository,\n} from \"./ConnectRepositoryDialog\";\nexport {\n  WebhookLogsDialog,\n  WEBHOOK_CONNECTIONS,\n  WEBHOOK_REPOSITORIES,\n} from \"./WebhookLogsDialog\";\nexport type {\n  WebhookLogsDialogProps,\n  WebhookConnection,\n  WebhookRepository,\n  WebhookLog,\n} from \"./WebhookLogsDialog\";\nexport {\n  SourceCodeSection,\n  IssueRow,\n  CodeRow,\n  Spine,\n  HistoryDialog,\n  CompletedHeader,\n} from \"./SourceCodeSection\";\nexport type {\n  IssueEntry,\n  CodeEntry,\n  Stage,\n  HistoryEvent,\n  StageState,\n  CodeStatus,\n  SectionVariant,\n} from \"./SourceCodeSection\";\nexport { SuggestSubtasksButton } from \"./SuggestSubtasksButton\";\nexport { TaskOptionsMenu, TaskListOptionsMenu } from \"./TaskOptionsMenu\";\nexport type {\n  TaskOptionsMenuProps,\n  TaskListOptionsMenuProps,\n} from \"./TaskOptionsMenu\";\nexport { UserMenu } from \"./UserMenu\";\nexport type { UserMenuProps, UserMenuVariant } from \"./UserMenu\";\nexport { TwoFactorShield } from \"./TwoFactorShield\";\nexport type { TwoFactorShieldProps } from \"./TwoFactorShield\";\nexport { BackupCodesDialogs, CreateLoginCodeDialogs } from \"./TwoFactorDialogs\";\nexport type {\n  BackupCodesDialogsProps,\n  CreateLoginCodeDialogsProps,\n} from \"./TwoFactorDialogs\";\nexport {\n  SettingsHeader,\n  SettingsContent,\n  StyledSettingRow,\n  RowText,\n  SettingRow,\n} from \"./settings\";\nexport type { SettingsHeaderProps, SettingRowProps } from \"./settings\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,IAAAA,OAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,OAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAL,OAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAb,OAAA,CAAAK,GAAA;IAAA;EAAA;AAAA;AACA,IAAAS,SAAA,GAAAb,OAAA;AACA,IAAAc,YAAA,GAAAd,OAAA;AACA,IAAAe,kBAAA,GAAAf,OAAA;AAEA,IAAAgB,QAAA,GAAAhB,OAAA;AAMA,IAAAiB,iBAAA,GAAAjB,OAAA;AACA,IAAAkB,mBAAA,GAAAlB,OAAA;AAEA,IAAAmB,sBAAA,GAAAnB,OAAA;AACA,IAAAoB,8BAAA,GAAApB,OAAA;AAEA,IAAAqB,wBAAA,GAAArB,OAAA;AAeA,IAAAsB,kBAAA,GAAAtB,OAAA;AAWA,IAAAuB,kBAAA,GAAAvB,OAAA;AAiBA,IAAAwB,sBAAA,GAAAxB,OAAA;AACA,IAAAyB,gBAAA,GAAAzB,OAAA;AAKA,IAAA0B,SAAA,GAAA1B,OAAA;AAEA,IAAA2B,gBAAA,GAAA3B,OAAA;AAEA,IAAA4B,iBAAA,GAAA5B,OAAA;AAKA,IAAA6B,SAAA,GAAA7B,OAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["_tokens","require","Object","keys","forEach","key","prototype","hasOwnProperty","call","_exportNames","exports","defineProperty","enumerable","get","_MainLogo","_RoundAvatar","_PresentationShell","_headers","_FloatingControls","_MessageDialog","_HelpAndSupportMenu","_LinkingCommandsButton","_LinkBranchOrPullRequestDialog","_ConnectRepositoryDialog","_WebhookLogsDialog","_SourceCodeSection","_SuggestSubtasksButton","_TaskOptionsMenu","_UserMenu","_TwoFactorShield","_TwoFactorDialogs","_settings"],"sources":["../../../../src/presentation/shared/index.ts"],"sourcesContent":["/**\n * Shared building blocks for the Presentation mock-ups (`Presentation/*`\n * stories). The application shell, page headers, tab bar and small widgets are\n * defined once here and reused by the List view, Column view, Task sheet and\n * empty-page stories so the chrome stays identical and in one place.\n */\nexport * from \"./tokens\";\nexport { MainLogo } from \"./MainLogo\";\nexport { RoundAvatar } from \"./RoundAvatar\";\nexport { PresentationShell, StyledPagePaper } from \"./PresentationShell\";\nexport type { PresentationShellProps } from \"./PresentationShell\";\nexport { PageHeader, ProjectPageHeader, TabHeader } from \"./headers\";\nexport type {\n  PageHeaderProps,\n  ProjectPageHeaderProps,\n  TabHeaderProps,\n} from \"./headers\";\nexport { FloatingControls } from \"./FloatingControls\";\nexport {\n  MessageDialog,\n  DocLinkContext,\n  messageComponents,\n} from \"./MessageDialog\";\nexport type {\n  MessageDialogProps,\n  MessageDialogSize,\n  OpenArticleHandler,\n} from \"./MessageDialog\";\nexport { HelpAndSupportMenu } from \"./HelpAndSupportMenu\";\nexport type { HelpAndSupportMenuProps } from \"./HelpAndSupportMenu\";\nexport { LinkingCommandsButton } from \"./LinkingCommandsButton\";\nexport { LinkBranchOrPullRequestDialog } from \"./LinkBranchOrPullRequestDialog\";\nexport type { LinkBranchOrPullRequestDialogProps } from \"./LinkBranchOrPullRequestDialog\";\nexport {\n  ConnectRepositoryDialog,\n  RepositorySelect,\n  buildRepoOptions,\n  CONNECTIONS,\n  PROJECT_REPOSITORIES,\n  CONNECTABLE_REPOSITORIES,\n} from \"./ConnectRepositoryDialog\";\nexport type {\n  ConnectRepositoryDialogProps,\n  RepositorySelectProps,\n  Connection,\n  ConnectionService,\n  Repository,\n} from \"./ConnectRepositoryDialog\";\nexport {\n  WebhookLogsDialog,\n  WEBHOOK_CONNECTIONS,\n  WEBHOOK_REPOSITORIES,\n} from \"./WebhookLogsDialog\";\nexport type {\n  WebhookLogsDialogProps,\n  WebhookConnection,\n  WebhookRepository,\n  WebhookLog,\n} from \"./WebhookLogsDialog\";\nexport {\n  SourceCodeSection,\n  IssueRow,\n  CodeRow,\n  Spine,\n  HistoryDialog,\n  CompletedHeader,\n} from \"./SourceCodeSection\";\nexport type {\n  IssueEntry,\n  CodeEntry,\n  Stage,\n  HistoryEvent,\n  StageState,\n  CodeStatus,\n  SectionVariant,\n} from \"./SourceCodeSection\";\nexport { SuggestSubtasksButton } from \"./SuggestSubtasksButton\";\nexport { TaskOptionsMenu, TaskListOptionsMenu } from \"./TaskOptionsMenu\";\nexport type {\n  TaskOptionsMenuProps,\n  TaskListOptionsMenuProps,\n} from \"./TaskOptionsMenu\";\nexport { UserMenu } from \"./UserMenu\";\nexport type { UserMenuProps, UserMenuVariant } from \"./UserMenu\";\nexport { TwoFactorShield } from \"./TwoFactorShield\";\nexport type { TwoFactorShieldProps } from \"./TwoFactorShield\";\nexport { BackupCodesDialogs, CreateLoginCodeDialogs } from \"./TwoFactorDialogs\";\nexport type {\n  BackupCodesDialogsProps,\n  CreateLoginCodeDialogsProps,\n} from \"./TwoFactorDialogs\";\nexport {\n  SettingsHeader,\n  SettingsContent,\n  StyledSettingRow,\n  RowText,\n  SettingRow,\n} from \"./settings\";\nexport type { SettingsHeaderProps, SettingRowProps } from \"./settings\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,IAAAA,OAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,OAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAC,YAAA,EAAAJ,GAAA;EAAA,IAAAA,GAAA,IAAAK,OAAA,IAAAA,OAAA,CAAAL,GAAA,MAAAL,OAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAS,cAAA,CAAAD,OAAA,EAAAL,GAAA;IAAAO,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAb,OAAA,CAAAK,GAAA;IAAA;EAAA;AAAA;AACA,IAAAS,SAAA,GAAAb,OAAA;AACA,IAAAc,YAAA,GAAAd,OAAA;AACA,IAAAe,kBAAA,GAAAf,OAAA;AAEA,IAAAgB,QAAA,GAAAhB,OAAA;AAMA,IAAAiB,iBAAA,GAAAjB,OAAA;AACA,IAAAkB,cAAA,GAAAlB,OAAA;AAUA,IAAAmB,mBAAA,GAAAnB,OAAA;AAEA,IAAAoB,sBAAA,GAAApB,OAAA;AACA,IAAAqB,8BAAA,GAAArB,OAAA;AAEA,IAAAsB,wBAAA,GAAAtB,OAAA;AAeA,IAAAuB,kBAAA,GAAAvB,OAAA;AAWA,IAAAwB,kBAAA,GAAAxB,OAAA;AAiBA,IAAAyB,sBAAA,GAAAzB,OAAA;AACA,IAAA0B,gBAAA,GAAA1B,OAAA;AAKA,IAAA2B,SAAA,GAAA3B,OAAA;AAEA,IAAA4B,gBAAA,GAAA5B,OAAA;AAEA,IAAA6B,iBAAA,GAAA7B,OAAA;AAKA,IAAA8B,SAAA,GAAA9B,OAAA","ignoreList":[]}

package/dist/esm/components/BreakPoints.d.ts

@@ -5,4 +5,6 @@ export declare const screen: {
     xl: string;
     xxl: string;
 };
+export type Breakpoint = "sm" | "md" | "lg" | "xl" | "xxl";
+export declare const screenBelow: Record<Breakpoint, string>;
 //# sourceMappingURL=BreakPoints.d.ts.map

package/dist/esm/components/BreakPoints.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BreakPoints.d.ts","sourceRoot":"","sources":["../../../src/components/BreakPoints.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,MAAM;;;;;;CAMlB,CAAC"}
+{"version":3,"file":"BreakPoints.d.ts","sourceRoot":"","sources":["../../../src/components/BreakPoints.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,MAAM;;;;;;CAMlB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAK3D,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAMlD,CAAC"}

package/dist/esm/components/BreakPoints.js

@@ -12,4 +12,13 @@ export const screen = {
   xl: "@media (min-width: " + size.xl + ")",
   xxl: "@media (min-width: " + size.xxl + ")"
 };
+// 0.02px below the breakpoint so these never overlap the min-width queries.
+const below = value => parseFloat(value) - 0.02 + "px";
+export const screenBelow = {
+  sm: "@media (max-width: " + below(size.sm) + ")",
+  md: "@media (max-width: " + below(size.md) + ")",
+  lg: "@media (max-width: " + below(size.lg) + ")",
+  xl: "@media (max-width: " + below(size.xl) + ")",
+  xxl: "@media (max-width: " + below(size.xxl) + ")"
+};
 //# sourceMappingURL=BreakPoints.js.map

package/dist/esm/components/BreakPoints.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreakPoints.js","names":["size","sm","md","lg","xl","xxl","screen"],"sources":["../../../src/components/BreakPoints.ts"],"sourcesContent":["import { theme } from \"twin.macro\";\n\nconst size = {\n  sm: theme(\"screens.sm\"),\n  md: theme(\"screens.md\"),\n  lg: theme(\"screens.lg\"),\n  xl: theme(\"screens.xl\"),\n  xxl: theme(\"screens.2xl\"),\n};\n\nexport const screen = {\n  sm: `@media (min-width: ${size.sm})`,\n  md: `@media (min-width: ${size.md})`,\n  lg: `@media (min-width: ${size.lg})`,\n  xl: `@media (min-width: ${size.xl})`,\n  xxl: `@media (min-width: ${size.xxl})`,\n};\n"],"mappings":"AAEA,MAAMA,IAAI,GAAG;EACXC,EAAE,EAAE,OAAmB;EACvBC,EAAE,EAAE,OAAmB;EACvBC,EAAE,EAAE,QAAmB;EACvBC,EAAE,EAAE,QAAmB;EACvBC,GAAG,EAAE;AACP,CAAC;AAED,OAAO,MAAMC,MAAM,GAAG;EACpBL,EAAE,0BAAwBD,IAAI,CAACC,EAAE,MAAG;EACpCC,EAAE,0BAAwBF,IAAI,CAACE,EAAE,MAAG;EACpCC,EAAE,0BAAwBH,IAAI,CAACG,EAAE,MAAG;EACpCC,EAAE,0BAAwBJ,IAAI,CAACI,EAAE,MAAG;EACpCC,GAAG,0BAAwBL,IAAI,CAACK,GAAG;AACrC,CAAC","ignoreList":[]}
+{"version":3,"file":"BreakPoints.js","names":["size","sm","md","lg","xl","xxl","screen","below","value","parseFloat","screenBelow"],"sources":["../../../src/components/BreakPoints.ts"],"sourcesContent":["import { theme } from \"twin.macro\";\n\nconst size = {\n  sm: theme(\"screens.sm\"),\n  md: theme(\"screens.md\"),\n  lg: theme(\"screens.lg\"),\n  xl: theme(\"screens.xl\"),\n  xxl: theme(\"screens.2xl\"),\n};\n\nexport const screen = {\n  sm: `@media (min-width: ${size.sm})`,\n  md: `@media (min-width: ${size.md})`,\n  lg: `@media (min-width: ${size.lg})`,\n  xl: `@media (min-width: ${size.xl})`,\n  xxl: `@media (min-width: ${size.xxl})`,\n};\n\nexport type Breakpoint = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\";\n\n// 0.02px below the breakpoint so these never overlap the min-width queries.\nconst below = (value: string): string => `${parseFloat(value) - 0.02}px`;\n\nexport const screenBelow: Record<Breakpoint, string> = {\n  sm: `@media (max-width: ${below(size.sm)})`,\n  md: `@media (max-width: ${below(size.md)})`,\n  lg: `@media (max-width: ${below(size.lg)})`,\n  xl: `@media (max-width: ${below(size.xl)})`,\n  xxl: `@media (max-width: ${below(size.xxl)})`,\n};\n"],"mappings":"AAEA,MAAMA,IAAI,GAAG;EACXC,EAAE,EAAE,OAAmB;EACvBC,EAAE,EAAE,OAAmB;EACvBC,EAAE,EAAE,QAAmB;EACvBC,EAAE,EAAE,QAAmB;EACvBC,GAAG,EAAE;AACP,CAAC;AAED,OAAO,MAAMC,MAAM,GAAG;EACpBL,EAAE,0BAAwBD,IAAI,CAACC,EAAE,MAAG;EACpCC,EAAE,0BAAwBF,IAAI,CAACE,EAAE,MAAG;EACpCC,EAAE,0BAAwBH,IAAI,CAACG,EAAE,MAAG;EACpCC,EAAE,0BAAwBJ,IAAI,CAACI,EAAE,MAAG;EACpCC,GAAG,0BAAwBL,IAAI,CAACK,GAAG;AACrC,CAAC;AAID;AACA,MAAME,KAAK,GAAIC,KAAa,IAAgBC,UAAU,CAACD,KAAK,CAAC,GAAG,IAAI,OAAI;AAExE,OAAO,MAAME,WAAuC,GAAG;EACrDT,EAAE,0BAAwBM,KAAK,CAACP,IAAI,CAACC,EAAE,CAAC,MAAG;EAC3CC,EAAE,0BAAwBK,KAAK,CAACP,IAAI,CAACE,EAAE,CAAC,MAAG;EAC3CC,EAAE,0BAAwBI,KAAK,CAACP,IAAI,CAACG,EAAE,CAAC,MAAG;EAC3CC,EAAE,0BAAwBG,KAAK,CAACP,IAAI,CAACI,EAAE,CAAC,MAAG;EAC3CC,GAAG,0BAAwBE,KAAK,CAACP,IAAI,CAACK,GAAG,CAAC;AAC5C,CAAC","ignoreList":[]}

package/dist/esm/components/Columns/Columns.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { Breakpoint } from "../BreakPoints";
+import { Align, Space } from "../LayoutTokens";
+export interface IColumnsProps extends React.ComponentPropsWithoutRef<"div"> {
+    widths?: number[];
+    space?: Space;
+    alignY?: Align;
+    collapseBelow?: Breakpoint;
+}
+export declare const Columns: React.ForwardRefExoticComponent<IColumnsProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Columns.d.ts.map

package/dist/esm/components/Columns/Columns.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Columns.d.ts","sourceRoot":"","sources":["../../../../src/components/Columns/Columns.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAE/C,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IAC1E,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,aAAa,CAAC,EAAE,UAAU,CAAC;CAC5B;AAED,eAAO,MAAM,OAAO,sFA+BnB,CAAC"}

package/dist/esm/components/Columns/Columns.js

@@ -0,0 +1,34 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["widths", "space", "alignY", "collapseBelow", "children"];
+import React, { forwardRef } from "react";
+import { StyledColumns } from "./Styles";
+export const Columns = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let widths = _ref.widths,
+    _ref$space = _ref.space,
+    space = _ref$space === void 0 ? "lg" : _ref$space,
+    _ref$alignY = _ref.alignY,
+    alignY = _ref$alignY === void 0 ? "stretch" : _ref$alignY,
+    collapseBelow = _ref.collapseBelow,
+    children = _ref.children,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(StyledColumns, _extends({
+    ref: ref,
+    $space: space,
+    $alignY: alignY,
+    $collapse: collapseBelow
+  }, rest), React.Children.toArray(children).map((child, index) => {
+    var _widths$index;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "c-columns-col"
+      // eslint-disable-next-line react/no-array-index-key
+      ,
+      key: index,
+      style: {
+        flex: ((_widths$index = widths == null ? void 0 : widths[index]) != null ? _widths$index : 1) + " 1 0"
+      }
+    }, child);
+  }));
+});
+Columns.displayName = "Columns";
+//# sourceMappingURL=Columns.js.map

package/dist/esm/components/Columns/Columns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Columns.js","names":["React","forwardRef","StyledColumns","Columns","_ref","ref","widths","_ref$space","space","_ref$alignY","alignY","collapseBelow","children","rest","_objectWithoutPropertiesLoose","_excluded","createElement","_extends","$space","$alignY","$collapse","Children","toArray","map","child","index","_widths$index","className","key","style","flex","displayName"],"sources":["../../../../src/components/Columns/Columns.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\n\nimport { StyledColumns } from \"./Styles\";\nimport { Breakpoint } from \"../BreakPoints\";\nimport { Align, Space } from \"../LayoutTokens\";\n\nexport interface IColumnsProps extends React.ComponentPropsWithoutRef<\"div\"> {\n  widths?: number[];\n  space?: Space;\n  alignY?: Align;\n  collapseBelow?: Breakpoint;\n}\n\nexport const Columns = forwardRef<HTMLDivElement, IColumnsProps>(\n  (\n    {\n      widths,\n      space = \"lg\",\n      alignY = \"stretch\",\n      collapseBelow,\n      children,\n      ...rest\n    },\n    ref\n  ) => (\n    <StyledColumns\n      ref={ref}\n      $space={space}\n      $alignY={alignY}\n      $collapse={collapseBelow}\n      {...rest}\n    >\n      {React.Children.toArray(children).map((child, index) => (\n        <div\n          className=\"c-columns-col\"\n          // eslint-disable-next-line react/no-array-index-key\n          key={index}\n          style={{ flex: `${widths?.[index] ?? 1} 1 0` }}\n        >\n          {child}\n        </div>\n      ))}\n    </StyledColumns>\n  )\n);\n\nColumns.displayName = \"Columns\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AAEzC,SAASC,aAAa,QAAQ,UAAU;AAWxC,OAAO,MAAMC,OAAO,gBAAGF,UAAU,CAC/B,CAAAG,IAAA,EASEC,GAAG;EAAA,IAPDC,MAAM,GAAAF,IAAA,CAANE,MAAM;IAAAC,UAAA,GAAAH,IAAA,CACNI,KAAK;IAALA,KAAK,GAAAD,UAAA,cAAG,IAAI,GAAAA,UAAA;IAAAE,WAAA,GAAAL,IAAA,CACZM,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,SAAS,GAAAA,WAAA;IAClBE,aAAa,GAAAP,IAAA,CAAbO,aAAa;IACbC,QAAQ,GAAAR,IAAA,CAARQ,QAAQ;IACLC,IAAI,GAAAC,6BAAA,CAAAV,IAAA,EAAAW,SAAA;EAAA,oBAITf,KAAA,CAAAgB,aAAA,CAACd,aAAa,EAAAe,QAAA;IACZZ,GAAG,EAAEA,GAAI;IACTa,MAAM,EAAEV,KAAM;IACdW,OAAO,EAAET,MAAO;IAChBU,SAAS,EAAET;EAAc,GACrBE,IAAI,GAEPb,KAAK,CAACqB,QAAQ,CAACC,OAAO,CAACV,QAAQ,CAAC,CAACW,GAAG,CAAC,CAACC,KAAK,EAAEC,KAAK;IAAA,IAAAC,aAAA;IAAA,oBACjD1B,KAAA,CAAAgB,aAAA;MACEW,SAAS,EAAC;MACV;MAAA;MACAC,GAAG,EAAEH,KAAM;MACXI,KAAK,EAAE;QAAEC,IAAI,IAAAJ,aAAA,GAAKpB,MAAM,oBAANA,MAAM,CAAGmB,KAAK,CAAC,YAAAC,aAAA,GAAI,CAAC;MAAO;IAAE,GAE9CF,KACE,CAAC;EAAA,CACP,CACY,CAAC;AAAA,CAEpB,CAAC;AAEDrB,OAAO,CAAC4B,WAAW,GAAG,SAAS","ignoreList":[]}

package/dist/esm/components/Columns/Styles.d.ts

@@ -0,0 +1,8 @@
+import { Breakpoint } from "../BreakPoints";
+import { Align, Space } from "../LayoutTokens";
+export declare const StyledColumns: import("styled-components").StyledComponent<"div", any, {
+    $space: Space;
+    $alignY: Align;
+    $collapse?: Breakpoint;
+}, never>;
+//# sourceMappingURL=Styles.d.ts.map

package/dist/esm/components/Columns/Styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Columns/Styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAe,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,KAAK,EAAc,KAAK,EAAS,MAAM,iBAAiB,CAAC;AAElE,eAAO,MAAM,aAAa;YAChB,KAAK;aACJ,KAAK;gBACF,UAAU;SAyBvB,CAAC"}

package/dist/esm/components/Columns/Styles.js

@@ -0,0 +1,18 @@
+import styled, { css } from "styled-components";
+import { screenBelow } from "../BreakPoints";
+import { FLEX_ALIGN, SPACE } from "../LayoutTokens";
+export const StyledColumns = styled.div.withConfig({
+  displayName: "Styles__StyledColumns",
+  componentId: "sc-1n1enni-0"
+})(["display:flex;flex-direction:row;align-items:", ";gap:", ";> .c-columns-col{min-width:0;}", ""], _ref => {
+  let $alignY = _ref.$alignY;
+  return FLEX_ALIGN[$alignY];
+}, _ref2 => {
+  let $space = _ref2.$space;
+  return SPACE[$space];
+}, _ref3 => {
+  let $collapse = _ref3.$collapse;
+  return $collapse && css(["", "{flex-direction:column;align-items:stretch;> .c-columns-col{flex:0 0 auto !important;width:100%;}}"], screenBelow[$collapse]);
+});
+StyledColumns.displayName = "StyledColumns";
+//# sourceMappingURL=Styles.js.map