@intlayer/design-system 7.3.2-canary.0 → 7.3.2-canary.1

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 { forwardRef, 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,8 +3,8 @@
 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 { ChevronRightIcon } from "lucide-react";
 import { cva } from "class-variance-authority";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { getIntlayer } from "@intlayer/core";

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

@@ -1,8 +1,8 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
-import { RotateCw } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
+import { RotateCw } from "lucide-react";
 import { cva } from "class-variance-authority";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useIntlayer } from "react-intlayer";

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

@@ -2,8 +2,8 @@
 
 import { cn } from "../../utils/cn.mjs";
 import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
-import { ChevronRight } from "lucide-react";
 import { useState } from "react";
+import { ChevronRight } from "lucide-react";
 import { cva } from "class-variance-authority";
 import { jsx, jsxs } from "react/jsx-runtime";
 

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 { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
 import { useUser } from "../../hooks/useUser/index.mjs";
+import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
 import { AutoCompleteTextarea } from "../TextArea/AutocompleteTextArea.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

@@ -2,9 +2,9 @@
 
 import { SaveForm } from "../DictionaryFieldEditor/SaveForm/SaveForm.mjs";
 import { NodeWrapper } from "./NodeWrapper/index.mjs";
+import { useEditedContent, useFocusUnmergedDictionary } from "@intlayer/editor-react";
 import { createElement, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEditedContent, useFocusUnmergedDictionary } from "@intlayer/editor-react";
 
 //#region src/components/DictionaryEditor/DictionaryEditor.tsx
 const DictionaryEditor = ({ dictionary, mode, onDelete, ...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,8 +1,8 @@
 '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 { useAuditContentDeclarationField } from "../../../hooks/reactQuery.mjs";
 import { InputVariant } from "../../Input/Input.mjs";
 import { Label } from "../../Label/index.mjs";
 import { SwitchSelector, SwitchSelectorColor, SwitchSelectorSize } from "../../SwitchSelector/index.mjs";
@@ -12,12 +12,12 @@ import { ContentEditorInput } from "../../ContentEditor/ContentEditorInput.mjs";
 import { ContentEditorTextArea } from "../../ContentEditor/ContentEditorTextArea.mjs";
 import { MarkdownRenderer } from "../../MarkDownRender/MarkDownRender.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 { ContentEditor } from "./ContentEditor.mjs";
 import { DictionaryDetailsForm } from "./DictionaryDetails/DictionaryDetailsForm.mjs";
 import { JSONEditor } from "./JSONEditor.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,12 +1,12 @@
 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 configuration from "@intlayer/config/built";
 import { NodeType } from "@intlayer/types";
 import { camelCaseToSentence } from "@intlayer/config/client";
 

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/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,8 +2,8 @@
 
 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 { MinusIcon } from "lucide-react";
 import { cva } from "class-variance-authority";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 

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/LocaleSwitcherContentDropDown/LocaleSwitcherContent.mjs

@@ -1,14 +1,14 @@
 'use client';
 
+import { usePersistedStore } from "../../hooks/usePersistedStore.mjs";
 import { Container } from "../Container/index.mjs";
 import { Button, ButtonColor, ButtonSize, ButtonTextAlign, ButtonVariant } from "../Button/Button.mjs";
-import { usePersistedStore } from "../../hooks/usePersistedStore.mjs";
 import { Input } from "../Input/Input.mjs";
 import { SwitchSelector, SwitchSelectorColor, SwitchSelectorSize } from "../SwitchSelector/index.mjs";
 import { DropDown } from "../DropDown/index.mjs";
 import { useLocaleSwitcherContent } from "./LocaleSwitcherContentContext.mjs";
-import { Check, Globe, MoveVertical } from "lucide-react";
 import { useCallback, useMemo, useRef, useState } from "react";
+import { Check, Globe, MoveVertical } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { getHTMLTextDir, getLocaleName } from "@intlayer/core";
 import { useIntlayer, useLocale } from "react-intlayer";

package/dist/esm/components/LocaleSwitcherDropDown/LocaleSwitcher.mjs

@@ -4,8 +4,8 @@ import { Container } from "../Container/index.mjs";
 import { Button, ButtonColor, ButtonTextAlign, ButtonVariant } from "../Button/Button.mjs";
 import { Input } from "../Input/Input.mjs";
 import { DropDown } from "../DropDown/index.mjs";
-import { MoveVertical } from "lucide-react";
 import { useCallback, useMemo, useRef, useState } from "react";
+import { MoveVertical } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { getHTMLTextDir, getLocaleName } from "@intlayer/core";
 import { useIntlayer } from "react-intlayer";

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

@@ -1,13 +1,13 @@
 'use client';
 
+import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
+import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { cn } from "../../utils/cn.mjs";
 import { Container } from "../Container/index.mjs";
 import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
-import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
-import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { H3 } from "../Headers/index.mjs";
-import { X } from "lucide-react";
 import { useEffect } from "react";
+import { X } from "lucide-react";
 import { cva } from "class-variance-authority";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { motion } from "framer-motion";
@@ -34,7 +34,7 @@ let ModalSize = /* @__PURE__ */ function(ModalSize$1) {
 * Class name variants for different modal sizes using class-variance-authority
 * Defines responsive sizing and scrollable content for modal containers
 */
-const modalVariants = cva("cursor-default justify-center overflow-auto p-3 shadow-sm", {
+const modalVariants = cva("cursor-default overflow-auto p-3 shadow-sm", {
 	variants: { size: {
 		sm: "h-auto max-h-[30vh] w-[95vw] max-w-xl",
 		md: "h-auto max-h-[50vh] w-[95vw] max-w-xl",

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.mjs","names":["m","Modal: FC<ModalProps>"],"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { motion as m } from 'framer-motion';\nimport { X } from 'lucide-react';\nimport { type FC, type ReactNode, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useGetElementOrWindow, useScrollBlockage } from '../../hooks/index';\nimport { cn } from '../../utils/cn';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { Container, type ContainerProps } from '../Container';\nimport { H3 } from '../Headers';\n\n/**\n * Enumeration of available modal sizes\n */\nexport enum ModalSize {\n  /** Small modal: max height 30vh, max width xl */\n  SM = 'sm',\n  /** Medium modal: max height 50vh, max width xl */\n  MD = 'md',\n  /** Large modal: max height 70vh, max width 2xl */\n  LG = 'lg',\n  /** Extra large modal: max height 95vh, max width 6xl */\n  XL = 'xl',\n  /** Unset size: max height 95vh, full width responsive */\n  UNSET = 'unset',\n}\n\n/**\n * Props for the Modal component\n */\ntype ModalProps = {\n  /** Content to be displayed inside the modal */\n  children: ReactNode;\n  /** Controls whether the modal is visible */\n  isOpen: boolean;\n  /** Callback function called when the modal should be closed */\n  onClose?: () => void;\n  /** Container element to render the modal into (defaults to document.body) */\n  container?: HTMLElement;\n  /** Whether to disable scrolling on the background content */\n  disableScroll?: boolean;\n  /** Whether to display a close button in the modal header */\n  hasCloseButton?: boolean;\n  /** Optional title displayed at the top of the modal */\n  title?: string;\n  /** Size variant for the modal */\n  size?: ModalSize | `${ModalSize}`;\n} & Pick<\n  ContainerProps,\n  | 'className'\n  | 'transparency'\n  | 'border'\n  | 'background'\n  | 'roundedSize'\n  | 'borderColor'\n  | 'padding'\n  | 'separator'\n  | 'gap'\n>;\n\n/**\n * Class name variants for different modal sizes using class-variance-authority\n * Defines responsive sizing and scrollable content for modal containers\n */\nconst modalVariants = cva(\n  'cursor-default justify-center overflow-auto p-3 shadow-sm',\n  {\n    variants: {\n      size: {\n        /** Small modal: height auto, max-height 30vh, width 95vw, max-width xl */\n        sm: 'h-auto max-h-[30vh] w-[95vw] max-w-xl',\n        /** Medium modal: height auto, max-height 50vh, width 95vw, max-width xl */\n        md: 'h-auto max-h-[50vh] w-[95vw] max-w-xl',\n        /** Large modal: height auto, max-height 70vh, width 95vw, max-width 2xl */\n        lg: 'h-auto max-h-[70vh] w-[95vw] max-w-2xl',\n        /** Extra large modal: height auto, max-height 95vh, width 95vw, max-width 6xl */\n        xl: 'h-auto max-h-[95vh] w-[95vw] max-w-6xl',\n        /** Unset modal: height auto, max-height 95vh, width 95vw, no max-width */\n        unset: 'h-auto max-h-[95vh] w-[95vw]',\n      },\n    },\n    defaultVariants: {\n      size: 'unset',\n    },\n  }\n);\n\n/**\n * Motion-enabled modal component with Framer Motion support\n * Extends Container component with motion capabilities for animations\n */\nconst MotionModal = m.create(Container);\n\n/**\n * Modal Component\n *\n * A highly customizable modal dialog component with portal rendering, Framer Motion animations,\n * and comprehensive accessibility features. Supports multiple size variants and scroll management.\n *\n * Features:\n * - Portal rendering to any container element (defaults to document.body)\n * - Smooth animations with Framer Motion\n * - Size variants: SM, MD, LG, XL, UNSET with responsive sizing\n * - Optional title and close button\n * - Background scroll prevention\n * - Click-outside-to-close functionality\n * - Full accessibility support with ARIA attributes\n * - Keyboard navigation support (ESC to close)\n * - Extensible styling with Container props\n *\n * @example\n * Basic usage:\n * ```jsx\n * <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>\n *   <p>Modal content goes here</p>\n * </Modal>\n * ```\n *\n * @example\n * With title and close button:\n * ```jsx\n * <Modal\n *   isOpen={isOpen}\n *   onClose={onClose}\n *   title=\"Confirm Action\"\n *   hasCloseButton\n *   size={ModalSize.LG}\n * >\n *   <div>\n *     <p>Are you sure you want to continue?</p>\n *     <Button onClick={onConfirm}>Confirm</Button>\n *   </div>\n * </Modal>\n * ```\n *\n * @example\n * Custom container and styling:\n * ```jsx\n * <Modal\n *   isOpen={isOpen}\n *   onClose={onClose}\n *   container={customContainer}\n *   background=\"card\"\n *   padding=\"lg\"\n *   border=\"default\"\n * >\n *   Content with custom styling\n * </Modal>\n * ```\n *\n * Accessibility Notes:\n * - Modal receives focus when opened\n * - Background content is hidden from screen readers when modal is open\n * - ESC key closes modal (handled by browser for role=\"dialog\")\n * - Click outside modal closes it\n * - Close button has descriptive label for screen readers\n *\n * @param props - Modal component props\n * @returns JSX element rendered via createPortal\n */\nexport const Modal: FC<ModalProps> = ({\n  children,\n  isOpen,\n  container,\n  disableScroll = true,\n  onClose,\n  hasCloseButton = false,\n  title,\n  size = ModalSize.MD,\n  className,\n  ...props\n}) => {\n  const containerElement = useGetElementOrWindow(container);\n\n  useScrollBlockage({ key: 'modal', disableScroll: isOpen && disableScroll });\n\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === 'Escape' && isOpen && onClose) {\n        onClose();\n      }\n    };\n\n    document.addEventListener('keydown', handleEscape);\n\n    return () => {\n      document.removeEventListener('keydown', handleEscape);\n    };\n  }, [isOpen, onClose]);\n\n  if (!containerElement) return <></>;\n\n  const hasTitle = typeof title === 'string';\n\n  return createPortal(\n    <m.div\n      className=\"invisible fixed top-0 left-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-auto bg-background/40 backdrop-blur\"\n      animate={isOpen ? 'visible' : 'invisible'}\n      variants={{\n        visible: {\n          opacity: 1,\n          visibility: 'visible',\n          transition: { duration: 0.1, when: 'beforeChildren' },\n        },\n        invisible: {\n          opacity: 0,\n          visibility: 'hidden',\n          transition: { duration: 0.1, when: 'afterChildren' },\n        },\n      }}\n      onClick={(e) => {\n        e.stopPropagation();\n        onClose?.();\n      }}\n      aria-hidden={!isOpen}\n    >\n      <MotionModal\n        onClick={(e) => e.stopPropagation()}\n        initial={{ scale: isOpen ? 0.5 : 1 }}\n        animate={{ scale: isOpen ? 1 : 0.5 }}\n        transition={{ duration: 0.3 }}\n        className={modalVariants({\n          size,\n          className,\n        })}\n        role=\"dialog\"\n        aria-modal\n        roundedSize=\"2xl\"\n        {...props}\n      >\n        <div\n          className={cn(\n            'cursor-default',\n            hasCloseButton && hasTitle\n              ? `flex items-start`\n              : hasCloseButton\n                ? `flex justify-end`\n                : hasTitle\n                  ? `items-center`\n                  : `hidden`\n          )}\n        >\n          {hasTitle && (\n            <H3 className=\"mt-2 mb-4 ml-4 flex items-center justify-center font-bold text-lg\">\n              {title}\n            </H3>\n          )}\n          {hasCloseButton && (\n            <Button\n              variant={ButtonVariant.HOVERABLE}\n              color={ButtonColor.TEXT}\n              label=\"Close modal\"\n              className=\"ml-auto\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onClose?.();\n              }}\n              Icon={X}\n              size={ButtonSize.ICON_MD}\n            />\n          )}\n        </div>\n        <div className=\"flex flex-1 flex-col items-center\">{children}</div>\n      </MotionModal>\n    </m.div>,\n    containerElement\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAgBA,IAAY,kDAAL;;AAEL;;AAEA;;AAEA;;AAEA;;AAEA;;;;;;;AAwCF,MAAM,gBAAgB,IACpB,6DACA;CACE,UAAU,EACR,MAAM;EAEJ,IAAI;EAEJ,IAAI;EAEJ,IAAI;EAEJ,IAAI;EAEJ,OAAO;EACR,EACF;CACD,iBAAiB,EACf,MAAM,SACP;CACF,CACF;;;;;AAMD,MAAM,cAAcA,OAAE,OAAO,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEvC,MAAaC,SAAyB,EACpC,UACA,QACA,WACA,gBAAgB,MAChB,SACA,iBAAiB,OACjB,OACA,OAAO,UAAU,IACjB,WACA,GAAG,YACC;CACJ,MAAM,mBAAmB,sBAAsB,UAAU;AAEzD,mBAAkB;EAAE,KAAK;EAAS,eAAe,UAAU;EAAe,CAAC;AAE3E,iBAAgB;EACd,MAAM,gBAAgB,UAAyB;AAC7C,OAAI,MAAM,QAAQ,YAAY,UAAU,QACtC,UAAS;;AAIb,WAAS,iBAAiB,WAAW,aAAa;AAElD,eAAa;AACX,YAAS,oBAAoB,WAAW,aAAa;;IAEtD,CAAC,QAAQ,QAAQ,CAAC;AAErB,KAAI,CAAC,iBAAkB,QAAO,mCAAK;CAEnC,MAAM,WAAW,OAAO,UAAU;AAElC,QAAO,aACL,oBAACD,OAAE;EACD,WAAU;EACV,SAAS,SAAS,YAAY;EAC9B,UAAU;GACR,SAAS;IACP,SAAS;IACT,YAAY;IACZ,YAAY;KAAE,UAAU;KAAK,MAAM;KAAkB;IACtD;GACD,WAAW;IACT,SAAS;IACT,YAAY;IACZ,YAAY;KAAE,UAAU;KAAK,MAAM;KAAiB;IACrD;GACF;EACD,UAAU,MAAM;AACd,KAAE,iBAAiB;AACnB,cAAW;;EAEb,eAAa,CAAC;YAEd,qBAAC;GACC,UAAU,MAAM,EAAE,iBAAiB;GACnC,SAAS,EAAE,OAAO,SAAS,KAAM,GAAG;GACpC,SAAS,EAAE,OAAO,SAAS,IAAI,IAAK;GACpC,YAAY,EAAE,UAAU,IAAK;GAC7B,WAAW,cAAc;IACvB;IACA;IACD,CAAC;GACF,MAAK;GACL;GACA,aAAY;GACZ,GAAI;cAEJ,qBAAC;IACC,WAAW,GACT,kBACA,kBAAkB,WACd,qBACA,iBACE,qBACA,WACE,iBACA,SACT;eAEA,YACC,oBAAC;KAAG,WAAU;eACX;MACE,EAEN,kBACC,oBAAC;KACC,SAAS,cAAc;KACvB,OAAO,YAAY;KACnB,OAAM;KACN,WAAU;KACV,UAAU,MAAM;AACd,QAAE,iBAAiB;AACnB,iBAAW;;KAEb,MAAM;KACN,MAAM,WAAW;MACjB;KAEA,EACN,oBAAC;IAAI,WAAU;IAAqC;KAAe;IACvD;GACR,EACR,iBACD"}
+{"version":3,"file":"Modal.mjs","names":["m","Modal: FC<ModalProps>"],"sources":["../../../../src/components/Modal/Modal.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { motion as m } from 'framer-motion';\nimport { X } from 'lucide-react';\nimport { type FC, type ReactNode, useEffect } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useGetElementOrWindow, useScrollBlockage } from '../../hooks/index';\nimport { cn } from '../../utils/cn';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\nimport { Container, type ContainerProps } from '../Container';\nimport { H3 } from '../Headers';\n\n/**\n * Enumeration of available modal sizes\n */\nexport enum ModalSize {\n  /** Small modal: max height 30vh, max width xl */\n  SM = 'sm',\n  /** Medium modal: max height 50vh, max width xl */\n  MD = 'md',\n  /** Large modal: max height 70vh, max width 2xl */\n  LG = 'lg',\n  /** Extra large modal: max height 95vh, max width 6xl */\n  XL = 'xl',\n  /** Unset size: max height 95vh, full width responsive */\n  UNSET = 'unset',\n}\n\n/**\n * Props for the Modal component\n */\ntype ModalProps = {\n  /** Content to be displayed inside the modal */\n  children: ReactNode;\n  /** Controls whether the modal is visible */\n  isOpen: boolean;\n  /** Callback function called when the modal should be closed */\n  onClose?: () => void;\n  /** Container element to render the modal into (defaults to document.body) */\n  container?: HTMLElement;\n  /** Whether to disable scrolling on the background content */\n  disableScroll?: boolean;\n  /** Whether to display a close button in the modal header */\n  hasCloseButton?: boolean;\n  /** Optional title displayed at the top of the modal */\n  title?: string;\n  /** Size variant for the modal */\n  size?: ModalSize | `${ModalSize}`;\n} & Pick<\n  ContainerProps,\n  | 'className'\n  | 'transparency'\n  | 'border'\n  | 'background'\n  | 'roundedSize'\n  | 'borderColor'\n  | 'padding'\n  | 'separator'\n  | 'gap'\n>;\n\n/**\n * Class name variants for different modal sizes using class-variance-authority\n * Defines responsive sizing and scrollable content for modal containers\n */\nconst modalVariants = cva('cursor-default overflow-auto p-3 shadow-sm', {\n  variants: {\n    size: {\n      /** Small modal: height auto, max-height 30vh, width 95vw, max-width xl */\n      sm: 'h-auto max-h-[30vh] w-[95vw] max-w-xl',\n      /** Medium modal: height auto, max-height 50vh, width 95vw, max-width xl */\n      md: 'h-auto max-h-[50vh] w-[95vw] max-w-xl',\n      /** Large modal: height auto, max-height 70vh, width 95vw, max-width 2xl */\n      lg: 'h-auto max-h-[70vh] w-[95vw] max-w-2xl',\n      /** Extra large modal: height auto, max-height 95vh, width 95vw, max-width 6xl */\n      xl: 'h-auto max-h-[95vh] w-[95vw] max-w-6xl',\n      /** Unset modal: height auto, max-height 95vh, width 95vw, no max-width */\n      unset: 'h-auto max-h-[95vh] w-[95vw]',\n    },\n  },\n  defaultVariants: {\n    size: 'unset',\n  },\n});\n\n/**\n * Motion-enabled modal component with Framer Motion support\n * Extends Container component with motion capabilities for animations\n */\nconst MotionModal = m.create(Container);\n\n/**\n * Modal Component\n *\n * A highly customizable modal dialog component with portal rendering, Framer Motion animations,\n * and comprehensive accessibility features. Supports multiple size variants and scroll management.\n *\n * Features:\n * - Portal rendering to any container element (defaults to document.body)\n * - Smooth animations with Framer Motion\n * - Size variants: SM, MD, LG, XL, UNSET with responsive sizing\n * - Optional title and close button\n * - Background scroll prevention\n * - Click-outside-to-close functionality\n * - Full accessibility support with ARIA attributes\n * - Keyboard navigation support (ESC to close)\n * - Extensible styling with Container props\n *\n * @example\n * Basic usage:\n * ```jsx\n * <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>\n *   <p>Modal content goes here</p>\n * </Modal>\n * ```\n *\n * @example\n * With title and close button:\n * ```jsx\n * <Modal\n *   isOpen={isOpen}\n *   onClose={onClose}\n *   title=\"Confirm Action\"\n *   hasCloseButton\n *   size={ModalSize.LG}\n * >\n *   <div>\n *     <p>Are you sure you want to continue?</p>\n *     <Button onClick={onConfirm}>Confirm</Button>\n *   </div>\n * </Modal>\n * ```\n *\n * @example\n * Custom container and styling:\n * ```jsx\n * <Modal\n *   isOpen={isOpen}\n *   onClose={onClose}\n *   container={customContainer}\n *   background=\"card\"\n *   padding=\"lg\"\n *   border=\"default\"\n * >\n *   Content with custom styling\n * </Modal>\n * ```\n *\n * Accessibility Notes:\n * - Modal receives focus when opened\n * - Background content is hidden from screen readers when modal is open\n * - ESC key closes modal (handled by browser for role=\"dialog\")\n * - Click outside modal closes it\n * - Close button has descriptive label for screen readers\n *\n * @param props - Modal component props\n * @returns JSX element rendered via createPortal\n */\nexport const Modal: FC<ModalProps> = ({\n  children,\n  isOpen,\n  container,\n  disableScroll = true,\n  onClose,\n  hasCloseButton = false,\n  title,\n  size = ModalSize.MD,\n  className,\n  ...props\n}) => {\n  const containerElement = useGetElementOrWindow(container);\n\n  useScrollBlockage({ key: 'modal', disableScroll: isOpen && disableScroll });\n\n  useEffect(() => {\n    const handleEscape = (event: KeyboardEvent) => {\n      if (event.key === 'Escape' && isOpen && onClose) {\n        onClose();\n      }\n    };\n\n    document.addEventListener('keydown', handleEscape);\n\n    return () => {\n      document.removeEventListener('keydown', handleEscape);\n    };\n  }, [isOpen, onClose]);\n\n  if (!containerElement) return <></>;\n\n  const hasTitle = typeof title === 'string';\n\n  return createPortal(\n    <m.div\n      className=\"invisible fixed top-0 left-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-auto bg-background/40 backdrop-blur\"\n      animate={isOpen ? 'visible' : 'invisible'}\n      variants={{\n        visible: {\n          opacity: 1,\n          visibility: 'visible',\n          transition: { duration: 0.1, when: 'beforeChildren' },\n        },\n        invisible: {\n          opacity: 0,\n          visibility: 'hidden',\n          transition: { duration: 0.1, when: 'afterChildren' },\n        },\n      }}\n      onClick={(e) => {\n        e.stopPropagation();\n        onClose?.();\n      }}\n      aria-hidden={!isOpen}\n    >\n      <MotionModal\n        onClick={(e) => e.stopPropagation()}\n        initial={{ scale: isOpen ? 0.5 : 1 }}\n        animate={{ scale: isOpen ? 1 : 0.5 }}\n        transition={{ duration: 0.3 }}\n        className={modalVariants({\n          size,\n          className,\n        })}\n        role=\"dialog\"\n        aria-modal\n        roundedSize=\"2xl\"\n        {...props}\n      >\n        <div\n          className={cn(\n            'cursor-default',\n            hasCloseButton && hasTitle\n              ? `flex items-start`\n              : hasCloseButton\n                ? `flex justify-end`\n                : hasTitle\n                  ? `items-center`\n                  : `hidden`\n          )}\n        >\n          {hasTitle && (\n            <H3 className=\"mt-2 mb-4 ml-4 flex items-center justify-center font-bold text-lg\">\n              {title}\n            </H3>\n          )}\n          {hasCloseButton && (\n            <Button\n              variant={ButtonVariant.HOVERABLE}\n              color={ButtonColor.TEXT}\n              label=\"Close modal\"\n              className=\"ml-auto\"\n              onClick={(e) => {\n                e.stopPropagation();\n                onClose?.();\n              }}\n              Icon={X}\n              size={ButtonSize.ICON_MD}\n            />\n          )}\n        </div>\n        <div className=\"flex flex-1 flex-col items-center\">{children}</div>\n      </MotionModal>\n    </m.div>,\n    containerElement\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAgBA,IAAY,kDAAL;;AAEL;;AAEA;;AAEA;;AAEA;;AAEA;;;;;;;AAwCF,MAAM,gBAAgB,IAAI,8CAA8C;CACtE,UAAU,EACR,MAAM;EAEJ,IAAI;EAEJ,IAAI;EAEJ,IAAI;EAEJ,IAAI;EAEJ,OAAO;EACR,EACF;CACD,iBAAiB,EACf,MAAM,SACP;CACF,CAAC;;;;;AAMF,MAAM,cAAcA,OAAE,OAAO,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEvC,MAAaC,SAAyB,EACpC,UACA,QACA,WACA,gBAAgB,MAChB,SACA,iBAAiB,OACjB,OACA,OAAO,UAAU,IACjB,WACA,GAAG,YACC;CACJ,MAAM,mBAAmB,sBAAsB,UAAU;AAEzD,mBAAkB;EAAE,KAAK;EAAS,eAAe,UAAU;EAAe,CAAC;AAE3E,iBAAgB;EACd,MAAM,gBAAgB,UAAyB;AAC7C,OAAI,MAAM,QAAQ,YAAY,UAAU,QACtC,UAAS;;AAIb,WAAS,iBAAiB,WAAW,aAAa;AAElD,eAAa;AACX,YAAS,oBAAoB,WAAW,aAAa;;IAEtD,CAAC,QAAQ,QAAQ,CAAC;AAErB,KAAI,CAAC,iBAAkB,QAAO,mCAAK;CAEnC,MAAM,WAAW,OAAO,UAAU;AAElC,QAAO,aACL,oBAACD,OAAE;EACD,WAAU;EACV,SAAS,SAAS,YAAY;EAC9B,UAAU;GACR,SAAS;IACP,SAAS;IACT,YAAY;IACZ,YAAY;KAAE,UAAU;KAAK,MAAM;KAAkB;IACtD;GACD,WAAW;IACT,SAAS;IACT,YAAY;IACZ,YAAY;KAAE,UAAU;KAAK,MAAM;KAAiB;IACrD;GACF;EACD,UAAU,MAAM;AACd,KAAE,iBAAiB;AACnB,cAAW;;EAEb,eAAa,CAAC;YAEd,qBAAC;GACC,UAAU,MAAM,EAAE,iBAAiB;GACnC,SAAS,EAAE,OAAO,SAAS,KAAM,GAAG;GACpC,SAAS,EAAE,OAAO,SAAS,IAAI,IAAK;GACpC,YAAY,EAAE,UAAU,IAAK;GAC7B,WAAW,cAAc;IACvB;IACA;IACD,CAAC;GACF,MAAK;GACL;GACA,aAAY;GACZ,GAAI;cAEJ,qBAAC;IACC,WAAW,GACT,kBACA,kBAAkB,WACd,qBACA,iBACE,qBACA,WACE,iBACA,SACT;eAEA,YACC,oBAAC;KAAG,WAAU;eACX;MACE,EAEN,kBACC,oBAAC;KACC,SAAS,cAAc;KACvB,OAAO,YAAY;KACnB,OAAM;KACN,WAAU;KACV,UAAU,MAAM;AACd,QAAE,iBAAiB;AACnB,iBAAW;;KAEb,MAAM;KACN,MAAM,WAAW;MACjB;KAEA,EACN,oBAAC;IAAI,WAAU;IAAqC;KAAe;IACvD;GACR,EACR,iBACD"}

package/dist/esm/components/Navbar/MobileNavbar.mjs

@@ -1,9 +1,9 @@
 'use client';
 
-import { cn } from "../../utils/cn.mjs";
-import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
 import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { useScrollDetection } from "../../hooks/useScrollDetection.mjs";
+import { cn } from "../../utils/cn.mjs";
+import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
 import { Burger } from "./Burger.mjs";
 import { useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -1,14 +1,14 @@
 'use client';
 
-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 { Container } from "../Container/index.mjs";
+import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.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 { ChevronLeft, X } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/RightDrawer/RightDrawer.tsx

package/dist/esm/components/Select/Multiselect.mjs

@@ -3,8 +3,8 @@
 import { cn } from "../../utils/cn.mjs";
 import { Badge, BadgeColor } from "../Badge/index.mjs";
 import { Command, CommandRoot } from "../Command/index.mjs";
-import { Check, X } from "lucide-react";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Check, X } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/Select/Multiselect.tsx

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

@@ -1,7 +1,7 @@
 'use client';
 
-import { cn } from "../../utils/cn.mjs";
 import { useItemSelector } from "../../hooks/useItemSelector.mjs";
+import { cn } from "../../utils/cn.mjs";
 import { createElement, useEffect, useRef, useState } from "react";
 import { cva } from "class-variance-authority";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/esm/components/Tab/Tab.mjs

@@ -1,7 +1,7 @@
 'use client';
 
-import { cn } from "../../utils/cn.mjs";
 import { useHorizontalSwipe } from "../../hooks/useHorizontalSwipe.mjs";
+import { cn } from "../../utils/cn.mjs";
 import { TabSelector, TabSelectorColor } from "../TabSelector/TabSelector.mjs";
 import { useTabContext } from "./TabContext.mjs";
 import { Children, createContext, isValidElement, useState } from "react";

package/dist/esm/components/TabSelector/TabSelector.mjs

@@ -1,7 +1,7 @@
 'use client';
 
-import { cn } from "../../utils/cn.mjs";
 import { useItemSelector } from "../../hooks/useItemSelector.mjs";
+import { cn } from "../../utils/cn.mjs";
 import { cloneElement, useEffect, useRef } from "react";
 import { cva } from "class-variance-authority";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -4,8 +4,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 { MoveDiagonal } from "lucide-react";
 import { useState } from "react";
+import { MoveDiagonal } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/Table/Table.tsx

package/dist/esm/components/TextArea/AutocompleteTextArea.mjs

@@ -2,9 +2,9 @@
 
 import { useAutocomplete } from "../../hooks/reactQuery.mjs";
 import { AutoSizedTextArea } from "./AutoSizeTextArea.mjs";
+import { useConfiguration } from "@intlayer/editor-react";
 import { useEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { useConfiguration } from "@intlayer/editor-react";
 
 //#region src/components/TextArea/AutocompleteTextArea.tsx
 /**

package/dist/esm/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.mjs

@@ -4,8 +4,8 @@ import { Container } from "../Container/index.mjs";
 import { Button, ButtonVariant } from "../Button/Button.mjs";
 import { DropDown } from "../DropDown/index.mjs";
 import { Modes } from "./types.mjs";
-import { CircleDashed, Moon, Sun } from "lucide-react";
 import { useState } from "react";
+import { CircleDashed, Moon, Sun } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/ThemeSwitcherDropDown/DesktopThemeSwitcher.tsx