npm - @intlayer/design-system - Versions diffs - 8.7.3 → 8.7.4 - Mend

@intlayer/design-system 8.7.3 → 8.7.4

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 (107) hide show

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

@@ -50,9 +50,9 @@ const EditableFieldLayout = ({ value = "", onCancel, onSave, onClick, children,
 				children,
 				/* @__PURE__ */ jsx(Button, {
 					label: "Save",
-					variant: ButtonVariant.HOVERABLE,
-					size: ButtonSize.ICON_SM,
-					color: ButtonColor.TEXT,
+					variant: "hoverable",
+					size: "icon-sm",
+					color: "text",
 					Icon: Check,
 					onClick: handleSave,
 					disabled: isDisabled,
@@ -64,10 +64,10 @@ const EditableFieldLayout = ({ value = "", onCancel, onSave, onClick, children,
 				}),
 				/* @__PURE__ */ jsx(Button, {
 					label: "Cancel",
-					color: ButtonColor.TEXT,
-					variant: ButtonVariant.HOVERABLE,
+					color: "text",
+					variant: "hoverable",
 					className: "!text-current",
-					size: ButtonSize.ICON_SM,
+					size: "icon-sm",
 					Icon: X,
 					onClick: handleCancel,
 					disabled: isDisabled,
@@ -85,9 +85,9 @@ const EditableFieldLayout = ({ value = "", onCancel, onSave, onClick, children,
 			}), /* @__PURE__ */ jsx(Button, {
 				label: "Edit",
 				Icon: Pencil,
-				color: ButtonColor.TEXT,
-				variant: ButtonVariant.HOVERABLE,
-				size: ButtonSize.ICON_SM,
+				color: "text",
+				variant: "hoverable",
+				size: "icon-sm",
 				className: "!text-current invisible group-hover/editable-field:visible",
 				disabled: isDisabled,
 				onClick: (e) => {

package/dist/esm/components/EditableField/EditableFieldLayout.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EditableFieldLayout.mjs","names":[],"sources":["../../../../src/components/EditableField/EditableFieldLayout.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { Check, Pencil, X } from 'lucide-react';\nimport {\n type FC,\n type HTMLAttributes,\n type ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\n\ntype EditableFieldLayoutProps = {\n value?: string \| null \| undefined;\n onCancel: () => void;\n onSave: () => void;\n children: ReactNode;\n isDisabled?: boolean;\n} & HTMLAttributes<HTMLSpanElement>;\n\nexport const EditableFieldLayout: FC<EditableFieldLayoutProps> = ({\n value = '',\n onCancel,\n onSave,\n onClick,\n children,\n isDisabled,\n ...props\n}) => {\n const [isEditing, setIsEditing] = useState(false);\n const editableFieldRef = useRef<HTMLSpanElement>(null);\n\n const handleSave = (e: React.MouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n setIsEditing(false);\n onSave();\n };\n\n const handleCancel = (e: React.MouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n setIsEditing(false);\n onCancel();\n };\n\n const result = !value \|\| value === '' ? '-' : value;\n\n const handleClickOutside = useCallback(\n (e: MouseEvent) => {\n // Check if there's any text selected\n const selection = window.getSelection();\n if (selection && selection.toString().trim() !== '') {\n // If there is a selection, do not trigger the save and exit early.\n return;\n }\n\n // Proceed if the click is truly outside the component.\n if (\n editableFieldRef.current &&\n !editableFieldRef.current.contains(e.target as Node)\n ) {\n setIsEditing(false);\n onSave();\n }\n },\n [onSave]\n );\n\n useEffect(() => {\n if (isEditing) {\n document.addEventListener('click', handleClickOutside);\n } else {\n document.removeEventListener('click', handleClickOutside);\n }\n\n return () => document.removeEventListener('click', handleClickOutside);\n }, [handleClickOutside, isEditing]);\n\n return (\n <span\n className=\"group/editable-field flex gap-2\"\n role=\"button\"\n tabIndex={0}\n onClick={(e) => {\n setIsEditing(true);\n onClick?.(e);\n }}\n ref={editableFieldRef}\n {...props}\n >\n <div\n className={cn('flex flex-1 gap-2', isEditing ? 'display' : 'hidden')}\n key={String(isEditing)}\n >\n {children}\n <Button\n label=\"Save\"\n variant={ButtonVariant.HOVERABLE}\n size={ButtonSize.ICON_SM}\n color={ButtonColor.TEXT}\n Icon={Check}\n onClick={handleSave}\n disabled={isDisabled}\n className=\"!text-current\"\n role=\"button\"\n tabIndex={0}\n aria-label=\"Save changes\"\n data-testid=\"editable-field-save-button\"\n />\n <Button\n label=\"Cancel\"\n color={ButtonColor.TEXT}\n variant={ButtonVariant.HOVERABLE}\n className=\"!text-current\"\n size={ButtonSize.ICON_SM}\n Icon={X}\n onClick={handleCancel}\n disabled={isDisabled}\n role=\"button\"\n tabIndex={0}\n aria-label=\"Cancel changes\"\n data-testid=\"editable-field-cancel-button\"\n />\n </div>\n\n <div\n className={cn('flex flex-1 gap-2', isEditing ? 'hidden' : 'display')}\n >\n <span className=\"ml-2 flex w-full whitespace-pre-wrap p-1 text-sm leading-6\">\n {result}\n </span>\n <Button\n label=\"Edit\"\n Icon={Pencil}\n color={ButtonColor.TEXT}\n variant={ButtonVariant.HOVERABLE}\n size={ButtonSize.ICON_SM}\n className=\"!text-current invisible group-hover/editable-field:visible\"\n disabled={isDisabled}\n onClick={(e) => {\n e.stopPropagation();\n setIsEditing(true);\n }}\n />\n </div>\n </span>\n );\n};\n"],"mappings":";;;;;;;;;AAuBA,MAAa,uBAAqD,EAChE,QAAQ,IACR,UACA,QACA,SACA,UACA,YACA,GAAG,YACC;CACJ,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CACjD,MAAM,mBAAmB,OAAwB,KAAK;CAEtD,MAAM,cAAc,MAA2C;AAC7D,IAAE,iBAAiB;AACnB,eAAa,MAAM;AACnB,UAAQ;;CAGV,MAAM,gBAAgB,MAA2C;AAC/D,IAAE,iBAAiB;AACnB,eAAa,MAAM;AACnB,YAAU;;CAGZ,MAAM,SAAS,CAAC,SAAS,UAAU,KAAK,MAAM;CAE9C,MAAM,qBAAqB,aACxB,MAAkB;EAEjB,MAAM,YAAY,OAAO,cAAc;AACvC,MAAI,aAAa,UAAU,UAAU,CAAC,MAAM,KAAK,GAE/C;AAIF,MACE,iBAAiB,WACjB,CAAC,iBAAiB,QAAQ,SAAS,EAAE,OAAe,EACpD;AACA,gBAAa,MAAM;AACnB,WAAQ;;IAGZ,CAAC,OAAO,CACT;AAED,iBAAgB;AACd,MAAI,UACF,UAAS,iBAAiB,SAAS,mBAAmB;MAEtD,UAAS,oBAAoB,SAAS,mBAAmB;AAG3D,eAAa,SAAS,oBAAoB,SAAS,mBAAmB;IACrE,CAAC,oBAAoB,UAAU,CAAC;AAEnC,QACE,qBAAC,QAAD;EACE,WAAU;EACV,MAAK;EACL,UAAU;EACV,UAAU,MAAM;AACd,gBAAa,KAAK;AAClB,aAAU,EAAE;;EAEd,KAAK;EACL,GAAI;YATN,CAWE,qBAAC,OAAD;GACE,WAAW,GAAG,qBAAqB,YAAY,YAAY,SAAS;aADtE;IAIG;IACD,oBAAC,QAAD;KACE,OAAM;KACN~~,SAAS,cAAc~~;~~KACvB,MAAM,WAAW~~;~~KACjB,OAAO,YAAY~~;~~KACnB~~,MAAM;KACN,SAAS;KACT,UAAU;KACV,WAAU;KACV,MAAK;KACL,UAAU;KACV,cAAW;KACX,eAAY;KACZ;IACF,oBAAC,QAAD;KACE,OAAM;KACN~~,OAAO,YAAY~~;~~KACnB,SAAS,cAAc~~;~~KACvB~~,WAAU;KACV~~,MAAM,WAAW~~;~~KACjB~~,MAAM;KACN,SAAS;KACT,UAAU;KACV,MAAK;KACL,UAAU;KACV,cAAW;KACX,eAAY;KACZ;IACE;KA/BC,OAAO,UAAU,CA+BlB,EAEN,qBAAC,OAAD;GACE,WAAW,GAAG,qBAAqB,YAAY,WAAW,UAAU;aADtE,CAGE,oBAAC,QAAD;IAAM,WAAU;cACb;IACI,GACP,oBAAC,QAAD;IACE,OAAM;IACN,MAAM;IACN~~,OAAO,YAAY~~;~~IACnB,SAAS,cAAc~~;~~IACvB,MAAM,WAAW~~;~~IACjB~~,WAAU;IACV,UAAU;IACV,UAAU,MAAM;AACd,OAAE,iBAAiB;AACnB,kBAAa,KAAK;;IAEpB,EACE;KACD"}
1	+ {"version":3,"file":"EditableFieldLayout.mjs","names":[],"sources":["../../../../src/components/EditableField/EditableFieldLayout.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { Check, Pencil, X } from 'lucide-react';\nimport {\n type FC,\n type HTMLAttributes,\n type ReactNode,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { Button, ButtonColor, ButtonSize, ButtonVariant } from '../Button';\n\ntype EditableFieldLayoutProps = {\n value?: string \| null \| undefined;\n onCancel: () => void;\n onSave: () => void;\n children: ReactNode;\n isDisabled?: boolean;\n} & HTMLAttributes<HTMLSpanElement>;\n\nexport const EditableFieldLayout: FC<EditableFieldLayoutProps> = ({\n value = '',\n onCancel,\n onSave,\n onClick,\n children,\n isDisabled,\n ...props\n}) => {\n const [isEditing, setIsEditing] = useState(false);\n const editableFieldRef = useRef<HTMLSpanElement>(null);\n\n const handleSave = (e: React.MouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n setIsEditing(false);\n onSave();\n };\n\n const handleCancel = (e: React.MouseEvent<HTMLButtonElement>) => {\n e.stopPropagation();\n setIsEditing(false);\n onCancel();\n };\n\n const result = !value \|\| value === '' ? '-' : value;\n\n const handleClickOutside = useCallback(\n (e: MouseEvent) => {\n // Check if there's any text selected\n const selection = window.getSelection();\n if (selection && selection.toString().trim() !== '') {\n // If there is a selection, do not trigger the save and exit early.\n return;\n }\n\n // Proceed if the click is truly outside the component.\n if (\n editableFieldRef.current &&\n !editableFieldRef.current.contains(e.target as Node)\n ) {\n setIsEditing(false);\n onSave();\n }\n },\n [onSave]\n );\n\n useEffect(() => {\n if (isEditing) {\n document.addEventListener('click', handleClickOutside);\n } else {\n document.removeEventListener('click', handleClickOutside);\n }\n\n return () => document.removeEventListener('click', handleClickOutside);\n }, [handleClickOutside, isEditing]);\n\n return (\n <span\n className=\"group/editable-field flex gap-2\"\n role=\"button\"\n tabIndex={0}\n onClick={(e) => {\n setIsEditing(true);\n onClick?.(e);\n }}\n ref={editableFieldRef}\n {...props}\n >\n <div\n className={cn('flex flex-1 gap-2', isEditing ? 'display' : 'hidden')}\n key={String(isEditing)}\n >\n {children}\n <Button\n label=\"Save\"\n variant={ButtonVariant.HOVERABLE}\n size={ButtonSize.ICON_SM}\n color={ButtonColor.TEXT}\n Icon={Check}\n onClick={handleSave}\n disabled={isDisabled}\n className=\"!text-current\"\n role=\"button\"\n tabIndex={0}\n aria-label=\"Save changes\"\n data-testid=\"editable-field-save-button\"\n />\n <Button\n label=\"Cancel\"\n color={ButtonColor.TEXT}\n variant={ButtonVariant.HOVERABLE}\n className=\"!text-current\"\n size={ButtonSize.ICON_SM}\n Icon={X}\n onClick={handleCancel}\n disabled={isDisabled}\n role=\"button\"\n tabIndex={0}\n aria-label=\"Cancel changes\"\n data-testid=\"editable-field-cancel-button\"\n />\n </div>\n\n <div\n className={cn('flex flex-1 gap-2', isEditing ? 'hidden' : 'display')}\n >\n <span className=\"ml-2 flex w-full whitespace-pre-wrap p-1 text-sm leading-6\">\n {result}\n </span>\n <Button\n label=\"Edit\"\n Icon={Pencil}\n color={ButtonColor.TEXT}\n variant={ButtonVariant.HOVERABLE}\n size={ButtonSize.ICON_SM}\n className=\"!text-current invisible group-hover/editable-field:visible\"\n disabled={isDisabled}\n onClick={(e) => {\n e.stopPropagation();\n setIsEditing(true);\n }}\n />\n </div>\n </span>\n );\n};\n"],"mappings":";;;;;;;;;AAuBA,MAAa,uBAAqD,EAChE,QAAQ,IACR,UACA,QACA,SACA,UACA,YACA,GAAG,YACC;CACJ,MAAM,CAAC,WAAW,gBAAgB,SAAS,MAAM;CACjD,MAAM,mBAAmB,OAAwB,KAAK;CAEtD,MAAM,cAAc,MAA2C;AAC7D,IAAE,iBAAiB;AACnB,eAAa,MAAM;AACnB,UAAQ;;CAGV,MAAM,gBAAgB,MAA2C;AAC/D,IAAE,iBAAiB;AACnB,eAAa,MAAM;AACnB,YAAU;;CAGZ,MAAM,SAAS,CAAC,SAAS,UAAU,KAAK,MAAM;CAE9C,MAAM,qBAAqB,aACxB,MAAkB;EAEjB,MAAM,YAAY,OAAO,cAAc;AACvC,MAAI,aAAa,UAAU,UAAU,CAAC,MAAM,KAAK,GAE/C;AAIF,MACE,iBAAiB,WACjB,CAAC,iBAAiB,QAAQ,SAAS,EAAE,OAAe,EACpD;AACA,gBAAa,MAAM;AACnB,WAAQ;;IAGZ,CAAC,OAAO,CACT;AAED,iBAAgB;AACd,MAAI,UACF,UAAS,iBAAiB,SAAS,mBAAmB;MAEtD,UAAS,oBAAoB,SAAS,mBAAmB;AAG3D,eAAa,SAAS,oBAAoB,SAAS,mBAAmB;IACrE,CAAC,oBAAoB,UAAU,CAAC;AAEnC,QACE,qBAAC,QAAD;EACE,WAAU;EACV,MAAK;EACL,UAAU;EACV,UAAU,MAAM;AACd,gBAAa,KAAK;AAClB,aAAU,EAAE;;EAEd,KAAK;EACL,GAAI;YATN,CAWE,qBAAC,OAAD;GACE,WAAW,GAAG,qBAAqB,YAAY,YAAY,SAAS;aADtE;IAIG;IACD,oBAAC,QAAD;KACE,OAAM;KACN;KACA;KACA;KACA,MAAM;KACN,SAAS;KACT,UAAU;KACV,WAAU;KACV,MAAK;KACL,UAAU;KACV,cAAW;KACX,eAAY;KACZ;IACF,oBAAC,QAAD;KACE,OAAM;KACN;KACA;KACA,WAAU;KACV;KACA,MAAM;KACN,SAAS;KACT,UAAU;KACV,MAAK;KACL,UAAU;KACV,cAAW;KACX,eAAY;KACZ;IACE;KA/BC,OAAO,UAAU,CA+BlB,EAEN,qBAAC,OAAD;GACE,WAAW,GAAG,qBAAqB,YAAY,WAAW,UAAU;aADtE,CAGE,oBAAC,QAAD;IAAM,WAAU;cACb;IACI,GACP,oBAAC,QAAD;IACE,OAAM;IACN,MAAM;IACN;IACA;IACA;IACA,WAAU;IACV,UAAU;IACV,UAAU,MAAM;AACd,OAAE,iBAAiB;AACnB,kBAAa,KAAK;;IAEpB,EACE;KACD"}

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

@@ -17,7 +17,7 @@ const CopyCode = ({ code, ...props }) => {
 		}), /* @__PURE__ */ jsxs(Popover.Detail, {
 			identifier: "copy",
 			className: "flex min-w-64 flex-col gap-3 p-3 text-sm",
-			xAlign: PopoverXAlign.END,
+			xAlign: "end",
 			children: [/* @__PURE__ */ jsx("strong", { children: title }), /* @__PURE__ */ jsx("p", {
 				className: "text-neutral",
 				children: description

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CopyCode.mjs","names":[],"sources":["../../../../src/components/IDE/CopyCode.tsx"],"sourcesContent":["'use client';\n\nimport type { ButtonProps } from '@components/Button';\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { CopyButton } from '../CopyButton';\nimport { Popover, PopoverXAlign } from '../Popover';\n\ntype CopyCodeProps = {\n code: string;\n} & Partial<Omit<ButtonProps, 'children'>>;\n\nexport const CopyCode: FC<CopyCodeProps> = ({ code, ...props }) => {\n const { title, description } = useIntlayer('code');\n\n return (\n <Popover identifier=\"copy\">\n <CopyButton content={code} {...props} />\n\n <Popover.Detail\n identifier=\"copy\"\n className=\"flex min-w-64 flex-col gap-3 p-3 text-sm\"\n xAlign={PopoverXAlign.END}\n >\n <strong>{title}</strong>\n <p className=\"text-neutral\">{description}</p>\n </Popover.Detail>\n </Popover>\n );\n};\n"],"mappings":";;;;;;;;;AAYA,MAAa,YAA+B,EAAE,MAAM,GAAG,YAAY;CACjE,MAAM,EAAE,OAAO,gBAAgB,YAAY,OAAO;AAElD,QACE,qBAAC,SAAD;EAAS,YAAW;YAApB,CACE,oBAAC,YAAD;GAAY,SAAS;GAAM,GAAI;GAAS,GAExC,qBAAC,QAAQ,QAAT;GACE,YAAW;GACX,WAAU;GACV~~,QAAQ,cAAc~~;~~aAHxB~~,CAKE,oBAAC,UAAD,YAAS,OAAe,GACxB,oBAAC,KAAD;IAAG,WAAU;cAAgB;IAAgB,EAC9B;KACT"}
1	+ {"version":3,"file":"CopyCode.mjs","names":[],"sources":["../../../../src/components/IDE/CopyCode.tsx"],"sourcesContent":["'use client';\n\nimport type { ButtonProps } from '@components/Button';\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { CopyButton } from '../CopyButton';\nimport { Popover, PopoverXAlign } from '../Popover';\n\ntype CopyCodeProps = {\n code: string;\n} & Partial<Omit<ButtonProps, 'children'>>;\n\nexport const CopyCode: FC<CopyCodeProps> = ({ code, ...props }) => {\n const { title, description } = useIntlayer('code');\n\n return (\n <Popover identifier=\"copy\">\n <CopyButton content={code} {...props} />\n\n <Popover.Detail\n identifier=\"copy\"\n className=\"flex min-w-64 flex-col gap-3 p-3 text-sm\"\n xAlign={PopoverXAlign.END}\n >\n <strong>{title}</strong>\n <p className=\"text-neutral\">{description}</p>\n </Popover.Detail>\n </Popover>\n );\n};\n"],"mappings":";;;;;;;;;AAYA,MAAa,YAA+B,EAAE,MAAM,GAAG,YAAY;CACjE,MAAM,EAAE,OAAO,gBAAgB,YAAY,OAAO;AAElD,QACE,qBAAC,SAAD;EAAS,YAAW;YAApB,CACE,oBAAC,YAAD;GAAY,SAAS;GAAM,GAAI;GAAS,GAExC,qBAAC,QAAQ,QAAT;GACE,YAAW;GACX,WAAU;GACV;aAHF,CAKE,oBAAC,UAAD,YAAS,OAAe,GACxB,oBAAC,KAAD;IAAG,WAAU;cAAgB;IAAgB,EAC9B;KACT"}

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

@@ -62,135 +62,135 @@ let LinkUnderlined = /* @__PURE__ */ function(LinkUnderlined) {
 const linkVariants = cva("gap-3 transition-all duration-300 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50", {
 	variants: {
 		variant: {
-			[`${LinkVariant.DEFAULT}`]: "h-auto justify-start border-inherit bg-current/0 px-1 font-medium decoration-[1.5] underline-offset-5 hover:bg-current/0 hover:text-current/80 hover:underline hover:underline-offset-6",
-			[`${LinkVariant.INVISIBLE_LINK}`]: "h-auto justify-start border-inherit bg-current/0 px-1 underline-offset-5 hover:bg-current/0",
-			[`${LinkVariant.BUTTON}`]: "relative flex cursor-pointer flex-row items-center justify-center gap-2 rounded-full bg-current text-center font-medium text-text ring-0 *:text-text-opposite hover:bg-current/90 hover:ring-5 aria-selected:ring-5",
-			[`${LinkVariant.BUTTON_OUTLINED}`]: "relative flex cursor-pointer flex-row items-center justify-center gap-2 rounded-full border-[1.3px] border-current text-center font-medium text-text ring-0 *:text-text hover:bg-current/20 hover:ring-5 aria-selected:ring-5",
-			[`${LinkVariant.HOVERABLE}`]: "block rounded-lg border-none bg-current/0 hover:bg-current/10 aria-[current]:bg-current/5"
+			[`default`]: "h-auto justify-start border-inherit bg-current/0 px-1 font-medium decoration-[1.5] underline-offset-5 hover:bg-current/0 hover:text-current/80 hover:underline hover:underline-offset-6",
+			[`invisible-link`]: "h-auto justify-start border-inherit bg-current/0 px-1 underline-offset-5 hover:bg-current/0",
+			[`button`]: "relative flex cursor-pointer flex-row items-center justify-center gap-2 rounded-full bg-current text-center font-medium text-text ring-0 *:text-text-opposite hover:bg-current/90 hover:ring-5 aria-selected:ring-5",
+			[`button-outlined`]: "relative flex cursor-pointer flex-row items-center justify-center gap-2 rounded-full border-[1.3px] border-current text-center font-medium text-text ring-0 *:text-text hover:bg-current/20 hover:ring-5 aria-selected:ring-5",
+			[`hoverable`]: "block rounded-lg border-none bg-current/0 hover:bg-current/10 aria-[current]:bg-current/5"
 		},
 		roundedSize: {
-			[`${LinkRoundedSize.NONE}`]: "rounded-none",
-			[`${LinkRoundedSize.SM}`]: "rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl",
-			[`${LinkRoundedSize.MD}`]: "rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl",
-			[`${LinkRoundedSize.LG}`]: "rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl",
-			[`${LinkRoundedSize.XL}`]: "rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl",
-			[`${LinkRoundedSize.TWO_XL}`]: "rounded-4xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[2.5rem]",
-			[`${LinkRoundedSize.THREE_XL}`]: "rounded-[2.5rem] [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[3rem]",
-			[`${LinkRoundedSize.FULL}`]: "rounded-full"
+			[`none`]: "rounded-none",
+			[`sm`]: "rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl",
+			[`md`]: "rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl",
+			[`lg`]: "rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl",
+			[`xl`]: "rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl",
+			[`2xl`]: "rounded-4xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[2.5rem]",
+			[`3xl`]: "rounded-[2.5rem] [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[3rem]",
+			[`full`]: "rounded-full"
 		},
 		color: {
-			[`${LinkColor.PRIMARY}`]: "text-primary",
-			[`${LinkColor.SECONDARY}`]: "text-secondary",
-			[`${LinkColor.DESTRUCTIVE}`]: "text-destructive",
-			[`${LinkColor.NEUTRAL}`]: "text-neutral",
-			[`${LinkColor.LIGHT}`]: "text-white",
-			[`${LinkColor.DARK}`]: "text-neutral-800",
-			[`${LinkColor.TEXT}`]: "text-text",
-			[`${LinkColor.TEXT_INVERSE}`]: "text-text-opposite",
-			[`${LinkColor.ERROR}`]: "text-error",
-			[`${LinkColor.SUCCESS}`]: "text-success",
-			[`${LinkColor.CUSTOM}`]: ""
+			[`primary`]: "text-primary",
+			[`secondary`]: "text-secondary",
+			[`destructive`]: "text-destructive",
+			[`neutral`]: "text-neutral",
+			[`light`]: "text-white",
+			[`dark`]: "text-neutral-800",
+			[`text`]: "text-text",
+			[`text-inverse`]: "text-text-opposite",
+			[`error`]: "text-error",
+			[`success`]: "text-success",
+			[`custom`]: ""
 		},
 		size: {
-			[`${LinkSize.SM}`]: "text-sm",
-			[`${LinkSize.MD}`]: "text-base",
-			[`${LinkSize.LG}`]: "text-lg",
-			[`${LinkSize.XL}`]: "text-xl",
-			[`${LinkSize.CUSTOM}`]: ""
+			[`sm`]: "text-sm",
+			[`md`]: "text-base",
+			[`lg`]: "text-lg",
+			[`xl`]: "text-xl",
+			[`custom`]: ""
 		},
 		underlined: {
-			[LinkUnderlined.DEFAULT]: "",
-			[LinkUnderlined.TRUE]: "underline",
-			[LinkUnderlined.FALSE]: "no-underline"
+			["default"]: "",
+			["true"]: "underline",
+			["false"]: "no-underline"
 		}
 	},
 	compoundVariants: [
 		{
-			variant: LinkVariant.BUTTON,
-			color: LinkColor.TEXT_INVERSE,
+			variant: "button",
+			color: "text-inverse",
 			class: "*:text-text"
 		},
 		{
-			variant: LinkVariant.BUTTON_OUTLINED,
-			color: LinkColor.TEXT_INVERSE,
+			variant: "button-outlined",
+			color: "text-inverse",
 			class: "text-text-opposite *:text-text-opposite"
 		},
 		{
-			variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],
-			size: LinkSize.SM,
+			variant: ["button", "button-outlined"],
+			size: "sm",
 			class: "min-h-7 px-3 max-md:py-1"
 		},
 		{
-			variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],
-			size: LinkSize.MD,
+			variant: ["button", "button-outlined"],
+			size: "md",
 			class: "min-h-8 px-6 max-md:py-2"
 		},
 		{
-			variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],
-			size: LinkSize.LG,
+			variant: ["button", "button-outlined"],
+			size: "lg",
 			class: "min-h-10 px-8 max-md:py-3"
 		},
 		{
-			variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],
-			size: LinkSize.XL,
+			variant: ["button", "button-outlined"],
+			size: "xl",
 			class: "min-h-11 px-10 max-md:py-4"
 		},
 		{
-			variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],
-			color: LinkColor.PRIMARY,
+			variant: ["button", "button-outlined"],
+			color: "primary",
 			class: "ring-primary/20"
 		},
 		{
-			variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],
-			color: LinkColor.SECONDARY,
+			variant: ["button", "button-outlined"],
+			color: "secondary",
 			class: "ring-secondary/20"
 		},
 		{
-			variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],
-			color: LinkColor.DESTRUCTIVE,
+			variant: ["button", "button-outlined"],
+			color: "destructive",
 			class: "ring-destructive/20"
 		},
 		{
-			variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],
-			color: LinkColor.NEUTRAL,
+			variant: ["button", "button-outlined"],
+			color: "neutral",
 			class: "ring-neutral/20"
 		},
 		{
-			variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],
-			color: LinkColor.LIGHT,
+			variant: ["button", "button-outlined"],
+			color: "light",
 			class: "ring-white/20"
 		},
 		{
-			variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],
-			color: LinkColor.DARK,
+			variant: ["button", "button-outlined"],
+			color: "dark",
 			class: "ring-neutral-800/20"
 		},
 		{
-			variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],
-			color: LinkColor.TEXT,
+			variant: ["button", "button-outlined"],
+			color: "text",
 			class: "ring-text/20"
 		},
 		{
-			variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],
-			color: LinkColor.TEXT_INVERSE,
+			variant: ["button", "button-outlined"],
+			color: "text-inverse",
 			class: "ring-text-opposite/20"
 		},
 		{
-			variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],
-			color: LinkColor.ERROR,
+			variant: ["button", "button-outlined"],
+			color: "error",
 			class: "ring-error/20"
 		},
 		{
-			variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],
-			color: LinkColor.SUCCESS,
+			variant: ["button", "button-outlined"],
+			color: "success",
 			class: "ring-success/20"
 		}
 	],
 	defaultVariants: {
-		variant: LinkVariant.DEFAULT,
-		roundedSize: LinkRoundedSize.MD,
-		underlined: LinkUnderlined.DEFAULT,
-		size: LinkSize.MD
+		variant: "default",
+		roundedSize: "md",
+		underlined: "default",
+		size: "md"
 	}
 });
 const checkIsExternalLink = ({ href, isExternalLink: isExternalLinkProp }) => {
@@ -204,11 +204,11 @@ const isTextChildren = (children) => {
 	return false;
 };
 const Link = (props) => {
-	const { variant = LinkVariant.DEFAULT, color = LinkColor.CUSTOM, roundedSize, children, label, className, isActive, underlined, locale, size, isExternalLink: isExternalLinkProp, isPageSection: isPageSectionProp, href: hrefProp, ...otherProps } = props;
+	const { variant = "default", color = "custom", roundedSize, children, label, className, isActive, underlined, locale, size, isExternalLink: isExternalLinkProp, isPageSection: isPageSectionProp, href: hrefProp, ...otherProps } = props;
 	const isExternalLink = isExternalLinkProp ?? checkIsExternalLink(props);
 	const isPageSection = isPageSectionProp ?? hrefProp?.startsWith("#") ?? false;
 	const isChildrenString = isTextChildren(children);
-	const isButton = variant === LinkVariant.BUTTON || variant === LinkVariant.BUTTON_OUTLINED;
+	const isButton = variant === "button" || variant === "button-outlined";
 	const rel = isExternalLink ? "noopener noreferrer nofollow" : void 0;
 	const target = isExternalLink ? "_blank" : "_self";
 	return /* @__PURE__ */ jsxs("a", {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Link.mjs","names":[],"sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import { getLocalizedUrl } from '@intlayer/core/localization';\nimport type { LocalesValues } from '@intlayer/types/module_augmentation';\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ExternalLink, MoveRight } from 'lucide-react';\nimport {\n type AnchorHTMLAttributes,\n type DetailedHTMLProps,\n type FC,\n isValidElement,\n type ReactNode,\n} from 'react';\n\n/*\n Visual style variants for Link component\n /\nexport enum LinkVariant {\n DEFAULT = 'default',\n INVISIBLE_LINK = 'invisible-link',\n BUTTON = 'button',\n BUTTON_OUTLINED = 'button-outlined',\n HOVERABLE = 'hoverable',\n}\n\n/\n Color theme variants for Link component\n /\nexport enum LinkColor {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n DESTRUCTIVE = 'destructive',\n NEUTRAL = 'neutral',\n LIGHT = 'light',\n DARK = 'dark',\n TEXT = 'text',\n TEXT_INVERSE = 'text-inverse',\n ERROR = 'error',\n SUCCESS = 'success',\n CUSTOM = 'custom',\n}\n\nexport enum LinkRoundedSize {\n NONE = 'none',\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n XL = 'xl',\n TWO_XL = '2xl',\n THREE_XL = '3xl',\n FULL = 'full',\n}\n\nexport enum LinkSize {\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n XL = 'xl',\n CUSTOM = 'custom',\n}\n\nexport enum LinkUnderlined {\n DEFAULT = 'default',\n TRUE = 'true',\n FALSE = 'false',\n}\n\nexport const linkVariants = cva(\n 'gap-3 transition-all duration-300 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',\n {\n variants: {\n variant: {\n [`${LinkVariant.DEFAULT}`]:\n 'h-auto justify-start border-inherit bg-current/0 px-1 font-medium decoration-[1.5] underline-offset-5 hover:bg-current/0 hover:text-current/80 hover:underline hover:underline-offset-6',\n [`${LinkVariant.INVISIBLE_LINK}`]:\n 'h-auto justify-start border-inherit bg-current/0 px-1 underline-offset-5 hover:bg-current/0',\n\n [`${LinkVariant.BUTTON}`]:\n 'relative flex cursor-pointer flex-row items-center justify-center gap-2 rounded-full bg-current text-center font-medium text-text ring-0 :text-text-opposite hover:bg-current/90 hover:ring-5 aria-selected:ring-5',\n\n [`${LinkVariant.BUTTON_OUTLINED}`]:\n 'relative flex cursor-pointer flex-row items-center justify-center gap-2 rounded-full border-[1.3px] border-current text-center font-medium text-text ring-0 :text-text hover:bg-current/20 hover:ring-5 aria-selected:ring-5',\n\n [`${LinkVariant.HOVERABLE}`]:\n 'block rounded-lg border-none bg-current/0 hover:bg-current/10 aria-[current]:bg-current/5',\n },\n roundedSize: {\n [`${LinkRoundedSize.NONE}`]: 'rounded-none',\n [`${LinkRoundedSize.SM}`]:\n 'rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl',\n [`${LinkRoundedSize.MD}`]:\n 'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n [`${LinkRoundedSize.LG}`]:\n 'rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl',\n [`${LinkRoundedSize.XL}`]:\n 'rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl',\n [`${LinkRoundedSize.TWO_XL}`]:\n 'rounded-4xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[2.5rem]',\n [`${LinkRoundedSize.THREE_XL}`]:\n 'rounded-[2.5rem] [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[3rem]',\n [`${LinkRoundedSize.FULL}`]: 'rounded-full',\n },\n color: {\n [`${LinkColor.PRIMARY}`]: 'text-primary',\n [`${LinkColor.SECONDARY}`]: 'text-secondary',\n [`${LinkColor.DESTRUCTIVE}`]: 'text-destructive',\n [`${LinkColor.NEUTRAL}`]: 'text-neutral',\n [`${LinkColor.LIGHT}`]: 'text-white',\n [`${LinkColor.DARK}`]: 'text-neutral-800',\n [`${LinkColor.TEXT}`]: 'text-text',\n [`${LinkColor.TEXT_INVERSE}`]: 'text-text-opposite',\n [`${LinkColor.ERROR}`]: 'text-error',\n [`${LinkColor.SUCCESS}`]: 'text-success',\n [`${LinkColor.CUSTOM}`]: '',\n },\n size: {\n [`${LinkSize.SM}`]: 'text-sm',\n [`${LinkSize.MD}`]: 'text-base',\n [`${LinkSize.LG}`]: 'text-lg',\n [`${LinkSize.XL}`]: 'text-xl',\n [`${LinkSize.CUSTOM}`]: '',\n },\n underlined: {\n [LinkUnderlined.DEFAULT]: '',\n [LinkUnderlined.TRUE]: 'underline',\n [LinkUnderlined.FALSE]: 'no-underline',\n },\n },\n // Compound variants handle height and padding\n compoundVariants: [\n // ---------------------------------------------------------\n // FIX START: Correctly Handle Contrast for TEXT_INVERSE\n // ---------------------------------------------------------\n {\n // Filled Button + Inverse Color (e.g., White Button):\n // We DO NOT override parent text color (it must remain 'text-opposite' so bg-current is white).\n // We ONLY override children to be 'text-text' (Dark) so they show up on white.\n variant: LinkVariant.BUTTON,\n color: LinkColor.TEXT_INVERSE,\n class: ':text-text',\n },\n {\n // Outlined Button + Inverse Color (e.g., White Border):\n // Parent is 'text-opposite' (Border is white).\n // Children must also be 'text-opposite' (White text) to show on dark background.\n variant: LinkVariant.BUTTON_OUTLINED,\n color: LinkColor.TEXT_INVERSE,\n class: 'text-text-opposite *:text-text-opposite',\n },\n\n // Min height and padding for button variants\n {\n variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n size: LinkSize.SM,\n class: 'min-h-7 px-3 max-md:py-1',\n },\n {\n variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n size: LinkSize.MD,\n class: 'min-h-8 px-6 max-md:py-2',\n },\n {\n variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n size: LinkSize.LG,\n class: 'min-h-10 px-8 max-md:py-3',\n },\n {\n variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n size: LinkSize.XL,\n class: 'min-h-11 px-10 max-md:py-4',\n },\n // Ring color variants\n {\n variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n color: LinkColor.PRIMARY,\n class: 'ring-primary/20',\n },\n {\n variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n color: LinkColor.SECONDARY,\n class: 'ring-secondary/20',\n },\n {\n variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n color: LinkColor.DESTRUCTIVE,\n class: 'ring-destructive/20',\n },\n {\n variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n color: LinkColor.NEUTRAL,\n class: 'ring-neutral/20',\n },\n {\n variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n color: LinkColor.LIGHT,\n class: 'ring-white/20',\n },\n {\n variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n color: LinkColor.DARK,\n class: 'ring-neutral-800/20',\n },\n {\n variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n color: LinkColor.TEXT,\n class: 'ring-text/20',\n },\n {\n variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n color: LinkColor.TEXT_INVERSE,\n class: 'ring-text-opposite/20',\n },\n {\n variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n color: LinkColor.ERROR,\n class: 'ring-error/20',\n },\n {\n variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n color: LinkColor.SUCCESS,\n class: 'ring-success/20',\n },\n ],\n\n defaultVariants: {\n variant: LinkVariant.DEFAULT,\n roundedSize: LinkRoundedSize.MD,\n underlined: LinkUnderlined.DEFAULT,\n size: LinkSize.MD,\n },\n }\n);\n\nexport type LinkProps = DetailedHTMLProps<\n AnchorHTMLAttributes<HTMLAnchorElement>,\n HTMLAnchorElement\n> &\n VariantProps<typeof linkVariants> & {\n label: string;\n isExternalLink?: boolean;\n isPageSection?: boolean;\n isActive?: boolean;\n locale?: LocalesValues;\n };\n\nexport const checkIsExternalLink = ({\n href,\n isExternalLink: isExternalLinkProp,\n}: Pick<LinkProps, 'href' \| 'isExternalLink'>): boolean => {\n const isValidHref = typeof href === 'string' && href.trim() !== '';\n const isExternalLink =\n isExternalLinkProp === true \|\|\n (typeof isExternalLinkProp === 'undefined' &&\n isValidHref &&\n /^https?:\\/\\//.test(href));\n\n return isExternalLink;\n};\n\nexport const isTextChildren = (children: ReactNode): boolean => {\n if (typeof children === 'string' \|\| typeof children === 'number') {\n return true;\n }\n if (Array.isArray(children)) {\n return children.every(isTextChildren);\n }\n if (isValidElement(children)) {\n return isTextChildren(\n (children.props as { children?: ReactNode }).children\n );\n }\n return false;\n};\n\nexport const Link: FC<LinkProps> = (props) => {\n const {\n variant = LinkVariant.DEFAULT,\n color = LinkColor.CUSTOM,\n roundedSize,\n children,\n label,\n className,\n isActive,\n underlined,\n locale,\n size,\n isExternalLink: isExternalLinkProp,\n isPageSection: isPageSectionProp,\n href: hrefProp,\n ...otherProps\n } = props;\n\n const isExternalLink = isExternalLinkProp ?? checkIsExternalLink(props);\n const isPageSection = isPageSectionProp ?? hrefProp?.startsWith('#') ?? false;\n\n const isChildrenString = isTextChildren(children);\n const isButton =\n variant === LinkVariant.BUTTON \|\| variant === LinkVariant.BUTTON_OUTLINED;\n\n const rel = isExternalLink ? 'noopener noreferrer nofollow' : undefined;\n\n const target = isExternalLink ? '_blank' : '_self';\n\n const href =\n locale && hrefProp && !isExternalLink && !isPageSection\n ? getLocalizedUrl(hrefProp, locale)\n : hrefProp;\n\n return (\n <a\n href={href}\n aria-label={label}\n rel={rel}\n target={target}\n aria-current={isActive ? 'page' : undefined}\n suppressHydrationWarning\n className={cn(\n linkVariants({\n variant,\n color,\n roundedSize,\n underlined,\n size,\n className,\n })\n )}\n {...otherProps}\n >\n {isButton && isChildrenString ? <span>{children}</span> : children}\n\n {isExternalLink && isChildrenString && (\n <ExternalLink className=\"ml-2 inline-block size-4\" />\n )}\n {isPageSection && <MoveRight className=\"ml-2 inline-block size-4\" />}\n </a>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"Link.mjs","names":[],"sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import { getLocalizedUrl } from '@intlayer/core/localization';\nimport type { LocalesValues } from '@intlayer/types/module_augmentation';\nimport { cn } from '@utils/cn';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { ExternalLink, MoveRight } from 'lucide-react';\nimport {\n type AnchorHTMLAttributes,\n type DetailedHTMLProps,\n type FC,\n isValidElement,\n type ReactNode,\n} from 'react';\n\n/*\n Visual style variants for Link component\n /\nexport enum LinkVariant {\n DEFAULT = 'default',\n INVISIBLE_LINK = 'invisible-link',\n BUTTON = 'button',\n BUTTON_OUTLINED = 'button-outlined',\n HOVERABLE = 'hoverable',\n}\n\n/\n Color theme variants for Link component\n /\nexport enum LinkColor {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n DESTRUCTIVE = 'destructive',\n NEUTRAL = 'neutral',\n LIGHT = 'light',\n DARK = 'dark',\n TEXT = 'text',\n TEXT_INVERSE = 'text-inverse',\n ERROR = 'error',\n SUCCESS = 'success',\n CUSTOM = 'custom',\n}\n\nexport enum LinkRoundedSize {\n NONE = 'none',\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n XL = 'xl',\n TWO_XL = '2xl',\n THREE_XL = '3xl',\n FULL = 'full',\n}\n\nexport enum LinkSize {\n SM = 'sm',\n MD = 'md',\n LG = 'lg',\n XL = 'xl',\n CUSTOM = 'custom',\n}\n\nexport enum LinkUnderlined {\n DEFAULT = 'default',\n TRUE = 'true',\n FALSE = 'false',\n}\n\nexport const linkVariants = cva(\n 'gap-3 transition-all duration-300 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',\n {\n variants: {\n variant: {\n [`${LinkVariant.DEFAULT}`]:\n 'h-auto justify-start border-inherit bg-current/0 px-1 font-medium decoration-[1.5] underline-offset-5 hover:bg-current/0 hover:text-current/80 hover:underline hover:underline-offset-6',\n [`${LinkVariant.INVISIBLE_LINK}`]:\n 'h-auto justify-start border-inherit bg-current/0 px-1 underline-offset-5 hover:bg-current/0',\n\n [`${LinkVariant.BUTTON}`]:\n 'relative flex cursor-pointer flex-row items-center justify-center gap-2 rounded-full bg-current text-center font-medium text-text ring-0 :text-text-opposite hover:bg-current/90 hover:ring-5 aria-selected:ring-5',\n\n [`${LinkVariant.BUTTON_OUTLINED}`]:\n 'relative flex cursor-pointer flex-row items-center justify-center gap-2 rounded-full border-[1.3px] border-current text-center font-medium text-text ring-0 :text-text hover:bg-current/20 hover:ring-5 aria-selected:ring-5',\n\n [`${LinkVariant.HOVERABLE}`]:\n 'block rounded-lg border-none bg-current/0 hover:bg-current/10 aria-[current]:bg-current/5',\n },\n roundedSize: {\n [`${LinkRoundedSize.NONE}`]: 'rounded-none',\n [`${LinkRoundedSize.SM}`]:\n 'rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl',\n [`${LinkRoundedSize.MD}`]:\n 'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',\n [`${LinkRoundedSize.LG}`]:\n 'rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl',\n [`${LinkRoundedSize.XL}`]:\n 'rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl',\n [`${LinkRoundedSize.TWO_XL}`]:\n 'rounded-4xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[2.5rem]',\n [`${LinkRoundedSize.THREE_XL}`]:\n 'rounded-[2.5rem] [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[3rem]',\n [`${LinkRoundedSize.FULL}`]: 'rounded-full',\n },\n color: {\n [`${LinkColor.PRIMARY}`]: 'text-primary',\n [`${LinkColor.SECONDARY}`]: 'text-secondary',\n [`${LinkColor.DESTRUCTIVE}`]: 'text-destructive',\n [`${LinkColor.NEUTRAL}`]: 'text-neutral',\n [`${LinkColor.LIGHT}`]: 'text-white',\n [`${LinkColor.DARK}`]: 'text-neutral-800',\n [`${LinkColor.TEXT}`]: 'text-text',\n [`${LinkColor.TEXT_INVERSE}`]: 'text-text-opposite',\n [`${LinkColor.ERROR}`]: 'text-error',\n [`${LinkColor.SUCCESS}`]: 'text-success',\n [`${LinkColor.CUSTOM}`]: '',\n },\n size: {\n [`${LinkSize.SM}`]: 'text-sm',\n [`${LinkSize.MD}`]: 'text-base',\n [`${LinkSize.LG}`]: 'text-lg',\n [`${LinkSize.XL}`]: 'text-xl',\n [`${LinkSize.CUSTOM}`]: '',\n },\n underlined: {\n [LinkUnderlined.DEFAULT]: '',\n [LinkUnderlined.TRUE]: 'underline',\n [LinkUnderlined.FALSE]: 'no-underline',\n },\n },\n // Compound variants handle height and padding\n compoundVariants: [\n // ---------------------------------------------------------\n // FIX START: Correctly Handle Contrast for TEXT_INVERSE\n // ---------------------------------------------------------\n {\n // Filled Button + Inverse Color (e.g., White Button):\n // We DO NOT override parent text color (it must remain 'text-opposite' so bg-current is white).\n // We ONLY override children to be 'text-text' (Dark) so they show up on white.\n variant: LinkVariant.BUTTON,\n color: LinkColor.TEXT_INVERSE,\n class: ':text-text',\n },\n {\n // Outlined Button + Inverse Color (e.g., White Border):\n // Parent is 'text-opposite' (Border is white).\n // Children must also be 'text-opposite' (White text) to show on dark background.\n variant: LinkVariant.BUTTON_OUTLINED,\n color: LinkColor.TEXT_INVERSE,\n class: 'text-text-opposite *:text-text-opposite',\n },\n\n // Min height and padding for button variants\n {\n variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n size: LinkSize.SM,\n class: 'min-h-7 px-3 max-md:py-1',\n },\n {\n variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n size: LinkSize.MD,\n class: 'min-h-8 px-6 max-md:py-2',\n },\n {\n variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n size: LinkSize.LG,\n class: 'min-h-10 px-8 max-md:py-3',\n },\n {\n variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n size: LinkSize.XL,\n class: 'min-h-11 px-10 max-md:py-4',\n },\n // Ring color variants\n {\n variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n color: LinkColor.PRIMARY,\n class: 'ring-primary/20',\n },\n {\n variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n color: LinkColor.SECONDARY,\n class: 'ring-secondary/20',\n },\n {\n variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n color: LinkColor.DESTRUCTIVE,\n class: 'ring-destructive/20',\n },\n {\n variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n color: LinkColor.NEUTRAL,\n class: 'ring-neutral/20',\n },\n {\n variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n color: LinkColor.LIGHT,\n class: 'ring-white/20',\n },\n {\n variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n color: LinkColor.DARK,\n class: 'ring-neutral-800/20',\n },\n {\n variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n color: LinkColor.TEXT,\n class: 'ring-text/20',\n },\n {\n variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n color: LinkColor.TEXT_INVERSE,\n class: 'ring-text-opposite/20',\n },\n {\n variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n color: LinkColor.ERROR,\n class: 'ring-error/20',\n },\n {\n variant: [LinkVariant.BUTTON, LinkVariant.BUTTON_OUTLINED],\n color: LinkColor.SUCCESS,\n class: 'ring-success/20',\n },\n ],\n\n defaultVariants: {\n variant: LinkVariant.DEFAULT,\n roundedSize: LinkRoundedSize.MD,\n underlined: LinkUnderlined.DEFAULT,\n size: LinkSize.MD,\n },\n }\n);\n\nexport type LinkProps = DetailedHTMLProps<\n AnchorHTMLAttributes<HTMLAnchorElement>,\n HTMLAnchorElement\n> &\n VariantProps<typeof linkVariants> & {\n label: string;\n isExternalLink?: boolean;\n isPageSection?: boolean;\n isActive?: boolean;\n locale?: LocalesValues;\n };\n\nexport const checkIsExternalLink = ({\n href,\n isExternalLink: isExternalLinkProp,\n}: Pick<LinkProps, 'href' \| 'isExternalLink'>): boolean => {\n const isValidHref = typeof href === 'string' && href.trim() !== '';\n const isExternalLink =\n isExternalLinkProp === true \|\|\n (typeof isExternalLinkProp === 'undefined' &&\n isValidHref &&\n /^https?:\\/\\//.test(href));\n\n return isExternalLink;\n};\n\nexport const isTextChildren = (children: ReactNode): boolean => {\n if (typeof children === 'string' \|\| typeof children === 'number') {\n return true;\n }\n if (Array.isArray(children)) {\n return children.every(isTextChildren);\n }\n if (isValidElement(children)) {\n return isTextChildren(\n (children.props as { children?: ReactNode }).children\n );\n }\n return false;\n};\n\nexport const Link: FC<LinkProps> = (props) => {\n const {\n variant = LinkVariant.DEFAULT,\n color = LinkColor.CUSTOM,\n roundedSize,\n children,\n label,\n className,\n isActive,\n underlined,\n locale,\n size,\n isExternalLink: isExternalLinkProp,\n isPageSection: isPageSectionProp,\n href: hrefProp,\n ...otherProps\n } = props;\n\n const isExternalLink = isExternalLinkProp ?? checkIsExternalLink(props);\n const isPageSection = isPageSectionProp ?? hrefProp?.startsWith('#') ?? false;\n\n const isChildrenString = isTextChildren(children);\n const isButton =\n variant === LinkVariant.BUTTON \|\| variant === LinkVariant.BUTTON_OUTLINED;\n\n const rel = isExternalLink ? 'noopener noreferrer nofollow' : undefined;\n\n const target = isExternalLink ? '_blank' : '_self';\n\n const href =\n locale && hrefProp && !isExternalLink && !isPageSection\n ? getLocalizedUrl(hrefProp, locale)\n : hrefProp;\n\n return (\n <a\n href={href}\n aria-label={label}\n rel={rel}\n target={target}\n aria-current={isActive ? 'page' : undefined}\n suppressHydrationWarning\n className={cn(\n linkVariants({\n variant,\n color,\n roundedSize,\n underlined,\n size,\n className,\n })\n )}\n {...otherProps}\n >\n {isButton && isChildrenString ? <span>{children}</span> : children}\n\n {isExternalLink && isChildrenString && (\n <ExternalLink className=\"ml-2 inline-block size-4\" />\n )}\n {isPageSection && <MoveRight className=\"ml-2 inline-block size-4\" />}\n </a>\n );\n};\n"],"mappings":";;;;;;;;;;;AAgBA,IAAY,cAAL;AACL;AACA;AACA;AACA;AACA;;KACD;;;;AAKD,IAAY,YAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;KACD;AAED,IAAY,kBAAL;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;KACD;AAED,IAAY,WAAL;AACL;AACA;AACA;AACA;AACA;;KACD;AAED,IAAY,iBAAL;AACL;AACA;AACA;;KACD;AAED,MAAa,eAAe,IAC1B,iHACA;CACE,UAAU;EACR,SAAS;IACN,YACC;IACD,mBACC;IAED,WACC;IAED,oBACC;IAED,cACC;GACH;EACD,aAAa;IACV,SAA4B;IAC5B,OACC;IACD,OACC;IACD,OACC;IACD,OACC;IACD,QACC;IACD,QACC;IACD,SAA4B;GAC9B;EACD,OAAO;IACJ,YAAyB;IACzB,cAA2B;IAC3B,gBAA6B;IAC7B,YAAyB;IACzB,UAAuB;IACvB,SAAsB;IACtB,SAAsB;IACtB,iBAA8B;IAC9B,UAAuB;IACvB,YAAyB;IACzB,WAAwB;GAC1B;EACD,MAAM;IACH,OAAmB;IACnB,OAAmB;IACnB,OAAmB;IACnB,OAAmB;IACnB,WAAuB;GACzB;EACD,YAAY;gBACgB;aACH;cACC;GACzB;EACF;CAED,kBAAkB;EAIhB;GAIE;GACA;GACA,OAAO;GACR;EACD;GAIE;GACA;GACA,OAAO;GACR;EAGD;GACE,SAAS,6BAAiD;GAC1D;GACA,OAAO;GACR;EACD;GACE,SAAS,6BAAiD;GAC1D;GACA,OAAO;GACR;EACD;GACE,SAAS,6BAAiD;GAC1D;GACA,OAAO;GACR;EACD;GACE,SAAS,6BAAiD;GAC1D;GACA,OAAO;GACR;EAED;GACE,SAAS,6BAAiD;GAC1D;GACA,OAAO;GACR;EACD;GACE,SAAS,6BAAiD;GAC1D;GACA,OAAO;GACR;EACD;GACE,SAAS,6BAAiD;GAC1D;GACA,OAAO;GACR;EACD;GACE,SAAS,6BAAiD;GAC1D;GACA,OAAO;GACR;EACD;GACE,SAAS,6BAAiD;GAC1D;GACA,OAAO;GACR;EACD;GACE,SAAS,6BAAiD;GAC1D;GACA,OAAO;GACR;EACD;GACE,SAAS,6BAAiD;GAC1D;GACA,OAAO;GACR;EACD;GACE,SAAS,6BAAiD;GAC1D;GACA,OAAO;GACR;EACD;GACE,SAAS,6BAAiD;GAC1D;GACA,OAAO;GACR;EACD;GACE,SAAS,6BAAiD;GAC1D;GACA,OAAO;GACR;EACF;CAED,iBAAiB;EACf;EACA;EACA;EACA;EACD;CACF,CACF;AAcD,MAAa,uBAAuB,EAClC,MACA,gBAAgB,yBACyC;CACzD,MAAM,cAAc,OAAO,SAAS,YAAY,KAAK,MAAM,KAAK;AAOhE,QALE,uBAAuB,QACtB,OAAO,uBAAuB,eAC7B,eACA,eAAe,KAAK,KAAK;;AAK/B,MAAa,kBAAkB,aAAiC;AAC9D,KAAI,OAAO,aAAa,YAAY,OAAO,aAAa,SACtD,QAAO;AAET,KAAI,MAAM,QAAQ,SAAS,CACzB,QAAO,SAAS,MAAM,eAAe;AAEvC,KAAI,eAAe,SAAS,CAC1B,QAAO,eACJ,SAAS,MAAmC,SAC9C;AAEH,QAAO;;AAGT,MAAa,QAAuB,UAAU;CAC5C,MAAM,EACJ,qBACA,kBACA,aACA,UACA,OACA,WACA,UACA,YACA,QACA,MACA,gBAAgB,oBAChB,eAAe,mBACf,MAAM,UACN,GAAG,eACD;CAEJ,MAAM,iBAAiB,sBAAsB,oBAAoB,MAAM;CACvE,MAAM,gBAAgB,qBAAqB,UAAU,WAAW,IAAI,IAAI;CAExE,MAAM,mBAAmB,eAAe,SAAS;CACjD,MAAM,WACJ,wBAAkC;CAEpC,MAAM,MAAM,iBAAiB,iCAAiC;CAE9D,MAAM,SAAS,iBAAiB,WAAW;AAO3C,QACE,qBAAC,KAAD;EACE,MANF,UAAU,YAAY,CAAC,kBAAkB,CAAC,gBACtC,gBAAgB,UAAU,OAAO,GACjC;EAKF,cAAY;EACP;EACG;EACR,gBAAc,WAAW,SAAS;EAClC;EACA,WAAW,GACT,aAAa;GACX;GACA;GACA;GACA;GACA;GACA;GACD,CAAC,CACH;EACD,GAAI;YAjBN;GAmBG,YAAY,mBAAmB,oBAAC,QAAD,EAAO,UAAgB,IAAG;GAEzD,kBAAkB,oBACjB,oBAAC,cAAD,EAAc,WAAU,4BAA6B;GAEtD,iBAAiB,oBAAC,WAAD,EAAW,WAAU,4BAA6B;GAClE"}

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

@@ -114,8 +114,8 @@ const LocaleSwitcherContent = ({ panelProps, isMultilingual = true }) => {
 						children: /* @__PURE__ */ jsx(SwitchSelector, {
 							defaultValue: seeAllLocales,
 							onChange: handleSeeAllLocales,
-							color: SwitchSelectorColor.TEXT,
-							size: SwitchSelectorSize.SM,
+							color: "text",
+							size: "sm",
 							className: "!w-60",
 							choices: [{
 								content: seeAllLocalesSwitch.true.value,
@@ -143,11 +143,11 @@ const LocaleSwitcherContent = ({ panelProps, isMultilingual = true }) => {
 								label: `${switchTo} ${currentLocaleName}`,
 								disabled: !(availableLocales ?? availableLocales).includes(localeItem),
 								isActive: selectedLocales.includes(localeItem),
-								variant: ButtonVariant.HOVERABLE,
-								color: ButtonColor.TEXT,
+								variant: "hoverable",
+								color: "text",
 								isFullWidth: true,
-								textAlign: ButtonTextAlign.LEFT,
-								size: ButtonSize.SM,
+								textAlign: "left",
+								size: "sm",
 								children: /* @__PURE__ */ jsxs("div", {
 									className: "flex flex-row items-center justify-between gap-3 px-2 py-1",
 									children: [isMultilingual && /* @__PURE__ */ jsx("div", {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"LocaleSwitcherContent.mjs","names":[],"sources":["../../../../src/components/LocaleSwitcherContentDropDown/LocaleSwitcherContent.tsx"],"sourcesContent":["'use client';\n\nimport { usePersistedStore } from '@hooks/usePersistedStore';\nimport { getHTMLTextDir, getLocaleName } from '@intlayer/core/localization';\nimport { ENGLISH } from '@intlayer/types/locales';\nimport type { LocalesValues } from '@intlayer/types/module_augmentation';\nimport Fuse, { type IFuseOptions } from 'fuse.js';\nimport { Check, Globe, MoveVertical } from 'lucide-react';\nimport { type FC, useMemo, useRef, useState } from 'react';\nimport { useIntlayer, useLocale } from 'react-intlayer';\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 // 1. Memoize the list construction so it doesn't rebuild every render\n const multilingualAvailableLocales: MultilingualAvailableLocales[] = useMemo(\n () =>\n availableLocales.map((localeEl) => {\n const englishName = getLocaleName(localeEl, ENGLISH);\n const currentLocaleName = getLocaleName(localeEl, locale);\n const ownLocaleName = getLocaleName(localeEl);\n return {\n locale: localeEl,\n englishName,\n currentLocaleName,\n ownLocaleName,\n };\n }),\n [availableLocales, locale]\n );\n\n // 2. State for Search Query only (Source of Truth)\n const [searchQuery, setSearchQuery] = useState('');\n\n const [seeAllLocales, setSeeAllLocales] = usePersistedStore(\n 'locale-content-selector-see-all-locales',\n false\n );\n\n // 3. Memoize Fuse instance\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,\n };\n return new Fuse(multilingualAvailableLocales, fuseOptions);\n }, [multilingualAvailableLocales]);\n\n // 4. Derive results from Search Query\n const results = useMemo(() => {\n if (!searchQuery) {\n return multilingualAvailableLocales;\n }\n return fuse.search(searchQuery).map((result) => result.item);\n }, [searchQuery, multilingualAvailableLocales, fuse]);\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\n if (value) {\n setSelectedLocales(availableLocales);\n } else {\n setSelectedLocales([locale]);\n }\n };\n\n return (\n <div className=\"rounded-xl border border-text text-text transition-colors\">\n <DropDown identifier={DROPDOWN_IDENTIFIER}>\n <DropDown.Trigger\n identifier={DROPDOWN_IDENTIFIER}\n label={localeSwitcherLabel.value}\n className=\"p-0!\"\n roundedSize=\"3xl\"\n color=\"text\"\n >\n <div className=\"flex w-full items-center justify-between text-text\">\n <div className=\"px-2 py-1\">\n <Globe size={16} />\n </div>\n <MoveVertical className=\"self-center\" size={16} />\n </div>\n </DropDown.Trigger>\n\n <DropDown.Panel\n identifier={DROPDOWN_IDENTIFIER}\n isOverable\n isFocusable\n align=\"end\"\n {...panelProps}\n >\n <Container\n className=\"max-h-[60vh] min-w-28\"\n separator=\"y\"\n role=\"listbox\"\n transparency=\"xs\"\n border\n roundedSize=\"3xl\"\n borderColor=\"text\"\n aria-label={languageListLabel.value}\n >\n {isMultilingual && (\n <div className=\"m-auto p-2\">\n <SwitchSelector\n defaultValue={seeAllLocales} // Ensure this uses the persisted state\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 // Update search query state directly\n onChange={(e) => setSearchQuery(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":[],"sources":["../../../../src/components/LocaleSwitcherContentDropDown/LocaleSwitcherContent.tsx"],"sourcesContent":["'use client';\n\nimport { usePersistedStore } from '@hooks/usePersistedStore';\nimport { getHTMLTextDir, getLocaleName } from '@intlayer/core/localization';\nimport { ENGLISH } from '@intlayer/types/locales';\nimport type { LocalesValues } from '@intlayer/types/module_augmentation';\nimport Fuse, { type IFuseOptions } from 'fuse.js';\nimport { Check, Globe, MoveVertical } from 'lucide-react';\nimport { type FC, useMemo, useRef, useState } from 'react';\nimport { useIntlayer, useLocale } from 'react-intlayer';\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 // 1. Memoize the list construction so it doesn't rebuild every render\n const multilingualAvailableLocales: MultilingualAvailableLocales[] = useMemo(\n () =>\n availableLocales.map((localeEl) => {\n const englishName = getLocaleName(localeEl, ENGLISH);\n const currentLocaleName = getLocaleName(localeEl, locale);\n const ownLocaleName = getLocaleName(localeEl);\n return {\n locale: localeEl,\n englishName,\n currentLocaleName,\n ownLocaleName,\n };\n }),\n [availableLocales, locale]\n );\n\n // 2. State for Search Query only (Source of Truth)\n const [searchQuery, setSearchQuery] = useState('');\n\n const [seeAllLocales, setSeeAllLocales] = usePersistedStore(\n 'locale-content-selector-see-all-locales',\n false\n );\n\n // 3. Memoize Fuse instance\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,\n };\n return new Fuse(multilingualAvailableLocales, fuseOptions);\n }, [multilingualAvailableLocales]);\n\n // 4. Derive results from Search Query\n const results = useMemo(() => {\n if (!searchQuery) {\n return multilingualAvailableLocales;\n }\n return fuse.search(searchQuery).map((result) => result.item);\n }, [searchQuery, multilingualAvailableLocales, fuse]);\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\n if (value) {\n setSelectedLocales(availableLocales);\n } else {\n setSelectedLocales([locale]);\n }\n };\n\n return (\n <div className=\"rounded-xl border border-text text-text transition-colors\">\n <DropDown identifier={DROPDOWN_IDENTIFIER}>\n <DropDown.Trigger\n identifier={DROPDOWN_IDENTIFIER}\n label={localeSwitcherLabel.value}\n className=\"p-0!\"\n roundedSize=\"3xl\"\n color=\"text\"\n >\n <div className=\"flex w-full items-center justify-between text-text\">\n <div className=\"px-2 py-1\">\n <Globe size={16} />\n </div>\n <MoveVertical className=\"self-center\" size={16} />\n </div>\n </DropDown.Trigger>\n\n <DropDown.Panel\n identifier={DROPDOWN_IDENTIFIER}\n isOverable\n isFocusable\n align=\"end\"\n {...panelProps}\n >\n <Container\n className=\"max-h-[60vh] min-w-28\"\n separator=\"y\"\n role=\"listbox\"\n transparency=\"xs\"\n border\n roundedSize=\"3xl\"\n borderColor=\"text\"\n aria-label={languageListLabel.value}\n >\n {isMultilingual && (\n <div className=\"m-auto p-2\">\n <SwitchSelector\n defaultValue={seeAllLocales} // Ensure this uses the persisted state\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 // Update search query state directly\n onChange={(e) => setSearchQuery(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/LocaleSwitcherDropDown/LocaleSwitcher.mjs CHANGED Viewed

@@ -100,10 +100,10 @@ const LocaleSwitcher = ({ locale, localeList, availableLocales, fullLocaleName =
 								label: `${switchTo} ${currentLocaleName}`,
 								disabled: !(availableLocales ?? localeList).includes(localeItem),
 								isActive: locale === localeItem,
-								variant: ButtonVariant.HOVERABLE,
-								color: ButtonColor.TEXT,
+								variant: "hoverable",
+								color: "text",
 								isFullWidth: true,
-								textAlign: ButtonTextAlign.LEFT,
+								textAlign: "left",
 								children: /* @__PURE__ */ jsxs("div", {
 									className: "flex flex-row items-center justify-between gap-3 px-2 py-1",
 									children: [/* @__PURE__ */ jsxs("div", {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"LocaleSwitcher.mjs","names":[],"sources":["../../../../src/components/LocaleSwitcherDropDown/LocaleSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { getHTMLTextDir, getLocaleName } from '@intlayer/core/localization';\nimport type { Locale } from '@intlayer/types/allLocales';\nimport { ENGLISH } from '@intlayer/types/locales';\nimport Fuse, { type IFuseOptions } from 'fuse.js';\nimport { MoveVertical } from 'lucide-react';\nimport { type FC, useCallback, useMemo, useRef, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button, 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, localeSwitcherLabel } =\n useIntlayer('locale-switcher');\n const inputRef = useRef<HTMLInputElement>(null);\n\n const multilingualAvailableLocales: MultilingualAvailableLocales[] = useMemo(\n () =>\n localeList.map((localeEl) => {\n const englishName = getLocaleName(localeEl, ENGLISH);\n const currentLocaleName = getLocaleName(localeEl, locale);\n const ownLocaleName = getLocaleName(localeEl);\n return {\n locale: localeEl,\n englishName,\n currentLocaleName,\n ownLocaleName,\n };\n }),\n [localeList, locale]\n );\n\n const [results, setResults] = useState<MultilingualAvailableLocales[]>(\n multilingualAvailableLocales\n );\n\n // Create a new Fuse instance with the options and documentation data\n const fuse = useMemo(() => {\n const fuseOptions: IFuseOptions<MultilingualAvailableLocales> = {\n keys: [\n { name: 'ownLocaleName', weight: 0.4 },\n { name: 'englishName', weight: 0.2 },\n { name: 'currentLocaleName', weight: 0.2 },\n { name: 'locale', weight: 0.2 },\n ],\n threshold: 0.02, // Defines how fuzzy the matching should be (lower is more strict)\n };\n\n return new Fuse(multilingualAvailableLocales, fuseOptions);\n }, [multilingualAvailableLocales]);\n\n const handleSearch = useCallback(\n (searchQuery: string) => {\n if (searchQuery) {\n // Perform search on every input change\n const searchResults = fuse\n .search(searchQuery)\n .map((result) => result.item);\n setResults(searchResults);\n } else {\n setResults(multilingualAvailableLocales);\n }\n },\n [fuse, multilingualAvailableLocales]\n );\n\n if (locale) {\n localeName = fullLocaleName ? getLocaleName(locale) : locale.toUpperCase();\n }\n\n return (\n <nav\n className=\"rounded-xl border border-text\"\n aria-label={localeSwitcherLabel.value}\n >\n <DropDown identifier={DROPDOWN_IDENTIFIER}>\n <DropDown.Trigger identifier={DROPDOWN_IDENTIFIER} color=\"text\">\n <div className=\"flex w-full items-center justify-between\">\n <div className=\"text-nowrap px-2\">{localeName}</div>\n <MoveVertical className=\"w-5 self-center\" />\n </div>\n </DropDown.Trigger>\n\n <DropDown.Panel\n identifier={DROPDOWN_IDENTIFIER}\n isOverable\n isFocusable\n align=\"end\"\n {...panelProps}\n >\n <Container\n className=\"max-h-[80vh] min-w-28\"\n separator=\"y\"\n role=\"listbox\"\n transparency=\"xs\"\n aria-label={languageListLabel.value}\n >\n <div className=\"p-3\">\n <Input\n type=\"search\"\n aria-label={searchInput.ariaLabel.value}\n placeholder={searchInput.placeholder.value}\n onChange={(e) => handleSearch(e.target.value)}\n ref={inputRef}\n />\n </div>\n <ol className=\"divide-y divide-dashed divide-text/20 overflow-y-auto p-1\">\n {results.map(\n ({ locale: localeItem, currentLocaleName, ownLocaleName }) => (\n <li className=\"px-1.5 py-1\" key={localeItem}>\n <Button\n onClick={() => setLocale(localeItem)}\n label={`${switchTo} ${currentLocaleName}`}\n disabled={\n !(availableLocales ?? localeList).includes(localeItem)\n }\n isActive={locale === localeItem}\n variant={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 suppressHydrationWarning\n >\n {ownLocaleName}\n </span>\n <span\n className=\"text-neutral text-xs\"\n suppressHydrationWarning\n >\n {currentLocaleName}\n </span>\n </div>\n <span className=\"text-neutral text-sm\">\n {localeItem.toUpperCase()}\n </span>\n </div>\n </Button>\n </li>\n )\n )}\n </ol>\n </Container>\n </DropDown.Panel>\n </DropDown>\n </nav>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAuBA,MAAM,sBAAsB;AAS5B,MAAa,kBAA2C,EACtD,QACA,YACA,kBACA,iBAAiB,MACjB,WACA,iBACI;CACJ,IAAI,aAAa;CACjB,MAAM,EAAE,UAAU,aAAa,mBAAmB,wBAChD,YAAY,kBAAkB;CAChC,MAAM,WAAW,OAAyB,KAAK;CAE/C,MAAM,+BAA+D,cAEjE,WAAW,KAAK,aAAa;AAI3B,SAAO;GACL,QAAQ;GACR,aALkB,cAAc,UAAU,QAAQ;GAMlD,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,OAAD;EACE,WAAU;EACV,cAAY,oBAAoB;YAEhC,qBAAC,UAAD;GAAU,YAAY;aAAtB,CACE,oBAAC,SAAS,SAAV;IAAkB,YAAY;IAAqB,OAAM;cACvD,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,OAAD;MAAK,WAAU;gBAAoB;MAAiB,GACpD,oBAAC,cAAD,EAAc,WAAU,mBAAoB,EACxC;;IACW,GAEnB,oBAAC,SAAS,OAAV;IACE,YAAY;IACZ;IACA;IACA,OAAM;IACN,GAAI;cAEJ,qBAAC,WAAD;KACE,WAAU;KACV,WAAU;KACV,MAAK;KACL,cAAa;KACb,cAAY,kBAAkB;eALhC,CAOE,oBAAC,OAAD;MAAK,WAAU;gBACb,oBAAC,OAAD;OACE,MAAK;OACL,cAAY,YAAY,UAAU;OAClC,aAAa,YAAY,YAAY;OACrC,WAAW,MAAM,aAAa,EAAE,OAAO,MAAM;OAC7C,KAAK;OACL;MACE,GACN,oBAAC,MAAD;MAAI,WAAU;gBACX,QAAQ,KACN,EAAE,QAAQ,YAAY,mBAAmB,oBACxC,oBAAC,MAAD;OAAI,WAAU;iBACZ,oBAAC,QAAD;QACE,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,OAAD;SAAK,WAAU;mBAAf,CACE,qBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,oBAAC,QAAD;WACE,KAAK,eAAe,WAAW;WAC/B,MAAM;WACN;qBAEC;WACI,GACP,oBAAC,QAAD;WACE,WAAU;WACV;qBAEC;WACI,EACH;aACN,oBAAC,QAAD;UAAM,WAAU;oBACb,WAAW,aAAa;UACpB,EACH;;QACC;OACN,EAlC4B,WAkC5B,CAER;MACE,EACK;;IACG,EACR;;EACP"}
1	+ {"version":3,"file":"LocaleSwitcher.mjs","names":[],"sources":["../../../../src/components/LocaleSwitcherDropDown/LocaleSwitcher.tsx"],"sourcesContent":["'use client';\n\nimport { getHTMLTextDir, getLocaleName } from '@intlayer/core/localization';\nimport type { Locale } from '@intlayer/types/allLocales';\nimport { ENGLISH } from '@intlayer/types/locales';\nimport Fuse, { type IFuseOptions } from 'fuse.js';\nimport { MoveVertical } from 'lucide-react';\nimport { type FC, useCallback, useMemo, useRef, useState } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button, 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, localeSwitcherLabel } =\n useIntlayer('locale-switcher');\n const inputRef = useRef<HTMLInputElement>(null);\n\n const multilingualAvailableLocales: MultilingualAvailableLocales[] = useMemo(\n () =>\n localeList.map((localeEl) => {\n const englishName = getLocaleName(localeEl, ENGLISH);\n const currentLocaleName = getLocaleName(localeEl, locale);\n const ownLocaleName = getLocaleName(localeEl);\n return {\n locale: localeEl,\n englishName,\n currentLocaleName,\n ownLocaleName,\n };\n }),\n [localeList, locale]\n );\n\n const [results, setResults] = useState<MultilingualAvailableLocales[]>(\n multilingualAvailableLocales\n );\n\n // Create a new Fuse instance with the options and documentation data\n const fuse = useMemo(() => {\n const fuseOptions: IFuseOptions<MultilingualAvailableLocales> = {\n keys: [\n { name: 'ownLocaleName', weight: 0.4 },\n { name: 'englishName', weight: 0.2 },\n { name: 'currentLocaleName', weight: 0.2 },\n { name: 'locale', weight: 0.2 },\n ],\n threshold: 0.02, // Defines how fuzzy the matching should be (lower is more strict)\n };\n\n return new Fuse(multilingualAvailableLocales, fuseOptions);\n }, [multilingualAvailableLocales]);\n\n const handleSearch = useCallback(\n (searchQuery: string) => {\n if (searchQuery) {\n // Perform search on every input change\n const searchResults = fuse\n .search(searchQuery)\n .map((result) => result.item);\n setResults(searchResults);\n } else {\n setResults(multilingualAvailableLocales);\n }\n },\n [fuse, multilingualAvailableLocales]\n );\n\n if (locale) {\n localeName = fullLocaleName ? getLocaleName(locale) : locale.toUpperCase();\n }\n\n return (\n <nav\n className=\"rounded-xl border border-text\"\n aria-label={localeSwitcherLabel.value}\n >\n <DropDown identifier={DROPDOWN_IDENTIFIER}>\n <DropDown.Trigger identifier={DROPDOWN_IDENTIFIER} color=\"text\">\n <div className=\"flex w-full items-center justify-between\">\n <div className=\"text-nowrap px-2\">{localeName}</div>\n <MoveVertical className=\"w-5 self-center\" />\n </div>\n </DropDown.Trigger>\n\n <DropDown.Panel\n identifier={DROPDOWN_IDENTIFIER}\n isOverable\n isFocusable\n align=\"end\"\n {...panelProps}\n >\n <Container\n className=\"max-h-[80vh] min-w-28\"\n separator=\"y\"\n role=\"listbox\"\n transparency=\"xs\"\n aria-label={languageListLabel.value}\n >\n <div className=\"p-3\">\n <Input\n type=\"search\"\n aria-label={searchInput.ariaLabel.value}\n placeholder={searchInput.placeholder.value}\n onChange={(e) => handleSearch(e.target.value)}\n ref={inputRef}\n />\n </div>\n <ol className=\"divide-y divide-dashed divide-text/20 overflow-y-auto p-1\">\n {results.map(\n ({ locale: localeItem, currentLocaleName, ownLocaleName }) => (\n <li className=\"px-1.5 py-1\" key={localeItem}>\n <Button\n onClick={() => setLocale(localeItem)}\n label={`${switchTo} ${currentLocaleName}`}\n disabled={\n !(availableLocales ?? localeList).includes(localeItem)\n }\n isActive={locale === localeItem}\n variant={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 suppressHydrationWarning\n >\n {ownLocaleName}\n </span>\n <span\n className=\"text-neutral text-xs\"\n suppressHydrationWarning\n >\n {currentLocaleName}\n </span>\n </div>\n <span className=\"text-neutral text-sm\">\n {localeItem.toUpperCase()}\n </span>\n </div>\n </Button>\n </li>\n )\n )}\n </ol>\n </Container>\n </DropDown.Panel>\n </DropDown>\n </nav>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAuBA,MAAM,sBAAsB;AAS5B,MAAa,kBAA2C,EACtD,QACA,YACA,kBACA,iBAAiB,MACjB,WACA,iBACI;CACJ,IAAI,aAAa;CACjB,MAAM,EAAE,UAAU,aAAa,mBAAmB,wBAChD,YAAY,kBAAkB;CAChC,MAAM,WAAW,OAAyB,KAAK;CAE/C,MAAM,+BAA+D,cAEjE,WAAW,KAAK,aAAa;AAI3B,SAAO;GACL,QAAQ;GACR,aALkB,cAAc,UAAU,QAAQ;GAMlD,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,OAAD;EACE,WAAU;EACV,cAAY,oBAAoB;YAEhC,qBAAC,UAAD;GAAU,YAAY;aAAtB,CACE,oBAAC,SAAS,SAAV;IAAkB,YAAY;IAAqB,OAAM;cACvD,qBAAC,OAAD;KAAK,WAAU;eAAf,CACE,oBAAC,OAAD;MAAK,WAAU;gBAAoB;MAAiB,GACpD,oBAAC,cAAD,EAAc,WAAU,mBAAoB,EACxC;;IACW,GAEnB,oBAAC,SAAS,OAAV;IACE,YAAY;IACZ;IACA;IACA,OAAM;IACN,GAAI;cAEJ,qBAAC,WAAD;KACE,WAAU;KACV,WAAU;KACV,MAAK;KACL,cAAa;KACb,cAAY,kBAAkB;eALhC,CAOE,oBAAC,OAAD;MAAK,WAAU;gBACb,oBAAC,OAAD;OACE,MAAK;OACL,cAAY,YAAY,UAAU;OAClC,aAAa,YAAY,YAAY;OACrC,WAAW,MAAM,aAAa,EAAE,OAAO,MAAM;OAC7C,KAAK;OACL;MACE,GACN,oBAAC,MAAD;MAAI,WAAU;gBACX,QAAQ,KACN,EAAE,QAAQ,YAAY,mBAAmB,oBACxC,oBAAC,MAAD;OAAI,WAAU;iBACZ,oBAAC,QAAD;QACE,eAAe,UAAU,WAAW;QACpC,OAAO,GAAG,SAAS,GAAG;QACtB,UACE,EAAE,oBAAoB,YAAY,SAAS,WAAW;QAExD,UAAU,WAAW;QACrB;QACA;QACA;QACA;kBAEA,qBAAC,OAAD;SAAK,WAAU;mBAAf,CACE,qBAAC,OAAD;UAAK,WAAU;oBAAf,CACE,oBAAC,QAAD;WACE,KAAK,eAAe,WAAW;WAC/B,MAAM;WACN;qBAEC;WACI,GACP,oBAAC,QAAD;WACE,WAAU;WACV;qBAEC;WACI,EACH;aACN,oBAAC,QAAD;UAAM,WAAU;oBACb,WAAW,aAAa;UACpB,EACH;;QACC;OACN,EAlC4B,WAkC5B,CAER;MACE,EACK;;IACG,EACR;;EACP"}

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

@@ -111,7 +111,7 @@ const MotionModal = motion.create(Container);
 * @param props - Modal component props
 * @returns JSX element rendered via createPortal
 */
-const Modal = ({ children, isOpen, container, onClose, hasCloseButton = false, title, size = ModalSize.MD, className, isScrollable = false, disableScroll = true, padding = "none", ...props }) => {
+const Modal = ({ children, isOpen, container, onClose, hasCloseButton = false, title, size = "md", className, isScrollable = false, disableScroll = true, padding = "none", ...props }) => {
 	const containerElement = useGetElementOrWindow(container);
 	useScrollBlockage({
 		key: "modal",
@@ -175,8 +175,8 @@ const Modal = ({ children, isOpen, container, onClose, hasCloseButton = false, t
 					className: "mb-2 ml-1 flex items-center justify-center font-bold text-lg",
 					children: title
 				}), hasCloseButton && /* @__PURE__ */ jsx(Button, {
-					variant: ButtonVariant.HOVERABLE,
-					color: ButtonColor.TEXT,
+					variant: "hoverable",
+					color: "text",
 					label: "Close modal",
 					className: "ml-auto",
 					onClick: (e) => {
@@ -184,7 +184,7 @@ const Modal = ({ children, isOpen, container, onClose, hasCloseButton = false, t
 						onClose?.();
 					},
 					Icon: X,
-					size: ButtonSize.ICON_MD
+					size: "icon-md"
 				})]
 			}), /* @__PURE__ */ jsx("div", {
 				className: cn("flex min-h-0 w-full flex-1 flex-col", isScrollable === true && "overflow-auto", isScrollable === "y" && "overflow-y-auto overflow-x-hidden", isScrollable === "x" && "overflow-x-auto overflow-y-hidden", !isScrollable && "overflow-visible"),