oneslash-design-system 1.2.23 → 1.2.25

package/dist/components/tab.jsx

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

package/dist/components/tabsContainer.jsx

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

package/dist/components/tag.d.ts

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

package/dist/components/tag.jsx

@@ -1,43 +1,103 @@
 'use client';
-import React, { useState, useEffect } from 'react';
-import * as LucideIcons from 'lucide-react';
+import React, { useState } from 'react';
+import { icons } from 'lucide-react';
+var colorConfig = {
+    default: {
+        bg: 'bg-light-secondary-light dark:bg-dark-secondary-light',
+        text: 'text-light-text-primary dark:text-dark-text-primary',
+        textOnly: 'text-light-text-secondary dark:text-dark-text-secondary',
+        border: 'border-light-misc-divider dark:border-dark-misc-divider',
+        hasBorderTextOnly: false,
+    },
+    success: {
+        bg: 'bg-light-success-main dark:bg-dark-success-main',
+        text: 'text-light-text-primary dark:text-dark-text-primary',
+        textOnly: 'text-light-success-main dark:text-dark-success-main',
+        border: 'border-light-success-main dark:border-dark-success-main',
+        hasBorderTextOnly: true,
+    },
+    warning: {
+        bg: 'bg-light-warning-main dark:bg-dark-warning-main',
+        text: 'text-light-text-primary dark:text-dark-text-primary',
+        textOnly: 'text-light-warning-main dark:text-dark-warning-main',
+        border: 'border-light-warning-main dark:border-dark-warning-main',
+        hasBorderTextOnly: true,
+    },
+    error: {
+        bg: 'bg-light-error-main dark:bg-dark-error-main',
+        text: 'text-light-text-primary dark:text-dark-text-primary',
+        textOnly: 'text-light-error-main dark:text-dark-error-main',
+        border: 'border-light-error-main dark:border-dark-error-main',
+        hasBorderTextOnly: true,
+    },
+    info: {
+        bg: 'bg-light-info-main dark:bg-dark-info-main',
+        text: 'text-light-text-primary dark:text-dark-text-primary',
+        textOnly: 'text-light-info-main dark:text-dark-info-main',
+        border: 'border-light-info-main dark:border-dark-info-main',
+        hasBorderTextOnly: true,
+    },
+};
 export default function Tag(_a) {
-    var variant = _a.variant, size = _a.size, _b = _a.state, state = _b === void 0 ? 'enabled' : _b, label = _a.label, iconName = _a.iconName, onClick = _a.onClick;
+    var variant = _a.variant, size = _a.size, _b = _a.state, state = _b === void 0 ? 'enabled' : _b, color = _a.color, label = _a.label, secondLabel = _a.secondLabel, iconName = _a.iconName, onClick = _a.onClick;
     var _c = useState(false), isHovered = _c[0], setIsHovered = _c[1];
-    var _d = useState(null), Icon = _d[0], setIcon = _d[1];
-    // Load icon directly from Lucide
-    useEffect(function () {
-        if (iconName) {
-            setIcon(LucideIcons[iconName]);
-        }
-    }, [iconName]);
+    // 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]';
     // Selected state styles
     var isSelected = state === 'selected';
+    // When color is provided, use color-based styling
+    var colorStyles = color ? colorConfig[color] : null;
     // Background color
-    var bgClasses = isSelected && variant === 'contained'
-        ? 'bg-light-accent-main dark:bg-dark-accent-main'
-        : variant === 'contained'
-            ? 'bg-light-background-accent300 dark:bg-dark-background-accent300'
-            : '';
+    var bgClasses = '';
+    if (colorStyles) {
+        bgClasses = variant === 'contained' ? colorStyles.bg : '';
+    }
+    else if (isSelected && variant === 'contained') {
+        bgClasses = 'bg-light-accent-main dark:bg-dark-accent-main';
+    }
+    else if (variant === 'contained') {
+        bgClasses = 'bg-light-background-accent300 dark:bg-dark-background-accent300';
+    }
     // Font color
-    var fontClasses = isSelected
-        ? 'text-white'
-        : 'text-light-text-primary dark:text-dark-text-primary';
+    var fontClasses = '';
+    if (colorStyles) {
+        fontClasses = variant === 'textOnly' ? colorStyles.textOnly : colorStyles.text;
+    }
+    else if (isSelected) {
+        fontClasses = 'text-white';
+    }
+    else {
+        fontClasses = 'text-light-text-primary dark:text-dark-text-primary';
+    }
     // Border styles
-    var borderClasses = isSelected && variant === 'textOnly'
-        ? 'border border-light-accent-main dark:border-dark-accent-main'
-        : variant === 'contained'
-            ? 'border border-light-misc-divider dark:border-dark-misc-divider'
-            : '';
-    // Hover (only when not selected and onClick is provided)
-    var hoverClasses = !isSelected && variant === 'contained' && isHovered && onClick
+    var borderClasses = '';
+    if (colorStyles) {
+        if (variant === 'textOnly' && colorStyles.hasBorderTextOnly) {
+            borderClasses = "border ".concat(colorStyles.border);
+        }
+        else if (variant === 'contained') {
+            borderClasses = "border ".concat(colorStyles.border);
+        }
+    }
+    else if (isSelected && variant === 'textOnly') {
+        borderClasses = 'border border-light-accent-main dark:border-dark-accent-main';
+    }
+    else if (variant === 'contained') {
+        borderClasses = 'border border-light-misc-divider dark:border-dark-misc-divider';
+    }
+    // Hover (only when not selected, no color, and onClick is provided)
+    var hoverClasses = !isSelected && !color && variant === 'contained' && isHovered && onClick
         ? 'bg-light-background-accent200 dark:bg-dark-background-accent200'
         : '';
     var cursorClass = onClick && !isSelected ? 'cursor-pointer' : '';
-    return (<div className={"\n        flex items-center space-x-1 rounded-full\n        ".concat(sizeClasses, " ").concat(bgClasses, " ").concat(fontClasses, " ").concat(borderClasses, " ").concat(hoverClasses, " ").concat(cursorClass, "\n        transition-colors duration-200 ease-in-out\n      ")} onMouseEnter={function () { return onClick && setIsHovered(true); }} onMouseLeave={function () { return onClick && setIsHovered(false); }} onClick={onClick}>
-      {Icon && <Icon className="w-4 h-4" strokeWidth={2}/>}
-      <span>{label}</span>
+    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}>
+      {Icon && <Icon className="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>)}
+      </div>
     </div>);
 }

package/dist/components/textField.d.ts

@@ -3,17 +3,20 @@ interface TextFieldProps {
     id: string;
     label?: string;
     value: string;
+    type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search';
     onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     onBlur?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     onFocus?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onSubmit?: () => void;
     autoFocus?: boolean;
     multiline?: boolean;
     maxRows?: number;
     disabled?: boolean;
     error?: boolean;
+    required?: boolean;
     size?: 'large' | 'medium' | 'small';
+    placeholder?: string;
 }
-export default function TextField({ id, label, value, onChange, onBlur, onFocus, onKeyDown, autoFocus, // Accept the autoFocus prop with default value
-multiline, maxRows, disabled, error, size, }: TextFieldProps): React.JSX.Element;
+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;
 export {};

package/dist/components/textField.jsx

@@ -1,20 +1,37 @@
 'use client';
 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
-    _c = _a.multiline, // Accept the autoFocus prop with default value
-    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];
+    var id = _a.id, label = _a.label, value = _a.value, _b = _a.type, type = _b === void 0 ? 'text' : _b, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onSubmit = _a.onSubmit, _c = _a.autoFocus, autoFocus = _c === void 0 ? false : _c, _d = _a.multiline, multiline = _d === void 0 ? false : _d, _e = _a.maxRows, maxRows = _e === void 0 ? 6 : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.error, error = _g === void 0 ? false : _g, _h = _a.required, required = _h === void 0 ? false : _h, _j = _a.size, size = _j === void 0 ? 'medium' : _j, placeholder = _a.placeholder;
+    var _k = useState(false), isFocused = _k[0], setIsFocused = _k[1];
+    var handleKeyDown = function (e) {
+        // Ctrl+Enter or Cmd+Enter to submit
+        if ((e.ctrlKey || e.metaKey) && e.key === 'Enter' && onSubmit) {
+            e.preventDefault();
+            onSubmit();
+        }
+        if (onKeyDown)
+            onKeyDown(e);
+    };
     // 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
+        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
     }[size];
-    var baseClasses = 'w-full border rounded-[8px]';
+    var baseClasses = 'w-full border rounded-[8px] outline-none';
+    var textColor = 'text-light-text-primary dark:text-dark-text-primary';
     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(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  ");
+    // Border color logic: error > focused > default (misc-divider)
+    var getBorderColor = function () {
+        if (error) {
+            return 'border-light-error-main dark:border-dark-error-main';
+        }
+        if (isFocused) {
+            return 'border-light-text-primary dark:border-dark-text-primary';
+        }
+        return 'border-light-text-disabled dark:border-dark-text-disabled';
+    };
+    var containerClasses = "\n    ".concat(bgColor, "\n    ").concat(textColor, "\n    ").concat(baseClasses, "\n    ").concat(sizeClasses, "\n    ").concat(getBorderColor(), "\n    ").concat(disabled ? 'bg-light-actionBackground-disabled dark:bg-dark-actionBackground-disabled cursor-not-allowed' : '', "\n  ");
     return (<div className="flex flex-col w-full">
       {label && (<label htmlFor={id} className="mb-1 text-body2 text-light-text-secondary dark:text-dark-text-secondary">
           {label}
@@ -28,9 +45,7 @@ export default function TextField(_a) {
                 setIsFocused(false);
                 if (onBlur)
                     onBlur(e);
-            }} onKeyDown={onKeyDown} autoFocus={autoFocus} // Pass autoFocus to textarea
-         disabled={disabled} autoComplete="off" // Disable browser autocomplete/autofill
-        />) : (<input id={id} type="text" className={containerClasses} value={value} onChange={onChange} onFocus={function (e) {
+            }} onKeyDown={handleKeyDown} autoFocus={autoFocus} disabled={disabled} required={required} autoComplete="off"/>) : (<input id={id} type={type} className={containerClasses} value={value} onChange={onChange} placeholder={placeholder} onFocus={function (e) {
                 setIsFocused(true);
                 if (onFocus)
                     onFocus(e);
@@ -38,9 +53,7 @@ export default function TextField(_a) {
                 setIsFocused(false);
                 if (onBlur)
                     onBlur(e);
-            }} onKeyDown={onKeyDown} autoFocus={autoFocus} // Pass autoFocus to input
-         disabled={disabled} autoComplete="off" // Disable browser autocomplete/autofill
-        />)}
+            }} onKeyDown={handleKeyDown} autoFocus={autoFocus} disabled={disabled} required={required} autoComplete="off"/>)}
       </div>
       {error && (<p className="mt-1 text-light-error-main text-body2">
           This field is required

package/dist/components/textarea.d.ts

@@ -7,11 +7,13 @@ interface TextareaProps {
     onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
     onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
     onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+    onSubmit?: () => void;
     autoFocus?: boolean;
     maxRows?: number;
     disabled?: boolean;
     error?: boolean;
-    size?: 'large' | 'medium' | 'small';
+    size?: 'medium' | 'small';
+    placeholder?: string;
 }
-export default function Textarea({ id, label, value, onChange, onBlur, onFocus, onKeyDown, autoFocus, maxRows, disabled, error, size, }: TextareaProps): React.JSX.Element;
+export default function Textarea({ id, label, value, onChange, onBlur, onFocus, onKeyDown, onSubmit, autoFocus, maxRows, disabled, error, size, placeholder, }: TextareaProps): React.JSX.Element;
 export {};

package/dist/components/textarea.jsx

@@ -1,9 +1,18 @@
 'use client';
 import React, { useEffect, useRef, useState } from 'react';
 export default function Textarea(_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, _c = _a.maxRows, maxRows = _c === void 0 ? 6 : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.error, error = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? 'medium' : _f;
+    var id = _a.id, label = _a.label, value = _a.value, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onSubmit = _a.onSubmit, _b = _a.autoFocus, autoFocus = _b === void 0 ? false : _b, _c = _a.maxRows, maxRows = _c === void 0 ? 6 : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.error, error = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? 'medium' : _f, placeholder = _a.placeholder;
     var textareaRef = useRef(null);
     var _g = useState(false), isFocused = _g[0], setIsFocused = _g[1];
+    var handleKeyDown = function (e) {
+        // Ctrl+Enter or Cmd+Enter to submit
+        if ((e.ctrlKey || e.metaKey) && e.key === 'Enter' && onSubmit) {
+            e.preventDefault();
+            onSubmit();
+        }
+        if (onKeyDown)
+            onKeyDown(e);
+    };
     useEffect(function () {
         var textarea = textareaRef.current;
         if (!textarea)
@@ -15,8 +24,10 @@ export default function Textarea(_a) {
             var scrollHeight = textarea.scrollHeight;
             // Set height to scrollHeight, capped at maxRows, but at least 1 line
             textarea.style.height = "".concat(Math.max(Math.min(scrollHeight, maxHeight), lineHeight), "px");
-            // Enable vertical scroll if content exceeds maxRows
-            textarea.style.overflowY = scrollHeight > maxHeight ? 'auto' : 'hidden';
+            // Enable vertical scroll if content exceeds maxRows (hide scrollbar)
+            textarea.style.overflowY = scrollHeight > maxHeight ? 'scroll' : 'hidden';
+            textarea.style.scrollbarWidth = 'none'; // Firefox
+            textarea.style.msOverflowStyle = 'none'; // IE/Edge
         };
         // Set initial rows to 1 for single-line height
         textarea.rows = 1;
@@ -26,20 +37,29 @@ export default function Textarea(_a) {
     }, [maxRows]);
     // 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
+        medium: 'text-body1 p-2 leading-[22px]', // body1 (16px), padding 8px
+        small: 'text-body2 p-2 leading-[18px]', // body2 (14px), padding 8px
     }[size];
-    var baseClasses = 'w-full border rounded-[8px]';
+    var baseClasses = 'w-full border rounded-[8px] outline-none [&::-webkit-scrollbar]:hidden';
+    var textColor = 'text-light-text-primary dark:text-dark-text-primary';
     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(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  ");
+    // Border color logic: error > focused > default (misc-divider)
+    var getBorderColor = function () {
+        if (error) {
+            return 'border-light-error-main dark:border-dark-error-main';
+        }
+        if (isFocused) {
+            return 'border-light-text-primary dark:border-dark-text-primary';
+        }
+        return 'border-light-text-disabled dark:border-dark-text-disabled';
+    };
+    var containerClasses = "\n    ".concat(bgColor, "\n    ").concat(textColor, "\n    ").concat(baseClasses, "\n    ").concat(sizeClasses, "\n    ").concat(getBorderColor(), "\n    ").concat(disabled ? 'bg-light-actionBackground-disabled dark:bg-dark-actionBackground-disabled cursor-not-allowed' : '', "\n  ");
     return (<div className="flex flex-col w-full">
       {label && (<label htmlFor={id} className="mb-1 text-body2 text-light-text-secondary dark:text-dark-text-secondary">
           {label}
         </label>)}
       <div className="relative">
-        <textarea ref={textareaRef} id={id} rows={1} className={containerClasses} value={value} onChange={onChange} onFocus={function (e) {
+        <textarea ref={textareaRef} id={id} rows={1} className={containerClasses} value={value} onChange={onChange} placeholder={placeholder} onFocus={function (e) {
             setIsFocused(true);
             if (onFocus)
                 onFocus(e);
@@ -47,7 +67,7 @@ export default function Textarea(_a) {
             setIsFocused(false);
             if (onBlur)
                 onBlur(e);
-        }} onKeyDown={onKeyDown} autoFocus={autoFocus} disabled={disabled} autoComplete="off"/>
+        }} onKeyDown={handleKeyDown} autoFocus={autoFocus} disabled={disabled} autoComplete="off"/>
       </div>
       {error && (<p className="mt-1 text-light-error-main text-body2">
           This field is required