@ynput/ayon-frontend-shared 0.2.17 → 0.2.19

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

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const ayonReactComponents = require("@ynput/ayon-react-components");
+const styled = require("styled-components");
+const DragAndDropWrapper = styled.div`
+  height: 100%;
+
+  > input[type='file'] {
+    display: none;
+  }
+
+  /* hide input file type */
+  input[type='file'] {
+    display: none;
+  }
+`;
+const DropZones = styled.div`
+  z-index: 100;
+  position: absolute;
+  inset: 0;
+  top: -40px; /* hack to get the dropzone to show over whole panel header */
+  border-radius: var(--border-radius-l) var(--border-radius-l);
+  background-color: var(--md-sys-color-surface-container-lowest);
+
+  /* split the drop zones */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const DropZone = styled.div`
+  flex: 1;
+  height: 100%;
+  border-radius: var(--border-radius-l);
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--base-gap-large);
+  border: 2px dashed transparent;
+
+  user-select: none;
+
+  /* hide children by default */
+  opacity: 0.4;
+
+  .icon {
+    font-size: 40px;
+  }
+
+  /* when hovering over */
+  &.active {
+    border-color: var(--md-sys-color-outline);
+    background-color: var(--md-sys-color-surface-container-lowest-hover);
+
+    /* show children */
+    opacity: 1;
+  }
+`;
+const CancelButton = styled(ayonReactComponents.Button)`
+  position: absolute;
+  top: 4px;
+  right: 4px;
+`;
+const UploadingProgress = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--base-gap-large);
+  position: relative;
+  width: 50%;
+
+  .label {
+    color: var(--md-sys-color-outline);
+    top: 12px;
+    position: relative;
+  }
+`;
+const Progress = styled.div`
+  height: 8px;
+  position: absolute;
+  border-radius: 4px;
+  left: 0;
+
+  background-color: var(--md-sys-color-primary);
+
+  transition: right 0.2s;
+`;
+exports.CancelButton = CancelButton;
+exports.DragAndDropWrapper = DragAndDropWrapper;
+exports.DropZone = DropZone;
+exports.DropZones = DropZones;
+exports.Progress = Progress;
+exports.UploadingProgress = UploadingProgress;
+//# sourceMappingURL=EntityPanelUploader.styled.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EntityPanelUploader.styled.cjs.js","sources":["../../../../../src/components/EntityPanelUploader/EntityPanelUploader.styled.tsx"],"sourcesContent":["import { Button } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nexport const DragAndDropWrapper = styled.div`\n  height: 100%;\n\n  > input[type='file'] {\n    display: none;\n  }\n\n  /* hide input file type */\n  input[type='file'] {\n    display: none;\n  }\n`\n\nexport const DropZones = styled.div`\n  z-index: 100;\n  position: absolute;\n  inset: 0;\n  top: -40px; /* hack to get the dropzone to show over whole panel header */\n  border-radius: var(--border-radius-l) var(--border-radius-l);\n  background-color: var(--md-sys-color-surface-container-lowest);\n\n  /* split the drop zones */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`\n\nexport const DropZone = styled.div`\n  flex: 1;\n  height: 100%;\n  border-radius: var(--border-radius-l);\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: var(--base-gap-large);\n  border: 2px dashed transparent;\n\n  user-select: none;\n\n  /* hide children by default */\n  opacity: 0.4;\n\n  .icon {\n    font-size: 40px;\n  }\n\n  /* when hovering over */\n  &.active {\n    border-color: var(--md-sys-color-outline);\n    background-color: var(--md-sys-color-surface-container-lowest-hover);\n\n    /* show children */\n    opacity: 1;\n  }\n`\n\nexport const CancelButton = styled(Button)`\n  position: absolute;\n  top: 4px;\n  right: 4px;\n`\n\nexport const UploadingProgress = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--base-gap-large);\n  position: relative;\n  width: 50%;\n\n  .label {\n    color: var(--md-sys-color-outline);\n    top: 12px;\n    position: relative;\n  }\n`\n\nexport const Progress = styled.div`\n  height: 8px;\n  position: absolute;\n  border-radius: 4px;\n  left: 0;\n\n  background-color: var(--md-sys-color-primary);\n\n  transition: right 0.2s;\n`\n"],"names":["Button"],"mappings":";;;;AAGO,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAalC,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAczB,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+BlB,MAAA,eAAe,OAAOA,0BAAM;AAAA;AAAA;AAAA;AAAA;AAMlC,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAejC,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;;;;;"}

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

@@ -0,0 +1,95 @@
+import { Button } from "@ynput/ayon-react-components";
+import styled from "styled-components";
+const DragAndDropWrapper = styled.div`
+  height: 100%;
+
+  > input[type='file'] {
+    display: none;
+  }
+
+  /* hide input file type */
+  input[type='file'] {
+    display: none;
+  }
+`;
+const DropZones = styled.div`
+  z-index: 100;
+  position: absolute;
+  inset: 0;
+  top: -40px; /* hack to get the dropzone to show over whole panel header */
+  border-radius: var(--border-radius-l) var(--border-radius-l);
+  background-color: var(--md-sys-color-surface-container-lowest);
+
+  /* split the drop zones */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const DropZone = styled.div`
+  flex: 1;
+  height: 100%;
+  border-radius: var(--border-radius-l);
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--base-gap-large);
+  border: 2px dashed transparent;
+
+  user-select: none;
+
+  /* hide children by default */
+  opacity: 0.4;
+
+  .icon {
+    font-size: 40px;
+  }
+
+  /* when hovering over */
+  &.active {
+    border-color: var(--md-sys-color-outline);
+    background-color: var(--md-sys-color-surface-container-lowest-hover);
+
+    /* show children */
+    opacity: 1;
+  }
+`;
+const CancelButton = styled(Button)`
+  position: absolute;
+  top: 4px;
+  right: 4px;
+`;
+const UploadingProgress = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--base-gap-large);
+  position: relative;
+  width: 50%;
+
+  .label {
+    color: var(--md-sys-color-outline);
+    top: 12px;
+    position: relative;
+  }
+`;
+const Progress = styled.div`
+  height: 8px;
+  position: absolute;
+  border-radius: 4px;
+  left: 0;
+
+  background-color: var(--md-sys-color-primary);
+
+  transition: right 0.2s;
+`;
+export {
+  CancelButton,
+  DragAndDropWrapper,
+  DropZone,
+  DropZones,
+  Progress,
+  UploadingProgress
+};
+//# sourceMappingURL=EntityPanelUploader.styled.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EntityPanelUploader.styled.es.js","sources":["../../../../../src/components/EntityPanelUploader/EntityPanelUploader.styled.tsx"],"sourcesContent":["import { Button } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nexport const DragAndDropWrapper = styled.div`\n  height: 100%;\n\n  > input[type='file'] {\n    display: none;\n  }\n\n  /* hide input file type */\n  input[type='file'] {\n    display: none;\n  }\n`\n\nexport const DropZones = styled.div`\n  z-index: 100;\n  position: absolute;\n  inset: 0;\n  top: -40px; /* hack to get the dropzone to show over whole panel header */\n  border-radius: var(--border-radius-l) var(--border-radius-l);\n  background-color: var(--md-sys-color-surface-container-lowest);\n\n  /* split the drop zones */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`\n\nexport const DropZone = styled.div`\n  flex: 1;\n  height: 100%;\n  border-radius: var(--border-radius-l);\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: var(--base-gap-large);\n  border: 2px dashed transparent;\n\n  user-select: none;\n\n  /* hide children by default */\n  opacity: 0.4;\n\n  .icon {\n    font-size: 40px;\n  }\n\n  /* when hovering over */\n  &.active {\n    border-color: var(--md-sys-color-outline);\n    background-color: var(--md-sys-color-surface-container-lowest-hover);\n\n    /* show children */\n    opacity: 1;\n  }\n`\n\nexport const CancelButton = styled(Button)`\n  position: absolute;\n  top: 4px;\n  right: 4px;\n`\n\nexport const UploadingProgress = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--base-gap-large);\n  position: relative;\n  width: 50%;\n\n  .label {\n    color: var(--md-sys-color-outline);\n    top: 12px;\n    position: relative;\n  }\n`\n\nexport const Progress = styled.div`\n  height: 8px;\n  position: absolute;\n  border-radius: 4px;\n  left: 0;\n\n  background-color: var(--md-sys-color-primary);\n\n  transition: right 0.2s;\n`\n"],"names":[],"mappings":";;AAGO,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAalC,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAczB,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+BlB,MAAA,eAAe,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAMlC,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAejC,MAAM,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/shared/src/components/EntityPanelUploader/EntityPanelUploaderDialog.cjs.js

@@ -0,0 +1,76 @@
+"use strict";
+const jsxRuntime = require("../../../../_virtual/jsx-runtime.cjs.js");
+const ayonReactComponents = require("@ynput/ayon-react-components");
+const lodash = require("lodash");
+const React = require("react");
+const prefix = "review";
+const buildDefaultName = (file) => {
+  if (!file) return "";
+  const name = file.name.replace(/\.[^/.]+$/, "");
+  const camelCaseName = lodash.camelCase(name);
+  const pascalCaseName = lodash.upperFirst(camelCaseName);
+  return `${prefix}${pascalCaseName}`;
+};
+const EntityPanelUploaderDialog = ({
+  files,
+  isOpen,
+  onCancel,
+  onSubmit
+}) => {
+  const defaultProductName = buildDefaultName(files == null ? void 0 : files[0]);
+  const inputRef = React.useRef(null);
+  const hasSelectedRef = React.useRef(false);
+  const [product, setProduct] = React.useState(defaultProductName);
+  React.useEffect(() => {
+    setProduct(defaultProductName);
+    hasSelectedRef.current = false;
+  }, [defaultProductName]);
+  React.useEffect(() => {
+    if (isOpen && inputRef.current && product.startsWith(prefix) && !hasSelectedRef.current) {
+      inputRef.current.focus();
+      const selectionStart = prefix.length;
+      const selectionEnd = product.length;
+      inputRef.current.setSelectionRange(selectionStart, selectionEnd);
+      hasSelectedRef.current = true;
+    } else if (!isOpen) {
+      hasSelectedRef.current = false;
+    }
+  }, [isOpen, product]);
+  const handleSubmit = () => {
+    if (product.trim() && onSubmit) {
+      onSubmit(product.trim());
+    }
+  };
+  const handleCancel = () => {
+    setProduct(defaultProductName);
+    if (onCancel) {
+      onCancel();
+    }
+  };
+  const isValidProduct = product.trim().length > 0;
+  const footer = /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs("div", { style: { display: "flex", gap: "8px", justifyContent: "flex-end" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ayonReactComponents.Button, { variant: "text", onClick: handleCancel, children: "Cancel" }),
+    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ayonReactComponents.Button, { variant: "filled", onClick: handleSubmit, disabled: !isValidProduct, children: "Upload" })
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ayonReactComponents.Dialog, { isOpen, onClose: handleCancel, header: "Upload Entity", footer, size: "sm", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx("div", { style: { padding: "16px 0" }, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ayonReactComponents.FormRow, { label: "Product Name", children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+    ayonReactComponents.InputText,
+    {
+      ref: inputRef,
+      placeholder: "Enter product name...",
+      value: product,
+      onChange: (e) => setProduct(e.target.value),
+      autoFocus: true,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" && isValidProduct) {
+          e.preventDefault();
+          handleSubmit();
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          handleCancel();
+        }
+      }
+    }
+  ) }) }) });
+};
+module.exports = EntityPanelUploaderDialog;
+//# sourceMappingURL=EntityPanelUploaderDialog.cjs.js.map

package/dist/shared/src/components/EntityPanelUploader/EntityPanelUploaderDialog.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EntityPanelUploaderDialog.cjs.js","sources":["../../../../../src/components/EntityPanelUploader/EntityPanelUploaderDialog.tsx"],"sourcesContent":["// A dialog to ask the user to name their new upload uploaded version (naming the product)\n// by default we can take the file name\n\nimport { Dialog, InputText, Button, FormRow } from '@ynput/ayon-react-components'\nimport { camelCase, upperFirst } from 'lodash'\nimport { FC, useState, useEffect, useRef } from 'react'\n\nconst prefix = 'review'\nconst buildDefaultName = (file?: File | null) => {\n  // remove file extension\n  // convert to camelCase\n  // first letter to uppercase\n  // prefix with \"review\"\n  if (!file) return ''\n  const name = file.name.replace(/\\.[^/.]+$/, '') // remove file extension\n  const camelCaseName = camelCase(name)\n  const pascalCaseName = upperFirst(camelCaseName)\n  return `${prefix}${pascalCaseName}`\n}\n\ninterface EntityPanelUploaderDialogProps {\n  files: FileList | null // used to determine the default product name\n  isOpen: boolean\n  defaultProductName?: string\n  onCancel?: () => void\n  onSubmit?: (productName: string) => void\n}\n\nconst EntityPanelUploaderDialog: FC<EntityPanelUploaderDialogProps> = ({\n  files,\n  isOpen,\n  onCancel,\n  onSubmit,\n}) => {\n  // Build default product name from the first file\n  const defaultProductName = buildDefaultName(files?.[0])\n  const inputRef = useRef<HTMLInputElement>(null)\n  const hasSelectedRef = useRef(false)\n\n  const [product, setProduct] = useState(defaultProductName)\n\n  // Update state when defaultProductName changes\n  useEffect(() => {\n    setProduct(defaultProductName)\n    hasSelectedRef.current = false // Reset selection flag when product name changes\n  }, [defaultProductName])\n\n  // Select the filename part (excluding \"review\" prefix) when dialog opens - only once\n  useEffect(() => {\n    if (isOpen && inputRef.current && product.startsWith(prefix) && !hasSelectedRef.current) {\n      // Focus the input first\n      inputRef.current.focus()\n      // Then select just the filename part (after \"review\")\n      const selectionStart = prefix.length\n      const selectionEnd = product.length\n      inputRef.current.setSelectionRange(selectionStart, selectionEnd)\n      hasSelectedRef.current = true // Mark as selected to prevent re-selection\n    } else if (!isOpen) {\n      hasSelectedRef.current = false // Reset when dialog closes\n    }\n  }, [isOpen, product])\n\n  const handleSubmit = () => {\n    if (product.trim() && onSubmit) {\n      onSubmit(product.trim())\n    }\n  }\n\n  const handleCancel = () => {\n    setProduct(defaultProductName)\n    if (onCancel) {\n      onCancel()\n    }\n  }\n\n  const isValidProduct = product.trim().length > 0\n\n  const footer = (\n    <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>\n      <Button variant=\"text\" onClick={handleCancel}>\n        Cancel\n      </Button>\n      <Button variant=\"filled\" onClick={handleSubmit} disabled={!isValidProduct}>\n        Upload\n      </Button>\n    </div>\n  )\n\n  return (\n    <Dialog isOpen={isOpen} onClose={handleCancel} header=\"Upload Entity\" footer={footer} size=\"sm\">\n      <div style={{ padding: '16px 0' }}>\n        <FormRow label=\"Product Name\">\n          <InputText\n            ref={inputRef}\n            placeholder=\"Enter product name...\"\n            value={product}\n            onChange={(e) => setProduct(e.target.value)}\n            autoFocus\n            onKeyDown={(e) => {\n              if (e.key === 'Enter' && isValidProduct) {\n                e.preventDefault()\n                handleSubmit()\n              } else if (e.key === 'Escape') {\n                e.preventDefault()\n                handleCancel()\n              }\n            }}\n          />\n        </FormRow>\n      </div>\n    </Dialog>\n  )\n}\n\nexport default EntityPanelUploaderDialog\n"],"names":["camelCase","upperFirst","useRef","useState","useEffect","jsxs","jsx","Button","Dialog","FormRow","InputText"],"mappings":";;;;;AAOA,MAAM,SAAS;AACf,MAAM,mBAAmB,CAAC,SAAuB;AAK3C,MAAA,CAAC,KAAa,QAAA;AAClB,QAAM,OAAO,KAAK,KAAK,QAAQ,aAAa,EAAE;AACxC,QAAA,gBAAgBA,iBAAU,IAAI;AAC9B,QAAA,iBAAiBC,kBAAW,aAAa;AACxC,SAAA,GAAG,MAAM,GAAG,cAAc;AACnC;AAUA,MAAM,4BAAgE,CAAC;AAAA,EACrE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AAEJ,QAAM,qBAAqB,iBAAiB,+BAAQ,EAAE;AAChD,QAAA,WAAWC,aAAyB,IAAI;AACxC,QAAA,iBAAiBA,aAAO,KAAK;AAEnC,QAAM,CAAC,SAAS,UAAU,IAAIC,MAAAA,SAAS,kBAAkB;AAGzDC,QAAAA,UAAU,MAAM;AACd,eAAW,kBAAkB;AAC7B,mBAAe,UAAU;AAAA,EAAA,GACxB,CAAC,kBAAkB,CAAC;AAGvBA,QAAAA,UAAU,MAAM;AACV,QAAA,UAAU,SAAS,WAAW,QAAQ,WAAW,MAAM,KAAK,CAAC,eAAe,SAAS;AAEvF,eAAS,QAAQ,MAAM;AAEvB,YAAM,iBAAiB,OAAO;AAC9B,YAAM,eAAe,QAAQ;AACpB,eAAA,QAAQ,kBAAkB,gBAAgB,YAAY;AAC/D,qBAAe,UAAU;AAAA,IAAA,WAChB,CAAC,QAAQ;AAClB,qBAAe,UAAU;AAAA,IAAA;AAAA,EAC3B,GACC,CAAC,QAAQ,OAAO,CAAC;AAEpB,QAAM,eAAe,MAAM;AACrB,QAAA,QAAQ,KAAK,KAAK,UAAU;AACrB,eAAA,QAAQ,MAAM;AAAA,IAAA;AAAA,EAE3B;AAEA,QAAM,eAAe,MAAM;AACzB,eAAW,kBAAkB;AAC7B,QAAI,UAAU;AACH,eAAA;AAAA,IAAA;AAAA,EAEb;AAEA,QAAM,iBAAiB,QAAQ,KAAK,EAAE,SAAS;AAEzC,QAAA,SACHC,2BAAA,kBAAA,KAAA,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,KAAK,OAAO,gBAAgB,WAAA,GACzD,UAAA;AAAA,IAAAC,iDAACC,oBAAAA,QAAO,EAAA,SAAQ,QAAO,SAAS,cAAc,UAE9C,UAAA;AAAA,IACAD,2BAAAA,kBAAAA,IAACC,8BAAO,SAAQ,UAAS,SAAS,cAAc,UAAU,CAAC,gBAAgB,UAE3E,SAAA,CAAA;AAAA,EAAA,GACF;AAIA,SAAAD,iDAACE,oBAAAA,UAAO,QAAgB,SAAS,cAAc,QAAO,iBAAgB,QAAgB,MAAK,MACzF,2DAAC,OAAI,EAAA,OAAO,EAAE,SAAS,SAAA,GACrB,UAACF,2BAAA,kBAAA,IAAAG,oBAAA,SAAA,EAAQ,OAAM,gBACb,UAAAH,2BAAA,kBAAA;AAAA,IAACI,oBAAA;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,aAAY;AAAA,MACZ,OAAO;AAAA,MACP,UAAU,CAAC,MAAM,WAAW,EAAE,OAAO,KAAK;AAAA,MAC1C,WAAS;AAAA,MACT,WAAW,CAAC,MAAM;AACZ,YAAA,EAAE,QAAQ,WAAW,gBAAgB;AACvC,YAAE,eAAe;AACJ,uBAAA;AAAA,QAAA,WACJ,EAAE,QAAQ,UAAU;AAC7B,YAAE,eAAe;AACJ,uBAAA;AAAA,QAAA;AAAA,MACf;AAAA,IACF;AAAA,EAAA,EAEJ,CAAA,EACF,CAAA,GACF;AAEJ;;"}

package/dist/shared/src/components/EntityPanelUploader/EntityPanelUploaderDialog.es.js

@@ -0,0 +1,77 @@
+import { j as jsxRuntimeExports } from "../../../../_virtual/jsx-runtime.es.js";
+import { Dialog, FormRow, InputText, Button } from "@ynput/ayon-react-components";
+import { camelCase, upperFirst } from "lodash";
+import { useRef, useState, useEffect } from "react";
+const prefix = "review";
+const buildDefaultName = (file) => {
+  if (!file) return "";
+  const name = file.name.replace(/\.[^/.]+$/, "");
+  const camelCaseName = camelCase(name);
+  const pascalCaseName = upperFirst(camelCaseName);
+  return `${prefix}${pascalCaseName}`;
+};
+const EntityPanelUploaderDialog = ({
+  files,
+  isOpen,
+  onCancel,
+  onSubmit
+}) => {
+  const defaultProductName = buildDefaultName(files == null ? void 0 : files[0]);
+  const inputRef = useRef(null);
+  const hasSelectedRef = useRef(false);
+  const [product, setProduct] = useState(defaultProductName);
+  useEffect(() => {
+    setProduct(defaultProductName);
+    hasSelectedRef.current = false;
+  }, [defaultProductName]);
+  useEffect(() => {
+    if (isOpen && inputRef.current && product.startsWith(prefix) && !hasSelectedRef.current) {
+      inputRef.current.focus();
+      const selectionStart = prefix.length;
+      const selectionEnd = product.length;
+      inputRef.current.setSelectionRange(selectionStart, selectionEnd);
+      hasSelectedRef.current = true;
+    } else if (!isOpen) {
+      hasSelectedRef.current = false;
+    }
+  }, [isOpen, product]);
+  const handleSubmit = () => {
+    if (product.trim() && onSubmit) {
+      onSubmit(product.trim());
+    }
+  };
+  const handleCancel = () => {
+    setProduct(defaultProductName);
+    if (onCancel) {
+      onCancel();
+    }
+  };
+  const isValidProduct = product.trim().length > 0;
+  const footer = /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { display: "flex", gap: "8px", justifyContent: "flex-end" }, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "text", onClick: handleCancel, children: "Cancel" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "filled", onClick: handleSubmit, disabled: !isValidProduct, children: "Upload" })
+  ] });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Dialog, { isOpen, onClose: handleCancel, header: "Upload Entity", footer, size: "sm", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { padding: "16px 0" }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(FormRow, { label: "Product Name", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    InputText,
+    {
+      ref: inputRef,
+      placeholder: "Enter product name...",
+      value: product,
+      onChange: (e) => setProduct(e.target.value),
+      autoFocus: true,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" && isValidProduct) {
+          e.preventDefault();
+          handleSubmit();
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          handleCancel();
+        }
+      }
+    }
+  ) }) }) });
+};
+export {
+  EntityPanelUploaderDialog as default
+};
+//# sourceMappingURL=EntityPanelUploaderDialog.es.js.map

package/dist/shared/src/components/EntityPanelUploader/EntityPanelUploaderDialog.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EntityPanelUploaderDialog.es.js","sources":["../../../../../src/components/EntityPanelUploader/EntityPanelUploaderDialog.tsx"],"sourcesContent":["// A dialog to ask the user to name their new upload uploaded version (naming the product)\n// by default we can take the file name\n\nimport { Dialog, InputText, Button, FormRow } from '@ynput/ayon-react-components'\nimport { camelCase, upperFirst } from 'lodash'\nimport { FC, useState, useEffect, useRef } from 'react'\n\nconst prefix = 'review'\nconst buildDefaultName = (file?: File | null) => {\n  // remove file extension\n  // convert to camelCase\n  // first letter to uppercase\n  // prefix with \"review\"\n  if (!file) return ''\n  const name = file.name.replace(/\\.[^/.]+$/, '') // remove file extension\n  const camelCaseName = camelCase(name)\n  const pascalCaseName = upperFirst(camelCaseName)\n  return `${prefix}${pascalCaseName}`\n}\n\ninterface EntityPanelUploaderDialogProps {\n  files: FileList | null // used to determine the default product name\n  isOpen: boolean\n  defaultProductName?: string\n  onCancel?: () => void\n  onSubmit?: (productName: string) => void\n}\n\nconst EntityPanelUploaderDialog: FC<EntityPanelUploaderDialogProps> = ({\n  files,\n  isOpen,\n  onCancel,\n  onSubmit,\n}) => {\n  // Build default product name from the first file\n  const defaultProductName = buildDefaultName(files?.[0])\n  const inputRef = useRef<HTMLInputElement>(null)\n  const hasSelectedRef = useRef(false)\n\n  const [product, setProduct] = useState(defaultProductName)\n\n  // Update state when defaultProductName changes\n  useEffect(() => {\n    setProduct(defaultProductName)\n    hasSelectedRef.current = false // Reset selection flag when product name changes\n  }, [defaultProductName])\n\n  // Select the filename part (excluding \"review\" prefix) when dialog opens - only once\n  useEffect(() => {\n    if (isOpen && inputRef.current && product.startsWith(prefix) && !hasSelectedRef.current) {\n      // Focus the input first\n      inputRef.current.focus()\n      // Then select just the filename part (after \"review\")\n      const selectionStart = prefix.length\n      const selectionEnd = product.length\n      inputRef.current.setSelectionRange(selectionStart, selectionEnd)\n      hasSelectedRef.current = true // Mark as selected to prevent re-selection\n    } else if (!isOpen) {\n      hasSelectedRef.current = false // Reset when dialog closes\n    }\n  }, [isOpen, product])\n\n  const handleSubmit = () => {\n    if (product.trim() && onSubmit) {\n      onSubmit(product.trim())\n    }\n  }\n\n  const handleCancel = () => {\n    setProduct(defaultProductName)\n    if (onCancel) {\n      onCancel()\n    }\n  }\n\n  const isValidProduct = product.trim().length > 0\n\n  const footer = (\n    <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>\n      <Button variant=\"text\" onClick={handleCancel}>\n        Cancel\n      </Button>\n      <Button variant=\"filled\" onClick={handleSubmit} disabled={!isValidProduct}>\n        Upload\n      </Button>\n    </div>\n  )\n\n  return (\n    <Dialog isOpen={isOpen} onClose={handleCancel} header=\"Upload Entity\" footer={footer} size=\"sm\">\n      <div style={{ padding: '16px 0' }}>\n        <FormRow label=\"Product Name\">\n          <InputText\n            ref={inputRef}\n            placeholder=\"Enter product name...\"\n            value={product}\n            onChange={(e) => setProduct(e.target.value)}\n            autoFocus\n            onKeyDown={(e) => {\n              if (e.key === 'Enter' && isValidProduct) {\n                e.preventDefault()\n                handleSubmit()\n              } else if (e.key === 'Escape') {\n                e.preventDefault()\n                handleCancel()\n              }\n            }}\n          />\n        </FormRow>\n      </div>\n    </Dialog>\n  )\n}\n\nexport default EntityPanelUploaderDialog\n"],"names":["jsxs","jsx"],"mappings":";;;;AAOA,MAAM,SAAS;AACf,MAAM,mBAAmB,CAAC,SAAuB;AAK3C,MAAA,CAAC,KAAa,QAAA;AAClB,QAAM,OAAO,KAAK,KAAK,QAAQ,aAAa,EAAE;AACxC,QAAA,gBAAgB,UAAU,IAAI;AAC9B,QAAA,iBAAiB,WAAW,aAAa;AACxC,SAAA,GAAG,MAAM,GAAG,cAAc;AACnC;AAUA,MAAM,4BAAgE,CAAC;AAAA,EACrE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AAEJ,QAAM,qBAAqB,iBAAiB,+BAAQ,EAAE;AAChD,QAAA,WAAW,OAAyB,IAAI;AACxC,QAAA,iBAAiB,OAAO,KAAK;AAEnC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,kBAAkB;AAGzD,YAAU,MAAM;AACd,eAAW,kBAAkB;AAC7B,mBAAe,UAAU;AAAA,EAAA,GACxB,CAAC,kBAAkB,CAAC;AAGvB,YAAU,MAAM;AACV,QAAA,UAAU,SAAS,WAAW,QAAQ,WAAW,MAAM,KAAK,CAAC,eAAe,SAAS;AAEvF,eAAS,QAAQ,MAAM;AAEvB,YAAM,iBAAiB,OAAO;AAC9B,YAAM,eAAe,QAAQ;AACpB,eAAA,QAAQ,kBAAkB,gBAAgB,YAAY;AAC/D,qBAAe,UAAU;AAAA,IAAA,WAChB,CAAC,QAAQ;AAClB,qBAAe,UAAU;AAAA,IAAA;AAAA,EAC3B,GACC,CAAC,QAAQ,OAAO,CAAC;AAEpB,QAAM,eAAe,MAAM;AACrB,QAAA,QAAQ,KAAK,KAAK,UAAU;AACrB,eAAA,QAAQ,MAAM;AAAA,IAAA;AAAA,EAE3B;AAEA,QAAM,eAAe,MAAM;AACzB,eAAW,kBAAkB;AAC7B,QAAI,UAAU;AACH,eAAA;AAAA,IAAA;AAAA,EAEb;AAEA,QAAM,iBAAiB,QAAQ,KAAK,EAAE,SAAS;AAEzC,QAAA,SACHA,kCAAA,KAAA,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,KAAK,OAAO,gBAAgB,WAAA,GACzD,UAAA;AAAA,IAAAC,sCAAC,QAAO,EAAA,SAAQ,QAAO,SAAS,cAAc,UAE9C,UAAA;AAAA,IACAA,kCAAAA,IAAC,UAAO,SAAQ,UAAS,SAAS,cAAc,UAAU,CAAC,gBAAgB,UAE3E,SAAA,CAAA;AAAA,EAAA,GACF;AAIA,SAAAA,sCAAC,UAAO,QAAgB,SAAS,cAAc,QAAO,iBAAgB,QAAgB,MAAK,MACzF,gDAAC,OAAI,EAAA,OAAO,EAAE,SAAS,SAAA,GACrB,UAACA,kCAAA,IAAA,SAAA,EAAQ,OAAM,gBACb,UAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,aAAY;AAAA,MACZ,OAAO;AAAA,MACP,UAAU,CAAC,MAAM,WAAW,EAAE,OAAO,KAAK;AAAA,MAC1C,WAAS;AAAA,MACT,WAAW,CAAC,MAAM;AACZ,YAAA,EAAE,QAAQ,WAAW,gBAAgB;AACvC,YAAE,eAAe;AACJ,uBAAA;AAAA,QAAA,WACJ,EAAE,QAAQ,UAAU;AAC7B,YAAE,eAAe;AACJ,uBAAA;AAAA,QAAA;AAAA,MACf;AAAA,IACF;AAAA,EAAA,EAEJ,CAAA,EACF,CAAA,GACF;AAEJ;"}

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

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("../../../../_virtual/jsx-runtime.cjs.js");
+const ayonReactComponents = require("@ynput/ayon-react-components");
+const clsx = require("clsx");
+const React = require("react");
+const styled = require("styled-components");
+const PlayableIconStyled = styled.span`
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  z-index: 20;
+  --icon-size: 14px;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  pointer-events: none;
+
+  transition: opacity 200ms;
+
+  .icon {
+    font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 200, 'opsz' 24;
+    font-size: var(--icon-size);
+    z-index: 20;
+    position: relative;
+    color: var(--md-sys-color-outline-variant);
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 2px;
+    background: var(--md-sys-color-on-surface);
+    z-index: 0;
+    border-radius: 100%;
+  }
+`;
+const PlayableIcon = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(PlayableIconStyled, { className: clsx("playable", className), ...props, ref, children: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(ayonReactComponents.Icon, { icon: "play_circle" }) });
+  }
+);
+exports.PlayableIcon = PlayableIcon;
+//# sourceMappingURL=PlayableIcon.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlayableIcon.cjs.js","sources":["../../../../../src/components/PlayableIcon/PlayableIcon.tsx"],"sourcesContent":["import { Icon } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport { forwardRef } from 'react'\nimport styled from 'styled-components'\n\nconst PlayableIconStyled = styled.span`\n  position: absolute;\n  top: 3px;\n  right: 3px;\n  z-index: 20;\n  --icon-size: 14px;\n  width: var(--icon-size);\n  height: var(--icon-size);\n  pointer-events: none;\n\n  transition: opacity 200ms;\n\n  .icon {\n    font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 200, 'opsz' 24;\n    font-size: var(--icon-size);\n    z-index: 20;\n    position: relative;\n    color: var(--md-sys-color-outline-variant);\n  }\n\n  &::before {\n    content: '';\n    position: absolute;\n    inset: 2px;\n    background: var(--md-sys-color-on-surface);\n    z-index: 0;\n    border-radius: 100%;\n  }\n`\n\ninterface PlayableIconProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const PlayableIcon = forwardRef<HTMLDivElement, PlayableIconProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <PlayableIconStyled className={clsx('playable', className)} {...props} ref={ref}>\n        <Icon icon=\"play_circle\" />\n      </PlayableIconStyled>\n    )\n  },\n)\n"],"names":["forwardRef","jsx","Icon"],"mappings":";;;;;;;AAKA,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgC3B,MAAM,eAAeA,MAAA;AAAA,EAC1B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAAQ;AAChC,WACGC,2BAAAA,kBAAAA,IAAA,oBAAA,EAAmB,WAAW,KAAK,YAAY,SAAS,GAAI,GAAG,OAAO,KACrE,UAAAA,iDAACC,oBAAAA,MAAK,EAAA,MAAK,cAAc,CAAA,GAC3B;AAAA,EAAA;AAGN;;"}

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

@@ -0,0 +1,43 @@
+import { j as jsxRuntimeExports } from "../../../../_virtual/jsx-runtime.es.js";
+import { Icon } from "@ynput/ayon-react-components";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import styled from "styled-components";
+const PlayableIconStyled = styled.span`
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  z-index: 20;
+  --icon-size: 14px;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  pointer-events: none;
+
+  transition: opacity 200ms;
+
+  .icon {
+    font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 200, 'opsz' 24;
+    font-size: var(--icon-size);
+    z-index: 20;
+    position: relative;
+    color: var(--md-sys-color-outline-variant);
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 2px;
+    background: var(--md-sys-color-on-surface);
+    z-index: 0;
+    border-radius: 100%;
+  }
+`;
+const PlayableIcon = forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(PlayableIconStyled, { className: clsx("playable", className), ...props, ref, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { icon: "play_circle" }) });
+  }
+);
+export {
+  PlayableIcon
+};
+//# sourceMappingURL=PlayableIcon.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlayableIcon.es.js","sources":["../../../../../src/components/PlayableIcon/PlayableIcon.tsx"],"sourcesContent":["import { Icon } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\nimport { forwardRef } from 'react'\nimport styled from 'styled-components'\n\nconst PlayableIconStyled = styled.span`\n  position: absolute;\n  top: 3px;\n  right: 3px;\n  z-index: 20;\n  --icon-size: 14px;\n  width: var(--icon-size);\n  height: var(--icon-size);\n  pointer-events: none;\n\n  transition: opacity 200ms;\n\n  .icon {\n    font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 200, 'opsz' 24;\n    font-size: var(--icon-size);\n    z-index: 20;\n    position: relative;\n    color: var(--md-sys-color-outline-variant);\n  }\n\n  &::before {\n    content: '';\n    position: absolute;\n    inset: 2px;\n    background: var(--md-sys-color-on-surface);\n    z-index: 0;\n    border-radius: 100%;\n  }\n`\n\ninterface PlayableIconProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const PlayableIcon = forwardRef<HTMLDivElement, PlayableIconProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <PlayableIconStyled className={clsx('playable', className)} {...props} ref={ref}>\n        <Icon icon=\"play_circle\" />\n      </PlayableIconStyled>\n    )\n  },\n)\n"],"names":["jsx"],"mappings":";;;;;AAKA,MAAM,qBAAqB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgC3B,MAAM,eAAe;AAAA,EAC1B,CAAC,EAAE,WAAW,GAAG,MAAA,GAAS,QAAQ;AAChC,WACGA,kCAAAA,IAAA,oBAAA,EAAmB,WAAW,KAAK,YAAY,SAAS,GAAI,GAAG,OAAO,KACrE,UAAAA,sCAAC,MAAK,EAAA,MAAK,cAAc,CAAA,GAC3B;AAAA,EAAA;AAGN;"}

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

@@ -16,7 +16,7 @@ const clsx = require("clsx");
 const React = require("react");
 const styled = require("styled-components");
 const StyledButton = styled(ayonReactComponents.Button)`
-  background-color: unset;
+  background-color: unset !important;
   color: var(--md-sys-color-tertiary);
   transition: color 0.2s, background-color 0.2s, opacity 0.2s;
   border-radius: var(--border-radius-xl);

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

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

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

@@ -14,7 +14,7 @@ import clsx from "clsx";
 import { forwardRef } from "react";
 import styled from "styled-components";
 const StyledButton = styled(Button)`
-  background-color: unset;
+  background-color: unset !important;
   color: var(--md-sys-color-tertiary);
   transition: color 0.2s, background-color 0.2s, opacity 0.2s;
   border-radius: var(--border-radius-xl);

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

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

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

@@ -22,7 +22,7 @@ const PowerpackDialog = styled(ayonReactComponents.Dialog)`
   }
 
   .cancelButton {
-    background-color: unset !important;
+    background-color: unset;
   }
 `;
 const MainFeature = styled.div`

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

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

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

@@ -20,7 +20,7 @@ const PowerpackDialog = styled(Dialog)`
   }
 
   .cancelButton {
-    background-color: unset !important;
+    background-color: unset;
   }
 `;
 const MainFeature = styled.div`

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

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