@intlayer/design-system 9.5.5 → 9.5.7

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

@@ -2,9 +2,9 @@
 
 import { cn } from "../../utils/cn.mjs";
 import { Button } from "../Button/Button.mjs";
+import { Check, Pencil, X } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Check, Pencil, X } from "lucide-react";
 
 //#region src/components/EditableField/EditableFieldLayout.tsx
 const EditableFieldLayout = ({ value = "", onCancel, onSave, onClick, children, isDisabled, ...props }) => {

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

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

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

@@ -1,9 +1,9 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
+import { Eye, EyeOff } from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Eye, EyeOff } from "lucide-react";
 
 //#region src/components/HideShow/index.tsx
 const insertBreaks = (str, groupSize = 6) => str.replace(new RegExp(`.{1,${groupSize}}`, "g"), "$&​");

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

@@ -3,9 +3,9 @@
 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 { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { ChevronRight } from "lucide-react";
 
 //#region src/components/IDE/FileTree.tsx
 const concatFilePath = (paths) => paths.join("/");

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

@@ -1,6 +1,6 @@
 import { Code } from "./Code.mjs";
-import { jsx } from "react/jsx-runtime";
 import cn from "cnfast";
+import { jsx } from "react/jsx-runtime";
 import { MarkdownRenderer as MarkdownRenderer$1 } from "react-intlayer/markdown";
 
 //#region src/components/IDE/MarkDownRender.tsx

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

@@ -33,8 +33,6 @@ const grammarAliases = {
 	cjs: "javascript",
 	console: "bash",
 	cts: "typescript",
-	dockerfile: "docker",
-	gql: "graphql",
 	htm: "html",
 	js: "javascript",
 	jsonc: "json5",
@@ -63,7 +61,7 @@ const PLAIN_TEXT_LANGUAGE = "plaintext";
 *
 * @example
 * resolveCodeLanguage('ts'); // { id: 'typescript', loadGrammar: fn }
-* resolveCodeLanguage('toml'); // { id: 'toml', loadGrammar: fn }
+* resolveCodeLanguage('yaml'); // { id: 'yaml', loadGrammar: fn }
 * resolveCodeLanguage('brainfuck'); // { id: 'plaintext', loadGrammar: null }
 */
 const resolveCodeLanguage = (language) => {

package/dist/esm/components/IDE/shikiLanguages.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"shikiLanguages.mjs","names":[],"sources":["../../../../src/components/IDE/shikiLanguages.ts"],"sourcesContent":["/**\n * Grammar registrations, as default-exported by the `shiki/langs/*` modules.\n */\nexport type LanguageGrammar =\n  typeof import('shiki/langs/typescript.mjs')['default'];\n\n/**\n * Loads a single Shiki grammar (and its embedded dependencies).\n */\nexport type GrammarLoader = () => Promise<{ default: LanguageGrammar }>;\n\n/**\n * Shiki grammar loaders, keyed by the canonical Shiki language id.\n *\n * Import specifiers are written as literals (never template strings) so that\n * bundlers can statically analyse them and emit one lazily fetched chunk per\n * grammar instead of bundling every language up front.\n */\nexport const grammarLoaders = {\n  astro: () => import('shiki/langs/astro.mjs'),\n  bash: () => import('shiki/langs/bash.mjs'),\n  css: () => import('shiki/langs/css.mjs'),\n  html: () => import('shiki/langs/html.mjs'),\n  javascript: () => import('shiki/langs/javascript.mjs'),\n  json: () => import('shiki/langs/json.mjs'),\n  json5: () => import('shiki/langs/json5.mjs'),\n  jsonc: () => import('shiki/langs/jsonc.mjs'),\n  markdown: () => import('shiki/langs/markdown.mjs'),\n  svelte: () => import('shiki/langs/svelte.mjs'),\n  tsx: () => import('shiki/langs/tsx.mjs'),\n  typescript: () => import('shiki/langs/typescript.mjs'),\n  vue: () => import('shiki/langs/vue.mjs'),\n  xml: () => import('shiki/langs/xml.mjs'),\n  yaml: () => import('shiki/langs/yaml.mjs'),\n  // 'angular-html': () => import('shiki/langs/angular-html.mjs'),\n  // 'angular-ts': () => import('shiki/langs/angular-ts.mjs'),\n  // c: () => import('shiki/langs/c.mjs'),\n  // cpp: () => import('shiki/langs/cpp.mjs'),\n  // csharp: () => import('shiki/langs/csharp.mjs'),\n  // csv: () => import('shiki/langs/csv.mjs'),\n  // dart: () => import('shiki/langs/dart.mjs'),\n  // diff: () => import('shiki/langs/diff.mjs'),\n  // docker: () => import('shiki/langs/docker.mjs'),\n  // go: () => import('shiki/langs/go.mjs'),\n  // graphql: () => import('shiki/langs/graphql.mjs'),\n  // http: () => import('shiki/langs/http.mjs'),\n  // ini: () => import('shiki/langs/ini.mjs'),\n  // java: () => import('shiki/langs/java.mjs'),\n  // kotlin: () => import('shiki/langs/kotlin.mjs'),\n  // less: () => import('shiki/langs/less.mjs'),\n  // lua: () => import('shiki/langs/lua.mjs'),\n  //   nginx: () => import('shiki/langs/nginx.mjs'),\n  // php: () => import('shiki/langs/php.mjs'),\n  // powershell: () => import('shiki/langs/powershell.mjs'),\n  // prisma: () => import('shiki/langs/prisma.mjs'),\n  // python: () => import('shiki/langs/python.mjs'),\n  // ruby: () => import('shiki/langs/ruby.mjs'),\n  // rust: () => import('shiki/langs/rust.mjs'),\n  // scss: () => import('shiki/langs/scss.mjs'),\n  // sql: () => import('shiki/langs/sql.mjs'),  // swift: () => import('shiki/langs/swift.mjs'),\n  // toml: () => import('shiki/langs/toml.mjs'),\n} satisfies Record<string, GrammarLoader>;\n\n/** Canonical Shiki language ids this package can highlight. */\nexport type ShikiLanguageId = keyof typeof grammarLoaders;\n\n/** Every canonical language id that ships with a grammar loader. */\nexport const shikiLanguageIds = Object.keys(\n  grammarLoaders\n) as ShikiLanguageId[];\n\n/**\n * Code fence names that are rendered by another grammar, mapped to the\n * canonical id that actually owns the grammar.\n */\nexport const grammarAliases = {\n  cjs: 'javascript',\n  console: 'bash',\n  cts: 'typescript',\n  dockerfile: 'docker',\n  gql: 'graphql',\n  htm: 'html',\n  js: 'javascript',\n  jsonc: 'json5',\n  jsx: 'tsx',\n  md: 'markdown',\n  mdx: 'markdown',\n  mjs: 'javascript',\n  mts: 'typescript',\n  postcss: 'css',\n  sh: 'bash',\n  shell: 'bash',\n  shellscript: 'bash',\n  ts: 'typescript',\n  yml: 'yaml',\n  zsh: 'bash',\n} satisfies Record<string, ShikiLanguageId>;\n\n/** Code fence names accepted as aliases of a canonical language id. */\nexport type ShikiLanguageAlias = keyof typeof grammarAliases;\n\n/**\n * Languages Shiki renders without any grammar. They are also used as the\n * fallback for languages this package does not ship a grammar for.\n */\nexport type PlainTextLanguage = 'plaintext' | 'text' | 'txt';\n\nconst PLAIN_TEXT_LANGUAGE = 'plaintext' satisfies PlainTextLanguage;\n\n/** Every language name accepted by the code block components. */\nexport type CodeLanguage =\n  | ShikiLanguageId\n  | ShikiLanguageAlias\n  | PlainTextLanguage;\n\n/**\n * A language name resolved to what Shiki actually needs to highlight it.\n */\nexport type ResolvedCodeLanguage = {\n  /** Canonical language id to pass to `codeToHtml` / `codeToHast`. */\n  id: ShikiLanguageId | PlainTextLanguage;\n  /** Grammar loader, or `null` when the language needs no grammar. */\n  loadGrammar: GrammarLoader | null;\n};\n\n/**\n * Resolve a code fence language name to a canonical Shiki id and its grammar\n * loader.\n *\n * Unknown names resolve to plain text rather than to an arbitrary grammar, so\n * that `codeToHtml` never receives a language it has not loaded.\n *\n * @param language - Language name coming from a code fence or a `lang` prop.\n *\n * @example\n * resolveCodeLanguage('ts'); // { id: 'typescript', loadGrammar: fn }\n * resolveCodeLanguage('toml'); // { id: 'toml', loadGrammar: fn }\n * resolveCodeLanguage('brainfuck'); // { id: 'plaintext', loadGrammar: null }\n */\nexport const resolveCodeLanguage = (\n  language: CodeLanguage | string | undefined | null\n): ResolvedCodeLanguage => {\n  const normalizedLanguage = (language ?? '').trim().toLowerCase();\n\n  const canonicalId =\n    grammarAliases[normalizedLanguage as ShikiLanguageAlias] ??\n    (normalizedLanguage as ShikiLanguageId);\n\n  const loadGrammar = grammarLoaders[canonicalId] as GrammarLoader | undefined;\n\n  if (!loadGrammar) {\n    return { id: PLAIN_TEXT_LANGUAGE, loadGrammar: null };\n  }\n\n  return { id: canonicalId, loadGrammar };\n};\n"],"mappings":";;;;;;;;AAkBA,MAAa,iBAAiB;CAC5B,aAAa,OAAO;CACpB,YAAY,OAAO;CACnB,WAAW,OAAO;CAClB,YAAY,OAAO;CACnB,kBAAkB,OAAO;CACzB,YAAY,OAAO;CACnB,aAAa,OAAO;CACpB,aAAa,OAAO;CACpB,gBAAgB,OAAO;CACvB,cAAc,OAAO;CACrB,WAAW,OAAO;CAClB,kBAAkB,OAAO;CACzB,WAAW,OAAO;CAClB,WAAW,OAAO;CAClB,YAAY,OAAO;AA4BrB;;AAMA,MAAa,mBAAmB,OAAO,KACrC,cACF;;;;;AAMA,MAAa,iBAAiB;CAC5B,KAAK;CACL,SAAS;CACT,KAAK;CACL,YAAY;CACZ,KAAK;CACL,KAAK;CACL,IAAI;CACJ,OAAO;CACP,KAAK;CACL,IAAI;CACJ,KAAK;CACL,KAAK;CACL,KAAK;CACL,SAAS;CACT,IAAI;CACJ,OAAO;CACP,aAAa;CACb,IAAI;CACJ,KAAK;CACL,KAAK;AACP;AAWA,MAAM,sBAAsB;;;;;;;;;;;;;;;AAgC5B,MAAa,uBACX,aACyB;CACzB,MAAM,sBAAsB,YAAY,GAAE,CAAE,KAAK,CAAC,CAAC,YAAY;CAE/D,MAAM,cACJ,eAAe,uBACd;CAEH,MAAM,cAAc,eAAe;CAEnC,IAAI,CAAC,aACH,OAAO;EAAE,IAAI;EAAqB,aAAa;CAAK;CAGtD,OAAO;EAAE,IAAI;EAAa;CAAY;AACxC"}
+{"version":3,"file":"shikiLanguages.mjs","names":[],"sources":["../../../../src/components/IDE/shikiLanguages.ts"],"sourcesContent":["/**\n * Grammar registrations, as default-exported by the `shiki/langs/*` modules.\n */\nexport type LanguageGrammar =\n  typeof import('shiki/langs/typescript.mjs')['default'];\n\n/**\n * Loads a single Shiki grammar (and its embedded dependencies).\n */\nexport type GrammarLoader = () => Promise<{ default: LanguageGrammar }>;\n\n/**\n * Shiki grammar loaders, keyed by the canonical Shiki language id.\n *\n * Import specifiers are written as literals (never template strings) so that\n * bundlers can statically analyse them and emit one lazily fetched chunk per\n * grammar instead of bundling every language up front.\n */\nexport const grammarLoaders = {\n  astro: () => import('shiki/langs/astro.mjs'),\n  bash: () => import('shiki/langs/bash.mjs'),\n  css: () => import('shiki/langs/css.mjs'),\n  html: () => import('shiki/langs/html.mjs'),\n  javascript: () => import('shiki/langs/javascript.mjs'),\n  json: () => import('shiki/langs/json.mjs'),\n  json5: () => import('shiki/langs/json5.mjs'),\n  jsonc: () => import('shiki/langs/jsonc.mjs'),\n  markdown: () => import('shiki/langs/markdown.mjs'),\n  svelte: () => import('shiki/langs/svelte.mjs'),\n  tsx: () => import('shiki/langs/tsx.mjs'),\n  typescript: () => import('shiki/langs/typescript.mjs'),\n  vue: () => import('shiki/langs/vue.mjs'),\n  xml: () => import('shiki/langs/xml.mjs'),\n  yaml: () => import('shiki/langs/yaml.mjs'),\n  // 'angular-html': () => import('shiki/langs/angular-html.mjs'),\n  // 'angular-ts': () => import('shiki/langs/angular-ts.mjs'),\n  // c: () => import('shiki/langs/c.mjs'),\n  // cpp: () => import('shiki/langs/cpp.mjs'),\n  // csharp: () => import('shiki/langs/csharp.mjs'),\n  // csv: () => import('shiki/langs/csv.mjs'),\n  // dart: () => import('shiki/langs/dart.mjs'),\n  // diff: () => import('shiki/langs/diff.mjs'),\n  // docker: () => import('shiki/langs/docker.mjs'),\n  // go: () => import('shiki/langs/go.mjs'),\n  // graphql: () => import('shiki/langs/graphql.mjs'),\n  // http: () => import('shiki/langs/http.mjs'),\n  // ini: () => import('shiki/langs/ini.mjs'),\n  // java: () => import('shiki/langs/java.mjs'),\n  // kotlin: () => import('shiki/langs/kotlin.mjs'),\n  // less: () => import('shiki/langs/less.mjs'),\n  // lua: () => import('shiki/langs/lua.mjs'),\n  //   nginx: () => import('shiki/langs/nginx.mjs'),\n  // php: () => import('shiki/langs/php.mjs'),\n  // powershell: () => import('shiki/langs/powershell.mjs'),\n  // prisma: () => import('shiki/langs/prisma.mjs'),\n  // python: () => import('shiki/langs/python.mjs'),\n  // ruby: () => import('shiki/langs/ruby.mjs'),\n  // rust: () => import('shiki/langs/rust.mjs'),\n  // scss: () => import('shiki/langs/scss.mjs'),\n  // sql: () => import('shiki/langs/sql.mjs'),  // swift: () => import('shiki/langs/swift.mjs'),\n  // toml: () => import('shiki/langs/toml.mjs'),\n} satisfies Record<string, GrammarLoader>;\n\n/** Canonical Shiki language ids this package can highlight. */\nexport type ShikiLanguageId = keyof typeof grammarLoaders;\n\n/** Every canonical language id that ships with a grammar loader. */\nexport const shikiLanguageIds = Object.keys(\n  grammarLoaders\n) as ShikiLanguageId[];\n\n/**\n * Code fence names that are rendered by another grammar, mapped to the\n * canonical id that actually owns the grammar.\n */\nexport const grammarAliases = {\n  cjs: 'javascript',\n  console: 'bash',\n  cts: 'typescript',\n  htm: 'html',\n  js: 'javascript',\n  jsonc: 'json5',\n  jsx: 'tsx',\n  md: 'markdown',\n  mdx: 'markdown',\n  mjs: 'javascript',\n  mts: 'typescript',\n  postcss: 'css',\n  sh: 'bash',\n  shell: 'bash',\n  shellscript: 'bash',\n  ts: 'typescript',\n  yml: 'yaml',\n  zsh: 'bash',\n} satisfies Record<string, ShikiLanguageId>;\n\n/** Code fence names accepted as aliases of a canonical language id. */\nexport type ShikiLanguageAlias = keyof typeof grammarAliases;\n\n/**\n * Languages Shiki renders without any grammar. They are also used as the\n * fallback for languages this package does not ship a grammar for.\n */\nexport type PlainTextLanguage = 'plaintext' | 'text' | 'txt';\n\nconst PLAIN_TEXT_LANGUAGE = 'plaintext' satisfies PlainTextLanguage;\n\n/** Every language name accepted by the code block components. */\nexport type CodeLanguage =\n  | ShikiLanguageId\n  | ShikiLanguageAlias\n  | PlainTextLanguage;\n\n/**\n * A language name resolved to what Shiki actually needs to highlight it.\n */\nexport type ResolvedCodeLanguage = {\n  /** Canonical language id to pass to `codeToHtml` / `codeToHast`. */\n  id: ShikiLanguageId | PlainTextLanguage;\n  /** Grammar loader, or `null` when the language needs no grammar. */\n  loadGrammar: GrammarLoader | null;\n};\n\n/**\n * Resolve a code fence language name to a canonical Shiki id and its grammar\n * loader.\n *\n * Unknown names resolve to plain text rather than to an arbitrary grammar, so\n * that `codeToHtml` never receives a language it has not loaded.\n *\n * @param language - Language name coming from a code fence or a `lang` prop.\n *\n * @example\n * resolveCodeLanguage('ts'); // { id: 'typescript', loadGrammar: fn }\n * resolveCodeLanguage('yaml'); // { id: 'yaml', loadGrammar: fn }\n * resolveCodeLanguage('brainfuck'); // { id: 'plaintext', loadGrammar: null }\n */\nexport const resolveCodeLanguage = (\n  language: CodeLanguage | string | undefined | null\n): ResolvedCodeLanguage => {\n  const normalizedLanguage = (language ?? '').trim().toLowerCase();\n\n  const canonicalId =\n    grammarAliases[normalizedLanguage as ShikiLanguageAlias] ??\n    (normalizedLanguage as ShikiLanguageId);\n\n  const loadGrammar = grammarLoaders[canonicalId] as GrammarLoader | undefined;\n\n  if (!loadGrammar) {\n    return { id: PLAIN_TEXT_LANGUAGE, loadGrammar: null };\n  }\n\n  return { id: canonicalId, loadGrammar };\n};\n"],"mappings":";;;;;;;;AAkBA,MAAa,iBAAiB;CAC5B,aAAa,OAAO;CACpB,YAAY,OAAO;CACnB,WAAW,OAAO;CAClB,YAAY,OAAO;CACnB,kBAAkB,OAAO;CACzB,YAAY,OAAO;CACnB,aAAa,OAAO;CACpB,aAAa,OAAO;CACpB,gBAAgB,OAAO;CACvB,cAAc,OAAO;CACrB,WAAW,OAAO;CAClB,kBAAkB,OAAO;CACzB,WAAW,OAAO;CAClB,WAAW,OAAO;CAClB,YAAY,OAAO;AA4BrB;;AAMA,MAAa,mBAAmB,OAAO,KACrC,cACF;;;;;AAMA,MAAa,iBAAiB;CAC5B,KAAK;CACL,SAAS;CACT,KAAK;CACL,KAAK;CACL,IAAI;CACJ,OAAO;CACP,KAAK;CACL,IAAI;CACJ,KAAK;CACL,KAAK;CACL,KAAK;CACL,SAAS;CACT,IAAI;CACJ,OAAO;CACP,aAAa;CACb,IAAI;CACJ,KAAK;CACL,KAAK;AACP;AAWA,MAAM,sBAAsB;;;;;;;;;;;;;;;AAgC5B,MAAa,uBACX,aACyB;CACzB,MAAM,sBAAsB,YAAY,GAAE,CAAE,KAAK,CAAC,CAAC,YAAY;CAE/D,MAAM,cACJ,eAAe,uBACd;CAEH,MAAM,cAAc,eAAe;CAEnC,IAAI,CAAC,aACH,OAAO;EAAE,IAAI;EAAqB,aAAa;CAAK;CAGtD,OAAO;EAAE,IAAI;EAAa;CAAY;AACxC"}

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

@@ -1,6 +1,6 @@
 import { cn } from "../../utils/cn.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/Input/Checkbox.tsx
 const checkboxVariants = cva([

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

@@ -1,5 +1,5 @@
-import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Input/Input.tsx
 const cn = (...classes) => classes.filter(Boolean).join(" ");

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

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

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

@@ -2,10 +2,10 @@
 
 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 { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-import { MinusIcon } from "lucide-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/Input/OTPInput.tsx
 /**

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

@@ -1,6 +1,6 @@
 import { cn } from "../../utils/cn.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/Input/Radio.tsx
 const radioVariants = cva([

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

@@ -1,7 +1,7 @@
 import { cn } from "../../utils/cn.mjs";
 import { Input } from "./Input.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { Search } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/Input/SearchInput.tsx
 const SearchInput = ({ className, ...props }) => /* @__PURE__ */ jsxs("div", {

package/dist/esm/components/Link/Link.mjs

@@ -1,8 +1,8 @@
 import { cn } from "../../utils/cn.mjs";
+import { ExternalLink, MoveRight } from "lucide-react";
 import { isValidElement } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-import { ExternalLink, MoveRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { getLocalizedUrl } from "@intlayer/core/localization";
 
 //#region src/components/Link/Link.tsx

package/dist/esm/components/LocaleSwitcherContentDropDown/LocaleSwitcherContent.mjs

@@ -1,15 +1,15 @@
 'use client';
 
-import { usePersistedStore } from "../../hooks/usePersistedStore.mjs";
 import { Button } from "../Button/Button.mjs";
 import { Container } from "../Container/index.mjs";
 import { DropDown } from "../DropDown/index.mjs";
 import { Input } from "../Input/Input.mjs";
 import { SwitchSelector } from "../SwitchSelector/SwitchSelector.mjs";
+import { usePersistedStore } from "../../hooks/usePersistedStore.mjs";
 import { useLocaleSwitcherContent } from "./LocaleSwitcherContentContext.mjs";
+import { Check, Globe, MoveVertical } from "lucide-react";
 import { useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { Check, Globe, MoveVertical } from "lucide-react";
 import { useIntlayer, useLocale } from "react-intlayer";
 import { getHTMLTextDir, getLocaleName } from "@intlayer/core/localization";
 import { ENGLISH } from "@intlayer/types/locales";

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

@@ -1,20 +1,35 @@
 'use client';
 
+import { cn } from "../../utils/cn.mjs";
 import { Button } from "../Button/Button.mjs";
 import { Container } from "../Container/index.mjs";
 import { DropDown } from "../DropDown/index.mjs";
 import { Input } from "../Input/Input.mjs";
+import { MoveVertical } from "lucide-react";
 import { useCallback, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { MoveVertical } from "lucide-react";
 import { useIntlayer } from "react-intlayer";
 import { getHTMLTextDir, getLocaleName } from "@intlayer/core/localization";
 import { ENGLISH } from "@intlayer/types/locales";
 import Fuse from "fuse.js";
 
 //#region src/components/LocaleSwitcherDropDown/LocaleSwitcher.tsx
+const sizeClassNames = {
+	sm: {
+		nav: "rounded-full border-[1.3px] border-text",
+		trigger: "min-h-0 px-1.5 py-0.5 text-xs",
+		label: "px-1",
+		icon: "size-3"
+	},
+	md: {
+		nav: "rounded-xl border border-text",
+		trigger: "",
+		label: "px-2",
+		icon: "w-5"
+	}
+};
 const DROPDOWN_IDENTIFIER = "locale-switcher";
-const LocaleSwitcher = ({ locale, localeList, availableLocales, fullLocaleName = true, setLocale, panelProps }) => {
+const LocaleSwitcher = ({ locale, localeList, availableLocales, fullLocaleName = true, setLocale, panelProps, size = "md" }) => {
 	let localeName = "Select a locale";
 	const { switchTo, searchInput, languageListLabel, localeSwitcherLabel } = useIntlayer("locale-switcher");
 	const inputRef = useRef(null);
@@ -58,19 +73,22 @@ const LocaleSwitcher = ({ locale, localeList, availableLocales, fullLocaleName =
 	}, [fuse, multilingualAvailableLocales]);
 	if (locale) localeName = fullLocaleName ? getLocaleName(locale) : locale.toUpperCase();
 	return /* @__PURE__ */ jsx("nav", {
-		className: "rounded-xl border border-text",
+		className: sizeClassNames[size].nav,
 		"aria-label": localeSwitcherLabel.value,
 		children: /* @__PURE__ */ jsxs(DropDown, {
 			identifier: DROPDOWN_IDENTIFIER,
 			children: [/* @__PURE__ */ jsx(DropDown.Trigger, {
 				identifier: DROPDOWN_IDENTIFIER,
-				color: "text",
+				color: "custom",
+				size: size === "sm" ? "custom" : "md",
+				roundedSize: size === "sm" ? "full" : "md",
+				className: cn("text-text", sizeClassNames[size].trigger),
 				children: /* @__PURE__ */ jsxs("div", {
 					className: "flex w-full items-center justify-between",
 					children: [/* @__PURE__ */ jsx("div", {
-						className: "text-nowrap px-2",
+						className: cn("text-nowrap", sizeClassNames[size].label),
 						children: localeName
-					}), /* @__PURE__ */ jsx(MoveVertical, { className: "w-5 self-center" })]
+					}), /* @__PURE__ */ jsx(MoveVertical, { className: cn("self-center", sizeClassNames[size].icon) })]
 				})
 			}), /* @__PURE__ */ jsx(DropDown.Panel, {
 				identifier: DROPDOWN_IDENTIFIER,

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

@@ -1 +1 @@
-{"version":3,"file":"LocaleSwitcher.mjs","names":[],"sources":["../../../../src/components/LocaleSwitcherDropDown/LocaleSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { getHTMLTextDir, getLocaleName } from '@intlayer/core/localization';\nimport type { Locale } from '@intlayer/types/allLocales';\nimport { ENGLISH } from '@intlayer/types/locales';\nimport Fuse, { type IFuseOptions } from 'fuse.js';\nimport { MoveVertical } from 'lucide-react';\nimport { type FC, useCallback, useMemo, useRef, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button } from '../Button';\nimport { Container } from '../Container';\nimport { DropDown, type PanelProps } from '../DropDown';\nimport { Input } from '../Input';\n\nexport type LocaleSwitcherProps = {\n  locale?: Locale;\n  localeList: Locale[];\n  availableLocales?: Locale[];\n  fullLocaleName?: boolean;\n  setLocale: (locale: Locale) => void;\n  panelProps?: Omit<PanelProps, 'identifier'>;\n};\n\nconst DROPDOWN_IDENTIFIER = 'locale-switcher';\n\ntype MultilingualAvailableLocales = {\n  locale: Locale;\n  englishName: string;\n  currentLocaleName: string;\n  ownLocaleName: string;\n};\n\nexport const LocaleSwitcher: FC<LocaleSwitcherProps> = ({\n  locale,\n  localeList,\n  availableLocales,\n  fullLocaleName = true,\n  setLocale,\n  panelProps,\n}) => {\n  let localeName = 'Select a locale';\n  const { switchTo, searchInput, languageListLabel, localeSwitcherLabel } =\n    useIntlayer('locale-switcher');\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const multilingualAvailableLocales: MultilingualAvailableLocales[] = useMemo(\n    () =>\n      localeList.map((localeEl) => {\n        const englishName = getLocaleName(localeEl, ENGLISH);\n        const currentLocaleName = getLocaleName(localeEl, locale);\n        const ownLocaleName = getLocaleName(localeEl);\n        return {\n          locale: localeEl,\n          englishName,\n          currentLocaleName,\n          ownLocaleName,\n        };\n      }),\n    [localeList, locale]\n  );\n\n  const [results, setResults] = useState<MultilingualAvailableLocales[]>(\n    multilingualAvailableLocales\n  );\n\n  // Create a new Fuse instance with the options and documentation data\n  const fuse = useMemo(() => {\n    const fuseOptions: IFuseOptions<MultilingualAvailableLocales> = {\n      keys: [\n        { name: 'ownLocaleName', weight: 0.4 },\n        { name: 'englishName', weight: 0.2 },\n        { name: 'currentLocaleName', weight: 0.2 },\n        { name: 'locale', weight: 0.2 },\n      ],\n      threshold: 0.02, // Defines how fuzzy the matching should be (lower is more strict)\n    };\n\n    return new Fuse(multilingualAvailableLocales, fuseOptions);\n  }, [multilingualAvailableLocales]);\n\n  const handleSearch = useCallback(\n    (searchQuery: string) => {\n      if (searchQuery) {\n        // Perform search on every input change\n        const searchResults = fuse\n          .search(searchQuery)\n          .map((result) => result.item);\n        setResults(searchResults);\n      } else {\n        setResults(multilingualAvailableLocales);\n      }\n    },\n    [fuse, multilingualAvailableLocales]\n  );\n\n  if (locale) {\n    localeName = fullLocaleName ? getLocaleName(locale) : locale.toUpperCase();\n  }\n\n  return (\n    <nav\n      className=\"rounded-xl border border-text\"\n      aria-label={localeSwitcherLabel.value}\n    >\n      <DropDown identifier={DROPDOWN_IDENTIFIER}>\n        <DropDown.Trigger identifier={DROPDOWN_IDENTIFIER} color=\"text\">\n          <div className=\"flex w-full items-center justify-between\">\n            <div className=\"text-nowrap px-2\">{localeName}</div>\n            <MoveVertical className=\"w-5 self-center\" />\n          </div>\n        </DropDown.Trigger>\n\n        <DropDown.Panel\n          identifier={DROPDOWN_IDENTIFIER}\n          isOverable\n          isFocusable\n          align=\"end\"\n          {...panelProps}\n        >\n          <Container\n            className=\"max-h-[80vh] min-w-28\"\n            separator=\"y\"\n            role=\"listbox\"\n            transparency=\"xs\"\n            aria-label={languageListLabel.value}\n          >\n            <div className=\"p-3\">\n              <Input\n                type=\"search\"\n                aria-label={searchInput.ariaLabel.value}\n                placeholder={searchInput.placeholder.value}\n                onChange={(e) => handleSearch(e.target.value)}\n                ref={inputRef}\n              />\n            </div>\n            <ol className=\"divide-y divide-dashed divide-text/20 overflow-y-auto p-1\">\n              {results.map(\n                ({ locale: localeItem, currentLocaleName, ownLocaleName }) => (\n                  <li className=\"px-1.5 py-1\" key={localeItem}>\n                    <Button\n                      onClick={() => setLocale(localeItem)}\n                      label={`${switchTo} ${currentLocaleName}`}\n                      disabled={\n                        !(availableLocales ?? localeList).includes(localeItem)\n                      }\n                      isActive={locale === localeItem}\n                      variant=\"hoverable\"\n                      color=\"text\"\n                      isFullWidth\n                      textAlign=\"left\"\n                    >\n                      <div className=\"flex flex-row items-center justify-between gap-3 px-2 py-1\">\n                        <div className=\"flex flex-col text-nowrap\">\n                          <span\n                            dir={getHTMLTextDir(localeItem)}\n                            lang={localeItem}\n                            suppressHydrationWarning\n                          >\n                            {ownLocaleName}\n                          </span>\n                          <span\n                            className=\"text-neutral text-xs\"\n                            suppressHydrationWarning\n                          >\n                            {currentLocaleName}\n                          </span>\n                        </div>\n                        <span className=\"text-neutral text-sm\">\n                          {localeItem.toUpperCase()}\n                        </span>\n                      </div>\n                    </Button>\n                  </li>\n                )\n              )}\n            </ol>\n          </Container>\n        </DropDown.Panel>\n      </DropDown>\n    </nav>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAuBA,MAAM,sBAAsB;AAS5B,MAAa,kBAA2C,EACtD,QACA,YACA,kBACA,iBAAiB,MACjB,WACA,iBACI;CACJ,IAAI,aAAa;CACjB,MAAM,EAAE,UAAU,aAAa,mBAAmB,wBAChD,YAAY,iBAAiB;CAC/B,MAAM,WAAW,OAAyB,IAAI;CAE9C,MAAM,+BAA+D,cAEjE,WAAW,KAAK,aAAa;EAI3B,OAAO;GACL,QAAQ;GACR,aALkB,cAAc,UAAU,OAKhC;GACV,mBALwB,cAAc,UAAU,MAKhC;GAChB,eALoB,cAAc,QAKtB;EACd;CACF,CAAC,GACH,CAAC,YAAY,MAAM,CACrB;CAEA,MAAM,CAAC,SAAS,cAAc,SAC5B,4BACF;CAGA,MAAM,OAAO,cAAc;EAWzB,OAAO,IAAI,KAAK,8BAA8B;GAT5C,MAAM;IACJ;KAAE,MAAM;KAAiB,QAAQ;IAAI;IACrC;KAAE,MAAM;KAAe,QAAQ;IAAI;IACnC;KAAE,MAAM;KAAqB,QAAQ;IAAI;IACzC;KAAE,MAAM;KAAU,QAAQ;IAAI;GAChC;GACA,WAAW;EAG2C,CAAC;CAC3D,GAAG,CAAC,4BAA4B,CAAC;CAEjC,MAAM,eAAe,aAClB,gBAAwB;EACvB,IAAI,aAAa;GAEf,MAAM,gBAAgB,KACnB,OAAO,WAAW,CAAC,CACnB,KAAK,WAAW,OAAO,IAAI;GAC9B,WAAW,aAAa;EAC1B,OACE,WAAW,4BAA4B;CAE3C,GACA,CAAC,MAAM,4BAA4B,CACrC;CAEA,IAAI,QACF,aAAa,iBAAiB,cAAc,MAAM,IAAI,OAAO,YAAY;CAG3E,OACE,oBAAC,OAAD;EACE,WAAU;EACV,cAAY,oBAAoB;YAEhC,qBAAC,UAAD;GAAU,YAAY;aAAtB,CACE,oBAAC,SAAS,SAAV;IAAkB,YAAY;IAAqB,OAAM;cACvD,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,OAAD;MAAK,WAAU;gBAAoB;KAAgB,IACnD,oBAAC,cAAD,EAAc,WAAU,kBAAmB,EACxC;;GACW,IAElB,oBAAC,SAAS,OAAV;IACE,YAAY;IACZ;IACA;IACA,OAAM;IACN,GAAI;cAEJ,qBAAC,WAAD;KACE,WAAU;KACV,WAAU;KACV,MAAK;KACL,cAAa;KACb,cAAY,kBAAkB;eALhC,CAOE,oBAAC,OAAD;MAAK,WAAU;gBACb,oBAAC,OAAD;OACE,MAAK;OACL,cAAY,YAAY,UAAU;OAClC,aAAa,YAAY,YAAY;OACrC,WAAW,MAAM,aAAa,EAAE,OAAO,KAAK;OAC5C,KAAK;MACN;KACE,IACL,oBAAC,MAAD;MAAI,WAAU;gBACX,QAAQ,KACN,EAAE,QAAQ,YAAY,mBAAmB,oBACxC,oBAAC,MAAD;OAAI,WAAU;iBACZ,oBAAC,QAAD;QACE,eAAe,UAAU,UAAU;QACnC,OAAO,GAAG,SAAS,GAAG;QACtB,UACE,EAAE,oBAAoB,WAAU,CAAE,SAAS,UAAU;QAEvD,UAAU,WAAW;QACrB,SAAQ;QACR,OAAM;QACN;QACA,WAAU;kBAEV,qBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,qBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,oBAAC,QAAD;WACE,KAAK,eAAe,UAAU;WAC9B,MAAM;WACN;qBAEC;UACG,IACN,oBAAC,QAAD;WACE,WAAU;WACV;qBAEC;UACG,EACH;aACL,oBAAC,QAAD;UAAM,WAAU;oBACb,WAAW,YAAY;SACpB,EACH;;OACC;MACN,GAlC6B,UAkC7B,CAER;KACE,EACK;;GACG,EACR;;CACP;AAET"}
+{"version":3,"file":"LocaleSwitcher.mjs","names":[],"sources":["../../../../src/components/LocaleSwitcherDropDown/LocaleSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { getHTMLTextDir, getLocaleName } from '@intlayer/core/localization';\nimport type { Locale } from '@intlayer/types/allLocales';\nimport { ENGLISH } from '@intlayer/types/locales';\nimport { cn } from '@utils/cn';\nimport Fuse, { type IFuseOptions } from 'fuse.js';\nimport { MoveVertical } from 'lucide-react';\nimport { type FC, useCallback, useMemo, useRef, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button } from '../Button';\nimport { Container } from '../Container';\nimport { DropDown, type PanelProps } from '../DropDown';\nimport { Input } from '../Input';\n\nexport type LocaleSwitcherProps = {\n  locale?: Locale;\n  localeList: Locale[];\n  availableLocales?: Locale[];\n  fullLocaleName?: boolean;\n  setLocale: (locale: Locale) => void;\n  panelProps?: Omit<PanelProps, 'identifier'>;\n  /** `sm` renders a compact pill, matching the `xs` `SwitchSelector`. */\n  size?: LocaleSwitcherSize;\n};\n\nexport type LocaleSwitcherSize = 'sm' | 'md';\n\nconst sizeClassNames: Record<\n  LocaleSwitcherSize,\n  { nav: string; trigger: string; label: string; icon: string }\n> = {\n  sm: {\n    nav: 'rounded-full border-[1.3px] border-text',\n    trigger: 'min-h-0 px-1.5 py-0.5 text-xs',\n    label: 'px-1',\n    icon: 'size-3',\n  },\n  md: {\n    nav: 'rounded-xl border border-text',\n    trigger: '',\n    label: 'px-2',\n    icon: 'w-5',\n  },\n};\n\nconst DROPDOWN_IDENTIFIER = 'locale-switcher';\n\ntype MultilingualAvailableLocales = {\n  locale: Locale;\n  englishName: string;\n  currentLocaleName: string;\n  ownLocaleName: string;\n};\n\nexport const LocaleSwitcher: FC<LocaleSwitcherProps> = ({\n  locale,\n  localeList,\n  availableLocales,\n  fullLocaleName = true,\n  setLocale,\n  panelProps,\n  size = 'md',\n}) => {\n  let localeName = 'Select a locale';\n  const { switchTo, searchInput, languageListLabel, localeSwitcherLabel } =\n    useIntlayer('locale-switcher');\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const multilingualAvailableLocales: MultilingualAvailableLocales[] = useMemo(\n    () =>\n      localeList.map((localeEl) => {\n        const englishName = getLocaleName(localeEl, ENGLISH);\n        const currentLocaleName = getLocaleName(localeEl, locale);\n        const ownLocaleName = getLocaleName(localeEl);\n        return {\n          locale: localeEl,\n          englishName,\n          currentLocaleName,\n          ownLocaleName,\n        };\n      }),\n    [localeList, locale]\n  );\n\n  const [results, setResults] = useState<MultilingualAvailableLocales[]>(\n    multilingualAvailableLocales\n  );\n\n  // Create a new Fuse instance with the options and documentation data\n  const fuse = useMemo(() => {\n    const fuseOptions: IFuseOptions<MultilingualAvailableLocales> = {\n      keys: [\n        { name: 'ownLocaleName', weight: 0.4 },\n        { name: 'englishName', weight: 0.2 },\n        { name: 'currentLocaleName', weight: 0.2 },\n        { name: 'locale', weight: 0.2 },\n      ],\n      threshold: 0.02, // Defines how fuzzy the matching should be (lower is more strict)\n    };\n\n    return new Fuse(multilingualAvailableLocales, fuseOptions);\n  }, [multilingualAvailableLocales]);\n\n  const handleSearch = useCallback(\n    (searchQuery: string) => {\n      if (searchQuery) {\n        // Perform search on every input change\n        const searchResults = fuse\n          .search(searchQuery)\n          .map((result) => result.item);\n        setResults(searchResults);\n      } else {\n        setResults(multilingualAvailableLocales);\n      }\n    },\n    [fuse, multilingualAvailableLocales]\n  );\n\n  if (locale) {\n    localeName = fullLocaleName ? getLocaleName(locale) : locale.toUpperCase();\n  }\n\n  return (\n    <nav\n      className={sizeClassNames[size].nav}\n      aria-label={localeSwitcherLabel.value}\n    >\n      <DropDown identifier={DROPDOWN_IDENTIFIER}>\n        <DropDown.Trigger\n          identifier={DROPDOWN_IDENTIFIER}\n          // `text` color paints children with `text-opposite`, unreadable on\n          // the transparent `none` variant.\n          color=\"custom\"\n          size={size === 'sm' ? 'custom' : 'md'}\n          roundedSize={size === 'sm' ? 'full' : 'md'}\n          className={cn('text-text', sizeClassNames[size].trigger)}\n        >\n          <div className=\"flex w-full items-center justify-between\">\n            <div className={cn('text-nowrap', sizeClassNames[size].label)}>\n              {localeName}\n            </div>\n            <MoveVertical\n              className={cn('self-center', sizeClassNames[size].icon)}\n            />\n          </div>\n        </DropDown.Trigger>\n\n        <DropDown.Panel\n          identifier={DROPDOWN_IDENTIFIER}\n          isOverable\n          isFocusable\n          align=\"end\"\n          {...panelProps}\n        >\n          <Container\n            className=\"max-h-[80vh] min-w-28\"\n            separator=\"y\"\n            role=\"listbox\"\n            transparency=\"xs\"\n            aria-label={languageListLabel.value}\n          >\n            <div className=\"p-3\">\n              <Input\n                type=\"search\"\n                aria-label={searchInput.ariaLabel.value}\n                placeholder={searchInput.placeholder.value}\n                onChange={(e) => handleSearch(e.target.value)}\n                ref={inputRef}\n              />\n            </div>\n            <ol className=\"divide-y divide-dashed divide-text/20 overflow-y-auto p-1\">\n              {results.map(\n                ({ locale: localeItem, currentLocaleName, ownLocaleName }) => (\n                  <li className=\"px-1.5 py-1\" key={localeItem}>\n                    <Button\n                      onClick={() => setLocale(localeItem)}\n                      label={`${switchTo} ${currentLocaleName}`}\n                      disabled={\n                        !(availableLocales ?? localeList).includes(localeItem)\n                      }\n                      isActive={locale === localeItem}\n                      variant=\"hoverable\"\n                      color=\"text\"\n                      isFullWidth\n                      textAlign=\"left\"\n                    >\n                      <div className=\"flex flex-row items-center justify-between gap-3 px-2 py-1\">\n                        <div className=\"flex flex-col text-nowrap\">\n                          <span\n                            dir={getHTMLTextDir(localeItem)}\n                            lang={localeItem}\n                            suppressHydrationWarning\n                          >\n                            {ownLocaleName}\n                          </span>\n                          <span\n                            className=\"text-neutral text-xs\"\n                            suppressHydrationWarning\n                          >\n                            {currentLocaleName}\n                          </span>\n                        </div>\n                        <span className=\"text-neutral text-sm\">\n                          {localeItem.toUpperCase()}\n                        </span>\n                      </div>\n                    </Button>\n                  </li>\n                )\n              )}\n            </ol>\n          </Container>\n        </DropDown.Panel>\n      </DropDown>\n    </nav>\n  );\n};\n"],"mappings":"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"}

package/dist/esm/components/MarkDownRender/MarkDownIframe.mjs

@@ -6,9 +6,9 @@ import { Link } from "../Link/Link.mjs";
 import { Container } from "../Container/index.mjs";
 import { Modal } from "../Modal/Modal.mjs";
 import { getYoutubeEmbedUrl, getYoutubeVideoId, getYoutubeWatchUrl } from "./youtubeUrl.mjs";
+import { MoveDiagonal } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { MoveDiagonal } from "lucide-react";
 
 //#region src/components/MarkDownRender/MarkDownIframe.tsx
 /**

package/dist/esm/components/MarkdownEditor/generative/AICompletionCommands.mjs

@@ -2,8 +2,8 @@
 
 import { Command } from "../../Command/index.mjs";
 import { useEditor } from "../novel/components/index.mjs";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Check, TextQuote, TrashIcon } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useIntlayer } from "react-intlayer";
 
 //#region src/components/MarkdownEditor/generative/AICompletionCommands.tsx

package/dist/esm/components/MarkdownEditor/generative/AISelector.mjs

@@ -1,18 +1,18 @@
 'use client';
 
-import { toast } from "../../Toaster/useToast.mjs";
 import { Loader } from "../../Loader/index.mjs";
 import { Button } from "../../Button/Button.mjs";
 import { Command, CommandRoot } from "../../Command/index.mjs";
 import { MarkdownRenderer } from "../../MarkDownRender/MarkDownRender.mjs";
 import { useEditor } from "../novel/components/index.mjs";
 import { addAIHighlight } from "../novel/extensions/ai-highlight.mjs";
+import { toast } from "../../Toaster/useToast.mjs";
 import { AICompletionCommands } from "./AICompletionCommands.mjs";
 import { AISelectorCommands } from "./AISelectorCommands.mjs";
 import { useAICompletion } from "./useAICompletion.mjs";
+import { ArrowUp, Sparkles } from "lucide-react";
 import { useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { ArrowUp, Sparkles } from "lucide-react";
 import { useIntlayer } from "react-intlayer";
 
 //#region src/components/MarkdownEditor/generative/AISelector.tsx

package/dist/esm/components/MarkdownEditor/generative/AISelectorCommands.mjs

@@ -3,8 +3,8 @@
 import { Command } from "../../Command/index.mjs";
 import { useEditor } from "../novel/components/index.mjs";
 import { getPrevText } from "../novel/utils/index.mjs";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ArrowDownWideNarrow, CheckCheck, RefreshCcwDot, StepForward, WrapText } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useIntlayer } from "react-intlayer";
 
 //#region src/components/MarkdownEditor/generative/AISelectorCommands.tsx

package/dist/esm/components/MarkdownEditor/generative/GenerativeMenuSwitch.mjs

@@ -5,9 +5,9 @@ import { EditorBubble } from "../novel/components/editor-bubble.mjs";
 import { useEditor } from "../novel/components/index.mjs";
 import { removeAIHighlight } from "../novel/extensions/ai-highlight.mjs";
 import { AISelector } from "./AISelector.mjs";
+import { Sparkles } from "lucide-react";
 import { Fragment, useEffect } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Sparkles } from "lucide-react";
 import { useIntlayer } from "react-intlayer";
 
 //#region src/components/MarkdownEditor/generative/GenerativeMenuSwitch.tsx

package/dist/esm/components/MarkdownEditor/selectors/ColorSelector.mjs

@@ -1,9 +1,9 @@
 'use client';
 
 import { useEditor } from "../novel/components/index.mjs";
+import { Check, ChevronDown } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Check, ChevronDown } from "lucide-react";
 import { useIntlayer } from "react-intlayer";
 
 //#region src/components/MarkdownEditor/selectors/ColorSelector.tsx

package/dist/esm/components/MarkdownEditor/selectors/LinkSelector.mjs

@@ -4,9 +4,9 @@ import { cn } from "../../../utils/cn.mjs";
 import { Button } from "../../Button/Button.mjs";
 import { useEditor } from "../novel/components/index.mjs";
 import { getUrlFromString } from "../novel/utils/index.mjs";
+import { Check, Link2, Trash } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Check, Link2, Trash } from "lucide-react";
 import { useIntlayer } from "react-intlayer";
 
 //#region src/components/MarkdownEditor/selectors/LinkSelector.tsx

package/dist/esm/components/MarkdownEditor/selectors/NodeSelector.mjs

@@ -2,9 +2,9 @@
 
 import { cn } from "../../../utils/cn.mjs";
 import { useEditor } from "../novel/components/index.mjs";
+import { Check, CheckSquare, ChevronDown, Code, Heading1, Heading2, Heading3, ListOrdered, TextIcon, TextQuote } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Check, CheckSquare, ChevronDown, Code, Heading1, Heading2, Heading3, ListOrdered, TextIcon, TextQuote } from "lucide-react";
 import { useIntlayer } from "react-intlayer";
 
 //#region src/components/MarkdownEditor/selectors/NodeSelector.tsx

package/dist/esm/components/MarkdownEditor/selectors/TextButtons.mjs

@@ -4,8 +4,8 @@ import { cn } from "../../../utils/cn.mjs";
 import { Button } from "../../Button/Button.mjs";
 import { EditorBubbleItem } from "../novel/components/editor-bubble-item.mjs";
 import { useEditor } from "../novel/components/index.mjs";
-import { jsx } from "react/jsx-runtime";
 import { BoldIcon, CodeIcon, ItalicIcon, StrikethroughIcon, UnderlineIcon } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
 import { useIntlayer } from "react-intlayer";
 
 //#region src/components/MarkdownEditor/selectors/TextButtons.tsx

package/dist/esm/components/MarkdownEditor/slashCommand.mjs

@@ -1,7 +1,7 @@
 import { YoutubeLogo } from "../SocialNetworks/YoutubeLogo.mjs";
 import { Command, createSuggestionItems, renderItems } from "./novel/extensions/slash-command.mjs";
-import { jsx } from "react/jsx-runtime";
 import { CheckSquare, Code, Heading1, Heading2, Heading3, ImageIcon, List, ListOrdered, Text, TextQuote } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
 
 //#region src/components/MarkdownEditor/slashCommand.tsx
 /**

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

@@ -1,15 +1,15 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
-import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
-import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { Button } from "../Button/Button.mjs";
 import { Container } from "../Container/index.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 { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-import { X } from "lucide-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { motion } from "framer-motion";
 import { createPortal } from "react-dom";
 

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 { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
 import { Burger } from "./Burger.mjs";
 import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/esm/components/Pagination/Pagination.mjs

@@ -1,12 +1,12 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
-import { useItemSelector } from "../../hooks/useItemSelector.mjs";
 import { Button } from "../Button/Button.mjs";
+import { useItemSelector } from "../../hooks/useItemSelector.mjs";
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
 import { useEffect, useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useIntlayer } from "react-intlayer";
 
 //#region src/components/Pagination/Pagination.tsx

package/dist/esm/components/Pattern/GridDistortionPattern.mjs

@@ -1,7 +1,7 @@
 'use client';
 
-import { useTheme } from "../../providers/ThemeProvider.mjs";
 import { cn } from "../../utils/cn.mjs";
+import { useTheme } from "../../providers/ThemeProvider.mjs";
 import { useEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 

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

@@ -1,18 +1,18 @@
 'use client';
 
-import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
-import { useDevice } from "../../hooks/useDevice.mjs";
-import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { Button } from "../Button/Button.mjs";
 import { Container } from "../Container/index.mjs";
+import { useDevice } from "../../hooks/useDevice.mjs";
 import { KeyboardShortcut } from "../KeyboardShortcut/KeyboardShortcut.mjs";
 import { Popover } from "../Popover/dynamic.mjs";
+import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
+import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { MaxWidthSmoother } from "../MaxWidthSmoother/index.mjs";
 import { isElementAtTopAndNotCovered } from "./isElementAtTopAndNotCovered.mjs";
 import { useIsRightDrawerOpen, useRightDrawerActions } from "./useRightDrawer.mjs";
+import { ChevronLeft, X } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { ChevronLeft, X } from "lucide-react";
 import { useIntlayer } from "react-intlayer";
 import { createPortal } from "react-dom";
 

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

@@ -3,9 +3,9 @@
 import { cn } from "../../utils/cn.mjs";
 import { Badge } 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 { jsx, jsxs } from "react/jsx-runtime";
-import { Check, X } from "lucide-react";
 
 //#region src/components/Select/Multiselect.tsx
 const MultiSelectContext = createContext(null);

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

@@ -1,8 +1,8 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon, ChevronsUpDown } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as SelectPrimitive from "@radix-ui/react-select";
 
 //#region src/components/Select/Select.tsx

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

@@ -1,6 +1,6 @@
 import { useTheme } from "../../providers/ThemeProvider.mjs";
-import { jsx } from "react/jsx-runtime";
 import cn from "cnfast";
+import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Status/index.tsx
 const Status = ({ className, ...props }) => {

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

@@ -3,8 +3,8 @@
 import { cn } from "../../utils/cn.mjs";
 import { useSwitchSelector } from "./useSwitchSelector.mjs";
 import { createElement } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/SwitchSelector/SwitchSelector.tsx
 const defaultChoices = [{

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

@@ -4,8 +4,8 @@ import { cn } from "../../utils/cn.mjs";
 import { useSwitchSelector } from "./useSwitchSelector.mjs";
 import { defaultChoices } from "./SwitchSelector.mjs";
 import { createElement } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/SwitchSelector/VerticalSwitchSelector.tsx
 const verticalSwitchSelectorVariant = cva("flex h-fit w-fit cursor-pointer flex-col gap-2 rounded-2xl border-[1.3px] p-1", {

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

@@ -1,12 +1,12 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
-import { useHorizontalSwipe } from "../../hooks/useHorizontalSwipe.mjs";
 import { TabSelector } from "../TabSelector/TabSelector.mjs";
+import { useHorizontalSwipe } from "../../hooks/useHorizontalSwipe.mjs";
 import { useTabContext } from "./TabContext.mjs";
 import { Children, createContext, isValidElement, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/Tab/Tab.tsx
 /**