@intlayer/design-system 7.5.14 → 7.6.0-canary.0

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

@@ -130,6 +130,7 @@ let ContainerBorderColor = /* @__PURE__ */ function(ContainerBorderColor$1) {
 	ContainerBorderColor$1["PRIMARY"] = "primary";
 	ContainerBorderColor$1["SECONDARY"] = "secondary";
 	ContainerBorderColor$1["NEUTRAL"] = "neutral";
+	ContainerBorderColor$1["CARD"] = "card";
 	ContainerBorderColor$1["TEXT"] = "text";
 	ContainerBorderColor$1["ERROR"] = "error";
 	ContainerBorderColor$1["WARNING"] = "warning";

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Container/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type {\n  DetailedHTMLProps,\n  FC,\n  HTMLAttributes,\n  PropsWithChildren,\n} from 'react';\n\n/**\n * Container component variants using class-variance-authority\n * Provides flexible styling options for background, padding, borders, and layout\n */\nexport const containerVariants = cva('flex flex-col text-text backdrop-blur', {\n  variants: {\n    roundedSize: {\n      none: 'rounded-none',\n      sm: 'rounded-sm [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-md',\n      md: 'rounded-md [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-lg',\n      lg: 'rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl',\n      xl: 'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n      '2xl':\n        'rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl',\n      '3xl':\n        'rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl',\n      '4xl':\n        'rounded-4xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[2.5rem]',\n      full: 'rounded-full [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-full',\n    },\n    transparency: {\n      none: 'bg-card',\n      sm: 'bg-card/90',\n      md: 'bg-card/70',\n      lg: 'bg-card/40',\n      xl: 'bg-card/20',\n      full: '',\n    },\n    padding: {\n      none: 'p-0',\n      sm: 'px-3 py-2',\n      md: 'px-4 py-3',\n      lg: 'px-6 py-4',\n      xl: 'px-8 py-6',\n      '2xl': 'px-10 py-8',\n    },\n    separator: {\n      without: '',\n      x: 'divide-x divide-dashed divide-text/20',\n      y: 'divide-y divide-dashed divide-text/20',\n      both: 'divide-x divide-y divide-dashed divide-text/20',\n    },\n    border: {\n      none: '',\n      with: 'border-[1.3px]',\n    },\n    borderColor: {\n      primary: 'border-primary',\n      secondary: 'border-secondary',\n      neutral: 'border-neutral',\n      card: 'border-card',\n      text: 'border-text',\n      error: 'border-error',\n      warning: 'border-warning',\n      success: 'border-success',\n    },\n    background: {\n      none: '',\n      hoverable:\n        'bg-opacity-5! backdrop-blur-0 hover:bg-opacity-10! hover:backdrop-blur focus:bg-opacity-10! focus:backdrop-blur aria-selected:bg-opacity-15! aria-selected:backdrop-blur',\n      with: '',\n    },\n    gap: {\n      none: 'gap-0',\n      sm: 'gap-1',\n      md: 'gap-3',\n      lg: 'gap-5',\n      xl: 'gap-8',\n      '2xl': 'gap-10',\n    },\n  },\n  defaultVariants: {\n    roundedSize: 'lg',\n    border: 'none',\n    borderColor: 'text',\n    transparency: 'md',\n    padding: 'none',\n    separator: 'without',\n    gap: 'none',\n  },\n  compoundVariants: [\n    {\n      background: 'none',\n      class: 'bg-transparent',\n    },\n  ],\n});\n\n/** Available rounded corner sizes for the container */\nexport enum ContainerRoundedSize {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  '2xl' = '2xl',\n  '3xl' = '3xl',\n  '4xl' = '4xl',\n  '5xl' = '5xl',\n  FULL = 'full',\n}\n\n/** Background transparency levels for the container */\nexport enum ContainerTransparency {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  FULL = 'full',\n}\n\n/** Padding sizes for container content */\nexport enum ContainerPadding {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n}\n\n/** Separator options for dividing container children */\nexport enum ContainerSeparator {\n  WITHOUT = 'without',\n  X = 'x',\n  Y = 'y',\n  BOTH = 'both',\n}\n\n/** Border color options for the container */\nexport enum ContainerBorderColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  NEUTRAL = 'neutral',\n  TEXT = 'text',\n  ERROR = 'error',\n  WARNING = 'warning',\n  SUCCESS = 'success',\n}\n\n/** Background interaction states for the container */\nexport enum ContainerBackground {\n  NONE = 'none',\n  HOVERABLE = 'hoverable',\n  WITH = 'with',\n}\n\n/** Gap sizes between container children */\nexport enum ContainerGap {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  '2xl' = '2xl',\n}\n\n/** Container component props extending HTML div attributes */\nexport type ContainerProps = PropsWithChildren<\n  Omit<VariantProps<typeof containerVariants>, 'border'>\n> &\n  DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {\n    /** Whether to show a border around the container */\n    border?: boolean;\n  };\n\n/**\n * Container Component\n *\n * A flexible container component for organizing content with customizable styling options.\n * Supports various visual states, layouts, and accessibility features.\n *\n * ## Features\n * - **Flexible Layout**: Supports different padding, gap, and separator options\n * - **Visual Variants**: Multiple background transparency levels and border styles\n * - **Responsive Design**: Configurable rounded corners and spacing\n * - **Semantic HTML**: Proper div element with extensible attributes\n *\n * ## Accessibility\n * - Inherits all standard div accessibility features\n * - Supports ARIA attributes through spread props\n * - Maintains proper semantic structure for screen readers\n *\n * @param children - The content to display inside the container\n * @param roundedSize - Border radius size (default: 'md')\n * @param transparency - Background transparency level (default: 'md')\n * @param padding - Internal padding size (default: 'none')\n * @param separator - Divider lines between children (default: 'without')\n * @param border - Whether to show border (default: false)\n * @param borderColor - Color of the border (default: 'text')\n * @param background - Background interaction behavior (default: 'none')\n * @param gap - Space between child elements (default: 'none')\n * @param className - Additional CSS classes\n * @param props - Additional HTML div attributes including ARIA attributes\n */\nexport const Container: FC<ContainerProps> = ({\n  children,\n  roundedSize,\n  padding,\n  transparency,\n  separator,\n  className,\n  border,\n  borderColor,\n  background,\n  gap,\n  ...props\n}) => (\n  <div\n    className={cn(\n      containerVariants({\n        roundedSize,\n        transparency,\n        padding,\n        separator,\n        border:\n          typeof border === 'boolean' ? (border ? 'with' : 'none') : undefined,\n        background,\n        borderColor,\n        gap,\n      }),\n      className\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n"],"mappings":";;;;;;;;;AAaA,MAAa,oBAAoB,IAAI,yCAAyC;CAC5E,UAAU;EACR,aAAa;GACX,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OACE;GACF,OACE;GACF,OACE;GACF,MAAM;GACP;EACD,cAAc;GACZ,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,MAAM;GACP;EACD,SAAS;GACP,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OAAO;GACR;EACD,WAAW;GACT,SAAS;GACT,GAAG;GACH,GAAG;GACH,MAAM;GACP;EACD,QAAQ;GACN,MAAM;GACN,MAAM;GACP;EACD,aAAa;GACX,SAAS;GACT,WAAW;GACX,SAAS;GACT,MAAM;GACN,MAAM;GACN,OAAO;GACP,SAAS;GACT,SAAS;GACV;EACD,YAAY;GACV,MAAM;GACN,WACE;GACF,MAAM;GACP;EACD,KAAK;GACH,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OAAO;GACR;EACF;CACD,iBAAiB;EACf,aAAa;EACb,QAAQ;EACR,aAAa;EACb,cAAc;EACd,SAAS;EACT,WAAW;EACX,KAAK;EACN;CACD,kBAAkB,CAChB;EACE,YAAY;EACZ,OAAO;EACR,CACF;CACF,CAAC;;AAGF,IAAY,wEAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;AAIF,IAAY,0EAAL;AACL;AACA;AACA;AACA;AACA;AACA;;;;AAIF,IAAY,gEAAL;AACL;AACA;AACA;AACA;AACA;;;;AAIF,IAAY,oEAAL;AACL;AACA;AACA;AACA;;;;AAIF,IAAY,wEAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;;;;AAIF,IAAY,sEAAL;AACL;AACA;AACA;;;;AAIF,IAAY,wDAAL;AACL;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCF,MAAa,aAAiC,EAC5C,UACA,aACA,SACA,cACA,WACA,WACA,QACA,aACA,YACA,KACA,GAAG,YAEH,oBAAC;CACC,WAAW,GACT,kBAAkB;EAChB;EACA;EACA;EACA;EACA,QACE,OAAO,WAAW,YAAa,SAAS,SAAS,SAAU;EAC7D;EACA;EACA;EACD,CAAC,EACF,UACD;CACD,GAAI;CAEH;EACG"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Container/index.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type {\n  DetailedHTMLProps,\n  FC,\n  HTMLAttributes,\n  PropsWithChildren,\n} from 'react';\n\n/**\n * Container component variants using class-variance-authority\n * Provides flexible styling options for background, padding, borders, and layout\n */\nexport const containerVariants = cva('flex flex-col text-text backdrop-blur', {\n  variants: {\n    roundedSize: {\n      none: 'rounded-none',\n      sm: 'rounded-sm [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-md',\n      md: 'rounded-md [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-lg',\n      lg: 'rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl',\n      xl: 'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n      '2xl':\n        'rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl',\n      '3xl':\n        'rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl',\n      '4xl':\n        'rounded-4xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[2.5rem]',\n      full: 'rounded-full [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-full',\n    },\n    transparency: {\n      none: 'bg-card',\n      sm: 'bg-card/90',\n      md: 'bg-card/70',\n      lg: 'bg-card/40',\n      xl: 'bg-card/20',\n      full: '',\n    },\n    padding: {\n      none: 'p-0',\n      sm: 'px-3 py-2',\n      md: 'px-4 py-3',\n      lg: 'px-6 py-4',\n      xl: 'px-8 py-6',\n      '2xl': 'px-10 py-8',\n    },\n    separator: {\n      without: '',\n      x: 'divide-x divide-dashed divide-text/20',\n      y: 'divide-y divide-dashed divide-text/20',\n      both: 'divide-x divide-y divide-dashed divide-text/20',\n    },\n    border: {\n      none: '',\n      with: 'border-[1.3px]',\n    },\n    borderColor: {\n      primary: 'border-primary',\n      secondary: 'border-secondary',\n      neutral: 'border-neutral',\n      card: 'border-card',\n      text: 'border-text',\n      error: 'border-error',\n      warning: 'border-warning',\n      success: 'border-success',\n    },\n    background: {\n      none: '',\n      hoverable:\n        'bg-opacity-5! backdrop-blur-0 hover:bg-opacity-10! hover:backdrop-blur focus:bg-opacity-10! focus:backdrop-blur aria-selected:bg-opacity-15! aria-selected:backdrop-blur',\n      with: '',\n    },\n    gap: {\n      none: 'gap-0',\n      sm: 'gap-1',\n      md: 'gap-3',\n      lg: 'gap-5',\n      xl: 'gap-8',\n      '2xl': 'gap-10',\n    },\n  },\n  defaultVariants: {\n    roundedSize: 'lg',\n    border: 'none',\n    borderColor: 'text',\n    transparency: 'md',\n    padding: 'none',\n    separator: 'without',\n    gap: 'none',\n  },\n  compoundVariants: [\n    {\n      background: 'none',\n      class: 'bg-transparent',\n    },\n  ],\n});\n\n/** Available rounded corner sizes for the container */\nexport enum ContainerRoundedSize {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  '2xl' = '2xl',\n  '3xl' = '3xl',\n  '4xl' = '4xl',\n  '5xl' = '5xl',\n  FULL = 'full',\n}\n\n/** Background transparency levels for the container */\nexport enum ContainerTransparency {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  FULL = 'full',\n}\n\n/** Padding sizes for container content */\nexport enum ContainerPadding {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n}\n\n/** Separator options for dividing container children */\nexport enum ContainerSeparator {\n  WITHOUT = 'without',\n  X = 'x',\n  Y = 'y',\n  BOTH = 'both',\n}\n\n/** Border color options for the container */\nexport enum ContainerBorderColor {\n  PRIMARY = 'primary',\n  SECONDARY = 'secondary',\n  NEUTRAL = 'neutral',\n  CARD = 'card',\n  TEXT = 'text',\n  ERROR = 'error',\n  WARNING = 'warning',\n  SUCCESS = 'success',\n}\n\n/** Background interaction states for the container */\nexport enum ContainerBackground {\n  NONE = 'none',\n  HOVERABLE = 'hoverable',\n  WITH = 'with',\n}\n\n/** Gap sizes between container children */\nexport enum ContainerGap {\n  NONE = 'none',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  '2xl' = '2xl',\n}\n\n/** Container component props extending HTML div attributes */\nexport type ContainerProps = PropsWithChildren<\n  Omit<VariantProps<typeof containerVariants>, 'border'>\n> &\n  DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {\n    /** Whether to show a border around the container */\n    border?: boolean;\n  };\n\n/**\n * Container Component\n *\n * A flexible container component for organizing content with customizable styling options.\n * Supports various visual states, layouts, and accessibility features.\n *\n * ## Features\n * - **Flexible Layout**: Supports different padding, gap, and separator options\n * - **Visual Variants**: Multiple background transparency levels and border styles\n * - **Responsive Design**: Configurable rounded corners and spacing\n * - **Semantic HTML**: Proper div element with extensible attributes\n *\n * ## Accessibility\n * - Inherits all standard div accessibility features\n * - Supports ARIA attributes through spread props\n * - Maintains proper semantic structure for screen readers\n *\n * @param children - The content to display inside the container\n * @param roundedSize - Border radius size (default: 'md')\n * @param transparency - Background transparency level (default: 'md')\n * @param padding - Internal padding size (default: 'none')\n * @param separator - Divider lines between children (default: 'without')\n * @param border - Whether to show border (default: false)\n * @param borderColor - Color of the border (default: 'text')\n * @param background - Background interaction behavior (default: 'none')\n * @param gap - Space between child elements (default: 'none')\n * @param className - Additional CSS classes\n * @param props - Additional HTML div attributes including ARIA attributes\n */\nexport const Container: FC<ContainerProps> = ({\n  children,\n  roundedSize,\n  padding,\n  transparency,\n  separator,\n  className,\n  border,\n  borderColor,\n  background,\n  gap,\n  ...props\n}) => (\n  <div\n    className={cn(\n      containerVariants({\n        roundedSize,\n        transparency,\n        padding,\n        separator,\n        border:\n          typeof border === 'boolean' ? (border ? 'with' : 'none') : undefined,\n        background,\n        borderColor,\n        gap,\n      }),\n      className\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n);\n"],"mappings":";;;;;;;;;AAaA,MAAa,oBAAoB,IAAI,yCAAyC;CAC5E,UAAU;EACR,aAAa;GACX,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OACE;GACF,OACE;GACF,OACE;GACF,MAAM;GACP;EACD,cAAc;GACZ,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,MAAM;GACP;EACD,SAAS;GACP,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OAAO;GACR;EACD,WAAW;GACT,SAAS;GACT,GAAG;GACH,GAAG;GACH,MAAM;GACP;EACD,QAAQ;GACN,MAAM;GACN,MAAM;GACP;EACD,aAAa;GACX,SAAS;GACT,WAAW;GACX,SAAS;GACT,MAAM;GACN,MAAM;GACN,OAAO;GACP,SAAS;GACT,SAAS;GACV;EACD,YAAY;GACV,MAAM;GACN,WACE;GACF,MAAM;GACP;EACD,KAAK;GACH,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,OAAO;GACR;EACF;CACD,iBAAiB;EACf,aAAa;EACb,QAAQ;EACR,aAAa;EACb,cAAc;EACd,SAAS;EACT,WAAW;EACX,KAAK;EACN;CACD,kBAAkB,CAChB;EACE,YAAY;EACZ,OAAO;EACR,CACF;CACF,CAAC;;AAGF,IAAY,wEAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;AAIF,IAAY,0EAAL;AACL;AACA;AACA;AACA;AACA;AACA;;;;AAIF,IAAY,gEAAL;AACL;AACA;AACA;AACA;AACA;;;;AAIF,IAAY,oEAAL;AACL;AACA;AACA;AACA;;;;AAIF,IAAY,wEAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;AAIF,IAAY,sEAAL;AACL;AACA;AACA;;;;AAIF,IAAY,wDAAL;AACL;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCF,MAAa,aAAiC,EAC5C,UACA,aACA,SACA,cACA,WACA,WACA,QACA,aACA,YACA,KACA,GAAG,YAEH,oBAAC;CACC,WAAW,GACT,kBAAkB;EAChB;EACA;EACA;EACA;EACA,QACE,OAAO,WAAW,YAAa,SAAS,SAAS,SAAU;EAC7D;EACA;EACA;EACD,CAAC,EACF,UACD;CACD,GAAI;CAEH;EACG"}

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

@@ -1,10 +1,9 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
-import { Container } from "../../dist/esm/components/Container/index.mjs";
-import { Flag } from "../../dist/esm/components/Flags/Flag.mjs";
 import { useEffect, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Container, Flag } from "@intlayer/design-system";
 import { Locales, getHTMLTextDir, getLocaleName } from "intlayer";
 
 //#region src/components/LanguageBackground/index.tsx

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/LanguageBackground/index.tsx"],"sourcesContent":["'use client';\n\nimport { Container, Flag } from '@intlayer/design-system';\nimport { cn } from '@utils/cn';\nimport { getHTMLTextDir, getLocaleName, type Locale, Locales } from 'intlayer';\nimport {\n  type FC,\n  type HTMLAttributes,\n  type PropsWithChildren,\n  useEffect,\n  useState,\n} from 'react';\n\nconst shuffleArray = (array: string[], limit?: number) => {\n  const shuffled = [...array];\n\n  for (let i = shuffled.length - 1; i > 0; i--) {\n    const randomIndex = Math.floor(Math.random() * (i + 1));\n\n    [shuffled[i], shuffled[randomIndex]] = [shuffled[randomIndex], shuffled[i]];\n  }\n\n  return limit ? shuffled.slice(0, limit) : shuffled;\n};\n\nconst LocalCard: FC<{ locale: string }> = ({ locale, ...props }) => (\n  <div\n    className=\"group z-10 mx-8 inline-flex shrink-0 transition-transform duration-300 hover:scale-105\"\n    {...props}\n  >\n    <Container\n      roundedSize=\"xl\"\n      className=\"flex flex-row items-center gap-5 p-3\"\n    >\n      <Flag\n        locale={locale as Locale}\n        className=\"max-h-5 max-w-5 rounded-sm grayscale-80 transition duration-300 group-hover:grayscale-0\"\n        width={640}\n        height={480}\n        loading=\"lazy\"\n      />\n      <span\n        dir={getHTMLTextDir(locale as Locale)}\n        lang={locale as Locale}\n        className=\"flex text-nowrap\"\n      >\n        {getLocaleName(locale as Locale)}\n      </span>\n    </Container>\n  </div>\n);\n\nconst LocalCardList: FC<{ localeList: string[]; className?: string }> = ({\n  localeList,\n  className,\n  ...props\n}) => (\n  <div className=\"relative flex w-full overflow-hidden\" {...props}>\n    <div\n      className={cn('inline-flex shrink-0 will-change-transform', className)}\n    >\n      {/* First set of cards */}\n      {localeList.map((locale, index) => (\n        <LocalCard key={`${locale}-first-${index}`} locale={locale} />\n      ))}\n      {/* Duplicate set for seamless loop */}\n      {localeList.map((locale, index) => (\n        <LocalCard key={`${locale}-second-${index}`} locale={locale} />\n      ))}\n    </div>\n  </div>\n);\n\nconst NUM_OF_LOCALES = 15;\n\nconst emptyArrayOfLocale: string[][] = new Array(4).fill(0).map(() => []);\nconst arrayOfLocale: string[][] = new Array(4)\n  .fill(0)\n  .map(() => shuffleArray(Object.values(Locales.ALL_LOCALES), NUM_OF_LOCALES));\n\nexport const LanguageSection: FC<HTMLAttributes<HTMLElement>> = ({\n  className,\n  ...props\n}) => {\n  const [localeList, setLocaleList] = useState(emptyArrayOfLocale);\n  const [firstPart, secondPart, thirdPart, fourthPart] = localeList;\n\n  useEffect(() => {\n    setLocaleList(arrayOfLocale);\n  }, []);\n\n  return (\n    <section\n      className={cn(\n        'mask-[linear-gradient(to_right,transparent_0,black_128px,black_calc(100%-128px),transparent_100%)] my-10 w-full overflow-hidden',\n        className\n      )}\n      {...props}\n    >\n      <div className=\"relative flex w-full flex-col gap-5 py-3\">\n        <LocalCardList localeList={firstPart} className=\"horizontal-loop-1\" />\n        <LocalCardList localeList={secondPart} className=\"horizontal-loop-2\" />\n        <LocalCardList localeList={thirdPart} className=\"horizontal-loop-1\" />\n        <LocalCardList localeList={fourthPart} className=\"horizontal-loop-2\" />\n      </div>\n    </section>\n  );\n};\n\nexport const LanguageBackground: FC<PropsWithChildren> = ({ children }) => (\n  <>\n    <div className=\"absolute top-0 left-0 z-0 flex size-full items-center justify-center\">\n      <LanguageSection className=\"mt-[30%]\" />\n    </div>\n    {children}\n  </>\n);\n"],"mappings":";;;;;;;;;;AAaA,MAAM,gBAAgB,OAAiB,UAAmB;CACxD,MAAM,WAAW,CAAC,GAAG,MAAM;AAE3B,MAAK,IAAI,IAAI,SAAS,SAAS,GAAG,IAAI,GAAG,KAAK;EAC5C,MAAM,cAAc,KAAK,MAAM,KAAK,QAAQ,IAAI,IAAI,GAAG;AAEvD,GAAC,SAAS,IAAI,SAAS,gBAAgB,CAAC,SAAS,cAAc,SAAS,GAAG;;AAG7E,QAAO,QAAQ,SAAS,MAAM,GAAG,MAAM,GAAG;;AAG5C,MAAM,aAAqC,EAAE,QAAQ,GAAG,YACtD,oBAAC;CACC,WAAU;CACV,GAAI;WAEJ,qBAAC;EACC,aAAY;EACZ,WAAU;aAEV,oBAAC;GACS;GACR,WAAU;GACV,OAAO;GACP,QAAQ;GACR,SAAQ;IACR,EACF,oBAAC;GACC,KAAK,eAAe,OAAiB;GACrC,MAAM;GACN,WAAU;aAET,cAAc,OAAiB;IAC3B;GACG;EACR;AAGR,MAAM,iBAAmE,EACvE,YACA,WACA,GAAG,YAEH,oBAAC;CAAI,WAAU;CAAuC,GAAI;WACxD,qBAAC;EACC,WAAW,GAAG,8CAA8C,UAAU;aAGrE,WAAW,KAAK,QAAQ,UACvB,oBAAC,aAAmD,UAApC,GAAG,OAAO,SAAS,QAA2B,CAC9D,EAED,WAAW,KAAK,QAAQ,UACvB,oBAAC,aAAoD,UAArC,GAAG,OAAO,UAAU,QAA2B,CAC/D;GACE;EACF;AAGR,MAAM,iBAAiB;AAEvB,MAAM,qBAAiC,IAAI,MAAM,EAAE,CAAC,KAAK,EAAE,CAAC,UAAU,EAAE,CAAC;AACzE,MAAM,gBAA4B,IAAI,MAAM,EAAE,CAC3C,KAAK,EAAE,CACP,UAAU,aAAa,OAAO,OAAO,QAAQ,YAAY,EAAE,eAAe,CAAC;AAE9E,MAAa,mBAAoD,EAC/D,WACA,GAAG,YACC;CACJ,MAAM,CAAC,YAAY,iBAAiB,SAAS,mBAAmB;CAChE,MAAM,CAAC,WAAW,YAAY,WAAW,cAAc;AAEvD,iBAAgB;AACd,gBAAc,cAAc;IAC3B,EAAE,CAAC;AAEN,QACE,oBAAC;EACC,WAAW,GACT,mIACA,UACD;EACD,GAAI;YAEJ,qBAAC;GAAI,WAAU;;IACb,oBAAC;KAAc,YAAY;KAAW,WAAU;MAAsB;IACtE,oBAAC;KAAc,YAAY;KAAY,WAAU;MAAsB;IACvE,oBAAC;KAAc,YAAY;KAAW,WAAU;MAAsB;IACtE,oBAAC;KAAc,YAAY;KAAY,WAAU;MAAsB;;IACnE;GACE;;AAId,MAAa,sBAA6C,EAAE,eAC1D,8CACE,oBAAC;CAAI,WAAU;WACb,oBAAC,mBAAgB,WAAU,aAAa;EACpC,EACL,YACA"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/LanguageBackground/index.tsx"],"sourcesContent":["'use client';\n\nimport { Container, Flag } from '@intlayer/design-system';\nimport { cn } from '@utils/cn';\nimport { getHTMLTextDir, getLocaleName, type Locale, Locales } from 'intlayer';\nimport {\n  type FC,\n  type HTMLAttributes,\n  type PropsWithChildren,\n  useEffect,\n  useState,\n} from 'react';\n\nconst shuffleArray = (array: string[], limit?: number) => {\n  const shuffled = [...array];\n\n  for (let i = shuffled.length - 1; i > 0; i--) {\n    const randomIndex = Math.floor(Math.random() * (i + 1));\n\n    [shuffled[i], shuffled[randomIndex]] = [shuffled[randomIndex], shuffled[i]];\n  }\n\n  return limit ? shuffled.slice(0, limit) : shuffled;\n};\n\nconst LocalCard: FC<{ locale: string }> = ({ locale, ...props }) => (\n  <div\n    className=\"group z-10 mx-8 inline-flex shrink-0 transition-transform duration-300 hover:scale-105\"\n    {...props}\n  >\n    <Container\n      roundedSize=\"xl\"\n      className=\"flex flex-row items-center gap-5 p-3\"\n    >\n      <Flag\n        locale={locale as Locale}\n        className=\"max-h-5 max-w-5 rounded-sm grayscale-80 transition duration-300 group-hover:grayscale-0\"\n        width={640}\n        height={480}\n        loading=\"lazy\"\n      />\n      <span\n        dir={getHTMLTextDir(locale as Locale)}\n        lang={locale as Locale}\n        className=\"flex text-nowrap\"\n      >\n        {getLocaleName(locale as Locale)}\n      </span>\n    </Container>\n  </div>\n);\n\nconst LocalCardList: FC<{ localeList: string[]; className?: string }> = ({\n  localeList,\n  className,\n  ...props\n}) => (\n  <div className=\"relative flex w-full overflow-hidden\" {...props}>\n    <div\n      className={cn('inline-flex shrink-0 will-change-transform', className)}\n    >\n      {/* First set of cards */}\n      {localeList.map((locale, index) => (\n        <LocalCard key={`${locale}-first-${index}`} locale={locale} />\n      ))}\n      {/* Duplicate set for seamless loop */}\n      {localeList.map((locale, index) => (\n        <LocalCard key={`${locale}-second-${index}`} locale={locale} />\n      ))}\n    </div>\n  </div>\n);\n\nconst NUM_OF_LOCALES = 15;\n\nconst emptyArrayOfLocale: string[][] = new Array(4).fill(0).map(() => []);\nconst arrayOfLocale: string[][] = new Array(4)\n  .fill(0)\n  .map(() => shuffleArray(Object.values(Locales.ALL_LOCALES), NUM_OF_LOCALES));\n\nexport const LanguageSection: FC<HTMLAttributes<HTMLElement>> = ({\n  className,\n  ...props\n}) => {\n  const [localeList, setLocaleList] = useState(emptyArrayOfLocale);\n  const [firstPart, secondPart, thirdPart, fourthPart] = localeList;\n\n  useEffect(() => {\n    setLocaleList(arrayOfLocale);\n  }, []);\n\n  return (\n    <section\n      className={cn(\n        'mask-[linear-gradient(to_right,transparent_0,black_128px,black_calc(100%-128px),transparent_100%)] my-10 w-full overflow-hidden',\n        className\n      )}\n      {...props}\n    >\n      <div className=\"relative flex w-full flex-col gap-5 py-3\">\n        <LocalCardList localeList={firstPart} className=\"horizontal-loop-1\" />\n        <LocalCardList localeList={secondPart} className=\"horizontal-loop-2\" />\n        <LocalCardList localeList={thirdPart} className=\"horizontal-loop-1\" />\n        <LocalCardList localeList={fourthPart} className=\"horizontal-loop-2\" />\n      </div>\n    </section>\n  );\n};\n\nexport const LanguageBackground: FC<PropsWithChildren> = ({ children }) => (\n  <>\n    <div className=\"absolute top-0 left-0 z-0 flex size-full items-center justify-center\">\n      <LanguageSection className=\"mt-[30%]\" />\n    </div>\n    {children}\n  </>\n);\n"],"mappings":";;;;;;;;;AAaA,MAAM,gBAAgB,OAAiB,UAAmB;CACxD,MAAM,WAAW,CAAC,GAAG,MAAM;AAE3B,MAAK,IAAI,IAAI,SAAS,SAAS,GAAG,IAAI,GAAG,KAAK;EAC5C,MAAM,cAAc,KAAK,MAAM,KAAK,QAAQ,IAAI,IAAI,GAAG;AAEvD,GAAC,SAAS,IAAI,SAAS,gBAAgB,CAAC,SAAS,cAAc,SAAS,GAAG;;AAG7E,QAAO,QAAQ,SAAS,MAAM,GAAG,MAAM,GAAG;;AAG5C,MAAM,aAAqC,EAAE,QAAQ,GAAG,YACtD,oBAAC;CACC,WAAU;CACV,GAAI;WAEJ,qBAAC;EACC,aAAY;EACZ,WAAU;aAEV,oBAAC;GACS;GACR,WAAU;GACV,OAAO;GACP,QAAQ;GACR,SAAQ;IACR,EACF,oBAAC;GACC,KAAK,eAAe,OAAiB;GACrC,MAAM;GACN,WAAU;aAET,cAAc,OAAiB;IAC3B;GACG;EACR;AAGR,MAAM,iBAAmE,EACvE,YACA,WACA,GAAG,YAEH,oBAAC;CAAI,WAAU;CAAuC,GAAI;WACxD,qBAAC;EACC,WAAW,GAAG,8CAA8C,UAAU;aAGrE,WAAW,KAAK,QAAQ,UACvB,oBAAC,aAAmD,UAApC,GAAG,OAAO,SAAS,QAA2B,CAC9D,EAED,WAAW,KAAK,QAAQ,UACvB,oBAAC,aAAoD,UAArC,GAAG,OAAO,UAAU,QAA2B,CAC/D;GACE;EACF;AAGR,MAAM,iBAAiB;AAEvB,MAAM,qBAAiC,IAAI,MAAM,EAAE,CAAC,KAAK,EAAE,CAAC,UAAU,EAAE,CAAC;AACzE,MAAM,gBAA4B,IAAI,MAAM,EAAE,CAC3C,KAAK,EAAE,CACP,UAAU,aAAa,OAAO,OAAO,QAAQ,YAAY,EAAE,eAAe,CAAC;AAE9E,MAAa,mBAAoD,EAC/D,WACA,GAAG,YACC;CACJ,MAAM,CAAC,YAAY,iBAAiB,SAAS,mBAAmB;CAChE,MAAM,CAAC,WAAW,YAAY,WAAW,cAAc;AAEvD,iBAAgB;AACd,gBAAc,cAAc;IAC3B,EAAE,CAAC;AAEN,QACE,oBAAC;EACC,WAAW,GACT,mIACA,UACD;EACD,GAAI;YAEJ,qBAAC;GAAI,WAAU;;IACb,oBAAC;KAAc,YAAY;KAAW,WAAU;MAAsB;IACtE,oBAAC;KAAc,YAAY;KAAY,WAAU;MAAsB;IACvE,oBAAC;KAAc,YAAY;KAAW,WAAU;MAAsB;IACtE,oBAAC;KAAc,YAAY;KAAY,WAAU;MAAsB;;IACnE;GACE;;AAId,MAAa,sBAA6C,EAAE,eAC1D,8CACE,oBAAC;CAAI,WAAU;WACb,oBAAC,mBAAgB,WAAU,aAAa;EACpC,EACL,YACA"}

package/dist/esm/components/Modal/Modal.mjs

@@ -111,7 +111,7 @@ const MotionModal = motion.create(Container);
 * @param props - Modal component props
 * @returns JSX element rendered via createPortal
 */
-const Modal = ({ children, isOpen, container, disableScroll = true, onClose, hasCloseButton = false, title, size = ModalSize.MD, className, isScrollable = false, padding = "none", ...props }) => {
+const Modal = ({ children, isOpen, container, onClose, hasCloseButton = false, title, size = ModalSize.MD, className, isScrollable = false, disableScroll = true, padding = "none", ...props }) => {
 	const containerElement = useGetElementOrWindow(container);
 	useScrollBlockage({
 		key: "modal",

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.mjs","names":["m"],"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { useGetElementOrWindow, useScrollBlockage } from '@hooks/index';\nimport { cn } from '@utils/cn';\nimport { cva } from 'class-variance-authority';\nimport { motion as m } from 'framer-motion';\nimport { X } from 'lucide-react';\nimport { type FC, type ReactNode, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { Container, type ContainerProps } from '../Container';\nimport { H3 } from '../Headers';\n\n/**\n * Enumeration of available modal sizes\n */\nexport enum ModalSize {\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  UNSET = 'unset',\n}\n\ntype ModalProps = {\n  children: ReactNode;\n  isOpen: boolean;\n  onClose?: () => void;\n  container?: HTMLElement;\n  disableScroll?: boolean;\n  hasCloseButton?: boolean;\n  title?: ReactNode;\n  size?: ModalSize | `${ModalSize}`;\n  /**\n   * Defines if the modal content area is scrollable.\n   */\n  isScrollable?: boolean | 'x' | 'y';\n} & Pick<\n  ContainerProps,\n  | 'className'\n  | 'transparency'\n  | 'border'\n  | 'background'\n  | 'roundedSize'\n  | 'borderColor'\n  | 'padding'\n  | 'separator'\n  | 'gap'\n>;\n\nconst modalVariants = cva(\n  'flex cursor-default flex-col overflow-hidden shadow-sm',\n  {\n    variants: {\n      size: {\n        sm: 'h-auto max-h-[30vh] w-[95vw] max-w-xl',\n        md: 'h-auto max-h-[50vh] w-[95vw] max-w-xl',\n        lg: 'h-auto max-h-[70vh] w-[95vw] max-w-2xl',\n        xl: 'h-auto max-h-[95vh] w-[95vw] max-w-6xl',\n        unset: 'h-auto max-h-[95vh] w-[95vw]',\n      },\n    },\n    defaultVariants: {\n      size: 'unset',\n    },\n  }\n);\n\n// Mapped from Container/index.tsx to apply internally\nconst contentPaddingVariants = {\n  none: 'p-0',\n  sm: 'px-2 py-4',\n  md: 'px-4 py-6',\n  lg: 'px-6 py-8',\n  xl: 'px-8 py-10',\n  '2xl': 'px-10 py-12',\n};\n\nconst MotionModal = m.create(Container);\n\n/**\n * Modal Component\n *\n * A highly customizable modal dialog component with portal rendering, Framer Motion animations,\n * and comprehensive accessibility features. Supports multiple size variants and scroll management.\n *\n * Features:\n * - Portal rendering to any container element (defaults to document.body)\n * - Smooth animations with Framer Motion\n * - Size variants: SM, MD, LG, XL, UNSET with responsive sizing\n * - Optional title and close button\n * - Background scroll prevention\n * - Click-outside-to-close functionality\n * - Full accessibility support with ARIA attributes\n * - Keyboard navigation support (ESC to close)\n * - Extensible styling with Container props\n *\n * @example\n * Basic usage:\n * ```jsx\n * <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>\n *   <p>Modal content goes here</p>\n * </Modal>\n * ```\n *\n * @example\n * With title and close button:\n * ```jsx\n * <Modal\n *   isOpen={isOpen}\n *   onClose={onClose}\n *   title=\"Confirm Action\"\n *   hasCloseButton\n *   size={ModalSize.LG}\n * >\n *   <div>\n *     <p>Are you sure you want to continue?</p>\n *     <Button onClick={onConfirm}>Confirm</Button>\n *   </div>\n * </Modal>\n * ```\n *\n * @example\n * Custom container and styling:\n * ```jsx\n * <Modal\n *   isOpen={isOpen}\n *   onClose={onClose}\n *   container={customContainer}\n *   background=\"card\"\n *   padding=\"lg\"\n *   border=\"default\"\n * >\n *   Content with custom styling\n * </Modal>\n * ```\n *\n * Accessibility Notes:\n * - Modal receives focus when opened\n * - Background content is hidden from screen readers when modal is open\n * - ESC key closes modal (handled by browser for role=\"dialog\")\n * - Click outside modal closes it\n * - Close button has descriptive label for screen readers\n *\n * @param props - Modal component props\n * @returns JSX element rendered via createPortal\n */\nexport const Modal: FC<ModalProps> = ({\n  children,\n  isOpen,\n  container,\n  disableScroll = true,\n  onClose,\n  hasCloseButton = false,\n  title,\n  size = ModalSize.MD,\n  className,\n  isScrollable = false,\n  padding = 'none', // Extract padding here\n  ...props\n}) => {\n  const containerElement = useGetElementOrWindow(container);\n\n  useScrollBlockage({ key: 'modal', disableScroll: isOpen && disableScroll });\n\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === 'Escape' && isOpen && onClose) {\n        onClose();\n      }\n    };\n    document.addEventListener('keydown', handleEscape);\n    return () => {\n      document.removeEventListener('keydown', handleEscape);\n    };\n  }, [isOpen, onClose]);\n\n  if (!containerElement) return <></>;\n\n  const hasTitle = Boolean(title);\n\n  // Determine the class for the inner content based on the padding prop\n  const contentPaddingClass =\n    contentPaddingVariants[\n      (padding as keyof typeof contentPaddingVariants) || 'none'\n    ];\n\n  return createPortal(\n    <m.div\n      className=\"invisible fixed top-0 left-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-hidden bg-background/40 backdrop-blur\"\n      animate={isOpen ? 'visible' : 'invisible'}\n      variants={{\n        visible: {\n          opacity: 1,\n          visibility: 'visible',\n          transition: { duration: 0.1, when: 'beforeChildren' },\n        },\n        invisible: {\n          opacity: 0,\n          visibility: 'hidden',\n          transition: { duration: 0.1, when: 'afterChildren' },\n        },\n      }}\n      onClick={(e) => {\n        e.stopPropagation();\n        onClose?.();\n      }}\n      aria-hidden={!isOpen}\n    >\n      <MotionModal\n        onClick={(e) => e.stopPropagation()}\n        initial={{ scale: isOpen ? 0.5 : 1 }}\n        animate={{ scale: isOpen ? 1 : 0.5 }}\n        transition={{ duration: 0.3 }}\n        className={modalVariants({ size, className })}\n        role=\"dialog\"\n        aria-modal\n        roundedSize=\"4xl\"\n        // Force the outer container to have no padding so scrollbars hit the edge\n        padding=\"none\"\n        {...props}\n      >\n        {/* HEADER SECTION */}\n        <div\n          className={cn(\n            'relative flex-none px-4 pt-4',\n            hasCloseButton && hasTitle\n              ? `flex items-start`\n              : hasCloseButton\n                ? `flex justify-end`\n                : hasTitle\n                  ? `items-center`\n                  : `hidden`\n          )}\n        >\n          {hasTitle && (\n            <H3 className=\"mb-2 ml-1 flex items-center justify-center font-bold text-lg\">\n              {title}\n            </H3>\n          )}\n          {hasCloseButton && (\n            <Button\n              variant={ButtonVariant.HOVERABLE}\n              color={ButtonColor.TEXT}\n              label=\"Close modal\"\n              className=\"ml-auto\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onClose?.();\n              }}\n              Icon={X}\n              size={ButtonSize.ICON_MD}\n            />\n          )}\n        </div>\n\n        {/* SCROLLABLE WRAPPER - Full width, no padding */}\n        <div\n          className={cn(\n            'flex min-h-0 w-full flex-1 flex-col',\n            // Scrollbars will now appear at the very edge of this div (the modal edge)\n            isScrollable === true && 'overflow-auto',\n            isScrollable === 'y' && 'overflow-y-auto overflow-x-hidden',\n            isScrollable === 'x' && 'overflow-x-auto overflow-y-hidden',\n            !isScrollable && 'overflow-visible'\n          )}\n        >\n          {/* CONTENT PADDING WRAPPER */}\n          {/* We apply the padding class here, effectively putting content inside the scroll area */}\n          <div className={cn('h-full w-full', contentPaddingClass)}>\n            {children}\n          </div>\n        </div>\n      </MotionModal>\n    </m.div>,\n    containerElement\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAgBA,IAAY,kDAAL;AACL;AACA;AACA;AACA;AACA;;;AA6BF,MAAM,gBAAgB,IACpB,0DACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,OAAO;EACR,EACF;CACD,iBAAiB,EACf,MAAM,SACP;CACF,CACF;AAGD,MAAM,yBAAyB;CAC7B,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACR;AAED,MAAM,cAAcA,OAAE,OAAO,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEvC,MAAa,SAAyB,EACpC,UACA,QACA,WACA,gBAAgB,MAChB,SACA,iBAAiB,OACjB,OACA,OAAO,UAAU,IACjB,WACA,eAAe,OACf,UAAU,QACV,GAAG,YACC;CACJ,MAAM,mBAAmB,sBAAsB,UAAU;AAEzD,mBAAkB;EAAE,KAAK;EAAS,eAAe,UAAU;EAAe,CAAC;AAE3E,iBAAgB;EACd,MAAM,gBAAgB,UAAyB;AAC7C,OAAI,MAAM,QAAQ,YAAY,UAAU,QACtC,UAAS;;AAGb,WAAS,iBAAiB,WAAW,aAAa;AAClD,eAAa;AACX,YAAS,oBAAoB,WAAW,aAAa;;IAEtD,CAAC,QAAQ,QAAQ,CAAC;AAErB,KAAI,CAAC,iBAAkB,QAAO,mCAAK;CAEnC,MAAM,WAAW,QAAQ,MAAM;CAG/B,MAAM,sBACJ,uBACG,WAAmD;AAGxD,QAAO,aACL,oBAACA,OAAE;EACD,WAAU;EACV,SAAS,SAAS,YAAY;EAC9B,UAAU;GACR,SAAS;IACP,SAAS;IACT,YAAY;IACZ,YAAY;KAAE,UAAU;KAAK,MAAM;KAAkB;IACtD;GACD,WAAW;IACT,SAAS;IACT,YAAY;IACZ,YAAY;KAAE,UAAU;KAAK,MAAM;KAAiB;IACrD;GACF;EACD,UAAU,MAAM;AACd,KAAE,iBAAiB;AACnB,cAAW;;EAEb,eAAa,CAAC;YAEd,qBAAC;GACC,UAAU,MAAM,EAAE,iBAAiB;GACnC,SAAS,EAAE,OAAO,SAAS,KAAM,GAAG;GACpC,SAAS,EAAE,OAAO,SAAS,IAAI,IAAK;GACpC,YAAY,EAAE,UAAU,IAAK;GAC7B,WAAW,cAAc;IAAE;IAAM;IAAW,CAAC;GAC7C,MAAK;GACL;GACA,aAAY;GAEZ,SAAQ;GACR,GAAI;cAGJ,qBAAC;IACC,WAAW,GACT,gCACA,kBAAkB,WACd,qBACA,iBACE,qBACA,WACE,iBACA,SACT;eAEA,YACC,oBAAC;KAAG,WAAU;eACX;MACE,EAEN,kBACC,oBAAC;KACC,SAAS,cAAc;KACvB,OAAO,YAAY;KACnB,OAAM;KACN,WAAU;KACV,UAAU,MAAM;AACd,QAAE,iBAAiB;AACnB,iBAAW;;KAEb,MAAM;KACN,MAAM,WAAW;MACjB;KAEA,EAGN,oBAAC;IACC,WAAW,GACT,uCAEA,iBAAiB,QAAQ,iBACzB,iBAAiB,OAAO,qCACxB,iBAAiB,OAAO,qCACxB,CAAC,gBAAgB,mBAClB;cAID,oBAAC;KAAI,WAAW,GAAG,iBAAiB,oBAAoB;KACrD;MACG;KACF;IACM;GACR,EACR,iBACD"}
+{"version":3,"file":"Modal.mjs","names":["m"],"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { useGetElementOrWindow, useScrollBlockage } from '@hooks/index';\nimport { cn } from '@utils/cn';\nimport { cva } from 'class-variance-authority';\nimport { motion as m } from 'framer-motion';\nimport { X } from 'lucide-react';\nimport { type FC, type ReactNode, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { Container, type ContainerProps } from '../Container';\nimport { H3 } from '../Headers';\n\n/**\n * Enumeration of available modal sizes\n */\nexport enum ModalSize {\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  UNSET = 'unset',\n}\n\ntype ModalProps = {\n  children: ReactNode;\n  isOpen: boolean;\n  onClose?: () => void;\n  container?: HTMLElement;\n  disableScroll?: boolean;\n  hasCloseButton?: boolean;\n  title?: ReactNode;\n  size?: ModalSize | `${ModalSize}`;\n  /**\n   * Defines if the modal content area is scrollable.\n   */\n  isScrollable?: boolean | 'x' | 'y';\n} & Pick<\n  ContainerProps,\n  | 'className'\n  | 'transparency'\n  | 'border'\n  | 'background'\n  | 'roundedSize'\n  | 'borderColor'\n  | 'padding'\n  | 'separator'\n  | 'gap'\n>;\n\nconst modalVariants = cva(\n  'flex cursor-default flex-col overflow-hidden shadow-sm',\n  {\n    variants: {\n      size: {\n        sm: 'h-auto max-h-[30vh] w-[95vw] max-w-xl',\n        md: 'h-auto max-h-[50vh] w-[95vw] max-w-xl',\n        lg: 'h-auto max-h-[70vh] w-[95vw] max-w-2xl',\n        xl: 'h-auto max-h-[95vh] w-[95vw] max-w-6xl',\n        unset: 'h-auto max-h-[95vh] w-[95vw]',\n      },\n    },\n    defaultVariants: {\n      size: 'unset',\n    },\n  }\n);\n\n// Mapped from Container/index.tsx to apply internally\nconst contentPaddingVariants = {\n  none: 'p-0',\n  sm: 'px-2 py-4',\n  md: 'px-4 py-6',\n  lg: 'px-6 py-8',\n  xl: 'px-8 py-10',\n  '2xl': 'px-10 py-12',\n};\n\nconst MotionModal = m.create(Container);\n\n/**\n * Modal Component\n *\n * A highly customizable modal dialog component with portal rendering, Framer Motion animations,\n * and comprehensive accessibility features. Supports multiple size variants and scroll management.\n *\n * Features:\n * - Portal rendering to any container element (defaults to document.body)\n * - Smooth animations with Framer Motion\n * - Size variants: SM, MD, LG, XL, UNSET with responsive sizing\n * - Optional title and close button\n * - Background scroll prevention\n * - Click-outside-to-close functionality\n * - Full accessibility support with ARIA attributes\n * - Keyboard navigation support (ESC to close)\n * - Extensible styling with Container props\n *\n * @example\n * Basic usage:\n * ```jsx\n * <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>\n *   <p>Modal content goes here</p>\n * </Modal>\n * ```\n *\n * @example\n * With title and close button:\n * ```jsx\n * <Modal\n *   isOpen={isOpen}\n *   onClose={onClose}\n *   title=\"Confirm Action\"\n *   hasCloseButton\n *   size={ModalSize.LG}\n * >\n *   <div>\n *     <p>Are you sure you want to continue?</p>\n *     <Button onClick={onConfirm}>Confirm</Button>\n *   </div>\n * </Modal>\n * ```\n *\n * @example\n * Custom container and styling:\n * ```jsx\n * <Modal\n *   isOpen={isOpen}\n *   onClose={onClose}\n *   container={customContainer}\n *   background=\"card\"\n *   padding=\"lg\"\n *   border=\"default\"\n * >\n *   Content with custom styling\n * </Modal>\n * ```\n *\n * Accessibility Notes:\n * - Modal receives focus when opened\n * - Background content is hidden from screen readers when modal is open\n * - ESC key closes modal (handled by browser for role=\"dialog\")\n * - Click outside modal closes it\n * - Close button has descriptive label for screen readers\n *\n * @param props - Modal component props\n * @returns JSX element rendered via createPortal\n */\nexport const Modal: FC<ModalProps> = ({\n  children,\n  isOpen,\n  container,\n  onClose,\n  hasCloseButton = false,\n  title,\n  size = ModalSize.MD,\n  className,\n  isScrollable = false, // Enable the scroll of the content\n  disableScroll = true, // Disable the scroll of the background\n  padding = 'none', // Extract padding here\n  ...props\n}) => {\n  const containerElement = useGetElementOrWindow(container);\n\n  useScrollBlockage({ key: 'modal', disableScroll: isOpen && disableScroll });\n\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === 'Escape' && isOpen && onClose) {\n        onClose();\n      }\n    };\n    document.addEventListener('keydown', handleEscape);\n    return () => {\n      document.removeEventListener('keydown', handleEscape);\n    };\n  }, [isOpen, onClose]);\n\n  if (!containerElement) return <></>;\n\n  const hasTitle = Boolean(title);\n\n  // Determine the class for the inner content based on the padding prop\n  const contentPaddingClass =\n    contentPaddingVariants[\n      (padding as keyof typeof contentPaddingVariants) || 'none'\n    ];\n\n  return createPortal(\n    <m.div\n      className=\"invisible fixed top-0 left-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-hidden bg-background/40 backdrop-blur\"\n      animate={isOpen ? 'visible' : 'invisible'}\n      variants={{\n        visible: {\n          opacity: 1,\n          visibility: 'visible',\n          transition: { duration: 0.1, when: 'beforeChildren' },\n        },\n        invisible: {\n          opacity: 0,\n          visibility: 'hidden',\n          transition: { duration: 0.1, when: 'afterChildren' },\n        },\n      }}\n      onClick={(e) => {\n        e.stopPropagation();\n        onClose?.();\n      }}\n      aria-hidden={!isOpen}\n    >\n      <MotionModal\n        onClick={(e) => e.stopPropagation()}\n        initial={{ scale: isOpen ? 0.5 : 1 }}\n        animate={{ scale: isOpen ? 1 : 0.5 }}\n        transition={{ duration: 0.3 }}\n        className={modalVariants({ size, className })}\n        role=\"dialog\"\n        aria-modal\n        roundedSize=\"4xl\"\n        // Force the outer container to have no padding so scrollbars hit the edge\n        padding=\"none\"\n        {...props}\n      >\n        {/* HEADER SECTION */}\n        <div\n          className={cn(\n            'relative flex-none px-4 pt-4',\n            hasCloseButton && hasTitle\n              ? `flex items-start`\n              : hasCloseButton\n                ? `flex justify-end`\n                : hasTitle\n                  ? `items-center`\n                  : `hidden`\n          )}\n        >\n          {hasTitle && (\n            <H3 className=\"mb-2 ml-1 flex items-center justify-center font-bold text-lg\">\n              {title}\n            </H3>\n          )}\n          {hasCloseButton && (\n            <Button\n              variant={ButtonVariant.HOVERABLE}\n              color={ButtonColor.TEXT}\n              label=\"Close modal\"\n              className=\"ml-auto\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onClose?.();\n              }}\n              Icon={X}\n              size={ButtonSize.ICON_MD}\n            />\n          )}\n        </div>\n\n        {/* SCROLLABLE WRAPPER - Full width, no padding */}\n        <div\n          className={cn(\n            'flex min-h-0 w-full flex-1 flex-col',\n            // Scrollbars will now appear at the very edge of this div (the modal edge)\n            isScrollable === true && 'overflow-auto',\n            isScrollable === 'y' && 'overflow-y-auto overflow-x-hidden',\n            isScrollable === 'x' && 'overflow-x-auto overflow-y-hidden',\n            !isScrollable && 'overflow-visible'\n          )}\n        >\n          {/* CONTENT PADDING WRAPPER */}\n          {/* We apply the padding class here, effectively putting content inside the scroll area */}\n          <div className={cn('h-full w-full', contentPaddingClass)}>\n            {children}\n          </div>\n        </div>\n      </MotionModal>\n    </m.div>,\n    containerElement\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAgBA,IAAY,kDAAL;AACL;AACA;AACA;AACA;AACA;;;AA6BF,MAAM,gBAAgB,IACpB,0DACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,OAAO;EACR,EACF;CACD,iBAAiB,EACf,MAAM,SACP;CACF,CACF;AAGD,MAAM,yBAAyB;CAC7B,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;CACR;AAED,MAAM,cAAcA,OAAE,OAAO,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEvC,MAAa,SAAyB,EACpC,UACA,QACA,WACA,SACA,iBAAiB,OACjB,OACA,OAAO,UAAU,IACjB,WACA,eAAe,OACf,gBAAgB,MAChB,UAAU,QACV,GAAG,YACC;CACJ,MAAM,mBAAmB,sBAAsB,UAAU;AAEzD,mBAAkB;EAAE,KAAK;EAAS,eAAe,UAAU;EAAe,CAAC;AAE3E,iBAAgB;EACd,MAAM,gBAAgB,UAAyB;AAC7C,OAAI,MAAM,QAAQ,YAAY,UAAU,QACtC,UAAS;;AAGb,WAAS,iBAAiB,WAAW,aAAa;AAClD,eAAa;AACX,YAAS,oBAAoB,WAAW,aAAa;;IAEtD,CAAC,QAAQ,QAAQ,CAAC;AAErB,KAAI,CAAC,iBAAkB,QAAO,mCAAK;CAEnC,MAAM,WAAW,QAAQ,MAAM;CAG/B,MAAM,sBACJ,uBACG,WAAmD;AAGxD,QAAO,aACL,oBAACA,OAAE;EACD,WAAU;EACV,SAAS,SAAS,YAAY;EAC9B,UAAU;GACR,SAAS;IACP,SAAS;IACT,YAAY;IACZ,YAAY;KAAE,UAAU;KAAK,MAAM;KAAkB;IACtD;GACD,WAAW;IACT,SAAS;IACT,YAAY;IACZ,YAAY;KAAE,UAAU;KAAK,MAAM;KAAiB;IACrD;GACF;EACD,UAAU,MAAM;AACd,KAAE,iBAAiB;AACnB,cAAW;;EAEb,eAAa,CAAC;YAEd,qBAAC;GACC,UAAU,MAAM,EAAE,iBAAiB;GACnC,SAAS,EAAE,OAAO,SAAS,KAAM,GAAG;GACpC,SAAS,EAAE,OAAO,SAAS,IAAI,IAAK;GACpC,YAAY,EAAE,UAAU,IAAK;GAC7B,WAAW,cAAc;IAAE;IAAM;IAAW,CAAC;GAC7C,MAAK;GACL;GACA,aAAY;GAEZ,SAAQ;GACR,GAAI;cAGJ,qBAAC;IACC,WAAW,GACT,gCACA,kBAAkB,WACd,qBACA,iBACE,qBACA,WACE,iBACA,SACT;eAEA,YACC,oBAAC;KAAG,WAAU;eACX;MACE,EAEN,kBACC,oBAAC;KACC,SAAS,cAAc;KACvB,OAAO,YAAY;KACnB,OAAM;KACN,WAAU;KACV,UAAU,MAAM;AACd,QAAE,iBAAiB;AACnB,iBAAW;;KAEb,MAAM;KACN,MAAM,WAAW;MACjB;KAEA,EAGN,oBAAC;IACC,WAAW,GACT,uCAEA,iBAAiB,QAAQ,iBACzB,iBAAiB,OAAO,qCACxB,iBAAiB,OAAO,qCACxB,CAAC,gBAAgB,mBAClB;cAID,oBAAC;KAAI,WAAW,GAAG,iBAAiB,oBAAoB;KACrD;MACG;KACF;IACM;GACR,EACR,iBACD"}

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

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import * as class_variance_authority_types0 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/Badge/index.d.ts
@@ -47,7 +47,7 @@ declare const badgeVariants: (props?: {
   color?: BadgeColor;
   variant?: BadgeVariant;
   size?: BadgeSize;
-} & class_variance_authority_types0.ClassProp) => string;
+} & class_variance_authority_types9.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_types379 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_types379.TypedNodeModel<_intlayer_types379.NodeType.Translation, {
       en: string;
       fr: string;
       es: string;
@@ -24,7 +24,7 @@ declare const breadCrumbContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types0.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types379.NodeType.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,iCA4BS,wCAAA"}
+{"version":3,"file":"breadcrumb.content.d.ts","names":[],"sources":["../../../../src/components/Breadcrumb/breadcrumb.content.ts"],"sourcesContent":[],"mappings":";;;cAEa;;;IAAA,SAAA,mCA4BS,0CAAA"}

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

@@ -1,5 +1,5 @@
 import { CSSProperties, HTMLAttributes, RefObject } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime18 from "react/jsx-runtime";
 
 //#region src/components/Browser/Browser.d.ts
 type BrowserProps = {
@@ -24,7 +24,7 @@ declare const Browser: ({
   ref,
   domainRestriction,
   ...props
-}: BrowserProps) => react_jsx_runtime0.JSX.Element;
+}: BrowserProps) => react_jsx_runtime18.JSX.Element;
 //#endregion
 export { Browser, BrowserProps };
 //# sourceMappingURL=Browser.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Browser.d.ts","names":[],"sources":["../../../../src/components/Browser/Browser.tsx"],"sourcesContent":[],"mappings":";;;;KAkBY,YAAA;;;EAAA,SAAA,CAAA,EAAA,MAAY;EAId,KAAA,CAAA,EAAA,aAAA;EAIQ,IAAA,CAAA,EAAA,IAAA,GAAA,IAAA,GAAA,IAAA,GAAA,IAAA,GAAA,IAAA;EAAV,YAAA,CAAA,EAAA,MAAA;EAEW,OAAA,CAAA,EAAA,MAAA;EAAf,GAAA,CAAA,EAFI,SAEJ,CAFc,iBAEd,GAAA,IAAA,CAAA;EAAc,iBAAA,CAAA,EAAA,MAAA;AAElB,CAAA,GAFI,cAqVH,CArVkB,iBAqVlB,CAAA;AAnVuB,cAAX,OAAW,EAAA,CAAA;EAAA,UAAA;EAAA,IAAA;EAAA,SAAA;EAAA,KAAA;EAAA,IAAA;EAAA,YAAA,EAAA,SAAA;EAAA,OAAA;EAAA,GAAA;EAAA,iBAAA;EAAA,GAAA;AAAA,CAAA,EAWrB,YAXqB,EAAA,GAWT,kBAAA,CAAA,GAAA,CAAA,OAXS"}
+{"version":3,"file":"Browser.d.ts","names":[],"sources":["../../../../src/components/Browser/Browser.tsx"],"sourcesContent":[],"mappings":";;;;KAkBY,YAAA;;;EAAA,SAAA,CAAA,EAAA,MAAY;EAId,KAAA,CAAA,EAAA,aAAA;EAIQ,IAAA,CAAA,EAAA,IAAA,GAAA,IAAA,GAAA,IAAA,GAAA,IAAA,GAAA,IAAA;EAAV,YAAA,CAAA,EAAA,MAAA;EAEW,OAAA,CAAA,EAAA,MAAA;EAAf,GAAA,CAAA,EAFI,SAEJ,CAFc,iBAEd,GAAA,IAAA,CAAA;EAAc,iBAAA,CAAA,EAAA,MAAA;AAElB,CAAA,GAFI,cAqVH,CArVkB,iBAqVlB,CAAA;AAnVuB,cAAX,OAAW,EAAA,CAAA;EAAA,UAAA;EAAA,IAAA;EAAA,SAAA;EAAA,KAAA;EAAA,IAAA;EAAA,YAAA,EAAA,SAAA;EAAA,OAAA;EAAA,GAAA;EAAA,iBAAA;EAAA,GAAA;AAAA,CAAA,EAWrB,YAXqB,EAAA,GAWT,mBAAA,CAAA,GAAA,CAAA,OAXS"}

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

@@ -1,10 +1,10 @@
-import * as _intlayer_types2 from "@intlayer/types";
+import * as _intlayer_types331 from "@intlayer/types";
 
 //#region src/components/Browser/browser.content.d.ts
 declare const browserContent: {
   key: string;
   content: {
-    ariaLabel: _intlayer_types2.TypedNodeModel<_intlayer_types2.NodeType.Translation, {
+    ariaLabel: _intlayer_types331.TypedNodeModel<_intlayer_types331.NodeType.Translation, {
       en: string;
       'en-GB': string;
       fr: string;
@@ -24,7 +24,7 @@ declare const browserContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types2.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types331.NodeType.Translation;
     } & {
       translation: {
         en: string;
@@ -47,7 +47,7 @@ declare const browserContent: {
         uk: string;
       };
     }>;
-    urlLabel: _intlayer_types2.TypedNodeModel<_intlayer_types2.NodeType.Translation, {
+    urlLabel: _intlayer_types331.TypedNodeModel<_intlayer_types331.NodeType.Translation, {
       en: string;
       'en-GB': string;
       fr: string;
@@ -67,7 +67,7 @@ declare const browserContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types2.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types331.NodeType.Translation;
     } & {
       translation: {
         en: string;
@@ -91,7 +91,7 @@ declare const browserContent: {
       };
     }>;
     urlPlaceholder: string;
-    errorMessage: _intlayer_types2.TypedNodeModel<_intlayer_types2.NodeType.Translation, {
+    errorMessage: _intlayer_types331.TypedNodeModel<_intlayer_types331.NodeType.Translation, {
       en: string;
       'en-GB': string;
       fr: string;
@@ -111,7 +111,7 @@ declare const browserContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types2.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types331.NodeType.Translation;
     } & {
       translation: {
         en: string;
@@ -134,7 +134,7 @@ declare const browserContent: {
         uk: string;
       };
     }>;
-    domainRestrictionError: _intlayer_types2.TypedNodeModel<_intlayer_types2.NodeType.Translation, {
+    domainRestrictionError: _intlayer_types331.TypedNodeModel<_intlayer_types331.NodeType.Translation, {
       en: string;
       'en-GB': string;
       fr: string;
@@ -154,7 +154,7 @@ declare const browserContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types2.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types331.NodeType.Translation;
     } & {
       translation: {
         en: string;
@@ -177,7 +177,7 @@ declare const browserContent: {
         uk: string;
       };
     }>;
-    backButtonLabel: _intlayer_types2.TypedNodeModel<_intlayer_types2.NodeType.Translation, {
+    backButtonLabel: _intlayer_types331.TypedNodeModel<_intlayer_types331.NodeType.Translation, {
       en: string;
       'en-GB': string;
       fr: string;
@@ -197,7 +197,7 @@ declare const browserContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types2.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types331.NodeType.Translation;
     } & {
       translation: {
         en: string;
@@ -220,7 +220,7 @@ declare const browserContent: {
         uk: string;
       };
     }>;
-    forwardButtonLabel: _intlayer_types2.TypedNodeModel<_intlayer_types2.NodeType.Translation, {
+    forwardButtonLabel: _intlayer_types331.TypedNodeModel<_intlayer_types331.NodeType.Translation, {
       en: string;
       'en-GB': string;
       fr: string;
@@ -240,7 +240,7 @@ declare const browserContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types2.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types331.NodeType.Translation;
     } & {
       translation: {
         en: string;
@@ -263,7 +263,7 @@ declare const browserContent: {
         uk: string;
       };
     }>;
-    reloadButtonTitle: _intlayer_types2.TypedNodeModel<_intlayer_types2.NodeType.Translation, {
+    reloadButtonTitle: _intlayer_types331.TypedNodeModel<_intlayer_types331.NodeType.Translation, {
       en: string;
       'en-GB': string;
       fr: string;
@@ -283,7 +283,7 @@ declare const browserContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types2.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types331.NodeType.Translation;
     } & {
       translation: {
         en: string;
@@ -306,7 +306,7 @@ declare const browserContent: {
         uk: string;
       };
     }>;
-    iframeTitle: _intlayer_types2.TypedNodeModel<_intlayer_types2.NodeType.Translation, {
+    iframeTitle: _intlayer_types331.TypedNodeModel<_intlayer_types331.NodeType.Translation, {
       en: string;
       'en-GB': string;
       fr: string;
@@ -326,7 +326,7 @@ declare const browserContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types2.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types331.NodeType.Translation;
     } & {
       translation: {
         en: string;

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

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

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

@@ -1,5 +1,5 @@
 import { ButtonHTMLAttributes, DetailedHTMLProps, FC } from "react";
-import * as class_variance_authority_types1 from "class-variance-authority/types";
+import * as class_variance_authority_types8 from "class-variance-authority/types";
 import { VariantProps } from "class-variance-authority";
 import { LucideIcon } from "lucide-react";
 
@@ -60,13 +60,13 @@ declare enum ButtonTextAlign {
  * Enhanced button variants with improved accessibility and focus states
  */
 declare const buttonVariants: (props?: {
-  size?: "sm" | "md" | "lg" | "xl" | "icon-sm" | "icon-md" | "icon-lg" | "icon-xl";
-  color?: "primary" | "secondary" | "destructive" | "neutral" | "card" | "light" | "dark" | "text" | "current" | "text-inverse" | "error" | "success" | "custom";
-  roundedSize?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "4xl" | "5xl" | "full";
-  variant?: "default" | "none" | "outline" | "link" | "invisible-link" | "hoverable" | "fade" | "input";
+  size?: "md" | "sm" | "lg" | "xl" | "icon-sm" | "icon-md" | "icon-lg" | "icon-xl";
+  color?: "error" | "success" | "custom" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "text" | "text-inverse" | "card" | "current";
+  roundedSize?: "md" | "sm" | "lg" | "none" | "xl" | "2xl" | "3xl" | "full" | "4xl" | "5xl";
+  variant?: "default" | "input" | "invisible-link" | "hoverable" | "none" | "outline" | "link" | "fade";
   textAlign?: "left" | "center" | "right";
   isFullWidth?: boolean;
-} & class_variance_authority_types1.ClassProp) => string;
+} & class_variance_authority_types8.ClassProp) => string;
 /**
  * Enhanced Button component props with comprehensive type safety and accessibility features
  */

package/dist/types/components/Carousel/index.content.d.ts

@@ -1,11 +1,11 @@
-import * as _intlayer_types26 from "@intlayer/types";
-import * as _intlayer_core0 from "@intlayer/core";
+import * as _intlayer_types370 from "@intlayer/types";
+import * as _intlayer_core1 from "@intlayer/core";
 
 //#region src/components/Carousel/index.content.d.ts
 declare const carouselContent: {
   key: string;
   content: {
-    goToSlide: _intlayer_core0.InsertionContent<_intlayer_types26.TypedNodeModel<_intlayer_types26.NodeType.Translation, {
+    goToSlide: _intlayer_core1.InsertionContent<_intlayer_types370.TypedNodeModel<_intlayer_types370.NodeType.Translation, {
       ar: string;
       de: string;
       en: string;
@@ -25,7 +25,7 @@ declare const carouselContent: {
       vi: string;
       zh: string;
     }, {
-      nodeType: _intlayer_types26.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types370.NodeType.Translation;
     } & {
       translation: {
         ar: string;
@@ -48,7 +48,7 @@ declare const carouselContent: {
         zh: string;
       };
     }>>;
-    previousSlide: _intlayer_types26.TypedNodeModel<_intlayer_types26.NodeType.Translation, {
+    previousSlide: _intlayer_types370.TypedNodeModel<_intlayer_types370.NodeType.Translation, {
       en: string;
       'en-GB': string;
       ru: string;
@@ -68,7 +68,7 @@ declare const carouselContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types26.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types370.NodeType.Translation;
     } & {
       translation: {
         en: string;
@@ -91,7 +91,7 @@ declare const carouselContent: {
         uk: string;
       };
     }>;
-    nextSlide: _intlayer_types26.TypedNodeModel<_intlayer_types26.NodeType.Translation, {
+    nextSlide: _intlayer_types370.TypedNodeModel<_intlayer_types370.NodeType.Translation, {
       en: string;
       'en-GB': string;
       ru: string;
@@ -111,7 +111,7 @@ declare const carouselContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types26.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types370.NodeType.Translation;
     } & {
       translation: {
         en: string;

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

@@ -1,5 +1,5 @@
 import { FC, HTMLAttributes, ReactNode } from "react";
-import * as class_variance_authority_types0 from "class-variance-authority/types";
+import * as class_variance_authority_types7 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?: "sm" | "md" | "lg" | "xl" | "full";
   variant?: "default" | "dark" | "ghost" | "outlined";
   spacing?: "sm" | "md" | "lg" | "none" | "auto";
-} & class_variance_authority_types0.ClassProp) => string;
+} & class_variance_authority_types7.ClassProp) => string;
 interface CollapsibleTableProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>, VariantProps<typeof collapsibleTableVariants> {
   /** Table title displayed in the header */
   title: string;

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

@@ -1,6 +1,6 @@
-import * as react0 from "react";
+import * as react5 from "react";
 import { ComponentProps, FC, HTMLAttributes } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime13 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<react0.DetailedHTMLProps<react0.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof react0.InputHTMLAttributes<HTMLInputElement>> & {
+  Input: FC<Omit<Pick<Pick<react5.DetailedHTMLProps<react5.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof react5.InputHTMLAttributes<HTMLInputElement>> & {
     ref?: React.Ref<HTMLInputElement>;
   } & {
     asChild?: boolean;
-  }, "key" | "asChild" | keyof react0.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
+  }, "key" | "asChild" | keyof react5.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
     value?: string;
     onValueChange?: (search: string) => void;
-  } & react0.RefAttributes<HTMLInputElement>>;
+  } & react5.RefAttributes<HTMLInputElement>>;
   List: FC<{
     children?: React.ReactNode;
-  } & Pick<Pick<react0.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
+  } & Pick<Pick<react5.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;
-  } & react0.RefAttributes<HTMLDivElement>>;
+  } & react5.RefAttributes<HTMLDivElement>>;
   Empty: FC<{
     children?: React.ReactNode;
-  } & Pick<Pick<react0.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
+  } & Pick<Pick<react5.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HTMLAttributes<HTMLDivElement> | "key"> & {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild"> & react0.RefAttributes<HTMLDivElement>>;
+  }, keyof HTMLAttributes<HTMLDivElement> | "key" | "asChild"> & react5.RefAttributes<HTMLDivElement>>;
   Group: FC<{
     children?: React.ReactNode;
-  } & Omit<Pick<Pick<react0.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
+  } & Omit<Pick<Pick<react5.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;
-  } & react0.RefAttributes<HTMLDivElement>>;
-  Separator: FC<Pick<Pick<react0.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
+  } & react5.RefAttributes<HTMLDivElement>>;
+  Separator: FC<Pick<Pick<react5.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;
-  } & react0.RefAttributes<HTMLDivElement>>;
+  } & react5.RefAttributes<HTMLDivElement>>;
   Item: FC<{
     children?: React.ReactNode;
-  } & Omit<Pick<Pick<react0.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
+  } & Omit<Pick<Pick<react5.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof HTMLAttributes<HTMLDivElement> | "key"> & {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
+  }, keyof HTMLAttributes<HTMLDivElement> | "key" | "asChild">, "onSelect" | "disabled" | "value"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;
     keywords?: string[];
     forceMount?: boolean;
-  } & react0.RefAttributes<HTMLDivElement>>;
+  } & react5.RefAttributes<HTMLDivElement>>;
   Shortcut: ({
     className,
     ...props
-  }: HTMLAttributes<HTMLSpanElement>) => react_jsx_runtime0.JSX.Element;
+  }: HTMLAttributes<HTMLSpanElement>) => react_jsx_runtime13.JSX.Element;
   propTypes?: any;
   displayName?: string | undefined;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/Command/index.tsx"],"sourcesContent":[],"mappings":";;;;;;;cAaa,aAAa,GAAG,sBAAsB;;;;AAAnD;;;;;AAuHA;;;;;;;;;cAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA7BV,eAAe,qBAAgB,kBAAA,CAAA,GAAA,CAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/Command/index.tsx"],"sourcesContent":[],"mappings":";;;;;;;cAaa,aAAa,GAAG,sBAAsB;;;;AAAnD;;;;;AAuHA;;;;;;;;;cAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA7BV,eAAe,qBAAgB,mBAAA,CAAA,GAAA,CAAA"}

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

@@ -1,5 +1,5 @@
 import { DetailedHTMLProps, FC, HTMLAttributes, PropsWithChildren } from "react";
-import * as class_variance_authority_types2 from "class-variance-authority/types";
+import * as class_variance_authority_types14 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?: "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "none" | "3xl" | "4xl";
-  transparency?: "sm" | "md" | "lg" | "xl" | "full" | "none";
-  padding?: "sm" | "md" | "lg" | "xl" | "2xl" | "none";
+  roundedSize?: "sm" | "md" | "lg" | "none" | "xl" | "2xl" | "3xl" | "full" | "4xl";
+  transparency?: "sm" | "md" | "lg" | "none" | "xl" | "full";
+  padding?: "sm" | "md" | "lg" | "none" | "xl" | "2xl";
   separator?: "without" | "x" | "y" | "both";
-  border?: "none" | "with";
-  borderColor?: "primary" | "secondary" | "neutral" | "card" | "text" | "error" | "success" | "warning";
-  background?: "none" | "hoverable" | "with";
-  gap?: "sm" | "md" | "lg" | "xl" | "2xl" | "none";
-} & class_variance_authority_types2.ClassProp) => string;
+  border?: "with" | "none";
+  borderColor?: "error" | "success" | "text" | "primary" | "secondary" | "neutral" | "warning" | "card";
+  background?: "with" | "hoverable" | "none";
+  gap?: "sm" | "md" | "lg" | "none" | "xl" | "2xl";
+} & class_variance_authority_types14.ClassProp) => string;
 /** Available rounded corner sizes for the container */
 declare enum ContainerRoundedSize {
   NONE = "none",
@@ -60,6 +60,7 @@ declare enum ContainerBorderColor {
   PRIMARY = "primary",
   SECONDARY = "secondary",
   NEUTRAL = "neutral",
+  CARD = "card",
   TEXT = "text",
   ERROR = "error",
   WARNING = "warning",