@uploadcare/file-uploader 1.11.0-alpha.2 → 1.11.0-alpha.4

package/blocks/ExternalSource/MessageBridge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageBridge.d.ts","sourceRoot":"","sources":["MessageBridge.js"],"names":[],"mappings":"AAgBA;IAOE,8BAA8B;IAC9B,qBADY,MAAM,EAKjB;IAXD,0GAA0G;IAC1G,aADW,IAAI,MAAM,EAAE,IAAI,OAAO,SAAS,EAAE,mBAAmB,CAAC,OAAO,SAAS,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAC9E;IAExB,qBAAqB;IACrB,UADW,MAAM,CACR;IAST,8BAA8B;IAC9B,oBADY,YAAY,UAgBtB;IAEF;;;;OAIG;IACH,wGAOC;IAED,uDAAuD;IACvD,cADY,OAAO,SAAS,EAAE,aAAa,QAG1C;IAED,gBAEC;CACF"}

package/blocks/ExternalSource/MessageBridge.js

@@ -0,0 +1,71 @@
+/** @type {import('./types').InputMessageType[]} */
+const MESSAGE_TYPE_WHITELIST = ['selected-files-change'];
+
+/**
+ * @param {unknown} message
+ * @returns {message is import("./types").InputMessageMap[import("./types").InputMessageType]}
+ */
+const isWhitelistedMessage = (message) => {
+  if (!message) return false;
+  if (typeof message !== 'object') return false;
+  return (
+    'type' in message &&
+    MESSAGE_TYPE_WHITELIST.includes(/** @type {import('./types').InputMessageType} */ (message.type))
+  );
+};
+
+export class MessageBridge {
+  /** @type {Map<string, Set<import('./types').InputMessageHandler<import('./types').InputMessageType>>>} */
+  _handlerMap = new Map();
+
+  /** @type {Window} */
+  _context;
+
+  /** @param {Window} context */
+  constructor(context) {
+    this._context = context;
+
+    window.addEventListener('message', this._handleMessage);
+  }
+
+  /** @param {MessageEvent} e */
+  _handleMessage = (e) => {
+    if (e.source !== this._context) {
+      return;
+    }
+    const message = e.data;
+    if (!isWhitelistedMessage(message)) {
+      return;
+    }
+
+    const handlers = this._handlerMap.get(message.type);
+    if (handlers) {
+      for (const handler of handlers) {
+        handler(message);
+      }
+    }
+  };
+
+  /**
+   * @template {import('./types').InputMessageType} T
+   * @param {T} type
+   * @param {import('./types').InputMessageHandler<T>} handler
+   */
+  on(type, handler) {
+    const handlers = this._handlerMap.get(type) ?? new Set();
+    if (!this._handlerMap.has(type)) {
+      this._handlerMap.set(type, handlers);
+    }
+
+    handlers.add(/** @type {import('./types').InputMessageHandler<import('./types').InputMessageType>} */ (handler));
+  }
+
+  /** @param {import('./types').OutputMessage} message */
+  send(message) {
+    this._context.postMessage(message, '*');
+  }
+
+  destroy() {
+    window.removeEventListener('message', this._handleMessage);
+  }
+}

package/blocks/ExternalSource/buildThemeDefinition.d.ts

@@ -0,0 +1,3 @@
+/** @param {HTMLElement} element */
+export function buildThemeDefinition(element: HTMLElement): Record<keyof import("./types.js").ThemeDefinition, string>;
+//# sourceMappingURL=buildThemeDefinition.d.ts.map

package/blocks/ExternalSource/buildThemeDefinition.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buildThemeDefinition.d.ts","sourceRoot":"","sources":["buildThemeDefinition.js"],"names":[],"mappings":"AAqCA,mCAAmC;AACnC,8CADY,WAAW,8DAStB"}

package/blocks/ExternalSource/buildThemeDefinition.js

@@ -0,0 +1,47 @@
+// @ts-check
+
+/**
+ * @param {HTMLElement} element
+ * @param {string} propName
+ */
+function getCssValue(element, propName) {
+  let style = window.getComputedStyle(element);
+  return style.getPropertyValue(propName).trim();
+}
+
+const ucCustomProperties = /** @type {(keyof import('./types.js').ThemeDefinition)[]} */ ([
+  '--uc-font-family',
+  '--uc-font-size',
+  '--uc-line-height',
+  '--uc-button-size',
+  '--uc-preview-size',
+  '--uc-input-size',
+  '--uc-padding',
+  '--uc-radius',
+  '--uc-transition',
+  '--uc-background',
+  '--uc-foreground',
+  '--uc-primary',
+  '--uc-primary-hover',
+  '--uc-primary-transparent',
+  '--uc-primary-foreground',
+  '--uc-secondary',
+  '--uc-secondary-hover',
+  '--uc-secondary-foreground',
+  '--uc-muted',
+  '--uc-muted-foreground',
+  '--uc-destructive',
+  '--uc-destructive-foreground',
+  '--uc-border',
+]);
+
+/** @param {HTMLElement} element */
+export function buildThemeDefinition(element) {
+  return ucCustomProperties.reduce((acc, prop) => {
+    const value = getCssValue(element, prop);
+    if (value) {
+      acc[prop] = value;
+    }
+    return acc;
+  }, /** @type {Record<keyof import('./types.js').ThemeDefinition, string>} */ ({}));
+}

package/blocks/ExternalSource/external-source.css

@@ -5,15 +5,12 @@ uc-external-source {
   height: 100%;
   background-color: var(--uc-background);
   overflow: hidden;
+  position: relative;
 }
 
-[uc-modal] uc-external-source {
-  width: min(
-    calc(var(--uc-dialog-max-width) - var(--uc-padding) * 2),
-    calc(var(--uc-dialog-max-width) - var(--uc-padding) * 2)
-  );
-  height: var(--modal-content-height-fill, 100%);
-  max-height: var(--modal-max-content-height);
+[uc-modal] > dialog:has(uc-external-source[active]) {
+  width: 100%;
+  height: 100%;
 }
 
 uc-external-source > .uc-content {
@@ -23,13 +20,6 @@ uc-external-source > .uc-content {
   grid-template-rows: 1fr min-content;
 }
 
-@media only screen and (max-width: 430px) {
-  uc-external-source {
-    width: calc(100vw - var(--uc-padding) * 2);
-    height: var(--modal-content-height-fill, 100%);
-  }
-}
-
 uc-external-source iframe {
   display: block;
   width: 100%;
@@ -42,11 +32,11 @@ uc-external-source .uc-iframe-wrapper {
 }
 
 uc-external-source .uc-toolbar {
-  display: grid;
+  display: flex;
+  width: 100%;
   grid-gap: var(--uc-padding);
-  grid-template-columns: max-content 1fr max-content max-content;
   align-items: center;
-  width: 100%;
+  justify-content: space-between;
   padding: var(--uc-padding);
   border-top: 1px solid var(--uc-border);
 }
@@ -55,11 +45,36 @@ uc-external-source .uc-back-btn {
   padding-left: 0;
 }
 
-uc-external-source .uc-selected-counter {
+uc-external-source .uc-selection-status-box {
+  color: var(--uc-foreground);
   display: flex;
-  grid-gap: var(--uc-padding);
+  flex-direction: column;
   align-items: center;
-  justify-content: space-between;
-  padding: var(--uc-padding);
-  color: var(--uc-muted-foreground);
+  justify-content: center;
+}
+
+uc-external-source .uc-selection-status-box button {
+  color: var(--uc-primary);
+  height: auto;
+  padding: 0;
+  background: none;
+}
+
+uc-external-source .uc-selection-status-box button:hover {
+  text-decoration: underline;
+}
+
+uc-external-source uc-activity-header {
+  position: absolute;
+  width: 100%;
+  justify-content: flex-end;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  right: 0;
+  pointer-events: none;
+}
+
+uc-external-source uc-activity-header .uc-close-btn {
+  pointer-events: auto;
 }

package/blocks/ExternalSource/types.d.ts

@@ -0,0 +1,113 @@
+export type InstagramInfo = {
+    caption?: string | null;
+    created: number;
+    id: string;
+    public_page?: string;
+    username: string;
+    size?: number;
+    name?: string;
+    modified?: number;
+};
+export type DoneSuccessResponse = {
+    error?: undefined;
+    info?: InstagramInfo;
+    alternatives?: Record<string, string>;
+    is_image?: boolean | null;
+    filename?: string;
+    obj_type: 'selected_file';
+    url: string;
+};
+export type InputMessageMap = {
+    'selected-files-change': {
+        type: 'selected-files-change';
+        total: number;
+        selectedCount: number;
+    } & ({
+        isReady: false;
+        isMultipleMode: boolean;
+        selectedFiles: undefined;
+    } | {
+        isReady: true;
+        isMultipleMode: true;
+        selectedFiles: DoneSuccessResponse[];
+    } | {
+        isReady: true;
+        isMultipleMode: false;
+        selectedFiles: [DoneSuccessResponse] | [];
+    });
+};
+export type InputMessageType = keyof InputMessageMap;
+export type InputMessage = InputMessageMap[InputMessageType];
+export type InputMessageHandler<T extends "selected-files-change"> = (message: import('./types').InputMessageMap[T]) => void;
+export type ThemeDefinition = {
+    '--uc-font-family': string;
+    '--uc-font-size': string;
+    '--uc-line-height': string;
+    '--uc-button-size': string;
+    '--uc-preview-size': string;
+    '--uc-input-size': string;
+    '--uc-padding': string;
+    '--uc-radius': string;
+    '--uc-transition': string;
+    '--uc-background': string;
+    '--uc-foreground': string;
+    '--uc-primary': string;
+    '--uc-primary-hover': string;
+    '--uc-primary-transparent': string;
+    '--uc-primary-foreground': string;
+    '--uc-secondary': string;
+    '--uc-secondary-hover': string;
+    '--uc-secondary-foreground': string;
+    '--uc-muted': string;
+    '--uc-muted-foreground': string;
+    '--uc-destructive': string;
+    '--uc-destructive-foreground': string;
+    '--uc-border': string;
+    '--uc-primary-rgb-light': string;
+    '--uc-primary-light': string;
+    '--uc-primary-hover-light': string;
+    '--uc-primary-transparent-light': string;
+    '--uc-background-light': string;
+    '--uc-foreground-light': string;
+    '--uc-primary-foreground-light': string;
+    '--uc-secondary-light': string;
+    '--uc-secondary-hover-light': string;
+    '--uc-secondary-foreground-light': string;
+    '--uc-muted-light': string;
+    '--uc-muted-foreground-light': string;
+    '--uc-destructive-light': string;
+    '--uc-destructive-foreground-light': string;
+    '--uc-border-light': string;
+    '--uc-primary-rgb-dark': string;
+    '--uc-primary-dark': string;
+    '--uc-primary-hover-dark': string;
+    '--uc-primary-transparent-dark': string;
+    '--uc-background-dark': string;
+    '--uc-foreground-dark': string;
+    '--uc-primary-foreground-dark': string;
+    '--uc-secondary-dark': string;
+    '--uc-secondary-hover-dark': string;
+    '--uc-secondary-foreground-dark': string;
+    '--uc-muted-dark': string;
+    '--uc-muted-foreground-dark': string;
+    '--uc-destructive-dark': string;
+    '--uc-destructive-foreground-dark': string;
+    '--uc-border-dark': string;
+    '--uc-primary-oklch-light': string;
+    '--uc-primary-oklch-dark': string;
+};
+export type OutputMessage = {
+    type: 'select-all';
+} | {
+    type: 'deselect-all';
+} | {
+    type: 'set-theme-definition';
+    theme: Record<string, string>;
+} | {
+    type: 'set-locale-definition';
+    localeDefinition: string;
+} | {
+    type: 'set-embed-css';
+    css: Partial<ThemeDefinition>;
+};
+//# sourceMappingURL=types.d.ts.map

package/blocks/ExternalSource/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["types.js"],"names":[],"mappings":"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"}

package/blocks/ExternalSource/types.js

@@ -0,0 +1,143 @@
+// @ts-check
+
+/**
+ * @typedef {{
+ *   caption?: string | null;
+ *   created: number;
+ *   id: string;
+ *   public_page?: string;
+ *   username: string;
+ *   size?: number;
+ *   name?: string;
+ *   modified?: number;
+ * }} InstagramInfo
+ */
+
+/**
+ * @typedef {{
+ *   error?: undefined;
+ *   info?: InstagramInfo;
+ *   alternatives?: Record<string, string>;
+ *   is_image?: boolean | null;
+ *   filename?: string;
+ *   obj_type: 'selected_file';
+ *   url: string;
+ * }} DoneSuccessResponse
+ */
+
+/**
+ * @typedef {{
+ *   'selected-files-change': {
+ *     type: 'selected-files-change';
+ *     total: number;
+ *     selectedCount: number;
+ *   } & (
+ *     | {
+ *         isReady: false;
+ *         isMultipleMode: boolean;
+ *         selectedFiles: undefined;
+ *       }
+ *     | {
+ *         isReady: true;
+ *         isMultipleMode: true;
+ *         selectedFiles: DoneSuccessResponse[];
+ *       }
+ *     | {
+ *         isReady: true;
+ *         isMultipleMode: false;
+ *         selectedFiles: [DoneSuccessResponse] | [];
+ *       }
+ *   );
+ * }} InputMessageMap
+ */
+
+/** @typedef {keyof InputMessageMap} InputMessageType */
+/** @typedef {InputMessageMap[InputMessageType]} InputMessage */
+
+/**
+ * @template {import('./types').InputMessageType} T
+ * @typedef {(message: import('./types').InputMessageMap[T]) => void} InputMessageHandler
+ */
+
+/**
+ * @typedef {{
+ *   '--uc-font-family': string;
+ *   '--uc-font-size': string;
+ *   '--uc-line-height': string;
+ *   '--uc-button-size': string;
+ *   '--uc-preview-size': string;
+ *   '--uc-input-size': string;
+ *   '--uc-padding': string;
+ *   '--uc-radius': string;
+ *   '--uc-transition': string;
+ *   '--uc-background': string;
+ *   '--uc-foreground': string;
+ *   '--uc-primary': string;
+ *   '--uc-primary-hover': string;
+ *   '--uc-primary-transparent': string;
+ *   '--uc-primary-foreground': string;
+ *   '--uc-secondary': string;
+ *   '--uc-secondary-hover': string;
+ *   '--uc-secondary-foreground': string;
+ *   '--uc-muted': string;
+ *   '--uc-muted-foreground': string;
+ *   '--uc-destructive': string;
+ *   '--uc-destructive-foreground': string;
+ *   '--uc-border': string;
+ *   '--uc-primary-rgb-light': string;
+ *   '--uc-primary-light': string;
+ *   '--uc-primary-hover-light': string;
+ *   '--uc-primary-transparent-light': string;
+ *   '--uc-background-light': string;
+ *   '--uc-foreground-light': string;
+ *   '--uc-primary-foreground-light': string;
+ *   '--uc-secondary-light': string;
+ *   '--uc-secondary-hover-light': string;
+ *   '--uc-secondary-foreground-light': string;
+ *   '--uc-muted-light': string;
+ *   '--uc-muted-foreground-light': string;
+ *   '--uc-destructive-light': string;
+ *   '--uc-destructive-foreground-light': string;
+ *   '--uc-border-light': string;
+ *   '--uc-primary-rgb-dark': string;
+ *   '--uc-primary-dark': string;
+ *   '--uc-primary-hover-dark': string;
+ *   '--uc-primary-transparent-dark': string;
+ *   '--uc-background-dark': string;
+ *   '--uc-foreground-dark': string;
+ *   '--uc-primary-foreground-dark': string;
+ *   '--uc-secondary-dark': string;
+ *   '--uc-secondary-hover-dark': string;
+ *   '--uc-secondary-foreground-dark': string;
+ *   '--uc-muted-dark': string;
+ *   '--uc-muted-foreground-dark': string;
+ *   '--uc-destructive-dark': string;
+ *   '--uc-destructive-foreground-dark': string;
+ *   '--uc-border-dark': string;
+ *   '--uc-primary-oklch-light': string;
+ *   '--uc-primary-oklch-dark': string;
+ * }} ThemeDefinition
+ */
+
+/**
+ * @typedef {{
+ *       type: 'select-all';
+ *     }
+ *   | {
+ *       type: 'deselect-all';
+ *     }
+ *   | {
+ *       type: 'set-theme-definition';
+ *       theme: Record<string, string>;
+ *     }
+ *   | {
+ *       type: 'set-locale-definition';
+ *       localeDefinition: string;
+ *     }
+ *   | {
+ *       type: 'set-embed-css';
+ *       css: Partial<ThemeDefinition>;
+ *     }} OutputMessage
+ */
+
+export {};

package/blocks/Modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["Modal.js"],"names":[],"mappings":"AAGA;IAEE,kCAAoC;IAIlC;;;;MAKC;IAGH,iCAEE;IAEF,yBAEE;IAEF,+BAEE;IAEF,uBAAuB;IACvB,4BADY,KAAK,UAIf;IAFA,eAAe;IACf,yBAAgC;IAGlC,uBAAuB;IACvB,0BADY,KAAK,UAKf;IAEF,aAMC;IAED,aAMC;CAuDF;;;;sBA9GqB,yBAAyB"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["Modal.js"],"names":[],"mappings":"AAGA;IAEE,kCAAoC;IAIlC;;;;MAKC;IAGH,iCAEE;IAEF,yBAEE;IAEF,+BAEE;IAEF,uBAAuB;IACvB,4BADY,KAAK,UAIf;IAFA,eAAe;IACf,yBAAgC;IAGlC,uBAAuB;IACvB,0BADY,KAAK,UAKf;IAEF,aAMC;IAED,aAMC;CAgDF;;;;sBAvGqB,yBAAyB"}

package/blocks/Modal/Modal.js

@@ -58,17 +58,10 @@ export class Modal extends Block {
 
   initCallback() {
     super.initCallback();
-    if (typeof HTMLDialogElement === 'function') {
-      this.ref.dialog.addEventListener('close', this._handleDialogClose);
-      this.ref.dialog.addEventListener('mousedown', this._handleDialogMouseDown);
-      this.ref.dialog.addEventListener('mouseup', this._handleDialogMouseUp);
-    } else {
-      this.setAttribute('dialog-fallback', '');
-      let backdrop = document.createElement('div');
-      backdrop.className = 'uc-backdrop';
-      this.appendChild(backdrop);
-      backdrop.addEventListener('click', this._handleBackdropClick);
-    }
+
+    this.ref.dialog.addEventListener('close', this._handleDialogClose);
+    this.ref.dialog.addEventListener('mousedown', this._handleDialogMouseDown);
+    this.ref.dialog.addEventListener('mouseup', this._handleDialogMouseUp);
 
     this.sub('*modalActive', (modalActive) => {
       if (this.$.isOpen !== modalActive) {

package/blocks/Modal/modal.css

@@ -1,46 +1,3 @@
-:where([uc-modal]) {
-  --modal-max-content-height: calc(
-    var(--uploadcare-blocks-window-height, 100vh) - 4 * var(--uc-padding) - var(--uc-button-size)
-  );
-  --modal-content-height-fill: var(--uploadcare-blocks-window-height, 100vh);
-}
-
-:where([uc-modal])[dialog-fallback] {
-  --uc-z-max: 2147483647;
-
-  position: fixed;
-  z-index: var(--uc-z-max);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100vw;
-  height: 100vh;
-  pointer-events: none;
-  inset: 0;
-}
-
-:where([uc-modal])[dialog-fallback] dialog[open] {
-  z-index: var(--uc-z-max);
-  pointer-events: auto;
-}
-
-:where([uc-modal])[dialog-fallback] dialog[open] + .uc-backdrop {
-  position: fixed;
-  top: 0px;
-  left: 0px;
-  z-index: calc(var(--uc-z-max) - 1);
-  align-items: center;
-  justify-content: center;
-  width: 100vw;
-  height: 100vh;
-  background-color: oklch(0 0 0 / 0.1);
-  pointer-events: auto;
-}
-
-:where([uc-modal])[strokes][dialog-fallback] dialog[open] + .uc-backdrop {
-  background-image: var(--modal-backdrop-background-image);
-}
-
 @supports selector(dialog::backdrop) {
   :where([uc-modal]) > dialog::backdrop {
     /* backdrop don't inherit theme properties */
@@ -67,12 +24,10 @@
 :where([uc-modal]) > dialog {
   display: flex;
   flex-direction: column;
-
-  /* there was `fit-content` but it doesn't reduce width after activity change */
-  width: max-content;
-  max-width: min(calc(100% - var(--uc-padding) * 2), calc(var(--uc-dialog-max-width) - var(--uc-padding) * 2));
+  width: min(var(--uc-dialog-width), 100%);
+  max-width: min(calc(100% - var(--uc-padding) * 2), var(--uc-dialog-max-width));
   min-height: var(--uc-button-size);
-  max-height: calc(var(--uc-dialog-max-height) - var(--uc-padding) * 2);
+  max-height: min(calc(100% - var(--uc-padding) * 2), var(--uc-dialog-max-height));
   margin: auto;
   padding: 0;
   overflow: hidden;
@@ -88,9 +43,3 @@
 :where(.uc-contrast) :where([uc-modal]) > dialog {
   outline: 1px solid var(--uc-border);
 }
-
-@media only screen and (max-width: 430px), only screen and (max-height: 600px) {
-  :where([uc-modal]) > dialog > .uc-content {
-    height: var(--modal-max-content-height);
-  }
-}

package/blocks/StartFrom/start-from.css

@@ -13,12 +13,8 @@ uc-start-from .uc-content {
   background-color: var(--uc-background);
 }
 
-[uc-modal] uc-start-from {
-  width: min(
-    calc(var(--uc-dialog-width) - var(--uc-padding) * 2),
-    calc(var(--uc-dialog-max-width) - var(--uc-padding) * 2),
-    calc(100vw - var(--uc-padding) * 2)
-  );
+[uc-modal] > dialog:has(uc-start-from[active]) {
+  width: var(--uc-dialog-width);
 }
 
 [uc-modal] uc-start-from uc-drop-area {

package/blocks/UploadList/upload-list.css

@@ -2,22 +2,12 @@ uc-upload-list {
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: 100%;
+  height: max-content;
   overflow: hidden;
   background-color: var(--uc-background);
   transition: opacity var(--uc-transition);
 }
 
-[uc-modal] uc-upload-list {
-  width: min(
-    calc(var(--uc-dialog-width) - var(--uc-padding) * 2),
-    calc(var(--uc-dialog-max-width) - var(--uc-padding) * 2),
-    calc(100vw - var(--uc-padding) * 2)
-  );
-  height: max-content;
-  max-height: var(--modal-max-content-height);
-}
-
 uc-upload-list .uc-no-files {
   height: 32px;
   padding: 20px;

package/blocks/UrlSource/url-source.css

@@ -3,14 +3,6 @@ uc-url-source {
   background-color: var(--uc-background);
 }
 
-[uc-modal] uc-url-source {
-  width: min(
-    calc(var(--uc-dialog-width) - var(--uc-padding) * 2),
-    calc(var(--uc-dialog-max-width) - var(--uc-padding) * 2),
-    calc(100vw - var(--uc-padding) * 2)
-  );
-}
-
 uc-url-source > .uc-content {
   display: grid;
   grid-gap: 4px;

package/blocks/themes/uc-basic/theme.css

@@ -11,11 +11,10 @@
   --uc-preview-size: 32px;
   --uc-padding: 10px;
   --uc-radius: 8px;
-  --uc-radius-dropdown: 12px;
   --uc-transition: 0.2s ease;
   --uc-dialog-width: 430px;
-  --uc-dialog-max-width: 800px;
-  --uc-dialog-max-height: 600px;
+  --uc-dialog-max-width: 920px;
+  --uc-dialog-max-height: 675px;
   --uc-simple-btn-padding: 7px 14px;
 
   /* Default colors, in case of media query failure */

package/index.ssr.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.ssr.d.ts","sourceRoot":"","sources":["index.ssr.js"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;EAcE;AACF;;;;;;;;;;;;;;;EAcE;AACF;;;;;EAIE;AACF;;;;;;EAKE;AACF;;;;;;;;EAYE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuJE;AACF;;;;;;;;EAuCE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+CE;AACF;;;;;;;;EAuCE;AACF;;;;;;;EAkGE;AACF;;;;;;;EAaE;AACF;;;;;;;EAME;AACF;;;;;;;;;;;;;;;;EAeE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkEE;AACF;;;;;;;EAWE;AACF;;;;;;;EAWE;AACF;;;;;;;EASE;AACF;;;;;;EAKE;AACF;;;;;;;EAWE;AACF;;;;;;;EAME;AACF;;;;;;;EAWE;AACF;;;;;;;EA2IE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgFE;;;;;;;;;;;;;;AAcF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmFE;AACF;;;;;;EAKE;AACF;;;;;;EAKE;AACF;;;;;;;EAME;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+CE;AACF;;;;;;;;EAWE;AACF;;;;;;EAwBE;AACF;;;;;;;EAUE;AACF;;;;;;;;EAWE;AACF,oCAAqC;AACrC,uCAAwC;AACxC;;;;;;;EAME;AACF;;;;;;;EAME;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgDE;AACF;;;;;;;EAME;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0DE;AACF;;;;;;;EAeE;AACF;;;;;;EAKE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsDE;AACF;;;;;;EAKE;AACF;;;;;;;;;;;;;;;;EAeE;AACF;;;;;;;;;;;;EAWE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmEE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8FE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+CE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2EE;AACK,yCAAiC;AACjC,qCAA6B;AAC7B,6CAAqC;AACrC,oCAA4B"}
+{"version":3,"file":"index.ssr.d.ts","sourceRoot":"","sources":["index.ssr.js"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;EAcE;AACF;;;;;;;;;;;;;;;EAcE;AACF;;;;;EAIE;AACF;;;;;;EAKE;AACF;;;;;;;;EAYE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuJE;AACF;;;;;;;;EAuCE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+CE;AACF;;;;;;;;EAuCE;AACF;;;;;;;EAkGE;AACF;;;;;;;EAaE;AACF;;;;;;;EAME;AACF;;;;;;;;;;;;;;;;EAeE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkEE;AACF;;;;;;;EAWE;AACF;;;;;;;EAWE;AACF;;;;;;;EASE;AACF;;;;;;EAKE;AACF;;;;;;;EAWE;AACF;;;;;;;EAME;AACF;;;;;;;EAWE;AACF;;;;;;;EA2IE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4EE;;;;;;;;;;;;;;AAcF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmFE;AACF;;;;;;EAKE;AACF;;;;;;EAKE;AACF;;;;;;;EAME;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+CE;AACF;;;;;;;;EAWE;AACF;;;;;;EAwBE;AACF;;;;;;;EAUE;AACF;;;;;;;;EAWE;AACF,oCAAqC;AACrC,uCAAwC;AACxC;;;;;;;EAME;AACF;;;;;;;EAME;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgDE;AACF;;;;;;;EAME;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0DE;AACF;;;;;;;EAeE;AACF;;;;;;EAKE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsDE;AACF;;;;;;EAKE;AACF;;;;;;;;;;;;;;;;EAeE;AACF;;;;;;;;;;;;EAWE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmEE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8FE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+CE;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2EE;AACK,yCAAiC;AACjC,qCAA6B;AAC7B,6CAAqC;AACrC,oCAA4B"}