@finsweet/webflow-apps-utils 1.0.7 → 1.0.9

package/dist/ui/components/modal/Example.svelte

@@ -59,7 +59,6 @@
 		</div>
 	</div>
 
-	<!-- Basic Modal -->
 	<Modal
 		open={basicModalOpen}
 		width="400px"
@@ -89,7 +88,6 @@
 		</div>
 	</Modal>
 
-	<!-- Loading Modal -->
 	<Modal
 		open={loadingModalOpen}
 		width="400px"
@@ -112,7 +110,6 @@
 		</p>
 	</Modal>
 
-	<!-- No Header Modal -->
 	<Modal
 		open={noHeaderModalOpen}
 		width="400px"
@@ -131,7 +128,6 @@
 		</div>
 	</Modal>
 
-	<!-- Prevent Close Modal -->
 	<Modal
 		open={preventCloseModalOpen}
 		width="400px"
@@ -162,7 +158,6 @@
 		</p>
 	</Modal>
 
-	<!-- Custom Styled Modal -->
 	<Modal
 		open={customStyledModalOpen}
 		width="400px"
@@ -188,7 +183,6 @@
 		</div>
 	</Modal>
 
-	<!-- Long Content Modal -->
 	<Modal
 		open={longContentModalOpen}
 		width="400px"
@@ -222,7 +216,6 @@
 		</div>
 	</Modal>
 
-	<!-- Custom Footer Modal -->
 	<Modal
 		open={customFooterModalOpen}
 		width="400px"

package/dist/ui/components/modal/Modal.stories.svelte

@@ -1,4 +1,3 @@
-<!-- eslint-disable svelte/no-useless-children-snippet -->
 <script module>
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -12,7 +11,6 @@
 	});
 </script>
 
-<!-- Interactive Examples -->
 <Story name="Examples">
 	<Example />
 </Story>

package/dist/ui/components/modal/Modal.svelte

@@ -340,7 +340,7 @@
 			style={modalStyles}
 			onclick={(e) => e.stopPropagation()}
 			onkeydown={trapFocus}
-			role="document"
+			role="banner"
 		>
 			{#if loading}
 				<LoadingScreen

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/index.d.ts

@@ -1,2 +1,6 @@
 export * from './components';
 export * from './icons';
+export * from './utils';
+export * from './stores';
+export * from './providers';
+export * from './router';

package/dist/ui/index.js

@@ -1,2 +1,6 @@
 export * from './components';
 export * from './icons';
+export * from './utils';
+export * from './stores';
+export * from './providers';
+export * from './router';

package/dist/{providers → ui/providers}/GlobalProvider.stories.js

@@ -34,7 +34,7 @@ The \`GlobalProvider\` is a comprehensive context management system built on Sve
 
 \`\`\`svelte
 <script lang="ts">
-	import { GlobalProvider } from './';
+	import { GlobalProvider } from '../../providers';
 
 	const initialContexts = {
 		app: {
@@ -66,7 +66,7 @@ The \`GlobalProvider\` automatically creates these default contexts:
 
 \`\`\`svelte
 <script lang="ts">
-	import { useAppContext, useFormContext, useDataContext } from './';
+	import { useAppContext, useFormContext, useDataContext } from '../../providers';
 
 	const appContext = useAppContext();
 	const formContext = useFormContext();
@@ -141,7 +141,7 @@ The \`GlobalProvider\` includes sophisticated configurator state management with
 
 \`\`\`svelte
 <script lang="ts">
-	import { useConfiguratorContext, useAppContext } from './';
+	import { useConfiguratorContext, useAppContext } from '../../providers';
 
 	// Define your configurator type
 	type MyConfiguratorType = {
@@ -230,7 +230,7 @@ const config6 = { user: { name: 'John', age: 31 }, settings: { theme: 'dark' } }
 ### Generic Context Usage
 
 \`\`\`typescript
-import type { ContextOperations, AppContextData, DataContextData } from './';
+import type { ContextOperations, AppContextData, DataContextData } from '../../providers';
 
 // For custom contexts
 const userContext: ContextOperations<UserType> = useContext<UserType>('user');
@@ -266,7 +266,7 @@ The GlobalProvider system includes several powerful utility functions for advanc
 For detailed object comparison and change analysis:
 
 \`\`\`typescript
-import { hasChangesViaDiff, getDetailedDiff, compareKeys } from './';
+import { hasChangesViaDiff, getDetailedDiff, compareKeys } from '../../providers';
 
 // Quick change detection
 const hasChanges = hasChangesViaDiff(oldConfig, newConfig);
@@ -291,7 +291,7 @@ import {
 	validateWatchOptions,
 	extractKeys,
 	createDebouncedUpdate
-} from './';
+} from '../../providers';
 
 // Create default configurator state
 const defaultState = createDefaultConfiguratorState<MyConfigType>();
@@ -313,7 +313,7 @@ const debouncedSave = createDebouncedUpdate(saveConfig, 300);
 ### Performance Optimization Helpers
 
 \`\`\`typescript
-import { createDebouncedUpdate } from './';
+import { createDebouncedUpdate } from '../../providers';
 
 // Create debounced functions for expensive operations
 const debouncedValidation = createDebouncedUpdate((config) => {

package/dist/{providers → ui/providers}/GlobalProvider.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { getFinsweetComponentsEnvironment } from '../utils/index.js';
+	import { getFinsweetComponentsEnvironment } from '../../utils/index.js';
 
 	import { createGlobalContext, setGlobalContext } from './globalContext.svelte';
 	import type { GlobalProviderProps } from './types';

package/dist/{providers → 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/{router → 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';