@genarou/blazir-icons 1.3.4 → 1.4.0

package/dist/Icon.svelte

@@ -1,37 +1,34 @@
 <!-- Icon.svelte — Refactored v2 -->
 <!-- Cache inteligente adaptativo + lazy loading opcional + actions diff -->
 <script lang="ts">
-  import type { Component } from 'svelte';
-  import { coerceSize } from './utils/defaults.js';
-  import { iconRegistry, type IconName } from './icons/registry.js';
-  import { iconPresets, iconVariants } from './presets.js';
-  import type { IconProps } from './types.js';
+  import type { Component } from "svelte";
+  import { getLoadedIcon, loadIcon } from "./icons/lazy-registry.js";
+  import { iconRegistry, type IconName } from "./icons/registry.js";
+  import { iconPresets, iconVariants } from "./presets.js";
   import {
-    getPresetVariantMerge,
     arePropsStable,
     buildStructuralKey,
     getCachedMergedProps,
+    getPresetVariantMerge,
     setCachedMergedProps,
     toSizePx,
-  } from './smart-cache.js';
-  import {
-    getLoadedIcon,
-    loadIcon,
-  } from './icons/lazy-registry.js';
+  } from "./smart-cache.js";
+  import type { IconProps } from "./types.js";
+  import { coerceSize } from "./utils/defaults.js";
 
   // ============================================================================
   // TIPOS
   // ============================================================================
   type ActionFn<T = HTMLElement, P = any> = (
     node: T,
-    params?: P
+    params?: P,
   ) => void | { update?: (p?: P) => void; destroy?: () => void };
 
   type ActionEntry<T = HTMLElement> = [ActionFn<T, any>, any?];
   type IconPresetName = keyof typeof iconPresets;
   type IconVariantName = keyof typeof iconVariants;
 
-  interface DynamicIconProps extends Omit<IconProps, 'children'> {
+  interface DynamicIconProps extends Omit<IconProps, "children"> {
     name?: IconName;
     preset?: IconPresetName;
     variant?: IconVariantName;
@@ -57,7 +54,7 @@
   // --- Modo EAGER (default): usa el registry estático ya cargado ---
   // Mismo comportamiento que antes: sin latencia, sin skeleton en primer render.
   const _eagerComp = $derived(
-    iconName ? (iconRegistry[iconName as IconName] ?? null) : null
+    iconName ? (iconRegistry[iconName as IconName] ?? null) : null,
   );
 
   // --- Modo LAZY (opt-in): dynamic import() por ícono ---
@@ -82,8 +79,8 @@
     // Si es el mismo nombre y ya lo cargamos → no hacer nada
     if (_lazyCurrentName === name && _lazyComp) return;
 
-    // Intentar sincrónico primero (caché de íconos ya cargados)
-    const synced = getLoadedIcon(name) ?? (iconRegistry[name as IconName] ?? null);
+    // Intentar sincrónico primero (caché de íconos ya cargados en esta sesión)
+    const synced = getLoadedIcon(name);
     if (synced) {
       _lazyComp = synced;
       _lazyCurrentName = name;
@@ -121,7 +118,7 @@
   // ============================================================================
   function toMs(v: unknown): string | undefined {
     if (v == null) return undefined;
-    return typeof v === 'number' ? `${v}ms` : String(v);
+    return typeof v === "number" ? `${v}ms` : String(v);
   }
 
   // ============================================================================
@@ -202,7 +199,7 @@
   // ATRIBUTOS DEL HOST
   // ============================================================================
   const hostClass = $derived(
-    p.class ? `bz-icon-wrapper ${p.class}` : 'bz-icon-wrapper'
+    p.class ? `bz-icon-wrapper ${p.class}` : "bz-icon-wrapper",
   );
 
   const hostStyle = $derived.by(() => {
@@ -296,7 +293,7 @@
   >
     {#key mountKey}
       <!-- svelte-ignore: cast necesario para componentes dinámicos con props genéricas -->
-      <Comp {...(child as any)} />
+      <Comp {...child as any} />
     {/key}
   </span>
 {:else if isLoading}
@@ -330,8 +327,9 @@
     transform: translateX(-50%);
     pointer-events: none;
     opacity: 0;
-    transition: opacity 0.15s ease var(--bz-tooltip-delay, 0ms),
-                transform 0.15s ease var(--bz-tooltip-delay, 0ms);
+    transition:
+      opacity 0.15s ease var(--bz-tooltip-delay, 0ms),
+      transform 0.15s ease var(--bz-tooltip-delay, 0ms);
     z-index: 9999;
   }
 
@@ -346,13 +344,13 @@
     padding: 5px 9px;
     border-radius: 6px;
     white-space: nowrap;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
     transform: translateX(-50%) translateY(3px);
   }
 
   /* Flecha del tooltip */
   .bz-icon-wrapper[data-bz-tooltip]::before {
-    content: '';
+    content: "";
     border: 5px solid transparent;
     border-top-color: var(--bz-tooltip-bg, #1a1a1a);
     bottom: calc(100% + 0px);

package/dist/Icon.svelte.d.ts

@@ -1,7 +1,7 @@
-import type { Component } from 'svelte';
-import { type IconName } from './icons/registry.js';
-import { iconPresets, iconVariants } from './presets.js';
-import type { IconProps } from './types.js';
+import type { Component } from "svelte";
+import { type IconName } from "./icons/registry.js";
+import { iconPresets, iconVariants } from "./presets.js";
+import type { IconProps } from "./types.js";
 type ActionFn<T = HTMLElement, P = any> = (node: T, params?: P) => void | {
     update?: (p?: P) => void;
     destroy?: () => void;
@@ -9,7 +9,7 @@ type ActionFn<T = HTMLElement, P = any> = (node: T, params?: P) => void | {
 type ActionEntry<T = HTMLElement> = [ActionFn<T, any>, any?];
 type IconPresetName = keyof typeof iconPresets;
 type IconVariantName = keyof typeof iconVariants;
-interface DynamicIconProps extends Omit<IconProps, 'children'> {
+interface DynamicIconProps extends Omit<IconProps, "children"> {
     name?: IconName;
     preset?: IconPresetName;
     variant?: IconVariantName;

package/dist/IconLazy.svelte

@@ -0,0 +1,297 @@
+<!-- IconLazy.svelte
+     Variante zero-bundle del componente dinámico.
+     NO importa iconRegistry en runtime — cada ícono se code-splitea
+     en su propio chunk por el bundler via dynamic import().
+     Úsalo cuando el nombre del ícono se decide en runtime y quieres
+     que solo los iconos realmente usados entren al bundle.
+-->
+<script lang="ts">
+  import type { Component } from "svelte";
+  import { coerceSize } from "./utils/defaults.js";
+  // import type → TypeScript lo borra en compilación, cero runtime dep sobre registry
+  import { getLoadedIcon, loadIcon } from "./icons/lazy-registry.js";
+  import type { IconName } from "./icons/registry.js";
+  import { iconPresets, iconVariants } from "./presets.js";
+  import {
+    arePropsStable,
+    buildStructuralKey,
+    getCachedMergedProps,
+    getPresetVariantMerge,
+    setCachedMergedProps,
+    toSizePx,
+  } from "./smart-cache.js";
+  import type { IconProps } from "./types.js";
+
+  type ActionFn<T = HTMLElement, P = any> = (
+    node: T,
+    params?: P,
+  ) => void | { update?: (p?: P) => void; destroy?: () => void };
+
+  type ActionEntry<T = HTMLElement> = [ActionFn<T, any>, any?];
+  type IconPresetName = keyof typeof iconPresets;
+  type IconVariantName = keyof typeof iconVariants;
+
+  interface LazyIconProps extends Omit<IconProps, "children"> {
+    name?: IconName;
+    preset?: IconPresetName;
+    variant?: IconVariantName;
+    class?: string;
+    style?: string;
+    actions?: ActionEntry[];
+  }
+
+  const p: LazyIconProps = $props();
+
+  const iconName = $derived(p.name ?? null);
+
+  // Resolución lazy — solo dynamic import(), nunca el registry estático
+  let _comp = $state<Component | null>(null);
+  let _loading = $state(false);
+  let _currentName = $state<string | null>(null);
+
+  $effect(() => {
+    const name = iconName;
+
+    if (!name) {
+      _comp = null;
+      _currentName = null;
+      _loading = false;
+      return;
+    }
+
+    if (_currentName === name && _comp) return;
+
+    // Caché en memoria de iconos ya cargados en esta sesión → render síncrono
+    const cached = getLoadedIcon(name);
+    if (cached) {
+      _comp = cached;
+      _currentName = name;
+      _loading = false;
+      return;
+    }
+
+    // Dynamic import — el bundler genera un chunk separado por ícono
+    _loading = true;
+    _currentName = name;
+    loadIcon(name).then((comp) => {
+      if (_currentName === name) {
+        _comp = comp;
+        _loading = false;
+      }
+    });
+  });
+
+  // PascalCase alias requerido por Svelte para usar como tag de componente
+  const Comp = $derived(_comp);
+
+  const baseProps = $derived(getPresetVariantMerge(p.preset, p.variant));
+
+  function toMs(v: unknown): string | undefined {
+    if (v == null) return undefined;
+    return typeof v === "number" ? `${v}ms` : String(v);
+  }
+
+  const child = $derived.by((): IconProps => {
+    const {
+      class: _cls,
+      style: _sty,
+      actions: _act,
+      preset: _pre,
+      variant: _var,
+      name: _nm,
+      ...userProps
+    } = p;
+
+    const stable = arePropsStable(userProps as Record<string, unknown>);
+
+    if (stable) {
+      const key = buildStructuralKey(userProps as Record<string, unknown>);
+      const cached = getCachedMergedProps(key);
+      if (cached) return cached;
+
+      const merged: any = { ...baseProps, ...userProps };
+      if (merged.animationDuration !== undefined)
+        merged.animationDuration = toMs(merged.animationDuration);
+      if (merged.animationDelay !== undefined)
+        merged.animationDelay = toMs(merged.animationDelay);
+
+      const result = Object.freeze(merged) as unknown as IconProps;
+      setCachedMergedProps(key, result as Readonly<IconProps>);
+      return result;
+    }
+
+    const merged: any = { ...baseProps, ...userProps };
+    if (merged.animationDuration !== undefined)
+      merged.animationDuration = toMs(merged.animationDuration);
+    if (merged.animationDelay !== undefined)
+      merged.animationDelay = toMs(merged.animationDelay);
+    return merged as IconProps;
+  });
+
+  const boxSize = $derived.by(() => {
+    const rawSize = (p as any).size ?? (baseProps as any).size;
+    return toSizePx(coerceSize(rawSize, 24));
+  });
+
+  const hostClass = $derived(
+    p.class ? `bz-icon-wrapper ${p.class}` : "bz-icon-wrapper",
+  );
+
+  const hostStyle = $derived.by(() => {
+    const sz = boxSize;
+    const base = `--bz-icon-size:${sz};width:${sz};height:${sz};inline-size:${sz};block-size:${sz};`;
+    return p.style ? base + p.style : base;
+  });
+
+  let mountKey = $state(0);
+  function onLazyMount() {
+    mountKey++;
+  }
+
+  function applyActions(node: HTMLElement, entries: ActionEntry[] = []) {
+    if (!entries?.length) return { update() {}, destroy() {} };
+
+    let prevEntries: ActionEntry[] = entries;
+    let handles = entries
+      .map(([fn, params]) => fn?.(node, params))
+      .filter(Boolean);
+
+    return {
+      update(next: ActionEntry[] = []) {
+        if (!next?.length) {
+          handles.forEach((h) => h?.destroy?.());
+          handles = [];
+          prevEntries = [];
+          return;
+        }
+        if (next.length === prevEntries.length) {
+          let sameFns = true;
+          for (let i = 0; i < next.length; i++) {
+            if (next[i][0] !== prevEntries[i][0]) {
+              sameFns = false;
+              break;
+            }
+          }
+          if (sameFns) {
+            handles.forEach((h, i) => h?.update?.(next[i][1]));
+            prevEntries = next;
+            return;
+          }
+        }
+        handles.forEach((h) => h?.destroy?.());
+        prevEntries = next;
+        handles = next
+          .map(([fn, params]) => fn?.(node, params))
+          .filter(Boolean);
+      },
+      destroy() {
+        handles.forEach((h) => h?.destroy?.());
+        handles = [];
+        prevEntries = [];
+      },
+    };
+  }
+</script>
+
+{#if Comp}
+  <span
+    class={hostClass}
+    style={p.tooltipDelay != null
+      ? `${hostStyle};--bz-tooltip-delay:${p.tooltipDelay}ms`
+      : hostStyle}
+    data-bz-tooltip={p.tooltip || undefined}
+    use:applyActions={p.actions ?? []}
+    onlazyMount={onLazyMount}
+  >
+    {#key mountKey}
+      <Comp {...child as any} />
+    {/key}
+  </span>
+{:else if _loading}
+  <span class="bz-icon-skeleton" aria-hidden="true"></span>
+{:else if iconName}
+  <span class="bz-icon-error" data-icon={iconName}
+    >⚠️ Icon not found: {iconName}</span
+  >
+{:else}
+  <span class="bz-icon-skeleton" aria-hidden="true"></span>
+{/if}
+
+<style>
+  .bz-icon-wrapper {
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    pointer-events: auto;
+    contain: layout style;
+    content-visibility: auto;
+  }
+
+  .bz-icon-wrapper[data-bz-tooltip]::before,
+  .bz-icon-wrapper[data-bz-tooltip]::after {
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+    pointer-events: none;
+    opacity: 0;
+    transition:
+      opacity 0.15s ease var(--bz-tooltip-delay, 0ms),
+      transform 0.15s ease var(--bz-tooltip-delay, 0ms);
+    z-index: 9999;
+  }
+
+  .bz-icon-wrapper[data-bz-tooltip]::after {
+    content: attr(data-bz-tooltip);
+    background: var(--bz-tooltip-bg, #1a1a1a);
+    color: var(--bz-tooltip-color, #fff);
+    font-size: 11px;
+    font-weight: 500;
+    line-height: 1.4;
+    padding: 5px 9px;
+    border-radius: 6px;
+    white-space: nowrap;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
+    transform: translateX(-50%) translateY(3px);
+  }
+
+  .bz-icon-wrapper[data-bz-tooltip]::before {
+    content: "";
+    border: 5px solid transparent;
+    border-top-color: var(--bz-tooltip-bg, #1a1a1a);
+    bottom: calc(100% + 0px);
+    transform: translateX(-50%) translateY(3px);
+  }
+
+  .bz-icon-wrapper[data-bz-tooltip]:hover::after,
+  .bz-icon-wrapper[data-bz-tooltip]:hover::before {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+
+  .bz-icon-wrapper :global(svg) {
+    pointer-events: bounding-box !important;
+  }
+  .bz-icon-wrapper :global(svg *) {
+    pointer-events: none !important;
+  }
+
+  .bz-icon-skeleton {
+    width: 100%;
+    height: 100%;
+    border-radius: var(--ui-radius, 0.25rem);
+    background: color-mix(in oklab, currentColor 12%, transparent);
+    opacity: 0.5;
+  }
+
+  .bz-icon-error {
+    display: inline-block;
+    background: var(--danger-color, #ef4444);
+    color: var(--danger-foreground, #fff);
+    font-size: 0.75rem;
+    border-radius: var(--ui-radius, 0.25rem);
+    font-weight: 600;
+  }
+</style>

package/dist/IconLazy.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { Component } from "svelte";
+import type { IconName } from "./icons/registry.js";
+import { iconPresets, iconVariants } from "./presets.js";
+import type { IconProps } from "./types.js";
+type ActionFn<T = HTMLElement, P = any> = (node: T, params?: P) => void | {
+    update?: (p?: P) => void;
+    destroy?: () => void;
+};
+type ActionEntry<T = HTMLElement> = [ActionFn<T, any>, any?];
+type IconPresetName = keyof typeof iconPresets;
+type IconVariantName = keyof typeof iconVariants;
+interface LazyIconProps extends Omit<IconProps, "children"> {
+    name?: IconName;
+    preset?: IconPresetName;
+    variant?: IconVariantName;
+    class?: string;
+    style?: string;
+    actions?: ActionEntry[];
+}
+declare const IconLazy: Component<LazyIconProps, {}, "">;
+type IconLazy = ReturnType<typeof IconLazy>;
+export default IconLazy;

package/dist/effects.js

@@ -1,6 +1,3 @@
-// ============================================================================
-// 🔥 CACHE GLOBAL Y CONSTANTES
-// ============================================================================
 let _prefersReducedMotion = null;
 let _mediaQueryListenerInitialized = false;
 const SLIDE_MAP = {
@@ -38,31 +35,29 @@ function getPrefersReducedMotion() {
     }
     return _prefersReducedMotion;
 }
-// ============================================================================
-// 🔥 FUNCIÓN PRINCIPAL
-// ============================================================================
+
 export function iconEffects(node, opts = {}) {
     const reducedMotion = getPrefersReducedMotion();
-    // Estados
+
     let hovering = false;
     let pressing = false;
     let rafId = 0;
     let enterTimer = 0;
     let leaveTimer = 0;
-    // Detección de tipos (una sola vez)
+
     const isSVG = node instanceof SVGElement;
     const isHTML = node instanceof HTMLElement;
     const canTransform = isSVG || isHTML;
-    // Target para eventos (SVG padre si es <g>)
+
     let target = node;
     if (node instanceof SVGGElement && node.ownerSVGElement) {
         target = node.ownerSVGElement;
     }
-    // Setup pointer-events
+
     if (target instanceof SVGSVGElement) {
         target.style.pointerEvents = "bounding-box";
     }
-    // Setup inicial — tooltip lo maneja Icon.svelte via data-bz-tooltip + CSS
+
     if (opts.cursor && isHTML)
         node.style.cursor = opts.cursor;
     const ms = opts.transitionMs ?? DEFAULTS.transitionMs;
@@ -75,20 +70,18 @@ export function iconEffects(node, opts = {}) {
     if (opts.pulse && !reducedMotion) {
         node.classList.add(CLASSES.pulse);
     }
-    // ============================================================================
-    // 🔥 APPLY ANIMATIONS (máxima eficiencia)
-    // ============================================================================
+
     function apply() {
         if (rafId)
             cancelAnimationFrame(rafId);
-        // 🔥 OPTIMIZACIÓN: Para animaciones de salida, usar requestIdleCallback
+
         const shouldUseIdle = !hovering && !pressing && typeof requestIdleCallback !== "undefined";
         const applyImmediate = () => {
             if (reducedMotion)
                 return;
             const h = hovering;
             const p = pressing;
-            // Transform
+
             let t = "";
             const s = h ? (p && opts.pressScale) || opts.hoverScale || 1 : 1;
             if (s !== 1)
@@ -99,11 +92,11 @@ export function iconEffects(node, opts = {}) {
                 t += `${t ? " " : ""}${SLIDE_MAP[opts.slideOnHover]}`;
             if (canTransform)
                 node.style.transform = t;
-            // Classes (toggles O(1))
+
             node.classList.toggle(CLASSES.spin, h && !!opts.spinOnHover);
             node.classList.toggle(CLASSES.bounce, h && !!opts.bounceOnHover);
             node.classList.toggle(CLASSES.wiggle, h && !!opts.wiggleOnHover);
-            // ✅ heartbeat: hover o active (click/press)
+
             node.classList.toggle(CLASSES.heartbeat, (h && !!opts.heartbeatOnHover) || (p && !!opts.heartbeatOnActive));
             node.classList.toggle(CLASSES.elastic, p && !!opts.elasticOnClick);
             if (opts.morphOnHover) {
@@ -118,9 +111,7 @@ export function iconEffects(node, opts = {}) {
             rafId = requestAnimationFrame(applyImmediate);
         }
     }
-    // ============================================================================
-    // 🔥 EVENT HANDLERS
-    // ============================================================================
+
     const onEnter = () => {
         clearTimeout(leaveTimer);
         clearTimeout(enterTimer);
@@ -155,9 +146,7 @@ export function iconEffects(node, opts = {}) {
         if (focusEnabled)
             target.removeAttribute(kbAttr);
     };
-    // ============================================================================
-    // 🔥 LISTENERS
-    // ============================================================================
+
     const passive = { passive: true };
     target.addEventListener("pointerenter", onEnter, passive);
     target.addEventListener("pointerleave", onLeave, passive);
@@ -165,9 +154,7 @@ export function iconEffects(node, opts = {}) {
     target.addEventListener("pointerup", onUp, passive);
     target.addEventListener("keydown", onKey);
     target.addEventListener("mousedown", onMouse, passive);
-    // ============================================================================
-    // 🔥 API
-    // ============================================================================
+
     return {
         update(next) {
             if (!next)
@@ -180,7 +167,7 @@ export function iconEffects(node, opts = {}) {
             if (next.cursor !== opts.cursor && isHTML) {
                 node.style.cursor = next.cursor || "";
             }
-            // Detectar cambios relevantes para re-aplicar
+
             const changed = next.hoverScale !== opts.hoverScale ||
                 next.pressScale !== opts.pressScale ||
                 next.rotateOnHover !== opts.rotateOnHover ||
@@ -191,7 +178,7 @@ export function iconEffects(node, opts = {}) {
                 next.morphOnHover !== opts.morphOnHover ||
                 next.elasticOnClick !== opts.elasticOnClick ||
                 next.heartbeatOnActive !== opts.heartbeatOnActive ||
-                /** ✅ nuevo */
+                
                 next.heartbeatOnHover !== opts.heartbeatOnHover;
             Object.assign(opts, next);
             if (changed)

package/dist/icons/Ai.svelte

@@ -30,7 +30,7 @@
       stroke="currentColor"
       stroke-width="1.8"
       stroke-linecap="round"
-      d="M9 2v2m6-2v2M9 20v2m6-2v2M2 9h2m-2 6h2M20 9h2m-2 6h2"
+      d="M9 2v2m6-2v2M9 20v2m6-2v2M2 9h2m-2 6h2m16-6h2m-2 6h2"
     />
 
     <path
@@ -38,7 +38,7 @@
       stroke="currentColor"
       stroke-width="1.5"
       stroke-linejoin="round"
-      d="M12 8l3 4-3 4-3-4z"
+      d="m12 8 3 4-3 4-3-4z"
     />
 
     <circle cx="12" cy="12" r="1" fill="currentColor" />

package/dist/icons/Alternate.svelte

@@ -15,12 +15,12 @@
   {#snippet children()}
     <path
       fill="currentColor"
-      d="M21 5c0-.55-.45-1-1-1H9c-.55 0-1 .45-1 1s.45 1 1 1h5v12c0 .55.45 1 1 1s1-.45 1-1V6h4c.55 0 1-.45 1-1z"
+      d="M21 5c0-.55-.45-1-1-1H9c-.55 0-1 .45-1 1s.45 1 1 1h5v12c0 .55.45 1 1 1s1-.45 1-1V6h4c.55 0 1-.45 1-1"
     />
 
     <path
       fill="currentColor"
-      d="M11 11c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1h3v6c0 .55.45 1 1 1s1-.45 1-1v-6h1c.55 0 1-.45 1-1z"
+      d="M11 11c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1h3v6c0 .55.45 1 1 1s1-.45 1-1v-6h1c.55 0 1-.45 1-1"
     />
   {/snippet}
 </IconBase>

package/dist/icons/AnimatedArrowLeft.svelte

@@ -20,7 +20,7 @@
       stroke-linecap="round"
       stroke-linejoin="round"
       class="bz-arrow-path"
-      d="M9 6l6 6-6 6"
+      d="m9 6 6 6-6 6"
     />
   {/snippet}
 </IconBase>

package/dist/icons/ArrowDown.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import IconBase from "../IconBase.svelte";
+  import type { IconProps } from "../types";
+  const props: IconProps = $props();
+</script>
+
+<IconBase
+  {...props}
+  mode="solid"
+  viewBox="0 0 24 24"
+  ariaLabel={props.ariaLabel ?? "Arrow down"}
+  title={props.title ?? ""}
+>
+  <path
+    fill="currentColor"
+    d="m20 12-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8z"
+  />
+</IconBase>

package/dist/icons/ArrowDown.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { IconProps } from "../types";
+declare const ArrowDown: import("svelte").Component<IconProps, {}, "">;
+type ArrowDown = ReturnType<typeof ArrowDown>;
+export default ArrowDown;

package/dist/icons/ArrowLeft.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import IconBase from "../IconBase.svelte";
+  import type { IconProps } from "../types";
+  const props: IconProps = $props();
+</script>
+
+<IconBase
+  {...props}
+  mode="solid"
+  viewBox="0 0 24 24"
+  ariaLabel={props.ariaLabel ?? "Arrow left"}
+  title={props.title ?? ""}
+>
+  <path
+    fill="currentColor"
+    d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20z"
+  />
+</IconBase>