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

package/dist/esm/components/LanguageBackground/LanguageBackground.mjs

@@ -1,20 +1,15 @@
 'use client';
 
-import { Suspense, lazy, startTransition, useEffect, useState } from "react";
+import { useIsMounted } from "../../hooks/useIsMounted.mjs";
+import { Suspense, lazy } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/LanguageBackground/LanguageBackground.tsx
 const LazyLanguageSection = lazy(() => import("./LanguageSection.mjs").then((m) => ({ default: m.LanguageSection })));
 const LanguageBackground = ({ children }) => {
-	const [mounted, setMounted] = useState(false);
-	useEffect(() => {
-		startTransition(() => {
-			setMounted(true);
-		});
-	}, []);
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [children, /* @__PURE__ */ jsx("div", {
 		className: "absolute top-0 left-0 -z-1 flex size-full items-center justify-center",
-		children: mounted && /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(LazyLanguageSection, { className: "mt-[30%]" }) })
+		children: useIsMounted() && /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(LazyLanguageSection, { className: "mt-[30%]" }) })
 	})] });
 };
 

package/dist/esm/components/LanguageBackground/LanguageBackground.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"LanguageBackground.mjs","names":[],"sources":["../../../../src/components/LanguageBackground/LanguageBackground.tsx"],"sourcesContent":["'use client';\n\nimport {\n  type FC,\n  lazy,\n  type PropsWithChildren,\n  Suspense,\n  startTransition,\n  useEffect,\n  useState,\n} from 'react';\n\nconst LazyLanguageSection = lazy(() =>\n  import('./LanguageSection').then((m) => ({ default: m.LanguageSection }))\n);\n\nexport const LanguageBackground: FC<PropsWithChildren> = ({ children }) => {\n  const [mounted, setMounted] = 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      setMounted(true);\n    });\n  }, []);\n\n  return (\n    <>\n      {children}\n      <div className=\"absolute top-0 left-0 -z-1 flex size-full items-center justify-center\">\n        {mounted && (\n          <Suspense>\n            <LazyLanguageSection className=\"mt-[30%]\" />\n          </Suspense>\n        )}\n      </div>\n    </>\n  );\n};\n"],"mappings":";;;;;;AAYA,MAAM,sBAAsB,WAC1B,OAAO,yBAAqB,MAAM,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAC1E;AAED,MAAa,sBAA6C,EAAE,eAAe;CACzE,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;AAE7C,iBAAgB;AAGd,wBAAsB;AACpB,cAAW,KAAK;IAChB;IACD,EAAE,CAAC;AAEN,QACE,8CACG,UACD,oBAAC,OAAD;EAAK,WAAU;YACZ,WACC,oBAAC,UAAD,YACE,oBAAC,qBAAD,EAAqB,WAAU,YAAa,GACnC;EAET,EACL"}
+{"version":3,"file":"LanguageBackground.mjs","names":[],"sources":["../../../../src/components/LanguageBackground/LanguageBackground.tsx"],"sourcesContent":["'use client';\n\nimport { useIsMounted } from '@hooks/useIsMounted';\nimport { type FC, lazy, type PropsWithChildren, Suspense } from 'react';\n\nconst LazyLanguageSection = lazy(() =>\n  import('./LanguageSection').then((m) => ({ default: m.LanguageSection }))\n);\n\nexport const LanguageBackground: FC<PropsWithChildren> = ({ children }) => {\n  const isMounted = useIsMounted();\n\n  return (\n    <>\n      {children}\n      <div className=\"absolute top-0 left-0 -z-1 flex size-full items-center justify-center\">\n        {isMounted && (\n          <Suspense>\n            <LazyLanguageSection className=\"mt-[30%]\" />\n          </Suspense>\n        )}\n      </div>\n    </>\n  );\n};\n"],"mappings":";;;;;;;AAKA,MAAM,sBAAsB,WAC1B,OAAO,yBAAqB,MAAM,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAC1E;AAED,MAAa,sBAA6C,EAAE,eAAe;AAGzE,QACE,8CACG,UACD,oBAAC,OAAD;EAAK,WAAU;YALD,cAMF,IACR,oBAAC,UAAD,YACE,oBAAC,qBAAD,EAAqB,WAAU,YAAa,GACnC;EAET,EACL"}

package/dist/esm/components/MarkDownRender/MarkDownRender.mjs

@@ -50,7 +50,7 @@ const StrongRenderer = (props) => /* @__PURE__ */ jsx("strong", {
 const MemoizedCodeBlock = memo(({ className, children, isDarkMode, lang, ...rest }) => {
 	const content = String(children ?? "").replace(/\n$/, "");
 	if (!!!className) return /* @__PURE__ */ jsx("code", {
-		className: "rounded-md border border-neutral/30 bg-card/60 box-decoration-clone px-1.5 py-0.5 font-mono",
+		className: "scale-80 rounded-md border border-neutral/30 bg-card/60 box-decoration-clone px-1.5 py-0.5 font-mono",
 		children: content.replace(/&(?:amp;)?#(\d+);/g, (_, code) => String.fromCharCode(parseInt(code, 10)))
 	});
 	const language = className?.replace(/lang(?:uage)?-/, "") || "plaintext";

package/dist/esm/components/MarkDownRender/MarkDownRender.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MarkDownRender.mjs","names":[],"sources":["../../../../src/components/MarkDownRender/MarkDownRender.tsx"],"sourcesContent":["import type { LocalesValues } from '@intlayer/types/module_augmentation';\nimport { cn } from '@utils/cn';\nimport type { ComponentProps, ComponentPropsWithoutRef, FC } from 'react';\nimport { memo } from 'react';\nimport {\n  type MarkdownRenderer as MarkdownRendererIntlayer,\n  type ParsedMarkdown,\n  renderMarkdown,\n} from 'react-intlayer/markdown';\n\nexport type { ParsedMarkdown };\n\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport { H1, H2, H3, H4, H5, H6 } from '../Headers';\nimport { Code } from '../IDE/Code';\nimport { CodeProvider } from '../IDE/CodeContext';\nimport { Link } from '../Link';\nimport { Tab } from '../Tab';\nimport { TabProvider } from '../Tab/TabContext';\nimport { Hr, SmartTable, Td, Th, Tr } from '../Table';\nimport { MarkDownIframe } from './MarkDownIframe';\n\n// Extracted, stable component renderers\nconst H1Renderer = (props: ComponentProps<'h1'>) => (\n  <H1 isClickable className=\"mb-16 mb-8 text-text\" {...props} />\n);\nconst H2Renderer = (props: ComponentProps<'h2'>) => (\n  <H2 isClickable className=\"mt-16 text-text\" {...props} />\n);\nconst H3Renderer = (props: ComponentProps<'h3'>) => (\n  <H3 isClickable className=\"mt-5 text-text\" {...props} />\n);\nconst H4Renderer = (props: ComponentProps<'h4'>) => (\n  <H4 isClickable className=\"mt-3 text-text\" {...props} />\n);\nconst H5Renderer = (props: ComponentProps<'h5'>) => (\n  <H5 isClickable className=\"mt-3 text-text\" {...props} />\n);\nconst H6Renderer = (props: ComponentProps<'h6'>) => (\n  <H6 isClickable className=\"mt-3 text-text\" {...props} />\n);\nconst StrongRenderer = (props: ComponentProps<'strong'>) => (\n  <strong className=\"text-text\" {...props} />\n);\n\nconst MemoizedCodeBlock = memo(\n  ({\n    className,\n    children,\n    isDarkMode,\n    lang, // Destructure html lang prop to prevent passing invalid BCP-47 language tag to Code component\n    ...rest\n  }: ComponentProps<'code'> & { isDarkMode?: boolean }) => {\n    const content = String(children ?? '').replace(/\\n$/, '');\n    const isBlock = !!className;\n\n    if (!isBlock) {\n      const decodedContent = content.replace(\n        /&(?:amp;)?#(\\d+);/g,\n        (_, code: string) => String.fromCharCode(parseInt(code, 10))\n      );\n      return (\n        <code className=\"rounded-md border border-neutral/30 bg-card/60 box-decoration-clone px-1.5 py-0.5 font-mono\">\n          {decodedContent}\n        </code>\n      );\n    }\n\n    const language = (className?.replace(/lang(?:uage)?-/, '') ||\n      'plaintext') as BundledLanguage;\n\n    return (\n      <Code {...rest} language={language} showHeader isDarkMode={isDarkMode}>\n        {content}\n      </Code>\n    );\n  },\n  (prevProps, nextProps) =>\n    prevProps.children === nextProps.children &&\n    prevProps.className === nextProps.className &&\n    prevProps.isDarkMode === nextProps.isDarkMode\n);\n\nconst createCodeRenderer = (isDarkMode?: boolean) => {\n  return function CodeWrapper(props: ComponentProps<'code'>) {\n    return <MemoizedCodeBlock {...props} isDarkMode={isDarkMode} />;\n  };\n};\n\nconst BlockquoteRenderer = ({\n  className,\n  ...props\n}: ComponentProps<'blockquote'>) => (\n  <blockquote\n    className={cn(\n      'mt-5 gap-3 border-card border-l-4 pl-5 text-neutral [&_strong]:text-neutral',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst UlRenderer = ({ className, ...props }: ComponentProps<'ul'>) => (\n  <ul\n    className={cn(\n      'mt-5 flex list-disc flex-col gap-3 pl-5 marker:text-neutral/80',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst OlRenderer = ({ className, ...props }: ComponentProps<'ol'>) => (\n  <ol\n    className={cn(\n      'mt-5 flex list-decimal flex-col gap-3 pl-5 marker:text-neutral/80',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst ImgRenderer = ({\n  className,\n  alt,\n  src,\n  ...props\n}: ComponentProps<'img'>) => (\n  <img\n    {...props}\n    alt={alt ?? ''}\n    loading=\"lazy\"\n    className={cn('max-h-[80vh] max-w-full rounded-md', className)}\n    src={\n      src?.includes('github.com')\n        ? src\n            ?.replace('github.com', 'raw.githubusercontent.com')\n            .replace('/blob/', '/') // GitHub raw URLs do not use /blob/\n        : src\n    }\n  />\n);\n\nconst createLinkRenderer = (locale?: LocalesValues) => {\n  return (props: ComponentProps<'a'>) => (\n    <Link\n      isExternalLink={props.href?.startsWith('http')}\n      underlined\n      locale={locale}\n      label=\"\"\n      color=\"text\"\n      {...(props as any)}\n    />\n  );\n};\n\nconst PreRenderer = (props: ComponentProps<'pre'>) => <>{props.children}</>;\nconst TableRenderer = (props: ComponentProps<typeof SmartTable>) => (\n  <SmartTable isRollable displayModal {...props} />\n);\n\nconst TabsRenderer = (props: ComponentProps<typeof Tab>) => (\n  <Tab\n    {...props}\n    className=\"rounded-xl border border-card\"\n    headerClassName=\"sticky rounded-xl top-24 z-5 bg-background/70 backdrop-blur overflow-x-auto\"\n  />\n);\nconst ColumnsRenderer = ({\n  className,\n  ...props\n}: ComponentPropsWithoutRef<'div'>) => (\n  <div className={cn('flex gap-4 max-md:flex-col', className)} {...props} />\n);\nconst ColumnRenderer = ({\n  className,\n  ...props\n}: ComponentPropsWithoutRef<'div'>) => (\n  <div className={cn('flex-1', className)} {...props} />\n);\n\nconst Iframe = (props: ComponentProps<'iframe'>) => (\n  <MarkDownIframe {...props} />\n);\n\n// Static configuration object for static renderers\nconst staticMarkdownComponents = {\n  h1: H1Renderer,\n  h2: H2Renderer,\n  h3: H3Renderer,\n  h4: H4Renderer,\n  h5: H5Renderer,\n  h6: H6Renderer,\n  strong: StrongRenderer,\n  blockquote: BlockquoteRenderer,\n  ul: UlRenderer,\n  ol: OlRenderer,\n  img: ImgRenderer,\n  pre: PreRenderer,\n  table: TableRenderer,\n  th: Th,\n  tr: Tr,\n  td: Td,\n  hr: Hr,\n  Tabs: TabsRenderer,\n  Tab: Tab.Item,\n  Columns: ColumnsRenderer,\n  Column: ColumnRenderer,\n  iframe: Iframe,\n};\n\n// Factory function to create components with dynamic props\nconst createMarkdownComponents = (\n  isDarkMode?: boolean,\n  locale?: LocalesValues\n) => ({\n  ...staticMarkdownComponents,\n  code: createCodeRenderer(isDarkMode),\n  a: createLinkRenderer(locale),\n});\n\n// Export static renderers for backward compatibility\nexport const baseMarkdownComponents = staticMarkdownComponents;\n\ntype MarkdownRendererProps = {\n  children: string | ParsedMarkdown;\n  isDarkMode?: boolean;\n  locale?: LocalesValues;\n  forceBlock?: boolean;\n  preserveFrontmatter?: boolean;\n  tagfilter?: boolean;\n  components?: ComponentProps<typeof MarkdownRendererIntlayer>['components'];\n  wrapper?: ComponentProps<typeof MarkdownRendererIntlayer>['wrapper'];\n};\n\nexport const getIntlayerMarkdownOptions = (_isDarkMode?: boolean) => ({\n  components: baseMarkdownComponents,\n});\n\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n  children,\n  isDarkMode = false,\n  locale,\n  forceBlock,\n  preserveFrontmatter,\n  tagfilter,\n  components: componentsProp,\n  wrapper,\n}) => {\n  const markdownComponents = createMarkdownComponents(isDarkMode, locale);\n\n  const markdownContent = renderMarkdown(children, {\n    components: {\n      ...markdownComponents,\n      ...componentsProp,\n    },\n    wrapper,\n    forceBlock,\n    preserveFrontmatter,\n    tagfilter,\n  });\n\n  return (\n    <CodeProvider>\n      <TabProvider>{markdownContent}</TabProvider>\n    </CodeProvider>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"MarkDownRender.mjs","names":[],"sources":["../../../../src/components/MarkDownRender/MarkDownRender.tsx"],"sourcesContent":["import type { LocalesValues } from '@intlayer/types/module_augmentation';\nimport { cn } from '@utils/cn';\nimport type { ComponentProps, ComponentPropsWithoutRef, FC } from 'react';\nimport { memo } from 'react';\nimport {\n  type MarkdownRenderer as MarkdownRendererIntlayer,\n  type ParsedMarkdown,\n  renderMarkdown,\n} from 'react-intlayer/markdown';\n\nexport type { ParsedMarkdown };\n\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport { H1, H2, H3, H4, H5, H6 } from '../Headers';\nimport { Code } from '../IDE/Code';\nimport { CodeProvider } from '../IDE/CodeContext';\nimport { Link } from '../Link';\nimport { Tab } from '../Tab';\nimport { TabProvider } from '../Tab/TabContext';\nimport { Hr, SmartTable, Td, Th, Tr } from '../Table';\nimport { MarkDownIframe } from './MarkDownIframe';\n\n// Extracted, stable component renderers\nconst H1Renderer = (props: ComponentProps<'h1'>) => (\n  <H1 isClickable className=\"mb-16 mb-8 text-text\" {...props} />\n);\nconst H2Renderer = (props: ComponentProps<'h2'>) => (\n  <H2 isClickable className=\"mt-16 text-text\" {...props} />\n);\nconst H3Renderer = (props: ComponentProps<'h3'>) => (\n  <H3 isClickable className=\"mt-5 text-text\" {...props} />\n);\nconst H4Renderer = (props: ComponentProps<'h4'>) => (\n  <H4 isClickable className=\"mt-3 text-text\" {...props} />\n);\nconst H5Renderer = (props: ComponentProps<'h5'>) => (\n  <H5 isClickable className=\"mt-3 text-text\" {...props} />\n);\nconst H6Renderer = (props: ComponentProps<'h6'>) => (\n  <H6 isClickable className=\"mt-3 text-text\" {...props} />\n);\nconst StrongRenderer = (props: ComponentProps<'strong'>) => (\n  <strong className=\"text-text\" {...props} />\n);\n\nconst MemoizedCodeBlock = memo(\n  ({\n    className,\n    children,\n    isDarkMode,\n    lang, // Destructure html lang prop to prevent passing invalid BCP-47 language tag to Code component\n    ...rest\n  }: ComponentProps<'code'> & { isDarkMode?: boolean }) => {\n    const content = String(children ?? '').replace(/\\n$/, '');\n    const isBlock = !!className;\n\n    if (!isBlock) {\n      const decodedContent = content.replace(\n        /&(?:amp;)?#(\\d+);/g,\n        (_, code: string) => String.fromCharCode(parseInt(code, 10))\n      );\n      return (\n        <code className=\"scale-80 rounded-md border border-neutral/30 bg-card/60 box-decoration-clone px-1.5 py-0.5 font-mono\">\n          {decodedContent}\n        </code>\n      );\n    }\n\n    const language = (className?.replace(/lang(?:uage)?-/, '') ||\n      'plaintext') as BundledLanguage;\n\n    return (\n      <Code {...rest} language={language} showHeader isDarkMode={isDarkMode}>\n        {content}\n      </Code>\n    );\n  },\n  (prevProps, nextProps) =>\n    prevProps.children === nextProps.children &&\n    prevProps.className === nextProps.className &&\n    prevProps.isDarkMode === nextProps.isDarkMode\n);\n\nconst createCodeRenderer = (isDarkMode?: boolean) => {\n  return function CodeWrapper(props: ComponentProps<'code'>) {\n    return <MemoizedCodeBlock {...props} isDarkMode={isDarkMode} />;\n  };\n};\n\nconst BlockquoteRenderer = ({\n  className,\n  ...props\n}: ComponentProps<'blockquote'>) => (\n  <blockquote\n    className={cn(\n      'mt-5 gap-3 border-card border-l-4 pl-5 text-neutral [&_strong]:text-neutral',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst UlRenderer = ({ className, ...props }: ComponentProps<'ul'>) => (\n  <ul\n    className={cn(\n      'mt-5 flex list-disc flex-col gap-3 pl-5 marker:text-neutral/80',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst OlRenderer = ({ className, ...props }: ComponentProps<'ol'>) => (\n  <ol\n    className={cn(\n      'mt-5 flex list-decimal flex-col gap-3 pl-5 marker:text-neutral/80',\n      className\n    )}\n    {...props}\n  />\n);\n\nconst ImgRenderer = ({\n  className,\n  alt,\n  src,\n  ...props\n}: ComponentProps<'img'>) => (\n  <img\n    {...props}\n    alt={alt ?? ''}\n    loading=\"lazy\"\n    className={cn('max-h-[80vh] max-w-full rounded-md', className)}\n    src={\n      src?.includes('github.com')\n        ? src\n            ?.replace('github.com', 'raw.githubusercontent.com')\n            .replace('/blob/', '/') // GitHub raw URLs do not use /blob/\n        : src\n    }\n  />\n);\n\nconst createLinkRenderer = (locale?: LocalesValues) => {\n  return (props: ComponentProps<'a'>) => (\n    <Link\n      isExternalLink={props.href?.startsWith('http')}\n      underlined\n      locale={locale}\n      label=\"\"\n      color=\"text\"\n      {...(props as any)}\n    />\n  );\n};\n\nconst PreRenderer = (props: ComponentProps<'pre'>) => <>{props.children}</>;\nconst TableRenderer = (props: ComponentProps<typeof SmartTable>) => (\n  <SmartTable isRollable displayModal {...props} />\n);\n\nconst TabsRenderer = (props: ComponentProps<typeof Tab>) => (\n  <Tab\n    {...props}\n    className=\"rounded-xl border border-card\"\n    headerClassName=\"sticky rounded-xl top-24 z-5 bg-background/70 backdrop-blur overflow-x-auto\"\n  />\n);\nconst ColumnsRenderer = ({\n  className,\n  ...props\n}: ComponentPropsWithoutRef<'div'>) => (\n  <div className={cn('flex gap-4 max-md:flex-col', className)} {...props} />\n);\nconst ColumnRenderer = ({\n  className,\n  ...props\n}: ComponentPropsWithoutRef<'div'>) => (\n  <div className={cn('flex-1', className)} {...props} />\n);\n\nconst Iframe = (props: ComponentProps<'iframe'>) => (\n  <MarkDownIframe {...props} />\n);\n\n// Static configuration object for static renderers\nconst staticMarkdownComponents = {\n  h1: H1Renderer,\n  h2: H2Renderer,\n  h3: H3Renderer,\n  h4: H4Renderer,\n  h5: H5Renderer,\n  h6: H6Renderer,\n  strong: StrongRenderer,\n  blockquote: BlockquoteRenderer,\n  ul: UlRenderer,\n  ol: OlRenderer,\n  img: ImgRenderer,\n  pre: PreRenderer,\n  table: TableRenderer,\n  th: Th,\n  tr: Tr,\n  td: Td,\n  hr: Hr,\n  Tabs: TabsRenderer,\n  Tab: Tab.Item,\n  Columns: ColumnsRenderer,\n  Column: ColumnRenderer,\n  iframe: Iframe,\n};\n\n// Factory function to create components with dynamic props\nconst createMarkdownComponents = (\n  isDarkMode?: boolean,\n  locale?: LocalesValues\n) => ({\n  ...staticMarkdownComponents,\n  code: createCodeRenderer(isDarkMode),\n  a: createLinkRenderer(locale),\n});\n\n// Export static renderers for backward compatibility\nexport const baseMarkdownComponents = staticMarkdownComponents;\n\ntype MarkdownRendererProps = {\n  children: string | ParsedMarkdown;\n  isDarkMode?: boolean;\n  locale?: LocalesValues;\n  forceBlock?: boolean;\n  preserveFrontmatter?: boolean;\n  tagfilter?: boolean;\n  components?: ComponentProps<typeof MarkdownRendererIntlayer>['components'];\n  wrapper?: ComponentProps<typeof MarkdownRendererIntlayer>['wrapper'];\n};\n\nexport const getIntlayerMarkdownOptions = (_isDarkMode?: boolean) => ({\n  components: baseMarkdownComponents,\n});\n\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n  children,\n  isDarkMode = false,\n  locale,\n  forceBlock,\n  preserveFrontmatter,\n  tagfilter,\n  components: componentsProp,\n  wrapper,\n}) => {\n  const markdownComponents = createMarkdownComponents(isDarkMode, locale);\n\n  const markdownContent = renderMarkdown(children, {\n    components: {\n      ...markdownComponents,\n      ...componentsProp,\n    },\n    wrapper,\n    forceBlock,\n    preserveFrontmatter,\n    tagfilter,\n  });\n\n  return (\n    <CodeProvider>\n      <TabProvider>{markdownContent}</TabProvider>\n    </CodeProvider>\n  );\n};\n"],"mappings":"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"}

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/index.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/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/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,7 +23,7 @@ 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";
+  color?: "error" | "text" | "success" | "custom" | "primary" | "secondary" | "neutral" | "light" | "dark";
   variant?: "default" | "none" | "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" | "text" | "success" | "custom" | "primary" | "secondary" | "neutral" | "card" | "light" | "dark" | "current" | "text-inverse";
+  roundedSize?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "4xl" | "5xl" | "full";
+  variant?: "default" | "input" | "none" | "outline" | "link" | "invisible-link" | "hoverable" | "fade";
+  textAlign?: "left" | "center" | "right";
   isFullWidth?: boolean;
 } & _$class_variance_authority_types0.ClassProp) => string;
 /**

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

@@ -6,7 +6,7 @@ import { VariantProps } from "class-variance-authority";
 declare const collapsibleTableVariants: (props?: {
   size?: "sm" | "md" | "lg" | "xl" | "full";
   variant?: "default" | "dark" | "ghost" | "outlined";
-  spacing?: "auto" | "sm" | "md" | "lg" | "none";
+  spacing?: "sm" | "md" | "lg" | "auto" | "none";
 } & _$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/Command/index.d.ts

@@ -28,7 +28,7 @@ declare const Command: {
     ref?: React.Ref<HTMLInputElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof _$react.InputHTMLAttributes<HTMLInputElement> | "asChild">, "type" | "value" | "onChange"> & {
+  }, "key" | keyof _$react.InputHTMLAttributes<HTMLInputElement> | "asChild">, "type" | "onChange" | "value"> & {
     value?: string;
     onValueChange?: (search: string) => void;
   } & _$react.RefAttributes<HTMLInputElement>>;
@@ -72,7 +72,7 @@ declare const Command: {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "onSelect" | "disabled"> & {
+  }, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;

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" | "text" | "success" | "primary" | "secondary" | "neutral" | "card" | "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

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

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

@@ -6,8 +6,8 @@ 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";
-  validationStyleEnabled?: "enabled" | "disabled";
+  color?: "error" | "text" | "success" | "custom" | "primary" | "secondary" | "neutral" | "light" | "dark" | "text-inverse";
+  validationStyleEnabled?: "disabled" | "enabled";
 } & _$class_variance_authority_types0.ClassProp) => string;
 type CheckboxSize = 'xs' | 'sm' | 'md' | 'lg';
 type CheckboxColor = 'primary' | 'secondary' | 'neutral' | 'light' | 'text' | 'text-inverse' | 'dark' | 'error' | 'success' | 'custom';

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

@@ -6,7 +6,7 @@ import { VariantProps } from "class-variance-authority";
 declare const inputVariants: (props?: {
   variant?: "default" | "invisible";
   size?: "sm" | "md" | "lg";
-  validationStyleEnabled?: "enabled" | "disabled";
+  validationStyleEnabled?: "disabled" | "enabled";
 } & _$class_variance_authority_types0.ClassProp) => string;
 type InputVariant = 'default' | 'invisible';
 type InputSize = 'md' | 'lg';

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

@@ -6,8 +6,8 @@ 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";
-  validationStyleEnabled?: "enabled" | "disabled";
+  color?: "error" | "text" | "success" | "custom" | "primary" | "secondary" | "neutral" | "light" | "dark" | "text-inverse";
+  validationStyleEnabled?: "disabled" | "enabled";
 } & _$class_variance_authority_types0.ClassProp) => string;
 type RadioSize = 'xs' | 'sm' | 'md' | 'lg';
 type RadioColor = 'primary' | 'secondary' | 'neutral' | 'light' | 'text' | 'text-inverse' | 'dark' | 'error' | 'success' | 'custom';

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" | "text" | "success" | "custom" | "primary" | "secondary" | "neutral" | "light" | "dark" | "text-inverse";
   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?: "text" | "primary" | "secondary" | "neutral";
+  variant?: "default" | "bordered" | "ghost";
 } & _$class_variance_authority_types0.ClassProp) => string;
 type PaginationSize = 'sm' | 'md' | 'lg';
 type PaginationVariant = 'default' | 'bordered' | 'ghost';

package/dist/types/components/Pattern/GridDistortionPattern.d.ts

@@ -0,0 +1,15 @@
+import { FC, SVGProps } from "react";
+
+//#region src/components/Pattern/GridDistortionPattern.d.ts
+type GridDistortionPatternProps = {
+  width?: number;
+  height?: number;
+  radius?: number;
+  strength?: number;
+  lineColor?: string;
+  highlightColor?: string;
+} & SVGProps<SVGSVGElement>;
+declare const GridDistortionPattern: FC<GridDistortionPatternProps>;
+//#endregion
+export { GridDistortionPattern };
+//# sourceMappingURL=GridDistortionPattern.d.ts.map

package/dist/types/components/Pattern/GridDistortionPattern.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridDistortionPattern.d.ts","names":[],"sources":["../../../../src/components/Pattern/GridDistortionPattern.tsx"],"mappings":";;;KA+MK,0BAAA;EACH,KAAA;EACA,MAAA;EACA,MAAA;EACA,QAAA;EACA,SAAA;EACA,cAAA;AAAA,IACE,QAAA,CAAS,aAAA;AAAA,cAEA,qBAAA,EAAuB,EAAA,CAAG,0BAAA"}

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

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

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

@@ -25,14 +25,14 @@ type SwitchSelectorBaseProps<T = boolean> = {
 };
 type SwitchSelectorProps<T = boolean> = SwitchSelectorBaseProps<T> & VariantProps<typeof switchSelectorVariant> & VariantProps<typeof choiceVariant>;
 declare const switchSelectorVariant: (props?: {
-  color?: "primary" | "secondary" | "text" | "neutral" | "light" | "dark";
+  color?: "text" | "primary" | "secondary" | "neutral" | "light" | "dark";
   disabled?: boolean;
 } & _$class_variance_authority_types0.ClassProp) => string;
 declare const choiceVariant: (props?: {
   size?: "xs" | "sm" | "md" | "lg";
 } & _$class_variance_authority_types0.ClassProp) => string;
 declare const indicatorVariant: (props?: {
-  color?: "error" | "primary" | "secondary" | "text" | "neutral" | "light" | "dark";
+  color?: "error" | "text" | "primary" | "secondary" | "neutral" | "light" | "dark";
 } & _$class_variance_authority_types0.ClassProp) => string;
 /**
  * Component that allows the user to select one of the provided choices.

package/dist/types/components/SwitchSelector/VerticalSwitchSelector.d.ts

@@ -5,7 +5,7 @@ import { VariantProps } from "class-variance-authority";
 
 //#region src/components/SwitchSelector/VerticalSwitchSelector.d.ts
 declare const verticalSwitchSelectorVariant: (props?: {
-  color?: "error" | "primary" | "secondary" | "text" | "neutral" | "light" | "dark";
+  color?: "text" | "error" | "primary" | "secondary" | "neutral" | "light" | "dark";
   disabled?: boolean;
 } & _$class_variance_authority_types0.ClassProp) => string;
 declare const verticalChoiceVariant: (props?: {

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

@@ -6,7 +6,7 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/Tab/Tab.d.ts
 declare const tabContainerVariant: (props?: {
   background?: "with" | "without";
-  variant?: "default" | "ghost" | "bordered";
+  variant?: "default" | "bordered" | "ghost";
 } & _$class_variance_authority_types0.ClassProp) => string;
 type TabProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof tabContainerVariant> & {
   defaultTab?: string;

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

@@ -7,7 +7,7 @@ import { ItemSelectorOrientation } from "@hooks/useItemSelector";
 //#region src/components/TabSelector/TabSelector.d.ts
 type TabSelectorColor = 'primary' | 'secondary' | 'error' | 'neutral' | 'light' | 'dark' | 'text';
 declare const tabSelectorVariant: (props?: {
-  color?: "error" | "primary" | "secondary" | "text" | "neutral" | "light" | "dark";
+  color?: "error" | "text" | "primary" | "secondary" | "neutral" | "light" | "dark";
 } & _$class_variance_authority_types0.ClassProp) => string;
 type TabSelectorItemProps = HTMLAttributes<HTMLElement> & {
   key: string | number;

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

@@ -147,7 +147,7 @@ type TagBorder = 'none' | 'with';
 type TagBackground = 'none' | 'with';
 declare const containerVariants: (props?: {
   roundedSize?: "sm" | "md" | "lg" | "xl" | "none" | "full" | "xxl" | "xxxl";
-  color?: "error" | "success" | "primary" | "text" | "neutral" | "warning" | "black" | "white";
+  color?: "error" | "text" | "success" | "primary" | "neutral" | "warning" | "black" | "white";
   size?: "xs" | "sm" | "md" | "lg" | "xl";
   border?: "with" | "none";
   background?: "with" | "none";

package/dist/types/components/Toaster/Toast.d.ts

@@ -25,7 +25,7 @@ declare const ToastViewport: FC<ComponentProps<typeof ToastPrimitives.Viewport>>
  * ```
  */
 declare const toastVariants: (props?: {
-  variant?: "default" | "error" | "success";
+  variant?: "error" | "default" | "success";
 } & _$class_variance_authority_types0.ClassProp) => string;
 /**
  * Toast Component

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

@@ -99,6 +99,7 @@ import { NumberItemsSelector, NumberItemsSelectorProps } from "./Pagination/Numb
 import { Pagination, PaginationProps, PaginationSize, PaginationVariant, paginationVariants } from "./Pagination/Pagination.js";
 import { ShowingResultsNumberItems, ShowingResultsNumberItemsProps } from "./Pagination/ShowingResultsNumberItems.js";
 import { DotPattern } from "./Pattern/DotPattern.js";
+import { GridDistortionPattern } from "./Pattern/GridDistortionPattern.js";
 import { GridPattern } from "./Pattern/GridPattern.js";
 import { Spotlight } from "./Pattern/SpotLight.js";
 import { Detail, DetailProps, PopoverProps, PopoverStatic, PopoverType, PopoverXAlign, PopoverYAlign } from "./Popover/static.js";
@@ -141,4 +142,4 @@ import { Toaster } from "./Toaster/Toaster.js";
 import { reducer, toast, useToast } from "./Toaster/useToast.js";
 import { WithResizer } from "./WithResizer/index.js";
 import { MarkdownRenderer, ParsedMarkdown, baseMarkdownComponents, getIntlayerMarkdownOptions } from "./MarkDownRender/MarkDownRender.js";
-export { Accordion, AccordionProps, AutoCompleteTextarea, AutoSizedTextArea, AutoSizedTextAreaProps, AutocompleteTextAreaProps, Avatar, AvatarProps, Badge, BadgeColor, BadgeProps, BadgeSize, BadgeVariant, BadgeVariantProps, BitbucketLogo, Breadcrumb, BreadcrumbLink, BreadcrumbProps, Browser, BrowserProps, Burger, Button, ButtonColor, ButtonProps, ButtonSize, ButtonTextAlign, ButtonVariant, Carousel, Checkbox, CheckboxColor, CheckboxProps, CheckboxSize, ClickOutsideDiv, ClickOutsideDivProps, Code, CodeBlock, CodeBlockProps, CodeCompAttributes, CodeDefault, CodeLanguage, CollapsibleTable, CollapsibleTableProps, Command, CommandRoot, Container, ContainerBackground, ContainerBorderColor, ContainerGap, ContainerPadding, ContainerProps, ContainerRoundedSize, ContainerSeparator, ContainerTransparency, ContentEditableTextArea, ContentEditableTextAreaHandle, ContentEditableTextAreaProps, ContentEditorInput, ContentEditorInputProps, ContentEditorProps, ContentEditorTextArea, ContentEditorTextAreaProps, ContentSelector, CopyButton, CopyToClipboard, CopyToClipboardProps, CreateEditorUploadFnOptions, DesktopNavbar, DesktopThemeSwitcher, Detail, DetailProps, DictionaryCreationForm, DictionaryEditor, DictionaryFieldEditor, DiscordLogo, DotPattern, DropDown, DropDownAlign, DropDownProps, DropDownType, DropDownYAlign, EditableFieldInput, EditableFieldTextArea, ExpandCollapse, ExpandCollapseProps, FacebookLogo, FileList, FileListProps, Flag, flags_d_exports as Flags, Footer, FooterLink, 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, HeadingProps, HeightResizer, HideShow, HideShowProps, Hr, IDE, IDEProps, InformationTag, Input, InputIndicator, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, InputPassword, InputProps, InputSize, InputVariant, InstagramLogo, KeyList, KeyPathBreadcrumb, KeyboardScreenAdapter, KeyboardShortcut, KeyboardShortcutProps, KeyboardShortcutType, Label, LabelProps, LanguageBackground, LanguageSection, Link, LinkColor, LinkGroup, LinkProps, LinkRoundedSize, LinkSize, LinkUnderlined, LinkVariant, LinkedInLogo, Loader, LoaderProps, LocaleSwitcher, LocaleSwitcherContent, LocaleSwitcherContentProps, LocaleSwitcherContentProvider, LocaleSwitcherProps, Logo, LogoTextOnly, LogoWithText, LogoWithTextBelow, MarkDownIframe, MarkdownEditor, MarkdownEditorProps, MarkdownRenderer, MaxHeightSmoother, MaxWidthSmoother, MobileNavbar, MobileThemeSwitcher, Modal, ModalSize, Modes, MultiSelect, Navbar, NumberItemsSelector, NumberItemsSelectorProps, OTPInput, OTPInputContext, OTPInputProps, Pagination, PaginationProps, PaginationSize, PaginationVariant, PanelProps, ParsedMarkdown, Popover, PopoverProps, PopoverStatic, PopoverType, PopoverXAlign, PopoverYAlign, PressableSpan, ProductHuntLogo, Radio, RadioColor, RadioProps, RadioSize, RenderProps, RightDrawer, SaveForm, SearchInput, Select, SelectContent, SelectContentPosition, SelectLabel, SelectSeparator, ShowingResultsNumberItems, ShowingResultsNumberItemsProps, SlotProps, SmartTable, SocialNetworks, Spotlight, Step, Steps, SwitchSelector, SwitchSelectorBaseProps, SwitchSelectorChoice, SwitchSelectorChoices, SwitchSelectorColor, SwitchSelectorProps, SwitchSelectorSize, Tab, TabItemProps, TabProps, TabSelector, TabSelectorColor, TabSelectorItemProps, TabSelectorProps, Table, TableProps, Tag, TagBackground, TagBorder, TagColor, TagRoundedSize, TagSize, Td, TechLogo, TechLogoName, techLogos_d_exports as TechLogos, Terminal, TerminalProps, TextArea, TextAreaProps, TextEditor, TextEditorContainer, TextEditorProps, Th, TiktokLogo, Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tr, TriggerProps, UploadImageFn, VersionSwitcher, VersionSwitcherProps, VersionSwitcherProvider, VerticalSwitchSelector, VerticalSwitchSelectorProps, 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, AccordionProps, AutoCompleteTextarea, AutoSizedTextArea, AutoSizedTextAreaProps, AutocompleteTextAreaProps, Avatar, AvatarProps, Badge, BadgeColor, BadgeProps, BadgeSize, BadgeVariant, BadgeVariantProps, BitbucketLogo, Breadcrumb, BreadcrumbLink, BreadcrumbProps, Browser, BrowserProps, Burger, Button, ButtonColor, ButtonProps, ButtonSize, ButtonTextAlign, ButtonVariant, Carousel, Checkbox, CheckboxColor, CheckboxProps, CheckboxSize, ClickOutsideDiv, ClickOutsideDivProps, Code, CodeBlock, CodeBlockProps, CodeCompAttributes, CodeDefault, CodeLanguage, CollapsibleTable, CollapsibleTableProps, Command, CommandRoot, Container, ContainerBackground, ContainerBorderColor, ContainerGap, ContainerPadding, ContainerProps, ContainerRoundedSize, ContainerSeparator, ContainerTransparency, ContentEditableTextArea, ContentEditableTextAreaHandle, ContentEditableTextAreaProps, ContentEditorInput, ContentEditorInputProps, ContentEditorProps, ContentEditorTextArea, ContentEditorTextAreaProps, ContentSelector, CopyButton, CopyToClipboard, CopyToClipboardProps, CreateEditorUploadFnOptions, DesktopNavbar, DesktopThemeSwitcher, Detail, DetailProps, DictionaryCreationForm, DictionaryEditor, DictionaryFieldEditor, DiscordLogo, DotPattern, DropDown, DropDownAlign, DropDownProps, DropDownType, DropDownYAlign, EditableFieldInput, EditableFieldTextArea, ExpandCollapse, ExpandCollapseProps, FacebookLogo, FileList, FileListProps, Flag, flags_d_exports as Flags, Footer, FooterLink, 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, HeadingProps, HeightResizer, HideShow, HideShowProps, Hr, IDE, IDEProps, InformationTag, Input, InputIndicator, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, InputPassword, InputProps, InputSize, InputVariant, InstagramLogo, KeyList, KeyPathBreadcrumb, KeyboardScreenAdapter, KeyboardShortcut, KeyboardShortcutProps, KeyboardShortcutType, Label, LabelProps, LanguageBackground, LanguageSection, Link, LinkColor, LinkGroup, LinkProps, LinkRoundedSize, LinkSize, LinkUnderlined, LinkVariant, LinkedInLogo, Loader, LoaderProps, LocaleSwitcher, LocaleSwitcherContent, LocaleSwitcherContentProps, LocaleSwitcherContentProvider, LocaleSwitcherProps, Logo, LogoTextOnly, LogoWithText, LogoWithTextBelow, MarkDownIframe, MarkdownEditor, MarkdownEditorProps, MarkdownRenderer, MaxHeightSmoother, MaxWidthSmoother, MobileNavbar, MobileThemeSwitcher, Modal, ModalSize, Modes, MultiSelect, Navbar, NumberItemsSelector, NumberItemsSelectorProps, OTPInput, OTPInputContext, OTPInputProps, Pagination, PaginationProps, PaginationSize, PaginationVariant, PanelProps, ParsedMarkdown, Popover, PopoverProps, PopoverStatic, PopoverType, PopoverXAlign, PopoverYAlign, PressableSpan, ProductHuntLogo, Radio, RadioColor, RadioProps, RadioSize, RenderProps, RightDrawer, SaveForm, SearchInput, Select, SelectContent, SelectContentPosition, SelectLabel, SelectSeparator, ShowingResultsNumberItems, ShowingResultsNumberItemsProps, SlotProps, SmartTable, SocialNetworks, Spotlight, Step, Steps, SwitchSelector, SwitchSelectorBaseProps, SwitchSelectorChoice, SwitchSelectorChoices, SwitchSelectorColor, SwitchSelectorProps, SwitchSelectorSize, Tab, TabItemProps, TabProps, TabSelector, TabSelectorColor, TabSelectorItemProps, TabSelectorProps, Table, TableProps, Tag, TagBackground, TagBorder, TagColor, TagRoundedSize, TagSize, Td, TechLogo, TechLogoName, techLogos_d_exports as TechLogos, Terminal, TerminalProps, TextArea, TextAreaProps, TextEditor, TextEditorContainer, TextEditorProps, Th, TiktokLogo, Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tr, TriggerProps, UploadImageFn, VersionSwitcher, VersionSwitcherProps, VersionSwitcherProvider, VerticalSwitchSelector, VerticalSwitchSelectorProps, 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intlayer/design-system",
-  "version": "9.0.0-canary.1",
+  "version": "9.0.0-canary.2",
   "private": false,
   "description": "Intlayer design system, including UI components used in the Intlayer editor, website, and visual editor/CMS.",
   "keywords": [
@@ -442,13 +442,13 @@
   "dependencies": {
     "@better-auth/passkey": "1.6.19",
     "@better-auth/sso": "1.6.19",
-    "@intlayer/api": "9.0.0-canary.1",
-    "@intlayer/chokidar": "9.0.0-canary.1",
-    "@intlayer/config": "9.0.0-canary.1",
-    "@intlayer/core": "9.0.0-canary.1",
-    "@intlayer/dictionaries-entry": "9.0.0-canary.1",
-    "@intlayer/editor-react": "9.0.0-canary.1",
-    "@intlayer/types": "9.0.0-canary.1",
+    "@intlayer/api": "9.0.0-canary.2",
+    "@intlayer/chokidar": "9.0.0-canary.2",
+    "@intlayer/config": "9.0.0-canary.2",
+    "@intlayer/core": "9.0.0-canary.2",
+    "@intlayer/dictionaries-entry": "9.0.0-canary.2",
+    "@intlayer/editor-react": "9.0.0-canary.2",
+    "@intlayer/types": "9.0.0-canary.2",
     "@radix-ui/react-dialog": "1.1.17",
     "@radix-ui/react-select": "2.3.1",
     "@radix-ui/react-slot": "1.3.0",
@@ -480,7 +480,7 @@
     "defu": "6.1.7",
     "dompurify": "3.4.10",
     "isomorphic-dompurify": "3.17.0",
-    "react-intlayer": "9.0.0-canary.1",
+    "react-intlayer": "9.0.0-canary.2",
     "react-moveable": "^0.56.0",
     "rollup-preserve-directives": "1.1.3",
     "tippy.js": "^6.3.7",
@@ -491,7 +491,7 @@
     "zod": "4.4.3"
   },
   "devDependencies": {
-    "@intlayer/backend": "9.0.0-canary.1",
+    "@intlayer/backend": "9.0.0-canary.2",
     "@shikijs/transformers": "4.2.0",
     "@storybook/addon-a11y": "8.6.14",
     "@storybook/addon-essentials": "8.6.14",
@@ -522,7 +522,7 @@
     "@utils/ts-config-types": "1.0.4",
     "clsx": "2.1.1",
     "fast-glob": "3.3.3",
-    "intlayer": "9.0.0-canary.1",
+    "intlayer": "9.0.0-canary.2",
     "rimraf": "6.1.3",
     "shiki": "4.2.0",
     "storybook": "8.6.17",
@@ -530,26 +530,26 @@
     "tsdown": "0.21.10",
     "typescript": "6.0.3",
     "vite": "8.0.16",
-    "vite-intlayer": "9.0.0-canary.1",
+    "vite-intlayer": "9.0.0-canary.2",
     "vite-plugin-dts": "5.0.2",
     "vitest": "4.1.9"
   },
   "peerDependencies": {
     "@better-fetch/fetch": "1.3.1",
     "@hookform/resolvers": "5.4.0",
-    "@intlayer/backend": "9.0.0-canary.1",
+    "@intlayer/backend": "9.0.0-canary.2",
     "@monaco-editor/react": "4.7.0",
     "@shikijs/transformers": "4.2.0",
     "@tanstack/react-query": "5.101.0",
     "@tanstack/react-query-devtools": "5.101.0",
     "framer-motion": "12.40.0",
     "fuse.js": "7.4.2",
-    "intlayer": "9.0.0-canary.1",
+    "intlayer": "9.0.0-canary.2",
     "lucide-react": "1.20.0",
     "react": ">=16.0.0",
     "react-dom": ">=16.0.0",
     "react-hook-form": "7.79.0",
-    "react-intlayer": "9.0.0-canary.1",
+    "react-intlayer": "9.0.0-canary.2",
     "shiki": "4.2.0",
     "tailwindcss": "4.3.1"
   },