@intlayer/design-system 9.5.1 → 9.5.2

package/dist/esm/components/Form/elements/OTPElement.mjs

@@ -1,7 +1,7 @@
 'use client';
 
-import { useItemSelector } from "../../../hooks/useItemSelector.mjs";
 import { InputIndicator, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "../../Input/OTPInput.mjs";
+import { useItemSelector } from "../../../hooks/useItemSelector.mjs";
 import { FormField, useFormField } from "../FormField.mjs";
 import { FormItemLayout } from "../layout/FormItemLayout.mjs";
 import { useEffect, useRef } from "react";

package/dist/esm/components/LocaleSwitcherContentDropDown/LocaleSwitcherContent.mjs

@@ -1,11 +1,11 @@
 'use client';
 
-import { usePersistedStore } from "../../hooks/usePersistedStore.mjs";
 import { Button } from "../Button/Button.mjs";
 import { Container } from "../Container/index.mjs";
 import { DropDown } from "../DropDown/index.mjs";
 import { Input } from "../Input/Input.mjs";
 import { SwitchSelector } from "../SwitchSelector/SwitchSelector.mjs";
+import { usePersistedStore } from "../../hooks/usePersistedStore.mjs";
 import { useLocaleSwitcherContent } from "./LocaleSwitcherContentContext.mjs";
 import { useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

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

@@ -5,16 +5,58 @@ import { Button } from "../Button/Button.mjs";
 import { Link } from "../Link/Link.mjs";
 import { Container } from "../Container/index.mjs";
 import { Modal } from "../Modal/Modal.mjs";
+import { getYoutubeEmbedUrl, getYoutubeVideoId, getYoutubeWatchUrl } from "./youtubeUrl.mjs";
 import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { MoveDiagonal, Play } from "lucide-react";
+import { MoveDiagonal } from "lucide-react";
 
 //#region src/components/MarkDownRender/MarkDownIframe.tsx
-function embedLinkMeta(src) {
+/**
+* The features the YouTube player asks for, as shipped by YouTube's own embed code.
+*/
+const YOUTUBE_PLAYER_ALLOW = "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share";
+/**
+* Turns whatever the markdown handed over into what the frame is rendered with.
+*
+* A YouTube address, in any of its forms, becomes the player embed carrying
+* the attributes YouTube's own embed code ships with. Query parameters are
+* dropped on purpose: docs written for one origin (`origin=…`) break the
+* player on every other one.
+*
+* `referrerPolicy` is the attribute that matters: the player refuses to start
+* ("Video player configuration error", error 153) unless the request carries
+* a referrer, and a page served with `Referrer-Policy: same-origin` sends none
+* to a cross-origin frame. The attribute overrides the page policy for this
+* frame only.
+*/
+const resolveFrame = (src, frameProps) => {
+	const youtubeVideoId = getYoutubeVideoId(src);
+	if (!youtubeVideoId) return {
+		src,
+		frameProps,
+		isYoutubeVideo: false
+	};
+	return {
+		isYoutubeVideo: true,
+		src: getYoutubeEmbedUrl(youtubeVideoId),
+		frameProps: {
+			...frameProps,
+			allow: YOUTUBE_PLAYER_ALLOW,
+			allowFullScreen: true,
+			referrerPolicy: "strict-origin-when-cross-origin"
+		}
+	};
+};
+const getEmbedLinkMeta = (src) => {
 	if (!src) return {
 		href: "",
 		label: ""
 	};
+	const youtubeVideoId = getYoutubeVideoId(src);
+	if (youtubeVideoId) return {
+		href: getYoutubeWatchUrl(youtubeVideoId),
+		label: "youtube.com"
+	};
 	if (/^https?:\/\//i.test(src)) try {
 		const url = new URL(src);
 		return {
@@ -31,21 +73,6 @@ function embedLinkMeta(src) {
 		href: src,
 		label: src
 	};
-}
-/**
-* Reads the video id out of a YouTube embed address.
-*
-* @returns The video id, or `null` when the address is not a YouTube embed.
-*/
-const getYoutubeVideoId = (src) => {
-	if (!src || !/^https?:\/\//i.test(src)) return null;
-	try {
-		const url = new URL(src);
-		if (!/(^|\.)youtube(-nocookie)?\.com$/.test(url.hostname)) return null;
-		return url.pathname.replace(/^\/embed\//, "").split("/")[0] || null;
-	} catch {
-		return null;
-	}
 };
 /**
 * Tracks whether an element has come close enough to the viewport to be worth
@@ -85,63 +112,28 @@ const useHasBecomeVisible = () => {
 	};
 };
 /**
-* The embed itself: a poster for YouTube, deferred loading for anything else.
-*
-* A YouTube player pulls well over a megabyte of script before it can show a
-* single frame. Standing in for it with its own thumbnail until the reader
-* presses play keeps that cost on the readers who actually watch the video.
+* The embed itself, mounted once it comes close to the viewport.
 */
 const EmbeddedFrame = ({ src, title, className, frameProps }) => {
-	const [isPlayRequested, setIsPlayRequested] = useState(false);
 	const { elementRef, hasBecomeVisible } = useHasBecomeVisible();
-	const youtubeVideoId = getYoutubeVideoId(src);
-	if (youtubeVideoId && !isPlayRequested) return /* @__PURE__ */ jsxs("button", {
-		type: "button",
-		"aria-label": title ?? "Play video",
-		onClick: () => setIsPlayRequested(true),
-		className: cn("group relative block cursor-pointer border-0 bg-card p-0", className),
-		children: [/* @__PURE__ */ jsxs("picture", { children: [/* @__PURE__ */ jsx("source", {
-			srcSet: `https://i.ytimg.com/vi_webp/${youtubeVideoId}/hqdefault.webp`,
-			type: "image/webp"
-		}), /* @__PURE__ */ jsx("img", {
-			src: `https://i.ytimg.com/vi/${youtubeVideoId}/hqdefault.jpg`,
-			alt: "",
-			width: 480,
-			height: 360,
-			fetchPriority: "high",
-			decoding: "async",
-			className: "size-full object-cover"
-		})] }), /* @__PURE__ */ jsx("span", {
-			className: "absolute inset-0 flex items-center justify-center",
-			children: /* @__PURE__ */ jsx("span", {
-				className: "flex size-14 items-center justify-center rounded-full bg-text/70 text-text-opposite transition-transform group-hover:scale-110",
-				children: /* @__PURE__ */ jsx(Play, { className: "size-6 translate-x-0.5 fill-current" })
-			})
-		})]
-	});
-	if (!hasBecomeVisible && !isPlayRequested) return /* @__PURE__ */ jsx("div", {
+	if (!hasBecomeVisible) return /* @__PURE__ */ jsx("div", {
 		ref: elementRef,
 		"aria-hidden": true,
 		className
 	});
-	const frameSrc = (() => {
-		if (!isPlayRequested || !youtubeVideoId || !src) return src;
-		const playbackSrc = new URL(src);
-		playbackSrc.searchParams.set("autoplay", "1");
-		return playbackSrc.href;
-	})();
 	return /* @__PURE__ */ jsx("iframe", {
 		...frameProps,
-		src: frameSrc,
+		src,
 		title,
 		loading: "lazy",
 		className
 	});
 };
 const MarkDownIframe = (props) => {
-	const { src, className, title, ...rest } = props;
+	const { src: rawSrc, className, title, ...rest } = props;
 	const [isModalOpen, setIsModalOpen] = useState(false);
-	const { href, label } = embedLinkMeta(src);
+	const { src, frameProps, isYoutubeVideo } = resolveFrame(rawSrc, rest);
+	const { href, label } = getEmbedLinkMeta(rawSrc);
 	return /* @__PURE__ */ jsxs(Container, {
 		roundedSize: "2xl",
 		border: true,
@@ -152,8 +144,8 @@ const MarkDownIframe = (props) => {
 			/* @__PURE__ */ jsx(EmbeddedFrame, {
 				src,
 				title,
-				frameProps: rest,
-				className: cn("block max-h-[80vh] min-h-[12rem] w-full border-0", className)
+				frameProps,
+				className: cn("block max-h-[80vh] min-h-[12rem] w-full border-0", isYoutubeVideo && "aspect-video", className)
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex items-center justify-between gap-3 px-3 py-1",
@@ -190,7 +182,7 @@ const MarkDownIframe = (props) => {
 					className: "overflow-hidden p-0",
 					gap: "none",
 					children: /* @__PURE__ */ jsx("iframe", {
-						...rest,
+						...frameProps,
 						src,
 						title: title ?? "Embedded content",
 						allowFullScreen: true,

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

@@ -1 +1 @@
-{"version":3,"file":"MarkDownIframe.mjs","names":[],"sources":["../../../../src/components/MarkDownRender/MarkDownIframe.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '@components/Button';\nimport { Container } from '@components/Container';\nimport { Link } from '@components/Link';\nimport { Modal } from '@components/Modal';\nimport { cn } from '@utils/cn';\nimport { MoveDiagonal, Play } from 'lucide-react';\nimport {\n  type ComponentProps,\n  type FC,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\nfunction embedLinkMeta(src: string | undefined): {\n  href: string;\n  label: string;\n} {\n  if (!src) return { href: '', label: '' };\n  if (/^https?:\\/\\//i.test(src)) {\n    try {\n      const url = new URL(src);\n      return { href: url.href, label: url.host };\n    } catch {\n      return { href: src, label: src };\n    }\n  }\n  return { href: src, label: src };\n}\n\n/**\n * Reads the video id out of a YouTube embed address.\n *\n * @returns The video id, or `null` when the address is not a YouTube embed.\n */\nconst getYoutubeVideoId = (src: string | undefined): string | null => {\n  if (!src || !/^https?:\\/\\//i.test(src)) return null;\n\n  try {\n    const url = new URL(src);\n    if (!/(^|\\.)youtube(-nocookie)?\\.com$/.test(url.hostname)) return null;\n\n    const videoId = url.pathname.replace(/^\\/embed\\//, '').split('/')[0];\n\n    return videoId || null;\n  } catch {\n    return null;\n  }\n};\n\n/**\n * Tracks whether an element has come close enough to the viewport to be worth\n * loading.\n *\n * `loading=\"lazy\"` is not enough for embeds inside tabs or carousels: the\n * browser only defers frames that are far down the page, so a frame parked\n * off-screen by a transform — an inactive tab panel — still loads immediately.\n * A live-app embed costs upwards of a megabyte and seconds of main thread,\n * which is the whole page's performance budget spent on something nobody is\n * looking at.\n *\n * @returns A ref to attach to the placeholder, and whether it became visible.\n */\nconst useHasBecomeVisible = <ElementType extends HTMLElement>() => {\n  const elementRef = useRef<ElementType>(null);\n  const [hasBecomeVisible, setHasBecomeVisible] = useState(false);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element || hasBecomeVisible) return;\n\n    if (typeof IntersectionObserver === 'undefined') {\n      setHasBecomeVisible(true);\n      return;\n    }\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        if (entries.some((entry) => entry.isIntersecting)) {\n          setHasBecomeVisible(true);\n          observer.disconnect();\n        }\n      },\n      { rootMargin: '200px' }\n    );\n\n    observer.observe(element);\n\n    return () => observer.disconnect();\n  }, [hasBecomeVisible]);\n\n  return { elementRef, hasBecomeVisible };\n};\n\ntype EmbeddedFrameProps = {\n  src: string | undefined;\n  title: string | undefined;\n  className: string;\n  frameProps: Omit<ComponentProps<'iframe'>, 'src' | 'title' | 'className'>;\n};\n\n/**\n * The embed itself: a poster for YouTube, deferred loading for anything else.\n *\n * A YouTube player pulls well over a megabyte of script before it can show a\n * single frame. Standing in for it with its own thumbnail until the reader\n * presses play keeps that cost on the readers who actually watch the video.\n */\nconst EmbeddedFrame: FC<EmbeddedFrameProps> = ({\n  src,\n  title,\n  className,\n  frameProps,\n}) => {\n  const [isPlayRequested, setIsPlayRequested] = useState(false);\n  const { elementRef, hasBecomeVisible } =\n    useHasBecomeVisible<HTMLDivElement>();\n  const youtubeVideoId = getYoutubeVideoId(src);\n\n  if (youtubeVideoId && !isPlayRequested) {\n    return (\n      <button\n        type=\"button\"\n        aria-label={title ?? 'Play video'}\n        onClick={() => setIsPlayRequested(true)}\n        className={cn(\n          'group relative block cursor-pointer border-0 bg-card p-0',\n          className\n        )}\n      >\n        {/*\n         * The poster stands in for the player, so on a page that opens with a\n         * video it is the largest element painted — deferring it would defer\n         * the page's LCP. It is the one image here worth fetching eagerly.\n         */}\n        <picture>\n          {/*\n           * YouTube serves the same poster as WebP under `vi_webp`, at roughly\n           * a third of the JPEG's weight. The `img` below stays as the\n           * fallback for the browsers that cannot decode it.\n           */}\n          <source\n            srcSet={`https://i.ytimg.com/vi_webp/${youtubeVideoId}/hqdefault.webp`}\n            type=\"image/webp\"\n          />\n          <img\n            src={`https://i.ytimg.com/vi/${youtubeVideoId}/hqdefault.jpg`}\n            alt=\"\"\n            width={480}\n            height={360}\n            fetchPriority=\"high\"\n            decoding=\"async\"\n            className=\"size-full object-cover\"\n          />\n        </picture>\n        <span className=\"absolute inset-0 flex items-center justify-center\">\n          <span className=\"flex size-14 items-center justify-center rounded-full bg-text/70 text-text-opposite transition-transform group-hover:scale-110\">\n            <Play className=\"size-6 translate-x-0.5 fill-current\" />\n          </span>\n        </span>\n      </button>\n    );\n  }\n\n  if (!hasBecomeVisible && !isPlayRequested) {\n    // Same box as the frame it stands in for, so nothing shifts once it loads.\n    return <div ref={elementRef} aria-hidden className={className} />;\n  }\n\n  const frameSrc = (() => {\n    if (!isPlayRequested || !youtubeVideoId || !src) return src;\n\n    const playbackSrc = new URL(src);\n    playbackSrc.searchParams.set('autoplay', '1');\n\n    return playbackSrc.href;\n  })();\n\n  return (\n    <iframe\n      {...frameProps}\n      src={frameSrc}\n      title={title}\n      loading=\"lazy\"\n      className={className}\n    />\n  );\n};\n\nexport const MarkDownIframe: FC<ComponentProps<'iframe'>> = (props) => {\n  const { src, className, title, ...rest } = props;\n  const [isModalOpen, setIsModalOpen] = useState(false);\n  const { href, label } = embedLinkMeta(src);\n\n  return (\n    <Container\n      roundedSize=\"2xl\"\n      border\n      borderColor=\"neutral\"\n      className=\"overflow-hidden p-0\"\n      gap=\"none\"\n    >\n      <EmbeddedFrame\n        src={src}\n        title={title}\n        frameProps={rest}\n        className={cn(\n          'block max-h-[80vh] min-h-[12rem] w-full border-0',\n          className\n        )}\n      />\n      <div className=\"flex items-center justify-between gap-3 px-3 py-1\">\n        {href ? (\n          <Link\n            href={href}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            label=\"\"\n            color=\"neutral\"\n            className=\"inline-flex min-w-0 max-w-[calc(100%-3rem)] items-center gap-2 text-muted-foreground text-xs underline-offset-2 hover:text-foreground hover:underline\"\n          >\n            {label}\n          </Link>\n        ) : (\n          <span className=\"text-neutral text-sm\">Embedded frame</span>\n        )}\n        <Button\n          variant=\"hoverable\"\n          size=\"icon-md\"\n          onClick={() => setIsModalOpen(true)}\n          label=\"Open embedded page in fullscreen\"\n          Icon={MoveDiagonal}\n        />\n      </div>\n\n      <Modal\n        isOpen={isModalOpen}\n        onClose={() => setIsModalOpen(false)}\n        size=\"unset\"\n        hasCloseButton\n        isScrollable\n        padding=\"sm\"\n      >\n        {isModalOpen && src ? (\n          <Container\n            roundedSize=\"2xl\"\n            border\n            borderColor=\"neutral\"\n            className=\"overflow-hidden p-0\"\n            gap=\"none\"\n          >\n            <iframe\n              {...rest}\n              src={src}\n              title={title ?? 'Embedded content'}\n              allowFullScreen\n              className=\"block min-h-[82vh] w-full border-0\"\n            />\n          </Container>\n        ) : null}\n      </Modal>\n    </Container>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"MarkDownIframe.mjs","names":[],"sources":["../../../../src/components/MarkDownRender/MarkDownIframe.tsx"],"sourcesContent":["'use client';\n\nimport { Button } from '@components/Button';\nimport { Container } from '@components/Container';\nimport { Link } from '@components/Link';\nimport { Modal } from '@components/Modal';\nimport { cn } from '@utils/cn';\nimport { MoveDiagonal } from 'lucide-react';\nimport {\n  type ComponentProps,\n  type FC,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport {\n  getYoutubeEmbedUrl,\n  getYoutubeVideoId,\n  getYoutubeWatchUrl,\n} from './youtubeUrl';\n\ntype FrameProps = Omit<ComponentProps<'iframe'>, 'src' | 'title' | 'className'>;\n\n/**\n * The features the YouTube player asks for, as shipped by YouTube's own embed code.\n */\nconst YOUTUBE_PLAYER_ALLOW =\n  'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share';\n\ntype ResolvedFrame = {\n  src: string | undefined;\n  frameProps: FrameProps;\n  isYoutubeVideo: boolean;\n};\n\n/**\n * Turns whatever the markdown handed over into what the frame is rendered with.\n *\n * A YouTube address, in any of its forms, becomes the player embed carrying\n * the attributes YouTube's own embed code ships with. Query parameters are\n * dropped on purpose: docs written for one origin (`origin=…`) break the\n * player on every other one.\n *\n * `referrerPolicy` is the attribute that matters: the player refuses to start\n * (\"Video player configuration error\", error 153) unless the request carries\n * a referrer, and a page served with `Referrer-Policy: same-origin` sends none\n * to a cross-origin frame. The attribute overrides the page policy for this\n * frame only.\n */\nconst resolveFrame = (\n  src: string | undefined,\n  frameProps: FrameProps\n): ResolvedFrame => {\n  const youtubeVideoId = getYoutubeVideoId(src);\n\n  if (!youtubeVideoId) return { src, frameProps, isYoutubeVideo: false };\n\n  return {\n    isYoutubeVideo: true,\n    src: getYoutubeEmbedUrl(youtubeVideoId),\n    frameProps: {\n      ...frameProps,\n      allow: YOUTUBE_PLAYER_ALLOW,\n      allowFullScreen: true,\n      referrerPolicy: 'strict-origin-when-cross-origin',\n    },\n  };\n};\n\nconst getEmbedLinkMeta = (\n  src: string | undefined\n): { href: string; label: string } => {\n  if (!src) return { href: '', label: '' };\n\n  const youtubeVideoId = getYoutubeVideoId(src);\n  if (youtubeVideoId) {\n    return {\n      href: getYoutubeWatchUrl(youtubeVideoId),\n      label: 'youtube.com',\n    };\n  }\n\n  if (/^https?:\\/\\//i.test(src)) {\n    try {\n      const url = new URL(src);\n      return { href: url.href, label: url.host };\n    } catch {\n      return { href: src, label: src };\n    }\n  }\n\n  return { href: src, label: src };\n};\n\n/**\n * Tracks whether an element has come close enough to the viewport to be worth\n * loading.\n *\n * `loading=\"lazy\"` is not enough for embeds inside tabs or carousels: the\n * browser only defers frames that are far down the page, so a frame parked\n * off-screen by a transform — an inactive tab panel — still loads immediately.\n * A live-app embed costs upwards of a megabyte and seconds of main thread,\n * which is the whole page's performance budget spent on something nobody is\n * looking at.\n *\n * @returns A ref to attach to the placeholder, and whether it became visible.\n */\nconst useHasBecomeVisible = <ElementType extends HTMLElement>() => {\n  const elementRef = useRef<ElementType>(null);\n  const [hasBecomeVisible, setHasBecomeVisible] = useState(false);\n\n  useEffect(() => {\n    const element = elementRef.current;\n    if (!element || hasBecomeVisible) return;\n\n    if (typeof IntersectionObserver === 'undefined') {\n      setHasBecomeVisible(true);\n      return;\n    }\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        if (entries.some((entry) => entry.isIntersecting)) {\n          setHasBecomeVisible(true);\n          observer.disconnect();\n        }\n      },\n      { rootMargin: '200px' }\n    );\n\n    observer.observe(element);\n\n    return () => observer.disconnect();\n  }, [hasBecomeVisible]);\n\n  return { elementRef, hasBecomeVisible };\n};\n\ntype EmbeddedFrameProps = Pick<ResolvedFrame, 'src' | 'frameProps'> & {\n  title: string | undefined;\n  className: string;\n};\n\n/**\n * The embed itself, mounted once it comes close to the viewport.\n */\nconst EmbeddedFrame: FC<EmbeddedFrameProps> = ({\n  src,\n  title,\n  className,\n  frameProps,\n}) => {\n  const { elementRef, hasBecomeVisible } =\n    useHasBecomeVisible<HTMLDivElement>();\n\n  if (!hasBecomeVisible) {\n    // Same box as the frame it stands in for, so nothing shifts once it loads.\n    return <div ref={elementRef} aria-hidden className={className} />;\n  }\n\n  return (\n    <iframe\n      {...frameProps}\n      src={src}\n      title={title}\n      loading=\"lazy\"\n      className={className}\n    />\n  );\n};\n\nexport const MarkDownIframe: FC<ComponentProps<'iframe'>> = (props) => {\n  const { src: rawSrc, className, title, ...rest } = props;\n  const [isModalOpen, setIsModalOpen] = useState(false);\n  const { src, frameProps, isYoutubeVideo } = resolveFrame(rawSrc, rest);\n  const { href, label } = getEmbedLinkMeta(rawSrc);\n\n  return (\n    <Container\n      roundedSize=\"2xl\"\n      border\n      borderColor=\"neutral\"\n      className=\"overflow-hidden p-0\"\n      gap=\"none\"\n    >\n      <EmbeddedFrame\n        src={src}\n        title={title}\n        frameProps={frameProps}\n        className={cn(\n          'block max-h-[80vh] min-h-[12rem] w-full border-0',\n          isYoutubeVideo && 'aspect-video',\n          className\n        )}\n      />\n      <div className=\"flex items-center justify-between gap-3 px-3 py-1\">\n        {href ? (\n          <Link\n            href={href}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            label=\"\"\n            color=\"neutral\"\n            className=\"inline-flex min-w-0 max-w-[calc(100%-3rem)] items-center gap-2 text-muted-foreground text-xs underline-offset-2 hover:text-foreground hover:underline\"\n          >\n            {label}\n          </Link>\n        ) : (\n          <span className=\"text-neutral text-sm\">Embedded frame</span>\n        )}\n        <Button\n          variant=\"hoverable\"\n          size=\"icon-md\"\n          onClick={() => setIsModalOpen(true)}\n          label=\"Open embedded page in fullscreen\"\n          Icon={MoveDiagonal}\n        />\n      </div>\n\n      <Modal\n        isOpen={isModalOpen}\n        onClose={() => setIsModalOpen(false)}\n        size=\"unset\"\n        hasCloseButton\n        isScrollable\n        padding=\"sm\"\n      >\n        {isModalOpen && src ? (\n          <Container\n            roundedSize=\"2xl\"\n            border\n            borderColor=\"neutral\"\n            className=\"overflow-hidden p-0\"\n            gap=\"none\"\n          >\n            <iframe\n              {...frameProps}\n              src={src}\n              title={title ?? 'Embedded content'}\n              allowFullScreen\n              className=\"block min-h-[82vh] w-full border-0\"\n            />\n          </Container>\n        ) : null}\n      </Modal>\n    </Container>\n  );\n};\n"],"mappings":"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"}

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

@@ -1,4 +1,5 @@
+import { getYoutubeEmbedUrl, getYoutubeVideoId, getYoutubeWatchUrl } from "./youtubeUrl.mjs";
 import { MarkDownIframe } from "./MarkDownIframe.mjs";
 import { MarkdownRenderer, baseMarkdownComponents, getIntlayerMarkdownOptions } from "./MarkDownRender.mjs";
 
-export { MarkDownIframe, MarkdownRenderer, baseMarkdownComponents, getIntlayerMarkdownOptions };
+export { MarkDownIframe, MarkdownRenderer, baseMarkdownComponents, getIntlayerMarkdownOptions, getYoutubeEmbedUrl, getYoutubeVideoId, getYoutubeWatchUrl };

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

@@ -0,0 +1,22 @@
+//#region src/components/MarkDownRender/youtubeUrl.ts
+/**
+* Reads the video id out of a YouTube address (embed, watch, youtu.be, shorts, etc.).
+*
+* @returns The video id, or `null` when the address is not a YouTube URL.
+*/
+const getYoutubeVideoId = (src) => {
+	if (!src) return null;
+	return src.match(/(?:youtu\.be\/|youtube(?:-nocookie)?\.com\/(?:embed\/|v\/|watch\?v=|shorts\/))([\w-]{11})/i)?.[1] ?? null;
+};
+/**
+* The address the YouTube player is loaded from for a given video.
+*/
+const getYoutubeEmbedUrl = (videoId) => `https://www.youtube.com/embed/${videoId}`;
+/**
+* The address of the video on youtube.com itself.
+*/
+const getYoutubeWatchUrl = (videoId) => `https://www.youtube.com/watch?v=${videoId}`;
+
+//#endregion
+export { getYoutubeEmbedUrl, getYoutubeVideoId, getYoutubeWatchUrl };
+//# sourceMappingURL=youtubeUrl.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"youtubeUrl.mjs","names":[],"sources":["../../../../src/components/MarkDownRender/youtubeUrl.ts"],"sourcesContent":["/**\n * Reads the video id out of a YouTube address (embed, watch, youtu.be, shorts, etc.).\n *\n * @returns The video id, or `null` when the address is not a YouTube URL.\n */\nexport const getYoutubeVideoId = (src: string | undefined): string | null => {\n  if (!src) return null;\n\n  const match = src.match(\n    /(?:youtu\\.be\\/|youtube(?:-nocookie)?\\.com\\/(?:embed\\/|v\\/|watch\\?v=|shorts\\/))([\\w-]{11})/i\n  );\n\n  return match?.[1] ?? null;\n};\n\n/**\n * The address the YouTube player is loaded from for a given video.\n */\nexport const getYoutubeEmbedUrl = (videoId: string): string =>\n  `https://www.youtube.com/embed/${videoId}`;\n\n/**\n * The address of the video on youtube.com itself.\n */\nexport const getYoutubeWatchUrl = (videoId: string): string =>\n  `https://www.youtube.com/watch?v=${videoId}`;\n"],"mappings":";;;;;;AAKA,MAAa,qBAAqB,QAA2C;CAC3E,IAAI,CAAC,KAAK,OAAO;CAMjB,OAJc,IAAI,MAChB,4FAGS,CAAC,GAAG,MAAM;AACvB;;;;AAKA,MAAa,sBAAsB,YACjC,iCAAiC;;;;AAKnC,MAAa,sBAAsB,YACjC,mCAAmC"}

package/dist/esm/components/Modal/Modal.mjs

@@ -1,10 +1,10 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
-import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
-import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { Button } from "../Button/Button.mjs";
 import { Container } from "../Container/index.mjs";
+import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
+import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { H3 } from "../Headers/index.mjs";
 import { useEffect } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/esm/components/Navbar/MobileNavbar.mjs

@@ -1,9 +1,9 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
+import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
 import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { useScrollDetection } from "../../hooks/useScrollDetection.mjs";
-import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
 import { Burger } from "./Burger.mjs";
 import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/esm/components/Pagination/Pagination.mjs

@@ -1,8 +1,8 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
-import { useItemSelector } from "../../hooks/useItemSelector.mjs";
 import { Button } from "../Button/Button.mjs";
+import { useItemSelector } from "../../hooks/useItemSelector.mjs";
 import { useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";

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 { useIsRightDrawerOpen, useRightDrawerActions } from "./useRightDrawer.mjs";

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

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

package/dist/esm/components/index.mjs

@@ -115,6 +115,7 @@ import { KeyboardScreenAdapter } from "./KeyboardScreenAdapter/index.mjs";
 import { LanguageBackground } from "./LanguageBackground/LanguageBackground.mjs";
 import { LanguageSection, LocalCardList } from "./LanguageBackground/LanguageSection.mjs";
 import { LocaleSwitcher } from "./LocaleSwitcherDropDown/LocaleSwitcher.mjs";
+import { getYoutubeEmbedUrl, getYoutubeVideoId, getYoutubeWatchUrl } from "./MarkDownRender/youtubeUrl.mjs";
 import { MarkDownIframe } from "./MarkDownRender/MarkDownIframe.mjs";
 import { Tab } from "./Tab/Tab.mjs";
 import { Table } from "./Table/Table.mjs";
@@ -142,4 +143,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, CodeHighlighted, CollapsibleTable, Command, CommandRoot, Container, ContentEditableTextArea, ContentEditor, 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, LocalCardList, LocaleSwitcher, LocaleSwitcherContent, LocaleSwitcherContentProvider, Logo, LogoTextOnly, LogoWithText, LogoWithTextBelow, MarkDownIframe, MarkdownEditor, MarkdownRenderer, MaxHeightSmoother, MaxWidthSmoother, MobileNavbar, MobileThemeSwitcher, Modal, MultiSelect, Navbar, NodeEditor, 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, shikiWrapperClassName, switchSelectorVariant, toast, toastVariants, traceKeys, useContentEditable, useCopyToClipboard, useForm, useFormField, useIsRightDrawerOpen, useLocaleSwitcherContent, usePasswordManagerBadge, usePopoverIds, usePrevious, useRightDrawer, useRightDrawerActions, useToast, useVersionSwitcher };
+export { Accordion, AutoCompleteTextarea, AutoSizedTextArea, Avatar, Badge, BitbucketLogo, Breadcrumb, Browser, Burger, Button, Carousel, Checkbox, ClickOutsideDiv, Code, CodeBlock, CodeDefault, CodeHighlighted, CollapsibleTable, Command, CommandRoot, Container, ContentEditableTextArea, ContentEditor, 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, LocalCardList, LocaleSwitcher, LocaleSwitcherContent, LocaleSwitcherContentProvider, Logo, LogoTextOnly, LogoWithText, LogoWithTextBelow, MarkDownIframe, MarkdownEditor, MarkdownRenderer, MaxHeightSmoother, MaxWidthSmoother, MobileNavbar, MobileThemeSwitcher, Modal, MultiSelect, Navbar, NodeEditor, 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, getYoutubeEmbedUrl, getYoutubeVideoId, getYoutubeWatchUrl, indicatorVariant, inputSlotVariants, inputVariants, isTextChildren, linkVariants, paginationVariants, radioVariants, reducer, shikiWrapperClassName, switchSelectorVariant, toast, toastVariants, traceKeys, useContentEditable, useCopyToClipboard, useForm, useFormField, useIsRightDrawerOpen, useLocaleSwitcherContent, usePasswordManagerBadge, usePopoverIds, usePrevious, useRightDrawer, useRightDrawerActions, useToast, useVersionSwitcher };

package/dist/esm/hooks/index.mjs

@@ -1,17 +1,17 @@
-import { useKeyboardDetector } from "./useKeyboardDetector.mjs";
-import { useGetElementOrWindow } from "./useGetElementOrWindow.mjs";
-import { useScrollY } from "./useScrollY.mjs";
+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 { useGetElementOrWindow } from "./useGetElementOrWindow.mjs";
 import { useHorizontalSwipe } from "./useHorizontalSwipe.mjs";
-import { useItemSelector } from "./useItemSelector.mjs";
-import { NO_HIGHLIGHTED_INDEX, useListKeyboardNavigation } from "./useListKeyboardNavigation.mjs";
-import { calculateIsMobile, checkIsIOS, checkIsIphoneOrSafariDevice, checkIsMac, checkIsMobileScreen, checkIsMobileUserAgent, getBreakpointFromSize, useDevice } from "./useDevice.mjs";
-import { useSearch } from "./useSearch.mjs";
 import { useIsMounted } from "./useIsMounted.mjs";
-import { useGetElementById } from "./useGetElementById.mjs";
+import { useKeyboardDetector } from "./useKeyboardDetector.mjs";
+import { NO_HIGHLIGHTED_INDEX, useListKeyboardNavigation } from "./useListKeyboardNavigation.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";
 import { useStickToBottom } from "./useStickToBottom.mjs";
 
 export { NO_HIGHLIGHTED_INDEX, calculateIsMobile, checkIsIOS, checkIsIphoneOrSafariDevice, checkIsMac, checkIsMobileScreen, checkIsMobileUserAgent, getBreakpointFromSize, useDevice, useGetElementById, useGetElementOrWindow, useHorizontalSwipe, useIsMounted, useItemSelector, useKeyboardDetector, useListKeyboardNavigation, usePersistedStore, useScreenWidth, useScrollBlockage, useScrollDetection, useScrollY, useSearch, useStickToBottom };

package/dist/types/components/MarkDownRender/MarkDownIframe.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MarkDownIframe.d.ts","names":[],"sources":["../../../../src/components/MarkDownRender/MarkDownIframe.tsx"],"mappings":";;qBA+La,gBAAgB,GAAG"}
+{"version":3,"file":"MarkDownIframe.d.ts","names":[],"sources":["../../../../src/components/MarkDownRender/MarkDownIframe.tsx"],"mappings":";;qBA2Ka,gBAAgB,GAAG"}

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

@@ -1,3 +1,4 @@
 import { MarkDownIframe } from "./MarkDownIframe.js";
+import { getYoutubeEmbedUrl, getYoutubeVideoId, getYoutubeWatchUrl } from "./youtubeUrl.js";
 import { MarkdownRenderer, ParsedMarkdown, baseMarkdownComponents, getIntlayerMarkdownOptions } from "./MarkDownRender.js";
-export { MarkDownIframe, MarkdownRenderer, type ParsedMarkdown, baseMarkdownComponents, getIntlayerMarkdownOptions };
+export { MarkDownIframe, MarkdownRenderer, type ParsedMarkdown, baseMarkdownComponents, getIntlayerMarkdownOptions, getYoutubeEmbedUrl, getYoutubeVideoId, getYoutubeWatchUrl };

package/dist/types/components/MarkDownRender/youtubeUrl.d.ts

@@ -0,0 +1,17 @@
+//#region src/components/MarkDownRender/youtubeUrl.d.ts
+/**
+ * Reads the video id out of a YouTube address (embed, watch, youtu.be, shorts, etc.).
+ *
+ * @returns The video id, or `null` when the address is not a YouTube URL.
+ */
+export declare const getYoutubeVideoId: (src: string | undefined) => string | null;
+/**
+ * The address the YouTube player is loaded from for a given video.
+ */
+export declare const getYoutubeEmbedUrl: (videoId: string) => string;
+/**
+ * The address of the video on youtube.com itself.
+ */
+export declare const getYoutubeWatchUrl: (videoId: string) => string;
+//#endregion
+//# sourceMappingURL=youtubeUrl.d.ts.map

package/dist/types/components/MarkDownRender/youtubeUrl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"youtubeUrl.d.ts","names":[],"sources":["../../../../src/components/MarkDownRender/youtubeUrl.ts"],"mappings":";;;;;;qBAKa,oBAAiB;;;;qBAajB,qBAAkB;;;;qBAMlB,qBAAkB"}

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

@@ -114,6 +114,7 @@ import { LogoWithText } from "./Logo/LogoWithText.js";
 import { LogoWithTextBelow } from "./Logo/LogoWithTextBelow.js";
 import "./Logo/index.js";
 import { MarkDownIframe } from "./MarkDownRender/MarkDownIframe.js";
+import { getYoutubeEmbedUrl, getYoutubeVideoId, getYoutubeWatchUrl } from "./MarkDownRender/youtubeUrl.js";
 import "./MarkDownRender/index.js";
 import { CreateEditorUploadFnOptions, UploadImageFn, createEditorUploadFn } from "./MarkdownEditor/imageUpload.js";
 import { MarkdownEditor, MarkdownEditorProps } from "./MarkdownEditor/MarkdownEditor.js";
@@ -183,4 +184,4 @@ import { reducer, toast, useToast } from "./Toaster/useToast.js";
 import "./Toaster/index.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, CodeHighlighted, type CodeLanguage, CollapsibleTable, CollapsibleTableProps, Command, CommandRoot, Container, ContainerBackground, ContainerBorderColor, ContainerGap, ContainerPadding, ContainerProps, ContainerRoundedSize, ContainerSeparator, ContainerTransparency, ContentEditableTextArea, ContentEditableTextAreaHandle, ContentEditableTextAreaProps, ContentEditor, ContentEditorInput, ContentEditorInputProps, ContentEditorProps, ContentEditorTextArea, ContentEditorTextAreaProps, ContentSelector, CopyButton, CopyToClipboard, CopyToClipboardProps, type 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, LocalCardList, LocaleSwitcher, LocaleSwitcherContent, LocaleSwitcherContentProps, LocaleSwitcherContentProvider, LocaleSwitcherProps, Logo, LogoTextOnly, LogoWithText, LogoWithTextBelow, MarkDownIframe, MarkdownEditor, type MarkdownEditorProps, MarkdownRenderer, MaxHeightSmoother, MaxWidthSmoother, MobileNavbar, MobileThemeSwitcher, Modal, ModalSize, Modes, MultiSelect, Navbar, NodeEditor, NodeEditorProps, NumberItemsSelector, NumberItemsSelectorProps, OTPInput, OTPInputContext, OTPInputProps, Pagination, PaginationProps, PaginationSize, PaginationVariant, PanelProps, type 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, type 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, type 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, shikiWrapperClassName, switchSelectorVariant, toast, toastVariants, traceKeys, useContentEditable, useCopyToClipboard, useForm, useFormField, useIsRightDrawerOpen, useLocaleSwitcherContent, usePasswordManagerBadge, usePopoverIds, usePrevious, useRightDrawer, useRightDrawerActions, 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, CodeHighlighted, type CodeLanguage, CollapsibleTable, CollapsibleTableProps, Command, CommandRoot, Container, ContainerBackground, ContainerBorderColor, ContainerGap, ContainerPadding, ContainerProps, ContainerRoundedSize, ContainerSeparator, ContainerTransparency, ContentEditableTextArea, ContentEditableTextAreaHandle, ContentEditableTextAreaProps, ContentEditor, ContentEditorInput, ContentEditorInputProps, ContentEditorProps, ContentEditorTextArea, ContentEditorTextAreaProps, ContentSelector, CopyButton, CopyToClipboard, CopyToClipboardProps, type 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, LocalCardList, LocaleSwitcher, LocaleSwitcherContent, LocaleSwitcherContentProps, LocaleSwitcherContentProvider, LocaleSwitcherProps, Logo, LogoTextOnly, LogoWithText, LogoWithTextBelow, MarkDownIframe, MarkdownEditor, type MarkdownEditorProps, MarkdownRenderer, MaxHeightSmoother, MaxWidthSmoother, MobileNavbar, MobileThemeSwitcher, Modal, ModalSize, Modes, MultiSelect, Navbar, NodeEditor, NodeEditorProps, NumberItemsSelector, NumberItemsSelectorProps, OTPInput, OTPInputContext, OTPInputProps, Pagination, PaginationProps, PaginationSize, PaginationVariant, PanelProps, type 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, type 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, type UploadImageFn, VersionSwitcher, VersionSwitcherProps, VersionSwitcherProvider, VerticalSwitchSelector, VerticalSwitchSelectorProps, WithResizer, XLogo, YoutubeLogo, badgeVariants, baseMarkdownComponents, buttonVariants, checkIsExternalLink, checkboxVariants, choiceVariant, containerVariants, createEditorUploadFn, defaultChoices, drawerManager, getCapitals, getIntlayerHTMLOptions, getIntlayerMarkdownOptions, getYoutubeEmbedUrl, getYoutubeVideoId, getYoutubeWatchUrl, indicatorVariant, inputSlotVariants, inputVariants, isTextChildren, linkVariants, paginationVariants, radioVariants, reducer, shikiWrapperClassName, switchSelectorVariant, toast, toastVariants, traceKeys, useContentEditable, useCopyToClipboard, useForm, useFormField, useIsRightDrawerOpen, useLocaleSwitcherContent, usePasswordManagerBadge, usePopoverIds, usePrevious, useRightDrawer, useRightDrawerActions, useToast, useVersionSwitcher };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intlayer/design-system",
-  "version": "9.5.1",
+  "version": "9.5.2",
   "private": false,
   "description": "Intlayer design system, including UI components used in the Intlayer editor, website, and visual editor/CMS.",
   "keywords": [
@@ -455,15 +455,15 @@
     "typecheck_": "tsc --noEmit --project tsconfig.types.json"
   },
   "dependencies": {
-    "@better-auth/passkey": "1.7.3",
-    "@better-auth/sso": "1.7.3",
-    "@intlayer/api": "9.5.1",
-    "@intlayer/config": "9.5.1",
-    "@intlayer/core": "9.5.1",
-    "@intlayer/dictionaries-entry": "9.5.1",
-    "@intlayer/editor-react": "9.5.1",
-    "@intlayer/engine": "9.5.1",
-    "@intlayer/types": "9.5.1",
+    "@better-auth/passkey": "1.7.4",
+    "@better-auth/sso": "1.7.4",
+    "@intlayer/api": "9.5.2",
+    "@intlayer/config": "9.5.2",
+    "@intlayer/core": "9.5.2",
+    "@intlayer/dictionaries-entry": "9.5.2",
+    "@intlayer/editor-react": "9.5.2",
+    "@intlayer/engine": "9.5.2",
+    "@intlayer/types": "9.5.2",
     "@radix-ui/react-dialog": "1.1.23",
     "@radix-ui/react-select": "2.3.7",
     "@radix-ui/react-slot": "1.3.3",
@@ -471,7 +471,7 @@
     "@tailwindcss/aspect-ratio": "0.4.2",
     "@tanstack/query-async-storage-persister": "5.102.8",
     "@tanstack/react-query-persist-client": "5.102.8",
-    "@tanstack/react-virtual": "3.14.11",
+    "@tanstack/react-virtual": "3.14.12",
     "@tiptap/core": "3.31.3",
     "@tiptap/extension-character-count": "3.31.3",
     "@tiptap/extension-code-block": "3.31.3",
@@ -490,22 +490,22 @@
     "@tiptap/react": "3.31.3",
     "@tiptap/starter-kit": "3.31.3",
     "@tiptap/suggestion": "3.31.3",
-    "better-auth": "1.7.3",
+    "better-auth": "1.7.4",
     "class-variance-authority": "0.7.1",
     "cmdk": "1.1.1",
     "cnfast": "0.2.0",
     "defu": "6.1.7",
     "dompurify": "3.4.15",
     "isomorphic-dompurify": "4.1.0",
-    "react-intlayer": "9.5.1",
+    "react-intlayer": "9.5.2",
     "rollup-preserve-directives": "1.1.3",
     "tiptap-extension-global-drag-handle": "^0.1.18",
     "tiptap-markdown": "^0.9.0",
     "tunnel-rat": "^0.1.2",
-    "zod": "4.5.4"
+    "zod": "4.6.2"
   },
   "devDependencies": {
-    "@intlayer/backend": "9.5.1",
+    "@intlayer/backend": "9.5.2",
     "@shikijs/core": "4.4.3",
     "@shikijs/engine-oniguruma": "4.4.3",
     "@shikijs/transformers": "4.4.3",
@@ -526,27 +526,27 @@
     "@testing-library/user-event": "14.6.7",
     "@types/dompurify": "3.2.0",
     "@types/espree": "11.1.0",
-    "@types/node": "26.5.0",
-    "@types/react": "19.2.18",
-    "@types/react-dom": "19.2.7",
+    "@types/node": "^22",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
     "@utils/ts-config": "1.0.4",
     "@utils/ts-config-types": "1.0.4",
     "fast-glob": "3.3.3",
-    "intlayer": "9.5.1",
+    "intlayer": "9.5.2",
     "rimraf": "6.1.3",
     "shiki": "4.4.3",
     "storybook": "10.6.0",
     "tsdown": "0.23.0",
     "typescript": "7.0.2",
-    "vite": "8.2.2",
-    "vite-intlayer": "9.5.1",
+    "vite": "8.3.0",
+    "vite-intlayer": "9.5.2",
     "vite-plugin-dts": "5.1.0",
     "vitest": "5.0.0"
   },
   "peerDependencies": {
     "@better-fetch/fetch": "1.3.1",
     "@hookform/resolvers": "5.9.1",
-    "@intlayer/backend": "9.5.1",
+    "@intlayer/backend": "9.5.2",
     "@monaco-editor/react": "4.7.0",
     "@shikijs/core": "4.4.3",
     "@shikijs/engine-oniguruma": "4.4.3",
@@ -555,12 +555,12 @@
     "@tanstack/react-query-devtools": "5.102.8",
     "framer-motion": "13.2.0",
     "fuse.js": "7.5.0",
-    "intlayer": "9.5.1",
-    "lucide-react": "1.43.0",
+    "intlayer": "9.5.2",
+    "lucide-react": "1.45.0",
     "react": ">=16.0.0",
     "react-dom": ">=16.0.0",
     "react-hook-form": "7.87.0",
-    "react-intlayer": "9.5.1",
+    "react-intlayer": "9.5.2",
     "shiki": "4.4.3",
     "tailwindcss": "4.3.3"
   },