@ynput/ayon-frontend-shared 0.2.32 → 0.2.34

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

@@ -1 +1 @@
-{"version":3,"file":"Reaction.es.js","sources":["../../../../../../../src/containers/Feed/components/ReactionContainer/Reaction.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as Styled from './Reactions.styled'\nimport { reactionMappingObj } from './helpers'\nimport { MouseEventHandler } from 'react'\nimport { Reaction as ReactionType, ReactionComponentVariant } from './types'\n\ntype Props = {\n  reaction: ReactionType\n  isActive?: boolean\n  variant?: ReactionComponentVariant\n  onClick: MouseEventHandler\n}\n\nconst Reaction = ({ reaction, variant = 'standard', onClick }: Props) => {\n  const users = reaction.users?.join(', ') || undefined\n\n  return (\n    <Styled.Reaction\n      className={clsx(variant, { active: reaction.isActive })}\n      onClick={onClick}\n      data-tooltip={users}\n    >\n      <span className=\"emoji\">\n        {reactionMappingObj[reaction.type]}\n      </span>\n        {reaction.users && <span>{reaction.users.length}</span>}\n    </Styled.Reaction>\n  )\n}\n\nexport default Reaction\n"],"names":["Reaction","reaction","variant","onClick","users","_a","jsxs","Styled.Reaction","clsx","jsx","reactionMappingObj"],"mappings":";;;;AAaA,MAAMA,IAAW,CAAC,EAAE,UAAAC,GAAU,SAAAC,IAAU,YAAY,SAAAC,QAAqB;;AACvE,QAAMC,MAAQC,IAAAJ,EAAS,UAAT,gBAAAI,EAAgB,KAAK,UAAS;AAG1C,SAAAC,gBAAAA,EAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAWC,EAAKN,GAAS,EAAE,QAAQD,EAAS,UAAU;AAAA,MACtD,SAAAE;AAAA,MACA,gBAAcC;AAAA,MAEd,UAAA;AAAA,QAAAK,gBAAAA,MAAC,UAAK,WAAU,SACb,UAAmBC,EAAAT,EAAS,IAAI,GACnC;AAAA,QACGA,EAAS,SAASQ,gBAAAA,EAAAA,IAAC,QAAM,EAAA,UAAAR,EAAS,MAAM,OAAO,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACpD;AAEJ;"}
+{"version":3,"file":"Reaction.es.js","sources":["../../../../../../../src/containers/Feed/components/ReactionContainer/Reaction.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as Styled from './Reactions.styled'\nimport { reactionMappingObj } from './helpers'\nimport { MouseEventHandler } from 'react'\nimport { Reaction as ReactionType, ReactionComponentVariant } from './types'\n\ntype Props = {\n  reaction: ReactionType\n  isActive?: boolean\n  variant?: ReactionComponentVariant\n  onClick: MouseEventHandler\n  categoryPrimary?: string\n  categorySecondary?: string\n  categoryTertiary?: string\n}\n\nconst Reaction = ({\n  reaction,\n  variant = 'standard',\n  onClick,\n  categoryPrimary,\n  categorySecondary,\n  categoryTertiary,\n}: Props) => {\n  const users = reaction.users?.join(', ') || undefined\n\n  return (\n    <Styled.Reaction\n      className={clsx(variant, { active: reaction.isActive })}\n      onClick={onClick}\n      data-tooltip={users}\n      $categoryPrimary={categoryPrimary}\n      $categorySecondary={categorySecondary}\n      $categoryTertiary={categoryTertiary}\n    >\n      <span className=\"emoji\">{reactionMappingObj[reaction.type]}</span>\n      {reaction.users && <span>{reaction.users.length}</span>}\n    </Styled.Reaction>\n  )\n}\n\nexport default Reaction\n"],"names":["Reaction","reaction","variant","onClick","categoryPrimary","categorySecondary","categoryTertiary","users","_a","jsxs","Styled.Reaction","clsx","jsx","reactionMappingObj"],"mappings":";;;;AAgBA,MAAMA,IAAW,CAAC;AAAA,EAChB,UAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,SAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,kBAAAC;AACF,MAAa;;AACX,QAAMC,MAAQC,IAAAP,EAAS,UAAT,gBAAAO,EAAgB,KAAK,UAAS;AAG1C,SAAAC,gBAAAA,EAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAWC,EAAKT,GAAS,EAAE,QAAQD,EAAS,UAAU;AAAA,MACtD,SAAAE;AAAA,MACA,gBAAcI;AAAA,MACd,kBAAkBH;AAAA,MAClB,oBAAoBC;AAAA,MACpB,mBAAmBC;AAAA,MAEnB,UAAA;AAAA,QAAAM,gBAAAA,MAAC,UAAK,WAAU,SAAS,UAAmBC,EAAAZ,EAAS,IAAI,GAAE;AAAA,QAC1DA,EAAS,SAASW,gBAAAA,EAAAA,IAAC,QAAM,EAAA,UAAAX,EAAS,MAAM,OAAO,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAClD;AAEJ;"}

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

@@ -1,2 +1,2 @@
-"use strict";const e=require("../../../../../../_virtual/jsx-runtime.cjs.js"),p=require("@ynput/ayon-react-components"),i=require("./Reactions.styled.cjs.js"),x=require("./helpers.cjs.js"),u=require("./Reaction.cjs.js"),l=require("react"),R=({reactions:o,changeHandler:r})=>{const[c,n]=l.useState(!1),a=o.filter(t=>t.isActive).map(t=>t.type);return e.jsxRuntimeExports.jsxs(i.ReactionPanelOpener,{children:[e.jsxRuntimeExports.jsx(p.Icon,{icon:"add_reaction",className:"add-reaction",onClick:()=>n(!c)}),c&&e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(i.Overlay,{onClick:()=>n(!1)}),e.jsxRuntimeExports.jsx(i.ReactionsPanel,{children:x.reactionMapping.map(t=>{const s={type:t.key,isActive:a.includes(t.key)};return e.jsxRuntimeExports.jsx(u,{reaction:s,variant:"compact",onClick:()=>{r({...s,isActive:!s.isActive}),n(!1)}},s.type)})})]})]})};module.exports=R;
+"use strict";const e=require("../../../../../../_virtual/jsx-runtime.cjs.js"),l=require("@ynput/ayon-react-components"),r=require("./Reactions.styled.cjs.js"),R=require("./helpers.cjs.js"),j=require("./Reaction.cjs.js"),m=require("react"),d=({reactions:p,changeHandler:x,categoryPrimary:n,categorySecondary:i,categoryTertiary:c})=>{const[a,o]=m.useState(!1),u=p.filter(t=>t.isActive).map(t=>t.type);return e.jsxRuntimeExports.jsxs(r.ReactionPanelOpener,{$categoryPrimary:n,$categorySecondary:i,$categoryTertiary:c,children:[e.jsxRuntimeExports.jsx(l.Icon,{icon:"add_reaction",className:"add-reaction",onClick:()=>o(!a)}),a&&e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(r.Overlay,{onClick:()=>o(!1)}),e.jsxRuntimeExports.jsx(r.ReactionsPanel,{$categoryPrimary:n,$categorySecondary:i,$categoryTertiary:c,children:R.reactionMapping.map(t=>{const s={type:t.key,isActive:u.includes(t.key)};return e.jsxRuntimeExports.jsx(j,{reaction:s,variant:"compact",onClick:()=>{x({...s,isActive:!s.isActive}),o(!1)},categoryPrimary:n,categorySecondary:i,categoryTertiary:c},s.type)})})]})]})};module.exports=d;
 //# sourceMappingURL=ReactionPanelOpener.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ReactionPanelOpener.cjs.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":"+OAYMA,EAAsB,CAAC,CAC3B,UAAAC,EACA,cAAAC,CACF,IAAa,CACX,KAAM,CAACC,EAAaC,CAAc,EAAIC,EAAAA,SAAS,EAAK,EAC9CC,EAAkBL,EACrB,OAAQM,GAAaA,EAAS,QAAQ,EACtC,IAAKA,GAAaA,EAAS,IAAI,EAGhC,OAAAC,EAAA,kBAAA,KAACC,sBAAA,CACC,SAAA,CAAAC,EAAA,kBAAA,IAACC,EAAA,KAAA,CACC,KAAK,eACL,UAAU,eACV,QAAS,IAAMP,EAAe,CAACD,CAAW,CAAA,CAC5C,EACCA,GAEGK,EAAA,kBAAA,KAAAI,6BAAA,CAAA,SAAA,CAAAF,EAAA,kBAAA,IAACG,EAAA,QAAA,CAAe,QAAS,IAAMT,EAAe,EAAK,EAAG,0BAErDU,EAAO,eAAP,CACE,SAAgBC,EAAAA,gBAAA,IAAKR,GAAa,CACjC,MAAMS,EAAc,CAClB,KAAMT,EAAS,IACf,SAAUD,EAAgB,SAASC,EAAS,GAAG,CACjD,EAEE,OAAAG,EAAA,kBAAA,IAACO,EAAA,CAEC,SAAUD,EACV,QAAQ,UACR,QAAS,IAAM,CACbd,EAAc,CAAE,GAAGc,EAAa,SAAU,CAACA,EAAY,SAAU,EACjEZ,EAAe,EAAK,CAAA,CACtB,EANKY,EAAY,IAOnB,CAAA,CAEH,CACH,CAAA,CAAA,CACF,CAAA,CAAA,EAEJ,CAEJ"}
+{"version":3,"file":"ReactionPanelOpener.cjs.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":"+OAeMA,EAAsB,CAAC,CAC3B,UAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,kBAAAC,EACA,iBAAAC,CACF,IAAa,CACX,KAAM,CAACC,EAAaC,CAAc,EAAIC,EAAAA,SAAS,EAAK,EAC9CC,EAAkBR,EACrB,OAAQS,GAAaA,EAAS,QAAQ,EACtC,IAAKA,GAAaA,EAAS,IAAI,EAGhC,OAAAC,EAAA,kBAAA,KAACC,EAAO,oBAAP,CACC,iBAAkBT,EAClB,mBAAoBC,EACpB,kBAAmBC,EAEnB,SAAA,CAAAQ,EAAA,kBAAA,IAACC,EAAA,KAAA,CACC,KAAK,eACL,UAAU,eACV,QAAS,IAAMP,EAAe,CAACD,CAAW,CAAA,CAC5C,EACCA,GAEGK,EAAA,kBAAA,KAAAI,6BAAA,CAAA,SAAA,CAAAF,EAAA,kBAAA,IAACG,EAAA,QAAA,CAAe,QAAS,IAAMT,EAAe,EAAK,EAAG,EAEtDM,EAAA,kBAAA,IAACI,EAAO,eAAP,CACC,iBAAkBd,EAClB,mBAAoBC,EACpB,kBAAmBC,EAElB,SAAAa,EAAA,gBAAgB,IAAKR,GAAa,CACjC,MAAMS,EAAc,CAClB,KAAMT,EAAS,IACf,SAAUD,EAAgB,SAASC,EAAS,GAAG,CACjD,EAEE,OAAAG,EAAA,kBAAA,IAACO,EAAA,CAEC,SAAUD,EACV,QAAQ,UACR,QAAS,IAAM,CACbjB,EAAc,CAAE,GAAGiB,EAAa,SAAU,CAACA,EAAY,SAAU,EACjEZ,EAAe,EAAK,CACtB,EACA,gBAAAJ,EACA,kBAAAC,EACA,iBAAAC,CAAA,EATKc,EAAY,IAUnB,CAEH,CAAA,CAAA,CAAA,CACH,CACF,CAAA,CAAA,CAAA,CAEJ,CAEJ"}

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

@@ -1,46 +1,68 @@
 import { j as e } from "../../../../../../_virtual/jsx-runtime.es.js";
-import { Icon as c } from "@ynput/ayon-react-components";
-import { ReactionPanelOpener as p, Overlay as l, ReactionsPanel as m } from "./Reactions.styled.es.js";
-import { reactionMapping as f } from "./helpers.es.js";
-import d from "./Reaction.es.js";
-import { useState as j } from "react";
-const P = ({
-  reactions: a,
-  changeHandler: s
+import { Icon as m } from "@ynput/ayon-react-components";
+import { ReactionPanelOpener as f, Overlay as d, ReactionsPanel as j } from "./Reactions.styled.es.js";
+import { reactionMapping as x } from "./helpers.es.js";
+import u from "./Reaction.es.js";
+import { useState as v } from "react";
+const A = ({
+  reactions: c,
+  changeHandler: p,
+  categoryPrimary: n,
+  categorySecondary: o,
+  categoryTertiary: a
 }) => {
-  const [o, n] = j(!1), r = a.filter((t) => t.isActive).map((t) => t.type);
-  return /* @__PURE__ */ e.jsxs(p, { children: [
-    /* @__PURE__ */ e.jsx(
-      c,
-      {
-        icon: "add_reaction",
-        className: "add-reaction",
-        onClick: () => n(!o)
-      }
-    ),
-    o && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-      /* @__PURE__ */ e.jsx(l, { onClick: () => n(!1) }),
-      /* @__PURE__ */ e.jsx(m, { children: f.map((t) => {
-        const i = {
-          type: t.key,
-          isActive: r.includes(t.key)
-        };
-        return /* @__PURE__ */ e.jsx(
-          d,
+  const [r, s] = v(!1), l = c.filter((t) => t.isActive).map((t) => t.type);
+  return /* @__PURE__ */ e.jsxs(
+    f,
+    {
+      $categoryPrimary: n,
+      $categorySecondary: o,
+      $categoryTertiary: a,
+      children: [
+        /* @__PURE__ */ e.jsx(
+          m,
           {
-            reaction: i,
-            variant: "compact",
-            onClick: () => {
-              s({ ...i, isActive: !i.isActive }), n(!1);
+            icon: "add_reaction",
+            className: "add-reaction",
+            onClick: () => s(!r)
+          }
+        ),
+        r && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+          /* @__PURE__ */ e.jsx(d, { onClick: () => s(!1) }),
+          /* @__PURE__ */ e.jsx(
+            j,
+            {
+              $categoryPrimary: n,
+              $categorySecondary: o,
+              $categoryTertiary: a,
+              children: x.map((t) => {
+                const i = {
+                  type: t.key,
+                  isActive: l.includes(t.key)
+                };
+                return /* @__PURE__ */ e.jsx(
+                  u,
+                  {
+                    reaction: i,
+                    variant: "compact",
+                    onClick: () => {
+                      p({ ...i, isActive: !i.isActive }), s(!1);
+                    },
+                    categoryPrimary: n,
+                    categorySecondary: o,
+                    categoryTertiary: a
+                  },
+                  i.type
+                );
+              })
             }
-          },
-          i.type
-        );
-      }) })
-    ] })
-  ] });
+          )
+        ] })
+      ]
+    }
+  );
 };
 export {
-  P as default
+  A as default
 };
 //# sourceMappingURL=ReactionPanelOpener.es.js.map

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 s=require("../../../../../../_virtual/jsx-runtime.cjs.js"),u=require("./ExistingReactions.cjs.js"),R=require("./ReactionPanelOpener.cjs.js"),j=require("./Reactions.styled.cjs.js"),p=({reactions:e,changeHandler:t,readOnly:n,category:o,categoryPrimary:i,categorySecondary:c,categoryTertiary:x})=>{const r=o?{categoryPrimary:i,categorySecondary:c,categoryTertiary:x}:{};return s.jsxRuntimeExports.jsxs(j.ReactionsWrapper,{children:[!n&&s.jsxRuntimeExports.jsx(R,{reactions:e,changeHandler:t,...r}),s.jsxRuntimeExports.jsx(u,{reactions:e,changeHandler:t,...r})]})};module.exports=p;
 //# 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 clsx from 'clsx'\nimport 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  category?: string\n  categoryPrimary?: string\n  categorySecondary?: string\n  categoryTertiary?: string\n}\n\nconst Reactions = ({\n  reactions,\n  changeHandler,\n  readOnly,\n  category,\n  categoryPrimary,\n  categorySecondary,\n  categoryTertiary,\n}: Props) => {\n  // show category colors if category is set (set category and not a guest user)\n  const categoryColors = category ? { categoryPrimary, categorySecondary, categoryTertiary } : {}\n  return (\n    <Styled.ReactionsWrapper>\n      {!readOnly && (\n        <ReactionPanelOpener\n          reactions={reactions}\n          changeHandler={changeHandler}\n          {...categoryColors}\n        />\n      )}\n      <ExistingReactions reactions={reactions} changeHandler={changeHandler} {...categoryColors} />\n    </Styled.ReactionsWrapper>\n  )\n}\n\nexport default Reactions\n"],"names":["Reactions","reactions","changeHandler","readOnly","category","categoryPrimary","categorySecondary","categoryTertiary","categoryColors","jsxs","Styled.ReactionsWrapper","jsx","ReactionPanelOpener","ExistingReactions"],"mappings":"uMAgBMA,EAAY,CAAC,CACjB,UAAAC,EACA,cAAAC,EACA,SAAAC,EACA,SAAAC,EACA,gBAAAC,EACA,kBAAAC,EACA,iBAAAC,CACF,IAAa,CAEX,MAAMC,EAAiBJ,EAAW,CAAE,gBAAAC,EAAiB,kBAAAC,EAAmB,iBAAAC,CAAA,EAAqB,CAAC,EAE5F,OAAAE,EAAA,kBAAA,KAACC,mBAAA,CACE,SAAA,CAAA,CAACP,GACAQ,EAAA,kBAAA,IAACC,EAAA,CACC,UAAAX,EACA,cAAAC,EACC,GAAGM,CAAA,CACN,EAEDG,EAAAA,kBAAAA,IAAAE,EAAA,CAAkB,UAAAZ,EAAsB,cAAAC,EAA+B,GAAGM,CAAgB,CAAA,CAAA,EAC7F,CAEJ"}

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

@@ -1,12 +1,30 @@
 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 a from "./ExistingReactions.es.js";
+import x from "./ReactionPanelOpener.es.js";
+import { ReactionsWrapper as c } from "./Reactions.styled.es.js";
+const u = ({
+  reactions: r,
+  changeHandler: t,
+  readOnly: e,
+  category: i,
+  categoryPrimary: m,
+  categorySecondary: n,
+  categoryTertiary: p
+}) => {
+  const s = i ? { categoryPrimary: m, categorySecondary: n, categoryTertiary: p } : {};
+  return /* @__PURE__ */ o.jsxs(c, { children: [
+    !e && /* @__PURE__ */ o.jsx(
+      x,
+      {
+        reactions: r,
+        changeHandler: t,
+        ...s
+      }
+    ),
+    /* @__PURE__ */ o.jsx(a, { reactions: r, changeHandler: t, ...s })
+  ] });
+};
 export {
-  f as default
+  u 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 clsx from 'clsx'\nimport 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  category?: string\n  categoryPrimary?: string\n  categorySecondary?: string\n  categoryTertiary?: string\n}\n\nconst Reactions = ({\n  reactions,\n  changeHandler,\n  readOnly,\n  category,\n  categoryPrimary,\n  categorySecondary,\n  categoryTertiary,\n}: Props) => {\n  // show category colors if category is set (set category and not a guest user)\n  const categoryColors = category ? { categoryPrimary, categorySecondary, categoryTertiary } : {}\n  return (\n    <Styled.ReactionsWrapper>\n      {!readOnly && (\n        <ReactionPanelOpener\n          reactions={reactions}\n          changeHandler={changeHandler}\n          {...categoryColors}\n        />\n      )}\n      <ExistingReactions reactions={reactions} changeHandler={changeHandler} {...categoryColors} />\n    </Styled.ReactionsWrapper>\n  )\n}\n\nexport default Reactions\n"],"names":["Reactions","reactions","changeHandler","readOnly","category","categoryPrimary","categorySecondary","categoryTertiary","categoryColors","jsxs","Styled.ReactionsWrapper","jsx","ReactionPanelOpener","ExistingReactions"],"mappings":";;;;AAgBA,MAAMA,IAAY,CAAC;AAAA,EACjB,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,kBAAAC;AACF,MAAa;AAEX,QAAMC,IAAiBJ,IAAW,EAAE,iBAAAC,GAAiB,mBAAAC,GAAmB,kBAAAC,EAAA,IAAqB,CAAC;AAE5F,SAAAE,gBAAAA,EAAA,KAACC,GAAA,EACE,UAAA;AAAA,IAAA,CAACP,KACAQ,gBAAAA,EAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAAX;AAAA,QACA,eAAAC;AAAA,QACC,GAAGM;AAAA,MAAA;AAAA,IACN;AAAA,IAEDG,gBAAAA,EAAAA,IAAAE,GAAA,EAAkB,WAAAZ,GAAsB,eAAAC,GAA+B,GAAGM,EAAgB,CAAA;AAAA,EAAA,GAC7F;AAEJ;"}

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`\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`\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;"}