@intlayer/design-system 6.1.4 → 6.1.6-canary.0

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

@@ -1,42 +1,211 @@
 import { LocalesValues } from '@intlayer/config/client';
 import { VariantProps } from 'class-variance-authority';
 import { AnchorHTMLAttributes, DetailedHTMLProps, FC } from 'react';
+/**
+ * Visual style variants for Link component
+ *
+ * @enum {string}
+ */
 export declare enum LinkVariant {
+    /** Default underlined link with hover effects */
     DEFAULT = "default",
+    /** Link without visible underline or hover effects */
     INVISIBLE_LINK = "invisible-link",
+    /** Button-styled link with solid background */
     BUTTON = "button",
+    /** Button-styled link with outlined border */
     BUTTON_OUTLINED = "button-outlined",
+    /** Link with subtle hover background effect */
     HOVERABLE = "hoverable"
 }
+/**
+ * Color theme variants for Link component
+ *
+ * @enum {string}
+ */
 export declare enum LinkColor {
+    /** Primary brand color */
     PRIMARY = "primary",
+    /** Secondary brand color */
     SECONDARY = "secondary",
+    /** Destructive/danger color for critical actions */
     DESTRUCTIVE = "destructive",
+    /** Neutral/muted color for less prominent links */
     NEUTRAL = "neutral",
+    /** Light color for dark backgrounds */
     LIGHT = "light",
+    /** Dark color for light backgrounds */
     DARK = "dark",
+    /** Default text color */
     TEXT = "text",
+    /** Inverse text color for opposite backgrounds */
     TEXT_INVERSE = "text-inverse",
+    /** Error/red color for error states */
     ERROR = "error",
+    /** Success/green color for positive actions */
     SUCCESS = "success",
+    /** Custom color - no default styling applied */
     CUSTOM = "custom"
 }
+/**
+ * Underline style options for Link component
+ *
+ * @enum {string}
+ */
 export declare enum LinkUnderlined {
+    /** Default underline behavior based on variant */
     DEFAULT = "default",
+    /** Always show underline */
     TRUE = "true",
+    /** Never show underline */
     FALSE = "false"
 }
+/**
+ * Class variance authority configuration for Link component styling
+ * Defines the visual appearance based on variant, color, and underline options
+ */
 export declare const linkVariants: (props?: ({
     variant?: "button" | "default" | "invisible-link" | "hoverable" | "button-outlined" | null | undefined;
     color?: "text" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "text-inverse" | "error" | "success" | "custom" | null | undefined;
     underlined?: boolean | LinkUnderlined.DEFAULT | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * Props interface for the Link component
+ *
+ * @interface LinkProps
+ * @extends {DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>}
+ * @extends {VariantProps<typeof linkVariants>}
+ */
 export type LinkProps = DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> & VariantProps<typeof linkVariants> & {
+    /**
+     * Accessible label for screen readers (required)
+     * Provides context about what the link does or where it leads
+     * @example "Navigate to home page"
+     */
     label: string;
+    /**
+     * Whether this link opens in a new tab/window
+     * When true, adds target="_blank" and security attributes
+     * Auto-detected for URLs starting with http/https when undefined
+     * @default undefined (auto-detect based on href)
+     */
     isExternalLink?: boolean;
+    /**
+     * Whether this link represents the current page/active state
+     * Adds aria-current="page" for accessibility
+     * @default false
+     */
     isActive?: boolean;
+    /**
+     * Locale for internationalized URLs
+     * When provided, URLs are automatically localized using Intlayer
+     * @example 'fr', 'es', 'en'
+     */
     locale?: LocalesValues;
 };
+/**
+ * Utility function to determine if a link should be treated as external
+ *
+ * @param props - Link component props containing href and isExternalLink
+ * @returns {boolean} True if the link should open externally
+ *
+ * @example
+ * ```tsx
+ * checkIsExternalLink({ href: 'https://example.com' }) // true
+ * checkIsExternalLink({ href: '/internal-page' }) // false
+ * checkIsExternalLink({ href: '/page', isExternalLink: true }) // true
+ * ```
+ */
 export declare const checkIsExternalLink: ({ href, isExternalLink: isExternalLinkProp, }: LinkProps) => boolean;
+/**
+ * Link Component
+ *
+ * A versatile link component that handles both internal and external navigation
+ * with comprehensive internationalization support and multiple visual variants.
+ *
+ * ## Key Features
+ * - **Multiple Variants**: Default, invisible, button, outlined button, and hoverable styles
+ * - **Color Themes**: Comprehensive color palette for different contexts and meanings
+ * - **External Link Detection**: Automatic detection and handling of external URLs
+ * - **Internationalization**: Built-in support for localized URLs via Intlayer
+ * - **Security**: Automatic security attributes for external links (noopener, noreferrer)
+ * - **Accessibility**: Full ARIA support with proper labels and current page indication
+ * - **Visual Feedback**: Hover effects, underline options, and active states
+ *
+ * ## Use Cases
+ * - Navigation within applications (internal links)
+ * - External links to other websites with security measures
+ * - Button-styled links for call-to-action scenarios
+ * - Subtle hoverable links for navigation menus
+ * - Multi-language website navigation with automatic URL localization
+ *
+ * ## Security Features
+ * External links automatically receive security attributes:
+ * - `rel="noopener noreferrer nofollow"` - Prevents security vulnerabilities
+ * - `target="_blank"` - Opens in new tab/window
+ * - External link icon indication for user clarity
+ *
+ * ## Internationalization
+ * When used with Intlayer, the component automatically:
+ * - Localizes internal URLs based on the current or specified locale
+ * - Sets appropriate `hrefLang` attributes for SEO
+ * - Maintains proper URL structure for multi-language sites
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic internal link
+ * <Link href="/about" label="Go to about page">
+ *   About Us
+ * </Link>
+ *
+ * // External link with auto-detection
+ * <Link href="https://example.com" label="Visit external site">
+ *   External Site
+ * </Link>
+ *
+ * // Button-styled link
+ * <Link
+ *   href="/signup"
+ *   variant={LinkVariant.BUTTON}
+ *   color={LinkColor.PRIMARY}
+ *   label="Sign up for account"
+ * >
+ *   Get Started
+ * </Link>
+ *
+ * // Localized link
+ * <Link
+ *   href="/products"
+ *   locale="fr"
+ *   label="Voir les produits"
+ * >
+ *   Produits
+ * </Link>
+ *
+ * // Active navigation link
+ * <Link
+ *   href="/dashboard"
+ *   isActive={true}
+ *   variant={LinkVariant.HOVERABLE}
+ *   label="Current page: Dashboard"
+ * >
+ *   Dashboard
+ * </Link>
+ * ```
+ *
+ * @param props - Link component props
+ * @param props.children - Content to display inside the link
+ * @param props.href - URL or path to navigate to
+ * @param props.label - Accessible label describing the link's purpose
+ * @param props.variant - Visual style variant
+ * @param props.color - Color theme for the link
+ * @param props.underlined - Underline visibility option
+ * @param props.isExternalLink - Override external link detection
+ * @param props.isActive - Whether this link represents the current page
+ * @param props.locale - Locale for URL internationalization
+ * @param props.className - Additional CSS classes
+ * @returns Accessible and internationalized link component
+ */
 export declare const Link: FC<LinkProps>;
 //# sourceMappingURL=Link.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/components/Link/Link.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,iBAAiB,EACtB,KAAK,EAAE,EACR,MAAM,OAAO,CAAC;AAGf,oBAAY,WAAW;IACrB,OAAO,YAAY;IACnB,cAAc,mBAAmB;IACjC,MAAM,WAAW;IACjB,eAAe,oBAAoB;IACnC,SAAS,cAAc;CACxB;AAED,oBAAY,SAAS;IACnB,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,WAAW,gBAAgB;IAC3B,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,IAAI,SAAS;IACb,IAAI,SAAS;IACb,YAAY,iBAAiB;IAC7B,KAAK,UAAU;IACf,OAAO,YAAY;IACnB,MAAM,WAAW;CAClB;AAED,oBAAY,cAAc;IACxB,OAAO,YAAY;IACnB,IAAI,SAAS;IACb,KAAK,UAAU;CAChB;AAED,eAAO,MAAM,YAAY;;;;8EA0CxB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,iBAAiB,CACvC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,iBAAiB,CAClB,GACC,YAAY,CAAC,OAAO,YAAY,CAAC,GAAG;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB,CAAC;AAEJ,eAAO,MAAM,mBAAmB,GAAI,+CAGjC,SAAS,KAAG,OASd,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CA0D9B,CAAC"}
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/components/Link/Link.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAE7D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,EACL,KAAK,oBAAoB,EACzB,KAAK,iBAAiB,EACtB,KAAK,EAAE,EACR,MAAM,OAAO,CAAC;AAGf;;;;GAIG;AACH,oBAAY,WAAW;IACrB,iDAAiD;IACjD,OAAO,YAAY;IACnB,sDAAsD;IACtD,cAAc,mBAAmB;IACjC,+CAA+C;IAC/C,MAAM,WAAW;IACjB,8CAA8C;IAC9C,eAAe,oBAAoB;IACnC,+CAA+C;IAC/C,SAAS,cAAc;CACxB;AAED;;;;GAIG;AACH,oBAAY,SAAS;IACnB,0BAA0B;IAC1B,OAAO,YAAY;IACnB,4BAA4B;IAC5B,SAAS,cAAc;IACvB,oDAAoD;IACpD,WAAW,gBAAgB;IAC3B,mDAAmD;IACnD,OAAO,YAAY;IACnB,uCAAuC;IACvC,KAAK,UAAU;IACf,uCAAuC;IACvC,IAAI,SAAS;IACb,yBAAyB;IACzB,IAAI,SAAS;IACb,kDAAkD;IAClD,YAAY,iBAAiB;IAC7B,uCAAuC;IACvC,KAAK,UAAU;IACf,+CAA+C;IAC/C,OAAO,YAAY;IACnB,gDAAgD;IAChD,MAAM,WAAW;CAClB;AAED;;;;GAIG;AACH,oBAAY,cAAc;IACxB,kDAAkD;IAClD,OAAO,YAAY;IACnB,4BAA4B;IAC5B,IAAI,SAAS;IACb,2BAA2B;IAC3B,KAAK,UAAU;CAChB;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY;;;;8EA0CxB,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,MAAM,SAAS,GAAG,iBAAiB,CACvC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,iBAAiB,CAClB,GACC,YAAY,CAAC,OAAO,YAAY,CAAC,GAAG;IAClC;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB,CAAC;AAEJ;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,mBAAmB,GAAI,+CAGjC,SAAS,KAAG,OASd,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyFG;AACH,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CA0D9B,CAAC"}

package/dist/components/Link/Link.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Link.mjs","sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["import configuration from '@intlayer/config/built';\nimport type { LocalesValues } from '@intlayer/config/client';\nimport { getLocalizedUrl } from '@intlayer/core';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ExternalLink } from 'lucide-react';\nimport {\n  type AnchorHTMLAttributes,\n  type DetailedHTMLProps,\n  type FC,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\nexport enum LinkVariant {\n  DEFAULT = 'default',\n  INVISIBLE_LINK = 'invisible-link',\n  BUTTON = 'button',\n  BUTTON_OUTLINED = 'button-outlined',\n  HOVERABLE = 'hoverable',\n}\n\nexport enum LinkColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  DESTRUCTIVE = 'destructive',\n  NEUTRAL = 'neutral',\n  LIGHT = 'light',\n  DARK = 'dark',\n  TEXT = 'text',\n  TEXT_INVERSE = 'text-inverse',\n  ERROR = 'error',\n  SUCCESS = 'success',\n  CUSTOM = 'custom',\n}\n\nexport enum LinkUnderlined {\n  DEFAULT = 'default',\n  TRUE = 'true',\n  FALSE = 'false',\n}\n\nexport const linkVariants = cva(\n  'gap-3 transition focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        [`${LinkVariant.DEFAULT}`]:\n          'h-auto justify-start border-inherit bg-current/0 px-1 underline-offset-4 hover:bg-current/0 hover:underline',\n        [`${LinkVariant.INVISIBLE_LINK}`]:\n          'h-auto justify-start border-inherit bg-current/0 px-1 underline-offset-4 hover:bg-current/0',\n        [`${LinkVariant.BUTTON}`]:\n          'rounded-lg bg-current *:text-text-opposite min-h-8 px-6 max-md:py-2 text-sm flex items-center justify-center gap-2 whitespace-nowrap font-medium transition focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',\n        [`${LinkVariant.BUTTON_OUTLINED}`]:\n          'rounded-lg border-[1.5px] hover:bg-current/30 min-h-8 px-6 max-md:py-2 text-sm flex items-center justify-center gap-2 whitespace-nowrap font-medium transition focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',\n        [`${LinkVariant.HOVERABLE}`]:\n          'block rounded-lg border-none bg-current/0 transition hover:bg-current/20 aria-[current]:bg-current/5',\n      },\n      color: {\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      underlined: {\n        [LinkUnderlined.DEFAULT]: '',\n        [LinkUnderlined.TRUE]: 'underline',\n        [LinkUnderlined.FALSE]: 'no-underline',\n      },\n    },\n\n    defaultVariants: {\n      variant: LinkVariant.DEFAULT,\n      color: LinkColor.PRIMARY,\n      underlined: LinkUnderlined.DEFAULT,\n    },\n  }\n);\n\nexport type LinkProps = DetailedHTMLProps<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  HTMLAnchorElement\n> &\n  VariantProps<typeof linkVariants> & {\n    label: string;\n    isExternalLink?: boolean;\n    isActive?: boolean;\n    locale?: LocalesValues;\n  };\n\nexport const checkIsExternalLink = ({\n  href,\n  isExternalLink: isExternalLinkProp,\n}: LinkProps): boolean => {\n  const isValidHref = typeof href === 'string' && href.trim() !== '';\n  const isExternalLink =\n    isExternalLinkProp === true ||\n    (typeof isExternalLinkProp === 'undefined' &&\n      isValidHref &&\n      /^https?:\\/\\//.test(href));\n\n  return isExternalLink;\n};\n\nexport const Link: FC<LinkProps> = (props) => {\n  const {\n    variant = LinkVariant.DEFAULT,\n    color = LinkColor.PRIMARY,\n    children,\n    label,\n    className,\n    isActive,\n    underlined,\n    locale,\n    isExternalLink: isExternalLinkProp,\n    href: hrefProp,\n    ...otherProps\n  } = props;\n  const { internationalization } = configuration;\n\n  const isExternalLink = checkIsExternalLink(props);\n  const isChildrenString = typeof children === 'string';\n\n  const rel = isExternalLink ? 'noopener noreferrer nofollow' : undefined;\n\n  const target = isExternalLink ? '_blank' : '_self';\n\n  const hrefLang = locale\n    ? locale === internationalization.defaultLocale\n      ? 'x-default'\n      : locale\n    : undefined;\n\n  const href =\n    locale && hrefProp && !isExternalLink\n      ? getLocalizedUrl(hrefProp, locale)\n      : hrefProp;\n\n  return (\n    <a\n      href={href}\n      hrefLang={hrefLang}\n      aria-label={label}\n      rel={rel}\n      target={target}\n      aria-current={isActive ? 'page' : undefined}\n      className={cn(\n        linkVariants({\n          variant,\n          color,\n          underlined,\n          className,\n        })\n      )}\n      {...otherProps}\n    >\n      {variant === 'button' ? <span>{children}</span> : children}\n      {isExternalLink && isChildrenString && (\n        <ExternalLink className=\"ml-2 inline-block size-4\" />\n      )}\n    </a>\n  );\n};\n"],"names":["LinkVariant","LinkColor","LinkUnderlined"],"mappings":"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"}
+{"version":3,"file":"Link.mjs","sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["import configuration from '@intlayer/config/built';\nimport type { LocalesValues } from '@intlayer/config/client';\nimport { getLocalizedUrl } from '@intlayer/core';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ExternalLink } from 'lucide-react';\nimport {\n  type AnchorHTMLAttributes,\n  type DetailedHTMLProps,\n  type FC,\n} from 'react';\nimport { cn } from '../../utils/cn';\n\n/**\n * Visual style variants for Link component\n *\n * @enum {string}\n */\nexport enum LinkVariant {\n  /** Default underlined link with hover effects */\n  DEFAULT = 'default',\n  /** Link without visible underline or hover effects */\n  INVISIBLE_LINK = 'invisible-link',\n  /** Button-styled link with solid background */\n  BUTTON = 'button',\n  /** Button-styled link with outlined border */\n  BUTTON_OUTLINED = 'button-outlined',\n  /** Link with subtle hover background effect */\n  HOVERABLE = 'hoverable',\n}\n\n/**\n * Color theme variants for Link component\n *\n * @enum {string}\n */\nexport enum LinkColor {\n  /** Primary brand color */\n  PRIMARY = 'primary',\n  /** Secondary brand color */\n  SECONDARY = 'secondary',\n  /** Destructive/danger color for critical actions */\n  DESTRUCTIVE = 'destructive',\n  /** Neutral/muted color for less prominent links */\n  NEUTRAL = 'neutral',\n  /** Light color for dark backgrounds */\n  LIGHT = 'light',\n  /** Dark color for light backgrounds */\n  DARK = 'dark',\n  /** Default text color */\n  TEXT = 'text',\n  /** Inverse text color for opposite backgrounds */\n  TEXT_INVERSE = 'text-inverse',\n  /** Error/red color for error states */\n  ERROR = 'error',\n  /** Success/green color for positive actions */\n  SUCCESS = 'success',\n  /** Custom color - no default styling applied */\n  CUSTOM = 'custom',\n}\n\n/**\n * Underline style options for Link component\n *\n * @enum {string}\n */\nexport enum LinkUnderlined {\n  /** Default underline behavior based on variant */\n  DEFAULT = 'default',\n  /** Always show underline */\n  TRUE = 'true',\n  /** Never show underline */\n  FALSE = 'false',\n}\n\n/**\n * Class variance authority configuration for Link component styling\n * Defines the visual appearance based on variant, color, and underline options\n */\nexport const linkVariants = cva(\n  'gap-3 transition focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        [`${LinkVariant.DEFAULT}`]:\n          'h-auto justify-start border-inherit bg-current/0 px-1 underline-offset-4 hover:bg-current/0 hover:underline',\n        [`${LinkVariant.INVISIBLE_LINK}`]:\n          'h-auto justify-start border-inherit bg-current/0 px-1 underline-offset-4 hover:bg-current/0',\n        [`${LinkVariant.BUTTON}`]:\n          'rounded-lg bg-current *:text-text-opposite min-h-8 px-6 max-md:py-2 text-sm flex items-center justify-center gap-2 whitespace-nowrap font-medium transition focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',\n        [`${LinkVariant.BUTTON_OUTLINED}`]:\n          'rounded-lg border-[1.5px] hover:bg-current/30 min-h-8 px-6 max-md:py-2 text-sm flex items-center justify-center gap-2 whitespace-nowrap font-medium transition focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50',\n        [`${LinkVariant.HOVERABLE}`]:\n          'block rounded-lg border-none bg-current/0 transition hover:bg-current/20 aria-[current]:bg-current/5',\n      },\n      color: {\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      underlined: {\n        [LinkUnderlined.DEFAULT]: '',\n        [LinkUnderlined.TRUE]: 'underline',\n        [LinkUnderlined.FALSE]: 'no-underline',\n      },\n    },\n\n    defaultVariants: {\n      variant: LinkVariant.DEFAULT,\n      color: LinkColor.PRIMARY,\n      underlined: LinkUnderlined.DEFAULT,\n    },\n  }\n);\n\n/**\n * Props interface for the Link component\n *\n * @interface LinkProps\n * @extends {DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>}\n * @extends {VariantProps<typeof linkVariants>}\n */\nexport type LinkProps = DetailedHTMLProps<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  HTMLAnchorElement\n> &\n  VariantProps<typeof linkVariants> & {\n    /**\n     * Accessible label for screen readers (required)\n     * Provides context about what the link does or where it leads\n     * @example \"Navigate to home page\"\n     */\n    label: string;\n\n    /**\n     * Whether this link opens in a new tab/window\n     * When true, adds target=\"_blank\" and security attributes\n     * Auto-detected for URLs starting with http/https when undefined\n     * @default undefined (auto-detect based on href)\n     */\n    isExternalLink?: boolean;\n\n    /**\n     * Whether this link represents the current page/active state\n     * Adds aria-current=\"page\" for accessibility\n     * @default false\n     */\n    isActive?: boolean;\n\n    /**\n     * Locale for internationalized URLs\n     * When provided, URLs are automatically localized using Intlayer\n     * @example 'fr', 'es', 'en'\n     */\n    locale?: LocalesValues;\n  };\n\n/**\n * Utility function to determine if a link should be treated as external\n *\n * @param props - Link component props containing href and isExternalLink\n * @returns {boolean} True if the link should open externally\n *\n * @example\n * ```tsx\n * checkIsExternalLink({ href: 'https://example.com' }) // true\n * checkIsExternalLink({ href: '/internal-page' }) // false\n * checkIsExternalLink({ href: '/page', isExternalLink: true }) // true\n * ```\n */\nexport const checkIsExternalLink = ({\n  href,\n  isExternalLink: isExternalLinkProp,\n}: LinkProps): boolean => {\n  const isValidHref = typeof href === 'string' && href.trim() !== '';\n  const isExternalLink =\n    isExternalLinkProp === true ||\n    (typeof isExternalLinkProp === 'undefined' &&\n      isValidHref &&\n      /^https?:\\/\\//.test(href));\n\n  return isExternalLink;\n};\n\n/**\n * Link Component\n *\n * A versatile link component that handles both internal and external navigation\n * with comprehensive internationalization support and multiple visual variants.\n *\n * ## Key Features\n * - **Multiple Variants**: Default, invisible, button, outlined button, and hoverable styles\n * - **Color Themes**: Comprehensive color palette for different contexts and meanings\n * - **External Link Detection**: Automatic detection and handling of external URLs\n * - **Internationalization**: Built-in support for localized URLs via Intlayer\n * - **Security**: Automatic security attributes for external links (noopener, noreferrer)\n * - **Accessibility**: Full ARIA support with proper labels and current page indication\n * - **Visual Feedback**: Hover effects, underline options, and active states\n *\n * ## Use Cases\n * - Navigation within applications (internal links)\n * - External links to other websites with security measures\n * - Button-styled links for call-to-action scenarios\n * - Subtle hoverable links for navigation menus\n * - Multi-language website navigation with automatic URL localization\n *\n * ## Security Features\n * External links automatically receive security attributes:\n * - `rel=\"noopener noreferrer nofollow\"` - Prevents security vulnerabilities\n * - `target=\"_blank\"` - Opens in new tab/window\n * - External link icon indication for user clarity\n *\n * ## Internationalization\n * When used with Intlayer, the component automatically:\n * - Localizes internal URLs based on the current or specified locale\n * - Sets appropriate `hrefLang` attributes for SEO\n * - Maintains proper URL structure for multi-language sites\n *\n * @component\n * @example\n * ```tsx\n * // Basic internal link\n * <Link href=\"/about\" label=\"Go to about page\">\n *   About Us\n * </Link>\n *\n * // External link with auto-detection\n * <Link href=\"https://example.com\" label=\"Visit external site\">\n *   External Site\n * </Link>\n *\n * // Button-styled link\n * <Link\n *   href=\"/signup\"\n *   variant={LinkVariant.BUTTON}\n *   color={LinkColor.PRIMARY}\n *   label=\"Sign up for account\"\n * >\n *   Get Started\n * </Link>\n *\n * // Localized link\n * <Link\n *   href=\"/products\"\n *   locale=\"fr\"\n *   label=\"Voir les produits\"\n * >\n *   Produits\n * </Link>\n *\n * // Active navigation link\n * <Link\n *   href=\"/dashboard\"\n *   isActive={true}\n *   variant={LinkVariant.HOVERABLE}\n *   label=\"Current page: Dashboard\"\n * >\n *   Dashboard\n * </Link>\n * ```\n *\n * @param props - Link component props\n * @param props.children - Content to display inside the link\n * @param props.href - URL or path to navigate to\n * @param props.label - Accessible label describing the link's purpose\n * @param props.variant - Visual style variant\n * @param props.color - Color theme for the link\n * @param props.underlined - Underline visibility option\n * @param props.isExternalLink - Override external link detection\n * @param props.isActive - Whether this link represents the current page\n * @param props.locale - Locale for URL internationalization\n * @param props.className - Additional CSS classes\n * @returns Accessible and internationalized link component\n */\nexport const Link: FC<LinkProps> = (props) => {\n  const {\n    variant = LinkVariant.DEFAULT,\n    color = LinkColor.PRIMARY,\n    children,\n    label,\n    className,\n    isActive,\n    underlined,\n    locale,\n    isExternalLink: isExternalLinkProp,\n    href: hrefProp,\n    ...otherProps\n  } = props;\n  const { internationalization } = configuration;\n\n  const isExternalLink = checkIsExternalLink(props);\n  const isChildrenString = typeof children === 'string';\n\n  const rel = isExternalLink ? 'noopener noreferrer nofollow' : undefined;\n\n  const target = isExternalLink ? '_blank' : '_self';\n\n  const hrefLang = locale\n    ? locale === internationalization.defaultLocale\n      ? 'x-default'\n      : locale\n    : undefined;\n\n  const href =\n    locale && hrefProp && !isExternalLink\n      ? getLocalizedUrl(hrefProp, locale)\n      : hrefProp;\n\n  return (\n    <a\n      href={href}\n      hrefLang={hrefLang}\n      aria-label={label}\n      rel={rel}\n      target={target}\n      aria-current={isActive ? 'page' : undefined}\n      className={cn(\n        linkVariants({\n          variant,\n          color,\n          underlined,\n          className,\n        })\n      )}\n      {...otherProps}\n    >\n      {variant === 'button' ? <span>{children}</span> : children}\n      {isExternalLink && isChildrenString && (\n        <ExternalLink className=\"ml-2 inline-block size-4\" />\n      )}\n    </a>\n  );\n};\n"],"names":["LinkVariant","LinkColor","LinkUnderlined"],"mappings":"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"}

package/dist/components/Loader/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Loader/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Spinner } from './spinner';\n\nexport type LoaderProps = HTMLAttributes<HTMLDivElement> & {\n  isLoading?: boolean;\n};\n\n/**\n *\n * Component can be use as a wrapper or standalone\n *\n * Example:\n * ```jsx\n * <Loader isLoading={isLoading}>\n *   <div>Content</div>\n * </Loader>\n * ```\n * or\n * ```jsx\n * <Loader isLoading={isLoading} />\n * ```\n *\n * if isLoading is undefined, it will default to true\n * ```jsx\n * <Loader />\n * ```\n */\nexport const Loader: FC<LoaderProps> = ({\n  children,\n  isLoading = true,\n  className,\n  ...props\n}) => (\n  <>\n    {isLoading ? (\n      <div\n        className={cn(\n          'flex size-full max-h-screen max-w-[100vw] flex-1 items-center justify-center',\n          className\n        )}\n        role=\"status\"\n        aria-label=\"Animated icon, meaning that the website is processing\"\n        {...props}\n      >\n        <Spinner className=\"size-10 max-h-full max-w-full\" />\n      </div>\n    ) : (\n      (children ?? <></>)\n    )}\n  </>\n);\n"],"names":["jsx","cn","Spinner"],"mappings":";;;;;AA4BO,MAAM,SAA0B,CAAC;AAAA,EACtC;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,4DAEK,UAAA,YACCA,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAAA;AAAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,MAAK;AAAA,IACL,cAAW;AAAA,IACV,GAAG;AAAA,IAEJ,UAAAD,2BAAAA,IAACE,0BAAAA,SAAA,EAAQ,WAAU,gCAAA,CAAgC;AAAA,EAAA;AACrD,IAEC,kEAAc,EAAA,CAEnB;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Loader/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Spinner } from './spinner';\n\n/**\n * Props for the Loader component\n */\nexport type LoaderProps = HTMLAttributes<HTMLDivElement> & {\n  /** Controls whether the loading spinner is displayed. Defaults to true when undefined */\n  isLoading?: boolean;\n};\n\n/**\n * Loader Component\n *\n * A versatile loading component that can function as both a standalone loader\n * and a wrapper for content. When loading is true, displays an animated spinner.\n * When loading is false, renders the wrapped content.\n *\n * @component\n * @example\n * Standalone usage:\n * ```tsx\n * <Loader isLoading={true} />\n * ```\n *\n * @example\n * As a content wrapper:\n * ```tsx\n * <Loader isLoading={isDataLoading}>\n *   <div>Your content here</div>\n * </Loader>\n * ```\n *\n * @example\n * Default behavior (loading = true):\n * ```tsx\n * <Loader />\n * ```\n *\n * @example\n * With custom styling:\n * ```tsx\n * <Loader\n *   isLoading={true}\n *   className=\"min-h-[200px] bg-gray-50\"\n *   aria-label=\"Loading user data\"\n * />\n * ```\n *\n * @example\n * Conditional content loading:\n * ```tsx\n * <Loader isLoading={!data}>\n *   {data && (\n *     <div>\n *       <h2>{data.title}</h2>\n *       <p>{data.content}</p>\n *     </div>\n *   )}\n * </Loader>\n * ```\n *\n * Features:\n * - Dual-mode operation: standalone spinner or content wrapper\n * - Responsive design with flexible sizing\n * - Accessible with proper ARIA attributes and role\n * - Smooth animated spinner using SVG\n * - Customizable styling through className prop\n * - Supports all standard HTML div attributes\n * - Screen constraints (max-height/width) to prevent overflow\n * - Internationalization ready with aria-label support\n *\n * Accessibility:\n * - Uses role=\"status\" for screen reader announcements\n * - Includes descriptive aria-label for the loading state\n * - Maintains focus management when transitioning between states\n * - Supports custom aria-label through props for specific contexts\n * - Compatible with keyboard navigation patterns\n *\n * Performance:\n * - Lightweight SVG spinner with CSS animations\n * - Conditional rendering prevents unnecessary DOM updates\n * - Optimized for frequent loading state changes\n * - No external dependencies beyond internal utilities\n *\n * @param props - Component props extending HTML div attributes\n * @param props.children - Content to display when not loading\n * @param props.isLoading - Loading state control (defaults to true)\n * @param props.className - Additional CSS classes for the loader container\n * @param props.role - ARIA role (defaults to \"status\")\n * @param props.aria-label - Custom accessibility label\n * @param props.id - Unique identifier for the loader\n * @param props.style - Inline styles object\n * @param props.data-* - Data attributes for testing or tracking\n * @param props...rest - All other standard HTML div attributes\n *\n * @returns A loading spinner when isLoading is true, otherwise renders children\n */\nexport const Loader: FC<LoaderProps> = ({\n  children,\n  isLoading = true,\n  className,\n  ...props\n}) => (\n  <>\n    {isLoading ? (\n      <div\n        className={cn(\n          'flex size-full max-h-screen max-w-[100vw] flex-1 items-center justify-center',\n          className\n        )}\n        role=\"status\"\n        aria-label=\"Animated icon, meaning that the website is processing\"\n        {...props}\n      >\n        <Spinner className=\"size-10 max-h-full max-w-full\" />\n      </div>\n    ) : (\n      (children ?? <></>)\n    )}\n  </>\n);\n"],"names":["jsx","cn","Spinner"],"mappings":";;;;;AAmGO,MAAM,SAA0B,CAAC;AAAA,EACtC;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,4DAEK,UAAA,YACCA,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAAA;AAAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,MAAK;AAAA,IACL,cAAW;AAAA,IACV,GAAG;AAAA,IAEJ,UAAAD,2BAAAA,IAACE,0BAAAA,SAAA,EAAQ,WAAU,gCAAA,CAAgC;AAAA,EAAA;AACrD,IAEC,kEAAc,EAAA,CAEnB;;"}

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

@@ -1,26 +1,97 @@
 import { FC, HTMLAttributes } from 'react';
+/**
+ * Props for the Loader component
+ */
 export type LoaderProps = HTMLAttributes<HTMLDivElement> & {
+    /** Controls whether the loading spinner is displayed. Defaults to true when undefined */
     isLoading?: boolean;
 };
 /**
+ * Loader Component
  *
- * Component can be use as a wrapper or standalone
+ * A versatile loading component that can function as both a standalone loader
+ * and a wrapper for content. When loading is true, displays an animated spinner.
+ * When loading is false, renders the wrapped content.
  *
- * Example:
- * ```jsx
- * <Loader isLoading={isLoading}>
- *   <div>Content</div>
- * </Loader>
+ * @component
+ * @example
+ * Standalone usage:
+ * ```tsx
+ * <Loader isLoading={true} />
  * ```
- * or
- * ```jsx
- * <Loader isLoading={isLoading} />
+ *
+ * @example
+ * As a content wrapper:
+ * ```tsx
+ * <Loader isLoading={isDataLoading}>
+ *   <div>Your content here</div>
+ * </Loader>
  * ```
  *
- * if isLoading is undefined, it will default to true
- * ```jsx
+ * @example
+ * Default behavior (loading = true):
+ * ```tsx
  * <Loader />
  * ```
+ *
+ * @example
+ * With custom styling:
+ * ```tsx
+ * <Loader
+ *   isLoading={true}
+ *   className="min-h-[200px] bg-gray-50"
+ *   aria-label="Loading user data"
+ * />
+ * ```
+ *
+ * @example
+ * Conditional content loading:
+ * ```tsx
+ * <Loader isLoading={!data}>
+ *   {data && (
+ *     <div>
+ *       <h2>{data.title}</h2>
+ *       <p>{data.content}</p>
+ *     </div>
+ *   )}
+ * </Loader>
+ * ```
+ *
+ * Features:
+ * - Dual-mode operation: standalone spinner or content wrapper
+ * - Responsive design with flexible sizing
+ * - Accessible with proper ARIA attributes and role
+ * - Smooth animated spinner using SVG
+ * - Customizable styling through className prop
+ * - Supports all standard HTML div attributes
+ * - Screen constraints (max-height/width) to prevent overflow
+ * - Internationalization ready with aria-label support
+ *
+ * Accessibility:
+ * - Uses role="status" for screen reader announcements
+ * - Includes descriptive aria-label for the loading state
+ * - Maintains focus management when transitioning between states
+ * - Supports custom aria-label through props for specific contexts
+ * - Compatible with keyboard navigation patterns
+ *
+ * Performance:
+ * - Lightweight SVG spinner with CSS animations
+ * - Conditional rendering prevents unnecessary DOM updates
+ * - Optimized for frequent loading state changes
+ * - No external dependencies beyond internal utilities
+ *
+ * @param props - Component props extending HTML div attributes
+ * @param props.children - Content to display when not loading
+ * @param props.isLoading - Loading state control (defaults to true)
+ * @param props.className - Additional CSS classes for the loader container
+ * @param props.role - ARIA role (defaults to "status")
+ * @param props.aria-label - Custom accessibility label
+ * @param props.id - Unique identifier for the loader
+ * @param props.style - Inline styles object
+ * @param props.data-* - Data attributes for testing or tracking
+ * @param props...rest - All other standard HTML div attributes
+ *
+ * @returns A loading spinner when isLoading is true, otherwise renders children
  */
 export declare const Loader: FC<LoaderProps>;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Loader/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Loader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAIhD,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACzD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAuBlC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Loader/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAIhD;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACzD,yFAAyF;IACzF,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsFG;AACH,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAuBlC,CAAC"}

package/dist/components/Loader/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/Loader/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Spinner } from './spinner';\n\nexport type LoaderProps = HTMLAttributes<HTMLDivElement> & {\n  isLoading?: boolean;\n};\n\n/**\n *\n * Component can be use as a wrapper or standalone\n *\n * Example:\n * ```jsx\n * <Loader isLoading={isLoading}>\n *   <div>Content</div>\n * </Loader>\n * ```\n * or\n * ```jsx\n * <Loader isLoading={isLoading} />\n * ```\n *\n * if isLoading is undefined, it will default to true\n * ```jsx\n * <Loader />\n * ```\n */\nexport const Loader: FC<LoaderProps> = ({\n  children,\n  isLoading = true,\n  className,\n  ...props\n}) => (\n  <>\n    {isLoading ? (\n      <div\n        className={cn(\n          'flex size-full max-h-screen max-w-[100vw] flex-1 items-center justify-center',\n          className\n        )}\n        role=\"status\"\n        aria-label=\"Animated icon, meaning that the website is processing\"\n        {...props}\n      >\n        <Spinner className=\"size-10 max-h-full max-w-full\" />\n      </div>\n    ) : (\n      (children ?? <></>)\n    )}\n  </>\n);\n"],"names":[],"mappings":";;;AA4BO,MAAM,SAA0B,CAAC;AAAA,EACtC;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,sCAEK,UAAA,YACC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,MAAK;AAAA,IACL,cAAW;AAAA,IACV,GAAG;AAAA,IAEJ,UAAA,oBAAC,SAAA,EAAQ,WAAU,gCAAA,CAAgC;AAAA,EAAA;AACrD,IAEC,4CAAc,EAAA,CAEnB;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/Loader/index.tsx"],"sourcesContent":["import type { FC, HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\nimport { Spinner } from './spinner';\n\n/**\n * Props for the Loader component\n */\nexport type LoaderProps = HTMLAttributes<HTMLDivElement> & {\n  /** Controls whether the loading spinner is displayed. Defaults to true when undefined */\n  isLoading?: boolean;\n};\n\n/**\n * Loader Component\n *\n * A versatile loading component that can function as both a standalone loader\n * and a wrapper for content. When loading is true, displays an animated spinner.\n * When loading is false, renders the wrapped content.\n *\n * @component\n * @example\n * Standalone usage:\n * ```tsx\n * <Loader isLoading={true} />\n * ```\n *\n * @example\n * As a content wrapper:\n * ```tsx\n * <Loader isLoading={isDataLoading}>\n *   <div>Your content here</div>\n * </Loader>\n * ```\n *\n * @example\n * Default behavior (loading = true):\n * ```tsx\n * <Loader />\n * ```\n *\n * @example\n * With custom styling:\n * ```tsx\n * <Loader\n *   isLoading={true}\n *   className=\"min-h-[200px] bg-gray-50\"\n *   aria-label=\"Loading user data\"\n * />\n * ```\n *\n * @example\n * Conditional content loading:\n * ```tsx\n * <Loader isLoading={!data}>\n *   {data && (\n *     <div>\n *       <h2>{data.title}</h2>\n *       <p>{data.content}</p>\n *     </div>\n *   )}\n * </Loader>\n * ```\n *\n * Features:\n * - Dual-mode operation: standalone spinner or content wrapper\n * - Responsive design with flexible sizing\n * - Accessible with proper ARIA attributes and role\n * - Smooth animated spinner using SVG\n * - Customizable styling through className prop\n * - Supports all standard HTML div attributes\n * - Screen constraints (max-height/width) to prevent overflow\n * - Internationalization ready with aria-label support\n *\n * Accessibility:\n * - Uses role=\"status\" for screen reader announcements\n * - Includes descriptive aria-label for the loading state\n * - Maintains focus management when transitioning between states\n * - Supports custom aria-label through props for specific contexts\n * - Compatible with keyboard navigation patterns\n *\n * Performance:\n * - Lightweight SVG spinner with CSS animations\n * - Conditional rendering prevents unnecessary DOM updates\n * - Optimized for frequent loading state changes\n * - No external dependencies beyond internal utilities\n *\n * @param props - Component props extending HTML div attributes\n * @param props.children - Content to display when not loading\n * @param props.isLoading - Loading state control (defaults to true)\n * @param props.className - Additional CSS classes for the loader container\n * @param props.role - ARIA role (defaults to \"status\")\n * @param props.aria-label - Custom accessibility label\n * @param props.id - Unique identifier for the loader\n * @param props.style - Inline styles object\n * @param props.data-* - Data attributes for testing or tracking\n * @param props...rest - All other standard HTML div attributes\n *\n * @returns A loading spinner when isLoading is true, otherwise renders children\n */\nexport const Loader: FC<LoaderProps> = ({\n  children,\n  isLoading = true,\n  className,\n  ...props\n}) => (\n  <>\n    {isLoading ? (\n      <div\n        className={cn(\n          'flex size-full max-h-screen max-w-[100vw] flex-1 items-center justify-center',\n          className\n        )}\n        role=\"status\"\n        aria-label=\"Animated icon, meaning that the website is processing\"\n        {...props}\n      >\n        <Spinner className=\"size-10 max-h-full max-w-full\" />\n      </div>\n    ) : (\n      (children ?? <></>)\n    )}\n  </>\n);\n"],"names":[],"mappings":";;;AAmGO,MAAM,SAA0B,CAAC;AAAA,EACtC;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,sCAEK,UAAA,YACC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW;AAAA,MACT;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,MAAK;AAAA,IACL,cAAW;AAAA,IACV,GAAG;AAAA,IAEJ,UAAA,oBAAC,SAAA,EAAQ,WAAU,gCAAA,CAAgC;AAAA,EAAA;AACrD,IAEC,4CAAc,EAAA,CAEnB;"}

package/dist/components/Loader/spinner.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.cjs","sources":["../../../src/components/Loader/spinner.tsx"],"sourcesContent":["import type { SVGProps } from 'react';\nimport { cn } from '../../utils/cn';\n\ntype SpinnerProps = SVGProps<SVGSVGElement> & {\n  strokeWidth?: number;\n};\n\nexport const Spinner = ({ className, strokeWidth = 4 }: SpinnerProps) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"44\"\n    height=\"44\"\n    viewBox=\"0 0 44 44\"\n    stroke=\"currentColor\"\n    className={cn('size-full', className)}\n  >\n    <g fill=\"none\" fillRule=\"evenodd\" strokeWidth={strokeWidth}>\n      <circle cx=\"22\" cy=\"22\" r=\"1\">\n        <animate\n          attributeName=\"r\"\n          begin=\"0s\"\n          dur=\"1.8s\"\n          values=\"1; 20\"\n          calcMode=\"spline\"\n          keyTimes=\"0; 1\"\n          keySplines=\"0.165, 0.84, 0.44, 1\"\n          repeatCount=\"indefinite\"\n        />\n        <animate\n          attributeName=\"stroke-opacity\"\n          begin=\"0s\"\n          dur=\"1.8s\"\n          values=\"1; 0\"\n          calcMode=\"spline\"\n          keyTimes=\"0; 1\"\n          keySplines=\"0.3, 0.61, 0.355, 1\"\n          repeatCount=\"indefinite\"\n        />\n      </circle>\n      <circle cx=\"22\" cy=\"22\" r=\"1\">\n        <animate\n          attributeName=\"r\"\n          begin=\"-0.9s\"\n          dur=\"1.8s\"\n          values=\"1; 20\"\n          calcMode=\"spline\"\n          keyTimes=\"0; 1\"\n          keySplines=\"0.165, 0.84, 0.44, 1\"\n          repeatCount=\"indefinite\"\n        />\n        <animate\n          attributeName=\"stroke-opacity\"\n          begin=\"-0.9s\"\n          dur=\"1.8s\"\n          values=\"1; 0\"\n          calcMode=\"spline\"\n          keyTimes=\"0; 1\"\n          keySplines=\"0.3, 0.61, 0.355, 1\"\n          repeatCount=\"indefinite\"\n        />\n      </circle>\n    </g>\n  </svg>\n);\n"],"names":["jsx","cn","jsxs"],"mappings":";;;;AAOO,MAAM,UAAU,CAAC,EAAE,WAAW,cAAc,QACjDA,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,QAAO;AAAA,IACP,WAAWC,SAAAA,GAAG,aAAa,SAAS;AAAA,IAEpC,0CAAC,KAAA,EAAE,MAAK,QAAO,UAAS,WAAU,aAChC,UAAA;AAAA,MAAAC,gCAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KACxB,UAAA;AAAA,QAAAF,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,YACP,UAAS;AAAA,YACT,UAAS;AAAA,YACT,YAAW;AAAA,YACX,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAEdA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,YACP,UAAS;AAAA,YACT,UAAS;AAAA,YACT,YAAW;AAAA,YACX,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,MACd,GACF;AAAA,sCACC,UAAA,EAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KACxB,UAAA;AAAA,QAAAA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,YACP,UAAS;AAAA,YACT,UAAS;AAAA,YACT,YAAW;AAAA,YACX,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAEdA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,YACP,UAAS;AAAA,YACT,UAAS;AAAA,YACT,YAAW;AAAA,YACX,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,MACd,EAAA,CACF;AAAA,IAAA,EAAA,CACF;AAAA,EAAA;AACF;;"}
+{"version":3,"file":"spinner.cjs","sources":["../../../src/components/Loader/spinner.tsx"],"sourcesContent":["import type { SVGProps } from 'react';\nimport { cn } from '../../utils/cn';\n\n/**\n * Props for the Spinner component\n */\ntype SpinnerProps = SVGProps<SVGSVGElement> & {\n  /** Stroke width for the spinner animation circles. Defaults to 4 */\n  strokeWidth?: number;\n};\n\n/**\n * Spinner Component\n *\n * An animated SVG spinner that displays two expanding and fading circles\n * to indicate loading or processing states. Uses smooth CSS animations\n * with spline curves for natural motion.\n *\n * @component\n * @example\n * Basic usage:\n * ```tsx\n * <Spinner />\n * ```\n *\n * @example\n * Custom stroke width:\n * ```tsx\n * <Spinner strokeWidth={6} className=\"text-blue-500\" />\n * ```\n *\n * @example\n * Custom size:\n * ```tsx\n * <Spinner className=\"size-8 text-red-500\" strokeWidth={2} />\n * ```\n *\n * Features:\n * - Smooth expanding circle animation\n * - Customizable stroke width\n * - Inherits text color from parent (currentColor)\n * - Responsive sizing through className\n * - Infinite loop animation\n * - Two-phase animation with offset timing\n * - Optimized SVG with minimal DOM impact\n *\n * Animation Details:\n * - Duration: 1.8 seconds per cycle\n * - Two circles with 0.9s offset\n * - Radius expands from 1 to 20\n * - Opacity fades from 1 to 0\n * - Spline easing for natural motion\n *\n * @param props - SVG props with custom spinner options\n * @param props.className - CSS classes for styling and sizing\n * @param props.strokeWidth - Line thickness for the animated circles\n * @param props.color - SVG color (use className with text-color for easier styling)\n * @param props.width - SVG width (defaults to 44, use className for responsive sizing)\n * @param props.height - SVG height (defaults to 44, use className for responsive sizing)\n * @param props...rest - All other standard SVG element attributes\n *\n * @returns An animated SVG spinner element\n */\nexport const Spinner = ({ className, strokeWidth = 4 }: SpinnerProps) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"44\"\n    height=\"44\"\n    viewBox=\"0 0 44 44\"\n    stroke=\"currentColor\"\n    className={cn('size-full', className)}\n  >\n    <g fill=\"none\" fillRule=\"evenodd\" strokeWidth={strokeWidth}>\n      <circle cx=\"22\" cy=\"22\" r=\"1\">\n        <animate\n          attributeName=\"r\"\n          begin=\"0s\"\n          dur=\"1.8s\"\n          values=\"1; 20\"\n          calcMode=\"spline\"\n          keyTimes=\"0; 1\"\n          keySplines=\"0.165, 0.84, 0.44, 1\"\n          repeatCount=\"indefinite\"\n        />\n        <animate\n          attributeName=\"stroke-opacity\"\n          begin=\"0s\"\n          dur=\"1.8s\"\n          values=\"1; 0\"\n          calcMode=\"spline\"\n          keyTimes=\"0; 1\"\n          keySplines=\"0.3, 0.61, 0.355, 1\"\n          repeatCount=\"indefinite\"\n        />\n      </circle>\n      <circle cx=\"22\" cy=\"22\" r=\"1\">\n        <animate\n          attributeName=\"r\"\n          begin=\"-0.9s\"\n          dur=\"1.8s\"\n          values=\"1; 20\"\n          calcMode=\"spline\"\n          keyTimes=\"0; 1\"\n          keySplines=\"0.165, 0.84, 0.44, 1\"\n          repeatCount=\"indefinite\"\n        />\n        <animate\n          attributeName=\"stroke-opacity\"\n          begin=\"-0.9s\"\n          dur=\"1.8s\"\n          values=\"1; 0\"\n          calcMode=\"spline\"\n          keyTimes=\"0; 1\"\n          keySplines=\"0.3, 0.61, 0.355, 1\"\n          repeatCount=\"indefinite\"\n        />\n      </circle>\n    </g>\n  </svg>\n);\n"],"names":["jsx","cn","jsxs"],"mappings":";;;;AA+DO,MAAM,UAAU,CAAC,EAAE,WAAW,cAAc,QACjDA,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,QAAO;AAAA,IACP,WAAWC,SAAAA,GAAG,aAAa,SAAS;AAAA,IAEpC,0CAAC,KAAA,EAAE,MAAK,QAAO,UAAS,WAAU,aAChC,UAAA;AAAA,MAAAC,gCAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KACxB,UAAA;AAAA,QAAAF,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,YACP,UAAS;AAAA,YACT,UAAS;AAAA,YACT,YAAW;AAAA,YACX,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAEdA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,YACP,UAAS;AAAA,YACT,UAAS;AAAA,YACT,YAAW;AAAA,YACX,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,MACd,GACF;AAAA,sCACC,UAAA,EAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KACxB,UAAA;AAAA,QAAAA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,YACP,UAAS;AAAA,YACT,UAAS;AAAA,YACT,YAAW;AAAA,YACX,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAEdA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,YACP,UAAS;AAAA,YACT,UAAS;AAAA,YACT,YAAW;AAAA,YACX,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,MACd,EAAA,CACF;AAAA,IAAA,EAAA,CACF;AAAA,EAAA;AACF;;"}

package/dist/components/Loader/spinner.d.ts

@@ -1,7 +1,63 @@
 import { SVGProps } from 'react';
+/**
+ * Props for the Spinner component
+ */
 type SpinnerProps = SVGProps<SVGSVGElement> & {
+    /** Stroke width for the spinner animation circles. Defaults to 4 */
     strokeWidth?: number;
 };
+/**
+ * Spinner Component
+ *
+ * An animated SVG spinner that displays two expanding and fading circles
+ * to indicate loading or processing states. Uses smooth CSS animations
+ * with spline curves for natural motion.
+ *
+ * @component
+ * @example
+ * Basic usage:
+ * ```tsx
+ * <Spinner />
+ * ```
+ *
+ * @example
+ * Custom stroke width:
+ * ```tsx
+ * <Spinner strokeWidth={6} className="text-blue-500" />
+ * ```
+ *
+ * @example
+ * Custom size:
+ * ```tsx
+ * <Spinner className="size-8 text-red-500" strokeWidth={2} />
+ * ```
+ *
+ * Features:
+ * - Smooth expanding circle animation
+ * - Customizable stroke width
+ * - Inherits text color from parent (currentColor)
+ * - Responsive sizing through className
+ * - Infinite loop animation
+ * - Two-phase animation with offset timing
+ * - Optimized SVG with minimal DOM impact
+ *
+ * Animation Details:
+ * - Duration: 1.8 seconds per cycle
+ * - Two circles with 0.9s offset
+ * - Radius expands from 1 to 20
+ * - Opacity fades from 1 to 0
+ * - Spline easing for natural motion
+ *
+ * @param props - SVG props with custom spinner options
+ * @param props.className - CSS classes for styling and sizing
+ * @param props.strokeWidth - Line thickness for the animated circles
+ * @param props.color - SVG color (use className with text-color for easier styling)
+ * @param props.width - SVG width (defaults to 44, use className for responsive sizing)
+ * @param props.height - SVG height (defaults to 44, use className for responsive sizing)
+ * @param props...rest - All other standard SVG element attributes
+ *
+ * @returns An animated SVG spinner element
+ */
 export declare const Spinner: ({ className, strokeWidth }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=spinner.d.ts.map

package/dist/components/Loader/spinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/components/Loader/spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGtC,KAAK,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,OAAO,GAAI,4BAAgC,YAAY,4CAwDnE,CAAC"}
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/components/Loader/spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGtC;;GAEG;AACH,KAAK,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG;IAC5C,oEAAoE;IACpE,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,eAAO,MAAM,OAAO,GAAI,4BAAgC,YAAY,4CAwDnE,CAAC"}

package/dist/components/Loader/spinner.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.mjs","sources":["../../../src/components/Loader/spinner.tsx"],"sourcesContent":["import type { SVGProps } from 'react';\nimport { cn } from '../../utils/cn';\n\ntype SpinnerProps = SVGProps<SVGSVGElement> & {\n  strokeWidth?: number;\n};\n\nexport const Spinner = ({ className, strokeWidth = 4 }: SpinnerProps) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"44\"\n    height=\"44\"\n    viewBox=\"0 0 44 44\"\n    stroke=\"currentColor\"\n    className={cn('size-full', className)}\n  >\n    <g fill=\"none\" fillRule=\"evenodd\" strokeWidth={strokeWidth}>\n      <circle cx=\"22\" cy=\"22\" r=\"1\">\n        <animate\n          attributeName=\"r\"\n          begin=\"0s\"\n          dur=\"1.8s\"\n          values=\"1; 20\"\n          calcMode=\"spline\"\n          keyTimes=\"0; 1\"\n          keySplines=\"0.165, 0.84, 0.44, 1\"\n          repeatCount=\"indefinite\"\n        />\n        <animate\n          attributeName=\"stroke-opacity\"\n          begin=\"0s\"\n          dur=\"1.8s\"\n          values=\"1; 0\"\n          calcMode=\"spline\"\n          keyTimes=\"0; 1\"\n          keySplines=\"0.3, 0.61, 0.355, 1\"\n          repeatCount=\"indefinite\"\n        />\n      </circle>\n      <circle cx=\"22\" cy=\"22\" r=\"1\">\n        <animate\n          attributeName=\"r\"\n          begin=\"-0.9s\"\n          dur=\"1.8s\"\n          values=\"1; 20\"\n          calcMode=\"spline\"\n          keyTimes=\"0; 1\"\n          keySplines=\"0.165, 0.84, 0.44, 1\"\n          repeatCount=\"indefinite\"\n        />\n        <animate\n          attributeName=\"stroke-opacity\"\n          begin=\"-0.9s\"\n          dur=\"1.8s\"\n          values=\"1; 0\"\n          calcMode=\"spline\"\n          keyTimes=\"0; 1\"\n          keySplines=\"0.3, 0.61, 0.355, 1\"\n          repeatCount=\"indefinite\"\n        />\n      </circle>\n    </g>\n  </svg>\n);\n"],"names":[],"mappings":";;AAOO,MAAM,UAAU,CAAC,EAAE,WAAW,cAAc,QACjD;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,QAAO;AAAA,IACP,WAAW,GAAG,aAAa,SAAS;AAAA,IAEpC,+BAAC,KAAA,EAAE,MAAK,QAAO,UAAS,WAAU,aAChC,UAAA;AAAA,MAAA,qBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KACxB,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,YACP,UAAS;AAAA,YACT,UAAS;AAAA,YACT,YAAW;AAAA,YACX,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAEd;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,YACP,UAAS;AAAA,YACT,UAAS;AAAA,YACT,YAAW;AAAA,YACX,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,MACd,GACF;AAAA,2BACC,UAAA,EAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KACxB,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,YACP,UAAS;AAAA,YACT,UAAS;AAAA,YACT,YAAW;AAAA,YACX,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAEd;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,YACP,UAAS;AAAA,YACT,UAAS;AAAA,YACT,YAAW;AAAA,YACX,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,MACd,EAAA,CACF;AAAA,IAAA,EAAA,CACF;AAAA,EAAA;AACF;"}
+{"version":3,"file":"spinner.mjs","sources":["../../../src/components/Loader/spinner.tsx"],"sourcesContent":["import type { SVGProps } from 'react';\nimport { cn } from '../../utils/cn';\n\n/**\n * Props for the Spinner component\n */\ntype SpinnerProps = SVGProps<SVGSVGElement> & {\n  /** Stroke width for the spinner animation circles. Defaults to 4 */\n  strokeWidth?: number;\n};\n\n/**\n * Spinner Component\n *\n * An animated SVG spinner that displays two expanding and fading circles\n * to indicate loading or processing states. Uses smooth CSS animations\n * with spline curves for natural motion.\n *\n * @component\n * @example\n * Basic usage:\n * ```tsx\n * <Spinner />\n * ```\n *\n * @example\n * Custom stroke width:\n * ```tsx\n * <Spinner strokeWidth={6} className=\"text-blue-500\" />\n * ```\n *\n * @example\n * Custom size:\n * ```tsx\n * <Spinner className=\"size-8 text-red-500\" strokeWidth={2} />\n * ```\n *\n * Features:\n * - Smooth expanding circle animation\n * - Customizable stroke width\n * - Inherits text color from parent (currentColor)\n * - Responsive sizing through className\n * - Infinite loop animation\n * - Two-phase animation with offset timing\n * - Optimized SVG with minimal DOM impact\n *\n * Animation Details:\n * - Duration: 1.8 seconds per cycle\n * - Two circles with 0.9s offset\n * - Radius expands from 1 to 20\n * - Opacity fades from 1 to 0\n * - Spline easing for natural motion\n *\n * @param props - SVG props with custom spinner options\n * @param props.className - CSS classes for styling and sizing\n * @param props.strokeWidth - Line thickness for the animated circles\n * @param props.color - SVG color (use className with text-color for easier styling)\n * @param props.width - SVG width (defaults to 44, use className for responsive sizing)\n * @param props.height - SVG height (defaults to 44, use className for responsive sizing)\n * @param props...rest - All other standard SVG element attributes\n *\n * @returns An animated SVG spinner element\n */\nexport const Spinner = ({ className, strokeWidth = 4 }: SpinnerProps) => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"44\"\n    height=\"44\"\n    viewBox=\"0 0 44 44\"\n    stroke=\"currentColor\"\n    className={cn('size-full', className)}\n  >\n    <g fill=\"none\" fillRule=\"evenodd\" strokeWidth={strokeWidth}>\n      <circle cx=\"22\" cy=\"22\" r=\"1\">\n        <animate\n          attributeName=\"r\"\n          begin=\"0s\"\n          dur=\"1.8s\"\n          values=\"1; 20\"\n          calcMode=\"spline\"\n          keyTimes=\"0; 1\"\n          keySplines=\"0.165, 0.84, 0.44, 1\"\n          repeatCount=\"indefinite\"\n        />\n        <animate\n          attributeName=\"stroke-opacity\"\n          begin=\"0s\"\n          dur=\"1.8s\"\n          values=\"1; 0\"\n          calcMode=\"spline\"\n          keyTimes=\"0; 1\"\n          keySplines=\"0.3, 0.61, 0.355, 1\"\n          repeatCount=\"indefinite\"\n        />\n      </circle>\n      <circle cx=\"22\" cy=\"22\" r=\"1\">\n        <animate\n          attributeName=\"r\"\n          begin=\"-0.9s\"\n          dur=\"1.8s\"\n          values=\"1; 20\"\n          calcMode=\"spline\"\n          keyTimes=\"0; 1\"\n          keySplines=\"0.165, 0.84, 0.44, 1\"\n          repeatCount=\"indefinite\"\n        />\n        <animate\n          attributeName=\"stroke-opacity\"\n          begin=\"-0.9s\"\n          dur=\"1.8s\"\n          values=\"1; 0\"\n          calcMode=\"spline\"\n          keyTimes=\"0; 1\"\n          keySplines=\"0.3, 0.61, 0.355, 1\"\n          repeatCount=\"indefinite\"\n        />\n      </circle>\n    </g>\n  </svg>\n);\n"],"names":[],"mappings":";;AA+DO,MAAM,UAAU,CAAC,EAAE,WAAW,cAAc,QACjD;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,QAAO;AAAA,IACP,WAAW,GAAG,aAAa,SAAS;AAAA,IAEpC,+BAAC,KAAA,EAAE,MAAK,QAAO,UAAS,WAAU,aAChC,UAAA;AAAA,MAAA,qBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KACxB,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,YACP,UAAS;AAAA,YACT,UAAS;AAAA,YACT,YAAW;AAAA,YACX,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAEd;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,YACP,UAAS;AAAA,YACT,UAAS;AAAA,YACT,YAAW;AAAA,YACX,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,MACd,GACF;AAAA,2BACC,UAAA,EAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KACxB,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,YACP,UAAS;AAAA,YACT,UAAS;AAAA,YACT,YAAW;AAAA,YACX,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,QAEd;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAc;AAAA,YACd,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,QAAO;AAAA,YACP,UAAS;AAAA,YACT,UAAS;AAAA,YACT,YAAW;AAAA,YACX,aAAY;AAAA,UAAA;AAAA,QAAA;AAAA,MACd,EAAA,CACF;AAAA,IAAA,EAAA,CACF;AAAA,EAAA;AACF;"}

package/dist/components/MarkDownRender/MarkDownRender.cjs

@@ -9,7 +9,7 @@ const components_Link_Link = require("../Link/Link.cjs");
 const components_Tab_Tab = require("../Tab/Tab.cjs");
 const components_Tab_TabContext = require("../Tab/TabContext.cjs");
 const components_Table_Table = require("../Table/Table.cjs");
-const components_MarkDownRender_processer = require("./processer.cjs");
+const components_MarkDownRender_processor = require("./processor.cjs");
 const stripFrontmatter = (markdown) => {
   const lines = markdown.split(/\r?\n/);
   const firstNonEmptyLine = lines.find((line) => line.trim() !== "");
@@ -44,7 +44,7 @@ const MarkdownRenderer = ({
   const { overrides, ...restOptions } = options ?? {};
   const cleanMarkdown = stripFrontmatter(children);
   return /* @__PURE__ */ jsxRuntime.jsx(components_IDE_CodeContext.CodeProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(components_Tab_TabContext.TabProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    components_MarkDownRender_processer.MarkdownProcessor,
+    components_MarkDownRender_processor.MarkdownProcessor,
     {
       options: {
         overrides: {
@@ -168,7 +168,7 @@ const MarkdownRenderer = ({
           }) => /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: utils_cn.cn("flex md:flex-col gap-4", className),
+              className: utils_cn.cn("flex max-md:flex-col gap-4", className),
               ...props
             }
           ),