@genarou/blazir-icons 1.2.16 → 1.3.2

package/dist/IconBadge.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { DynamicIconProps } from "./types";
+interface BadgeProps extends DynamicIconProps {
+    /** true = punto rojo | number = conteo | string = texto */
+    badge?: boolean | number | string;
+    /** Color de fondo del badge. Default: rojo */
+    badgeColor?: string;
+    /** Color del texto del badge. Default: blanco */
+    badgeTextColor?: string;
+    /** Tamaño del badge en px. Default: 8 (dot) o 16 (con texto) */
+    badgeSize?: number;
+    /** Posición del badge. Default: top-right */
+    badgePosition?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
+}
+declare const IconBadge: import("svelte").Component<BadgeProps, {}, "">;
+type IconBadge = ReturnType<typeof IconBadge>;
+export default IconBadge;

package/dist/IconBase.svelte

@@ -10,77 +10,102 @@
   } from "./utils/defaults.js";
 
   // Constantes
-  const DEFAULT_MS = 180;
-  const DEFAULT_EASING = "cubic-bezier(.2,.8,.2,1)";
+  const DEFAULT_MS = 250;
+  const DEFAULT_EASING = "ease";
   const DEFAULT_ICON_COLOR = "var(--icon-fg, var(--ui-muted-fg, currentColor))";
 
   const MS_REGEX = /ms$/;
   const S_REGEX = /s$/;
 
+  // Presets semánticos de velocidad hover
+  const HOVER_SPEED_MAP: Record<string, number> = {
+    instant: 0,
+    fast: 120,
+    normal: 250,
+    slow: 400,
+    sluggish: 600,
+  };
+
   function normalizeMs(v?: number | string): number {
     if (v == null) return DEFAULT_MS;
     if (typeof v === "number") return v;
     const s = String(v).trim();
+    if (s in HOVER_SPEED_MAP) return HOVER_SPEED_MAP[s];
     if (MS_REGEX.test(s)) return parseFloat(s);
     if (S_REGEX.test(s)) return parseFloat(s) * 1000;
     const n = parseFloat(s);
     return Number.isFinite(n) ? n : DEFAULT_MS;
   }
 
-  let uidCounter = 0;
-  function uid(): string {
-    return `bz-${Date.now().toString(36)}-${(uidCounter++).toString(36)}`;
-  }
+  // UID por instancia — generado UNA SOLA VEZ por componente, nunca en $derived.
+  // Antes se generaba dentro de $derived, lo que causaba un UID nuevo cada vez
+  // que props.title cambiaba, produciendo IDs inconsistentes en aria-labelledby.
+  let _uidCounter = 0;
+  const _instanceUid = `bz-${Date.now().toString(36)}-${(_uidCounter++).toString(36)}`;
 
   // Props
   const props: IconProps & { mode?: IconMode } = $props();
 
   // Hover (nativo + heredado)
   let internalHovered = $state(false);
+  let internalPressed = $state(false);
   const isHovered = $derived(
-    internalHovered || (props.parentHoverContext?.hovered ?? false)
+    !props.disabled &&
+    !props.loading &&
+    (internalHovered || (props.parentHoverContext?.hovered ?? false))
   );
+  const isPressed = $derived(!props.disabled && internalPressed);
 
-  // Color
+  // Color — prioridad: activeColor (pressed) > hoverColor (hover) > color > default
   const effectiveColor = $derived(
-    (isHovered && props.hoverColor ? props.hoverColor : props.color) ??
-      DEFAULT_ICON_COLOR
+    (isPressed && props.activeColor
+      ? props.activeColor
+      : isHovered && props.hoverColor
+        ? props.hoverColor
+        : props.color) ?? DEFAULT_ICON_COLOR
   );
 
   // Mode
   const mode = $derived(props.mode ?? "solid");
 
-  // Derivados base
+  // Derivados base — usando $derived.by donde el cuerpo es complejo
   const klass = $derived(normalizeClass(props));
   const common = $derived(commonDefaults(props));
-  const propsWithEffectiveColor = $derived({ ...props, color: effectiveColor });
+
+  // propsWithEffectiveColor: evitar reconstruir si color no cambió.
+  // $derived.by garantiza que solo re-ejecuta cuando sus deps cambian.
+  const propsWithEffectiveColor = $derived.by(() => ({
+    ...props,
+    color: effectiveColor,
+  }));
+
   const visual = $derived(modeDefaults(mode, propsWithEffectiveColor));
   const timingStyle = $derived(getAnimationStyle(props));
 
-  // Transiciones
+  // Transiciones — hoverSpeed > transitionMs > default
   const hoverMs = $derived(
-    normalizeMs(props.transitionMs ?? props.animationDuration)
-  );
-  const hoverEase = $derived(
-    props.transitionEasing ?? props.animationEasing ?? DEFAULT_EASING
+    normalizeMs(props.transitionMs ?? props.hoverSpeed)
   );
+  const hoverEase = $derived(props.transitionEasing ?? DEFAULT_EASING);
 
-  // Animaciones continuas
-  const spinDuration = $derived(() => {
+  // Animaciones continuas — $derived.by idiomático (Svelte 5)
+  const spinDuration = $derived.by(() => {
+    if (props.loading) return "0.75s";          // loading siempre gira
     if (!props.spin) return null;
     if (props.spin === true) return "1s";
     return typeof props.spin === "number"
       ? `${props.spin}ms`
       : String(props.spin);
   });
+
   const wantsPulse = $derived(!!props.pulse);
   const wantsBounce = $derived(!!props.bounce);
   const wantsWiggle = $derived(!!props.wiggle);
   const wantsHeartbeat = $derived(!!props.heartbeat);
   const wantsElastic = $derived(!!props.elastic);
 
-  // ===== Chevron state ⇒ grados (se animará por CSS) =====
-  const effectiveChevronState = $derived(() => {
+  // ===== Chevron state ⇒ grados =====
+  const effectiveChevronState = $derived.by(() => {
     if (props.chevronState) return props.chevronState;
     if (props.chevronOpen !== undefined) {
       return props.chevronOpen ? "open" : "closed";
@@ -88,8 +113,8 @@
     return undefined;
   });
 
-  const chevronDeg = $derived((): number | null => {
-    switch (effectiveChevronState()) {
+  const chevronDeg = $derived.by((): number | null => {
+    switch (effectiveChevronState) {
       case "open":
       case "down":
         return 90;
@@ -107,11 +132,10 @@
 
   // Clase final
   const finalClass = $derived(
-    `bz-icon ${klass}${effectiveChevronState() ? " bz-icon-chevron" : ""}`.trim()
+    `bz-icon ${klass}${effectiveChevronState ? " bz-icon-chevron" : ""}`.trim()
   );
 
   // ===== SVG transform (solo rotate/flip declarativos) =====
-  // Rot/flip en <g> para no interferir con la transición del <svg>
   function getViewBoxCenter(vb: string) {
     const parts = vb.trim().split(/\s+/);
     const minX = Number(parts[0]);
@@ -120,12 +144,12 @@
     const h = Number(parts[3]);
     return { cx: minX + w / 2, cy: minY + h / 2 };
   }
+
   const center = $derived(getViewBoxCenter(common.viewBox));
 
-  const svgTransform = $derived(() => {
+  const svgTransform = $derived.by(() => {
     const cmds: string[] = [];
 
-    // Rotate (prop)
     if (props.rotate != null) {
       const r =
         typeof props.rotate === "number"
@@ -134,7 +158,6 @@
       if (!isNaN(r)) cmds.push(`rotate(${r} ${center.cx} ${center.cy})`);
     }
 
-    // Flip (prop)
     if (props.flipH || props.flipV) {
       const sx = props.flipH ? -1 : 1;
       const sy = props.flipV ? -1 : 1;
@@ -143,48 +166,39 @@
       );
     }
 
-    // ⛔️ OJO: chevron NO va aquí (aquí no hay transición CSS)
     return cmds.length ? cmds.join(" ") : "";
   });
 
-  // ===== Style inline del <svg> (incluye transición y chevron por CSS) =====
-  const style = $derived(() => {
+  // ===== Style inline del <svg> =====
+  const style = $derived.by(() => {
     const parts: string[] = [];
 
-    // estilo previo del usuario
     if (props.style) {
       parts.push(props.style.endsWith(";") ? props.style : `${props.style};`);
     }
 
-    // color
+    if (props.disabled) parts.push("opacity:0.4;pointer-events:none;");
     parts.push(`color:${effectiveColor};`);
 
-    // Vars de timing (si las hay)
     const tstyle = timingStyle;
     if (tstyle) parts.push(tstyle);
 
-    // transición para transform/opacidad/stroke/fill
     parts.push(
       `transition:color ${hoverMs}ms ${hoverEase},fill ${hoverMs}ms ${hoverEase},` +
         `stroke ${hoverMs}ms ${hoverEase},transform ${hoverMs}ms ${hoverEase},opacity ${hoverMs}ms ${hoverEase};`
     );
 
-    // ✅ Var CSS para chevron (si hay estado). Usamos rotate(Xdeg)
-    const deg = chevronDeg();
+    const deg = chevronDeg;
     if (deg != null) {
       parts.push(`--bz-chevron-rot: rotate(${deg}deg);`);
     } else {
-      // mantener consistente
       parts.push(`--bz-chevron-rot: rotate(0deg);`);
     }
 
-    // Transform del SVG: incluir SIEMPRE la var del chevron al final
-    // (puedes añadir más términos aquí si usas CSS-only transforms)
     parts.push(`transform-origin:center;`);
     parts.push(`transform: var(--bz-chevron-rot);`);
 
-    // Animaciones declarativas (spin/pulse/etc) — se apilan con transform
-    const spin = spinDuration();
+    const spin = spinDuration;
     if (
       spin ||
       wantsPulse ||
@@ -212,10 +226,10 @@
     return parts.join(" ");
   });
 
-  // A11y
+  // A11y — computedTitleId usa el UID de instancia (estable durante todo el ciclo de vida)
   const ariaHidden = $derived(props.decorative ? "true" : undefined);
   const computedTitleId = $derived(
-    props.title ? (props.titleId ?? `bz-icon-title-${uid()}`) : undefined
+    props.title ? (props.titleId ?? `bz-icon-title-${_instanceUid}`) : undefined
   );
   const ariaLabel = $derived(
     props.decorative ? undefined : props.ariaLabel || undefined
@@ -228,7 +242,8 @@
   const finalSize = $derived(
     typeof common.size === "number" ? `${common.size}px` : common.size
   );
-  const safeAttrs = $derived(() => {
+
+  const safeAttrs = $derived.by(() => {
     if (!props.attrs) return {};
     const { width, height, ...rest } = props.attrs as any;
     return rest;
@@ -238,9 +253,11 @@
   let svgRef: SVGSVGElement | null = $state(null);
   let fxLayer: SVGGElement | null = $state(null);
 
-  // Efectos (incluye heartbeatOnHover si viene en attrs/effects)
+  // Efectos — el $effect solo se re-ejecuta cuando fxLayer o las opciones de
+  // efectos cambian. Devuelve la función de cleanup para destroy automático.
   $effect(() => {
     if (!fxLayer) return;
+
     const effectsOpts: IconEffectOptions = { ...(props.effects ?? {}) };
     const a = props.attrs;
     if (a) {
@@ -255,22 +272,22 @@
       if (a.hoverScale) effectsOpts.hoverScale = a.hoverScale;
       if (a.pressScale) effectsOpts.pressScale = a.pressScale;
     }
+
+    if (props.tooltip) effectsOpts.tooltip = props.tooltip;
     const controller = iconEffects(fxLayer, effectsOpts);
     return () => controller.destroy();
   });
 
-  function handleMouseEnter() {
-    internalHovered = true;
-  }
-  function handleMouseLeave() {
-    internalHovered = false;
-  }
+  function handleMouseEnter() { internalHovered = true; }
+  function handleMouseLeave() { internalHovered = false; internalPressed = false; }
+  function handleMouseDown()  { internalPressed = true; }
+  function handleMouseUp()    { internalPressed = false; }
 </script>
 
 <svg
   bind:this={svgRef}
   xmlns="http://www.w3.org/2000/svg"
-  {...safeAttrs()}
+  {...safeAttrs}
   width={finalSize}
   height={finalSize}
   viewBox={common.viewBox}
@@ -281,7 +298,7 @@
   aria-label={ariaLabel}
   aria-labelledby={ariaLabelledby}
   focusable="false"
-  style={style()}
+  style={style}
   fill={visual.fill}
   stroke={visual.stroke}
   stroke-width={visual.strokeWidth}
@@ -291,10 +308,20 @@
   data-testid={props.testId}
   onmouseenter={handleMouseEnter}
   onmouseleave={handleMouseLeave}
+  onmousedown={handleMouseDown}
+  onmouseup={handleMouseUp}
 >
-  {#if props.title}<title id={computedTitleId}>{props.title}</title>{/if}
-  <g bind:this={fxLayer} transform={svgTransform()}>
-    {@render props.children?.()}
+  {#if props.title}
+    <title id={computedTitleId}>{props.title}</title>
+  {:else if props.tooltip}
+    <title>{props.tooltip}</title>
+  {/if}
+  <g bind:this={fxLayer} transform={svgTransform}>
+    {#if props.loading}
+      <circle cx="12" cy="12" r="9" fill="none" stroke="currentColor" stroke-width="2.5" stroke-dasharray="42 15" stroke-linecap="round" />
+    {:else}
+      {@render props.children?.()}
+    {/if}
   </g>
 </svg>
 
@@ -321,6 +348,7 @@
       transform: rotate(360deg);
     }
   }
+
   @keyframes bz-icon-bounce {
     0% {
       transform: translateY(0);
@@ -332,6 +360,7 @@
       transform: translateY(0);
     }
   }
+
   @keyframes bz-icon-pulse {
     0%,
     100% {
@@ -343,6 +372,7 @@
       opacity: 0.92;
     }
   }
+
   @keyframes bz-icon-wiggle {
     0% {
       transform: rotate(0deg);
@@ -357,6 +387,7 @@
       transform: rotate(0deg);
     }
   }
+
   @keyframes bz-icon-elastic {
     0% {
       transform: scale(1);
@@ -371,6 +402,7 @@
       transform: scale(1);
     }
   }
+
   @keyframes bz-icon-heartbeat {
     0%,
     100% {

package/dist/effects.js

@@ -62,9 +62,7 @@ export function iconEffects(node, opts = {}) {
     if (target instanceof SVGSVGElement) {
         target.style.pointerEvents = "bounding-box";
     }
-    // Setup inicial
-    if (opts.tooltip)
-        target.setAttribute("title", opts.tooltip);
+    // 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;

package/dist/icons/Camera.svelte

@@ -0,0 +1,19 @@
+<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 ?? "Globe grid icon"}
+  title={props.title ?? ""}
+>
+  <path
+    fill="currentColor"
+    d="M11.4 9h8q-.675-1.725-2.062-2.963T14.15 4.3zm-2.3 2l4-6.9q-.275-.05-.55-.075T12 4q-1.65 0-3.075.625T6.4 6.3zm-4.85 3H9.7l-4-6.9q-.8 1.025-1.25 2.263T4 12q0 .525.063 1.013T4.25 14m5.6 5.7l2.7-4.7H4.6q.675 1.725 2.063 2.963T9.85 19.7M12 20q1.65 0 3.075-.625T17.6 17.7L14.9 13l-4 6.9q.275.05.538.075T12 20m6.3-3.1q.8-1.025 1.25-2.262T20 12q0-.525-.062-1.012T19.75 10H14.3zM12 22q-2.05 0-3.875-.788t-3.187-2.15t-2.15-3.187T2 12q0-2.075.788-3.887t2.15-3.175t3.187-2.15T12 2q2.075 0 3.888.788t3.174 2.15t2.15 3.175T22 12q0 2.05-.788 3.875t-2.15 3.188t-3.175 2.15T12 22"
+  />
+</IconBase>

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

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

package/dist/icons/Cards.svelte

@@ -0,0 +1,19 @@
+<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 ?? "Article icon"}
+  title={props.title ?? ""}
+>
+  <path
+    fill="currentColor"
+    d="M11 9h6q.425 0 .713-.288T18 8t-.288-.712T17 7h-6.025q-.425 0-.7.288T10 8t.288.713T11 9m0 3h3q.425 0 .713-.288T15 11t-.288-.712T14 10h-3.025q-.425 0-.7.288T10 11t.288.713T11 12m-5.55 8.975Q4.625 21.1 4 20.6t-.75-1.325L2.025 10.35q-.125-.8.388-1.45t1.312-.775H4V14q0 1.65 1.175 2.825T8 18h11q-.2.525-.612.888t-1.013.437zM8 16.1q-.825 0-1.412-.587T6 14.1V5q0-.825.588-1.412T8 3h12q.825 0 1.413.588T22 5v9.1q0 .825-.587 1.413T20 16.1z"
+  />
+</IconBase>

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

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

package/dist/icons/CloudAlert.svelte

@@ -0,0 +1,19 @@
+<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 ?? "Cloud warning icon"}
+  title={props.title ?? ""}
+>
+  <path
+    fill="currentColor"
+    d="M6.5 20q-2.275 0-3.887-1.575T1 14.575q0-1.95 1.175-3.475T5.25 9.15q.625-2.3 2.5-3.725T12 4q2.925 0 4.963 2.038T19 11q1.725.2 2.863 1.488T23 15.5q0 1.875-1.312 3.188T18.5 20zm6.213-4.288Q13 15.425 13 15t-.288-.712T12 14t-.712.288T11 15t.288.713T12 16t.713-.288m0-3.5Q13 11.926 13 11.5V9q0-.425-.288-.712T12 8t-.712.288T11 9v2.5q0 .425.288.713T12 12.5t.713-.288"
+  />
+</IconBase>

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

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

package/dist/icons/CloudCheck.svelte

@@ -0,0 +1,19 @@
+<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 ?? "Cloud check icon"}
+  title={props.title ?? ""}
+>
+  <path
+    fill="currentColor"
+    d="m10.325 14.125l-1.4-1.4q-.3-.3-.7-.3t-.7.3t-.3.713t.3.712L9.65 16.3q.3.3.7.3t.7-.3l4.225-4.225q.3-.3.3-.725t-.3-.725t-.725-.3t-.725.3zM6.5 20q-2.275 0-3.887-1.575T1 14.575q0-1.95 1.175-3.475T5.25 9.15q.625-2.3 2.5-3.725T12 4q2.925 0 4.963 2.038T19 11q1.725.2 2.863 1.488T23 15.5q0 1.875-1.312 3.188T18.5 20z"
+  />
+</IconBase>

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

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

package/dist/icons/CloudDownload.svelte

@@ -0,0 +1,19 @@
+<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 ?? "Cloud download icon"}
+  title={props.title ?? ""}
+>
+  <path
+    fill="currentColor"
+    d="M6.5 20q-2.275 0-3.887-1.575T1 14.575q0-1.95 1.175-3.475T5.25 9.15q.575-2.025 2.138-3.4T11 4.075v8.075l-.9-.875Q9.825 11 9.413 11t-.713.3q-.275.275-.275.7t.275.7l2.6 2.6q.3.3.7.3t.7-.3l2.6-2.6q.275-.275.287-.687T15.3 11.3q-.275-.275-.687-.288t-.713.263l-.9.875V4.075q2.575.35 4.288 2.313T19 11q1.725.2 2.863 1.488T23 15.5q0 1.875-1.312 3.188T18.5 20z"
+  />
+</IconBase>

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

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

package/dist/icons/Colors.svelte

@@ -0,0 +1,13 @@
+<!-- src/lib/icons/Palette.svelte -->
+<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">
+  <path
+    fill="currentColor"
+    d="M12 22q-2.05 0-3.875-.788t-3.187-2.15t-2.15-3.187T2 12q0-2.075.813-3.9t2.2-3.175T8.25 2.788T12.2 2q2 0 3.775.688t3.113 1.9t2.125 2.875T22 11.05q0 2.875-1.75 4.413T16 17h-1.85q-.225 0-.312.125t-.088.275q0 .3.375.863t.375 1.287q0 1.25-.687 1.85T12 22m-4.425-9.425Q8 12.15 8 11.5t-.425-1.075T6.5 10t-1.075.425T5 11.5t.425 1.075T6.5 13t1.075-.425m3-4Q11 8.15 11 7.5t-.425-1.075T9.5 6t-1.075.425T8 7.5t.425 1.075T9.5 9t1.075-.425m5 0Q16 8.15 16 7.5t-.425-1.075T14.5 6t-1.075.425T13 7.5t.425 1.075T14.5 9t1.075-.425m3 4Q19 12.15 19 11.5t-.425-1.075T17.5 10t-1.075.425T16 11.5t.425 1.075T17.5 13t1.075-.425"
+  />
+</IconBase>

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

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

package/dist/icons/CreditCard.svelte

@@ -0,0 +1,19 @@
+<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 ?? "Email icon"}
+  title={props.title ?? ""}
+>
+  <path
+    fill="currentColor"
+    d="M4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20zm1-3h10L10 7H5zm8-8h6V7h-6z"
+  />
+</IconBase>

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

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

package/dist/icons/Desktop.svelte

@@ -0,0 +1,19 @@
+<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 ?? "Monitor icon"}
+  title={props.title ?? ""}
+>
+  <path
+    fill="currentColor"
+    d="M1 21v-2h22v2zm3-3q-.825 0-1.412-.587T2 16V5q0-.825.588-1.412T4 3h16q.825 0 1.413.588T22 5v11q0 .825-.587 1.413T20 18zm0-2h16V5H4zm0 0V5z"
+  />
+</IconBase>

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

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

package/dist/icons/DoughnutChart.svelte

@@ -0,0 +1,19 @@
+<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 ?? "Signal icon"}
+  title={props.title ?? ""}
+>
+  <path
+    fill="currentColor"
+    d="M11.025 21.95q-3.85-.375-6.425-3.225T2.025 12T4.6 5.275t6.425-3.225v3q-2.6.35-4.3 2.325T5.025 12t1.7 4.625t4.3 2.325zm2 0v-3q2.35-.3 3.975-1.95t1.975-4h3q-.35 3.575-2.863 6.088t-6.087 2.862M18.975 11Q18.625 8.65 17 7t-3.975-1.95v-3q3.575.35 6.088 2.863T21.975 11z"
+  />
+</IconBase>

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

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

package/dist/icons/Earth.svelte

@@ -0,0 +1,19 @@
+<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 ?? "Globe settings icon"}
+  title={props.title ?? ""}
+>
+  <path
+    fill="currentColor"
+    d="M12 20q.45 0 .863-.05t.837-.15L12.5 18H9v-1q0-.825.588-1.412T11 15h2v-3h-2q-.425 0-.712-.288T10 11V9h-.45q-.65 0-1.1-.437T8 7.475q0-.225.063-.45T8.25 6.6L9.8 4.325Q7.275 5.05 5.637 7.15T4 12h1v-1q0-.425.288-.712T6 10h2q.425 0 .713.288T9 11v1q0 .425-.288.713T8 13v1q0 .825-.587 1.413T6 16h-.925q1.05 1.8 2.875 2.9T12 20m7.6-5.55q.2-.575.3-1.187T20 12q0-2.8-1.7-4.937T14 4.25V7q.825 0 1.413.588T16 9v2q.475 0 .85.113t.725.462zM12 22q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22"
+  />
+</IconBase>

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

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

package/dist/icons/Globe.svelte

@@ -0,0 +1,19 @@
+<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 ?? "Radar icon"}
+  title={props.title ?? ""}
+>
+  <path
+    fill="currentColor"
+    d="M13 21h5v2H6v-2h5v-1.05a10 10 0 0 1-7.684-4.988l1.737-.992A8 8 0 1 0 15.97 3.053l.993-1.737A10 10 0 0 1 22 10c0 5.185-3.946 9.449-9 9.95zm-1-4a7 7 0 1 1 0-14a7 7 0 0 1 0 14"
+  />
+</IconBase>