@intlayer/design-system 9.0.0-canary.6 → 9.0.0-canary.7

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

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

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

@@ -1,11 +1,11 @@
 'use client';
 
+import { usePersistedStore } from "../../hooks/usePersistedStore.mjs";
 import { Button } from "../Button/Button.mjs";
 import { Container } from "../Container/index.mjs";
 import { DropDown } from "../DropDown/index.mjs";
 import { Input } from "../Input/Input.mjs";
 import { SwitchSelector } from "../SwitchSelector/SwitchSelector.mjs";
-import { usePersistedStore } from "../../hooks/usePersistedStore.mjs";
 import { useLocaleSwitcherContent } from "./LocaleSwitcherContentContext.mjs";
 import { useMemo, useRef, useState } from "react";
 import { Check, Globe, MoveVertical } from "lucide-react";

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

@@ -1,10 +1,10 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
-import { Button } from "../Button/Button.mjs";
-import { Container } from "../Container/index.mjs";
 import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
 import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
+import { Button } from "../Button/Button.mjs";
+import { Container } from "../Container/index.mjs";
 import { H3 } from "../Headers/index.mjs";
 import { useEffect } from "react";
 import { cva } from "class-variance-authority";

package/dist/esm/components/Navbar/MobileNavbar.mjs

@@ -1,9 +1,9 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
-import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
 import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { useScrollDetection } from "../../hooks/useScrollDetection.mjs";
+import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
 import { Burger } from "./Burger.mjs";
 import { useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -1,8 +1,8 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
-import { Button } from "../Button/Button.mjs";
 import { useItemSelector } from "../../hooks/useItemSelector.mjs";
+import { Button } from "../Button/Button.mjs";
 import { useEffect, useRef } from "react";
 import { cva } from "class-variance-authority";
 import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";

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

@@ -1,12 +1,12 @@
 'use client';
 
+import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
+import { useDevice } from "../../hooks/useDevice.mjs";
+import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { Button } from "../Button/Button.mjs";
 import { Container } from "../Container/index.mjs";
-import { useDevice } from "../../hooks/useDevice.mjs";
 import { KeyboardShortcut } from "../KeyboardShortcut/KeyboardShortcut.mjs";
 import { Popover } from "../Popover/dynamic.mjs";
-import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
-import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { MaxWidthSmoother } from "../MaxWidthSmoother/index.mjs";
 import { isElementAtTopAndNotCovered } from "./isElementAtTopAndNotCovered.mjs";
 import { useRightDrawer } from "./useRightDrawer.mjs";

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

@@ -17,7 +17,6 @@ const useSwitchSelector = ({ choices = [], value, defaultValue, onChange, hovera
 	const selectedIndex = choices.findIndex((choice) => choice.value === valueState);
 	const indicatorIndex = hoverable && hoveredIndex !== null ? hoveredIndex : selectedIndex;
 	const handleChange = (newValue) => {
-		console.log("useSwitchSelector handleChange", newValue);
 		setValue(newValue);
 		onChange?.(newValue);
 	};

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

@@ -1 +1 @@
-{"version":3,"file":"useSwitchSelector.mjs","names":[],"sources":["../../../../src/components/SwitchSelector/useSwitchSelector.ts"],"sourcesContent":["'use client';\n\nimport {\n  type ItemSelectorOrientation,\n  useItemSelector,\n} from '@hooks/useItemSelector';\nimport { useEffect, useRef, useState } from 'react';\nimport type { SwitchSelectorBaseProps } from './SwitchSelector';\n\nexport const useSwitchSelector = <T>(\n  {\n    choices = [],\n    value,\n    defaultValue,\n    onChange,\n    hoverable = true,\n    disabled = false,\n  }: SwitchSelectorBaseProps<T>,\n  orientation: ItemSelectorOrientation\n) => {\n  const [valueState, setValue] = useState<T>(\n    value ?? defaultValue ?? choices[0]?.value\n  );\n  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);\n\n  const optionsRefs = useRef<HTMLButtonElement[]>([]);\n  const indicatorRef = useRef<HTMLDivElement | null>(null);\n  const { choiceIndicatorPosition } = useItemSelector(optionsRefs, {\n    selector: (el) => el.getAttribute('data-indicator') === 'true',\n    isHoverable: false,\n    orientation,\n  });\n\n  const selectedIndex = choices.findIndex(\n    (choice) => choice.value === valueState\n  );\n\n  // The indicator follows hover if hoverable, otherwise the selected option\n  const indicatorIndex =\n    hoverable && hoveredIndex !== null ? hoveredIndex : selectedIndex;\n\n  const handleChange = (newValue: T) => {\n    console.log('useSwitchSelector handleChange', newValue);\n    setValue(newValue);\n    onChange?.(newValue);\n  };\n\n  useEffect(() => {\n    if (value === undefined) return;\n    setValue(value);\n  }, [value]);\n\n  return {\n    valueState,\n    hoveredIndex,\n    setHoveredIndex,\n    optionsRefs,\n    indicatorRef,\n    choiceIndicatorPosition,\n    selectedIndex,\n    indicatorIndex,\n    handleChange,\n    disabled,\n  };\n};\n"],"mappings":";;;;;;AASA,MAAa,qBACX,EACE,UAAU,EAAE,EACZ,OACA,cACA,UACA,YAAY,MACZ,WAAW,SAEb,gBACG;CACH,MAAM,CAAC,YAAY,YAAY,SAC7B,SAAS,gBAAgB,QAAQ,IAAI,MACtC;CACD,MAAM,CAAC,cAAc,mBAAmB,SAAwB,KAAK;CAErE,MAAM,cAAc,OAA4B,EAAE,CAAC;CACnD,MAAM,eAAe,OAA8B,KAAK;CACxD,MAAM,EAAE,4BAA4B,gBAAgB,aAAa;EAC/D,WAAW,OAAO,GAAG,aAAa,iBAAiB,KAAK;EACxD,aAAa;EACb;EACD,CAAC;CAEF,MAAM,gBAAgB,QAAQ,WAC3B,WAAW,OAAO,UAAU,WAC9B;CAGD,MAAM,iBACJ,aAAa,iBAAiB,OAAO,eAAe;CAEtD,MAAM,gBAAgB,aAAgB;AACpC,UAAQ,IAAI,kCAAkC,SAAS;AACvD,WAAS,SAAS;AAClB,aAAW,SAAS;;AAGtB,iBAAgB;AACd,MAAI,UAAU,OAAW;AACzB,WAAS,MAAM;IACd,CAAC,MAAM,CAAC;AAEX,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD"}
+{"version":3,"file":"useSwitchSelector.mjs","names":[],"sources":["../../../../src/components/SwitchSelector/useSwitchSelector.ts"],"sourcesContent":["'use client';\n\nimport {\n  type ItemSelectorOrientation,\n  useItemSelector,\n} from '@hooks/useItemSelector';\nimport { useEffect, useRef, useState } from 'react';\nimport type { SwitchSelectorBaseProps } from './SwitchSelector';\n\nexport const useSwitchSelector = <T>(\n  {\n    choices = [],\n    value,\n    defaultValue,\n    onChange,\n    hoverable = true,\n    disabled = false,\n  }: SwitchSelectorBaseProps<T>,\n  orientation: ItemSelectorOrientation\n) => {\n  const [valueState, setValue] = useState<T>(\n    value ?? defaultValue ?? choices[0]?.value\n  );\n  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);\n\n  const optionsRefs = useRef<HTMLButtonElement[]>([]);\n  const indicatorRef = useRef<HTMLDivElement | null>(null);\n  const { choiceIndicatorPosition } = useItemSelector(optionsRefs, {\n    selector: (el) => el.getAttribute('data-indicator') === 'true',\n    isHoverable: false,\n    orientation,\n  });\n\n  const selectedIndex = choices.findIndex(\n    (choice) => choice.value === valueState\n  );\n\n  // The indicator follows hover if hoverable, otherwise the selected option\n  const indicatorIndex =\n    hoverable && hoveredIndex !== null ? hoveredIndex : selectedIndex;\n\n  const handleChange = (newValue: T) => {\n    setValue(newValue);\n    onChange?.(newValue);\n  };\n\n  useEffect(() => {\n    if (value === undefined) return;\n    setValue(value);\n  }, [value]);\n\n  return {\n    valueState,\n    hoveredIndex,\n    setHoveredIndex,\n    optionsRefs,\n    indicatorRef,\n    choiceIndicatorPosition,\n    selectedIndex,\n    indicatorIndex,\n    handleChange,\n    disabled,\n  };\n};\n"],"mappings":";;;;;;AASA,MAAa,qBACX,EACE,UAAU,EAAE,EACZ,OACA,cACA,UACA,YAAY,MACZ,WAAW,SAEb,gBACG;CACH,MAAM,CAAC,YAAY,YAAY,SAC7B,SAAS,gBAAgB,QAAQ,IAAI,MACtC;CACD,MAAM,CAAC,cAAc,mBAAmB,SAAwB,KAAK;CAErE,MAAM,cAAc,OAA4B,EAAE,CAAC;CACnD,MAAM,eAAe,OAA8B,KAAK;CACxD,MAAM,EAAE,4BAA4B,gBAAgB,aAAa;EAC/D,WAAW,OAAO,GAAG,aAAa,iBAAiB,KAAK;EACxD,aAAa;EACb;EACD,CAAC;CAEF,MAAM,gBAAgB,QAAQ,WAC3B,WAAW,OAAO,UAAU,WAC9B;CAGD,MAAM,iBACJ,aAAa,iBAAiB,OAAO,eAAe;CAEtD,MAAM,gBAAgB,aAAgB;AACpC,WAAS,SAAS;AAClB,aAAW,SAAS;;AAGtB,iBAAgB;AACd,MAAI,UAAU,OAAW;AACzB,WAAS,MAAM;IACd,CAAC,MAAM,CAAC;AAEX,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD"}

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

@@ -1,8 +1,8 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
-import { TabSelector } from "../TabSelector/TabSelector.mjs";
 import { useHorizontalSwipe } from "../../hooks/useHorizontalSwipe.mjs";
+import { TabSelector } from "../TabSelector/TabSelector.mjs";
 import { useTabContext } from "./TabContext.mjs";
 import { Children, createContext, isValidElement, useState } from "react";
 import { cva } from "class-variance-authority";

package/dist/esm/hooks/index.mjs

@@ -1,16 +1,16 @@
-import { calculateIsMobile, checkIsIOS, checkIsIphoneOrSafariDevice, checkIsMac, checkIsMobileScreen, checkIsMobileUserAgent, getBreakpointFromSize, useDevice } from "./useDevice.mjs";
-import { useItemSelector } from "./useItemSelector.mjs";
-import { usePersistedStore } from "./usePersistedStore.mjs";
-import { useGetElementById } from "./useGetElementById.mjs";
+import { useKeyboardDetector } from "./useKeyboardDetector.mjs";
 import { useGetElementOrWindow } from "./useGetElementOrWindow.mjs";
+import { useScrollY } from "./useScrollY.mjs";
+import { usePersistedStore } from "./usePersistedStore.mjs";
 import { useHorizontalSwipe } from "./useHorizontalSwipe.mjs";
-import { useIsDarkMode } from "./useIsDarkMode.mjs";
+import { useItemSelector } from "./useItemSelector.mjs";
+import { calculateIsMobile, checkIsIOS, checkIsIphoneOrSafariDevice, checkIsMac, checkIsMobileScreen, checkIsMobileUserAgent, getBreakpointFromSize, useDevice } from "./useDevice.mjs";
+import { useSearch } from "./useSearch.mjs";
 import { useIsMounted } from "./useIsMounted.mjs";
-import { useKeyboardDetector } from "./useKeyboardDetector.mjs";
+import { useGetElementById } from "./useGetElementById.mjs";
+import { useIsDarkMode } from "./useIsDarkMode.mjs";
 import { useScreenWidth } from "./useScreenWidth.mjs";
 import { useScrollBlockage } from "./useScrollBlockage/index.mjs";
 import { useScrollDetection } from "./useScrollDetection.mjs";
-import { useScrollY } from "./useScrollY.mjs";
-import { useSearch } from "./useSearch.mjs";
 
 export { calculateIsMobile, checkIsIOS, checkIsIphoneOrSafariDevice, checkIsMac, checkIsMobileScreen, checkIsMobileUserAgent, getBreakpointFromSize, useDevice, useGetElementById, useGetElementOrWindow, useHorizontalSwipe, useIsDarkMode, useIsMounted, useItemSelector, useKeyboardDetector, usePersistedStore, useScreenWidth, useScrollBlockage, useScrollDetection, useScrollY, useSearch };

package/dist/types/api/useIntlayerAPI.d.ts

@@ -11,9 +11,10 @@ type UseIntlayerAuthProps = {
 };
 declare const useIntlayerOAuthOptions: (props?: UseIntlayerAuthProps) => {
   options: {
-    headers: HeadersInit;
+    signal?: AbortSignal | null;
     cache?: RequestCache;
     credentials?: RequestCredentials;
+    headers: HeadersInit;
     integrity?: string;
     keepalive?: boolean;
     method?: string;
@@ -22,7 +23,6 @@ declare const useIntlayerOAuthOptions: (props?: UseIntlayerAuthProps) => {
     redirect?: RequestRedirect;
     referrer?: string;
     referrerPolicy?: ReferrerPolicy;
-    signal?: AbortSignal | null;
     window?: null;
     body?: Record<string, unknown>;
     params?: Record<string, string | string[] | undefined> | string[] | URLSearchParams;

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

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

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

@@ -9,7 +9,7 @@ import { LocalesValues } from "@intlayer/types/module_augmentation";
  * Breadcrumb variant styles using class-variance-authority
  */
 declare const breadcrumbVariants: (props?: {
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  size?: "sm" | "md" | "lg" | "xs" | "xl";
   spacing?: "compact" | "normal" | "loose";
 } & _$class_variance_authority_types0.ClassProp) => string;
 /**

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

@@ -24,10 +24,10 @@ type ButtonTextAlign = 'left' | 'center' | 'right';
  * Enhanced button variants with improved accessibility and focus states
  */
 declare const buttonVariants: (props?: {
-  size?: "xs" | "sm" | "md" | "lg" | "xl" | "custom" | "icon-sm" | "icon-md" | "icon-lg" | "icon-xl";
-  color?: "error" | "success" | "text" | "primary" | "secondary" | "neutral" | "light" | "dark" | "custom" | "card" | "text-inverse" | "current";
-  roundedSize?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "full" | "3xl" | "4xl" | "5xl";
-  variant?: "default" | "input" | "none" | "hoverable" | "link" | "outline" | "invisible-link" | "fade";
+  size?: "sm" | "md" | "lg" | "xs" | "xl" | "custom" | "icon-sm" | "icon-md" | "icon-lg" | "icon-xl";
+  color?: "success" | "error" | "primary" | "secondary" | "text" | "custom" | "neutral" | "card" | "light" | "dark" | "current" | "text-inverse";
+  roundedSize?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "full";
+  variant?: "link" | "default" | "none" | "input" | "outline" | "invisible-link" | "hoverable" | "fade";
   textAlign?: "center" | "left" | "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?: "auto" | "sm" | "md" | "lg" | "none";
+  spacing?: "auto" | "none" | "sm" | "md" | "lg";
 } & _$class_variance_authority_types0.ClassProp) => string;
 interface CollapsibleTableProps extends Omit<HTMLAttributes<HTMLElement>, 'title'>, VariantProps<typeof collapsibleTableVariants> {
   /** Table title displayed in the header */

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

@@ -28,7 +28,7 @@ declare const Command: {
     ref?: React.Ref<HTMLInputElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof _$react.InputHTMLAttributes<HTMLInputElement> | "asChild">, "type" | "onChange" | "value"> & {
+  }, "key" | keyof _$react.InputHTMLAttributes<HTMLInputElement> | "asChild">, "value" | "type" | "onChange"> & {
     value?: string;
     onValueChange?: (search: string) => void;
   } & _$react.RefAttributes<HTMLInputElement>>;
@@ -72,7 +72,7 @@ declare const Command: {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
+  }, "key" | keyof HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "disabled" | "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?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "full" | "3xl" | "4xl";
-  transparency?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | "full";
-  padding?: "sm" | "md" | "lg" | "xl" | "2xl" | "none";
+  roundedSize?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "full";
+  transparency?: "none" | "sm" | "md" | "lg" | "xs" | "xl" | "full";
+  padding?: "none" | "sm" | "md" | "lg" | "xl" | "2xl";
   separator?: "both" | "without" | "x" | "y";
   border?: "with" | "none";
-  borderColor?: "error" | "success" | "text" | "primary" | "secondary" | "neutral" | "warning" | "card";
+  borderColor?: "success" | "error" | "primary" | "secondary" | "text" | "neutral" | "card" | "warning";
   background?: "with" | "none" | "hoverable";
-  gap?: "sm" | "md" | "lg" | "xl" | "2xl" | "none";
+  gap?: "none" | "sm" | "md" | "lg" | "xl" | "2xl";
 } & _$class_variance_authority_types0.ClassProp) => string;
 /** Available rounded corner sizes for the container */
 type ContainerRoundedSize = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';

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

@@ -5,8 +5,8 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/Input/Checkbox.d.ts
 declare const checkboxVariants: (props?: {
   variant?: "default";
-  size?: "xs" | "sm" | "md" | "lg";
-  color?: "error" | "success" | "text" | "primary" | "secondary" | "neutral" | "light" | "dark" | "custom" | "text-inverse";
+  size?: "sm" | "md" | "lg" | "xs";
+  color?: "success" | "error" | "primary" | "secondary" | "text" | "custom" | "neutral" | "light" | "dark" | "text-inverse";
   validationStyleEnabled?: "enabled" | "disabled";
 } & _$class_variance_authority_types0.ClassProp) => string;
 type CheckboxSize = 'xs' | 'sm' | 'md' | 'lg';

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

@@ -5,8 +5,8 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/Input/Radio.d.ts
 declare const radioVariants: (props?: {
   variant?: "default";
-  size?: "xs" | "sm" | "md" | "lg";
-  color?: "error" | "success" | "text" | "primary" | "secondary" | "neutral" | "light" | "dark" | "custom" | "text-inverse";
+  size?: "sm" | "md" | "lg" | "xs";
+  color?: "success" | "error" | "primary" | "secondary" | "text" | "custom" | "neutral" | "light" | "dark" | "text-inverse";
   validationStyleEnabled?: "enabled" | "disabled";
 } & _$class_variance_authority_types0.ClassProp) => string;
 type RadioSize = 'xs' | 'sm' | 'md' | 'lg';

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

@@ -13,9 +13,9 @@ type LinkRoundedSize = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'ful
 type LinkSize = 'sm' | 'md' | 'lg' | 'xl' | 'custom';
 type LinkUnderlined = 'default' | 'true' | 'false';
 declare const linkVariants: (props?: {
-  variant?: "default" | "hoverable" | "button" | "invisible-link" | "button-outlined";
-  roundedSize?: "sm" | "md" | "lg" | "xl" | "2xl" | "none" | "full" | "3xl";
-  color?: "error" | "success" | "text" | "primary" | "secondary" | "neutral" | "light" | "dark" | "custom" | "text-inverse";
+  variant?: "default" | "button" | "invisible-link" | "hoverable" | "button-outlined";
+  roundedSize?: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full";
+  color?: "success" | "error" | "primary" | "secondary" | "text" | "custom" | "neutral" | "light" | "dark" | "text-inverse";
   size?: "sm" | "md" | "lg" | "xl" | "custom";
   underlined?: boolean | "default";
 } & _$class_variance_authority_types0.ClassProp) => string;

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

@@ -5,8 +5,8 @@ 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" | "neutral";
-  variant?: "default" | "ghost" | "bordered";
+  color?: "primary" | "secondary" | "text" | "neutral";
+  variant?: "default" | "bordered" | "ghost";
 } & _$class_variance_authority_types0.ClassProp) => string;
 type PaginationSize = 'sm' | 'md' | 'lg';
 type PaginationVariant = 'default' | 'bordered' | 'ghost';

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

@@ -25,14 +25,14 @@ type SwitchSelectorBaseProps<T = boolean> = {
 };
 type SwitchSelectorProps<T = boolean> = SwitchSelectorBaseProps<T> & VariantProps<typeof switchSelectorVariant> & VariantProps<typeof choiceVariant>;
 declare const switchSelectorVariant: (props?: {
-  color?: "text" | "primary" | "secondary" | "neutral" | "light" | "dark";
+  color?: "primary" | "secondary" | "text" | "neutral" | "light" | "dark";
   disabled?: boolean;
 } & _$class_variance_authority_types0.ClassProp) => string;
 declare const choiceVariant: (props?: {
-  size?: "xs" | "sm" | "md" | "lg";
+  size?: "sm" | "md" | "lg" | "xs";
 } & _$class_variance_authority_types0.ClassProp) => string;
 declare const indicatorVariant: (props?: {
-  color?: "error" | "text" | "primary" | "secondary" | "neutral" | "light" | "dark";
+  color?: "error" | "primary" | "secondary" | "text" | "neutral" | "light" | "dark";
 } & _$class_variance_authority_types0.ClassProp) => string;
 /**
  * Component that allows the user to select one of the provided choices.

package/dist/types/components/SwitchSelector/VerticalSwitchSelector.d.ts

@@ -5,7 +5,7 @@ import { VariantProps } from "class-variance-authority";
 
 //#region src/components/SwitchSelector/VerticalSwitchSelector.d.ts
 declare const verticalSwitchSelectorVariant: (props?: {
-  color?: "error" | "text" | "primary" | "secondary" | "neutral" | "light" | "dark";
+  color?: "primary" | "secondary" | "text" | "error" | "neutral" | "light" | "dark";
   disabled?: boolean;
 } & _$class_variance_authority_types0.ClassProp) => string;
 declare const verticalChoiceVariant: (props?: {

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

@@ -6,7 +6,7 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/Tab/Tab.d.ts
 declare const tabContainerVariant: (props?: {
   background?: "with" | "without";
-  variant?: "default" | "ghost" | "bordered";
+  variant?: "default" | "bordered" | "ghost";
 } & _$class_variance_authority_types0.ClassProp) => string;
 type TabProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof tabContainerVariant> & {
   defaultTab?: string;

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

@@ -7,7 +7,7 @@ import { ItemSelectorOrientation } from "@hooks/useItemSelector";
 //#region src/components/TabSelector/TabSelector.d.ts
 type TabSelectorColor = 'primary' | 'secondary' | 'error' | 'neutral' | 'light' | 'dark' | 'text';
 declare const tabSelectorVariant: (props?: {
-  color?: "error" | "text" | "primary" | "secondary" | "neutral" | "light" | "dark";
+  color?: "error" | "primary" | "secondary" | "text" | "neutral" | "light" | "dark";
 } & _$class_variance_authority_types0.ClassProp) => string;
 type TabSelectorItemProps = HTMLAttributes<HTMLElement> & {
   key: string | number;

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

@@ -146,9 +146,9 @@ type TagBorder = 'none' | 'with';
  */
 type TagBackground = 'none' | 'with';
 declare const containerVariants: (props?: {
-  roundedSize?: "sm" | "md" | "lg" | "xl" | "none" | "full" | "xxl" | "xxxl";
-  color?: "error" | "success" | "text" | "primary" | "neutral" | "warning" | "black" | "white";
-  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  roundedSize?: "none" | "sm" | "md" | "lg" | "xl" | "full" | "xxl" | "xxxl";
+  color?: "success" | "error" | "primary" | "text" | "neutral" | "warning" | "black" | "white";
+  size?: "sm" | "md" | "lg" | "xs" | "xl";
   border?: "with" | "none";
   background?: "with" | "none";
 } & _$class_variance_authority_types0.ClassProp) => string;

package/dist/types/components/Toaster/Toast.d.ts

@@ -25,7 +25,7 @@ declare const ToastViewport: FC<ComponentProps<typeof ToastPrimitives.Viewport>>
  * ```
  */
 declare const toastVariants: (props?: {
-  variant?: "error" | "default" | "success";
+  variant?: "success" | "error" | "default";
 } & _$class_variance_authority_types0.ClassProp) => string;
 /**
  * Toast Component

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@intlayer/design-system",
-  "version": "9.0.0-canary.6",
+  "version": "9.0.0-canary.7",
   "private": false,
   "description": "Intlayer design system, including UI components used in the Intlayer editor, website, and visual editor/CMS.",
   "keywords": [
@@ -442,13 +442,13 @@
   "dependencies": {
     "@better-auth/passkey": "1.6.20",
     "@better-auth/sso": "1.6.20",
-    "@intlayer/api": "9.0.0-canary.6",
-    "@intlayer/chokidar": "9.0.0-canary.6",
-    "@intlayer/config": "9.0.0-canary.6",
-    "@intlayer/core": "9.0.0-canary.6",
-    "@intlayer/dictionaries-entry": "9.0.0-canary.6",
-    "@intlayer/editor-react": "9.0.0-canary.6",
-    "@intlayer/types": "9.0.0-canary.6",
+    "@intlayer/api": "9.0.0-canary.7",
+    "@intlayer/chokidar": "9.0.0-canary.7",
+    "@intlayer/config": "9.0.0-canary.7",
+    "@intlayer/core": "9.0.0-canary.7",
+    "@intlayer/dictionaries-entry": "9.0.0-canary.7",
+    "@intlayer/editor-react": "9.0.0-canary.7",
+    "@intlayer/types": "9.0.0-canary.7",
     "@radix-ui/react-dialog": "1.1.17",
     "@radix-ui/react-select": "2.3.1",
     "@radix-ui/react-slot": "1.3.0",
@@ -481,7 +481,7 @@
     "defu": "6.1.7",
     "dompurify": "3.4.10",
     "isomorphic-dompurify": "3.17.0",
-    "react-intlayer": "9.0.0-canary.6",
+    "react-intlayer": "9.0.0-canary.7",
     "react-moveable": "^0.56.0",
     "rollup-preserve-directives": "1.1.3",
     "tippy.js": "^6.3.7",
@@ -492,7 +492,7 @@
     "zod": "4.4.3"
   },
   "devDependencies": {
-    "@intlayer/backend": "9.0.0-canary.6",
+    "@intlayer/backend": "9.0.0-canary.7",
     "@shikijs/transformers": "4.2.0",
     "@storybook/addon-a11y": "8.6.14",
     "@storybook/addon-essentials": "8.6.14",
@@ -522,33 +522,33 @@
     "@utils/ts-config": "1.0.4",
     "@utils/ts-config-types": "1.0.4",
     "fast-glob": "3.3.3",
-    "intlayer": "9.0.0-canary.6",
+    "intlayer": "9.0.0-canary.7",
     "rimraf": "6.1.3",
     "shiki": "4.2.0",
     "storybook": "8.6.17",
     "tsdown": "0.21.10",
     "typescript": "6.0.3",
     "vite": "8.1.0",
-    "vite-intlayer": "9.0.0-canary.6",
+    "vite-intlayer": "9.0.0-canary.7",
     "vite-plugin-dts": "5.0.2",
     "vitest": "4.1.9"
   },
   "peerDependencies": {
     "@better-fetch/fetch": "1.3.1",
     "@hookform/resolvers": "5.4.0",
-    "@intlayer/backend": "9.0.0-canary.6",
+    "@intlayer/backend": "9.0.0-canary.7",
     "@monaco-editor/react": "4.7.0",
     "@shikijs/transformers": "4.2.0",
     "@tanstack/react-query": "5.101.1",
     "@tanstack/react-query-devtools": "5.101.1",
     "framer-motion": "12.41.0",
     "fuse.js": "7.4.2",
-    "intlayer": "9.0.0-canary.6",
+    "intlayer": "9.0.0-canary.7",
     "lucide-react": "1.21.0",
     "react": ">=16.0.0",
     "react-dom": ">=16.0.0",
     "react-hook-form": "7.79.0",
-    "react-intlayer": "9.0.0-canary.6",
+    "react-intlayer": "9.0.0-canary.7",
     "shiki": "4.2.0",
     "tailwindcss": "4.3.1"
   },