npm - @activecollab/components - Versions diffs - 2.0.441 → 2.0.443 - Mend

@activecollab/components 2.0.441 → 2.0.443

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (78) hide show

package/dist/cjs/components/Dialog/Styles.js CHANGED Viewed

@@ -62,7 +62,7 @@ StyledDialogTitleClose.displayName = "StyledDialogTitleClose";
 var StyledDialogContent = exports.StyledDialogContent = _styledComponents.default.div.withConfig({
   displayName: "Styles__StyledDialogContent",
   componentId: "sc-jwpvgm-5"
-})(["padding:20px 30px;flex:1 1 auto;min-height:0;overflow-y:", ";", " ", ""], function (props) {
+})(["padding:20px 30px;flex:1 1 auto;min-height:0;overscroll-behavior:contain;overflow-y:", ";", " ", ""], function (props) {
   return props.$scroll ? "auto" : "visible";
 }, _FontStyle.FontStyle, _BoxSizingStyle.BoxSizingStyle);
 StyledDialogContent.displayName = "StyledDialogContent";

package/dist/cjs/components/Dialog/Styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_BoxSizingStyle","_BreakPoints","_FontStyle","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","dialogSizes","exports","s","m","l","xl","xxl","xxxl","MIN_GAP","MAX_DIALOG_HEIGHT","StyledDialogViewport","styled","div","withConfig","displayName","componentId","screen","sm","BoxSizingStyle","StyledDialog","props","$maxWidth","$height","css","FontStyle","StyledDialogTitle","CLOSE_OFFSET","CLOSE_RESERVE","StyledDialogTitleBar","StyledDialogTitleClose","StyledDialogContent","$scroll","StyledDialogContentDivider","StyledDialogActions"],"sources":["../../../../src/components/Dialog/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { screen } from \"../BreakPoints\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const dialogSizes = {\n s: 440,\n m: 540,\n l: 700,\n xl: 840,\n xxl: 1000,\n xxxl: 1120,\n} as const;\n\nexport type DialogSize = keyof typeof dialogSizes;\n\nconst MIN_GAP = \"2.5vh\";\nconst MAX_DIALOG_HEIGHT = \"95vh\";\n\n// The dialog hangs at a fixed offset while there is room below it, then grows in both directions at\n// once. Two shrinkable spacers express that: only the lower one grows, and past the crossover both\n// shrink from the same basis, so the gaps stay equal down to MIN_GAP.\nexport const StyledDialogViewport = styled.div`\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-left: 16px;\n padding-right: 16px;\n pointer-events: none;\n\n --ac-dialog-offset: 60px;\n\n ${screen.sm} {\n --ac-dialog-offset: 126px;\n }\n\n &::before,\n &::after {\n content: \"\";\n flex-shrink: 1;\n flex-basis: var(--ac-dialog-offset);\n min-height: ${MIN_GAP};\n }\n\n &::before {\n flex-grow: 0;\n }\n\n &::after {\n flex-grow: 1;\n }\n\n ${BoxSizingStyle}\n`;\n\nStyledDialogViewport.displayName = \"StyledDialogViewport\";\n\nexport const StyledDialog = styled.div<{\n $maxWidth: number;\n $height?: string;\n}>`\n display: flex;\n flex-direction: column;\n flex: 0 0 auto;\n pointer-events: auto;\n width: 100%;\n max-width: ${(props) => props.$maxWidth}px;\n max-height: ${MAX_DIALOG_HEIGHT};\n background-color: var(--page-paper-main);\n color: var(--color-theme-900);\n box-shadow: var(--shadow-primary);\n border-radius: 8px;\n position: relative;\n transition: max-width 0.2s ease, height 0.2s ease;\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n\n ${(props) =>\n props.$height &&\n css`\n height: ${props.$height};\n `}\n\n ${FontStyle}\n ${BoxSizingStyle}\n`;\n\nStyledDialog.displayName = \"StyledDialog\";\n\nexport const StyledDialogTitle = styled.div`\n padding: 20px 30px;\n flex: 0 0 auto;\n\n ${FontStyle}\n ${BoxSizingStyle}\n`;\nStyledDialogTitle.displayName = \"StyledDialogTitle\";\n\n// The close button hangs 8px into the title padding, so it sits nearer the dialog edge than the\n// heading does. The bar reserves the rest, which keeps the gap to the heading unchanged.\nconst CLOSE_OFFSET = 8;\nconst CLOSE_RESERVE = 44 - CLOSE_OFFSET;\n\n// The header is as tall as its heading, with or without a close button.\nexport const StyledDialogTitleBar = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n padding-right: ${CLOSE_RESERVE}px;\n`;\nStyledDialogTitleBar.displayName = \"StyledDialogTitleBar\";\n\nexport const StyledDialogTitleClose = styled.div`\n position: absolute;\n right: -${CLOSE_OFFSET}px;\n top: 50%;\n transform: translateY(-50%);\n line-height: 0;\n`;\nStyledDialogTitleClose.displayName = \"StyledDialogTitleClose\";\n\nexport const StyledDialogContent = styled.div<{ $scroll: boolean }>`\n padding: 20px 30px;\n flex: 1 1 auto;\n min-height: 0;\n overflow-y: ${(props) => (props.$scroll ? \"auto\" : \"visible\")};\n\n ${FontStyle}\n ${BoxSizingStyle}\n`;\nStyledDialogContent.displayName = \"StyledDialogContent\";\n\nexport const StyledDialogContentDivider = styled.div`\n border-top: 1px solid var(--border-primary);\n height: 1px;\n flex: 0 0 auto;\n`;\nStyledDialogContentDivider.displayName = \"StyledDialogContentDivider\";\n\nexport const StyledDialogActions = styled.div`\n padding: 20px 30px;\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n gap: 12px;\n\n ${FontStyle}\n ${BoxSizingStyle}\n`;\nStyledDialogActions.displayName = \"StyledDialogActions\";\n"],"mappings":"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~~,+EAI7B~~,UAACK,KAAK;EAAA,OAAMA,KAAK,CAACW,OAAO,GAAG,MAAM,GAAG,SAAS;AAAA,CAAC,EAE3DP,oBAAS,EACTN,8BAAc,CACjB;AACDY,mBAAmB,CAAChB,WAAW,GAAG,qBAAqB;AAEhD,IAAMkB,0BAA0B,GAAA/B,OAAA,CAAA+B,0BAAA,GAAGrB,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,4EAInD;AACDiB,0BAA0B,CAAClB,WAAW,GAAG,4BAA4B;AAE9D,IAAMmB,mBAAmB,GAAAhC,OAAA,CAAAgC,mBAAA,GAAGtB,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,2FAOzCS,oBAAS,EACTN,8BAAc,CACjB;AACDe,mBAAmB,CAACnB,WAAW,GAAG,qBAAqB","ignoreList":[]}
1	+ {"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","_BoxSizingStyle","_BreakPoints","_FontStyle","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","dialogSizes","exports","s","m","l","xl","xxl","xxxl","MIN_GAP","MAX_DIALOG_HEIGHT","StyledDialogViewport","styled","div","withConfig","displayName","componentId","screen","sm","BoxSizingStyle","StyledDialog","props","$maxWidth","$height","css","FontStyle","StyledDialogTitle","CLOSE_OFFSET","CLOSE_RESERVE","StyledDialogTitleBar","StyledDialogTitleClose","StyledDialogContent","$scroll","StyledDialogContentDivider","StyledDialogActions"],"sources":["../../../../src/components/Dialog/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { screen } from \"../BreakPoints\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const dialogSizes = {\n s: 440,\n m: 540,\n l: 700,\n xl: 840,\n xxl: 1000,\n xxxl: 1120,\n} as const;\n\nexport type DialogSize = keyof typeof dialogSizes;\n\nconst MIN_GAP = \"2.5vh\";\nconst MAX_DIALOG_HEIGHT = \"95vh\";\n\n// The dialog hangs at a fixed offset while there is room below it, then grows in both directions at\n// once. Two shrinkable spacers express that: only the lower one grows, and past the crossover both\n// shrink from the same basis, so the gaps stay equal down to MIN_GAP.\nexport const StyledDialogViewport = styled.div`\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-left: 16px;\n padding-right: 16px;\n pointer-events: none;\n\n --ac-dialog-offset: 60px;\n\n ${screen.sm} {\n --ac-dialog-offset: 126px;\n }\n\n &::before,\n &::after {\n content: \"\";\n flex-shrink: 1;\n flex-basis: var(--ac-dialog-offset);\n min-height: ${MIN_GAP};\n }\n\n &::before {\n flex-grow: 0;\n }\n\n &::after {\n flex-grow: 1;\n }\n\n ${BoxSizingStyle}\n`;\n\nStyledDialogViewport.displayName = \"StyledDialogViewport\";\n\nexport const StyledDialog = styled.div<{\n $maxWidth: number;\n $height?: string;\n}>`\n display: flex;\n flex-direction: column;\n flex: 0 0 auto;\n pointer-events: auto;\n width: 100%;\n max-width: ${(props) => props.$maxWidth}px;\n max-height: ${MAX_DIALOG_HEIGHT};\n background-color: var(--page-paper-main);\n color: var(--color-theme-900);\n box-shadow: var(--shadow-primary);\n border-radius: 8px;\n position: relative;\n transition: max-width 0.2s ease, height 0.2s ease;\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n\n ${(props) =>\n props.$height &&\n css`\n height: ${props.$height};\n `}\n\n ${FontStyle}\n ${BoxSizingStyle}\n`;\n\nStyledDialog.displayName = \"StyledDialog\";\n\nexport const StyledDialogTitle = styled.div`\n padding: 20px 30px;\n flex: 0 0 auto;\n\n ${FontStyle}\n ${BoxSizingStyle}\n`;\nStyledDialogTitle.displayName = \"StyledDialogTitle\";\n\n// The close button hangs 8px into the title padding, so it sits nearer the dialog edge than the\n// heading does. The bar reserves the rest, which keeps the gap to the heading unchanged.\nconst CLOSE_OFFSET = 8;\nconst CLOSE_RESERVE = 44 - CLOSE_OFFSET;\n\n// The header is as tall as its heading, with or without a close button.\nexport const StyledDialogTitleBar = styled.div`\n position: relative;\n display: flex;\n align-items: center;\n padding-right: ${CLOSE_RESERVE}px;\n`;\nStyledDialogTitleBar.displayName = \"StyledDialogTitleBar\";\n\nexport const StyledDialogTitleClose = styled.div`\n position: absolute;\n right: -${CLOSE_OFFSET}px;\n top: 50%;\n transform: translateY(-50%);\n line-height: 0;\n`;\nStyledDialogTitleClose.displayName = \"StyledDialogTitleClose\";\n\nexport const StyledDialogContent = styled.div<{ $scroll: boolean }>`\n padding: 20px 30px;\n flex: 1 1 auto;\n min-height: 0;\n overscroll-behavior: contain;\n overflow-y: ${(props) => (props.$scroll ? \"auto\" : \"visible\")};\n\n ${FontStyle}\n ${BoxSizingStyle}\n`;\nStyledDialogContent.displayName = \"StyledDialogContent\";\n\nexport const StyledDialogContentDivider = styled.div`\n border-top: 1px solid var(--border-primary);\n height: 1px;\n flex: 0 0 auto;\n`;\nStyledDialogContentDivider.displayName = \"StyledDialogContentDivider\";\n\nexport const StyledDialogActions = styled.div`\n padding: 20px 30px;\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n gap: 12px;\n\n ${FontStyle}\n ${BoxSizingStyle}\n`;\nStyledDialogActions.displayName = \"StyledDialogActions\";\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/Overlay/Overlay.js CHANGED Viewed

@@ -4,22 +4,61 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Overlay = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _overlayStack = require("./overlayStack");
 var _Styles = require("./Styles");
+var _LayerContext = require("../../helpers/LayerContext/LayerContext");
+var _layers = require("../../utils/layers");
 var _excluded = ["className", "disableBackgroundColor"];
 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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+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; }
+// Chrome samples the backdrop of every blurred overlay on every frame, and a covered one buys
+// nothing for that cost. Only the overlay on top keeps its blur.
+var useKeepsBlur = function useKeepsBlur(blurs, zIndex) {
+  var _useState = (0, _react.useState)(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    isTop = _useState2[0],
+    setIsTop = _useState2[1];
+  (0, _react.useEffect)(function () {
+    if (!blurs) {
+      return undefined;
+    }
+    var id = (0, _overlayStack.pushOverlay)(zIndex);
+    var sync = function sync() {
+      return setIsTop((0, _overlayStack.isTopOverlay)(id));
+    };
+    sync();
+    var unsubscribe = (0, _overlayStack.subscribeToOverlays)(sync);
+    return function () {
+      unsubscribe();
+      (0, _overlayStack.popOverlay)(id);
+    };
+  }, [blurs, zIndex]);
+  return blurs && isTop;
+};
 var Overlay = exports.Overlay = function Overlay(_ref) {
   var className = _ref.className,
     _ref$disableBackgroun = _ref.disableBackgroundColor,
     disableBackgroundColor = _ref$disableBackgroun === void 0 ? false : _ref$disableBackgroun,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var _useLayerContext = (0, _LayerContext.useLayerContext)(),
+    _useLayerContext$zInd = _useLayerContext.zIndex,
+    zIndex = _useLayerContext$zInd === void 0 ? _layers.layers.skyscraper : _useLayerContext$zInd;
+  var keepsBlur = useKeepsBlur(!disableBackgroundColor, zIndex);
   return /*#__PURE__*/_react.default.createElement(_Styles.StyledOverlay, _extends({
     className: (0, _classnames.default)("c-overlay", className),
-    $disableBackgroundColor: disableBackgroundColor
+    $disableBackgroundColor: disableBackgroundColor,
+    $blurs: keepsBlur
   }, rest));
 };
 Overlay.displayName = "Overlay";

package/dist/cjs/components/Overlay/Overlay.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Overlay.js","names":["_react","~~_interopRequireDefault~~","require","_classnames","_Styles","_excluded","e","__esModule","default","~~_extends~~","~~Object~~","~~assign~~","~~bind~~","n","~~arguments~~","~~length~~","t","r","hasOwnProperty","call","~~apply~~","~~_objectWithoutProperties~~","o","i","_objectWithoutPropertiesLoose","getOwnPropertySymbols","indexOf","propertyIsEnumerable","Overlay","exports","_ref","className","_ref$disableBackgroun","disableBackgroundColor","rest","createElement","StyledOverlay","classnames","$disableBackgroundColor","displayName"],"sources":["../../../../src/components/Overlay/Overlay.tsx"],"sourcesContent":["import React, { FC } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { StyledOverlay } from \"./Styles\";\n\nexport interface IOverlay {\n disableBackgroundColor?: boolean;\n}\n\nexport const Overlay: FC<\n IOverlay & Omit<React.ComponentPropsWithoutRef<\"div\">, keyof IOverlay>\n> = ({ className, disableBackgroundColor = false, ...rest }) => {\n return (\n <StyledOverlay\n className={classnames(\"c-overlay\", className)}\n $disableBackgroundColor={disableBackgroundColor}\n {...rest}\n />\n );\n};\n\nOverlay.displayName = \"Overlay\";\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,~~sBAAA~~,CAAAC,OAAA;AAEA,IAAAC,WAAA,~~GAAAF~~,sBAAA,~~CAAAC~~,OAAA;AAEA,~~IAAAE~~,OAAA,~~GAAAF~~,OAAA;~~AAAyC~~,~~IAAAG~~,SAAA;AAAA,~~SAAAJ~~,~~uBAAAK~~,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,~~SAAAG~~,SAAA,WAAAA,QAAA,~~GAAAC~~,MAAA,~~CAAAC~~,MAAA,~~GAAAD~~,MAAA,~~CAAAC~~,MAAA,CAAAC,IAAA,~~eAAAC~~,CAAA,~~aAAAP~~,CAAA,MAAAA,CAAA,~~GAAAQ~~,SAAA,CAAAC,MAAA,~~EAAAT~~,CAAA,~~UAAAU~~,CAAA,~~GAAAF~~,SAAA,~~CAAAR~~,CAAA,~~YAAAW~~,CAAA,~~IAAAD~~,CAAA,~~OAAAE~~,cAAA,CAAAC,IAAA,~~CAAAH~~,CAAA,~~EAAAC~~,CAAA,~~MAAAJ~~,CAAA,~~CAAAI~~,CAAA,~~IAAAD~~,CAAA,~~CAAAC~~,CAAA,~~aAAAJ~~,CAAA,~~KAAAJ~~,QAAA,~~CAAAW~~,KAAA,~~OAAAN~~,SAAA;AAAA,~~SAAAO~~,~~yBAAAf~~,CAAA,~~EAAAU~~,CAAA,~~gBAAAV~~,CAAA,~~iBAAAgB~~,CAAA,~~EAAAL~~,CAAA,~~EAAAM~~,CAAA,~~GAAAC~~,6BAAA,~~CAAAlB~~,CAAA,~~EAAAU~~,CAAA,~~OAAAN~~,MAAA,~~CAAAe~~,qBAAA,~~QAAAZ~~,CAAA,~~GAAAH~~,MAAA,~~CAAAe~~,qBAAA,~~CAAAnB~~,CAAA,~~QAAAW~~,CAAA,MAAAA,CAAA,~~GAAAJ~~,CAAA,~~CAAAE~~,MAAA,~~EAAAE~~,CAAA,~~IAAAK~~,CAAA,~~GAAAT~~,CAAA,~~CAAAI~~,CAAA,~~UAAAD~~,CAAA,~~CAAAU~~,OAAA,~~CAAAJ~~,CAAA,~~QAAAK~~,oBAAA,~~CAAAR~~,IAAA,~~CAAAb~~,CAAA,~~EAAAgB~~,CAAA,MAAAC,CAAA,CAAAD,CAAA,~~IAAAhB~~,CAAA,~~CAAAgB~~,CAAA,aAAAC,CAAA;AAAA,~~SAAAC~~,~~8BAAAP~~,CAAA,~~EAAAX~~,CAAA,~~gBAAAW~~,CAAA,~~iBAAAD~~,CAAA,~~gBAAAH~~,CAAA,~~IAAAI~~,CAAA,~~SAAAC~~,cAAA,CAAAC,IAAA,~~CAAAF~~,CAAA,~~EAAAJ~~,CAAA,~~gBAAAP~~,CAAA,~~CAAAoB~~,OAAA,CAAAb,CAAA,~~aAAAG~~,CAAA,~~CAAAH~~,CAAA,~~IAAAI~~,CAAA,~~CAAAJ~~,CAAA,~~YAAAG~~,CAAA;~~AAMlC~~,~~IAAMY~~,OAEZ,GAAAC,OAAA,CAAAD,OAAA,GAAG,SAFSA,OAEZA,CAAAE,IAAA,EAA+D;EAAA,IAAzDC,SAAS,GAAAD,IAAA,CAATC,SAAS;IAAAC,qBAAA,GAAAF,IAAA,CAAEG,sBAAsB;IAAtBA,sBAAsB,GAAAD,qBAAA,cAAG,KAAK,GAAAA,qBAAA;IAAKE,IAAI,~~GAAAb~~,wBAAA,~~CAAAS~~,IAAA,~~EAAAzB~~,SAAA;EACvD,~~oBACEL~~,MAAA,~~CAAAQ~~,OAAA,~~CAAA2B~~,aAAA,~~CAAC/B~~,OAAA,~~CAAAgC~~,aAAa,~~EAAA3B~~,QAAA;~~IACZsB~~,SAAS,EAAE,~~IAAAM~~,mBAAU,EAAC,WAAW,~~EAAEN~~,SAAS,CAAE;~~IAC9CO~~,uBAAuB,EAAEL;~~EAAuB~~,~~GAC5CC~~,IAAI,CACT,CAAC;AAEN,CAAC;AAEDN,OAAO,~~CAACW~~,WAAW,GAAG,SAAS","ignoreList":[]}
1	+ {"version":3,"file":"Overlay.js","names":["_react","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_overlayStack","_Styles","_LayerContext","_layers","_excluded","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","_objectWithoutProperties","_objectWithoutPropertiesLoose","getOwnPropertySymbols","indexOf","propertyIsEnumerable","_slicedToArray","_arrayWithHoles","_iterableToArrayLimit","_unsupportedIterableToArray","_nonIterableRest","TypeError","a","_arrayLikeToArray","toString","slice","constructor","name","Array","from","test","l","Symbol","iterator","u","next","done","push","value","return","isArray","useKeepsBlur","blurs","zIndex","_useState","useState","_useState2","isTop","setIsTop","useEffect","undefined","id","pushOverlay","sync","isTopOverlay","unsubscribe","subscribeToOverlays","popOverlay","Overlay","exports","_ref","className","_ref$disableBackgroun","disableBackgroundColor","rest","_useLayerContext","useLayerContext","_useLayerContext$zInd","layers","skyscraper","keepsBlur","createElement","StyledOverlay","classnames","$disableBackgroundColor","$blurs","displayName"],"sources":["../../../../src/components/Overlay/Overlay.tsx"],"sourcesContent":["import React, { FC, useEffect, useState } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport {\n isTopOverlay,\n popOverlay,\n pushOverlay,\n subscribeToOverlays,\n} from \"./overlayStack\";\nimport { StyledOverlay } from \"./Styles\";\nimport { useLayerContext } from \"../../helpers/LayerContext/LayerContext\";\nimport { layers } from \"../../utils/layers\";\n\n// Chrome samples the backdrop of every blurred overlay on every frame, and a covered one buys\n// nothing for that cost. Only the overlay on top keeps its blur.\nconst useKeepsBlur = (blurs: boolean, zIndex: number): boolean => {\n const [isTop, setIsTop] = useState(true);\n\n useEffect(() => {\n if (!blurs) {\n return undefined;\n }\n\n const id = pushOverlay(zIndex);\n const sync = () => setIsTop(isTopOverlay(id));\n\n sync();\n\n const unsubscribe = subscribeToOverlays(sync);\n\n return () => {\n unsubscribe();\n popOverlay(id);\n };\n }, [blurs, zIndex]);\n\n return blurs && isTop;\n};\n\nexport interface IOverlay {\n disableBackgroundColor?: boolean;\n}\n\nexport const Overlay: FC<\n IOverlay & Omit<React.ComponentPropsWithoutRef<\"div\">, keyof IOverlay>\n> = ({ className, disableBackgroundColor = false, ...rest }) => {\n const { zIndex = layers.skyscraper } = useLayerContext();\n const keepsBlur = useKeepsBlur(!disableBackgroundColor, zIndex);\n\n return (\n <StyledOverlay\n className={classnames(\"c-overlay\", className)}\n $disableBackgroundColor={disableBackgroundColor}\n $blurs={keepsBlur}\n {...rest}\n />\n );\n};\n\nOverlay.displayName = \"Overlay\";\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/Overlay/Styles.js CHANGED Viewed

@@ -9,8 +9,10 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var StyledOverlay = exports.StyledOverlay = _styledComponents.default.div.withConfig({
   displayName: "Styles__StyledOverlay",
   componentId: "sc-flnrpv-0"
-})(["position:fixed;top:0;right:0;bottom:0;left:0;", ""], function (props) {
-  return !props.$disableBackgroundColor && (0, _styledComponents.css)(["background:var(--modal-background);backdrop-filter:blur(2px);"]);
+})(["position:fixed;top:0;right:0;bottom:0;left:0;", " ", ""], function (props) {
+  return !props.$disableBackgroundColor && (0, _styledComponents.css)(["background:var(--modal-background);transform:translateZ(0);"]);
+}, function (props) {
+  return props.$blurs && (0, _styledComponents.css)(["backdrop-filter:blur(2px);"]);
 });
 StyledOverlay.displayName = "StyledOverlay";
 //# sourceMappingURL=Styles.js.map

package/dist/cjs/components/Overlay/Styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledOverlay","exports","styled","div","withConfig","displayName","componentId","props","$disableBackgroundColor","css"],"sources":["../../../../src/components/Overlay/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nexport const StyledOverlay = styled.div<{\n $disableBackgroundColor: boolean;\n}>`\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n\n ${(props) =>\n !props.$disableBackgroundColor &&\n css`\n background: var(--modal-background);\n backdrop-filter: blur(2px);\n `}\n`;\n\nStyledOverlay.displayName = \"StyledOverlay\";\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAD,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,wBAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,cAAAM,EAAA,IAAAd,CAAA,gBAAAc,EAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,EAAA,OAAAP,CAAA,IAAAD,CAAA,GAAAW,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAnB,CAAA,EAAAc,EAAA,OAAAP,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAM,EAAA,EAAAP,CAAA,IAAAC,CAAA,CAAAM,EAAA,IAAAd,CAAA,CAAAc,EAAA,WAAAN,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAEzC,IAAMmB,aAAa,GAAAC,OAAA,CAAAD,aAAA,GAAGE,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,~~0DASnC,~~UAACC,KAAK;EAAA,OACN,CAACA,KAAK,CAACC,uBAAuB,QAC9BC,qBAAG,~~oEAGF~~;AAAA,EACJ;AAEDT,aAAa,CAACK,WAAW,GAAG,eAAe","ignoreList":[]}
1	+ {"version":3,"file":"Styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledOverlay","exports","styled","div","withConfig","displayName","componentId","props","$disableBackgroundColor","css","$blurs"],"sources":["../../../../src/components/Overlay/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nexport const StyledOverlay = styled.div<{\n $disableBackgroundColor: boolean;\n $blurs?: boolean;\n}>`\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n\n ${(props) =>\n !props.$disableBackgroundColor &&\n css`\n background: var(--modal-background);\n /* Chrome samples the backdrop per frame. On its own layer the sample survives a scroll above it. */\n transform: translateZ(0);\n `}\n\n ${(props) =>\n props.$blurs &&\n css`\n backdrop-filter: blur(2px);\n `}\n`;\n\nStyledOverlay.displayName = \"StyledOverlay\";\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAD,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,wBAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,cAAAM,EAAA,IAAAd,CAAA,gBAAAc,EAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,EAAA,OAAAP,CAAA,IAAAD,CAAA,GAAAW,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAnB,CAAA,EAAAc,EAAA,OAAAP,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAM,EAAA,EAAAP,CAAA,IAAAC,CAAA,CAAAM,EAAA,IAAAd,CAAA,CAAAc,EAAA,WAAAN,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAEzC,IAAMmB,aAAa,GAAAC,OAAA,CAAAD,aAAA,GAAGE,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,+DAUnC,UAACC,KAAK;EAAA,OACN,CAACA,KAAK,CAACC,uBAAuB,QAC9BC,qBAAG,kEAIF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACG,MAAM,QACZD,qBAAG,iCAEF;AAAA,EACJ;AAEDT,aAAa,CAACK,WAAW,GAAG,eAAe","ignoreList":[]}

package/dist/cjs/components/Overlay/overlayStack.js ADDED Viewed

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.subscribeToOverlays = exports.pushOverlay = exports.popOverlay = exports.isTopOverlay = void 0;
+var listeners = new Set();
+var stack = [];
+var lastId = 0;
+var notify = function notify() {
+  return listeners.forEach(function (listener) {
+    return listener();
+  });
+};
+var pushOverlay = exports.pushOverlay = function pushOverlay(zIndex) {
+  lastId += 1;
+  stack = [...stack, {
+    id: lastId,
+    zIndex
+  }];
+  notify();
+  return lastId;
+};
+var popOverlay = exports.popOverlay = function popOverlay(id) {
+  stack = stack.filter(function (entry) {
+    return entry.id !== id;
+  });
+  notify();
+};
+// The overlay that covers the rest is the one on the highest layer. Mount order only breaks a tie,
+// because a lazily loaded surface can mount after the one it sits under.
+var isTopOverlay = exports.isTopOverlay = function isTopOverlay(id) {
+  if (stack.length === 0) {
+    return true;
+  }
+  var top = stack.reduce(function (highest, entry) {
+    return entry.zIndex > highest.zIndex || entry.zIndex === highest.zIndex && entry.id > highest.id ? entry : highest;
+  });
+  return top.id === id;
+};
+var subscribeToOverlays = exports.subscribeToOverlays = function subscribeToOverlays(listener) {
+  listeners.add(listener);
+  return function () {
+    listeners.delete(listener);
+  };
+};
+//# sourceMappingURL=overlayStack.js.map

package/dist/cjs/components/Overlay/overlayStack.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"overlayStack.js","names":["listeners","Set","stack","lastId","notify","forEach","listener","pushOverlay","exports","zIndex","id","popOverlay","filter","entry","isTopOverlay","length","top","reduce","highest","subscribeToOverlays","add","delete"],"sources":["../../../../src/components/Overlay/overlayStack.ts"],"sourcesContent":["type Listener = () => void;\n\ntype Entry = { id: number; zIndex: number };\n\nconst listeners = new Set<Listener>();\n\nlet stack: Entry[] = [];\nlet lastId = 0;\n\nconst notify = (): void => listeners.forEach((listener) => listener());\n\nexport const pushOverlay = (zIndex: number): number => {\n lastId += 1;\n stack = [...stack, { id: lastId, zIndex }];\n notify();\n\n return lastId;\n};\n\nexport const popOverlay = (id: number): void => {\n stack = stack.filter((entry) => entry.id !== id);\n notify();\n};\n\n// The overlay that covers the rest is the one on the highest layer. Mount order only breaks a tie,\n// because a lazily loaded surface can mount after the one it sits under.\nexport const isTopOverlay = (id: number): boolean => {\n if (stack.length === 0) {\n return true;\n }\n\n const top = stack.reduce((highest, entry) =>\n entry.zIndex > highest.zIndex ||\n (entry.zIndex === highest.zIndex && entry.id > highest.id)\n ? entry\n : highest\n );\n\n return top.id === id;\n};\n\nexport const subscribeToOverlays = (listener: Listener): (() => void) => {\n listeners.add(listener);\n\n return (): void => {\n listeners.delete(listener);\n };\n};\n"],"mappings":";;;;;;AAIA,IAAMA,SAAS,GAAG,IAAIC,GAAG,CAAW,CAAC;AAErC,IAAIC,KAAc,GAAG,EAAE;AACvB,IAAIC,MAAM,GAAG,CAAC;AAEd,IAAMC,MAAM,GAAG,SAATA,MAAMA,CAAA;EAAA,OAAeJ,SAAS,CAACK,OAAO,CAAC,UAACC,QAAQ;IAAA,OAAKA,QAAQ,CAAC,CAAC;EAAA,EAAC;AAAA;AAE/D,IAAMC,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAG,SAAdA,WAAWA,CAAIE,MAAc,EAAa;EACrDN,MAAM,IAAI,CAAC;EACXD,KAAK,GAAG,CAAC,GAAGA,KAAK,EAAE;IAAEQ,EAAE,EAAEP,MAAM;IAAEM;EAAO,CAAC,CAAC;EAC1CL,MAAM,CAAC,CAAC;EAER,OAAOD,MAAM;AACf,CAAC;AAEM,IAAMQ,UAAU,GAAAH,OAAA,CAAAG,UAAA,GAAG,SAAbA,UAAUA,CAAID,EAAU,EAAW;EAC9CR,KAAK,GAAGA,KAAK,CAACU,MAAM,CAAC,UAACC,KAAK;IAAA,OAAKA,KAAK,CAACH,EAAE,KAAKA,EAAE;EAAA,EAAC;EAChDN,MAAM,CAAC,CAAC;AACV,CAAC;;AAED;AACA;AACO,IAAMU,YAAY,GAAAN,OAAA,CAAAM,YAAA,GAAG,SAAfA,YAAYA,CAAIJ,EAAU,EAAc;EACnD,IAAIR,KAAK,CAACa,MAAM,KAAK,CAAC,EAAE;IACtB,OAAO,IAAI;EACb;EAEA,IAAMC,GAAG,GAAGd,KAAK,CAACe,MAAM,CAAC,UAACC,OAAO,EAAEL,KAAK;IAAA,OACtCA,KAAK,CAACJ,MAAM,GAAGS,OAAO,CAACT,MAAM,IAC5BI,KAAK,CAACJ,MAAM,KAAKS,OAAO,CAACT,MAAM,IAAII,KAAK,CAACH,EAAE,GAAGQ,OAAO,CAACR,EAAG,GACtDG,KAAK,GACLK,OAAO;EAAA,CACb,CAAC;EAED,OAAOF,GAAG,CAACN,EAAE,KAAKA,EAAE;AACtB,CAAC;AAEM,IAAMS,mBAAmB,GAAAX,OAAA,CAAAW,mBAAA,GAAG,SAAtBA,mBAAmBA,CAAIb,QAAkB,EAAmB;EACvEN,SAAS,CAACoB,GAAG,CAACd,QAAQ,CAAC;EAEvB,OAAO,YAAY;IACjBN,SAAS,CAACqB,MAAM,CAACf,QAAQ,CAAC;EAC5B,CAAC;AACH,CAAC","ignoreList":[]}

package/dist/cjs/components/Sheet/Styles.js CHANGED Viewed

@@ -50,7 +50,7 @@ var StyledSheetWrapperPaper = exports.StyledSheetWrapperPaper = _styledComponent
 }).withConfig({
   displayName: "Styles__StyledSheetWrapperPaper",
   componentId: "sc-144eyxd-2"
-})(["background-color:var(--page-paper-main);color:var(--color-theme-900);box-shadow:var(--shadow-primary);border-radius:6px;overflow:auto;animation:0.3s linear ease-out;", ""], {
+})(["background-color:var(--page-paper-main);color:var(--color-theme-900);box-shadow:var(--shadow-primary);border-radius:6px;overflow:auto;animation:0.3s linear ease-out;transform:translateZ(0);contain:paint;overscroll-behavior:contain;", ""], {
   "flex": "1 1 auto"
 });
 StyledSheetWrapperPaper.displayName = "StyledSheetWrapperPaper";

package/dist/cjs/components/Sheet/Styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Styles.js","names":["_reactTransitionGroup","require","_styledComponents","_interopRequireWildcard","_BoxSizingStyle","_FontStyle","_List","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledSheetIcons","exports","styled","div","withConfig","displayName","componentId","StyledSheetWrapper","BoxSizingStyle","FontStyle","props","$mode","css","$position","StyledSheetWrapperPaper","attrs","className","paperClass","StyledSheetControlsTop","keyframes","StyledSheetControlsBottom","StyledSheetControlsCenterIn","StyledSheetControlsCenterOut","StyledAnimatedSpan","span","$state","concat","$durationIn","$maxDurationIn","$disabled","$durationOut","$maxDurationOut","StyledCssTransition","CSSTransition","$direction","StyledListSeparator","ListSeparator","StyledIconsWrapperSmall","StyledHeader"],"sources":["../../../../src/components/Sheet/Styles.ts"],"sourcesContent":["import { CSSTransition } from \"react-transition-group\";\n\nimport styled, { css, keyframes } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { ListSeparator } from \"../List\";\n\nexport const StyledSheetIcons = styled.div`\n display: flex;\n height: 0;\n position: relative;\n\n span {\n position: relative;\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-secondary);\n cursor: pointer;\n border-radius: 100%;\n width: 40px;\n height: 40px;\n display: flex;\n justify-content: center;\n align-items: center;\n & > * {\n height: 40px;\n width: 40px;\n padding: 8px;\n fill: var(--color-theme-600);\n }\n }\n\n @media (max-width: 640px) {\n display: none;\n }\n`;\n\nStyledSheetIcons.displayName = \"StyledSheetIcons\";\n\ninterface IStyledSheetWrapper {\n $position?: \"center\" \| \"left\" \| \"right\";\n $mode?: \"normal\" \| \"stretch\";\n}\n\nexport const StyledSheetWrapper = styled.div<IStyledSheetWrapper>`\n ${BoxSizingStyle}\n ${FontStyle}\n\n position: relative;\n max-width: 95vw;\n display: flex;\n flex-direction: row;\n\n ${(props) =>\n props.$mode === \"stretch\"\n ? css`\n margin-top: 8px;\n height: calc(100vh - 16px);\n width: calc(100vw - 100px);\n max-width: 1000px;\n ${StyledSheetIcons} {\n flex-direction: column;\n width: 0;\n height: calc(100vh - 32px);\n & > * {\n margin-bottom: 8px;\n animation-fill-mode: both;\n }\n span {\n top: 8px;\n }\n }\n `\n : css`\n max-height: calc(100vh - 156px);\n margin-top: 126px;\n margin-bottom: 30px;\n width: 540px;\n flex-direction: column;\n\n ${StyledSheetIcons} {\n flex-direction: row-reverse;\n & > * {\n margin-left: 8px;\n animation-fill-mode: both;\n }\n span {\n top: -48px;\n right: 8px;\n }\n }\n `}\n\n ${(props) =>\n props.$mode === \"stretch\" &&\n css`\n @media (max-width: 640px) {\n width: 100%;\n height: 100%;\n }\n `}\n\n ${(props) =>\n props.$position === \"center\" &&\n css`\n ${tw`tw-mx-auto`}\n `}\n\n ${(props) =>\n props.$position === \"left\" &&\n css`\n ${tw`tw-ml-2 tw-mr-auto`}\n `}\n\n ${(props) =>\n props.$position === \"right\" &&\n css`\n ${tw`tw-mr-2 tw-ml-auto`}\n `}\n\n ${(props) =>\n props.$mode === \"stretch\" &&\n props.$position !== \"left\" &&\n css`\n ${StyledSheetIcons} {\n span {\n right: 48px;\n }\n }\n `}\n\n ${(props) =>\n props.$mode === \"stretch\" &&\n props.$position === \"left\" &&\n css`\n flex-direction: row-reverse;\n\n ${StyledSheetIcons} {\n span {\n right: -8px;\n }\n }\n `}\n`;\n\nStyledSheetWrapper.displayName = \"StyledSheetWrapper\";\n\ninterface IStyledSheetWrapperPaper {\n paperClass?: string;\n}\n\nexport const StyledSheetWrapperPaper = styled.div.attrs<IStyledSheetWrapperPaper>(\n (props) => ({\n className: props.paperClass,\n })\n)<IStyledSheetWrapperPaper>`\n background-color: var(--page-paper-main);\n color: var(--color-theme-900);\n box-shadow: var(--shadow-primary);\n border-radius: 6px;\n overflow: auto;\n animation: 0.3s linear ease-out;\n\n ${tw`tw-flex-auto`}\n`;\n\nStyledSheetWrapperPaper.displayName = \"StyledSheetWrapperPaper\";\n\nexport const StyledSheetControlsTop = keyframes`\n 0% {\n opacity: 0;\n transform: translateY(-200px);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n`;\n\nexport const StyledSheetControlsBottom = keyframes`\n 0% {\n opacity: 1;\n transform: translateY(0);\n }\n 100% {\n opacity: 0;\n transform: translateY(-200px);\n}\n`;\n\nexport const StyledSheetControlsCenterIn = keyframes`\n 0% {\n transform: translateY(-150px);\n opacity: 0;\n }\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n`;\n\nexport const StyledSheetControlsCenterOut = keyframes`\n 0% {\n transform: translateY(0);\n opacity: 1;\n }\n 100% {\n transform: translateY(-150px);\n opacity: 0;\n }\n`;\n\ninterface IStyledAnimatedSpan {\n $mode: string;\n $state?: string;\n $maxDurationIn: number;\n $maxDurationOut: number;\n $durationOut: number;\n $durationIn: number;\n $disabled?: boolean;\n}\n\nexport const StyledAnimatedSpan = styled.span<IStyledAnimatedSpan>`\n &:hover svg {\n fill: var(--color-primary);\n }\n ${(props) =>\n props.$state === \"entering\" &&\n css`\n opacity: 1;\n\n ${props.$mode === \"stretch\"\n ? css`\n animation-name: ${StyledSheetControlsTop};\n animation-duration: ${`${props.$durationIn}s`};\n animation-delay: ${`${props.$durationIn}s`};\n `\n : css`\n animation-name: ${StyledSheetControlsCenterIn};\n animation-duration: ${`${props.$maxDurationIn}s`};\n animation-delay: 0s;\n `}\n `}\n\n ${(props) =>\n props.$state === \"entered\" &&\n css`\n opacity: 1;\n `}\n\n ${(props) =>\n props.$disabled &&\n css`\n pointer-events: none;\n\n svg {\n opacity: 0.5;\n }\n `}\n\n ${(props) =>\n props.$state === \"exiting\" &&\n css`\n opacity: 0;\n\n ${props.$mode === \"stretch\"\n ? css`\n animation-name: ${StyledSheetControlsBottom};\n animation-duration: ${`${props.$durationOut}s`};\n animation-delay: ${`${props.$durationOut}s`};\n `\n : css`\n animation-name: ${StyledSheetControlsCenterOut};\n animation-duration: ${`${props.$maxDurationOut}s`};\n animation-delay: 0;\n `}\n `}\n\n ${(props) =>\n props.$state === \"exited\" &&\n css`\n opacity: 0;\n `}\n`;\n\nStyledAnimatedSpan.displayName = \"StyledAnimatedSpan\";\n\nexport const StyledCssTransition = styled(CSSTransition)<{\n $direction: string;\n}>`\n ${(props) =>\n props.$direction === \"top\" &&\n css`\n &.c-sheet__animation-enter {\n opacity: 0;\n transform: translateY(-100%);\n }\n &.c-sheet__animation-enter-active {\n opacity: 1;\n transform: translateY(0);\n transition: opacity 400ms, transform 400ms;\n }\n &.c-sheet__animation-appear {\n opacity: 0;\n transform: translateY(-100%);\n }\n &.c-sheet__animation-appear-active {\n opacity: 1;\n transform: translateY(0);\n transition: opacity 400ms, transform 400ms;\n }\n &.c-sheet__animation-exit {\n opacity: 1;\n }\n &.c-sheet__animation-exit-active {\n opacity: 0;\n transform: translateY(-100%);\n transition: opacity 200ms, transform 200ms;\n }\n `}\n\n ${(props) =>\n props.$direction === \"bottom\" &&\n css`\n &.c-sheet__animation-enter {\n opacity: 0;\n transform: translateY(100%);\n }\n &.c-sheet__animation-enter-active {\n opacity: 1;\n transform: translateY(0);\n transition: opacity 400ms, transform 400ms;\n }\n &.c-sheet__animation-appear {\n opacity: 0;\n transform: translateY(100%);\n }\n &.c-sheet__animation-appear-active {\n opacity: 1;\n transform: translateY(0);\n transition: opacity 400ms, transform 400ms;\n }\n &.c-sheet__animation-exit {\n opacity: 1;\n }\n &.c-sheet__animation-exit-active {\n opacity: 0;\n transform: translateY(100%);\n transition: opacity 200ms, transform 200ms;\n }\n `}\n\n ${(props) =>\n props.$direction === \"left\" &&\n css`\n &.c-sheet__animation-enter {\n opacity: 0;\n transform: translateX(-100%);\n }\n &.c-sheet__animation-enter-active {\n opacity: 1;\n transform: translateX(0);\n transition: opacity 400ms, transform 400ms;\n }\n &.c-sheet__animation-appear {\n opacity: 0;\n transform: translateX(-100%);\n }\n &.c-sheet__animation-appear-active {\n opacity: 1;\n transform: translateX(0);\n transition: opacity 400ms, transform 400ms;\n }\n &.c-sheet__animation-exit {\n opacity: 1;\n }\n &.c-sheet__animation-exit-active {\n opacity: 0;\n transform: translateX(-100%);\n transition: opacity 200ms, transform 200ms;\n }\n `}\n\n ${(props) =>\n props.$direction === \"right\" &&\n css`\n &.c-sheet__animation-enter {\n opacity: 0;\n transform: translateX(100%);\n }\n &.c-sheet__animation-enter-active {\n opacity: 1;\n transform: translateX(0);\n transition: opacity 400ms, transform 400ms;\n }\n &.c-sheet__animation-appear {\n opacity: 0;\n transform: translateX(100%);\n }\n &.c-sheet__animation-appear-active {\n opacity: 1;\n transform: translateX(0);\n transition: opacity 400ms, transform 400ms;\n }\n &.c-sheet__animation-exit {\n opacity: 1;\n }\n &.c-sheet__animation-exit-active {\n opacity: 0;\n transform: translateX(100%);\n transition: opacity 200ms, transform 200ms;\n }\n `}\n`;\n\nStyledCssTransition.displayName = \"StyledCssTransition\";\n\nexport const StyledListSeparator = styled(ListSeparator)`\n margin: 0;\n`;\n\nStyledListSeparator.displayName = \"StyledListSeparator\";\n\nexport const StyledIconsWrapperSmall = styled.div`\n height: 40px;\n display: flex;\n gap: 8px;\n padding-left: 16px;\n padding-right: 16px;\n align-items: center;\n place-content: end;\n flex-direction: row-reverse;\n`;\n\nStyledIconsWrapperSmall.displayName = \"StyledIconsWrapperSmall\";\n\nexport const StyledHeader = styled.div`\n @media (min-width: 640px) {\n display: none;\n }\n`;\n\nStyledHeader.displayName = \"StyledHeader\";\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"Styles.js","names":["_reactTransitionGroup","require","_styledComponents","_interopRequireWildcard","_BoxSizingStyle","_FontStyle","_List","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","_t","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledSheetIcons","exports","styled","div","withConfig","displayName","componentId","StyledSheetWrapper","BoxSizingStyle","FontStyle","props","$mode","css","$position","StyledSheetWrapperPaper","attrs","className","paperClass","StyledSheetControlsTop","keyframes","StyledSheetControlsBottom","StyledSheetControlsCenterIn","StyledSheetControlsCenterOut","StyledAnimatedSpan","span","$state","concat","$durationIn","$maxDurationIn","$disabled","$durationOut","$maxDurationOut","StyledCssTransition","CSSTransition","$direction","StyledListSeparator","ListSeparator","StyledIconsWrapperSmall","StyledHeader"],"sources":["../../../../src/components/Sheet/Styles.ts"],"sourcesContent":["import { CSSTransition } from \"react-transition-group\";\n\nimport styled, { css, keyframes } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { ListSeparator } from \"../List\";\n\nexport const StyledSheetIcons = styled.div`\n display: flex;\n height: 0;\n position: relative;\n\n span {\n position: relative;\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-secondary);\n cursor: pointer;\n border-radius: 100%;\n width: 40px;\n height: 40px;\n display: flex;\n justify-content: center;\n align-items: center;\n & > * {\n height: 40px;\n width: 40px;\n padding: 8px;\n fill: var(--color-theme-600);\n }\n }\n\n @media (max-width: 640px) {\n display: none;\n }\n`;\n\nStyledSheetIcons.displayName = \"StyledSheetIcons\";\n\ninterface IStyledSheetWrapper {\n $position?: \"center\" \| \"left\" \| \"right\";\n $mode?: \"normal\" \| \"stretch\";\n}\n\nexport const StyledSheetWrapper = styled.div<IStyledSheetWrapper>`\n ${BoxSizingStyle}\n ${FontStyle}\n\n position: relative;\n max-width: 95vw;\n display: flex;\n flex-direction: row;\n\n ${(props) =>\n props.$mode === \"stretch\"\n ? css`\n margin-top: 8px;\n height: calc(100vh - 16px);\n width: calc(100vw - 100px);\n max-width: 1000px;\n ${StyledSheetIcons} {\n flex-direction: column;\n width: 0;\n height: calc(100vh - 32px);\n & > * {\n margin-bottom: 8px;\n animation-fill-mode: both;\n }\n span {\n top: 8px;\n }\n }\n `\n : css`\n max-height: calc(100vh - 156px);\n margin-top: 126px;\n margin-bottom: 30px;\n width: 540px;\n flex-direction: column;\n\n ${StyledSheetIcons} {\n flex-direction: row-reverse;\n & > * {\n margin-left: 8px;\n animation-fill-mode: both;\n }\n span {\n top: -48px;\n right: 8px;\n }\n }\n `}\n\n ${(props) =>\n props.$mode === \"stretch\" &&\n css`\n @media (max-width: 640px) {\n width: 100%;\n height: 100%;\n }\n `}\n\n ${(props) =>\n props.$position === \"center\" &&\n css`\n ${tw`tw-mx-auto`}\n `}\n\n ${(props) =>\n props.$position === \"left\" &&\n css`\n ${tw`tw-ml-2 tw-mr-auto`}\n `}\n\n ${(props) =>\n props.$position === \"right\" &&\n css`\n ${tw`tw-mr-2 tw-ml-auto`}\n `}\n\n ${(props) =>\n props.$mode === \"stretch\" &&\n props.$position !== \"left\" &&\n css`\n ${StyledSheetIcons} {\n span {\n right: 48px;\n }\n }\n `}\n\n ${(props) =>\n props.$mode === \"stretch\" &&\n props.$position === \"left\" &&\n css`\n flex-direction: row-reverse;\n\n ${StyledSheetIcons} {\n span {\n right: -8px;\n }\n }\n `}\n`;\n\nStyledSheetWrapper.displayName = \"StyledSheetWrapper\";\n\ninterface IStyledSheetWrapperPaper {\n paperClass?: string;\n}\n\nexport const StyledSheetWrapperPaper = styled.div.attrs<IStyledSheetWrapperPaper>(\n (props) => ({\n className: props.paperClass,\n })\n)<IStyledSheetWrapperPaper>`\n background-color: var(--page-paper-main);\n color: var(--color-theme-900);\n box-shadow: var(--shadow-primary);\n border-radius: 6px;\n overflow: auto;\n animation: 0.3s linear ease-out;\n /* Scrolling here must not dirty the blurred overlays below, which already clip to this box. /\n transform: translateZ(0);\n contain: paint;\n / A scroll that runs off the end must stop here. Chained to the page, it moves what the blur samples. */\n overscroll-behavior: contain;\n\n ${tw`tw-flex-auto`}\n`;\n\nStyledSheetWrapperPaper.displayName = \"StyledSheetWrapperPaper\";\n\nexport const StyledSheetControlsTop = keyframes`\n 0% {\n opacity: 0;\n transform: translateY(-200px);\n }\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n`;\n\nexport const StyledSheetControlsBottom = keyframes`\n 0% {\n opacity: 1;\n transform: translateY(0);\n }\n 100% {\n opacity: 0;\n transform: translateY(-200px);\n}\n`;\n\nexport const StyledSheetControlsCenterIn = keyframes`\n 0% {\n transform: translateY(-150px);\n opacity: 0;\n }\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n`;\n\nexport const StyledSheetControlsCenterOut = keyframes`\n 0% {\n transform: translateY(0);\n opacity: 1;\n }\n 100% {\n transform: translateY(-150px);\n opacity: 0;\n }\n`;\n\ninterface IStyledAnimatedSpan {\n $mode: string;\n $state?: string;\n $maxDurationIn: number;\n $maxDurationOut: number;\n $durationOut: number;\n $durationIn: number;\n $disabled?: boolean;\n}\n\nexport const StyledAnimatedSpan = styled.span<IStyledAnimatedSpan>`\n &:hover svg {\n fill: var(--color-primary);\n }\n ${(props) =>\n props.$state === \"entering\" &&\n css`\n opacity: 1;\n\n ${props.$mode === \"stretch\"\n ? css`\n animation-name: ${StyledSheetControlsTop};\n animation-duration: ${`${props.$durationIn}s`};\n animation-delay: ${`${props.$durationIn}s`};\n `\n : css`\n animation-name: ${StyledSheetControlsCenterIn};\n animation-duration: ${`${props.$maxDurationIn}s`};\n animation-delay: 0s;\n `}\n `}\n\n ${(props) =>\n props.$state === \"entered\" &&\n css`\n opacity: 1;\n `}\n\n ${(props) =>\n props.$disabled &&\n css`\n pointer-events: none;\n\n svg {\n opacity: 0.5;\n }\n `}\n\n ${(props) =>\n props.$state === \"exiting\" &&\n css`\n opacity: 0;\n\n ${props.$mode === \"stretch\"\n ? css`\n animation-name: ${StyledSheetControlsBottom};\n animation-duration: ${`${props.$durationOut}s`};\n animation-delay: ${`${props.$durationOut}s`};\n `\n : css`\n animation-name: ${StyledSheetControlsCenterOut};\n animation-duration: ${`${props.$maxDurationOut}s`};\n animation-delay: 0;\n `}\n `}\n\n ${(props) =>\n props.$state === \"exited\" &&\n css`\n opacity: 0;\n `}\n`;\n\nStyledAnimatedSpan.displayName = \"StyledAnimatedSpan\";\n\nexport const StyledCssTransition = styled(CSSTransition)<{\n $direction: string;\n}>`\n ${(props) =>\n props.$direction === \"top\" &&\n css`\n &.c-sheet__animation-enter {\n opacity: 0;\n transform: translateY(-100%);\n }\n &.c-sheet__animation-enter-active {\n opacity: 1;\n transform: translateY(0);\n transition: opacity 400ms, transform 400ms;\n }\n &.c-sheet__animation-appear {\n opacity: 0;\n transform: translateY(-100%);\n }\n &.c-sheet__animation-appear-active {\n opacity: 1;\n transform: translateY(0);\n transition: opacity 400ms, transform 400ms;\n }\n &.c-sheet__animation-exit {\n opacity: 1;\n }\n &.c-sheet__animation-exit-active {\n opacity: 0;\n transform: translateY(-100%);\n transition: opacity 200ms, transform 200ms;\n }\n `}\n\n ${(props) =>\n props.$direction === \"bottom\" &&\n css`\n &.c-sheet__animation-enter {\n opacity: 0;\n transform: translateY(100%);\n }\n &.c-sheet__animation-enter-active {\n opacity: 1;\n transform: translateY(0);\n transition: opacity 400ms, transform 400ms;\n }\n &.c-sheet__animation-appear {\n opacity: 0;\n transform: translateY(100%);\n }\n &.c-sheet__animation-appear-active {\n opacity: 1;\n transform: translateY(0);\n transition: opacity 400ms, transform 400ms;\n }\n &.c-sheet__animation-exit {\n opacity: 1;\n }\n &.c-sheet__animation-exit-active {\n opacity: 0;\n transform: translateY(100%);\n transition: opacity 200ms, transform 200ms;\n }\n `}\n\n ${(props) =>\n props.$direction === \"left\" &&\n css`\n &.c-sheet__animation-enter {\n opacity: 0;\n transform: translateX(-100%);\n }\n &.c-sheet__animation-enter-active {\n opacity: 1;\n transform: translateX(0);\n transition: opacity 400ms, transform 400ms;\n }\n &.c-sheet__animation-appear {\n opacity: 0;\n transform: translateX(-100%);\n }\n &.c-sheet__animation-appear-active {\n opacity: 1;\n transform: translateX(0);\n transition: opacity 400ms, transform 400ms;\n }\n &.c-sheet__animation-exit {\n opacity: 1;\n }\n &.c-sheet__animation-exit-active {\n opacity: 0;\n transform: translateX(-100%);\n transition: opacity 200ms, transform 200ms;\n }\n `}\n\n ${(props) =>\n props.$direction === \"right\" &&\n css`\n &.c-sheet__animation-enter {\n opacity: 0;\n transform: translateX(100%);\n }\n &.c-sheet__animation-enter-active {\n opacity: 1;\n transform: translateX(0);\n transition: opacity 400ms, transform 400ms;\n }\n &.c-sheet__animation-appear {\n opacity: 0;\n transform: translateX(100%);\n }\n &.c-sheet__animation-appear-active {\n opacity: 1;\n transform: translateX(0);\n transition: opacity 400ms, transform 400ms;\n }\n &.c-sheet__animation-exit {\n opacity: 1;\n }\n &.c-sheet__animation-exit-active {\n opacity: 0;\n transform: translateX(100%);\n transition: opacity 200ms, transform 200ms;\n }\n `}\n`;\n\nStyledCssTransition.displayName = \"StyledCssTransition\";\n\nexport const StyledListSeparator = styled(ListSeparator)`\n margin: 0;\n`;\n\nStyledListSeparator.displayName = \"StyledListSeparator\";\n\nexport const StyledIconsWrapperSmall = styled.div`\n height: 40px;\n display: flex;\n gap: 8px;\n padding-left: 16px;\n padding-right: 16px;\n align-items: center;\n place-content: end;\n flex-direction: row-reverse;\n`;\n\nStyledIconsWrapperSmall.displayName = \"StyledIconsWrapperSmall\";\n\nexport const StyledHeader = styled.div`\n @media (min-width: 640px) {\n display: none;\n }\n`;\n\nStyledHeader.displayName = \"StyledHeader\";\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/presentation/shared/UserDetailsDialog.js ADDED Viewed

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UserDetailsDialog = exports.USER_DETAILS_AVATAR_SIZE = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _RoundAvatar = require("./RoundAvatar");
+var _Button = require("../../components/Button");
+var _Chip = require("../../components/Chip");
+var _Dialog = require("../../components/Dialog");
+var _IconButton = require("../../components/IconButton");
+var _Icons = require("../../components/Icons");
+var _Typography = require("../../components/Typography");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/* ------------------------------------------------------------------ */
+/* UserDetailsDialog — a reusable person "quick look" dialog           */
+/* ------------------------------------------------------------------ */
+/**
+ * A small, props-driven person card shown in a centred DS `Dialog`. It is built
+ * only from design-system primitives (Dialog, RoundAvatar, Chip, Button,
+ * Typography, Icons) so any story can drop it in with its own data — nothing
+ * about a specific person is baked in.
+ *
+ * The face mirrors the product's person quick-look:
+ *   - a large circular avatar;
+ *   - the name in bold, immediately followed by a small grey working-hours pill;
+ *   - the primary email, with a trailing "+ N more" overflow for extra contacts;
+ *   - the joined date, in secondary text;
+ *   - a close (X) in the top-right corner;
+ *   - a left-aligned footer: a filled "Send message" and a text "See full
+ *     profile" link.
+ */
+/* Diameter of the header avatar. ~96px per the spec, large enough to carry an
+   image or two-letter initials comfortably. */
+var USER_DETAILS_AVATAR_SIZE = exports.USER_DETAILS_AVATAR_SIZE = 96;
+var StyledHeader = _styledComponents.default.div.withConfig({
+  displayName: "UserDetailsDialog__StyledHeader",
+  componentId: "sc-4r9p4-0"
+})(["position:relative;display:flex;align-items:flex-start;gap:16px;.udd-close{position:absolute;top:-8px;right:-12px;}"]);
+/* The avatar. A plain circle — a fixed box so it never shrinks beside the info. */
+var StyledAvatar = _styledComponents.default.div.withConfig({
+  displayName: "UserDetailsDialog__StyledAvatar",
+  componentId: "sc-4r9p4-1"
+})(["flex-shrink:0;width:", "px;height:", "px;.udd-avatar-image{background-size:cover;background-position:center;color:transparent;}"], function (props) {
+  return props.$size;
+}, function (props) {
+  return props.$size;
+});
+var StyledInfo = _styledComponents.default.div.withConfig({
+  displayName: "UserDetailsDialog__StyledInfo",
+  componentId: "sc-4r9p4-2"
+})(["min-width:0;flex:1;display:flex;flex-direction:column;gap:6px;padding-top:4px;.udd-name-row{display:flex;align-items:center;gap:8px;min-width:0;}.udd-name-row > .typography{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.udd-hours{flex-shrink:0;}.udd-contact-row{display:flex;align-items:baseline;gap:8px;min-width:0;}.udd-email{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.udd-more{flex-shrink:0;}"]);
+/* Dialog.Actions is only padding, so the footer lays itself out: left-aligned,
+   the filled action first and the text link beside it. The link is underlined to
+   match the reference. */
+var StyledActions = _styledComponents.default.div.withConfig({
+  displayName: "UserDetailsDialog__StyledActions",
+  componentId: "sc-4r9p4-3"
+})(["display:flex;align-items:center;gap:12px;.udd-profile-link{text-decoration:underline;}"]);
+var UserDetailsDialog = exports.UserDetailsDialog = function UserDetailsDialog(_ref) {
+  var open = _ref.open,
+    avatar = _ref.avatar,
+    name = _ref.name,
+    hoursLabel = _ref.hoursLabel,
+    email = _ref.email,
+    extraContactsCount = _ref.extraContactsCount,
+    joinedDate = _ref.joinedDate,
+    onSendMessage = _ref.onSendMessage,
+    onSeeFullProfile = _ref.onSeeFullProfile,
+    onClose = _ref.onClose;
+  return /*#__PURE__*/_react.default.createElement(_Dialog.Dialog, {
+    open: open,
+    onClose: onClose,
+    enableBackgroundClick: true
+  }, /*#__PURE__*/_react.default.createElement(_Dialog.Dialog.Content, null, /*#__PURE__*/_react.default.createElement(StyledHeader, null, /*#__PURE__*/_react.default.createElement(StyledAvatar, {
+    $size: USER_DETAILS_AVATAR_SIZE
+  }, /*#__PURE__*/_react.default.createElement(_RoundAvatar.RoundAvatar, {
+    $size: USER_DETAILS_AVATAR_SIZE,
+    $bg: avatar.color,
+    $bordered: false,
+    className: avatar.imageUrl ? "udd-avatar-image" : undefined,
+    style: avatar.imageUrl ? {
+      backgroundImage: "url(".concat(avatar.imageUrl, ")")
+    } : undefined
+  }, avatar.imageUrl ? "" : avatar.initials)), /*#__PURE__*/_react.default.createElement(StyledInfo, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "udd-name-row"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.Header2, null, name), hoursLabel ? /*#__PURE__*/_react.default.createElement("span", {
+    className: "udd-hours"
+  }, /*#__PURE__*/_react.default.createElement(_Chip.Chip, {
+    size: "small",
+    label: hoursLabel,
+    backgroundColor: "var(--color-theme-300)",
+    color: "var(--color-theme-900)"
+  })) : null), /*#__PURE__*/_react.default.createElement("div", {
+    className: "udd-contact-row"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
+    color: "secondary",
+    className: "udd-email"
+  }, email), extraContactsCount ? /*#__PURE__*/_react.default.createElement(_Typography.Body2, {
+    color: "secondary",
+    className: "udd-more"
+  }, "+ ", extraContactsCount, " more") : null), /*#__PURE__*/_react.default.createElement(_Typography.Caption1, {
+    color: "secondary"
+  }, joinedDate)), /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, {
+    className: "udd-close",
+    variant: "text gray",
+    onClick: onClose,
+    "aria-label": "Close"
+  }, /*#__PURE__*/_react.default.createElement(_Icons.CancelCrossIcon, null)))), /*#__PURE__*/_react.default.createElement(_Dialog.Dialog.ContentDivider, null), /*#__PURE__*/_react.default.createElement(_Dialog.Dialog.Actions, null, /*#__PURE__*/_react.default.createElement(StyledActions, null, /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    variant: "primary",
+    onClick: onSendMessage
+  }, "Send message"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    variant: "text colored",
+    className: "udd-profile-link",
+    onClick: onSeeFullProfile
+  }, "See full profile"))));
+};
+UserDetailsDialog.displayName = "UserDetailsDialog";
+//# sourceMappingURL=UserDetailsDialog.js.map

package/dist/cjs/presentation/shared/UserDetailsDialog.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"UserDetailsDialog.js","names":["_react","_interopRequireDefault","require","_styledComponents","_RoundAvatar","_Button","_Chip","_Dialog","_IconButton","_Icons","_Typography","e","__esModule","default","USER_DETAILS_AVATAR_SIZE","exports","StyledHeader","styled","div","withConfig","displayName","componentId","StyledAvatar","props","$size","StyledInfo","StyledActions","UserDetailsDialog","_ref","open","avatar","name","hoursLabel","email","extraContactsCount","joinedDate","onSendMessage","onSeeFullProfile","onClose","createElement","Dialog","enableBackgroundClick","Content","RoundAvatar","$bg","color","$bordered","className","imageUrl","undefined","style","backgroundImage","concat","initials","Header2","Chip","size","label","backgroundColor","Body2","Caption1","IconButton","variant","onClick","CancelCrossIcon","ContentDivider","Actions","Button"],"sources":["../../../../src/presentation/shared/UserDetailsDialog.tsx"],"sourcesContent":["import React, { ReactElement } from \"react\";\n\nimport styled from \"styled-components\";\n\nimport { RoundAvatar } from \"./RoundAvatar\";\nimport { Button } from \"../../components/Button\";\nimport { Chip } from \"../../components/Chip\";\nimport { Dialog } from \"../../components/Dialog\";\nimport { IconButton } from \"../../components/IconButton\";\nimport { CancelCrossIcon } from \"../../components/Icons\";\nimport { Body2, Caption1, Header2 } from \"../../components/Typography\";\n\n/* ------------------------------------------------------------------ */\n/* UserDetailsDialog — a reusable person \"quick look\" dialog */\n/* ------------------------------------------------------------------ */\n\n/**\n * A small, props-driven person card shown in a centred DS `Dialog`. It is built\n * only from design-system primitives (Dialog, RoundAvatar, Chip, Button,\n * Typography, Icons) so any story can drop it in with its own data — nothing\n * about a specific person is baked in.\n *\n * The face mirrors the product's person quick-look:\n * - a large circular avatar;\n * - the name in bold, immediately followed by a small grey working-hours pill;\n * - the primary email, with a trailing \"+ N more\" overflow for extra contacts;\n * - the joined date, in secondary text;\n * - a close (X) in the top-right corner;\n * - a left-aligned footer: a filled \"Send message\" and a text \"See full\n * profile\" link.\n */\n\n/* Diameter of the header avatar. ~96px per the spec, large enough to carry an\n image or two-letter initials comfortably. */\nexport const USER_DETAILS_AVATAR_SIZE = 96;\n\nexport interface UserDetailsAvatar {\n /** Background colour behind the initials (data, stands in for a real avatar). */\n color: string;\n /** Two-letter initials, shown when there is no image. */\n initials: string;\n /** Optional avatar image; when set it replaces the initials. */\n imageUrl?: string;\n}\n\nexport interface UserDetailsDialogProps {\n open: boolean;\n avatar: UserDetailsAvatar;\n name: string;\n /** A short working-hours pill next to the name, e.g. \"40 h/w\". Omit to hide. */\n hoursLabel?: string;\n email: string;\n /** Count of extra contacts, rendered as \"+ N more\". Omit / 0 to hide. */\n extraContactsCount?: number;\n /** Free-form joined line, e.g. \"Joined: Feb 7. 2009\". */\n joinedDate: string;\n onSendMessage?: () => void;\n onSeeFullProfile?: () => void;\n onClose?: () => void;\n}\n\nconst StyledHeader = styled.div`\n position: relative;\n display: flex;\n align-items: flex-start;\n gap: 16px;\n\n .udd-close {\n position: absolute;\n top: -8px;\n right: -12px;\n }\n`;\n\n/* The avatar. A plain circle — a fixed box so it never shrinks beside the info. */\nconst StyledAvatar = styled.div<{ $size: number }>`\n flex-shrink: 0;\n width: ${(props) => props.$size}px;\n height: ${(props) => props.$size}px;\n\n .udd-avatar-image {\n background-size: cover;\n background-position: center;\n color: transparent;\n }\n`;\n\nconst StyledInfo = styled.div`\n min-width: 0;\n flex: 1;\n display: flex;\n flex-direction: column;\n gap: 6px;\n padding-top: 4px;\n\n .udd-name-row {\n display: flex;\n align-items: center;\n gap: 8px;\n min-width: 0;\n }\n\n .udd-name-row > .typography {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .udd-hours {\n flex-shrink: 0;\n }\n\n .udd-contact-row {\n display: flex;\n align-items: baseline;\n gap: 8px;\n min-width: 0;\n }\n\n .udd-email {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .udd-more {\n flex-shrink: 0;\n }\n`;\n\n/* Dialog.Actions is only padding, so the footer lays itself out: left-aligned,\n the filled action first and the text link beside it. The link is underlined to\n match the reference. */\nconst StyledActions = styled.div`\n display: flex;\n align-items: center;\n gap: 12px;\n\n .udd-profile-link {\n text-decoration: underline;\n }\n`;\n\nexport const UserDetailsDialog = ({\n open,\n avatar,\n name,\n hoursLabel,\n email,\n extraContactsCount,\n joinedDate,\n onSendMessage,\n onSeeFullProfile,\n onClose,\n}: UserDetailsDialogProps): ReactElement => (\n <Dialog open={open} onClose={onClose} enableBackgroundClick>\n <Dialog.Content>\n <StyledHeader>\n <StyledAvatar $size={USER_DETAILS_AVATAR_SIZE}>\n <RoundAvatar\n $size={USER_DETAILS_AVATAR_SIZE}\n $bg={avatar.color}\n $bordered={false}\n className={avatar.imageUrl ? \"udd-avatar-image\" : undefined}\n style={\n avatar.imageUrl\n ? { backgroundImage: `url(${avatar.imageUrl})` }\n : undefined\n }\n >\n {avatar.imageUrl ? \"\" : avatar.initials}\n </RoundAvatar>\n </StyledAvatar>\n\n <StyledInfo>\n <div className=\"udd-name-row\">\n <Header2>{name}</Header2>\n {hoursLabel ? (\n <span className=\"udd-hours\">\n <Chip\n size=\"small\"\n label={hoursLabel}\n backgroundColor=\"var(--color-theme-300)\"\n color=\"var(--color-theme-900)\"\n />\n </span>\n ) : null}\n </div>\n\n <div className=\"udd-contact-row\">\n <Body2 color=\"secondary\" className=\"udd-email\">\n {email}\n </Body2>\n {extraContactsCount ? (\n <Body2 color=\"secondary\" className=\"udd-more\">\n + {extraContactsCount} more\n </Body2>\n ) : null}\n </div>\n\n <Caption1 color=\"secondary\">{joinedDate}</Caption1>\n </StyledInfo>\n\n <IconButton\n className=\"udd-close\"\n variant=\"text gray\"\n onClick={onClose}\n aria-label=\"Close\"\n >\n <CancelCrossIcon />\n </IconButton>\n </StyledHeader>\n </Dialog.Content>\n\n <Dialog.ContentDivider />\n\n <Dialog.Actions>\n <StyledActions>\n <Button variant=\"primary\" onClick={onSendMessage}>\n Send message\n </Button>\n <Button\n variant=\"text colored\"\n className=\"udd-profile-link\"\n onClick={onSeeFullProfile}\n >\n See full profile\n </Button>\n </StyledActions>\n </Dialog.Actions>\n </Dialog>\n);\n\nUserDetailsDialog.displayName = \"UserDetailsDialog\";\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,iBAAA,GAAAF,sBAAA,CAAAC,OAAA;AAEA,IAAAE,YAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAL,OAAA;AACA,IAAAM,WAAA,GAAAN,OAAA;AACA,IAAAO,MAAA,GAAAP,OAAA;AACA,IAAAQ,WAAA,GAAAR,OAAA;AAAuE,SAAAD,uBAAAU,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEvE;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACO,IAAMG,wBAAwB,GAAAC,OAAA,CAAAD,wBAAA,GAAG,EAAE;AA2B1C,IAAME,YAAY,GAAGC,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,0HAW9B;;AAED;AACA,IAAMC,YAAY,GAAGL,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wIAEpB,UAACE,KAAK;EAAA,OAAKA,KAAK,CAACC,KAAK;AAAA,GACrB,UAACD,KAAK;EAAA,OAAKA,KAAK,CAACC,KAAK;AAAA,EAOjC;AAED,IAAMC,UAAU,GAAGR,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,ibAyC5B;;AAED;AACA;AACA;AACA,IAAMK,aAAa,GAAGT,yBAAM,CAACC,GAAG,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8FAQ/B;AAEM,IAAMM,iBAAiB,GAAAZ,OAAA,CAAAY,iBAAA,GAAG,SAApBA,iBAAiBA,CAAAC,IAAA;EAAA,IAC5BC,IAAI,GAAAD,IAAA,CAAJC,IAAI;IACJC,MAAM,GAAAF,IAAA,CAANE,MAAM;IACNC,IAAI,GAAAH,IAAA,CAAJG,IAAI;IACJC,UAAU,GAAAJ,IAAA,CAAVI,UAAU;IACVC,KAAK,GAAAL,IAAA,CAALK,KAAK;IACLC,kBAAkB,GAAAN,IAAA,CAAlBM,kBAAkB;IAClBC,UAAU,GAAAP,IAAA,CAAVO,UAAU;IACVC,aAAa,GAAAR,IAAA,CAAbQ,aAAa;IACbC,gBAAgB,GAAAT,IAAA,CAAhBS,gBAAgB;IAChBC,OAAO,GAAAV,IAAA,CAAPU,OAAO;EAAA,oBAEPtC,MAAA,CAAAa,OAAA,CAAA0B,aAAA,CAAChC,OAAA,CAAAiC,MAAM;IAACX,IAAI,EAAEA,IAAK;IAACS,OAAO,EAAEA,OAAQ;IAACG,qBAAqB;EAAA,gBACzDzC,MAAA,CAAAa,OAAA,CAAA0B,aAAA,CAAChC,OAAA,CAAAiC,MAAM,CAACE,OAAO,qBACb1C,MAAA,CAAAa,OAAA,CAAA0B,aAAA,CAACvB,YAAY,qBACXhB,MAAA,CAAAa,OAAA,CAAA0B,aAAA,CAACjB,YAAY;IAACE,KAAK,EAAEV;EAAyB,gBAC5Cd,MAAA,CAAAa,OAAA,CAAA0B,aAAA,CAACnC,YAAA,CAAAuC,WAAW;IACVnB,KAAK,EAAEV,wBAAyB;IAChC8B,GAAG,EAAEd,MAAM,CAACe,KAAM;IAClBC,SAAS,EAAE,KAAM;IACjBC,SAAS,EAAEjB,MAAM,CAACkB,QAAQ,GAAG,kBAAkB,GAAGC,SAAU;IAC5DC,KAAK,EACHpB,MAAM,CAACkB,QAAQ,GACX;MAAEG,eAAe,SAAAC,MAAA,CAAStB,MAAM,CAACkB,QAAQ;IAAI,CAAC,GAC9CC;EACL,GAEAnB,MAAM,CAACkB,QAAQ,GAAG,EAAE,GAAGlB,MAAM,CAACuB,QACpB,CACD,CAAC,eAEfrD,MAAA,CAAAa,OAAA,CAAA0B,aAAA,CAACd,UAAU,qBACTzB,MAAA,CAAAa,OAAA,CAAA0B,aAAA;IAAKQ,SAAS,EAAC;EAAc,gBAC3B/C,MAAA,CAAAa,OAAA,CAAA0B,aAAA,CAAC7B,WAAA,CAAA4C,OAAO,QAAEvB,IAAc,CAAC,EACxBC,UAAU,gBACThC,MAAA,CAAAa,OAAA,CAAA0B,aAAA;IAAMQ,SAAS,EAAC;EAAW,gBACzB/C,MAAA,CAAAa,OAAA,CAAA0B,aAAA,CAACjC,KAAA,CAAAiD,IAAI;IACHC,IAAI,EAAC,OAAO;IACZC,KAAK,EAAEzB,UAAW;IAClB0B,eAAe,EAAC,wBAAwB;IACxCb,KAAK,EAAC;EAAwB,CAC/B,CACG,CAAC,GACL,IACD,CAAC,eAEN7C,MAAA,CAAAa,OAAA,CAAA0B,aAAA;IAAKQ,SAAS,EAAC;EAAiB,gBAC9B/C,MAAA,CAAAa,OAAA,CAAA0B,aAAA,CAAC7B,WAAA,CAAAiD,KAAK;IAACd,KAAK,EAAC,WAAW;IAACE,SAAS,EAAC;EAAW,GAC3Cd,KACI,CAAC,EACPC,kBAAkB,gBACjBlC,MAAA,CAAAa,OAAA,CAAA0B,aAAA,CAAC7B,WAAA,CAAAiD,KAAK;IAACd,KAAK,EAAC,WAAW;IAACE,SAAS,EAAC;EAAU,GAAC,IAC1C,EAACb,kBAAkB,EAAC,OACjB,CAAC,GACN,IACD,CAAC,eAENlC,MAAA,CAAAa,OAAA,CAAA0B,aAAA,CAAC7B,WAAA,CAAAkD,QAAQ;IAACf,KAAK,EAAC;EAAW,GAAEV,UAAqB,CACxC,CAAC,eAEbnC,MAAA,CAAAa,OAAA,CAAA0B,aAAA,CAAC/B,WAAA,CAAAqD,UAAU;IACTd,SAAS,EAAC,WAAW;IACrBe,OAAO,EAAC,WAAW;IACnBC,OAAO,EAAEzB,OAAQ;IACjB,cAAW;EAAO,gBAElBtC,MAAA,CAAAa,OAAA,CAAA0B,aAAA,CAAC9B,MAAA,CAAAuD,eAAe,MAAE,CACR,CACA,CACA,CAAC,eAEjBhE,MAAA,CAAAa,OAAA,CAAA0B,aAAA,CAAChC,OAAA,CAAAiC,MAAM,CAACyB,cAAc,MAAE,CAAC,eAEzBjE,MAAA,CAAAa,OAAA,CAAA0B,aAAA,CAAChC,OAAA,CAAAiC,MAAM,CAAC0B,OAAO,qBACblE,MAAA,CAAAa,OAAA,CAAA0B,aAAA,CAACb,aAAa,qBACZ1B,MAAA,CAAAa,OAAA,CAAA0B,aAAA,CAAClC,OAAA,CAAA8D,MAAM;IAACL,OAAO,EAAC,SAAS;IAACC,OAAO,EAAE3B;EAAc,GAAC,cAE1C,CAAC,eACTpC,MAAA,CAAAa,OAAA,CAAA0B,aAAA,CAAClC,OAAA,CAAA8D,MAAM;IACLL,OAAO,EAAC,cAAc;IACtBf,SAAS,EAAC,kBAAkB;IAC5BgB,OAAO,EAAE1B;EAAiB,GAC3B,kBAEO,CACK,CACD,CACV,CAAC;AAAA,CACV;AAEDV,iBAAiB,CAACP,WAAW,GAAG,mBAAmB","ignoreList":[]}

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

@@ -55,6 +55,8 @@ var _exportNames = {
   TaskOptionsMenu: true,
   TaskListOptionsMenu: true,
   UserMenu: true,
+  UserDetailsDialog: true,
+  USER_DETAILS_AVATAR_SIZE: true,
   TwoFactorShield: true,
   BackupCodesDialogs: true,
   CreateLoginCodeDialogs: true,
@@ -433,6 +435,18 @@ Object.defineProperty(exports, "TwoFactorShield", {
     return _TwoFactorShield.TwoFactorShield;
   }
 });
+Object.defineProperty(exports, "USER_DETAILS_AVATAR_SIZE", {
+  enumerable: true,
+  get: function get() {
+    return _UserDetailsDialog.USER_DETAILS_AVATAR_SIZE;
+  }
+});
+Object.defineProperty(exports, "UserDetailsDialog", {
+  enumerable: true,
+  get: function get() {
+    return _UserDetailsDialog.UserDetailsDialog;
+  }
+});
 Object.defineProperty(exports, "UserMenu", {
   enumerable: true,
   get: function get() {
@@ -554,6 +568,7 @@ var _SourceCodeSection = require("./SourceCodeSection");
 var _SuggestSubtasksButton = require("./SuggestSubtasksButton");
 var _TaskOptionsMenu = require("./TaskOptionsMenu");
 var _UserMenu = require("./UserMenu");
+var _UserDetailsDialog = require("./UserDetailsDialog");
 var _TwoFactorShield = require("./TwoFactorShield");
 var _TwoFactorDialogs = require("./TwoFactorDialogs");
 var _settings = require("./settings");

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

	@@ -1 +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","_ProjectOptionsMenu","_PortfolioOptionsMenu","_dashboardWidgets","_FloatingControls","_MessageDialog","_MessageFeedback","_HelpAndSupportMenu","_LinkingCommandsButton","_LinkBranchOrPullRequestDialog","_ConnectRepositoryDialog","_WebhookLogsDialog","_SourceCodeSection","_SuggestSubtasksButton","_TaskOptionsMenu","_UserMenu","_TwoFactorShield","_TwoFactorDialogs","_settings","_FeatureAvailability","_portfolioDetails"],"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 { ProjectOptionsMenu } from \"./ProjectOptionsMenu\";\nexport { PortfolioOptionsMenu } from \"./PortfolioOptionsMenu\";\nexport type { PortfolioOptionsMenuProps } from \"./PortfolioOptionsMenu\";\nexport {\n WidgetGrid,\n WidgetGroupBy,\n StatWidget,\n WidgetRankedList,\n OverviewWidget,\n AreaChartWidget,\n DailyDeltaChartWidget,\n LeaderboardWidget,\n StackedBarChartWidget,\n CHART_SERIES_COLORS,\n OVERVIEW_SECTION_COLORS,\n PERIOD_OPTIONS,\n PeriodPicker,\n} from \"./dashboardWidgets\";\nexport type {\n WidgetGroupByProps,\n StatWidgetProps,\n RankedListItem,\n OverviewSectionData,\n OverviewWidgetProps,\n AreaChartWidgetProps,\n DailyDeltaPoint,\n DailyDeltaChartWidgetProps,\n LeaderboardRowData,\n LeaderboardWidgetProps,\n StackedBarColumn,\n StackedBarChartWidgetProps,\n PeriodPickerProps,\n} from \"./dashboardWidgets\";\n\nexport type { ProjectOptionsMenuProps } from \"./ProjectOptionsMenu\";\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 {\n MessageFeedback,\n POSITIVE_FEEDBACK_OPTIONS,\n NEGATIVE_FEEDBACK_OPTIONS,\n} from \"./MessageFeedback\";\nexport type {\n MessageFeedbackProps,\n MessageFeedbackResult,\n FeedbackOption,\n FeedbackSentiment,\n} from \"./MessageFeedback\";\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\";\nexport {\n FeatureAvailability,\n DEFAULT_FEATURE_AVAILABILITY,\n} from \"./FeatureAvailability\";\nexport type {\n FeatureAvailabilityProps,\n AvailabilityRow,\n AvailabilityMark,\n AvailabilityStatus,\n} from \"./FeatureAvailability\";\nexport {\n PORTFOLIO_TYPES,\n VISIBILITY_OPTIONS,\n DEFAULT_PORTFOLIO_FORM_VALUES,\n LEADERS_LIST,\n CATEGORIES,\n CLIENTS,\n contextFieldLabel,\n leaderShortName,\n defaultPortfolioName,\n isPortfolioDetailsValid,\n sampleProjectOptionIds,\n PortfolioDetailsFields,\n EditPortfolioDialog,\n} from \"./portfolioDetails\";\nexport type {\n PortfolioKind,\n PortfolioVisibility,\n GroupBy,\n PortfolioFormValues,\n PickerLeader,\n PortfolioDetailsFieldsProps,\n EditPortfolioDialogProps,\n} from \"./portfolioDetails\";\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,mBAAA,GAAAjB,OAAA;AACA,IAAAkB,qBAAA,GAAAlB,OAAA;AAEA,IAAAmB,iBAAA,GAAAnB,OAAA;AAgCA,IAAAoB,iBAAA,GAAApB,OAAA;AACA,IAAAqB,cAAA,GAAArB,OAAA;AAUA,IAAAsB,gBAAA,GAAAtB,OAAA;AAWA,IAAAuB,mBAAA,GAAAvB,OAAA;AAEA,IAAAwB,sBAAA,GAAAxB,OAAA;AACA,IAAAyB,8BAAA,GAAAzB,OAAA;AAEA,IAAA0B,wBAAA,GAAA1B,OAAA;AAeA,IAAA2B,kBAAA,GAAA3B,OAAA;AAWA,IAAA4B,kBAAA,GAAA5B,OAAA;AAiBA,IAAA6B,sBAAA,GAAA7B,OAAA;AACA,IAAA8B,gBAAA,GAAA9B,OAAA;AAKA,IAAA+B,SAAA,GAAA/B,OAAA;AAEA,IAAAgC,~~gBAAA~~,GAAAhC,OAAA;~~AAEA~~,IAAAiC,~~iBAAA~~,GAAAjC,OAAA;~~AAKA~~,IAAAkC,~~SAAA~~,GAAAlC,OAAA;~~AAQA~~,IAAAmC,~~oBAAA~~,GAAAnC,OAAA;~~AAUA~~,IAAAoC,~~iBAAA~~,GAAApC,OAAA","ignoreList":[]}
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","_ProjectOptionsMenu","_PortfolioOptionsMenu","_dashboardWidgets","_FloatingControls","_MessageDialog","_MessageFeedback","_HelpAndSupportMenu","_LinkingCommandsButton","_LinkBranchOrPullRequestDialog","_ConnectRepositoryDialog","_WebhookLogsDialog","_SourceCodeSection","_SuggestSubtasksButton","_TaskOptionsMenu","_UserMenu","_UserDetailsDialog","_TwoFactorShield","_TwoFactorDialogs","_settings","_FeatureAvailability","_portfolioDetails"],"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 { ProjectOptionsMenu } from \"./ProjectOptionsMenu\";\nexport { PortfolioOptionsMenu } from \"./PortfolioOptionsMenu\";\nexport type { PortfolioOptionsMenuProps } from \"./PortfolioOptionsMenu\";\nexport {\n WidgetGrid,\n WidgetGroupBy,\n StatWidget,\n WidgetRankedList,\n OverviewWidget,\n AreaChartWidget,\n DailyDeltaChartWidget,\n LeaderboardWidget,\n StackedBarChartWidget,\n CHART_SERIES_COLORS,\n OVERVIEW_SECTION_COLORS,\n PERIOD_OPTIONS,\n PeriodPicker,\n} from \"./dashboardWidgets\";\nexport type {\n WidgetGroupByProps,\n StatWidgetProps,\n RankedListItem,\n OverviewSectionData,\n OverviewWidgetProps,\n AreaChartWidgetProps,\n DailyDeltaPoint,\n DailyDeltaChartWidgetProps,\n LeaderboardRowData,\n LeaderboardWidgetProps,\n StackedBarColumn,\n StackedBarChartWidgetProps,\n PeriodPickerProps,\n} from \"./dashboardWidgets\";\n\nexport type { ProjectOptionsMenuProps } from \"./ProjectOptionsMenu\";\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 {\n MessageFeedback,\n POSITIVE_FEEDBACK_OPTIONS,\n NEGATIVE_FEEDBACK_OPTIONS,\n} from \"./MessageFeedback\";\nexport type {\n MessageFeedbackProps,\n MessageFeedbackResult,\n FeedbackOption,\n FeedbackSentiment,\n} from \"./MessageFeedback\";\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 {\n UserDetailsDialog,\n USER_DETAILS_AVATAR_SIZE,\n} from \"./UserDetailsDialog\";\nexport type {\n UserDetailsDialogProps,\n UserDetailsAvatar,\n} from \"./UserDetailsDialog\";\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\";\nexport {\n FeatureAvailability,\n DEFAULT_FEATURE_AVAILABILITY,\n} from \"./FeatureAvailability\";\nexport type {\n FeatureAvailabilityProps,\n AvailabilityRow,\n AvailabilityMark,\n AvailabilityStatus,\n} from \"./FeatureAvailability\";\nexport {\n PORTFOLIO_TYPES,\n VISIBILITY_OPTIONS,\n DEFAULT_PORTFOLIO_FORM_VALUES,\n LEADERS_LIST,\n CATEGORIES,\n CLIENTS,\n contextFieldLabel,\n leaderShortName,\n defaultPortfolioName,\n isPortfolioDetailsValid,\n sampleProjectOptionIds,\n PortfolioDetailsFields,\n EditPortfolioDialog,\n} from \"./portfolioDetails\";\nexport type {\n PortfolioKind,\n PortfolioVisibility,\n GroupBy,\n PortfolioFormValues,\n PickerLeader,\n PortfolioDetailsFieldsProps,\n EditPortfolioDialogProps,\n} from \"./portfolioDetails\";\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,mBAAA,GAAAjB,OAAA;AACA,IAAAkB,qBAAA,GAAAlB,OAAA;AAEA,IAAAmB,iBAAA,GAAAnB,OAAA;AAgCA,IAAAoB,iBAAA,GAAApB,OAAA;AACA,IAAAqB,cAAA,GAAArB,OAAA;AAUA,IAAAsB,gBAAA,GAAAtB,OAAA;AAWA,IAAAuB,mBAAA,GAAAvB,OAAA;AAEA,IAAAwB,sBAAA,GAAAxB,OAAA;AACA,IAAAyB,8BAAA,GAAAzB,OAAA;AAEA,IAAA0B,wBAAA,GAAA1B,OAAA;AAeA,IAAA2B,kBAAA,GAAA3B,OAAA;AAWA,IAAA4B,kBAAA,GAAA5B,OAAA;AAiBA,IAAA6B,sBAAA,GAAA7B,OAAA;AACA,IAAA8B,gBAAA,GAAA9B,OAAA;AAKA,IAAA+B,SAAA,GAAA/B,OAAA;AAEA,IAAAgC,kBAAA,GAAAhC,OAAA;AAQA,IAAAiC,gBAAA,GAAAjC,OAAA;AAEA,IAAAkC,iBAAA,GAAAlC,OAAA;AAKA,IAAAmC,SAAA,GAAAnC,OAAA;AAQA,IAAAoC,oBAAA,GAAApC,OAAA;AAUA,IAAAqC,iBAAA,GAAArC,OAAA","ignoreList":[]}

package/dist/cjs/presentation/whiteboard/bottomDock.js CHANGED Viewed

@@ -62,9 +62,10 @@ var TOOL_HINTS = exports.TOOL_HINTS = {
   roundedRectangle: "Click to drop a default rectangle, or draw one to size. Press R for a rectangle.",
   triangle: "Click to drop a default triangle, or draw one to size. Press Y for a triangle.",
   connector: "Drag from one element to another to connect them. Press C to connect.",
-  projectElements: "Put a task or a project on the board — pick which above, then draw its card.",
+  projectElements: "Put a task, a project or a person on the board — pick which above, then draw it.",
   project: "Draw a box to place a project card, then pick the project it shows.",
   task: "Draw a box to place a task card, then pick the task it shows.",
+  person: "Draw a circle to place a person, then pick who it shows.",
   link: "Draw a box to place a link, or paste a URL anywhere. Press L for link.",
   file: "Draw a box to place a file, or drop one on the board. Press F for file.",
   sticky: "Click anywhere on the canvas to drop a sticky note. Press S for a sticky note.",
@@ -172,7 +173,7 @@ var BottomDock = exports.BottomDock = function BottomDock(_ref2) {
      the pill for free — another dock tool, Esc on the canvas, or the gesture
      finishing and disarming the tool. Two states could disagree; one cannot. */
   var shapesOpen = isShapeTool(activeTool);
-  var projectElementsOpen = activeTool === "task" || activeTool === "project";
+  var projectElementsOpen = activeTool === "task" || activeTool === "project" || activeTool === "person";
   return /*#__PURE__*/_react.default.createElement(StyledBottomDock, null, shapesOpen ? /*#__PURE__*/_react.default.createElement(StyledToolPill, null, /*#__PURE__*/_react.default.createElement(ToolButton, _extends({
     tip: "Circle",
     active: activeTool === "circle",
@@ -203,7 +204,13 @@ var BottomDock = exports.BottomDock = function BottomDock(_ref2) {
     onClick: function onClick() {
       return onToolChange("project");
     }
-  }, hoverProps("project")), /*#__PURE__*/_react.default.createElement(_Icons.ProjectIcon, null))) : null, /*#__PURE__*/_react.default.createElement(ToolSurface, null, /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
+  }, hoverProps("project")), /*#__PURE__*/_react.default.createElement(_Icons.ProjectIcon, null)), /*#__PURE__*/_react.default.createElement(ToolButton, _extends({
+    tip: "User",
+    active: activeTool === "person",
+    onClick: function onClick() {
+      return onToolChange("person");
+    }
+  }, hoverProps("person")), /*#__PURE__*/_react.default.createElement(_Icons.PersonIcon, null))) : null, /*#__PURE__*/_react.default.createElement(ToolSurface, null, /*#__PURE__*/_react.default.createElement(_Tooltip.Tooltip, {
     title: "Sticky Note"
   }, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, _extends({
     variant: "text gray",