framework7 8.2.0 → 8.3.1

package/framework7-bundle.js

@@ -1,13 +1,13 @@
 /**
- * Framework7 8.2.0
+ * Framework7 8.3.1
  * Full featured mobile HTML framework for building iOS & Android apps
  * https://framework7.io/
  *
- * Copyright 2014-2023 Vladimir Kharlampidi
+ * Copyright 2014-2024 Vladimir Kharlampidi
  *
  * Released under the MIT License
  *
- * Released on: July 6, 2023
+ * Released on: February 5, 2024
  */
 
 (function (global, factory) {
@@ -1530,6 +1530,9 @@
     function clampInt(min, max, input) {
       return input < min ? min : input > max ? max : input;
     }
+    function clampDouble(min, max, input) {
+      return input < min ? min : input > max ? max : input;
+    }
     function sanitizeDegreesDouble(degrees) {
       return (degrees %= 360) < 0 && (degrees += 360), degrees;
     }
@@ -1580,6 +1583,9 @@
     function yFromLstar(lstar) {
       return 100 * labInvf((lstar + 16) / 116);
     }
+    function lstarFromY(y) {
+      return 116 * labF(y / 100) - 16;
+    }
     function linearized(rgbComponent) {
       const normalized = rgbComponent / 255;
       return normalized <= .040449936 ? normalized / 12.92 * 100 : 100 * Math.pow((normalized + .055) / 1.055, 2.4);
@@ -1758,6 +1764,68 @@
           bF = bC / viewingConditions.rgbD[2];
         return argbFromXyz(1.86206786 * rF - 1.01125463 * gF + .14918677 * bF, .38752654 * rF + .62144744 * gF - .00897398 * bF, -.0158415 * rF - .03412294 * gF + 1.04996444 * bF);
       }
+      static fromXyzInViewingConditions(x, y, z, viewingConditions) {
+        const rC = .401288 * x + .650173 * y - .051461 * z,
+          gC = -.250268 * x + 1.204414 * y + .045854 * z,
+          bC = -.002079 * x + .048952 * y + .953127 * z,
+          rD = viewingConditions.rgbD[0] * rC,
+          gD = viewingConditions.rgbD[1] * gC,
+          bD = viewingConditions.rgbD[2] * bC,
+          rAF = Math.pow(viewingConditions.fl * Math.abs(rD) / 100, .42),
+          gAF = Math.pow(viewingConditions.fl * Math.abs(gD) / 100, .42),
+          bAF = Math.pow(viewingConditions.fl * Math.abs(bD) / 100, .42),
+          rA = 400 * signum(rD) * rAF / (rAF + 27.13),
+          gA = 400 * signum(gD) * gAF / (gAF + 27.13),
+          bA = 400 * signum(bD) * bAF / (bAF + 27.13),
+          a = (11 * rA + -12 * gA + bA) / 11,
+          b = (rA + gA - 2 * bA) / 9,
+          u = (20 * rA + 20 * gA + 21 * bA) / 20,
+          p2 = (40 * rA + 20 * gA + bA) / 20,
+          atanDegrees = 180 * Math.atan2(b, a) / Math.PI,
+          hue = atanDegrees < 0 ? atanDegrees + 360 : atanDegrees >= 360 ? atanDegrees - 360 : atanDegrees,
+          hueRadians = hue * Math.PI / 180,
+          ac = p2 * viewingConditions.nbb,
+          J = 100 * Math.pow(ac / viewingConditions.aw, viewingConditions.c * viewingConditions.z),
+          Q = 4 / viewingConditions.c * Math.sqrt(J / 100) * (viewingConditions.aw + 4) * viewingConditions.fLRoot,
+          huePrime = hue < 20.14 ? hue + 360 : hue,
+          t = 5e4 / 13 * (1 / 4 * (Math.cos(huePrime * Math.PI / 180 + 2) + 3.8)) * viewingConditions.nc * viewingConditions.ncb * Math.sqrt(a * a + b * b) / (u + .305),
+          alpha = Math.pow(t, .9) * Math.pow(1.64 - Math.pow(.29, viewingConditions.n), .73),
+          C = alpha * Math.sqrt(J / 100),
+          M = C * viewingConditions.fLRoot,
+          s = 50 * Math.sqrt(alpha * viewingConditions.c / (viewingConditions.aw + 4)),
+          jstar = (1 + 100 * .007) * J / (1 + .007 * J),
+          mstar = Math.log(1 + .0228 * M) / .0228,
+          astar = mstar * Math.cos(hueRadians),
+          bstar = mstar * Math.sin(hueRadians);
+        return new Cam16(hue, C, J, Q, M, s, jstar, astar, bstar);
+      }
+      xyzInViewingConditions(viewingConditions) {
+        const alpha = 0 === this.chroma || 0 === this.j ? 0 : this.chroma / Math.sqrt(this.j / 100),
+          t = Math.pow(alpha / Math.pow(1.64 - Math.pow(.29, viewingConditions.n), .73), 1 / .9),
+          hRad = this.hue * Math.PI / 180,
+          eHue = .25 * (Math.cos(hRad + 2) + 3.8),
+          ac = viewingConditions.aw * Math.pow(this.j / 100, 1 / viewingConditions.c / viewingConditions.z),
+          p1 = eHue * (5e4 / 13) * viewingConditions.nc * viewingConditions.ncb,
+          p2 = ac / viewingConditions.nbb,
+          hSin = Math.sin(hRad),
+          hCos = Math.cos(hRad),
+          gamma = 23 * (p2 + .305) * t / (23 * p1 + 11 * t * hCos + 108 * t * hSin),
+          a = gamma * hCos,
+          b = gamma * hSin,
+          rA = (460 * p2 + 451 * a + 288 * b) / 1403,
+          gA = (460 * p2 - 891 * a - 261 * b) / 1403,
+          bA = (460 * p2 - 220 * a - 6300 * b) / 1403,
+          rCBase = Math.max(0, 27.13 * Math.abs(rA) / (400 - Math.abs(rA))),
+          rC = signum(rA) * (100 / viewingConditions.fl) * Math.pow(rCBase, 1 / .42),
+          gCBase = Math.max(0, 27.13 * Math.abs(gA) / (400 - Math.abs(gA))),
+          gC = signum(gA) * (100 / viewingConditions.fl) * Math.pow(gCBase, 1 / .42),
+          bCBase = Math.max(0, 27.13 * Math.abs(bA) / (400 - Math.abs(bA))),
+          bC = signum(bA) * (100 / viewingConditions.fl) * Math.pow(bCBase, 1 / .42),
+          rF = rC / viewingConditions.rgbD[0],
+          gF = gC / viewingConditions.rgbD[1],
+          bF = bC / viewingConditions.rgbD[2];
+        return [1.86206786 * rF - 1.01125463 * gF + .14918677 * bF, .38752654 * rF + .62144744 * gF - .00897398 * bF, -.0158415 * rF - .03412294 * gF + 1.04996444 * bF];
+      }
     }
     class HctSolver {
       static sanitizeRadians(angle) {
@@ -1950,6 +2018,11 @@
         const cam = Cam16.fromInt(argb);
         this.internalHue = cam.hue, this.internalChroma = cam.chroma, this.internalTone = lstarFromArgb(argb), this.argb = argb;
       }
+      inViewingConditions(vc) {
+        const viewedInVc = Cam16.fromInt(this.toInt()).xyzInViewingConditions(vc),
+          recastInVc = Cam16.fromXyzInViewingConditions(viewedInVc[0], viewedInVc[1], viewedInVc[2], ViewingConditions.make());
+        return Hct.from(recastInVc.hue, recastInVc.chroma, lstarFromY(viewedInVc[1]));
+      }
     }
     class Blend {
       static harmonize(designColor, sourceColor) {
@@ -1978,21 +2051,565 @@
         return Cam16.fromUcs(jstar, astar, bstar).toInt();
       }
     }
+    class Contrast {
+      static ratioOfTones(toneA, toneB) {
+        return toneA = clampDouble(0, 100, toneA), toneB = clampDouble(0, 100, toneB), Contrast.ratioOfYs(yFromLstar(toneA), yFromLstar(toneB));
+      }
+      static ratioOfYs(y1, y2) {
+        const lighter = y1 > y2 ? y1 : y2;
+        return (lighter + 5) / ((lighter === y2 ? y1 : y2) + 5);
+      }
+      static lighter(tone, ratio) {
+        if (tone < 0 || tone > 100) return -1;
+        const darkY = yFromLstar(tone),
+          lightY = ratio * (darkY + 5) - 5,
+          realContrast = Contrast.ratioOfYs(lightY, darkY),
+          delta = Math.abs(realContrast - ratio);
+        if (realContrast < ratio && delta > .04) return -1;
+        const returnValue = lstarFromY(lightY) + .4;
+        return returnValue < 0 || returnValue > 100 ? -1 : returnValue;
+      }
+      static darker(tone, ratio) {
+        if (tone < 0 || tone > 100) return -1;
+        const lightY = yFromLstar(tone),
+          darkY = (lightY + 5) / ratio - 5,
+          realContrast = Contrast.ratioOfYs(lightY, darkY),
+          delta = Math.abs(realContrast - ratio);
+        if (realContrast < ratio && delta > .04) return -1;
+        const returnValue = lstarFromY(darkY) - .4;
+        return returnValue < 0 || returnValue > 100 ? -1 : returnValue;
+      }
+      static lighterUnsafe(tone, ratio) {
+        const lighterSafe = Contrast.lighter(tone, ratio);
+        return lighterSafe < 0 ? 100 : lighterSafe;
+      }
+      static darkerUnsafe(tone, ratio) {
+        const darkerSafe = Contrast.darker(tone, ratio);
+        return darkerSafe < 0 ? 0 : darkerSafe;
+      }
+    }
+    class DislikeAnalyzer {
+      static isDisliked(hct) {
+        const huePasses = Math.round(hct.hue) >= 90 && Math.round(hct.hue) <= 111,
+          chromaPasses = Math.round(hct.chroma) > 16,
+          tonePasses = Math.round(hct.tone) < 65;
+        return huePasses && chromaPasses && tonePasses;
+      }
+      static fixIfDisliked(hct) {
+        return DislikeAnalyzer.isDisliked(hct) ? Hct.from(hct.hue, hct.chroma, 70) : hct;
+      }
+    }
+    class DynamicColor {
+      static fromPalette(args) {
+        return new DynamicColor(args.name ?? "", args.palette, args.tone, args.isBackground ?? !1, args.background, args.secondBackground, args.contrastCurve, args.toneDeltaPair);
+      }
+      constructor(name, palette, tone, isBackground, background, secondBackground, contrastCurve, toneDeltaPair) {
+        if (this.name = name, this.palette = palette, this.tone = tone, this.isBackground = isBackground, this.background = background, this.secondBackground = secondBackground, this.contrastCurve = contrastCurve, this.toneDeltaPair = toneDeltaPair, this.hctCache = new Map(), !background && secondBackground) throw new Error(`Color ${name} has secondBackgrounddefined, but background is not defined.`);
+        if (!background && contrastCurve) throw new Error(`Color ${name} has contrastCurvedefined, but background is not defined.`);
+        if (background && !contrastCurve) throw new Error(`Color ${name} has backgrounddefined, but contrastCurve is not defined.`);
+      }
+      getArgb(scheme) {
+        return this.getHct(scheme).toInt();
+      }
+      getHct(scheme) {
+        const cachedAnswer = this.hctCache.get(scheme);
+        if (null != cachedAnswer) return cachedAnswer;
+        const tone = this.getTone(scheme),
+          answer = this.palette(scheme).getHct(tone);
+        return this.hctCache.size > 4 && this.hctCache.clear(), this.hctCache.set(scheme, answer), answer;
+      }
+      getTone(scheme) {
+        const decreasingContrast = scheme.contrastLevel < 0;
+        if (this.toneDeltaPair) {
+          const toneDeltaPair = this.toneDeltaPair(scheme),
+            roleA = toneDeltaPair.roleA,
+            roleB = toneDeltaPair.roleB,
+            delta = toneDeltaPair.delta,
+            polarity = toneDeltaPair.polarity,
+            stayTogether = toneDeltaPair.stayTogether,
+            bgTone = this.background(scheme).getTone(scheme),
+            aIsNearer = "nearer" === polarity || "lighter" === polarity && !scheme.isDark || "darker" === polarity && scheme.isDark,
+            nearer = aIsNearer ? roleA : roleB,
+            farther = aIsNearer ? roleB : roleA,
+            amNearer = this.name === nearer.name,
+            expansionDir = scheme.isDark ? 1 : -1,
+            nContrast = nearer.contrastCurve.getContrast(scheme.contrastLevel),
+            fContrast = farther.contrastCurve.getContrast(scheme.contrastLevel),
+            nInitialTone = nearer.tone(scheme);
+          let nTone = Contrast.ratioOfTones(bgTone, nInitialTone) >= nContrast ? nInitialTone : DynamicColor.foregroundTone(bgTone, nContrast);
+          const fInitialTone = farther.tone(scheme);
+          let fTone = Contrast.ratioOfTones(bgTone, fInitialTone) >= fContrast ? fInitialTone : DynamicColor.foregroundTone(bgTone, fContrast);
+          return decreasingContrast && (nTone = DynamicColor.foregroundTone(bgTone, nContrast), fTone = DynamicColor.foregroundTone(bgTone, fContrast)), (fTone - nTone) * expansionDir >= delta || (fTone = clampDouble(0, 100, nTone + delta * expansionDir), (fTone - nTone) * expansionDir >= delta || (nTone = clampDouble(0, 100, fTone - delta * expansionDir))), 50 <= nTone && nTone < 60 ? expansionDir > 0 ? (nTone = 60, fTone = Math.max(fTone, nTone + delta * expansionDir)) : (nTone = 49, fTone = Math.min(fTone, nTone + delta * expansionDir)) : 50 <= fTone && fTone < 60 && (stayTogether ? expansionDir > 0 ? (nTone = 60, fTone = Math.max(fTone, nTone + delta * expansionDir)) : (nTone = 49, fTone = Math.min(fTone, nTone + delta * expansionDir)) : fTone = expansionDir > 0 ? 60 : 49), amNearer ? nTone : fTone;
+        }
+        {
+          let answer = this.tone(scheme);
+          if (null == this.background) return answer;
+          const bgTone = this.background(scheme).getTone(scheme),
+            desiredRatio = this.contrastCurve.getContrast(scheme.contrastLevel);
+          if (Contrast.ratioOfTones(bgTone, answer) >= desiredRatio || (answer = DynamicColor.foregroundTone(bgTone, desiredRatio)), decreasingContrast && (answer = DynamicColor.foregroundTone(bgTone, desiredRatio)), this.isBackground && 50 <= answer && answer < 60 && (answer = Contrast.ratioOfTones(49, bgTone) >= desiredRatio ? 49 : 60), this.secondBackground) {
+            const [bg1, bg2] = [this.background, this.secondBackground],
+              [bgTone1, bgTone2] = [bg1(scheme).getTone(scheme), bg2(scheme).getTone(scheme)],
+              [upper, lower] = [Math.max(bgTone1, bgTone2), Math.min(bgTone1, bgTone2)];
+            if (Contrast.ratioOfTones(upper, answer) >= desiredRatio && Contrast.ratioOfTones(lower, answer) >= desiredRatio) return answer;
+            const lightOption = Contrast.lighter(upper, desiredRatio),
+              darkOption = Contrast.darker(lower, desiredRatio),
+              availables = [];
+            -1 !== lightOption && availables.push(lightOption), -1 !== darkOption && availables.push(darkOption);
+            return DynamicColor.tonePrefersLightForeground(bgTone1) || DynamicColor.tonePrefersLightForeground(bgTone2) ? lightOption < 0 ? 100 : lightOption : 1 === availables.length ? availables[0] : darkOption < 0 ? 0 : darkOption;
+          }
+          return answer;
+        }
+      }
+      static foregroundTone(bgTone, ratio) {
+        const lighterTone = Contrast.lighterUnsafe(bgTone, ratio),
+          darkerTone = Contrast.darkerUnsafe(bgTone, ratio),
+          lighterRatio = Contrast.ratioOfTones(lighterTone, bgTone),
+          darkerRatio = Contrast.ratioOfTones(darkerTone, bgTone);
+        if (DynamicColor.tonePrefersLightForeground(bgTone)) {
+          const negligibleDifference = Math.abs(lighterRatio - darkerRatio) < .1 && lighterRatio < ratio && darkerRatio < ratio;
+          return lighterRatio >= ratio || lighterRatio >= darkerRatio || negligibleDifference ? lighterTone : darkerTone;
+        }
+        return darkerRatio >= ratio || darkerRatio >= lighterRatio ? darkerTone : lighterTone;
+      }
+      static tonePrefersLightForeground(tone) {
+        return Math.round(tone) < 60;
+      }
+      static toneAllowsLightForeground(tone) {
+        return Math.round(tone) <= 49;
+      }
+      static enableLightForeground(tone) {
+        return DynamicColor.tonePrefersLightForeground(tone) && !DynamicColor.toneAllowsLightForeground(tone) ? 49 : tone;
+      }
+    }
+    var Variant;
+    !function (Variant) {
+      Variant[Variant.MONOCHROME = 0] = "MONOCHROME", Variant[Variant.NEUTRAL = 1] = "NEUTRAL", Variant[Variant.TONAL_SPOT = 2] = "TONAL_SPOT", Variant[Variant.VIBRANT = 3] = "VIBRANT", Variant[Variant.EXPRESSIVE = 4] = "EXPRESSIVE", Variant[Variant.FIDELITY = 5] = "FIDELITY", Variant[Variant.CONTENT = 6] = "CONTENT", Variant[Variant.RAINBOW = 7] = "RAINBOW", Variant[Variant.FRUIT_SALAD = 8] = "FRUIT_SALAD";
+    }(Variant || (Variant = {}));
+    class ContrastCurve {
+      constructor(low, normal, medium, high) {
+        this.low = low, this.normal = normal, this.medium = medium, this.high = high;
+      }
+      getContrast(contrastLevel) {
+        return contrastLevel <= -1 ? this.low : contrastLevel < 0 ? lerp(this.low, this.normal, (contrastLevel - -1) / 1) : contrastLevel < .5 ? lerp(this.normal, this.medium, (contrastLevel - 0) / .5) : contrastLevel < 1 ? lerp(this.medium, this.high, (contrastLevel - .5) / .5) : this.high;
+      }
+    }
+    class ToneDeltaPair {
+      constructor(roleA, roleB, delta, polarity, stayTogether) {
+        this.roleA = roleA, this.roleB = roleB, this.delta = delta, this.polarity = polarity, this.stayTogether = stayTogether;
+      }
+    }
+    function isFidelity(scheme) {
+      return scheme.variant === Variant.FIDELITY || scheme.variant === Variant.CONTENT;
+    }
+    function isMonochrome(scheme) {
+      return scheme.variant === Variant.MONOCHROME;
+    }
+    function findDesiredChromaByTone(hue, chroma, tone, byDecreasingTone) {
+      let answer = tone,
+        closestToChroma = Hct.from(hue, chroma, tone);
+      if (closestToChroma.chroma < chroma) {
+        let chromaPeak = closestToChroma.chroma;
+        for (; closestToChroma.chroma < chroma;) {
+          answer += byDecreasingTone ? -1 : 1;
+          const potentialSolution = Hct.from(hue, chroma, answer);
+          if (chromaPeak > potentialSolution.chroma) break;
+          if (Math.abs(potentialSolution.chroma - chroma) < .4) break;
+          Math.abs(potentialSolution.chroma - chroma) < Math.abs(closestToChroma.chroma - chroma) && (closestToChroma = potentialSolution), chromaPeak = Math.max(chromaPeak, potentialSolution.chroma);
+        }
+      }
+      return answer;
+    }
+    function viewingConditionsForAlbers(scheme) {
+      return ViewingConditions.make(void 0, void 0, scheme.isDark ? 30 : 80, void 0, void 0);
+    }
+    function performAlbers(prealbers, scheme) {
+      const albersd = prealbers.inViewingConditions(viewingConditionsForAlbers(scheme));
+      return DynamicColor.tonePrefersLightForeground(prealbers.tone) && !DynamicColor.toneAllowsLightForeground(albersd.tone) ? DynamicColor.enableLightForeground(prealbers.tone) : DynamicColor.enableLightForeground(albersd.tone);
+    }
+    class MaterialDynamicColors {
+      static highestSurface(s) {
+        return s.isDark ? MaterialDynamicColors.surfaceBright : MaterialDynamicColors.surfaceDim;
+      }
+    }
+    MaterialDynamicColors.contentAccentToneDelta = 15, MaterialDynamicColors.primaryPaletteKeyColor = DynamicColor.fromPalette({
+      name: "primary_palette_key_color",
+      palette: s => s.primaryPalette,
+      tone: s => s.primaryPalette.keyColor.tone
+    }), MaterialDynamicColors.secondaryPaletteKeyColor = DynamicColor.fromPalette({
+      name: "secondary_palette_key_color",
+      palette: s => s.secondaryPalette,
+      tone: s => s.secondaryPalette.keyColor.tone
+    }), MaterialDynamicColors.tertiaryPaletteKeyColor = DynamicColor.fromPalette({
+      name: "tertiary_palette_key_color",
+      palette: s => s.tertiaryPalette,
+      tone: s => s.tertiaryPalette.keyColor.tone
+    }), MaterialDynamicColors.neutralPaletteKeyColor = DynamicColor.fromPalette({
+      name: "neutral_palette_key_color",
+      palette: s => s.neutralPalette,
+      tone: s => s.neutralPalette.keyColor.tone
+    }), MaterialDynamicColors.neutralVariantPaletteKeyColor = DynamicColor.fromPalette({
+      name: "neutral_variant_palette_key_color",
+      palette: s => s.neutralVariantPalette,
+      tone: s => s.neutralVariantPalette.keyColor.tone
+    }), MaterialDynamicColors.background = DynamicColor.fromPalette({
+      name: "background",
+      palette: s => s.neutralPalette,
+      tone: s => s.isDark ? 6 : 98,
+      isBackground: !0
+    }), MaterialDynamicColors.onBackground = DynamicColor.fromPalette({
+      name: "on_background",
+      palette: s => s.neutralPalette,
+      tone: s => s.isDark ? 90 : 10,
+      background: s => MaterialDynamicColors.background,
+      contrastCurve: new ContrastCurve(3, 3, 4.5, 7)
+    }), MaterialDynamicColors.surface = DynamicColor.fromPalette({
+      name: "surface",
+      palette: s => s.neutralPalette,
+      tone: s => s.isDark ? 6 : 98,
+      isBackground: !0
+    }), MaterialDynamicColors.surfaceDim = DynamicColor.fromPalette({
+      name: "surface_dim",
+      palette: s => s.neutralPalette,
+      tone: s => s.isDark ? 6 : 87,
+      isBackground: !0
+    }), MaterialDynamicColors.surfaceBright = DynamicColor.fromPalette({
+      name: "surface_bright",
+      palette: s => s.neutralPalette,
+      tone: s => s.isDark ? 24 : 98,
+      isBackground: !0
+    }), MaterialDynamicColors.surfaceContainerLowest = DynamicColor.fromPalette({
+      name: "surface_container_lowest",
+      palette: s => s.neutralPalette,
+      tone: s => s.isDark ? 4 : 100,
+      isBackground: !0
+    }), MaterialDynamicColors.surfaceContainerLow = DynamicColor.fromPalette({
+      name: "surface_container_low",
+      palette: s => s.neutralPalette,
+      tone: s => s.isDark ? 10 : 96,
+      isBackground: !0
+    }), MaterialDynamicColors.surfaceContainer = DynamicColor.fromPalette({
+      name: "surface_container",
+      palette: s => s.neutralPalette,
+      tone: s => s.isDark ? 12 : 94,
+      isBackground: !0
+    }), MaterialDynamicColors.surfaceContainerHigh = DynamicColor.fromPalette({
+      name: "surface_container_high",
+      palette: s => s.neutralPalette,
+      tone: s => s.isDark ? 17 : 92,
+      isBackground: !0
+    }), MaterialDynamicColors.surfaceContainerHighest = DynamicColor.fromPalette({
+      name: "surface_container_highest",
+      palette: s => s.neutralPalette,
+      tone: s => s.isDark ? 22 : 90,
+      isBackground: !0
+    }), MaterialDynamicColors.onSurface = DynamicColor.fromPalette({
+      name: "on_surface",
+      palette: s => s.neutralPalette,
+      tone: s => s.isDark ? 90 : 10,
+      background: s => MaterialDynamicColors.highestSurface(s),
+      contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
+    }), MaterialDynamicColors.surfaceVariant = DynamicColor.fromPalette({
+      name: "surface_variant",
+      palette: s => s.neutralVariantPalette,
+      tone: s => s.isDark ? 30 : 90,
+      isBackground: !0
+    }), MaterialDynamicColors.onSurfaceVariant = DynamicColor.fromPalette({
+      name: "on_surface_variant",
+      palette: s => s.neutralVariantPalette,
+      tone: s => s.isDark ? 80 : 30,
+      background: s => MaterialDynamicColors.highestSurface(s),
+      contrastCurve: new ContrastCurve(3, 4.5, 7, 11)
+    }), MaterialDynamicColors.inverseSurface = DynamicColor.fromPalette({
+      name: "inverse_surface",
+      palette: s => s.neutralPalette,
+      tone: s => s.isDark ? 90 : 20
+    }), MaterialDynamicColors.inverseOnSurface = DynamicColor.fromPalette({
+      name: "inverse_on_surface",
+      palette: s => s.neutralPalette,
+      tone: s => s.isDark ? 20 : 95,
+      background: s => MaterialDynamicColors.inverseSurface,
+      contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
+    }), MaterialDynamicColors.outline = DynamicColor.fromPalette({
+      name: "outline",
+      palette: s => s.neutralVariantPalette,
+      tone: s => s.isDark ? 60 : 50,
+      background: s => MaterialDynamicColors.highestSurface(s),
+      contrastCurve: new ContrastCurve(1.5, 3, 4.5, 7)
+    }), MaterialDynamicColors.outlineVariant = DynamicColor.fromPalette({
+      name: "outline_variant",
+      palette: s => s.neutralVariantPalette,
+      tone: s => s.isDark ? 30 : 80,
+      background: s => MaterialDynamicColors.highestSurface(s),
+      contrastCurve: new ContrastCurve(1, 1, 3, 7)
+    }), MaterialDynamicColors.shadow = DynamicColor.fromPalette({
+      name: "shadow",
+      palette: s => s.neutralPalette,
+      tone: s => 0
+    }), MaterialDynamicColors.scrim = DynamicColor.fromPalette({
+      name: "scrim",
+      palette: s => s.neutralPalette,
+      tone: s => 0
+    }), MaterialDynamicColors.surfaceTint = DynamicColor.fromPalette({
+      name: "surface_tint",
+      palette: s => s.primaryPalette,
+      tone: s => s.isDark ? 80 : 40,
+      isBackground: !0
+    }), MaterialDynamicColors.primary = DynamicColor.fromPalette({
+      name: "primary",
+      palette: s => s.primaryPalette,
+      tone: s => isMonochrome(s) ? s.isDark ? 100 : 0 : s.isDark ? 80 : 40,
+      isBackground: !0,
+      background: s => MaterialDynamicColors.highestSurface(s),
+      contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
+      toneDeltaPair: s => new ToneDeltaPair(MaterialDynamicColors.primaryContainer, MaterialDynamicColors.primary, 15, "nearer", !1)
+    }), MaterialDynamicColors.onPrimary = DynamicColor.fromPalette({
+      name: "on_primary",
+      palette: s => s.primaryPalette,
+      tone: s => isMonochrome(s) ? s.isDark ? 10 : 90 : s.isDark ? 20 : 100,
+      background: s => MaterialDynamicColors.primary,
+      contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
+    }), MaterialDynamicColors.primaryContainer = DynamicColor.fromPalette({
+      name: "primary_container",
+      palette: s => s.primaryPalette,
+      tone: s => isFidelity(s) ? performAlbers(s.sourceColorHct, s) : isMonochrome(s) ? s.isDark ? 85 : 25 : s.isDark ? 30 : 90,
+      isBackground: !0,
+      background: s => MaterialDynamicColors.highestSurface(s),
+      contrastCurve: new ContrastCurve(1, 1, 3, 7),
+      toneDeltaPair: s => new ToneDeltaPair(MaterialDynamicColors.primaryContainer, MaterialDynamicColors.primary, 15, "nearer", !1)
+    }), MaterialDynamicColors.onPrimaryContainer = DynamicColor.fromPalette({
+      name: "on_primary_container",
+      palette: s => s.primaryPalette,
+      tone: s => isFidelity(s) ? DynamicColor.foregroundTone(MaterialDynamicColors.primaryContainer.tone(s), 4.5) : isMonochrome(s) ? s.isDark ? 0 : 100 : s.isDark ? 90 : 10,
+      background: s => MaterialDynamicColors.primaryContainer,
+      contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
+    }), MaterialDynamicColors.inversePrimary = DynamicColor.fromPalette({
+      name: "inverse_primary",
+      palette: s => s.primaryPalette,
+      tone: s => s.isDark ? 40 : 80,
+      background: s => MaterialDynamicColors.inverseSurface,
+      contrastCurve: new ContrastCurve(3, 4.5, 7, 11)
+    }), MaterialDynamicColors.secondary = DynamicColor.fromPalette({
+      name: "secondary",
+      palette: s => s.secondaryPalette,
+      tone: s => s.isDark ? 80 : 40,
+      isBackground: !0,
+      background: s => MaterialDynamicColors.highestSurface(s),
+      contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
+      toneDeltaPair: s => new ToneDeltaPair(MaterialDynamicColors.secondaryContainer, MaterialDynamicColors.secondary, 15, "nearer", !1)
+    }), MaterialDynamicColors.onSecondary = DynamicColor.fromPalette({
+      name: "on_secondary",
+      palette: s => s.secondaryPalette,
+      tone: s => isMonochrome(s) ? s.isDark ? 10 : 100 : s.isDark ? 20 : 100,
+      background: s => MaterialDynamicColors.secondary,
+      contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
+    }), MaterialDynamicColors.secondaryContainer = DynamicColor.fromPalette({
+      name: "secondary_container",
+      palette: s => s.secondaryPalette,
+      tone: s => {
+        const initialTone = s.isDark ? 30 : 90;
+        if (isMonochrome(s)) return s.isDark ? 30 : 85;
+        if (!isFidelity(s)) return initialTone;
+        let answer = findDesiredChromaByTone(s.secondaryPalette.hue, s.secondaryPalette.chroma, initialTone, !s.isDark);
+        return answer = performAlbers(s.secondaryPalette.getHct(answer), s), answer;
+      },
+      isBackground: !0,
+      background: s => MaterialDynamicColors.highestSurface(s),
+      contrastCurve: new ContrastCurve(1, 1, 3, 7),
+      toneDeltaPair: s => new ToneDeltaPair(MaterialDynamicColors.secondaryContainer, MaterialDynamicColors.secondary, 15, "nearer", !1)
+    }), MaterialDynamicColors.onSecondaryContainer = DynamicColor.fromPalette({
+      name: "on_secondary_container",
+      palette: s => s.secondaryPalette,
+      tone: s => isFidelity(s) ? DynamicColor.foregroundTone(MaterialDynamicColors.secondaryContainer.tone(s), 4.5) : s.isDark ? 90 : 10,
+      background: s => MaterialDynamicColors.secondaryContainer,
+      contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
+    }), MaterialDynamicColors.tertiary = DynamicColor.fromPalette({
+      name: "tertiary",
+      palette: s => s.tertiaryPalette,
+      tone: s => isMonochrome(s) ? s.isDark ? 90 : 25 : s.isDark ? 80 : 40,
+      isBackground: !0,
+      background: s => MaterialDynamicColors.highestSurface(s),
+      contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
+      toneDeltaPair: s => new ToneDeltaPair(MaterialDynamicColors.tertiaryContainer, MaterialDynamicColors.tertiary, 15, "nearer", !1)
+    }), MaterialDynamicColors.onTertiary = DynamicColor.fromPalette({
+      name: "on_tertiary",
+      palette: s => s.tertiaryPalette,
+      tone: s => isMonochrome(s) ? s.isDark ? 10 : 90 : s.isDark ? 20 : 100,
+      background: s => MaterialDynamicColors.tertiary,
+      contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
+    }), MaterialDynamicColors.tertiaryContainer = DynamicColor.fromPalette({
+      name: "tertiary_container",
+      palette: s => s.tertiaryPalette,
+      tone: s => {
+        if (isMonochrome(s)) return s.isDark ? 60 : 49;
+        if (!isFidelity(s)) return s.isDark ? 30 : 90;
+        const albersTone = performAlbers(s.tertiaryPalette.getHct(s.sourceColorHct.tone), s),
+          proposedHct = s.tertiaryPalette.getHct(albersTone);
+        return DislikeAnalyzer.fixIfDisliked(proposedHct).tone;
+      },
+      isBackground: !0,
+      background: s => MaterialDynamicColors.highestSurface(s),
+      contrastCurve: new ContrastCurve(1, 1, 3, 7),
+      toneDeltaPair: s => new ToneDeltaPair(MaterialDynamicColors.tertiaryContainer, MaterialDynamicColors.tertiary, 15, "nearer", !1)
+    }), MaterialDynamicColors.onTertiaryContainer = DynamicColor.fromPalette({
+      name: "on_tertiary_container",
+      palette: s => s.tertiaryPalette,
+      tone: s => isMonochrome(s) ? s.isDark ? 0 : 100 : isFidelity(s) ? DynamicColor.foregroundTone(MaterialDynamicColors.tertiaryContainer.tone(s), 4.5) : s.isDark ? 90 : 10,
+      background: s => MaterialDynamicColors.tertiaryContainer,
+      contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
+    }), MaterialDynamicColors.error = DynamicColor.fromPalette({
+      name: "error",
+      palette: s => s.errorPalette,
+      tone: s => s.isDark ? 80 : 40,
+      isBackground: !0,
+      background: s => MaterialDynamicColors.highestSurface(s),
+      contrastCurve: new ContrastCurve(3, 4.5, 7, 11),
+      toneDeltaPair: s => new ToneDeltaPair(MaterialDynamicColors.errorContainer, MaterialDynamicColors.error, 15, "nearer", !1)
+    }), MaterialDynamicColors.onError = DynamicColor.fromPalette({
+      name: "on_error",
+      palette: s => s.errorPalette,
+      tone: s => s.isDark ? 20 : 100,
+      background: s => MaterialDynamicColors.error,
+      contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
+    }), MaterialDynamicColors.errorContainer = DynamicColor.fromPalette({
+      name: "error_container",
+      palette: s => s.errorPalette,
+      tone: s => s.isDark ? 30 : 90,
+      isBackground: !0,
+      background: s => MaterialDynamicColors.highestSurface(s),
+      contrastCurve: new ContrastCurve(1, 1, 3, 7),
+      toneDeltaPair: s => new ToneDeltaPair(MaterialDynamicColors.errorContainer, MaterialDynamicColors.error, 15, "nearer", !1)
+    }), MaterialDynamicColors.onErrorContainer = DynamicColor.fromPalette({
+      name: "on_error_container",
+      palette: s => s.errorPalette,
+      tone: s => s.isDark ? 90 : 10,
+      background: s => MaterialDynamicColors.errorContainer,
+      contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
+    }), MaterialDynamicColors.primaryFixed = DynamicColor.fromPalette({
+      name: "primary_fixed",
+      palette: s => s.primaryPalette,
+      tone: s => isMonochrome(s) ? 40 : 90,
+      isBackground: !0,
+      background: s => MaterialDynamicColors.highestSurface(s),
+      contrastCurve: new ContrastCurve(1, 1, 3, 7),
+      toneDeltaPair: s => new ToneDeltaPair(MaterialDynamicColors.primaryFixed, MaterialDynamicColors.primaryFixedDim, 10, "lighter", !0)
+    }), MaterialDynamicColors.primaryFixedDim = DynamicColor.fromPalette({
+      name: "primary_fixed_dim",
+      palette: s => s.primaryPalette,
+      tone: s => isMonochrome(s) ? 30 : 80,
+      isBackground: !0,
+      background: s => MaterialDynamicColors.highestSurface(s),
+      contrastCurve: new ContrastCurve(1, 1, 3, 7),
+      toneDeltaPair: s => new ToneDeltaPair(MaterialDynamicColors.primaryFixed, MaterialDynamicColors.primaryFixedDim, 10, "lighter", !0)
+    }), MaterialDynamicColors.onPrimaryFixed = DynamicColor.fromPalette({
+      name: "on_primary_fixed",
+      palette: s => s.primaryPalette,
+      tone: s => isMonochrome(s) ? 100 : 10,
+      background: s => MaterialDynamicColors.primaryFixedDim,
+      secondBackground: s => MaterialDynamicColors.primaryFixed,
+      contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
+    }), MaterialDynamicColors.onPrimaryFixedVariant = DynamicColor.fromPalette({
+      name: "on_primary_fixed_variant",
+      palette: s => s.primaryPalette,
+      tone: s => isMonochrome(s) ? 90 : 30,
+      background: s => MaterialDynamicColors.primaryFixedDim,
+      secondBackground: s => MaterialDynamicColors.primaryFixed,
+      contrastCurve: new ContrastCurve(3, 4.5, 7, 11)
+    }), MaterialDynamicColors.secondaryFixed = DynamicColor.fromPalette({
+      name: "secondary_fixed",
+      palette: s => s.secondaryPalette,
+      tone: s => isMonochrome(s) ? 80 : 90,
+      isBackground: !0,
+      background: s => MaterialDynamicColors.highestSurface(s),
+      contrastCurve: new ContrastCurve(1, 1, 3, 7),
+      toneDeltaPair: s => new ToneDeltaPair(MaterialDynamicColors.secondaryFixed, MaterialDynamicColors.secondaryFixedDim, 10, "lighter", !0)
+    }), MaterialDynamicColors.secondaryFixedDim = DynamicColor.fromPalette({
+      name: "secondary_fixed_dim",
+      palette: s => s.secondaryPalette,
+      tone: s => isMonochrome(s) ? 70 : 80,
+      isBackground: !0,
+      background: s => MaterialDynamicColors.highestSurface(s),
+      contrastCurve: new ContrastCurve(1, 1, 3, 7),
+      toneDeltaPair: s => new ToneDeltaPair(MaterialDynamicColors.secondaryFixed, MaterialDynamicColors.secondaryFixedDim, 10, "lighter", !0)
+    }), MaterialDynamicColors.onSecondaryFixed = DynamicColor.fromPalette({
+      name: "on_secondary_fixed",
+      palette: s => s.secondaryPalette,
+      tone: s => 10,
+      background: s => MaterialDynamicColors.secondaryFixedDim,
+      secondBackground: s => MaterialDynamicColors.secondaryFixed,
+      contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
+    }), MaterialDynamicColors.onSecondaryFixedVariant = DynamicColor.fromPalette({
+      name: "on_secondary_fixed_variant",
+      palette: s => s.secondaryPalette,
+      tone: s => isMonochrome(s) ? 25 : 30,
+      background: s => MaterialDynamicColors.secondaryFixedDim,
+      secondBackground: s => MaterialDynamicColors.secondaryFixed,
+      contrastCurve: new ContrastCurve(3, 4.5, 7, 11)
+    }), MaterialDynamicColors.tertiaryFixed = DynamicColor.fromPalette({
+      name: "tertiary_fixed",
+      palette: s => s.tertiaryPalette,
+      tone: s => isMonochrome(s) ? 40 : 90,
+      isBackground: !0,
+      background: s => MaterialDynamicColors.highestSurface(s),
+      contrastCurve: new ContrastCurve(1, 1, 3, 7),
+      toneDeltaPair: s => new ToneDeltaPair(MaterialDynamicColors.tertiaryFixed, MaterialDynamicColors.tertiaryFixedDim, 10, "lighter", !0)
+    }), MaterialDynamicColors.tertiaryFixedDim = DynamicColor.fromPalette({
+      name: "tertiary_fixed_dim",
+      palette: s => s.tertiaryPalette,
+      tone: s => isMonochrome(s) ? 30 : 80,
+      isBackground: !0,
+      background: s => MaterialDynamicColors.highestSurface(s),
+      contrastCurve: new ContrastCurve(1, 1, 3, 7),
+      toneDeltaPair: s => new ToneDeltaPair(MaterialDynamicColors.tertiaryFixed, MaterialDynamicColors.tertiaryFixedDim, 10, "lighter", !0)
+    }), MaterialDynamicColors.onTertiaryFixed = DynamicColor.fromPalette({
+      name: "on_tertiary_fixed",
+      palette: s => s.tertiaryPalette,
+      tone: s => isMonochrome(s) ? 100 : 10,
+      background: s => MaterialDynamicColors.tertiaryFixedDim,
+      secondBackground: s => MaterialDynamicColors.tertiaryFixed,
+      contrastCurve: new ContrastCurve(4.5, 7, 11, 21)
+    }), MaterialDynamicColors.onTertiaryFixedVariant = DynamicColor.fromPalette({
+      name: "on_tertiary_fixed_variant",
+      palette: s => s.tertiaryPalette,
+      tone: s => isMonochrome(s) ? 90 : 30,
+      background: s => MaterialDynamicColors.tertiaryFixedDim,
+      secondBackground: s => MaterialDynamicColors.tertiaryFixed,
+      contrastCurve: new ContrastCurve(3, 4.5, 7, 11)
+    });
     class TonalPalette {
       static fromInt(argb) {
         const hct = Hct.fromInt(argb);
-        return TonalPalette.fromHueAndChroma(hct.hue, hct.chroma);
+        return TonalPalette.fromHct(hct);
+      }
+      static fromHct(hct) {
+        return new TonalPalette(hct.hue, hct.chroma, hct);
       }
       static fromHueAndChroma(hue, chroma) {
-        return new TonalPalette(hue, chroma);
+        return new TonalPalette(hue, chroma, TonalPalette.createKeyColor(hue, chroma));
       }
-      constructor(hue, chroma) {
-        this.hue = hue, this.chroma = chroma, this.cache = new Map();
+      constructor(hue, chroma, keyColor) {
+        this.hue = hue, this.chroma = chroma, this.keyColor = keyColor, this.cache = new Map();
+      }
+      static createKeyColor(hue, chroma) {
+        let smallestDeltaHct = Hct.from(hue, chroma, 50),
+          smallestDelta = Math.abs(smallestDeltaHct.chroma - chroma);
+        for (let delta = 1; delta < 50; delta += 1) {
+          if (Math.round(chroma) === Math.round(smallestDeltaHct.chroma)) return smallestDeltaHct;
+          const hctAdd = Hct.from(hue, chroma, 50 + delta),
+            hctAddDelta = Math.abs(hctAdd.chroma - chroma);
+          hctAddDelta < smallestDelta && (smallestDelta = hctAddDelta, smallestDeltaHct = hctAdd);
+          const hctSubtract = Hct.from(hue, chroma, 50 - delta),
+            hctSubtractDelta = Math.abs(hctSubtract.chroma - chroma);
+          hctSubtractDelta < smallestDelta && (smallestDelta = hctSubtractDelta, smallestDeltaHct = hctSubtract);
+        }
+        return smallestDeltaHct;
       }
       tone(tone) {
         let argb = this.cache.get(tone);
         return void 0 === argb && (argb = Hct.from(this.hue, this.chroma, tone).toInt(), this.cache.set(tone, argb)), argb;
       }
+      getHct(tone) {
+        return Hct.fromInt(this.tone(tone));
+      }
     }
     class CorePalette {
       static of(argb) {
@@ -3600,6 +4217,7 @@
     };
 
     /* eslint-disable no-underscore-dangle */
+
     class Framework7 extends Framework7Class {
       constructor(params) {
         if (params === void 0) {
@@ -3721,7 +4339,7 @@
         const document = getDocument$1();
         if (!app.colorsStyleEl) {
           app.colorsStyleEl = document.createElement('style');
-          document.head.appendChild(app.colorsStyleEl);
+          document.head.prepend(app.colorsStyleEl);
         }
         app.colorsStyleEl.textContent = app.utils.colorThemeCSSStyles(app.colors);
       }
@@ -3781,8 +4399,8 @@
         const app = this;
         const html = document.querySelector('html');
         if (app.mq.dark && app.mq.light) {
-          app.mq.dark.addListener(app.colorSchemeListener);
-          app.mq.light.addListener(app.colorSchemeListener);
+          app.mq.dark.addEventListener('change', app.colorSchemeListener);
+          app.mq.light.addEventListener('change', app.colorSchemeListener);
         }
         if (app.mq.dark && app.mq.dark.matches) {
           html.classList.add('dark');
@@ -3798,8 +4416,8 @@
         const window = getWindow$1();
         if (!window.matchMedia) return;
         const app = this;
-        if (app.mq.dark) app.mq.dark.removeListener(app.colorSchemeListener);
-        if (app.mq.light) app.mq.light.removeListener(app.colorSchemeListener);
+        if (app.mq.dark) app.mq.dark.removeEventListener('change', app.colorSchemeListener);
+        if (app.mq.light) app.mq.light.removeEventListener('change', app.colorSchemeListener);
       }
       setDarkMode(mode) {
         const app = this;
@@ -4594,7 +5212,7 @@
             }
             break;
           }
-          if (!name) throw new TypeError("Missing parameter name at " + i);
+          if (!name) throw new TypeError("Missing parameter name at ".concat(i));
           tokens.push({
             type: "NAME",
             index: i,
@@ -4608,7 +5226,7 @@
           var pattern = "";
           var j = i + 1;
           if (str[j] === "?") {
-            throw new TypeError("Pattern cannot start with \"?\" at " + j);
+            throw new TypeError("Pattern cannot start with \"?\" at ".concat(j));
           }
           while (j < str.length) {
             if (str[j] === "\\") {
@@ -4624,13 +5242,13 @@
             } else if (str[j] === "(") {
               count++;
               if (str[j + 1] !== "?") {
-                throw new TypeError("Capturing groups are not allowed at " + j);
+                throw new TypeError("Capturing groups are not allowed at ".concat(j));
               }
             }
             pattern += str[j++];
           }
-          if (count) throw new TypeError("Unbalanced pattern at " + i);
-          if (!pattern) throw new TypeError("Missing pattern at " + i);
+          if (count) throw new TypeError("Unbalanced pattern at ".concat(i));
+          if (!pattern) throw new TypeError("Missing pattern at ".concat(i));
           tokens.push({
             type: "PATTERN",
             index: i,
@@ -4662,7 +5280,7 @@
       var tokens = lexer(str);
       var _a = options.prefixes,
         prefixes = _a === void 0 ? "./" : _a;
-      var defaultPattern = "[^" + escapeString(options.delimiter || "/#?") + "]+?";
+      var defaultPattern = "[^".concat(escapeString(options.delimiter || "/#?"), "]+?");
       var result = [];
       var key = 0;
       var i = 0;
@@ -4676,12 +5294,11 @@
         var _a = tokens[i],
           nextType = _a.type,
           index = _a.index;
-        throw new TypeError("Unexpected " + nextType + " at " + index + ", expected " + type);
+        throw new TypeError("Unexpected ".concat(nextType, " at ").concat(index, ", expected ").concat(type));
       };
       var consumeText = function () {
         var result = "";
         var value;
-        // tslint:disable-next-line
         while (value = tryConsume("CHAR") || tryConsume("ESCAPED_CHAR")) {
           result += value;
         }
@@ -4762,7 +5379,7 @@
       // Compile all the tokens into regexps.
       var matches = tokens.map(function (token) {
         if (typeof token === "object") {
-          return new RegExp("^(?:" + token.pattern + ")$", reFlags);
+          return new RegExp("^(?:".concat(token.pattern, ")$"), reFlags);
         }
       });
       return function (data) {
@@ -4778,16 +5395,16 @@
           var repeat = token.modifier === "*" || token.modifier === "+";
           if (Array.isArray(value)) {
             if (!repeat) {
-              throw new TypeError("Expected \"" + token.name + "\" to not repeat, but got an array");
+              throw new TypeError("Expected \"".concat(token.name, "\" to not repeat, but got an array"));
             }
             if (value.length === 0) {
               if (optional) continue;
-              throw new TypeError("Expected \"" + token.name + "\" to not be empty");
+              throw new TypeError("Expected \"".concat(token.name, "\" to not be empty"));
             }
             for (var j = 0; j < value.length; j++) {
               var segment = encode(value[j], token);
               if (validate && !matches[i].test(segment)) {
-                throw new TypeError("Expected all \"" + token.name + "\" to match \"" + token.pattern + "\", but got \"" + segment + "\"");
+                throw new TypeError("Expected all \"".concat(token.name, "\" to match \"").concat(token.pattern, "\", but got \"").concat(segment, "\""));
               }
               path += token.prefix + segment + token.suffix;
             }
@@ -4796,14 +5413,14 @@
           if (typeof value === "string" || typeof value === "number") {
             var segment = encode(String(value), token);
             if (validate && !matches[i].test(segment)) {
-              throw new TypeError("Expected \"" + token.name + "\" to match \"" + token.pattern + "\", but got \"" + segment + "\"");
+              throw new TypeError("Expected \"".concat(token.name, "\" to match \"").concat(token.pattern, "\", but got \"").concat(segment, "\""));
             }
             path += token.prefix + segment + token.suffix;
             continue;
           }
           if (optional) continue;
           var typeOfMessage = repeat ? "an array" : "a string";
-          throw new TypeError("Expected \"" + token.name + "\" to be " + typeOfMessage);
+          throw new TypeError("Expected \"".concat(token.name, "\" to be ").concat(typeOfMessage));
         }
         return path;
       };
@@ -4834,7 +5451,6 @@
           index = m.index;
         var params = Object.create(null);
         var _loop_1 = function (i) {
-          // tslint:disable-next-line
           if (m[i] === undefined) return "continue";
           var key = keys[i - 1];
           if (key.modifier === "*" || key.modifier === "+") {
@@ -4895,7 +5511,7 @@
       var parts = paths.map(function (path) {
         return pathToRegexp(path, keys, options).source;
       });
-      return new RegExp("(?:" + parts.join("|") + ")", flags(options));
+      return new RegExp("(?:".concat(parts.join("|"), ")"), flags(options));
     }
     /**
      * Create a path regexp from string input.
@@ -4919,9 +5535,13 @@
         _d = options.encode,
         encode = _d === void 0 ? function (x) {
           return x;
-        } : _d;
-      var endsWith = "[" + escapeString(options.endsWith || "") + "]|$";
-      var delimiter = "[" + escapeString(options.delimiter || "/#?") + "]";
+        } : _d,
+        _e = options.delimiter,
+        delimiter = _e === void 0 ? "/#?" : _e,
+        _f = options.endsWith,
+        endsWith = _f === void 0 ? "" : _f;
+      var endsWithRe = "[".concat(escapeString(endsWith), "]|$");
+      var delimiterRe = "[".concat(escapeString(delimiter), "]");
       var route = start ? "^" : "";
       // Iterate over the tokens and create our regexp string.
       for (var _i = 0, tokens_1 = tokens; _i < tokens_1.length; _i++) {
@@ -4936,31 +5556,33 @@
             if (prefix || suffix) {
               if (token.modifier === "+" || token.modifier === "*") {
                 var mod = token.modifier === "*" ? "?" : "";
-                route += "(?:" + prefix + "((?:" + token.pattern + ")(?:" + suffix + prefix + "(?:" + token.pattern + "))*)" + suffix + ")" + mod;
+                route += "(?:".concat(prefix, "((?:").concat(token.pattern, ")(?:").concat(suffix).concat(prefix, "(?:").concat(token.pattern, "))*)").concat(suffix, ")").concat(mod);
               } else {
-                route += "(?:" + prefix + "(" + token.pattern + ")" + suffix + ")" + token.modifier;
+                route += "(?:".concat(prefix, "(").concat(token.pattern, ")").concat(suffix, ")").concat(token.modifier);
               }
             } else {
-              route += "(" + token.pattern + ")" + token.modifier;
+              if (token.modifier === "+" || token.modifier === "*") {
+                route += "((?:".concat(token.pattern, ")").concat(token.modifier, ")");
+              } else {
+                route += "(".concat(token.pattern, ")").concat(token.modifier);
+              }
             }
           } else {
-            route += "(?:" + prefix + suffix + ")" + token.modifier;
+            route += "(?:".concat(prefix).concat(suffix, ")").concat(token.modifier);
           }
         }
       }
       if (end) {
-        if (!strict) route += delimiter + "?";
-        route += !options.endsWith ? "$" : "(?=" + endsWith + ")";
+        if (!strict) route += "".concat(delimiterRe, "?");
+        route += !options.endsWith ? "$" : "(?=".concat(endsWithRe, ")");
       } else {
         var endToken = tokens[tokens.length - 1];
-        var isEndDelimited = typeof endToken === "string" ? delimiter.indexOf(endToken[endToken.length - 1]) > -1 :
-        // tslint:disable-next-line
-        endToken === undefined;
+        var isEndDelimited = typeof endToken === "string" ? delimiterRe.indexOf(endToken[endToken.length - 1]) > -1 : endToken === undefined;
         if (!strict) {
-          route += "(?:" + delimiter + "(?=" + endsWith + "))?";
+          route += "(?:".concat(delimiterRe, "(?=").concat(endsWithRe, "))?");
         }
         if (!isEndDelimited) {
-          route += "(?=" + delimiter + "|" + endsWith + ")";
+          route += "(?=".concat(delimiterRe, "|").concat(endsWithRe, ")");
         }
       }
       return new RegExp(route, flags(options));
@@ -9524,7 +10146,7 @@
             view = $(clickedLinkData.view)[0].f7View;
           } else {
             view = $clickedEl.parents('.view')[0] && $clickedEl.parents('.view')[0].f7View;
-            if (!$clickedLinkEl.hasClass('back') && view && view.params.linksView) {
+            if (view && view.params.linksView && (!$clickedLinkEl.hasClass('back') || $clickedLinkEl.hasClass('back') && view.router.history.length === 1)) {
               if (typeof view.params.linksView === 'string') view = $(view.params.linksView)[0].f7View;else if (view.params.linksView instanceof View$1) view = view.params.linksView;
             }
           }
@@ -9573,31 +10195,65 @@
           const params = {
             ...options
           };
+          const component = (props, ctx) => {
+            const {
+              $h,
+              $onMounted,
+              $el,
+              $f7
+            } = ctx;
+            $onMounted(() => {
+              const viewEl = $el.value.find('.view');
+              const view = $f7.view.create(viewEl, {
+                linksView: router.view.selector,
+                ignoreOpenIn: true,
+                loadInitialPage: false
+              });
+              view.router.navigate(url, {
+                props: options.props,
+                reloadAll: true
+              });
+            });
+            // eslint-disable-next-line
+            return () => {
+              if (options.openIn === 'popup') {
+                return $h`<div class="popup popup-router-open-in" data-url="${url}"><div class="view"></div></div>`;
+              }
+              if (options.openIn === 'loginScreen') {
+                return $h`<div class="login-screen login-screen-router-open-in" data-url="${url}"><div class="view"></div></div>`;
+              }
+              if (options.openIn === 'sheet') {
+                return $h`<div class="sheet-modal sheet-modal-router-open-in" data-url="${url}"><div class="sheet-modal-inner"><div class="view"></div></div></div>`;
+              }
+              if (options.openIn === 'popover') {
+                return $h`<div class="popover popover-router-open-in" data-url="${url}"><div class="popover-inner"><div class="view"></div></div></div>`;
+              }
+              if (options.openIn.indexOf('panel') >= 0) {
+                const parts = options.openIn.split(':');
+                const side = parts[1] || 'left';
+                const effect = parts[2] || 'cover';
+                return $h`<div class="panel panel-router-open-in panel-${side} panel-${effect}" data-url="${url}"><div class="view"></div></div>`;
+              }
+            };
+          };
           if (options.openIn === 'popup') {
-            params.content = `<div class="popup popup-router-open-in" data-url="${url}"><div class="view view-init" data-links-view="${router.view.selector}" data-url="${url}" data-ignore-open-in="true"></div></div>`;
             navigateOptions.route.popup = params;
           }
           if (options.openIn === 'loginScreen') {
-            params.content = `<div class="login-screen login-screen-router-open-in" data-url="${url}"><div class="view view-init" data-links-view="${router.view.selector}" data-url="${url}" data-ignore-open-in="true"></div></div>`;
             navigateOptions.route.loginScreen = params;
           }
           if (options.openIn === 'sheet') {
-            params.content = `<div class="sheet-modal sheet-modal-router-open-in" data-url="${url}"><div class="sheet-modal-inner"><div class="view view-init" data-links-view="${router.view.selector}" data-url="${url}" data-ignore-open-in="true"></div></div></div>`;
             navigateOptions.route.sheet = params;
           }
           if (options.openIn === 'popover') {
             params.targetEl = options.clickedEl || options.targetEl;
-            params.content = `<div class="popover popover-router-open-in" data-url="${url}"><div class="popover-inner"><div class="view view-init" data-links-view="${router.view.selector}" data-url="${url}" data-ignore-open-in="true"></div></div></div>`;
             navigateOptions.route.popover = params;
           }
           if (options.openIn.indexOf('panel') >= 0) {
-            const parts = options.openIn.split(':');
-            const side = parts[1] || 'left';
-            const effect = parts[2] || 'cover';
             params.targetEl = options.clickedEl || options.targetEl;
-            params.content = `<div class="panel panel-router-open-in panel-${side} panel-${effect}" data-url="${url}"><div class="view view-init" data-links-view="${router.view.selector}" data-url="${url}" data-ignore-open-in="true"></div></div>`;
             navigateOptions.route.panel = params;
           }
+          params.component = component;
           return router.navigate(navigateOptions);
         },
         componentLoader(component, componentUrl, options, resolve, reject) {
@@ -9825,6 +10481,7 @@
     var customComponents = {};
 
     /* eslint no-use-before-define: "off" */
+    /* eslint import/no-named-as-default: "off" */
     const SELF_CLOSING = 'area base br col command embed hr img input keygen link menuitem meta param source track wbr'.split(' ');
     const PROPS_ATTRS = 'hidden checked disabled readonly selected autofocus autoplay required multiple value indeterminate routeProps innerHTML'.split(' ');
     const BOOLEAN_PROPS = 'hidden checked disabled readonly selected autofocus autoplay required multiple readOnly indeterminate'.split(' ');
@@ -13895,6 +14552,7 @@
           if (popup.params.swipeHandler && $(e.target).closest(popup.params.swipeHandler).length === 0) {
             return;
           }
+          if ($(e.target).closest('.sortable-handler').length > 0) return;
           isTouched = true;
           isMoved = false;
           startTouch = {
@@ -15061,6 +15719,7 @@
         function pushViewScale(offset) {
           return (app.height - offset * 2) / app.height;
         }
+        const useBreakpoints = sheet.params.breakpoints && sheet.params.breakpoints.length > 0;
         let isTouched = false;
         let startTouch;
         let currentTouch;
@@ -15081,11 +15740,15 @@
         let sheetPageContentScrollTop;
         let sheetPageContentScrollHeight;
         let sheetPageContentOffsetHeight;
+        let breakpointsTranslate = [];
+        let currentBreakpointIndex;
+        let backdropBreakpointSet = true;
         function handleTouchStart(e) {
           if (isTouched || !(sheet.params.swipeToClose || sheet.params.swipeToStep) || !e.isTrusted) return;
           if (sheet.params.swipeHandler && $(e.target).closest(sheet.params.swipeHandler).length === 0) {
             return;
           }
+          if ($(e.target).closest('.sortable-handler').length > 0) return;
           isTouched = true;
           isMoved = false;
           startTouch = {
@@ -15137,14 +15800,23 @@
               maxTranslate = 0;
             } else {
               minTranslate = 0;
-              maxTranslate = sheet.params.swipeToClose ? sheetElOffsetHeight : swipeStepTranslate;
+              maxTranslate = sheet.params.swipeToClose ? sheetElOffsetHeight : useBreakpoints ? breakpointsTranslate[0] : swipeStepTranslate;
             }
             isMoved = true;
           }
           currentTranslate = startTranslate - touchesDiff;
           currentTranslate = Math.min(Math.max(currentTranslate, minTranslate), maxTranslate);
           e.preventDefault();
-          if (sheet.push && pushOffset) {
+          if (useBreakpoints) {
+            let progress = isTopSheetModal ? 1 + currentTranslate / sheetElOffsetHeight : 1 - currentTranslate / sheetElOffsetHeight;
+            progress = Math.abs(progress);
+            progress = Math.min(Math.max(progress, 0), 1);
+            // eslint-disable-next-line
+            setBackdropBreakpoint(progress);
+            // eslint-disable-next-line
+            setPushBreakpoint(progress);
+          }
+          if (sheet.push && pushOffset && !useBreakpoints) {
             let progress = (currentTranslate - startTranslate) / sheetElOffsetHeight;
             if (sheet.params.swipeToStep) {
               if (isTopSheetModal) {
@@ -15185,14 +15857,17 @@
           isMoved = false;
           $el.transform('').transition('');
           if (sheet.push && pushOffset) {
-            $pushViewEl.transition('').transform('');
-            $pushViewEl.css('border-radius', '');
+            $pushViewEl.transition('');
+            if (!useBreakpoints) {
+              $pushViewEl.transform('');
+              $pushViewEl.css('border-radius', '');
+            }
           }
           const direction = touchesDiff < 0 ? 'to-bottom' : 'to-top';
           const diff = Math.abs(touchesDiff);
           if (diff === 0 || currentTranslate === startTranslate) return;
           const timeDiff = new Date().getTime() - touchStartTime;
-          if (!sheet.params.swipeToStep) {
+          if (!sheet.params.swipeToStep && !useBreakpoints) {
             if (direction !== (isTopSheetModal ? 'to-top' : 'to-bottom')) {
               return;
             }
@@ -15205,7 +15880,34 @@
           const closeDirection = isTopSheetModal ? 'to-top' : 'to-bottom';
           const absCurrentTranslate = Math.abs(currentTranslate);
           const absSwipeStepTranslate = Math.abs(swipeStepTranslate);
-          if (timeDiff < 300 && diff > 10) {
+          if (timeDiff < 300 && diff > 10 && useBreakpoints) {
+            // SHORT SWIPES BREAKPOINTS
+            if (direction === openDirection && typeof currentBreakpointIndex !== 'undefined') {
+              if (currentBreakpointIndex === params.breakpoints.length - 1) {
+                // open
+                sheet.setBreakpoint(1);
+              } else {
+                // move to next breakpoint
+                currentBreakpointIndex = Math.min(breakpointsTranslate.length - 1, currentBreakpointIndex + 1);
+                sheet.setBreakpoint(params.breakpoints[currentBreakpointIndex]);
+              }
+            }
+            if (direction === closeDirection) {
+              if (currentBreakpointIndex === 0) {
+                // close
+                sheet.close();
+              } else {
+                // move to prev breakpoint
+                if (typeof currentBreakpointIndex === 'undefined') {
+                  currentBreakpointIndex = params.breakpoints.length - 1;
+                } else {
+                  currentBreakpointIndex = Math.max(0, currentBreakpointIndex - 1);
+                }
+                sheet.setBreakpoint(params.breakpoints[currentBreakpointIndex]);
+              }
+            }
+          } else if (timeDiff < 300 && diff > 10) {
+            // SHORT SWIPES SWIPE STEP
             if (direction === openDirection && absCurrentTranslate < absSwipeStepTranslate) {
               // open step
               $el.removeClass('modal-in-swipe-step');
@@ -15252,7 +15954,26 @@
             }
             return;
           }
-          if (timeDiff >= 300) {
+          if (timeDiff >= 300 && useBreakpoints) {
+            // LONG SWIPES BREAKPOINTS
+            const allBreakpoints = [sheetElOffsetHeight, ...breakpointsTranslate, 0];
+            const closestTranslate = allBreakpoints.reduce((prev, curr) => {
+              return Math.abs(curr - currentTranslate) < Math.abs(prev - currentTranslate) ? curr : prev;
+            });
+            const closestIndex = allBreakpoints.indexOf(closestTranslate);
+            if (closestTranslate === 0) {
+              // open
+              sheet.setBreakpoint(1);
+            } else if (closestIndex === 0) {
+              // close
+              sheet.close();
+            } else {
+              // set bp
+              currentBreakpointIndex = closestIndex - 1;
+              sheet.setBreakpoint(params.breakpoints[currentBreakpointIndex]);
+            }
+          } else if (timeDiff >= 300) {
+            // LONG SWIPES SWIPE STEP
             const stepOpened = !$el.hasClass('modal-in-swipe-step');
             if (!stepOpened) {
               if (absCurrentTranslate < absSwipeStepTranslate / 2) {
@@ -15291,12 +16012,133 @@
             }
           }
         }
+        const setPushBreakpoint = breakpoint => {
+          const {
+            pushBreakpoint
+          } = params;
+          if (pushBreakpoint === null || typeof pushBreakpoint === 'undefined' || !sheet.push || !pushOffset) return;
+          if (breakpoint >= pushBreakpoint) {
+            sheet.$htmlEl.addClass('with-modal-sheet-push').removeClass('with-modal-sheet-push-closing');
+            $pushViewEl.transition('').forEach(el => {
+              el.style.setProperty('transform', `translate3d(0,0,0) scale(${pushViewScale(pushOffset)})`, 'important');
+            });
+            $pushViewEl.css('border-radius', `${pushBorderRadius * 1}px`);
+          } else {
+            const pushBreakpoints = [0, ...params.breakpoints, 1];
+            const pushTransparentBreakpoint = pushBreakpoints[pushBreakpoints.indexOf(pushBreakpoint) - 1];
+            if (breakpoint <= pushTransparentBreakpoint) {
+              $pushViewEl.transition('').css('transform', '');
+              $pushViewEl.css('border-radius', '');
+              sheet.$htmlEl.removeClass('with-modal-sheet-push');
+              if (breakpoint === pushTransparentBreakpoint) {
+                sheet.$htmlEl.addClass('with-modal-sheet-push-closing');
+              }
+            } else {
+              const progress = (breakpoint - pushTransparentBreakpoint) / (pushBreakpoint - pushTransparentBreakpoint);
+              sheet.$htmlEl.addClass('with-modal-sheet-push').removeClass('with-modal-sheet-push-closing');
+              $pushViewEl.transition(0).forEach(el => {
+                el.style.setProperty('transform', `translate3d(0,0,0) scale(${1 - (1 - pushViewScale(pushOffset)) * progress})`, 'important');
+              });
+              $pushViewEl.css('border-radius', `${pushBorderRadius * progress}px`);
+            }
+          }
+        };
+        const setBackdropBreakpoint = breakpoint => {
+          const {
+            backdrop,
+            backdropBreakpoint
+          } = params;
+          if (!backdropBreakpoint || !backdrop || !$backdropEl.length) return;
+          if (breakpoint >= backdropBreakpoint) {
+            if (!backdropBreakpointSet) {
+              $backdropEl.transition('').css({
+                opacity: '',
+                pointerEvents: ''
+              });
+            }
+            backdropBreakpointSet = true;
+          } else {
+            const backdropBreakpoints = [0, ...params.breakpoints, 1];
+            const backdropTransparentBreakpoint = backdropBreakpoints[backdropBreakpoints.indexOf(backdropBreakpoint) - 1];
+            if (breakpoint <= backdropTransparentBreakpoint) {
+              if (backdropBreakpointSet) {
+                $backdropEl.transition('').css({
+                  opacity: 0,
+                  pointerEvents: 'none'
+                });
+              }
+              backdropBreakpointSet = false;
+            } else {
+              const progress = (breakpoint - backdropTransparentBreakpoint) / (backdropBreakpoint - backdropTransparentBreakpoint);
+              $backdropEl.transition(0).css({
+                opacity: progress,
+                pointerEvents: 'auto'
+              });
+            }
+          }
+        };
+        sheet.calcBreakpoints = () => {
+          if (!useBreakpoints) {
+            return;
+          }
+          const fullSize = $el[0].offsetHeight;
+          // eslint-disable-next-line
+          const isTopSheetModal = $el.hasClass('sheet-modal-top');
+          breakpointsTranslate = [];
+          sheet.params.breakpoints.forEach(ratio => {
+            breakpointsTranslate.push((fullSize - fullSize * ratio) * (isTopSheetModal ? -1 : 1));
+          });
+        };
+        sheet.setBreakpoint = value => {
+          if (!useBreakpoints) {
+            return sheet;
+          }
+          if (value === 1) {
+            // open
+            if (!sheet.opened) {
+              sheet.open();
+            }
+            $el.removeClass('modal-in-breakpoint');
+            currentBreakpointIndex = undefined;
+            setBackdropBreakpoint(value);
+            setPushBreakpoint(value);
+            $el.trigger('sheet:breakpoint', value);
+            sheet.emit('local::breakpoint sheetBreakpoint', sheet, value);
+          } else if (value === 0) {
+            // close
+            $el.trigger('sheet:breakpoint', value);
+            sheet.emit('local::breakpoint sheetBreakpoint', sheet, value);
+            sheet.close();
+          } else {
+            const index = params.breakpoints.indexOf(value);
+            if (index < 0) return sheet;
+            if (!sheet.opened) {
+              sheet.open();
+            }
+            setBackdropBreakpoint(value);
+            setPushBreakpoint(value);
+            $el.trigger('sheet:breakpoint', value);
+            sheet.emit('local::breakpoint sheetBreakpoint', sheet, value);
+            currentBreakpointIndex = index;
+            $el[0].style.setProperty('--f7-sheet-breakpoint', `${breakpointsTranslate[index]}px`);
+            $el.addClass('modal-in-breakpoint');
+          }
+          return sheet;
+        };
+        const setBreakpointsOnResize = () => {
+          sheet.calcBreakpoints();
+          if (typeof currentBreakpointIndex !== 'undefined') {
+            sheet.setBreakpoint(params.breakpoints[currentBreakpointIndex]);
+          }
+        };
         sheet.setSwipeStep = function setSwipeStep(byResize) {
           if (byResize === void 0) {
             byResize = true;
           }
           const $swipeStepEl = $el.find('.sheet-modal-swipe-step').eq(0);
           if (!$swipeStepEl.length) return;
+
+          // eslint-disable-next-line
           if ($el.hasClass('sheet-modal-top')) {
             swipeStepTranslate = -($swipeStepEl.offset().top - $el.offset().top + $swipeStepEl[0].offsetHeight);
           } else {
@@ -15309,12 +16151,16 @@
           }
         };
         function onResize() {
-          sheet.setSwipeStep(true);
+          if (useBreakpoints) {
+            setBreakpointsOnResize();
+          } else {
+            sheet.setSwipeStep(true);
+          }
         }
         const passive = support.passiveListener ? {
           passive: true
         } : false;
-        if (sheet.params.swipeToClose || sheet.params.swipeToStep) {
+        if (sheet.params.swipeToClose || sheet.params.swipeToStep || useBreakpoints) {
           $el.on(app.touchEvents.start, handleTouchStart, passive);
           app.on('touchmove', handleTouchMove);
           app.on('touchend:passive', handleTouchEnd);
@@ -15329,10 +16175,7 @@
             $(document).on('keydown', onKeyDown);
           }
           $el.prevAll('.popup.modal-in').addClass('popup-behind');
-          if (sheet.params.swipeToStep) {
-            sheet.setSwipeStep(false);
-            app.on('resize', onResize);
-          }
+          app.on('resize', onResize);
           if (sheet.params.scrollToEl) {
             scrollToElementOnOpen();
           }
@@ -15342,15 +16185,23 @@
             if (!pushOffset) pushOffset = app.theme === 'ios' ? 44 : 48;
             sheet.$htmlEl[0].style.setProperty('--f7-sheet-push-offset', `${pushOffset}px`);
             $el.addClass('sheet-modal-push');
-            sheet.$htmlEl.addClass('with-modal-sheet-push');
-            if (!sheet.params.swipeToStep) {
+            if (!useBreakpoints) {
+              sheet.$htmlEl.addClass('with-modal-sheet-push');
+            }
+            if (!sheet.params.swipeToStep && !useBreakpoints) {
               sheet.$htmlEl[0].style.setProperty('--f7-sheet-push-scale', pushViewScale(pushOffset));
             } else {
               $pushViewEl = app.$el.children('.view, .views');
-              pushBorderRadius = parseFloat($el.css(`border-${isTopSheetModal ? 'bottom' : 'top'}-left-radius`));
+              pushBorderRadius = app.theme === 'ios' ? 10 : 16;
               $pushViewEl.css('border-radius', '0px');
             }
           }
+          if (useBreakpoints) {
+            sheet.calcBreakpoints();
+            sheet.setBreakpoint(params.breakpoints[0]);
+          } else if (sheet.params.swipeToStep) {
+            sheet.setSwipeStep(false);
+          }
         });
         sheet.on('opened', () => {
           if (sheet.params.closeByOutsideClick || sheet.params.closeByBackdropClick) {
@@ -15358,8 +16209,9 @@
           }
         });
         sheet.on('close', () => {
-          if (sheet.params.swipeToStep) {
-            $el.removeClass('modal-in-swipe-step');
+          currentBreakpointIndex = undefined;
+          if (sheet.params.swipeToStep || useBreakpoints) {
+            $el.removeClass('modal-in-swipe-step modal-in-breakpoint');
             sheet.emit('local::_swipeStep', false);
             app.off('resize', onResize);
           }
@@ -15376,6 +16228,10 @@
           if (sheet.push && pushOffset) {
             sheet.$htmlEl.removeClass('with-modal-sheet-push');
             sheet.$htmlEl.addClass('with-modal-sheet-push-closing');
+            if ($pushViewEl) {
+              $pushViewEl.transform('');
+              $pushViewEl.css('border-radius', '');
+            }
           }
         });
         sheet.on('closed', () => {
@@ -15427,6 +16283,9 @@
           closeOnEscape: false,
           swipeToClose: false,
           swipeToStep: false,
+          breakpoints: [],
+          backdropBreakpoint: 0,
+          pushBreakpoint: 0,
           swipeHandler: null,
           containerEl: null
         }
@@ -15455,6 +16314,11 @@
             const sheetInstance = app.sheet.get(sheet);
             if (sheetInstance && sheetInstance.stepToggle) return sheetInstance.stepToggle();
             return undefined;
+          },
+          setBreakpoint(sheet, breakpoint) {
+            const sheetInstance = app.sheet.get(sheet);
+            if (sheetInstance && sheetInstance.setBreakpoint) return sheetInstance.setBreakpoint(breakpoint);
+            return undefined;
           }
         });
       },
@@ -27763,12 +28627,608 @@
         protoMetadataMap = {};
       return old_applyMemberDecs(ret, targetClass, protoMetadataMap, staticMetadataMap, memberDecs), old_convertMetadataMapToFinal(targetClass.prototype, protoMetadataMap), old_applyClassDecs(ret, targetClass, staticMetadataMap, classDecs), old_convertMetadataMapToFinal(targetClass, staticMetadataMap), ret;
     }
+    function applyDecs2203Factory() {
+      function createAddInitializerMethod(initializers, decoratorFinishedRef) {
+        return function (initializer) {
+          !function (decoratorFinishedRef, fnName) {
+            if (decoratorFinishedRef.v) throw new Error("attempted to call " + fnName + " after decoration was finished");
+          }(decoratorFinishedRef, "addInitializer"), assertCallable(initializer, "An initializer"), initializers.push(initializer);
+        };
+      }
+      function memberDec(dec, name, desc, initializers, kind, isStatic, isPrivate, value) {
+        var kindStr;
+        switch (kind) {
+          case 1:
+            kindStr = "accessor";
+            break;
+          case 2:
+            kindStr = "method";
+            break;
+          case 3:
+            kindStr = "getter";
+            break;
+          case 4:
+            kindStr = "setter";
+            break;
+          default:
+            kindStr = "field";
+        }
+        var get,
+          set,
+          ctx = {
+            kind: kindStr,
+            name: isPrivate ? "#" + name : name,
+            static: isStatic,
+            private: isPrivate
+          },
+          decoratorFinishedRef = {
+            v: !1
+          };
+        0 !== kind && (ctx.addInitializer = createAddInitializerMethod(initializers, decoratorFinishedRef)), 0 === kind ? isPrivate ? (get = desc.get, set = desc.set) : (get = function () {
+          return this[name];
+        }, set = function (v) {
+          this[name] = v;
+        }) : 2 === kind ? get = function () {
+          return desc.value;
+        } : (1 !== kind && 3 !== kind || (get = function () {
+          return desc.get.call(this);
+        }), 1 !== kind && 4 !== kind || (set = function (v) {
+          desc.set.call(this, v);
+        })), ctx.access = get && set ? {
+          get: get,
+          set: set
+        } : get ? {
+          get: get
+        } : {
+          set: set
+        };
+        try {
+          return dec(value, ctx);
+        } finally {
+          decoratorFinishedRef.v = !0;
+        }
+      }
+      function assertCallable(fn, hint) {
+        if ("function" != typeof fn) throw new TypeError(hint + " must be a function");
+      }
+      function assertValidReturnValue(kind, value) {
+        var type = typeof value;
+        if (1 === kind) {
+          if ("object" !== type || null === value) throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
+          void 0 !== value.get && assertCallable(value.get, "accessor.get"), void 0 !== value.set && assertCallable(value.set, "accessor.set"), void 0 !== value.init && assertCallable(value.init, "accessor.init");
+        } else if ("function" !== type) {
+          var hint;
+          throw hint = 0 === kind ? "field" : 10 === kind ? "class" : "method", new TypeError(hint + " decorators must return a function or void 0");
+        }
+      }
+      function applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers) {
+        var desc,
+          init,
+          value,
+          newValue,
+          get,
+          set,
+          decs = decInfo[0];
+        if (isPrivate ? desc = 0 === kind || 1 === kind ? {
+          get: decInfo[3],
+          set: decInfo[4]
+        } : 3 === kind ? {
+          get: decInfo[3]
+        } : 4 === kind ? {
+          set: decInfo[3]
+        } : {
+          value: decInfo[3]
+        } : 0 !== kind && (desc = Object.getOwnPropertyDescriptor(base, name)), 1 === kind ? value = {
+          get: desc.get,
+          set: desc.set
+        } : 2 === kind ? value = desc.value : 3 === kind ? value = desc.get : 4 === kind && (value = desc.set), "function" == typeof decs) void 0 !== (newValue = memberDec(decs, name, desc, initializers, kind, isStatic, isPrivate, value)) && (assertValidReturnValue(kind, newValue), 0 === kind ? init = newValue : 1 === kind ? (init = newValue.init, get = newValue.get || value.get, set = newValue.set || value.set, value = {
+          get: get,
+          set: set
+        }) : value = newValue);else for (var i = decs.length - 1; i >= 0; i--) {
+          var newInit;
+          if (void 0 !== (newValue = memberDec(decs[i], name, desc, initializers, kind, isStatic, isPrivate, value))) assertValidReturnValue(kind, newValue), 0 === kind ? newInit = newValue : 1 === kind ? (newInit = newValue.init, get = newValue.get || value.get, set = newValue.set || value.set, value = {
+            get: get,
+            set: set
+          }) : value = newValue, void 0 !== newInit && (void 0 === init ? init = newInit : "function" == typeof init ? init = [init, newInit] : init.push(newInit));
+        }
+        if (0 === kind || 1 === kind) {
+          if (void 0 === init) init = function (instance, init) {
+            return init;
+          };else if ("function" != typeof init) {
+            var ownInitializers = init;
+            init = function (instance, init) {
+              for (var value = init, i = 0; i < ownInitializers.length; i++) value = ownInitializers[i].call(instance, value);
+              return value;
+            };
+          } else {
+            var originalInitializer = init;
+            init = function (instance, init) {
+              return originalInitializer.call(instance, init);
+            };
+          }
+          ret.push(init);
+        }
+        0 !== kind && (1 === kind ? (desc.get = value.get, desc.set = value.set) : 2 === kind ? desc.value = value : 3 === kind ? desc.get = value : 4 === kind && (desc.set = value), isPrivate ? 1 === kind ? (ret.push(function (instance, args) {
+          return value.get.call(instance, args);
+        }), ret.push(function (instance, args) {
+          return value.set.call(instance, args);
+        })) : 2 === kind ? ret.push(value) : ret.push(function (instance, args) {
+          return value.call(instance, args);
+        }) : Object.defineProperty(base, name, desc));
+      }
+      function pushInitializers(ret, initializers) {
+        initializers && ret.push(function (instance) {
+          for (var i = 0; i < initializers.length; i++) initializers[i].call(instance);
+          return instance;
+        });
+      }
+      return function (targetClass, memberDecs, classDecs) {
+        var ret = [];
+        return function (ret, Class, decInfos) {
+          for (var protoInitializers, staticInitializers, existingProtoNonFields = new Map(), existingStaticNonFields = new Map(), i = 0; i < decInfos.length; i++) {
+            var decInfo = decInfos[i];
+            if (Array.isArray(decInfo)) {
+              var base,
+                initializers,
+                kind = decInfo[1],
+                name = decInfo[2],
+                isPrivate = decInfo.length > 3,
+                isStatic = kind >= 5;
+              if (isStatic ? (base = Class, 0 != (kind -= 5) && (initializers = staticInitializers = staticInitializers || [])) : (base = Class.prototype, 0 !== kind && (initializers = protoInitializers = protoInitializers || [])), 0 !== kind && !isPrivate) {
+                var existingNonFields = isStatic ? existingStaticNonFields : existingProtoNonFields,
+                  existingKind = existingNonFields.get(name) || 0;
+                if (!0 === existingKind || 3 === existingKind && 4 !== kind || 4 === existingKind && 3 !== kind) throw new Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + name);
+                !existingKind && kind > 2 ? existingNonFields.set(name, kind) : existingNonFields.set(name, !0);
+              }
+              applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers);
+            }
+          }
+          pushInitializers(ret, protoInitializers), pushInitializers(ret, staticInitializers);
+        }(ret, targetClass, memberDecs), function (ret, targetClass, classDecs) {
+          if (classDecs.length > 0) {
+            for (var initializers = [], newClass = targetClass, name = targetClass.name, i = classDecs.length - 1; i >= 0; i--) {
+              var decoratorFinishedRef = {
+                v: !1
+              };
+              try {
+                var nextNewClass = classDecs[i](newClass, {
+                  kind: "class",
+                  name: name,
+                  addInitializer: createAddInitializerMethod(initializers, decoratorFinishedRef)
+                });
+              } finally {
+                decoratorFinishedRef.v = !0;
+              }
+              void 0 !== nextNewClass && (assertValidReturnValue(10, nextNewClass), newClass = nextNewClass);
+            }
+            ret.push(newClass, function () {
+              for (var i = 0; i < initializers.length; i++) initializers[i].call(newClass);
+            });
+          }
+        }(ret, targetClass, classDecs), ret;
+      };
+    }
+    var applyDecs2203Impl;
+    function _applyDecs2203(targetClass, memberDecs, classDecs) {
+      return (applyDecs2203Impl = applyDecs2203Impl || applyDecs2203Factory())(targetClass, memberDecs, classDecs);
+    }
+    function applyDecs2203RFactory() {
+      function createAddInitializerMethod(initializers, decoratorFinishedRef) {
+        return function (initializer) {
+          !function (decoratorFinishedRef, fnName) {
+            if (decoratorFinishedRef.v) throw new Error("attempted to call " + fnName + " after decoration was finished");
+          }(decoratorFinishedRef, "addInitializer"), assertCallable(initializer, "An initializer"), initializers.push(initializer);
+        };
+      }
+      function memberDec(dec, name, desc, initializers, kind, isStatic, isPrivate, value) {
+        var kindStr;
+        switch (kind) {
+          case 1:
+            kindStr = "accessor";
+            break;
+          case 2:
+            kindStr = "method";
+            break;
+          case 3:
+            kindStr = "getter";
+            break;
+          case 4:
+            kindStr = "setter";
+            break;
+          default:
+            kindStr = "field";
+        }
+        var get,
+          set,
+          ctx = {
+            kind: kindStr,
+            name: isPrivate ? "#" + name : name,
+            static: isStatic,
+            private: isPrivate
+          },
+          decoratorFinishedRef = {
+            v: !1
+          };
+        0 !== kind && (ctx.addInitializer = createAddInitializerMethod(initializers, decoratorFinishedRef)), 0 === kind ? isPrivate ? (get = desc.get, set = desc.set) : (get = function () {
+          return this[name];
+        }, set = function (v) {
+          this[name] = v;
+        }) : 2 === kind ? get = function () {
+          return desc.value;
+        } : (1 !== kind && 3 !== kind || (get = function () {
+          return desc.get.call(this);
+        }), 1 !== kind && 4 !== kind || (set = function (v) {
+          desc.set.call(this, v);
+        })), ctx.access = get && set ? {
+          get: get,
+          set: set
+        } : get ? {
+          get: get
+        } : {
+          set: set
+        };
+        try {
+          return dec(value, ctx);
+        } finally {
+          decoratorFinishedRef.v = !0;
+        }
+      }
+      function assertCallable(fn, hint) {
+        if ("function" != typeof fn) throw new TypeError(hint + " must be a function");
+      }
+      function assertValidReturnValue(kind, value) {
+        var type = typeof value;
+        if (1 === kind) {
+          if ("object" !== type || null === value) throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
+          void 0 !== value.get && assertCallable(value.get, "accessor.get"), void 0 !== value.set && assertCallable(value.set, "accessor.set"), void 0 !== value.init && assertCallable(value.init, "accessor.init");
+        } else if ("function" !== type) {
+          var hint;
+          throw hint = 0 === kind ? "field" : 10 === kind ? "class" : "method", new TypeError(hint + " decorators must return a function or void 0");
+        }
+      }
+      function applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers) {
+        var desc,
+          init,
+          value,
+          newValue,
+          get,
+          set,
+          decs = decInfo[0];
+        if (isPrivate ? desc = 0 === kind || 1 === kind ? {
+          get: decInfo[3],
+          set: decInfo[4]
+        } : 3 === kind ? {
+          get: decInfo[3]
+        } : 4 === kind ? {
+          set: decInfo[3]
+        } : {
+          value: decInfo[3]
+        } : 0 !== kind && (desc = Object.getOwnPropertyDescriptor(base, name)), 1 === kind ? value = {
+          get: desc.get,
+          set: desc.set
+        } : 2 === kind ? value = desc.value : 3 === kind ? value = desc.get : 4 === kind && (value = desc.set), "function" == typeof decs) void 0 !== (newValue = memberDec(decs, name, desc, initializers, kind, isStatic, isPrivate, value)) && (assertValidReturnValue(kind, newValue), 0 === kind ? init = newValue : 1 === kind ? (init = newValue.init, get = newValue.get || value.get, set = newValue.set || value.set, value = {
+          get: get,
+          set: set
+        }) : value = newValue);else for (var i = decs.length - 1; i >= 0; i--) {
+          var newInit;
+          if (void 0 !== (newValue = memberDec(decs[i], name, desc, initializers, kind, isStatic, isPrivate, value))) assertValidReturnValue(kind, newValue), 0 === kind ? newInit = newValue : 1 === kind ? (newInit = newValue.init, get = newValue.get || value.get, set = newValue.set || value.set, value = {
+            get: get,
+            set: set
+          }) : value = newValue, void 0 !== newInit && (void 0 === init ? init = newInit : "function" == typeof init ? init = [init, newInit] : init.push(newInit));
+        }
+        if (0 === kind || 1 === kind) {
+          if (void 0 === init) init = function (instance, init) {
+            return init;
+          };else if ("function" != typeof init) {
+            var ownInitializers = init;
+            init = function (instance, init) {
+              for (var value = init, i = 0; i < ownInitializers.length; i++) value = ownInitializers[i].call(instance, value);
+              return value;
+            };
+          } else {
+            var originalInitializer = init;
+            init = function (instance, init) {
+              return originalInitializer.call(instance, init);
+            };
+          }
+          ret.push(init);
+        }
+        0 !== kind && (1 === kind ? (desc.get = value.get, desc.set = value.set) : 2 === kind ? desc.value = value : 3 === kind ? desc.get = value : 4 === kind && (desc.set = value), isPrivate ? 1 === kind ? (ret.push(function (instance, args) {
+          return value.get.call(instance, args);
+        }), ret.push(function (instance, args) {
+          return value.set.call(instance, args);
+        })) : 2 === kind ? ret.push(value) : ret.push(function (instance, args) {
+          return value.call(instance, args);
+        }) : Object.defineProperty(base, name, desc));
+      }
+      function applyMemberDecs(Class, decInfos) {
+        for (var protoInitializers, staticInitializers, ret = [], existingProtoNonFields = new Map(), existingStaticNonFields = new Map(), i = 0; i < decInfos.length; i++) {
+          var decInfo = decInfos[i];
+          if (Array.isArray(decInfo)) {
+            var base,
+              initializers,
+              kind = decInfo[1],
+              name = decInfo[2],
+              isPrivate = decInfo.length > 3,
+              isStatic = kind >= 5;
+            if (isStatic ? (base = Class, 0 !== (kind -= 5) && (initializers = staticInitializers = staticInitializers || [])) : (base = Class.prototype, 0 !== kind && (initializers = protoInitializers = protoInitializers || [])), 0 !== kind && !isPrivate) {
+              var existingNonFields = isStatic ? existingStaticNonFields : existingProtoNonFields,
+                existingKind = existingNonFields.get(name) || 0;
+              if (!0 === existingKind || 3 === existingKind && 4 !== kind || 4 === existingKind && 3 !== kind) throw new Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + name);
+              !existingKind && kind > 2 ? existingNonFields.set(name, kind) : existingNonFields.set(name, !0);
+            }
+            applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers);
+          }
+        }
+        return pushInitializers(ret, protoInitializers), pushInitializers(ret, staticInitializers), ret;
+      }
+      function pushInitializers(ret, initializers) {
+        initializers && ret.push(function (instance) {
+          for (var i = 0; i < initializers.length; i++) initializers[i].call(instance);
+          return instance;
+        });
+      }
+      return function (targetClass, memberDecs, classDecs) {
+        return {
+          e: applyMemberDecs(targetClass, memberDecs),
+          get c() {
+            return function (targetClass, classDecs) {
+              if (classDecs.length > 0) {
+                for (var initializers = [], newClass = targetClass, name = targetClass.name, i = classDecs.length - 1; i >= 0; i--) {
+                  var decoratorFinishedRef = {
+                    v: !1
+                  };
+                  try {
+                    var nextNewClass = classDecs[i](newClass, {
+                      kind: "class",
+                      name: name,
+                      addInitializer: createAddInitializerMethod(initializers, decoratorFinishedRef)
+                    });
+                  } finally {
+                    decoratorFinishedRef.v = !0;
+                  }
+                  void 0 !== nextNewClass && (assertValidReturnValue(10, nextNewClass), newClass = nextNewClass);
+                }
+                return [newClass, function () {
+                  for (var i = 0; i < initializers.length; i++) initializers[i].call(newClass);
+                }];
+              }
+            }(targetClass, classDecs);
+          }
+        };
+      };
+    }
+    function _applyDecs2203R(targetClass, memberDecs, classDecs) {
+      return (_applyDecs2203R = applyDecs2203RFactory())(targetClass, memberDecs, classDecs);
+    }
+    function applyDecs2301Factory() {
+      function createAddInitializerMethod(initializers, decoratorFinishedRef) {
+        return function (initializer) {
+          !function (decoratorFinishedRef, fnName) {
+            if (decoratorFinishedRef.v) throw new Error("attempted to call " + fnName + " after decoration was finished");
+          }(decoratorFinishedRef, "addInitializer"), assertCallable(initializer, "An initializer"), initializers.push(initializer);
+        };
+      }
+      function assertInstanceIfPrivate(has, target) {
+        if (!has(target)) throw new TypeError("Attempted to access private element on non-instance");
+      }
+      function memberDec(dec, name, desc, initializers, kind, isStatic, isPrivate, value, hasPrivateBrand) {
+        var kindStr;
+        switch (kind) {
+          case 1:
+            kindStr = "accessor";
+            break;
+          case 2:
+            kindStr = "method";
+            break;
+          case 3:
+            kindStr = "getter";
+            break;
+          case 4:
+            kindStr = "setter";
+            break;
+          default:
+            kindStr = "field";
+        }
+        var get,
+          set,
+          ctx = {
+            kind: kindStr,
+            name: isPrivate ? "#" + name : name,
+            static: isStatic,
+            private: isPrivate
+          },
+          decoratorFinishedRef = {
+            v: !1
+          };
+        if (0 !== kind && (ctx.addInitializer = createAddInitializerMethod(initializers, decoratorFinishedRef)), isPrivate || 0 !== kind && 2 !== kind) {
+          if (2 === kind) get = function (target) {
+            return assertInstanceIfPrivate(hasPrivateBrand, target), desc.value;
+          };else {
+            var t = 0 === kind || 1 === kind;
+            (t || 3 === kind) && (get = isPrivate ? function (target) {
+              return assertInstanceIfPrivate(hasPrivateBrand, target), desc.get.call(target);
+            } : function (target) {
+              return desc.get.call(target);
+            }), (t || 4 === kind) && (set = isPrivate ? function (target, value) {
+              assertInstanceIfPrivate(hasPrivateBrand, target), desc.set.call(target, value);
+            } : function (target, value) {
+              desc.set.call(target, value);
+            });
+          }
+        } else get = function (target) {
+          return target[name];
+        }, 0 === kind && (set = function (target, v) {
+          target[name] = v;
+        });
+        var has = isPrivate ? hasPrivateBrand.bind() : function (target) {
+          return name in target;
+        };
+        ctx.access = get && set ? {
+          get: get,
+          set: set,
+          has: has
+        } : get ? {
+          get: get,
+          has: has
+        } : {
+          set: set,
+          has: has
+        };
+        try {
+          return dec(value, ctx);
+        } finally {
+          decoratorFinishedRef.v = !0;
+        }
+      }
+      function assertCallable(fn, hint) {
+        if ("function" != typeof fn) throw new TypeError(hint + " must be a function");
+      }
+      function assertValidReturnValue(kind, value) {
+        var type = typeof value;
+        if (1 === kind) {
+          if ("object" !== type || null === value) throw new TypeError("accessor decorators must return an object with get, set, or init properties or void 0");
+          void 0 !== value.get && assertCallable(value.get, "accessor.get"), void 0 !== value.set && assertCallable(value.set, "accessor.set"), void 0 !== value.init && assertCallable(value.init, "accessor.init");
+        } else if ("function" !== type) {
+          var hint;
+          throw hint = 0 === kind ? "field" : 10 === kind ? "class" : "method", new TypeError(hint + " decorators must return a function or void 0");
+        }
+      }
+      function curryThis2(fn) {
+        return function (value) {
+          fn(this, value);
+        };
+      }
+      function applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers, hasPrivateBrand) {
+        var desc,
+          init,
+          value,
+          fn,
+          newValue,
+          get,
+          set,
+          decs = decInfo[0];
+        if (isPrivate ? desc = 0 === kind || 1 === kind ? {
+          get: (fn = decInfo[3], function () {
+            return fn(this);
+          }),
+          set: curryThis2(decInfo[4])
+        } : 3 === kind ? {
+          get: decInfo[3]
+        } : 4 === kind ? {
+          set: decInfo[3]
+        } : {
+          value: decInfo[3]
+        } : 0 !== kind && (desc = Object.getOwnPropertyDescriptor(base, name)), 1 === kind ? value = {
+          get: desc.get,
+          set: desc.set
+        } : 2 === kind ? value = desc.value : 3 === kind ? value = desc.get : 4 === kind && (value = desc.set), "function" == typeof decs) void 0 !== (newValue = memberDec(decs, name, desc, initializers, kind, isStatic, isPrivate, value, hasPrivateBrand)) && (assertValidReturnValue(kind, newValue), 0 === kind ? init = newValue : 1 === kind ? (init = newValue.init, get = newValue.get || value.get, set = newValue.set || value.set, value = {
+          get: get,
+          set: set
+        }) : value = newValue);else for (var i = decs.length - 1; i >= 0; i--) {
+          var newInit;
+          if (void 0 !== (newValue = memberDec(decs[i], name, desc, initializers, kind, isStatic, isPrivate, value, hasPrivateBrand))) assertValidReturnValue(kind, newValue), 0 === kind ? newInit = newValue : 1 === kind ? (newInit = newValue.init, get = newValue.get || value.get, set = newValue.set || value.set, value = {
+            get: get,
+            set: set
+          }) : value = newValue, void 0 !== newInit && (void 0 === init ? init = newInit : "function" == typeof init ? init = [init, newInit] : init.push(newInit));
+        }
+        if (0 === kind || 1 === kind) {
+          if (void 0 === init) init = function (instance, init) {
+            return init;
+          };else if ("function" != typeof init) {
+            var ownInitializers = init;
+            init = function (instance, init) {
+              for (var value = init, i = 0; i < ownInitializers.length; i++) value = ownInitializers[i].call(instance, value);
+              return value;
+            };
+          } else {
+            var originalInitializer = init;
+            init = function (instance, init) {
+              return originalInitializer.call(instance, init);
+            };
+          }
+          ret.push(init);
+        }
+        0 !== kind && (1 === kind ? (desc.get = value.get, desc.set = value.set) : 2 === kind ? desc.value = value : 3 === kind ? desc.get = value : 4 === kind && (desc.set = value), isPrivate ? 1 === kind ? (ret.push(function (instance, args) {
+          return value.get.call(instance, args);
+        }), ret.push(function (instance, args) {
+          return value.set.call(instance, args);
+        })) : 2 === kind ? ret.push(value) : ret.push(function (instance, args) {
+          return value.call(instance, args);
+        }) : Object.defineProperty(base, name, desc));
+      }
+      function applyMemberDecs(Class, decInfos, instanceBrand) {
+        for (var protoInitializers, staticInitializers, staticBrand, ret = [], existingProtoNonFields = new Map(), existingStaticNonFields = new Map(), i = 0; i < decInfos.length; i++) {
+          var decInfo = decInfos[i];
+          if (Array.isArray(decInfo)) {
+            var base,
+              initializers,
+              kind = decInfo[1],
+              name = decInfo[2],
+              isPrivate = decInfo.length > 3,
+              isStatic = kind >= 5,
+              hasPrivateBrand = instanceBrand;
+            if (isStatic ? (base = Class, 0 !== (kind -= 5) && (initializers = staticInitializers = staticInitializers || []), isPrivate && !staticBrand && (staticBrand = function (_) {
+              return _checkInRHS(_) === Class;
+            }), hasPrivateBrand = staticBrand) : (base = Class.prototype, 0 !== kind && (initializers = protoInitializers = protoInitializers || [])), 0 !== kind && !isPrivate) {
+              var existingNonFields = isStatic ? existingStaticNonFields : existingProtoNonFields,
+                existingKind = existingNonFields.get(name) || 0;
+              if (!0 === existingKind || 3 === existingKind && 4 !== kind || 4 === existingKind && 3 !== kind) throw new Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + name);
+              !existingKind && kind > 2 ? existingNonFields.set(name, kind) : existingNonFields.set(name, !0);
+            }
+            applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers, hasPrivateBrand);
+          }
+        }
+        return pushInitializers(ret, protoInitializers), pushInitializers(ret, staticInitializers), ret;
+      }
+      function pushInitializers(ret, initializers) {
+        initializers && ret.push(function (instance) {
+          for (var i = 0; i < initializers.length; i++) initializers[i].call(instance);
+          return instance;
+        });
+      }
+      return function (targetClass, memberDecs, classDecs, instanceBrand) {
+        return {
+          e: applyMemberDecs(targetClass, memberDecs, instanceBrand),
+          get c() {
+            return function (targetClass, classDecs) {
+              if (classDecs.length > 0) {
+                for (var initializers = [], newClass = targetClass, name = targetClass.name, i = classDecs.length - 1; i >= 0; i--) {
+                  var decoratorFinishedRef = {
+                    v: !1
+                  };
+                  try {
+                    var nextNewClass = classDecs[i](newClass, {
+                      kind: "class",
+                      name: name,
+                      addInitializer: createAddInitializerMethod(initializers, decoratorFinishedRef)
+                    });
+                  } finally {
+                    decoratorFinishedRef.v = !0;
+                  }
+                  void 0 !== nextNewClass && (assertValidReturnValue(10, nextNewClass), newClass = nextNewClass);
+                }
+                return [newClass, function () {
+                  for (var i = 0; i < initializers.length; i++) initializers[i].call(newClass);
+                }];
+              }
+            }(targetClass, classDecs);
+          }
+        };
+      };
+    }
+    function _applyDecs2301(targetClass, memberDecs, classDecs, instanceBrand) {
+      return (_applyDecs2301 = applyDecs2301Factory())(targetClass, memberDecs, classDecs, instanceBrand);
+    }
     function createAddInitializerMethod(initializers, decoratorFinishedRef) {
       return function (initializer) {
         assertNotFinished(decoratorFinishedRef, "addInitializer"), assertCallable(initializer, "An initializer"), initializers.push(initializer);
       };
     }
-    function memberDec(dec, name, desc, initializers, kind, isStatic, isPrivate, value) {
+    function assertInstanceIfPrivate(has, target) {
+      if (!has(target)) throw new TypeError("Attempted to access private element on non-instance");
+    }
+    function memberDec(dec, thisArg, name, desc, initializers, kind, isStatic, isPrivate, value, hasPrivateBrand) {
       var kindStr;
       switch (kind) {
         case 1:
@@ -27797,26 +29257,42 @@
         decoratorFinishedRef = {
           v: !1
         };
-      0 !== kind && (ctx.addInitializer = createAddInitializerMethod(initializers, decoratorFinishedRef)), 0 === kind ? isPrivate ? (get = desc.get, set = desc.set) : (get = function () {
-        return this[name];
-      }, set = function (v) {
-        this[name] = v;
-      }) : 2 === kind ? get = function () {
-        return desc.value;
-      } : (1 !== kind && 3 !== kind || (get = function () {
-        return desc.get.call(this);
-      }), 1 !== kind && 4 !== kind || (set = function (v) {
-        desc.set.call(this, v);
-      })), ctx.access = get && set ? {
+      if (0 !== kind && (ctx.addInitializer = createAddInitializerMethod(initializers, decoratorFinishedRef)), isPrivate || 0 !== kind && 2 !== kind) {
+        if (2 === kind) get = function (target) {
+          return assertInstanceIfPrivate(hasPrivateBrand, target), desc.value;
+        };else {
+          var t = 0 === kind || 1 === kind;
+          (t || 3 === kind) && (get = isPrivate ? function (target) {
+            return assertInstanceIfPrivate(hasPrivateBrand, target), desc.get.call(target);
+          } : function (target) {
+            return desc.get.call(target);
+          }), (t || 4 === kind) && (set = isPrivate ? function (target, value) {
+            assertInstanceIfPrivate(hasPrivateBrand, target), desc.set.call(target, value);
+          } : function (target, value) {
+            desc.set.call(target, value);
+          });
+        }
+      } else get = function (target) {
+        return target[name];
+      }, 0 === kind && (set = function (target, v) {
+        target[name] = v;
+      });
+      var has = isPrivate ? hasPrivateBrand.bind() : function (target) {
+        return name in target;
+      };
+      ctx.access = get && set ? {
         get: get,
-        set: set
+        set: set,
+        has: has
       } : get ? {
-        get: get
+        get: get,
+        has: has
       } : {
-        set: set
+        set: set,
+        has: has
       };
       try {
-        return dec(value, ctx);
+        return dec.call(thisArg, value, ctx);
       } finally {
         decoratorFinishedRef.v = !0;
       }
@@ -27834,10 +29310,20 @@
         void 0 !== value.get && assertCallable(value.get, "accessor.get"), void 0 !== value.set && assertCallable(value.set, "accessor.set"), void 0 !== value.init && assertCallable(value.init, "accessor.init");
       } else if ("function" !== type) {
         var hint;
-        throw hint = 0 === kind ? "field" : 10 === kind ? "class" : "method", new TypeError(hint + " decorators must return a function or void 0");
+        throw hint = 0 === kind ? "field" : 5 === kind ? "class" : "method", new TypeError(hint + " decorators must return a function or void 0");
       }
     }
-    function applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers) {
+    function curryThis1(fn) {
+      return function () {
+        return fn(this);
+      };
+    }
+    function curryThis2(fn) {
+      return function (value) {
+        fn(this, value);
+      };
+    }
+    function applyMemberDec(ret, base, decInfo, decoratorsHaveThis, name, kind, isStatic, isPrivate, initializers, hasPrivateBrand) {
       var desc,
         init,
         value,
@@ -27845,9 +29331,9 @@
         get,
         set,
         decs = decInfo[0];
-      if (isPrivate ? desc = 0 === kind || 1 === kind ? {
-        get: decInfo[3],
-        set: decInfo[4]
+      decoratorsHaveThis || Array.isArray(decs) || (decs = [decs]), isPrivate ? desc = 0 === kind || 1 === kind ? {
+        get: curryThis1(decInfo[3]),
+        set: curryThis2(decInfo[4])
       } : 3 === kind ? {
         get: decInfo[3]
       } : 4 === kind ? {
@@ -27857,12 +29343,10 @@
       } : 0 !== kind && (desc = Object.getOwnPropertyDescriptor(base, name)), 1 === kind ? value = {
         get: desc.get,
         set: desc.set
-      } : 2 === kind ? value = desc.value : 3 === kind ? value = desc.get : 4 === kind && (value = desc.set), "function" == typeof decs) void 0 !== (newValue = memberDec(decs, name, desc, initializers, kind, isStatic, isPrivate, value)) && (assertValidReturnValue(kind, newValue), 0 === kind ? init = newValue : 1 === kind ? (init = newValue.init, get = newValue.get || value.get, set = newValue.set || value.set, value = {
-        get: get,
-        set: set
-      }) : value = newValue);else for (var i = decs.length - 1; i >= 0; i--) {
+      } : 2 === kind ? value = desc.value : 3 === kind ? value = desc.get : 4 === kind && (value = desc.set);
+      for (var inc = decoratorsHaveThis ? 2 : 1, i = decs.length - 1; i >= 0; i -= inc) {
         var newInit;
-        if (void 0 !== (newValue = memberDec(decs[i], name, desc, initializers, kind, isStatic, isPrivate, value))) assertValidReturnValue(kind, newValue), 0 === kind ? newInit = newValue : 1 === kind ? (newInit = newValue.init, get = newValue.get || value.get, set = newValue.set || value.set, value = {
+        if (void 0 !== (newValue = memberDec(decs[i], decoratorsHaveThis ? decs[i - 1] : void 0, name, desc, initializers, kind, isStatic, isPrivate, value, hasPrivateBrand))) assertValidReturnValue(kind, newValue), 0 === kind ? newInit = newValue : 1 === kind ? (newInit = newValue.init, get = newValue.get || value.get, set = newValue.set || value.set, value = {
           get: get,
           set: set
         }) : value = newValue, void 0 !== newInit && (void 0 === init ? init = newInit : "function" == typeof init ? init = [init, newInit] : init.push(newInit));
@@ -27873,7 +29357,7 @@
         };else if ("function" != typeof init) {
           var ownInitializers = init;
           init = function (instance, init) {
-            for (var value = init, i = 0; i < ownInitializers.length; i++) value = ownInitializers[i].call(instance, value);
+            for (var value = init, i = ownInitializers.length - 1; i >= 0; i--) value = ownInitializers[i].call(instance, value);
             return value;
           };
         } else {
@@ -27892,8 +29376,8 @@
         return value.call(instance, args);
       }) : Object.defineProperty(base, name, desc));
     }
-    function applyMemberDecs(ret, Class, decInfos) {
-      for (var protoInitializers, staticInitializers, existingProtoNonFields = new Map(), existingStaticNonFields = new Map(), i = 0; i < decInfos.length; i++) {
+    function applyMemberDecs(Class, decInfos, instanceBrand) {
+      for (var protoInitializers, staticInitializers, staticBrand, ret = [], existingProtoNonFields = new Map(), existingStaticNonFields = new Map(), i = 0; i < decInfos.length; i++) {
         var decInfo = decInfos[i];
         if (Array.isArray(decInfo)) {
           var base,
@@ -27901,17 +29385,21 @@
             kind = decInfo[1],
             name = decInfo[2],
             isPrivate = decInfo.length > 3,
-            isStatic = kind >= 5;
-          if (isStatic ? (base = Class, 0 !== (kind -= 5) && (initializers = staticInitializers = staticInitializers || [])) : (base = Class.prototype, 0 !== kind && (initializers = protoInitializers = protoInitializers || [])), 0 !== kind && !isPrivate) {
+            decoratorsHaveThis = 16 & kind,
+            isStatic = !!(8 & kind),
+            hasPrivateBrand = instanceBrand;
+          if (kind &= 7, isStatic ? (base = Class, 0 !== kind && (initializers = staticInitializers = staticInitializers || []), isPrivate && !staticBrand && (staticBrand = function (_) {
+            return _checkInRHS(_) === Class;
+          }), hasPrivateBrand = staticBrand) : (base = Class.prototype, 0 !== kind && (initializers = protoInitializers = protoInitializers || [])), 0 !== kind && !isPrivate) {
             var existingNonFields = isStatic ? existingStaticNonFields : existingProtoNonFields,
               existingKind = existingNonFields.get(name) || 0;
             if (!0 === existingKind || 3 === existingKind && 4 !== kind || 4 === existingKind && 3 !== kind) throw new Error("Attempted to decorate a public method/accessor that has the same name as a previously decorated public method/accessor. This is not currently supported by the decorators plugin. Property name was: " + name);
-            !existingKind && kind > 2 ? existingNonFields.set(name, kind) : existingNonFields.set(name, !0);
+            existingNonFields.set(name, !(!existingKind && kind > 2) || kind);
           }
-          applyMemberDec(ret, base, decInfo, name, kind, isStatic, isPrivate, initializers);
+          applyMemberDec(ret, base, decInfo, decoratorsHaveThis, name, kind, isStatic, isPrivate, initializers, hasPrivateBrand);
         }
       }
-      pushInitializers(ret, protoInitializers), pushInitializers(ret, staticInitializers);
+      return pushInitializers(ret, protoInitializers), pushInitializers(ret, staticInitializers), ret;
     }
     function pushInitializers(ret, initializers) {
       initializers && ret.push(function (instance) {
@@ -27919,14 +29407,14 @@
         return instance;
       });
     }
-    function applyClassDecs(ret, targetClass, classDecs) {
-      if (classDecs.length > 0) {
-        for (var initializers = [], newClass = targetClass, name = targetClass.name, i = classDecs.length - 1; i >= 0; i--) {
+    function applyClassDecs(targetClass, classDecs, decoratorsHaveThis) {
+      if (classDecs.length) {
+        for (var initializers = [], newClass = targetClass, name = targetClass.name, inc = decoratorsHaveThis ? 2 : 1, i = classDecs.length - 1; i >= 0; i -= inc) {
           var decoratorFinishedRef = {
             v: !1
           };
           try {
-            var nextNewClass = classDecs[i](newClass, {
+            var nextNewClass = classDecs[i].call(decoratorsHaveThis ? classDecs[i - 1] : void 0, newClass, {
               kind: "class",
               name: name,
               addInitializer: createAddInitializerMethod(initializers, decoratorFinishedRef)
@@ -27934,16 +29422,20 @@
           } finally {
             decoratorFinishedRef.v = !0;
           }
-          void 0 !== nextNewClass && (assertValidReturnValue(10, nextNewClass), newClass = nextNewClass);
+          void 0 !== nextNewClass && (assertValidReturnValue(5, nextNewClass), newClass = nextNewClass);
         }
-        ret.push(newClass, function () {
+        return [newClass, function () {
           for (var i = 0; i < initializers.length; i++) initializers[i].call(newClass);
-        });
+        }];
       }
     }
-    function _applyDecs2203(targetClass, memberDecs, classDecs) {
-      var ret = [];
-      return applyMemberDecs(ret, targetClass, memberDecs), applyClassDecs(ret, targetClass, classDecs), ret;
+    function _applyDecs2305(targetClass, memberDecs, classDecs, classDecsHaveThis, instanceBrand) {
+      return {
+        e: applyMemberDecs(targetClass, memberDecs, instanceBrand),
+        get c() {
+          return applyClassDecs(targetClass, classDecs, classDecsHaveThis);
+        }
+      };
     }
     function _asyncGeneratorDelegate(inner) {
       var iter = {},
@@ -28014,6 +29506,80 @@
     function _awaitAsyncGenerator(value) {
       return new _OverloadYield(value, 0);
     }
+    function _checkInRHS(value) {
+      if (Object(value) !== value) throw TypeError("right-hand side of 'in' should be an object, got " + (null !== value ? typeof value : "null"));
+      return value;
+    }
+    function _defineAccessor(type, obj, key, fn) {
+      var desc = {
+        configurable: !0,
+        enumerable: !0
+      };
+      return desc[type] = fn, Object.defineProperty(obj, key, desc);
+    }
+    function dispose_SuppressedError(suppressed, error) {
+      return "undefined" != typeof SuppressedError ? dispose_SuppressedError = SuppressedError : (dispose_SuppressedError = function (suppressed, error) {
+        this.suppressed = suppressed, this.error = error, this.stack = new Error().stack;
+      }, dispose_SuppressedError.prototype = Object.create(Error.prototype, {
+        constructor: {
+          value: dispose_SuppressedError,
+          writable: !0,
+          configurable: !0
+        }
+      })), new dispose_SuppressedError(suppressed, error);
+    }
+    function _dispose(stack, error, hasError) {
+      function next() {
+        for (; stack.length > 0;) try {
+          var r = stack.pop(),
+            p = r.d.call(r.v);
+          if (r.a) return Promise.resolve(p).then(next, err);
+        } catch (e) {
+          return err(e);
+        }
+        if (hasError) throw error;
+      }
+      function err(e) {
+        return error = hasError ? new dispose_SuppressedError(e, error) : e, hasError = !0, next();
+      }
+      return next();
+    }
+    function _iterableToArrayLimit(arr, i) {
+      var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
+      if (null != _i) {
+        var _s,
+          _e,
+          _x,
+          _r,
+          _arr = [],
+          _n = !0,
+          _d = !1;
+        try {
+          if (_x = (_i = _i.call(arr)).next, 0 === i) {
+            if (Object(_i) !== _i) return;
+            _n = !1;
+          } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
+        } catch (err) {
+          _d = !0, _e = err;
+        } finally {
+          try {
+            if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return;
+          } finally {
+            if (_d) throw _e;
+          }
+        }
+        return _arr;
+      }
+    }
+    function _iterableToArrayLimitLoose(arr, i) {
+      var _i = arr && ("undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]);
+      if (null != _i) {
+        var _s,
+          _arr = [];
+        for (_i = _i.call(arr); arr.length < i && !(_s = _i.next()).done;) _arr.push(_s.value);
+        return _arr;
+      }
+    }
     var REACT_ELEMENT_TYPE;
     function _jsx(type, props, key, children) {
       REACT_ELEMENT_TYPE || (REACT_ELEMENT_TYPE = "function" == typeof Symbol && Symbol.for && Symbol.for("react.element") || 60103);
@@ -28064,6 +29630,9 @@
       var exports = {},
         Op = Object.prototype,
         hasOwn = Op.hasOwnProperty,
+        defineProperty = Object.defineProperty || function (obj, key, desc) {
+          obj[key] = desc.value;
+        },
         $Symbol = "function" == typeof Symbol ? Symbol : {},
         iteratorSymbol = $Symbol.iterator || "@@iterator",
         asyncIteratorSymbol = $Symbol.asyncIterator || "@@asyncIterator",
@@ -28087,40 +29656,9 @@
         var protoGenerator = outerFn && outerFn.prototype instanceof Generator ? outerFn : Generator,
           generator = Object.create(protoGenerator.prototype),
           context = new Context(tryLocsList || []);
-        return generator._invoke = function (innerFn, self, context) {
-          var state = "suspendedStart";
-          return function (method, arg) {
-            if ("executing" === state) throw new Error("Generator is already running");
-            if ("completed" === state) {
-              if ("throw" === method) throw arg;
-              return doneResult();
-            }
-            for (context.method = method, context.arg = arg;;) {
-              var delegate = context.delegate;
-              if (delegate) {
-                var delegateResult = maybeInvokeDelegate(delegate, context);
-                if (delegateResult) {
-                  if (delegateResult === ContinueSentinel) continue;
-                  return delegateResult;
-                }
-              }
-              if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) {
-                if ("suspendedStart" === state) throw state = "completed", context.arg;
-                context.dispatchException(context.arg);
-              } else "return" === context.method && context.abrupt("return", context.arg);
-              state = "executing";
-              var record = tryCatch(innerFn, self, context);
-              if ("normal" === record.type) {
-                if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue;
-                return {
-                  value: record.arg,
-                  done: context.done
-                };
-              }
-              "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg);
-            }
-          };
-        }(innerFn, self, context), generator;
+        return defineProperty(generator, "_invoke", {
+          value: makeInvokeMethod(innerFn, self, context)
+        }), generator;
       }
       function tryCatch(fn, obj, arg) {
         try {
@@ -28174,24 +29712,58 @@
           reject(record.arg);
         }
         var previousPromise;
-        this._invoke = function (method, arg) {
-          function callInvokeWithMethodAndArg() {
-            return new PromiseImpl(function (resolve, reject) {
-              invoke(method, arg, resolve, reject);
-            });
+        defineProperty(this, "_invoke", {
+          value: function (method, arg) {
+            function callInvokeWithMethodAndArg() {
+              return new PromiseImpl(function (resolve, reject) {
+                invoke(method, arg, resolve, reject);
+              });
+            }
+            return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
+          }
+        });
+      }
+      function makeInvokeMethod(innerFn, self, context) {
+        var state = "suspendedStart";
+        return function (method, arg) {
+          if ("executing" === state) throw new Error("Generator is already running");
+          if ("completed" === state) {
+            if ("throw" === method) throw arg;
+            return {
+              value: void 0,
+              done: !0
+            };
+          }
+          for (context.method = method, context.arg = arg;;) {
+            var delegate = context.delegate;
+            if (delegate) {
+              var delegateResult = maybeInvokeDelegate(delegate, context);
+              if (delegateResult) {
+                if (delegateResult === ContinueSentinel) continue;
+                return delegateResult;
+              }
+            }
+            if ("next" === context.method) context.sent = context._sent = context.arg;else if ("throw" === context.method) {
+              if ("suspendedStart" === state) throw state = "completed", context.arg;
+              context.dispatchException(context.arg);
+            } else "return" === context.method && context.abrupt("return", context.arg);
+            state = "executing";
+            var record = tryCatch(innerFn, self, context);
+            if ("normal" === record.type) {
+              if (state = context.done ? "completed" : "suspendedYield", record.arg === ContinueSentinel) continue;
+              return {
+                value: record.arg,
+                done: context.done
+              };
+            }
+            "throw" === record.type && (state = "completed", context.method = "throw", context.arg = record.arg);
           }
-          return previousPromise = previousPromise ? previousPromise.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg();
         };
       }
       function maybeInvokeDelegate(delegate, context) {
-        var method = delegate.iterator[context.method];
-        if (undefined === method) {
-          if (context.delegate = null, "throw" === context.method) {
-            if (delegate.iterator.return && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method)) return ContinueSentinel;
-            context.method = "throw", context.arg = new TypeError("The iterator does not provide a 'throw' method");
-          }
-          return ContinueSentinel;
-        }
+        var methodName = context.method,
+          method = delegate.iterator[methodName];
+        if (undefined === method) return context.delegate = null, "throw" === methodName && delegate.iterator.return && (context.method = "return", context.arg = undefined, maybeInvokeDelegate(delegate, context), "throw" === context.method) || "return" !== methodName && (context.method = "throw", context.arg = new TypeError("The iterator does not provide a '" + methodName + "' method")), ContinueSentinel;
         var record = tryCatch(method, delegate.iterator, context.arg);
         if ("throw" === record.type) return context.method = "throw", context.arg = record.arg, context.delegate = null, ContinueSentinel;
         var info = record.arg;
@@ -28213,7 +29785,7 @@
         }], tryLocsList.forEach(pushTryEntry, this), this.reset(!0);
       }
       function values(iterable) {
-        if (iterable) {
+        if (iterable || "" === iterable) {
           var iteratorMethod = iterable[iteratorSymbol];
           if (iteratorMethod) return iteratorMethod.call(iterable);
           if ("function" == typeof iterable.next) return iterable;
@@ -28226,17 +29798,15 @@
             return next.next = next;
           }
         }
-        return {
-          next: doneResult
-        };
-      }
-      function doneResult() {
-        return {
-          value: undefined,
-          done: !0
-        };
+        throw new TypeError(typeof iterable + " is not iterable");
       }
-      return GeneratorFunction.prototype = GeneratorFunctionPrototype, define(Gp, "constructor", GeneratorFunctionPrototype), define(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) {
+      return GeneratorFunction.prototype = GeneratorFunctionPrototype, defineProperty(Gp, "constructor", {
+        value: GeneratorFunctionPrototype,
+        configurable: !0
+      }), defineProperty(GeneratorFunctionPrototype, "constructor", {
+        value: GeneratorFunction,
+        configurable: !0
+      }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, toStringTagSymbol, "GeneratorFunction"), exports.isGeneratorFunction = function (genFun) {
         var ctor = "function" == typeof genFun && genFun.constructor;
         return !!ctor && (ctor === GeneratorFunction || "GeneratorFunction" === (ctor.displayName || ctor.name));
       }, exports.mark = function (genFun) {
@@ -28257,8 +29827,9 @@
         return this;
       }), define(Gp, "toString", function () {
         return "[object Generator]";
-      }), exports.keys = function (object) {
-        var keys = [];
+      }), exports.keys = function (val) {
+        var object = Object(val),
+          keys = [];
         for (var key in object) keys.push(key);
         return keys.reverse(), function next() {
           for (; keys.length;) {
@@ -28357,6 +29928,17 @@
         return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
       }, _typeof(obj);
     }
+    function _using(stack, value, isAwait) {
+      if (null == value) return value;
+      if ("object" != typeof value) throw new TypeError("using declarations can only be used with objects, null, or undefined.");
+      if (isAwait) var dispose = value[Symbol.asyncDispose || Symbol.for("Symbol.asyncDispose")];
+      if (null == dispose && (dispose = value[Symbol.dispose || Symbol.for("Symbol.dispose")]), "function" != typeof dispose) throw new TypeError("Property [Symbol.dispose] is not a function.");
+      return stack.push({
+        v: value,
+        d: dispose,
+        a: isAwait
+      }), value;
+    }
     function _wrapRegExp() {
       _wrapRegExp = function (re, groups) {
         return new BabelRegExp(re, void 0, groups);
@@ -28380,12 +29962,18 @@
       }
       return _inherits(BabelRegExp, RegExp), BabelRegExp.prototype.exec = function (str) {
         var result = _super.exec.call(this, str);
-        return result && (result.groups = buildGroups(result, this)), result;
+        if (result) {
+          result.groups = buildGroups(result, this);
+          var indices = result.indices;
+          indices && (indices.groups = buildGroups(indices, this));
+        }
+        return result;
       }, BabelRegExp.prototype[Symbol.replace] = function (str, substitution) {
         if ("string" == typeof substitution) {
           var groups = _groups.get(this);
           return _super[Symbol.replace].call(this, str, substitution.replace(/\$<([^>]+)>/g, function (_, name) {
-            return "$" + groups[name];
+            var group = groups[name];
+            return "$" + (Array.isArray(group) ? group.join("$") : group);
           }));
         }
         if ("function" == typeof substitution) {
@@ -28447,7 +30035,7 @@
         descriptor.enumerable = descriptor.enumerable || false;
         descriptor.configurable = true;
         if ("value" in descriptor) descriptor.writable = true;
-        Object.defineProperty(target, descriptor.key, descriptor);
+        Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
       }
     }
     function _createClass(Constructor, protoProps, staticProps) {
@@ -28489,6 +30077,7 @@
       return obj;
     }
     function _defineProperty(obj, key, value) {
+      key = _toPropertyKey(key);
       if (key in obj) {
         Object.defineProperty(obj, key, {
           value: value,
@@ -28790,7 +30379,7 @@
     function _set(target, property, value, receiver, isStrict) {
       var s = set(target, property, value, receiver || target);
       if (!s && isStrict) {
-        throw new Error('failed to set property');
+        throw new TypeError('failed to set property');
       }
       return value;
     }
@@ -28818,7 +30407,7 @@
       throw new TypeError("\"" + name + "\" is write-only");
     }
     function _classNameTDZError(name) {
-      throw new Error("Class \"" + name + "\" cannot be referenced in computed property keys.");
+      throw new ReferenceError("Class \"" + name + "\" cannot be referenced in computed property keys.");
     }
     function _temporalUndefined() {}
     function _tdz(name) {
@@ -28855,40 +30444,6 @@
     function _iterableToArray(iter) {
       if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
     }
-    function _iterableToArrayLimit(arr, i) {
-      var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-      if (_i == null) return;
-      var _arr = [];
-      var _n = true;
-      var _d = false;
-      var _s, _e;
-      try {
-        for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
-          _arr.push(_s.value);
-          if (i && _arr.length === i) break;
-        }
-      } catch (err) {
-        _d = true;
-        _e = err;
-      } finally {
-        try {
-          if (!_n && _i["return"] != null) _i["return"]();
-        } finally {
-          if (_d) throw _e;
-        }
-      }
-      return _arr;
-    }
-    function _iterableToArrayLimitLoose(arr, i) {
-      var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]);
-      if (_i == null) return;
-      var _arr = [];
-      for (_i = _i.call(arr), _step; !(_step = _i.next()).done;) {
-        _arr.push(_step.value);
-        if (i && _arr.length === i) break;
-      }
-      return _arr;
-    }
     function _unsupportedIterableToArray(o, minLen) {
       if (!o) return;
       if (typeof o === "string") return _arrayLikeToArray(o, minLen);
@@ -28999,7 +30554,7 @@
       return typeof key === "symbol" ? key : String(key);
     }
     function _initializerWarningHelper(descriptor, context) {
-      throw new Error('Decorating class property failed. Please ensure that ' + 'proposal-class-properties is enabled and runs after the decorators transform.');
+      throw new Error('Decorating class property failed. Please ensure that ' + 'transform-class-properties is enabled and runs after the decorators transform.');
     }
     function _initializerDefineProperty(target, property, descriptor, context) {
       if (!descriptor) return;
@@ -31084,13 +32639,13 @@
       const init = () => {
         if (!swiper.params.observer) return;
         if (swiper.params.observeParents) {
-          const containerParents = elementParents(swiper.el);
+          const containerParents = elementParents(swiper.hostEl);
           for (let i = 0; i < containerParents.length; i += 1) {
             attach(containerParents[i]);
           }
         }
         // Observe container
-        attach(swiper.el, {
+        attach(swiper.hostEl, {
           childList: swiper.params.observeSlideChildren
         });
 
@@ -31754,7 +33309,10 @@
       const slideSelector = () => swiper.isElement ? `swiper-slide` : `.${swiper.params.slideClass}`;
       const slideEl = imageEl.closest(slideSelector());
       if (slideEl) {
-        const lazyEl = slideEl.querySelector(`.${swiper.params.lazyPreloaderClass}`);
+        let lazyEl = slideEl.querySelector(`.${swiper.params.lazyPreloaderClass}`);
+        if (!lazyEl && swiper.isElement) {
+          lazyEl = slideEl.shadowRoot.querySelector(`.${swiper.params.lazyPreloaderClass}`);
+        }
         if (lazyEl) lazyEl.remove();
       }
     };
@@ -32101,6 +33659,7 @@
       const swiper = this;
       if (!swiper.params.cssMode) {
         swiper.wrapperEl.style.transitionDuration = `${duration}ms`;
+        swiper.wrapperEl.style.transitionDelay = duration === 0 ? `0ms` : '';
       }
       swiper.emit('setTransition', duration, byController);
     }
@@ -32662,11 +34221,13 @@
               swiper.slideTo(activeIndex + slidesPrepended, 0, false, true);
               if (setTranslate) {
                 swiper.touches[swiper.isHorizontal() ? 'startX' : 'startY'] += diff;
+                swiper.touchEventsData.currentTranslate = swiper.translate;
               }
             }
           } else {
             if (setTranslate) {
               swiper.slideToLoop(slideRealIndex, 0, false, true);
+              swiper.touchEventsData.currentTranslate = swiper.translate;
             }
           }
         } else if (appendSlidesIndexes.length > 0 && isNext) {
@@ -32680,6 +34241,7 @@
               swiper.slideTo(activeIndex - slidesAppended, 0, false, true);
               if (setTranslate) {
                 swiper.touches[swiper.isHorizontal() ? 'startX' : 'startY'] += diff;
+                swiper.touchEventsData.currentTranslate = swiper.translate;
               }
             }
           } else {
@@ -32692,7 +34254,6 @@
       if (swiper.controller && swiper.controller.control && !byController) {
         const loopParams = {
           slideRealIndex,
-          slideTo: false,
           direction,
           setTranslate,
           activeSlideIndex,
@@ -32700,10 +34261,16 @@
         };
         if (Array.isArray(swiper.controller.control)) {
           swiper.controller.control.forEach(c => {
-            if (!c.destroyed && c.params.loop) c.loopFix(loopParams);
+            if (!c.destroyed && c.params.loop) c.loopFix({
+              ...loopParams,
+              slideTo: c.params.slidesPerView === params.slidesPerView ? slideTo : false
+            });
           });
         } else if (swiper.controller.control instanceof swiper.constructor && swiper.controller.control.params.loop) {
-          swiper.controller.control.loopFix(loopParams);
+          swiper.controller.control.loopFix({
+            ...loopParams,
+            slideTo: swiper.controller.control.params.slidesPerView === params.slidesPerView ? slideTo : false
+          });
         }
       }
       swiper.emit('loopFix');
@@ -33128,8 +34695,8 @@
       if (pointerIndex >= 0) {
         data.evCache.splice(pointerIndex, 1);
       }
-      if (['pointercancel', 'pointerout', 'pointerleave'].includes(event.type)) {
-        const proceed = event.type === 'pointercancel' && (swiper.browser.isSafari || swiper.browser.isWebView);
+      if (['pointercancel', 'pointerout', 'pointerleave', 'contextmenu'].includes(event.type)) {
+        const proceed = ['pointercancel', 'contextmenu'].includes(event.type) && (swiper.browser.isSafari || swiper.browser.isWebView);
         if (!proceed) {
           return;
         }
@@ -33405,6 +34972,9 @@
       document[domMethod]('pointerleave', swiper.onTouchEnd, {
         passive: true
       });
+      document[domMethod]('contextmenu', swiper.onTouchEnd, {
+        passive: true
+      });
 
       // Prevent Links Clicks
       if (params.preventClicks || params.preventClicksPropagation) {
@@ -34223,7 +35793,7 @@
           return false;
         }
         el.swiper = swiper;
-        if (el.parentNode && el.parentNode.host) {
+        if (el.parentNode && el.parentNode.host && el.parentNode.host.nodeName === 'SWIPER-CONTAINER') {
           swiper.isElement = true;
         }
         const getWrapperSelector = () => {
@@ -34249,7 +35819,7 @@
         Object.assign(swiper, {
           el,
           wrapperEl,
-          slidesEl: swiper.isElement ? el.parentNode.host : wrapperEl,
+          slidesEl: swiper.isElement && !el.parentNode.host.slideSlots ? el.parentNode.host : wrapperEl,
           hostEl: swiper.isElement ? el.parentNode.host : el,
           mounted: true,
           // RTL
@@ -34302,7 +35872,11 @@
 
         // Attach events
         swiper.attachEvents();
-        [...swiper.el.querySelectorAll('[loading="lazy"]')].forEach(imageEl => {
+        const lazyElements = [...swiper.el.querySelectorAll('[loading="lazy"]')];
+        if (swiper.isElement) {
+          lazyElements.push(...swiper.hostEl.querySelectorAll('[loading="lazy"]'));
+        }
+        lazyElements.forEach(imageEl => {
           if (imageEl.complete) {
             processLazyPreloader(swiper, imageEl);
           } else {
@@ -35182,7 +36756,9 @@
             // Stop autoplay
             if (swiper.params.autoplay && swiper.params.autoplayDisableOnInteraction) swiper.autoplay.stop();
             // Return page scroll on edge positions
-            if (position === swiper.minTranslate() || position === swiper.maxTranslate()) return true;
+            if (params.releaseOnEdges && (position === swiper.minTranslate() || position === swiper.maxTranslate())) {
+              return true;
+            }
           }
         }
         if (e.preventDefault) e.preventDefault();else e.returnValue = false;
@@ -35275,10 +36851,7 @@
         nextEl: null,
         prevEl: null
       };
-      const makeElementsArray = el => {
-        if (!Array.isArray(el)) el = [el].filter(e => !!e);
-        return el;
-      };
+      const makeElementsArray = el => (Array.isArray(el) ? el : [el]).filter(e => !!e);
       function getEl(el) {
         let res;
         if (el && typeof el === 'string' && swiper.isElement) {
@@ -35494,10 +37067,7 @@
       };
       let bulletSize;
       let dynamicBulletIndex = 0;
-      const makeElementsArray = el => {
-        if (!Array.isArray(el)) el = [el].filter(e => !!e);
-        return el;
-      };
+      const makeElementsArray = el => (Array.isArray(el) ? el : [el]).filter(e => !!e);
       function isPaginationDisabled() {
         return !swiper.params.pagination.el || !swiper.pagination.el || Array.isArray(swiper.pagination.el) && swiper.pagination.el.length === 0;
       }
@@ -35524,14 +37094,20 @@
         const index = elementIndex(bulletEl) * swiper.params.slidesPerGroup;
         if (swiper.params.loop) {
           if (swiper.realIndex === index) return;
+          const realIndex = swiper.realIndex;
           const newSlideIndex = swiper.getSlideIndexByData(index);
           const currentSlideIndex = swiper.getSlideIndexByData(swiper.realIndex);
           if (newSlideIndex > swiper.slides.length - swiper.loopedSlides) {
+            const indexBeforeLoopFix = swiper.activeIndex;
             swiper.loopFix({
               direction: newSlideIndex > currentSlideIndex ? 'next' : 'prev',
               activeSlideIndex: newSlideIndex,
               slideTo: false
             });
+            const indexAfterFix = swiper.activeIndex;
+            if (indexBeforeLoopFix === indexAfterFix) {
+              swiper.slideToLoop(realIndex, 0, false, true);
+            }
           }
           swiper.slideToLoop(index);
         } else {
@@ -35762,7 +37338,7 @@
         el = makeElementsArray(el);
         el.forEach(subEl => {
           if (params.type === 'bullets' && params.clickable) {
-            subEl.classList.add(params.clickableClass);
+            subEl.classList.add(...(params.clickableClass || '').split(' '));
           }
           subEl.classList.add(params.modifierClass + params.type);
           subEl.classList.add(swiper.isHorizontal() ? params.horizontalClass : params.verticalClass);
@@ -35795,6 +37371,7 @@
             subEl.classList.remove(params.modifierClass + params.type);
             subEl.classList.remove(swiper.isHorizontal() ? params.horizontalClass : params.verticalClass);
             if (params.clickable) {
+              subEl.classList.remove(...(params.clickableClass || '').split(' '));
               subEl.removeEventListener('click', onBulletClick);
             }
           });
@@ -36256,6 +37833,7 @@
           enabled: false
         }
       });
+      const elementsSelector = '[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y], [data-swiper-parallax-opacity], [data-swiper-parallax-scale]';
       const setTransform = (el, progress) => {
         const {
           rtl
@@ -36307,9 +37885,14 @@
           el,
           slides,
           progress,
-          snapGrid
+          snapGrid,
+          isElement
         } = swiper;
-        elementChildren(el, '[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y], [data-swiper-parallax-opacity], [data-swiper-parallax-scale]').forEach(subEl => {
+        const elements = elementChildren(el, elementsSelector);
+        if (swiper.isElement) {
+          elements.push(...elementChildren(swiper.hostEl, elementsSelector));
+        }
+        elements.forEach(subEl => {
           setTransform(subEl, progress);
         });
         slides.forEach((slideEl, slideIndex) => {
@@ -36318,7 +37901,7 @@
             slideProgress += Math.ceil(slideIndex / 2) - progress * (snapGrid.length - 1);
           }
           slideProgress = Math.min(Math.max(slideProgress, -1), 1);
-          slideEl.querySelectorAll('[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y], [data-swiper-parallax-opacity], [data-swiper-parallax-scale], [data-swiper-parallax-rotate]').forEach(subEl => {
+          slideEl.querySelectorAll(`${elementsSelector}, [data-swiper-parallax-rotate]`).forEach(subEl => {
             setTransform(subEl, slideProgress);
           });
         });
@@ -36328,9 +37911,14 @@
           duration = swiper.params.speed;
         }
         const {
-          el
+          el,
+          hostEl
         } = swiper;
-        el.querySelectorAll('[data-swiper-parallax], [data-swiper-parallax-x], [data-swiper-parallax-y], [data-swiper-parallax-opacity], [data-swiper-parallax-scale]').forEach(parallaxEl => {
+        const elements = [...el.querySelectorAll(elementsSelector)];
+        if (swiper.isElement) {
+          elements.push(...hostEl.querySelectorAll(elementsSelector));
+        }
+        elements.forEach(parallaxEl => {
           let parallaxDuration = parseInt(parallaxEl.getAttribute('data-swiper-parallax-duration'), 10) || duration;
           if (duration === 0) parallaxDuration = 0;
           parallaxEl.style.transitionDuration = `${parallaxDuration}ms`;
@@ -36457,7 +38045,7 @@
       function eventWithinZoomContainer(e) {
         const selector = `.${swiper.params.zoom.containerClass}`;
         if (e.target.matches(selector)) return true;
-        if ([...swiper.el.querySelectorAll(selector)].filter(containerEl => containerEl.contains(e.target)).length > 0) return true;
+        if ([...swiper.hostEl.querySelectorAll(selector)].filter(containerEl => containerEl.contains(e.target)).length > 0) return true;
         return false;
       }
 
@@ -37159,10 +38747,7 @@
         notification.innerHTML = '';
         notification.innerHTML = message;
       }
-      const makeElementsArray = el => {
-        if (!Array.isArray(el)) el = [el].filter(e => !!e);
-        return el;
-      };
+      const makeElementsArray = el => (Array.isArray(el) ? el : [el]).filter(e => !!e);
       function getRandomNumber(size) {
         if (size === void 0) {
           size = 16;
@@ -37887,6 +39472,7 @@
       const onPointerEnter = e => {
         if (e.pointerType !== 'mouse') return;
         pausedByInteraction = true;
+        if (swiper.animating || swiper.autoplay.paused) return;
         pause(true);
       };
       const onPointerLeave = e => {
@@ -39500,7 +41086,7 @@
     }
 
     /**
-     * Swiper 10.0.3
+     * Swiper 10.2.0
      * Most modern mobile touch slider and framework with hardware accelerated transitions
      * https://swiperjs.com
      *
@@ -39508,9 +41094,10 @@
      *
      * Released under the MIT License
      *
-     * Released on: July 3, 2023
+     * Released on: August 17, 2023
      */
 
+
     // Swiper Class
     const modules = [Virtual, Keyboard, Mousewheel, Navigation, Pagination, Scrollbar, Parallax, Zoom, Controller, A11y, History, HashNavigation, Autoplay, Thumb, freeMode, Grid, Manipulation, EffectFade, EffectCube, EffectFlip, EffectCoverflow, EffectCreative, EffectCards];
     Swiper$1.use(modules);
@@ -39685,6 +41272,7 @@
         if (swiper.isElement && (!paginationEl || typeof paginationEl === 'string')) {
           paginationEl = document.createElement('div');
           paginationEl.classList.add('swiper-pagination');
+          paginationEl.part.add('pagination');
           swiper.el.appendChild(paginationEl);
         }
         if (paginationEl) currentParams.pagination.el = paginationEl;
@@ -39696,6 +41284,7 @@
         if (swiper.isElement && (!scrollbarEl || typeof scrollbarEl === 'string')) {
           scrollbarEl = document.createElement('div');
           scrollbarEl.classList.add('swiper-scrollbar');
+          scrollbarEl.part.add('scrollbar');
           swiper.el.appendChild(scrollbarEl);
         }
         if (scrollbarEl) currentParams.scrollbar.el = scrollbarEl;
@@ -39708,13 +41297,15 @@
           if (!nextEl || typeof nextEl === 'string') {
             nextEl = document.createElement('div');
             nextEl.classList.add('swiper-button-next');
-            nextEl.innerHTML = swiper.hostEl.nextButtonSvg;
+            nextEl.innerHTML = swiper.hostEl.constructor.nextButtonSvg;
+            nextEl.part.add('button-next');
             swiper.el.appendChild(nextEl);
           }
           if (!prevEl || typeof prevEl === 'string') {
             prevEl = document.createElement('div');
             prevEl.classList.add('swiper-button-prev');
-            nextEl.innerHTML = swiper.hostEl.prevButtonSvg;
+            prevEl.innerHTML = swiper.hostEl.constructor.prevButtonSvg;
+            prevEl.part.add('button-prev');
             swiper.el.appendChild(prevEl);
           }
         }
@@ -39842,7 +41433,7 @@
     }
 
     /**
-     * Swiper Custom Element 10.0.3
+     * Swiper Custom Element 10.2.0
      * Most modern mobile touch slider and framework with hardware accelerated transitions
      * https://swiperjs.com
      *
@@ -39850,19 +41441,20 @@
      *
      * Released under the MIT License
      *
-     * Released on: July 3, 2023
+     * Released on: August 17, 2023
      */
 
+
     /* eslint-disable spaced-comment */
 
-    const SwiperCSS = `:host{--swiper-theme-color:#007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{width:100%;height:100%;margin-left:auto;margin-right:auto;position:relative;overflow:hidden;overflow:clip;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);box-sizing:content-box}.swiper-android ::slotted(swiper-slide),.swiper-ios ::slotted(swiper-slide),.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}::slotted(swiper-slide){flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}::slotted(.swiper-slide-invisible-blank){visibility:hidden}.swiper-autoheight,.swiper-autoheight ::slotted(swiper-slide){height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden ::slotted(swiper-slide){transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d ::slotted(swiper-slide){transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode ::slotted(swiper-slide){scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode ::slotted(swiper-slide){scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered ::slotted(swiper-slide){scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal ::slotted(swiper-slide):first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical ::slotted(swiper-slide):first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-virtual ::slotted(swiper-slide){-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:host{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next svg,.swiper-button-prev svg{width:100%;height:100%;object-fit:contain;transform-origin:center}.swiper-rtl .swiper-button-next svg,.swiper-rtl .swiper-button-prev svg{transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);top:var(--swiper-pagination-top,auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius,50%);background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:var(--swiper-pagination-right,8px);left:var(--swiper-pagination-left,auto);top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size,4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;-ms-touch-action:none;background:var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1))}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:var(--swiper-scrollbar-sides-offset,1%);bottom:var(--swiper-scrollbar-bottom,4px);top:var(--swiper-scrollbar-top,auto);z-index:50;height:var(--swiper-scrollbar-size,4px);width:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;left:var(--swiper-scrollbar-left,auto);right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);z-index:50;width:var(--swiper-scrollbar-size,4px);height:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5));border-radius:var(--swiper-scrollbar-border-radius,10px);left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}::slotted(.swiper-slide-zoomed){cursor:move;touch-action:none}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode ::slotted(swiper-slide){transition-timing-function:ease-out}.swiper-fade ::slotted(swiper-slide){pointer-events:none;transition-property:opacity}.swiper-fade ::slotted(swiper-slide) ::slotted(swiper-slide){pointer-events:none}.swiper-fade ::slotted(.swiper-slide-active),.swiper-fade ::slotted(.swiper-slide-active) ::slotted(.swiper-slide-active){pointer-events:auto}.swiper-cube{overflow:visible}.swiper-cube ::slotted(swiper-slide){pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube ::slotted(swiper-slide) ::slotted(swiper-slide){pointer-events:none}.swiper-cube.swiper-rtl ::slotted(swiper-slide){transform-origin:100% 0}.swiper-cube ::slotted(.swiper-slide-active),.swiper-cube ::slotted(.swiper-slide-active) ::slotted(.swiper-slide-active){pointer-events:auto}.swiper-cube ::slotted(.swiper-slide-active),.swiper-cube ::slotted(.swiper-slide-next),.swiper-cube ::slotted(.swiper-slide-prev){pointer-events:auto;visibility:visible}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-cube ::slotted(.swiper-slide-next)+::slotted(swiper-slide){pointer-events:auto;visibility:visible}.swiper-flip{overflow:visible}.swiper-flip ::slotted(swiper-slide){pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip ::slotted(swiper-slide) ::slotted(swiper-slide){pointer-events:none}.swiper-flip ::slotted(.swiper-slide-active),.swiper-flip ::slotted(.swiper-slide-active) ::slotted(.swiper-slide-active){pointer-events:auto}.swiper-creative ::slotted(swiper-slide){-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards ::slotted(swiper-slide){transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}`;
-    const SwiperSlideCSS = `::slotted(.swiper-slide-shadow),::slotted(.swiper-slide-shadow-bottom),::slotted(.swiper-slide-shadow-left),::slotted(.swiper-slide-shadow-right),::slotted(.swiper-slide-shadow-top){position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}::slotted(.swiper-slide-shadow){background:rgba(0,0,0,.15)}::slotted(.swiper-slide-shadow-left){background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}::slotted(.swiper-slide-shadow-right){background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}::slotted(.swiper-slide-shadow-top){background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}::slotted(.swiper-slide-shadow-bottom){background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}::slotted(.swiper-lazy-preloader){animation:swiper-preloader-spin 1s infinite linear;width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}::slotted(.swiper-slide-shadow-cube.swiper-slide-shadow-bottom),::slotted(.swiper-slide-shadow-cube.swiper-slide-shadow-left),::slotted(.swiper-slide-shadow-cube.swiper-slide-shadow-right),::slotted(.swiper-slide-shadow-cube.swiper-slide-shadow-top){z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}::slotted(.swiper-slide-shadow-flip.swiper-slide-shadow-bottom),::slotted(.swiper-slide-shadow-flip.swiper-slide-shadow-left),::slotted(.swiper-slide-shadow-flip.swiper-slide-shadow-right),::slotted(.swiper-slide-shadow-flip.swiper-slide-shadow-top){z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}`;
+    const SwiperCSS = `:host{--swiper-theme-color:#007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{width:100%;height:100%;margin-left:auto;margin-right:auto;position:relative;overflow:hidden;overflow:clip;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);box-sizing:content-box}.swiper-android ::slotted(swiper-slide),.swiper-ios ::slotted(swiper-slide),.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}::slotted(swiper-slide){flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}::slotted(.swiper-slide-invisible-blank){visibility:hidden}.swiper-autoheight,.swiper-autoheight ::slotted(swiper-slide){height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden ::slotted(swiper-slide){transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d ::slotted(swiper-slide){transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode ::slotted(swiper-slide){scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode ::slotted(swiper-slide){scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered ::slotted(swiper-slide){scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal ::slotted(swiper-slide):first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical ::slotted(swiper-slide):first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-virtual ::slotted(swiper-slide){-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:host{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next svg,.swiper-button-prev svg{width:100%;height:100%;object-fit:contain;transform-origin:center}.swiper-rtl .swiper-button-next svg,.swiper-rtl .swiper-button-prev svg{transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);top:var(--swiper-pagination-top,auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius,50%);background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:var(--swiper-pagination-right,8px);left:var(--swiper-pagination-left,auto);top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size,4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;-ms-touch-action:none;background:var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1))}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:var(--swiper-scrollbar-sides-offset,1%);bottom:var(--swiper-scrollbar-bottom,4px);top:var(--swiper-scrollbar-top,auto);z-index:50;height:var(--swiper-scrollbar-size,4px);width:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;left:var(--swiper-scrollbar-left,auto);right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);z-index:50;width:var(--swiper-scrollbar-size,4px);height:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5));border-radius:var(--swiper-scrollbar-border-radius,10px);left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}::slotted(.swiper-slide-zoomed){cursor:move;touch-action:none}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode ::slotted(swiper-slide){transition-timing-function:ease-out}.swiper-fade ::slotted(swiper-slide){pointer-events:none;transition-property:opacity}.swiper-fade ::slotted(swiper-slide) ::slotted(swiper-slide){pointer-events:none}.swiper-fade ::slotted(.swiper-slide-active){pointer-events:auto}.swiper-fade ::slotted(.swiper-slide-active) ::slotted(.swiper-slide-active){pointer-events:auto}.swiper-cube{overflow:visible}.swiper-cube ::slotted(swiper-slide){pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube ::slotted(swiper-slide) ::slotted(swiper-slide){pointer-events:none}.swiper-cube.swiper-rtl ::slotted(swiper-slide){transform-origin:100% 0}.swiper-cube ::slotted(.swiper-slide-active),.swiper-cube ::slotted(.swiper-slide-active) ::slotted(.swiper-slide-active){pointer-events:auto}.swiper-cube ::slotted(.swiper-slide-active),.swiper-cube ::slotted(.swiper-slide-next),.swiper-cube ::slotted(.swiper-slide-prev){pointer-events:auto;visibility:visible}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-cube ::slotted(.swiper-slide-next)+::slotted(swiper-slide){pointer-events:auto;visibility:visible}.swiper-flip{overflow:visible}.swiper-flip ::slotted(swiper-slide){pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip ::slotted(swiper-slide) ::slotted(swiper-slide){pointer-events:none}.swiper-flip ::slotted(.swiper-slide-active),.swiper-flip ::slotted(.swiper-slide-active) ::slotted(.swiper-slide-active){pointer-events:auto}.swiper-creative ::slotted(swiper-slide){-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards ::slotted(swiper-slide){transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}`;
+    const SwiperSlideCSS = `::slotted(.swiper-slide-shadow),::slotted(.swiper-slide-shadow-bottom),::slotted(.swiper-slide-shadow-left),::slotted(.swiper-slide-shadow-right),::slotted(.swiper-slide-shadow-top){position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}::slotted(.swiper-slide-shadow){background:rgba(0,0,0,.15)}::slotted(.swiper-slide-shadow-left){background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}::slotted(.swiper-slide-shadow-right){background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}::slotted(.swiper-slide-shadow-top){background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}::slotted(.swiper-slide-shadow-bottom){background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear;width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}::slotted(.swiper-slide-shadow-cube.swiper-slide-shadow-bottom),::slotted(.swiper-slide-shadow-cube.swiper-slide-shadow-left),::slotted(.swiper-slide-shadow-cube.swiper-slide-shadow-right),::slotted(.swiper-slide-shadow-cube.swiper-slide-shadow-top){z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}::slotted(.swiper-slide-shadow-flip.swiper-slide-shadow-bottom),::slotted(.swiper-slide-shadow-flip.swiper-slide-shadow-left),::slotted(.swiper-slide-shadow-flip.swiper-slide-shadow-right),::slotted(.swiper-slide-shadow-flip.swiper-slide-shadow-top){z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}::slotted(.swiper-zoom-container){width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}::slotted(.swiper-zoom-container)>canvas,::slotted(.swiper-zoom-container)>img,::slotted(.swiper-zoom-container)>svg{max-width:100%;max-height:100%;object-fit:contain}`;
     class DummyHTMLElement {}
     const ClassToExtend = typeof window === 'undefined' || typeof HTMLElement === 'undefined' ? DummyHTMLElement : HTMLElement;
     const arrowSvg = `<svg width="11" height="20" viewBox="0 0 11 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.38296 20.0762C0.111788 19.805 0.111788 19.3654 0.38296 19.0942L9.19758 10.2796L0.38296 1.46497C0.111788 1.19379 0.111788 0.754138 0.38296 0.482966C0.654131 0.211794 1.09379 0.211794 1.36496 0.482966L10.4341 9.55214C10.8359 9.9539 10.8359 10.6053 10.4341 11.007L1.36496 20.0762C1.09379 20.3474 0.654131 20.3474 0.38296 20.0762Z" fill="currentColor"/></svg>
     `;
     const addStyle = (shadowRoot, styles) => {
-      if (typeof CSSStyleSheet !== 'undefined' && !shadowRoot.adoptedStyleSheets) {
+      if (typeof CSSStyleSheet !== 'undefined' && shadowRoot.adoptedStyleSheets) {
         const styleSheet = new CSSStyleSheet();
         styleSheet.replaceSync(styles);
         shadowRoot.adoptedStyleSheets = [styleSheet];
@@ -39894,11 +41486,41 @@
       cssLinks() {
         return this.injectStylesUrls || [];
       }
+      calcSlideSlots() {
+        const currentSideSlots = this.slideSlots || 0;
+        // slide slots
+        const slideSlotChildren = [...this.querySelectorAll(`[slot^=slide-]`)].map(child => {
+          return parseInt(child.getAttribute('slot').split('slide-')[1], 10);
+        });
+        this.slideSlots = slideSlotChildren.length ? Math.max(...slideSlotChildren) + 1 : 0;
+        if (!this.rendered) return;
+        if (this.slideSlots > currentSideSlots) {
+          for (let i = currentSideSlots; i < this.slideSlots; i += 1) {
+            const slideEl = document.createElement('swiper-slide');
+            slideEl.setAttribute('part', `slide slide-${i + 1}`);
+            const slotEl = document.createElement('slot');
+            slotEl.setAttribute('name', `slide-${i + 1}`);
+            slideEl.appendChild(slotEl);
+            this.shadowRoot.querySelector('.swiper-wrapper').appendChild(slideEl);
+          }
+        } else if (this.slideSlots < currentSideSlots) {
+          const slides = this.swiper.slides;
+          for (let i = slides.length - 1; i >= 0; i -= 1) {
+            if (i > this.slideSlots) {
+              slides[i].remove();
+            }
+          }
+        }
+      }
       render() {
         if (this.rendered) return;
+        this.calcSlideSlots();
 
         // local styles
-        const localStyles = this.cssStyles();
+        let localStyles = this.cssStyles();
+        if (this.slideSlots > 0) {
+          localStyles = localStyles.replace(/::slotted\(([a-z-0-9.]*)\)/g, '$1');
+        }
         if (localStyles.length) {
           addStyle(this.shadowRoot, localStyles);
         }
@@ -39914,11 +41536,19 @@
         const el = document.createElement('div');
         el.classList.add('swiper');
         el.part = 'container';
+
         // prettier-ignore
         el.innerHTML = `
       <slot name="container-start"></slot>
       <div class="swiper-wrapper" part="wrapper">
         <slot></slot>
+        ${Array.from({
+      length: this.slideSlots
+    }).map((_, index) => `
+        <swiper-slide part="slide slide-${index}">
+          <slot name="slide-${index}"></slot>
+        </swiper-slide>
+        `).join('')}
       </div>
       <slot name="container-end"></slot>
       ${needsNavigation(this.passedParams) ? `
@@ -39947,14 +41577,19 @@
         this.passedParams = passedParams;
         delete this.swiperParams.init;
         this.render();
+
         // eslint-disable-next-line
         this.swiper = new Swiper$1(this.shadowRoot.querySelector('.swiper'), {
-          ...swiperParams,
-          touchEventsTarget: 'container',
           ...(swiperParams.virtual ? {} : {
-            observer: true
+            observer: true,
+            observeSlideChildren: this.slideSlots > 0
           }),
+          ...swiperParams,
+          touchEventsTarget: 'container',
           onAny: function (name) {
+            if (name === 'observerUpdate') {
+              _this.calcSlideSlots();
+            }
             const eventName = swiperParams.eventsPrefix ? `${swiperParams.eventsPrefix}${name.toLowerCase()}` : name.toLowerCase();
             for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
               args[_key - 1] = arguments[_key];
@@ -40051,7 +41686,8 @@
         if (lazy) {
           const lazyDiv = document.createElement('div');
           lazyDiv.classList.add('swiper-lazy-preloader');
-          this.appendChild(lazyDiv);
+          lazyDiv.part.add('preloader');
+          this.shadowRoot.appendChild(lazyDiv);
         }
       }
       initialize() {