@ynput/ayon-frontend-shared 0.2.31 → 0.2.33

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

@@ -1,5 +1,5 @@
-import o from "styled-components";
-const e = o.div`
+import o, { css as t } from "styled-components";
+const l = o.div`
   /* use grid tick for auto height transition */
   display: grid;
   height: 100%;
@@ -21,26 +21,50 @@ const e = o.div`
   &.isEditing {
     padding: 0;
   }
-`, n = o.div`
+`, a = (r, e, n) => r && t`
+    --background-color: ${n};
+    --button-color: ${r};
+    --button-color-secondary: ${e};
+    --border-color: ${r};
+  `, c = o.div`
+  /* VARS */
+  --background-color: var(--md-sys-color-surface-container);
+  --button-color: var(--md-sys-color-primary);
+  --button-color-secondary: var(--md-sys-color-surface-container-highest);
+  --border-color: var(--md-sys-color-outline-variant);
+  /* CATEGORY */
+  ${({ $categoryPrimary: r, $categorySecondary: e, $categoryTertiary: n }) => a(r, e, n)}
+
+  &.category {
+    button.comment {
+      color: var(--md-sys-color-on-surface);
+      &:hover {
+        background-color: var(--button-color);
+        filter: brightness(1.2);
+      }
+    }
+  }
+
   display: flex;
   flex-direction: column;
   position: relative;
 
-  background-color: var(--md-sys-color-surface-container);
-  border: 1px solid var(--md-sys-color-outline-variant);
+  background-color: var(--background-color);
+  border: 1px solid var(--border-color);
   &.isDropping.isOpen {
     border-color: var(--md-sys-color-primary);
   }
 
   border-radius: var(--border-radius-l);
   overflow: hidden;
+  transition: opacity 250ms 250ms, background-color 250ms, border-color 250ms;
 
   &.isOpen {
     /* box shadow */
     box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.2);
 
     .quill {
-      background-color: var(--md-sys-color-surface-container);
+      background-color: var(--background-color);
     }
   }
 
@@ -67,19 +91,18 @@ const e = o.div`
       white-space: nowrap;
       cursor: pointer;
 
-      color: var(--md-sys-color-primary);
-      background-color: var(--md-sys-color-surface-container-high);
+      color: var(--button-color);
+      background-color: var(--button-color-secondary);
 
       &:hover {
-        background-color: var(--md-sys-color-surface-container-high-hover);
+        background-color: color-mix(in srgb, var(--button-color-secondary) 85%, white);
       }
       &:active {
-        background-color: var(--md-sys-color-surface-container-high-active);
+        background-color: color-mix(in srgb, var(--button-color-secondary) 70%, white);
       }
     }
   }
 
-
   /* container styles reset */
   .ql-container.ql-snow {
     border: none;
@@ -227,51 +250,47 @@ const e = o.div`
 
   &.isSubmitting {
     opacity: 0.3;
-    transition: opacity 250ms 250ms;
   }
 
   /* toolbar styles */
   .ql-toolbar.ql-snow {
     border: none;
-    background-color: var(--md-sys-color-surface-container);
+    background-color: var(--background-color);
     border-bottom: 1px solid var(--md-sys-color-surface-container-hover);
     padding: var(--padding-s);
     display: flex;
+    justify-content: flex-end;
     height: unset;
     width: unset;
 
     .ql-formats {
       height: 32px;
-      margin-right: 8px;
-      padding-right: 8px;
-      border-right: 1px solid var(--md-sys-color-surface-container-hover);
+      margin-left: 8px;
+      margin-right: 0;
+      padding-left: 8px;
+      border-left: 1px solid var(--md-sys-color-surface-container-hover);
       display: flex;
       gap: 2px;
 
-      /* remove border for last child */
-      &:last-child {
-        border-right: none;
-      }
-    }
-
-    button {
-      float: none;
-      padding: 6px;
-      border-radius: var(--border-radius-m);
-      height: 32px;
-      width: 32px;
-
-      /* highlight when action */
-      &.ql-active {
-        background-color: var(--md-sys-color-secondary-container);
-        .icon {
-          color: var(--md-sys-color-on-secondary-container);
+      button {
+        float: none;
+        padding: 6px;
+        border-radius: var(--border-radius-m);
+        height: 32px;
+        width: 32px;
+
+        /* highlight when action */
+        &.ql-active {
+          background-color: var(--button-color-secondary);
+          .icon {
+            color: var(--button-color);
+          }
         }
       }
     }
 
     button:hover {
-      background-color: var(--md-sys-color-surface-container-highest-hover);
+      background-color: var(--button-color-secondary);
     }
   }
 
@@ -295,12 +314,12 @@ const e = o.div`
       }
     }
   }
-`, i = o.footer`
+`, s = o.footer`
   display: flex;
   justify-content: space-between;
   padding: var(--padding-m);
   border-top: 1px solid var(--md-sys-color-surface-container-hover);
-  background-color: var(--md-sys-color-surface-container);
+  background-color: var(--background-color);
   z-index: 100;
 
   /* remove save button icon */
@@ -309,14 +328,23 @@ const e = o.div`
     .icon {
       display: none;
     }
+    background-color: var(--button-color);
   }
-`, a = o.div`
+`, d = o.div`
   display: flex;
   gap: var(--base-gap-small);
-`, t = o.div`
+
+  button {
+    &.text {
+      &:hover {
+        background-color: var(--button-color-secondary);
+      }
+    }
+  }
+`, p = o.div`
   position: fixed;
   visibility: hidden;
-`, s = o.div`
+`, b = o.div`
   position: absolute;
   inset: 0;
   user-select: none;
@@ -340,19 +368,20 @@ const e = o.div`
   .icon {
     font-size: 40px;
   }
-`, d = o.span`
+`, u = o.span`
   padding: 12px 15px;
   /* italic */
   font-style: italic;
   opacity: 0.4;
 `;
 export {
-  e as AutoHeight,
-  a as Buttons,
-  n as Comment,
-  s as Dropzone,
-  i as Footer,
-  t as Markdown,
-  d as Placeholder
+  l as AutoHeight,
+  d as Buttons,
+  c as Comment,
+  b as Dropzone,
+  s as Footer,
+  p as Markdown,
+  u as Placeholder,
+  a as categoryColorCss
 };
 //# sourceMappingURL=CommentInput.styled.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CommentInput.styled.es.js","sources":["../../../../../../../src/containers/Feed/components/CommentInput/CommentInput.styled.ts"],"sourcesContent":["import styled from 'styled-components'\n\nexport const AutoHeight = styled.div`\n  /* use grid tick for auto height transition */\n  display: grid;\n  height: 100%;\n  /* transition: translate 0.1s, margin-top 0.1s; */\n  position: relative;\n\n  /* when closed default */\n  translate: 0 50px;\n  margin-top: -50px;\n\n  /* when open */\n  &.isOpen {\n    translate: 0 0;\n    margin-top: 0;\n  }\n\n  padding: 0 4px 4px 4px;\n  /* when editing */\n  &.isEditing {\n    padding: 0;\n  }\n`\n\nexport const Comment = styled.div`\n  display: flex;\n  flex-direction: column;\n  position: relative;\n\n  background-color: var(--md-sys-color-surface-container);\n  border: 1px solid var(--md-sys-color-outline-variant);\n  &.isDropping.isOpen {\n    border-color: var(--md-sys-color-primary);\n  }\n\n  border-radius: var(--border-radius-l);\n  overflow: hidden;\n\n  &.isOpen {\n    /* box shadow */\n    box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.2);\n\n    .quill {\n      background-color: var(--md-sys-color-surface-container);\n    }\n  }\n\n  .ql-editor.ql-blank::before {\n    color: var(--md-sys-color-on-surface);\n    opacity: 0.25;\n  }\n\n  .ql-editor {\n    ol {\n      padding-left: 0;\n    }\n  }\n\n  /* custom mention styles */\n  .ql-editor {\n    .mention {\n      border-radius: var(--border-radius-m);\n      user-select: none;\n      padding: 0 4px;\n      /* remove underline */\n      text-decoration: none;\n\n      white-space: nowrap;\n      cursor: pointer;\n\n      color: var(--md-sys-color-primary);\n      background-color: var(--md-sys-color-surface-container-high);\n\n      &:hover {\n        background-color: var(--md-sys-color-surface-container-high-hover);\n      }\n      &:active {\n        background-color: var(--md-sys-color-surface-container-high-active);\n      }\n    }\n  }\n\n\n  /* container styles reset */\n  .ql-container.ql-snow {\n    border: none;\n    /* takes into account the top toolbar */\n    height: calc(100% - 41px);\n\n    .ql-editor {\n      max-height: 259px !important;\n\n      /* code block */\n      .ql-code-block-container {\n        background-color: var(--md-sys-color-surface-container-lowest);\n        padding: var(--padding-m);\n        border-radius: var(--border-radius-m);\n      }\n\n      .ql-code-block-container .ql-code-block,\n      .ql-code-block-container .ql-code-block *,\n      .ql-code-block-container * {\n        font-family: monospace;\n        font-size: var(--md-sys-typescale-body-small-font-size);\n      }\n\n      a {\n        &::before,\n        &::after {\n          display: none;\n        }\n\n        color: var(--md-sys-color-primary);\n      }\n\n      a[href^='@'] {\n        text-decoration: none;\n        color: var(--md-sys-color-primary);\n      }\n\n      strong {\n        em,\n        u {\n          font-weight: 800;\n        }\n      }\n    }\n\n    /* link popup */\n    .ql-tooltip {\n      &.ql-hidden {\n        display: none;\n      }\n\n      left: 1px !important;\n      top: -29px !important;\n\n      width: 100%;\n\n      box-shadow: none;\n      background-color: var(--md-sys-color-surface-container-lowest);\n      border-color: var(--md-sys-color-surface-container-low);\n      border-radius: var(--border-radius-l);\n      padding: 4px;\n      overflow: hidden;\n\n      display: flex;\n      align-items: center;\n\n      .ql-preview {\n        flex: 1;\n        max-width: unset;\n      }\n\n      input {\n        flex: 1;\n        border: none;\n        background-color: var(--md-sys-color-surface-container-lowest);\n\n        &:focus-visible {\n          outline: none;\n        }\n      }\n\n      a {\n        color: var(--md-sys-color-primary);\n      }\n\n      /* remove before text */\n      /* remove save button */\n      &::before,\n      .ql-action {\n        display: none;\n      }\n\n      .ql-remove {\n        color: var(--md-sys-color-on-surface-variant);\n        margin-right: 4px;\n      }\n    }\n  }\n\n  /* CLOSED */\n  &.isClosed {\n    cursor: pointer;\n    .ql-editor > * {\n      cursor: pointer !important;\n    }\n    &:hover:not(.disabled) {\n      background-color: var(--md-sys-color-surface-container-high);\n    }\n\n    .ql-container.ql-snow {\n      padding-bottom: 0;\n      height: 44px;\n\n      .ql-editor {\n        overflow: hidden;\n      }\n    }\n\n    /* hide toolbar */\n    .ql-toolbar.ql-snow {\n      height: 0;\n      padding: 0;\n      margin: 0;\n      border-width: 0;\n      opacity: 0;\n      pointer-events: none;\n      overflow: hidden;\n    }\n  }\n\n  &.disabled {\n    cursor: default;\n    pointer-events: none;\n    user-select: none;\n    border-color: var(--md-sys-color-surface-container-lowest);\n    background-color: var(--md-sys-color-surface-container-lowest);\n  }\n\n  &.isLoading,\n  &.isSubmitting {\n    cursor: default;\n    pointer-events: none;\n    user-select: none;\n  }\n\n  &.isSubmitting {\n    opacity: 0.3;\n    transition: opacity 250ms 250ms;\n  }\n\n  /* toolbar styles */\n  .ql-toolbar.ql-snow {\n    border: none;\n    background-color: var(--md-sys-color-surface-container);\n    border-bottom: 1px solid var(--md-sys-color-surface-container-hover);\n    padding: var(--padding-s);\n    display: flex;\n    height: unset;\n    width: unset;\n\n    .ql-formats {\n      height: 32px;\n      margin-right: 8px;\n      padding-right: 8px;\n      border-right: 1px solid var(--md-sys-color-surface-container-hover);\n      display: flex;\n      gap: 2px;\n\n      /* remove border for last child */\n      &:last-child {\n        border-right: none;\n      }\n    }\n\n    button {\n      float: none;\n      padding: 6px;\n      border-radius: var(--border-radius-m);\n      height: 32px;\n      width: 32px;\n\n      /* highlight when action */\n      &.ql-active {\n        background-color: var(--md-sys-color-secondary-container);\n        .icon {\n          color: var(--md-sys-color-on-secondary-container);\n        }\n      }\n    }\n\n    button:hover {\n      background-color: var(--md-sys-color-surface-container-highest-hover);\n    }\n  }\n\n  /* EDITING */\n  &.isEditing {\n    /* remove box shadow */\n    box-shadow: none;\n    /* remove outline */\n    outline: none;\n\n    /* hide toolbar */\n    .ql-toolbar.ql-snow {\n      display: none;\n    }\n\n    .ql-container.ql-snow {\n      height: 100%;\n\n      .ql-editor {\n        padding: 8px;\n      }\n    }\n  }\n`\n\nexport const Footer = styled.footer`\n  display: flex;\n  justify-content: space-between;\n  padding: var(--padding-m);\n  border-top: 1px solid var(--md-sys-color-surface-container-hover);\n  background-color: var(--md-sys-color-surface-container);\n  z-index: 100;\n\n  /* remove save button icon */\n  .comment {\n    min-width: 75px;\n    .icon {\n      display: none;\n    }\n  }\n`\n\nexport const Buttons = styled.div`\n  display: flex;\n  gap: var(--base-gap-small);\n`\n\nexport const Markdown = styled.div`\n  position: fixed;\n  visibility: hidden;\n`\n\nexport const Dropzone = styled.div`\n  position: absolute;\n  inset: 0;\n  user-select: none;\n  pointer-events: none;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  opacity: 0;\n  transition: opacity 0.2s;\n\n  &.show {\n    opacity: 1;\n  }\n\n  background-color: rgba(0, 0, 0, 0.5);\n\n  z-index: 300;\n\n  .icon {\n    font-size: 40px;\n  }\n`\n\nexport const Placeholder = styled.span`\n  padding: 12px 15px;\n  /* italic */\n  font-style: italic;\n  opacity: 0.4;\n`\n"],"names":["AutoHeight","styled","Comment","Footer","Buttons","Markdown","Dropzone","Placeholder"],"mappings":";AAEO,MAAMA,IAAaC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAwBpBC,IAAUD,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;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;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;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;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;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;AAAA;AAAA;AAAA;AAAA,GAoRjBE,IAASF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAiBhBG,IAAUH,EAAO;AAAA;AAAA;AAAA,GAKjBI,IAAWJ,EAAO;AAAA;AAAA;AAAA,GAKlBK,IAAWL,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,GA0BlBM,IAAcN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"CommentInput.styled.es.js","sources":["../../../../../../../src/containers/Feed/components/CommentInput/CommentInput.styled.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\n\nexport const AutoHeight = styled.div`\n  /* use grid tick for auto height transition */\n  display: grid;\n  height: 100%;\n  /* transition: translate 0.1s, margin-top 0.1s; */\n  position: relative;\n\n  /* when closed default */\n  translate: 0 50px;\n  margin-top: -50px;\n\n  /* when open */\n  &.isOpen {\n    translate: 0 0;\n    margin-top: 0;\n  }\n\n  padding: 0 4px 4px 4px;\n  /* when editing */\n  &.isEditing {\n    padding: 0;\n  }\n`\n\nexport type CommentProps = {\n  $categoryPrimary?: string\n  $categorySecondary?: string\n  $categoryTertiary?: string\n}\n\n// Reusable function for category color CSS\nexport const categoryColorCss = (\n  $categoryPrimary?: string,\n  $categorySecondary?: string,\n  $categoryTertiary?: string,\n) =>\n  $categoryPrimary &&\n  css`\n    --background-color: ${$categoryTertiary};\n    --button-color: ${$categoryPrimary};\n    --button-color-secondary: ${$categorySecondary};\n    --border-color: ${$categoryPrimary};\n  `\n\nexport const Comment = styled.div<CommentProps>`\n  /* VARS */\n  --background-color: var(--md-sys-color-surface-container);\n  --button-color: var(--md-sys-color-primary);\n  --button-color-secondary: var(--md-sys-color-surface-container-highest);\n  --border-color: var(--md-sys-color-outline-variant);\n  /* CATEGORY */\n  ${({ $categoryPrimary, $categorySecondary, $categoryTertiary }) =>\n    categoryColorCss($categoryPrimary, $categorySecondary, $categoryTertiary)}\n\n  &.category {\n    button.comment {\n      color: var(--md-sys-color-on-surface);\n      &:hover {\n        background-color: var(--button-color);\n        filter: brightness(1.2);\n      }\n    }\n  }\n\n  display: flex;\n  flex-direction: column;\n  position: relative;\n\n  background-color: var(--background-color);\n  border: 1px solid var(--border-color);\n  &.isDropping.isOpen {\n    border-color: var(--md-sys-color-primary);\n  }\n\n  border-radius: var(--border-radius-l);\n  overflow: hidden;\n  transition: opacity 250ms 250ms, background-color 250ms, border-color 250ms;\n\n  &.isOpen {\n    /* box shadow */\n    box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.2);\n\n    .quill {\n      background-color: var(--background-color);\n    }\n  }\n\n  .ql-editor.ql-blank::before {\n    color: var(--md-sys-color-on-surface);\n    opacity: 0.25;\n  }\n\n  .ql-editor {\n    ol {\n      padding-left: 0;\n    }\n  }\n\n  /* custom mention styles */\n  .ql-editor {\n    .mention {\n      border-radius: var(--border-radius-m);\n      user-select: none;\n      padding: 0 4px;\n      /* remove underline */\n      text-decoration: none;\n\n      white-space: nowrap;\n      cursor: pointer;\n\n      color: var(--button-color);\n      background-color: var(--button-color-secondary);\n\n      &:hover {\n        background-color: color-mix(in srgb, var(--button-color-secondary) 85%, white);\n      }\n      &:active {\n        background-color: color-mix(in srgb, var(--button-color-secondary) 70%, white);\n      }\n    }\n  }\n\n  /* container styles reset */\n  .ql-container.ql-snow {\n    border: none;\n    /* takes into account the top toolbar */\n    height: calc(100% - 41px);\n\n    .ql-editor {\n      max-height: 259px !important;\n\n      /* code block */\n      .ql-code-block-container {\n        background-color: var(--md-sys-color-surface-container-lowest);\n        padding: var(--padding-m);\n        border-radius: var(--border-radius-m);\n      }\n\n      .ql-code-block-container .ql-code-block,\n      .ql-code-block-container .ql-code-block *,\n      .ql-code-block-container * {\n        font-family: monospace;\n        font-size: var(--md-sys-typescale-body-small-font-size);\n      }\n\n      a {\n        &::before,\n        &::after {\n          display: none;\n        }\n\n        color: var(--md-sys-color-primary);\n      }\n\n      a[href^='@'] {\n        text-decoration: none;\n        color: var(--md-sys-color-primary);\n      }\n\n      strong {\n        em,\n        u {\n          font-weight: 800;\n        }\n      }\n    }\n\n    /* link popup */\n    .ql-tooltip {\n      &.ql-hidden {\n        display: none;\n      }\n\n      left: 1px !important;\n      top: -29px !important;\n\n      width: 100%;\n\n      box-shadow: none;\n      background-color: var(--md-sys-color-surface-container-lowest);\n      border-color: var(--md-sys-color-surface-container-low);\n      border-radius: var(--border-radius-l);\n      padding: 4px;\n      overflow: hidden;\n\n      display: flex;\n      align-items: center;\n\n      .ql-preview {\n        flex: 1;\n        max-width: unset;\n      }\n\n      input {\n        flex: 1;\n        border: none;\n        background-color: var(--md-sys-color-surface-container-lowest);\n\n        &:focus-visible {\n          outline: none;\n        }\n      }\n\n      a {\n        color: var(--md-sys-color-primary);\n      }\n\n      /* remove before text */\n      /* remove save button */\n      &::before,\n      .ql-action {\n        display: none;\n      }\n\n      .ql-remove {\n        color: var(--md-sys-color-on-surface-variant);\n        margin-right: 4px;\n      }\n    }\n  }\n\n  /* CLOSED */\n  &.isClosed {\n    cursor: pointer;\n    .ql-editor > * {\n      cursor: pointer !important;\n    }\n    &:hover:not(.disabled) {\n      background-color: var(--md-sys-color-surface-container-high);\n    }\n\n    .ql-container.ql-snow {\n      padding-bottom: 0;\n      height: 44px;\n\n      .ql-editor {\n        overflow: hidden;\n      }\n    }\n\n    /* hide toolbar */\n    .ql-toolbar.ql-snow {\n      height: 0;\n      padding: 0;\n      margin: 0;\n      border-width: 0;\n      opacity: 0;\n      pointer-events: none;\n      overflow: hidden;\n    }\n  }\n\n  &.disabled {\n    cursor: default;\n    pointer-events: none;\n    user-select: none;\n    border-color: var(--md-sys-color-surface-container-lowest);\n    background-color: var(--md-sys-color-surface-container-lowest);\n  }\n\n  &.isLoading,\n  &.isSubmitting {\n    cursor: default;\n    pointer-events: none;\n    user-select: none;\n  }\n\n  &.isSubmitting {\n    opacity: 0.3;\n  }\n\n  /* toolbar styles */\n  .ql-toolbar.ql-snow {\n    border: none;\n    background-color: var(--background-color);\n    border-bottom: 1px solid var(--md-sys-color-surface-container-hover);\n    padding: var(--padding-s);\n    display: flex;\n    justify-content: flex-end;\n    height: unset;\n    width: unset;\n\n    .ql-formats {\n      height: 32px;\n      margin-left: 8px;\n      margin-right: 0;\n      padding-left: 8px;\n      border-left: 1px solid var(--md-sys-color-surface-container-hover);\n      display: flex;\n      gap: 2px;\n\n      button {\n        float: none;\n        padding: 6px;\n        border-radius: var(--border-radius-m);\n        height: 32px;\n        width: 32px;\n\n        /* highlight when action */\n        &.ql-active {\n          background-color: var(--button-color-secondary);\n          .icon {\n            color: var(--button-color);\n          }\n        }\n      }\n    }\n\n    button:hover {\n      background-color: var(--button-color-secondary);\n    }\n  }\n\n  /* EDITING */\n  &.isEditing {\n    /* remove box shadow */\n    box-shadow: none;\n    /* remove outline */\n    outline: none;\n\n    /* hide toolbar */\n    .ql-toolbar.ql-snow {\n      display: none;\n    }\n\n    .ql-container.ql-snow {\n      height: 100%;\n\n      .ql-editor {\n        padding: 8px;\n      }\n    }\n  }\n`\n\nexport const Footer = styled.footer`\n  display: flex;\n  justify-content: space-between;\n  padding: var(--padding-m);\n  border-top: 1px solid var(--md-sys-color-surface-container-hover);\n  background-color: var(--background-color);\n  z-index: 100;\n\n  /* remove save button icon */\n  .comment {\n    min-width: 75px;\n    .icon {\n      display: none;\n    }\n    background-color: var(--button-color);\n  }\n`\n\nexport const Buttons = styled.div`\n  display: flex;\n  gap: var(--base-gap-small);\n\n  button {\n    &.text {\n      &:hover {\n        background-color: var(--button-color-secondary);\n      }\n    }\n  }\n`\n\nexport const Markdown = styled.div`\n  position: fixed;\n  visibility: hidden;\n`\n\nexport const Dropzone = styled.div`\n  position: absolute;\n  inset: 0;\n  user-select: none;\n  pointer-events: none;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  opacity: 0;\n  transition: opacity 0.2s;\n\n  &.show {\n    opacity: 1;\n  }\n\n  background-color: rgba(0, 0, 0, 0.5);\n\n  z-index: 300;\n\n  .icon {\n    font-size: 40px;\n  }\n`\n\nexport const Placeholder = styled.span`\n  padding: 12px 15px;\n  /* italic */\n  font-style: italic;\n  opacity: 0.4;\n`\n"],"names":["AutoHeight","styled","categoryColorCss","$categoryPrimary","$categorySecondary","$categoryTertiary","css","Comment","Footer","Buttons","Markdown","Dropzone","Placeholder"],"mappings":";AAEO,MAAMA,IAAaC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA+BpBC,IAAmB,CAC9BC,GACAC,GACAC,MAEAF,KACAG;AAAA,0BACwBD,CAAiB;AAAA,sBACrBF,CAAgB;AAAA,gCACNC,CAAkB;AAAA,sBAC5BD,CAAgB;AAAA,KAGzBI,IAAUN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAO1B,CAAC,EAAE,kBAAAE,GAAkB,oBAAAC,GAAoB,mBAAAC,QACzCH,EAAiBC,GAAkBC,GAAoBC,CAAiB,CAAC;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;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;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;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;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;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA2RhEG,IAASP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAkBhBQ,IAAUR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAajBS,IAAWT,EAAO;AAAA;AAAA;AAAA,GAKlBU,IAAWV,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,GA0BlBW,IAAcX,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/shared/src/containers/Feed/components/CommentInput/hooks/useBlendedCategoryColor.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react");require("lodash");require("react-toastify");require("uuid");const n=require("../../../../../util/colorUtils.cjs.js");require("../../../../../util/pubsub.cjs.js");const a=e=>c.useMemo(()=>{if(!e)return{primary:void 0,secondary:void 0};const r=getComputedStyle(document.documentElement),t=r.getPropertyValue("--md-sys-color-surface-container").trim(),o=r.getPropertyValue("--md-sys-color-surface-container-high").trim(),s=t||e,d=o||e,u=n.blendCategoryColor(e,s,.1)||e,i=n.blendCategoryColor(e,d,.2)||e;return{primary:u,secondary:i}},[e]);exports.useBlendedCategoryColor=a;
+//# sourceMappingURL=useBlendedCategoryColor.cjs.js.map

package/dist/shared/src/containers/Feed/components/CommentInput/hooks/useBlendedCategoryColor.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBlendedCategoryColor.cjs.js","sources":["../../../../../../../../src/containers/Feed/components/CommentInput/hooks/useBlendedCategoryColor.ts"],"sourcesContent":["import { useMemo } from 'react'\nimport { blendCategoryColor } from '@shared/util'\n\n/**\n * Custom hook to compute blended category color with surface container background\n * Reads the CSS variable value at runtime and blends the category color at 10% opacity\n */\nexport const useBlendedCategoryColor = (categoryColor: string | undefined) => {\n  return useMemo(() => {\n    if (!categoryColor) {\n      return { primary: undefined, secondary: undefined }\n    }\n    const rootStyles = getComputedStyle(document.documentElement)\n    const surfaceContainer = rootStyles.getPropertyValue('--md-sys-color-surface-container').trim()\n    const surfaceSecondary = rootStyles\n      .getPropertyValue('--md-sys-color-surface-container-high')\n      .trim()\n\n    // Fallbacks if CSS vars are missing\n    const basePrimary = surfaceContainer || categoryColor\n    const baseSecondary = surfaceSecondary || categoryColor\n\n    // Blend category color at 0.1 opacity over primary, 0.5 over secondary\n    const blendedPrimary = blendCategoryColor(categoryColor, basePrimary, 0.1) || categoryColor\n    const blendedSecondary = blendCategoryColor(categoryColor, baseSecondary, 0.2) || categoryColor\n\n    return {\n      primary: blendedPrimary,\n      secondary: blendedSecondary,\n    }\n  }, [categoryColor])\n}\n"],"names":["useBlendedCategoryColor","categoryColor","useMemo","rootStyles","surfaceContainer","surfaceSecondary","basePrimary","baseSecondary","blendedPrimary","blendCategoryColor","blendedSecondary"],"mappings":"2QAOa,MAAAA,EAA2BC,GAC/BC,UAAQ,IAAM,CACnB,GAAI,CAACD,EACH,MAAO,CAAE,QAAS,OAAW,UAAW,MAAU,EAE9C,MAAAE,EAAa,iBAAiB,SAAS,eAAe,EACtDC,EAAmBD,EAAW,iBAAiB,kCAAkC,EAAE,KAAK,EACxFE,EAAmBF,EACtB,iBAAiB,uCAAuC,EACxD,KAAK,EAGFG,EAAcF,GAAoBH,EAClCM,EAAgBF,GAAoBJ,EAGpCO,EAAiBC,EAAAA,mBAAmBR,EAAeK,EAAa,EAAG,GAAKL,EACxES,EAAmBD,EAAAA,mBAAmBR,EAAeM,EAAe,EAAG,GAAKN,EAE3E,MAAA,CACL,QAASO,EACT,UAAWE,CACb,CAAA,EACC,CAACT,CAAa,CAAC"}

package/dist/shared/src/containers/Feed/components/CommentInput/hooks/useBlendedCategoryColor.es.js

@@ -0,0 +1,19 @@
+import { useMemo as c } from "react";
+import "lodash";
+import "react-toastify";
+import "uuid";
+import { blendCategoryColor as t } from "../../../../../util/colorUtils.es.js";
+import "../../../../../util/pubsub.es.js";
+const b = (e) => c(() => {
+  if (!e)
+    return { primary: void 0, secondary: void 0 };
+  const r = getComputedStyle(document.documentElement), n = r.getPropertyValue("--md-sys-color-surface-container").trim(), o = r.getPropertyValue("--md-sys-color-surface-container-high").trim(), s = n || e, m = o || e, d = t(e, s, 0.1) || e, i = t(e, m, 0.2) || e;
+  return {
+    primary: d,
+    secondary: i
+  };
+}, [e]);
+export {
+  b as useBlendedCategoryColor
+};
+//# sourceMappingURL=useBlendedCategoryColor.es.js.map

package/dist/shared/src/containers/Feed/components/CommentInput/hooks/useBlendedCategoryColor.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBlendedCategoryColor.es.js","sources":["../../../../../../../../src/containers/Feed/components/CommentInput/hooks/useBlendedCategoryColor.ts"],"sourcesContent":["import { useMemo } from 'react'\nimport { blendCategoryColor } from '@shared/util'\n\n/**\n * Custom hook to compute blended category color with surface container background\n * Reads the CSS variable value at runtime and blends the category color at 10% opacity\n */\nexport const useBlendedCategoryColor = (categoryColor: string | undefined) => {\n  return useMemo(() => {\n    if (!categoryColor) {\n      return { primary: undefined, secondary: undefined }\n    }\n    const rootStyles = getComputedStyle(document.documentElement)\n    const surfaceContainer = rootStyles.getPropertyValue('--md-sys-color-surface-container').trim()\n    const surfaceSecondary = rootStyles\n      .getPropertyValue('--md-sys-color-surface-container-high')\n      .trim()\n\n    // Fallbacks if CSS vars are missing\n    const basePrimary = surfaceContainer || categoryColor\n    const baseSecondary = surfaceSecondary || categoryColor\n\n    // Blend category color at 0.1 opacity over primary, 0.5 over secondary\n    const blendedPrimary = blendCategoryColor(categoryColor, basePrimary, 0.1) || categoryColor\n    const blendedSecondary = blendCategoryColor(categoryColor, baseSecondary, 0.2) || categoryColor\n\n    return {\n      primary: blendedPrimary,\n      secondary: blendedSecondary,\n    }\n  }, [categoryColor])\n}\n"],"names":["useBlendedCategoryColor","categoryColor","useMemo","rootStyles","surfaceContainer","surfaceSecondary","basePrimary","baseSecondary","blendedPrimary","blendCategoryColor","blendedSecondary"],"mappings":";;;;;;AAOa,MAAAA,IAA0B,CAACC,MAC/BC,EAAQ,MAAM;AACnB,MAAI,CAACD;AACH,WAAO,EAAE,SAAS,QAAW,WAAW,OAAU;AAE9C,QAAAE,IAAa,iBAAiB,SAAS,eAAe,GACtDC,IAAmBD,EAAW,iBAAiB,kCAAkC,EAAE,KAAK,GACxFE,IAAmBF,EACtB,iBAAiB,uCAAuC,EACxD,KAAK,GAGFG,IAAcF,KAAoBH,GAClCM,IAAgBF,KAAoBJ,GAGpCO,IAAiBC,EAAmBR,GAAeK,GAAa,GAAG,KAAKL,GACxES,IAAmBD,EAAmBR,GAAeM,GAAe,GAAG,KAAKN;AAE3E,SAAA;AAAA,IACL,SAASO;AAAA,IACT,WAAWE;AAAA,EACb;AAAA,GACC,CAACT,CAAa,CAAC;"}

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

@@ -1,2 +1,2 @@
-"use strict";const t=require("../../../../../../_virtual/jsx-runtime.cjs.js"),c=require("./Reaction.cjs.js"),n=require("./Reactions.styled.cjs.js"),r=({reactions:i,changeHandler:e})=>t.jsxRuntimeExports.jsx(n.ActiveReactionsList,{children:i.map(s=>t.jsxRuntimeExports.jsx(c,{reaction:s,isActive:s.isActive,onClick:()=>{e({...s,isActive:!s.isActive})}},s.type))});module.exports=r;
+"use strict";const t=require("../../../../../../_virtual/jsx-runtime.cjs.js"),x=require("./Reaction.cjs.js"),o=require("./Reactions.styled.cjs.js"),u=({reactions:i,changeHandler:e,categoryPrimary:c,categorySecondary:n,categoryTertiary:r})=>t.jsxRuntimeExports.jsx(o.ActiveReactionsList,{children:i.map(s=>t.jsxRuntimeExports.jsx(x,{reaction:s,isActive:s.isActive,onClick:()=>{e({...s,isActive:!s.isActive})},categoryPrimary:c,categorySecondary:n,categoryTertiary:r},s.type))});module.exports=u;
 //# sourceMappingURL=ExistingReactions.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ExistingReactions.cjs.js","sources":["../../../../../../../src/containers/Feed/components/ReactionContainer/ExistingReactions.tsx"],"sourcesContent":["import ReactionComponent from './Reaction'\nimport * as Styled from './Reactions.styled'\nimport { Reaction } from './types'\n\ntype Props = {\n  reactions: Reaction[]\n  changeHandler: (reaction: Reaction) => void\n}\n\nconst ExistingReactions = ({ reactions, changeHandler }: Props) => {\n  return (\n    <Styled.ActiveReactionsList>\n      {reactions.map((reaction) => (\n        <ReactionComponent\n          key={reaction.type}\n          reaction={reaction}\n          isActive={reaction.isActive}\n          onClick={() => {\n            changeHandler({ ...reaction, isActive: !reaction.isActive })\n          }}\n        />\n      ))}\n    </Styled.ActiveReactionsList>\n  )\n}\n\nexport default ExistingReactions\n"],"names":["ExistingReactions","reactions","changeHandler","Styled.ActiveReactionsList","reaction","jsx","ReactionComponent"],"mappings":"oJASMA,EAAoB,CAAC,CAAE,UAAAC,EAAW,cAAAC,6BAEnCC,EAAAA,oBAAA,CACE,SAAUF,EAAA,IAAKG,GACdC,EAAA,kBAAA,IAACC,EAAA,CAEC,SAAAF,EACA,SAAUA,EAAS,SACnB,QAAS,IAAM,CACbF,EAAc,CAAE,GAAGE,EAAU,SAAU,CAACA,EAAS,SAAU,CAAA,CAC7D,EALKA,EAAS,IAOjB,CAAA,EACH"}
+{"version":3,"file":"ExistingReactions.cjs.js","sources":["../../../../../../../src/containers/Feed/components/ReactionContainer/ExistingReactions.tsx"],"sourcesContent":["import ReactionComponent from './Reaction'\nimport * as Styled from './Reactions.styled'\nimport { Reaction } from './types'\n\ntype Props = {\n  reactions: Reaction[]\n  changeHandler: (reaction: Reaction) => void\n  categoryPrimary?: string\n  categorySecondary?: string\n  categoryTertiary?: string\n}\n\nconst ExistingReactions = ({\n  reactions,\n  changeHandler,\n  categoryPrimary,\n  categorySecondary,\n  categoryTertiary,\n}: Props) => {\n  return (\n    <Styled.ActiveReactionsList>\n      {reactions.map((reaction) => (\n        <ReactionComponent\n          key={reaction.type}\n          reaction={reaction}\n          isActive={reaction.isActive}\n          onClick={() => {\n            changeHandler({ ...reaction, isActive: !reaction.isActive })\n          }}\n          categoryPrimary={categoryPrimary}\n          categorySecondary={categorySecondary}\n          categoryTertiary={categoryTertiary}\n        />\n      ))}\n    </Styled.ActiveReactionsList>\n  )\n}\n\nexport default ExistingReactions\n"],"names":["ExistingReactions","reactions","changeHandler","categoryPrimary","categorySecondary","categoryTertiary","Styled.ActiveReactionsList","reaction","jsx","ReactionComponent"],"mappings":"oJAYMA,EAAoB,CAAC,CACzB,UAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,kBAAAC,EACA,iBAAAC,CACF,4BAEKC,EAAAA,oBAAA,CACE,SAAUL,EAAA,IAAKM,GACdC,EAAA,kBAAA,IAACC,EAAA,CAEC,SAAAF,EACA,SAAUA,EAAS,SACnB,QAAS,IAAM,CACbL,EAAc,CAAE,GAAGK,EAAU,SAAU,CAACA,EAAS,SAAU,CAC7D,EACA,gBAAAJ,EACA,kBAAAC,EACA,iBAAAC,CAAA,EARKE,EAAS,IAUjB,CAAA,EACH"}

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

@@ -1,18 +1,27 @@
 import { j as t } from "../../../../../../_virtual/jsx-runtime.es.js";
-import o from "./Reaction.es.js";
-import { ActiveReactionsList as m } from "./Reactions.styled.es.js";
-const x = ({ reactions: s, changeHandler: e }) => /* @__PURE__ */ t.jsx(m, { children: s.map((i) => /* @__PURE__ */ t.jsx(
-  o,
+import p from "./Reaction.es.js";
+import { ActiveReactionsList as r } from "./Reactions.styled.es.js";
+const A = ({
+  reactions: s,
+  changeHandler: e,
+  categoryPrimary: o,
+  categorySecondary: m,
+  categoryTertiary: c
+}) => /* @__PURE__ */ t.jsx(r, { children: s.map((i) => /* @__PURE__ */ t.jsx(
+  p,
   {
     reaction: i,
     isActive: i.isActive,
     onClick: () => {
       e({ ...i, isActive: !i.isActive });
-    }
+    },
+    categoryPrimary: o,
+    categorySecondary: m,
+    categoryTertiary: c
   },
   i.type
 )) });
 export {
-  x as default
+  A as default
 };
 //# sourceMappingURL=ExistingReactions.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ExistingReactions.es.js","sources":["../../../../../../../src/containers/Feed/components/ReactionContainer/ExistingReactions.tsx"],"sourcesContent":["import ReactionComponent from './Reaction'\nimport * as Styled from './Reactions.styled'\nimport { Reaction } from './types'\n\ntype Props = {\n  reactions: Reaction[]\n  changeHandler: (reaction: Reaction) => void\n}\n\nconst ExistingReactions = ({ reactions, changeHandler }: Props) => {\n  return (\n    <Styled.ActiveReactionsList>\n      {reactions.map((reaction) => (\n        <ReactionComponent\n          key={reaction.type}\n          reaction={reaction}\n          isActive={reaction.isActive}\n          onClick={() => {\n            changeHandler({ ...reaction, isActive: !reaction.isActive })\n          }}\n        />\n      ))}\n    </Styled.ActiveReactionsList>\n  )\n}\n\nexport default ExistingReactions\n"],"names":["ExistingReactions","reactions","changeHandler","Styled.ActiveReactionsList","reaction","jsx","ReactionComponent"],"mappings":";;;AASA,MAAMA,IAAoB,CAAC,EAAE,WAAAC,GAAW,eAAAC,8BAEnCC,GAAA,EACE,UAAUF,EAAA,IAAI,CAACG,MACdC,gBAAAA,EAAA;AAAA,EAACC;AAAAA,EAAA;AAAA,IAEC,UAAAF;AAAA,IACA,UAAUA,EAAS;AAAA,IACnB,SAAS,MAAM;AACb,MAAAF,EAAc,EAAE,GAAGE,GAAU,UAAU,CAACA,EAAS,UAAU;AAAA,IAAA;AAAA,EAC7D;AAAA,EALKA,EAAS;AAOjB,CAAA,GACH;"}
+{"version":3,"file":"ExistingReactions.es.js","sources":["../../../../../../../src/containers/Feed/components/ReactionContainer/ExistingReactions.tsx"],"sourcesContent":["import ReactionComponent from './Reaction'\nimport * as Styled from './Reactions.styled'\nimport { Reaction } from './types'\n\ntype Props = {\n  reactions: Reaction[]\n  changeHandler: (reaction: Reaction) => void\n  categoryPrimary?: string\n  categorySecondary?: string\n  categoryTertiary?: string\n}\n\nconst ExistingReactions = ({\n  reactions,\n  changeHandler,\n  categoryPrimary,\n  categorySecondary,\n  categoryTertiary,\n}: Props) => {\n  return (\n    <Styled.ActiveReactionsList>\n      {reactions.map((reaction) => (\n        <ReactionComponent\n          key={reaction.type}\n          reaction={reaction}\n          isActive={reaction.isActive}\n          onClick={() => {\n            changeHandler({ ...reaction, isActive: !reaction.isActive })\n          }}\n          categoryPrimary={categoryPrimary}\n          categorySecondary={categorySecondary}\n          categoryTertiary={categoryTertiary}\n        />\n      ))}\n    </Styled.ActiveReactionsList>\n  )\n}\n\nexport default ExistingReactions\n"],"names":["ExistingReactions","reactions","changeHandler","categoryPrimary","categorySecondary","categoryTertiary","Styled.ActiveReactionsList","reaction","jsx","ReactionComponent"],"mappings":";;;AAYA,MAAMA,IAAoB,CAAC;AAAA,EACzB,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,kBAAAC;AACF,4BAEKC,GAAA,EACE,UAAUL,EAAA,IAAI,CAACM,MACdC,gBAAAA,EAAA;AAAA,EAACC;AAAAA,EAAA;AAAA,IAEC,UAAAF;AAAA,IACA,UAAUA,EAAS;AAAA,IACnB,SAAS,MAAM;AACb,MAAAL,EAAc,EAAE,GAAGK,GAAU,UAAU,CAACA,EAAS,UAAU;AAAA,IAC7D;AAAA,IACA,iBAAAJ;AAAA,IACA,mBAAAC;AAAA,IACA,kBAAAC;AAAA,EAAA;AAAA,EARKE,EAAS;AAUjB,CAAA,GACH;"}

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

@@ -1,2 +1,2 @@
-"use strict";const e=require("../../../../../../_virtual/jsx-runtime.cjs.js"),c=require("clsx"),o=require("./Reactions.styled.cjs.js"),u=require("./helpers.cjs.js"),a=({reaction:s,variant:r="standard",onClick:i})=>{var t;const n=((t=s.users)==null?void 0:t.join(", "))||void 0;return e.jsxRuntimeExports.jsxs(o.Reaction,{className:c(r,{active:s.isActive}),onClick:i,"data-tooltip":n,children:[e.jsxRuntimeExports.jsx("span",{className:"emoji",children:u.reactionMappingObj[s.type]}),s.users&&e.jsxRuntimeExports.jsx("span",{children:s.users.length})]})};module.exports=a;
+"use strict";const e=require("../../../../../../_virtual/jsx-runtime.cjs.js"),u=require("clsx"),x=require("./Reactions.styled.cjs.js"),p=require("./helpers.cjs.js"),j=({reaction:s,variant:r="standard",onClick:i,categoryPrimary:n,categorySecondary:c,categoryTertiary:o})=>{var t;const a=((t=s.users)==null?void 0:t.join(", "))||void 0;return e.jsxRuntimeExports.jsxs(x.Reaction,{className:u(r,{active:s.isActive}),onClick:i,"data-tooltip":a,$categoryPrimary:n,$categorySecondary:c,$categoryTertiary:o,children:[e.jsxRuntimeExports.jsx("span",{className:"emoji",children:p.reactionMappingObj[s.type]}),s.users&&e.jsxRuntimeExports.jsx("span",{children:s.users.length})]})};module.exports=j;
 //# sourceMappingURL=Reaction.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Reaction.cjs.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":"qKAaMA,EAAW,CAAC,CAAE,SAAAC,EAAU,QAAAC,EAAU,WAAY,QAAAC,KAAqB,OACvE,MAAMC,IAAQC,EAAAJ,EAAS,QAAT,YAAAI,EAAgB,KAAK,QAAS,OAG1C,OAAAC,EAAA,kBAAA,KAACC,EAAO,SAAP,CACC,UAAWC,EAAKN,EAAS,CAAE,OAAQD,EAAS,SAAU,EACtD,QAAAE,EACA,eAAcC,EAEd,SAAA,CAAAK,wBAAC,QAAK,UAAU,QACb,SAAmBC,qBAAAT,EAAS,IAAI,EACnC,EACGA,EAAS,OAASQ,EAAAA,kBAAAA,IAAC,OAAM,CAAA,SAAAR,EAAS,MAAM,MAAO,CAAA,CAAA,CAAA,CACpD,CAEJ"}
+{"version":3,"file":"Reaction.cjs.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":"qKAgBMA,EAAW,CAAC,CAChB,SAAAC,EACA,QAAAC,EAAU,WACV,QAAAC,EACA,gBAAAC,EACA,kBAAAC,EACA,iBAAAC,CACF,IAAa,OACX,MAAMC,IAAQC,EAAAP,EAAS,QAAT,YAAAO,EAAgB,KAAK,QAAS,OAG1C,OAAAC,EAAA,kBAAA,KAACC,EAAO,SAAP,CACC,UAAWC,EAAKT,EAAS,CAAE,OAAQD,EAAS,SAAU,EACtD,QAAAE,EACA,eAAcI,EACd,iBAAkBH,EAClB,mBAAoBC,EACpB,kBAAmBC,EAEnB,SAAA,CAAAM,wBAAC,QAAK,UAAU,QAAS,SAAmBC,qBAAAZ,EAAS,IAAI,EAAE,EAC1DA,EAAS,OAASW,EAAAA,kBAAAA,IAAC,OAAM,CAAA,SAAAX,EAAS,MAAM,MAAO,CAAA,CAAA,CAAA,CAClD,CAEJ"}

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

@@ -1,24 +1,34 @@
-import { j as t } from "../../../../../../_virtual/jsx-runtime.es.js";
-import i from "clsx";
-import { Reaction as n } from "./Reactions.styled.es.js";
-import { reactionMappingObj as m } from "./helpers.es.js";
-const j = ({ reaction: s, variant: o = "standard", onClick: r }) => {
+import { j as r } from "../../../../../../_virtual/jsx-runtime.es.js";
+import m from "clsx";
+import { Reaction as p } from "./Reactions.styled.es.js";
+import { reactionMappingObj as d } from "./helpers.es.js";
+const y = ({
+  reaction: s,
+  variant: t = "standard",
+  onClick: a,
+  categoryPrimary: o,
+  categorySecondary: i,
+  categoryTertiary: c
+}) => {
   var e;
-  const a = ((e = s.users) == null ? void 0 : e.join(", ")) || void 0;
-  return /* @__PURE__ */ t.jsxs(
-    n,
+  const n = ((e = s.users) == null ? void 0 : e.join(", ")) || void 0;
+  return /* @__PURE__ */ r.jsxs(
+    p,
     {
-      className: i(o, { active: s.isActive }),
-      onClick: r,
-      "data-tooltip": a,
+      className: m(t, { active: s.isActive }),
+      onClick: a,
+      "data-tooltip": n,
+      $categoryPrimary: o,
+      $categorySecondary: i,
+      $categoryTertiary: c,
       children: [
-        /* @__PURE__ */ t.jsx("span", { className: "emoji", children: m[s.type] }),
-        s.users && /* @__PURE__ */ t.jsx("span", { children: s.users.length })
+        /* @__PURE__ */ r.jsx("span", { className: "emoji", children: d[s.type] }),
+        s.users && /* @__PURE__ */ r.jsx("span", { children: s.users.length })
       ]
     }
   );
 };
 export {
-  j as default
+  y as default
 };
 //# sourceMappingURL=Reaction.es.js.map

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