npm - @intlayer/design-system - Versions diffs - 8.7.3 → 8.7.4 - Mend

@intlayer/design-system 8.7.3 → 8.7.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (107) hide show

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

@@ -68,8 +68,8 @@ const Accordion = ({ children, header, isOpen, defaultIsOpen = false, onToggle,
 	return /* @__PURE__ */ jsxs("div", {
 		className: "w-full",
 		children: [/* @__PURE__ */ jsx(Button, {
-			variant: ButtonVariant.HOVERABLE,
-			color: ButtonColor.TEXT,
+			variant: "hoverable",
+			color: "text",
 			onClick: handleToggle,
 			onKeyDown: handleKeyDown,
 			disabled,

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

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

package/dist/esm/components/Avatar/image.mjs CHANGED Viewed

@@ -1,14 +1,4 @@
 //#region src/components/Avatar/image.ts
-var ImageProvider = /* @__PURE__ */ function(ImageProvider) {
-	ImageProvider["Picsum"] = "picsum";
-	ImageProvider["Dummy"] = "dummy";
-	return ImageProvider;
-}(ImageProvider || {});
-var ImageType = /* @__PURE__ */ function(ImageType) {
-	ImageType["Avatar"] = "avatar";
-	ImageType["Random"] = "random";
-	return ImageType;
-}(ImageType || {});
 /**
 * Generates a random image URL based on the specified provider and type.
 *
@@ -24,9 +14,9 @@ var ImageType = /* @__PURE__ */ function(ImageType) {
 */
 function getRandomImageUrl(provider, type) {
 	switch (provider) {
-		case ImageProvider.Picsum: if (type === ImageType.Avatar) return `https://picsum.photos/200/200?random=${Math.floor(Math.random() * 1e3)}`;
+		case "picsum": if (type === "avatar") return `https://picsum.photos/200/200?random=${Math.floor(Math.random() * 1e3)}`;
 		else return `https://picsum.photos/800/600?random=${Math.floor(Math.random() * 1e3)}`;
-		case ImageProvider.Dummy: if (type === ImageType.Avatar) return `https://dummyimage.com/200x200/000/fff&text=Avatar`;
+		case "dummy": if (type === "avatar") return `https://dummyimage.com/200x200/000/fff&text=Avatar`;
 		else return `https://dummyimage.com/800x600/000/fff&text=Random`;
 		default: throw new Error(`Provider not supported: ${provider}`);
 	}
@@ -43,8 +33,8 @@ function getRandomImageUrl(provider, type) {
 * getAvatarImageUrl(ImageProvider.Dummy) // 'https://dummyimage.com/200x200/000/fff&text=Avatar'
 * ```
 */
-function getAvatarImageUrl(provider = ImageProvider.Picsum) {
-	return getRandomImageUrl(provider, ImageType.Avatar);
+function getAvatarImageUrl(provider = "picsum") {
+	return getRandomImageUrl(provider, "avatar");
 }
 //#endregion

package/dist/esm/components/Avatar/image.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"image.mjs","names":[],"sources":["../../../../src/components/Avatar/image.ts"],"sourcesContent":["enum ImageProvider {\n Picsum = 'picsum',\n Dummy = 'dummy',\n}\n\nenum ImageType {\n Avatar = 'avatar',\n Random = 'random',\n}\n\n/*\n Generates a random image URL based on the specified provider and type.\n \n @param provider - The image provider to use (e.g., Unsplash, Picsum, Dummy)\n * @param type - The type of image to generate (Avatar or Random)\n * @returns A URL string pointing to a random image\n \n @example\n * ```ts\n * getRandomImageUrl(ImageProvider.Picsum, ImageType.Random) // 'https://picsum.photos/800/600?random=123'\n * getRandomImageUrl(ImageProvider.Dummy, ImageType.Avatar) // 'https://dummyimage.com/200x200/000/fff&text=Avatar'\n * ```\n /\nexport function getRandomImageUrl(\n provider: ImageProvider,\n type: ImageType\n): string {\n switch (provider) {\n case ImageProvider.Picsum:\n if (type === ImageType.Avatar) {\n return `https://picsum.photos/200/200?random=${Math.floor(Math.random() 1000)}`;\n } else {\n return `https://picsum.photos/800/600?random=${Math.floor(Math.random() * 1000)}`;\n }\n\n case ImageProvider.Dummy:\n if (type === ImageType.Avatar) {\n return `https://dummyimage.com/200x200/000/fff&text=Avatar`;\n } else {\n return `https://dummyimage.com/800x600/000/fff&text=Random`;\n }\n\n default:\n throw new Error(`Provider not supported: ${provider}`);\n }\n}\n\n/*\n Generates a random image URL for avatar images based on the specified provider.\n \n @param provider - The image provider to use (e.g., Unsplash, Picsum, Dummy)\n * @returns A URL string pointing to a random avatar image\n \n @example\n * ```ts\n * getAvatarImageUrl(ImageProvider.Picsum) // 'https://picsum.photos/200/200?random=123'\n * getAvatarImageUrl(ImageProvider.Dummy) // 'https://dummyimage.com/200x200/000/fff&text=Avatar'\n * ```\n */\nexport function getAvatarImageUrl(\n provider: ImageProvider = ImageProvider.Picsum\n): string {\n return getRandomImageUrl(provider, ImageType.Avatar);\n}\n"],"mappings":"~~;AAAA,IAAK,gBAAL;AACE;AACA;;EAFG,oBAGJ;AAED,IAAK,YAAL;AACE;AACA;;EAFG,gBAGJ~~;;;;;;;;;;;;;;~~AAeD~~,SAAgB,kBACd,UACA,MACQ;AACR,SAAQ,UAAR;EACE,~~KAAK~~,~~cAAc,OACjB,~~KAAI,~~SAAS~~,~~UAAU,OACrB,~~QAAO,wCAAwC,KAAK,MAAM,KAAK,QAAQ,GAAG,IAAK;MAE/E,QAAO,wCAAwC,KAAK,MAAM,KAAK,QAAQ,GAAG,IAAK;EAGnF,~~KAAK~~,~~cAAc,MACjB,~~KAAI,~~SAAS~~,~~UAAU,OACrB,~~QAAO;MAEP,QAAO;EAGX,QACE,OAAM,IAAI,MAAM,2BAA2B,WAAW;;;;;;;;;;;;;;;AAgB5D,SAAgB,kBACd,~~WAA0B,cAAc,QAChC~~;AACR,QAAO,kBAAkB,~~UAAU,UAAU,OAAO~~"}
1	+ {"version":3,"file":"image.mjs","names":[],"sources":["../../../../src/components/Avatar/image.ts"],"sourcesContent":["enum ImageProvider {\n Picsum = 'picsum',\n Dummy = 'dummy',\n}\n\nenum ImageType {\n Avatar = 'avatar',\n Random = 'random',\n}\n\n/*\n Generates a random image URL based on the specified provider and type.\n \n @param provider - The image provider to use (e.g., Unsplash, Picsum, Dummy)\n * @param type - The type of image to generate (Avatar or Random)\n * @returns A URL string pointing to a random image\n \n @example\n * ```ts\n * getRandomImageUrl(ImageProvider.Picsum, ImageType.Random) // 'https://picsum.photos/800/600?random=123'\n * getRandomImageUrl(ImageProvider.Dummy, ImageType.Avatar) // 'https://dummyimage.com/200x200/000/fff&text=Avatar'\n * ```\n /\nexport function getRandomImageUrl(\n provider: ImageProvider,\n type: ImageType\n): string {\n switch (provider) {\n case ImageProvider.Picsum:\n if (type === ImageType.Avatar) {\n return `https://picsum.photos/200/200?random=${Math.floor(Math.random() 1000)}`;\n } else {\n return `https://picsum.photos/800/600?random=${Math.floor(Math.random() * 1000)}`;\n }\n\n case ImageProvider.Dummy:\n if (type === ImageType.Avatar) {\n return `https://dummyimage.com/200x200/000/fff&text=Avatar`;\n } else {\n return `https://dummyimage.com/800x600/000/fff&text=Random`;\n }\n\n default:\n throw new Error(`Provider not supported: ${provider}`);\n }\n}\n\n/*\n Generates a random image URL for avatar images based on the specified provider.\n \n @param provider - The image provider to use (e.g., Unsplash, Picsum, Dummy)\n * @returns A URL string pointing to a random avatar image\n \n @example\n * ```ts\n * getAvatarImageUrl(ImageProvider.Picsum) // 'https://picsum.photos/200/200?random=123'\n * getAvatarImageUrl(ImageProvider.Dummy) // 'https://dummyimage.com/200x200/000/fff&text=Avatar'\n * ```\n */\nexport function getAvatarImageUrl(\n provider: ImageProvider = ImageProvider.Picsum\n): string {\n return getRandomImageUrl(provider, ImageType.Avatar);\n}\n"],"mappings":";;;;;;;;;;;;;;AAuBA,SAAgB,kBACd,UACA,MACQ;AACR,SAAQ,UAAR;EACE,cACE,KAAI,kBACF,QAAO,wCAAwC,KAAK,MAAM,KAAK,QAAQ,GAAG,IAAK;MAE/E,QAAO,wCAAwC,KAAK,MAAM,KAAK,QAAQ,GAAG,IAAK;EAGnF,aACE,KAAI,kBACF,QAAO;MAEP,QAAO;EAGX,QACE,OAAM,IAAI,MAAM,2BAA2B,WAAW;;;;;;;;;;;;;;;AAgB5D,SAAgB,kBACd,qBACQ;AACR,QAAO,kBAAkB,mBAA2B"}

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

@@ -48,33 +48,33 @@ let BadgeSize = /* @__PURE__ */ function(BadgeSize) {
 const badgeVariants = cva("inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold text-xs transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2", {
 	variants: {
 		color: {
-			[`${BadgeColor.PRIMARY}`]: "border-primary bg-primary text-primary hover:bg-primary-500",
-			[`${BadgeColor.SECONDARY}`]: "border-secondary bg-secondary text-secondary hover:bg-secondary-300",
-			[`${BadgeColor.DESTRUCTIVE}`]: "border-destructive bg-destructive text-destructive hover:bg-destructive-500",
-			[`${BadgeColor.SUCCESS}`]: "border-success bg-success text-success hover:bg-success-500",
-			[`${BadgeColor.ERROR}`]: "border-error bg-error text-error hover:bg-error-500",
-			[`${BadgeColor.NEUTRAL}`]: "border-neutral bg-neutral text-neutral hover:bg-neutral-600",
-			[`${BadgeColor.LIGHT}`]: "border-white bg-white text-white hover:bg-neutral-500",
-			[`${BadgeColor.DARK}`]: "border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900",
-			[`${BadgeColor.TEXT}`]: "border-text bg-text text-text hover:opacity-80",
-			[`${BadgeColor.CUSTOM}`]: ""
+			[`primary`]: "border-primary bg-primary text-primary hover:bg-primary-500",
+			[`secondary`]: "border-secondary bg-secondary text-secondary hover:bg-secondary-300",
+			[`destructive`]: "border-destructive bg-destructive text-destructive hover:bg-destructive-500",
+			[`success`]: "border-success bg-success text-success hover:bg-success-500",
+			[`error`]: "border-error bg-error text-error hover:bg-error-500",
+			[`neutral`]: "border-neutral bg-neutral text-neutral hover:bg-neutral-600",
+			[`light`]: "border-white bg-white text-white hover:bg-neutral-500",
+			[`dark`]: "border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900",
+			[`text`]: "border-text bg-text text-text hover:opacity-80",
+			[`custom`]: ""
 		},
 		variant: {
-			[`${BadgeVariant.DEFAULT}`]: "rounded-lg text-text-opposite",
-			[`${BadgeVariant.NONE}`]: "border-none bg-opacity-0 text-inherit hover:bg-opacity-0",
-			[`${BadgeVariant.OUTLINE}`]: "rounded-lg border-[1.3px] bg-opacity-0 hover:bg-opacity-30",
-			[`${BadgeVariant.HOVERABLE}`]: "rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10"
+			[`default`]: "rounded-lg text-text-opposite",
+			[`none`]: "border-none bg-opacity-0 text-inherit hover:bg-opacity-0",
+			[`outline`]: "rounded-lg border-[1.3px] bg-opacity-0 hover:bg-opacity-30",
+			[`hoverable`]: "rounded-lg border-none bg-opacity-0 transition hover:bg-opacity-10"
 		},
 		size: {
-			[`${BadgeSize.SMALL}`]: "px-2 py-0.5 text-xs",
-			[`${BadgeSize.MEDIUM}`]: "px-2.5 py-0.5 text-xs",
-			[`${BadgeSize.LARGE}`]: "px-3 py-1 text-sm"
+			[`sm`]: "px-2 py-0.5 text-xs",
+			[`md`]: "px-2.5 py-0.5 text-xs",
+			[`lg`]: "px-3 py-1 text-sm"
 		}
 	},
 	defaultVariants: {
-		variant: BadgeVariant.DEFAULT,
-		color: BadgeColor.PRIMARY,
-		size: BadgeSize.MEDIUM
+		variant: "default",
+		color: "primary",
+		size: "md"
 	}
 });
 /**
@@ -102,7 +102,7 @@ const badgeVariants = cva("inline-flex items-center rounded-md border px-2.5 py-
 * </Badge>
 * ```
 */
-const Badge = ({ className, variant = BadgeVariant.DEFAULT, color = BadgeColor.PRIMARY, size = BadgeSize.MEDIUM, children, clickable = false, dismissible = false, onClick, onDismiss, role, tabIndex, "aria-label": ariaLabel, ...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 === " ")) {

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

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

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

@@ -17,17 +17,17 @@ import { useIntlayer } from "react-intlayer";
 const getColorClass = (color) => {
 	if (!color) return "";
 	return {
-		[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]: ""
+		["primary"]: "text-primary",
+		["secondary"]: "text-secondary",
+		["destructive"]: "text-destructive",
+		["neutral"]: "text-neutral",
+		["light"]: "text-white",
+		["dark"]: "text-neutral-800",
+		["text"]: "text-text",
+		["text-inverse"]: "text-text-opposite",
+		["error"]: "text-error",
+		["success"]: "text-success",
+		["custom"]: ""
 	}[color] || "";
 };
 /**
@@ -85,7 +85,7 @@ const ButtonLink = ({ children: text, onClick, color, position, className, ...pr
 	const { linkLabel } = useIntlayer("breadcrumb");
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
 		onClick,
-		variant: ButtonVariant.LINK,
+		variant: "link",
 		label: `${linkLabel} ${text}`,
 		color,
 		itemProp: "item",
@@ -140,7 +140,7 @@ const Span = ({ children, position, className, ...props }) => /* @__PURE__ */ js
 * />
 * ```
 */
-const Breadcrumb = ({ links, className, color = LinkColor.TEXT, locale, elementType = "page", separator = /* @__PURE__ */ jsx(ChevronRightIcon, { size: 10 }), ariaLabel = "breadcrumb", includeStructuredData = true, maxItems, size, spacing, ...props }) => {
+const Breadcrumb = ({ links, className, color = "text", locale, elementType = "page", separator = /* @__PURE__ */ jsx(ChevronRightIcon, { size: 10 }), ariaLabel = "breadcrumb", includeStructuredData = true, maxItems, size, spacing, ...props }) => {
 	const displayLinks = maxItems && links.length > maxItems ? [
 		...links.slice(0, 1),
 		"...",

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

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

package/dist/esm/components/Browser/Browser.content.mjs CHANGED Viewed

@@ -125,26 +125,6 @@ const browserContent = {
 			vi: "Tiến tới",
 			uk: "Вперед"
 		}),
-		reloadButtonTitle: t({
-			en: "Reload page",
-			"en-GB": "Reload page",
-			fr: "Recharger la page",
-			es: "Recargar página",
-			de: "Seite neu laden",
-			ja: "ページを再読み込み",
-			ko: "페이지 새로고침",
-			zh: "重新加载页面",
-			it: "Ricarica pagina",
-			pt: "Recarregar página",
-			hi: "पृष्ठ को फिर से लोड करें",
-			ar: "إعادة تحميل الصفحة",
-			ru: "Перезагрузить страницу",
-			tr: "Sayfayı yenile",
-			pl: "Przeładuj stronę",
-			id: "Muat ulang halaman",
-			vi: "Tải lại trang",
-			uk: "Оновити сторінку"
-		}),
 		iframeTitle: t({
 			en: "Embedded web page",
 			"en-GB": "Embedded web page",

package/dist/esm/components/Browser/Browser.content.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Browser.content.mjs","names":[],"sources":["../../../../src/components/Browser/Browser.content.ts"],"sourcesContent":["import { type Dictionary, t } from 'intlayer';\n\nexport const browserContent = {\n key: 'browser',\n content: {\n ariaLabel: t({\n en: 'Embedded browser',\n 'en-GB': 'Embedded browser',\n fr: 'Navigateur intégré',\n es: 'Navegador integrado',\n de: 'Eingebetteter Browser',\n ja: '埋め込みブラウザ',\n ko: '임베디드 브라우저',\n zh: '嵌入式浏览器',\n it: 'Browser incorporato',\n pt: 'Navegador incorporado',\n hi: 'एम्बेडेड ब्राउज़र',\n ar: 'متصفح مدمج',\n ru: 'Встроенный браузер',\n tr: 'Gömülü tarayıcı',\n pl: 'Osadzona przeglądarka',\n id: 'Peramban tertanam',\n vi: 'Trình duyệt nhúng',\n uk: 'Вбудований браузер',\n }),\n urlLabel: t({\n en: 'URL address bar',\n 'en-GB': 'URL address bar',\n fr: \"Barre d'adresse URL\",\n es: 'Barra de direcciones URL',\n de: 'URL-Adressleiste',\n ja: 'URLアドレスバー',\n ko: 'URL 주소 표시줄',\n zh: 'URL地址栏',\n it: 'Barra degli indirizzi URL',\n pt: 'Barra de endereços URL',\n hi: 'URL पता बार',\n ar: 'شريط عنوان URL',\n ru: 'Адресная строка URL',\n tr: 'URL adres çubuğu',\n pl: 'Pasek adresu URL',\n id: 'Bilah alamat URL',\n vi: 'Thanh địa chỉ URL',\n uk: 'Рядок адреси URL',\n }),\n urlPlaceholder: 'https://example.com',\n errorMessage: t({\n en: 'Invalid URL. Try a path like \"/page\" or a full URL.',\n 'en-GB': 'Invalid URL. Try a path like \"/page\" or a full URL.',\n fr: 'URL invalide. Essayez un chemin comme \"/page\" ou une URL complète.',\n es: 'URL no válida. Intente una ruta como \"/page\" o una URL completa.',\n de: 'Ungültige URL. Versuchen Sie einen Pfad wie \"/page\" oder eine vollständige URL.',\n ja: '無効なURL。\"/page\"のようなパスまたは完全なURLを試してください。',\n ko: '잘못된 URL입니다. \"/page\"와 같은 경로 또는 전체 URL을 시도하십시오.',\n zh: '无效的URL。尝试像\"/page\"这样的路径或完整的URL。',\n it: 'URL non valido. Prova un percorso come \"/page\" o un URL completo.',\n pt: 'URL inválido. Tente um caminho como \"/page\" ou uma URL completa.',\n hi: 'अमान्य URL। \"/page\" जैसा पथ या पूर्ण URL प्रयास करें।',\n ar: 'رابط غير صالح. جرب مسارًا مثل \"/page\" أو رابطًا كاملاً.',\n ru: 'Неверный URL. Попробуйте путь вроде \"/page\" или полный URL.',\n tr: 'Geçersiz URL. \"/page\" gibi bir yol veya tam URL deneyin.',\n pl: 'Nieprawidłowy adres URL. Wypróbuj ścieżkę jak \"/page\" lub pełny URL.',\n id: 'URL tidak valid. Coba jalur seperti \"/page\" atau URL lengkap.',\n vi: 'URL không hợp lệ. Thử đường dẫn như \"/page\" hoặc URL đầy đủ.',\n uk: 'Недійсний URL. Спробуйте шлях на кшталт \"/page\" або повну URL-адресу.',\n }),\n domainRestrictionError: t({\n en: 'URL must match the application domain.',\n 'en-GB': 'URL must match the application domain.',\n fr: \"L'URL doit correspondre au domaine de l'application.\",\n es: 'La URL debe coincidir con el dominio de la aplicación.',\n de: 'Die URL muss mit der Anwendungsdomäne übereinstimmen.',\n ja: 'URLはアプリケーションドメインと一致する必要があります。',\n ko: 'URL은 애플리케이션 도메인과 일치해야 합니다.',\n zh: 'URL必须与应用程序域名匹配。',\n it: \"L'URL deve corrispondere al dominio dell'applicazione.\",\n pt: 'A URL deve corresponder ao domínio da aplicação.',\n hi: 'URL एप्लिकेशन डोमेन से मेल खाना चाहिए।',\n ar: 'يجب أن يتطابق الرابط مع نطاق التطبيق.',\n ru: 'URL должен соответствовать домену приложения.',\n tr: 'URL, uygulama etki alanıyla eşleşmelidir.',\n pl: 'Adres URL musi pasować do domeny aplikacji.',\n id: 'URL harus cocok dengan domain aplikasi.',\n vi: 'URL phải khớp với tên miền ứng dụng.',\n uk: 'URL має відповідати домену застосунку.',\n }),\n backButtonLabel: t({\n en: 'Go back',\n 'en-GB': 'Go back',\n fr: 'Retour',\n es: 'Atrás',\n de: 'Zurück',\n ja: '戻る',\n ko: '뒤로 가기',\n zh: '后退',\n it: 'Indietro',\n pt: 'Voltar',\n hi: 'वापस जाएं',\n ar: 'رجوع',\n ru: 'Назад',\n tr: 'Geri',\n pl: 'Wstecz',\n id: 'Kembali',\n vi: 'Quay lại',\n uk: 'Назад',\n }),\n forwardButtonLabel: t({\n en: 'Go forward',\n 'en-GB': 'Go forward',\n fr: 'Avancer',\n es: 'Adelante',\n de: 'Vorwärts',\n ja: '進む',\n ko: '앞으로 가기',\n zh: '前进',\n it: 'Avanti',\n pt: 'Avançar',\n hi: 'आगे जाएं',\n ar: 'إلى الأمام',\n ru: 'Вперёд',\n tr: 'İleri',\n pl: 'Naprzód',\n id: 'Maju',\n vi: 'Tiến tới',\n uk: 'Вперед',\n }),\n reloadButtonTitle: t({\n en: 'Reload page',\n 'en-GB': 'Reload page',\n fr: 'Recharger la page',\n es: 'Recargar página',\n de: 'Seite neu laden',\n ja: 'ページを再読み込み',\n ko: '페이지 새로고침',\n zh: '重新加载页面',\n it: 'Ricarica pagina',\n pt: 'Recarregar página',\n hi: 'पृष्ठ को फिर से लोड करें',\n ar: 'إعادة تحميل الصفحة',\n ru: 'Перезагрузить страницу',\n tr: 'Sayfayı yenile',\n pl: 'Przeładuj stronę',\n id: 'Muat ulang halaman',\n vi: 'Tải lại trang',\n uk: 'Оновити сторінку',\n }),\n iframeTitle: t({\n en: 'Embedded web page',\n 'en-GB': 'Embedded web page',\n fr: 'Page web intégrée',\n es: 'Página web integrada',\n de: 'Eingebettete Webseite',\n ja: '埋め込みウェブページ',\n ko: '임베디드 웹페이지',\n zh: '嵌入式网页',\n it: 'Pagina web incorporata',\n pt: 'Página web incorporada',\n hi: 'एम्बेडेड वेब पेज',\n ar: 'صفحة ويب مدمجة',\n ru: 'Встроенная веб-страница',\n tr: 'Gömülü web sayfası',\n pl: 'Osadzona strona internetowa',\n id: 'Halaman web tertanam',\n vi: 'Trang web được nhúng',\n uk: 'Вбудована веб-сторінка',\n }),\n },\n title: 'Embedded browser component',\n description:\n 'Content declaration for the embedded browser UI component, including ARIA labels, URL placeholder, and error messages for displaying web pages within an iframe.',\n tags: ['UI component', 'embedded browser', 'iframe'],\n} satisfies Dictionary;\n\nexport default browserContent;\n"],"mappings":";;;AAEA,MAAa,iBAAiB;CAC5B,KAAK;CACL,SAAS;EACP,WAAW,EAAE;GACX,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACF,UAAU,EAAE;GACV,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACF,gBAAgB;EAChB,cAAc,EAAE;GACd,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACF,wBAAwB,EAAE;GACxB,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACF,iBAAiB,EAAE;GACjB,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACF,oBAAoB,EAAE;GACpB,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACF,mBAAmB,EAAE;GACnB,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACF,aAAa,EAAE;GACb,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACH;CACD,OAAO;CACP,aACE;CACF,MAAM;EAAC;EAAgB;EAAoB;EAAS;CACrD"}
1	+ {"version":3,"file":"Browser.content.mjs","names":[],"sources":["../../../../src/components/Browser/Browser.content.ts"],"sourcesContent":["import { type Dictionary, t } from 'intlayer';\n\nexport const browserContent = {\n key: 'browser',\n content: {\n ariaLabel: t({\n en: 'Embedded browser',\n 'en-GB': 'Embedded browser',\n fr: 'Navigateur intégré',\n es: 'Navegador integrado',\n de: 'Eingebetteter Browser',\n ja: '埋め込みブラウザ',\n ko: '임베디드 브라우저',\n zh: '嵌入式浏览器',\n it: 'Browser incorporato',\n pt: 'Navegador incorporado',\n hi: 'एम्बेडेड ब्राउज़र',\n ar: 'متصفح مدمج',\n ru: 'Встроенный браузер',\n tr: 'Gömülü tarayıcı',\n pl: 'Osadzona przeglądarka',\n id: 'Peramban tertanam',\n vi: 'Trình duyệt nhúng',\n uk: 'Вбудований браузер',\n }),\n urlLabel: t({\n en: 'URL address bar',\n 'en-GB': 'URL address bar',\n fr: \"Barre d'adresse URL\",\n es: 'Barra de direcciones URL',\n de: 'URL-Adressleiste',\n ja: 'URLアドレスバー',\n ko: 'URL 주소 표시줄',\n zh: 'URL地址栏',\n it: 'Barra degli indirizzi URL',\n pt: 'Barra de endereços URL',\n hi: 'URL पता बार',\n ar: 'شريط عنوان URL',\n ru: 'Адресная строка URL',\n tr: 'URL adres çubuğu',\n pl: 'Pasek adresu URL',\n id: 'Bilah alamat URL',\n vi: 'Thanh địa chỉ URL',\n uk: 'Рядок адреси URL',\n }),\n urlPlaceholder: 'https://example.com',\n errorMessage: t({\n en: 'Invalid URL. Try a path like \"/page\" or a full URL.',\n 'en-GB': 'Invalid URL. Try a path like \"/page\" or a full URL.',\n fr: 'URL invalide. Essayez un chemin comme \"/page\" ou une URL complète.',\n es: 'URL no válida. Intente una ruta como \"/page\" o una URL completa.',\n de: 'Ungültige URL. Versuchen Sie einen Pfad wie \"/page\" oder eine vollständige URL.',\n ja: '無効なURL。\"/page\"のようなパスまたは完全なURLを試してください。',\n ko: '잘못된 URL입니다. \"/page\"와 같은 경로 또는 전체 URL을 시도하십시오.',\n zh: '无效的URL。尝试像\"/page\"这样的路径或完整的URL。',\n it: 'URL non valido. Prova un percorso come \"/page\" o un URL completo.',\n pt: 'URL inválido. Tente um caminho como \"/page\" ou uma URL completa.',\n hi: 'अमान्य URL। \"/page\" जैसा पथ या पूर्ण URL प्रयास करें।',\n ar: 'رابط غير صالح. جرب مسارًا مثل \"/page\" أو رابطًا كاملاً.',\n ru: 'Неверный URL. Попробуйте путь вроде \"/page\" или полный URL.',\n tr: 'Geçersiz URL. \"/page\" gibi bir yol veya tam URL deneyin.',\n pl: 'Nieprawidłowy adres URL. Wypróbuj ścieżkę jak \"/page\" lub pełny URL.',\n id: 'URL tidak valid. Coba jalur seperti \"/page\" atau URL lengkap.',\n vi: 'URL không hợp lệ. Thử đường dẫn như \"/page\" hoặc URL đầy đủ.',\n uk: 'Недійсний URL. Спробуйте шлях на кшталт \"/page\" або повну URL-адресу.',\n }),\n domainRestrictionError: t({\n en: 'URL must match the application domain.',\n 'en-GB': 'URL must match the application domain.',\n fr: \"L'URL doit correspondre au domaine de l'application.\",\n es: 'La URL debe coincidir con el dominio de la aplicación.',\n de: 'Die URL muss mit der Anwendungsdomäne übereinstimmen.',\n ja: 'URLはアプリケーションドメインと一致する必要があります。',\n ko: 'URL은 애플리케이션 도메인과 일치해야 합니다.',\n zh: 'URL必须与应用程序域名匹配。',\n it: \"L'URL deve corrispondere al dominio dell'applicazione.\",\n pt: 'A URL deve corresponder ao domínio da aplicação.',\n hi: 'URL एप्लिकेशन डोमेन से मेल खाना चाहिए।',\n ar: 'يجب أن يتطابق الرابط مع نطاق التطبيق.',\n ru: 'URL должен соответствовать домену приложения.',\n tr: 'URL, uygulama etki alanıyla eşleşmelidir.',\n pl: 'Adres URL musi pasować do domeny aplikacji.',\n id: 'URL harus cocok dengan domain aplikasi.',\n vi: 'URL phải khớp với tên miền ứng dụng.',\n uk: 'URL має відповідати домену застосунку.',\n }),\n backButtonLabel: t({\n en: 'Go back',\n 'en-GB': 'Go back',\n fr: 'Retour',\n es: 'Atrás',\n de: 'Zurück',\n ja: '戻る',\n ko: '뒤로 가기',\n zh: '后退',\n it: 'Indietro',\n pt: 'Voltar',\n hi: 'वापस जाएं',\n ar: 'رجوع',\n ru: 'Назад',\n tr: 'Geri',\n pl: 'Wstecz',\n id: 'Kembali',\n vi: 'Quay lại',\n uk: 'Назад',\n }),\n forwardButtonLabel: t({\n en: 'Go forward',\n 'en-GB': 'Go forward',\n fr: 'Avancer',\n es: 'Adelante',\n de: 'Vorwärts',\n ja: '進む',\n ko: '앞으로 가기',\n zh: '前进',\n it: 'Avanti',\n pt: 'Avançar',\n hi: 'आगे जाएं',\n ar: 'إلى الأمام',\n ru: 'Вперёд',\n tr: 'İleri',\n pl: 'Naprzód',\n id: 'Maju',\n vi: 'Tiến tới',\n uk: 'Вперед',\n }),\n iframeTitle: t({\n en: 'Embedded web page',\n 'en-GB': 'Embedded web page',\n fr: 'Page web intégrée',\n es: 'Página web integrada',\n de: 'Eingebettete Webseite',\n ja: '埋め込みウェブページ',\n ko: '임베디드 웹페이지',\n zh: '嵌入式网页',\n it: 'Pagina web incorporata',\n pt: 'Página web incorporada',\n hi: 'एम्बेडेड वेब पेज',\n ar: 'صفحة ويب مدمجة',\n ru: 'Встроенная веб-страница',\n tr: 'Gömülü web sayfası',\n pl: 'Osadzona strona internetowa',\n id: 'Halaman web tertanam',\n vi: 'Trang web được nhúng',\n uk: 'Вбудована веб-сторінка',\n }),\n },\n title: 'Embedded browser component',\n description:\n 'Content declaration for the embedded browser UI component, including ARIA labels, URL placeholder, and error messages for displaying web pages within an iframe.',\n tags: ['UI component', 'embedded browser', 'iframe'],\n} satisfies Dictionary;\n\nexport default browserContent;\n"],"mappings":";;;AAEA,MAAa,iBAAiB;CAC5B,KAAK;CACL,SAAS;EACP,WAAW,EAAE;GACX,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACF,UAAU,EAAE;GACV,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACF,gBAAgB;EAChB,cAAc,EAAE;GACd,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACF,wBAAwB,EAAE;GACxB,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACF,iBAAiB,EAAE;GACjB,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACF,oBAAoB,EAAE;GACpB,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACF,aAAa,EAAE;GACb,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACH;CACD,OAAO;CACP,aACE;CACF,MAAM;EAAC;EAAgB;EAAoB;EAAS;CACrD"}