@likable-hair/svelte 0.0.61 → 0.0.63

package/buttons/Button.svelte

@@ -1,4 +1,4 @@
-<script >export let type = 'default', active = false, loading = false, icon = undefined, iconSize = 15, clazz = '', maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, width = undefined, height = undefined, textAlign = "center", cursor = "pointer", padding = "5px", fontSize = undefined, color = undefined, display = undefined, justifyContent = undefined, alignItems = undefined, backgroundColor = undefined, hoverBackgroundColor = '#88888847', activeBackgroundColor = hoverBackgroundColor, borderRadius = undefined, border = undefined, boxShadow = undefined, loaderHeight = undefined, loaderWidth = undefined, disabled = false;
+<script>export let type = 'default', active = false, loading = false, icon = undefined, iconSize = 15, clazz = '', maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, width = undefined, height = undefined, textAlign = "center", cursor = "pointer", padding = "5px", fontSize = undefined, color = undefined, display = undefined, justifyContent = undefined, alignItems = undefined, backgroundColor = undefined, hoverBackgroundColor = '#88888847', activeBackgroundColor = hoverBackgroundColor, borderRadius = undefined, border = undefined, boxShadow = undefined, loaderHeight = undefined, loaderWidth = undefined, disabled = false;
 export { clazz as class };
 import { createEventDispatcher } from 'svelte';
 const dispatch = createEventDispatcher();

package/common/Card.svelte

@@ -1,4 +1,4 @@
-<script >export let outlined = false, maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, width = 'fit-content', height = undefined, padding = "5px", borderRadius = "5px", backgroundColor = "rgb(252, 252, 252)", color = undefined, borderColor = undefined, borderWidth = undefined, marginBottom = undefined, marginTop = undefined, marginLeft = undefined, marginRight = undefined, boxShadow = "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+<script>export let outlined = false, maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, width = 'fit-content', height = undefined, padding = "5px", borderRadius = "5px", backgroundColor = "rgb(252, 252, 252)", color = undefined, borderColor = undefined, borderWidth = undefined, marginBottom = undefined, marginTop = undefined, marginLeft = undefined, marginRight = undefined, boxShadow = "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
 </script>
 
 <div

package/common/Gesture.svelte

@@ -1,4 +1,4 @@
-<script >import { createEventDispatcher } from 'svelte';
+<script>import { createEventDispatcher } from 'svelte';
 const dispatch = createEventDispatcher();
 // TODO export the handler into a service to avoid mount 3 listeners for every component instance
 export let timeThreshold = 200, diagonalThreshold = 100;

package/common/MediaQuery.svelte

@@ -1,4 +1,4 @@
-<script >import mediaQuery from "../stores/mediaQuery";
+<script>import mediaQuery from "../stores/mediaQuery";
 $: xsAndDown = $mediaQuery.xs;
 $: sAndDown = $mediaQuery.s || $mediaQuery.xs;
 $: mAndDown = $mediaQuery.s || $mediaQuery.xs || $mediaQuery.m;

package/common/Menu.svelte

@@ -1,4 +1,4 @@
-<script >import { v4 as uuidv4 } from 'uuid';
+<script>import { v4 as uuidv4 } from 'uuid';
 import { fly } from 'svelte/transition';
 export let open = false, top = undefined, left = undefined, width, height, maxHeight = undefined, overflow = "auto", refreshPosition = false, boxShadow = undefined, borderRadius = undefined, activator = undefined, anchor = 'bottom', closeOnClickOutside = false, inAnimation = fly, inAnimationConfig = {
     duration: 100,

package/common/SimpleTable.svelte

@@ -1,6 +1,6 @@
-<script context="module" ></script>
+<script context="module"></script>
 
-<script >import { dateToString } from "../dates/utils";
+<script>import { dateToString } from "../dates/utils";
 export let headers = undefined, items = undefined, backgroundColor = "rgba(255,255,255,0)", headerColor = "rgba(0,0,0,0.05)", rowSeparatorColor = headerColor, headerHeight = "30px", rowHeight = "70px", minWidth = undefined, height = "100%", width = "100%";
 </script>
 

package/dates/Calendar.svelte

@@ -1,4 +1,4 @@
-<script >import { onMount } from 'svelte';
+<script>import { onMount } from 'svelte';
 import { fly } from 'svelte/transition';
 import { getDateRowsStats, getDaysNames } from './utils';
 export let selectedDate = undefined, visibleMonth = new Date().getMonth(), visibleYear = new Date().getFullYear(), locale = 'it', showExtraMonthDays = true, showHeader = true, height = "100%", width = "100%", dayWidth = '30px', dayHeight = '30px', dayHoverColor = '#c9c8c873', daySelectedColor = '#adadad', selectedTextColor = "black", gridGap = "1px", dayBackgroundColor = undefined, animationDuration = 200;

package/dates/DatePicker.svelte

@@ -1,4 +1,4 @@
-<script >import { getMonthName, dateToString } from "./utils";
+<script>import { getMonthName, dateToString } from "./utils";
 import YearSelector from "./YearSelector.svelte";
 import MonthSelector from "./MonthSelector.svelte";
 import Calendar from "./Calendar.svelte";

package/dates/MonthSelector.svelte

@@ -1,4 +1,4 @@
-<script >import { getMonthName } from './utils';
+<script>import { getMonthName } from './utils';
 export let selectedMonth = undefined, locale = 'it', height = "100%", width = "100%", monthSelectedColor = '#adadad', monthSelectedTextColor = '#21a';
 import { createEventDispatcher } from 'svelte';
 const dispatch = createEventDispatcher();

package/dates/TimePickerTextField.svelte

@@ -1,4 +1,4 @@
-<script >import Textfield from "../forms/Textfield.svelte";
+<script>import Textfield from "../forms/Textfield.svelte";
 import VerticalTextSwitch from "../forms/VerticalTextSwitch.svelte";
 import "./DatePicker.svelte";
 export let hourFormat = "24", dayPeriod = "am", time = undefined, text = "", fieldSeparator = ":", placeholder = "Insert time...", focusedBoxShadow = "#C0D6FF 0px 2px 10px", borderColor = "", borderWeight = "1px", fontSize = "16px", width = "100%";

package/dates/YearSelector.svelte

@@ -1,4 +1,4 @@
-<script >import { scrollAtCenter } from "../common/scroller";
+<script>import { scrollAtCenter } from "../common/scroller";
 import { createEventDispatcher, onMount } from 'svelte';
 export let selectedYear = undefined, selectableYears = [...Array(150).keys()].map(i => i + (new Date().getFullYear() - 75)), height = "100%", width = "100%";
 let container, targetButtons = {};

package/dialogs/Dialog.svelte

@@ -1,4 +1,4 @@
-<script >import { browser } from "$app/env";
+<script>import { browser } from "$app/environment";
 import { beforeUpdate } from "svelte";
 export let open = false, overlayOpacity = "30%", overlayColor = "#282828";
 let zIndex = 50, localOpen = open;

package/forms/Autocomplete.svelte

@@ -1,6 +1,6 @@
-<script context="module" ></script>
+<script context="module"></script>
 
-<script >export let values = [], items, searchFunction = undefined, multiple = false, disabled = false, width = "auto", height = "auto", maxWidth = undefined, 
+<script>export let values = [], items, searchFunction = undefined, multiple = false, disabled = false, width = "auto", height = "auto", maxWidth = undefined, 
 // textfield
 textFieldLabel = "", textFieldPlaceholder = "", textFieldColor = null, textFieldVariant = 'boxed', textFieldMaxWidth = "min(100px, 90%)", textFieldMinWidth = undefined, textFieldHeight = "auto", textFieldTextColor = "black", textFieldBorderWeight = "2px", textFieldBorderRadius = "5px", textFieldBorderColor = null, textFieldFocusBorderColor = null, textFieldFocusedBoxShadow = undefined, textFieldBackgroundColor = null, textFieldPadding = undefined, textFieldPaddingLeft = undefined, textFieldPaddingRight = undefined, textFieldPaddingBottom = undefined, textFieldPaddingTop = undefined, textFieldFontSize = undefined, 
 // menu

package/forms/Checkbox.svelte

@@ -1,4 +1,4 @@
-<script >export let value = false, id = undefined, disabled = false, activeColor = "#275efe", activeInnerColor = "#fff", focusShadow = "2px rgba(39, 94, 254, 0.3)", borderColor = "#bbc1e1", borderHoverColor = "#275efe", backgroundColor = "#fff", disabledColor = "#f6f8ff", disabledInnerColor = "#e1e6f9";
+<script>export let value = false, id = undefined, disabled = false, activeColor = "#275efe", activeInnerColor = "#fff", focusShadow = "2px rgba(39, 94, 254, 0.3)", borderColor = "#bbc1e1", borderHoverColor = "#275efe", backgroundColor = "#fff", disabledColor = "#f6f8ff", disabledInnerColor = "#e1e6f9";
 </script>
 
 <input

package/forms/FileInput.svelte

@@ -1,4 +1,4 @@
-<script >import { createEventDispatcher } from 'svelte';
+<script>import { createEventDispatcher } from 'svelte';
 export let files = undefined, persistOverUpload = true, height = "100%", width = "100%", backgroundColor = "rgba(255,255,255,0)", textColor = "black", rounded = true, disabled = false, focusShadow = "inset 0 0 0 1px rgb(255 255 255/0.1), 0 0 #0000, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
 let inputElement = undefined;
 let dropAreaActive = false;

package/forms/FileInputList.svelte

@@ -1,4 +1,4 @@
-<script >import Button from "../buttons/Button.svelte";
+<script>import Button from "../buttons/Button.svelte";
 import FileInput from "./FileInput.svelte";
 import Icon from "../media/Icon.svelte";
 export let files = undefined, persistOverUpload = true, height = "100%", width = "100%", backgroundColor = "rgba(255,255,255,0)", textColor = "rgba(0,0,0,0.7)", rounded = true, focusShadow = undefined, dropAreaActive = true, icon = "mdi-folder", iconSize = 30, selectedRowColor = "red", selectedRowBackground = "rgba(0,0,0,0.1)";

package/forms/Switch.svelte

@@ -1,4 +1,4 @@
-<script >export let value = false, height = "20px", width = "40px", padding = "6px", borderRadius = "10px", toggleActiveColor = "#5c5c5c", toggleDeactiveColor = "#5c5c5c", backgroundActiveColor = "#e6e6e6", backgroundDeactiveColor = "#e6e6e6", animationDuration = "0.1s";
+<script>export let value = false, height = "20px", width = "40px", padding = "6px", borderRadius = "10px", toggleActiveColor = "#5c5c5c", toggleDeactiveColor = "#5c5c5c", backgroundActiveColor = "#e6e6e6", backgroundDeactiveColor = "#e6e6e6", animationDuration = "0.1s";
 </script>
 
 <div 

package/forms/Textarea.svelte

@@ -1,4 +1,4 @@
-<script >import { v4 as uuidv4 } from 'uuid';
+<script>import { v4 as uuidv4 } from 'uuid';
 export let label = null, placeholder = "placeholder", textAreaId = uuidv4(), fontFamily = "inherit", value = "", resizable = true, disabled = false, readOnly = false, maxLength = undefined, textColor = "black", border = "none", borderRadius = "5px", focusedBoxShadow = undefined, backgroundColor = null, padding = undefined, paddingLeft = undefined, paddingRight = undefined, paddingBottom = undefined, paddingTop = undefined, fontSize = undefined, labelFontSize = undefined, labelColor = undefined, width = "100%", height = "100%";
 </script>
 

package/forms/Textfield.svelte

@@ -1,6 +1,6 @@
-<script  context="module"></script>
+<script context="module"></script>
 
-<script >export let label = "", placeholder = "", color = null, value = "", disabled = false, variant = 'outlined', width = "100%", height = "50px", maxWidth = undefined, minWidth = undefined, textColor = "black", borderWeight = "2px", borderRadius = "5px", borderColor = null, focusBorderColor = null, focusedBoxShadow = undefined, backgroundColor = null, padding = undefined, paddingLeft = undefined, paddingRight = undefined, paddingBottom = undefined, paddingTop = undefined, fontSize = undefined, type = 'text', readonly = false, inputElement = undefined;
+<script>export let label = "", placeholder = "", color = null, value = "", disabled = false, variant = 'outlined', width = "100%", height = "50px", maxWidth = undefined, minWidth = undefined, textColor = "black", borderWeight = "2px", borderRadius = "5px", borderColor = null, focusBorderColor = null, focusedBoxShadow = undefined, backgroundColor = null, padding = undefined, paddingLeft = undefined, paddingRight = undefined, paddingBottom = undefined, paddingTop = undefined, fontSize = undefined, type = 'text', readonly = false, inputElement = undefined;
 import { v4 as uuidv4 } from 'uuid';
 import { onMount } from 'svelte';
 let inputId = uuidv4(), focused = false, legendWidth = 0, labelElement = undefined;

package/forms/VerticalSwitch.svelte

@@ -1,4 +1,4 @@
-<script >export let value = false, height = "60px", width = "30px", rounded = false, backgroundColor = "#90CAF9", selectedOptionColor = backgroundColor, sliderColor = "white", optionColor = sliderColor, fontSize = "11px", animationDuration = "0.1s";
+<script>export let value = false, height = "60px", width = "30px", rounded = false, backgroundColor = "#90CAF9", selectedOptionColor = backgroundColor, sliderColor = "white", optionColor = sliderColor, fontSize = "11px", animationDuration = "0.1s";
 </script>
 
 <div

package/forms/VerticalTextSwitch.svelte

@@ -1,4 +1,4 @@
-<script >import { fly } from 'svelte/transition';
+<script>import { fly } from 'svelte/transition';
 export let value = false, height = "100%", width = "100%", backgroundColor = undefined, firstColor = undefined, secondColor = firstColor, fontSize = "12px", hoverBackgroundColor = undefined, hoverBoxShadow = undefined, animationDuration = 200;
 let optionHeight = undefined;
 </script>

package/loaders/CircularLoader.svelte

@@ -1,4 +1,4 @@
-<script >export let loading = true, height = "30px", width = "30px", color = "black";
+<script>export let loading = true, height = "30px", width = "30px", color = "black";
 </script>
 
 <svg 

package/loaders/Skeleton.svelte

@@ -1,6 +1,6 @@
-<script  context="module"></script>
+<script context="module"></script>
 
-<script >export let sections = [], maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, width = "100%", height = "100%", padding = '10px', dark = false;
+<script>export let sections = [], maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, width = "100%", height = "100%", padding = '10px', dark = false;
 $: widthLessPadding = `calc(${width} - (${padding} * 2))`;
 $: heightLessPadding = `calc(${height} - (${padding} * 2))`;
 $: maxWidthLessPadding = `calc(${maxWidth} - (${padding} * 2))`;

package/media/AttachmentDownloader.svelte

@@ -1,4 +1,4 @@
-<script >export let title = undefined, description = undefined, borderColor = "#B8B8B8", iconColor = "#8D8D8D", borderWidth = '1px', maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, width = 'fit-content', height = undefined;
+<script>export let title = undefined, description = undefined, borderColor = "#B8B8B8", iconColor = "#8D8D8D", borderWidth = '1px', maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, width = 'fit-content', height = undefined;
 import Icon from './Icon.svelte';
 import Card from '../common/Card.svelte';
 </script>

package/media/Avatar.svelte

@@ -1,4 +1,4 @@
-<script >export let src, alt = "", width = "40px", maxWidth = undefined, minWidth = undefined, height = "40px", maxHeight = undefined, minHeight = undefined, lazyLoaded = false, referrerpolicy = "no-referrer", borderRadius = "50%";
+<script>export let src, alt = "", width = "40px", maxWidth = undefined, minWidth = undefined, height = "40px", maxHeight = undefined, minHeight = undefined, lazyLoaded = false, referrerpolicy = "no-referrer", borderRadius = "50%";
 import Image from './Image.svelte';
 </script>
 

package/media/Carousel.svelte

@@ -1,4 +1,4 @@
-<script >import { onMount } from 'svelte';
+<script>import { onMount } from 'svelte';
 export let images = [], maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, width = "100%", height = "100%";
 let container, localWidth = '0px', localHeight = '0px';
 onMount(() => {

package/media/DescriptiveAvatar.svelte

@@ -1,4 +1,4 @@
-<script >export let src, title = undefined, description = undefined, direction = 'row', reverse = false, avatarSpacing = '10px', width = undefined, maxWidth = undefined, minWidth = undefined, height = undefined, maxHeight = undefined, minHeight = undefined, lazyLoaded = false, borderRadius = "50%", referrerpolicy = "no-referrer";
+<script>export let src, title = undefined, description = undefined, direction = 'row', reverse = false, avatarSpacing = '10px', width = undefined, maxWidth = undefined, minWidth = undefined, height = undefined, maxHeight = undefined, minHeight = undefined, lazyLoaded = false, borderRadius = "50%", referrerpolicy = "no-referrer";
 let textAlignment;
 $: if (direction == 'column') {
     textAlignment = 'center';

package/media/Gallery.svelte

@@ -1,6 +1,4 @@
-<script  context="module"></script>
-
-<script >export let images = [], columns = undefined, imageMaxWidth = undefined, imageMinWidth = undefined, imageMaxHeight = undefined, imageMinHeight = undefined, imageHeight = undefined, imageWidth = undefined, disableHover = false, dark = false;
+<script>export let images = [], columns = undefined, imageMaxWidth = undefined, imageMinWidth = undefined, imageMaxHeight = undefined, imageMinHeight = undefined, imageHeight = undefined, imageWidth = undefined, disableHover = false, dark = false;
 let selectedIndex = undefined, selectedImage = undefined;
 function handleImageClick(e) {
     selectedIndex = e.detail.index;
@@ -8,12 +6,12 @@ function handleImageClick(e) {
 $: if (selectedIndex !== undefined && selectedIndex !== null) {
     selectedImage = images[selectedIndex];
 }
-function switchNext() {
+function switchPrevious() {
     if (selectedIndex < (images.length - 1)) {
         selectedIndex++;
     }
 }
-function switchPrevious() {
+function switchNext() {
     if (selectedIndex > 0) {
         selectedIndex--;
     }

package/media/Icon.svelte

@@ -1,4 +1,4 @@
-<script >export let name, size = 15, color = "", click = false;
+<script>export let name, size = 15, color = "", click = false;
 let clazz = "";
 export { clazz as class };
 import "../common/materialDesign.css";

package/media/Image.svelte

@@ -1,4 +1,4 @@
-<script >import { browser } from '$app/env';
+<script>import { browser } from '$app/environment';
 export let maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, width = undefined, height = undefined, borderRadius = undefined, src = undefined, title = undefined, description = undefined, dark = false, disableHover = false, showSkeletonLoader = true, imageCover = true, imageContain = false;
 const load = (src) => {
     return new Promise(async (resolve, reject) => {

package/media/ImageGrid.svelte

@@ -1,6 +1,6 @@
-<script  context="module"></script>
+<script context="module"></script>
 
-<script >import { createEventDispatcher } from 'svelte';
+<script>import { createEventDispatcher } from 'svelte';
 export let images = [], columns = undefined, imageMaxWidth = undefined, imageMinWidth = undefined, imageMaxHeight = undefined, imageMinHeight = undefined, imageHeight = undefined, imageWidth = undefined, disableHover = false, dark = false;
 const dispatch = createEventDispatcher();
 function handleImageClick(image, index) {

package/navigation/Breadcrumb.svelte

@@ -1,6 +1,6 @@
-<script  context="module"></script>
+<script context="module"></script>
 
-<script >import { createEventDispatcher } from 'svelte';
+<script>import { createEventDispatcher } from 'svelte';
 const dispatch = createEventDispatcher();
 export let items = [], underliner = true, separatorIcon = 'mdi-chevron-right', separatorIconSize = 10, spacing = "20px";
 function handleLinkClick(item) {

package/navigation/Chip.svelte

@@ -1,4 +1,4 @@
-<script >import Icon from '../media/Icon.svelte';
+<script>import Icon from '../media/Icon.svelte';
 import Button from '../buttons/Button.svelte';
 import { createEventDispatcher } from 'svelte';
 export let close = false, closeIcon = "mdi-close-circle", color = "blue", textColor = "white", disabled = false, filter = false, filterIcon = "mdi-check", label = false, outlined = false, size = 12;

package/navigation/Drawer.svelte

@@ -1,4 +1,4 @@
-<script >import Navigator from './Navigator.svelte';
+<script>import Navigator from './Navigator.svelte';
 export let open = false, position = 'left', space = '200px', openingSpeed = '0.3s', overlaySpeed = '0.2s', blockScroll = true, color = undefined, overlay = true, backgroundColor = undefined, overlayColor = '#282828', overlayOpacity = '30%', zIndex = 30, items = [];
 let height = undefined, width = undefined, top = undefined, bottom = undefined, left = undefined, right = undefined;
 function handleClickOverlay() {

package/navigation/HeaderMenu.svelte

@@ -1,4 +1,4 @@
-<script >export let title = "", items = [], hideOnScroll = true, initialRemoveShadow = false, initialBackgroundColor = undefined, backgroundColor = 'white', color = undefined, mobileMenu = true, zIndex = 25;
+<script>export let title = "", items = [], hideOnScroll = true, initialRemoveShadow = false, initialBackgroundColor = undefined, backgroundColor = 'white', color = undefined, mobileMenu = true, zIndex = 25;
 let scrollY, lastScrollY, visible = true;
 function handleScroll() {
     if (hideOnScroll) {

package/navigation/Navigator.svelte

@@ -1,6 +1,6 @@
-<script context="module" ></script>
+<script context="module"></script>
 
-<script >export let items = [], color = undefined, vertical = false, space = '20px';
+<script>export let items = [], color = undefined, vertical = false, space = '20px';
 import { createEventDispatcher } from 'svelte';
 const dispatch = createEventDispatcher();
 function handleItemClick(item) {

package/navigation/TabSwitcher.svelte

@@ -1,6 +1,6 @@
-<script  context="module"></script>
+<script context="module"></script>
 
-<script >import { afterUpdate, onMount } from 'svelte';
+<script>import { afterUpdate, onMount } from 'svelte';
 export let tabs = [], selected = undefined, mandatory = true, width = undefined, color = "rgb(51 65 85)", bookmarkColor = undefined, horizontalGuideColor = "rgb(51 65 85)", margin = "12px";
 let tabButtons = {};
 onMount(() => {

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair",
-  "version": "0.0.61",
+  "version": "0.0.63",
   "devDependencies": {
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",
     "@testing-library/cypress": "^8.0.3",
     "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/svelte": "^3.1.3",
     "@typescript-eslint/eslint-plugin": "^4.31.1",
     "@typescript-eslint/parser": "^4.31.1",
     "autoprefixer": "^10.4.2",
@@ -15,6 +16,7 @@
     "eslint": "^7.32.0",
     "eslint-plugin-svelte3": "^3.2.1",
     "jest": "^28.1.2",
+    "jest-css-modules-transform": "^4.4.2",
     "jest-environment-jsdom": "^28.1.2",
     "svelte": "^3.44.0",
     "svelte-check": "^2.2.6",
@@ -23,14 +25,13 @@
     "svelte2tsx": "^0.4.12",
     "ts-jest": "^28.0.5",
     "tslib": "^2.3.1",
-    "typescript": "^4.7.4",
-    "@testing-library/svelte": "^3.1.3",
-    "jest-css-modules-transform": "^4.4.2"
+    "typescript": "^4.7.4"
   },
   "type": "module",
   "dependencies": {
     "@mdi/font": "^6.5.95",
     "@sveltejs/adapter-node": "^1.0.0-next.79",
+    "@sveltejs/package": "^1.0.0-next.4",
     "uuid": "^8.3.2"
   },
   "jest": {

package/progress/ProgressBar.svelte

@@ -1,4 +1,4 @@
-<script >export let value = 0, total = 100, height = '5px', width = '100%', radius = '2px', backgroundColor = undefined, color = undefined;
+<script>export let value = 0, total = 100, height = '5px', width = '100%', radius = '2px', backgroundColor = undefined, color = undefined;
 $: hundredBasedProgress = total === 0 ? 100 : value * 100 / total;
 $: cssVariables = Object.entries({
     '--progress-width': hundredBasedProgress + '%',

package/shop/ProductCard.svelte

@@ -1,4 +1,4 @@
-<script >export let image = '', title = '', sale = false, saleText = 'SALE', price = undefined, currency = '€', discount = undefined, maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, width = undefined, height = undefined;
+<script>export let image = '', title = '', sale = false, saleText = 'SALE', price = undefined, currency = '€', discount = undefined, maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, width = undefined, height = undefined;
 $: priceLessDiscount = Number((price - discount).toFixed(2));
 import Image from '../media/Image.svelte';
 </script>

package/shop/ProductsGrid.svelte

@@ -1,4 +1,4 @@
-<script >export let products = [], productMaxWidth = '90vw', productMinWidth = '200px', productMaxHeight = '90vh', productMinHeight = '300px', productHeight = '300px', productWidth = '200px', width = '100%', gap = '1rem';
+<script>export let products = [], productMaxWidth = '90vw', productMinWidth = '200px', productMaxHeight = '90vh', productMinHeight = '300px', productHeight = '300px', productWidth = '200px', width = '100%', gap = '1rem';
 import ProductCard from './ProductCard.svelte';
 </script>
 

package/stores/mediaQuery.js

@@ -6,7 +6,7 @@
   1441px and more —  Extra large screens, TV
 */
 import { readable } from "svelte/store";
-import { browser } from "$app/env";
+import { browser } from "$app/environment";
 // 0px — 425px: Mobile devices
 function handleMatchOnXsQuery(event) {
     if (event.matches) {

package/timeline/ScrollTimeLine.svelte

@@ -1,6 +1,6 @@
-<script  context="module"></script>
+<script context="module"></script>
 
-<script >import { onMount } from 'svelte';
+<script>import { onMount } from 'svelte';
 export let value = undefined, periods = [], sideMenuVisible = true, width = "500px", maxWidth = "100vw", minWidth = "initial", height = "300px", maxHeight = "100vh", minHeight = "initial";
 let visiblePeriodIndex = 0, oldTitle = undefined, newTitle = undefined, oldTitleTop = '0%', newTitleTop = '100%';
 onMount(() => {

package/timeline/SimpleTimeLine.svelte

@@ -1,6 +1,6 @@
-<script context="module" ></script>
+<script context="module"></script>
 
-<script >import { dateToString } from '../dates/utils';
+<script>import { dateToString } from '../dates/utils';
 export let items = [], singleSided = false, height = undefined, width = undefined, itemMarginTop = "15px", itemMarginBottom = "0px", firstItemMarginTop = "5px", lastItemMarginBottom = "5px", circleColor = "black", circleDiameter = "15px", timesWidth = undefined, circleAlignment = 'top';
 $: cssVariables = Object.entries({
     '-divider-width': '48px',