npm - @intlayer/design-system - Versions diffs - 8.4.8 → 8.4.10 - Mend

@intlayer/design-system 8.4.8 → 8.4.10

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

package/dist/esm/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.mjs CHANGED Viewed

@@ -1,9 +1,9 @@
 import { Button, ButtonColor, ButtonTextAlign, ButtonVariant } from "../../Button/Button.mjs";
 import { Accordion } from "../../Accordion/Accordion.mjs";
 import { getIsEditableSection } from "../getIsEditableSection.mjs";
+import configuration from "@intlayer/config/built";
 import { ChevronRight, Plus } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import configuration from "@intlayer/config/built";
 import { useIntlayer } from "react-intlayer";
 import { useEditedContentActions, useEditorLocale, useFocusUnmergedDictionary } from "@intlayer/editor-react";
 import { getContentNodeByKeyPath, getEmptyNode, getNodeType } from "@intlayer/core/dictionaryManipulator";

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

@@ -98,7 +98,11 @@ const createLinkRenderer = (locale) => {
 	});
 };
 const PreRenderer = (props) => /* @__PURE__ */ jsx(Fragment$1, { children: props.children });
-const TableRenderer = (props) => /* @__PURE__ */ jsx(Table, { ...props });
+const TableRenderer = (props) => /* @__PURE__ */ jsx(Table, {
+	isRollable: true,
+	displayModal: true,
+	...props
+});
 const ThRenderer = ({ className, ...props }) => /* @__PURE__ */ jsx("th", {
 	className: cn("border-neutral border-b bg-neutral/10 p-4", className),
 	...props

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MarkDownRender.mjs","names":[],"sources":["../../../../src/components/MarkDownRender/MarkDownRender.tsx"],"sourcesContent":["import type { LocalesValues } from '@intlayer/types/module_augmentation';\nimport { cn } from '@utils/cn';\nimport type { ComponentProps, ComponentPropsWithoutRef, FC } from 'react';\nimport { memo } from 'react';\nimport {\n type MarkdownRenderer as MarkdownRendererIntlayer,\n renderMarkdown,\n} from 'react-intlayer';\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport { H1, H2, H3, H4, H5, H6 } from '../Headers';\nimport { Code } from '../IDE/Code';\nimport { CodeProvider } from '../IDE/CodeContext';\nimport { Link } from '../Link';\nimport { Tab } from '../Tab';\nimport { TabProvider } from '../Tab/TabContext';\nimport { Table } from '../Table';\n\n// Extracted, stable component renderers\nconst H1Renderer = (props: ComponentProps<'h1'>) => (\n <H1 isClickable className=\"text-text\" {...props} />\n);\nconst H2Renderer = (props: ComponentProps<'h2'>) => (\n <H2 isClickable className=\"mt-16 text-text\" {...props} />\n);\nconst H3Renderer = (props: ComponentProps<'h3'>) => (\n <H3 isClickable className=\"mt-5 text-text\" {...props} />\n);\nconst H4Renderer = (props: ComponentProps<'h4'>) => (\n <H4 isClickable className=\"mt-3 text-text\" {...props} />\n);\nconst H5Renderer = (props: ComponentProps<'h5'>) => (\n <H5 isClickable className=\"mt-3 text-text\" {...props} />\n);\nconst H6Renderer = (props: ComponentProps<'h6'>) => (\n <H6 isClickable className=\"mt-3 text-text\" {...props} />\n);\nconst StrongRenderer = (props: ComponentProps<'strong'>) => (\n <strong className=\"text-text\" {...props} />\n);\n\nconst MemoizedCodeBlock = memo(\n ({\n className,\n children,\n isDarkMode,\n ...rest\n }: ComponentProps<'code'> & { isDarkMode?: boolean }) => {\n const content = String(children ?? '').replace(/\\n$/, '');\n const isBlock = !!className;\n\n if (!isBlock) {\n const decodedContent = content.replace(\n /&(?:amp;)?#(\\d+);/g,\n (_, code: string) => String.fromCharCode(parseInt(code, 10))\n );\n return (\n <code className=\"rounded-md border border-neutral/30 bg-card/60 box-decoration-clone px-1.5 py-0.5 font-mono text-sm\">\n {decodedContent}\n </code>\n );\n }\n\n const language = (className?.replace(/lang(?:uage)?-/, '') \|\|\n 'plaintext') as BundledLanguage;\n\n return (\n <Code {...rest} language={language} showHeader isDarkMode={isDarkMode}>\n {content}\n </Code>\n );\n },\n (prevProps, nextProps) =>\n prevProps.children === nextProps.children &&\n prevProps.className === nextProps.className &&\n prevProps.isDarkMode === nextProps.isDarkMode\n);\n\nconst createCodeRenderer = (isDarkMode?: boolean) => {\n return function CodeWrapper(props: ComponentProps<'code'>) {\n return <MemoizedCodeBlock {...props} isDarkMode={isDarkMode} />;\n };\n};\n\nconst BlockquoteRenderer = ({\n className,\n ...props\n}: ComponentProps<'blockquote'>) => (\n <blockquote\n className={cn(\n 'mt-5 gap-3 border-card border-l-4 pl-5 text-neutral [&_strong]:text-neutral',\n className\n )}\n {...props}\n />\n);\n\nconst UlRenderer = ({ className, ...props }: ComponentProps<'ul'>) => (\n <ul\n className={cn(\n 'mt-5 flex list-disc flex-col gap-3 pl-5 marker:text-neutral/80',\n className\n )}\n {...props}\n />\n);\n\nconst OlRenderer = ({ className, ...props }: ComponentProps<'ol'>) => (\n <ol\n className={cn(\n 'mt-5 flex list-decimal flex-col gap-3 pl-5 marker:text-neutral/80',\n className\n )}\n {...props}\n />\n);\n\nconst ImgRenderer = ({\n className,\n alt,\n src,\n ...props\n}: ComponentProps<'img'>) => (\n <img\n {...props}\n alt={alt ?? ''}\n loading=\"lazy\"\n className={cn('max-h-[80vh] max-w-full rounded-md', className)}\n src={\n src?.includes('github.com')\n ? src\n ?.replace('github.com', 'raw.githubusercontent.com')\n .replace('/blob/', '/') // GitHub raw URLs do not use /blob/\n : src\n }\n />\n);\n\nconst createLinkRenderer = (locale?: LocalesValues) => {\n return (props: ComponentProps<'a'>) => (\n <Link\n isExternalLink={props.href?.startsWith('http')}\n underlined\n locale={locale}\n label=\"\"\n color=\"text\"\n {...(props as any)}\n />\n );\n};\n\nconst PreRenderer = (props: ComponentProps<'pre'>) => <>{props.children}</>;\nconst TableRenderer = (props: ComponentProps<typeof Table>) => (\n <Table {...props} />\n);\nconst ThRenderer = ({ className, ...props }: ComponentProps<'th'>) => (\n <th\n className={cn('border-neutral border-b bg-neutral/10 p-4', className)}\n {...props}\n />\n);\nconst TrRenderer = ({ className, ...props }: ComponentProps<'tr'>) => (\n <tr className={cn('hover:/10 hover:bg-neutral/10', className)} {...props} />\n);\nconst TdRenderer = ({ className, ...props }: ComponentProps<'td'>) => (\n <td\n className={cn('border-neutral-500/50 border-b p-4', className)}\n {...props}\n />\n);\nconst HrRenderer = ({ className, ...props }: ComponentProps<'hr'>) => (\n <hr className={cn('mx-6 mt-16 text-neutral', className)} {...props} />\n);\n\nconst TabsRenderer = (props: ComponentProps<typeof Tab>) => (\n <Tab\n {...props}\n className=\"rounded-xl border border-card\"\n headerClassName=\"sticky rounded-xl top-24 z-5 bg-background/70 backdrop-blur overflow-x-auto\"\n />\n);\nconst ColumnsRenderer = ({\n className,\n ...props\n}: ComponentPropsWithoutRef<'div'>) => (\n <div className={cn('flex gap-4 max-md:flex-col', className)} {...props} />\n);\nconst ColumnRenderer = ({\n className,\n ...props\n}: ComponentPropsWithoutRef<'div'>) => (\n <div className={cn('flex-1', className)} {...props} />\n);\n\n// Static configuration object for static renderers\nconst staticMarkdownComponents = {\n h1: H1Renderer,\n h2: H2Renderer,\n h3: H3Renderer,\n h4: H4Renderer,\n h5: H5Renderer,\n h6: H6Renderer,\n strong: StrongRenderer,\n blockquote: BlockquoteRenderer,\n ul: UlRenderer,\n ol: OlRenderer,\n img: ImgRenderer,\n pre: PreRenderer,\n table: TableRenderer,\n th: ThRenderer,\n tr: TrRenderer,\n td: TdRenderer,\n hr: HrRenderer,\n Tabs: TabsRenderer,\n Tab: Tab.Item,\n Columns: ColumnsRenderer,\n Column: ColumnRenderer,\n};\n\n// Factory function to create components with dynamic props\nconst createMarkdownComponents = (\n isDarkMode?: boolean,\n locale?: LocalesValues\n) => ({\n ...staticMarkdownComponents,\n code: createCodeRenderer(isDarkMode),\n a: createLinkRenderer(locale),\n});\n\n// Export static renderers for backward compatibility\nexport const baseMarkdownComponents = staticMarkdownComponents;\n\ntype MarkdownRendererProps = {\n children: string;\n isDarkMode?: boolean;\n locale?: LocalesValues;\n forceBlock?: boolean;\n preserveFrontmatter?: boolean;\n tagfilter?: boolean;\n components?: ComponentProps<typeof MarkdownRendererIntlayer>['components'];\n wrapper?: ComponentProps<typeof MarkdownRendererIntlayer>['wrapper'];\n};\n\nexport const getIntlayerMarkdownOptions = (_isDarkMode?: boolean) => ({\n components: baseMarkdownComponents,\n});\n\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n children,\n isDarkMode = false,\n locale,\n forceBlock,\n preserveFrontmatter,\n tagfilter,\n components: componentsProp,\n wrapper,\n}) => {\n const markdownComponents = createMarkdownComponents(isDarkMode, locale);\n\n const markdownContent = renderMarkdown(children, {\n components: {\n ...markdownComponents,\n ...componentsProp,\n },\n wrapper,\n forceBlock,\n preserveFrontmatter,\n tagfilter,\n });\n\n return (\n <CodeProvider>\n <TabProvider>{markdownContent}</TabProvider>\n </CodeProvider>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"MarkDownRender.mjs","names":[],"sources":["../../../../src/components/MarkDownRender/MarkDownRender.tsx"],"sourcesContent":["import type { LocalesValues } from '@intlayer/types/module_augmentation';\nimport { cn } from '@utils/cn';\nimport type { ComponentProps, ComponentPropsWithoutRef, FC } from 'react';\nimport { memo } from 'react';\nimport {\n type MarkdownRenderer as MarkdownRendererIntlayer,\n renderMarkdown,\n} from 'react-intlayer';\nimport type { BundledLanguage } from 'shiki/bundle/web';\nimport { H1, H2, H3, H4, H5, H6 } from '../Headers';\nimport { Code } from '../IDE/Code';\nimport { CodeProvider } from '../IDE/CodeContext';\nimport { Link } from '../Link';\nimport { Tab } from '../Tab';\nimport { TabProvider } from '../Tab/TabContext';\nimport { Table } from '../Table';\n\n// Extracted, stable component renderers\nconst H1Renderer = (props: ComponentProps<'h1'>) => (\n <H1 isClickable className=\"text-text\" {...props} />\n);\nconst H2Renderer = (props: ComponentProps<'h2'>) => (\n <H2 isClickable className=\"mt-16 text-text\" {...props} />\n);\nconst H3Renderer = (props: ComponentProps<'h3'>) => (\n <H3 isClickable className=\"mt-5 text-text\" {...props} />\n);\nconst H4Renderer = (props: ComponentProps<'h4'>) => (\n <H4 isClickable className=\"mt-3 text-text\" {...props} />\n);\nconst H5Renderer = (props: ComponentProps<'h5'>) => (\n <H5 isClickable className=\"mt-3 text-text\" {...props} />\n);\nconst H6Renderer = (props: ComponentProps<'h6'>) => (\n <H6 isClickable className=\"mt-3 text-text\" {...props} />\n);\nconst StrongRenderer = (props: ComponentProps<'strong'>) => (\n <strong className=\"text-text\" {...props} />\n);\n\nconst MemoizedCodeBlock = memo(\n ({\n className,\n children,\n isDarkMode,\n ...rest\n }: ComponentProps<'code'> & { isDarkMode?: boolean }) => {\n const content = String(children ?? '').replace(/\\n$/, '');\n const isBlock = !!className;\n\n if (!isBlock) {\n const decodedContent = content.replace(\n /&(?:amp;)?#(\\d+);/g,\n (_, code: string) => String.fromCharCode(parseInt(code, 10))\n );\n return (\n <code className=\"rounded-md border border-neutral/30 bg-card/60 box-decoration-clone px-1.5 py-0.5 font-mono text-sm\">\n {decodedContent}\n </code>\n );\n }\n\n const language = (className?.replace(/lang(?:uage)?-/, '') \|\|\n 'plaintext') as BundledLanguage;\n\n return (\n <Code {...rest} language={language} showHeader isDarkMode={isDarkMode}>\n {content}\n </Code>\n );\n },\n (prevProps, nextProps) =>\n prevProps.children === nextProps.children &&\n prevProps.className === nextProps.className &&\n prevProps.isDarkMode === nextProps.isDarkMode\n);\n\nconst createCodeRenderer = (isDarkMode?: boolean) => {\n return function CodeWrapper(props: ComponentProps<'code'>) {\n return <MemoizedCodeBlock {...props} isDarkMode={isDarkMode} />;\n };\n};\n\nconst BlockquoteRenderer = ({\n className,\n ...props\n}: ComponentProps<'blockquote'>) => (\n <blockquote\n className={cn(\n 'mt-5 gap-3 border-card border-l-4 pl-5 text-neutral [&_strong]:text-neutral',\n className\n )}\n {...props}\n />\n);\n\nconst UlRenderer = ({ className, ...props }: ComponentProps<'ul'>) => (\n <ul\n className={cn(\n 'mt-5 flex list-disc flex-col gap-3 pl-5 marker:text-neutral/80',\n className\n )}\n {...props}\n />\n);\n\nconst OlRenderer = ({ className, ...props }: ComponentProps<'ol'>) => (\n <ol\n className={cn(\n 'mt-5 flex list-decimal flex-col gap-3 pl-5 marker:text-neutral/80',\n className\n )}\n {...props}\n />\n);\n\nconst ImgRenderer = ({\n className,\n alt,\n src,\n ...props\n}: ComponentProps<'img'>) => (\n <img\n {...props}\n alt={alt ?? ''}\n loading=\"lazy\"\n className={cn('max-h-[80vh] max-w-full rounded-md', className)}\n src={\n src?.includes('github.com')\n ? src\n ?.replace('github.com', 'raw.githubusercontent.com')\n .replace('/blob/', '/') // GitHub raw URLs do not use /blob/\n : src\n }\n />\n);\n\nconst createLinkRenderer = (locale?: LocalesValues) => {\n return (props: ComponentProps<'a'>) => (\n <Link\n isExternalLink={props.href?.startsWith('http')}\n underlined\n locale={locale}\n label=\"\"\n color=\"text\"\n {...(props as any)}\n />\n );\n};\n\nconst PreRenderer = (props: ComponentProps<'pre'>) => <>{props.children}</>;\nconst TableRenderer = (props: ComponentProps<typeof Table>) => (\n <Table isRollable displayModal {...props} />\n);\nconst ThRenderer = ({ className, ...props }: ComponentProps<'th'>) => (\n <th\n className={cn('border-neutral border-b bg-neutral/10 p-4', className)}\n {...props}\n />\n);\nconst TrRenderer = ({ className, ...props }: ComponentProps<'tr'>) => (\n <tr className={cn('hover:/10 hover:bg-neutral/10', className)} {...props} />\n);\nconst TdRenderer = ({ className, ...props }: ComponentProps<'td'>) => (\n <td\n className={cn('border-neutral-500/50 border-b p-4', className)}\n {...props}\n />\n);\nconst HrRenderer = ({ className, ...props }: ComponentProps<'hr'>) => (\n <hr className={cn('mx-6 mt-16 text-neutral', className)} {...props} />\n);\n\nconst TabsRenderer = (props: ComponentProps<typeof Tab>) => (\n <Tab\n {...props}\n className=\"rounded-xl border border-card\"\n headerClassName=\"sticky rounded-xl top-24 z-5 bg-background/70 backdrop-blur overflow-x-auto\"\n />\n);\nconst ColumnsRenderer = ({\n className,\n ...props\n}: ComponentPropsWithoutRef<'div'>) => (\n <div className={cn('flex gap-4 max-md:flex-col', className)} {...props} />\n);\nconst ColumnRenderer = ({\n className,\n ...props\n}: ComponentPropsWithoutRef<'div'>) => (\n <div className={cn('flex-1', className)} {...props} />\n);\n\n// Static configuration object for static renderers\nconst staticMarkdownComponents = {\n h1: H1Renderer,\n h2: H2Renderer,\n h3: H3Renderer,\n h4: H4Renderer,\n h5: H5Renderer,\n h6: H6Renderer,\n strong: StrongRenderer,\n blockquote: BlockquoteRenderer,\n ul: UlRenderer,\n ol: OlRenderer,\n img: ImgRenderer,\n pre: PreRenderer,\n table: TableRenderer,\n th: ThRenderer,\n tr: TrRenderer,\n td: TdRenderer,\n hr: HrRenderer,\n Tabs: TabsRenderer,\n Tab: Tab.Item,\n Columns: ColumnsRenderer,\n Column: ColumnRenderer,\n};\n\n// Factory function to create components with dynamic props\nconst createMarkdownComponents = (\n isDarkMode?: boolean,\n locale?: LocalesValues\n) => ({\n ...staticMarkdownComponents,\n code: createCodeRenderer(isDarkMode),\n a: createLinkRenderer(locale),\n});\n\n// Export static renderers for backward compatibility\nexport const baseMarkdownComponents = staticMarkdownComponents;\n\ntype MarkdownRendererProps = {\n children: string;\n isDarkMode?: boolean;\n locale?: LocalesValues;\n forceBlock?: boolean;\n preserveFrontmatter?: boolean;\n tagfilter?: boolean;\n components?: ComponentProps<typeof MarkdownRendererIntlayer>['components'];\n wrapper?: ComponentProps<typeof MarkdownRendererIntlayer>['wrapper'];\n};\n\nexport const getIntlayerMarkdownOptions = (_isDarkMode?: boolean) => ({\n components: baseMarkdownComponents,\n});\n\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n children,\n isDarkMode = false,\n locale,\n forceBlock,\n preserveFrontmatter,\n tagfilter,\n components: componentsProp,\n wrapper,\n}) => {\n const markdownComponents = createMarkdownComponents(isDarkMode, locale);\n\n const markdownContent = renderMarkdown(children, {\n components: {\n ...markdownComponents,\n ...componentsProp,\n },\n wrapper,\n forceBlock,\n preserveFrontmatter,\n tagfilter,\n });\n\n return (\n <CodeProvider>\n <TabProvider>{markdownContent}</TabProvider>\n </CodeProvider>\n );\n};\n"],"mappings":"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"}

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

@@ -4,11 +4,14 @@ import { cn } from "../../utils/cn.mjs";
 import { Button } from "../Button/Button.mjs";
 import { ExpandCollapse } from "../ExpandCollapse/ExpandCollapse.mjs";
 import { Modal, ModalSize } from "../Modal/Modal.mjs";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { MoveDiagonal } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/Table/Table.tsx
+const CHAR_WIDTH_REM = .55;
+const MIN_WIDTH_REM = 5;
+const MAX_WIDTH_REM = 30;
 /**
 * Table component that provides an enhanced table experience with modal expansion and collapsible content
 *
@@ -148,8 +151,39 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 */
 const Table = ({ className, isRollable = false, displayModal, ...props }) => {
 	const [isModalOpen, setIsModalOpen] = useState(false);
+	const tableRef = useRef(null);
+	const modalTableRef = useRef(null);
+	useEffect(() => {
+		if (!tableRef.current) return;
+		const colLengths = [];
+		Array.from(tableRef.current.querySelectorAll("tr")).forEach((row) => {
+			Array.from(row.children).forEach((cell, index) => {
+				const len = cell.textContent?.trim().length ?? 0;
+				if (colLengths[index] === void 0 || len > colLengths[index]) colLengths[index] = len;
+			});
+		});
+		const applyToTable = (table) => {
+			const rows = Array.from(table.querySelectorAll("tr"));
+			if (rows.length === 0) return;
+			const applyColStyle = (el, index) => {
+				const minRem = Math.min(MAX_WIDTH_REM, Math.max(MIN_WIDTH_REM, (colLengths[index] ?? 0) * CHAR_WIDTH_REM));
+				el.style.minWidth = `${minRem}rem`;
+				el.style.maxWidth = `${MAX_WIDTH_REM}rem`;
+			};
+			table.querySelectorAll("th").forEach((th, index) => {
+				applyColStyle(th, index);
+			});
+			rows.forEach((row) => {
+				row.querySelectorAll("td").forEach((td, index) => {
+					applyColStyle(td, index);
+				});
+			});
+		};
+		applyToTable(tableRef.current);
+		if (modalTableRef.current) applyToTable(modalTableRef.current);
+	}, [props.children, isModalOpen]);
 	return /* @__PURE__ */ jsxs("div", {
-		className: "relative",
+		className: "relative overflow-hidden rounded-2xl bg-background pr-4 [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl",
 		children: [
 			displayModal && /* @__PURE__ */ jsx("div", {
 				className: "sticky top-48 z-10",
@@ -170,7 +204,8 @@ const Table = ({ className, isRollable = false, displayModal, ...props }) => {
 				isRollable,
 				className: "max-w-full overflow-x-auto",
 				children: /* @__PURE__ */ jsx("table", {
-					className: cn("min-w-full max-w-full table-auto overflow-x-auto bg-background text-left", className),
+					ref: tableRef,
+					className: cn("w-full table-auto text-left", className),
 					...props
 				})
 			}),
@@ -179,9 +214,11 @@ const Table = ({ className, isRollable = false, displayModal, ...props }) => {
 				onClose: () => setIsModalOpen(false),
 				size: ModalSize.XL,
 				hasCloseButton: true,
+				isScrollable: true,
 				children: isModalOpen ? /* @__PURE__ */ jsx("div", {
 					className: "grid",
 					children: /* @__PURE__ */ jsx("table", {
+						ref: modalTableRef,
 						className: cn("min-w-full max-w-full table-auto text-left", className),
 						...props
 					})

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.mjs","names":[],"sources":["../../../../src/components/Table/Table.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { MoveDiagonal } from 'lucide-react';\nimport { type FC, type HTMLAttributes, useState } from 'react';\nimport { Button } from '../Button';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { Modal, ModalSize } from '../Modal';\n\n/*\n Properties for the Table component that extends standard HTML table attributes\n \n @interface TableProps\n * @extends {HTMLAttributes<HTMLTableElement>}\n \n @property {boolean} [isRollable] - Whether the table content can be collapsed/expanded using the ExpandCollapse wrapper\n * @property {string} [className] - Additional CSS classes for custom styling\n * @property {ReactNode} children - The table content including thead, tbody, tfoot elements\n \n @example\n * ```tsx\n * // Basic table usage\n * <Table>\n * <thead>\n * <tr>\n * <th>Name</th>\n * <th>Email</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <td>John Doe</td>\n * <td>john@example.com</td>\n * </tr>\n * </tbody>\n * </Table>\n \n // Collapsible table with custom styling\n * <Table isRollable className=\"border border-gray-300 rounded-lg\">\n * <thead>\n * <tr>\n * <th>Product</th>\n * <th>Price</th>\n * <th>Stock</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <td>Laptop</td>\n * <td>$999</td>\n * <td>15</td>\n * </tr>\n * </tbody>\n * </Table>\n * ```\n /\ntype TableProps = HTMLAttributes<HTMLTableElement> & {\n isRollable?: boolean;\n displayModal?: boolean;\n};\n\n/\n Table component that provides an enhanced table experience with modal expansion and collapsible content\n \n The Table component wraps a standard HTML table element with additional functionality:\n * - Modal Expansion: Click the diagonal arrow button to view the table in a full-screen modal\n * - Collapsible Content: Optionally wrap content in an ExpandCollapse component for space-saving\n * - Responsive Design: Handles large tables gracefully with modal overflow\n * - Sticky Controls: Table controls remain accessible even when scrolling\n \n ## Features\n * - Modal View: Full-screen modal for better viewing of large tables\n * - Expand/Collapse: Optional collapsible wrapper to save space\n * - Responsive: Handles overflow and responsive behavior automatically\n * - Accessibility: Maintains proper table semantics and keyboard navigation\n * - Customizable: Supports all standard HTML table attributes and styling\n \n ## Best Practices\n * - Use semantic HTML table structure (thead, tbody, tfoot)\n * - Provide proper column headers with scope attributes\n * - Use the isRollable prop for large tables that might need space management\n * - Apply consistent styling through the className prop\n * - Consider pagination for very large datasets\n \n @param {TableProps} props - The properties for the Table component\n * @returns {JSX.Element} The rendered table with enhanced functionality\n \n @example\n * ```tsx\n * // Simple data table\n * <Table>\n * <thead>\n * <tr>\n * <th scope=\"col\">Name</th>\n * <th scope=\"col\">Email</th>\n * <th scope=\"col\">Status</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <td>John Doe</td>\n * <td>john@example.com</td>\n * <td>\n * <span className=\"px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs\">\n * Active\n * </span>\n * </td>\n * </tr>\n * <tr>\n * <td>Jane Smith</td>\n * <td>jane@example.com</td>\n * <td>\n * <span className=\"px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs\">\n * Pending\n * </span>\n * </td>\n * </tr>\n * </tbody>\n * </Table>\n \n // Large collapsible table with custom styling\n * <Table\n * isRollable\n * className=\"border border-gray-200 rounded-lg overflow-hidden\"\n * >\n * <thead className=\"bg-gray-50\">\n * <tr>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Product ID\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Name\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Category\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Price\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Stock\n * </th>\n * </tr>\n * </thead>\n * <tbody className=\"bg-white divide-y divide-gray-200\">\n * {products.map((product) => (\n * <tr key={product.id} className=\"hover:bg-gray-50\">\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-900\">\n * #{product.id}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900\">\n * {product.name}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n * {product.category}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-900\">\n * ${product.price.toFixed(2)}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n * {product.stock} units\n * </td>\n * </tr>\n * ))}\n * </tbody>\n * </Table>\n \n // Financial data table with formatted numbers\n * <Table className=\"w-full border-collapse\">\n * <thead>\n * <tr className=\"border-b-2 border-gray-300\">\n * <th scope=\"col\" className=\"text-left py-3 px-4\">Quarter</th>\n * <th scope=\"col\" className=\"text-right py-3 px-4\">Revenue</th>\n * <th scope=\"col\" className=\"text-right py-3 px-4\">Profit</th>\n * <th scope=\"col\" className=\"text-right py-3 px-4\">Growth</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr className=\"border-b border-gray-200\">\n * <td className=\"py-3 px-4 font-medium\">Q1 2024</td>\n * <td className=\"py-3 px-4 text-right\">$2,450,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">$345,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">+12.5%</td>\n * </tr>\n * <tr className=\"border-b border-gray-200\">\n * <td className=\"py-3 px-4 font-medium\">Q2 2024</td>\n * <td className=\"py-3 px-4 text-right\">$2,780,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">$398,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">+13.5%</td>\n * </tr>\n * </tbody>\n * </Table>\n * ```\n \n @see {@link ExpandCollapse} - Component used for collapsible table content\n * @see {@link Modal} - Component used for full-screen table view\n * @see {@link Button} - Component used for the modal trigger button\n */\nexport const Table: FC<TableProps> = ({\n className,\n isRollable = false,\n displayModal,\n ...props\n}) => {\n const [isModalOpen, setIsModalOpen] = useState(false);\n\n return (\n <div className=\"relative\">\n {displayModal && (\n <div className=\"sticky top-48 z-10\">\n <div className=\"absolute top-4 right-2\">\n <Button\n variant=\"hoverable\"\n size=\"icon-md\"\n onClick={() => {\n setIsModalOpen(true);\n }}\n label=\"Move\"\n Icon={MoveDiagonal}\n />\n </div>\n </div>\n )}\n <ExpandCollapse\n isRollable={isRollable}\n className=\"max-w-full overflow-x-auto\"\n >\n <table\n className={cn(\n 'min-w-full max-w-full table-auto overflow-x-auto bg-background text-left',\n className\n )}\n {...props}\n />\n </ExpandCollapse>\n\n <Modal\n isOpen={isModalOpen}\n onClose={() => setIsModalOpen(false)}\n size={ModalSize.XL}\n hasCloseButton\n >\n {isModalOpen ? (\n <div className=\"grid\">\n <table\n className={cn(\n 'min-w-full max-w-full table-auto text-left',\n className\n )}\n {...props}\n />\n </div>\n ) : (\n <></>\n )}\n </Modal>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsMA,MAAa,SAAyB,EACpC,WACA,aAAa,OACb,cACA,GAAG,YACC;CACJ,MAAM,CAAC,aAAa,kBAAkB,SAAS,MAAM;AAErD,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACG,gBACC,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,QAAD;MACE,SAAQ;MACR,MAAK;MACL,eAAe;AACb,sBAAe,KAAK;;MAEtB,OAAM;MACN,MAAM;MACN;KACE;IACF;GAER,oBAAC,gBAAD;IACc;IACZ,WAAU;cAEV,oBAAC,SAAD;KACE,WAAW,GACT,4EACA,UACD;KACD,GAAI;KACJ;IACa;GAEjB,oBAAC,OAAD;IACE,QAAQ;IACR,eAAe,eAAe,MAAM;IACpC,MAAM,UAAU;IAChB;cAEC,cACC,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,SAAD;MACE,WAAW,GACT,8CACA,UACD;MACD,GAAI;MACJ;KACE,IAEN,kCAAK;IAED;GACJ"}
1	+ {"version":3,"file":"Table.mjs","names":[],"sources":["../../../../src/components/Table/Table.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { MoveDiagonal } from 'lucide-react';\nimport {\n type FC,\n type HTMLAttributes,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport { Button } from '../Button';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { Modal, ModalSize } from '../Modal';\n\n/*\n Properties for the Table component that extends standard HTML table attributes\n \n @interface TableProps\n * @extends {HTMLAttributes<HTMLTableElement>}\n \n @property {boolean} [isRollable] - Whether the table content can be collapsed/expanded using the ExpandCollapse wrapper\n * @property {string} [className] - Additional CSS classes for custom styling\n * @property {ReactNode} children - The table content including thead, tbody, tfoot elements\n \n @example\n * ```tsx\n * // Basic table usage\n * <Table>\n * <thead>\n * <tr>\n * <th>Name</th>\n * <th>Email</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <td>John Doe</td>\n * <td>john@example.com</td>\n * </tr>\n * </tbody>\n * </Table>\n \n // Collapsible table with custom styling\n * <Table isRollable className=\"border border-gray-300 rounded-lg\">\n * <thead>\n * <tr>\n * <th>Product</th>\n * <th>Price</th>\n * <th>Stock</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <td>Laptop</td>\n * <td>$999</td>\n * <td>15</td>\n * </tr>\n * </tbody>\n * </Table>\n * ```\n /\ntype TableProps = HTMLAttributes<HTMLTableElement> & {\n isRollable?: boolean;\n displayModal?: boolean;\n};\n\n// ~0.55rem per character (mid-point for proportional fonts)\nconst CHAR_WIDTH_REM = 0.55;\nconst MIN_WIDTH_REM = 5; // ~80px at 16px base\nconst MAX_WIDTH_REM = 30; // ~480px at 16px base\n\n/\n Table component that provides an enhanced table experience with modal expansion and collapsible content\n \n The Table component wraps a standard HTML table element with additional functionality:\n * - Modal Expansion: Click the diagonal arrow button to view the table in a full-screen modal\n * - Collapsible Content: Optionally wrap content in an ExpandCollapse component for space-saving\n * - Responsive Design: Handles large tables gracefully with modal overflow\n * - Sticky Controls: Table controls remain accessible even when scrolling\n \n ## Features\n * - Modal View: Full-screen modal for better viewing of large tables\n * - Expand/Collapse: Optional collapsible wrapper to save space\n * - Responsive: Handles overflow and responsive behavior automatically\n * - Accessibility: Maintains proper table semantics and keyboard navigation\n * - Customizable: Supports all standard HTML table attributes and styling\n \n ## Best Practices\n * - Use semantic HTML table structure (thead, tbody, tfoot)\n * - Provide proper column headers with scope attributes\n * - Use the isRollable prop for large tables that might need space management\n * - Apply consistent styling through the className prop\n * - Consider pagination for very large datasets\n \n @param {TableProps} props - The properties for the Table component\n * @returns {JSX.Element} The rendered table with enhanced functionality\n \n @example\n * ```tsx\n * // Simple data table\n * <Table>\n * <thead>\n * <tr>\n * <th scope=\"col\">Name</th>\n * <th scope=\"col\">Email</th>\n * <th scope=\"col\">Status</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr>\n * <td>John Doe</td>\n * <td>john@example.com</td>\n * <td>\n * <span className=\"px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs\">\n * Active\n * </span>\n * </td>\n * </tr>\n * <tr>\n * <td>Jane Smith</td>\n * <td>jane@example.com</td>\n * <td>\n * <span className=\"px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs\">\n * Pending\n * </span>\n * </td>\n * </tr>\n * </tbody>\n * </Table>\n \n // Large collapsible table with custom styling\n * <Table\n * isRollable\n * className=\"border border-gray-200 rounded-lg overflow-hidden\"\n * >\n * <thead className=\"bg-gray-50\">\n * <tr>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Product ID\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Name\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Category\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Price\n * </th>\n * <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n * Stock\n * </th>\n * </tr>\n * </thead>\n * <tbody className=\"bg-white divide-y divide-gray-200\">\n * {products.map((product) => (\n * <tr key={product.id} className=\"hover:bg-gray-50\">\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-900\">\n * #{product.id}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900\">\n * {product.name}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n * {product.category}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-900\">\n * ${product.price.toFixed(2)}\n * </td>\n * <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n * {product.stock} units\n * </td>\n * </tr>\n * ))}\n * </tbody>\n * </Table>\n \n // Financial data table with formatted numbers\n * <Table className=\"w-full border-collapse\">\n * <thead>\n * <tr className=\"border-b-2 border-gray-300\">\n * <th scope=\"col\" className=\"text-left py-3 px-4\">Quarter</th>\n * <th scope=\"col\" className=\"text-right py-3 px-4\">Revenue</th>\n * <th scope=\"col\" className=\"text-right py-3 px-4\">Profit</th>\n * <th scope=\"col\" className=\"text-right py-3 px-4\">Growth</th>\n * </tr>\n * </thead>\n * <tbody>\n * <tr className=\"border-b border-gray-200\">\n * <td className=\"py-3 px-4 font-medium\">Q1 2024</td>\n * <td className=\"py-3 px-4 text-right\">$2,450,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">$345,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">+12.5%</td>\n * </tr>\n * <tr className=\"border-b border-gray-200\">\n * <td className=\"py-3 px-4 font-medium\">Q2 2024</td>\n * <td className=\"py-3 px-4 text-right\">$2,780,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">$398,000</td>\n * <td className=\"py-3 px-4 text-right text-green-600\">+13.5%</td>\n * </tr>\n * </tbody>\n * </Table>\n * ```\n \n @see {@link ExpandCollapse} - Component used for collapsible table content\n * @see {@link Modal} - Component used for full-screen table view\n * @see {@link Button} - Component used for the modal trigger button\n /\nexport const Table: FC<TableProps> = ({\n className,\n isRollable = false,\n displayModal,\n ...props\n}) => {\n const [isModalOpen, setIsModalOpen] = useState(false);\n\n const tableRef = useRef<HTMLTableElement>(null);\n const modalTableRef = useRef<HTMLTableElement>(null);\n\n useEffect(() => {\n if (!tableRef.current) return;\n\n // Calculate the maximum character length per column from the main table\n const colLengths: number[] = [];\n Array.from(tableRef.current.querySelectorAll('tr')).forEach((row) => {\n Array.from(row.children).forEach((cell, index) => {\n const len = cell.textContent?.trim().length ?? 0;\n if (colLengths[index] === undefined \|\| len > colLengths[index]) {\n colLengths[index] = len;\n }\n });\n });\n\n const applyToTable = (table: HTMLTableElement) => {\n const rows = Array.from(table.querySelectorAll('tr'));\n if (rows.length === 0) return;\n\n const applyColStyle = (el: HTMLElement, index: number) => {\n const minRem = Math.min(\n MAX_WIDTH_REM,\n Math.max(MIN_WIDTH_REM, (colLengths[index] ?? 0) CHAR_WIDTH_REM)\n );\n el.style.minWidth = `${minRem}rem`;\n el.style.maxWidth = `${MAX_WIDTH_REM}rem`;\n };\n\n table.querySelectorAll('th').forEach((th, index) => {\n applyColStyle(th, index);\n });\n rows.forEach((row) => {\n row.querySelectorAll('td').forEach((td, index) => {\n applyColStyle(td, index);\n });\n });\n };\n\n applyToTable(tableRef.current);\n\n if (modalTableRef.current) applyToTable(modalTableRef.current);\n }, [props.children, isModalOpen]);\n\n return (\n <div className=\"relative overflow-hidden rounded-2xl bg-background pr-4 [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl\">\n {displayModal && (\n <div className=\"sticky top-48 z-10\">\n <div className=\"absolute top-4 right-2\">\n <Button\n variant=\"hoverable\"\n size=\"icon-md\"\n onClick={() => {\n setIsModalOpen(true);\n }}\n label=\"Move\"\n Icon={MoveDiagonal}\n />\n </div>\n </div>\n )}\n <ExpandCollapse\n isRollable={isRollable}\n className=\"max-w-full overflow-x-auto\"\n >\n <table\n ref={tableRef}\n className={cn('w-full table-auto text-left', className)}\n {...props}\n />\n </ExpandCollapse>\n\n <Modal\n isOpen={isModalOpen}\n onClose={() => setIsModalOpen(false)}\n size={ModalSize.XL}\n hasCloseButton\n isScrollable\n >\n {isModalOpen ? (\n <div className=\"grid\">\n <table\n ref={modalTableRef}\n className={cn(\n 'min-w-full max-w-full table-auto text-left',\n className\n )}\n {...props}\n />\n </div>\n ) : (\n <></>\n )}\n </Modal>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;;AAoEA,MAAM,iBAAiB;AACvB,MAAM,gBAAgB;AACtB,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2ItB,MAAa,SAAyB,EACpC,WACA,aAAa,OACb,cACA,GAAG,YACC;CACJ,MAAM,CAAC,aAAa,kBAAkB,SAAS,MAAM;CAErD,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,gBAAgB,OAAyB,KAAK;AAEpD,iBAAgB;AACd,MAAI,CAAC,SAAS,QAAS;EAGvB,MAAM,aAAuB,EAAE;AAC/B,QAAM,KAAK,SAAS,QAAQ,iBAAiB,KAAK,CAAC,CAAC,SAAS,QAAQ;AACnE,SAAM,KAAK,IAAI,SAAS,CAAC,SAAS,MAAM,UAAU;IAChD,MAAM,MAAM,KAAK,aAAa,MAAM,CAAC,UAAU;AAC/C,QAAI,WAAW,WAAW,UAAa,MAAM,WAAW,OACtD,YAAW,SAAS;KAEtB;IACF;EAEF,MAAM,gBAAgB,UAA4B;GAChD,MAAM,OAAO,MAAM,KAAK,MAAM,iBAAiB,KAAK,CAAC;AACrD,OAAI,KAAK,WAAW,EAAG;GAEvB,MAAM,iBAAiB,IAAiB,UAAkB;IACxD,MAAM,SAAS,KAAK,IAClB,eACA,KAAK,IAAI,gBAAgB,WAAW,UAAU,KAAK,eAAe,CACnE;AACD,OAAG,MAAM,WAAW,GAAG,OAAO;AAC9B,OAAG,MAAM,WAAW,GAAG,cAAc;;AAGvC,SAAM,iBAAiB,KAAK,CAAC,SAAS,IAAI,UAAU;AAClD,kBAAc,IAAI,MAAM;KACxB;AACF,QAAK,SAAS,QAAQ;AACpB,QAAI,iBAAiB,KAAK,CAAC,SAAS,IAAI,UAAU;AAChD,mBAAc,IAAI,MAAM;MACxB;KACF;;AAGJ,eAAa,SAAS,QAAQ;AAE9B,MAAI,cAAc,QAAS,cAAa,cAAc,QAAQ;IAC7D,CAAC,MAAM,UAAU,YAAY,CAAC;AAEjC,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACG,gBACC,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,QAAD;MACE,SAAQ;MACR,MAAK;MACL,eAAe;AACb,sBAAe,KAAK;;MAEtB,OAAM;MACN,MAAM;MACN;KACE;IACF;GAER,oBAAC,gBAAD;IACc;IACZ,WAAU;cAEV,oBAAC,SAAD;KACE,KAAK;KACL,WAAW,GAAG,+BAA+B,UAAU;KACvD,GAAI;KACJ;IACa;GAEjB,oBAAC,OAAD;IACE,QAAQ;IACR,eAAe,eAAe,MAAM;IACpC,MAAM,UAAU;IAChB;IACA;cAEC,cACC,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,SAAD;MACE,KAAK;MACL,WAAW,GACT,8CACA,UACD;MACD,GAAI;MACJ;KACE,IAEN,kCAAK;IAED;GACJ"}

package/dist/esm/hooks/useAuth/useOAuth2.mjs CHANGED Viewed

@@ -1,7 +1,7 @@
 'use client';
-import { useQuery } from "@tanstack/react-query";
 import configuration from "@intlayer/config/built";
+import { useQuery } from "@tanstack/react-query";
 import { useConfiguration } from "@intlayer/editor-react";
 import { getOAuthAPI } from "@intlayer/api";

package/dist/esm/hooks/useAuth/useSession.mjs CHANGED Viewed

@@ -2,8 +2,8 @@
 import { getAuthAPI } from "../../libs/auth.mjs";
 import { useQueryClient } from "../reactQuery.mjs";
-import { useQuery } from "@tanstack/react-query";
 import configuration from "@intlayer/config/built";
+import { useQuery } from "@tanstack/react-query";
 import { useConfiguration } from "@intlayer/editor-react";
 //#region src/hooks/useAuth/useSession.ts

package/dist/esm/providers/ReactQueryProvider.mjs CHANGED Viewed

@@ -27,10 +27,18 @@ const useToastEvents = () => {
 		[(() => {
 			try {
 				if (typeof error === "string") return JSON.parse(error);
+				if (error instanceof Error) return JSON.parse(error.message);
 			} catch (_) {}
 			return error;
 		})()].flat().forEach((err) => {
 			const apiError = err?.error ?? err;
+			if (apiError?.code === "RATE_LIMIT_EXCEEDED_UNAUTHENTICATED") {
+				toast({
+					title: apiError.message,
+					variant: "error"
+				});
+				return;
+			}
 			toast({
 				title: formatErrorCode(apiError?.title ?? err?.title ?? "Error"),
 				description: apiError?.message ?? err?.message ?? String(apiError ?? "An error occurred"),

package/dist/esm/providers/ReactQueryProvider.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ReactQueryProvider.mjs","names":[],"sources":["../../../src/providers/ReactQueryProvider.tsx"],"sourcesContent":["'use client';\n\nimport {\n type DefaultOptions,\n MutationCache,\n QueryClient,\n QueryClientProvider,\n type QueryKey,\n type UseMutationOptions,\n} from '@tanstack/react-query';\nimport { type FC, type PropsWithChildren, useRef } from 'react';\nimport { useToast } from '../components/Toaster';\n\nconst defaultQueryOptions: DefaultOptions = {\n queries: {\n retry: 1,\n // Keep data fresh for 30 seconds to avoid unnecessary refetches during navigation\n staleTime: 30 * 1000,\n // Give the cache a little breathing room across route transitions:\n gcTime: 5 * 60 * 1000, // e.g. 5 minutes\n // Only refetch on mount if data is stale (not every single mount)\n refetchOnMount: true,\n refetchOnWindowFocus: false,\n refetchOnReconnect: false,\n },\n mutations: {\n retry: 0,\n },\n};\n\nconst SHOW_ERROR_CODE = false;\n\ndeclare module '@tanstack/react-query' {\n interface Register {\n mutationMeta: {\n onSuccess?: UseMutationOptions['onSuccess'];\n onError?: UseMutationOptions['onError'];\n invalidateQueries?: QueryKey[];\n resetQueries?: QueryKey[];\n };\n }\n}\n\nconst formatErrorCode = (errorCode: string) => errorCode.split('_').join(' ');\n\n/*\n Hook to handle error logging and toast notifications\n */\nconst useToastEvents = () => {\n const { toast } = useToast();\n\n const onError: MutationCache['config']['onError'] = (error: any) => {\n const parsed = (() => {\n try {\n if (typeof error === 'string') return JSON.parse(error);\n } catch (_) {}\n return error;\n })();\n\n [parsed].flat().forEach((err: any) => {\n // Check for nested error object (standard in your API responses: { statusCode, error: { ... } })\n const apiError = err?.error ?? err;\n\n toast({\n title: formatErrorCode(\n SHOW_ERROR_CODE\n ? (apiError?.code ?? err?.code)\n : (apiError?.title ?? err?.title ?? 'Error')\n ),\n description:\n apiError?.message ??\n err?.message ??\n String(apiError ?? 'An error occurred'),\n variant: 'error',\n });\n });\n };\n\n const onSuccess: MutationCache['config']['onSuccess'] = (data: any) => {\n if (data?.error) {\n toast({\n title: formatErrorCode(data.error.title ?? data.error.code ?? 'Error'),\n description:\n data.error.message ?? data.error.code ?? 'An error occurred',\n variant: 'error',\n });\n }\n\n if (data?.message) {\n toast({\n title: data.message,\n description: data.description,\n variant: 'success',\n });\n }\n };\n\n return {\n onError,\n onSuccess,\n };\n};\n\nexport const ReactQueryProvider: FC<PropsWithChildren> = ({ children }) => {\n const { onError, onSuccess } = useToastEvents();\n const clientRef = useRef<QueryClient>(null);\n\n if (!clientRef.current) {\n const mutationCache = new MutationCache({\n onSuccess,\n onError,\n onSettled: (_data, _error, _variables, _context, mutation) => {\n if (mutation.meta?.invalidateQueries) {\n mutation.meta.invalidateQueries.forEach((queryKey) => {\n queryClient.invalidateQueries({\n queryKey,\n });\n });\n }\n\n if (mutation.meta?.resetQueries) {\n mutation.meta.resetQueries.forEach((queryKey) => {\n queryClient.resetQueries({\n queryKey,\n });\n });\n }\n },\n });\n\n const queryClient = new QueryClient({\n defaultOptions: defaultQueryOptions,\n mutationCache,\n });\n clientRef.current = queryClient;\n }\n\n return (\n <QueryClientProvider client={clientRef.current}>\n {children}\n </QueryClientProvider>\n );\n};\n"],"mappings":";;;;;;;;AAaA,MAAM,sBAAsC;CAC1C,SAAS;EACP,OAAO;EAEP,WAAW,KAAK;EAEhB,QAAQ,MAAS;EAEjB,gBAAgB;EAChB,sBAAsB;EACtB,oBAAoB;EACrB;CACD,WAAW,EACT,OAAO,GACR;CACF;AAeD,MAAM,mBAAmB,cAAsB,UAAU,MAAM,IAAI,CAAC,KAAK,IAAI;;;;AAK7E,MAAM,uBAAuB;CAC3B,MAAM,EAAE,UAAU,UAAU;CAE5B,MAAM,WAA+C,UAAe;~~AAQlE~~,~~UAPsB~~;AACpB,OAAI;AACF,QAAI,OAAO,UAAU,SAAU,QAAO,KAAK,MAAM,MAAM;~~YAChD~~,GAAG;AACZ,UAAO;MACL,CAEI,CAAC,MAAM,CAAC,SAAS,QAAa;GAEpC,MAAM,WAAW,KAAK,SAAS;AAE/B,SAAM;IACJ,OAAO,gBAGA,UAAU,SAAS,KAAK,SAAS,QACvC;IACD,aACE,UAAU,WACV,KAAK,WACL,OAAO,YAAY,oBAAoB;IACzC,SAAS;IACV,CAAC;IACF;;CAGJ,MAAM,aAAmD,SAAc;AACrE,MAAI,MAAM,MACR,OAAM;GACJ,OAAO,gBAAgB,KAAK,MAAM,SAAS,KAAK,MAAM,QAAQ,QAAQ;GACtE,aACE,KAAK,MAAM,WAAW,KAAK,MAAM,QAAQ;GAC3C,SAAS;GACV,CAAC;AAGJ,MAAI,MAAM,QACR,OAAM;GACJ,OAAO,KAAK;GACZ,aAAa,KAAK;GAClB,SAAS;GACV,CAAC;;AAIN,QAAO;EACL;EACA;EACD;;AAGH,MAAa,sBAA6C,EAAE,eAAe;CACzE,MAAM,EAAE,SAAS,cAAc,gBAAgB;CAC/C,MAAM,YAAY,OAAoB,KAAK;AAE3C,KAAI,CAAC,UAAU,SAAS;EAuBtB,MAAM,cAAc,IAAI,YAAY;GAClC,gBAAgB;GAChB,eAxBoB,IAAI,cAAc;IACtC;IACA;IACA,YAAY,OAAO,QAAQ,YAAY,UAAU,aAAa;AAC5D,SAAI,SAAS,MAAM,kBACjB,UAAS,KAAK,kBAAkB,SAAS,aAAa;AACpD,kBAAY,kBAAkB,EAC5B,UACD,CAAC;OACF;AAGJ,SAAI,SAAS,MAAM,aACjB,UAAS,KAAK,aAAa,SAAS,aAAa;AAC/C,kBAAY,aAAa,EACvB,UACD,CAAC;OACF;;IAGP,CAAC;GAKD,CAAC;AACF,YAAU,UAAU;;AAGtB,QACE,oBAAC,qBAAD;EAAqB,QAAQ,UAAU;EACpC;EACmB"}
1	+ {"version":3,"file":"ReactQueryProvider.mjs","names":[],"sources":["../../../src/providers/ReactQueryProvider.tsx"],"sourcesContent":["'use client';\n\nimport {\n type DefaultOptions,\n MutationCache,\n QueryClient,\n QueryClientProvider,\n type QueryKey,\n type UseMutationOptions,\n} from '@tanstack/react-query';\nimport { type FC, type PropsWithChildren, useRef } from 'react';\nimport { useToast } from '../components/Toaster';\n\nconst defaultQueryOptions: DefaultOptions = {\n queries: {\n retry: 1,\n // Keep data fresh for 30 seconds to avoid unnecessary refetches during navigation\n staleTime: 30 * 1000,\n // Give the cache a little breathing room across route transitions:\n gcTime: 5 * 60 * 1000, // e.g. 5 minutes\n // Only refetch on mount if data is stale (not every single mount)\n refetchOnMount: true,\n refetchOnWindowFocus: false,\n refetchOnReconnect: false,\n },\n mutations: {\n retry: 0,\n },\n};\n\nconst SHOW_ERROR_CODE = false;\n\ndeclare module '@tanstack/react-query' {\n interface Register {\n mutationMeta: {\n onSuccess?: UseMutationOptions['onSuccess'];\n onError?: UseMutationOptions['onError'];\n invalidateQueries?: QueryKey[];\n resetQueries?: QueryKey[];\n };\n }\n}\n\nconst formatErrorCode = (errorCode: string) => errorCode.split('_').join(' ');\n\n/*\n Hook to handle error logging and toast notifications\n */\nconst useToastEvents = () => {\n const { toast } = useToast();\n\n const onError: MutationCache['config']['onError'] = (error: any) => {\n const parsed = (() => {\n try {\n if (typeof error === 'string') return JSON.parse(error);\n if (error instanceof Error) return JSON.parse(error.message);\n } catch (_) {}\n return error;\n })();\n\n [parsed].flat().forEach((err: any) => {\n // Check for nested error object (standard in your API responses: { statusCode, error: { ... } })\n const apiError = err?.error ?? err;\n\n if (apiError?.code === 'RATE_LIMIT_EXCEEDED_UNAUTHENTICATED') {\n toast({\n title: apiError.message,\n variant: 'error',\n });\n return;\n }\n\n toast({\n title: formatErrorCode(\n SHOW_ERROR_CODE\n ? (apiError?.code ?? err?.code)\n : (apiError?.title ?? err?.title ?? 'Error')\n ),\n description:\n apiError?.message ??\n err?.message ??\n String(apiError ?? 'An error occurred'),\n variant: 'error',\n });\n });\n };\n\n const onSuccess: MutationCache['config']['onSuccess'] = (data: any) => {\n if (data?.error) {\n toast({\n title: formatErrorCode(data.error.title ?? data.error.code ?? 'Error'),\n description:\n data.error.message ?? data.error.code ?? 'An error occurred',\n variant: 'error',\n });\n }\n\n if (data?.message) {\n toast({\n title: data.message,\n description: data.description,\n variant: 'success',\n });\n }\n };\n\n return {\n onError,\n onSuccess,\n };\n};\n\nexport const ReactQueryProvider: FC<PropsWithChildren> = ({ children }) => {\n const { onError, onSuccess } = useToastEvents();\n const clientRef = useRef<QueryClient>(null);\n\n if (!clientRef.current) {\n const mutationCache = new MutationCache({\n onSuccess,\n onError,\n onSettled: (_data, _error, _variables, _context, mutation) => {\n if (mutation.meta?.invalidateQueries) {\n mutation.meta.invalidateQueries.forEach((queryKey) => {\n queryClient.invalidateQueries({\n queryKey,\n });\n });\n }\n\n if (mutation.meta?.resetQueries) {\n mutation.meta.resetQueries.forEach((queryKey) => {\n queryClient.resetQueries({\n queryKey,\n });\n });\n }\n },\n });\n\n const queryClient = new QueryClient({\n defaultOptions: defaultQueryOptions,\n mutationCache,\n });\n clientRef.current = queryClient;\n }\n\n return (\n <QueryClientProvider client={clientRef.current}>\n {children}\n </QueryClientProvider>\n );\n};\n"],"mappings":";;;;;;;;AAaA,MAAM,sBAAsC;CAC1C,SAAS;EACP,OAAO;EAEP,WAAW,KAAK;EAEhB,QAAQ,MAAS;EAEjB,gBAAgB;EAChB,sBAAsB;EACtB,oBAAoB;EACrB;CACD,WAAW,EACT,OAAO,GACR;CACF;AAeD,MAAM,mBAAmB,cAAsB,UAAU,MAAM,IAAI,CAAC,KAAK,IAAI;;;;AAK7E,MAAM,uBAAuB;CAC3B,MAAM,EAAE,UAAU,UAAU;CAE5B,MAAM,WAA+C,UAAe;AASlE,UARsB;AACpB,OAAI;AACF,QAAI,OAAO,UAAU,SAAU,QAAO,KAAK,MAAM,MAAM;AACvD,QAAI,iBAAiB,MAAO,QAAO,KAAK,MAAM,MAAM,QAAQ;YACrD,GAAG;AACZ,UAAO;MACL,CAEI,CAAC,MAAM,CAAC,SAAS,QAAa;GAEpC,MAAM,WAAW,KAAK,SAAS;AAE/B,OAAI,UAAU,SAAS,uCAAuC;AAC5D,UAAM;KACJ,OAAO,SAAS;KAChB,SAAS;KACV,CAAC;AACF;;AAGF,SAAM;IACJ,OAAO,gBAGA,UAAU,SAAS,KAAK,SAAS,QACvC;IACD,aACE,UAAU,WACV,KAAK,WACL,OAAO,YAAY,oBAAoB;IACzC,SAAS;IACV,CAAC;IACF;;CAGJ,MAAM,aAAmD,SAAc;AACrE,MAAI,MAAM,MACR,OAAM;GACJ,OAAO,gBAAgB,KAAK,MAAM,SAAS,KAAK,MAAM,QAAQ,QAAQ;GACtE,aACE,KAAK,MAAM,WAAW,KAAK,MAAM,QAAQ;GAC3C,SAAS;GACV,CAAC;AAGJ,MAAI,MAAM,QACR,OAAM;GACJ,OAAO,KAAK;GACZ,aAAa,KAAK;GAClB,SAAS;GACV,CAAC;;AAIN,QAAO;EACL;EACA;EACD;;AAGH,MAAa,sBAA6C,EAAE,eAAe;CACzE,MAAM,EAAE,SAAS,cAAc,gBAAgB;CAC/C,MAAM,YAAY,OAAoB,KAAK;AAE3C,KAAI,CAAC,UAAU,SAAS;EAuBtB,MAAM,cAAc,IAAI,YAAY;GAClC,gBAAgB;GAChB,eAxBoB,IAAI,cAAc;IACtC;IACA;IACA,YAAY,OAAO,QAAQ,YAAY,UAAU,aAAa;AAC5D,SAAI,SAAS,MAAM,kBACjB,UAAS,KAAK,kBAAkB,SAAS,aAAa;AACpD,kBAAY,kBAAkB,EAC5B,UACD,CAAC;OACF;AAGJ,SAAI,SAAS,MAAM,aACjB,UAAS,KAAK,aAAa,SAAS,aAAa;AAC/C,kBAAY,aAAa,EACvB,UACD,CAAC;OACF;;IAGP,CAAC;GAKD,CAAC;AACF,YAAU,UAAU;;AAGtB,QACE,oBAAC,qBAAD;EAAqB,QAAQ,UAAU;EACpC;EACmB"}

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

@@ -43,7 +43,7 @@ declare enum BadgeSize {
  * @description Defines the styling variants for different badge combinations
  */
 declare const badgeVariants: (props?: {
-  color?: "text" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "error" | "success" | "custom";
+  color?: "text" | "primary" | "secondary" | "destructive" | "success" | "error" | "neutral" | "light" | "dark" | "custom";
   variant?: "none" | "default" | "outline" | "hoverable";
   size?: "sm" | "md" | "lg";
 } & class_variance_authority_types0.ClassProp) => string;

package/dist/types/components/Breadcrumb/breadcrumb.content.d.ts CHANGED Viewed

@@ -1,10 +1,10 @@
-import * as _intlayer_types_nodeType0 from "@intlayer/types/nodeType";
+import * as _intlayer_core_transpiler0 from "@intlayer/core/transpiler";
 //#region src/components/Breadcrumb/breadcrumb.content.d.ts
 declare const breadCrumbContent: {
   key: string;
   content: {
-    linkLabel: _intlayer_types_nodeType0.TypedNodeModel<"translation", {
+    linkLabel: _intlayer_core_transpiler0.TranslationContent<unknown, {
       en: string;
       fr: string;
       es: string;
@@ -23,29 +23,6 @@ declare const breadCrumbContent: {
       id: string;
       vi: string;
       uk: string;
-    }, {
-      nodeType: "translation";
-    } & {
-      translation: {
-        en: string;
-        fr: string;
-        es: string;
-        'en-GB': string;
-        de: string;
-        ja: string;
-        ko: string;
-        zh: string;
-        it: string;
-        pt: string;
-        hi: string;
-        ar: string;
-        ru: string;
-        tr: string;
-        pl: string;
-        id: string;
-        vi: string;
-        uk: string;
-      };
     }>;
   };
   title: string;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"breadcrumb.content.d.ts","names":[],"sources":["../../../../src/components/Breadcrumb/breadcrumb.content.ts"],"mappings":";;;cAEa,iBAAA;;;eA4BS,~~yBAAA~~,CAAA,~~cAAA~~"}
1	+ {"version":3,"file":"breadcrumb.content.d.ts","names":[],"sources":["../../../../src/components/Breadcrumb/breadcrumb.content.ts"],"mappings":";;;cAEa,iBAAA;;;eA4BS,0BAAA,CAAA,kBAAA"}

package/dist/types/components/Browser/Browser.content.d.ts CHANGED Viewed

@@ -1,10 +1,10 @@
-import * as _intlayer_types_nodeType0 from "@intlayer/types/nodeType";
+import * as _intlayer_core_transpiler0 from "@intlayer/core/transpiler";
 //#region src/components/Browser/Browser.content.d.ts
 declare const browserContent: {
   key: string;
   content: {
-    ariaLabel: _intlayer_types_nodeType0.TypedNodeModel<"translation", {
+    ariaLabel: _intlayer_core_transpiler0.TranslationContent<unknown, {
       en: string;
       'en-GB': string;
       fr: string;
@@ -23,31 +23,8 @@ declare const browserContent: {
       id: string;
       vi: string;
       uk: string;
-    }, {
-      nodeType: "translation";
-    } & {
-      translation: {
-        en: string;
-        'en-GB': string;
-        fr: string;
-        es: string;
-        de: string;
-        ja: string;
-        ko: string;
-        zh: string;
-        it: string;
-        pt: string;
-        hi: string;
-        ar: string;
-        ru: string;
-        tr: string;
-        pl: string;
-        id: string;
-        vi: string;
-        uk: string;
-      };
     }>;
-    urlLabel: _intlayer_types_nodeType0.TypedNodeModel<"translation", {
+    urlLabel: _intlayer_core_transpiler0.TranslationContent<unknown, {
       en: string;
       'en-GB': string;
       fr: string;
@@ -66,32 +43,9 @@ declare const browserContent: {
       id: string;
       vi: string;
       uk: string;
-    }, {
-      nodeType: "translation";
-    } & {
-      translation: {
-        en: string;
-        'en-GB': string;
-        fr: string;
-        es: string;
-        de: string;
-        ja: string;
-        ko: string;
-        zh: string;
-        it: string;
-        pt: string;
-        hi: string;
-        ar: string;
-        ru: string;
-        tr: string;
-        pl: string;
-        id: string;
-        vi: string;
-        uk: string;
-      };
     }>;
     urlPlaceholder: string;
-    errorMessage: _intlayer_types_nodeType0.TypedNodeModel<"translation", {
+    errorMessage: _intlayer_core_transpiler0.TranslationContent<unknown, {
       en: string;
       'en-GB': string;
       fr: string;
@@ -110,31 +64,8 @@ declare const browserContent: {
       id: string;
       vi: string;
       uk: string;
-    }, {
-      nodeType: "translation";
-    } & {
-      translation: {
-        en: string;
-        'en-GB': string;
-        fr: string;
-        es: string;
-        de: string;
-        ja: string;
-        ko: string;
-        zh: string;
-        it: string;
-        pt: string;
-        hi: string;
-        ar: string;
-        ru: string;
-        tr: string;
-        pl: string;
-        id: string;
-        vi: string;
-        uk: string;
-      };
     }>;
-    domainRestrictionError: _intlayer_types_nodeType0.TypedNodeModel<"translation", {
+    domainRestrictionError: _intlayer_core_transpiler0.TranslationContent<unknown, {
       en: string;
       'en-GB': string;
       fr: string;
@@ -153,31 +84,8 @@ declare const browserContent: {
       id: string;
       vi: string;
       uk: string;
-    }, {
-      nodeType: "translation";
-    } & {
-      translation: {
-        en: string;
-        'en-GB': string;
-        fr: string;
-        es: string;
-        de: string;
-        ja: string;
-        ko: string;
-        zh: string;
-        it: string;
-        pt: string;
-        hi: string;
-        ar: string;
-        ru: string;
-        tr: string;
-        pl: string;
-        id: string;
-        vi: string;
-        uk: string;
-      };
     }>;
-    backButtonLabel: _intlayer_types_nodeType0.TypedNodeModel<"translation", {
+    backButtonLabel: _intlayer_core_transpiler0.TranslationContent<unknown, {
       en: string;
       'en-GB': string;
       fr: string;
@@ -196,31 +104,8 @@ declare const browserContent: {
       id: string;
       vi: string;
       uk: string;
-    }, {
-      nodeType: "translation";
-    } & {
-      translation: {
-        en: string;
-        'en-GB': string;
-        fr: string;
-        es: string;
-        de: string;
-        ja: string;
-        ko: string;
-        zh: string;
-        it: string;
-        pt: string;
-        hi: string;
-        ar: string;
-        ru: string;
-        tr: string;
-        pl: string;
-        id: string;
-        vi: string;
-        uk: string;
-      };
     }>;
-    forwardButtonLabel: _intlayer_types_nodeType0.TypedNodeModel<"translation", {
+    forwardButtonLabel: _intlayer_core_transpiler0.TranslationContent<unknown, {
       en: string;
       'en-GB': string;
       fr: string;
@@ -239,31 +124,8 @@ declare const browserContent: {
       id: string;
       vi: string;
       uk: string;
-    }, {
-      nodeType: "translation";
-    } & {
-      translation: {
-        en: string;
-        'en-GB': string;
-        fr: string;
-        es: string;
-        de: string;
-        ja: string;
-        ko: string;
-        zh: string;
-        it: string;
-        pt: string;
-        hi: string;
-        ar: string;
-        ru: string;
-        tr: string;
-        pl: string;
-        id: string;
-        vi: string;
-        uk: string;
-      };
     }>;
-    reloadButtonTitle: _intlayer_types_nodeType0.TypedNodeModel<"translation", {
+    reloadButtonTitle: _intlayer_core_transpiler0.TranslationContent<unknown, {
       en: string;
       'en-GB': string;
       fr: string;
@@ -282,31 +144,8 @@ declare const browserContent: {
       id: string;
       vi: string;
       uk: string;
-    }, {
-      nodeType: "translation";
-    } & {
-      translation: {
-        en: string;
-        'en-GB': string;
-        fr: string;
-        es: string;
-        de: string;
-        ja: string;
-        ko: string;
-        zh: string;
-        it: string;
-        pt: string;
-        hi: string;
-        ar: string;
-        ru: string;
-        tr: string;
-        pl: string;
-        id: string;
-        vi: string;
-        uk: string;
-      };
     }>;
-    iframeTitle: _intlayer_types_nodeType0.TypedNodeModel<"translation", {
+    iframeTitle: _intlayer_core_transpiler0.TranslationContent<unknown, {
       en: string;
       'en-GB': string;
       fr: string;
@@ -325,29 +164,6 @@ declare const browserContent: {
       id: string;
       vi: string;
       uk: string;
-    }, {
-      nodeType: "translation";
-    } & {
-      translation: {
-        en: string;
-        'en-GB': string;
-        fr: string;
-        es: string;
-        de: string;
-        ja: string;
-        ko: string;
-        zh: string;
-        it: string;
-        pt: string;
-        hi: string;
-        ar: string;
-        ru: string;
-        tr: string;
-        pl: string;
-        id: string;
-        vi: string;
-        uk: string;
-      };
     }>;
   };
   title: string;

package/dist/types/components/Browser/Browser.content.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Browser.content.d.ts","names":[],"sources":["../../../../src/components/Browser/Browser.content.ts"],"mappings":";;;cAEa,cAAA;;;eAyKS,~~yBAAA~~,CAAA,~~cAAA~~"}
1	+ {"version":3,"file":"Browser.content.d.ts","names":[],"sources":["../../../../src/components/Browser/Browser.content.ts"],"mappings":";;;cAEa,cAAA;;;eAyKS,0BAAA,CAAA,kBAAA"}

package/dist/types/components/Button/Button.d.ts CHANGED Viewed

@@ -61,9 +61,9 @@ declare enum ButtonTextAlign {
  */
 declare const buttonVariants: (props?: {
   size?: "sm" | "md" | "lg" | "xl" | "icon-sm" | "icon-md" | "icon-lg" | "icon-xl";
-  color?: "text" | "primary" | "secondary" | "destructive" | "neutral" | "card" | "light" | "dark" | "current" | "text-inverse" | "error" | "success" | "custom";
+  color?: "text" | "primary" | "secondary" | "destructive" | "success" | "error" | "neutral" | "light" | "dark" | "custom" | "card" | "current" | "text-inverse";
   roundedSize?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "3xl" | "4xl" | "5xl" | "full";
-  variant?: "input" | "none" | "default" | "outline" | "link" | "invisible-link" | "hoverable" | "fade";
+  variant?: "input" | "none" | "default" | "link" | "outline" | "hoverable" | "invisible-link" | "fade";
   textAlign?: "left" | "center" | "right";
   isFullWidth?: boolean;
 } & class_variance_authority_types0.ClassProp) => string;