oneslash-design-system 1.2.24 → 1.2.26

package/dist/components/alert.d.ts

@@ -3,8 +3,10 @@ interface AlertProps {
     open?: boolean;
     type: 'success' | 'warning' | 'error' | 'info' | 'default';
     message: string;
-    onClose: () => void;
+    secondMessage?: string;
+    onClose?: () => void;
     showCloseButton?: boolean;
+    variant?: 'toast' | 'inline';
 }
-export default function Alert({ open, type, message, onClose, showCloseButton }: AlertProps): React.JSX.Element | null;
+export default function Alert({ open, type, message, secondMessage, onClose, showCloseButton, variant, }: AlertProps): React.JSX.Element | null;
 export {};

package/dist/components/alert.jsx

@@ -3,9 +3,9 @@ import React, { useEffect, useState } from 'react';
 import { Info, AlertCircle, AlertTriangle, CheckCircle } from 'lucide-react';
 import IconButton from './iconButton';
 export default function Alert(_a) {
-    var open = _a.open, type = _a.type, message = _a.message, onClose = _a.onClose, _b = _a.showCloseButton, showCloseButton = _b === void 0 ? false : _b;
-    var _c = useState(false), isVisible = _c[0], setIsVisible = _c[1];
-    var _d = useState(false), shouldRender = _d[0], setShouldRender = _d[1];
+    var _b = _a.open, open = _b === void 0 ? true : _b, type = _a.type, message = _a.message, secondMessage = _a.secondMessage, onClose = _a.onClose, _c = _a.showCloseButton, showCloseButton = _c === void 0 ? false : _c, _d = _a.variant, variant = _d === void 0 ? 'toast' : _d;
+    var _e = useState(false), isVisible = _e[0], setIsVisible = _e[1];
+    var _f = useState(false), shouldRender = _f[0], setShouldRender = _f[1];
     useEffect(function () {
         if (open) {
             setShouldRender(true);
@@ -37,7 +37,7 @@ export default function Alert(_a) {
         // Wait for animation to complete before unmounting
         setTimeout(function () {
             setShouldRender(false);
-            onClose();
+            onClose === null || onClose === void 0 ? void 0 : onClose();
         }, 300);
     };
     if (!shouldRender)
@@ -77,17 +77,22 @@ export default function Alert(_a) {
             bgColor = 'bg-light-secondary-light dark:bg-dark-secondary-light';
             break;
     }
-    return (<div className="fixed top-4 inset-x-0 z-50 flex justify-center pointer-events-none">
-      <div className={"flex items-start justify-between w-full max-w-md p-2 rounded-[8px] pointer-events-auto transition-opacity duration-200 ease-out ".concat(bgColor, " ").concat(isVisible
-            ? 'opacity-100'
-            : 'opacity-0')}>
-        <div className="flex items-start gap-2 text-light-text-primary dark:text-dark-text-primary">
-          {getIcon()}
+    var alertContent = (<div className={"flex items-start justify-between w-full p-2 rounded-[8px] transition-opacity duration-200 ease-out ".concat(bgColor, " ").concat(isVisible ? 'opacity-100' : 'opacity-0', " ").concat(variant === 'toast' ? 'max-w-md pointer-events-auto' : '')}>
+      <div className="flex items-start gap-2 text-light-text-primary dark:text-dark-text-primary">
+        {getIcon()}
+        <div className="flex flex-col text-center">
           <span className="body1">{message}</span>
+          {secondMessage && (<span className="body2 opacity-70">{secondMessage}</span>)}
         </div>
-        {showCloseButton && (<div className="ml-4">
-            <IconButton color="iconOnly" state="enabled" size="small" iconName="X" onClick={handleClose}/>
-          </div>)}
       </div>
+      {showCloseButton && (<div className="ml-4">
+          <IconButton color="iconOnly" state="enabled" size="small" iconName="X" onClick={handleClose}/>
+        </div>)}
+    </div>);
+    if (variant === 'inline') {
+        return alertContent;
+    }
+    return (<div className="fixed top-4 inset-x-0 z-50 flex justify-center pointer-events-none">
+      {alertContent}
     </div>);
 }

package/dist/components/button.d.ts

@@ -2,13 +2,14 @@ import React from 'react';
 interface ButtonProps {
     size: 'small' | 'medium' | 'large';
     type: 'primary' | 'secondary' | 'tertiary' | 'textOnly';
-    state: 'enabled' | 'hovered' | 'focused' | 'disabled';
+    state: 'enabled' | 'hovered' | 'focused' | 'disabled' | 'selected';
     label: string;
+    secondLabel?: string;
     decoIcon?: string;
     actionIcon?: string;
     onClickButton?: any;
     onClickActionIcon?: () => void;
     className?: string;
 }
-export default function Button({ size, type, state, label, decoIcon, actionIcon, onClickButton, onClickActionIcon, className, }: ButtonProps): React.JSX.Element;
+export default function Button({ size, type, state, label, secondLabel, decoIcon, actionIcon, onClickButton, onClickActionIcon, className, }: ButtonProps): React.JSX.Element;
 export {};

package/dist/components/button.jsx

@@ -38,7 +38,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 import React, { useState, useEffect, useCallback } from 'react';
 export default function Button(_a) {
     var _this = this;
-    var size = _a.size, type = _a.type, state = _a.state, label = _a.label, decoIcon = _a.decoIcon, actionIcon = _a.actionIcon, onClickButton = _a.onClickButton, onClickActionIcon = _a.onClickActionIcon, _b = _a.className, className = _b === void 0 ? '' : _b;
+    var size = _a.size, type = _a.type, state = _a.state, label = _a.label, secondLabel = _a.secondLabel, decoIcon = _a.decoIcon, actionIcon = _a.actionIcon, onClickButton = _a.onClickButton, onClickActionIcon = _a.onClickActionIcon, _b = _a.className, className = _b === void 0 ? '' : _b;
     var _c = useState(false), isHovered = _c[0], setIsHovered = _c[1];
     var _d = useState(null), IconLeft = _d[0], setIconLeft = _d[1];
     var _e = useState(null), IconRight = _e[0], setIconRight = _e[1];
@@ -118,15 +118,19 @@ export default function Button(_a) {
         disabled: type === 'textOnly'
             ? 'cursor-not-allowed text-light-text-disabled dark:text-dark-text-disabled bg-transparent'
             : 'cursor-not-allowed text-light-text-disabled dark:text-dark-text-disabled bg-light-actionBackground-disabled dark:bg-dark-actionBackground-disabled',
+        selected: 'cursor-pointer bg-light-primary-dark dark:bg-dark-primary-dark text-light-text-contrast dark:text-dark-text-contrast',
     };
-    var buttonClasses = "\n    flex flex-row items-center rounded-[8px] transition-colors duration-200 ease-in-out justify-between\n    ".concat(sizeClasses, "\n    ").concat(state === 'enabled' ? baseTypeClasses : '', "\n    ").concat(state === 'focused' ? stateClasses.focused : '', "\n    ").concat(state === 'disabled' ? stateClasses.disabled : baseTypeClasses, "\n    ").concat(state !== 'disabled' && isHovered ? hoverTypeClasses : '', "\n    ").concat(className, "\n  ");
+    var buttonClasses = "\n    flex flex-row items-center rounded-[8px] transition-colors duration-200 ease-in-out justify-between\n    ".concat(sizeClasses, "\n    ").concat(state === 'selected' ? stateClasses.selected : '', "\n    ").concat(state === 'enabled' ? baseTypeClasses : '', "\n    ").concat(state === 'focused' ? "".concat(baseTypeClasses, " ").concat(stateClasses.focused) : '', "\n    ").concat(state === 'disabled' ? stateClasses.disabled : '', "\n    ").concat(state !== 'disabled' && state !== 'selected' && isHovered ? hoverTypeClasses : '', "\n    ").concat(state === 'hovered' ? "".concat(baseTypeClasses, " ").concat(hoverTypeClasses) : '', "\n    ").concat(className, "\n  ");
     return (<button className={buttonClasses} onMouseEnter={function () { if (state !== 'disabled')
         setIsHovered(true); }} onMouseLeave={function () { if (state !== 'disabled')
         setIsHovered(false); }} onClick={onClickButton}>
       {/* Group IconLeft and label in a flex container for left alignment */}
       <div className="flex items-center">
         {IconLeft && <IconLeft className={sizeIcon} strokeWidth={2}/>}
-        <div className="whitespace-nowrap overflow-hidden truncate px-2">{label}</div>
+        <div className="flex flex-col text-center px-2">
+          <span className="whitespace-nowrap overflow-hidden truncate">{label}</span>
+          {secondLabel && (<span className="whitespace-nowrap overflow-hidden truncate text-body2 opacity-70">{secondLabel}</span>)}
+        </div>
       </div>
       {IconRight && (<div onClick={onClickActionIcon} className="cursor-pointer">
           <IconRight className={sizeIcon} strokeWidth={2}/>

package/dist/components/checkBox.d.ts

@@ -1,8 +1,9 @@
 interface CheckboxProps {
     label?: string;
+    secondLabel?: string;
     checked?: boolean;
     onChange?: (checked: boolean) => void;
     disabled?: boolean;
 }
-export default function Checkbox({ label, checked, onChange, disabled }: CheckboxProps): import("react").JSX.Element;
+export default function Checkbox({ label, secondLabel, checked, onChange, disabled }: CheckboxProps): import("react").JSX.Element;
 export {};

package/dist/components/checkBox.jsx

@@ -1,7 +1,7 @@
 'use client';
 import { useState } from 'react';
 export default function Checkbox(_a) {
-    var label = _a.label, _b = _a.checked, checked = _b === void 0 ? false : _b, onChange = _a.onChange, _c = _a.disabled, disabled = _c === void 0 ? false : _c;
+    var label = _a.label, secondLabel = _a.secondLabel, _b = _a.checked, checked = _b === void 0 ? false : _b, onChange = _a.onChange, _c = _a.disabled, disabled = _c === void 0 ? false : _c;
     var _d = useState(checked), isChecked = _d[0], setIsChecked = _d[1];
     var handleToggle = function () {
         if (disabled)
@@ -32,10 +32,17 @@ export default function Checkbox(_a) {
             </svg>)}
         </div>
       </div>
-      {label && (<span className={"ml-2 text-body1 ".concat(disabled
-                ? 'text-light-text-disabled dark:text-dark-text-disabled'
-                : 'text-light-text-primary dark:text-dark-text-primary')}>
-          {label}
-        </span>)}
+      {(label || secondLabel) && (<div className="flex flex-col ml-2">
+          {label && (<span className={"text-body1 ".concat(disabled
+                    ? 'text-light-text-disabled dark:text-dark-text-disabled'
+                    : 'text-light-text-primary dark:text-dark-text-primary')}>
+              {label}
+            </span>)}
+          {secondLabel && (<span className={"text-body2 opacity-70 ".concat(disabled
+                    ? 'text-light-text-disabled dark:text-dark-text-disabled'
+                    : 'text-light-text-primary dark:text-dark-text-primary')}>
+              {secondLabel}
+            </span>)}
+        </div>)}
     </label>);
 }

package/dist/components/emptyBox.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 interface EmptyBoxProps {
     text: string;
+    secondText?: string;
     size: "small" | "large";
 }
-export default function EmptyBox({ text, size, }: EmptyBoxProps): React.JSX.Element;
+export default function EmptyBox({ text, secondText, size, }: EmptyBoxProps): React.JSX.Element;
 export {};

package/dist/components/emptyBox.jsx

@@ -2,14 +2,19 @@
 import React from 'react';
 import { AlertCircle } from 'lucide-react';
 export default function EmptyBox(_a) {
-    var text = _a.text, size = _a.size;
+    var text = _a.text, secondText = _a.secondText, size = _a.size;
     var color = 'text-light-text-disabled dark:text-dark-text-disabled';
     var height = size === 'small' ? 'py-6' : 'h-full';
     var iconSize = 'size-6';
     return (<div className={"flex flex-col space-y-2 justify-center items-center w-full ".concat(height)}>
             <AlertCircle className={"".concat(iconSize, " ").concat(color)} strokeWidth={2}/>
-            <p className={"text-body1 text-center ".concat(color)}>
-                {text}
-            </p>
+            <div className="flex flex-col text-center">
+                <p className={"text-body1 ".concat(color)}>
+                    {text}
+                </p>
+                {secondText && (<p className={"text-body2 opacity-70 ".concat(color)}>
+                        {secondText}
+                    </p>)}
+            </div>
         </div>);
 }

package/dist/components/icon.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { icons } from 'lucide-react';
+type IconName = keyof typeof icons;
+interface IconProps {
+    name: IconName;
+    size?: 'small' | 'medium' | 'large' | number;
+    color?: 'primary' | 'secondary' | 'disabled' | 'error' | 'warning' | 'success' | 'info' | 'accent' | 'inherit';
+    strokeWidth?: number;
+    className?: string;
+}
+export default function Icon({ name, size, color, strokeWidth, className, }: IconProps): React.JSX.Element | null;
+export {};

package/dist/components/icon.jsx

@@ -0,0 +1,30 @@
+'use client';
+import React from 'react';
+import { icons } from 'lucide-react';
+var sizeMap = {
+    small: 16,
+    medium: 24,
+    large: 32,
+};
+var colorMap = {
+    primary: 'text-light-text-primary dark:text-dark-text-primary',
+    secondary: 'text-light-text-secondary dark:text-dark-text-secondary',
+    disabled: 'text-light-text-disabled dark:text-dark-text-disabled',
+    error: 'text-light-error-main dark:text-dark-error-main',
+    warning: 'text-light-warning-main dark:text-dark-warning-main',
+    success: 'text-light-success-main dark:text-dark-success-main',
+    info: 'text-light-info-main dark:text-dark-info-main',
+    accent: 'text-light-accent-main dark:text-dark-accent-main',
+    inherit: '',
+};
+export default function Icon(_a) {
+    var name = _a.name, _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.color, color = _c === void 0 ? 'primary' : _c, _d = _a.strokeWidth, strokeWidth = _d === void 0 ? 2 : _d, _e = _a.className, className = _e === void 0 ? '' : _e;
+    var LucideIcon = icons[name];
+    if (!LucideIcon) {
+        console.warn("Icon \"".concat(name, "\" not found in Lucide icons"));
+        return null;
+    }
+    var iconSize = typeof size === 'number' ? size : sizeMap[size];
+    var colorClass = colorMap[color];
+    return (<LucideIcon size={iconSize} strokeWidth={strokeWidth} className={"".concat(colorClass, " ").concat(className).trim()}/>);
+}

package/dist/components/line.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface LineProps {
+    direction?: 'horizontal' | 'vertical';
+    className?: string;
+}
+export default function Line({ direction, className, }: LineProps): React.JSX.Element;
+export {};

package/dist/components/line.jsx

@@ -0,0 +1,10 @@
+'use client';
+import React from 'react';
+export default function Line(_a) {
+    var _b = _a.direction, direction = _b === void 0 ? 'horizontal' : _b, _c = _a.className, className = _c === void 0 ? '' : _c;
+    var baseClasses = 'bg-light-misc-divider dark:bg-dark-misc-divider';
+    if (direction === 'vertical') {
+        return (<div className={"".concat(baseClasses, " w-px h-full ").concat(className)}/>);
+    }
+    return (<div className={"".concat(baseClasses, " h-px w-full ").concat(className)}/>);
+}

package/dist/components/menuItem.d.ts

@@ -5,6 +5,7 @@ interface MenuItemProps {
     userHandle?: string;
     userImgUrl?: string;
     label: string;
+    secondLabel?: string;
     isSelected?: boolean;
     onClick?: any;
     className?: string;
@@ -12,8 +13,10 @@ interface MenuItemProps {
     tag?: {
         label: React.ReactNode;
         iconName?: string;
+        color?: 'default' | 'success' | 'warning' | 'error' | 'info';
+        variant?: 'contained' | 'textOnly' | 'dot';
     };
     iconRight?: string;
 }
-export default function MenuItem({ href, iconName, userHandle, userImgUrl, label, isSelected, onClick, className, size, tag, iconRight, }: MenuItemProps): JSX.Element;
+export default function MenuItem({ href, iconName, userHandle, userImgUrl, label, secondLabel, isSelected, onClick, className, size, tag, iconRight, }: MenuItemProps): JSX.Element;
 export {};

package/dist/components/menuItem.jsx

@@ -41,7 +41,7 @@ import UserImage from './userImage';
 import Tag from './tag';
 export default function MenuItem(_a) {
     var _this = this;
-    var href = _a.href, iconName = _a.iconName, userHandle = _a.userHandle, userImgUrl = _a.userImgUrl, label = _a.label, isSelected = _a.isSelected, onClick = _a.onClick, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, tag = _a.tag, iconRight = _a.iconRight;
+    var href = _a.href, iconName = _a.iconName, userHandle = _a.userHandle, userImgUrl = _a.userImgUrl, label = _a.label, secondLabel = _a.secondLabel, isSelected = _a.isSelected, onClick = _a.onClick, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, tag = _a.tag, iconRight = _a.iconRight;
     var _d = useState(null), IconLeft = _d[0], setIconLeft = _d[1];
     var _e = useState(null), IconRight = _e[0], setIconRight = _e[1];
     var loadIcon = useCallback(function (iconName) { return __awaiter(_this, void 0, void 0, function () {
@@ -99,17 +99,24 @@ export default function MenuItem(_a) {
     var content = (<div className={"\n        flex items-center p-2 rounded-[8px] cursor-pointer justify-between transition-colors duration-200 ease-in-out\n        ".concat(isSelected
             ? 'bg-light-primary-dark dark:bg-dark-primary-dark text-light-text-contrast dark:text-dark-text-contrast'
             : 'hover:bg-light-background-accent200 hover:dark:bg-dark-background-accent200', "\n        ").concat(className, "\n      ")} style={{ width: '100%' }} onClick={onClick}>
-      {/* Left group: icon/userImg + label + tag with 8px gap */}
-      <div className="flex items-center gap-2">
-        {userImgUrl ? (<UserImage userHandle={userHandle || ''} userImgUrl={userImgUrl}/>) : (IconLeft && (<IconLeft className={"".concat(iconSize, " ").concat(isSelected ? 'text-light-text-contrast dark:text-dark-text-contrast' : 'text-light-text-secondary dark:text-dark-text-secondary')} strokeWidth={2}/>))}
-        <span className={"whitespace-nowrap ".concat(labelClass, " ").concat(isSelected ? 'text-light-text-contrast dark:text-dark-text-contrast' : 'text-light-text-primary dark:text-dark-text-primary')}>
-          {label}
-        </span>
-        {tag && (<Tag variant="contained" size={tagSize} label={tag.label} iconName={tag.iconName}/>)}
+      {/* Left group: icon/userImg + label with 8px gap */}
+      <div className="flex items-center gap-2 min-w-0">
+        {userImgUrl ? (<UserImage userHandle={userHandle || ''} userImgUrl={userImgUrl}/>) : (IconLeft && (<IconLeft className={"".concat(iconSize, " flex-shrink-0 ").concat(isSelected ? 'text-light-text-contrast dark:text-dark-text-contrast' : 'text-light-text-secondary dark:text-dark-text-secondary')} strokeWidth={2}/>))}
+        <div className="flex flex-col min-w-0">
+          <span className={"truncate ".concat(labelClass, " ").concat(isSelected ? 'text-light-text-contrast dark:text-dark-text-contrast' : 'text-light-text-primary dark:text-dark-text-primary')}>
+            {label}
+          </span>
+          {secondLabel && (<span className={"truncate text-body2 opacity-70 ".concat(isSelected ? 'text-light-text-contrast dark:text-dark-text-contrast' : 'text-light-text-primary dark:text-dark-text-primary')}>
+              {secondLabel}
+            </span>)}
+        </div>
       </div>
 
-      {/* Right icon aligned to the right */}
-      {IconRight && (<IconRight className={"".concat(iconSize, " ").concat(isSelected ? 'text-light-text-contrast dark:text-dark-text-contrast' : 'text-light-text-secondary dark:text-dark-text-secondary', " flex-shrink-0")} strokeWidth={2}/>)}
+      {/* Right group: tag + icon aligned to the right */}
+      <div className="flex items-center gap-2 flex-shrink-0">
+        {tag && (<Tag variant={tag.variant || 'contained'} size={tagSize} label={tag.label} iconName={tag.iconName} color={tag.color}/>)}
+        {IconRight && (<IconRight className={"".concat(iconSize, " ").concat(isSelected ? 'text-light-text-contrast dark:text-dark-text-contrast' : 'text-light-text-secondary dark:text-dark-text-secondary', " flex-shrink-0")} strokeWidth={2}/>)}
+      </div>
     </div>);
     return href ? <NextLink href={href}>{content}</NextLink> : content;
 }

package/dist/components/modal.d.ts

@@ -2,10 +2,11 @@ import React from 'react';
 interface ModalProps {
     isOpen: boolean;
     title?: string;
+    secondTitle?: string;
     children: React.ReactNode;
     onClose: () => void;
     actions?: React.ReactNode;
-    size?: 'medium' | 'large';
+    size?: 'small' | 'medium' | 'large';
 }
-export default function Modal({ isOpen, title, children, onClose, actions, size, }: ModalProps): React.JSX.Element | null;
+export default function Modal({ isOpen, title, secondTitle, children, onClose, actions, size, }: ModalProps): React.JSX.Element | null;
 export {};

package/dist/components/modal.jsx

@@ -1,17 +1,11 @@
 'use client';
 import React, { useEffect } from 'react';
 export default function Modal(_a) {
-    var isOpen = _a.isOpen, title = _a.title, children = _a.children, onClose = _a.onClose, actions = _a.actions, _b = _a.size, size = _b === void 0 ? 'medium' : _b;
-    if (!isOpen)
-        return null;
-    // close modal by clicking elsewhere
-    var handleOverlayClick = function (e) {
-        if (e.target === e.currentTarget) {
-            onClose();
-        }
-    };
+    var isOpen = _a.isOpen, title = _a.title, secondTitle = _a.secondTitle, children = _a.children, onClose = _a.onClose, actions = _a.actions, _b = _a.size, size = _b === void 0 ? 'medium' : _b;
     // close modal by esc keypress
     useEffect(function () {
+        if (!isOpen)
+            return;
         var handleKeyDown = function (e) {
             if (e.key === 'Escape') {
                 onClose();
@@ -21,27 +15,53 @@ export default function Modal(_a) {
         return function () {
             window.removeEventListener('keydown', handleKeyDown);
         };
-    }, [onClose]);
+    }, [isOpen, onClose]);
     // Determine width based on size prop
-    var modalWidth = size === 'large' ? 'w-[1200px]' : 'w-[600px]';
-    var maxWidth = size === 'large' ? '1200px' : '600px';
-    return (<div className="fixed inset-[-32px] bg-black bg-opacity-50 flex items-center justify-center z-50" onClick={handleOverlayClick} role="dialog" aria-labelledby="modal-title" aria-modal="true" tabIndex={-1}>
-      <div className={"bg-light-background-default dark:bg-dark-background-default p-6 rounded-[8px] space-y-4 ".concat(modalWidth)} style={{
+    var sizeConfig = {
+        small: { width: 'w-[480px]', maxWidth: '480px' },
+        medium: { width: 'w-[600px]', maxWidth: '600px' },
+        large: { width: 'w-[1024px]', maxWidth: '1024px' },
+    };
+    var _c = sizeConfig[size], modalWidth = _c.width, maxWidth = _c.maxWidth;
+    // close modal by clicking elsewhere
+    var handleOverlayClick = function (e) {
+        if (e.target === e.currentTarget) {
+            onClose();
+        }
+    };
+    if (!isOpen)
+        return null;
+    return (<div className="fixed bg-black bg-opacity-50 flex items-center justify-center z-50" style={{ top: 0, left: 0, right: 0, bottom: 0 }} onClick={handleOverlayClick} role="dialog" aria-labelledby="modal-title" aria-modal="true" tabIndex={-1}>
+      <div className={"bg-light-background-default dark:bg-dark-background-default rounded-[8px] ".concat(modalWidth, " flex flex-col")} style={{
             maxWidth: maxWidth,
             width: 'calc(100vw - 64px)',
-            maxHeight: '800px',
-            height: 'auto',
+            maxHeight: '90vh',
+            overflow: 'hidden',
+        }}>
+        {(title || actions) && (<div className="px-6 py-3 border-b border-light-misc-divider dark:border-dark-misc-divider flex justify-between items-start" style={{ flexShrink: 0 }}>
+            {title && (<div className="flex flex-col">
+                <h2 id="modal-title" className="text-h5 text-light-text-primary dark:text-dark-text-primary">
+                  {title}
+                </h2>
+                {secondTitle && (<span className="text-body2 opacity-70 text-light-text-primary dark:text-dark-text-primary">
+                    {secondTitle}
+                  </span>)}
+              </div>)}
+            {actions && (<div className="flex space-x-2">
+                {actions}
+              </div>)}
+          </div>)}
+
+        <div className="text-body1 space-y-4 text-light-text-primary dark:text-dark-text-primary p-6" style={{
             overflowY: 'auto',
+            flexGrow: 1,
+            minHeight: 0,
+            scrollbarWidth: 'none',
+            msOverflowStyle: 'none',
         }}>
-        {title && (<h2 id="modal-title" className="text-h6">
-            {title}
-          </h2>)}
-        <div className="text-body1 space-y-4">
           {children}
         </div>
-        {actions && (<div className="flex justify-between">
-            {actions}
-          </div>)}
+
       </div>
     </div>);
 }

package/dist/components/radioGroup.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 interface RadioOption {
     label: string;
+    secondLabel?: string;
     value: string;
 }
 interface RadioGroupProps {

package/dist/components/radioGroup.jsx

@@ -11,7 +11,10 @@ export default function RadioGroup(_a) {
             {/* Inner circle */}
             {selectedValue === option.value && (<div className='absolute w-2 h-2 rounded-full bg-light-text-primary dark:bg-dark-text-primary'/>)}
           </div>
-          <span className="ml-2 text-body1 text-light-text-primary dark:text-dark-text-primary">{option.label}</span>
+          <div className="flex flex-col ml-2">
+            <span className="text-body1 text-light-text-primary dark:text-dark-text-primary">{option.label}</span>
+            {option.secondLabel && (<span className="text-body2 opacity-70 text-light-text-primary dark:text-dark-text-primary">{option.secondLabel}</span>)}
+          </div>
         </label>); })}
     </div>);
 }

package/dist/components/tab.d.ts

@@ -1,12 +1,17 @@
 import React from 'react';
+type RouterLike = {
+    push: (url: string) => void;
+};
 type TabProps = {
     label: string;
+    secondLabel?: string;
     href?: string;
     isSelected: boolean;
     onClickTab: () => void;
     onClickActionIcon?: any;
     decoIcon?: string;
     actionIcon?: string;
+    router?: RouterLike;
 };
-export default function Tab({ label, href, isSelected, onClickTab, onClickActionIcon, decoIcon, actionIcon }: TabProps): React.JSX.Element;
+export default function Tab({ label, secondLabel, href, isSelected, onClickTab, onClickActionIcon, decoIcon, actionIcon, router }: TabProps): React.JSX.Element;
 export {};

package/dist/components/tab.jsx

@@ -36,12 +36,9 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import React, { useState, useEffect, useCallback } from 'react';
-import { useRouter, usePathname } from 'next/navigation';
 export default function Tab(_a) {
     var _this = this;
-    var label = _a.label, href = _a.href, isSelected = _a.isSelected, onClickTab = _a.onClickTab, onClickActionIcon = _a.onClickActionIcon, decoIcon = _a.decoIcon, actionIcon = _a.actionIcon;
-    var router = useRouter();
-    var pathname = usePathname();
+    var label = _a.label, secondLabel = _a.secondLabel, href = _a.href, isSelected = _a.isSelected, onClickTab = _a.onClickTab, onClickActionIcon = _a.onClickActionIcon, decoIcon = _a.decoIcon, actionIcon = _a.actionIcon, router = _a.router;
     var _b = useState(null), IconLeft = _b[0], setIconLeft = _b[1];
     var _c = useState(null), IconRight = _c[0], setIconRight = _c[1];
     // Load icon dynamically
@@ -95,17 +92,22 @@ export default function Tab(_a) {
     }, [decoIcon, actionIcon, loadIcon]);
     var handleClick = function () {
         onClickTab();
-        if (href) {
+        if (href && router) {
             router.push(href);
         }
     };
     return (<div className={"\n        flex items-center space-x-1 py-1 px-[6px] rounded-[8px] cursor-pointer justify-start transition-colors duration-200 ease-in-out\n        ".concat(isSelected
             ? 'bg-light-primary-dark dark:bg-dark-primary-dark text-light-text-contrast dark:text-dark-text-contrast'
-            : 'hover:bg-light-background-accent200 dark:hover:bg-dark-background-accent200', "\n      ")} onClick={handleClick}>
+            : 'text-light-text-primary dark:text-dark-text-primary hover:bg-light-background-accent200 dark:hover:bg-dark-background-accent200', "\n      ")} onClick={handleClick}>
       {IconLeft && <IconLeft className="w-6 h-6" strokeWidth={2}/>}
-      <span className="whitespace-nowrap text-body1 px-[6px]">
-        {label}
-      </span>
+      <div className="flex flex-col px-[6px] text-center">
+        <span className="whitespace-nowrap text-body1">
+          {label}
+        </span>
+        {secondLabel && (<span className="whitespace-nowrap text-body2 opacity-70">
+            {secondLabel}
+          </span>)}
+      </div>
       {IconRight && (<div onClick={onClickActionIcon} className="cursor-pointer">
           <IconRight className="w-6 h-6" strokeWidth={2}/>
         </div>)}

package/dist/components/tabsContainer.jsx

@@ -3,7 +3,10 @@ import React from 'react';
 export default function TabsContainer(_a) {
     var children = _a.children;
     var tabCount = React.Children.count(children);
-    return (<div className={"\n        flex space-x-2 p-1 rounded-[12px]\n        ".concat(tabCount > 0 ? 'bg-light-background-accent100 dark:bg-dark-background-accent100' : 'bg-transparent', "\n      ")}>
+    return (<div className={"\n        flex space-x-2 p-1 rounded-[12px] overflow-x-auto\n        ".concat(tabCount > 0 ? 'bg-light-background-accent100 dark:bg-dark-background-accent100' : 'bg-transparent', "\n      ")} style={{
+            scrollbarWidth: 'none',
+            msOverflowStyle: 'none',
+        }}>
       {children}
     </div>);
 }

package/dist/components/tag.d.ts

@@ -1,12 +1,15 @@
 import React from 'react';
-import * as LucideIcons from 'lucide-react';
+import { icons } from 'lucide-react';
+type IconName = keyof typeof icons;
 interface TagProps {
-    variant: 'contained' | 'textOnly';
+    variant: 'contained' | 'textOnly' | 'dot';
     size: 'medium' | 'small';
     state?: 'enabled' | 'selected';
+    color?: 'default' | 'success' | 'warning' | 'error' | 'info';
     label: React.ReactNode;
-    iconName?: keyof typeof LucideIcons;
+    secondLabel?: string;
+    iconName?: IconName;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
 }
-export default function Tag({ variant, size, state, label, iconName, onClick, }: TagProps): JSX.Element;
+export default function Tag({ variant, size, state, color, label, secondLabel, iconName, onClick, }: TagProps): JSX.Element;
 export {};