rimecms 0.26.6 → 0.26.8

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

@@ -1,38 +1,38 @@
 <script lang="ts">
-	import { Check, Minus } from '@lucide/svelte';
-	import { DropdownMenu as DropdownMenuPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
+  import { Check, Minus } from '@lucide/svelte';
+  import { DropdownMenu as DropdownMenuPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
 
-	import type { Snippet } from 'svelte';
+  import type { Snippet } from 'svelte';
 
-	let {
-		ref = $bindable(null),
-		checked = $bindable(false),
-		indeterminate = $bindable(false),
-		class: className,
-		children: childrenProp,
-		...restProps
-	}: WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & {
-		children?: Snippet;
-	} = $props();
+  let {
+    ref = $bindable(null),
+    checked = $bindable(false),
+    indeterminate = $bindable(false),
+    class: className,
+    children: childrenProp,
+    ...restProps
+  }: WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & {
+    children?: Snippet;
+  } = $props();
 </script>
 
 <DropdownMenuPrimitive.CheckboxItem
-	bind:ref
-	bind:checked
-	bind:indeterminate
-	class="rz-dropdown-checkbox {className}"
-	{...restProps}
+  bind:ref
+  bind:checked
+  bind:indeterminate
+  class="rz-dropdown-checkbox {className}"
+  {...restProps}
 >
-	{#snippet children({ checked, indeterminate })}
-		<span class="rz-dropdown-checkbox__indicator">
-			{#if indeterminate}
-				<Minus size="13" />
-			{:else if checked}
-				<Check size="13" />
-			{/if}
-		</span>
-		{@render childrenProp?.()}
-	{/snippet}
+  {#snippet children({ checked, indeterminate })}
+    <span class="rz-dropdown-checkbox__indicator">
+      {#if indeterminate}
+        <Minus size="13" />
+      {:else if checked}
+        <Check size="13" />
+      {/if}
+    </span>
+    {@render childrenProp?.()}
+  {/snippet}
 </DropdownMenuPrimitive.CheckboxItem>
 
 <style>/**************************************/
@@ -42,32 +42,32 @@
 /**************************************/
 
 :global {
-		.rz-dropdown-checkbox {
-			position: relative;
-			display: flex;
-			cursor: pointer;
-			-webkit-user-select: none;
-			   -moz-user-select: none;
-			        user-select: none;
-			align-items: center;
-			border-radius: var(--rz-radius-md);
-			padding-left: var(--rz-size-8);
-			font-size: var(--rz-text-sm);
-			outline: none;
-			padding-block: var(--rz-size-1-5);
-			& [data-disabled] {
-				pointer-events: none;
-				opacity: 0.5;
-			}
-			& .rz-dropdown-checkbox[data-highlighted] {
-				background-color: hsl(var(--rz-gray-4));
-				color: hsl(var(--rz-color-accent-fg) / 1);
-			}
-		}
+    .rz-dropdown-checkbox {
+      position: relative;
+      display: flex;
+      cursor: pointer;
+      -webkit-user-select: none;
+         -moz-user-select: none;
+              user-select: none;
+      align-items: center;
+      border-radius: var(--rz-radius-md);
+      padding-left: var(--rz-size-8);
+      font-size: var(--rz-text-sm);
+      outline: none;
+      padding-block: var(--rz-size-1-5);
+      & [data-disabled] {
+        pointer-events: none;
+        opacity: 0.5;
+      }
+      & .rz-dropdown-checkbox[data-highlighted] {
+        background-color: hsl(var(--rz-gray-4));
+        color: hsl(var(--rz-color-accent-fg) / 1);
+      }
+    }
 
-		.rz-dropdown-checkbox__indicator {
-			position: absolute;
-			left: var(--rz-size-2);
-		}
-	}
+    .rz-dropdown-checkbox__indicator {
+      position: absolute;
+      left: var(--rz-size-2);
+    }
+  }
 </style>

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

@@ -1,12 +1,12 @@
 .rz-dropdown-content {
-	background-color: var(--rz-popover-bg);
-	z-index: 120;
-	min-width: var(--min-width, 8rem);
-	border-radius: var(--rz-radius-lg);
-	border: var(--rz-border);
-	padding: var(--rz-size-1);
-	box-shadow: var(--rz-shadow-xl);
+  background-color: var(--rz-popover-bg);
+  z-index: 120;
+  min-width: var(--min-width, 8rem);
+  border-radius: var(--rz-radius-lg);
+  border: var(--rz-border);
+  padding: var(--rz-size-1);
+  box-shadow: var(--rz-shadow-xl);
 }
 .rz-dropdown-content:focus {
-	outline: none;
+  outline: none;
 }

package/dist/panel/components/ui/dropdown-menu/dropdown-menu-content.svelte

@@ -1,13 +1,18 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
-	import './dropdown-menu-content.css';
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+  import './dropdown-menu-content.css';
 
-	let {
-		ref = $bindable(null),
-		sideOffset = 4,
-		class: className,
-		...restProps
-	}: DropdownMenuPrimitive.ContentProps = $props();
+  let {
+    ref = $bindable(null),
+    sideOffset = 4,
+    class: className,
+    ...restProps
+  }: DropdownMenuPrimitive.ContentProps = $props();
 </script>
 
-<DropdownMenuPrimitive.Content bind:ref {sideOffset} class="rz-dropdown-content {className}" {...restProps} />
+<DropdownMenuPrimitive.Content
+  bind:ref
+  {sideOffset}
+  class="rz-dropdown-content {className}"
+  {...restProps}
+/>

package/dist/panel/components/ui/dropdown-menu/dropdown-menu-group-heading.css

@@ -1,10 +1,10 @@
 .rz-dropdown-menu-group-heading {
-	padding: var(--rz-size-1-5) var(--rz-size-2);
-	font-size: var(--rz-text-sm);
-	font-variation-settings: 'wght' 600;
-	font-weight: 600;
+  padding: var(--rz-size-1-5) var(--rz-size-2);
+  font-size: var(--rz-text-sm);
+  font-variation-settings: 'wght' 600;
+  font-weight: 600;
 }
 
 .rz-dropdown-menu-group-heading--inset {
-	padding-left: var(--rz-size-8);
+  padding-left: var(--rz-size-8);
 }

package/dist/panel/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
-	import './dropdown-menu-group-heading.css';
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+  import './dropdown-menu-group-heading.css';
 
-	type Props = DropdownMenuPrimitive.GroupHeadingProps & {
-		inset?: boolean;
-	};
+  type Props = DropdownMenuPrimitive.GroupHeadingProps & {
+    inset?: boolean;
+  };
 
-	let { ref = $bindable(null), class: className, inset, ...restProps }: Props = $props();
+  let { ref = $bindable(null), class: className, inset, ...restProps }: Props = $props();
 
-	const insetClass = $derived(inset ? 'rz-dropdown-menu-group-heading--inset' : '');
+  const insetClass = $derived(inset ? 'rz-dropdown-menu-group-heading--inset' : '');
 </script>
 
 <DropdownMenuPrimitive.GroupHeading
-	bind:ref
-	class="rz-dropdown-menu-group-heading {insetClass} {className}"
-	{...restProps}
+  bind:ref
+  class="rz-dropdown-menu-group-heading {insetClass} {className}"
+  {...restProps}
 />

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

@@ -1,23 +1,23 @@
 .rz-dropdown-item {
-	position: relative;
-	display: flex;
-	cursor: pointer;
-	-webkit-user-select: none;
-	   -moz-user-select: none;
-	        user-select: none;
-	align-items: center;
-	gap: var(--rz-size-2);
-	border-radius: var(--rz-radius-md);
-	outline: none;
-	padding-block: var(--rz-size-1-5);
-	padding-inline: var(--rz-size-2);
+  position: relative;
+  display: flex;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  align-items: center;
+  gap: var(--rz-size-2);
+  border-radius: var(--rz-radius-md);
+  outline: none;
+  padding-block: var(--rz-size-1-5);
+  padding-inline: var(--rz-size-2);
 
-	&[data-highlighted] {
-		background-color: var(--rz-popover-highlight-bg);
-	}
+  &[data-highlighted] {
+    background-color: var(--rz-popover-highlight-bg);
+  }
 
-	&[data-disabled] {
-		pointer-events: none;
-		opacity: 0.5;
-	}
+  &[data-disabled] {
+    pointer-events: none;
+    opacity: 0.5;
+  }
 }

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

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
-	import './dropdown-menu-item.css';
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+  import './dropdown-menu-item.css';
 
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: DropdownMenuPrimitive.ItemProps & {
-		inset?: boolean;
-	} = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: DropdownMenuPrimitive.ItemProps & {
+    inset?: boolean;
+  } = $props();
 </script>
 
 <DropdownMenuPrimitive.Item bind:ref class="rz-dropdown-item {className}" {...restProps} />

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

@@ -1,28 +1,28 @@
 .rz-dropdown-radio {
-	position: relative;
-	display: flex;
-	cursor: pointer;
-	-webkit-user-select: none;
-	   -moz-user-select: none;
-	        user-select: none;
-	align-items: center;
-	border-radius: var(--rz-radius-md);
-	padding-left: var(--rz-size-8);
-	font-size: var(--rz-text-sm);
-	outline: none;
-	padding-block: var(--rz-size-1-5);
+  position: relative;
+  display: flex;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  align-items: center;
+  border-radius: var(--rz-radius-md);
+  padding-left: var(--rz-size-8);
+  font-size: var(--rz-text-sm);
+  outline: none;
+  padding-block: var(--rz-size-1-5);
 }
 
 .rz-dropdown-radio[data-disabled] {
-	pointer-events: none;
-	opacity: 0.5;
+  pointer-events: none;
+  opacity: 0.5;
 }
 
 .rz-dropdown-radio[data-highlighted] {
-	background-color: var(--rz-popover-highlight-bg);
+  background-color: var(--rz-popover-highlight-bg);
 }
 
 .rz-dropdown-radio__indicator {
-	position: absolute;
-	left: var(--rz-size-2);
+  position: absolute;
+  left: var(--rz-size-2);
 }

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

@@ -1,23 +1,23 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive, type WithoutChild } from 'bits-ui';
-	import { Check } from '@lucide/svelte';
-	import './dropdown-menu-radio-item.css';
+  import { DropdownMenu as DropdownMenuPrimitive, type WithoutChild } from 'bits-ui';
+  import { Check } from '@lucide/svelte';
+  import './dropdown-menu-radio-item.css';
 
-	let {
-		ref = $bindable(null),
-		class: className,
-		children: childrenProp,
-		...restProps
-	}: WithoutChild<DropdownMenuPrimitive.RadioItemProps> = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    children: childrenProp,
+    ...restProps
+  }: WithoutChild<DropdownMenuPrimitive.RadioItemProps> = $props();
 </script>
 
 <DropdownMenuPrimitive.RadioItem bind:ref class="rz-dropdown-radio {className}" {...restProps}>
-	{#snippet children({ checked })}
-		<span class="rz-dropdown-radio__indicator">
-			{#if checked}
-				<Check size="13" />
-			{/if}
-		</span>
-		{@render childrenProp?.({ checked })}
-	{/snippet}
+  {#snippet children({ checked })}
+    <span class="rz-dropdown-radio__indicator">
+      {#if checked}
+        <Check size="13" />
+      {/if}
+    </span>
+    {@render childrenProp?.({ checked })}
+  {/snippet}
 </DropdownMenuPrimitive.RadioItem>

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

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

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

@@ -1,8 +1,16 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
-	import './dropdown-menu-separator.css';
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+  import './dropdown-menu-separator.css';
 
-	let { ref = $bindable(null), class: className, ...restProps }: DropdownMenuPrimitive.SeparatorProps = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: DropdownMenuPrimitive.SeparatorProps = $props();
 </script>
 
-<DropdownMenuPrimitive.Separator bind:ref class="rz-dropdown-separator {className}" {...restProps} />
+<DropdownMenuPrimitive.Separator
+  bind:ref
+  class="rz-dropdown-separator {className}"
+  {...restProps}
+/>

package/dist/panel/components/ui/dropdown-menu/dropdown-menu-trigger.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
-	import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
 
-	let { ref = $bindable(null), class: className, ...restProps }: DropdownMenuPrimitive.TriggerProps = $props();
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: DropdownMenuPrimitive.TriggerProps = $props();
 </script>
 
 <DropdownMenuPrimitive.Trigger bind:ref class="rz-dropdown-trigger {className}" {...restProps} />

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

@@ -1,28 +1,28 @@
 <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>;
-
-	let {
-		ref = $bindable(null),
-		value = $bindable(),
-		class: className,
-		icon,
-		...restProps
-	}: WithoutChildren<PrimitiveInputAttributes> & { icon?: Component<IconProps> } = $props();
+  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>;
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    class: className,
+    icon,
+    ...restProps
+  }: WithoutChildren<PrimitiveInputAttributes> & { icon?: Component<IconProps> } = $props();
 </script>
 
 <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} />
+  {#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>/**************************************/
@@ -32,100 +32,100 @@
 /**************************************/
 
 :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-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 {
-		border: 1px solid var(--rz-input-border-color);
-		background-color: hsl(var(--rz-input-bg));
-		display: flex;
-		height: var(--rz-input-height);
-		width: 100%;
-		border-radius: var(--rz-radius-lg);
-		transition: all 0.1s ease-in-out;
-		padding: var(--rz-input-padding-y) var(--rz-input-padding-x);
-	}
+    border: 1px solid var(--rz-input-border-color);
+    background-color: hsl(var(--rz-input-bg));
+    display: flex;
+    height: var(--rz-input-height);
+    width: 100%;
+    border-radius: var(--rz-radius-lg);
+    transition: all 0.1s ease-in-out;
+    padding: var(--rz-input-padding-y) var(--rz-input-padding-x);
+  }
 
 .rz-input__icon + .rz-input {
-		padding-left: calc(var(--rz-input-padding-x) + var(--rz-size-6));
-	}
+    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;
-		color: hsl(var(--rz-color-fg) / 1) !important;
-		-webkit-text-fill-color: hsl(var(--rz-color-fg) / 1) !important;
-	}
+    --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, :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;
-	}
+    --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 {
-		--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;
-	}
+    --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 {
-		--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;
-	}
+    --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;
+  }
 
 .rz-input:disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
 
 .rz-input::-moz-placeholder {
-		color: hsl(var(--rz-color-fg) / 0.5);
-	}
+    color: hsl(var(--rz-color-fg) / 0.5);
+  }
 
 .rz-input::placeholder {
-		color: hsl(var(--rz-color-fg) / 0.5);
-	}
+    color: hsl(var(--rz-color-fg) / 0.5);
+  }
 
 .rz-input:focus-visible {
-		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-ring) / var(--rz-ring-opacity, 1));
-	}
+    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-ring) / var(--rz-ring-opacity, 1));
+  }
 
 .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));
-	}
+    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;
-		width: 100%;
-
-		.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));
-		}
-	}
+    position: relative;
+    width: 100%;
+
+    .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>