[FRNT-514 FRNT-512] Fix input focus

src/lib/box-styles.tsx

@@ -269,3 +269,10 @@ export const ColumnContent = styled.div`
 export const TableContent = styled.div`
   padding: 10px;
 `;
+
+export const Form = styled.form`
+  width: 100%;
+  & > div {
+    margin-bottom: 10px;
+  }
+`;

src/ui/atoms/input/index.tsx

@@ -5,6 +5,7 @@ import { Variant } from 'lib/types';
 import { InputContainer, InputElement } from '../../elements/quarks';
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  autoComplete?: 'on' | 'off';
   className?: string;
   disabled?: boolean;
   leftIcon?: React.ReactNode;
@@ -17,6 +18,7 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
 }
 
 const InputBase: React.FC<InputProps & Variant> = ({
+  autoComplete = 'off',
   className,
   disabled = false,
   leftIcon,
@@ -37,6 +39,7 @@ const InputBase: React.FC<InputProps & Variant> = ({
     variant={variant}
   >
     <InputElement
+      autoComplete={autoComplete}
       className={className}
       disabled={disabled}
       name={name}
@@ -49,11 +52,6 @@ const InputBase: React.FC<InputProps & Variant> = ({
 );
 
 export const Input = styled(InputBase)`
-  --local-vertical: calc(1px * var(--woly-component-level) * var(--woly-main-level));
-  --local-horizontal: calc(
-    var(--woly-const-m) + (1px * var(--woly-main-level)) + var(--local-vertical)
-  );
-
   box-sizing: border-box;
   width: 100%;