npm - @intlayer/design-system - Versions diffs - 7.2.1-canary.1 → 7.2.3 - Mend

@intlayer/design-system 7.2.1-canary.1 → 7.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (312) hide show

package/dist/esm/components/IDE/MonacoCode.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MonacoCode.mjs","names":["MonacoCode: FC<CodeCompProps>","handleMountIde: OnMount"],"sources":["../../../../src/components/IDE/MonacoCode.tsx"],"sourcesContent":["'use client';\n\nimport { Editor, type OnChange, type OnMount } from '@monaco-editor/react';\nimport { type FC, useMemo, useRef, useState } from 'react';\nimport { cn } from '../../utils/cn';\nimport { CopyButton } from '../CopyButton';\nimport { Loader } from '../Loader';\n\ntype CodeCompProps = {\n children: string;\n language: string;\n isDarkMode?: boolean;\n showLineNumbers?: boolean;\n showCopyButton?: boolean;\n isReadOnly?: boolean;\n onChange?: OnChange;\n};\n\nexport const MonacoCode: FC<CodeCompProps> = ({\n children,\n language,\n isDarkMode,\n showLineNumbers,\n showCopyButton = true,\n isReadOnly = false,\n onChange,\n}) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const ideRef = useRef(null);\n const [editorSize, setEditorSize] = useState<{\n height: number;\n width: number;\n }>({ height: 0, width: 0 });\n\n const theme = useMemo(\n () => (isDarkMode ? 'vs-dark-transparent' : 'hc-light-theme'),\n [isDarkMode]\n );\n\n const handleMountIde: OnMount = (editor, monaco) => {\n // first time you set the height based on content Height\n\n ideRef.current = editor as any;\n const contentHeight = (editor.getContentHeight() ?? 0) + 25;\n\n monaco.editor.defineTheme('vs-dark-transparent', {\n base: 'vs-dark',\n inherit: true,\n rules: [],\n colors: {\n 'editor.background': '#00000000',\n },\n });\n monaco.editor.defineTheme('hc-light-theme', {\n base: 'vs',\n inherit: true,\n rules: [],\n colors: {\n 'editor.background': '#00000000',\n },\n });\n\n monaco.editor.setTheme(theme);\n\n // Disable TypeScript diagnostics\n monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({\n noSemanticValidation: true, // Disables type checking\n noSyntaxValidation: true, // Disables syntax errors\n });\n\n // Disable JavaScript diagnostics\n monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({\n noSemanticValidation: true,\n noSyntaxValidation: true,\n });\n\n // Disable unnecessary language features (e.g., suggestions, quick fixes)\n monaco.languages.typescript.typescriptDefaults.setCompilerOptions({\n noLib: true,\n allowNonTsExtensions: true,\n });\n\n monaco.languages.typescript.javascriptDefaults.setCompilerOptions({\n noLib: true,\n allowNonTsExtensions: true,\n });\n\n setEditorSize({\n height: contentHeight,\n width: containerRef.current?.clientWidth ?? 0,\n });\n };\n\n const isShowLineNumbers = showLineNumbers ?? children.split('\\n').length > 1;\n\n return (\n <div\n className={cn(\n 'relative h-full w-full text-sm',\n showLineNumbers && 'ml-0'\n )}\n >\n {showCopyButton && (\n <div className=\"sticky top-5 z-10\">\n <div\n className={cn('absolute right-2 bottom-0 flex h-7 items-center')}\n >\n <CopyButton content={children} />\n </div>\n </div>\n )}\n <div\n className=\"z-0 grid size-full grid-cols-[0px] overflow-auto\"\n ref={containerRef}\n >\n <Editor\n {...editorSize}\n defaultLanguage=\"typescript\"\n language={language}\n loading={<Loader />}\n defaultValue={String(children).replace(/\\n$/, '')}\n onMount={handleMountIde}\n onChange={onChange}\n options={{\n readOnly: isReadOnly,\n cursorStyle: 'line',\n minimap: { enabled: false },\n scrollbar: {\n vertical: 'hidden',\n verticalScrollbarSize: 0,\n alwaysConsumeMouseWheel: false,\n },\n folding: false, // Disable code folding\n renderValidationDecorations: 'off', // Disable error/warning decorations\n quickSuggestions: false, // Disable IntelliSense\n parameterHints: { enabled: false }, // Disable parameter hints\n suggestOnTriggerCharacters: false, // Disable suggestions on typing\n\n mouseWheelScrollSensitivity: 0,\n fastScrollSensitivity: 0,\n scrollBeyondLastLine: false,\n lineNumbers: isShowLineNumbers ? 'on' : 'off',\n }}\n theme={theme}\n className=\"my-2 rounded-md\"\n />\n </div>\n </div>\n );\n};\n"],"mappings":"~~;;;;;;;;;;;~~AAkBA,MAAaA,cAAiC,EAC5C,UACA,UACA,YACA,iBACA,iBAAiB,MACjB,aAAa,OACb,eACI;CACJ,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,SAAS,OAAO,KAAK;CAC3B,MAAM,CAAC,YAAY,iBAAiB,SAGjC;EAAE,QAAQ;EAAG,OAAO;EAAG,CAAC;CAE3B,MAAM,QAAQ,cACL,aAAa,wBAAwB,kBAC5C,CAAC,WAAW,CACb;CAED,MAAMC,kBAA2B,QAAQ,WAAW;AAGlD,SAAO,UAAU;EACjB,MAAM,iBAAiB,OAAO,kBAAkB,IAAI,KAAK;AAEzD,SAAO,OAAO,YAAY,uBAAuB;GAC/C,MAAM;GACN,SAAS;GACT,OAAO,EAAE;GACT,QAAQ,EACN,qBAAqB,aACtB;GACF,CAAC;AACF,SAAO,OAAO,YAAY,kBAAkB;GAC1C,MAAM;GACN,SAAS;GACT,OAAO,EAAE;GACT,QAAQ,EACN,qBAAqB,aACtB;GACF,CAAC;AAEF,SAAO,OAAO,SAAS,MAAM;AAG7B,SAAO,UAAU,WAAW,mBAAmB,sBAAsB;GACnE,sBAAsB;GACtB,oBAAoB;GACrB,CAAC;AAGF,SAAO,UAAU,WAAW,mBAAmB,sBAAsB;GACnE,sBAAsB;GACtB,oBAAoB;GACrB,CAAC;AAGF,SAAO,UAAU,WAAW,mBAAmB,mBAAmB;GAChE,OAAO;GACP,sBAAsB;GACvB,CAAC;AAEF,SAAO,UAAU,WAAW,mBAAmB,mBAAmB;GAChE,OAAO;GACP,sBAAsB;GACvB,CAAC;AAEF,gBAAc;GACZ,QAAQ;GACR,OAAO,aAAa,SAAS,eAAe;GAC7C,CAAC;;CAGJ,MAAM,oBAAoB,mBAAmB,SAAS,MAAM,KAAK,CAAC,SAAS;AAE3E,QACE,qBAAC;EACC,WAAW,GACT,kCACA,mBAAmB,OACpB;aAEA,kBACC,oBAAC;GAAI,WAAU;aACb,oBAAC;IACC,WAAW,GAAG,kDAAkD;cAEhE,oBAAC,cAAW,SAAS,WAAY;KAC7B;IACF,EAER,oBAAC;GACC,WAAU;GACV,KAAK;aAEL,oBAAC;IACC,GAAI;IACJ,iBAAgB;IACN;IACV,SAAS,oBAAC,WAAS;IACnB,cAAc,OAAO,SAAS,CAAC,QAAQ,OAAO,GAAG;IACjD,SAAS;IACC;IACV,SAAS;KACP,UAAU;KACV,aAAa;KACb,SAAS,EAAE,SAAS,OAAO;KAC3B,WAAW;MACT,UAAU;MACV,uBAAuB;MACvB,yBAAyB;MAC1B;KACD,SAAS;KACT,6BAA6B;KAC7B,kBAAkB;KAClB,gBAAgB,EAAE,SAAS,OAAO;KAClC,4BAA4B;KAE5B,6BAA6B;KAC7B,uBAAuB;KACvB,sBAAsB;KACtB,aAAa,oBAAoB,OAAO;KACzC;IACM;IACP,WAAU;KACV;IACE;GACF"}
1	+ {"version":3,"file":"MonacoCode.mjs","names":["MonacoCode: FC<CodeCompProps>","handleMountIde: OnMount"],"sources":["../../../../src/components/IDE/MonacoCode.tsx"],"sourcesContent":["'use client';\n\nimport { Editor, type OnChange, type OnMount } from '@monaco-editor/react';\nimport { type FC, useMemo, useRef, useState } from 'react';\nimport { cn } from '../../utils/cn';\nimport { CopyButton } from '../CopyButton';\nimport { Loader } from '../Loader';\n\ntype CodeCompProps = {\n children: string;\n language: string;\n isDarkMode?: boolean;\n showLineNumbers?: boolean;\n showCopyButton?: boolean;\n isReadOnly?: boolean;\n onChange?: OnChange;\n};\n\nexport const MonacoCode: FC<CodeCompProps> = ({\n children,\n language,\n isDarkMode,\n showLineNumbers,\n showCopyButton = true,\n isReadOnly = false,\n onChange,\n}) => {\n const containerRef = useRef<HTMLDivElement>(null);\n const ideRef = useRef(null);\n const [editorSize, setEditorSize] = useState<{\n height: number;\n width: number;\n }>({ height: 0, width: 0 });\n\n const theme = useMemo(\n () => (isDarkMode ? 'vs-dark-transparent' : 'hc-light-theme'),\n [isDarkMode]\n );\n\n const handleMountIde: OnMount = (editor, monaco) => {\n // first time you set the height based on content Height\n\n ideRef.current = editor as any;\n const contentHeight = (editor.getContentHeight() ?? 0) + 25;\n\n monaco.editor.defineTheme('vs-dark-transparent', {\n base: 'vs-dark',\n inherit: true,\n rules: [],\n colors: {\n 'editor.background': '#00000000',\n },\n });\n monaco.editor.defineTheme('hc-light-theme', {\n base: 'vs',\n inherit: true,\n rules: [],\n colors: {\n 'editor.background': '#00000000',\n },\n });\n\n monaco.editor.setTheme(theme);\n\n // Disable TypeScript diagnostics\n monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({\n noSemanticValidation: true, // Disables type checking\n noSyntaxValidation: true, // Disables syntax errors\n });\n\n // Disable JavaScript diagnostics\n monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({\n noSemanticValidation: true,\n noSyntaxValidation: true,\n });\n\n // Disable unnecessary language features (e.g., suggestions, quick fixes)\n monaco.languages.typescript.typescriptDefaults.setCompilerOptions({\n noLib: true,\n allowNonTsExtensions: true,\n });\n\n monaco.languages.typescript.javascriptDefaults.setCompilerOptions({\n noLib: true,\n allowNonTsExtensions: true,\n });\n\n setEditorSize({\n height: contentHeight,\n width: containerRef.current?.clientWidth ?? 0,\n });\n };\n\n const isShowLineNumbers = showLineNumbers ?? children.split('\\n').length > 1;\n\n return (\n <div\n className={cn(\n 'relative h-full w-full text-sm',\n showLineNumbers && 'ml-0'\n )}\n >\n {showCopyButton && (\n <div className=\"sticky top-5 z-10\">\n <div\n className={cn('absolute right-2 bottom-0 flex h-7 items-center')}\n >\n <CopyButton content={children} />\n </div>\n </div>\n )}\n <div\n className=\"z-0 grid size-full grid-cols-[0px] overflow-auto\"\n ref={containerRef}\n >\n <Editor\n {...editorSize}\n defaultLanguage=\"typescript\"\n language={language}\n loading={<Loader />}\n defaultValue={String(children).replace(/\\n$/, '')}\n onMount={handleMountIde}\n onChange={onChange}\n options={{\n readOnly: isReadOnly,\n cursorStyle: 'line',\n minimap: { enabled: false },\n scrollbar: {\n vertical: 'hidden',\n verticalScrollbarSize: 0,\n alwaysConsumeMouseWheel: false,\n },\n folding: false, // Disable code folding\n renderValidationDecorations: 'off', // Disable error/warning decorations\n quickSuggestions: false, // Disable IntelliSense\n parameterHints: { enabled: false }, // Disable parameter hints\n suggestOnTriggerCharacters: false, // Disable suggestions on typing\n\n mouseWheelScrollSensitivity: 0,\n fastScrollSensitivity: 0,\n scrollBeyondLastLine: false,\n lineNumbers: isShowLineNumbers ? 'on' : 'off',\n }}\n theme={theme}\n className=\"my-2 rounded-md\"\n />\n </div>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;AAkBA,MAAaA,cAAiC,EAC5C,UACA,UACA,YACA,iBACA,iBAAiB,MACjB,aAAa,OACb,eACI;CACJ,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,SAAS,OAAO,KAAK;CAC3B,MAAM,CAAC,YAAY,iBAAiB,SAGjC;EAAE,QAAQ;EAAG,OAAO;EAAG,CAAC;CAE3B,MAAM,QAAQ,cACL,aAAa,wBAAwB,kBAC5C,CAAC,WAAW,CACb;CAED,MAAMC,kBAA2B,QAAQ,WAAW;AAGlD,SAAO,UAAU;EACjB,MAAM,iBAAiB,OAAO,kBAAkB,IAAI,KAAK;AAEzD,SAAO,OAAO,YAAY,uBAAuB;GAC/C,MAAM;GACN,SAAS;GACT,OAAO,EAAE;GACT,QAAQ,EACN,qBAAqB,aACtB;GACF,CAAC;AACF,SAAO,OAAO,YAAY,kBAAkB;GAC1C,MAAM;GACN,SAAS;GACT,OAAO,EAAE;GACT,QAAQ,EACN,qBAAqB,aACtB;GACF,CAAC;AAEF,SAAO,OAAO,SAAS,MAAM;AAG7B,SAAO,UAAU,WAAW,mBAAmB,sBAAsB;GACnE,sBAAsB;GACtB,oBAAoB;GACrB,CAAC;AAGF,SAAO,UAAU,WAAW,mBAAmB,sBAAsB;GACnE,sBAAsB;GACtB,oBAAoB;GACrB,CAAC;AAGF,SAAO,UAAU,WAAW,mBAAmB,mBAAmB;GAChE,OAAO;GACP,sBAAsB;GACvB,CAAC;AAEF,SAAO,UAAU,WAAW,mBAAmB,mBAAmB;GAChE,OAAO;GACP,sBAAsB;GACvB,CAAC;AAEF,gBAAc;GACZ,QAAQ;GACR,OAAO,aAAa,SAAS,eAAe;GAC7C,CAAC;;CAGJ,MAAM,oBAAoB,mBAAmB,SAAS,MAAM,KAAK,CAAC,SAAS;AAE3E,QACE,qBAAC;EACC,WAAW,GACT,kCACA,mBAAmB,OACpB;aAEA,kBACC,oBAAC;GAAI,WAAU;aACb,oBAAC;IACC,WAAW,GAAG,kDAAkD;cAEhE,oBAAC,cAAW,SAAS,WAAY;KAC7B;IACF,EAER,oBAAC;GACC,WAAU;GACV,KAAK;aAEL,oBAAC;IACC,GAAI;IACJ,iBAAgB;IACN;IACV,SAAS,oBAAC,WAAS;IACnB,cAAc,OAAO,SAAS,CAAC,QAAQ,OAAO,GAAG;IACjD,SAAS;IACC;IACV,SAAS;KACP,UAAU;KACV,aAAa;KACb,SAAS,EAAE,SAAS,OAAO;KAC3B,WAAW;MACT,UAAU;MACV,uBAAuB;MACvB,yBAAyB;MAC1B;KACD,SAAS;KACT,6BAA6B;KAC7B,kBAAkB;KAClB,gBAAgB,EAAE,SAAS,OAAO;KAClC,4BAA4B;KAE5B,6BAA6B;KAC7B,uBAAuB;KACvB,sBAAsB;KACtB,aAAa,oBAAoB,OAAO;KACzC;IACM;IACP,WAAU;KACV;IACE;GACF"}

package/dist/esm/components/IDE/PackageManagerSelector.mjs CHANGED Viewed

@@ -1,6 +1,5 @@
 'use client';
 import { Select } from "../Select/Select.mjs";
 import { useCodeContext } from "./CodeContext.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/esm/components/IDE/PackageManagerSelector.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PackageManagerSelector.mjs","names":["PackageManagerSelector: FC"],"sources":["../../../../src/components/IDE/PackageManagerSelector.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { Select } from '../Select';\nimport { useCodeContext } from './CodeContext';\n\nexport const PackageManagerSelector: FC = () => {\n const { packageManager, setPackageManager } = useCodeContext();\n\n return (\n <Select value={packageManager} onValueChange={setPackageManager}>\n <Select.Trigger className=\"py-1\">\n <Select.Value placeholder=\"Package Manager\" />\n </Select.Trigger>\n <Select.Content>\n <Select.Item value=\"npm\">npm</Select.Item>\n <Select.Item value=\"pnpm\">pnpm</Select.Item>\n <Select.Item value=\"yarn\">yarn</Select.Item>\n <Select.Item value=\"bun\">bun</Select.Item>\n </Select.Content>\n </Select>\n );\n};\n"],"mappings":"~~;;;;;;;;~~AAMA,MAAaA,+BAAmC;CAC9C,MAAM,EAAE,gBAAgB,sBAAsB,gBAAgB;AAE9D,QACE,qBAAC;EAAO,OAAO;EAAgB,eAAe;aAC5C,oBAAC,OAAO;GAAQ,WAAU;aACxB,oBAAC,OAAO,SAAM,aAAY,oBAAoB;IAC/B,EACjB,qBAAC,OAAO;GACN,oBAAC,OAAO;IAAK,OAAM;cAAM;KAAiB;GAC1C,oBAAC,OAAO;IAAK,OAAM;cAAO;KAAkB;GAC5C,oBAAC,OAAO;IAAK,OAAM;cAAO;KAAkB;GAC5C,oBAAC,OAAO;IAAK,OAAM;cAAM;KAAiB;MAC3B;GACV"}
1	+ {"version":3,"file":"PackageManagerSelector.mjs","names":["PackageManagerSelector: FC"],"sources":["../../../../src/components/IDE/PackageManagerSelector.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { Select } from '../Select';\nimport { useCodeContext } from './CodeContext';\n\nexport const PackageManagerSelector: FC = () => {\n const { packageManager, setPackageManager } = useCodeContext();\n\n return (\n <Select value={packageManager} onValueChange={setPackageManager}>\n <Select.Trigger className=\"py-1\">\n <Select.Value placeholder=\"Package Manager\" />\n </Select.Trigger>\n <Select.Content>\n <Select.Item value=\"npm\">npm</Select.Item>\n <Select.Item value=\"pnpm\">pnpm</Select.Item>\n <Select.Item value=\"yarn\">yarn</Select.Item>\n <Select.Item value=\"bun\">bun</Select.Item>\n </Select.Content>\n </Select>\n );\n};\n"],"mappings":";;;;;;;AAMA,MAAaA,+BAAmC;CAC9C,MAAM,EAAE,gBAAgB,sBAAsB,gBAAgB;AAE9D,QACE,qBAAC;EAAO,OAAO;EAAgB,eAAe;aAC5C,oBAAC,OAAO;GAAQ,WAAU;aACxB,oBAAC,OAAO,SAAM,aAAY,oBAAoB;IAC/B,EACjB,qBAAC,OAAO;GACN,oBAAC,OAAO;IAAK,OAAM;cAAM;KAAiB;GAC1C,oBAAC,OAAO;IAAK,OAAM;cAAO;KAAkB;GAC5C,oBAAC,OAAO;IAAK,OAAM;cAAO;KAAkB;GAC5C,oBAAC,OAAO;IAAK,OAAM;cAAM;KAAiB;MAC3B;GACV"}

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

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

package/dist/esm/components/Input/InputPassword.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InputPassword.mjs","names":["InputPassword: FC<InputPasswordProps>","handlePasswordReveal: MouseEventHandler<HTMLButtonElement>","isPasswordRevealed"],"sources":["../../../../src/components/Input/InputPassword.tsx"],"sourcesContent":["'use client';\n\nimport { EyeIcon, EyeOffIcon } from 'lucide-react';\nimport { type FC, type MouseEventHandler, useState } from 'react';\nimport { Input, type InputProps } from './Input';\n\ntype InputPasswordProps = Omit<InputProps, 'type'>;\n\nexport const InputPassword: FC<InputPasswordProps> = (props) => {\n const [isPasswordRevealed, setIsPasswordRevealed] = useState(false);\n\n const handlePasswordReveal: MouseEventHandler<HTMLButtonElement> = (e) => {\n e.preventDefault();\n e.stopPropagation();\n setIsPasswordRevealed((isPasswordRevealed) => !isPasswordRevealed);\n };\n\n const EyeIconComponent = isPasswordRevealed ? EyeIcon : EyeOffIcon;\n\n return (\n <div className=\"relative\">\n <Input\n {...props}\n aria-label=\"password\"\n type={isPasswordRevealed ? 'text' : 'password'}\n />\n\n <button\n data-testid=\"eye-icon\"\n type=\"button\"\n className=\"absolute right-2 h-full flex-row items-center\"\n onClick={handlePasswordReveal}\n aria-label={isPasswordRevealed ? 'Hide password' : 'Show password'}\n >\n <EyeIconComponent\n className=\"mr-2 inline-block cursor-pointer text-neutral\"\n size={20}\n />\n </button>\n </div>\n );\n};\n"],"mappings":"~~;;;;;;;;;~~AAQA,MAAaA,iBAAyC,UAAU;CAC9D,MAAM,CAAC,oBAAoB,yBAAyB,SAAS,MAAM;CAEnE,MAAMC,wBAA8D,MAAM;AACxE,IAAE,gBAAgB;AAClB,IAAE,iBAAiB;AACnB,yBAAuB,yBAAuB,CAACC,qBAAmB;;CAGpE,MAAM,mBAAmB,qBAAqB,UAAU;AAExD,QACE,qBAAC;EAAI,WAAU;aACb,oBAAC;GACC,GAAI;GACJ,cAAW;GACX,MAAM,qBAAqB,SAAS;IACpC,EAEF,oBAAC;GACC,eAAY;GACZ,MAAK;GACL,WAAU;GACV,SAAS;GACT,cAAY,qBAAqB,kBAAkB;aAEnD,oBAAC;IACC,WAAU;IACV,MAAM;KACN;IACK;GACL"}
1	+ {"version":3,"file":"InputPassword.mjs","names":["InputPassword: FC<InputPasswordProps>","handlePasswordReveal: MouseEventHandler<HTMLButtonElement>","isPasswordRevealed"],"sources":["../../../../src/components/Input/InputPassword.tsx"],"sourcesContent":["'use client';\n\nimport { EyeIcon, EyeOffIcon } from 'lucide-react';\nimport { type FC, type MouseEventHandler, useState } from 'react';\nimport { Input, type InputProps } from './Input';\n\ntype InputPasswordProps = Omit<InputProps, 'type'>;\n\nexport const InputPassword: FC<InputPasswordProps> = (props) => {\n const [isPasswordRevealed, setIsPasswordRevealed] = useState(false);\n\n const handlePasswordReveal: MouseEventHandler<HTMLButtonElement> = (e) => {\n e.preventDefault();\n e.stopPropagation();\n setIsPasswordRevealed((isPasswordRevealed) => !isPasswordRevealed);\n };\n\n const EyeIconComponent = isPasswordRevealed ? EyeIcon : EyeOffIcon;\n\n return (\n <div className=\"relative\">\n <Input\n {...props}\n aria-label=\"password\"\n type={isPasswordRevealed ? 'text' : 'password'}\n />\n\n <button\n data-testid=\"eye-icon\"\n type=\"button\"\n className=\"absolute right-2 h-full flex-row items-center\"\n onClick={handlePasswordReveal}\n aria-label={isPasswordRevealed ? 'Hide password' : 'Show password'}\n >\n <EyeIconComponent\n className=\"mr-2 inline-block cursor-pointer text-neutral\"\n size={20}\n />\n </button>\n </div>\n );\n};\n"],"mappings":";;;;;;;;AAQA,MAAaA,iBAAyC,UAAU;CAC9D,MAAM,CAAC,oBAAoB,yBAAyB,SAAS,MAAM;CAEnE,MAAMC,wBAA8D,MAAM;AACxE,IAAE,gBAAgB;AAClB,IAAE,iBAAiB;AACnB,yBAAuB,yBAAuB,CAACC,qBAAmB;;CAGpE,MAAM,mBAAmB,qBAAqB,UAAU;AAExD,QACE,qBAAC;EAAI,WAAU;aACb,oBAAC;GACC,GAAI;GACJ,cAAW;GACX,MAAM,qBAAqB,SAAS;IACpC,EAEF,oBAAC;GACC,eAAY;GACZ,MAAK;GACL,WAAU;GACV,SAAS;GACT,cAAY,qBAAqB,kBAAkB;aAEnD,oBAAC;IACC,WAAU;IACV,MAAM;KACN;IACK;GACL"}

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

@@ -1,10 +1,9 @@
 'use client';
 import { cn } from "../../utils/cn.mjs";
 import { Button } from "../Button/Button.mjs";
-import { createContext, useContext, useEffect, useRef, useState } from "react";
 import { MinusIcon } from "lucide-react";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
 import { cva } from "class-variance-authority";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/esm/components/Input/OTPInput.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OTPInput.mjs","names":["OTPInput: FC<OTPInputProps>","maxLength","value","calculatedDirection: 'forward' \| 'backward' \| 'none'","dynamicInputStyle: CSSProperties","contextValue: RenderProps","InputOTP: FC<InputOTPProps>","InputOTPSlot: FC<InputOTPSlotProps>","InputOTPSeparator: FC<ComponentProps<'div'>>","InputIndicator: FC<\n ComponentProps<'div'> & { ref: RefObject<HTMLDivElement \| null> }\n>"],"sources":["../../../../src/components/Input/OTPInput.tsx"],"sourcesContent":["'use client';\n\n/*\n This component is a fork of https://github.com/guilhermerodz/input-otp\n /\n\nimport { cva } from 'class-variance-authority';\nimport { MinusIcon } from 'lucide-react';\nimport {\n type ChangeEvent,\n type ClipboardEvent,\n type ComponentProps,\n type CSSProperties,\n createContext,\n type FC,\n type InputHTMLAttributes,\n type KeyboardEvent,\n type MouseEvent,\n type ReactNode,\n type RefObject,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button, type ButtonProps } from '../Button';\n\n// ---------------- Utilities ----------------\n\nconst syncTimeouts = (cb: (...args: any[]) => unknown): number[] => {\n const t1 = setTimeout(cb, 0); // For faster machines\n const t2 = setTimeout(cb, 1_0);\n const t3 = setTimeout(cb, 5_0);\n return [t1, t2, t3];\n};\n\nconst safeInsertRule = (sheet: CSSStyleSheet, rule: string) => {\n try {\n sheet.insertRule(rule);\n } catch {\n console.error('input-otp could not insert CSS rule:', rule);\n }\n};\n\n// Decided to go with <noscript>\n// instead of `scripting` CSS media query\n// because it's a fallback for initial page load\n// and the <script> tag won't be loaded\n// unless the user has JS disabled.\nconst NOSCRIPT_CSS_FALLBACK = `\n[data-input-otp] {\n --nojs-bg: white !important;\n --nojs-fg: black !important;\n\n background-color: var(--nojs-bg) !important;\n color: var(--nojs-fg) !important;\n caret-color: var(--nojs-fg) !important;\n letter-spacing: .25em !important;\n text-align: center !important;\n border: 1px solid var(--nojs-fg) !important;\n border-radius: 4px !important;\n width: 100% !important;\n}\n@media (prefers-color-scheme: dark) {\n [data-input-otp] {\n --nojs-bg: black !important;\n --nojs-fg: white !important;\n }\n}`;\n\n// ---------------- Constants ----------------\n\nconst PWM_BADGE_MARGIN_RIGHT = 18;\nconst PWM_BADGE_SPACE_WIDTH_PX = 40;\nconst PWM_BADGE_SPACE_WIDTH = `${PWM_BADGE_SPACE_WIDTH_PX}px` as const;\n\nconst PASSWORD_MANAGERS_SELECTORS = [\n '[data-lastpass-icon-root]', // LastPass\n 'com-1password-button', // 1Password\n '[data-dashlanecreated]', // Dashlane\n '[style$=\"2147483647 !important;\"]', // Bitwarden\n].join(',');\n\n// ---------------- Types ----------------\n\nexport type SlotProps = {\n isActive: boolean;\n char: string \| null;\n placeholderChar: string \| null;\n hasFakeCaret: boolean;\n};\n\nexport type RenderProps = {\n slots: SlotProps[];\n isFocused: boolean;\n isHovering: boolean;\n setSelection: (index: number) => void;\n};\n\ntype OverrideProps<T, R> = Omit<T, keyof R> & R;\n\ntype OTPInputBaseProps = OverrideProps<\n InputHTMLAttributes<HTMLInputElement>,\n {\n value?: string;\n onChange?: (newValue: string) => unknown;\n\n maxLength: number;\n\n onComplete?: (...args: any[]) => unknown;\n onActiveSlotChange?: (activeSlotIndex: number \| null) => unknown;\n pushPasswordManagerStrategy?: 'increase-width' \| 'none';\n pasteTransformer?: (pasted: string) => string;\n\n containerClassName?: string;\n\n noScriptCSSFallback?: string \| null;\n }\n>;\n\ntype InputOTPRenderFn = (props: RenderProps) => ReactNode;\n\nexport type OTPInputProps = OTPInputBaseProps &\n (\n \| {\n render: InputOTPRenderFn;\n children?: never;\n }\n \| {\n render?: never;\n children: ReactNode;\n }\n );\n\n// ---------------- Hooks ----------------\n\nexport const usePasswordManagerBadge = ({\n containerRef,\n inputRef,\n pushPasswordManagerStrategy,\n isFocused,\n}: {\n containerRef: RefObject<HTMLDivElement \| null>;\n inputRef: RefObject<HTMLInputElement \| null>;\n pushPasswordManagerStrategy: OTPInputProps['pushPasswordManagerStrategy'];\n isFocused: boolean;\n}) => {\n /* Password managers have a badge\n * and I'll use this state to push them\n * outside the input /\n const [hasPWMBadge, setHasPWMBadge] = useState(false);\n const [hasPWMBadgeSpace, setHasPWMBadgeSpace] = useState(false);\n const [done, setDone] = useState(false);\n\n const willPushPWMBadge =\n pushPasswordManagerStrategy === 'none'\n ? false\n : (pushPasswordManagerStrategy === 'increase-width' \|\|\n // TODO: remove 'experimental-no-flickering' support in 2.0.0\n pushPasswordManagerStrategy === 'experimental-no-flickering') &&\n hasPWMBadge &&\n hasPWMBadgeSpace;\n\n const trackPWMBadge = () => {\n const container = containerRef.current;\n const input = inputRef.current;\n if (\n !container \|\|\n !input \|\|\n done \|\|\n pushPasswordManagerStrategy === 'none'\n ) {\n return;\n }\n\n const elementToCompare = container;\n\n // Get the top right-center point of the container.\n // That is usually where most password managers place their badge.\n const rightCornerX =\n elementToCompare.getBoundingClientRect().left +\n elementToCompare.offsetWidth;\n const centereredY =\n elementToCompare.getBoundingClientRect().top +\n elementToCompare.offsetHeight / 2;\n const x = rightCornerX - PWM_BADGE_MARGIN_RIGHT;\n const y = centereredY;\n\n // Do an extra search to check for famous password managers\n const pmws = document.querySelectorAll(PASSWORD_MANAGERS_SELECTORS);\n\n // If no password manager is automatically detect,\n // we'll try to dispatch document.elementFromPoint\n // to identify badges\n if (pmws.length === 0) {\n const maybeBadgeEl = document.elementFromPoint(x, y);\n\n // If the found element is the input itself,\n // then we assume it's not a password manager badge.\n // We are not sure. Most times that means there isn't a badge.\n if (maybeBadgeEl === container) {\n return;\n }\n }\n\n setHasPWMBadge(true);\n setDone(true);\n };\n\n useEffect(() => {\n const container = containerRef.current;\n if (!container \|\| pushPasswordManagerStrategy === 'none') {\n return;\n }\n\n // Check if the PWM area is 100% visible\n const checkHasSpace = () => {\n const viewportWidth = window.innerWidth;\n const distanceToRightEdge =\n viewportWidth - container.getBoundingClientRect().right;\n setHasPWMBadgeSpace(distanceToRightEdge >= PWM_BADGE_SPACE_WIDTH_PX);\n };\n\n checkHasSpace();\n const interval = setInterval(checkHasSpace, 1000);\n\n return () => {\n clearInterval(interval);\n };\n }, [containerRef, pushPasswordManagerStrategy]);\n\n useEffect(() => {\n const _isFocused = isFocused \|\| document.activeElement === inputRef.current;\n\n if (pushPasswordManagerStrategy === 'none' \|\| !_isFocused) {\n return;\n }\n const t1 = setTimeout(trackPWMBadge, 0);\n const t2 = setTimeout(trackPWMBadge, 2000);\n const t3 = setTimeout(trackPWMBadge, 5000);\n const t4 = setTimeout(() => {\n setDone(true);\n }, 6000);\n return () => {\n clearTimeout(t1);\n clearTimeout(t2);\n clearTimeout(t3);\n clearTimeout(t4);\n };\n }, [inputRef, isFocused, pushPasswordManagerStrategy]);\n\n return { hasPWMBadge, willPushPWMBadge, PWM_BADGE_SPACE_WIDTH };\n};\n\nexport const usePrevious = <T,>(value: T): T \| undefined => {\n const ref = useRef<T \| undefined>(undefined);\n useEffect(() => {\n ref.current = value;\n });\n return ref.current;\n};\n\n// ---------------- Context ----------------\n\nexport const OTPInputContext = createContext<RenderProps>({} as RenderProps);\n\n// ---------------- Core Component ----------------\n\nexport const OTPInput: FC<OTPInputProps> = ({\n value: uncheckedValue,\n onChange: uncheckedOnChange,\n maxLength,\n pattern,\n placeholder,\n inputMode = 'numeric',\n onComplete,\n onActiveSlotChange,\n pushPasswordManagerStrategy = 'increase-width',\n pasteTransformer,\n containerClassName,\n noScriptCSSFallback = NOSCRIPT_CSS_FALLBACK,\n render,\n children,\n ...props\n}) => {\n // Only used when `value` state is not provided\n const [internalValue, setInternalValue] = useState(\n typeof props.defaultValue === 'string' ? props.defaultValue : ''\n );\n\n // Definitions\n const value = uncheckedValue ?? internalValue;\n const previousValue = usePrevious(value);\n const onChange = (newValue: string) => {\n uncheckedOnChange?.(newValue);\n setInternalValue(newValue);\n };\n const regexp =\n pattern !== undefined\n ? typeof pattern === 'string'\n ? new RegExp(pattern)\n : pattern\n : null;\n\n /* useRef /\n const inputRef = useRef<HTMLInputElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const initialLoadRef = useRef({\n value,\n onChange,\n isIOS:\n typeof window !== 'undefined' &&\n window?.CSS?.supports?.('-webkit-touch-callout', 'none'),\n });\n const inputMetadataRef = useRef<{\n prev: [number \| null, number \| null, 'none' \| 'forward' \| 'backward'];\n }>({\n prev: [\n inputRef.current?.selectionStart ?? null,\n inputRef.current?.selectionEnd ?? null,\n inputRef.current?.selectionDirection ?? 'none',\n ],\n });\n useEffect(() => {\n const input = inputRef.current;\n const container = containerRef.current;\n\n if (!input \|\| !container) {\n return;\n }\n\n // Sync input value\n if (initialLoadRef.current.value !== input.value) {\n initialLoadRef.current.onChange(input.value);\n }\n\n // Previous selection\n inputMetadataRef.current.prev = [\n input.selectionStart,\n input.selectionEnd,\n input.selectionDirection ?? 'none',\n ];\n const onDocumentSelectionChange = () => {\n if (document.activeElement !== input) {\n setMirrorSelectionStart(null);\n setMirrorSelectionEnd(null);\n setActualCaretPosition(null);\n return;\n }\n\n const selectionStart = input.selectionStart;\n const selectionEnd = input.selectionEnd;\n const selectionDirection = input.selectionDirection;\n const maxLength = input.maxLength;\n const value = input.value;\n const previousSelection = inputMetadataRef.current.prev;\n\n let calculatedStart = -1;\n let calculatedEnd = -1;\n let calculatedDirection: 'forward' \| 'backward' \| 'none' =\n selectionDirection ?? 'none';\n\n if (\n value.length !== 0 &&\n selectionStart !== null &&\n selectionEnd !== null\n ) {\n const isSingleCaret = selectionStart === selectionEnd;\n const isInsertMode =\n selectionStart === value.length && value.length < maxLength;\n\n if (isSingleCaret && !isInsertMode) {\n const caretPosition = selectionStart;\n if (caretPosition === 0) {\n calculatedStart = 0;\n calculatedEnd = 1;\n calculatedDirection = 'forward';\n } else if (caretPosition === maxLength) {\n calculatedStart = caretPosition - 1;\n calculatedEnd = caretPosition;\n calculatedDirection = 'backward';\n } else if (maxLength > 1 && value.length > 1) {\n let offset = 0;\n if (\n previousSelection[0] !== null &&\n previousSelection[1] !== null\n ) {\n calculatedDirection =\n caretPosition < previousSelection[1] ? 'backward' : 'forward';\n const wasPreviouslyInserting =\n previousSelection[0] === previousSelection[1] &&\n previousSelection[0] < maxLength;\n if (\n calculatedDirection === 'backward' &&\n !wasPreviouslyInserting\n ) {\n offset = -1;\n }\n }\n\n calculatedStart = offset + caretPosition;\n calculatedEnd = offset + caretPosition + 1;\n }\n }\n\n if (\n calculatedStart !== -1 &&\n calculatedEnd !== -1 &&\n calculatedStart !== calculatedEnd\n ) {\n inputRef.current?.setSelectionRange(\n calculatedStart,\n calculatedEnd,\n calculatedDirection\n );\n }\n }\n\n const finalSelectionStart =\n calculatedStart !== -1 ? calculatedStart : selectionStart;\n const finalSelectionEnd =\n calculatedEnd !== -1 ? calculatedEnd : selectionEnd;\n const finalDirection = calculatedDirection;\n\n // Track actual caret position (before expansion) for active slot detection\n if (selectionStart !== null && selectionEnd !== null) {\n const isSingleCaret = selectionStart === selectionEnd;\n if (isSingleCaret) {\n setActualCaretPosition(selectionStart);\n } else {\n // When selection is expanded, use the start position as the caret\n setActualCaretPosition(finalSelectionStart);\n }\n } else {\n setActualCaretPosition(null);\n }\n\n setMirrorSelectionStart(finalSelectionStart);\n setMirrorSelectionEnd(finalSelectionEnd);\n inputMetadataRef.current.prev = [\n finalSelectionStart,\n finalSelectionEnd,\n finalDirection,\n ];\n };\n document.addEventListener('selectionchange', onDocumentSelectionChange, {\n capture: true,\n });\n\n // Set initial mirror state\n onDocumentSelectionChange();\n if (document.activeElement === input) {\n setIsFocused(true);\n }\n\n // Apply needed styles\n if (!document.getElementById('input-otp-style')) {\n const styleEl = document.createElement('style');\n styleEl.id = 'input-otp-style';\n document.head.appendChild(styleEl);\n\n if (styleEl.sheet) {\n const autofillStyles =\n 'background: transparent !important; color: transparent !important; border-color: transparent !important; opacity: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; -webkit-text-fill-color: transparent !important;';\n\n safeInsertRule(\n styleEl.sheet,\n '[data-input-otp]::selection { background: transparent !important; color: transparent !important; }'\n );\n safeInsertRule(\n styleEl.sheet,\n `[data-input-otp]:autofill { ${autofillStyles} }`\n );\n safeInsertRule(\n styleEl.sheet,\n `[data-input-otp]:-webkit-autofill { ${autofillStyles} }`\n );\n // iOS\n safeInsertRule(\n styleEl.sheet,\n `@supports (-webkit-touch-callout: none) { [data-input-otp] { letter-spacing: -.6em !important; font-weight: 100 !important; font-stretch: ultra-condensed; font-optical-sizing: none !important; left: -1px !important; right: 1px !important; } }`\n );\n // PWM badges\n safeInsertRule(\n styleEl.sheet,\n `[data-input-otp] + { pointer-events: all !important; }`\n );\n }\n }\n // Track root height\n const updateRootHeight = () => {\n if (container) {\n container.style.setProperty('--root-height', `${input.clientHeight}px`);\n }\n };\n updateRootHeight();\n const resizeObserver = new ResizeObserver(updateRootHeight);\n resizeObserver.observe(input);\n\n return () => {\n document.removeEventListener(\n 'selectionchange',\n onDocumentSelectionChange,\n { capture: true }\n );\n resizeObserver.disconnect();\n };\n }, []);\n\n /** Mirrors for UI rendering purpose only /\n const [isHoveringInput, setIsHoveringInput] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n const [mirrorSelectionStart, setMirrorSelectionStart] = useState<\n number \| null\n >(null);\n const [mirrorSelectionEnd, setMirrorSelectionEnd] = useState<number \| null>(\n null\n );\n const [actualCaretPosition, setActualCaretPosition] = useState<number \| null>(\n null\n );\n\n /* Effects /\n useEffect(() => {\n syncTimeouts(() => {\n // Forcefully remove :autofill state\n inputRef.current?.dispatchEvent(new Event('input'));\n\n // Update the selection state\n const s = inputRef.current?.selectionStart ?? null;\n const e = inputRef.current?.selectionEnd ?? null;\n const dir = inputRef.current?.selectionDirection ?? 'none';\n if (s !== null && e !== null) {\n setMirrorSelectionStart(s);\n setMirrorSelectionEnd(e);\n // Track actual caret position (use start position as caret)\n setActualCaretPosition(s);\n inputMetadataRef.current.prev = [s, e, dir];\n }\n });\n }, [value, isFocused]);\n\n useEffect(() => {\n if (previousValue === undefined) {\n return;\n }\n\n if (\n value !== previousValue &&\n previousValue.length < maxLength &&\n value.length === maxLength\n ) {\n onComplete?.(value);\n }\n }, [maxLength, onComplete, previousValue, value]);\n\n // Track active slot changes\n const previousActiveSlot = useRef<number \| null>(null);\n useEffect(() => {\n const activeSlotIndex =\n isFocused && actualCaretPosition !== null ? actualCaretPosition : null;\n\n if (activeSlotIndex !== previousActiveSlot.current) {\n previousActiveSlot.current = activeSlotIndex;\n onActiveSlotChange?.(activeSlotIndex);\n }\n }, [isFocused, actualCaretPosition, onActiveSlotChange]);\n\n const pwmb = usePasswordManagerBadge({\n containerRef,\n inputRef,\n pushPasswordManagerStrategy,\n isFocused,\n });\n\n /* Event handlers /\n const _changeListener = (e: ChangeEvent<HTMLInputElement>) => {\n const newValue = e.currentTarget.value.slice(0, maxLength);\n if (newValue.length > 0 && regexp && !regexp.test(newValue)) {\n e.preventDefault();\n return;\n }\n const maybeHasDeleted =\n typeof previousValue === 'string' &&\n newValue.length < previousValue.length;\n if (maybeHasDeleted) {\n // Since cutting/deleting text doesn't trigger\n // selectionchange event, we'll have to dispatch it manually.\n // NOTE: The following line also triggers when cmd+A then pasting\n // a value with smaller length, which is not ideal for performance.\n document.dispatchEvent(new Event('selectionchange'));\n }\n onChange(newValue);\n };\n const _focusListener = () => {\n if (inputRef.current) {\n const start = Math.min(inputRef.current.value.length, maxLength - 1);\n const end = inputRef.current.value.length;\n inputRef.current?.setSelectionRange(start, end);\n setMirrorSelectionStart(start);\n setMirrorSelectionEnd(end);\n }\n setIsFocused(true);\n };\n // Fix iOS pasting\n const _pasteListener = (e: ClipboardEvent<HTMLInputElement>) => {\n const input = inputRef.current;\n if (\n !pasteTransformer &&\n (!initialLoadRef.current.isIOS \|\| !e.clipboardData \|\| !input)\n ) {\n return;\n }\n\n const _content = e.clipboardData.getData('text/plain');\n const content = pasteTransformer ? pasteTransformer(_content) : _content;\n e.preventDefault();\n\n const start = inputRef.current?.selectionStart;\n const end = inputRef.current?.selectionEnd;\n\n const isReplacing = start !== end;\n\n const newValueUncapped = isReplacing\n ? value.slice(0, start ?? 0) + content + value.slice(end ?? 0) // Replacing\n : value.slice(0, start ?? 0) + content + value.slice(start ?? 0); // Inserting\n const newValue = newValueUncapped.slice(0, maxLength);\n\n if (newValue.length > 0 && regexp && !regexp.test(newValue)) {\n return;\n }\n\n if (input) {\n input.value = newValue;\n onChange(newValue);\n\n const _start = Math.min(newValue.length, maxLength - 1);\n const _end = newValue.length;\n\n input.setSelectionRange(_start, _end);\n setMirrorSelectionStart(_start);\n setMirrorSelectionEnd(_end);\n }\n };\n\n /* Styles - dynamic styles that can't be converted to Tailwind /\n const dynamicInputStyle: CSSProperties = {\n width: pwmb.willPushPWMBadge\n ? `calc(100% + ${pwmb.PWM_BADGE_SPACE_WIDTH})`\n : '100%',\n clipPath: pwmb.willPushPWMBadge\n ? `inset(0 ${pwmb.PWM_BADGE_SPACE_WIDTH} 0 0)`\n : undefined,\n fontSize: 'var(--root-height)',\n };\n\n /* Rendering /\n const renderedInput = (\n <input\n autoComplete={props.autoComplete \|\| 'one-time-code'}\n {...props}\n data-input-otp\n data-input-otp-placeholder-shown={value.length === 0 \|\| undefined}\n data-input-otp-mss={mirrorSelectionStart}\n data-input-otp-mse={mirrorSelectionEnd}\n inputMode={inputMode}\n pattern={regexp?.source}\n aria-placeholder={placeholder}\n className=\"-z-10 pointer-events-auto absolute inset-0 flex h-full border-0 border-transparent bg-transparent text-center font-mono text-transparent tabular-nums leading-none tracking-[-.5em] caret-transparent opacity-100 shadow-none outline-none\"\n style={dynamicInputStyle}\n maxLength={maxLength}\n value={value}\n ref={inputRef}\n onPaste={(e) => {\n _pasteListener(e);\n props.onPaste?.(e);\n }}\n onChange={_changeListener}\n onMouseOver={(e) => {\n setIsHoveringInput(true);\n props.onMouseOver?.(e);\n }}\n onMouseLeave={(e) => {\n setIsHoveringInput(false);\n props.onMouseLeave?.(e);\n }}\n onKeyDown={(e) => {\n // Track arrow key navigation to ensure active slot updates correctly\n if (e.key === 'ArrowLeft' \|\| e.key === 'ArrowRight') {\n // Use requestAnimationFrame to check selection after browser has processed the key\n requestAnimationFrame(() => {\n const input = inputRef.current;\n if (input && document.activeElement === input) {\n const s = input.selectionStart;\n const end = input.selectionEnd;\n if (s !== null && end !== null) {\n // Update actual caret position - use start position as caret\n setActualCaretPosition(s);\n }\n }\n });\n }\n props.onKeyDown?.(e);\n }}\n onFocus={(e) => {\n _focusListener();\n props.onFocus?.(e);\n }}\n onBlur={(e) => {\n setIsFocused(false);\n props.onBlur?.(e);\n }}\n />\n );\n\n const setSelection = (index: number) => {\n const input = inputRef.current;\n if (!input \|\| props.disabled) {\n return;\n }\n\n // Clamp index to valid range\n const clampedIndex = Math.max(0, Math.min(index, maxLength - 1));\n\n // Focus the input if not already focused\n if (document.activeElement !== input) {\n input.focus();\n }\n\n // Set selection to the clicked slot\n // If there's a character at that position, select it; otherwise just position the caret\n const hasChar = value[clampedIndex] !== undefined;\n const start = clampedIndex;\n const end = hasChar ? clampedIndex + 1 : clampedIndex;\n\n input.setSelectionRange(start, end);\n setMirrorSelectionStart(start);\n setMirrorSelectionEnd(end);\n setIsFocused(true);\n };\n\n const contextValue: RenderProps = {\n slots: Array.from({ length: maxLength }).map((_, slotIdx) => {\n const isActive =\n isFocused &&\n mirrorSelectionStart !== null &&\n mirrorSelectionEnd !== null &&\n ((mirrorSelectionStart === mirrorSelectionEnd &&\n slotIdx === mirrorSelectionStart) \|\|\n (slotIdx >= mirrorSelectionStart && slotIdx < mirrorSelectionEnd));\n\n const char = value[slotIdx] !== undefined ? value[slotIdx] : null;\n const placeholderChar =\n value[0] !== undefined ? null : (placeholder?.[slotIdx] ?? null);\n\n return {\n char,\n placeholderChar,\n isActive,\n hasFakeCaret: isActive && char === null,\n };\n }),\n isFocused,\n isHovering: !props.disabled && isHoveringInput,\n setSelection,\n };\n\n const renderedChildren =\n render !== undefined ? (\n render(contextValue)\n ) : (\n <OTPInputContext.Provider value={contextValue}>\n {children}\n </OTPInputContext.Provider>\n );\n\n return (\n <>\n {noScriptCSSFallback !== null && (\n <noscript>\n <style>{noScriptCSSFallback}</style>\n </noscript>\n )}\n\n <div\n ref={containerRef}\n className={cn(\n 'relative',\n props.disabled ? 'cursor-default' : 'cursor-text',\n containerClassName\n )}\n >\n {renderedChildren}\n\n <div className=\"absolute inset-0\">{renderedInput}</div>\n </div>\n </>\n );\n};\n\n// ---------------- Root ----------------\n\ntype InputOTPProps = Omit<ComponentProps<typeof OTPInput>, 'children'>;\n\nexport const inputSlotVariants = cva('block text-center', {\n variants: {\n size: {\n sm: 'h-4 w-3 text-sm',\n md: 'h-5 w-4 text-base',\n lg: 'h-6 w-5 text-lg',\n xl: 'h-7 w-6 text-xl',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n});\n\nexport const InputOTP: FC<InputOTPProps> = ({\n className,\n render,\n ...props\n}) => (\n <OTPInput\n containerClassName=\"relative flex items-center gap-2 has-disabled:opacity-50\"\n className={cn('disabled:cursor-not-allowed', className)}\n render={render!}\n {...props}\n />\n);\n\n// ---------------- Group ----------------\n\nexport const InputOTPGroup = ({\n className,\n ...props\n}: ComponentProps<'div'>) => (\n <div className={cn('z-10 flex items-center gap-3', className)} {...props} />\n);\n\n// ---------------- Slot ----------------\n\ntype InputOTPSlotProps = Omit<ButtonProps, 'variant' \| 'label'> & {\n index: number;\n};\n\nexport const InputOTPSlot: FC<InputOTPSlotProps> = ({\n index,\n className,\n onClick,\n onKeyDown,\n ...props\n}) => {\n const inputOTPContext = useContext(OTPInputContext);\n const { char, isActive } = inputOTPContext?.slots[index] ?? {};\n const { setSelection } = inputOTPContext ?? {};\n\n const handleClick = (e: MouseEvent<HTMLButtonElement>) => {\n setSelection?.(index);\n onClick?.(e);\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n setSelection?.(index);\n }\n onKeyDown?.(e);\n };\n\n return (\n <Button\n aria-active={isActive}\n variant=\"input\"\n color=\"custom\"\n tabIndex={-1}\n className={cn('relative z-10 px-2!', isActive && 'ring-4!', className)}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n label={null}\n {...props}\n >\n {/ value */}\n <span className=\"relative z-10 flex h-6 w-4 items-center justify-center\">\n {char}\n </span>\n </Button>\n );\n};\n\n// ---------------- Separator ----------------\n\nexport const InputOTPSeparator: FC<ComponentProps<'div'>> = (props) => (\n <div\n aria-hidden\n className=\"z-0 table h-0.5 w-3 rounded-full bg-border text-text/50\"\n {...props}\n >\n <MinusIcon />\n </div>\n);\n\nexport const InputIndicator: FC<\n ComponentProps<'div'> & { ref: RefObject<HTMLDivElement \| null> }\n> = ({ ref, ...props }) => (\n <div\n data-indicator\n className=\"absolute top-0 z-0 h-full w-auto rounded-xl bg-text/20 ring-4 ring-text/20 transition-[left,width] duration-300 ease-in-out [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl motion-reduce:transition-none\"\n ref={ref}\n {...props}\n />\n);\n"],"mappings":"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"}
1	+ {"version":3,"file":"OTPInput.mjs","names":["OTPInput: FC<OTPInputProps>","maxLength","value","calculatedDirection: 'forward' \| 'backward' \| 'none'","dynamicInputStyle: CSSProperties","contextValue: RenderProps","InputOTP: FC<InputOTPProps>","InputOTPSlot: FC<InputOTPSlotProps>","InputOTPSeparator: FC<ComponentProps<'div'>>","InputIndicator: FC<\n ComponentProps<'div'> & { ref: RefObject<HTMLDivElement \| null> }\n>"],"sources":["../../../../src/components/Input/OTPInput.tsx"],"sourcesContent":["'use client';\n\n/*\n This component is a fork of https://github.com/guilhermerodz/input-otp\n /\n\nimport { cva } from 'class-variance-authority';\nimport { MinusIcon } from 'lucide-react';\nimport {\n type ChangeEvent,\n type ClipboardEvent,\n type ComponentProps,\n type CSSProperties,\n createContext,\n type FC,\n type InputHTMLAttributes,\n type KeyboardEvent,\n type MouseEvent,\n type ReactNode,\n type RefObject,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { cn } from '../../utils/cn';\nimport { Button, type ButtonProps } from '../Button';\n\n// ---------------- Utilities ----------------\n\nconst syncTimeouts = (cb: (...args: any[]) => unknown): number[] => {\n const t1 = setTimeout(cb, 0); // For faster machines\n const t2 = setTimeout(cb, 1_0);\n const t3 = setTimeout(cb, 5_0);\n return [t1, t2, t3];\n};\n\nconst safeInsertRule = (sheet: CSSStyleSheet, rule: string) => {\n try {\n sheet.insertRule(rule);\n } catch {\n console.error('input-otp could not insert CSS rule:', rule);\n }\n};\n\n// Decided to go with <noscript>\n// instead of `scripting` CSS media query\n// because it's a fallback for initial page load\n// and the <script> tag won't be loaded\n// unless the user has JS disabled.\nconst NOSCRIPT_CSS_FALLBACK = `\n[data-input-otp] {\n --nojs-bg: white !important;\n --nojs-fg: black !important;\n\n background-color: var(--nojs-bg) !important;\n color: var(--nojs-fg) !important;\n caret-color: var(--nojs-fg) !important;\n letter-spacing: .25em !important;\n text-align: center !important;\n border: 1px solid var(--nojs-fg) !important;\n border-radius: 4px !important;\n width: 100% !important;\n}\n@media (prefers-color-scheme: dark) {\n [data-input-otp] {\n --nojs-bg: black !important;\n --nojs-fg: white !important;\n }\n}`;\n\n// ---------------- Constants ----------------\n\nconst PWM_BADGE_MARGIN_RIGHT = 18;\nconst PWM_BADGE_SPACE_WIDTH_PX = 40;\nconst PWM_BADGE_SPACE_WIDTH = `${PWM_BADGE_SPACE_WIDTH_PX}px` as const;\n\nconst PASSWORD_MANAGERS_SELECTORS = [\n '[data-lastpass-icon-root]', // LastPass\n 'com-1password-button', // 1Password\n '[data-dashlanecreated]', // Dashlane\n '[style$=\"2147483647 !important;\"]', // Bitwarden\n].join(',');\n\n// ---------------- Types ----------------\n\nexport type SlotProps = {\n isActive: boolean;\n char: string \| null;\n placeholderChar: string \| null;\n hasFakeCaret: boolean;\n};\n\nexport type RenderProps = {\n slots: SlotProps[];\n isFocused: boolean;\n isHovering: boolean;\n setSelection: (index: number) => void;\n};\n\ntype OverrideProps<T, R> = Omit<T, keyof R> & R;\n\ntype OTPInputBaseProps = OverrideProps<\n InputHTMLAttributes<HTMLInputElement>,\n {\n value?: string;\n onChange?: (newValue: string) => unknown;\n\n maxLength: number;\n\n onComplete?: (...args: any[]) => unknown;\n onActiveSlotChange?: (activeSlotIndex: number \| null) => unknown;\n pushPasswordManagerStrategy?: 'increase-width' \| 'none';\n pasteTransformer?: (pasted: string) => string;\n\n containerClassName?: string;\n\n noScriptCSSFallback?: string \| null;\n }\n>;\n\ntype InputOTPRenderFn = (props: RenderProps) => ReactNode;\n\nexport type OTPInputProps = OTPInputBaseProps &\n (\n \| {\n render: InputOTPRenderFn;\n children?: never;\n }\n \| {\n render?: never;\n children: ReactNode;\n }\n );\n\n// ---------------- Hooks ----------------\n\nexport const usePasswordManagerBadge = ({\n containerRef,\n inputRef,\n pushPasswordManagerStrategy,\n isFocused,\n}: {\n containerRef: RefObject<HTMLDivElement \| null>;\n inputRef: RefObject<HTMLInputElement \| null>;\n pushPasswordManagerStrategy: OTPInputProps['pushPasswordManagerStrategy'];\n isFocused: boolean;\n}) => {\n /* Password managers have a badge\n * and I'll use this state to push them\n * outside the input /\n const [hasPWMBadge, setHasPWMBadge] = useState(false);\n const [hasPWMBadgeSpace, setHasPWMBadgeSpace] = useState(false);\n const [done, setDone] = useState(false);\n\n const willPushPWMBadge =\n pushPasswordManagerStrategy === 'none'\n ? false\n : (pushPasswordManagerStrategy === 'increase-width' \|\|\n // TODO: remove 'experimental-no-flickering' support in 2.0.0\n pushPasswordManagerStrategy === 'experimental-no-flickering') &&\n hasPWMBadge &&\n hasPWMBadgeSpace;\n\n const trackPWMBadge = () => {\n const container = containerRef.current;\n const input = inputRef.current;\n if (\n !container \|\|\n !input \|\|\n done \|\|\n pushPasswordManagerStrategy === 'none'\n ) {\n return;\n }\n\n const elementToCompare = container;\n\n // Get the top right-center point of the container.\n // That is usually where most password managers place their badge.\n const rightCornerX =\n elementToCompare.getBoundingClientRect().left +\n elementToCompare.offsetWidth;\n const centereredY =\n elementToCompare.getBoundingClientRect().top +\n elementToCompare.offsetHeight / 2;\n const x = rightCornerX - PWM_BADGE_MARGIN_RIGHT;\n const y = centereredY;\n\n // Do an extra search to check for famous password managers\n const pmws = document.querySelectorAll(PASSWORD_MANAGERS_SELECTORS);\n\n // If no password manager is automatically detect,\n // we'll try to dispatch document.elementFromPoint\n // to identify badges\n if (pmws.length === 0) {\n const maybeBadgeEl = document.elementFromPoint(x, y);\n\n // If the found element is the input itself,\n // then we assume it's not a password manager badge.\n // We are not sure. Most times that means there isn't a badge.\n if (maybeBadgeEl === container) {\n return;\n }\n }\n\n setHasPWMBadge(true);\n setDone(true);\n };\n\n useEffect(() => {\n const container = containerRef.current;\n if (!container \|\| pushPasswordManagerStrategy === 'none') {\n return;\n }\n\n // Check if the PWM area is 100% visible\n const checkHasSpace = () => {\n const viewportWidth = window.innerWidth;\n const distanceToRightEdge =\n viewportWidth - container.getBoundingClientRect().right;\n setHasPWMBadgeSpace(distanceToRightEdge >= PWM_BADGE_SPACE_WIDTH_PX);\n };\n\n checkHasSpace();\n const interval = setInterval(checkHasSpace, 1000);\n\n return () => {\n clearInterval(interval);\n };\n }, [containerRef, pushPasswordManagerStrategy]);\n\n useEffect(() => {\n const _isFocused = isFocused \|\| document.activeElement === inputRef.current;\n\n if (pushPasswordManagerStrategy === 'none' \|\| !_isFocused) {\n return;\n }\n const t1 = setTimeout(trackPWMBadge, 0);\n const t2 = setTimeout(trackPWMBadge, 2000);\n const t3 = setTimeout(trackPWMBadge, 5000);\n const t4 = setTimeout(() => {\n setDone(true);\n }, 6000);\n return () => {\n clearTimeout(t1);\n clearTimeout(t2);\n clearTimeout(t3);\n clearTimeout(t4);\n };\n }, [inputRef, isFocused, pushPasswordManagerStrategy]);\n\n return { hasPWMBadge, willPushPWMBadge, PWM_BADGE_SPACE_WIDTH };\n};\n\nexport const usePrevious = <T,>(value: T): T \| undefined => {\n const ref = useRef<T \| undefined>(undefined);\n useEffect(() => {\n ref.current = value;\n });\n return ref.current;\n};\n\n// ---------------- Context ----------------\n\nexport const OTPInputContext = createContext<RenderProps>({} as RenderProps);\n\n// ---------------- Core Component ----------------\n\nexport const OTPInput: FC<OTPInputProps> = ({\n value: uncheckedValue,\n onChange: uncheckedOnChange,\n maxLength,\n pattern,\n placeholder,\n inputMode = 'numeric',\n onComplete,\n onActiveSlotChange,\n pushPasswordManagerStrategy = 'increase-width',\n pasteTransformer,\n containerClassName,\n noScriptCSSFallback = NOSCRIPT_CSS_FALLBACK,\n render,\n children,\n ...props\n}) => {\n // Only used when `value` state is not provided\n const [internalValue, setInternalValue] = useState(\n typeof props.defaultValue === 'string' ? props.defaultValue : ''\n );\n\n // Definitions\n const value = uncheckedValue ?? internalValue;\n const previousValue = usePrevious(value);\n const onChange = (newValue: string) => {\n uncheckedOnChange?.(newValue);\n setInternalValue(newValue);\n };\n const regexp =\n pattern !== undefined\n ? typeof pattern === 'string'\n ? new RegExp(pattern)\n : pattern\n : null;\n\n /* useRef /\n const inputRef = useRef<HTMLInputElement>(null);\n const containerRef = useRef<HTMLDivElement>(null);\n const initialLoadRef = useRef({\n value,\n onChange,\n isIOS:\n typeof window !== 'undefined' &&\n window?.CSS?.supports?.('-webkit-touch-callout', 'none'),\n });\n const inputMetadataRef = useRef<{\n prev: [number \| null, number \| null, 'none' \| 'forward' \| 'backward'];\n }>({\n prev: [\n inputRef.current?.selectionStart ?? null,\n inputRef.current?.selectionEnd ?? null,\n inputRef.current?.selectionDirection ?? 'none',\n ],\n });\n useEffect(() => {\n const input = inputRef.current;\n const container = containerRef.current;\n\n if (!input \|\| !container) {\n return;\n }\n\n // Sync input value\n if (initialLoadRef.current.value !== input.value) {\n initialLoadRef.current.onChange(input.value);\n }\n\n // Previous selection\n inputMetadataRef.current.prev = [\n input.selectionStart,\n input.selectionEnd,\n input.selectionDirection ?? 'none',\n ];\n const onDocumentSelectionChange = () => {\n if (document.activeElement !== input) {\n setMirrorSelectionStart(null);\n setMirrorSelectionEnd(null);\n setActualCaretPosition(null);\n return;\n }\n\n const selectionStart = input.selectionStart;\n const selectionEnd = input.selectionEnd;\n const selectionDirection = input.selectionDirection;\n const maxLength = input.maxLength;\n const value = input.value;\n const previousSelection = inputMetadataRef.current.prev;\n\n let calculatedStart = -1;\n let calculatedEnd = -1;\n let calculatedDirection: 'forward' \| 'backward' \| 'none' =\n selectionDirection ?? 'none';\n\n if (\n value.length !== 0 &&\n selectionStart !== null &&\n selectionEnd !== null\n ) {\n const isSingleCaret = selectionStart === selectionEnd;\n const isInsertMode =\n selectionStart === value.length && value.length < maxLength;\n\n if (isSingleCaret && !isInsertMode) {\n const caretPosition = selectionStart;\n if (caretPosition === 0) {\n calculatedStart = 0;\n calculatedEnd = 1;\n calculatedDirection = 'forward';\n } else if (caretPosition === maxLength) {\n calculatedStart = caretPosition - 1;\n calculatedEnd = caretPosition;\n calculatedDirection = 'backward';\n } else if (maxLength > 1 && value.length > 1) {\n let offset = 0;\n if (\n previousSelection[0] !== null &&\n previousSelection[1] !== null\n ) {\n calculatedDirection =\n caretPosition < previousSelection[1] ? 'backward' : 'forward';\n const wasPreviouslyInserting =\n previousSelection[0] === previousSelection[1] &&\n previousSelection[0] < maxLength;\n if (\n calculatedDirection === 'backward' &&\n !wasPreviouslyInserting\n ) {\n offset = -1;\n }\n }\n\n calculatedStart = offset + caretPosition;\n calculatedEnd = offset + caretPosition + 1;\n }\n }\n\n if (\n calculatedStart !== -1 &&\n calculatedEnd !== -1 &&\n calculatedStart !== calculatedEnd\n ) {\n inputRef.current?.setSelectionRange(\n calculatedStart,\n calculatedEnd,\n calculatedDirection\n );\n }\n }\n\n const finalSelectionStart =\n calculatedStart !== -1 ? calculatedStart : selectionStart;\n const finalSelectionEnd =\n calculatedEnd !== -1 ? calculatedEnd : selectionEnd;\n const finalDirection = calculatedDirection;\n\n // Track actual caret position (before expansion) for active slot detection\n if (selectionStart !== null && selectionEnd !== null) {\n const isSingleCaret = selectionStart === selectionEnd;\n if (isSingleCaret) {\n setActualCaretPosition(selectionStart);\n } else {\n // When selection is expanded, use the start position as the caret\n setActualCaretPosition(finalSelectionStart);\n }\n } else {\n setActualCaretPosition(null);\n }\n\n setMirrorSelectionStart(finalSelectionStart);\n setMirrorSelectionEnd(finalSelectionEnd);\n inputMetadataRef.current.prev = [\n finalSelectionStart,\n finalSelectionEnd,\n finalDirection,\n ];\n };\n document.addEventListener('selectionchange', onDocumentSelectionChange, {\n capture: true,\n });\n\n // Set initial mirror state\n onDocumentSelectionChange();\n if (document.activeElement === input) {\n setIsFocused(true);\n }\n\n // Apply needed styles\n if (!document.getElementById('input-otp-style')) {\n const styleEl = document.createElement('style');\n styleEl.id = 'input-otp-style';\n document.head.appendChild(styleEl);\n\n if (styleEl.sheet) {\n const autofillStyles =\n 'background: transparent !important; color: transparent !important; border-color: transparent !important; opacity: 0 !important; box-shadow: none !important; -webkit-box-shadow: none !important; -webkit-text-fill-color: transparent !important;';\n\n safeInsertRule(\n styleEl.sheet,\n '[data-input-otp]::selection { background: transparent !important; color: transparent !important; }'\n );\n safeInsertRule(\n styleEl.sheet,\n `[data-input-otp]:autofill { ${autofillStyles} }`\n );\n safeInsertRule(\n styleEl.sheet,\n `[data-input-otp]:-webkit-autofill { ${autofillStyles} }`\n );\n // iOS\n safeInsertRule(\n styleEl.sheet,\n `@supports (-webkit-touch-callout: none) { [data-input-otp] { letter-spacing: -.6em !important; font-weight: 100 !important; font-stretch: ultra-condensed; font-optical-sizing: none !important; left: -1px !important; right: 1px !important; } }`\n );\n // PWM badges\n safeInsertRule(\n styleEl.sheet,\n `[data-input-otp] + { pointer-events: all !important; }`\n );\n }\n }\n // Track root height\n const updateRootHeight = () => {\n if (container) {\n container.style.setProperty('--root-height', `${input.clientHeight}px`);\n }\n };\n updateRootHeight();\n const resizeObserver = new ResizeObserver(updateRootHeight);\n resizeObserver.observe(input);\n\n return () => {\n document.removeEventListener(\n 'selectionchange',\n onDocumentSelectionChange,\n { capture: true }\n );\n resizeObserver.disconnect();\n };\n }, []);\n\n /** Mirrors for UI rendering purpose only /\n const [isHoveringInput, setIsHoveringInput] = useState(false);\n const [isFocused, setIsFocused] = useState(false);\n const [mirrorSelectionStart, setMirrorSelectionStart] = useState<\n number \| null\n >(null);\n const [mirrorSelectionEnd, setMirrorSelectionEnd] = useState<number \| null>(\n null\n );\n const [actualCaretPosition, setActualCaretPosition] = useState<number \| null>(\n null\n );\n\n /* Effects /\n useEffect(() => {\n syncTimeouts(() => {\n // Forcefully remove :autofill state\n inputRef.current?.dispatchEvent(new Event('input'));\n\n // Update the selection state\n const s = inputRef.current?.selectionStart ?? null;\n const e = inputRef.current?.selectionEnd ?? null;\n const dir = inputRef.current?.selectionDirection ?? 'none';\n if (s !== null && e !== null) {\n setMirrorSelectionStart(s);\n setMirrorSelectionEnd(e);\n // Track actual caret position (use start position as caret)\n setActualCaretPosition(s);\n inputMetadataRef.current.prev = [s, e, dir];\n }\n });\n }, [value, isFocused]);\n\n useEffect(() => {\n if (previousValue === undefined) {\n return;\n }\n\n if (\n value !== previousValue &&\n previousValue.length < maxLength &&\n value.length === maxLength\n ) {\n onComplete?.(value);\n }\n }, [maxLength, onComplete, previousValue, value]);\n\n // Track active slot changes\n const previousActiveSlot = useRef<number \| null>(null);\n useEffect(() => {\n const activeSlotIndex =\n isFocused && actualCaretPosition !== null ? actualCaretPosition : null;\n\n if (activeSlotIndex !== previousActiveSlot.current) {\n previousActiveSlot.current = activeSlotIndex;\n onActiveSlotChange?.(activeSlotIndex);\n }\n }, [isFocused, actualCaretPosition, onActiveSlotChange]);\n\n const pwmb = usePasswordManagerBadge({\n containerRef,\n inputRef,\n pushPasswordManagerStrategy,\n isFocused,\n });\n\n /* Event handlers /\n const _changeListener = (e: ChangeEvent<HTMLInputElement>) => {\n const newValue = e.currentTarget.value.slice(0, maxLength);\n if (newValue.length > 0 && regexp && !regexp.test(newValue)) {\n e.preventDefault();\n return;\n }\n const maybeHasDeleted =\n typeof previousValue === 'string' &&\n newValue.length < previousValue.length;\n if (maybeHasDeleted) {\n // Since cutting/deleting text doesn't trigger\n // selectionchange event, we'll have to dispatch it manually.\n // NOTE: The following line also triggers when cmd+A then pasting\n // a value with smaller length, which is not ideal for performance.\n document.dispatchEvent(new Event('selectionchange'));\n }\n onChange(newValue);\n };\n const _focusListener = () => {\n if (inputRef.current) {\n const start = Math.min(inputRef.current.value.length, maxLength - 1);\n const end = inputRef.current.value.length;\n inputRef.current?.setSelectionRange(start, end);\n setMirrorSelectionStart(start);\n setMirrorSelectionEnd(end);\n }\n setIsFocused(true);\n };\n // Fix iOS pasting\n const _pasteListener = (e: ClipboardEvent<HTMLInputElement>) => {\n const input = inputRef.current;\n if (\n !pasteTransformer &&\n (!initialLoadRef.current.isIOS \|\| !e.clipboardData \|\| !input)\n ) {\n return;\n }\n\n const _content = e.clipboardData.getData('text/plain');\n const content = pasteTransformer ? pasteTransformer(_content) : _content;\n e.preventDefault();\n\n const start = inputRef.current?.selectionStart;\n const end = inputRef.current?.selectionEnd;\n\n const isReplacing = start !== end;\n\n const newValueUncapped = isReplacing\n ? value.slice(0, start ?? 0) + content + value.slice(end ?? 0) // Replacing\n : value.slice(0, start ?? 0) + content + value.slice(start ?? 0); // Inserting\n const newValue = newValueUncapped.slice(0, maxLength);\n\n if (newValue.length > 0 && regexp && !regexp.test(newValue)) {\n return;\n }\n\n if (input) {\n input.value = newValue;\n onChange(newValue);\n\n const _start = Math.min(newValue.length, maxLength - 1);\n const _end = newValue.length;\n\n input.setSelectionRange(_start, _end);\n setMirrorSelectionStart(_start);\n setMirrorSelectionEnd(_end);\n }\n };\n\n /* Styles - dynamic styles that can't be converted to Tailwind /\n const dynamicInputStyle: CSSProperties = {\n width: pwmb.willPushPWMBadge\n ? `calc(100% + ${pwmb.PWM_BADGE_SPACE_WIDTH})`\n : '100%',\n clipPath: pwmb.willPushPWMBadge\n ? `inset(0 ${pwmb.PWM_BADGE_SPACE_WIDTH} 0 0)`\n : undefined,\n fontSize: 'var(--root-height)',\n };\n\n /* Rendering /\n const renderedInput = (\n <input\n autoComplete={props.autoComplete \|\| 'one-time-code'}\n {...props}\n data-input-otp\n data-input-otp-placeholder-shown={value.length === 0 \|\| undefined}\n data-input-otp-mss={mirrorSelectionStart}\n data-input-otp-mse={mirrorSelectionEnd}\n inputMode={inputMode}\n pattern={regexp?.source}\n aria-placeholder={placeholder}\n className=\"-z-10 pointer-events-auto absolute inset-0 flex h-full border-0 border-transparent bg-transparent text-center font-mono text-transparent tabular-nums leading-none tracking-[-.5em] caret-transparent opacity-100 shadow-none outline-none\"\n style={dynamicInputStyle}\n maxLength={maxLength}\n value={value}\n ref={inputRef}\n onPaste={(e) => {\n _pasteListener(e);\n props.onPaste?.(e);\n }}\n onChange={_changeListener}\n onMouseOver={(e) => {\n setIsHoveringInput(true);\n props.onMouseOver?.(e);\n }}\n onMouseLeave={(e) => {\n setIsHoveringInput(false);\n props.onMouseLeave?.(e);\n }}\n onKeyDown={(e) => {\n // Track arrow key navigation to ensure active slot updates correctly\n if (e.key === 'ArrowLeft' \|\| e.key === 'ArrowRight') {\n // Use requestAnimationFrame to check selection after browser has processed the key\n requestAnimationFrame(() => {\n const input = inputRef.current;\n if (input && document.activeElement === input) {\n const s = input.selectionStart;\n const end = input.selectionEnd;\n if (s !== null && end !== null) {\n // Update actual caret position - use start position as caret\n setActualCaretPosition(s);\n }\n }\n });\n }\n props.onKeyDown?.(e);\n }}\n onFocus={(e) => {\n _focusListener();\n props.onFocus?.(e);\n }}\n onBlur={(e) => {\n setIsFocused(false);\n props.onBlur?.(e);\n }}\n />\n );\n\n const setSelection = (index: number) => {\n const input = inputRef.current;\n if (!input \|\| props.disabled) {\n return;\n }\n\n // Clamp index to valid range\n const clampedIndex = Math.max(0, Math.min(index, maxLength - 1));\n\n // Focus the input if not already focused\n if (document.activeElement !== input) {\n input.focus();\n }\n\n // Set selection to the clicked slot\n // If there's a character at that position, select it; otherwise just position the caret\n const hasChar = value[clampedIndex] !== undefined;\n const start = clampedIndex;\n const end = hasChar ? clampedIndex + 1 : clampedIndex;\n\n input.setSelectionRange(start, end);\n setMirrorSelectionStart(start);\n setMirrorSelectionEnd(end);\n setIsFocused(true);\n };\n\n const contextValue: RenderProps = {\n slots: Array.from({ length: maxLength }).map((_, slotIdx) => {\n const isActive =\n isFocused &&\n mirrorSelectionStart !== null &&\n mirrorSelectionEnd !== null &&\n ((mirrorSelectionStart === mirrorSelectionEnd &&\n slotIdx === mirrorSelectionStart) \|\|\n (slotIdx >= mirrorSelectionStart && slotIdx < mirrorSelectionEnd));\n\n const char = value[slotIdx] !== undefined ? value[slotIdx] : null;\n const placeholderChar =\n value[0] !== undefined ? null : (placeholder?.[slotIdx] ?? null);\n\n return {\n char,\n placeholderChar,\n isActive,\n hasFakeCaret: isActive && char === null,\n };\n }),\n isFocused,\n isHovering: !props.disabled && isHoveringInput,\n setSelection,\n };\n\n const renderedChildren =\n render !== undefined ? (\n render(contextValue)\n ) : (\n <OTPInputContext.Provider value={contextValue}>\n {children}\n </OTPInputContext.Provider>\n );\n\n return (\n <>\n {noScriptCSSFallback !== null && (\n <noscript>\n <style>{noScriptCSSFallback}</style>\n </noscript>\n )}\n\n <div\n ref={containerRef}\n className={cn(\n 'relative',\n props.disabled ? 'cursor-default' : 'cursor-text',\n containerClassName\n )}\n >\n {renderedChildren}\n\n <div className=\"absolute inset-0\">{renderedInput}</div>\n </div>\n </>\n );\n};\n\n// ---------------- Root ----------------\n\ntype InputOTPProps = Omit<ComponentProps<typeof OTPInput>, 'children'>;\n\nexport const inputSlotVariants = cva('block text-center', {\n variants: {\n size: {\n sm: 'h-4 w-3 text-sm',\n md: 'h-5 w-4 text-base',\n lg: 'h-6 w-5 text-lg',\n xl: 'h-7 w-6 text-xl',\n },\n },\n defaultVariants: {\n size: 'md',\n },\n});\n\nexport const InputOTP: FC<InputOTPProps> = ({\n className,\n render,\n ...props\n}) => (\n <OTPInput\n containerClassName=\"relative flex items-center gap-2 has-disabled:opacity-50\"\n className={cn('disabled:cursor-not-allowed', className)}\n render={render!}\n {...props}\n />\n);\n\n// ---------------- Group ----------------\n\nexport const InputOTPGroup = ({\n className,\n ...props\n}: ComponentProps<'div'>) => (\n <div className={cn('z-10 flex items-center gap-3', className)} {...props} />\n);\n\n// ---------------- Slot ----------------\n\ntype InputOTPSlotProps = Omit<ButtonProps, 'variant' \| 'label'> & {\n index: number;\n};\n\nexport const InputOTPSlot: FC<InputOTPSlotProps> = ({\n index,\n className,\n onClick,\n onKeyDown,\n ...props\n}) => {\n const inputOTPContext = useContext(OTPInputContext);\n const { char, isActive } = inputOTPContext?.slots[index] ?? {};\n const { setSelection } = inputOTPContext ?? {};\n\n const handleClick = (e: MouseEvent<HTMLButtonElement>) => {\n setSelection?.(index);\n onClick?.(e);\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLButtonElement>) => {\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n setSelection?.(index);\n }\n onKeyDown?.(e);\n };\n\n return (\n <Button\n aria-active={isActive}\n variant=\"input\"\n color=\"custom\"\n tabIndex={-1}\n className={cn('relative z-10 px-2!', isActive && 'ring-4!', className)}\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n label={null}\n {...props}\n >\n {/ value */}\n <span className=\"relative z-10 flex h-6 w-4 items-center justify-center\">\n {char}\n </span>\n </Button>\n );\n};\n\n// ---------------- Separator ----------------\n\nexport const InputOTPSeparator: FC<ComponentProps<'div'>> = (props) => (\n <div\n aria-hidden\n className=\"z-0 table h-0.5 w-3 rounded-full bg-border text-text/50\"\n {...props}\n >\n <MinusIcon />\n </div>\n);\n\nexport const InputIndicator: FC<\n ComponentProps<'div'> & { ref: RefObject<HTMLDivElement \| null> }\n> = ({ ref, ...props }) => (\n <div\n data-indicator\n className=\"absolute top-0 z-0 h-full w-auto rounded-xl bg-text/20 ring-4 ring-text/20 transition-[left,width] duration-300 ease-in-out [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl motion-reduce:transition-none\"\n ref={ref}\n {...props}\n />\n);\n"],"mappings":"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"}

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

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

package/dist/esm/components/KeyboardScreenAdapter/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":["KeyboardScreenAdapter: FC<\n PropsWithChildren<HTMLAttributes<HTMLDivElement>>\n>"],"sources":["../../../../src/components/KeyboardScreenAdapter/index.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, HTMLAttributes, PropsWithChildren } from 'react';\nimport { useKeyboardDetector } from '../../hooks/useKeyboardDetector';\nimport { cn } from '../../utils/cn';\n\n/*\n KeyboardScreenAdapter Component\n \n A smart wrapper component that automatically adapts the viewport height\n * when virtual keyboards appear on mobile devices. This prevents content\n * from being hidden behind the keyboard and ensures optimal user experience\n * across all devices and orientations.\n \n @component\n * @example\n * Basic usage:\n * ```tsx\n * <KeyboardScreenAdapter>\n * <div>Your app content here</div>\n * </KeyboardScreenAdapter>\n * ```\n \n @example\n * With custom styling:\n * ```tsx\n * <KeyboardScreenAdapter className=\"bg-gray-100 p-4\">\n * <form>\n * <input type=\"text\" placeholder=\"Enter your name\" />\n * <input type=\"email\" placeholder=\"Enter your email\" />\n * <button type=\"submit\">Submit</button>\n * </form>\n * </KeyboardScreenAdapter>\n * ```\n \n @example\n * Mobile-first responsive design:\n * ```tsx\n * <KeyboardScreenAdapter className=\"md:min-h-screen\">\n * <div className=\"flex flex-col h-full\">\n * <header>Navigation</header>\n * <main className=\"flex-1 overflow-auto\">\n * <input type=\"search\" placeholder=\"Search...\" />\n * Content that needs keyboard adaptation\n * </main>\n * </div>\n * </KeyboardScreenAdapter>\n * ```\n \n Features:\n * - Automatic viewport height detection and adjustment\n * - Smooth transitions when keyboard shows/hides\n * - Works with both iOS and Android virtual keyboards\n * - Responsive design that adapts to device orientation changes\n * - Maintains scroll behavior and overflow handling\n * - Lightweight with minimal performance impact\n * - Client-side only (Next.js compatible with 'use client')\n \n How it works:\n * 1. Uses the useKeyboardDetector hook to monitor window height changes\n * 2. Detects when virtual keyboard appears (window height decreases)\n * 3. Automatically adjusts the container's max-height to fit visible area\n * 4. Provides smooth transitions for better user experience\n * 5. Restores original height when keyboard disappears\n \n Use cases:\n * - Mobile web applications with forms\n * - Chat interfaces and messaging apps\n * - Search interfaces and input-heavy UIs\n * - Progressive Web Apps (PWAs)\n * - Any mobile-first application requiring keyboard interaction\n \n Browser compatibility:\n * - iOS Safari (all versions)\n * - Chrome Mobile (Android)\n * - Samsung Internet\n * - Firefox Mobile\n * - Other mobile browsers with virtual keyboards\n \n Performance considerations:\n * - Uses ResizeObserver for efficient window monitoring\n * - Minimal re-renders through optimized state management\n * - CSS transitions handled by GPU acceleration\n * - No layout thrashing during keyboard transitions\n \n Accessibility:\n * - Maintains focus management during transitions\n * - Preserves scroll position and user context\n * - Compatible with screen readers and assistive technologies\n * - Supports keyboard navigation patterns\n \n @param props - Component props extending standard div attributes\n * @param props.children - Content to render within the adaptive container\n * @param props.className - Additional CSS classes for the container\n * @param props.style - Inline styles (note: maxHeight may be overridden)\n * @param props.id - Unique identifier for the container\n * @param props.role - ARIA role for accessibility\n * @param props.tabIndex - Tab index for focus management\n * @param props.onScroll - Scroll event handler\n * @param props.onTouchStart - Touch start event handler\n * @param props.onTouchMove - Touch move event handler\n * @param props.onTouchEnd - Touch end event handler\n * @param props...rest - All other standard HTML div attributes\n \n @returns A responsive container that adapts to keyboard visibility\n */\nexport const KeyboardScreenAdapter: FC<\n PropsWithChildren<HTMLAttributes<HTMLDivElement>>\n> = ({ children, className, ...props }) => {\n const { windowHeight } = useKeyboardDetector();\n\n return (\n <div\n className={cn(\n 'h-screen w-screen overflow-auto scroll-smooth transition',\n className\n )}\n style={{\n maxHeight: windowHeight ? `${windowHeight}px` : undefined,\n }}\n {...props}\n >\n {children}\n </div>\n );\n};\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AA0GA,MAAaA,yBAER,EAAE,UAAU,WAAW,GAAG,YAAY;CACzC,MAAM,EAAE,iBAAiB,qBAAqB;AAE9C,QACE,oBAAC;EACC,WAAW,GACT,4DACA,UACD;EACD,OAAO,EACL,WAAW,eAAe,GAAG,aAAa,MAAM,QACjD;EACD,GAAI;EAEH;GACG"}
1	+ {"version":3,"file":"index.mjs","names":["KeyboardScreenAdapter: FC<\n PropsWithChildren<HTMLAttributes<HTMLDivElement>>\n>"],"sources":["../../../../src/components/KeyboardScreenAdapter/index.tsx"],"sourcesContent":["'use client';\n\nimport type { FC, HTMLAttributes, PropsWithChildren } from 'react';\nimport { useKeyboardDetector } from '../../hooks/useKeyboardDetector';\nimport { cn } from '../../utils/cn';\n\n/*\n KeyboardScreenAdapter Component\n \n A smart wrapper component that automatically adapts the viewport height\n * when virtual keyboards appear on mobile devices. This prevents content\n * from being hidden behind the keyboard and ensures optimal user experience\n * across all devices and orientations.\n \n @component\n * @example\n * Basic usage:\n * ```tsx\n * <KeyboardScreenAdapter>\n * <div>Your app content here</div>\n * </KeyboardScreenAdapter>\n * ```\n \n @example\n * With custom styling:\n * ```tsx\n * <KeyboardScreenAdapter className=\"bg-gray-100 p-4\">\n * <form>\n * <input type=\"text\" placeholder=\"Enter your name\" />\n * <input type=\"email\" placeholder=\"Enter your email\" />\n * <button type=\"submit\">Submit</button>\n * </form>\n * </KeyboardScreenAdapter>\n * ```\n \n @example\n * Mobile-first responsive design:\n * ```tsx\n * <KeyboardScreenAdapter className=\"md:min-h-screen\">\n * <div className=\"flex flex-col h-full\">\n * <header>Navigation</header>\n * <main className=\"flex-1 overflow-auto\">\n * <input type=\"search\" placeholder=\"Search...\" />\n * Content that needs keyboard adaptation\n * </main>\n * </div>\n * </KeyboardScreenAdapter>\n * ```\n \n Features:\n * - Automatic viewport height detection and adjustment\n * - Smooth transitions when keyboard shows/hides\n * - Works with both iOS and Android virtual keyboards\n * - Responsive design that adapts to device orientation changes\n * - Maintains scroll behavior and overflow handling\n * - Lightweight with minimal performance impact\n * - Client-side only (Next.js compatible with 'use client')\n \n How it works:\n * 1. Uses the useKeyboardDetector hook to monitor window height changes\n * 2. Detects when virtual keyboard appears (window height decreases)\n * 3. Automatically adjusts the container's max-height to fit visible area\n * 4. Provides smooth transitions for better user experience\n * 5. Restores original height when keyboard disappears\n \n Use cases:\n * - Mobile web applications with forms\n * - Chat interfaces and messaging apps\n * - Search interfaces and input-heavy UIs\n * - Progressive Web Apps (PWAs)\n * - Any mobile-first application requiring keyboard interaction\n \n Browser compatibility:\n * - iOS Safari (all versions)\n * - Chrome Mobile (Android)\n * - Samsung Internet\n * - Firefox Mobile\n * - Other mobile browsers with virtual keyboards\n \n Performance considerations:\n * - Uses ResizeObserver for efficient window monitoring\n * - Minimal re-renders through optimized state management\n * - CSS transitions handled by GPU acceleration\n * - No layout thrashing during keyboard transitions\n \n Accessibility:\n * - Maintains focus management during transitions\n * - Preserves scroll position and user context\n * - Compatible with screen readers and assistive technologies\n * - Supports keyboard navigation patterns\n \n @param props - Component props extending standard div attributes\n * @param props.children - Content to render within the adaptive container\n * @param props.className - Additional CSS classes for the container\n * @param props.style - Inline styles (note: maxHeight may be overridden)\n * @param props.id - Unique identifier for the container\n * @param props.role - ARIA role for accessibility\n * @param props.tabIndex - Tab index for focus management\n * @param props.onScroll - Scroll event handler\n * @param props.onTouchStart - Touch start event handler\n * @param props.onTouchMove - Touch move event handler\n * @param props.onTouchEnd - Touch end event handler\n * @param props...rest - All other standard HTML div attributes\n \n @returns A responsive container that adapts to keyboard visibility\n */\nexport const KeyboardScreenAdapter: FC<\n PropsWithChildren<HTMLAttributes<HTMLDivElement>>\n> = ({ children, className, ...props }) => {\n const { windowHeight } = useKeyboardDetector();\n\n return (\n <div\n className={cn(\n 'h-screen w-screen overflow-auto scroll-smooth transition',\n className\n )}\n style={{\n maxHeight: windowHeight ? `${windowHeight}px` : undefined,\n }}\n {...props}\n >\n {children}\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0GA,MAAaA,yBAER,EAAE,UAAU,WAAW,GAAG,YAAY;CACzC,MAAM,EAAE,iBAAiB,qBAAqB;AAE9C,QACE,oBAAC;EACC,WAAW,GACT,4DACA,UACD;EACD,OAAO,EACL,WAAW,eAAe,GAAG,aAAa,MAAM,QACjD;EACD,GAAI;EAEH;GACG"}

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

@@ -1,15 +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 { useCallback, useMemo, useRef, useState } from "react";
 import { Check, Globe, MoveVertical } from "lucide-react";
+import { useCallback, useMemo, useRef, useState } from "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/LocaleSwitcherContentDropDown/LocaleSwitcherContent.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LocaleSwitcherContent.mjs","names":["LocaleSwitcherContent: FC<LocaleSwitcherContentProps>","multilingualAvailableLocales: MultilingualAvailableLocales[]"],"sources":["../../../../src/components/LocaleSwitcherContentDropDown/LocaleSwitcherContent.tsx"],"sourcesContent":["'use client';\n\nimport { getHTMLTextDir, getLocaleName } from '@intlayer/core';\nimport { Locales, type LocalesValues } from '@intlayer/types';\nimport Fuse, { type IFuseOptions } from 'fuse.js';\nimport { Check, Globe, MoveVertical } from 'lucide-react';\nimport { type FC, useCallback, useMemo, useRef, useState } from 'react';\nimport { useIntlayer, useLocale } from 'react-intlayer';\nimport { usePersistedStore } from '../../hooks';\nimport {\n Button,\n ButtonColor,\n ButtonSize,\n ButtonTextAlign,\n ButtonVariant,\n} from '../Button';\nimport { Container } from '../Container';\nimport { DropDown, type PanelProps } from '../DropDown';\nimport { Input } from '../Input';\nimport {\n SwitchSelector,\n SwitchSelectorColor,\n SwitchSelectorSize,\n} from '../SwitchSelector';\nimport { useLocaleSwitcherContent } from './LocaleSwitcherContentContext';\n\nexport type LocaleSwitcherContentProps = {\n panelProps?: Omit<PanelProps, 'identifier'>;\n isMultilingual?: boolean;\n};\n\nconst DROPDOWN_IDENTIFIER = 'locale-switcher-content';\n\ntype MultilingualAvailableLocales = {\n locale: LocalesValues;\n englishName: string;\n currentLocaleName: string;\n ownLocaleName: string;\n};\n\nexport const LocaleSwitcherContent: FC<LocaleSwitcherContentProps> = ({\n panelProps,\n isMultilingual = true,\n}) => {\n const {\n switchTo,\n searchInput,\n localeSwitcherLabel,\n languageListLabel,\n seeAllLocalesSwitch,\n } = useIntlayer('locale-switcher-content');\n const inputRef = useRef<HTMLInputElement>(null);\n const { locale } = useLocale();\n const { availableLocales, selectedLocales, setSelectedLocales } =\n useLocaleSwitcherContent();\n\n const multilingualAvailableLocales: MultilingualAvailableLocales[] = useMemo(\n () =>\n availableLocales.map((localeEl) => {\n const englishName = getLocaleName(localeEl, Locales.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 [availableLocales, locale]\n );\n\n const [results, setResults] = useState<MultilingualAvailableLocales[]>(\n multilingualAvailableLocales\n );\n const [seeAllLocales, setSeeAllLocales] = usePersistedStore(\n 'locale-content-selector-see-all-locales',\n false\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 const handleClickLocale = (localeItem: LocalesValues) => {\n if (isMultilingual) {\n if (selectedLocales.includes(localeItem)) {\n if (selectedLocales.length > 1) {\n setSelectedLocales((prev) => prev.filter((el) => el !== localeItem));\n }\n } else {\n setSelectedLocales((prev) => [...prev, localeItem]);\n }\n } else {\n setSelectedLocales([localeItem]);\n }\n };\n\n const handleSeeAllLocales = (value: boolean) => {\n setSeeAllLocales(value);\n if (value) {\n setSelectedLocales(availableLocales);\n } else {\n setSelectedLocales([locale]);\n }\n };\n\n return (\n <div\n className=\"rounded-xl border border-text text-text transition-colors\"\n aria-label={localeSwitcherLabel.value}\n >\n <DropDown identifier={DROPDOWN_IDENTIFIER}>\n <DropDown.Trigger identifier={DROPDOWN_IDENTIFIER}>\n <div className=\"flex w-full items-center justify-between\">\n <div className=\"px-2 py-1\">\n <Globe size={18} />\n </div>\n <MoveVertical className=\"self-center\" size={18} />\n </div>\n </DropDown.Trigger>\n\n <DropDown.Panel\n identifier={DROPDOWN_IDENTIFIER}\n isOverable\n isFocusable\n className=\"right-0 left-auto\"\n {...panelProps}\n >\n <Container\n className=\"max-h-[80vh] min-w-28\"\n separator=\"y\"\n role=\"listbox\"\n transparency=\"sm\"\n border\n roundedSize=\"2xl\"\n borderColor=\"text\"\n aria-label={languageListLabel.value}\n >\n {isMultilingual && (\n <div className=\"m-auto p-2\">\n <SwitchSelector\n defaultValue={false}\n onChange={handleSeeAllLocales}\n color={SwitchSelectorColor.TEXT}\n size={SwitchSelectorSize.SM}\n className=\"!w-60\"\n choices={[\n {\n content: seeAllLocalesSwitch.true.value,\n value: true,\n },\n {\n content: seeAllLocalesSwitch.false.value,\n value: false,\n },\n ]}\n />\n </div>\n )}\n\n {!(isMultilingual && seeAllLocales) && (\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 ({\n locale: localeItem,\n currentLocaleName,\n ownLocaleName,\n }) => (\n <li className=\"px-1.5 py-1\" key={localeItem}>\n <Button\n onClick={() => handleClickLocale(localeItem)}\n label={`${switchTo} ${currentLocaleName}`}\n disabled={\n !(availableLocales ?? availableLocales).includes(\n localeItem\n )\n }\n isActive={selectedLocales.includes(localeItem)}\n variant={ButtonVariant.HOVERABLE}\n color={ButtonColor.TEXT}\n isFullWidth\n textAlign={ButtonTextAlign.LEFT}\n size={ButtonSize.SM}\n >\n <div className=\"flex flex-row items-center justify-between gap-3 px-2 py-1\">\n {isMultilingual && (\n <div className=\"w-4\">\n {selectedLocales.includes(localeItem) && (\n <Check className=\"size-full\" />\n )}\n </div>\n )}\n <div className=\"flex flex-1 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 >\n {ownLocaleName}\n </span>\n <span className=\"text-neutral text-xs\">\n {currentLocaleName}\n </span>\n </div>\n <span className=\"text-neutral text-sm\">\n {localeItem.toUpperCase()}\n </span>\n </div>\n </div>\n </Button>\n </li>\n )\n )}\n </ol>\n </>\n )}\n </Container>\n </DropDown.Panel>\n </DropDown>\n </div>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"LocaleSwitcherContent.mjs","names":["LocaleSwitcherContent: FC<LocaleSwitcherContentProps>","multilingualAvailableLocales: MultilingualAvailableLocales[]"],"sources":["../../../../src/components/LocaleSwitcherContentDropDown/LocaleSwitcherContent.tsx"],"sourcesContent":["'use client';\n\nimport { getHTMLTextDir, getLocaleName } from '@intlayer/core';\nimport { Locales, type LocalesValues } from '@intlayer/types';\nimport Fuse, { type IFuseOptions } from 'fuse.js';\nimport { Check, Globe, MoveVertical } from 'lucide-react';\nimport { type FC, useCallback, useMemo, useRef, useState } from 'react';\nimport { useIntlayer, useLocale } from 'react-intlayer';\nimport { usePersistedStore } from '../../hooks';\nimport {\n Button,\n ButtonColor,\n ButtonSize,\n ButtonTextAlign,\n ButtonVariant,\n} from '../Button';\nimport { Container } from '../Container';\nimport { DropDown, type PanelProps } from '../DropDown';\nimport { Input } from '../Input';\nimport {\n SwitchSelector,\n SwitchSelectorColor,\n SwitchSelectorSize,\n} from '../SwitchSelector';\nimport { useLocaleSwitcherContent } from './LocaleSwitcherContentContext';\n\nexport type LocaleSwitcherContentProps = {\n panelProps?: Omit<PanelProps, 'identifier'>;\n isMultilingual?: boolean;\n};\n\nconst DROPDOWN_IDENTIFIER = 'locale-switcher-content';\n\ntype MultilingualAvailableLocales = {\n locale: LocalesValues;\n englishName: string;\n currentLocaleName: string;\n ownLocaleName: string;\n};\n\nexport const LocaleSwitcherContent: FC<LocaleSwitcherContentProps> = ({\n panelProps,\n isMultilingual = true,\n}) => {\n const {\n switchTo,\n searchInput,\n localeSwitcherLabel,\n languageListLabel,\n seeAllLocalesSwitch,\n } = useIntlayer('locale-switcher-content');\n const inputRef = useRef<HTMLInputElement>(null);\n const { locale } = useLocale();\n const { availableLocales, selectedLocales, setSelectedLocales } =\n useLocaleSwitcherContent();\n\n const multilingualAvailableLocales: MultilingualAvailableLocales[] = useMemo(\n () =>\n availableLocales.map((localeEl) => {\n const englishName = getLocaleName(localeEl, Locales.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 [availableLocales, locale]\n );\n\n const [results, setResults] = useState<MultilingualAvailableLocales[]>(\n multilingualAvailableLocales\n );\n const [seeAllLocales, setSeeAllLocales] = usePersistedStore(\n 'locale-content-selector-see-all-locales',\n false\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 const handleClickLocale = (localeItem: LocalesValues) => {\n if (isMultilingual) {\n if (selectedLocales.includes(localeItem)) {\n if (selectedLocales.length > 1) {\n setSelectedLocales((prev) => prev.filter((el) => el !== localeItem));\n }\n } else {\n setSelectedLocales((prev) => [...prev, localeItem]);\n }\n } else {\n setSelectedLocales([localeItem]);\n }\n };\n\n const handleSeeAllLocales = (value: boolean) => {\n setSeeAllLocales(value);\n if (value) {\n setSelectedLocales(availableLocales);\n } else {\n setSelectedLocales([locale]);\n }\n };\n\n return (\n <div\n className=\"rounded-xl border border-text text-text transition-colors\"\n aria-label={localeSwitcherLabel.value}\n >\n <DropDown identifier={DROPDOWN_IDENTIFIER}>\n <DropDown.Trigger identifier={DROPDOWN_IDENTIFIER}>\n <div className=\"flex w-full items-center justify-between\">\n <div className=\"px-2 py-1\">\n <Globe size={18} />\n </div>\n <MoveVertical className=\"self-center\" size={18} />\n </div>\n </DropDown.Trigger>\n\n <DropDown.Panel\n identifier={DROPDOWN_IDENTIFIER}\n isOverable\n isFocusable\n className=\"right-0 left-auto\"\n {...panelProps}\n >\n <Container\n className=\"max-h-[80vh] min-w-28\"\n separator=\"y\"\n role=\"listbox\"\n transparency=\"sm\"\n border\n roundedSize=\"2xl\"\n borderColor=\"text\"\n aria-label={languageListLabel.value}\n >\n {isMultilingual && (\n <div className=\"m-auto p-2\">\n <SwitchSelector\n defaultValue={false}\n onChange={handleSeeAllLocales}\n color={SwitchSelectorColor.TEXT}\n size={SwitchSelectorSize.SM}\n className=\"!w-60\"\n choices={[\n {\n content: seeAllLocalesSwitch.true.value,\n value: true,\n },\n {\n content: seeAllLocalesSwitch.false.value,\n value: false,\n },\n ]}\n />\n </div>\n )}\n\n {!(isMultilingual && seeAllLocales) && (\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 ({\n locale: localeItem,\n currentLocaleName,\n ownLocaleName,\n }) => (\n <li className=\"px-1.5 py-1\" key={localeItem}>\n <Button\n onClick={() => handleClickLocale(localeItem)}\n label={`${switchTo} ${currentLocaleName}`}\n disabled={\n !(availableLocales ?? availableLocales).includes(\n localeItem\n )\n }\n isActive={selectedLocales.includes(localeItem)}\n variant={ButtonVariant.HOVERABLE}\n color={ButtonColor.TEXT}\n isFullWidth\n textAlign={ButtonTextAlign.LEFT}\n size={ButtonSize.SM}\n >\n <div className=\"flex flex-row items-center justify-between gap-3 px-2 py-1\">\n {isMultilingual && (\n <div className=\"w-4\">\n {selectedLocales.includes(localeItem) && (\n <Check className=\"size-full\" />\n )}\n </div>\n )}\n <div className=\"flex flex-1 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 >\n {ownLocaleName}\n </span>\n <span className=\"text-neutral text-xs\">\n {currentLocaleName}\n </span>\n </div>\n <span className=\"text-neutral text-sm\">\n {localeItem.toUpperCase()}\n </span>\n </div>\n </div>\n </Button>\n </li>\n )\n )}\n </ol>\n </>\n )}\n </Container>\n </DropDown.Panel>\n </DropDown>\n </div>\n );\n};\n"],"mappings":"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"}

package/dist/esm/components/LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.mjs CHANGED Viewed

@@ -1,6 +1,5 @@
 'use client';
 import { usePersistedStore } from "../../hooks/usePersistedStore.mjs";
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/esm/components/LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LocaleSwitcherContentContext.mjs","names":["LocaleSwitcherContentProvider: FC<\n PropsWithChildren<LocaleSwitcherContentProviderProps>\n>"],"sources":["../../../../src/components/LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.tsx"],"sourcesContent":["'use client';\n\nimport type { LocalesValues } from 'intlayer';\nimport {\n createContext,\n type Dispatch,\n type FC,\n type PropsWithChildren,\n type SetStateAction,\n useContext,\n} from 'react';\nimport { useLocale } from 'react-intlayer';\nimport { usePersistedStore } from '../../hooks';\n\ntype LocaleSwitcherContentContextProps = {\n availableLocales: LocalesValues[];\n selectedLocales: LocalesValues[];\n setSelectedLocales: Dispatch<SetStateAction<LocalesValues[]>>;\n};\n\nconst LocaleSwitcherContentContext =\n createContext<LocaleSwitcherContentContextProps>({\n availableLocales: [],\n selectedLocales: [],\n setSelectedLocales: () => {},\n });\n\nexport const useLocaleSwitcherContent = () =>\n useContext(LocaleSwitcherContentContext);\n\ntype LocaleSwitcherContentProviderProps = {\n availableLocales: LocalesValues[];\n defaultSelectedLocales?: LocalesValues[];\n};\n\nexport const LocaleSwitcherContentProvider: FC<\n PropsWithChildren<LocaleSwitcherContentProviderProps>\n> = ({ availableLocales, defaultSelectedLocales, children }) => {\n const { locale } = useLocale();\n\n const [selectedLocales, setSelectedLocales] = usePersistedStore<\n LocalesValues[]\n >(\n 'locale-content-selector-selected-locales',\n defaultSelectedLocales ?? [locale]\n );\n\n return (\n <LocaleSwitcherContentContext\n value={{\n availableLocales,\n selectedLocales,\n setSelectedLocales,\n }}\n >\n {children}\n </LocaleSwitcherContentContext>\n );\n};\n"],"mappings":"~~;;;;;;;;;~~AAoBA,MAAM,+BACJ,cAAiD;CAC/C,kBAAkB,EAAE;CACpB,iBAAiB,EAAE;CACnB,0BAA0B;CAC3B,CAAC;AAEJ,MAAa,iCACX,WAAW,6BAA6B;AAO1C,MAAaA,iCAER,EAAE,kBAAkB,wBAAwB,eAAe;CAC9D,MAAM,EAAE,WAAW,WAAW;CAE9B,MAAM,CAAC,iBAAiB,sBAAsB,kBAG5C,4CACA,0BAA0B,CAAC,OAAO,CACnC;AAED,QACE,oBAAC;EACC,OAAO;GACL;GACA;GACA;GACD;EAEA;GAC4B"}
1	+ {"version":3,"file":"LocaleSwitcherContentContext.mjs","names":["LocaleSwitcherContentProvider: FC<\n PropsWithChildren<LocaleSwitcherContentProviderProps>\n>"],"sources":["../../../../src/components/LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.tsx"],"sourcesContent":["'use client';\n\nimport type { LocalesValues } from 'intlayer';\nimport {\n createContext,\n type Dispatch,\n type FC,\n type PropsWithChildren,\n type SetStateAction,\n useContext,\n} from 'react';\nimport { useLocale } from 'react-intlayer';\nimport { usePersistedStore } from '../../hooks';\n\ntype LocaleSwitcherContentContextProps = {\n availableLocales: LocalesValues[];\n selectedLocales: LocalesValues[];\n setSelectedLocales: Dispatch<SetStateAction<LocalesValues[]>>;\n};\n\nconst LocaleSwitcherContentContext =\n createContext<LocaleSwitcherContentContextProps>({\n availableLocales: [],\n selectedLocales: [],\n setSelectedLocales: () => {},\n });\n\nexport const useLocaleSwitcherContent = () =>\n useContext(LocaleSwitcherContentContext);\n\ntype LocaleSwitcherContentProviderProps = {\n availableLocales: LocalesValues[];\n defaultSelectedLocales?: LocalesValues[];\n};\n\nexport const LocaleSwitcherContentProvider: FC<\n PropsWithChildren<LocaleSwitcherContentProviderProps>\n> = ({ availableLocales, defaultSelectedLocales, children }) => {\n const { locale } = useLocale();\n\n const [selectedLocales, setSelectedLocales] = usePersistedStore<\n LocalesValues[]\n >(\n 'locale-content-selector-selected-locales',\n defaultSelectedLocales ?? [locale]\n );\n\n return (\n <LocaleSwitcherContentContext\n value={{\n availableLocales,\n selectedLocales,\n setSelectedLocales,\n }}\n >\n {children}\n </LocaleSwitcherContentContext>\n );\n};\n"],"mappings":";;;;;;;;AAoBA,MAAM,+BACJ,cAAiD;CAC/C,kBAAkB,EAAE;CACpB,iBAAiB,EAAE;CACnB,0BAA0B;CAC3B,CAAC;AAEJ,MAAa,iCACX,WAAW,6BAA6B;AAO1C,MAAaA,iCAER,EAAE,kBAAkB,wBAAwB,eAAe;CAC9D,MAAM,EAAE,WAAW,WAAW;CAE9B,MAAM,CAAC,iBAAiB,sBAAsB,kBAG5C,4CACA,0BAA0B,CAAC,OAAO,CACnC;AAED,QACE,oBAAC;EACC,OAAO;GACL;GACA;GACA;GACD;EAEA;GAC4B"}

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

@@ -1,12 +1,11 @@
 'use client';
 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 { useCallback, useMemo, useRef, useState } from "react";
 import { MoveVertical } from "lucide-react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { getHTMLTextDir, getLocaleName } from "@intlayer/core";
 import { useIntlayer } from "react-intlayer";

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

	@@ -1 +1 @@
1	- {"version":3,"file":"LocaleSwitcher.mjs","names":["LocaleSwitcher: FC<LocaleSwitcherProps>","multilingualAvailableLocales: MultilingualAvailableLocales[]"],"sources":["../../../../src/components/LocaleSwitcherDropDown/LocaleSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { getHTMLTextDir, getLocaleName } from '@intlayer/core';\nimport { type Locale, Locales } from '@intlayer/types';\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, ButtonColor, ButtonTextAlign, ButtonVariant } 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 } =\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, Locales.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 <div\n className=\"rounded-xl border border-text text-text transition-colors\"\n aria-label={localeSwitcherLabel.value}\n >\n <DropDown identifier={DROPDOWN_IDENTIFIER}>\n <DropDown.Trigger identifier={DROPDOWN_IDENTIFIER}>\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 {...panelProps}\n >\n <Container\n className=\"max-h-[80vh] min-w-28\"\n separator=\"y\"\n role=\"listbox\"\n transparency=\"sm\"\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={ButtonVariant.HOVERABLE}\n color={ButtonColor.TEXT}\n isFullWidth\n textAlign={ButtonTextAlign.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 >\n {ownLocaleName}\n </span>\n <span className=\"text-neutral text-xs\">\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 </div>\n );\n};\n"],"mappings":"~~;;;;;;;;;;;;;;;;~~AAsBA,MAAM,sBAAsB;AAS5B,MAAaA,kBAA2C,EACtD,QACA,YACA,kBACA,iBAAiB,MACjB,WACA,iBACI;CACJ,IAAI,aAAa;CACjB,MAAM,EAAE,UAAU,aAAa,sBAC7B,YAAY,kBAAkB;CAChC,MAAM,WAAW,OAAyB,KAAK;CAE/C,MAAMC,+BAA+D,cAEjE,WAAW,KAAK,aAAa;AAI3B,SAAO;GACL,QAAQ;GACR,aALkB,cAAc,UAAU,QAAQ,QAAQ;GAM1D,mBALwB,cAAc,UAAU,OAAO;GAMvD,eALoB,cAAc,SAAS;GAM5C;GACD,EACJ,CAAC,YAAY,OAAO,CACrB;CAED,MAAM,CAAC,SAAS,cAAc,SAC5B,6BACD;CAGD,MAAM,OAAO,cAAc;AAWzB,SAAO,IAAI,KAAK,8BAVgD;GAC9D,MAAM;IACJ;KAAE,MAAM;KAAiB,QAAQ;KAAK;IACtC;KAAE,MAAM;KAAe,QAAQ;KAAK;IACpC;KAAE,MAAM;KAAqB,QAAQ;KAAK;IAC1C;KAAE,MAAM;KAAU,QAAQ;KAAK;IAChC;GACD,WAAW;GACZ,CAEyD;IACzD,CAAC,6BAA6B,CAAC;CAElC,MAAM,eAAe,aAClB,gBAAwB;AACvB,MAAI,YAKF,YAHsB,KACnB,OAAO,YAAY,CACnB,KAAK,WAAW,OAAO,KAAK,CACN;MAEzB,YAAW,6BAA6B;IAG5C,CAAC,MAAM,6BAA6B,CACrC;AAED,KAAI,OACF,cAAa,iBAAiB,cAAc,OAAO,GAAG,OAAO,aAAa;AAG5E,QACE,oBAAC;EACC,WAAU;EACV,cAAY,oBAAoB;YAEhC,qBAAC;GAAS,YAAY;cACpB,oBAAC,SAAS;IAAQ,YAAY;cAC5B,qBAAC;KAAI,WAAU;gBACb,oBAAC;MAAI,WAAU;gBAAoB;OAAiB,EACpD,oBAAC,gBAAa,WAAU,oBAAoB;MACxC;KACW,EAEnB,oBAAC,SAAS;IACR,YAAY;IACZ;IACA;IACA,GAAI;cAEJ,qBAAC;KACC,WAAU;KACV,WAAU;KACV,MAAK;KACL,cAAa;KACb,cAAY,kBAAkB;gBAE9B,oBAAC;MAAI,WAAU;gBACb,oBAAC;OACC,MAAK;OACL,cAAY,YAAY,UAAU;OAClC,aAAa,YAAY,YAAY;OACrC,WAAW,MAAM,aAAa,EAAE,OAAO,MAAM;OAC7C,KAAK;QACL;OACE,EACN,oBAAC;MAAG,WAAU;gBACX,QAAQ,KACN,EAAE,QAAQ,YAAY,mBAAmB,oBACxC,oBAAC;OAAG,WAAU;iBACZ,oBAAC;QACC,eAAe,UAAU,WAAW;QACpC,OAAO,GAAG,SAAS,GAAG;QACtB,UACE,EAAE,oBAAoB,YAAY,SAAS,WAAW;QAExD,UAAU,WAAW;QACrB,SAAS,cAAc;QACvB,OAAO,YAAY;QACnB;QACA,WAAW,gBAAgB;kBAE3B,qBAAC;SAAI,WAAU;oBACb,qBAAC;UAAI,WAAU;qBACb,oBAAC;WACC,KAAK,eAAe,WAAW;WAC/B,MAAM;qBAEL;YACI,EACP,oBAAC;WAAK,WAAU;qBACb;YACI;WACH,EACN,oBAAC;UAAK,WAAU;oBACb,WAAW,aAAa;WACpB;UACH;SACC;SA7BsB,WA8B5B,CAER;OACE;MACK;KACG;IACR;GACP"}
1	+ {"version":3,"file":"LocaleSwitcher.mjs","names":["LocaleSwitcher: FC<LocaleSwitcherProps>","multilingualAvailableLocales: MultilingualAvailableLocales[]"],"sources":["../../../../src/components/LocaleSwitcherDropDown/LocaleSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { getHTMLTextDir, getLocaleName } from '@intlayer/core';\nimport { type Locale, Locales } from '@intlayer/types';\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, ButtonColor, ButtonTextAlign, ButtonVariant } 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 } =\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, Locales.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 <div\n className=\"rounded-xl border border-text text-text transition-colors\"\n aria-label={localeSwitcherLabel.value}\n >\n <DropDown identifier={DROPDOWN_IDENTIFIER}>\n <DropDown.Trigger identifier={DROPDOWN_IDENTIFIER}>\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 {...panelProps}\n >\n <Container\n className=\"max-h-[80vh] min-w-28\"\n separator=\"y\"\n role=\"listbox\"\n transparency=\"sm\"\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={ButtonVariant.HOVERABLE}\n color={ButtonColor.TEXT}\n isFullWidth\n textAlign={ButtonTextAlign.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 >\n {ownLocaleName}\n </span>\n <span className=\"text-neutral text-xs\">\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 </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAsBA,MAAM,sBAAsB;AAS5B,MAAaA,kBAA2C,EACtD,QACA,YACA,kBACA,iBAAiB,MACjB,WACA,iBACI;CACJ,IAAI,aAAa;CACjB,MAAM,EAAE,UAAU,aAAa,sBAC7B,YAAY,kBAAkB;CAChC,MAAM,WAAW,OAAyB,KAAK;CAE/C,MAAMC,+BAA+D,cAEjE,WAAW,KAAK,aAAa;AAI3B,SAAO;GACL,QAAQ;GACR,aALkB,cAAc,UAAU,QAAQ,QAAQ;GAM1D,mBALwB,cAAc,UAAU,OAAO;GAMvD,eALoB,cAAc,SAAS;GAM5C;GACD,EACJ,CAAC,YAAY,OAAO,CACrB;CAED,MAAM,CAAC,SAAS,cAAc,SAC5B,6BACD;CAGD,MAAM,OAAO,cAAc;AAWzB,SAAO,IAAI,KAAK,8BAVgD;GAC9D,MAAM;IACJ;KAAE,MAAM;KAAiB,QAAQ;KAAK;IACtC;KAAE,MAAM;KAAe,QAAQ;KAAK;IACpC;KAAE,MAAM;KAAqB,QAAQ;KAAK;IAC1C;KAAE,MAAM;KAAU,QAAQ;KAAK;IAChC;GACD,WAAW;GACZ,CAEyD;IACzD,CAAC,6BAA6B,CAAC;CAElC,MAAM,eAAe,aAClB,gBAAwB;AACvB,MAAI,YAKF,YAHsB,KACnB,OAAO,YAAY,CACnB,KAAK,WAAW,OAAO,KAAK,CACN;MAEzB,YAAW,6BAA6B;IAG5C,CAAC,MAAM,6BAA6B,CACrC;AAED,KAAI,OACF,cAAa,iBAAiB,cAAc,OAAO,GAAG,OAAO,aAAa;AAG5E,QACE,oBAAC;EACC,WAAU;EACV,cAAY,oBAAoB;YAEhC,qBAAC;GAAS,YAAY;cACpB,oBAAC,SAAS;IAAQ,YAAY;cAC5B,qBAAC;KAAI,WAAU;gBACb,oBAAC;MAAI,WAAU;gBAAoB;OAAiB,EACpD,oBAAC,gBAAa,WAAU,oBAAoB;MACxC;KACW,EAEnB,oBAAC,SAAS;IACR,YAAY;IACZ;IACA;IACA,GAAI;cAEJ,qBAAC;KACC,WAAU;KACV,WAAU;KACV,MAAK;KACL,cAAa;KACb,cAAY,kBAAkB;gBAE9B,oBAAC;MAAI,WAAU;gBACb,oBAAC;OACC,MAAK;OACL,cAAY,YAAY,UAAU;OAClC,aAAa,YAAY,YAAY;OACrC,WAAW,MAAM,aAAa,EAAE,OAAO,MAAM;OAC7C,KAAK;QACL;OACE,EACN,oBAAC;MAAG,WAAU;gBACX,QAAQ,KACN,EAAE,QAAQ,YAAY,mBAAmB,oBACxC,oBAAC;OAAG,WAAU;iBACZ,oBAAC;QACC,eAAe,UAAU,WAAW;QACpC,OAAO,GAAG,SAAS,GAAG;QACtB,UACE,EAAE,oBAAoB,YAAY,SAAS,WAAW;QAExD,UAAU,WAAW;QACrB,SAAS,cAAc;QACvB,OAAO,YAAY;QACnB;QACA,WAAW,gBAAgB;kBAE3B,qBAAC;SAAI,WAAU;oBACb,qBAAC;UAAI,WAAU;qBACb,oBAAC;WACC,KAAK,eAAe,WAAW;WAC/B,MAAM;qBAEL;YACI,EACP,oBAAC;WAAK,WAAU;qBACb;YACI;WACH,EACN,oBAAC;UAAK,WAAU;oBACb,WAAW,aAAa;WACpB;UACH;SACC;SA7BsB,WA8B5B,CAER;OACE;MACK;KACG;IACR;GACP"}

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

@@ -1,14 +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 { useEffect } from "react";
 import { X } from "lucide-react";
+import { useEffect } from "react";
 import { cva } from "class-variance-authority";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { motion } from "framer-motion";

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

	@@ -1 +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"}
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"}

package/dist/esm/components/Navbar/DesktopNavbar.mjs CHANGED Viewed

@@ -1,6 +1,5 @@
 'use client';
 import { TabSelector, TabSelectorColor } from "../TabSelector/TabSelector.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/esm/components/Navbar/DesktopNavbar.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DesktopNavbar.mjs","names":[],"sources":["../../../../src/components/Navbar/DesktopNavbar.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactElement, ReactNode } from 'react';\nimport {\n TabSelector,\n TabSelectorColor,\n type TabSelectorItemProps,\n} from '../TabSelector';\n\n/*\n Props for the DesktopNavbar component\n * @template T - The tab props type extending TabProps\n /\ntype DesktopNavbarProps<T extends TabSelectorItemProps> = {\n /* Logo component or element displayed on the left side /\n logo: ReactNode;\n /* Array of navigation sections as tab elements /\n sections: ReactElement<T>[];\n /* Right-aligned items (e.g., user menu, search, settings) /\n rightItems?: ReactNode;\n /* Currently selected tab key for highlighting active state /\n selectedChoice: T['key'];\n};\n\n/\n Desktop Navigation Bar Component\n \n A horizontal navigation bar optimized for desktop and tablet viewports.\n * Features a sticky header with backdrop blur, left-aligned logo, center navigation tabs,\n * and right-aligned utility items.\n \n Features:\n * - Sticky positioning with z-index layering (z-50)\n * - Semi-transparent backdrop with blur effect for modern glass-morphism design\n * - Responsive spacing that adapts across screen sizes\n * - Horizontal scrollable tabs for overflow content\n * - Left-to-right layout: Logo → Navigation → Utility Items\n * - Integrated with TabSelector for consistent tab behavior\n \n Layout Structure:\n * ```\n * [Logo] -------- [Nav Tab 1] [Nav Tab 2] [Nav Tab 3] -------- [Right Items]\n * ```\n \n Responsive Behavior:\n * - Base: 2vw margin-left, 3-unit gap between tabs\n * - Large (≥1024px): 5vw margin-left, 3-unit gap between tabs\n * - Extra Large (≥1280px): 10vw margin-left, 6-unit gap between tabs\n * - Right items: 2-unit gap on mobile, 4-unit gap on medium screens\n \n Styling Features:\n * - Semi-transparent card background (`bg-card/80`)\n * - Subtle shadow with controlled blur (`shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)]`)\n * - Backdrop blur effect for content behind navbar\n * - Horizontal overflow scrolling for tab content\n \n @example\n * Basic usage:\n * ```tsx\n * const navigationTabs = [\n * { key: 'home', label: 'Home', href: '/' },\n * { key: 'products', label: 'Products', href: '/products' },\n * { key: 'about', label: 'About', href: '/about' }\n * ];\n \n <DesktopNavbar\n * logo={<CompanyLogo />}\n * sections={navigationTabs}\n * selectedChoice=\"home\"\n * rightItems={<UserProfileMenu />}\n * />\n * ```\n \n @example\n * With multiple right items:\n * ```tsx\n * <DesktopNavbar\n * logo={<Logo />}\n * sections={navSections}\n * selectedChoice={currentPage}\n * rightItems={\n * <>\n * <SearchButton />\n * <NotificationBell />\n * <UserMenu />\n * </>\n * }\n * />\n * ```\n \n @template T - Tab properties type extending TabProps for type safety\n * @param props - DesktopNavbar component props\n * @returns Horizontal desktop navigation JSX element\n */\nexport const DesktopNavbar = <T extends TabSelectorItemProps>({\n logo,\n sections,\n rightItems,\n selectedChoice,\n}: DesktopNavbarProps<T>) => (\n <nav className=\"sticky top-0 z-50 flex w-full items-center bg-card/80 px-4 py-3 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur\">\n {logo}\n\n <TabSelector\n selectedChoice={selectedChoice}\n className=\"ml-[2vw] gap-3 overflow-x-auto text-neutral tracking-wide lg:ml-[5vw] lg:gap-3 xl:ml-[10vw] xl:gap-6\"\n tabs={sections}\n hoverable\n color={TabSelectorColor.TEXT}\n />\n\n <div className=\"mr-4 flex items-center justify-end gap-2 md:gap-4\">\n {rightItems}\n </div>\n </nav>\n);\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AA8FA,MAAa,iBAAiD,EAC5D,MACA,UACA,YACA,qBAEA,qBAAC;CAAI,WAAU;;EACZ;EAED,oBAAC;GACiB;GAChB,WAAU;GACV,MAAM;GACN;GACA,OAAO,iBAAiB;IACxB;EAEF,oBAAC;GAAI,WAAU;aACZ;IACG;;EACF"}
1	+ {"version":3,"file":"DesktopNavbar.mjs","names":[],"sources":["../../../../src/components/Navbar/DesktopNavbar.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactElement, ReactNode } from 'react';\nimport {\n TabSelector,\n TabSelectorColor,\n type TabSelectorItemProps,\n} from '../TabSelector';\n\n/*\n Props for the DesktopNavbar component\n * @template T - The tab props type extending TabProps\n /\ntype DesktopNavbarProps<T extends TabSelectorItemProps> = {\n /* Logo component or element displayed on the left side /\n logo: ReactNode;\n /* Array of navigation sections as tab elements /\n sections: ReactElement<T>[];\n /* Right-aligned items (e.g., user menu, search, settings) /\n rightItems?: ReactNode;\n /* Currently selected tab key for highlighting active state /\n selectedChoice: T['key'];\n};\n\n/\n Desktop Navigation Bar Component\n \n A horizontal navigation bar optimized for desktop and tablet viewports.\n * Features a sticky header with backdrop blur, left-aligned logo, center navigation tabs,\n * and right-aligned utility items.\n \n Features:\n * - Sticky positioning with z-index layering (z-50)\n * - Semi-transparent backdrop with blur effect for modern glass-morphism design\n * - Responsive spacing that adapts across screen sizes\n * - Horizontal scrollable tabs for overflow content\n * - Left-to-right layout: Logo → Navigation → Utility Items\n * - Integrated with TabSelector for consistent tab behavior\n \n Layout Structure:\n * ```\n * [Logo] -------- [Nav Tab 1] [Nav Tab 2] [Nav Tab 3] -------- [Right Items]\n * ```\n \n Responsive Behavior:\n * - Base: 2vw margin-left, 3-unit gap between tabs\n * - Large (≥1024px): 5vw margin-left, 3-unit gap between tabs\n * - Extra Large (≥1280px): 10vw margin-left, 6-unit gap between tabs\n * - Right items: 2-unit gap on mobile, 4-unit gap on medium screens\n \n Styling Features:\n * - Semi-transparent card background (`bg-card/80`)\n * - Subtle shadow with controlled blur (`shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)]`)\n * - Backdrop blur effect for content behind navbar\n * - Horizontal overflow scrolling for tab content\n \n @example\n * Basic usage:\n * ```tsx\n * const navigationTabs = [\n * { key: 'home', label: 'Home', href: '/' },\n * { key: 'products', label: 'Products', href: '/products' },\n * { key: 'about', label: 'About', href: '/about' }\n * ];\n \n <DesktopNavbar\n * logo={<CompanyLogo />}\n * sections={navigationTabs}\n * selectedChoice=\"home\"\n * rightItems={<UserProfileMenu />}\n * />\n * ```\n \n @example\n * With multiple right items:\n * ```tsx\n * <DesktopNavbar\n * logo={<Logo />}\n * sections={navSections}\n * selectedChoice={currentPage}\n * rightItems={\n * <>\n * <SearchButton />\n * <NotificationBell />\n * <UserMenu />\n * </>\n * }\n * />\n * ```\n \n @template T - Tab properties type extending TabProps for type safety\n * @param props - DesktopNavbar component props\n * @returns Horizontal desktop navigation JSX element\n */\nexport const DesktopNavbar = <T extends TabSelectorItemProps>({\n logo,\n sections,\n rightItems,\n selectedChoice,\n}: DesktopNavbarProps<T>) => (\n <nav className=\"sticky top-0 z-50 flex w-full items-center bg-card/80 px-4 py-3 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur\">\n {logo}\n\n <TabSelector\n selectedChoice={selectedChoice}\n className=\"ml-[2vw] gap-3 overflow-x-auto text-neutral tracking-wide lg:ml-[5vw] lg:gap-3 xl:ml-[10vw] xl:gap-6\"\n tabs={sections}\n hoverable\n color={TabSelectorColor.TEXT}\n />\n\n <div className=\"mr-4 flex items-center justify-end gap-2 md:gap-4\">\n {rightItems}\n </div>\n </nav>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8FA,MAAa,iBAAiD,EAC5D,MACA,UACA,YACA,qBAEA,qBAAC;CAAI,WAAU;;EACZ;EAED,oBAAC;GACiB;GAChB,WAAU;GACV,MAAM;GACN;GACA,OAAO,iBAAiB;IACxB;EAEF,oBAAC;GAAI,WAAU;aACZ;IACG;;EACF"}