react-vite-themes/dist/pages/Documentation/InputDocumentation.js

A test/experimental React theme system created for learning purposes. Features atomic design components, SCSS variables, and dark/light theme support. Not intended for production use.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState } from 'react';
import { Input } from '../../components/atoms/Input';
import { Card } from '../../components/atoms/Card';
import { CodeBlock } from '../../components/atoms/CodeBlock';
import { Typography } from '../../components/atoms/Typography';
export const InputDocumentation = () => {
    const [inputValue, setInputValue] = useState('');
    const [emailValue, setEmailValue] = useState('');
    const [passwordValue, setPasswordValue] = useState('');
    const [textareaValue, setTextareaValue] = useState('');
    const [dateValue, setDateValue] = useState('');
    return (_jsx("div", { className: "bg-background text-text-primary min-h-screen p-8", children: _jsxs("div", { className: "max-w-6xl mx-auto", children: [_jsxs("div", { className: "mb-12", children: [_jsx(Typography, { variant: "h1", size: "xl", weight: "bold", className: "mb-4", children: "Input Component" }), _jsx(Typography, { variant: "p", size: "lg", className: "text-text-secondary max-w-4xl", children: "A flexible and powerful input component with multiple variants, sizes, states, and features. Supports icons, validation states, helper text, and various input types." })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "mb-12 p-6", children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "Import" }), _jsx(CodeBlock, { code: "import { Input } from '../../components/atoms/Input';", language: "typescript" })] }), _jsxs("section", { className: "mb-12", children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "Basic Usage" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "mb-6 p-6", children: [_jsxs("div", { className: "flex flex-wrap gap-4 items-center mb-4", children: [_jsx(Input, { placeholder: "Enter your name" }), _jsx(Input, { type: "email", placeholder: "Enter your email" }), _jsx(Input, { type: "password", placeholder: "Enter your password" })] }), _jsx(CodeBlock, { code: `<Input placeholder="Enter your name" />
<Input type="email" placeholder="Enter your email" />
<Input type="password" placeholder="Enter your password" />`, language: "tsx" })] })] }), _jsxs("section", { className: "mb-12", children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "Sizes" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "mb-6 p-6", children: [_jsxs("div", { className: "flex flex-wrap gap-4 items-center mb-4", children: [_jsx(Input, { placeholder: "Small input", size: "sm" }), _jsx(Input, { placeholder: "Medium input (default)", size: "md" }), _jsx(Input, { placeholder: "Large input", size: "lg" })] }), _jsx(CodeBlock, { code: `<Input placeholder="Small input" size="sm" />
<Input placeholder="Medium input (default)" size="md" />
<Input placeholder="Large input" size="lg" />`, language: "tsx" })] })] }), _jsxs("section", { className: "mb-12", children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "Icons" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "mb-6 p-6", children: [_jsxs("div", { className: "flex flex-wrap gap-4 items-center mb-4", children: [_jsx(Input, { placeholder: "Search...", leftIcon: "search", leftIconSize: "sm" }), _jsx(Input, { type: "email", placeholder: "Enter email", leftIcon: "mail", leftIconSize: "sm", rightIcon: "check", rightIconSize: "sm" }), _jsx(Input, { type: "password", placeholder: "Enter password", leftIcon: "lock", leftIconSize: "sm", showPasswordToggle: true })] }), _jsx(CodeBlock, { code: `<Input 
  placeholder="Search..."
  leftIcon="search"
  leftIconSize="sm"
/>

<Input 
  type="email"
  placeholder="Enter email"
  leftIcon="mail"
  leftIconSize="sm"
  rightIcon="check"
  rightIconSize="sm"
/>

<Input 
  type="password"
  placeholder="Enter password"
  leftIcon="lock"
  leftIconSize="sm"
  showPasswordToggle={true}
/>`, language: "tsx" })] })] }), _jsxs("section", { className: "mb-12", children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "Validation States" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "mb-6 p-6", children: [_jsxs("div", { className: "flex flex-wrap gap-4 items-center mb-4", children: [_jsx(Input, { placeholder: "Valid input", value: inputValue, onChange: (event) => setInputValue(event.target.value) }), _jsx(Input, { placeholder: "Invalid input", isInvalid: true, errorMessage: "This field is required" }), _jsx(Input, { placeholder: "Disabled input", disabled: true })] }), _jsx(CodeBlock, { code: `<Input placeholder="Valid input" />
<Input 
  placeholder="Invalid input"
  isInvalid={true}
  errorMessage="This field is required"
/>
<Input placeholder="Disabled input" disabled />`, language: "tsx" })] })] }), _jsxs("section", { className: "mb-12", children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "Controlled Inputs" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "mb-6 p-6", children: [_jsxs("div", { className: "mb-4", children: [_jsx(Input, { placeholder: "Controlled input", value: inputValue, onChange: (event) => setInputValue(event.target.value) }), _jsxs(Typography, { variant: "p", size: "sm", className: "mt-2 text-text-secondary", children: ["Value: ", inputValue || '(empty)'] })] }), _jsx(CodeBlock, { code: `const [value, setValue] = useState('');

<Input 
  placeholder="Controlled input"
  value={value}
  onChange={(event) => setValue(event.target.value)}
/>`, language: "tsx" })] })] }), _jsxs("section", { className: "mb-12", children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "Textarea" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "mb-6 p-6", children: [_jsx("div", { className: "mb-4", children: _jsx(Input, { as: "textarea", placeholder: "Enter your message...", value: textareaValue, onChange: (event) => setTextareaValue(event.target.value) }) }), _jsx(CodeBlock, { code: `<Input 
  as="textarea"
  placeholder="Enter your message..."
  value={textareaValue}
  onChange={(event) => setTextareaValue(event.target.value)}
/>`, language: "tsx" })] })] }), _jsxs("section", { className: "mb-12", children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "Date Input" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "mb-6 p-6", children: [_jsxs("div", { className: "flex flex-wrap gap-4 items-center mb-4", children: [_jsx(Input, { type: "date", placeholder: "Select a date", value: dateValue, onChange: (event) => setDateValue(event.target.value) }), _jsx(Input, { type: "date", placeholder: "Birth date", leftIcon: "user", leftIconSize: "sm" }), _jsx(Input, { type: "date", placeholder: "Event date", minDate: "2024-01-01", maxDate: "2024-12-31" })] }), _jsx(CodeBlock, { code: `<Input type="date" placeholder="Select a date" />
<Input 
  type="date"
  placeholder="Birth date"
  leftIcon="user"
  leftIconSize="sm"
/>
<Input 
  type="date"
  placeholder="Event date"
  minDate="2024-01-01"
  maxDate="2024-12-31"
/>`, language: "tsx" })] })] }), _jsxs("section", { className: "mb-12", children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "File Input" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "mb-6 p-6", children: [_jsxs("div", { className: "flex flex-wrap gap-4 items-center mb-4", children: [_jsx(Input, { type: "file", accept: ".pdf,.doc,.docx" }), _jsx(Input, { type: "file", accept: "image/*", multiple: true })] }), _jsx(CodeBlock, { code: `<Input 
  type="file"
  accept=".pdf,.doc,.docx"
/>
<Input 
  type="file"
  accept="image/*"
  multiple
/>`, language: "tsx" })] })] }), _jsxs("section", { className: "mb-12", children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "Rounded Inputs" }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "mb-6 p-6", children: [_jsxs("div", { className: "flex flex-wrap gap-4 items-center mb-4", children: [_jsx(Input, { placeholder: "Rounded input", isRounded: true }), _jsx(Input, { placeholder: "Rounded with icon", leftIcon: "search", leftIconSize: "sm", isRounded: true })] }), _jsx(CodeBlock, { code: `<Input placeholder="Rounded input" isRounded />
<Input 
  placeholder="Rounded with icon"
  leftIcon="search"
  leftIconSize="sm"
  isRounded
/>`, language: "tsx" })] })] }), _jsxs("section", { className: "mb-12", children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "Form Examples" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs(Card, { variant: "neutral", style: "elevated", className: "p-6", children: [_jsx(Typography, { variant: "h3", size: "md", weight: "semibold", className: "mb-4", children: "Contact Form" }), _jsxs("form", { className: "flex flex-col gap-4", children: [_jsxs("div", { children: [_jsx(Typography, { variant: "label", size: "sm", weight: "medium", className: "mb-2 block", children: "Name" }), _jsx(Input, { placeholder: "Enter your full name", leftIcon: "user", leftIconSize: "sm" })] }), _jsxs("div", { children: [_jsx(Typography, { variant: "label", size: "sm", weight: "medium", className: "mb-2 block", children: "Email" }), _jsx(Input, { type: "email", placeholder: "Enter your email", leftIcon: "mail", leftIconSize: "sm", value: emailValue, onChange: (event) => setEmailValue(event.target.value) })] }), _jsxs("div", { children: [_jsx(Typography, { variant: "label", size: "sm", weight: "medium", className: "mb-2 block", children: "Message" }), _jsx(Input, { as: "textarea", placeholder: "Enter your message...", value: textareaValue, onChange: (event) => setTextareaValue(event.target.value) })] })] })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "p-6", children: [_jsx(Typography, { variant: "h3", size: "md", weight: "semibold", className: "mb-4", children: "Login Form" }), _jsxs("form", { className: "flex flex-col gap-4", children: [_jsxs("div", { children: [_jsx(Typography, { variant: "label", size: "sm", weight: "medium", className: "mb-2 block", children: "Email" }), _jsx(Input, { type: "email", placeholder: "Enter your email", leftIcon: "mail", leftIconSize: "sm", value: emailValue, onChange: (event) => setEmailValue(event.target.value) })] }), _jsxs("div", { children: [_jsx(Typography, { variant: "label", size: "sm", weight: "medium", className: "mb-2 block", children: "Password" }), _jsx(Input, { type: "password", placeholder: "Enter your password", leftIcon: "lock", leftIconSize: "sm", showPasswordToggle: true, value: passwordValue, onChange: (event) => setPasswordValue(event.target.value) })] })] })] })] })] }), _jsxs("section", { className: "mb-12", children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "Props" }), _jsx(Card, { variant: "neutral", style: "elevated", className: "mb-6 p-6", children: _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full border-collapse text-sm", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: "p-2 text-left border-b border-border font-semibold text-text-primary", children: "Prop" }), _jsx("th", { className: "p-2 text-left border-b border-border font-semibold text-text-primary", children: "Type" }), _jsx("th", { className: "p-2 text-left border-b border-border font-semibold text-text-primary", children: "Default" }), _jsx("th", { className: "p-2 text-left border-b border-border font-semibold text-text-primary", children: "Description" })] }) }), _jsxs("tbody", { children: [_jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "as" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-primary-300", children: "'input' | 'textarea'" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-secondary", children: "'input'" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary", children: "Render as 'input' or 'textarea'" })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "size" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-primary-300", children: "'sm' | 'md' | 'lg'" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-secondary", children: "'md'" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary", children: "Input size" })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "leftIcon" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-primary-300", children: "ReactNode | IconName" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-secondary", children: "undefined" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary", children: "Icon to display on the left" })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "leftIconSize" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-primary-300", children: "'sm' | 'md' | 'lg'" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-secondary", children: "'sm'" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary", children: "Size of the left icon" })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "rightIcon" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-primary-300", children: "ReactNode | IconName" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-secondary", children: "undefined" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary", children: "Icon to display on the right" })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "rightIconSize" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-primary-300", children: "'sm' | 'md' | 'lg'" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-secondary", children: "'sm'" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary", children: "Size of the right icon" })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "isRounded" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-primary-300", children: "boolean" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-secondary", children: "false" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary", children: "Apply rounded corners" })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "showDateIcon" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-primary-300", children: "boolean" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-secondary", children: "true" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary", children: "Show calendar icon for date inputs" })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "minDate" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-primary-300", children: "string" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-secondary", children: "undefined" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary", children: "Minimum allowed date" })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "maxDate" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-primary-300", children: "string" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-secondary", children: "undefined" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary", children: "Maximum allowed date" })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "isInvalid" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-primary-300", children: "boolean" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-secondary", children: "false" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary", children: "Show invalid state" })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "errorMessage" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-primary-300", children: "string" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-secondary", children: "undefined" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary", children: "Error message to display" })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "showPasswordToggle" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-primary-300", children: "boolean" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-secondary", children: "false" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary", children: "Enable password visibility toggle" })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "className" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-primary-300", children: "string" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-secondary", children: "undefined" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary", children: "Additional CSS classes" })] }), _jsxs("tr", { children: [_jsx("td", { className: "p-2 border-b border-border font-medium text-text-primary font-mono", children: "...props" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-primary-300", children: "HTMLInputProps | HTMLTextareaProps" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary font-mono text-secondary", children: "-" }), _jsx("td", { className: "p-2 border-b border-border text-text-secondary", children: "All standard HTML input/textarea props" })] })] })] }) }) })] }), _jsxs("section", { className: "mb-12", children: [_jsx(Typography, { variant: "h2", size: "lg", weight: "semibold", className: "mb-4", children: "Best Practices" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [_jsxs(Card, { variant: "neutral", style: "elevated", className: "p-6", children: [_jsx(Typography, { variant: "h3", size: "md", weight: "semibold", className: "mb-4", children: "\u2705 Do" }), _jsxs("ul", { className: "list-none p-0 m-0", children: [_jsx("li", { className: "py-1 text-text-secondary relative pl-4 before:content-[''] before:absolute before:left-0 before:top-1/2 before:transform before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-primary", children: "Use appropriate input types (email, password, etc.)" }), _jsx("li", { className: "py-1 text-text-secondary relative pl-4 before:content-[''] before:absolute before:left-0 before:top-1/2 before:transform before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-primary", children: "Provide clear placeholder text" }), _jsx("li", { className: "py-1 text-text-secondary relative pl-4 before:content-[''] before:absolute before:left-0 before:top-1/2 before:transform before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-primary", children: "Use icons to enhance visual clarity" }), _jsx("li", { className: "py-1 text-text-secondary relative pl-4 before:content-[''] before:absolute before:left-0 before:top-1/2 before:transform before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-primary", children: "Show validation states clearly" }), _jsx("li", { className: "py-1 text-text-secondary relative pl-4 before:content-[''] before:absolute before:left-0 before:top-1/2 before:transform before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-primary", children: "Use helper text for complex inputs" }), _jsx("li", { className: "py-1 text-text-secondary relative pl-4 before:content-[''] before:absolute before:left-0 before:top-1/2 before:transform before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-primary", children: "Make inputs accessible with proper labels" }), _jsx("li", { className: "py-1 text-text-secondary relative pl-4 before:content-[''] before:absolute before:left-0 before:top-1/2 before:transform before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-primary", children: "Use controlled inputs for form state management" })] })] }), _jsxs(Card, { variant: "neutral", style: "elevated", className: "p-6", children: [_jsx(Typography, { variant: "h3", size: "md", weight: "semibold", className: "mb-4", children: "\u274C Don't" }), _jsxs("ul", { className: "list-none p-0 m-0", children: [_jsx("li", { className: "py-1 text-text-secondary relative pl-4 before:content-[''] before:absolute before:left-0 before:top-1/2 before:transform before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-error", children: "Don't use vague placeholder text" }), _jsx("li", { className: "py-1 text-text-secondary relative pl-4 before:content-[''] before:absolute before:left-0 before:top-1/2 before:transform before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-error", children: "Don't use too many icons in one input" }), _jsx("li", { className: "py-1 text-text-secondary relative pl-4 before:content-[''] before:absolute before:left-0 before:top-1/2 before:transform before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-error", children: "Don't use rounded inputs for formal applications" }), _jsx("li", { className: "py-1 text-text-secondary relative pl-4 before:content-[''] before:absolute before:left-0 before:top-1/2 before:transform before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-error", children: "Don't disable inputs without clear indication why" }), _jsx("li", { className: "py-1 text-text-secondary relative pl-4 before:content-[''] before:absolute before:left-0 before:top-1/2 before:transform before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-error", children: "Don't use validation states without proper feedback" }), _jsx("li", { className: "py-1 text-text-secondary relative pl-4 before:content-[''] before:absolute before:left-0 before:top-1/2 before:transform before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-error", children: "Don't use inputs without proper labels" }), _jsx("li", { className: "py-1 text-text-secondary relative pl-4 before:content-[''] before:absolute before:left-0 before:top-1/2 before:transform before:-translate-y-1/2 before:w-1.5 before:h-1.5 before:rounded-full before:bg-error", children: "Don't use uncontrolled inputs for important forms" })] })] })] })] })] }) }));
};