@ynput/ayon-frontend-shared 0.2.32 → 0.2.33

package/dist/shared/src/containers/Feed/components/ReactionContainer/ReactionPanelOpener.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReactionPanelOpener.es.js","sources":["../../../../../../../src/containers/Feed/components/ReactionContainer/ReactionPanelOpener.tsx"],"sourcesContent":["import { Icon } from \"@ynput/ayon-react-components\"\nimport * as Styled from './Reactions.styled'\nimport { reactionMapping } from \"./helpers\"\nimport { Reaction as ReactionType } from \"./types\"\nimport Reaction from \"./Reaction\"\nimport { useState } from \"react\"\n\ntype Props = {\n  reactions: ReactionType[]\n  changeHandler: (reaction: ReactionType) => void\n}\n\nconst ReactionPanelOpener = ({\n  reactions,\n  changeHandler,\n}: Props) => {\n  const [isPopupOpen, setIsPopupOpen] = useState(false)\n  const activeReactions = reactions\n    .filter((reaction) => reaction.isActive)\n    .map((reaction) => reaction.type)\n\n  return (\n    <Styled.ReactionPanelOpener>\n      <Icon\n        icon=\"add_reaction\"\n        className=\"add-reaction\"\n        onClick={() => setIsPopupOpen(!isPopupOpen)}\n      />\n      {isPopupOpen && (\n        <>\n          <Styled.Overlay onClick={() => setIsPopupOpen(false)} />\n\n          <Styled.ReactionsPanel>\n            {reactionMapping.map((reaction) => {\n              const reactionObj = {\n                type: reaction.key,\n                isActive: activeReactions.includes(reaction.key),\n              }\n              return (\n                <Reaction\n                  key={reactionObj.type}\n                  reaction={reactionObj}\n                  variant=\"compact\"\n                  onClick={() => {\n                    changeHandler({ ...reactionObj, isActive: !reactionObj.isActive })\n                    setIsPopupOpen(false)\n                  }}\n                />\n              )\n            })}\n          </Styled.ReactionsPanel>\n        </>\n      )}\n    </Styled.ReactionPanelOpener>\n  )\n}\n\nexport default ReactionPanelOpener"],"names":["ReactionPanelOpener","reactions","changeHandler","isPopupOpen","setIsPopupOpen","useState","activeReactions","reaction","jsxs","Styled.ReactionPanelOpener","jsx","Icon","Fragment","Styled.Overlay","Styled.ReactionsPanel","reactionMapping","reactionObj","Reaction"],"mappings":";;;;;;AAYA,MAAMA,IAAsB,CAAC;AAAA,EAC3B,WAAAC;AAAA,EACA,eAAAC;AACF,MAAa;AACX,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAAS,EAAK,GAC9CC,IAAkBL,EACrB,OAAO,CAACM,MAAaA,EAAS,QAAQ,EACtC,IAAI,CAACA,MAAaA,EAAS,IAAI;AAGhC,SAAAC,gBAAAA,EAAA,KAACC,GAAA,EACC,UAAA;AAAA,IAAAC,gBAAAA,EAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,SAAS,MAAMP,EAAe,CAACD,CAAW;AAAA,MAAA;AAAA,IAC5C;AAAA,IACCA,KAEGK,gBAAAA,EAAA,KAAAI,YAAA,EAAA,UAAA;AAAA,MAAAF,gBAAAA,EAAA,IAACG,GAAA,EAAe,SAAS,MAAMT,EAAe,EAAK,GAAG;AAAA,4BAErDU,GAAA,EACE,UAAgBC,EAAA,IAAI,CAACR,MAAa;AACjC,cAAMS,IAAc;AAAA,UAClB,MAAMT,EAAS;AAAA,UACf,UAAUD,EAAgB,SAASC,EAAS,GAAG;AAAA,QACjD;AAEE,eAAAG,gBAAAA,EAAA;AAAA,UAACO;AAAA,UAAA;AAAA,YAEC,UAAUD;AAAA,YACV,SAAQ;AAAA,YACR,SAAS,MAAM;AACb,cAAAd,EAAc,EAAE,GAAGc,GAAa,UAAU,CAACA,EAAY,UAAU,GACjEZ,EAAe,EAAK;AAAA,YAAA;AAAA,UACtB;AAAA,UANKY,EAAY;AAAA,QAOnB;AAAA,MAAA,CAEH,EACH,CAAA;AAAA,IAAA,EACF,CAAA;AAAA,EAAA,GAEJ;AAEJ;"}
+{"version":3,"file":"ReactionPanelOpener.es.js","sources":["../../../../../../../src/containers/Feed/components/ReactionContainer/ReactionPanelOpener.tsx"],"sourcesContent":["import { Icon } from '@ynput/ayon-react-components'\nimport * as Styled from './Reactions.styled'\nimport { reactionMapping } from './helpers'\nimport { Reaction as ReactionType } from './types'\nimport Reaction from './Reaction'\nimport { useState } from 'react'\n\ntype Props = {\n  reactions: ReactionType[]\n  changeHandler: (reaction: ReactionType) => void\n  categoryPrimary?: string\n  categorySecondary?: string\n  categoryTertiary?: string\n}\n\nconst ReactionPanelOpener = ({\n  reactions,\n  changeHandler,\n  categoryPrimary,\n  categorySecondary,\n  categoryTertiary,\n}: Props) => {\n  const [isPopupOpen, setIsPopupOpen] = useState(false)\n  const activeReactions = reactions\n    .filter((reaction) => reaction.isActive)\n    .map((reaction) => reaction.type)\n\n  return (\n    <Styled.ReactionPanelOpener\n      $categoryPrimary={categoryPrimary}\n      $categorySecondary={categorySecondary}\n      $categoryTertiary={categoryTertiary}\n    >\n      <Icon\n        icon=\"add_reaction\"\n        className=\"add-reaction\"\n        onClick={() => setIsPopupOpen(!isPopupOpen)}\n      />\n      {isPopupOpen && (\n        <>\n          <Styled.Overlay onClick={() => setIsPopupOpen(false)} />\n\n          <Styled.ReactionsPanel\n            $categoryPrimary={categoryPrimary}\n            $categorySecondary={categorySecondary}\n            $categoryTertiary={categoryTertiary}\n          >\n            {reactionMapping.map((reaction) => {\n              const reactionObj = {\n                type: reaction.key,\n                isActive: activeReactions.includes(reaction.key),\n              }\n              return (\n                <Reaction\n                  key={reactionObj.type}\n                  reaction={reactionObj}\n                  variant=\"compact\"\n                  onClick={() => {\n                    changeHandler({ ...reactionObj, isActive: !reactionObj.isActive })\n                    setIsPopupOpen(false)\n                  }}\n                  categoryPrimary={categoryPrimary}\n                  categorySecondary={categorySecondary}\n                  categoryTertiary={categoryTertiary}\n                />\n              )\n            })}\n          </Styled.ReactionsPanel>\n        </>\n      )}\n    </Styled.ReactionPanelOpener>\n  )\n}\n\nexport default ReactionPanelOpener\n"],"names":["ReactionPanelOpener","reactions","changeHandler","categoryPrimary","categorySecondary","categoryTertiary","isPopupOpen","setIsPopupOpen","useState","activeReactions","reaction","jsxs","Styled.ReactionPanelOpener","jsx","Icon","Fragment","Styled.Overlay","Styled.ReactionsPanel","reactionMapping","reactionObj","Reaction"],"mappings":";;;;;;AAeA,MAAMA,IAAsB,CAAC;AAAA,EAC3B,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,kBAAAC;AACF,MAAa;AACX,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAAS,EAAK,GAC9CC,IAAkBR,EACrB,OAAO,CAACS,MAAaA,EAAS,QAAQ,EACtC,IAAI,CAACA,MAAaA,EAAS,IAAI;AAGhC,SAAAC,gBAAAA,EAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,kBAAkBT;AAAA,MAClB,oBAAoBC;AAAA,MACpB,mBAAmBC;AAAA,MAEnB,UAAA;AAAA,QAAAQ,gBAAAA,EAAA;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,WAAU;AAAA,YACV,SAAS,MAAMP,EAAe,CAACD,CAAW;AAAA,UAAA;AAAA,QAC5C;AAAA,QACCA,KAEGK,gBAAAA,EAAA,KAAAI,YAAA,EAAA,UAAA;AAAA,UAAAF,gBAAAA,EAAA,IAACG,GAAA,EAAe,SAAS,MAAMT,EAAe,EAAK,GAAG;AAAA,UAEtDM,gBAAAA,EAAA;AAAA,YAACI;AAAAA,YAAA;AAAA,cACC,kBAAkBd;AAAA,cAClB,oBAAoBC;AAAA,cACpB,mBAAmBC;AAAA,cAElB,UAAAa,EAAgB,IAAI,CAACR,MAAa;AACjC,sBAAMS,IAAc;AAAA,kBAClB,MAAMT,EAAS;AAAA,kBACf,UAAUD,EAAgB,SAASC,EAAS,GAAG;AAAA,gBACjD;AAEE,uBAAAG,gBAAAA,EAAA;AAAA,kBAACO;AAAA,kBAAA;AAAA,oBAEC,UAAUD;AAAA,oBACV,SAAQ;AAAA,oBACR,SAAS,MAAM;AACb,sBAAAjB,EAAc,EAAE,GAAGiB,GAAa,UAAU,CAACA,EAAY,UAAU,GACjEZ,EAAe,EAAK;AAAA,oBACtB;AAAA,oBACA,iBAAAJ;AAAA,oBACA,mBAAAC;AAAA,oBACA,kBAAAC;AAAA,kBAAA;AAAA,kBATKc,EAAY;AAAA,gBAUnB;AAAA,cAEH,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH,EACF,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAEJ;AAEJ;"}

package/dist/shared/src/containers/Feed/components/ReactionContainer/Reactions.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const s=require("../../../../../../_virtual/jsx-runtime.cjs.js"),i=require("./ExistingReactions.cjs.js"),n=require("./ReactionPanelOpener.cjs.js"),o=require("./Reactions.styled.cjs.js"),x=({reactions:e,changeHandler:t,readOnly:r})=>s.jsxRuntimeExports.jsxs(o.ReactionsWrapper,{children:[!r&&s.jsxRuntimeExports.jsx(n,{reactions:e,changeHandler:t}),s.jsxRuntimeExports.jsx(i,{reactions:e,changeHandler:t})]});module.exports=x;
+"use strict";const n=require("../../../../../../_virtual/jsx-runtime.cjs.js"),o=require("./ExistingReactions.cjs.js"),r=require("./ReactionPanelOpener.cjs.js"),R=require("./Reactions.styled.cjs.js"),j=({reactions:i,changeHandler:x,readOnly:u,categoryPrimary:s,categorySecondary:e,categoryTertiary:t})=>n.jsxRuntimeExports.jsxs(R.ReactionsWrapper,{$categoryPrimary:s,$categorySecondary:e,$categoryTertiary:t,children:[!u&&n.jsxRuntimeExports.jsx(r,{reactions:i,changeHandler:x,categoryPrimary:s,categorySecondary:e,categoryTertiary:t}),n.jsxRuntimeExports.jsx(o,{reactions:i,changeHandler:x,categoryPrimary:s,categorySecondary:e,categoryTertiary:t})]});module.exports=j;
 //# sourceMappingURL=Reactions.cjs.js.map

package/dist/shared/src/containers/Feed/components/ReactionContainer/Reactions.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Reactions.cjs.js","sources":["../../../../../../../src/containers/Feed/components/ReactionContainer/Reactions.tsx"],"sourcesContent":["import ExistingReactions from './ExistingReactions'\nimport ReactionPanelOpener from './ReactionPanelOpener'\nimport * as Styled from './Reactions.styled'\nimport { Reaction } from './types'\n\ntype Props = {\n  reactions: Reaction[]\n  changeHandler: (reaction: Reaction) => void\n  readOnly?: boolean\n}\n\nconst Reactions = ({ reactions, changeHandler, readOnly }: Props) => {\n  return (\n    <Styled.ReactionsWrapper>\n      {!readOnly && <ReactionPanelOpener reactions={reactions} changeHandler={changeHandler} />}\n      <ExistingReactions reactions={reactions} changeHandler={changeHandler} />\n    </Styled.ReactionsWrapper>\n  )\n}\n\nexport default Reactions\n"],"names":["Reactions","reactions","changeHandler","readOnly","jsxs","Styled.ReactionsWrapper","jsx","ReactionPanelOpener","ExistingReactions"],"mappings":"uMAWMA,EAAY,CAAC,CAAE,UAAAC,EAAW,cAAAC,EAAe,SAAAC,KAE3CC,EAAA,kBAAA,KAACC,mBAAA,CACE,SAAA,CAAA,CAACF,GAAYG,EAAAA,kBAAAA,IAACC,EAAoB,CAAA,UAAAN,EAAsB,cAAAC,CAA8B,CAAA,EACvFI,EAAAA,kBAAAA,IAACE,EAAkB,CAAA,UAAAP,EAAsB,cAAAC,CAA8B,CAAA,CAAA,EACzE"}
+{"version":3,"file":"Reactions.cjs.js","sources":["../../../../../../../src/containers/Feed/components/ReactionContainer/Reactions.tsx"],"sourcesContent":["import ExistingReactions from './ExistingReactions'\nimport ReactionPanelOpener from './ReactionPanelOpener'\nimport * as Styled from './Reactions.styled'\nimport { Reaction } from './types'\n\ntype Props = {\n  reactions: Reaction[]\n  changeHandler: (reaction: Reaction) => void\n  readOnly?: boolean\n  categoryPrimary?: string\n  categorySecondary?: string\n  categoryTertiary?: string\n}\n\nconst Reactions = ({\n  reactions,\n  changeHandler,\n  readOnly,\n  categoryPrimary,\n  categorySecondary,\n  categoryTertiary,\n}: Props) => {\n  return (\n    <Styled.ReactionsWrapper\n      $categoryPrimary={categoryPrimary}\n      $categorySecondary={categorySecondary}\n      $categoryTertiary={categoryTertiary}\n    >\n      {!readOnly && (\n        <ReactionPanelOpener\n          reactions={reactions}\n          changeHandler={changeHandler}\n          categoryPrimary={categoryPrimary}\n          categorySecondary={categorySecondary}\n          categoryTertiary={categoryTertiary}\n        />\n      )}\n      <ExistingReactions\n        reactions={reactions}\n        changeHandler={changeHandler}\n        categoryPrimary={categoryPrimary}\n        categorySecondary={categorySecondary}\n        categoryTertiary={categoryTertiary}\n      />\n    </Styled.ReactionsWrapper>\n  )\n}\n\nexport default Reactions\n"],"names":["Reactions","reactions","changeHandler","readOnly","categoryPrimary","categorySecondary","categoryTertiary","jsxs","Styled.ReactionsWrapper","jsx","ReactionPanelOpener","ExistingReactions"],"mappings":"uMAcMA,EAAY,CAAC,CACjB,UAAAC,EACA,cAAAC,EACA,SAAAC,EACA,gBAAAC,EACA,kBAAAC,EACA,iBAAAC,CACF,IAEIC,EAAA,kBAAA,KAACC,EAAO,iBAAP,CACC,iBAAkBJ,EAClB,mBAAoBC,EACpB,kBAAmBC,EAElB,SAAA,CAAA,CAACH,GACAM,EAAA,kBAAA,IAACC,EAAA,CACC,UAAAT,EACA,cAAAC,EACA,gBAAAE,EACA,kBAAAC,EACA,iBAAAC,CAAA,CACF,EAEFG,EAAA,kBAAA,IAACE,EAAA,CACC,UAAAV,EACA,cAAAC,EACA,gBAAAE,EACA,kBAAAC,EACA,iBAAAC,CAAA,CAAA,CACF,CAAA,CACF"}

package/dist/shared/src/containers/Feed/components/ReactionContainer/Reactions.es.js

@@ -1,12 +1,45 @@
-import { j as o } from "../../../../../../_virtual/jsx-runtime.es.js";
-import i from "./ExistingReactions.es.js";
-import e from "./ReactionPanelOpener.es.js";
-import { ReactionsWrapper as m } from "./Reactions.styled.es.js";
-const f = ({ reactions: r, changeHandler: t, readOnly: s }) => /* @__PURE__ */ o.jsxs(m, { children: [
-  !s && /* @__PURE__ */ o.jsx(e, { reactions: r, changeHandler: t }),
-  /* @__PURE__ */ o.jsx(i, { reactions: r, changeHandler: t })
-] });
+import { j as i } from "../../../../../../_virtual/jsx-runtime.es.js";
+import x from "./ExistingReactions.es.js";
+import r from "./ReactionPanelOpener.es.js";
+import { ReactionsWrapper as e } from "./Reactions.styled.es.js";
+const $ = ({
+  reactions: p,
+  changeHandler: m,
+  readOnly: n,
+  categoryPrimary: s,
+  categorySecondary: o,
+  categoryTertiary: t
+}) => /* @__PURE__ */ i.jsxs(
+  e,
+  {
+    $categoryPrimary: s,
+    $categorySecondary: o,
+    $categoryTertiary: t,
+    children: [
+      !n && /* @__PURE__ */ i.jsx(
+        r,
+        {
+          reactions: p,
+          changeHandler: m,
+          categoryPrimary: s,
+          categorySecondary: o,
+          categoryTertiary: t
+        }
+      ),
+      /* @__PURE__ */ i.jsx(
+        x,
+        {
+          reactions: p,
+          changeHandler: m,
+          categoryPrimary: s,
+          categorySecondary: o,
+          categoryTertiary: t
+        }
+      )
+    ]
+  }
+);
 export {
-  f as default
+  $ as default
 };
 //# sourceMappingURL=Reactions.es.js.map

package/dist/shared/src/containers/Feed/components/ReactionContainer/Reactions.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Reactions.es.js","sources":["../../../../../../../src/containers/Feed/components/ReactionContainer/Reactions.tsx"],"sourcesContent":["import ExistingReactions from './ExistingReactions'\nimport ReactionPanelOpener from './ReactionPanelOpener'\nimport * as Styled from './Reactions.styled'\nimport { Reaction } from './types'\n\ntype Props = {\n  reactions: Reaction[]\n  changeHandler: (reaction: Reaction) => void\n  readOnly?: boolean\n}\n\nconst Reactions = ({ reactions, changeHandler, readOnly }: Props) => {\n  return (\n    <Styled.ReactionsWrapper>\n      {!readOnly && <ReactionPanelOpener reactions={reactions} changeHandler={changeHandler} />}\n      <ExistingReactions reactions={reactions} changeHandler={changeHandler} />\n    </Styled.ReactionsWrapper>\n  )\n}\n\nexport default Reactions\n"],"names":["Reactions","reactions","changeHandler","readOnly","jsxs","Styled.ReactionsWrapper","jsx","ReactionPanelOpener","ExistingReactions"],"mappings":";;;;AAWA,MAAMA,IAAY,CAAC,EAAE,WAAAC,GAAW,eAAAC,GAAe,UAAAC,QAE3CC,gBAAAA,EAAA,KAACC,GAAA,EACE,UAAA;AAAA,EAAA,CAACF,KAAYG,gBAAAA,EAAAA,IAACC,GAAoB,EAAA,WAAAN,GAAsB,eAAAC,EAA8B,CAAA;AAAA,EACvFI,gBAAAA,EAAAA,IAACE,GAAkB,EAAA,WAAAP,GAAsB,eAAAC,EAA8B,CAAA;AAAA,GACzE;"}
+{"version":3,"file":"Reactions.es.js","sources":["../../../../../../../src/containers/Feed/components/ReactionContainer/Reactions.tsx"],"sourcesContent":["import ExistingReactions from './ExistingReactions'\nimport ReactionPanelOpener from './ReactionPanelOpener'\nimport * as Styled from './Reactions.styled'\nimport { Reaction } from './types'\n\ntype Props = {\n  reactions: Reaction[]\n  changeHandler: (reaction: Reaction) => void\n  readOnly?: boolean\n  categoryPrimary?: string\n  categorySecondary?: string\n  categoryTertiary?: string\n}\n\nconst Reactions = ({\n  reactions,\n  changeHandler,\n  readOnly,\n  categoryPrimary,\n  categorySecondary,\n  categoryTertiary,\n}: Props) => {\n  return (\n    <Styled.ReactionsWrapper\n      $categoryPrimary={categoryPrimary}\n      $categorySecondary={categorySecondary}\n      $categoryTertiary={categoryTertiary}\n    >\n      {!readOnly && (\n        <ReactionPanelOpener\n          reactions={reactions}\n          changeHandler={changeHandler}\n          categoryPrimary={categoryPrimary}\n          categorySecondary={categorySecondary}\n          categoryTertiary={categoryTertiary}\n        />\n      )}\n      <ExistingReactions\n        reactions={reactions}\n        changeHandler={changeHandler}\n        categoryPrimary={categoryPrimary}\n        categorySecondary={categorySecondary}\n        categoryTertiary={categoryTertiary}\n      />\n    </Styled.ReactionsWrapper>\n  )\n}\n\nexport default Reactions\n"],"names":["Reactions","reactions","changeHandler","readOnly","categoryPrimary","categorySecondary","categoryTertiary","jsxs","Styled.ReactionsWrapper","jsx","ReactionPanelOpener","ExistingReactions"],"mappings":";;;;AAcA,MAAMA,IAAY,CAAC;AAAA,EACjB,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,kBAAAC;AACF,MAEIC,gBAAAA,EAAA;AAAA,EAACC;AAAAA,EAAA;AAAA,IACC,kBAAkBJ;AAAA,IAClB,oBAAoBC;AAAA,IACpB,mBAAmBC;AAAA,IAElB,UAAA;AAAA,MAAA,CAACH,KACAM,gBAAAA,EAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAAT;AAAA,UACA,eAAAC;AAAA,UACA,iBAAAE;AAAA,UACA,mBAAAC;AAAA,UACA,kBAAAC;AAAA,QAAA;AAAA,MACF;AAAA,MAEFG,gBAAAA,EAAA;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,WAAAV;AAAA,UACA,eAAAC;AAAA,UACA,iBAAAE;AAAA,UACA,mBAAAC;AAAA,UACA,kBAAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AACF;"}

package/dist/shared/src/containers/Feed/components/ReactionContainer/Reactions.styled.cjs.js

@@ -1,4 +1,23 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("styled-components"),r=o.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),i=(r,o,a)=>r&&e.css`
+    --reaction-border-color: ${r};
+    --reaction-active-bg: ${o};
+    --reaction-hover-bg: ${o};
+    --reaction-active-border: ${r};
+  `,c=e.div`
+  /* VARS */
+  --reaction-border-color: var(--md-sys-color-outline-variant);
+  --reaction-hover-bg: var(--md-sys-color-surface-container-high-hover);
+  --reaction-hover-border: var(--md-sys-color-outline);
+  --reaction-active-bg: var(--md-sys-color-primary-container);
+  --reaction-active-border: var(--md-sys-color-primary);
+  --reaction-active-hover-bg: var(--md-sys-color-primary-container-hover);
+  --reaction-active-hover-border: var(--md-sys-color-primary-hover);
+  --reaction-compact-active-bg: var(--md-sys-color-primary-container);
+  --reaction-compact-active-hover-bg: var(--md-sys-color-primary-container-hover);
+
+  /* CATEGORY */
+  ${({$categoryPrimary:r,$categorySecondary:o,$categoryTertiary:a})=>i(r,o)}
+
   display: flex;
   justify-content: center;
   align-items: center;
@@ -9,18 +28,19 @@
   cursor: pointer;
   user-select: none;
 
-  border: solid 1px var(--md-sys-color-outline-variant);
+  border: solid 1px var(--reaction-border-color);
   border-radius: 12px;
   &:hover {
-    background-color: var(--md-sys-color-surface-container-high-hover);
-    border-color: var(--md-sys-color-outline);
+    background-color: var(--reaction-hover-bg);
+    border-color: ${({$categoryPrimary:r})=>r?"var(--reaction-border-color)":"var(--reaction-hover-border)"};
+    filter: ${({$categoryPrimary:r})=>r?"brightness(1.2)":"none"};
   }
   &.active {
-    background-color: var(--md-sys-color-primary-container);
-    border-color: var(--md-sys-color-primary);
+    background-color: var(--reaction-active-bg);
+    border-color: var(--reaction-active-border);
     &:hover {
-      background-color: var(--md-sys-color-primary-container-hover);
-      border-color: var(--md-sys-color-primary-hover);
+      background-color: var(--reaction-hover-bg);
+      border-color: ${({$categoryPrimary:r})=>r?"var(--reaction-border-color)":"var(--reaction-active-hover-border)"};
     }
   }
 
@@ -30,11 +50,15 @@
     padding: 8px;
     border-color: transparent;
     border-radius: var(--border-radius-m);
+    &:hover {
+      background-color: ${({$categoryPrimary:r})=>r?"var(--reaction-hover-bg)":"var(--md-sys-color-surface-container-high-hover)"};
+    }
     &.active {
-      background-color: var(--md-sys-color-secondary-container);
+      background-color: ${({$categoryPrimary:r})=>r||"var(--reaction-compact-active-bg)"};
       &:hover {
         border-color: transparent;
-        background-color: var(--md-sys-color-secondary-container-hover);
+        background-color: var(--reaction-hover-bg);
+        filter: ${({$categoryPrimary:r})=>r?"brightness(1.2)":"none"};
       }
     }
   }
@@ -43,18 +67,26 @@
     position: relative;
     height: 19px;
   }
-`,e=o.div`
+`,t=e.div`
   outline: 'solid 1px red';
   display: flex;
   gap: 8px;
-`,a=o.div`
+`,n=e.div`
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 55;
-`,i=o.div`
+`,s=e.div`
+  /* VARS */
+  --panel-bg: var(--md-sys-color-surface-container-high);
+
+  /* CATEGORY */
+  ${({$categoryPrimary:r,$categorySecondary:o})=>o&&e.css`
+      --panel-bg: ${o};
+    `}
+
   display: flex;
   gap: 4px;
 
@@ -63,15 +95,27 @@
   left: 0;
   z-index: 60;
 
-  background-color: var(--md-sys-color-surface-container-high);
+  background-color: var(--panel-bg);
   padding: 4px;
   border-radius: 4px;
   box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.15);
-`,n=o.div`
+`,v=e.div`
+  /* VARS */
+  --opener-bg: var(--md-sys-color-surface-container-high);
+  --opener-hover-bg: var(--md-sys-color-surface-container-high-hover);
+  --opener-color: var(--md-sys-color-outline);
+
+  /* CATEGORY */
+  ${({$categoryPrimary:r,$categorySecondary:o})=>o&&e.css`
+      --opener-bg: ${o};
+      --opener-hover-bg: ${o};
+      --opener-color: ${r};
+    `}
+
   user-select: none;
   .add-reaction {
-    background-color: var(--md-sys-color-surface-container-high);
-    color: var(--md-sys-color-outline);
+    background-color: var(--opener-bg);
+    color: var(--opener-color);
     border-radius: 12px;
     font-size: 16px;
     width: 24px;
@@ -81,12 +125,13 @@
     align-items: center;
     cursor: pointer;
     &:hover {
-      background-color: var(--md-sys-color-surface-container-high-hover);
+      background-color: var(--opener-hover-bg);
+      filter: ${({$categoryPrimary:r})=>r?"brightness(1.2)":"none"};
     }
   }
-`,t=o.div`
+`,l=e.div`
   display: flex;
   gap: 8px;
   position: relative;
-`;exports.ActiveReactionsList=e;exports.Overlay=a;exports.Reaction=r;exports.ReactionPanelOpener=n;exports.ReactionsPanel=i;exports.ReactionsWrapper=t;
+`;exports.ActiveReactionsList=t;exports.Overlay=n;exports.Reaction=c;exports.ReactionPanelOpener=v;exports.ReactionsPanel=s;exports.ReactionsWrapper=l;
 //# sourceMappingURL=Reactions.styled.cjs.js.map

package/dist/shared/src/containers/Feed/components/ReactionContainer/Reactions.styled.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Reactions.styled.cjs.js","sources":["../../../../../../../src/containers/Feed/components/ReactionContainer/Reactions.styled.ts"],"sourcesContent":["import styled from 'styled-components'\n\nconst Reaction = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 4px;\n\n  height: 24px;\n  padding: 0px 8px;\n  cursor: pointer;\n  user-select: none;\n\n  border: solid 1px var(--md-sys-color-outline-variant);\n  border-radius: 12px;\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n    border-color: var(--md-sys-color-outline);\n  }\n  &.active {\n    background-color: var(--md-sys-color-primary-container);\n    border-color: var(--md-sys-color-primary);\n    &:hover {\n      background-color: var(--md-sys-color-primary-container-hover);\n      border-color: var(--md-sys-color-primary-hover);\n    }\n  }\n\n  &.compact {\n    width: 32px;\n    height: 32px;\n    padding: 8px;\n    border-color: transparent;\n    border-radius: var(--border-radius-m);\n    &.active {\n      background-color: var(--md-sys-color-secondary-container);\n      &:hover {\n        border-color: transparent;\n        background-color: var(--md-sys-color-secondary-container-hover);\n      }\n    }\n  }\n\n  .emoji {\n    position: relative;\n    height: 19px;\n  }\n`\nconst ActiveReactionsList = styled.div`\n  outline: 'solid 1px red';\n  display: flex;\n  gap: 8px;\n`\n\nconst Overlay = styled.div`\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 55;\n`\nconst ReactionsPanel = styled.div`\n  display: flex;\n  gap: 4px;\n\n  position: absolute;\n  top: -48px;\n  left: 0;\n  z-index: 60;\n\n  background-color: var(--md-sys-color-surface-container-high);\n  padding: 4px;\n  border-radius: 4px;\n  box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.15);\n`\n\nconst ReactionPanelOpener = styled.div`\n  user-select: none;\n  .add-reaction {\n    background-color: var(--md-sys-color-surface-container-high);\n    color: var(--md-sys-color-outline);\n    border-radius: 12px;\n    font-size: 16px;\n    width: 24px;\n    height: 24px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    &:hover {\n      background-color: var(--md-sys-color-surface-container-high-hover);\n    }\n  }\n`\nconst ReactionsWrapper = styled.div`\n  display: flex;\n  gap: 8px;\n  position: relative;\n`\n\nexport {\n  Reaction,\n  ActiveReactionsList,\n  ReactionsPanel,\n  ReactionPanelOpener,\n  ReactionsWrapper,\n  Overlay,\n}\n"],"names":["Reaction","styled","ActiveReactionsList","Overlay","ReactionsPanel","ReactionPanelOpener","ReactionsWrapper"],"mappings":"qHAEMA,EAAWC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA8ClBC,EAAsBD,EAAO;AAAA;AAAA;AAAA;AAAA,EAM7BE,EAAUF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQjBG,EAAiBH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAexBI,EAAsBJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkB7BK,EAAmBL,EAAO;AAAA;AAAA;AAAA;AAAA"}
+{"version":3,"file":"Reactions.styled.cjs.js","sources":["../../../../../../../src/containers/Feed/components/ReactionContainer/Reactions.styled.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\n\ntype CategoryProps = {\n  $categoryPrimary?: string\n  $categorySecondary?: string\n  $categoryTertiary?: string\n}\n\nconst categoryColorCss = (\n  $categoryPrimary?: string,\n  $categorySecondary?: string,\n  $categoryTertiary?: string,\n) =>\n  $categoryPrimary &&\n  css`\n    --reaction-border-color: ${$categoryPrimary};\n    --reaction-active-bg: ${$categorySecondary};\n    --reaction-hover-bg: ${$categorySecondary};\n    --reaction-active-border: ${$categoryPrimary};\n  `\n\nconst Reaction = styled.div<CategoryProps>`\n  /* VARS */\n  --reaction-border-color: var(--md-sys-color-outline-variant);\n  --reaction-hover-bg: var(--md-sys-color-surface-container-high-hover);\n  --reaction-hover-border: var(--md-sys-color-outline);\n  --reaction-active-bg: var(--md-sys-color-primary-container);\n  --reaction-active-border: var(--md-sys-color-primary);\n  --reaction-active-hover-bg: var(--md-sys-color-primary-container-hover);\n  --reaction-active-hover-border: var(--md-sys-color-primary-hover);\n  --reaction-compact-active-bg: var(--md-sys-color-primary-container);\n  --reaction-compact-active-hover-bg: var(--md-sys-color-primary-container-hover);\n\n  /* CATEGORY */\n  ${({ $categoryPrimary, $categorySecondary, $categoryTertiary }) =>\n    categoryColorCss($categoryPrimary, $categorySecondary, $categoryTertiary)}\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 4px;\n\n  height: 24px;\n  padding: 0px 8px;\n  cursor: pointer;\n  user-select: none;\n\n  border: solid 1px var(--reaction-border-color);\n  border-radius: 12px;\n  &:hover {\n    background-color: var(--reaction-hover-bg);\n    border-color: ${({ $categoryPrimary }) =>\n      $categoryPrimary ? 'var(--reaction-border-color)' : 'var(--reaction-hover-border)'};\n    filter: ${({ $categoryPrimary }) => ($categoryPrimary ? 'brightness(1.2)' : 'none')};\n  }\n  &.active {\n    background-color: var(--reaction-active-bg);\n    border-color: var(--reaction-active-border);\n    &:hover {\n      background-color: var(--reaction-hover-bg);\n      border-color: ${({ $categoryPrimary }) =>\n        $categoryPrimary ? 'var(--reaction-border-color)' : 'var(--reaction-active-hover-border)'};\n    }\n  }\n\n  &.compact {\n    width: 32px;\n    height: 32px;\n    padding: 8px;\n    border-color: transparent;\n    border-radius: var(--border-radius-m);\n    &:hover {\n      background-color: ${({ $categoryPrimary }) =>\n        $categoryPrimary\n          ? 'var(--reaction-hover-bg)'\n          : 'var(--md-sys-color-surface-container-high-hover)'};\n    }\n    &.active {\n      background-color: ${({ $categoryPrimary }) =>\n        $categoryPrimary ? $categoryPrimary : 'var(--reaction-compact-active-bg)'};\n      &:hover {\n        border-color: transparent;\n        background-color: var(--reaction-hover-bg);\n        filter: ${({ $categoryPrimary }) => ($categoryPrimary ? 'brightness(1.2)' : 'none')};\n      }\n    }\n  }\n\n  .emoji {\n    position: relative;\n    height: 19px;\n  }\n`\nconst ActiveReactionsList = styled.div`\n  outline: 'solid 1px red';\n  display: flex;\n  gap: 8px;\n`\n\nconst Overlay = styled.div`\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 55;\n`\nconst ReactionsPanel = styled.div<CategoryProps>`\n  /* VARS */\n  --panel-bg: var(--md-sys-color-surface-container-high);\n\n  /* CATEGORY */\n  ${({ $categoryPrimary, $categorySecondary }) =>\n    $categorySecondary &&\n    css`\n      --panel-bg: ${$categorySecondary};\n    `}\n\n  display: flex;\n  gap: 4px;\n\n  position: absolute;\n  top: -48px;\n  left: 0;\n  z-index: 60;\n\n  background-color: var(--panel-bg);\n  padding: 4px;\n  border-radius: 4px;\n  box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.15);\n`\n\nconst ReactionPanelOpener = styled.div<CategoryProps>`\n  /* VARS */\n  --opener-bg: var(--md-sys-color-surface-container-high);\n  --opener-hover-bg: var(--md-sys-color-surface-container-high-hover);\n  --opener-color: var(--md-sys-color-outline);\n\n  /* CATEGORY */\n  ${({ $categoryPrimary, $categorySecondary }) =>\n    $categorySecondary &&\n    css`\n      --opener-bg: ${$categorySecondary};\n      --opener-hover-bg: ${$categorySecondary};\n      --opener-color: ${$categoryPrimary};\n    `}\n\n  user-select: none;\n  .add-reaction {\n    background-color: var(--opener-bg);\n    color: var(--opener-color);\n    border-radius: 12px;\n    font-size: 16px;\n    width: 24px;\n    height: 24px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    &:hover {\n      background-color: var(--opener-hover-bg);\n      filter: ${({ $categoryPrimary }) => ($categoryPrimary ? 'brightness(1.2)' : 'none')};\n    }\n  }\n`\nconst ReactionsWrapper = styled.div<CategoryProps>`\n  display: flex;\n  gap: 8px;\n  position: relative;\n`\n\nexport {\n  Reaction,\n  ActiveReactionsList,\n  ReactionsPanel,\n  ReactionPanelOpener,\n  ReactionsWrapper,\n  Overlay,\n}\n"],"names":["categoryColorCss","$categoryPrimary","$categorySecondary","$categoryTertiary","css","Reaction","styled","ActiveReactionsList","Overlay","ReactionsPanel","ReactionPanelOpener","ReactionsWrapper"],"mappings":"qHAQMA,EAAmB,CACvBC,EACAC,EACAC,IAEAF,GACAG,EAAA;AAAA,+BAC6BH,CAAgB;AAAA,4BACnBC,CAAkB;AAAA,2BACnBA,CAAkB;AAAA,gCACbD,CAAgB;AAAA,IAG1CI,EAAWC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAapB,CAAC,CAAE,iBAAAL,EAAkB,mBAAAC,EAAoB,kBAAAC,CAAA,IACzCH,EAAiBC,EAAkBC,CAAqC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAgBzD,CAAC,CAAE,iBAAAD,CAAA,IACjBA,EAAmB,+BAAiC,8BAA8B;AAAA,cAC1E,CAAC,CAAE,iBAAAA,CAAA,IAAwBA,EAAmB,kBAAoB,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAOjE,CAAC,CAAE,iBAAAA,CAAA,IACjBA,EAAmB,+BAAiC,qCAAqC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAWvE,CAAC,CAAE,iBAAAA,CAAA,IACrBA,EACI,2BACA,kDAAkD;AAAA;AAAA;AAAA,0BAGpC,CAAC,CAAE,iBAAAA,CAAA,IACrBA,GAAsC,mCAAmC;AAAA;AAAA;AAAA;AAAA,kBAI/D,CAAC,CAAE,iBAAAA,CAAA,IAAwBA,EAAmB,kBAAoB,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUrFM,EAAsBD,EAAO;AAAA;AAAA;AAAA;AAAA,EAM7BE,EAAUF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQjBG,EAAiBH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAK1B,CAAC,CAAE,iBAAAL,EAAkB,mBAAAC,KACrBA,GACAE,EAAA;AAAA,oBACgBF,CAAkB;AAAA,KACjC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgBCQ,EAAsBJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAO/B,CAAC,CAAE,iBAAAL,EAAkB,mBAAAC,KACrBA,GACAE,EAAA;AAAA,qBACiBF,CAAkB;AAAA,2BACZA,CAAkB;AAAA,wBACrBD,CAAgB;AAAA,KACnC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAgBW,CAAC,CAAE,iBAAAA,CAAA,IAAwBA,EAAmB,kBAAoB,MAAO;AAAA;AAAA;AAAA,EAInFU,EAAmBL,EAAO;AAAA;AAAA;AAAA;AAAA"}

package/dist/shared/src/containers/Feed/components/ReactionContainer/Reactions.styled.es.js

@@ -1,5 +1,24 @@
-import o from "styled-components";
-const e = o.div`
+import e, { css as a } from "styled-components";
+const c = (r, o, i) => r && a`
+    --reaction-border-color: ${r};
+    --reaction-active-bg: ${o};
+    --reaction-hover-bg: ${o};
+    --reaction-active-border: ${r};
+  `, n = e.div`
+  /* VARS */
+  --reaction-border-color: var(--md-sys-color-outline-variant);
+  --reaction-hover-bg: var(--md-sys-color-surface-container-high-hover);
+  --reaction-hover-border: var(--md-sys-color-outline);
+  --reaction-active-bg: var(--md-sys-color-primary-container);
+  --reaction-active-border: var(--md-sys-color-primary);
+  --reaction-active-hover-bg: var(--md-sys-color-primary-container-hover);
+  --reaction-active-hover-border: var(--md-sys-color-primary-hover);
+  --reaction-compact-active-bg: var(--md-sys-color-primary-container);
+  --reaction-compact-active-hover-bg: var(--md-sys-color-primary-container-hover);
+
+  /* CATEGORY */
+  ${({ $categoryPrimary: r, $categorySecondary: o, $categoryTertiary: i }) => c(r, o)}
+
   display: flex;
   justify-content: center;
   align-items: center;
@@ -10,18 +29,19 @@ const e = o.div`
   cursor: pointer;
   user-select: none;
 
-  border: solid 1px var(--md-sys-color-outline-variant);
+  border: solid 1px var(--reaction-border-color);
   border-radius: 12px;
   &:hover {
-    background-color: var(--md-sys-color-surface-container-high-hover);
-    border-color: var(--md-sys-color-outline);
+    background-color: var(--reaction-hover-bg);
+    border-color: ${({ $categoryPrimary: r }) => r ? "var(--reaction-border-color)" : "var(--reaction-hover-border)"};
+    filter: ${({ $categoryPrimary: r }) => r ? "brightness(1.2)" : "none"};
   }
   &.active {
-    background-color: var(--md-sys-color-primary-container);
-    border-color: var(--md-sys-color-primary);
+    background-color: var(--reaction-active-bg);
+    border-color: var(--reaction-active-border);
     &:hover {
-      background-color: var(--md-sys-color-primary-container-hover);
-      border-color: var(--md-sys-color-primary-hover);
+      background-color: var(--reaction-hover-bg);
+      border-color: ${({ $categoryPrimary: r }) => r ? "var(--reaction-border-color)" : "var(--reaction-active-hover-border)"};
     }
   }
 
@@ -31,11 +51,15 @@ const e = o.div`
     padding: 8px;
     border-color: transparent;
     border-radius: var(--border-radius-m);
+    &:hover {
+      background-color: ${({ $categoryPrimary: r }) => r ? "var(--reaction-hover-bg)" : "var(--md-sys-color-surface-container-high-hover)"};
+    }
     &.active {
-      background-color: var(--md-sys-color-secondary-container);
+      background-color: ${({ $categoryPrimary: r }) => r || "var(--reaction-compact-active-bg)"};
       &:hover {
         border-color: transparent;
-        background-color: var(--md-sys-color-secondary-container-hover);
+        background-color: var(--reaction-hover-bg);
+        filter: ${({ $categoryPrimary: r }) => r ? "brightness(1.2)" : "none"};
       }
     }
   }
@@ -44,18 +68,26 @@ const e = o.div`
     position: relative;
     height: 19px;
   }
-`, a = o.div`
+`, s = e.div`
   outline: 'solid 1px red';
   display: flex;
   gap: 8px;
-`, i = o.div`
+`, v = e.div`
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: 55;
-`, c = o.div`
+`, d = e.div`
+  /* VARS */
+  --panel-bg: var(--md-sys-color-surface-container-high);
+
+  /* CATEGORY */
+  ${({ $categoryPrimary: r, $categorySecondary: o }) => o && a`
+      --panel-bg: ${o};
+    `}
+
   display: flex;
   gap: 4px;
 
@@ -64,15 +96,27 @@ const e = o.div`
   left: 0;
   z-index: 60;
 
-  background-color: var(--md-sys-color-surface-container-high);
+  background-color: var(--panel-bg);
   padding: 4px;
   border-radius: 4px;
   box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.15);
-`, n = o.div`
+`, p = e.div`
+  /* VARS */
+  --opener-bg: var(--md-sys-color-surface-container-high);
+  --opener-hover-bg: var(--md-sys-color-surface-container-high-hover);
+  --opener-color: var(--md-sys-color-outline);
+
+  /* CATEGORY */
+  ${({ $categoryPrimary: r, $categorySecondary: o }) => o && a`
+      --opener-bg: ${o};
+      --opener-hover-bg: ${o};
+      --opener-color: ${r};
+    `}
+
   user-select: none;
   .add-reaction {
-    background-color: var(--md-sys-color-surface-container-high);
-    color: var(--md-sys-color-outline);
+    background-color: var(--opener-bg);
+    color: var(--opener-color);
     border-radius: 12px;
     font-size: 16px;
     width: 24px;
@@ -82,20 +126,21 @@ const e = o.div`
     align-items: center;
     cursor: pointer;
     &:hover {
-      background-color: var(--md-sys-color-surface-container-high-hover);
+      background-color: var(--opener-hover-bg);
+      filter: ${({ $categoryPrimary: r }) => r ? "brightness(1.2)" : "none"};
     }
   }
-`, s = o.div`
+`, l = e.div`
   display: flex;
   gap: 8px;
   position: relative;
 `;
 export {
-  a as ActiveReactionsList,
-  i as Overlay,
-  e as Reaction,
-  n as ReactionPanelOpener,
-  c as ReactionsPanel,
-  s as ReactionsWrapper
+  s as ActiveReactionsList,
+  v as Overlay,
+  n as Reaction,
+  p as ReactionPanelOpener,
+  d as ReactionsPanel,
+  l as ReactionsWrapper
 };
 //# sourceMappingURL=Reactions.styled.es.js.map

package/dist/shared/src/containers/Feed/components/ReactionContainer/Reactions.styled.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Reactions.styled.es.js","sources":["../../../../../../../src/containers/Feed/components/ReactionContainer/Reactions.styled.ts"],"sourcesContent":["import styled from 'styled-components'\n\nconst Reaction = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 4px;\n\n  height: 24px;\n  padding: 0px 8px;\n  cursor: pointer;\n  user-select: none;\n\n  border: solid 1px var(--md-sys-color-outline-variant);\n  border-radius: 12px;\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n    border-color: var(--md-sys-color-outline);\n  }\n  &.active {\n    background-color: var(--md-sys-color-primary-container);\n    border-color: var(--md-sys-color-primary);\n    &:hover {\n      background-color: var(--md-sys-color-primary-container-hover);\n      border-color: var(--md-sys-color-primary-hover);\n    }\n  }\n\n  &.compact {\n    width: 32px;\n    height: 32px;\n    padding: 8px;\n    border-color: transparent;\n    border-radius: var(--border-radius-m);\n    &.active {\n      background-color: var(--md-sys-color-secondary-container);\n      &:hover {\n        border-color: transparent;\n        background-color: var(--md-sys-color-secondary-container-hover);\n      }\n    }\n  }\n\n  .emoji {\n    position: relative;\n    height: 19px;\n  }\n`\nconst ActiveReactionsList = styled.div`\n  outline: 'solid 1px red';\n  display: flex;\n  gap: 8px;\n`\n\nconst Overlay = styled.div`\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 55;\n`\nconst ReactionsPanel = styled.div`\n  display: flex;\n  gap: 4px;\n\n  position: absolute;\n  top: -48px;\n  left: 0;\n  z-index: 60;\n\n  background-color: var(--md-sys-color-surface-container-high);\n  padding: 4px;\n  border-radius: 4px;\n  box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.15);\n`\n\nconst ReactionPanelOpener = styled.div`\n  user-select: none;\n  .add-reaction {\n    background-color: var(--md-sys-color-surface-container-high);\n    color: var(--md-sys-color-outline);\n    border-radius: 12px;\n    font-size: 16px;\n    width: 24px;\n    height: 24px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    &:hover {\n      background-color: var(--md-sys-color-surface-container-high-hover);\n    }\n  }\n`\nconst ReactionsWrapper = styled.div`\n  display: flex;\n  gap: 8px;\n  position: relative;\n`\n\nexport {\n  Reaction,\n  ActiveReactionsList,\n  ReactionsPanel,\n  ReactionPanelOpener,\n  ReactionsWrapper,\n  Overlay,\n}\n"],"names":["Reaction","styled","ActiveReactionsList","Overlay","ReactionsPanel","ReactionPanelOpener","ReactionsWrapper"],"mappings":";AAEA,MAAMA,IAAWC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA8ClBC,IAAsBD,EAAO;AAAA;AAAA;AAAA;AAAA,GAM7BE,IAAUF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQjBG,IAAiBH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAexBI,IAAsBJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAkB7BK,IAAmBL,EAAO;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"Reactions.styled.es.js","sources":["../../../../../../../src/containers/Feed/components/ReactionContainer/Reactions.styled.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\n\ntype CategoryProps = {\n  $categoryPrimary?: string\n  $categorySecondary?: string\n  $categoryTertiary?: string\n}\n\nconst categoryColorCss = (\n  $categoryPrimary?: string,\n  $categorySecondary?: string,\n  $categoryTertiary?: string,\n) =>\n  $categoryPrimary &&\n  css`\n    --reaction-border-color: ${$categoryPrimary};\n    --reaction-active-bg: ${$categorySecondary};\n    --reaction-hover-bg: ${$categorySecondary};\n    --reaction-active-border: ${$categoryPrimary};\n  `\n\nconst Reaction = styled.div<CategoryProps>`\n  /* VARS */\n  --reaction-border-color: var(--md-sys-color-outline-variant);\n  --reaction-hover-bg: var(--md-sys-color-surface-container-high-hover);\n  --reaction-hover-border: var(--md-sys-color-outline);\n  --reaction-active-bg: var(--md-sys-color-primary-container);\n  --reaction-active-border: var(--md-sys-color-primary);\n  --reaction-active-hover-bg: var(--md-sys-color-primary-container-hover);\n  --reaction-active-hover-border: var(--md-sys-color-primary-hover);\n  --reaction-compact-active-bg: var(--md-sys-color-primary-container);\n  --reaction-compact-active-hover-bg: var(--md-sys-color-primary-container-hover);\n\n  /* CATEGORY */\n  ${({ $categoryPrimary, $categorySecondary, $categoryTertiary }) =>\n    categoryColorCss($categoryPrimary, $categorySecondary, $categoryTertiary)}\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 4px;\n\n  height: 24px;\n  padding: 0px 8px;\n  cursor: pointer;\n  user-select: none;\n\n  border: solid 1px var(--reaction-border-color);\n  border-radius: 12px;\n  &:hover {\n    background-color: var(--reaction-hover-bg);\n    border-color: ${({ $categoryPrimary }) =>\n      $categoryPrimary ? 'var(--reaction-border-color)' : 'var(--reaction-hover-border)'};\n    filter: ${({ $categoryPrimary }) => ($categoryPrimary ? 'brightness(1.2)' : 'none')};\n  }\n  &.active {\n    background-color: var(--reaction-active-bg);\n    border-color: var(--reaction-active-border);\n    &:hover {\n      background-color: var(--reaction-hover-bg);\n      border-color: ${({ $categoryPrimary }) =>\n        $categoryPrimary ? 'var(--reaction-border-color)' : 'var(--reaction-active-hover-border)'};\n    }\n  }\n\n  &.compact {\n    width: 32px;\n    height: 32px;\n    padding: 8px;\n    border-color: transparent;\n    border-radius: var(--border-radius-m);\n    &:hover {\n      background-color: ${({ $categoryPrimary }) =>\n        $categoryPrimary\n          ? 'var(--reaction-hover-bg)'\n          : 'var(--md-sys-color-surface-container-high-hover)'};\n    }\n    &.active {\n      background-color: ${({ $categoryPrimary }) =>\n        $categoryPrimary ? $categoryPrimary : 'var(--reaction-compact-active-bg)'};\n      &:hover {\n        border-color: transparent;\n        background-color: var(--reaction-hover-bg);\n        filter: ${({ $categoryPrimary }) => ($categoryPrimary ? 'brightness(1.2)' : 'none')};\n      }\n    }\n  }\n\n  .emoji {\n    position: relative;\n    height: 19px;\n  }\n`\nconst ActiveReactionsList = styled.div`\n  outline: 'solid 1px red';\n  display: flex;\n  gap: 8px;\n`\n\nconst Overlay = styled.div`\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 55;\n`\nconst ReactionsPanel = styled.div<CategoryProps>`\n  /* VARS */\n  --panel-bg: var(--md-sys-color-surface-container-high);\n\n  /* CATEGORY */\n  ${({ $categoryPrimary, $categorySecondary }) =>\n    $categorySecondary &&\n    css`\n      --panel-bg: ${$categorySecondary};\n    `}\n\n  display: flex;\n  gap: 4px;\n\n  position: absolute;\n  top: -48px;\n  left: 0;\n  z-index: 60;\n\n  background-color: var(--panel-bg);\n  padding: 4px;\n  border-radius: 4px;\n  box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.15);\n`\n\nconst ReactionPanelOpener = styled.div<CategoryProps>`\n  /* VARS */\n  --opener-bg: var(--md-sys-color-surface-container-high);\n  --opener-hover-bg: var(--md-sys-color-surface-container-high-hover);\n  --opener-color: var(--md-sys-color-outline);\n\n  /* CATEGORY */\n  ${({ $categoryPrimary, $categorySecondary }) =>\n    $categorySecondary &&\n    css`\n      --opener-bg: ${$categorySecondary};\n      --opener-hover-bg: ${$categorySecondary};\n      --opener-color: ${$categoryPrimary};\n    `}\n\n  user-select: none;\n  .add-reaction {\n    background-color: var(--opener-bg);\n    color: var(--opener-color);\n    border-radius: 12px;\n    font-size: 16px;\n    width: 24px;\n    height: 24px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    cursor: pointer;\n    &:hover {\n      background-color: var(--opener-hover-bg);\n      filter: ${({ $categoryPrimary }) => ($categoryPrimary ? 'brightness(1.2)' : 'none')};\n    }\n  }\n`\nconst ReactionsWrapper = styled.div<CategoryProps>`\n  display: flex;\n  gap: 8px;\n  position: relative;\n`\n\nexport {\n  Reaction,\n  ActiveReactionsList,\n  ReactionsPanel,\n  ReactionPanelOpener,\n  ReactionsWrapper,\n  Overlay,\n}\n"],"names":["categoryColorCss","$categoryPrimary","$categorySecondary","$categoryTertiary","css","Reaction","styled","ActiveReactionsList","Overlay","ReactionsPanel","ReactionPanelOpener","ReactionsWrapper"],"mappings":";AAQA,MAAMA,IAAmB,CACvBC,GACAC,GACAC,MAEAF,KACAG;AAAA,+BAC6BH,CAAgB;AAAA,4BACnBC,CAAkB;AAAA,2BACnBA,CAAkB;AAAA,gCACbD,CAAgB;AAAA,KAG1CI,IAAWC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAapB,CAAC,EAAE,kBAAAL,GAAkB,oBAAAC,GAAoB,mBAAAC,EAAA,MACzCH,EAAiBC,GAAkBC,CAAqC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAgBzD,CAAC,EAAE,kBAAAD,EAAA,MACjBA,IAAmB,iCAAiC,8BAA8B;AAAA,cAC1E,CAAC,EAAE,kBAAAA,EAAA,MAAwBA,IAAmB,oBAAoB,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAOjE,CAAC,EAAE,kBAAAA,EAAA,MACjBA,IAAmB,iCAAiC,qCAAqC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAWvE,CAAC,EAAE,kBAAAA,EAAA,MACrBA,IACI,6BACA,kDAAkD;AAAA;AAAA;AAAA,0BAGpC,CAAC,EAAE,kBAAAA,EAAA,MACrBA,KAAsC,mCAAmC;AAAA;AAAA;AAAA;AAAA,kBAI/D,CAAC,EAAE,kBAAAA,EAAA,MAAwBA,IAAmB,oBAAoB,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUrFM,IAAsBD,EAAO;AAAA;AAAA;AAAA;AAAA,GAM7BE,IAAUF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQjBG,IAAiBH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAK1B,CAAC,EAAE,kBAAAL,GAAkB,oBAAAC,QACrBA,KACAE;AAAA,oBACgBF,CAAkB;AAAA,KACjC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAgBCQ,IAAsBJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAO/B,CAAC,EAAE,kBAAAL,GAAkB,oBAAAC,QACrBA,KACAE;AAAA,qBACiBF,CAAkB;AAAA,2BACZA,CAAkB;AAAA,wBACrBD,CAAgB;AAAA,KACnC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAgBW,CAAC,EAAE,kBAAAA,EAAA,MAAwBA,IAAmB,oBAAoB,MAAO;AAAA;AAAA;AAAA,GAInFU,IAAmBL,EAAO;AAAA;AAAA;AAAA;AAAA;"}

package/dist/shared/src/containers/Feed/components/Tooltips/EntityTooltip/EntityTooltip.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const C=require("../../../../../../../_virtual/jsx-runtime.cjs.js"),F=require("./EntityTooltip.styled.cjs.js"),I=require("../../../../../util/productTypes.cjs.js");require("lodash");require("react-toastify");require("uuid");require("../../../../../util/pubsub.cjs.js");require("react-dom");require("react");const P=require("../../../context/FeedContext.cjs.js");require("@ynput/ayon-react-components");require("clsx");require("../UserTooltip/UserTooltip.styled.cjs.js");require("../../FileUploadPreview/FileUploadPreview.styled.cjs.js");require("../../FileUploadPreview/Mimes/TextMime.cjs.js");require("react-markdown");require("remark-emoji");require("remark-gfm");require("remark-directive");require("remark-directive-rehype");require("../../CommentInput/CommentInput.cjs.js");require("../../ReactionContainer/Reactions.styled.cjs.js");require("../../FilesGrid/FilesGrid.styled.cjs.js");require("../../FileUploadCard/FileUploadCard.styled.cjs.js");require("../../../../../context/RemoteModulesContext.cjs.js");require("../../../../../context/DetailsPanelContext.cjs.js");require("../../../../../context/ThumbnailUploaderContext.cjs.js");require("../../../../../context/SettingsPanelContext.cjs.js");require("../../../../../context/pip/PiPProvider.cjs.js");require("../../../../../context/pip/PiPWrapper.cjs.js");require("../../../../../context/AddonProjectContext.cjs.js");require("../../../../../context/AddonContext.cjs.js");require("../../../../../context/PowerpackContext.cjs.js");require("../../../../../context/MoveEntityContext.cjs.js");require("../../../../../context/MenuContext.cjs.js");require("../../CommentInput/quillToMarkdown.cjs.js");require("../../ActivityComment/ActivityComment.styled.cjs.js");require("../../ActivityCheckbox/ActivityCheckbox.styled.cjs.js");require("../../ActivityReference/ActivityReference.styled.cjs.js");require("react-router-dom");require("../../ActivityStatus/ActivityStatus.cjs.js");require("../../ActivityHeader/ActivityHeader.styled.cjs.js");require("../../ActivityDate.cjs.js");require("../../ActivityStatusChange/ActivityStatusChange.styled.cjs.js");require("../../ActivityAssigneeChange/ActivityAssigneeChange.styled.cjs.js");require("../../ActivityVersions/ActivityVersions.styled.cjs.js");require("../../ActivityGroup/ActivityGroup.styled.cjs.js");require("../../../Feed.styled.cjs.js");require("date-fns");require("../../../../../components/EmptyPlaceholder/EmptyPlaceholder.cjs.js");require("../../../../../components/EmptyPlaceholder/EmptyPlaceholderFlex.styled.cjs.js");const W=({entityId:e,entityType:i,thumbnailId:r,updatedAt:u,projectName:t})=>{if(!t||!r&&(!e||!i))return null;const s=u?`?updatedAt=${u}`:"";return e&&i?`${`/api/projects/${t}/${i}s/${e}/thumbnail`}${s}`:`${`/api/projects/${t}/thumbnails/${r}`}${s}`},v=({type:e,id:i,pos:{left:r=0,top:u=0}={}})=>{var l;const{entityTooltipData:t,isFetchingTooltip:s,projectInfo:c,projectName:a}=P.useFeedContext(),n=220;r+n/2>window.innerWidth&&(r=window.innerWidth-n/2);const{title:d,subTitle:h,path:p,taskType:m,productType:$,users:y=[],thumbnailId:T,updatedAt:b,status:x}=t||{},{taskTypes:U=[],statuses:j=[]}=c,w=(l=U.find(q=>q.name===m))==null?void 0:l.icon,f=j.find(q=>q.name===x),g=W({entityId:i,entityType:e,thumbnailId:T,updatedAt:b,projectName:a}),o=I[$],k=(o==null?void 0:o.icon)||"layers",E={task:w,version:k};return e?C.jsxRuntimeExports.jsx(F.TooltipEntityCard,{style:{left:r,top:u,maxWidth:n},title:d,header:h,path:p,showPath:!0,status:f,users:y,hidePriority:!0,isLoading:s,loadingSections:["header","title","users","status"],titleIcon:E[e||""],imageUrl:g||void 0}):null};module.exports=v;
+"use strict";const C=require("../../../../../../../_virtual/jsx-runtime.cjs.js"),F=require("./EntityTooltip.styled.cjs.js"),I=require("../../../../../util/productTypes.cjs.js");require("lodash");require("react-toastify");require("uuid");require("../../../../../util/pubsub.cjs.js");require("react-dom");require("react");const P=require("../../../context/FeedContext.cjs.js");require("@ynput/ayon-react-components");require("clsx");require("../UserTooltip/UserTooltip.styled.cjs.js");require("../../FileUploadPreview/FileUploadPreview.styled.cjs.js");require("../../FileUploadPreview/Mimes/TextMime.cjs.js");require("react-markdown");require("remark-emoji");require("remark-gfm");require("remark-directive");require("remark-directive-rehype");require("../../CommentInput/CommentInput.cjs.js");require("../../ReactionContainer/Reactions.styled.cjs.js");require("../../FilesGrid/FilesGrid.styled.cjs.js");require("../../FileUploadCard/FileUploadCard.styled.cjs.js");require("../../../../../context/RemoteModulesContext.cjs.js");require("../../../../../context/DetailsPanelContext.cjs.js");require("../../../../../context/ThumbnailUploaderContext.cjs.js");require("../../../../../context/SettingsPanelContext.cjs.js");require("../../../../../context/pip/PiPProvider.cjs.js");require("../../../../../context/pip/PiPWrapper.cjs.js");require("../../../../../context/AddonProjectContext.cjs.js");require("../../../../../context/AddonContext.cjs.js");require("../../../../../context/PowerpackContext.cjs.js");require("../../../../../context/MoveEntityContext.cjs.js");require("../../../../../context/MenuContext.cjs.js");require("../../CommentInput/quillToMarkdown.cjs.js");require("../../ActivityComment/ActivityComment.styled.cjs.js");require("../../ActivityCheckbox/ActivityCheckbox.styled.cjs.js");require("../../ActivityReference/ActivityReference.styled.cjs.js");require("react-router-dom");require("../../ActivityStatus/ActivityStatus.cjs.js");require("../../ActivityHeader/ActivityHeader.styled.cjs.js");require("../../ActivityDate.cjs.js");require("../../ActivityCategorySelect/CategoryTag.cjs.js");require("../../ActivityStatusChange/ActivityStatusChange.styled.cjs.js");require("../../ActivityAssigneeChange/ActivityAssigneeChange.styled.cjs.js");require("../../ActivityVersions/ActivityVersions.styled.cjs.js");require("../../ActivityGroup/ActivityGroup.styled.cjs.js");require("../../../Feed.styled.cjs.js");require("date-fns");require("../../../../../components/EmptyPlaceholder/EmptyPlaceholder.cjs.js");require("../../../../../components/EmptyPlaceholder/EmptyPlaceholderFlex.styled.cjs.js");require("../../ActivityCategorySelect/ActivityCategorySelect.cjs.js");const W=({entityId:e,entityType:i,thumbnailId:r,updatedAt:u,projectName:t})=>{if(!t||!r&&(!e||!i))return null;const s=u?`?updatedAt=${u}`:"";return e&&i?`${`/api/projects/${t}/${i}s/${e}/thumbnail`}${s}`:`${`/api/projects/${t}/thumbnails/${r}`}${s}`},v=({type:e,id:i,pos:{left:r=0,top:u=0}={}})=>{var l;const{entityTooltipData:t,isFetchingTooltip:s,projectInfo:c,projectName:a}=P.useFeedContext(),n=220;r+n/2>window.innerWidth&&(r=window.innerWidth-n/2);const{title:d,subTitle:h,path:p,taskType:m,productType:$,users:y=[],thumbnailId:T,updatedAt:b,status:x}=t||{},{taskTypes:U=[],statuses:j=[]}=c,w=(l=U.find(q=>q.name===m))==null?void 0:l.icon,f=j.find(q=>q.name===x),g=W({entityId:i,entityType:e,thumbnailId:T,updatedAt:b,projectName:a}),o=I[$],k=(o==null?void 0:o.icon)||"layers",E={task:w,version:k};return e?C.jsxRuntimeExports.jsx(F.TooltipEntityCard,{style:{left:r,top:u,maxWidth:n},title:d,header:h,path:p,showPath:!0,status:f,users:y,hidePriority:!0,isLoading:s,loadingSections:["header","title","users","status"],titleIcon:E[e||""],imageUrl:g||void 0}):null};module.exports=v;
 //# sourceMappingURL=EntityTooltip.cjs.js.map

package/dist/shared/src/containers/Feed/components/Tooltips/EntityTooltip/EntityTooltip.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"EntityTooltip.cjs.js","sources":["../../../../../../../../src/containers/Feed/components/Tooltips/EntityTooltip/EntityTooltip.tsx"],"sourcesContent":["import * as Styled from './EntityTooltip.styled'\nimport { productTypes } from '@shared/util'\nimport { useFeedContext } from '@shared/containers/Feed'\nimport { Status } from '@shared/containers/ProjectTreeTable/types/project'\n\ninterface ThumbnailUrlParams {\n  entityId?: string\n  entityType?: string\n  thumbnailId?: string\n  updatedAt?: string\n  projectName?: string\n}\n\nconst getThumbnailUrl = ({\n  entityId,\n  entityType,\n  thumbnailId,\n  updatedAt,\n  projectName,\n}: ThumbnailUrlParams) => {\n  // If projectName is not provided or neither thumbnailId nor entityId and entityType are provided, return null\n  if (!projectName || (!thumbnailId && (!entityId || !entityType))) return null\n\n  // Construct the updatedAt query parameter if updatedAt is provided\n  const updatedAtQueryParam = updatedAt ? `?updatedAt=${updatedAt}` : ''\n\n  // If entityId and entityType are provided, construct the URL using them\n  if (entityId && entityType) {\n    const entityUrl = `/api/projects/${projectName}/${entityType}s/${entityId}/thumbnail`\n    return `${entityUrl}${updatedAtQueryParam}`\n  }\n\n  // If entityId and entityType are not provided, fallback on thumbnailId\n  const thumbnailUrl = `/api/projects/${projectName}/thumbnails/${thumbnailId}`\n  return `${thumbnailUrl}${updatedAtQueryParam}`\n}\n\ninterface EntityTooltipProps {\n  type?: string\n  id?: string\n  pos?: {\n    left?: number\n    top?: number\n  }\n  projectName?: string\n  projectInfo?: any\n}\n\nconst EntityTooltip: React.FC<EntityTooltipProps> = ({\n  type,\n  id,\n  pos: { left = 0, top = 0 } = {},\n}) => {\n  const { entityTooltipData, isFetchingTooltip, projectInfo, projectName } = useFeedContext()\n\n  const width = 220\n\n  // check x is not offScreen\n  if (left + width / 2 > window.innerWidth) left = window.innerWidth - width / 2\n\n  const {\n    title,\n    subTitle,\n    path,\n    taskType,\n    productType,\n    users = [],\n    thumbnailId,\n    updatedAt,\n    status,\n  } = entityTooltipData || {}\n\n  const { taskTypes = [], statuses = [] } = projectInfo\n\n  const taskIcon = taskTypes.find((type: any) => type.name === taskType)?.icon\n  const statusObject = statuses.find((s: Status) => s.name === status)\n  const thumbnailUrl = getThumbnailUrl({\n    entityId: id,\n    entityType: type,\n    thumbnailId,\n    updatedAt,\n    projectName,\n  })\n  const productTypeData = productTypes[productType as keyof typeof productTypes]\n  const productIcon = productTypeData?.icon || 'layers'\n\n  const icons: Record<string, string | undefined> = {\n    task: taskIcon,\n    version: productIcon,\n  }\n\n  if (!type) return null\n\n  return (\n    <Styled.TooltipEntityCard\n      style={{ left, top, maxWidth: width }}\n      title={title}\n      header={subTitle}\n      path={path}\n      showPath\n      status={statusObject}\n      users={users}\n      hidePriority\n      isLoading={isFetchingTooltip}\n      loadingSections={['header', 'title', 'users', 'status']}\n      titleIcon={icons[type || '']}\n      imageUrl={thumbnailUrl || undefined}\n    />\n  )\n}\n\nexport default EntityTooltip\n"],"names":["getThumbnailUrl","entityId","entityType","thumbnailId","updatedAt","projectName","updatedAtQueryParam","EntityTooltip","type","id","left","top","entityTooltipData","isFetchingTooltip","projectInfo","useFeedContext","width","title","subTitle","path","taskType","productType","users","status","taskTypes","statuses","taskIcon","_a","statusObject","s","thumbnailUrl","productTypeData","productTypes","productIcon","icons","jsx","Styled.TooltipEntityCard"],"mappings":"4+EAaA,MAAMA,EAAkB,CAAC,CACvB,SAAAC,EACA,WAAAC,EACA,YAAAC,EACA,UAAAC,EACA,YAAAC,CACF,IAA0B,CAEpB,GAAA,CAACA,GAAgB,CAACF,IAAgB,CAACF,GAAY,CAACC,GAAqB,OAAA,KAGzE,MAAMI,EAAsBF,EAAY,cAAcA,CAAS,GAAK,GAGpE,OAAIH,GAAYC,EAEP,GADW,iBAAiBG,CAAW,IAAIH,CAAU,KAAKD,CAAQ,YACtD,GAAGK,CAAmB,GAKpC,GADc,iBAAiBD,CAAW,eAAeF,CAAW,EACrD,GAAGG,CAAmB,EAC9C,EAaMC,EAA8C,CAAC,CACnD,KAAAC,EACA,GAAAC,EACA,IAAK,CAAE,KAAAC,EAAO,EAAG,IAAAC,EAAM,CAAA,EAAM,CAAA,CAC/B,IAAM,OACJ,KAAM,CAAE,kBAAAC,EAAmB,kBAAAC,EAAmB,YAAAC,EAAa,YAAAT,CAAA,EAAgBU,EAAAA,eAAe,EAEpFC,EAAQ,IAGVN,EAAOM,EAAQ,EAAI,OAAO,aAAmBN,EAAA,OAAO,WAAaM,EAAQ,GAEvE,KAAA,CACJ,MAAAC,EACA,SAAAC,EACA,KAAAC,EACA,SAAAC,EACA,YAAAC,EACA,MAAAC,EAAQ,CAAC,EACT,YAAAnB,EACA,UAAAC,EACA,OAAAmB,CACF,EAAIX,GAAqB,CAAC,EAEpB,CAAE,UAAAY,EAAY,CAAA,EAAI,SAAAC,EAAW,CAAA,CAAO,EAAAX,EAEpCY,GAAWC,EAAAH,EAAU,KAAMhB,GAAcA,EAAK,OAASY,CAAQ,IAApD,YAAAO,EAAuD,KAClEC,EAAeH,EAAS,KAAMI,GAAcA,EAAE,OAASN,CAAM,EAC7DO,EAAe9B,EAAgB,CACnC,SAAUS,EACV,WAAYD,EACZ,YAAAL,EACA,UAAAC,EACA,YAAAC,CAAA,CACD,EACK0B,EAAkBC,EAAaX,CAAwC,EACvEY,GAAcF,GAAA,YAAAA,EAAiB,OAAQ,SAEvCG,EAA4C,CAChD,KAAMR,EACN,QAASO,CACX,EAEI,OAACzB,EAGH2B,EAAA,kBAAA,IAACC,EAAO,kBAAP,CACC,MAAO,CAAE,KAAA1B,EAAM,IAAAC,EAAK,SAAUK,CAAM,EACpC,MAAAC,EACA,OAAQC,EACR,KAAAC,EACA,SAAQ,GACR,OAAQS,EACR,MAAAN,EACA,aAAY,GACZ,UAAWT,EACX,gBAAiB,CAAC,SAAU,QAAS,QAAS,QAAQ,EACtD,UAAWqB,EAAM1B,GAAQ,EAAE,EAC3B,SAAUsB,GAAgB,MAAA,CAC5B,EAhBgB,IAkBpB"}
+{"version":3,"file":"EntityTooltip.cjs.js","sources":["../../../../../../../../src/containers/Feed/components/Tooltips/EntityTooltip/EntityTooltip.tsx"],"sourcesContent":["import * as Styled from './EntityTooltip.styled'\nimport { productTypes } from '@shared/util'\nimport { useFeedContext } from '@shared/containers/Feed'\nimport { Status } from '@shared/containers/ProjectTreeTable/types/project'\n\ninterface ThumbnailUrlParams {\n  entityId?: string\n  entityType?: string\n  thumbnailId?: string\n  updatedAt?: string\n  projectName?: string\n}\n\nconst getThumbnailUrl = ({\n  entityId,\n  entityType,\n  thumbnailId,\n  updatedAt,\n  projectName,\n}: ThumbnailUrlParams) => {\n  // If projectName is not provided or neither thumbnailId nor entityId and entityType are provided, return null\n  if (!projectName || (!thumbnailId && (!entityId || !entityType))) return null\n\n  // Construct the updatedAt query parameter if updatedAt is provided\n  const updatedAtQueryParam = updatedAt ? `?updatedAt=${updatedAt}` : ''\n\n  // If entityId and entityType are provided, construct the URL using them\n  if (entityId && entityType) {\n    const entityUrl = `/api/projects/${projectName}/${entityType}s/${entityId}/thumbnail`\n    return `${entityUrl}${updatedAtQueryParam}`\n  }\n\n  // If entityId and entityType are not provided, fallback on thumbnailId\n  const thumbnailUrl = `/api/projects/${projectName}/thumbnails/${thumbnailId}`\n  return `${thumbnailUrl}${updatedAtQueryParam}`\n}\n\ninterface EntityTooltipProps {\n  type?: string\n  id?: string\n  pos?: {\n    left?: number\n    top?: number\n  }\n  projectName?: string\n  projectInfo?: any\n}\n\nconst EntityTooltip: React.FC<EntityTooltipProps> = ({\n  type,\n  id,\n  pos: { left = 0, top = 0 } = {},\n}) => {\n  const { entityTooltipData, isFetchingTooltip, projectInfo, projectName } = useFeedContext()\n\n  const width = 220\n\n  // check x is not offScreen\n  if (left + width / 2 > window.innerWidth) left = window.innerWidth - width / 2\n\n  const {\n    title,\n    subTitle,\n    path,\n    taskType,\n    productType,\n    users = [],\n    thumbnailId,\n    updatedAt,\n    status,\n  } = entityTooltipData || {}\n\n  const { taskTypes = [], statuses = [] } = projectInfo\n\n  const taskIcon = taskTypes.find((type: any) => type.name === taskType)?.icon\n  const statusObject = statuses.find((s: Status) => s.name === status)\n  const thumbnailUrl = getThumbnailUrl({\n    entityId: id,\n    entityType: type,\n    thumbnailId,\n    updatedAt,\n    projectName,\n  })\n  const productTypeData = productTypes[productType as keyof typeof productTypes]\n  const productIcon = productTypeData?.icon || 'layers'\n\n  const icons: Record<string, string | undefined> = {\n    task: taskIcon,\n    version: productIcon,\n  }\n\n  if (!type) return null\n\n  return (\n    <Styled.TooltipEntityCard\n      style={{ left, top, maxWidth: width }}\n      title={title}\n      header={subTitle}\n      path={path}\n      showPath\n      status={statusObject}\n      users={users}\n      hidePriority\n      isLoading={isFetchingTooltip}\n      loadingSections={['header', 'title', 'users', 'status']}\n      titleIcon={icons[type || '']}\n      imageUrl={thumbnailUrl || undefined}\n    />\n  )\n}\n\nexport default EntityTooltip\n"],"names":["getThumbnailUrl","entityId","entityType","thumbnailId","updatedAt","projectName","updatedAtQueryParam","EntityTooltip","type","id","left","top","entityTooltipData","isFetchingTooltip","projectInfo","useFeedContext","width","title","subTitle","path","taskType","productType","users","status","taskTypes","statuses","taskIcon","_a","statusObject","s","thumbnailUrl","productTypeData","productTypes","productIcon","icons","jsx","Styled.TooltipEntityCard"],"mappings":"6mFAaA,MAAMA,EAAkB,CAAC,CACvB,SAAAC,EACA,WAAAC,EACA,YAAAC,EACA,UAAAC,EACA,YAAAC,CACF,IAA0B,CAEpB,GAAA,CAACA,GAAgB,CAACF,IAAgB,CAACF,GAAY,CAACC,GAAqB,OAAA,KAGzE,MAAMI,EAAsBF,EAAY,cAAcA,CAAS,GAAK,GAGpE,OAAIH,GAAYC,EAEP,GADW,iBAAiBG,CAAW,IAAIH,CAAU,KAAKD,CAAQ,YACtD,GAAGK,CAAmB,GAKpC,GADc,iBAAiBD,CAAW,eAAeF,CAAW,EACrD,GAAGG,CAAmB,EAC9C,EAaMC,EAA8C,CAAC,CACnD,KAAAC,EACA,GAAAC,EACA,IAAK,CAAE,KAAAC,EAAO,EAAG,IAAAC,EAAM,CAAA,EAAM,CAAA,CAC/B,IAAM,OACJ,KAAM,CAAE,kBAAAC,EAAmB,kBAAAC,EAAmB,YAAAC,EAAa,YAAAT,CAAA,EAAgBU,EAAAA,eAAe,EAEpFC,EAAQ,IAGVN,EAAOM,EAAQ,EAAI,OAAO,aAAmBN,EAAA,OAAO,WAAaM,EAAQ,GAEvE,KAAA,CACJ,MAAAC,EACA,SAAAC,EACA,KAAAC,EACA,SAAAC,EACA,YAAAC,EACA,MAAAC,EAAQ,CAAC,EACT,YAAAnB,EACA,UAAAC,EACA,OAAAmB,CACF,EAAIX,GAAqB,CAAC,EAEpB,CAAE,UAAAY,EAAY,CAAA,EAAI,SAAAC,EAAW,CAAA,CAAO,EAAAX,EAEpCY,GAAWC,EAAAH,EAAU,KAAMhB,GAAcA,EAAK,OAASY,CAAQ,IAApD,YAAAO,EAAuD,KAClEC,EAAeH,EAAS,KAAMI,GAAcA,EAAE,OAASN,CAAM,EAC7DO,EAAe9B,EAAgB,CACnC,SAAUS,EACV,WAAYD,EACZ,YAAAL,EACA,UAAAC,EACA,YAAAC,CAAA,CACD,EACK0B,EAAkBC,EAAaX,CAAwC,EACvEY,GAAcF,GAAA,YAAAA,EAAiB,OAAQ,SAEvCG,EAA4C,CAChD,KAAMR,EACN,QAASO,CACX,EAEI,OAACzB,EAGH2B,EAAA,kBAAA,IAACC,EAAO,kBAAP,CACC,MAAO,CAAE,KAAA1B,EAAM,IAAAC,EAAK,SAAUK,CAAM,EACpC,MAAAC,EACA,OAAQC,EACR,KAAAC,EACA,SAAQ,GACR,OAAQS,EACR,MAAAN,EACA,aAAY,GACZ,UAAWT,EACX,gBAAiB,CAAC,SAAU,QAAS,QAAS,QAAQ,EACtD,UAAWqB,EAAM1B,GAAQ,EAAE,EAC3B,SAAUsB,GAAgB,MAAA,CAC5B,EAhBgB,IAkBpB"}

package/dist/shared/src/containers/Feed/components/Tooltips/EntityTooltip/EntityTooltip.es.js

@@ -41,6 +41,7 @@ import "react-router-dom";
 import "../../ActivityStatus/ActivityStatus.es.js";
 import "../../ActivityHeader/ActivityHeader.styled.es.js";
 import "../../ActivityDate.es.js";
+import "../../ActivityCategorySelect/CategoryTag.es.js";
 import "../../ActivityStatusChange/ActivityStatusChange.styled.es.js";
 import "../../ActivityAssigneeChange/ActivityAssigneeChange.styled.es.js";
 import "../../ActivityVersions/ActivityVersions.styled.es.js";
@@ -49,6 +50,7 @@ import "../../../Feed.styled.es.js";
 import "date-fns";
 import "../../../../../components/EmptyPlaceholder/EmptyPlaceholder.es.js";
 import "../../../../../components/EmptyPlaceholder/EmptyPlaceholderFlex.styled.es.js";
+import "../../ActivityCategorySelect/ActivityCategorySelect.es.js";
 const C = ({
   entityId: t,
   entityType: i,
@@ -59,7 +61,7 @@ const C = ({
   if (!r || !o && (!t || !i)) return null;
   const m = p ? `?updatedAt=${p}` : "";
   return t && i ? `${`/api/projects/${r}/${i}s/${t}/thumbnail`}${m}` : `${`/api/projects/${r}/thumbnails/${o}`}${m}`;
-}, vt = ({
+}, Ct = ({
   type: t,
   id: i,
   pos: { left: o = 0, top: p = 0 } = {}
@@ -106,6 +108,6 @@ const C = ({
   ) : null;
 };
 export {
-  vt as default
+  Ct as default
 };
 //# sourceMappingURL=EntityTooltip.es.js.map

package/dist/shared/src/containers/Feed/components/Tooltips/EntityTooltip/EntityTooltip.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"EntityTooltip.es.js","sources":["../../../../../../../../src/containers/Feed/components/Tooltips/EntityTooltip/EntityTooltip.tsx"],"sourcesContent":["import * as Styled from './EntityTooltip.styled'\nimport { productTypes } from '@shared/util'\nimport { useFeedContext } from '@shared/containers/Feed'\nimport { Status } from '@shared/containers/ProjectTreeTable/types/project'\n\ninterface ThumbnailUrlParams {\n  entityId?: string\n  entityType?: string\n  thumbnailId?: string\n  updatedAt?: string\n  projectName?: string\n}\n\nconst getThumbnailUrl = ({\n  entityId,\n  entityType,\n  thumbnailId,\n  updatedAt,\n  projectName,\n}: ThumbnailUrlParams) => {\n  // If projectName is not provided or neither thumbnailId nor entityId and entityType are provided, return null\n  if (!projectName || (!thumbnailId && (!entityId || !entityType))) return null\n\n  // Construct the updatedAt query parameter if updatedAt is provided\n  const updatedAtQueryParam = updatedAt ? `?updatedAt=${updatedAt}` : ''\n\n  // If entityId and entityType are provided, construct the URL using them\n  if (entityId && entityType) {\n    const entityUrl = `/api/projects/${projectName}/${entityType}s/${entityId}/thumbnail`\n    return `${entityUrl}${updatedAtQueryParam}`\n  }\n\n  // If entityId and entityType are not provided, fallback on thumbnailId\n  const thumbnailUrl = `/api/projects/${projectName}/thumbnails/${thumbnailId}`\n  return `${thumbnailUrl}${updatedAtQueryParam}`\n}\n\ninterface EntityTooltipProps {\n  type?: string\n  id?: string\n  pos?: {\n    left?: number\n    top?: number\n  }\n  projectName?: string\n  projectInfo?: any\n}\n\nconst EntityTooltip: React.FC<EntityTooltipProps> = ({\n  type,\n  id,\n  pos: { left = 0, top = 0 } = {},\n}) => {\n  const { entityTooltipData, isFetchingTooltip, projectInfo, projectName } = useFeedContext()\n\n  const width = 220\n\n  // check x is not offScreen\n  if (left + width / 2 > window.innerWidth) left = window.innerWidth - width / 2\n\n  const {\n    title,\n    subTitle,\n    path,\n    taskType,\n    productType,\n    users = [],\n    thumbnailId,\n    updatedAt,\n    status,\n  } = entityTooltipData || {}\n\n  const { taskTypes = [], statuses = [] } = projectInfo\n\n  const taskIcon = taskTypes.find((type: any) => type.name === taskType)?.icon\n  const statusObject = statuses.find((s: Status) => s.name === status)\n  const thumbnailUrl = getThumbnailUrl({\n    entityId: id,\n    entityType: type,\n    thumbnailId,\n    updatedAt,\n    projectName,\n  })\n  const productTypeData = productTypes[productType as keyof typeof productTypes]\n  const productIcon = productTypeData?.icon || 'layers'\n\n  const icons: Record<string, string | undefined> = {\n    task: taskIcon,\n    version: productIcon,\n  }\n\n  if (!type) return null\n\n  return (\n    <Styled.TooltipEntityCard\n      style={{ left, top, maxWidth: width }}\n      title={title}\n      header={subTitle}\n      path={path}\n      showPath\n      status={statusObject}\n      users={users}\n      hidePriority\n      isLoading={isFetchingTooltip}\n      loadingSections={['header', 'title', 'users', 'status']}\n      titleIcon={icons[type || '']}\n      imageUrl={thumbnailUrl || undefined}\n    />\n  )\n}\n\nexport default EntityTooltip\n"],"names":["getThumbnailUrl","entityId","entityType","thumbnailId","updatedAt","projectName","updatedAtQueryParam","EntityTooltip","type","id","left","top","entityTooltipData","isFetchingTooltip","projectInfo","useFeedContext","width","title","subTitle","path","taskType","productType","users","status","taskTypes","statuses","taskIcon","_a","statusObject","s","thumbnailUrl","productTypeData","productTypes","productIcon","icons","jsx","Styled.TooltipEntityCard"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,MAAMA,IAAkB,CAAC;AAAA,EACvB,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AACF,MAA0B;AAEpB,MAAA,CAACA,KAAgB,CAACF,MAAgB,CAACF,KAAY,CAACC,GAAqB,QAAA;AAGzE,QAAMI,IAAsBF,IAAY,cAAcA,CAAS,KAAK;AAGpE,SAAIH,KAAYC,IAEP,GADW,iBAAiBG,CAAW,IAAIH,CAAU,KAAKD,CAAQ,YACtD,GAAGK,CAAmB,KAKpC,GADc,iBAAiBD,CAAW,eAAeF,CAAW,EACrD,GAAGG,CAAmB;AAC9C,GAaMC,KAA8C,CAAC;AAAA,EACnD,MAAAC;AAAA,EACA,IAAAC;AAAA,EACA,KAAK,EAAE,MAAAC,IAAO,GAAG,KAAAC,IAAM,EAAA,IAAM,CAAA;AAC/B,MAAM;;AACJ,QAAM,EAAE,mBAAAC,GAAmB,mBAAAC,GAAmB,aAAAC,GAAa,aAAAT,EAAA,IAAgBU,EAAe,GAEpFC,IAAQ;AAGV,EAAAN,IAAOM,IAAQ,IAAI,OAAO,eAAmBN,IAAA,OAAO,aAAaM,IAAQ;AAEvE,QAAA;AAAA,IACJ,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC,IAAQ,CAAC;AAAA,IACT,aAAAnB;AAAA,IACA,WAAAC;AAAA,IACA,QAAAmB;AAAA,EACF,IAAIX,KAAqB,CAAC,GAEpB,EAAE,WAAAY,IAAY,CAAA,GAAI,UAAAC,IAAW,CAAA,EAAO,IAAAX,GAEpCY,KAAWC,IAAAH,EAAU,KAAK,CAAChB,MAAcA,EAAK,SAASY,CAAQ,MAApD,gBAAAO,EAAuD,MAClEC,IAAeH,EAAS,KAAK,CAACI,MAAcA,EAAE,SAASN,CAAM,GAC7DO,IAAe9B,EAAgB;AAAA,IACnC,UAAUS;AAAA,IACV,YAAYD;AAAA,IACZ,aAAAL;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,EAAA,CACD,GACK0B,IAAkBC,EAAaX,CAAwC,GACvEY,KAAcF,KAAA,gBAAAA,EAAiB,SAAQ,UAEvCG,IAA4C;AAAA,IAChD,MAAMR;AAAA,IACN,SAASO;AAAA,EACX;AAEI,SAACzB,IAGH2B,gBAAAA,EAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,OAAO,EAAE,MAAA1B,GAAM,KAAAC,GAAK,UAAUK,EAAM;AAAA,MACpC,OAAAC;AAAA,MACA,QAAQC;AAAA,MACR,MAAAC;AAAA,MACA,UAAQ;AAAA,MACR,QAAQS;AAAA,MACR,OAAAN;AAAA,MACA,cAAY;AAAA,MACZ,WAAWT;AAAA,MACX,iBAAiB,CAAC,UAAU,SAAS,SAAS,QAAQ;AAAA,MACtD,WAAWqB,EAAM1B,KAAQ,EAAE;AAAA,MAC3B,UAAUsB,KAAgB;AAAA,IAAA;AAAA,EAC5B,IAhBgB;AAkBpB;"}
+{"version":3,"file":"EntityTooltip.es.js","sources":["../../../../../../../../src/containers/Feed/components/Tooltips/EntityTooltip/EntityTooltip.tsx"],"sourcesContent":["import * as Styled from './EntityTooltip.styled'\nimport { productTypes } from '@shared/util'\nimport { useFeedContext } from '@shared/containers/Feed'\nimport { Status } from '@shared/containers/ProjectTreeTable/types/project'\n\ninterface ThumbnailUrlParams {\n  entityId?: string\n  entityType?: string\n  thumbnailId?: string\n  updatedAt?: string\n  projectName?: string\n}\n\nconst getThumbnailUrl = ({\n  entityId,\n  entityType,\n  thumbnailId,\n  updatedAt,\n  projectName,\n}: ThumbnailUrlParams) => {\n  // If projectName is not provided or neither thumbnailId nor entityId and entityType are provided, return null\n  if (!projectName || (!thumbnailId && (!entityId || !entityType))) return null\n\n  // Construct the updatedAt query parameter if updatedAt is provided\n  const updatedAtQueryParam = updatedAt ? `?updatedAt=${updatedAt}` : ''\n\n  // If entityId and entityType are provided, construct the URL using them\n  if (entityId && entityType) {\n    const entityUrl = `/api/projects/${projectName}/${entityType}s/${entityId}/thumbnail`\n    return `${entityUrl}${updatedAtQueryParam}`\n  }\n\n  // If entityId and entityType are not provided, fallback on thumbnailId\n  const thumbnailUrl = `/api/projects/${projectName}/thumbnails/${thumbnailId}`\n  return `${thumbnailUrl}${updatedAtQueryParam}`\n}\n\ninterface EntityTooltipProps {\n  type?: string\n  id?: string\n  pos?: {\n    left?: number\n    top?: number\n  }\n  projectName?: string\n  projectInfo?: any\n}\n\nconst EntityTooltip: React.FC<EntityTooltipProps> = ({\n  type,\n  id,\n  pos: { left = 0, top = 0 } = {},\n}) => {\n  const { entityTooltipData, isFetchingTooltip, projectInfo, projectName } = useFeedContext()\n\n  const width = 220\n\n  // check x is not offScreen\n  if (left + width / 2 > window.innerWidth) left = window.innerWidth - width / 2\n\n  const {\n    title,\n    subTitle,\n    path,\n    taskType,\n    productType,\n    users = [],\n    thumbnailId,\n    updatedAt,\n    status,\n  } = entityTooltipData || {}\n\n  const { taskTypes = [], statuses = [] } = projectInfo\n\n  const taskIcon = taskTypes.find((type: any) => type.name === taskType)?.icon\n  const statusObject = statuses.find((s: Status) => s.name === status)\n  const thumbnailUrl = getThumbnailUrl({\n    entityId: id,\n    entityType: type,\n    thumbnailId,\n    updatedAt,\n    projectName,\n  })\n  const productTypeData = productTypes[productType as keyof typeof productTypes]\n  const productIcon = productTypeData?.icon || 'layers'\n\n  const icons: Record<string, string | undefined> = {\n    task: taskIcon,\n    version: productIcon,\n  }\n\n  if (!type) return null\n\n  return (\n    <Styled.TooltipEntityCard\n      style={{ left, top, maxWidth: width }}\n      title={title}\n      header={subTitle}\n      path={path}\n      showPath\n      status={statusObject}\n      users={users}\n      hidePriority\n      isLoading={isFetchingTooltip}\n      loadingSections={['header', 'title', 'users', 'status']}\n      titleIcon={icons[type || '']}\n      imageUrl={thumbnailUrl || undefined}\n    />\n  )\n}\n\nexport default EntityTooltip\n"],"names":["getThumbnailUrl","entityId","entityType","thumbnailId","updatedAt","projectName","updatedAtQueryParam","EntityTooltip","type","id","left","top","entityTooltipData","isFetchingTooltip","projectInfo","useFeedContext","width","title","subTitle","path","taskType","productType","users","status","taskTypes","statuses","taskIcon","_a","statusObject","s","thumbnailUrl","productTypeData","productTypes","productIcon","icons","jsx","Styled.TooltipEntityCard"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,MAAMA,IAAkB,CAAC;AAAA,EACvB,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AACF,MAA0B;AAEpB,MAAA,CAACA,KAAgB,CAACF,MAAgB,CAACF,KAAY,CAACC,GAAqB,QAAA;AAGzE,QAAMI,IAAsBF,IAAY,cAAcA,CAAS,KAAK;AAGpE,SAAIH,KAAYC,IAEP,GADW,iBAAiBG,CAAW,IAAIH,CAAU,KAAKD,CAAQ,YACtD,GAAGK,CAAmB,KAKpC,GADc,iBAAiBD,CAAW,eAAeF,CAAW,EACrD,GAAGG,CAAmB;AAC9C,GAaMC,KAA8C,CAAC;AAAA,EACnD,MAAAC;AAAA,EACA,IAAAC;AAAA,EACA,KAAK,EAAE,MAAAC,IAAO,GAAG,KAAAC,IAAM,EAAA,IAAM,CAAA;AAC/B,MAAM;;AACJ,QAAM,EAAE,mBAAAC,GAAmB,mBAAAC,GAAmB,aAAAC,GAAa,aAAAT,EAAA,IAAgBU,EAAe,GAEpFC,IAAQ;AAGV,EAAAN,IAAOM,IAAQ,IAAI,OAAO,eAAmBN,IAAA,OAAO,aAAaM,IAAQ;AAEvE,QAAA;AAAA,IACJ,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC,IAAQ,CAAC;AAAA,IACT,aAAAnB;AAAA,IACA,WAAAC;AAAA,IACA,QAAAmB;AAAA,EACF,IAAIX,KAAqB,CAAC,GAEpB,EAAE,WAAAY,IAAY,CAAA,GAAI,UAAAC,IAAW,CAAA,EAAO,IAAAX,GAEpCY,KAAWC,IAAAH,EAAU,KAAK,CAAChB,MAAcA,EAAK,SAASY,CAAQ,MAApD,gBAAAO,EAAuD,MAClEC,IAAeH,EAAS,KAAK,CAACI,MAAcA,EAAE,SAASN,CAAM,GAC7DO,IAAe9B,EAAgB;AAAA,IACnC,UAAUS;AAAA,IACV,YAAYD;AAAA,IACZ,aAAAL;AAAA,IACA,WAAAC;AAAA,IACA,aAAAC;AAAA,EAAA,CACD,GACK0B,IAAkBC,EAAaX,CAAwC,GACvEY,KAAcF,KAAA,gBAAAA,EAAiB,SAAQ,UAEvCG,IAA4C;AAAA,IAChD,MAAMR;AAAA,IACN,SAASO;AAAA,EACX;AAEI,SAACzB,IAGH2B,gBAAAA,EAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,OAAO,EAAE,MAAA1B,GAAM,KAAAC,GAAK,UAAUK,EAAM;AAAA,MACpC,OAAAC;AAAA,MACA,QAAQC;AAAA,MACR,MAAAC;AAAA,MACA,UAAQ;AAAA,MACR,QAAQS;AAAA,MACR,OAAAN;AAAA,MACA,cAAY;AAAA,MACZ,WAAWT;AAAA,MACX,iBAAiB,CAAC,UAAU,SAAS,SAAS,QAAQ;AAAA,MACtD,WAAWqB,EAAM1B,KAAQ,EAAE;AAAA,MAC3B,UAAUsB,KAAgB;AAAA,IAAA;AAAA,EAC5B,IAhBgB;AAkBpB;"}