@intlayer/design-system 6.1.5 → 6.1.6

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Badge/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\n\nexport enum BadgeColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  DESTRUCTIVE = 'destructive',\n  NEUTRAL = 'neutral',\n  LIGHT = 'light',\n  DARK = 'dark',\n  TEXT = 'text',\n  CUSTOM = 'custom',\n}\n\nexport enum BadgeVariant {\n  DEFAULT = 'default',\n  NONE = 'none',\n  OUTLINE = 'outline',\n  HOVERABLE = 'hoverable',\n}\n\nexport const badgeVariants = cva(\n  'focus:ring-ring inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2',\n  {\n    variants: {\n      color: {\n        [BadgeColor.PRIMARY]:\n          'border-primary bg-primary text-primary hover:bg-primary-500',\n        [BadgeColor.SECONDARY]:\n          'border-secondary bg-secondary text-secondary hover:bg-secondary-300',\n        [BadgeColor.DESTRUCTIVE]:\n          'border-destructive bg-destructive text-destructive hover:bg-destructive-500',\n        [BadgeColor.NEUTRAL]:\n          'border-neutral bg-neutral text-neutral hover:bg-neutral-600',\n        [BadgeColor.LIGHT]:\n          'border-white bg-white text-white hover:bg-neutral-500',\n        [BadgeColor.DARK]:\n          'border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900',\n        [BadgeColor.TEXT]: 'border-text bg-text text-text hover:opacity-80',\n        [BadgeColor.CUSTOM]: '',\n      },\n      variant: {\n        [BadgeVariant.DEFAULT]: 'rounded-lg text-text-opposite',\n        [BadgeVariant.NONE]:\n          'border-none bg-opacity-0 text-inherit hover:bg-opacity-0',\n        [BadgeVariant.OUTLINE]:\n          'rounded-lg border-[1.5px] bg-opacity-0 hover:bg-opacity-30',\n        [BadgeVariant.HOVERABLE]:\n          'rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10',\n      },\n    },\n    defaultVariants: {\n      variant: BadgeVariant.DEFAULT,\n      color: BadgeColor.PRIMARY,\n    },\n  }\n);\n\nexport type BadgeProps = HTMLAttributes<HTMLDivElement> &\n  VariantProps<typeof badgeVariants>;\n\nexport const Badge = ({ className, variant, color, ...props }: BadgeProps) => (\n  <div\n    className={cn(badgeVariants({ variant, color }), className)}\n    {...props}\n  />\n);\n"],"names":["BadgeColor","BadgeVariant","cva","jsx","cn"],"mappings":";;;;;AAIO,IAAK,+BAAAA,gBAAL;AACLA,cAAA,SAAA,IAAU;AACVA,cAAA,WAAA,IAAY;AACZA,cAAA,aAAA,IAAc;AACdA,cAAA,SAAA,IAAU;AACVA,cAAA,OAAA,IAAQ;AACRA,cAAA,MAAA,IAAO;AACPA,cAAA,MAAA,IAAO;AACPA,cAAA,QAAA,IAAS;AARC,SAAAA;AAAA,GAAA,cAAA,CAAA,CAAA;AAWL,IAAK,iCAAAC,kBAAL;AACLA,gBAAA,SAAA,IAAU;AACVA,gBAAA,MAAA,IAAO;AACPA,gBAAA,SAAA,IAAU;AACVA,gBAAA,WAAA,IAAY;AAJF,SAAAA;AAAA,GAAA,gBAAA,CAAA,CAAA;AAOL,MAAM,gBAAgBC,uBAAAA;AAAAA,EAC3B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL;AAAA,UAAC;AAAA;AAAA,WACC;AAAA,QACF;AAAA,UAAC;AAAA;AAAA,WACC;AAAA,QACF;AAAA,UAAC;AAAA;AAAA,WACC;AAAA,QACF;AAAA,UAAC;AAAA;AAAA,WACC;AAAA,QACF;AAAA,UAAC;AAAA;AAAA,WACC;AAAA,QACF;AAAA,UAAC;AAAA;AAAA,WACC;AAAA,QACF;AAAA,UAAC;AAAA;AAAA,WAAkB;AAAA,QACnB;AAAA,UAAC;AAAA;AAAA,WAAoB;AAAA,MAAA;AAAA,MAEvB,SAAS;AAAA,QACP;AAAA,UAAC;AAAA;AAAA,WAAuB;AAAA,QACxB;AAAA,UAAC;AAAA;AAAA,WACC;AAAA,QACF;AAAA,UAAC;AAAA;AAAA,WACC;AAAA,QACF;AAAA,UAAC;AAAA;AAAA,WACC;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,OAAO;AAAA;AAAA,IAAA;AAAA,EACT;AAEJ;AAKO,MAAM,QAAQ,CAAC,EAAE,WAAW,SAAS,OAAO,GAAG,YACpDC,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,SAAAA,GAAG,cAAc,EAAE,SAAS,MAAA,CAAO,GAAG,SAAS;AAAA,IACzD,GAAG;AAAA,EAAA;AACN;;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Badge/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\n\n/**\n * Badge color variants enum\n * @description Defines the available color themes for the badge component\n */\nexport enum BadgeColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  DESTRUCTIVE = 'destructive',\n  NEUTRAL = 'neutral',\n  LIGHT = 'light',\n  DARK = 'dark',\n  TEXT = 'text',\n  CUSTOM = 'custom',\n}\n\n/**\n * Badge visual variants enum\n * @description Defines the available visual styles for the badge component\n */\nexport enum BadgeVariant {\n  DEFAULT = 'default',\n  NONE = 'none',\n  OUTLINE = 'outline',\n  HOVERABLE = 'hoverable',\n}\n\n/**\n * Badge size variants enum\n * @description Defines the available sizes for the badge component\n */\nexport enum BadgeSize {\n  SMALL = 'sm',\n  MEDIUM = 'md',\n  LARGE = 'lg',\n}\n\n/**\n * Badge component variants using class-variance-authority\n * @description Defines the styling variants for different badge combinations\n */\nexport const badgeVariants = cva(\n  'focus:ring-ring inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2',\n  {\n    variants: {\n      color: {\n        [BadgeColor.PRIMARY]:\n          'border-primary bg-primary text-primary hover:bg-primary-500',\n        [BadgeColor.SECONDARY]:\n          'border-secondary bg-secondary text-secondary hover:bg-secondary-300',\n        [BadgeColor.DESTRUCTIVE]:\n          'border-destructive bg-destructive text-destructive hover:bg-destructive-500',\n        [BadgeColor.NEUTRAL]:\n          'border-neutral bg-neutral text-neutral hover:bg-neutral-600',\n        [BadgeColor.LIGHT]:\n          'border-white bg-white text-white hover:bg-neutral-500',\n        [BadgeColor.DARK]:\n          'border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900',\n        [BadgeColor.TEXT]: 'border-text bg-text text-text hover:opacity-80',\n        [BadgeColor.CUSTOM]: '',\n      },\n      variant: {\n        [BadgeVariant.DEFAULT]: 'rounded-lg text-text-opposite',\n        [BadgeVariant.NONE]:\n          'border-none bg-opacity-0 text-inherit hover:bg-opacity-0',\n        [BadgeVariant.OUTLINE]:\n          'rounded-lg border-[1.5px] bg-opacity-0 hover:bg-opacity-30',\n        [BadgeVariant.HOVERABLE]:\n          'rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10',\n      },\n      size: {\n        [BadgeSize.SMALL]: 'px-2 py-0.5 text-xs',\n        [BadgeSize.MEDIUM]: 'px-2.5 py-0.5 text-xs',\n        [BadgeSize.LARGE]: 'px-3 py-1 text-sm',\n      },\n    },\n    defaultVariants: {\n      variant: BadgeVariant.DEFAULT,\n      color: BadgeColor.PRIMARY,\n      size: BadgeSize.MEDIUM,\n    },\n  }\n);\n\n/**\n * Badge component props interface\n * @description Comprehensive props for the Badge component with accessibility and interactive features\n */\nexport interface BadgeProps extends HTMLAttributes<HTMLElement> {\n  /** The content to display inside the badge */\n  children?: React.ReactNode;\n  /** Color theme variant */\n  color?: BadgeColor;\n  /** Visual style variant */\n  variant?: BadgeVariant;\n  /** Size of the badge */\n  size?: BadgeSize;\n  /** Whether the badge is clickable */\n  clickable?: boolean;\n  /** Whether the badge is dismissible (shows close button) */\n  dismissible?: boolean;\n  /** Click handler for the badge */\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** Click handler for the dismiss button */\n  onDismiss?: () => void;\n  /** ARIA label for accessibility */\n  'aria-label'?: string;\n  /** Badge role for accessibility (default: 'status') */\n  role?: 'status' | 'button' | 'generic';\n  /** Whether badge should be focusable */\n  tabIndex?: number;\n}\n\n/**\n * Utility type for badge variant props\n */\nexport type BadgeVariantProps = VariantProps<typeof badgeVariants>;\n\n/**\n * Badge component for displaying status indicators, labels, and notifications\n *\n * @description A flexible badge component that supports multiple visual styles, colors, and interactive features.\n * It maintains accessibility standards and provides comprehensive customization options.\n *\n * @example\n * ```tsx\n * // Basic badge\n * <Badge>New</Badge>\n *\n * // Colored badge\n * <Badge color={BadgeColor.DESTRUCTIVE}>Error</Badge>\n *\n * // Clickable badge\n * <Badge clickable onClick={() => console.log('clicked')}>\n *   Clickable\n * </Badge>\n *\n * // Dismissible badge\n * <Badge dismissible onDismiss={() => console.log('dismissed')}>\n *   Dismissible\n * </Badge>\n * ```\n */\nexport const Badge: React.FC<BadgeProps> = ({\n  className,\n  variant = BadgeVariant.DEFAULT,\n  color = BadgeColor.PRIMARY,\n  size = BadgeSize.MEDIUM,\n  children,\n  clickable = false,\n  dismissible = false,\n  onClick,\n  onDismiss,\n  role,\n  tabIndex,\n  'aria-label': ariaLabel,\n  ...props\n}) => {\n  const Component = clickable ? 'button' : 'span';\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    if (clickable && onClick && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault();\n      onClick(event as any);\n    }\n  };\n\n  const handleDismiss = (event: React.MouseEvent) => {\n    event.stopPropagation();\n    onDismiss?.();\n  };\n\n  return (\n    <Component\n      className={cn(\n        badgeVariants({ variant, color, size }),\n        clickable &&\n          'cursor-pointer hover:opacity-80 focus-visible:ring-2 focus-visible:ring-offset-2',\n        dismissible && 'pr-1',\n        className\n      )}\n      onClick={clickable ? onClick : undefined}\n      onKeyDown={clickable ? handleKeyDown : undefined}\n      role={role || (clickable ? 'button' : 'status')}\n      tabIndex={clickable ? (tabIndex ?? 0) : tabIndex}\n      aria-label={ariaLabel || (clickable ? `${children} button` : undefined)}\n      {...props}\n    >\n      {children}\n      {dismissible && (\n        <button\n          type=\"button\"\n          className=\"ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-black/10 focus:outline-none focus:ring-1 focus:ring-offset-1\"\n          onClick={handleDismiss}\n          aria-label={`Remove ${children} badge`}\n        >\n          <svg className=\"h-3 w-3\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n            <path\n              fillRule=\"evenodd\"\n              d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n              clipRule=\"evenodd\"\n            />\n          </svg>\n        </button>\n      )}\n    </Component>\n  );\n};\n"],"names":["BadgeColor","BadgeVariant","BadgeSize","cva","jsxs","cn","jsx"],"mappings":"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"}

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

@@ -1,5 +1,9 @@
 import { VariantProps } from 'class-variance-authority';
 import { HTMLAttributes } from 'react';
+/**
+ * Badge color variants enum
+ * @description Defines the available color themes for the badge component
+ */
 export declare enum BadgeColor {
     PRIMARY = "primary",
     SECONDARY = "secondary",
@@ -10,16 +14,90 @@ export declare enum BadgeColor {
     TEXT = "text",
     CUSTOM = "custom"
 }
+/**
+ * Badge visual variants enum
+ * @description Defines the available visual styles for the badge component
+ */
 export declare enum BadgeVariant {
     DEFAULT = "default",
     NONE = "none",
     OUTLINE = "outline",
     HOVERABLE = "hoverable"
 }
+/**
+ * Badge size variants enum
+ * @description Defines the available sizes for the badge component
+ */
+export declare enum BadgeSize {
+    SMALL = "sm",
+    MEDIUM = "md",
+    LARGE = "lg"
+}
+/**
+ * Badge component variants using class-variance-authority
+ * @description Defines the styling variants for different badge combinations
+ */
 export declare const badgeVariants: (props?: ({
     color?: BadgeColor | null | undefined;
     variant?: BadgeVariant | null | undefined;
+    size?: BadgeSize | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export type BadgeProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof badgeVariants>;
-export declare const Badge: ({ className, variant, color, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Badge component props interface
+ * @description Comprehensive props for the Badge component with accessibility and interactive features
+ */
+export interface BadgeProps extends HTMLAttributes<HTMLElement> {
+    /** The content to display inside the badge */
+    children?: React.ReactNode;
+    /** Color theme variant */
+    color?: BadgeColor;
+    /** Visual style variant */
+    variant?: BadgeVariant;
+    /** Size of the badge */
+    size?: BadgeSize;
+    /** Whether the badge is clickable */
+    clickable?: boolean;
+    /** Whether the badge is dismissible (shows close button) */
+    dismissible?: boolean;
+    /** Click handler for the badge */
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    /** Click handler for the dismiss button */
+    onDismiss?: () => void;
+    /** ARIA label for accessibility */
+    'aria-label'?: string;
+    /** Badge role for accessibility (default: 'status') */
+    role?: 'status' | 'button' | 'generic';
+    /** Whether badge should be focusable */
+    tabIndex?: number;
+}
+/**
+ * Utility type for badge variant props
+ */
+export type BadgeVariantProps = VariantProps<typeof badgeVariants>;
+/**
+ * Badge component for displaying status indicators, labels, and notifications
+ *
+ * @description A flexible badge component that supports multiple visual styles, colors, and interactive features.
+ * It maintains accessibility standards and provides comprehensive customization options.
+ *
+ * @example
+ * ```tsx
+ * // Basic badge
+ * <Badge>New</Badge>
+ *
+ * // Colored badge
+ * <Badge color={BadgeColor.DESTRUCTIVE}>Error</Badge>
+ *
+ * // Clickable badge
+ * <Badge clickable onClick={() => console.log('clicked')}>
+ *   Clickable
+ * </Badge>
+ *
+ * // Dismissible badge
+ * <Badge dismissible onDismiss={() => console.log('dismissed')}>
+ *   Dismissible
+ * </Badge>
+ * ```
+ */
+export declare const Badge: React.FC<BadgeProps>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,oBAAY,UAAU;IACpB,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,WAAW,gBAAgB;IAC3B,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,IAAI,SAAS;IACb,IAAI,SAAS;IACb,MAAM,WAAW;CAClB;AAED,oBAAY,YAAY;IACtB,OAAO,YAAY;IACnB,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,SAAS,cAAc;CACxB;AAED,eAAO,MAAM,aAAa;;;8EAmCzB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,cAAc,CAAC,GACrD,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAErC,eAAO,MAAM,KAAK,GAAI,yCAAyC,UAAU,4CAKxE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C;;;GAGG;AACH,oBAAY,UAAU;IACpB,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,WAAW,gBAAgB;IAC3B,OAAO,YAAY;IACnB,KAAK,UAAU;IACf,IAAI,SAAS;IACb,IAAI,SAAS;IACb,MAAM,WAAW;CAClB;AAED;;;GAGG;AACH,oBAAY,YAAY;IACtB,OAAO,YAAY;IACnB,IAAI,SAAS;IACb,OAAO,YAAY;IACnB,SAAS,cAAc;CACxB;AAED;;;GAGG;AACH,oBAAY,SAAS;IACnB,KAAK,OAAO;IACZ,MAAM,OAAO;IACb,KAAK,OAAO;CACb;AAED;;;GAGG;AACH,eAAO,MAAM,aAAa;;;;8EAyCzB,CAAC;AAEF;;;GAGG;AACH,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,WAAW,CAAC;IAC7D,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,0BAA0B;IAC1B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2BAA2B;IAC3B,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,wBAAwB;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,qCAAqC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kCAAkC;IAClC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACzD,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,mCAAmC;IACnC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uDAAuD;IACvD,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAC;IACvC,wCAAwC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAEnE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAgEtC,CAAC"}

package/dist/components/Badge/index.mjs

@@ -1,4 +1,4 @@
-import { jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils/cn.mjs";
 var BadgeColor = /* @__PURE__ */ ((BadgeColor2) => {
@@ -19,6 +19,12 @@ var BadgeVariant = /* @__PURE__ */ ((BadgeVariant2) => {
   BadgeVariant2["HOVERABLE"] = "hoverable";
   return BadgeVariant2;
 })(BadgeVariant || {});
+var BadgeSize = /* @__PURE__ */ ((BadgeSize2) => {
+  BadgeSize2["SMALL"] = "sm";
+  BadgeSize2["MEDIUM"] = "md";
+  BadgeSize2["LARGE"] = "lg";
+  return BadgeSize2;
+})(BadgeSize || {});
 const badgeVariants = cva(
   "focus:ring-ring inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2",
   {
@@ -74,25 +80,98 @@ const badgeVariants = cva(
           "hoverable"
           /* HOVERABLE */
         ]: "rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10"
+      },
+      size: {
+        [
+          "sm"
+          /* SMALL */
+        ]: "px-2 py-0.5 text-xs",
+        [
+          "md"
+          /* MEDIUM */
+        ]: "px-2.5 py-0.5 text-xs",
+        [
+          "lg"
+          /* LARGE */
+        ]: "px-3 py-1 text-sm"
       }
     },
     defaultVariants: {
       variant: "default",
-      color: "primary"
-      /* PRIMARY */
+      color: "primary",
+      size: "md"
+      /* MEDIUM */
     }
   }
 );
-const Badge = ({ className, variant, color, ...props }) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    className: cn(badgeVariants({ variant, color }), className),
-    ...props
-  }
-);
+const Badge = ({
+  className,
+  variant = "default",
+  color = "primary",
+  size = "md",
+  children,
+  clickable = false,
+  dismissible = false,
+  onClick,
+  onDismiss,
+  role,
+  tabIndex,
+  "aria-label": ariaLabel,
+  ...props
+}) => {
+  const Component = clickable ? "button" : "span";
+  const handleKeyDown = (event) => {
+    if (clickable && onClick && (event.key === "Enter" || event.key === " ")) {
+      event.preventDefault();
+      onClick(event);
+    }
+  };
+  const handleDismiss = (event) => {
+    event.stopPropagation();
+    onDismiss?.();
+  };
+  return /* @__PURE__ */ jsxs(
+    Component,
+    {
+      className: cn(
+        badgeVariants({ variant, color, size }),
+        clickable && "cursor-pointer hover:opacity-80 focus-visible:ring-2 focus-visible:ring-offset-2",
+        dismissible && "pr-1",
+        className
+      ),
+      onClick: clickable ? onClick : void 0,
+      onKeyDown: clickable ? handleKeyDown : void 0,
+      role: role || (clickable ? "button" : "status"),
+      tabIndex: clickable ? tabIndex ?? 0 : tabIndex,
+      "aria-label": ariaLabel || (clickable ? `${children} button` : void 0),
+      ...props,
+      children: [
+        children,
+        dismissible && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-black/10 focus:outline-none focus:ring-1 focus:ring-offset-1",
+            onClick: handleDismiss,
+            "aria-label": `Remove ${children} badge`,
+            children: /* @__PURE__ */ jsx("svg", { className: "h-3 w-3", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                fillRule: "evenodd",
+                d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
+                clipRule: "evenodd"
+              }
+            ) })
+          }
+        )
+      ]
+    }
+  );
+};
 export {
   Badge,
   BadgeColor,
+  BadgeSize,
   BadgeVariant,
   badgeVariants
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/Badge/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\n\nexport enum BadgeColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  DESTRUCTIVE = 'destructive',\n  NEUTRAL = 'neutral',\n  LIGHT = 'light',\n  DARK = 'dark',\n  TEXT = 'text',\n  CUSTOM = 'custom',\n}\n\nexport enum BadgeVariant {\n  DEFAULT = 'default',\n  NONE = 'none',\n  OUTLINE = 'outline',\n  HOVERABLE = 'hoverable',\n}\n\nexport const badgeVariants = cva(\n  'focus:ring-ring inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2',\n  {\n    variants: {\n      color: {\n        [BadgeColor.PRIMARY]:\n          'border-primary bg-primary text-primary hover:bg-primary-500',\n        [BadgeColor.SECONDARY]:\n          'border-secondary bg-secondary text-secondary hover:bg-secondary-300',\n        [BadgeColor.DESTRUCTIVE]:\n          'border-destructive bg-destructive text-destructive hover:bg-destructive-500',\n        [BadgeColor.NEUTRAL]:\n          'border-neutral bg-neutral text-neutral hover:bg-neutral-600',\n        [BadgeColor.LIGHT]:\n          'border-white bg-white text-white hover:bg-neutral-500',\n        [BadgeColor.DARK]:\n          'border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900',\n        [BadgeColor.TEXT]: 'border-text bg-text text-text hover:opacity-80',\n        [BadgeColor.CUSTOM]: '',\n      },\n      variant: {\n        [BadgeVariant.DEFAULT]: 'rounded-lg text-text-opposite',\n        [BadgeVariant.NONE]:\n          'border-none bg-opacity-0 text-inherit hover:bg-opacity-0',\n        [BadgeVariant.OUTLINE]:\n          'rounded-lg border-[1.5px] bg-opacity-0 hover:bg-opacity-30',\n        [BadgeVariant.HOVERABLE]:\n          'rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10',\n      },\n    },\n    defaultVariants: {\n      variant: BadgeVariant.DEFAULT,\n      color: BadgeColor.PRIMARY,\n    },\n  }\n);\n\nexport type BadgeProps = HTMLAttributes<HTMLDivElement> &\n  VariantProps<typeof badgeVariants>;\n\nexport const Badge = ({ className, variant, color, ...props }: BadgeProps) => (\n  <div\n    className={cn(badgeVariants({ variant, color }), className)}\n    {...props}\n  />\n);\n"],"names":["BadgeColor","BadgeVariant"],"mappings":";;;AAIO,IAAK,+BAAAA,gBAAL;AACLA,cAAA,SAAA,IAAU;AACVA,cAAA,WAAA,IAAY;AACZA,cAAA,aAAA,IAAc;AACdA,cAAA,SAAA,IAAU;AACVA,cAAA,OAAA,IAAQ;AACRA,cAAA,MAAA,IAAO;AACPA,cAAA,MAAA,IAAO;AACPA,cAAA,QAAA,IAAS;AARC,SAAAA;AAAA,GAAA,cAAA,CAAA,CAAA;AAWL,IAAK,iCAAAC,kBAAL;AACLA,gBAAA,SAAA,IAAU;AACVA,gBAAA,MAAA,IAAO;AACPA,gBAAA,SAAA,IAAU;AACVA,gBAAA,WAAA,IAAY;AAJF,SAAAA;AAAA,GAAA,gBAAA,CAAA,CAAA;AAOL,MAAM,gBAAgB;AAAA,EAC3B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL;AAAA,UAAC;AAAA;AAAA,WACC;AAAA,QACF;AAAA,UAAC;AAAA;AAAA,WACC;AAAA,QACF;AAAA,UAAC;AAAA;AAAA,WACC;AAAA,QACF;AAAA,UAAC;AAAA;AAAA,WACC;AAAA,QACF;AAAA,UAAC;AAAA;AAAA,WACC;AAAA,QACF;AAAA,UAAC;AAAA;AAAA,WACC;AAAA,QACF;AAAA,UAAC;AAAA;AAAA,WAAkB;AAAA,QACnB;AAAA,UAAC;AAAA;AAAA,WAAoB;AAAA,MAAA;AAAA,MAEvB,SAAS;AAAA,QACP;AAAA,UAAC;AAAA;AAAA,WAAuB;AAAA,QACxB;AAAA,UAAC;AAAA;AAAA,WACC;AAAA,QACF;AAAA,UAAC;AAAA;AAAA,WACC;AAAA,QACF;AAAA,UAAC;AAAA;AAAA,WACC;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,OAAO;AAAA;AAAA,IAAA;AAAA,EACT;AAEJ;AAKO,MAAM,QAAQ,CAAC,EAAE,WAAW,SAAS,OAAO,GAAG,YACpD;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAW,GAAG,cAAc,EAAE,SAAS,MAAA,CAAO,GAAG,SAAS;AAAA,IACzD,GAAG;AAAA,EAAA;AACN;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/Badge/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { HTMLAttributes } from 'react';\nimport { cn } from '../../utils/cn';\n\n/**\n * Badge color variants enum\n * @description Defines the available color themes for the badge component\n */\nexport enum BadgeColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  DESTRUCTIVE = 'destructive',\n  NEUTRAL = 'neutral',\n  LIGHT = 'light',\n  DARK = 'dark',\n  TEXT = 'text',\n  CUSTOM = 'custom',\n}\n\n/**\n * Badge visual variants enum\n * @description Defines the available visual styles for the badge component\n */\nexport enum BadgeVariant {\n  DEFAULT = 'default',\n  NONE = 'none',\n  OUTLINE = 'outline',\n  HOVERABLE = 'hoverable',\n}\n\n/**\n * Badge size variants enum\n * @description Defines the available sizes for the badge component\n */\nexport enum BadgeSize {\n  SMALL = 'sm',\n  MEDIUM = 'md',\n  LARGE = 'lg',\n}\n\n/**\n * Badge component variants using class-variance-authority\n * @description Defines the styling variants for different badge combinations\n */\nexport const badgeVariants = cva(\n  'focus:ring-ring inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2',\n  {\n    variants: {\n      color: {\n        [BadgeColor.PRIMARY]:\n          'border-primary bg-primary text-primary hover:bg-primary-500',\n        [BadgeColor.SECONDARY]:\n          'border-secondary bg-secondary text-secondary hover:bg-secondary-300',\n        [BadgeColor.DESTRUCTIVE]:\n          'border-destructive bg-destructive text-destructive hover:bg-destructive-500',\n        [BadgeColor.NEUTRAL]:\n          'border-neutral bg-neutral text-neutral hover:bg-neutral-600',\n        [BadgeColor.LIGHT]:\n          'border-white bg-white text-white hover:bg-neutral-500',\n        [BadgeColor.DARK]:\n          'border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900',\n        [BadgeColor.TEXT]: 'border-text bg-text text-text hover:opacity-80',\n        [BadgeColor.CUSTOM]: '',\n      },\n      variant: {\n        [BadgeVariant.DEFAULT]: 'rounded-lg text-text-opposite',\n        [BadgeVariant.NONE]:\n          'border-none bg-opacity-0 text-inherit hover:bg-opacity-0',\n        [BadgeVariant.OUTLINE]:\n          'rounded-lg border-[1.5px] bg-opacity-0 hover:bg-opacity-30',\n        [BadgeVariant.HOVERABLE]:\n          'rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10',\n      },\n      size: {\n        [BadgeSize.SMALL]: 'px-2 py-0.5 text-xs',\n        [BadgeSize.MEDIUM]: 'px-2.5 py-0.5 text-xs',\n        [BadgeSize.LARGE]: 'px-3 py-1 text-sm',\n      },\n    },\n    defaultVariants: {\n      variant: BadgeVariant.DEFAULT,\n      color: BadgeColor.PRIMARY,\n      size: BadgeSize.MEDIUM,\n    },\n  }\n);\n\n/**\n * Badge component props interface\n * @description Comprehensive props for the Badge component with accessibility and interactive features\n */\nexport interface BadgeProps extends HTMLAttributes<HTMLElement> {\n  /** The content to display inside the badge */\n  children?: React.ReactNode;\n  /** Color theme variant */\n  color?: BadgeColor;\n  /** Visual style variant */\n  variant?: BadgeVariant;\n  /** Size of the badge */\n  size?: BadgeSize;\n  /** Whether the badge is clickable */\n  clickable?: boolean;\n  /** Whether the badge is dismissible (shows close button) */\n  dismissible?: boolean;\n  /** Click handler for the badge */\n  onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** Click handler for the dismiss button */\n  onDismiss?: () => void;\n  /** ARIA label for accessibility */\n  'aria-label'?: string;\n  /** Badge role for accessibility (default: 'status') */\n  role?: 'status' | 'button' | 'generic';\n  /** Whether badge should be focusable */\n  tabIndex?: number;\n}\n\n/**\n * Utility type for badge variant props\n */\nexport type BadgeVariantProps = VariantProps<typeof badgeVariants>;\n\n/**\n * Badge component for displaying status indicators, labels, and notifications\n *\n * @description A flexible badge component that supports multiple visual styles, colors, and interactive features.\n * It maintains accessibility standards and provides comprehensive customization options.\n *\n * @example\n * ```tsx\n * // Basic badge\n * <Badge>New</Badge>\n *\n * // Colored badge\n * <Badge color={BadgeColor.DESTRUCTIVE}>Error</Badge>\n *\n * // Clickable badge\n * <Badge clickable onClick={() => console.log('clicked')}>\n *   Clickable\n * </Badge>\n *\n * // Dismissible badge\n * <Badge dismissible onDismiss={() => console.log('dismissed')}>\n *   Dismissible\n * </Badge>\n * ```\n */\nexport const Badge: React.FC<BadgeProps> = ({\n  className,\n  variant = BadgeVariant.DEFAULT,\n  color = BadgeColor.PRIMARY,\n  size = BadgeSize.MEDIUM,\n  children,\n  clickable = false,\n  dismissible = false,\n  onClick,\n  onDismiss,\n  role,\n  tabIndex,\n  'aria-label': ariaLabel,\n  ...props\n}) => {\n  const Component = clickable ? 'button' : 'span';\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    if (clickable && onClick && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault();\n      onClick(event as any);\n    }\n  };\n\n  const handleDismiss = (event: React.MouseEvent) => {\n    event.stopPropagation();\n    onDismiss?.();\n  };\n\n  return (\n    <Component\n      className={cn(\n        badgeVariants({ variant, color, size }),\n        clickable &&\n          'cursor-pointer hover:opacity-80 focus-visible:ring-2 focus-visible:ring-offset-2',\n        dismissible && 'pr-1',\n        className\n      )}\n      onClick={clickable ? onClick : undefined}\n      onKeyDown={clickable ? handleKeyDown : undefined}\n      role={role || (clickable ? 'button' : 'status')}\n      tabIndex={clickable ? (tabIndex ?? 0) : tabIndex}\n      aria-label={ariaLabel || (clickable ? `${children} button` : undefined)}\n      {...props}\n    >\n      {children}\n      {dismissible && (\n        <button\n          type=\"button\"\n          className=\"ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full hover:bg-black/10 focus:outline-none focus:ring-1 focus:ring-offset-1\"\n          onClick={handleDismiss}\n          aria-label={`Remove ${children} badge`}\n        >\n          <svg className=\"h-3 w-3\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n            <path\n              fillRule=\"evenodd\"\n              d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\"\n              clipRule=\"evenodd\"\n            />\n          </svg>\n        </button>\n      )}\n    </Component>\n  );\n};\n"],"names":["BadgeColor","BadgeVariant","BadgeSize"],"mappings":"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"}

package/dist/components/Breadcrumb/index.cjs

@@ -2,12 +2,31 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const lucideReact = require("lucide-react");
 const ReactExports = require("react");
+const classVarianceAuthority = require("class-variance-authority");
+const lucideReact = require("lucide-react");
 const reactIntlayer = require("react-intlayer");
 const utils_cn = require("../../utils/cn.cjs");
 const components_Button_Button = require("../Button/Button.cjs");
 const components_Link_Link = require("../Link/Link.cjs");
+const breadcrumbVariants = classVarianceAuthority.cva("flex flex-row flex-wrap items-center text-sm", {
+  variants: {
+    size: {
+      small: "gap-1 text-xs",
+      medium: "gap-2 text-sm",
+      large: "gap-3 text-base"
+    },
+    spacing: {
+      compact: "gap-1",
+      normal: "gap-2",
+      loose: "gap-4"
+    }
+  },
+  defaultVariants: {
+    size: "medium",
+    spacing: "normal"
+  }
+});
 const LinkLink = ({
   href,
   lang,
@@ -16,6 +35,7 @@ const LinkLink = ({
   color,
   position,
   locale,
+  className,
   ...props
 }) => {
   const { linkLabel } = reactIntlayer.useIntlayer("breadcrumb");
@@ -45,6 +65,7 @@ const ButtonLink = ({
   onClick,
   color,
   position,
+  className,
   ...props
 }) => {
   const { linkLabel } = reactIntlayer.useIntlayer("breadcrumb");
@@ -64,80 +85,124 @@ const ButtonLink = ({
     /* @__PURE__ */ jsxRuntime.jsx("meta", { itemProp: "position", content: position.toString() })
   ] });
 };
-const Span = ({ children, position, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs("span", { itemProp: "item", children: [
-  /* @__PURE__ */ jsxRuntime.jsx("span", { itemProp: "name", ...props, children }),
-  /* @__PURE__ */ jsxRuntime.jsx("meta", { itemProp: "position", content: position.toString() })
-] });
+const Span = ({ children, position, className, ...props }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "span",
+  {
+    itemProp: "item",
+    className: utils_cn.cn(
+      "inline-flex items-center",
+      "text-neutral-700 font-medium",
+      "transition-colors duration-200",
+      className
+    ),
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { itemProp: "name", ...props, children }),
+      /* @__PURE__ */ jsxRuntime.jsx("meta", { itemProp: "position", content: position.toString() })
+    ]
+  }
+);
 const Breadcrumb = ({
   links,
   className,
   color = components_Link_Link.LinkColor.TEXT,
   locale,
   elementType = "page",
+  separator = /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, { size: 10 }),
+  ariaLabel = "breadcrumb",
+  includeStructuredData = true,
+  maxItems,
+  size,
+  spacing,
   ...props
-}) => /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "breadcrumb", children: /* @__PURE__ */ jsxRuntime.jsx(
-  "ol",
-  {
-    className: utils_cn.cn(
-      "flex flex-row flex-wrap items-center gap-2 text-sm",
-      className
-    ),
-    itemScope: true,
-    itemType: "http://schema.org/BreadcrumbList",
-    ...props,
-    children: links.map((link, index) => {
-      const isLastLink = index === links.length - 1;
-      const isLink = typeof link === "object" && typeof link.href === "string";
-      const isButton = typeof link === "object" && typeof link.onClick === "function";
-      const isActive = index === links.length - 1;
-      const ariaCurrent = isActive ? elementType : void 0;
-      const text = link.text ?? link;
-      let section = /* @__PURE__ */ jsxRuntime.jsx(Span, { position: index + 1, "aria-current": ariaCurrent, children: text }, text);
-      if (isLink) {
-        section = /* @__PURE__ */ jsxRuntime.jsx(
-          LinkLink,
+}) => {
+  const displayLinks = maxItems && links.length > maxItems ? [...links.slice(0, 1), "...", ...links.slice(-(maxItems - 2))] : links;
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": ariaLabel, role: "navigation", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "ol",
+    {
+      className: utils_cn.cn(breadcrumbVariants({ size, spacing }), className),
+      ...includeStructuredData && {
+        itemScope: true,
+        itemType: "http://schema.org/BreadcrumbList"
+      },
+      ...props,
+      children: displayLinks.map((link, index) => {
+        const isLastLink = index === displayLinks.length - 1;
+        const isLink = typeof link === "object" && typeof link.href === "string";
+        const isButton = typeof link === "object" && typeof link.onClick === "function";
+        const isActive = index === displayLinks.length - 1;
+        const ariaCurrent = isActive ? elementType : void 0;
+        const isTruncated = link === "...";
+        const text = link.text ?? link;
+        if (isTruncated) {
+          return /* @__PURE__ */ jsxRuntime.jsxs(ReactExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("li", { className: "flex items-center", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-neutral-500", children: "…" }) }),
+            !isLastLink && /* @__PURE__ */ jsxRuntime.jsx("li", { "aria-hidden": "true", className: "flex items-center", children: separator })
+          ] }, `truncated-${index}`);
+        }
+        let section = /* @__PURE__ */ jsxRuntime.jsx(
+          Span,
           {
-            href: link.href,
-            color,
             position: index + 1,
-            locale,
             "aria-current": ariaCurrent,
+            className: utils_cn.cn(
+              "transition-colors duration-200",
+              isActive && "text-neutral-900"
+            ),
             children: text
           },
           text
         );
-      } else if (isButton) {
-        section = /* @__PURE__ */ jsxRuntime.jsx(
-          ButtonLink,
+        if (isLink) {
+          section = /* @__PURE__ */ jsxRuntime.jsx(
+            LinkLink,
+            {
+              href: link.href,
+              color,
+              position: index + 1,
+              locale,
+              "aria-current": ariaCurrent,
+              className: utils_cn.cn(isActive && "text-neutral-900 cursor-default"),
+              children: text
+            },
+            text
+          );
+        } else if (isButton) {
+          section = /* @__PURE__ */ jsxRuntime.jsx(
+            ButtonLink,
+            {
+              onClick: link.onClick,
+              color,
+              position: index + 1,
+              "aria-current": ariaCurrent,
+              className: utils_cn.cn(isActive && "text-neutral-900 cursor-default"),
+              children: text
+            },
+            text
+          );
+        }
+        const listElement = /* @__PURE__ */ ReactExports.createElement(
+          "li",
           {
-            onClick: link.onClick,
-            color,
-            position: index + 1,
-            "aria-current": ariaCurrent,
-            children: text
+            ...includeStructuredData && {
+              itemProp: "itemListElement",
+              itemScope: true,
+              itemType: "https://schema.org/ListItem"
+            },
+            key: text,
+            className: "flex items-center"
           },
-          text
+          section
         );
-      }
-      const listElement = /* @__PURE__ */ jsxRuntime.jsx(
-        "li",
-        {
-          itemProp: "itemListElement",
-          itemScope: true,
-          itemType: "https://schema.org/ListItem",
-          children: section
-        },
-        text
-      );
-      if (isLastLink) {
-        return listElement;
-      }
-      return /* @__PURE__ */ jsxRuntime.jsxs(ReactExports.Fragment, { children: [
-        listElement,
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, { size: 10 })
-      ] }, text);
-    })
-  }
-) });
+        if (isLastLink) {
+          return listElement;
+        }
+        return /* @__PURE__ */ jsxRuntime.jsxs(ReactExports.Fragment, { children: [
+          listElement,
+          /* @__PURE__ */ jsxRuntime.jsx("li", { "aria-hidden": "true", className: "flex items-center", children: separator })
+        ] }, text);
+      })
+    }
+  ) });
+};
 exports.Breadcrumb = Breadcrumb;
 //# sourceMappingURL=index.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/Breadcrumb/index.tsx"],"sourcesContent":["'use client';\n\nimport type { Locales } from '@intlayer/config/client';\nimport { ChevronRightIcon } from 'lucide-react';\nimport { Fragment, type FC, type HTMLAttributes } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { cn } from '../../utils/cn';\nimport { Button, ButtonVariant, type ButtonProps } from '../Button';\nimport { Link, LinkColor, type LinkProps } from '../Link';\n\ntype LinkLinkProps = {\n  position: number;\n  locale?: Locales;\n} & Omit<LinkProps, 'label'>;\n\nconst LinkLink: FC<LinkLinkProps> = ({\n  href,\n  lang,\n  children,\n  onClick,\n  color,\n  position,\n  locale,\n  ...props\n}) => {\n  const { linkLabel } = useIntlayer('breadcrumb');\n\n  return (\n    <>\n      <Link\n        href={href}\n        locale={locale}\n        color={color}\n        onClick={onClick}\n        itemProp=\"item\"\n        isExternalLink={false}\n        itemScope\n        itemType=\"https://schema.org/WebPage\"\n        {...props}\n        label={`${linkLabel} ${children}`}\n        itemID={href}\n      >\n        <span itemProp=\"name\">{children}</span>\n      </Link>\n      <meta itemProp=\"position\" content={position.toString()} />\n    </>\n  );\n};\n\ntype ButtonButtonProps = {\n  children: string;\n  position: number;\n} & Omit<ButtonProps, 'children' | 'label'>;\n\nconst ButtonLink: FC<ButtonButtonProps> = ({\n  children: text,\n  onClick,\n  color,\n  position,\n  ...props\n}) => {\n  const { linkLabel } = useIntlayer('breadcrumb');\n\n  return (\n    <>\n      <Button\n        onClick={onClick}\n        variant={ButtonVariant.LINK}\n        label={`${linkLabel} ${text}`}\n        color={color}\n        itemProp=\"item\"\n        {...props}\n      >\n        <span itemProp=\"name\">{text}</span>\n      </Button>\n      <meta itemProp=\"position\" content={position.toString()} />\n    </>\n  );\n};\n\ntype SpanProps = {\n  children: string;\n  position: number;\n} & HTMLAttributes<HTMLSpanElement>;\n\nconst Span: FC<SpanProps> = ({ children, position, ...props }) => (\n  <span itemProp=\"item\">\n    <span itemProp=\"name\" {...props}>\n      {children}\n    </span>\n    <meta itemProp=\"position\" content={position.toString()} />\n  </span>\n);\n\ntype DetailedBreadcrumbLink = {\n  href?: string;\n  text: string;\n  onClick?: () => void;\n};\nexport type BreadcrumbLink = string | DetailedBreadcrumbLink;\n\nexport type BreadcrumbProps = {\n  links: BreadcrumbLink[];\n  color?: `${LinkColor}` | LinkColor;\n  locale?: Locales;\n  elementType?: 'page' | 'location';\n} & HTMLAttributes<HTMLOListElement>;\n\nexport const Breadcrumb: FC<BreadcrumbProps> = ({\n  links,\n  className,\n  color = LinkColor.TEXT,\n  locale,\n  elementType = 'page',\n  ...props\n}) => (\n  <nav aria-label=\"breadcrumb\">\n    <ol\n      className={cn(\n        'flex flex-row flex-wrap items-center gap-2 text-sm',\n        className\n      )}\n      itemScope\n      itemType=\"http://schema.org/BreadcrumbList\"\n      {...props}\n    >\n      {links.map((link, index) => {\n        const isLastLink = index === links.length - 1;\n        const isLink =\n          typeof link === 'object' && typeof link.href === 'string';\n        const isButton =\n          typeof link === 'object' && typeof link.onClick === 'function';\n        const isActive = index === links.length - 1;\n        const ariaCurrent = isActive ? elementType : undefined;\n\n        const text = (link as DetailedBreadcrumbLink).text ?? link;\n\n        let section = (\n          <Span key={text} position={index + 1} aria-current={ariaCurrent}>\n            {text}\n          </Span>\n        );\n\n        if (isLink) {\n          section = (\n            <LinkLink\n              key={text}\n              href={link.href!}\n              color={color}\n              position={index + 1}\n              locale={locale}\n              aria-current={ariaCurrent}\n            >\n              {text}\n            </LinkLink>\n          );\n        } else if (isButton) {\n          section = (\n            <ButtonLink\n              key={text}\n              onClick={link.onClick!}\n              color={color}\n              position={index + 1}\n              aria-current={ariaCurrent}\n            >\n              {text}\n            </ButtonLink>\n          );\n        }\n\n        const listElement = (\n          <li\n            itemProp=\"itemListElement\"\n            itemScope\n            itemType=\"https://schema.org/ListItem\"\n            key={text}\n          >\n            {section}\n          </li>\n        );\n\n        if (isLastLink) {\n          return listElement;\n        }\n\n        return (\n          <Fragment key={text}>\n            {listElement}\n            <ChevronRightIcon size={10} />\n          </Fragment>\n        );\n      })}\n    </ol>\n  </nav>\n);\n"],"names":["useIntlayer","jsxs","Fragment","jsx","Link","Button","ButtonVariant","LinkColor","cn","ChevronRightIcon"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/Breadcrumb/index.tsx"],"sourcesContent":["'use client';\n\nimport type { Locales, LocalesValues } from '@intlayer/config/client';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ChevronRightIcon } from 'lucide-react';\nimport { Fragment, type FC, type HTMLAttributes, type ReactNode } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { cn } from '../../utils/cn';\nimport { Button, ButtonVariant, type ButtonProps } from '../Button';\nimport { Link, LinkColor } from '../Link';\n\n/**\n * Props for LinkLink sub-component that renders breadcrumb items as links\n */\ntype LinkLinkProps = {\n  /**\n   * Position of the breadcrumb item in the list (1-based index)\n   */\n  position: number;\n  /**\n   * Locale for internationalization\n   */\n  locale?: Locales;\n  /**\n   * URL to navigate to\n   */\n  href?: string;\n  /**\n   * Link color\n   */\n  color?: LinkColor | `${LinkColor}`;\n  /**\n   * Click handler\n   */\n  onClick?: () => void;\n  /**\n   * Children content\n   */\n  children?: string;\n  /**\n   * Additional CSS classes\n   */\n  className?: string;\n} & Omit<\n  HTMLAttributes<HTMLAnchorElement>,\n  'href' | 'onClick' | 'color' | 'children' | 'className'\n>;\n\n/**\n * Breadcrumb variant styles using class-variance-authority\n */\nconst breadcrumbVariants = cva('flex flex-row flex-wrap items-center text-sm', {\n  variants: {\n    size: {\n      small: 'gap-1 text-xs',\n      medium: 'gap-2 text-sm',\n      large: 'gap-3 text-base',\n    },\n    spacing: {\n      compact: 'gap-1',\n      normal: 'gap-2',\n      loose: 'gap-4',\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\n    spacing: 'normal',\n  },\n});\n\n/**\n * LinkLink sub-component for breadcrumb items that navigate to other pages\n */\nconst LinkLink: FC<LinkLinkProps> = ({\n  href,\n  lang,\n  children,\n  onClick,\n  color,\n  position,\n  locale,\n  className,\n  ...props\n}) => {\n  const { linkLabel } = useIntlayer('breadcrumb');\n\n  return (\n    <>\n      <Link\n        href={href}\n        locale={locale}\n        color={color}\n        onClick={onClick}\n        itemProp=\"item\"\n        isExternalLink={false}\n        itemScope\n        itemType=\"https://schema.org/WebPage\"\n        {...props}\n        label={`${linkLabel} ${children}`}\n        itemID={href}\n      >\n        <span itemProp=\"name\">{children}</span>\n      </Link>\n      <meta itemProp=\"position\" content={position.toString()} />\n    </>\n  );\n};\n\n/**\n * Props for ButtonLink sub-component that renders breadcrumb items as interactive buttons\n */\ntype ButtonButtonProps = {\n  /**\n   * Text content for the breadcrumb button\n   */\n  children: string;\n  /**\n   * Position of the breadcrumb item in the list (1-based index)\n   */\n  position: number;\n} & Omit<ButtonProps, 'children' | 'label'>;\n\n/**\n * ButtonLink sub-component for breadcrumb items with click handlers\n */\nconst ButtonLink: FC<ButtonButtonProps> = ({\n  children: text,\n  onClick,\n  color,\n  position,\n  className,\n  ...props\n}) => {\n  const { linkLabel } = useIntlayer('breadcrumb');\n\n  return (\n    <>\n      <Button\n        onClick={onClick}\n        variant={ButtonVariant.LINK}\n        label={`${linkLabel} ${text}`}\n        color={color}\n        itemProp=\"item\"\n        {...props}\n      >\n        <span itemProp=\"name\">{text}</span>\n      </Button>\n      <meta itemProp=\"position\" content={position.toString()} />\n    </>\n  );\n};\n\n/**\n * Props for Span sub-component that renders static breadcrumb text\n */\ntype SpanProps = {\n  /**\n   * Text content for the static breadcrumb item\n   */\n  children: string;\n  /**\n   * Position of the breadcrumb item in the list (1-based index)\n   */\n  position: number;\n} & HTMLAttributes<HTMLSpanElement>;\n\n/**\n * Span sub-component for static breadcrumb text items\n */\nconst Span: FC<SpanProps> = ({ children, position, className, ...props }) => (\n  <span\n    itemProp=\"item\"\n    className={cn(\n      'inline-flex items-center',\n      'text-neutral-700 font-medium',\n      'transition-colors duration-200',\n      className\n    )}\n  >\n    <span itemProp=\"name\" {...props}>\n      {children}\n    </span>\n    <meta itemProp=\"position\" content={position.toString()} />\n  </span>\n);\n\n/**\n * Detailed breadcrumb link configuration with optional href or onClick\n */\ntype DetailedBreadcrumbLink = {\n  /**\n   * URL to navigate to when the breadcrumb item is clicked\n   */\n  href?: string;\n  /**\n   * Text content to display for this breadcrumb item\n   */\n  text: string;\n  /**\n   * Custom click handler function for interactive breadcrumb items\n   */\n  onClick?: () => void;\n};\n\n/**\n * Union type representing different breadcrumb item configurations:\n * - string: Simple text breadcrumb item\n * - DetailedBreadcrumbLink: Object with href, text, and/or onClick properties\n */\nexport type BreadcrumbLink = string | DetailedBreadcrumbLink;\n\nexport type BreadcrumbProps = {\n  /**\n   * Array of breadcrumb items\n   */\n  links: BreadcrumbLink[];\n  /**\n   * Color scheme for breadcrumb links\n   * @default LinkColor.TEXT\n   */\n  color?: LinkColor | `${LinkColor}`;\n  /**\n   * Locale for internationalization\n   */\n  locale?: LocalesValues;\n  /**\n   * Element type for ARIA current attribute\n   * @default 'page'\n   */\n  elementType?: 'page' | 'location';\n  /**\n   * Custom separator between breadcrumb items\n   * @default ChevronRightIcon\n   */\n  separator?: ReactNode;\n  /**\n   * ARIA label for breadcrumb navigation\n   * @default 'breadcrumb'\n   */\n  ariaLabel?: string;\n  /**\n   * Whether to include structured data markup\n   * @default true\n   */\n  includeStructuredData?: boolean;\n  /**\n   * Maximum number of breadcrumb items to show before truncation\n   */\n  maxItems?: number;\n} & VariantProps<typeof breadcrumbVariants> &\n  HTMLAttributes<HTMLOListElement>;\n\n/**\n * Breadcrumb component providing navigational context with accessibility features\n *\n * Features:\n * - Supports links, buttons, and static text elements\n * - Full keyboard navigation support\n * - ARIA attributes for screen readers\n * - Schema.org structured data for SEO\n * - Customizable separators and styling\n * - Internationalization support\n * - Responsive design variants\n *\n * @example\n * ```tsx\n * <Breadcrumb\n *   links={[\n *     'Home',\n *     { href: '/products', text: 'Products' },\n *     { onClick: handleCategory, text: 'Electronics' },\n *     'Smartphones'\n *   ]}\n *   size=\"medium\"\n *   ariaLabel=\"Product navigation\"\n * />\n * ```\n */\nexport const Breadcrumb: FC<BreadcrumbProps> = ({\n  links,\n  className,\n  color = LinkColor.TEXT,\n  locale,\n  elementType = 'page',\n  separator = <ChevronRightIcon size={10} />,\n  ariaLabel = 'breadcrumb',\n  includeStructuredData = true,\n  maxItems,\n  size,\n  spacing,\n  ...props\n}) => {\n  const displayLinks =\n    maxItems && links.length > maxItems\n      ? [...links.slice(0, 1), '...', ...links.slice(-(maxItems - 2))]\n      : links;\n\n  return (\n    <nav aria-label={ariaLabel} role=\"navigation\">\n      <ol\n        className={cn(breadcrumbVariants({ size, spacing }), className)}\n        {...(includeStructuredData && {\n          itemScope: true,\n          itemType: 'http://schema.org/BreadcrumbList',\n        })}\n        {...props}\n      >\n        {displayLinks.map((link, index) => {\n          const isLastLink = index === displayLinks.length - 1;\n          const isLink =\n            typeof link === 'object' && typeof link.href === 'string';\n          const isButton =\n            typeof link === 'object' && typeof link.onClick === 'function';\n          const isActive = index === displayLinks.length - 1;\n          const ariaCurrent = isActive ? elementType : undefined;\n          const isTruncated = link === '...';\n\n          const text = (link as DetailedBreadcrumbLink).text ?? link;\n\n          if (isTruncated) {\n            return (\n              <Fragment key={`truncated-${index}`}>\n                <li className=\"flex items-center\" aria-hidden=\"true\">\n                  <span className=\"text-neutral-500\">…</span>\n                </li>\n                {!isLastLink && (\n                  <li aria-hidden=\"true\" className=\"flex items-center\">\n                    {separator}\n                  </li>\n                )}\n              </Fragment>\n            );\n          }\n\n          let section = (\n            <Span\n              key={text}\n              position={index + 1}\n              aria-current={ariaCurrent}\n              className={cn(\n                'transition-colors duration-200',\n                isActive && 'text-neutral-900'\n              )}\n            >\n              {text}\n            </Span>\n          );\n\n          if (isLink) {\n            section = (\n              <LinkLink\n                key={text}\n                href={link.href!}\n                color={color}\n                position={index + 1}\n                locale={locale}\n                aria-current={ariaCurrent}\n                className={cn(isActive && 'text-neutral-900 cursor-default')}\n              >\n                {text}\n              </LinkLink>\n            );\n          } else if (isButton) {\n            section = (\n              <ButtonLink\n                key={text}\n                onClick={link.onClick!}\n                color={color}\n                position={index + 1}\n                aria-current={ariaCurrent}\n                className={cn(isActive && 'text-neutral-900 cursor-default')}\n              >\n                {text}\n              </ButtonLink>\n            );\n          }\n\n          const listElement = (\n            <li\n              {...(includeStructuredData && {\n                itemProp: 'itemListElement',\n                itemScope: true,\n                itemType: 'https://schema.org/ListItem',\n              })}\n              key={text}\n              className=\"flex items-center\"\n            >\n              {section}\n            </li>\n          );\n\n          if (isLastLink) {\n            return listElement;\n          }\n\n          return (\n            <Fragment key={text}>\n              {listElement}\n              <li aria-hidden=\"true\" className=\"flex items-center\">\n                {separator}\n              </li>\n            </Fragment>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n};\n"],"names":["cva","useIntlayer","jsxs","Fragment","jsx","Link","Button","ButtonVariant","cn","LinkColor","ChevronRightIcon","createElement"],"mappings":";;;;;;;;;;;AAmDA,MAAM,qBAAqBA,uBAAAA,IAAI,gDAAgD;AAAA,EAC7E,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,IAAA;AAAA,IAET,SAAS;AAAA,MACP,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,OAAO;AAAA,IAAA;AAAA,EACT;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAEb,CAAC;AAKD,MAAM,WAA8B,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,EAAE,UAAA,IAAcC,cAAAA,YAAY,YAAY;AAE9C,SACEC,2BAAAA,KAAAC,qBAAA,EACE,UAAA;AAAA,IAAAC,2BAAAA;AAAAA,MAACC,qBAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,WAAS;AAAA,QACT,UAAS;AAAA,QACR,GAAG;AAAA,QACJ,OAAO,GAAG,SAAS,IAAI,QAAQ;AAAA,QAC/B,QAAQ;AAAA,QAER,UAAAD,2BAAAA,IAAC,QAAA,EAAK,UAAS,QAAQ,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,mCAEjC,QAAA,EAAK,UAAS,YAAW,SAAS,SAAS,WAAS,CAAG;AAAA,EAAA,GAC1D;AAEJ;AAmBA,MAAM,aAAoC,CAAC;AAAA,EACzC,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,EAAE,UAAA,IAAcH,cAAAA,YAAY,YAAY;AAE9C,SACEC,2BAAAA,KAAAC,qBAAA,EACE,UAAA;AAAA,IAAAC,2BAAAA;AAAAA,MAACE,yBAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA,SAASC,yBAAAA,cAAc;AAAA,QACvB,OAAO,GAAG,SAAS,IAAI,IAAI;AAAA,QAC3B;AAAA,QACA,UAAS;AAAA,QACR,GAAG;AAAA,QAEJ,UAAAH,2BAAAA,IAAC,QAAA,EAAK,UAAS,QAAQ,UAAA,KAAA,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,mCAE7B,QAAA,EAAK,UAAS,YAAW,SAAS,SAAS,WAAS,CAAG;AAAA,EAAA,GAC1D;AAEJ;AAmBA,MAAM,OAAsB,CAAC,EAAE,UAAU,UAAU,WAAW,GAAG,YAC/DF,2BAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,UAAS;AAAA,IACT,WAAWM,SAAAA;AAAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAGF,UAAA;AAAA,MAAAJ,2BAAAA,IAAC,QAAA,EAAK,UAAS,QAAQ,GAAG,OACvB,UACH;AAAA,qCACC,QAAA,EAAK,UAAS,YAAW,SAAS,SAAS,WAAS,CAAG;AAAA,IAAA;AAAA,EAAA;AAC1D;AA+FK,MAAM,aAAkC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA,QAAQK,qBAAAA,UAAU;AAAA,EAClB;AAAA,EACA,cAAc;AAAA,EACd,YAAYL,2BAAAA,IAACM,YAAAA,kBAAA,EAAiB,MAAM,GAAA,CAAI;AAAA,EACxC,YAAY;AAAA,EACZ,wBAAwB;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,eACJ,YAAY,MAAM,SAAS,WACvB,CAAC,GAAG,MAAM,MAAM,GAAG,CAAC,GAAG,OAAO,GAAG,MAAM,MAAM,EAAE,WAAW,EAAE,CAAC,IAC7D;AAEN,SACEN,2BAAAA,IAAC,OAAA,EAAI,cAAY,WAAW,MAAK,cAC/B,UAAAA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWI,SAAAA,GAAG,mBAAmB,EAAE,MAAM,QAAA,CAAS,GAAG,SAAS;AAAA,MAC7D,GAAI,yBAAyB;AAAA,QAC5B,WAAW;AAAA,QACX,UAAU;AAAA,MAAA;AAAA,MAEX,GAAG;AAAA,MAEH,UAAA,aAAa,IAAI,CAAC,MAAM,UAAU;AACjC,cAAM,aAAa,UAAU,aAAa,SAAS;AACnD,cAAM,SACJ,OAAO,SAAS,YAAY,OAAO,KAAK,SAAS;AACnD,cAAM,WACJ,OAAO,SAAS,YAAY,OAAO,KAAK,YAAY;AACtD,cAAM,WAAW,UAAU,aAAa,SAAS;AACjD,cAAM,cAAc,WAAW,cAAc;AAC7C,cAAM,cAAc,SAAS;AAE7B,cAAM,OAAQ,KAAgC,QAAQ;AAEtD,YAAI,aAAa;AACf,iBACEN,2BAAAA,KAACC,uBAAA,EACC,UAAA;AAAA,YAAAC,2BAAAA,IAAC,MAAA,EAAG,WAAU,qBAAoB,eAAY,QAC5C,yCAAC,QAAA,EAAK,WAAU,oBAAmB,UAAA,IAAA,CAAC,GACtC;AAAA,YACC,CAAC,cACAA,+BAAC,MAAA,EAAG,eAAY,QAAO,WAAU,qBAC9B,UAAA,UAAA,CACH;AAAA,UAAA,EAAA,GAPW,aAAa,KAAK,EASjC;AAAA,QAEJ;AAEA,YAAI,UACFA,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YAEC,UAAU,QAAQ;AAAA,YAClB,gBAAc;AAAA,YACd,WAAWI,SAAAA;AAAAA,cACT;AAAA,cACA,YAAY;AAAA,YAAA;AAAA,YAGb,UAAA;AAAA,UAAA;AAAA,UARI;AAAA,QAAA;AAYT,YAAI,QAAQ;AACV,oBACEJ,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cAEC,MAAM,KAAK;AAAA,cACX;AAAA,cACA,UAAU,QAAQ;AAAA,cAClB;AAAA,cACA,gBAAc;AAAA,cACd,WAAWI,SAAAA,GAAG,YAAY,iCAAiC;AAAA,cAE1D,UAAA;AAAA,YAAA;AAAA,YARI;AAAA,UAAA;AAAA,QAWX,WAAW,UAAU;AACnB,oBACEJ,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cAEC,SAAS,KAAK;AAAA,cACd;AAAA,cACA,UAAU,QAAQ;AAAA,cAClB,gBAAc;AAAA,cACd,WAAWI,SAAAA,GAAG,YAAY,iCAAiC;AAAA,cAE1D,UAAA;AAAA,YAAA;AAAA,YAPI;AAAA,UAAA;AAAA,QAUX;AAEA,cAAM,cACJG,6BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACE,GAAI,yBAAyB;AAAA,cAC5B,UAAU;AAAA,cACV,WAAW;AAAA,cACX,UAAU;AAAA,YAAA;AAAA,YAEZ,KAAK;AAAA,YACL,WAAU;AAAA,UAAA;AAAA,UAET;AAAA,QAAA;AAIL,YAAI,YAAY;AACd,iBAAO;AAAA,QACT;AAEA,eACET,2BAAAA,KAACC,uBAAA,EACE,UAAA;AAAA,UAAA;AAAA,yCACA,MAAA,EAAG,eAAY,QAAO,WAAU,qBAC9B,UAAA,UAAA,CACH;AAAA,QAAA,EAAA,GAJa,IAKf;AAAA,MAEJ,CAAC;AAAA,IAAA;AAAA,EAAA,GAEL;AAEJ;;"}