@ynput/ayon-frontend-shared 0.1.0

package/dist/EmptyPlaceholderFlex.styled-C3tjIk5V.mjs

@@ -0,0 +1,121 @@
+import t from "styled-components";
+import { j as a } from "./jsx-runtime-Drh4NO5G.mjs";
+import { theme as p, Icon as c } from "@ynput/ayon-react-components";
+function d(o) {
+  var e, n, r = "";
+  if (typeof o == "string" || typeof o == "number") r += o;
+  else if (typeof o == "object") if (Array.isArray(o)) {
+    var s = o.length;
+    for (e = 0; e < s; e++) o[e] && (n = d(o[e])) && (r && (r += " "), r += n);
+  } else for (n in o) o[n] && (r && (r += " "), r += n);
+  return r;
+}
+function u() {
+  for (var o, e, n = 0, r = "", s = arguments.length; n < s; n++) (o = arguments[n]) && (e = d(o)) && (r && (r += " "), r += e);
+  return r;
+}
+const l = t.div`
+  position: absolute;
+  /* center */
+  top: 30%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+  user-select: none;
+
+  h3 {
+    text-align: center;
+    ${p.titleLarge}
+  }
+
+  .placeholder-icon {
+    font-size: 64px;
+    padding: 8px;
+    background-color: var(--md-sys-color-secondary-container);
+    border-radius: 100%;
+    color: var(--md-sys-color-on-secondary-container);
+  }
+
+  &.isError {
+    .placeholder-icon {
+      color: var(--md-sys-color-error-container);
+      background-color: var(--md-sys-color-on-error-container);
+    }
+
+    .error-message {
+      max-width: 700px;
+      color: var(--md-sys-color-error-on-container);
+      background-color: var(--md-sys-color-error-container);
+
+      padding: var(--padding-m) var(--padding-m);
+      border-radius: var(--border-radius-m);
+      user-select: text;
+      margin-top: -16px;
+    }
+  }
+`, m = ({
+  icon: o,
+  message: e,
+  error: n,
+  children: r,
+  pt: s,
+  ...i
+}) => n ? /* @__PURE__ */ a.jsxs(l, { className: "isError", ...i, children: [
+  /* @__PURE__ */ a.jsx(c, { icon: "error", className: "placeholder-icon" }),
+  /* @__PURE__ */ a.jsx("h3", { children: "Something went wrong." }),
+  /* @__PURE__ */ a.jsxs("span", { className: "error-message", ...s == null ? void 0 : s.error, children: [
+    "ERROR: ",
+    JSON.stringify(n)
+  ] }),
+  /* @__PURE__ */ a.jsx("span", { children: "This should not happen. Please send a screenshot to the Ynput team!" }),
+  r
+] }) : /* @__PURE__ */ a.jsxs(l, { ...i, children: [
+  /* @__PURE__ */ a.jsx(c, { icon: o || "info", className: "placeholder-icon" }),
+  /* @__PURE__ */ a.jsx("h3", { children: typeof e == "object" ? JSON.stringify(e) : e }),
+  r
+] }), g = t(m)`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex-grow: 1;
+  position: relative;
+  max-width: 100%;
+  overflow: hidden;
+  top: 0;
+  left: 0;
+  transform: none;
+  gap: 8px;
+  .icon {
+    font-size: 34px;
+  }
+  h3 {
+    font-size: 18px;
+  }
+`, y = t.div`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+
+  position: relative;
+  height: 100%;
+  border-radius: var(--border-radius-m);
+
+  background: var(--md-sys-color-surface-container-low);
+  .header {
+    margin: 0;
+    padding: 9.4px 8px;
+    text-transform: capitalize;
+  }
+`;
+export {
+  m as E,
+  l as P,
+  g as a,
+  y as b,
+  u as c
+};
+//# sourceMappingURL=EmptyPlaceholderFlex.styled-C3tjIk5V.mjs.map

package/dist/EmptyPlaceholderFlex.styled-C3tjIk5V.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyPlaceholderFlex.styled-C3tjIk5V.mjs","sources":["../node_modules/clsx/dist/clsx.mjs","../src/components/EmptyPlaceholder/EmptyPlaceholder.tsx","../src/components/EmptyPlaceholder/EmptyPlaceholderFlex.styled.ts"],"sourcesContent":["function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;","import React, { FC } from 'react'\nimport { Icon, theme } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nexport const Placeholder = styled.div`\n  position: absolute;\n  /* center */\n  top: 30%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 24px;\n  user-select: none;\n\n  h3 {\n    text-align: center;\n    ${theme.titleLarge}\n  }\n\n  .placeholder-icon {\n    font-size: 64px;\n    padding: 8px;\n    background-color: var(--md-sys-color-secondary-container);\n    border-radius: 100%;\n    color: var(--md-sys-color-on-secondary-container);\n  }\n\n  &.isError {\n    .placeholder-icon {\n      color: var(--md-sys-color-error-container);\n      background-color: var(--md-sys-color-on-error-container);\n    }\n\n    .error-message {\n      max-width: 700px;\n      color: var(--md-sys-color-error-on-container);\n      background-color: var(--md-sys-color-error-container);\n\n      padding: var(--padding-m) var(--padding-m);\n      border-radius: var(--border-radius-m);\n      user-select: text;\n      margin-top: -16px;\n    }\n  }\n`\n\nexport interface EmptyPlaceholderProps extends React.HTMLAttributes<HTMLDivElement> {\n  icon?: string\n  message?: string\n  error?: any\n  pt?: {\n    error?: React.HTMLAttributes<HTMLDivElement>\n  }\n}\n\nexport const EmptyPlaceholder: FC<EmptyPlaceholderProps> = ({\n  icon,\n  message,\n  error,\n  children,\n  pt,\n  ...props\n}) => {\n  if (error) {\n    return (\n      <Placeholder className={'isError'} {...props}>\n        <Icon icon=\"error\" className=\"placeholder-icon\" />\n        <h3>Something went wrong.</h3>\n        <span className=\"error-message\" {...pt?.error}>\n          ERROR: {JSON.stringify(error)}\n        </span>\n        <span>This should not happen. Please send a screenshot to the Ynput team!</span>\n        {children}\n      </Placeholder>\n    )\n  }\n\n  return (\n    <Placeholder {...props}>\n      <Icon icon={icon || 'info'} className=\"placeholder-icon\" />\n      <h3>{typeof message === 'object' ? JSON.stringify(message) : message}</h3>\n      {children}\n    </Placeholder>\n  )\n}\n","import styled from 'styled-components'\nimport { EmptyPlaceholder } from './EmptyPlaceholder'\n\nexport const EmptyPlaceholderFlex = styled(EmptyPlaceholder)`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex-grow: 1;\n  position: relative;\n  max-width: 100%;\n  overflow: hidden;\n  top: 0;\n  left: 0;\n  transform: none;\n  gap: 8px;\n  .icon {\n    font-size: 34px;\n  }\n  h3 {\n    font-size: 18px;\n  }\n`\nexport const EmptyPlaceholderFlexWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n\n  position: relative;\n  height: 100%;\n  border-radius: var(--border-radius-m);\n\n  background: var(--md-sys-color-surface-container-low);\n  .header {\n    margin: 0;\n    padding: 9.4px 8px;\n    text-transform: capitalize;\n  }\n`\n"],"names":["r","e","t","f","n","o","clsx","Placeholder","styled","theme","EmptyPlaceholder","icon","message","error","children","pt","props","jsxs","jsx","Icon","EmptyPlaceholderFlex","EmptyPlaceholderFlexWrapper"],"mappings":";;;AAAA,SAASA,EAAEC,GAAE;AAAC,MAAIC,GAAEC,GAAEC,IAAE;AAAG,MAAa,OAAOH,KAAjB,YAA8B,OAAOA,KAAjB,SAAmB,CAAAG,KAAGH;AAAA,WAAoB,OAAOA,KAAjB,SAAmB,KAAG,MAAM,QAAQA,CAAC,GAAE;AAAC,QAAII,IAAEJ,EAAE;AAAO,SAAIC,IAAE,GAAEA,IAAEG,GAAEH,IAAI,CAAAD,EAAEC,CAAC,MAAIC,IAAEH,EAAEC,EAAEC,CAAC,CAAC,OAAKE,MAAIA,KAAG,MAAKA,KAAGD;AAAA,EAAE,MAAM,MAAIA,KAAKF,EAAE,CAAAA,EAAEE,CAAC,MAAIC,MAAIA,KAAG,MAAKA,KAAGD;AAAG,SAAOC;AAAC;AAAQ,SAASE,IAAM;AAAC,WAAQL,GAAEC,GAAEC,IAAE,GAAEC,IAAE,IAAGC,IAAE,UAAU,QAAOF,IAAEE,GAAEF,IAAI,EAACF,IAAE,UAAUE,CAAC,OAAKD,IAAEF,EAAEC,CAAC,OAAKG,MAAIA,KAAG,MAAKA,KAAGF;AAAG,SAAOE;AAAC;ACIxW,MAAMG,IAAcC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAe5BC,EAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAuCTC,IAA8C,CAAC;AAAA,EAC1D,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,IAAAC;AAAA,EACA,GAAGC;AACL,MACMH,IAECI,gBAAAA,EAAAA,KAAAV,GAAA,EAAY,WAAW,WAAY,GAAGS,GACrC,UAAA;AAAA,EAAAE,gBAAAA,EAAA,IAACC,GAAK,EAAA,MAAK,SAAQ,WAAU,oBAAmB;AAAA,EAChDD,gBAAAA,EAAAA,IAAC,QAAG,UAAqB,wBAAA,CAAA;AAAA,yBACxB,QAAK,EAAA,WAAU,iBAAiB,GAAGH,KAAA,gBAAAA,EAAI,OAAO,UAAA;AAAA,IAAA;AAAA,IACrC,KAAK,UAAUF,CAAK;AAAA,EAAA,GAC9B;AAAA,EACAK,gBAAAA,EAAAA,IAAC,UAAK,UAAmE,sEAAA,CAAA;AAAA,EACxEJ;AAAA,GACH,IAKFG,gBAAAA,EAAA,KAACV,GAAa,EAAA,GAAGS,GACf,UAAA;AAAA,EAAAE,gBAAAA,EAAA,IAACC,GAAK,EAAA,MAAMR,KAAQ,QAAQ,WAAU,oBAAmB;AAAA,EACzDO,gBAAAA,EAAAA,IAAC,QAAI,UAAO,OAAAN,KAAY,WAAW,KAAK,UAAUA,CAAO,IAAIA,EAAQ,CAAA;AAAA,EACpEE;AAAA,GACH,GClFSM,IAAuBZ,EAAOE,CAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAmB9CW,IAA8Bb,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;","x_google_ignoreList":[0]}

package/dist/EmptyPlaceholderFlex.styled-D_9k5mMH.js

@@ -0,0 +1,78 @@
+"use strict";const c=require("styled-components"),t=require("./jsx-runtime-qcKc-DpB.js"),a=require("@ynput/ayon-react-components");function d(e){var o,n,r="";if(typeof e=="string"||typeof e=="number")r+=e;else if(typeof e=="object")if(Array.isArray(e)){var s=e.length;for(o=0;o<s;o++)e[o]&&(n=d(e[o]))&&(r&&(r+=" "),r+=n)}else for(n in e)e[n]&&(r&&(r+=" "),r+=n);return r}function p(){for(var e,o,n=0,r="",s=arguments.length;n<s;n++)(e=arguments[n])&&(o=d(e))&&(r&&(r+=" "),r+=o);return r}const i=c.div`
+  position: absolute;
+  /* center */
+  top: 30%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+  user-select: none;
+
+  h3 {
+    text-align: center;
+    ${a.theme.titleLarge}
+  }
+
+  .placeholder-icon {
+    font-size: 64px;
+    padding: 8px;
+    background-color: var(--md-sys-color-secondary-container);
+    border-radius: 100%;
+    color: var(--md-sys-color-on-secondary-container);
+  }
+
+  &.isError {
+    .placeholder-icon {
+      color: var(--md-sys-color-error-container);
+      background-color: var(--md-sys-color-on-error-container);
+    }
+
+    .error-message {
+      max-width: 700px;
+      color: var(--md-sys-color-error-on-container);
+      background-color: var(--md-sys-color-error-container);
+
+      padding: var(--padding-m) var(--padding-m);
+      border-radius: var(--border-radius-m);
+      user-select: text;
+      margin-top: -16px;
+    }
+  }
+`,x=({icon:e,message:o,error:n,children:r,pt:s,...l})=>n?t.jsxRuntimeExports.jsxs(i,{className:"isError",...l,children:[t.jsxRuntimeExports.jsx(a.Icon,{icon:"error",className:"placeholder-icon"}),t.jsxRuntimeExports.jsx("h3",{children:"Something went wrong."}),t.jsxRuntimeExports.jsxs("span",{className:"error-message",...s==null?void 0:s.error,children:["ERROR: ",JSON.stringify(n)]}),t.jsxRuntimeExports.jsx("span",{children:"This should not happen. Please send a screenshot to the Ynput team!"}),r]}):t.jsxRuntimeExports.jsxs(i,{...l,children:[t.jsxRuntimeExports.jsx(a.Icon,{icon:e||"info",className:"placeholder-icon"}),t.jsxRuntimeExports.jsx("h3",{children:typeof o=="object"?JSON.stringify(o):o}),r]}),m=c(x)`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex-grow: 1;
+  position: relative;
+  max-width: 100%;
+  overflow: hidden;
+  top: 0;
+  left: 0;
+  transform: none;
+  gap: 8px;
+  .icon {
+    font-size: 34px;
+  }
+  h3 {
+    font-size: 18px;
+  }
+`,u=c.div`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+
+  position: relative;
+  height: 100%;
+  border-radius: var(--border-radius-m);
+
+  background: var(--md-sys-color-surface-container-low);
+  .header {
+    margin: 0;
+    padding: 9.4px 8px;
+    text-transform: capitalize;
+  }
+`;exports.EmptyPlaceholder=x;exports.EmptyPlaceholderFlex=m;exports.EmptyPlaceholderFlexWrapper=u;exports.Placeholder=i;exports.clsx=p;
+//# sourceMappingURL=EmptyPlaceholderFlex.styled-D_9k5mMH.js.map

package/dist/EmptyPlaceholderFlex.styled-D_9k5mMH.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyPlaceholderFlex.styled-D_9k5mMH.js","sources":["../node_modules/clsx/dist/clsx.mjs","../src/components/EmptyPlaceholder/EmptyPlaceholder.tsx","../src/components/EmptyPlaceholder/EmptyPlaceholderFlex.styled.ts"],"sourcesContent":["function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;","import React, { FC } from 'react'\nimport { Icon, theme } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nexport const Placeholder = styled.div`\n  position: absolute;\n  /* center */\n  top: 30%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 24px;\n  user-select: none;\n\n  h3 {\n    text-align: center;\n    ${theme.titleLarge}\n  }\n\n  .placeholder-icon {\n    font-size: 64px;\n    padding: 8px;\n    background-color: var(--md-sys-color-secondary-container);\n    border-radius: 100%;\n    color: var(--md-sys-color-on-secondary-container);\n  }\n\n  &.isError {\n    .placeholder-icon {\n      color: var(--md-sys-color-error-container);\n      background-color: var(--md-sys-color-on-error-container);\n    }\n\n    .error-message {\n      max-width: 700px;\n      color: var(--md-sys-color-error-on-container);\n      background-color: var(--md-sys-color-error-container);\n\n      padding: var(--padding-m) var(--padding-m);\n      border-radius: var(--border-radius-m);\n      user-select: text;\n      margin-top: -16px;\n    }\n  }\n`\n\nexport interface EmptyPlaceholderProps extends React.HTMLAttributes<HTMLDivElement> {\n  icon?: string\n  message?: string\n  error?: any\n  pt?: {\n    error?: React.HTMLAttributes<HTMLDivElement>\n  }\n}\n\nexport const EmptyPlaceholder: FC<EmptyPlaceholderProps> = ({\n  icon,\n  message,\n  error,\n  children,\n  pt,\n  ...props\n}) => {\n  if (error) {\n    return (\n      <Placeholder className={'isError'} {...props}>\n        <Icon icon=\"error\" className=\"placeholder-icon\" />\n        <h3>Something went wrong.</h3>\n        <span className=\"error-message\" {...pt?.error}>\n          ERROR: {JSON.stringify(error)}\n        </span>\n        <span>This should not happen. Please send a screenshot to the Ynput team!</span>\n        {children}\n      </Placeholder>\n    )\n  }\n\n  return (\n    <Placeholder {...props}>\n      <Icon icon={icon || 'info'} className=\"placeholder-icon\" />\n      <h3>{typeof message === 'object' ? JSON.stringify(message) : message}</h3>\n      {children}\n    </Placeholder>\n  )\n}\n","import styled from 'styled-components'\nimport { EmptyPlaceholder } from './EmptyPlaceholder'\n\nexport const EmptyPlaceholderFlex = styled(EmptyPlaceholder)`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex-grow: 1;\n  position: relative;\n  max-width: 100%;\n  overflow: hidden;\n  top: 0;\n  left: 0;\n  transform: none;\n  gap: 8px;\n  .icon {\n    font-size: 34px;\n  }\n  h3 {\n    font-size: 18px;\n  }\n`\nexport const EmptyPlaceholderFlexWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n\n  position: relative;\n  height: 100%;\n  border-radius: var(--border-radius-m);\n\n  background: var(--md-sys-color-surface-container-low);\n  .header {\n    margin: 0;\n    padding: 9.4px 8px;\n    text-transform: capitalize;\n  }\n`\n"],"names":["r","t","f","n","o","clsx","Placeholder","styled","theme","EmptyPlaceholder","icon","message","error","children","pt","props","jsxs","jsx","Icon","EmptyPlaceholderFlex","EmptyPlaceholderFlexWrapper"],"mappings":"mIAAA,SAASA,EAAE,EAAE,CAAC,IAAIC,EAAEC,EAAEC,EAAE,GAAG,GAAa,OAAO,GAAjB,UAA8B,OAAO,GAAjB,SAAmBA,GAAG,UAAoB,OAAO,GAAjB,SAAmB,GAAG,MAAM,QAAQ,CAAC,EAAE,CAAC,IAAIC,EAAE,EAAE,OAAO,IAAIH,EAAE,EAAEA,EAAEG,EAAEH,IAAI,EAAEA,CAAC,IAAIC,EAAEF,EAAE,EAAEC,CAAC,CAAC,KAAKE,IAAIA,GAAG,KAAKA,GAAGD,EAAE,KAAM,KAAIA,KAAK,EAAE,EAAEA,CAAC,IAAIC,IAAIA,GAAG,KAAKA,GAAGD,GAAG,OAAOC,CAAC,CAAQ,SAASE,GAAM,CAAC,QAAQ,EAAEJ,EAAEC,EAAE,EAAEC,EAAE,GAAGC,EAAE,UAAU,OAAOF,EAAEE,EAAEF,KAAK,EAAE,UAAUA,CAAC,KAAKD,EAAED,EAAE,CAAC,KAAKG,IAAIA,GAAG,KAAKA,GAAGF,GAAG,OAAOE,CAAC,CCIxW,MAAMG,EAAcC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAe5BC,QAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAuCTC,EAA8C,CAAC,CAC1D,KAAAC,EACA,QAAAC,EACA,MAAAC,EACA,SAAAC,EACA,GAAAC,EACA,GAAGC,CACL,IACMH,EAECI,EAAAA,kBAAAA,KAAAV,EAAA,CAAY,UAAW,UAAY,GAAGS,EACrC,SAAA,CAAAE,EAAA,kBAAA,IAACC,EAAK,KAAA,CAAA,KAAK,QAAQ,UAAU,mBAAmB,EAChDD,EAAAA,kBAAAA,IAAC,MAAG,SAAqB,uBAAA,CAAA,2BACxB,OAAK,CAAA,UAAU,gBAAiB,GAAGH,GAAA,YAAAA,EAAI,MAAO,SAAA,CAAA,UACrC,KAAK,UAAUF,CAAK,CAAA,EAC9B,EACAK,EAAAA,kBAAAA,IAAC,QAAK,SAAmE,qEAAA,CAAA,EACxEJ,CAAA,EACH,EAKFG,EAAA,kBAAA,KAACV,EAAa,CAAA,GAAGS,EACf,SAAA,CAAAE,EAAA,kBAAA,IAACC,EAAK,KAAA,CAAA,KAAMR,GAAQ,OAAQ,UAAU,mBAAmB,EACzDO,EAAAA,kBAAAA,IAAC,MAAI,SAAO,OAAAN,GAAY,SAAW,KAAK,UAAUA,CAAO,EAAIA,CAAQ,CAAA,EACpEE,CAAA,EACH,EClFSM,EAAuBZ,EAAOE,CAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAmB9CW,EAA8Bb,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","x_google_ignoreList":[0]}

package/dist/ThumbnailSimple-DbSmXCNa.js

@@ -0,0 +1,34 @@
+"use strict";const n=require("./jsx-runtime-qcKc-DpB.js"),o=require("@ynput/ayon-react-components"),y=require("./EmptyPlaceholderFlex.styled-D_9k5mMH.js"),a=require("styled-components"),$=({name:s,fullName:e,imageKey:t,...i})=>s?n.jsxRuntimeExports.jsx(o.UserImage,{name:s,fullName:e,src:`/api/users/${s}/avatar?key=${t||""}`,...i}):n.jsxRuntimeExports.jsx(o.UserImage,{name:"",className:y.clsx(i.className,"loading"),...i}),f=a.div`
+  position: relative;
+  width: 100%;
+  max-width: 500px;
+  aspect-ratio: 1.77;
+  overflow: hidden;
+  border-radius: 3px;
+  margin: auto;
+  max-width: 250px;
+  background-color: var(--md-sys-color-surface-container-lowest);
+
+  /* icon */
+  span {
+    position: absolute;
+    font-size: 4rem;
+    user-select: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    inset: 0;
+    background-color: hsl(220 20% 8%);
+    color: var(--md-sys-color-outline);
+  }
+`,E=a.img`
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+
+  /* ensures it always fills the parent */
+  display: block;
+  position: absolute;
+  inset: 0;
+`,w=({projectName:s,entityType:e,entityId:t,icon:i,entityUpdatedAt:l,isLoading:c,className:u,disabled:m,src:r,onLoad:d,onError:x,iconOnly:p,...h})=>{const g=s&&`/api/projects/${s}/${e}s/${t}/thumbnail`,b=`?updatedAt=${l}`,j=["product"].includes(e);return n.jsxRuntimeExports.jsxs(f,{className:u+" thumbnail",...h,children:[!c&&!m&&n.jsxRuntimeExports.jsx(o.Icon,{icon:i||"image"}),(e&&!(j||!t)||r)&&!p&&n.jsxRuntimeExports.jsx(E,{alt:`Entity thumbnail ${t}`,src:r||`${g}${b}`,onLoad:d,onError:x})]})};exports.ThumbnailSimple=w;exports.UserImage=$;
+//# sourceMappingURL=ThumbnailSimple-DbSmXCNa.js.map

package/dist/ThumbnailSimple-DbSmXCNa.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThumbnailSimple-DbSmXCNa.js","sources":["../src/components/UserImage/UserImage.tsx","../src/components/ThumbnailSimple/ThumbnailSimple.tsx"],"sourcesContent":["import React from 'react'\nimport { UserImage as UserImageArc } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\n\ninterface UserImageProps {\n  name: string\n  fullName?: string\n  imageKey?: string\n  className?: string\n  size?: number\n  [key: string]: any // For any other props that might be passed\n}\n\n// wraps the ARC UserImage component to use new user image api\nexport const UserImage: React.FC<UserImageProps> = ({ name, fullName, imageKey, ...props }) => {\n  if (!name) return <UserImageArc name=\"\" className={clsx(props.className, 'loading')} {...props} />\n  return (\n    <UserImageArc\n      name={name}\n      fullName={fullName}\n      src={`/api/users/${name}/avatar?key=${imageKey || ''}`}\n      {...props}\n    />\n  )\n}\n","import React from 'react'\nimport styled from 'styled-components'\nimport { Icon } from '@ynput/ayon-react-components'\n\nexport interface ThumbnailSimpleProps extends React.HTMLAttributes<HTMLDivElement> {\n  projectName: string\n  entityType: string\n  entityId: string\n  icon?: string\n  entityUpdatedAt: string | number\n  isLoading?: boolean\n  disabled?: boolean\n  src?: string\n  onLoad?: React.ReactEventHandler<HTMLImageElement>\n  onError?: React.ReactEventHandler<HTMLImageElement>\n  iconOnly?: boolean\n}\n\nconst ThumbnailStyled = styled.div`\n  position: relative;\n  width: 100%;\n  max-width: 500px;\n  aspect-ratio: 1.77;\n  overflow: hidden;\n  border-radius: 3px;\n  margin: auto;\n  max-width: 250px;\n  background-color: var(--md-sys-color-surface-container-lowest);\n\n  /* icon */\n  span {\n    position: absolute;\n    font-size: 4rem;\n    user-select: none;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    inset: 0;\n    background-color: hsl(220 20% 8%);\n    color: var(--md-sys-color-outline);\n  }\n`\n\nconst ImageStyled = styled.img`\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n\n  /* ensures it always fills the parent */\n  display: block;\n  position: absolute;\n  inset: 0;\n`\n\nexport const ThumbnailSimple: React.FC<ThumbnailSimpleProps> = ({\n  projectName,\n  entityType,\n  entityId,\n  icon,\n  entityUpdatedAt,\n  isLoading,\n  className,\n  disabled,\n  src,\n  onLoad,\n  onError,\n  iconOnly,\n  ...props\n}) => {\n  const url = projectName && `/api/projects/${projectName}/${entityType}s/${entityId}/thumbnail`\n  const queryArgs = `?updatedAt=${entityUpdatedAt}`\n  const isWrongEntity = ['product'].includes(entityType)\n\n  return (\n    <ThumbnailStyled className={className + ' thumbnail'} {...props}>\n      {!isLoading && !disabled && <Icon icon={icon || 'image'} />}\n      {((entityType && !(isWrongEntity || !entityId)) || src) && !iconOnly && (\n        <ImageStyled\n          alt={`Entity thumbnail ${entityId}`}\n          src={src || `${url}${queryArgs}`}\n          onLoad={onLoad}\n          onError={onError}\n        />\n      )}\n    </ThumbnailStyled>\n  )\n}\n"],"names":["UserImage","name","fullName","imageKey","props","jsx","UserImageArc","clsx","ThumbnailStyled","styled","ImageStyled","ThumbnailSimple","projectName","entityType","entityId","icon","entityUpdatedAt","isLoading","className","disabled","src","onLoad","onError","iconOnly","url","queryArgs","isWrongEntity","Icon"],"mappings":"0LAcaA,EAAsC,CAAC,CAAE,KAAAC,EAAM,SAAAC,EAAU,SAAAC,EAAU,GAAGC,KAC5EH,EAEHI,EAAA,kBAAA,IAACC,EAAA,UAAA,CACC,KAAAL,EACA,SAAAC,EACA,IAAK,cAAcD,CAAI,eAAeE,GAAY,EAAE,GACnD,GAAGC,CAAA,CACN,EAPgBC,EAAAA,kBAAAA,IAACC,EAAAA,WAAa,KAAK,GAAG,UAAWC,EAAA,KAAKH,EAAM,UAAW,SAAS,EAAI,GAAGA,CAAO,CAAA,ECG5FI,EAAkBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAyBzBC,EAAcD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWdE,EAAkD,CAAC,CAC9D,YAAAC,EACA,WAAAC,EACA,SAAAC,EACA,KAAAC,EACA,gBAAAC,EACA,UAAAC,EACA,UAAAC,EACA,SAAAC,EACA,IAAAC,EACA,OAAAC,EACA,QAAAC,EACA,SAAAC,EACA,GAAGnB,CACL,IAAM,CACJ,MAAMoB,EAAMZ,GAAe,iBAAiBA,CAAW,IAAIC,CAAU,KAAKC,CAAQ,aAC5EW,EAAY,cAAcT,CAAe,GACzCU,EAAgB,CAAC,SAAS,EAAE,SAASb,CAAU,EAErD,gCACGL,EAAgB,CAAA,UAAWU,EAAY,aAAe,GAAGd,EACvD,SAAA,CAAA,CAACa,GAAa,CAACE,2BAAaQ,EAAK,KAAA,CAAA,KAAMZ,GAAQ,QAAS,GACtDF,GAAc,EAAEa,GAAiB,CAACZ,IAAcM,IAAQ,CAACG,GAC1DlB,EAAA,kBAAA,IAACK,EAAA,CACC,IAAK,oBAAoBI,CAAQ,GACjC,IAAKM,GAAO,GAAGI,CAAG,GAAGC,CAAS,GAC9B,OAAAJ,EACA,QAAAC,CAAA,CAAA,CACF,EAEJ,CAEJ"}

package/dist/ThumbnailSimple-DotCInch.mjs

@@ -0,0 +1,78 @@
+import { j as e } from "./jsx-runtime-Drh4NO5G.mjs";
+import { UserImage as r, Icon as $ } from "@ynput/ayon-react-components";
+import { c as j } from "./EmptyPlaceholderFlex.styled-C3tjIk5V.mjs";
+import n from "styled-components";
+const I = ({ name: s, fullName: t, imageKey: o, ...a }) => s ? /* @__PURE__ */ e.jsx(
+  r,
+  {
+    name: s,
+    fullName: t,
+    src: `/api/users/${s}/avatar?key=${o || ""}`,
+    ...a
+  }
+) : /* @__PURE__ */ e.jsx(r, { name: "", className: j(a.className, "loading"), ...a }), w = n.div`
+  position: relative;
+  width: 100%;
+  max-width: 500px;
+  aspect-ratio: 1.77;
+  overflow: hidden;
+  border-radius: 3px;
+  margin: auto;
+  max-width: 250px;
+  background-color: var(--md-sys-color-surface-container-lowest);
+
+  /* icon */
+  span {
+    position: absolute;
+    font-size: 4rem;
+    user-select: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    inset: 0;
+    background-color: hsl(220 20% 8%);
+    color: var(--md-sys-color-outline);
+  }
+`, y = n.img`
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+
+  /* ensures it always fills the parent */
+  display: block;
+  position: absolute;
+  inset: 0;
+`, S = ({
+  projectName: s,
+  entityType: t,
+  entityId: o,
+  icon: a,
+  entityUpdatedAt: l,
+  isLoading: c,
+  className: m,
+  disabled: u,
+  src: i,
+  onLoad: d,
+  onError: p,
+  iconOnly: h,
+  ...x
+}) => {
+  const g = s && `/api/projects/${s}/${t}s/${o}/thumbnail`, b = `?updatedAt=${l}`, f = ["product"].includes(t);
+  return /* @__PURE__ */ e.jsxs(w, { className: m + " thumbnail", ...x, children: [
+    !c && !u && /* @__PURE__ */ e.jsx($, { icon: a || "image" }),
+    (t && !(f || !o) || i) && !h && /* @__PURE__ */ e.jsx(
+      y,
+      {
+        alt: `Entity thumbnail ${o}`,
+        src: i || `${g}${b}`,
+        onLoad: d,
+        onError: p
+      }
+    )
+  ] });
+};
+export {
+  S as T,
+  I as U
+};
+//# sourceMappingURL=ThumbnailSimple-DotCInch.mjs.map

package/dist/ThumbnailSimple-DotCInch.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThumbnailSimple-DotCInch.mjs","sources":["../src/components/UserImage/UserImage.tsx","../src/components/ThumbnailSimple/ThumbnailSimple.tsx"],"sourcesContent":["import React from 'react'\nimport { UserImage as UserImageArc } from '@ynput/ayon-react-components'\nimport clsx from 'clsx'\n\ninterface UserImageProps {\n  name: string\n  fullName?: string\n  imageKey?: string\n  className?: string\n  size?: number\n  [key: string]: any // For any other props that might be passed\n}\n\n// wraps the ARC UserImage component to use new user image api\nexport const UserImage: React.FC<UserImageProps> = ({ name, fullName, imageKey, ...props }) => {\n  if (!name) return <UserImageArc name=\"\" className={clsx(props.className, 'loading')} {...props} />\n  return (\n    <UserImageArc\n      name={name}\n      fullName={fullName}\n      src={`/api/users/${name}/avatar?key=${imageKey || ''}`}\n      {...props}\n    />\n  )\n}\n","import React from 'react'\nimport styled from 'styled-components'\nimport { Icon } from '@ynput/ayon-react-components'\n\nexport interface ThumbnailSimpleProps extends React.HTMLAttributes<HTMLDivElement> {\n  projectName: string\n  entityType: string\n  entityId: string\n  icon?: string\n  entityUpdatedAt: string | number\n  isLoading?: boolean\n  disabled?: boolean\n  src?: string\n  onLoad?: React.ReactEventHandler<HTMLImageElement>\n  onError?: React.ReactEventHandler<HTMLImageElement>\n  iconOnly?: boolean\n}\n\nconst ThumbnailStyled = styled.div`\n  position: relative;\n  width: 100%;\n  max-width: 500px;\n  aspect-ratio: 1.77;\n  overflow: hidden;\n  border-radius: 3px;\n  margin: auto;\n  max-width: 250px;\n  background-color: var(--md-sys-color-surface-container-lowest);\n\n  /* icon */\n  span {\n    position: absolute;\n    font-size: 4rem;\n    user-select: none;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    inset: 0;\n    background-color: hsl(220 20% 8%);\n    color: var(--md-sys-color-outline);\n  }\n`\n\nconst ImageStyled = styled.img`\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n\n  /* ensures it always fills the parent */\n  display: block;\n  position: absolute;\n  inset: 0;\n`\n\nexport const ThumbnailSimple: React.FC<ThumbnailSimpleProps> = ({\n  projectName,\n  entityType,\n  entityId,\n  icon,\n  entityUpdatedAt,\n  isLoading,\n  className,\n  disabled,\n  src,\n  onLoad,\n  onError,\n  iconOnly,\n  ...props\n}) => {\n  const url = projectName && `/api/projects/${projectName}/${entityType}s/${entityId}/thumbnail`\n  const queryArgs = `?updatedAt=${entityUpdatedAt}`\n  const isWrongEntity = ['product'].includes(entityType)\n\n  return (\n    <ThumbnailStyled className={className + ' thumbnail'} {...props}>\n      {!isLoading && !disabled && <Icon icon={icon || 'image'} />}\n      {((entityType && !(isWrongEntity || !entityId)) || src) && !iconOnly && (\n        <ImageStyled\n          alt={`Entity thumbnail ${entityId}`}\n          src={src || `${url}${queryArgs}`}\n          onLoad={onLoad}\n          onError={onError}\n        />\n      )}\n    </ThumbnailStyled>\n  )\n}\n"],"names":["UserImage","name","fullName","imageKey","props","jsx","UserImageArc","clsx","ThumbnailStyled","styled","ImageStyled","ThumbnailSimple","projectName","entityType","entityId","icon","entityUpdatedAt","isLoading","className","disabled","src","onLoad","onError","iconOnly","url","queryArgs","isWrongEntity","Icon"],"mappings":";;;;AAca,MAAAA,IAAsC,CAAC,EAAE,MAAAC,GAAM,UAAAC,GAAU,UAAAC,GAAU,GAAGC,QAC5EH,IAEHI,gBAAAA,EAAA;AAAA,EAACC;AAAAA,EAAA;AAAA,IACC,MAAAL;AAAA,IACA,UAAAC;AAAA,IACA,KAAK,cAAcD,CAAI,eAAeE,KAAY,EAAE;AAAA,IACnD,GAAGC;AAAA,EAAA;AACN,IAPgBC,gBAAAA,EAAAA,IAACC,KAAa,MAAK,IAAG,WAAWC,EAAKH,EAAM,WAAW,SAAS,GAAI,GAAGA,EAAO,CAAA,GCG5FI,IAAkBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAyBzBC,IAAcD,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWdE,IAAkD,CAAC;AAAA,EAC9D,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,KAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGnB;AACL,MAAM;AACJ,QAAMoB,IAAMZ,KAAe,iBAAiBA,CAAW,IAAIC,CAAU,KAAKC,CAAQ,cAC5EW,IAAY,cAAcT,CAAe,IACzCU,IAAgB,CAAC,SAAS,EAAE,SAASb,CAAU;AAErD,gCACGL,GAAgB,EAAA,WAAWU,IAAY,cAAe,GAAGd,GACvD,UAAA;AAAA,IAAA,CAACa,KAAa,CAACE,2BAAaQ,GAAK,EAAA,MAAMZ,KAAQ,SAAS;AAAA,KACtDF,KAAc,EAAEa,KAAiB,CAACZ,MAAcM,MAAQ,CAACG,KAC1DlB,gBAAAA,EAAA;AAAA,MAACK;AAAA,MAAA;AAAA,QACC,KAAK,oBAAoBI,CAAQ;AAAA,QACjC,KAAKM,KAAO,GAAGI,CAAG,GAAGC,CAAS;AAAA,QAC9B,QAAAJ;AAAA,QACA,SAAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GAEJ;AAEJ;"}

package/dist/ayon-frontend-shared.css

@@ -0,0 +1 @@
+.p-contextmenu.p-component{min-width:12.5rem;width:unset;padding:0;z-index:4000!important;background-color:var(--md-sys-color-surface-container-lowest);border-color:var(--md-sys-color-outline-variant)}.p-contextmenu.p-component .p-submenu-list{padding:0}.p-contextmenu.p-component .p-menuitem.p-menuitem-active>.p-menuitem-link.p-menuitem-icon,.p-contextmenu.p-component .p-menuitem.p-menuitem-active>.p-menuitem-link.p-menuitem-text{color:inherit}.p-contextmenu.p-component .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon,.p-contextmenu.p-component .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text{color:inherit}.p-contextmenu.p-component .p-menuitem-link:not(.p-disabled):hover{background:inherit}.p-contextmenu.p-component .p-menuitem.p-menuitem-active>.p-menuitem-link{background-color:var(--md-sys-color-surface-container-lowest-hover)}.p-contextmenu.p-component .p-menuitem.p-menuitem-active>.p-menuitem-link.p-disabled:not(.danger){background-color:var(--md-sys-color-surface-container-lowest)}.p-contextmenu.p-component .p-menuitem.p-menuitem-active>.p-menuitem-link.save{background-color:var(--md-sys-color-primary-hover)}.p-contextmenu.p-component .p-menuitem.p-menuitem-active>.p-menuitem-link.save span{color:var(--md-sys-color-on-primary)}.p-contextmenu.p-component .p-menuitem>.p-menuitem-link{padding-right:10px}.p-contextmenu.p-component .p-menuitem>.p-menuitem-link,.p-contextmenu.p-component .p-menuitem>.p-menuitem-link .icon{color:var(--md-sys-color-on-surface)}.p-contextmenu.p-component .p-menuitem>.p-menuitem-link.p-disabled{opacity:.4;color:var(--md-sys-color-on-surface-variant)}.p-contextmenu.p-component .p-menuitem>.p-menuitem-link.danger{background-color:var(--md-sys-color-error-container)}.p-contextmenu.p-component .p-menuitem>.p-menuitem-link.danger span{color:var(--md-sys-color-on-error-container)}.p-contextmenu.p-component .p-menuitem>.p-menuitem-link.danger:hover{background-color:var(--md-sys-color-error-container-hover)}.p-contextmenu.p-component .p-menuitem>.p-menuitem-link.danger:active{background-color:var(--md-sys-color-error-container-active)}.p-contextmenu.p-component .p-menuitem>.p-menuitem-link.save{background-color:var(--md-sys-color-primary)}.p-contextmenu.p-component .p-menuitem>.p-menuitem-link.save,.p-contextmenu.p-component .p-menuitem>.p-menuitem-link.save span{color:var(--md-sys-color-on-primary)}.p-contextmenu.p-component .p-menuitem-shortcut{margin-left:auto;padding-left:32px}@media (prefers-color-scheme: dark){.w-tc-editor{--color-fg-default: #c9d1d9;--color-canvas-subtle: #161b22;--color-prettylights-syntax-comment: #8b949e;--color-prettylights-syntax-entity-tag: #7ee787;--color-prettylights-syntax-entity: #d2a8ff;--color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;--color-prettylights-syntax-constant: #79c0ff;--color-prettylights-syntax-string: #a5d6ff;--color-prettylights-syntax-keyword: #ff7b72;--color-prettylights-syntax-markup-bold: #c9d1d9}}@media (prefers-color-scheme: light){.w-tc-editor{--color-fg-default: #24292f;--color-canvas-subtle: #f6f8fa;--color-prettylights-syntax-comment: #6e7781;--color-prettylights-syntax-entity-tag: #116329;--color-prettylights-syntax-entity: #8250df;--color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;--color-prettylights-syntax-constant: #0550ae;--color-prettylights-syntax-string: #0a3069;--color-prettylights-syntax-keyword: #cf222e;--color-prettylights-syntax-markup-bold: #24292f}}.w-tc-editor[data-color-mode*=dark],[data-color-mode*=dark] .w-tc-editor,[data-color-mode*=dark] .w-tc-editor-var,body[data-color-mode*=dark]{--color-fg-default: #c9d1d9;--color-canvas-subtle: #161b22;--color-prettylights-syntax-comment: #8b949e;--color-prettylights-syntax-entity-tag: #7ee787;--color-prettylights-syntax-entity: #d2a8ff;--color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;--color-prettylights-syntax-constant: #79c0ff;--color-prettylights-syntax-string: #a5d6ff;--color-prettylights-syntax-keyword: #ff7b72;--color-prettylights-syntax-markup-bold: #c9d1d9}.w-tc-editor[data-color-mode*=light],[data-color-mode*=light] .w-tc-editor,[data-color-mode*=light] .w-tc-editor-var,body[data-color-mode*=light]{--color-fg-default: #24292f;--color-canvas-subtle: #f6f8fa;--color-prettylights-syntax-comment: #6e7781;--color-prettylights-syntax-entity-tag: #116329;--color-prettylights-syntax-entity: #8250df;--color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;--color-prettylights-syntax-constant: #0550ae;--color-prettylights-syntax-string: #0a3069;--color-prettylights-syntax-keyword: #cf222e;--color-prettylights-syntax-markup-bold: #24292f}.w-tc-editor{font-family:inherit;font-size:12px;background-color:var(--color-canvas-subtle);color:var(--color-fg-default)}.w-tc-editor-text,.w-tc-editor-preview{min-height:16px}.w-tc-editor-preview pre{margin:0;padding:0;white-space:inherit;font-family:inherit;font-size:inherit}.w-tc-editor-preview pre code{font-family:inherit}.w-tc-editor code[class*=language-] .token.cdata,.w-tc-editor pre[class*=language-] .token.cdata,.w-tc-editor code[class*=language-] .token.comment,.w-tc-editor pre[class*=language-] .token.comment,.w-tc-editor code[class*=language-] .token.doctype,.w-tc-editor pre[class*=language-] .token.doctype,.w-tc-editor code[class*=language-] .token.prolog,.w-tc-editor pre[class*=language-] .token.prolog{color:var(--color-prettylights-syntax-comment)}.w-tc-editor code[class*=language-] .token.punctuation,.w-tc-editor pre[class*=language-] .token.punctuation{color:var(--color-prettylights-syntax-sublimelinter-gutter-mark)}.w-tc-editor code[class*=language-] .namespace,.w-tc-editor pre[class*=language-] .namespace{opacity:.7}.w-tc-editor code[class*=language-] .token.boolean,.w-tc-editor pre[class*=language-] .token.boolean,.w-tc-editor code[class*=language-] .token.constant,.w-tc-editor pre[class*=language-] .token.constant,.w-tc-editor code[class*=language-] .token.deleted,.w-tc-editor pre[class*=language-] .token.deleted,.w-tc-editor code[class*=language-] .token.number,.w-tc-editor pre[class*=language-] .token.number,.w-tc-editor code[class*=language-] .token.symbol,.w-tc-editor pre[class*=language-] .token.symbol{color:var(--color-prettylights-syntax-entity-tag)}.w-tc-editor code[class*=language-] .token.builtin,.w-tc-editor pre[class*=language-] .token.builtin,.w-tc-editor code[class*=language-] .token.char,.w-tc-editor pre[class*=language-] .token.char,.w-tc-editor code[class*=language-] .token.inserted,.w-tc-editor pre[class*=language-] .token.inserted,.w-tc-editor code[class*=language-] .token.selector,.w-tc-editor pre[class*=language-] .token.selector,.w-tc-editor code[class*=language-] .token.string,.w-tc-editor pre[class*=language-] .token.string,.w-tc-editor code[class*=language-] .style .token.string,.w-tc-editor pre[class*=language-] .style .token.string,.w-tc-editor code[class*=language-] .token.entity,.w-tc-editor pre[class*=language-] .token.entity,.w-tc-editor code[class*=language-] .token.property,.w-tc-editor pre[class*=language-] .token.property,.w-tc-editor code[class*=language-] .token.operator,.w-tc-editor pre[class*=language-] .token.operator,.w-tc-editor code[class*=language-] .token.url,.w-tc-editor pre[class*=language-] .token.url{color:var(--color-prettylights-syntax-constant)}.w-tc-editor code[class*=language-] .token.atrule,.w-tc-editor pre[class*=language-] .token.atrule,.w-tc-editor code[class*=language-] .token.property-access .token.method,.w-tc-editor pre[class*=language-] .token.property-access .token.method,.w-tc-editor code[class*=language-] .token.keyword,.w-tc-editor pre[class*=language-] .token.keyword{color:var(--color-prettylights-syntax-keyword)}.w-tc-editor code[class*=language-] .token.function,.w-tc-editor pre[class*=language-] .token.function{color:var(--color-prettylights-syntax-string)}.w-tc-editor code[class*=language-] .token.important,.w-tc-editor pre[class*=language-] .token.important,.w-tc-editor code[class*=language-] .token.regex,.w-tc-editor pre[class*=language-] .token.regex,.w-tc-editor code[class*=language-] .token.variable,.w-tc-editor pre[class*=language-] .token.variable{color:var(--color-prettylights-syntax-string-regexp)}.w-tc-editor code[class*=language-] .token.bold,.w-tc-editor pre[class*=language-] .token.bold,.w-tc-editor code[class*=language-] .token.important,.w-tc-editor pre[class*=language-] .token.important{color:var(--color-prettylights-syntax-markup-bold)}.w-tc-editor code[class*=language-] .token.tag,.w-tc-editor pre[class*=language-] .token.tag{color:var(--color-prettylights-syntax-entity-tag)}.w-tc-editor code[class*=language-] .token.attr-value,.w-tc-editor pre[class*=language-] .token.attr-value,.w-tc-editor code[class*=language-] .token.attr-name,.w-tc-editor pre[class*=language-] .token.attr-name{color:var(--color-prettylights-syntax-constant)}.w-tc-editor code[class*=language-] .token.selector .class,.w-tc-editor pre[class*=language-] .token.selector .class,.w-tc-editor code[class*=language-] .token.class-name,.w-tc-editor pre[class*=language-] .token.class-name{color:var(--color-prettylights-syntax-entity)}