@intlayer/design-system 9.0.0-canary.1 → 9.0.0-canary.3

package/dist/esm/components/Pattern/GridDistortionPattern.mjs

@@ -0,0 +1,275 @@
+'use client';
+
+import { cn } from "../../utils/cn.mjs";
+import { useIsDarkMode } from "../../hooks/useIsDarkMode.mjs";
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Pattern/GridDistortionPattern.tsx
+/**
+* Light mode: a visible (but subtle) gray line on white. The base opacity is
+* raised and the highlight boost lowered so the grid no longer fades to nothing
+* far from the pointer while spiking to a harsh accent underneath it.
+*/
+const LIGHT_THEME = {
+	lineColor: "#a8a8a8",
+	highlightColor: "#969696",
+	baseOpacity: .3,
+	highlightOpacityBoost: .3
+};
+/**
+* Dark mode: a mid-gray line that brightens toward a light purple near the
+* pointer (brighter than the resting line, so the hovered segment lights up
+* instead of darkening into the black background).
+*/
+const DARK_THEME = {
+	lineColor: "#4d4d4d",
+	highlightColor: "#5c5c5c",
+	baseOpacity: .2,
+	highlightOpacityBoost: .2
+};
+/**
+* Falloff exponent for the highlight. A gentler curve (2 = quadratic) spreads
+* the highlight over a wider area than a cubic one, smoothing the transition
+* between the resting line and the accent under the pointer.
+*/
+const HIGHLIGHT_FALLOFF_EXPONENT = 2;
+const hexToRgb = (hex) => {
+	const numericValue = parseInt(hex.replace("#", ""), 16);
+	return [
+		numericValue >> 16 & 255,
+		numericValue >> 8 & 255,
+		numericValue & 255
+	];
+};
+/** Neutral gray used when a color string can't be parsed into RGB. */
+const FALLBACK_RGB = [
+	136,
+	136,
+	136
+];
+/**
+* Resolves any CSS color string — `#rrggbb`, `rgb()/hsl()`, a named color, or a
+* `var(--token)` reference — into an `[r, g, b]` triple.
+*
+* 6-digit hex is parsed directly. Everything else is resolved by the browser
+* via a throwaway probe element mounted inside `contextElement`, so custom
+* properties resolve against the correct cascade. Falls back to a neutral gray
+* when the value can't be parsed, so the grid never emits invalid
+* `rgb(NaN, …)` strokes (which browsers render as solid black).
+*/
+const resolveColorToRgb = (color, contextElement) => {
+	const trimmed = color.trim();
+	if (/^#[0-9a-f]{6}$/i.test(trimmed)) return hexToRgb(trimmed);
+	const probe = document.createElement("span");
+	probe.style.color = trimmed;
+	probe.style.display = "none";
+	contextElement.appendChild(probe);
+	const computedColor = getComputedStyle(probe).color;
+	probe.remove();
+	const channels = computedColor.match(/-?\d+(?:\.\d+)?/g);
+	if (channels && channels.length >= 3) return [
+		Number(channels[0]),
+		Number(channels[1]),
+		Number(channels[2])
+	];
+	return FALLBACK_RGB;
+};
+const buildSegmentAttrs = (startX, startY, endX, endY, mouseX, mouseY, mouseActive, radius, strength, lineRgb, highlightRgb, baseOpacity, highlightOpacityBoost) => {
+	let red;
+	let green;
+	let blue;
+	let opacity;
+	let strokeWidth;
+	if (!mouseActive) {
+		[red, green, blue] = lineRgb;
+		opacity = baseOpacity;
+		strokeWidth = .8;
+	} else {
+		const midX = (startX + endX) / 2;
+		const midY = (startY + endY) / 2;
+		const deltaX = mouseX - midX;
+		const deltaY = mouseY - midY;
+		const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+		const easing = Math.max(0, 1 - distance / radius) ** HIGHLIGHT_FALLOFF_EXPONENT;
+		red = Math.round(lineRgb[0] + (highlightRgb[0] - lineRgb[0]) * easing);
+		green = Math.round(lineRgb[1] + (highlightRgb[1] - lineRgb[1]) * easing);
+		blue = Math.round(lineRgb[2] + (highlightRgb[2] - lineRgb[2]) * easing);
+		opacity = baseOpacity + easing * highlightOpacityBoost;
+		strokeWidth = .8 + easing * 1.2;
+	}
+	return {
+		d: `M ${startX} ${startY} L ${endX} ${endY}`,
+		stroke: `rgb(${red},${green},${blue})`,
+		strokeOpacity: opacity,
+		strokeWidth
+	};
+};
+const updateGridPoints = (grid, mouseX, mouseY, mouseActive, radius, strength) => {
+	const rows = grid.length;
+	const columns = grid[0].length;
+	for (let rowIndex = 0; rowIndex < rows; rowIndex++) for (let columnIndex = 0; columnIndex < columns; columnIndex++) {
+		const point = grid[rowIndex][columnIndex];
+		if (!mouseActive) {
+			point.x += (point.baseX - point.x) * .08;
+			point.y += (point.baseY - point.y) * .08;
+			continue;
+		}
+		const deltaX = mouseX - point.baseX;
+		const deltaY = mouseY - point.baseY;
+		const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+		if (distance < radius && distance > 0) {
+			const displacement = (Math.cos(distance / radius * Math.PI) + 1) / 2 * strength * radius * .3;
+			point.x += (point.baseX + deltaX / distance * displacement - point.x) * .12;
+			point.y += (point.baseY + deltaY / distance * displacement - point.y) * .12;
+		} else {
+			point.x += (point.baseX - point.x) * .08;
+			point.y += (point.baseY - point.y) * .08;
+		}
+	}
+};
+const GridDistortionPattern = ({ width = 70, height = 70, radius = 280, strength = .12, lineColor, highlightColor, className, ...props }) => {
+	const theme = useIsDarkMode() ? DARK_THEME : LIGHT_THEME;
+	const resolvedLineColor = lineColor ?? theme.lineColor;
+	const resolvedHighlightColor = highlightColor ?? theme.highlightColor;
+	const svgRef = useRef(null);
+	const mouse = useRef({
+		x: -9999,
+		y: -9999,
+		active: false
+	});
+	const points = useRef([]);
+	const radiusRef = useRef(radius);
+	const strengthRef = useRef(strength);
+	const lineRgbRef = useRef(FALLBACK_RGB);
+	const highlightRgbRef = useRef(FALLBACK_RGB);
+	const baseOpacityRef = useRef(theme.baseOpacity);
+	const highlightOpacityBoostRef = useRef(theme.highlightOpacityBoost);
+	radiusRef.current = radius;
+	strengthRef.current = strength;
+	baseOpacityRef.current = theme.baseOpacity;
+	highlightOpacityBoostRef.current = theme.highlightOpacityBoost;
+	useEffect(() => {
+		const svg = svgRef.current;
+		if (!svg) return;
+		lineRgbRef.current = resolveColorToRgb(resolvedLineColor, svg);
+		highlightRgbRef.current = resolveColorToRgb(resolvedHighlightColor, svg);
+	}, [resolvedLineColor, resolvedHighlightColor]);
+	useEffect(() => {
+		const svg = svgRef.current;
+		if (!svg) return;
+		const resize = () => {
+			const rect = svg.getBoundingClientRect();
+			svg.setAttribute("viewBox", `0 0 ${rect.width} ${rect.height}`);
+			const columns = Math.ceil(rect.width / width) + 2;
+			const rows = Math.ceil(rect.height / height) + 2;
+			const newGrid = [];
+			for (let rowIndex = -1; rowIndex <= rows; rowIndex++) {
+				const row = [];
+				for (let columnIndex = -1; columnIndex <= columns; columnIndex++) row.push({
+					baseX: columnIndex * width,
+					baseY: rowIndex * height,
+					x: columnIndex * width,
+					y: rowIndex * height
+				});
+				newGrid.push(row);
+			}
+			points.current = newGrid;
+		};
+		resize();
+		const resizeObserver = new ResizeObserver(resize);
+		resizeObserver.observe(svg);
+		return () => resizeObserver.disconnect();
+	}, [width, height]);
+	useEffect(() => {
+		const svg = svgRef.current;
+		if (!svg) return;
+		const handlePointerMove = (event) => {
+			const rect = svg.getBoundingClientRect();
+			mouse.current = {
+				x: event.clientX - rect.left,
+				y: event.clientY - rect.top,
+				active: true
+			};
+		};
+		const handlePointerLeave = () => {
+			mouse.current.active = false;
+		};
+		window.addEventListener("pointermove", handlePointerMove, { passive: true });
+		window.addEventListener("pointerleave", handlePointerLeave, { passive: true });
+		return () => {
+			window.removeEventListener("pointermove", handlePointerMove);
+			window.removeEventListener("pointerleave", handlePointerLeave);
+		};
+	}, []);
+	useEffect(() => {
+		const svg = svgRef.current;
+		if (!svg) return;
+		const pathPool = [];
+		let frame = 0;
+		const ensurePathCount = (count) => {
+			while (pathPool.length < count) {
+				const el = document.createElementNS("http://www.w3.org/2000/svg", "path");
+				el.setAttribute("fill", "none");
+				svg.appendChild(el);
+				pathPool.push(el);
+			}
+			for (let i = count; i < pathPool.length; i++) pathPool[i].setAttribute("d", "");
+		};
+		const tick = () => {
+			const grid = points.current;
+			if (!grid.length) {
+				frame = requestAnimationFrame(tick);
+				return;
+			}
+			const { x: mouseX, y: mouseY, active: mouseActive } = mouse.current;
+			const currentRadius = radiusRef.current;
+			const currentStrength = strengthRef.current;
+			const lineRgb = lineRgbRef.current;
+			const highlightRgb = highlightRgbRef.current;
+			const baseOpacity = baseOpacityRef.current;
+			const highlightOpacityBoost = highlightOpacityBoostRef.current;
+			updateGridPoints(grid, mouseX, mouseY, mouseActive, currentRadius, currentStrength);
+			const rows = grid.length;
+			const columns = grid[0].length;
+			ensurePathCount(rows * (columns - 1) + columns * (rows - 1));
+			let pathIndex = 0;
+			for (let rowIndex = 0; rowIndex < rows; rowIndex++) for (let columnIndex = 0; columnIndex < columns - 1; columnIndex++) {
+				const p0 = grid[rowIndex][columnIndex];
+				const p1 = grid[rowIndex][columnIndex + 1];
+				const attrs = buildSegmentAttrs(p0.x, p0.y, p1.x, p1.y, mouseX, mouseY, mouseActive, currentRadius, currentStrength, lineRgb, highlightRgb, baseOpacity, highlightOpacityBoost);
+				const el = pathPool[pathIndex++];
+				el.setAttribute("d", attrs.d);
+				el.setAttribute("stroke", attrs.stroke);
+				el.setAttribute("stroke-opacity", String(attrs.strokeOpacity));
+				el.setAttribute("stroke-width", String(attrs.strokeWidth));
+			}
+			for (let columnIndex = 0; columnIndex < columns; columnIndex++) for (let rowIndex = 0; rowIndex < rows - 1; rowIndex++) {
+				const p0 = grid[rowIndex][columnIndex];
+				const p1 = grid[rowIndex + 1][columnIndex];
+				const attrs = buildSegmentAttrs(p0.x, p0.y, p1.x, p1.y, mouseX, mouseY, mouseActive, currentRadius, currentStrength, lineRgb, highlightRgb, baseOpacity, highlightOpacityBoost);
+				const el = pathPool[pathIndex++];
+				el.setAttribute("d", attrs.d);
+				el.setAttribute("stroke", attrs.stroke);
+				el.setAttribute("stroke-opacity", String(attrs.strokeOpacity));
+				el.setAttribute("stroke-width", String(attrs.strokeWidth));
+			}
+			frame = requestAnimationFrame(tick);
+		};
+		tick();
+		return () => {
+			cancelAnimationFrame(frame);
+			for (const el of pathPool) el.remove();
+		};
+	}, []);
+	return /* @__PURE__ */ jsx("svg", {
+		ref: svgRef,
+		"aria-hidden": "true",
+		className: cn("pointer-events-none absolute inset-0 size-full", className),
+		...props
+	});
+};
+
+//#endregion
+export { GridDistortionPattern };
+//# sourceMappingURL=GridDistortionPattern.mjs.map

package/dist/esm/components/Pattern/GridDistortionPattern.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridDistortionPattern.mjs","names":[],"sources":["../../../../src/components/Pattern/GridDistortionPattern.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { type FC, type SVGProps, useEffect, useRef } from 'react';\nimport { useIsDarkMode } from '../../hooks/useIsDarkMode';\n\n// ---------------------------------------------------------------------------\n// Theme configuration — tweak these to adjust the grid appearance globally\n// ---------------------------------------------------------------------------\n\ntype GridTheme = {\n  /** Resting line color, used far from the pointer. */\n  lineColor: string;\n  /**\n   * Color the lines fade toward as the pointer approaches. To avoid lines\n   * appearing to \"dim into the background\" near the pointer, this should be\n   * brighter (higher luminance) than {@link GridTheme.lineColor} in dark mode\n   * and clearly contrasting in light mode.\n   */\n  highlightColor: string;\n  /** Stroke opacity far from the pointer — keeps the whole grid visible. */\n  baseOpacity: number;\n  /** Extra opacity added at the pointer's center on top of {@link GridTheme.baseOpacity}. */\n  highlightOpacityBoost: number;\n};\n\n/**\n * Light mode: a visible (but subtle) gray line on white. The base opacity is\n * raised and the highlight boost lowered so the grid no longer fades to nothing\n * far from the pointer while spiking to a harsh accent underneath it.\n */\nconst LIGHT_THEME: GridTheme = {\n  lineColor: '#a8a8a8',\n  highlightColor: '#969696',\n  baseOpacity: 0.3,\n  highlightOpacityBoost: 0.3,\n};\n\n/**\n * Dark mode: a mid-gray line that brightens toward a light purple near the\n * pointer (brighter than the resting line, so the hovered segment lights up\n * instead of darkening into the black background).\n */\nconst DARK_THEME: GridTheme = {\n  lineColor: '#4d4d4d',\n  highlightColor: '#5c5c5c',\n  baseOpacity: 0.2,\n  highlightOpacityBoost: 0.2,\n};\n\n/**\n * Falloff exponent for the highlight. A gentler curve (2 = quadratic) spreads\n * the highlight over a wider area than a cubic one, smoothing the transition\n * between the resting line and the accent under the pointer.\n */\nconst HIGHLIGHT_FALLOFF_EXPONENT = 2;\n\n// ---------------------------------------------------------------------------\n// Pure helpers — defined once at module level, never recreated\n// ---------------------------------------------------------------------------\n\nconst hexToRgb = (hex: string): [number, number, number] => {\n  const numericValue = parseInt(hex.replace('#', ''), 16);\n  return [\n    (numericValue >> 16) & 255,\n    (numericValue >> 8) & 255,\n    numericValue & 255,\n  ];\n};\n\n/** Neutral gray used when a color string can't be parsed into RGB. */\nconst FALLBACK_RGB: [number, number, number] = [136, 136, 136];\n\n/**\n * Resolves any CSS color string — `#rrggbb`, `rgb()/hsl()`, a named color, or a\n * `var(--token)` reference — into an `[r, g, b]` triple.\n *\n * 6-digit hex is parsed directly. Everything else is resolved by the browser\n * via a throwaway probe element mounted inside `contextElement`, so custom\n * properties resolve against the correct cascade. Falls back to a neutral gray\n * when the value can't be parsed, so the grid never emits invalid\n * `rgb(NaN, …)` strokes (which browsers render as solid black).\n */\nconst resolveColorToRgb = (\n  color: string,\n  contextElement: Element\n): [number, number, number] => {\n  const trimmed = color.trim();\n\n  // Fast path: 6-digit hex needs no DOM access.\n  if (/^#[0-9a-f]{6}$/i.test(trimmed)) {\n    return hexToRgb(trimmed);\n  }\n\n  const probe = document.createElement('span');\n  probe.style.color = trimmed;\n  probe.style.display = 'none';\n  contextElement.appendChild(probe);\n  const computedColor = getComputedStyle(probe).color;\n  probe.remove();\n\n  const channels = computedColor.match(/-?\\d+(?:\\.\\d+)?/g);\n  if (channels && channels.length >= 3) {\n    return [Number(channels[0]), Number(channels[1]), Number(channels[2])];\n  }\n\n  return FALLBACK_RGB;\n};\n\ntype Point = { baseX: number; baseY: number; x: number; y: number };\n\nconst buildSegmentAttrs = (\n  startX: number,\n  startY: number,\n  endX: number,\n  endY: number,\n  mouseX: number,\n  mouseY: number,\n  mouseActive: boolean,\n  radius: number,\n  strength: number,\n  lineRgb: [number, number, number],\n  highlightRgb: [number, number, number],\n  baseOpacity: number,\n  highlightOpacityBoost: number\n): {\n  d: string;\n  stroke: string;\n  strokeOpacity: number;\n  strokeWidth: number;\n} => {\n  let red: number;\n  let green: number;\n  let blue: number;\n  let opacity: number;\n  let strokeWidth: number;\n\n  if (!mouseActive) {\n    [red, green, blue] = lineRgb;\n    opacity = baseOpacity;\n    strokeWidth = 0.8;\n  } else {\n    const midX = (startX + endX) / 2;\n    const midY = (startY + endY) / 2;\n    const deltaX = mouseX - midX;\n    const deltaY = mouseY - midY;\n    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);\n    const distanceRatio = Math.max(0, 1 - distance / radius);\n    const easing = distanceRatio ** HIGHLIGHT_FALLOFF_EXPONENT;\n    red = Math.round(lineRgb[0] + (highlightRgb[0] - lineRgb[0]) * easing);\n    green = Math.round(lineRgb[1] + (highlightRgb[1] - lineRgb[1]) * easing);\n    blue = Math.round(lineRgb[2] + (highlightRgb[2] - lineRgb[2]) * easing);\n    opacity = baseOpacity + easing * highlightOpacityBoost;\n    strokeWidth = 0.8 + easing * 1.2;\n    void strength; // currently unused in segment coloring, kept for API compatibility\n  }\n\n  return {\n    d: `M ${startX} ${startY} L ${endX} ${endY}`,\n    stroke: `rgb(${red},${green},${blue})`,\n    strokeOpacity: opacity,\n    strokeWidth,\n  };\n};\n\nconst updateGridPoints = (\n  grid: Point[][],\n  mouseX: number,\n  mouseY: number,\n  mouseActive: boolean,\n  radius: number,\n  strength: number\n): void => {\n  const rows = grid.length;\n  const columns = grid[0]!.length;\n\n  for (let rowIndex = 0; rowIndex < rows; rowIndex++) {\n    for (let columnIndex = 0; columnIndex < columns; columnIndex++) {\n      const point = grid[rowIndex]![columnIndex]!;\n      if (!mouseActive) {\n        point.x += (point.baseX - point.x) * 0.08;\n        point.y += (point.baseY - point.y) * 0.08;\n        continue;\n      }\n      const deltaX = mouseX - point.baseX;\n      const deltaY = mouseY - point.baseY;\n      const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);\n\n      if (distance < radius && distance > 0) {\n        const force = (Math.cos((distance / radius) * Math.PI) + 1) / 2;\n        const displacement = force * strength * radius * 0.3;\n        point.x +=\n          (point.baseX + (deltaX / distance) * displacement - point.x) * 0.12;\n        point.y +=\n          (point.baseY + (deltaY / distance) * displacement - point.y) * 0.12;\n      } else {\n        point.x += (point.baseX - point.x) * 0.08;\n        point.y += (point.baseY - point.y) * 0.08;\n      }\n    }\n  }\n};\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\ntype GridDistortionPatternProps = {\n  width?: number;\n  height?: number;\n  radius?: number;\n  strength?: number;\n  lineColor?: string;\n  highlightColor?: string;\n} & SVGProps<SVGSVGElement>;\n\nexport const GridDistortionPattern: FC<GridDistortionPatternProps> = ({\n  width = 70,\n  height = 70,\n  radius = 280,\n  strength = 0.12,\n  lineColor,\n  highlightColor,\n  className,\n  ...props\n}) => {\n  const isDarkMode = useIsDarkMode();\n  const theme = isDarkMode ? DARK_THEME : LIGHT_THEME;\n\n  // Explicit props win; otherwise fall back to the active theme's defaults.\n  const resolvedLineColor = lineColor ?? theme.lineColor;\n  const resolvedHighlightColor = highlightColor ?? theme.highlightColor;\n\n  const svgRef = useRef<SVGSVGElement>(null);\n  const mouse = useRef({ x: -9999, y: -9999, active: false });\n  const points = useRef<Point[][]>([]);\n\n  // Stable refs so the animation loop always sees the latest prop values\n  // without needing to restart itself.\n  const radiusRef = useRef(radius);\n  const strengthRef = useRef(strength);\n  // Initialized to safe placeholders; the real (possibly CSS-variable-based)\n  // colors are resolved against the DOM in the effect below.\n  const lineRgbRef = useRef<[number, number, number]>(FALLBACK_RGB);\n  const highlightRgbRef = useRef<[number, number, number]>(FALLBACK_RGB);\n  const baseOpacityRef = useRef(theme.baseOpacity);\n  const highlightOpacityBoostRef = useRef(theme.highlightOpacityBoost);\n\n  // Keep numeric refs in sync with props on each render (cheap assignments).\n  radiusRef.current = radius;\n  strengthRef.current = strength;\n  baseOpacityRef.current = theme.baseOpacity;\n  highlightOpacityBoostRef.current = theme.highlightOpacityBoost;\n\n  // Resolve colors once mounted — getComputedStyle is required so that\n  // `var(--token)` highlight/line colors resolve against the live cascade.\n  useEffect(() => {\n    const svg = svgRef.current;\n    if (!svg) return;\n    lineRgbRef.current = resolveColorToRgb(resolvedLineColor, svg);\n    highlightRgbRef.current = resolveColorToRgb(resolvedHighlightColor, svg);\n  }, [resolvedLineColor, resolvedHighlightColor]);\n\n  // ---------------------------------------------------------------------------\n  // Resize — rebuild the point grid and resize the SVG viewBox\n  // ---------------------------------------------------------------------------\n  useEffect(() => {\n    const svg = svgRef.current;\n    if (!svg) return;\n\n    const resize = () => {\n      const rect = svg.getBoundingClientRect();\n      svg.setAttribute('viewBox', `0 0 ${rect.width} ${rect.height}`);\n\n      const columns = Math.ceil(rect.width / width) + 2;\n      const rows = Math.ceil(rect.height / height) + 2;\n      const newGrid: Point[][] = [];\n\n      for (let rowIndex = -1; rowIndex <= rows; rowIndex++) {\n        const row: Point[] = [];\n        for (let columnIndex = -1; columnIndex <= columns; columnIndex++) {\n          row.push({\n            baseX: columnIndex * width,\n            baseY: rowIndex * height,\n            x: columnIndex * width,\n            y: rowIndex * height,\n          });\n        }\n        newGrid.push(row);\n      }\n      points.current = newGrid;\n    };\n\n    resize();\n    const resizeObserver = new ResizeObserver(resize);\n    resizeObserver.observe(svg);\n    return () => resizeObserver.disconnect();\n  }, [width, height]);\n\n  // ---------------------------------------------------------------------------\n  // Pointer tracking — passive listeners, no React state involved\n  // ---------------------------------------------------------------------------\n  useEffect(() => {\n    const svg = svgRef.current;\n    if (!svg) return;\n\n    const handlePointerMove = (event: PointerEvent) => {\n      const rect = svg.getBoundingClientRect();\n      mouse.current = {\n        x: event.clientX - rect.left,\n        y: event.clientY - rect.top,\n        active: true,\n      };\n    };\n    const handlePointerLeave = () => {\n      mouse.current.active = false;\n    };\n\n    window.addEventListener('pointermove', handlePointerMove, {\n      passive: true,\n    });\n    window.addEventListener('pointerleave', handlePointerLeave, {\n      passive: true,\n    });\n    return () => {\n      window.removeEventListener('pointermove', handlePointerMove);\n      window.removeEventListener('pointerleave', handlePointerLeave);\n    };\n  }, []);\n\n  // ---------------------------------------------------------------------------\n  // Animation loop — writes directly to SVG DOM, no React state/re-renders\n  // ---------------------------------------------------------------------------\n  useEffect(() => {\n    const svg = svgRef.current;\n    if (!svg) return;\n\n    // We maintain a pool of <path> elements and reuse them each frame\n    // to avoid GC pressure from creating/deleting DOM nodes every tick.\n    const pathPool: SVGPathElement[] = [];\n    let frame = 0;\n\n    const ensurePathCount = (count: number) => {\n      while (pathPool.length < count) {\n        const el = document.createElementNS(\n          'http://www.w3.org/2000/svg',\n          'path'\n        );\n        el.setAttribute('fill', 'none');\n        svg.appendChild(el);\n        pathPool.push(el);\n      }\n      // Hide surplus paths\n      for (let i = count; i < pathPool.length; i++) {\n        pathPool[i]!.setAttribute('d', '');\n      }\n    };\n\n    const tick = () => {\n      const grid = points.current;\n      if (!grid.length) {\n        frame = requestAnimationFrame(tick);\n        return;\n      }\n\n      const { x: mouseX, y: mouseY, active: mouseActive } = mouse.current;\n      const currentRadius = radiusRef.current;\n      const currentStrength = strengthRef.current;\n      const lineRgb = lineRgbRef.current;\n      const highlightRgb = highlightRgbRef.current;\n      const baseOpacity = baseOpacityRef.current;\n      const highlightOpacityBoost = highlightOpacityBoostRef.current;\n\n      // Update point positions\n      updateGridPoints(\n        grid,\n        mouseX,\n        mouseY,\n        mouseActive,\n        currentRadius,\n        currentStrength\n      );\n\n      const rows = grid.length;\n      const columns = grid[0]!.length;\n\n      // Count segments up front so we can size the pool\n      const horizontalCount = rows * (columns - 1);\n      const verticalCount = columns * (rows - 1);\n      const totalSegments = horizontalCount + verticalCount;\n      ensurePathCount(totalSegments);\n\n      let pathIndex = 0;\n\n      // Horizontal segments\n      for (let rowIndex = 0; rowIndex < rows; rowIndex++) {\n        for (let columnIndex = 0; columnIndex < columns - 1; columnIndex++) {\n          const p0 = grid[rowIndex]![columnIndex]!;\n          const p1 = grid[rowIndex]![columnIndex + 1]!;\n          const attrs = buildSegmentAttrs(\n            p0.x,\n            p0.y,\n            p1.x,\n            p1.y,\n            mouseX,\n            mouseY,\n            mouseActive,\n            currentRadius,\n            currentStrength,\n            lineRgb,\n            highlightRgb,\n            baseOpacity,\n            highlightOpacityBoost\n          );\n          const el = pathPool[pathIndex++]!;\n          el.setAttribute('d', attrs.d);\n          el.setAttribute('stroke', attrs.stroke);\n          el.setAttribute('stroke-opacity', String(attrs.strokeOpacity));\n          el.setAttribute('stroke-width', String(attrs.strokeWidth));\n        }\n      }\n\n      // Vertical segments\n      for (let columnIndex = 0; columnIndex < columns; columnIndex++) {\n        for (let rowIndex = 0; rowIndex < rows - 1; rowIndex++) {\n          const p0 = grid[rowIndex]![columnIndex]!;\n          const p1 = grid[rowIndex + 1]![columnIndex]!;\n          const attrs = buildSegmentAttrs(\n            p0.x,\n            p0.y,\n            p1.x,\n            p1.y,\n            mouseX,\n            mouseY,\n            mouseActive,\n            currentRadius,\n            currentStrength,\n            lineRgb,\n            highlightRgb,\n            baseOpacity,\n            highlightOpacityBoost\n          );\n          const el = pathPool[pathIndex++]!;\n          el.setAttribute('d', attrs.d);\n          el.setAttribute('stroke', attrs.stroke);\n          el.setAttribute('stroke-opacity', String(attrs.strokeOpacity));\n          el.setAttribute('stroke-width', String(attrs.strokeWidth));\n        }\n      }\n\n      frame = requestAnimationFrame(tick);\n    };\n\n    tick();\n\n    return () => {\n      cancelAnimationFrame(frame);\n      // Clean up path elements we injected\n      for (const el of pathPool) {\n        el.remove();\n      }\n    };\n  }, []); // no dependencies — reads everything via refs\n\n  return (\n    <svg\n      ref={svgRef}\n      aria-hidden=\"true\"\n      className={cn(\n        'pointer-events-none absolute inset-0 size-full',\n        className\n      )}\n      {...props}\n    />\n  );\n};\n"],"mappings":"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"}

package/dist/esm/components/Pattern/index.mjs

@@ -1,5 +1,6 @@
 import { DotPattern } from "./DotPattern.mjs";
+import { GridDistortionPattern } from "./GridDistortionPattern.mjs";
 import { GridPattern } from "./GridPattern.mjs";
 import { Spotlight } from "./SpotLight.mjs";
 
-export { DotPattern, GridPattern, Spotlight };
+export { DotPattern, GridDistortionPattern, GridPattern, Spotlight };

package/dist/esm/components/RightDrawer/RightDrawer.mjs

@@ -1,12 +1,12 @@
 'use client';
 
+import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
+import { useDevice } from "../../hooks/useDevice.mjs";
+import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { Button } from "../Button/Button.mjs";
 import { Container } from "../Container/index.mjs";
-import { useDevice } from "../../hooks/useDevice.mjs";
 import { KeyboardShortcut } from "../KeyboardShortcut/KeyboardShortcut.mjs";
 import { Popover } from "../Popover/dynamic.mjs";
-import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
-import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { MaxWidthSmoother } from "../MaxWidthSmoother/index.mjs";
 import { isElementAtTopAndNotCovered } from "./isElementAtTopAndNotCovered.mjs";
 import { useRightDrawer } from "./useRightDrawer.mjs";

package/dist/esm/components/Tab/Tab.mjs

@@ -1,8 +1,8 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
-import { TabSelector } from "../TabSelector/TabSelector.mjs";
 import { useHorizontalSwipe } from "../../hooks/useHorizontalSwipe.mjs";
+import { TabSelector } from "../TabSelector/TabSelector.mjs";
 import { useTabContext } from "./TabContext.mjs";
 import { Children, createContext, isValidElement, useState } from "react";
 import { cva } from "class-variance-authority";

package/dist/esm/components/Toaster/Toast.mjs

@@ -1,10 +1,10 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
-import * as ToastPrimitives from "@radix-ui/react-toast";
-import { cva } from "class-variance-authority";
 import { X } from "lucide-react";
+import { cva } from "class-variance-authority";
 import { jsx } from "react/jsx-runtime";
+import * as ToastPrimitives from "@radix-ui/react-toast";
 
 //#region src/components/Toaster/Toast.tsx
 const ToastProvider = ToastPrimitives;

package/dist/esm/components/index.mjs

@@ -1,6 +1,3 @@
-import { Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, toastVariants } from "./Toaster/Toast.mjs";
-import { reducer, toast, useToast } from "./Toaster/useToast.mjs";
-import { Toaster } from "./Toaster/Toaster.mjs";
 import { Loader } from "./Loader/index.mjs";
 import { Button, buttonVariants } from "./Button/Button.mjs";
 import { MaxHeightSmoother } from "./MaxHeightSmoother/index.mjs";
@@ -121,6 +118,9 @@ import { SmartTable } from "./Table/SmartTable.mjs";
 import { Hr, Td, Th, Tr } from "./Table/TableElements.mjs";
 import { MarkdownRenderer, baseMarkdownComponents, getIntlayerMarkdownOptions } from "./MarkDownRender/MarkDownRender.mjs";
 import { createEditorUploadFn } from "./MarkdownEditor/imageUpload.mjs";
+import { Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, toastVariants } from "./Toaster/Toast.mjs";
+import { reducer, toast, useToast } from "./Toaster/useToast.mjs";
+import { Toaster } from "./Toaster/Toaster.mjs";
 import { MarkdownEditor } from "./MarkdownEditor/MarkdownEditor.mjs";
 import { MaxWidthSmoother } from "./MaxWidthSmoother/index.mjs";
 import { DesktopNavbar } from "./Navbar/DesktopNavbar.mjs";
@@ -128,6 +128,7 @@ import { Burger } from "./Navbar/Burger.mjs";
 import { MobileNavbar } from "./Navbar/MobileNavbar.mjs";
 import { Navbar } from "./Navbar/index.mjs";
 import { DotPattern } from "./Pattern/DotPattern.mjs";
+import { GridDistortionPattern } from "./Pattern/GridDistortionPattern.mjs";
 import { GridPattern } from "./Pattern/GridPattern.mjs";
 import { Spotlight } from "./Pattern/SpotLight.mjs";
 import { drawerManager, useRightDrawer } from "./RightDrawer/useRightDrawer.mjs";
@@ -140,4 +141,4 @@ import { Terminal } from "./Terminal/Terminal.mjs";
 import { DesktopThemeSwitcher } from "./ThemeSwitcherDropDown/DesktopThemeSwitcher.mjs";
 import { MobileThemeSwitcher } from "./ThemeSwitcherDropDown/MobileThemeSwitcher.mjs";
 
-export { Accordion, AutoCompleteTextarea, AutoSizedTextArea, Avatar, Badge, BitbucketLogo, Breadcrumb, Browser, Burger, Button, Carousel, Checkbox, ClickOutsideDiv, Code, CodeBlock, CodeDefault, CollapsibleTable, Command, CommandRoot, Container, ContentEditableTextArea, ContentEditorInput, ContentEditorTextArea, ContentSelector, CopyButton, CopyToClipboard, DesktopNavbar, DesktopThemeSwitcher, Detail, DictionaryCreationForm, DictionaryEditor, DictionaryFieldEditor, DiscordLogo, DotPattern, DropDown, EditableFieldInput, EditableFieldTextArea, ExpandCollapse, FacebookLogo, FileList, Flag, flags_exports as Flags, Footer, Form, AutoSizedTextAreaElement as FormAutoSizedTextArea, Button as FormButton, CheckboxElement as FormCheckbox, FormControl, FormDescription, EditableFieldInputElement as FormEditableFieldInput, EditableFieldTextAreaElement as FormEditableFieldTextArea, FormElement, FormField, InputElement as FormInput, InputPasswordElement as FormInputPassword, FormItem, FormLabelLayout as FormLabel, FormMessage, MultiSelectElement as FormMultiSelect, OTPElement as FormOTP, SearchInputElement as FormSearchInput, SelectElement as FormSelect, SwitchSelectorElement as FormSwitchSelector, TextAreaElement as FormTextArea, GitHubLogo, GitLabLogo, GoogleLogo, GridPattern, H1, H2, H3, H4, H5, H6, HTMLRenderer, HeightResizer, HideShow, Hr, IDE, InformationTag, Input, InputIndicator, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, InputPassword, InstagramLogo, KeyPathBreadcrumb, KeyboardScreenAdapter, KeyboardShortcut, Label, LanguageBackground, LanguageSection, Link, LinkedInLogo, Loader, LocaleSwitcher, LocaleSwitcherContent, LocaleSwitcherContentProvider, Logo, LogoTextOnly, LogoWithText, LogoWithTextBelow, MarkDownIframe, MarkdownEditor, MarkdownRenderer, MaxHeightSmoother, MaxWidthSmoother, MobileNavbar, MobileThemeSwitcher, Modal, MultiSelect, Navbar, NumberItemsSelector, OTPInput, OTPInputContext, Pagination, Popover, PopoverStatic, PressableSpan, ProductHuntLogo, Radio, RightDrawer, SaveForm, SearchInput, Select, SelectContent, SelectLabel, SelectSeparator, ShowingResultsNumberItems, SmartTable, SocialNetworks, Spotlight, Step, Steps, SwitchSelector, Tab, TabSelector, Table, Tag, Td, TechLogo, techLogos_exports as TechLogos, Terminal, TextArea, TextEditor, TextEditorContainer, Th, TiktokLogo, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, Tr, VersionSwitcher, VersionSwitcherProvider, VerticalSwitchSelector, WithResizer, XLogo, YoutubeLogo, badgeVariants, baseMarkdownComponents, buttonVariants, checkIsExternalLink, checkboxVariants, choiceVariant, containerVariants, createEditorUploadFn, defaultChoices, drawerManager, getCapitals, getIntlayerHTMLOptions, getIntlayerMarkdownOptions, indicatorVariant, inputSlotVariants, inputVariants, isTextChildren, linkVariants, paginationVariants, radioVariants, reducer, switchSelectorVariant, toast, toastVariants, traceKeys, useContentEditable, useCopyToClipboard, useForm, useFormField, useLocaleSwitcherContent, usePasswordManagerBadge, usePrevious, useRightDrawer, useToast, useVersionSwitcher };
+export { Accordion, AutoCompleteTextarea, AutoSizedTextArea, Avatar, Badge, BitbucketLogo, Breadcrumb, Browser, Burger, Button, Carousel, Checkbox, ClickOutsideDiv, Code, CodeBlock, CodeDefault, CollapsibleTable, Command, CommandRoot, Container, ContentEditableTextArea, ContentEditorInput, ContentEditorTextArea, ContentSelector, CopyButton, CopyToClipboard, DesktopNavbar, DesktopThemeSwitcher, Detail, DictionaryCreationForm, DictionaryEditor, DictionaryFieldEditor, DiscordLogo, DotPattern, DropDown, EditableFieldInput, EditableFieldTextArea, ExpandCollapse, FacebookLogo, FileList, Flag, flags_exports as Flags, Footer, Form, AutoSizedTextAreaElement as FormAutoSizedTextArea, Button as FormButton, CheckboxElement as FormCheckbox, FormControl, FormDescription, EditableFieldInputElement as FormEditableFieldInput, EditableFieldTextAreaElement as FormEditableFieldTextArea, FormElement, FormField, InputElement as FormInput, InputPasswordElement as FormInputPassword, FormItem, FormLabelLayout as FormLabel, FormMessage, MultiSelectElement as FormMultiSelect, OTPElement as FormOTP, SearchInputElement as FormSearchInput, SelectElement as FormSelect, SwitchSelectorElement as FormSwitchSelector, TextAreaElement as FormTextArea, GitHubLogo, GitLabLogo, GoogleLogo, GridDistortionPattern, GridPattern, H1, H2, H3, H4, H5, H6, HTMLRenderer, HeightResizer, HideShow, Hr, IDE, InformationTag, Input, InputIndicator, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, InputPassword, InstagramLogo, KeyPathBreadcrumb, KeyboardScreenAdapter, KeyboardShortcut, Label, LanguageBackground, LanguageSection, Link, LinkedInLogo, Loader, LocaleSwitcher, LocaleSwitcherContent, LocaleSwitcherContentProvider, Logo, LogoTextOnly, LogoWithText, LogoWithTextBelow, MarkDownIframe, MarkdownEditor, MarkdownRenderer, MaxHeightSmoother, MaxWidthSmoother, MobileNavbar, MobileThemeSwitcher, Modal, MultiSelect, Navbar, NumberItemsSelector, OTPInput, OTPInputContext, Pagination, Popover, PopoverStatic, PressableSpan, ProductHuntLogo, Radio, RightDrawer, SaveForm, SearchInput, Select, SelectContent, SelectLabel, SelectSeparator, ShowingResultsNumberItems, SmartTable, SocialNetworks, Spotlight, Step, Steps, SwitchSelector, Tab, TabSelector, Table, Tag, Td, TechLogo, techLogos_exports as TechLogos, Terminal, TextArea, TextEditor, TextEditorContainer, Th, TiktokLogo, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, Tr, VersionSwitcher, VersionSwitcherProvider, VerticalSwitchSelector, WithResizer, XLogo, YoutubeLogo, badgeVariants, baseMarkdownComponents, buttonVariants, checkIsExternalLink, checkboxVariants, choiceVariant, containerVariants, createEditorUploadFn, defaultChoices, drawerManager, getCapitals, getIntlayerHTMLOptions, getIntlayerMarkdownOptions, indicatorVariant, inputSlotVariants, inputVariants, isTextChildren, linkVariants, paginationVariants, radioVariants, reducer, switchSelectorVariant, toast, toastVariants, traceKeys, useContentEditable, useCopyToClipboard, useForm, useFormField, useLocaleSwitcherContent, usePasswordManagerBadge, usePrevious, useRightDrawer, useToast, useVersionSwitcher };

package/dist/esm/hooks/index.mjs

@@ -1,16 +1,16 @@
-import { calculateIsMobile, checkIsIOS, checkIsIphoneOrSafariDevice, checkIsMac, checkIsMobileScreen, checkIsMobileUserAgent, getBreakpointFromSize, useDevice } from "./useDevice.mjs";
-import { useItemSelector } from "./useItemSelector.mjs";
-import { usePersistedStore } from "./usePersistedStore.mjs";
-import { useGetElementById } from "./useGetElementById.mjs";
+import { useKeyboardDetector } from "./useKeyboardDetector.mjs";
 import { useGetElementOrWindow } from "./useGetElementOrWindow.mjs";
+import { useScrollY } from "./useScrollY.mjs";
+import { usePersistedStore } from "./usePersistedStore.mjs";
 import { useHorizontalSwipe } from "./useHorizontalSwipe.mjs";
-import { useIsDarkMode } from "./useIsDarkMode.mjs";
+import { useItemSelector } from "./useItemSelector.mjs";
+import { calculateIsMobile, checkIsIOS, checkIsIphoneOrSafariDevice, checkIsMac, checkIsMobileScreen, checkIsMobileUserAgent, getBreakpointFromSize, useDevice } from "./useDevice.mjs";
+import { useSearch } from "./useSearch.mjs";
 import { useIsMounted } from "./useIsMounted.mjs";
-import { useKeyboardDetector } from "./useKeyboardDetector.mjs";
+import { useGetElementById } from "./useGetElementById.mjs";
+import { useIsDarkMode } from "./useIsDarkMode.mjs";
 import { useScreenWidth } from "./useScreenWidth.mjs";
 import { useScrollBlockage } from "./useScrollBlockage/index.mjs";
 import { useScrollDetection } from "./useScrollDetection.mjs";
-import { useScrollY } from "./useScrollY.mjs";
-import { useSearch } from "./useSearch.mjs";
 
 export { calculateIsMobile, checkIsIOS, checkIsIphoneOrSafariDevice, checkIsMac, checkIsMobileScreen, checkIsMobileUserAgent, getBreakpointFromSize, useDevice, useGetElementById, useGetElementOrWindow, useHorizontalSwipe, useIsDarkMode, useIsMounted, useItemSelector, useKeyboardDetector, usePersistedStore, useScreenWidth, useScrollBlockage, useScrollDetection, useScrollY, useSearch };

package/dist/esm/hooks/useIsMounted.mjs

@@ -1,12 +1,14 @@
 'use client';
 
-import { useEffect, useState } from "react";
+import { startTransition, useEffect, useState } from "react";
 
 //#region src/hooks/useIsMounted.ts
 const useIsMounted = () => {
 	const [isMounted, setIsMounted] = useState(false);
 	useEffect(() => {
-		setIsMounted(true);
+		startTransition(() => {
+			setIsMounted(true);
+		});
 	}, []);
 	return isMounted;
 };

package/dist/esm/hooks/useIsMounted.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useIsMounted.mjs","names":[],"sources":["../../../src/hooks/useIsMounted.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\n\nexport const useIsMounted = () => {\n  const [isMounted, setIsMounted] = useState(false);\n\n  useEffect(() => {\n    setIsMounted(true);\n  }, []);\n\n  return isMounted;\n};\n"],"mappings":";;;;;AAIA,MAAa,qBAAqB;CAChC,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;AAEjD,iBAAgB;AACd,eAAa,KAAK;IACjB,EAAE,CAAC;AAEN,QAAO"}
+{"version":3,"file":"useIsMounted.mjs","names":[],"sources":["../../../src/hooks/useIsMounted.ts"],"sourcesContent":["'use client';\n\nimport { startTransition, useEffect, useState } from 'react';\n\nexport const useIsMounted = () => {\n  const [isMounted, setIsMounted] = useState(false);\n\n  useEffect(() => {\n    // startTransition defers the background as a low-priority update so the\n    // sign-in form paints before React starts loading the flag section chunk.\n    startTransition(() => {\n      setIsMounted(true);\n    });\n  }, []);\n\n  return isMounted;\n};\n"],"mappings":";;;;;AAIA,MAAa,qBAAqB;CAChC,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;AAEjD,iBAAgB;AAGd,wBAAsB;AACpB,gBAAa,KAAK;IAClB;IACD,EAAE,CAAC;AAEN,QAAO"}

package/dist/esm/providers/ReactQueryProvider.mjs

@@ -1,11 +1,11 @@
 'use client';
 
 import { useToast } from "../components/Toaster/useToast.mjs";
-import { createAsyncStoragePersister } from "@tanstack/query-async-storage-persister";
 import { MutationCache, QueryClient, QueryClientProvider, timeoutManager } from "@tanstack/react-query";
-import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
 import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";
+import { createAsyncStoragePersister } from "@tanstack/query-async-storage-persister";
+import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
 
 //#region src/providers/ReactQueryProvider.tsx
 const PERSIST_MAX_AGE = 1e3 * 60 * 60 * 24;

package/dist/types/api/useIntlayerAPI.d.ts

@@ -11,9 +11,9 @@ type UseIntlayerAuthProps = {
 };
 declare const useIntlayerOAuthOptions: (props?: UseIntlayerAuthProps) => {
   options: {
+    headers: HeadersInit;
     cache?: RequestCache;
     credentials?: RequestCredentials;
-    headers: HeadersInit;
     integrity?: string;
     keepalive?: boolean;
     method?: string;

package/dist/types/components/Badge/index.d.ts

@@ -23,8 +23,8 @@ type BadgeSize = 'sm' | 'md' | 'lg';
  * @description Defines the styling variants for different badge combinations
  */
 declare const badgeVariants: (props?: {
-  color?: "error" | "success" | "primary" | "secondary" | "text" | "neutral" | "light" | "dark" | "custom";
-  variant?: "default" | "none" | "outline" | "hoverable";
+  color?: "error" | "custom" | "primary" | "secondary" | "neutral" | "light" | "dark" | "text" | "success";
+  variant?: "none" | "default" | "outline" | "hoverable";
   size?: "sm" | "md" | "lg";
 } & _$class_variance_authority_types0.ClassProp) => string;
 /**

package/dist/types/components/Button/Button.d.ts

@@ -24,11 +24,11 @@ type ButtonTextAlign = 'left' | 'center' | 'right';
  * Enhanced button variants with improved accessibility and focus states
  */
 declare const buttonVariants: (props?: {
-  size?: "xs" | "sm" | "md" | "lg" | "xl" | "custom" | "icon-sm" | "icon-md" | "icon-lg" | "icon-xl";
-  color?: "error" | "success" | "primary" | "secondary" | "text" | "neutral" | "light" | "dark" | "custom" | "card" | "current" | "text-inverse";
-  roundedSize?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "4xl" | "full" | "5xl";
-  variant?: "default" | "input" | "none" | "link" | "outline" | "hoverable" | "invisible-link" | "fade";
-  textAlign?: "left" | "right" | "center";
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "icon-sm" | "icon-md" | "icon-lg" | "icon-xl" | "custom";
+  color?: "error" | "custom" | "primary" | "secondary" | "neutral" | "card" | "light" | "dark" | "text" | "current" | "text-inverse" | "success";
+  roundedSize?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "4xl" | "5xl" | "full";
+  variant?: "none" | "default" | "outline" | "link" | "invisible-link" | "hoverable" | "fade" | "input";
+  textAlign?: "left" | "center" | "right";
   isFullWidth?: boolean;
 } & _$class_variance_authority_types0.ClassProp) => string;
 /**

package/dist/types/components/CollapsibleTable/CollapsibleTable.d.ts

@@ -5,8 +5,8 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/CollapsibleTable/CollapsibleTable.d.ts
 declare const collapsibleTableVariants: (props?: {
   size?: "sm" | "md" | "lg" | "xl" | "full";
-  variant?: "default" | "dark" | "ghost" | "outlined";
-  spacing?: "auto" | "sm" | "md" | "lg" | "none";
+  variant?: "dark" | "default" | "ghost" | "outlined";
+  spacing?: "sm" | "md" | "lg" | "none" | "auto";
 } & _$class_variance_authority_types0.ClassProp) => string;
 interface CollapsibleTableProps extends Omit<HTMLAttributes<HTMLElement>, 'title'>, VariantProps<typeof collapsibleTableVariants> {
   /** Table title displayed in the header */

package/dist/types/components/Container/index.d.ts

@@ -13,7 +13,7 @@ declare const containerVariants: (props?: {
   padding?: "sm" | "md" | "lg" | "xl" | "2xl" | "none";
   separator?: "both" | "without" | "x" | "y";
   border?: "with" | "none";
-  borderColor?: "error" | "success" | "primary" | "secondary" | "text" | "neutral" | "card" | "warning";
+  borderColor?: "error" | "primary" | "secondary" | "neutral" | "card" | "text" | "success" | "warning";
   background?: "with" | "none" | "hoverable";
   gap?: "sm" | "md" | "lg" | "xl" | "2xl" | "none";
 } & _$class_variance_authority_types0.ClassProp) => string;

package/dist/types/components/DictionaryFieldEditor/DictionaryCreationForm/useDictionaryFormSchema.d.ts

@@ -7,10 +7,10 @@ declare const useDictionarySchema: (projectId: string) => z.ZodObject<{
   key: z.ZodDefault<z.ZodString>;
   projectIds: z.ZodDefault<z.ZodArray<z.ZodString>>;
   qualifierType: z.ZodDefault<z.ZodEnum<{
-    item: "item";
-    meta: "meta";
     none: "none";
     variant: "variant";
+    meta: "meta";
+    item: "item";
   }>>;
   item: z.ZodOptional<z.ZodCoercedNumber<unknown>>;
   variant: z.ZodOptional<z.ZodString>;

package/dist/types/components/Input/Checkbox.d.ts

@@ -6,7 +6,7 @@ import { VariantProps } from "class-variance-authority";
 declare const checkboxVariants: (props?: {
   variant?: "default";
   size?: "xs" | "sm" | "md" | "lg";
-  color?: "error" | "success" | "primary" | "secondary" | "text" | "neutral" | "light" | "dark" | "custom" | "text-inverse";
+  color?: "error" | "custom" | "primary" | "secondary" | "neutral" | "light" | "dark" | "text" | "text-inverse" | "success";
   validationStyleEnabled?: "enabled" | "disabled";
 } & _$class_variance_authority_types0.ClassProp) => string;
 type CheckboxSize = 'xs' | 'sm' | 'md' | 'lg';

package/dist/types/components/Input/Radio.d.ts

@@ -6,7 +6,7 @@ import { VariantProps } from "class-variance-authority";
 declare const radioVariants: (props?: {
   variant?: "default";
   size?: "xs" | "sm" | "md" | "lg";
-  color?: "error" | "success" | "primary" | "secondary" | "text" | "neutral" | "light" | "dark" | "custom" | "text-inverse";
+  color?: "error" | "custom" | "primary" | "secondary" | "neutral" | "light" | "dark" | "text" | "text-inverse" | "success";
   validationStyleEnabled?: "enabled" | "disabled";
 } & _$class_variance_authority_types0.ClassProp) => string;
 type RadioSize = 'xs' | 'sm' | 'md' | 'lg';

package/dist/types/components/LanguageBackground/LanguageBackground.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LanguageBackground.d.ts","names":[],"sources":["../../../../src/components/LanguageBackground/LanguageBackground.tsx"],"mappings":";;;cAgBa,kBAAA,EAAoB,EAAA,CAAG,iBAAA"}
+{"version":3,"file":"LanguageBackground.d.ts","names":[],"sources":["../../../../src/components/LanguageBackground/LanguageBackground.tsx"],"mappings":";;;cASa,kBAAA,EAAoB,EAAA,CAAG,iBAAA"}

package/dist/types/components/Link/Link.d.ts

@@ -13,9 +13,9 @@ type LinkRoundedSize = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'ful
 type LinkSize = 'sm' | 'md' | 'lg' | 'xl' | 'custom';
 type LinkUnderlined = 'default' | 'true' | 'false';
 declare const linkVariants: (props?: {
-  variant?: "default" | "hoverable" | "button" | "invisible-link" | "button-outlined";
+  variant?: "default" | "invisible-link" | "hoverable" | "button" | "button-outlined";
   roundedSize?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "full";
-  color?: "error" | "success" | "primary" | "secondary" | "text" | "neutral" | "light" | "dark" | "custom" | "text-inverse";
+  color?: "error" | "custom" | "primary" | "secondary" | "neutral" | "light" | "dark" | "text" | "text-inverse" | "success";
   size?: "sm" | "md" | "lg" | "xl" | "custom";
   underlined?: boolean | "default";
 } & _$class_variance_authority_types0.ClassProp) => string;

package/dist/types/components/Pagination/Pagination.d.ts

@@ -5,8 +5,8 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/Pagination/Pagination.d.ts
 declare const paginationVariants: (props?: {
   size?: "sm" | "md" | "lg";
-  color?: "primary" | "secondary" | "text" | "neutral";
-  variant?: "default" | "ghost" | "bordered";
+  color?: "primary" | "secondary" | "neutral" | "text";
+  variant?: "default" | "bordered" | "ghost";
 } & _$class_variance_authority_types0.ClassProp) => string;
 type PaginationSize = 'sm' | 'md' | 'lg';
 type PaginationVariant = 'default' | 'bordered' | 'ghost';