@ynput/ayon-frontend-shared 0.2.32 → 0.2.34

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 {
+    /* CATEGORY */
+    ${({ $categoryPrimary: r, $categorySecondary: e, $categoryTertiary: n }) => a(r, e, n)}
+    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\n  &.category {\n    /* CATEGORY */\n    ${({ $categoryPrimary, $categorySecondary, $categoryTertiary }) =>\n      categoryColorCss($categoryPrimary, $categorySecondary, $categoryTertiary)}\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;AAAA;AAAA,MASxB,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,GAyRlEG,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/CommentMentionSelect/CommentMentionSelect.cjs.js

@@ -1,2 +1,2 @@
-"use strict";const s=require("../../../../../../_virtual/jsx-runtime.cjs.js"),r=require("./CommentMentionSelect.styled.cjs.js"),E=require("@ynput/ayon-react-components"),h=require("../../../../components/UserImage/UserImage.cjs.js"),p=require("clsx"),M=({mention:x,options:i=[],selectedIndex:a,onChange:c,types:d=[],config:t={},noneFound:j,noneFoundAtAll:R,error:n})=>{if(!x||j)return null;let l=[...i];l=i.map(e=>({...e,label:e.label}));let m=`No ${t.id}s found`;return n&&(m=n),s.jsxRuntimeExports.jsx(s.jsxRuntimeExports.Fragment,{children:s.jsxRuntimeExports.jsxs(r.MentionSelect,{tabIndex:0,children:[s.jsxRuntimeExports.jsxs(r.Title,{children:[x.type," ",t!=null&&t.id?t.id.charAt(0).toUpperCase()+t.id.slice(1):"","s"]}),d.includes(x.type)&&l.map((e,u)=>s.jsxRuntimeExports.jsxs(r.MentionItem,{id:e.id,onClick:()=>c(e),className:p({selected:a===u,square:!(t!=null&&t.isCircle)}),children:[e.type==="user"?s.jsxRuntimeExports.jsx(h.UserImage,{size:20,name:e.id,className:"image"}):e.icon&&s.jsxRuntimeExports.jsx(E.Icon,{icon:e.icon,className:"image"}),e.context&&s.jsxRuntimeExports.jsxs(r.MentionPrefix,{children:[e.context," - "]}),s.jsxRuntimeExports.jsx(r.MentionName,{children:e.label}),e.suffix&&s.jsxRuntimeExports.jsx(r.MentionSuffix,{children:e.suffix})]},e.id+"-"+u)),(R||n)&&s.jsxRuntimeExports.jsx(r.MentionItem,{children:m})]})})};module.exports=M;
+"use strict";const s=require("../../../../../../_virtual/jsx-runtime.cjs.js"),n=require("./CommentMentionSelect.styled.cjs.js"),E=require("@ynput/ayon-react-components"),h=require("../../../../components/UserImage/UserImage.cjs.js"),o=require("clsx"),M=({mention:r,options:i=[],selectedIndex:a,onChange:c,types:d=[],config:t={},noneFound:j,noneFoundAtAll:R,error:x,isGuest:p})=>{if(!r||j)return null;if(p)return s.jsxRuntimeExports.jsx(n.MentionSelect,{tabIndex:0,children:s.jsxRuntimeExports.jsx(n.MentionItem,{children:"Mentions not supported for guest users"})});let l=[...i];l=i.map(e=>({...e,label:e.label}));let u=`No ${t.id}s found`;return x&&(u=x),s.jsxRuntimeExports.jsx(s.jsxRuntimeExports.Fragment,{children:s.jsxRuntimeExports.jsxs(n.MentionSelect,{tabIndex:0,children:[s.jsxRuntimeExports.jsxs(n.Title,{children:[r.type," ",t!=null&&t.id?t.id.charAt(0).toUpperCase()+t.id.slice(1):"","s"]}),d.includes(r.type)&&l.map((e,m)=>s.jsxRuntimeExports.jsxs(n.MentionItem,{id:e.id,onClick:()=>c(e),className:o({selected:a===m,square:!(t!=null&&t.isCircle)}),children:[e.type==="user"?s.jsxRuntimeExports.jsx(h.UserImage,{size:20,name:e.id,className:"image"}):e.icon&&s.jsxRuntimeExports.jsx(E.Icon,{icon:e.icon,className:"image"}),e.context&&s.jsxRuntimeExports.jsxs(n.MentionPrefix,{children:[e.context," - "]}),s.jsxRuntimeExports.jsx(n.MentionName,{children:e.label}),e.suffix&&s.jsxRuntimeExports.jsx(n.MentionSuffix,{children:e.suffix})]},e.id+"-"+m)),(R||x)&&s.jsxRuntimeExports.jsx(n.MentionItem,{children:u})]})})};module.exports=M;
 //# sourceMappingURL=CommentMentionSelect.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CommentMentionSelect.cjs.js","sources":["../../../../../../../src/containers/Feed/components/CommentMentionSelect/CommentMentionSelect.tsx"],"sourcesContent":["import * as Styled from './CommentMentionSelect.styled'\nimport { Icon } from '@ynput/ayon-react-components'\nimport UserImage from '../../../../components/UserImage'\nimport clsx from 'clsx'\n\ninterface CommentMentionSelectProps {\n  mention: { type: string } | null\n  options?: {\n    id: string\n    label: string\n    type: string\n    icon?: string\n    context?: string\n    suffix?: string\n  }[]\n  selectedIndex: number | null\n  onChange: (option: { id: string; label: string }) => void\n  types?: string[]\n  config: { id?: string; isCircle?: boolean }\n  noneFound?: boolean\n  noneFoundAtAll?: boolean\n  error?: string\n}\n\nconst CommentMentionSelect = ({\n  mention,\n  options = [],\n  selectedIndex,\n  onChange,\n  types = [],\n  config = {},\n  noneFound,\n  noneFoundAtAll,\n  error,\n}: CommentMentionSelectProps) => {\n  if (!mention || noneFound) return null\n\n  // const hasSameLabel = new Set(labels).size < labels.length\n  let formattedOptions = [...options]\n\n  // add context value as a suffix to the label\n  formattedOptions = options.map((option) => {\n    return {\n      ...option,\n      label: option.label,\n    }\n  })\n\n  let noOptionsString = `No ${config.id}s found`\n  if (error) noOptionsString = error\n\n  return (\n    <>\n      <Styled.MentionSelect tabIndex={0}>\n        <Styled.Title>\n          {mention.type} {config?.id ? config.id.charAt(0).toUpperCase() + config.id.slice(1) : ''}s\n        </Styled.Title>\n        {types.includes(mention.type) &&\n          formattedOptions.map((option, i) => (\n            <Styled.MentionItem\n              key={option.id + '-' + i}\n              id={option.id}\n              onClick={() => onChange(option)}\n              className={clsx({ selected: selectedIndex === i, square: !config?.isCircle })}\n            >\n              {option.type === 'user' ? (\n                <UserImage size={20} name={option.id} className=\"image\" />\n              ) : (\n                option.icon && <Icon icon={option.icon} className=\"image\" />\n              )}\n              {option.context && <Styled.MentionPrefix>{option.context} - </Styled.MentionPrefix>}\n              <Styled.MentionName>{option.label}</Styled.MentionName>\n              {option.suffix && <Styled.MentionSuffix>{option.suffix}</Styled.MentionSuffix>}\n            </Styled.MentionItem>\n          ))}\n        {(noneFoundAtAll || error) && <Styled.MentionItem>{noOptionsString}</Styled.MentionItem>}\n      </Styled.MentionSelect>\n    </>\n  )\n}\n\nexport default CommentMentionSelect\n"],"names":["CommentMentionSelect","mention","options","selectedIndex","onChange","types","config","noneFound","noneFoundAtAll","error","formattedOptions","option","noOptionsString","jsxs","Styled.MentionSelect","Styled.Title","i","Styled.MentionItem","clsx","jsx","UserImage","Icon","Styled.MentionPrefix","Styled.MentionName","Styled.MentionSuffix"],"mappings":"2PAwBMA,EAAuB,CAAC,CAC5B,QAAAC,EACA,QAAAC,EAAU,CAAC,EACX,cAAAC,EACA,SAAAC,EACA,MAAAC,EAAQ,CAAC,EACT,OAAAC,EAAS,CAAC,EACV,UAAAC,EACA,eAAAC,EACA,MAAAC,CACF,IAAiC,CAC3B,GAAA,CAACR,GAAWM,EAAkB,OAAA,KAG9B,IAAAG,EAAmB,CAAC,GAAGR,CAAO,EAGfQ,EAAAR,EAAQ,IAAKS,IACvB,CACL,GAAGA,EACH,MAAOA,EAAO,KAChB,EACD,EAEG,IAAAC,EAAkB,MAAMN,EAAO,EAAE,UACrC,OAAIG,IAAyBG,EAAAH,yDAIzB,SAACI,EAAAA,kBAAAA,KAAAC,EAAAA,cAAA,CAAqB,SAAU,EAC9B,SAAA,CAACD,yBAAAE,EAAAA,MAAA,CACE,SAAA,CAAQd,EAAA,KAAK,IAAEK,GAAA,MAAAA,EAAQ,GAAKA,EAAO,GAAG,OAAO,CAAC,EAAE,YAAA,EAAgBA,EAAO,GAAG,MAAM,CAAC,EAAI,GAAG,GAAA,EAC3F,EACCD,EAAM,SAASJ,EAAQ,IAAI,GAC1BS,EAAiB,IAAI,CAACC,EAAQK,IAC5BH,EAAA,kBAAA,KAACI,EAAO,YAAP,CAEC,GAAIN,EAAO,GACX,QAAS,IAAMP,EAASO,CAAM,EAC9B,UAAWO,EAAK,CAAE,SAAUf,IAAkBa,EAAG,OAAQ,EAACV,GAAA,MAAAA,EAAQ,UAAU,EAE3E,SAAA,CAAOK,EAAA,OAAS,OACdQ,EAAAA,kBAAAA,IAAAC,EAAA,UAAA,CAAU,KAAM,GAAI,KAAMT,EAAO,GAAI,UAAU,OAAQ,CAAA,EAExDA,EAAO,MAASQ,EAAAA,kBAAAA,IAAAE,EAAA,KAAA,CAAK,KAAMV,EAAO,KAAM,UAAU,OAAQ,CAAA,EAE3DA,EAAO,SAAYE,EAAAA,kBAAAA,KAAAS,gBAAA,CAAsB,SAAA,CAAOX,EAAA,QAAQ,KAAA,EAAG,EAC3DQ,EAAAA,kBAAAA,IAAAI,EAAAA,YAAA,CAAoB,WAAO,KAAM,CAAA,EACjCZ,EAAO,QAAUQ,wBAACK,EAAAA,cAAA,CAAsB,WAAO,MAAO,CAAA,CAAA,CAAA,EAZlDb,EAAO,GAAK,IAAMK,CAAA,CAc1B,GACDR,GAAkBC,IAAUU,EAAAA,kBAAAA,IAACF,EAAAA,YAAA,CAAoB,SAAgBL,CAAA,CAAA,CAAA,CAAA,CACrE,CACF,CAAA,CAEJ"}
+{"version":3,"file":"CommentMentionSelect.cjs.js","sources":["../../../../../../../src/containers/Feed/components/CommentMentionSelect/CommentMentionSelect.tsx"],"sourcesContent":["import * as Styled from './CommentMentionSelect.styled'\nimport { Icon } from '@ynput/ayon-react-components'\nimport UserImage from '../../../../components/UserImage'\nimport clsx from 'clsx'\n\ninterface CommentMentionSelectProps {\n  mention: { type: string } | null\n  options?: {\n    id: string\n    label: string\n    type: string\n    icon?: string\n    context?: string\n    suffix?: string\n  }[]\n  selectedIndex: number | null\n  onChange: (option: { id: string; label: string }) => void\n  types?: string[]\n  config: { id?: string; isCircle?: boolean }\n  noneFound?: boolean\n  noneFoundAtAll?: boolean\n  error?: string\n  isGuest?: boolean\n}\n\nconst CommentMentionSelect = ({\n  mention,\n  options = [],\n  selectedIndex,\n  onChange,\n  types = [],\n  config = {},\n  noneFound,\n  noneFoundAtAll,\n  error,\n  isGuest,\n}: CommentMentionSelectProps) => {\n  if (!mention || noneFound) return null\n\n  if (isGuest)\n    return (\n      <Styled.MentionSelect tabIndex={0}>\n        <Styled.MentionItem>Mentions not supported for guest users</Styled.MentionItem>\n      </Styled.MentionSelect>\n    )\n\n  // const hasSameLabel = new Set(labels).size < labels.length\n  let formattedOptions = [...options]\n\n  // add context value as a suffix to the label\n  formattedOptions = options.map((option) => {\n    return {\n      ...option,\n      label: option.label,\n    }\n  })\n\n  let noOptionsString = `No ${config.id}s found`\n  if (error) noOptionsString = error\n\n  return (\n    <>\n      <Styled.MentionSelect tabIndex={0}>\n        <Styled.Title>\n          {mention.type} {config?.id ? config.id.charAt(0).toUpperCase() + config.id.slice(1) : ''}s\n        </Styled.Title>\n        {types.includes(mention.type) &&\n          formattedOptions.map((option, i) => (\n            <Styled.MentionItem\n              key={option.id + '-' + i}\n              id={option.id}\n              onClick={() => onChange(option)}\n              className={clsx({ selected: selectedIndex === i, square: !config?.isCircle })}\n            >\n              {option.type === 'user' ? (\n                <UserImage size={20} name={option.id} className=\"image\" />\n              ) : (\n                option.icon && <Icon icon={option.icon} className=\"image\" />\n              )}\n              {option.context && <Styled.MentionPrefix>{option.context} - </Styled.MentionPrefix>}\n              <Styled.MentionName>{option.label}</Styled.MentionName>\n              {option.suffix && <Styled.MentionSuffix>{option.suffix}</Styled.MentionSuffix>}\n            </Styled.MentionItem>\n          ))}\n        {(noneFoundAtAll || error) && <Styled.MentionItem>{noOptionsString}</Styled.MentionItem>}\n      </Styled.MentionSelect>\n    </>\n  )\n}\n\nexport default CommentMentionSelect\n"],"names":["CommentMentionSelect","mention","options","selectedIndex","onChange","types","config","noneFound","noneFoundAtAll","error","isGuest","jsx","Styled.MentionSelect","Styled.MentionItem","formattedOptions","option","noOptionsString","jsxs","Styled.Title","i","clsx","UserImage","Icon","Styled.MentionPrefix","Styled.MentionName","Styled.MentionSuffix"],"mappings":"2PAyBMA,EAAuB,CAAC,CAC5B,QAAAC,EACA,QAAAC,EAAU,CAAC,EACX,cAAAC,EACA,SAAAC,EACA,MAAAC,EAAQ,CAAC,EACT,OAAAC,EAAS,CAAC,EACV,UAAAC,EACA,eAAAC,EACA,MAAAC,EACA,QAAAC,CACF,IAAiC,CAC3B,GAAA,CAACT,GAAWM,EAAkB,OAAA,KAE9B,GAAAG,EAEA,OAAAC,wBAACC,EAAAA,cAAA,CAAqB,SAAU,EAC9B,SAAAD,EAAA,kBAAA,IAACE,EAAO,YAAP,CAAmB,SAAA,wCAAA,CAAsC,CAC5D,CAAA,EAIA,IAAAC,EAAmB,CAAC,GAAGZ,CAAO,EAGfY,EAAAZ,EAAQ,IAAKa,IACvB,CACL,GAAGA,EACH,MAAOA,EAAO,KAChB,EACD,EAEG,IAAAC,EAAkB,MAAMV,EAAO,EAAE,UACrC,OAAIG,IAAyBO,EAAAP,yDAIzB,SAACQ,EAAAA,kBAAAA,KAAAL,EAAAA,cAAA,CAAqB,SAAU,EAC9B,SAAA,CAACK,yBAAAC,EAAAA,MAAA,CACE,SAAA,CAAQjB,EAAA,KAAK,IAAEK,GAAA,MAAAA,EAAQ,GAAKA,EAAO,GAAG,OAAO,CAAC,EAAE,YAAA,EAAgBA,EAAO,GAAG,MAAM,CAAC,EAAI,GAAG,GAAA,EAC3F,EACCD,EAAM,SAASJ,EAAQ,IAAI,GAC1Ba,EAAiB,IAAI,CAACC,EAAQI,IAC5BF,EAAA,kBAAA,KAACJ,EAAO,YAAP,CAEC,GAAIE,EAAO,GACX,QAAS,IAAMX,EAASW,CAAM,EAC9B,UAAWK,EAAK,CAAE,SAAUjB,IAAkBgB,EAAG,OAAQ,EAACb,GAAA,MAAAA,EAAQ,UAAU,EAE3E,SAAA,CAAOS,EAAA,OAAS,OACdJ,EAAAA,kBAAAA,IAAAU,EAAA,UAAA,CAAU,KAAM,GAAI,KAAMN,EAAO,GAAI,UAAU,OAAQ,CAAA,EAExDA,EAAO,MAASJ,EAAAA,kBAAAA,IAAAW,EAAA,KAAA,CAAK,KAAMP,EAAO,KAAM,UAAU,OAAQ,CAAA,EAE3DA,EAAO,SAAYE,EAAAA,kBAAAA,KAAAM,gBAAA,CAAsB,SAAA,CAAOR,EAAA,QAAQ,KAAA,EAAG,EAC3DJ,EAAAA,kBAAAA,IAAAa,EAAAA,YAAA,CAAoB,WAAO,KAAM,CAAA,EACjCT,EAAO,QAAUJ,wBAACc,EAAAA,cAAA,CAAsB,WAAO,MAAO,CAAA,CAAA,CAAA,EAZlDV,EAAO,GAAK,IAAMI,CAAA,CAc1B,GACDX,GAAkBC,IAAUE,EAAAA,kBAAAA,IAACE,EAAAA,YAAA,CAAoB,SAAgBG,CAAA,CAAA,CAAA,CAAA,CACrE,CACF,CAAA,CAEJ"}

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

@@ -1,55 +1,58 @@
 import { j as s } from "../../../../../../_virtual/jsx-runtime.es.js";
-import { MentionSelect as M, Title as f, MentionItem as x, MentionPrefix as N, MentionName as b, MentionSuffix as C } from "./CommentMentionSelect.styled.es.js";
-import { Icon as I } from "@ynput/ayon-react-components";
+import { MentionSelect as n, MentionItem as a, Title as b, MentionPrefix as p, MentionName as I, MentionSuffix as N } from "./CommentMentionSelect.styled.es.js";
+import { Icon as C } from "@ynput/ayon-react-components";
 import { UserImage as S } from "../../../../components/UserImage/UserImage.es.js";
-import p from "clsx";
-const z = ({
-  mention: r,
-  options: a = [],
+import y from "clsx";
+const A = ({
+  mention: t,
+  options: d = [],
   selectedIndex: c,
-  onChange: n,
-  types: u = [],
-  config: l = {},
-  noneFound: j,
-  noneFoundAtAll: h,
-  error: t
+  onChange: u,
+  types: j = [],
+  config: r = {},
+  noneFound: h,
+  noneFoundAtAll: f,
+  error: l,
+  isGuest: M
 }) => {
-  if (!r || j) return null;
-  let m = [...a];
-  m = a.map((e) => ({
+  if (!t || h) return null;
+  if (M)
+    return /* @__PURE__ */ s.jsx(n, { tabIndex: 0, children: /* @__PURE__ */ s.jsx(a, { children: "Mentions not supported for guest users" }) });
+  let i = [...d];
+  i = d.map((e) => ({
     ...e,
     label: e.label
   }));
-  let d = `No ${l.id}s found`;
-  return t && (d = t), /* @__PURE__ */ s.jsx(s.Fragment, { children: /* @__PURE__ */ s.jsxs(M, { tabIndex: 0, children: [
-    /* @__PURE__ */ s.jsxs(f, { children: [
-      r.type,
+  let m = `No ${r.id}s found`;
+  return l && (m = l), /* @__PURE__ */ s.jsx(s.Fragment, { children: /* @__PURE__ */ s.jsxs(n, { tabIndex: 0, children: [
+    /* @__PURE__ */ s.jsxs(b, { children: [
+      t.type,
       " ",
-      l != null && l.id ? l.id.charAt(0).toUpperCase() + l.id.slice(1) : "",
+      r != null && r.id ? r.id.charAt(0).toUpperCase() + r.id.slice(1) : "",
       "s"
     ] }),
-    u.includes(r.type) && m.map((e, i) => /* @__PURE__ */ s.jsxs(
-      x,
+    j.includes(t.type) && i.map((e, x) => /* @__PURE__ */ s.jsxs(
+      a,
       {
         id: e.id,
-        onClick: () => n(e),
-        className: p({ selected: c === i, square: !(l != null && l.isCircle) }),
+        onClick: () => u(e),
+        className: y({ selected: c === x, square: !(r != null && r.isCircle) }),
         children: [
-          e.type === "user" ? /* @__PURE__ */ s.jsx(S, { size: 20, name: e.id, className: "image" }) : e.icon && /* @__PURE__ */ s.jsx(I, { icon: e.icon, className: "image" }),
-          e.context && /* @__PURE__ */ s.jsxs(N, { children: [
+          e.type === "user" ? /* @__PURE__ */ s.jsx(S, { size: 20, name: e.id, className: "image" }) : e.icon && /* @__PURE__ */ s.jsx(C, { icon: e.icon, className: "image" }),
+          e.context && /* @__PURE__ */ s.jsxs(p, { children: [
             e.context,
             " - "
           ] }),
-          /* @__PURE__ */ s.jsx(b, { children: e.label }),
-          e.suffix && /* @__PURE__ */ s.jsx(C, { children: e.suffix })
+          /* @__PURE__ */ s.jsx(I, { children: e.label }),
+          e.suffix && /* @__PURE__ */ s.jsx(N, { children: e.suffix })
         ]
       },
-      e.id + "-" + i
+      e.id + "-" + x
     )),
-    (h || t) && /* @__PURE__ */ s.jsx(x, { children: d })
+    (f || l) && /* @__PURE__ */ s.jsx(a, { children: m })
   ] }) });
 };
 export {
-  z as default
+  A as default
 };
 //# sourceMappingURL=CommentMentionSelect.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CommentMentionSelect.es.js","sources":["../../../../../../../src/containers/Feed/components/CommentMentionSelect/CommentMentionSelect.tsx"],"sourcesContent":["import * as Styled from './CommentMentionSelect.styled'\nimport { Icon } from '@ynput/ayon-react-components'\nimport UserImage from '../../../../components/UserImage'\nimport clsx from 'clsx'\n\ninterface CommentMentionSelectProps {\n  mention: { type: string } | null\n  options?: {\n    id: string\n    label: string\n    type: string\n    icon?: string\n    context?: string\n    suffix?: string\n  }[]\n  selectedIndex: number | null\n  onChange: (option: { id: string; label: string }) => void\n  types?: string[]\n  config: { id?: string; isCircle?: boolean }\n  noneFound?: boolean\n  noneFoundAtAll?: boolean\n  error?: string\n}\n\nconst CommentMentionSelect = ({\n  mention,\n  options = [],\n  selectedIndex,\n  onChange,\n  types = [],\n  config = {},\n  noneFound,\n  noneFoundAtAll,\n  error,\n}: CommentMentionSelectProps) => {\n  if (!mention || noneFound) return null\n\n  // const hasSameLabel = new Set(labels).size < labels.length\n  let formattedOptions = [...options]\n\n  // add context value as a suffix to the label\n  formattedOptions = options.map((option) => {\n    return {\n      ...option,\n      label: option.label,\n    }\n  })\n\n  let noOptionsString = `No ${config.id}s found`\n  if (error) noOptionsString = error\n\n  return (\n    <>\n      <Styled.MentionSelect tabIndex={0}>\n        <Styled.Title>\n          {mention.type} {config?.id ? config.id.charAt(0).toUpperCase() + config.id.slice(1) : ''}s\n        </Styled.Title>\n        {types.includes(mention.type) &&\n          formattedOptions.map((option, i) => (\n            <Styled.MentionItem\n              key={option.id + '-' + i}\n              id={option.id}\n              onClick={() => onChange(option)}\n              className={clsx({ selected: selectedIndex === i, square: !config?.isCircle })}\n            >\n              {option.type === 'user' ? (\n                <UserImage size={20} name={option.id} className=\"image\" />\n              ) : (\n                option.icon && <Icon icon={option.icon} className=\"image\" />\n              )}\n              {option.context && <Styled.MentionPrefix>{option.context} - </Styled.MentionPrefix>}\n              <Styled.MentionName>{option.label}</Styled.MentionName>\n              {option.suffix && <Styled.MentionSuffix>{option.suffix}</Styled.MentionSuffix>}\n            </Styled.MentionItem>\n          ))}\n        {(noneFoundAtAll || error) && <Styled.MentionItem>{noOptionsString}</Styled.MentionItem>}\n      </Styled.MentionSelect>\n    </>\n  )\n}\n\nexport default CommentMentionSelect\n"],"names":["CommentMentionSelect","mention","options","selectedIndex","onChange","types","config","noneFound","noneFoundAtAll","error","formattedOptions","option","noOptionsString","jsxs","Styled.MentionSelect","Styled.Title","Styled.MentionItem","clsx","jsx","UserImage","Icon","Styled.MentionPrefix","Styled.MentionName","Styled.MentionSuffix"],"mappings":";;;;;AAwBA,MAAMA,IAAuB,CAAC;AAAA,EAC5B,SAAAC;AAAA,EACA,SAAAC,IAAU,CAAC;AAAA,EACX,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC,IAAQ,CAAC;AAAA,EACT,QAAAC,IAAS,CAAC;AAAA,EACV,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,OAAAC;AACF,MAAiC;AAC3B,MAAA,CAACR,KAAWM,EAAkB,QAAA;AAG9B,MAAAG,IAAmB,CAAC,GAAGR,CAAO;AAGf,EAAAQ,IAAAR,EAAQ,IAAI,CAACS,OACvB;AAAA,IACL,GAAGA;AAAA,IACH,OAAOA,EAAO;AAAA,EAChB,EACD;AAEG,MAAAC,IAAkB,MAAMN,EAAO,EAAE;AACrC,SAAIG,MAAyBG,IAAAH,wCAIzB,UAACI,gBAAAA,EAAAA,KAAAC,GAAA,EAAqB,UAAU,GAC9B,UAAA;AAAA,IAACD,gBAAAA,OAAAE,GAAA,EACE,UAAA;AAAA,MAAQd,EAAA;AAAA,MAAK;AAAA,MAAEK,KAAA,QAAAA,EAAQ,KAAKA,EAAO,GAAG,OAAO,CAAC,EAAE,YAAA,IAAgBA,EAAO,GAAG,MAAM,CAAC,IAAI;AAAA,MAAG;AAAA,IAAA,GAC3F;AAAA,IACCD,EAAM,SAASJ,EAAQ,IAAI,KAC1BS,EAAiB,IAAI,CAACC,GAAQ,MAC5BE,gBAAAA,EAAA;AAAA,MAACG;AAAAA,MAAA;AAAA,QAEC,IAAIL,EAAO;AAAA,QACX,SAAS,MAAMP,EAASO,CAAM;AAAA,QAC9B,WAAWM,EAAK,EAAE,UAAUd,MAAkB,GAAG,QAAQ,EAACG,KAAA,QAAAA,EAAQ,WAAU;AAAA,QAE3E,UAAA;AAAA,UAAOK,EAAA,SAAS,SACdO,gBAAAA,EAAAA,IAAAC,GAAA,EAAU,MAAM,IAAI,MAAMR,EAAO,IAAI,WAAU,QAAQ,CAAA,IAExDA,EAAO,QAASO,gBAAAA,EAAAA,IAAAE,GAAA,EAAK,MAAMT,EAAO,MAAM,WAAU,QAAQ,CAAA;AAAA,UAE3DA,EAAO,WAAYE,gBAAAA,EAAAA,KAAAQ,GAAA,EAAsB,UAAA;AAAA,YAAOV,EAAA;AAAA,YAAQ;AAAA,UAAA,GAAG;AAAA,UAC3DO,gBAAAA,EAAAA,IAAAI,GAAA,EAAoB,YAAO,MAAM,CAAA;AAAA,UACjCX,EAAO,UAAUO,gBAAAA,MAACK,GAAA,EAAsB,YAAO,OAAO,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAZlDZ,EAAO,KAAK,MAAM;AAAA,IAAA,CAc1B;AAAA,KACDH,KAAkBC,MAAUS,gBAAAA,EAAAA,IAACF,GAAA,EAAoB,UAAgBJ,EAAA,CAAA;AAAA,EAAA,EAAA,CACrE,EACF,CAAA;AAEJ;"}
+{"version":3,"file":"CommentMentionSelect.es.js","sources":["../../../../../../../src/containers/Feed/components/CommentMentionSelect/CommentMentionSelect.tsx"],"sourcesContent":["import * as Styled from './CommentMentionSelect.styled'\nimport { Icon } from '@ynput/ayon-react-components'\nimport UserImage from '../../../../components/UserImage'\nimport clsx from 'clsx'\n\ninterface CommentMentionSelectProps {\n  mention: { type: string } | null\n  options?: {\n    id: string\n    label: string\n    type: string\n    icon?: string\n    context?: string\n    suffix?: string\n  }[]\n  selectedIndex: number | null\n  onChange: (option: { id: string; label: string }) => void\n  types?: string[]\n  config: { id?: string; isCircle?: boolean }\n  noneFound?: boolean\n  noneFoundAtAll?: boolean\n  error?: string\n  isGuest?: boolean\n}\n\nconst CommentMentionSelect = ({\n  mention,\n  options = [],\n  selectedIndex,\n  onChange,\n  types = [],\n  config = {},\n  noneFound,\n  noneFoundAtAll,\n  error,\n  isGuest,\n}: CommentMentionSelectProps) => {\n  if (!mention || noneFound) return null\n\n  if (isGuest)\n    return (\n      <Styled.MentionSelect tabIndex={0}>\n        <Styled.MentionItem>Mentions not supported for guest users</Styled.MentionItem>\n      </Styled.MentionSelect>\n    )\n\n  // const hasSameLabel = new Set(labels).size < labels.length\n  let formattedOptions = [...options]\n\n  // add context value as a suffix to the label\n  formattedOptions = options.map((option) => {\n    return {\n      ...option,\n      label: option.label,\n    }\n  })\n\n  let noOptionsString = `No ${config.id}s found`\n  if (error) noOptionsString = error\n\n  return (\n    <>\n      <Styled.MentionSelect tabIndex={0}>\n        <Styled.Title>\n          {mention.type} {config?.id ? config.id.charAt(0).toUpperCase() + config.id.slice(1) : ''}s\n        </Styled.Title>\n        {types.includes(mention.type) &&\n          formattedOptions.map((option, i) => (\n            <Styled.MentionItem\n              key={option.id + '-' + i}\n              id={option.id}\n              onClick={() => onChange(option)}\n              className={clsx({ selected: selectedIndex === i, square: !config?.isCircle })}\n            >\n              {option.type === 'user' ? (\n                <UserImage size={20} name={option.id} className=\"image\" />\n              ) : (\n                option.icon && <Icon icon={option.icon} className=\"image\" />\n              )}\n              {option.context && <Styled.MentionPrefix>{option.context} - </Styled.MentionPrefix>}\n              <Styled.MentionName>{option.label}</Styled.MentionName>\n              {option.suffix && <Styled.MentionSuffix>{option.suffix}</Styled.MentionSuffix>}\n            </Styled.MentionItem>\n          ))}\n        {(noneFoundAtAll || error) && <Styled.MentionItem>{noOptionsString}</Styled.MentionItem>}\n      </Styled.MentionSelect>\n    </>\n  )\n}\n\nexport default CommentMentionSelect\n"],"names":["CommentMentionSelect","mention","options","selectedIndex","onChange","types","config","noneFound","noneFoundAtAll","error","isGuest","jsx","Styled.MentionSelect","Styled.MentionItem","formattedOptions","option","noOptionsString","jsxs","Styled.Title","i","clsx","UserImage","Icon","Styled.MentionPrefix","Styled.MentionName","Styled.MentionSuffix"],"mappings":";;;;;AAyBA,MAAMA,IAAuB,CAAC;AAAA,EAC5B,SAAAC;AAAA,EACA,SAAAC,IAAU,CAAC;AAAA,EACX,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC,IAAQ,CAAC;AAAA,EACT,QAAAC,IAAS,CAAC;AAAA,EACV,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AACF,MAAiC;AAC3B,MAAA,CAACT,KAAWM,EAAkB,QAAA;AAE9B,MAAAG;AAEA,WAAAC,gBAAAA,MAACC,GAAA,EAAqB,UAAU,GAC9B,UAAAD,gBAAAA,EAAA,IAACE,GAAA,EAAmB,UAAA,yCAAA,CAAsC,EAC5D,CAAA;AAIA,MAAAC,IAAmB,CAAC,GAAGZ,CAAO;AAGf,EAAAY,IAAAZ,EAAQ,IAAI,CAACa,OACvB;AAAA,IACL,GAAGA;AAAA,IACH,OAAOA,EAAO;AAAA,EAChB,EACD;AAEG,MAAAC,IAAkB,MAAMV,EAAO,EAAE;AACrC,SAAIG,MAAyBO,IAAAP,wCAIzB,UAACQ,gBAAAA,EAAAA,KAAAL,GAAA,EAAqB,UAAU,GAC9B,UAAA;AAAA,IAACK,gBAAAA,OAAAC,GAAA,EACE,UAAA;AAAA,MAAQjB,EAAA;AAAA,MAAK;AAAA,MAAEK,KAAA,QAAAA,EAAQ,KAAKA,EAAO,GAAG,OAAO,CAAC,EAAE,YAAA,IAAgBA,EAAO,GAAG,MAAM,CAAC,IAAI;AAAA,MAAG;AAAA,IAAA,GAC3F;AAAA,IACCD,EAAM,SAASJ,EAAQ,IAAI,KAC1Ba,EAAiB,IAAI,CAACC,GAAQI,MAC5BF,gBAAAA,EAAA;AAAA,MAACJ;AAAAA,MAAA;AAAA,QAEC,IAAIE,EAAO;AAAA,QACX,SAAS,MAAMX,EAASW,CAAM;AAAA,QAC9B,WAAWK,EAAK,EAAE,UAAUjB,MAAkBgB,GAAG,QAAQ,EAACb,KAAA,QAAAA,EAAQ,WAAU;AAAA,QAE3E,UAAA;AAAA,UAAOS,EAAA,SAAS,SACdJ,gBAAAA,EAAAA,IAAAU,GAAA,EAAU,MAAM,IAAI,MAAMN,EAAO,IAAI,WAAU,QAAQ,CAAA,IAExDA,EAAO,QAASJ,gBAAAA,EAAAA,IAAAW,GAAA,EAAK,MAAMP,EAAO,MAAM,WAAU,QAAQ,CAAA;AAAA,UAE3DA,EAAO,WAAYE,gBAAAA,EAAAA,KAAAM,GAAA,EAAsB,UAAA;AAAA,YAAOR,EAAA;AAAA,YAAQ;AAAA,UAAA,GAAG;AAAA,UAC3DJ,gBAAAA,EAAAA,IAAAa,GAAA,EAAoB,YAAO,MAAM,CAAA;AAAA,UACjCT,EAAO,UAAUJ,gBAAAA,MAACc,GAAA,EAAsB,YAAO,OAAO,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAZlDV,EAAO,KAAK,MAAMI;AAAA,IAAA,CAc1B;AAAA,KACDX,KAAkBC,MAAUE,gBAAAA,EAAAA,IAACE,GAAA,EAAoB,UAAgBG,EAAA,CAAA;AAAA,EAAA,EAAA,CACrE,EACF,CAAA;AAEJ;"}

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