@ynput/ayon-frontend-shared 0.2.30 → 0.2.32

package/dist/shared/src/components/ProjectTableSettings/RowHeightSettings.es.js

@@ -0,0 +1,332 @@
+import { j as m } from "../../../../_virtual/jsx-runtime.es.js";
+import { useState as l, useEffect as c, useCallback as s } from "react";
+import e from "styled-components";
+import "../../containers/ProjectTreeTable/ProjectTreeTable.es.js";
+import "react-toastify";
+import "lodash";
+import "uuid";
+import "../../util/pubsub.es.js";
+import "../../containers/ProjectTreeTable/context/CellEditingContext.es.js";
+import "@ynput/ayon-react-components";
+import "@tanstack/react-table";
+import "../../containers/ProjectTreeTable/widgets/CollapsedWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/DateWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/EnumWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/TextWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/BooleanWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/CellWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/EntityNameWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/GroupHeaderWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/ThumbnailWidget.es.js";
+import "clsx";
+import "../ThumbnailSimple/ThumbnailSimple.es.js";
+import "../EmptyPlaceholder/EmptyPlaceholder.es.js";
+import "../EmptyPlaceholder/EmptyPlaceholderFlex.styled.es.js";
+import "../../api/base/client.es.js";
+import "../../api/generated/graphql.es.js";
+import "../../api/generated/graphqlLinks.es.js";
+import "../../api/generated/access.es.js";
+import "../../api/generated/actions.es.js";
+import "../../api/generated/activityFeed.es.js";
+import "../../api/generated/addons.es.js";
+import "../../api/generated/anatomy.es.js";
+import "../../api/generated/attributes.es.js";
+import "../../api/generated/authentication.es.js";
+import "../../api/generated/bundles.es.js";
+import "../../api/generated/configuration.es.js";
+import "../../api/generated/desktop.es.js";
+import "../../api/generated/entityLists.es.js";
+import "../../api/generated/events.es.js";
+import "../../api/generated/files.es.js";
+import "../../api/generated/folders.es.js";
+import "../../api/generated/inbox.es.js";
+import "../../api/generated/links.es.js";
+import "../../api/generated/market.es.js";
+import "../../api/generated/onboarding.es.js";
+import "../../api/generated/operations.es.js";
+import "../../api/generated/products.es.js";
+import "../../api/generated/projectDashboard.es.js";
+import "../../api/generated/projects.es.js";
+import "../../api/generated/reviewables.es.js";
+import "../../api/generated/services.es.js";
+import "../../api/generated/system.es.js";
+import "../../api/generated/tasks.es.js";
+import "../../api/generated/teams.es.js";
+import "../../api/generated/thumbnails.es.js";
+import "../../api/generated/uRIs.es.js";
+import "../../api/generated/users.es.js";
+import "../../api/generated/versions.es.js";
+import "../../api/generated/workfiles.es.js";
+import "../../api/generated/ynputCloud.es.js";
+import "../../api/generated/grouping.es.js";
+import "../../api/generated/views.es.js";
+import "../../api/queries/actions/getActions.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/addons/getAddons.es.js";
+import "../../api/queries/addons/updateAddons.es.js";
+import "../../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";
+import "../../api/queries/entities/getEntity.es.js";
+import "../../api/queries/entities/getEntityPanel.es.js";
+import "../../api/queries/entities/updateEntity.es.js";
+import "../../api/queries/entityLists/getLists.es.js";
+import "../../api/queries/entityLists/updateLists.es.js";
+import "../../api/queries/entityLists/getListsAttributes.es.js";
+import "../../api/queries/entityLists/updateListsAttributes.es.js";
+import "../../api/queries/entityLists/listFolders.es.js";
+import "../../api/queries/folders/getFolders.es.js";
+import "../../api/queries/grouping/getGrouping.es.js";
+import "../../api/queries/links/updateLinks.es.js";
+import "../../api/queries/links/getLinks.es.js";
+import "../../api/queries/links/getEntityLinks.es.js";
+import "../../api/queries/overview/getOverview.es.js";
+import "../../api/queries/overview/updateOverview.es.js";
+import "../../api/queries/permissions/getPermissions.es.js";
+import "../../api/queries/products/createProduct.es.js";
+import "../../api/queries/project/getProject.es.js";
+import "../../api/queries/project/updateProject.es.js";
+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/userDashboard/getUserDashboard.es.js";
+import "../../api/queries/users/getUsers.es.js";
+import "../../api/queries/users/updateUsers.es.js";
+import "../../api/queries/versions/updateVersions.es.js";
+import "../../api/queries/views/getViews.es.js";
+import "../../api/queries/views/updateViews.es.js";
+import "../../api/queries/watchers/getWatchers.es.js";
+import "@dnd-kit/core";
+import "@dnd-kit/sortable";
+import "../ReviewablesList/ReviewablesList.styled.es.js";
+import "../../containers/ContextMenu/ContextMenuContext.es.js";
+/* empty css                                               */
+import "../ReviewablesList/ReviewablesUpload.styled.es.js";
+import "axios";
+import "../../context/RemoteModulesContext.es.js";
+import "../../context/DetailsPanelContext.es.js";
+import "../../context/ThumbnailUploaderContext.es.js";
+import "../../context/SettingsPanelContext.es.js";
+import "../../context/pip/PiPProvider.es.js";
+import "react-dom";
+import "../../context/pip/PiPWrapper.es.js";
+import "../../context/AddonProjectContext.es.js";
+import "../../context/AddonContext.es.js";
+import "../../context/PowerpackContext.es.js";
+import "../../context/MoveEntityContext.es.js";
+import "../../context/MenuContext.es.js";
+import "../ReviewableCard/ReviewableCard.es.js";
+import "../ReviewableProgressCard/ReviewableProgressCard.styled.es.js";
+import "../FileThumbnail/FileThumbnail.es.js";
+import "../Thumbnail/Thumbnail.styled.es.js";
+import "../Thumbnail/StackedThumbnails.es.js";
+import "../../containers/Feed/context/FeedContext.es.js";
+import "../../containers/Feed/components/Tooltips/UserTooltip/UserTooltip.styled.es.js";
+import "../../containers/Feed/components/Tooltips/EntityTooltip/EntityTooltip.styled.es.js";
+import "../../containers/Feed/components/FileUploadPreview/FileUploadPreview.styled.es.js";
+import "../../containers/Feed/components/FileUploadPreview/Mimes/TextMime.es.js";
+import "react-markdown";
+import "remark-emoji";
+import "remark-gfm";
+import "remark-directive";
+import "remark-directive-rehype";
+import "../../containers/Feed/components/CommentInput/CommentInput.es.js";
+import "../../containers/Feed/components/ReactionContainer/Reactions.styled.es.js";
+import "../../containers/Feed/components/FilesGrid/FilesGrid.styled.es.js";
+import "../../containers/Feed/components/FileUploadCard/FileUploadCard.styled.es.js";
+import "../../containers/Feed/components/CommentInput/quillToMarkdown.es.js";
+import "../../containers/Feed/components/ActivityComment/ActivityComment.styled.es.js";
+import "../../containers/Feed/components/ActivityCheckbox/ActivityCheckbox.styled.es.js";
+import "../../containers/Feed/components/ActivityReference/ActivityReference.styled.es.js";
+import "react-router-dom";
+import "../../containers/Feed/components/ActivityStatus/ActivityStatus.es.js";
+import "../../containers/Feed/components/ActivityHeader/ActivityHeader.styled.es.js";
+import "../../containers/Feed/components/ActivityDate.es.js";
+import "../../containers/Feed/components/ActivityStatusChange/ActivityStatusChange.styled.es.js";
+import "../../containers/Feed/components/ActivityAssigneeChange/ActivityAssigneeChange.styled.es.js";
+import "../../containers/Feed/components/ActivityVersions/ActivityVersions.styled.es.js";
+import "../../containers/Feed/components/ActivityGroup/ActivityGroup.styled.es.js";
+import "../../containers/Feed/Feed.styled.es.js";
+import "date-fns";
+import "../../containers/DetailsPanel/DetailsPanel.styled.es.js";
+import "../../../../_virtual/runtime.es.js";
+import "../../../../_virtual/semver.es.js";
+import "react-redux";
+import "custom-protocol-check";
+import "../../containers/DetailsPanel/FeedFilters/FeedFilters.styled.es.js";
+import "../../containers/DetailsPanel/DetailsPanelHeader/DetailsPanelHeader.styled.es.js";
+import "../PlayableIcon/PlayableIcon.es.js";
+import "../../containers/DetailsPanel/DetailsPanelFiles/DetailsPanelFiles.es.js";
+import "../../containers/DetailsPanel/DetailsPanelSlideOut/DetailsPanelSlideOut.styled.es.js";
+import "../../containers/DetailsPanel/DetailsPanelFloating/DetailsPanelFloating.styled.es.js";
+import "../../containers/Actions/Actions.styled.es.js";
+import "../../containers/Actions/ActionsDropdown/ActionsDropdown.es.js";
+import "../../containers/Actions/ActionIcon.es.js";
+import "../../containers/Views/context/ViewsContext.es.js";
+import "../../containers/Views/Views.styled.es.js";
+import "../../containers/Views/ViewsMenuContainer/ViewsMenuContainer.es.js";
+import "../../containers/Views/ViewsMenu/ViewsMenu.es.js";
+import "../EntityPanelUploader/EntityPanelUploader.styled.es.js";
+import "../SimpleFormDialog/SimpleFormDialog.es.js";
+import "../EntityPath/EntityPath.styled.es.js";
+import "../EntityPath/SegmentProvider.es.js";
+import "../DetailsPanelAttributes/DetailsPanelAttributesEditor.es.js";
+import "../DetailsPanelDetails/DetailsPanelDetails.es.js";
+import "../DetailsPanelDetails/DetailsSection.es.js";
+import "../DetailsPanelDetails/FieldLabel.es.js";
+import "../Watchers/Watchers.es.js";
+import "./ProjectTableSettings.es.js";
+import "../Powerpack/PowerpackButton.es.js";
+import "../Powerpack/PricingLink.es.js";
+import "../Powerpack/PowerpackDialog.styled.es.js";
+import "../Powerpack/CTAButton.es.js";
+import "../SettingsPanel/SettingsPanel.es.js";
+import "../SettingsPanel/SettingsPanelItemTemplate.es.js";
+import "../AttributeEditor/components/MinMaxField.es.js";
+import "../EnumEditor/EnumEditor.styled.es.js";
+import "../SearchFilter/filterDates.es.js";
+import "../Badge/Badge.es.js";
+import "../VersionUploader/components/UploadVersionDialog.es.js";
+import "../VersionUploader/context/VersionUploadContext.es.js";
+import "../Feedback/FeedbackContext.es.js";
+import "../Feedback/SupportBubble.es.js";
+import "../Chips/Chips.es.js";
+import "../LinksManager/LinksManager.styled.es.js";
+import "../../containers/EntityPickerDialog/EntityPickerDialog.es.js";
+import "../StyledLink/StyledLink.es.js";
+import "../LinksManager/CellEditingDialog.es.js";
+import "../../containers/ProjectTreeTable/context/DetailsPanelEntityContext.es.js";
+import "../../containers/ProjectTreeTable/context/SelectedRowsContext.es.js";
+import "../../containers/ProjectTreeTable/ProjectTreeTable.styled.es.js";
+import "../../containers/ProjectTreeTable/components/SelectionCell.es.js";
+import "../../containers/ProjectTreeTable/components/RowSelectionHeader.es.js";
+import "../../containers/ProjectTreeTable/context/SelectionCellsContext.es.js";
+import "../../containers/ProjectTreeTable/widgets/LoadMoreWidget.es.js";
+import "../../containers/ProjectTreeTable/context/ProjectTableQueriesContext.es.js";
+import "../../containers/ProjectTreeTable/context/ProjectTableContext.es.js";
+import "../../containers/ProjectTreeTable/context/ClipboardContext.es.js";
+import { useColumnSettingsContext as f } from "../../containers/ProjectTreeTable/context/ColumnSettingsContext.es.js";
+import "../../containers/ProjectTreeTable/context/ProjectDataContext.es.js";
+import "../../containers/ProjectTreeTable/components/GroupSettingsFallback.es.js";
+import "../../containers/ProjectTreeTable/components/HeaderActionButton.es.js";
+import "../../containers/ProjectTreeTable/components/ColumnHeaderMenu.es.js";
+const v = (o, t) => {
+  const [i, r] = l(o);
+  return c(() => {
+    const a = setTimeout(() => {
+      r(o);
+    }, t);
+    return () => {
+      clearTimeout(a);
+    };
+  }, [o, t]), i;
+}, y = e.div`
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`, k = e.label`
+  font-weight: 500;
+  color: var(--md-sys-color-on-surface);
+  font-size: 14px;
+`, R = e.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+`, S = e.input`
+  flex: 1;
+  height: 4px;
+  border-radius: 2px;
+  background: var(--md-sys-color-outline-variant);
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: var(--md-sys-color-primary);
+    cursor: grab;
+    box-shadow: var(--box-fill);
+  }
+
+  &:active::-webkit-slider-thumb {
+    cursor: grabbing;
+  }
+
+  &::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: var(--md-sys-color-primary);
+    cursor: grabbing;
+    border: 2px solid var(--md-sys-color-surface);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  }
+
+  &:hover::-webkit-slider-thumb {
+    background: var(--md-sys-color-primary-hover);
+  }
+
+  &:hover::-moz-range-thumb {
+    background: var(--md-sys-color-primary-container);
+  }
+`, H = e.span`
+  color: var(--md-sys-color-on-surface-variant);
+  min-width: 40px;
+  text-align: right;
+`, Di = () => {
+  const {
+    rowHeight: o = 34,
+    updateRowHeight: t,
+    updateRowHeightWithPersistence: i
+  } = f(), [r, a] = l(o), [p, d] = l(!1), u = v(r, 25);
+  c(() => {
+    p || a(o);
+  }, [o, p]), c(() => {
+    p && t(u);
+  }, [u, t, p]);
+  const h = s((w) => {
+    const n = parseInt(w.target.value, 10);
+    a(n), p || (t(n), i(n));
+  }, [p, t, i]), b = s(() => {
+    d(!0);
+  }, []), x = s(() => {
+    d(!1), i(r);
+  }, [r, i]), g = (r - 24) / 176 * 100;
+  return /* @__PURE__ */ m.jsxs(y, { children: [
+    /* @__PURE__ */ m.jsx(k, { htmlFor: "row-height-slider", children: "Row height" }),
+    /* @__PURE__ */ m.jsxs(R, { children: [
+      /* @__PURE__ */ m.jsx(
+        S,
+        {
+          id: "row-height-slider",
+          type: "range",
+          min: 24,
+          max: 200,
+          step: 2,
+          value: r,
+          onChange: h,
+          onMouseDown: b,
+          onMouseUp: x,
+          style: {
+            background: `linear-gradient(to right, var(--md-sys-color-primary) 0%, var(--md-sys-color-primary) ${g}%, var(--md-sys-color-outline-variant) ${g}%, var(--md-sys-color-outline-variant) 100%)`
+          }
+        }
+      ),
+      /* @__PURE__ */ m.jsx(H, { children: r })
+    ] })
+  ] });
+};
+export {
+  Di as default
+};
+//# sourceMappingURL=RowHeightSettings.es.js.map

package/dist/shared/src/components/ProjectTableSettings/RowHeightSettings.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RowHeightSettings.es.js","sources":["../../../../../src/components/ProjectTableSettings/RowHeightSettings.tsx"],"sourcesContent":["import { FC, useState, useCallback, useEffect } from 'react'\nimport styled from 'styled-components'\nimport { useColumnSettingsContext } from '@shared/containers/ProjectTreeTable'\n\n// Debounce hook for smooth slider performance\nconst useDebounce = (value: number, delay: number) => {\n  const [debouncedValue, setDebouncedValue] = useState(value)\n\n  useEffect(() => {\n    const handler = setTimeout(() => {\n      setDebouncedValue(value)\n    }, delay)\n\n    return () => {\n      clearTimeout(handler)\n    }\n  }, [value, delay])\n\n  return debouncedValue\n}\n\nconst Container = styled.div`\n  padding: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n`\n\nconst Label = styled.label`\n  font-weight: 500;\n  color: var(--md-sys-color-on-surface);\n  font-size: 14px;\n`\n\nconst SliderContainer = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 12px;\n`\n\nconst Slider = styled.input`\n  flex: 1;\n  height: 4px;\n  border-radius: 2px;\n  background: var(--md-sys-color-outline-variant);\n  outline: none;\n  -webkit-appearance: none;\n  appearance: none;\n\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 16px;\n    height: 16px;\n    border-radius: 50%;\n    background: var(--md-sys-color-primary);\n    cursor: grab;\n    box-shadow: var(--box-fill);\n  }\n\n  &:active::-webkit-slider-thumb {\n    cursor: grabbing;\n  }\n\n  &::-moz-range-thumb {\n    width: 16px;\n    height: 16px;\n    border-radius: 50%;\n    background: var(--md-sys-color-primary);\n    cursor: grabbing;\n    border: 2px solid var(--md-sys-color-surface);\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n  }\n\n  &:hover::-webkit-slider-thumb {\n    background: var(--md-sys-color-primary-hover);\n  }\n\n  &:hover::-moz-range-thumb {\n    background: var(--md-sys-color-primary-container);\n  }\n`\n\nconst ValueDisplay = styled.span`\n  color: var(--md-sys-color-on-surface-variant);\n  min-width: 40px;\n  text-align: right;\n`\n\nconst RowHeightSettings: FC = () => {\n  const {\n    rowHeight: contextRowHeight = 34,\n    updateRowHeight,\n    updateRowHeightWithPersistence,\n  } = useColumnSettingsContext()\n\n  // Local state for immediate UI updates during slider drag\n  const [localRowHeight, setLocalRowHeight] = useState(contextRowHeight)\n  const [isDragging, setIsDragging] = useState(false)\n\n  // Debounced value for smooth table updates during drag\n  const debouncedRowHeight = useDebounce(localRowHeight, 25)\n\n  // Sync with context row height when it changes externally (but not while dragging)\n  useEffect(() => {\n    if (!isDragging) {\n      setLocalRowHeight(contextRowHeight)\n    }\n  }, [contextRowHeight, isDragging])\n\n  // Update table rows during slider drag (no API persistence)\n  useEffect(() => {\n    if (isDragging) {\n      updateRowHeight(debouncedRowHeight)\n    }\n  }, [debouncedRowHeight, updateRowHeight, isDragging])\n\n  const handleSliderChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n    const newValue = parseInt(e.target.value, 10)\n    setLocalRowHeight(newValue)\n\n    // If not dragging (e.g., arrow keys), update immediately\n    if (!isDragging) {\n      updateRowHeight(newValue)\n      updateRowHeightWithPersistence(newValue)\n    }\n  }, [isDragging, updateRowHeight, updateRowHeightWithPersistence])\n\n  const handleSliderStart = useCallback(() => {\n    setIsDragging(true)\n  }, [])\n\n  const handleSliderRelease = useCallback(() => {\n    setIsDragging(false)\n    // Persist to API only when user finishes adjusting\n    updateRowHeightWithPersistence(localRowHeight)\n  }, [localRowHeight, updateRowHeightWithPersistence])\n\n  // Calculate the percentage for the gradient fill\n  const fillPercentage = ((localRowHeight - 24) / (200 - 24)) * 100\n\n  return (\n    <Container>\n      <Label htmlFor=\"row-height-slider\">Row height</Label>\n      <SliderContainer>\n        <Slider\n          id=\"row-height-slider\"\n          type=\"range\"\n          min={24}\n          max={200}\n          step={2}\n          value={localRowHeight}\n          onChange={handleSliderChange}\n          onMouseDown={handleSliderStart}\n          onMouseUp={handleSliderRelease}\n          style={{\n            background: `linear-gradient(to right, var(--md-sys-color-primary) 0%, var(--md-sys-color-primary) ${fillPercentage}%, var(--md-sys-color-outline-variant) ${fillPercentage}%, var(--md-sys-color-outline-variant) 100%)`,\n          }}\n        />\n        <ValueDisplay>{localRowHeight}</ValueDisplay>\n      </SliderContainer>\n    </Container>\n  )\n}\n\nexport default RowHeightSettings\n"],"names":["useDebounce","value","delay","debouncedValue","setDebouncedValue","useState","useEffect","handler","Container","styled","Label","SliderContainer","Slider","ValueDisplay","RowHeightSettings","contextRowHeight","updateRowHeight","updateRowHeightWithPersistence","useColumnSettingsContext","localRowHeight","setLocalRowHeight","isDragging","setIsDragging","debouncedRowHeight","handleSliderChange","useCallback","e","newValue","handleSliderStart","handleSliderRelease","fillPercentage","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAMA,IAAc,CAACC,GAAeC,MAAkB;AACpD,QAAM,CAACC,GAAgBC,CAAiB,IAAIC,EAASJ,CAAK;AAE1D,SAAAK,EAAU,MAAM;AACR,UAAAC,IAAU,WAAW,MAAM;AAC/B,MAAAH,EAAkBH,CAAK;AAAA,OACtBC,CAAK;AAER,WAAO,MAAM;AACX,mBAAaK,CAAO;AAAA,IACtB;AAAA,EAAA,GACC,CAACN,GAAOC,CAAK,CAAC,GAEVC;AACT,GAEMK,IAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAOnBC,IAAQD,EAAO;AAAA;AAAA;AAAA;AAAA,GAMfE,IAAkBF,EAAO;AAAA;AAAA;AAAA;AAAA,GAMzBG,IAASH,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,GA2ChBI,IAAeJ,EAAO;AAAA;AAAA;AAAA;AAAA,GAMtBK,KAAwB,MAAM;AAC5B,QAAA;AAAA,IACJ,WAAWC,IAAmB;AAAA,IAC9B,iBAAAC;AAAA,IACA,gCAAAC;AAAA,MACEC,EAAyB,GAGvB,CAACC,GAAgBC,CAAiB,IAAIf,EAASU,CAAgB,GAC/D,CAACM,GAAYC,CAAa,IAAIjB,EAAS,EAAK,GAG5CkB,IAAqBvB,EAAYmB,GAAgB,EAAE;AAGzD,EAAAb,EAAU,MAAM;AACd,IAAKe,KACHD,EAAkBL,CAAgB;AAAA,EACpC,GACC,CAACA,GAAkBM,CAAU,CAAC,GAGjCf,EAAU,MAAM;AACd,IAAIe,KACFL,EAAgBO,CAAkB;AAAA,EAEnC,GAAA,CAACA,GAAoBP,GAAiBK,CAAU,CAAC;AAE9C,QAAAG,IAAqBC,EAAY,CAACC,MAA2C;AACjF,UAAMC,IAAW,SAASD,EAAE,OAAO,OAAO,EAAE;AAC5C,IAAAN,EAAkBO,CAAQ,GAGrBN,MACHL,EAAgBW,CAAQ,GACxBV,EAA+BU,CAAQ;AAAA,EAExC,GAAA,CAACN,GAAYL,GAAiBC,CAA8B,CAAC,GAE1DW,IAAoBH,EAAY,MAAM;AAC1C,IAAAH,EAAc,EAAI;AAAA,EACpB,GAAG,EAAE,GAECO,IAAsBJ,EAAY,MAAM;AAC5C,IAAAH,EAAc,EAAK,GAEnBL,EAA+BE,CAAc;AAAA,EAAA,GAC5C,CAACA,GAAgBF,CAA8B,CAAC,GAG7Ca,KAAmBX,IAAiB,MAAO,MAAa;AAE9D,gCACGX,GACC,EAAA,UAAA;AAAA,IAACuB,gBAAAA,EAAA,IAAArB,GAAA,EAAM,SAAQ,qBAAoB,UAAU,cAAA;AAAA,2BAC5CC,GACC,EAAA,UAAA;AAAA,MAAAoB,gBAAAA,EAAA;AAAA,QAACnB;AAAA,QAAA;AAAA,UACC,IAAG;AAAA,UACH,MAAK;AAAA,UACL,KAAK;AAAA,UACL,KAAK;AAAA,UACL,MAAM;AAAA,UACN,OAAOO;AAAA,UACP,UAAUK;AAAA,UACV,aAAaI;AAAA,UACb,WAAWC;AAAA,UACX,OAAO;AAAA,YACL,YAAY,yFAAyFC,CAAc,0CAA0CA,CAAc;AAAA,UAAA;AAAA,QAC7K;AAAA,MACF;AAAA,MACAC,gBAAAA,EAAAA,IAAClB,KAAc,UAAeM,EAAA,CAAA;AAAA,IAAA,EAChC,CAAA;AAAA,EAAA,GACF;AAEJ;"}

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../../_virtual/jsx-runtime.cjs.js"),s=require("@ynput/ayon-react-components"),r=require("styled-components");require("../../context/RemoteModulesContext.cjs.js");require("../../context/DetailsPanelContext.cjs.js");require("../../context/ThumbnailUploaderContext.cjs.js");const g=require("../../context/SettingsPanelContext.cjs.js");require("../../context/pip/PiPProvider.cjs.js");require("react-dom");require("../../context/pip/PiPWrapper.cjs.js");require("../../context/AddonProjectContext.cjs.js");require("../../context/AddonContext.cjs.js");require("../../context/PowerpackContext.cjs.js");require("../../context/MoveEntityContext.cjs.js");require("../../context/MenuContext.cjs.js");const v=r.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../../_virtual/jsx-runtime.cjs.js"),s=require("@ynput/ayon-react-components"),r=require("styled-components");require("../../context/RemoteModulesContext.cjs.js");require("../../context/DetailsPanelContext.cjs.js");require("../../context/ThumbnailUploaderContext.cjs.js");const g=require("../../context/SettingsPanelContext.cjs.js");require("../../context/pip/PiPProvider.cjs.js");require("react-dom");require("../../context/pip/PiPWrapper.cjs.js");require("../../context/AddonProjectContext.cjs.js");require("../../context/AddonContext.cjs.js");require("../../context/PowerpackContext.cjs.js");require("../../context/MoveEntityContext.cjs.js");require("../../context/MenuContext.cjs.js");const h=require("../ProjectTableSettings/RowHeightSettings.cjs.js"),v=r.div`
   height: 100%;
   overflow: hidden;
   background-color: var(--md-sys-color-surface-container-low);
@@ -6,7 +6,7 @@
   z-index: 10;
   display: flex;
   flex-direction: column;
-`,h=r.div`
+`,f=r.div`
   display: flex;
   align-items: center;
   gap: var(--base-gap-small);
@@ -20,7 +20,7 @@
   }
 `,l=r(s.Button)`
   padding: 4px !important;
-`,f=r.h3`
+`,R=r.h3`
   margin: 0;
   flex: 1;
 `,q=r.div`
@@ -44,5 +44,5 @@
   .arrow {
     color: var(--md-sys-color-outline);
   }
-`,R=({settings:o})=>{const{isPanelOpen:c,selectedSetting:i,closePanel:d,backToMainMenu:p,selectSetting:u}=g.useSettingsPanel(),m=()=>{if(!i)return"Settings";const n=o.find(t=>t.id===i);return(n==null?void 0:n.title)||"Settings"},j=()=>{if(!i)return e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{children:o.map(t=>{var a;return e.jsxRuntimeExports.jsxs(x,{onClick:()=>u(t.id),variant:"text",children:[t.icon&&e.jsxRuntimeExports.jsx(s.Icon,{icon:t.icon}),e.jsxRuntimeExports.jsx("span",{className:"title",children:t.title}),!!((a=t.preview)!=null&&a.toString())&&e.jsxRuntimeExports.jsx("span",{className:"preview",children:t.preview}),e.jsxRuntimeExports.jsx(s.Icon,{icon:"chevron_right",className:"arrow"})]},t.id)})});const n=o.find(t=>t.id===i);return n==null?void 0:n.component};return e.jsxRuntimeExports.jsxs(v,{open:c,children:[e.jsxRuntimeExports.jsxs(h,{children:[i&&o.length>1&&e.jsxRuntimeExports.jsx(l,{variant:"text",icon:"arrow_back",onClick:p}),e.jsxRuntimeExports.jsx(f,{children:m()}),e.jsxRuntimeExports.jsx(l,{variant:"text",icon:"close",onClick:d})]}),e.jsxRuntimeExports.jsx(q,{children:j()})]})};exports.SettingOption=x;exports.SettingsPanel=R;
+`,S=({settings:o})=>{const{isPanelOpen:c,selectedSetting:i,closePanel:d,backToMainMenu:u,selectSetting:p}=g.useSettingsPanel(),m=()=>{if(!i)return"Settings";const n=o.find(t=>t.id===i);return(n==null?void 0:n.title)||"Settings"},j=()=>{if(!i)return e.jsxRuntimeExports.jsx(e.jsxRuntimeExports.Fragment,{children:o.map(t=>{var a;return e.jsxRuntimeExports.jsxs(x,{onClick:()=>p(t.id),variant:"text",children:[t.icon&&e.jsxRuntimeExports.jsx(s.Icon,{icon:t.icon}),e.jsxRuntimeExports.jsx("span",{className:"title",children:t.title}),!!((a=t.preview)!=null&&a.toString())&&e.jsxRuntimeExports.jsx("span",{className:"preview",children:t.preview}),e.jsxRuntimeExports.jsx(s.Icon,{icon:"chevron_right",className:"arrow"})]},t.id)})});const n=o.find(t=>t.id===i);return n==null?void 0:n.component};return e.jsxRuntimeExports.jsxs(v,{open:c,children:[e.jsxRuntimeExports.jsxs(f,{children:[i&&o.length>1&&e.jsxRuntimeExports.jsx(l,{variant:"text",icon:"arrow_back",onClick:u}),e.jsxRuntimeExports.jsx(R,{children:m()}),e.jsxRuntimeExports.jsx(l,{variant:"text",icon:"close",onClick:d})]}),e.jsxRuntimeExports.jsxs(q,{children:[j(),e.jsxRuntimeExports.jsx(h,{})]})]})};exports.SettingOption=x;exports.SettingsPanel=S;
 //# sourceMappingURL=SettingsPanel.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SettingsPanel.cjs.js","sources":["../../../../../src/components/SettingsPanel/SettingsPanel.tsx"],"sourcesContent":["import { Button, Icon } from '@ynput/ayon-react-components'\nimport { FC, ReactNode } from 'react'\nimport styled from 'styled-components'\nimport { SettingField, useSettingsPanel } from '@shared/context'\n\n// Side panel styled components\nconst SidePanel = styled.div<{ open: boolean }>`\n  height: 100%;\n  overflow: hidden;\n  background-color: var(--md-sys-color-surface-container-low);\n  border-radius: 4px;\n  z-index: 10;\n  display: flex;\n  flex-direction: column;\n`\n\nconst PanelHeader = styled.div`\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n  height: 34px;\n  padding: 0px 4px;\n  border-bottom: 1px solid var(--md-sys-color-outline-variant);\n\n  h3 {\n    margin-left: 4px;\n    padding: 0;\n  }\n`\n\nconst ToolButton = styled(Button)`\n  padding: 4px !important;\n`\n\nconst PanelTitle = styled.h3`\n  margin: 0;\n  flex: 1;\n`\n\nconst PanelContent = styled.div`\n  padding: 8px;\n  flex: 1;\n  overflow-y: auto;\n`\n\nexport const SettingOption = styled(Button)`\n  width: 100%;\n  justify-content: flex-start;\n  margin-bottom: 8px;\n  text-align: left;\n  display: flex;\n  gap: var(--base-gap-small);\n  padding-right: var(--padding-s);\n\n  .title {\n    flex: 1;\n  }\n\n  .preview,\n  .arrow {\n    color: var(--md-sys-color-outline);\n  }\n`\n\nexport interface SettingConfig {\n  id: SettingField\n  title: string\n  component: ReactNode\n  icon?: string\n  preview?: string | number\n}\n\nexport interface SettingsPanelProps {\n  settings: SettingConfig[]\n}\n\nexport const SettingsPanel: FC<SettingsPanelProps> = ({ settings }) => {\n  const { isPanelOpen, selectedSetting, closePanel, backToMainMenu, selectSetting } =\n    useSettingsPanel()\n\n  const getPanelTitle = () => {\n    if (!selectedSetting) return 'Settings'\n    const setting = settings.find((s) => s.id === selectedSetting)\n    return setting?.title || 'Settings'\n  }\n\n  const renderSettingContent = () => {\n    if (!selectedSetting) {\n      // Render main menu\n      return (\n        <>\n          {settings.map((setting) => (\n            <SettingOption\n              key={setting.id}\n              onClick={() => selectSetting(setting.id)}\n              variant=\"text\"\n            >\n              {setting.icon && <Icon icon={setting.icon} />}\n              <span className=\"title\">{setting.title}</span>\n              {!!setting.preview?.toString() && <span className=\"preview\">{setting.preview}</span>}\n              <Icon icon=\"chevron_right\" className=\"arrow\" />\n            </SettingOption>\n          ))}\n        </>\n      )\n    }\n\n    const setting = settings.find((s) => s.id === selectedSetting)\n    return setting?.component\n  }\n\n  return (\n    <SidePanel open={isPanelOpen}>\n      <PanelHeader>\n        {selectedSetting && settings.length > 1 && (\n          <ToolButton variant=\"text\" icon=\"arrow_back\" onClick={backToMainMenu} />\n        )}\n        <PanelTitle>{getPanelTitle()}</PanelTitle>\n        <ToolButton variant=\"text\" icon=\"close\" onClick={closePanel} />\n      </PanelHeader>\n      <PanelContent>{renderSettingContent()}</PanelContent>\n    </SidePanel>\n  )\n}\n"],"names":["SidePanel","styled","PanelHeader","ToolButton","Button","PanelTitle","PanelContent","SettingOption","SettingsPanel","settings","isPanelOpen","selectedSetting","closePanel","backToMainMenu","selectSetting","useSettingsPanel","getPanelTitle","setting","s","renderSettingContent","jsx","Fragment","jsxs","Icon"],"mappings":"uxBAMA,MAAMA,EAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUnBC,EAAcD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAcrBE,EAAaF,EAAOG,QAAM;AAAA;AAAA,EAI1BC,EAAaJ,EAAO;AAAA;AAAA;AAAA,EAKpBK,EAAeL,EAAO;AAAA;AAAA;AAAA;AAAA,EAMfM,EAAgBN,EAAOG,QAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA+B7BI,EAAwC,CAAC,CAAE,SAAAC,KAAe,CACrE,KAAM,CAAE,YAAAC,EAAa,gBAAAC,EAAiB,WAAAC,EAAY,eAAAC,EAAgB,cAAAC,GAChEC,mBAAiB,EAEbC,EAAgB,IAAM,CACtB,GAAA,CAACL,EAAwB,MAAA,WAC7B,MAAMM,EAAUR,EAAS,KAAMS,GAAMA,EAAE,KAAOP,CAAe,EAC7D,OAAOM,GAAA,YAAAA,EAAS,QAAS,UAC3B,EAEME,EAAuB,IAAM,CACjC,GAAI,CAACR,EAEH,OAEKS,EAAAA,kBAAAA,IAAAC,EAAAA,kBAAAA,SAAA,CAAA,SAAAZ,EAAS,IAAKQ,UACbK,OAAAA,EAAA,kBAAA,KAACf,EAAA,CAEC,QAAS,IAAMO,EAAcG,EAAQ,EAAE,EACvC,QAAQ,OAEP,SAAA,CAAAA,EAAQ,MAAQG,wBAACG,EAAAA,KAAK,CAAA,KAAMN,EAAQ,KAAM,0BAC1C,OAAK,CAAA,UAAU,QAAS,SAAAA,EAAQ,MAAM,EACtC,CAAC,GAACA,EAAAA,EAAQ,UAARA,MAAAA,EAAiB,aAAeG,EAAAA,kBAAAA,IAAA,OAAA,CAAK,UAAU,UAAW,SAAAH,EAAQ,OAAQ,CAAA,EAC5EG,EAAA,kBAAA,IAAAG,EAAA,KAAA,CAAK,KAAK,gBAAgB,UAAU,OAAQ,CAAA,CAAA,CAAA,EAPxCN,EAAQ,EAShB,EAAA,EACH,EAIJ,MAAMA,EAAUR,EAAS,KAAMS,GAAMA,EAAE,KAAOP,CAAe,EAC7D,OAAOM,GAAA,YAAAA,EAAS,SAClB,EAGE,OAAAK,EAAA,kBAAA,KAACtB,EAAU,CAAA,KAAMU,EACf,SAAA,CAAAY,yBAACpB,EACE,CAAA,SAAA,CAAmBS,GAAAF,EAAS,OAAS,GACnCW,EAAA,kBAAA,IAAAjB,EAAA,CAAW,QAAQ,OAAO,KAAK,aAAa,QAASU,CAAgB,CAAA,EAExEO,EAAAA,kBAAAA,IAACf,EAAY,CAAA,SAAAW,EAAgB,CAAA,CAAA,0BAC5Bb,EAAW,CAAA,QAAQ,OAAO,KAAK,QAAQ,QAASS,CAAY,CAAA,CAAA,EAC/D,EACAQ,EAAAA,kBAAAA,IAACd,EAAc,CAAA,SAAAa,EAAA,CAAuB,CAAA,CAAA,EACxC,CAEJ"}
+{"version":3,"file":"SettingsPanel.cjs.js","sources":["../../../../../src/components/SettingsPanel/SettingsPanel.tsx"],"sourcesContent":["import { Button, Icon } from '@ynput/ayon-react-components'\nimport { FC, ReactNode } from 'react'\nimport styled from 'styled-components'\nimport { SettingField, useSettingsPanel } from '@shared/context'\nimport RowHeightSettings from '@shared/components/ProjectTableSettings/RowHeightSettings'\n\n// Side panel styled components\nconst SidePanel = styled.div<{ open: boolean }>`\n  height: 100%;\n  overflow: hidden;\n  background-color: var(--md-sys-color-surface-container-low);\n  border-radius: 4px;\n  z-index: 10;\n  display: flex;\n  flex-direction: column;\n`\n\nconst PanelHeader = styled.div`\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n  height: 34px;\n  padding: 0px 4px;\n  border-bottom: 1px solid var(--md-sys-color-outline-variant);\n\n  h3 {\n    margin-left: 4px;\n    padding: 0;\n  }\n`\n\nconst ToolButton = styled(Button)`\n  padding: 4px !important;\n`\n\nconst PanelTitle = styled.h3`\n  margin: 0;\n  flex: 1;\n`\n\nconst PanelContent = styled.div`\n  padding: 8px;\n  flex: 1;\n  overflow-y: auto;\n`\n\nexport const SettingOption = styled(Button)`\n  width: 100%;\n  justify-content: flex-start;\n  margin-bottom: 8px;\n  text-align: left;\n  display: flex;\n  gap: var(--base-gap-small);\n  padding-right: var(--padding-s);\n\n  .title {\n    flex: 1;\n  }\n\n  .preview,\n  .arrow {\n    color: var(--md-sys-color-outline);\n  }\n`\n\nexport interface SettingConfig {\n  id: SettingField\n  title: string\n  component: ReactNode\n  icon?: string\n  preview?: string | number\n}\n\nexport interface SettingsPanelProps {\n  settings: SettingConfig[]\n}\n\nexport const SettingsPanel: FC<SettingsPanelProps> = ({ settings }) => {\n  const { isPanelOpen, selectedSetting, closePanel, backToMainMenu, selectSetting } =\n    useSettingsPanel()\n\n  const getPanelTitle = () => {\n    if (!selectedSetting) return 'Settings'\n    const setting = settings.find((s) => s.id === selectedSetting)\n    return setting?.title || 'Settings'\n  }\n\n  const renderSettingContent = () => {\n    if (!selectedSetting) {\n      // Render main menu\n      return (\n        <>\n          {settings.map((setting) => (\n            <SettingOption\n              key={setting.id}\n              onClick={() => selectSetting(setting.id)}\n              variant=\"text\"\n            >\n              {setting.icon && <Icon icon={setting.icon} />}\n              <span className=\"title\">{setting.title}</span>\n              {!!setting.preview?.toString() && <span className=\"preview\">{setting.preview}</span>}\n              <Icon icon=\"chevron_right\" className=\"arrow\" />\n            </SettingOption>\n          ))}\n        </>\n      )\n    }\n\n    const setting = settings.find((s) => s.id === selectedSetting)\n    return setting?.component\n  }\n\n  return (\n    <SidePanel open={isPanelOpen}>\n      <PanelHeader>\n        {selectedSetting && settings.length > 1 && (\n          <ToolButton variant=\"text\" icon=\"arrow_back\" onClick={backToMainMenu} />\n        )}\n        <PanelTitle>{getPanelTitle()}</PanelTitle>\n        <ToolButton variant=\"text\" icon=\"close\" onClick={closePanel} />\n      </PanelHeader>\n      <PanelContent>\n        {renderSettingContent()}\n        <RowHeightSettings />\n      </PanelContent>\n    </SidePanel>\n  )\n}\n"],"names":["SidePanel","styled","PanelHeader","ToolButton","Button","PanelTitle","PanelContent","SettingOption","SettingsPanel","settings","isPanelOpen","selectedSetting","closePanel","backToMainMenu","selectSetting","useSettingsPanel","getPanelTitle","setting","s","renderSettingContent","jsx","Fragment","jsxs","Icon","RowHeightSettings"],"mappings":"21BAOMA,EAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUnBC,EAAcD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAcrBE,EAAaF,EAAOG,QAAM;AAAA;AAAA,EAI1BC,EAAaJ,EAAO;AAAA;AAAA;AAAA,EAKpBK,EAAeL,EAAO;AAAA;AAAA;AAAA;AAAA,EAMfM,EAAgBN,EAAOG,QAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA+B7BI,EAAwC,CAAC,CAAE,SAAAC,KAAe,CACrE,KAAM,CAAE,YAAAC,EAAa,gBAAAC,EAAiB,WAAAC,EAAY,eAAAC,EAAgB,cAAAC,GAChEC,mBAAiB,EAEbC,EAAgB,IAAM,CACtB,GAAA,CAACL,EAAwB,MAAA,WAC7B,MAAMM,EAAUR,EAAS,KAAMS,GAAMA,EAAE,KAAOP,CAAe,EAC7D,OAAOM,GAAA,YAAAA,EAAS,QAAS,UAC3B,EAEME,EAAuB,IAAM,CACjC,GAAI,CAACR,EAEH,OAEKS,EAAAA,kBAAAA,IAAAC,EAAAA,kBAAAA,SAAA,CAAA,SAAAZ,EAAS,IAAKQ,UACbK,OAAAA,EAAA,kBAAA,KAACf,EAAA,CAEC,QAAS,IAAMO,EAAcG,EAAQ,EAAE,EACvC,QAAQ,OAEP,SAAA,CAAAA,EAAQ,MAAQG,wBAACG,EAAAA,KAAK,CAAA,KAAMN,EAAQ,KAAM,0BAC1C,OAAK,CAAA,UAAU,QAAS,SAAAA,EAAQ,MAAM,EACtC,CAAC,GAACA,EAAAA,EAAQ,UAARA,MAAAA,EAAiB,aAAeG,EAAAA,kBAAAA,IAAA,OAAA,CAAK,UAAU,UAAW,SAAAH,EAAQ,OAAQ,CAAA,EAC5EG,EAAA,kBAAA,IAAAG,EAAA,KAAA,CAAK,KAAK,gBAAgB,UAAU,OAAQ,CAAA,CAAA,CAAA,EAPxCN,EAAQ,EAShB,EAAA,EACH,EAIJ,MAAMA,EAAUR,EAAS,KAAMS,GAAMA,EAAE,KAAOP,CAAe,EAC7D,OAAOM,GAAA,YAAAA,EAAS,SAClB,EAGE,OAAAK,EAAA,kBAAA,KAACtB,EAAU,CAAA,KAAMU,EACf,SAAA,CAAAY,yBAACpB,EACE,CAAA,SAAA,CAAmBS,GAAAF,EAAS,OAAS,GACnCW,EAAA,kBAAA,IAAAjB,EAAA,CAAW,QAAQ,OAAO,KAAK,aAAa,QAASU,CAAgB,CAAA,EAExEO,EAAAA,kBAAAA,IAACf,EAAY,CAAA,SAAAW,EAAgB,CAAA,CAAA,0BAC5Bb,EAAW,CAAA,QAAQ,OAAO,KAAK,QAAQ,QAASS,CAAY,CAAA,CAAA,EAC/D,2BACCN,EACE,CAAA,SAAA,CAAqBa,EAAA,0BACrBK,EAAkB,CAAA,CAAA,CAAA,CACrB,CAAA,CAAA,EACF,CAEJ"}

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

@@ -1,6 +1,6 @@
-import { j as e } from "../../../../_virtual/jsx-runtime.es.js";
+import { j as t } from "../../../../_virtual/jsx-runtime.es.js";
 import { Button as c, Icon as l } from "@ynput/ayon-react-components";
-import o from "styled-components";
+import i from "styled-components";
 import "../../context/RemoteModulesContext.es.js";
 import "../../context/DetailsPanelContext.es.js";
 import "../../context/ThumbnailUploaderContext.es.js";
@@ -13,7 +13,8 @@ import "../../context/AddonContext.es.js";
 import "../../context/PowerpackContext.es.js";
 import "../../context/MoveEntityContext.es.js";
 import "../../context/MenuContext.es.js";
-const v = o.div`
+import v from "../ProjectTableSettings/RowHeightSettings.es.js";
+const u = i.div`
   height: 100%;
   overflow: hidden;
   background-color: var(--md-sys-color-surface-container-low);
@@ -21,7 +22,7 @@ const v = o.div`
   z-index: 10;
   display: flex;
   flex-direction: column;
-`, u = o.div`
+`, j = i.div`
   display: flex;
   align-items: center;
   gap: var(--base-gap-small);
@@ -33,16 +34,16 @@ const v = o.div`
     margin-left: 4px;
     padding: 0;
   }
-`, s = o(c)`
+`, s = i(c)`
   padding: 4px !important;
-`, j = o.h3`
+`, w = i.h3`
   margin: 0;
   flex: 1;
-`, w = o.div`
+`, S = i.div`
   padding: 8px;
   flex: 1;
   overflow-y: auto;
-`, S = o(c)`
+`, b = i(c)`
   width: 100%;
   justify-content: flex-start;
   margin-bottom: 8px;
@@ -59,44 +60,47 @@ const v = o.div`
   .arrow {
     color: var(--md-sys-color-outline);
   }
-`, I = ({ settings: r }) => {
-  const { isPanelOpen: p, selectedSetting: i, closePanel: d, backToMainMenu: m, selectSetting: x } = h(), f = () => {
-    if (!i) return "Settings";
-    const n = r.find((t) => t.id === i);
-    return (n == null ? void 0 : n.title) || "Settings";
+`, q = ({ settings: r }) => {
+  const { isPanelOpen: p, selectedSetting: n, closePanel: d, backToMainMenu: m, selectSetting: x } = h(), f = () => {
+    if (!n) return "Settings";
+    const o = r.find((e) => e.id === n);
+    return (o == null ? void 0 : o.title) || "Settings";
   }, g = () => {
-    if (!i)
-      return /* @__PURE__ */ e.jsx(e.Fragment, { children: r.map((t) => {
+    if (!n)
+      return /* @__PURE__ */ t.jsx(t.Fragment, { children: r.map((e) => {
         var a;
-        return /* @__PURE__ */ e.jsxs(
-          S,
+        return /* @__PURE__ */ t.jsxs(
+          b,
           {
-            onClick: () => x(t.id),
+            onClick: () => x(e.id),
             variant: "text",
             children: [
-              t.icon && /* @__PURE__ */ e.jsx(l, { icon: t.icon }),
-              /* @__PURE__ */ e.jsx("span", { className: "title", children: t.title }),
-              !!((a = t.preview) != null && a.toString()) && /* @__PURE__ */ e.jsx("span", { className: "preview", children: t.preview }),
-              /* @__PURE__ */ e.jsx(l, { icon: "chevron_right", className: "arrow" })
+              e.icon && /* @__PURE__ */ t.jsx(l, { icon: e.icon }),
+              /* @__PURE__ */ t.jsx("span", { className: "title", children: e.title }),
+              !!((a = e.preview) != null && a.toString()) && /* @__PURE__ */ t.jsx("span", { className: "preview", children: e.preview }),
+              /* @__PURE__ */ t.jsx(l, { icon: "chevron_right", className: "arrow" })
             ]
           },
-          t.id
+          e.id
         );
       }) });
-    const n = r.find((t) => t.id === i);
-    return n == null ? void 0 : n.component;
+    const o = r.find((e) => e.id === n);
+    return o == null ? void 0 : o.component;
   };
-  return /* @__PURE__ */ e.jsxs(v, { open: p, children: [
-    /* @__PURE__ */ e.jsxs(u, { children: [
-      i && r.length > 1 && /* @__PURE__ */ e.jsx(s, { variant: "text", icon: "arrow_back", onClick: m }),
-      /* @__PURE__ */ e.jsx(j, { children: f() }),
-      /* @__PURE__ */ e.jsx(s, { variant: "text", icon: "close", onClick: d })
+  return /* @__PURE__ */ t.jsxs(u, { open: p, children: [
+    /* @__PURE__ */ t.jsxs(j, { children: [
+      n && r.length > 1 && /* @__PURE__ */ t.jsx(s, { variant: "text", icon: "arrow_back", onClick: m }),
+      /* @__PURE__ */ t.jsx(w, { children: f() }),
+      /* @__PURE__ */ t.jsx(s, { variant: "text", icon: "close", onClick: d })
     ] }),
-    /* @__PURE__ */ e.jsx(w, { children: g() })
+    /* @__PURE__ */ t.jsxs(S, { children: [
+      g(),
+      /* @__PURE__ */ t.jsx(v, {})
+    ] })
   ] });
 };
 export {
-  S as SettingOption,
-  I as SettingsPanel
+  b as SettingOption,
+  q as SettingsPanel
 };
 //# sourceMappingURL=SettingsPanel.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SettingsPanel.es.js","sources":["../../../../../src/components/SettingsPanel/SettingsPanel.tsx"],"sourcesContent":["import { Button, Icon } from '@ynput/ayon-react-components'\nimport { FC, ReactNode } from 'react'\nimport styled from 'styled-components'\nimport { SettingField, useSettingsPanel } from '@shared/context'\n\n// Side panel styled components\nconst SidePanel = styled.div<{ open: boolean }>`\n  height: 100%;\n  overflow: hidden;\n  background-color: var(--md-sys-color-surface-container-low);\n  border-radius: 4px;\n  z-index: 10;\n  display: flex;\n  flex-direction: column;\n`\n\nconst PanelHeader = styled.div`\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n  height: 34px;\n  padding: 0px 4px;\n  border-bottom: 1px solid var(--md-sys-color-outline-variant);\n\n  h3 {\n    margin-left: 4px;\n    padding: 0;\n  }\n`\n\nconst ToolButton = styled(Button)`\n  padding: 4px !important;\n`\n\nconst PanelTitle = styled.h3`\n  margin: 0;\n  flex: 1;\n`\n\nconst PanelContent = styled.div`\n  padding: 8px;\n  flex: 1;\n  overflow-y: auto;\n`\n\nexport const SettingOption = styled(Button)`\n  width: 100%;\n  justify-content: flex-start;\n  margin-bottom: 8px;\n  text-align: left;\n  display: flex;\n  gap: var(--base-gap-small);\n  padding-right: var(--padding-s);\n\n  .title {\n    flex: 1;\n  }\n\n  .preview,\n  .arrow {\n    color: var(--md-sys-color-outline);\n  }\n`\n\nexport interface SettingConfig {\n  id: SettingField\n  title: string\n  component: ReactNode\n  icon?: string\n  preview?: string | number\n}\n\nexport interface SettingsPanelProps {\n  settings: SettingConfig[]\n}\n\nexport const SettingsPanel: FC<SettingsPanelProps> = ({ settings }) => {\n  const { isPanelOpen, selectedSetting, closePanel, backToMainMenu, selectSetting } =\n    useSettingsPanel()\n\n  const getPanelTitle = () => {\n    if (!selectedSetting) return 'Settings'\n    const setting = settings.find((s) => s.id === selectedSetting)\n    return setting?.title || 'Settings'\n  }\n\n  const renderSettingContent = () => {\n    if (!selectedSetting) {\n      // Render main menu\n      return (\n        <>\n          {settings.map((setting) => (\n            <SettingOption\n              key={setting.id}\n              onClick={() => selectSetting(setting.id)}\n              variant=\"text\"\n            >\n              {setting.icon && <Icon icon={setting.icon} />}\n              <span className=\"title\">{setting.title}</span>\n              {!!setting.preview?.toString() && <span className=\"preview\">{setting.preview}</span>}\n              <Icon icon=\"chevron_right\" className=\"arrow\" />\n            </SettingOption>\n          ))}\n        </>\n      )\n    }\n\n    const setting = settings.find((s) => s.id === selectedSetting)\n    return setting?.component\n  }\n\n  return (\n    <SidePanel open={isPanelOpen}>\n      <PanelHeader>\n        {selectedSetting && settings.length > 1 && (\n          <ToolButton variant=\"text\" icon=\"arrow_back\" onClick={backToMainMenu} />\n        )}\n        <PanelTitle>{getPanelTitle()}</PanelTitle>\n        <ToolButton variant=\"text\" icon=\"close\" onClick={closePanel} />\n      </PanelHeader>\n      <PanelContent>{renderSettingContent()}</PanelContent>\n    </SidePanel>\n  )\n}\n"],"names":["SidePanel","styled","PanelHeader","ToolButton","Button","PanelTitle","PanelContent","SettingOption","SettingsPanel","settings","isPanelOpen","selectedSetting","closePanel","backToMainMenu","selectSetting","useSettingsPanel","getPanelTitle","setting","s","renderSettingContent","jsx","Fragment","jsxs","Icon"],"mappings":";;;;;;;;;;;;;;;AAMA,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUnBC,IAAcD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAcrBE,IAAaF,EAAOG,CAAM;AAAA;AAAA,GAI1BC,IAAaJ,EAAO;AAAA;AAAA;AAAA,GAKpBK,IAAeL,EAAO;AAAA;AAAA;AAAA;AAAA,GAMfM,IAAgBN,EAAOG,CAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA+B7BI,IAAwC,CAAC,EAAE,UAAAC,QAAe;AACrE,QAAM,EAAE,aAAAC,GAAa,iBAAAC,GAAiB,YAAAC,GAAY,gBAAAC,GAAgB,eAAAC,MAChEC,EAAiB,GAEbC,IAAgB,MAAM;AACtB,QAAA,CAACL,EAAwB,QAAA;AAC7B,UAAMM,IAAUR,EAAS,KAAK,CAACS,MAAMA,EAAE,OAAOP,CAAe;AAC7D,YAAOM,KAAA,gBAAAA,EAAS,UAAS;AAAA,EAC3B,GAEME,IAAuB,MAAM;AACjC,QAAI,CAACR;AAEH,aAEKS,gBAAAA,EAAAA,IAAAC,EAAAA,UAAA,EAAA,UAAAZ,EAAS,IAAI,CAACQ;;AACbK,+BAAAA,EAAA;AAAA,UAACf;AAAA,UAAA;AAAA,YAEC,SAAS,MAAMO,EAAcG,EAAQ,EAAE;AAAA,YACvC,SAAQ;AAAA,YAEP,UAAA;AAAA,cAAAA,EAAQ,QAAQG,gBAAAA,MAACG,GAAK,EAAA,MAAMN,EAAQ,MAAM;AAAA,oCAC1C,QAAK,EAAA,WAAU,SAAS,UAAAA,EAAQ,OAAM;AAAA,cACtC,CAAC,GAACA,IAAAA,EAAQ,YAARA,QAAAA,EAAiB,eAAeG,gBAAAA,EAAAA,IAAA,QAAA,EAAK,WAAU,WAAW,UAAAH,EAAQ,QAAQ,CAAA;AAAA,cAC5EG,gBAAAA,EAAA,IAAAG,GAAA,EAAK,MAAK,iBAAgB,WAAU,QAAQ,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAPxCN,EAAQ;AAAA,QAShB;AAAA,OAAA,GACH;AAIJ,UAAMA,IAAUR,EAAS,KAAK,CAACS,MAAMA,EAAE,OAAOP,CAAe;AAC7D,WAAOM,KAAA,gBAAAA,EAAS;AAAA,EAClB;AAGE,SAAAK,gBAAAA,EAAA,KAACtB,GAAU,EAAA,MAAMU,GACf,UAAA;AAAA,IAAAY,gBAAAA,OAACpB,GACE,EAAA,UAAA;AAAA,MAAmBS,KAAAF,EAAS,SAAS,KACnCW,gBAAAA,EAAA,IAAAjB,GAAA,EAAW,SAAQ,QAAO,MAAK,cAAa,SAASU,EAAgB,CAAA;AAAA,MAExEO,gBAAAA,EAAAA,IAACf,GAAY,EAAA,UAAAW,EAAgB,EAAA,CAAA;AAAA,4BAC5Bb,GAAW,EAAA,SAAQ,QAAO,MAAK,SAAQ,SAASS,EAAY,CAAA;AAAA,IAAA,GAC/D;AAAA,IACAQ,gBAAAA,EAAAA,IAACd,GAAc,EAAA,UAAAa,EAAA,EAAuB,CAAA;AAAA,EAAA,GACxC;AAEJ;"}
+{"version":3,"file":"SettingsPanel.es.js","sources":["../../../../../src/components/SettingsPanel/SettingsPanel.tsx"],"sourcesContent":["import { Button, Icon } from '@ynput/ayon-react-components'\nimport { FC, ReactNode } from 'react'\nimport styled from 'styled-components'\nimport { SettingField, useSettingsPanel } from '@shared/context'\nimport RowHeightSettings from '@shared/components/ProjectTableSettings/RowHeightSettings'\n\n// Side panel styled components\nconst SidePanel = styled.div<{ open: boolean }>`\n  height: 100%;\n  overflow: hidden;\n  background-color: var(--md-sys-color-surface-container-low);\n  border-radius: 4px;\n  z-index: 10;\n  display: flex;\n  flex-direction: column;\n`\n\nconst PanelHeader = styled.div`\n  display: flex;\n  align-items: center;\n  gap: var(--base-gap-small);\n  height: 34px;\n  padding: 0px 4px;\n  border-bottom: 1px solid var(--md-sys-color-outline-variant);\n\n  h3 {\n    margin-left: 4px;\n    padding: 0;\n  }\n`\n\nconst ToolButton = styled(Button)`\n  padding: 4px !important;\n`\n\nconst PanelTitle = styled.h3`\n  margin: 0;\n  flex: 1;\n`\n\nconst PanelContent = styled.div`\n  padding: 8px;\n  flex: 1;\n  overflow-y: auto;\n`\n\nexport const SettingOption = styled(Button)`\n  width: 100%;\n  justify-content: flex-start;\n  margin-bottom: 8px;\n  text-align: left;\n  display: flex;\n  gap: var(--base-gap-small);\n  padding-right: var(--padding-s);\n\n  .title {\n    flex: 1;\n  }\n\n  .preview,\n  .arrow {\n    color: var(--md-sys-color-outline);\n  }\n`\n\nexport interface SettingConfig {\n  id: SettingField\n  title: string\n  component: ReactNode\n  icon?: string\n  preview?: string | number\n}\n\nexport interface SettingsPanelProps {\n  settings: SettingConfig[]\n}\n\nexport const SettingsPanel: FC<SettingsPanelProps> = ({ settings }) => {\n  const { isPanelOpen, selectedSetting, closePanel, backToMainMenu, selectSetting } =\n    useSettingsPanel()\n\n  const getPanelTitle = () => {\n    if (!selectedSetting) return 'Settings'\n    const setting = settings.find((s) => s.id === selectedSetting)\n    return setting?.title || 'Settings'\n  }\n\n  const renderSettingContent = () => {\n    if (!selectedSetting) {\n      // Render main menu\n      return (\n        <>\n          {settings.map((setting) => (\n            <SettingOption\n              key={setting.id}\n              onClick={() => selectSetting(setting.id)}\n              variant=\"text\"\n            >\n              {setting.icon && <Icon icon={setting.icon} />}\n              <span className=\"title\">{setting.title}</span>\n              {!!setting.preview?.toString() && <span className=\"preview\">{setting.preview}</span>}\n              <Icon icon=\"chevron_right\" className=\"arrow\" />\n            </SettingOption>\n          ))}\n        </>\n      )\n    }\n\n    const setting = settings.find((s) => s.id === selectedSetting)\n    return setting?.component\n  }\n\n  return (\n    <SidePanel open={isPanelOpen}>\n      <PanelHeader>\n        {selectedSetting && settings.length > 1 && (\n          <ToolButton variant=\"text\" icon=\"arrow_back\" onClick={backToMainMenu} />\n        )}\n        <PanelTitle>{getPanelTitle()}</PanelTitle>\n        <ToolButton variant=\"text\" icon=\"close\" onClick={closePanel} />\n      </PanelHeader>\n      <PanelContent>\n        {renderSettingContent()}\n        <RowHeightSettings />\n      </PanelContent>\n    </SidePanel>\n  )\n}\n"],"names":["SidePanel","styled","PanelHeader","ToolButton","Button","PanelTitle","PanelContent","SettingOption","SettingsPanel","settings","isPanelOpen","selectedSetting","closePanel","backToMainMenu","selectSetting","useSettingsPanel","getPanelTitle","setting","s","renderSettingContent","jsx","Fragment","jsxs","Icon","RowHeightSettings"],"mappings":";;;;;;;;;;;;;;;;AAOA,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAUnBC,IAAcD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAcrBE,IAAaF,EAAOG,CAAM;AAAA;AAAA,GAI1BC,IAAaJ,EAAO;AAAA;AAAA;AAAA,GAKpBK,IAAeL,EAAO;AAAA;AAAA;AAAA;AAAA,GAMfM,IAAgBN,EAAOG,CAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA+B7BI,IAAwC,CAAC,EAAE,UAAAC,QAAe;AACrE,QAAM,EAAE,aAAAC,GAAa,iBAAAC,GAAiB,YAAAC,GAAY,gBAAAC,GAAgB,eAAAC,MAChEC,EAAiB,GAEbC,IAAgB,MAAM;AACtB,QAAA,CAACL,EAAwB,QAAA;AAC7B,UAAMM,IAAUR,EAAS,KAAK,CAACS,MAAMA,EAAE,OAAOP,CAAe;AAC7D,YAAOM,KAAA,gBAAAA,EAAS,UAAS;AAAA,EAC3B,GAEME,IAAuB,MAAM;AACjC,QAAI,CAACR;AAEH,aAEKS,gBAAAA,EAAAA,IAAAC,EAAAA,UAAA,EAAA,UAAAZ,EAAS,IAAI,CAACQ;;AACbK,+BAAAA,EAAA;AAAA,UAACf;AAAA,UAAA;AAAA,YAEC,SAAS,MAAMO,EAAcG,EAAQ,EAAE;AAAA,YACvC,SAAQ;AAAA,YAEP,UAAA;AAAA,cAAAA,EAAQ,QAAQG,gBAAAA,MAACG,GAAK,EAAA,MAAMN,EAAQ,MAAM;AAAA,oCAC1C,QAAK,EAAA,WAAU,SAAS,UAAAA,EAAQ,OAAM;AAAA,cACtC,CAAC,GAACA,IAAAA,EAAQ,YAARA,QAAAA,EAAiB,eAAeG,gBAAAA,EAAAA,IAAA,QAAA,EAAK,WAAU,WAAW,UAAAH,EAAQ,QAAQ,CAAA;AAAA,cAC5EG,gBAAAA,EAAA,IAAAG,GAAA,EAAK,MAAK,iBAAgB,WAAU,QAAQ,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAPxCN,EAAQ;AAAA,QAShB;AAAA,OAAA,GACH;AAIJ,UAAMA,IAAUR,EAAS,KAAK,CAACS,MAAMA,EAAE,OAAOP,CAAe;AAC7D,WAAOM,KAAA,gBAAAA,EAAS;AAAA,EAClB;AAGE,SAAAK,gBAAAA,EAAA,KAACtB,GAAU,EAAA,MAAMU,GACf,UAAA;AAAA,IAAAY,gBAAAA,OAACpB,GACE,EAAA,UAAA;AAAA,MAAmBS,KAAAF,EAAS,SAAS,KACnCW,gBAAAA,EAAA,IAAAjB,GAAA,EAAW,SAAQ,QAAO,MAAK,cAAa,SAASU,EAAgB,CAAA;AAAA,MAExEO,gBAAAA,EAAAA,IAACf,GAAY,EAAA,UAAAW,EAAgB,EAAA,CAAA;AAAA,4BAC5Bb,GAAW,EAAA,SAAQ,QAAO,MAAK,SAAQ,SAASS,EAAY,CAAA;AAAA,IAAA,GAC/D;AAAA,2BACCN,GACE,EAAA,UAAA;AAAA,MAAqBa,EAAA;AAAA,4BACrBK,GAAkB,CAAA,CAAA;AAAA,IAAA,EACrB,CAAA;AAAA,EAAA,GACF;AAEJ;"}

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

@@ -1,10 +1,9 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("styled-components"),r=o.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("styled-components"),e=o.div`
   position: relative;
   width: 100%;
   height: 52px;
   aspect-ratio: 1.7;
   overflow: hidden;
-  border-radius: var(--border-radius-l);
   margin: auto;
 
   background-color: var(--md-sys-color-surface-container-lowest);
@@ -89,11 +88,10 @@
     border: none;
     border-color: transparent;
   }
-`,e=o.img`
+`,i=o.img`
   width: 100%;
   height: 100%;
   object-fit: contain;
-  border-radius: var(--border-radius-m);
   overflow: hidden;
 
   /* ensures it always fills the parent */
@@ -102,5 +100,5 @@
   inset: 0;
 
   transition: scale 0.2s, opacity 0.2s;
-`;exports.Card=r;exports.Image=e;
+`;exports.Card=e;exports.Image=i;
 //# sourceMappingURL=Thumbnail.styled.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Thumbnail.styled.cjs.js","sources":["../../../../../src/components/Thumbnail/Thumbnail.styled.ts"],"sourcesContent":["import styled from 'styled-components'\n\nexport const Card = styled.div`\n  position: relative;\n  width: 100%;\n  height: 52px;\n  aspect-ratio: 1.7;\n  overflow: hidden;\n  border-radius: var(--border-radius-l);\n  margin: auto;\n\n  background-color: var(--md-sys-color-surface-container-lowest);\n\n  transition: border-color 0.2s, background-color 0.2s;\n\n  &.border {\n    border: solid 2px var(--md-sys-color-outline-variant);\n  }\n\n  /* icon */\n  .icon {\n    position: absolute;\n    user-select: none;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    inset: 0;\n\n    transition: opacity 0.2s;\n  }\n\n  .type-icon {\n    color: var(--md-sys-color-outline);\n  }\n\n  .hover-icon {\n    inset: unset;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    font-size: 30px;\n\n    border-radius: 50%;\n\n    background-color: rgba(0, 0, 0, 0.7);\n  }\n\n  /* hide the image until it has been loaded */\n  img,\n  .icon {\n    opacity: 0;\n  }\n\n  &.loaded {\n    /* show img if not error otherwise show icon */\n    &:not(.error) {\n      img {\n        opacity: 1;\n      }\n    }\n\n    /* show icon if error */\n    &.error {\n      .type-icon {\n        opacity: 1;\n      }\n    }\n  }\n\n  &.clickable {\n    cursor: pointer;\n\n    &:hover {\n      img {\n        scale: 1.1;\n      }\n\n      /* show play icon */\n      .hover-icon {\n        opacity: 1;\n      }\n\n      /* if :has a hover-icon hide the type-cion */\n      .type-icon {\n        opacity: 0;\n      }\n    }\n  }\n\n  &.loading {\n    border: none;\n    border-color: transparent;\n  }\n`\n\nexport const Image = styled.img`\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  border-radius: var(--border-radius-m);\n  overflow: hidden;\n\n  /* ensures it always fills the parent */\n  display: block;\n  position: absolute;\n  inset: 0;\n\n  transition: scale 0.2s, opacity 0.2s;\n`\n"],"names":["Card","styled","Image"],"mappings":"qHAEaA,EAAOC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA6FdC,EAAQD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}
+{"version":3,"file":"Thumbnail.styled.cjs.js","sources":["../../../../../src/components/Thumbnail/Thumbnail.styled.ts"],"sourcesContent":["import styled from 'styled-components'\n\nexport const Card = styled.div`\n  position: relative;\n  width: 100%;\n  height: 52px;\n  aspect-ratio: 1.7;\n  overflow: hidden;\n  margin: auto;\n\n  background-color: var(--md-sys-color-surface-container-lowest);\n\n  transition: border-color 0.2s, background-color 0.2s;\n\n  &.border {\n    border: solid 2px var(--md-sys-color-outline-variant);\n  }\n\n  /* icon */\n  .icon {\n    position: absolute;\n    user-select: none;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    inset: 0;\n\n    transition: opacity 0.2s;\n  }\n\n  .type-icon {\n    color: var(--md-sys-color-outline);\n  }\n\n  .hover-icon {\n    inset: unset;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n    font-size: 30px;\n\n    border-radius: 50%;\n\n    background-color: rgba(0, 0, 0, 0.7);\n  }\n\n  /* hide the image until it has been loaded */\n  img,\n  .icon {\n    opacity: 0;\n  }\n\n  &.loaded {\n    /* show img if not error otherwise show icon */\n    &:not(.error) {\n      img {\n        opacity: 1;\n      }\n    }\n\n    /* show icon if error */\n    &.error {\n      .type-icon {\n        opacity: 1;\n      }\n    }\n  }\n\n  &.clickable {\n    cursor: pointer;\n\n    &:hover {\n      img {\n        scale: 1.1;\n      }\n\n      /* show play icon */\n      .hover-icon {\n        opacity: 1;\n      }\n\n      /* if :has a hover-icon hide the type-cion */\n      .type-icon {\n        opacity: 0;\n      }\n    }\n  }\n\n  &.loading {\n    border: none;\n    border-color: transparent;\n  }\n`\n\nexport const Image = styled.img`\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n  overflow: hidden;\n\n  /* ensures it always fills the parent */\n  display: block;\n  position: absolute;\n  inset: 0;\n\n  transition: scale 0.2s, opacity 0.2s;\n`\n"],"names":["Card","styled","Image"],"mappings":"qHAEaA,EAAOC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA4FdC,EAAQD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}