@ynput/ayon-frontend-shared 0.2.14 → 0.2.16

package/dist/shared/src/components/EntityPath/SegmentProvider.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentProvider.cjs.js","sources":["../../../../../src/components/EntityPath/SegmentProvider.tsx"],"sourcesContent":["import { forwardRef, MouseEvent } from 'react'\nimport { ActiveSegment } from './EntityPath.styled'\nimport { classNames } from 'primereact/utils'\nimport { PathSegment } from './EntityPath'\nimport { useCreateContextMenu } from '@shared/containers/ContextMenu'\nimport { copyToClipboard } from '@shared/util'\nimport { useDetailsPanelContext } from '@shared/context'\n\ninterface SegmentProviderProps extends React.HTMLAttributes<HTMLDivElement> {\n  segment?: PathSegment\n  isOpen?: boolean\n  scope: string\n  projectName: string\n}\n\nconst SegmentProvider = forwardRef<HTMLDivElement, SegmentProviderProps>(\n  ({ children, segment, isOpen, scope, projectName, ...props }, ref) => {\n    const { openSlideOut } = useDetailsPanelContext()\n    // is the segment NOT a product || project?\n    const isLinkable = segment?.type !== 'product' && segment?.type !== 'project'\n\n    const handleClick = () => {\n      if (!isLinkable) return\n\n      const { type: entityType, id: entityId } = segment || {}\n\n      if (!entityType || entityType === 'project' || entityType === 'product' || !entityId) return\n\n      openSlideOut({\n        entityType,\n        entityId,\n        projectName,\n      })\n    }\n\n    const buildContextMenu = (id: string) => [\n      {\n        label: `ID: ${id}`,\n        icon: 'content_copy',\n        command: () => copyToClipboard(id),\n      },\n    ]\n\n    const [contextMenuShow] = useCreateContextMenu()\n\n    const handleOnContext = (e: MouseEvent<HTMLDivElement>) => {\n      if (!segment) return\n      const menu = buildContextMenu(segment.id)\n\n      contextMenuShow(e, menu)\n    }\n\n    return (\n      <ActiveSegment\n        onClick={handleClick}\n        onContextMenu={handleOnContext}\n        className={classNames({ link: isLinkable, open: isOpen })}\n        {...props}\n        ref={ref}\n      >\n        {children}\n      </ActiveSegment>\n    )\n  },\n)\n\nexport default SegmentProvider\n"],"names":["forwardRef","useDetailsPanelContext","copyToClipboard","useCreateContextMenu","jsx","ActiveSegment","classNames"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAeA,MAAM,kBAAkBA,MAAA;AAAA,EACtB,CAAC,EAAE,UAAU,SAAS,QAAQ,OAAO,aAAa,GAAG,MAAM,GAAG,QAAQ;AAC9D,UAAA,EAAE,aAAa,IAAIC,2CAAuB;AAEhD,UAAM,cAAa,mCAAS,UAAS,cAAa,mCAAS,UAAS;AAEpE,UAAM,cAAc,MAAM;AACxB,UAAI,CAAC,WAAY;AAEjB,YAAM,EAAE,MAAM,YAAY,IAAI,SAAS,IAAI,WAAW,CAAC;AAEvD,UAAI,CAAC,cAAc,eAAe,aAAa,eAAe,aAAa,CAAC,SAAU;AAEzE,mBAAA;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IACH;AAEM,UAAA,mBAAmB,CAAC,OAAe;AAAA,MACvC;AAAA,QACE,OAAO,OAAO,EAAE;AAAA,QAChB,MAAM;AAAA,QACN,SAAS,MAAMC,gBAAAA,gBAAgB,EAAE;AAAA,MAAA;AAAA,IAErC;AAEM,UAAA,CAAC,eAAe,IAAIC,0CAAqB;AAEzC,UAAA,kBAAkB,CAAC,MAAkC;AACzD,UAAI,CAAC,QAAS;AACR,YAAA,OAAO,iBAAiB,QAAQ,EAAE;AAExC,sBAAgB,GAAG,IAAI;AAAA,IACzB;AAGE,WAAAC,2BAAA,kBAAA;AAAA,MAACC,kBAAA;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,eAAe;AAAA,QACf,WAAWC,UAAW,WAAA,EAAE,MAAM,YAAY,MAAM,QAAQ;AAAA,QACvD,GAAG;AAAA,QACJ;AAAA,QAEC;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;;"}
+{"version":3,"file":"SegmentProvider.cjs.js","sources":["../../../../../src/components/EntityPath/SegmentProvider.tsx"],"sourcesContent":["import { forwardRef, MouseEvent } from 'react'\nimport { ActiveSegment } from './EntityPath.styled'\nimport { classNames } from 'primereact/utils'\nimport { PathSegment } from './EntityPath'\nimport { useCreateContextMenu } from '@shared/containers/ContextMenu'\nimport { copyToClipboard } from '@shared/util'\nimport { useDetailsPanelContext } from '@shared/context'\n\ninterface SegmentProviderProps extends React.HTMLAttributes<HTMLDivElement> {\n  segment?: PathSegment\n  isOpen?: boolean\n  scope: string\n  projectName: string\n}\n\nconst SegmentProvider = forwardRef<HTMLDivElement, SegmentProviderProps>(\n  ({ children, segment, isOpen, scope, projectName, ...props }, ref) => {\n    const { openSlideOut } = useDetailsPanelContext()\n    // is the segment NOT a product || project?\n    const isLinkable = segment?.type !== 'product' && segment?.type !== 'project'\n\n    const handleClick = () => {\n      if (!isLinkable) return\n\n      const { type: entityType, id: entityId } = segment || {}\n\n      if (!entityType || entityType === 'project' || entityType === 'product' || !entityId) return\n\n      openSlideOut({\n        entityType,\n        entityId,\n        projectName,\n      })\n    }\n\n    const buildContextMenu = (id: string) => [\n      {\n        label: `ID: ${id}`,\n        icon: 'content_copy',\n        command: () => copyToClipboard(id),\n      },\n    ]\n\n    const [contextMenuShow] = useCreateContextMenu()\n\n    const handleOnContext = (e: MouseEvent<HTMLDivElement>) => {\n      if (!segment) return\n      const menu = buildContextMenu(segment.id)\n\n      contextMenuShow(e, menu)\n    }\n\n    return (\n      <ActiveSegment\n        onClick={handleClick}\n        onContextMenu={handleOnContext}\n        className={classNames({ link: isLinkable, open: isOpen })}\n        {...props}\n        ref={ref}\n      >\n        {children}\n      </ActiveSegment>\n    )\n  },\n)\n\nexport default SegmentProvider\n"],"names":["forwardRef","useDetailsPanelContext","copyToClipboard","useCreateContextMenu","jsx","ActiveSegment","classNames"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAeA,MAAM,kBAAkBA,MAAA;AAAA,EACtB,CAAC,EAAE,UAAU,SAAS,QAAQ,OAAO,aAAa,GAAG,MAAM,GAAG,QAAQ;AAC9D,UAAA,EAAE,aAAa,IAAIC,2CAAuB;AAEhD,UAAM,cAAa,mCAAS,UAAS,cAAa,mCAAS,UAAS;AAEpE,UAAM,cAAc,MAAM;AACxB,UAAI,CAAC,WAAY;AAEjB,YAAM,EAAE,MAAM,YAAY,IAAI,SAAS,IAAI,WAAW,CAAC;AAEvD,UAAI,CAAC,cAAc,eAAe,aAAa,eAAe,aAAa,CAAC,SAAU;AAEzE,mBAAA;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IACH;AAEM,UAAA,mBAAmB,CAAC,OAAe;AAAA,MACvC;AAAA,QACE,OAAO,OAAO,EAAE;AAAA,QAChB,MAAM;AAAA,QACN,SAAS,MAAMC,gBAAAA,gBAAgB,EAAE;AAAA,MAAA;AAAA,IAErC;AAEM,UAAA,CAAC,eAAe,IAAIC,0CAAqB;AAEzC,UAAA,kBAAkB,CAAC,MAAkC;AACzD,UAAI,CAAC,QAAS;AACR,YAAA,OAAO,iBAAiB,QAAQ,EAAE;AAExC,sBAAgB,GAAG,IAAI;AAAA,IACzB;AAGE,WAAAC,2BAAA,kBAAA;AAAA,MAACC,kBAAA;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,eAAe;AAAA,QACf,WAAWC,UAAW,WAAA,EAAE,MAAM,YAAY,MAAM,QAAQ;AAAA,QACvD,GAAG;AAAA,QACJ;AAAA,QAEC;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;;"}

package/dist/shared/src/components/EntityPath/SegmentProvider.es.js

@@ -20,6 +20,7 @@ import "react-dom";
 import "../../context/pip/PiPWrapper.es.js";
 import "../../context/AddonProjectContext.es.js";
 import "../../context/AddonContext.es.js";
+import "../../context/PowerpackContext.es.js";
 const SegmentProvider = forwardRef(
   ({ children, segment, isOpen, scope, projectName, ...props }, ref) => {
     const { openSlideOut } = useDetailsPanelContext();

package/dist/shared/src/components/EntityPath/SegmentProvider.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentProvider.es.js","sources":["../../../../../src/components/EntityPath/SegmentProvider.tsx"],"sourcesContent":["import { forwardRef, MouseEvent } from 'react'\nimport { ActiveSegment } from './EntityPath.styled'\nimport { classNames } from 'primereact/utils'\nimport { PathSegment } from './EntityPath'\nimport { useCreateContextMenu } from '@shared/containers/ContextMenu'\nimport { copyToClipboard } from '@shared/util'\nimport { useDetailsPanelContext } from '@shared/context'\n\ninterface SegmentProviderProps extends React.HTMLAttributes<HTMLDivElement> {\n  segment?: PathSegment\n  isOpen?: boolean\n  scope: string\n  projectName: string\n}\n\nconst SegmentProvider = forwardRef<HTMLDivElement, SegmentProviderProps>(\n  ({ children, segment, isOpen, scope, projectName, ...props }, ref) => {\n    const { openSlideOut } = useDetailsPanelContext()\n    // is the segment NOT a product || project?\n    const isLinkable = segment?.type !== 'product' && segment?.type !== 'project'\n\n    const handleClick = () => {\n      if (!isLinkable) return\n\n      const { type: entityType, id: entityId } = segment || {}\n\n      if (!entityType || entityType === 'project' || entityType === 'product' || !entityId) return\n\n      openSlideOut({\n        entityType,\n        entityId,\n        projectName,\n      })\n    }\n\n    const buildContextMenu = (id: string) => [\n      {\n        label: `ID: ${id}`,\n        icon: 'content_copy',\n        command: () => copyToClipboard(id),\n      },\n    ]\n\n    const [contextMenuShow] = useCreateContextMenu()\n\n    const handleOnContext = (e: MouseEvent<HTMLDivElement>) => {\n      if (!segment) return\n      const menu = buildContextMenu(segment.id)\n\n      contextMenuShow(e, menu)\n    }\n\n    return (\n      <ActiveSegment\n        onClick={handleClick}\n        onContextMenu={handleOnContext}\n        className={classNames({ link: isLinkable, open: isOpen })}\n        {...props}\n        ref={ref}\n      >\n        {children}\n      </ActiveSegment>\n    )\n  },\n)\n\nexport default SegmentProvider\n"],"names":["jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAeA,MAAM,kBAAkB;AAAA,EACtB,CAAC,EAAE,UAAU,SAAS,QAAQ,OAAO,aAAa,GAAG,MAAM,GAAG,QAAQ;AAC9D,UAAA,EAAE,aAAa,IAAI,uBAAuB;AAEhD,UAAM,cAAa,mCAAS,UAAS,cAAa,mCAAS,UAAS;AAEpE,UAAM,cAAc,MAAM;AACxB,UAAI,CAAC,WAAY;AAEjB,YAAM,EAAE,MAAM,YAAY,IAAI,SAAS,IAAI,WAAW,CAAC;AAEvD,UAAI,CAAC,cAAc,eAAe,aAAa,eAAe,aAAa,CAAC,SAAU;AAEzE,mBAAA;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IACH;AAEM,UAAA,mBAAmB,CAAC,OAAe;AAAA,MACvC;AAAA,QACE,OAAO,OAAO,EAAE;AAAA,QAChB,MAAM;AAAA,QACN,SAAS,MAAM,gBAAgB,EAAE;AAAA,MAAA;AAAA,IAErC;AAEM,UAAA,CAAC,eAAe,IAAI,qBAAqB;AAEzC,UAAA,kBAAkB,CAAC,MAAkC;AACzD,UAAI,CAAC,QAAS;AACR,YAAA,OAAO,iBAAiB,QAAQ,EAAE;AAExC,sBAAgB,GAAG,IAAI;AAAA,IACzB;AAGE,WAAAA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,eAAe;AAAA,QACf,WAAW,WAAW,EAAE,MAAM,YAAY,MAAM,QAAQ;AAAA,QACvD,GAAG;AAAA,QACJ;AAAA,QAEC;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"SegmentProvider.es.js","sources":["../../../../../src/components/EntityPath/SegmentProvider.tsx"],"sourcesContent":["import { forwardRef, MouseEvent } from 'react'\nimport { ActiveSegment } from './EntityPath.styled'\nimport { classNames } from 'primereact/utils'\nimport { PathSegment } from './EntityPath'\nimport { useCreateContextMenu } from '@shared/containers/ContextMenu'\nimport { copyToClipboard } from '@shared/util'\nimport { useDetailsPanelContext } from '@shared/context'\n\ninterface SegmentProviderProps extends React.HTMLAttributes<HTMLDivElement> {\n  segment?: PathSegment\n  isOpen?: boolean\n  scope: string\n  projectName: string\n}\n\nconst SegmentProvider = forwardRef<HTMLDivElement, SegmentProviderProps>(\n  ({ children, segment, isOpen, scope, projectName, ...props }, ref) => {\n    const { openSlideOut } = useDetailsPanelContext()\n    // is the segment NOT a product || project?\n    const isLinkable = segment?.type !== 'product' && segment?.type !== 'project'\n\n    const handleClick = () => {\n      if (!isLinkable) return\n\n      const { type: entityType, id: entityId } = segment || {}\n\n      if (!entityType || entityType === 'project' || entityType === 'product' || !entityId) return\n\n      openSlideOut({\n        entityType,\n        entityId,\n        projectName,\n      })\n    }\n\n    const buildContextMenu = (id: string) => [\n      {\n        label: `ID: ${id}`,\n        icon: 'content_copy',\n        command: () => copyToClipboard(id),\n      },\n    ]\n\n    const [contextMenuShow] = useCreateContextMenu()\n\n    const handleOnContext = (e: MouseEvent<HTMLDivElement>) => {\n      if (!segment) return\n      const menu = buildContextMenu(segment.id)\n\n      contextMenuShow(e, menu)\n    }\n\n    return (\n      <ActiveSegment\n        onClick={handleClick}\n        onContextMenu={handleOnContext}\n        className={classNames({ link: isLinkable, open: isOpen })}\n        {...props}\n        ref={ref}\n      >\n        {children}\n      </ActiveSegment>\n    )\n  },\n)\n\nexport default SegmentProvider\n"],"names":["jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAeA,MAAM,kBAAkB;AAAA,EACtB,CAAC,EAAE,UAAU,SAAS,QAAQ,OAAO,aAAa,GAAG,MAAM,GAAG,QAAQ;AAC9D,UAAA,EAAE,aAAa,IAAI,uBAAuB;AAEhD,UAAM,cAAa,mCAAS,UAAS,cAAa,mCAAS,UAAS;AAEpE,UAAM,cAAc,MAAM;AACxB,UAAI,CAAC,WAAY;AAEjB,YAAM,EAAE,MAAM,YAAY,IAAI,SAAS,IAAI,WAAW,CAAC;AAEvD,UAAI,CAAC,cAAc,eAAe,aAAa,eAAe,aAAa,CAAC,SAAU;AAEzE,mBAAA;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IACH;AAEM,UAAA,mBAAmB,CAAC,OAAe;AAAA,MACvC;AAAA,QACE,OAAO,OAAO,EAAE;AAAA,QAChB,MAAM;AAAA,QACN,SAAS,MAAM,gBAAgB,EAAE;AAAA,MAAA;AAAA,IAErC;AAEM,UAAA,CAAC,eAAe,IAAI,qBAAqB;AAEzC,UAAA,kBAAkB,CAAC,MAAkC;AACzD,UAAI,CAAC,QAAS;AACR,YAAA,OAAO,iBAAiB,QAAQ,EAAE;AAExC,sBAAgB,GAAG,IAAI;AAAA,IACzB;AAGE,WAAAA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,eAAe;AAAA,QACf,WAAW,WAAW,EAAE,MAAM,YAAY,MAAM,QAAQ;AAAA,QACvD,GAAG;AAAA,QACJ;AAAA,QAEC;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;"}

package/dist/shared/src/components/EntityThumbnailUploader/EntityThumbnailUploader.cjs.js

@@ -43,6 +43,7 @@ require("../../api/generated/users.cjs.js");
 require("../../api/generated/versions.cjs.js");
 require("../../api/generated/workfiles.cjs.js");
 require("../../api/generated/ynputCloud.cjs.js");
+require("../../api/generated/grouping.cjs.js");
 require("../../api/queries/actions/getActions.cjs.js");
 require("../../api/queries/activities/getActivities.cjs.js");
 require("../../api/queries/activities/updateActivities.cjs.js");
@@ -73,6 +74,7 @@ require("../../api/queries/users/getUsers.cjs.js");
 require("../../api/queries/users/updateUsers.cjs.js");
 require("../../api/queries/watchers/getWatchers.cjs.js");
 require("../../api/queries/permissions/getPermissions.cjs.js");
+require("../../api/queries/grouping/getGrouping.cjs.js");
 require("@dnd-kit/core");
 require("@dnd-kit/sortable");
 require("../ReviewablesList/ReviewablesList.styled.cjs.js");
@@ -91,6 +93,7 @@ require("react-dom");
 require("../../context/pip/PiPWrapper.cjs.js");
 require("../../context/AddonProjectContext.cjs.js");
 require("../../context/AddonContext.cjs.js");
+require("../../context/PowerpackContext.cjs.js");
 require("../ReviewableCard/ReviewableCard.cjs.js");
 require("../ReviewableProgressCard/ReviewableProgressCard.styled.cjs.js");
 require("../FileThumbnail/FileThumbnail.cjs.js");
@@ -134,6 +137,7 @@ require("../../containers/ProjectTreeTable/context/CellEditingContext.cjs.js");
 require("../../containers/ProjectTreeTable/context/ClipboardContext.cjs.js");
 require("../../containers/ProjectTreeTable/context/ProjectTableSelectionContext.cjs.js");
 require("../../containers/ProjectTreeTable/context/ProjectDataContext.cjs.js");
+require("../../containers/ProjectTreeTable/context/ProjectTableModulesContext.cjs.js");
 require("@tanstack/react-table");
 require("../../containers/ProjectTreeTable/widgets/CollapsedWidget.cjs.js");
 require("../../containers/ProjectTreeTable/widgets/DateWidget.cjs.js");
@@ -142,10 +146,12 @@ require("../../containers/ProjectTreeTable/widgets/TextWidget.cjs.js");
 require("../../containers/ProjectTreeTable/widgets/BooleanWidget.cjs.js");
 require("../../containers/ProjectTreeTable/widgets/CellWidget.cjs.js");
 require("../../containers/ProjectTreeTable/widgets/EntityNameWidget.cjs.js");
+require("../../containers/ProjectTreeTable/widgets/GroupHeaderWidget.cjs.js");
 require("../../containers/ProjectTreeTable/widgets/ThumbnailWidget.cjs.js");
 require("../../containers/ProjectTreeTable/ProjectTreeTable.styled.cjs.js");
 require("../../containers/ProjectTreeTable/components/SelectionCell.cjs.js");
 require("../../containers/ProjectTreeTable/components/RowSelectionHeader.cjs.js");
+require("../../containers/ProjectTreeTable/widgets/LoadMoreWidget.cjs.js");
 require("../../containers/DetailsPanel/DetailsPanel.styled.cjs.js");
 require("../../../../_virtual/runtime.cjs.js");
 require("../../../../_virtual/semver.cjs.js");
@@ -167,11 +173,15 @@ require("../EntityPath/SegmentProvider.cjs.js");
 require("../DetailsPanelAttributes/DetailsPanelAttributesEditor.cjs.js");
 require("../Watchers/Watchers.cjs.js");
 require("../ProjectTableSettings/ProjectTableSettings.cjs.js");
+require("../Powerpack/PowerpackButton.cjs.js");
+require("../Powerpack/PricingLink.cjs.js");
+require("../Powerpack/PowerpackDialog.styled.cjs.js");
 require("../SettingsPanel/SettingsPanel.cjs.js");
 require("../SettingsPanel/SettingsPanelItemTemplate.cjs.js");
 require("../AttributeEditor/components/MinMaxField.cjs.js");
 require("../EnumEditor/EnumEditor.styled.cjs.js");
 require("../SearchFilter/filterDates.cjs.js");
+require("../Badge/Badge.cjs.js");
 const EntityThumbnailUploader = ({
   children = [],
   entityType,

package/dist/shared/src/components/EntityThumbnailUploader/EntityThumbnailUploader.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"EntityThumbnailUploader.cjs.js","sources":["../../../../../src/components/EntityThumbnailUploader/EntityThumbnailUploader.tsx"],"sourcesContent":["import { useRef, useState } from 'react'\nimport clsx from 'clsx'\n\nimport { ThumbnailUploader } from '@shared/components'\nimport { ThumbnailWrapper } from '@shared/containers'\nimport { useUpdateEntitiesMutation } from '@shared/api'\nimport * as Styled from './EntityThumbnailUploader.styled'\nimport { ThumbnailUploadProvider } from '../../context/ThumbnailUploaderContext'\n\ntype Operation = {\n  id: string\n  projectName: string\n  currentAssignees: any[]\n  data: { updatedAt: string }\n}\nexport type EntityThumbnailUploaderProps = {\n  entityType: string\n  entities: any[]\n  isCompact?: boolean\n  projectName: any\n  children?: JSX.Element | JSX.Element[]\n  onUploaded?: (operations: Operation[]) => void\n  resetFileUploadState?: () => void\n}\n\nexport const EntityThumbnailUploader = ({\n  children = [],\n  entityType,\n  entities = [],\n  isCompact = false,\n  onUploaded,\n}: EntityThumbnailUploaderProps) => {\n  const [isDraggingFile, setIsDraggingFile] = useState(false)\n  const [isUploadingFile, setIsUploadingFile] = useState(false)\n\n  const [updateEntities] = useUpdateEntitiesMutation()\n\n  const handleThumbnailUpload = async (thumbnails: any[] = []) => {\n    // always set isDraggingFile to false\n    setIsDraggingFile(false)\n    setIsUploadingFile(false)\n\n    // check something was actually uploaded\n    if (!entities.length) {\n      return\n    }\n\n    // patching the updatedAt will force a refresh of the thumbnail url\n    const newUpdatedAt = new Date().toISOString()\n\n    let operations: Operation[] = []\n    let versionPatches = []\n\n    for (const entity of thumbnails) {\n      const entityToPatch = entities.find((e) => e.id === entity.id)\n      if (!entityToPatch) continue\n      const thumbnailId = entity.thumbnailId\n      const currentAssignees = entity.users || []\n\n      operations.push({\n        id: entityToPatch.id,\n        projectName: entityToPatch.projectName,\n        data: { updatedAt: newUpdatedAt },\n        currentAssignees,\n      })\n\n      const versionPatch = {\n        productId: entityToPatch.productId,\n        versionUpdatedAt: newUpdatedAt,\n        versionThumbnailId: thumbnailId,\n      }\n\n      versionPatches.push(versionPatch)\n    }\n\n    try {\n      await updateEntities({ operations, entityType })\n      onUploaded && onUploaded(operations)\n    } catch (error) {\n      console.error('Error uploading thumbnail:', error)\n    }\n  }\n\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  return (\n    <ThumbnailUploadProvider\n      entities={entities}\n      handleThumbnailUpload={handleThumbnailUpload}\n      inputRef={inputRef}\n    >\n      <Styled.DragAndDropWrapper\n        className={clsx({ isCompact })}\n        onDragEnter={() => setIsDraggingFile(true)}\n      >\n        <ThumbnailWrapper>\n          <div>{children}</div>\n        </ThumbnailWrapper>\n        <ThumbnailUploader\n          entities={entities}\n          inputRef={inputRef}\n          className={clsx('thumbnail-uploader', { hidden: !isDraggingFile && !isUploadingFile })}\n          onUploadInProgress={() => setIsUploadingFile(true)}\n          onFinish={handleThumbnailUpload}\n          onDragLeave={() => setIsDraggingFile(false)}\n          onDragOver={(e) => e.preventDefault()}\n        />\n      </Styled.DragAndDropWrapper>\n    </ThumbnailUploadProvider>\n  )\n}\n"],"names":["useState","useUpdateEntitiesMutation","useRef","jsx","ThumbnailUploadProvider","jsxs","Styled.DragAndDropWrapper","ThumbnailWrapper","ThumbnailUploader"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBO,MAAM,0BAA0B,CAAC;AAAA,EACtC,WAAW,CAAC;AAAA,EACZ;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,YAAY;AAAA,EACZ;AACF,MAAoC;AAClC,QAAM,CAAC,gBAAgB,iBAAiB,IAAIA,MAAAA,SAAS,KAAK;AAC1D,QAAM,CAAC,iBAAiB,kBAAkB,IAAIA,MAAAA,SAAS,KAAK;AAEtD,QAAA,CAAC,cAAc,IAAIC,uCAA0B;AAEnD,QAAM,wBAAwB,OAAO,aAAoB,OAAO;AAE9D,sBAAkB,KAAK;AACvB,uBAAmB,KAAK;AAGpB,QAAA,CAAC,SAAS,QAAQ;AACpB;AAAA,IAAA;AAIF,UAAM,gBAAe,oBAAI,KAAK,GAAE,YAAY;AAE5C,QAAI,aAA0B,CAAC;AAG/B,eAAW,UAAU,YAAY;AACzB,YAAA,gBAAgB,SAAS,KAAK,CAAC,MAAM,EAAE,OAAO,OAAO,EAAE;AAC7D,UAAI,CAAC,cAAe;AACA,aAAO;AACrB,YAAA,mBAAmB,OAAO,SAAS,CAAC;AAE1C,iBAAW,KAAK;AAAA,QACd,IAAI,cAAc;AAAA,QAClB,aAAa,cAAc;AAAA,QAC3B,MAAM,EAAE,WAAW,aAAa;AAAA,QAChC;AAAA,MAAA,CACD;AAEoB,OAAA;AAAA,QACnB,WAAW,cAAc;AAAA,MAG3B;AAAA,IAEgC;AAG9B,QAAA;AACF,YAAM,eAAe,EAAE,YAAY,YAAY;AAC/C,oBAAc,WAAW,UAAU;AAAA,aAC5B,OAAO;AACN,cAAA,MAAM,8BAA8B,KAAK;AAAA,IAAA;AAAA,EAErD;AAEM,QAAA,WAAWC,aAAyB,IAAI;AAG5C,SAAAC,2BAAA,kBAAA;AAAA,IAACC,yBAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MAEA,UAAAC,2BAAA,kBAAA;AAAA,QAACC,+BAAO;AAAA,QAAP;AAAA,UACC,WAAW,KAAK,EAAE,WAAW;AAAA,UAC7B,aAAa,MAAM,kBAAkB,IAAI;AAAA,UAEzC,UAAA;AAAA,YAAAH,iDAACI,0BAAAA,kBACC,EAAA,UAAAJ,2BAAAA,kBAAAA,IAAC,OAAK,EAAA,SAAS,CAAA,GACjB;AAAA,YACAA,2BAAA,kBAAA;AAAA,cAACK,kBAAA;AAAA,cAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA,WAAW,KAAK,sBAAsB,EAAE,QAAQ,CAAC,kBAAkB,CAAC,iBAAiB;AAAA,gBACrF,oBAAoB,MAAM,mBAAmB,IAAI;AAAA,gBACjD,UAAU;AAAA,gBACV,aAAa,MAAM,kBAAkB,KAAK;AAAA,gBAC1C,YAAY,CAAC,MAAM,EAAE,eAAe;AAAA,cAAA;AAAA,YAAA;AAAA,UACtC;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAEJ;;"}
+{"version":3,"file":"EntityThumbnailUploader.cjs.js","sources":["../../../../../src/components/EntityThumbnailUploader/EntityThumbnailUploader.tsx"],"sourcesContent":["import { useRef, useState } from 'react'\nimport clsx from 'clsx'\n\nimport { ThumbnailUploader } from '@shared/components'\nimport { ThumbnailWrapper } from '@shared/containers'\nimport { useUpdateEntitiesMutation } from '@shared/api'\nimport * as Styled from './EntityThumbnailUploader.styled'\nimport { ThumbnailUploadProvider } from '../../context/ThumbnailUploaderContext'\n\ntype Operation = {\n  id: string\n  projectName: string\n  currentAssignees: any[]\n  data: { updatedAt: string }\n}\nexport type EntityThumbnailUploaderProps = {\n  entityType: string\n  entities: any[]\n  isCompact?: boolean\n  projectName: any\n  children?: JSX.Element | JSX.Element[]\n  onUploaded?: (operations: Operation[]) => void\n  resetFileUploadState?: () => void\n}\n\nexport const EntityThumbnailUploader = ({\n  children = [],\n  entityType,\n  entities = [],\n  isCompact = false,\n  onUploaded,\n}: EntityThumbnailUploaderProps) => {\n  const [isDraggingFile, setIsDraggingFile] = useState(false)\n  const [isUploadingFile, setIsUploadingFile] = useState(false)\n\n  const [updateEntities] = useUpdateEntitiesMutation()\n\n  const handleThumbnailUpload = async (thumbnails: any[] = []) => {\n    // always set isDraggingFile to false\n    setIsDraggingFile(false)\n    setIsUploadingFile(false)\n\n    // check something was actually uploaded\n    if (!entities.length) {\n      return\n    }\n\n    // patching the updatedAt will force a refresh of the thumbnail url\n    const newUpdatedAt = new Date().toISOString()\n\n    let operations: Operation[] = []\n    let versionPatches = []\n\n    for (const entity of thumbnails) {\n      const entityToPatch = entities.find((e) => e.id === entity.id)\n      if (!entityToPatch) continue\n      const thumbnailId = entity.thumbnailId\n      const currentAssignees = entity.users || []\n\n      operations.push({\n        id: entityToPatch.id,\n        projectName: entityToPatch.projectName,\n        data: { updatedAt: newUpdatedAt },\n        currentAssignees,\n      })\n\n      const versionPatch = {\n        productId: entityToPatch.productId,\n        versionUpdatedAt: newUpdatedAt,\n        versionThumbnailId: thumbnailId,\n      }\n\n      versionPatches.push(versionPatch)\n    }\n\n    try {\n      await updateEntities({ operations, entityType })\n      onUploaded && onUploaded(operations)\n    } catch (error) {\n      console.error('Error uploading thumbnail:', error)\n    }\n  }\n\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  return (\n    <ThumbnailUploadProvider\n      entities={entities}\n      handleThumbnailUpload={handleThumbnailUpload}\n      inputRef={inputRef}\n    >\n      <Styled.DragAndDropWrapper\n        className={clsx({ isCompact })}\n        onDragEnter={() => setIsDraggingFile(true)}\n      >\n        <ThumbnailWrapper>\n          <div>{children}</div>\n        </ThumbnailWrapper>\n        <ThumbnailUploader\n          entities={entities}\n          inputRef={inputRef}\n          className={clsx('thumbnail-uploader', { hidden: !isDraggingFile && !isUploadingFile })}\n          onUploadInProgress={() => setIsUploadingFile(true)}\n          onFinish={handleThumbnailUpload}\n          onDragLeave={() => setIsDraggingFile(false)}\n          onDragOver={(e) => e.preventDefault()}\n        />\n      </Styled.DragAndDropWrapper>\n    </ThumbnailUploadProvider>\n  )\n}\n"],"names":["useState","useUpdateEntitiesMutation","useRef","jsx","ThumbnailUploadProvider","jsxs","Styled.DragAndDropWrapper","ThumbnailWrapper","ThumbnailUploader"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBO,MAAM,0BAA0B,CAAC;AAAA,EACtC,WAAW,CAAC;AAAA,EACZ;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,YAAY;AAAA,EACZ;AACF,MAAoC;AAClC,QAAM,CAAC,gBAAgB,iBAAiB,IAAIA,MAAAA,SAAS,KAAK;AAC1D,QAAM,CAAC,iBAAiB,kBAAkB,IAAIA,MAAAA,SAAS,KAAK;AAEtD,QAAA,CAAC,cAAc,IAAIC,uCAA0B;AAEnD,QAAM,wBAAwB,OAAO,aAAoB,OAAO;AAE9D,sBAAkB,KAAK;AACvB,uBAAmB,KAAK;AAGpB,QAAA,CAAC,SAAS,QAAQ;AACpB;AAAA,IAAA;AAIF,UAAM,gBAAe,oBAAI,KAAK,GAAE,YAAY;AAE5C,QAAI,aAA0B,CAAC;AAG/B,eAAW,UAAU,YAAY;AACzB,YAAA,gBAAgB,SAAS,KAAK,CAAC,MAAM,EAAE,OAAO,OAAO,EAAE;AAC7D,UAAI,CAAC,cAAe;AACA,aAAO;AACrB,YAAA,mBAAmB,OAAO,SAAS,CAAC;AAE1C,iBAAW,KAAK;AAAA,QACd,IAAI,cAAc;AAAA,QAClB,aAAa,cAAc;AAAA,QAC3B,MAAM,EAAE,WAAW,aAAa;AAAA,QAChC;AAAA,MAAA,CACD;AAEoB,OAAA;AAAA,QACnB,WAAW,cAAc;AAAA,MAG3B;AAAA,IAEgC;AAG9B,QAAA;AACF,YAAM,eAAe,EAAE,YAAY,YAAY;AAC/C,oBAAc,WAAW,UAAU;AAAA,aAC5B,OAAO;AACN,cAAA,MAAM,8BAA8B,KAAK;AAAA,IAAA;AAAA,EAErD;AAEM,QAAA,WAAWC,aAAyB,IAAI;AAG5C,SAAAC,2BAAA,kBAAA;AAAA,IAACC,yBAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MAEA,UAAAC,2BAAA,kBAAA;AAAA,QAACC,+BAAO;AAAA,QAAP;AAAA,UACC,WAAW,KAAK,EAAE,WAAW;AAAA,UAC7B,aAAa,MAAM,kBAAkB,IAAI;AAAA,UAEzC,UAAA;AAAA,YAAAH,iDAACI,0BAAAA,kBACC,EAAA,UAAAJ,2BAAAA,kBAAAA,IAAC,OAAK,EAAA,SAAS,CAAA,GACjB;AAAA,YACAA,2BAAA,kBAAA;AAAA,cAACK,kBAAA;AAAA,cAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA,WAAW,KAAK,sBAAsB,EAAE,QAAQ,CAAC,kBAAkB,CAAC,iBAAiB;AAAA,gBACrF,oBAAoB,MAAM,mBAAmB,IAAI;AAAA,gBACjD,UAAU;AAAA,gBACV,aAAa,MAAM,kBAAkB,KAAK;AAAA,gBAC1C,YAAY,CAAC,MAAM,EAAE,eAAe;AAAA,cAAA;AAAA,YAAA;AAAA,UACtC;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAEJ;;"}

package/dist/shared/src/components/EntityThumbnailUploader/EntityThumbnailUploader.es.js

@@ -41,6 +41,7 @@ import "../../api/generated/users.es.js";
 import "../../api/generated/versions.es.js";
 import "../../api/generated/workfiles.es.js";
 import "../../api/generated/ynputCloud.es.js";
+import "../../api/generated/grouping.es.js";
 import "../../api/queries/actions/getActions.es.js";
 import "../../api/queries/activities/getActivities.es.js";
 import "../../api/queries/activities/updateActivities.es.js";
@@ -71,6 +72,7 @@ import "../../api/queries/users/getUsers.es.js";
 import "../../api/queries/users/updateUsers.es.js";
 import "../../api/queries/watchers/getWatchers.es.js";
 import "../../api/queries/permissions/getPermissions.es.js";
+import "../../api/queries/grouping/getGrouping.es.js";
 import "@dnd-kit/core";
 import "@dnd-kit/sortable";
 import "../ReviewablesList/ReviewablesList.styled.es.js";
@@ -89,6 +91,7 @@ import "react-dom";
 import "../../context/pip/PiPWrapper.es.js";
 import "../../context/AddonProjectContext.es.js";
 import "../../context/AddonContext.es.js";
+import "../../context/PowerpackContext.es.js";
 import "../ReviewableCard/ReviewableCard.es.js";
 import "../ReviewableProgressCard/ReviewableProgressCard.styled.es.js";
 import "../FileThumbnail/FileThumbnail.es.js";
@@ -132,6 +135,7 @@ import "../../containers/ProjectTreeTable/context/CellEditingContext.es.js";
 import "../../containers/ProjectTreeTable/context/ClipboardContext.es.js";
 import "../../containers/ProjectTreeTable/context/ProjectTableSelectionContext.es.js";
 import "../../containers/ProjectTreeTable/context/ProjectDataContext.es.js";
+import "../../containers/ProjectTreeTable/context/ProjectTableModulesContext.es.js";
 import "@tanstack/react-table";
 import "../../containers/ProjectTreeTable/widgets/CollapsedWidget.es.js";
 import "../../containers/ProjectTreeTable/widgets/DateWidget.es.js";
@@ -140,10 +144,12 @@ import "../../containers/ProjectTreeTable/widgets/TextWidget.es.js";
 import "../../containers/ProjectTreeTable/widgets/BooleanWidget.es.js";
 import "../../containers/ProjectTreeTable/widgets/CellWidget.es.js";
 import "../../containers/ProjectTreeTable/widgets/EntityNameWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/GroupHeaderWidget.es.js";
 import "../../containers/ProjectTreeTable/widgets/ThumbnailWidget.es.js";
 import "../../containers/ProjectTreeTable/ProjectTreeTable.styled.es.js";
 import "../../containers/ProjectTreeTable/components/SelectionCell.es.js";
 import "../../containers/ProjectTreeTable/components/RowSelectionHeader.es.js";
+import "../../containers/ProjectTreeTable/widgets/LoadMoreWidget.es.js";
 import "../../containers/DetailsPanel/DetailsPanel.styled.es.js";
 import "../../../../_virtual/runtime.es.js";
 import "../../../../_virtual/semver.es.js";
@@ -165,11 +171,15 @@ import "../EntityPath/SegmentProvider.es.js";
 import "../DetailsPanelAttributes/DetailsPanelAttributesEditor.es.js";
 import "../Watchers/Watchers.es.js";
 import "../ProjectTableSettings/ProjectTableSettings.es.js";
+import "../Powerpack/PowerpackButton.es.js";
+import "../Powerpack/PricingLink.es.js";
+import "../Powerpack/PowerpackDialog.styled.es.js";
 import "../SettingsPanel/SettingsPanel.es.js";
 import "../SettingsPanel/SettingsPanelItemTemplate.es.js";
 import "../AttributeEditor/components/MinMaxField.es.js";
 import "../EnumEditor/EnumEditor.styled.es.js";
 import "../SearchFilter/filterDates.es.js";
+import "../Badge/Badge.es.js";
 const EntityThumbnailUploader = ({
   children = [],
   entityType,

package/dist/shared/src/components/EntityThumbnailUploader/EntityThumbnailUploader.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"EntityThumbnailUploader.es.js","sources":["../../../../../src/components/EntityThumbnailUploader/EntityThumbnailUploader.tsx"],"sourcesContent":["import { useRef, useState } from 'react'\nimport clsx from 'clsx'\n\nimport { ThumbnailUploader } from '@shared/components'\nimport { ThumbnailWrapper } from '@shared/containers'\nimport { useUpdateEntitiesMutation } from '@shared/api'\nimport * as Styled from './EntityThumbnailUploader.styled'\nimport { ThumbnailUploadProvider } from '../../context/ThumbnailUploaderContext'\n\ntype Operation = {\n  id: string\n  projectName: string\n  currentAssignees: any[]\n  data: { updatedAt: string }\n}\nexport type EntityThumbnailUploaderProps = {\n  entityType: string\n  entities: any[]\n  isCompact?: boolean\n  projectName: any\n  children?: JSX.Element | JSX.Element[]\n  onUploaded?: (operations: Operation[]) => void\n  resetFileUploadState?: () => void\n}\n\nexport const EntityThumbnailUploader = ({\n  children = [],\n  entityType,\n  entities = [],\n  isCompact = false,\n  onUploaded,\n}: EntityThumbnailUploaderProps) => {\n  const [isDraggingFile, setIsDraggingFile] = useState(false)\n  const [isUploadingFile, setIsUploadingFile] = useState(false)\n\n  const [updateEntities] = useUpdateEntitiesMutation()\n\n  const handleThumbnailUpload = async (thumbnails: any[] = []) => {\n    // always set isDraggingFile to false\n    setIsDraggingFile(false)\n    setIsUploadingFile(false)\n\n    // check something was actually uploaded\n    if (!entities.length) {\n      return\n    }\n\n    // patching the updatedAt will force a refresh of the thumbnail url\n    const newUpdatedAt = new Date().toISOString()\n\n    let operations: Operation[] = []\n    let versionPatches = []\n\n    for (const entity of thumbnails) {\n      const entityToPatch = entities.find((e) => e.id === entity.id)\n      if (!entityToPatch) continue\n      const thumbnailId = entity.thumbnailId\n      const currentAssignees = entity.users || []\n\n      operations.push({\n        id: entityToPatch.id,\n        projectName: entityToPatch.projectName,\n        data: { updatedAt: newUpdatedAt },\n        currentAssignees,\n      })\n\n      const versionPatch = {\n        productId: entityToPatch.productId,\n        versionUpdatedAt: newUpdatedAt,\n        versionThumbnailId: thumbnailId,\n      }\n\n      versionPatches.push(versionPatch)\n    }\n\n    try {\n      await updateEntities({ operations, entityType })\n      onUploaded && onUploaded(operations)\n    } catch (error) {\n      console.error('Error uploading thumbnail:', error)\n    }\n  }\n\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  return (\n    <ThumbnailUploadProvider\n      entities={entities}\n      handleThumbnailUpload={handleThumbnailUpload}\n      inputRef={inputRef}\n    >\n      <Styled.DragAndDropWrapper\n        className={clsx({ isCompact })}\n        onDragEnter={() => setIsDraggingFile(true)}\n      >\n        <ThumbnailWrapper>\n          <div>{children}</div>\n        </ThumbnailWrapper>\n        <ThumbnailUploader\n          entities={entities}\n          inputRef={inputRef}\n          className={clsx('thumbnail-uploader', { hidden: !isDraggingFile && !isUploadingFile })}\n          onUploadInProgress={() => setIsUploadingFile(true)}\n          onFinish={handleThumbnailUpload}\n          onDragLeave={() => setIsDraggingFile(false)}\n          onDragOver={(e) => e.preventDefault()}\n        />\n      </Styled.DragAndDropWrapper>\n    </ThumbnailUploadProvider>\n  )\n}\n"],"names":["jsx","jsxs","Styled.DragAndDropWrapper"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBO,MAAM,0BAA0B,CAAC;AAAA,EACtC,WAAW,CAAC;AAAA,EACZ;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,YAAY;AAAA,EACZ;AACF,MAAoC;AAClC,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,KAAK;AAC1D,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,KAAK;AAEtD,QAAA,CAAC,cAAc,IAAI,0BAA0B;AAEnD,QAAM,wBAAwB,OAAO,aAAoB,OAAO;AAE9D,sBAAkB,KAAK;AACvB,uBAAmB,KAAK;AAGpB,QAAA,CAAC,SAAS,QAAQ;AACpB;AAAA,IAAA;AAIF,UAAM,gBAAe,oBAAI,KAAK,GAAE,YAAY;AAE5C,QAAI,aAA0B,CAAC;AAG/B,eAAW,UAAU,YAAY;AACzB,YAAA,gBAAgB,SAAS,KAAK,CAAC,MAAM,EAAE,OAAO,OAAO,EAAE;AAC7D,UAAI,CAAC,cAAe;AACA,aAAO;AACrB,YAAA,mBAAmB,OAAO,SAAS,CAAC;AAE1C,iBAAW,KAAK;AAAA,QACd,IAAI,cAAc;AAAA,QAClB,aAAa,cAAc;AAAA,QAC3B,MAAM,EAAE,WAAW,aAAa;AAAA,QAChC;AAAA,MAAA,CACD;AAEoB,OAAA;AAAA,QACnB,WAAW,cAAc;AAAA,MAG3B;AAAA,IAEgC;AAG9B,QAAA;AACF,YAAM,eAAe,EAAE,YAAY,YAAY;AAC/C,oBAAc,WAAW,UAAU;AAAA,aAC5B,OAAO;AACN,cAAA,MAAM,8BAA8B,KAAK;AAAA,IAAA;AAAA,EAErD;AAEM,QAAA,WAAW,OAAyB,IAAI;AAG5C,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MAEA,UAAAC,kCAAA;AAAA,QAACC;AAAAA,QAAA;AAAA,UACC,WAAW,KAAK,EAAE,WAAW;AAAA,UAC7B,aAAa,MAAM,kBAAkB,IAAI;AAAA,UAEzC,UAAA;AAAA,YAAAF,sCAAC,kBACC,EAAA,UAAAA,kCAAAA,IAAC,OAAK,EAAA,SAAS,CAAA,GACjB;AAAA,YACAA,kCAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA,WAAW,KAAK,sBAAsB,EAAE,QAAQ,CAAC,kBAAkB,CAAC,iBAAiB;AAAA,gBACrF,oBAAoB,MAAM,mBAAmB,IAAI;AAAA,gBACjD,UAAU;AAAA,gBACV,aAAa,MAAM,kBAAkB,KAAK;AAAA,gBAC1C,YAAY,CAAC,MAAM,EAAE,eAAe;AAAA,cAAA;AAAA,YAAA;AAAA,UACtC;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"EntityThumbnailUploader.es.js","sources":["../../../../../src/components/EntityThumbnailUploader/EntityThumbnailUploader.tsx"],"sourcesContent":["import { useRef, useState } from 'react'\nimport clsx from 'clsx'\n\nimport { ThumbnailUploader } from '@shared/components'\nimport { ThumbnailWrapper } from '@shared/containers'\nimport { useUpdateEntitiesMutation } from '@shared/api'\nimport * as Styled from './EntityThumbnailUploader.styled'\nimport { ThumbnailUploadProvider } from '../../context/ThumbnailUploaderContext'\n\ntype Operation = {\n  id: string\n  projectName: string\n  currentAssignees: any[]\n  data: { updatedAt: string }\n}\nexport type EntityThumbnailUploaderProps = {\n  entityType: string\n  entities: any[]\n  isCompact?: boolean\n  projectName: any\n  children?: JSX.Element | JSX.Element[]\n  onUploaded?: (operations: Operation[]) => void\n  resetFileUploadState?: () => void\n}\n\nexport const EntityThumbnailUploader = ({\n  children = [],\n  entityType,\n  entities = [],\n  isCompact = false,\n  onUploaded,\n}: EntityThumbnailUploaderProps) => {\n  const [isDraggingFile, setIsDraggingFile] = useState(false)\n  const [isUploadingFile, setIsUploadingFile] = useState(false)\n\n  const [updateEntities] = useUpdateEntitiesMutation()\n\n  const handleThumbnailUpload = async (thumbnails: any[] = []) => {\n    // always set isDraggingFile to false\n    setIsDraggingFile(false)\n    setIsUploadingFile(false)\n\n    // check something was actually uploaded\n    if (!entities.length) {\n      return\n    }\n\n    // patching the updatedAt will force a refresh of the thumbnail url\n    const newUpdatedAt = new Date().toISOString()\n\n    let operations: Operation[] = []\n    let versionPatches = []\n\n    for (const entity of thumbnails) {\n      const entityToPatch = entities.find((e) => e.id === entity.id)\n      if (!entityToPatch) continue\n      const thumbnailId = entity.thumbnailId\n      const currentAssignees = entity.users || []\n\n      operations.push({\n        id: entityToPatch.id,\n        projectName: entityToPatch.projectName,\n        data: { updatedAt: newUpdatedAt },\n        currentAssignees,\n      })\n\n      const versionPatch = {\n        productId: entityToPatch.productId,\n        versionUpdatedAt: newUpdatedAt,\n        versionThumbnailId: thumbnailId,\n      }\n\n      versionPatches.push(versionPatch)\n    }\n\n    try {\n      await updateEntities({ operations, entityType })\n      onUploaded && onUploaded(operations)\n    } catch (error) {\n      console.error('Error uploading thumbnail:', error)\n    }\n  }\n\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  return (\n    <ThumbnailUploadProvider\n      entities={entities}\n      handleThumbnailUpload={handleThumbnailUpload}\n      inputRef={inputRef}\n    >\n      <Styled.DragAndDropWrapper\n        className={clsx({ isCompact })}\n        onDragEnter={() => setIsDraggingFile(true)}\n      >\n        <ThumbnailWrapper>\n          <div>{children}</div>\n        </ThumbnailWrapper>\n        <ThumbnailUploader\n          entities={entities}\n          inputRef={inputRef}\n          className={clsx('thumbnail-uploader', { hidden: !isDraggingFile && !isUploadingFile })}\n          onUploadInProgress={() => setIsUploadingFile(true)}\n          onFinish={handleThumbnailUpload}\n          onDragLeave={() => setIsDraggingFile(false)}\n          onDragOver={(e) => e.preventDefault()}\n        />\n      </Styled.DragAndDropWrapper>\n    </ThumbnailUploadProvider>\n  )\n}\n"],"names":["jsx","jsxs","Styled.DragAndDropWrapper"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBO,MAAM,0BAA0B,CAAC;AAAA,EACtC,WAAW,CAAC;AAAA,EACZ;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,YAAY;AAAA,EACZ;AACF,MAAoC;AAClC,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,KAAK;AAC1D,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,KAAK;AAEtD,QAAA,CAAC,cAAc,IAAI,0BAA0B;AAEnD,QAAM,wBAAwB,OAAO,aAAoB,OAAO;AAE9D,sBAAkB,KAAK;AACvB,uBAAmB,KAAK;AAGpB,QAAA,CAAC,SAAS,QAAQ;AACpB;AAAA,IAAA;AAIF,UAAM,gBAAe,oBAAI,KAAK,GAAE,YAAY;AAE5C,QAAI,aAA0B,CAAC;AAG/B,eAAW,UAAU,YAAY;AACzB,YAAA,gBAAgB,SAAS,KAAK,CAAC,MAAM,EAAE,OAAO,OAAO,EAAE;AAC7D,UAAI,CAAC,cAAe;AACA,aAAO;AACrB,YAAA,mBAAmB,OAAO,SAAS,CAAC;AAE1C,iBAAW,KAAK;AAAA,QACd,IAAI,cAAc;AAAA,QAClB,aAAa,cAAc;AAAA,QAC3B,MAAM,EAAE,WAAW,aAAa;AAAA,QAChC;AAAA,MAAA,CACD;AAEoB,OAAA;AAAA,QACnB,WAAW,cAAc;AAAA,MAG3B;AAAA,IAEgC;AAG9B,QAAA;AACF,YAAM,eAAe,EAAE,YAAY,YAAY;AAC/C,oBAAc,WAAW,UAAU;AAAA,aAC5B,OAAO;AACN,cAAA,MAAM,8BAA8B,KAAK;AAAA,IAAA;AAAA,EAErD;AAEM,QAAA,WAAW,OAAyB,IAAI;AAG5C,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MAEA,UAAAC,kCAAA;AAAA,QAACC;AAAAA,QAAA;AAAA,UACC,WAAW,KAAK,EAAE,WAAW;AAAA,UAC7B,aAAa,MAAM,kBAAkB,IAAI;AAAA,UAEzC,UAAA;AAAA,YAAAF,sCAAC,kBACC,EAAA,UAAAA,kCAAAA,IAAC,OAAK,EAAA,SAAS,CAAA,GACjB;AAAA,YACAA,kCAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBACA,WAAW,KAAK,sBAAsB,EAAE,QAAQ,CAAC,kBAAkB,CAAC,iBAAiB;AAAA,gBACrF,oBAAoB,MAAM,mBAAmB,IAAI;AAAA,gBACjD,UAAU;AAAA,gBACV,aAAa,MAAM,kBAAkB,KAAK;AAAA,gBAC1C,YAAY,CAAC,MAAM,EAAE,eAAe;AAAA,cAAA;AAAA,YAAA;AAAA,UACtC;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAEJ;"}

package/dist/shared/src/components/Powerpack/PowerpackButton.cjs.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../../_virtual/jsx-runtime.cjs.js");
+require("../../context/RemoteModulesContext.cjs.js");
+require("../../context/DetailsPanelContext.cjs.js");
+require("../../context/ThumbnailUploaderContext.cjs.js");
+require("../../context/SettingsPanelContext.cjs.js");
+require("../../context/pip/PiPProvider.cjs.js");
+require("react-dom");
+require("../../context/pip/PiPWrapper.cjs.js");
+require("../../context/AddonProjectContext.cjs.js");
+require("../../context/AddonContext.cjs.js");
+const PowerpackContext = require("../../context/PowerpackContext.cjs.js");
+const ayonReactComponents = require("@ynput/ayon-react-components");
+const clsx = require("clsx");
+const React = require("react");
+const styled = require("styled-components");
+const StyledButton = styled(ayonReactComponents.Button)`
+  background-color: unset;
+  color: var(--md-sys-color-tertiary);
+  transition: color 0.2s, background-color 0.2s, opacity 0.2s;
+  border-radius: var(--border-radius-xl);
+
+  &.filled {
+    background-color: var(--md-sys-color-tertiary);
+    color: var(--md-sys-color-on-tertiary);
+  }
+
+  &.border {
+    border: 1px solid var(--md-sys-color-tertiary);
+  }
+
+  &:hover {
+    color: var(--md-sys-color-on-tertiary);
+  }
+
+  .icon {
+    font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 200, 'opsz' 20;
+  }
+`;
+const PowerpackButton = React.forwardRef(
+  ({ feature, filled, ...props }, ref) => {
+    const { setPowerpackDialog } = PowerpackContext.usePowerpack();
+    const handleOnClick = (e) => {
+      var _a;
+      setPowerpackDialog(feature);
+      (_a = props.onClick) == null ? void 0 : _a.call(props, e);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+      StyledButton,
+      {
+        variant: props.variant || "tertiary",
+        icon: props.icon || "bolt",
+        ...props,
+        ref,
+        onClick: handleOnClick,
+        className: clsx("cloud-button", props.className || "", {
+          border: !!props.children,
+          filled
+        }),
+        "data-tooltip": `Power feature`,
+        "data-tooltip-delay": 0,
+        children: props.children
+      }
+    );
+  }
+);
+exports.PowerpackButton = PowerpackButton;
+//# sourceMappingURL=PowerpackButton.cjs.js.map

package/dist/shared/src/components/Powerpack/PowerpackButton.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PowerpackButton.cjs.js","sources":["../../../../../src/components/Powerpack/PowerpackButton.tsx"],"sourcesContent":["import { PowerpackFeature, usePowerpack } from '@shared/context'\nimport { Button, ButtonProps } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport { forwardRef, MouseEvent } from 'react'\nimport styled from 'styled-components'\n\nconst StyledButton = styled(Button)`\n  background-color: unset;\n  color: var(--md-sys-color-tertiary);\n  transition: color 0.2s, background-color 0.2s, opacity 0.2s;\n  border-radius: var(--border-radius-xl);\n\n  &.filled {\n    background-color: var(--md-sys-color-tertiary);\n    color: var(--md-sys-color-on-tertiary);\n  }\n\n  &.border {\n    border: 1px solid var(--md-sys-color-tertiary);\n  }\n\n  &:hover {\n    color: var(--md-sys-color-on-tertiary);\n  }\n\n  .icon {\n    font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 200, 'opsz' 20;\n  }\n`\n\nexport interface PowerpackButtonProps extends ButtonProps {\n  feature: PowerpackFeature\n  filled?: boolean\n}\n\nexport const PowerpackButton = forwardRef<HTMLButtonElement, PowerpackButtonProps>(\n  ({ feature, filled, ...props }, ref) => {\n    const { setPowerpackDialog } = usePowerpack()\n\n    const handleOnClick = (e: MouseEvent<HTMLButtonElement>) => {\n      // open a dialog to subscribe to Ynput Cloud\n      setPowerpackDialog(feature)\n      // Call the original onClick handler\n      props.onClick?.(e)\n    }\n\n    return (\n      <StyledButton\n        variant={props.variant || 'tertiary'}\n        icon={props.icon || 'bolt'}\n        {...props}\n        ref={ref}\n        onClick={handleOnClick}\n        className={clsx('cloud-button', props.className || '', {\n          border: !!props.children,\n          filled,\n        })}\n        data-tooltip={`Power feature`}\n        data-tooltip-delay={0}\n      >\n        {props.children}\n      </StyledButton>\n    )\n  },\n)\n"],"names":["Button","forwardRef","usePowerpack","jsx"],"mappings":";;;;;;;;;;;;;;;;;AAMA,MAAM,eAAe,OAAOA,0BAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6B3B,MAAM,kBAAkBC,MAAA;AAAA,EAC7B,CAAC,EAAE,SAAS,QAAQ,GAAG,MAAA,GAAS,QAAQ;AAChC,UAAA,EAAE,mBAAmB,IAAIC,8BAAa;AAEtC,UAAA,gBAAgB,CAAC,MAAqC;;AAE1D,yBAAmB,OAAO;AAE1B,kBAAM,YAAN,+BAAgB;AAAA,IAClB;AAGE,WAAAC,2BAAA,kBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS,MAAM,WAAW;AAAA,QAC1B,MAAM,MAAM,QAAQ;AAAA,QACnB,GAAG;AAAA,QACJ;AAAA,QACA,SAAS;AAAA,QACT,WAAW,KAAK,gBAAgB,MAAM,aAAa,IAAI;AAAA,UACrD,QAAQ,CAAC,CAAC,MAAM;AAAA,UAChB;AAAA,QAAA,CACD;AAAA,QACD,gBAAc;AAAA,QACd,sBAAoB;AAAA,QAEnB,UAAM,MAAA;AAAA,MAAA;AAAA,IACT;AAAA,EAAA;AAGN;;"}

package/dist/shared/src/components/Powerpack/PowerpackButton.es.js

@@ -0,0 +1,69 @@
+import { j as jsxRuntimeExports } from "../../../../_virtual/jsx-runtime.es.js";
+import "../../context/RemoteModulesContext.es.js";
+import "../../context/DetailsPanelContext.es.js";
+import "../../context/ThumbnailUploaderContext.es.js";
+import "../../context/SettingsPanelContext.es.js";
+import "../../context/pip/PiPProvider.es.js";
+import "react-dom";
+import "../../context/pip/PiPWrapper.es.js";
+import "../../context/AddonProjectContext.es.js";
+import "../../context/AddonContext.es.js";
+import { usePowerpack } from "../../context/PowerpackContext.es.js";
+import { Button } from "@ynput/ayon-react-components";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import styled from "styled-components";
+const StyledButton = styled(Button)`
+  background-color: unset;
+  color: var(--md-sys-color-tertiary);
+  transition: color 0.2s, background-color 0.2s, opacity 0.2s;
+  border-radius: var(--border-radius-xl);
+
+  &.filled {
+    background-color: var(--md-sys-color-tertiary);
+    color: var(--md-sys-color-on-tertiary);
+  }
+
+  &.border {
+    border: 1px solid var(--md-sys-color-tertiary);
+  }
+
+  &:hover {
+    color: var(--md-sys-color-on-tertiary);
+  }
+
+  .icon {
+    font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 200, 'opsz' 20;
+  }
+`;
+const PowerpackButton = forwardRef(
+  ({ feature, filled, ...props }, ref) => {
+    const { setPowerpackDialog } = usePowerpack();
+    const handleOnClick = (e) => {
+      var _a;
+      setPowerpackDialog(feature);
+      (_a = props.onClick) == null ? void 0 : _a.call(props, e);
+    };
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      StyledButton,
+      {
+        variant: props.variant || "tertiary",
+        icon: props.icon || "bolt",
+        ...props,
+        ref,
+        onClick: handleOnClick,
+        className: clsx("cloud-button", props.className || "", {
+          border: !!props.children,
+          filled
+        }),
+        "data-tooltip": `Power feature`,
+        "data-tooltip-delay": 0,
+        children: props.children
+      }
+    );
+  }
+);
+export {
+  PowerpackButton
+};
+//# sourceMappingURL=PowerpackButton.es.js.map

package/dist/shared/src/components/Powerpack/PowerpackButton.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PowerpackButton.es.js","sources":["../../../../../src/components/Powerpack/PowerpackButton.tsx"],"sourcesContent":["import { PowerpackFeature, usePowerpack } from '@shared/context'\nimport { Button, ButtonProps } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport { forwardRef, MouseEvent } from 'react'\nimport styled from 'styled-components'\n\nconst StyledButton = styled(Button)`\n  background-color: unset;\n  color: var(--md-sys-color-tertiary);\n  transition: color 0.2s, background-color 0.2s, opacity 0.2s;\n  border-radius: var(--border-radius-xl);\n\n  &.filled {\n    background-color: var(--md-sys-color-tertiary);\n    color: var(--md-sys-color-on-tertiary);\n  }\n\n  &.border {\n    border: 1px solid var(--md-sys-color-tertiary);\n  }\n\n  &:hover {\n    color: var(--md-sys-color-on-tertiary);\n  }\n\n  .icon {\n    font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 200, 'opsz' 20;\n  }\n`\n\nexport interface PowerpackButtonProps extends ButtonProps {\n  feature: PowerpackFeature\n  filled?: boolean\n}\n\nexport const PowerpackButton = forwardRef<HTMLButtonElement, PowerpackButtonProps>(\n  ({ feature, filled, ...props }, ref) => {\n    const { setPowerpackDialog } = usePowerpack()\n\n    const handleOnClick = (e: MouseEvent<HTMLButtonElement>) => {\n      // open a dialog to subscribe to Ynput Cloud\n      setPowerpackDialog(feature)\n      // Call the original onClick handler\n      props.onClick?.(e)\n    }\n\n    return (\n      <StyledButton\n        variant={props.variant || 'tertiary'}\n        icon={props.icon || 'bolt'}\n        {...props}\n        ref={ref}\n        onClick={handleOnClick}\n        className={clsx('cloud-button', props.className || '', {\n          border: !!props.children,\n          filled,\n        })}\n        data-tooltip={`Power feature`}\n        data-tooltip-delay={0}\n      >\n        {props.children}\n      </StyledButton>\n    )\n  },\n)\n"],"names":["jsx"],"mappings":";;;;;;;;;;;;;;;AAMA,MAAM,eAAe,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6B3B,MAAM,kBAAkB;AAAA,EAC7B,CAAC,EAAE,SAAS,QAAQ,GAAG,MAAA,GAAS,QAAQ;AAChC,UAAA,EAAE,mBAAmB,IAAI,aAAa;AAEtC,UAAA,gBAAgB,CAAC,MAAqC;;AAE1D,yBAAmB,OAAO;AAE1B,kBAAM,YAAN,+BAAgB;AAAA,IAClB;AAGE,WAAAA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS,MAAM,WAAW;AAAA,QAC1B,MAAM,MAAM,QAAQ;AAAA,QACnB,GAAG;AAAA,QACJ;AAAA,QACA,SAAS;AAAA,QACT,WAAW,KAAK,gBAAgB,MAAM,aAAa,IAAI;AAAA,UACrD,QAAQ,CAAC,CAAC,MAAM;AAAA,UAChB;AAAA,QAAA,CACD;AAAA,QACD,gBAAc;AAAA,QACd,sBAAoB;AAAA,QAEnB,UAAM,MAAA;AAAA,MAAA;AAAA,IACT;AAAA,EAAA;AAGN;"}

package/dist/shared/src/components/Powerpack/PowerpackDialog.cjs.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../../_virtual/jsx-runtime.cjs.js");
+const PowerpackDialog_styled = require("./PowerpackDialog.styled.cjs.js");
+const ayonReactComponents = require("@ynput/ayon-react-components");
+const PricingLink = require("./PricingLink.cjs.js");
+require("../../context/RemoteModulesContext.cjs.js");
+require("../../context/DetailsPanelContext.cjs.js");
+require("../../context/ThumbnailUploaderContext.cjs.js");
+require("../../context/SettingsPanelContext.cjs.js");
+require("../../context/pip/PiPProvider.cjs.js");
+require("react-dom");
+require("../../context/pip/PiPWrapper.cjs.js");
+require("../../context/AddonProjectContext.cjs.js");
+require("../../context/AddonContext.cjs.js");
+const PowerpackContext = require("../../context/PowerpackContext.cjs.js");
+const PowerpackDialog = ({}) => {
+  const { setPowerpackDialog, selectedPowerPack, powerpackDialog } = PowerpackContext.usePowerpack();
+  if (!powerpackDialog) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(PowerpackDialog_styled.PowerpackDialog, { isOpen: true, onClose: () => setPowerpackDialog(null), size: "lg", children: [
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(PowerpackDialog_styled.MainFeature, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("h1", { children: [
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ayonReactComponents.Icon, { icon: "bolt" }),
+        powerpackDialog.label
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("h2", { children: powerpackDialog.description })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(PowerpackDialog_styled.FeaturesList, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("h3", { children: [
+        "Unlock all ",
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ayonReactComponents.Icon, { icon: "bolt" }),
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("span", { className: "green", children: "Power Features" }),
+        " with an AYON subscription."
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("ul", { children: [
+        Object.entries(PowerpackContext.powerpackFeatures).sort(([key]) => key !== selectedPowerPack ? 1 : -1).map(([key, value]) => /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("li", { children: [
+          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ayonReactComponents.Icon, { icon: "check" }),
+          /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("span", { children: value.bullet })
+        ] }, key)),
+        /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("li", { className: "more", children: "More coming soon!" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(PricingLink.PricingLink, { children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(PowerpackDialog_styled.MoreButton, { children: "Find out more" }) })
+  ] });
+};
+exports.PowerpackDialog = PowerpackDialog;
+//# sourceMappingURL=PowerpackDialog.cjs.js.map

package/dist/shared/src/components/Powerpack/PowerpackDialog.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PowerpackDialog.cjs.js","sources":["../../../../../src/components/Powerpack/PowerpackDialog.tsx"],"sourcesContent":["import * as Styled from './PowerpackDialog.styled'\nimport { FC } from 'react'\nimport { Icon } from '@ynput/ayon-react-components'\nimport { PricingLink } from './PricingLink'\nimport { powerpackFeatures, usePowerpack } from '@shared/context'\n\nexport interface PowerpackDialogProps {}\n\nexport const PowerpackDialog: FC<PowerpackDialogProps> = ({}) => {\n  const { setPowerpackDialog, selectedPowerPack, powerpackDialog } = usePowerpack()\n\n  if (!powerpackDialog) return null\n\n  return (\n    <Styled.PowerpackDialog isOpen onClose={() => setPowerpackDialog(null)} size=\"lg\">\n      <Styled.MainFeature>\n        <h1>\n          <Icon icon=\"bolt\" />\n          {powerpackDialog.label}\n        </h1>\n        <h2>{powerpackDialog.description}</h2>\n      </Styled.MainFeature>\n\n      <Styled.FeaturesList>\n        <h3>\n          Unlock all <Icon icon=\"bolt\" /> <span className=\"green\">Power Features</span> with an AYON\n          subscription.\n        </h3>\n        <ul>\n          {Object.entries(powerpackFeatures)\n            .sort(([key]) => (key !== selectedPowerPack ? 1 : -1))\n            .map(([key, value]) => (\n              <li key={key}>\n                <Icon icon=\"check\" />\n                <span>{value.bullet}</span>\n              </li>\n            ))}\n          <li className=\"more\">More coming soon!</li>\n        </ul>\n      </Styled.FeaturesList>\n      <PricingLink>\n        <Styled.MoreButton>Find out more</Styled.MoreButton>\n      </PricingLink>\n    </Styled.PowerpackDialog>\n  )\n}\n"],"names":["usePowerpack","jsxs","Styled.PowerpackDialog","Styled.MainFeature","jsx","Icon","Styled.FeaturesList","powerpackFeatures","PricingLink","Styled.MoreButton"],"mappings":";;;;;;;;;;;;;;;;AAQa,MAAA,kBAA4C,CAAC,CAAA,MAAO;AAC/D,QAAM,EAAE,oBAAoB,mBAAmB,gBAAA,IAAoBA,iBAAAA,aAAa;AAE5E,MAAA,CAAC,gBAAwB,QAAA;AAE7B,SACGC,kDAAAC,uBAAAA,iBAAA,EAAuB,QAAM,MAAC,SAAS,MAAM,mBAAmB,IAAI,GAAG,MAAK,MAC3E,UAAA;AAAA,IAACD,kDAAAE,uBAAAA,aAAA,EACC,UAAA;AAAA,MAAAF,kDAAC,MACC,EAAA,UAAA;AAAA,QAACG,2BAAAA,kBAAAA,IAAAC,oBAAA,MAAA,EAAK,MAAK,OAAO,CAAA;AAAA,QACjB,gBAAgB;AAAA,MAAA,GACnB;AAAA,MACAD,2BAAAA,kBAAAA,IAAC,MAAI,EAAA,UAAA,gBAAgB,YAAY,CAAA;AAAA,IAAA,GACnC;AAAA,IAEAH,kDAACK,uBAAAA,cAAA,EACC,UAAA;AAAA,MAAAL,kDAAC,MAAG,EAAA,UAAA;AAAA,QAAA;AAAA,QACSG,2BAAAA,kBAAAA,IAACC,oBAAK,MAAA,EAAA,MAAK,OAAO,CAAA;AAAA,QAAE;AAAA,QAAED,2BAAA,kBAAA,IAAA,QAAA,EAAK,WAAU,SAAQ,UAAc,kBAAA;AAAA,QAAO;AAAA,MAAA,GAE/E;AAAA,wDACC,MACE,EAAA,UAAA;AAAA,QAAO,OAAA,QAAQG,iBAAAA,iBAAiB,EAC9B,KAAK,CAAC,CAAC,GAAG,MAAO,QAAQ,oBAAoB,IAAI,EAAG,EACpD,IAAI,CAAC,CAAC,KAAK,KAAK,wDACd,MACC,EAAA,UAAA;AAAA,UAACH,2BAAAA,kBAAAA,IAAAC,oBAAA,MAAA,EAAK,MAAK,QAAQ,CAAA;AAAA,UACnBD,2BAAAA,kBAAAA,IAAC,QAAM,EAAA,UAAA,MAAM,OAAO,CAAA;AAAA,QAAA,EAAA,GAFb,GAGT,CACD;AAAA,QACFA,2BAAA,kBAAA,IAAA,MAAA,EAAG,WAAU,QAAO,UAAiB,oBAAA,CAAA;AAAA,MAAA,EACxC,CAAA;AAAA,IAAA,GACF;AAAA,qDACCI,YAAAA,aACC,EAAA,UAAAJ,2BAAAA,kBAAAA,IAACK,uBAAAA,YAAA,EAAkB,2BAAa,EAClC,CAAA;AAAA,EAAA,GACF;AAEJ;;"}

package/dist/shared/src/components/Powerpack/PowerpackDialog.es.js

@@ -0,0 +1,48 @@
+import { j as jsxRuntimeExports } from "../../../../_virtual/jsx-runtime.es.js";
+import { PowerpackDialog as PowerpackDialog$1, MainFeature, FeaturesList, MoreButton } from "./PowerpackDialog.styled.es.js";
+import { Icon } from "@ynput/ayon-react-components";
+import { PricingLink } from "./PricingLink.es.js";
+import "../../context/RemoteModulesContext.es.js";
+import "../../context/DetailsPanelContext.es.js";
+import "../../context/ThumbnailUploaderContext.es.js";
+import "../../context/SettingsPanelContext.es.js";
+import "../../context/pip/PiPProvider.es.js";
+import "react-dom";
+import "../../context/pip/PiPWrapper.es.js";
+import "../../context/AddonProjectContext.es.js";
+import "../../context/AddonContext.es.js";
+import { usePowerpack, powerpackFeatures } from "../../context/PowerpackContext.es.js";
+const PowerpackDialog = ({}) => {
+  const { setPowerpackDialog, selectedPowerPack, powerpackDialog } = usePowerpack();
+  if (!powerpackDialog) return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(PowerpackDialog$1, { isOpen: true, onClose: () => setPowerpackDialog(null), size: "lg", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(MainFeature, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("h1", { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: "bolt" }),
+        powerpackDialog.label
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { children: powerpackDialog.description })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(FeaturesList, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("h3", { children: [
+        "Unlock all ",
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: "bolt" }),
+        " ",
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "green", children: "Power Features" }),
+        " with an AYON subscription."
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("ul", { children: [
+        Object.entries(powerpackFeatures).sort(([key]) => key !== selectedPowerPack ? 1 : -1).map(([key, value]) => /* @__PURE__ */ jsxRuntimeExports.jsxs("li", { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: "check" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: value.bullet })
+        ] }, key)),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("li", { className: "more", children: "More coming soon!" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(PricingLink, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(MoreButton, { children: "Find out more" }) })
+  ] });
+};
+export {
+  PowerpackDialog
+};
+//# sourceMappingURL=PowerpackDialog.es.js.map

package/dist/shared/src/components/Powerpack/PowerpackDialog.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PowerpackDialog.es.js","sources":["../../../../../src/components/Powerpack/PowerpackDialog.tsx"],"sourcesContent":["import * as Styled from './PowerpackDialog.styled'\nimport { FC } from 'react'\nimport { Icon } from '@ynput/ayon-react-components'\nimport { PricingLink } from './PricingLink'\nimport { powerpackFeatures, usePowerpack } from '@shared/context'\n\nexport interface PowerpackDialogProps {}\n\nexport const PowerpackDialog: FC<PowerpackDialogProps> = ({}) => {\n  const { setPowerpackDialog, selectedPowerPack, powerpackDialog } = usePowerpack()\n\n  if (!powerpackDialog) return null\n\n  return (\n    <Styled.PowerpackDialog isOpen onClose={() => setPowerpackDialog(null)} size=\"lg\">\n      <Styled.MainFeature>\n        <h1>\n          <Icon icon=\"bolt\" />\n          {powerpackDialog.label}\n        </h1>\n        <h2>{powerpackDialog.description}</h2>\n      </Styled.MainFeature>\n\n      <Styled.FeaturesList>\n        <h3>\n          Unlock all <Icon icon=\"bolt\" /> <span className=\"green\">Power Features</span> with an AYON\n          subscription.\n        </h3>\n        <ul>\n          {Object.entries(powerpackFeatures)\n            .sort(([key]) => (key !== selectedPowerPack ? 1 : -1))\n            .map(([key, value]) => (\n              <li key={key}>\n                <Icon icon=\"check\" />\n                <span>{value.bullet}</span>\n              </li>\n            ))}\n          <li className=\"more\">More coming soon!</li>\n        </ul>\n      </Styled.FeaturesList>\n      <PricingLink>\n        <Styled.MoreButton>Find out more</Styled.MoreButton>\n      </PricingLink>\n    </Styled.PowerpackDialog>\n  )\n}\n"],"names":["jsxs","Styled.PowerpackDialog","Styled.MainFeature","jsx","Styled.FeaturesList","Styled.MoreButton"],"mappings":";;;;;;;;;;;;;;AAQa,MAAA,kBAA4C,CAAC,CAAA,MAAO;AAC/D,QAAM,EAAE,oBAAoB,mBAAmB,gBAAA,IAAoB,aAAa;AAE5E,MAAA,CAAC,gBAAwB,QAAA;AAE7B,SACGA,uCAAAC,mBAAA,EAAuB,QAAM,MAAC,SAAS,MAAM,mBAAmB,IAAI,GAAG,MAAK,MAC3E,UAAA;AAAA,IAACD,uCAAAE,aAAA,EACC,UAAA;AAAA,MAAAF,uCAAC,MACC,EAAA,UAAA;AAAA,QAACG,kCAAAA,IAAA,MAAA,EAAK,MAAK,OAAO,CAAA;AAAA,QACjB,gBAAgB;AAAA,MAAA,GACnB;AAAA,MACAA,kCAAAA,IAAC,MAAI,EAAA,UAAA,gBAAgB,YAAY,CAAA;AAAA,IAAA,GACnC;AAAA,IAEAH,uCAACI,cAAA,EACC,UAAA;AAAA,MAAAJ,uCAAC,MAAG,EAAA,UAAA;AAAA,QAAA;AAAA,QACSG,kCAAAA,IAAC,MAAK,EAAA,MAAK,OAAO,CAAA;AAAA,QAAE;AAAA,QAAEA,kCAAA,IAAA,QAAA,EAAK,WAAU,SAAQ,UAAc,kBAAA;AAAA,QAAO;AAAA,MAAA,GAE/E;AAAA,6CACC,MACE,EAAA,UAAA;AAAA,QAAO,OAAA,QAAQ,iBAAiB,EAC9B,KAAK,CAAC,CAAC,GAAG,MAAO,QAAQ,oBAAoB,IAAI,EAAG,EACpD,IAAI,CAAC,CAAC,KAAK,KAAK,6CACd,MACC,EAAA,UAAA;AAAA,UAACA,kCAAAA,IAAA,MAAA,EAAK,MAAK,QAAQ,CAAA;AAAA,UACnBA,kCAAAA,IAAC,QAAM,EAAA,UAAA,MAAM,OAAO,CAAA;AAAA,QAAA,EAAA,GAFb,GAGT,CACD;AAAA,QACFA,kCAAA,IAAA,MAAA,EAAG,WAAU,QAAO,UAAiB,oBAAA,CAAA;AAAA,MAAA,EACxC,CAAA;AAAA,IAAA,GACF;AAAA,0CACC,aACC,EAAA,UAAAA,kCAAAA,IAACE,YAAA,EAAkB,2BAAa,EAClC,CAAA;AAAA,EAAA,GACF;AAEJ;"}

package/dist/shared/src/components/Powerpack/PowerpackDialog.styled.cjs.js

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const ayonReactComponents = require("@ynput/ayon-react-components");
+const styled = require("styled-components");
+const PowerpackDialog = styled(ayonReactComponents.Dialog)`
+  background: linear-gradient(180deg, rgb(0 121 181 / 0%) -12.03%, rgb(4 255 227 / 26%) 105.38%),
+    #15171c;
+
+  width: 550px;
+  max-height: unset;
+  height: unset;
+  border-radius: 16px;
+
+  .body {
+    gap: 32px;
+    padding: 16px 32px;
+    align-items: center;
+  }
+
+  .icon {
+    font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 200, 'opsz' 20;
+  }
+
+  .cancelButton {
+    background-color: unset !important;
+  }
+`;
+const MainFeature = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 16px;
+  border-radius: var(--border-radius-l);
+  border: 1px solid var(--md-sys-color-tertiary);
+  color: var(--md-sys-color-tertiary);
+  width: 100%;
+
+  h1 {
+    margin: 0;
+    ${ayonReactComponents.theme.headlineSmall}
+
+    display: flex;
+    align-items: center;
+    gap: var(--base-gap-small);
+  }
+
+  h2 {
+    margin: 0;
+    ${ayonReactComponents.theme.bodyLarge}
+    text-align: center;
+  }
+
+  .icon {
+    font-size: 32px;
+    color: var(--md-sys-color-tertiary);
+  }
+`;
+const FeaturesList = styled.div`
+  width: 100%;
+
+  h3 {
+    ${ayonReactComponents.theme.bodyMedium}
+    .green, .icon {
+      color: var(--md-sys-color-tertiary);
+    }
+    .green {
+      margin-right: 4px;
+    }
+  }
+
+  ul {
+    margin: 0;
+    margin-top: 8px;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+
+    li {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+  }
+`;
+const MoreButton = styled(ayonReactComponents.Button)`
+  background-color: var(--md-sys-color-tertiary);
+  color: var(--md-sys-color-on-tertiary);
+  padding: 12px 20px;
+  border-radius: var(--border-radius-l);
+  margin-bottom: 16px;
+
+  &:hover {
+    background-color: var(--md-sys-color-tertiary-hover);
+  }
+`;
+exports.FeaturesList = FeaturesList;
+exports.MainFeature = MainFeature;
+exports.MoreButton = MoreButton;
+exports.PowerpackDialog = PowerpackDialog;
+//# sourceMappingURL=PowerpackDialog.styled.cjs.js.map

package/dist/shared/src/components/Powerpack/PowerpackDialog.styled.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PowerpackDialog.styled.cjs.js","sources":["../../../../../src/components/Powerpack/PowerpackDialog.styled.ts"],"sourcesContent":["import { Button, Dialog, theme } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nexport const PowerpackDialog = styled(Dialog)`\n  background: linear-gradient(180deg, rgb(0 121 181 / 0%) -12.03%, rgb(4 255 227 / 26%) 105.38%),\n    #15171c;\n\n  width: 550px;\n  max-height: unset;\n  height: unset;\n  border-radius: 16px;\n\n  .body {\n    gap: 32px;\n    padding: 16px 32px;\n    align-items: center;\n  }\n\n  .icon {\n    font-variation-settings: 'FILL' 1, 'wght' 200, 'GRAD' 200, 'opsz' 20;\n  }\n\n  .cancelButton {\n    background-color: unset !important;\n  }\n`\n\nexport const MainFeature = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 12px;\n  padding: 8px 16px;\n  border-radius: var(--border-radius-l);\n  border: 1px solid var(--md-sys-color-tertiary);\n  color: var(--md-sys-color-tertiary);\n  width: 100%;\n\n  h1 {\n    margin: 0;\n    ${theme.headlineSmall}\n\n    display: flex;\n    align-items: center;\n    gap: var(--base-gap-small);\n  }\n\n  h2 {\n    margin: 0;\n    ${theme.bodyLarge}\n    text-align: center;\n  }\n\n  .icon {\n    font-size: 32px;\n    color: var(--md-sys-color-tertiary);\n  }\n`\n\nexport const FeaturesList = styled.div`\n  width: 100%;\n\n  h3 {\n    ${theme.bodyMedium}\n    .green, .icon {\n      color: var(--md-sys-color-tertiary);\n    }\n    .green {\n      margin-right: 4px;\n    }\n  }\n\n  ul {\n    margin: 0;\n    margin-top: 8px;\n    padding: 0;\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n\n    li {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n  }\n`\n\nexport const MoreButton = styled(Button)`\n  background-color: var(--md-sys-color-tertiary);\n  color: var(--md-sys-color-on-tertiary);\n  padding: 12px 20px;\n  border-radius: var(--border-radius-l);\n  margin-bottom: 16px;\n\n  &:hover {\n    background-color: var(--md-sys-color-tertiary-hover);\n  }\n`\n"],"names":["Dialog","theme","Button"],"mappings":";;;;AAGa,MAAA,kBAAkB,OAAOA,0BAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBrC,MAAM,cAAc,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAa5BC,0BAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MASnBA,0BAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUd,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA,MAI7BA,0BAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyBT,MAAA,aAAa,OAAOC,0BAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;"}