@finsweet/webflow-apps-utils 1.0.8 → 1.0.9

package/dist/ui/components/notification/Notification.stories.svelte

@@ -69,7 +69,6 @@
 	});
 </script>
 
-<!-- Basic Variants -->
 <Story
 	name="Warning"
 	args={{
@@ -109,7 +108,6 @@
 	}}
 />
 
-<!-- Content Variations -->
 <Story
 	name="Message Only"
 	args={{
@@ -126,7 +124,6 @@
 	}}
 />
 
-<!-- Interactive Features -->
 <Story
 	name="With Link"
 	args={{
@@ -148,7 +145,6 @@
 	}}
 />
 
-<!-- Customization -->
 <Story
 	name="Custom Color"
 	args={{
@@ -179,7 +175,6 @@
 	}}
 />
 
-<!-- Rich Text Support -->
 <Story
 	name="Rich Text Content"
 	args={{
@@ -191,7 +186,6 @@
 	}}
 />
 
-<!-- Complex Content -->
 <Story
 	name="Long Content"
 	args={{
@@ -204,7 +198,6 @@
 	}}
 />
 
-<!-- Accessibility Test -->
 <Story
 	name="Accessibility Test"
 	args={{
@@ -227,7 +220,6 @@
 	}}
 />
 
-<!-- Custom Actions Info -->
 <Story
 	name="Custom Actions Support"
 	args={{

package/dist/ui/components/section/Section.stories.svelte

@@ -68,7 +68,6 @@
 	};
 </script>
 
-<!-- Basic stories -->
 <Story
 	name="Default"
 	args={{

package/dist/ui/components/text/README.md

@@ -19,10 +19,8 @@ A versatile and modern text component built with Svelte 5 that provides comprehe
 The popup system uses the exact same design and layout as the original popup component:
 
 ```svelte
-<!-- Default popup (matches original exactly) -->
 <Text label="Remove item" popup={{}} on:popupAction={handleRemove} />
 
-<!-- Custom popup -->
 <Text
 	label="Delete item"
 	popup={{

package/dist/ui/components/text/Text.stories.svelte

@@ -80,7 +80,6 @@
 	});
 </script>
 
-<!-- Basic Examples -->
 <Story
 	name="Default"
 	args={{
@@ -112,7 +111,6 @@
 	}}
 />
 
-<!-- Alignment and Ellipsis -->
 <Story name="Text Alignment & Ellipsis">
 	<div
 		style="width: 300px; border: 1px solid #ddd; padding: 16px; display: flex; flex-direction: column; gap: 12px;"
@@ -149,7 +147,6 @@
 	</div>
 </Story>
 
-<!-- Tooltip Examples -->
 <Story
 	name="With Tooltip"
 	args={{
@@ -222,7 +219,6 @@
 	</div>
 </Story>
 
-<!-- Popup Example -->
 <Story
 	name="With Popup Action"
 	args={{
@@ -236,7 +232,6 @@
 	}}
 />
 
-<!-- Styling Examples -->
 <Story name="Styling Options">
 	<div style="display: flex; flex-direction: column; gap: 8px;">
 		<Text label="Large bold text" fontSize="large" fontWeight="bold" />
@@ -246,7 +241,6 @@
 	</div>
 </Story>
 
-<!-- Complex Example -->
 <Story
 	name="Complex Example"
 	args={{

package/dist/ui/components/text/Text.svelte

@@ -305,7 +305,6 @@
 
 {#if label || tooltip || icon || children}
 	{#if !hasPopup && shouldShowTooltipOnText}
-		<!-- Simple text with tooltip on text -->
 		<Tooltip {...tooltip}>
 			{#snippet target()}
 				<div
@@ -320,7 +319,6 @@
 				>
 					{#if label?.trim() || icon || children}
 						{#if ellipsisOnWidth && (icon || loading)}
-							<!-- handling ellipsis with icons -->
 							<div
 								class="text-with-icon"
 								style="display: flex; align-items: center; gap: 4px; width: {ellipsisOnWidth}; justify-content: {textAlign ===
@@ -356,7 +354,6 @@
 								</div>
 							</div>
 						{:else}
-							<!-- Normal text handling -->
 							<div class={textClasses()} style={textStyles()}>
 								{#if icon || loading}
 									{#if loading}
@@ -392,7 +389,6 @@
 			{/snippet}
 		</Tooltip>
 	{:else if !hasPopup && shouldShowTooltipOnIcon}
-		<!-- Simple text with tooltip on icon -->
 		<div
 			class={labelClasses()}
 			data-component="Text"
@@ -405,7 +401,6 @@
 		>
 			{#if label?.trim() || icon || children}
 				{#if ellipsisOnWidth && (icon || loading)}
-					<!-- handling ellipsis with icons -->
 					<div
 						class="text-with-icon"
 						style="display: flex; align-items: center; gap: 4px; width: {ellipsisOnWidth}; justify-content: {textAlign ===
@@ -439,7 +434,6 @@
 						</div>
 					</div>
 				{:else}
-					<!-- Normal text handling -->
 					<div class={textClasses()} style={textStyles()}>
 						{#if icon || loading}
 							{#if loading}
@@ -471,7 +465,6 @@
 			{/if}
 		</div>
 	{:else if !hasPopup}
-		<!-- Simple text without tooltip -->
 		<div
 			class={labelClasses()}
 			data-component="Text"
@@ -484,7 +477,6 @@
 		>
 			{#if label?.trim() || icon || children}
 				{#if ellipsisOnWidth && (icon || loading)}
-					<!-- handling ellipsis with icons -->
 					<div
 						class="text-with-icon"
 						style="display: flex; align-items: center; gap: 4px; width: {ellipsisOnWidth}; justify-content: {textAlign ===
@@ -514,7 +506,6 @@
 						</div>
 					</div>
 				{:else}
-					<!-- Normal text handling -->
 					<div class={textClasses()} style={textStyles()}>
 						{#if icon || loading}
 							{#if loading}
@@ -542,7 +533,6 @@
 			{/if}
 		</div>
 	{:else}
-		<!-- Text with popup functionality -->
 		<div
 			class="label-popup {disabled ? 'disabled' : ''}"
 			onclick={handlePopupToggle}
@@ -564,7 +554,6 @@
 				{#snippet target()}
 					<span class="dropdown-label item {popupConfig.active ? 'active' : ''}">
 						{#if shouldShowTooltipOnText}
-							<!-- Text with popup and tooltip on text -->
 							<Tooltip {...tooltip}>
 								{#snippet target()}
 									<div
@@ -579,7 +568,6 @@
 									>
 										{#if label?.trim() || icon || children}
 											{#if ellipsisOnWidth && (icon || loading)}
-												<!-- handling ellipsis with icons -->
 												<div
 													class="text-with-icon"
 													style="display: flex; align-items: center; gap: 4px; width: {ellipsisOnWidth}; justify-content: {textAlign ===
@@ -615,7 +603,6 @@
 													</div>
 												</div>
 											{:else}
-												<!-- Normal text handling -->
 												<div class={textClasses()} style={textStyles()}>
 													{#if icon || loading}
 														{#if loading}
@@ -651,7 +638,6 @@
 								{/snippet}
 							</Tooltip>
 						{:else if shouldShowTooltipOnIcon}
-							<!-- Text with popup and tooltip on icon -->
 							<div
 								class={labelClasses()}
 								data-component="Text"
@@ -664,7 +650,6 @@
 							>
 								{#if label?.trim() || icon || children}
 									{#if ellipsisOnWidth && (icon || loading)}
-										<!-- handling ellipsis with icons -->
 										<div
 											class="text-with-icon"
 											style="display: flex; align-items: center; gap: 4px; width: {ellipsisOnWidth}; justify-content: {textAlign ===
@@ -698,7 +683,6 @@
 											</div>
 										</div>
 									{:else}
-										<!-- Normal text handling -->
 										<div class={textClasses()} style={textStyles()}>
 											{#if icon || loading}
 												{#if loading}
@@ -730,7 +714,6 @@
 								{/if}
 							</div>
 						{:else}
-							<!-- Text with popup without tooltip -->
 							<div
 								class={labelClasses()}
 								data-component="Text"
@@ -743,7 +726,6 @@
 							>
 								{#if label?.trim() || icon || children}
 									{#if ellipsisOnWidth && (icon || loading)}
-										<!-- handling ellipsis with icons -->
 										<div
 											class="text-with-icon"
 											style="display: flex; align-items: center; gap: 4px; width: {ellipsisOnWidth}; justify-content: {textAlign ===
@@ -773,7 +755,6 @@
 											</div>
 										</div>
 									{:else}
-										<!-- Normal text handling -->
 										<div class={textClasses()} style={textStyles()}>
 											{#if icon || loading}
 												{#if loading}

package/dist/ui/components/tooltip/Tooltip.svelte

@@ -356,7 +356,6 @@
 	{#if target}
 		{@render target()}
 	{:else}
-		<!-- Default target for Storybook compatibility -->
 		<button
 			style="
 				padding: 4px 8px; 
@@ -411,12 +410,17 @@
 		display: none;
 		top: 0;
 		left: 0;
-		z-index: 99999999999;
 		border-radius: 4px;
+		z-index: 99999999999;
+		border-radius: var(--border-radius, 4px);
 		background: var(--background3);
 		box-shadow:
-			0px 0.5px 1px 0px #000,
-			0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.12) inset;
+			0 12px 24px 8px #0000004d,
+			0 8px 16px 4px #0000004d,
+			0 4px 8px 2px #0000,
+			0 2px 6px #00000014,
+			0 -0.5px 0.5px #0000 inset,
+			0 0.5px 0.5px #ffffff57 inset;
 		color: var(--text2);
 		font-family: Inter;
 		line-height: 120%;
@@ -431,6 +435,7 @@
 	.content-wrapper {
 		flex: 1;
 		min-width: 0;
+		border-radius: var(--border-radius, 4px);
 		z-index: 3;
 		background: inherit;
 	}

package/dist/ui/icons/FinsweetLogoOutlineIcon.svelte

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
+	<g clip-path="url(#clip0_5665_3736)">
+		<path
+			d="M12.7839 6.16037V4.88037H8.15991V12.0924H9.79591V9.30037H12.1599V8.06837H9.79591V6.16037H12.7839Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M3.89982 5.37971V7.52371C3.90035 7.58096 3.88959 7.63776 3.86817 7.69086C3.84674 7.74396 3.81507 7.79232 3.77495 7.83318C3.73484 7.87404 3.68707 7.9066 3.63437 7.92899C3.58167 7.95139 3.52508 7.96318 3.46782 7.96371H3.21582V9.01171H3.46382C3.52108 9.01171 3.57777 9.02298 3.63067 9.0449C3.68357 9.06681 3.73163 9.09892 3.77212 9.13941C3.8126 9.17989 3.84472 9.22796 3.86663 9.28086C3.88854 9.33376 3.89982 9.39045 3.89982 9.44771V11.5677C3.89982 12.6677 4.47982 13.2677 5.53582 13.2677H6.51981V12.0677H5.92382C5.86826 12.0679 5.81299 12.0598 5.75982 12.0437C5.51182 11.9917 5.35982 11.7917 5.35982 11.4437V9.65171C5.35982 9.17171 5.35982 8.69571 4.73582 8.47571C5.35982 8.25171 5.35982 7.69971 5.35982 7.24771V5.49971C5.34084 5.36798 5.37117 5.23389 5.44499 5.12316C5.51881 5.01242 5.63092 4.93285 5.75982 4.89971C5.81592 4.88498 5.87383 4.87824 5.93182 4.87971H6.53181V3.69971H5.53582C4.46782 3.69971 3.89982 4.29971 3.89982 5.37971Z"
+			fill="currentColor"
+		/>
+	</g>
+	<defs>
+		<clipPath id="clip0_5665_3736">
+			<rect y="0.5" width="16" height="16" rx="1.33333" fill="currentColor" />
+		</clipPath>
+	</defs>
+</svg>

package/dist/ui/icons/FinsweetLogoOutlineIcon.svelte.d.ts

@@ -0,0 +1,26 @@
+export default FinsweetLogoOutlineIcon;
+type FinsweetLogoOutlineIcon = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const FinsweetLogoOutlineIcon: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/ui/icons/TriangleDownIconToggle.svelte

@@ -1,4 +1,3 @@
-<!-- TriangleDownIconToggle.svelte -->
 <script lang="ts">
 	export let rotate = false;
 </script>

package/dist/ui/icons/index.d.ts

@@ -46,6 +46,7 @@ import FileUploadIcon from './FileUploadIcon.svelte';
 import FilterIcon from './FilterIcon.svelte';
 import FinsweetLibraryIcon from './FinsweetLibraryIcon.svelte';
 import FinsweetLogoIcon from './FinsweetLogoIcon.svelte';
+import FinsweetLogoOutlineIcon from './FinsweetLogoOutlineIcon.svelte';
 import FolderIcon from './FolderIcon.svelte';
 import FolderOutlinedIcon from './FolderOutlinedIcon.svelte';
 import FolderPlusIcon from './FolderPlusIcon.svelte';
@@ -118,4 +119,4 @@ import WizedLogoIcon from './WizedLogoIcon.svelte';
 import XL from './XL.svelte';
 import XXL from './XXL.svelte';
 import XXXL from './XXXL.svelte';
-export { AccordionDownArrow, AccordionUpArrow, AccountIcon, ArrowIcon, BackIcon, BodyIcon, BookmarkIcon, BoxAddIcon, BrushIcon, BuilderEditIcon, BuilderIcon, CheckboxCheckedIcon, CheckCircleIcon, CheckCircleOutlinedIcon, CheckIcon, ChevronIcon, ChevronRightIcon, CircleIcon, CloseCircleIcon, CloseIcon, CMSIcon, CodeIcon, ComponentsIcon, CookieIcon, CopyIcon, CrossIcon, DeleteIcon, DeleteOutlinedIcon, Desktop, DesktopWithStar, DivBlock, DOMElement, EditIcon, ExpertIcon, EyeCancelIcon, EyeIcon, FavouriteIcon, FileUploadIcon, FilterIcon, FinsweetLibraryIcon, FinsweetLogoIcon, FolderIcon, FolderOutlinedIcon, FolderPlusIcon, FreeComponentIcon, GlobeIcon, HandPointUpIcon, HeartIcon, HeartIconOutlined, HelpAltIcon, HelpIcon, HomeIcon, InfoIcon, LineChartIcon, ListIcon, LockIcon, MessageIcon, MobileLandscape, MobilePortrait, NavigatorIcon, OpenBookIcon, PageDraftIcon, PageIcon, PageLockedIcon, PageOutlinedIcon, PageSectionIcon, Pencil, PencilOutlinedIcon, PinIcon, PlayIcon, PlusIcon, PreviewEyeIcon, ProfileIcon, PublishCancelIcon, PublishIcon, RefreshIcon, RepairIcon, SaveIcon, SearchIcon, SelectIcon, SettingsIcon, SidebarToggleIcon, SliderAppIcon, SquareCheckIcon, StarIcon, StarOutlinedIcon, StaticContentIcon, SubtractIcon, TableAppIcon, Tablet, TabletPreview, TabNewIcon, TabsIcon, ThreeDotsIcon, TimesIcon, TooltipInfoCircleFilled, ToolTipInfoCircleIcon, TooltipInfoSquaredIcon, TriangleDownIcon, TriangleDownIconToggle, UndoIcon, UploadFileIcon, WarningCircleIcon, WarningCircleOutlineIcon, WarningTriangleIcon, WarningTriangleOutlineIcon, WebflowComponentIcon, WebflowComponentOutlinedIcon, WebflowInsightsIcon, WizedLogoIcon, XL, XXL, XXXL };
+export { AccordionDownArrow, AccordionUpArrow, AccountIcon, ArrowIcon, BackIcon, BodyIcon, BookmarkIcon, BoxAddIcon, BrushIcon, BuilderEditIcon, BuilderIcon, CheckboxCheckedIcon, CheckCircleIcon, CheckCircleOutlinedIcon, CheckIcon, ChevronIcon, ChevronRightIcon, CircleIcon, CloseCircleIcon, CloseIcon, CMSIcon, CodeIcon, ComponentsIcon, CookieIcon, CopyIcon, CrossIcon, DeleteIcon, DeleteOutlinedIcon, Desktop, DesktopWithStar, DivBlock, DOMElement, EditIcon, ExpertIcon, EyeCancelIcon, EyeIcon, FavouriteIcon, FileUploadIcon, FilterIcon, FinsweetLibraryIcon, FinsweetLogoIcon, FinsweetLogoOutlineIcon, FolderIcon, FolderOutlinedIcon, FolderPlusIcon, FreeComponentIcon, GlobeIcon, HandPointUpIcon, HeartIcon, HeartIconOutlined, HelpAltIcon, HelpIcon, HomeIcon, InfoIcon, LineChartIcon, ListIcon, LockIcon, MessageIcon, MobileLandscape, MobilePortrait, NavigatorIcon, OpenBookIcon, PageDraftIcon, PageIcon, PageLockedIcon, PageOutlinedIcon, PageSectionIcon, Pencil, PencilOutlinedIcon, PinIcon, PlayIcon, PlusIcon, PreviewEyeIcon, ProfileIcon, PublishCancelIcon, PublishIcon, RefreshIcon, RepairIcon, SaveIcon, SearchIcon, SelectIcon, SettingsIcon, SidebarToggleIcon, SliderAppIcon, SquareCheckIcon, StarIcon, StarOutlinedIcon, StaticContentIcon, SubtractIcon, TableAppIcon, Tablet, TabletPreview, TabNewIcon, TabsIcon, ThreeDotsIcon, TimesIcon, TooltipInfoCircleFilled, ToolTipInfoCircleIcon, TooltipInfoSquaredIcon, TriangleDownIcon, TriangleDownIconToggle, UndoIcon, UploadFileIcon, WarningCircleIcon, WarningCircleOutlineIcon, WarningTriangleIcon, WarningTriangleOutlineIcon, WebflowComponentIcon, WebflowComponentOutlinedIcon, WebflowInsightsIcon, WizedLogoIcon, XL, XXL, XXXL };

package/dist/ui/icons/index.js

@@ -46,6 +46,7 @@ import FileUploadIcon from './FileUploadIcon.svelte';
 import FilterIcon from './FilterIcon.svelte';
 import FinsweetLibraryIcon from './FinsweetLibraryIcon.svelte';
 import FinsweetLogoIcon from './FinsweetLogoIcon.svelte';
+import FinsweetLogoOutlineIcon from './FinsweetLogoOutlineIcon.svelte';
 import FolderIcon from './FolderIcon.svelte';
 import FolderOutlinedIcon from './FolderOutlinedIcon.svelte';
 import FolderPlusIcon from './FolderPlusIcon.svelte';
@@ -118,4 +119,4 @@ import WizedLogoIcon from './WizedLogoIcon.svelte';
 import XL from './XL.svelte';
 import XXL from './XXL.svelte';
 import XXXL from './XXXL.svelte';
-export { AccordionDownArrow, AccordionUpArrow, AccountIcon, ArrowIcon, BackIcon, BodyIcon, BookmarkIcon, BoxAddIcon, BrushIcon, BuilderEditIcon, BuilderIcon, CheckboxCheckedIcon, CheckCircleIcon, CheckCircleOutlinedIcon, CheckIcon, ChevronIcon, ChevronRightIcon, CircleIcon, CloseCircleIcon, CloseIcon, CMSIcon, CodeIcon, ComponentsIcon, CookieIcon, CopyIcon, CrossIcon, DeleteIcon, DeleteOutlinedIcon, Desktop, DesktopWithStar, DivBlock, DOMElement, EditIcon, ExpertIcon, EyeCancelIcon, EyeIcon, FavouriteIcon, FileUploadIcon, FilterIcon, FinsweetLibraryIcon, FinsweetLogoIcon, FolderIcon, FolderOutlinedIcon, FolderPlusIcon, FreeComponentIcon, GlobeIcon, HandPointUpIcon, HeartIcon, HeartIconOutlined, HelpAltIcon, HelpIcon, HomeIcon, InfoIcon, LineChartIcon, ListIcon, LockIcon, MessageIcon, MobileLandscape, MobilePortrait, NavigatorIcon, OpenBookIcon, PageDraftIcon, PageIcon, PageLockedIcon, PageOutlinedIcon, PageSectionIcon, Pencil, PencilOutlinedIcon, PinIcon, PlayIcon, PlusIcon, PreviewEyeIcon, ProfileIcon, PublishCancelIcon, PublishIcon, RefreshIcon, RepairIcon, SaveIcon, SearchIcon, SelectIcon, SettingsIcon, SidebarToggleIcon, SliderAppIcon, SquareCheckIcon, StarIcon, StarOutlinedIcon, StaticContentIcon, SubtractIcon, TableAppIcon, Tablet, TabletPreview, TabNewIcon, TabsIcon, ThreeDotsIcon, TimesIcon, TooltipInfoCircleFilled, ToolTipInfoCircleIcon, TooltipInfoSquaredIcon, TriangleDownIcon, TriangleDownIconToggle, UndoIcon, UploadFileIcon, WarningCircleIcon, WarningCircleOutlineIcon, WarningTriangleIcon, WarningTriangleOutlineIcon, WebflowComponentIcon, WebflowComponentOutlinedIcon, WebflowInsightsIcon, WizedLogoIcon, XL, XXL, XXXL };
+export { AccordionDownArrow, AccordionUpArrow, AccountIcon, ArrowIcon, BackIcon, BodyIcon, BookmarkIcon, BoxAddIcon, BrushIcon, BuilderEditIcon, BuilderIcon, CheckboxCheckedIcon, CheckCircleIcon, CheckCircleOutlinedIcon, CheckIcon, ChevronIcon, ChevronRightIcon, CircleIcon, CloseCircleIcon, CloseIcon, CMSIcon, CodeIcon, ComponentsIcon, CookieIcon, CopyIcon, CrossIcon, DeleteIcon, DeleteOutlinedIcon, Desktop, DesktopWithStar, DivBlock, DOMElement, EditIcon, ExpertIcon, EyeCancelIcon, EyeIcon, FavouriteIcon, FileUploadIcon, FilterIcon, FinsweetLibraryIcon, FinsweetLogoIcon, FinsweetLogoOutlineIcon, FolderIcon, FolderOutlinedIcon, FolderPlusIcon, FreeComponentIcon, GlobeIcon, HandPointUpIcon, HeartIcon, HeartIconOutlined, HelpAltIcon, HelpIcon, HomeIcon, InfoIcon, LineChartIcon, ListIcon, LockIcon, MessageIcon, MobileLandscape, MobilePortrait, NavigatorIcon, OpenBookIcon, PageDraftIcon, PageIcon, PageLockedIcon, PageOutlinedIcon, PageSectionIcon, Pencil, PencilOutlinedIcon, PinIcon, PlayIcon, PlusIcon, PreviewEyeIcon, ProfileIcon, PublishCancelIcon, PublishIcon, RefreshIcon, RepairIcon, SaveIcon, SearchIcon, SelectIcon, SettingsIcon, SidebarToggleIcon, SliderAppIcon, SquareCheckIcon, StarIcon, StarOutlinedIcon, StaticContentIcon, SubtractIcon, TableAppIcon, Tablet, TabletPreview, TabNewIcon, TabsIcon, ThreeDotsIcon, TimesIcon, TooltipInfoCircleFilled, ToolTipInfoCircleIcon, TooltipInfoSquaredIcon, TriangleDownIcon, TriangleDownIconToggle, UndoIcon, UploadFileIcon, WarningCircleIcon, WarningCircleOutlineIcon, WarningTriangleIcon, WarningTriangleOutlineIcon, WebflowComponentIcon, WebflowComponentOutlinedIcon, WebflowInsightsIcon, WizedLogoIcon, XL, XXL, XXXL };

package/dist/ui/index.css

@@ -10,7 +10,7 @@
 	--background1: #292929;
 	--black: #000000;
 	--background2: #353535;
-	--background3: #404040;
+	--background3: #383838;
 	--background-background-3: #363636;
 	--background4: #373737;
 	--background5: #404040;

package/dist/ui/providers/GlobalProviderDemo.svelte

@@ -57,12 +57,10 @@
 </div>
 
 {#snippet DemoContent()}
-	<!-- Get contexts and data reactively -->
 	{@const appContext = useAppContext<DemoConfigType>()}
 	{@const formContext = useFormContext()}
 	{@const configuratorContext = useConfiguratorContext<DemoConfigType>()}
 
-	<!-- Force reactive updates with trigger -->
 	{#key refreshTrigger}
 		{@const appData = appContext.get()}
 		{@const formData = formContext.get()}

package/dist/ui/router/Router.stories.js

@@ -345,7 +345,7 @@ interface HistoryEntry {
 ### Complete Application Setup
 
 \`\`\`typescript
-<!-- App.svelte -->
+
 <script lang="ts">
   import { onMount } from 'svelte';
   import { createRouter, RouterProvider, Route, Link } from '@finsweet/webflow-apps-utils';
@@ -379,7 +379,7 @@ interface HistoryEntry {
 <RouterProvider {router}>
   {#snippet children({ router, currentRoute, isNavigating })}
     <div class="app">
-      <!-- Navigation -->
+      
       <nav class="navbar">
         <div class="nav-brand">
           <Link to="/">My App</Link>
@@ -391,17 +391,17 @@ interface HistoryEntry {
         </ul>
       </nav>
 
-      <!-- Loading indicator -->
+      
       {#if isNavigating}
         <div class="loading-bar"></div>
       {/if}
 
-      <!-- Page title -->
+      
       <title>{currentRoute?.meta?.title || 'My App'}</title>
 
-      <!-- Main content -->
+      
       <main class="main-content">
-        <!-- Routes -->
+        
         <Route path="/" component={HomePage} />
         <Route path="/about" component={AboutPage} />
         <Route path="/users/:id">
@@ -421,7 +421,7 @@ interface HistoryEntry {
 ### Using Hooks in Components
 
 \`\`\`typescript
-<!-- UserProfile.svelte -->
+
 <script lang="ts">
   import { useParams, useNavigate, useSearchParams } from '@finsweet/webflow-apps-utils';
 

package/dist/ui/router/examples/RouterExample.svelte

@@ -36,7 +36,6 @@
 	<RouterProvider {router}>
 		{#snippet children({ router, currentRoute, currentLocation, isNavigating })}
 			<div class="app-layout">
-				<!-- Navigation -->
 				<nav class="navigation">
 					<div class="nav-brand">
 						<h3>My App</h3>
@@ -57,7 +56,6 @@
 					</ul>
 				</nav>
 
-				<!-- Loading indicator -->
 				{#if isNavigating}
 					<div class="loading-indicator">
 						<div class="spinner"></div>
@@ -65,7 +63,6 @@
 					</div>
 				{/if}
 
-				<!-- Route information display -->
 				<div class="route-info">
 					<strong>Current Route:</strong>
 					{currentLocation?.pathname || 'None'}<br />
@@ -77,9 +74,7 @@
 					{currentLocation?.search || 'None'}
 				</div>
 
-				<!-- Main content area -->
 				<main class="main-content">
-					<!-- Home Route -->
 					<Route path="/">
 						{#snippet children({ params, location, router, isActive })}
 							{#if isActive}
@@ -88,7 +83,6 @@
 						{/snippet}
 					</Route>
 
-					<!-- About Route (with optional section parameter) -->
 					<Route path="/about">
 						{#snippet children({ params, location, router, isActive })}
 							{#if isActive}
@@ -97,7 +91,6 @@
 						{/snippet}
 					</Route>
 
-					<!-- About with section parameter -->
 					<Route path="/about/:section">
 						{#snippet children({ params, location, router, isActive })}
 							{#if isActive}
@@ -106,7 +99,6 @@
 						{/snippet}
 					</Route>
 
-					<!-- Fallback route (404) -->
 					<Route path="*" exact={false}>
 						{#snippet children({ params, location, router, isActive })}
 							{#if isActive && !router.isActive('/') && !router.isActive('/about')}
@@ -116,7 +108,6 @@
 					</Route>
 				</main>
 
-				<!-- Router controls -->
 				<div class="router-controls">
 					<h4>Router Controls</h4>
 					<div class="controls-grid">

package/dist/ui/router/examples/pages/AboutPage.svelte

@@ -74,7 +74,6 @@
 
 <div class="about-page">
 	{#if section && currentSection}
-		<!-- Section-specific content -->
 		<div class="section-header">
 			<button class="back-button" onclick={() => router.navigate('/about')}>
 				← Back to About
@@ -158,7 +157,6 @@
 			{/if}
 		</div>
 
-		<!-- Navigation to other sections -->
 		<div class="section-navigation">
 			<h3>Explore More</h3>
 			<div class="nav-buttons">
@@ -172,7 +170,6 @@
 			</div>
 		</div>
 	{:else}
-		<!-- Main about page -->
 		<div class="main-about">
 			<header class="about-header">
 				<h1>About Our Company</h1>
@@ -232,7 +229,6 @@
 		</div>
 	{/if}
 
-	<!-- Debug information -->
 	<div class="debug-section">
 		<h3>Route Debug Information</h3>
 		<div class="debug-info">

package/dist/ui/router/providers/Link.svelte

@@ -106,7 +106,6 @@
 	});
 </script>
 
-<!-- Render as anchor tag by default -->
 {#if element === 'a'}
 	<a
 		{href}
@@ -122,7 +121,6 @@
 		{/if}
 	</a>
 {:else if element === 'button'}
-	<!-- Render as button -->
 	<button
 		type="button"
 		class={className}

package/dist/ui/router/providers/Route.svelte

@@ -64,14 +64,11 @@
 	});
 </script>
 
-<!-- Render content only if route is active -->
 {#if isActive}
 	{#if component}
-		<!-- Render provided component with route props -->
 		{@const Component = component}
 		<Component params={routeParams} location={currentLocation} {router} />
 	{:else if children}
-		<!-- Render children snippet with route data -->
 		{@render children({
 			params: routeParams,
 			location: currentLocation,