@finsweet/webflow-apps-utils 1.0.12 → 1.0.14

package/dist/ui/components/color-picker/ColorPicker.stories.svelte

@@ -5,7 +5,15 @@
 	import ColorPicker from './ColorPicker.svelte';
 
 	let controlledColor = $state('#00ff00');
-	const handleChange = (color: string) => (controlledColor = color);
+	const handleFullColorChange = (fullColor: {
+		hex: string;
+		rgb: { r: number; g: number; b: number; value: string };
+		rgba: { r: number; g: number; b: number; a: number; value: string };
+		hsb: { h: number; s: number; b: number; value: string };
+		alpha: number;
+	}) => {
+		console.log('Full color object:', fullColor);
+	};
 
 	const { Story } = defineMeta({
 		title: 'UI/ColorPicker',
@@ -16,7 +24,7 @@
 				control: { type: 'color' },
 				description: 'Selected color (hex string or writable store)'
 			},
-			onchange: { action: 'colorChanged' }
+			oncolorchange: { action: 'fullColorChanged' }
 		},
 		parameters: {
 			layout: 'centered',
@@ -26,7 +34,7 @@
 		},
 		args: {
 			color: '#ff0000',
-			onchange: fn()
+			oncolorchange: fn()
 		}
 	});
 </script>
@@ -40,3 +48,59 @@
 <Story name="Edge: No Color" args={{ color: undefined }} />
 
 <Story name="Disabled Picker" args={{ color: '#ebebeb', disabled: true }} />
+
+<Story
+	name="Full Color Object Demo"
+	args={{ color: '#ff6600' }}
+	story={{
+		parameters: {
+			docs: {
+				description: {
+					story:
+						'Demonstrates the full color object callback. Open the color picker and interact with it to see the complete color object with hex, rgb, rgba, hsb, and alpha values in the Actions panel.'
+				}
+			}
+		}
+	}}
+/>
+
+<Story
+	name="Alpha Channel Demo"
+	args={{
+		color: '#ff0000',
+		oncolorchange: (fullColor: {
+			hex: string;
+			rgb: { r: number; g: number; b: number; value: string };
+			rgba: { r: number; g: number; b: number; a: number; value: string };
+			hsb: { h: number; s: number; b: number; value: string };
+			alpha: number;
+		}) => {
+			console.log('Full color object:', fullColor);
+		}
+	}}
+	story={{
+		parameters: {
+			docs: {
+				description: {
+					story:
+						'Shows how alpha channel values are handled, oncolorchange now receive the same hex value with alpha channel when alpha < 100%. Check the console to see both callbacks receiving consistent values.'
+				}
+			}
+		}
+	}}
+/>
+
+<Story
+	name="Controlled Component"
+	args={{ color: controlledColor, oncolorchange: handleFullColorChange }}
+	story={{
+		parameters: {
+			docs: {
+				description: {
+					story:
+						'A controlled component example that demonstrates oncolorchange callback working together.'
+				}
+			}
+		}
+	}}
+/>

package/dist/ui/components/color-picker/ColorPicker.svelte

@@ -2,15 +2,24 @@
 	import Tooltip from '../tooltip/Tooltip.svelte';
 	import ColorSelect from './ColorSelect.svelte';
 
+	// Color object type definition
+	interface ColorObject {
+		hex: string;
+		rgb: { r: number; g: number; b: number; value: string };
+		rgba: { r: number; g: number; b: number; a: number; value: string };
+		hsb: { h: number; s: number; b: number; value: string };
+		alpha: number;
+	}
+
 	interface Props {
 		/**
 		 * The color to display in the picker.
 		 */
 		color?: string;
 		/**
-		 * The function to call when the color changes.
+		 * The function to call when the color changes with full color object.
 		 */
-		onchange?: (color: string) => void;
+		oncolorchange?: (fullColor: ColorObject) => void;
 		/**
 		 * The width of the picker.
 		 */
@@ -21,14 +30,20 @@
 		disabled?: boolean;
 	}
 
-	let { color = $bindable('#fff'), onchange, width = '80px', disabled = false }: Props = $props();
+	let {
+		color = $bindable('#fff'),
+		oncolorchange,
+		width = '80px',
+		disabled = false
+	}: Props = $props();
 
 	function normalizeHex(value: string): string {
 		let v = value.trim();
 
 		if (!v.startsWith('#')) v = `#${v}`;
 
-		return v.toUpperCase();
+		// Keep original case for consistency with tests
+		return v;
 	}
 
 	function isValidColor(value: string): boolean {
@@ -36,6 +51,62 @@
 		return hexRegex.test(value.startsWith('#') ? value.slice(1) : value);
 	}
 
+	function createColorObject(hex: string): ColorObject {
+		// Remove # if present and normalize to 6 digits
+		let normalizedHex = hex.startsWith('#') ? hex.slice(1) : hex;
+
+		// Expand 3-digit hex to 6-digit
+		if (normalizedHex.length === 3) {
+			normalizedHex = normalizedHex
+				.split('')
+				.map((char) => char + char)
+				.join('');
+		}
+
+		// Remove alpha channel if present (8-digit hex)
+		if (normalizedHex.length === 8) {
+			normalizedHex = normalizedHex.substring(0, 6);
+		}
+
+		const r = parseInt(normalizedHex.slice(0, 2), 16);
+		const g = parseInt(normalizedHex.slice(2, 4), 16);
+		const b = parseInt(normalizedHex.slice(4, 6), 16);
+
+		// Convert to HSB
+		const max = Math.max(r, g, b);
+		const min = Math.min(r, g, b);
+		const diff = max - min;
+		let h = 0;
+		let s = max === 0 ? 0 : diff / max;
+		let brightness = max;
+
+		if (diff !== 0) {
+			if (max === r) {
+				h = ((g - b) / diff) % 6;
+			} else if (max === g) {
+				h = (b - r) / diff + 2;
+			} else {
+				h = (r - g) / diff + 4;
+			}
+		}
+
+		h = Math.round(h * 60);
+		if (h < 0) h += 360;
+
+		return {
+			hex: `#${normalizedHex}`,
+			rgb: { r, g, b, value: `rgb(${r}, ${g}, ${b})` },
+			rgba: { r, g, b, a: 100, value: `rgba(${r}, ${g}, ${b}, 1)` },
+			hsb: {
+				h,
+				s: Math.round(s * 100),
+				b: Math.round((brightness * 100) / 255),
+				value: `hsb(${h}, ${Math.round(s * 100)}%, ${Math.round((brightness * 100) / 255)}%)`
+			},
+			alpha: 100
+		};
+	}
+
 	function handleInputPaste(event: ClipboardEvent) {
 		event.preventDefault();
 
@@ -48,7 +119,9 @@
 		if (isValidColor(cleanText)) {
 			const normalizedValue = normalizeHex(cleanText);
 			color = normalizedValue;
-			onchange?.(normalizedValue);
+			// Call oncolorchange with the new color
+			const colorObject = createColorObject(normalizedValue);
+			oncolorchange?.(colorObject);
 		}
 	}
 
@@ -58,10 +131,10 @@
 
 		if (isValidColor(value)) {
 			const normalizedValue = normalizeHex(value);
-
 			color = normalizedValue;
-
-			onchange?.(normalizedValue);
+			// Call oncolorchange with the new color
+			const colorObject = createColorObject(normalizedValue);
+			oncolorchange?.(colorObject);
 		}
 	}
 
@@ -73,9 +146,11 @@
 
 	function handleColorChange(newColor: string) {
 		const normalizedValue = normalizeHex(newColor);
-
 		color = normalizedValue;
-		onchange?.(normalizedValue);
+	}
+
+	function handleFullColorChange(fullColor: ColorObject) {
+		oncolorchange?.(fullColor);
 	}
 </script>
 
@@ -97,7 +172,7 @@
 			</div>
 		{/snippet}
 		{#snippet tooltipContent()}
-			<ColorSelect {color} onchange={handleColorChange} />
+			<ColorSelect {color} oncolorchange={handleFullColorChange} />
 		{/snippet}
 	</Tooltip>
 

package/dist/ui/components/color-picker/ColorPicker.svelte.d.ts

@@ -1,12 +1,35 @@
+interface ColorObject {
+    hex: string;
+    rgb: {
+        r: number;
+        g: number;
+        b: number;
+        value: string;
+    };
+    rgba: {
+        r: number;
+        g: number;
+        b: number;
+        a: number;
+        value: string;
+    };
+    hsb: {
+        h: number;
+        s: number;
+        b: number;
+        value: string;
+    };
+    alpha: number;
+}
 interface Props {
     /**
      * The color to display in the picker.
      */
     color?: string;
     /**
-     * The function to call when the color changes.
+     * The function to call when the color changes with full color object.
      */
-    onchange?: (color: string) => void;
+    oncolorchange?: (fullColor: ColorObject) => void;
     /**
      * The width of the picker.
      */

package/dist/ui/components/color-picker/ColorSelect.stories.svelte

@@ -13,11 +13,11 @@
 				control: { type: 'color' },
 				description: 'Initial color value (hex)'
 			},
-			onchange: { action: 'colorChanged' }
+			oncolorchange: { action: 'fullColorChanged' }
 		},
 		args: {
 			color: '#ff0000',
-			onchange: fn()
+			oncolorchange: fn()
 		}
 	});
 </script>
@@ -28,10 +28,18 @@
 
 <Story
 	name="Alpha Channel"
-	args={{ color: '#0000ff' }}
+	args={{
+		color: '#0000ff',
+		oncolorchange: (fullColor) => console.log('Full color object:', fullColor)
+	}}
 	story={{
 		parameters: {
-			docs: { description: { story: 'Shows alpha slider and allows changing opacity.' } }
+			docs: {
+				description: {
+					story:
+						'Shows alpha slider and allows changing opacity. Both callbacks receive consistent hex values with alpha channel when alpha < 100%.'
+				}
+			}
 		}
 	}}
 />
@@ -59,3 +67,18 @@
 		}
 	}}
 />
+
+<Story
+	name="Full Color Object Demo"
+	args={{ color: '#ff6600' }}
+	story={{
+		parameters: {
+			docs: {
+				description: {
+					story:
+						'Demonstrates the full color object callback with hex, rgb, rgba, hsb, and alpha values. Check the Actions panel to see the complete color object structure.'
+				}
+			}
+		}
+	}}
+/>

package/dist/ui/components/color-picker/ColorSelect.svelte

@@ -1,14 +1,60 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 
-	let { color = $bindable('#fff'), onchange } = $props<{
+	// Color object type definition
+	interface ColorObject {
+		hex: string;
+		rgb: { r: number; g: number; b: number; value: string };
+		rgba: { r: number; g: number; b: number; a: number; value: string };
+		hsb: { h: number; s: number; b: number; value: string };
+		alpha: number;
+	}
+
+	let { color = $bindable('#fff'), oncolorchange } = $props<{
 		color?: string;
-		onchange?: (color: string) => void;
+		oncolorchange?: (fullColor: ColorObject) => void;
 	}>();
 
 	function setColor(newColor: string) {
 		color = newColor;
-		onchange?.(newColor);
+	}
+
+	function createColorObject(hex: string, alpha: number): ColorObject {
+		const [r, g, b] = hexToRgb(hex);
+		const [h, s, brightness] = hexToHsb(hex);
+
+		// Create hex with alpha channel if alpha < 100%
+		const hexWithAlpha =
+			alpha < 100
+				? hex +
+					Math.round((alpha / 100) * 255)
+						.toString(16)
+						.padStart(2, '0')
+						.toUpperCase()
+				: hex;
+
+		return {
+			hex: hexWithAlpha,
+			rgb: { r, g, b, value: `rgb(${r}, ${g}, ${b})` },
+			rgba: { r, g, b, a: alpha, value: `rgba(${r}, ${g}, ${b}, ${alpha / 100})` },
+			hsb: { h, s, b: brightness, value: `hsb(${h}, ${s}%, ${brightness}%)` },
+			alpha
+		};
+	}
+
+	function getHexWithAlpha(hex: string, alpha: number): string {
+		return alpha < 100
+			? hex +
+					Math.round((alpha / 100) * 255)
+						.toString(16)
+						.padStart(2, '0')
+						.toUpperCase()
+			: hex;
+	}
+
+	function emitColorChange(hex: string, alpha: number) {
+		const colorObject = createColorObject(hex, alpha);
+		oncolorchange?.(colorObject);
 	}
 
 	let hue = $state(0);
@@ -90,6 +136,27 @@
 		);
 	}
 
+	function hexToRgb(hex: string): [number, number, number] {
+		// Handle different hex formats
+		let normalizedHex = hex;
+		if (hex.startsWith('#')) {
+			// Expand 3-digit hex to 6-digit
+			if (hex.length === 4) {
+				normalizedHex = '#' + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3];
+			}
+			// Remove alpha channel if present (8-digit hex)
+			if (hex.length === 9) {
+				normalizedHex = hex.substring(0, 7);
+			}
+		}
+
+		const r = parseInt(normalizedHex.slice(1, 3), 16);
+		const g = parseInt(normalizedHex.slice(3, 5), 16);
+		const b = parseInt(normalizedHex.slice(5, 7), 16);
+
+		return [r, g, b];
+	}
+
 	function hexToHsb(hex: string): [number, number, number] {
 		// Handle different hex formats
 		let normalizedHex = hex;
@@ -166,7 +233,9 @@
 		}
 
 		hexValue = rgbToHex(r, g, b).toUpperCase();
-		setColor(hexValue);
+		const hexWithAlpha = getHexWithAlpha(hexValue, alpha);
+		setColor(hexWithAlpha);
+		emitColorChange(hexValue, alpha);
 		updateColorPickerPosition();
 	}
 
@@ -216,7 +285,7 @@
 		const rect = alphaBar.getBoundingClientRect();
 		const x = Math.max(0, Math.min(rect.width, event.clientX - rect.left));
 		alpha = Math.round((x / rect.width) * 100);
-		if (onchange) onchange(hexValue);
+		emitColorChange(hexValue, alpha);
 	}
 
 	function handleHexChange(event: Event) {
@@ -229,7 +298,9 @@
 
 		if (isValidColor(value)) {
 			hexValue = value.toUpperCase();
-			setColor(hexValue);
+			const hexWithAlpha = getHexWithAlpha(hexValue, alpha);
+			setColor(hexWithAlpha);
+			emitColorChange(hexValue, alpha);
 			const [h, s, b] = hexToHsb(value);
 			hue = h;
 			saturation = s;
@@ -272,7 +343,9 @@
 
 		hexValue = normalizedValue.toUpperCase();
 
-		setColor(hexValue);
+		const hexWithAlpha = getHexWithAlpha(hexValue, alpha);
+		setColor(hexWithAlpha);
+		emitColorChange(hexValue, alpha);
 		prevHexValue = hexValue;
 
 		const hsb = hexToHsb(hexValue);
@@ -420,7 +493,9 @@
 				const result = await eyeDropper.open();
 				if (result && result.sRGBHex) {
 					hexValue = result.sRGBHex.toUpperCase();
-					setColor(hexValue);
+					const hexWithAlpha = getHexWithAlpha(hexValue, alpha);
+					setColor(hexWithAlpha);
+					emitColorChange(hexValue, alpha);
 					const [h, s, b] = hexToHsb(hexValue);
 					hue = h;
 					saturation = s;
@@ -661,11 +736,17 @@
 				<div class="input-wrapper">
 					<input
 						class="input input--number"
-						bind:value={alpha}
+						value={alpha}
 						min="0"
 						max="100"
 						role="spinbutton"
 						aria-label="Alpha"
+						oninput={(e) => {
+							const target = e.target as HTMLInputElement;
+							if (!target) return;
+							alpha = +target.value;
+							emitColorChange(hexValue, alpha);
+						}}
 					/>
 				</div>
 				<span class="label">A</span>

package/dist/ui/components/color-picker/ColorSelect.svelte.d.ts

@@ -1,6 +1,29 @@
+interface ColorObject {
+    hex: string;
+    rgb: {
+        r: number;
+        g: number;
+        b: number;
+        value: string;
+    };
+    rgba: {
+        r: number;
+        g: number;
+        b: number;
+        a: number;
+        value: string;
+    };
+    hsb: {
+        h: number;
+        s: number;
+        b: number;
+        value: string;
+    };
+    alpha: number;
+}
 type $$ComponentProps = {
     color?: string;
-    onchange?: (color: string) => void;
+    oncolorchange?: (fullColor: ColorObject) => void;
 };
 declare const ColorSelect: import("svelte").Component<$$ComponentProps, {}, "color">;
 type ColorSelect = ReturnType<typeof ColorSelect>;

package/dist/ui/components/layout/examples/ExampleLayout.svelte

@@ -271,8 +271,8 @@
 
 						<ColorPicker
 							color="#8C4C4C"
-							onchange={(color) => {
-								console.log(color);
+							oncolorchange={(color) => {
+								console.log('Color:', color);
 							}}
 						/>
 

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

@@ -204,7 +204,7 @@
 			const isTestEnv =
 				(typeof process !== 'undefined' && process.env?.NODE_ENV === 'test') ||
 				(typeof globalThis !== 'undefined' && '__vitest__' in globalThis);
-			const delay = isTestEnv ? 0 : 50;
+			const delay = isTestEnv ? 0 : 100;
 
 			setTimeout(() => {
 				tooltipEl.style.display = 'none';
@@ -316,6 +316,24 @@
 		}
 	});
 
+	$effect(() => {
+		if (tooltipElement) {
+			const handleTooltipInteraction = (evt: Event) => {
+				evt.stopPropagation();
+			};
+
+			tooltipElement.addEventListener('click', handleTooltipInteraction, true);
+			tooltipElement.addEventListener('mousedown', handleTooltipInteraction, true);
+			tooltipElement.addEventListener('mouseup', handleTooltipInteraction, true);
+
+			return () => {
+				tooltipElement.removeEventListener('click', handleTooltipInteraction, true);
+				tooltipElement.removeEventListener('mousedown', handleTooltipInteraction, true);
+				tooltipElement.removeEventListener('mouseup', handleTooltipInteraction, true);
+			};
+		}
+	});
+
 	// Initialize tooltip when component mounts
 	$effect(() => {
 		if (targetElement && tooltipElement) {

package/dist/ui/icons/ReceiptIcon.svelte

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+	<g clip-path="url(#clip0_5690_27828)">
+		<path
+			d="M10.5 9.91797H3.5V8.7513H10.5V9.91797ZM10.5 7.58464H3.5V6.41797H10.5V7.58464ZM10.5 5.2513H3.5V4.08464H10.5V5.2513ZM1.75 12.8346L2.625 11.9596L3.5 12.8346L4.375 11.9596L5.25 12.8346L6.125 11.9596L7 12.8346L7.875 11.9596L8.75 12.8346L9.625 11.9596L10.5 12.8346L11.375 11.9596L12.25 12.8346V1.16797L11.375 2.04297L10.5 1.16797L9.625 2.04297L8.75 1.16797L7.875 2.04297L7 1.16797L6.125 2.04297L5.25 1.16797L4.375 2.04297L3.5 1.16797L2.625 2.04297L1.75 1.16797V12.8346Z"
+			fill="currentColor"
+		/>
+	</g>
+	<defs>
+		<clipPath id="clip0_5690_27828">
+			<rect width="14" height="14" fill="currentColor" />
+		</clipPath>
+	</defs>
+</svg>

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

@@ -0,0 +1,26 @@
+export default ReceiptIcon;
+type ReceiptIcon = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const ReceiptIcon: $$__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/WorkspaceIcon.svelte

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="15" viewBox="0 0 14 15" fill="none">
+	<g clip-path="url(#clip0_5690_28327)">
+		<path
+			d="M6.99935 4.58333V2.25H1.16602V12.75H12.8327V4.58333H6.99935ZM5.83268 11.5833H2.33268V10.4167H5.83268V11.5833ZM5.83268 9.25H2.33268V8.08333H5.83268V9.25ZM5.83268 6.91667H2.33268V5.75H5.83268V6.91667ZM5.83268 4.58333H2.33268V3.41667H5.83268V4.58333ZM11.666 11.5833H6.99935V5.75H11.666V11.5833ZM10.4993 6.91667H8.16602V8.08333H10.4993V6.91667ZM10.4993 9.25H8.16602V10.4167H10.4993V9.25Z"
+			fill="currentColor"
+		/>
+	</g>
+	<defs>
+		<clipPath id="clip0_5690_28327">
+			<rect width="14" height="14" fill="currentColor" transform="translate(0 0.5)" />
+		</clipPath>
+	</defs>
+</svg>

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

@@ -0,0 +1,26 @@
+export default WorkspaceIcon;
+type WorkspaceIcon = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const WorkspaceIcon: $$__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/index.d.ts

@@ -81,6 +81,7 @@ import PreviewEyeIcon from './PreviewEyeIcon.svelte';
 import ProfileIcon from './ProfileIcon.svelte';
 import PublishCancelIcon from './PublishCancelIcon.svelte';
 import PublishIcon from './PublishIcon.svelte';
+import ReceiptIcon from './ReceiptIcon.svelte';
 import RefreshIcon from './RefreshIcon.svelte';
 import RepairIcon from './RepairIcon.svelte';
 import SaveIcon from './SaveIcon.svelte';
@@ -116,7 +117,8 @@ import WebflowComponentIcon from './WebflowComponentIcon.svelte';
 import WebflowComponentOutlinedIcon from './WebflowComponentOutlinedIcon.svelte';
 import WebflowInsightsIcon from './WebflowInsightsIcon.svelte';
 import WizedLogoIcon from './WizedLogoIcon.svelte';
+import WorkspaceIcon from './WorkspaceIcon.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, 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 };
+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, ReceiptIcon, 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, WorkspaceIcon, XL, XXL, XXXL };

package/dist/ui/icons/index.js

@@ -81,6 +81,7 @@ import PreviewEyeIcon from './PreviewEyeIcon.svelte';
 import ProfileIcon from './ProfileIcon.svelte';
 import PublishCancelIcon from './PublishCancelIcon.svelte';
 import PublishIcon from './PublishIcon.svelte';
+import ReceiptIcon from './ReceiptIcon.svelte';
 import RefreshIcon from './RefreshIcon.svelte';
 import RepairIcon from './RepairIcon.svelte';
 import SaveIcon from './SaveIcon.svelte';
@@ -116,7 +117,8 @@ import WebflowComponentIcon from './WebflowComponentIcon.svelte';
 import WebflowComponentOutlinedIcon from './WebflowComponentOutlinedIcon.svelte';
 import WebflowInsightsIcon from './WebflowInsightsIcon.svelte';
 import WizedLogoIcon from './WizedLogoIcon.svelte';
+import WorkspaceIcon from './WorkspaceIcon.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, 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 };
+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, ReceiptIcon, 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, WorkspaceIcon, XL, XXL, XXXL };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finsweet/webflow-apps-utils",
-  "version": "1.0.12",
+  "version": "1.0.14",
   "description": "Shared utilities for Webflow apps",
   "homepage": "https://github.com/finsweet/webflow-apps-utils",
   "repository": {