oneslash-design-system 1.1.24 → 1.1.26

package/components/button.tsx

@@ -1,15 +1,16 @@
 'use client';
 import React, { useState, useEffect, useCallback } from 'react';
 
-interface ButtonProps{
+interface ButtonProps {
   size: 'small' | 'medium' | 'large';
   type: 'primary' | 'secondary' | 'tertiary' | 'textOnly';
   state: 'enabled' | 'hovered' | 'focused' | 'disabled';
   label: string;
   decoIcon?: string;
   actionIcon?: string;
-  onClickButton?: any; 
+  onClickButton?: any;
   onClickActionIcon?: () => void;
+  className?: string;
 }
 
 type IconType = React.ComponentType<React.SVGProps<SVGSVGElement>>;
@@ -23,12 +24,12 @@ export default function Button({
   actionIcon,
   onClickButton,
   onClickActionIcon,
+  className = '',
 }: ButtonProps) {
   const [isHovered, setIsHovered] = useState(false);
   const [IconLeft, setIconLeft] = useState<IconType | null>(null);
   const [IconRight, setIconRight] = useState<IconType | null>(null);
 
-  // Import icon dynamically
   const loadIcon = useCallback(async (iconName?: string) => {
     if (!iconName) return null;
     try {
@@ -53,21 +54,18 @@ export default function Button({
     fetchIcons();
   }, [decoIcon, actionIcon, loadIcon]);
 
-  // Define classes for size
   const sizeClasses = {
     large: 'text-body1 p-2',
     medium: 'text-body1 p-1',
     small: 'text-body2 p-1',
   }[size];
 
-  // Define icon size classes
   const sizeIcon = {
     large: 'w-6 h-6',
     medium: 'w-5 h-5',
     small: 'w-4 h-4',
   }[size];
 
-  // Define classes for button types
   const baseTypeClasses = {
     primary: 'bg-light-accent-main dark:bg-dark-accent-main text-light-text-primary dark:text-dark-text-contrast',
     secondary: 'bg-light-secondary-main dark:bg-dark-secondary-main text-light-text-primary dark:text-dark-text-primary',
@@ -82,7 +80,6 @@ export default function Button({
     textOnly: 'hover:bg-light-background-accent100 hover:dark:bg-dark-background-accent100',
   }[type];
 
-  // State classes
   const stateClasses = {
     enabled: 'cursor-pointer',
     focused: 'ring-2 ring-offset-4 ring-offset-light-background-default dark:ring-offset-dark-background-default ring-light-accent-main dark:ring-dark-accent-main',
@@ -91,28 +88,27 @@ export default function Button({
       : 'cursor-not-allowed text-light-text-disabled dark:text-dark-text-disabled bg-light-actionBackground-disabled dark:bg-dark-actionBackground-disabled',
   };
 
-  // Build the button classes dynamically
   const buttonClasses = `
-    flex flex-row space-x-2 items-center rounded-[8px] transition-colors duration-200 ease-in-out
+    flex flex-row items-center rounded-[8px] transition-colors duration-200 ease-in-out justify-between
     ${sizeClasses}
     ${state === 'enabled' ? baseTypeClasses : ''}
     ${state === 'focused' ? stateClasses.focused : ''}
     ${state === 'disabled' ? stateClasses.disabled : baseTypeClasses}
     ${state !== 'disabled' && isHovered ? hoverTypeClasses : ''}
-    `;
+    ${className}
+  `;
 
   return (
     <button
-      className={buttonClasses} 
+      className={buttonClasses}
       onMouseEnter={() => { if (state !== 'disabled') setIsHovered(true); }}
       onMouseLeave={() => { if (state !== 'disabled') setIsHovered(false); }}
-      onClick={onClickButton} // Button click action
+      onClick={onClickButton}
     >
-      {IconLeft && (
-          <IconLeft className={sizeIcon} />
-      )}
-      <div className="flex-1 whitespace-nowrap overflow-hidden truncate px-2">
-        {label}
+      {/* Group IconLeft and label in a flex container for left alignment */}
+      <div className="flex items-center space-x-2">
+        {IconLeft && <IconLeft className={sizeIcon} />}
+        <div className="whitespace-nowrap overflow-hidden truncate">{label}</div>
       </div>
       {IconRight && (
         <div onClick={onClickActionIcon} className="cursor-pointer">

package/components/iconButton.tsx

@@ -2,6 +2,7 @@
 import React, { useState } from 'react';
 import * as HeroIcons24 from '@heroicons/react/24/outline';
 import * as HeroIcons20 from '@heroicons/react/20/solid';
+import { LoadingSmall } from './loadingScreen';
 
 interface IconButtonProps {
   color: "primary" | "secondary" | "tertiary" | "iconOnly";
@@ -9,6 +10,7 @@ interface IconButtonProps {
   size: "large" | "medium" | "small";
   iconName: keyof typeof HeroIcons24 & keyof typeof HeroIcons20;
   onClick?: any;
+  loading?: boolean;
 }
 
 type IconType = React.ComponentType<React.SVGProps<SVGSVGElement>>;
@@ -19,6 +21,7 @@ export default function IconButton({
   size,
   iconName,
   onClick,
+  loading = false, // Default to false
 }: IconButtonProps) {
   const [isHovered, setIsHovered] = useState(false);
 
@@ -41,7 +44,7 @@ export default function IconButton({
   };
 
   // Base classes (padding and corner radius)
-  const baseClasses = `${sizeClasses[size]} rounded-[8px] leading-none`;
+  const baseClasses = `${sizeClasses[size]} rounded-[8px] leading-none relative`;
 
   // Background color
   const bgColor = color === 'primary'
@@ -59,7 +62,7 @@ export default function IconButton({
     ? '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-accent100 hover:dark:bg-dark-background-accent100'; // iconOnly
+    : 'hover:bg-light-background-accent200 hover:dark:bg-dark-background-accent200'; // iconOnly
 
   // Icon color
   const iconColor = color === 'primary'
@@ -70,8 +73,10 @@ export default function IconButton({
     ? 'text-light-text-primary dark:text-dark-text-primary' // Tertiary
     : 'text-light-text-primary dark:text-dark-text-primary'; // iconOnly
 
-  // state
-  const stateClasses = state === 'disabled'
+  // State classes, including loading
+  const 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'
@@ -81,13 +86,18 @@ export default function IconButton({
 
   return (
     <button
-      className={`${baseClasses} ${bgColor} ${iconColor} ${bgColorHover} ${stateClasses} transition-colors duration-200 ease-in-out`}
-      disabled={state === 'disabled'}
+      className={`${baseClasses} ${bgColor} ${iconColor} ${bgColorHover} ${stateClasses} transition-colors duration-200 ease-in-out flex items-center justify-center`}
+      disabled={state === 'disabled' || loading} // Disable button during loading
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
       onClick={onClick}
+      aria-label={loading ? 'Loading' : 'Reload'}
     >
-      {Icon && <Icon className={iconSizeClasses[size]} />}
+      {loading ? (
+        <LoadingSmall size={size} /> // Pass the size prop to match the icon
+      ) : (
+        Icon && <Icon className={iconSizeClasses[size]} /> // Show icon when not loading
+      )}
     </button>
   );
 }

package/components/loadingScreen.tsx

@@ -1,6 +1,10 @@
 'use client';
 import React from 'react';
 
+interface LoadingSmallProps {
+  size?: 'large' | 'medium' | 'small'; // Match IconButton sizes
+}
+
 export default function LoadingScreen() {
   return (
     <div className="flex justify-center items-center h-full w-full min-h-[200px]">
@@ -9,10 +13,18 @@ export default function LoadingScreen() {
   );
 };
 
-export function LoadingSmall() {
+export function LoadingSmall({ size = 'medium' }: LoadingSmallProps) {
+  const spinnerSizeClasses = {
+    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
+  };
+
   return (
-    <div className="flex justify-center items-center h-[40px] w-[40px]">
-      <div className="w-[40px] h-[40px] border-4 border-t-transparent border-light-accent-main rounded-full animate-spin"></div>
+    <div className="flex justify-center items-center">
+      <div
+        className={`border-t-transparent border-light-accent-main rounded-full animate-spin ${spinnerSizeClasses[size]}`}
+      />
     </div>
   );
-};
+}

package/components/menuItem.tsx

@@ -13,16 +13,18 @@ interface MenuItemProps {
   label: string;
   isSelected?: boolean;
   onClick?: any;
+  className?: string;
 }
 
 export default function MenuItem({
-  href = '#',
+  href,
   iconName,
   userHandle,
   userImgUrl,
   label,
   isSelected,
   onClick,
+  className = '',
 }: MenuItemProps) {
   const [IconLeft, setIconLeft] = useState<IconType | null>(null);
 
@@ -47,34 +49,32 @@ export default function MenuItem({
     fetchIcon();
   }, [iconName, loadIcon]);
 
-  return (
-    <NextLink href={href}>
-      <div
-        className={`
-          flex items-center space-x-2 p-2 rounded-[8px] cursor-pointer justify-start transition-colors duration-200 ease-in-out
-          ${isSelected
-            ? 'bg-light-background-accent200 dark:bg-dark-background-accent200 hover:bg-light-background-accent300 dark:hover:bg-dark-background-accent300'
-            : 'hover:bg-light-background-accent100 hover:dark:bg-dark-background-accent100'}
-        `}
-        style={{ width: '100%' }}
-        onClick={onClick}
-      >
-        {/* Render UserImage or dynamic icon */}
-        {userImgUrl || userHandle ? (
-          <UserImage userHandle={userHandle || ''} userImgUrl={userImgUrl || ''} />
-        ) : (
-          IconLeft && (
-            <IconLeft
-              className="w-6 h-6 text-light-text-secondary dark:text-dark-text-secondary"
-            />
-          )
-        )}
-
-        {/* Label */}
-        <span className="whitespace-nowrap text-body1 px-2 text-light-text-primary dark:text-dark-text-primary">
-          {label}
-        </span>
-      </div>
-    </NextLink>
+  const content = (
+    <div
+      className={`
+        flex items-center space-x-2 p-2 rounded-[8px] cursor-pointer justify-start transition-colors duration-200 ease-in-out
+        ${isSelected
+          ? 'bg-light-background-accent300 dark:bg-dark-background-accent300 hover:bg-light-background-accent200 dark:hover:bg-dark-background-accent200'
+          : 'hover:bg-light-background-accent200 hover:dark:bg-dark-background-accent200'}
+        ${className}
+      `}
+      style={{ width: '100%' }}
+      onClick={onClick}
+    >
+      {userImgUrl ? (
+        <UserImage userHandle={userHandle || ''} userImgUrl={userImgUrl} />
+      ) : (
+        IconLeft && (
+          <IconLeft
+            className="w-6 h-6 text-light-text-secondary dark:text-dark-text-secondary"
+          />
+        )
+      )}
+      <span className="whitespace-nowrap text-body1 px-2 text-light-text-primary dark:text-dark-text-primary">
+        {label}
+      </span>
+    </div>
   );
+
+  return href ? <NextLink href={href}>{content}</NextLink> : content;
 }

package/components/popover.tsx

@@ -59,7 +59,7 @@ export default function Popover({
       ref={setPopoverElement}
       style={{ ...styles.popper, display: open ? 'block' : 'none' }}
       {...attributes.popper}
-      className="bg-light-background-accent100 dark:bg-dark-background-accent100 rounded-[8px] shadow-lg p-2"
+      className="bg-light-background-accent300 dark:bg-dark-background-accent300 rounded-[8px] shadow-lg p-2"
       role="dialog"
     >
       {children}

package/components/textField.tsx

@@ -16,6 +16,7 @@ interface TextFieldProps {
   maxRows?: number;
   disabled?: boolean;
   error?: boolean;
+  size?: 'large' | 'medium' | 'small';
 }
 
 export default function TextField({
@@ -33,16 +34,25 @@ export default function TextField({
   maxRows = 6,
   disabled = false,
   error = false,
+  size = 'medium',
 }: TextFieldProps) {
   const [isFocused, setIsFocused] = useState(false);
 
-  const baseClasses = 'w-full border rounded-[8px] p-2';
+  // Define classes for size: text size and padding
+  const sizeClasses = {
+    large: 'text-body1 p-[7px] leading-[22px]', // body1 (16px), padding 8px(7 + border 1) height 40
+    medium: 'text-body1 p-[3px] leading-[22px]', // body1 (16px), padding 4px(3 + border 1), height 32
+    small: 'text-body2 p-[3px] leading-[18px]', // body2 (14px), padding 4px(3 + border 1), height 28
+  }[size];
+
+  const baseClasses = 'w-full border rounded-[8px]';
   const bgColor = 'bg-light-background-default dark:bg-dark-background-default transition-colors duration-200 ease-in-out';
   const borderColor = 'border-light-outlinedBorder-active dark:border-dark-outlinedBorder-active';
   const containerClasses = `
     ${bgColor}
     ${borderColor}
     ${baseClasses}
+    ${sizeClasses}
     ${disabled ? 'bg-gray-200 cursor-not-allowed' : ''}
     ${error ? 'border-red-500 focus:ring-red-500' : ''}
     ${isFocused ? 'focus:border-light-accent-main focus:dark:border-dark-accent-main outline-none' : ''}
@@ -96,6 +106,7 @@ export default function TextField({
             onKeyDown={onKeyDown}
             autoFocus={autoFocus} // Pass autoFocus to textarea
             disabled={disabled}
+            autoComplete="off" // Disable browser autocomplete/autofill
           />
         ) : (
           <input
@@ -115,6 +126,7 @@ export default function TextField({
             onKeyDown={onKeyDown}
             autoFocus={autoFocus} // Pass autoFocus to input
             disabled={disabled}
+            autoComplete="off" // Disable browser autocomplete/autofill
           />
         )}
       </div>

package/dist/components/button.d.ts

@@ -8,6 +8,7 @@ interface ButtonProps {
     actionIcon?: string;
     onClickButton?: any;
     onClickActionIcon?: () => void;
+    className?: string;
 }
-export default function Button({ size, type, state, label, decoIcon, actionIcon, onClickButton, onClickActionIcon, }: ButtonProps): React.JSX.Element;
+export default function Button({ size, type, state, label, decoIcon, actionIcon, onClickButton, onClickActionIcon, className, }: ButtonProps): React.JSX.Element;
 export {};

package/dist/components/button.jsx

@@ -38,11 +38,10 @@ 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;
-    var _b = useState(false), isHovered = _b[0], setIsHovered = _b[1];
-    var _c = useState(null), IconLeft = _c[0], setIconLeft = _c[1];
-    var _d = useState(null), IconRight = _d[0], setIconRight = _d[1];
-    // Import icon dynamically
+    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 _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];
     var loadIcon = useCallback(function (iconName) { return __awaiter(_this, void 0, void 0, function () {
         var module_1, Icon, error_1;
         return __generator(this, function (_a) {
@@ -91,19 +90,16 @@ export default function Button(_a) {
         }); };
         fetchIcons();
     }, [decoIcon, actionIcon, loadIcon]);
-    // Define classes for size
     var sizeClasses = {
         large: 'text-body1 p-2',
         medium: 'text-body1 p-1',
         small: 'text-body2 p-1',
     }[size];
-    // Define icon size classes
     var sizeIcon = {
         large: 'w-6 h-6',
         medium: 'w-5 h-5',
         small: 'w-4 h-4',
     }[size];
-    // Define classes for button types
     var baseTypeClasses = {
         primary: 'bg-light-accent-main dark:bg-dark-accent-main text-light-text-primary dark:text-dark-text-contrast',
         secondary: 'bg-light-secondary-main dark:bg-dark-secondary-main text-light-text-primary dark:text-dark-text-primary',
@@ -116,7 +112,6 @@ export default function Button(_a) {
         tertiary: 'hover:bg-light-background-accent200 hover:dark:bg-dark-background-accent200',
         textOnly: 'hover:bg-light-background-accent100 hover:dark:bg-dark-background-accent100',
     }[type];
-    // State classes
     var stateClasses = {
         enabled: 'cursor-pointer',
         focused: 'ring-2 ring-offset-4 ring-offset-light-background-default dark:ring-offset-dark-background-default ring-light-accent-main dark:ring-dark-accent-main',
@@ -124,15 +119,14 @@ export default function Button(_a) {
             ? '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',
     };
-    // Build the button classes dynamically
-    var buttonClasses = "\n    flex flex-row space-x-2 items-center rounded-[8px]\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    ");
+    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  ");
     return (<button className={buttonClasses} onMouseEnter={function () { if (state !== 'disabled')
         setIsHovered(true); }} onMouseLeave={function () { if (state !== 'disabled')
-        setIsHovered(false); }} onClick={onClickButton} // Button click action
-    >
-      {IconLeft && (<IconLeft className={sizeIcon}/>)}
-      <div className="flex-1 whitespace-nowrap overflow-hidden truncate px-2">
-        {label}
+        setIsHovered(false); }} onClick={onClickButton}>
+      {/* Group IconLeft and label in a flex container for left alignment */}
+      <div className="flex items-center space-x-2">
+        {IconLeft && <IconLeft className={sizeIcon}/>}
+        <div className="whitespace-nowrap overflow-hidden truncate">{label}</div>
       </div>
       {IconRight && (<div onClick={onClickActionIcon} className="cursor-pointer">
           <IconRight className={sizeIcon}/>

package/dist/components/checkBox.jsx

@@ -11,14 +11,14 @@ export default function Checkbox(_a) {
         }
     };
     return (<label className="flex items-center cursor-pointer">
-      <div onClick={handleToggle} className="relative flex items-center justify-center w-6 h-6 group">
+      <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 transition-all"></div>
+        <div className="absolute w-6 h-6 rounded-full 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 transition-colors duration-200 ease-in-out")}>
+            : '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>)}

package/dist/components/iconButton.d.ts

@@ -7,6 +7,7 @@ interface IconButtonProps {
     size: "large" | "medium" | "small";
     iconName: keyof typeof HeroIcons24 & keyof typeof HeroIcons20;
     onClick?: any;
+    loading?: boolean;
 }
-export default function IconButton({ color, state, size, iconName, onClick, }: IconButtonProps): React.JSX.Element;
+export default function IconButton({ color, state, size, iconName, onClick, loading, }: IconButtonProps): React.JSX.Element;
 export {};

package/dist/components/iconButton.jsx

@@ -2,9 +2,10 @@
 import React, { useState } from 'react';
 import * as HeroIcons24 from '@heroicons/react/24/outline';
 import * as HeroIcons20 from '@heroicons/react/20/solid';
+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;
-    var _b = useState(false), isHovered = _b[0], setIsHovered = _b[1];
+    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];
     // Select icon based on size
     var Icon = size === 'small'
         ? HeroIcons20[iconName]
@@ -21,7 +22,7 @@ export default function IconButton(_a) {
         small: 'size-5', // 20px
     };
     // Base classes (padding and corner radius)
-    var baseClasses = "".concat(sizeClasses[size], " rounded-[8px] leading-none");
+    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
@@ -37,7 +38,7 @@ export default function IconButton(_a) {
             ? '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-accent100 hover:dark:bg-dark-background-accent100'; // iconOnly
+                : '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
@@ -46,15 +47,20 @@ export default function IconButton(_a) {
             : color === 'tertiary'
                 ? 'text-light-text-primary dark:text-dark-text-primary' // Tertiary
                 : 'text-light-text-primary dark:text-dark-text-primary'; // iconOnly
-    // state
-    var stateClasses = state === 'disabled'
-        ? 'cursor-not-allowed opacity-50'
-        : state === 'selected'
-            ? 'cursor-pointer ring-2 ring-offset-2 ring-blue-500'
-            : isHovered
-                ? 'cursor-pointer hover:bg-opacity-75'
-                : 'cursor-pointer';
-    return (<button className={"".concat(baseClasses, " ").concat(bgColor, " ").concat(iconColor, " ").concat(bgColorHover, " ").concat(stateClasses)} disabled={state === 'disabled'} onMouseEnter={function () { return setIsHovered(true); }} onMouseLeave={function () { return setIsHovered(false); }} onClick={onClick}>
-      {Icon && <Icon className={iconSizeClasses[size]}/>}
+    // 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'
+                : isHovered
+                    ? 'cursor-pointer hover:bg-opacity-75'
+                    : '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'}>
+      {loading ? (<LoadingSmall size={size}/> // Pass the size prop to match the icon
+        ) : (Icon && <Icon className={iconSizeClasses[size]}/> // Show icon when not loading
+        )}
     </button>);
 }

package/dist/components/loadingScreen.d.ts

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

package/dist/components/loadingScreen.jsx

@@ -6,9 +6,14 @@ export default function LoadingScreen() {
     </div>);
 }
 ;
-export function LoadingSmall() {
-    return (<div className="flex justify-center items-center h-[40px] w-[40px]">
-      <div className="w-[40px] h-[40px] border-4 border-t-transparent border-light-accent-main rounded-full animate-spin"></div>
+export function LoadingSmall(_a) {
+    var _b = _a.size, size = _b === void 0 ? 'medium' : _b;
+    var spinnerSizeClasses = {
+        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
+    };
+    return (<div className="flex justify-center items-center">
+      <div className={"border-t-transparent border-light-accent-main rounded-full animate-spin ".concat(spinnerSizeClasses[size])}/>
     </div>);
 }
-;

package/dist/components/menuItem.d.ts

@@ -7,6 +7,7 @@ interface MenuItemProps {
     label: string;
     isSelected?: boolean;
     onClick?: any;
+    className?: string;
 }
-export default function MenuItem({ href, iconName, userHandle, userImgUrl, label, isSelected, onClick, }: MenuItemProps): React.JSX.Element;
+export default function MenuItem({ href, iconName, userHandle, userImgUrl, label, isSelected, onClick, className, }: MenuItemProps): React.JSX.Element;
 export {};

package/dist/components/menuItem.jsx

@@ -40,9 +40,8 @@ import NextLink from 'next/link';
 import UserImage from './userImage';
 export default function MenuItem(_a) {
     var _this = this;
-    var _b = _a.href, href = _b === void 0 ? '#' : _b, iconName = _a.iconName, userHandle = _a.userHandle, userImgUrl = _a.userImgUrl, label = _a.label, isSelected = _a.isSelected, onClick = _a.onClick;
+    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;
     var _c = useState(null), IconLeft = _c[0], setIconLeft = _c[1];
-    // Import icon dynamically
     var loadIcon = useCallback(function (iconName) { return __awaiter(_this, void 0, void 0, function () {
         var module_1, IconComponent, error_1;
         return __generator(this, function (_a) {
@@ -84,17 +83,13 @@ export default function MenuItem(_a) {
         }); };
         fetchIcon();
     }, [iconName, loadIcon]);
-    return (<NextLink href={href}>
-      <div className={"\n          flex items-center space-x-2 p-2 rounded-[8px] cursor-pointer justify-start\n          ".concat(isSelected
-            ? 'bg-light-background-accent200 dark:bg-dark-background-accent200 hover:bg-light-background-accent300 dark:hover:bg-dark-background-accent300'
-            : 'hover:bg-light-background-accent100 hover:dark:bg-dark-background-accent100', "\n        ")} style={{ width: '100%' }} onClick={onClick}>
-        {/* render userImage. render dynamic icon if userImage is not available */}
-        {userImgUrl || userHandle ? (<UserImage userHandle={userHandle || ''} userImgUrl={userImgUrl || ''}/>) : (IconLeft && <IconLeft className="w-6 h-6"/>)}
-
-        {/* label */}
-        <span className="whitespace-nowrap text-body1 px-2 text-light-text-secondary dark:text-dark-text-secondary">
-          {label}
-        </span>
-      </div>
-    </NextLink>);
+    var content = (<div className={"\n        flex items-center space-x-2 p-2 rounded-[8px] cursor-pointer justify-start transition-colors duration-200 ease-in-out\n        ".concat(isSelected
+            ? 'bg-light-background-accent300 dark:bg-dark-background-accent300 hover:bg-light-background-accent200 dark:hover:bg-dark-background-accent200'
+            : 'hover:bg-light-background-accent200 hover:dark:bg-dark-background-accent200', "\n        ").concat(className, "\n      ")} style={{ width: '100%' }} onClick={onClick}>
+      {userImgUrl ? (<UserImage userHandle={userHandle || ''} userImgUrl={userImgUrl}/>) : (IconLeft && (<IconLeft className="w-6 h-6 text-light-text-secondary dark:text-dark-text-secondary"/>))}
+      <span className="whitespace-nowrap text-body1 px-2 text-light-text-primary dark:text-dark-text-primary">
+        {label}
+      </span>
+    </div>);
+    return href ? <NextLink href={href}>{content}</NextLink> : content;
 }

package/dist/components/popover.jsx

@@ -45,7 +45,7 @@ export default function Popover(_a) {
     if (!open || !hasMounted || !anchorEl)
         return null;
     // Render popover in a portal to prevent layout shifts and positioning issues
-    return createPortal(<div id={id} ref={setPopoverElement} style={__assign(__assign({}, styles.popper), { display: open ? 'block' : 'none' })} {...attributes.popper} className="bg-light-background-accent100 dark:bg-dark-background-accent100 rounded-[8px] shadow-lg p-2" role="dialog">
+    return createPortal(<div id={id} ref={setPopoverElement} style={__assign(__assign({}, styles.popper), { display: open ? 'block' : 'none' })} {...attributes.popper} className="bg-light-background-accent300 dark:bg-dark-background-accent300 rounded-[8px] shadow-lg p-2" role="dialog">
       {children}
     </div>, document.body // Mounting the popover in the document body for isolation
     );

package/dist/components/tab.jsx

@@ -99,7 +99,7 @@ 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-outh\n        ".concat(isSelected
+    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}>
       {IconLeft && <IconLeft className="w-6 h-6"/>}

package/dist/components/tag.d.ts

@@ -4,7 +4,7 @@ interface TagProps {
     variant: 'contained' | 'textOnly';
     size: 'medium' | 'small';
     state?: 'enabled' | 'selected';
-    label: string;
+    label: React.ReactNode;
     iconName?: keyof typeof HeroIcons;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
     color?: 'default' | 'info';

package/dist/components/textField.d.ts

@@ -14,7 +14,8 @@ interface TextFieldProps {
     maxRows?: number;
     disabled?: boolean;
     error?: boolean;
+    size?: 'large' | 'medium' | 'small';
 }
 export default function TextField({ id, label, value, onChange, onBlur, onFocus, onKeyDown, autoFocus, // Accept the autoFocus prop with default value
-iconLeft, iconRight, multiline, maxRows, disabled, error, }: TextFieldProps): React.JSX.Element;
+iconLeft, iconRight, multiline, maxRows, disabled, error, size, }: TextFieldProps): React.JSX.Element;
 export {};

package/dist/components/textField.jsx

@@ -2,12 +2,18 @@
 import React, { useState } from 'react';
 export default function TextField(_a) {
     var id = _a.id, label = _a.label, value = _a.value, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, _b = _a.autoFocus, autoFocus = _b === void 0 ? false : _b, // Accept the autoFocus prop with default value
-    iconLeft = _a.iconLeft, iconRight = _a.iconRight, _c = _a.multiline, multiline = _c === void 0 ? false : _c, _d = _a.maxRows, maxRows = _d === void 0 ? 6 : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.error, error = _f === void 0 ? false : _f;
-    var _g = useState(false), isFocused = _g[0], setIsFocused = _g[1];
-    var baseClasses = 'w-full border rounded-[8px] p-2';
+    iconLeft = _a.iconLeft, iconRight = _a.iconRight, _c = _a.multiline, multiline = _c === void 0 ? false : _c, _d = _a.maxRows, maxRows = _d === void 0 ? 6 : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.error, error = _f === void 0 ? false : _f, _g = _a.size, size = _g === void 0 ? 'medium' : _g;
+    var _h = useState(false), isFocused = _h[0], setIsFocused = _h[1];
+    // Define classes for size: text size and padding
+    var sizeClasses = {
+        large: 'text-body1 p-[7px] leading-[22px]', // body1 (16px), padding 8px(7 + border 1) height 40
+        medium: 'text-body1 p-[3px] leading-[22px]', // body1 (16px), padding 4px(3 + border 1), height 32
+        small: 'text-body2 p-[3px] leading-[18px]', // body2 (14px), padding 4px(3 + border 1), height 28
+    }[size];
+    var baseClasses = 'w-full border rounded-[8px]';
     var bgColor = 'bg-light-background-default dark:bg-dark-background-default transition-colors duration-200 ease-in-out';
     var borderColor = 'border-light-outlinedBorder-active dark:border-dark-outlinedBorder-active';
-    var containerClasses = "\n    ".concat(bgColor, "\n    ").concat(borderColor, "\n    ").concat(baseClasses, "\n    ").concat(disabled ? 'bg-gray-200 cursor-not-allowed' : '', "\n    ").concat(error ? 'border-red-500 focus:ring-red-500' : '', "\n    ").concat(isFocused ? 'focus:border-light-accent-main focus:dark:border-dark-accent-main outline-none' : '', "\n    ").concat(!disabled && !error ? 'hover:border-light-outlinedBorder-hover' : '', "\n    border-gray-300\n  ");
+    var containerClasses = "\n    ".concat(bgColor, "\n    ").concat(borderColor, "\n    ").concat(baseClasses, "\n    ").concat(sizeClasses, "\n    ").concat(disabled ? 'bg-gray-200 cursor-not-allowed' : '', "\n    ").concat(error ? 'border-red-500 focus:ring-red-500' : '', "\n    ").concat(isFocused ? 'focus:border-light-accent-main focus:dark:border-dark-accent-main outline-none' : '', "\n    ").concat(!disabled && !error ? 'hover:border-light-outlinedBorder-hover' : '', "\n    border-gray-300\n  ");
     var renderIconRight = function () {
         if (React.isValidElement(iconRight)) {
             return iconRight;
@@ -37,7 +43,8 @@ export default function TextField(_a) {
                 if (onBlur)
                     onBlur(e);
             }} onKeyDown={onKeyDown} autoFocus={autoFocus} // Pass autoFocus to textarea
-         disabled={disabled}/>) : (<input id={id} type="text" className={containerClasses} value={value} onChange={onChange} onFocus={function (e) {
+         disabled={disabled} autoComplete="off" // Disable browser autocomplete/autofill
+        />) : (<input id={id} type="text" className={containerClasses} value={value} onChange={onChange} onFocus={function (e) {
                 setIsFocused(true);
                 if (onFocus)
                     onFocus(e);
@@ -46,7 +53,8 @@ export default function TextField(_a) {
                 if (onBlur)
                     onBlur(e);
             }} onKeyDown={onKeyDown} autoFocus={autoFocus} // Pass autoFocus to input
-         disabled={disabled}/>)}
+         disabled={disabled} autoComplete="off" // Disable browser autocomplete/autofill
+        />)}
       </div>
       {error && (<p className="mt-1 text-light-error-main text-body2">
           This field is required

package/dist/designTokens.js

@@ -78,7 +78,7 @@ module.exports = {
         // dark
         dark: {
             text: {
-                primary: '#ebebeb',
+                primary: '#eeeeee',
                 secondary: '#B0B0B0',
                 disabled: '#6D6D6D',
                 contrast: '#000000',
@@ -220,7 +220,7 @@ module.exports = {
             weight: '400',
             size: '12px',
             lineHeight: '150%',
-            letterSpacing: '0.3px',
+            letterSpacing: '0.5px',
         },
         alignments: {
             left: 'left',

package/dist/output.css

@@ -497,6 +497,39 @@ video {
   scrollbar-color: initial;
   scrollbar-width: initial;
 }
+.container {
+  width: 100%;
+}
+@media (min-width: 640px) {
+
+  .container {
+    max-width: 640px;
+  }
+}
+@media (min-width: 768px) {
+
+  .container {
+    max-width: 768px;
+  }
+}
+@media (min-width: 1024px) {
+
+  .container {
+    max-width: 1024px;
+  }
+}
+@media (min-width: 1280px) {
+
+  .container {
+    max-width: 1280px;
+  }
+}
+@media (min-width: 1536px) {
+
+  .container {
+    max-width: 1536px;
+  }
+}
 .visible {
   visibility: visible;
 }
@@ -582,9 +615,6 @@ video {
 .h-6 {
   height: 1.5rem;
 }
-.h-\[40px\] {
-  height: 40px;
-}
 .h-full {
   height: 100%;
 }
@@ -612,9 +642,6 @@ video {
 .w-\[1200px\] {
   width: 1200px;
 }
-.w-\[40px\] {
-  width: 40px;
-}
 .w-\[600px\] {
   width: 600px;
 }
@@ -624,9 +651,6 @@ video {
 .max-w-md {
   max-width: 28rem;
 }
-.flex-1 {
-  flex: 1 1 0%;
-}
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -645,6 +669,9 @@ video {
 .cursor-pointer {
   cursor: pointer;
 }
+.cursor-wait {
+  cursor: wait;
+}
 .flex-row {
   flex-direction: row;
 }
@@ -835,6 +862,12 @@ video {
 .p-6 {
   padding: 1.5rem;
 }
+.p-\[3px\] {
+  padding: 3px;
+}
+.p-\[7px\] {
+  padding: 7px;
+}
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -883,12 +916,18 @@ video {
 .font-bold {
   font-weight: 700;
 }
+.leading-\[18px\] {
+  line-height: 18px;
+}
+.leading-\[22px\] {
+  line-height: 22px;
+}
 .leading-none {
   line-height: 1;
 }
 .text-dark-text-primary {
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  color: rgb(238 238 238 / var(--tw-text-opacity));
 }
 .text-light-error-main {
   --tw-text-opacity: 1;
@@ -956,18 +995,13 @@ video {
   --tw-blur: blur(8px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
-.transition-all {
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
 .transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
-.duration-300 {
-  transition-duration: 300ms;
+.duration-200 {
+  transition-duration: 200ms;
 }
 .ease-in-out {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -998,11 +1032,6 @@ body {
   background-color: rgb(247 247 247 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-light-background-accent300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
 .hover\:bg-light-secondary-dark:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(136 136 136 / var(--tw-bg-opacity));
@@ -1031,7 +1060,7 @@ body {
 
   .dark\:border-dark-text-primary {
     --tw-border-opacity: 1;
-    border-color: rgb(255 255 255 / var(--tw-border-opacity));
+    border-color: rgb(238 238 238 / var(--tw-border-opacity));
   }
 
   .dark\:border-dark-text-secondary {
@@ -1096,7 +1125,7 @@ body {
 
   .dark\:bg-dark-text-primary {
     --tw-bg-opacity: 1;
-    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+    background-color: rgb(238 238 238 / var(--tw-bg-opacity));
   }
 
   .dark\:bg-dark-warning-main {
@@ -1126,7 +1155,7 @@ body {
 
   .dark\:text-dark-text-primary {
     --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity));
+    color: rgb(238 238 238 / var(--tw-text-opacity));
   }
 
   .dark\:text-dark-text-secondary {
@@ -1158,11 +1187,6 @@ body {
     background-color: rgb(69 69 69 / var(--tw-bg-opacity));
   }
 
-  .dark\:hover\:bg-dark-background-accent300:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(79 79 79 / var(--tw-bg-opacity));
-  }
-
   .dark\:hover\:bg-dark-secondary-dark:hover {
     --tw-bg-opacity: 1;
     background-color: rgb(69 69 69 / var(--tw-bg-opacity));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "oneslash-design-system",
   "description": "A design system for the Oneslash projects",
-  "version": "1.1.24",
+  "version": "1.1.26",
   "private": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",