@intlayer/design-system 7.3.5 → 7.3.7

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

@@ -1 +1 @@
-{"version":3,"file":"Input.mjs","names":["Input: FC<InputProps>"],"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { DetailedHTMLProps, FC, InputHTMLAttributes } from 'react';\n\n// Optional: your own cn helper to merge class names\nconst cn = (...classes: (string | undefined | false | null)[]) =>\n  classes.filter(Boolean).join(' ');\n\nexport const inputVariants = cva(\n  [\n    // base styles\n    'w-full select-text resize-none text-base shadow-none outline-none',\n    'transition-all duration-300 md:text-sm',\n    'ring-0', // base ring\n    'disabled:opacity-50',\n\n    // Corner shape\n    'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        default: [\n          'text-text',\n          'bg-neutral-50 dark:bg-neutral-950',\n          'ring-text/20',\n\n          // Focus ring\n          'disabled:ring-0',\n          'hover:ring-3',\n          'focus-visible:outline-none focus-visible:ring-4',\n\n          // Remove any weird box-shadow\n          '[box-shadow:none] focus:[box-shadow:none]',\n\n          // aria-invalid border color\n          'aria-invalid:border-error',\n        ].join(' '),\n        invisible: 'border-none bg-inherit text-inherit outline-none ring-0',\n      },\n      size: {\n        md: 'px-2 py-3 md:py-2',\n        lg: 'p-4',\n      },\n      validationStyleEnabled: {\n        disabled: '',\n        enabled: 'valid:border-success invalid:border-error',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n      validationStyleEnabled: 'disabled',\n    },\n  }\n);\n\nexport enum InputVariant {\n  DEFAULT = 'default',\n  INVISIBLE = 'invisible',\n}\n\nexport enum InputSize {\n  MD = 'md',\n  LG = 'lg',\n}\n\nexport type InputProps = DetailedHTMLProps<\n  InputHTMLAttributes<HTMLInputElement>,\n  HTMLInputElement\n> & {\n  validationStyleEnabled?: boolean;\n} & Omit<\n    VariantProps<typeof inputVariants>,\n    'validationStyleEnabled' | 'variant' | 'size'\n  > & {\n    variant?: InputVariant;\n    size?: InputSize;\n  };\n\nexport const Input: FC<InputProps> = ({\n  validationStyleEnabled = false,\n  variant,\n  size,\n  className,\n  ...props\n}) => (\n  <input\n    className={cn(\n      inputVariants({\n        variant,\n        size,\n        validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n      }),\n      className\n    )}\n    {...props}\n  />\n);\n"],"mappings":";;;;AAIA,MAAM,MAAM,GAAG,YACb,QAAQ,OAAO,QAAQ,CAAC,KAAK,IAAI;AAEnC,MAAa,gBAAgB,IAC3B;CAEE;CACA;CACA;CACA;CAGA;CACD,CAAC,KAAK,IAAI,EACX;CACE,UAAU;EACR,SAAS;GACP,SAAS;IACP;IACA;IACA;IAGA;IACA;IACA;IAGA;IAGA;IACD,CAAC,KAAK,IAAI;GACX,WAAW;GACZ;EACD,MAAM;GACJ,IAAI;GACJ,IAAI;GACL;EACD,wBAAwB;GACtB,UAAU;GACV,SAAS;GACV;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACN,wBAAwB;EACzB;CACF,CACF;AAED,IAAY,wDAAL;AACL;AACA;;;AAGF,IAAY,kDAAL;AACL;AACA;;;AAgBF,MAAaA,SAAyB,EACpC,yBAAyB,OACzB,SACA,MACA,WACA,GAAG,YAEH,oBAAC;CACC,WAAW,GACT,cAAc;EACZ;EACA;EACA,wBAAwB,yBAAyB,YAAY;EAC9D,CAAC,EACF,UACD;CACD,GAAI;EACJ"}
+{"version":3,"file":"Input.mjs","names":["Input: FC<InputProps>"],"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { DetailedHTMLProps, FC, InputHTMLAttributes } from 'react';\n\n// Optional: your own cn helper to merge class names\nconst cn = (...classes: (string | undefined | false | null)[]) =>\n  classes.filter(Boolean).join(' ');\n\nexport const inputVariants = cva(\n  [\n    // base styles\n    'w-full select-text resize-none text-base shadow-none outline-none',\n    'transition-all duration-300 md:text-sm',\n    'ring-0', // base ring\n    'disabled:opacity-50',\n\n    // Corner shape\n    'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n  ].join(' '),\n  {\n    variants: {\n      variant: {\n        default: [\n          'text-text',\n          'bg-neutral-50 dark:bg-neutral-950',\n          'ring-text/20',\n\n          // Focus ring\n          'disabled:ring-0',\n          'hover:ring-3',\n          'focus-visible:outline-none focus-visible:ring-4',\n\n          // Remove any weird box-shadow\n          '[box-shadow:none] focus:[box-shadow:none]',\n\n          // aria-invalid border color\n          'aria-invalid:border-error',\n        ].join(' '),\n        invisible: 'border-none bg-inherit text-inherit outline-none ring-0',\n      },\n      size: {\n        md: 'px-2 py-3 md:py-2',\n        lg: 'p-4',\n      },\n      validationStyleEnabled: {\n        disabled: '',\n        enabled: 'valid:border-success invalid:border-error',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n      validationStyleEnabled: 'disabled',\n    },\n  }\n);\n\nexport enum InputVariant {\n  DEFAULT = 'default',\n  INVISIBLE = 'invisible',\n}\n\nexport enum InputSize {\n  MD = 'md',\n  LG = 'lg',\n}\n\nexport type InputProps = DetailedHTMLProps<\n  InputHTMLAttributes<HTMLInputElement>,\n  HTMLInputElement\n> & {\n  validationStyleEnabled?: boolean;\n} & Omit<\n    VariantProps<typeof inputVariants>,\n    'validationStyleEnabled' | 'variant' | 'size'\n  > & {\n    variant?: InputVariant | `${InputVariant}`;\n    size?: InputSize | `${InputSize}`;\n  };\n\nexport const Input: FC<InputProps> = ({\n  validationStyleEnabled = false,\n  variant,\n  size,\n  className,\n  ...props\n}) => (\n  <input\n    className={cn(\n      inputVariants({\n        variant,\n        size,\n        validationStyleEnabled: validationStyleEnabled ? 'enabled' : 'disabled',\n      }),\n      className\n    )}\n    {...props}\n  />\n);\n"],"mappings":";;;;AAIA,MAAM,MAAM,GAAG,YACb,QAAQ,OAAO,QAAQ,CAAC,KAAK,IAAI;AAEnC,MAAa,gBAAgB,IAC3B;CAEE;CACA;CACA;CACA;CAGA;CACD,CAAC,KAAK,IAAI,EACX;CACE,UAAU;EACR,SAAS;GACP,SAAS;IACP;IACA;IACA;IAGA;IACA;IACA;IAGA;IAGA;IACD,CAAC,KAAK,IAAI;GACX,WAAW;GACZ;EACD,MAAM;GACJ,IAAI;GACJ,IAAI;GACL;EACD,wBAAwB;GACtB,UAAU;GACV,SAAS;GACV;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACN,wBAAwB;EACzB;CACF,CACF;AAED,IAAY,wDAAL;AACL;AACA;;;AAGF,IAAY,kDAAL;AACL;AACA;;;AAgBF,MAAaA,SAAyB,EACpC,yBAAyB,OACzB,SACA,MACA,WACA,GAAG,YAEH,oBAAC;CACC,WAAW,GACT,cAAc;EACZ;EACA;EACA,wBAAwB,yBAAyB,YAAY;EAC9D,CAAC,EACF,UACD;CACD,GAAI;EACJ"}

package/dist/esm/components/Terminal/Terminal.mjs

@@ -0,0 +1,156 @@
+import { cn } from "../../utils/cn.mjs";
+import { Container } from "../Container/index.mjs";
+import { Input } from "../Input/Input.mjs";
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Terminal/Terminal.tsx
+const ANSI_COLORS = {
+	"\x1B[0m": {
+		light: "",
+		dark: ""
+	},
+	"\x1B[90m": {
+		light: "text-gray-500",
+		dark: "text-gray-400"
+	},
+	"\x1B[38;5;239m": {
+		light: "text-gray-600",
+		dark: "text-gray-500"
+	},
+	"\x1B[38;5;252m": {
+		light: "text-gray-300",
+		dark: "text-gray-300"
+	},
+	"\x1B[34m": {
+		light: "text-blue-600",
+		dark: "text-blue-400"
+	},
+	"\x1B[31m": {
+		light: "text-red-600",
+		dark: "text-red-400"
+	},
+	"\x1B[32m": {
+		light: "text-green-600",
+		dark: "text-green-400"
+	},
+	"\x1B[38;5;226m": {
+		light: "text-yellow-500",
+		dark: "text-yellow-300"
+	},
+	"\x1B[35m": {
+		light: "text-purple-600",
+		dark: "text-purple-400"
+	},
+	"\x1B[38;5;3m": {
+		light: "text-amber-600",
+		dark: "text-amber-300"
+	},
+	"\x1B[38;5;208m": {
+		light: "text-orange-600",
+		dark: "text-orange-400"
+	},
+	"\x1B[36m": {
+		light: "text-cyan-600",
+		dark: "text-cyan-400"
+	},
+	"\x1B[37m": {
+		light: "text-gray-800",
+		dark: "text-gray-200"
+	},
+	"\x1B[1m": {
+		light: "font-bold",
+		dark: "font-bold"
+	}
+};
+const parseAnsiCodes = (text, isDarkMode) => {
+	const segments = [];
+	const ansiRegex = /(\x1b\[[0-9;]*m)/g;
+	const parts = text.split(ansiRegex);
+	let currentColor;
+	let isBold = false;
+	for (const part of parts) if (ansiRegex.test(part)) {
+		const colorMapping = ANSI_COLORS[part];
+		if (colorMapping) if (part === "\x1B[0m") {
+			currentColor = void 0;
+			isBold = false;
+		} else if (part === "\x1B[1m") isBold = true;
+		else currentColor = isDarkMode ? colorMapping.dark : colorMapping.light;
+	} else if (part) segments.push({
+		text: part,
+		color: currentColor,
+		isBold
+	});
+	return segments;
+};
+const Terminal = ({ className, children, isDarkMode = false, title = "bash", onClose, onSubmit, ...props }) => {
+	const lines = useMemo(() => children.split("\n"), [children]);
+	const [inputValue, setInputValue] = useState("");
+	const handleKeyDown = (e) => {
+		if (e.key === "Enter" && inputValue.trim()) {
+			onSubmit?.(inputValue);
+			setInputValue("");
+		}
+	};
+	const containerProps = props;
+	return /* @__PURE__ */ jsxs(Container, {
+		roundedSize: "2xl",
+		className: cn("flex min-w-0 max-w-full flex-col overflow-hidden font-mono", className),
+		...containerProps,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex w-full flex-row items-center justify-start gap-1 bg-neutral-200 text-neutral text-xs dark:bg-neutral-950",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "mx-2 flex items-center justify-start gap-2 p-1",
+					children: [
+						/* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-red-500" }),
+						/* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-yellow-500" }),
+						/* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-green-500" })
+					]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex size-full overflow-y-auto",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex h-8 min-w-20 items-center justify-between gap-2 bg-card px-3 py-1",
+						children: [/* @__PURE__ */ jsx("span", { children: title }), onClose && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							onClick: onClose,
+							className: "text-neutral transition-colors hover:text-text",
+							"aria-label": "Close tab",
+							children: "×"
+						})]
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsx("pre", {
+				className: "min-w-0 max-w-full overflow-x-auto overflow-y-auto border-neutral/30 border-b p-3 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+				children: /* @__PURE__ */ jsx("code", { children: lines.map((line, lineIndex) => {
+					const segments = parseAnsiCodes(line, isDarkMode);
+					return /* @__PURE__ */ jsx("span", {
+						className: "line block w-full",
+						children: segments.length === 0 ? "\n" : segments.map((segment, segIndex) => /* @__PURE__ */ jsx("span", {
+							className: cn(segment.color, { "font-bold": segment.isBold }),
+							children: segment.text
+						}, `seg-${lineIndex}-${segIndex}`))
+					}, `line-${lineIndex}`);
+				}) })
+			}),
+			/* @__PURE__ */ jsxs(Container, {
+				className: "p-2",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-neutral",
+					children: "~/Desktop/MyApp"
+				}), /* @__PURE__ */ jsx(Input, {
+					className: "m-0.5 w-full",
+					variant: "invisible",
+					value: inputValue,
+					onChange: (e) => setInputValue(e.target.value),
+					onKeyDown: handleKeyDown
+				})]
+			})
+		]
+	});
+};
+
+//#endregion
+export { Terminal };
+//# sourceMappingURL=Terminal.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Terminal.mjs","names":["ANSI_COLORS: Record<string, { light: string; dark: string }>","segments: AnsiSegment[]","currentColor: string | undefined","Terminal: FC<TerminalProps>"],"sources":["../../../../src/components/Terminal/Terminal.tsx"],"sourcesContent":["import {\n  type FC,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  useMemo,\n  useState,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Container } from '../Container';\nimport { Input } from '../Input';\n\n// ANSI color code mappings to CSS colors\nconst ANSI_COLORS: Record<string, { light: string; dark: string }> = {\n  '\\x1b[0m': { light: '', dark: '' }, // RESET\n  '\\x1b[90m': { light: 'text-gray-500', dark: 'text-gray-400' }, // GREY\n  '\\x1b[38;5;239m': { light: 'text-gray-600', dark: 'text-gray-500' }, // GREY_DARK\n  '\\x1b[38;5;252m': { light: 'text-gray-300', dark: 'text-gray-300' }, // GREY_LIGHT\n  '\\x1b[34m': { light: 'text-blue-600', dark: 'text-blue-400' }, // BLUE\n  '\\x1b[31m': { light: 'text-red-600', dark: 'text-red-400' }, // RED\n  '\\x1b[32m': { light: 'text-green-600', dark: 'text-green-400' }, // GREEN\n  '\\x1b[38;5;226m': { light: 'text-yellow-500', dark: 'text-yellow-300' }, // YELLOW\n  '\\x1b[35m': { light: 'text-purple-600', dark: 'text-purple-400' }, // MAGENTA\n  '\\x1b[38;5;3m': { light: 'text-amber-600', dark: 'text-amber-300' }, // BEIGE\n  '\\x1b[38;5;208m': { light: 'text-orange-600', dark: 'text-orange-400' }, // ORANGE\n  '\\x1b[36m': { light: 'text-cyan-600', dark: 'text-cyan-400' }, // CYAN\n  '\\x1b[37m': { light: 'text-gray-800', dark: 'text-gray-200' }, // WHITE\n  '\\x1b[1m': { light: 'font-bold', dark: 'font-bold' }, // BOLD\n};\n\ninterface AnsiSegment {\n  text: string;\n  color?: string;\n  isBold?: boolean;\n}\n\nconst parseAnsiCodes = (text: string, isDarkMode: boolean): AnsiSegment[] => {\n  const segments: AnsiSegment[] = [];\n  // biome-ignore lint/suspicious/noControlCharactersInRegex: we need to parse ANSI codes\n  const ansiRegex = /(\\x1b\\[[0-9;]*m)/g;\n  const parts = text.split(ansiRegex);\n\n  let currentColor: string | undefined;\n  let isBold = false;\n\n  for (const part of parts) {\n    if (ansiRegex.test(part)) {\n      // This is an ANSI code\n      const colorMapping = ANSI_COLORS[part];\n      if (colorMapping) {\n        if (part === '\\x1b[0m') {\n          // RESET\n          currentColor = undefined;\n          isBold = false;\n        } else if (part === '\\x1b[1m') {\n          // BOLD\n          isBold = true;\n        } else {\n          currentColor = isDarkMode ? colorMapping.dark : colorMapping.light;\n        }\n      }\n    } else if (part) {\n      // This is actual text\n      segments.push({\n        text: part,\n        color: currentColor,\n        isBold,\n      });\n    }\n  }\n\n  return segments;\n};\n\nexport type TerminalProps = {\n  children: string;\n  isDarkMode?: boolean;\n  title?: string;\n  onClose?: () => void;\n  onSubmit?: (value: string) => void;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onSubmit'>;\n\nexport const Terminal: FC<TerminalProps> = ({\n  className,\n  children,\n  isDarkMode = false,\n  title = 'bash',\n  onClose,\n  onSubmit,\n  ...props\n}) => {\n  const lines = useMemo(() => children.split('\\n'), [children]);\n  const [inputValue, setInputValue] = useState('');\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Enter' && inputValue.trim()) {\n      onSubmit?.(inputValue);\n      setInputValue('');\n    }\n  };\n\n  // Explicitly type the container props to avoid type conflicts\n  const containerProps = props as Omit<\n    HTMLAttributes<HTMLDivElement>,\n    'children' | 'onSubmit'\n  >;\n\n  return (\n    <Container\n      roundedSize=\"2xl\"\n      className={cn(\n        'flex min-w-0 max-w-full flex-col overflow-hidden font-mono',\n        className\n      )}\n      {...containerProps}\n    >\n      {/* Tab bar */}\n      <div className=\"flex w-full flex-row items-center justify-start gap-1 bg-neutral-200 text-neutral text-xs dark:bg-neutral-950\">\n        <div className=\"mx-2 flex items-center justify-start gap-2 p-1\">\n          <div className=\"size-3 rounded-full bg-red-500\" />\n          <div className=\"size-3 rounded-full bg-yellow-500\" />\n          <div className=\"size-3 rounded-full bg-green-500\" />\n        </div>\n        <div className=\"flex size-full overflow-y-auto\">\n          <div className=\"flex h-8 min-w-20 items-center justify-between gap-2 bg-card px-3 py-1\">\n            <span>{title}</span>\n            {onClose && (\n              <button\n                type=\"button\"\n                onClick={onClose}\n                className=\"text-neutral transition-colors hover:text-text\"\n                aria-label=\"Close tab\"\n              >\n                ×\n              </button>\n            )}\n          </div>\n        </div>\n      </div>\n\n      {/* Terminal content - hide scrollbar */}\n      <pre className=\"min-w-0 max-w-full overflow-x-auto overflow-y-auto border-neutral/30 border-b p-3 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\">\n        <code>\n          {lines.map((line, lineIndex) => {\n            const segments = parseAnsiCodes(line, isDarkMode);\n\n            return (\n              <span className=\"line block w-full\" key={`line-${lineIndex}`}>\n                {segments.length === 0\n                  ? '\\n'\n                  : segments.map((segment, segIndex) => (\n                      <span\n                        key={`seg-${lineIndex}-${segIndex}`}\n                        className={cn(segment.color, {\n                          'font-bold': segment.isBold,\n                        })}\n                      >\n                        {segment.text}\n                      </span>\n                    ))}\n              </span>\n            );\n          })}\n        </code>\n      </pre>\n\n      {/* Input area */}\n      <Container className=\"p-2\">\n        <span className=\"text-neutral\">~/Desktop/MyApp</span>\n        <Input\n          className=\"m-0.5 w-full\"\n          variant=\"invisible\"\n          value={inputValue}\n          onChange={(e) => setInputValue(e.target.value)}\n          onKeyDown={handleKeyDown}\n        />\n      </Container>\n    </Container>\n  );\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,3 @@
+import { Terminal } from "./Terminal.mjs";
+
+export { Terminal };

package/dist/esm/components/index.mjs

@@ -85,6 +85,7 @@ import { Spotlight } from "./Pattern/SpotLight.mjs";
 import { useRightDrawerStore } from "./RightDrawer/useRightDrawerStore.mjs";
 import { RightDrawer } from "./RightDrawer/RightDrawer.mjs";
 import { Tag, TagBackground, TagBorder, TagColor, TagRoundedSize, TagSize } from "./Tag/index.mjs";
+import { Terminal } from "./Terminal/Terminal.mjs";
 import { Modes } from "./ThemeSwitcherDropDown/types.mjs";
 import { DesktopThemeSwitcher } from "./ThemeSwitcherDropDown/DesktopThemeSwitcher.mjs";
 import { MobileThemeSwitcher } from "./ThemeSwitcherDropDown/MobileThemeSwitcher.mjs";
@@ -92,4 +93,4 @@ import { Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastT
 import { reducer, toast, useToast } from "./Toaster/useToast.mjs";
 import { Toaster } from "./Toaster/Toaster.mjs";
 
-export { Accordion, AutoCompleteTextarea, AutoSizedTextArea, Avatar, Badge, BadgeColor, BadgeSize, BadgeVariant, Breadcrumb, Browser, Button, ButtonColor, ButtonSize, ButtonTextAlign, ButtonVariant, Checkbox, CheckboxColor, CheckboxSize, ClickOutsideDiv, Code, CodeBlock, CodeDefault, CollapsibleTable, Command, CommandRoot, Container, ContainerBackground, ContainerBorderColor, ContainerGap, ContainerPadding, ContainerRoundedSize, ContainerSeparator, ContainerTransparency, ContentSelector, CopyButton, CopyToClipboard, DesktopThemeSwitcher, Detail, DictionaryCreationForm, DictionaryEditor, DictionaryFieldEditor, DiscordLogo, DotPattern, DropDown, DropDownAlign, EditableFieldInput, EditableFieldTextArea, ExpandCollapse, FacebookLogo, FileList, Flag, Footer, Form, GridPattern, H1, H2, H3, H4, H5, H6, HeightResizer, HideShow, IDE, InformationTag, Input, InputIndicator, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, InputPassword, InputSize, InputVariant, InstagramLogo, KeyboardScreenAdapter, Label, Link, LinkColor, LinkUnderlined, LinkVariant, LinkedInLogo, Loader, LocaleSwitcher, LocaleSwitcherContent, LocaleSwitcherContentProvider, Logo, LogoTextOnly, LogoWithText, LogoWithTextBelow, MarkdownRenderer, MaxHeightSmoother, MaxWidthSmoother, MobileThemeSwitcher, Modal, ModalSize, Modes, MultiSelect, Navbar, NumberItemsSelector, OTPInput, OTPInputContext, Pagination, PaginationSize, PaginationVariant, Popover, PopoverStatic, PopoverXAlign, PopoverYAlign, PressableSpan, ProductHuntLogo, RightDrawer, SearchInput, Select, SelectContent, SelectContentPosition, SelectLabel, SelectSeparator, ShowingResultsNumberItems, SocialNetworks, Spotlight, SwitchSelector, SwitchSelectorColor, SwitchSelectorSize, Tab, TabSelector, TabSelectorColor, Table, Tag, TagBackground, TagBorder, TagColor, TagRoundedSize, TagSize, TextArea, TiktokLogo, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, VersionSwitcher, VersionSwitcherProvider, WithResizer, XLogo, YoutubeLogo, badgeVariants, buttonVariants, checkIsExternalLink, checkboxVariants, containerVariants, getCapitals, inputSlotVariants, inputVariants, linkVariants, paginationVariants, reducer, toast, useCopyToClipboard, useDebounce, useForm, useFormField, useLocaleSwitcherContent, usePasswordManagerBadge, usePrevious, useRightDrawerStore, useToast, useVersionSwitcher };
+export { Accordion, AutoCompleteTextarea, AutoSizedTextArea, Avatar, Badge, BadgeColor, BadgeSize, BadgeVariant, Breadcrumb, Browser, Button, ButtonColor, ButtonSize, ButtonTextAlign, ButtonVariant, Checkbox, CheckboxColor, CheckboxSize, ClickOutsideDiv, Code, CodeBlock, CodeDefault, CollapsibleTable, Command, CommandRoot, Container, ContainerBackground, ContainerBorderColor, ContainerGap, ContainerPadding, ContainerRoundedSize, ContainerSeparator, ContainerTransparency, ContentSelector, CopyButton, CopyToClipboard, DesktopThemeSwitcher, Detail, DictionaryCreationForm, DictionaryEditor, DictionaryFieldEditor, DiscordLogo, DotPattern, DropDown, DropDownAlign, EditableFieldInput, EditableFieldTextArea, ExpandCollapse, FacebookLogo, FileList, Flag, Footer, Form, GridPattern, H1, H2, H3, H4, H5, H6, HeightResizer, HideShow, IDE, InformationTag, Input, InputIndicator, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, InputPassword, InputSize, InputVariant, InstagramLogo, KeyboardScreenAdapter, Label, Link, LinkColor, LinkUnderlined, LinkVariant, LinkedInLogo, Loader, LocaleSwitcher, LocaleSwitcherContent, LocaleSwitcherContentProvider, Logo, LogoTextOnly, LogoWithText, LogoWithTextBelow, MarkdownRenderer, MaxHeightSmoother, MaxWidthSmoother, MobileThemeSwitcher, Modal, ModalSize, Modes, MultiSelect, Navbar, NumberItemsSelector, OTPInput, OTPInputContext, Pagination, PaginationSize, PaginationVariant, Popover, PopoverStatic, PopoverXAlign, PopoverYAlign, PressableSpan, ProductHuntLogo, RightDrawer, SearchInput, Select, SelectContent, SelectContentPosition, SelectLabel, SelectSeparator, ShowingResultsNumberItems, SocialNetworks, Spotlight, SwitchSelector, SwitchSelectorColor, SwitchSelectorSize, Tab, TabSelector, TabSelectorColor, Table, Tag, TagBackground, TagBorder, TagColor, TagRoundedSize, TagSize, Terminal, TextArea, TiktokLogo, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, VersionSwitcher, VersionSwitcherProvider, WithResizer, XLogo, YoutubeLogo, badgeVariants, buttonVariants, checkIsExternalLink, checkboxVariants, containerVariants, getCapitals, inputSlotVariants, inputVariants, linkVariants, paginationVariants, reducer, toast, useCopyToClipboard, useDebounce, useForm, useFormField, useLocaleSwitcherContent, usePasswordManagerBadge, usePrevious, useRightDrawerStore, useToast, useVersionSwitcher };

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

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import * as class_variance_authority_types10 from "class-variance-authority/types";
+import * as class_variance_authority_types0 from "class-variance-authority/types";
 import { VariantProps } from "class-variance-authority";
 
 //#region src/components/Badge/index.d.ts
@@ -47,7 +47,7 @@ declare const badgeVariants: (props?: {
   color?: BadgeColor;
   variant?: BadgeVariant;
   size?: BadgeSize;
-} & class_variance_authority_types10.ClassProp) => string;
+} & class_variance_authority_types0.ClassProp) => string;
 /**
  * Badge component props interface
  * @description Comprehensive props for the Badge component with accessibility and interactive features

package/dist/types/components/Breadcrumb/breadcrumb.content.d.ts

@@ -1,10 +1,10 @@
-import * as _intlayer_types0 from "@intlayer/types";
+import * as _intlayer_types328 from "@intlayer/types";
 
 //#region src/components/Breadcrumb/breadcrumb.content.d.ts
 declare const breadCrumbContent: {
   key: string;
   content: {
-    linkLabel: _intlayer_types0.TypedNodeModel<_intlayer_types0.NodeType.Translation, {
+    linkLabel: _intlayer_types328.TypedNodeModel<_intlayer_types328.NodeType.Translation, {
       en: string;
       fr: string;
       es: string;
@@ -23,7 +23,7 @@ declare const breadCrumbContent: {
       id: string;
       vi: string;
     }, {
-      nodeType: "translation" | _intlayer_types0.NodeType.Translation;
+      nodeType: _intlayer_types328.NodeType.Translation | "translation";
     } & {
       translation: {
         en: string;

package/dist/types/components/Breadcrumb/breadcrumb.content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.content.d.ts","names":[],"sources":["../../../../src/components/Breadcrumb/breadcrumb.content.ts"],"sourcesContent":[],"mappings":";;;cAEa;;;IAAA,SAAA,iCA2BS,wCAAA"}
+{"version":3,"file":"breadcrumb.content.d.ts","names":[],"sources":["../../../../src/components/Breadcrumb/breadcrumb.content.ts"],"sourcesContent":[],"mappings":";;;cAEa;;;IAAA,SAAA,mCA2BS,0CAAA"}

package/dist/types/components/Breadcrumb/index.d.ts

@@ -1,7 +1,7 @@
 import { LinkColor } from "../Link/Link.js";
 import "../Link/index.js";
 import { FC, HTMLAttributes, ReactNode } from "react";
-import * as class_variance_authority_types0 from "class-variance-authority/types";
+import * as class_variance_authority_types10 from "class-variance-authority/types";
 import { VariantProps } from "class-variance-authority";
 import { LocalesValues } from "@intlayer/types";
 
@@ -12,7 +12,7 @@ import { LocalesValues } from "@intlayer/types";
 declare const breadcrumbVariants: (props?: {
   size?: "small" | "medium" | "large";
   spacing?: "compact" | "normal" | "loose";
-} & class_variance_authority_types0.ClassProp) => string;
+} & class_variance_authority_types10.ClassProp) => string;
 /**
  * Detailed breadcrumb link configuration with optional href or onClick
  */

package/dist/types/components/Breadcrumb/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/Breadcrumb/index.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;cAqDM,0BA+JgC;EA/JhC,IAAA,CAAA,EAAA,OAAA,GAAA,QAiBJ,GAAA,OAAA;EA0HG,OAAA,CAAA,EAAA,SAAA,GAAA,QAAsB,GAAA,OAAA;AAoB3B,CAAA,GA9IE,+BAAA,CAAA,SA8IoC,EAAsB,GAAA,MAAA;AAE5D;;;KAtBK,sBAAA,GA+BoB;EAId;;;EAyBP,IAAA,CAAA,EAAA,MAAA;EACa;;;EA4BJ,IAAA,EAAA,MAAA;;;;;;;;;;;KArED,cAAA,YAA0B;KAE1B,eAAA;;;;SAIH;;;;;UAKC,eAAe;;;;WAId;;;;;;;;;;cAUG;;;;;;;;;;;;;;;IAeV,oBAAoB,sBACtB,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;cA4BJ,YAAY,GAAG"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/Breadcrumb/index.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;cAqDM,0BA+JgC;EA/JhC,IAAA,CAAA,EAAA,OAAA,GAAA,QAiBJ,GAAA,OAAA;EA0HG,OAAA,CAAA,EAAA,SAAA,GAAA,QAAsB,GAAA,OAAA;AAoB3B,CAAA,GA9IE,gCAAA,CAAA,SA8IoC,EAAA,GAAsB,MAAA;AAE5D;;;KAtBK,sBAAA,GA+BoB;EAId;;;EAyBP,IAAA,CAAA,EAAA,MAAA;EACa;;;EA4BJ,IAAA,EAAA,MAAA;;;;;;;;;;;KArED,cAAA,YAA0B;KAE1B,eAAA;;;;SAIH;;;;;UAKC,eAAe;;;;WAId;;;;;;;;;;cAUG;;;;;;;;;;;;;;;IAeV,oBAAoB,sBACtB,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;cA4BJ,YAAY,GAAG"}

package/dist/types/components/Browser/Browser.content.d.ts

@@ -1,10 +1,10 @@
-import * as _intlayer_types175 from "@intlayer/types";
+import * as _intlayer_types310 from "@intlayer/types";
 
 //#region src/components/Browser/Browser.content.d.ts
 declare const browserContent: {
   key: string;
   content: {
-    ariaLabel: _intlayer_types175.TypedNodeModel<_intlayer_types175.NodeType.Translation, {
+    ariaLabel: _intlayer_types310.TypedNodeModel<_intlayer_types310.NodeType.Translation, {
       en: string;
       'en-GB': string;
       fr: string;
@@ -23,7 +23,7 @@ declare const browserContent: {
       id: string;
       vi: string;
     }, {
-      nodeType: "translation" | _intlayer_types175.NodeType.Translation;
+      nodeType: _intlayer_types310.NodeType.Translation | "translation";
     } & {
       translation: {
         en: string;
@@ -45,7 +45,7 @@ declare const browserContent: {
         vi: string;
       };
     }>;
-    urlLabel: _intlayer_types175.TypedNodeModel<_intlayer_types175.NodeType.Translation, {
+    urlLabel: _intlayer_types310.TypedNodeModel<_intlayer_types310.NodeType.Translation, {
       en: string;
       'en-GB': string;
       fr: string;
@@ -64,7 +64,7 @@ declare const browserContent: {
       id: string;
       vi: string;
     }, {
-      nodeType: "translation" | _intlayer_types175.NodeType.Translation;
+      nodeType: _intlayer_types310.NodeType.Translation | "translation";
     } & {
       translation: {
         en: string;
@@ -87,7 +87,7 @@ declare const browserContent: {
       };
     }>;
     urlPlaceholder: string;
-    errorMessage: _intlayer_types175.TypedNodeModel<_intlayer_types175.NodeType.Translation, {
+    errorMessage: _intlayer_types310.TypedNodeModel<_intlayer_types310.NodeType.Translation, {
       en: string;
       'en-GB': string;
       fr: string;
@@ -106,7 +106,7 @@ declare const browserContent: {
       id: string;
       vi: string;
     }, {
-      nodeType: "translation" | _intlayer_types175.NodeType.Translation;
+      nodeType: _intlayer_types310.NodeType.Translation | "translation";
     } & {
       translation: {
         en: string;
@@ -128,7 +128,7 @@ declare const browserContent: {
         vi: string;
       };
     }>;
-    reloadButtonTitle: _intlayer_types175.TypedNodeModel<_intlayer_types175.NodeType.Translation, {
+    reloadButtonTitle: _intlayer_types310.TypedNodeModel<_intlayer_types310.NodeType.Translation, {
       en: string;
       'en-GB': string;
       fr: string;
@@ -147,7 +147,7 @@ declare const browserContent: {
       id: string;
       vi: string;
     }, {
-      nodeType: "translation" | _intlayer_types175.NodeType.Translation;
+      nodeType: _intlayer_types310.NodeType.Translation | "translation";
     } & {
       translation: {
         en: string;
@@ -169,7 +169,7 @@ declare const browserContent: {
         vi: string;
       };
     }>;
-    iframeTitle: _intlayer_types175.TypedNodeModel<_intlayer_types175.NodeType.Translation, {
+    iframeTitle: _intlayer_types310.TypedNodeModel<_intlayer_types310.NodeType.Translation, {
       en: string;
       'en-GB': string;
       fr: string;
@@ -188,7 +188,7 @@ declare const browserContent: {
       id: string;
       vi: string;
     }, {
-      nodeType: "translation" | _intlayer_types175.NodeType.Translation;
+      nodeType: _intlayer_types310.NodeType.Translation | "translation";
     } & {
       translation: {
         en: string;

package/dist/types/components/Button/Button.d.ts

@@ -62,9 +62,9 @@ declare enum ButtonTextAlign {
 declare const buttonVariants: (props?: {
   size?: "md" | "sm" | "lg" | "xl" | "icon-sm" | "icon-md" | "icon-lg" | "icon-xl";
   color?: "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "text" | "success" | "error" | "custom" | "text-inverse" | "card" | "current";
-  roundedSize?: "md" | "sm" | "lg" | "xl" | "none";
-  variant?: "default" | "none" | "link" | "input" | "invisible-link" | "hoverable" | "outline" | "fade";
-  textAlign?: "left" | "right" | "center";
+  roundedSize?: "md" | "sm" | "lg" | "none" | "xl";
+  variant?: "default" | "none" | "input" | "link" | "invisible-link" | "hoverable" | "outline" | "fade";
+  textAlign?: "left" | "center" | "right";
   isFullWidth?: boolean;
 } & class_variance_authority_types12.ClassProp) => string;
 /**

package/dist/types/components/CollapsibleTable/CollapsibleTable.d.ts

@@ -1,5 +1,5 @@
 import { FC, HTMLAttributes, ReactNode } from "react";
-import * as class_variance_authority_types11 from "class-variance-authority/types";
+import * as class_variance_authority_types9 from "class-variance-authority/types";
 import { VariantProps } from "class-variance-authority";
 
 //#region src/components/CollapsibleTable/CollapsibleTable.d.ts
@@ -7,7 +7,7 @@ declare const collapsibleTableVariants: (props?: {
   size?: "md" | "lg" | "sm" | "xl" | "full";
   variant?: "default" | "dark" | "ghost" | "outlined";
   spacing?: "md" | "lg" | "sm" | "none" | "auto";
-} & class_variance_authority_types11.ClassProp) => string;
+} & class_variance_authority_types9.ClassProp) => string;
 interface CollapsibleTableProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>, VariantProps<typeof collapsibleTableVariants> {
   /** Table title displayed in the header */
   title: string;

package/dist/types/components/CollapsibleTable/CollapsibleTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleTable.d.ts","names":[],"sources":["../../../../src/components/CollapsibleTable/CollapsibleTable.tsx"],"sourcesContent":[],"mappings":";;;;;cASM,gCA8EJ;;;EA9EI,OAAA,CAAA,EAAA,IAAA,GAAA,IAAA,GAAA,IA+BL,GAAA,MAAA,GAAA,MAAA;AA8CD,CAAA,GA9CC,gCAAA,CAAA,SA+CC,EAAA,GAAA,MAAA;AAA4B,UADb,qBAAA,SACP,IAAoB,CAAf,cAAe,CAAA,cAAA,CAAA,EAAA,OAAA,CAAA,EAC1B,YAD0B,CAAA,OACN,wBADM,CAAA,CAAA;EAAf;EACS,KAAA,EAAA,MAAA;EAIhB;EAsBO,IAAA,EAtBP,MAsBO,CAAA,MAAA,EAAA,OAAA,CAAA,EAAA;EAUW;EAA4B,SAAA,CAAA,EAAA,MAAA;EAFlC;EAnCV,eAAA,CAAA,EAAA,MAAA;EACN;EAAY,gBAAA,CAAA,EAAA,MAAA;EAoIH;;;;;;;;;;;;;;;eA1GE;;;;;;;;oBAQK,qCAEM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAgGzC,kBAAkB,GAAG"}
+{"version":3,"file":"CollapsibleTable.d.ts","names":[],"sources":["../../../../src/components/CollapsibleTable/CollapsibleTable.tsx"],"sourcesContent":[],"mappings":";;;;;cASM,gCA8EJ;;;EA9EI,OAAA,CAAA,EAAA,IAAA,GAAA,IAAA,GAAA,IA+BL,GAAA,MAAA,GAAA,MAAA;AA8CD,CAAA,GA9CC,+BAAA,CAAA,SA+CC,EAAA,GAAA,MAAA;AAA4B,UADb,qBAAA,SACP,IAAoB,CAAf,cAAe,CAAA,cAAA,CAAA,EAAA,OAAA,CAAA,EAC1B,YAD0B,CAAA,OACN,wBADM,CAAA,CAAA;EAAf;EACS,KAAA,EAAA,MAAA;EAIhB;EAsBO,IAAA,EAtBP,MAsBO,CAAA,MAAA,EAAA,OAAA,CAAA,EAAA;EAUW;EAA4B,SAAA,CAAA,EAAA,MAAA;EAFlC;EAnCV,eAAA,CAAA,EAAA,MAAA;EACN;EAAY,gBAAA,CAAA,EAAA,MAAA;EAoIH;;;;;;;;;;;;;;;eA1GE;;;;;;;;oBAQK,qCAEM,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAgGzC,kBAAkB,GAAG"}

package/dist/types/components/Command/index.d.ts

@@ -1,6 +1,6 @@
-import * as react9 from "react";
+import * as react8 from "react";
 import { ComponentProps, FC, HTMLAttributes } from "react";
-import * as react_jsx_runtime22 from "react/jsx-runtime";
+import * as react_jsx_runtime15 from "react/jsx-runtime";
 import { DialogProps } from "@radix-ui/react-dialog";
 import { Command as Command$1 } from "cmdk";
 
@@ -25,65 +25,65 @@ declare const CommandRoot: FC<ComponentProps<typeof Command$1>>;
  */
 declare const Command: {
   Dialog: FC<DialogProps>;
-  Input: FC<Omit<Pick<Pick<react9.DetailedHTMLProps<react9.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof react9.InputHTMLAttributes<HTMLInputElement>> & {
+  Input: FC<Omit<Pick<Pick<react8.DetailedHTMLProps<react8.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof react8.InputHTMLAttributes<HTMLInputElement>> & {
     ref?: React.Ref<HTMLInputElement>;
   } & {
     asChild?: boolean;
-  }, "key" | "asChild" | keyof react9.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
+  }, "key" | "asChild" | keyof react8.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
     value?: string;
     onValueChange?: (search: string) => void;
-  } & react9.RefAttributes<HTMLInputElement>>;
+  } & react8.RefAttributes<HTMLInputElement>>;
   List: FC<{
     children?: React.ReactNode;
-  } & Pick<Pick<react9.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
+  } & Pick<Pick<react8.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HTMLAttributes<HTMLDivElement> | "key"> & {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild"> & {
+  }, keyof HTMLAttributes<HTMLDivElement> | "key" | "asChild"> & {
     label?: string;
-  } & react9.RefAttributes<HTMLDivElement>>;
+  } & react8.RefAttributes<HTMLDivElement>>;
   Empty: FC<{
     children?: React.ReactNode;
-  } & Pick<Pick<react9.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
+  } & Pick<Pick<react8.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HTMLAttributes<HTMLDivElement> | "key"> & {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild"> & react9.RefAttributes<HTMLDivElement>>;
+  }, keyof HTMLAttributes<HTMLDivElement> | "key" | "asChild"> & react8.RefAttributes<HTMLDivElement>>;
   Group: FC<{
     children?: React.ReactNode;
-  } & Omit<Pick<Pick<react9.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
+  } & Omit<Pick<Pick<react8.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HTMLAttributes<HTMLDivElement> | "key"> & {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & {
+  }, keyof HTMLAttributes<HTMLDivElement> | "key" | "asChild">, "value" | "heading"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
-  } & react9.RefAttributes<HTMLDivElement>>;
-  Separator: FC<Pick<Pick<react9.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
+  } & react8.RefAttributes<HTMLDivElement>>;
+  Separator: FC<Pick<Pick<react8.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HTMLAttributes<HTMLDivElement> | "key"> & {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild"> & {
+  }, keyof HTMLAttributes<HTMLDivElement> | "key" | "asChild"> & {
     alwaysRender?: boolean;
-  } & react9.RefAttributes<HTMLDivElement>>;
+  } & react8.RefAttributes<HTMLDivElement>>;
   Item: FC<{
     children?: React.ReactNode;
-  } & Omit<Pick<Pick<react9.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
+  } & Omit<Pick<Pick<react8.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HTMLAttributes<HTMLDivElement> | "key"> & {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild">, "disabled" | "onSelect" | "value"> & {
+  }, keyof HTMLAttributes<HTMLDivElement> | "key" | "asChild">, "onSelect" | "disabled" | "value"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;
     keywords?: string[];
     forceMount?: boolean;
-  } & react9.RefAttributes<HTMLDivElement>>;
+  } & react8.RefAttributes<HTMLDivElement>>;
   Shortcut: ({
     className,
     ...props
-  }: HTMLAttributes<HTMLSpanElement>) => react_jsx_runtime22.JSX.Element;
+  }: HTMLAttributes<HTMLSpanElement>) => react_jsx_runtime15.JSX.Element;
   propTypes?: any;
   displayName?: string | undefined;
 };

package/dist/types/components/Container/index.d.ts

@@ -1,5 +1,5 @@
 import { DetailedHTMLProps, FC, HTMLAttributes, PropsWithChildren } from "react";
-import * as class_variance_authority_types13 from "class-variance-authority/types";
+import * as class_variance_authority_types11 from "class-variance-authority/types";
 import { VariantProps } from "class-variance-authority";
 
 //#region src/components/Container/index.d.ts
@@ -9,15 +9,15 @@ import { VariantProps } from "class-variance-authority";
  * Provides flexible styling options for background, padding, borders, and layout
  */
 declare const containerVariants: (props?: {
-  roundedSize?: "md" | "lg" | "sm" | "xl" | "2xl" | "none" | "3xl" | "full";
-  transparency?: "md" | "lg" | "sm" | "xl" | "none" | "full";
-  padding?: "md" | "lg" | "sm" | "xl" | "2xl" | "none";
+  roundedSize?: "md" | "lg" | "sm" | "none" | "xl" | "2xl" | "3xl" | "full";
+  transparency?: "md" | "lg" | "sm" | "none" | "xl" | "full";
+  padding?: "md" | "lg" | "sm" | "none" | "xl" | "2xl";
   separator?: "without" | "x" | "y" | "both";
   border?: "with" | "none";
   borderColor?: "primary" | "secondary" | "neutral" | "text" | "success" | "error" | "warning";
   background?: "with" | "hoverable" | "none";
-  gap?: "md" | "lg" | "sm" | "xl" | "2xl" | "none";
-} & class_variance_authority_types13.ClassProp) => string;
+  gap?: "md" | "lg" | "sm" | "none" | "xl" | "2xl";
+} & class_variance_authority_types11.ClassProp) => string;
 /** Available rounded corner sizes for the container */
 declare enum ContainerRoundedSize {
   NONE = "none",

package/dist/types/components/Container/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/Container/index.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;AAaA;AA4EY,cA5EC,iBA4EmB,EAAA,CAAA,KAoEzB,CApEyB,EAAA;EAYpB,WAAA,CAAA,EAAA,IAAA,GAAA,IAAqB,GAAA,IAAA,GAAA,IAAA,GAAA,KAAA,GAAA,MAAA,GAAA,KAAA,GAAA,MAAA;EAUrB,YAAA,CAAA,EAAA,IAAgB,GAAA,IAAA,GAAA,IAAA,GAAA,IAAA,GAAA,MAAA,GAAA,MAAA;EAShB,OAAA,CAAA,EAAA,IAAA,GAAA,IAAkB,GAAA,IAAA,GAAA,IAAA,GAAA,KAAA,GAAA,MAAA;EAQlB,SAAA,CAAA,EAAA,SAAA,GAAoB,GAAA,GAAA,GAAA,GAAA,MAAA;EAWpB,MAAA,CAAA,EAAA,MAAA,GAAA,MAAmB;EAOnB,WAAA,CAAA,EAAA,SAAY,GAAA,WAAA,GAAA,SAAA,GAAA,MAAA,GAAA,SAAA,GAAA,OAAA,GAAA,SAAA;EAUZ,UAAA,CAAA,EAAA,MAAc,GAAA,WAAA,GAAA,MAAA;EACC,GAAA,CAAA,EAAA,IAAA,GAAA,IAAA,GAAA,IAAA,GAAA,IAAA,GAAA,KAAA,GAAA,MAAA;CAApB,GAvEL,gCAAA,CAAA,SAuEK,EAAA,GAAA,MAAA;;AADsB,aAnEjB,oBAAA;EAsEuB,IAAA,GAAA,MAAA;EAAf,EAAA,GAAA,IAAA;EAAgC,EAAA,GAAA,IAAA;EAAlD,EAAA,GAAA,IAAA;EAAiB,EAAA,GAAA,IAAA;EAkCN,MAAA,GAAA,KAgCZ;;;;;aA5HW,qBAAA;;;;;;;;;aAUA,gBAAA;;;;;;;;aASA,kBAAA;;;;;;;aAQA,oBAAA;;;;;;;;;;aAWA,mBAAA;;;;;;aAOA,YAAA;;;;;;;;;KAUA,cAAA,GAAiB,kBAC3B,KAAK,oBAAoB,iCAEzB,kBAAkB,eAAe,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAkCvC,WAAW,GAAG"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/Container/index.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;AAaA;AA4EY,cA5EC,iBA4EmB,EAAA,CAAA,KAoEzB,CApEyB,EAAA;EAYpB,WAAA,CAAA,EAAA,IAAA,GAAA,IAAqB,GAAA,IAAA,GAAA,MAAA,GAAA,IAAA,GAAA,KAAA,GAAA,KAAA,GAAA,MAAA;EAUrB,YAAA,CAAA,EAAA,IAAgB,GAAA,IAAA,GAAA,IAAA,GAAA,MAAA,GAAA,IAAA,GAAA,MAAA;EAShB,OAAA,CAAA,EAAA,IAAA,GAAA,IAAkB,GAAA,IAAA,GAAA,MAAA,GAAA,IAAA,GAAA,KAAA;EAQlB,SAAA,CAAA,EAAA,SAAA,GAAoB,GAAA,GAAA,GAAA,GAAA,MAAA;EAWpB,MAAA,CAAA,EAAA,MAAA,GAAA,MAAmB;EAOnB,WAAA,CAAA,EAAA,SAAY,GAAA,WAAA,GAAA,SAAA,GAAA,MAAA,GAAA,SAAA,GAAA,OAAA,GAAA,SAAA;EAUZ,UAAA,CAAA,EAAA,MAAc,GAAA,WAAA,GAAA,MAAA;EACC,GAAA,CAAA,EAAA,IAAA,GAAA,IAAA,GAAA,IAAA,GAAA,MAAA,GAAA,IAAA,GAAA,KAAA;CAApB,GAvEL,gCAAA,CAAA,SAuEK,EAAA,GAAA,MAAA;;AADsB,aAnEjB,oBAAA;EAsEuB,IAAA,GAAA,MAAA;EAAf,EAAA,GAAA,IAAA;EAAgC,EAAA,GAAA,IAAA;EAAlD,EAAA,GAAA,IAAA;EAAiB,EAAA,GAAA,IAAA;EAkCN,MAAA,GAAA,KAgCZ;;;;;aA5HW,qBAAA;;;;;;;;;aAUA,gBAAA;;;;;;;;aASA,kBAAA;;;;;;;aAQA,oBAAA;;;;;;;;;;aAWA,mBAAA;;;;;;aAOA,YAAA;;;;;;;;;KAUA,cAAA,GAAiB,kBAC3B,KAAK,oBAAoB,iCAEzB,kBAAkB,eAAe,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAkCvC,WAAW,GAAG"}

package/dist/types/components/CopyButton/CopyButton.content.d.ts

@@ -1,10 +1,10 @@
-import * as _intlayer_types190 from "@intlayer/types";
+import * as _intlayer_types325 from "@intlayer/types";
 
 //#region src/components/CopyButton/CopyButton.content.d.ts
 declare const copyContentContent: {
   key: string;
   content: {
-    label: _intlayer_types190.TypedNodeModel<_intlayer_types190.NodeType.Translation, {
+    label: _intlayer_types325.TypedNodeModel<_intlayer_types325.NodeType.Translation, {
       en: string;
       fr: string;
       es: string;
@@ -23,7 +23,7 @@ declare const copyContentContent: {
       id: string;
       vi: string;
     }, {
-      nodeType: "translation" | _intlayer_types190.NodeType.Translation;
+      nodeType: _intlayer_types325.NodeType.Translation | "translation";
     } & {
       translation: {
         en: string;