@keboola/design 1.3.1 → 2.0.1

package/src/components/Button/styles.ts

@@ -143,16 +143,39 @@ export const variants = cva(
         ],
       },
       size: {
-        medium: ['tw-max-h-10', 'tw-min-h-10', 'tw-px-4', 'tw-py-2.5', '[&_svg]:tw-size-4'],
-        small: ['tw-max-h-8', 'tw-min-h-8', 'tw-px-4', 'tw-py-1.5', '[&_svg]:tw-size-4'],
-        large: ['tw-max-h-12', 'tw-min-h-12', 'tw-px-4', 'tw-py-3.5', '[&_svg]:tw-size-4'],
-
-        'icon-lg': ['tw-size-12', 'tw-p-0', '[&_svg]:tw-size-6'],
-        icon: ['tw-size-10', 'tw-p-0', '[&_svg]:tw-size-4'],
-        'icon-sm': ['tw-size-8', 'tw-p-0', '[&_svg]:tw-size-4'],
-        'icon-xs': ['tw-size-6', 'tw-p-0', '[&_svg]:tw-size-4'],
-        'icon-2xs': ['!tw-inline-flex', 'tw-size-5', 'tw-max-h-5', '[&_svg]:tw-size-3'],
-        'icon-3xs': ['tw-h-fit', 'tw-w-fit', '[&_svg]:tw-size-4'],
+        medium: [
+          'tw-max-h-10',
+          'tw-min-h-10',
+          'tw-px-4',
+          'tw-py-2.5',
+          '[&_svg:not([class*="tw-size-"])]:tw-size-4',
+        ],
+        small: [
+          'tw-max-h-8',
+          'tw-min-h-8',
+          'tw-px-4',
+          'tw-py-1.5',
+          '[&_svg:not([class*="tw-size-"])]:tw-size-4',
+        ],
+        large: [
+          'tw-max-h-12',
+          'tw-min-h-12',
+          'tw-px-4',
+          'tw-py-3.5',
+          '[&_svg:not([class*="tw-size-"])]:tw-size-4',
+        ],
+
+        'icon-lg': ['tw-size-12', 'tw-p-0', '[&_svg:not([class*="tw-size-"])]:tw-size-6'],
+        icon: ['tw-size-10', 'tw-p-0', '[&_svg:not([class*="tw-size-"])]:tw-size-4'],
+        'icon-sm': ['tw-size-8', 'tw-p-0', '[&_svg:not([class*="tw-size-"])]:tw-size-4'],
+        'icon-xs': ['tw-size-6', 'tw-p-0', '[&_svg:not([class*="tw-size-"])]:tw-size-4'],
+        'icon-2xs': [
+          '!tw-inline-flex',
+          'tw-size-5',
+          'tw-max-h-5',
+          '[&_svg:not([class*="tw-size-"])]:tw-size-3',
+        ],
+        'icon-3xs': ['tw-h-fit', 'tw-w-fit', '[&_svg:not([class*="tw-size-"])]:tw-size-4'],
       },
     },
   },

package/src/components/Card/Card.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
+import { Plus } from '../../icons';
 import { ButtonInline } from '../Button';
-import { Icon } from '../Icon';
 
 import { Card } from './Card';
 
@@ -44,7 +44,7 @@ export const WithActions: Story = {
         <Card.Header className="tw-flex tw-justify-between">
           <Card.Title>Secrets</Card.Title>
           <ButtonInline color="dark">
-            <Icon icon="plus" />
+            <Plus className="tw-size-4" />
             New Secret
           </ButtonInline>
         </Card.Header>

package/src/components/Combobox/ComboboxItemIndicator.tsx

@@ -67,7 +67,7 @@ export const ComboboxItemIndicator = ({
         'group-data-[variant=default]/combobox-content:tw-right-4',
         // Lucide SVGs default to 24×24 — constrain the rendered child so the
         // 16px indicator slot owns the actual size.
-        '[&_svg]:tw-size-4',
+        '[&_svg:not([class*="tw-size-"])]:tw-size-4',
         'group-data-[highlighted]/combobox-item:tw-text-accent-foreground',
         'group-data-[variant=default]/combobox-content:group-data-[highlighted]/combobox-item:tw-text-foreground',
         className,

package/src/components/Command/CommandItem/CommandItem.tsx

@@ -69,7 +69,7 @@ export const CommandItem = ({
     >
       <CheckIndicator variant={variant} />
       {icon && (
-        <span className="tw-inline-flex tw-size-4 tw-shrink-0 tw-items-center tw-justify-center tw-text-neutral-400 [&_svg]:tw-size-4">
+        <span className="tw-inline-flex tw-size-4 tw-shrink-0 tw-items-center tw-justify-center tw-text-neutral-400 [&_svg:not([class*='tw-size-'])]:tw-size-4">
           {icon}
         </span>
       )}

package/src/components/DropdownMenu/DropdownMenuItemIndicator.tsx

@@ -31,7 +31,7 @@ const variants = cva(
           'tw-rounded-full',
           'tw-bg-white',
 
-          '[&_svg]:tw-size-2',
+          '[&_svg:not([class*="tw-size-"])]:tw-size-2',
           '[&_svg]:data-[state=unchecked]:tw-hidden',
           // Lucide Circle is stroke-only — force fill to match the stroke
           // (currentColor) so the indicator reads as a solid dot.
@@ -39,7 +39,7 @@ const variants = cva(
           'group-data-[variant=argo]/dropdown-menu-content:[&_svg]:tw-text-primary',
           'group-data-[variant=default]/dropdown-menu-content:[&_svg]:tw-text-secondary-500',
         ],
-        check: ['[&_svg]:tw-size-3.5', '[&_svg]:tw-text-primary'],
+        check: ['[&_svg:not([class*="tw-size-"])]:tw-size-3.5', '[&_svg]:tw-text-primary'],
         checkbox: [
           '[&_svg]:tw-text-white',
           'tw-border',
@@ -47,7 +47,7 @@ const variants = cva(
           'tw-border-neutral-200',
           'tw-rounded',
 
-          '[&_svg]:tw-size-3',
+          '[&_svg:not([class*="tw-size-"])]:tw-size-3',
           '[&_svg]:data-[state=unchecked]:tw-hidden',
           'group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:tw-border-primary',
           'group-data-[variant=argo]/dropdown-menu-content:data-[state=checked]:tw-bg-primary',
@@ -58,7 +58,7 @@ const variants = cva(
           'tw-size-5',
           // Lucide SVGs default to 24×24 — constrain the rendered ToggleRight
           // to the indicator slot so it doesn't overflow.
-          '[&_svg]:tw-size-5',
+          '[&_svg:not([class*="tw-size-"])]:tw-size-5',
           'tw-text-neutral-400',
           'data-[state=unchecked]:tw-rotate-180',
           'group-data-[variant=default]/dropdown-menu-content:data-[state=checked]:tw-text-secondary-500',

package/src/components/DropdownMenu/ItemIcon.tsx

@@ -17,7 +17,7 @@ export const ItemIcon = ({ className, children, ...props }: Props) => (
       // 20px container fits the 16px Lucide glyph plus 2px breathing room
       // each side — the previous tw-size-4 + tw-p-0.5 clipped the 16px child.
       'tw-size-5',
-      '[&_svg]:tw-size-4',
+      '[&_svg:not([class*="tw-size-"])]:tw-size-4',
       'group-data-[variant=default]/dropdown-menu-content:tw-text-neutral-400',
       'group-data-[variant=argo]/dropdown-menu-content:tw-text-primary',
       'group-data-[variant=argo]/dropdown-menu-content:group-aria-disabled:tw-text-muted-foreground',

package/src/components/FormGroup/FormGroup.stories.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import type { ComponentProps } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Icon } from '../Icon';
+import { Info } from '../../icons';
 import { Label } from '../Label';
 
 import { FormGroup } from './FormGroup';
@@ -39,7 +39,7 @@ const FormGroupDemo = ({ variant = 'primary', ...formGroupProps }: Props) => {
       <form className="tw-flex tw-flex-col tw-gap-4">
         <FormGroup {...formGroupProps}>
           <Label>
-            Text Input <Icon className="tw-text-neutral-400" icon="info-circle" />
+            Text Input <Info className="tw-size-4 tw-text-neutral-400" />
           </Label>
           <FormGroup.TextInput
             placeholder="e.g John"

package/src/components/HoverCard/HoverCardContent.tsx

@@ -53,6 +53,11 @@ export const HoverCardContent = ({
         'data-[state=closed]:tw-animate-out',
         'data-[state=closed]:tw-fade-out-0',
         'data-[state=closed]:tw-zoom-out-95',
+
+        // Default size for nested Lucide icons; callers can override on the icon.
+        "[&_svg:not([class*='tw-size-'])]:tw-size-4",
+        '[&_svg]:tw-shrink-0',
+
         className,
       )}
       {...props}

package/src/components/Input/Input.stories.tsx

@@ -1,7 +1,7 @@
 import type { ComponentProps } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Icon } from '../Icon';
+import { Search } from '../../icons';
 
 import { Input } from './Input';
 
@@ -68,7 +68,7 @@ export const Basic: Story = {
 
 export const WithPrefix: Story = {
   args: {
-    prefix: <Icon className="tw-text-neutral-400" icon="magnifying-glass" />,
+    prefix: <Search className="tw-size-4 tw-text-neutral-400" />,
   },
 };
 

package/src/components/InputGroup/InputGroup.stories.tsx

@@ -1,10 +1,9 @@
 import type { ComponentProps } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Upload, X } from '@keboola/design/icons';
+import { Copy, Search, Upload, X } from '@keboola/design/icons';
 
 import { Button } from '../Button/Button';
-import { Icon } from '../Icon';
 
 import { InputGroup } from './InputGroup';
 
@@ -92,7 +91,7 @@ export const InlineStartAddon: Story = {
   render: ({ disabled, readOnly, placeholder, ...args }) => (
     <InputGroup {...args}>
       <InputGroup.Addon align="inline-start">
-        <Icon className="tw-text-neutral-400" icon="magnifying-glass" />
+        <Search className="tw-size-4 tw-text-neutral-400" />
       </InputGroup.Addon>
       <InputGroup.Input placeholder={placeholder} disabled={disabled} readOnly={readOnly} />
     </InputGroup>
@@ -140,7 +139,7 @@ export const BlockStartAddon: Story = {
       <InputGroup {...args}>
         <InputGroup.Addon align="block-start" className="tw-justify-between">
           <InputGroup.Text>
-            <Icon icon="copy" />
+            <Copy />
             script.js
           </InputGroup.Text>
           <InputGroup.Button aria-label="Send">
@@ -190,7 +189,7 @@ export const BothBlockAddon: Story = {
     <InputGroup {...args}>
       <InputGroup.Addon align="block-start" className="tw-justify-between tw-border-b">
         <InputGroup.Text>
-          <Icon icon="copy" />
+          <Copy />
           script.js
         </InputGroup.Text>
         <InputGroup.Button aria-label="Send">

package/src/components/InputGroup/InputGroup.tsx

@@ -58,7 +58,7 @@ const inputGroupVariants = cva(
     defaultVariants: {
       variant: 'primary',
       state: 'default',
-      sizing: 'default',
+      sizing: 'medium',
       focusVariant: 'default',
     },
     compoundVariants: [

package/src/components/InputGroup/InputGroupAddon.tsx

@@ -5,32 +5,43 @@ import { cn } from '../../utils';
 
 // Padding only fires when the addon actually has content — keeps an empty
 // `<Addon>{maybeNull}</Addon>` from carving 16px out of the input row.
-const addonVariants = cva(['tw-flex', 'tw-items-center', 'tw-gap-1'], {
-  defaultVariants: {
-    align: 'inline-start',
-  },
-  variants: {
-    align: {
-      'inline-start': ['tw-order-first', '[&:not(:empty)]:tw-pl-4'],
-      'inline-end': ['tw-order-last', '[&:not(:empty)]:tw-pr-4'],
-      'block-start': [
-        'tw-order-first',
-        // `tw-w-full` needs to be empty-conditional too — when the addon
-        // has no content the root stays in flex-row, and a 100%-wide
-        // empty addon would claim half of the input row beside the input.
-        '[&:not(:empty)]:tw-w-full',
-        '[&:not(:empty)]:tw-px-4',
-        '[&:not(:empty)]:tw-py-1.5',
-      ],
-      'block-end': [
-        'tw-order-last',
-        '[&:not(:empty)]:tw-w-full',
-        '[&:not(:empty)]:tw-px-4',
-        '[&:not(:empty)]:tw-py-1.5',
-      ],
+const addonVariants = cva(
+  [
+    'tw-flex',
+    'tw-items-center',
+    'tw-gap-1',
+
+    // Default size for nested Lucide icons in prefix/suffix slots; callers can override on the icon.
+    "[&_svg:not([class*='tw-size-'])]:tw-size-4",
+    '[&_svg]:tw-shrink-0',
+  ],
+  {
+    defaultVariants: {
+      align: 'inline-start',
+    },
+    variants: {
+      align: {
+        'inline-start': ['tw-order-first', '[&:not(:empty)]:tw-pl-4'],
+        'inline-end': ['tw-order-last', '[&:not(:empty)]:tw-pr-4'],
+        'block-start': [
+          'tw-order-first',
+          // `tw-w-full` needs to be empty-conditional too — when the addon
+          // has no content the root stays in flex-row, and a 100%-wide
+          // empty addon would claim half of the input row beside the input.
+          '[&:not(:empty)]:tw-w-full',
+          '[&:not(:empty)]:tw-px-4',
+          '[&:not(:empty)]:tw-py-1.5',
+        ],
+        'block-end': [
+          'tw-order-last',
+          '[&:not(:empty)]:tw-w-full',
+          '[&:not(:empty)]:tw-px-4',
+          '[&:not(:empty)]:tw-py-1.5',
+        ],
+      },
     },
   },
-});
+);
 
 type Props = ComponentProps<'div'> & VariantProps<typeof addonVariants>;
 

package/src/components/Kbd/Kbd.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Icon } from '../Icon';
+import { Copy } from '../../icons';
 
 import { Kbd } from './Kbd';
 import { keys } from './keyboardKeys';
@@ -44,7 +44,7 @@ export const AsSymbol: Story = {
 
 export const AsIcon: Story = {
   args: {
-    children: <Icon icon="copy" />,
+    children: <Copy />,
   },
 };
 

package/src/components/Label/Label.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
+import { Info } from '../../icons';
 import { FormGroup } from '../FormGroup';
-import { Icon } from '../Icon';
 import { TextInput } from '../Input';
 
 import { Label } from './Label';
@@ -46,7 +46,7 @@ export const WithIcon: Story = {
     className: 'tw-flex tw-items-center tw-gap-1',
     children: (
       <>
-        Label <Icon className="tw-text-neutral-400" icon="info-circle" />
+        Label <Info className="tw-size-4 tw-text-neutral-400" />
       </>
     ),
   },

package/src/components/Modal/ModalBody.tsx

@@ -21,6 +21,11 @@ export const ModalBody = ({ className, ...props }: Props) => (
 
       'tw-px-1', // 4 px to complement ModalContent and still keep input focus outline visible
       'tw-py-1',
+
+      // Default size for nested Lucide icons; callers can override on the icon.
+      "[&_svg:not([class*='tw-size-'])]:tw-size-4",
+      '[&_svg]:tw-shrink-0',
+
       className,
     )}
     {...props}

package/src/components/Modal/ModalIcon.tsx

@@ -96,7 +96,7 @@ export const ModalIcon = (props: Props) => {
                 'tw-text-white': props.color !== 'violet',
                 'tw-text-purple-500': props.color === 'violet',
               },
-              '[&_svg]:tw-size-6',
+              '[&_svg:not([class*="tw-size-"])]:tw-size-6',
               '[&_svg]:tw-aspect-square',
             )}
           >

package/src/components/Navbar/Navbar.stories.tsx

@@ -1,8 +1,7 @@
 import type { ComponentProps } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Bell, Diamond, Keboola, Search } from '../../icons';
-import { Icon } from '../Icon';
+import { Bell, ChevronsUpDown, Diamond, Keboola, Search } from '@keboola/design/icons';
 
 import { Navbar } from './Navbar';
 
@@ -54,13 +53,13 @@ export const Default: Story = {
           <Navbar.MenuItem>
             <Navbar.MenuButton variant="emphasized" icon={<Diamond className="tw-size-4" />}>
               Project
-              <Icon icon={['far', 'angles-up-down']} />
+              <ChevronsUpDown className="tw-size-5" />
             </Navbar.MenuButton>
           </Navbar.MenuItem>
           <Navbar.MenuItem>
             <Navbar.MenuButton icon={<Diamond className="tw-size-4" />}>
               Branch
-              <Icon icon={['far', 'angles-up-down']} />
+              <ChevronsUpDown className="tw-size-5" />
             </Navbar.MenuButton>
           </Navbar.MenuItem>
         </Navbar.Menu>
@@ -109,7 +108,7 @@ export const ContentScrolling: Story = {
             <Navbar.MenuItem key={item}>
               <Navbar.MenuButton icon={<Diamond className="tw-size-4" />}>
                 {item}
-                <Icon icon={['far', 'angles-up-down']} />
+                <ChevronsUpDown className="tw-size-5" />
               </Navbar.MenuButton>
             </Navbar.MenuItem>
           ))}

package/src/components/Navbar/NavbarMenuItemAdornment.tsx

@@ -9,7 +9,7 @@ const variants = cva(
     'tw-justify-center',
     'tw-items-center',
 
-    '[&_svg]:tw-size-3',
+    '[&_svg:not([class*="tw-size-"])]:tw-size-3',
     '[&:not(svg)]:tw-h-5',
     '[&:not(svg)]:tw-min-w-5',
 
@@ -43,7 +43,7 @@ const variants = cva(
           'group-data-[accent=orange]/navbar:tw-bg-warning-500',
           'group-data-[accent=green]/navbar:tw-bg-primary-500',
         ],
-        'icon-button': ['tw-size-4', 'tw-max-h-9', 'tw-leading-9', 'tw-p-0'],
+        'icon-button': ['tw-size-4', '!tw-p-0', '[&_svg:not([class*="tw-size-"])]:tw-size-4'],
         shortcut: ['tw-bg-muted', 'tw-text-sidebar-foreground', 'tw-ml-auto'],
       },
     },

package/src/components/Pagination/Pagination.stories.tsx

@@ -104,7 +104,6 @@ export const RowsPerPage: Story = {
         </Label>
         <Select
           variant="argo"
-          sizing="medium"
           id="rows-per-page"
           className="tw-min-w-20"
           defaultValue="5"

package/src/components/Pagination/PaginationEllipsis.tsx

@@ -16,7 +16,7 @@ export const PaginationEllipsis = ({ className, ...props }: Props) => (
       'tw-justify-center',
 
       'tw-text-foreground',
-      '[&_svg]:tw-size-4',
+      '[&_svg:not([class*="tw-size-"])]:tw-size-4',
       className,
     )}
     {...props}

package/src/components/Popover/PopoverContent.tsx

@@ -48,6 +48,10 @@ const variants = cva(
     'data-[side=left]:tw-slide-in-from-right-2',
     'data-[side=right]:tw-slide-in-from-left-2',
     'data-[side=top]:tw-slide-in-from-bottom-2',
+
+    // Default size for nested Lucide icons; callers can override on the icon.
+    "[&_svg:not([class*='tw-size-'])]:tw-size-4",
+    '[&_svg]:tw-shrink-0',
   ],
   {
     defaultVariants: {

package/src/components/Select/SelectContent.tsx

@@ -10,7 +10,7 @@ const scrollButtonStyles = cn(
   'tw-justify-center',
   'tw-rounded-sm',
   'tw-p-1',
-  '[&_svg]:tw-size-5',
+  '[&_svg:not([class*="tw-size-"])]:tw-size-5',
 );
 
 type Variant = 'default' | 'argo';

package/src/components/Select/SelectTrigger.tsx

@@ -49,7 +49,7 @@ const variants = cva(
     defaultVariants: {
       variant: 'primary',
       state: 'default',
-      sizing: 'default',
+      sizing: 'medium',
     },
     compoundVariants: [
       {

package/src/components/Separator/Separator.stories.tsx

@@ -39,3 +39,22 @@ const meta: Meta<typeof Separator> = {
 export default meta;
 
 export const Basic: Story = {};
+
+/**
+ * Pass `label` to render text centered between two line segments — the typical
+ * "OR" divider used between auth options. Always rendered horizontally.
+ */
+export const WithLabel: Story = {
+  args: {
+    label: 'OR',
+  },
+  render: (props) => (
+    <Card>
+      <Card.Content className="tw-flex tw-w-80 tw-flex-col tw-gap-4">
+        <span>Sign in with email</span>
+        <Separator {...props} />
+        <span>Sign in with SSO</span>
+      </Card.Content>
+    </Card>
+  ),
+};

package/src/components/Separator/Separator.test.tsx

@@ -0,0 +1,39 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+
+import { Separator } from './Separator';
+
+describe('<Separator />', () => {
+  it('renders the plain decorative separator without a label', () => {
+    const { container } = render(<Separator orientation="horizontal" />);
+    expect(container.querySelector('[data-orientation="horizontal"]')).not.toBeNull();
+    expect(screen.queryByText('OR')).toBeNull();
+  });
+
+  it('renders the label between two line segments when label is provided', () => {
+    const { container } = render(<Separator label="OR" />);
+    expect(screen.getByText('OR')).not.toBeNull();
+    // Decorative line segments are drawn with before:/after: pseudo-elements,
+    // so the label is the only DOM child of the separator root.
+    const root = container.querySelector('[data-orientation="horizontal"]');
+    expect(root?.children).toHaveLength(0);
+    expect(root?.textContent).toBe('OR');
+  });
+
+  it('forces horizontal orientation when a label is provided', () => {
+    const { container } = render(<Separator orientation="vertical" label="OR" />);
+    expect(container.querySelector('[data-orientation="horizontal"]')).not.toBeNull();
+    expect(container.querySelector('[data-orientation="vertical"]')).toBeNull();
+  });
+
+  it('treats label={false} as no label (conditional rendering pattern)', () => {
+    const condition = false;
+    render(<Separator label={condition && 'OR'} />);
+    expect(screen.queryByText('OR')).toBeNull();
+  });
+
+  it('treats label={null} as no label', () => {
+    render(<Separator label={null} />);
+    expect(screen.queryByText('OR')).toBeNull();
+  });
+});

package/src/components/Separator/Separator.tsx

@@ -1,8 +1,10 @@
-import type { ComponentProps } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 import * as RSeparator from '@radix-ui/react-separator';
 import type { VariantProps } from 'class-variance-authority';
 import { cva } from 'class-variance-authority';
 
+import { cn } from '../../utils';
+
 const separatorVariants = cva(
   [
     // position
@@ -13,7 +15,7 @@ const separatorVariants = cva(
 
     // before
     "before:tw-content-['']",
-    'before:tw-bg-neutral-150',
+    'before:tw-bg-border',
   ],
   {
     defaultVariants: {
@@ -67,18 +69,47 @@ const separatorVariants = cva(
 );
 
 type Props = VariantProps<typeof separatorVariants> &
-  Omit<ComponentProps<typeof RSeparator.Root>, 'decorative'>;
+  Omit<ComponentProps<typeof RSeparator.Root>, 'decorative'> & {
+    /**
+     * Optional label rendered centered between two line segments
+     * (typical "OR" divider). Implies `orientation="horizontal"`.
+     * Overrides any `children` passed to the component.
+     */
+    label?: ReactNode;
+  };
 
 export const Separator = ({
   className,
   orientation = 'vertical',
   size = 'full',
+  label,
   ...props
-}: Props) => (
-  <RSeparator.Root
-    {...props}
-    decorative
-    orientation={orientation}
-    className={separatorVariants({ size, orientation, className })}
-  />
-);
+}: Props) => {
+  if (label != null && label !== false) {
+    return (
+      <RSeparator.Root
+        {...props}
+        decorative
+        orientation="horizontal"
+        className={cn(
+          'tw-flex tw-w-full tw-items-center tw-gap-3 tw-self-stretch',
+          'tw-text-xs tw-font-medium tw-text-muted-foreground',
+          "before:tw-content-[''] before:tw-h-px before:tw-flex-1 before:tw-bg-border",
+          "after:tw-content-[''] after:tw-h-px after:tw-flex-1 after:tw-bg-border",
+          className,
+        )}
+      >
+        {label}
+      </RSeparator.Root>
+    );
+  }
+
+  return (
+    <RSeparator.Root
+      {...props}
+      decorative
+      orientation={orientation}
+      className={separatorVariants({ size, orientation, className })}
+    />
+  );
+};