@getmicdrop/svelte-components 5.5.1 → 5.5.5

package/dist/tokens/__tests__/radius.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=radius.test.d.ts.map

package/dist/tokens/__tests__/radius.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radius.test.d.ts","sourceRoot":"","sources":["../../../src/lib/tokens/__tests__/radius.test.ts"],"names":[],"mappings":""}

package/dist/tokens/__tests__/radius.test.js

@@ -0,0 +1,118 @@
+import { describe, it, expect } from 'vitest';
+import { borderRadius, radiusAliases } from '../radius';
+describe('Border Radius Tokens', () => {
+    it('has none radius', () => {
+        expect(borderRadius.none).toBe('0px');
+    });
+    it('has sm radius', () => {
+        expect(borderRadius.sm).toBe('0.125rem');
+    });
+    it('has default radius', () => {
+        expect(borderRadius.DEFAULT).toBe('0.25rem');
+    });
+    it('has md radius', () => {
+        expect(borderRadius.md).toBe('0.375rem');
+    });
+    it('has lg radius', () => {
+        expect(borderRadius.lg).toBe('0.5rem');
+    });
+    it('has xl radius', () => {
+        expect(borderRadius.xl).toBe('0.75rem');
+    });
+    it('has 2xl radius', () => {
+        expect(borderRadius['2xl']).toBe('1rem');
+    });
+    it('has 3xl radius', () => {
+        expect(borderRadius['3xl']).toBe('1.5rem');
+    });
+    it('has full radius for circles', () => {
+        expect(borderRadius.full).toBe('9999px');
+    });
+});
+describe('Radius Scale Order', () => {
+    it('radii increase in size', () => {
+        const sizes = [
+            borderRadius.none,
+            borderRadius.sm,
+            borderRadius.DEFAULT,
+            borderRadius.md,
+            borderRadius.lg,
+            borderRadius.xl,
+            borderRadius['2xl'],
+            borderRadius['3xl'],
+        ];
+        // Parse rem values and check they increase
+        for (let i = 0; i < sizes.length - 1; i++) {
+            const current = parseFloat(sizes[i]);
+            const next = parseFloat(sizes[i + 1]);
+            expect(next).toBeGreaterThan(current);
+        }
+    });
+});
+describe('Radius Aliases', () => {
+    it('button uses lg radius', () => {
+        expect(radiusAliases.button).toBe(borderRadius.lg);
+        expect(radiusAliases.button).toBe('0.5rem');
+    });
+    it('input uses lg radius', () => {
+        expect(radiusAliases.input).toBe(borderRadius.lg);
+        expect(radiusAliases.input).toBe('0.5rem');
+    });
+    it('card uses xl radius', () => {
+        expect(radiusAliases.card).toBe(borderRadius.xl);
+        expect(radiusAliases.card).toBe('0.75rem');
+    });
+    it('modal uses 2xl radius', () => {
+        expect(radiusAliases.modal).toBe(borderRadius['2xl']);
+        expect(radiusAliases.modal).toBe('1rem');
+    });
+    it('badge uses full radius', () => {
+        expect(radiusAliases.badge).toBe(borderRadius.full);
+        expect(radiusAliases.badge).toBe('9999px');
+    });
+    it('avatar uses full radius', () => {
+        expect(radiusAliases.avatar).toBe(borderRadius.full);
+        expect(radiusAliases.avatar).toBe('9999px');
+    });
+    it('dropdown uses lg radius', () => {
+        expect(radiusAliases.dropdown).toBe(borderRadius.lg);
+    });
+    it('tooltip uses md radius', () => {
+        expect(radiusAliases.tooltip).toBe(borderRadius.md);
+        expect(radiusAliases.tooltip).toBe('0.375rem');
+    });
+});
+describe('Radius Value Formats', () => {
+    it('all rem values are valid', () => {
+        const remPattern = /^\d+(\.\d+)?rem$/;
+        const pxPattern = /^\d+px$/;
+        Object.entries(borderRadius).forEach(([key, value]) => {
+            expect(value.match(remPattern) || value.match(pxPattern)).toBeTruthy();
+        });
+    });
+    it('none is 0px', () => {
+        expect(borderRadius.none).toMatch(/^0px$/);
+    });
+    it('full uses high px value for pill shape', () => {
+        expect(parseInt(borderRadius.full)).toBeGreaterThan(1000);
+    });
+});
+describe('Alias Semantic Meaning', () => {
+    it('interactive elements share same radius', () => {
+        expect(radiusAliases.button).toBe(radiusAliases.input);
+        expect(radiusAliases.button).toBe(radiusAliases.dropdown);
+    });
+    it('circular elements share same radius', () => {
+        expect(radiusAliases.badge).toBe(radiusAliases.avatar);
+    });
+    it('card has larger radius than buttons', () => {
+        const cardRadius = parseFloat(radiusAliases.card);
+        const buttonRadius = parseFloat(radiusAliases.button);
+        expect(cardRadius).toBeGreaterThan(buttonRadius);
+    });
+    it('modal has largest container radius', () => {
+        const modalRadius = parseFloat(radiusAliases.modal);
+        const cardRadius = parseFloat(radiusAliases.card);
+        expect(modalRadius).toBeGreaterThan(cardRadius);
+    });
+});

package/dist/tokens/__tests__/shadows.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=shadows.test.d.ts.map

package/dist/tokens/__tests__/shadows.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shadows.test.d.ts","sourceRoot":"","sources":["../../../src/lib/tokens/__tests__/shadows.test.ts"],"names":[],"mappings":""}

package/dist/tokens/__tests__/shadows.test.js

@@ -0,0 +1,105 @@
+import { describe, it, expect } from 'vitest';
+import { boxShadow, customShadows, shadows } from '../shadows';
+describe('Box Shadow Tokens', () => {
+    it('has sm shadow', () => {
+        expect(boxShadow.sm).toContain('0 1px 2px');
+        expect(boxShadow.sm).toContain('rgb(0 0 0');
+    });
+    it('has DEFAULT shadow', () => {
+        expect(boxShadow.DEFAULT).toContain('0 1px 3px');
+    });
+    it('has md shadow', () => {
+        expect(boxShadow.md).toContain('0 4px 6px');
+    });
+    it('has lg shadow', () => {
+        expect(boxShadow.lg).toContain('0 10px 15px');
+    });
+    it('has xl shadow', () => {
+        expect(boxShadow.xl).toContain('0 20px 25px');
+    });
+    it('has 2xl shadow', () => {
+        expect(boxShadow['2xl']).toContain('0 25px 50px');
+    });
+    it('has inner shadow (inset)', () => {
+        expect(boxShadow.inner).toContain('inset');
+        expect(boxShadow.inner).toContain('0 2px 4px');
+    });
+    it('has none shadow', () => {
+        expect(boxShadow.none).toBe('none');
+    });
+});
+describe('Shadow Scale Progression', () => {
+    it('shadows increase in blur radius', () => {
+        // Extract first blur value from each shadow
+        const getFirstBlurRadius = (shadow) => {
+            const match = shadow.match(/(\d+)px/);
+            return match ? parseInt(match[1]) : 0;
+        };
+        const smBlur = getFirstBlurRadius(boxShadow.sm);
+        const defaultBlur = getFirstBlurRadius(boxShadow.DEFAULT);
+        const mdBlur = getFirstBlurRadius(boxShadow.md);
+        const lgBlur = getFirstBlurRadius(boxShadow.lg);
+        const xlBlur = getFirstBlurRadius(boxShadow.xl);
+        expect(defaultBlur).toBeGreaterThanOrEqual(smBlur);
+        expect(mdBlur).toBeGreaterThanOrEqual(defaultBlur);
+        expect(lgBlur).toBeGreaterThan(mdBlur);
+        expect(xlBlur).toBeGreaterThan(lgBlur);
+    });
+});
+describe('Custom Shadows', () => {
+    it('has modal shadow', () => {
+        expect(customShadows.modal).toContain('0 0 31px');
+    });
+    it('has dropdown shadow', () => {
+        expect(customShadows.dropdown).toBeDefined();
+        expect(customShadows.dropdown).toContain('0 4px 6px');
+    });
+    it('has cardHover shadow', () => {
+        expect(customShadows.cardHover).toBeDefined();
+        expect(customShadows.cardHover).toContain('0 10px 15px');
+    });
+    it('has buttonHover shadow', () => {
+        expect(customShadows.buttonHover).toBeDefined();
+    });
+    it('has toast shadow', () => {
+        expect(customShadows.toast).toBeDefined();
+    });
+    it('has tooltip shadow', () => {
+        expect(customShadows.tooltip).toBeDefined();
+    });
+    it('has focusRing shadow with blue color', () => {
+        expect(customShadows.focusRing).toContain('0 0 0 3px');
+        expect(customShadows.focusRing).toContain('rgb(59 130 246');
+    });
+    it('has focusRingDanger shadow with red color', () => {
+        expect(customShadows.focusRingDanger).toContain('0 0 0 3px');
+        expect(customShadows.focusRingDanger).toContain('rgb(239 68 68');
+    });
+});
+describe('Combined Shadows Object', () => {
+    it('contains all boxShadow tokens', () => {
+        expect(shadows.sm).toBe(boxShadow.sm);
+        expect(shadows.DEFAULT).toBe(boxShadow.DEFAULT);
+        expect(shadows.md).toBe(boxShadow.md);
+        expect(shadows.lg).toBe(boxShadow.lg);
+        expect(shadows.none).toBe(boxShadow.none);
+    });
+    it('contains all customShadow tokens', () => {
+        expect(shadows.modal).toBe(customShadows.modal);
+        expect(shadows.dropdown).toBe(customShadows.dropdown);
+        expect(shadows.focusRing).toBe(customShadows.focusRing);
+    });
+});
+describe('Shadow Value Format', () => {
+    it('all shadows use rgb() color format', () => {
+        const allShadows = Object.values(boxShadow).filter(v => v !== 'none');
+        allShadows.forEach(shadow => {
+            expect(shadow).toContain('rgb(');
+        });
+    });
+    it('custom shadows use rgb() color format', () => {
+        Object.values(customShadows).forEach(shadow => {
+            expect(shadow).toContain('rgb(');
+        });
+    });
+});

package/dist/tokens/__tests__/spacing.test.js

@@ -50,17 +50,20 @@ describe('spacing tokens', () => {
     describe('gapScale', () => {
         describe('semantic', () => {
             it('provides semantic gap names with Tailwind classes', () => {
-                expect(gapScale.semantic.tight).toBe('gap-1');
+                expect(gapScale.semantic.minimal).toBe('gap-1');
                 expect(gapScale.semantic.compact).toBe('gap-1.5');
                 expect(gapScale.semantic.item).toBe('gap-2');
                 expect(gapScale.semantic.group).toBe('gap-3');
+                expect(gapScale.semantic.tight).toBe('gap-4');
                 expect(gapScale.semantic.content).toBe('gap-4');
+                expect(gapScale.semantic.standard).toBe('gap-6');
                 expect(gapScale.semantic.section).toBe('gap-6');
+                expect(gapScale.semantic.spacious).toBe('gap-8');
                 expect(gapScale.semantic.layout).toBe('gap-8');
                 expect(gapScale.semantic.page).toBe('gap-12');
             });
-            it('has 8 semantic gap values', () => {
-                expect(Object.keys(gapScale.semantic)).toHaveLength(8);
+            it('has 11 semantic gap values', () => {
+                expect(Object.keys(gapScale.semantic)).toHaveLength(11);
             });
         });
         describe('numeric', () => {
@@ -120,8 +123,8 @@ describe('spacing tokens', () => {
             expect(gapMap.standard).toBe('gap-6');
             expect(gapMap.spacious).toBe('gap-8');
         });
-        it('allows grid values to override semantic values with same key', () => {
-            // grid.tight (gap-4) should override semantic.tight (gap-1)
+        it('grid and semantic values with same key have same value', () => {
+            // Both semantic.tight and grid-tight map to gap-4
             expect(gapMap.tight).toBe('gap-4');
         });
         it('contains all expected keys', () => {
@@ -130,10 +133,10 @@ describe('spacing tokens', () => {
                 '0', '1', '1.5', '2', '3', '4', '6', '8', '12', '16',
                 // legacy
                 'none', 'xs', 'sm', 'md', 'lg', 'xl',
-                // semantic (excluding 'tight' which is overwritten by grid)
-                'compact', 'item', 'group', 'content', 'section', 'layout', 'page',
+                // semantic
+                'minimal', 'compact', 'item', 'group', 'tight', 'content', 'standard', 'section', 'spacious', 'layout', 'page',
                 // grid
-                'tight', 'standard', 'spacious',
+                'grid-tight', 'grid-standard', 'grid-spacious',
             ];
             for (const key of expectedKeys) {
                 expect(gapMap).toHaveProperty(key);

package/dist/tokens/__tests__/typography.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=typography.test.d.ts.map

package/dist/tokens/__tests__/typography.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography.test.d.ts","sourceRoot":"","sources":["../../../src/lib/tokens/__tests__/typography.test.ts"],"names":[],"mappings":""}

package/dist/tokens/__tests__/typography.test.js

@@ -0,0 +1,156 @@
+import { describe, it, expect } from 'vitest';
+import { typography } from '../typography';
+describe('Typography Headings', () => {
+    it('h1 has 2xl size and semibold weight', () => {
+        expect(typography.h1).toContain('text-2xl');
+        expect(typography.h1).toContain('font-semibold');
+        expect(typography.h1).toContain('text-gray-900');
+        expect(typography.h1).toContain('dark:text-white');
+    });
+    it('h2 has xl size and semibold weight', () => {
+        expect(typography.h2).toContain('text-xl');
+        expect(typography.h2).toContain('font-semibold');
+    });
+    it('h3 has lg size and semibold weight', () => {
+        expect(typography.h3).toContain('text-lg');
+        expect(typography.h3).toContain('font-semibold');
+    });
+    it('h4 has base size and semibold weight', () => {
+        expect(typography.h4).toContain('text-base');
+        expect(typography.h4).toContain('font-semibold');
+    });
+    it('h5 has sm size and semibold weight', () => {
+        expect(typography.h5).toContain('text-sm');
+        expect(typography.h5).toContain('font-semibold');
+    });
+    it('h6 has xs size and semibold weight', () => {
+        expect(typography.h6).toContain('text-xs');
+        expect(typography.h6).toContain('font-semibold');
+    });
+});
+describe('Typography Body Text', () => {
+    it('body has base size and relaxed leading', () => {
+        expect(typography.body).toContain('text-base');
+        expect(typography.body).toContain('leading-relaxed');
+        expect(typography.body).toContain('text-gray-900');
+    });
+    it('bodyMuted has muted gray color', () => {
+        expect(typography.bodyMuted).toContain('text-gray-500');
+        expect(typography.bodyMuted).toContain('dark:text-gray-400');
+    });
+    it('sm has sm size', () => {
+        expect(typography.sm).toContain('text-sm');
+        expect(typography.sm).toContain('text-gray-900');
+    });
+    it('smMuted has sm size and muted color', () => {
+        expect(typography.smMuted).toContain('text-sm');
+        expect(typography.smMuted).toContain('text-gray-500');
+    });
+    it('xs has xs size', () => {
+        expect(typography.xs).toContain('text-xs');
+        expect(typography.xs).toContain('text-gray-900');
+    });
+    it('xsMuted has xs size and muted color', () => {
+        expect(typography.xsMuted).toContain('text-xs');
+        expect(typography.xsMuted).toContain('text-gray-500');
+    });
+});
+describe('Typography Muted Colors', () => {
+    it('textMuted has muted gray color', () => {
+        expect(typography.textMuted).toContain('text-gray-500');
+        expect(typography.textMuted).toContain('dark:text-gray-400');
+    });
+    it('iconMuted matches textMuted', () => {
+        expect(typography.iconMuted).toBe(typography.textMuted);
+    });
+});
+describe('Typography Labels', () => {
+    it('label has sm size and medium weight', () => {
+        expect(typography.label).toContain('text-sm');
+        expect(typography.label).toContain('font-medium');
+        expect(typography.label).toContain('text-gray-900');
+    });
+    it('labelSpaced includes bottom margin', () => {
+        expect(typography.labelSpaced).toContain('mb-2');
+        expect(typography.labelSpaced).toContain('text-sm');
+        expect(typography.labelSpaced).toContain('font-medium');
+    });
+    it('helper has muted color', () => {
+        expect(typography.helper).toContain('text-sm');
+        expect(typography.helper).toContain('text-gray-500');
+    });
+    it('placeholder has lighter muted color', () => {
+        expect(typography.placeholder).toContain('text-sm');
+        expect(typography.placeholder).toContain('text-gray-400');
+    });
+});
+describe('Typography Status Text', () => {
+    it('error has red color', () => {
+        expect(typography.error).toContain('text-sm');
+        expect(typography.error).toContain('text-red-500');
+        expect(typography.error).toContain('dark:text-red-400');
+    });
+    it('success has green color', () => {
+        expect(typography.success).toContain('text-sm');
+        expect(typography.success).toContain('text-green-600');
+    });
+    it('warning has yellow color', () => {
+        expect(typography.warning).toContain('text-sm');
+        expect(typography.warning).toContain('text-yellow-600');
+    });
+    it('info has blue color', () => {
+        expect(typography.info).toContain('text-sm');
+        expect(typography.info).toContain('text-blue-600');
+    });
+});
+describe('Typography Links', () => {
+    it('link has blue color and hover underline', () => {
+        expect(typography.link).toContain('text-blue-700');
+        expect(typography.link).toContain('hover:underline');
+    });
+    it('linkMuted has gray color and hover state', () => {
+        expect(typography.linkMuted).toContain('text-gray-500');
+        expect(typography.linkMuted).toContain('hover:text-gray-700');
+    });
+});
+describe('Typography Special Cases', () => {
+    it('price has lg size and semibold weight', () => {
+        expect(typography.price).toContain('text-lg');
+        expect(typography.price).toContain('font-semibold');
+    });
+    it('priceLg has 2xl size and bold weight', () => {
+        expect(typography.priceLg).toContain('text-2xl');
+        expect(typography.priceLg).toContain('font-bold');
+    });
+    it('badge has xs size and medium weight', () => {
+        expect(typography.badge).toContain('text-xs');
+        expect(typography.badge).toContain('font-medium');
+    });
+    it('tableHeader has uppercase tracking', () => {
+        expect(typography.tableHeader).toContain('text-xs');
+        expect(typography.tableHeader).toContain('uppercase');
+        expect(typography.tableHeader).toContain('tracking-wider');
+    });
+    it('code has mono font', () => {
+        expect(typography.code).toContain('font-mono');
+        expect(typography.code).toContain('text-sm');
+    });
+    it('codeMuted has mono font and muted color', () => {
+        expect(typography.codeMuted).toContain('font-mono');
+        expect(typography.codeMuted).toContain('text-gray-500');
+    });
+});
+describe('Typography Token Type', () => {
+    it('all tokens are strings', () => {
+        const tokens = ['h1', 'h2', 'body', 'label', 'error', 'link', 'code'];
+        tokens.forEach(token => {
+            expect(typeof typography[token]).toBe('string');
+        });
+    });
+    it('all tokens have dark mode variants where applicable', () => {
+        const tokensWithDarkMode = ['h1', 'body', 'sm', 'label', 'error'];
+        tokensWithDarkMode.forEach(token => {
+            expect(typography[token]).toContain('dark:');
+        });
+    });
+});

package/dist/tokens/__tests__/z-index.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=z-index.test.d.ts.map

package/dist/tokens/__tests__/z-index.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"z-index.test.d.ts","sourceRoot":"","sources":["../../../src/lib/tokens/__tests__/z-index.test.ts"],"names":[],"mappings":""}

package/dist/tokens/__tests__/z-index.test.js

@@ -0,0 +1,121 @@
+import { describe, it, expect } from 'vitest';
+import { zIndex, layers } from '../z-index';
+describe('Z-Index Tokens', () => {
+    it('has auto value', () => {
+        expect(zIndex.auto).toBe('auto');
+    });
+    it('has base 0 value', () => {
+        expect(zIndex['0']).toBe('0');
+    });
+    it('has 10 value', () => {
+        expect(zIndex['10']).toBe('10');
+    });
+    it('has 20 value', () => {
+        expect(zIndex['20']).toBe('20');
+    });
+    it('has 30 value', () => {
+        expect(zIndex['30']).toBe('30');
+    });
+    it('has 40 value', () => {
+        expect(zIndex['40']).toBe('40');
+    });
+    it('has 50 value', () => {
+        expect(zIndex['50']).toBe('50');
+    });
+    it('has 51 value for modal content', () => {
+        expect(zIndex['51']).toBe('51');
+    });
+    it('has 60 value', () => {
+        expect(zIndex['60']).toBe('60');
+    });
+    it('has 70 value', () => {
+        expect(zIndex['70']).toBe('70');
+    });
+    it('has 100 value for critical', () => {
+        expect(zIndex['100']).toBe('100');
+    });
+});
+describe('Layer Aliases', () => {
+    it('base is 0', () => {
+        expect(layers.base).toBe('0');
+        expect(layers.base).toBe(zIndex['0']);
+    });
+    it('sticky is 10', () => {
+        expect(layers.sticky).toBe('10');
+        expect(layers.sticky).toBe(zIndex['10']);
+    });
+    it('navigation is 20', () => {
+        expect(layers.navigation).toBe('20');
+        expect(layers.navigation).toBe(zIndex['20']);
+    });
+    it('dropdown is 30', () => {
+        expect(layers.dropdown).toBe('30');
+        expect(layers.dropdown).toBe(zIndex['30']);
+    });
+    it('overlay is 40', () => {
+        expect(layers.overlay).toBe('40');
+        expect(layers.overlay).toBe(zIndex['40']);
+    });
+    it('modal is 50', () => {
+        expect(layers.modal).toBe('50');
+        expect(layers.modal).toBe(zIndex['50']);
+    });
+    it('modalContent is 51 (above modal)', () => {
+        expect(layers.modalContent).toBe('51');
+        expect(layers.modalContent).toBe(zIndex['51']);
+    });
+    it('toast is 60', () => {
+        expect(layers.toast).toBe('60');
+        expect(layers.toast).toBe(zIndex['60']);
+    });
+    it('tooltip is 70', () => {
+        expect(layers.tooltip).toBe('70');
+        expect(layers.tooltip).toBe(zIndex['70']);
+    });
+    it('critical is 100', () => {
+        expect(layers.critical).toBe('100');
+        expect(layers.critical).toBe(zIndex['100']);
+    });
+});
+describe('Layer Stacking Order', () => {
+    it('layers stack in correct order', () => {
+        const order = [
+            parseInt(layers.base),
+            parseInt(layers.sticky),
+            parseInt(layers.navigation),
+            parseInt(layers.dropdown),
+            parseInt(layers.overlay),
+            parseInt(layers.modal),
+            parseInt(layers.modalContent),
+            parseInt(layers.toast),
+            parseInt(layers.tooltip),
+            parseInt(layers.critical),
+        ];
+        for (let i = 0; i < order.length - 1; i++) {
+            expect(order[i + 1]).toBeGreaterThanOrEqual(order[i]);
+        }
+    });
+    it('modal content is above modal', () => {
+        expect(parseInt(layers.modalContent)).toBeGreaterThan(parseInt(layers.modal));
+    });
+    it('toast is above overlay', () => {
+        expect(parseInt(layers.toast)).toBeGreaterThan(parseInt(layers.overlay));
+    });
+    it('tooltip is above toast', () => {
+        expect(parseInt(layers.tooltip)).toBeGreaterThan(parseInt(layers.toast));
+    });
+    it('critical is highest', () => {
+        expect(parseInt(layers.critical)).toBeGreaterThanOrEqual(parseInt(layers.tooltip));
+    });
+});
+describe('Z-Index Semantic Meaning', () => {
+    it('dropdowns appear above navigation', () => {
+        expect(parseInt(layers.dropdown)).toBeGreaterThan(parseInt(layers.navigation));
+    });
+    it('overlays appear above dropdowns', () => {
+        expect(parseInt(layers.overlay)).toBeGreaterThan(parseInt(layers.dropdown));
+    });
+    it('modals appear above overlays', () => {
+        expect(parseInt(layers.modal)).toBeGreaterThan(parseInt(layers.overlay));
+    });
+});