@onewelcome/react-lib-components 0.2.6 → 1.0.0

package/src/Form/Textarea/Textarea.module.scss

@@ -1,3 +1,19 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 @import "../../mixins.module.scss";
 
 .textarea-wrapper {

package/src/Form/Textarea/Textarea.test.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { useEffect, useRef } from "react";
 import { Textarea, Props } from "./Textarea";
 import { render } from "@testing-library/react";

package/src/Form/Textarea/Textarea.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { ComponentPropsWithRef, useState } from "react";
 import { Icon, Props as IconProps, Icons } from "../../Icon/Icon";
 import classes from "./Textarea.module.scss";

package/src/Form/Toggle/Toggle.module.scss

@@ -1,3 +1,19 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 $borderRadius: 2.5rem;
 
 .toggle-wrapper {
@@ -23,7 +39,7 @@ $borderRadius: 2.5rem;
     height: 1rem;
     border-radius: 50%;
     display: block;
-    background-color: #fff;
+    background-color: var(--light);
     position: absolute;
     top: 50%;
     transform: translateY(-50%) translateX(0);

package/src/Form/Toggle/Toggle.test.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { useRef, useEffect } from "react";
 import { Toggle, Props } from "./Toggle";
 import { render } from "@testing-library/react";

package/src/Form/Toggle/Toggle.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { ComponentPropsWithRef } from "react";
 import { Checkbox, Props as CheckboxProps } from "../Checkbox/Checkbox";
 import classes from "./Toggle.module.scss";

package/src/Form/Wrapper/CheckboxWrapper/CheckboxWrapper.module.scss

@@ -1,3 +1,19 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 .checkbox-wrapper-helper {
   margin-top: 1.25rem;
 }

package/src/Form/Wrapper/CheckboxWrapper/CheckboxWrapper.test.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { useEffect, useRef } from "react";
 import { CheckboxWrapper, Props } from "./CheckboxWrapper";
 import { Checkbox, Props as CheckboxProps } from "../../Checkbox/Checkbox";

package/src/Form/Wrapper/CheckboxWrapper/CheckboxWrapper.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { ComponentPropsWithRef, ReactElement, useEffect } from "react";
 import classes from "./CheckboxWrapper.module.scss";
 import { useWrapper } from "../../../hooks/useWrapper";

package/src/Form/Wrapper/InputWrapper/InputWrapper.module.scss

@@ -1,10 +1,26 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 @import "../../../mixins.module.scss";
 
-@include inputLabelPrimaryColorOnFocus("label.input-label");
+@include inputLabelPrimaryColorOnFocus("label.input-label.focus");
 
 input {
   &.floating-label {
-    padding-top: 0.625rem;
+    padding-top: 1rem;
   }
 }
 
@@ -12,23 +28,38 @@ input {
   margin-top: 0.25rem;
 }
 
-.input-wrapper [data-icon]:before {
-  transition: 0.2s ease-in-out;
-  transform: translateY(0px);
-  font-size: 1.125rem;
-}
+.input-wrapper {
+  [data-icon]:before {
+    transition: 0.2s ease-in-out;
+    transform: translateY(0px);
+    font-size: 1.125rem;
+  }
 
-.input-wrapper .floating-label-active [data-icon]:before {
-  transform: translateY(5px);
-}
+  .floating-label-active [data-icon]:before {
+    transform: translateY(5px);
+  }
+
+  [data-prefix],
+  [data-suffix] {
+    transform: translateY(-0.125rem);
+  }
+
+  [data-prefix] + input {
+    padding-left: 0.5rem;
+  }
 
-.input-wrapper [data-prefix],
-.input-wrapper [data-suffix] {
-  transform: translateY(-0.125rem);
+  input + [data-suffix] {
+    padding-left: 0.5rem;
+  }
+
+  .disabled {
+    background-color: var(--disabled);
+    cursor: not-allowed;
+  }
 }
 
 .floating-label-active [data-prefix],
 .floating-label-active [data-suffix] {
-  padding-top: 0.5rem;
+  padding-top: 1rem;
   transform: translateY(0);
 }

package/src/Form/Wrapper/InputWrapper/InputWrapper.test.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { useEffect, useRef } from "react";
 import { InputWrapper, Props } from "./InputWrapper";
 import { render } from "@testing-library/react";
@@ -58,6 +74,26 @@ describe("InputWrapper should render", () => {
 
     expect(input).toHaveAttribute("aria-describedby", helperId);
   });
+
+  it("disabled input", () => {
+    const { getByLabelText } = createInputWrapper(defaultParams => ({
+      ...defaultParams,
+      disabled: true
+    }));
+
+    const input = getByLabelText("Example label");
+
+    expect(input).toBeDisabled();
+  });
+
+  it("consume wrapper props classname", () => {
+    const { container } = createInputWrapper(defaultParams => ({
+      ...defaultParams,
+      inputProps: { wrapperProps: { className: "testClass" } }
+    }));
+
+    expect(container.querySelector(".testClass")).toBeDefined();
+  });
 });
 
 describe("ref should work", () => {

package/src/Form/Wrapper/InputWrapper/InputWrapper.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { ComponentPropsWithRef, useEffect, useRef, useState } from "react";
 import { Input, Type, Props as InputProps } from "../../Input/Input";
 import classes from "./InputWrapper.module.scss";
@@ -56,6 +72,7 @@ export const InputWrapper = React.forwardRef<HTMLDivElement, Props>(
       onChange,
       onBlur,
       onFocus,
+      disabled,
       ...rest
     }: Props,
     ref
@@ -72,15 +89,21 @@ export const InputWrapper = React.forwardRef<HTMLDivElement, Props>(
     const { prefix, suffix } = inputProps || {};
     const input = useRef<HTMLInputElement>(null);
     const hasValueOrActiveFloatingLabel = !!value || floatingLabelActive;
-    const labelClasses = [classes["input-label"]];
     const { labelOffset } = useLabelOffset(
       (inputProps && (inputProps.ref as React.RefObject<HTMLInputElement>)) || input,
       floatingLabelActive,
       prefix
     );
 
+    const labelClasses = [classes["input-label"]];
     hasFocus && labelClasses.push(classes["focus"]);
 
+    const inputWrapperClasses = [];
+    floatingLabelActive && inputWrapperClasses.push(classes["floating-label-active"]);
+    inputProps?.wrapperProps?.className &&
+      inputWrapperClasses.push(inputProps?.wrapperProps?.className);
+    disabled && inputWrapperClasses.push(classes["disabled"]);
+
     return (
       <Wrapper
         {...rest}
@@ -102,15 +125,14 @@ export const InputWrapper = React.forwardRef<HTMLDivElement, Props>(
           className: `${classes["input-wrapper-helper"]} ${helperProps?.className ?? ""} `
         }}
         helperIndent={20}
+        disabled={disabled}
       >
         <Input
           {...inputProps}
           prefix={hasValueOrActiveFloatingLabel ? prefix : ""}
           suffix={hasValueOrActiveFloatingLabel ? suffix : ""}
           wrapperProps={{
-            className: `${floatingLabelActive ? classes["floating-label-active"] : ""} ${
-              inputProps?.wrapperProps?.className ?? ""
-            }`
+            className: inputWrapperClasses.join(" ")
           }}
           ref={(inputProps && inputProps.ref) || input}
           aria-labelledby={labelId}

package/src/Form/Wrapper/RadioWrapper/RadioWrapper.module.scss

@@ -1,3 +1,19 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 .radio-wrapper-helper {
   margin-top: 1.25rem;
 }

package/src/Form/Wrapper/RadioWrapper/RadioWrapper.test.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React from "react";
 import { RadioWrapper, Props } from "./RadioWrapper";
 import { Radio } from "../../Radio/Radio";

package/src/Form/Wrapper/RadioWrapper/RadioWrapper.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { ComponentPropsWithRef, ReactElement, useEffect } from "react";
 import classes from "./RadioWrapper.module.scss";
 import { Wrapper, WrapperProps } from "../Wrapper/Wrapper";

package/src/Form/Wrapper/SelectWrapper/SelectWrapper.module.scss

@@ -1,3 +1,19 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 .select-label {
   left: calc(
     1.25rem + 2px

package/src/Form/Wrapper/SelectWrapper/SelectWrapper.test.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { useEffect, useRef } from "react";
 import { SelectWrapper, Props } from "./SelectWrapper";
 import { render } from "@testing-library/react";
@@ -5,7 +21,6 @@ import { Option } from "../../Select/Option";
 import userEvent from "@testing-library/user-event";
 
 const onChangeHandler = jest.fn();
-const onClearHandler = jest.fn();
 
 const defaultParams: Props = {
   children: [
@@ -29,8 +44,7 @@ const defaultParams: Props = {
   errorMessage: "errormessage",
   error: false,
   value: "option1",
-  onChange: onChangeHandler,
-  onClear: onClearHandler
+  onChange: onChangeHandler
 };
 
 const createSelectWrapper = (params?: (defaultParams: Props) => Props) => {
@@ -168,20 +182,4 @@ describe("SelectWrapper & Select have the right attributes", () => {
 
     expect(onChangeHandler).toHaveBeenCalled();
   });
-
-  it("Fires the onClear event", async () => {
-    const { select, findByText } = createSelectWrapper();
-
-    userEvent.click(select as Element);
-
-    const option3 = await findByText("Option 3");
-
-    userEvent.click(option3 as Element);
-
-    const clearButton = select!.querySelector("[data-clear]")!;
-
-    userEvent.click(clearButton);
-
-    expect(onClearHandler).toHaveBeenCalled();
-  });
 });

package/src/Form/Wrapper/SelectWrapper/SelectWrapper.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 import React, { ComponentPropsWithRef, ReactChild, ReactElement } from "react";
 import classes from "./SelectWrapper.module.scss";
 import { Wrapper, WrapperProps } from "../Wrapper/Wrapper";
@@ -15,22 +31,11 @@ export interface Props
   error?: boolean;
   selectProps?: PartialSelectProps;
   onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
-  onClear?: (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
 }
 
 export const SelectWrapper = React.forwardRef<HTMLDivElement, Props>(
   (
-    {
-      children,
-      error,
-      value,
-      placeholder,
-      selectProps,
-      helperProps,
-      onChange,
-      onClear,
-      ...rest
-    }: Props,
+    { children, error, value, placeholder, selectProps, helperProps, onChange, ...rest }: Props,
     ref
   ) => {
     const { errorId, floatingLabelActive, helperId, labelId } = useWrapper(value, placeholder);
@@ -56,9 +61,6 @@ export const SelectWrapper = React.forwardRef<HTMLDivElement, Props>(
           error={error}
           describedBy={error ? errorId : helperId}
           onChange={onChange}
-          onClear={e => {
-            onClear && onClear(e);
-          }}
           placeholder={placeholder}
           className={`${floatingLabelActive ? classes["floating-label-active"] : ""} ${
             selectProps?.className ?? ""

package/src/Form/Wrapper/TextareaWrapper/TextareaWrapper.module.scss

@@ -1,7 +1,48 @@
+/*!
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
 @import "../../../mixins.module.scss";
 
 @include inputLabelPrimaryColorOnFocus("label.textarea-label");
 
+.textarea-wrapper {
+  &:after {
+    content: "";
+    transition: all 0.15s ease-in-out;
+    display: block;
+    width: calc(95%);
+    height: 1.625rem;
+    background-color: var(--light);
+    position: absolute;
+    z-index: 0;
+    left: 1px;
+    top: 1px;
+    border-radius: var(--input-border-radius) var(--input-border-radius) 0 0;
+  }
+
+  &.disabled:after {
+    background-color: var(--disabled);
+  }
+
+  &.focus:after {
+    left: 2px;
+    top: 2px;
+  }
+}
+
 .textarea {
   padding-top: 1.625rem;
 
@@ -9,10 +50,6 @@
     border-color: var(--color-primary);
   }
 
-  &:hover:not(:disabled):not(.error) {
-    border-color: var(--default);
-  }
-
   &:focus:not(:disabled) {
     outline: none;
   }
@@ -23,35 +60,6 @@
   margin-left: 1.25rem;
 }
 
-.textarea-wrapper {
-  padding-top: 1.75rem;
-  padding-right: 3.75rem;
-  padding-bottom: 0.75rem;
-  border-color: var(--input-border-color);
-  border-style: var(--input-border-style);
-  border-width: var(--input-border-width);
-  border-radius: var(--input-border-radius);
-
-  &.error {
-    border-color: var(--error);
-  }
-
-  &.hover {
-    border-color: var(--default);
-  }
-
-  &.focus {
-    border-color: var(--color-primary);
-  }
-
-  &.disabled {
-    color: var(--greyed-out);
-    background-color: var(--disabled);
-    border-color: #fff;
-    cursor: not-allowed;
-  }
-}
-
 .error-icon {
   top: 1.75rem;
 }