@intlayer/design-system 8.0.5 → 8.1.0

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

@@ -105,7 +105,7 @@ const getIntlayerMarkdownOptions = (isDarkMode) => ({ components: {
 	Tabs: (props) => /* @__PURE__ */ jsx(Tab, {
 		...props,
 		className: "rounded-xl border border-card",
-		headerClassName: "sticky rounded-xl top-36 z-10 bg-background/70 backdrop-blur overflow-x-auto"
+		headerClassName: "sticky rounded-xl top-24 z-5 bg-background/70 backdrop-blur overflow-x-auto"
 	}),
 	Tab: Tab.Item,
 	Columns: ({ className, ...props }) => /* @__PURE__ */ jsx("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"MarkDownRender.mjs","names":[],"sources":["../../../../src/components/MarkDownRender/MarkDownRender.tsx"],"sourcesContent":["import type { LocalesValues } from '@intlayer/types';\nimport { cn } from '@utils/cn';\nimport type { ComponentProps, ComponentPropsWithoutRef, FC } from 'react';\nimport {\n  type MarkdownRenderer as MarkdownRendererIntlayer,\n  type RenderMarkdownProps,\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\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: (\n  isDarkMode: boolean\n) => RenderMarkdownProps = (isDarkMode) => ({\n  components: {\n    h1: (props) => <H1 isClickable={true} {...props} />,\n    h2: (props) => <H2 isClickable={true} className=\"mt-16\" {...props} />,\n    h3: (props) => <H3 isClickable={true} className=\"mt-5\" {...props} />,\n    h4: (props) => <H4 isClickable={true} className=\"mt-3\" {...props} />,\n    h5: (props) => <H5 isClickable={true} className=\"mt-3\" {...props} />,\n    h6: (props) => <H6 isClickable={true} className=\"mt-3\" {...props} />,\n\n    code: ({ className, children, ...rest }: ComponentProps<'code'>) => {\n      // Ensure children is a string (Markdown renderer might pass ReactNodes)\n      const content = String(children ?? '').replace(/\\n$/, '');\n\n      // Determine if it is inline code or a code block\n      // Code blocks usually have a className like 'language-ts'\n      const isBlock = !!className;\n\n      if (!isBlock) {\n        return (\n          <strong className=\"rounded bg-card/60 box-decoration-clone px-1 py-0.5 font-mono text-sm\">\n            {content}\n          </strong>\n        );\n      }\n\n      // Extract language from className (e.g., \"language-typescript\" -> \"typescript\")\n      const language = (className?.replace(/lang(?:uage)?-/, '') ||\n        'plaintext') as BundledLanguage;\n\n      console.log({ rest });\n\n      return (\n        <Code\n          {...rest}\n          language={language}\n          showHeader={true}\n          isDarkMode={isDarkMode} // Ensure this variable is available in scope\n        >\n          {content}\n        </Code>\n      );\n    },\n\n    blockquote: ({ className, ...props }) => (\n      <blockquote\n        className={cn(\n          'mt-5 gap-3 border-card border-l-4 pl-5 text-neutral',\n          className\n        )}\n        {...props}\n      />\n    ),\n    ul: ({ className, ...props }) => (\n      <ul\n        className={cn('mt-5 flex list-disc flex-col gap-3 pl-5', className)}\n        {...props}\n      />\n    ),\n    ol: ({ className, ...props }) => (\n      <ol\n        className={cn('mt-5 flex list-decimal flex-col gap-3 pl-5', className)}\n        {...props}\n      />\n    ),\n    img: ({ className, ...props }) => (\n      <img\n        {...props}\n        alt={props.alt ?? ''}\n        loading=\"lazy\"\n        className={cn('max-h-[80vh] max-w-full rounded-md', className)}\n        src={`${props.src}?raw=true`}\n      />\n    ),\n    a: (props) => (\n      // @ts-expect-error - label is not required in LinkProps\n      <Link\n        isExternalLink={props.href?.startsWith('http')}\n        underlined={true}\n        // locale={locale}\n        {...props}\n        color=\"neutral\"\n      />\n    ),\n    pre: (props) => props.children,\n\n    table: (props: ComponentProps<typeof Table>) => (\n      <Table isRollable={true} {...props} />\n    ),\n    th: ({ className, ...props }) => (\n      <th\n        className={cn('border-neutral border-b bg-neutral/10 p-4', className)}\n        {...props}\n      />\n    ),\n    tr: ({ className, ...props }) => (\n      <tr\n        className={cn('hover:/10 hover:bg-neutral/10', className)}\n        {...props}\n      />\n    ),\n    td: ({ className, ...props }) => (\n      <td\n        className={cn('border-neutral-500/50 border-b p-4', className)}\n        {...props}\n      />\n    ),\n    hr: ({ className, ...props }) => (\n      <hr className={cn('mx-6 mt-16 text-neutral', className)} {...props} />\n    ),\n    Tabs: (props: ComponentProps<typeof Tab>) => (\n      <Tab\n        {...props}\n        className=\"rounded-xl border border-card\"\n        headerClassName=\"sticky rounded-xl top-36 z-10 bg-background/70 backdrop-blur overflow-x-auto\"\n      />\n    ),\n    Tab: Tab.Item,\n    Columns: ({ className, ...props }: ComponentPropsWithoutRef<'div'>) => (\n      <div className={cn('flex gap-4 max-md:flex-col', className)} {...props} />\n    ),\n    Column: ({ className, ...props }: ComponentPropsWithoutRef<'div'>) => (\n      <div className={cn('flex-1', className)} {...props} />\n    ),\n  },\n});\n\n/**\n * MarkdownRenderer Component\n *\n * A comprehensive markdown renderer that transforms markdown text into rich,\n * interactive HTML with custom styling and Intlayer integration. Supports\n * code syntax highlighting, responsive tables, internationalized links,\n * and automatic frontmatter stripping.\n *\n * @component\n */\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n  children,\n  isDarkMode,\n  locale,\n  forceBlock,\n  preserveFrontmatter,\n  tagfilter,\n  components: componentsProp,\n  wrapper,\n}) => {\n  const markdownOptions = getIntlayerMarkdownOptions(isDarkMode ?? false);\n\n  const markdownContent = renderMarkdown(children, {\n    components: {\n      ...markdownOptions.components,\n      // Pass dynamic props to components\n      code: ({ className, children, ...rest }: ComponentProps<'code'>) => {\n        // Ensure children is a string (Markdown renderer might pass ReactNodes)\n        const content = String(children ?? '').replace(/\\n$/, '');\n\n        // Determine if it is inline code or a code block\n        // Code blocks usually have a className like 'language-ts'\n        const isBlock = !!className;\n\n        if (!isBlock) {\n          return (\n            <strong className=\"rounded bg-card/60 box-decoration-clone px-1 py-0.5 font-mono text-sm\">\n              {content}\n            </strong>\n          );\n        }\n\n        // Extract language from className (e.g., \"language-typescript\" -> \"typescript\")\n        const language = (className?.replace(/lang(?:uage)?-/, '') ||\n          'plaintext') as BundledLanguage;\n\n        return (\n          <Code\n            {...rest}\n            language={language}\n            showHeader={true}\n            isDarkMode={isDarkMode} // Ensure this variable is available in scope\n          >\n            {content}\n          </Code>\n        );\n      },\n\n      a: (props) => (\n        // @ts-expect-error - label is not required in LinkProps\n        <Link\n          isExternalLink={props.href?.startsWith('http')}\n          underlined={true}\n          locale={locale}\n          {...props}\n          color=\"neutral\"\n        />\n      ),\n      ...componentsProp,\n    },\n    wrapper: wrapper ?? markdownOptions.wrapper,\n    forceBlock: forceBlock ?? markdownOptions.forceBlock,\n    preserveFrontmatter:\n      preserveFrontmatter ?? markdownOptions.preserveFrontmatter,\n    tagfilter: tagfilter ?? markdownOptions.tagfilter,\n  });\n\n  return (\n    <CodeProvider>\n      <TabProvider>{markdownContent}</TabProvider>\n    </CodeProvider>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"MarkDownRender.mjs","names":[],"sources":["../../../../src/components/MarkDownRender/MarkDownRender.tsx"],"sourcesContent":["import type { LocalesValues } from '@intlayer/types';\nimport { cn } from '@utils/cn';\nimport type { ComponentProps, ComponentPropsWithoutRef, FC } from 'react';\nimport {\n  type MarkdownRenderer as MarkdownRendererIntlayer,\n  type RenderMarkdownProps,\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\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: (\n  isDarkMode: boolean\n) => RenderMarkdownProps = (isDarkMode) => ({\n  components: {\n    h1: (props) => <H1 isClickable={true} {...props} />,\n    h2: (props) => <H2 isClickable={true} className=\"mt-16\" {...props} />,\n    h3: (props) => <H3 isClickable={true} className=\"mt-5\" {...props} />,\n    h4: (props) => <H4 isClickable={true} className=\"mt-3\" {...props} />,\n    h5: (props) => <H5 isClickable={true} className=\"mt-3\" {...props} />,\n    h6: (props) => <H6 isClickable={true} className=\"mt-3\" {...props} />,\n\n    code: ({ className, children, ...rest }: ComponentProps<'code'>) => {\n      // Ensure children is a string (Markdown renderer might pass ReactNodes)\n      const content = String(children ?? '').replace(/\\n$/, '');\n\n      // Determine if it is inline code or a code block\n      // Code blocks usually have a className like 'language-ts'\n      const isBlock = !!className;\n\n      if (!isBlock) {\n        return (\n          <strong className=\"rounded bg-card/60 box-decoration-clone px-1 py-0.5 font-mono text-sm\">\n            {content}\n          </strong>\n        );\n      }\n\n      // Extract language from className (e.g., \"language-typescript\" -> \"typescript\")\n      const language = (className?.replace(/lang(?:uage)?-/, '') ||\n        'plaintext') as BundledLanguage;\n\n      console.log({ rest });\n\n      return (\n        <Code\n          {...rest}\n          language={language}\n          showHeader={true}\n          isDarkMode={isDarkMode} // Ensure this variable is available in scope\n        >\n          {content}\n        </Code>\n      );\n    },\n\n    blockquote: ({ className, ...props }) => (\n      <blockquote\n        className={cn(\n          'mt-5 gap-3 border-card border-l-4 pl-5 text-neutral',\n          className\n        )}\n        {...props}\n      />\n    ),\n    ul: ({ className, ...props }) => (\n      <ul\n        className={cn('mt-5 flex list-disc flex-col gap-3 pl-5', className)}\n        {...props}\n      />\n    ),\n    ol: ({ className, ...props }) => (\n      <ol\n        className={cn('mt-5 flex list-decimal flex-col gap-3 pl-5', className)}\n        {...props}\n      />\n    ),\n    img: ({ className, ...props }) => (\n      <img\n        {...props}\n        alt={props.alt ?? ''}\n        loading=\"lazy\"\n        className={cn('max-h-[80vh] max-w-full rounded-md', className)}\n        src={`${props.src}?raw=true`}\n      />\n    ),\n    a: (props) => (\n      // @ts-expect-error - label is not required in LinkProps\n      <Link\n        isExternalLink={props.href?.startsWith('http')}\n        underlined={true}\n        // locale={locale}\n        {...props}\n        color=\"neutral\"\n      />\n    ),\n    pre: (props) => props.children,\n\n    table: (props: ComponentProps<typeof Table>) => (\n      <Table isRollable={true} {...props} />\n    ),\n    th: ({ className, ...props }) => (\n      <th\n        className={cn('border-neutral border-b bg-neutral/10 p-4', className)}\n        {...props}\n      />\n    ),\n    tr: ({ className, ...props }) => (\n      <tr\n        className={cn('hover:/10 hover:bg-neutral/10', className)}\n        {...props}\n      />\n    ),\n    td: ({ className, ...props }) => (\n      <td\n        className={cn('border-neutral-500/50 border-b p-4', className)}\n        {...props}\n      />\n    ),\n    hr: ({ className, ...props }) => (\n      <hr className={cn('mx-6 mt-16 text-neutral', className)} {...props} />\n    ),\n    Tabs: (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    ),\n    Tab: Tab.Item,\n    Columns: ({ className, ...props }: ComponentPropsWithoutRef<'div'>) => (\n      <div className={cn('flex gap-4 max-md:flex-col', className)} {...props} />\n    ),\n    Column: ({ className, ...props }: ComponentPropsWithoutRef<'div'>) => (\n      <div className={cn('flex-1', className)} {...props} />\n    ),\n  },\n});\n\n/**\n * MarkdownRenderer Component\n *\n * A comprehensive markdown renderer that transforms markdown text into rich,\n * interactive HTML with custom styling and Intlayer integration. Supports\n * code syntax highlighting, responsive tables, internationalized links,\n * and automatic frontmatter stripping.\n *\n * @component\n */\nexport const MarkdownRenderer: FC<MarkdownRendererProps> = ({\n  children,\n  isDarkMode,\n  locale,\n  forceBlock,\n  preserveFrontmatter,\n  tagfilter,\n  components: componentsProp,\n  wrapper,\n}) => {\n  const markdownOptions = getIntlayerMarkdownOptions(isDarkMode ?? false);\n\n  const markdownContent = renderMarkdown(children, {\n    components: {\n      ...markdownOptions.components,\n      // Pass dynamic props to components\n      code: ({ className, children, ...rest }: ComponentProps<'code'>) => {\n        // Ensure children is a string (Markdown renderer might pass ReactNodes)\n        const content = String(children ?? '').replace(/\\n$/, '');\n\n        // Determine if it is inline code or a code block\n        // Code blocks usually have a className like 'language-ts'\n        const isBlock = !!className;\n\n        if (!isBlock) {\n          return (\n            <strong className=\"rounded bg-card/60 box-decoration-clone px-1 py-0.5 font-mono text-sm\">\n              {content}\n            </strong>\n          );\n        }\n\n        // Extract language from className (e.g., \"language-typescript\" -> \"typescript\")\n        const language = (className?.replace(/lang(?:uage)?-/, '') ||\n          'plaintext') as BundledLanguage;\n\n        return (\n          <Code\n            {...rest}\n            language={language}\n            showHeader={true}\n            isDarkMode={isDarkMode} // Ensure this variable is available in scope\n          >\n            {content}\n          </Code>\n        );\n      },\n\n      a: (props) => (\n        // @ts-expect-error - label is not required in LinkProps\n        <Link\n          isExternalLink={props.href?.startsWith('http')}\n          underlined={true}\n          locale={locale}\n          {...props}\n          color=\"neutral\"\n        />\n      ),\n      ...componentsProp,\n    },\n    wrapper: wrapper ?? markdownOptions.wrapper,\n    forceBlock: forceBlock ?? markdownOptions.forceBlock,\n    preserveFrontmatter:\n      preserveFrontmatter ?? markdownOptions.preserveFrontmatter,\n    tagfilter: tagfilter ?? markdownOptions.tagfilter,\n  });\n\n  return (\n    <CodeProvider>\n      <TabProvider>{markdownContent}</TabProvider>\n    </CodeProvider>\n  );\n};\n"],"mappings":"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"}

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

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

package/dist/types/components/CollapsibleTable/CollapsibleTable.d.ts

@@ -6,7 +6,7 @@ import { VariantProps } from "class-variance-authority";
 declare const collapsibleTableVariants: (props?: {
   size?: "sm" | "md" | "lg" | "xl" | "full";
   variant?: "default" | "dark" | "ghost" | "outlined";
-  spacing?: "none" | "sm" | "md" | "lg" | "auto";
+  spacing?: "sm" | "md" | "lg" | "none" | "auto";
 } & class_variance_authority_types0.ClassProp) => string;
 interface CollapsibleTableProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>, VariantProps<typeof collapsibleTableVariants> {
   /** Table title displayed in the header */

package/dist/types/components/Command/index.d.ts

@@ -29,7 +29,7 @@ declare const Command: {
     ref?: React.Ref<HTMLInputElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof react.InputHTMLAttributes<HTMLInputElement> | "asChild">, "onChange" | "type" | "value"> & {
+  }, "key" | keyof react.InputHTMLAttributes<HTMLInputElement> | "asChild">, "type" | "value" | "onChange"> & {
     value?: string;
     onValueChange?: (search: string) => void;
   } & react.RefAttributes<HTMLInputElement>>;
@@ -73,7 +73,7 @@ declare const Command: {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
+  }, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild">, "disabled" | "value" | "onSelect"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;

package/dist/types/components/Container/index.d.ts

@@ -8,14 +8,14 @@ import { VariantProps } from "class-variance-authority";
  * Provides flexible styling options for background, padding, borders, and layout
  */
 declare const containerVariants: (props?: {
-  roundedSize?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "full";
-  transparency?: "none" | "sm" | "md" | "lg" | "xl" | "full" | "xs";
-  padding?: "none" | "sm" | "md" | "lg" | "xl" | "2xl";
-  separator?: "without" | "x" | "y" | "both";
-  border?: "with" | "none";
-  borderColor?: "error" | "text" | "primary" | "secondary" | "neutral" | "card" | "success" | "warning";
-  background?: "with" | "none" | "hoverable";
-  gap?: "none" | "sm" | "md" | "lg" | "xl" | "2xl";
+  roundedSize?: "sm" | "md" | "lg" | "xl" | "none" | "2xl" | "3xl" | "4xl" | "full";
+  transparency?: "sm" | "md" | "lg" | "xl" | "none" | "full" | "xs";
+  padding?: "sm" | "md" | "lg" | "xl" | "none" | "2xl";
+  separator?: "both" | "without" | "x" | "y";
+  border?: "none" | "with";
+  borderColor?: "primary" | "secondary" | "neutral" | "card" | "text" | "error" | "success" | "warning";
+  background?: "none" | "hoverable" | "with";
+  gap?: "sm" | "md" | "lg" | "xl" | "none" | "2xl";
 } & class_variance_authority_types0.ClassProp) => string;
 /** Available rounded corner sizes for the container */
 declare enum ContainerRoundedSize {

package/dist/types/components/Input/Checkbox.d.ts

@@ -6,8 +6,8 @@ import { VariantProps } from "class-variance-authority";
 declare const checkboxVariants: (props?: {
   variant?: "default";
   size?: "sm" | "md" | "lg";
-  color?: "custom" | "error" | "text" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "success";
-  validationStyleEnabled?: "enabled" | "disabled";
+  color?: "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "text" | "error" | "success" | "custom";
+  validationStyleEnabled?: "disabled" | "enabled";
 } & class_variance_authority_types0.ClassProp) => string;
 declare enum CheckboxSize {
   SM = "sm",

package/dist/types/components/Input/Input.d.ts

@@ -6,7 +6,7 @@ import { VariantProps } from "class-variance-authority";
 declare const inputVariants: (props?: {
   variant?: "default" | "invisible";
   size?: "sm" | "md" | "lg";
-  validationStyleEnabled?: "enabled" | "disabled";
+  validationStyleEnabled?: "disabled" | "enabled";
 } & class_variance_authority_types0.ClassProp) => string;
 declare enum InputVariant {
   DEFAULT = "default",

package/dist/types/components/Link/Link.d.ts

@@ -54,9 +54,9 @@ declare enum LinkUnderlined {
 }
 declare const linkVariants: (props?: {
   variant?: "default" | "invisible-link" | "hoverable" | "button" | "button-outlined";
-  roundedSize?: "none" | "md" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "full";
-  color?: "error" | "custom" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "text" | "text-inverse" | "success";
-  size?: "custom" | "md" | "sm" | "lg" | "xl";
+  roundedSize?: "md" | "sm" | "lg" | "xl" | "none" | "2xl" | "3xl" | "full";
+  color?: "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "text" | "text-inverse" | "error" | "success" | "custom";
+  size?: "md" | "sm" | "lg" | "xl" | "custom";
   underlined?: boolean | LinkUnderlined.DEFAULT;
 } & class_variance_authority_types0.ClassProp) => string;
 type LinkProps = DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> & VariantProps<typeof linkVariants> & {

package/dist/types/components/Pagination/Pagination.d.ts

@@ -5,7 +5,7 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/Pagination/Pagination.d.ts
 declare const paginationVariants: (props?: {
   size?: "sm" | "md" | "lg";
-  color?: "text" | "primary" | "secondary" | "destructive" | "neutral";
+  color?: "primary" | "secondary" | "destructive" | "neutral" | "text";
   variant?: "default" | "ghost" | "bordered";
 } & class_variance_authority_types0.ClassProp) => string;
 declare enum PaginationSize {

package/dist/types/components/TabSelector/TabSelector.d.ts

@@ -15,7 +15,7 @@ declare enum TabSelectorColor {
   TEXT = "text"
 }
 declare const tabSelectorVariant: (props?: {
-  color?: "text" | "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark";
+  color?: "primary" | "secondary" | "destructive" | "neutral" | "light" | "dark" | "text";
 } & class_variance_authority_types0.ClassProp) => string;
 type TabSelectorItemProps = HTMLAttributes<HTMLElement> & {
   key: string | number;

package/dist/types/components/Tag/index.d.ts

@@ -185,8 +185,8 @@ declare enum TagBackground {
   WITH = "with"
 }
 declare const containerVariants: (props?: {
-  roundedSize?: "none" | "md" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "full";
-  color?: "error" | "primary" | "neutral" | "text" | "success" | "warning" | "blue" | "yellow" | "green" | "red" | "orange" | "purple" | "pink" | "brown" | "gray" | "black" | "white";
+  roundedSize?: "md" | "sm" | "lg" | "xl" | "none" | "2xl" | "3xl" | "full";
+  color?: "primary" | "neutral" | "text" | "error" | "success" | "warning" | "blue" | "yellow" | "green" | "red" | "orange" | "purple" | "pink" | "brown" | "gray" | "black" | "white";
   size?: "md" | "sm" | "lg" | "xl" | "xs";
   border?: "none" | "with";
   background?: "none" | "with";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intlayer/design-system",
-  "version": "8.0.5",
+  "version": "8.1.0",
   "private": false,
   "description": "Intlayer design system, including UI components used in the Intlayer editor, website, and visual editor/CMS.",
   "keywords": [
@@ -105,12 +105,12 @@
   "dependencies": {
     "@better-auth/passkey": "1.4.18",
     "@better-auth/sso": "1.4.18",
-    "@intlayer/api": "8.0.5",
-    "@intlayer/config": "8.0.5",
-    "@intlayer/core": "8.0.5",
-    "@intlayer/dictionaries-entry": "8.0.5",
-    "@intlayer/editor-react": "8.0.5",
-    "@intlayer/types": "8.0.5",
+    "@intlayer/api": "8.1.0",
+    "@intlayer/config": "8.1.0",
+    "@intlayer/core": "8.1.0",
+    "@intlayer/dictionaries-entry": "8.1.0",
+    "@intlayer/editor-react": "8.1.0",
+    "@intlayer/types": "8.1.0",
     "@radix-ui/react-dialog": "1.1.15",
     "@radix-ui/react-select": "2.2.6",
     "@radix-ui/react-slot": "1.2.4",
@@ -119,12 +119,12 @@
     "bun": "1.3.2",
     "class-variance-authority": "0.7.1",
     "cmdk": "1.1.1",
-    "react-intlayer": "8.0.5",
+    "react-intlayer": "8.1.0",
     "rollup-preserve-directives": "1.1.3",
     "zod": "4.3.6"
   },
   "devDependencies": {
-    "@intlayer/backend": "8.0.5",
+    "@intlayer/backend": "8.1.0",
     "@shikijs/transformers": "3.22.0",
     "@storybook/addon-a11y": "8.6.14",
     "@storybook/addon-essentials": "8.6.14",
@@ -148,41 +148,41 @@
     "@testing-library/react": "16.3.1",
     "@testing-library/user-event": "14.6.1",
     "@types/espree": "10.1.0",
-    "@types/node": "25.2.2",
-    "@types/react": "19.2.13",
+    "@types/node": "25.2.3",
+    "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
     "@utils/ts-config": "1.0.4",
     "@utils/ts-config-types": "1.0.4",
     "fast-glob": "3.3.3",
-    "intlayer": "8.0.5",
+    "intlayer": "8.1.0",
     "rimraf": "6.1.2",
     "shiki": "3.22.0",
     "storybook": "8.6.14",
     "tsdown": "0.20.3",
     "typescript": "5.9.3",
     "vite": "7.3.1",
-    "vite-intlayer": "8.0.5",
+    "vite-intlayer": "8.1.0",
     "vite-plugin-dts": "4.5.4",
-    "vite-tsconfig-paths": "6.0.5",
+    "vite-tsconfig-paths": "6.1.1",
     "vitest": "4.0.18"
   },
   "peerDependencies": {
     "@better-fetch/fetch": "1.1.21",
     "@hookform/resolvers": "5.2.2",
-    "@intlayer/backend": "8.0.5",
+    "@intlayer/backend": "8.1.0",
     "@monaco-editor/react": "4.7.0",
     "@shikijs/transformers": "3.22.0",
-    "@tanstack/react-query": "5.90.20",
+    "@tanstack/react-query": "5.90.21",
     "@tanstack/react-query-devtools": "5.91.3",
     "clsx": "2.1.1",
     "framer-motion": "12.34.0",
     "fuse.js": "7.1.0",
-    "intlayer": "8.0.5",
+    "intlayer": "8.1.0",
     "lucide-react": "0.563.0",
     "react": ">=16.0.0",
     "react-dom": ">=16.0.0",
     "react-hook-form": "7.71.1",
-    "react-intlayer": "8.0.5",
+    "react-intlayer": "8.1.0",
     "shiki": "3.22.0",
     "tailwind-merge": "3.4.0",
     "tailwindcss": "4.1.18"