@intlayer/design-system 6.1.6 → 7.0.0-canary.1

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

@@ -0,0 +1,240 @@
+import { cn } from "../../utils/cn.mjs";
+import { ExternalLink } from "lucide-react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { getLocalizedUrl } from "@intlayer/core";
+
+//#region src/components/Link/Link.tsx
+/**
+* Visual style variants for Link component
+*
+* @enum {string}
+*/
+let LinkVariant = /* @__PURE__ */ function(LinkVariant$1) {
+	/** Default underlined link with hover effects */
+	LinkVariant$1["DEFAULT"] = "default";
+	/** Link without visible underline or hover effects */
+	LinkVariant$1["INVISIBLE_LINK"] = "invisible-link";
+	/** Button-styled link with solid background */
+	LinkVariant$1["BUTTON"] = "button";
+	/** Button-styled link with outlined border */
+	LinkVariant$1["BUTTON_OUTLINED"] = "button-outlined";
+	/** Link with subtle hover background effect */
+	LinkVariant$1["HOVERABLE"] = "hoverable";
+	return LinkVariant$1;
+}({});
+/**
+* Color theme variants for Link component
+*
+* @enum {string}
+*/
+let LinkColor = /* @__PURE__ */ function(LinkColor$1) {
+	/** Primary brand color */
+	LinkColor$1["PRIMARY"] = "primary";
+	/** Secondary brand color */
+	LinkColor$1["SECONDARY"] = "secondary";
+	/** Destructive/danger color for critical actions */
+	LinkColor$1["DESTRUCTIVE"] = "destructive";
+	/** Neutral/muted color for less prominent links */
+	LinkColor$1["NEUTRAL"] = "neutral";
+	/** Light color for dark backgrounds */
+	LinkColor$1["LIGHT"] = "light";
+	/** Dark color for light backgrounds */
+	LinkColor$1["DARK"] = "dark";
+	/** Default text color */
+	LinkColor$1["TEXT"] = "text";
+	/** Inverse text color for opposite backgrounds */
+	LinkColor$1["TEXT_INVERSE"] = "text-inverse";
+	/** Error/red color for error states */
+	LinkColor$1["ERROR"] = "error";
+	/** Success/green color for positive actions */
+	LinkColor$1["SUCCESS"] = "success";
+	/** Custom color - no default styling applied */
+	LinkColor$1["CUSTOM"] = "custom";
+	return LinkColor$1;
+}({});
+/**
+* Underline style options for Link component
+*
+* @enum {string}
+*/
+let LinkUnderlined = /* @__PURE__ */ function(LinkUnderlined$1) {
+	/** Default underline behavior based on variant */
+	LinkUnderlined$1["DEFAULT"] = "default";
+	/** Always show underline */
+	LinkUnderlined$1["TRUE"] = "true";
+	/** Never show underline */
+	LinkUnderlined$1["FALSE"] = "false";
+	return LinkUnderlined$1;
+}({});
+/**
+* Class variance authority configuration for Link component styling
+* Defines the visual appearance based on variant, color, and underline options
+*/
+const linkVariants = cva("gap-3 transition focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50", {
+	variants: {
+		variant: {
+			[`${LinkVariant.DEFAULT}`]: "h-auto justify-start border-inherit bg-current/0 px-1 underline-offset-4 hover:bg-current/0 hover:underline",
+			[`${LinkVariant.INVISIBLE_LINK}`]: "h-auto justify-start border-inherit bg-current/0 px-1 underline-offset-4 hover:bg-current/0",
+			[`${LinkVariant.BUTTON}`]: "flex min-h-8 items-center justify-center gap-2 whitespace-nowrap rounded-lg bg-current px-6 font-medium text-sm transition *:text-text-opposite focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 max-md:py-2",
+			[`${LinkVariant.BUTTON_OUTLINED}`]: "flex min-h-8 items-center justify-center gap-2 whitespace-nowrap rounded-lg border-[1.5px] px-6 font-medium text-sm transition hover:bg-current/30 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 max-md:py-2",
+			[`${LinkVariant.HOVERABLE}`]: "block rounded-lg border-none bg-current/0 transition hover:bg-current/20 aria-[current]:bg-current/5"
+		},
+		color: {
+			[`${LinkColor.PRIMARY}`]: "text-primary",
+			[`${LinkColor.SECONDARY}`]: "text-secondary",
+			[`${LinkColor.DESTRUCTIVE}`]: "text-destructive",
+			[`${LinkColor.NEUTRAL}`]: "text-neutral",
+			[`${LinkColor.LIGHT}`]: "text-white",
+			[`${LinkColor.DARK}`]: "text-neutral-800",
+			[`${LinkColor.TEXT}`]: "text-text",
+			[`${LinkColor.TEXT_INVERSE}`]: "text-text-opposite",
+			[`${LinkColor.ERROR}`]: "text-error",
+			[`${LinkColor.SUCCESS}`]: "text-success",
+			[`${LinkColor.CUSTOM}`]: ""
+		},
+		underlined: {
+			[LinkUnderlined.DEFAULT]: "",
+			[LinkUnderlined.TRUE]: "underline",
+			[LinkUnderlined.FALSE]: "no-underline"
+		}
+	},
+	defaultVariants: {
+		variant: LinkVariant.DEFAULT,
+		color: LinkColor.PRIMARY,
+		underlined: LinkUnderlined.DEFAULT
+	}
+});
+/**
+* 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
+* ```
+*/
+const checkIsExternalLink = ({ href, isExternalLink: isExternalLinkProp }) => {
+	const isValidHref = typeof href === "string" && href.trim() !== "";
+	return isExternalLinkProp === true || typeof isExternalLinkProp === "undefined" && isValidHref && /^https?:\/\//.test(href);
+};
+/**
+* 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
+*/
+const Link = (props) => {
+	const { variant = LinkVariant.DEFAULT, color = LinkColor.PRIMARY, children, label, className, isActive, underlined, locale, isExternalLink: isExternalLinkProp, href: hrefProp,...otherProps } = props;
+	const isExternalLink = checkIsExternalLink(props);
+	const isChildrenString = typeof children === "string";
+	const rel = isExternalLink ? "noopener noreferrer nofollow" : void 0;
+	const target = isExternalLink ? "_blank" : "_self";
+	return /* @__PURE__ */ jsxs("a", {
+		href: locale && hrefProp && !isExternalLink ? getLocalizedUrl(hrefProp, locale) : hrefProp,
+		"aria-label": label,
+		rel,
+		target,
+		"aria-current": isActive ? "page" : void 0,
+		className: cn(linkVariants({
+			variant,
+			color,
+			underlined,
+			className
+		})),
+		...otherProps,
+		children: [variant === "button" ? /* @__PURE__ */ jsx("span", { children }) : children, isExternalLink && isChildrenString && /* @__PURE__ */ jsx(ExternalLink, { className: "ml-2 inline-block size-4" })]
+	});
+};
+
+//#endregion
+export { Link, LinkColor, LinkUnderlined, LinkVariant, checkIsExternalLink, linkVariants };
+//# sourceMappingURL=Link.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Link.mjs","names":["Link: FC<LinkProps>"],"sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import { getLocalizedUrl } from '@intlayer/core';\nimport type { LocalesValues } from '@intlayer/types';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ExternalLink } from 'lucide-react';\nimport type { AnchorHTMLAttributes, DetailedHTMLProps, FC } 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          'flex min-h-8 items-center justify-center gap-2 whitespace-nowrap rounded-lg bg-current px-6 font-medium text-sm transition *:text-text-opposite focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 max-md:py-2',\n        [`${LinkVariant.BUTTON_OUTLINED}`]:\n          'flex min-h-8 items-center justify-center gap-2 whitespace-nowrap rounded-lg border-[1.5px] px-6 font-medium text-sm transition hover:bg-current/30 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 max-md:py-2',\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\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 href =\n    locale && hrefProp && !isExternalLink\n      ? getLocalizedUrl(hrefProp, locale)\n      : hrefProp;\n\n  return (\n    <a\n      href={href}\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"],"mappings":";;;;;;;;;;;;AAYA,IAAY,sDAAL;;AAEL;;AAEA;;AAEA;;AAEA;;AAEA;;;;;;;;AAQF,IAAY,kDAAL;;AAEL;;AAEA;;AAEA;;AAEA;;AAEA;;AAEA;;AAEA;;AAEA;;AAEA;;AAEA;;AAEA;;;;;;;;AAQF,IAAY,4DAAL;;AAEL;;AAEA;;AAEA;;;;;;;AAOF,MAAa,eAAe,IAC1B,kGACA;CACE,UAAU;EACR,SAAS;IACN,GAAG,YAAY,YACd;IACD,GAAG,YAAY,mBACd;IACD,GAAG,YAAY,WACd;IACD,GAAG,YAAY,oBACd;IACD,GAAG,YAAY,cACd;GACH;EACD,OAAO;IACJ,GAAG,UAAU,YAAY;IACzB,GAAG,UAAU,cAAc;IAC3B,GAAG,UAAU,gBAAgB;IAC7B,GAAG,UAAU,YAAY;IACzB,GAAG,UAAU,UAAU;IACvB,GAAG,UAAU,SAAS;IACtB,GAAG,UAAU,SAAS;IACtB,GAAG,UAAU,iBAAiB;IAC9B,GAAG,UAAU,UAAU;IACvB,GAAG,UAAU,YAAY;IACzB,GAAG,UAAU,WAAW;GAC1B;EACD,YAAY;IACT,eAAe,UAAU;IACzB,eAAe,OAAO;IACtB,eAAe,QAAQ;GACzB;EACF;CAED,iBAAiB;EACf,SAAS,YAAY;EACrB,OAAO,UAAU;EACjB,YAAY,eAAe;EAC5B;CACF,CACF;;;;;;;;;;;;;;AAyDD,MAAa,uBAAuB,EAClC,MACA,gBAAgB,yBACQ;CACxB,MAAM,cAAc,OAAO,SAAS,YAAY,KAAK,MAAM,KAAK;AAOhE,QALE,uBAAuB,QACtB,OAAO,uBAAuB,eAC7B,eACA,eAAe,KAAK,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+F/B,MAAaA,QAAuB,UAAU;CAC5C,MAAM,EACJ,UAAU,YAAY,SACtB,QAAQ,UAAU,SAClB,UACA,OACA,WACA,UACA,YACA,QACA,gBAAgB,oBAChB,MAAM,SACN,GAAG,eACD;CAEJ,MAAM,iBAAiB,oBAAoB,MAAM;CACjD,MAAM,mBAAmB,OAAO,aAAa;CAE7C,MAAM,MAAM,iBAAiB,iCAAiC;CAE9D,MAAM,SAAS,iBAAiB,WAAW;AAO3C,QACE,qBAAC;EACC,MANF,UAAU,YAAY,CAAC,iBACnB,gBAAgB,UAAU,OAAO,GACjC;EAKF,cAAY;EACP;EACG;EACR,gBAAc,WAAW,SAAS;EAClC,WAAW,GACT,aAAa;GACX;GACA;GACA;GACA;GACD,CAAC,CACH;EACD,GAAI;aAEH,YAAY,WAAW,oBAAC,UAAM,WAAgB,GAAG,UACjD,kBAAkB,oBACjB,oBAAC,gBAAa,WAAU,6BAA6B;GAErD"}

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

@@ -0,0 +1,3 @@
+import { Link, LinkColor, LinkUnderlined, LinkVariant, checkIsExternalLink, linkVariants } from "./Link.mjs";
+
+export { Link, LinkColor, LinkUnderlined, LinkVariant, checkIsExternalLink, linkVariants };

package/dist/esm/components/Loader/index.content.mjs

@@ -0,0 +1,33 @@
+import { t } from "intlayer";
+
+//#region src/components/Loader/index.content.ts
+const loaderContent = {
+	key: "loader",
+	content: { label: t({
+		en: "Animated icon, meaning that the website is processing",
+		"en-GB": "Animated icon, meaning that the website is processing",
+		fr: "Icône animée, signifiant que le site Web est en cours de traitement",
+		es: "Icono animado, significa que el sitio web está procesando",
+		de: "Animiertes Icon, das heißt, dass die Website in Bearbeitung ist",
+		ja: "アニメーションアイコン、ウェブサイトが処理していることを意味する",
+		ko: "애니메이션 아이콘, 웹 사이트가 처리 중인 의미",
+		zh: "动画图标，意味着网站正在处理",
+		it: "Icona animata, che significa che il sito web è in fase di elaborazione",
+		pt: "Ícone animado, o que significa que o site está processando",
+		hi: "एनिमेटेड आइकन, जो कि वेबसाइट को प्रसंस्करण हो रहा है इसका मतलब है",
+		ar: "رمز متحرك، مما يعني أن الموقع الإلكتروني يتم التحميل",
+		ru: "Анимационный значок, что означает, что сайт обрабатывается",
+		tr: "Web sitesinin işlemde olduğunu belirten animasyonlu simge",
+		pl: "Animowana ikona oznaczająca, że strona przetwarza dane",
+		id: "Ikon animasi yang menunjukkan bahwa situs sedang memproses konten",
+		vi: "Biểu tượng động, biểu thị rằng trang web đang xử lý"
+	}) },
+	title: "Loader component",
+	description: "Content declaration for the loader component, representing an animated icon indicating that the website is processing or loading content.",
+	tags: ["component", "loader"]
+};
+var index_content_default = loaderContent;
+
+//#endregion
+export { index_content_default as default, loaderContent };
+//# sourceMappingURL=index.content.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.content.mjs","names":[],"sources":["../../../../src/components/Loader/index.content.ts"],"sourcesContent":["import { type Dictionary, t } from 'intlayer';\n\nexport const loaderContent = {\n  key: 'loader',\n  content: {\n    label: t({\n      en: 'Animated icon, meaning that the website is processing',\n      'en-GB': 'Animated icon, meaning that the website is processing',\n      fr: 'Icône animée, signifiant que le site Web est en cours de traitement',\n      es: 'Icono animado, significa que el sitio web está procesando',\n      de: 'Animiertes Icon, das heißt, dass die Website in Bearbeitung ist',\n      ja: 'アニメーションアイコン、ウェブサイトが処理していることを意味する',\n      ko: '애니메이션 아이콘, 웹 사이트가 처리 중인 의미',\n      zh: '动画图标，意味着网站正在处理',\n      it: 'Icona animata, che significa che il sito web è in fase di elaborazione',\n      pt: 'Ícone animado, o que significa que o site está processando',\n      hi: 'एनिमेटेड आइकन, जो कि वेबसाइट को प्रसंस्करण हो रहा है इसका मतलब है',\n      ar: 'رمز متحرك، مما يعني أن الموقع الإلكتروني يتم التحميل',\n      ru: 'Анимационный значок, что означает, что сайт обрабатывается',\n      tr: 'Web sitesinin işlemde olduğunu belirten animasyonlu simge',\n      pl: 'Animowana ikona oznaczająca, że strona przetwarza dane',\n      id: 'Ikon animasi yang menunjukkan bahwa situs sedang memproses konten',\n      vi: 'Biểu tượng động, biểu thị rằng trang web đang xử lý',\n    }),\n  },\n  title: 'Loader component',\n  description:\n    'Content declaration for the loader component, representing an animated icon indicating that the website is processing or loading content.',\n  tags: ['component', 'loader'],\n} satisfies Dictionary;\n\nexport default loaderContent;\n"],"mappings":";;;AAEA,MAAa,gBAAgB;CAC3B,KAAK;CACL,SAAS,EACP,OAAO,EAAE;EACP,IAAI;EACJ,SAAS;EACT,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,CAAC,EACH;CACD,OAAO;CACP,aACE;CACF,MAAM,CAAC,aAAa,SAAS;CAC9B;AAED,4BAAe"}

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

@@ -0,0 +1,112 @@
+import { cn } from "../../utils/cn.mjs";
+import { Spinner } from "./spinner.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Loader/index.tsx
+/**
+* Loader Component
+*
+* 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.
+*
+* @component
+* @example
+* Standalone usage:
+* ```tsx
+* <Loader isLoading={true} />
+* ```
+*
+* @example
+* As a content wrapper:
+* ```tsx
+* <Loader isLoading={isDataLoading}>
+*   <div>Your content here</div>
+* </Loader>
+* ```
+*
+* @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
+*/
+const Loader = ({ children, isLoading = true, keepChildren = false, className,...props }) => /* @__PURE__ */ jsx(Fragment, { children: isLoading && keepChildren ? /* @__PURE__ */ jsxs("div", {
+	className: "relative size-full",
+	children: [/* @__PURE__ */ jsx("div", {
+		className: cn("absolute top-0 left-0 flex size-full max-h-screen max-w-[100vw] flex-1 items-center justify-center", className),
+		role: "status",
+		"aria-label": "Animated icon, meaning that the website is processing",
+		...props,
+		children: /* @__PURE__ */ jsx(Spinner, { className: "size-10 max-h-full max-w-full" })
+	}), children]
+}) : isLoading ? /* @__PURE__ */ jsx("div", {
+	className: cn("flex size-full max-h-screen max-w-[100vw] flex-1 items-center justify-center", className),
+	role: "status",
+	"aria-label": "Animated icon, meaning that the website is processing",
+	...props,
+	children: /* @__PURE__ */ jsx(Spinner, { className: "size-10 max-h-full max-w-full" })
+}) : children ?? /* @__PURE__ */ jsx(Fragment, {}) });
+
+//#endregion
+export { Loader };
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["Loader: FC<LoaderProps>"],"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  /** Controls whether the children are kept when loading is false. Defaults to false */\n  keepChildren?: 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  keepChildren = false,\n  className,\n  ...props\n}) => (\n  <>\n    {isLoading && keepChildren ? (\n      <div className=\"relative size-full\">\n        <div\n          className={cn(\n            'absolute top-0 left-0 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        {children}\n      </div>\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqGA,MAAaA,UAA2B,EACtC,UACA,YAAY,MACZ,eAAe,OACf,UACA,GAAG,YAEH,0CACG,aAAa,eACZ,qBAAC;CAAI,WAAU;YACb,oBAAC;EACC,WAAW,GACT,sGACA,UACD;EACD,MAAK;EACL,cAAW;EACX,GAAI;YAEJ,oBAAC,WAAQ,WAAU,kCAAkC;GACjD,EACL;EACG,GACJ,YACF,oBAAC;CACC,WAAW,GACT,gFACA,UACD;CACD,MAAK;CACL,cAAW;CACX,GAAI;WAEJ,oBAAC,WAAQ,WAAU,kCAAkC;EACjD,GAEL,YAAY,iCAAK,GAEnB"}

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

@@ -0,0 +1,122 @@
+import { cn } from "../../utils/cn.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Loader/spinner.tsx
+/**
+* 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
+*/
+const Spinner = ({ className, strokeWidth = 4 }) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: "44",
+	height: "44",
+	viewBox: "0 0 44 44",
+	stroke: "currentColor",
+	role: "img",
+	"aria-label": "Spinner",
+	className: cn("size-full", className),
+	children: /* @__PURE__ */ jsxs("g", {
+		fill: "none",
+		fillRule: "evenodd",
+		strokeWidth,
+		children: [/* @__PURE__ */ jsxs("circle", {
+			cx: "22",
+			cy: "22",
+			r: "1",
+			children: [/* @__PURE__ */ jsx("animate", {
+				attributeName: "r",
+				begin: "0s",
+				dur: "1.8s",
+				values: "1; 20",
+				calcMode: "spline",
+				keyTimes: "0; 1",
+				keySplines: "0.165, 0.84, 0.44, 1",
+				repeatCount: "indefinite"
+			}), /* @__PURE__ */ jsx("animate", {
+				attributeName: "stroke-opacity",
+				begin: "0s",
+				dur: "1.8s",
+				values: "1; 0",
+				calcMode: "spline",
+				keyTimes: "0; 1",
+				keySplines: "0.3, 0.61, 0.355, 1",
+				repeatCount: "indefinite"
+			})]
+		}), /* @__PURE__ */ jsxs("circle", {
+			cx: "22",
+			cy: "22",
+			r: "1",
+			children: [/* @__PURE__ */ jsx("animate", {
+				attributeName: "r",
+				begin: "-0.9s",
+				dur: "1.8s",
+				values: "1; 20",
+				calcMode: "spline",
+				keyTimes: "0; 1",
+				keySplines: "0.165, 0.84, 0.44, 1",
+				repeatCount: "indefinite"
+			}), /* @__PURE__ */ jsx("animate", {
+				attributeName: "stroke-opacity",
+				begin: "-0.9s",
+				dur: "1.8s",
+				values: "1; 0",
+				calcMode: "spline",
+				keyTimes: "0; 1",
+				keySplines: "0.3, 0.61, 0.355, 1",
+				repeatCount: "indefinite"
+			})]
+		})]
+	})
+});
+
+//#endregion
+export { Spinner };
+//# sourceMappingURL=spinner.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"spinner.mjs","names":[],"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    role=\"img\"\n    aria-label=\"Spinner\"\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+DA,MAAa,WAAW,EAAE,WAAW,cAAc,QACjD,oBAAC;CACC,OAAM;CACN,OAAM;CACN,QAAO;CACP,SAAQ;CACR,QAAO;CACP,MAAK;CACL,cAAW;CACX,WAAW,GAAG,aAAa,UAAU;WAErC,qBAAC;EAAE,MAAK;EAAO,UAAS;EAAuB;aAC7C,qBAAC;GAAO,IAAG;GAAK,IAAG;GAAK,GAAE;cACxB,oBAAC;IACC,eAAc;IACd,OAAM;IACN,KAAI;IACJ,QAAO;IACP,UAAS;IACT,UAAS;IACT,YAAW;IACX,aAAY;KACZ,EACF,oBAAC;IACC,eAAc;IACd,OAAM;IACN,KAAI;IACJ,QAAO;IACP,UAAS;IACT,UAAS;IACT,YAAW;IACX,aAAY;KACZ;IACK,EACT,qBAAC;GAAO,IAAG;GAAK,IAAG;GAAK,GAAE;cACxB,oBAAC;IACC,eAAc;IACd,OAAM;IACN,KAAI;IACJ,QAAO;IACP,UAAS;IACT,UAAS;IACT,YAAW;IACX,aAAY;KACZ,EACF,oBAAC;IACC,eAAc;IACd,OAAM;IACN,KAAI;IACJ,QAAO;IACP,UAAS;IACT,UAAS;IACT,YAAW;IACX,aAAY;KACZ;IACK;GACP;EACA"}