@hyvor/design 1.1.25-beta-org-4 → 1.1.25-beta-org-7

package/dist/cloud/ResourceCreator/ResourceCreator.svelte

@@ -0,0 +1,192 @@
+<script lang="ts">
+	import { barUser } from '../../components/HyvorBar/bar.js';
+	import OrganizationButton from '../../components/HyvorBar/Organization/OrganizationButton.svelte';
+	import IconButton from '../../components/IconButton/IconButton.svelte';
+	import SplitControl from '../../components/SplitControl/SplitControl.svelte';
+	import IconX from '@hyvor/icons/IconX';
+	import TextInput from '../../components/TextInput/TextInput.svelte';
+	import Caption from '../../components/FormControl/Caption.svelte';
+	import Tooltip from '../../components/Tooltip/Tooltip.svelte';
+	import IconInfoCircle from '@hyvor/icons/IconInfoCircle';
+	import Button from '../../components/Button/Button.svelte';
+	import Validation from '../../components/FormControl/Validation.svelte';
+	import FormControl from '../../components/FormControl/FormControl.svelte';
+	import Label from '../../components/FormControl/Label.svelte';
+	import ResourceCreatorLoader from './ResourceCreatorLoader.svelte';
+	import { Steps, type Step } from './steps.svelte.js';
+
+	interface Props {
+		children?: import('svelte').Snippet;
+		onback: () => void;
+		organizationCaption?: string;
+		cta?: string;
+		steps?: string[]; // steps from the product. ex: creating the blog, copying the theme
+	}
+
+	let {
+		children,
+		onback,
+		organizationCaption = 'Choose the organization this resource belongs to',
+		cta = 'Create resource',
+		steps: productSteps
+	}: Props = $props();
+
+	const hasOrg = $derived(Boolean($barUser?.current_organization));
+	let loading = $state(false);
+	let steps: Steps = $state(new Steps([]));
+	let orgName = $state('');
+	let orgNameError = $state('');
+
+	function setLoading() {
+		let stps: Step[] = [];
+
+		if (!hasOrg) {
+			stps.push({
+				text: 'Creating the organization',
+				auto: false
+			});
+		}
+
+		productSteps?.forEach((s) => {
+			stps.push({
+				text: s,
+				auto: true
+			});
+		});
+
+		loading = true;
+		steps = new Steps(stps);
+	}
+
+	async function createOrganization() {
+		/**
+		 *
+		 */
+	}
+
+	async function handleCta() {
+		orgNameError = '';
+
+		if (hasOrg === false) {
+			if (orgName.trim() === '') {
+				orgNameError = 'Organization name cannot be empty';
+				return;
+			}
+
+			setLoading();
+			await createOrganization();
+			steps.toNext();
+		}
+	}
+</script>
+
+<div class="wrap">
+	<div class="inner hds-box" class:loading>
+		{#if loading}
+			<ResourceCreatorLoader {steps} />
+		{:else}
+			<div class="title">
+				Start a new blog
+
+				<span class="close">
+					<IconButton color="input" variant="invisible" on:click={onback}>
+						<IconX size={22} />
+					</IconButton>
+				</span>
+			</div>
+
+			<div class="content">
+				{#if hasOrg}
+					<SplitControl
+						label="Organization"
+						caption={organizationCaption}
+						noHorizonalPadding
+					>
+						<OrganizationButton />
+					</SplitControl>
+				{:else}
+					<SplitControl noHorizonalPadding>
+						{#snippet label()}
+							<Label>Organization</Label>
+						{/snippet}
+						{#snippet caption()}
+							<Caption>
+								A new organization will be created for you
+
+								<span class="org-tooltip">
+									<Tooltip
+										text="An organization helps you manage multiple projects and team members across HYVOR products."
+									>
+										<IconInfoCircle size={12} />
+									</Tooltip>
+								</span>
+							</Caption>
+						{/snippet}
+
+						<FormControl>
+							<TextInput
+								bind:value={orgName}
+								block
+								state={orgNameError ? 'error' : undefined}
+							/>
+							{#if orgNameError}
+								<Validation state="error">{orgNameError}</Validation>
+							{/if}
+						</FormControl>
+					</SplitControl>
+				{/if}
+
+				{@render children?.()}
+
+				<div class="cta">
+					<Button onclick={handleCta}>{cta}</Button>
+				</div>
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.wrap {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		/* reduce bar height */
+		height: calc(100vh - 50px);
+	}
+	.inner {
+		width: 750px;
+		max-width: 100%;
+		transition: 0.3s width;
+	}
+	.inner.loading {
+		width: 450px;
+	}
+	.title {
+		padding: 25px 35px;
+		font-weight: 600;
+		font-size: 20px;
+		position: relative;
+	}
+	.close {
+		position: absolute;
+		top: 50%;
+		right: 35px;
+		transform: translateY(-50%);
+	}
+
+	.content {
+		padding: 0 35px 35px 35px;
+	}
+
+	.org-tooltip {
+		vertical-align: middle;
+		cursor: pointer;
+	}
+
+	.cta {
+		padding-top: 20px;
+		text-align: center;
+	}
+</style>

package/dist/cloud/ResourceCreator/ResourceCreator.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    children?: import('svelte').Snippet;
+    onback: () => void;
+    organizationCaption?: string;
+    cta?: string;
+    steps?: string[];
+}
+declare const ResourceCreator: import("svelte").Component<Props, {}, "">;
+type ResourceCreator = ReturnType<typeof ResourceCreator>;
+export default ResourceCreator;

package/dist/cloud/ResourceCreator/ResourceCreatorLoader.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import Step from './Step.svelte';
+	import type { Steps } from './steps.svelte.js';
+
+	interface Props {
+		steps: Steps;
+	}
+
+	let { steps }: Props = $props();
+
+	onMount(() => {
+		steps.init();
+	});
+</script>
+
+<div class="loader">
+	{#each steps.steps as step, i}
+		<Step status={steps.statusOf(i)}>{step.text}</Step>
+	{/each}
+</div>
+
+<style>
+	.loader {
+		padding: 40px;
+		width: 350px;
+		margin: auto;
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+	}
+</style>

package/dist/cloud/ResourceCreator/ResourceCreatorLoader.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Steps } from './steps.svelte.js';
+interface Props {
+    steps: Steps;
+}
+declare const ResourceCreatorLoader: import("svelte").Component<Props, {}, "">;
+type ResourceCreatorLoader = ReturnType<typeof ResourceCreatorLoader>;
+export default ResourceCreatorLoader;

package/dist/cloud/ResourceCreator/Step.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import Loader from '../../components/Loader/Loader.svelte';
+	import IconCheckCircleFill from '@hyvor/icons/IconCheckCircleFill';
+	import type { Snippet } from 'svelte';
+	import type { StepStatus } from './steps.svelte.js';
+
+	interface Props {
+		children: Snippet;
+		status: StepStatus;
+	}
+
+	let { children, status }: Props = $props();
+</script>
+
+<div class="step">
+	<div class="loader">
+		{#if status === 'current'}
+			<Loader size={12} />
+		{:else if status === 'done'}
+			<IconCheckCircleFill size={12} style="color:var(--green)" />
+		{:else}
+			<span class="dot"></span>
+		{/if}
+	</div>
+	<div class="content">
+		{@render children()}
+	</div>
+</div>
+
+<style>
+	.step {
+		display: flex;
+		align-items: center;
+	}
+	.dot {
+		display: inline-block;
+		width: 6px;
+		height: 6px;
+		border-radius: 50%;
+		background-color: #ddd;
+	}
+	.loader {
+		width: 35px;
+		display: inline-flex;
+		justify-content: center;
+	}
+</style>

package/dist/cloud/ResourceCreator/Step.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+import type { StepStatus } from './steps.svelte.js';
+interface Props {
+    children: Snippet;
+    status: StepStatus;
+}
+declare const Step: import("svelte").Component<Props, {}, "">;
+type Step = ReturnType<typeof Step>;
+export default Step;

package/dist/cloud/ResourceCreator/steps.svelte.d.ts

@@ -0,0 +1,16 @@
+export interface Step {
+    text: string;
+    auto: boolean;
+}
+export type StepStatus = 'pending' | 'current' | 'done';
+export declare class Steps {
+    steps: Step[];
+    private currentIndex;
+    private autoTimeoutMs;
+    constructor(steps: Step[]);
+    private currentStep;
+    private setTimeoutIfNeeded;
+    init(): void;
+    toNext(): void;
+    statusOf(i: number): StepStatus;
+}

package/dist/cloud/ResourceCreator/steps.svelte.js

@@ -0,0 +1,35 @@
+export class Steps {
+    steps;
+    currentIndex = $state(0);
+    autoTimeoutMs;
+    constructor(steps) {
+        this.steps = steps;
+        // divide 2s into auto steps
+        // we might need to make 2s configurable later
+        this.autoTimeoutMs = 2000 / this.steps.filter((s) => s.auto === true).length;
+    }
+    currentStep() {
+        return this.steps[this.currentIndex];
+    }
+    setTimeoutIfNeeded() {
+        if (this.currentStep().auto) {
+            setTimeout(() => {
+                this.toNext();
+            }, this.autoTimeoutMs);
+        }
+    }
+    init() {
+        this.setTimeoutIfNeeded();
+    }
+    toNext() {
+        this.currentIndex = Math.min(this.currentIndex + 1, this.steps.length - 1);
+        this.setTimeoutIfNeeded();
+    }
+    statusOf(i) {
+        if (i < this.currentIndex)
+            return 'done';
+        if (i === this.currentIndex)
+            return 'current';
+        return 'pending';
+    }
+}

package/dist/cloud/index.d.ts

@@ -0,0 +1 @@
+export { default as ResourceCreator } from './ResourceCreator/ResourceCreator.svelte';

package/dist/cloud/index.js

@@ -0,0 +1 @@
+export { default as ResourceCreator } from './ResourceCreator/ResourceCreator.svelte';

package/dist/components/Button/Button.svelte

@@ -429,12 +429,14 @@
   background-color: transparent;
   color: var(--text);
   transition: 0.2s background-color;
-  /*styles for disabled state*/
 }
 .button.invisible:hover {
   background-color: var(--accent-light);
   box-shadow: none !important;
 }
+.button.invisible {
+  /*styles for disabled state*/
+}
 .button.invisible[disabled] {
   background-color: transparent;
   color: var(--text);

package/dist/components/Checkbox/Checkbox.svelte.d.ts

@@ -7,6 +7,6 @@ interface Props {
     children?: import('svelte').Snippet;
     [key: string]: any;
 }
-declare const Checkbox: import("svelte").Component<Props, {}, "checked" | "group" | "input">;
+declare const Checkbox: import("svelte").Component<Props, {}, "input" | "checked" | "group">;
 type Checkbox = ReturnType<typeof Checkbox>;
 export default Checkbox;

package/dist/components/HyvorBar/Organization/CreateOrganization.svelte

@@ -1,14 +1,16 @@
 <script lang="ts">
+	import Callout from '../../Callout/Callout.svelte';
 	import Modal from '../../Modal/Modal.svelte';
 	import SplitControl from '../../SplitControl/SplitControl.svelte';
 	import TextInput from '../../TextInput/TextInput.svelte';
-	import toast from '../../Toast/toast.ts';
+	import toast from '../../Toast/toast.js';
 	import {
 		barOnOrganizationSwitch,
+		barOrganizations,
 		createOrganization,
 		switchOrganization,
 		type BarOrganization
-	} from '../bar.ts';
+	} from '../bar.js';
 
 	interface Props {
 		show?: boolean;
@@ -41,6 +43,8 @@
 		show = false;
 		name = '';
 
+		barOrganizations.update((orgs) => [org, ...orgs]);
+
 		try {
 			await switchOrganization(org.id);
 			$barOnOrganizationSwitch?.(org);
@@ -67,7 +71,9 @@
 	on:confirm={handleCreate}
 	loading={creating}
 >
-	<SplitControl label="Name" column>
+	<div class="note">Organizations can be used across HYVOR products.</div>
+
+	<SplitControl label="Name" column noHorizonalPadding>
 		<TextInput
 			name="organizationName"
 			bind:value={name}
@@ -82,3 +88,10 @@
 		/>
 	</SplitControl>
 </Modal>
+
+<style>
+	.note {
+		color: var(--text-light);
+		font-size: 14px;
+	}
+</style>

package/dist/components/HyvorBar/Organization/OrganizationButton.svelte

@@ -21,9 +21,15 @@
 		show?: boolean;
 		style?: 'bordered' | 'plain';
 		dropdownAlign?: DropdownAlign;
+		manageButton?: boolean;
 	}
 
-	let { show = $bindable(false), style = 'plain', dropdownAlign = 'center' }: Props = $props();
+	let {
+		show = $bindable(false),
+		style = 'plain',
+		dropdownAlign = 'center',
+		manageButton = true
+	}: Props = $props();
 	let switching = $state(false);
 
 	async function handleSwitch(org: BarOrganization) {
@@ -54,13 +60,15 @@
 				{#if switching}
 					<span class="switching">Switching...</span>
 				{:else}
-					{$barUser.current_organization_name}
+					{$barUser.current_organization
+						? $barUser.current_organization.name
+						: 'Organization'}
 				{/if}
 				<IconChevronExpand size={12} />
 			</button>
 		{/snippet}
 		{#snippet content()}
-			<OrgsList onSwitch={handleSwitch} onCreateStart={handleCreateOrgStart} />
+			<OrgsList onSwitch={handleSwitch} onCreateStart={handleCreateOrgStart} {manageButton} />
 		{/snippet}
 	</Dropdown>
 {/if}
@@ -73,11 +81,13 @@
 		font-weight: 600;
 		transition: 0.2s background-color;
 		padding: 0 15px;
+		border-radius: 20px;
 	}
 	button.bordered {
 		border: 1px solid var(--border);
 		border-top: none;
 		border-bottom: none;
+		border-radius: 0;
 	}
 	button:hover {
 		background-color: var(--hover);

package/dist/components/HyvorBar/Organization/OrganizationButton.svelte.d.ts

@@ -8,6 +8,7 @@ interface Props {
     show?: boolean;
     style?: 'bordered' | 'plain';
     dropdownAlign?: DropdownAlign;
+    manageButton?: boolean;
 }
 declare const OrganizationButton: import("svelte").Component<Props, {}, "show">;
 type OrganizationButton = ReturnType<typeof OrganizationButton>;

package/dist/components/HyvorBar/Organization/OrganizationButtonOrCreator.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	/**
+	 * This component shows the organization button if the user has a current organization
+	 * otherwise, it shows an input to create an organization
+	 * this should be used in the resource creating UI
+	 */
+</script>

package/dist/components/HyvorBar/Organization/OrganizationButtonOrCreator.svelte.d.ts

@@ -0,0 +1,18 @@
+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;
+}
+declare const OrganizationButtonOrCreator: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type OrganizationButtonOrCreator = InstanceType<typeof OrganizationButtonOrCreator>;
+export default OrganizationButtonOrCreator;

package/dist/components/HyvorBar/Organization/OrgsList.svelte

@@ -5,6 +5,7 @@
 	import {
 		barOrganizationCreating,
 		barOrganizations,
+		barUser,
 		getMyOrganizations,
 		instance,
 		type BarOrganization
@@ -20,10 +21,12 @@
 
 	let {
 		onSwitch,
-		onCreateStart
+		onCreateStart,
+		manageButton = true
 	}: {
 		onSwitch: (org: BarOrganization) => void;
 		onCreateStart: () => void;
+		manageButton?: boolean;
 	} = $props();
 
 	onMount(() => {
@@ -58,18 +61,24 @@
 	</IconMessage>
 {:else}
 	<div class="list-wrap">
-		<ActionList>
-			{#each $barOrganizations as org}
-				<ActionListItem on:select={() => onSwitch(org)}>
-					{org.name}
-					{#snippet end()}
-						<span class="role">
-							{org.role.toUpperCase()}
-						</span>
-					{/snippet}
-				</ActionListItem>
-			{/each}
-		</ActionList>
+		{#if $barOrganizations.length}
+			<ActionList>
+				{#each $barOrganizations as org}
+					<ActionListItem on:select={() => onSwitch(org)}>
+						{org.name}
+						{#snippet end()}
+							<span class="role">
+								{org.role.toUpperCase()}
+							</span>
+						{/snippet}
+					</ActionListItem>
+				{/each}
+			</ActionList>
+		{:else}
+			<div class="no-orgs">
+				You are not a member of any organizations. You can create one to use HYVOR products.
+			</div>
+		{/if}
 	</div>
 
 	<div class="manage-create">
@@ -79,19 +88,22 @@
 				<IconPlus />
 			{/snippet}
 		</Button>
-		<Button
-			size="small"
-			as="a"
-			href={$instance + '/account/org'}
-			color="input"
-			target="_blank"
-			rel="noopener noreferrer"
-		>
-			Manage
-			{#snippet end()}
-				<IconBoxArrowUpRight size={12} />
-			{/snippet}
-		</Button>
+
+		{#if manageButton && $barUser?.current_organization_name}
+			<Button
+				size="small"
+				as="a"
+				href={$instance + '/account/org'}
+				color="input"
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				Manage
+				{#snippet end()}
+					<IconBoxArrowUpRight size={12} />
+				{/snippet}
+			</Button>
+		{/if}
 	</div>
 {/if}
 
@@ -117,4 +129,10 @@
 	.manage-create :global(a) {
 		text-decoration: none !important;
 	}
+
+	.no-orgs {
+		font-size: 14px;
+		color: var(--text-light);
+		padding: 15px;
+	}
 </style>

package/dist/components/HyvorBar/Organization/OrgsList.svelte.d.ts

@@ -2,6 +2,7 @@ import { type BarOrganization } from '../bar.js';
 type $$ComponentProps = {
     onSwitch: (org: BarOrganization) => void;
     onCreateStart: () => void;
+    manageButton?: boolean;
 };
 declare const OrgsList: import("svelte").Component<$$ComponentProps, {}, "">;
 type OrgsList = ReturnType<typeof OrgsList>;

package/dist/components/HyvorBar/bar.d.ts

@@ -10,7 +10,9 @@ export interface BarUser {
     username?: string | null;
     email: string;
     picture_url: string | null;
-    current_organization_name: string;
+    current_organization: null | {
+        name: string;
+    };
 }
 export interface BarOrganization {
     id: number;

package/dist/components/HyvorBar/bar.js

@@ -49,6 +49,7 @@ export async function initBar() {
     }
 }
 export async function getMyOrganizations() {
+    return [];
     /* return [
         { id: 1, name: 'Org 1', role: 'admin' },
         { id: 2, name: 'Org 2', role: 'member' },

package/dist/components/Internationalization/T.svelte.d.ts

@@ -1,16 +1,23 @@
 import { type ToDotPaths, type I18nStrings, type PrimitiveType } from './types.js';
 import { type Component } from 'svelte';
-declare class __sveltets_Render<StringsT extends I18nStrings> {
-    props(): {
+declare function $$render<StringsT extends I18nStrings>(): {
+    props: {
         key: ToDotPaths<StringsT>;
         params?: Record<string, PrimitiveType | {
             element?: string;
             component?: Component<any>;
             props?: Record<string, any>;
-        }> | undefined;
+        }>;
     };
-    events(): {};
-    slots(): {};
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<StringsT extends I18nStrings> {
+    props(): ReturnType<typeof $$render<StringsT>>['props'];
+    events(): ReturnType<typeof $$render<StringsT>>['events'];
+    slots(): ReturnType<typeof $$render<StringsT>>['slots'];
     bindings(): "";
     exports(): {};
 }

package/dist/components/Radio/Radio.svelte.d.ts

@@ -6,6 +6,6 @@ interface Props {
     children?: import('svelte').Snippet;
     [key: string]: any;
 }
-declare const Radio: import("svelte").Component<Props, {}, "group" | "input">;
+declare const Radio: import("svelte").Component<Props, {}, "input" | "group">;
 type Radio = ReturnType<typeof Radio>;
 export default Radio;

package/dist/components/SplitControl/SplitControl.svelte

@@ -10,6 +10,7 @@
 		flex?: number[];
 		children?: Snippet;
 		nested?: Snippet;
+		noHorizonalPadding?: boolean;
 		[key: string]: any;
 	}
 
@@ -20,6 +21,7 @@
 		flex = [1, 2],
 		children,
 		nested,
+		noHorizonalPadding = false,
 		...rest
 	}: Props = $props();
 </script>
@@ -28,6 +30,7 @@
 	class="split-control"
 	class:has-nested={!!nested}
 	class:column
+	class:no-hpadding={noHorizonalPadding}
 	aria-label={typeof label === 'string' ? label : undefined}
 	{...rest}
 >
@@ -76,6 +79,9 @@
 .split-control.column {
   flex-direction: column;
 }
+.split-control.column .left {
+  padding-bottom: 10px;
+}
 .split-control.column .right {
   padding-top: 0;
 }
@@ -97,6 +103,12 @@
   min-width: 0;
 }
 
+.no-hpadding .left,
+.no-hpadding .right {
+  padding-left: 0;
+  padding-right: 0;
+}
+
 .caption-wrap {
   margin-top: 4px;
 }</style>

package/dist/components/SplitControl/SplitControl.svelte.d.ts

@@ -6,6 +6,7 @@ interface Props {
     flex?: number[];
     children?: Snippet;
     nested?: Snippet;
+    noHorizonalPadding?: boolean;
     [key: string]: any;
 }
 declare const SplitControl: import("svelte").Component<Props, {}, "">;

package/dist/components/Switch/Switch.svelte.d.ts

@@ -4,6 +4,6 @@ interface Props {
     children?: import('svelte').Snippet;
     [key: string]: any;
 }
-declare const Switch: import("svelte").Component<Props, {}, "checked" | "input">;
+declare const Switch: import("svelte").Component<Props, {}, "input" | "checked">;
 type Switch = ReturnType<typeof Switch>;
 export default Switch;

package/dist/components/TextInput/TextInput.svelte

@@ -1,9 +1,4 @@
 <script lang="ts">
-	import { legacyHandlers } from '../../legacy.js';
-	import { createBubbler } from 'svelte/legacy';
-
-	const bubble = createBubbler();
-
 	interface Props {
 		state?: 'default' | 'error' | 'success' | 'warning';
 		size?: 'small' | 'medium' | 'large' | 'x-small';
@@ -26,7 +21,7 @@
 		onmouseenter?: (event: MouseEvent) => void;
 		onmouseleave?: (event: MouseEvent) => void;
 		onchange?: (event: Event) => void;
-		oninput?: (event: InputEvent) => void;
+		oninput?: (event: Event) => void;
 	}
 
 	let {
@@ -68,17 +63,17 @@
 			{...rest}
 			bind:value
 			bind:this={selectInput}
-			onkeyup={legacyHandlers(onkeyup, bubble('keyup'))}
-			onkeydown={legacyHandlers(onkeydown, bubble('keydown'))}
-			onkeypress={legacyHandlers(onkeypress, bubble('keypress'))}
-			onfocus={legacyHandlers(onfocus, bubble('focus'))}
-			onblur={legacyHandlers(onblur, bubble('blur'))}
-			onclick={legacyHandlers(onclick, bubble('click'))}
-			onmouseover={legacyHandlers(onmouseover, bubble('mouseover'))}
-			onmouseenter={legacyHandlers(onmouseenter, bubble('mouseenter'))}
-			onmouseleave={legacyHandlers(onmouseleave, bubble('mouseleave'))}
-			onchange={legacyHandlers(onchange, bubble('change'))}
-			oninput={legacyHandlers(oninput, bubble('input'))}
+			{onkeyup}
+			{onkeydown}
+			{onkeypress}
+			{onfocus}
+			{onblur}
+			{onclick}
+			{onmouseover}
+			{onmouseenter}
+			{onmouseleave}
+			{onchange}
+			{oninput}
 		>
 			{@render rest?.children()}
 		</select>
@@ -87,17 +82,17 @@
 			{...rest}
 			bind:value
 			bind:this={input}
-			onkeyup={legacyHandlers(onkeyup, bubble('keyup'))}
-			onkeydown={legacyHandlers(onkeydown, bubble('keydown'))}
-			onkeypress={legacyHandlers(onkeypress, bubble('keypress'))}
-			onfocus={legacyHandlers(onfocus, bubble('focus'))}
-			onblur={legacyHandlers(onblur, bubble('blur'))}
-			onclick={legacyHandlers(onclick, bubble('click'))}
-			onmouseover={legacyHandlers(onmouseover, bubble('mouseover'))}
-			onmouseenter={legacyHandlers(onmouseenter, bubble('mouseenter'))}
-			onmouseleave={legacyHandlers(onmouseleave, bubble('mouseleave'))}
-			onchange={legacyHandlers(onchange, bubble('change'))}
-			oninput={legacyHandlers(oninput, bubble('input'))}
+			{onkeyup}
+			{onkeydown}
+			{onkeypress}
+			{onfocus}
+			{onblur}
+			{onclick}
+			{onmouseover}
+			{onmouseenter}
+			{onmouseleave}
+			{onchange}
+			{oninput}
 		/>
 	{/if}
 

package/dist/components/TextInput/TextInput.svelte.d.ts

@@ -19,8 +19,8 @@ interface Props {
     onmouseenter?: (event: MouseEvent) => void;
     onmouseleave?: (event: MouseEvent) => void;
     onchange?: (event: Event) => void;
-    oninput?: (event: InputEvent) => void;
+    oninput?: (event: Event) => void;
 }
-declare const TextInput: import("svelte").Component<Props, {}, "value" | "input" | "selectInput">;
+declare const TextInput: import("svelte").Component<Props, {}, "input" | "value" | "selectInput">;
 type TextInput = ReturnType<typeof TextInput>;
 export default TextInput;

package/dist/components/Textarea/Textarea.svelte

@@ -88,12 +88,14 @@
   overflow: auto;
   align-items: flex-start;
   justify-content: center;
-  --local-shadow-size: 2px;
 }
 .input-wrap:focus-within {
   outline: 0;
   box-shadow: 0 0 0 var(--local-shadow-size) var(--accent-light);
 }
+.input-wrap {
+  --local-shadow-size: 2px;
+}
 
 .input-wrap.block {
   display: block;
@@ -147,8 +149,10 @@
   background: transparent;
   padding: 0;
   margin: 0;
-  resize: none;
 }
 .input-wrap textarea:focus {
   outline: none;
+}
+.input-wrap textarea {
+  resize: none;
 }</style>

package/package.json

@@ -21,6 +21,10 @@
 		"./marketing": {
 			"types": "./dist/marketing/index.d.ts",
 			"svelte": "./dist/marketing/index.js"
+		},
+		"./cloud": {
+			"types": "./dist/cloud/index.d.ts",
+			"svelte": "./dist/cloud/index.js"
 		}
 	},
 	"files": [
@@ -29,14 +33,14 @@
 		"!dist/**/*.spec.*"
 	],
 	"peerDependencies": {
-		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/kit": "^2.49.0",
 		"sass": "^1.68.0",
 		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-static": "^3.0.0",
 		"@sveltejs/package": "^2.3.7",
-		"@sveltejs/vite-plugin-svelte": "^4.0.0",
+		"@sveltejs/vite-plugin-svelte": "^6.2.1",
 		"prettier": "3.4.2",
 		"prettier-plugin-svelte": "3.3.3",
 		"publint": "^0.1.9",
@@ -44,7 +48,7 @@
 		"svelte-check": "^4.0.0",
 		"tslib": "^2.4.1",
 		"typescript": "^5.5.0",
-		"vite": "^5.4.4"
+		"vite": "^7.2"
 	},
 	"dependencies": {
 		"@fontsource/readex-pro": "^5.0.8",
@@ -62,5 +66,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"version": "1.1.25-beta-org-4"
+	"version": "1.1.25-beta-org-7"
 }