@intlayer/design-system 8.11.0-canary.0 → 8.11.0

package/dist/esm/api/useIntlayerAPI.mjs

@@ -0,0 +1,123 @@
+'use client';
+
+import { getAuthAPI } from "../libs/auth.mjs";
+import { useAuth } from "./useAuth/useAuth.mjs";
+import { getIntlayerAPI } from "@intlayer/api";
+import { getAiAPI } from "@intlayer/api/ai";
+import { getAuditAPI } from "@intlayer/api/audit";
+import { getBitbucketAPI } from "@intlayer/api/bitbucket";
+import { getDictionaryAPI } from "@intlayer/api/dictionary";
+import { getEditorAPI } from "@intlayer/api/editor";
+import { getGithubAPI } from "@intlayer/api/github";
+import { getGitlabAPI } from "@intlayer/api/gitlab";
+import { getNewsletterAPI } from "@intlayer/api/newsletter";
+import { getOAuthAPI as getOAuthAPI$1 } from "@intlayer/api/oAuth";
+import { getOrganizationAPI } from "@intlayer/api/organization";
+import { getProjectAPI } from "@intlayer/api/project";
+import { getReviewerAPI } from "@intlayer/api/reviewer";
+import { getSearchAPI } from "@intlayer/api/search";
+import { getShowcaseProjectAPI } from "@intlayer/api/showcaseProject";
+import { getStripeAPI } from "@intlayer/api/stripe";
+import { getTagAPI } from "@intlayer/api/tag";
+import { getTranslateAPI } from "@intlayer/api/translate";
+import { getUserAPI } from "@intlayer/api/user";
+import { useConfiguration } from "@intlayer/editor-react";
+
+//#region src/api/useIntlayerAPI.ts
+const useIntlayerOAuthOptions = (props) => {
+	const configuration = useConfiguration();
+	const { oAuth2AccessToken } = useAuth();
+	const options = {
+		...oAuth2AccessToken && { headers: { Authorization: `Bearer ${oAuth2AccessToken.accessToken}` } },
+		...props?.options ?? {}
+	};
+	const rawConfig = props?.intlayerConfiguration ?? configuration;
+	return {
+		options,
+		resolvedConfig: rawConfig?.editor ? rawConfig : void 0
+	};
+};
+const useIntlayerOAuth = (props) => {
+	const { options, resolvedConfig } = useIntlayerOAuthOptions(props);
+	return getIntlayerAPI(options, resolvedConfig);
+};
+const useIntlayerAuth = (props) => {
+	const configuration = useConfiguration();
+	return getAuthAPI(props?.intlayerConfiguration ?? configuration);
+};
+const useOrganizationAPI = (props) => {
+	const { options, resolvedConfig } = useIntlayerOAuthOptions(props);
+	return getOrganizationAPI(options, resolvedConfig);
+};
+const useProjectAPI = (props) => {
+	const { options, resolvedConfig } = useIntlayerOAuthOptions(props);
+	return getProjectAPI(options, resolvedConfig);
+};
+const useUserAPI = (props) => {
+	const { options, resolvedConfig } = useIntlayerOAuthOptions(props);
+	return getUserAPI(options, resolvedConfig);
+};
+const useOAuthAPI = (props) => {
+	const { options, resolvedConfig } = useIntlayerOAuthOptions(props);
+	return getOAuthAPI$1(options, resolvedConfig);
+};
+const useDictionaryAPI = (props) => {
+	const { options, resolvedConfig } = useIntlayerOAuthOptions(props);
+	return getDictionaryAPI(options, resolvedConfig);
+};
+const useStripeAPI = (props) => {
+	const { options, resolvedConfig } = useIntlayerOAuthOptions(props);
+	return getStripeAPI(options, resolvedConfig);
+};
+const useAiAPI = (props) => {
+	const { options, resolvedConfig } = useIntlayerOAuthOptions(props);
+	return getAiAPI(options, resolvedConfig);
+};
+const useAuditAPI = (props) => {
+	const { options, resolvedConfig } = useIntlayerOAuthOptions(props);
+	return getAuditAPI(options, resolvedConfig);
+};
+const useTagAPI = (props) => {
+	const { options, resolvedConfig } = useIntlayerOAuthOptions(props);
+	return getTagAPI(options, resolvedConfig);
+};
+const useSearchAPI = (props) => {
+	const { options, resolvedConfig } = useIntlayerOAuthOptions(props);
+	return getSearchAPI(options, resolvedConfig);
+};
+const useEditorAPI = (props) => {
+	const { options, resolvedConfig } = useIntlayerOAuthOptions(props);
+	return getEditorAPI(options, resolvedConfig);
+};
+const useNewsletterAPI = (props) => {
+	const { options, resolvedConfig } = useIntlayerOAuthOptions(props);
+	return getNewsletterAPI(options, resolvedConfig);
+};
+const useGithubAPI = (props) => {
+	const { options, resolvedConfig } = useIntlayerOAuthOptions(props);
+	return getGithubAPI(options, resolvedConfig);
+};
+const useGitlabAPI = (props) => {
+	const { options, resolvedConfig } = useIntlayerOAuthOptions(props);
+	return getGitlabAPI(options, resolvedConfig);
+};
+const useBitbucketAPI = (props) => {
+	const { options, resolvedConfig } = useIntlayerOAuthOptions(props);
+	return getBitbucketAPI(options, resolvedConfig);
+};
+const useShowcaseProjectAPI = (props) => {
+	const { options, resolvedConfig } = useIntlayerOAuthOptions(props);
+	return getShowcaseProjectAPI(options, resolvedConfig);
+};
+const useTranslateAPI = (props) => {
+	const { options, resolvedConfig } = useIntlayerOAuthOptions(props);
+	return getTranslateAPI(options, resolvedConfig);
+};
+const useReviewerAPI = (props) => {
+	const { options, resolvedConfig } = useIntlayerOAuthOptions(props);
+	return getReviewerAPI(options, resolvedConfig);
+};
+
+//#endregion
+export { useAiAPI, useAuditAPI, useBitbucketAPI, useDictionaryAPI, useEditorAPI, useGithubAPI, useGitlabAPI, useIntlayerAuth, useIntlayerOAuth, useIntlayerOAuthOptions, useNewsletterAPI, useOAuthAPI, useOrganizationAPI, useProjectAPI, useReviewerAPI, useSearchAPI, useShowcaseProjectAPI, useStripeAPI, useTagAPI, useTranslateAPI, useUserAPI };
+//# sourceMappingURL=useIntlayerAPI.mjs.map

package/dist/esm/api/useIntlayerAPI.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIntlayerAPI.mjs","names":["getOAuthAPI"],"sources":["../../../src/api/useIntlayerAPI.ts"],"sourcesContent":["'use client';\n\nimport {\n  type FetcherOptions,\n  getIntlayerAPI,\n  type IntlayerAPI,\n} from '@intlayer/api';\nimport { getAiAPI } from '@intlayer/api/ai';\nimport { getAuditAPI } from '@intlayer/api/audit';\nimport { getBitbucketAPI } from '@intlayer/api/bitbucket';\nimport { getDictionaryAPI } from '@intlayer/api/dictionary';\nimport { getEditorAPI } from '@intlayer/api/editor';\nimport { getGithubAPI } from '@intlayer/api/github';\nimport { getGitlabAPI } from '@intlayer/api/gitlab';\nimport { getNewsletterAPI } from '@intlayer/api/newsletter';\nimport { getOAuthAPI } from '@intlayer/api/oAuth';\nimport { getOrganizationAPI } from '@intlayer/api/organization';\nimport { getProjectAPI } from '@intlayer/api/project';\nimport { getReviewerAPI } from '@intlayer/api/reviewer';\nimport { getSearchAPI } from '@intlayer/api/search';\nimport { getShowcaseProjectAPI } from '@intlayer/api/showcaseProject';\nimport { getStripeAPI } from '@intlayer/api/stripe';\nimport { getTagAPI } from '@intlayer/api/tag';\nimport { getTranslateAPI } from '@intlayer/api/translate';\nimport { getUserAPI } from '@intlayer/api/user';\nimport { useConfiguration } from '@intlayer/editor-react';\nimport type { IntlayerConfig } from '@intlayer/types/config';\nimport { type AuthAPI, getAuthAPI } from '../libs/auth';\nimport { useAuth } from './useAuth';\n\nexport type UseIntlayerAuthProps = {\n  options?: FetcherOptions;\n  intlayerConfiguration?: IntlayerConfig;\n};\n\nexport const useIntlayerOAuthOptions = (props?: UseIntlayerAuthProps) => {\n  const configuration = useConfiguration();\n  const { oAuth2AccessToken } = useAuth();\n\n  const options = {\n    ...(oAuth2AccessToken && {\n      headers: {\n        Authorization: `Bearer ${oAuth2AccessToken.accessToken}`,\n      },\n    }),\n    ...(props?.options ?? {}),\n  };\n\n  const rawConfig = props?.intlayerConfiguration ?? configuration;\n  // Only use the config if it's fully populated; an empty object (e.g. while\n  // the session is still loading) has no `editor` key and would crash API\n  // getters that do `intlayerConfig.editor.backendURL`.\n  const resolvedConfig = rawConfig?.editor ? rawConfig : undefined;\n\n  return { options, resolvedConfig };\n};\n\nexport const useIntlayerOAuth = (props?: UseIntlayerAuthProps): IntlayerAPI => {\n  const { options, resolvedConfig } = useIntlayerOAuthOptions(props);\n  return getIntlayerAPI(options, resolvedConfig);\n};\n\nexport const useIntlayerAuth = (props?: UseIntlayerAuthProps): AuthAPI => {\n  const configuration = useConfiguration();\n\n  return getAuthAPI(props?.intlayerConfiguration ?? configuration);\n};\n\nexport const useOrganizationAPI = (props?: UseIntlayerAuthProps) => {\n  const { options, resolvedConfig } = useIntlayerOAuthOptions(props);\n  return getOrganizationAPI(options, resolvedConfig);\n};\n\nexport const useProjectAPI = (props?: UseIntlayerAuthProps) => {\n  const { options, resolvedConfig } = useIntlayerOAuthOptions(props);\n  return getProjectAPI(options, resolvedConfig);\n};\n\nexport const useUserAPI = (props?: UseIntlayerAuthProps) => {\n  const { options, resolvedConfig } = useIntlayerOAuthOptions(props);\n  return getUserAPI(options, resolvedConfig);\n};\n\nexport const useOAuthAPI = (props?: UseIntlayerAuthProps) => {\n  const { options, resolvedConfig } = useIntlayerOAuthOptions(props);\n  return getOAuthAPI(options, resolvedConfig);\n};\n\nexport const useDictionaryAPI = (props?: UseIntlayerAuthProps) => {\n  const { options, resolvedConfig } = useIntlayerOAuthOptions(props);\n  return getDictionaryAPI(options, resolvedConfig);\n};\n\nexport const useStripeAPI = (props?: UseIntlayerAuthProps) => {\n  const { options, resolvedConfig } = useIntlayerOAuthOptions(props);\n  return getStripeAPI(options, resolvedConfig);\n};\n\nexport const useAiAPI = (props?: UseIntlayerAuthProps) => {\n  const { options, resolvedConfig } = useIntlayerOAuthOptions(props);\n  return getAiAPI(options, resolvedConfig);\n};\n\nexport const useAuditAPI = (props?: UseIntlayerAuthProps) => {\n  const { options, resolvedConfig } = useIntlayerOAuthOptions(props);\n  return getAuditAPI(options, resolvedConfig);\n};\n\nexport const useTagAPI = (props?: UseIntlayerAuthProps) => {\n  const { options, resolvedConfig } = useIntlayerOAuthOptions(props);\n  return getTagAPI(options, resolvedConfig);\n};\n\nexport const useSearchAPI = (props?: UseIntlayerAuthProps) => {\n  const { options, resolvedConfig } = useIntlayerOAuthOptions(props);\n  return getSearchAPI(options, resolvedConfig);\n};\n\nexport const useEditorAPI = (props?: UseIntlayerAuthProps) => {\n  const { options, resolvedConfig } = useIntlayerOAuthOptions(props);\n  return getEditorAPI(options, resolvedConfig);\n};\n\nexport const useNewsletterAPI = (props?: UseIntlayerAuthProps) => {\n  const { options, resolvedConfig } = useIntlayerOAuthOptions(props);\n  return getNewsletterAPI(options, resolvedConfig);\n};\n\nexport const useGithubAPI = (props?: UseIntlayerAuthProps) => {\n  const { options, resolvedConfig } = useIntlayerOAuthOptions(props);\n  return getGithubAPI(options, resolvedConfig);\n};\n\nexport const useGitlabAPI = (props?: UseIntlayerAuthProps) => {\n  const { options, resolvedConfig } = useIntlayerOAuthOptions(props);\n  return getGitlabAPI(options, resolvedConfig);\n};\n\nexport const useBitbucketAPI = (props?: UseIntlayerAuthProps) => {\n  const { options, resolvedConfig } = useIntlayerOAuthOptions(props);\n  return getBitbucketAPI(options, resolvedConfig);\n};\n\nexport const useShowcaseProjectAPI = (props?: UseIntlayerAuthProps) => {\n  const { options, resolvedConfig } = useIntlayerOAuthOptions(props);\n  return getShowcaseProjectAPI(options, resolvedConfig);\n};\n\nexport const useTranslateAPI = (props?: UseIntlayerAuthProps) => {\n  const { options, resolvedConfig } = useIntlayerOAuthOptions(props);\n  return getTranslateAPI(options, resolvedConfig);\n};\n\nexport const useReviewerAPI = (props?: UseIntlayerAuthProps) => {\n  const { options, resolvedConfig } = useIntlayerOAuthOptions(props);\n  return getReviewerAPI(options, resolvedConfig);\n};\n"],"mappings":"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"}

package/dist/esm/{hooks → api}/useUser/index.mjs

@@ -1,9 +1,9 @@
 'use client';
 
 import { useAuth } from "../useAuth/useAuth.mjs";
-import { useLogout } from "../reactQuery.mjs";
+import { useLogout } from "../hooks/auth.mjs";
 
-//#region src/hooks/useUser/index.ts
+//#region src/api/useUser/index.ts
 const useUser = () => {
 	const { session, revalidateSession, setSession } = useAuth();
 	const { mutate: logout } = useLogout();

package/dist/esm/api/useUser/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/api/useUser/index.ts"],"sourcesContent":["'use client';\n\nimport { useLogout } from '../hooks/auth';\nimport { useAuth } from '../useAuth';\n\nexport const useUser = () => {\n  const { session, revalidateSession, setSession } = useAuth();\n  const { mutate: logout } = useLogout();\n\n  const status = session?.user ? 'authenticated' : 'unauthenticated';\n\n  const isAuthenticated = status === 'authenticated';\n  const isUnauthenticated = status === 'unauthenticated';\n\n  const user = session?.user;\n\n  const logoutHandle = async () => {\n    setSession(null);\n    logout();\n  };\n\n  return {\n    isAuthenticated,\n    isUnauthenticated,\n    user,\n    revalidateSession,\n    logout: logoutHandle,\n  };\n};\n"],"mappings":";;;;;;AAKA,MAAa,gBAAgB;CAC3B,MAAM,EAAE,SAAS,mBAAmB,eAAe,QAAQ;CAC3D,MAAM,EAAE,QAAQ,WAAW,UAAU;CAErC,MAAM,SAAS,SAAS,OAAO,kBAAkB;CAEjD,MAAM,kBAAkB,WAAW;CACnC,MAAM,oBAAoB,WAAW;CAErC,MAAM,OAAO,SAAS;CAEtB,MAAM,eAAe,YAAY;EAC/B,WAAW,IAAI;EACf,OAAO;CACT;CAEA,OAAO;EACL;EACA;EACA;EACA;EACA,QAAQ;CACV;AACF"}

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

@@ -10,7 +10,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 let BadgeColor = /* @__PURE__ */ function(BadgeColor) {
 	BadgeColor["PRIMARY"] = "primary";
 	BadgeColor["SECONDARY"] = "secondary";
-	BadgeColor["DESTRUCTIVE"] = "destructive";
 	BadgeColor["SUCCESS"] = "success";
 	BadgeColor["ERROR"] = "error";
 	BadgeColor["NEUTRAL"] = "neutral";
@@ -50,7 +49,6 @@ const badgeVariants = cva("inline-flex items-center rounded-md border px-2.5 py-
 		color: {
 			[`primary`]: "border-primary bg-primary text-primary hover:bg-primary-500",
 			[`secondary`]: "border-secondary bg-secondary text-secondary hover:bg-secondary-300",
-			[`destructive`]: "border-destructive bg-destructive text-destructive hover:bg-destructive-500",
 			[`success`]: "border-success bg-success text-success hover:bg-success-500",
 			[`error`]: "border-error bg-error text-error hover:bg-error-500",
 			[`neutral`]: "border-neutral bg-neutral text-neutral hover:bg-neutral-600",
@@ -89,7 +87,7 @@ const badgeVariants = cva("inline-flex items-center rounded-md border px-2.5 py-
 * <Badge>New</Badge>
 *
 * // Colored badge
-* <Badge color={BadgeColor.DESTRUCTIVE}>Error</Badge>
+* <Badge color={BadgeColor.ERROR}>Error</Badge>
 *
 * // Clickable badge
 * <Badge clickable onClick={() => console.log('clicked')}>

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Badge/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type { HTMLAttributes } from 'react';\n\n/**\n * Badge color variants enum\n * @description Defines the available color themes for the badge component\n */\nexport enum BadgeColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  DESTRUCTIVE = 'destructive',\n  SUCCESS = 'success',\n  ERROR = 'error',\n  NEUTRAL = 'neutral',\n  LIGHT = 'light',\n  DARK = 'dark',\n  TEXT = 'text',\n  CUSTOM = 'custom',\n}\n\n/**\n * Badge visual variants enum\n * @description Defines the available visual styles for the badge component\n */\nexport enum BadgeVariant {\n  DEFAULT = 'default',\n  NONE = 'none',\n  OUTLINE = 'outline',\n  HOVERABLE = 'hoverable',\n}\n\n/**\n * Badge size variants enum\n * @description Defines the available sizes for the badge component\n */\nexport enum BadgeSize {\n  SMALL = 'sm',\n  MEDIUM = 'md',\n  LARGE = 'lg',\n}\n\n/**\n * Badge component variants using class-variance-authority\n * @description Defines the styling variants for different badge combinations\n */\nexport const badgeVariants = cva(\n  'inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold text-xs transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2',\n  {\n    variants: {\n      color: {\n        [`${BadgeColor.PRIMARY}`]:\n          'border-primary bg-primary text-primary hover:bg-primary-500',\n        [`${BadgeColor.SECONDARY}`]:\n          'border-secondary bg-secondary text-secondary hover:bg-secondary-300',\n        [`${BadgeColor.DESTRUCTIVE}`]:\n          'border-destructive bg-destructive text-destructive hover:bg-destructive-500',\n        [`${BadgeColor.SUCCESS}`]:\n          'border-success bg-success text-success hover:bg-success-500',\n        [`${BadgeColor.ERROR}`]:\n          'border-error bg-error text-error hover:bg-error-500',\n        [`${BadgeColor.NEUTRAL}`]:\n          'border-neutral bg-neutral text-neutral hover:bg-neutral-600',\n        [`${BadgeColor.LIGHT}`]:\n          'border-white bg-white text-white hover:bg-neutral-500',\n        [`${BadgeColor.DARK}`]:\n          'border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900',\n        [`${BadgeColor.TEXT}`]:\n          'border-text bg-text text-text hover:opacity-80',\n        [`${BadgeColor.CUSTOM}`]: '',\n      },\n      variant: {\n        [`${BadgeVariant.DEFAULT}`]: 'rounded-lg text-text-opposite',\n        [`${BadgeVariant.NONE}`]:\n          'border-none bg-opacity-0 text-inherit hover:bg-opacity-0',\n        [`${BadgeVariant.OUTLINE}`]:\n          'rounded-lg border-[1.3px] bg-opacity-0 hover:bg-opacity-30',\n        [`${BadgeVariant.HOVERABLE}`]:\n          'rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10',\n      },\n      size: {\n        [`${BadgeSize.SMALL}`]: 'px-2 py-0.5 text-xs',\n        [`${BadgeSize.MEDIUM}`]: 'px-2.5 py-0.5 text-xs',\n        [`${BadgeSize.LARGE}`]: 'px-3 py-1 text-sm',\n      },\n    },\n    defaultVariants: {\n      variant: BadgeVariant.DEFAULT,\n      color: BadgeColor.PRIMARY,\n      size: BadgeSize.MEDIUM,\n    },\n  }\n);\n\n/**\n * Badge component props interface\n * @description Comprehensive props for the Badge component with accessibility and interactive features\n */\nexport type BadgeProps = HTMLAttributes<HTMLElement> & {\n  /** The content to display inside the badge */\n  children?: React.ReactNode;\n  /** Color theme variant */\n  color?: BadgeColor | `${BadgeColor}`;\n  /** Visual style variant */\n  variant?: BadgeVariant | `${BadgeVariant}`;\n  /** Size of the badge */\n  size?: BadgeSize | `${BadgeSize}`;\n  /** Whether the badge is clickable */\n  clickable?: boolean;\n  /** Whether the badge is dismissible (shows close button) */\n  dismissible?: boolean;\n  /** Click handler for the badge */\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** Click handler for the dismiss button */\n  onDismiss?: () => void;\n  /** ARIA label for accessibility */\n  'aria-label'?: string;\n  /** Badge role for accessibility (default: 'status') */\n  role?: 'status' | 'button' | 'generic';\n  /** Whether badge should be focusable */\n  tabIndex?: number;\n};\n\n/**\n * Utility type for badge variant props\n */\nexport type BadgeVariantProps = VariantProps<typeof badgeVariants>;\n\n/**\n * Badge component for displaying status indicators, labels, and notifications\n *\n * @description A flexible badge component that supports multiple visual styles, colors, and interactive features.\n * It maintains accessibility standards and provides comprehensive customization options.\n *\n * @example\n * ```tsx\n * // Basic badge\n * <Badge>New</Badge>\n *\n * // Colored badge\n * <Badge color={BadgeColor.DESTRUCTIVE}>Error</Badge>\n *\n * // Clickable badge\n * <Badge clickable onClick={() => console.log('clicked')}>\n *   Clickable\n * </Badge>\n *\n * // Dismissible badge\n * <Badge dismissible onDismiss={() => console.log('dismissed')}>\n *   Dismissible\n * </Badge>\n * ```\n */\nexport const Badge: React.FC<BadgeProps> = ({\n  className,\n  variant = BadgeVariant.DEFAULT,\n  color = BadgeColor.PRIMARY,\n  size = BadgeSize.MEDIUM,\n  children,\n  clickable = false,\n  dismissible = false,\n  onClick,\n  onDismiss,\n  role,\n  tabIndex,\n  'aria-label': ariaLabel,\n  ...props\n}) => {\n  const Component = clickable ? 'button' : 'span';\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    if (clickable && onClick && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault();\n      onClick(event as any);\n    }\n  };\n\n  const handleDismiss = (event: React.MouseEvent) => {\n    event.stopPropagation();\n    onDismiss?.();\n  };\n\n  return (\n    <Component\n      className={cn(\n        badgeVariants({ variant, color, size }),\n        clickable &&\n          'cursor-pointer hover:opacity-80 focus-visible:ring-2 focus-visible:ring-offset-2',\n        dismissible && 'pr-1',\n        className\n      )}\n      onClick={clickable ? onClick : undefined}\n      onKeyDown={clickable ? handleKeyDown : undefined}\n      role={role || (clickable ? 'button' : 'status')}\n      tabIndex={clickable ? (tabIndex ?? 0) : tabIndex}\n      aria-label={ariaLabel || (clickable ? `${children} button` : undefined)}\n      {...props}\n    >\n      {children}\n      {dismissible && (\n        <button\n          type=\"button\"\n          className=\"ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-black/10 focus:outline-none focus:ring-1 focus:ring-offset-1\"\n          onClick={handleDismiss}\n          aria-label={`Remove ${children} badge`}\n        >\n          <svg\n            className=\"size-3\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n            aria-label=\"Remove badge\"\n          >\n            <title>Remove badge</title>\n            <path\n              fillRule=\"evenodd\"\n              d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n              clipRule=\"evenodd\"\n            />\n          </svg>\n        </button>\n      )}\n    </Component>\n  );\n};\n"],"mappings":";;;;;;;;;AAQA,IAAY,aAAL;CACL;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;;AACF;;;;;AAMA,IAAY,eAAL;CACL;CACA;CACA;CACA;;AACF;;;;;AAMA,IAAY,YAAL;CACL;CACA;CACA;;AACF;;;;;AAMA,MAAa,gBAAgB,IAC3B,0KACA;CACE,UAAU;EACR,OAAO;IACJ,YACC;IACD,cACC;IACD,gBACC;IACD,YACC;IACD,UACC;IACD,YACC;IACD,UACC;IACD,SACC;IACD,SACC;IACD,WAAyB;EAC5B;EACA,SAAS;IACN,YAA4B;IAC5B,SACC;IACD,YACC;IACD,cACC;EACJ;EACA,MAAM;IACH,OAAuB;IACvB,OAAwB;IACxB,OAAuB;EAC1B;CACF;CACA,iBAAiB;EACf;EACA;EACA;CACF;AACF,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DA,MAAa,SAA+B,EAC1C,WACA,qBACA,mBACA,aACA,UACA,YAAY,OACZ,cAAc,OACd,SACA,WACA,MACA,UACA,cAAc,WACd,GAAG,YACC;CACJ,MAAM,YAAY,YAAY,WAAW;CAEzC,MAAM,iBAAiB,UAA4C;EACjE,IAAI,aAAa,YAAY,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;GACxE,MAAM,eAAe;GACrB,QAAQ,KAAY;EACtB;CACF;CAEA,MAAM,iBAAiB,UAA4B;EACjD,MAAM,gBAAgB;EACtB,YAAY;CACd;CAEA,OACE,qBAAC,WAAD;EACE,WAAW,GACT,cAAc;GAAE;GAAS;GAAO;EAAK,CAAC,GACtC,aACE,oFACF,eAAe,QACf,SACF;EACA,SAAS,YAAY,UAAU;EAC/B,WAAW,YAAY,gBAAgB;EACvC,MAAM,SAAS,YAAY,WAAW;EACtC,UAAU,YAAa,YAAY,IAAK;EACxC,cAAY,cAAc,YAAY,GAAG,SAAS,WAAW;EAC7D,GAAI;YAbN,CAeG,UACA,eACC,oBAAC,UAAD;GACE,MAAK;GACL,WAAU;GACV,SAAS;GACT,cAAY,UAAU,SAAS;aAE/B,qBAAC,OAAD;IACE,WAAU;IACV,SAAQ;IACR,MAAK;IACL,cAAW;cAJb,CAME,oBAAC,SAAD,YAAO,eAAmB,IAC1B,oBAAC,QAAD;KACE,UAAS;KACT,GAAE;KACF,UAAS;IACV,EACE;;EACC,EAED;;AAEf"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Badge/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type { HTMLAttributes } from 'react';\n\n/**\n * Badge color variants enum\n * @description Defines the available color themes for the badge component\n */\nexport enum BadgeColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  SUCCESS = 'success',\n  ERROR = 'error',\n  NEUTRAL = 'neutral',\n  LIGHT = 'light',\n  DARK = 'dark',\n  TEXT = 'text',\n  CUSTOM = 'custom',\n}\n\n/**\n * Badge visual variants enum\n * @description Defines the available visual styles for the badge component\n */\nexport enum BadgeVariant {\n  DEFAULT = 'default',\n  NONE = 'none',\n  OUTLINE = 'outline',\n  HOVERABLE = 'hoverable',\n}\n\n/**\n * Badge size variants enum\n * @description Defines the available sizes for the badge component\n */\nexport enum BadgeSize {\n  SMALL = 'sm',\n  MEDIUM = 'md',\n  LARGE = 'lg',\n}\n\n/**\n * Badge component variants using class-variance-authority\n * @description Defines the styling variants for different badge combinations\n */\nexport const badgeVariants = cva(\n  'inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold text-xs transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2',\n  {\n    variants: {\n      color: {\n        [`${BadgeColor.PRIMARY}`]:\n          'border-primary bg-primary text-primary hover:bg-primary-500',\n        [`${BadgeColor.SECONDARY}`]:\n          'border-secondary bg-secondary text-secondary hover:bg-secondary-300',\n        [`${BadgeColor.SUCCESS}`]:\n          'border-success bg-success text-success hover:bg-success-500',\n        [`${BadgeColor.ERROR}`]:\n          'border-error bg-error text-error hover:bg-error-500',\n        [`${BadgeColor.NEUTRAL}`]:\n          'border-neutral bg-neutral text-neutral hover:bg-neutral-600',\n        [`${BadgeColor.LIGHT}`]:\n          'border-white bg-white text-white hover:bg-neutral-500',\n        [`${BadgeColor.DARK}`]:\n          'border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900',\n        [`${BadgeColor.TEXT}`]:\n          'border-text bg-text text-text hover:opacity-80',\n        [`${BadgeColor.CUSTOM}`]: '',\n      },\n      variant: {\n        [`${BadgeVariant.DEFAULT}`]: 'rounded-lg text-text-opposite',\n        [`${BadgeVariant.NONE}`]:\n          'border-none bg-opacity-0 text-inherit hover:bg-opacity-0',\n        [`${BadgeVariant.OUTLINE}`]:\n          'rounded-lg border-[1.3px] bg-opacity-0 hover:bg-opacity-30',\n        [`${BadgeVariant.HOVERABLE}`]:\n          'rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10',\n      },\n      size: {\n        [`${BadgeSize.SMALL}`]: 'px-2 py-0.5 text-xs',\n        [`${BadgeSize.MEDIUM}`]: 'px-2.5 py-0.5 text-xs',\n        [`${BadgeSize.LARGE}`]: 'px-3 py-1 text-sm',\n      },\n    },\n    defaultVariants: {\n      variant: BadgeVariant.DEFAULT,\n      color: BadgeColor.PRIMARY,\n      size: BadgeSize.MEDIUM,\n    },\n  }\n);\n\n/**\n * Badge component props interface\n * @description Comprehensive props for the Badge component with accessibility and interactive features\n */\nexport type BadgeProps = HTMLAttributes<HTMLElement> & {\n  /** The content to display inside the badge */\n  children?: React.ReactNode;\n  /** Color theme variant */\n  color?: BadgeColor | `${BadgeColor}`;\n  /** Visual style variant */\n  variant?: BadgeVariant | `${BadgeVariant}`;\n  /** Size of the badge */\n  size?: BadgeSize | `${BadgeSize}`;\n  /** Whether the badge is clickable */\n  clickable?: boolean;\n  /** Whether the badge is dismissible (shows close button) */\n  dismissible?: boolean;\n  /** Click handler for the badge */\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** Click handler for the dismiss button */\n  onDismiss?: () => void;\n  /** ARIA label for accessibility */\n  'aria-label'?: string;\n  /** Badge role for accessibility (default: 'status') */\n  role?: 'status' | 'button' | 'generic';\n  /** Whether badge should be focusable */\n  tabIndex?: number;\n};\n\n/**\n * Utility type for badge variant props\n */\nexport type BadgeVariantProps = VariantProps<typeof badgeVariants>;\n\n/**\n * Badge component for displaying status indicators, labels, and notifications\n *\n * @description A flexible badge component that supports multiple visual styles, colors, and interactive features.\n * It maintains accessibility standards and provides comprehensive customization options.\n *\n * @example\n * ```tsx\n * // Basic badge\n * <Badge>New</Badge>\n *\n * // Colored badge\n * <Badge color={BadgeColor.ERROR}>Error</Badge>\n *\n * // Clickable badge\n * <Badge clickable onClick={() => console.log('clicked')}>\n *   Clickable\n * </Badge>\n *\n * // Dismissible badge\n * <Badge dismissible onDismiss={() => console.log('dismissed')}>\n *   Dismissible\n * </Badge>\n * ```\n */\nexport const Badge: React.FC<BadgeProps> = ({\n  className,\n  variant = BadgeVariant.DEFAULT,\n  color = BadgeColor.PRIMARY,\n  size = BadgeSize.MEDIUM,\n  children,\n  clickable = false,\n  dismissible = false,\n  onClick,\n  onDismiss,\n  role,\n  tabIndex,\n  'aria-label': ariaLabel,\n  ...props\n}) => {\n  const Component = clickable ? 'button' : 'span';\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    if (clickable && onClick && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault();\n      onClick(event as any);\n    }\n  };\n\n  const handleDismiss = (event: React.MouseEvent) => {\n    event.stopPropagation();\n    onDismiss?.();\n  };\n\n  return (\n    <Component\n      className={cn(\n        badgeVariants({ variant, color, size }),\n        clickable &&\n          'cursor-pointer hover:opacity-80 focus-visible:ring-2 focus-visible:ring-offset-2',\n        dismissible && 'pr-1',\n        className\n      )}\n      onClick={clickable ? onClick : undefined}\n      onKeyDown={clickable ? handleKeyDown : undefined}\n      role={role || (clickable ? 'button' : 'status')}\n      tabIndex={clickable ? (tabIndex ?? 0) : tabIndex}\n      aria-label={ariaLabel || (clickable ? `${children} button` : undefined)}\n      {...props}\n    >\n      {children}\n      {dismissible && (\n        <button\n          type=\"button\"\n          className=\"ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-black/10 focus:outline-none focus:ring-1 focus:ring-offset-1\"\n          onClick={handleDismiss}\n          aria-label={`Remove ${children} badge`}\n        >\n          <svg\n            className=\"size-3\"\n            viewBox=\"0 0 20 20\"\n            fill=\"currentColor\"\n            aria-label=\"Remove badge\"\n          >\n            <title>Remove badge</title>\n            <path\n              fillRule=\"evenodd\"\n              d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n              clipRule=\"evenodd\"\n            />\n          </svg>\n        </button>\n      )}\n    </Component>\n  );\n};\n"],"mappings":";;;;;;;;;AAQA,IAAY,aAAL;CACL;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;;AACF;;;;;AAMA,IAAY,eAAL;CACL;CACA;CACA;CACA;;AACF;;;;;AAMA,IAAY,YAAL;CACL;CACA;CACA;;AACF;;;;;AAMA,MAAa,gBAAgB,IAC3B,0KACA;CACE,UAAU;EACR,OAAO;IACJ,YACC;IACD,cACC;IACD,YACC;IACD,UACC;IACD,YACC;IACD,UACC;IACD,SACC;IACD,SACC;IACD,WAAyB;EAC5B;EACA,SAAS;IACN,YAA4B;IAC5B,SACC;IACD,YACC;IACD,cACC;EACJ;EACA,MAAM;IACH,OAAuB;IACvB,OAAwB;IACxB,OAAuB;EAC1B;CACF;CACA,iBAAiB;EACf;EACA;EACA;CACF;AACF,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;AA6DA,MAAa,SAA+B,EAC1C,WACA,qBACA,mBACA,aACA,UACA,YAAY,OACZ,cAAc,OACd,SACA,WACA,MACA,UACA,cAAc,WACd,GAAG,YACC;CACJ,MAAM,YAAY,YAAY,WAAW;CAEzC,MAAM,iBAAiB,UAA4C;EACjE,IAAI,aAAa,YAAY,MAAM,QAAQ,WAAW,MAAM,QAAQ,MAAM;GACxE,MAAM,eAAe;GACrB,QAAQ,KAAY;EACtB;CACF;CAEA,MAAM,iBAAiB,UAA4B;EACjD,MAAM,gBAAgB;EACtB,YAAY;CACd;CAEA,OACE,qBAAC,WAAD;EACE,WAAW,GACT,cAAc;GAAE;GAAS;GAAO;EAAK,CAAC,GACtC,aACE,oFACF,eAAe,QACf,SACF;EACA,SAAS,YAAY,UAAU;EAC/B,WAAW,YAAY,gBAAgB;EACvC,MAAM,SAAS,YAAY,WAAW;EACtC,UAAU,YAAa,YAAY,IAAK;EACxC,cAAY,cAAc,YAAY,GAAG,SAAS,WAAW;EAC7D,GAAI;YAbN,CAeG,UACA,eACC,oBAAC,UAAD;GACE,MAAK;GACL,WAAU;GACV,SAAS;GACT,cAAY,UAAU,SAAS;aAE/B,qBAAC,OAAD;IACE,WAAU;IACV,SAAQ;IACR,MAAK;IACL,cAAW;cAJb,CAME,oBAAC,SAAD,YAAO,eAAmB,IAC1B,oBAAC,QAAD;KACE,UAAS;KACT,GAAE;KACF,UAAS;IACV,EACE;;EACC,EAED;;AAEf"}

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

@@ -19,7 +19,6 @@ const getColorClass = (color) => {
 	return {
 		["primary"]: "text-primary",
 		["secondary"]: "text-secondary",
-		["destructive"]: "text-destructive",
 		["neutral"]: "text-neutral",
 		["light"]: "text-white",
 		["dark"]: "text-neutral-800",

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Breadcrumb/index.tsx"],"sourcesContent":["'use client';\n\nimport type { LocalesValues } from '@intlayer/types/module_augmentation';\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { getIntlayer } from 'intlayer';\nimport { ChevronRightIcon } from 'lucide-react';\nimport { type FC, Fragment, type HTMLAttributes, type ReactNode } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button, type ButtonProps, ButtonVariant } from '../Button';\nimport { Link, LinkColor } from '../Link';\n\n/**\n * Props for LinkLink sub-component that renders breadcrumb items as links\n */\ntype LinkLinkProps = {\n  /**\n   * Position of the breadcrumb item in the list (1-based index)\n   */\n  position: number;\n  /**\n   * Locale for internationalization\n   */\n  locale?: LocalesValues;\n  /**\n   * URL to navigate to\n   */\n  href?: string;\n  /**\n   * Link color\n   */\n  color?: LinkColor | `${LinkColor}`;\n  /**\n   * Click handler\n   */\n  onClick?: () => void;\n  /**\n   * Children content\n   */\n  children?: string;\n  /**\n   * Additional CSS classes\n   */\n  className?: string;\n} & Omit<\n  HTMLAttributes<HTMLAnchorElement>,\n  'href' | 'onClick' | 'color' | 'children' | 'className'\n>;\n\n/**\n * Maps LinkColor to corresponding Tailwind text color classes\n */\nconst getColorClass = (color?: LinkColor | `${LinkColor}`): string => {\n  if (!color) return '';\n\n  const colorMap: Record<LinkColor, string> = {\n    [LinkColor.PRIMARY]: 'text-primary',\n    [LinkColor.SECONDARY]: 'text-secondary',\n    [LinkColor.DESTRUCTIVE]: 'text-destructive',\n    [LinkColor.NEUTRAL]: 'text-neutral',\n    [LinkColor.LIGHT]: 'text-white',\n    [LinkColor.DARK]: 'text-neutral-800',\n    [LinkColor.TEXT]: 'text-text',\n    [LinkColor.TEXT_INVERSE]: 'text-text-opposite',\n    [LinkColor.ERROR]: 'text-error',\n    [LinkColor.SUCCESS]: 'text-success',\n    [LinkColor.CUSTOM]: '',\n  };\n\n  return colorMap[color as LinkColor] || '';\n};\n\n/**\n * Breadcrumb variant styles using class-variance-authority\n */\nconst breadcrumbVariants = cva('flex flex-row flex-wrap items-center text-sm', {\n  variants: {\n    size: {\n      small: 'gap-1 text-xs',\n      medium: 'gap-2 text-sm',\n      large: 'gap-3 text-base',\n    },\n    spacing: {\n      compact: 'gap-1',\n      normal: 'gap-2',\n      loose: 'gap-4',\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\n    spacing: 'normal',\n  },\n});\n\n/**\n * LinkLink sub-component for breadcrumb items that navigate to other pages\n */\nconst LinkLink: FC<LinkLinkProps> = ({\n  href,\n  lang,\n  children,\n  onClick,\n  color,\n  position,\n  locale,\n  className,\n  ...props\n}) => {\n  const content = getIntlayer('breadcrumb');\n  const linkLabel = content.linkLabel;\n\n  return (\n    <>\n      <Link\n        href={href}\n        locale={locale}\n        color={color}\n        onClick={onClick}\n        itemProp=\"item\"\n        isExternalLink={false}\n        itemScope\n        itemType=\"https://schema.org/WebPage\"\n        {...props}\n        label={`${linkLabel} ${children}`}\n        itemID={href}\n        size=\"sm\"\n      >\n        <span itemProp=\"name\">{children}</span>\n      </Link>\n      <meta itemProp=\"position\" content={position.toString()} />\n    </>\n  );\n};\n\n/**\n * Props for ButtonLink sub-component that renders breadcrumb items as interactive buttons\n */\ntype ButtonButtonProps = {\n  /**\n   * Text content for the breadcrumb button\n   */\n  children: string;\n  /**\n   * Position of the breadcrumb item in the list (1-based index)\n   */\n  position: number;\n} & Omit<ButtonProps, 'children' | 'label'>;\n\n/**\n * ButtonLink sub-component for breadcrumb items with click handlers\n */\nconst ButtonLink: FC<ButtonButtonProps> = ({\n  children: text,\n  onClick,\n  color,\n  position,\n  className,\n  ...props\n}) => {\n  const { linkLabel } = useIntlayer('breadcrumb');\n\n  return (\n    <>\n      <Button\n        onClick={onClick}\n        variant={ButtonVariant.LINK}\n        label={`${linkLabel} ${text}`}\n        color={color}\n        itemProp=\"item\"\n        {...props}\n      >\n        <span itemProp=\"name\">{text}</span>\n      </Button>\n      <meta itemProp=\"position\" content={position.toString()} />\n    </>\n  );\n};\n\n/**\n * Props for Span sub-component that renders static breadcrumb text\n */\ntype SpanProps = {\n  /**\n   * Text content for the static breadcrumb item\n   */\n  children: string;\n  /**\n   * Position of the breadcrumb item in the list (1-based index)\n   */\n  position: number;\n} & HTMLAttributes<HTMLSpanElement>;\n\n/**\n * Span sub-component for static breadcrumb text items\n */\nconst Span: FC<SpanProps> = ({ children, position, className, ...props }) => (\n  <span\n    itemProp=\"item\"\n    className={cn(\n      'inline-flex items-center',\n      'font-medium text-neutral-700',\n      'transition-colors duration-200',\n      className\n    )}\n  >\n    <span itemProp=\"name\" {...props}>\n      {children}\n    </span>\n    <meta itemProp=\"position\" content={position.toString()} />\n  </span>\n);\n\n/**\n * Detailed breadcrumb link configuration with optional href or onClick\n */\ntype DetailedBreadcrumbLink = {\n  /**\n   * URL to navigate to when the breadcrumb item is clicked\n   */\n  href?: string;\n  /**\n   * Text content to display for this breadcrumb item\n   */\n  text: string;\n  /**\n   * Custom click handler function for interactive breadcrumb items\n   */\n  onClick?: () => void;\n};\n\n/**\n * Union type representing different breadcrumb item configurations:\n * - string: Simple text breadcrumb item\n * - DetailedBreadcrumbLink: Object with href, text, and/or onClick properties\n */\nexport type BreadcrumbLink = string | DetailedBreadcrumbLink;\n\nexport type BreadcrumbProps = {\n  /**\n   * Array of breadcrumb items\n   */\n  links: BreadcrumbLink[];\n  /**\n   * Color scheme for breadcrumb links\n   * @default LinkColor.TEXT\n   */\n  color?: LinkColor | `${LinkColor}`;\n  /**\n   * Locale for internationalization\n   */\n  locale?: LocalesValues;\n  /**\n   * Element type for ARIA current attribute\n   * @default 'page'\n   */\n  elementType?: 'page' | 'location';\n  /**\n   * Custom separator between breadcrumb items\n   * @default ChevronRightIcon\n   */\n  separator?: ReactNode;\n  /**\n   * ARIA label for breadcrumb navigation\n   * @default 'breadcrumb'\n   */\n  ariaLabel?: string;\n  /**\n   * Whether to include structured data markup\n   * @default true\n   */\n  includeStructuredData?: boolean;\n  /**\n   * Maximum number of breadcrumb items to show before truncation\n   */\n  maxItems?: number;\n} & VariantProps<typeof breadcrumbVariants> &\n  HTMLAttributes<HTMLOListElement>;\n\n/**\n * Breadcrumb component providing navigational context with accessibility features\n *\n * Features:\n * - Supports links, buttons, and static text elements\n * - Full keyboard navigation support\n * - ARIA attributes for screen readers\n * - Schema.org structured data for SEO\n * - Customizable separators and styling\n * - Internationalization support\n * - Responsive design variants\n *\n * @example\n * ```tsx\n * <Breadcrumb\n *   links={[\n *     'Home',\n *     { href: '/products', text: 'Products' },\n *     { onClick: handleCategory, text: 'Electronics' },\n *     'Smartphones'\n *   ]}\n *   size=\"medium\"\n *   ariaLabel=\"Product navigation\"\n * />\n * ```\n */\nexport const Breadcrumb: FC<BreadcrumbProps> = ({\n  links,\n  className,\n  color = LinkColor.TEXT,\n  locale,\n  elementType = 'page',\n  separator = <ChevronRightIcon size={10} />,\n  ariaLabel = 'breadcrumb',\n  includeStructuredData = true,\n  maxItems,\n  size,\n  spacing,\n  ...props\n}) => {\n  const displayLinks =\n    maxItems && links.length > maxItems\n      ? [...links.slice(0, 1), '...', ...links.slice(-(maxItems - 2))]\n      : links;\n\n  return (\n    <nav aria-label={ariaLabel}>\n      <ol\n        className={cn(breadcrumbVariants({ size, spacing }), className)}\n        {...(includeStructuredData && {\n          itemScope: true,\n          itemType: 'http://schema.org/BreadcrumbList',\n        })}\n        {...props}\n      >\n        {displayLinks.map((link, index) => {\n          const isLastLink = index === displayLinks.length - 1;\n          const isLink =\n            typeof link === 'object' && typeof link.href === 'string';\n          const isButton =\n            typeof link === 'object' && typeof link.onClick === 'function';\n          const isActive = index === displayLinks.length - 1;\n          const ariaCurrent = isActive ? elementType : undefined;\n          const isTruncated = link === '...';\n\n          const text = (link as DetailedBreadcrumbLink).text ?? link;\n\n          const separatorColorClass = getColorClass(color);\n\n          if (isTruncated) {\n            return (\n              <Fragment key={`truncated-${text}`}>\n                <li className=\"flex items-center\" aria-hidden=\"true\">\n                  <span className=\"text-neutral-500\">…</span>\n                </li>\n                {!isLastLink && (\n                  <li aria-hidden=\"true\" className=\"flex items-center\">\n                    <span className={cn(separatorColorClass)}>{separator}</span>\n                  </li>\n                )}\n              </Fragment>\n            );\n          }\n\n          let section = (\n            <Span\n              key={text}\n              position={index + 1}\n              aria-current={ariaCurrent}\n              className={cn(\n                'transition-colors duration-200',\n                isActive && 'text-neutral-900'\n              )}\n            >\n              {text}\n            </Span>\n          );\n\n          if (isLink) {\n            section = (\n              <LinkLink\n                key={text}\n                href={link.href!}\n                color={color}\n                position={index + 1}\n                locale={locale}\n                aria-current={ariaCurrent}\n                className={cn(isActive && 'cursor-default text-neutral-900')}\n              >\n                {text}\n              </LinkLink>\n            );\n          } else if (isButton) {\n            section = (\n              <ButtonLink\n                key={text}\n                onClick={link.onClick!}\n                color={color}\n                position={index + 1}\n                aria-current={ariaCurrent}\n                className={cn(isActive && 'cursor-default text-neutral-900')}\n              >\n                {text}\n              </ButtonLink>\n            );\n          }\n\n          const listElement = (\n            <li\n              {...(includeStructuredData && {\n                itemProp: 'itemListElement',\n                itemScope: true,\n                itemType: 'https://schema.org/ListItem',\n              })}\n              key={text}\n              className=\"flex items-center\"\n            >\n              {section}\n            </li>\n          );\n\n          if (isLastLink) {\n            return listElement;\n          }\n\n          return (\n            <Fragment key={text}>\n              {listElement}\n              <li aria-hidden=\"true\" className=\"flex items-center\">\n                <span className={cn(separatorColorClass)}>{separator}</span>\n              </li>\n            </Fragment>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Breadcrumb/index.tsx"],"sourcesContent":["'use client';\n\nimport type { LocalesValues } from '@intlayer/types/module_augmentation';\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { getIntlayer } from 'intlayer';\nimport { ChevronRightIcon } from 'lucide-react';\nimport { type FC, Fragment, type HTMLAttributes, type ReactNode } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button, type ButtonProps, ButtonVariant } from '../Button';\nimport { Link, LinkColor } from '../Link';\n\n/**\n * Props for LinkLink sub-component that renders breadcrumb items as links\n */\ntype LinkLinkProps = {\n  /**\n   * Position of the breadcrumb item in the list (1-based index)\n   */\n  position: number;\n  /**\n   * Locale for internationalization\n   */\n  locale?: LocalesValues;\n  /**\n   * URL to navigate to\n   */\n  href?: string;\n  /**\n   * Link color\n   */\n  color?: LinkColor | `${LinkColor}`;\n  /**\n   * Click handler\n   */\n  onClick?: () => void;\n  /**\n   * Children content\n   */\n  children?: string;\n  /**\n   * Additional CSS classes\n   */\n  className?: string;\n} & Omit<\n  HTMLAttributes<HTMLAnchorElement>,\n  'href' | 'onClick' | 'color' | 'children' | 'className'\n>;\n\n/**\n * Maps LinkColor to corresponding Tailwind text color classes\n */\nconst getColorClass = (color?: LinkColor | `${LinkColor}`): string => {\n  if (!color) return '';\n\n  const colorMap: Record<LinkColor, string> = {\n    [LinkColor.PRIMARY]: 'text-primary',\n    [LinkColor.SECONDARY]: 'text-secondary',\n    [LinkColor.NEUTRAL]: 'text-neutral',\n    [LinkColor.LIGHT]: 'text-white',\n    [LinkColor.DARK]: 'text-neutral-800',\n    [LinkColor.TEXT]: 'text-text',\n    [LinkColor.TEXT_INVERSE]: 'text-text-opposite',\n    [LinkColor.ERROR]: 'text-error',\n    [LinkColor.SUCCESS]: 'text-success',\n    [LinkColor.CUSTOM]: '',\n  };\n\n  return colorMap[color as LinkColor] || '';\n};\n\n/**\n * Breadcrumb variant styles using class-variance-authority\n */\nconst breadcrumbVariants = cva('flex flex-row flex-wrap items-center text-sm', {\n  variants: {\n    size: {\n      small: 'gap-1 text-xs',\n      medium: 'gap-2 text-sm',\n      large: 'gap-3 text-base',\n    },\n    spacing: {\n      compact: 'gap-1',\n      normal: 'gap-2',\n      loose: 'gap-4',\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\n    spacing: 'normal',\n  },\n});\n\n/**\n * LinkLink sub-component for breadcrumb items that navigate to other pages\n */\nconst LinkLink: FC<LinkLinkProps> = ({\n  href,\n  lang,\n  children,\n  onClick,\n  color,\n  position,\n  locale,\n  className,\n  ...props\n}) => {\n  const content = getIntlayer('breadcrumb');\n  const linkLabel = content.linkLabel;\n\n  return (\n    <>\n      <Link\n        href={href}\n        locale={locale}\n        color={color}\n        onClick={onClick}\n        itemProp=\"item\"\n        isExternalLink={false}\n        itemScope\n        itemType=\"https://schema.org/WebPage\"\n        {...props}\n        label={`${linkLabel} ${children}`}\n        itemID={href}\n        size=\"sm\"\n      >\n        <span itemProp=\"name\">{children}</span>\n      </Link>\n      <meta itemProp=\"position\" content={position.toString()} />\n    </>\n  );\n};\n\n/**\n * Props for ButtonLink sub-component that renders breadcrumb items as interactive buttons\n */\ntype ButtonButtonProps = {\n  /**\n   * Text content for the breadcrumb button\n   */\n  children: string;\n  /**\n   * Position of the breadcrumb item in the list (1-based index)\n   */\n  position: number;\n} & Omit<ButtonProps, 'children' | 'label'>;\n\n/**\n * ButtonLink sub-component for breadcrumb items with click handlers\n */\nconst ButtonLink: FC<ButtonButtonProps> = ({\n  children: text,\n  onClick,\n  color,\n  position,\n  className,\n  ...props\n}) => {\n  const { linkLabel } = useIntlayer('breadcrumb');\n\n  return (\n    <>\n      <Button\n        onClick={onClick}\n        variant={ButtonVariant.LINK}\n        label={`${linkLabel} ${text}`}\n        color={color}\n        itemProp=\"item\"\n        {...props}\n      >\n        <span itemProp=\"name\">{text}</span>\n      </Button>\n      <meta itemProp=\"position\" content={position.toString()} />\n    </>\n  );\n};\n\n/**\n * Props for Span sub-component that renders static breadcrumb text\n */\ntype SpanProps = {\n  /**\n   * Text content for the static breadcrumb item\n   */\n  children: string;\n  /**\n   * Position of the breadcrumb item in the list (1-based index)\n   */\n  position: number;\n} & HTMLAttributes<HTMLSpanElement>;\n\n/**\n * Span sub-component for static breadcrumb text items\n */\nconst Span: FC<SpanProps> = ({ children, position, className, ...props }) => (\n  <span\n    itemProp=\"item\"\n    className={cn(\n      'inline-flex items-center',\n      'font-medium text-neutral-700',\n      'transition-colors duration-200',\n      className\n    )}\n  >\n    <span itemProp=\"name\" {...props}>\n      {children}\n    </span>\n    <meta itemProp=\"position\" content={position.toString()} />\n  </span>\n);\n\n/**\n * Detailed breadcrumb link configuration with optional href or onClick\n */\ntype DetailedBreadcrumbLink = {\n  /**\n   * URL to navigate to when the breadcrumb item is clicked\n   */\n  href?: string;\n  /**\n   * Text content to display for this breadcrumb item\n   */\n  text: string;\n  /**\n   * Custom click handler function for interactive breadcrumb items\n   */\n  onClick?: () => void;\n};\n\n/**\n * Union type representing different breadcrumb item configurations:\n * - string: Simple text breadcrumb item\n * - DetailedBreadcrumbLink: Object with href, text, and/or onClick properties\n */\nexport type BreadcrumbLink = string | DetailedBreadcrumbLink;\n\nexport type BreadcrumbProps = {\n  /**\n   * Array of breadcrumb items\n   */\n  links: BreadcrumbLink[];\n  /**\n   * Color scheme for breadcrumb links\n   * @default LinkColor.TEXT\n   */\n  color?: LinkColor | `${LinkColor}`;\n  /**\n   * Locale for internationalization\n   */\n  locale?: LocalesValues;\n  /**\n   * Element type for ARIA current attribute\n   * @default 'page'\n   */\n  elementType?: 'page' | 'location';\n  /**\n   * Custom separator between breadcrumb items\n   * @default ChevronRightIcon\n   */\n  separator?: ReactNode;\n  /**\n   * ARIA label for breadcrumb navigation\n   * @default 'breadcrumb'\n   */\n  ariaLabel?: string;\n  /**\n   * Whether to include structured data markup\n   * @default true\n   */\n  includeStructuredData?: boolean;\n  /**\n   * Maximum number of breadcrumb items to show before truncation\n   */\n  maxItems?: number;\n} & VariantProps<typeof breadcrumbVariants> &\n  HTMLAttributes<HTMLOListElement>;\n\n/**\n * Breadcrumb component providing navigational context with accessibility features\n *\n * Features:\n * - Supports links, buttons, and static text elements\n * - Full keyboard navigation support\n * - ARIA attributes for screen readers\n * - Schema.org structured data for SEO\n * - Customizable separators and styling\n * - Internationalization support\n * - Responsive design variants\n *\n * @example\n * ```tsx\n * <Breadcrumb\n *   links={[\n *     'Home',\n *     { href: '/products', text: 'Products' },\n *     { onClick: handleCategory, text: 'Electronics' },\n *     'Smartphones'\n *   ]}\n *   size=\"medium\"\n *   ariaLabel=\"Product navigation\"\n * />\n * ```\n */\nexport const Breadcrumb: FC<BreadcrumbProps> = ({\n  links,\n  className,\n  color = LinkColor.TEXT,\n  locale,\n  elementType = 'page',\n  separator = <ChevronRightIcon size={10} />,\n  ariaLabel = 'breadcrumb',\n  includeStructuredData = true,\n  maxItems,\n  size,\n  spacing,\n  ...props\n}) => {\n  const displayLinks =\n    maxItems && links.length > maxItems\n      ? [...links.slice(0, 1), '...', ...links.slice(-(maxItems - 2))]\n      : links;\n\n  return (\n    <nav aria-label={ariaLabel}>\n      <ol\n        className={cn(breadcrumbVariants({ size, spacing }), className)}\n        {...(includeStructuredData && {\n          itemScope: true,\n          itemType: 'http://schema.org/BreadcrumbList',\n        })}\n        {...props}\n      >\n        {displayLinks.map((link, index) => {\n          const isLastLink = index === displayLinks.length - 1;\n          const isLink =\n            typeof link === 'object' && typeof link.href === 'string';\n          const isButton =\n            typeof link === 'object' && typeof link.onClick === 'function';\n          const isActive = index === displayLinks.length - 1;\n          const ariaCurrent = isActive ? elementType : undefined;\n          const isTruncated = link === '...';\n\n          const text = (link as DetailedBreadcrumbLink).text ?? link;\n\n          const separatorColorClass = getColorClass(color);\n\n          if (isTruncated) {\n            return (\n              <Fragment key={`truncated-${text}`}>\n                <li className=\"flex items-center\" aria-hidden=\"true\">\n                  <span className=\"text-neutral-500\">…</span>\n                </li>\n                {!isLastLink && (\n                  <li aria-hidden=\"true\" className=\"flex items-center\">\n                    <span className={cn(separatorColorClass)}>{separator}</span>\n                  </li>\n                )}\n              </Fragment>\n            );\n          }\n\n          let section = (\n            <Span\n              key={text}\n              position={index + 1}\n              aria-current={ariaCurrent}\n              className={cn(\n                'transition-colors duration-200',\n                isActive && 'text-neutral-900'\n              )}\n            >\n              {text}\n            </Span>\n          );\n\n          if (isLink) {\n            section = (\n              <LinkLink\n                key={text}\n                href={link.href!}\n                color={color}\n                position={index + 1}\n                locale={locale}\n                aria-current={ariaCurrent}\n                className={cn(isActive && 'cursor-default text-neutral-900')}\n              >\n                {text}\n              </LinkLink>\n            );\n          } else if (isButton) {\n            section = (\n              <ButtonLink\n                key={text}\n                onClick={link.onClick!}\n                color={color}\n                position={index + 1}\n                aria-current={ariaCurrent}\n                className={cn(isActive && 'cursor-default text-neutral-900')}\n              >\n                {text}\n              </ButtonLink>\n            );\n          }\n\n          const listElement = (\n            <li\n              {...(includeStructuredData && {\n                itemProp: 'itemListElement',\n                itemScope: true,\n                itemType: 'https://schema.org/ListItem',\n              })}\n              key={text}\n              className=\"flex items-center\"\n            >\n              {section}\n            </li>\n          );\n\n          if (isLastLink) {\n            return listElement;\n          }\n\n          return (\n            <Fragment key={text}>\n              {listElement}\n              <li aria-hidden=\"true\" className=\"flex items-center\">\n                <span className={cn(separatorColorClass)}>{separator}</span>\n              </li>\n            </Fragment>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n};\n"],"mappings":"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"}

package/dist/esm/components/Button/Button.mjs

@@ -54,7 +54,6 @@ let ButtonVariant = /* @__PURE__ */ function(ButtonVariant) {
 let ButtonColor = /* @__PURE__ */ function(ButtonColor) {
 	ButtonColor["PRIMARY"] = "primary";
 	ButtonColor["SECONDARY"] = "secondary";
-	ButtonColor["DESTRUCTIVE"] = "destructive";
 	ButtonColor["NEUTRAL"] = "neutral";
 	ButtonColor["LIGHT"] = "light";
 	ButtonColor["DARK"] = "dark";
@@ -95,7 +94,6 @@ const buttonVariants = cva("relative inline-flex cursor-pointer items-center jus
 		color: {
 			[`primary`]: "hover-primary-500/20 text-primary ring-primary-500/20 *:text-text-light",
 			[`secondary`]: "hover-secondary-500/20 text-secondary ring-secondary-500/20 *:text-text-light",
-			[`destructive`]: "hover-destructive-500/20 text-destructive ring-destructive-500/20 *:text-text-light",
 			[`neutral`]: "text-neutral ring-neutral-500/5 *:text-text-light",
 			[`card`]: "hover-card-500/20 text-card ring-card-500/20 *:text-text-light",
 			[`light`]: "hover-white-500/20 text-white ring-white/20 *:text-text-light",
@@ -205,10 +203,10 @@ const buttonVariants = cva("relative inline-flex cursor-pointer items-center jus
 *   Save
 * </Button>
 *
-* // Destructive action button
+* // Error action button
 * <Button
 *   variant={`${ButtonVariant.OUTLINE}`}
-*   color={ButtonColor.DESTRUCTIVE}
+*   color={ButtonColor.ERROR}
 *   label="Delete item permanently"
 *   aria-describedby="delete-warning"
 * >

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

@@ -1 +1 @@
-{"version":3,"file":"Button.mjs","names":[],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type { LucideIcon } from 'lucide-react';\nimport type { ButtonHTMLAttributes, DetailedHTMLProps, FC } from 'react';\nimport { ContainerRoundedSize as ButtonRoundedSize } from '../Container';\nimport { Loader } from '../Loader';\n\n/**\n * Button size variants for different use cases\n */\nexport enum ButtonSize {\n  XS = 'xs',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  ICON_SM = 'icon-sm',\n  ICON_MD = 'icon-md',\n  ICON_LG = 'icon-lg',\n  ICON_XL = 'icon-xl',\n}\n\nconst buttonIconVariants = cva('flex-none shrink-0', {\n  variants: {\n    size: {\n      [`${ButtonSize.XS}`]: 'size-2',\n      [`${ButtonSize.SM}`]: 'size-3',\n      [`${ButtonSize.MD}`]: 'size-4',\n      [`${ButtonSize.LG}`]: 'size-5',\n      [`${ButtonSize.XL}`]: 'size-6',\n      [`${ButtonSize.ICON_SM}`]: 'size-3',\n      [`${ButtonSize.ICON_MD}`]: 'size-4',\n      [`${ButtonSize.ICON_LG}`]: 'size-5',\n      [`${ButtonSize.ICON_XL}`]: 'size-6',\n    },\n  },\n  defaultVariants: {\n    size: ButtonSize.MD,\n  },\n});\n\n/**\n * Button visual style variants\n */\nexport enum ButtonVariant {\n  DEFAULT = 'default',\n  NONE = 'none',\n  OUTLINE = 'outline',\n  LINK = 'link',\n  INVISIBLE_LINK = 'invisible-link',\n  HOVERABLE = 'hoverable',\n  FADE = 'fade',\n  INPUT = 'input',\n}\n\n/**\n * Button color themes that work with the design system\n */\nexport enum ButtonColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  DESTRUCTIVE = 'destructive',\n  NEUTRAL = 'neutral',\n  LIGHT = 'light',\n  DARK = 'dark',\n  TEXT = 'text',\n  CARD = 'card',\n  TEXT_INVERSE = 'text-inverse',\n  CURRENT = 'current',\n  ERROR = 'error',\n  SUCCESS = 'success',\n  CUSTOM = 'custom',\n}\n\n/**\n * Text alignment options for button content\n */\nexport enum ButtonTextAlign {\n  LEFT = 'left',\n  CENTER = 'center',\n  RIGHT = 'right',\n}\n\n/**\n * Enhanced button variants with improved accessibility and focus states\n */\nexport const buttonVariants = cva(\n  'relative inline-flex cursor-pointer items-center justify-center font-medium ring-0 transition-all duration-300 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      size: {\n        [`${ButtonSize.XS}`]: 'min-h-7 px-3 text-xs max-md:py-1',\n        [`${ButtonSize.SM}`]: 'min-h-7 px-3 text-xs max-md:py-1',\n        [`${ButtonSize.MD}`]: 'min-h-8 px-6 text-sm max-md:py-2',\n        [`${ButtonSize.LG}`]: 'min-h-10 px-8 text-lg max-md:py-3',\n        [`${ButtonSize.XL}`]: 'min-h-11 px-10 text-xl max-md:py-4',\n        [`${ButtonSize.ICON_SM}`]: 'p-1.5',\n        [`${ButtonSize.ICON_MD}`]: 'p-1.5',\n        [`${ButtonSize.ICON_LG}`]: 'p-1.5',\n        [`${ButtonSize.ICON_XL}`]: 'p-3',\n      },\n      color: {\n        [`${ButtonColor.PRIMARY}`]:\n          'hover-primary-500/20 text-primary ring-primary-500/20 *:text-text-light',\n        [`${ButtonColor.SECONDARY}`]:\n          'hover-secondary-500/20 text-secondary ring-secondary-500/20 *:text-text-light',\n        [`${ButtonColor.DESTRUCTIVE}`]:\n          'hover-destructive-500/20 text-destructive ring-destructive-500/20 *:text-text-light',\n        [`${ButtonColor.NEUTRAL}`]:\n          'text-neutral ring-neutral-500/5 *:text-text-light',\n        [`${ButtonColor.CARD}`]:\n          'hover-card-500/20 text-card ring-card-500/20 *:text-text-light',\n        [`${ButtonColor.LIGHT}`]:\n          'hover-white-500/20 text-white ring-white/20 *:text-text-light',\n        [`${ButtonColor.DARK}`]:\n          'text-neutral-800 ring-text-light/50 *:text-text-light',\n        [`${ButtonColor.TEXT}`]: 'text-text ring-text/20 *:text-text-opposite',\n        [`${ButtonColor.CURRENT}`]:\n          'hover-current-500/10 text-current ring-current/10 *:text-text-light',\n        [`${ButtonColor.TEXT_INVERSE}`]:\n          'text-text-opposite ring-text-opposite/20 *:text-text',\n        [`${ButtonColor.ERROR}`]:\n          'hover-error-500/20 text-error ring-error/20 *:text-text-light',\n        [`${ButtonColor.SUCCESS}`]:\n          'hover-success-500/20 text-success ring-success/20 *:text-text-light',\n        [`${ButtonColor.CUSTOM}`]: '',\n      },\n      roundedSize: {\n        [`${ButtonRoundedSize.NONE}`]: 'rounded-none',\n        [`${ButtonRoundedSize.SM}`]:\n          'rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl',\n        [`${ButtonRoundedSize.MD}`]:\n          'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n        [`${ButtonRoundedSize.LG}`]:\n          'rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl',\n        [`${ButtonRoundedSize.XL}`]:\n          'rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl',\n        [`${ButtonRoundedSize['2xl']}`]:\n          'rounded-4xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[2.5rem]',\n        [`${ButtonRoundedSize['3xl']}`]:\n          'rounded-[2.5rem] [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[3rem]',\n        [`${ButtonRoundedSize['4xl']}`]:\n          'rounded-[3rem] [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[4rem]',\n        [`${ButtonRoundedSize['5xl']}`]:\n          'rounded-[4rem] [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[5rem]',\n        [`${ButtonRoundedSize.FULL}`]: 'rounded-full',\n      },\n      variant: {\n        [`${ButtonVariant.DEFAULT}`]: [\n          'bg-current',\n          'hover:bg-current/90',\n          'hover:ring-5',\n          'aria-selected:ring-5',\n        ],\n\n        [`${ButtonVariant.OUTLINE}`]: [\n          'rounded-2xl border-[1.3px] border-current bg-current/0 *:text-current!',\n          'hover:bg-current/20 focus-visible:bg-current/20',\n          'hover:ring-5 focus-visible:ring-5',\n          'aria-selected:ring-5',\n        ],\n\n        [`${ButtonVariant.NONE}`]:\n          'border-none bg-current/0 text-inherit hover:bg-current/0',\n\n        [`${ButtonVariant.LINK}`]:\n          'h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 *:text-current! hover:bg-transparent hover:underline',\n\n        [`${ButtonVariant.INVISIBLE_LINK}`]:\n          'h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 *:text-current! hover:bg-transparent',\n\n        [`${ButtonVariant.HOVERABLE}`]:\n          'rounded-lg border-none bg-current/0 transition *:text-current! hover:bg-current/20 aria-[current]:bg-current/5',\n\n        [`${ButtonVariant.FADE}`]: [\n          'rounded-lg border-none bg-current/10 ring-current/5 transition *:text-current! hover:bg-current/20 aria-[current]:bg-current/5',\n          'hover:ring-5 focus-visible:ring-5',\n          'aria-selected:ring-5',\n        ],\n        [`${ButtonVariant.INPUT}`]: [\n          // base styles\n          'text-text',\n          'w-full select-text resize-none rounded-2xl text-base shadow-none outline-none supports-[corner-shape:squircle]:rounded-4xl',\n          'transition-shadow duration-100 md:text-sm',\n          'ring-0', // base ring\n          'disabled:opacity-50',\n\n          'text-text',\n          'bg-neutral-50 dark:bg-neutral-950',\n          'ring-neutral-100 dark:ring-neutral-700',\n\n          // Hover ring (similar spirit to your input)\n          'hover:ring-3', // width\n          'aria-selected:ring-4',\n          'focus-visible:ring-3',\n          'disabled:ring-0',\n\n          // Focus ring + animation\n          'focus-visible:outline-none',\n\n          // Remove any weird box-shadow\n          '[box-shadow:none] focus:[box-shadow:none]',\n\n          // aria-invalid border color\n          'aria-invalid:border-error',\n        ],\n      },\n\n      textAlign: {\n        [`${ButtonTextAlign.LEFT}`]: 'justify-start text-left',\n        [`${ButtonTextAlign.CENTER}`]: 'justify-center text-center',\n        [`${ButtonTextAlign.RIGHT}`]: 'justify-end text-right',\n      },\n\n      isFullWidth: {\n        true: 'w-full',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: `${ButtonVariant.DEFAULT}`,\n      size: `${ButtonSize.MD}`,\n      color: `${ButtonColor.TEXT}`,\n      roundedSize: `${ButtonRoundedSize.MD}`,\n      textAlign: `${ButtonTextAlign.CENTER}`,\n      isFullWidth: false,\n    },\n  }\n);\n\n/**\n * Enhanced Button component props with comprehensive type safety and accessibility features\n */\nexport type ButtonProps = DetailedHTMLProps<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  HTMLButtonElement\n> &\n  VariantProps<typeof buttonVariants> & {\n    /**\n     * Accessible label for screen readers and assistive technologies.\n     * This is required for accessibility compliance.\n     */\n    label: string | null;\n\n    /**\n     * Optional icon to display on the left side of the button\n     */\n    Icon?: FC | LucideIcon;\n\n    /**\n     * Optional icon to display on the right side of the button\n     */\n    IconRight?: FC | LucideIcon;\n\n    /**\n     * Additional CSS classes for icon styling\n     */\n    iconClassName?: string;\n\n    /**\n     * Shows loading spinner and disables button interaction when true\n     */\n    isLoading?: boolean;\n\n    /**\n     * Marks the button as active (useful for navigation or toggle states)\n     */\n    isActive?: boolean;\n\n    /**\n     * Marks the button as selected\n     */\n    isSelected?: boolean;\n\n    /**\n     * Makes the button span the full width of its container\n     */\n    isFullWidth?: boolean;\n\n    /**\n     * Additional description for complex buttons (optional)\n     */\n    'aria-describedby'?: string;\n\n    /**\n     * Expanded state for collapsible sections (optional)\n     */\n    'aria-expanded'?: boolean;\n\n    /**\n     * Controls whether the button has popup/menu (optional)\n     */\n    'aria-haspopup'?:\n      | boolean\n      | 'true'\n      | 'false'\n      | 'menu'\n      | 'listbox'\n      | 'tree'\n      | 'grid'\n      | 'dialog';\n\n    /**\n     * Indicates if button controls are currently pressed (for toggle buttons)\n     */\n    'aria-pressed'?: boolean;\n  };\n\n/**\n * Button Component - A comprehensive, accessible button component\n *\n * Features:\n * - Full accessibility compliance with ARIA attributes\n * - Multiple variants and sizes for different use cases\n * - Icon support (left and right positioning)\n * - Loading states with spinner\n * - Keyboard navigation support\n * - Focus management with visible indicators\n * - Responsive design adaptations\n *\n * @example\n * ```tsx\n * // Basic button\n * <Button label=\"Click me\">Click me</Button>\n *\n * // Button with icon and loading state\n * <Button\n *   label=\"Save document\"\n *   Icon={SaveIcon}\n *   isLoading={saving}\n *   disabled={!hasChanges}\n * >\n *   Save\n * </Button>\n *\n * // Destructive action button\n * <Button\n *   variant={`${ButtonVariant.OUTLINE}`}\n *   color={ButtonColor.DESTRUCTIVE}\n *   label=\"Delete item permanently\"\n *   aria-describedby=\"delete-warning\"\n * >\n *   Delete\n * </Button>\n * ```\n */\nexport const Button: FC<ButtonProps> = ({\n  variant,\n  size,\n  color,\n  children,\n  Icon,\n  IconRight,\n  iconClassName,\n  isLoading = false,\n  isActive,\n  isSelected,\n  isFullWidth,\n  roundedSize,\n  textAlign,\n  disabled,\n  label,\n  className,\n  type = 'button',\n  'aria-describedby': ariaDescribedBy,\n  'aria-expanded': ariaExpanded,\n  'aria-haspopup': ariaHasPopup,\n  'aria-pressed': ariaPressed,\n  ...props\n}) => {\n  const isLink =\n    variant === `${ButtonVariant.LINK}` ||\n    variant === `${ButtonVariant.INVISIBLE_LINK}`;\n  const isIconOnly = !children && (Icon || IconRight);\n\n  const accessibilityProps = {\n    'aria-label': isIconOnly ? (label ?? undefined) : undefined,\n    'aria-labelledby': !isIconOnly ? undefined : undefined,\n    'aria-describedby': ariaDescribedBy,\n    'aria-expanded': ariaExpanded,\n    'aria-haspopup': ariaHasPopup,\n    'aria-pressed': isActive !== undefined ? isActive : ariaPressed,\n    'aria-busy': isLoading,\n    'aria-current': (isActive ? 'page' : undefined) as 'page' | undefined,\n    'aria-disabled': disabled || isLoading,\n    'aria-selected': isSelected,\n  };\n\n  const isSquareButton =\n    size === ButtonSize.ICON_SM ||\n    size === ButtonSize.ICON_MD ||\n    size === ButtonSize.ICON_LG ||\n    size === ButtonSize.ICON_XL;\n\n  return (\n    <button\n      disabled={isLoading || disabled}\n      role={isLink ? 'link' : 'button'}\n      type={type}\n      className={buttonVariants({\n        variant,\n        size,\n        color,\n        isFullWidth,\n        roundedSize,\n        textAlign:\n          textAlign ??\n          (IconRight ? ButtonTextAlign.LEFT : ButtonTextAlign.CENTER),\n        className,\n      })}\n      {...accessibilityProps}\n      {...props}\n    >\n      {Icon && !isLoading && (\n        <Icon\n          className={buttonIconVariants({\n            size,\n            className: cn(!isSquareButton && 'mr-3', iconClassName),\n          })}\n          aria-hidden=\"true\"\n        />\n      )}\n\n      <div\n        className={cn(\n          'flex items-center justify-center transition-[width] duration-300',\n          isLoading && size === ButtonSize.SM && 'w-3',\n          isLoading && size === ButtonSize.MD && 'w-4',\n          isLoading && size === ButtonSize.LG && 'w-6',\n          isLoading && size === ButtonSize.XL && 'w-8'\n        )}\n      >\n        <Loader\n          className={buttonIconVariants({\n            size,\n            className: cn(!isSquareButton && 'mr-3', iconClassName),\n          })}\n          isLoading={isLoading}\n          aria-hidden=\"true\"\n          data-testid=\"loader\"\n        />\n      </div>\n\n      {children && (\n        <span className=\"flex-1 truncate whitespace-nowrap\">{children}</span>\n      )}\n\n      {!children && isIconOnly && <span className=\"sr-only\">{label}</span>}\n\n      {IconRight && (\n        <IconRight\n          className={buttonIconVariants({\n            size,\n            className: cn(!isSquareButton && 'ml-3', iconClassName),\n          })}\n          aria-hidden=\"true\"\n        />\n      )}\n    </button>\n  );\n};\n"],"mappings":";;;;;;;;;;AAUA,IAAY,aAAL;CACL;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;;AACF;AAEA,MAAM,qBAAqB,IAAI,sBAAsB;CACnD,UAAU,EACR,MAAM;GACH,OAAqB;GACrB,OAAqB;GACrB,OAAqB;GACrB,OAAqB;GACrB,OAAqB;GACrB,YAA0B;GAC1B,YAA0B;GAC1B,YAA0B;GAC1B,YAA0B;CAC7B,EACF;CACA,iBAAiB,EACf,WACF;AACF,CAAC;;;;AAKD,IAAY,gBAAL;CACL;CACA;CACA;CACA;CACA;CACA;CACA;CACA;;AACF;;;;AAKA,IAAY,cAAL;CACL;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;;AACF;;;;AAKA,IAAY,kBAAL;CACL;CACA;CACA;;AACF;;;;AAKA,MAAa,iBAAiB,IAC5B,8LACA;CACE,UAAU;EACR,MAAM;IACH,OAAqB;IACrB,OAAqB;IACrB,OAAqB;IACrB,OAAqB;IACrB,OAAqB;IACrB,YAA0B;IAC1B,YAA0B;IAC1B,YAA0B;IAC1B,YAA0B;EAC7B;EACA,OAAO;IACJ,YACC;IACD,cACC;IACD,gBACC;IACD,YACC;IACD,SACC;IACD,UACC;IACD,SACC;IACD,SAAwB;IACxB,YACC;IACD,iBACC;IACD,UACC;IACD,YACC;IACD,WAA0B;EAC7B;EACA,aAAa;IACV,cAA8B;IAC9B,YACC;IACD,YACC;IACD,YACC;IACD,YACC;IACD,aACC;IACD,aACC;IACD,aACC;IACD,aACC;IACD,cAA8B;EACjC;EACA,SAAS;IACN,YAA6B;IAC5B;IACA;IACA;IACA;GACF;IAEC,YAA6B;IAC5B;IACA;IACA;IACA;GACF;IAEC,SACC;IAED,SACC;IAED,mBACC;IAED,cACC;IAED,SAA0B;IACzB;IACA;IACA;GACF;IACC,UAA2B;IAE1B;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IAGA;IACA;IACA;IACA;IAGA;IAGA;IAGA;GACF;EACF;EAEA,WAAW;IACR,SAA4B;IAC5B,WAA8B;IAC9B,UAA6B;EAChC;EAEA,aAAa;GACX,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;EACN,OAAO;EACP,aAAa;EACb,WAAW;EACX,aAAa;CACf;AACF,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsHA,MAAa,UAA2B,EACtC,SACA,MACA,OACA,UACA,MACA,WACA,eACA,YAAY,OACZ,UACA,YACA,aACA,aACA,WACA,UACA,OACA,WACA,OAAO,UACP,oBAAoB,iBACpB,iBAAiB,cACjB,iBAAiB,cACjB,gBAAgB,aAChB,GAAG,YACC;CACJ,MAAM,SACJ,YAAY,UACZ,YAAY;CACd,MAAM,aAAa,CAAC,aAAa,QAAQ;CAEzC,MAAM,qBAAqB;EACzB,cAAc,aAAc,SAAS,SAAa;EAClD,mBAAmB,CAAC,aAAa,SAAY;EAC7C,oBAAoB;EACpB,iBAAiB;EACjB,iBAAiB;EACjB,gBAAgB,aAAa,SAAY,WAAW;EACpD,aAAa;EACb,gBAAiB,WAAW,SAAS;EACrC,iBAAiB,YAAY;EAC7B,iBAAiB;CACnB;CAEA,MAAM,iBACJ,sBACA,sBACA,sBACA;CAEF,OACE,qBAAC,UAAD;EACE,UAAU,aAAa;EACvB,MAAM,SAAS,SAAS;EAClB;EACN,WAAW,eAAe;GACxB;GACA;GACA;GACA;GACA;GACA,WACE,cACC;GACH;EACF,CAAC;EACD,GAAI;EACJ,GAAI;YAhBN;GAkBG,QAAQ,CAAC,aACR,oBAAC,MAAD;IACE,WAAW,mBAAmB;KAC5B;KACA,WAAW,GAAG,CAAC,kBAAkB,QAAQ,aAAa;IACxD,CAAC;IACD,eAAY;GACb;GAGH,oBAAC,OAAD;IACE,WAAW,GACT,oEACA,aAAa,iBAA0B,OACvC,aAAa,iBAA0B,OACvC,aAAa,iBAA0B,OACvC,aAAa,iBAA0B,KACzC;cAEA,oBAAC,QAAD;KACE,WAAW,mBAAmB;MAC5B;MACA,WAAW,GAAG,CAAC,kBAAkB,QAAQ,aAAa;KACxD,CAAC;KACU;KACX,eAAY;KACZ,eAAY;IACb;GACE;GAEJ,YACC,oBAAC,QAAD;IAAM,WAAU;IAAqC;GAAe;GAGrE,CAAC,YAAY,cAAc,oBAAC,QAAD;IAAM,WAAU;cAAW;GAAY;GAElE,aACC,oBAAC,WAAD;IACE,WAAW,mBAAmB;KAC5B;KACA,WAAW,GAAG,CAAC,kBAAkB,QAAQ,aAAa;IACxD,CAAC;IACD,eAAY;GACb;EAEG;;AAEZ"}
+{"version":3,"file":"Button.mjs","names":[],"sources":["../../../../src/components/Button/Button.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type { LucideIcon } from 'lucide-react';\nimport type { ButtonHTMLAttributes, DetailedHTMLProps, FC } from 'react';\nimport { ContainerRoundedSize as ButtonRoundedSize } from '../Container';\nimport { Loader } from '../Loader';\n\n/**\n * Button size variants for different use cases\n */\nexport enum ButtonSize {\n  XS = 'xs',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  ICON_SM = 'icon-sm',\n  ICON_MD = 'icon-md',\n  ICON_LG = 'icon-lg',\n  ICON_XL = 'icon-xl',\n}\n\nconst buttonIconVariants = cva('flex-none shrink-0', {\n  variants: {\n    size: {\n      [`${ButtonSize.XS}`]: 'size-2',\n      [`${ButtonSize.SM}`]: 'size-3',\n      [`${ButtonSize.MD}`]: 'size-4',\n      [`${ButtonSize.LG}`]: 'size-5',\n      [`${ButtonSize.XL}`]: 'size-6',\n      [`${ButtonSize.ICON_SM}`]: 'size-3',\n      [`${ButtonSize.ICON_MD}`]: 'size-4',\n      [`${ButtonSize.ICON_LG}`]: 'size-5',\n      [`${ButtonSize.ICON_XL}`]: 'size-6',\n    },\n  },\n  defaultVariants: {\n    size: ButtonSize.MD,\n  },\n});\n\n/**\n * Button visual style variants\n */\nexport enum ButtonVariant {\n  DEFAULT = 'default',\n  NONE = 'none',\n  OUTLINE = 'outline',\n  LINK = 'link',\n  INVISIBLE_LINK = 'invisible-link',\n  HOVERABLE = 'hoverable',\n  FADE = 'fade',\n  INPUT = 'input',\n}\n\n/**\n * Button color themes that work with the design system\n */\nexport enum ButtonColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  NEUTRAL = 'neutral',\n  LIGHT = 'light',\n  DARK = 'dark',\n  TEXT = 'text',\n  CARD = 'card',\n  TEXT_INVERSE = 'text-inverse',\n  CURRENT = 'current',\n  ERROR = 'error',\n  SUCCESS = 'success',\n  CUSTOM = 'custom',\n}\n\n/**\n * Text alignment options for button content\n */\nexport enum ButtonTextAlign {\n  LEFT = 'left',\n  CENTER = 'center',\n  RIGHT = 'right',\n}\n\n/**\n * Enhanced button variants with improved accessibility and focus states\n */\nexport const buttonVariants = cva(\n  'relative inline-flex cursor-pointer items-center justify-center font-medium ring-0 transition-all duration-300 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      size: {\n        [`${ButtonSize.XS}`]: 'min-h-7 px-3 text-xs max-md:py-1',\n        [`${ButtonSize.SM}`]: 'min-h-7 px-3 text-xs max-md:py-1',\n        [`${ButtonSize.MD}`]: 'min-h-8 px-6 text-sm max-md:py-2',\n        [`${ButtonSize.LG}`]: 'min-h-10 px-8 text-lg max-md:py-3',\n        [`${ButtonSize.XL}`]: 'min-h-11 px-10 text-xl max-md:py-4',\n        [`${ButtonSize.ICON_SM}`]: 'p-1.5',\n        [`${ButtonSize.ICON_MD}`]: 'p-1.5',\n        [`${ButtonSize.ICON_LG}`]: 'p-1.5',\n        [`${ButtonSize.ICON_XL}`]: 'p-3',\n      },\n      color: {\n        [`${ButtonColor.PRIMARY}`]:\n          'hover-primary-500/20 text-primary ring-primary-500/20 *:text-text-light',\n        [`${ButtonColor.SECONDARY}`]:\n          'hover-secondary-500/20 text-secondary ring-secondary-500/20 *:text-text-light',\n        [`${ButtonColor.NEUTRAL}`]:\n          'text-neutral ring-neutral-500/5 *:text-text-light',\n        [`${ButtonColor.CARD}`]:\n          'hover-card-500/20 text-card ring-card-500/20 *:text-text-light',\n        [`${ButtonColor.LIGHT}`]:\n          'hover-white-500/20 text-white ring-white/20 *:text-text-light',\n        [`${ButtonColor.DARK}`]:\n          'text-neutral-800 ring-text-light/50 *:text-text-light',\n        [`${ButtonColor.TEXT}`]: 'text-text ring-text/20 *:text-text-opposite',\n        [`${ButtonColor.CURRENT}`]:\n          'hover-current-500/10 text-current ring-current/10 *:text-text-light',\n        [`${ButtonColor.TEXT_INVERSE}`]:\n          'text-text-opposite ring-text-opposite/20 *:text-text',\n        [`${ButtonColor.ERROR}`]:\n          'hover-error-500/20 text-error ring-error/20 *:text-text-light',\n        [`${ButtonColor.SUCCESS}`]:\n          'hover-success-500/20 text-success ring-success/20 *:text-text-light',\n        [`${ButtonColor.CUSTOM}`]: '',\n      },\n      roundedSize: {\n        [`${ButtonRoundedSize.NONE}`]: 'rounded-none',\n        [`${ButtonRoundedSize.SM}`]:\n          'rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl',\n        [`${ButtonRoundedSize.MD}`]:\n          'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n        [`${ButtonRoundedSize.LG}`]:\n          'rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl',\n        [`${ButtonRoundedSize.XL}`]:\n          'rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl',\n        [`${ButtonRoundedSize['2xl']}`]:\n          'rounded-4xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[2.5rem]',\n        [`${ButtonRoundedSize['3xl']}`]:\n          'rounded-[2.5rem] [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[3rem]',\n        [`${ButtonRoundedSize['4xl']}`]:\n          'rounded-[3rem] [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[4rem]',\n        [`${ButtonRoundedSize['5xl']}`]:\n          'rounded-[4rem] [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[5rem]',\n        [`${ButtonRoundedSize.FULL}`]: 'rounded-full',\n      },\n      variant: {\n        [`${ButtonVariant.DEFAULT}`]: [\n          'bg-current',\n          'hover:bg-current/90',\n          'hover:ring-5',\n          'aria-selected:ring-5',\n        ],\n\n        [`${ButtonVariant.OUTLINE}`]: [\n          'rounded-2xl border-[1.3px] border-current bg-current/0 *:text-current!',\n          'hover:bg-current/20 focus-visible:bg-current/20',\n          'hover:ring-5 focus-visible:ring-5',\n          'aria-selected:ring-5',\n        ],\n\n        [`${ButtonVariant.NONE}`]:\n          'border-none bg-current/0 text-inherit hover:bg-current/0',\n\n        [`${ButtonVariant.LINK}`]:\n          'h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 *:text-current! hover:bg-transparent hover:underline',\n\n        [`${ButtonVariant.INVISIBLE_LINK}`]:\n          'h-auto justify-start border-inherit bg-transparent px-1 underline-offset-4 *:text-current! hover:bg-transparent',\n\n        [`${ButtonVariant.HOVERABLE}`]:\n          'rounded-lg border-none bg-current/0 transition *:text-current! hover:bg-current/20 aria-[current]:bg-current/5',\n\n        [`${ButtonVariant.FADE}`]: [\n          'rounded-lg border-none bg-current/10 ring-current/5 transition *:text-current! hover:bg-current/20 aria-[current]:bg-current/5',\n          'hover:ring-5 focus-visible:ring-5',\n          'aria-selected:ring-5',\n        ],\n        [`${ButtonVariant.INPUT}`]: [\n          // base styles\n          'text-text',\n          'w-full select-text resize-none rounded-2xl text-base shadow-none outline-none supports-[corner-shape:squircle]:rounded-4xl',\n          'transition-shadow duration-100 md:text-sm',\n          'ring-0', // base ring\n          'disabled:opacity-50',\n\n          'text-text',\n          'bg-neutral-50 dark:bg-neutral-950',\n          'ring-neutral-100 dark:ring-neutral-700',\n\n          // Hover ring (similar spirit to your input)\n          'hover:ring-3', // width\n          'aria-selected:ring-4',\n          'focus-visible:ring-3',\n          'disabled:ring-0',\n\n          // Focus ring + animation\n          'focus-visible:outline-none',\n\n          // Remove any weird box-shadow\n          '[box-shadow:none] focus:[box-shadow:none]',\n\n          // aria-invalid border color\n          'aria-invalid:border-error',\n        ],\n      },\n\n      textAlign: {\n        [`${ButtonTextAlign.LEFT}`]: 'justify-start text-left',\n        [`${ButtonTextAlign.CENTER}`]: 'justify-center text-center',\n        [`${ButtonTextAlign.RIGHT}`]: 'justify-end text-right',\n      },\n\n      isFullWidth: {\n        true: 'w-full',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: `${ButtonVariant.DEFAULT}`,\n      size: `${ButtonSize.MD}`,\n      color: `${ButtonColor.TEXT}`,\n      roundedSize: `${ButtonRoundedSize.MD}`,\n      textAlign: `${ButtonTextAlign.CENTER}`,\n      isFullWidth: false,\n    },\n  }\n);\n\n/**\n * Enhanced Button component props with comprehensive type safety and accessibility features\n */\nexport type ButtonProps = DetailedHTMLProps<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  HTMLButtonElement\n> &\n  VariantProps<typeof buttonVariants> & {\n    /**\n     * Accessible label for screen readers and assistive technologies.\n     * This is required for accessibility compliance.\n     */\n    label: string | null;\n\n    /**\n     * Optional icon to display on the left side of the button\n     */\n    Icon?: FC | LucideIcon;\n\n    /**\n     * Optional icon to display on the right side of the button\n     */\n    IconRight?: FC | LucideIcon;\n\n    /**\n     * Additional CSS classes for icon styling\n     */\n    iconClassName?: string;\n\n    /**\n     * Shows loading spinner and disables button interaction when true\n     */\n    isLoading?: boolean;\n\n    /**\n     * Marks the button as active (useful for navigation or toggle states)\n     */\n    isActive?: boolean;\n\n    /**\n     * Marks the button as selected\n     */\n    isSelected?: boolean;\n\n    /**\n     * Makes the button span the full width of its container\n     */\n    isFullWidth?: boolean;\n\n    /**\n     * Additional description for complex buttons (optional)\n     */\n    'aria-describedby'?: string;\n\n    /**\n     * Expanded state for collapsible sections (optional)\n     */\n    'aria-expanded'?: boolean;\n\n    /**\n     * Controls whether the button has popup/menu (optional)\n     */\n    'aria-haspopup'?:\n      | boolean\n      | 'true'\n      | 'false'\n      | 'menu'\n      | 'listbox'\n      | 'tree'\n      | 'grid'\n      | 'dialog';\n\n    /**\n     * Indicates if button controls are currently pressed (for toggle buttons)\n     */\n    'aria-pressed'?: boolean;\n  };\n\n/**\n * Button Component - A comprehensive, accessible button component\n *\n * Features:\n * - Full accessibility compliance with ARIA attributes\n * - Multiple variants and sizes for different use cases\n * - Icon support (left and right positioning)\n * - Loading states with spinner\n * - Keyboard navigation support\n * - Focus management with visible indicators\n * - Responsive design adaptations\n *\n * @example\n * ```tsx\n * // Basic button\n * <Button label=\"Click me\">Click me</Button>\n *\n * // Button with icon and loading state\n * <Button\n *   label=\"Save document\"\n *   Icon={SaveIcon}\n *   isLoading={saving}\n *   disabled={!hasChanges}\n * >\n *   Save\n * </Button>\n *\n * // Error action button\n * <Button\n *   variant={`${ButtonVariant.OUTLINE}`}\n *   color={ButtonColor.ERROR}\n *   label=\"Delete item permanently\"\n *   aria-describedby=\"delete-warning\"\n * >\n *   Delete\n * </Button>\n * ```\n */\nexport const Button: FC<ButtonProps> = ({\n  variant,\n  size,\n  color,\n  children,\n  Icon,\n  IconRight,\n  iconClassName,\n  isLoading = false,\n  isActive,\n  isSelected,\n  isFullWidth,\n  roundedSize,\n  textAlign,\n  disabled,\n  label,\n  className,\n  type = 'button',\n  'aria-describedby': ariaDescribedBy,\n  'aria-expanded': ariaExpanded,\n  'aria-haspopup': ariaHasPopup,\n  'aria-pressed': ariaPressed,\n  ...props\n}) => {\n  const isLink =\n    variant === `${ButtonVariant.LINK}` ||\n    variant === `${ButtonVariant.INVISIBLE_LINK}`;\n  const isIconOnly = !children && (Icon || IconRight);\n\n  const accessibilityProps = {\n    'aria-label': isIconOnly ? (label ?? undefined) : undefined,\n    'aria-labelledby': !isIconOnly ? undefined : undefined,\n    'aria-describedby': ariaDescribedBy,\n    'aria-expanded': ariaExpanded,\n    'aria-haspopup': ariaHasPopup,\n    'aria-pressed': isActive !== undefined ? isActive : ariaPressed,\n    'aria-busy': isLoading,\n    'aria-current': (isActive ? 'page' : undefined) as 'page' | undefined,\n    'aria-disabled': disabled || isLoading,\n    'aria-selected': isSelected,\n  };\n\n  const isSquareButton =\n    size === ButtonSize.ICON_SM ||\n    size === ButtonSize.ICON_MD ||\n    size === ButtonSize.ICON_LG ||\n    size === ButtonSize.ICON_XL;\n\n  return (\n    <button\n      disabled={isLoading || disabled}\n      role={isLink ? 'link' : 'button'}\n      type={type}\n      className={buttonVariants({\n        variant,\n        size,\n        color,\n        isFullWidth,\n        roundedSize,\n        textAlign:\n          textAlign ??\n          (IconRight ? ButtonTextAlign.LEFT : ButtonTextAlign.CENTER),\n        className,\n      })}\n      {...accessibilityProps}\n      {...props}\n    >\n      {Icon && !isLoading && (\n        <Icon\n          className={buttonIconVariants({\n            size,\n            className: cn(!isSquareButton && 'mr-3', iconClassName),\n          })}\n          aria-hidden=\"true\"\n        />\n      )}\n\n      <div\n        className={cn(\n          'flex items-center justify-center transition-[width] duration-300',\n          isLoading && size === ButtonSize.SM && 'w-3',\n          isLoading && size === ButtonSize.MD && 'w-4',\n          isLoading && size === ButtonSize.LG && 'w-6',\n          isLoading && size === ButtonSize.XL && 'w-8'\n        )}\n      >\n        <Loader\n          className={buttonIconVariants({\n            size,\n            className: cn(!isSquareButton && 'mr-3', iconClassName),\n          })}\n          isLoading={isLoading}\n          aria-hidden=\"true\"\n          data-testid=\"loader\"\n        />\n      </div>\n\n      {children && (\n        <span className=\"flex-1 truncate whitespace-nowrap\">{children}</span>\n      )}\n\n      {!children && isIconOnly && <span className=\"sr-only\">{label}</span>}\n\n      {IconRight && (\n        <IconRight\n          className={buttonIconVariants({\n            size,\n            className: cn(!isSquareButton && 'ml-3', iconClassName),\n          })}\n          aria-hidden=\"true\"\n        />\n      )}\n    </button>\n  );\n};\n"],"mappings":";;;;;;;;;;AAUA,IAAY,aAAL;CACL;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;;AACF;AAEA,MAAM,qBAAqB,IAAI,sBAAsB;CACnD,UAAU,EACR,MAAM;GACH,OAAqB;GACrB,OAAqB;GACrB,OAAqB;GACrB,OAAqB;GACrB,OAAqB;GACrB,YAA0B;GAC1B,YAA0B;GAC1B,YAA0B;GAC1B,YAA0B;CAC7B,EACF;CACA,iBAAiB,EACf,WACF;AACF,CAAC;;;;AAKD,IAAY,gBAAL;CACL;CACA;CACA;CACA;CACA;CACA;CACA;CACA;;AACF;;;;AAKA,IAAY,cAAL;CACL;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;;AACF;;;;AAKA,IAAY,kBAAL;CACL;CACA;CACA;;AACF;;;;AAKA,MAAa,iBAAiB,IAC5B,8LACA;CACE,UAAU;EACR,MAAM;IACH,OAAqB;IACrB,OAAqB;IACrB,OAAqB;IACrB,OAAqB;IACrB,OAAqB;IACrB,YAA0B;IAC1B,YAA0B;IAC1B,YAA0B;IAC1B,YAA0B;EAC7B;EACA,OAAO;IACJ,YACC;IACD,cACC;IACD,YACC;IACD,SACC;IACD,UACC;IACD,SACC;IACD,SAAwB;IACxB,YACC;IACD,iBACC;IACD,UACC;IACD,YACC;IACD,WAA0B;EAC7B;EACA,aAAa;IACV,cAA8B;IAC9B,YACC;IACD,YACC;IACD,YACC;IACD,YACC;IACD,aACC;IACD,aACC;IACD,aACC;IACD,aACC;IACD,cAA8B;EACjC;EACA,SAAS;IACN,YAA6B;IAC5B;IACA;IACA;IACA;GACF;IAEC,YAA6B;IAC5B;IACA;IACA;IACA;GACF;IAEC,SACC;IAED,SACC;IAED,mBACC;IAED,cACC;IAED,SAA0B;IACzB;IACA;IACA;GACF;IACC,UAA2B;IAE1B;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IAGA;IACA;IACA;IACA;IAGA;IAGA;IAGA;GACF;EACF;EAEA,WAAW;IACR,SAA4B;IAC5B,WAA8B;IAC9B,UAA6B;EAChC;EAEA,aAAa;GACX,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;EACN,OAAO;EACP,aAAa;EACb,WAAW;EACX,aAAa;CACf;AACF,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsHA,MAAa,UAA2B,EACtC,SACA,MACA,OACA,UACA,MACA,WACA,eACA,YAAY,OACZ,UACA,YACA,aACA,aACA,WACA,UACA,OACA,WACA,OAAO,UACP,oBAAoB,iBACpB,iBAAiB,cACjB,iBAAiB,cACjB,gBAAgB,aAChB,GAAG,YACC;CACJ,MAAM,SACJ,YAAY,UACZ,YAAY;CACd,MAAM,aAAa,CAAC,aAAa,QAAQ;CAEzC,MAAM,qBAAqB;EACzB,cAAc,aAAc,SAAS,SAAa;EAClD,mBAAmB,CAAC,aAAa,SAAY;EAC7C,oBAAoB;EACpB,iBAAiB;EACjB,iBAAiB;EACjB,gBAAgB,aAAa,SAAY,WAAW;EACpD,aAAa;EACb,gBAAiB,WAAW,SAAS;EACrC,iBAAiB,YAAY;EAC7B,iBAAiB;CACnB;CAEA,MAAM,iBACJ,sBACA,sBACA,sBACA;CAEF,OACE,qBAAC,UAAD;EACE,UAAU,aAAa;EACvB,MAAM,SAAS,SAAS;EAClB;EACN,WAAW,eAAe;GACxB;GACA;GACA;GACA;GACA;GACA,WACE,cACC;GACH;EACF,CAAC;EACD,GAAI;EACJ,GAAI;YAhBN;GAkBG,QAAQ,CAAC,aACR,oBAAC,MAAD;IACE,WAAW,mBAAmB;KAC5B;KACA,WAAW,GAAG,CAAC,kBAAkB,QAAQ,aAAa;IACxD,CAAC;IACD,eAAY;GACb;GAGH,oBAAC,OAAD;IACE,WAAW,GACT,oEACA,aAAa,iBAA0B,OACvC,aAAa,iBAA0B,OACvC,aAAa,iBAA0B,OACvC,aAAa,iBAA0B,KACzC;cAEA,oBAAC,QAAD;KACE,WAAW,mBAAmB;MAC5B;MACA,WAAW,GAAG,CAAC,kBAAkB,QAAQ,aAAa;KACxD,CAAC;KACU;KACX,eAAY;KACZ,eAAY;IACb;GACE;GAEJ,YACC,oBAAC,QAAD;IAAM,WAAU;IAAqC;GAAe;GAGrE,CAAC,YAAY,cAAc,oBAAC,QAAD;IAAM,WAAU;cAAW;GAAY;GAElE,aACC,oBAAC,WAAD;IACE,WAAW,mBAAmB;KAC5B;KACA,WAAW,GAAG,CAAC,kBAAkB,QAAQ,aAAa;IACxD,CAAC;IACD,eAAY;GACb;EAEG;;AAEZ"}

package/dist/esm/components/ContentEditor/ContentEditorTextArea.mjs

@@ -1,6 +1,6 @@
 'use client';
 
-import { useUser } from "../../hooks/useUser/index.mjs";
+import { useUser } from "../../api/useUser/index.mjs";
 import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
 import { AutoCompleteTextarea } from "../TextArea/AutocompleteTextArea.mjs";
 import { useEffect, useState } from "react";

package/dist/esm/components/ContentEditor/ContentEditorTextArea.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ContentEditorTextArea.mjs","names":[],"sources":["../../../../src/components/ContentEditor/ContentEditorTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { useUser } from '@hooks/useUser';\nimport { Check, X } from 'lucide-react';\nimport {\n  type ChangeEventHandler,\n  type FC,\n  type ReactNode,\n  useEffect,\n  useState,\n} from 'react';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { AutoCompleteTextarea, type AutoSizedTextAreaProps } from '../TextArea';\n\n/** Props for the ContentEditorTextArea component */\nexport type ContentEditorTextAreaProps = {\n  /** The current content to display and edit */\n  children: string;\n  /** Callback function called when content is saved/validated */\n  onContentChange: (content: string) => void;\n  /** Whether the editor is disabled */\n  disabled?: boolean;\n  /** Optional validation function to check content validity */\n  validate?: (content: string) => boolean;\n  /** Additional buttons to display alongside edit actions */\n  additionalButtons?: ReactNode;\n} & Omit<AutoSizedTextAreaProps, 'children'>;\n\n/**\n * ContentEditorTextArea Component\n *\n * An inline editing component for multi-line text with autocomplete functionality,\n * user authentication integration, and validation support. This component combines\n * the auto-sizing textarea with smart autocomplete features.\n *\n * ## Features\n * - **Auto-sizing Textarea**: Automatically adjusts height to content\n * - **Autocomplete Integration**: Smart text completion when user is authenticated\n * - **Validation Support**: Optional content validation with visual feedback\n * - **Action Buttons**: Built-in save/cancel with support for additional buttons\n * - **Keyboard Shortcuts**: Enter to save, Escape to cancel\n * - **User Authentication**: Autocomplete features activate based on auth status\n * - **Accessibility**: Full ARIA support and keyboard navigation\n *\n * ## Accessibility\n * - Proper ARIA labels and descriptions for all controls\n * - Keyboard navigation (Tab, Enter, Escape)\n * - Screen reader support for validation states and user auth status\n * - Focus management and visual indicators\n *\n * @param children - Current textarea content\n * @param onContentChange - Callback when content is saved\n * @param disabled - Whether the editor is disabled\n * @param validate - Optional validation function\n * @param additionalButtons - Extra buttons to display\n * @param props - Additional AutoSizedTextArea component props\n */\nexport const ContentEditorTextArea: FC<ContentEditorTextAreaProps> = ({\n  children,\n  onContentChange,\n  disabled,\n  validate,\n  additionalButtons,\n  ...props\n}) => {\n  const { isAuthenticated } = useUser();\n  const [newValue, setNewValue] = useState<string>(children);\n  const [resetIncrementor, setResetIncrementor] = useState<number>(0); // To reset the textarea on cancel\n  const isEdited: boolean = newValue !== children;\n\n  const handleCancel = () => {\n    setNewValue(children);\n    setResetIncrementor((prev) => prev + 1);\n  };\n\n  const handleValid = () => {\n    onContentChange(newValue);\n  };\n\n  const handleOnContentChange: ChangeEventHandler<HTMLTextAreaElement> = (e) =>\n    setNewValue(e.currentTarget.value ?? '');\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey) && !disabled && isValid) {\n      e.preventDefault();\n      handleValid();\n    } else if (e.key === 'Escape') {\n      e.preventDefault();\n      handleCancel();\n    }\n  };\n\n  useEffect(() => {\n    setNewValue(children);\n    // Force textarea to reset when children changes externally\n    setResetIncrementor((prev) => prev + 1);\n  }, [children]);\n\n  const isValid = validate?.(newValue) ?? true;\n\n  return (\n    <div\n      className=\"flex size-full flex-col items-center justify-between gap-2\"\n      key={children}\n      role=\"group\"\n      aria-label=\"Content editor textarea\"\n    >\n      <AutoCompleteTextarea\n        onChange={handleOnContentChange}\n        onKeyDown={handleKeyDown}\n        key={resetIncrementor}\n        variant=\"invisible\"\n        className=\"size-full\"\n        value={children}\n        isActive={isAuthenticated}\n        disabled={disabled}\n        aria-label=\"Editable textarea content\"\n        aria-describedby={\n          isEdited || additionalButtons\n            ? 'content-editor-textarea-actions'\n            : undefined\n        }\n        aria-invalid={!isValid}\n        {...props}\n      />\n      {(isEdited || additionalButtons) && (\n        <div\n          id=\"content-editor-textarea-actions\"\n          className=\"flex w-full items-center justify-end gap-2\"\n          role=\"group\"\n          aria-label=\"Edit actions\"\n        >\n          {isEdited && (\n            <>\n              <Button\n                Icon={Check}\n                label={`Save changes${!isValid ? ' (invalid content)' : ''}`}\n                variant={ButtonVariant.HOVERABLE}\n                color={ButtonColor.TEXT}\n                size={ButtonSize.ICON_SM}\n                className=\"cursor-pointer hover:scale-110\"\n                disabled={disabled || !isValid}\n                onClick={handleValid}\n                aria-describedby={\n                  !isValid ? 'textarea-validation-error' : undefined\n                }\n              />\n              <Button\n                Icon={X}\n                label=\"Cancel changes\"\n                variant={ButtonVariant.HOVERABLE}\n                size={ButtonSize.ICON_SM}\n                color={ButtonColor.TEXT}\n                className=\"cursor-pointer hover:scale-110\"\n                onClick={handleCancel}\n                disabled={disabled}\n              />\n            </>\n          )}\n          {additionalButtons}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,MAAa,yBAAyD,EACpE,UACA,iBACA,UACA,UACA,mBACA,GAAG,YACC;CACJ,MAAM,EAAE,oBAAoB,QAAQ;CACpC,MAAM,CAAC,UAAU,eAAe,SAAiB,QAAQ;CACzD,MAAM,CAAC,kBAAkB,uBAAuB,SAAiB,CAAC;CAClE,MAAM,WAAoB,aAAa;CAEvC,MAAM,qBAAqB;EACzB,YAAY,QAAQ;EACpB,qBAAqB,SAAS,OAAO,CAAC;CACxC;CAEA,MAAM,oBAAoB;EACxB,gBAAgB,QAAQ;CAC1B;CAEA,MAAM,yBAAkE,MACtE,YAAY,EAAE,cAAc,SAAS,EAAE;CAEzC,MAAM,iBAAiB,MAAgD;EACrE,IAAI,EAAE,QAAQ,YAAY,EAAE,WAAW,EAAE,YAAY,CAAC,YAAY,SAAS;GACzE,EAAE,eAAe;GACjB,YAAY;EACd,OAAO,IAAI,EAAE,QAAQ,UAAU;GAC7B,EAAE,eAAe;GACjB,aAAa;EACf;CACF;CAEA,gBAAgB;EACd,YAAY,QAAQ;EAEpB,qBAAqB,SAAS,OAAO,CAAC;CACxC,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,UAAU,WAAW,QAAQ,KAAK;CAExC,OACE,qBAAC,OAAD;EACE,WAAU;EAEV,MAAK;EACL,cAAW;YAJb,CAME,oBAAC,sBAAD;GACE,UAAU;GACV,WAAW;GAEX,SAAQ;GACR,WAAU;GACV,OAAO;GACP,UAAU;GACA;GACV,cAAW;GACX,oBACE,YAAY,oBACR,oCACA;GAEN,gBAAc,CAAC;GACf,GAAI;EACL,GAdM,gBAcN,IACC,YAAY,sBACZ,qBAAC,OAAD;GACE,IAAG;GACH,WAAU;GACV,MAAK;GACL,cAAW;aAJb,CAMG,YACC,8CACE,oBAAC,QAAD;IACE,MAAM;IACN,OAAO,eAAe,CAAC,UAAU,uBAAuB;IACxD;IACA;IACA;IACA,WAAU;IACV,UAAU,YAAY,CAAC;IACvB,SAAS;IACT,oBACE,CAAC,UAAU,8BAA8B;GAE5C,IACD,oBAAC,QAAD;IACE,MAAM;IACN,OAAM;IACN;IACA;IACA;IACA,WAAU;IACV,SAAS;IACC;GACX,EACD,MAEH,iBACE;IAEJ;IA3DE,QA2DF;AAET"}
+{"version":3,"file":"ContentEditorTextArea.mjs","names":[],"sources":["../../../../src/components/ContentEditor/ContentEditorTextArea.tsx"],"sourcesContent":["'use client';\n\nimport { useUser } from '@api/useUser';\nimport { Check, X } from 'lucide-react';\nimport {\n  type ChangeEventHandler,\n  type FC,\n  type ReactNode,\n  useEffect,\n  useState,\n} from 'react';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { AutoCompleteTextarea, type AutoSizedTextAreaProps } from '../TextArea';\n\n/** Props for the ContentEditorTextArea component */\nexport type ContentEditorTextAreaProps = {\n  /** The current content to display and edit */\n  children: string;\n  /** Callback function called when content is saved/validated */\n  onContentChange: (content: string) => void;\n  /** Whether the editor is disabled */\n  disabled?: boolean;\n  /** Optional validation function to check content validity */\n  validate?: (content: string) => boolean;\n  /** Additional buttons to display alongside edit actions */\n  additionalButtons?: ReactNode;\n} & Omit<AutoSizedTextAreaProps, 'children'>;\n\n/**\n * ContentEditorTextArea Component\n *\n * An inline editing component for multi-line text with autocomplete functionality,\n * user authentication integration, and validation support. This component combines\n * the auto-sizing textarea with smart autocomplete features.\n *\n * ## Features\n * - **Auto-sizing Textarea**: Automatically adjusts height to content\n * - **Autocomplete Integration**: Smart text completion when user is authenticated\n * - **Validation Support**: Optional content validation with visual feedback\n * - **Action Buttons**: Built-in save/cancel with support for additional buttons\n * - **Keyboard Shortcuts**: Enter to save, Escape to cancel\n * - **User Authentication**: Autocomplete features activate based on auth status\n * - **Accessibility**: Full ARIA support and keyboard navigation\n *\n * ## Accessibility\n * - Proper ARIA labels and descriptions for all controls\n * - Keyboard navigation (Tab, Enter, Escape)\n * - Screen reader support for validation states and user auth status\n * - Focus management and visual indicators\n *\n * @param children - Current textarea content\n * @param onContentChange - Callback when content is saved\n * @param disabled - Whether the editor is disabled\n * @param validate - Optional validation function\n * @param additionalButtons - Extra buttons to display\n * @param props - Additional AutoSizedTextArea component props\n */\nexport const ContentEditorTextArea: FC<ContentEditorTextAreaProps> = ({\n  children,\n  onContentChange,\n  disabled,\n  validate,\n  additionalButtons,\n  ...props\n}) => {\n  const { isAuthenticated } = useUser();\n  const [newValue, setNewValue] = useState<string>(children);\n  const [resetIncrementor, setResetIncrementor] = useState<number>(0); // To reset the textarea on cancel\n  const isEdited: boolean = newValue !== children;\n\n  const handleCancel = () => {\n    setNewValue(children);\n    setResetIncrementor((prev) => prev + 1);\n  };\n\n  const handleValid = () => {\n    onContentChange(newValue);\n  };\n\n  const handleOnContentChange: ChangeEventHandler<HTMLTextAreaElement> = (e) =>\n    setNewValue(e.currentTarget.value ?? '');\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n    if (e.key === 'Enter' && (e.metaKey || e.ctrlKey) && !disabled && isValid) {\n      e.preventDefault();\n      handleValid();\n    } else if (e.key === 'Escape') {\n      e.preventDefault();\n      handleCancel();\n    }\n  };\n\n  useEffect(() => {\n    setNewValue(children);\n    // Force textarea to reset when children changes externally\n    setResetIncrementor((prev) => prev + 1);\n  }, [children]);\n\n  const isValid = validate?.(newValue) ?? true;\n\n  return (\n    <div\n      className=\"flex size-full flex-col items-center justify-between gap-2\"\n      key={children}\n      role=\"group\"\n      aria-label=\"Content editor textarea\"\n    >\n      <AutoCompleteTextarea\n        onChange={handleOnContentChange}\n        onKeyDown={handleKeyDown}\n        key={resetIncrementor}\n        variant=\"invisible\"\n        className=\"size-full\"\n        value={children}\n        isActive={isAuthenticated}\n        disabled={disabled}\n        aria-label=\"Editable textarea content\"\n        aria-describedby={\n          isEdited || additionalButtons\n            ? 'content-editor-textarea-actions'\n            : undefined\n        }\n        aria-invalid={!isValid}\n        {...props}\n      />\n      {(isEdited || additionalButtons) && (\n        <div\n          id=\"content-editor-textarea-actions\"\n          className=\"flex w-full items-center justify-end gap-2\"\n          role=\"group\"\n          aria-label=\"Edit actions\"\n        >\n          {isEdited && (\n            <>\n              <Button\n                Icon={Check}\n                label={`Save changes${!isValid ? ' (invalid content)' : ''}`}\n                variant={ButtonVariant.HOVERABLE}\n                color={ButtonColor.TEXT}\n                size={ButtonSize.ICON_SM}\n                className=\"cursor-pointer hover:scale-110\"\n                disabled={disabled || !isValid}\n                onClick={handleValid}\n                aria-describedby={\n                  !isValid ? 'textarea-validation-error' : undefined\n                }\n              />\n              <Button\n                Icon={X}\n                label=\"Cancel changes\"\n                variant={ButtonVariant.HOVERABLE}\n                size={ButtonSize.ICON_SM}\n                color={ButtonColor.TEXT}\n                className=\"cursor-pointer hover:scale-110\"\n                onClick={handleCancel}\n                disabled={disabled}\n              />\n            </>\n          )}\n          {additionalButtons}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,MAAa,yBAAyD,EACpE,UACA,iBACA,UACA,UACA,mBACA,GAAG,YACC;CACJ,MAAM,EAAE,oBAAoB,QAAQ;CACpC,MAAM,CAAC,UAAU,eAAe,SAAiB,QAAQ;CACzD,MAAM,CAAC,kBAAkB,uBAAuB,SAAiB,CAAC;CAClE,MAAM,WAAoB,aAAa;CAEvC,MAAM,qBAAqB;EACzB,YAAY,QAAQ;EACpB,qBAAqB,SAAS,OAAO,CAAC;CACxC;CAEA,MAAM,oBAAoB;EACxB,gBAAgB,QAAQ;CAC1B;CAEA,MAAM,yBAAkE,MACtE,YAAY,EAAE,cAAc,SAAS,EAAE;CAEzC,MAAM,iBAAiB,MAAgD;EACrE,IAAI,EAAE,QAAQ,YAAY,EAAE,WAAW,EAAE,YAAY,CAAC,YAAY,SAAS;GACzE,EAAE,eAAe;GACjB,YAAY;EACd,OAAO,IAAI,EAAE,QAAQ,UAAU;GAC7B,EAAE,eAAe;GACjB,aAAa;EACf;CACF;CAEA,gBAAgB;EACd,YAAY,QAAQ;EAEpB,qBAAqB,SAAS,OAAO,CAAC;CACxC,GAAG,CAAC,QAAQ,CAAC;CAEb,MAAM,UAAU,WAAW,QAAQ,KAAK;CAExC,OACE,qBAAC,OAAD;EACE,WAAU;EAEV,MAAK;EACL,cAAW;YAJb,CAME,oBAAC,sBAAD;GACE,UAAU;GACV,WAAW;GAEX,SAAQ;GACR,WAAU;GACV,OAAO;GACP,UAAU;GACA;GACV,cAAW;GACX,oBACE,YAAY,oBACR,oCACA;GAEN,gBAAc,CAAC;GACf,GAAI;EACL,GAdM,gBAcN,IACC,YAAY,sBACZ,qBAAC,OAAD;GACE,IAAG;GACH,WAAU;GACV,MAAK;GACL,cAAW;aAJb,CAMG,YACC,8CACE,oBAAC,QAAD;IACE,MAAM;IACN,OAAO,eAAe,CAAC,UAAU,uBAAuB;IACxD;IACA;IACA;IACA,WAAU;IACV,UAAU,YAAY,CAAC;IACvB,SAAS;IACT,oBACE,CAAC,UAAU,8BAA8B;GAE5C,IACD,oBAAC,QAAD;IACE,MAAM;IACN,OAAM;IACN;IACA;IACA;IACA,WAAU;IACV,SAAS;IACC;GACX,EACD,MAEH,iBACE;IAEJ;IA3DE,QA2DF;AAET"}

package/dist/esm/components/DictionaryFieldEditor/ContentEditorView/TextEditor.mjs

@@ -1,6 +1,6 @@
 'use client';
 
-import { useAuditContentDeclarationField } from "../../../hooks/reactQuery.mjs";
+import { useAuditContentDeclarationField } from "../../../api/hooks/ai.mjs";
 import { Container } from "../../Container/index.mjs";
 import { Loader } from "../../Loader/index.mjs";
 import { Button, ButtonColor, ButtonSize, ButtonTextAlign, ButtonVariant } from "../../Button/Button.mjs";