oneslash-design-system 1.2.23 → 1.2.25

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

@@ -4,11 +4,12 @@ interface ButtonProps {
     type: 'primary' | 'secondary' | 'tertiary' | 'textOnly';
     state: 'enabled' | 'hovered' | 'focused' | 'disabled';
     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];
@@ -126,7 +126,10 @@ export default function Button(_a) {
       {/* 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,7 +1,9 @@
 interface CheckboxProps {
     label?: string;
+    secondLabel?: string;
     checked?: boolean;
     onChange?: (checked: boolean) => void;
+    disabled?: boolean;
 }
-export default function Checkbox({ label, checked, onChange }: 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,29 +1,48 @@
 '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;
-    var _c = useState(checked), isChecked = _c[0], setIsChecked = _c[1];
+    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)
+            return;
         var newChecked = !isChecked;
         setIsChecked(newChecked);
         if (onChange) {
             onChange(newChecked);
         }
     };
-    return (<label className="flex items-center cursor-pointer">
+    return (<label className={"flex items-center ".concat(disabled ? 'cursor-not-allowed' : 'cursor-pointer')}>
       <div onClick={handleToggle} className="relative flex items-center justify-center w-6 h-6 group transition-colors duration-200 ease-in-out">
         {/* Circle behind the checkbox */}
-        <div className="absolute w-6 h-6 rounded-full group-hover:bg-light-action-selected dark:group-hover:bg-dark-action-selected"></div>
-        
+        <div className={"absolute w-6 h-6 rounded-full ".concat(disabled
+            ? ''
+            : 'group-hover:bg-light-action-selected dark:group-hover:bg-dark-action-selected')}></div>
+
         {/* Checkbox */}
-        <div className={"relative z-10 w-4 h-4 border-2 rounded ".concat(isChecked
-            ? 'bg-light-text-primary dark:bg-dark-text-primary border-none'
-            : 'border-light-text-secondary dark:border-dark-text-secondary', " flex items-center justify-center")}>
+        <div className={"relative z-10 w-4 h-4 border-2 rounded ".concat(disabled
+            ? isChecked
+                ? 'bg-light-text-disabled dark:bg-dark-text-disabled border-none'
+                : 'border-light-text-disabled dark:border-dark-text-disabled'
+            : isChecked
+                ? 'bg-light-text-primary dark:bg-dark-text-primary border-none'
+                : 'border-light-text-secondary dark:border-dark-text-secondary', " flex items-center justify-center")}>
           {isChecked && (<svg className="w-3 h-3 text-light-text-contrast dark:text-dark-text-contrast" fill="none" stroke="currentColor" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
               <path strokeWidth="2" d="M1 6l4 3 6-7"/>
             </svg>)}
         </div>
       </div>
-      {label && <span className="ml-2 text-body1 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/iconButton.jsx

@@ -26,36 +26,42 @@ export default function IconButton(_a) {
     // Base classes (padding and corner radius)
     var baseClasses = "".concat(sizeClasses[size], " rounded-[8px] leading-none relative");
     // Background color
-    var bgColor = color === 'primary'
-        ? 'bg-light-accent-main dark:bg-dark-accent-main' // Primary
-        : color === 'secondary'
-            ? 'bg-light-secondary-main dark:bg-dark-secondary-main' // Secondary
-            : color === 'tertiary'
-                ? 'bg-light-background-accent100 dark:bg-dark-background-accent100' // Tertiary
-                : ' '; // iconOnly: none
+    var bgColor = state === 'selected'
+        ? 'bg-light-primary-dark dark:bg-dark-primary-dark' // Selected state
+        : color === 'primary'
+            ? 'bg-light-accent-main dark:bg-dark-accent-main' // Primary
+            : color === 'secondary'
+                ? 'bg-light-secondary-main dark:bg-dark-secondary-main' // Secondary
+                : color === 'tertiary'
+                    ? 'bg-light-background-accent100 dark:bg-dark-background-accent100' // Tertiary
+                    : ' '; // iconOnly: none
     // Background hover color
-    var bgColorHover = color === 'primary'
-        ? 'hover:bg-light-accent-dark hover:dark:bg-dark-accent-dark' // Primary
-        : color === 'secondary'
-            ? 'hover:bg-light-secondary-dark hover:dark:bg-dark-secondary-dark' // Secondary
-            : color === 'tertiary'
-                ? 'hover:bg-light-background-accent200 hover:dark:bg-dark-background-accent200' // Tertiary
-                : 'hover:bg-light-background-accent200 hover:dark:bg-dark-background-accent200'; // iconOnly
+    var bgColorHover = state === 'selected'
+        ? '' // No hover effect when selected
+        : color === 'primary'
+            ? 'hover:bg-light-accent-dark hover:dark:bg-dark-accent-dark' // Primary
+            : color === 'secondary'
+                ? 'hover:bg-light-secondary-dark hover:dark:bg-dark-secondary-dark' // Secondary
+                : color === 'tertiary'
+                    ? 'hover:bg-light-background-accent200 hover:dark:bg-dark-background-accent200' // Tertiary
+                    : 'hover:bg-light-background-accent200 hover:dark:bg-dark-background-accent200'; // iconOnly
     // Icon color
-    var iconColor = color === 'primary'
-        ? 'text-light-text-primary dark:text-dark-text-contrast' // Primary
-        : color === 'secondary'
-            ? 'text-light-text-primary dark:text-dark-text-primary' // Secondary
-            : color === 'tertiary'
-                ? 'text-light-text-primary dark:text-dark-text-primary' // Tertiary
-                : 'text-light-text-primary dark:text-dark-text-primary'; // iconOnly
+    var iconColor = state === 'selected'
+        ? 'text-light-text-contrast dark:text-dark-text-contrast' // Selected state
+        : color === 'primary'
+            ? 'text-light-text-primary dark:text-dark-text-contrast' // Primary
+            : color === 'secondary'
+                ? 'text-light-text-primary dark:text-dark-text-primary' // Secondary
+                : color === 'tertiary'
+                    ? 'text-light-text-primary dark:text-dark-text-primary' // Tertiary
+                    : 'text-light-text-primary dark:text-dark-text-primary'; // iconOnly
     // State classes, including loading
     var stateClasses = loading
         ? 'cursor-wait' // Show a waiting cursor during loading
         : state === 'disabled'
             ? 'cursor-not-allowed opacity-50'
             : state === 'selected'
-                ? 'cursor-pointer ring-2 ring-offset-2 ring-blue-500'
+                ? 'cursor-pointer'
                 : isHovered
                     ? 'cursor-pointer hover:bg-opacity-75'
                     : 'cursor-pointer';

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/link.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface LinkProps {
+    href: string;
+    children: React.ReactNode;
+    color?: 'info' | 'error' | 'warning' | 'success';
+    size?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption';
+    openInNewTab?: boolean;
+    className?: string;
+}
+export default function Link({ href, children, color, size, openInNewTab, className, }: LinkProps): React.JSX.Element;
+export {};

package/dist/components/link.jsx

@@ -0,0 +1,59 @@
+'use client';
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React from 'react';
+import NextLink from 'next/link';
+export default function Link(_a) {
+    var href = _a.href, children = _a.children, _b = _a.color, color = _b === void 0 ? 'info' : _b, _c = _a.size, size = _c === void 0 ? 'body1' : _c, _d = _a.openInNewTab, openInNewTab = _d === void 0 ? false : _d, _e = _a.className, className = _e === void 0 ? '' : _e;
+    // Color classes based on the color prop
+    var colorClasses = {
+        info: {
+            default: 'text-light-info-main dark:text-dark-info-main',
+            hover: 'hover:text-light-info-dark hover:dark:text-dark-info-dark',
+            visited: 'visited:text-light-info-light visited:dark:text-dark-info-light',
+        },
+        error: {
+            default: 'text-light-error-main dark:text-dark-error-main',
+            hover: 'hover:text-light-error-dark hover:dark:text-dark-error-dark',
+            visited: 'visited:text-light-error-light visited:dark:text-dark-error-light',
+        },
+        warning: {
+            default: 'text-light-warning-main dark:text-dark-warning-main',
+            hover: 'hover:text-light-warning-dark hover:dark:text-dark-warning-dark',
+            visited: 'visited:text-light-warning-light visited:dark:text-dark-warning-light',
+        },
+        success: {
+            default: 'text-light-success-main dark:text-dark-success-main',
+            hover: 'hover:text-light-success-dark hover:dark:text-dark-success-dark',
+            visited: 'visited:text-light-success-light visited:dark:text-dark-success-light',
+        },
+    };
+    var selectedColorClasses = colorClasses[color];
+    // Check if href is external (starts with http:// or https://)
+    var isExternal = href.startsWith('http://') || href.startsWith('https://');
+    // Determine if we should open in new tab
+    var shouldOpenInNewTab = openInNewTab || isExternal;
+    var linkClasses = "\n    text-".concat(size, "\n    ").concat(selectedColorClasses.default, "\n    ").concat(selectedColorClasses.hover, "\n    ").concat(selectedColorClasses.visited, "\n    underline\n    underline-offset-[2px]\n    decoration-2\n    cursor-pointer\n    transition-colors\n    duration-200\n    ease-in-out\n    ").concat(className, "\n  ").trim().replace(/\s+/g, ' ');
+    var commonProps = __assign({ className: linkClasses }, (shouldOpenInNewTab && {
+        target: '_blank',
+        rel: 'noopener noreferrer',
+    }));
+    // Use NextLink for internal links, regular <a> for external
+    if (isExternal || shouldOpenInNewTab) {
+        return (<a href={href} {...commonProps}>
+        {children}
+      </a>);
+    }
+    return (<NextLink href={href} {...commonProps}>
+      {children}
+    </NextLink>);
+}

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;
@@ -15,5 +16,5 @@ interface MenuItemProps {
     };
     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 () {
@@ -93,18 +93,23 @@ export default function MenuItem(_a) {
         fetchIcon();
     }, [iconName, iconRight, loadIcon]);
     // Size-based icon and text classes
-    var iconSize = size === 'large' ? 'w-6 h-6' : 'w-5 h-5';
-    var labelClass = size === 'large' ? 'text-body1' : 'text-body2';
-    var tagSize = size === 'large' ? 'medium' : 'small';
+    var iconSize = size === 'large' ? 'w-5 h-5' : 'w-6 h-6';
+    var labelClass = size === 'large' ? 'text-body2' : 'text-body1';
+    var tagSize = size === 'large' ? 'small' : 'medium';
     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>
+        <div className="flex flex-col">
+          <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>
+          {secondLabel && (<span className={"whitespace-nowrap 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>
         {tag && (<Tag variant="contained" size={tagSize} label={tag.label} iconName={tag.iconName}/>)}
       </div>
 

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 {};