@activecollab/components 2.0.416 → 2.0.418

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

@@ -1,10 +1,11 @@
-import React, { useCallback, useContext, useState } from "react";
+import React, { useContext } from "react";
 import styled from "styled-components";
+import { MessageFeedback } from "./MessageFeedback";
 import { screenBelow } from "../../components/BreakPoints";
 import { Button } from "../../components/Button";
 import { Columns } from "../../components/Columns";
 import { IconButton } from "../../components/IconButton";
-import { CancelCrossIcon, ThumbUpOutlineIcon } from "../../components/Icons";
+import { CancelCrossIcon } from "../../components/Icons";
 import { InfoBox } from "../../components/InfoBox";
 import { Media } from "../../components/Media";
 import { Modal } from "../../components/Modal";
@@ -40,63 +41,27 @@ const DIALOG_WIDTH = {
   lg: "880px"
 };
 
-/* Feedback — the thumbs up / down slot. Down-vote reuses the up icon,
-   rotated (the DS set only ships ThumbUpOutlineIcon). */
-const StyledFeedback = styled.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);}"], screenBelow.sm);
-const DialogFeedback = _ref => {
-  let onVote = _ref.onVote;
-  const _useState = useState(null),
-    voted = _useState[0],
-    setVoted = _useState[1];
-  const vote = useCallback(value => {
-    setVoted(value);
-    onVote == null || onVote(value);
-  }, [onVote]);
-  return /*#__PURE__*/React.createElement(StyledFeedback, null, voted ? /*#__PURE__*/React.createElement(Body2, {
-    color: "secondary"
-  }, "Thanks for your feedback!") : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Body2, {
-    color: "secondary",
-    className: "fb-question"
-  }, "Was this helpful?"), /*#__PURE__*/React.createElement(Tooltip, {
-    title: "Yes, helpful"
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    type: "button",
-    variant: "text gray",
-    className: "fb-btn",
-    "aria-label": "Yes, helpful",
-    onClick: () => vote("up")
-  }, /*#__PURE__*/React.createElement(ThumbUpOutlineIcon, null))), /*#__PURE__*/React.createElement(Tooltip, {
-    title: "No, not helpful"
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    type: "button",
-    variant: "text gray",
-    className: "fb-btn fb-down",
-    "aria-label": "No, not helpful",
-    onClick: () => vote("down")
-  }, /*#__PURE__*/React.createElement(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. */
 const StyledDialog = styled.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;}}"], _ref2 => {
-  let $size = _ref2.$size;
+  componentId: "sc-1kt5lil-0"
+})(["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;}}"], _ref => {
+  let $size = _ref.$size;
   return DIALOG_WIDTH[$size];
 }, screenBelow.sm, screenBelow.sm);
-export const MessageDialog = _ref3 => {
-  let open = _ref3.open,
-    onClose = _ref3.onClose,
-    _ref3$size = _ref3.size,
-    size = _ref3$size === void 0 ? "md" : _ref3$size,
-    onVote = _ref3.onVote,
-    children = _ref3.children;
+export const MessageDialog = _ref2 => {
+  let open = _ref2.open,
+    onClose = _ref2.onClose,
+    _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? "md" : _ref2$size,
+    _ref2$feedback = _ref2.feedback,
+    feedback = _ref2$feedback === void 0 ? false : _ref2$feedback,
+    onVote = _ref2.onVote,
+    onFeedbackSubmit = _ref2.onFeedbackSubmit,
+    children = _ref2.children;
   return /*#__PURE__*/React.createElement(Modal, {
     open: open,
     onClose: onClose
@@ -113,8 +78,9 @@ export const MessageDialog = _ref3 => {
     onClick: onClose
   }, /*#__PURE__*/React.createElement(CancelCrossIcon, null)))), /*#__PURE__*/React.createElement("div", {
     className: "dlg-content"
-  }, children), onVote ? /*#__PURE__*/React.createElement(DialogFeedback, {
-    onVote: onVote
+  }, children), feedback ? /*#__PURE__*/React.createElement(MessageFeedback, {
+    onVote: onVote,
+    onSubmit: onFeedbackSubmit
   }) : null));
 };
 
@@ -133,20 +99,20 @@ export const DocLinkContext = /*#__PURE__*/React.createContext(() => undefined);
 /* interface-name — the name of an interface element, e.g. the Security page. */
 const StyledInterfaceName = styled.span.withConfig({
   displayName: "MessageDialog__StyledInterfaceName",
-  componentId: "sc-1kt5lil-2"
+  componentId: "sc-1kt5lil-1"
 })(["padding:0 4px;border-radius:4px;background-color:var(--color-theme-300);color:var(--color-theme-900);font-weight:600;white-space:nowrap;"]);
-const InterfaceNameMark = _ref4 => {
-  let children = _ref4.children;
+const InterfaceNameMark = _ref3 => {
+  let children = _ref3.children;
   return /*#__PURE__*/React.createElement(StyledInterfaceName, null, children);
 };
 
 /* keyboard-key — a keyboard key cap. */
 const StyledKeyboardKey = styled.kbd.withConfig({
   displayName: "MessageDialog__StyledKeyboardKey",
-  componentId: "sc-1kt5lil-3"
+  componentId: "sc-1kt5lil-2"
 })(["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;"]);
-const KeyboardKeyMark = _ref5 => {
-  let children = _ref5.children;
+const KeyboardKeyMark = _ref4 => {
+  let children = _ref4.children;
   return /*#__PURE__*/React.createElement(StyledKeyboardKey, null, children);
 };
 
@@ -158,11 +124,11 @@ const KeyboardKeyMark = _ref5 => {
    surrounding copy — just recoloured. */
 const StyledDocLink = styled(InlineLink).withConfig({
   displayName: "MessageDialog__StyledDocLink",
-  componentId: "sc-1kt5lil-4"
+  componentId: "sc-1kt5lil-3"
 })(["color:var(--color-secondary);text-decoration-color:var(--color-secondary);"]);
-const DocLinkMark = _ref6 => {
-  let mark = _ref6.mark,
-    children = _ref6.children;
+const DocLinkMark = _ref5 => {
+  let mark = _ref5.mark,
+    children = _ref5.children;
   const openArticle = useContext(DocLinkContext);
   return /*#__PURE__*/React.createElement(StyledDocLink, {
     href: "#",
@@ -183,12 +149,12 @@ const CALLOUT_TYPE = {
   note: "note",
   success: "success"
 };
-const CalloutObject = _ref7 => {
-  var _ref8;
-  let node = _ref7.node,
-    children = _ref7.children;
+const CalloutObject = _ref6 => {
+  var _ref7;
+  let node = _ref6.node,
+    children = _ref6.children;
   return /*#__PURE__*/React.createElement(InfoBox, {
-    type: CALLOUT_TYPE[(_ref8 = node.tone) != null ? _ref8 : "info"],
+    type: CALLOUT_TYPE[(_ref7 = node.tone) != null ? _ref7 : "info"],
     title: node.title,
     showIcon: true
   }, children);
@@ -199,18 +165,18 @@ const CalloutObject = _ref7 => {
    intentionally non-interactive. */
 const StyledButtonReference = styled.div.withConfig({
   displayName: "MessageDialog__StyledButtonReference",
-  componentId: "sc-1kt5lil-5"
+  componentId: "sc-1kt5lil-4"
 })(["display:flex;.c-button{pointer-events:none;}"]);
-const ButtonReferenceObject = _ref9 => {
-  var _ref0;
-  let node = _ref9.node;
+const ButtonReferenceObject = _ref8 => {
+  var _ref9;
+  let node = _ref8.node;
   if (typeof node.label !== "string") {
     return null;
   }
   return /*#__PURE__*/React.createElement(StyledButtonReference, {
     "aria-hidden": "true"
   }, /*#__PURE__*/React.createElement(Button, {
-    variant: (_ref0 = node.variant) != null ? _ref0 : "primary",
+    variant: (_ref9 = node.variant) != null ? _ref9 : "primary",
     size: "small",
     type: "button",
     tabIndex: -1
@@ -218,22 +184,22 @@ const ButtonReferenceObject = _ref9 => {
 };
 
 /* row — a horizontal run of blocks (e.g. two button references). */
-const RowObject = _ref1 => {
-  var _ref10;
-  let node = _ref1.node,
-    children = _ref1.children;
+const RowObject = _ref0 => {
+  var _ref1;
+  let node = _ref0.node,
+    children = _ref0.children;
   return /*#__PURE__*/React.createElement(Row, {
-    space: (_ref10 = node.space) != null ? _ref10 : "sm"
+    space: (_ref1 = node.space) != null ? _ref1 : "sm"
   }, children);
 };
 
 /* tiles — an equal-size mosaic of blocks. */
-const TilesObject = _ref11 => {
-  var _ref12;
-  let node = _ref11.node,
-    children = _ref11.children;
+const TilesObject = _ref10 => {
+  var _ref11;
+  let node = _ref10.node,
+    children = _ref10.children;
   return /*#__PURE__*/React.createElement(Tiles, {
-    columns: (_ref12 = node.columns) != null ? _ref12 : 3,
+    columns: (_ref11 = node.columns) != null ? _ref11 : 3,
     space: "md",
     collapseBelow: "sm"
   }, children);
@@ -243,12 +209,12 @@ const TilesObject = _ref11 => {
    screenshots sit on the right, flat illustrations on the left. `widths` is
    authored as [text, media] and reordered with the columns. */
 
-const SplitObject = _ref13 => {
-  var _ref14;
-  let node = _ref13.node,
-    children = _ref13.children;
+const SplitObject = _ref12 => {
+  var _ref13;
+  let node = _ref12.node,
+    children = _ref12.children;
   const media = node.media;
-  const widths = (_ref14 = node.widths) != null ? _ref14 : [1, 1];
+  const widths = (_ref13 = node.widths) != null ? _ref13 : [1, 1];
   const textColumn = /*#__PURE__*/React.createElement(Stack, {
     space: "lg"
   }, children);
@@ -277,15 +243,15 @@ const SplitObject = _ref13 => {
 /* 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. */
-const ParagraphBlock = _ref15 => {
-  let children = _ref15.children;
+const ParagraphBlock = _ref14 => {
+  let children = _ref14.children;
   return /*#__PURE__*/React.createElement(Body2, {
     color: "secondary",
     lineHeight: "loose"
   }, children);
 };
-const ListItemBlock = _ref16 => {
-  let children = _ref16.children;
+const ListItemBlock = _ref15 => {
+  let children = _ref15.children;
   return /*#__PURE__*/React.createElement(Typography, {
     variant: "Body 2",
     as: "li",
@@ -297,12 +263,12 @@ const ListItemBlock = _ref16 => {
 /* Titled sections speak in the quiet Header2 subhead voice rather than the
    engine's default Title2 for level 2, and keep a roomier rhythm between a
    titled section's content nodes. */
-const TitledTextBlock = _ref17 => {
-  let block = _ref17.block,
-    children = _ref17.children;
-  const _ref18 = block,
-    title = _ref18.title,
-    level = _ref18.level;
+const TitledTextBlock = _ref16 => {
+  let block = _ref16.block,
+    children = _ref16.children;
+  const _ref17 = block,
+    title = _ref17.title,
+    level = _ref17.level;
   return /*#__PURE__*/React.createElement(TitledText, {
     title: title,
     variant: level === 1 ? "title1" : "header2"

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

@@ -1 +1 @@
-{"version":3,"file":"MessageDialog.js","names":["React","useCallback","useContext","useState","styled","screenBelow","Button","Columns","IconButton","CancelCrossIcon","ThumbUpOutlineIcon","InfoBox","Media","Modal","StyledLink","InlineLink","Row","Stack","Tiles","TitledText","Tooltip","Body2","Typography","DIALOG_WIDTH","sm","md","lg","StyledFeedback","div","withConfig","displayName","componentId","DialogFeedback","_ref","onVote","_useState","voted","setVoted","vote","value","createElement","color","Fragment","className","title","type","variant","onClick","StyledDialog","_ref2","$size","MessageDialog","_ref3","open","onClose","_ref3$size","size","children","DocLinkContext","createContext","undefined","StyledInterfaceName","span","InterfaceNameMark","_ref4","StyledKeyboardKey","kbd","KeyboardKeyMark","_ref5","StyledDocLink","DocLinkMark","_ref6","mark","openArticle","href","event","preventDefault","article","CALLOUT_TYPE","info","note","success","CalloutObject","_ref7","_ref8","node","tone","showIcon","StyledButtonReference","ButtonReferenceObject","_ref9","_ref0","label","tabIndex","RowObject","_ref1","_ref10","space","TilesObject","_ref11","_ref12","columns","collapseBelow","SplitObject","_ref13","_ref14","media","widths","textColumn","src","screenshot","mediaColumn","alt","caption","reverse","alignY","ParagraphBlock","_ref15","lineHeight","ListItemBlock","_ref16","as","TitledTextBlock","_ref17","block","_ref18","level","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  PortableTextBlockRenderer,\n  PortableTextComponents,\n  PortableTextMarkRenderer,\n  PortableTextMediaImageVariant,\n  PortableTextObjectRenderer,\n  PortableTextTitledTextBlock,\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 { TitledText } from \"../../components/TitledText\";\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  // Split never carries a video: video media always stays in the vertical flow.\n  variant?: PortableTextMediaImageVariant;\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/* Titled sections speak in the quiet Header2 subhead voice rather than the\n   engine's default Title2 for level 2, and keep a roomier rhythm between a\n   titled section's content nodes. */\nconst TitledTextBlock: PortableTextBlockRenderer = ({ block, children }) => {\n  const { title, level } = block as PortableTextTitledTextBlock;\n\n  return (\n    <TitledText title={title} variant={level === 1 ? \"title1\" : \"header2\"}>\n      {children ? <Stack space=\"sm\">{children}</Stack> : undefined}\n    </TitledText>\n  );\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":[]}
+{"version":3,"file":"MessageDialog.js","names":["React","useContext","styled","MessageFeedback","screenBelow","Button","Columns","IconButton","CancelCrossIcon","InfoBox","Media","Modal","StyledLink","InlineLink","Row","Stack","Tiles","TitledText","Tooltip","Body2","Typography","DIALOG_WIDTH","sm","md","lg","StyledDialog","div","withConfig","displayName","componentId","_ref","$size","MessageDialog","_ref2","open","onClose","_ref2$size","size","_ref2$feedback","feedback","onVote","onFeedbackSubmit","children","createElement","className","title","type","variant","onClick","onSubmit","DocLinkContext","createContext","undefined","StyledInterfaceName","span","InterfaceNameMark","_ref3","StyledKeyboardKey","kbd","KeyboardKeyMark","_ref4","StyledDocLink","DocLinkMark","_ref5","mark","openArticle","href","event","preventDefault","article","CALLOUT_TYPE","info","note","success","CalloutObject","_ref6","_ref7","node","tone","showIcon","StyledButtonReference","ButtonReferenceObject","_ref8","_ref9","label","tabIndex","RowObject","_ref0","_ref1","space","TilesObject","_ref10","_ref11","columns","collapseBelow","SplitObject","_ref12","_ref13","media","widths","textColumn","src","screenshot","mediaColumn","alt","caption","reverse","alignY","ParagraphBlock","_ref14","color","lineHeight","ListItemBlock","_ref15","as","TitledTextBlock","_ref16","block","_ref17","level","messageComponents","marks","objects","callout","row","tiles","split","blocks","paragraph"],"sources":["../../../../src/presentation/shared/MessageDialog.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode, useContext } from \"react\";\n\nimport styled from \"styled-components\";\n\nimport { MessageFeedback } from \"./MessageFeedback\";\nimport type { MessageFeedbackResult } from \"./MessageFeedback\";\nimport { screenBelow } from \"../../components/BreakPoints\";\nimport { Button } from \"../../components/Button\";\nimport { Columns } from \"../../components/Columns\";\nimport { IconButton } from \"../../components/IconButton\";\nimport { CancelCrossIcon } 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  PortableTextBlockRenderer,\n  PortableTextComponents,\n  PortableTextMarkRenderer,\n  PortableTextMediaImageVariant,\n  PortableTextObjectRenderer,\n  PortableTextTitledTextBlock,\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 { TitledText } from \"../../components/TitledText\";\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/* 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  /** Show the reusable helpful / not-helpful feedback flow. */\n  feedback?: boolean;\n  /** Fired when a thumb is pressed (the vote itself). */\n  onVote?: (sentiment: \"up\" | \"down\") => void;\n  /** Fired on Submit, with the chosen options and comment. */\n  onFeedbackSubmit?: (result: MessageFeedbackResult) => void;\n  children: ReactNode;\n}\n\nexport const MessageDialog = ({\n  open,\n  onClose,\n  size = \"md\",\n  feedback = false,\n  onVote,\n  onFeedbackSubmit,\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      {feedback ? (\n        <MessageFeedback onVote={onVote} onSubmit={onFeedbackSubmit} />\n      ) : 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  // Split never carries a video: video media always stays in the vertical flow.\n  variant?: PortableTextMediaImageVariant;\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/* Titled sections speak in the quiet Header2 subhead voice rather than the\n   engine's default Title2 for level 2, and keep a roomier rhythm between a\n   titled section's content nodes. */\nconst TitledTextBlock: PortableTextBlockRenderer = ({ block, children }) => {\n  const { title, level } = block as PortableTextTitledTextBlock;\n\n  return (\n    <TitledText title={title} variant={level === 1 ? \"title1\" : \"header2\"}>\n      {children ? <Stack space=\"sm\">{children}</Stack> : undefined}\n    </TitledText>\n  );\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/esm/presentation/shared/MessageFeedback.d.ts

@@ -0,0 +1,54 @@
+import { ReactElement, ReactNode } from "react";
+/**
+ * MessageFeedback — the reusable "Was this helpful?" flow, as a Presentation
+ * mock.
+ *
+ * It is built only from design-system parts and owns the whole flow, so any
+ * content surface (the message dialog, a help article, a settings panel) can
+ * drop it in and get the same behaviour:
+ *
+ *  1. Prompt   — an inline "Was this helpful?" row with a thumb up / down.
+ *  2. Details  — a centred dialog: option chips for the chosen sentiment,
+ *                plus an optional free-text comment. Submit or Cancel.
+ *  3. Thank you — a short confirmation, then the prompt shows a quiet
+ *                "Thanks for your feedback!".
+ *
+ * The vote is recorded the moment a thumb is pressed (`onVote`), so a user who
+ * cancels the details step still leaves a valid vote — the same contract the
+ * trial Feedback flow uses. The details are reported on Submit (`onSubmit`).
+ *
+ * In the product this lives in application code; the presentation ships this
+ * demo copy so the stories need no app imports.
+ */
+export type FeedbackSentiment = "up" | "down";
+export interface FeedbackOption {
+    /** Stable id sent with the feedback record; not shown to the user. */
+    id: string;
+    /** The chip label the user sees. */
+    label: string;
+}
+export interface MessageFeedbackResult {
+    sentiment: FeedbackSentiment;
+    /** The ids of the chosen option chips. */
+    options: string[];
+    /** The free-text comment, trimmed; "" when left blank. */
+    comment: string;
+}
+export declare const POSITIVE_FEEDBACK_OPTIONS: FeedbackOption[];
+export declare const NEGATIVE_FEEDBACK_OPTIONS: FeedbackOption[];
+export interface MessageFeedbackProps {
+    /** The inline prompt copy. */
+    question?: ReactNode;
+    /** Details-dialog title for a thumb up / down. */
+    positiveTitle?: string;
+    negativeTitle?: string;
+    /** Option catalogs; default to the content-feedback sets above. */
+    positiveOptions?: FeedbackOption[];
+    negativeOptions?: FeedbackOption[];
+    /** Fired the moment a thumb is pressed (the vote itself). */
+    onVote?: (sentiment: FeedbackSentiment) => void;
+    /** Fired on Submit, with the chosen options and comment. */
+    onSubmit?: (result: MessageFeedbackResult) => void;
+}
+export declare const MessageFeedback: ({ question, positiveTitle, negativeTitle, positiveOptions, negativeOptions, onVote, onSubmit, }: MessageFeedbackProps) => ReactElement;
+//# sourceMappingURL=MessageFeedback.d.ts.map

package/dist/esm/presentation/shared/MessageFeedback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageFeedback.d.ts","sourceRoot":"","sources":["../../../../src/presentation/shared/MessageFeedback.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,YAAY,EAAE,SAAS,EAAyB,MAAM,OAAO,CAAC;AAe9E;;;;;;;;;;;;;;;;;;;;GAoBG;AAIH,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,MAAM,CAAC;AAE9C,MAAM,WAAW,cAAc;IAC7B,sEAAsE;IACtE,EAAE,EAAE,MAAM,CAAC;IACX,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,qBAAqB;IACpC,SAAS,EAAE,iBAAiB,CAAC;IAC7B,0CAA0C;IAC1C,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,0DAA0D;IAC1D,OAAO,EAAE,MAAM,CAAC;CACjB;AAKD,eAAO,MAAM,yBAAyB,EAAE,cAAc,EAOrD,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,cAAc,EAUrD,CAAC;AA+GF,MAAM,WAAW,oBAAoB;IACnC,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,kDAAkD;IAClD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mEAAmE;IACnE,eAAe,CAAC,EAAE,cAAc,EAAE,CAAC;IACnC,eAAe,CAAC,EAAE,cAAc,EAAE,CAAC;IACnC,6DAA6D;IAC7D,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAChD,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACpD;AAED,eAAO,MAAM,eAAe,GAAI,iGAQ7B,oBAAoB,KAAG,YA8IzB,CAAC"}