rimecms 0.25.14 → 0.26.0

package/dist/panel/components/ui/button/button.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Props } from './index.js';
-	
+
 	let {
 		class: className,
 		variant = 'default',
@@ -30,7 +30,12 @@
 {/snippet}
 
 {#if href}
-	<a bind:this={ref} {href} class="rz-button rz-button--size-{size} rz-button--{variant} {className}" {...restProps}>
+	<a
+		bind:this={ref}
+		{href}
+		class="rz-button rz-button--size-{size} rz-button--{variant} {className}"
+		{...restProps}
+	>
 		{@render iconProp()}
 		{@render children?.()}
 	</a>
@@ -46,9 +51,13 @@
 	</button>
 {/if}
 
-<style>
-	:root {
+<style>/**************************************/
+
+/* Font */
+
+/**************************************/
 
+:root {
 		--rz-button-tl-radius: var(--rz-radius-md);
 		--rz-button-tr-radius: var(--rz-radius-md);
 		--rz-button-br-radius: var(--rz-radius-md);
@@ -59,16 +68,16 @@
 		--rz-button-default-bg-hover: light-dark(hsl(var(--rz-gray-2)), hsl(var(--rz-gray-19)));
 		--rz-button-default-bg-disabled: light-dark(hsl(var(--rz-gray-3)), hsl(var(--rz-gray-12)));
 		--rz-button-default-fg: light-dark(hsl(var(--rz-gray-13)), hsl(var(--rz-gray-2)));
-		
+
 		/* Success variant */
 		--rz-button-success-bg: hsl(var(--rz-color-spot) / 1);
 		--rz-button-success-bg-hover: hsl(var(--rz-color-spot) / 0.6);
 		--rz-button-success-bg-disabled: hsl(var(--rz-color-spot) / 0.3);
 		--rz-button-success-fg: hsl(var(--rz-color-spot-fg) / 1);
-		
+
 		/* Outline variant */
 		--rz-button-outline-bg: transparent;
-		--rz-button-outline-fg: light-dark(hsl(var(--rz-gray-4)), hsl(var(--rz-gray-12))) ;
+		--rz-button-outline-fg: light-dark(hsl(var(--rz-gray-4)), hsl(var(--rz-gray-12)));
 		--rz-button-outline-border: light-dark(hsl(var(--rz-gray-14)), hsl(var(--rz-gray-8)));
 		--rz-button-outline-bg-hover: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-4)));
 		/* border-width */
@@ -76,17 +85,17 @@
 		--rz-button-outline-border-top-width: 1px;
 		--rz-button-outline-border-right-width: 1px;
 		--rz-button-outline-border-bottom-width: 1px;
-		
+
 		/* Ghost variant */
 		--rz-button-ghost-bg: transparent;
-		--rz-button-ghost-bg-hover: light-dark( hsl(var(--rz-gray-16)), hsl(var(--rz-gray-4)));
+		--rz-button-ghost-bg-hover: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-4)));
 		--rz-button-ghost-fg: hsl(var(--rz-color-fg));
-		
+
 		/* Secondary variant */
 		--rz-button-secondary-bg: light-dark(hsl(var(--rz-gray-16)), hsl(var(--rz-gray-3)));
 		--rz-button-secondary-bg-hover: light-dark(
 			hsl(var(--rz-gray-16)),
-			color-mix( in hsl, white 3%, hsl(var(--rz-gray-3)))
+			color-mix(in hsl, white 3%, hsl(var(--rz-gray-3)))
 		);
 		--rz-button-secondary-fg: hsl(var(--rz-color-fg));
 
@@ -102,22 +111,24 @@
 		--rz-button-text-fg-disabled: hsl(var(--rz-color-fg) / 0.4);
 	}
 
-	.rz-button {
+.rz-button {
 		flex-shrink: var(--rz-flex-shrink, unset);
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		border-radius: var(--rz-button-tl-radius) var(--rz-button-tr-radius) var(--rz-button-br-radius) var(--rz-button-bl-radius);
+		border-radius: var(--rz-button-tl-radius) var(--rz-button-tr-radius) var(--rz-button-br-radius)
+			var(--rz-button-bl-radius);
 		white-space: nowrap;
 		font-variation-settings: 'wght' 500;
 		font-weight: 500;
-		transition-property: box-shadow, color, background-color, border-color, text-decoration-color, fill, stroke;
+		transition-property:
+			box-shadow, color, background-color, border-color, text-decoration-color, fill, stroke;
 		transition-duration: 0.25s;
 		gap: var(--rz-size-2);
 		fill: currentColor;
 	}
 
-	.rz-button:focus-visible {
+.rz-button:focus-visible {
 		/* --rz-ring-offset: 1px; */
 		outline: none;
 		box-shadow:
@@ -125,68 +136,73 @@
 		0 0 0 calc(var(--rz-ring-offset, 0px) + 1px) hsl(var(--rz-color-ring) / var(--rz-ring-opacity, 1));
 	}
 
-	.rz-button:disabled,
+.rz-button:disabled,
 	.rz-button[disabled='true'] {
 		opacity: 0.5;
 		cursor: no-drop !important;
 	}
 
-	/**************************************/
-	/* Sizes */
-	/**************************************/
+/**************************************/
 
-	.rz-button--size-default {
+/* Sizes */
+
+/**************************************/
+
+.rz-button--size-default {
 		font-size: var(--rz-text-md);
 		height: var(--rz-size-9);
 		padding: var(--rz-size-2) var(--rz-size-4);
 	}
 
-	.rz-button--size-xs {
+.rz-button--size-xs {
 		height: var(--rz-size-6);
 		padding: var(--rz-size-1) var(--rz-size-2);
 		font-size: var(--rz-text-2xs);
 		border-radius: var(--rz-radius-md);
 	}
 
-	.rz-button--size-sm {
+.rz-button--size-sm {
 		font-size: var(--rz-text-md);
 		height: var(--rz-size-8);
 		padding: var(--rz-size-2) var(--rz-size-3);
 		border-radius: var(--rz-radius-md);
 	}
 
-	.rz-button--size-lg {
+.rz-button--size-lg {
 		font-size: var(--rz-text-md);
 		height: var(--rz-size-12);
 		padding: var(--rz-size-2) var(--rz-size-8);
 		border-radius: var(--rz-radius-md);
 	}
 
-	.rz-button--size-xl {
+.rz-button--size-xl {
 		height: var(--rz-size-14);
 		font-size: var(--rz-text-md);
 		padding: var(--rz-size-2) var(--rz-size-8);
 		border-radius: var(--rz-radius-md);
 	}
 
-	.rz-button--size-icon {
+.rz-button--size-icon {
 		border-radius: var(--rz-radius-lg);
 		height: var(--rz-size-9);
 		width: var(--rz-size-9);
 		padding: var(--rz-size-1);
 	}
 
-	.rz-button--size-icon-sm {
+.rz-button--size-icon-sm {
 		height: var(--rz-size-8);
 		width: var(--rz-size-8);
 	}
 
-	/**************************************/
-	/* Variants */
-	/**************************************/
+/**************************************/
+
+/* Variants */
 
-	/** Default */
-	.rz-button--default {
+/**************************************/
+
+/** Default */
+
+.rz-button--default {
 		background-color: var(--rz-button-default-bg);
 		color: var(--rz-button-default-fg);
 		&:hover:not(:disabled) {
@@ -197,8 +213,9 @@
 		}
 	}
 
-	/** Success */
-	.rz-button--success {
+/** Success */
+
+.rz-button--success {
 		background-color: var(--rz-button-success-bg);
 		color: var(--rz-button-success-fg);
 		&:hover {
@@ -209,27 +226,29 @@
 		}
 	}
 
-	/** Outline */
-	.rz-button--outline {
+/** Outline */
+
+.rz-button--outline {
 		border-style: solid;
 		border-color: var(--rz-button-outline-border);
-		
+
 		border-left-width: var(--rz-button-outline-border-left-width);
 		border-top-width: var(--rz-button-outline-border-top-width);
 		border-right-width: var(--rz-button-outline-border-right-width);
 		border-bottom-width: var(--rz-button-outline-border-bottom-width);
-		
+
 		background-color: var(--rz-button-outline-bg);
 		color: var(--rz-button-outline-fg);
-		
+
 		&:hover:not(:disabled) {
 			/* border-color: var(--rz-button-outline-border-hover); */
 			background-color: var(--rz-button-outline-bg-hover);
 		}
 	}
 
-	/** Ghost */
-	.rz-button--ghost {
+/** Ghost */
+
+.rz-button--ghost {
 		background-color: var(--rz-button-ghost-bg);
 		color: var(--rz-button-ghost-fg);
 
@@ -238,8 +257,9 @@
 		}
 	}
 
-	/** Secondary */
-	.rz-button--secondary {
+/** Secondary */
+
+.rz-button--secondary {
 		background-color: var(--rz-button-secondary-bg);
 		color: var(--rz-button-secondary-fg);
 
@@ -248,8 +268,9 @@
 		}
 	}
 
-	/** Link */
-	.rz-button--link {
+/** Link */
+
+.rz-button--link {
 		background: var(--rz-button-link-bg);
 		color: var(--rz-button-link-fg);
 		text-underline-offset: 4px;
@@ -260,15 +281,16 @@
 		}
 	}
 
-	/** Text */
-	.rz-button--text {
+/** Text */
+
+.rz-button--text {
 		padding-left: 0;
 		padding-right: 0;
 		background-color: var(--rz-button-text-bg);
 		color: var(--rz-button-text-fg);
 		font-variation-settings: 'wght' 600;
 		font-weight: 600;
-		gap: var(-rz-size-2);
+		gap: var(--rz-size-2);
 
 		&:hover {
 			color: var(--rz-button-text-fg-hover);
@@ -279,11 +301,13 @@
 		}
 	}
 
-	/**************************************/
-	/* With Icon */
-	/**************************************/
+/**************************************/
+
+/* With Icon */
+
+/**************************************/
 
-	.rz-button__icon,
+.rz-button__icon,
 	.rz-button--text__icon {
 		display: grid;
 		place-content: center;

package/dist/panel/components/ui/command/command-input.svelte

@@ -27,10 +27,8 @@
 		align-items: center;
 		border-top-left-radius: var(--rz-radius-md);
 		border-top-right-radius: var(--rz-radius-md);
-		padding-left: var(--rz-size-3);
-		padding-right: var(--rz-size-3);
-		padding-top: var(--rz-size-1);
-		padding-bottom: var(--rz-size-1);
+		padding-inline: var(--rz-size-3);
+		padding-block: var(--rz-size-1);
 
 		&:global([data-focused]) {
 			box-shadow:

package/dist/panel/components/ui/command/command-item.css

@@ -8,10 +8,8 @@
 	min-height: var(--rz-input-height);
 	align-items: center;
 	gap: var(--rz-size-2);
-	padding-left: var(--rz-size-2);
-	padding-right: var(--rz-size-2);
-	padding-top: var(--rz-size-1-5);
-	padding-bottom: var(--rz-size-1-5);
+	padding-inline: var(--rz-size-2);
+	padding-block: var(--rz-size-1-5);
 	font-size: var(--rz-text-sm);
 	outline: none;
 }

package/dist/panel/components/ui/context-menu/ContextMenuItem.svelte

@@ -1,17 +1,14 @@
 <script lang="ts">
-  import type { Snippet } from "svelte";
-  import { ContextMenu, type ContextMenuItemProps, type WithoutChild } from "bits-ui";
-  import './context-menu-item.css'
+	import { ContextMenu, type ContextMenuItemProps } from 'bits-ui';
+	import type { Snippet } from 'svelte';
+	import './context-menu-item.css';
 
-  type Props = ContextMenuItemProps & {
-    children: Snippet;
-  };
-  let {
-    children,
-    ...restProps
-  }: Props = $props();
+	type Props = ContextMenuItemProps & {
+		children: Snippet;
+	};
+	let { children, ...restProps }: Props = $props();
 </script>
- 
+
 <ContextMenu.Item class="rz-context-menu-item" {...restProps}>
-  {@render children()}
-</ContextMenu.Item>
+	{@render children()}
+</ContextMenu.Item>

package/dist/panel/components/ui/context-menu/ContextMenuItem.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { Snippet } from "svelte";
-import { type ContextMenuItemProps } from "bits-ui";
+import { type ContextMenuItemProps } from 'bits-ui';
+import type { Snippet } from 'svelte';
 import './context-menu-item.css';
 type Props = ContextMenuItemProps & {
     children: Snippet;

package/dist/panel/components/ui/context-menu/context-menu-item.css

@@ -10,10 +10,8 @@
 	border-radius: var(--rz-radius-md);
 	outline: none;
 	color: hsl(var(--rz-color-fg));
-	padding-top: var(--rz-size-1);
-	padding-bottom: var(--rz-size-1);
-	padding-left: var(--rz-size-2);
-	padding-right: var(--rz-size-2);
+	padding-block: var(--rz-size-2);
+	padding-inline: var(--rz-size-3);
 	&[data-highlighted] {
 		background-color: var(--rz-popover-highlight-bg);
 	}

package/dist/panel/components/ui/dialog/dialog-content.css

@@ -14,6 +14,12 @@
 	box-shadow: var(--rz-shadow-lg);
 	border-radius: var(--rz-radius-lg);
 	margin: 0 var(--gutter);
+
+	&.rz-dialog-content--xl {
+		height: calc(100vh - 4 * var(--gutter));
+		overflow-y: auto;
+		top: 50%;
+	}
 }
 
 @media (min-width: 768px) {
@@ -26,9 +32,12 @@
 	.rz-dialog-content--lg {
 		width: var(--rz-size-lg);
 	}
+	.rz-dialog-content--xl {
+		width: calc(100vw - 4 * var(--gutter));
+	}
 }
 
-.rz-dialog-content__close {
+[data-dialog-close] {
 	color: hsl(var(--rz-color-fg) / 0.7);
 	position: absolute;
 	right: var(--rz-size-4);
@@ -38,7 +47,7 @@
 	transition: opacity 0.2s;
 }
 
-.rz-dialog-content__close:focus {
+[data-dialog-close]:focus {
 	outline: none;
 	/* --rz-ring-offset-2: 2px; */
 	box-shadow:
@@ -46,6 +55,6 @@
 		0 0 0 calc(var(--rz-ring-offset, 0px) + 1px) hsl(var(--rz-color-ring) / var(--rz-ring-opacity, 1));
 }
 
-.rz-dialog-content__close:disabled {
+[data-dialog-close]:disabled {
 	pointer-events: none;
 }

package/dist/panel/components/ui/dialog/dialog-content.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { X } from '@lucide/svelte';
 	import {
 		Dialog as DialogPrimitive,
 		type DialogContentSnippetProps,
@@ -23,7 +24,7 @@
 				}
 			]
 		>;
-		size?: 'sm' | 'default' | 'lg';
+		size?: 'sm' | 'default' | 'lg' | 'xl';
 	} = $props();
 </script>
 
@@ -34,6 +35,9 @@
 		class="rz-dialog-content rz-dialog-content--{size} {className}"
 		{...restProps}
 	>
+		<Dialog.Close>
+			<X size="18" />
+		</Dialog.Close>
 		{@render children?.()}
 	</DialogPrimitive.Content>
 </Dialog.Portal>

package/dist/panel/components/ui/dialog/dialog-content.svelte.d.ts

@@ -8,7 +8,7 @@ type $$ComponentProps = WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
             props: Record<string, unknown>;
         }
     ]>;
-    size?: 'sm' | 'default' | 'lg';
+    size?: 'sm' | 'default' | 'lg' | 'xl';
 };
 declare const DialogContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type DialogContent = ReturnType<typeof DialogContent>;

package/dist/panel/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
+	import { Check, Minus } from '@lucide/svelte';
 	import { DropdownMenu as DropdownMenuPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
-	import { Minus, Check } from '@lucide/svelte';
 
 	import type { Snippet } from 'svelte';
 
@@ -35,8 +35,13 @@
 	{/snippet}
 </DropdownMenuPrimitive.CheckboxItem>
 
-<style>
-	:global {
+<style>/**************************************/
+
+/* Font */
+
+/**************************************/
+
+:global {
 		.rz-dropdown-checkbox {
 			position: relative;
 			display: flex;
@@ -49,8 +54,7 @@
 			padding-left: var(--rz-size-8);
 			font-size: var(--rz-text-sm);
 			outline: none;
-			padding-top: var(--rz-size-1-5);
-			padding-bottom: var(--rz-size-1-5);
+			padding-block: var(--rz-size-1-5);
 			& [data-disabled] {
 				pointer-events: none;
 				opacity: 0.5;

package/dist/panel/components/ui/dropdown-menu/dropdown-menu-item.css

@@ -9,10 +9,8 @@
 	gap: var(--rz-size-2);
 	border-radius: var(--rz-radius-md);
 	outline: none;
-	padding-top: var(--rz-size-1-5);
-	padding-bottom: var(--rz-size-1-5);
-	padding-left: var(--rz-size-2);
-	padding-right: var(--rz-size-2);
+	padding-block: var(--rz-size-1-5);
+	padding-inline: var(--rz-size-2);
 
 	&[data-highlighted] {
 		background-color: var(--rz-popover-highlight-bg);

package/dist/panel/components/ui/dropdown-menu/dropdown-menu-radio-item.css

@@ -10,8 +10,7 @@
 	padding-left: var(--rz-size-8);
 	font-size: var(--rz-text-sm);
 	outline: none;
-	padding-top: var(--rz-size-1-5);
-	padding-bottom: var(--rz-size-1-5);
+	padding-block: var(--rz-size-1-5);
 }
 
 .rz-dropdown-radio[data-disabled] {

package/dist/panel/components/ui/dropdown-menu/dropdown-menu-separator.css

@@ -1,6 +1,5 @@
 .rz-dropdown-separator {
 	background-color: hsl(var(--rz-color-border));
-	margin-top: var(--rz-size-1);
-	margin-bottom: var(--rz-size-1);
+	margin-block: var(--rz-size-1);
 	height: 1px;
 }

package/dist/panel/components/ui/input/input.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
+	import type { IconProps } from '@lucide/svelte';
 	import type { WithElementRef, WithoutChildren } from 'bits-ui';
+	import type { Component } from 'svelte';
 	import type { HTMLInputAttributes } from 'svelte/elements';
 
 	type PrimitiveInputAttributes = WithElementRef<HTMLInputAttributes>;
@@ -8,20 +10,34 @@
 		ref = $bindable(null),
 		value = $bindable(),
 		class: className,
+		icon,
 		...restProps
-	}: WithoutChildren<PrimitiveInputAttributes> = $props();
+	}: WithoutChildren<PrimitiveInputAttributes> & { icon?: Component<IconProps> } = $props();
 </script>
 
-<input bind:this={ref} class="rz-input {className}" bind:value {...restProps} />
+<div class="rz-input-wrapper {className}">
+	{#if icon}
+		{@const Icon = icon}
+		<div class="rz-input__icon">
+			<Icon size={14} strokeWidth="2px" />
+		</div>
+	{/if}
+	<input bind:this={ref} class="rz-input" bind:value {...restProps} />
+</div>
 
-<style>
-	:root {
+<style>/**************************************/
+
+/* Font */
+
+/**************************************/
+
+:root {
 		--rz-input-border-color: light-dark(hsl(var(--rz-gray-14)), hsl(var(--rz-gray-6) / 0.6));
 		--rz-input-padding-x: var(--rz-size-3);
 		--rz-input-padding-y: var(--rz-size-1);
 	}
 
-	.rz-input {
+.rz-input {
 		border: 1px solid var(--rz-input-border-color);
 		background-color: hsl(var(--rz-input-bg));
 		display: flex;
@@ -32,7 +48,11 @@
 		padding: var(--rz-input-padding-y) var(--rz-input-padding-x);
 	}
 
-	input.rz-input:is(:-webkit-autofill, :-webkit-autofill) {
+.rz-input__icon + .rz-input {
+		padding-left: calc(var(--rz-input-padding-x) + var(--rz-size-6));
+	}
+
+input.rz-input:is(:-webkit-autofill, :-webkit-autofill) {
 		--color: color-mix(in lch, hsl(var(--rz-input-bg)), hsl(var(--rz-color-spot)) 12%);
 		background-color: var(--color) !important;
 		box-shadow: 0 0 0 1000px var(--color) inset !important;
@@ -40,21 +60,23 @@
 		-webkit-text-fill-color: hsl(var(--rz-color-fg) / 1) !important;
 	}
 
-	input.rz-input:is(:-webkit-autofill, :autofill) {
+input.rz-input:is(:-webkit-autofill, :autofill) {
 		--color: color-mix(in lch, hsl(var(--rz-input-bg)), hsl(var(--rz-color-spot)) 12%);
 		background-color: var(--color) !important;
 		box-shadow: 0 0 0 1000px var(--color) inset !important;
 		color: hsl(var(--rz-color-fg) / 1) !important;
 		-webkit-text-fill-color: hsl(var(--rz-color-fg) / 1) !important;
 	}
-	input.rz-input:is(:-webkit-autofill, :-webkit-autofill):focus {
+
+input.rz-input:is(:-webkit-autofill, :-webkit-autofill):focus {
 		--color: color-mix(in lch, hsl(var(--rz-input-bg)), hsl(var(--rz-color-spot)) 24%);
 		background-color: var(--color) !important;
 		box-shadow: 0 0 0 1000px var(--color) inset !important;
 		color: hsl(var(--rz-color-fg) / 1) !important;
 		-webkit-text-fill-color: hsl(var(--rz-color-fg) / 1) !important;
 	}
-	input.rz-input:is(:-webkit-autofill, :autofill):focus {
+
+input.rz-input:is(:-webkit-autofill, :autofill):focus {
 		--color: color-mix(in lch, hsl(var(--rz-input-bg)), hsl(var(--rz-color-spot)) 24%);
 		background-color: var(--color) !important;
 		box-shadow: 0 0 0 1000px var(--color) inset !important;
@@ -62,18 +84,20 @@
 		-webkit-text-fill-color: hsl(var(--rz-color-fg) / 1) !important;
 	}
 
-	.rz-input:disabled {
+.rz-input:disabled {
 		opacity: 0.5;
 		cursor: not-allowed;
 	}
-	.rz-input::-moz-placeholder {
+
+.rz-input::-moz-placeholder {
 		color: hsl(var(--rz-color-fg) / 0.5);
 	}
-	.rz-input::placeholder {
+
+.rz-input::placeholder {
 		color: hsl(var(--rz-color-fg) / 0.5);
 	}
 
-	.rz-input:focus-visible {
+.rz-input:focus-visible {
 		outline: none;
 		/* --rz-ring-offset: 1px; */
 		box-shadow:
@@ -81,10 +105,27 @@
 		0 0 0 calc(var(--rz-ring-offset, 0px) + 1px) hsl(var(--rz-color-ring) / var(--rz-ring-opacity, 1));
 	}
 
-	.rz-input[data-error] {
+.rz-input[data-error] {
 		outline: none;
 		box-shadow:
 		0 0 0 var(--rz-ring-offset, 0px) hsl(var(--rz-ring-offset-bg, var(--rz-gray-6)) / 1),
 		0 0 0 calc(var(--rz-ring-offset, 0px) + 1px) hsl(var(--rz-color-alert) / var(--rz-ring-opacity, 1));
 	}
+
+.rz-input-wrapper {
+		position: relative;
+
+		.rz-input__icon {
+			position: absolute;
+			left: var(--rz-size-3);
+			top: 50%;
+			transform: translateY(-50%);
+			pointer-events: none;
+			color: hsl(var(--rz-color-fg) / 0.4);
+		}
+
+		.rz-input__icon:has(+ .rz-input:focus-visible) {
+			color: hsl(var(--rz-color-fg));
+		}
+	}
 </style>

package/dist/panel/components/ui/input/input.svelte.d.ts

@@ -1,5 +1,11 @@
-import type { WithElementRef } from 'bits-ui';
+import type { IconProps } from '@lucide/svelte';
+import type { WithElementRef, WithoutChildren } from 'bits-ui';
+import type { Component } from 'svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';
-declare const Input: import("svelte").Component<Omit<WithElementRef<HTMLInputAttributes>, "children">, {}, "value" | "ref">;
+type PrimitiveInputAttributes = WithElementRef<HTMLInputAttributes>;
+type $$ComponentProps = WithoutChildren<PrimitiveInputAttributes> & {
+    icon?: Component<IconProps>;
+};
+declare const Input: Component<$$ComponentProps, {}, "value" | "ref">;
 type Input = ReturnType<typeof Input>;
 export default Input;