@ynput/ayon-frontend-shared 0.3.16 → 0.3.18

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

@@ -1,15 +1,15 @@
-import { j as t } from "../../../../_virtual/jsx-runtime.es.js";
-import { useState as S } from "react";
-import { Container as v, Header as L, LinksList as M, SubHeader as C } from "./LinksManager.styled.es.js";
-import { upperFirst as E } from "lodash";
+import { j as i } from "../../../../_virtual/jsx-runtime.es.js";
+import { useState as I } from "react";
+import { Container as D, Header as H, LinksList as w, SubHeader as B } from "./LinksManager.styled.es.js";
+import { upperFirst as F } from "lodash";
 import "react-toastify";
-import { getEntityId as c } from "../../util/getEntityId.es.js";
+import { getEntityId as d } from "../../util/getEntityId.es.js";
 import "../../util/pubsub.es.js";
-import T from "./hooks/useUpdateLinks.es.js";
-import b from "./AddNewLinks.es.js";
-import { EntityPickerDialog as A } from "../../containers/EntityPickerDialog/EntityPickerDialog.es.js";
-import { LinkManagerItem as R } from "./LinkManagerItem.es.js";
-import { Button as F } from "@ynput/ayon-react-components";
+import G from "./hooks/useUpdateLinks.es.js";
+import K from "./AddNewLinks.es.js";
+import { EntityPickerDialog as P } from "../../containers/EntityPickerDialog/EntityPickerDialog.es.js";
+import { LinkManagerItem as U } from "./LinkManagerItem.es.js";
+import { Button as N } from "@ynput/ayon-react-components";
 import "../../context/RemoteModulesContext.es.js";
 import "../../context/DetailsPanelContext.es.js";
 import "../../context/SubtasksModulesContext.es.js";
@@ -24,97 +24,128 @@ import "../../context/PowerpackContext.es.js";
 import "../../context/MoveEntityContext.es.js";
 import "../../context/MenuContext.es.js";
 import "../../context/WebsocketContext.es.js";
-import { useGlobalContext as H } from "../../context/GlobalContext.es.js";
+import { useGlobalContext as O } from "../../context/GlobalContext.es.js";
 import "../../context/ProjectContext.es.js";
 import "../../context/ProjectFoldersContext.es.js";
 import "../../context/UriContext.es.js";
-const dt = ({
-  linkTypeLabel: u,
-  direction: m,
-  links: s = [],
-  projectName: o,
-  entityId: x,
-  entityType: y,
-  linkType: h,
-  targetEntityType: e,
-  folderId: p,
-  selectedEntityIds: f = [],
-  onClose: a,
-  onEntityClick: g
+import { groupLinksByEntity as q } from "./utils/groupLinks.es.js";
+const Ct = ({
+  linkTypeLabel: h,
+  direction: p,
+  links: c = [],
+  projectName: s,
+  entityId: v,
+  entityType: x,
+  linkType: C,
+  targetEntityType: m,
+  folderId: l,
+  selectedEntityIds: E = [],
+  onClose: y,
+  onEntityClick: L
 }) => {
-  const { user: d } = H(), k = d?.data?.isAdmin || d?.data?.isManager, n = T({
-    projectName: o,
-    direction: m,
-    entityId: x,
-    entityType: y,
-    targetEntityType: e,
-    linkType: h
-  }), [I, l] = S(null), j = (i, r) => {
-    i.stopPropagation(), n.remove([
+  const { user: u } = O(), j = u?.data?.isAdmin || u?.data?.isManager, n = G({
+    projectName: s,
+    direction: p,
+    entityId: v,
+    entityType: x,
+    targetEntityType: m,
+    linkType: C
+  }), [g, k] = I(null), [S, T] = I({}), M = q(c), f = (t) => {
+    const e = S[t.groupKey];
+    return e !== void 0 && e !== t.count ? e : t.count;
+  }, b = (t, e) => {
+    t.stopPropagation(), n.remove(
+      e.linkIds.map((a) => ({
+        id: a,
+        target: { entityId: e.entityId, entityType: e.representative.entityType }
+      }))
+    );
+  }, A = (t, e) => {
+    const a = f(t);
+    T((o) => ({ ...o, [t.groupKey]: e }));
+    const r = e - a;
+    if (r > 0) {
+      const o = Array.from({ length: r }, () => ({
+        targetEntityId: t.entityId,
+        linkId: d()
+      }));
+      n.add(o);
+    } else if (r < 0) {
+      const o = t.linkIds.slice(r).map((R) => ({
+        id: R,
+        target: { entityId: t.entityId, entityType: t.representative.entityType }
+      }));
+      n.remove(o);
+    }
+  };
+  return /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+    /* @__PURE__ */ i.jsxs(
+      D,
       {
-        id: r.linkId,
-        target: { entityId: r.entityId, entityType: r.entityType }
+        onMouseDown: (t) => {
+          t.target !== document.activeElement && document.activeElement instanceof HTMLInputElement && document.activeElement.blur();
+        },
+        children: [
+          /* @__PURE__ */ i.jsxs(H, { children: [
+            F(h),
+            " links (",
+            p,
+            ")",
+            /* @__PURE__ */ i.jsx(
+              N,
+              {
+                icon: "close",
+                variant: "text",
+                className: "remove",
+                onClick: y,
+                "data-shortcut": "Escape",
+                "data-tooltip-delay": 500
+              }
+            )
+          ] }),
+          /* @__PURE__ */ i.jsxs(w, { children: [
+            M.map((t) => /* @__PURE__ */ i.jsx(
+              U,
+              {
+                link: t.representative,
+                count: f(t),
+                isSelected: E.includes(t.entityId),
+                onEntityClick: L,
+                onRemove: (e) => b(e, t),
+                onCountChange: (e) => A(t, e),
+                isManager: j
+              },
+              t.representative.linkId
+            )),
+            c.length === 0 && /* @__PURE__ */ i.jsx(B, { children: "No links yet" })
+          ] }),
+          /* @__PURE__ */ i.jsx(
+            K,
+            {
+              targetEntityType: m,
+              projectName: s,
+              onClose: y,
+              onAdd: (t) => n.add([{ targetEntityId: t, linkId: d() }]),
+              onSearchTypeChange: k
+            }
+          )
+        ]
       }
-    ]);
-  };
-  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-    /* @__PURE__ */ t.jsxs(v, { children: [
-      /* @__PURE__ */ t.jsxs(L, { children: [
-        E(u),
-        " links (",
-        m,
-        ")",
-        /* @__PURE__ */ t.jsx(
-          F,
-          {
-            icon: "close",
-            variant: "text",
-            className: "remove",
-            onClick: a,
-            "data-shortcut": "Escape",
-            "data-tooltip-delay": 500
-          }
-        )
-      ] }),
-      /* @__PURE__ */ t.jsxs(M, { children: [
-        s?.map((i) => /* @__PURE__ */ t.jsx(
-          R,
-          {
-            link: i,
-            isSelected: f.includes(i.entityId),
-            onEntityClick: g,
-            onRemove: j,
-            isManager: k
-          },
-          i.linkId
-        )),
-        s.length === 0 && /* @__PURE__ */ t.jsx(C, { children: "No links yet" })
-      ] }),
-      /* @__PURE__ */ t.jsx(
-        b,
-        {
-          targetEntityType: e,
-          projectName: o,
-          onClose: a,
-          onAdd: (i) => n.add([{ targetEntityId: i, linkId: c() }]),
-          onSearchTypeChange: l
-        }
-      )
-    ] }),
-    I === "picker" && /* @__PURE__ */ t.jsx(
-      A,
+    ),
+    g === "picker" && /* @__PURE__ */ i.jsx(
+      P,
       {
-        onClose: () => l(null),
-        projectName: o,
-        entityType: e,
-        initialSelection: p ? { folder: { [p]: !0 } } : void 0,
-        onSubmit: (i) => n.add(i.map((r) => ({ targetEntityId: r, linkId: c() }))),
+        onClose: () => k(null),
+        projectName: s,
+        entityType: m,
+        initialSelection: l ? { folder: { [l]: !0 } } : void 0,
+        onSubmit: (t) => n.add(t.map((e) => ({ targetEntityId: e, linkId: d() }))),
         isMultiSelect: !0
       }
     )
   ] });
 };
 export {
-  dt as LinksManager
+  Ct as LinksManager
 };
 //# sourceMappingURL=LinksManager.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LinksManager.es.js","sources":["../../../../../src/components/LinksManager/LinksManager.tsx"],"sourcesContent":["import { FC, useState } from 'react'\nimport * as Styled from './LinksManager.styled'\nimport { getEntityId } from '@shared/util'\nimport useUpdateLinks from './hooks/useUpdateLinks'\nimport AddNewLinks, { LinkSearchType } from './AddNewLinks'\nimport { EntityPickerDialog, PickerEntityType } from '@shared/containers/EntityPickerDialog'\nimport { upperFirst } from 'lodash'\nimport { LinkManagerItem } from './LinkManagerItem'\nimport { Button } from '@ynput/ayon-react-components'\nimport { useGlobalContext } from '@shared/context'\n\nexport type LinkEntity = {\n  linkId: string\n  entityId: string\n  label: string\n  parents: string[]\n  entityType: string\n  icon: string\n  color?: string // color from folder/task type anatomy\n  isRestricted?: boolean // flag to indicate if this link is restricted (node is null from API)\n}\n\nexport interface LinksManagerProps {\n  linkTypeLabel: string\n  direction?: 'in' | 'out'\n  links: LinkEntity[] // used to display basic info about the links entity\n  projectName: string\n  entityId: string // the entity id of the entity that has these links\n  linkType: string // full link type e.g. workflow|task|task\n  entityType: string // the entity type of the entity that has these links\n  targetEntityType: string // the entity type of the out links\n  folderId?: string | null // the folder selected or the parent folder of the selected (used in EntityPickerDialog)\n  selectedEntityIds?: string[] // list of selected entity IDs to highlight\n  onClose?: () => void\n  onEntityClick?: (entityId: string, entityType: string) => void // a click on an linked entity\n}\n\nexport const LinksManager: FC<LinksManagerProps> = ({\n  linkTypeLabel,\n  direction,\n  links = [],\n  projectName,\n  entityId,\n  entityType,\n  linkType,\n  targetEntityType,\n  folderId,\n  selectedEntityIds = [],\n  onClose,\n  onEntityClick,\n}) => {\n  const { user } = useGlobalContext()\n  const isManager = user?.data?.isAdmin || user?.data?.isManager\n\n  const linksUpdater = useUpdateLinks({\n    projectName,\n    direction,\n    entityId,\n    entityType,\n    targetEntityType,\n    linkType,\n  })\n\n  const [searchType, setSearchType] = useState<LinkSearchType>(null)\n\n  const handleRemove = (e: React.MouseEvent<HTMLButtonElement>, link: LinkEntity) => {\n    // prevent clicks higher up\n    e.stopPropagation()\n\n    linksUpdater.remove([\n      {\n        id: link.linkId,\n        target: { entityId: link.entityId, entityType: link.entityType },\n      },\n    ])\n  }\n\n  return (\n    <>\n      <Styled.Container>\n        <Styled.Header>\n          {upperFirst(linkTypeLabel)} links ({direction})\n          <Button\n            icon={'close'}\n            variant=\"text\"\n            className=\"remove\"\n            onClick={onClose}\n            data-shortcut={'Escape'}\n            data-tooltip-delay={500}\n          />\n        </Styled.Header>\n        <Styled.LinksList>\n          {links?.map((link) => (\n            <LinkManagerItem\n              key={link.linkId}\n              link={link}\n              isSelected={selectedEntityIds.includes(link.entityId)}\n              onEntityClick={onEntityClick}\n              onRemove={handleRemove}\n              isManager={isManager}\n            />\n          ))}\n          {links.length === 0 && <Styled.SubHeader>No links yet</Styled.SubHeader>}\n        </Styled.LinksList>\n        <AddNewLinks\n          targetEntityType={targetEntityType}\n          projectName={projectName}\n          onClose={onClose}\n          onAdd={(id) => linksUpdater.add([{ targetEntityId: id, linkId: getEntityId() }])}\n          onSearchTypeChange={setSearchType}\n        />\n      </Styled.Container>\n      {searchType === 'picker' && (\n        <EntityPickerDialog\n          onClose={() => setSearchType(null)}\n          projectName={projectName}\n          entityType={targetEntityType as PickerEntityType} // the type of entity to pick\n          initialSelection={folderId ? { folder: { [folderId]: true } } : undefined} // preselect current folder\n          onSubmit={(s) =>\n            linksUpdater.add(s.map((id) => ({ targetEntityId: id, linkId: getEntityId() })))\n          }\n          isMultiSelect\n        />\n      )}\n    </>\n  )\n}\n"],"names":["LinksManager","linkTypeLabel","direction","links","projectName","entityId","entityType","linkType","targetEntityType","folderId","selectedEntityIds","onClose","onEntityClick","user","useGlobalContext","isManager","linksUpdater","useUpdateLinks","searchType","setSearchType","useState","handleRemove","e","link","jsxs","Fragment","Styled.Container","Styled.Header","upperFirst","jsx","Button","Styled.LinksList","LinkManagerItem","Styled.SubHeader","AddNewLinks","id","getEntityId","EntityPickerDialog","s"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCO,MAAMA,KAAsC,CAAC;AAAA,EAClD,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ,CAAA;AAAA,EACR,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,mBAAAC,IAAoB,CAAA;AAAA,EACpB,SAAAC;AAAA,EACA,eAAAC;AACF,MAAM;AACJ,QAAM,EAAE,MAAAC,EAAA,IAASC,EAAA,GACXC,IAAYF,GAAM,MAAM,WAAWA,GAAM,MAAM,WAE/CG,IAAeC,EAAe;AAAA,IAClC,aAAAb;AAAA,IACA,WAAAF;AAAA,IACA,UAAAG;AAAA,IACA,YAAAC;AAAA,IACA,kBAAAE;AAAA,IACA,UAAAD;AAAA,EAAA,CACD,GAEK,CAACW,GAAYC,CAAa,IAAIC,EAAyB,IAAI,GAE3DC,IAAe,CAACC,GAAwCC,MAAqB;AAEjF,IAAAD,EAAE,gBAAA,GAEFN,EAAa,OAAO;AAAA,MAClB;AAAA,QACE,IAAIO,EAAK;AAAA,QACT,QAAQ,EAAE,UAAUA,EAAK,UAAU,YAAYA,EAAK,WAAA;AAAA,MAAW;AAAA,IACjE,CACD;AAAA,EACH;AAEA,SACEC,gBAAAA,EAAAA,KAAAC,YAAA,EACE,UAAA;AAAA,IAAAD,gBAAAA,OAACE,GAAA,EACC,UAAA;AAAA,MAAAF,gBAAAA,OAACG,GAAA,EACE,UAAA;AAAA,QAAAC,EAAW3B,CAAa;AAAA,QAAE;AAAA,QAASC;AAAA,QAAU;AAAA,QAC9C2B,gBAAAA,EAAAA;AAAAA,UAACC;AAAA,UAAA;AAAA,YACC,MAAM;AAAA,YACN,SAAQ;AAAA,YACR,WAAU;AAAA,YACV,SAASnB;AAAA,YACT,iBAAe;AAAA,YACf,sBAAoB;AAAA,UAAA;AAAA,QAAA;AAAA,MACtB,GACF;AAAA,MACAa,gBAAAA,OAACO,GAAA,EACE,UAAA;AAAA,QAAA5B,GAAO,IAAI,CAACoB,MACXM,gBAAAA,EAAAA;AAAAA,UAACG;AAAA,UAAA;AAAA,YAEC,MAAAT;AAAA,YACA,YAAYb,EAAkB,SAASa,EAAK,QAAQ;AAAA,YACpD,eAAAX;AAAA,YACA,UAAUS;AAAA,YACV,WAAAN;AAAA,UAAA;AAAA,UALKQ,EAAK;AAAA,QAAA,CAOb;AAAA,QACApB,EAAM,WAAW,2BAAM8B,GAAA,EAAiB,UAAA,eAAA,CAAY;AAAA,MAAA,GACvD;AAAA,MACAJ,gBAAAA,EAAAA;AAAAA,QAACK;AAAA,QAAA;AAAA,UACC,kBAAA1B;AAAA,UACA,aAAAJ;AAAA,UACA,SAAAO;AAAA,UACA,OAAO,CAACwB,MAAOnB,EAAa,IAAI,CAAC,EAAE,gBAAgBmB,GAAI,QAAQC,EAAA,EAAY,CAAG,CAAC;AAAA,UAC/E,oBAAoBjB;AAAA,QAAA;AAAA,MAAA;AAAA,IACtB,GACF;AAAA,IACCD,MAAe,YACdW,gBAAAA,EAAAA;AAAAA,MAACQ;AAAA,MAAA;AAAA,QACC,SAAS,MAAMlB,EAAc,IAAI;AAAA,QACjC,aAAAf;AAAA,QACA,YAAYI;AAAA,QACZ,kBAAkBC,IAAW,EAAE,QAAQ,EAAE,CAACA,CAAQ,GAAG,GAAA,EAAK,IAAM;AAAA,QAChE,UAAU,CAAC6B,MACTtB,EAAa,IAAIsB,EAAE,IAAI,CAACH,OAAQ,EAAE,gBAAgBA,GAAI,QAAQC,EAAA,EAAY,EAAI,CAAC;AAAA,QAEjF,eAAa;AAAA,MAAA;AAAA,IAAA;AAAA,EACf,GAEJ;AAEJ;"}
+{"version":3,"file":"LinksManager.es.js","sources":["../../../../../src/components/LinksManager/LinksManager.tsx"],"sourcesContent":["import { FC, useState } from 'react'\nimport * as Styled from './LinksManager.styled'\nimport { getEntityId } from '@shared/util'\nimport useUpdateLinks from './hooks/useUpdateLinks'\nimport AddNewLinks, { LinkSearchType } from './AddNewLinks'\nimport { EntityPickerDialog, PickerEntityType } from '@shared/containers/EntityPickerDialog'\nimport { upperFirst } from 'lodash'\nimport { LinkManagerItem } from './LinkManagerItem'\nimport { Button } from '@ynput/ayon-react-components'\nimport { useGlobalContext } from '@shared/context'\nimport { groupLinksByEntity, GroupedLink } from './utils/groupLinks'\n\nexport type LinkEntity = {\n  linkId: string\n  entityId: string\n  label: string\n  parents: string[]\n  entityType: string\n  icon: string\n  color?: string // color from folder/task type anatomy\n  isRestricted?: boolean // flag to indicate if this link is restricted (node is null from API)\n}\n\nexport interface LinksManagerProps {\n  linkTypeLabel: string\n  direction?: 'in' | 'out'\n  links: LinkEntity[] // used to display basic info about the links entity\n  projectName: string\n  entityId: string // the entity id of the entity that has these links\n  linkType: string // full link type e.g. workflow|task|task\n  entityType: string // the entity type of the entity that has these links\n  targetEntityType: string // the entity type of the out links\n  folderId?: string | null // the folder selected or the parent folder of the selected (used in EntityPickerDialog)\n  selectedEntityIds?: string[] // list of selected entity IDs to highlight\n  onClose?: () => void\n  onEntityClick?: (entityId: string, entityType: string) => void // a click on an linked entity\n}\n\nexport const LinksManager: FC<LinksManagerProps> = ({\n  linkTypeLabel,\n  direction,\n  links = [],\n  projectName,\n  entityId,\n  entityType,\n  linkType,\n  targetEntityType,\n  folderId,\n  selectedEntityIds = [],\n  onClose,\n  onEntityClick,\n}) => {\n  const { user } = useGlobalContext()\n  const isManager = user?.data?.isAdmin || user?.data?.isManager\n\n  const linksUpdater = useUpdateLinks({\n    projectName,\n    direction,\n    entityId,\n    entityType,\n    targetEntityType,\n    linkType,\n  })\n\n  const [searchType, setSearchType] = useState<LinkSearchType>(null)\n  // Optimistic counts for immediate UI feedback (creates are not optimistic in the cache)\n  const [optimisticCounts, setOptimisticCounts] = useState<Record<string, number>>({})\n\n  const groupedLinks = groupLinksByEntity(links)\n\n  // Get display count: use optimistic value until real data catches up\n  const getDisplayCount = (group: GroupedLink) => {\n    const optimistic = optimisticCounts[group.groupKey]\n    if (optimistic !== undefined && optimistic !== group.count) {\n      return optimistic\n    }\n    return group.count\n  }\n\n  const handleRemoveGroup = (e: React.MouseEvent<HTMLButtonElement>, group: GroupedLink) => {\n    e.stopPropagation()\n\n    linksUpdater.remove(\n      group.linkIds.map((id) => ({\n        id,\n        target: { entityId: group.entityId, entityType: group.representative.entityType },\n      })),\n    )\n  }\n\n  const handleCountChange = (group: GroupedLink, newCount: number) => {\n    const currentCount = getDisplayCount(group)\n    // Set optimistic count immediately for instant UI feedback\n    setOptimisticCounts((prev) => ({ ...prev, [group.groupKey]: newCount }))\n\n    const diff = newCount - currentCount\n    if (diff > 0) {\n      // Add more links\n      const newLinks = Array.from({ length: diff }, () => ({\n        targetEntityId: group.entityId,\n        linkId: getEntityId(),\n      }))\n      linksUpdater.add(newLinks)\n    } else if (diff < 0) {\n      // Remove links from the end (diff is negative, so slice(-3) takes last 3)\n      const linksToRemove = group.linkIds.slice(diff).map((id) => ({\n        id,\n        target: { entityId: group.entityId, entityType: group.representative.entityType },\n      }))\n      linksUpdater.remove(linksToRemove)\n    }\n  }\n\n  return (\n    <>\n      <Styled.Container\n        onMouseDown={(e) => {\n          // Blur active input when clicking anywhere in the dialog (so count input commits)\n          if (e.target !== document.activeElement && document.activeElement instanceof HTMLInputElement) {\n            document.activeElement.blur()\n          }\n        }}\n      >\n        <Styled.Header>\n          {upperFirst(linkTypeLabel)} links ({direction})\n          <Button\n            icon={'close'}\n            variant=\"text\"\n            className=\"remove\"\n            onClick={onClose}\n            data-shortcut={'Escape'}\n            data-tooltip-delay={500}\n          />\n        </Styled.Header>\n        <Styled.LinksList>\n          {groupedLinks.map((group) => (\n            <LinkManagerItem\n              key={group.representative.linkId}\n              link={group.representative}\n              count={getDisplayCount(group)}\n              isSelected={selectedEntityIds.includes(group.entityId)}\n              onEntityClick={onEntityClick}\n              onRemove={(e) => handleRemoveGroup(e, group)}\n              onCountChange={(newCount) => handleCountChange(group, newCount)}\n              isManager={isManager}\n            />\n          ))}\n          {links.length === 0 && <Styled.SubHeader>No links yet</Styled.SubHeader>}\n        </Styled.LinksList>\n        <AddNewLinks\n          targetEntityType={targetEntityType}\n          projectName={projectName}\n          onClose={onClose}\n          onAdd={(id) => linksUpdater.add([{ targetEntityId: id, linkId: getEntityId() }])}\n          onSearchTypeChange={setSearchType}\n        />\n      </Styled.Container>\n      {searchType === 'picker' && (\n        <EntityPickerDialog\n          onClose={() => setSearchType(null)}\n          projectName={projectName}\n          entityType={targetEntityType as PickerEntityType} // the type of entity to pick\n          initialSelection={folderId ? { folder: { [folderId]: true } } : undefined} // preselect current folder\n          onSubmit={(s) =>\n            linksUpdater.add(s.map((id) => ({ targetEntityId: id, linkId: getEntityId() })))\n          }\n          isMultiSelect\n        />\n      )}\n    </>\n  )\n}\n"],"names":["LinksManager","linkTypeLabel","direction","links","projectName","entityId","entityType","linkType","targetEntityType","folderId","selectedEntityIds","onClose","onEntityClick","user","useGlobalContext","isManager","linksUpdater","useUpdateLinks","searchType","setSearchType","useState","optimisticCounts","setOptimisticCounts","groupedLinks","groupLinksByEntity","getDisplayCount","group","optimistic","handleRemoveGroup","e","id","handleCountChange","newCount","currentCount","prev","diff","newLinks","getEntityId","linksToRemove","jsxs","Fragment","Styled.Container","Styled.Header","upperFirst","jsx","Button","Styled.LinksList","LinkManagerItem","Styled.SubHeader","AddNewLinks","EntityPickerDialog","s"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCO,MAAMA,KAAsC,CAAC;AAAA,EAClD,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC,IAAQ,CAAA;AAAA,EACR,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,mBAAAC,IAAoB,CAAA;AAAA,EACpB,SAAAC;AAAA,EACA,eAAAC;AACF,MAAM;AACJ,QAAM,EAAE,MAAAC,EAAA,IAASC,EAAA,GACXC,IAAYF,GAAM,MAAM,WAAWA,GAAM,MAAM,WAE/CG,IAAeC,EAAe;AAAA,IAClC,aAAAb;AAAA,IACA,WAAAF;AAAA,IACA,UAAAG;AAAA,IACA,YAAAC;AAAA,IACA,kBAAAE;AAAA,IACA,UAAAD;AAAA,EAAA,CACD,GAEK,CAACW,GAAYC,CAAa,IAAIC,EAAyB,IAAI,GAE3D,CAACC,GAAkBC,CAAmB,IAAIF,EAAiC,CAAA,CAAE,GAE7EG,IAAeC,EAAmBrB,CAAK,GAGvCsB,IAAkB,CAACC,MAAuB;AAC9C,UAAMC,IAAaN,EAAiBK,EAAM,QAAQ;AAClD,WAAIC,MAAe,UAAaA,MAAeD,EAAM,QAC5CC,IAEFD,EAAM;AAAA,EACf,GAEME,IAAoB,CAACC,GAAwCH,MAAuB;AACxF,IAAAG,EAAE,gBAAA,GAEFb,EAAa;AAAA,MACXU,EAAM,QAAQ,IAAI,CAACI,OAAQ;AAAA,QACzB,IAAAA;AAAA,QACA,QAAQ,EAAE,UAAUJ,EAAM,UAAU,YAAYA,EAAM,eAAe,WAAA;AAAA,MAAW,EAChF;AAAA,IAAA;AAAA,EAEN,GAEMK,IAAoB,CAACL,GAAoBM,MAAqB;AAClE,UAAMC,IAAeR,EAAgBC,CAAK;AAE1C,IAAAJ,EAAoB,CAACY,OAAU,EAAE,GAAGA,GAAM,CAACR,EAAM,QAAQ,GAAGM,EAAA,EAAW;AAEvE,UAAMG,IAAOH,IAAWC;AACxB,QAAIE,IAAO,GAAG;AAEZ,YAAMC,IAAW,MAAM,KAAK,EAAE,QAAQD,EAAA,GAAQ,OAAO;AAAA,QACnD,gBAAgBT,EAAM;AAAA,QACtB,QAAQW,EAAA;AAAA,MAAY,EACpB;AACF,MAAArB,EAAa,IAAIoB,CAAQ;AAAA,IAC3B,WAAWD,IAAO,GAAG;AAEnB,YAAMG,IAAgBZ,EAAM,QAAQ,MAAMS,CAAI,EAAE,IAAI,CAACL,OAAQ;AAAA,QAC3D,IAAAA;AAAA,QACA,QAAQ,EAAE,UAAUJ,EAAM,UAAU,YAAYA,EAAM,eAAe,WAAA;AAAA,MAAW,EAChF;AACF,MAAAV,EAAa,OAAOsB,CAAa;AAAA,IACnC;AAAA,EACF;AAEA,SACEC,gBAAAA,EAAAA,KAAAC,YAAA,EACE,UAAA;AAAA,IAAAD,gBAAAA,EAAAA;AAAAA,MAACE;AAAAA,MAAA;AAAA,QACC,aAAa,CAACZ,MAAM;AAElB,UAAIA,EAAE,WAAW,SAAS,iBAAiB,SAAS,yBAAyB,oBAC3E,SAAS,cAAc,KAAA;AAAA,QAE3B;AAAA,QAEA,UAAA;AAAA,UAAAU,gBAAAA,OAACG,GAAA,EACE,UAAA;AAAA,YAAAC,EAAW1C,CAAa;AAAA,YAAE;AAAA,YAASC;AAAA,YAAU;AAAA,YAC9C0C,gBAAAA,EAAAA;AAAAA,cAACC;AAAA,cAAA;AAAA,gBACC,MAAM;AAAA,gBACN,SAAQ;AAAA,gBACR,WAAU;AAAA,gBACV,SAASlC;AAAA,gBACT,iBAAe;AAAA,gBACf,sBAAoB;AAAA,cAAA;AAAA,YAAA;AAAA,UACtB,GACF;AAAA,UACA4B,gBAAAA,OAACO,GAAA,EACE,UAAA;AAAA,YAAAvB,EAAa,IAAI,CAACG,MACjBkB,gBAAAA,EAAAA;AAAAA,cAACG;AAAA,cAAA;AAAA,gBAEC,MAAMrB,EAAM;AAAA,gBACZ,OAAOD,EAAgBC,CAAK;AAAA,gBAC5B,YAAYhB,EAAkB,SAASgB,EAAM,QAAQ;AAAA,gBACrD,eAAAd;AAAA,gBACA,UAAU,CAAC,MAAMgB,EAAkB,GAAGF,CAAK;AAAA,gBAC3C,eAAe,CAACM,MAAaD,EAAkBL,GAAOM,CAAQ;AAAA,gBAC9D,WAAAjB;AAAA,cAAA;AAAA,cAPKW,EAAM,eAAe;AAAA,YAAA,CAS7B;AAAA,YACAvB,EAAM,WAAW,2BAAM6C,GAAA,EAAiB,UAAA,eAAA,CAAY;AAAA,UAAA,GACvD;AAAA,UACAJ,gBAAAA,EAAAA;AAAAA,YAACK;AAAA,YAAA;AAAA,cACC,kBAAAzC;AAAA,cACA,aAAAJ;AAAA,cACA,SAAAO;AAAA,cACA,OAAO,CAACmB,MAAOd,EAAa,IAAI,CAAC,EAAE,gBAAgBc,GAAI,QAAQO,EAAA,EAAY,CAAG,CAAC;AAAA,cAC/E,oBAAoBlB;AAAA,YAAA;AAAA,UAAA;AAAA,QACtB;AAAA,MAAA;AAAA,IAAA;AAAA,IAEDD,MAAe,YACd0B,gBAAAA,EAAAA;AAAAA,MAACM;AAAA,MAAA;AAAA,QACC,SAAS,MAAM/B,EAAc,IAAI;AAAA,QACjC,aAAAf;AAAA,QACA,YAAYI;AAAA,QACZ,kBAAkBC,IAAW,EAAE,QAAQ,EAAE,CAACA,CAAQ,GAAG,GAAA,EAAK,IAAM;AAAA,QAChE,UAAU,CAAC0C,MACTnC,EAAa,IAAImC,EAAE,IAAI,CAACrB,OAAQ,EAAE,gBAAgBA,GAAI,QAAQO,EAAA,EAAY,EAAI,CAAC;AAAA,QAEjF,eAAa;AAAA,MAAA;AAAA,IAAA;AAAA,EACf,GAEJ;AAEJ;"}

package/dist/shared/src/components/LinksManager/LinksManager.styled.cjs.js

@@ -8,7 +8,7 @@
   overflow: hidden;
   flex-grow: 1;
   min-height: 0; /* Allow flex child to shrink below content size */
-`,a=e.h4`
+`,i=e.h4`
   margin: 0;
   padding: 0;
   padding-bottom: var(--padding-s);
@@ -23,14 +23,14 @@
       background-color: var(--md-sys-color-surface-container-highest);
     }
   }
-`,i=e.h5`
+`,n=e.h5`
   margin: 0;
   padding: 0;
   padding-bottom: var(--padding-s);
   flex-shrink: 0;
 
   color: var(--md-sys-color-outline);
-`,n=e.ul`
+`,a=e.ul`
   /* reset any defaults */
   list-style: none;
   padding: 0;
@@ -123,7 +123,47 @@
       background-color: var(--md-sys-color-surface-container-highest-hover);
     }
   }
-`,s=e.div`
+`,s=e.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  border-radius: var(--border-radius-m);
+  padding: 0 4px;
+  font-size: 0.8em;
+  font-weight: 600;
+  color: inherit;
+  min-width: 32px;
+  height: 22px;
+  cursor: pointer;
+  user-select: none;
+  flex-shrink: 0;
+  box-sizing: border-box;
+
+  &:hover {
+    background-color: var(--md-sys-color-surface-container-low-hover);
+  }
+`,l=e(r.InputText).attrs({type:"number"})`
+  height: 22px !important;
+  min-height: 22px !important;
+  max-height: 22px !important;
+  width: 32px;
+  flex: 0;
+  font-size: 0.8em;
+  font-weight: 600;
+  text-align: center;
+  flex-shrink: 0;
+  border-radius: var(--border-radius-m);
+  padding: 0 4px;
+
+  /* Hide spinner arrows */
+  -moz-appearance: textfield;
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+`,d=e.div`
   display: flex;
   flex-direction: column;
   /* hack for search border cutoff */
@@ -136,12 +176,12 @@
 
   /* Set a reasonable max-height that allows for search functionality */
   max-height: 250px;
-`,l=e.div`
+`,c=e.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--base-gap-small);
-`,d=e.div`
+`,p=e.div`
   position: relative;
   width: 100%;
   display: flex;
@@ -153,21 +193,21 @@
     position: absolute;
     left: 4px;
   }
-`,c=e(r.Button)`
+`,h=e(r.Button)`
   min-width: 110px;
   flex: 1;
   width: 100%;
-`,p=e(r.InputText)`
+`,g=e(r.InputText)`
   flex: 1;
   border: none;
   background-color: var(--md-sys-color-surface-container);
   padding-left: 28px;
   width: 100%;
   min-width: 224px;
-`,h=e.div`
+`,m=e.div`
   color: var(--md-sys-color-error);
   margin-top: var(--base-gap-small);
-`,g=e.ul`
+`,u=e.ul`
   list-style: none;
   padding: 0;
   margin: 0;
@@ -178,7 +218,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--base-gap-small);
-`,m=e.li`
+`,v=e.li`
   padding: var(--padding-s);
   display: flex;
   align-items: center;
@@ -256,5 +296,5 @@
     margin-left: 8px;
     color: var(--md-sys-color-outline);
   }
-`;exports.AddLinksContainer=s;exports.Container=o;exports.Error=h;exports.Header=a;exports.LinkItem=t;exports.LinksList=n;exports.PickerButton=c;exports.Search=d;exports.SearchButtons=l;exports.SearchInput=p;exports.SearchItem=m;exports.SearchItems=g;exports.SubHeader=i;
+`;exports.AddLinksContainer=d;exports.Container=o;exports.CountBadge=s;exports.CountInput=l;exports.Error=m;exports.Header=i;exports.LinkItem=t;exports.LinksList=a;exports.PickerButton=h;exports.Search=p;exports.SearchButtons=c;exports.SearchInput=g;exports.SearchItem=v;exports.SearchItems=u;exports.SubHeader=n;
 //# sourceMappingURL=LinksManager.styled.cjs.js.map

package/dist/shared/src/components/LinksManager/LinksManager.styled.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinksManager.styled.cjs.js","sources":["../../../../../src/components/LinksManager/LinksManager.styled.ts"],"sourcesContent":["import { Button, InputText } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nexport const Container = styled.div`\n  padding: var(--padding-m);\n  background-color: var(--md-sys-color-surface-container-high);\n  border-radius: var(--border-radius-l);\n  display: flex;\n  flex-direction: column;\n  height: 100%; /* Use height instead of max-height to enforce constraints */\n  overflow: hidden;\n  flex-grow: 1;\n  min-height: 0; /* Allow flex child to shrink below content size */\n`\n\nexport const Header = styled.h4`\n  margin: 0;\n  padding: 0;\n  padding-bottom: var(--padding-s);\n  flex-shrink: 0;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  .remove {\n    padding: 2px;\n    background: none;\n    &:hover {\n      background-color: var(--md-sys-color-surface-container-highest);\n    }\n  }\n`\n\nexport const SubHeader = styled.h5`\n  margin: 0;\n  padding: 0;\n  padding-bottom: var(--padding-s);\n  flex-shrink: 0;\n\n  color: var(--md-sys-color-outline);\n`\n\nexport const LinksList = styled.ul`\n  /* reset any defaults */\n  list-style: none;\n  padding: 0;\n  margin: 0;\n\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-small);\n  overflow-y: auto;\n  flex: 1;\n  min-height: 0;\n`\n\nexport const LinkItem = styled.li`\n  /* reset any defaults */\n  list-style: none;\n  padding: 0;\n  margin: 0;\n\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n\n  /* card styling */\n  background-color: var(--md-sys-color-surface-container-high);\n  border-radius: var(--border-radius-m);\n  padding: 4px 4px;\n\n  &.clickable {\n    cursor: pointer;\n    &:hover {\n      background-color: var(--md-sys-color-surface-container-high-hover);\n    }\n  }\n\n  &.restricted,\n  &.unknown {\n    opacity: 0.5;\n    font-style: italic;\n  }\n\n  &.selected {\n    background-color: var(--md-sys-color-primary-container);\n    &,\n    .icon {\n      color: var(--md-sys-color-on-primary-container);\n    }\n\n    &:hover {\n      background-color: var(--md-sys-color-primary-container-hover);\n    }\n\n    .remove {\n      /* show remove icon when selected */\n      visibility: visible;\n      /* use selected hover */\n      &:hover {\n        background-color: var(--md-sys-color-on-primary);\n        color: var(--md-sys-color-primary);\n      }\n    }\n  }\n\n  .title {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--base-gap-small);\n    flex: 1;\n  }\n\n  .path {\n    color: var(--md-sys-color-outline);\n  }\n\n  .label {\n    font-weight: bold;\n  }\n\n  /* show remove icon when hovering item */\n  &:hover {\n    .remove {\n      visibility: visible;\n    }\n  }\n\n  .remove {\n    padding: 2px;\n    visibility: hidden;\n\n    &:hover {\n      background-color: var(--md-sys-color-surface-container-highest-hover);\n    }\n  }\n`\n\nexport const AddLinksContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  /* hack for search border cutoff */\n  padding: 2px;\n  margin: -2px;\n  padding-top: var(--padding-m);\n  flex-shrink: 0; /* Don't shrink this section */\n  min-height: 0; /* Allow internal scrolling */\n  overflow: hidden; /* Prevent this section from expanding beyond bounds */\n\n  /* Set a reasonable max-height that allows for search functionality */\n  max-height: 250px;\n`\n\n// wraps the picker and search input\nexport const SearchButtons = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--base-gap-small);\n`\n\nexport const Search = styled.div`\n  position: relative;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n  padding-top: var(--padding-s);\n\n  .input-search {\n    position: absolute;\n    left: 4px;\n  }\n`\n\nexport const PickerButton = styled(Button)`\n  min-width: 110px;\n  flex: 1;\n  width: 100%;\n`\n\nexport const SearchInput = styled(InputText)`\n  flex: 1;\n  border: none;\n  background-color: var(--md-sys-color-surface-container);\n  padding-left: 28px;\n  width: 100%;\n  min-width: 224px;\n`\n\nexport const Error = styled.div`\n  color: var(--md-sys-color-error);\n  margin-top: var(--base-gap-small);\n`\n\nexport const SearchItems = styled.ul`\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  overflow-y: auto;\n  padding: var(--padding-m) 0;\n  flex: 1; /* Take available space instead of height: 100% */\n  min-height: 0; /* Allow shrinking */\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-small);\n`\n\nexport const SearchItem = styled.li`\n  padding: var(--padding-s);\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n  border-radius: var(--border-radius-m);\n  cursor: pointer;\n  overflow: hidden;\n  min-height: min-content;\n\n  &:hover,\n  &:focus,\n  &.selected {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n\n  &.loading {\n    cursor: default;\n    opacity: 0.6;\n\n    .icon,\n    .label,\n    .type {\n      background-color: var(--md-sys-color-outline);\n      color: transparent;\n      border-radius: var(--border-radius-s);\n      animation: shimmer 1.5s infinite;\n    }\n\n    .icon {\n      width: 16px;\n      height: 16px;\n    }\n\n    .label {\n      height: 16px;\n      flex: 1;\n    }\n\n    .type {\n      width: 60px;\n      height: 14px;\n    }\n  }\n\n  @keyframes shimmer {\n    0% {\n      opacity: 0.6;\n    }\n    50% {\n      opacity: 0.3;\n    }\n    100% {\n      opacity: 0.6;\n    }\n  }\n\n  .icon {\n    flex-shrink: 0;\n  }\n\n  .label {\n    flex: 1;\n    display: flex;\n    column-gap: var(--base-gap-small);\n    flex-wrap: wrap;\n\n    & > * {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n\n  .type {\n    margin-left: 8px;\n    color: var(--md-sys-color-outline);\n  }\n`\n"],"names":["Container","styled","Header","SubHeader","LinksList","LinkItem","AddLinksContainer","SearchButtons","Search","PickerButton","Button","SearchInput","InputText","Error","SearchItems","SearchItem"],"mappings":"+JAGaA,EAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYnBC,EAASD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiBhBE,EAAYF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASnBG,EAAYH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAcnBI,EAAWJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAmFlBK,EAAoBL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgB3BM,EAAgBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAOvBO,EAASP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAchBQ,EAAeR,EAAOS,QAAM;AAAA;AAAA;AAAA;AAAA,EAM5BC,EAAcV,EAAOW,WAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS9BC,EAAQZ,EAAO;AAAA;AAAA;AAAA,EAKfa,EAAcb,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAarBc,EAAad,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}
+{"version":3,"file":"LinksManager.styled.cjs.js","sources":["../../../../../src/components/LinksManager/LinksManager.styled.ts"],"sourcesContent":["import { Button, InputText } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nexport const Container = styled.div`\n  padding: var(--padding-m);\n  background-color: var(--md-sys-color-surface-container-high);\n  border-radius: var(--border-radius-l);\n  display: flex;\n  flex-direction: column;\n  height: 100%; /* Use height instead of max-height to enforce constraints */\n  overflow: hidden;\n  flex-grow: 1;\n  min-height: 0; /* Allow flex child to shrink below content size */\n`\n\nexport const Header = styled.h4`\n  margin: 0;\n  padding: 0;\n  padding-bottom: var(--padding-s);\n  flex-shrink: 0;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  .remove {\n    padding: 2px;\n    background: none;\n    &:hover {\n      background-color: var(--md-sys-color-surface-container-highest);\n    }\n  }\n`\n\nexport const SubHeader = styled.h5`\n  margin: 0;\n  padding: 0;\n  padding-bottom: var(--padding-s);\n  flex-shrink: 0;\n\n  color: var(--md-sys-color-outline);\n`\n\nexport const LinksList = styled.ul`\n  /* reset any defaults */\n  list-style: none;\n  padding: 0;\n  margin: 0;\n\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-small);\n  overflow-y: auto;\n  flex: 1;\n  min-height: 0;\n`\n\nexport const LinkItem = styled.li`\n  /* reset any defaults */\n  list-style: none;\n  padding: 0;\n  margin: 0;\n\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n\n  /* card styling */\n  background-color: var(--md-sys-color-surface-container-high);\n  border-radius: var(--border-radius-m);\n  padding: 4px 4px;\n\n  &.clickable {\n    cursor: pointer;\n    &:hover {\n      background-color: var(--md-sys-color-surface-container-high-hover);\n    }\n  }\n\n  &.restricted,\n  &.unknown {\n    opacity: 0.5;\n    font-style: italic;\n  }\n\n  &.selected {\n    background-color: var(--md-sys-color-primary-container);\n    &,\n    .icon {\n      color: var(--md-sys-color-on-primary-container);\n    }\n\n    &:hover {\n      background-color: var(--md-sys-color-primary-container-hover);\n    }\n\n    .remove {\n      /* show remove icon when selected */\n      visibility: visible;\n      /* use selected hover */\n      &:hover {\n        background-color: var(--md-sys-color-on-primary);\n        color: var(--md-sys-color-primary);\n      }\n    }\n  }\n\n  .title {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--base-gap-small);\n    flex: 1;\n  }\n\n  .path {\n    color: var(--md-sys-color-outline);\n  }\n\n  .label {\n    font-weight: bold;\n  }\n\n  /* show remove icon when hovering item */\n  &:hover {\n    .remove {\n      visibility: visible;\n    }\n  }\n\n  .remove {\n    padding: 2px;\n    visibility: hidden;\n\n    &:hover {\n      background-color: var(--md-sys-color-surface-container-highest-hover);\n    }\n  }\n`\n\nexport const CountBadge = styled.span`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid transparent;\n  border-radius: var(--border-radius-m);\n  padding: 0 4px;\n  font-size: 0.8em;\n  font-weight: 600;\n  color: inherit;\n  min-width: 32px;\n  height: 22px;\n  cursor: pointer;\n  user-select: none;\n  flex-shrink: 0;\n  box-sizing: border-box;\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-low-hover);\n  }\n`\n\nexport const CountInput = styled(InputText).attrs({ type: 'number' })`\n  height: 22px !important;\n  min-height: 22px !important;\n  max-height: 22px !important;\n  width: 32px;\n  flex: 0;\n  font-size: 0.8em;\n  font-weight: 600;\n  text-align: center;\n  flex-shrink: 0;\n  border-radius: var(--border-radius-m);\n  padding: 0 4px;\n\n  /* Hide spinner arrows */\n  -moz-appearance: textfield;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n`\n\nexport const AddLinksContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  /* hack for search border cutoff */\n  padding: 2px;\n  margin: -2px;\n  padding-top: var(--padding-m);\n  flex-shrink: 0; /* Don't shrink this section */\n  min-height: 0; /* Allow internal scrolling */\n  overflow: hidden; /* Prevent this section from expanding beyond bounds */\n\n  /* Set a reasonable max-height that allows for search functionality */\n  max-height: 250px;\n`\n\n// wraps the picker and search input\nexport const SearchButtons = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--base-gap-small);\n`\n\nexport const Search = styled.div`\n  position: relative;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n  padding-top: var(--padding-s);\n\n  .input-search {\n    position: absolute;\n    left: 4px;\n  }\n`\n\nexport const PickerButton = styled(Button)`\n  min-width: 110px;\n  flex: 1;\n  width: 100%;\n`\n\nexport const SearchInput = styled(InputText)`\n  flex: 1;\n  border: none;\n  background-color: var(--md-sys-color-surface-container);\n  padding-left: 28px;\n  width: 100%;\n  min-width: 224px;\n`\n\nexport const Error = styled.div`\n  color: var(--md-sys-color-error);\n  margin-top: var(--base-gap-small);\n`\n\nexport const SearchItems = styled.ul`\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  overflow-y: auto;\n  padding: var(--padding-m) 0;\n  flex: 1; /* Take available space instead of height: 100% */\n  min-height: 0; /* Allow shrinking */\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-small);\n`\n\nexport const SearchItem = styled.li`\n  padding: var(--padding-s);\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n  border-radius: var(--border-radius-m);\n  cursor: pointer;\n  overflow: hidden;\n  min-height: min-content;\n\n  &:hover,\n  &:focus,\n  &.selected {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n\n  &.loading {\n    cursor: default;\n    opacity: 0.6;\n\n    .icon,\n    .label,\n    .type {\n      background-color: var(--md-sys-color-outline);\n      color: transparent;\n      border-radius: var(--border-radius-s);\n      animation: shimmer 1.5s infinite;\n    }\n\n    .icon {\n      width: 16px;\n      height: 16px;\n    }\n\n    .label {\n      height: 16px;\n      flex: 1;\n    }\n\n    .type {\n      width: 60px;\n      height: 14px;\n    }\n  }\n\n  @keyframes shimmer {\n    0% {\n      opacity: 0.6;\n    }\n    50% {\n      opacity: 0.3;\n    }\n    100% {\n      opacity: 0.6;\n    }\n  }\n\n  .icon {\n    flex-shrink: 0;\n  }\n\n  .label {\n    flex: 1;\n    display: flex;\n    column-gap: var(--base-gap-small);\n    flex-wrap: wrap;\n\n    & > * {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n\n  .type {\n    margin-left: 8px;\n    color: var(--md-sys-color-outline);\n  }\n`\n"],"names":["Container","styled","Header","SubHeader","LinksList","LinkItem","CountBadge","CountInput","InputText","AddLinksContainer","SearchButtons","Search","PickerButton","Button","SearchInput","Error","SearchItems","SearchItem"],"mappings":"+JAGaA,EAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYnBC,EAASD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiBhBE,EAAYF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASnBG,EAAYH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAcnBI,EAAWJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAmFlBK,EAAaL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsBpBM,EAAaN,EAAOO,WAAS,EAAE,MAAM,CAAE,KAAM,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAsBvDC,EAAoBR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAgB3BS,EAAgBT,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAOvBU,EAASV,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAchBW,EAAeX,EAAOY,QAAM;AAAA;AAAA;AAAA;AAAA,EAM5BC,EAAcb,EAAOO,WAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS9BO,EAAQd,EAAO;AAAA;AAAA;AAAA,EAKfe,EAAcf,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAarBgB,EAAahB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}

package/dist/shared/src/components/LinksManager/LinksManager.styled.es.js

@@ -1,4 +1,4 @@
-import { Button as o, InputText as r } from "@ynput/ayon-react-components";
+import { InputText as r, Button as o } from "@ynput/ayon-react-components";
 import e from "styled-components";
 const n = e.div`
   padding: var(--padding-m);
@@ -10,7 +10,7 @@ const n = e.div`
   overflow: hidden;
   flex-grow: 1;
   min-height: 0; /* Allow flex child to shrink below content size */
-`, l = e.h4`
+`, t = e.h4`
   margin: 0;
   padding: 0;
   padding-bottom: var(--padding-s);
@@ -32,7 +32,7 @@ const n = e.div`
   flex-shrink: 0;
 
   color: var(--md-sys-color-outline);
-`, t = e.ul`
+`, l = e.ul`
   /* reset any defaults */
   list-style: none;
   padding: 0;
@@ -125,7 +125,47 @@ const n = e.div`
       background-color: var(--md-sys-color-surface-container-highest-hover);
     }
   }
-`, c = e.div`
+`, c = e.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  border-radius: var(--border-radius-m);
+  padding: 0 4px;
+  font-size: 0.8em;
+  font-weight: 600;
+  color: inherit;
+  min-width: 32px;
+  height: 22px;
+  cursor: pointer;
+  user-select: none;
+  flex-shrink: 0;
+  box-sizing: border-box;
+
+  &:hover {
+    background-color: var(--md-sys-color-surface-container-low-hover);
+  }
+`, p = e(r).attrs({ type: "number" })`
+  height: 22px !important;
+  min-height: 22px !important;
+  max-height: 22px !important;
+  width: 32px;
+  flex: 0;
+  font-size: 0.8em;
+  font-weight: 600;
+  text-align: center;
+  flex-shrink: 0;
+  border-radius: var(--border-radius-m);
+  padding: 0 4px;
+
+  /* Hide spinner arrows */
+  -moz-appearance: textfield;
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+`, h = e.div`
   display: flex;
   flex-direction: column;
   /* hack for search border cutoff */
@@ -138,12 +178,12 @@ const n = e.div`
 
   /* Set a reasonable max-height that allows for search functionality */
   max-height: 250px;
-`, p = e.div`
+`, g = e.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--base-gap-small);
-`, h = e.div`
+`, m = e.div`
   position: relative;
   width: 100%;
   display: flex;
@@ -155,21 +195,21 @@ const n = e.div`
     position: absolute;
     left: 4px;
   }
-`, g = e(o)`
+`, v = e(o)`
   min-width: 110px;
   flex: 1;
   width: 100%;
-`, m = e(r)`
+`, f = e(r)`
   flex: 1;
   border: none;
   background-color: var(--md-sys-color-surface-container);
   padding-left: 28px;
   width: 100%;
   min-width: 224px;
-`, v = e.div`
+`, u = e.div`
   color: var(--md-sys-color-error);
   margin-top: var(--base-gap-small);
-`, f = e.ul`
+`, x = e.ul`
   list-style: none;
   padding: 0;
   margin: 0;
@@ -180,7 +220,7 @@ const n = e.div`
   display: flex;
   flex-direction: column;
   gap: var(--base-gap-small);
-`, u = e.li`
+`, b = e.li`
   padding: var(--padding-s);
   display: flex;
   align-items: center;
@@ -260,18 +300,20 @@ const n = e.div`
   }
 `;
 export {
-  c as AddLinksContainer,
+  h as AddLinksContainer,
   n as Container,
-  v as Error,
-  l as Header,
+  c as CountBadge,
+  p as CountInput,
+  u as Error,
+  t as Header,
   d as LinkItem,
-  t as LinksList,
-  g as PickerButton,
-  h as Search,
-  p as SearchButtons,
-  m as SearchInput,
-  u as SearchItem,
-  f as SearchItems,
+  l as LinksList,
+  v as PickerButton,
+  m as Search,
+  g as SearchButtons,
+  f as SearchInput,
+  b as SearchItem,
+  x as SearchItems,
   s as SubHeader
 };
 //# sourceMappingURL=LinksManager.styled.es.js.map

package/dist/shared/src/components/LinksManager/LinksManager.styled.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinksManager.styled.es.js","sources":["../../../../../src/components/LinksManager/LinksManager.styled.ts"],"sourcesContent":["import { Button, InputText } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nexport const Container = styled.div`\n  padding: var(--padding-m);\n  background-color: var(--md-sys-color-surface-container-high);\n  border-radius: var(--border-radius-l);\n  display: flex;\n  flex-direction: column;\n  height: 100%; /* Use height instead of max-height to enforce constraints */\n  overflow: hidden;\n  flex-grow: 1;\n  min-height: 0; /* Allow flex child to shrink below content size */\n`\n\nexport const Header = styled.h4`\n  margin: 0;\n  padding: 0;\n  padding-bottom: var(--padding-s);\n  flex-shrink: 0;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  .remove {\n    padding: 2px;\n    background: none;\n    &:hover {\n      background-color: var(--md-sys-color-surface-container-highest);\n    }\n  }\n`\n\nexport const SubHeader = styled.h5`\n  margin: 0;\n  padding: 0;\n  padding-bottom: var(--padding-s);\n  flex-shrink: 0;\n\n  color: var(--md-sys-color-outline);\n`\n\nexport const LinksList = styled.ul`\n  /* reset any defaults */\n  list-style: none;\n  padding: 0;\n  margin: 0;\n\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-small);\n  overflow-y: auto;\n  flex: 1;\n  min-height: 0;\n`\n\nexport const LinkItem = styled.li`\n  /* reset any defaults */\n  list-style: none;\n  padding: 0;\n  margin: 0;\n\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n\n  /* card styling */\n  background-color: var(--md-sys-color-surface-container-high);\n  border-radius: var(--border-radius-m);\n  padding: 4px 4px;\n\n  &.clickable {\n    cursor: pointer;\n    &:hover {\n      background-color: var(--md-sys-color-surface-container-high-hover);\n    }\n  }\n\n  &.restricted,\n  &.unknown {\n    opacity: 0.5;\n    font-style: italic;\n  }\n\n  &.selected {\n    background-color: var(--md-sys-color-primary-container);\n    &,\n    .icon {\n      color: var(--md-sys-color-on-primary-container);\n    }\n\n    &:hover {\n      background-color: var(--md-sys-color-primary-container-hover);\n    }\n\n    .remove {\n      /* show remove icon when selected */\n      visibility: visible;\n      /* use selected hover */\n      &:hover {\n        background-color: var(--md-sys-color-on-primary);\n        color: var(--md-sys-color-primary);\n      }\n    }\n  }\n\n  .title {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--base-gap-small);\n    flex: 1;\n  }\n\n  .path {\n    color: var(--md-sys-color-outline);\n  }\n\n  .label {\n    font-weight: bold;\n  }\n\n  /* show remove icon when hovering item */\n  &:hover {\n    .remove {\n      visibility: visible;\n    }\n  }\n\n  .remove {\n    padding: 2px;\n    visibility: hidden;\n\n    &:hover {\n      background-color: var(--md-sys-color-surface-container-highest-hover);\n    }\n  }\n`\n\nexport const AddLinksContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  /* hack for search border cutoff */\n  padding: 2px;\n  margin: -2px;\n  padding-top: var(--padding-m);\n  flex-shrink: 0; /* Don't shrink this section */\n  min-height: 0; /* Allow internal scrolling */\n  overflow: hidden; /* Prevent this section from expanding beyond bounds */\n\n  /* Set a reasonable max-height that allows for search functionality */\n  max-height: 250px;\n`\n\n// wraps the picker and search input\nexport const SearchButtons = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--base-gap-small);\n`\n\nexport const Search = styled.div`\n  position: relative;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n  padding-top: var(--padding-s);\n\n  .input-search {\n    position: absolute;\n    left: 4px;\n  }\n`\n\nexport const PickerButton = styled(Button)`\n  min-width: 110px;\n  flex: 1;\n  width: 100%;\n`\n\nexport const SearchInput = styled(InputText)`\n  flex: 1;\n  border: none;\n  background-color: var(--md-sys-color-surface-container);\n  padding-left: 28px;\n  width: 100%;\n  min-width: 224px;\n`\n\nexport const Error = styled.div`\n  color: var(--md-sys-color-error);\n  margin-top: var(--base-gap-small);\n`\n\nexport const SearchItems = styled.ul`\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  overflow-y: auto;\n  padding: var(--padding-m) 0;\n  flex: 1; /* Take available space instead of height: 100% */\n  min-height: 0; /* Allow shrinking */\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-small);\n`\n\nexport const SearchItem = styled.li`\n  padding: var(--padding-s);\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n  border-radius: var(--border-radius-m);\n  cursor: pointer;\n  overflow: hidden;\n  min-height: min-content;\n\n  &:hover,\n  &:focus,\n  &.selected {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n\n  &.loading {\n    cursor: default;\n    opacity: 0.6;\n\n    .icon,\n    .label,\n    .type {\n      background-color: var(--md-sys-color-outline);\n      color: transparent;\n      border-radius: var(--border-radius-s);\n      animation: shimmer 1.5s infinite;\n    }\n\n    .icon {\n      width: 16px;\n      height: 16px;\n    }\n\n    .label {\n      height: 16px;\n      flex: 1;\n    }\n\n    .type {\n      width: 60px;\n      height: 14px;\n    }\n  }\n\n  @keyframes shimmer {\n    0% {\n      opacity: 0.6;\n    }\n    50% {\n      opacity: 0.3;\n    }\n    100% {\n      opacity: 0.6;\n    }\n  }\n\n  .icon {\n    flex-shrink: 0;\n  }\n\n  .label {\n    flex: 1;\n    display: flex;\n    column-gap: var(--base-gap-small);\n    flex-wrap: wrap;\n\n    & > * {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n\n  .type {\n    margin-left: 8px;\n    color: var(--md-sys-color-outline);\n  }\n`\n"],"names":["Container","styled","Header","SubHeader","LinksList","LinkItem","AddLinksContainer","SearchButtons","Search","PickerButton","Button","SearchInput","InputText","Error","SearchItems","SearchItem"],"mappings":";;AAGO,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAYnBC,IAASD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAiBhBE,IAAYF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASnBG,IAAYH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAcnBI,IAAWJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAmFlBK,IAAoBL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAgB3BM,IAAgBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAOvBO,IAASP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAchBQ,IAAeR,EAAOS,CAAM;AAAA;AAAA;AAAA;AAAA,GAM5BC,IAAcV,EAAOW,CAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAS9BC,IAAQZ,EAAO;AAAA;AAAA;AAAA,GAKfa,IAAcb,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAarBc,IAAad,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"LinksManager.styled.es.js","sources":["../../../../../src/components/LinksManager/LinksManager.styled.ts"],"sourcesContent":["import { Button, InputText } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nexport const Container = styled.div`\n  padding: var(--padding-m);\n  background-color: var(--md-sys-color-surface-container-high);\n  border-radius: var(--border-radius-l);\n  display: flex;\n  flex-direction: column;\n  height: 100%; /* Use height instead of max-height to enforce constraints */\n  overflow: hidden;\n  flex-grow: 1;\n  min-height: 0; /* Allow flex child to shrink below content size */\n`\n\nexport const Header = styled.h4`\n  margin: 0;\n  padding: 0;\n  padding-bottom: var(--padding-s);\n  flex-shrink: 0;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  .remove {\n    padding: 2px;\n    background: none;\n    &:hover {\n      background-color: var(--md-sys-color-surface-container-highest);\n    }\n  }\n`\n\nexport const SubHeader = styled.h5`\n  margin: 0;\n  padding: 0;\n  padding-bottom: var(--padding-s);\n  flex-shrink: 0;\n\n  color: var(--md-sys-color-outline);\n`\n\nexport const LinksList = styled.ul`\n  /* reset any defaults */\n  list-style: none;\n  padding: 0;\n  margin: 0;\n\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-small);\n  overflow-y: auto;\n  flex: 1;\n  min-height: 0;\n`\n\nexport const LinkItem = styled.li`\n  /* reset any defaults */\n  list-style: none;\n  padding: 0;\n  margin: 0;\n\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n\n  /* card styling */\n  background-color: var(--md-sys-color-surface-container-high);\n  border-radius: var(--border-radius-m);\n  padding: 4px 4px;\n\n  &.clickable {\n    cursor: pointer;\n    &:hover {\n      background-color: var(--md-sys-color-surface-container-high-hover);\n    }\n  }\n\n  &.restricted,\n  &.unknown {\n    opacity: 0.5;\n    font-style: italic;\n  }\n\n  &.selected {\n    background-color: var(--md-sys-color-primary-container);\n    &,\n    .icon {\n      color: var(--md-sys-color-on-primary-container);\n    }\n\n    &:hover {\n      background-color: var(--md-sys-color-primary-container-hover);\n    }\n\n    .remove {\n      /* show remove icon when selected */\n      visibility: visible;\n      /* use selected hover */\n      &:hover {\n        background-color: var(--md-sys-color-on-primary);\n        color: var(--md-sys-color-primary);\n      }\n    }\n  }\n\n  .title {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--base-gap-small);\n    flex: 1;\n  }\n\n  .path {\n    color: var(--md-sys-color-outline);\n  }\n\n  .label {\n    font-weight: bold;\n  }\n\n  /* show remove icon when hovering item */\n  &:hover {\n    .remove {\n      visibility: visible;\n    }\n  }\n\n  .remove {\n    padding: 2px;\n    visibility: hidden;\n\n    &:hover {\n      background-color: var(--md-sys-color-surface-container-highest-hover);\n    }\n  }\n`\n\nexport const CountBadge = styled.span`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid transparent;\n  border-radius: var(--border-radius-m);\n  padding: 0 4px;\n  font-size: 0.8em;\n  font-weight: 600;\n  color: inherit;\n  min-width: 32px;\n  height: 22px;\n  cursor: pointer;\n  user-select: none;\n  flex-shrink: 0;\n  box-sizing: border-box;\n\n  &:hover {\n    background-color: var(--md-sys-color-surface-container-low-hover);\n  }\n`\n\nexport const CountInput = styled(InputText).attrs({ type: 'number' })`\n  height: 22px !important;\n  min-height: 22px !important;\n  max-height: 22px !important;\n  width: 32px;\n  flex: 0;\n  font-size: 0.8em;\n  font-weight: 600;\n  text-align: center;\n  flex-shrink: 0;\n  border-radius: var(--border-radius-m);\n  padding: 0 4px;\n\n  /* Hide spinner arrows */\n  -moz-appearance: textfield;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n`\n\nexport const AddLinksContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  /* hack for search border cutoff */\n  padding: 2px;\n  margin: -2px;\n  padding-top: var(--padding-m);\n  flex-shrink: 0; /* Don't shrink this section */\n  min-height: 0; /* Allow internal scrolling */\n  overflow: hidden; /* Prevent this section from expanding beyond bounds */\n\n  /* Set a reasonable max-height that allows for search functionality */\n  max-height: 250px;\n`\n\n// wraps the picker and search input\nexport const SearchButtons = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--base-gap-small);\n`\n\nexport const Search = styled.div`\n  position: relative;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n  padding-top: var(--padding-s);\n\n  .input-search {\n    position: absolute;\n    left: 4px;\n  }\n`\n\nexport const PickerButton = styled(Button)`\n  min-width: 110px;\n  flex: 1;\n  width: 100%;\n`\n\nexport const SearchInput = styled(InputText)`\n  flex: 1;\n  border: none;\n  background-color: var(--md-sys-color-surface-container);\n  padding-left: 28px;\n  width: 100%;\n  min-width: 224px;\n`\n\nexport const Error = styled.div`\n  color: var(--md-sys-color-error);\n  margin-top: var(--base-gap-small);\n`\n\nexport const SearchItems = styled.ul`\n  list-style: none;\n  padding: 0;\n  margin: 0;\n  overflow-y: auto;\n  padding: var(--padding-m) 0;\n  flex: 1; /* Take available space instead of height: 100% */\n  min-height: 0; /* Allow shrinking */\n  display: flex;\n  flex-direction: column;\n  gap: var(--base-gap-small);\n`\n\nexport const SearchItem = styled.li`\n  padding: var(--padding-s);\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n  border-radius: var(--border-radius-m);\n  cursor: pointer;\n  overflow: hidden;\n  min-height: min-content;\n\n  &:hover,\n  &:focus,\n  &.selected {\n    background-color: var(--md-sys-color-surface-container-high-hover);\n  }\n\n  &.loading {\n    cursor: default;\n    opacity: 0.6;\n\n    .icon,\n    .label,\n    .type {\n      background-color: var(--md-sys-color-outline);\n      color: transparent;\n      border-radius: var(--border-radius-s);\n      animation: shimmer 1.5s infinite;\n    }\n\n    .icon {\n      width: 16px;\n      height: 16px;\n    }\n\n    .label {\n      height: 16px;\n      flex: 1;\n    }\n\n    .type {\n      width: 60px;\n      height: 14px;\n    }\n  }\n\n  @keyframes shimmer {\n    0% {\n      opacity: 0.6;\n    }\n    50% {\n      opacity: 0.3;\n    }\n    100% {\n      opacity: 0.6;\n    }\n  }\n\n  .icon {\n    flex-shrink: 0;\n  }\n\n  .label {\n    flex: 1;\n    display: flex;\n    column-gap: var(--base-gap-small);\n    flex-wrap: wrap;\n\n    & > * {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n\n  .type {\n    margin-left: 8px;\n    color: var(--md-sys-color-outline);\n  }\n`\n"],"names":["Container","styled","Header","SubHeader","LinksList","LinkItem","CountBadge","CountInput","InputText","AddLinksContainer","SearchButtons","Search","PickerButton","Button","SearchInput","Error","SearchItems","SearchItem"],"mappings":";;AAGO,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAYnBC,IAASD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAiBhBE,IAAYF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASnBG,IAAYH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAcnBI,IAAWJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAmFlBK,IAAaL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAsBpBM,IAAaN,EAAOO,CAAS,EAAE,MAAM,EAAE,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAsBvDC,IAAoBR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAgB3BS,IAAgBT,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAOvBU,IAASV,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAchBW,IAAeX,EAAOY,CAAM;AAAA;AAAA;AAAA;AAAA,GAM5BC,IAAcb,EAAOO,CAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAS9BO,IAAQd,EAAO;AAAA;AAAA;AAAA,GAKfe,IAAcf,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAarBgB,IAAahB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}