oneslash-design-system 1.4.0 → 1.6.0

package/dist/components/alert.jsx

@@ -50,7 +50,7 @@ export default function Alert(_a) {
     if (!shouldRender)
         return null;
     var bgClasses = (_b = bgClassMap[type]) !== null && _b !== void 0 ? _b : bgClassMap.default;
-    var alertContent = (<div className={"flex items-start justify-between w-full p-2 rounded-[8px] transition-opacity duration-200 ease-out ".concat(bgClasses, " ").concat(isVisible ? 'opacity-100' : 'opacity-0', " ").concat(variant === 'toast' ? 'max-w-md pointer-events-auto' : '')}>
+    var alertContent = (<div className={"flex items-start justify-between w-full p-2 rounded-[8px] transition-[opacity,transform] duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] motion-reduce:transition-none ".concat(bgClasses, " ").concat(isVisible ? 'opacity-100 translate-y-0 scale-100' : variant === 'toast' ? 'opacity-0 -translate-y-3 scale-95' : '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">
         <div className="flex flex-col text-left">
           <span className="text-body2">{message}</span>

package/dist/components/button.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 interface ButtonProps {
-    size: 'small' | 'medium' | 'large';
+    size: 'tiny' | 'small' | 'medium' | 'large';
     type: 'primary' | 'secondary' | 'tertiary' | 'textOnly';
     color?: 'default' | 'danger';
     state: 'enabled' | 'hovered' | 'focused' | 'disabled' | 'selected';

package/dist/components/button.jsx

@@ -94,11 +94,13 @@ export default function Button(_a) {
         large: 'text-body1 p-2',
         medium: 'text-body1 p-1',
         small: 'text-body2 p-1',
+        tiny: 'text-caption px-1 py-px',
     }[size];
     var sizeIcon = {
         large: 'w-6 h-6',
         medium: 'w-5 h-5',
         small: 'w-4 h-4',
+        tiny: 'w-3.5 h-3.5',
     }[size];
     var baseTypeClasses = {
         default: {
@@ -109,7 +111,7 @@ export default function Button(_a) {
         },
         danger: {
             primary: 'bg-light-error-main dark:bg-dark-error-main text-light-error-contrast dark:text-dark-error-contrast',
-            secondary: 'bg-light-error-light dark:bg-dark-error-light text-light-error-main dark:text-dark-error-main',
+            secondary: 'bg-light-error-alertBg dark:bg-dark-error-alertBg text-light-error-dark dark:text-dark-error-light',
             tertiary: 'bg-transparent border border-light-error-main dark:border-dark-error-main text-light-error-main dark:text-dark-error-main',
             textOnly: 'text-light-error-main dark:text-dark-error-main',
         },
@@ -123,7 +125,7 @@ export default function Button(_a) {
         },
         danger: {
             primary: 'hover:bg-light-error-dark hover:dark:bg-dark-error-dark',
-            secondary: 'hover:bg-light-error-main/20 dark:hover:bg-dark-error-main/20',
+            secondary: 'hover:bg-light-error-light/60 dark:hover:bg-dark-error-dark/60',
             tertiary: 'hover:bg-light-error-main/10 dark:hover:bg-dark-error-main/10',
             textOnly: 'hover:bg-light-error-main/10 dark:hover:bg-dark-error-main/10',
         },
@@ -146,9 +148,9 @@ 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="flex flex-col text-center px-2">
+        <div className={"flex flex-col text-center ".concat(size === 'tiny' ? 'px-1' : '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>)}
+          {secondLabel && (<span className={"whitespace-nowrap overflow-hidden truncate ".concat(size === 'tiny' ? 'text-caption' : 'text-body2', " opacity-70")}>{secondLabel}</span>)}
         </div>
       </div>
       {IconRight && (<div onClick={onClickActionIcon} className="cursor-pointer">

package/dist/components/icon.d.ts

@@ -3,7 +3,7 @@ import { icons } from 'lucide-react';
 type IconName = keyof typeof icons;
 interface IconProps {
     name: IconName;
-    size?: 'small' | 'medium' | 'large' | number;
+    size?: 'tiny' | 'small' | 'medium' | 'large' | number;
     color?: 'primary' | 'secondary' | 'disabled' | 'error' | 'warning' | 'success' | 'info' | 'accent' | 'inherit';
     strokeWidth?: number;
     className?: string;

package/dist/components/icon.jsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import { icons } from 'lucide-react';
 var sizeMap = {
+    tiny: 12,
     small: 16,
     medium: 24,
     large: 32,

package/dist/components/iconButton.d.ts

@@ -3,7 +3,7 @@ import * as LucideIcons from 'lucide-react';
 interface IconButtonProps {
     color: "primary" | "secondary" | "tertiary" | "iconOnly";
     state: "enabled" | "selected" | "disabled";
-    size: "large" | "medium" | "small";
+    size: "large" | "medium" | "small" | "tiny";
     iconName: keyof typeof LucideIcons;
     onClick?: any;
     loading?: boolean;

package/dist/components/iconButton.jsx

@@ -4,8 +4,7 @@ import * as LucideIcons from 'lucide-react';
 import { LoadingSmall } from './loadingScreen';
 export default function IconButton(_a) {
     var color = _a.color, state = _a.state, size = _a.size, iconName = _a.iconName, onClick = _a.onClick, _b = _a.loading, loading = _b === void 0 ? false : _b;
-    var _c = useState(false), isHovered = _c[0], setIsHovered = _c[1];
-    var _d = useState(null), Icon = _d[0], setIcon = _d[1];
+    var _c = useState(null), Icon = _c[0], setIcon = _c[1];
     // Load icon from Lucide
     useEffect(function () {
         if (iconName) {
@@ -17,11 +16,13 @@ export default function IconButton(_a) {
         large: 'p-2', // 8px padding
         medium: 'p-1', // 4px padding
         small: 'p-1', // 4px padding
+        tiny: 'p-0.5', // 2px padding
     };
     var iconSizeClasses = {
         large: 'size-6', // 24px
         medium: 'size-6', // 24px
         small: 'size-5', // 20px
+        tiny: 'size-4', // 16px
     };
     // Base classes (padding and corner radius)
     var baseClasses = "".concat(sizeClasses[size], " rounded-[8px] leading-none relative");
@@ -39,12 +40,12 @@ export default function IconButton(_a) {
     var bgColorHover = state === 'selected'
         ? '' // No hover effect when selected
         : color === 'primary'
-            ? 'hover:bg-light-accent-dark hover:dark:bg-dark-accent-dark' // Primary
+            ? 'hover:bg-light-accent-dark/75 hover:dark:bg-dark-accent-dark/75' // Primary
             : color === 'secondary'
-                ? 'hover:bg-light-secondary-dark hover:dark:bg-dark-secondary-dark' // Secondary
+                ? 'hover:bg-light-secondary-dark/75 hover:dark:bg-dark-secondary-dark/75' // 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
+                    ? 'hover:bg-light-background-accent200/75 hover:dark:bg-dark-background-accent200/75' // Tertiary
+                    : 'hover:bg-light-background-accent200/75 hover:dark:bg-dark-background-accent200/75'; // iconOnly
     // Icon color
     var iconColor = state === 'selected'
         ? 'text-light-text-contrast dark:text-dark-text-contrast' // Selected state
@@ -62,11 +63,9 @@ export default function IconButton(_a) {
             ? 'cursor-not-allowed opacity-50'
             : state === 'selected'
                 ? 'cursor-pointer'
-                : isHovered
-                    ? 'cursor-pointer hover:bg-opacity-75'
-                    : 'cursor-pointer';
+                : 'cursor-pointer';
     return (<button className={"".concat(baseClasses, " ").concat(bgColor, " ").concat(iconColor, " ").concat(bgColorHover, " ").concat(stateClasses, " transition-colors duration-200 ease-in-out flex items-center justify-center")} disabled={state === 'disabled' || loading} // Disable button during loading
-     onMouseEnter={function () { return setIsHovered(true); }} onMouseLeave={function () { return setIsHovered(false); }} onClick={onClick} aria-label={loading ? 'Loading' : 'Reload'}>
+     onClick={onClick} aria-label={loading ? 'Loading' : 'Reload'}>
       {loading ? (<LoadingSmall size={size}/>) : (Icon && <Icon className={iconSizeClasses[size]} strokeWidth={2}/>)}
     </button>);
 }

package/dist/components/loadingScreen.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 interface LoadingSmallProps {
-    size?: 'large' | 'medium' | 'small';
+    size?: 'large' | 'medium' | 'small' | 'tiny';
 }
 export default function LoadingScreen(): React.JSX.Element;
 export declare function LoadingSmall({ size }: LoadingSmallProps): React.JSX.Element;

package/dist/components/loadingScreen.jsx

@@ -12,6 +12,7 @@ export function LoadingSmall(_a) {
         large: 'w-6 h-6 border-2', // 24px, border-2 for proportional thickness
         medium: 'w-6 h-6 border-2', // 24px, border-2
         small: 'w-5 h-5 border-2', // 20px, slightly thinner border
+        tiny: 'w-4 h-4 border-2', // 16px
     };
     return (<div className="flex justify-center items-center">
       <div className={"rounded-full border-t-transparent border-r-light-text-primary border-b-light-text-primary border-l-light-text-primary dark:border-t-transparent dark:border-r-dark-text-primary dark:border-b-dark-text-primary dark:border-l-dark-text-primary animate-spin ".concat(spinnerSizeClasses[size])}/>

package/dist/components/menuItem.d.ts

@@ -10,7 +10,7 @@ interface MenuItemProps {
     isSelected?: boolean;
     onClick?: any;
     className?: string;
-    size?: 'small' | 'medium';
+    size?: 'tiny' | 'small' | 'medium';
     tag?: {
         label: React.ReactNode;
         iconName?: string;

package/dist/components/menuItem.jsx

@@ -93,10 +93,12 @@ export default function MenuItem(_a) {
         fetchIcon();
     }, [iconName, iconRight, loadIcon]);
     // Size-based icon and text classes
-    var iconSize = size === 'small' ? 'w-5 h-5' : 'w-6 h-6';
-    var labelClass = size === 'small' ? 'text-body2' : 'text-body1';
-    var tagSize = size === 'small' ? '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
+    var iconSize = { tiny: 'w-4 h-4', small: 'w-5 h-5', medium: 'w-6 h-6' }[size];
+    var labelClass = { tiny: 'text-caption', small: 'text-body2', medium: 'text-body1' }[size];
+    var secondLabelClass = size === 'tiny' ? 'text-caption' : 'text-body2';
+    var tagSize = { tiny: 'tiny', small: 'small', medium: 'medium' }[size];
+    var paddingClass = size === 'tiny' ? 'p-1' : 'p-2';
+    var content = (<div className={"\n        flex items-center ".concat(paddingClass, " 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 with 8px gap */}
@@ -106,7 +108,7 @@ export default function MenuItem(_a) {
           <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 className={"truncate ".concat(secondLabelClass, " 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>

package/dist/components/tab.d.ts

@@ -12,6 +12,7 @@ type TabProps = {
     decoIcon?: string;
     actionIcon?: string;
     router?: RouterLike;
+    size?: 'medium' | 'small' | 'tiny';
 };
-export default function Tab({ label, secondLabel, href, isSelected, onClickTab, onClickActionIcon, decoIcon, actionIcon, router }: TabProps): React.JSX.Element;
+export default function Tab({ label, secondLabel, href, isSelected, onClickTab, onClickActionIcon, decoIcon, actionIcon, router, size, }: TabProps): React.JSX.Element;
 export {};

package/dist/components/tab.jsx

@@ -35,12 +35,14 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useContext } from 'react';
+import { TabsContainerContext } from './tabsContainer';
 export default function Tab(_a) {
     var _this = this;
-    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];
+    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, _b = _a.size, size = _b === void 0 ? 'medium' : _b;
+    var inContainer = useContext(TabsContainerContext);
+    var _c = useState(null), IconLeft = _c[0], setIconLeft = _c[1];
+    var _d = useState(null), IconRight = _d[0], setIconRight = _d[1];
     // Load icon dynamically
     var loadIcon = useCallback(function (iconName) { return __awaiter(_this, void 0, void 0, function () {
         var module_1, Icon, error_1;
@@ -96,20 +98,29 @@ export default function Tab(_a) {
             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'
+    var sizeClasses = {
+        medium: { tab: 'py-1 px-[6px]', label: 'px-[6px] text-body1', secondLabel: 'text-body2', icon: 'w-6 h-6' },
+        small: { tab: 'py-1 px-[6px]', label: 'px-1 text-body2', secondLabel: 'text-caption', icon: 'w-5 h-5' },
+        tiny: { tab: 'py-0.5 px-1', label: 'px-1 text-caption', secondLabel: 'text-caption', icon: 'w-4 h-4' },
+    }[size];
+    // Inside a TabsContainer the container's sliding pill is the selected background
+    var selectedClasses = inContainer
+        ? 'text-light-text-contrast dark:text-dark-text-contrast'
+        : 'bg-light-primary-dark dark:bg-dark-primary-dark text-light-text-contrast dark:text-dark-text-contrast';
+    return (<div data-tab-selected={isSelected} className={"\n        relative flex items-center space-x-1 rounded-[8px] cursor-pointer justify-start transition-colors duration-200 ease-in-out\n        ".concat(sizeClasses.tab, "\n        ").concat(isSelected
+            ? selectedClasses
             : '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}/>}
-      <div className="flex flex-col px-[6px] text-center">
-        <span className="whitespace-nowrap text-body1">
+      {IconLeft && <IconLeft className={sizeClasses.icon} strokeWidth={2}/>}
+      <div className={"flex flex-col text-center ".concat(sizeClasses.label)}>
+        <span className="whitespace-nowrap">
           {label}
         </span>
-        {secondLabel && (<span className="whitespace-nowrap text-body2 opacity-70">
+        {secondLabel && (<span className={"whitespace-nowrap opacity-70 ".concat(sizeClasses.secondLabel)}>
             {secondLabel}
           </span>)}
       </div>
       {IconRight && (<div onClick={onClickActionIcon} className="cursor-pointer">
-          <IconRight className="w-6 h-6" strokeWidth={2}/>
+          <IconRight className={sizeClasses.icon} strokeWidth={2}/>
         </div>)}
     </div>);
 }

package/dist/components/tabsContainer.d.ts

@@ -2,5 +2,6 @@ import React from 'react';
 interface TabsContainerProps {
     children: React.ReactNode;
 }
+export declare const TabsContainerContext: React.Context<boolean>;
 export default function TabsContainer({ children, }: TabsContainerProps): React.JSX.Element;
 export {};

package/dist/components/tabsContainer.jsx

@@ -1,12 +1,76 @@
 'use client';
-import React from 'react';
+import React, { createContext, useLayoutEffect, useRef, useState } from 'react';
+// Lets a Tab know a container draws its selected background (the sliding pill)
+export var TabsContainerContext = createContext(false);
 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] overflow-x-auto\n        ".concat(tabCount > 0 ? 'bg-light-background-accent100 dark:bg-dark-background-accent100' : 'bg-transparent', "\n      ")} style={{
+    var containerRef = useRef(null);
+    var selectedRef = useRef(null);
+    var _b = useState(null), indicator = _b[0], setIndicator = _b[1];
+    useLayoutEffect(function () {
+        var _a;
+        var container = containerRef.current;
+        if (!container)
+            return;
+        var update = function () {
+            var selected = container.querySelector('[data-tab-selected="true"]');
+            if (!selected) {
+                selectedRef.current = null;
+                setIndicator(null);
+                return;
+            }
+            setIndicator(function (prev) { return ({
+                animate: prev !== null,
+                x: selected.offsetLeft,
+                y: selected.offsetTop,
+                width: selected.offsetWidth,
+                height: selected.offsetHeight,
+            }); });
+            // Tabs scroll horizontally instead of wrapping; keep a newly selected tab in view
+            if (selected !== selectedRef.current) {
+                selectedRef.current = selected;
+                var left = selected.offsetLeft;
+                var right = left + selected.offsetWidth;
+                if (left < container.scrollLeft) {
+                    container.scrollTo({ left: left - 4, behavior: 'smooth' });
+                }
+                else if (right > container.scrollLeft + container.clientWidth) {
+                    container.scrollTo({ left: right - container.clientWidth + 4, behavior: 'smooth' });
+                }
+            }
+        };
+        update();
+        // Tab widths change once web fonts load
+        (_a = document.fonts) === null || _a === void 0 ? void 0 : _a.ready.then(update);
+        var resizeObserver = new ResizeObserver(update);
+        resizeObserver.observe(container);
+        Array.from(container.children).forEach(function (child) { return resizeObserver.observe(child); });
+        var mutationObserver = new MutationObserver(update);
+        mutationObserver.observe(container, {
+            subtree: true,
+            childList: true,
+            attributes: true,
+            attributeFilter: ['data-tab-selected'],
+        });
+        return function () {
+            resizeObserver.disconnect();
+            mutationObserver.disconnect();
+        };
+    }, [children]);
+    return (<TabsContainerContext.Provider value={true}>
+      <div ref={containerRef} className={"\n          relative flex gap-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>);
+        {indicator && (<span aria-hidden className={"absolute rounded-[8px] pointer-events-none bg-light-primary-dark dark:bg-dark-primary-dark\n              ".concat(indicator.animate ? 'transition-[transform,width,height] duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] motion-reduce:transition-none' : '')} style={{
+                top: 0,
+                left: 0,
+                transform: "translate(".concat(indicator.x, "px, ").concat(indicator.y, "px)"),
+                width: indicator.width,
+                height: indicator.height,
+            }}/>)}
+        {children}
+      </div>
+    </TabsContainerContext.Provider>);
 }

package/dist/components/tag.d.ts

@@ -3,7 +3,7 @@ import { icons } from 'lucide-react';
 type IconName = keyof typeof icons;
 interface TagProps {
     variant: 'contained' | 'textOnly' | 'dot';
-    size: 'medium' | 'small';
+    size: 'medium' | 'small' | 'tiny';
     state?: 'enabled' | 'selected';
     color?: 'default' | 'success' | 'warning' | 'error' | 'info';
     label: React.ReactNode;

package/dist/components/tag.jsx

@@ -49,7 +49,11 @@ export default function Tag(_a) {
     // Get icon directly from icons map
     var Icon = iconName ? icons[iconName] : null;
     // Size and padding
-    var sizeClasses = size === 'medium' ? 'text-body2 px-2 py-1' : 'text-caption px-2 py-[3px]';
+    var sizeClasses = {
+        medium: 'text-body2 px-2 py-1',
+        small: 'text-caption px-2 py-[3px]',
+        tiny: 'text-caption px-1.5 py-0',
+    }[size];
     // Selected state styles
     var isSelected = state === 'selected';
     // When color is provided, use color-based styling
@@ -112,7 +116,7 @@ export default function Tag(_a) {
     var baseClasses = 'flex space-x-2 items-center gap-1 rounded-full whitespace-nowrap transition-colors duration-200 ease-in-out';
     return (<div className={"".concat(baseClasses, " ").concat(sizeClasses, " ").concat(bgClasses, " ").concat(fontClasses, " ").concat(borderClasses, " ").concat(hoverClasses, " ").concat(cursorClass)} onMouseEnter={function () { return onClick && setIsHovered(true); }} onMouseLeave={function () { return onClick && setIsHovered(false); }} onClick={onClick}>
       {variant === 'dot' && (<span className={"w-3 h-3 rounded-full flex-shrink-0 ".concat(dotColor)}/>)}
-      {Icon && variant !== 'dot' && <Icon className="w-4 h-4 flex-shrink-0" strokeWidth={2}/>}
+      {Icon && variant !== 'dot' && <Icon className={"".concat(size === 'tiny' ? 'w-3 h-3' : 'w-4 h-4', " flex-shrink-0")} strokeWidth={2}/>}
       <div className="flex flex-col text-center">
         <span>{label}</span>
         {secondLabel && (<span className="text-caption opacity-70">{secondLabel}</span>)}

package/dist/components/textField.d.ts

@@ -15,7 +15,7 @@ interface TextFieldProps {
     disabled?: boolean;
     error?: boolean;
     required?: boolean;
-    size?: 'large' | 'medium' | 'small';
+    size?: 'large' | 'medium' | 'small' | 'tiny';
     placeholder?: string;
 }
 export default function TextField({ id, label, value, type, onChange, onBlur, onFocus, onKeyDown, onSubmit, autoFocus, multiline, maxRows, disabled, error, required, size, placeholder, }: TextFieldProps): React.JSX.Element;

package/dist/components/textField.jsx

@@ -17,6 +17,7 @@ export default function TextField(_a) {
         large: 'text-body1 p-2 leading-[22px]', // body1 (16px), padding 8px
         medium: 'text-body1 p-2 leading-[22px]', // body1 (16px), padding 8px
         small: 'text-body2 p-2 leading-[18px]', // body2 (14px), padding 8px
+        tiny: 'text-caption p-1 leading-[16px]', // caption (12px), padding 4px
     }[size];
     var baseClasses = 'w-full border rounded-[8px] outline-none';
     var textColor = 'text-light-text-primary dark:text-dark-text-primary';

package/dist/components/textarea.d.ts

@@ -14,7 +14,7 @@ interface TextareaProps {
     maxRows?: number;
     disabled?: boolean;
     error?: boolean;
-    size?: 'medium' | 'small';
+    size?: 'medium' | 'small' | 'tiny';
     placeholder?: string;
 }
 export default function Textarea({ id, label, value, onChange, onBlur, onFocus, onKeyDown, onCompositionStart, onCompositionEnd, onSubmit, autoFocus, maxRows, disabled, error, size, placeholder, }: TextareaProps): React.JSX.Element;

package/dist/components/textarea.jsx

@@ -39,6 +39,7 @@ export default function Textarea(_a) {
     var sizeClasses = {
         medium: 'text-body1 p-2 leading-[22px]', // body1 (16px), padding 8px
         small: 'text-body2 p-2 leading-[18px]', // body2 (14px), padding 8px
+        tiny: 'text-caption p-1 leading-[16px]', // caption (12px), padding 4px
     }[size];
     var baseClasses = 'w-full border rounded-[8px] outline-none [&::-webkit-scrollbar]:hidden';
     var textColor = 'text-light-text-primary dark:text-dark-text-primary';

package/dist/components/tooltip.jsx

@@ -1,12 +1,16 @@
 'use client';
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useLayoutEffect } from 'react';
+var VIEWPORT_MARGIN = 8;
 export default function Tooltip(_a) {
     var title = _a.title, children = _a.children, placement = _a.placement;
     var _b = useState(false), visible = _b[0], setVisible = _b[1];
     var _c = useState(placement !== null && placement !== void 0 ? placement : 'bottom'), position = _c[0], setPosition = _c[1];
+    var _d = useState(0), shiftX = _d[0], setShiftX = _d[1];
     var tooltipRef = useRef(null);
     var buttonRef = useRef(null);
-    useEffect(function () {
+    useLayoutEffect(function () {
+        if (!visible)
+            return;
         var handlePosition = function () {
             if (tooltipRef.current && buttonRef.current) {
                 var tooltipRect = tooltipRef.current.getBoundingClientRect();
@@ -15,18 +19,28 @@ export default function Tooltip(_a) {
                 if (placement) {
                     setPosition(placement);
                 }
-                else if (window.innerHeight - buttonRect.bottom < tooltipRect.height + 8) {
-                    setPosition('top');
-                }
                 else {
-                    setPosition('bottom');
+                    var spaceBelow = window.innerHeight - buttonRect.bottom;
+                    var fitsBelow = spaceBelow >= tooltipRect.height + VIEWPORT_MARGIN;
+                    var fitsAbove = buttonRect.top >= tooltipRect.height + VIEWPORT_MARGIN;
+                    setPosition(!fitsBelow && fitsAbove ? 'top' : 'bottom');
                 }
+                // Keep the tooltip inside the viewport horizontally
+                var centerX = buttonRect.left + buttonRect.width / 2;
+                var half = tooltipRect.width / 2;
+                var minCenter = VIEWPORT_MARGIN + half;
+                var maxCenter = window.innerWidth - VIEWPORT_MARGIN - half;
+                setShiftX(Math.min(Math.max(centerX, minCenter), maxCenter) - centerX);
             }
         };
-        if (visible) {
-            handlePosition();
-        }
-    }, [visible, placement]);
+        handlePosition();
+        window.addEventListener('resize', handlePosition);
+        window.addEventListener('scroll', handlePosition, true);
+        return function () {
+            window.removeEventListener('resize', handlePosition);
+            window.removeEventListener('scroll', handlePosition, true);
+        };
+    }, [visible, placement, title]);
     var handleClick = function () {
         setVisible(false); // Hide tooltip on click
     };
@@ -36,7 +50,7 @@ export default function Tooltip(_a) {
                 bottom: position === 'top' ? '100%' : undefined,
                 top: position === 'bottom' ? '100%' : undefined,
                 left: '50%',
-                transform: 'translateX(-50%)',
+                transform: "translateX(calc(-50% + ".concat(shiftX, "px))"),
             }}>
             {title}
           </div>)}

package/dist/designTokens.js

@@ -175,13 +175,13 @@ module.exports = {
     typography: {
         family: 'Inter, sans-serif',
         h1: {
-            weight: '300',
+            weight: '400',
             size: '96px',
             lineHeight: '120%',
             letterSpacing: '-1.5px',
         },
         h2: {
-            weight: '300',
+            weight: '400',
             size: '60px',
             lineHeight: '120%',
             letterSpacing: '-0.5px',
@@ -205,19 +205,19 @@ module.exports = {
             letterSpacing: '0px',
         },
         h6: {
-            weight: '500',
+            weight: '400',
             size: '20px',
             lineHeight: '150%',
             letterSpacing: '0.2px',
         },
         subtitle1: {
-            weight: '500',
+            weight: '400',
             size: '16px',
             lineHeight: '150%',
             letterSpacing: '0.2px',
         },
         subtitle2: {
-            weight: '500',
+            weight: '400',
             size: '14px',
             lineHeight: '150%',
             letterSpacing: '0.1px',