@intlayer/design-system 7.5.7 → 7.5.9

package/dist/esm/components/RightDrawer/RightDrawer.mjs

@@ -4,101 +4,19 @@ import { Container } from "../Container/index.mjs";
 import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
 import { useDevice } from "../../hooks/useDevice.mjs";
 import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
+import { Popover } from "../Popover/dynamic.mjs";
+import { KeyboardShortcut } from "../KeyboardShortcut/KeyboardShortcut.mjs";
 import { MaxWidthSmoother } from "../MaxWidthSmoother/index.mjs";
 import { isElementAtTopAndNotCovered } from "./isElementAtTopAndNotCovered.mjs";
 import { useRightDrawerStore } from "./useRightDrawerStore.mjs";
 import { ChevronLeft, X } from "lucide-react";
 import { useEffect, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useIntlayer } from "react-intlayer";
 
 //#region src/components/RightDrawer/RightDrawer.tsx
-/**
-* RightDrawer - A slide-out drawer panel that appears from the right side of the screen
-*
-* A versatile drawer component that provides an overlay panel for displaying secondary content,
-* forms, details, or navigation. Features responsive design that adapts to mobile devices,
-* configurable close behavior, and integrated state management through Zustand store.
-*
-* ## Key Features
-* - **Responsive Design**: Full-width on mobile, fixed 400px width on desktop
-* - **State Management**: Built-in Zustand store for managing multiple drawer instances
-* - **Accessibility**: Proper ARIA attributes, keyboard navigation, and focus management
-* - **Flexible Layout**: Customizable header, title, and content areas
-* - **Click Outside**: Configurable outside click detection for auto-closing
-* - **Scroll Management**: Automatic body scroll blocking when open
-*
-* ## Use Cases
-* - Navigation menus and sidebars
-* - Detail panels and forms
-* - Settings and configuration interfaces
-* - Shopping carts and checkout processes
-* - User profiles and account management
-* - Multi-step workflows and wizards
-*
-* ## Accessibility
-* - **Focus Management**: Traps focus within the drawer when open
-* - **Keyboard Navigation**: Escape key closes the drawer
-* - **Screen Reader Support**: Proper ARIA labels and announcements
-* - **Touch Support**: Mobile-optimized touch interactions
-*
-* ## State Management
-* The component uses a Zustand store (`useRightDrawerStore`) to manage drawer state:
-* - Multiple drawers can be managed simultaneously using unique identifiers
-* - External components can open/close drawers using the store
-* - Supports both controlled (via props) and uncontrolled (via store) patterns
-*
-* @example
-* Basic usage with store management:
-* ```tsx
-* // Opening the drawer from another component
-* const { open } = useRightDrawerStore();
-*
-* <button onClick={() => open('user-menu')}>
-*   Open Menu
-* </button>
-*
-* <RightDrawer identifier="user-menu" title="User Menu">
-*   <nav>Navigation items here</nav>
-* </RightDrawer>
-* ```
-*
-* @example
-* Controlled drawer with external state:
-* ```tsx
-* const [showDrawer, setShowDrawer] = useState(false);
-*
-* <RightDrawer
-*   identifier="controlled-drawer"
-*   title="Settings"
-*   isOpen={showDrawer}
-*   onClose={() => setShowDrawer(false)}
-*   closeOnOutsideClick={false}
-* >
-*   <SettingsForm onSave={() => setShowDrawer(false)} />
-* </RightDrawer>
-* ```
-*
-* @example
-* Complex drawer with back button and header:
-* ```tsx
-* <RightDrawer
-*   identifier="product-detail"
-*   title="Product Details"
-*   header={
-*     <div className="text-sm text-gray-600">
-*       SKU: {product.sku} | Stock: {product.stock}
-*     </div>
-*   }
-*   backButton={{
-*     text: "Back to Catalog",
-*     onBack: () => navigate('/catalog')
-*   }}
-* >
-*   <ProductDetailView product={product} />
-* </RightDrawer>
-* ```
-*/
-const RightDrawer = ({ title, identifier, children, header, closeOnOutsideClick = true, backButton, isOpen: isOpenProp, onClose }) => {
+const RightDrawer = ({ title, identifier, children, header, footer, closeOnOutsideClick = true, backButton, isOpen: isOpenProp, onClose }) => {
+	const content = useIntlayer("right-drawer");
 	const { isMobile } = useDevice("md");
 	const panelRef = useRef(null);
 	const childrenContainerRef = useRef(null);
@@ -161,6 +79,16 @@ const RightDrawer = ({ title, identifier, children, header, closeOnOutsideClick
 			onClose?.();
 		}
 	};
+	const handleSpareSpaceKeyDown = (e) => {
+		if (e.target !== e.currentTarget) return;
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			if (isMobile) {
+				closeDrawer(identifier);
+				onClose?.();
+			}
+		}
+	};
 	return /* @__PURE__ */ jsx("div", {
 		className: "fixed top-0 right-0 z-50 flex h-full justify-end",
 		children: /* @__PURE__ */ jsx(MaxWidthSmoother, {
@@ -170,47 +98,75 @@ const RightDrawer = ({ title, identifier, children, header, closeOnOutsideClick
 				className: "relative flex h-screen w-screen flex-col text-text md:w-[400px]",
 				ref: panelRef,
 				roundedSize: "none",
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "flex flex-col gap-3 p-6",
-					children: [
-						/* @__PURE__ */ jsxs("div", {
-							className: "flex justify-between gap-3",
-							children: [/* @__PURE__ */ jsx("div", { children: backButton && /* @__PURE__ */ jsx(Button, {
-								variant: ButtonVariant.HOVERABLE,
-								color: ButtonColor.TEXT,
-								label: backButton.text ?? "Go back",
-								onClick: backButton.onBack,
-								Icon: ChevronLeft,
-								children: backButton?.text
-							}) }), /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, {
-								variant: ButtonVariant.HOVERABLE,
-								color: ButtonColor.TEXT,
-								label: "Close",
-								className: "ml-auto",
-								onClick: () => {
-									closeDrawer(identifier);
-									onClose?.();
-								},
-								Icon: X,
-								size: ButtonSize.ICON_MD
-							}) })]
-						}),
-						title && /* @__PURE__ */ jsx("h2", {
-							className: "flex items-center justify-center font-bold text-lg",
-							children: title
-						}),
-						header
-					]
-				}), /* @__PURE__ */ jsx("div", {
-					className: "flex h-full flex-col overflow-y-auto p-2",
-					children: /* @__PURE__ */ jsx("div", {
-						className: "flex flex-1 flex-col",
-						onClick: handleSpareSpaceClick,
-						ref: childrenContainerRef,
-						role: "region",
-						children
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex shrink-0 flex-col gap-3 px-6 pt-6",
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex justify-between gap-3",
+								children: [/* @__PURE__ */ jsx("div", { children: backButton && /* @__PURE__ */ jsx(Button, {
+									variant: ButtonVariant.HOVERABLE,
+									color: ButtonColor.TEXT,
+									label: backButton.text ?? content.goBack.value,
+									onClick: backButton.onBack,
+									Icon: ChevronLeft,
+									children: backButton?.text
+								}) }), /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(Popover, {
+									identifier: "close-drawer",
+									children: [/* @__PURE__ */ jsx(Button, {
+										variant: ButtonVariant.HOVERABLE,
+										color: ButtonColor.TEXT,
+										label: "Close",
+										className: "ml-auto",
+										onClick: () => {
+											closeDrawer(identifier);
+											onClose?.();
+										},
+										Icon: X,
+										size: ButtonSize.ICON_MD
+									}), /* @__PURE__ */ jsx(Popover.Detail, {
+										identifier: "close-drawer",
+										children: /* @__PURE__ */ jsxs("div", {
+											className: "flex items-center gap-2 p-2",
+											children: [/* @__PURE__ */ jsx("span", {
+												className: "whitespace-nowrap text-neutral text-xs",
+												children: content.closeDrawer
+											}), /* @__PURE__ */ jsx(KeyboardShortcut, {
+												shortcut: "Escape",
+												size: "sm",
+												onTriggered: () => {
+													closeDrawer(identifier);
+													onClose?.();
+												}
+											})]
+										})
+									})]
+								}) })]
+							}),
+							title && /* @__PURE__ */ jsx("h2", {
+								className: "flex items-center justify-center font-bold text-lg",
+								children: title
+							}),
+							header
+						]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "flex min-h-0 flex-1 flex-col overflow-y-auto p-2",
+						children: /* @__PURE__ */ jsx("div", {
+							className: "flex flex-1 flex-col outline-none",
+							onClick: handleSpareSpaceClick,
+							onKeyDown: handleSpareSpaceKeyDown,
+							ref: childrenContainerRef,
+							role: "button",
+							tabIndex: 0,
+							children
+						})
+					}),
+					footer && /* @__PURE__ */ jsx("div", {
+						className: "shrink-0",
+						children: footer
 					})
-				})]
+				]
 			})
 		})
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"RightDrawer.mjs","names":["RightDrawer: FC<RightDrawerProps>","handleSpareSpaceClick: MouseEventHandler<HTMLDivElement>"],"sources":["../../../../src/components/RightDrawer/RightDrawer.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronLeft, X } from 'lucide-react';\nimport {\n  type FC,\n  type MouseEventHandler,\n  type ReactNode,\n  useEffect,\n  useRef,\n} from 'react';\nimport { useDevice } from '../../hooks/useDevice';\nimport { useScrollBlockage } from '../../hooks/useScrollBlockage';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { Container } from '../Container';\nimport { MaxWidthSmoother } from '../MaxWidthSmoother/index';\nimport { isElementAtTopAndNotCovered } from './isElementAtTopAndNotCovered';\nimport { useRightDrawerStore } from './useRightDrawerStore';\n\n/**\n * Configuration for the back button functionality in the RightDrawer\n *\n * @interface BackButtonProps\n */\ntype BackButtonProps = {\n  /** Callback function triggered when the back button is clicked */\n  onBack: () => void;\n  /** Optional custom text for the back button. Defaults to \"Go back\" if not provided */\n  text?: string;\n};\n\n/**\n * Props configuration for the RightDrawer component\n *\n * @interface RightDrawerProps\n */\ntype RightDrawerProps = {\n  /**\n   * Title displayed in the drawer header\n   * @example\n   * ```tsx\n   * <RightDrawer title=\"User Settings\" identifier=\"settings\">\n   *   Content here\n   * </RightDrawer>\n   * ```\n   */\n  title?: ReactNode;\n\n  /**\n   * Unique identifier for the drawer instance. Required for store management\n   * @example\n   * ```tsx\n   * <RightDrawer identifier=\"user-profile\" title=\"Profile\">\n   *   Profile content\n   * </RightDrawer>\n   * ```\n   */\n  identifier: string;\n\n  /** The content to be displayed inside the drawer */\n  children?: ReactNode;\n\n  /**\n   * Optional header content displayed below the title\n   * @example\n   * ```tsx\n   * <RightDrawer\n   *   title=\"Settings\"\n   *   header={<div className=\"text-sm opacity-80\">Configure your preferences</div>}\n   *   identifier=\"settings\"\n   * >\n   *   Settings content\n   * </RightDrawer>\n   * ```\n   */\n  header?: ReactNode;\n\n  /**\n   * Whether the drawer should close when clicking outside of it\n   * @default true\n   * @example\n   * ```tsx\n   * <RightDrawer closeOnOutsideClick={false} identifier=\"persistent\">\n   *   This drawer requires explicit close action\n   * </RightDrawer>\n   * ```\n   */\n  closeOnOutsideClick?: boolean;\n\n  /**\n   * Configuration for an optional back button in the drawer header\n   * @example\n   * ```tsx\n   * <RightDrawer\n   *   backButton={{\n   *     text: \"Back to List\",\n   *     onBack: () => navigate('/list')\n   *   }}\n   *   identifier=\"detail-view\"\n   * >\n   *   Detail content\n   * </RightDrawer>\n   * ```\n   */\n  backButton?: BackButtonProps;\n\n  /**\n   * External control for the open state. When provided, overrides internal store state\n   * @example\n   * ```tsx\n   * const [isOpen, setIsOpen] = useState(false);\n   *\n   * <RightDrawer\n   *   isOpen={isOpen}\n   *   onClose={() => setIsOpen(false)}\n   *   identifier=\"controlled\"\n   * >\n   *   Controlled drawer content\n   * </RightDrawer>\n   * ```\n   */\n  isOpen?: boolean;\n\n  /**\n   * Callback function triggered when the drawer is closed\n   * @example\n   * ```tsx\n   * <RightDrawer\n   *   onClose={() => console.log('Drawer closed')}\n   *   identifier=\"tracked\"\n   * >\n   *   Content with close tracking\n   * </RightDrawer>\n   * ```\n   */\n  onClose?: () => void;\n};\n\n/**\n * RightDrawer - A slide-out drawer panel that appears from the right side of the screen\n *\n * A versatile drawer component that provides an overlay panel for displaying secondary content,\n * forms, details, or navigation. Features responsive design that adapts to mobile devices,\n * configurable close behavior, and integrated state management through Zustand store.\n *\n * ## Key Features\n * - **Responsive Design**: Full-width on mobile, fixed 400px width on desktop\n * - **State Management**: Built-in Zustand store for managing multiple drawer instances\n * - **Accessibility**: Proper ARIA attributes, keyboard navigation, and focus management\n * - **Flexible Layout**: Customizable header, title, and content areas\n * - **Click Outside**: Configurable outside click detection for auto-closing\n * - **Scroll Management**: Automatic body scroll blocking when open\n *\n * ## Use Cases\n * - Navigation menus and sidebars\n * - Detail panels and forms\n * - Settings and configuration interfaces\n * - Shopping carts and checkout processes\n * - User profiles and account management\n * - Multi-step workflows and wizards\n *\n * ## Accessibility\n * - **Focus Management**: Traps focus within the drawer when open\n * - **Keyboard Navigation**: Escape key closes the drawer\n * - **Screen Reader Support**: Proper ARIA labels and announcements\n * - **Touch Support**: Mobile-optimized touch interactions\n *\n * ## State Management\n * The component uses a Zustand store (`useRightDrawerStore`) to manage drawer state:\n * - Multiple drawers can be managed simultaneously using unique identifiers\n * - External components can open/close drawers using the store\n * - Supports both controlled (via props) and uncontrolled (via store) patterns\n *\n * @example\n * Basic usage with store management:\n * ```tsx\n * // Opening the drawer from another component\n * const { open } = useRightDrawerStore();\n *\n * <button onClick={() => open('user-menu')}>\n *   Open Menu\n * </button>\n *\n * <RightDrawer identifier=\"user-menu\" title=\"User Menu\">\n *   <nav>Navigation items here</nav>\n * </RightDrawer>\n * ```\n *\n * @example\n * Controlled drawer with external state:\n * ```tsx\n * const [showDrawer, setShowDrawer] = useState(false);\n *\n * <RightDrawer\n *   identifier=\"controlled-drawer\"\n *   title=\"Settings\"\n *   isOpen={showDrawer}\n *   onClose={() => setShowDrawer(false)}\n *   closeOnOutsideClick={false}\n * >\n *   <SettingsForm onSave={() => setShowDrawer(false)} />\n * </RightDrawer>\n * ```\n *\n * @example\n * Complex drawer with back button and header:\n * ```tsx\n * <RightDrawer\n *   identifier=\"product-detail\"\n *   title=\"Product Details\"\n *   header={\n *     <div className=\"text-sm text-gray-600\">\n *       SKU: {product.sku} | Stock: {product.stock}\n *     </div>\n *   }\n *   backButton={{\n *     text: \"Back to Catalog\",\n *     onBack: () => navigate('/catalog')\n *   }}\n * >\n *   <ProductDetailView product={product} />\n * </RightDrawer>\n * ```\n */\nexport const RightDrawer: FC<RightDrawerProps> = ({\n  title,\n  identifier,\n  children,\n  header,\n  closeOnOutsideClick = true,\n  backButton,\n  isOpen: isOpenProp,\n  onClose,\n}) => {\n  const { isMobile } = useDevice('md');\n  const panelRef = useRef<HTMLDivElement>(null);\n  const childrenContainerRef = useRef<HTMLDivElement>(null);\n  const openDrawer = useRightDrawerStore((s) => s.open);\n  const closeDrawer = useRightDrawerStore((s) => s.close);\n  const storeIsOpen = useRightDrawerStore((s) => s.isOpen(identifier));\n  const isOpen = useRightDrawerStore((s) => s.isOpen(identifier));\n\n  useScrollBlockage({\n    disableScroll: isOpen,\n    key: identifier ? `right_drawer_${identifier}` : 'right_drawer',\n  });\n\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      try {\n        if (!panelRef.current) return;\n\n        // Check if drawer is open and click outside is enabled\n        const isClickAble = isOpen && closeOnOutsideClick;\n\n        // Check if click is outside the drawer panel\n        const isClickOutside =\n          event.target && !panelRef.current.contains(event.target as Node);\n\n        // Check if event propagation has been stopped\n        const isAtTopAndVisible = isElementAtTopAndNotCovered(panelRef.current);\n\n        if (\n          (isClickAble && isClickOutside && isAtTopAndVisible) ||\n          !event.target\n        ) {\n          closeDrawer(identifier);\n          onClose?.();\n        }\n      } catch (_e) {\n        closeDrawer(identifier);\n        onClose?.();\n      }\n    };\n\n    window.addEventListener('mousedown', handleClickOutside);\n    return () => window.removeEventListener('mousedown', handleClickOutside);\n  }, [isOpen, closeDrawer, onClose, closeOnOutsideClick, identifier]); // Make sure the effect runs only if isOpen or close changes\n\n  const onCloseRef = useRef(onClose);\n  useEffect(() => {\n    onCloseRef.current = onClose;\n  }, [onClose]);\n\n  useEffect(() => {\n    if (isOpenProp === undefined) return;\n\n    // prevent redundant set → re-render → effect loop\n    if (isOpenProp === storeIsOpen) return;\n\n    if (isOpenProp) {\n      openDrawer(identifier);\n    } else {\n      closeDrawer(identifier);\n      onCloseRef.current?.();\n    }\n  }, [isOpenProp, storeIsOpen, identifier, openDrawer, closeDrawer]);\n\n  const handleSpareSpaceClick: MouseEventHandler<HTMLDivElement> = (e) => {\n    // Check if the click trigger the background\n    if (e.target !== e.currentTarget) {\n      return;\n    }\n\n    if (isMobile) {\n      closeDrawer(identifier);\n      onClose?.();\n    }\n  };\n\n  return (\n    <div className=\"fixed top-0 right-0 z-50 flex h-full justify-end\">\n      <MaxWidthSmoother isHidden={!isOpen} align=\"right\">\n        <Container\n          className=\"relative flex h-screen w-screen flex-col text-text md:w-[400px]\"\n          ref={panelRef}\n          roundedSize=\"none\"\n        >\n          <div className=\"flex flex-col gap-3 p-6\">\n            <div className=\"flex justify-between gap-3\">\n              <div>\n                {backButton && (\n                  <Button\n                    variant={ButtonVariant.HOVERABLE}\n                    color={ButtonColor.TEXT}\n                    label={backButton.text ?? 'Go back'}\n                    onClick={backButton.onBack}\n                    Icon={ChevronLeft}\n                  >\n                    {backButton?.text}\n                  </Button>\n                )}\n              </div>\n              <div>\n                <Button\n                  variant={ButtonVariant.HOVERABLE}\n                  color={ButtonColor.TEXT}\n                  label=\"Close\"\n                  className=\"ml-auto\"\n                  onClick={() => {\n                    closeDrawer(identifier);\n                    onClose?.();\n                  }}\n                  Icon={X}\n                  size={ButtonSize.ICON_MD}\n                />\n              </div>\n            </div>\n            {title && (\n              <h2 className=\"flex items-center justify-center font-bold text-lg\">\n                {title}\n              </h2>\n            )}\n            {header}\n          </div>\n\n          <div className=\"flex h-full flex-col overflow-y-auto p-2\">\n            <div\n              className=\"flex flex-1 flex-col\"\n              onClick={handleSpareSpaceClick}\n              ref={childrenContainerRef}\n              role=\"region\"\n            >\n              {children}\n            </div>\n          </div>\n        </Container>\n      </MaxWidthSmoother>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+NA,MAAaA,eAAqC,EAChD,OACA,YACA,UACA,QACA,sBAAsB,MACtB,YACA,QAAQ,YACR,cACI;CACJ,MAAM,EAAE,aAAa,UAAU,KAAK;CACpC,MAAM,WAAW,OAAuB,KAAK;CAC7C,MAAM,uBAAuB,OAAuB,KAAK;CACzD,MAAM,aAAa,qBAAqB,MAAM,EAAE,KAAK;CACrD,MAAM,cAAc,qBAAqB,MAAM,EAAE,MAAM;CACvD,MAAM,cAAc,qBAAqB,MAAM,EAAE,OAAO,WAAW,CAAC;CACpE,MAAM,SAAS,qBAAqB,MAAM,EAAE,OAAO,WAAW,CAAC;AAE/D,mBAAkB;EAChB,eAAe;EACf,KAAK,aAAa,gBAAgB,eAAe;EAClD,CAAC;AAEF,iBAAgB;EACd,MAAM,sBAAsB,UAAsB;AAChD,OAAI;AACF,QAAI,CAAC,SAAS,QAAS;IAGvB,MAAM,cAAc,UAAU;IAG9B,MAAM,iBACJ,MAAM,UAAU,CAAC,SAAS,QAAQ,SAAS,MAAM,OAAe;IAGlE,MAAM,oBAAoB,4BAA4B,SAAS,QAAQ;AAEvE,QACG,eAAe,kBAAkB,qBAClC,CAAC,MAAM,QACP;AACA,iBAAY,WAAW;AACvB,gBAAW;;YAEN,IAAI;AACX,gBAAY,WAAW;AACvB,eAAW;;;AAIf,SAAO,iBAAiB,aAAa,mBAAmB;AACxD,eAAa,OAAO,oBAAoB,aAAa,mBAAmB;IACvE;EAAC;EAAQ;EAAa;EAAS;EAAqB;EAAW,CAAC;CAEnE,MAAM,aAAa,OAAO,QAAQ;AAClC,iBAAgB;AACd,aAAW,UAAU;IACpB,CAAC,QAAQ,CAAC;AAEb,iBAAgB;AACd,MAAI,eAAe,OAAW;AAG9B,MAAI,eAAe,YAAa;AAEhC,MAAI,WACF,YAAW,WAAW;OACjB;AACL,eAAY,WAAW;AACvB,cAAW,WAAW;;IAEvB;EAAC;EAAY;EAAa;EAAY;EAAY;EAAY,CAAC;CAElE,MAAMC,yBAA4D,MAAM;AAEtE,MAAI,EAAE,WAAW,EAAE,cACjB;AAGF,MAAI,UAAU;AACZ,eAAY,WAAW;AACvB,cAAW;;;AAIf,QACE,oBAAC;EAAI,WAAU;YACb,oBAAC;GAAiB,UAAU,CAAC;GAAQ,OAAM;aACzC,qBAAC;IACC,WAAU;IACV,KAAK;IACL,aAAY;eAEZ,qBAAC;KAAI,WAAU;;MACb,qBAAC;OAAI,WAAU;kBACb,oBAAC,mBACE,cACC,oBAAC;QACC,SAAS,cAAc;QACvB,OAAO,YAAY;QACnB,OAAO,WAAW,QAAQ;QAC1B,SAAS,WAAW;QACpB,MAAM;kBAEL,YAAY;SACN,GAEP,EACN,oBAAC,mBACC,oBAAC;QACC,SAAS,cAAc;QACvB,OAAO,YAAY;QACnB,OAAM;QACN,WAAU;QACV,eAAe;AACb,qBAAY,WAAW;AACvB,oBAAW;;QAEb,MAAM;QACN,MAAM,WAAW;SACjB,GACE;QACF;MACL,SACC,oBAAC;OAAG,WAAU;iBACX;QACE;MAEN;;MACG,EAEN,oBAAC;KAAI,WAAU;eACb,oBAAC;MACC,WAAU;MACV,SAAS;MACT,KAAK;MACL,MAAK;MAEJ;OACG;MACF;KACI;IACK;GACf"}
+{"version":3,"file":"RightDrawer.mjs","names":["RightDrawer: FC<RightDrawerProps>","handleSpareSpaceClick: MouseEventHandler<HTMLDivElement>","handleSpareSpaceKeyDown: KeyboardEventHandler<HTMLDivElement>"],"sources":["../../../../src/components/RightDrawer/RightDrawer.tsx"],"sourcesContent":["'use client';\n\nimport { ChevronLeft, X } from 'lucide-react';\nimport {\n  type FC,\n  type KeyboardEventHandler,\n  type MouseEventHandler,\n  type ReactNode,\n  useEffect,\n  useRef,\n} from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { useDevice } from '../../hooks/useDevice';\nimport { useScrollBlockage } from '../../hooks/useScrollBlockage';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { Container } from '../Container';\nimport { KeyboardShortcut } from '../KeyboardShortcut';\nimport { MaxWidthSmoother } from '../MaxWidthSmoother/index';\nimport { Popover } from '../Popover';\nimport { isElementAtTopAndNotCovered } from './isElementAtTopAndNotCovered';\nimport { useRightDrawerStore } from './useRightDrawerStore';\n\n/**\n * Configuration for the back button functionality in the RightDrawer\n *\n * @interface BackButtonProps\n */\ntype BackButtonProps = {\n  /** Callback function triggered when the back button is clicked */\n  onBack: () => void;\n  /** Optional custom text for the back buttoDefaults to \"Go back\" if not provided */\n  text?: string;\n};\n\n/**\n * Props configuration for the RightDrawer component\n *\n * @interface RightDrawerProps\n */\ntype RightDrawerProps = {\n  /**\n   * Title displayed in the drawer header\n   */\n  title?: ReactNode;\n\n  /**\n   * Unique identifier for the drawer instancRequired for store management\n   */\n  identifier: string;\n\n  /** The content to be displayed inside the drawer */\n  children?: ReactNode;\n\n  /**\n   * Optional header content displayed below the title\n   */\n  header?: ReactNode;\n\n  /**\n   * Optional footer content pinned to the bottom of the drawer\n   */\n  footer?: ReactNode;\n\n  /**\n   * Whether the drawer should close when clicking outside of it\n   * @default true\n   */\n  closeOnOutsideClick?: boolean;\n\n  /**\n   * Configuration for an optional back button in the drawer header\n   */\n  backButton?: BackButtonProps;\n\n  /**\n   * External control for the open statWhen provided, overrides internal store state\n   */\n  isOpen?: boolean;\n\n  /**\n   * Callback function triggered when the drawer is closed\n   */\n  onClose?: () => void;\n};\n\nexport const RightDrawer: FC<RightDrawerProps> = ({\n  title,\n  identifier,\n  children,\n  header,\n  footer,\n  closeOnOutsideClick = true,\n  backButton,\n  isOpen: isOpenProp,\n  onClose,\n}) => {\n  const content = useIntlayer('right-drawer');\n  const { isMobile } = useDevice('md');\n  const panelRef = useRef<HTMLDivElement>(null);\n  const childrenContainerRef = useRef<HTMLDivElement>(null);\n  const openDrawer = useRightDrawerStore((s) => s.open);\n  const closeDrawer = useRightDrawerStore((s) => s.close);\n  const storeIsOpen = useRightDrawerStore((s) => s.isOpen(identifier));\n  const isOpen = useRightDrawerStore((s) => s.isOpen(identifier));\n\n  useScrollBlockage({\n    disableScroll: isOpen,\n    key: identifier ? `right_drawer_${identifier}` : 'right_drawer',\n  });\n\n  // Handle Click Outside\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      try {\n        if (!panelRef.current) return;\n\n        const isClickAble = isOpen && closeOnOutsideClick;\n        const isClickOutside =\n          event.target && !panelRef.current.contains(event.target as Node);\n        const isAtTopAndVisible = isElementAtTopAndNotCovered(panelRef.current);\n\n        if (\n          (isClickAble && isClickOutside && isAtTopAndVisible) ||\n          !event.target\n        ) {\n          closeDrawer(identifier);\n          onClose?.();\n        }\n      } catch (_e) {\n        closeDrawer(identifier);\n        onClose?.();\n      }\n    };\n\n    window.addEventListener('mousedown', handleClickOutside);\n    return () => window.removeEventListener('mousedown', handleClickOutside);\n  }, [isOpen, closeDrawer, onClose, closeOnOutsideClick, identifier]);\n\n  const onCloseRef = useRef(onClose);\n  useEffect(() => {\n    onCloseRef.current = onClose;\n  }, [onClose]);\n\n  useEffect(() => {\n    if (isOpenProp === undefined) return;\n    if (isOpenProp === storeIsOpen) return;\n\n    if (isOpenProp) {\n      openDrawer(identifier);\n    } else {\n      closeDrawer(identifier);\n      onCloseRef.current?.();\n    }\n  }, [isOpenProp, storeIsOpen, identifier, openDrawer, closeDrawer]);\n\n  const handleSpareSpaceClick: MouseEventHandler<HTMLDivElement> = (e) => {\n    if (e.target !== e.currentTarget) {\n      return;\n    }\n    if (isMobile) {\n      closeDrawer(identifier);\n      onClose?.();\n    }\n  };\n\n  // Handle Keyboard on Spare Space (Linter Fix)\n  const handleSpareSpaceKeyDown: KeyboardEventHandler<HTMLDivElement> = (e) => {\n    if (e.target !== e.currentTarget) return;\n\n    // Allow closing via Enter or Space if focused on the spare area\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      if (isMobile) {\n        closeDrawer(identifier);\n        onClose?.();\n      }\n    }\n  };\n\n  return (\n    <div className=\"fixed top-0 right-0 z-50 flex h-full justify-end\">\n      <MaxWidthSmoother isHidden={!isOpen} align=\"right\">\n        <Container\n          className=\"relative flex h-screen w-screen flex-col text-text md:w-[400px]\"\n          ref={panelRef}\n          roundedSize=\"none\"\n        >\n          {/* Header */}\n          <div className=\"flex shrink-0 flex-col gap-3 px-6 pt-6\">\n            <div className=\"flex justify-between gap-3\">\n              <div>\n                {backButton && (\n                  <Button\n                    variant={ButtonVariant.HOVERABLE}\n                    color={ButtonColor.TEXT}\n                    label={backButton.text ?? content.goBack.value}\n                    onClick={backButton.onBack}\n                    Icon={ChevronLeft}\n                  >\n                    {backButton?.text}\n                  </Button>\n                )}\n              </div>\n              <div>\n                <Popover identifier=\"close-drawer\">\n                  <Button\n                    variant={ButtonVariant.HOVERABLE}\n                    color={ButtonColor.TEXT}\n                    label=\"Close\"\n                    className=\"ml-auto\"\n                    onClick={() => {\n                      closeDrawer(identifier);\n                      onClose?.();\n                    }}\n                    Icon={X}\n                    size={ButtonSize.ICON_MD}\n                  />\n\n                  <Popover.Detail identifier=\"close-drawer\">\n                    <div className=\"flex items-center gap-2 p-2\">\n                      <span className=\"whitespace-nowrap text-neutral text-xs\">\n                        {content.closeDrawer}\n                      </span>\n                      <KeyboardShortcut\n                        shortcut=\"Escape\"\n                        size=\"sm\"\n                        onTriggered={() => {\n                          closeDrawer(identifier);\n                          onClose?.();\n                        }}\n                      />\n                    </div>\n                  </Popover.Detail>\n                </Popover>\n              </div>\n            </div>\n            {title && (\n              <h2 className=\"flex items-center justify-center font-bold text-lg\">\n                {title}\n              </h2>\n            )}\n            {header}\n          </div>\n\n          {/* Body */}\n          <div className=\"flex min-h-0 flex-1 flex-col overflow-y-auto p-2\">\n            {/** biome-ignore lint/a11y/useSemanticElements: This div is used to handle the spare space click and keydown events */}\n            <div\n              className=\"flex flex-1 flex-col outline-none\"\n              onClick={handleSpareSpaceClick}\n              onKeyDown={handleSpareSpaceKeyDown}\n              ref={childrenContainerRef}\n              role=\"button\" // Semantically acts as a button area\n              tabIndex={0} // Makes it focusable to receive key events\n            >\n              {children}\n            </div>\n          </div>\n\n          {/* Footer */}\n          {footer && <div className=\"shrink-0\">{footer}</div>}\n        </Container>\n      </MaxWidthSmoother>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAqFA,MAAaA,eAAqC,EAChD,OACA,YACA,UACA,QACA,QACA,sBAAsB,MACtB,YACA,QAAQ,YACR,cACI;CACJ,MAAM,UAAU,YAAY,eAAe;CAC3C,MAAM,EAAE,aAAa,UAAU,KAAK;CACpC,MAAM,WAAW,OAAuB,KAAK;CAC7C,MAAM,uBAAuB,OAAuB,KAAK;CACzD,MAAM,aAAa,qBAAqB,MAAM,EAAE,KAAK;CACrD,MAAM,cAAc,qBAAqB,MAAM,EAAE,MAAM;CACvD,MAAM,cAAc,qBAAqB,MAAM,EAAE,OAAO,WAAW,CAAC;CACpE,MAAM,SAAS,qBAAqB,MAAM,EAAE,OAAO,WAAW,CAAC;AAE/D,mBAAkB;EAChB,eAAe;EACf,KAAK,aAAa,gBAAgB,eAAe;EAClD,CAAC;AAGF,iBAAgB;EACd,MAAM,sBAAsB,UAAsB;AAChD,OAAI;AACF,QAAI,CAAC,SAAS,QAAS;IAEvB,MAAM,cAAc,UAAU;IAC9B,MAAM,iBACJ,MAAM,UAAU,CAAC,SAAS,QAAQ,SAAS,MAAM,OAAe;IAClE,MAAM,oBAAoB,4BAA4B,SAAS,QAAQ;AAEvE,QACG,eAAe,kBAAkB,qBAClC,CAAC,MAAM,QACP;AACA,iBAAY,WAAW;AACvB,gBAAW;;YAEN,IAAI;AACX,gBAAY,WAAW;AACvB,eAAW;;;AAIf,SAAO,iBAAiB,aAAa,mBAAmB;AACxD,eAAa,OAAO,oBAAoB,aAAa,mBAAmB;IACvE;EAAC;EAAQ;EAAa;EAAS;EAAqB;EAAW,CAAC;CAEnE,MAAM,aAAa,OAAO,QAAQ;AAClC,iBAAgB;AACd,aAAW,UAAU;IACpB,CAAC,QAAQ,CAAC;AAEb,iBAAgB;AACd,MAAI,eAAe,OAAW;AAC9B,MAAI,eAAe,YAAa;AAEhC,MAAI,WACF,YAAW,WAAW;OACjB;AACL,eAAY,WAAW;AACvB,cAAW,WAAW;;IAEvB;EAAC;EAAY;EAAa;EAAY;EAAY;EAAY,CAAC;CAElE,MAAMC,yBAA4D,MAAM;AACtE,MAAI,EAAE,WAAW,EAAE,cACjB;AAEF,MAAI,UAAU;AACZ,eAAY,WAAW;AACvB,cAAW;;;CAKf,MAAMC,2BAAiE,MAAM;AAC3E,MAAI,EAAE,WAAW,EAAE,cAAe;AAGlC,MAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,KAAE,gBAAgB;AAClB,OAAI,UAAU;AACZ,gBAAY,WAAW;AACvB,eAAW;;;;AAKjB,QACE,oBAAC;EAAI,WAAU;YACb,oBAAC;GAAiB,UAAU,CAAC;GAAQ,OAAM;aACzC,qBAAC;IACC,WAAU;IACV,KAAK;IACL,aAAY;;KAGZ,qBAAC;MAAI,WAAU;;OACb,qBAAC;QAAI,WAAU;mBACb,oBAAC,mBACE,cACC,oBAAC;SACC,SAAS,cAAc;SACvB,OAAO,YAAY;SACnB,OAAO,WAAW,QAAQ,QAAQ,OAAO;SACzC,SAAS,WAAW;SACpB,MAAM;mBAEL,YAAY;UACN,GAEP,EACN,oBAAC,mBACC,qBAAC;SAAQ,YAAW;oBAClB,oBAAC;UACC,SAAS,cAAc;UACvB,OAAO,YAAY;UACnB,OAAM;UACN,WAAU;UACV,eAAe;AACb,uBAAY,WAAW;AACvB,sBAAW;;UAEb,MAAM;UACN,MAAM,WAAW;WACjB,EAEF,oBAAC,QAAQ;UAAO,YAAW;oBACzB,qBAAC;WAAI,WAAU;sBACb,oBAAC;YAAK,WAAU;sBACb,QAAQ;aACJ,EACP,oBAAC;YACC,UAAS;YACT,MAAK;YACL,mBAAmB;AACjB,yBAAY,WAAW;AACvB,wBAAW;;aAEb;YACE;WACS;UACT,GACN;SACF;OACL,SACC,oBAAC;QAAG,WAAU;kBACX;SACE;OAEN;;OACG;KAGN,oBAAC;MAAI,WAAU;gBAEb,oBAAC;OACC,WAAU;OACV,SAAS;OACT,WAAW;OACX,KAAK;OACL,MAAK;OACL,UAAU;OAET;QACG;OACF;KAGL,UAAU,oBAAC;MAAI,WAAU;gBAAY;OAAa;;KACzC;IACK;GACf"}

package/dist/esm/components/RightDrawer/rightDrawer.content.mjs

@@ -0,0 +1,51 @@
+import { t } from "intlayer";
+
+//#region src/components/RightDrawer/rightDrawer.content.ts
+const rightDrawerContent = {
+	key: "right-drawer",
+	content: {
+		goBack: t({
+			en: "Go back",
+			"en-GB": "Go back",
+			ru: "Назад",
+			ja: "戻る",
+			fr: "Retour",
+			ko: "뒤로",
+			zh: "返回",
+			es: "Volver",
+			de: "Zurück",
+			ar: "رجوع",
+			it: "Indietro",
+			pt: "Voltar",
+			hi: "वापस जाएं",
+			tr: "Geri dön",
+			pl: "Wstecz",
+			id: "Kembali",
+			vi: "Quay lại"
+		}),
+		closeDrawer: t({
+			en: "Close Drawer",
+			"en-GB": "Close Drawer",
+			ru: "Закрыть панель",
+			ja: "引き出しを閉じる",
+			fr: "Fermer le tiroir",
+			ko: "서랍 닫기",
+			zh: "关闭抽屉",
+			es: "Cerrar cajón",
+			de: "Schublade schließen",
+			ar: "إغلاق الدرج",
+			it: "Chiudi cassetto",
+			pt: "Fechar gaveta",
+			hi: "दराज बंद करें",
+			tr: "Çekmeceyi kapat",
+			pl: "Zamknij szufladę",
+			id: "Tutup laci",
+			vi: "Đóng ngăn kéo"
+		})
+	}
+};
+var rightDrawer_content_default = rightDrawerContent;
+
+//#endregion
+export { rightDrawer_content_default as default };
+//# sourceMappingURL=rightDrawer.content.mjs.map

package/dist/esm/components/RightDrawer/rightDrawer.content.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"rightDrawer.content.mjs","names":[],"sources":["../../../../src/components/RightDrawer/rightDrawer.content.ts"],"sourcesContent":["import { type Dictionary, t } from 'intlayer';\n\nconst rightDrawerContent = {\n  key: 'right-drawer',\n  content: {\n    goBack: t({\n      en: 'Go back',\n      'en-GB': 'Go back',\n      ru: 'Назад',\n      ja: '戻る',\n      fr: 'Retour',\n      ko: '뒤로',\n      zh: '返回',\n      es: 'Volver',\n      de: 'Zurück',\n      ar: 'رجوع',\n      it: 'Indietro',\n      pt: 'Voltar',\n      hi: 'वापस जाएं',\n      tr: 'Geri dön',\n      pl: 'Wstecz',\n      id: 'Kembali',\n      vi: 'Quay lại',\n    }),\n    closeDrawer: t({\n      en: 'Close Drawer',\n      'en-GB': 'Close Drawer',\n      ru: 'Закрыть панель',\n      ja: '引き出しを閉じる',\n      fr: 'Fermer le tiroir',\n      ko: '서랍 닫기',\n      zh: '关闭抽屉',\n      es: 'Cerrar cajón',\n      de: 'Schublade schließen',\n      ar: 'إغلاق الدرج',\n      it: 'Chiudi cassetto',\n      pt: 'Fechar gaveta',\n      hi: 'दराज बंद करें',\n      tr: 'Çekmeceyi kapat',\n      pl: 'Zamknij szufladę',\n      id: 'Tutup laci',\n      vi: 'Đóng ngăn kéo',\n    }),\n  },\n} satisfies Dictionary;\n\nexport default rightDrawerContent;\n"],"mappings":";;;AAEA,MAAM,qBAAqB;CACzB,KAAK;CACL,SAAS;EACP,QAAQ,EAAE;GACR,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACF,aAAa,EAAE;GACb,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACH;CACF;AAED,kCAAe"}

package/dist/esm/components/Table/Table.mjs

@@ -2,8 +2,8 @@
 
 import { cn } from "../../utils/cn.mjs";
 import { Button } from "../Button/Button.mjs";
-import { Modal, ModalSize } from "../Modal/Modal.mjs";
 import { ExpandCollapse } from "../ExpandCollapse/ExpandCollapse.mjs";
+import { Modal, ModalSize } from "../Modal/Modal.mjs";
 import { MoveDiagonal } from "lucide-react";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/esm/components/index.mjs

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

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

@@ -1,5 +1,5 @@
 import { HTMLAttributes } from "react";
-import * as class_variance_authority_types9 from "class-variance-authority/types";
+import * as class_variance_authority_types4 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_types9.ClassProp) => string;
+} & class_variance_authority_types4.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_types113 from "@intlayer/types";
+import * as _intlayer_types34 from "@intlayer/types";
 
 //#region src/components/Breadcrumb/breadcrumb.content.d.ts
 declare const breadCrumbContent: {
   key: string;
   content: {
-    linkLabel: _intlayer_types113.TypedNodeModel<_intlayer_types113.NodeType.Translation, {
+    linkLabel: _intlayer_types34.TypedNodeModel<_intlayer_types34.NodeType.Translation, {
       en: string;
       fr: string;
       es: string;
@@ -23,7 +23,7 @@ declare const breadCrumbContent: {
       id: string;
       vi: string;
     }, {
-      nodeType: "translation" | _intlayer_types113.NodeType.Translation;
+      nodeType: _intlayer_types34.NodeType.Translation | "translation";
     } & {
       translation: {
         en: string;

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

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

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

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

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

@@ -1,5 +1,5 @@
 import { CSSProperties, HTMLAttributes, RefObject } from "react";
-import * as react_jsx_runtime16 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_runtime16.JSX.Element;
+}: BrowserProps) => react_jsx_runtime18.JSX.Element;
 //#endregion
 export { Browser, BrowserProps };
 //# sourceMappingURL=Browser.d.ts.map