@intlayer/design-system 7.5.10 → 7.5.12

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

@@ -3,8 +3,8 @@
 import { cn } from "../../utils/cn.mjs";
 import { Button, ButtonColor, ButtonVariant } from "../Button/Button.mjs";
 import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
-import { ChevronDown } from "lucide-react";
 import { useId, useState } from "react";
+import { ChevronDown } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/Accordion/Accordion.tsx

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

@@ -1,7 +1,7 @@
 import { cn } from "../../utils/cn.mjs";
 import { Loader } from "../Loader/index.mjs";
-import { User } from "lucide-react";
 import { useMemo } from "react";
+import { User } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/Avatar/index.tsx

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

@@ -3,9 +3,9 @@
 import { cn } from "../../utils/cn.mjs";
 import { Button, ButtonVariant } from "../Button/Button.mjs";
 import { Link, LinkColor } from "../Link/Link.mjs";
-import { ChevronRightIcon } from "lucide-react";
 import { Fragment, createElement } from "react";
 import { cva } from "class-variance-authority";
+import { ChevronRightIcon } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { getIntlayer } from "@intlayer/core";
 import { useIntlayer } from "react-intlayer";

package/dist/esm/components/Browser/Browser.mjs

@@ -3,8 +3,8 @@
 import { cn } from "../../utils/cn.mjs";
 import { Button } from "../Button/Button.mjs";
 import { Input, inputVariants } from "../Input/Input.mjs";
-import { ArrowLeft, ArrowRight, RotateCw } from "lucide-react";
 import { useEffect, useImperativeHandle, useRef, useState } from "react";
+import { ArrowLeft, ArrowRight, RotateCw } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useIntlayer } from "react-intlayer";
 

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

@@ -4,8 +4,8 @@ import { cn } from "../../utils/cn.mjs";
 import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
 import { KeyboardShortcut } from "../KeyboardShortcut/KeyboardShortcut.mjs";
 import { Popover } from "../Popover/dynamic.mjs";
-import { ChevronLeft, ChevronRight } from "lucide-react";
 import { Children, createContext, isValidElement, useContext, useEffect, useRef, useState } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useIntlayer } from "react-intlayer";
 

package/dist/esm/components/CollapsibleTable/CollapsibleTable.mjs

@@ -2,9 +2,9 @@
 
 import { cn } from "../../utils/cn.mjs";
 import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
-import { ChevronRight } from "lucide-react";
 import { useState } from "react";
 import { cva } from "class-variance-authority";
+import { ChevronRight } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/CollapsibleTable/CollapsibleTable.tsx

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

@@ -50,13 +50,14 @@ const containerVariants = cva("flex flex-col text-text backdrop-blur", {
 			primary: "border-primary",
 			secondary: "border-secondary",
 			neutral: "border-neutral",
+			card: "border-card",
 			text: "border-text",
 			error: "border-error",
 			warning: "border-warning",
 			success: "border-success"
 		},
 		background: {
-			none: "bg-inherit",
+			none: "",
 			hoverable: "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",
 			with: ""
 		},
@@ -77,7 +78,11 @@ const containerVariants = cva("flex flex-col text-text backdrop-blur", {
 		padding: "none",
 		separator: "without",
 		gap: "none"
-	}
+	},
+	compoundVariants: [{
+		background: "none",
+		class: "bg-transparent"
+	}]
 });
 /** Available rounded corner sizes for the container */
 let ContainerRoundedSize = /* @__PURE__ */ function(ContainerRoundedSize$1) {

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Container: FC<ContainerProps>"],"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-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    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      text: 'border-text',\n      error: 'border-error',\n      warning: 'border-warning',\n      success: 'border-success',\n    },\n    background: {\n      none: 'bg-inherit',\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});\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,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;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,MAAaA,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":["Container: FC<ContainerProps>"],"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-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    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,MAAaA,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/ContentEditor/ContentEditor.mjs

@@ -3,8 +3,8 @@
 import { cn } from "../../utils/cn.mjs";
 import { InputVariant } from "../Input/Input.mjs";
 import { AutoSizedTextArea } from "../TextArea/AutoSizeTextArea.mjs";
-import { Check, X } from "lucide-react";
 import { useState } from "react";
+import { Check, X } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/ContentEditor/ContentEditor.tsx

package/dist/esm/components/ContentEditor/ContentEditorInput.mjs

@@ -2,8 +2,8 @@
 
 import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
 import { Input, InputVariant } from "../Input/Input.mjs";
-import { Check, X } from "lucide-react";
 import { useEffect, useState } from "react";
+import { Check, X } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/ContentEditor/ContentEditorInput.tsx

package/dist/esm/components/ContentEditor/ContentEditorTextArea.mjs

@@ -1,10 +1,10 @@
 'use client';
 
+import { useUser } from "../../hooks/useUser/index.mjs";
 import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
 import { AutoCompleteTextarea } from "../TextArea/AutocompleteTextArea.mjs";
-import { useUser } from "../../hooks/useUser/index.mjs";
-import { Check, X } from "lucide-react";
 import { useEffect, useState } from "react";
+import { Check, X } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/ContentEditor/ContentEditorTextArea.tsx

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

@@ -1,8 +1,8 @@
 'use client';
 
 import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
-import { CopyCheckIcon, CopyIcon } from "lucide-react";
 import { useEffect, useState } from "react";
+import { CopyCheckIcon, CopyIcon } from "lucide-react";
 import { jsx } from "react/jsx-runtime";
 import { useIntlayer } from "react-intlayer";
 

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

@@ -1,8 +1,8 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
-import { CopyCheck, CopyIcon } from "lucide-react";
 import { useState } from "react";
+import { CopyCheck, CopyIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/CopyToClipboard/index.tsx

package/dist/esm/components/DictionaryEditor/DictionaryEditor.mjs

@@ -1,9 +1,9 @@
 'use client';
 
 import { NodeWrapper } from "./NodeWrapper/index.mjs";
+import { useEditedContent, useFocusUnmergedDictionary } from "@intlayer/editor-react";
 import { createElement } from "react";
 import { jsx } from "react/jsx-runtime";
-import { useEditedContent, useFocusUnmergedDictionary } from "@intlayer/editor-react";
 
 //#region src/components/DictionaryEditor/DictionaryEditor.tsx
 const DictionaryEditor = ({ dictionary, ...props }) => {

package/dist/esm/components/DictionaryEditor/NodeWrapper/FileWrapper.mjs

@@ -1,7 +1,7 @@
 import { StringWrapper } from "./StringWrapper.mjs";
+import { useEditedContent } from "@intlayer/editor-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { getContentNodeByKeyPath } from "@intlayer/core";
-import { useEditedContent } from "@intlayer/editor-react";
 import { NodeType } from "@intlayer/types";
 
 //#region src/components/DictionaryEditor/NodeWrapper/FileWrapper.tsx

package/dist/esm/components/DictionaryEditor/NodeWrapper/StringWrapper.mjs

@@ -1,8 +1,8 @@
 import { cn } from "../../../utils/cn.mjs";
 import { EditableFieldTextArea } from "../../EditableField/EditableFieldTextArea.mjs";
+import { useEditorLocale } from "@intlayer/editor-react";
 import { Fragment, jsx } from "react/jsx-runtime";
 import { getContentNodeByKeyPath } from "@intlayer/core";
-import { useEditorLocale } from "@intlayer/editor-react";
 
 //#region src/components/DictionaryEditor/NodeWrapper/StringWrapper.tsx
 const StringWrapper = ({ keyPath, section, editedContent, editedContentValue: editedContentValueProp, onContentChange, onFocusKeyPath, renderSection }) => {

package/dist/esm/components/DictionaryEditor/NodeWrapper/index.mjs

@@ -9,10 +9,10 @@ import { InsertionWrapper } from "./InsertionWrapper.mjs";
 import { MarkdownWrapper } from "./MarkdownWrapper.mjs";
 import { NestedObjectWrapper } from "./NestedObjectWrapper.mjs";
 import { TranslationWrapper } from "./TranslationWrapper.mjs";
+import { useEditorLocale } from "@intlayer/editor-react";
 import { memo, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { getContentNodeByKeyPath, getNodeType } from "@intlayer/core";
-import { useEditorLocale } from "@intlayer/editor-react";
 import { NodeType } from "@intlayer/types";
 
 //#region src/components/DictionaryEditor/NodeWrapper/index.tsx

package/dist/esm/components/DictionaryFieldEditor/ContentEditor.mjs

@@ -6,10 +6,10 @@ import { TextEditorContainer } from "./ContentEditorView/TextEditor.mjs";
 import { getIsEditableSection } from "./getIsEditableSection.mjs";
 import { KeyPathBreadcrumb } from "./KeyPathBreadcrumb.mjs";
 import { NavigationViewNode } from "./NavigationView/NavigationViewNode.mjs";
+import { useEditedContent, useEditorLocale, useFocusUnmergedDictionary } from "@intlayer/editor-react";
 import { useEffect } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { getContentNodeByKeyPath } from "@intlayer/core";
-import { useEditedContent, useEditorLocale, useFocusUnmergedDictionary } from "@intlayer/editor-react";
 
 //#region src/components/DictionaryFieldEditor/ContentEditor.tsx
 const ContentEditor = ({ dictionary, isDarkMode }) => {

package/dist/esm/components/DictionaryFieldEditor/ContentEditorView/TextEditor.mjs

@@ -1,9 +1,9 @@
 'use client';
 
+import { useAuditContentDeclarationField } from "../../../hooks/reactQuery.mjs";
 import { Container } from "../../Container/index.mjs";
 import { Button, ButtonColor, ButtonSize, ButtonTextAlign, ButtonVariant } from "../../Button/Button.mjs";
 import { InputVariant } from "../../Input/Input.mjs";
-import { useAuditContentDeclarationField } from "../../../hooks/reactQuery.mjs";
 import { SwitchSelector, SwitchSelectorColor, SwitchSelectorSize } from "../../SwitchSelector/index.mjs";
 import { useLocaleSwitcherContent } from "../../LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.mjs";
 import { ContentEditorInput as ContentEditorInput$1 } from "../../ContentEditor/ContentEditorInput.mjs";
@@ -12,12 +12,12 @@ import { Label } from "../../Label/index.mjs";
 import { MarkdownRenderer } from "../../MarkDownRender/MarkDownRender.mjs";
 import { renameKey } from "../../../utils/object.mjs";
 import { EnumKeyInput } from "../EnumKeyInput.mjs";
-import { Plus, Trash, WandSparkles } from "lucide-react";
+import { useConfiguration, useEditedContent } from "@intlayer/editor-react";
 import { Fragment, useState } from "react";
+import { Plus, Trash, WandSparkles } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { getEmptyNode, getLocaleName, getNodeType } from "@intlayer/core";
 import { useIntlayer, useLocale } from "react-intlayer";
-import { useConfiguration, useEditedContent } from "@intlayer/editor-react";
 import { NodeType } from "@intlayer/types";
 
 //#region src/components/DictionaryFieldEditor/ContentEditorView/TextEditor.tsx

package/dist/esm/components/DictionaryFieldEditor/DictionaryCreationForm/DictionaryCreationForm.mjs

@@ -1,8 +1,8 @@
 'use client';
 
-import { ButtonColor } from "../../Button/Button.mjs";
 import { useSession } from "../../../hooks/useAuth/useSession.mjs";
 import { useAddDictionary, useGetProjects } from "../../../hooks/reactQuery.mjs";
+import { ButtonColor } from "../../Button/Button.mjs";
 import { MultiSelect } from "../../Select/Multiselect.mjs";
 import { useForm } from "../../Form/FormBase.mjs";
 import { Form } from "../../Form/Form.mjs";

package/dist/esm/components/DictionaryFieldEditor/DictionaryDetails/DictionaryDetailsForm.mjs

@@ -1,19 +1,19 @@
 'use client';
 
+import { useSession } from "../../../hooks/useAuth/useSession.mjs";
+import { useAuditContentDeclarationMetadata, useGetProjects, useGetTags } from "../../../hooks/reactQuery.mjs";
 import { Container } from "../../Container/index.mjs";
 import { Loader } from "../../Loader/index.mjs";
 import { ButtonColor, ButtonSize, ButtonVariant } from "../../Button/Button.mjs";
-import { useSession } from "../../../hooks/useAuth/useSession.mjs";
-import { useAuditContentDeclarationMetadata, useGetProjects, useGetTags } from "../../../hooks/reactQuery.mjs";
 import { MultiSelect } from "../../Select/Multiselect.mjs";
 import { useForm } from "../../Form/FormBase.mjs";
 import { Form } from "../../Form/Form.mjs";
 import { useDictionaryDetailsSchema } from "./useDictionaryDetailsSchema.mjs";
-import { WandSparkles } from "lucide-react";
+import { useEditedContent } from "@intlayer/editor-react";
 import { useEffect } from "react";
+import { WandSparkles } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useIntlayer } from "react-intlayer";
-import { useEditedContent } from "@intlayer/editor-react";
 
 //#region src/components/DictionaryFieldEditor/DictionaryDetails/DictionaryDetailsForm.tsx
 const DictionaryDetailsForm = ({ dictionary }) => {

package/dist/esm/components/DictionaryFieldEditor/DictionaryFieldEditor.mjs

@@ -8,11 +8,11 @@ import { DictionaryDetailsForm } from "./DictionaryDetails/DictionaryDetailsForm
 import { JSONEditor } from "./JSONEditor.mjs";
 import { SaveForm } from "./SaveForm/SaveForm.mjs";
 import { StructureEditor } from "./StructureEditor.mjs";
-import { ArrowLeft } from "lucide-react";
+import { useConfiguration, useDictionariesRecordActions, useFocusUnmergedDictionary } from "@intlayer/editor-react";
 import { useEffect, useState } from "react";
+import { ArrowLeft } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useIntlayer } from "react-intlayer";
-import { useConfiguration, useDictionariesRecordActions, useFocusUnmergedDictionary } from "@intlayer/editor-react";
 
 //#region src/components/DictionaryFieldEditor/DictionaryFieldEditor.tsx
 var EditorViewType = /* @__PURE__ */ function(EditorViewType$1) {

package/dist/esm/components/DictionaryFieldEditor/JSONEditor.mjs

@@ -1,8 +1,8 @@
 import { Container } from "../Container/index.mjs";
 import { MonacoCode } from "../IDE/MonacoCode.mjs";
+import { useEditedContent } from "@intlayer/editor-react";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-import { useEditedContent } from "@intlayer/editor-react";
 
 //#region src/components/DictionaryFieldEditor/JSONEditor.tsx
 const JSONEditor = ({ dictionary, isDarkMode }) => {

package/dist/esm/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.mjs

@@ -1,13 +1,13 @@
 import { Button, ButtonColor, ButtonTextAlign, ButtonVariant } from "../../Button/Button.mjs";
 import { Accordion } from "../../Accordion/Accordion.mjs";
 import { getIsEditableSection } from "../getIsEditableSection.mjs";
+import { useEditedContentActions, useEditorLocale, useFocusUnmergedDictionary } from "@intlayer/editor-react";
+import configuration from "@intlayer/config/built";
 import { ChevronRight, Plus } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { getContentNodeByKeyPath, getEmptyNode, getNodeType, isSameKeyPath } from "@intlayer/core";
 import { useIntlayer } from "react-intlayer";
-import { useEditedContentActions, useEditorLocale, useFocusUnmergedDictionary } from "@intlayer/editor-react";
 import { NodeType } from "@intlayer/types";
-import configuration from "@intlayer/config/built";
 import { camelCaseToSentence } from "@intlayer/config/client";
 
 //#region src/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.tsx

package/dist/esm/components/DictionaryFieldEditor/SaveForm/SaveForm.mjs

@@ -1,16 +1,16 @@
 'use client';
 
-import { cn } from "../../../utils/cn.mjs";
-import { ButtonColor, ButtonVariant } from "../../Button/Button.mjs";
 import { useAuth } from "../../../hooks/useAuth/useAuth.mjs";
 import { useDeleteDictionary, usePushDictionaries, useWriteDictionary } from "../../../hooks/reactQuery.mjs";
+import { cn } from "../../../utils/cn.mjs";
+import { ButtonColor, ButtonVariant } from "../../Button/Button.mjs";
 import { Modal, ModalSize } from "../../Modal/Modal.mjs";
 import { Form } from "../../Form/Form.mjs";
-import { ArrowUpFromLine, Download, RotateCcw, Save, Trash } from "lucide-react";
+import { useDictionariesRecordActions, useEditedContent } from "@intlayer/editor-react";
 import { useState } from "react";
+import { ArrowUpFromLine, Download, RotateCcw, Save, Trash } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useIntlayer } from "react-intlayer";
-import { useDictionariesRecordActions, useEditedContent } from "@intlayer/editor-react";
 
 //#region src/components/DictionaryFieldEditor/SaveForm/SaveForm.tsx
 const SaveForm = ({ dictionary, mode, className, onDelete, onSave, ...props }) => {

package/dist/esm/components/DictionaryFieldEditor/StructureEditor.mjs

@@ -1,8 +1,8 @@
 'use client';
 
 import { NodeView } from "./StructureView/StructureView.mjs";
-import { jsx } from "react/jsx-runtime";
 import { useEditedContent } from "@intlayer/editor-react";
+import { jsx } from "react/jsx-runtime";
 
 //#region src/components/DictionaryFieldEditor/StructureEditor.tsx
 const StructureEditor = ({ dictionary }) => {

package/dist/esm/components/DictionaryFieldEditor/StructureView/StructureView.mjs

@@ -5,11 +5,11 @@ import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../../Button/But
 import { InputVariant } from "../../Input/Input.mjs";
 import { EditableFieldInput } from "../../EditableField/EditableFieldInput.mjs";
 import { NodeTypeSelector } from "../NodeTypeSelector.mjs";
+import { useConfiguration, useEditedContentActions, useFocusUnmergedDictionary } from "@intlayer/editor-react";
 import { Plus, Trash } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { getDefaultNode, getNodeChildren, getNodeType, isSameKeyPath } from "@intlayer/core";
 import { useIntlayer } from "react-intlayer";
-import { useConfiguration, useEditedContentActions, useFocusUnmergedDictionary } from "@intlayer/editor-react";
 import { NodeType } from "@intlayer/types";
 import { camelCaseToSentence } from "@intlayer/config/client";
 

package/dist/esm/components/EditableField/EditableFieldLayout.mjs

@@ -2,8 +2,8 @@
 
 import { cn } from "../../utils/cn.mjs";
 import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
-import { Check, Pencil, X } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { Check, Pencil, X } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/EditableField/EditableFieldLayout.tsx

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

@@ -96,7 +96,7 @@ const Footer = ({ links }) => /* @__PURE__ */ jsxs("footer", {
 			/* @__PURE__ */ jsx(LogoWithTextBelow, { className: "size-full max-w-[120px]" }),
 			/* @__PURE__ */ jsx("span", {
 				className: "text-center text-neutral text-xs",
-				children: "© 2025 Intlayer, Inc."
+				children: "© 2026 Intlayer, Inc."
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: "flex flex-row gap-3",

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

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["Footer: FC<FooterProps>","links"],"sources":["../../../../src/components/Footer/index.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react';\nimport { LogoWithTextBelow } from '../Logo';\nimport { SocialNetworks } from '../SocialNetworks';\n\n/**\n * Represents a single footer link with all necessary attributes\n */\nexport type FooterLink = {\n  /** URL or path for the link */\n  href: string;\n  /** Display text or JSX element for the link */\n  text: ReactNode;\n  /** Optional click handler for custom link behavior */\n  onClick?: () => void;\n  /** Accessible label for screen readers (required for accessibility) */\n  label: string;\n};\n\n/**\n * Represents a group of related links with a title\n */\nexport type LinkGroup = {\n  /** Title for the group of links */\n  title: ReactNode;\n  /** Array of footer links in this group */\n  links: FooterLink[];\n};\n\n/**\n * Props for the Footer component\n */\ntype FooterProps = {\n  /** Optional array of link groups to display in the footer */\n  links?: LinkGroup[];\n};\n\n/**\n * Footer Component\n *\n * A comprehensive footer component that displays the Intlayer logo, copyright information,\n * social networks, and organized groups of navigation links. Designed for responsive\n * layouts and optimal user experience across all devices.\n *\n * @component\n * @example\n * Basic usage without links:\n * ```tsx\n * <Footer />\n * ```\n *\n * @example\n * With organized link groups:\n * ```tsx\n * const footerLinks = [\n *   {\n *     title: 'Product',\n *     links: [\n *       { href: '/features', text: 'Features', label: 'Product features' },\n *       { href: '/pricing', text: 'Pricing', label: 'Pricing information' },\n *       { href: '/docs', text: 'Documentation', label: 'Product documentation' }\n *     ]\n *   },\n *   {\n *     title: 'Company',\n *     links: [\n *       { href: '/about', text: 'About Us', label: 'About the company' },\n *       { href: '/careers', text: 'Careers', label: 'Job opportunities' },\n *       { href: '/contact', text: 'Contact', label: 'Contact information' }\n *     ]\n *   }\n * ];\n *\n * <Footer links={footerLinks} />\n * ```\n *\n * @example\n * With custom click handlers:\n * ```tsx\n * const footerLinks = [\n *   {\n *     title: 'Actions',\n *     links: [\n *       {\n *         href: '#',\n *         text: 'Newsletter',\n *         label: 'Subscribe to newsletter',\n *         onClick: () => openNewsletterModal()\n *       }\n *     ]\n *   }\n * ];\n *\n * <Footer links={footerLinks} />\n * ```\n *\n * Features:\n * - Responsive design that adapts to different screen sizes\n * - Intlayer branding with logo and copyright notice\n * - Integrated social network links\n * - Flexible link organization with titled groups\n * - Accessibility-compliant with proper ARIA labels\n * - Support for custom click handlers alongside href navigation\n * - Clean, modern design with proper spacing and typography\n *\n * Layout Structure:\n * - Left side (or top on mobile): Logo, copyright, and social links\n * - Right side (or bottom on mobile): Organized link groups\n * - Responsive breakpoints for optimal mobile experience\n *\n * Accessibility:\n * - Semantic HTML structure using <footer> tag\n * - All links include required aria-label attributes\n * - Proper heading hierarchy and keyboard navigation\n * - Screen reader friendly content organization\n * - Focus management for interactive elements\n *\n * @param props - Component properties\n * @param props.links - Optional array of link groups to display\n *\n * @returns A rendered footer with branding, social links, and optional navigation links\n */\nexport const Footer: FC<FooterProps> = ({ links }) => (\n  <footer className=\"flex flex-auto flex-row flex-wrap items-center justify-around gap-10 p-6\">\n    <aside className=\"flex flex-col items-center justify-between gap-3 md:w-1/4\">\n      <LogoWithTextBelow className=\"size-full max-w-[120px]\" />\n      <span className=\"text-center text-neutral text-xs\">\n        © 2025 Intlayer, Inc.\n      </span>\n      <div className=\"flex flex-row gap-3\">\n        <SocialNetworks />\n      </div>\n    </aside>\n    <div className=\"m-auto flex w-full flex-row flex-wrap justify-around gap-x-3 gap-y-6 md:w-2/3\">\n      {(links ?? []).map(({ title, links }) => (\n        <div\n          className=\"flex flex-col gap-2\"\n          key={links.map((link) => link.href).join(',')}\n        >\n          <strong>{title}</strong>\n          <div className=\"flex flex-col gap-3 text-sm\">\n            {links.map((link) => (\n              <a key={link.href} href={link.href} aria-label={link.label}>\n                {link.text}\n              </a>\n            ))}\n          </div>\n        </div>\n      ))}\n    </div>\n  </footer>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyHA,MAAaA,UAA2B,EAAE,YACxC,qBAAC;CAAO,WAAU;YAChB,qBAAC;EAAM,WAAU;;GACf,oBAAC,qBAAkB,WAAU,4BAA4B;GACzD,oBAAC;IAAK,WAAU;cAAmC;KAE5C;GACP,oBAAC;IAAI,WAAU;cACb,oBAAC,mBAAiB;KACd;;GACA,EACR,oBAAC;EAAI,WAAU;aACX,SAAS,EAAE,EAAE,KAAK,EAAE,OAAO,qBAC3B,qBAAC;GACC,WAAU;cAGV,oBAAC,sBAAQ,QAAe,EACxB,oBAAC;IAAI,WAAU;cACZC,QAAM,KAAK,SACV,oBAAC;KAAkB,MAAM,KAAK;KAAM,cAAY,KAAK;eAClD,KAAK;OADA,KAAK,KAET,CACJ;KACE;KATDA,QAAM,KAAK,SAAS,KAAK,KAAK,CAAC,KAAK,IAAI,CAUzC,CACN;GACE;EACC"}
+{"version":3,"file":"index.mjs","names":["Footer: FC<FooterProps>","links"],"sources":["../../../../src/components/Footer/index.tsx"],"sourcesContent":["import type { FC, ReactNode } from 'react';\nimport { LogoWithTextBelow } from '../Logo';\nimport { SocialNetworks } from '../SocialNetworks';\n\n/**\n * Represents a single footer link with all necessary attributes\n */\nexport type FooterLink = {\n  /** URL or path for the link */\n  href: string;\n  /** Display text or JSX element for the link */\n  text: ReactNode;\n  /** Optional click handler for custom link behavior */\n  onClick?: () => void;\n  /** Accessible label for screen readers (required for accessibility) */\n  label: string;\n};\n\n/**\n * Represents a group of related links with a title\n */\nexport type LinkGroup = {\n  /** Title for the group of links */\n  title: ReactNode;\n  /** Array of footer links in this group */\n  links: FooterLink[];\n};\n\n/**\n * Props for the Footer component\n */\ntype FooterProps = {\n  /** Optional array of link groups to display in the footer */\n  links?: LinkGroup[];\n};\n\n/**\n * Footer Component\n *\n * A comprehensive footer component that displays the Intlayer logo, copyright information,\n * social networks, and organized groups of navigation links. Designed for responsive\n * layouts and optimal user experience across all devices.\n *\n * @component\n * @example\n * Basic usage without links:\n * ```tsx\n * <Footer />\n * ```\n *\n * @example\n * With organized link groups:\n * ```tsx\n * const footerLinks = [\n *   {\n *     title: 'Product',\n *     links: [\n *       { href: '/features', text: 'Features', label: 'Product features' },\n *       { href: '/pricing', text: 'Pricing', label: 'Pricing information' },\n *       { href: '/docs', text: 'Documentation', label: 'Product documentation' }\n *     ]\n *   },\n *   {\n *     title: 'Company',\n *     links: [\n *       { href: '/about', text: 'About Us', label: 'About the company' },\n *       { href: '/careers', text: 'Careers', label: 'Job opportunities' },\n *       { href: '/contact', text: 'Contact', label: 'Contact information' }\n *     ]\n *   }\n * ];\n *\n * <Footer links={footerLinks} />\n * ```\n *\n * @example\n * With custom click handlers:\n * ```tsx\n * const footerLinks = [\n *   {\n *     title: 'Actions',\n *     links: [\n *       {\n *         href: '#',\n *         text: 'Newsletter',\n *         label: 'Subscribe to newsletter',\n *         onClick: () => openNewsletterModal()\n *       }\n *     ]\n *   }\n * ];\n *\n * <Footer links={footerLinks} />\n * ```\n *\n * Features:\n * - Responsive design that adapts to different screen sizes\n * - Intlayer branding with logo and copyright notice\n * - Integrated social network links\n * - Flexible link organization with titled groups\n * - Accessibility-compliant with proper ARIA labels\n * - Support for custom click handlers alongside href navigation\n * - Clean, modern design with proper spacing and typography\n *\n * Layout Structure:\n * - Left side (or top on mobile): Logo, copyright, and social links\n * - Right side (or bottom on mobile): Organized link groups\n * - Responsive breakpoints for optimal mobile experience\n *\n * Accessibility:\n * - Semantic HTML structure using <footer> tag\n * - All links include required aria-label attributes\n * - Proper heading hierarchy and keyboard navigation\n * - Screen reader friendly content organization\n * - Focus management for interactive elements\n *\n * @param props - Component properties\n * @param props.links - Optional array of link groups to display\n *\n * @returns A rendered footer with branding, social links, and optional navigation links\n */\nexport const Footer: FC<FooterProps> = ({ links }) => (\n  <footer className=\"flex flex-auto flex-row flex-wrap items-center justify-around gap-10 p-6\">\n    <aside className=\"flex flex-col items-center justify-between gap-3 md:w-1/4\">\n      <LogoWithTextBelow className=\"size-full max-w-[120px]\" />\n      <span className=\"text-center text-neutral text-xs\">\n        © 2026 Intlayer, Inc.\n      </span>\n      <div className=\"flex flex-row gap-3\">\n        <SocialNetworks />\n      </div>\n    </aside>\n    <div className=\"m-auto flex w-full flex-row flex-wrap justify-around gap-x-3 gap-y-6 md:w-2/3\">\n      {(links ?? []).map(({ title, links }) => (\n        <div\n          className=\"flex flex-col gap-2\"\n          key={links.map((link) => link.href).join(',')}\n        >\n          <strong>{title}</strong>\n          <div className=\"flex flex-col gap-3 text-sm\">\n            {links.map((link) => (\n              <a key={link.href} href={link.href} aria-label={link.label}>\n                {link.text}\n              </a>\n            ))}\n          </div>\n        </div>\n      ))}\n    </div>\n  </footer>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyHA,MAAaA,UAA2B,EAAE,YACxC,qBAAC;CAAO,WAAU;YAChB,qBAAC;EAAM,WAAU;;GACf,oBAAC,qBAAkB,WAAU,4BAA4B;GACzD,oBAAC;IAAK,WAAU;cAAmC;KAE5C;GACP,oBAAC;IAAI,WAAU;cACb,oBAAC,mBAAiB;KACd;;GACA,EACR,oBAAC;EAAI,WAAU;aACX,SAAS,EAAE,EAAE,KAAK,EAAE,OAAO,qBAC3B,qBAAC;GACC,WAAU;cAGV,oBAAC,sBAAQ,QAAe,EACxB,oBAAC;IAAI,WAAU;cACZC,QAAM,KAAK,SACV,oBAAC;KAAkB,MAAM,KAAK;KAAM,cAAY,KAAK;eAClD,KAAK;OADA,KAAK,KAET,CACJ;KACE;KATDA,QAAM,KAAK,SAAS,KAAK,KAAK,CAAC,KAAK,IAAI,CAUzC,CACN;GACE;EACC"}

package/dist/esm/components/Form/FormItem.mjs

@@ -1,6 +1,6 @@
 'use client';
 
-import { createContext, useId, useMemo } from "react";
+import { createContext, useId } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Form/FormItem.tsx
@@ -8,10 +8,11 @@ const FormItem = ({ id: idProp, ...props }) => {
 	const generatedId = useId();
 	const stableId = idProp ?? generatedId;
 	return /* @__PURE__ */ jsx(FormItemContext, {
-		value: useMemo(() => ({ id: stableId }), [stableId]),
+		value: { id: stableId },
 		children: /* @__PURE__ */ jsx("div", {
 			className: "flex flex-col gap-2 p-2",
 			id: stableId,
+			suppressHydrationWarning: true,
 			...props
 		})
 	});

package/dist/esm/components/Form/FormItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormItem.mjs","names":["FormItem: FC<HTMLAttributes<HTMLDivElement>>"],"sources":["../../../../src/components/Form/FormItem.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  type FC,\n  type HTMLAttributes,\n  useId,\n  useMemo,\n} from 'react';\n\nexport const FormItem: FC<HTMLAttributes<HTMLDivElement>> = ({\n  id: idProp,\n  ...props\n}) => {\n  const generatedId = useId();\n  const stableId = idProp ?? generatedId;\n\n  const memoValue = useMemo(\n    () => ({\n      id: stableId,\n    }),\n    [stableId]\n  );\n\n  return (\n    <FormItemContext value={memoValue}>\n      <div className=\"flex flex-col gap-2 p-2\" id={stableId} {...props} />\n    </FormItemContext>\n  );\n};\n\ntype FormItemContextValue = {\n  id: string;\n};\n\nexport const FormItemContext = createContext<FormItemContextValue>(\n  {} as FormItemContextValue\n);\n"],"mappings":";;;;;;AAUA,MAAaA,YAAgD,EAC3D,IAAI,QACJ,GAAG,YACC;CACJ,MAAM,cAAc,OAAO;CAC3B,MAAM,WAAW,UAAU;AAS3B,QACE,oBAAC;EAAgB,OARD,eACT,EACL,IAAI,UACL,GACD,CAAC,SAAS,CACX;YAIG,oBAAC;GAAI,WAAU;GAA0B,IAAI;GAAU,GAAI;IAAS;GACpD;;AAQtB,MAAa,kBAAkB,cAC7B,EAAE,CACH"}
+{"version":3,"file":"FormItem.mjs","names":["FormItem: FC<HTMLAttributes<HTMLDivElement>>"],"sources":["../../../../src/components/Form/FormItem.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, type FC, type HTMLAttributes, useId } from 'react';\n\nexport const FormItem: FC<HTMLAttributes<HTMLDivElement>> = ({\n  id: idProp,\n  ...props\n}) => {\n  const generatedId = useId();\n  const stableId = idProp ?? generatedId;\n\n  const memoValue = {\n    id: stableId,\n  };\n\n  return (\n    <FormItemContext value={memoValue}>\n      <div\n        className=\"flex flex-col gap-2 p-2\"\n        id={stableId}\n        suppressHydrationWarning\n        {...props}\n      />\n    </FormItemContext>\n  );\n};\n\ntype FormItemContextValue = {\n  id: string;\n};\n\nexport const FormItemContext = createContext<FormItemContextValue>(\n  {} as FormItemContextValue\n);\n"],"mappings":";;;;;;AAIA,MAAaA,YAAgD,EAC3D,IAAI,QACJ,GAAG,YACC;CACJ,MAAM,cAAc,OAAO;CAC3B,MAAM,WAAW,UAAU;AAM3B,QACE,oBAAC;EAAgB,OALD,EAChB,IAAI,UACL;YAIG,oBAAC;GACC,WAAU;GACV,IAAI;GACJ;GACA,GAAI;IACJ;GACc;;AAQtB,MAAa,kBAAkB,cAC7B,EAAE,CACH"}

package/dist/esm/components/Form/elements/OTPElement.mjs

@@ -1,7 +1,7 @@
 'use client';
 
-import { InputIndicator, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "../../Input/OTPInput.mjs";
 import { useItemSelector } from "../../../hooks/useItemSelector.mjs";
+import { InputIndicator, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "../../Input/OTPInput.mjs";
 import { useFormField } from "../FormField.mjs";
 import { FormItemLayout } from "../layout/FormItemLayout.mjs";
 import { Form } from "../Form.mjs";

package/dist/esm/components/Form/layout/FormLabelLayout.mjs

@@ -10,6 +10,7 @@ const FormLabelLayout = ({ children, isRequired, info, htmlFor, className }) =>
 	children: [children && /* @__PURE__ */ jsxs(FormLabel, {
 		htmlFor,
 		id: `${htmlFor}-label`,
+		suppressHydrationWarning: true,
 		className: clsx("font-bold", className),
 		children: [children, /* @__PURE__ */ jsx(RequiredStar, { isRequired })]
 	}), info && /* @__PURE__ */ jsx(InformationTag, { content: info })]

package/dist/esm/components/Form/layout/FormLabelLayout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormLabelLayout.mjs","names":["FormLabelLayout: FC<FormLabelLayoutProps>"],"sources":["../../../../../src/components/Form/layout/FormLabelLayout.tsx"],"sourcesContent":["import { InformationTag } from '@components/InformationTag';\nimport { clsx } from 'clsx';\nimport type { FC, ReactNode } from 'react';\nimport { FormLabel } from '../FormLabel';\nimport { RequiredStar } from './RequiredStar';\n\nexport type FormLabelLayoutProps = {\n  children?: ReactNode;\n  isRequired?: boolean;\n  info?: string;\n  htmlFor?: string;\n  className?: string;\n};\n\nexport const FormLabelLayout: FC<FormLabelLayoutProps> = ({\n  children,\n  isRequired,\n  info,\n  htmlFor,\n  className,\n}) => (\n  <div className=\"ml-1 flex gap-1 align-middle text-base leading-none\">\n    {children && (\n      <FormLabel\n        htmlFor={htmlFor}\n        id={`${htmlFor}-label`}\n        className={clsx('font-bold', className)}\n      >\n        {children}\n        <RequiredStar isRequired={isRequired} />\n      </FormLabel>\n    )}\n    {info && <InformationTag content={info} />}\n  </div>\n);\n"],"mappings":";;;;;;;AAcA,MAAaA,mBAA6C,EACxD,UACA,YACA,MACA,SACA,gBAEA,qBAAC;CAAI,WAAU;YACZ,YACC,qBAAC;EACU;EACT,IAAI,GAAG,QAAQ;EACf,WAAW,KAAK,aAAa,UAAU;aAEtC,UACD,oBAAC,gBAAyB,aAAc;GAC9B,EAEb,QAAQ,oBAAC,kBAAe,SAAS,OAAQ;EACtC"}
+{"version":3,"file":"FormLabelLayout.mjs","names":["FormLabelLayout: FC<FormLabelLayoutProps>"],"sources":["../../../../../src/components/Form/layout/FormLabelLayout.tsx"],"sourcesContent":["import { InformationTag } from '@components/InformationTag';\nimport { clsx } from 'clsx';\nimport type { FC, ReactNode } from 'react';\nimport { FormLabel } from '../FormLabel';\nimport { RequiredStar } from './RequiredStar';\n\nexport type FormLabelLayoutProps = {\n  children?: ReactNode;\n  isRequired?: boolean;\n  info?: string;\n  htmlFor?: string;\n  className?: string;\n};\n\nexport const FormLabelLayout: FC<FormLabelLayoutProps> = ({\n  children,\n  isRequired,\n  info,\n  htmlFor,\n  className,\n}) => (\n  <div className=\"ml-1 flex gap-1 align-middle text-base leading-none\">\n    {children && (\n      <FormLabel\n        htmlFor={htmlFor}\n        id={`${htmlFor}-label`}\n        suppressHydrationWarning\n        className={clsx('font-bold', className)}\n      >\n        {children}\n        <RequiredStar isRequired={isRequired} />\n      </FormLabel>\n    )}\n    {info && <InformationTag content={info} />}\n  </div>\n);\n"],"mappings":";;;;;;;AAcA,MAAaA,mBAA6C,EACxD,UACA,YACA,MACA,SACA,gBAEA,qBAAC;CAAI,WAAU;YACZ,YACC,qBAAC;EACU;EACT,IAAI,GAAG,QAAQ;EACf;EACA,WAAW,KAAK,aAAa,UAAU;aAEtC,UACD,oBAAC,gBAAyB,aAAc;GAC9B,EAEb,QAAQ,oBAAC,kBAAe,SAAS,OAAQ;EACtC"}

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

@@ -1,8 +1,8 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
-import { Eye, EyeOff } from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
+import { Eye, EyeOff } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/HideShow/index.tsx

package/dist/esm/components/IDE/FileTree.mjs

@@ -3,8 +3,8 @@
 import { cn } from "../../utils/cn.mjs";
 import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
 import { createFileTree } from "./createFileTree.mjs";
-import { ChevronRight } from "lucide-react";
 import { useState } from "react";
+import { ChevronRight } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/IDE/FileTree.tsx

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

@@ -1,8 +1,8 @@
 'use client';
 
 import { Input } from "./Input.mjs";
-import { EyeIcon, EyeOffIcon } from "lucide-react";
 import { useState } from "react";
+import { EyeIcon, EyeOffIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/Input/InputPassword.tsx

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

@@ -2,9 +2,9 @@
 
 import { cn } from "../../utils/cn.mjs";
 import { Button } from "../Button/Button.mjs";
-import { MinusIcon } from "lucide-react";
 import { createContext, useContext, useEffect, useRef, useState } from "react";
 import { cva } from "class-variance-authority";
+import { MinusIcon } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/Input/OTPInput.tsx

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

@@ -1,7 +1,7 @@
 'use client';
 
-import { cn } from "../../utils/cn.mjs";
 import { useKeyboardDetector } from "../../hooks/useKeyboardDetector.mjs";
+import { cn } from "../../utils/cn.mjs";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/KeyboardScreenAdapter/index.tsx

package/dist/esm/components/KeyboardShortcut/KeyboardShortcut.mjs

@@ -1,7 +1,7 @@
 'use client';
 
-import { cn } from "../../utils/cn.mjs";
 import { useDevice } from "../../hooks/useDevice.mjs";
+import { cn } from "../../utils/cn.mjs";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 

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

@@ -1,9 +1,10 @@
 '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