@ynput/ayon-frontend-shared 0.3.11 → 0.3.13

package/dist/shared/src/containers/DetailsPanel/components/DetailsPanelHeader/DetailsPanelHeader.es.js

@@ -1,8 +1,8 @@
-import { j as o } from "../../../../../../_virtual/jsx-runtime.es.js";
-import { useRef as Z, useMemo as a } from "react";
-import { union as I, upperFirst as y } from "lodash";
-import u from "clsx";
-import { getTextColor as T } from "@ynput/ayon-react-components";
+import { j as r } from "../../../../../../_virtual/jsx-runtime.es.js";
+import { useRef as X, useMemo as e } from "react";
+import { union as A, upperFirst as Y } from "lodash";
+import c from "clsx";
+import { getTextColor as Z } from "@ynput/ayon-react-components";
 import "../../../../components/AddonLoadingScreen/AddonLoadingScreen.es.js";
 import "../../../../../../node_modules/match-sorter/dist/match-sorter.esm.es.js";
 import "../../../../components/AccessSearchInput/AccessSearchInput.styled.es.js";
@@ -58,14 +58,14 @@ import "../../../../api/generated/ynputCloud.es.js";
 import "../../../../api/generated/grouping.es.js";
 import "../../../../api/generated/views.es.js";
 import "../../../../api/queries/actions/getActions.es.js";
-import { useGetEntitiesChecklistsQuery as tt } from "../../../../api/queries/activities/getActivities.es.js";
+import "../../../../api/queries/activities/getActivities.es.js";
 import "../../../../api/queries/activities/updateActivities.es.js";
 import "../../../../api/queries/activities/updateReaction.es.js";
 import "../../../../api/queries/activities/getMentions.es.js";
 import "../../../../api/queries/activities/getCategories.es.js";
 import "../../../../api/queries/addons/getAddons.es.js";
 import "../../../../api/queries/addons/updateAddons.es.js";
-import { useGetAttributeConfigQuery as ot } from "../../../../api/queries/attributes/getAttributes.es.js";
+import { useGetAttributeConfigQuery as T } from "../../../../api/queries/attributes/getAttributes.es.js";
 import "../../../../api/queries/attributes/updateAttributes.es.js";
 import "../../../../api/queries/authentication/getAuthentication.es.js";
 import "../../../../api/queries/cloud/cloud.es.js";
@@ -96,6 +96,7 @@ import "../../../../api/queries/review/getReview.es.js";
 import "../../../../api/queries/review/updateReview.es.js";
 import "../../../../api/queries/share/share.es.js";
 import "../../../../api/queries/system/getSystem.es.js";
+import "../../../../api/queries/tasks/getTasks.es.js";
 import "../../../../api/queries/tasks/updateTasks.es.js";
 import "../../../../api/queries/userDashboard/getUserDashboard.es.js";
 import "../../../../api/queries/users/getUsers.es.js";
@@ -114,7 +115,7 @@ import "../../../../components/DoneCheckbox/DoneCheckbox.es.js";
 import "../../../../components/EarlyPreview/EarlyPreview.es.js";
 import "../../../../components/EmptyPlaceholder/EmptyPlaceholder.es.js";
 import "../../../../components/EmptyPlaceholder/EmptyPlaceholderFlex.styled.es.js";
-import { EntityPanelUploader as rt } from "../../../../components/EntityPanelUploader/EntityPanelUploader.es.js";
+import { EntityPanelUploader as y } from "../../../../components/EntityPanelUploader/EntityPanelUploader.es.js";
 import "../../../../components/EntityPath/EntityPath.styled.es.js";
 import "../../../../components/EntityPath/SegmentProvider.es.js";
 import "../../../../components/FeaturedVersionOrder/FeaturedVersionOrder.es.js";
@@ -123,7 +124,7 @@ import "../../../../components/Feedback/SupportBubble.es.js";
 import "../../../../components/FileThumbnail/FileThumbnail.es.js";
 import "../../../../components/LegacyBadge/LegacyBadge.es.js";
 import "../../../../components/LinksManager/LinksManager.styled.es.js";
-import { getPriorityOptions as it } from "../../../../util/getPriorityOptions.es.js";
+import { getPriorityOptions as tt } from "../../../../util/getPriorityOptions.es.js";
 import "uuid";
 import "../../../../util/pubsub.es.js";
 import "../../../ContextMenu/ContextMenuContext.es.js";
@@ -132,7 +133,7 @@ import "../../../Feed/context/FeedContext.es.js";
 import "../../../Feed/components/Tooltips/UserTooltip/UserTooltip.styled.es.js";
 import "../../../Feed/components/Tooltips/EntityTooltip/EntityTooltip.styled.es.js";
 import "../../../../context/RemoteModulesContext.es.js";
-import { useDetailsPanelContext as mt } from "../../../../context/DetailsPanelContext.es.js";
+import { useDetailsPanelContext as rt } from "../../../../context/DetailsPanelContext.es.js";
 import "../../../../context/SubtasksModulesContext.es.js";
 import "../../../../context/ThumbnailUploaderContext.es.js";
 import "../../../../context/SettingsPanelContext.es.js";
@@ -201,8 +202,8 @@ import "../../../ProjectTreeTable/context/ColumnSettingsContext.es.js";
 import "../../../ProjectTreeTable/context/ProjectDataContext.es.js";
 import "../../../../../../_virtual/runtime.es.js";
 import "../../../../../../_virtual/semver.es.js";
-import { useScopedStatuses as pt } from "../../../../hooks/useScopedStatuses.es.js";
-import { useEntityUpdate as st } from "../../../../hooks/useEntityUpdate.es.js";
+import { useScopedStatuses as ot } from "../../../../hooks/useScopedStatuses.es.js";
+import { useEntityUpdate as it } from "../../../../hooks/useEntityUpdate.es.js";
 import "react-redux";
 import "custom-protocol-check";
 import "../../../ProjectTreeTable/components/GroupSettingsFallback.es.js";
@@ -221,15 +222,15 @@ import "../../../Slicer/hooks/useTableDataBySlice.es.js";
 import "../../../Slicer/components/SlicerSearch.es.js";
 import "../../../Slicer/context/SlicerContext.es.js";
 import "../../DetailsPanel.styled.es.js";
-import et from "../DetailsPanelTabs/DetailsPanelTabs.es.js";
-import { HeaderContainer as at, Grid as lt, Header as nt, Content as dt, Title as ct, TagsSelect as ut, StatusSelect as ht, AssigneeSelect as gt, PriorityEnumDropdown as ft } from "./DetailsPanelHeader.styled.es.js";
-import jt from "../../helpers/getThumbnails.es.js";
-import { buildDetailsPanelTitles as xt } from "../../helpers/buildDetailsPanelTitles.es.js";
-import { PlayableIcon as vt } from "../../../../components/PlayableIcon/PlayableIcon.es.js";
+import mt from "../DetailsPanelTabs/DetailsPanelTabs.es.js";
+import { HeaderContainer as pt, Grid as st, Header as at, Content as et, Title as lt, TagsSelect as nt, StatusSelect as dt, AssigneeSelect as ct, PriorityEnumDropdown as ut } from "./DetailsPanelHeader.styled.es.js";
+import gt from "../../helpers/getThumbnails.es.js";
+import { buildDetailsPanelTitles as ht } from "../../helpers/buildDetailsPanelTitles.es.js";
+import { PlayableIcon as ft } from "../../../../components/PlayableIcon/PlayableIcon.es.js";
 import "../DetailsPanelFiles/DetailsPanelFiles.es.js";
 import "../DetailsPanelSlideOut/DetailsPanelSlideOut.styled.es.js";
 import "../DetailsPanelFloating/DetailsPanelFloating.styled.es.js";
-import { Actions as Nt } from "../../../Actions/Actions.es.js";
+import { Actions as jt } from "../../../Actions/Actions.es.js";
 import "../../../Views/context/ViewsContext.es.js";
 import "../../../Views/Views.styled.es.js";
 import "../../../Views/ViewsMenuContainer/ViewsMenuContainer.es.js";
@@ -255,44 +256,46 @@ import "../../../../components/SortingSetting/SortingSetting.styled.es.js";
 import "../../../../components/StyledLink/StyledLink.es.js";
 import "../../../../components/TableGridSwitch/TableGridSwitch.es.js";
 import "../../../../components/Thumbnail/Thumbnail.styled.es.js";
-import { StackedThumbnails as bt } from "../../../../components/Thumbnail/StackedThumbnails.es.js";
+import { StackedThumbnails as xt } from "../../../../components/Thumbnail/StackedThumbnails.es.js";
 import "../../../../components/ThumbnailSimple/ThumbnailSimple.es.js";
 import "../../../../components/VersionUploader/components/UploadVersionDialog.es.js";
 import "../../../../components/VersionUploader/context/VersionUploadContext.es.js";
 import "../../../../components/Watchers/Watchers.es.js";
 import "../../../../components/Menu/Menu.styled.es.js";
 import "../../../../components/Menu/MenuItem.es.js";
-const jp = ({
+import "../../../../components/ReviewablesSelector/ReviewablesSelector.styled.es.js";
+const fp = ({
   entityType: i,
-  entitySubTypes: O,
-  entities: r = [],
-  disabledAssignees: E = [],
+  entitySubTypes: D,
+  entities: o = [],
+  disabledAssignees: O = [],
   users: g = [],
-  disabledStatuses: w,
-  tagsOptions: f = [],
-  isFetching: j,
+  disabledStatuses: I,
+  tagsOptions: h = [],
+  isFetching: f,
   isCompact: n = !1,
-  currentTab: M,
-  onTabChange: U,
-  entityTypeIcons: x,
-  onOpenViewer: V,
-  onEntityFocus: R
+  currentTab: E,
+  onTabChange: w,
+  entityTypeIcons: j,
+  onOpenViewer: M,
+  onEntityFocus: U
 }) => {
-  const { useSearchParams: G, useNavigate: H, isDeveloperMode: $ } = mt(), L = H(), [Q, K] = G(), W = Z(null), h = pt(
-    r.map((t) => t.projectName),
+  const { useSearchParams: V, useNavigate: R, isDeveloperMode: H } = rt(), G = R(), [L, K] = V(), Q = X(null), u = ot(
+    o.map((t) => t.projectName),
     [i]
-  ), l = a(
-    () => I(
-      ...r.flatMap((t) => [
+  ), l = e(
+    () => A(
+      ...o.flatMap((t) => [
         t.task?.assignees || [],
         t.version?.author || []
       ])
     ),
-    [r]
+    [o]
   );
-  let p = r[0];
-  const s = r.length === 0 || !p || j;
+  let p = o[0];
+  const s = o.length === 0 || !p || f;
   p || (p = {
+    parents: [],
     id: "placeholder",
     name: "loading...",
     label: "loading...",
@@ -306,22 +309,16 @@ const jp = ({
     updatedAt: (/* @__PURE__ */ new Date()).toISOString(),
     path: ""
   });
-  const v = r.length > 1 ? void 0 : p?.projectName, N = r.filter((t) => t.projectName === p?.projectName && t.id).map((t) => t.id), { data: d } = tt(
-    {
-      projectName: p?.projectName,
-      entityIds: N
-    },
-    { skip: !p?.projectName || !N.length }
-  );
-  d?.total && d.total > 0 && `${d.checked}${d.total}`;
-  const { data: _ } = ot({ attributeName: "priority" }), b = it(_, i), S = a(
-    () => jt(r, i, x),
-    [r, i, x]
-  ), k = a(() => r.map((t) => t.status), [r]), q = a(() => r.map((t) => t.attrib?.priority), [r]), z = a(() => r.map((t) => t.tags), [r]), B = a(
-    () => f.reduce((t, m) => (t[m.name] = m, t), {}),
-    [f]
-  ), C = r.length > 1, { updateEntity: F } = st({
-    entities: r.map((t) => ({
+  const x = o.length > 1 ? void 0 : p?.projectName;
+  o.filter((t) => t.projectName === p?.projectName && t.id).map((t) => t.id);
+  const { data: W } = T({ attributeName: "priority" }), v = tt(W, i), b = e(
+    () => gt(o, i, j),
+    [o, i, j]
+  ), N = e(() => o.map((t) => t.status), [o]), _ = e(() => o.map((t) => t.attrib?.priority), [o]), $ = e(() => o.map((t) => t.tags), [o]), q = e(
+    () => h.reduce((t, m) => (t[m.name] = m, t), {}),
+    [h]
+  ), S = o.length > 1, { updateEntity: z } = it({
+    entities: o.map((t) => ({
       id: t.id,
       projectName: t.projectName,
       users: t.task?.assignees || [],
@@ -329,58 +326,58 @@ const jp = ({
       productId: t.product?.id
     })),
     entityType: i
-  }), c = (t, m) => m == null ? console.error("value is null or undefined") : F(t, m), J = () => {
-    let t, m = p.id, e = i + "Id";
-    i === "version" && p.product?.id && (t = [p.id], m = p.product?.id, e = "productId"), m && V({
-      [e]: m,
-      projectName: v,
+  }), d = (t, m) => m == null ? console.error("value is null or undefined") : z(t, m), B = () => {
+    let t, m = p.id, a = i + "Id";
+    i === "version" && p.product?.id && (t = [p.id], m = p.product?.id, a = "productId"), m && M({
+      [a]: m,
+      projectName: x,
       versionIds: t
     });
-  }, P = ["task", "version", "representation"].includes(i) && (l.length > 0 || i === "task"), A = g.map((t) => t);
+  }, P = ["task", "version", "representation"].includes(i) && (l.length > 0 || i === "task"), k = g.map((t) => t);
   if (P) {
-    const t = g.map((e) => e.name), m = l.filter((e) => !t.includes(e));
-    m.length && A.push(...m.map((e) => ({ name: e, fullName: e })));
+    const t = g.map((a) => a.name), m = l.filter((a) => !t.includes(a));
+    m.length && k.push(...m.map((a) => ({ name: a, fullName: a })));
   }
-  const { title: X, subTitle: Y } = xt(r, i), D = h?.length !== 0 && h?.find((t) => t.name === k[0]);
-  return /* @__PURE__ */ o.jsx(at, { children: /* @__PURE__ */ o.jsx(
-    rt,
+  const { title: F, subTitle: J } = ht(o, i), C = u?.length !== 0 && u?.find((t) => t.name === N[0]);
+  return /* @__PURE__ */ r.jsx(pt, { children: /* @__PURE__ */ r.jsx(
+    y,
     {
-      entities: r,
+      entities: o,
       entityType: i,
-      projectName: v,
-      onVersionCreated: (t) => R?.(t, "version"),
-      children: /* @__PURE__ */ o.jsxs(lt, { className: u("details-panel-header", { isCompact: n }), children: [
-        /* @__PURE__ */ o.jsxs(
-          nt,
+      projectName: x,
+      onVersionCreated: (t) => U?.(t, "version"),
+      children: /* @__PURE__ */ r.jsxs(st, { className: c("details-panel-header", { isCompact: n }), children: [
+        /* @__PURE__ */ r.jsxs(
+          at,
           {
-            className: u("titles", { isCompact: n, loading: s }, "no-shimmer"),
+            className: c("titles", { isCompact: n, loading: s }, "no-shimmer"),
             children: [
-              /* @__PURE__ */ o.jsxs("div", { style: { position: "relative" }, children: [
-                /* @__PURE__ */ o.jsx(
-                  bt,
+              /* @__PURE__ */ r.jsxs("div", { style: { position: "relative" }, children: [
+                /* @__PURE__ */ r.jsx(
+                  xt,
                   {
                     isLoading: s,
                     shimmer: s,
-                    thumbnails: S,
-                    onClick: S.length === 1 ? J : void 0,
+                    thumbnails: b,
+                    onClick: b.length === 1 ? B : void 0,
                     hoverIcon: "play_circle"
                   }
                 ),
-                !C && p?.hasReviewables && /* @__PURE__ */ o.jsx(vt, {})
+                !S && p?.hasReviewables && /* @__PURE__ */ r.jsx(ft, {})
               ] }),
-              /* @__PURE__ */ o.jsxs(dt, { className: u({ loading: s }), children: [
-                /* @__PURE__ */ o.jsxs(ct, { children: [
-                  /* @__PURE__ */ o.jsx("h2", { children: X }),
-                  /* @__PURE__ */ o.jsx(
-                    ut,
+              /* @__PURE__ */ r.jsxs(et, { className: c({ loading: s }), children: [
+                /* @__PURE__ */ r.jsxs(lt, { children: [
+                  /* @__PURE__ */ r.jsx("h2", { children: F }),
+                  /* @__PURE__ */ r.jsx(
+                    nt,
                     {
-                      ref: W,
-                      value: I(...z),
-                      tags: B,
+                      ref: Q,
+                      value: A(...$),
+                      tags: q,
                       options: [],
                       editable: !0,
                       editor: !0,
-                      onChange: (t) => c("tags", t),
+                      onChange: (t) => d("tags", t),
                       align: "right",
                       styleDropdown: { display: s ? "none" : "unset" },
                       className: "tags-select",
@@ -388,75 +385,75 @@ const jp = ({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ o.jsxs("div", { className: "sub-title", children: [
-                  /* @__PURE__ */ o.jsxs("span", { className: "entity-type", children: [
-                    y(i),
+                /* @__PURE__ */ r.jsxs("div", { className: "sub-title", children: [
+                  /* @__PURE__ */ r.jsxs("span", { className: "entity-type", children: [
+                    Y(i),
                     " - "
                   ] }),
-                  /* @__PURE__ */ o.jsx("h3", { children: Y })
+                  /* @__PURE__ */ r.jsx("h3", { children: J })
                 ] })
               ] })
             ]
           }
         ),
-        /* @__PURE__ */ o.jsx(
-          ht,
+        /* @__PURE__ */ r.jsx(
+          dt,
           {
-            value: k,
-            options: h || [],
-            disabledValues: w,
+            value: N,
+            options: u || [],
+            disabledValues: I,
             invert: !0,
             style: { maxWidth: "unset" },
-            onChange: (t) => c("status", t),
-            className: u("status-select", { loading: s }),
+            onChange: (t) => d("status", t),
+            className: c("status-select", { loading: s }),
             align: n ? "right" : "left",
-            $textColor: T(D !== void 0 ? D.color : "#OOO")
+            $textColor: Z(C !== void 0 ? C.color : "#OOO")
           }
         ),
-        !n && (!P || s ? /* @__PURE__ */ o.jsx("div", {}) : /* @__PURE__ */ o.jsx(
-          gt,
+        !n && (!P || s ? /* @__PURE__ */ r.jsx("div", {}) : /* @__PURE__ */ r.jsx(
+          ct,
           {
             value: l,
-            options: A,
-            disabledValues: E.map((t) => t.name),
-            isMultiple: C && l.length > 1 && i === "task",
+            options: k,
+            disabledValues: O.map((t) => t.name),
+            isMultiple: S && l.length > 1 && i === "task",
             readOnly: i !== "task",
             emptyMessage: i === "task" ? "Assign user" : "",
             align: "right",
-            onChange: (t) => c("assignees", t),
+            onChange: (t) => d("assignees", t),
             className: "assignee-select",
             "data-tooltip": l.length ? i === "task" ? "Assigned users" : "Author" : ""
           }
         )),
-        /* @__PURE__ */ o.jsx(
-          Nt,
+        /* @__PURE__ */ r.jsx(
+          jt,
           {
-            entities: r,
+            entities: o,
             entityType: i,
-            entitySubTypes: O,
-            isLoadingEntity: !!j || !!s,
-            searchParams: Q,
-            isDeveloperMode: $,
+            entitySubTypes: D,
+            isLoadingEntity: !!f || !!s,
+            searchParams: L,
+            isDeveloperMode: H,
             onSetSearchParams: K,
-            onNavigate: L
+            onNavigate: G
           }
         ),
-        b ? /* @__PURE__ */ o.jsx(
-          ft,
+        v ? /* @__PURE__ */ r.jsx(
+          ut,
           {
-            options: b,
+            options: v,
             placeholder: "No priority",
-            value: q,
-            onChange: (t) => c("attrib", { priority: t[0] }),
+            value: _,
+            onChange: (t) => d("attrib", { priority: t[0] }),
             align: "right"
           }
-        ) : /* @__PURE__ */ o.jsx("div", { style: { height: 32 } }),
-        /* @__PURE__ */ o.jsx(
-          et,
+        ) : /* @__PURE__ */ r.jsx("div", { style: { height: 32 } }),
+        /* @__PURE__ */ r.jsx(
+          mt,
           {
             entityType: i,
-            currentTab: M,
-            onTabChange: U,
+            currentTab: E,
+            onTabChange: w,
             isLoading: s
           }
         )
@@ -465,6 +462,6 @@ const jp = ({
   ) });
 };
 export {
-  jp as default
+  fp as default
 };
 //# sourceMappingURL=DetailsPanelHeader.es.js.map

package/dist/shared/src/containers/DetailsPanel/components/DetailsPanelHeader/DetailsPanelHeader.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DetailsPanelHeader.es.js","sources":["../../../../../../../src/containers/DetailsPanel/components/DetailsPanelHeader/DetailsPanelHeader.tsx"],"sourcesContent":["import { useMemo, useRef } from 'react'\nimport { union, upperFirst } from 'lodash'\nimport clsx from 'clsx'\nimport { DropdownRef, getTextColor } from '@ynput/ayon-react-components'\n\nimport { EntityPanelUploader, StackedThumbnails } from '@shared/components'\nimport { Actions, DetailsPanelProps } from '@shared/containers'\n// shared\nimport { useGetEntitiesChecklistsQuery, useGetAttributeConfigQuery, Status } from '@shared/api'\nimport type { DetailsPanelEntityData } from '@shared/api'\nimport { getPriorityOptions } from '@shared/util'\nimport { useScopedStatuses, useEntityUpdate } from '@shared/hooks'\nimport { DetailsPanelTab, useDetailsPanelContext } from '@shared/context'\n\nimport DetailsPanelTabs from '../DetailsPanelTabs/DetailsPanelTabs'\nimport * as Styled from './DetailsPanelHeader.styled'\nimport getThumbnails from '../../helpers/getThumbnails'\nimport { buildDetailsPanelTitles } from '../../helpers/buildDetailsPanelTitles'\nimport { PlayableIcon } from '@shared/components/PlayableIcon/PlayableIcon'\n\nexport type EntityTypeIcons = {\n  folder: Record<string, string>\n  task: Record<string, string>\n  product: Record<string, string>\n}\n\ntype DetailsPanelHeaderProps = {\n  entityType: 'folder' | 'task' | 'version' | 'representation'\n  entitySubTypes: string[]\n  entities: DetailsPanelEntityData[]\n  disabledAssignees?: any[]\n  users?: any[]\n  disabledStatuses?: string[]\n  tagsOptions?: any[]\n  isFetching?: boolean\n  isCompact?: boolean\n  currentTab: DetailsPanelTab\n  onTabChange: (tab: DetailsPanelTab) => void\n  onOpenViewer: (args: any) => void\n  onEntityFocus: DetailsPanelProps['onEntityFocus']\n  entityTypeIcons: EntityTypeIcons\n}\n\nconst DetailsPanelHeader = ({\n  entityType,\n  entitySubTypes,\n  entities = [],\n  disabledAssignees = [],\n  users = [],\n  disabledStatuses,\n  tagsOptions = [],\n  isFetching,\n  isCompact = false,\n  currentTab,\n  onTabChange,\n  entityTypeIcons,\n  onOpenViewer,\n  onEntityFocus,\n}: DetailsPanelHeaderProps) => {\n  const { useSearchParams, useNavigate, isDeveloperMode } = useDetailsPanelContext()\n  const navigate = useNavigate()\n  const [searchParams, setSearchParams] = useSearchParams()\n  const tagsSelectRef = useRef<DropdownRef>(null)\n\n  const statuses = useScopedStatuses(\n    entities.map((entity) => entity.projectName),\n    [entityType],\n  )\n\n  // for selected entities, get flat list of assignees\n  const entityUsers: string[] = useMemo(\n    () =>\n      union(\n        ...entities.flatMap((entity) => [\n          entity.task?.assignees || [],\n          entity.version?.author || [],\n        ]),\n      ),\n    [entities],\n  )\n\n  let firstEntity = entities[0]\n  // If there's no data return null\n  const isLoading = entities.length === 0 || !firstEntity || isFetching\n  // placeholder entity\n  if (!firstEntity) {\n    firstEntity = {\n      id: 'placeholder',\n      name: 'loading...',\n      label: 'loading...',\n      entityType,\n      status: 'loading',\n      projectName: 'loading...',\n      tags: [],\n      hasReviewables: false,\n      attrib: {},\n      createdAt: new Date().toISOString(),\n      updatedAt: new Date().toISOString(),\n      path: '',\n    }\n  }\n\n  const projectName = entities.length > 1 ? undefined : firstEntity?.projectName\n\n  const entityIds = entities\n    .filter((e) => e.projectName === firstEntity?.projectName && e.id)\n    .map((entity) => entity.id)\n\n  // get checklists count\n  const { data: checklistCount } = useGetEntitiesChecklistsQuery(\n    {\n      projectName: firstEntity?.projectName,\n      entityIds,\n    },\n    { skip: !firstEntity?.projectName || !entityIds.length },\n  )\n  let checklistsLabel\n  if (checklistCount?.total && checklistCount.total > 0) {\n    checklistsLabel = `${checklistCount.checked}/${checklistCount.total}`\n  }\n\n  // get priorities\n  // get priority attribute so we know the colors and icons for each priority\n  const { data: priorityAttrib } = useGetAttributeConfigQuery({ attributeName: 'priority' })\n  const priorities = getPriorityOptions(priorityAttrib, entityType)\n\n  const thumbnails = useMemo(\n    () => getThumbnails(entities, entityType, entityTypeIcons),\n    [entities, entityType, entityTypeIcons],\n  )\n\n  // we need to get the intersection of all the statuses of the projects for the selected entities\n  // this means that if we have 2 entities from 2 different projects, we need to get the intersection of the statuses of those 2 projects\n  //  and it prevents us from showing statuses that are not available for the selected entities\n  const statusesValue = useMemo(() => entities.map((t) => t.status), [entities])\n  const priorityValues = useMemo(() => entities.map((t) => t.attrib?.priority), [entities])\n  const tagsValues: string[][] = useMemo(() => entities.map((t) => t.tags), [entities])\n  const tagsOptionsObject = useMemo(\n    () =>\n      tagsOptions.reduce((acc, tag) => {\n        acc[tag.name] = tag\n        return acc\n      }, {}),\n    [tagsOptions],\n  )\n\n  const isMultiple = entities.length > 1\n\n  const { updateEntity } = useEntityUpdate({\n    entities: entities.map((e) => ({\n      id: e.id,\n      projectName: e.projectName,\n      users: e.task?.assignees || [],\n      folderId: e.folder?.id,\n      productId: e.product?.id,\n    })),\n    entityType,\n  })\n\n  const handleUpdate = (field: string, value: any) => {\n    if (value === null || value === undefined) return console.error('value is null or undefined')\n    return updateEntity(field, value)\n  }\n\n  const handleThumbnailClick = () => {\n    let versionIds,\n      id = firstEntity.id,\n      entityTypeKey = entityType + 'Id'\n\n    if (entityType === 'version' && firstEntity.product?.id) {\n      versionIds = [firstEntity.id]\n      id = firstEntity.product?.id\n      entityTypeKey = 'productId'\n    }\n\n    if (id) {\n      onOpenViewer({\n        [entityTypeKey]: id,\n        projectName,\n        versionIds,\n      })\n    }\n  }\n\n  const hasUser =\n    ['task', 'version', 'representation'].includes(entityType) &&\n    (entityUsers.length > 0 || entityType === 'task')\n\n  const usersOptions = users.map((u) => u)\n  if (hasUser) {\n    // check if all users are in options, otherwise add them\n    const allUsers = users.map((u) => u.name)\n    const usersToAdd = entityUsers.filter((u) => !allUsers.includes(u))\n    if (usersToAdd.length) {\n      usersOptions.push(...usersToAdd.map((u) => ({ name: u, fullName: u })))\n    }\n  }\n\n  // Get title and subtitle from the imported function\n  const { title, subTitle } = buildDetailsPanelTitles(entities, entityType)\n  const status =\n    statuses?.length !== 0 && statuses?.find((status) => status.name === statusesValue[0])\n  return (\n    <Styled.HeaderContainer>\n      <EntityPanelUploader\n        entities={entities}\n        entityType={entityType}\n        projectName={projectName}\n        onVersionCreated={(id) => onEntityFocus?.(id, 'version')}\n      >\n        <Styled.Grid className={clsx('details-panel-header', { isCompact })}>\n          <Styled.Header\n            className={clsx('titles', { isCompact, loading: isLoading }, 'no-shimmer')}\n          >\n            <div style={{ position: 'relative' }}>\n              <StackedThumbnails\n                isLoading={isLoading}\n                shimmer={isLoading}\n                thumbnails={thumbnails}\n                onClick={thumbnails.length === 1 ? handleThumbnailClick : undefined}\n                hoverIcon={'play_circle'}\n              />\n              {!isMultiple && firstEntity?.hasReviewables && <PlayableIcon />}\n            </div>\n            <Styled.Content className={clsx({ loading: isLoading })}>\n              <Styled.Title>\n                <h2>{title}</h2>\n                <Styled.TagsSelect\n                  ref={tagsSelectRef}\n                  value={union(...tagsValues)}\n                  tags={tagsOptionsObject}\n                  options={[]}\n                  editable\n                  editor\n                  onChange={(value) => handleUpdate('tags', value)}\n                  align=\"right\"\n                  styleDropdown={{ display: isLoading ? 'none' : 'unset' }}\n                  className=\"tags-select\"\n                  itemClassName=\"details-tag\"\n                />\n              </Styled.Title>\n              <div className=\"sub-title\">\n                <span className=\"entity-type\">{upperFirst(entityType)} - </span>\n                <h3>{subTitle}</h3>\n              </div>\n            </Styled.Content>\n          </Styled.Header>\n          <Styled.StatusSelect\n            value={statusesValue}\n            options={statuses || []}\n            disabledValues={disabledStatuses}\n            invert\n            style={{ maxWidth: 'unset' }}\n            onChange={(value) => handleUpdate('status', value)}\n            className={clsx('status-select', { loading: isLoading })}\n            align={isCompact ? 'right' : 'left'}\n            $textColor={getTextColor(status !== undefined ? (status as Status).color : '#OOO')}\n          />\n          {!isCompact &&\n            (!hasUser || isLoading ? (\n              <div></div>\n            ) : (\n              <Styled.AssigneeSelect\n                value={entityUsers}\n                options={usersOptions}\n                disabledValues={disabledAssignees.map((u) => u.name)}\n                isMultiple={isMultiple && entityUsers.length > 1 && entityType === 'task'}\n                readOnly={entityType !== 'task'}\n                emptyMessage={entityType === 'task' ? 'Assign user' : ''}\n                align=\"right\"\n                onChange={(value) => handleUpdate('assignees', value)}\n                className=\"assignee-select\"\n                data-tooltip={\n                  entityUsers.length ? (entityType === 'task' ? 'Assigned users' : 'Author') : ''\n                }\n              />\n            ))}\n          <Actions\n            entities={entities}\n            entityType={entityType}\n            entitySubTypes={entitySubTypes}\n            isLoadingEntity={!!isFetching || !!isLoading}\n            searchParams={searchParams}\n            isDeveloperMode={isDeveloperMode}\n            onSetSearchParams={setSearchParams}\n            onNavigate={navigate}\n          />\n          {priorities ? (\n            <Styled.PriorityEnumDropdown\n              options={priorities}\n              placeholder=\"No priority\"\n              value={priorityValues}\n              onChange={(value) => handleUpdate('attrib', { priority: value[0] })}\n              align=\"right\"\n            />\n          ) : (\n            <div style={{ height: 32 }}></div>\n          )}\n          <DetailsPanelTabs\n            entityType={entityType}\n            currentTab={currentTab}\n            onTabChange={onTabChange}\n            isLoading={isLoading}\n          />\n        </Styled.Grid>\n      </EntityPanelUploader>\n    </Styled.HeaderContainer>\n  )\n}\n\nexport default DetailsPanelHeader\n"],"names":["DetailsPanelHeader","entityType","entitySubTypes","entities","disabledAssignees","users","disabledStatuses","tagsOptions","isFetching","isCompact","currentTab","onTabChange","entityTypeIcons","onOpenViewer","onEntityFocus","useSearchParams","useNavigate","isDeveloperMode","useDetailsPanelContext","navigate","searchParams","setSearchParams","tagsSelectRef","useRef","statuses","useScopedStatuses","entity","entityUsers","useMemo","union","firstEntity","isLoading","projectName","entityIds","e","checklistCount","useGetEntitiesChecklistsQuery","priorityAttrib","useGetAttributeConfigQuery","priorities","getPriorityOptions","thumbnails","getThumbnails","statusesValue","priorityValues","tagsValues","tagsOptionsObject","acc","tag","isMultiple","updateEntity","useEntityUpdate","handleUpdate","field","value","handleThumbnailClick","versionIds","id","entityTypeKey","hasUser","usersOptions","u","allUsers","usersToAdd","title","subTitle","buildDetailsPanelTitles","status","jsx","Styled.HeaderContainer","EntityPanelUploader","jsxs","Styled.Grid","clsx","Styled.Header","StackedThumbnails","PlayableIcon","Styled.Content","Styled.Title","Styled.TagsSelect","upperFirst","Styled.StatusSelect","getTextColor","Styled.AssigneeSelect","Actions","Styled.PriorityEnumDropdown","DetailsPanelTabs"],"mappings":"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"}
+{"version":3,"file":"DetailsPanelHeader.es.js","sources":["../../../../../../../src/containers/DetailsPanel/components/DetailsPanelHeader/DetailsPanelHeader.tsx"],"sourcesContent":["import { useMemo, useRef } from 'react'\nimport { union, upperFirst } from 'lodash'\nimport clsx from 'clsx'\nimport { DropdownRef, getTextColor } from '@ynput/ayon-react-components'\n\nimport { EntityPanelUploader, StackedThumbnails } from '@shared/components'\nimport { Actions, DetailsPanelProps } from '@shared/containers'\n// shared\nimport { useGetAttributeConfigQuery, Status } from '@shared/api'\nimport type { DetailsPanelEntityData } from '@shared/api'\nimport { getPriorityOptions } from '@shared/util'\nimport { useScopedStatuses, useEntityUpdate } from '@shared/hooks'\nimport { DetailsPanelTab, useDetailsPanelContext } from '@shared/context'\n\nimport DetailsPanelTabs from '../DetailsPanelTabs/DetailsPanelTabs'\nimport * as Styled from './DetailsPanelHeader.styled'\nimport getThumbnails from '../../helpers/getThumbnails'\nimport { buildDetailsPanelTitles } from '../../helpers/buildDetailsPanelTitles'\nimport { PlayableIcon } from '@shared/components/PlayableIcon/PlayableIcon'\n\nexport type EntityTypeIcons = {\n  folder: Record<string, string>\n  task: Record<string, string>\n  product: Record<string, string>\n}\n\ntype DetailsPanelHeaderProps = {\n  entityType: 'folder' | 'task' | 'version' | 'representation'\n  entitySubTypes: string[]\n  entities: DetailsPanelEntityData[]\n  disabledAssignees?: any[]\n  users?: any[]\n  disabledStatuses?: string[]\n  tagsOptions?: any[]\n  isFetching?: boolean\n  isCompact?: boolean\n  currentTab: DetailsPanelTab\n  onTabChange: (tab: DetailsPanelTab) => void\n  onOpenViewer: (args: any) => void\n  onEntityFocus: DetailsPanelProps['onEntityFocus']\n  entityTypeIcons: EntityTypeIcons\n}\n\nconst DetailsPanelHeader = ({\n  entityType,\n  entitySubTypes,\n  entities = [],\n  disabledAssignees = [],\n  users = [],\n  disabledStatuses,\n  tagsOptions = [],\n  isFetching,\n  isCompact = false,\n  currentTab,\n  onTabChange,\n  entityTypeIcons,\n  onOpenViewer,\n  onEntityFocus,\n}: DetailsPanelHeaderProps) => {\n  const { useSearchParams, useNavigate, isDeveloperMode } = useDetailsPanelContext()\n  const navigate = useNavigate()\n  const [searchParams, setSearchParams] = useSearchParams()\n  const tagsSelectRef = useRef<DropdownRef>(null)\n\n  const statuses = useScopedStatuses(\n    entities.map((entity) => entity.projectName),\n    [entityType],\n  )\n\n  // for selected entities, get flat list of assignees\n  const entityUsers: string[] = useMemo(\n    () =>\n      union(\n        ...entities.flatMap((entity) => [\n          entity.task?.assignees || [],\n          entity.version?.author || [],\n        ]),\n      ),\n    [entities],\n  )\n\n  let firstEntity = entities[0]\n  // If there's no data return null\n  const isLoading = entities.length === 0 || !firstEntity || isFetching\n  // placeholder entity\n  if (!firstEntity) {\n    firstEntity = {\n      parents: [],\n      id: 'placeholder',\n      name: 'loading...',\n      label: 'loading...',\n      entityType,\n      status: 'loading',\n      projectName: 'loading...',\n      tags: [],\n      hasReviewables: false,\n      attrib: {},\n      createdAt: new Date().toISOString(),\n      updatedAt: new Date().toISOString(),\n      path: '',\n    }\n  }\n\n  const projectName = entities.length > 1 ? undefined : firstEntity?.projectName\n\n  const entityIds = entities\n    .filter((e) => e.projectName === firstEntity?.projectName && e.id)\n    .map((entity) => entity.id)\n\n  // get priorities\n  // get priority attribute so we know the colors and icons for each priority\n  const { data: priorityAttrib } = useGetAttributeConfigQuery({ attributeName: 'priority' })\n  const priorities = getPriorityOptions(priorityAttrib, entityType)\n\n  const thumbnails = useMemo(\n    () => getThumbnails(entities, entityType, entityTypeIcons),\n    [entities, entityType, entityTypeIcons],\n  )\n\n  const statusesValue = useMemo(() => entities.map((t) => t.status), [entities])\n  const priorityValues = useMemo(() => entities.map((t) => t.attrib?.priority), [entities])\n  const tagsValues: string[][] = useMemo(() => entities.map((t) => t.tags), [entities])\n  const tagsOptionsObject = useMemo(\n    () =>\n      tagsOptions.reduce((acc, tag) => {\n        acc[tag.name] = tag\n        return acc\n      }, {}),\n    [tagsOptions],\n  )\n\n  const isMultiple = entities.length > 1\n\n  const { updateEntity } = useEntityUpdate({\n    entities: entities.map((e) => ({\n      id: e.id,\n      projectName: e.projectName,\n      users: e.task?.assignees || [],\n      folderId: e.folder?.id,\n      productId: e.product?.id,\n    })),\n    entityType,\n  })\n\n  const handleUpdate = (field: string, value: any) => {\n    if (value === null || value === undefined) return console.error('value is null or undefined')\n    return updateEntity(field, value)\n  }\n\n  const handleThumbnailClick = () => {\n    let versionIds,\n      id = firstEntity.id,\n      entityTypeKey = entityType + 'Id'\n\n    if (entityType === 'version' && firstEntity.product?.id) {\n      versionIds = [firstEntity.id]\n      id = firstEntity.product?.id\n      entityTypeKey = 'productId'\n    }\n\n    if (id) {\n      onOpenViewer({\n        [entityTypeKey]: id,\n        projectName,\n        versionIds,\n      })\n    }\n  }\n\n  const hasUser =\n    ['task', 'version', 'representation'].includes(entityType) &&\n    (entityUsers.length > 0 || entityType === 'task')\n\n  const usersOptions = users.map((u) => u)\n  if (hasUser) {\n    // check if all users are in options, otherwise add them\n    const allUsers = users.map((u) => u.name)\n    const usersToAdd = entityUsers.filter((u) => !allUsers.includes(u))\n    if (usersToAdd.length) {\n      usersOptions.push(...usersToAdd.map((u) => ({ name: u, fullName: u })))\n    }\n  }\n\n  // Get title and subtitle from the imported function\n  const { title, subTitle } = buildDetailsPanelTitles(entities, entityType)\n  const status =\n    statuses?.length !== 0 && statuses?.find((status) => status.name === statusesValue[0])\n  return (\n    <Styled.HeaderContainer>\n      <EntityPanelUploader\n        entities={entities}\n        entityType={entityType}\n        projectName={projectName}\n        onVersionCreated={(id) => onEntityFocus?.(id, 'version')}\n      >\n        <Styled.Grid className={clsx('details-panel-header', { isCompact })}>\n          <Styled.Header\n            className={clsx('titles', { isCompact, loading: isLoading }, 'no-shimmer')}\n          >\n            <div style={{ position: 'relative' }}>\n              <StackedThumbnails\n                isLoading={isLoading}\n                shimmer={isLoading}\n                thumbnails={thumbnails}\n                onClick={thumbnails.length === 1 ? handleThumbnailClick : undefined}\n                hoverIcon={'play_circle'}\n              />\n              {!isMultiple && firstEntity?.hasReviewables && <PlayableIcon />}\n            </div>\n            <Styled.Content className={clsx({ loading: isLoading })}>\n              <Styled.Title>\n                <h2>{title}</h2>\n                <Styled.TagsSelect\n                  ref={tagsSelectRef}\n                  value={union(...tagsValues)}\n                  tags={tagsOptionsObject}\n                  options={[]}\n                  editable\n                  editor\n                  onChange={(value) => handleUpdate('tags', value)}\n                  align=\"right\"\n                  styleDropdown={{ display: isLoading ? 'none' : 'unset' }}\n                  className=\"tags-select\"\n                  itemClassName=\"details-tag\"\n                />\n              </Styled.Title>\n              <div className=\"sub-title\">\n                <span className=\"entity-type\">{upperFirst(entityType)} - </span>\n                <h3>{subTitle}</h3>\n              </div>\n            </Styled.Content>\n          </Styled.Header>\n          <Styled.StatusSelect\n            value={statusesValue}\n            options={statuses || []}\n            disabledValues={disabledStatuses}\n            invert\n            style={{ maxWidth: 'unset' }}\n            onChange={(value) => handleUpdate('status', value)}\n            className={clsx('status-select', { loading: isLoading })}\n            align={isCompact ? 'right' : 'left'}\n            $textColor={getTextColor(status !== undefined ? (status as Status).color : '#OOO')}\n          />\n          {!isCompact &&\n            (!hasUser || isLoading ? (\n              <div></div>\n            ) : (\n              <Styled.AssigneeSelect\n                value={entityUsers}\n                options={usersOptions}\n                disabledValues={disabledAssignees.map((u) => u.name)}\n                isMultiple={isMultiple && entityUsers.length > 1 && entityType === 'task'}\n                readOnly={entityType !== 'task'}\n                emptyMessage={entityType === 'task' ? 'Assign user' : ''}\n                align=\"right\"\n                onChange={(value) => handleUpdate('assignees', value)}\n                className=\"assignee-select\"\n                data-tooltip={\n                  entityUsers.length ? (entityType === 'task' ? 'Assigned users' : 'Author') : ''\n                }\n              />\n            ))}\n          <Actions\n            entities={entities}\n            entityType={entityType}\n            entitySubTypes={entitySubTypes}\n            isLoadingEntity={!!isFetching || !!isLoading}\n            searchParams={searchParams}\n            isDeveloperMode={isDeveloperMode}\n            onSetSearchParams={setSearchParams}\n            onNavigate={navigate}\n          />\n          {priorities ? (\n            <Styled.PriorityEnumDropdown\n              options={priorities}\n              placeholder=\"No priority\"\n              value={priorityValues}\n              onChange={(value) => handleUpdate('attrib', { priority: value[0] })}\n              align=\"right\"\n            />\n          ) : (\n            <div style={{ height: 32 }}></div>\n          )}\n          <DetailsPanelTabs\n            entityType={entityType}\n            currentTab={currentTab}\n            onTabChange={onTabChange}\n            isLoading={isLoading}\n          />\n        </Styled.Grid>\n      </EntityPanelUploader>\n    </Styled.HeaderContainer>\n  )\n}\n\nexport default DetailsPanelHeader\n"],"names":["DetailsPanelHeader","entityType","entitySubTypes","entities","disabledAssignees","users","disabledStatuses","tagsOptions","isFetching","isCompact","currentTab","onTabChange","entityTypeIcons","onOpenViewer","onEntityFocus","useSearchParams","useNavigate","isDeveloperMode","useDetailsPanelContext","navigate","searchParams","setSearchParams","tagsSelectRef","useRef","statuses","useScopedStatuses","entity","entityUsers","useMemo","union","firstEntity","isLoading","projectName","e","priorityAttrib","useGetAttributeConfigQuery","priorities","getPriorityOptions","thumbnails","getThumbnails","statusesValue","priorityValues","tagsValues","tagsOptionsObject","acc","tag","isMultiple","updateEntity","useEntityUpdate","handleUpdate","field","value","handleThumbnailClick","versionIds","id","entityTypeKey","hasUser","usersOptions","u","allUsers","usersToAdd","title","subTitle","buildDetailsPanelTitles","status","jsx","Styled.HeaderContainer","EntityPanelUploader","jsxs","Styled.Grid","clsx","Styled.Header","StackedThumbnails","PlayableIcon","Styled.Content","Styled.Title","Styled.TagsSelect","upperFirst","Styled.StatusSelect","getTextColor","Styled.AssigneeSelect","Actions","Styled.PriorityEnumDropdown","DetailsPanelTabs"],"mappings":"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"}

package/dist/shared/src/containers/DetailsPanel/components/DetailsPanelHeader/DetailsPanelHeader.styled.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"DetailsPanelHeader.styled.cjs.js","sources":["../../../../../../../src/containers/DetailsPanel/components/DetailsPanelHeader/DetailsPanelHeader.styled.ts"],"sourcesContent":["import styled from 'styled-components'\nimport {\n  Button,\n  AssigneeSelect as AssigneeSelectComponent,\n  TagsSelect as TagsSelectComponent,\n  StatusSelect as StatusSelectComponent,\n  EnumDropdown,\n} from '@ynput/ayon-react-components'\n\nexport const HeaderContainer = styled.div`\n  position: relative;\n`\n\nexport const Grid = styled.div`\n  position: relative;\n  padding: 8px;\n  border-bottom: 1px solid var(--md-sys-color-outline-variant);\n  flex: none;\n  overflow: hidden;\n\n  display: grid;\n  /* two columns */\n  grid-template-columns: 1fr 1fr;\n  gap: var(--base-gap-large);\n\n  /* set full widths for different elements */\n  .path,\n  .titles,\n  .filters {\n    grid-column: span 2;\n  }\n\n  &.isCompact {\n    /* hide fields when compact */\n    .assignee-select,\n    .tags-select,\n    .actions,\n    .filters {\n      display: none;\n    }\n    /* right column auto size */\n    grid-template-columns: 1fr auto;\n    /* align center */\n    align-items: center;\n  }\n`\n\nexport const CloseButton = styled(Button)`\n  position: absolute;\n  right: 4px;\n  top: 4px;\n  width: fit-content;\n  z-index: 50;\n`\n\nexport const Header = styled.header`\n  display: flex;\n  align-items: flex-start;\n  gap: var(--base-gap-large);\n  z-index: 50;\n\n  .entity-type {\n    min-width: fit-content;\n  }\n\n  &.loading {\n    .playable {\n      display: none;\n    }\n  }\n`\n\nexport const Title = styled.div`\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n\n  h2 {\n    min-width: fit-content;\n  }\n`\n\nexport const ThumbnailWrapper = styled.div`\n  position: relative;\n  height: 100%;\n\n  &:hover {\n    .playable {\n      opacity: 0.8;\n    }\n  }\n  & > div {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    gap: var(--base-gap-small);\n  }\n`\n\nexport const Content = styled.div`\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  justify-content: center;\n  overflow: hidden;\n  position: relative;\n  border-radius: var(--border-radius-m);\n\n  h2 {\n    margin: 0;\n  }\n\n  h3 {\n    display: block;\n    margin: 0;\n    border: none;\n    padding: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  &.loading {\n    width: 70%;\n\n    h2,\n    h3,\n    .sub-title {\n      white-space: nowrap;\n    }\n  }\n\n  .sub-title {\n    display: flex;\n    align-items: center;\n    gap: var(--base-gap-medium);\n  }\n`\n\nexport const ContentRow = styled.div`\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  align-self: stretch;\n\n  label {\n    color: var(--md-sys-color-outline);\n  }\n`\n\nexport const LabelWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n`\ninterface StatusSelectProps {\n  $textColor: string;\n}\nexport const StatusSelect = styled(StatusSelectComponent)<StatusSelectProps>`\n  width: fit-content;\n  .status-field.value {\n    position: relative;\n    left: 1px;\n    height: 28px;\n    padding-right: 8px;\n    width: calc(100% - 1px);\n    margin-bottom: 2px;\n    color: ${props => props.$textColor};\n  }\n`\n\nexport const AssigneeSelect = styled(AssigneeSelectComponent)`\n  width: fit-content;\n  justify-self: end;\n  max-width: 100%;\n`\nexport const TagsSelect = styled(TagsSelectComponent)`\n  height: 24px;\n  .template-value {\n    padding: 0 2px;\n  }\n  .tag {\n    padding: 0 4px;\n  }\n  .placeholder {\n    padding: 0 2px;\n    span:not(.icon) {\n      display: none;\n    }\n  }\n`\n\nexport const PriorityEnumDropdown = styled(EnumDropdown)`\n  width: max-content;\n  justify-self: end;\n  /* remove text and dropdown icon */\n  .control {\n    display: none;\n  }\n\n  .template-value {\n    border: none;\n    padding: 0;\n    & > div {\n      justify-content: center;\n    }\n  }\n\n  button {\n    padding: 0 8px;\n    background-color: unset;\n\n    &:hover {\n      background-color: var(--md-sys-color-surface-container-low-hover);\n    }\n  }\n`\n\nexport const Footer = styled.footer`\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n  justify-content: space-between;\n`\n"],"names":["HeaderContainer","styled","Grid","CloseButton","Button","Header","Title","ThumbnailWrapper","Content","ContentRow","LabelWrapper","StatusSelect","StatusSelectComponent","props","AssigneeSelect","AssigneeSelectComponent","TagsSelect","TagsSelectComponent","PriorityEnumDropdown","EnumDropdown","Footer"],"mappings":"+JASaA,EAAkBC,EAAO;AAAA;AAAA,EAIzBC,EAAOD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkCdE,EAAcF,EAAOG,QAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ3BC,EAASJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiBhBK,EAAQL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUfM,EAAmBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiB1BO,EAAUP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAwCjBQ,EAAaR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWpBS,EAAeT,EAAO;AAAA;AAAA;AAAA,EAOtBU,EAAeV,EAAOW,cAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAS3CC,GAASA,EAAM,UAAU;AAAA;AAAA,EAIzBC,EAAiBb,EAAOc,gBAAuB;AAAA;AAAA;AAAA;AAAA,EAK/CC,EAAaf,EAAOgB,YAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgBvCC,EAAuBjB,EAAOkB,cAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA0B1CC,EAASnB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA"}
+{"version":3,"file":"DetailsPanelHeader.styled.cjs.js","sources":["../../../../../../../src/containers/DetailsPanel/components/DetailsPanelHeader/DetailsPanelHeader.styled.ts"],"sourcesContent":["import styled from 'styled-components'\nimport {\n  Button,\n  AssigneeSelect as AssigneeSelectComponent,\n  TagsSelect as TagsSelectComponent,\n  StatusSelect as StatusSelectComponent,\n  EnumDropdown,\n} from '@ynput/ayon-react-components'\n\nexport const HeaderContainer = styled.div`\n  position: relative;\n`\n\nexport const Grid = styled.div`\n  position: relative;\n  padding: 8px;\n  border-bottom: 1px solid var(--md-sys-color-outline-variant);\n  flex: none;\n  overflow: hidden;\n\n  display: grid;\n  /* two columns */\n  grid-template-columns: 1fr 1fr;\n  gap: var(--base-gap-large);\n\n  /* set full widths for different elements */\n  .path,\n  .titles,\n  .filters {\n    grid-column: span 2;\n  }\n\n  &.isCompact {\n    /* hide fields when compact */\n    .assignee-select,\n    .tags-select,\n    .actions,\n    .filters {\n      display: none;\n    }\n    /* right column auto size */\n    grid-template-columns: 1fr auto;\n    /* align center */\n    align-items: center;\n  }\n`\n\nexport const CloseButton = styled(Button)`\n  position: absolute;\n  right: 4px;\n  top: 4px;\n  width: fit-content;\n  z-index: 50;\n`\n\nexport const Header = styled.header`\n  display: flex;\n  align-items: flex-start;\n  gap: var(--base-gap-large);\n  z-index: 50;\n\n  .entity-type {\n    min-width: fit-content;\n  }\n\n  &.loading {\n    .playable {\n      display: none;\n    }\n  }\n`\n\nexport const Title = styled.div`\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n\n  h2 {\n    min-width: fit-content;\n  }\n`\n\nexport const ThumbnailWrapper = styled.div`\n  position: relative;\n  height: 100%;\n\n  &:hover {\n    .playable {\n      opacity: 0.8;\n    }\n  }\n  & > div {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    gap: var(--base-gap-small);\n  }\n`\n\nexport const Content = styled.div`\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  justify-content: center;\n  overflow: hidden;\n  position: relative;\n  border-radius: var(--border-radius-m);\n\n  h2 {\n    margin: 0;\n  }\n\n  h3 {\n    display: block;\n    margin: 0;\n    border: none;\n    padding: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  &.loading {\n    width: 70%;\n\n    h2,\n    h3,\n    .sub-title {\n      white-space: nowrap;\n    }\n  }\n\n  .sub-title {\n    display: flex;\n    align-items: center;\n    gap: var(--base-gap-medium);\n  }\n`\n\nexport const ContentRow = styled.div`\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  align-self: stretch;\n\n  label {\n    color: var(--md-sys-color-outline);\n  }\n`\n\nexport const LabelWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n`\ninterface StatusSelectProps {\n  $textColor: string\n}\nexport const StatusSelect = styled(StatusSelectComponent)<StatusSelectProps>`\n  width: fit-content;\n  .status-field.value {\n    position: relative;\n    left: 1px;\n    height: 28px;\n    padding-right: 8px;\n    width: calc(100% - 1px);\n    margin-bottom: 2px;\n    color: ${(props) => props.$textColor};\n  }\n`\n\nexport const AssigneeSelect = styled(AssigneeSelectComponent)`\n  width: fit-content;\n  justify-self: end;\n  max-width: 100%;\n`\nexport const TagsSelect = styled(TagsSelectComponent)`\n  height: 24px;\n  .template-value {\n    padding: 0 2px;\n  }\n  .tag {\n    padding: 0 4px;\n  }\n  .placeholder {\n    padding: 0 2px;\n    span:not(.icon) {\n      display: none;\n    }\n  }\n`\n\nexport const PriorityEnumDropdown = styled(EnumDropdown)`\n  width: max-content;\n  justify-self: end;\n  /* remove text and dropdown icon */\n  .control {\n    display: none;\n  }\n\n  .template-value {\n    border: none;\n    padding: 0;\n    & > div {\n      justify-content: center;\n    }\n  }\n\n  button {\n    padding: 0 8px;\n    background-color: unset;\n\n    &:hover {\n      background-color: var(--md-sys-color-surface-container-low-hover);\n    }\n  }\n`\n\nexport const Footer = styled.footer`\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n  justify-content: space-between;\n`\n"],"names":["HeaderContainer","styled","Grid","CloseButton","Button","Header","Title","ThumbnailWrapper","Content","ContentRow","LabelWrapper","StatusSelect","StatusSelectComponent","props","AssigneeSelect","AssigneeSelectComponent","TagsSelect","TagsSelectComponent","PriorityEnumDropdown","EnumDropdown","Footer"],"mappings":"+JASaA,EAAkBC,EAAO;AAAA;AAAA,EAIzBC,EAAOD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkCdE,EAAcF,EAAOG,QAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ3BC,EAASJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiBhBK,EAAQL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUfM,EAAmBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiB1BO,EAAUP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAwCjBQ,EAAaR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWpBS,EAAeT,EAAO;AAAA;AAAA;AAAA,EAOtBU,EAAeV,EAAOW,cAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAS1CC,GAAUA,EAAM,UAAU;AAAA;AAAA,EAI3BC,EAAiBb,EAAOc,gBAAuB;AAAA;AAAA;AAAA;AAAA,EAK/CC,EAAaf,EAAOgB,YAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgBvCC,EAAuBjB,EAAOkB,cAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA0B1CC,EAASnB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA"}

package/dist/shared/src/containers/DetailsPanel/components/DetailsPanelHeader/DetailsPanelHeader.styled.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DetailsPanelHeader.styled.es.js","sources":["../../../../../../../src/containers/DetailsPanel/components/DetailsPanelHeader/DetailsPanelHeader.styled.ts"],"sourcesContent":["import styled from 'styled-components'\nimport {\n  Button,\n  AssigneeSelect as AssigneeSelectComponent,\n  TagsSelect as TagsSelectComponent,\n  StatusSelect as StatusSelectComponent,\n  EnumDropdown,\n} from '@ynput/ayon-react-components'\n\nexport const HeaderContainer = styled.div`\n  position: relative;\n`\n\nexport const Grid = styled.div`\n  position: relative;\n  padding: 8px;\n  border-bottom: 1px solid var(--md-sys-color-outline-variant);\n  flex: none;\n  overflow: hidden;\n\n  display: grid;\n  /* two columns */\n  grid-template-columns: 1fr 1fr;\n  gap: var(--base-gap-large);\n\n  /* set full widths for different elements */\n  .path,\n  .titles,\n  .filters {\n    grid-column: span 2;\n  }\n\n  &.isCompact {\n    /* hide fields when compact */\n    .assignee-select,\n    .tags-select,\n    .actions,\n    .filters {\n      display: none;\n    }\n    /* right column auto size */\n    grid-template-columns: 1fr auto;\n    /* align center */\n    align-items: center;\n  }\n`\n\nexport const CloseButton = styled(Button)`\n  position: absolute;\n  right: 4px;\n  top: 4px;\n  width: fit-content;\n  z-index: 50;\n`\n\nexport const Header = styled.header`\n  display: flex;\n  align-items: flex-start;\n  gap: var(--base-gap-large);\n  z-index: 50;\n\n  .entity-type {\n    min-width: fit-content;\n  }\n\n  &.loading {\n    .playable {\n      display: none;\n    }\n  }\n`\n\nexport const Title = styled.div`\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n\n  h2 {\n    min-width: fit-content;\n  }\n`\n\nexport const ThumbnailWrapper = styled.div`\n  position: relative;\n  height: 100%;\n\n  &:hover {\n    .playable {\n      opacity: 0.8;\n    }\n  }\n  & > div {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    gap: var(--base-gap-small);\n  }\n`\n\nexport const Content = styled.div`\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  justify-content: center;\n  overflow: hidden;\n  position: relative;\n  border-radius: var(--border-radius-m);\n\n  h2 {\n    margin: 0;\n  }\n\n  h3 {\n    display: block;\n    margin: 0;\n    border: none;\n    padding: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  &.loading {\n    width: 70%;\n\n    h2,\n    h3,\n    .sub-title {\n      white-space: nowrap;\n    }\n  }\n\n  .sub-title {\n    display: flex;\n    align-items: center;\n    gap: var(--base-gap-medium);\n  }\n`\n\nexport const ContentRow = styled.div`\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  align-self: stretch;\n\n  label {\n    color: var(--md-sys-color-outline);\n  }\n`\n\nexport const LabelWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n`\ninterface StatusSelectProps {\n  $textColor: string;\n}\nexport const StatusSelect = styled(StatusSelectComponent)<StatusSelectProps>`\n  width: fit-content;\n  .status-field.value {\n    position: relative;\n    left: 1px;\n    height: 28px;\n    padding-right: 8px;\n    width: calc(100% - 1px);\n    margin-bottom: 2px;\n    color: ${props => props.$textColor};\n  }\n`\n\nexport const AssigneeSelect = styled(AssigneeSelectComponent)`\n  width: fit-content;\n  justify-self: end;\n  max-width: 100%;\n`\nexport const TagsSelect = styled(TagsSelectComponent)`\n  height: 24px;\n  .template-value {\n    padding: 0 2px;\n  }\n  .tag {\n    padding: 0 4px;\n  }\n  .placeholder {\n    padding: 0 2px;\n    span:not(.icon) {\n      display: none;\n    }\n  }\n`\n\nexport const PriorityEnumDropdown = styled(EnumDropdown)`\n  width: max-content;\n  justify-self: end;\n  /* remove text and dropdown icon */\n  .control {\n    display: none;\n  }\n\n  .template-value {\n    border: none;\n    padding: 0;\n    & > div {\n      justify-content: center;\n    }\n  }\n\n  button {\n    padding: 0 8px;\n    background-color: unset;\n\n    &:hover {\n      background-color: var(--md-sys-color-surface-container-low-hover);\n    }\n  }\n`\n\nexport const Footer = styled.footer`\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n  justify-content: space-between;\n`\n"],"names":["HeaderContainer","styled","Grid","CloseButton","Button","Header","Title","ThumbnailWrapper","Content","ContentRow","LabelWrapper","StatusSelect","StatusSelectComponent","props","AssigneeSelect","AssigneeSelectComponent","TagsSelect","TagsSelectComponent","PriorityEnumDropdown","EnumDropdown","Footer"],"mappings":";;AASO,MAAMA,IAAkBC,EAAO;AAAA;AAAA,GAIzBC,IAAOD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAkCdE,IAAcF,EAAOG,CAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQ3BC,IAASJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAiBhBK,IAAQL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUfM,IAAmBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAiB1BO,IAAUP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAwCjBQ,IAAaR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWpBS,IAAeT,EAAO;AAAA;AAAA;AAAA,GAOtBU,IAAeV,EAAOW,CAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAS3C,CAAAC,MAASA,EAAM,UAAU;AAAA;AAAA,GAIzBC,IAAiBb,EAAOc,CAAuB;AAAA;AAAA;AAAA;AAAA,GAK/CC,IAAaf,EAAOgB,CAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAgBvCC,IAAuBjB,EAAOkB,CAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA0B1CC,IAASnB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"DetailsPanelHeader.styled.es.js","sources":["../../../../../../../src/containers/DetailsPanel/components/DetailsPanelHeader/DetailsPanelHeader.styled.ts"],"sourcesContent":["import styled from 'styled-components'\nimport {\n  Button,\n  AssigneeSelect as AssigneeSelectComponent,\n  TagsSelect as TagsSelectComponent,\n  StatusSelect as StatusSelectComponent,\n  EnumDropdown,\n} from '@ynput/ayon-react-components'\n\nexport const HeaderContainer = styled.div`\n  position: relative;\n`\n\nexport const Grid = styled.div`\n  position: relative;\n  padding: 8px;\n  border-bottom: 1px solid var(--md-sys-color-outline-variant);\n  flex: none;\n  overflow: hidden;\n\n  display: grid;\n  /* two columns */\n  grid-template-columns: 1fr 1fr;\n  gap: var(--base-gap-large);\n\n  /* set full widths for different elements */\n  .path,\n  .titles,\n  .filters {\n    grid-column: span 2;\n  }\n\n  &.isCompact {\n    /* hide fields when compact */\n    .assignee-select,\n    .tags-select,\n    .actions,\n    .filters {\n      display: none;\n    }\n    /* right column auto size */\n    grid-template-columns: 1fr auto;\n    /* align center */\n    align-items: center;\n  }\n`\n\nexport const CloseButton = styled(Button)`\n  position: absolute;\n  right: 4px;\n  top: 4px;\n  width: fit-content;\n  z-index: 50;\n`\n\nexport const Header = styled.header`\n  display: flex;\n  align-items: flex-start;\n  gap: var(--base-gap-large);\n  z-index: 50;\n\n  .entity-type {\n    min-width: fit-content;\n  }\n\n  &.loading {\n    .playable {\n      display: none;\n    }\n  }\n`\n\nexport const Title = styled.div`\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n\n  h2 {\n    min-width: fit-content;\n  }\n`\n\nexport const ThumbnailWrapper = styled.div`\n  position: relative;\n  height: 100%;\n\n  &:hover {\n    .playable {\n      opacity: 0.8;\n    }\n  }\n  & > div {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    gap: var(--base-gap-small);\n  }\n`\n\nexport const Content = styled.div`\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  justify-content: center;\n  overflow: hidden;\n  position: relative;\n  border-radius: var(--border-radius-m);\n\n  h2 {\n    margin: 0;\n  }\n\n  h3 {\n    display: block;\n    margin: 0;\n    border: none;\n    padding: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  &.loading {\n    width: 70%;\n\n    h2,\n    h3,\n    .sub-title {\n      white-space: nowrap;\n    }\n  }\n\n  .sub-title {\n    display: flex;\n    align-items: center;\n    gap: var(--base-gap-medium);\n  }\n`\n\nexport const ContentRow = styled.div`\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  align-self: stretch;\n\n  label {\n    color: var(--md-sys-color-outline);\n  }\n`\n\nexport const LabelWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n`\ninterface StatusSelectProps {\n  $textColor: string\n}\nexport const StatusSelect = styled(StatusSelectComponent)<StatusSelectProps>`\n  width: fit-content;\n  .status-field.value {\n    position: relative;\n    left: 1px;\n    height: 28px;\n    padding-right: 8px;\n    width: calc(100% - 1px);\n    margin-bottom: 2px;\n    color: ${(props) => props.$textColor};\n  }\n`\n\nexport const AssigneeSelect = styled(AssigneeSelectComponent)`\n  width: fit-content;\n  justify-self: end;\n  max-width: 100%;\n`\nexport const TagsSelect = styled(TagsSelectComponent)`\n  height: 24px;\n  .template-value {\n    padding: 0 2px;\n  }\n  .tag {\n    padding: 0 4px;\n  }\n  .placeholder {\n    padding: 0 2px;\n    span:not(.icon) {\n      display: none;\n    }\n  }\n`\n\nexport const PriorityEnumDropdown = styled(EnumDropdown)`\n  width: max-content;\n  justify-self: end;\n  /* remove text and dropdown icon */\n  .control {\n    display: none;\n  }\n\n  .template-value {\n    border: none;\n    padding: 0;\n    & > div {\n      justify-content: center;\n    }\n  }\n\n  button {\n    padding: 0 8px;\n    background-color: unset;\n\n    &:hover {\n      background-color: var(--md-sys-color-surface-container-low-hover);\n    }\n  }\n`\n\nexport const Footer = styled.footer`\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n  justify-content: space-between;\n`\n"],"names":["HeaderContainer","styled","Grid","CloseButton","Button","Header","Title","ThumbnailWrapper","Content","ContentRow","LabelWrapper","StatusSelect","StatusSelectComponent","props","AssigneeSelect","AssigneeSelectComponent","TagsSelect","TagsSelectComponent","PriorityEnumDropdown","EnumDropdown","Footer"],"mappings":";;AASO,MAAMA,IAAkBC,EAAO;AAAA;AAAA,GAIzBC,IAAOD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAkCdE,IAAcF,EAAOG,CAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQ3BC,IAASJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAiBhBK,IAAQL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUfM,IAAmBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAiB1BO,IAAUP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAwCjBQ,IAAaR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWpBS,IAAeT,EAAO;AAAA;AAAA;AAAA,GAOtBU,IAAeV,EAAOW,CAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAS3C,CAACC,MAAUA,EAAM,UAAU;AAAA;AAAA,GAI3BC,IAAiBb,EAAOc,CAAuB;AAAA;AAAA;AAAA;AAAA,GAK/CC,IAAaf,EAAOgB,CAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAgBvCC,IAAuBjB,EAAOkB,CAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA0B1CC,IAASnB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;"}