@intlayer/design-system 8.3.1 → 8.3.3

package/dist/types/components/LocaleSwitcherContentDropDown/localeSwitcher.content.d.ts

@@ -24,7 +24,7 @@ declare const localeSwitcherContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types_nodeType0.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types_nodeType0.NodeType.Translation;
     } & {
       translation: {
         en: string;
@@ -67,7 +67,7 @@ declare const localeSwitcherContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types_nodeType0.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types_nodeType0.NodeType.Translation;
     } & {
       translation: {
         en: string;
@@ -110,7 +110,7 @@ declare const localeSwitcherContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types_nodeType0.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types_nodeType0.NodeType.Translation;
     } & {
       translation: {
         en: string;
@@ -154,7 +154,7 @@ declare const localeSwitcherContent: {
         vi: string;
         uk: string;
       }, {
-        nodeType: _intlayer_types_nodeType0.NodeType.Translation | "translation";
+        nodeType: "translation" | _intlayer_types_nodeType0.NodeType.Translation;
       } & {
         translation: {
           en: string;
@@ -197,7 +197,7 @@ declare const localeSwitcherContent: {
         vi: string;
         uk: string;
       }, {
-        nodeType: _intlayer_types_nodeType0.NodeType.Translation | "translation";
+        nodeType: "translation" | _intlayer_types_nodeType0.NodeType.Translation;
       } & {
         translation: {
           en: string;
@@ -240,7 +240,7 @@ declare const localeSwitcherContent: {
         vi: string;
         uk: string;
       }, {
-        nodeType: _intlayer_types_nodeType0.NodeType.Translation | "translation";
+        nodeType: "translation" | _intlayer_types_nodeType0.NodeType.Translation;
       } & {
         translation: {
           en: string;
@@ -285,7 +285,7 @@ declare const localeSwitcherContent: {
         vi: string;
         uk: string;
       }, {
-        nodeType: _intlayer_types_nodeType0.NodeType.Translation | "translation";
+        nodeType: "translation" | _intlayer_types_nodeType0.NodeType.Translation;
       } & {
         translation: {
           en: string;
@@ -328,7 +328,7 @@ declare const localeSwitcherContent: {
         vi: string;
         uk: string;
       }, {
-        nodeType: _intlayer_types_nodeType0.NodeType.Translation | "translation";
+        nodeType: "translation" | _intlayer_types_nodeType0.NodeType.Translation;
       } & {
         translation: {
           en: string;

package/dist/types/components/LocaleSwitcherDropDown/localeSwitcher.content.d.ts

@@ -24,7 +24,7 @@ declare const localeSwitcherContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types_nodeType0.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types_nodeType0.NodeType.Translation;
     } & {
       translation: {
         en: string;
@@ -67,7 +67,7 @@ declare const localeSwitcherContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types_nodeType0.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types_nodeType0.NodeType.Translation;
     } & {
       translation: {
         en: string;
@@ -110,7 +110,7 @@ declare const localeSwitcherContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types_nodeType0.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types_nodeType0.NodeType.Translation;
     } & {
       translation: {
         en: string;
@@ -154,7 +154,7 @@ declare const localeSwitcherContent: {
         vi: string;
         uk: string;
       }, {
-        nodeType: _intlayer_types_nodeType0.NodeType.Translation | "translation";
+        nodeType: "translation" | _intlayer_types_nodeType0.NodeType.Translation;
       } & {
         translation: {
           en: string;
@@ -197,7 +197,7 @@ declare const localeSwitcherContent: {
         vi: string;
         uk: string;
       }, {
-        nodeType: _intlayer_types_nodeType0.NodeType.Translation | "translation";
+        nodeType: "translation" | _intlayer_types_nodeType0.NodeType.Translation;
       } & {
         translation: {
           en: string;
@@ -240,7 +240,7 @@ declare const localeSwitcherContent: {
         vi: string;
         uk: string;
       }, {
-        nodeType: _intlayer_types_nodeType0.NodeType.Translation | "translation";
+        nodeType: "translation" | _intlayer_types_nodeType0.NodeType.Translation;
       } & {
         translation: {
           en: string;

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

@@ -14,11 +14,6 @@ declare const baseMarkdownComponents: {
   h5: (props: ComponentProps<"h5">) => react_jsx_runtime0.JSX.Element;
   h6: (props: ComponentProps<"h6">) => react_jsx_runtime0.JSX.Element;
   strong: (props: ComponentProps<"strong">) => react_jsx_runtime0.JSX.Element;
-  code: ({
-    className,
-    children,
-    ...rest
-  }: ComponentProps<"code">) => react_jsx_runtime0.JSX.Element;
   blockquote: ({
     className,
     ...props
@@ -37,7 +32,6 @@ declare const baseMarkdownComponents: {
     src,
     ...props
   }: ComponentProps<"img">) => react_jsx_runtime0.JSX.Element;
-  a: (props: ComponentProps<"a">) => react_jsx_runtime0.JSX.Element;
   pre: (props: ComponentProps<"pre">) => react_jsx_runtime0.JSX.Element;
   table: (props: ComponentProps<typeof Table>) => react_jsx_runtime0.JSX.Element;
   th: ({
@@ -92,11 +86,6 @@ declare const getIntlayerMarkdownOptions: (_isDarkMode?: boolean) => {
     h5: (props: ComponentProps<"h5">) => react_jsx_runtime0.JSX.Element;
     h6: (props: ComponentProps<"h6">) => react_jsx_runtime0.JSX.Element;
     strong: (props: ComponentProps<"strong">) => react_jsx_runtime0.JSX.Element;
-    code: ({
-      className,
-      children,
-      ...rest
-    }: ComponentProps<"code">) => react_jsx_runtime0.JSX.Element;
     blockquote: ({
       className,
       ...props
@@ -115,7 +104,6 @@ declare const getIntlayerMarkdownOptions: (_isDarkMode?: boolean) => {
       src,
       ...props
     }: ComponentProps<"img">) => react_jsx_runtime0.JSX.Element;
-    a: (props: ComponentProps<"a">) => react_jsx_runtime0.JSX.Element;
     pre: (props: ComponentProps<"pre">) => react_jsx_runtime0.JSX.Element;
     table: (props: ComponentProps<typeof Table>) => react_jsx_runtime0.JSX.Element;
     th: ({

package/dist/types/components/MarkDownRender/MarkDownRender.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MarkDownRender.d.ts","names":[],"sources":["../../../../src/components/MarkDownRender/MarkDownRender.tsx"],"mappings":"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"}
+{"version":3,"file":"MarkDownRender.d.ts","names":[],"sources":["../../../../src/components/MarkDownRender/MarkDownRender.tsx"],"mappings":"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"}

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

@@ -20,9 +20,9 @@ interface MaxHeightSmootherProps extends HTMLAttributes<HTMLDivElement> {
  * MaxHeightSmoother Component
  *
  * A sophisticated container component that provides smooth height transitions
- * for collapsible content. Uses CSS Grid's fractional rows to create fluid
- * animations without JavaScript height calculations, making it performant
- * and smooth across all devices and screen sizes.
+ * for collapsible content. Implemented entirely in CSS — no client-side
+ * JavaScript, hooks, or event listeners — making it compatible with React
+ * Server Components and Next.js App Router without `'use client'`.
  *
  * @component
  * @example
@@ -38,125 +38,105 @@ interface MaxHeightSmootherProps extends HTMLAttributes<HTMLDivElement> {
  * @example
  * Hover-triggered expansion:
  * ```tsx
- * <MaxHeightSmoother isOverable={true}>
- *   <div>
- *     <p>This content expands when you hover over the container.</p>
- *     <p>Perfect for preview cards or tooltips.</p>
- *   </div>
+ * <MaxHeightSmoother isOverable>
+ *   <p>This content expands when you hover over the container.</p>
  * </MaxHeightSmoother>
  * ```
  *
  * @example
- * Accessible focus-triggered expansion:
+ * Focus-triggered expansion (keyboard accessible):
  * ```tsx
- * <MaxHeightSmoother isFocusable={true}>
- *   <div>
- *     <h3>Expandable Section</h3>
- *     <p>Tab to focus this container to expand the content.</p>
- *     <p>Great for accessible progressive disclosure.</p>
- *   </div>
+ * <MaxHeightSmoother isFocusable>
+ *   <p>Tab to focus this container to expand the content.</p>
  * </MaxHeightSmoother>
  * ```
  *
  * @example
  * With minimum height for preview:
  * ```tsx
- * <MaxHeightSmoother
- *   isOverable={true}
- *   minHeight={100}
- *   className="border rounded-lg p-4"
- * >
- *   <div>
- *     <h3>Article Preview</h3>
- *     <p>This article preview shows the first few lines...</p>
- *     <p>Hover to see the full content with smooth expansion.</p>
- *     <p>The minHeight ensures some content is always visible.</p>
- *   </div>
+ * <MaxHeightSmoother isOverable minHeight={100} className="border rounded-lg p-4">
+ *   <h3>Article Preview</h3>
+ *   <p>This shows a preview of the content. Hover to see all.</p>
  * </MaxHeightSmoother>
  * ```
  *
  * @example
- * Combined hover and focus behavior:
+ * Combined hover and focus:
  * ```tsx
- * <MaxHeightSmoother
- *   isOverable={true}
- *   isFocusable={true}
- *   minHeight={80}
- * >
- *   <div>
- *     <h4>Interactive Card</h4>
- *     <p>Expands on both hover and keyboard focus.</p>
- *     <p>Accessible to both mouse and keyboard users.</p>
- *   </div>
+ * <MaxHeightSmoother isOverable isFocusable minHeight={80}>
+ *   <h4>Interactive Card</h4>
+ *   <p>Expands on both hover and keyboard focus.</p>
  * </MaxHeightSmoother>
  * ```
  *
- * Features:
- * - Smooth CSS Grid-based height transitions (700ms duration)
- * - Three interaction modes: controlled, hover, and focus
- * - Configurable minimum height for collapsed state
- * - Accessible keyboard navigation support
- * - Overflow handling with smooth scrolling
- * - ARIA attributes for screen reader compatibility
- * - Performance-optimized with CSS-only animations
- * - Responsive design that works on all screen sizes
- *
- * Animation Technique:
- * Uses CSS Grid `grid-rows-[0fr]` to `grid-rows-[1fr]` transitions
- * instead of height animations, which provides:
- * - Smooth animations without knowing content height
- * - Better performance (no layout recalculations)
- * - More reliable across different content types
- * - Automatic adaptation to dynamic content changes
- *
- * Interaction Modes:
- * 1. **Controlled**: Use `isHidden` prop for external state control
- * 2. **Hover**: Set `isOverable={true}` for mouse hover expansion
- * 3. **Focus**: Set `isFocusable={true}` for keyboard focus expansion
- * 4. **Combined**: Use both `isOverable` and `isFocusable` together
- *
- * Accessibility Features:
- * - `role="button"` when focusable for proper screen reader context
- * - `tabIndex={0}` for keyboard navigation when focusable
- * - `aria-hidden` attribute for screen reader control
- * - Semantic focus management with focus-within pseudo-class
- * - High contrast focus indicators
- * - Respects prefers-reduced-motion settings
- *
- * Use Cases:
- * - FAQ accordions and expandable sections
- * - Article previews and read-more functionality
- * - Card hover effects and content previews
- * - Progressive disclosure for complex forms
- * - Tooltip and popover content containers
- * - Mobile-friendly collapsible navigation
- * - Dashboard widget expansion
- * - Email preview in mail clients
- *
- * Performance Considerations:
- * - Pure CSS animations (no JavaScript timer overhead)
- * - GPU acceleration through transform-based animations
- * - Minimal repaints and layout shifts
- * - Efficient event handling with CSS pseudo-classes
- * - No DOM measurements or calculations required
+ * ## Animation Strategies
+ *
+ * ### Strategy A — `grid-template-rows` (`minHeight === 0`)
+ * Transitions between `grid-rows-[0fr]` and `grid-rows-[1fr]`.
+ * Clean and performant; no fixed height ceiling required.
+ * Requires `min-h-0` on the inner wrapper so the grid track can fully collapse.
+ *
+ * ### Strategy B — `max-height` via CSS custom properties (`minHeight > 0`)
+ * When a visible preview floor is required, `grid-template-rows` produces a
+ * "dead time" artifact: the track silently grows from 0 → minHeight before
+ * anything visible happens, resulting in a perceived snap.
+ *
+ * `max-height` sidesteps this entirely — the transition starts from the
+ * already-visible floor value, producing a single continuous expansion.
+ *
+ * The collapsed floor (`--mhs-collapsed`) and expanded ceiling
+ * (`--mhs-expanded`) are injected as CSS variables via inline style,
+ * NOT as `max-height` directly. This lets Tailwind own `max-height`
+ * entirely, so `:hover` and `:focus-within` can override it freely
+ * without fighting inline-style specificity.
+ *
+ * Both variables are consumer-overridable via CSS:
+ * ```css
+ * .my-container {
+ *   --mhs-collapsed: 80px;
+ *   --mhs-expanded: 1200px;
+ * }
+ * ```
+ *
+ * Trade-off: easing is applied over [minHeight → 3000px], not the real
+ * content height. For typical content this is imperceptible. If pixel-perfect
+ * easing is critical, use a JS-measured height with a controlled `isHidden`
+ * prop and a `style={{ maxHeight }}` override instead.
+ *
+ * ## Interaction Modes
+ *
+ * 1. **Controlled** — Pass `isHidden` for external state control (e.g. accordion)
+ * 2. **Hover** — Set `isOverable` for mouse hover expansion
+ * 3. **Focus** — Set `isFocusable` for keyboard focus expansion
+ * 4. **Combined** — Use `isOverable` and `isFocusable` together
+ *
+ * ## Accessibility
+ *
+ * - `role="button"` and `tabIndex={0}` when `isFocusable` is true
+ * - `aria-expanded` reflects the current disclosure state
+ * - Focus expansion via `:focus-within` CSS pseudo-class
+ * - `motion-reduce:transition-none` respects `prefers-reduced-motion`
+ *
+ * Note: because this component relies on CSS pseudo-classes for interaction,
+ * keyboard toggle (Enter / Space) is not supported in uncontrolled mode.
+ * For full keyboard toggle behaviour, manage `isHidden` externally and
+ * wire an `onClick` / `onKeyDown` handler on the parent.
+ *
+ * ## Performance
+ *
+ * - Pure CSS animations — no JavaScript timers or DOM measurements
+ * - No `'use client'` directive required
+ * - Compatible with React Server Components and Next.js App Router
+ * - GPU-accelerated transitions
  *
  * @param props - Component props extending HTML div attributes
  * @param props.children - Content to render within the container
- * @param props.isHidden - Controlled collapse state (true=collapsed, false=expanded)
- * @param props.isOverable - Enable hover-to-expand behavior
- * @param props.isFocusable - Enable focus-to-expand behavior with keyboard navigation
- * @param props.minHeight - Minimum height in pixels for collapsed state (default: 0)
- * @param props.className - Additional CSS classes for styling
- * @param props.style - Inline styles (note: minHeight style will be applied)
- * @param props.role - ARIA role (automatically set to "button" when focusable)
- * @param props.tabIndex - Tab index (automatically set to 0 when focusable)
- * @param props.aria-hidden - ARIA hidden state (controlled by isHidden when focusable)
- * @param props.onClick - Click event handler
- * @param props.onMouseEnter - Mouse enter event handler
- * @param props.onMouseLeave - Mouse leave event handler
- * @param props.onFocus - Focus event handler
- * @param props.onBlur - Blur event handler
- * @param props...rest - All other standard HTML div attributes
+ * @param props.isHidden - Controlled collapse state (`true` = collapsed, `false` = expanded)
+ * @param props.isOverable - Enable hover-to-expand behaviour
+ * @param props.isFocusable - Enable focus-to-expand behaviour with keyboard navigation
+ * @param props.minHeight - Minimum height in pixels for the collapsed state (default: 0)
+ * @param props.className - Additional CSS classes
+ * @param props.style - Inline styles (CSS variable overrides will be merged)
  *
  * @returns A smooth height-transitioning container with configurable interaction modes
  */

package/dist/types/components/MaxHeightSmoother/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/MaxHeightSmoother/index.tsx"],"mappings":";;;;;AAC2D;UAKjD,sBAAA,SAA+B,cAAA,CAAe,cAAA;;EAEtD,QAAA,EAAU,SAAA;EAAA;EAEV,QAAA;EAJqD;EAMrD,UAAA;EANuC;EAQvC,WAAA;EANA;EAQA,SAAA;AAAA;;;;;;AAmJF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAAa,iBAAA,EAAmB,EAAA,CAAG,sBAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/MaxHeightSmoother/index.tsx"],"mappings":";;;;;AAC0E;UAKhE,sBAAA,SAA+B,cAAA,CAAe,cAAA;;EAEtD,QAAA,EAAU,SAAA;EAAA;EAEV,QAAA;EAJqD;EAMrD,UAAA;EANuC;EAQvC,WAAA;EANA;EAQA,SAAA;AAAA;;;;;;AA+HF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAAa,iBAAA,EAAmB,EAAA,CAAG,sBAAA"}

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

@@ -25,7 +25,7 @@ declare const paginationContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types_nodeType0.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types_nodeType0.NodeType.Translation;
     } & {
       translation: {
         en: string;
@@ -68,7 +68,7 @@ declare const paginationContent: {
       vi: string;
       zh: string;
     }, {
-      nodeType: _intlayer_types_nodeType0.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types_nodeType0.NodeType.Translation;
     } & {
       translation: {
         ar: string;
@@ -111,7 +111,7 @@ declare const paginationContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types_nodeType0.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types_nodeType0.NodeType.Translation;
     } & {
       translation: {
         en: string;
@@ -154,7 +154,7 @@ declare const paginationContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types_nodeType0.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types_nodeType0.NodeType.Translation;
     } & {
       translation: {
         en: string;
@@ -197,7 +197,7 @@ declare const paginationContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types_nodeType0.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types_nodeType0.NodeType.Translation;
     } & {
       translation: {
         en: string;

package/dist/types/components/RightDrawer/rightDrawer.content.d.ts

@@ -24,7 +24,7 @@ declare const rightDrawerContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types_nodeType0.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types_nodeType0.NodeType.Translation;
     } & {
       translation: {
         en: string;
@@ -67,7 +67,7 @@ declare const rightDrawerContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types_nodeType0.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types_nodeType0.NodeType.Translation;
     } & {
       translation: {
         en: string;

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

@@ -15,6 +15,7 @@ type SwitchSelectorProps<T = boolean> = {
   defaultValue?: T;
   onChange?: (choice: T) => void;
   className?: string;
+  itemClassName?: string;
   hoverable?: boolean;
   disabled?: boolean;
 } & VariantProps<typeof switchSelectorVariant> & VariantProps<typeof choiceVariant>;
@@ -37,7 +38,7 @@ declare enum SwitchSelectorSize {
   LG = "lg"
 }
 declare const choiceVariant: (props?: {
-  size?: "md" | "sm" | "lg";
+  size?: "sm" | "md" | "lg";
 } & class_variance_authority_types0.ClassProp) => string;
 /**
  *
@@ -64,6 +65,7 @@ declare const SwitchSelector: <T>({
   color,
   size,
   className,
+  itemClassName,
   hoverable,
   disabled
 }: SwitchSelectorProps<T>) => react_jsx_runtime0.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/SwitchSelector/index.tsx"],"mappings":";;;;;;KAaY,oBAAA;EACV,OAAA,EAAS,SAAA;EACT,KAAA,EAAO,CAAA;AAAA,IACL,cAAA,CAAe,iBAAA;AAAA,KACP,qBAAA,MAA2B,oBAAA,CAAqB,CAAA;AAAA,KAOhD,mBAAA;EACV,OAAA,GAAU,qBAAA,CAAsB,CAAA;EAChC,KAAA,GAAQ,CAAA;EACR,YAAA,GAAe,CAAA;EACf,QAAA,IAAY,MAAA,EAAQ,CAAA;EACpB,SAAA;EACA,SAAA;EACA,QAAA;AAAA,IACE,YAAA,QAAoB,qBAAA,IACtB,YAAA,QAAoB,aAAA;AAAA,aAEV,mBAAA;EACV,OAAA;EACA,SAAA;EACA,WAAA;EACA,OAAA;EACA,KAAA;EACA,IAAA;EACA,IAAA;AAAA;AAAA,cAGI,qBAAA,GAAqB,KAAA;;;IAwB1B,+BAAA,CAAA,SAAA;AAAA,aAEW,kBAAA;EACV,EAAA;EACA,EAAA;EACA,EAAA;AAAA;AAAA,cAGI,aAAA,GAAa,KAAA;;IAclB,+BAAA,CAAA,SAAA;;;;;;;;;;;;;;;;;;cA2CY,cAAA;EAAsB,OAAA;EAAA,KAAA;EAAA,YAAA;EAAA,QAAA;EAAA,KAAA;EAAA,IAAA;EAAA,SAAA;EAAA,SAAA;EAAA;AAAA,GAUhC,mBAAA,CAAoB,CAAA,MAAE,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../../src/components/SwitchSelector/index.tsx"],"mappings":";;;;;;KAaY,oBAAA;EACV,OAAA,EAAS,SAAA;EACT,KAAA,EAAO,CAAA;AAAA,IACL,cAAA,CAAe,iBAAA;AAAA,KACP,qBAAA,MAA2B,oBAAA,CAAqB,CAAA;AAAA,KAOhD,mBAAA;EACV,OAAA,GAAU,qBAAA,CAAsB,CAAA;EAChC,KAAA,GAAQ,CAAA;EACR,YAAA,GAAe,CAAA;EACf,QAAA,IAAY,MAAA,EAAQ,CAAA;EACpB,SAAA;EACA,aAAA;EACA,SAAA;EACA,QAAA;AAAA,IACE,YAAA,QAAoB,qBAAA,IACtB,YAAA,QAAoB,aAAA;AAAA,aAEV,mBAAA;EACV,OAAA;EACA,SAAA;EACA,WAAA;EACA,OAAA;EACA,KAAA;EACA,IAAA;EACA,IAAA;AAAA;AAAA,cAGI,qBAAA,GAAqB,KAAA;;;IAwB1B,+BAAA,CAAA,SAAA;AAAA,aAEW,kBAAA;EACV,EAAA;EACA,EAAA;EACA,EAAA;AAAA;AAAA,cAGI,aAAA,GAAa,KAAA;;IAclB,+BAAA,CAAA,SAAA;;;;;;;;;;;;;;;;;;cA2CY,cAAA;EAAsB,OAAA;EAAA,KAAA;EAAA,YAAA;EAAA,QAAA;EAAA,KAAA;EAAA,IAAA;EAAA,SAAA;EAAA,aAAA;EAAA,SAAA;EAAA;AAAA,GAWhC,mBAAA,CAAoB,CAAA,MAAE,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

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

package/dist/types/components/Table/table.content.d.ts

@@ -24,7 +24,7 @@ declare const tableContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types_nodeType0.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types_nodeType0.NodeType.Translation;
     } & {
       translation: {
         en: string;

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

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

package/dist/types/components/Terminal/terminal.content.d.ts

@@ -24,7 +24,7 @@ declare const terminalContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types_nodeType0.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types_nodeType0.NodeType.Translation;
     } & {
       translation: {
         en: string;
@@ -67,7 +67,7 @@ declare const terminalContent: {
       vi: string;
       uk: string;
     }, {
-      nodeType: _intlayer_types_nodeType0.NodeType.Translation | "translation";
+      nodeType: "translation" | _intlayer_types_nodeType0.NodeType.Translation;
     } & {
       translation: {
         en: string;