@spear-ai/spectral 1.6.17 → 1.8.0

package/dist/styles/theme.css

@@ -11,7 +11,7 @@
   --horizon-color-transparent: oklch(0 0 0 / 0%);
   --horizon-color-accent: oklch(92.53% 0.1976 123.38);
 
-  --horizon-color-neutral-50: oklch(97.64% 0.001 286.38);
+  --horizon-color-neutral-50: oklch(98.5% 0 0);
   --horizon-color-neutral-100: oklch(92.19% 0 0);
   --horizon-color-neutral-200: oklch(86.99% 0 0);
   --horizon-color-neutral-300: oklch(79.03% 0 0);
@@ -23,17 +23,17 @@
   --horizon-color-neutral-900: oklch(26.86% 0 0);
   --horizon-color-neutral-950: oklch(21.78% 0 0);
 
-  --horizon-color-primary-50: oklch(86.49% 0.057 257.62);
-  --horizon-color-primary-100: oklch(80.86% 0.0808 257.62);
-  --horizon-color-primary-200: oklch(75.06% 0.105 257.62);
-  --horizon-color-primary-300: oklch(70.52% 0.1303 257.62);
-  --horizon-color-primary-400: oklch(63.46% 0.1376 257.62);
-  --horizon-color-primary-500: oklch(56.4% 0.1372 257.6);
-  --horizon-color-primary-600: oklch(48.67% 0.1372 257.6);
-  --horizon-color-primary-700: oklch(42.85% 0.1372 257.6);
-  --horizon-color-primary-800: oklch(37.8% 0.1372 257.6);
-  --horizon-color-primary-900: oklch(33.76% 0.1213 257.3);
-  --horizon-color-primary-950: oklch(27.61% 0.101 257.73);
+  --horizon-color-primary-50: oklch(97.37% 0.01 238.00);
+  --horizon-color-primary-100: oklch(93.88% 0.03 242.35);
+  --horizon-color-primary-200: oklch(89.30% 0.06 242.83);
+  --horizon-color-primary-300: oklch(83.05% 0.09 240.33);
+  --horizon-color-primary-400: oklch(74.57% 0.14 245.84);
+  --horizon-color-primary-500: oklch(66.23% 0.18 254.28);
+  --horizon-color-primary-600: oklch(58.57% 0.21 259.12);
+  --horizon-color-primary-700: oklch(52.25% 0.21 261.44);
+  --horizon-color-primary-800: oklch(42.44% 0.17 262.29);
+  --horizon-color-primary-900: oklch(39.88% 0.14 261.51);
+  --horizon-color-primary-950: oklch(29.27% 0.09 263.49);
 
   --horizon-color-level-zero: oklch(23.78% 0 0);
   --horizon-color-level-one: oklch(26.94% 0 0);
@@ -42,26 +42,26 @@
   --horizon-color-level-four: oklch(35.71% 0 0);
   --horizon-color-level-five: oklch(38.62% 0 0);
 
-  --horizon-color-success-50: oklch(99% 0.1049 144);
-  --horizon-color-success-100: oklch(94% 0.1649 144);
-  --horizon-color-success-200: oklch(92% 0.2424 144);
-  --horizon-color-success-300: oklch(82% 0.2424 144);
-  --horizon-color-success-400: oklch(76% 0.2424 144);
-  --horizon-color-success-500: oklch(66% 0.2424 144);
+  --horizon-color-success-50: oklch(96.2% 0.044 156.743);
+  --horizon-color-success-100: oklch(92.5% 0.084 155.995);
+  --horizon-color-success-200: oklch(87.1% 0.15 154.449);
+  --horizon-color-success-300: oklch(79.2% 0.209 151.711);
+  --horizon-color-success-400: oklch(72.3% 0.219 149.579);
+  --horizon-color-success-500: oklch(62.7% 0.194 149.214);
 
-  --horizon-color-warning-50: oklch(94% 0.0442 56.91);
-  --horizon-color-warning-100: oklch(91% 0.095 52.355);
-  --horizon-color-warning-200: oklch(84.9% 0.144 52.438);
-  --horizon-color-warning-300: oklch(75% 0.2036 56.91);
-  --horizon-color-warning-400: oklch(71.06% 0.19 46.76);
-  --horizon-color-warning-500: oklch(70.5% 0.213 47.604);
+  --horizon-color-warning-50: oklch(95.4% 0.038 75.164);
+  --horizon-color-warning-100: oklch(90.1% 0.076 70.697);
+  --horizon-color-warning-200: oklch(83.7% 0.128 66.29);
+  --horizon-color-warning-300: oklch(75% 0.183 55.934);
+  --horizon-color-warning-400: oklch(70.5% 0.213 47.604);
+  --horizon-color-warning-500: oklch(64.6% 0.222 41.116);
 
-  --horizon-color-danger-50: oklch(88.5% 0.0603 18.334);
-  --horizon-color-danger-100: oklch(80.53% 0.1109 19.78);
-  --horizon-color-danger-200: oklch(63.94% 0.2459 28.47);
-  --horizon-color-danger-300: oklch(58.3% 0.2383 28.47);
-  --horizon-color-danger-400: oklch(53.39% 0.2181 28.47);
-  --horizon-color-danger-500: oklch(48.54% 0.1986 28.47);
+  --horizon-color-danger-50: oklch(93.6% 0.032 17.717);
+  --horizon-color-danger-100: oklch(88.5% 0.062 18.334);
+  --horizon-color-danger-200: oklch(80.8% 0.114 19.571);
+  --horizon-color-danger-300: oklch(70.4% 0.191 22.216);
+  --horizon-color-danger-400: oklch(57.7% 0.245 27.325);
+  --horizon-color-danger-500: oklch(50.5% 0.213 27.518);
 }
 
 :root[data-theme='light'] {
@@ -72,7 +72,7 @@
 /* ============================================
  * Semantic Color Tokens (@theme for Tailwind)
  * ============================================ */
-/* dark default */
+/* dark (default) */
 @theme {
   --color-background: var(--horizon-color-neutral-950);
 
@@ -80,14 +80,12 @@
   --color-text-inverted: var(--horizon-color-neutral-950);
   --color-text-secondary: var(--horizon-color-neutral-300);
   --color-text-disabled: var(--horizon-color-neutral-600);
-  --color-text-accent-primary: var(--horizon-color-primary-500);
-  --color-text-accent-secondary: var(--horizon-color-primary-300);
 
   --color-border-primary: var(--horizon-color-neutral-900);
   --color-border-secondary: var(--horizon-color-neutral-700);
 
   --color-accent: var(--horizon-color-accent);
-  --color-selected-primary: var(--horizon-color-primary-700);
+  --color-selected-primary: var(--horizon-color-primary-600);
   --color-divider-primary: var(--horizon-color-level-four);
   --color-overlay: color-mix(in oklab, var(--horizon-color-neutral-950) 40%, transparent);
 
@@ -131,13 +129,13 @@
   --color-alert-danger-bg: var(--horizon-color-danger-50);
   --color-alert-danger-border: var(--horizon-color-danger-500);
   --color-alert-danger-text: var(--horizon-color-danger-500);
-  --color-alert-info-bg: var(--horizon-color-primary-100);
+  --color-alert-info-bg: var(--horizon-color-primary-50);
   --color-alert-info-border: var(--horizon-color-primary-700);
   --color-alert-info-text: var(--horizon-color-primary-700);
 
   --color-badge-primary-bg: var(--horizon-color-level-five);
   --color-badge-primary-bg--hover: var(--horizon-color-level-four);
-  --color-badge-primary-bg--active: var(--horizon-color-primary-800);
+  --color-badge-primary-bg--active: var(--horizon-color-primary-600);
   --color-badge-primary-border: var(--horizon-color-level-five);
   --color-badge-secondary-bg: var(--horizon-color-accent);
   --color-badge-secondary-border: var(--horizon-color-accent);
@@ -229,6 +227,10 @@
   --color-radio-border--hover: var(--horizon-color-accent);
   --color-radio-border--selected: var(--horizon-color-accent);
 
+  --color-radio-tile-border: color-mix(in oklab, var(--horizon-color-white) 10%, transparent);
+  --color-radio-tile-border--hover: var(--horizon-color-neutral-300);
+  --color-radio-tile-border--selected: var(--horizon-color-accent);
+
   --color-select-item-bg--hover: var(--horizon-color-level-four);
 
   --color-slider-track: var(--horizon-color-neutral-700);
@@ -237,9 +239,10 @@
   --color-slider-thumb-bg: var(--horizon-color-neutral-50);
   --color-slider-thumb-ring: var(--horizon-color-neutral-50);
 
-  --color-switch-bg: var(--horizon-color-neutral-500);
-  --color-switch-bg--checked: var(--horizon-color-success-500);
+  --color-switch-bg: var(--horizon-color-neutral-700);
+  --color-switch-bg--checked: var(--horizon-color-white);
   --color-switch-thumb: var(--horizon-color-neutral-950);
+  --color-switch-thumb--checked: var(--horizon-color-white);
 
   --color-tabs-bg: var(--horizon-color-level-one);
   --color-tabs-group-bg: var(--horizon-color-level-one);
@@ -247,21 +250,48 @@
   --color-tabs-enclosed-indicator: var(--horizon-color-level-two);
   --color-tabs-border: var(--horizon-color-level-four);
 
+  --color-toast-bg: var(--horizon-color-level-one);
+  --color-toast-border: var(--horizon-color-level-four);
+  --color-toast-text: var(--horizon-color-neutral-50);
+  --color-toast-icon: var(--horizon-color-neutral-50);
+
+  --color-toast-success-bg: color-mix(in oklab, var(--horizon-color-success-400) 10%, var(--horizon-color-neutral-950));
+  --color-toast-success-border: var(--horizon-color-success-400);
+  --color-toast-success-text: var(--horizon-color-success-400);
+  --color-toast-success-icon: var(--horizon-color-success-400);
+
+  --color-toast-warning-bg: color-mix(in oklab, var(--horizon-color-warning-400) 10%, var(--horizon-color-neutral-950));
+  --color-toast-warning-border: var(--horizon-color-warning-400);
+  --color-toast-warning-text: var(--horizon-color-warning-400);
+  --color-toast-warning-icon: var(--horizon-color-warning-400);
+
+  --color-toast-danger-bg: color-mix(in oklab, var(--horizon-color-danger-400) 10%, var(--horizon-color-neutral-950));
+  --color-toast-danger-border: var(--horizon-color-danger-400);
+  --color-toast-danger-text: var(--horizon-color-danger-400);
+  --color-toast-danger-icon: var(--horizon-color-danger-400);
+
+  --color-toast-info-bg: color-mix(in oklab, var(--horizon-color-primary-400) 10%, var(--horizon-color-neutral-950));
+  --color-toast-info-border: var(--horizon-color-primary-400);
+  --color-toast-info-text: var(--horizon-color-primary-400);
+  --color-toast-info-icon: var(--horizon-color-primary-400);
+
   --color-toggle-bg: var(--horizon-color-level-two);
-  --color-toggle-bg--active: var(--horizon-color-primary-700);
+  --color-toggle-bg--active: var(--horizon-color-primary-500);
   --color-toggle-bg--hover: var(--horizon-color-level-four);
   --color-toggle-border: var(--horizon-color-transparent);
   --color-toggle-border--hover: var(--horizon-color-level-four);
-  --color-toggle-border--active: var(--horizon-color-primary-700);
+  --color-toggle-border--active: var(--horizon-color-primary-500);
   --color-toggle-text: var(--horizon-color-neutral-50);
   --color-toggle-text--hover: var(--horizon-color-neutral-200);
   --color-toggle-text--active: var(--horizon-color-neutral-50);
-  --color-toggle-outline-border: var(--horizon-color-transparent);
+  --color-toggle-outline-border: var(--horizon-color-neutral-600);
+  --color-toggle-outline-border--hover: var(--horizon-color-neutral-400);
   --color-toggle-group-bg: var(--horizon-color-level-five);
 
   --color-tooltip-bg: var(--horizon-color-level-one);
-  --color-tooltip-border: var(--horizon-color-white);
-  --color-tooltip-arrow: var(--horizon-color-level-zero);
+  --color-tooltip-arrow: var(--horizon-color-level-one);
+  --color-tooltip-outline-border: var(--horizon-color-level-four);
+  --color-tooltip-outline-arrow: var(--horizon-color-level-four);
 }
 
 /* light theme variant */
@@ -524,6 +554,31 @@
 
 @layer utilities {
 
+  a {
+    color: var(--color-accent);
+    cursor: pointer;
+    position: relative;
+    text-decoration: none;
+    width: max-content;
+
+    &::before {
+      background-color: var(--color-accent);
+      border-radius: 0.1rem;
+      bottom: -0.2rem;
+      content: '';
+      height: 0.1rem;
+      left: 0;
+      position: absolute;
+      transform: scaleX(0);
+      transition: transform 0.3s ease-in-out;
+      width: 100%;
+    }
+
+    &:hover::before {
+      transform: scaleX(1);
+    }
+  }
+
   /* This wrapper class can be used to boost specificity if needed */
   .spectral-root {
     isolation: isolate;
@@ -580,9 +635,7 @@
   }
 
   .tooltip-effects {
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.01) 0%, rgba(255, 255, 255, 0.00) 100%), rgba(38, 38, 38, 0.50);
-    backdrop-filter: blur(12px);
-    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.10) inset, 0 20px 40px 0 rgba(0, 0, 0, 0.25), 0 15px 30px 0 rgba(0, 0, 0, 0.15), 0 5px 10px 0 rgba(0, 0, 0, 0.05);
+    box-shadow: 3px 3px 6px 3px rgba(0,0,0,0.3);
   }
 
   .map-card-effects {

package/dist/{use-animation-zNd5Nq85.js → use-animation-CR-SdV2l.js}

@@ -1,4 +1,4 @@
-import { a as f, s as u, i as c, u as l, b as h } from "./proxy-Cukf-VVj.js";
+import { a as f, s as u, i as c, u as l, b as h } from "./proxy-CgaCj1WQ.js";
 function d(t) {
   t.values.forEach((o) => o.stop());
 }

package/dist/utils/formFieldUtils.d.ts

@@ -2,7 +2,7 @@ import { KeyboardEvent, ReactNode } from 'react';
 export type FormFieldState = 'default' | 'error' | 'disabled' | 'loading' | 'success';
 export interface BaseFormFieldProps {
     disabled?: boolean;
-    errorMessage?: string | string[] | Record<string, any> | null;
+    errorMessage?: string | string[] | Record<string, unknown> | null;
     id?: string;
     label?: string;
     name?: string;
@@ -67,7 +67,7 @@ export declare const ErrorMessage: ({ className, id, dataTestId, message }: {
     className?: string;
     dataTestId?: string;
     id: string;
-    message: string | string[] | Record<string, any> | null;
+    message: string | string[] | Record<string, unknown> | null;
 }) => import("react/jsx-runtime").JSX.Element | null;
 export declare const getOptionClasses: (isDisabled: boolean | undefined, isFocused: boolean, isSelected: boolean) => string;
 export declare const scrollIntoView: (element: HTMLElement | null) => void;

package/dist/utils/formFieldUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"formFieldUtils.d.ts","sourceRoot":"","sources":["../../src/utils/formFieldUtils.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"formFieldUtils.d.ts","sourceRoot":"","sources":["../../src/utils/formFieldUtils.tsx"],"names":[],"mappings":"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"}

package/dist/utils/formFieldUtils.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as p } from "react/jsx-runtime";
 import { cn as u } from "./twUtils.js";
-import { useId as h, useRef as m, useEffect as v, useState as y, useCallback as w } from "react";
+import { useId as m, useRef as y, useEffect as x, useState as w, useCallback as v } from "react";
 const g = (e) => ({
   success: "border-success-400 hover:border-success-500 focus-visible:border-success-400 focus-visible:outline-success-400",
   error: "border-danger-400 hover:border-danger-500 focus-visible:border-danger-400 focus-visible:outline-danger-400",
@@ -31,7 +31,7 @@ const g = (e) => ({
   g(e),
   r
 ), j = (e, r) => {
-  const o = h();
+  const o = m();
   if (e) return e;
   const t = r?.trim().toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9\-_.:]/g, "");
   return t ? `${t}-${o}` : o;
@@ -50,16 +50,16 @@ const g = (e) => ({
   isInvalid: r === "error"
   // isSuccess: state === 'success', // For future use
 }), O = (e) => {
-  const r = m(null);
-  return v(() => {
+  const r = y(null);
+  return x(() => {
     const o = (t) => {
       r.current && !r.current.contains(t.target) && e();
     };
     return document.addEventListener("mousedown", o), () => document.removeEventListener("mousedown", o);
   }, [e]), r;
 }, S = (e, r = !1, o, t, s, b) => {
-  const [d, a] = y(-1);
-  v(() => {
+  const [d, a] = w(-1);
+  x(() => {
     if (e)
       if (r)
         a(0);
@@ -70,10 +70,13 @@ const g = (e) => ({
     else
       a(-1);
   }, [e, b, s, r]);
-  const c = (n, l) => {
-    let i = n + (l === "down" ? 1 : -1);
-    return l === "down" ? i = Math.min(i, s.length - 1) : i = Math.max(i, 0), s[i]?.disabled && i !== n ? c(i, l) : i;
-  }, x = w(
+  const c = v(
+    (n, l) => {
+      let i = n + (l === "down" ? 1 : -1);
+      return l === "down" ? i = Math.min(i, s.length - 1) : i = Math.max(i, 0), s[i]?.disabled && i !== n ? c(i, l) : i;
+    },
+    [s]
+  ), h = v(
     (n) => {
       if (!e)
         return ["ArrowDown", "ArrowUp", " ", "Enter"].includes(n.key) ? (n.preventDefault(), "open") : void 0;
@@ -104,7 +107,7 @@ const g = (e) => ({
     },
     [s, d, t, o, e, r, c]
   );
-  return { focusedIndex: d, setFocusedIndex: a, handleKeyDown: x, isOpen: e };
+  return { focusedIndex: d, setFocusedIndex: a, handleKeyDown: h, isOpen: e };
 }, $ = (e) => {
   const r = {}, o = [];
   return e.forEach((t) => {

package/dist/utils/sharedUtils.d.ts

@@ -1,8 +1,8 @@
-export declare function clamp(n: number, min: number, max: number): number;
-export type PasswordStrength = {
+export declare const clamp: (n: number, min: number, max: number) => number;
+export interface PasswordStrength {
     score: number;
     label: string;
     color: string;
-};
+}
 export declare const calculatePasswordStrength: (password: string) => PasswordStrength;
 //# sourceMappingURL=sharedUtils.d.ts.map

package/dist/utils/sharedUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sharedUtils.d.ts","sourceRoot":"","sources":["../../src/utils/sharedUtils.ts"],"names":[],"mappings":"AAAA,wBAAgB,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAEjE;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,eAAO,MAAM,yBAAyB,GAAI,UAAU,MAAM,KAAG,gBAc5D,CAAA"}
+{"version":3,"file":"sharedUtils.d.ts","sourceRoot":"","sources":["../../src/utils/sharedUtils.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK,GAAI,GAAG,MAAM,EAAE,KAAK,MAAM,EAAE,KAAK,MAAM,KAAG,MAE3D,CAAA;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED,eAAO,MAAM,yBAAyB,GAAI,UAAU,MAAM,KAAG,gBAc5D,CAAA"}

package/dist/utils/sharedUtils.js

@@ -1,7 +1,4 @@
-function r(t, e, l) {
-  return Math.min(l, Math.max(e, t));
-}
-const c = (t) => {
+const r = (t, e, l) => Math.min(l, Math.max(e, t)), c = (t) => {
   let e = 0;
   return t.length >= 8 && (e += 1), t.length >= 12 && (e += 1), /[a-z]/u.test(t) && /[A-Z]/u.test(t) && (e += 1), /\d/u.test(t) && (e += 1), /[^\da-z]/i.test(t) && (e += 1), e <= 1 ? { score: 1, label: "Weak", color: "#ef4444" } : e === 2 ? { score: 2, label: "Fair", color: "#f97316" } : e === 3 ? { score: 3, label: "Good", color: "#eab308" } : e === 4 ? { score: 4, label: "Strong", color: "#22c55e" } : { score: 5, label: "Excellent", color: "#CDFB50" };
 };

package/dist/utils/twUtils.d.ts

@@ -1,3 +1,3 @@
 import { ClassValue } from 'clsx';
-export declare function cn(...inputs: ClassValue[]): string;
+export declare const cn: (...inputs: ClassValue[]) => string;
 //# sourceMappingURL=twUtils.d.ts.map

package/dist/utils/twUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"twUtils.d.ts","sourceRoot":"","sources":["../../src/utils/twUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAA;AAG5C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}
+{"version":3,"file":"twUtils.d.ts","sourceRoot":"","sources":["../../src/utils/twUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAA;AAG5C,eAAO,MAAM,EAAE,GAAI,GAAG,QAAQ,UAAU,EAAE,KAAG,MAE5C,CAAA"}

package/dist/utils/twUtils.js

@@ -2754,10 +2754,7 @@ const Ge = (e, t) => {
     },
     orderSensitiveModifiers: ["*", "**", "after", "backdrop", "before", "details-content", "file", "first-letter", "first-line", "marker", "placeholder", "selection"]
   };
-}, wo = /* @__PURE__ */ Ke(xo);
-function yo(...e) {
-  return wo(Pe(e));
-}
+}, wo = /* @__PURE__ */ Ke(xo), yo = (...e) => wo(Pe(e));
 export {
   yo as cn
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spear-ai/spectral",
-  "version": "1.6.17",
+  "version": "1.8.0",
   "type": "module",
   "private": false,
   "repository": {
@@ -72,12 +72,14 @@
     "react-use-measure": "^2.1.7",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.4.0",
+    "tailwindcss-animate": "^1.0.7",
     "unicornstudio-react": "^1.5.2",
     "vaul": "^1.1.2",
     "zod": "^4.3.4"
   },
   "devDependencies": {
     "@changesets/cli": "^2.29.8",
+    "@github-ui/storybook-addon-performance-panel": "^1.0.1",
     "@chromatic-com/storybook": "^4.1.3",
     "@prettier/plugin-oxc": "^0.1.3",
     "@sentry/react": "^10.32.1",
@@ -104,6 +106,7 @@
     "glob": "^13.0.0",
     "http-server": "^14.1.1",
     "oxlint": "^1.36.0",
+    "oxlint-tsgolint": "^0.11.1",
     "playwright": "^1.57.0",
     "prettier": "^3.7.4",
     "prettier-plugin-sort-imports": "^1.8.9",
@@ -134,6 +137,8 @@
     "build:lib": "pnpm run icons:update && vite build && pnpm run build:css && pnpm run fix:types && pnpm run clean:build-artifacts",
     "build:css": "node scripts/build-css.js",
     "pack:dryrun": "pnpm pack --dry-run",
+    "check": "tsc --noEmit && pnpm run format && pnpm run lint",
+    "fix": "pnpm run format:fix && pnpm run lint:fix",
     "fix:types": "node scripts/fix-type-paths.js",
     "analyze:visual": "vite-bundle-visualizer -c vite.config.ts -o ./analyzer/visual.html",
     "analyze:network": "vite-bundle-visualizer -c vite.config.ts -t network -o ./analyzer/network.html",

package/dist/Icons/LineToolIcon2.d.ts

@@ -1,5 +0,0 @@
-import { IconProps } from './iconTypes';
-export declare const LineToolIcon2: (({ ref, className, ariaHidden, title, description, size, ...rest }: IconProps) => import("react/jsx-runtime").JSX.Element) & {
-    displayName: string;
-};
-//# sourceMappingURL=LineToolIcon2.d.ts.map

package/dist/Icons/LineToolIcon2.js

@@ -1,49 +0,0 @@
-import "../styles/main.css";
-import { jsxs as d, jsx as o } from "react/jsx-runtime";
-import k from "./IconBase.js";
-const c = ({ ref: r, className: e, ariaHidden: n, title: t, description: C, size: s = 24, ...i }) => /* @__PURE__ */ d(k, { size: s, className: e, title: t, description: C, ariaHidden: n, ref: r, ...i, children: [
-  /* @__PURE__ */ o(
-    "path",
-    {
-      d: "M2.95239 4.84212C2.95239 5.34464 3.15307 5.82657 3.51028 6.18191C3.8675 6.53724 4.35198 6.73686 4.85715 6.73686C5.36233 6.73686 5.84681 6.53724 6.20402 6.18191C6.56124 5.82657 6.76192 5.34464 6.76192 4.84212C6.76192 4.33961 6.56124 3.85768 6.20402 3.50234C5.84681 3.14701 5.36233 2.94739 4.85715 2.94739C4.35198 2.94739 3.8675 3.14701 3.51028 3.50234C3.15307 3.85768 2.95239 4.33961 2.95239 4.84212Z",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ),
-  /* @__PURE__ */ o(
-    "path",
-    {
-      d: "M17.238 17.1579C17.238 17.6604 17.4387 18.1424 17.7959 18.4977C18.1531 18.853 18.6376 19.0527 19.1428 19.0527C19.648 19.0527 20.1325 18.853 20.4897 18.4977C20.8469 18.1424 21.0476 17.6604 21.0476 17.1579C21.0476 16.6554 20.8469 16.1735 20.4897 15.8181C20.1325 15.4628 19.648 15.2632 19.1428 15.2632C18.6376 15.2632 18.1531 15.4628 17.7959 15.8181C17.4387 16.1735 17.238 16.6554 17.238 17.1579Z",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ),
-  /* @__PURE__ */ o(
-    "path",
-    {
-      d: "M13.4286 4.84212C13.4286 5.34464 13.6293 5.82657 13.9865 6.18191C14.3437 6.53724 14.8282 6.73686 15.3334 6.73686C15.8385 6.73686 16.323 6.53724 16.6802 6.18191C17.0374 5.82657 17.2381 5.34464 17.2381 4.84212C17.2381 4.33961 17.0374 3.85768 16.6802 3.50234C16.323 3.14701 15.8385 2.94739 15.3334 2.94739C14.8282 2.94739 14.3437 3.14701 13.9865 3.50234C13.6293 3.85768 13.4286 4.33961 13.4286 4.84212Z",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ),
-  /* @__PURE__ */ o(
-    "path",
-    {
-      d: "M6.74841 14.6602C6.74841 15.1628 6.94909 15.6447 7.3063 16C7.66352 16.3554 8.148 16.555 8.65317 16.555C9.15835 16.555 9.64283 16.3554 10 16C10.3573 15.6447 10.5579 15.1628 10.5579 14.6602C10.5579 14.1577 10.3573 13.6758 10 13.3205C9.64283 12.9651 9.15835 12.7655 8.65317 12.7655C8.148 12.7655 7.66352 12.9651 7.3063 13.3205C6.94909 13.6758 6.74841 14.1577 6.74841 14.6602Z",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ),
-  /* @__PURE__ */ o("path", { d: "M10 13L15.3334 6.73682L19.1429 15.2631M5.80957 7.2105L8 12.5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
-] }), a = Object.assign(c, { displayName: "LineToolIcon2" });
-export {
-  a as LineToolIcon2
-};

package/dist/createLucideIcon-D4r5Phnh.js

@@ -1,70 +0,0 @@
-import { forwardRef as l, createElement as n } from "react";
-const w = (t) => t.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), h = (t) => t.replace(
-  /^([A-Z])|[\s-_]+(\w)/g,
-  (e, r, o) => o ? o.toUpperCase() : r.toLowerCase()
-), i = (t) => {
-  const e = h(t);
-  return e.charAt(0).toUpperCase() + e.slice(1);
-}, u = (...t) => t.filter((e, r, o) => !!e && e.trim() !== "" && o.indexOf(e) === r).join(" ").trim(), f = (t) => {
-  for (const e in t)
-    if (e.startsWith("aria-") || e === "role" || e === "title")
-      return !0;
-};
-var g = {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: 24,
-  height: 24,
-  viewBox: "0 0 24 24",
-  fill: "none",
-  stroke: "currentColor",
-  strokeWidth: 2,
-  strokeLinecap: "round",
-  strokeLinejoin: "round"
-};
-const A = l(
-  ({
-    color: t = "currentColor",
-    size: e = 24,
-    strokeWidth: r = 2,
-    absoluteStrokeWidth: o,
-    className: s = "",
-    children: a,
-    iconNode: p,
-    ...c
-  }, m) => n(
-    "svg",
-    {
-      ref: m,
-      ...g,
-      width: e,
-      height: e,
-      stroke: t,
-      strokeWidth: o ? Number(r) * 24 / Number(e) : r,
-      className: u("lucide", s),
-      ...!a && !f(c) && { "aria-hidden": "true" },
-      ...c
-    },
-    [
-      ...p.map(([C, d]) => n(C, d)),
-      ...Array.isArray(a) ? a : [a]
-    ]
-  )
-);
-const k = (t, e) => {
-  const r = l(
-    ({ className: o, ...s }, a) => n(A, {
-      ref: a,
-      iconNode: e,
-      className: u(
-        `lucide-${w(i(t))}`,
-        `lucide-${t}`,
-        o
-      ),
-      ...s
-    })
-  );
-  return r.displayName = i(t), r;
-};
-export {
-  k as c
-};