@pie-element/mc-populated-blank 0.2.10 → 0.2.12

package/src/delivery/cqt-css/sel-r1-g-stem.css

@@ -1,29 +0,0 @@
-/* Source baseline: https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-g_plusggg/0.0.1/question.css */
-.mc-populated-blank-root.variant-sel-r1-g-stem {
-  font-family: Starial, Arial, sans-serif;
-  max-width: 875px;
-  margin-inline: auto;
-  --mpb-listen-button-size: 128px;
-  --mpb-choice-width-px: 155px;
-  --mpb-choice-tile-min-height: 11.25rem;
-  --mpb-choice-content-min-height: 9.375rem;
-  --pie-correct-answer-choice-hover-bg: #e2e2e2;
-  --pie-correct-answer-choice-selected-bg: #fcfcd3;
-}
-
-.mc-populated-blank-root.variant-sel-r1-g-stem .pie-audio-transcript {
-  font-family: Roboto, Arial, sans-serif;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-}
-
-.mc-populated-blank-root.variant-sel-r1-g-stem .pie-choice-label {
-  font-size: 1.9em;
-  line-height: 89px;
-}
-
-.mc-populated-blank-root.variant-sel-r1-g-stem.layout-token_sequence {
-  grid-template-columns: minmax(260px, auto) auto;
-  justify-content: center;
-}

package/src/delivery/cqt-css/sel-r1-gg-plus.css

@@ -1,29 +0,0 @@
-/* Source baseline: https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-gg_plusggg/0.0.1/question.css */
-.mc-populated-blank-root.variant-sel-r1-gg-plus {
-  font-family: Starial, Arial, sans-serif;
-  max-width: 875px;
-  margin-inline: auto;
-  --mpb-listen-button-size: 128px;
-  --mpb-choice-width-px: 155px;
-  --mpb-choice-tile-min-height: 11.25rem;
-  --mpb-choice-content-min-height: 9.375rem;
-  --pie-correct-answer-choice-hover-bg: #e2e2e2;
-  --pie-correct-answer-choice-selected-bg: #fcfcd3;
-}
-
-.mc-populated-blank-root.variant-sel-r1-gg-plus .pie-audio-transcript {
-  font-family: Roboto, Arial, sans-serif;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-}
-
-.mc-populated-blank-root.variant-sel-r1-gg-plus .pie-choice-label {
-  font-size: 1.9em;
-  line-height: 89px;
-}
-
-.mc-populated-blank-root.variant-sel-r1-gg-plus.layout-token_sequence {
-  grid-template-columns: minmax(260px, auto) auto;
-  justify-content: center;
-}

package/src/delivery/cqt-css/sel-r1-ggplus.css

@@ -1,34 +0,0 @@
-/* Source baseline: https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-_ggplusggg/0.0.1/question.css */
-.mc-populated-blank-root.variant-sel-r1-ggplus {
-  font-family: Starial, Arial, sans-serif;
-  max-width: 875px;
-  margin-inline: auto;
-  --mpb-listen-button-size: 128px;
-  --mpb-choice-width-px: 155px;
-  --mpb-choice-tile-min-height: 11.25rem;
-  --mpb-choice-content-min-height: 9.375rem;
-  --pie-correct-answer-choice-hover-bg: #e2e2e2;
-  --pie-correct-answer-choice-selected-bg: #fcfcd3;
-}
-
-.mc-populated-blank-root.variant-sel-r1-ggplus .pie-audio-transcript {
-  font-family: Roboto, Arial, sans-serif;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-}
-
-.mc-populated-blank-root.variant-sel-r1-ggplus .pie-choice-label {
-  font-size: 1.9em;
-  line-height: 89px;
-}
-
-.mc-populated-blank-root.variant-sel-r1-ggplus.layout-token_sequence {
-  grid-template-columns: minmax(260px, auto) auto;
-  justify-content: center;
-}
-
-/* In this variant, the blank appears before trailing tokens; avoid offsetting it. */
-.mc-populated-blank-root.variant-sel-r1-ggplus.layout-token_sequence .pie-blank-slot {
-  margin-left: 0;
-}

package/src/delivery/cqt-css/sel-r1-gplusggg.css

@@ -1,20 +0,0 @@
-/* Source baseline: https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-_gplusggg/0.0.1/question.css */
-.mc-populated-blank-root.variant-sel-r1-gplusggg {
-  font-family: Starial, Arial, sans-serif;
-  --mpb-listen-button-size: 128px;
-  --mpb-choice-width-px: 155px;
-  --mpb-choice-tile-min-height: 11.25rem;
-  --mpb-choice-content-min-height: 9.375rem;
-}
-
-.mc-populated-blank-root.variant-sel-r1-gplusggg .pie-audio-transcript {
-  font-family: Roboto, Arial, sans-serif;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-}
-
-.mc-populated-blank-root.variant-sel-r1-gplusggg .pie-choice-label {
-  font-size: 1.9em;
-  line-height: 89px;
-}

package/src/delivery/cqt-css/sel-r1-plusggg.css

@@ -1,20 +0,0 @@
-/* Source baseline: https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-_plusggg/0.0.1/question.css */
-.mc-populated-blank-root.variant-sel-r1-plusggg {
-  font-family: Starial, Arial, sans-serif;
-  --mpb-listen-button-size: 128px;
-  --mpb-choice-width-px: 155px;
-  --mpb-choice-tile-min-height: 11.25rem;
-  --mpb-choice-content-min-height: 9.375rem;
-}
-
-.mc-populated-blank-root.variant-sel-r1-plusggg .pie-audio-transcript {
-  font-family: Roboto, Arial, sans-serif;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-}
-
-.mc-populated-blank-root.variant-sel-r1-plusggg .pie-choice-label {
-  font-size: 1.9em;
-  line-height: 89px;
-}

package/src/delivery/cqt-css/sel-r1-s3.css

@@ -1,91 +0,0 @@
-/* Source baseline: https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-s3_plusggg/0.0.1/question.css */
-.mc-populated-blank-root.variant-sel-r1-s3 {
-  font-family: Starial, Arial, sans-serif;
-  max-width: 860px;
-  margin-inline: auto;
-  --mpb-listen-button-size: 128px;
-  --mpb-choice-width-px: 155px;
-  --mpb-choice-tile-min-height: 11.25rem;
-  --mpb-choice-content-min-height: 9.375rem;
-  --mpb-choice-group-gap: 0.35rem;
-  --mpb-choice-row-gap: 0.35rem;
-  --mpb-horizontal-choice-radio-top-margin: 0.25rem;
-  --mpb-stimulus-min-column: 240px;
-  --mpb-stimulus-grid-column-gap: 1.1rem;
-  --mpb-stimulus-choices-margin-top: 0.85rem;
-  --mpb-audio-blank-template-margin-bottom: 0.9rem;
-  --mpb-blank-wide-width: 6.8rem;
-}
-
-.mc-populated-blank-root.variant-sel-r1-s3 .pie-audio-transcript {
-  font-family: Roboto, Arial, sans-serif;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-}
-
-.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-label,
-.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-label :is(span, p, div) {
-  font-size: 1.9em;
-  line-height: 89px;
-  font-weight: 500;
-}
-
-.mc-populated-blank-root.variant-sel-r1-s3 .pie-blank-value,
-.mc-populated-blank-root.variant-sel-r1-s3 .pie-blank-value :is(span, p, div) {
-  font-size: 1.9em;
-  line-height: 1.1;
-  white-space: nowrap;
-}
-
-.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-horizontal .pie-choice-tile {
-  border-radius: 6px;
-  background: #f1f1f1;
-}
-
-.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank {
-  grid-template-columns: minmax(220px, auto) auto auto;
-  grid-template-areas:
-    "sentence template audio"
-    "choices choices choices";
-  justify-content: center;
-}
-
-.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-template-line {
-  grid-area: template;
-  justify-self: center;
-}
-
-.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-sentence-line {
-  justify-self: end;
-}
-
-.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-audio-container {
-  justify-self: start;
-  align-self: start;
-}
-
-.mc-populated-blank-root.variant-sel-r1-s3.layout-stimulus_image_blank .pie-choices-fieldset {
-  justify-self: center;
-  width: fit-content;
-}
-
-.mc-populated-blank-root.variant-sel-r1-s3 .pie-sentence-line img {
-  max-width: 100%;
-  height: auto;
-}
-
-.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-horizontal:hover .pie-choice-tile {
-  background: #e2e2e2;
-}
-
-.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-horizontal.is-selected .pie-choice-tile,
-.mc-populated-blank-root.variant-sel-r1-s3
-  .pie-choice-horizontal.is-selected:hover
-  .pie-choice-tile {
-  background: #fcfcd3;
-}
-
-.mc-populated-blank-root.variant-sel-r1-s3 .pie-choice-horizontal .pie-choice-radio {
-  transform: scale(0.85);
-}

package/src/delivery/cqt-css/sel-vic.css

@@ -1,38 +0,0 @@
-/* Source baseline: https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_vic/0.0.1/question.css */
-.mc-populated-blank-root.variant-sel-vic {
-  font-family: Starial, Arial, sans-serif;
-  font-size: 1.5em;
-  max-width: 800px;
-  margin-inline: auto;
-  --mpb-inline-grid-column-gap: 1rem;
-  --mpb-inline-grid-row-gap: 0.5rem;
-  --mpb-inline-template-margin-top: 0.2rem;
-  --mpb-inline-choices-margin-top: 0.2rem;
-  --pie-correct-answer-choice-hover-bg: #e2e2e2;
-  --pie-correct-answer-choice-selected-bg: #fcfcd3;
-}
-
-.mc-populated-blank-root.variant-sel-vic .pie-audio-transcript {
-  font-family: Roboto, Arial, sans-serif;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-}
-
-.mc-populated-blank-root.variant-sel-vic .pie-template-line,
-.mc-populated-blank-root.variant-sel-vic .pie-blank-value,
-.mc-populated-blank-root.variant-sel-vic .pie-choice-label {
-  line-height: 123%;
-}
-
-.mc-populated-blank-root.variant-sel-vic .pie-audio-container {
-  min-height: 128px;
-}
-
-@media (min-width: 620px) {
-  .mc-populated-blank-root.variant-sel-vic .pie-audio-transcript {
-    min-width: 620px;
-    max-width: 800px;
-    transform: translateX(-55px);
-  }
-}

package/src/delivery/cqt-css/sr-vic.css

@@ -1,14 +0,0 @@
-/* Source baseline: https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sr-vic/0.0.1/question.css */
-.mc-populated-blank-root.variant-sr-vic {
-  font-family: Starial, Arial, sans-serif;
-  --mpb-inline-grid-column-gap: 1rem;
-  --mpb-inline-grid-row-gap: 0.5rem;
-  --mpb-inline-template-margin-top: 0.2rem;
-  --mpb-inline-choices-margin-top: 0.2rem;
-}
-
-.mc-populated-blank-root.variant-sr-vic .pie-template-line,
-.mc-populated-blank-root.variant-sr-vic .pie-blank-value,
-.mc-populated-blank-root.variant-sr-vic .pie-choice-label {
-  line-height: 123%;
-}

package/src/delivery/index.ts

@@ -1,103 +0,0 @@
-import McPopulatedBlankComponent from './McPopulatedBlank.svelte';
-import { isComplete as isControllerComplete } from '../controller';
-
-const SvelteElementClass = (McPopulatedBlankComponent as any).element;
-
-class McPopulatedBlankElement extends SvelteElementClass {
-  _internalSession: any = null;
-  _model: any = null;
-  _options: any = null;
-  audioComplete = false;
-
-  _dispatchModelSet = () => {
-    this.dispatchEvent(
-      new CustomEvent('model-set', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          complete: this._isComplete(),
-          component: this.tagName.toLowerCase(),
-          hasModel: this._model !== undefined,
-        },
-      })
-    );
-  };
-
-  _dispatchSessionChanged = () => {
-    this.dispatchEvent(
-      new CustomEvent('session-changed', {
-        bubbles: true,
-        composed: true,
-        detail: {
-          complete: this._isComplete(),
-          component: this.tagName.toLowerCase(),
-        },
-      })
-    );
-  };
-
-  set model(m: any) {
-    this._model = m;
-    this.audioComplete = false;
-    super.model = m;
-    this._dispatchModelSet();
-  }
-
-  get model() {
-    return this._model;
-  }
-
-  set session(s: any) {
-    this._internalSession = s;
-    super.session = s;
-    this._dispatchSessionChanged();
-  }
-
-  get session() {
-    return this._internalSession;
-  }
-
-  set options(o: any) {
-    this._options = o;
-    super.options = o;
-  }
-
-  get options() {
-    return this._options;
-  }
-
-  onSessionChange = (updatedSession: any) => {
-    this._internalSession = updatedSession;
-    super.session = updatedSession;
-    this._dispatchSessionChanged();
-  };
-
-  onAudioStarted = () => {
-    this._internalSession = {
-      ...(this._internalSession || {}),
-      audioStartTime: new Date().getTime(),
-    };
-  };
-
-  onAudioEnded = () => {
-    this.audioComplete = true;
-    this._internalSession = {
-      ...(this._internalSession || {}),
-      audioEndTime: new Date().getTime(),
-    };
-    this._dispatchSessionChanged();
-  };
-
-  _isComplete = () => {
-    return isControllerComplete(this._model, this._internalSession, this.audioComplete);
-  };
-
-  connectedCallback() {
-    super.connectedCallback();
-    (this as any).onSessionChange = this.onSessionChange;
-    (this as any).onAudioStarted = this.onAudioStarted;
-    (this as any).onAudioEnded = this.onAudioEnded;
-  }
-}
-
-export default McPopulatedBlankElement;

package/src/delivery/variant-css-map.ts

@@ -1,110 +0,0 @@
-import selR1PlusgggCss from './cqt-css/sel-r1-plusggg.css?raw';
-import srVicCss from './cqt-css/sr-vic.css?raw';
-import selVicCss from './cqt-css/sel-vic.css?raw';
-import selR1GplusgggCss from './cqt-css/sel-r1-gplusggg.css?raw';
-import selR1GStemCss from './cqt-css/sel-r1-g-stem.css?raw';
-import selR1GgPlusCss from './cqt-css/sel-r1-gg-plus.css?raw';
-import selR1GgplusCss from './cqt-css/sel-r1-ggplus.css?raw';
-import selR1S3Css from './cqt-css/sel-r1-s3.css?raw';
-
-export type VariantCssConfig = {
-  variantId: string;
-  variantClass: string;
-  sourceUrl: string;
-  cssText: string;
-};
-
-const VARIANT_BY_CUSTOM_TYPE: Record<string, VariantCssConfig> = {
-  'sel_r1-_plusggg': {
-    variantId: 'sel-r1-plusggg',
-    variantClass: 'variant-sel-r1-plusggg',
-    sourceUrl:
-      'https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-_plusggg/0.0.1/question.css',
-    cssText: selR1PlusgggCss,
-  },
-  'sr-vic': {
-    variantId: 'sr-vic',
-    variantClass: 'variant-sr-vic',
-    sourceUrl:
-      'https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sr-vic/0.0.1/question.css',
-    cssText: srVicCss,
-  },
-  sel_vic: {
-    variantId: 'sel-vic',
-    variantClass: 'variant-sel-vic',
-    sourceUrl:
-      'https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_vic/0.0.1/question.css',
-    cssText: selVicCss,
-  },
-  'sel_r1-_gplusggg': {
-    variantId: 'sel-r1-gplusggg',
-    variantClass: 'variant-sel-r1-gplusggg',
-    sourceUrl:
-      'https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-_gplusggg/0.0.1/question.css',
-    cssText: selR1GplusgggCss,
-  },
-  'sel_r1-g_plusggg': {
-    variantId: 'sel-r1-g-stem',
-    variantClass: 'variant-sel-r1-g-stem',
-    sourceUrl:
-      'https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-g_plusggg/0.0.1/question.css',
-    cssText: selR1GStemCss,
-  },
-  'sel_r1-gg_plusggg': {
-    variantId: 'sel-r1-gg-plus',
-    variantClass: 'variant-sel-r1-gg-plus',
-    sourceUrl:
-      'https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-gg_plusggg/0.0.1/question.css',
-    cssText: selR1GgPlusCss,
-  },
-  'sel_r1-_ggplusggg': {
-    variantId: 'sel-r1-ggplus',
-    variantClass: 'variant-sel-r1-ggplus',
-    sourceUrl:
-      'https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-_ggplusggg/0.0.1/question.css',
-    cssText: selR1GgplusCss,
-  },
-  'sel_r1-s3_plusggg': {
-    variantId: 'sel-r1-s3',
-    variantClass: 'variant-sel-r1-s3',
-    sourceUrl:
-      'https://global-pr-ibvcustomfiles.renaissance-go.com/learnosity/sel_r1-s3_plusggg/0.0.1/question.css',
-    cssText: selR1S3Css,
-  },
-};
-
-const normalizeCustomType = (value: unknown): string => {
-  const normalized = String(value || '')
-    .trim()
-    .toLowerCase();
-  // Accept both base custom types and version-suffixed tags like "...v0.0.1".
-  return normalized.replace(/v\d+\.\d+\.\d+$/i, '');
-};
-
-export const getVariantCssConfig = (customType: unknown): VariantCssConfig | undefined => {
-  const normalized = normalizeCustomType(customType);
-  return VARIANT_BY_CUSTOM_TYPE[normalized];
-};
-
-export const getVariantRootClass = (customType: unknown): string => {
-  return getVariantCssConfig(customType)?.variantClass || '';
-};
-
-export const ensureVariantCssInjected = (config?: VariantCssConfig): void => {
-  if (!config || !config.cssText || typeof document === 'undefined') {
-    return;
-  }
-  const styleId = `mc-populated-blank-css-${config.variantId}`;
-  const existing = document.getElementById(styleId) as HTMLStyleElement | null;
-  if (existing) {
-    if (existing.textContent !== config.cssText) {
-      existing.textContent = config.cssText;
-    }
-    return;
-  }
-  const style = document.createElement('style');
-  style.id = styleId;
-  style.setAttribute('data-mpb-variant', config.variantId);
-  style.textContent = config.cssText;
-  document.head.appendChild(style);
-};

package/src/index.iife.ts

@@ -1,13 +0,0 @@
-/**
- * IIFE entry for mc-populated-blank delivery.
- * Registration is handled by PIE players/loaders, not by the element bundle itself.
- */
-import Element from './delivery';
-import * as controllerModule from './controller';
-
-// Ensure the IIFE package exposes a plain controller object with callable
-// `model`/`outcome` functions on the top-level `controller` property.
-const controller = { ...controllerModule };
-
-export { controller };
-export default Element;

package/src/index.ts

@@ -1 +0,0 @@
-export { default } from './delivery/index';

package/src/print/Print.svelte

@@ -1,95 +0,0 @@
-<svelte:options
-  customElement={{
-    shadow: 'none',
-    props: {
-      model: { type: 'Object' },
-    },
-  }}
-/>
-
-<script lang="ts">
-const BLANK_TOKEN = '{{blank}}';
-
-let { model = null }: { model?: any } = $props();
-
-let prompt = $state('');
-let template = $state('');
-$effect(() => {
-  prompt = model?.prompt || '';
-  template = model?.template || '';
-});
-
-const parts = $derived.by(() => {
-  const idx = template.indexOf(BLANK_TOKEN);
-  if (idx < 0) return { before: template, after: '' };
-  return { before: template.slice(0, idx), after: template.slice(idx + BLANK_TOKEN.length) };
-});
-
-const choices = $derived(Array.isArray(model?.choices) ? model.choices : []);
-const correct = $derived(model?.choices?.find((c: any) => c.id === model?.correctChoiceId));
-const mode = $derived(model?.choiceMode || 'text');
-const isAudioOnlyMode = $derived(model?.interactionMode === 'audio_mc_only');
-const showAnswerKey = $derived(model?.printAnswerKey !== false);
-</script>
-
-<div class="p-4 print:p-0">
-  {#if prompt && model?.promptEnabled !== false}
-    <div class="mb-4 prose prose-sm">{@html prompt}</div>
-  {/if}
-
-  {#if model?.sentenceHtml}
-    <div class="mb-2 prose prose-sm">{@html model.sentenceHtml}</div>
-  {/if}
-
-  {#if !isAudioOnlyMode}
-    <div class="mb-4 prose prose-sm">
-      {@html parts.before}
-      <span class="inline-block min-w-[6rem] border-b-2 border-gray-600 print:border-black px-1">
-        {#if showAnswerKey && mode === 'image' && correct?.imageUrl}
-          <img src={correct.imageUrl} alt={correct.imageAlt || ''} class="max-h-14 object-contain" />
-        {:else if showAnswerKey && correct?.labelHtml}
-          {@html correct.labelHtml}
-        {:else}
-          ________
-        {/if}
-      </span>
-      {@html parts.after}
-    </div>
-  {/if}
-
-  {#if model?.hasAudio}
-    <div class="text-sm mb-4">
-      {#if model?.audioUrl}
-        <div><strong>Audio:</strong> {model.audioUrl}</div>
-      {/if}
-      {#if model?.audioTranscript}
-        <div><strong>Transcript:</strong> {model.audioTranscript}</div>
-      {/if}
-    </div>
-  {/if}
-
-  <ul class="text-sm list-disc pl-5">
-    {#each choices as c}
-      <li>
-        {#if mode === 'image'}
-          <span class="font-medium">{c.id}</span>
-          {#if showAnswerKey && c.id === model?.correctChoiceId}(key){/if}
-        {:else}
-          {@html c.labelHtml || ''}
-          {#if showAnswerKey && c.id === model?.correctChoiceId}
-            <span class="font-medium"> (key)</span>
-          {/if}
-        {/if}
-      </li>
-    {/each}
-  </ul>
-</div>
-
-<style>
-  .prose :global(p) {
-    margin: 0.5em 0;
-  }
-  .prose :global(strong) {
-    font-weight: 600;
-  }
-</style>

package/src/print/index.ts

@@ -1,18 +0,0 @@
-import PrintComponent from './Print.svelte';
-
-const SvelteElementClass = (PrintComponent as any).element;
-
-class McPopulatedBlankPrint extends SvelteElementClass {
-  private _model: any = null;
-
-  set model(m: any) {
-    this._model = m;
-    super.model = m;
-  }
-
-  get model() {
-    return this._model;
-  }
-}
-
-export default McPopulatedBlankPrint;

package/src/types/css-raw.d.ts

@@ -1,4 +0,0 @@
-declare module '*.css?raw' {
-  const css: string;
-  export default css;
-}