@ynput/ayon-frontend-shared 0.2.33 → 0.2.35

package/dist/shared/src/containers/Feed/components/FileUploadCard/FileUploadCard.es.js

@@ -1,11 +1,11 @@
 import { j as e } from "../../../../../../_virtual/jsx-runtime.es.js";
-import { getFileSizeString as E, Icon as d, Button as I } from "@ynput/ayon-react-components";
-import { File as P, ContentWrapper as z, ImageWrapper as S, Buttons as U, ExpandButton as g, Footer as O } from "./FileUploadCard.styled.es.js";
+import { getFileSizeString as P, Icon as d, Button as E } from "@ynput/ayon-react-components";
+import { File as z, ContentWrapper as S, ImageWrapper as U, Buttons as O, ExpandButton as h, Footer as W } from "./FileUploadCard.styled.es.js";
 import i from "clsx";
-import { useState as W } from "react";
-import { isFilePreviewable as $ } from "../FileUploadPreview/FileUploadPreview.es.js";
+import { useState as $ } from "react";
+import { isFilePreviewable as q } from "../FileUploadPreview/FileUploadPreview.es.js";
 import "../../../../context/RemoteModulesContext.es.js";
-import { useDetailsPanelContext as q } from "../../../../context/DetailsPanelContext.es.js";
+import { useDetailsPanelContext as J } from "../../../../context/DetailsPanelContext.es.js";
 import "../../../../context/ThumbnailUploaderContext.es.js";
 import "../../../../context/SettingsPanelContext.es.js";
 import "../../../../context/pip/PiPProvider.es.js";
@@ -16,7 +16,8 @@ import "../../../../context/AddonContext.es.js";
 import "../../../../context/PowerpackContext.es.js";
 import "../../../../context/MoveEntityContext.es.js";
 import "../../../../context/MenuContext.es.js";
-const J = {
+import "../../../../context/WebsocketContext.es.js";
+const T = {
   // special cases
   description: ["doc"],
   folder_zip: ["zip"],
@@ -58,73 +59,74 @@ const J = {
   filter_none: ["sequence"],
   font_download: ["font"],
   deployed_code: ["model", ".obj", ".abc", ".stl", ".fbx", ".gltf", ".glb", ".usd"]
-}, T = (l) => {
-  for (const [o, n] of Object.entries(J))
+}, G = (l) => {
+  for (const [o, n] of Object.entries(T))
     if (n.some((s) => l.includes(s)))
       return o;
   return "draft";
-}, te = ({
+}, ie = ({
   name: l,
   mime: o,
   src: n,
   unsavedAnnotation: s,
   savedAnnotation: x,
-  size: h,
+  size: u,
   progress: c,
   onRemove: p,
-  isCompact: u,
+  isCompact: w,
   isDownloadable: r = !1,
   onExpand: N,
+  disableExpand: f,
   onJumpTo: b,
-  className: w,
-  ..._
+  className: _,
+  ...v
 }) => {
-  const v = c && c < 100, [k, y] = W(!1), { feedAnnotationsEnabled: C } = q(), f = l.split("."), m = f.pop() || "", F = f.join("."), a = $(o || "." + m), B = (o == null ? void 0 : o.includes("image/")) || !!s, j = /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-    /* @__PURE__ */ e.jsx("span", { className: "size", children: E(h) }),
+  const k = c && c < 100, [y, C] = $(!1), { feedAnnotationsEnabled: F } = J(), j = l.split("."), m = j.pop() || "", B = j.join("."), t = q(o || "." + m), I = (o == null ? void 0 : o.includes("image/")) || !!s, g = /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx("span", { className: "size", children: P(u) }),
     /* @__PURE__ */ e.jsx(d, { icon: "download", className: "download-icon" })
-  ] }), t = s ?? x;
+  ] }), a = s ?? x;
   return /* @__PURE__ */ e.jsxs(
-    P,
+    z,
     {
-      className: i(w, {
-        compact: u,
+      className: i(_, {
+        compact: w,
         isDownloadable: r,
-        isPreviewable: a,
+        isPreviewable: t,
         isUnsavedAnnotation: !!s
       }),
-      ..._,
+      ...v,
       children: [
         /* @__PURE__ */ e.jsxs(
-          z,
+          S,
           {
             className: i("content-wrapper", {
-              isPreviewable: a,
+              isPreviewable: t,
               isUnsavedAnnotation: !!s
             }),
             children: [
-              /* @__PURE__ */ e.jsx(d, { icon: T(o || "." + m), className: "type-icon" }),
-              B && n && /* @__PURE__ */ e.jsx(
-                S,
+              /* @__PURE__ */ e.jsx(d, { icon: G(o || "." + m), className: "type-icon" }),
+              I && n && /* @__PURE__ */ e.jsx(
+                U,
                 {
                   className: i({
                     "image-wrapper": !0,
-                    isDownloadable: r || a || s
+                    isDownloadable: r || t || s
                   }),
                   children: /* @__PURE__ */ e.jsx(
                     "img",
                     {
                       src: n,
-                      onError: () => y(!0),
+                      onError: () => C(!0),
                       style: {
-                        display: k ? "none" : "block"
+                        display: y ? "none" : "block"
                       }
                     }
                   )
                 }
               ),
-              /* @__PURE__ */ e.jsxs(U, { className: "expand-buttons", children: [
-                a && /* @__PURE__ */ e.jsx(
-                  g,
+              /* @__PURE__ */ e.jsxs(O, { className: "expand-buttons", children: [
+                t && !f && /* @__PURE__ */ e.jsx(
+                  h,
                   {
                     "data-tooltip": "Open preview",
                     icon: "open_in_full",
@@ -132,8 +134,8 @@ const J = {
                     onClick: N
                   }
                 ),
-                (s || C && x) && /* @__PURE__ */ e.jsx(
-                  g,
+                (s || F && x) && /* @__PURE__ */ e.jsx(
+                  h,
                   {
                     "data-tooltip": "Jump to annotation",
                     icon: "play_circle",
@@ -145,27 +147,37 @@ const J = {
             ]
           }
         ),
-        /* @__PURE__ */ e.jsxs(O, { className: i({ inProgress: v, isPreviewable: a, isDownloadable: r }), children: [
-          /* @__PURE__ */ e.jsx("span", { className: "progress", style: { right: `${100 - c}%` } }),
-          /* @__PURE__ */ e.jsx("div", { className: "name-wrapper", children: t ? /* @__PURE__ */ e.jsxs("span", { className: "name", children: [
-            /* @__PURE__ */ e.jsx(d, { icon: "draw" }),
-            t.range[0],
-            t.range[1] !== t.range[0] && ` - ${t.range[1]}`
-          ] }) : /* @__PURE__ */ e.jsxs("span", { className: "name", children: [
-            F,
-            /* @__PURE__ */ e.jsxs("span", { className: "extension", children: [
-              ".",
-              m
-            ] })
-          ] }) }),
-          r && (p ? /* @__PURE__ */ e.jsx("div", { className: "download", children: j }) : /* @__PURE__ */ e.jsx("a", { href: n, target: "_blank", rel: "noopener noreferrer", className: "download", children: j }))
-        ] }),
-        p && /* @__PURE__ */ e.jsx(I, { className: "remove", onClick: p, icon: "close" })
+        /* @__PURE__ */ e.jsxs(
+          W,
+          {
+            className: i({
+              inProgress: k,
+              isPreviewable: t && !f,
+              isDownloadable: r
+            }),
+            children: [
+              /* @__PURE__ */ e.jsx("span", { className: "progress", style: { right: `${100 - c}%` } }),
+              /* @__PURE__ */ e.jsx("div", { className: "name-wrapper", children: a ? /* @__PURE__ */ e.jsxs("span", { className: "name", children: [
+                /* @__PURE__ */ e.jsx(d, { icon: "draw" }),
+                a.range[0],
+                a.range[1] !== a.range[0] && ` - ${a.range[1]}`
+              ] }) : /* @__PURE__ */ e.jsxs("span", { className: "name", children: [
+                B,
+                /* @__PURE__ */ e.jsxs("span", { className: "extension", children: [
+                  ".",
+                  m
+                ] })
+              ] }) }),
+              r && (p ? /* @__PURE__ */ e.jsx("div", { className: "download", children: g }) : /* @__PURE__ */ e.jsx("a", { href: n, target: "_blank", rel: "noopener noreferrer", className: "download", children: g }))
+            ]
+          }
+        ),
+        p && /* @__PURE__ */ e.jsx(E, { className: "remove", onClick: p, icon: "close" })
       ]
     }
   );
 };
 export {
-  te as default
+  ie as default
 };
 //# sourceMappingURL=FileUploadCard.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FileUploadCard.es.js","sources":["../../../../../../../src/containers/Feed/components/FileUploadCard/FileUploadCard.tsx"],"sourcesContent":["import { Button, getFileSizeString, Icon } from '@ynput/ayon-react-components'\nimport * as Styled from './FileUploadCard.styled'\nimport clsx from 'clsx'\nimport { useState } from 'react'\nimport { isFilePreviewable } from '../FileUploadPreview'\nimport { SavedAnnotationMetadata } from '@shared/containers'\nimport { useDetailsPanelContext } from '@shared/context'\nimport { AnnotationPreview } from '../CommentInput/hooks/useAnnotationsSync'\n\nexport interface FileUploadCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  name: string\n  mime?: string\n  src?: string\n  unsavedAnnotation?: AnnotationPreview\n  savedAnnotation?: SavedAnnotationMetadata\n  size: number\n  progress: number\n  onRemove?: () => void\n  isCompact?: boolean\n  isDownloadable?: boolean\n  onExpand?: () => void\n  onJumpTo?: () => void\n}\n\nconst fileIcons: { [key: string]: string[] } = {\n  // special cases\n  description: ['doc'],\n  folder_zip: ['zip'],\n  code_blocks: [\n    'json',\n    'javascript',\n    'python',\n    'html',\n    'css',\n    '.py',\n    '.js',\n    '.html',\n    '.css',\n    '.json',\n    '.ts',\n  ],\n  brush: ['.psd', '.ai', '.xd', '.sketch'],\n  '3d_rotation': [\n    '.mb',\n    '.ma',\n    '.c4d',\n    '.blend',\n    '.max',\n    '.3ds',\n    '.lwo',\n    '.lws',\n    '.lxo',\n    '.hip',\n    '.hda',\n  ],\n  theaters: ['.aep', '.tpl', '.clip', '.nk', '.fusion', '.prproj', '.spsm', '.drp'],\n  picture_as_pdf: ['pdf', '.pdf'],\n  // default\n  image: ['image', '.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp'],\n  videocam: ['video', '.mp4', '.mov', '.avi', '.mkv', '.webm', '.mxf'],\n  business_center: ['application'],\n  audio_file: ['audio'],\n  text_snippet: ['text'],\n  filter_none: ['sequence'],\n  font_download: ['font'],\n  deployed_code: ['model', '.obj', '.abc', '.stl', '.fbx', '.gltf', '.glb', '.usd'],\n}\n\nconst getIconForType = (type: string): string => {\n  for (const [icon, keywords] of Object.entries(fileIcons)) {\n    if (keywords.some((keyword) => type.includes(keyword))) {\n      return icon\n    }\n  }\n  return 'draft'\n}\n\nconst FileUploadCard = ({\n  name,\n  mime,\n  src,\n  unsavedAnnotation,\n  savedAnnotation,\n  size,\n  progress,\n  onRemove,\n  isCompact,\n  isDownloadable = false,\n  onExpand,\n  onJumpTo,\n  className,\n  ...props\n}: FileUploadCardProps) => {\n  const inProgress = progress && progress < 100\n\n  const [imageError, setImageError] = useState(false)\n  const { feedAnnotationsEnabled } = useDetailsPanelContext()\n\n  // split name and file extension\n  const nameParts = name.split('.')\n  const extension = nameParts.pop() || ''\n  const fileName = nameParts.join('.')\n\n  const isPreviewable = isFilePreviewable(mime || '.' + extension)\n  const isImage = mime?.includes('image/') || Boolean(unsavedAnnotation)\n\n  const downloadComponent = (\n    <>\n      <span className=\"size\">{getFileSizeString(size)}</span>\n      <Icon icon=\"download\" className=\"download-icon\" />\n    </>\n  )\n\n  const someAnnotation = unsavedAnnotation ?? savedAnnotation\n\n  return (\n    <Styled.File\n      className={clsx(className, {\n        compact: isCompact,\n        isDownloadable,\n        isPreviewable,\n        isUnsavedAnnotation: Boolean(unsavedAnnotation),\n      })}\n      {...props}\n    >\n      <Styled.ContentWrapper\n        className={clsx('content-wrapper', {\n          isPreviewable,\n          isUnsavedAnnotation: Boolean(unsavedAnnotation),\n        })}\n      >\n        <Icon icon={getIconForType(mime || '.' + extension)} className=\"type-icon\" />\n        {isImage && src && (\n          <Styled.ImageWrapper\n            className={clsx({\n              'image-wrapper': true,\n              isDownloadable: isDownloadable || isPreviewable || unsavedAnnotation,\n            })}\n          >\n            <img\n              src={src}\n              onError={() => setImageError(true)}\n              style={{\n                display: imageError ? 'none' : 'block',\n              }}\n            />\n          </Styled.ImageWrapper>\n        )}\n        <Styled.Buttons className=\"expand-buttons\">\n          {isPreviewable && (\n            <Styled.ExpandButton\n              data-tooltip=\"Open preview\"\n              icon=\"open_in_full\"\n              variant=\"nav\"\n              onClick={onExpand}\n            />\n          )}\n          {(unsavedAnnotation || (feedAnnotationsEnabled && savedAnnotation)) && (\n            <Styled.ExpandButton\n              data-tooltip=\"Jump to annotation\"\n              icon=\"play_circle\"\n              variant=\"nav\"\n              onClick={onJumpTo}\n            />\n          )}\n        </Styled.Buttons>\n      </Styled.ContentWrapper>\n      <Styled.Footer className={clsx({ inProgress, isPreviewable, isDownloadable })}>\n        <span className=\"progress\" style={{ right: `${100 - progress}%` }} />\n        <div className=\"name-wrapper\">\n          {someAnnotation ? (\n            <span className=\"name\">\n              <Icon icon=\"draw\" />\n              {someAnnotation.range[0]}\n              {someAnnotation.range[1] !== someAnnotation.range[0] &&\n                ` - ${someAnnotation.range[1]}`}\n            </span>\n          ) : (\n            <span className=\"name\">\n              {fileName}\n              <span className=\"extension\">.{extension}</span>\n            </span>\n          )}\n        </div>\n\n        {isDownloadable &&\n          (!onRemove ? (\n            <a href={src} target=\"_blank\" rel=\"noopener noreferrer\" className=\"download\">\n              {downloadComponent}\n            </a>\n          ) : (\n            <div className=\"download\">{downloadComponent}</div>\n          ))}\n      </Styled.Footer>\n      {onRemove && <Button className=\"remove\" onClick={onRemove} icon=\"close\" />}\n    </Styled.File>\n  )\n}\n\nexport default FileUploadCard\n"],"names":["fileIcons","getIconForType","type","icon","keywords","keyword","FileUploadCard","name","mime","src","unsavedAnnotation","savedAnnotation","size","progress","onRemove","isCompact","isDownloadable","onExpand","onJumpTo","className","props","inProgress","imageError","setImageError","useState","feedAnnotationsEnabled","useDetailsPanelContext","nameParts","extension","fileName","isPreviewable","isFilePreviewable","isImage","downloadComponent","jsxs","Fragment","jsx","getFileSizeString","Icon","someAnnotation","Styled.File","clsx","Styled.ContentWrapper","Styled.ImageWrapper","Styled.Buttons","Styled.ExpandButton","Styled.Footer","Button"],"mappings":"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"}
+{"version":3,"file":"FileUploadCard.es.js","sources":["../../../../../../../src/containers/Feed/components/FileUploadCard/FileUploadCard.tsx"],"sourcesContent":["import { Button, getFileSizeString, Icon } from '@ynput/ayon-react-components'\nimport * as Styled from './FileUploadCard.styled'\nimport clsx from 'clsx'\nimport { useState } from 'react'\nimport { isFilePreviewable } from '../FileUploadPreview'\nimport { SavedAnnotationMetadata } from '@shared/containers'\nimport { useDetailsPanelContext } from '@shared/context'\nimport { AnnotationPreview } from '../CommentInput/hooks/useAnnotationsSync'\n\nexport interface FileUploadCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  name: string\n  mime?: string\n  src?: string\n  unsavedAnnotation?: AnnotationPreview\n  savedAnnotation?: SavedAnnotationMetadata\n  size: number\n  progress: number\n  onRemove?: () => void\n  isCompact?: boolean\n  isDownloadable?: boolean\n  onExpand?: () => void\n  disableExpand?: boolean\n  onJumpTo?: () => void\n}\n\nconst fileIcons: { [key: string]: string[] } = {\n  // special cases\n  description: ['doc'],\n  folder_zip: ['zip'],\n  code_blocks: [\n    'json',\n    'javascript',\n    'python',\n    'html',\n    'css',\n    '.py',\n    '.js',\n    '.html',\n    '.css',\n    '.json',\n    '.ts',\n  ],\n  brush: ['.psd', '.ai', '.xd', '.sketch'],\n  '3d_rotation': [\n    '.mb',\n    '.ma',\n    '.c4d',\n    '.blend',\n    '.max',\n    '.3ds',\n    '.lwo',\n    '.lws',\n    '.lxo',\n    '.hip',\n    '.hda',\n  ],\n  theaters: ['.aep', '.tpl', '.clip', '.nk', '.fusion', '.prproj', '.spsm', '.drp'],\n  picture_as_pdf: ['pdf', '.pdf'],\n  // default\n  image: ['image', '.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp'],\n  videocam: ['video', '.mp4', '.mov', '.avi', '.mkv', '.webm', '.mxf'],\n  business_center: ['application'],\n  audio_file: ['audio'],\n  text_snippet: ['text'],\n  filter_none: ['sequence'],\n  font_download: ['font'],\n  deployed_code: ['model', '.obj', '.abc', '.stl', '.fbx', '.gltf', '.glb', '.usd'],\n}\n\nconst getIconForType = (type: string): string => {\n  for (const [icon, keywords] of Object.entries(fileIcons)) {\n    if (keywords.some((keyword) => type.includes(keyword))) {\n      return icon\n    }\n  }\n  return 'draft'\n}\n\nconst FileUploadCard = ({\n  name,\n  mime,\n  src,\n  unsavedAnnotation,\n  savedAnnotation,\n  size,\n  progress,\n  onRemove,\n  isCompact,\n  isDownloadable = false,\n  onExpand,\n  disableExpand,\n  onJumpTo,\n  className,\n  ...props\n}: FileUploadCardProps) => {\n  const inProgress = progress && progress < 100\n\n  const [imageError, setImageError] = useState(false)\n  const { feedAnnotationsEnabled } = useDetailsPanelContext()\n\n  // split name and file extension\n  const nameParts = name.split('.')\n  const extension = nameParts.pop() || ''\n  const fileName = nameParts.join('.')\n\n  const isPreviewable = isFilePreviewable(mime || '.' + extension)\n  const isImage = mime?.includes('image/') || Boolean(unsavedAnnotation)\n\n  const downloadComponent = (\n    <>\n      <span className=\"size\">{getFileSizeString(size)}</span>\n      <Icon icon=\"download\" className=\"download-icon\" />\n    </>\n  )\n\n  const someAnnotation = unsavedAnnotation ?? savedAnnotation\n\n  return (\n    <Styled.File\n      className={clsx(className, {\n        compact: isCompact,\n        isDownloadable,\n        isPreviewable,\n        isUnsavedAnnotation: Boolean(unsavedAnnotation),\n      })}\n      {...props}\n    >\n      <Styled.ContentWrapper\n        className={clsx('content-wrapper', {\n          isPreviewable,\n          isUnsavedAnnotation: Boolean(unsavedAnnotation),\n        })}\n      >\n        <Icon icon={getIconForType(mime || '.' + extension)} className=\"type-icon\" />\n        {isImage && src && (\n          <Styled.ImageWrapper\n            className={clsx({\n              'image-wrapper': true,\n              isDownloadable: isDownloadable || isPreviewable || unsavedAnnotation,\n            })}\n          >\n            <img\n              src={src}\n              onError={() => setImageError(true)}\n              style={{\n                display: imageError ? 'none' : 'block',\n              }}\n            />\n          </Styled.ImageWrapper>\n        )}\n        <Styled.Buttons className=\"expand-buttons\">\n          {isPreviewable && !disableExpand && (\n            <Styled.ExpandButton\n              data-tooltip=\"Open preview\"\n              icon=\"open_in_full\"\n              variant=\"nav\"\n              onClick={onExpand}\n            />\n          )}\n          {(unsavedAnnotation || (feedAnnotationsEnabled && savedAnnotation)) && (\n            <Styled.ExpandButton\n              data-tooltip=\"Jump to annotation\"\n              icon=\"play_circle\"\n              variant=\"nav\"\n              onClick={onJumpTo}\n            />\n          )}\n        </Styled.Buttons>\n      </Styled.ContentWrapper>\n      <Styled.Footer\n        className={clsx({\n          inProgress,\n          isPreviewable: isPreviewable && !disableExpand,\n          isDownloadable,\n        })}\n      >\n        <span className=\"progress\" style={{ right: `${100 - progress}%` }} />\n        <div className=\"name-wrapper\">\n          {someAnnotation ? (\n            <span className=\"name\">\n              <Icon icon=\"draw\" />\n              {someAnnotation.range[0]}\n              {someAnnotation.range[1] !== someAnnotation.range[0] &&\n                ` - ${someAnnotation.range[1]}`}\n            </span>\n          ) : (\n            <span className=\"name\">\n              {fileName}\n              <span className=\"extension\">.{extension}</span>\n            </span>\n          )}\n        </div>\n\n        {isDownloadable &&\n          (!onRemove ? (\n            <a href={src} target=\"_blank\" rel=\"noopener noreferrer\" className=\"download\">\n              {downloadComponent}\n            </a>\n          ) : (\n            <div className=\"download\">{downloadComponent}</div>\n          ))}\n      </Styled.Footer>\n      {onRemove && <Button className=\"remove\" onClick={onRemove} icon=\"close\" />}\n    </Styled.File>\n  )\n}\n\nexport default FileUploadCard\n"],"names":["fileIcons","getIconForType","type","icon","keywords","keyword","FileUploadCard","name","mime","src","unsavedAnnotation","savedAnnotation","size","progress","onRemove","isCompact","isDownloadable","onExpand","disableExpand","onJumpTo","className","props","inProgress","imageError","setImageError","useState","feedAnnotationsEnabled","useDetailsPanelContext","nameParts","extension","fileName","isPreviewable","isFilePreviewable","isImage","downloadComponent","jsxs","Fragment","jsx","getFileSizeString","Icon","someAnnotation","Styled.File","clsx","Styled.ContentWrapper","Styled.ImageWrapper","Styled.Buttons","Styled.ExpandButton","Styled.Footer","Button"],"mappings":"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"}

package/dist/shared/src/containers/Feed/components/FilesGrid/FilesGrid.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const u=require("../../../../../../_virtual/jsx-runtime.cjs.js"),j=require("./FilesGrid.styled.cjs.js"),q=require("clsx"),F=require("../FileUploadCard/FileUploadCard.cjs.js"),h=require("../FileUploadPreview/FileUploadPreview.cjs.js"),R=require("react"),b=({files:t=[],activityId:m,isCompact:a,onRemove:i,projectName:o,isDownloadable:c,onExpand:r,onAnnotationClick:d,...p})=>{if(!t.length)return null;const v=R.useCallback(e=>{const s=t.filter(n=>h.isFilePreviewable(n.mime,n.ext)),x=s.findIndex(n=>n.id===t[e].id);r==null||r({files:s,index:x,activityId:m||""})},[r]);return u.jsxRuntimeExports.jsx(j.Grid,{className:q({compact:a}),...p,children:t.map((e,s)=>u.jsxRuntimeExports.jsx(F,{id:e.id||e.name,name:e.name,mime:e.mime||e.type,size:e.size,src:e.unsavedAnnotation?e.thumbnail:`/api/projects/${o}/files/${e.id}`,unsavedAnnotation:e.unsavedAnnotation,savedAnnotation:e.annotation,progress:e.progress,onRemove:i?()=>i(e.id,e.name,!!e.unsavedAnnotation):void 0,isCompact:a,isDownloadable:c,onExpand:()=>v(s),onJumpTo:()=>d==null?void 0:d(e)},s))})};module.exports=b;
+"use strict";const m=require("../../../../../../_virtual/jsx-runtime.cjs.js"),F=require("./FilesGrid.styled.cjs.js"),b=require("clsx"),h=require("../FileUploadCard/FileUploadCard.cjs.js"),R=require("../FileUploadPreview/FileUploadPreview.cjs.js"),g=require("react"),l=({files:r=[],activityId:o,isCompact:i,isEditing:c,onRemove:u,projectName:x,isDownloadable:v,onExpand:t,onAnnotationClick:d,pt:a,...p})=>{if(!r.length)return null;const j=g.useCallback(e=>{const s=r.filter(n=>R.isFilePreviewable(n.mime,n.ext)),q=s.findIndex(n=>n.id===r[e].id);t==null||t({files:s,index:q,activityId:o||""})},[t]);return m.jsxRuntimeExports.jsx(F.Grid,{className:b({compact:i}),...p,children:r.map((e,s)=>m.jsxRuntimeExports.jsx(h,{id:e.id||e.name,name:e.name,mime:e.mime||e.type,size:e.size,src:e.unsavedAnnotation?e.thumbnail:`/api/projects/${x}/files/${e.id}`,unsavedAnnotation:e.unsavedAnnotation,savedAnnotation:e.annotation,progress:e.progress,onRemove:u?()=>u(e.id,e.name,!!e.unsavedAnnotation):void 0,isCompact:i,isDownloadable:v,onExpand:()=>j(s),onJumpTo:()=>d==null?void 0:d(e),disableExpand:c,...a==null?void 0:a.file},s))})};module.exports=l;
 //# sourceMappingURL=FilesGrid.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FilesGrid.cjs.js","sources":["../../../../../../../src/containers/Feed/components/FilesGrid/FilesGrid.tsx"],"sourcesContent":["import * as Styled from './FilesGrid.styled'\nimport clsx from 'clsx'\nimport FileUploadCard from '../FileUploadCard'\nimport { isFilePreviewable } from '../FileUploadPreview'\nimport { useCallback } from 'react'\n\nexport interface FilesGridProps {\n  files?: any[]\n  activityId?: string\n  isCompact?: boolean\n  onRemove?: (id: string, name: string, isUnsavedAnnotation: boolean) => void\n  projectName: string\n  isDownloadable?: boolean\n  onExpand?: (data: { files: any[]; index: number; activityId: string }) => void\n  onAnnotationClick?: (file: any) => void\n  [key: string]: any\n}\n\nconst FilesGrid: React.FC<FilesGridProps> = ({\n  files = [],\n  activityId,\n  isCompact,\n  onRemove,\n  projectName,\n  isDownloadable,\n  onExpand,\n  onAnnotationClick,\n  ...props\n}) => {\n  if (!files.length) return null\n\n  const handleExpand = useCallback(\n    (index: number) => {\n      const filteredFiles = files.filter((file) => isFilePreviewable(file.mime, file.ext))\n      const updatedIndex = filteredFiles.findIndex((file) => file.id === files[index].id)\n      onExpand?.({ files: filteredFiles, index: updatedIndex, activityId: activityId || '' })\n    },\n    [onExpand],\n  )\n\n  return (\n    <Styled.Grid className={clsx({ compact: isCompact })} {...props}>\n      {files.map((file, index) => (\n        <FileUploadCard\n          key={index}\n          id={file.id || file.name}\n          name={file.name}\n          mime={file.mime || file.type}\n          size={file.size}\n          src={\n            file.unsavedAnnotation\n              ? file.thumbnail\n              : `/api/projects/${projectName}/files/${file.id}`\n          }\n          unsavedAnnotation={file.unsavedAnnotation}\n          savedAnnotation={file.annotation}\n          progress={file.progress}\n          onRemove={\n            onRemove ? () => onRemove(file.id, file.name, !!file.unsavedAnnotation) : undefined\n          }\n          isCompact={isCompact}\n          isDownloadable={isDownloadable}\n          onExpand={() => handleExpand(index)}\n          onJumpTo={() => onAnnotationClick?.(file)}\n        />\n      ))}\n    </Styled.Grid>\n  )\n}\n\nexport default FilesGrid\n"],"names":["FilesGrid","files","activityId","isCompact","onRemove","projectName","isDownloadable","onExpand","onAnnotationClick","props","handleExpand","useCallback","index","filteredFiles","file","isFilePreviewable","updatedIndex","Styled.Grid","clsx","jsx","FileUploadCard"],"mappings":"0QAkBMA,EAAsC,CAAC,CAC3C,MAAAC,EAAQ,CAAC,EACT,WAAAC,EACA,UAAAC,EACA,SAAAC,EACA,YAAAC,EACA,eAAAC,EACA,SAAAC,EACA,kBAAAC,EACA,GAAGC,CACL,IAAM,CACA,GAAA,CAACR,EAAM,OAAe,OAAA,KAE1B,MAAMS,EAAeC,EAAA,YAClBC,GAAkB,CACX,MAAAC,EAAgBZ,EAAM,OAAQa,GAASC,oBAAkBD,EAAK,KAAMA,EAAK,GAAG,CAAC,EAC7EE,EAAeH,EAAc,UAAWC,GAASA,EAAK,KAAOb,EAAMW,CAAK,EAAE,EAAE,EACvEL,GAAA,MAAAA,EAAA,CAAE,MAAOM,EAAe,MAAOG,EAAc,WAAYd,GAAc,IACpF,EACA,CAACK,CAAQ,CACX,EAEA,+BACGU,EAAAA,KAAA,CAAY,UAAWC,EAAK,CAAE,QAASf,CAAU,CAAC,EAAI,GAAGM,EACvD,WAAM,IAAI,CAACK,EAAMF,IAChBO,EAAA,kBAAA,IAACC,EAAA,CAEC,GAAIN,EAAK,IAAMA,EAAK,KACpB,KAAMA,EAAK,KACX,KAAMA,EAAK,MAAQA,EAAK,KACxB,KAAMA,EAAK,KACX,IACEA,EAAK,kBACDA,EAAK,UACL,iBAAiBT,CAAW,UAAUS,EAAK,EAAE,GAEnD,kBAAmBA,EAAK,kBACxB,gBAAiBA,EAAK,WACtB,SAAUA,EAAK,SACf,SACEV,EAAW,IAAMA,EAASU,EAAK,GAAIA,EAAK,KAAM,CAAC,CAACA,EAAK,iBAAiB,EAAI,OAE5E,UAAAX,EACA,eAAAG,EACA,SAAU,IAAMI,EAAaE,CAAK,EAClC,SAAU,IAAMJ,GAAA,YAAAA,EAAoBM,EAAI,EAnBnCF,CAqBR,CAAA,EACH,CAEJ"}
+{"version":3,"file":"FilesGrid.cjs.js","sources":["../../../../../../../src/containers/Feed/components/FilesGrid/FilesGrid.tsx"],"sourcesContent":["import * as Styled from './FilesGrid.styled'\nimport clsx from 'clsx'\nimport FileUploadCard, { FileUploadCardProps } from '../FileUploadCard'\nimport { isFilePreviewable } from '../FileUploadPreview'\nimport { useCallback } from 'react'\n\nexport interface FilesGridProps extends React.HTMLAttributes<HTMLDivElement> {\n  files?: any[]\n  activityId?: string\n  isCompact?: boolean\n  isEditing?: boolean\n  onRemove?: (id: string, name: string, isUnsavedAnnotation: boolean) => void\n  projectName: string\n  isDownloadable?: boolean\n  onExpand?: (data: { files: any[]; index: number; activityId: string }) => void\n  onAnnotationClick?: (file: any) => void\n  pt?: {\n    file?: Partial<FileUploadCardProps>\n  }\n}\n\nconst FilesGrid: React.FC<FilesGridProps> = ({\n  files = [],\n  activityId,\n  isCompact,\n  isEditing,\n  onRemove,\n  projectName,\n  isDownloadable,\n  onExpand,\n  onAnnotationClick,\n  pt,\n  ...props\n}) => {\n  if (!files.length) return null\n\n  const handleExpand = useCallback(\n    (index: number) => {\n      const filteredFiles = files.filter((file) => isFilePreviewable(file.mime, file.ext))\n      const updatedIndex = filteredFiles.findIndex((file) => file.id === files[index].id)\n      onExpand?.({ files: filteredFiles, index: updatedIndex, activityId: activityId || '' })\n    },\n    [onExpand],\n  )\n\n  return (\n    <Styled.Grid className={clsx({ compact: isCompact })} {...props}>\n      {files.map((file, index) => (\n        <FileUploadCard\n          key={index}\n          id={file.id || file.name}\n          name={file.name}\n          mime={file.mime || file.type}\n          size={file.size}\n          src={\n            file.unsavedAnnotation\n              ? file.thumbnail\n              : `/api/projects/${projectName}/files/${file.id}`\n          }\n          unsavedAnnotation={file.unsavedAnnotation}\n          savedAnnotation={file.annotation}\n          progress={file.progress}\n          onRemove={\n            onRemove ? () => onRemove(file.id, file.name, !!file.unsavedAnnotation) : undefined\n          }\n          isCompact={isCompact}\n          isDownloadable={isDownloadable}\n          onExpand={() => handleExpand(index)}\n          onJumpTo={() => onAnnotationClick?.(file)}\n          disableExpand={isEditing}\n          {...pt?.file}\n        />\n      ))}\n    </Styled.Grid>\n  )\n}\n\nexport default FilesGrid\n"],"names":["FilesGrid","files","activityId","isCompact","isEditing","onRemove","projectName","isDownloadable","onExpand","onAnnotationClick","pt","props","handleExpand","useCallback","index","filteredFiles","file","isFilePreviewable","updatedIndex","Styled.Grid","clsx","jsx","FileUploadCard"],"mappings":"0QAqBMA,EAAsC,CAAC,CAC3C,MAAAC,EAAQ,CAAC,EACT,WAAAC,EACA,UAAAC,EACA,UAAAC,EACA,SAAAC,EACA,YAAAC,EACA,eAAAC,EACA,SAAAC,EACA,kBAAAC,EACA,GAAAC,EACA,GAAGC,CACL,IAAM,CACA,GAAA,CAACV,EAAM,OAAe,OAAA,KAE1B,MAAMW,EAAeC,EAAA,YAClBC,GAAkB,CACX,MAAAC,EAAgBd,EAAM,OAAQe,GAASC,oBAAkBD,EAAK,KAAMA,EAAK,GAAG,CAAC,EAC7EE,EAAeH,EAAc,UAAWC,GAASA,EAAK,KAAOf,EAAMa,CAAK,EAAE,EAAE,EACvEN,GAAA,MAAAA,EAAA,CAAE,MAAOO,EAAe,MAAOG,EAAc,WAAYhB,GAAc,IACpF,EACA,CAACM,CAAQ,CACX,EAEA,+BACGW,EAAAA,KAAA,CAAY,UAAWC,EAAK,CAAE,QAASjB,CAAU,CAAC,EAAI,GAAGQ,EACvD,WAAM,IAAI,CAACK,EAAMF,IAChBO,EAAA,kBAAA,IAACC,EAAA,CAEC,GAAIN,EAAK,IAAMA,EAAK,KACpB,KAAMA,EAAK,KACX,KAAMA,EAAK,MAAQA,EAAK,KACxB,KAAMA,EAAK,KACX,IACEA,EAAK,kBACDA,EAAK,UACL,iBAAiBV,CAAW,UAAUU,EAAK,EAAE,GAEnD,kBAAmBA,EAAK,kBACxB,gBAAiBA,EAAK,WACtB,SAAUA,EAAK,SACf,SACEX,EAAW,IAAMA,EAASW,EAAK,GAAIA,EAAK,KAAM,CAAC,CAACA,EAAK,iBAAiB,EAAI,OAE5E,UAAAb,EACA,eAAAI,EACA,SAAU,IAAMK,EAAaE,CAAK,EAClC,SAAU,IAAML,GAAA,YAAAA,EAAoBO,GACpC,cAAeZ,EACd,GAAGM,GAAA,YAAAA,EAAI,IAAA,EArBHI,CAuBR,CAAA,EACH,CAEJ"}

package/dist/shared/src/containers/Feed/components/FilesGrid/FilesGrid.es.js

@@ -1,49 +1,53 @@
-import { j as n } from "../../../../../../_virtual/jsx-runtime.es.js";
-import { Grid as j } from "./FilesGrid.styled.es.js";
-import h from "clsx";
-import F from "../FileUploadCard/FileUploadCard.es.js";
-import { isFilePreviewable as b } from "../FileUploadPreview/FileUploadPreview.es.js";
-import { useCallback as g } from "react";
-const A = ({
-  files: s = [],
-  activityId: i,
-  isCompact: d,
-  onRemove: o,
-  projectName: p,
-  isDownloadable: u,
-  onExpand: m,
-  onAnnotationClick: e,
-  ...c
+import { j as i } from "../../../../../../_virtual/jsx-runtime.es.js";
+import { Grid as h } from "./FilesGrid.styled.es.js";
+import F from "clsx";
+import g from "../FileUploadCard/FileUploadCard.es.js";
+import { isFilePreviewable as I } from "../FileUploadPreview/FileUploadPreview.es.js";
+import { useCallback as y } from "react";
+const N = ({
+  files: a = [],
+  activityId: u,
+  isCompact: o,
+  isEditing: p,
+  onRemove: n,
+  projectName: c,
+  isDownloadable: v,
+  onExpand: e,
+  onAnnotationClick: t,
+  pt: d,
+  ...x
 }) => {
-  if (!s.length) return null;
-  const v = g(
+  if (!a.length) return null;
+  const j = y(
     (r) => {
-      const t = s.filter((a) => b(a.mime, a.ext)), x = t.findIndex((a) => a.id === s[r].id);
-      m == null || m({ files: t, index: x, activityId: i || "" });
+      const s = a.filter((m) => I(m.mime, m.ext)), b = s.findIndex((m) => m.id === a[r].id);
+      e == null || e({ files: s, index: b, activityId: u || "" });
     },
-    [m]
+    [e]
   );
-  return /* @__PURE__ */ n.jsx(j, { className: h({ compact: d }), ...c, children: s.map((r, t) => /* @__PURE__ */ n.jsx(
-    F,
+  return /* @__PURE__ */ i.jsx(h, { className: F({ compact: o }), ...x, children: a.map((r, s) => /* @__PURE__ */ i.jsx(
+    g,
     {
       id: r.id || r.name,
       name: r.name,
       mime: r.mime || r.type,
       size: r.size,
-      src: r.unsavedAnnotation ? r.thumbnail : `/api/projects/${p}/files/${r.id}`,
+      src: r.unsavedAnnotation ? r.thumbnail : `/api/projects/${c}/files/${r.id}`,
       unsavedAnnotation: r.unsavedAnnotation,
       savedAnnotation: r.annotation,
       progress: r.progress,
-      onRemove: o ? () => o(r.id, r.name, !!r.unsavedAnnotation) : void 0,
-      isCompact: d,
-      isDownloadable: u,
-      onExpand: () => v(t),
-      onJumpTo: () => e == null ? void 0 : e(r)
+      onRemove: n ? () => n(r.id, r.name, !!r.unsavedAnnotation) : void 0,
+      isCompact: o,
+      isDownloadable: v,
+      onExpand: () => j(s),
+      onJumpTo: () => t == null ? void 0 : t(r),
+      disableExpand: p,
+      ...d == null ? void 0 : d.file
     },
-    t
+    s
   )) });
 };
 export {
-  A as default
+  N as default
 };
 //# sourceMappingURL=FilesGrid.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FilesGrid.es.js","sources":["../../../../../../../src/containers/Feed/components/FilesGrid/FilesGrid.tsx"],"sourcesContent":["import * as Styled from './FilesGrid.styled'\nimport clsx from 'clsx'\nimport FileUploadCard from '../FileUploadCard'\nimport { isFilePreviewable } from '../FileUploadPreview'\nimport { useCallback } from 'react'\n\nexport interface FilesGridProps {\n  files?: any[]\n  activityId?: string\n  isCompact?: boolean\n  onRemove?: (id: string, name: string, isUnsavedAnnotation: boolean) => void\n  projectName: string\n  isDownloadable?: boolean\n  onExpand?: (data: { files: any[]; index: number; activityId: string }) => void\n  onAnnotationClick?: (file: any) => void\n  [key: string]: any\n}\n\nconst FilesGrid: React.FC<FilesGridProps> = ({\n  files = [],\n  activityId,\n  isCompact,\n  onRemove,\n  projectName,\n  isDownloadable,\n  onExpand,\n  onAnnotationClick,\n  ...props\n}) => {\n  if (!files.length) return null\n\n  const handleExpand = useCallback(\n    (index: number) => {\n      const filteredFiles = files.filter((file) => isFilePreviewable(file.mime, file.ext))\n      const updatedIndex = filteredFiles.findIndex((file) => file.id === files[index].id)\n      onExpand?.({ files: filteredFiles, index: updatedIndex, activityId: activityId || '' })\n    },\n    [onExpand],\n  )\n\n  return (\n    <Styled.Grid className={clsx({ compact: isCompact })} {...props}>\n      {files.map((file, index) => (\n        <FileUploadCard\n          key={index}\n          id={file.id || file.name}\n          name={file.name}\n          mime={file.mime || file.type}\n          size={file.size}\n          src={\n            file.unsavedAnnotation\n              ? file.thumbnail\n              : `/api/projects/${projectName}/files/${file.id}`\n          }\n          unsavedAnnotation={file.unsavedAnnotation}\n          savedAnnotation={file.annotation}\n          progress={file.progress}\n          onRemove={\n            onRemove ? () => onRemove(file.id, file.name, !!file.unsavedAnnotation) : undefined\n          }\n          isCompact={isCompact}\n          isDownloadable={isDownloadable}\n          onExpand={() => handleExpand(index)}\n          onJumpTo={() => onAnnotationClick?.(file)}\n        />\n      ))}\n    </Styled.Grid>\n  )\n}\n\nexport default FilesGrid\n"],"names":["FilesGrid","files","activityId","isCompact","onRemove","projectName","isDownloadable","onExpand","onAnnotationClick","props","handleExpand","useCallback","index","filteredFiles","file","isFilePreviewable","updatedIndex","Styled.Grid","clsx","jsx","FileUploadCard"],"mappings":";;;;;;AAkBA,MAAMA,IAAsC,CAAC;AAAA,EAC3C,OAAAC,IAAQ,CAAC;AAAA,EACT,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACA,MAAA,CAACR,EAAM,OAAe,QAAA;AAE1B,QAAMS,IAAeC;AAAA,IACnB,CAACC,MAAkB;AACX,YAAAC,IAAgBZ,EAAM,OAAO,CAACa,MAASC,EAAkBD,EAAK,MAAMA,EAAK,GAAG,CAAC,GAC7EE,IAAeH,EAAc,UAAU,CAACC,MAASA,EAAK,OAAOb,EAAMW,CAAK,EAAE,EAAE;AACvE,MAAAL,KAAA,QAAAA,EAAA,EAAE,OAAOM,GAAe,OAAOG,GAAc,YAAYd,KAAc;IACpF;AAAA,IACA,CAACK,CAAQ;AAAA,EACX;AAEA,+BACGU,GAAA,EAAY,WAAWC,EAAK,EAAE,SAASf,EAAU,CAAC,GAAI,GAAGM,GACvD,YAAM,IAAI,CAACK,GAAMF,MAChBO,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MAEC,IAAIN,EAAK,MAAMA,EAAK;AAAA,MACpB,MAAMA,EAAK;AAAA,MACX,MAAMA,EAAK,QAAQA,EAAK;AAAA,MACxB,MAAMA,EAAK;AAAA,MACX,KACEA,EAAK,oBACDA,EAAK,YACL,iBAAiBT,CAAW,UAAUS,EAAK,EAAE;AAAA,MAEnD,mBAAmBA,EAAK;AAAA,MACxB,iBAAiBA,EAAK;AAAA,MACtB,UAAUA,EAAK;AAAA,MACf,UACEV,IAAW,MAAMA,EAASU,EAAK,IAAIA,EAAK,MAAM,CAAC,CAACA,EAAK,iBAAiB,IAAI;AAAA,MAE5E,WAAAX;AAAA,MACA,gBAAAG;AAAA,MACA,UAAU,MAAMI,EAAaE,CAAK;AAAA,MAClC,UAAU,MAAMJ,KAAA,gBAAAA,EAAoBM;AAAA,IAAI;AAAA,IAnBnCF;AAAA,EAqBR,CAAA,GACH;AAEJ;"}
+{"version":3,"file":"FilesGrid.es.js","sources":["../../../../../../../src/containers/Feed/components/FilesGrid/FilesGrid.tsx"],"sourcesContent":["import * as Styled from './FilesGrid.styled'\nimport clsx from 'clsx'\nimport FileUploadCard, { FileUploadCardProps } from '../FileUploadCard'\nimport { isFilePreviewable } from '../FileUploadPreview'\nimport { useCallback } from 'react'\n\nexport interface FilesGridProps extends React.HTMLAttributes<HTMLDivElement> {\n  files?: any[]\n  activityId?: string\n  isCompact?: boolean\n  isEditing?: boolean\n  onRemove?: (id: string, name: string, isUnsavedAnnotation: boolean) => void\n  projectName: string\n  isDownloadable?: boolean\n  onExpand?: (data: { files: any[]; index: number; activityId: string }) => void\n  onAnnotationClick?: (file: any) => void\n  pt?: {\n    file?: Partial<FileUploadCardProps>\n  }\n}\n\nconst FilesGrid: React.FC<FilesGridProps> = ({\n  files = [],\n  activityId,\n  isCompact,\n  isEditing,\n  onRemove,\n  projectName,\n  isDownloadable,\n  onExpand,\n  onAnnotationClick,\n  pt,\n  ...props\n}) => {\n  if (!files.length) return null\n\n  const handleExpand = useCallback(\n    (index: number) => {\n      const filteredFiles = files.filter((file) => isFilePreviewable(file.mime, file.ext))\n      const updatedIndex = filteredFiles.findIndex((file) => file.id === files[index].id)\n      onExpand?.({ files: filteredFiles, index: updatedIndex, activityId: activityId || '' })\n    },\n    [onExpand],\n  )\n\n  return (\n    <Styled.Grid className={clsx({ compact: isCompact })} {...props}>\n      {files.map((file, index) => (\n        <FileUploadCard\n          key={index}\n          id={file.id || file.name}\n          name={file.name}\n          mime={file.mime || file.type}\n          size={file.size}\n          src={\n            file.unsavedAnnotation\n              ? file.thumbnail\n              : `/api/projects/${projectName}/files/${file.id}`\n          }\n          unsavedAnnotation={file.unsavedAnnotation}\n          savedAnnotation={file.annotation}\n          progress={file.progress}\n          onRemove={\n            onRemove ? () => onRemove(file.id, file.name, !!file.unsavedAnnotation) : undefined\n          }\n          isCompact={isCompact}\n          isDownloadable={isDownloadable}\n          onExpand={() => handleExpand(index)}\n          onJumpTo={() => onAnnotationClick?.(file)}\n          disableExpand={isEditing}\n          {...pt?.file}\n        />\n      ))}\n    </Styled.Grid>\n  )\n}\n\nexport default FilesGrid\n"],"names":["FilesGrid","files","activityId","isCompact","isEditing","onRemove","projectName","isDownloadable","onExpand","onAnnotationClick","pt","props","handleExpand","useCallback","index","filteredFiles","file","isFilePreviewable","updatedIndex","Styled.Grid","clsx","jsx","FileUploadCard"],"mappings":";;;;;;AAqBA,MAAMA,IAAsC,CAAC;AAAA,EAC3C,OAAAC,IAAQ,CAAC;AAAA,EACT,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,IAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACA,MAAA,CAACV,EAAM,OAAe,QAAA;AAE1B,QAAMW,IAAeC;AAAA,IACnB,CAACC,MAAkB;AACX,YAAAC,IAAgBd,EAAM,OAAO,CAACe,MAASC,EAAkBD,EAAK,MAAMA,EAAK,GAAG,CAAC,GAC7EE,IAAeH,EAAc,UAAU,CAACC,MAASA,EAAK,OAAOf,EAAMa,CAAK,EAAE,EAAE;AACvE,MAAAN,KAAA,QAAAA,EAAA,EAAE,OAAOO,GAAe,OAAOG,GAAc,YAAYhB,KAAc;IACpF;AAAA,IACA,CAACM,CAAQ;AAAA,EACX;AAEA,+BACGW,GAAA,EAAY,WAAWC,EAAK,EAAE,SAASjB,EAAU,CAAC,GAAI,GAAGQ,GACvD,YAAM,IAAI,CAACK,GAAMF,MAChBO,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MAEC,IAAIN,EAAK,MAAMA,EAAK;AAAA,MACpB,MAAMA,EAAK;AAAA,MACX,MAAMA,EAAK,QAAQA,EAAK;AAAA,MACxB,MAAMA,EAAK;AAAA,MACX,KACEA,EAAK,oBACDA,EAAK,YACL,iBAAiBV,CAAW,UAAUU,EAAK,EAAE;AAAA,MAEnD,mBAAmBA,EAAK;AAAA,MACxB,iBAAiBA,EAAK;AAAA,MACtB,UAAUA,EAAK;AAAA,MACf,UACEX,IAAW,MAAMA,EAASW,EAAK,IAAIA,EAAK,MAAM,CAAC,CAACA,EAAK,iBAAiB,IAAI;AAAA,MAE5E,WAAAb;AAAA,MACA,gBAAAI;AAAA,MACA,UAAU,MAAMK,EAAaE,CAAK;AAAA,MAClC,UAAU,MAAML,KAAA,gBAAAA,EAAoBO;AAAA,MACpC,eAAeZ;AAAA,MACd,GAAGM,KAAA,gBAAAA,EAAI;AAAA,IAAA;AAAA,IArBHI;AAAA,EAuBR,CAAA,GACH;AAEJ;"}

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

@@ -5,6 +5,7 @@
   padding: var(--padding-s);
 
   &.compact {
+    height: calc(100% + 80px);
     grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
     gap: var(--base-gap-small);
   }

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

@@ -1 +1 @@
-{"version":3,"file":"FilesGrid.styled.cjs.js","sources":["../../../../../../../src/containers/Feed/components/FilesGrid/FilesGrid.styled.ts"],"sourcesContent":["import styled from 'styled-components'\n\nexport const Grid = styled.div`\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));\n  gap: var(--base-gap-large);\n  padding: var(--padding-s);\n\n  &.compact {\n    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));\n    gap: var(--base-gap-small);\n  }\n\n  max-height: calc(\n    301px + var(--padding-s) + var(--padding-s) + var(--base-gap-large)+ var(--base-gap-large)\n  );\n  overflow: auto;\n`\n"],"names":["Grid","styled"],"mappings":"qHAEaA,EAAOC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}
+{"version":3,"file":"FilesGrid.styled.cjs.js","sources":["../../../../../../../src/containers/Feed/components/FilesGrid/FilesGrid.styled.ts"],"sourcesContent":["import styled from 'styled-components'\n\nexport const Grid = styled.div`\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));\n  gap: var(--base-gap-large);\n  padding: var(--padding-s);\n\n  &.compact {\n    height: calc(100% + 80px);\n    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));\n    gap: var(--base-gap-small);\n  }\n\n  max-height: calc(\n    301px + var(--padding-s) + var(--padding-s) + var(--base-gap-large)+ var(--base-gap-large)\n  );\n  overflow: auto;\n`\n"],"names":["Grid","styled"],"mappings":"qHAEaA,EAAOC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}

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

@@ -1,11 +1,12 @@
 import a from "styled-components";
-const p = a.div`
+const r = a.div`
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
   gap: var(--base-gap-large);
   padding: var(--padding-s);
 
   &.compact {
+    height: calc(100% + 80px);
     grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
     gap: var(--base-gap-small);
   }
@@ -16,6 +17,6 @@ const p = a.div`
   overflow: auto;
 `;
 export {
-  p as Grid
+  r as Grid
 };
 //# sourceMappingURL=FilesGrid.styled.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FilesGrid.styled.es.js","sources":["../../../../../../../src/containers/Feed/components/FilesGrid/FilesGrid.styled.ts"],"sourcesContent":["import styled from 'styled-components'\n\nexport const Grid = styled.div`\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));\n  gap: var(--base-gap-large);\n  padding: var(--padding-s);\n\n  &.compact {\n    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));\n    gap: var(--base-gap-small);\n  }\n\n  max-height: calc(\n    301px + var(--padding-s) + var(--padding-s) + var(--base-gap-large)+ var(--base-gap-large)\n  );\n  overflow: auto;\n`\n"],"names":["Grid","styled"],"mappings":";AAEO,MAAMA,IAAOC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"FilesGrid.styled.es.js","sources":["../../../../../../../src/containers/Feed/components/FilesGrid/FilesGrid.styled.ts"],"sourcesContent":["import styled from 'styled-components'\n\nexport const Grid = styled.div`\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));\n  gap: var(--base-gap-large);\n  padding: var(--padding-s);\n\n  &.compact {\n    height: calc(100% + 80px);\n    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));\n    gap: var(--base-gap-small);\n  }\n\n  max-height: calc(\n    301px + var(--padding-s) + var(--padding-s) + var(--base-gap-large)+ var(--base-gap-large)\n  );\n  overflow: auto;\n`\n"],"names":["Grid","styled"],"mappings":";AAEO,MAAMA,IAAOC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

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

@@ -1,2 +1,2 @@
-"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;
+"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  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"}
+{"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,45 +1,30 @@
-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
-        }
-      )
-    ]
-  }
-);
+import { j as o } from "../../../../../../_virtual/jsx-runtime.es.js";
+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 {
-  $ 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  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;"}
+{"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.map

@@ -1 +1 @@
-{"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"}
+{"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"}