flowbite-svelte 0.38.1 → 0.38.3

package/dist/carousels/Caption.svelte

@@ -1,9 +1,10 @@
 <script>export let caption = '';
 export let captionClass = '';
+export let pClass = 'text-gray-900 dark:text-white';
 </script>
 
 <div class={captionClass}>
-  <p id="caption" class="text-gray-900 dark:text-white">{caption}</p>
+  <p id="caption" class={pClass}>{caption}</p>
 </div>
 
 <!--

package/dist/carousels/Caption.svelte.d.ts

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         caption?: string | undefined;
         captionClass?: string | undefined;
+        pClass?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/carousels/Caption.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Caption.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/carousels/Caption.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAcD,QAAA,MAAM,SAAS;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,oBAAoB,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CACnG"}
+{"version":3,"file":"Caption.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/carousels/Caption.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAeD,QAAA,MAAM,SAAS;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAClD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACpD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAElD;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,oBAAoB,CAAC,YAAY,EAAE,aAAa,EAAE,YAAY,CAAC;CACnG"}

package/dist/carousels/Carousel.svelte

@@ -1,7 +1,9 @@
-<script>import Slide from './Slide.svelte';
+<script>import { twMerge } from 'tailwind-merge';
+import Slide from './Slide.svelte';
 import Thumbnail from './Thumbnail.svelte';
 import Caption from './Caption.svelte';
 import Indicator from './Indicator.svelte';
+export let id = 'default-carousel';
 export let showIndicators = true;
 export let showCaptions = true;
 export let showThumbs = true;
@@ -9,13 +11,18 @@ export let images;
 export let slideControls = true;
 export let loop = false;
 export let duration = 2000;
+export let thumbClass = 'opacity-40';
 // Carousel
 export let divClass = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
+let divCls = twMerge(divClass, $$props.classDiv);
 export let indicatorDivClass = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';
+let indicatorDivCls = twMerge(indicatorDivClass, $$props.classIndicatorDiv);
 // Caption
 export let captionClass = 'h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2 my-2 text-center';
+let captionCls = twMerge(captionClass, $$props.classCaption);
 // Indicator
 export let indicatorClass = 'w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300 opacity-60';
+let indicatorCls = twMerge(indicatorClass, $$props.classIndicator);
 // Slide
 export let slideClass = '';
 let imageShowingIndex = 0;
@@ -44,19 +51,19 @@ if (loop) {
 }
 </script>
 
-<div id="default-carousel" class="relative">
-  <div class={divClass}>
+<div {id} class="relative">
+  <div class={divCls}>
     <Slide image={image.imgurl} altTag={image.name} attr={image.attribution} {slideClass} />
   </div>
   {#if showIndicators}
     <!-- Slider indicators -->
-    <div class={indicatorDivClass}>
+    <div class={indicatorDivCls}>
       {#each images as { id, imgurl, name, attribution }}
         <Indicator
           {name}
           selected={imageShowingIndex === id}
           on:click={() => goToSlide(id)}
-          {indicatorClass} />
+          indicatorClass={indicatorCls} />
       {/each}
     </div>
   {/if}
@@ -114,13 +121,14 @@ if (loop) {
 </div>
 
 {#if showCaptions}
-  <Caption caption={images[imageShowingIndex].name} {captionClass} />
+  <Caption caption={images[imageShowingIndex].name} captionClass={captionCls} />
 {/if}
 
 {#if showThumbs}
   <div class="flex flex-row justify-center bg-gray-100">
     {#each images as { id, imgurl, name, attribution }}
       <Thumbnail
+        {thumbClass}
         thumbImg={imgurl}
         altTag={name}
         titleLink={attribution}
@@ -155,7 +163,7 @@ if (loop) {
   @prop slideControls: boolean = true;
   @prop loop: boolean = false;
   @prop duration: number = 2000;
-
+  @prop thumbClass: string = 'opacity-40';
   ### Carousel
   @prop divClass: string = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
   @prop indicatorDivClass: string = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';

package/dist/carousels/Carousel.svelte.d.ts

@@ -1,6 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
+        id?: string | undefined;
         showIndicators?: boolean | undefined;
         showCaptions?: boolean | undefined;
         showThumbs?: boolean | undefined;
@@ -8,6 +10,7 @@ declare const __propDef: {
         slideControls?: boolean | undefined;
         loop?: boolean | undefined;
         duration?: number | undefined;
+        thumbClass?: string | undefined;
         divClass?: string | undefined;
         indicatorDivClass?: string | undefined;
         captionClass?: string | undefined;
@@ -48,7 +51,7 @@ export type CarouselSlots = typeof __propDef.slots;
  * @prop slideControls: boolean = true;
  * @prop loop: boolean = false;
  * @prop duration: number = 2000;
- *
+ * @prop thumbClass: string = 'opacity-40';
  * ### Carousel
  * @prop divClass: string = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
  * @prop indicatorDivClass: string = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';

package/dist/carousels/Carousel.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/carousels/Carousel.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA+GD,QAAA,MAAM,SAAS;;;;;gBADiZ,GAAG,EAAE;;;;;;;;;;;;;;;;;CAC9W,CAAC;AACxD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}
+{"version":3,"file":"Carousel.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/carousels/Carousel.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAuHD,QAAA,MAAM,SAAS;;;;;;;gBADgc,GAAG,EAAE;;;;;;;;;;;;;;;;;;CACtY,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}

package/dist/carousels/CarouselTransition.svelte

@@ -1,4 +1,5 @@
-<script>import { fade, blur, fly, slide } from 'svelte/transition';
+<script>import { twMerge } from 'tailwind-merge';
+import { fade, blur, fly, slide } from 'svelte/transition';
 import Slide from './Slide.svelte';
 import Thumbnail from './Thumbnail.svelte';
 import Caption from './Caption.svelte';
@@ -12,13 +13,18 @@ export let transitionType = 'fade';
 export let transitionParams = {};
 export let loop = false;
 export let duration = 2000;
+export let thumbClass = 'opacity-40';
 // Carousel
 export let divClass = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
+let divCls = twMerge(divClass, $$props.classDiv);
 export let indicatorDivClass = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';
+let indicatorDivCls = twMerge(indicatorDivClass, $$props.classIndicatorDiv);
 // Caption
 export let captionClass = 'h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2 my-2 text-center';
+let captionCls = twMerge(captionClass, $$props.classCaption);
 // Indicator
 export let indicatorClass = 'w-3 h-3 rounded-full bg-gray-100 hover:bg-gray-300 opacity-60';
+let indicatorCls = twMerge(indicatorClass, $$props.classIndicator);
 // have a custom transition function that returns the desired transition
 const multiple = (node, params) => {
     switch (transitionType) {
@@ -61,7 +67,7 @@ if (loop) {
 </script>
 
 <div id="default-carousel" class="relative">
-  <div class={divClass}>
+  <div class={divCls}>
     {#each images as { id, imgurl, name, attribution }}
       {#if imageShowingIndex === id}
         <div transition:multiple={transitionParams}>
@@ -73,13 +79,13 @@ if (loop) {
 
   {#if showIndicators}
     <!-- Slider indicators -->
-    <div class={indicatorDivClass}>
+    <div class={indicatorDivCls}>
       {#each images as { id, imgurl, name, attribution }}
         <Indicator
           {name}
           selected={imageShowingIndex === id}
           on:click={() => goToSlide(id)}
-          {indicatorClass} />
+          indicatorClass={indicatorCls} />
       {/each}
     </div>
   {/if}
@@ -137,13 +143,14 @@ if (loop) {
 </div>
 
 {#if showCaptions}
-  <Caption caption={images[imageShowingIndex].name} {captionClass} />
+  <Caption caption={images[imageShowingIndex].name} captionClass={captionCls} />
 {/if}
 
 {#if showThumbs}
   <div class="flex flex-row justify-center bg-gray-100">
     {#each images as { id, imgurl, name, attribution }}
       <Thumbnail
+        {thumbClass}
         thumbImg={imgurl}
         altTag={name}
         titleLink={attribution}
@@ -180,6 +187,7 @@ if (loop) {
   @prop transitionParams: TransitionParamTypes = {};
   @prop loop: boolean = false;
   @prop duration: number = 2000;
+  @prop thumbClass: string = 'opacity-40';
   ### Carousel
   @prop divClass: string = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
   @prop indicatorDivClass: string = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';

package/dist/carousels/CarouselTransition.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 import type { TransitionTypes, TransitionParamTypes } from '../types';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         showIndicators?: boolean | undefined;
         showCaptions?: boolean | undefined;
         showThumbs?: boolean | undefined;
@@ -11,6 +12,7 @@ declare const __propDef: {
         transitionParams?: TransitionParamTypes | undefined;
         loop?: boolean | undefined;
         duration?: number | undefined;
+        thumbClass?: string | undefined;
         divClass?: string | undefined;
         indicatorDivClass?: string | undefined;
         captionClass?: string | undefined;
@@ -52,6 +54,7 @@ export type CarouselTransitionSlots = typeof __propDef.slots;
  * @prop transitionParams: TransitionParamTypes = {};
  * @prop loop: boolean = false;
  * @prop duration: number = 2000;
+ * @prop thumbClass: string = 'opacity-40';
  * ### Carousel
  * @prop divClass: string = 'overflow-hidden relative h-56 rounded-lg sm:h-64 xl:h-80 2xl:h-96';
  * @prop indicatorDivClass: string = 'flex absolute bottom-5 left-1/2 z-30 space-x-3 -translate-x-1/2';

package/dist/carousels/CarouselTransition.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselTransition.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/carousels/CarouselTransition.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAED,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AA0ItE,QAAA,MAAM,SAAS;;;;;gBAD8b,GAAG,EAAE;;;;;;;;;;;;;;;;;;CAC3Z,CAAC;AACxD,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC7D,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC/D,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,oBAAoB,CAAC,uBAAuB,EAAE,wBAAwB,EAAE,uBAAuB,CAAC;CAC/I"}
+{"version":3,"file":"CarouselTransition.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/carousels/CarouselTransition.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGD,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AA6ItE,QAAA,MAAM,SAAS;;;;;;gBADud,GAAG,EAAE;;;;;;;;;;;;;;;;;;;CAC7Z,CAAC;AAC/E,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC7D,MAAM,MAAM,wBAAwB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC/D,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,MAAM,CAAC,OAAO,OAAO,kBAAmB,SAAQ,oBAAoB,CAAC,uBAAuB,EAAE,wBAAwB,EAAE,uBAAuB,CAAC;CAC/I"}

package/dist/carousels/Thumbnail.svelte

@@ -4,12 +4,13 @@ export let titleLink = '';
 export let id;
 export let thumbWidth = 100;
 export let selected = false;
+export let thumbClass = '';
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <button on:click aria-label="Click to view image">
   <img
-    class="opacity-40"
+    class={thumbClass}
     class:active={selected}
     id={id.toString()}
     src={thumbImg}

package/dist/carousels/Thumbnail.svelte.d.ts

@@ -7,6 +7,7 @@ declare const __propDef: {
         id: number;
         thumbWidth?: number | undefined;
         selected?: boolean | undefined;
+        thumbClass?: string | undefined;
     };
     events: {
         click: MouseEvent;

package/dist/carousels/Thumbnail.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Thumbnail.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/carousels/Thumbnail.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAqBD,QAAA,MAAM,SAAS;;;;;YADqL,MAAM;;;;;;;;;;CACnJ,CAAC;AACxD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;;;;;;GAUG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}
+{"version":3,"file":"Thumbnail.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/carousels/Thumbnail.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAsBD,QAAA,MAAM,SAAS;;;;;YAD8M,MAAM;;;;;;;;;;;CAC5K,CAAC;AACxD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACpD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD;;;;;;;;;;GAUG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,cAAc,EAAE,eAAe,EAAE,cAAc,CAAC;CAC3G"}

package/dist/device-mockup/DeviceMockup.svelte

@@ -1,4 +1,5 @@
-<script>import DefaultMockup from './DefaultMockup.svelte';
+<script>import { twJoin, twMerge } from 'tailwind-merge';
+import DefaultMockup from './DefaultMockup.svelte';
 import Ios from './Ios.svelte';
 import Android from './Android.svelte';
 import Tablet from './Tablet.svelte';
@@ -53,42 +54,104 @@ export let tabletLeftTop = 'h-[32px] w-[3px] bg-gray-800 dark:bg-gray-800 absolu
 export let tabletLeftMid = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[124px] rounded-l-lg';
 export let tabletLeftBot = 'h-[46px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -left-[17px] top-[178px] rounded-l-lg';
 export let tabletRight = 'h-[64px] w-[3px] bg-gray-800 dark:bg-gray-800 absolute -right-[17px] top-[142px] rounded-r-lg';
+// android
+let androidDivCls = twMerge(androidDiv, $$props.classAndroidDiv);
+let androidSlotCls = twMerge(androidSlot, $$props.classAndroidSlot);
+let androidTopCls = twMerge(androidTop, $$props.classAndroidTop);
+let androidLeftTopCls = twMerge(androidLeftTop, $$props.classAndroidLeftTop);
+let androidLeftMidCls = twMerge(androidLeftMid, $$props.classAndroidLeftMid);
+let androidLeftBotCls = twMerge(androidLeftBot, $$props.classAndroidLeftBot);
+let androidRightCls = twMerge(androidRight, $$props.classAndroidRight);
+//default
+let defaultDivCls = twMerge(defaultDiv, $$props.classDefaultDiv);
+let defaultSlotCls = twMerge(defaultSlot, $$props.classDefaultSlot);
+let defaultTopCls = twMerge(defaultTop, $$props.classDefaultTop);
+let defaultLeftTopCls = twMerge(defaultLeftTop, $$props.classDefaultLeftTop);
+let defaultLeftBotCls = twMerge(defaultLeftBot, $$props.classDefaultLeftBot);
+let defaultRightCls = twMerge(defaultRight, $$props.classDefaultRight);
+// desktop
+let desktopInnerCls = twMerge(desktopInner, $$props.classDesktopInner);
+let desktopBotCls = twMerge(desktopBot, $$props.classDesktopBot);
+let desktopBotUnderCls = twMerge(desktopBotUnder, $$props.classDesktopBotUnder);
+let destopDivCls = twMerge(destopDiv, $$props.classDestopDiv);
+let desktopSlotCls = twMerge(desktopSlot, $$props.classDesktopSlot);
+// ios
+let iosDivCls = twMerge(iosDiv, $$props.classIosDiv);
+let iosSlotCls = twMerge(iosSlot, $$props.classIosSlot);
+let iosTopCls = twMerge(iosTop, $$props.classIosTop);
+let iosLeftTopCls = twMerge(iosLeftTop, $$props.classIosLeftTop);
+let iosLeftBotCls = twMerge(iosLeftBot, $$props.classIosLeftBot);
+let iosRightCls = twMerge(iosRight, $$props.classIosRight);
+// laptop
+let laptopDivCls = twMerge(laptopDiv, $$props.classLaptopDiv);
+let laptopSlotCls = twMerge(laptopSlot, $$props.classLaptopSlot);
+let laptopInnerCls = twMerge(laptopInner, $$props.classLaptopInner);
+let laptopBotCls = twMerge(laptopBot, $$props.classLaptopBot);
+let laptopBotCenCls = twMerge(laptopBotCen, $$props.classLaptopBotCen);
+// smartwatch
+let smartwatchDivCls = twMerge(smartwatchDiv, $$props.classSmartwatchDiv);
+let smartwatchSlotCls = twMerge(smartwatchSlot, $$props.classSmartwatchSlot);
+let smartRightTopCls = twMerge(smartRightTop, $$props.classSmartRightTop);
+let smartRightBotCls = twMerge(smartRightBot, $$props.classSmartRightBot);
+let smartTopCls = twMerge(smartTop, $$props.classSmartTop);
+let smartBotCls = twMerge(smartBot, $$props.classSmartBot);
+let smartwatchInnerCls = twMerge(smartwatchInner, $$props.classSmartwatchInner);
+// tablet
+let tabletDivCls = twMerge(tabletDiv, $$props.classTabletDiv);
+let tabletSlotCls = twMerge(tabletSlot, $$props.classTabletSlot);
+let tabletLeftTopCls = twMerge(tabletLeftTop, $$props.classTabletLeftTop);
+let tabletLeftMidCls = twMerge(tabletLeftMid, $$props.classTabletLeftMid);
+let tabletLeftBotCls = twMerge(tabletLeftBot, $$props.classTabletLeftBot);
+let tabletRightCls = twMerge(tabletRight, $$props.classTabletRight);
 const divClasses = {
-    default: defaultDiv,
-    ios: iosDiv,
-    android: androidDiv,
-    tablet: tabletDiv,
-    laptop: laptopDiv,
-    desktop: destopDiv,
-    smartwatch: smartwatchDiv
+    default: defaultDivCls,
+    ios: iosDivCls,
+    android: androidDivCls,
+    tablet: tabletDivCls,
+    laptop: laptopDivCls,
+    desktop: destopDivCls,
+    smartwatch: smartwatchDivCls
 };
 const slotClasses = {
-    default: defaultSlot,
-    ios: iosSlot,
-    android: androidSlot,
-    tablet: tabletSlot,
-    laptop: laptopSlot,
-    desktop: desktopSlot,
-    smartwatch: smartwatchSlot
+    default: defaultSlotCls,
+    ios: iosSlotCls,
+    android: androidSlotCls,
+    tablet: tabletSlotCls,
+    laptop: laptopSlotCls,
+    desktop: desktopSlotCls,
+    smartwatch: smartwatchSlotCls
 };
 </script>
 
-<div class={divClasses[device]}>
+<div class={twMerge(divClasses[device], $$props.class)}>
   {#if device === 'default'}
-    <DefaultMockup {defaultTop} {defaultLeftTop} {defaultLeftBot} {defaultRight} />
+    <DefaultMockup
+      defaultTop={defaultTopCls}
+      defaultLeftTop={defaultLeftTopCls}
+      defaultLeftBot={defaultLeftBotCls}
+      defaultRight={defaultRightCls} />
   {:else if device === 'ios'}
-    <Ios {iosTop} {iosLeftTop} {iosLeftBot} {iosRight} />
+    <Ios iosTop={iosTopCls} iosLeftTop={iosLeftTopCls} iosLeftBot={iosLeftBotCls} iosRight={iosRightCls} />
   {:else if device === 'android'}
-    <Android {androidTop} {androidLeftTop} {androidLeftMid} {androidLeftBot} {androidRight} />
+    <Android
+      androidTop={androidTopCls}
+      androidLeftTop={androidLeftTopCls}
+      androidLeftMid={androidLeftMidCls}
+      androidLeftBot={androidLeftBotCls}
+      androidRight={androidRightCls} />
   {:else if device === 'tablet'}
-    <Tablet {tabletLeftTop} {tabletLeftMid} {tabletLeftBot} {tabletRight} />
+    <Tablet
+      tabletLeftTop={tabletLeftTopCls}
+      tabletLeftMid={tabletLeftMidCls}
+      tabletLeftBot={tabletLeftBotCls}
+      tabletRight={tabletRightCls} />
   {/if}
   {#if device === 'laptop'}
-    <div class={laptopInner}>
+    <div class={laptopInnerCls}>
       <slot />
     </div>
   {:else if device === 'desktop'}
-    <div class={desktopInner}>
+    <div class={desktopInnerCls}>
       <slot />
     </div>
   {:else if device === 'smartwatch'}
@@ -100,20 +163,20 @@ const slotClasses = {
   {/if}
 </div>
 {#if device === 'laptop'}
-  <div class={laptopBot}>
-    <div class={laptopBotCen} />
+  <div class={laptopBotCls}>
+    <div class={laptopBotCenCls} />
   </div>
 {:else if device === 'desktop'}
-  <div class={desktopBot} />
-  <div class={desktopBotUnder} />
+  <div class={desktopBotCls} />
+  <div class={desktopBotUnderCls} />
 {:else if device === 'smartwatch'}
-  <div class={smartTop}>
-    <Smartwatch {smartRightTop} {smartRightBot} />
-    <div class={smartwatchInner}>
+  <div class={smartTopCls}>
+    <Smartwatch smartRightTop={smartRightTopCls} smartRightBot={smartRightBotCls} />
+    <div class={smartwatchInnerCls}>
       <slot />
     </div>
   </div>
-  <div class={smartBot} />
+  <div class={smartBotCls} />
 {/if}
 
 <!--

package/dist/device-mockup/DeviceMockup.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        [x: string]: any;
         device?: "default" | "ios" | "android" | "tablet" | "laptop" | "desktop" | "smartwatch" | undefined;
         androidDiv?: string | undefined;
         androidSlot?: string | undefined;

package/dist/device-mockup/DeviceMockup.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DeviceMockup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/device-mockup/DeviceMockup.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAmLD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAwC,CAAC;AACxD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACvD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsHG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}
+{"version":3,"file":"DeviceMockup.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/device-mockup/DeviceMockup.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA8OD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACvD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsHG;AACH,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}

package/dist/dropdowns/Dropdown.svelte

@@ -1,10 +1,12 @@
 <script>import { twMerge } from 'tailwind-merge';
 import Popper from '../utils/Popper.svelte';
 export let open = false;
-export let frameClass = '';
 export let headerClass = 'py-1 overflow-hidden rounded-t-lg';
 export let ulClass = 'py-1 w-44';
 export let footerClass = 'py-1 overflow-hidden rounded-b-lg';
+let headerCls = twMerge(headerClass, $$props.classHeader);
+let ulCls = twMerge(ulClass, $$props.classUl);
+let footerCls = twMerge(footerClass, $$props.classFooter);
 $: {
     // set default values
     $$restProps.arrow = $$restProps.arrow ?? false;
@@ -15,20 +17,20 @@ $: {
     $$restProps.rounded = $$restProps.rounded ?? true;
 }
 let popoverClass;
-$: popoverClass = twMerge('divide-y divide-gray-100 dark:divide-gray-600', frameClass);
+$: popoverClass = twMerge('divide-y divide-gray-100 dark:divide-gray-600', $$props.class);
 </script>
 
 <Popper activeContent {...$$restProps} class={popoverClass} on:show bind:open>
   {#if $$slots.header}
-    <div class={headerClass}>
+    <div class={headerCls}>
       <slot name="header" />
     </div>
   {/if}
-  <ul class={$$props.class ?? ulClass}>
+  <ul class={$$props.class ?? ulCls}>
     <slot />
   </ul>
   {#if $$slots.footer}
-    <div class={footerClass}>
+    <div class={footerCls}>
       <slot name="footer" />
     </div>
   {/if}
@@ -64,7 +66,6 @@ $: popoverClass = twMerge('divide-y divide-gray-100 dark:divide-gray-600', frame
   - Events
   ## Props
   @prop open: boolean = false;
-  @prop frameClass: string = '';
   @prop headerClass: string = 'py-1 overflow-hidden rounded-t-lg';
   @prop ulClass: string = 'py-1 w-44';
   @prop footerClass: string = 'py-1 overflow-hidden rounded-b-lg';

package/dist/dropdowns/Dropdown.svelte.d.ts

@@ -3,7 +3,6 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         open?: boolean | undefined;
-        frameClass?: string | undefined;
         headerClass?: string | undefined;
         ulClass?: string | undefined;
         footerClass?: string | undefined;
@@ -51,7 +50,6 @@ export type DropdownSlots = typeof __propDef.slots;
  * - Events
  * ## Props
  * @prop open: boolean = false;
- * @prop frameClass: string = '';
  * @prop headerClass: string = 'py-1 overflow-hidden rounded-t-lg';
  * @prop ulClass: string = 'py-1 w-44';
  * @prop footerClass: string = 'py-1 overflow-hidden rounded-b-lg';

package/dist/dropdowns/Dropdown.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/dropdowns/Dropdown.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAkDD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}
+{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/dropdowns/Dropdown.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAoDD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}

package/dist/footer/Footer.svelte

@@ -1,26 +1,10 @@
 <script>import { twMerge } from 'tailwind-merge';
 export let footerType = 'default';
-let styles = '';
-switch (footerType) {
-    case 'sitemap':
-        styles = 'bg-gray-800';
-        break;
-    case 'socialmedia':
-        styles = 'p-4 bg-white sm:p-6 dark:bg-gray-800';
-        break;
-    case 'logo':
-        styles = 'p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-gray-800';
-        break;
-    case 'default':
-        styles = 'p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800';
-        break;
-}
-let footerClass = twMerge([styles, $$props.class]);
-console.log(footerClass);
+let footerClass = twMerge(footerType === 'sitemap' && 'bg-gray-800', footerType === 'socialmedia' && 'p-4 bg-white sm:p-6 dark:bg-gray-800', footerType === 'logo' && 'p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-gray-800', footerType === 'default' &&
+    'p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800', $$props.class);
 </script>
-<footer
-  {...$$restProps}
-  class={footerClass}>
+
+<footer {...$$restProps} class={footerClass}>
   <slot />
 </footer>
 

package/dist/footer/Footer.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/footer/Footer.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAqCD,QAAA,MAAM,SAAS;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}
+{"version":3,"file":"Footer.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/footer/Footer.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA0BD,QAAA,MAAM,SAAS;;;;;;;;;;;CAA+D,CAAC;AAC/E,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}

package/dist/footer/FooterBrand.svelte

@@ -7,16 +7,19 @@ export let src = '';
 export let alt = '';
 export let name = '';
 export let target = undefined;
+let aCls = twMerge(aClass, $$props.classA);
+let spanCls = twMerge(spanClass, $$props.classSpan);
+let imgCls = twMerge(imgClass, $$props.classImg);
 </script>
 
 {#if href}
-  <a {...$$restProps} {href} {target} class={twMerge(aClass, $$props.class)}>
-    <img {src} class={imgClass} {alt} />
-    <span class={spanClass}>{name}</span>
+  <a {...$$restProps} {href} {target} class={aCls}>
+    <img {src} class={imgCls} {alt} />
+    <span class={spanCls}>{name}</span>
     <slot />
   </a>
 {:else}
-  <img {...$$restProps} {src} class={imgClass} {alt} />
+  <img {...$$restProps} {src} class={imgCls} {alt} />
 {/if}
 
 <!--

package/dist/footer/FooterBrand.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FooterBrand.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/footer/FooterBrand.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA6BD,QAAA,MAAM,SAAS;;;;;;;;;;iBAD8P,MAAM,GAAG,SAAS;;;;;;;;CACjN,CAAC;AAC/E,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEtD;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}
+{"version":3,"file":"FooterBrand.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/footer/FooterBrand.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAiCD,QAAA,MAAM,SAAS;;;;;;;;;;iBAD8P,MAAM,GAAG,SAAS;;;;;;;;CACjN,CAAC;AAC/E,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEtD;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}

package/dist/footer/FooterCopyright.svelte

@@ -6,12 +6,14 @@ export let href = '';
 export let by = '';
 export let target = undefined;
 export let copyrightMessage = 'All Rights Reserved.';
+let spanCls = twMerge(spanClass, $$props.classSpan);
+let aCls = twMerge(aClass, $$props.classA);
 </script>
 
-<span class={twMerge(spanClass, $$props.class)}>
+<span class={spanCls}>
   &copy; {year}
   {#if href}
-    <a {...$$restProps} {href} {target} class={aClass}>
+    <a {...$$restProps} {href} {target} class={aCls}>
       {by}
     </a>
   {:else}

package/dist/footer/FooterCopyright.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FooterCopyright.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/footer/FooterCopyright.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA8BD,QAAA,MAAM,SAAS;;;;;;;;iBAD+N,MAAM,GAAG,SAAS;;;;;;;CAClL,CAAC;AAC/E,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC1D,MAAM,MAAM,qBAAqB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC5D,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE1D;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,oBAAoB,CAAC,oBAAoB,EAAE,qBAAqB,EAAE,oBAAoB,CAAC;CACnI"}
+{"version":3,"file":"FooterCopyright.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/footer/FooterCopyright.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAiCD,QAAA,MAAM,SAAS;;;;;;;;iBAD+N,MAAM,GAAG,SAAS;;;;;;;CAClL,CAAC;AAC/E,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC1D,MAAM,MAAM,qBAAqB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC5D,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE1D;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,oBAAoB,CAAC,oBAAoB,EAAE,qBAAqB,EAAE,oBAAoB,CAAC;CACnI"}

package/dist/footer/FooterLink.svelte

@@ -3,10 +3,12 @@ export let liClass = 'mr-4 last:mr-0 md:mr-6';
 export let aClass = 'hover:underline';
 export let href = '';
 export let target = undefined;
+let liCls = twMerge(liClass, $$props.classLi);
+let aCls = twMerge(aClass, $$props.classA);
 </script>
 
-<li class={twMerge(liClass, $$props.class)}>
-  <a {...$$restProps} {href} class={aClass} {target}>
+<li class={liCls}>
+  <a {...$$restProps} {href} class={aCls} {target}>
     <slot />
   </a>
 </li>

package/dist/footer/FooterLink.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FooterLink.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/footer/FooterLink.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAqBD,QAAA,MAAM,SAAS;;;;;;iBADkI,MAAM,GAAG,SAAS;;;;;;;;CACrF,CAAC;AAC/E,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACvD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAErD;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,oBAAoB,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC/G"}
+{"version":3,"file":"FooterLink.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/footer/FooterLink.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAwBD,QAAA,MAAM,SAAS;;;;;;iBADkI,MAAM,GAAG,SAAS;;;;;;;;CACrF,CAAC;AAC/E,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACvD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAErD;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,oBAAoB,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC/G"}