♻️(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,45 +18,36 @@
     font-weight: var(--c--components--forms-input--font-weight);
   }
 
-  .c__input__inner {
+  .c__input {
-    position: relative;
+    box-sizing: border-box;
+    outline: 0;
+    border: none;
+    color: var(--c--theme--colors--greyscale-800);
     flex-grow: 1;
-    display: flex;
+    text-overflow: ellipsis;
-    height: 100%;
+    background-color: transparent;
+    @extend %text-style;
 
-    .c__input {
+    &--medium {
-
+      min-width: 150px;
-      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;
-      background-color: transparent;
-      @extend %text-style;
-
-      &--medium {
-        min-width: 150px;
-      }
-
-      &--nano {
-        min-width: 10px;
-      }
     }
 
-    label {
+    &--nano {
-      position: absolute;
+      min-width: 10px;
-      font-size: var(--c--theme--font--sizes--s);
+    }
-      left: 0;
+  }
-      top: 0.75rem;
-      transition: all var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
-      color: var(--c--theme--colors--greyscale-600);
 
-      &.placeholder {
+  label {
-        @extend %text-style;
+    position: absolute;
-        top: 18px;
+    font-size: var(--c--theme--font--sizes--s);
-      }
+    left: 0;
+    top: 0.75rem;
+    transition: all var(--c--theme--transitions--duration) var(--c--theme--transitions--ease-out);
+    color: var(--c--theme--colors--greyscale-600);
+
+    &.placeholder {
+      @extend %text-style;
+      top: 18px;
     }
   }
 

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>