@genarou/blazir-icons 1.1.5 → 1.1.9

package/dist/Icon.svelte

@@ -1,16 +1,16 @@
-<!-- src/lib/Icon.svelte -->
 <script lang="ts">
   import { iconRegistry, type IconName } from "./icons/registry";
-  import type { IconProps } from "./types";
+  import type { IconComponent, IconProps } from "./types";
   import { coerceSize } from "./utils/defaults";
 
   let {
     name,
-    size = 24, // ✅ primitivo
-    color = "#6b7280",
+    size = 24,
+    color,
     stroke,
     strokeWidth,
     fill,
+    class: classAttr = "",
     className = "",
     ariaLabel,
     title = "",
@@ -30,16 +30,24 @@
     ...rest
   }: { name: IconName } & Partial<IconProps> = $props();
 
-  const Comp = $derived(iconRegistry[name]);
+  // ✅ Comp tipado como el mismo tipo que usa tu registry
+  const Comp: IconComponent | undefined = $derived(iconRegistry?.[name]);
+
+  // ❌ ANTES: const colorOverrides = $derived(() => color !== undefined ? {...} : {...})
+  // ✅ AHORA:
+  const colorOverrides = $derived(
+    color !== undefined
+      ? { color, stroke: stroke ?? "none", fill: fill ?? color }
+      : { stroke, fill }
+  );
 
-  const passProps = $derived(() => ({
-    // ✅ tamaño garantizado como number|string simple
+  // ❌ ANTES: const passProps = $derived(() => ({ ... }))
+  // ✅ AHORA:
+  const passProps = $derived({
     size: coerceSize(size, 24),
-    color,
-    stroke: color ? (stroke ?? "none") : stroke,
-    fill: color ? (fill ?? color) : fill,
+    ...colorOverrides,
     strokeWidth,
-    className,
+    className: classAttr || className,
     ariaLabel,
     title,
     rotate,
@@ -62,7 +70,7 @@
         : animationDelay,
     animationEasing,
     ...rest,
-  }));
+  });
 </script>
 
 {#if Comp}

package/dist/IconBase.svelte

@@ -1,3 +1,4 @@
+<!-- 📁 src/lib/IconBase.svelte -->
 <script lang="ts">
   import type { IconMode, IconProps } from "./types.js";
   import {
@@ -11,58 +12,122 @@
     normalizeClass,
   } from "./utils/defaults.js";
 
+  // Props del icono + modo visual
   const props: IconProps & { mode?: IconMode } = $props();
 
+  // ====== Derivados visuales / clases / defaults ======
   const mode = $derived(props.mode ?? "solid");
   const klass = $derived(normalizeClass(props));
-  const common = $derived(commonDefaults(props)); // ✅ ya coercea size
-  const visual = $derived(modeDefaults(mode, props));
+  const common = $derived(commonDefaults(props)); // size, viewBox, preserveAspectRatio
+  const visual = $derived(modeDefaults(mode, props)); // lo que ya tienes
 
   const animationClasses = $derived(getAnimationClasses(props).join(" "));
-  const baseTransform = $derived(combineTransforms(props));
-  const animationStyle = $derived(getAnimationStyle(props));
+  const timingStyle = $derived(getAnimationStyle(props)); // duration/delay/easing
 
-  const _ariaHidden = $derived(props.decorative ? "true" : undefined);
-  const _ariaLabel = $derived(
-    props.decorative ? undefined : props.ariaLabel || undefined
-  );
-  const _ariaLabelledby = $derived(
-    !props.decorative && props.title ? props.titleId : undefined
+  // ⚠️ Solo CSS transforms semánticos (chevron/morph/slide).
+  //    Quitamos rotate/flip del combine para no duplicar (rotate/flip van en <g transform>).
+  const cssTransformOnly = $derived(
+    combineTransforms({
+      ...props,
+      rotate: undefined as any,
+      flipH: false,
+      flipV: false,
+    })
   );
 
-  const transformStr = $derived(() =>
-    baseTransform
-      ? `transform: ${baseTransform}; transform-origin: center;`
-      : ""
+  // ✅ Sólo variable para spin (sin animation: inline)
+  const spinStyle = $derived(
+    (() => {
+      const s = props.spin;
+      if (!s) return "";
+      const dur = s === true ? "1s" : typeof s === "number" ? `${s}ms` : s;
+      return `--bz-spin: ${dur};`;
+    })()
   );
 
-  const spinStr = $derived(() => {
-    const s = props.spin;
-    if (!s) return "";
-    const dur = s === true ? "1s" : typeof s === "number" ? `${s}ms` : s;
-    return `animation: __icon_spin ${dur} linear infinite;`;
-  });
-
+  // Estilo final inline (añadimos transform-origin/box, timing y variable de spin)
   const style = $derived(
-    `${props.style || ""}${props.style && !props.style.endsWith(";") ? ";" : ""}${transformStr}${spinStr}${animationStyle}`.trim()
+    `${props.style || ""}${props.style && !props.style.endsWith(";") ? ";" : ""}` +
+      (cssTransformOnly ? `transform: ${cssTransformOnly};` : "") +
+      `transform-origin: center;` + // deja 'transform-box' fuera si TS te marca error
+      (spinStyle ? spinStyle : "") +
+      (timingStyle ? timingStyle : "") +
+      (props.color ? `color: ${props.color};` : "") // ← ★ clave para currentColor
   );
 
-  // ✅ finalSize es un VALOR, no una función
+  // A11y derivados
+  const ariaHidden = $derived(props.decorative ? "true" : undefined);
+  const ariaLabel = $derived(
+    props.decorative ? undefined : props.ariaLabel || undefined
+  );
+  const ariaLabelledby = $derived(
+    !props.decorative && props.title ? props.titleId : undefined
+  );
+
+  // Size final como string para width/height
   const finalSize = $derived(
     typeof common.size === "number" ? `${common.size}px` : common.size
   );
 
-  // ✅ evita que attrs pisen width/height
+  // Atributos seguros (evitar que pisen width/height del svg)
   const safeAttrs = $derived(() => {
     const a = { ...(props.attrs ?? {}) } as Record<string, any>;
     delete a.width;
-    delete a.height; // opcional: delete a.style si te meten width/height por style
+    delete a.height;
     return a;
   });
 
   const finalClass = $derived(
     `${klass} ${animationClasses} ${props.chevronState ? "bz-icon-chevron" : ""}`.trim()
   );
+
+  // ====== ROTATE / FLIPS en <g transform> (SVG nativo, centrado) ======
+  function getViewBoxCenter(vb: string) {
+    const parts = vb.trim().split(/\s+/).map(Number);
+    const [minX, minY, w, h] = parts.length === 4 ? parts : [0, 0, 24, 24];
+    return { cx: minX + w / 2, cy: minY + h / 2 };
+  }
+
+  const { cx, cy } = $derived(getViewBoxCenter(common.viewBox));
+
+  const svgTransform = $derived(() => {
+    const cmds: string[] = [];
+
+    // rotate
+    if (props.rotate != null) {
+      const r =
+        typeof props.rotate === "number"
+          ? props.rotate
+          : parseFloat(String(props.rotate));
+      if (!Number.isNaN(r)) cmds.push(`rotate(${r} ${cx} ${cy})`);
+    }
+
+    // flips
+    if (props.flipH || props.flipV) {
+      const sx = props.flipH ? -1 : 1;
+      const sy = props.flipV ? -1 : 1;
+      cmds.push(
+        `translate(${cx} ${cy}) scale(${sx} ${sy}) translate(${-cx} ${-cy})`
+      );
+    }
+
+    return cmds.join(" ");
+  });
+
+  const visualColor = $derived(() => {
+    if (!props.color) return visual;
+
+    const v = { ...visual };
+
+    if (mode === "solid") {
+      v.fill = props.color; // ← Fuerza el color aquí
+    } else {
+      v.stroke = props.color;
+    }
+
+    console.log("Final visual color:", v); // ← Debug temporal
+    return v;
+  });
 </script>
 
 <svg
@@ -74,27 +139,21 @@
   preserveAspectRatio={common.preserveAspectRatio}
   class={finalClass}
   role="img"
-  aria-hidden={_ariaHidden}
-  aria-label={_ariaLabel}
-  aria-labelledby={_ariaLabelledby}
+  aria-hidden={ariaHidden}
+  aria-label={ariaLabel}
+  aria-labelledby={ariaLabelledby}
   focusable="false"
   {style}
-  fill={visual.fill}
-  stroke={visual.stroke}
-  stroke-width={visual.strokeWidth}
+  fill={visualColor().fill}
+  stroke={visualColor().stroke}
+  stroke-width={visualColor().strokeWidth}
   stroke-linecap={props.strokeLinecap}
   stroke-linejoin={props.strokeLinejoin}
   vector-effect={props.nonScalingStroke ? "non-scaling-stroke" : undefined}
   data-testid={props.testId}
 >
   {#if props.title}<title id={props.titleId}>{props.title}</title>{/if}
-  {@render props.children?.()}
+  <g transform={svgTransform()}>
+    {@render props.children?.()}
+  </g>
 </svg>
-
-<style>
-  @keyframes __icon_spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-</style>

package/dist/icons/Blaze.svelte

@@ -0,0 +1,25 @@
+<!-- src/lib/icons/Leaf.svelte -->
+<script lang="ts">
+  import IconBase from "../IconBase.svelte";
+  import type { IconProps } from "../types";
+
+  const props: IconProps = $props();
+  const ariaLabel = $derived(props.ariaLabel ?? "Leaf");
+  const title = $derived(props.title ?? "");
+</script>
+
+<IconBase
+  {...props}
+  mode="outline"
+  {ariaLabel}
+  {title}
+  viewBox="0 0 24 24"
+  strokeLinecap="round"
+  strokeLinejoin="round"
+  strokeWidth={props.strokeWidth ?? 2}
+>
+  <path
+    fill="currentColor"
+    d="M12.063 2.065a.67.67 0 0 0-.759.149a.8.8 0 0 0-.205.738c.099.44.151.9.151 1.37c0 1.076-.271 1.83-.738 2.455c-.474.635-1.16 1.152-2.027 1.735a.3.3 0 0 0-.038.031l-.105.106a6.75 6.75 0 1 0 9.685 2.63a.25.25 0 0 0-.413-.05l-.208.241c-.878 1.026-1.587 1.855-3.04 2.225c-.062.015-.1.004-.127-.013a.24.24 0 0 1-.091-.124a.41.41 0 0 1 .074-.414c.777-.843 1.329-1.987 1.526-3.614c.37-3.048-1.015-6.294-3.685-7.465"
+  />
+</IconBase>

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

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

package/dist/icons/Box.svelte

@@ -0,0 +1,25 @@
+<!-- src/lib/icons/Archive.svelte -->
+<script lang="ts">
+  import IconBase from "../IconBase.svelte";
+  import type { IconProps } from "../types";
+
+  const props: IconProps = $props();
+  const ariaLabel = $derived(props.ariaLabel ?? "Archive");
+  const title = $derived(props.title ?? "");
+</script>
+
+<IconBase
+  {...props}
+  mode="outline"
+  {ariaLabel}
+  {title}
+  viewBox="0 0 24 24"
+  strokeLinecap="round"
+  strokeLinejoin="round"
+  strokeWidth={props.strokeWidth ?? 2}
+>
+  <path
+    fill="currentColor"
+    d="M7.245 3.356c.372-.107.766-.106 1.267-.106h6.976c.5 0 .895 0 1.267.106c.328.093.636.247.907.453c.309.234.545.55.846.95l1.487 1.984c.204.272.364.485.48.726q.156.32.224.67c.051.263.051.53.051.87v7.822c0 .534 0 .98-.03 1.344c-.03.38-.098.736-.27 1.073a2.75 2.75 0 0 1-1.201 1.202c-.338.172-.694.24-1.074.27c-.364.03-.81.03-1.344.03H7.17c-.535 0-.98 0-1.345-.03c-.38-.03-.736-.098-1.073-.27a2.75 2.75 0 0 1-1.202-1.2c-.172-.338-.24-.694-.27-1.074c-.03-.364-.03-.81-.03-1.344V9.008c0-.339 0-.606.051-.869a2.8 2.8 0 0 1 .223-.67c.117-.24.277-.454.481-.726L5.493 4.76c.3-.401.536-.717.845-.95c.271-.207.579-.36.907-.454M10.5 12.5a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V8.75h6.499a2.5 2.5 0 0 0-.036-.467a2 2 0 0 0-.163-.487c-.074-.154-.176-.296-.363-.546h-6.03l-.283-2.258a1.133 1.133 0 0 0-2.248 0l-.282 2.258H4.563c-.187.25-.289.392-.363.546a2 2 0 0 0-.163.487a2.5 2.5 0 0 0-.036.467H10.5zM6 17a1 1 0 0 0 1 1h3a1 1 0 1 0 0-2H7a1 1 0 0 0-1 1"
+  />
+</IconBase>

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

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

package/dist/icons/CheckO.svelte

@@ -4,17 +4,26 @@
   import type { IconProps } from "../types";
 
   const props: IconProps = $props();
-  const ariaLabel = $derived(props.ariaLabel ?? "CheckCircle");
+  const ariaLabel = $derived(props.ariaLabel ?? "Check Circle");
   const title = $derived(props.title ?? "");
 </script>
 
-<IconBase {...props} mode="solid" {ariaLabel} {title}>
+<IconBase
+  {...props}
+  mode="outline"
+  {ariaLabel}
+  {title}
+  viewBox="0 0 24 24"
+  strokeLinecap="round"
+  strokeLinejoin="round"
+  strokeWidth={props.strokeWidth ?? 2}
+>
   <path
-    d="M10.243 16.314L6 12.07l1.414-1.414 2.829 2.828 5.656-5.657 1.415 1.415z"
+    fill="currentColor"
+    d="M15.53 10.53a.75.75 0 1 0-1.06-1.06L11 12.94l-1.47-1.47a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0z"
   />
   <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12m11 9a9 9 0 1 1 0-18 9 9 0 0 1 0 18"
+    fill="currentColor"
+    d="M12 20.75a8.75 8.75 0 1 1 0-17.5a8.75 8.75 0 0 1 0 17.5M4.75 12a7.25 7.25 0 1 0 14.5 0a7.25 7.25 0 0 0-14.5 0"
   />
 </IconBase>

package/dist/icons/CircleExclamation.svelte

@@ -1,15 +1,29 @@
-<!-- src/lib/icons/InfoExclamation.svelte -->
+<!-- src/lib/icons/Warning.svelte -->
 <script lang="ts">
   import IconBase from "../IconBase.svelte";
   import type { IconProps } from "../types";
 
   const props: IconProps = $props();
-  const ariaLabel = $derived(props.ariaLabel ?? "Info Circle");
+  const ariaLabel = $derived(props.ariaLabel ?? "Warning");
   const title = $derived(props.title ?? "");
 </script>
 
-<IconBase {...props} mode="solid" {ariaLabel} {title} viewBox="0 0 20 20">
+<IconBase
+  {...props}
+  mode="outline"
+  {ariaLabel}
+  {title}
+  viewBox="0 0 24 24"
+  strokeLinecap="round"
+  strokeLinejoin="round"
+  strokeWidth={props.strokeWidth ?? 2}
+>
   <path
-    d="M2.93 17.07A10 10 0 1 1 17.07 2.93A10 10 0 0 1 2.93 17.07m12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32M9 5h2v6H9zm0 8h2v2H9z"
+    fill="currentColor"
+    d="M12 7c-.736 0-1.313.649-1.244 1.4l.494 4.15a.76.76 0 0 0 .75.7a.76.76 0 0 0 .75-.7l.494-4.15C13.314 7.65 12.736 7 12 7m0 10a1.25 1.25 0 1 0 0-2.5a1.25 1.25 0 0 0 0 2.5"
+  />
+  <path
+    fill="currentColor"
+    d="M12 4.5a7.5 7.5 0 1 0 0 15a7.5 7.5 0 0 0 0-15M3.5 12a8.5 8.5 0 1 1 17 0a8.5 8.5 0 0 1-17 0"
   />
 </IconBase>

package/dist/icons/CircleInfo.svelte

@@ -1,19 +1,25 @@
-<!-- src/lib/icons/InfoCircleOutline.svelte -->
+<!-- src/lib/icons/Info.svelte -->
 <script lang="ts">
   import IconBase from "../IconBase.svelte";
   import type { IconProps } from "../types";
 
   const props: IconProps = $props();
-  const ariaLabel = $derived(props.ariaLabel ?? "Info Circle Outline");
+  const ariaLabel = $derived(props.ariaLabel ?? "Info");
   const title = $derived(props.title ?? "");
 </script>
 
-<IconBase {...props} mode="outline" {ariaLabel} {title} viewBox="0 0 32 32">
-  <!-- trazo del círculo y la barra -->
-  <path d="M15 14h1v9h1m12-7a13 13 0 1 1-26 0a13 13 0 0 1 26 0" />
-  <!-- punto del 'i' (relleno) -->
+<IconBase
+  {...props}
+  mode="outline"
+  {ariaLabel}
+  {title}
+  viewBox="0 0 24 24"
+  strokeLinecap="round"
+  strokeLinejoin="round"
+  strokeWidth={props.strokeWidth ?? 2}
+>
   <path
     fill="currentColor"
-    d="M17.5 9.5a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0Z"
+    d="M12 3.75a8.25 8.25 0 1 0 0 16.5a8.25 8.25 0 0 0 0-16.5M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75s-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12M12 7.75a.25.25 0 1 0 0 .5a.25.25 0 0 0 0-.5M10.25 8a1.75 1.75 0 1 1 3.5 0a1.75 1.75 0 0 1-3.5 0m1.5 4.401l-.334.223a.75.75 0 1 1-.832-1.248l.723-.482a1.25 1.25 0 0 1 1.943 1.04v3.816H14a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1 0-1.5h.75z"
   />
 </IconBase>

package/dist/icons/CircleQuestion.svelte

@@ -1,15 +1,29 @@
-<!-- src/lib/icons/QuestionCircle.svelte -->
+<!-- src/lib/icons/HelpCircle.svelte -->
 <script lang="ts">
   import IconBase from "../IconBase.svelte";
   import type { IconProps } from "../types";
 
   const props: IconProps = $props();
-  const ariaLabel = $derived(props.ariaLabel ?? "Question Circle");
+  const ariaLabel = $derived(props.ariaLabel ?? "Help Circle");
   const title = $derived(props.title ?? "");
 </script>
 
-<IconBase {...props} mode="solid" {ariaLabel} {title} viewBox="0 0 256 256">
+<IconBase
+  {...props}
+  mode="outline"
+  {ariaLabel}
+  {title}
+  viewBox="0 0 24 24"
+  strokeLinecap="round"
+  strokeLinejoin="round"
+  strokeWidth={props.strokeWidth ?? 2}
+>
   <path
-    d="M144 180a16 16 0 1 1-16-16a16 16 0 0 1 16 16m92-52A108 108 0 1 1 128 20a108.12 108.12 0 0 1 108 108m-24 0a84 84 0 1 0-84 84a84.09 84.09 0 0 0 84-84m-84-64c-24.26 0-44 17.94-44 40v4a12 12 0 0 0 24 0v-4c0-8.82 9-16 20-16s20 7.18 20 16s-9 16-20 16a12 12 0 0 0-12 12v8a12 12 0 0 0 23.73 2.56C158.31 137.88 172 122.37 172 104c0-22.06-19.74-40-44-40"
+    fill="currentColor"
+    d="M12 8.75c-.69 0-1.25.56-1.25 1.25v.107a.75.75 0 1 1-1.5 0V10A2.75 2.75 0 0 1 12 7.25h.116a2.634 2.634 0 0 1 1.714 4.633l-.77.66a.9.9 0 0 0-.31.674v.533a.75.75 0 0 1-1.5 0v-.533c0-.697.304-1.359.833-1.812l.771-.66a1.134 1.134 0 0 0-.738-1.995zM12 17a1 1 0 1 0 0-2a1 1 0 0 0 0 2"
+  />
+  <path
+    fill="currentColor"
+    d="M3.25 12a8.75 8.75 0 1 1 17.5 0a8.75 8.75 0 0 1-17.5 0M12 4.75a7.25 7.25 0 1 0 0 14.5a7.25 7.25 0 0 0 0-14.5"
   />
 </IconBase>

package/dist/icons/Close.svelte

@@ -8,8 +8,18 @@
   const title = $derived(props.title ?? "");
 </script>
 
-<IconBase {...props} mode="solid" {ariaLabel} {title} viewBox="0 0 1024 1024">
+<IconBase
+  {...props}
+  mode="outline"
+  {ariaLabel}
+  {title}
+  viewBox="0 0 24 24"
+  strokeLinecap="round"
+  strokeLinejoin="round"
+  strokeWidth={props.strokeWidth ?? 2}
+>
   <path
-    d="M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496"
+    fill="currentColor"
+    d="M17.127 6.873a1.25 1.25 0 0 1 0 1.768L13.767 12l3.36 3.359a1.25 1.25 0 1 1-1.768 1.768L12 13.767l-3.359 3.36a1.25 1.25 0 1 1-1.768-1.768L10.233 12l-3.36-3.359a1.25 1.25 0 0 1 1.768-1.768L12 10.233l3.359-3.36a1.25 1.25 0 0 1 1.768 0"
   />
 </IconBase>

package/dist/icons/Copy.svelte

@@ -0,0 +1,25 @@
+<!-- src/lib/icons/Copy.svelte -->
+<script lang="ts">
+  import IconBase from "../IconBase.svelte";
+  import type { IconProps } from "../types";
+
+  const props: IconProps = $props();
+  const ariaLabel = $derived(props.ariaLabel ?? "Copy");
+  const title = $derived(props.title ?? "");
+</script>
+
+<IconBase
+  {...props}
+  mode="outline"
+  {ariaLabel}
+  {title}
+  viewBox="0 0 24 24"
+  strokeLinecap="round"
+  strokeLinejoin="round"
+  strokeWidth={props.strokeWidth ?? 2}
+>
+  <path
+    fill="currentColor"
+    d="M13.569 4.25h.225c1.118 0 1.83 0 2.435.162a4.75 4.75 0 0 1 3.36 3.359c.161.605.161 1.317.161 2.435v1.624c0 .535 0 .98-.03 1.345c-.03.38-.098.736-.27 1.073a2.75 2.75 0 0 1-1.201 1.202c-.338.172-.694.24-1.074.27c-.365.03-.81.03-1.344.03h-1.662c-.534 0-.98 0-1.344-.03c-.38-.03-.736-.098-1.073-.27a2.75 2.75 0 0 1-1.202-1.201c-.172-.338-.24-.694-.27-1.074c-.03-.365-.03-.81-.03-1.345V7.57c0-.524 0-.929.094-1.28a2.75 2.75 0 0 1 1.944-1.945c.352-.095.757-.094 1.281-.094m.098 1.5c-.669 0-.856.006-.99.043a1.25 1.25 0 0 0-.884.883c-.037.135-.043.322-.043.99V11.8c0 .572 0 .957.025 1.252c.023.288.065.425.111.516c.12.235.311.426.547.546c.09.046.227.088.515.111c.295.024.68.025 1.252.025h1.6c.572 0 .957 0 1.252-.025c.288-.023.425-.065.515-.111a1.25 1.25 0 0 0 .547-.546c.046-.091.088-.228.111-.515c.024-.296.025-.68.025-1.253v-1.467c0-.446 0-.798-.006-1.083H16.5a1.75 1.75 0 0 1-1.75-1.75V5.756a62 62 0 0 0-1.083-.006M16.25 6v1.5c0 .138.112.25.25.25H18A3.26 3.26 0 0 0 16.25 6M8.496 8.25H8.5a.75.75 0 0 1 0 1.5c-.25 0-.727 0-1.19.026a7 7 0 0 0-.622.058a2 2 0 0 0-.255.052a1.25 1.25 0 0 0-.547.547c-.046.09-.088.227-.111.515c-.024.295-.025.68-.025 1.252v3.6c0 .572 0 .957.025 1.252c.023.288.065.425.111.515c.12.236.311.427.547.547c.09.046.227.088.514.111c.296.024.68.025 1.253.025h1.6c.572 0 .957 0 1.252-.025c.288-.023.425-.065.516-.111a1.25 1.25 0 0 0 .546-.547c.06-.119.098-.262.118-.39A2 2 0 0 0 12.25 17v-.004a.75.75 0 0 1 1.5.005H13h.75v.044l-.005.087a4 4 0 0 1-.031.279c-.035.219-.106.53-.264.838a2.75 2.75 0 0 1-1.201 1.202c-.338.172-.694.24-1.074.27c-.365.03-.81.03-1.345.03H8.17c-.535 0-.98 0-1.345-.03c-.38-.03-.736-.098-1.073-.27A2.75 2.75 0 0 1 4.55 18.25c-.172-.338-.24-.694-.27-1.074c-.03-.365-.03-.81-.03-1.345v-3.66c0-.535 0-.98.03-1.345c.03-.38.098-.736.27-1.073A2.75 2.75 0 0 1 5.752 8.55c.224-.115.502-.168.716-.2c.239-.035.505-.057.759-.072c.507-.028 1.019-.028 1.27-.028m3.754 8.745V17z"
+  />
+</IconBase>

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

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

package/dist/icons/Csv.svelte

@@ -0,0 +1,25 @@
+<!-- src/lib/icons/CSV.svelte -->
+<script lang="ts">
+  import IconBase from "../IconBase.svelte";
+  import type { IconProps } from "../types";
+
+  const props: IconProps = $props();
+  const ariaLabel = $derived(props.ariaLabel ?? "CSV");
+  const title = $derived(props.title ?? "");
+</script>
+
+<IconBase
+  {...props}
+  mode="outline"
+  {ariaLabel}
+  {title}
+  viewBox="0 0 24 24"
+  strokeLinecap="round"
+  strokeLinejoin="round"
+  strokeWidth={props.strokeWidth ?? 2}
+>
+  <path
+    fill="currentColor"
+    d="M5.75 15H8q.325 0 .538-.213t.212-.537t-.213-.537T8 13.5H6.25v-3H8q.325 0 .538-.213t.212-.537t-.213-.537T8 9H5.75q-.425 0-.712.288T4.75 10v4q0 .425.288.713T5.75 15m4.65 0h2.25q.425 0 .713-.288T13.65 14v-1.5q0-.425-.288-.788t-.712-.362h-1.5v-.85h1.75q.325 0 .538-.212t.212-.538t-.213-.537T12.9 9h-2.25q-.425 0-.712.288T9.65 10v1.5q0 .425.288.763t.712.337h1.5v.9H10.4q-.325 0-.537.213t-.213.537t.213.538t.537.212m6.6-2.55l-.85-2.925q-.075-.225-.262-.375T15.45 9q-.35 0-.562.287t-.113.638l1.325 4.55q.075.225.263.375t.437.15h.4q.25 0 .438-.15t.262-.375l1.325-4.55q.1-.35-.113-.638T18.55 9q-.25 0-.437.15t-.263.375zM4 20q-.825 0-1.412-.587T2 18V6q0-.825.588-1.412T4 4h16q.825 0 1.413.588T22 6v12q0 .825-.587 1.413T20 20z"
+  />
+</IconBase>

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

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

package/dist/icons/Excel.svelte

@@ -1,38 +1,45 @@
-<!-- src/lib/icons/DocumentClose.svelte -->
+<!-- src/lib/icons/DeleteDocument.svelte -->
 <script lang="ts">
   import IconBase from "../IconBase.svelte";
   import type { IconProps } from "../types";
 
   const props: IconProps = $props();
-  const ariaLabel = $derived(props.ariaLabel ?? "Document close");
+  const ariaLabel = $derived(props.ariaLabel ?? "Delete Document");
   const title = $derived(props.title ?? "");
-
-  // Evita colisiones de <mask> si hay múltiples instancias
-  const maskId = $state(
-    `bz-doc-close-${Math.random().toString(36).slice(2, 9)}`
-  );
 </script>
 
-<IconBase {...props} mode="solid" {ariaLabel} {title} viewBox="0 0 48 48">
+<IconBase
+  {...props}
+  mode="outline"
+  {ariaLabel}
+  {title}
+  viewBox="0 0 24 24"
+  strokeLinecap="round"
+  strokeLinejoin="round"
+  strokeWidth={props.strokeWidth ?? 2}
+>
   <defs>
-    <mask id={maskId}>
-      <g fill="none" stroke-linecap="round" stroke-width="4">
+    <mask id="delete-document-mask">
+      <g fill="none" stroke-linecap="round" stroke-width="2">
         <path
           stroke="#fff"
           stroke-linejoin="round"
-          d="M8 15V6a2 2 0 0 1 2-2h28a2 2 0 0 1 2 2v36a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2v-9"
+          d="M4 7.5V3a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-4.5"
         />
-        <path stroke="#fff" d="M31 15h3m-6 8h6m-6 8h6" />
+        <path stroke="#fff" d="M15.5 7.5h1.5m-3 4h3m-3 4h3" />
         <path
           fill="#fff"
           stroke="#fff"
           stroke-linejoin="round"
-          d="M4 15h18v18H4z"
+          d="M2 7.5h9v9H2z"
         />
-        <path stroke="#000" stroke-linejoin="round" d="m10 21 6 6m0-6-6 6" />
+        <path stroke="#000" stroke-linejoin="round" d="m5 10.5l3 3m0-3l-3 3" />
       </g>
     </mask>
   </defs>
-
-  <path fill="currentColor" d="M0 0h48v48H0z" mask={`url(#${maskId})`} />
+  <path
+    fill="currentColor"
+    d="M0 0h24v24H0z"
+    mask="url(#delete-document-mask)"
+  />
 </IconBase>

package/dist/icons/Facebook.svelte

@@ -0,0 +1,25 @@
+<!-- src/lib/icons/FacebookAlt.svelte -->
+<script lang="ts">
+  import IconBase from "../IconBase.svelte";
+  import type { IconProps } from "../types";
+
+  const props: IconProps = $props();
+  const ariaLabel = $derived(props.ariaLabel ?? "Facebook Alt");
+  const title = $derived(props.title ?? "");
+</script>
+
+<IconBase
+  {...props}
+  mode="outline"
+  {ariaLabel}
+  {title}
+  viewBox="0 0 24 24"
+  strokeLinecap="round"
+  strokeLinejoin="round"
+  strokeWidth={props.strokeWidth ?? 2}
+>
+  <path
+    fill="currentColor"
+    d="M13.458 21.696c4.693-.704 8.292-4.753 8.292-9.642c0-5.385-4.365-9.75-9.75-9.75s-9.75 4.365-9.75 9.75c0 4.89 3.599 8.938 8.292 9.642v-6.798h-2.05a.486.486 0 0 1-.486-.486v-1.843c0-.269.218-.486.486-.486h2.05l-.072-1.943c0-.942.175-2.471 1.342-3.307c.816-.583 1.423-.693 2.397-.693c.845 0 1.426.084 1.81.14l.188.025a.193.193 0 0 1 .168.192v2.04c0 .113-.095.2-.205.194h-.038c-.114.004-.71.029-1.216.029c-.89 0-1.458.406-1.458 1.755v1.568h2.192c.3 0 .529.27.48.566l-.28 1.843a.486.486 0 0 1-.479.406h-1.913z"
+  />
+</IconBase>

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

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