npm - @ynput/ayon-frontend-shared - Versions diffs - 0.2.35 → 0.2.36 - Mend

@ynput/ayon-frontend-shared 0.2.35 → 0.2.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (832) hide show

package/dist/shared/src/containers/EntityPickerDialog/hooks/useGetEntityPickerData.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useGetEntityPickerData.es.js","sources":["../../../../../../src/containers/EntityPickerDialog/hooks/useGetEntityPickerData.tsx"],"sourcesContent":["import {\n FolderListItem,\n SearchEntityLink,\n useGetProjectQuery,\n useGetSearchedEntitiesLinksInfiniteQuery,\n} from '@shared/api'\nimport { useHierarchyTable } from '@shared/hooks'\nimport { FC, useMemo } from 'react'\nimport { PickerEntityType, PickerSearch, PickerSelection } from '../EntityPickerDialog'\nimport {\n buildEntityPickerTableData,\n buildFolderPickerTableData,\n EntityAnatomy,\n entityHierarchies,\n} from '../util'\nimport { SimpleTableRow } from '@shared/containers/SimpleTable'\nimport { matchSorter } from 'match-sorter'\nimport { productTypes } from '@shared/util'\n\nexport type EntityQueryResult = {\n data: (SearchEntityLink \| FolderListItem)[]\n table: SimpleTableRow[]\n isLoading: boolean\n isFetchingNextPage?: boolean\n hasNextPage?: boolean\n fetchNextPage?: () => void\n error?: string\n}\n\ntype EntityPickerDataReturn = {\n folder: EntityQueryResult\n task: EntityQueryResult\n product: EntityQueryResult\n version: EntityQueryResult\n representation: EntityQueryResult\n workfile: EntityQueryResult\n}\n\ninterface useGetEntityPickerDataProps {\n projectName: string\n entityType: PickerEntityType // which entity type we are picking for\n search: PickerSearch\n selection: Record<PickerEntityType, string[]>\n}\n\nexport const useGetEntityPickerData = ({\n projectName,\n entityType,\n search,\n selection,\n}: useGetEntityPickerDataProps): EntityPickerDataReturn => {\n const entityDependencies = entityHierarchies[entityType] \|\| []\n\n // Get project data\n const { data: project } = useGetProjectQuery({ projectName })\n // convert flat list to table rows for the table\n const {\n data: hierarchTable,\n folders: foldersDataRaw,\n isFetching: isLoadingFolders,\n } = useHierarchyTable({\n projectName,\n folderTypes: project?.folderTypes \|\| [],\n })\n\n const foldersData = useMemo(() => {\n if (!search.folder) return foldersDataRaw\n return matchSorter(foldersDataRaw, search.folder, {\n keys: ['name', 'label', 'path'],\n })\n }, [foldersDataRaw, search.folder])\n\n // create flat filtered data when searching on folders\n const foldersTable = useMemo(\n () =>\n search.folder\n ? buildFolderPickerTableData(foldersData, project?.folderTypes \|\| [])\n : hierarchTable,\n\n [foldersData, hierarchTable, search.folder, project],\n )\n\n const folder: EntityQueryResult = {\n data: foldersData,\n table: foldersTable,\n isLoading: isLoadingFolders,\n }\n\n // if there is a selection on the parent we user that, otherwise we use all parent ids of parent data\n const getParentIds = (parentType: PickerEntityType, parentData: { id: string }[] = []) => {\n const parentSelection = selection[parentType]\n if (parentSelection?.length > 0) {\n return parentSelection\n } else if (parentData) {\n return parentData.map((entity) => entity.id)\n } else {\n return undefined\n }\n }\n\n const task = useGetEntityTypeData(\n projectName,\n 'task',\n search.task,\n !entityDependencies.includes('task'),\n getParentIds(entityHierarchies['task'][entityHierarchies['task'].length - 2], foldersData),\n project?.taskTypes,\n )\n const product = useGetEntityTypeData(\n projectName,\n 'product',\n search.product,\n !entityDependencies.includes('product'),\n getParentIds(\n entityHierarchies['product'][entityHierarchies['product'].length - 2],\n folder.data,\n ),\n Object.values(productTypes),\n )\n const version = useGetEntityTypeData(\n projectName,\n 'version',\n search.version,\n !entityDependencies.includes('version'),\n getParentIds(\n entityHierarchies['version'][entityHierarchies['version'].length - 2],\n product.data,\n ),\n )\n const representation = useGetEntityTypeData(\n projectName,\n 'representation',\n search.representation,\n !entityDependencies.includes('representation'),\n getParentIds(\n entityHierarchies['representation'][entityHierarchies['representation'].length - 2],\n version.data,\n ),\n )\n const workfile = useGetEntityTypeData(\n projectName,\n 'workfile',\n search.workfile,\n !entityDependencies.includes('workfile'),\n getParentIds(\n entityHierarchies['workfile'][entityHierarchies['workfile'].length - 2],\n task.data,\n ),\n )\n\n return {\n folder,\n task,\n product,\n version,\n representation,\n workfile,\n }\n}\n\nconst useGetEntityTypeData = (\n projectName: string,\n entityType: PickerEntityType,\n search: string \| undefined,\n skip: boolean,\n parentIds?: string[],\n anatomies?: EntityAnatomy[],\n) => {\n const { data, isFetching, hasNextPage, fetchNextPage, isFetchingNextPage, error } =\n useGetSearchedEntitiesLinksInfiniteQuery(\n {\n projectName,\n entityType,\n search,\n parentIds,\n },\n // skip if this is folder hierarchy (we already have the folders) or if we're waiting for parent selection\n {\n skip: skip,\n },\n )\n\n // Flatten all entities from all pages\n const entities = useMemo(() => {\n return data?.pages.flatMap((page) => page.entities) \|\| []\n }, [data])\n\n // convert to table rows\n const table = useMemo(\n () => buildEntityPickerTableData(entities, anatomies),\n [entities, anatomies],\n )\n\n return {\n data: entities,\n table: table,\n isLoading: isFetching,\n isFetchingNextPage,\n hasNextPage,\n fetchNextPage,\n error: error as string,\n }\n}\n"],"names":["useGetEntityPickerData","projectName","entityType","search","selection","entityDependencies","entityHierarchies","project","useGetProjectQuery","hierarchTable","foldersDataRaw","isLoadingFolders","useHierarchyTable","foldersData","useMemo","matchSorter","foldersTable","buildFolderPickerTableData","folder","getParentIds","parentType","parentData","parentSelection","entity","task","useGetEntityTypeData","product","productTypes","version","representation","workfile","skip","parentIds","anatomies","data","isFetching","hasNextPage","fetchNextPage","isFetchingNextPage","error","useGetSearchedEntitiesLinksInfiniteQuery","entities","page","table","buildEntityPickerTableData"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~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"}
1	+ {"version":3,"file":"useGetEntityPickerData.es.js","sources":["../../../../../../src/containers/EntityPickerDialog/hooks/useGetEntityPickerData.tsx"],"sourcesContent":["import {\n FolderListItem,\n SearchEntityLink,\n useGetProjectQuery,\n useGetSearchedEntitiesLinksInfiniteQuery,\n} from '@shared/api'\nimport { useHierarchyTable } from '@shared/hooks'\nimport { FC, useMemo } from 'react'\nimport { PickerEntityType, PickerSearch, PickerSelection } from '../EntityPickerDialog'\nimport {\n buildEntityPickerTableData,\n buildFolderPickerTableData,\n EntityAnatomy,\n entityHierarchies,\n} from '../util'\nimport { SimpleTableRow } from '@shared/containers/SimpleTable'\nimport { matchSorter } from 'match-sorter'\nimport { productTypes } from '@shared/util'\n\nexport type EntityQueryResult = {\n data: (SearchEntityLink \| FolderListItem)[]\n table: SimpleTableRow[]\n isLoading: boolean\n isFetchingNextPage?: boolean\n hasNextPage?: boolean\n fetchNextPage?: () => void\n error?: string\n}\n\ntype EntityPickerDataReturn = {\n folder: EntityQueryResult\n task: EntityQueryResult\n product: EntityQueryResult\n version: EntityQueryResult\n representation: EntityQueryResult\n workfile: EntityQueryResult\n}\n\ninterface useGetEntityPickerDataProps {\n projectName: string\n entityType: PickerEntityType // which entity type we are picking for\n search: PickerSearch\n selection: Record<PickerEntityType, string[]>\n}\n\nexport const useGetEntityPickerData = ({\n projectName,\n entityType,\n search,\n selection,\n}: useGetEntityPickerDataProps): EntityPickerDataReturn => {\n const entityDependencies = entityHierarchies[entityType] \|\| []\n\n // Get project data\n const { data: project } = useGetProjectQuery({ projectName })\n // convert flat list to table rows for the table\n const {\n data: hierarchTable,\n folders: foldersDataRaw,\n isFetching: isLoadingFolders,\n } = useHierarchyTable({\n projectName,\n folderTypes: project?.folderTypes \|\| [],\n })\n\n const foldersData = useMemo(() => {\n if (!search.folder) return foldersDataRaw\n return matchSorter(foldersDataRaw, search.folder, {\n keys: ['name', 'label', 'path'],\n })\n }, [foldersDataRaw, search.folder])\n\n // create flat filtered data when searching on folders\n const foldersTable = useMemo(\n () =>\n search.folder\n ? buildFolderPickerTableData(foldersData, project?.folderTypes \|\| [])\n : hierarchTable,\n\n [foldersData, hierarchTable, search.folder, project],\n )\n\n const folder: EntityQueryResult = {\n data: foldersData,\n table: foldersTable,\n isLoading: isLoadingFolders,\n }\n\n // if there is a selection on the parent we user that, otherwise we use all parent ids of parent data\n const getParentIds = (parentType: PickerEntityType, parentData: { id: string }[] = []) => {\n const parentSelection = selection[parentType]\n if (parentSelection?.length > 0) {\n return parentSelection\n } else if (parentData) {\n return parentData.map((entity) => entity.id)\n } else {\n return undefined\n }\n }\n\n const task = useGetEntityTypeData(\n projectName,\n 'task',\n search.task,\n !entityDependencies.includes('task'),\n getParentIds(entityHierarchies['task'][entityHierarchies['task'].length - 2], foldersData),\n project?.taskTypes,\n )\n const product = useGetEntityTypeData(\n projectName,\n 'product',\n search.product,\n !entityDependencies.includes('product'),\n getParentIds(\n entityHierarchies['product'][entityHierarchies['product'].length - 2],\n folder.data,\n ),\n Object.values(productTypes),\n )\n const version = useGetEntityTypeData(\n projectName,\n 'version',\n search.version,\n !entityDependencies.includes('version'),\n getParentIds(\n entityHierarchies['version'][entityHierarchies['version'].length - 2],\n product.data,\n ),\n )\n const representation = useGetEntityTypeData(\n projectName,\n 'representation',\n search.representation,\n !entityDependencies.includes('representation'),\n getParentIds(\n entityHierarchies['representation'][entityHierarchies['representation'].length - 2],\n version.data,\n ),\n )\n const workfile = useGetEntityTypeData(\n projectName,\n 'workfile',\n search.workfile,\n !entityDependencies.includes('workfile'),\n getParentIds(\n entityHierarchies['workfile'][entityHierarchies['workfile'].length - 2],\n task.data,\n ),\n )\n\n return {\n folder,\n task,\n product,\n version,\n representation,\n workfile,\n }\n}\n\nconst useGetEntityTypeData = (\n projectName: string,\n entityType: PickerEntityType,\n search: string \| undefined,\n skip: boolean,\n parentIds?: string[],\n anatomies?: EntityAnatomy[],\n) => {\n const { data, isFetching, hasNextPage, fetchNextPage, isFetchingNextPage, error } =\n useGetSearchedEntitiesLinksInfiniteQuery(\n {\n projectName,\n entityType,\n search,\n parentIds,\n },\n // skip if this is folder hierarchy (we already have the folders) or if we're waiting for parent selection\n {\n skip: skip,\n },\n )\n\n // Flatten all entities from all pages\n const entities = useMemo(() => {\n return data?.pages.flatMap((page) => page.entities) \|\| []\n }, [data])\n\n // convert to table rows\n const table = useMemo(\n () => buildEntityPickerTableData(entities, anatomies),\n [entities, anatomies],\n )\n\n return {\n data: entities,\n table: table,\n isLoading: isFetching,\n isFetchingNextPage,\n hasNextPage,\n fetchNextPage,\n error: error as string,\n }\n}\n"],"names":["useGetEntityPickerData","projectName","entityType","search","selection","entityDependencies","entityHierarchies","project","useGetProjectQuery","hierarchTable","foldersDataRaw","isLoadingFolders","useHierarchyTable","foldersData","useMemo","matchSorter","foldersTable","buildFolderPickerTableData","folder","getParentIds","parentType","parentData","parentSelection","entity","task","useGetEntityTypeData","product","productTypes","version","representation","workfile","skip","parentIds","anatomies","data","isFetching","hasNextPage","fetchNextPage","isFetchingNextPage","error","useGetSearchedEntitiesLinksInfiniteQuery","entities","page","table","buildEntityPickerTableData"],"mappings":"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"}

package/dist/shared/src/containers/Feed/components/ActivityCategorySelect/CategoryDropdownItem.cjs.js CHANGED Viewed

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../../../../../../_virtual/jsx-runtime.cjs.js"),d=require("@ynput/ayon-react-components"),x=require("clsx"),g=require("react"),m=require("styled-components"),y=m.span`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../../../../../_virtual/jsx-runtime.cjs.js"),s=require("@ynput/ayon-react-components"),d=require("clsx"),g=require("react"),m=require("styled-components"),y=m.span`
   display: flex;
   justify-content: flex-start;
   align-items: center;
@@ -17,5 +17,5 @@
       color: var(--md-sys-color-on-surface) !important;
     }
   }
-`,f=g.forwardRef(({label:r,color:e,icon:t,isSelected:o,startContent:n,endContent:a,isClear:c,style:i,className:p,...l},u)=>s.jsxRuntimeExports.jsxs(y,{...l,className:x(p,{selected:o}),style:{backgroundColor:o&&e?e:"",...i},ref:u,children:[n,s.jsxRuntimeExports.jsx(d.Icon,{icon:t||(c?"clear":"crop_square"),style:{color:e||""}}),r,a]}));exports.CategoryDropdownItem=f;
+`,f=g.forwardRef(({label:n,color:e,icon:o,isSelected:t,startContent:a,endContent:c,isClear:i,style:p,className:u,...l},x)=>r.jsxRuntimeExports.jsxs(y,{...l,className:d(u,{selected:t}),style:{backgroundColor:t&&e?e:"",color:s.getTextColor(t&&e?e:""),...p},ref:x,children:[a,r.jsxRuntimeExports.jsx(s.Icon,{icon:o||(i?"clear":"crop_square"),style:{color:e||""}}),n,c]}));exports.CategoryDropdownItem=f;
 //# sourceMappingURL=CategoryDropdownItem.cjs.js.map

package/dist/shared/src/containers/Feed/components/ActivityCategorySelect/CategoryDropdownItem.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CategoryDropdownItem.cjs.js","sources":["../../../../../../../src/containers/Feed/components/ActivityCategorySelect/CategoryDropdownItem.tsx"],"sourcesContent":["import { Icon } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport { forwardRef } from 'react'\nimport styled from 'styled-components'\n\nconst StyledItem = styled.span`\n display: flex;\n justify-content: flex-start;\n align-items: center;\n padding: 4px 8px;\n gap: 8px;\n white-space: nowrap;\n\n [icon='crop_square'] {\n font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 200, 'opsz' 20;\n font-size: 16px;\n }\n\n &.selected {\n [icon='crop_square'] {\n font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 200, 'opsz' 20;\n color: var(--md-sys-color-on-surface) !important;\n }\n }\n`\n\nexport interface CategoryDropdownItemProps\n extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> {\n label: string\n color: string \| null\n icon?: string // override icon if needed\n startContent?: React.ReactNode\n endContent?: React.ReactNode\n isClear?: boolean\n isSelected?: boolean\n}\n\nexport const CategoryDropdownItem = forwardRef<HTMLSpanElement, CategoryDropdownItemProps>(\n (\n {\n label,\n color,\n icon,\n isSelected,\n startContent,\n endContent,\n isClear,\n style,\n className,\n ...props\n },\n ref,\n ) => {\n return (\n <StyledItem\n {...props}\n className={clsx(className, { selected: isSelected })}\n style={{ backgroundColor: isSelected && color ? color : '', ...style }}\n ref={ref}\n >\n {startContent}\n {\n <Icon\n icon={icon ? icon : isClear ? 'clear' : 'crop_square'}\n style={{ color: color \|\| '' }}\n />\n }\n {label}\n {endContent}\n </StyledItem>\n )\n },\n)\n"],"names":["StyledItem","styled","CategoryDropdownItem","forwardRef","label","color","icon","isSelected","startContent","endContent","isClear","style","className","props","ref","jsxs","clsx","jsx","Icon"],"mappings":"+PAKMA,EAAaC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgCbC,EAAuBC,EAAA,WAClC,CACE,CACE,MAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,aAAAC,EACA,WAAAC,EACA,QAAAC,EACA,MAAAC,EACA,UAAAC,EACA,GAAGC,GAELC,IAGEC,EAAA,kBAAA,KAACf,EAAA,CACE,GAAGa,EACJ,UAAWG,EAAKJ,EAAW,CAAE,SAAUL,EAAY,EACnD,MAAO,CAAE,gBAAiBA,GAAcF,EAAQA,EAAQ,GAAI,GAAGM,CAAM,~~EACrE~~,IAAAG,EAEC,SAAA,CAAAN,~~EAECS~~,EAAA,kBAAA,IAACC,EAAA,KAAA,CACC,~~KAAMZ~~,IAAcI,EAAU,QAAU,eACxC,MAAO,CAAE,MAAOL,GAAS,EAAG,CAAA,CAC9B,EAEDD,EACAK,CAAA,CAAA,CACH,CAGN"}
1	+ {"version":3,"file":"CategoryDropdownItem.cjs.js","sources":["../../../../../../../src/containers/Feed/components/ActivityCategorySelect/CategoryDropdownItem.tsx"],"sourcesContent":["import { getTextColor, Icon } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport { forwardRef } from 'react'\nimport styled from 'styled-components'\n\nconst StyledItem = styled.span`\n display: flex;\n justify-content: flex-start;\n align-items: center;\n padding: 4px 8px;\n gap: 8px;\n white-space: nowrap;\n\n [icon='crop_square'] {\n font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 200, 'opsz' 20;\n font-size: 16px;\n }\n\n &.selected {\n [icon='crop_square'] {\n font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 200, 'opsz' 20;\n color: var(--md-sys-color-on-surface) !important;\n }\n }\n`\n\nexport interface CategoryDropdownItemProps\n extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> {\n label: string\n color: string \| null\n icon?: string // override icon if needed\n startContent?: React.ReactNode\n endContent?: React.ReactNode\n isClear?: boolean\n isSelected?: boolean\n}\n\nexport const CategoryDropdownItem = forwardRef<HTMLSpanElement, CategoryDropdownItemProps>(\n (\n {\n label,\n color,\n icon,\n isSelected,\n startContent,\n endContent,\n isClear,\n style,\n className,\n ...props\n },\n ref,\n ) => {\n return (\n <StyledItem\n {...props}\n className={clsx(className, { selected: isSelected })}\n style={{ backgroundColor: isSelected && color ? color : '', color: getTextColor(isSelected && color ? color : ''), ...style }}\n ref={ref}\n >\n {startContent}\n {\n <Icon\n icon={icon ? icon : isClear ? 'clear' : 'crop_square'}\n style={{ color: color \|\| '' }}\n />\n }\n {label}\n {endContent}\n </StyledItem>\n )\n },\n)\n"],"names":["StyledItem","styled","CategoryDropdownItem","forwardRef","label","color","icon","isSelected","startContent","endContent","isClear","style","className","props","ref","jsxs","clsx","getTextColor","jsx","Icon"],"mappings":"+PAKMA,EAAaC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgCbC,EAAuBC,EAAA,WAClC,CACE,CACE,MAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,aAAAC,EACA,WAAAC,EACA,QAAAC,EACA,MAAAC,EACA,UAAAC,EACA,GAAGC,GAELC,IAGEC,EAAA,kBAAA,KAACf,EAAA,CACE,GAAGa,EACJ,UAAWG,EAAKJ,EAAW,CAAE,SAAUL,EAAY,EACnD,MAAO,CAAE,gBAAiBA,GAAcF,EAAQA,EAAQ,GAAI,MAAOY,EAAAA,aAAaV,GAAcF,EAAQA,EAAQ,EAAE,EAAG,GAAGM,CAAM,EAC5H,IAAAG,EAEC,SAAA,CAAAN,EAECU,EAAA,kBAAA,IAACC,EAAA,KAAA,CACC,KAAMb,IAAcI,EAAU,QAAU,eACxC,MAAO,CAAE,MAAOL,GAAS,EAAG,CAAA,CAC9B,EAEDD,EACAK,CAAA,CAAA,CACH,CAGN"}

package/dist/shared/src/containers/Feed/components/ActivityCategorySelect/CategoryDropdownItem.es.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { j as s } from "../../../../../../_virtual/jsx-runtime.es.js";
-import { Icon as f } from "@ynput/ayon-react-components";
-import x from "clsx";
-import { forwardRef as d } from "react";
-import g from "styled-components";
-const u = g.span`
+import { getTextColor as l, Icon as x } from "@ynput/ayon-react-components";
+import d from "clsx";
+import { forwardRef as g } from "react";
+import u from "styled-components";
+const y = u.span`
   display: flex;
   justify-content: flex-start;
   align-items: center;
@@ -22,32 +22,32 @@ const u = g.span`
       color: var(--md-sys-color-on-surface) !important;
     }
   }
-`, L = d(
+`, R = g(
   ({
     label: e,
-    color: o,
-    icon: t,
-    isSelected: r,
+    color: t,
+    icon: r,
+    isSelected: o,
     startContent: n,
     endContent: a,
     isClear: p,
     style: i,
     className: c,
     ...m
-  }, l) => /* @__PURE__ */ s.jsxs(
-    u,
+  }, f) => /* @__PURE__ */ s.jsxs(
+    y,
     {
       ...m,
-      className: x(c, { selected: r }),
-      style: { backgroundColor: r && o ? o : "", ...i },
-      ref: l,
+      className: d(c, { selected: o }),
+      style: { backgroundColor: o && t ? t : "", color: l(o && t ? t : ""), ...i },
+      ref: f,
       children: [
         n,
         /* @__PURE__ */ s.jsx(
-          f,
+          x,
           {
-            icon: t || (p ? "clear" : "crop_square"),
-            style: { color: o || "" }
+            icon: r || (p ? "clear" : "crop_square"),
+            style: { color: t || "" }
           }
         ),
         e,
@@ -57,6 +57,6 @@ const u = g.span`
   )
 );
 export {
-  L as CategoryDropdownItem
+  R as CategoryDropdownItem
 };
 //# sourceMappingURL=CategoryDropdownItem.es.js.map

package/dist/shared/src/containers/Feed/components/ActivityCategorySelect/CategoryDropdownItem.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CategoryDropdownItem.es.js","sources":["../../../../../../../src/containers/Feed/components/ActivityCategorySelect/CategoryDropdownItem.tsx"],"sourcesContent":["import { Icon } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport { forwardRef } from 'react'\nimport styled from 'styled-components'\n\nconst StyledItem = styled.span`\n display: flex;\n justify-content: flex-start;\n align-items: center;\n padding: 4px 8px;\n gap: 8px;\n white-space: nowrap;\n\n [icon='crop_square'] {\n font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 200, 'opsz' 20;\n font-size: 16px;\n }\n\n &.selected {\n [icon='crop_square'] {\n font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 200, 'opsz' 20;\n color: var(--md-sys-color-on-surface) !important;\n }\n }\n`\n\nexport interface CategoryDropdownItemProps\n extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> {\n label: string\n color: string \| null\n icon?: string // override icon if needed\n startContent?: React.ReactNode\n endContent?: React.ReactNode\n isClear?: boolean\n isSelected?: boolean\n}\n\nexport const CategoryDropdownItem = forwardRef<HTMLSpanElement, CategoryDropdownItemProps>(\n (\n {\n label,\n color,\n icon,\n isSelected,\n startContent,\n endContent,\n isClear,\n style,\n className,\n ...props\n },\n ref,\n ) => {\n return (\n <StyledItem\n {...props}\n className={clsx(className, { selected: isSelected })}\n style={{ backgroundColor: isSelected && color ? color : '', ...style }}\n ref={ref}\n >\n {startContent}\n {\n <Icon\n icon={icon ? icon : isClear ? 'clear' : 'crop_square'}\n style={{ color: color \|\| '' }}\n />\n }\n {label}\n {endContent}\n </StyledItem>\n )\n },\n)\n"],"names":["StyledItem","styled","CategoryDropdownItem","forwardRef","label","color","icon","isSelected","startContent","endContent","isClear","style","className","props","ref","jsxs","clsx","jsx","Icon"],"mappings":";;;;;AAKA,MAAMA,IAAaC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAgCbC,IAAuBC;AAAA,EAClC,CACE;AAAA,IACE,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,YAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,KAELC,MAGEC,gBAAAA,EAAA;AAAA,IAACf;AAAA,IAAA;AAAA,MACE,GAAGa;AAAA,MACJ,WAAWG,EAAKJ,GAAW,EAAE,UAAUL,GAAY;AAAA,MACnD,OAAO,EAAE,iBAAiBA,KAAcF,IAAQA,IAAQ,IAAI,GAAGM,EAAM;AAAA,~~MACrE~~,KAAAG;AAAA,MAEC,UAAA;AAAA,QAAAN;AAAA,~~QAECS~~,gBAAAA,EAAA;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,~~MAAMZ~~,MAAcI,IAAU,UAAU;AAAA,YACxC,OAAO,EAAE,OAAOL,KAAS,GAAG;AAAA,UAAA;AAAA,QAC9B;AAAA,QAEDD;AAAA,QACAK;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AAGN;"}
1	+ {"version":3,"file":"CategoryDropdownItem.es.js","sources":["../../../../../../../src/containers/Feed/components/ActivityCategorySelect/CategoryDropdownItem.tsx"],"sourcesContent":["import { getTextColor, Icon } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport { forwardRef } from 'react'\nimport styled from 'styled-components'\n\nconst StyledItem = styled.span`\n display: flex;\n justify-content: flex-start;\n align-items: center;\n padding: 4px 8px;\n gap: 8px;\n white-space: nowrap;\n\n [icon='crop_square'] {\n font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 200, 'opsz' 20;\n font-size: 16px;\n }\n\n &.selected {\n [icon='crop_square'] {\n font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 200, 'opsz' 20;\n color: var(--md-sys-color-on-surface) !important;\n }\n }\n`\n\nexport interface CategoryDropdownItemProps\n extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> {\n label: string\n color: string \| null\n icon?: string // override icon if needed\n startContent?: React.ReactNode\n endContent?: React.ReactNode\n isClear?: boolean\n isSelected?: boolean\n}\n\nexport const CategoryDropdownItem = forwardRef<HTMLSpanElement, CategoryDropdownItemProps>(\n (\n {\n label,\n color,\n icon,\n isSelected,\n startContent,\n endContent,\n isClear,\n style,\n className,\n ...props\n },\n ref,\n ) => {\n return (\n <StyledItem\n {...props}\n className={clsx(className, { selected: isSelected })}\n style={{ backgroundColor: isSelected && color ? color : '', color: getTextColor(isSelected && color ? color : ''), ...style }}\n ref={ref}\n >\n {startContent}\n {\n <Icon\n icon={icon ? icon : isClear ? 'clear' : 'crop_square'}\n style={{ color: color \|\| '' }}\n />\n }\n {label}\n {endContent}\n </StyledItem>\n )\n },\n)\n"],"names":["StyledItem","styled","CategoryDropdownItem","forwardRef","label","color","icon","isSelected","startContent","endContent","isClear","style","className","props","ref","jsxs","clsx","getTextColor","jsx","Icon"],"mappings":";;;;;AAKA,MAAMA,IAAaC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAgCbC,IAAuBC;AAAA,EAClC,CACE;AAAA,IACE,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,YAAAC;AAAA,IACA,cAAAC;AAAA,IACA,YAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,KAELC,MAGEC,gBAAAA,EAAA;AAAA,IAACf;AAAA,IAAA;AAAA,MACE,GAAGa;AAAA,MACJ,WAAWG,EAAKJ,GAAW,EAAE,UAAUL,GAAY;AAAA,MACnD,OAAO,EAAE,iBAAiBA,KAAcF,IAAQA,IAAQ,IAAI,OAAOY,EAAaV,KAAcF,IAAQA,IAAQ,EAAE,GAAG,GAAGM,EAAM;AAAA,MAC5H,KAAAG;AAAA,MAEC,UAAA;AAAA,QAAAN;AAAA,QAECU,gBAAAA,EAAA;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,MAAMb,MAAcI,IAAU,UAAU;AAAA,YACxC,OAAO,EAAE,OAAOL,KAAS,GAAG;AAAA,UAAA;AAAA,QAC9B;AAAA,QAEDD;AAAA,QACAK;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AAGN;"}

package/dist/shared/src/containers/Feed/components/ActivityCategorySelect/CategoryTag.cjs.js CHANGED Viewed

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("../../../../../../_virtual/jsx-runtime.cjs.js"),u=require("@ynput/ayon-react-components"),g=require("clsx"),p=require("react"),y=require("styled-components"),v="Category",m=y.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("../../../../../../_virtual/jsx-runtime.cjs.js"),o=require("@ynput/ayon-react-components"),g=require("clsx"),p=require("react"),y=require("styled-components"),v="Category",m=y.div`
   display: flex;
   padding: 2px 4px;
   justify-content: center;
@@ -24,7 +24,7 @@
   &.compact {
     padding: 1px 2px;
-    ${u.theme.labelMedium}
+    ${o.theme.labelMedium}
   }
   &.editing {
@@ -47,5 +47,5 @@
       color: var(--md-sys-color-tertiary);
     }
   }
-`,b=p.forwardRef(({value:e,color:r,isCompact:o,isEditing:t,isPower:n,isDisabled:s,style:a,className:i,...c},d)=>l.jsxRuntimeExports.jsx(m,{...c,ref:d,className:g(i,{none:!e,compact:o,editing:t,power:n,disabled:s}),style:{...a,backgroundColor:r,borderColor:r},children:e||v}));exports.CategoryTag=b;
+`,b=p.forwardRef(({value:r,color:e,isCompact:t,isEditing:n,isPower:s,isDisabled:a,style:i,className:c,...d},l)=>u.jsxRuntimeExports.jsx(m,{...d,ref:l,className:g(c,{none:!r,compact:t,editing:n,power:s,disabled:a}),style:{...i,...e&&{backgroundColor:e,borderColor:e,color:o.getTextColor(e)}},children:r||v}));exports.CategoryTag=b;
 //# sourceMappingURL=CategoryTag.cjs.js.map

package/dist/shared/src/containers/Feed/components/ActivityCategorySelect/CategoryTag.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CategoryTag.cjs.js","sources":["../../../../../../../src/containers/Feed/components/ActivityCategorySelect/CategoryTag.tsx"],"sourcesContent":["import { theme } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport { forwardRef } from 'react'\nimport styled from 'styled-components'\n\nconst NO_CATEGORY_LABEL = 'Category'\n\nconst StyledTag = styled.div`\n display: flex;\n padding: 2px 4px;\n justify-content: center;\n align-items: center;\n border-radius: 4px;\n background-color: var(--md-sys-color-surface-container);\n transition: background-color 0.2s;\n width: fit-content;\n user-select: none;\n position: relative;\n\n /* if there's a category the colour gets overridden */\n border: 1px solid var(--md-sys-color-outline-variant);\n\n &.none {\n &:not(:hover) {\n color: var(--md-sys-color-on-surface-variant);\n }\n &:hover {\n background-color: var(--md-sys-color-surface-container-high);\n }\n }\n\n &.compact {\n padding: 1px 2px;\n ${theme.labelMedium}\n }\n\n &.editing {\n &:hover:not(.none) {\n filter: brightness(1.2);\n }\n }\n\n &.disabled {\n pointer-events: none;\n opacity: 0.5;\n }\n\n &.power {\n pointer-events: all;\n cursor: pointer;\n\n &:hover {\n border-color: var(--md-sys-color-tertiary);\n color: var(--md-sys-color-tertiary);\n }\n }\n`\n\ninterface CategoryTagProps extends React.HTMLAttributes<HTMLDivElement> {\n value?: string \| null\n color?: string\n isCompact?: boolean\n isEditing?: boolean\n isPower?: boolean\n isDisabled?: boolean\n}\n\nexport const CategoryTag = forwardRef<HTMLDivElement, CategoryTagProps>(\n (\n { value, color, isCompact, isEditing, isPower, isDisabled, style, className, ...props },\n ref,\n ) => {\n return (\n <StyledTag\n {...props}\n ref={ref}\n className={clsx(className, {\n none: !value,\n compact: isCompact,\n editing: isEditing,\n power: isPower,\n disabled: isDisabled,\n })}\n style={{ ...style, backgroundColor: color, borderColor: color }}\n >\n {value \|\| NO_CATEGORY_LABEL}\n </StyledTag>\n )\n },\n)\n"],"names":["NO_CATEGORY_LABEL","StyledTag","styled","theme","CategoryTag","forwardRef","value","color","isCompact","isEditing","isPower","isDisabled","style","className","props","ref","jsx","clsx"],"mappings":"+PAKMA,EAAoB,WAEpBC,EAAYC,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,MA0BnBC,QAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkCVC,EAAcC,EAAA,WACzB,CACE,CAAE,MAAAC,EAAO,MAAAC,EAAO,UAAAC,EAAW,UAAAC,EAAW,QAAAC,EAAS,WAAAC,EAAY,MAAAC,EAAO,UAAAC,EAAW,GAAGC,CAAA,EAChFC,~~IAGEC~~,EAAA,kBAAA,IAACf,EAAA,CACE,GAAGa,EACJ,IAAAC,EACA,UAAWE,EAAKJ,EAAW,CACzB,KAAM,CAACP,EACP,QAASE,EACT,QAASC,EACT,MAAOC,EACP,SAAUC,CAAA,CACX,EACD,MAAO,~~CAAE~~,GAAGC,~~EAAO~~,~~gBAAiBL~~,~~EAAO~~,YAAaA,~~CAAM~~,~~EAE7D~~,SAASD,GAAAN,CAAA,CACZ,CAGN"}
1	+ {"version":3,"file":"CategoryTag.cjs.js","sources":["../../../../../../../src/containers/Feed/components/ActivityCategorySelect/CategoryTag.tsx"],"sourcesContent":["import { getTextColor, theme } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport { forwardRef } from 'react'\nimport styled from 'styled-components'\n\nconst NO_CATEGORY_LABEL = 'Category'\n\nconst StyledTag = styled.div`\n display: flex;\n padding: 2px 4px;\n justify-content: center;\n align-items: center;\n border-radius: 4px;\n background-color: var(--md-sys-color-surface-container);\n transition: background-color 0.2s;\n width: fit-content;\n user-select: none;\n position: relative;\n\n /* if there's a category the colour gets overridden */\n border: 1px solid var(--md-sys-color-outline-variant);\n\n &.none {\n &:not(:hover) {\n color: var(--md-sys-color-on-surface-variant);\n }\n &:hover {\n background-color: var(--md-sys-color-surface-container-high);\n }\n }\n\n &.compact {\n padding: 1px 2px;\n ${theme.labelMedium}\n }\n\n &.editing {\n &:hover:not(.none) {\n filter: brightness(1.2);\n }\n }\n\n &.disabled {\n pointer-events: none;\n opacity: 0.5;\n }\n\n &.power {\n pointer-events: all;\n cursor: pointer;\n\n &:hover {\n border-color: var(--md-sys-color-tertiary);\n color: var(--md-sys-color-tertiary);\n }\n }\n`\n\ninterface CategoryTagProps extends React.HTMLAttributes<HTMLDivElement> {\n value?: string \| null\n color?: string\n isCompact?: boolean\n isEditing?: boolean\n isPower?: boolean\n isDisabled?: boolean\n}\n\nexport const CategoryTag = forwardRef<HTMLDivElement, CategoryTagProps>(\n (\n { value, color, isCompact, isEditing, isPower, isDisabled, style, className, ...props },\n ref,\n ) => {\n\n return (\n <StyledTag\n {...props}\n ref={ref}\n className={clsx(className, {\n none: !value,\n compact: isCompact,\n editing: isEditing,\n power: isPower,\n disabled: isDisabled,\n })}\n style={{\n ...style,\n ...(color && {\n backgroundColor: color,\n borderColor: color,\n color: getTextColor(color)\n })\n }}\n >\n {value \|\| NO_CATEGORY_LABEL}\n </StyledTag>\n )\n },\n)\n"],"names":["NO_CATEGORY_LABEL","StyledTag","styled","theme","CategoryTag","forwardRef","value","color","isCompact","isEditing","isPower","isDisabled","style","className","props","ref","jsx","clsx","getTextColor"],"mappings":"+PAKMA,EAAoB,WAEpBC,EAAYC,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,MA0BnBC,QAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkCVC,EAAcC,EAAA,WACzB,CACE,CAAE,MAAAC,EAAO,MAAAC,EAAO,UAAAC,EAAW,UAAAC,EAAW,QAAAC,EAAS,WAAAC,EAAY,MAAAC,EAAO,UAAAC,EAAW,GAAGC,CAAA,EAChFC,IAIEC,EAAA,kBAAA,IAACf,EAAA,CACE,GAAGa,EACJ,IAAAC,EACA,UAAWE,EAAKJ,EAAW,CACzB,KAAM,CAACP,EACP,QAASE,EACT,QAASC,EACT,MAAOC,EACP,SAAUC,CAAA,CACX,EACD,MAAO,CACL,GAAGC,EACH,GAAIL,GAAS,CACX,gBAAiBA,EACjB,YAAaA,EACb,MAAOW,eAAaX,CAAK,CAAA,CAE7B,EAEC,SAASD,GAAAN,CAAA,CACZ,CAGN"}

package/dist/shared/src/containers/Feed/components/ActivityCategorySelect/CategoryTag.es.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import { j as l } from "../../../../../../_virtual/jsx-runtime.es.js";
-import { theme as p } from "@ynput/ayon-react-components";
-import m from "clsx";
-import { forwardRef as g } from "react";
-import y from "styled-components";
-const v = "Category", f = y.div`
+import { theme as p, getTextColor as m } from "@ynput/ayon-react-components";
+import g from "clsx";
+import { forwardRef as y } from "react";
+import v from "styled-components";
+const f = "Category", u = v.div`
   display: flex;
   padding: 2px 4px;
   justify-content: center;
@@ -52,25 +52,32 @@ const v = "Category", f = y.div`
       color: var(--md-sys-color-tertiary);
     }
   }
-`, j = g(
-  ({ value: o, color: r, isCompact: e, isEditing: t, isPower: n, isDisabled: i, style: s, className: a, ...c }, d) => /* @__PURE__ */ l.jsx(
-    f,
+`, k = y(
+  ({ value: r, color: o, isCompact: e, isEditing: t, isPower: n, isDisabled: i, style: s, className: a, ...c }, d) => /* @__PURE__ */ l.jsx(
+    u,
     {
       ...c,
       ref: d,
-      className: m(a, {
-        none: !o,
+      className: g(a, {
+        none: !r,
         compact: e,
         editing: t,
         power: n,
         disabled: i
       }),
-      style: { ...s, backgroundColor: r, borderColor: r },
-      children: o || v
+      style: {
+        ...s,
+        ...o && {
+          backgroundColor: o,
+          borderColor: o,
+          color: m(o)
+        }
+      },
+      children: r || f
     }
   )
 );
 export {
-  j as CategoryTag
+  k as CategoryTag
 };
 //# sourceMappingURL=CategoryTag.es.js.map

package/dist/shared/src/containers/Feed/components/ActivityCategorySelect/CategoryTag.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CategoryTag.es.js","sources":["../../../../../../../src/containers/Feed/components/ActivityCategorySelect/CategoryTag.tsx"],"sourcesContent":["import { theme } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport { forwardRef } from 'react'\nimport styled from 'styled-components'\n\nconst NO_CATEGORY_LABEL = 'Category'\n\nconst StyledTag = styled.div`\n display: flex;\n padding: 2px 4px;\n justify-content: center;\n align-items: center;\n border-radius: 4px;\n background-color: var(--md-sys-color-surface-container);\n transition: background-color 0.2s;\n width: fit-content;\n user-select: none;\n position: relative;\n\n /* if there's a category the colour gets overridden */\n border: 1px solid var(--md-sys-color-outline-variant);\n\n &.none {\n &:not(:hover) {\n color: var(--md-sys-color-on-surface-variant);\n }\n &:hover {\n background-color: var(--md-sys-color-surface-container-high);\n }\n }\n\n &.compact {\n padding: 1px 2px;\n ${theme.labelMedium}\n }\n\n &.editing {\n &:hover:not(.none) {\n filter: brightness(1.2);\n }\n }\n\n &.disabled {\n pointer-events: none;\n opacity: 0.5;\n }\n\n &.power {\n pointer-events: all;\n cursor: pointer;\n\n &:hover {\n border-color: var(--md-sys-color-tertiary);\n color: var(--md-sys-color-tertiary);\n }\n }\n`\n\ninterface CategoryTagProps extends React.HTMLAttributes<HTMLDivElement> {\n value?: string \| null\n color?: string\n isCompact?: boolean\n isEditing?: boolean\n isPower?: boolean\n isDisabled?: boolean\n}\n\nexport const CategoryTag = forwardRef<HTMLDivElement, CategoryTagProps>(\n (\n { value, color, isCompact, isEditing, isPower, isDisabled, style, className, ...props },\n ref,\n ) => {\n return (\n <StyledTag\n {...props}\n ref={ref}\n className={clsx(className, {\n none: !value,\n compact: isCompact,\n editing: isEditing,\n power: isPower,\n disabled: isDisabled,\n })}\n style={{ ...style, backgroundColor: color, borderColor: color }}\n >\n {value \|\| NO_CATEGORY_LABEL}\n </StyledTag>\n )\n },\n)\n"],"names":["NO_CATEGORY_LABEL","StyledTag","styled","theme","CategoryTag","forwardRef","value","color","isCompact","isEditing","isPower","isDisabled","style","className","props","ref","jsx","clsx"],"mappings":";;;;;AAKA,MAAMA,IAAoB,YAEpBC,IAAYC,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,MA0BnBC,EAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAkCVC,IAAcC;AAAA,EACzB,CACE,EAAE,OAAAC,GAAO,OAAAC,GAAO,WAAAC,GAAW,WAAAC,GAAW,SAAAC,GAAS,YAAAC,GAAY,OAAAC,GAAO,WAAAC,GAAW,GAAGC,EAAA,GAChFC,~~MAGEC~~,gBAAAA,EAAA;AAAA,IAACf;AAAA,IAAA;AAAA,MACE,GAAGa;AAAA,MACJ,KAAAC;AAAA,MACA,WAAWE,EAAKJ,GAAW;AAAA,QACzB,MAAM,CAACP;AAAA,QACP,SAASE;AAAA,QACT,SAASC;AAAA,QACT,OAAOC;AAAA,QACP,UAAUC;AAAA,MAAA,CACX;AAAA,MACD,OAAO,~~EAAE~~,GAAGC,~~GAAO~~,~~iBAAiBL~~,~~GAAO~~,aAAaA,~~EAAM~~;AAAA,~~MAE7D~~,UAASD,KAAAN;AAAA,IAAA;AAAA,EACZ;AAGN;"}
1	+ {"version":3,"file":"CategoryTag.es.js","sources":["../../../../../../../src/containers/Feed/components/ActivityCategorySelect/CategoryTag.tsx"],"sourcesContent":["import { getTextColor, theme } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport { forwardRef } from 'react'\nimport styled from 'styled-components'\n\nconst NO_CATEGORY_LABEL = 'Category'\n\nconst StyledTag = styled.div`\n display: flex;\n padding: 2px 4px;\n justify-content: center;\n align-items: center;\n border-radius: 4px;\n background-color: var(--md-sys-color-surface-container);\n transition: background-color 0.2s;\n width: fit-content;\n user-select: none;\n position: relative;\n\n /* if there's a category the colour gets overridden */\n border: 1px solid var(--md-sys-color-outline-variant);\n\n &.none {\n &:not(:hover) {\n color: var(--md-sys-color-on-surface-variant);\n }\n &:hover {\n background-color: var(--md-sys-color-surface-container-high);\n }\n }\n\n &.compact {\n padding: 1px 2px;\n ${theme.labelMedium}\n }\n\n &.editing {\n &:hover:not(.none) {\n filter: brightness(1.2);\n }\n }\n\n &.disabled {\n pointer-events: none;\n opacity: 0.5;\n }\n\n &.power {\n pointer-events: all;\n cursor: pointer;\n\n &:hover {\n border-color: var(--md-sys-color-tertiary);\n color: var(--md-sys-color-tertiary);\n }\n }\n`\n\ninterface CategoryTagProps extends React.HTMLAttributes<HTMLDivElement> {\n value?: string \| null\n color?: string\n isCompact?: boolean\n isEditing?: boolean\n isPower?: boolean\n isDisabled?: boolean\n}\n\nexport const CategoryTag = forwardRef<HTMLDivElement, CategoryTagProps>(\n (\n { value, color, isCompact, isEditing, isPower, isDisabled, style, className, ...props },\n ref,\n ) => {\n\n return (\n <StyledTag\n {...props}\n ref={ref}\n className={clsx(className, {\n none: !value,\n compact: isCompact,\n editing: isEditing,\n power: isPower,\n disabled: isDisabled,\n })}\n style={{\n ...style,\n ...(color && {\n backgroundColor: color,\n borderColor: color,\n color: getTextColor(color)\n })\n }}\n >\n {value \|\| NO_CATEGORY_LABEL}\n </StyledTag>\n )\n },\n)\n"],"names":["NO_CATEGORY_LABEL","StyledTag","styled","theme","CategoryTag","forwardRef","value","color","isCompact","isEditing","isPower","isDisabled","style","className","props","ref","jsx","clsx","getTextColor"],"mappings":";;;;;AAKA,MAAMA,IAAoB,YAEpBC,IAAYC,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,MA0BnBC,EAAM,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAkCVC,IAAcC;AAAA,EACzB,CACE,EAAE,OAAAC,GAAO,OAAAC,GAAO,WAAAC,GAAW,WAAAC,GAAW,SAAAC,GAAS,YAAAC,GAAY,OAAAC,GAAO,WAAAC,GAAW,GAAGC,EAAA,GAChFC,MAIEC,gBAAAA,EAAA;AAAA,IAACf;AAAA,IAAA;AAAA,MACE,GAAGa;AAAA,MACJ,KAAAC;AAAA,MACA,WAAWE,EAAKJ,GAAW;AAAA,QACzB,MAAM,CAACP;AAAA,QACP,SAASE;AAAA,QACT,SAASC;AAAA,QACT,OAAOC;AAAA,QACP,UAAUC;AAAA,MAAA,CACX;AAAA,MACD,OAAO;AAAA,QACL,GAAGC;AAAA,QACH,GAAIL,KAAS;AAAA,UACX,iBAAiBA;AAAA,UACjB,aAAaA;AAAA,UACb,OAAOW,EAAaX,CAAK;AAAA,QAAA;AAAA,MAE7B;AAAA,MAEC,UAASD,KAAAN;AAAA,IAAA;AAAA,EACZ;AAGN;"}

package/dist/shared/src/containers/Feed/components/ActivityStatus/ActivityStatus.cjs.js CHANGED Viewed

@@ -1,4 +1,4 @@
-"use strict";const r=require("../../../../../../_virtual/jsx-runtime.cjs.js"),e=require("@ynput/ayon-react-components"),i=require("styled-components"),a=i.div`
+"use strict";const n=require("../../../../../../_virtual/jsx-runtime.cjs.js"),e=require("@ynput/ayon-react-components"),i=require("styled-components"),a=i.div`
   display: flex;
   align-items: center;
   gap: var(--base-gap-small);
@@ -12,12 +12,12 @@
   &,
   .icon {
-    color: black;
+    color: $color;
   }
   .icon {
     font-size: 16px;
     font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 300, 'opsz' 20;
   }
-`,l=({name:s,statuses:n,children:o})=>{const t=d(s,n);return r.jsxRuntimeExports.jsxs(a,{children:[o,r.jsxRuntimeExports.jsxs(c,{style:{backgroundColor:t.color},children:[t.icon&&r.jsxRuntimeExports.jsx(e.Icon,{icon:t.icon}),s]})]})},d=(s,n)=>{const o={name:s,color:"var(--md-sys-color-primary)",icon:void 0};return n.find(t=>t.name===s)||o};module.exports=l;
+`,l=({name:t,statuses:s,children:r})=>{const o=d(t,s);return n.jsxRuntimeExports.jsxs(a,{children:[r,n.jsxRuntimeExports.jsxs(c,{$color:e.getTextColor(o.color),style:{backgroundColor:o.color},children:[o.icon&&n.jsxRuntimeExports.jsx(e.Icon,{icon:o.icon}),t]})]})},d=(t,s)=>{const r={name:t,color:"var(--md-sys-color-primary)",icon:void 0};return s.find(o=>o.name===t)||r};module.exports=l;
 //# sourceMappingURL=ActivityStatus.cjs.js.map

package/dist/shared/src/containers/Feed/components/ActivityStatus/ActivityStatus.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ActivityStatus.cjs.js","sources":["../../../../../../../src/containers/Feed/components/ActivityStatus/ActivityStatus.tsx"],"sourcesContent":["import { Icon } from '@ynput/ayon-react-components'\nimport { FC } from 'react'\nimport styled from 'styled-components'\nimport { Status } from '../../../ProjectTreeTable/types/project'\n\nconst StyledContainer = styled.div`\n display: flex;\n align-items: center;\n gap: var(--base-gap-small);\n`\n\nconst StyledStatus = styled.span`\n border-radius: var(--border-radius-m);\n padding: 2px 6px;\n margin: 0 2px;\n display: flex;\n align-items: center;\n gap: var(--base-gap-small);\n\n &,\n .icon {\n color: ~~black~~;\n }\n\n .icon {\n font-size: 16px;\n font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 300, 'opsz' 20;\n }\n`\n\ninterface ActivityStatusProps {\n name: string\n statuses: Status[]\n children?: React.ReactNode\n}\n\nconst ActivityStatus: FC<ActivityStatusProps> = ({ name, statuses, children }) => {\n // find status by name or use fallback\n const foundStatus = findStatus(name, statuses)\n\n return (\n <StyledContainer>\n {children}\n <StyledStatus style={{ backgroundColor: foundStatus.color }}>\n {foundStatus.icon && <Icon icon={foundStatus.icon} />}\n {name}\n </StyledStatus>\n </StyledContainer>\n )\n}\n\nexport default ActivityStatus\n\nconst findStatus = (name: string, statuses: Status[]) => {\n const fallback: Status = { name: name, color: 'var(--md-sys-color-primary)', icon: undefined }\n return statuses.find((s) => s.name === name) \|\| fallback\n}\n"],"names":["StyledContainer","styled","StyledStatus","ActivityStatus","name","statuses","children","foundStatus","findStatus","jsx","Icon","fallback","s"],"mappings":"uJAKMA,EAAkBC,EAAO;AAAA;AAAA;AAAA;AAAA,EAMzBC,EAAeD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAyBtBE,EAA0C,CAAC,CAAE,KAAAC,EAAM,SAAAC,EAAU,SAAAC,KAAe,CAE1E,MAAAC,EAAcC,EAAWJ,EAAMC,CAAQ,EAE7C,gCACGL,EACE,CAAA,SAAA,CAAAM,~~2BACAJ~~,~~EAAa~~,~~CAAA~~,MAAO,CAAE,~~gBAAiBK~~,EAAY,~~KACjD~~,~~EAAA~~,SAAA,CAAAA,EAAY,~~MAAQE~~,wBAACC,EAAAA,KAAK,CAAA,~~KAAMH~~,EAAY,KAAM,EAClDH,CAAA,CACH,CAAA,CAAA,EACF,CAEJ,EAIMI,EAAa,CAACJ,EAAcC,IAAuB,CACvD,~~MAAMM~~,EAAmB,CAAE,~~KAAAP~~,EAAY,MAAO,8BAA+B,KAAM,MAAU,EAC7F,OAAOC,EAAS,~~KAAMO~~,GAAMA,EAAE,~~OAASR~~,CAAI,~~GAAKO~~,CAClD"}
1	+ {"version":3,"file":"ActivityStatus.cjs.js","sources":["../../../../../../../src/containers/Feed/components/ActivityStatus/ActivityStatus.tsx"],"sourcesContent":["import { getTextColor, Icon } from '@ynput/ayon-react-components'\nimport { FC } from 'react'\nimport styled from 'styled-components'\nimport { Status } from '../../../ProjectTreeTable/types/project'\n\nconst StyledContainer = styled.div`\n display: flex;\n align-items: center;\n gap: var(--base-gap-small);\n`\n\nconst StyledStatus = styled.span<{ $color: string }>`\n border-radius: var(--border-radius-m);\n padding: 2px 6px;\n margin: 0 2px;\n display: flex;\n align-items: center;\n gap: var(--base-gap-small);\n\n &,\n .icon {\n color: $color;\n }\n\n .icon {\n font-size: 16px;\n font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 300, 'opsz' 20;\n }\n`\n\ninterface ActivityStatusProps {\n name: string\n statuses: Status[]\n children?: React.ReactNode\n}\n\nconst ActivityStatus: FC<ActivityStatusProps> = ({ name, statuses, children }) => {\n // find status by name or use fallback\n const foundStatus = findStatus(name, statuses)\n\n return (\n <StyledContainer>\n {children}\n <StyledStatus $color={getTextColor(foundStatus.color)} style={{ backgroundColor: foundStatus.color }}>\n {foundStatus.icon && <Icon icon={foundStatus.icon} />}\n {name}\n </StyledStatus>\n </StyledContainer>\n )\n}\n\nexport default ActivityStatus\n\nconst findStatus = (name: string, statuses: Status[]) => {\n const fallback: Status = { name: name, color: 'var(--md-sys-color-primary)', icon: undefined }\n return statuses.find((s) => s.name === name) \|\| fallback\n}\n"],"names":["StyledContainer","styled","StyledStatus","ActivityStatus","name","statuses","children","foundStatus","findStatus","jsxs","getTextColor","jsx","Icon","fallback","s"],"mappings":"uJAKMA,EAAkBC,EAAO;AAAA;AAAA;AAAA;AAAA,EAMzBC,EAAeD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAyBtBE,EAA0C,CAAC,CAAE,KAAAC,EAAM,SAAAC,EAAU,SAAAC,KAAe,CAE1E,MAAAC,EAAcC,EAAWJ,EAAMC,CAAQ,EAE7C,gCACGL,EACE,CAAA,SAAA,CAAAM,EACAG,EAAAA,kBAAAA,KAAAP,EAAA,CAAa,OAAQQ,EAAAA,aAAaH,EAAY,KAAK,EAAG,MAAO,CAAE,gBAAiBA,EAAY,KAAA,EAC1F,SAAA,CAAAA,EAAY,MAAQI,wBAACC,EAAAA,KAAK,CAAA,KAAML,EAAY,KAAM,EAClDH,CAAA,CACH,CAAA,CAAA,EACF,CAEJ,EAIMI,EAAa,CAACJ,EAAcC,IAAuB,CACvD,MAAMQ,EAAmB,CAAE,KAAAT,EAAY,MAAO,8BAA+B,KAAM,MAAU,EAC7F,OAAOC,EAAS,KAAMS,GAAMA,EAAE,OAASV,CAAI,GAAKS,CAClD"}

package/dist/shared/src/containers/Feed/components/ActivityStatus/ActivityStatus.es.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { j as a } from "../../../../../../_virtual/jsx-runtime.es.js";
-import { Icon as n } from "@ynput/ayon-react-components";
+import { getTextColor as n, Icon as l } from "@ynput/ayon-react-components";
 import i from "styled-components";
 const c = i.div`
   display: flex;
@@ -15,25 +15,25 @@ const c = i.div`
   &,
   .icon {
-    color: black;
+    color: $color;
   }
   .icon {
     font-size: 16px;
     font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 300, 'opsz' 20;
   }
-`, f = ({ name: o, statuses: s, children: r }) => {
-  const t = l(o, s);
+`, f = ({ name: t, statuses: r, children: s }) => {
+  const o = d(t, r);
   return /* @__PURE__ */ a.jsxs(c, { children: [
-    r,
-    /* @__PURE__ */ a.jsxs(e, { style: { backgroundColor: t.color }, children: [
-      t.icon && /* @__PURE__ */ a.jsx(n, { icon: t.icon }),
-      o
+    s,
+    /* @__PURE__ */ a.jsxs(e, { $color: n(o.color), style: { backgroundColor: o.color }, children: [
+      o.icon && /* @__PURE__ */ a.jsx(l, { icon: o.icon }),
+      t
     ] })
   ] });
-}, l = (o, s) => {
-  const r = { name: o, color: "var(--md-sys-color-primary)", icon: void 0 };
-  return s.find((t) => t.name === o) || r;
+}, d = (t, r) => {
+  const s = { name: t, color: "var(--md-sys-color-primary)", icon: void 0 };
+  return r.find((o) => o.name === t) || s;
 };
 export {
   f as default

package/dist/shared/src/containers/Feed/components/ActivityStatus/ActivityStatus.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ActivityStatus.es.js","sources":["../../../../../../../src/containers/Feed/components/ActivityStatus/ActivityStatus.tsx"],"sourcesContent":["import { Icon } from '@ynput/ayon-react-components'\nimport { FC } from 'react'\nimport styled from 'styled-components'\nimport { Status } from '../../../ProjectTreeTable/types/project'\n\nconst StyledContainer = styled.div`\n display: flex;\n align-items: center;\n gap: var(--base-gap-small);\n`\n\nconst StyledStatus = styled.span`\n border-radius: var(--border-radius-m);\n padding: 2px 6px;\n margin: 0 2px;\n display: flex;\n align-items: center;\n gap: var(--base-gap-small);\n\n &,\n .icon {\n color: ~~black~~;\n }\n\n .icon {\n font-size: 16px;\n font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 300, 'opsz' 20;\n }\n`\n\ninterface ActivityStatusProps {\n name: string\n statuses: Status[]\n children?: React.ReactNode\n}\n\nconst ActivityStatus: FC<ActivityStatusProps> = ({ name, statuses, children }) => {\n // find status by name or use fallback\n const foundStatus = findStatus(name, statuses)\n\n return (\n <StyledContainer>\n {children}\n <StyledStatus style={{ backgroundColor: foundStatus.color }}>\n {foundStatus.icon && <Icon icon={foundStatus.icon} />}\n {name}\n </StyledStatus>\n </StyledContainer>\n )\n}\n\nexport default ActivityStatus\n\nconst findStatus = (name: string, statuses: Status[]) => {\n const fallback: Status = { name: name, color: 'var(--md-sys-color-primary)', icon: undefined }\n return statuses.find((s) => s.name === name) \|\| fallback\n}\n"],"names":["StyledContainer","styled","StyledStatus","ActivityStatus","name","statuses","children","foundStatus","findStatus","jsx","Icon","fallback","s"],"mappings":";;;AAKA,MAAMA,IAAkBC,EAAO;AAAA;AAAA;AAAA;AAAA,GAMzBC,IAAeD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAyBtBE,IAA0C,CAAC,EAAE,MAAAC,GAAM,UAAAC,GAAU,UAAAC,QAAe;AAE1E,QAAAC,IAAcC,EAAWJ,GAAMC,CAAQ;AAE7C,gCACGL,GACE,EAAA,UAAA;AAAA,IAAAM;AAAA,~~2BACAJ~~,~~GAAa~~,~~EAAA~~,OAAO,EAAE,~~iBAAiBK~~,EAAY,~~MACjD~~,~~GAAA~~,UAAA;AAAA,MAAAA,EAAY,~~QAAQE~~,gBAAAA,MAACC,GAAK,EAAA,~~MAAMH~~,EAAY,MAAM;AAAA,MAClDH;AAAA,IAAA,EACH,CAAA;AAAA,EAAA,GACF;AAEJ,GAIMI,IAAa,CAACJ,GAAcC,MAAuB;AACvD,~~QAAMM~~,IAAmB,EAAE,~~MAAAP~~,GAAY,OAAO,+BAA+B,MAAM,OAAU;AAC7F,SAAOC,EAAS,KAAK,~~CAACO~~,MAAMA,EAAE,~~SAASR~~,CAAI,~~KAAKO~~;AAClD;"}
1	+ {"version":3,"file":"ActivityStatus.es.js","sources":["../../../../../../../src/containers/Feed/components/ActivityStatus/ActivityStatus.tsx"],"sourcesContent":["import { getTextColor, Icon } from '@ynput/ayon-react-components'\nimport { FC } from 'react'\nimport styled from 'styled-components'\nimport { Status } from '../../../ProjectTreeTable/types/project'\n\nconst StyledContainer = styled.div`\n display: flex;\n align-items: center;\n gap: var(--base-gap-small);\n`\n\nconst StyledStatus = styled.span<{ $color: string }>`\n border-radius: var(--border-radius-m);\n padding: 2px 6px;\n margin: 0 2px;\n display: flex;\n align-items: center;\n gap: var(--base-gap-small);\n\n &,\n .icon {\n color: $color;\n }\n\n .icon {\n font-size: 16px;\n font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 300, 'opsz' 20;\n }\n`\n\ninterface ActivityStatusProps {\n name: string\n statuses: Status[]\n children?: React.ReactNode\n}\n\nconst ActivityStatus: FC<ActivityStatusProps> = ({ name, statuses, children }) => {\n // find status by name or use fallback\n const foundStatus = findStatus(name, statuses)\n\n return (\n <StyledContainer>\n {children}\n <StyledStatus $color={getTextColor(foundStatus.color)} style={{ backgroundColor: foundStatus.color }}>\n {foundStatus.icon && <Icon icon={foundStatus.icon} />}\n {name}\n </StyledStatus>\n </StyledContainer>\n )\n}\n\nexport default ActivityStatus\n\nconst findStatus = (name: string, statuses: Status[]) => {\n const fallback: Status = { name: name, color: 'var(--md-sys-color-primary)', icon: undefined }\n return statuses.find((s) => s.name === name) \|\| fallback\n}\n"],"names":["StyledContainer","styled","StyledStatus","ActivityStatus","name","statuses","children","foundStatus","findStatus","jsxs","getTextColor","jsx","Icon","fallback","s"],"mappings":";;;AAKA,MAAMA,IAAkBC,EAAO;AAAA;AAAA;AAAA;AAAA,GAMzBC,IAAeD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAyBtBE,IAA0C,CAAC,EAAE,MAAAC,GAAM,UAAAC,GAAU,UAAAC,QAAe;AAE1E,QAAAC,IAAcC,EAAWJ,GAAMC,CAAQ;AAE7C,gCACGL,GACE,EAAA,UAAA;AAAA,IAAAM;AAAA,IACAG,gBAAAA,EAAAA,KAAAP,GAAA,EAAa,QAAQQ,EAAaH,EAAY,KAAK,GAAG,OAAO,EAAE,iBAAiBA,EAAY,MAAA,GAC1F,UAAA;AAAA,MAAAA,EAAY,QAAQI,gBAAAA,MAACC,GAAK,EAAA,MAAML,EAAY,MAAM;AAAA,MAClDH;AAAA,IAAA,EACH,CAAA;AAAA,EAAA,GACF;AAEJ,GAIMI,IAAa,CAACJ,GAAcC,MAAuB;AACvD,QAAMQ,IAAmB,EAAE,MAAAT,GAAY,OAAO,+BAA+B,MAAM,OAAU;AAC7F,SAAOC,EAAS,KAAK,CAACS,MAAMA,EAAE,SAASV,CAAI,KAAKS;AAClD;"}

package/dist/shared/src/containers/Feed/components/CommentInput/CommentInput.styled.cjs.js CHANGED Viewed

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("styled-components"),i=o.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("styled-components"),i=require("@ynput/ayon-react-components"),a=o.div`
   /* use grid tick for auto height transition */
   display: grid;
   height: 100%;
@@ -24,19 +24,20 @@
     --background-color: ${n};
     --button-color: ${r};
     --button-color-secondary: ${t};
+    --button-text-color: ${i.getTextColor(r)};
     --border-color: ${r};
-  `,a=o.div`
+  `,s=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);
+  --button-text-color: var(--md-sys-color-on-primary);
   --border-color: var(--md-sys-color-outline-variant);
   &.category {
     /* CATEGORY */
     ${({$categoryPrimary:r,$categorySecondary:t,$categoryTertiary:n})=>e(r,t,n)}
     button.comment {
-      color: var(--md-sys-color-on-surface);
       &:hover {
         background-color: var(--button-color);
         filter: brightness(1.2);
@@ -368,7 +369,7 @@
       }
     }
   }
-`,s=o.footer`
+`,l=o.footer`
   display: flex;
   justify-content: space-between;
   padding: var(--padding-m);
@@ -383,8 +384,9 @@
       display: none;
     }
     background-color: var(--button-color);
+    color: var(--button-text-color);
   }
-`,l=o.div`
+`,d=o.div`
   display: flex;
   gap: var(--base-gap-small);
@@ -395,10 +397,10 @@
       }
     }
   }
-`,d=o.div`
+`,c=o.div`
   position: fixed;
   visibility: hidden;
-`,c=o.div`
+`,u=o.div`
   position: absolute;
   inset: 0;
   user-select: none;
@@ -422,10 +424,10 @@
   .icon {
     font-size: 40px;
   }
-`,u=o.span`
+`,b=o.span`
   padding: 12px 15px;
   /* italic */
   font-style: italic;
   opacity: 0.4;
-`;exports.AutoHeight=i;exports.Buttons=l;exports.Comment=a;exports.Dropzone=c;exports.Footer=s;exports.Markdown=d;exports.Placeholder=u;exports.categoryColorCss=e;
+`;exports.AutoHeight=a;exports.Buttons=d;exports.Comment=s;exports.Dropzone=u;exports.Footer=l;exports.Markdown=c;exports.Placeholder=b;exports.categoryColorCss=e;
 //# sourceMappingURL=CommentInput.styled.cjs.js.map

package/dist/shared/src/containers/Feed/components/CommentInput/CommentInput.styled.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CommentInput.styled.cjs.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 / container queries to hide buttons as the width gets smaller /\n container-type: inline-size;\n container-name: format-buttons;\n\n @container format-buttons (max-width: 432px) {\n / hide first button /\n .ql-formats:first-child {\n button:first-child {\n display: none;\n }\n }\n }\n\n @container format-buttons (max-width: 400px) {\n / hide first two buttons /\n .ql-formats:first-child {\n button:nth-child(2) {\n display: none;\n }\n }\n }\n @container format-buttons (max-width: 368px) {\n / hide first two buttons /\n .ql-formats:first-child {\n button:nth-child(3) {\n display: none;\n }\n }\n }\n @container format-buttons (max-width: 336px) {\n / hide first two buttons /\n .ql-formats:first-child {\n button:nth-child(4) {\n display: none;\n }\n }\n }\n @container format-buttons (max-width: 304px) {\n / hide first two buttons /\n .ql-formats:first-child {\n display: none;\n button:nth-child(5) {\n display: none;\n }\n }\n }\n\n / it should never get this small but if it does: hide all list options /\n @container format-buttons (max-width: 250px) {\n / hide first two buttons /\n .ql-formats:nth-child(2) {\n display: none;\n }\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":"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"}
1	+ {"version":3,"file":"CommentInput.styled.cjs.js","sources":["../../../../../../../src/containers/Feed/components/CommentInput/CommentInput.styled.ts"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { getTextColor } from '@ynput/ayon-react-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 --button-text-color: ${getTextColor($categoryPrimary)};\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 --button-text-color: var(--md-sys-color-on-primary);\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 &: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 / container queries to hide buttons as the width gets smaller /\n container-type: inline-size;\n container-name: format-buttons;\n\n @container format-buttons (max-width: 432px) {\n / hide first button /\n .ql-formats:first-child {\n button:first-child {\n display: none;\n }\n }\n }\n\n @container format-buttons (max-width: 400px) {\n / hide first two buttons /\n .ql-formats:first-child {\n button:nth-child(2) {\n display: none;\n }\n }\n }\n @container format-buttons (max-width: 368px) {\n / hide first two buttons /\n .ql-formats:first-child {\n button:nth-child(3) {\n display: none;\n }\n }\n }\n @container format-buttons (max-width: 336px) {\n / hide first two buttons /\n .ql-formats:first-child {\n button:nth-child(4) {\n display: none;\n }\n }\n }\n @container format-buttons (max-width: 304px) {\n / hide first two buttons /\n .ql-formats:first-child {\n display: none;\n button:nth-child(5) {\n display: none;\n }\n }\n }\n\n / it should never get this small but if it does: hide all list options /\n @container format-buttons (max-width: 250px) {\n / hide first two buttons /\n .ql-formats:nth-child(2) {\n display: none;\n }\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 color: var(--button-text-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","getTextColor","Comment","Footer","Buttons","Markdown","Dropzone","Placeholder"],"mappings":"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"}