@spectrum-web-components/vrt-compare 0.1.16 → 0.1.17-devmode.0

package/src/VrtCompare.dev.js

@@ -0,0 +1,397 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+import {
+  css,
+  html,
+  nothing,
+  SpectrumElement
+} from "@spectrum-web-components/base";
+import { property } from "@spectrum-web-components/base/src/decorators.js";
+import { ObserveSlotPresence } from "@spectrum-web-components/shared";
+import bodyStyles from "@spectrum-web-components/styles/body.js";
+import "@spectrum-web-components/action-button/sp-action-button.js";
+import "@spectrum-web-components/action-group/sp-action-group.js";
+import "@spectrum-web-components/split-view/sp-split-view.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-zoom-in.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-zoom-out.js";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-refresh.js";
+import "@spectrum-web-components/action-bar/sp-action-bar.js";
+import "@spectrum-web-components/progress-circle/sp-progress-circle.js";
+import "../onion-skinner.dev.js";
+export class VrtCompare extends ObserveSlotPresence(SpectrumElement, [
+  '[slot="actual"]',
+  '[slot="baseline"]',
+  '[slot="diff"]'
+]) {
+  constructor() {
+    super(...arguments);
+    this.view = "scrubber";
+    this.zoom = 1;
+    this.imagesLoaded = false;
+    this._loadingImages = false;
+  }
+  get hasActual() {
+    return this.getSlotContentPresence('[slot="actual"]');
+  }
+  get hasBaseline() {
+    return this.getSlotContentPresence('[slot="baseline"]');
+  }
+  get hasDiff() {
+    return this.getSlotContentPresence('[slot="diff"]');
+  }
+  get canCompare() {
+    return this.hasActual && this.hasBaseline;
+  }
+  handleChange(event) {
+    const view = event.target.selected[0];
+    if (view) {
+      this.view = view;
+    }
+  }
+  handleZoomIn() {
+    this.zoom += 0.1;
+  }
+  handleZoomClear() {
+    this.zoom = 1;
+  }
+  handleZoomOut() {
+    this.zoom -= 0.1;
+  }
+  get error() {
+    return html`
+            <sp-icon-alert class="icon" size="xl"></sp-icon-alert>
+            <p class="spectrum-Body spectrum-Body--sizeXL">
+                Please be sure to supply some combination of actual, baseline,
+                and diff screenshots for review.
+            </p>
+        `;
+  }
+  get actual() {
+    return html`
+            <div class="view actual">
+                <slot name="actual"></slot>
+            </div>
+        `;
+  }
+  get baseline() {
+    return html`
+            <div class="view baseline">
+                <slot name="baseline"></slot>
+            </div>
+        `;
+  }
+  get diff() {
+    return html`
+            <div class="view diff">
+                <slot name="diff"></slot>
+            </div>
+        `;
+  }
+  get scrubber() {
+    return html`
+            <sp-split-view resizable primary-size="50%">
+                ${this.baseline} ${this.actual}
+            </sp-split-view>
+        `;
+  }
+  get sidebyside() {
+    return html`
+            ${this.baseline} ${this.actual}
+        `;
+  }
+  get onion() {
+    return html`
+            <onion-skinner>
+                <slot name="baseline"></slot>
+                <slot name="actual"></slot>
+            </onion-skinner>
+        `;
+  }
+  get renderView() {
+    switch (this.view) {
+      case "error":
+        return this.error;
+      case "actual":
+        return this.actual;
+      case "baseline":
+        return this.baseline;
+      case "diff":
+        return this.diff;
+      case "onion":
+        return this.onion;
+      case "sidebyside":
+        return this.sidebyside;
+      case "scrubber":
+      default:
+        return this.scrubber;
+    }
+  }
+  get viewFallback() {
+    if (this.canCompare) {
+      return "scrubber";
+    } else if (this.hasActual) {
+      return "actual";
+    } else if (this.hasBaseline) {
+      return "baseline";
+    } else if (this.hasDiff) {
+      return "diff";
+    } else {
+      return "error";
+    }
+  }
+  async prepImages(event) {
+    const slot = event.target;
+    if (this._loadingImages || !slot.assignedNodes().length) {
+      return;
+    }
+    this._loadingImages = true;
+    this.imagesLoaded = false;
+    const images = [...this.querySelectorAll("img")];
+    if (!images.length) {
+      this.imagesLoaded = true;
+      this._loadingImages = false;
+      return;
+    }
+    const imageLoadPromises = images.map((img) => {
+      if (img.naturalWidth) {
+        this.style.setProperty("--image-width", `${img.naturalWidth}px`);
+        return Promise.resolve();
+      }
+      return new Promise((resolve) => {
+        img.addEventListener("load", () => {
+          this.style.setProperty("--image-width", `${img.naturalWidth}px`);
+          resolve(true);
+        });
+      });
+    });
+    await Promise.all(imageLoadPromises);
+    this.imagesLoaded = true;
+    this._loadingImages = false;
+  }
+  shouldUpdate() {
+    if (this.view === "error" || this.view === "actual" && !this.hasActual || this.view === "baseline" && !this.hasBaseline || this.view === "diff" && !this.hasDiff || (this.view === "onion" || this.view === "sidebyside" || this.view === "scrubber") && !this.canCompare) {
+      this.view = this.viewFallback;
+    }
+    return true;
+  }
+  render() {
+    if (this._loadingImages) {
+      return html`
+                <sp-progress-circle indeterminate></sp-progress-circle>
+                <slot
+                    name="actual"
+                    @slotchange=${this.prepImages}
+                    hidden
+                ></slot>
+                <slot
+                    name="baseline"
+                    @slotchange=${this.prepImages}
+                    hidden
+                ></slot>
+                <slot name="diff" @slotchange=${this.prepImages} hidden></slot>
+            `;
+    }
+    if (!this.imagesLoaded) {
+      return html`
+                <p class="spectrum-Body spectrum-Body--sizeXL">
+                    Choose a test to review on the left...
+                </p>
+                <slot
+                    name="actual"
+                    @slotchange=${this.prepImages}
+                    hidden
+                ></slot>
+                <slot
+                    name="baseline"
+                    @slotchange=${this.prepImages}
+                    hidden
+                ></slot>
+                <slot name="diff" @slotchange=${this.prepImages} hidden></slot>
+            `;
+    }
+    return html`
+            <sp-action-group
+                selects="single"
+                compact
+                emphasized
+                @change=${this.handleChange}
+            >
+                ${this.view !== "error" ? nothing : html`
+                          <sp-action-button value="error" disabled>
+                              Error
+                          </sp-action-button>
+                      `}
+                ${!this.canCompare ? nothing : html`
+                          <sp-action-button
+                              value="scrubber"
+                              ?selected=${this.view === "scrubber"}
+                          >
+                              Scrubber
+                          </sp-action-button>
+                          <sp-action-button
+                              value="onion"
+                              ?selected=${this.view === "onion"}
+                          >
+                              Onion skin
+                          </sp-action-button>
+                          <sp-action-button
+                              value="sidebyside"
+                              ?selected=${this.view === "sidebyside"}
+                          >
+                              Side by side
+                          </sp-action-button>
+                      `}
+                ${!this.hasDiff ? nothing : html`
+                          <sp-action-button
+                              value="diff"
+                              ?selected=${this.view === "diff"}
+                          >
+                              Diff
+                          </sp-action-button>
+                      `}
+                ${!this.hasActual ? nothing : html`
+                          <sp-action-button
+                              value="actual"
+                              ?selected=${this.view === "actual"}
+                          >
+                              Actual
+                          </sp-action-button>
+                      `}
+                ${!this.hasBaseline ? nothing : html`
+                          <sp-action-button
+                              value="baseline"
+                              ?selected=${this.view === "baseline"}
+                          >
+                              Baseline
+                          </sp-action-button>
+                      `}
+            </sp-action-group>
+            <div class="review ${this.view}">${this.renderView}</div>
+            <sp-action-group compact class="zoom-controls">
+                <sp-action-button
+                    @click=${this.handleZoomOut}
+                    ?disabled=${this.zoom <= 0.5}
+                >
+                    <sp-icon-zoom-out slot="icon"></sp-icon-zoom-out>
+                </sp-action-button>
+                <sp-action-button @click=${this.handleZoomClear}>
+                    <sp-icon-refresh slot="icon"></sp-icon-refresh>
+                </sp-action-button>
+                <sp-action-button
+                    @click=${this.handleZoomIn}
+                    ?disabled=${this.zoom >= 2}
+                >
+                    <sp-icon-zoom-in slot="icon"></sp-icon-zoom-in>
+                </sp-action-button>
+            </sp-action-group>
+        `;
+  }
+  updated(changes) {
+    if (changes.has("zoom")) {
+      let zoom = Math.min(this.zoom, 2);
+      zoom = Math.min(zoom, 0.5);
+      this.style.setProperty("--zoom-level", `${this.zoom}`);
+    }
+  }
+}
+VrtCompare.styles = [
+  css`
+            :host {
+                display: grid;
+                max-width: 100%;
+                overflow: auto;
+                margin: 0 auto;
+                position: relative;
+
+                --image-display-width: calc(
+                    var(--zoom-level, 1) * var(--image-width, 500px)
+                );
+            }
+            sp-progress-circle {
+                margin: auto;
+                place-self: center;
+            }
+            .review {
+                margin: 100px auto 0;
+                display: flex;
+                width: var(--image-display-width);
+                place-self: start;
+            }
+            .error {
+                flex-direction: column;
+            }
+            ::slotted(img) {
+                display: flex;
+            }
+            sp-action-group[selects] {
+                margin-bottom: 1em;
+                justify-content: center;
+                position: fixed;
+                top: calc(var(--spectrum-global-dimension-size-200) / 2);
+                right: calc(var(--spectrum-global-dimension-size-200) / 2);
+            }
+            .sidebyside {
+                display: flex;
+                gap: 2px;
+            }
+            .sidebyside ::slotted(img) {
+                width: 100%;
+            }
+            .view {
+                overflow: hidden;
+            }
+            .review:is(.baseline, .actual, .diff) .view,
+            .review:is(.baseline, .actual, .diff) ::slotted(img) {
+                width: 100%;
+            }
+            sp-split-view {
+                width: var(--image-display-width);
+            }
+            sp-split-view ::slotted(img) {
+                width: var(--image-display-width);
+                height: auto;
+                flex-shrink: 0;
+            }
+            sp-split-view .actual ::slotted(img) {
+                float: right;
+            }
+            p {
+                text-align: center;
+                margin: 0 3em;
+            }
+            .icon {
+                margin: 0 auto 2em;
+                display: flex;
+                color: var(--spectrum-semantic-negative-color-background);
+            }
+            .zoom-controls {
+                position: fixed;
+                bottom: calc(var(--spectrum-global-dimension-size-200) / 2);
+                left: calc(
+                    240px + 48px + var(--spectrum-global-dimension-size-200) / 2
+                );
+                z-index: 1;
+            }
+        `,
+  bodyStyles
+];
+__decorateClass([
+  property()
+], VrtCompare.prototype, "view", 2);
+__decorateClass([
+  property({ type: Number })
+], VrtCompare.prototype, "zoom", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: false })
+], VrtCompare.prototype, "imagesLoaded", 2);
+//# sourceMappingURL=VrtCompare.dev.js.map

package/src/VrtCompare.dev.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["VrtCompare.ts"],
+  "sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n    css,\n    html,\n    nothing,\n    PropertyValues,\n    SpectrumElement,\n    TemplateResult,\n} from '@spectrum-web-components/base';\nimport { property } from '@spectrum-web-components/base/src/decorators.js';\nimport { ObserveSlotPresence } from '@spectrum-web-components/shared';\nimport { ActionGroup } from '@spectrum-web-components/action-group';\nimport bodyStyles from '@spectrum-web-components/styles/body.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport '@spectrum-web-components/action-group/sp-action-group.js';\nimport '@spectrum-web-components/split-view/sp-split-view.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-zoom-in.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-zoom-out.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-refresh.js';\nimport '@spectrum-web-components/action-bar/sp-action-bar.js';\nimport '@spectrum-web-components/progress-circle/sp-progress-circle.js';\nimport '../onion-skinner.dev.js'\n\nexport class VrtCompare extends ObserveSlotPresence(SpectrumElement, [\n    '[slot=\"actual\"]',\n    '[slot=\"baseline\"]',\n    '[slot=\"diff\"]',\n]) {\n    @property()\n    public view = 'scrubber';\n\n    @property({ type: Number })\n    public zoom = 1;\n\n    @property({ type: Boolean, attribute: false })\n    public imagesLoaded = false;\n\n    private get hasActual(): boolean {\n        return this.getSlotContentPresence('[slot=\"actual\"]');\n    }\n\n    private get hasBaseline(): boolean {\n        return this.getSlotContentPresence('[slot=\"baseline\"]');\n    }\n\n    private get hasDiff(): boolean {\n        return this.getSlotContentPresence('[slot=\"diff\"]');\n    }\n\n    private get canCompare(): boolean {\n        return this.hasActual && this.hasBaseline;\n    }\n\n    private handleChange(event: Event & { target: ActionGroup }) {\n        const view = event.target.selected[0];\n        if (view) {\n            this.view = view;\n        }\n    }\n\n    private handleZoomIn() {\n        this.zoom += 0.1;\n    }\n\n    private handleZoomClear() {\n        this.zoom = 1;\n    }\n\n    private handleZoomOut() {\n        this.zoom -= 0.1;\n    }\n\n    protected get error() {\n        return html`\n            <sp-icon-alert class=\"icon\" size=\"xl\"></sp-icon-alert>\n            <p class=\"spectrum-Body spectrum-Body--sizeXL\">\n                Please be sure to supply some combination of actual, baseline,\n                and diff screenshots for review.\n            </p>\n        `;\n    }\n\n    protected get actual() {\n        return html`\n            <div class=\"view actual\">\n                <slot name=\"actual\"></slot>\n            </div>\n        `;\n    }\n\n    protected get baseline() {\n        return html`\n            <div class=\"view baseline\">\n                <slot name=\"baseline\"></slot>\n            </div>\n        `;\n    }\n\n    protected get diff() {\n        return html`\n            <div class=\"view diff\">\n                <slot name=\"diff\"></slot>\n            </div>\n        `;\n    }\n\n    protected get scrubber() {\n        return html`\n            <sp-split-view resizable primary-size=\"50%\">\n                ${this.baseline} ${this.actual}\n            </sp-split-view>\n        `;\n    }\n\n    protected get sidebyside() {\n        return html`\n            ${this.baseline} ${this.actual}\n        `;\n    }\n\n    protected get onion() {\n        return html`\n            <onion-skinner>\n                <slot name=\"baseline\"></slot>\n                <slot name=\"actual\"></slot>\n            </onion-skinner>\n        `;\n    }\n\n    protected get renderView() {\n        switch (this.view) {\n            case 'error':\n                return this.error;\n            case 'actual':\n                return this.actual;\n            case 'baseline':\n                return this.baseline;\n            case 'diff':\n                return this.diff;\n            case 'onion':\n                return this.onion;\n            case 'sidebyside':\n                return this.sidebyside;\n            case 'scrubber':\n            default:\n                return this.scrubber;\n        }\n    }\n\n    private get viewFallback() {\n        if (this.canCompare) {\n            return 'scrubber';\n        } else if (this.hasActual) {\n            return 'actual';\n        } else if (this.hasBaseline) {\n            return 'baseline';\n        } else if (this.hasDiff) {\n            return 'diff';\n        } else {\n            return 'error';\n        }\n    }\n\n    _loadingImages = false;\n\n    async prepImages(event: Event) {\n        const slot = event.target as HTMLSlotElement;\n        if (this._loadingImages || !slot.assignedNodes().length) {\n            return;\n        }\n        this._loadingImages = true;\n        this.imagesLoaded = false;\n        const images = [...this.querySelectorAll('img')];\n        if (!images.length) {\n            this.imagesLoaded = true;\n            this._loadingImages = false;\n            return;\n        }\n        const imageLoadPromises = images.map((img) => {\n            if (img.naturalWidth) {\n                this.style.setProperty(\n                    '--image-width',\n                    `${img.naturalWidth}px`\n                );\n                return Promise.resolve();\n            }\n            return new Promise((resolve) => {\n                img.addEventListener('load', () => {\n                    this.style.setProperty(\n                        '--image-width',\n                        `${img.naturalWidth}px`\n                    );\n                    resolve(true);\n                });\n            });\n        });\n        await Promise.all(imageLoadPromises);\n        this.imagesLoaded = true;\n        this._loadingImages = false;\n    }\n\n    protected override shouldUpdate() {\n        if (\n            this.view === 'error' ||\n            (this.view === 'actual' && !this.hasActual) ||\n            (this.view === 'baseline' && !this.hasBaseline) ||\n            (this.view === 'diff' && !this.hasDiff) ||\n            ((this.view === 'onion' ||\n                this.view === 'sidebyside' ||\n                this.view === 'scrubber') &&\n                !this.canCompare)\n        ) {\n            this.view = this.viewFallback;\n        }\n        return true;\n    }\n\n    protected override render(): TemplateResult {\n        if (this._loadingImages) {\n            return html`\n                <sp-progress-circle indeterminate></sp-progress-circle>\n                <slot\n                    name=\"actual\"\n                    @slotchange=${this.prepImages}\n                    hidden\n                ></slot>\n                <slot\n                    name=\"baseline\"\n                    @slotchange=${this.prepImages}\n                    hidden\n                ></slot>\n                <slot name=\"diff\" @slotchange=${this.prepImages} hidden></slot>\n            `;\n        }\n        if (!this.imagesLoaded) {\n            return html`\n                <p class=\"spectrum-Body spectrum-Body--sizeXL\">\n                    Choose a test to review on the left...\n                </p>\n                <slot\n                    name=\"actual\"\n                    @slotchange=${this.prepImages}\n                    hidden\n                ></slot>\n                <slot\n                    name=\"baseline\"\n                    @slotchange=${this.prepImages}\n                    hidden\n                ></slot>\n                <slot name=\"diff\" @slotchange=${this.prepImages} hidden></slot>\n            `;\n        }\n        return html`\n            <sp-action-group\n                selects=\"single\"\n                compact\n                emphasized\n                @change=${this.handleChange}\n            >\n                ${this.view !== 'error'\n                    ? nothing\n                    : html`\n                          <sp-action-button value=\"error\" disabled>\n                              Error\n                          </sp-action-button>\n                      `}\n                ${!this.canCompare\n                    ? nothing\n                    : html`\n                          <sp-action-button\n                              value=\"scrubber\"\n                              ?selected=${this.view === 'scrubber'}\n                          >\n                              Scrubber\n                          </sp-action-button>\n                          <sp-action-button\n                              value=\"onion\"\n                              ?selected=${this.view === 'onion'}\n                          >\n                              Onion skin\n                          </sp-action-button>\n                          <sp-action-button\n                              value=\"sidebyside\"\n                              ?selected=${this.view === 'sidebyside'}\n                          >\n                              Side by side\n                          </sp-action-button>\n                      `}\n                ${!this.hasDiff\n                    ? nothing\n                    : html`\n                          <sp-action-button\n                              value=\"diff\"\n                              ?selected=${this.view === 'diff'}\n                          >\n                              Diff\n                          </sp-action-button>\n                      `}\n                ${!this.hasActual\n                    ? nothing\n                    : html`\n                          <sp-action-button\n                              value=\"actual\"\n                              ?selected=${this.view === 'actual'}\n                          >\n                              Actual\n                          </sp-action-button>\n                      `}\n                ${!this.hasBaseline\n                    ? nothing\n                    : html`\n                          <sp-action-button\n                              value=\"baseline\"\n                              ?selected=${this.view === 'baseline'}\n                          >\n                              Baseline\n                          </sp-action-button>\n                      `}\n            </sp-action-group>\n            <div class=\"review ${this.view}\">${this.renderView}</div>\n            <sp-action-group compact class=\"zoom-controls\">\n                <sp-action-button\n                    @click=${this.handleZoomOut}\n                    ?disabled=${this.zoom <= 0.5}\n                >\n                    <sp-icon-zoom-out slot=\"icon\"></sp-icon-zoom-out>\n                </sp-action-button>\n                <sp-action-button @click=${this.handleZoomClear}>\n                    <sp-icon-refresh slot=\"icon\"></sp-icon-refresh>\n                </sp-action-button>\n                <sp-action-button\n                    @click=${this.handleZoomIn}\n                    ?disabled=${this.zoom >= 2}\n                >\n                    <sp-icon-zoom-in slot=\"icon\"></sp-icon-zoom-in>\n                </sp-action-button>\n            </sp-action-group>\n        `;\n    }\n\n    protected override updated(changes: PropertyValues) {\n        if (changes.has('zoom')) {\n            let zoom = Math.min(this.zoom, 2);\n            zoom = Math.min(zoom, 0.5);\n            this.style.setProperty('--zoom-level', `${this.zoom}`);\n        }\n    }\n\n    static override styles = [\n        css`\n            :host {\n                display: grid;\n                max-width: 100%;\n                overflow: auto;\n                margin: 0 auto;\n                position: relative;\n\n                --image-display-width: calc(\n                    var(--zoom-level, 1) * var(--image-width, 500px)\n                );\n            }\n            sp-progress-circle {\n                margin: auto;\n                place-self: center;\n            }\n            .review {\n                margin: 100px auto 0;\n                display: flex;\n                width: var(--image-display-width);\n                place-self: start;\n            }\n            .error {\n                flex-direction: column;\n            }\n            ::slotted(img) {\n                display: flex;\n            }\n            sp-action-group[selects] {\n                margin-bottom: 1em;\n                justify-content: center;\n                position: fixed;\n                top: calc(var(--spectrum-global-dimension-size-200) / 2);\n                right: calc(var(--spectrum-global-dimension-size-200) / 2);\n            }\n            .sidebyside {\n                display: flex;\n                gap: 2px;\n            }\n            .sidebyside ::slotted(img) {\n                width: 100%;\n            }\n            .view {\n                overflow: hidden;\n            }\n            .review:is(.baseline, .actual, .diff) .view,\n            .review:is(.baseline, .actual, .diff) ::slotted(img) {\n                width: 100%;\n            }\n            sp-split-view {\n                width: var(--image-display-width);\n            }\n            sp-split-view ::slotted(img) {\n                width: var(--image-display-width);\n                height: auto;\n                flex-shrink: 0;\n            }\n            sp-split-view .actual ::slotted(img) {\n                float: right;\n            }\n            p {\n                text-align: center;\n                margin: 0 3em;\n            }\n            .icon {\n                margin: 0 auto 2em;\n                display: flex;\n                color: var(--spectrum-semantic-negative-color-background);\n            }\n            .zoom-controls {\n                position: fixed;\n                bottom: calc(var(--spectrum-global-dimension-size-200) / 2);\n                left: calc(\n                    240px + 48px + var(--spectrum-global-dimension-size-200) / 2\n                );\n                z-index: 1;\n            }\n        `,\n        bodyStyles,\n    ];\n}\n"],
+  "mappings": "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",
+  "names": []
+}