♻️(react) make Input use LabelledBox

Let's use the power of reusability!

packages/react/src/components/Forms/Input/index.scss

@@ -1,5 +1,4 @@
 .c__input__wrapper {
-
   border-radius: var(--c--components--forms-input--border-radius);
   border-width: var(--c--components--forms-input--border-width);
   border-color: var(--c--components--forms-input--border-color);
@@ -19,18 +18,10 @@
     font-weight: var(--c--components--forms-input--font-weight);
   }
 
-  .c__input__inner {
-    position: relative;
-    flex-grow: 1;
-    display: flex;
-    height: 100%;
-
   .c__input {
-
     box-sizing: border-box;
     outline: 0;
     border: none;
-      padding: 1rem 0 0 0;
     color: var(--c--theme--colors--greyscale-800);
     flex-grow: 1;
     text-overflow: ellipsis;
@@ -59,7 +50,6 @@
       top: 18px;
     }
   }
-  }
 
   &:hover {
     border-radius: var(--c--components--forms-input--border-radius--hover);

packages/react/src/components/Forms/Input/index.tsx

@@ -10,6 +10,7 @@ import React, {
 import classNames from "classnames";
 import { randomString } from ":/utils";
 import { Field, FieldProps } from ":/components/Forms/Field";
+import { LabelledBox } from ":/components/Forms/LabelledBox";
 
 export interface InputRefType {
   input: HTMLInputElement | null;
@@ -106,7 +107,11 @@ export const Input = forwardRef<InputRefType, Props>(
           }}
         >
           {!!icon && icon}
-          <div className="c__input__inner">
+          <LabelledBox
+            label={label}
+            htmlFor={idToUse.current}
+            labelAsPlaceholder={labelAsPlaceholder}
+          >
             <input
               type="text"
               className={classes.join(" ")}
@@ -127,15 +132,7 @@ export const Input = forwardRef<InputRefType, Props>(
               }}
               ref={inputRef}
             />
-            {label && (
+          </LabelledBox>
-              <label
-                className={labelAsPlaceholder ? "placeholder" : ""}
-                htmlFor={idToUse.current}
-              >
-                {label}
-              </label>
-            )}
-          </div>
           {!!rightIcon && rightIcon}
         </div>
       </Field>