@intlayer/design-system 8.11.1 → 8.11.3

package/dist/esm/api/useAuth/useOAuth2.mjs

@@ -1,17 +1,17 @@
 'use client';
 
 import { useQuery } from "@tanstack/react-query";
-import configuration from "@intlayer/config/built";
+import { editor } from "@intlayer/config/built";
 import { useConfiguration } from "@intlayer/editor-react";
 import { getOAuthAPI } from "@intlayer/api";
 import { defu } from "defu";
 
 //#region src/api/useAuth/useOAuth2.ts
 const useOAuth2 = (intlayerConfiguration) => {
-	const config = defu(intlayerConfiguration, useConfiguration(), configuration);
+	const config = defu(intlayerConfiguration, useConfiguration(), { editor });
 	const { data } = useQuery({
 		queryKey: ["oAuth2AccessToken"],
-		queryFn: getOAuthAPI(config).getOAuth2AccessToken,
+		queryFn: getOAuthAPI(void 0, config).getOAuth2AccessToken,
 		enabled: !!(config.editor.clientId && config.editor.clientSecret),
 		staleTime: 0,
 		gcTime: 0,

package/dist/esm/api/useAuth/useOAuth2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useOAuth2.mjs","names":["defaultConfiguration"],"sources":["../../../../src/api/useAuth/useOAuth2.ts"],"sourcesContent":["'use client';\n\nimport { getOAuthAPI } from '@intlayer/api';\nimport { default as defaultConfiguration } from '@intlayer/config/built';\nimport { useConfiguration } from '@intlayer/editor-react';\nimport type { IntlayerConfig } from '@intlayer/types/config';\nimport { useQuery } from '@tanstack/react-query';\nimport { defu } from 'defu';\n\nexport const useOAuth2 = (intlayerConfiguration?: IntlayerConfig) => {\n  const configuration = useConfiguration();\n  const config = defu(\n    intlayerConfiguration,\n    configuration,\n    defaultConfiguration\n  );\n\n  const intlayerAPI = getOAuthAPI(config);\n\n  const { data } = useQuery({\n    queryKey: ['oAuth2AccessToken'],\n    queryFn: intlayerAPI.getOAuth2AccessToken,\n    enabled: !!(config.editor.clientId && config.editor.clientSecret),\n    staleTime: 0,\n    gcTime: 0,\n    refetchOnWindowFocus: false,\n    refetchOnMount: false,\n    refetchOnReconnect: false,\n    refetchInterval: false,\n    refetchIntervalInBackground: false,\n  });\n\n  const oAuth2AccessToken = data?.data;\n\n  return {\n    oAuth2AccessToken,\n  };\n};\n"],"mappings":";;;;;;;;;AASA,MAAa,aAAa,0BAA2C;CAEnE,MAAM,SAAS,KACb,uBAFoB,iBAGR,GACZA,aACF;CAIA,MAAM,EAAE,SAAS,SAAS;EACxB,UAAU,CAAC,mBAAmB;EAC9B,SAJkB,YAAY,MAIX,EAAE;EACrB,SAAS,CAAC,EAAE,OAAO,OAAO,YAAY,OAAO,OAAO;EACpD,WAAW;EACX,QAAQ;EACR,sBAAsB;EACtB,gBAAgB;EAChB,oBAAoB;EACpB,iBAAiB;EACjB,6BAA6B;CAC/B,CAAC;CAID,OAAO,EACL,mBAHwB,MAAM,KAIhC;AACF"}
+{"version":3,"file":"useOAuth2.mjs","names":[],"sources":["../../../../src/api/useAuth/useOAuth2.ts"],"sourcesContent":["'use client';\n\nimport { getOAuthAPI } from '@intlayer/api';\nimport { editor } from '@intlayer/config/built';\nimport { useConfiguration } from '@intlayer/editor-react';\nimport type { IntlayerConfig } from '@intlayer/types/config';\nimport { useQuery } from '@tanstack/react-query';\nimport { defu } from 'defu';\n\nexport const useOAuth2 = (\n  intlayerConfiguration?: Pick<IntlayerConfig, 'editor'>\n) => {\n  const configuration = useConfiguration();\n  const config = defu(intlayerConfiguration, configuration, {\n    editor,\n  }) as IntlayerConfig;\n\n  const intlayerAPI = getOAuthAPI(undefined, config);\n\n  const { data } = useQuery({\n    queryKey: ['oAuth2AccessToken'],\n    queryFn: intlayerAPI.getOAuth2AccessToken,\n    enabled: !!(config.editor.clientId && config.editor.clientSecret),\n    staleTime: 0,\n    gcTime: 0,\n    refetchOnWindowFocus: false,\n    refetchOnMount: false,\n    refetchOnReconnect: false,\n    refetchInterval: false,\n    refetchIntervalInBackground: false,\n  });\n\n  const oAuth2AccessToken = data?.data;\n\n  return {\n    oAuth2AccessToken,\n  };\n};\n"],"mappings":";;;;;;;;;AASA,MAAa,aACX,0BACG;CAEH,MAAM,SAAS,KAAK,uBADE,iBACiC,GAAG,EACxD,OACF,CAAC;CAID,MAAM,EAAE,SAAS,SAAS;EACxB,UAAU,CAAC,mBAAmB;EAC9B,SAJkB,YAAY,QAAW,MAItB,EAAE;EACrB,SAAS,CAAC,EAAE,OAAO,OAAO,YAAY,OAAO,OAAO;EACpD,WAAW;EACX,QAAQ;EACR,sBAAsB;EACtB,gBAAgB;EAChB,oBAAoB;EACpB,iBAAiB;EACjB,6BAA6B;CAC/B,CAAC;CAID,OAAO,EACL,mBAHwB,MAAM,KAIhC;AACF"}

package/dist/esm/api/useAuth/useSession.mjs

@@ -2,13 +2,13 @@
 
 import { getAuthAPI } from "../../libs/auth.mjs";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import configuration from "@intlayer/config/built";
+import { editor } from "@intlayer/config/built";
 import { useConfiguration } from "@intlayer/editor-react";
 
 //#region src/api/useAuth/useSession.ts
 const useSession = (sessionProp, intlayerConfiguration) => {
-	const configuration$1 = useConfiguration();
-	const config = intlayerConfiguration ?? configuration$1 ?? configuration;
+	const configuration = useConfiguration();
+	const config = intlayerConfiguration ?? configuration ?? { editor };
 	const queryClient = useQueryClient();
 	const { data, isFetched, refetch } = useQuery({
 		queryKey: ["session"],

package/dist/esm/api/useAuth/useSession.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useSession.mjs","names":["configuration","defaultConfiguration"],"sources":["../../../../src/api/useAuth/useSession.ts"],"sourcesContent":["'use client';\n\nimport type { SessionAPI } from '@intlayer/backend';\nimport { default as defaultConfiguration } from '@intlayer/config/built';\nimport { useConfiguration } from '@intlayer/editor-react';\nimport type { IntlayerConfig } from '@intlayer/types/config';\nimport { useQuery, useQueryClient } from '@tanstack/react-query';\nimport { getAuthAPI } from '../../libs/auth';\n\nexport type UseSessionResult = {\n  /** The current session: `undefined` while loading, `null` if fetched and no session, otherwise the session. */\n  session: SessionAPI | null | undefined;\n  /** Refetches the session and returns it (undefined while loading). */\n  fetchSession: () => Promise<SessionAPI | null | undefined>;\n  /** Alias of `fetchSession` for ergonomics. */\n  revalidateSession: () => Promise<SessionAPI | null | undefined>;\n  /** Manually set the session cache. */\n  setSession: (nextSession: SessionAPI | null) => void;\n};\n\nexport const useSession = (\n  sessionProp?: SessionAPI | null,\n  intlayerConfiguration?: IntlayerConfig\n): UseSessionResult => {\n  const configuration = useConfiguration();\n  const config = (intlayerConfiguration ??\n    configuration ??\n    defaultConfiguration) as IntlayerConfig;\n\n  const queryClient = useQueryClient();\n\n  // Keep TanStack generics internal so they don't leak into the d.ts\n  const { data, isFetched, refetch } = useQuery({\n    queryKey: ['session'],\n    queryFn: async () => {\n      const intlayerAPI = getAuthAPI(config);\n      const result = await intlayerAPI.getSession();\n      // Narrow to the public shape we want to expose\n      return result.data as unknown as SessionAPI;\n    },\n    // Session data rarely changes during navigation, so keep it fresh for 5 minutes\n    // This prevents unnecessary refetches when navigating between pages\n    staleTime: 5 * 60 * 1000,\n    gcTime: 30 * 60 * 1000,\n    // Periodically revalidate so the backend's sliding session-refresh\n    // (better-auth `updateAge`) keeps the cookie alive for active users.\n    refetchInterval: 10 * 60 * 1000,\n    refetchIntervalInBackground: false,\n    refetchOnMount: true,\n    // Refetching on focus/reconnect lets a returning user get a fresh,\n    // extended session without a manual reload.\n    refetchOnWindowFocus: true,\n    refetchOnReconnect: true,\n    enabled: !sessionProp,\n  });\n\n  const session = data ?? (isFetched ? null : undefined);\n\n  const setSession = (nextSession: SessionAPI | null) => {\n    queryClient.setQueryData(['session'], nextSession);\n  };\n\n  const fetchSession = async (): Promise<SessionAPI | null | undefined> => {\n    const res = await refetch();\n    return res.data as SessionAPI | null | undefined;\n  };\n\n  const revalidateSession = fetchSession;\n\n  return {\n    session,\n    fetchSession,\n    revalidateSession,\n    setSession,\n  };\n};\n"],"mappings":";;;;;;;;AAoBA,MAAa,cACX,aACA,0BACqB;CACrB,MAAMA,kBAAgB,iBAAiB;CACvC,MAAM,SAAU,yBACdA,mBACAC;CAEF,MAAM,cAAc,eAAe;CAGnC,MAAM,EAAE,MAAM,WAAW,YAAY,SAAS;EAC5C,UAAU,CAAC,SAAS;EACpB,SAAS,YAAY;GAInB,QAAO,MAHa,WAAW,MACA,EAAE,WAAW,GAE9B;EAChB;EAGA,WAAW,MAAS;EACpB,QAAQ,OAAU;EAGlB,iBAAiB,MAAU;EAC3B,6BAA6B;EAC7B,gBAAgB;EAGhB,sBAAsB;EACtB,oBAAoB;EACpB,SAAS,CAAC;CACZ,CAAC;CAED,MAAM,UAAU,SAAS,YAAY,OAAO;CAE5C,MAAM,cAAc,gBAAmC;EACrD,YAAY,aAAa,CAAC,SAAS,GAAG,WAAW;CACnD;CAEA,MAAM,eAAe,YAAoD;EAEvE,QAAO,MADW,QAAQ,GACf;CACb;CAIA,OAAO;EACL;EACA;EACA;EACA;CACF;AACF"}
+{"version":3,"file":"useSession.mjs","names":[],"sources":["../../../../src/api/useAuth/useSession.ts"],"sourcesContent":["'use client';\n\nimport type { SessionAPI } from '@intlayer/backend';\nimport { editor } from '@intlayer/config/built';\nimport { useConfiguration } from '@intlayer/editor-react';\nimport type { IntlayerConfig } from '@intlayer/types/config';\nimport { useQuery, useQueryClient } from '@tanstack/react-query';\nimport { getAuthAPI } from '../../libs/auth';\n\nexport type UseSessionResult = {\n  /** The current session: `undefined` while loading, `null` if fetched and no session, otherwise the session. */\n  session: SessionAPI | null | undefined;\n  /** Refetches the session and returns it (undefined while loading). */\n  fetchSession: () => Promise<SessionAPI | null | undefined>;\n  /** Alias of `fetchSession` for ergonomics. */\n  revalidateSession: () => Promise<SessionAPI | null | undefined>;\n  /** Manually set the session cache. */\n  setSession: (nextSession: SessionAPI | null) => void;\n};\n\nexport const useSession = (\n  sessionProp?: SessionAPI | null,\n  intlayerConfiguration?: IntlayerConfig\n): UseSessionResult => {\n  const configuration = useConfiguration();\n  const config = (intlayerConfiguration ??\n    configuration ?? { editor }) as IntlayerConfig;\n\n  const queryClient = useQueryClient();\n\n  // Keep TanStack generics internal so they don't leak into the d.ts\n  const { data, isFetched, refetch } = useQuery({\n    queryKey: ['session'],\n    queryFn: async () => {\n      const intlayerAPI = getAuthAPI(config);\n      const result = await intlayerAPI.getSession();\n      // Narrow to the public shape we want to expose\n      return result.data as unknown as SessionAPI;\n    },\n    // Session data rarely changes during navigation, so keep it fresh for 5 minutes\n    // This prevents unnecessary refetches when navigating between pages\n    staleTime: 5 * 60 * 1000,\n    gcTime: 30 * 60 * 1000,\n    // Periodically revalidate so the backend's sliding session-refresh\n    // (better-auth `updateAge`) keeps the cookie alive for active users.\n    refetchInterval: 10 * 60 * 1000,\n    refetchIntervalInBackground: false,\n    refetchOnMount: true,\n    // Refetching on focus/reconnect lets a returning user get a fresh,\n    // extended session without a manual reload.\n    refetchOnWindowFocus: true,\n    refetchOnReconnect: true,\n    enabled: !sessionProp,\n  });\n\n  const session = data ?? (isFetched ? null : undefined);\n\n  const setSession = (nextSession: SessionAPI | null) => {\n    queryClient.setQueryData(['session'], nextSession);\n  };\n\n  const fetchSession = async (): Promise<SessionAPI | null | undefined> => {\n    const res = await refetch();\n    return res.data as SessionAPI | null | undefined;\n  };\n\n  const revalidateSession = fetchSession;\n\n  return {\n    session,\n    fetchSession,\n    revalidateSession,\n    setSession,\n  };\n};\n"],"mappings":";;;;;;;;AAoBA,MAAa,cACX,aACA,0BACqB;CACrB,MAAM,gBAAgB,iBAAiB;CACvC,MAAM,SAAU,yBACd,iBAAiB,EAAE,OAAO;CAE5B,MAAM,cAAc,eAAe;CAGnC,MAAM,EAAE,MAAM,WAAW,YAAY,SAAS;EAC5C,UAAU,CAAC,SAAS;EACpB,SAAS,YAAY;GAInB,QAAO,MAHa,WAAW,MACA,EAAE,WAAW,GAE9B;EAChB;EAGA,WAAW,MAAS;EACpB,QAAQ,OAAU;EAGlB,iBAAiB,MAAU;EAC3B,6BAA6B;EAC7B,gBAAgB;EAGhB,sBAAsB;EACtB,oBAAoB;EACpB,SAAS,CAAC;CACZ,CAAC;CAED,MAAM,UAAU,SAAS,YAAY,OAAO;CAE5C,MAAM,cAAc,gBAAmC;EACrD,YAAY,aAAa,CAAC,SAAS,GAAG,WAAW;CACnD;CAEA,MAAM,eAAe,YAAoD;EAEvE,QAAO,MADW,QAAQ,GACf;CACb;CAIA,OAAO;EACL;EACA;EACA;EACA;CACF;AACF"}

package/dist/esm/components/Accordion/Accordion.mjs

@@ -1,7 +1,7 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
-import { Button, ButtonColor, ButtonVariant } from "../Button/Button.mjs";
+import { Button } from "../Button/Button.mjs";
 import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
 import { useId, useState } from "react";
 import { ChevronDown } from "lucide-react";

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.mjs","names":[],"sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { ChevronDown } from 'lucide-react';\nimport {\n  type FC,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  useId,\n  useState,\n} from 'react';\nimport {\n  Button,\n  ButtonColor,\n  type ButtonProps,\n  ButtonVariant,\n} from '../Button';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\nexport interface AccordionProps\n  extends Omit<ButtonProps, 'children' | 'onToggle'> {\n  /** The content displayed in the accordion header */\n  header: ReactNode;\n  /** The collapsible content inside the accordion */\n  children: ReactNode;\n  /** Controls whether the accordion is open (controlled mode) */\n  isOpen?: boolean;\n  /** Default open state (uncontrolled mode) */\n  defaultIsOpen?: boolean;\n  /** Called when the accordion state changes */\n  onToggle?: (isOpen: boolean) => void;\n  /** Disable the accordion interaction */\n  disabled?: boolean;\n  /** Custom class for the content container */\n  contentClassName?: string;\n  /** Custom class for the header container */\n  headerClassName?: string;\n  /** Accessible label for screen readers */\n  'aria-label'?: string;\n  /** ID for the accordion content (for aria-controls) */\n  contentId?: string;\n}\n\n/**\n * Accordion component that allows the user to expand and collapse content.\n * It provides a header with a chevron icon that controls the visibility of the content.\n *\n * Features:\n * - Supports both controlled and uncontrolled modes\n * - Accessible with proper ARIA attributes\n * - Keyboard navigation support\n * - Smooth animations for expand/collapse\n * - Customizable styling\n *\n * @param header - The content of the header.\n * @param children - The content to be expanded and collapsed.\n * @param isOpen - Controlled state for whether the content is expanded.\n * @param defaultIsOpen - Default open state for uncontrolled mode.\n * @param onToggle - Callback when the accordion state changes.\n * @param disabled - Whether the accordion is disabled.\n * @param contentClassName - Custom class for the content container.\n * @param headerClassName - Custom class for the header.\n * @param contentId - ID for the content (used for aria-controls).\n *\n * @example\n * // Uncontrolled mode\n * <Accordion header=\"Accordion Header\" defaultIsOpen={true}>\n *   <p>Accordion content</p>\n * </Accordion>\n *\n * @example\n * // Controlled mode\n * <Accordion\n *   header=\"Controlled Accordion\"\n *   isOpen={isOpen}\n *   onToggle={setIsOpen}\n * >\n *   <p>Controlled content</p>\n * </Accordion>\n */\nexport const Accordion: FC<AccordionProps> = ({\n  children,\n  header,\n  isOpen,\n  defaultIsOpen = false,\n  onToggle,\n  onClick,\n  disabled = false,\n  contentClassName,\n  headerClassName,\n  contentId,\n  'aria-label': ariaLabel,\n  ...props\n}) => {\n  // Determine if we're in controlled or uncontrolled mode\n  const isControlled = isOpen !== undefined;\n  const [internalIsOpen, setInternalIsOpen] = useState(defaultIsOpen);\n  const id = useId();\n\n  // Use controlled value if provided, otherwise use internal state\n  const isExpandedState = isControlled ? isOpen : internalIsOpen;\n  const isHidden = !isExpandedState;\n\n  // Generate unique ID for content if not provided\n  const generatedContentId = contentId ?? `${id}-accordion-content`;\n\n  const handleToggle = (e: MouseEvent<HTMLButtonElement>) => {\n    if (disabled) return;\n\n    const newIsOpen = !isExpandedState;\n\n    // Update internal state if uncontrolled\n    if (!isControlled) {\n      setInternalIsOpen(newIsOpen);\n    }\n\n    // Call external handlers\n    onToggle?.(newIsOpen);\n    onClick?.(e);\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n    // Enter and Space should toggle the accordion\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      handleToggle(e as any);\n    }\n  };\n\n  return (\n    <div className=\"w-full\">\n      <Button\n        variant={ButtonVariant.HOVERABLE}\n        color={ButtonColor.TEXT}\n        onClick={handleToggle}\n        onKeyDown={handleKeyDown}\n        disabled={disabled}\n        isFullWidth\n        className={cn(\n          'flex items-center justify-between gap-2',\n          headerClassName\n        )}\n        IconRight={ChevronDown}\n        iconClassName={cn(\n          'transform transition-transform duration-500 ease-in-out',\n          isExpandedState ? 'rotate-0' : '-rotate-180'\n        )}\n        aria-expanded={isExpandedState}\n        aria-controls={generatedContentId}\n        aria-label={ariaLabel}\n        role=\"button\"\n        {...props}\n      >\n        {header}\n      </Button>\n\n      <MaxHeightSmoother\n        id={generatedContentId}\n        tabIndex={isHidden ? -1 : undefined}\n        isHidden={isHidden}\n        className={contentClassName}\n        role=\"region\"\n        aria-labelledby={generatedContentId}\n      >\n        {children}\n      </MaxHeightSmoother>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiFA,MAAa,aAAiC,EAC5C,UACA,QACA,QACA,gBAAgB,OAChB,UACA,SACA,WAAW,OACX,kBACA,iBACA,WACA,cAAc,WACd,GAAG,YACC;CAEJ,MAAM,eAAe,WAAW;CAChC,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,aAAa;CAClE,MAAM,KAAK,MAAM;CAGjB,MAAM,kBAAkB,eAAe,SAAS;CAChD,MAAM,WAAW,CAAC;CAGlB,MAAM,qBAAqB,aAAa,GAAG,GAAG;CAE9C,MAAM,gBAAgB,MAAqC;EACzD,IAAI,UAAU;EAEd,MAAM,YAAY,CAAC;EAGnB,IAAI,CAAC,cACH,kBAAkB,SAAS;EAI7B,WAAW,SAAS;EACpB,UAAU,CAAC;CACb;CAEA,MAAM,iBAAiB,MAAwC;EAE7D,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;GACtC,EAAE,eAAe;GACjB,aAAa,CAAQ;EACvB;CACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,QAAD;GACE;GACA;GACA,SAAS;GACT,WAAW;GACD;GACV;GACA,WAAW,GACT,2CACA,eACF;GACA,WAAW;GACX,eAAe,GACb,2DACA,kBAAkB,aAAa,aACjC;GACA,iBAAe;GACf,iBAAe;GACf,cAAY;GACZ,MAAK;GACL,GAAI;aAEH;EACK,IAER,oBAAC,mBAAD;GACE,IAAI;GACJ,UAAU,WAAW,KAAK;GAChB;GACV,WAAW;GACX,MAAK;GACL,mBAAiB;GAEhB;EACgB,EAChB;;AAET"}
+{"version":3,"file":"Accordion.mjs","names":[],"sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { ChevronDown } from 'lucide-react';\nimport {\n  type FC,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  useId,\n  useState,\n} from 'react';\nimport {\n  Button,\n  ButtonColor,\n  type ButtonProps,\n  ButtonVariant,\n} from '../Button';\nimport { MaxHeightSmoother } from '../MaxHeightSmoother';\n\nexport interface AccordionProps\n  extends Omit<ButtonProps, 'children' | 'onToggle'> {\n  /** The content displayed in the accordion header */\n  header: ReactNode;\n  /** The collapsible content inside the accordion */\n  children: ReactNode;\n  /** Controls whether the accordion is open (controlled mode) */\n  isOpen?: boolean;\n  /** Default open state (uncontrolled mode) */\n  defaultIsOpen?: boolean;\n  /** Called when the accordion state changes */\n  onToggle?: (isOpen: boolean) => void;\n  /** Disable the accordion interaction */\n  disabled?: boolean;\n  /** Custom class for the content container */\n  contentClassName?: string;\n  /** Custom class for the header container */\n  headerClassName?: string;\n  /** Accessible label for screen readers */\n  'aria-label'?: string;\n  /** ID for the accordion content (for aria-controls) */\n  contentId?: string;\n}\n\n/**\n * Accordion component that allows the user to expand and collapse content.\n * It provides a header with a chevron icon that controls the visibility of the content.\n *\n * Features:\n * - Supports both controlled and uncontrolled modes\n * - Accessible with proper ARIA attributes\n * - Keyboard navigation support\n * - Smooth animations for expand/collapse\n * - Customizable styling\n *\n * @param header - The content of the header.\n * @param children - The content to be expanded and collapsed.\n * @param isOpen - Controlled state for whether the content is expanded.\n * @param defaultIsOpen - Default open state for uncontrolled mode.\n * @param onToggle - Callback when the accordion state changes.\n * @param disabled - Whether the accordion is disabled.\n * @param contentClassName - Custom class for the content container.\n * @param headerClassName - Custom class for the header.\n * @param contentId - ID for the content (used for aria-controls).\n *\n * @example\n * // Uncontrolled mode\n * <Accordion header=\"Accordion Header\" defaultIsOpen={true}>\n *   <p>Accordion content</p>\n * </Accordion>\n *\n * @example\n * // Controlled mode\n * <Accordion\n *   header=\"Controlled Accordion\"\n *   isOpen={isOpen}\n *   onToggle={setIsOpen}\n * >\n *   <p>Controlled content</p>\n * </Accordion>\n */\nexport const Accordion: FC<AccordionProps> = ({\n  children,\n  header,\n  isOpen,\n  defaultIsOpen = false,\n  onToggle,\n  onClick,\n  disabled = false,\n  contentClassName,\n  headerClassName,\n  contentId,\n  'aria-label': ariaLabel,\n  ...props\n}) => {\n  // Determine if we're in controlled or uncontrolled mode\n  const isControlled = isOpen !== undefined;\n  const [internalIsOpen, setInternalIsOpen] = useState(defaultIsOpen);\n  const id = useId();\n\n  // Use controlled value if provided, otherwise use internal state\n  const isExpandedState = isControlled ? isOpen : internalIsOpen;\n  const isHidden = !isExpandedState;\n\n  // Generate unique ID for content if not provided\n  const generatedContentId = contentId ?? `${id}-accordion-content`;\n\n  const handleToggle = (e: MouseEvent<HTMLButtonElement>) => {\n    if (disabled) return;\n\n    const newIsOpen = !isExpandedState;\n\n    // Update internal state if uncontrolled\n    if (!isControlled) {\n      setInternalIsOpen(newIsOpen);\n    }\n\n    // Call external handlers\n    onToggle?.(newIsOpen);\n    onClick?.(e);\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n    // Enter and Space should toggle the accordion\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      handleToggle(e as any);\n    }\n  };\n\n  return (\n    <div className=\"w-full\">\n      <Button\n        variant=\"hoverable\"\n        color=\"text\"\n        onClick={handleToggle}\n        onKeyDown={handleKeyDown}\n        disabled={disabled}\n        isFullWidth\n        className={cn(\n          'flex items-center justify-between gap-2',\n          headerClassName\n        )}\n        IconRight={ChevronDown}\n        iconClassName={cn(\n          'transform transition-transform duration-500 ease-in-out',\n          isExpandedState ? 'rotate-0' : '-rotate-180'\n        )}\n        aria-expanded={isExpandedState}\n        aria-controls={generatedContentId}\n        aria-label={ariaLabel}\n        role=\"button\"\n        {...props}\n      >\n        {header}\n      </Button>\n\n      <MaxHeightSmoother\n        id={generatedContentId}\n        tabIndex={isHidden ? -1 : undefined}\n        isHidden={isHidden}\n        className={contentClassName}\n        role=\"region\"\n        aria-labelledby={generatedContentId}\n      >\n        {children}\n      </MaxHeightSmoother>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiFA,MAAa,aAAiC,EAC5C,UACA,QACA,QACA,gBAAgB,OAChB,UACA,SACA,WAAW,OACX,kBACA,iBACA,WACA,cAAc,WACd,GAAG,YACC;CAEJ,MAAM,eAAe,WAAW;CAChC,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,aAAa;CAClE,MAAM,KAAK,MAAM;CAGjB,MAAM,kBAAkB,eAAe,SAAS;CAChD,MAAM,WAAW,CAAC;CAGlB,MAAM,qBAAqB,aAAa,GAAG,GAAG;CAE9C,MAAM,gBAAgB,MAAqC;EACzD,IAAI,UAAU;EAEd,MAAM,YAAY,CAAC;EAGnB,IAAI,CAAC,cACH,kBAAkB,SAAS;EAI7B,WAAW,SAAS;EACpB,UAAU,CAAC;CACb;CAEA,MAAM,iBAAiB,MAAwC;EAE7D,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;GACtC,EAAE,eAAe;GACjB,aAAa,CAAQ;EACvB;CACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,oBAAC,QAAD;GACE,SAAQ;GACR,OAAM;GACN,SAAS;GACT,WAAW;GACD;GACV;GACA,WAAW,GACT,2CACA,eACF;GACA,WAAW;GACX,eAAe,GACb,2DACA,kBAAkB,aAAa,aACjC;GACA,iBAAe;GACf,iBAAe;GACf,cAAY;GACZ,MAAK;GACL,GAAI;aAEH;EACK,IAER,oBAAC,mBAAD;GACE,IAAI;GACJ,UAAU,WAAW,KAAK;GAChB;GACV,WAAW;GACX,MAAK;GACL,mBAAiB;GAEhB;EACgB,EAChB;;AAET"}

package/dist/esm/components/Browser/Browser.mjs

@@ -301,7 +301,7 @@ const Browser = ({ initialUrl = "https://example.com", path, className, style, s
 							isOverable: true,
 							children: /* @__PURE__ */ jsxs(Container, {
 								className: "min-w-28 rounded-md!",
-								roundedSize: "sm",
+								roundedSize: "xl",
 								border: true,
 								borderColor: "neutral",
 								children: [/* @__PURE__ */ jsx("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"Browser.mjs","names":[],"sources":["../../../../src/components/Browser/Browser.tsx"],"sourcesContent":["'use client';\n\nimport { Container } from '@components/Container';\nimport { cn } from '@utils/cn';\nimport { ArrowLeft, ArrowRight, RotateCw, ScanSearch } from 'lucide-react';\nimport {\n  type CSSProperties,\n  type HTMLAttributes,\n  type RefObject,\n  type SubmitEvent,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button } from '../Button';\nimport { ClickOutsideDiv } from '../ClickOutsideDiv';\nimport { DropDown } from '../DropDown';\nimport { Input, inputVariants } from '../Input';\n\nexport type BrowserProps = {\n  initialUrl?: string;\n  path?: string;\n  className?: string;\n  style?: CSSProperties;\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  'aria-label'?: string;\n  sandbox?: string;\n  ref?: RefObject<HTMLIFrameElement | null>;\n  domainRestriction?: string;\n} & HTMLAttributes<HTMLIFrameElement>;\n\nconst UrlPath = ({ url }: { url: string }) => {\n  const parts = getUrlPath(url).split('/').filter(Boolean);\n\n  if (parts.length === 0) return <span>/</span>;\n\n  return parts.flatMap((part, index, array) => [\n    <span key={`part-${index}`}>{part}</span>,\n    index < array.length - 1 && (\n      <span key={`sep-${index}`} className=\"mx-2 text-neutral\">\n        /\n      </span>\n    ),\n  ]);\n};\n\nconst getUrlPath = (url: string) => {\n  try {\n    const { pathname, search, hash } = new URL(url);\n\n    return `${pathname}${search}${hash}` || '/';\n  } catch {\n    return url;\n  }\n};\n\nexport const Browser = ({\n  initialUrl = 'https://example.com',\n  path,\n  className,\n  style,\n  size = 'md',\n  'aria-label': ariaLabel,\n  sandbox = 'allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox allow-downloads',\n  ref,\n  domainRestriction,\n  ...props\n}: BrowserProps) => {\n  // --- State -----------------------------------------------------------------\n  const [inputUrl, setInputUrl] = useState(initialUrl);\n  const [currentUrl, setCurrentUrl] = useState(initialUrl);\n\n  // History Management\n  const [history, setHistory] = useState<string[]>([initialUrl]);\n  const [currentIndex, setCurrentIndex] = useState(0);\n\n  const [error, setError] = useState<string | null>(null);\n  const [submitted, setSubmitted] = useState(false);\n  const internalIframeRef = useRef<HTMLIFrameElement>(null);\n\n  // Sitemap explorer state\n  const [sitemapOpen, setSitemapOpen] = useState(false);\n  const [sitemapUrls, setSitemapUrls] = useState<string[]>([]);\n  const [sitemapSearch, setSitemapSearch] = useState('');\n  const [sitemapLoading, setSitemapLoading] = useState(false);\n  const [sitemapFetched, setSitemapFetched] = useState(false);\n  const [sitemapError, setSitemapError] = useState(false);\n  const sitemapInputRef = useRef<HTMLInputElement>(null);\n\n  useImperativeHandle(ref, () => internalIframeRef.current!, []);\n  const content = useIntlayer('browser');\n\n  // --- Effects ---------------------------------------------------------------\n\n  // Reset everything if initialUrl changes completely\n  useEffect(() => {\n    setInputUrl(initialUrl);\n    setCurrentUrl(initialUrl);\n    setHistory([initialUrl]);\n    setCurrentIndex(0);\n    setError(null);\n    setSubmitted(false);\n    setSitemapOpen(false);\n    setSitemapUrls([]);\n    setSitemapSearch('');\n    setSitemapFetched(false);\n    setSitemapError(false);\n  }, [initialUrl]);\n\n  // Sync external path changes with the URL bar and History\n  useEffect(() => {\n    if (!path) return;\n\n    try {\n      const baseOrigin = domainRestriction ?? initialUrl;\n      const origin = new URL(baseOrigin).origin;\n      const fullUrl = `${origin}${path}`;\n\n      // Update Input (Always update the visual bar)\n      setInputUrl(fullUrl);\n\n      // Check internal iframe state to avoid reload if already there\n      let isAlreadyAtUrl = false;\n      if (internalIframeRef.current?.contentWindow) {\n        try {\n          const currentIframeHref =\n            internalIframeRef.current.contentWindow.location.href;\n          if (new URL(currentIframeHref).href === new URL(fullUrl).href) {\n            isAlreadyAtUrl = true;\n          }\n        } catch {\n          // Cross-origin access ignored\n        }\n      }\n\n      // Update History Stack regardless of isAlreadyAtUrl so arrow navigation is always correct\n      if (history[currentIndex] !== fullUrl) {\n        setHistory((prev) => {\n          const newHistory = prev.slice(0, currentIndex + 1);\n          newHistory.push(fullUrl);\n          return newHistory;\n        });\n        setCurrentIndex((prev) => prev + 1);\n      }\n\n      // Navigate only if NOT already there to avoid refreshing on internal iframe navigation\n      if (!isAlreadyAtUrl) {\n        setCurrentUrl(fullUrl);\n      }\n\n      setError(null);\n    } catch {\n      // Ignore invalid paths\n    }\n  }, [path, domainRestriction, initialUrl]); // Removed currentIndex dependency to prevent loops\n\n  // Imperatively keep the iframe src in sync with currentUrl.\n  // React's attribute reconciliation can be unreliable for cross-origin iframes after\n  // internal navigation, so this effect is the source of truth for navigation.\n  useEffect(() => {\n    const iframe = internalIframeRef.current;\n    if (!iframe) return;\n    if (iframe.src !== currentUrl) {\n      iframe.src = currentUrl;\n    }\n  }, [currentUrl]);\n\n  // --- Navigation Logic ------------------------------------------------------\n\n  const handleNavigateTo = (url: string) => {\n    try {\n      const validated = normalizeUrl(url);\n\n      // If we are navigating to the exact same URL, just reload\n      if (validated === currentUrl) {\n        handleReload();\n        return;\n      }\n\n      setCurrentUrl(validated);\n      setInputUrl(validated);\n      setError(null);\n\n      // Update History: Slice future if we went back, then push new\n      const newHistory = history.slice(0, currentIndex + 1);\n      newHistory.push(validated);\n      setHistory(newHistory);\n      setCurrentIndex(newHistory.length - 1);\n    } catch (e) {\n      if (\n        e instanceof Error &&\n        e.message === 'URL does not match allowed domain' &&\n        domainRestriction\n      ) {\n        setError(\n          content.domainRestrictionError?.value ??\n            `Only URLs from ${domainRestriction} are allowed.`\n        );\n      } else {\n        setError(content.errorMessage.value);\n      }\n    }\n  };\n\n  const handleBack = () => {\n    if (currentIndex > 0) {\n      const newIndex = currentIndex - 1;\n      const prevUrl = history[newIndex];\n      setCurrentIndex(newIndex);\n      setCurrentUrl(prevUrl);\n      setInputUrl(prevUrl);\n      setError(null);\n    }\n  };\n\n  const handleForward = () => {\n    if (currentIndex < history.length - 1) {\n      const newIndex = currentIndex + 1;\n      const nextUrl = history[newIndex];\n      setCurrentIndex(newIndex);\n      setCurrentUrl(nextUrl);\n      setInputUrl(nextUrl);\n      setError(null);\n    }\n  };\n\n  const handleSubmit = (e: SubmitEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    setSubmitted(true);\n    handleNavigateTo(inputUrl);\n  };\n\n  const handleReload = () => {\n    const iframe = internalIframeRef.current;\n    if (!iframe) return;\n    const src = iframe.src;\n    iframe.src = '';\n    setTimeout(() => {\n      if (internalIframeRef.current) internalIframeRef.current.src = src;\n    }, 50);\n  };\n\n  // --- Validation Helpers ----------------------------------------------------\n  const isValidHostname = (host: string) => {\n    if (host === 'localhost') return true;\n    if (/^(\\d{1,3}\\.){3}\\d{1,3}$/.test(host)) return true;\n    if (/^[a-f0-9:]+$/i.test(host)) return true;\n    if (!/^[a-z0-9.-]+$/i.test(host)) return false;\n    if (/^[-.]/.test(host) || /[-.]$/.test(host)) return false;\n    if (host.includes('..')) return false;\n    if (!host.includes('.')) return false;\n    return true;\n  };\n\n  const getRestrictionOrigin = (): URL | null => {\n    if (!domainRestriction) return null;\n    try {\n      return new URL(domainRestriction);\n    } catch {\n      return null;\n    }\n  };\n\n  const normalizeUrl = (raw: string) => {\n    const trimmed = raw.trim();\n    if (!trimmed || /\\s/.test(trimmed)) throw new Error('Invalid');\n\n    const restrictionOrigin = getRestrictionOrigin();\n    const isRelativePath = trimmed.startsWith('/') && !trimmed.startsWith('//');\n\n    if (isRelativePath) {\n      if (restrictionOrigin) {\n        return new URL(`${restrictionOrigin.origin}${trimmed}`).toString();\n      }\n      return new URL(`${new URL(currentUrl).origin}${trimmed}`).toString();\n    }\n\n    const hasProtocol = /^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(trimmed);\n    const candidate = hasProtocol ? trimmed : `https://${trimmed}`;\n    const url = new URL(candidate);\n\n    if (url.protocol !== 'http:' && url.protocol !== 'https:') {\n      throw new Error('Only http(s) is allowed');\n    }\n\n    if (!isValidHostname(url.hostname)) throw new Error('Invalid host');\n\n    if (restrictionOrigin) {\n      const urlMatches =\n        url.hostname === restrictionOrigin.hostname &&\n        url.protocol === restrictionOrigin.protocol &&\n        (restrictionOrigin.port === '' ||\n          url.port === restrictionOrigin.port ||\n          url.host === restrictionOrigin.host);\n\n      if (!urlMatches) throw new Error('URL does not match allowed domain');\n    }\n\n    return url.toString();\n  };\n\n  const handleSitemapToggle = async () => {\n    const nextOpen = !sitemapOpen;\n    setSitemapOpen(nextOpen);\n\n    if (nextOpen && !sitemapFetched) {\n      setSitemapLoading(true);\n      setSitemapError(false);\n      setSitemapFetched(true);\n      try {\n        const { extractUrlFromSitemap } = await import(\n          './extractUrlFromSitemap'\n        );\n        const urls = await extractUrlFromSitemap(currentUrl);\n        setSitemapUrls(urls);\n        if (urls.length === 0) setSitemapError(false);\n      } catch {\n        setSitemapError(true);\n      } finally {\n        setSitemapLoading(false);\n      }\n      setTimeout(() => sitemapInputRef.current?.focus(), 50);\n    }\n  };\n\n  const filteredSitemapUrls = useMemo(() => {\n    const query = sitemapSearch.trim().toLowerCase();\n    if (!query) return sitemapUrls;\n    return sitemapUrls.filter((url) => url.toLowerCase().includes(query));\n  }, [sitemapUrls, sitemapSearch]);\n\n  const showError = submitted && !!error;\n  const canGoBack = currentIndex > 0;\n  const canGoForward = currentIndex < history.length - 1;\n\n  return (\n    <section\n      className={cn(\n        'flex w-full flex-col overflow-hidden rounded-xl bg-background shadow-[0_4px_12px_rgba(0,0,0,0.4),0_0_1px_rgba(0,0,0,0.2)]',\n        className\n      )}\n      style={style}\n      aria-label={ariaLabel ?? content.ariaLabel.value}\n    >\n      {/* Top bar */}\n      <div className=\"relative z-10 flex shrink-0 items-center gap-3 rounded-t-xl bg-text/15 px-4 py-2\">\n        {/* Navigation Controls */}\n        <div className=\"flex items-center gap-1\">\n          <Button\n            type=\"button\"\n            onClick={handleBack}\n            disabled={!canGoBack}\n            variant=\"hoverable\"\n            size=\"icon-md\"\n            label={content.backButtonLabel.value}\n            Icon={ArrowLeft}\n          />\n          <Button\n            type=\"button\"\n            onClick={handleForward}\n            disabled={!canGoForward}\n            variant=\"hoverable\"\n            size=\"icon-md\"\n            label={content.forwardButtonLabel.value}\n            Icon={ArrowRight}\n          />\n        </div>\n\n        {/* URL Bar */}\n        <form\n          onSubmit={handleSubmit}\n          noValidate\n          className={cn(\n            inputVariants(),\n            'flex w-full gap-2 rounded-xl p-0.5! supports-[corner-shape:squircle]:rounded-2xl',\n            'bg-neutral/10 text-text/50 placeholder:text-neutral/80'\n          )}\n        >\n          <label htmlFor=\"browser-url\" className=\"sr-only\">\n            {content.urlLabel}\n          </label>\n          <Input\n            id=\"browser-url\"\n            type=\"text\"\n            inputMode=\"url\"\n            spellCheck={false}\n            autoCapitalize=\"off\"\n            variant=\"invisible\"\n            className=\"ml-3 p-0!\"\n            size=\"sm\"\n            autoCorrect=\"off\"\n            value={inputUrl}\n            onChange={(e) => {\n              setInputUrl(e.target.value);\n              if (showError) setError(null);\n            }}\n            placeholder={content.urlPlaceholder.value}\n            aria-label={content.urlLabel.value}\n            aria-invalid={showError}\n            aria-describedby={showError ? 'browser-url-error' : undefined}\n          />\n\n          <Button\n            type=\"button\"\n            onClick={handleReload}\n            variant=\"hoverable\"\n            size=\"icon-md\"\n            className=\"p-1!\"\n            label={'content.reloadButtonTitle.value'}\n            Icon={RotateCw}\n          />\n\n          {/* invisible submit */}\n          <button type=\"submit\" className=\"sr-only absolute\" tabIndex={-1} />\n        </form>\n\n        {/* Sitemap Explorer */}\n        <ClickOutsideDiv\n          onClickOutSide={() => setSitemapOpen(false)}\n          disabled={!sitemapOpen}\n          role=\"none\"\n        >\n          <DropDown identifier=\"sitemap-explorer\">\n            <DropDown.Trigger\n              identifier=\"sitemap-explorer-trigger\"\n              type=\"button\"\n              color=\"text\"\n              onClick={handleSitemapToggle}\n              variant=\"hoverable\"\n              size=\"icon-md\"\n              label={content.sitemapButtonLabel.value}\n              Icon={ScanSearch}\n            />\n\n            <DropDown.Panel\n              identifier=\"sitemap-explorer\"\n              isHidden={!sitemapOpen}\n              align=\"end\"\n              isFocusable\n              isOverable\n            >\n              <Container\n                className=\"min-w-28 rounded-md!\"\n                roundedSize=\"sm\"\n                border\n                borderColor=\"neutral\"\n              >\n                <div className=\"p-2\">\n                  <Input\n                    type=\"search\"\n                    ref={sitemapInputRef}\n                    aria-label={content.sitemapSearchAriaLabel.value}\n                    placeholder={content.sitemapSearchPlaceholder.value}\n                    onChange={(e) => setSitemapSearch(e.target.value)}\n                    value={sitemapSearch}\n                    size=\"sm\"\n                  />\n                </div>\n                <ul\n                  className=\"max-h-64 divide-y divide-dotted divide-neutral/30 overflow-y-auto p-1 text-center\"\n                  aria-label={content.sitemapButtonLabel.value}\n                >\n                  {sitemapLoading ? (\n                    <li className=\"px-3 py-4 text-center text-neutral text-xs\">\n                      {content.sitemapLoading}\n                    </li>\n                  ) : sitemapError ||\n                    (!sitemapLoading && filteredSitemapUrls.length === 0) ? (\n                    <li className=\"px-3 py-4 text-center text-neutral text-xs\">\n                      {sitemapError\n                        ? content.sitemapError\n                        : content.sitemapEmpty}\n                    </li>\n                  ) : (\n                    filteredSitemapUrls.map((url) => (\n                      <li key={url} className=\"py-0.5\">\n                        <Button\n                          variant=\"hoverable\"\n                          color=\"text\"\n                          size=\"sm\"\n                          className=\"w-full text-left\"\n                          label={url}\n                          onClick={() => {\n                            handleNavigateTo(url);\n                            setSitemapOpen(false);\n                          }}\n                        >\n                          <span className=\"max-w-64 truncate text-left text-base\">\n                            <UrlPath url={url} />\n                          </span>\n                        </Button>\n                      </li>\n                    ))\n                  )}\n                </ul>\n              </Container>\n            </DropDown.Panel>\n          </DropDown>\n        </ClickOutsideDiv>\n\n        {/* Error Message Tooltip */}\n        {showError && (\n          <div className=\"absolute top-full left-4 z-20 mt-1\">\n            <p\n              id=\"browser-url-error\"\n              role=\"alert\"\n              aria-live=\"assertive\"\n              className=\"rounded-md bg-red-900/90 px-3 py-1.5 text-red-100 text-xs shadow-md backdrop-blur-sm\"\n            >\n              {error}\n            </p>\n          </div>\n        )}\n      </div>\n\n      {/* Iframe */}\n      <div className=\"relative z-0 flex min-h-0 w-full flex-1 flex-col overflow-hidden rounded-b-xl bg-background\">\n        <iframe\n          ref={internalIframeRef}\n          src={currentUrl}\n          title={content.iframeTitle.value}\n          className=\"size-full flex-1\"\n          sandbox={sandbox}\n          loading=\"lazy\"\n          aria-live=\"polite\"\n          {...props}\n        />\n      </div>\n    </section>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Browser.mjs","names":[],"sources":["../../../../src/components/Browser/Browser.tsx"],"sourcesContent":["'use client';\n\nimport { Container } from '@components/Container';\nimport { cn } from '@utils/cn';\nimport { ArrowLeft, ArrowRight, RotateCw, ScanSearch } from 'lucide-react';\nimport {\n  type CSSProperties,\n  type HTMLAttributes,\n  type RefObject,\n  type SubmitEvent,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button } from '../Button';\nimport { ClickOutsideDiv } from '../ClickOutsideDiv';\nimport { DropDown } from '../DropDown';\nimport { Input, inputVariants } from '../Input';\n\nexport type BrowserProps = {\n  initialUrl?: string;\n  path?: string;\n  className?: string;\n  style?: CSSProperties;\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  'aria-label'?: string;\n  sandbox?: string;\n  ref?: RefObject<HTMLIFrameElement | null>;\n  domainRestriction?: string;\n} & HTMLAttributes<HTMLIFrameElement>;\n\nconst UrlPath = ({ url }: { url: string }) => {\n  const parts = getUrlPath(url).split('/').filter(Boolean);\n\n  if (parts.length === 0) return <span>/</span>;\n\n  return parts.flatMap((part, index, array) => [\n    <span key={`part-${index}`}>{part}</span>,\n    index < array.length - 1 && (\n      <span key={`sep-${index}`} className=\"mx-2 text-neutral\">\n        /\n      </span>\n    ),\n  ]);\n};\n\nconst getUrlPath = (url: string) => {\n  try {\n    const { pathname, search, hash } = new URL(url);\n\n    return `${pathname}${search}${hash}` || '/';\n  } catch {\n    return url;\n  }\n};\n\nexport const Browser = ({\n  initialUrl = 'https://example.com',\n  path,\n  className,\n  style,\n  size = 'md',\n  'aria-label': ariaLabel,\n  sandbox = 'allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox allow-downloads',\n  ref,\n  domainRestriction,\n  ...props\n}: BrowserProps) => {\n  // --- State -----------------------------------------------------------------\n  const [inputUrl, setInputUrl] = useState(initialUrl);\n  const [currentUrl, setCurrentUrl] = useState(initialUrl);\n\n  // History Management\n  const [history, setHistory] = useState<string[]>([initialUrl]);\n  const [currentIndex, setCurrentIndex] = useState(0);\n\n  const [error, setError] = useState<string | null>(null);\n  const [submitted, setSubmitted] = useState(false);\n  const internalIframeRef = useRef<HTMLIFrameElement>(null);\n\n  // Sitemap explorer state\n  const [sitemapOpen, setSitemapOpen] = useState(false);\n  const [sitemapUrls, setSitemapUrls] = useState<string[]>([]);\n  const [sitemapSearch, setSitemapSearch] = useState('');\n  const [sitemapLoading, setSitemapLoading] = useState(false);\n  const [sitemapFetched, setSitemapFetched] = useState(false);\n  const [sitemapError, setSitemapError] = useState(false);\n  const sitemapInputRef = useRef<HTMLInputElement>(null);\n\n  useImperativeHandle(ref, () => internalIframeRef.current!, []);\n  const content = useIntlayer('browser');\n\n  // --- Effects ---------------------------------------------------------------\n\n  // Reset everything if initialUrl changes completely\n  useEffect(() => {\n    setInputUrl(initialUrl);\n    setCurrentUrl(initialUrl);\n    setHistory([initialUrl]);\n    setCurrentIndex(0);\n    setError(null);\n    setSubmitted(false);\n    setSitemapOpen(false);\n    setSitemapUrls([]);\n    setSitemapSearch('');\n    setSitemapFetched(false);\n    setSitemapError(false);\n  }, [initialUrl]);\n\n  // Sync external path changes with the URL bar and History\n  useEffect(() => {\n    if (!path) return;\n\n    try {\n      const baseOrigin = domainRestriction ?? initialUrl;\n      const origin = new URL(baseOrigin).origin;\n      const fullUrl = `${origin}${path}`;\n\n      // Update Input (Always update the visual bar)\n      setInputUrl(fullUrl);\n\n      // Check internal iframe state to avoid reload if already there\n      let isAlreadyAtUrl = false;\n      if (internalIframeRef.current?.contentWindow) {\n        try {\n          const currentIframeHref =\n            internalIframeRef.current.contentWindow.location.href;\n          if (new URL(currentIframeHref).href === new URL(fullUrl).href) {\n            isAlreadyAtUrl = true;\n          }\n        } catch {\n          // Cross-origin access ignored\n        }\n      }\n\n      // Update History Stack regardless of isAlreadyAtUrl so arrow navigation is always correct\n      if (history[currentIndex] !== fullUrl) {\n        setHistory((prev) => {\n          const newHistory = prev.slice(0, currentIndex + 1);\n          newHistory.push(fullUrl);\n          return newHistory;\n        });\n        setCurrentIndex((prev) => prev + 1);\n      }\n\n      // Navigate only if NOT already there to avoid refreshing on internal iframe navigation\n      if (!isAlreadyAtUrl) {\n        setCurrentUrl(fullUrl);\n      }\n\n      setError(null);\n    } catch {\n      // Ignore invalid paths\n    }\n  }, [path, domainRestriction, initialUrl]); // Removed currentIndex dependency to prevent loops\n\n  // Imperatively keep the iframe src in sync with currentUrl.\n  // React's attribute reconciliation can be unreliable for cross-origin iframes after\n  // internal navigation, so this effect is the source of truth for navigation.\n  useEffect(() => {\n    const iframe = internalIframeRef.current;\n    if (!iframe) return;\n    if (iframe.src !== currentUrl) {\n      iframe.src = currentUrl;\n    }\n  }, [currentUrl]);\n\n  // --- Navigation Logic ------------------------------------------------------\n\n  const handleNavigateTo = (url: string) => {\n    try {\n      const validated = normalizeUrl(url);\n\n      // If we are navigating to the exact same URL, just reload\n      if (validated === currentUrl) {\n        handleReload();\n        return;\n      }\n\n      setCurrentUrl(validated);\n      setInputUrl(validated);\n      setError(null);\n\n      // Update History: Slice future if we went back, then push new\n      const newHistory = history.slice(0, currentIndex + 1);\n      newHistory.push(validated);\n      setHistory(newHistory);\n      setCurrentIndex(newHistory.length - 1);\n    } catch (e) {\n      if (\n        e instanceof Error &&\n        e.message === 'URL does not match allowed domain' &&\n        domainRestriction\n      ) {\n        setError(\n          content.domainRestrictionError?.value ??\n            `Only URLs from ${domainRestriction} are allowed.`\n        );\n      } else {\n        setError(content.errorMessage.value);\n      }\n    }\n  };\n\n  const handleBack = () => {\n    if (currentIndex > 0) {\n      const newIndex = currentIndex - 1;\n      const prevUrl = history[newIndex];\n      setCurrentIndex(newIndex);\n      setCurrentUrl(prevUrl);\n      setInputUrl(prevUrl);\n      setError(null);\n    }\n  };\n\n  const handleForward = () => {\n    if (currentIndex < history.length - 1) {\n      const newIndex = currentIndex + 1;\n      const nextUrl = history[newIndex];\n      setCurrentIndex(newIndex);\n      setCurrentUrl(nextUrl);\n      setInputUrl(nextUrl);\n      setError(null);\n    }\n  };\n\n  const handleSubmit = (e: SubmitEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    setSubmitted(true);\n    handleNavigateTo(inputUrl);\n  };\n\n  const handleReload = () => {\n    const iframe = internalIframeRef.current;\n    if (!iframe) return;\n    const src = iframe.src;\n    iframe.src = '';\n    setTimeout(() => {\n      if (internalIframeRef.current) internalIframeRef.current.src = src;\n    }, 50);\n  };\n\n  // --- Validation Helpers ----------------------------------------------------\n  const isValidHostname = (host: string) => {\n    if (host === 'localhost') return true;\n    if (/^(\\d{1,3}\\.){3}\\d{1,3}$/.test(host)) return true;\n    if (/^[a-f0-9:]+$/i.test(host)) return true;\n    if (!/^[a-z0-9.-]+$/i.test(host)) return false;\n    if (/^[-.]/.test(host) || /[-.]$/.test(host)) return false;\n    if (host.includes('..')) return false;\n    if (!host.includes('.')) return false;\n    return true;\n  };\n\n  const getRestrictionOrigin = (): URL | null => {\n    if (!domainRestriction) return null;\n    try {\n      return new URL(domainRestriction);\n    } catch {\n      return null;\n    }\n  };\n\n  const normalizeUrl = (raw: string) => {\n    const trimmed = raw.trim();\n    if (!trimmed || /\\s/.test(trimmed)) throw new Error('Invalid');\n\n    const restrictionOrigin = getRestrictionOrigin();\n    const isRelativePath = trimmed.startsWith('/') && !trimmed.startsWith('//');\n\n    if (isRelativePath) {\n      if (restrictionOrigin) {\n        return new URL(`${restrictionOrigin.origin}${trimmed}`).toString();\n      }\n      return new URL(`${new URL(currentUrl).origin}${trimmed}`).toString();\n    }\n\n    const hasProtocol = /^[a-zA-Z][a-zA-Z0-9+.-]*:/.test(trimmed);\n    const candidate = hasProtocol ? trimmed : `https://${trimmed}`;\n    const url = new URL(candidate);\n\n    if (url.protocol !== 'http:' && url.protocol !== 'https:') {\n      throw new Error('Only http(s) is allowed');\n    }\n\n    if (!isValidHostname(url.hostname)) throw new Error('Invalid host');\n\n    if (restrictionOrigin) {\n      const urlMatches =\n        url.hostname === restrictionOrigin.hostname &&\n        url.protocol === restrictionOrigin.protocol &&\n        (restrictionOrigin.port === '' ||\n          url.port === restrictionOrigin.port ||\n          url.host === restrictionOrigin.host);\n\n      if (!urlMatches) throw new Error('URL does not match allowed domain');\n    }\n\n    return url.toString();\n  };\n\n  const handleSitemapToggle = async () => {\n    const nextOpen = !sitemapOpen;\n    setSitemapOpen(nextOpen);\n\n    if (nextOpen && !sitemapFetched) {\n      setSitemapLoading(true);\n      setSitemapError(false);\n      setSitemapFetched(true);\n      try {\n        const { extractUrlFromSitemap } = await import(\n          './extractUrlFromSitemap'\n        );\n        const urls = await extractUrlFromSitemap(currentUrl);\n        setSitemapUrls(urls);\n        if (urls.length === 0) setSitemapError(false);\n      } catch {\n        setSitemapError(true);\n      } finally {\n        setSitemapLoading(false);\n      }\n      setTimeout(() => sitemapInputRef.current?.focus(), 50);\n    }\n  };\n\n  const filteredSitemapUrls = useMemo(() => {\n    const query = sitemapSearch.trim().toLowerCase();\n    if (!query) return sitemapUrls;\n    return sitemapUrls.filter((url) => url.toLowerCase().includes(query));\n  }, [sitemapUrls, sitemapSearch]);\n\n  const showError = submitted && !!error;\n  const canGoBack = currentIndex > 0;\n  const canGoForward = currentIndex < history.length - 1;\n\n  return (\n    <section\n      className={cn(\n        'flex w-full flex-col overflow-hidden rounded-xl bg-background shadow-[0_4px_12px_rgba(0,0,0,0.4),0_0_1px_rgba(0,0,0,0.2)]',\n        className\n      )}\n      style={style}\n      aria-label={ariaLabel ?? content.ariaLabel.value}\n    >\n      {/* Top bar */}\n      <div className=\"relative z-10 flex shrink-0 items-center gap-3 rounded-t-xl bg-text/15 px-4 py-2\">\n        {/* Navigation Controls */}\n        <div className=\"flex items-center gap-1\">\n          <Button\n            type=\"button\"\n            onClick={handleBack}\n            disabled={!canGoBack}\n            variant=\"hoverable\"\n            size=\"icon-md\"\n            label={content.backButtonLabel.value}\n            Icon={ArrowLeft}\n          />\n          <Button\n            type=\"button\"\n            onClick={handleForward}\n            disabled={!canGoForward}\n            variant=\"hoverable\"\n            size=\"icon-md\"\n            label={content.forwardButtonLabel.value}\n            Icon={ArrowRight}\n          />\n        </div>\n\n        {/* URL Bar */}\n        <form\n          onSubmit={handleSubmit}\n          noValidate\n          className={cn(\n            inputVariants(),\n            'flex w-full gap-2 rounded-xl p-0.5! supports-[corner-shape:squircle]:rounded-2xl',\n            'bg-neutral/10 text-text/50 placeholder:text-neutral/80'\n          )}\n        >\n          <label htmlFor=\"browser-url\" className=\"sr-only\">\n            {content.urlLabel}\n          </label>\n          <Input\n            id=\"browser-url\"\n            type=\"text\"\n            inputMode=\"url\"\n            spellCheck={false}\n            autoCapitalize=\"off\"\n            variant=\"invisible\"\n            className=\"ml-3 p-0!\"\n            size=\"sm\"\n            autoCorrect=\"off\"\n            value={inputUrl}\n            onChange={(e) => {\n              setInputUrl(e.target.value);\n              if (showError) setError(null);\n            }}\n            placeholder={content.urlPlaceholder.value}\n            aria-label={content.urlLabel.value}\n            aria-invalid={showError}\n            aria-describedby={showError ? 'browser-url-error' : undefined}\n          />\n\n          <Button\n            type=\"button\"\n            onClick={handleReload}\n            variant=\"hoverable\"\n            size=\"icon-md\"\n            className=\"p-1!\"\n            label={'content.reloadButtonTitle.value'}\n            Icon={RotateCw}\n          />\n\n          {/* invisible submit */}\n          <button type=\"submit\" className=\"sr-only absolute\" tabIndex={-1} />\n        </form>\n\n        {/* Sitemap Explorer */}\n        <ClickOutsideDiv\n          onClickOutSide={() => setSitemapOpen(false)}\n          disabled={!sitemapOpen}\n          role=\"none\"\n        >\n          <DropDown identifier=\"sitemap-explorer\">\n            <DropDown.Trigger\n              identifier=\"sitemap-explorer-trigger\"\n              type=\"button\"\n              color=\"text\"\n              onClick={handleSitemapToggle}\n              variant=\"hoverable\"\n              size=\"icon-md\"\n              label={content.sitemapButtonLabel.value}\n              Icon={ScanSearch}\n            />\n\n            <DropDown.Panel\n              identifier=\"sitemap-explorer\"\n              isHidden={!sitemapOpen}\n              align=\"end\"\n              isFocusable\n              isOverable\n            >\n              <Container\n                className=\"min-w-28 rounded-md!\"\n                roundedSize=\"xl\"\n                border\n                borderColor=\"neutral\"\n              >\n                <div className=\"p-2\">\n                  <Input\n                    type=\"search\"\n                    ref={sitemapInputRef}\n                    aria-label={content.sitemapSearchAriaLabel.value}\n                    placeholder={content.sitemapSearchPlaceholder.value}\n                    onChange={(e) => setSitemapSearch(e.target.value)}\n                    value={sitemapSearch}\n                    size=\"sm\"\n                  />\n                </div>\n                <ul\n                  className=\"max-h-64 divide-y divide-dotted divide-neutral/30 overflow-y-auto p-1 text-center\"\n                  aria-label={content.sitemapButtonLabel.value}\n                >\n                  {sitemapLoading ? (\n                    <li className=\"px-3 py-4 text-center text-neutral text-xs\">\n                      {content.sitemapLoading}\n                    </li>\n                  ) : sitemapError ||\n                    (!sitemapLoading && filteredSitemapUrls.length === 0) ? (\n                    <li className=\"px-3 py-4 text-center text-neutral text-xs\">\n                      {sitemapError\n                        ? content.sitemapError\n                        : content.sitemapEmpty}\n                    </li>\n                  ) : (\n                    filteredSitemapUrls.map((url) => (\n                      <li key={url} className=\"py-0.5\">\n                        <Button\n                          variant=\"hoverable\"\n                          color=\"text\"\n                          size=\"sm\"\n                          className=\"w-full text-left\"\n                          label={url}\n                          onClick={() => {\n                            handleNavigateTo(url);\n                            setSitemapOpen(false);\n                          }}\n                        >\n                          <span className=\"max-w-64 truncate text-left text-base\">\n                            <UrlPath url={url} />\n                          </span>\n                        </Button>\n                      </li>\n                    ))\n                  )}\n                </ul>\n              </Container>\n            </DropDown.Panel>\n          </DropDown>\n        </ClickOutsideDiv>\n\n        {/* Error Message Tooltip */}\n        {showError && (\n          <div className=\"absolute top-full left-4 z-20 mt-1\">\n            <p\n              id=\"browser-url-error\"\n              role=\"alert\"\n              aria-live=\"assertive\"\n              className=\"rounded-md bg-red-900/90 px-3 py-1.5 text-red-100 text-xs shadow-md backdrop-blur-sm\"\n            >\n              {error}\n            </p>\n          </div>\n        )}\n      </div>\n\n      {/* Iframe */}\n      <div className=\"relative z-0 flex min-h-0 w-full flex-1 flex-col overflow-hidden rounded-b-xl bg-background\">\n        <iframe\n          ref={internalIframeRef}\n          src={currentUrl}\n          title={content.iframeTitle.value}\n          className=\"size-full flex-1\"\n          sandbox={sandbox}\n          loading=\"lazy\"\n          aria-live=\"polite\"\n          {...props}\n        />\n      </div>\n    </section>\n  );\n};\n"],"mappings":"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"}

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

@@ -37,19 +37,17 @@ const getCardScale = (index, displayedIndex) => {
 const getCardPositionX = (index, displayedIndex, containerWidth) => {
 	return `${(index - displayedIndex) * Math.min(containerWidth * (containerWidth < 600 ? .15 : .3), 300)}px`;
 };
-const CarouselItem = ({ children, className, ...props }) => {
-	return /* @__PURE__ */ jsx("div", {
-		className: cn("h-full w-full", className),
-		...props,
-		children
-	});
-};
+const CarouselItem = Object.assign(({ children, className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("size-full", className),
+	...props,
+	children
+}), { isCarouselItem: true });
 const CarouselIndicators = ({ className, disableKeyboardShortcuts = false, ...props }) => {
 	const { selectedIndex, setSelectedIndex, totalItems, handlePrev, handleNext } = useCarousel();
 	const { goToSlide, previousSlide, nextSlide } = useIntlayer("carousel");
 	if (totalItems <= 1) return null;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("absolute bottom-4 left-1/2 z-50 flex -translate-x-1/2 flex-row items-center gap-2", className),
+		className: cn("absolute bottom-0 left-1/2 z-50 flex -translate-x-1/2 flex-row items-center gap-2 pb-4", className),
 		...props,
 		children: [
 			/* @__PURE__ */ jsxs(Popover, {
@@ -131,7 +129,7 @@ const partitionCarouselChildren = (children) => {
 	const slides = [];
 	const others = [];
 	children.forEach((child) => {
-		if (isValidElement(child) && child.type === CarouselItem) slides.push(child);
+		if (isValidElement(child) && (child.type === CarouselItem || child.type.isCarouselItem === true)) slides.push(child);
 		else others.push(child);
 	});
 	return [slides, others];

package/dist/esm/components/Carousel/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Carousel/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Button,\n  ButtonColor,\n  ButtonSize,\n  ButtonVariant,\n} from '@components/Button';\nimport { KeyboardShortcut } from '@components/KeyboardShortcut';\nimport { Popover } from '@components/Popover';\nimport { cn } from '@utils/cn';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport {\n  Children,\n  createContext,\n  type FC,\n  type HTMLAttributes,\n  isValidElement,\n  type MouseEventHandler,\n  type ReactElement,\n  type ReactNode,\n  type TouchEventHandler,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntlayer } from 'react-intlayer';\n\n// ------------------------------------------------------------------\n// Configuration\n// ------------------------------------------------------------------\nconst SWIPE_THRESHOLD_DIVISOR = 5;\nconst TRANSITION_DELAY_MS = 50;\n\n// ------------------------------------------------------------------\n// Context Definition\n// ------------------------------------------------------------------\ntype CarouselContextValue = {\n  selectedIndex: number;\n  setSelectedIndex: (index: number) => void;\n  totalItems: number;\n  handlePrev: () => void;\n  handleNext: () => void;\n};\n\nconst CarouselContext = createContext<CarouselContextValue | null>(null);\n\nconst useCarousel = () => {\n  const context = useContext(CarouselContext);\n  if (!context) {\n    throw new Error('useCarousel must be used within a Carousel');\n  }\n  return context;\n};\n\n// ------------------------------------------------------------------\n// Helper Functions\n// ------------------------------------------------------------------\nconst getCardStyle = (index: number, displayedIndex: number) => {\n  const diff = Math.abs(index - displayedIndex);\n  switch (diff) {\n    case 0:\n      return 'opacity-100 z-40';\n    case 1:\n      return 'opacity-75 z-30 cursor-pointer';\n    case 2:\n      return 'opacity-50 z-20 pointer-events-none';\n    default:\n      return 'opacity-0 z-10 pointer-events-none';\n  }\n};\n\nconst getCardScale = (index: number, displayedIndex: number) => {\n  const diff = Math.abs(index - displayedIndex);\n  switch (diff) {\n    case 0:\n      return 1;\n    case 1:\n      return 0.9;\n    case 2:\n      return 0.8;\n    default:\n      return 0.7;\n  }\n};\n\n// This allows the calculation to work on SSR without hydration mismatch.\n// Your original logic: (3 * screenWidth) / 10  === 30% of viewport width\nconst getCardPositionX = (\n  index: number,\n  displayedIndex: number,\n  containerWidth: number\n) => {\n  const diff = index - displayedIndex;\n  const gapPercentage = containerWidth < 600 ? 0.15 : 0.3; // Dropped to 15% for a tighter cluster\n  const step = Math.min(containerWidth * gapPercentage, 300);\n\n  // The 'px' here is mandatory\n  return `${diff * step}px`;\n};\n\n// ------------------------------------------------------------------\n// Sub-Component: Item\n// ------------------------------------------------------------------\ntype CarouselItemProps = HTMLAttributes<HTMLDivElement> & {\n  children: ReactNode;\n};\n\nconst CarouselItem: FC<CarouselItemProps> = ({\n  children,\n  className,\n  ...props\n}) => {\n  return (\n    <div className={cn('h-full w-full', className)} {...props}>\n      {children}\n    </div>\n  );\n};\n\n// ------------------------------------------------------------------\n// Sub-Component: Indicators (Controller)\n// ------------------------------------------------------------------\ntype CarouselIndicatorsProps = HTMLAttributes<HTMLDivElement> & {\n  disableKeyboardShortcuts?: boolean;\n};\n\nconst CarouselIndicators: FC<CarouselIndicatorsProps> = ({\n  className,\n  disableKeyboardShortcuts = false,\n  ...props\n}) => {\n  const {\n    selectedIndex,\n    setSelectedIndex,\n    totalItems,\n    handlePrev,\n    handleNext,\n  } = useCarousel();\n  const { goToSlide, previousSlide, nextSlide } = useIntlayer('carousel');\n\n  if (totalItems <= 1) return null;\n\n  return (\n    <div\n      className={cn(\n        'absolute bottom-4 left-1/2 z-50 flex -translate-x-1/2 flex-row items-center gap-2',\n        className\n      )}\n      {...props}\n    >\n      <Popover identifier=\"carousel-prev\">\n        <Button\n          variant={ButtonVariant.HOVERABLE}\n          color={ButtonColor.NEUTRAL}\n          label={previousSlide.value}\n          roundedSize=\"full\"\n          onClick={(e) => {\n            e.stopPropagation();\n            handlePrev();\n          }}\n          Icon={ChevronLeft}\n          size={ButtonSize.ICON_MD}\n          disabled={selectedIndex === 0}\n        />\n\n        <Popover.Detail identifier=\"carousel-prev\">\n          <div className=\"flex items-center gap-2 p-2\">\n            <span className=\"whitespace-nowrap text-neutral text-xs\">\n              {previousSlide.value}\n            </span>\n            <KeyboardShortcut\n              shortcut=\"ArrowLeft\"\n              disabled={disableKeyboardShortcuts}\n              size=\"sm\"\n              onTriggered={handlePrev}\n            />\n          </div>\n        </Popover.Detail>\n      </Popover>\n\n      {Array.from({ length: totalItems }).map((_, index) => {\n        const isActive = index === selectedIndex;\n        return (\n          <button\n            key={index}\n            type=\"button\"\n            onClick={(e) => {\n              e.stopPropagation();\n              setSelectedIndex(index);\n            }}\n            aria-label={goToSlide({ index: index + 1 }).value}\n            className={cn(\n              'h-2.5 w-2.5 rounded-full transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:ring-offset-2',\n              isActive ? 'scale-110 bg-text' : 'bg-text/20 hover:bg-text/40'\n            )}\n          />\n        );\n      })}\n\n      <Popover identifier=\"carousel-next\">\n        <Button\n          variant={ButtonVariant.HOVERABLE}\n          color={ButtonColor.NEUTRAL}\n          roundedSize=\"full\"\n          label={nextSlide.value}\n          onClick={(e) => {\n            e.stopPropagation();\n            handleNext();\n          }}\n          Icon={ChevronRight}\n          size={ButtonSize.ICON_MD}\n          disabled={selectedIndex === totalItems - 1}\n        />\n\n        <Popover.Detail identifier=\"carousel-next\">\n          <div className=\"flex items-center gap-2 p-2\">\n            <span className=\"whitespace-nowrap text-neutral text-xs\">\n              {nextSlide.value}\n            </span>\n            <KeyboardShortcut\n              shortcut=\"ArrowRight\"\n              size=\"sm\"\n              onTriggered={handleNext}\n              disabled={disableKeyboardShortcuts}\n            />\n          </div>\n        </Popover.Detail>\n      </Popover>\n    </div>\n  );\n};\n\n// ------------------------------------------------------------------\n// Main Component: Carousel Root\n// ------------------------------------------------------------------\ntype CarouselProps = HTMLAttributes<HTMLDivElement> & {\n  children: ReactNode;\n  initialIndex?: number;\n  onIndexChange?: (index: number) => void;\n};\n\nconst partitionCarouselChildren = (\n  children: ReactNode[]\n): [ReactElement[], ReactNode[]] => {\n  const slides: ReactElement[] = [];\n  const others: ReactNode[] = [];\n\n  children.forEach((child) => {\n    if (isValidElement(child) && child.type === CarouselItem) {\n      slides.push(child);\n    } else {\n      others.push(child);\n    }\n  });\n\n  return [slides, others];\n};\n\nconst CarouselRoot: FC<CarouselProps> = ({\n  children,\n  className,\n  initialIndex = 0,\n  onIndexChange,\n  ...props\n}) => {\n  const allChildren = Children.toArray(children);\n  const [slides, others] = partitionCarouselChildren(allChildren);\n  const totalItems = slides.length;\n\n  // State Management\n  const [selectedIndex, setSelectedIndex] = useState<number>(initialIndex);\n  const [displayedIndex, setDisplayedIndex] = useState<number>(initialIndex);\n  const [containerHeight, setContainerHeight] = useState<number>(0);\n  const [containerWidth, setContainerWidth] = useState<number>(0);\n\n  useLayoutEffect(() => {\n    const calculateDimensions = () => {\n      if (!containerRef.current) return;\n\n      // Track Width\n      const width = containerRef.current.clientWidth;\n      setContainerWidth(width);\n\n      // Track Height (existing logic)\n      const heights = itemsRef.current.map((item) => item?.offsetHeight || 0);\n      const maxHeight = Math.max(0, ...heights);\n      if (maxHeight > 0) {\n        setContainerHeight(maxHeight + 40);\n      }\n    };\n\n    calculateDimensions();\n\n    const observer = new ResizeObserver(() => {\n      calculateDimensions();\n    });\n\n    if (containerRef.current) observer.observe(containerRef.current);\n    itemsRef.current.forEach((item) => {\n      if (item) observer.observe(item);\n    });\n\n    return () => observer.disconnect();\n  }, [totalItems]);\n\n  // Drag State\n  const [startX, setStartX] = useState(0);\n  const [isDragging, setIsDragging] = useState(false);\n\n  // Refs\n  const containerRef = useRef<HTMLDivElement>(null);\n  const itemsRef = useRef<(HTMLDivElement | null)[]>([]);\n\n  // Navigation Logic\n  const handleSwitchItem = (diff: number) => {\n    if (containerWidth === 0) return;\n\n    // Use container width for the threshold\n    const swipeStep = containerWidth / SWIPE_THRESHOLD_DIVISOR;\n    const numSwipe = Math.round(diff / swipeStep);\n\n    if (Math.abs(numSwipe) >= 1) {\n      const newIndex = displayedIndex - numSwipe;\n      const clampedIndex = Math.max(0, Math.min(newIndex, totalItems - 1));\n\n      if (clampedIndex !== selectedIndex) {\n        setSelectedIndex(clampedIndex);\n        setStartX((prev) => prev + diff);\n      }\n    }\n  };\n\n  const handleNext = () => {\n    setSelectedIndex((prev) => Math.min(prev + 1, totalItems - 1));\n  };\n\n  const handlePrev = () => {\n    setSelectedIndex((prev) => Math.max(prev - 1, 0));\n  };\n\n  // Input Handlers\n  const handleMouseDown: MouseEventHandler<HTMLDivElement> = (e) => {\n    setIsDragging(true);\n    setStartX(e.clientX);\n  };\n  const handleMouseMove: MouseEventHandler<HTMLDivElement> = (e) => {\n    if (isDragging) handleSwitchItem(e.clientX - startX);\n  };\n  const handleDragEnd = () => setIsDragging(false);\n  const handleTouchStart: TouchEventHandler<HTMLDivElement> = (e) => {\n    setIsDragging(true);\n    setStartX(e.touches[0].clientX);\n  };\n  const handleTouchMove: TouchEventHandler<HTMLDivElement> = (e) => {\n    if (isDragging) handleSwitchItem(e.touches[0].clientX - startX);\n  };\n\n  // Effects\n  useEffect(() => {\n    if (selectedIndex) onIndexChange?.(selectedIndex);\n  }, [selectedIndex, onIndexChange]);\n\n  useEffect(() => {\n    let interval: NodeJS.Timeout;\n\n    if (selectedIndex !== displayedIndex) {\n      interval = setInterval(() => {\n        setDisplayedIndex((prev) => {\n          if (prev === selectedIndex) {\n            clearInterval(interval);\n            return prev;\n          }\n          return prev < selectedIndex ? prev + 1 : prev - 1;\n        });\n      }, TRANSITION_DELAY_MS);\n    }\n    return () => clearInterval(interval);\n  }, [selectedIndex, displayedIndex]);\n\n  // Calculate height based on the MAX height of ALL items\n  useLayoutEffect(() => {\n    const calculateMaxHeight = () => {\n      const heights = itemsRef.current.map((item) => item?.offsetHeight || 0);\n      const maxHeight = Math.max(0, ...heights);\n\n      if (maxHeight > 0) {\n        setContainerHeight(maxHeight + 40);\n      }\n    };\n\n    calculateMaxHeight();\n\n    const observer = new ResizeObserver(() => {\n      calculateMaxHeight();\n    });\n\n    itemsRef.current.forEach((item) => {\n      if (item) observer.observe(item);\n    });\n\n    return () => observer.disconnect();\n  }, [totalItems]); // Removed isMounted dependency\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        selectedIndex,\n        setSelectedIndex,\n        totalItems,\n        handlePrev,\n        handleNext,\n      }}\n    >\n      <div\n        ref={containerRef}\n        className={cn(\n          'relative flex w-full cursor-grab select-none items-center overflow-hidden outline-none transition-[height] duration-300 ease-in-out focus:outline-none focus:outline-none focus:ring-0 active:cursor-grabbing',\n          'max-w-[1400px]',\n          className\n        )}\n        style={{\n          height: containerHeight > 0 ? containerHeight : 'auto',\n          minHeight: '400px',\n        }}\n        onMouseDown={handleMouseDown}\n        onMouseMove={handleMouseMove}\n        onMouseUp={handleDragEnd}\n        onMouseLeave={handleDragEnd}\n        onTouchStart={handleTouchStart}\n        onTouchMove={handleTouchMove}\n        onTouchEnd={handleDragEnd}\n        role=\"region\"\n        aria-label=\"Carousel\"\n        {...props}\n      >\n        {slides.map((child, index) => {\n          return (\n            <div\n              key={index}\n              role=\"button\"\n              tabIndex={0}\n              ref={(el) => {\n                itemsRef.current[index] = el;\n              }}\n              // FIX 2: Removed isMounted checks and invisible classes.\n              // CSS units allow correct SSR rendering.\n              className={cn(\n                'absolute left-1/2 -translate-x-1/2 transition-all duration-300 ease-in-out',\n                'outline-none ring-0 focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0',\n                getCardStyle(index, displayedIndex)\n              )}\n              onClick={(e) => {\n                e.stopPropagation();\n                setSelectedIndex(index);\n              }}\n              onKeyDown={(e) => {\n                if (e.key === 'Enter' || e.key === ' ') setSelectedIndex(index);\n              }}\n              style={{\n                transform: `\n                  translateX(${getCardPositionX(\n                    index,\n                    displayedIndex,\n                    containerWidth\n                  )})\n                  scale(${getCardScale(index, displayedIndex)})\n                `,\n              }}\n            >\n              {child}\n            </div>\n          );\n        })}\n\n        {others}\n      </div>\n    </CarouselContext.Provider>\n  );\n};\n\nexport const Carousel = Object.assign(CarouselRoot, {\n  Item: CarouselItem,\n  Indicators: CarouselIndicators,\n});\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Carousel/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Button,\n  ButtonColor,\n  ButtonSize,\n  ButtonVariant,\n} from '@components/Button';\nimport { KeyboardShortcut } from '@components/KeyboardShortcut';\nimport { Popover } from '@components/Popover';\nimport { cn } from '@utils/cn';\nimport { ChevronLeft, ChevronRight } from 'lucide-react';\nimport {\n  Children,\n  createContext,\n  type FC,\n  type HTMLAttributes,\n  isValidElement,\n  type MouseEventHandler,\n  type ReactElement,\n  type ReactNode,\n  type TouchEventHandler,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { useIntlayer } from 'react-intlayer';\n\n// ------------------------------------------------------------------\n// Configuration\n// ------------------------------------------------------------------\nconst SWIPE_THRESHOLD_DIVISOR = 5;\nconst TRANSITION_DELAY_MS = 50;\n\n// ------------------------------------------------------------------\n// Context Definition\n// ------------------------------------------------------------------\ntype CarouselContextValue = {\n  selectedIndex: number;\n  setSelectedIndex: (index: number) => void;\n  totalItems: number;\n  handlePrev: () => void;\n  handleNext: () => void;\n};\n\nconst CarouselContext = createContext<CarouselContextValue | null>(null);\n\nconst useCarousel = () => {\n  const context = useContext(CarouselContext);\n  if (!context) {\n    throw new Error('useCarousel must be used within a Carousel');\n  }\n  return context;\n};\n\n// ------------------------------------------------------------------\n// Helper Functions\n// ------------------------------------------------------------------\nconst getCardStyle = (index: number, displayedIndex: number) => {\n  const diff = Math.abs(index - displayedIndex);\n  switch (diff) {\n    case 0:\n      return 'opacity-100 z-40';\n    case 1:\n      return 'opacity-75 z-30 cursor-pointer';\n    case 2:\n      return 'opacity-50 z-20 pointer-events-none';\n    default:\n      return 'opacity-0 z-10 pointer-events-none';\n  }\n};\n\nconst getCardScale = (index: number, displayedIndex: number) => {\n  const diff = Math.abs(index - displayedIndex);\n  switch (diff) {\n    case 0:\n      return 1;\n    case 1:\n      return 0.9;\n    case 2:\n      return 0.8;\n    default:\n      return 0.7;\n  }\n};\n\n// This allows the calculation to work on SSR without hydration mismatch.\n// Your original logic: (3 * screenWidth) / 10  === 30% of viewport width\nconst getCardPositionX = (\n  index: number,\n  displayedIndex: number,\n  containerWidth: number\n) => {\n  const diff = index - displayedIndex;\n  const gapPercentage = containerWidth < 600 ? 0.15 : 0.3; // Dropped to 15% for a tighter cluster\n  const step = Math.min(containerWidth * gapPercentage, 300);\n\n  // The 'px' here is mandatory\n  return `${diff * step}px`;\n};\n\n// ------------------------------------------------------------------\n// Sub-Component: Item\n// ------------------------------------------------------------------\ntype CarouselItemProps = HTMLAttributes<HTMLDivElement> & {\n  children: ReactNode;\n};\n\nconst CarouselItem: FC<CarouselItemProps> & { isCarouselItem: true } =\n  Object.assign(\n    ({ children, className, ...props }: CarouselItemProps) => (\n      <div className={cn('size-full', className)} {...props}>\n        {children}\n      </div>\n    ),\n    { isCarouselItem: true as const }\n  );\n\n// ------------------------------------------------------------------\n// Sub-Component: Indicators (Controller)\n// ------------------------------------------------------------------\ntype CarouselIndicatorsProps = HTMLAttributes<HTMLDivElement> & {\n  disableKeyboardShortcuts?: boolean;\n};\n\nconst CarouselIndicators: FC<CarouselIndicatorsProps> = ({\n  className,\n  disableKeyboardShortcuts = false,\n  ...props\n}) => {\n  const {\n    selectedIndex,\n    setSelectedIndex,\n    totalItems,\n    handlePrev,\n    handleNext,\n  } = useCarousel();\n  const { goToSlide, previousSlide, nextSlide } = useIntlayer('carousel');\n\n  if (totalItems <= 1) return null;\n\n  return (\n    <div\n      className={cn(\n        'absolute bottom-0 left-1/2 z-50 flex -translate-x-1/2 flex-row items-center gap-2 pb-4',\n        className\n      )}\n      {...props}\n    >\n      <Popover identifier=\"carousel-prev\">\n        <Button\n          variant={ButtonVariant.HOVERABLE}\n          color={ButtonColor.NEUTRAL}\n          label={previousSlide.value}\n          roundedSize=\"full\"\n          onClick={(e) => {\n            e.stopPropagation();\n            handlePrev();\n          }}\n          Icon={ChevronLeft}\n          size={ButtonSize.ICON_MD}\n          disabled={selectedIndex === 0}\n        />\n\n        <Popover.Detail identifier=\"carousel-prev\">\n          <div className=\"flex items-center gap-2 p-2\">\n            <span className=\"whitespace-nowrap text-neutral text-xs\">\n              {previousSlide.value}\n            </span>\n            <KeyboardShortcut\n              shortcut=\"ArrowLeft\"\n              disabled={disableKeyboardShortcuts}\n              size=\"sm\"\n              onTriggered={handlePrev}\n            />\n          </div>\n        </Popover.Detail>\n      </Popover>\n\n      {Array.from({ length: totalItems }).map((_, index) => {\n        const isActive = index === selectedIndex;\n        return (\n          <button\n            key={index}\n            type=\"button\"\n            onClick={(e) => {\n              e.stopPropagation();\n              setSelectedIndex(index);\n            }}\n            aria-label={goToSlide({ index: index + 1 }).value}\n            className={cn(\n              'h-2.5 w-2.5 rounded-full transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:ring-offset-2',\n              isActive ? 'scale-110 bg-text' : 'bg-text/20 hover:bg-text/40'\n            )}\n          />\n        );\n      })}\n\n      <Popover identifier=\"carousel-next\">\n        <Button\n          variant={ButtonVariant.HOVERABLE}\n          color={ButtonColor.NEUTRAL}\n          roundedSize=\"full\"\n          label={nextSlide.value}\n          onClick={(e) => {\n            e.stopPropagation();\n            handleNext();\n          }}\n          Icon={ChevronRight}\n          size={ButtonSize.ICON_MD}\n          disabled={selectedIndex === totalItems - 1}\n        />\n\n        <Popover.Detail identifier=\"carousel-next\">\n          <div className=\"flex items-center gap-2 p-2\">\n            <span className=\"whitespace-nowrap text-neutral text-xs\">\n              {nextSlide.value}\n            </span>\n            <KeyboardShortcut\n              shortcut=\"ArrowRight\"\n              size=\"sm\"\n              onTriggered={handleNext}\n              disabled={disableKeyboardShortcuts}\n            />\n          </div>\n        </Popover.Detail>\n      </Popover>\n    </div>\n  );\n};\n\n// ------------------------------------------------------------------\n// Main Component: Carousel Root\n// ------------------------------------------------------------------\ntype CarouselProps = HTMLAttributes<HTMLDivElement> & {\n  children: ReactNode;\n  initialIndex?: number;\n  onIndexChange?: (index: number) => void;\n};\n\nconst partitionCarouselChildren = (\n  children: ReactNode[]\n): [ReactElement[], ReactNode[]] => {\n  const slides: ReactElement[] = [];\n  const others: ReactNode[] = [];\n\n  children.forEach((child) => {\n    if (\n      isValidElement(child) &&\n      (child.type === CarouselItem ||\n        (child.type as { isCarouselItem?: boolean }).isCarouselItem === true)\n    ) {\n      slides.push(child);\n    } else {\n      others.push(child);\n    }\n  });\n\n  return [slides, others];\n};\n\nconst CarouselRoot: FC<CarouselProps> = ({\n  children,\n  className,\n  initialIndex = 0,\n  onIndexChange,\n  ...props\n}) => {\n  const allChildren = Children.toArray(children);\n  const [slides, others] = partitionCarouselChildren(allChildren);\n  const totalItems = slides.length;\n\n  // State Management\n  const [selectedIndex, setSelectedIndex] = useState<number>(initialIndex);\n  const [displayedIndex, setDisplayedIndex] = useState<number>(initialIndex);\n  const [containerHeight, setContainerHeight] = useState<number>(0);\n  const [containerWidth, setContainerWidth] = useState<number>(0);\n\n  useLayoutEffect(() => {\n    const calculateDimensions = () => {\n      if (!containerRef.current) return;\n\n      // Track Width\n      const width = containerRef.current.clientWidth;\n      setContainerWidth(width);\n\n      // Track Height (existing logic)\n      const heights = itemsRef.current.map((item) => item?.offsetHeight || 0);\n      const maxHeight = Math.max(0, ...heights);\n      if (maxHeight > 0) {\n        setContainerHeight(maxHeight + 40);\n      }\n    };\n\n    calculateDimensions();\n\n    const observer = new ResizeObserver(() => {\n      calculateDimensions();\n    });\n\n    if (containerRef.current) observer.observe(containerRef.current);\n    itemsRef.current.forEach((item) => {\n      if (item) observer.observe(item);\n    });\n\n    return () => observer.disconnect();\n  }, [totalItems]);\n\n  // Drag State\n  const [startX, setStartX] = useState(0);\n  const [isDragging, setIsDragging] = useState(false);\n\n  // Refs\n  const containerRef = useRef<HTMLDivElement>(null);\n  const itemsRef = useRef<(HTMLDivElement | null)[]>([]);\n\n  // Navigation Logic\n  const handleSwitchItem = (diff: number) => {\n    if (containerWidth === 0) return;\n\n    // Use container width for the threshold\n    const swipeStep = containerWidth / SWIPE_THRESHOLD_DIVISOR;\n    const numSwipe = Math.round(diff / swipeStep);\n\n    if (Math.abs(numSwipe) >= 1) {\n      const newIndex = displayedIndex - numSwipe;\n      const clampedIndex = Math.max(0, Math.min(newIndex, totalItems - 1));\n\n      if (clampedIndex !== selectedIndex) {\n        setSelectedIndex(clampedIndex);\n        setStartX((prev) => prev + diff);\n      }\n    }\n  };\n\n  const handleNext = () => {\n    setSelectedIndex((prev) => Math.min(prev + 1, totalItems - 1));\n  };\n\n  const handlePrev = () => {\n    setSelectedIndex((prev) => Math.max(prev - 1, 0));\n  };\n\n  // Input Handlers\n  const handleMouseDown: MouseEventHandler<HTMLDivElement> = (e) => {\n    setIsDragging(true);\n    setStartX(e.clientX);\n  };\n  const handleMouseMove: MouseEventHandler<HTMLDivElement> = (e) => {\n    if (isDragging) handleSwitchItem(e.clientX - startX);\n  };\n  const handleDragEnd = () => setIsDragging(false);\n  const handleTouchStart: TouchEventHandler<HTMLDivElement> = (e) => {\n    setIsDragging(true);\n    setStartX(e.touches[0]!.clientX);\n  };\n  const handleTouchMove: TouchEventHandler<HTMLDivElement> = (e) => {\n    if (isDragging) handleSwitchItem(e.touches[0]!.clientX - startX);\n  };\n\n  // Effects\n  useEffect(() => {\n    if (selectedIndex) onIndexChange?.(selectedIndex);\n  }, [selectedIndex, onIndexChange]);\n\n  useEffect(() => {\n    let interval: NodeJS.Timeout;\n\n    if (selectedIndex !== displayedIndex) {\n      interval = setInterval(() => {\n        setDisplayedIndex((prev) => {\n          if (prev === selectedIndex) {\n            clearInterval(interval);\n            return prev;\n          }\n          return prev < selectedIndex ? prev + 1 : prev - 1;\n        });\n      }, TRANSITION_DELAY_MS);\n    }\n    return () => clearInterval(interval);\n  }, [selectedIndex, displayedIndex]);\n\n  // Calculate height based on the MAX height of ALL items\n  useLayoutEffect(() => {\n    const calculateMaxHeight = () => {\n      const heights = itemsRef.current.map((item) => item?.offsetHeight || 0);\n      const maxHeight = Math.max(0, ...heights);\n\n      if (maxHeight > 0) {\n        setContainerHeight(maxHeight + 40);\n      }\n    };\n\n    calculateMaxHeight();\n\n    const observer = new ResizeObserver(() => {\n      calculateMaxHeight();\n    });\n\n    itemsRef.current.forEach((item) => {\n      if (item) observer.observe(item);\n    });\n\n    return () => observer.disconnect();\n  }, [totalItems]); // Removed isMounted dependency\n\n  return (\n    <CarouselContext.Provider\n      value={{\n        selectedIndex,\n        setSelectedIndex,\n        totalItems,\n        handlePrev,\n        handleNext,\n      }}\n    >\n      <div\n        ref={containerRef}\n        className={cn(\n          'relative flex w-full cursor-grab select-none items-center overflow-hidden outline-none transition-[height] duration-300 ease-in-out focus:outline-none focus:outline-none focus:ring-0 active:cursor-grabbing',\n          'max-w-[1400px]',\n          className\n        )}\n        style={{\n          height: containerHeight > 0 ? containerHeight : 'auto',\n          minHeight: '400px',\n        }}\n        onMouseDown={handleMouseDown}\n        onMouseMove={handleMouseMove}\n        onMouseUp={handleDragEnd}\n        onMouseLeave={handleDragEnd}\n        onTouchStart={handleTouchStart}\n        onTouchMove={handleTouchMove}\n        onTouchEnd={handleDragEnd}\n        role=\"region\"\n        aria-label=\"Carousel\"\n        {...props}\n      >\n        {slides.map((child, index) => {\n          return (\n            <div\n              key={index}\n              role=\"button\"\n              tabIndex={0}\n              ref={(el) => {\n                itemsRef.current[index] = el;\n              }}\n              // FIX 2: Removed isMounted checks and invisible classes.\n              // CSS units allow correct SSR rendering.\n              className={cn(\n                'absolute left-1/2 -translate-x-1/2 transition-all duration-300 ease-in-out',\n                'outline-none ring-0 focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0',\n                getCardStyle(index, displayedIndex)\n              )}\n              onClick={(e) => {\n                e.stopPropagation();\n                setSelectedIndex(index);\n              }}\n              onKeyDown={(e) => {\n                if (e.key === 'Enter' || e.key === ' ') setSelectedIndex(index);\n              }}\n              style={{\n                transform: `\n                  translateX(${getCardPositionX(\n                    index,\n                    displayedIndex,\n                    containerWidth\n                  )})\n                  scale(${getCardScale(index, displayedIndex)})\n                `,\n              }}\n            >\n              {child}\n            </div>\n          );\n        })}\n\n        {others}\n      </div>\n    </CarouselContext.Provider>\n  );\n};\n\nexport const Carousel = Object.assign(CarouselRoot, {\n  Item: CarouselItem,\n  Indicators: CarouselIndicators,\n});\n"],"mappings":"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"}

package/dist/esm/components/Form/FormBase.mjs

@@ -10,7 +10,7 @@ const awaitFunction = async (fn) => {
 	if (fn && typeof fn.then === "function") return await fn;
 	return fn;
 };
-const Form = ({ schema, onSubmit: onSubmitProp, onSubmitSuccess: onSubmitSuccessProp, onSubmitError: onSubmitErrorProp, className, children, autoComplete, ...props }) => {
+const Form = ({ schema, onSubmit: onSubmitProp, onSubmitSuccess: onSubmitSuccessProp, onSubmitError: onSubmitErrorProp, className, children, autoComplete, method, ...props }) => {
 	const onSubmit = async (values) => {
 		const parsedValues = schema?.safeParse(values) ?? {
 			success: true,
@@ -27,6 +27,7 @@ const Form = ({ schema, onSubmit: onSubmitProp, onSubmitSuccess: onSubmitSuccess
 			onSubmit: props.handleSubmit(onSubmit),
 			autoComplete: autoComplete ? "on" : "off",
 			noValidate: true,
+			method,
 			children
 		})
 	});

package/dist/esm/components/Form/FormBase.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormBase.mjs","names":["useFormReactHookForm"],"sources":["../../../../src/components/Form/FormBase.tsx"],"sourcesContent":["'use client';\n\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { cn } from '@utils/cn';\nimport type { HTMLAttributes } from 'react';\nimport {\n  FormProvider,\n  type FormProviderProps,\n  type UseFormProps,\n  useForm as useFormReactHookForm,\n  useFormState,\n} from 'react-hook-form';\nimport type { ZodObject, z } from 'zod/v4';\n\ntype FormProps<T extends ZodObject> = HTMLAttributes<HTMLFormElement> &\n  FormProviderProps<z.infer<T>> & {\n    schema?: T;\n    onSubmit?: (data: z.infer<T>) => void | Promise<void>;\n    onSubmitSuccess?: (data: z.infer<T>) => void | Promise<void>;\n    onSubmitError?: (error: Error) => void | Promise<void>;\n    autoComplete?: boolean;\n  };\n\nconst awaitFunction = async (fn: any) => {\n  // Check if result is a Promise (Thenable)\n\n  if (fn && typeof fn.then === 'function') {\n    // It's a Promise, so wait for it to resolve\n    return await fn;\n  }\n  // If not a Promise, it will just execute without awaiting\n  return fn;\n};\n\nexport const Form = <T extends ZodObject>({\n  schema,\n  onSubmit: onSubmitProp,\n  onSubmitSuccess: onSubmitSuccessProp,\n  onSubmitError: onSubmitErrorProp,\n  className,\n  children,\n  autoComplete,\n  ...props\n}: FormProps<T>) => {\n  const onSubmit = async (values: z.infer<T>) => {\n    const parsedValues = schema?.safeParse(values) ?? {\n      success: true,\n      data: undefined,\n    };\n\n    // onSubmitProp?.(values);\n    await awaitFunction(onSubmitProp?.(values));\n\n    if (parsedValues.success) {\n      await awaitFunction(onSubmitSuccessProp?.(parsedValues.data!));\n    } else {\n      await awaitFunction(\n        onSubmitErrorProp?.(\n          new Error(\n            parsedValues.error.issues.map((error) => error.message).join(', ')\n          )\n        )\n      );\n    }\n  };\n\n  return (\n    <FormProvider {...props}>\n      <form\n        className={cn('flex flex-col gap-y-6', className)}\n        onSubmit={props.handleSubmit(onSubmit)}\n        autoComplete={autoComplete ? 'on' : 'off'}\n        noValidate\n      >\n        {children}\n      </form>\n    </FormProvider>\n  );\n};\n\nexport const useForm = <T extends ZodObject>(\n  schema: T,\n  props?: UseFormProps<z.infer<T>>\n) => {\n  const form = useFormReactHookForm<z.infer<T>>({\n    resolver: zodResolver(schema as any),\n    ...props,\n  });\n\n  const { isSubmitting, isSubmitted, isLoading, isValid } = useFormState({\n    control: form.control,\n  });\n\n  return {\n    form,\n    isSubmitting,\n    isSubmitted,\n    isLoading,\n    isValid,\n  };\n};\n"],"mappings":";;;;;;;;AAuBA,MAAM,gBAAgB,OAAO,OAAY;CAGvC,IAAI,MAAM,OAAO,GAAG,SAAS,YAE3B,OAAO,MAAM;CAGf,OAAO;AACT;AAEA,MAAa,QAA6B,EACxC,QACA,UAAU,cACV,iBAAiB,qBACjB,eAAe,mBACf,WACA,UACA,cACA,GAAG,YACe;CAClB,MAAM,WAAW,OAAO,WAAuB;EAC7C,MAAM,eAAe,QAAQ,UAAU,MAAM,KAAK;GAChD,SAAS;GACT,MAAM;EACR;EAGA,MAAM,cAAc,eAAe,MAAM,CAAC;EAE1C,IAAI,aAAa,SACf,MAAM,cAAc,sBAAsB,aAAa,IAAK,CAAC;OAE7D,MAAM,cACJ,oBACE,IAAI,MACF,aAAa,MAAM,OAAO,KAAK,UAAU,MAAM,OAAO,EAAE,KAAK,IAAI,CACnE,CACF,CACF;CAEJ;CAEA,OACE,oBAAC,cAAD;EAAc,GAAI;YAChB,oBAAC,QAAD;GACE,WAAW,GAAG,yBAAyB,SAAS;GAChD,UAAU,MAAM,aAAa,QAAQ;GACrC,cAAc,eAAe,OAAO;GACpC;GAEC;EACG;CACM;AAElB;AAEA,MAAa,WACX,QACA,UACG;CACH,MAAM,OAAOA,UAAiC;EAC5C,UAAU,YAAY,MAAa;EACnC,GAAG;CACL,CAAC;CAED,MAAM,EAAE,cAAc,aAAa,WAAW,YAAY,aAAa,EACrE,SAAS,KAAK,QAChB,CAAC;CAED,OAAO;EACL;EACA;EACA;EACA;EACA;CACF;AACF"}
+{"version":3,"file":"FormBase.mjs","names":["useFormReactHookForm"],"sources":["../../../../src/components/Form/FormBase.tsx"],"sourcesContent":["'use client';\n\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { cn } from '@utils/cn';\nimport type { HTMLAttributes } from 'react';\nimport {\n  FormProvider,\n  type FormProviderProps,\n  type UseFormProps,\n  useForm as useFormReactHookForm,\n  useFormState,\n} from 'react-hook-form';\nimport type { ZodObject, z } from 'zod/v4';\n\ntype FormProps<T extends ZodObject> = HTMLAttributes<HTMLFormElement> &\n  FormProviderProps<z.infer<T>> & {\n    schema?: T;\n    onSubmit?: (data: z.infer<T>) => void | Promise<void>;\n    onSubmitSuccess?: (data: z.infer<T>) => void | Promise<void>;\n    onSubmitError?: (error: Error) => void | Promise<void>;\n    autoComplete?: boolean;\n  };\n\nconst awaitFunction = async (fn: any) => {\n  // Check if result is a Promise (Thenable)\n\n  if (fn && typeof fn.then === 'function') {\n    // It's a Promise, so wait for it to resolve\n    return await fn;\n  }\n  // If not a Promise, it will just execute without awaiting\n  return fn;\n};\n\nexport const Form = <T extends ZodObject>({\n  schema,\n  onSubmit: onSubmitProp,\n  onSubmitSuccess: onSubmitSuccessProp,\n  onSubmitError: onSubmitErrorProp,\n  className,\n  children,\n  autoComplete,\n  method,\n  ...props\n}: FormProps<T> & { method?: string }) => {\n  const onSubmit = async (values: z.infer<T>) => {\n    const parsedValues = schema?.safeParse(values) ?? {\n      success: true,\n      data: undefined,\n    };\n\n    // onSubmitProp?.(values);\n    await awaitFunction(onSubmitProp?.(values));\n\n    if (parsedValues.success) {\n      await awaitFunction(onSubmitSuccessProp?.(parsedValues.data!));\n    } else {\n      await awaitFunction(\n        onSubmitErrorProp?.(\n          new Error(\n            parsedValues.error.issues.map((error) => error.message).join(', ')\n          )\n        )\n      );\n    }\n  };\n\n  return (\n    <FormProvider {...props}>\n      <form\n        className={cn('flex flex-col gap-y-6', className)}\n        onSubmit={props.handleSubmit(onSubmit)}\n        autoComplete={autoComplete ? 'on' : 'off'}\n        noValidate\n        method={method}\n      >\n        {children}\n      </form>\n    </FormProvider>\n  );\n};\n\nexport const useForm = <T extends ZodObject>(\n  schema: T,\n  props?: UseFormProps<z.infer<T>>\n) => {\n  const form = useFormReactHookForm<z.infer<T>>({\n    resolver: zodResolver(schema as any),\n    ...props,\n  });\n\n  const { isSubmitting, isSubmitted, isLoading, isValid } = useFormState({\n    control: form.control,\n  });\n\n  return {\n    form,\n    isSubmitting,\n    isSubmitted,\n    isLoading,\n    isValid,\n  };\n};\n"],"mappings":";;;;;;;;AAuBA,MAAM,gBAAgB,OAAO,OAAY;CAGvC,IAAI,MAAM,OAAO,GAAG,SAAS,YAE3B,OAAO,MAAM;CAGf,OAAO;AACT;AAEA,MAAa,QAA6B,EACxC,QACA,UAAU,cACV,iBAAiB,qBACjB,eAAe,mBACf,WACA,UACA,cACA,QACA,GAAG,YACqC;CACxC,MAAM,WAAW,OAAO,WAAuB;EAC7C,MAAM,eAAe,QAAQ,UAAU,MAAM,KAAK;GAChD,SAAS;GACT,MAAM;EACR;EAGA,MAAM,cAAc,eAAe,MAAM,CAAC;EAE1C,IAAI,aAAa,SACf,MAAM,cAAc,sBAAsB,aAAa,IAAK,CAAC;OAE7D,MAAM,cACJ,oBACE,IAAI,MACF,aAAa,MAAM,OAAO,KAAK,UAAU,MAAM,OAAO,EAAE,KAAK,IAAI,CACnE,CACF,CACF;CAEJ;CAEA,OACE,oBAAC,cAAD;EAAc,GAAI;YAChB,oBAAC,QAAD;GACE,WAAW,GAAG,yBAAyB,SAAS;GAChD,UAAU,MAAM,aAAa,QAAQ;GACrC,cAAc,eAAe,OAAO;GACpC;GACQ;GAEP;EACG;CACM;AAElB;AAEA,MAAa,WACX,QACA,UACG;CACH,MAAM,OAAOA,UAAiC;EAC5C,UAAU,YAAY,MAAa;EACnC,GAAG;CACL,CAAC;CAED,MAAM,EAAE,cAAc,aAAa,WAAW,YAAY,aAAa,EACrE,SAAS,KAAK,QAChB,CAAC;CAED,OAAO;EACL;EACA;EACA;EACA;EACA;CACF;AACF"}

package/dist/esm/components/IDE/Code.mjs

@@ -28,7 +28,7 @@ const parseFormats = (raw) => {
 	} catch {}
 	return [raw];
 };
-const Code = ({ children, language, isDarkMode, showHeader = true, showLineNumbers = true, className, fileName, packageManager, codeFormat: rawCodeFormat, contentDeclarationFormat: rawContentDeclarationFormat, isRollable = true, ...props }) => {
+const Code = ({ children, language, isDarkMode, showHeader = true, showLineNumbers = true, className, fileName, packageManager, codeFormat: rawCodeFormat, contentDeclarationFormat: rawContentDeclarationFormat, isRollable = true, lang, ...props }) => {
 	const { codeFormat: selectedCodeFormat, contentDeclarationFormat: selectedContentDeclarationFormat } = useCodeContext();
 	const codeFormats = useMemo(() => parseFormats(rawCodeFormat), [rawCodeFormat]);
 	const contentFormats = useMemo(() => parseFormats(rawContentDeclarationFormat), [rawContentDeclarationFormat]);

package/dist/esm/components/IDE/Code.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Code.mjs","names":[],"sources":["../../../../src/components/IDE/Code.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport type { FC, HTMLAttributes, ReactNode } from 'react';\nimport { useEffect, useMemo, useState } from 'react';\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport { Container } from '../Container';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { CodeBlock } from './CodeBlockClient';\nimport { CodeBlockHighlight } from './CodeBlockHighlight';\nimport { CodeConditionalRender } from './CodeConditionalRenderer';\nimport type {\n  CodeFormat,\n  ContentDeclarationFormat,\n  PackageManager,\n} from './CodeContext';\nimport { useCodeContext } from './CodeContext';\nimport { CodeFormatSelector } from './CodeFormatSelector';\nimport { ContentDeclarationFormatSelector } from './ContentDeclarationFormatSelector';\nimport { CopyCode } from './CopyCode';\nimport { PackageManagerSelector } from './PackageManagerSelector';\n\nexport type CodeCompAttributes = {\n  fileName?: string;\n  packageManager?: PackageManager;\n  /** Single format, a JSON-array string, or an array of formats. */\n  codeFormat?: CodeFormat | string | string[];\n  contentDeclarationFormat?: ContentDeclarationFormat | string | string[];\n};\n\ntype CodeCompProps = {\n  children: ReactNode;\n  fileName?: string;\n  language: BundledLanguage;\n  isDarkMode?: boolean;\n  showHeader?: boolean;\n  showLineNumbers?: boolean;\n  isRollable?: boolean;\n} & CodeCompAttributes &\n  HTMLAttributes<HTMLDivElement>;\n\nconst MIN_HEIGHT = 700;\n\n/** Languages that use JSX syntax — CommonJS doesn't make sense for these. */\nconst JSX_LANGUAGES = new Set(['tsx', 'jsx']);\n\n/** Parse a codeFormat prop that may be a single value, a JSON-array string, or already an array. */\nconst parseFormats = (\n  raw: string | string[] | undefined\n): CodeFormat[] | undefined => {\n  if (!raw) return undefined;\n  if (Array.isArray(raw)) return raw as CodeFormat[];\n  if (typeof raw === 'string' && raw.startsWith('[')) {\n    try {\n      const parsed = JSON.parse(raw);\n      if (Array.isArray(parsed)) return parsed as CodeFormat[];\n    } catch {\n      /* ignore */\n    }\n  }\n  return [raw as CodeFormat];\n};\n\nexport const Code: FC<CodeCompProps> = ({\n  children,\n  language,\n  isDarkMode,\n  showHeader = true,\n  showLineNumbers = true,\n  className,\n  fileName,\n  packageManager,\n  codeFormat: rawCodeFormat,\n  contentDeclarationFormat: rawContentDeclarationFormat,\n  isRollable = true,\n  ...props\n}) => {\n  const {\n    codeFormat: selectedCodeFormat,\n    contentDeclarationFormat: selectedContentDeclarationFormat,\n  } = useCodeContext();\n\n  // Parse whichever attribute is present as an array of formats.\n  const codeFormats = useMemo(\n    () => parseFormats(rawCodeFormat as string | undefined),\n    [rawCodeFormat]\n  );\n  const contentFormats = useMemo(\n    () => parseFormats(rawContentDeclarationFormat as string | undefined),\n    [rawContentDeclarationFormat]\n  );\n\n  // A block is \"multi-format\" when it has multiple formats including TypeScript\n  // (the canonical source). Such blocks transform at runtime.\n  const isMultiCodeFormat =\n    codeFormats !== undefined &&\n    codeFormats.length > 1 &&\n    codeFormats.includes('typescript');\n\n  const isMultiContentFormat =\n    contentFormats !== undefined &&\n    contentFormats.length > 1 &&\n    contentFormats.includes('typescript');\n\n  const isMultiFormat = isMultiCodeFormat || isMultiContentFormat;\n\n  // Determine which context format drives this block's selection.\n  // content declaration blocks use selectedContentDeclarationFormat;\n  // regular code blocks use selectedCodeFormat.\n  const selectedFormat: CodeFormat = isMultiContentFormat\n    ? (selectedContentDeclarationFormat as CodeFormat)\n    : selectedCodeFormat;\n\n  // The formats actually relevant for transformation (no 'json', no 'commonjs' for JSX).\n  const effectiveFormats = useMemo<CodeFormat[] | undefined>(() => {\n    const base = isMultiContentFormat ? contentFormats : codeFormats;\n    if (!base) return base;\n    let filtered = base.filter((f) => f !== 'json') as CodeFormat[];\n    if (JSX_LANGUAGES.has(language as string)) {\n      filtered = filtered.filter((f) => f !== 'commonjs');\n    }\n    return filtered;\n  }, [isMultiContentFormat, contentFormats, codeFormats, language]);\n\n  // When the globally-selected format isn't valid for this block\n  // (e.g. CJS selected but this is a JSX file), fall back to the last valid one.\n  const resolvedFormat: Exclude<CodeFormat, 'json'> = useMemo(() => {\n    if (!effectiveFormats || effectiveFormats.includes(selectedFormat)) {\n      return selectedFormat as Exclude<CodeFormat, 'json'>;\n    }\n    return (effectiveFormats[effectiveFormats.length - 1] ??\n      'typescript') as Exclude<CodeFormat, 'json'>;\n  }, [effectiveFormats, selectedFormat]);\n\n  // ── Async filename derivation (dynamic import of transformer) ──────────────\n  // We derive the displayed fileName so the header updates when format changes.\n  // deriveFileName is tiny but it lives inside codeTransformer, which is only\n  // imported when actually needed (non-TypeScript selection).\n  const [displayedFileName, setDisplayedFileName] = useState<\n    string | undefined\n  >(fileName);\n\n  useEffect(() => {\n    if (!isMultiFormat || resolvedFormat === 'typescript') {\n      setDisplayedFileName(fileName);\n      return;\n    }\n    if (!fileName) return;\n\n    let cancelled = false;\n    (async () => {\n      const { deriveFileName } = await import('./codeTransformer');\n      if (!cancelled)\n        setDisplayedFileName(deriveFileName(fileName, resolvedFormat));\n    })();\n    return () => {\n      cancelled = true;\n    };\n  }, [fileName, isMultiFormat, resolvedFormat]);\n\n  // ── Async copy text (transformed code for CopyCode) ───────────────────────\n  const rawCode = useMemo(() => {\n    const code = Array.isArray(children) ? children.join('') : String(children);\n    return code.endsWith('\\n') ? code.slice(0, -1) : code;\n  }, [children]);\n\n  const [copyCode, setCopyCode] = useState<string>(rawCode);\n\n  useEffect(() => {\n    if (!isMultiFormat || resolvedFormat === 'typescript') {\n      setCopyCode(rawCode);\n      return;\n    }\n    let cancelled = false;\n    (async () => {\n      const { transformCode } = await import('./codeTransformer');\n      if (!cancelled) setCopyCode(transformCode(rawCode, resolvedFormat));\n    })();\n    return () => {\n      cancelled = true;\n    };\n  }, [rawCode, isMultiFormat, resolvedFormat]);\n\n  const hadSelectInHeader =\n    packageManager || rawCodeFormat || rawContentDeclarationFormat;\n\n  return (\n    <CodeConditionalRender\n      packageManager={packageManager}\n      codeFormat={rawCodeFormat as string | undefined}\n      contentDeclarationFormat={\n        rawContentDeclarationFormat as string | undefined\n      }\n    >\n      <Container\n        className={cn(\n          'relative min-w-0 max-w-full text-sm leading-6',\n          showLineNumbers && 'with-line-number ml-0',\n          className\n        )}\n        transparency=\"lg\"\n        {...props}\n      >\n        {showHeader && (\n          <>\n            <div className=\"grid w-full grid-cols-[1fr_auto] items-center justify-between rounded-t-xl bg-card/50 py-1.5 pr-12 pl-4 text-neutral text-xs\">\n              <span className=\"truncate\">{displayedFileName ?? language}</span>\n              <div className=\"flex items-center gap-2\">\n                {packageManager && <PackageManagerSelector />}\n                {rawCodeFormat && (\n                  <CodeFormatSelector availableFormats={effectiveFormats} />\n                )}\n                {rawContentDeclarationFormat && (\n                  <ContentDeclarationFormatSelector />\n                )}\n              </div>\n            </div>\n            <div className=\"sticky top-46 z-20\">\n              <div\n                className={cn(\n                  'absolute right-2 bottom-0 flex h-7 items-center',\n                  hadSelectInHeader && 'h-11'\n                )}\n              >\n                <CopyCode code={copyCode} />\n              </div>\n            </div>\n          </>\n        )}\n        <ExpandCollapse\n          minHeight={MIN_HEIGHT}\n          isRollable={isRollable}\n          className=\"min-w-0 max-w-full overflow-x-auto p-2\"\n        >\n          {isMultiFormat ? (\n            /*\n             * Multi-format: CodeBlockHighlight manages both the transformation\n             * (dynamic import of codeTransformer) and the Shiki highlighting in\n             * a single useEffect. The previous highlighted output stays visible\n             * while the new one loads — no white-text flash.\n             */\n            <CodeBlockHighlight\n              originalLang={language}\n              targetFormat={resolvedFormat}\n              isDarkMode={isDarkMode}\n            >\n              {rawCode}\n            </CodeBlockHighlight>\n          ) : (\n            /*\n             * Single-format: use the original Suspense-based async Shiki renderer\n             * (good for SSR / static content).\n             */\n            <CodeBlock lang={language} isDarkMode={isDarkMode}>\n              {rawCode}\n            </CodeBlock>\n          )}\n        </ExpandCollapse>\n      </Container>\n    </CodeConditionalRender>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Code.mjs","names":[],"sources":["../../../../src/components/IDE/Code.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport type { FC, HTMLAttributes, ReactNode } from 'react';\nimport { useEffect, useMemo, useState } from 'react';\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport { Container } from '../Container';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { CodeBlock } from './CodeBlockClient';\nimport { CodeBlockHighlight } from './CodeBlockHighlight';\nimport { CodeConditionalRender } from './CodeConditionalRenderer';\nimport type {\n  CodeFormat,\n  ContentDeclarationFormat,\n  PackageManager,\n} from './CodeContext';\nimport { useCodeContext } from './CodeContext';\nimport { CodeFormatSelector } from './CodeFormatSelector';\nimport { ContentDeclarationFormatSelector } from './ContentDeclarationFormatSelector';\nimport { CopyCode } from './CopyCode';\nimport { PackageManagerSelector } from './PackageManagerSelector';\n\nexport type CodeCompAttributes = {\n  fileName?: string;\n  packageManager?: PackageManager;\n  /** Single format, a JSON-array string, or an array of formats. */\n  codeFormat?: CodeFormat | string | string[];\n  contentDeclarationFormat?: ContentDeclarationFormat | string | string[];\n};\n\ntype CodeCompProps = {\n  children: ReactNode;\n  fileName?: string;\n  language: BundledLanguage;\n  isDarkMode?: boolean;\n  showHeader?: boolean;\n  showLineNumbers?: boolean;\n  isRollable?: boolean;\n} & CodeCompAttributes &\n  HTMLAttributes<HTMLDivElement>;\n\nconst MIN_HEIGHT = 700;\n\n/** Languages that use JSX syntax — CommonJS doesn't make sense for these. */\nconst JSX_LANGUAGES = new Set(['tsx', 'jsx']);\n\n/** Parse a codeFormat prop that may be a single value, a JSON-array string, or already an array. */\nconst parseFormats = (\n  raw: string | string[] | undefined\n): CodeFormat[] | undefined => {\n  if (!raw) return undefined;\n  if (Array.isArray(raw)) return raw as CodeFormat[];\n  if (typeof raw === 'string' && raw.startsWith('[')) {\n    try {\n      const parsed = JSON.parse(raw);\n      if (Array.isArray(parsed)) return parsed as CodeFormat[];\n    } catch {\n      /* ignore */\n    }\n  }\n  return [raw as CodeFormat];\n};\n\nexport const Code: FC<CodeCompProps> = ({\n  children,\n  language,\n  isDarkMode,\n  showHeader = true,\n  showLineNumbers = true,\n  className,\n  fileName,\n  packageManager,\n  codeFormat: rawCodeFormat,\n  contentDeclarationFormat: rawContentDeclarationFormat,\n  isRollable = true,\n  lang, // Destructure html lang prop to prevent passing invalid BCP-47 language tag to Code component\n  ...props\n}) => {\n  const {\n    codeFormat: selectedCodeFormat,\n    contentDeclarationFormat: selectedContentDeclarationFormat,\n  } = useCodeContext();\n\n  // Parse whichever attribute is present as an array of formats.\n  const codeFormats = useMemo(\n    () => parseFormats(rawCodeFormat as string | undefined),\n    [rawCodeFormat]\n  );\n  const contentFormats = useMemo(\n    () => parseFormats(rawContentDeclarationFormat as string | undefined),\n    [rawContentDeclarationFormat]\n  );\n\n  // A block is \"multi-format\" when it has multiple formats including TypeScript\n  // (the canonical source). Such blocks transform at runtime.\n  const isMultiCodeFormat =\n    codeFormats !== undefined &&\n    codeFormats.length > 1 &&\n    codeFormats.includes('typescript');\n\n  const isMultiContentFormat =\n    contentFormats !== undefined &&\n    contentFormats.length > 1 &&\n    contentFormats.includes('typescript');\n\n  const isMultiFormat = isMultiCodeFormat || isMultiContentFormat;\n\n  // Determine which context format drives this block's selection.\n  // content declaration blocks use selectedContentDeclarationFormat;\n  // regular code blocks use selectedCodeFormat.\n  const selectedFormat: CodeFormat = isMultiContentFormat\n    ? (selectedContentDeclarationFormat as CodeFormat)\n    : selectedCodeFormat;\n\n  // The formats actually relevant for transformation (no 'json', no 'commonjs' for JSX).\n  const effectiveFormats = useMemo<CodeFormat[] | undefined>(() => {\n    const base = isMultiContentFormat ? contentFormats : codeFormats;\n    if (!base) return base;\n    let filtered = base.filter((f) => f !== 'json') as CodeFormat[];\n    if (JSX_LANGUAGES.has(language as string)) {\n      filtered = filtered.filter((f) => f !== 'commonjs');\n    }\n    return filtered;\n  }, [isMultiContentFormat, contentFormats, codeFormats, language]);\n\n  // When the globally-selected format isn't valid for this block\n  // (e.g. CJS selected but this is a JSX file), fall back to the last valid one.\n  const resolvedFormat: Exclude<CodeFormat, 'json'> = useMemo(() => {\n    if (!effectiveFormats || effectiveFormats.includes(selectedFormat)) {\n      return selectedFormat as Exclude<CodeFormat, 'json'>;\n    }\n    return (effectiveFormats[effectiveFormats.length - 1] ??\n      'typescript') as Exclude<CodeFormat, 'json'>;\n  }, [effectiveFormats, selectedFormat]);\n\n  // ── Async filename derivation (dynamic import of transformer) ──────────────\n  // We derive the displayed fileName so the header updates when format changes.\n  // deriveFileName is tiny but it lives inside codeTransformer, which is only\n  // imported when actually needed (non-TypeScript selection).\n  const [displayedFileName, setDisplayedFileName] = useState<\n    string | undefined\n  >(fileName);\n\n  useEffect(() => {\n    if (!isMultiFormat || resolvedFormat === 'typescript') {\n      setDisplayedFileName(fileName);\n      return;\n    }\n    if (!fileName) return;\n\n    let cancelled = false;\n    (async () => {\n      const { deriveFileName } = await import('./codeTransformer');\n      if (!cancelled)\n        setDisplayedFileName(deriveFileName(fileName, resolvedFormat));\n    })();\n    return () => {\n      cancelled = true;\n    };\n  }, [fileName, isMultiFormat, resolvedFormat]);\n\n  // ── Async copy text (transformed code for CopyCode) ───────────────────────\n  const rawCode = useMemo(() => {\n    const code = Array.isArray(children) ? children.join('') : String(children);\n    return code.endsWith('\\n') ? code.slice(0, -1) : code;\n  }, [children]);\n\n  const [copyCode, setCopyCode] = useState<string>(rawCode);\n\n  useEffect(() => {\n    if (!isMultiFormat || resolvedFormat === 'typescript') {\n      setCopyCode(rawCode);\n      return;\n    }\n    let cancelled = false;\n    (async () => {\n      const { transformCode } = await import('./codeTransformer');\n      if (!cancelled) setCopyCode(transformCode(rawCode, resolvedFormat));\n    })();\n    return () => {\n      cancelled = true;\n    };\n  }, [rawCode, isMultiFormat, resolvedFormat]);\n\n  const hadSelectInHeader =\n    packageManager || rawCodeFormat || rawContentDeclarationFormat;\n\n  return (\n    <CodeConditionalRender\n      packageManager={packageManager}\n      codeFormat={rawCodeFormat as string | undefined}\n      contentDeclarationFormat={\n        rawContentDeclarationFormat as string | undefined\n      }\n    >\n      <Container\n        className={cn(\n          'relative min-w-0 max-w-full text-sm leading-6',\n          showLineNumbers && 'with-line-number ml-0',\n          className\n        )}\n        transparency=\"lg\"\n        {...props}\n      >\n        {showHeader && (\n          <>\n            <div className=\"grid w-full grid-cols-[1fr_auto] items-center justify-between rounded-t-xl bg-card/50 py-1.5 pr-12 pl-4 text-neutral text-xs\">\n              <span className=\"truncate\">{displayedFileName ?? language}</span>\n              <div className=\"flex items-center gap-2\">\n                {packageManager && <PackageManagerSelector />}\n                {rawCodeFormat && (\n                  <CodeFormatSelector availableFormats={effectiveFormats} />\n                )}\n                {rawContentDeclarationFormat && (\n                  <ContentDeclarationFormatSelector />\n                )}\n              </div>\n            </div>\n            <div className=\"sticky top-46 z-20\">\n              <div\n                className={cn(\n                  'absolute right-2 bottom-0 flex h-7 items-center',\n                  hadSelectInHeader && 'h-11'\n                )}\n              >\n                <CopyCode code={copyCode} />\n              </div>\n            </div>\n          </>\n        )}\n        <ExpandCollapse\n          minHeight={MIN_HEIGHT}\n          isRollable={isRollable}\n          className=\"min-w-0 max-w-full overflow-x-auto p-2\"\n        >\n          {isMultiFormat ? (\n            /*\n             * Multi-format: CodeBlockHighlight manages both the transformation\n             * (dynamic import of codeTransformer) and the Shiki highlighting in\n             * a single useEffect. The previous highlighted output stays visible\n             * while the new one loads — no white-text flash.\n             */\n            <CodeBlockHighlight\n              originalLang={language}\n              targetFormat={resolvedFormat}\n              isDarkMode={isDarkMode}\n            >\n              {rawCode}\n            </CodeBlockHighlight>\n          ) : (\n            /*\n             * Single-format: use the original Suspense-based async Shiki renderer\n             * (good for SSR / static content).\n             */\n            <CodeBlock lang={language} isDarkMode={isDarkMode}>\n              {rawCode}\n            </CodeBlock>\n          )}\n        </ExpandCollapse>\n      </Container>\n    </CodeConditionalRender>\n  );\n};\n"],"mappings":"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"}

package/dist/esm/components/IDE/MonacoCode.mjs

@@ -55,7 +55,7 @@ const MonacoCode = ({ children, language, isDarkMode, showLineNumbers, showCopyB
 	};
 	const isShowLineNumbers = showLineNumbers ?? (typeof children === "string" ? children.split("\n").length > 1 : false);
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("relative h-full w-full text-sm", showLineNumbers && "ml-0"),
+		className: cn("relative size-full text-sm", showLineNumbers && "ml-0"),
 		children: [showCopyButton && /* @__PURE__ */ jsx("div", {
 			className: "sticky top-5 z-10",
 			children: /* @__PURE__ */ jsx("div", {

package/dist/esm/components/IDE/MonacoCode.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"MonacoCode.mjs","names":[],"sources":["../../../../src/components/IDE/MonacoCode.tsx"],"sourcesContent":["'use client';\n\nimport type { OnChange, OnMount } from '@monaco-editor/react';\nimport { cn } from '@utils/cn';\nimport { type FC, lazy, Suspense, useRef, useState } from 'react';\nimport { CopyButton } from '../CopyButton';\nimport { Loader } from '../Loader';\n\nconst Editor = lazy(() =>\n  import('@monaco-editor/react').then((mod) => ({ default: mod.Editor }))\n);\n\ntype CodeCompProps = {\n  children: string;\n  language: string;\n  isDarkMode?: boolean;\n  showLineNumbers?: boolean;\n  showCopyButton?: boolean;\n  isReadOnly?: boolean;\n  onChange?: OnChange;\n};\n\nexport const MonacoCode: FC<CodeCompProps> = ({\n  children,\n  language,\n  isDarkMode,\n  showLineNumbers,\n  showCopyButton = true,\n  isReadOnly = false,\n  onChange,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const ideRef = useRef(null);\n  const [editorSize, setEditorSize] = useState<{\n    height: number;\n    width: number;\n  }>({ height: 0, width: 0 });\n\n  const theme = isDarkMode ? 'vs-dark-transparent' : 'hc-light-theme';\n\n  const handleMountIde: OnMount = (editor, monaco) => {\n    // first time you set the height based on content Height\n\n    ideRef.current = editor as any;\n    const contentHeight = (editor.getContentHeight() ?? 0) + 25;\n\n    monaco.editor.defineTheme('vs-dark-transparent', {\n      base: 'vs-dark',\n      inherit: true,\n      rules: [],\n      colors: {\n        'editor.background': '#00000000',\n      },\n    });\n    monaco.editor.defineTheme('hc-light-theme', {\n      base: 'vs',\n      inherit: true,\n      rules: [],\n      colors: {\n        'editor.background': '#00000000',\n      },\n    });\n\n    monaco.editor.setTheme(theme);\n\n    // Disable TypeScript diagnostics\n    monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({\n      noSemanticValidation: true, // Disables type checking\n      noSyntaxValidation: true, // Disables syntax errors\n    });\n\n    // Disable JavaScript diagnostics\n    monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({\n      noSemanticValidation: true,\n      noSyntaxValidation: true,\n    });\n\n    // Disable unnecessary language features (e.g., suggestions, quick fixes)\n    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({\n      noLib: true,\n      allowNonTsExtensions: true,\n    });\n\n    monaco.languages.typescript.javascriptDefaults.setCompilerOptions({\n      noLib: true,\n      allowNonTsExtensions: true,\n    });\n\n    setEditorSize({\n      height: contentHeight,\n      width: containerRef.current?.clientWidth ?? 0,\n    });\n  };\n\n  const isShowLineNumbers =\n    showLineNumbers ??\n    (typeof children === 'string' ? children.split('\\n').length > 1 : false);\n\n  return (\n    <div\n      className={cn(\n        'relative h-full w-full text-sm',\n        showLineNumbers && 'ml-0'\n      )}\n    >\n      {showCopyButton && (\n        <div className=\"sticky top-5 z-10\">\n          <div\n            className={cn('absolute right-2 bottom-0 flex h-7 items-center')}\n          >\n            <CopyButton content={children} />\n          </div>\n        </div>\n      )}\n      <div\n        className=\"z-0 grid size-full grid-cols-[0px] overflow-auto\"\n        ref={containerRef}\n      >\n        <Suspense fallback={<Loader />}>\n          <Editor\n            {...editorSize}\n            defaultLanguage=\"typescript\"\n            language={language}\n            loading={<Loader />}\n            defaultValue={String(children).replace(/\\n$/, '')}\n            onMount={handleMountIde}\n            onChange={onChange}\n            options={{\n              contextmenu: false,\n              readOnly: isReadOnly,\n              cursorStyle: 'line',\n              minimap: { enabled: false },\n              scrollbar: {\n                vertical: 'hidden',\n                verticalScrollbarSize: 0,\n                alwaysConsumeMouseWheel: false,\n              },\n              folding: false, // Disable code folding\n              renderValidationDecorations: 'off', // Disable error/warning decorations\n              quickSuggestions: false, // Disable IntelliSense\n              parameterHints: { enabled: false }, // Disable parameter hints\n              suggestOnTriggerCharacters: false, // Disable suggestions on typing\n\n              mouseWheelScrollSensitivity: 0,\n              fastScrollSensitivity: 0,\n              scrollBeyondLastLine: false,\n              lineNumbers: isShowLineNumbers ? 'on' : 'off',\n            }}\n            theme={theme}\n            className=\"my-2 rounded-md\"\n          />\n        </Suspense>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AAQA,MAAM,SAAS,WACb,OAAO,wBAAwB,MAAM,SAAS,EAAE,SAAS,IAAI,OAAO,EAAE,CACxE;AAYA,MAAa,cAAiC,EAC5C,UACA,UACA,YACA,iBACA,iBAAiB,MACjB,aAAa,OACb,eACI;CACJ,MAAM,eAAe,OAAuB,IAAI;CAChD,MAAM,SAAS,OAAO,IAAI;CAC1B,MAAM,CAAC,YAAY,iBAAiB,SAGjC;EAAE,QAAQ;EAAG,OAAO;CAAE,CAAC;CAE1B,MAAM,QAAQ,aAAa,wBAAwB;CAEnD,MAAM,kBAA2B,QAAQ,WAAW;EAGlD,OAAO,UAAU;EACjB,MAAM,iBAAiB,OAAO,iBAAiB,KAAK,KAAK;EAEzD,OAAO,OAAO,YAAY,uBAAuB;GAC/C,MAAM;GACN,SAAS;GACT,OAAO,CAAC;GACR,QAAQ,EACN,qBAAqB,YACvB;EACF,CAAC;EACD,OAAO,OAAO,YAAY,kBAAkB;GAC1C,MAAM;GACN,SAAS;GACT,OAAO,CAAC;GACR,QAAQ,EACN,qBAAqB,YACvB;EACF,CAAC;EAED,OAAO,OAAO,SAAS,KAAK;EAG5B,OAAO,UAAU,WAAW,mBAAmB,sBAAsB;GACnE,sBAAsB;GACtB,oBAAoB;EACtB,CAAC;EAGD,OAAO,UAAU,WAAW,mBAAmB,sBAAsB;GACnE,sBAAsB;GACtB,oBAAoB;EACtB,CAAC;EAGD,OAAO,UAAU,WAAW,mBAAmB,mBAAmB;GAChE,OAAO;GACP,sBAAsB;EACxB,CAAC;EAED,OAAO,UAAU,WAAW,mBAAmB,mBAAmB;GAChE,OAAO;GACP,sBAAsB;EACxB,CAAC;EAED,cAAc;GACZ,QAAQ;GACR,OAAO,aAAa,SAAS,eAAe;EAC9C,CAAC;CACH;CAEA,MAAM,oBACJ,oBACC,OAAO,aAAa,WAAW,SAAS,MAAM,IAAI,EAAE,SAAS,IAAI;CAEpE,OACE,qBAAC,OAAD;EACE,WAAW,GACT,kCACA,mBAAmB,MACrB;YAJF,CAMG,kBACC,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,OAAD;IACE,WAAW,GAAG,iDAAiD;cAE/D,oBAAC,YAAD,EAAY,SAAS,SAAW;GAC7B;EACF,IAEP,oBAAC,OAAD;GACE,WAAU;GACV,KAAK;aAEL,oBAAC,UAAD;IAAU,UAAU,oBAAC,QAAD,CAAS;cAC3B,oBAAC,QAAD;KACE,GAAI;KACJ,iBAAgB;KACN;KACV,SAAS,oBAAC,QAAD,CAAS;KAClB,cAAc,OAAO,QAAQ,EAAE,QAAQ,OAAO,EAAE;KAChD,SAAS;KACC;KACV,SAAS;MACP,aAAa;MACb,UAAU;MACV,aAAa;MACb,SAAS,EAAE,SAAS,MAAM;MAC1B,WAAW;OACT,UAAU;OACV,uBAAuB;OACvB,yBAAyB;MAC3B;MACA,SAAS;MACT,6BAA6B;MAC7B,kBAAkB;MAClB,gBAAgB,EAAE,SAAS,MAAM;MACjC,4BAA4B;MAE5B,6BAA6B;MAC7B,uBAAuB;MACvB,sBAAsB;MACtB,aAAa,oBAAoB,OAAO;KAC1C;KACO;KACP,WAAU;IACX;GACO;EACP,EACF;;AAET"}
+{"version":3,"file":"MonacoCode.mjs","names":[],"sources":["../../../../src/components/IDE/MonacoCode.tsx"],"sourcesContent":["'use client';\n\nimport type { OnChange, OnMount } from '@monaco-editor/react';\nimport { cn } from '@utils/cn';\nimport { type FC, lazy, Suspense, useRef, useState } from 'react';\nimport { CopyButton } from '../CopyButton';\nimport { Loader } from '../Loader';\n\nconst Editor = lazy(() =>\n  import('@monaco-editor/react').then((mod) => ({ default: mod.Editor }))\n);\n\ntype CodeCompProps = {\n  children: string;\n  language: string;\n  isDarkMode?: boolean;\n  showLineNumbers?: boolean;\n  showCopyButton?: boolean;\n  isReadOnly?: boolean;\n  onChange?: OnChange;\n};\n\nexport const MonacoCode: FC<CodeCompProps> = ({\n  children,\n  language,\n  isDarkMode,\n  showLineNumbers,\n  showCopyButton = true,\n  isReadOnly = false,\n  onChange,\n}) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const ideRef = useRef(null);\n  const [editorSize, setEditorSize] = useState<{\n    height: number;\n    width: number;\n  }>({ height: 0, width: 0 });\n\n  const theme = isDarkMode ? 'vs-dark-transparent' : 'hc-light-theme';\n\n  const handleMountIde: OnMount = (editor, monaco) => {\n    // first time you set the height based on content Height\n\n    ideRef.current = editor as any;\n    const contentHeight = (editor.getContentHeight() ?? 0) + 25;\n\n    monaco.editor.defineTheme('vs-dark-transparent', {\n      base: 'vs-dark',\n      inherit: true,\n      rules: [],\n      colors: {\n        'editor.background': '#00000000',\n      },\n    });\n    monaco.editor.defineTheme('hc-light-theme', {\n      base: 'vs',\n      inherit: true,\n      rules: [],\n      colors: {\n        'editor.background': '#00000000',\n      },\n    });\n\n    monaco.editor.setTheme(theme);\n\n    // Disable TypeScript diagnostics\n    monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({\n      noSemanticValidation: true, // Disables type checking\n      noSyntaxValidation: true, // Disables syntax errors\n    });\n\n    // Disable JavaScript diagnostics\n    monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({\n      noSemanticValidation: true,\n      noSyntaxValidation: true,\n    });\n\n    // Disable unnecessary language features (e.g., suggestions, quick fixes)\n    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({\n      noLib: true,\n      allowNonTsExtensions: true,\n    });\n\n    monaco.languages.typescript.javascriptDefaults.setCompilerOptions({\n      noLib: true,\n      allowNonTsExtensions: true,\n    });\n\n    setEditorSize({\n      height: contentHeight,\n      width: containerRef.current?.clientWidth ?? 0,\n    });\n  };\n\n  const isShowLineNumbers =\n    showLineNumbers ??\n    (typeof children === 'string' ? children.split('\\n').length > 1 : false);\n\n  return (\n    <div\n      className={cn('relative size-full text-sm', showLineNumbers && 'ml-0')}\n    >\n      {showCopyButton && (\n        <div className=\"sticky top-5 z-10\">\n          <div\n            className={cn('absolute right-2 bottom-0 flex h-7 items-center')}\n          >\n            <CopyButton content={children} />\n          </div>\n        </div>\n      )}\n      <div\n        className=\"z-0 grid size-full grid-cols-[0px] overflow-auto\"\n        ref={containerRef}\n      >\n        <Suspense fallback={<Loader />}>\n          <Editor\n            {...editorSize}\n            defaultLanguage=\"typescript\"\n            language={language}\n            loading={<Loader />}\n            defaultValue={String(children).replace(/\\n$/, '')}\n            onMount={handleMountIde}\n            onChange={onChange}\n            options={{\n              contextmenu: false,\n              readOnly: isReadOnly,\n              cursorStyle: 'line',\n              minimap: { enabled: false },\n              scrollbar: {\n                vertical: 'hidden',\n                verticalScrollbarSize: 0,\n                alwaysConsumeMouseWheel: false,\n              },\n              folding: false, // Disable code folding\n              renderValidationDecorations: 'off', // Disable error/warning decorations\n              quickSuggestions: false, // Disable IntelliSense\n              parameterHints: { enabled: false }, // Disable parameter hints\n              suggestOnTriggerCharacters: false, // Disable suggestions on typing\n\n              mouseWheelScrollSensitivity: 0,\n              fastScrollSensitivity: 0,\n              scrollBeyondLastLine: false,\n              lineNumbers: isShowLineNumbers ? 'on' : 'off',\n            }}\n            theme={theme}\n            className=\"my-2 rounded-md\"\n          />\n        </Suspense>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;AAQA,MAAM,SAAS,WACb,OAAO,wBAAwB,MAAM,SAAS,EAAE,SAAS,IAAI,OAAO,EAAE,CACxE;AAYA,MAAa,cAAiC,EAC5C,UACA,UACA,YACA,iBACA,iBAAiB,MACjB,aAAa,OACb,eACI;CACJ,MAAM,eAAe,OAAuB,IAAI;CAChD,MAAM,SAAS,OAAO,IAAI;CAC1B,MAAM,CAAC,YAAY,iBAAiB,SAGjC;EAAE,QAAQ;EAAG,OAAO;CAAE,CAAC;CAE1B,MAAM,QAAQ,aAAa,wBAAwB;CAEnD,MAAM,kBAA2B,QAAQ,WAAW;EAGlD,OAAO,UAAU;EACjB,MAAM,iBAAiB,OAAO,iBAAiB,KAAK,KAAK;EAEzD,OAAO,OAAO,YAAY,uBAAuB;GAC/C,MAAM;GACN,SAAS;GACT,OAAO,CAAC;GACR,QAAQ,EACN,qBAAqB,YACvB;EACF,CAAC;EACD,OAAO,OAAO,YAAY,kBAAkB;GAC1C,MAAM;GACN,SAAS;GACT,OAAO,CAAC;GACR,QAAQ,EACN,qBAAqB,YACvB;EACF,CAAC;EAED,OAAO,OAAO,SAAS,KAAK;EAG5B,OAAO,UAAU,WAAW,mBAAmB,sBAAsB;GACnE,sBAAsB;GACtB,oBAAoB;EACtB,CAAC;EAGD,OAAO,UAAU,WAAW,mBAAmB,sBAAsB;GACnE,sBAAsB;GACtB,oBAAoB;EACtB,CAAC;EAGD,OAAO,UAAU,WAAW,mBAAmB,mBAAmB;GAChE,OAAO;GACP,sBAAsB;EACxB,CAAC;EAED,OAAO,UAAU,WAAW,mBAAmB,mBAAmB;GAChE,OAAO;GACP,sBAAsB;EACxB,CAAC;EAED,cAAc;GACZ,QAAQ;GACR,OAAO,aAAa,SAAS,eAAe;EAC9C,CAAC;CACH;CAEA,MAAM,oBACJ,oBACC,OAAO,aAAa,WAAW,SAAS,MAAM,IAAI,EAAE,SAAS,IAAI;CAEpE,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,8BAA8B,mBAAmB,MAAM;YADvE,CAGG,kBACC,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,OAAD;IACE,WAAW,GAAG,iDAAiD;cAE/D,oBAAC,YAAD,EAAY,SAAS,SAAW;GAC7B;EACF,IAEP,oBAAC,OAAD;GACE,WAAU;GACV,KAAK;aAEL,oBAAC,UAAD;IAAU,UAAU,oBAAC,QAAD,CAAS;cAC3B,oBAAC,QAAD;KACE,GAAI;KACJ,iBAAgB;KACN;KACV,SAAS,oBAAC,QAAD,CAAS;KAClB,cAAc,OAAO,QAAQ,EAAE,QAAQ,OAAO,EAAE;KAChD,SAAS;KACC;KACV,SAAS;MACP,aAAa;MACb,UAAU;MACV,aAAa;MACb,SAAS,EAAE,SAAS,MAAM;MAC1B,WAAW;OACT,UAAU;OACV,uBAAuB;OACvB,yBAAyB;MAC3B;MACA,SAAS;MACT,6BAA6B;MAC7B,kBAAkB;MAClB,gBAAgB,EAAE,SAAS,MAAM;MACjC,4BAA4B;MAE5B,6BAA6B;MAC7B,uBAAuB;MACvB,sBAAsB;MACtB,aAAa,oBAAoB,OAAO;KAC1C;KACO;KACP,WAAU;IACX;GACO;EACP,EACF;;AAET"}

package/dist/esm/components/Link/Link.mjs

@@ -186,9 +186,19 @@ const linkVariants = cva("gap-3 transition-all duration-300 focus-visible:outlin
 		size: "md"
 	}
 });
-const checkIsExternalLink = ({ href, isExternalLink: isExternalLinkProp }) => {
-	const isValidHref = typeof href === "string" && href.trim() !== "";
-	return isExternalLinkProp === true || typeof isExternalLinkProp === "undefined" && isValidHref && /^https?:\/\//.test(href);
+const checkIsExternalLink = ({ href, isExternalLink: isExternalLinkProp }, url) => {
+	if (typeof isExternalLinkProp === "boolean") return isExternalLinkProp;
+	if (!(typeof href === "string" && href.trim() !== "")) return false;
+	if (!/^https?:\/\//.test(href)) return false;
+	if (url) try {
+		const hrefHost = new URL(href).hostname;
+		const currentHost = new URL(url.startsWith("http") ? url : `https://${url}`).hostname;
+		const getBaseDomain = (host) => host.split(".").slice(-2).join(".");
+		return getBaseDomain(hrefHost) !== getBaseDomain(currentHost);
+	} catch {
+		return true;
+	}
+	return true;
 };
 const isTextChildren = (children) => {
 	if (typeof children === "string" || typeof children === "number") return true;