oneslash-design-system 1.1.25 → 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

@@ -62,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'

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] transition-colors duration-200 ease-in-out\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/iconButton.jsx

@@ -38,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

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,7 +40,7 @@ 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];
     var loadIcon = useCallback(function (iconName) { return __awaiter(_this, void 0, void 0, function () {
         var module_1, IconComponent, error_1;
@@ -83,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 transition-colors duration-200 ease-in-out\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 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>);
+    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/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/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;
 }
@@ -618,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));
 }
@@ -832,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;
@@ -880,6 +916,12 @@ video {
 .font-bold {
   font-weight: 700;
 }
+.leading-\[18px\] {
+  line-height: 18px;
+}
+.leading-\[22px\] {
+  line-height: 22px;
+}
 .leading-none {
   line-height: 1;
 }
@@ -990,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));
@@ -1150,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.25",
+  "version": "1.1.26",
   "private": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",