@bosonprotocol/react-kit 0.31.1 → 0.32.0-alpha.1

package/dist/cjs/lib/uniswap/validateTokenList.js

@@ -31,13 +31,12 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.validateTokenList = void 0;
-const validateTokenList_1 = __importDefault(require("./__generated__/validateTokenList"));
-const validateTokens_1 = __importDefault(require("./__generated__/validateTokens"));
+// import validateTokens from "./__generated__/validateTokens";
+const importValidateTokens = Promise.resolve().then(() => __importStar(require("./__generated__/validateTokens")));
+// import validatorImportList from "./__generated__/validateTokenList";
+const importValidatorImportList = Promise.resolve().then(() => __importStar(require("./__generated__/validateTokenList")));
 var ValidationSchema;
 (function (ValidationSchema) {
     ValidationSchema["LIST"] = "list";
@@ -58,13 +57,15 @@ function validate(schema, data) {
                 // validatorImport = await import(
                 //   "lib/uniswap/__generated__/validateTokenList"
                 // );
-                validatorImport = validateTokenList_1.default;
+                // validatorImport = validatorImportList;
+                validatorImport = yield importValidatorImportList;
                 break;
             case ValidationSchema.TOKENS:
                 // validatorImport = await import(
                 //   "lib/uniswap/__generated__/validateTokens"
                 // );
-                validatorImport = validateTokens_1.default;
+                // validatorImport = validateTokens;
+                validatorImport = yield importValidateTokens;
                 break;
             default:
                 throw new Error("No validation function specified for token list schema");
@@ -72,8 +73,8 @@ function validate(schema, data) {
         const [, /*validatorModule*/] = yield Promise.all([
             Promise.resolve().then(() => __importStar(require("ajv")))
         ]);
-        // const validator = validatorModule.default as ValidateFunction;
-        const validator = validatorImport;
+        const validator = validatorImport.default;
+        // const validator = validatorImport as ValidateFunction;
         if (validator === null || validator === void 0 ? void 0 : validator(data)) {
             return data;
         }

package/dist/cjs/lib/uniswap/validateTokenList.js.map

@@ -1 +1 @@
-{"version":3,"file":"validateTokenList.js","sourceRoot":"","sources":["../../../../src/lib/uniswap/validateTokenList.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,0FAAoE;AACpE,oFAA4D;AAE5D,IAAK,gBAGJ;AAHD,WAAK,gBAAgB;IACnB,iCAAa,CAAA;IACb,qCAAiB,CAAA;AACnB,CAAC,EAHI,gBAAgB,KAAhB,gBAAgB,QAGpB;AAED,SAAS,mBAAmB,CAAC,QAAsC;;IACjE,OAAO,CACL,MAAA,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,MAAM,0CACZ,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;IACd,6DAA6D;IAC7D,aAAa;IACb,CAAC,KAAK,CAAC,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAE9D,IAAI,CAAC,IAAI,CAAC,mCAAI,eAAe,CACjC,CAAC;AACJ,CAAC;AAED,SAAe,QAAQ,CACrB,MAAwB,EACxB,IAAa;;QAEb,IAAI,eAAe,CAAC;QACpB,QAAQ,MAAM,EAAE;YACd,KAAK,gBAAgB,CAAC,IAAI;gBACxB,kCAAkC;gBAClC,kDAAkD;gBAClD,KAAK;gBACL,eAAe,GAAG,2BAAmB,CAAC;gBACtC,MAAM;YACR,KAAK,gBAAgB,CAAC,MAAM;gBAC1B,kCAAkC;gBAClC,+CAA+C;gBAC/C,KAAK;gBACL,eAAe,GAAG,wBAAc,CAAC;gBACjC,MAAM;YACR;gBACE,MAAM,IAAI,KAAK,CAAC,wDAAwD,CAAC,CAAC;SAC7E;QACD,MAAM,CAAC,EAAC,mBAAmB,CAAC,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC;8DACxC,KAAK;SAEb,CAAC,CAAC;QACH,iEAAiE;QACjE,MAAM,SAAS,GAAG,eAAmC,CAAC;QACtD,IAAI,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,IAAI,CAAC,EAAE;YACrB,OAAO,IAAI,CAAC;SACb;QACD,MAAM,IAAI,KAAK,CAAC,mBAAmB,CAAC,SAAS,CAAC,CAAC,CAAC;IAClD,CAAC;CAAA;AAED;;;GAGG;AACH,SAAsB,iBAAiB,CAAC,IAAe;;QACrD,IAAI;YACF,MAAM,QAAQ,CAAC,gBAAgB,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;YAC5C,OAAO,IAAI,CAAC;SACb;QAAC,OAAO,KAAK,EAAE;YACd,MAAM,IAAI,KAAK,CACb,iCAAkC,KAAe,CAAC,OAAO,EAAE,CAC5D,CAAC;SACH;IACH,CAAC;CAAA;AATD,8CASC"}
+{"version":3,"file":"validateTokenList.js","sourceRoot":"","sources":["../../../../src/lib/uniswap/validateTokenList.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,+DAA+D;AAC/D,MAAM,oBAAoB,qDAAU,gCAAgC,GAAC,CAAC;AACtE,uEAAuE;AACvE,MAAM,yBAAyB,qDAAU,mCAAmC,GAAC,CAAC;AAE9E,IAAK,gBAGJ;AAHD,WAAK,gBAAgB;IACnB,iCAAa,CAAA;IACb,qCAAiB,CAAA;AACnB,CAAC,EAHI,gBAAgB,KAAhB,gBAAgB,QAGpB;AAED,SAAS,mBAAmB,CAAC,QAAsC;;IACjE,OAAO,CACL,MAAA,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,MAAM,0CACZ,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;IACd,6DAA6D;IAC7D,aAAa;IACb,CAAC,KAAK,CAAC,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EAE9D,IAAI,CAAC,IAAI,CAAC,mCAAI,eAAe,CACjC,CAAC;AACJ,CAAC;AAED,SAAe,QAAQ,CACrB,MAAwB,EACxB,IAAa;;QAEb,IAAI,eAAe,CAAC;QACpB,QAAQ,MAAM,EAAE;YACd,KAAK,gBAAgB,CAAC,IAAI;gBACxB,kCAAkC;gBAClC,kDAAkD;gBAClD,KAAK;gBACL,yCAAyC;gBACzC,eAAe,GAAG,MAAM,yBAAyB,CAAC;gBAClD,MAAM;YACR,KAAK,gBAAgB,CAAC,MAAM;gBAC1B,kCAAkC;gBAClC,+CAA+C;gBAC/C,KAAK;gBACL,oCAAoC;gBACpC,eAAe,GAAG,MAAM,oBAAoB,CAAC;gBAC7C,MAAM;YACR;gBACE,MAAM,IAAI,KAAK,CAAC,wDAAwD,CAAC,CAAC;SAC7E;QACD,MAAM,CAAC,EAAC,mBAAmB,CAAC,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC;8DACxC,KAAK;SAEb,CAAC,CAAC;QACH,MAAM,SAAS,GAAG,eAAe,CAAC,OAA2B,CAAC;QAC9D,yDAAyD;QACzD,IAAI,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,IAAI,CAAC,EAAE;YACrB,OAAO,IAAI,CAAC;SACb;QACD,MAAM,IAAI,KAAK,CAAC,mBAAmB,CAAC,SAAS,CAAC,CAAC,CAAC;IAClD,CAAC;CAAA;AAED;;;GAGG;AACH,SAAsB,iBAAiB,CAAC,IAAe;;QACrD,IAAI;YACF,MAAM,QAAQ,CAAC,gBAAgB,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;YAC5C,OAAO,IAAI,CAAC;SACb;QAAC,OAAO,KAAK,EAAE;YACd,MAAM,IAAI,KAAK,CACb,iCAAkC,KAAe,CAAC,OAAO,EAAE,CAC5D,CAAC;SACH;IACH,CAAC;CAAA;AATD,8CASC"}

package/dist/esm/components/buttons/BaseButton.d.ts

@@ -0,0 +1,27 @@
+import React, { ButtonHTMLAttributes, ReactNode } from "react";
+import { DefaultTheme } from "styled-components";
+import { ButtonSize } from "../ui/buttonSize";
+type Theme = DefaultTheme;
+type ButtonSizeProp = "small" | "regular" | "large" | ButtonSize;
+export type BaseButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    children?: React.ReactNode;
+    onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+    size?: ButtonSizeProp;
+    theme: Theme;
+    fill?: boolean;
+    step?: number;
+    isLoading?: boolean;
+    tooltip?: string;
+};
+export declare const BaseButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    children?: React.ReactNode;
+    onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+    size?: ButtonSizeProp | undefined;
+    theme: Theme;
+    fill?: boolean | undefined;
+    step?: number | undefined;
+    isLoading?: boolean | undefined;
+    tooltip?: string | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=BaseButton.d.ts.map

package/dist/esm/components/buttons/BaseButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../src/components/buttons/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,oBAAoB,EAEpB,SAAS,EAEV,MAAM,OAAO,CAAC;AACf,OAAe,EAAO,YAAY,EAAiB,MAAM,mBAAmB,CAAC;AAQ7E,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AA6F9C,KAAK,KAAK,GAAG,YAAY,CAAC;AAC1B,KAAK,cAAc,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,CAAC;AAEjE,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IACtE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS,CAAC;IACjE,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,UAAU;eAVV,eAAe;cAChB,MAAM,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS;;WAEzD,KAAK;;;;;2CAkEb,CAAC"}

package/dist/esm/components/buttons/BaseButton.js

@@ -0,0 +1,107 @@
+import React, { forwardRef, useCallback } from "react";
+import styled, { css, ThemeProvider } from "styled-components";
+import { zIndex } from "../ui/zIndex";
+import { Tooltip } from "../tooltip/Tooltip";
+import * as Styles from "../ui/styles";
+import { Typography } from "../ui/Typography";
+import { theme } from "../../theme";
+import { Loading } from "../Loading";
+const colors = theme.colors.light;
+const ButtonWithThemeProps = styled.button `
+  ${() => Styles.button};
+  ${(props) => Styles[props.size]}
+  border-style: solid;
+  border-color: ${(props) => props.theme?.borderColor || "transparent"};
+  border-width: ${(props) => props.theme?.borderWidth || 0}px;
+  border-radius: ${(props) => props.theme?.borderRadius || 0}px;
+  color: ${(props) => props.theme?.color || "#000000"};
+  background-color: ${(props) => props.theme?.background || "transparent"};
+  svg {
+    stroke: ${(props) => props.theme?.color || "#000000"};
+  }
+  ${(props) => props.fill
+    ? css `
+          width: 100%;
+        `
+    : ""};
+  ${(props) => props.theme?.hover &&
+    css `
+      &:hover:not(:disabled) {
+        background-color: ${props.theme?.hover.background};
+        ${props.theme?.hover.color &&
+        css `
+          color: ${props.theme.hover.color} !important;
+          svg {
+            fill: ${props.theme.hover.color} !important;
+            line {
+              stroke: ${props.theme.hover.color} !important;
+            }
+            polyline {
+              stroke: ${props.theme.hover.color} !important;
+            }
+            path {
+              stroke: ${props.theme.hover.color} !important;
+            }
+          }
+        `};
+        ${props.theme?.hover.borderColor &&
+        css `
+          border-color: ${props.theme.hover.borderColor};
+        `};
+      }
+    `}
+  ${(props) => props.theme?.padding
+    ? css `
+          padding: ${props.theme.padding} !important;
+        `
+    : ""}
+
+  ${(props) => props.theme?.disabled
+    ? css `
+          &:disabled {
+            background-color: ${props.theme.disabled?.background ||
+        "transparent"};
+            color: ${props.theme.disabled?.color || colors.darkGrey};
+            border-color: transparent;
+            cursor: not-allowed;
+            opacity: 0.5;
+          }
+        `
+    : css `
+          &:disabled {
+            background-color: ${colors.lightGrey};
+            color: ${colors.darkGrey};
+            border-color: transparent;
+            cursor: not-allowed;
+            opacity: 0.5;
+          }
+        `};
+`;
+const ChildWrapperButton = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  position: relative;
+  z-index: ${zIndex.Button};
+
+  ${() => Styles.buttonText};
+`;
+export const BaseButton = forwardRef(({ children, onClick, size = "regular", theme, type = "button", step = 0, fill = false, isLoading = false, tooltip = "", ...rest }, ref) => {
+    const Wrapper = useCallback(({ children }) => {
+        if (tooltip !== "" && rest?.disabled) {
+            return (React.createElement(Tooltip, { wrap: false, content: tooltip }, children));
+        }
+        return React.createElement(React.Fragment, null, children);
+    }, [rest?.disabled, tooltip]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ThemeProvider, { theme: theme },
+            React.createElement(Wrapper, null,
+                React.createElement(ButtonWithThemeProps, { onClick: onClick, type: type, size: size, fill: fill ? fill : undefined, ...rest, ref: ref }, isLoading ? (React.createElement(Loading, null)) : (React.createElement(ChildWrapperButton, { "data-child-wrapper-button": true },
+                    children,
+                    step !== 0 && (React.createElement(Typography, null,
+                        React.createElement("small", null,
+                            "Step ",
+                            step))))))))));
+});
+//# sourceMappingURL=BaseButton.js.map

package/dist/esm/components/buttons/BaseButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseButton.js","sourceRoot":"","sources":["../../../../src/components/buttons/BaseButton.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/form/BaseInput.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { InputTheme } from "./Field.styles";
+import type { InputProps as CommonInputProps } from "./types";
+import { ClearButtonTheme } from "./ClearButton";
+export type BaseInputProps = CommonInputProps & {
+    heightSize?: "large" | "regular" | "small";
+    theme?: InputTheme;
+    clearButtonTheme?: ClearButtonTheme;
+    isClearable?: boolean;
+};
+export declare const BaseInput: React.ForwardRefExoticComponent<import("./types").BaseProps & React.InputHTMLAttributes<HTMLInputElement> & {
+    heightSize?: "regular" | "small" | "large" | undefined;
+    theme?: InputTheme | undefined;
+    clearButtonTheme?: ClearButtonTheme | undefined;
+    isClearable?: boolean | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=BaseInput.d.ts.map

package/dist/esm/components/form/BaseInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseInput.d.ts","sourceRoot":"","sources":["../../../../src/components/form/BaseInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAO,EAAc,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,KAAK,EAAE,UAAU,IAAI,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAG9D,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAE9D,MAAM,MAAM,cAAc,GAAG,gBAAgB,GAAG;IAC9C,UAAU,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;IAC3C,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AASF,eAAO,MAAM,SAAS;;;;;0CA+DrB,CAAC"}

package/dist/esm/components/form/BaseInput.js

@@ -0,0 +1,47 @@
+import React, { forwardRef, useMemo } from "react";
+import { useField, useFormikContext } from "formik";
+import Error from "./Error";
+import { FieldInput } from "./Field.styles";
+import { Grid } from "../ui/Grid";
+import styled from "styled-components";
+import { ClearButton } from "./ClearButton";
+const StyledFieldInput = styled(FieldInput) `
+  padding-right: calc(1rem + 12px);
+`;
+const StyledClearButton = styled(ClearButton) `
+  top: 1px;
+  height: calc(100% - 4px);
+  margin-left: 0;
+`;
+export const BaseInput = forwardRef(({ name, theme, clearButtonTheme, isClearable, heightSize, ...props }, ref) => {
+    const { status, setFieldValue } = useFormikContext();
+    const [field, meta] = useField(name);
+    const errorText = meta.error || status?.[name];
+    const errorMessage = errorText && meta.touched ? errorText : "";
+    const displayError = typeof errorMessage === typeof "string" && errorMessage !== "";
+    const InputComponent = useMemo(() => {
+        const displayClearButton = isClearable && !props.disabled;
+        const inputProps = {
+            $heightSize: heightSize,
+            theme: theme
+        };
+        return displayClearButton ? (React.createElement(Grid, { style: { position: "relative" } },
+            React.createElement(StyledFieldInput, { "$error": errorMessage, ...field, ...props, ...inputProps, ref: ref }),
+            React.createElement(StyledClearButton, { onClick: () => setFieldValue(name, ""), theme: clearButtonTheme }))) : (React.createElement(FieldInput, { "$error": errorMessage, ...field, ...props, ...inputProps, ref: ref }));
+    }, [
+        errorMessage,
+        field,
+        isClearable,
+        name,
+        props,
+        ref,
+        setFieldValue,
+        theme,
+        clearButtonTheme,
+        heightSize
+    ]);
+    return (React.createElement(React.Fragment, null,
+        InputComponent,
+        React.createElement(Error, { display: !props.hideError && displayError, message: errorMessage })));
+});
+//# sourceMappingURL=BaseInput.js.map

package/dist/esm/components/form/BaseInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseInput.js","sourceRoot":"","sources":["../../../../src/components/form/BaseInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAEpD,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAO,EAAE,UAAU,EAAc,MAAM,gBAAgB,CAAC;AAExD,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAClC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,WAAW,EAAoB,MAAM,eAAe,CAAC;AAQ9D,MAAM,gBAAgB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA;;CAE1C,CAAC;AACF,MAAM,iBAAiB,GAAG,MAAM,CAAC,WAAW,CAAC,CAAA;;;;CAI5C,CAAC;AACF,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CACjC,CACE,EAAE,IAAI,EAAE,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EACpE,GAAG,EACH,EAAE;IACF,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,GAAG,gBAAgB,EAAE,CAAC;IACrD,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,IAAI,MAAM,EAAE,CAAC,IAAI,CAAC,CAAC;IAC/C,MAAM,YAAY,GAAG,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IAChE,MAAM,YAAY,GAChB,OAAO,YAAY,KAAK,OAAO,QAAQ,IAAI,YAAY,KAAK,EAAE,CAAC;IACjE,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAClC,MAAM,kBAAkB,GAAG,WAAW,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;QAC1D,MAAM,UAAU,GAAG;YACjB,WAAW,EAAE,UAAU;YACvB,KAAK,EAAE,KAAK;SACb,CAAC;QACF,OAAO,kBAAkB,CAAC,CAAC,CAAC,CAC1B,oBAAC,IAAI,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE;YACnC,oBAAC,gBAAgB,cACP,YAAY,KAChB,KAAK,KACL,KAAK,KACL,UAAU,EACd,GAAG,EAAE,GAAG,GACR;YAEF,oBAAC,iBAAiB,IAChB,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,EAAE,EAAE,CAAC,EACtC,KAAK,EAAE,gBAAgB,GACvB,CACG,CACR,CAAC,CAAC,CAAC,CACF,oBAAC,UAAU,cACD,YAAY,KAChB,KAAK,KACL,KAAK,KACL,UAAU,EACd,GAAG,EAAE,GAAG,GACR,CACH,CAAC;IACJ,CAAC,EAAE;QACD,YAAY;QACZ,KAAK;QACL,WAAW;QACX,IAAI;QACJ,KAAK;QACL,GAAG;QACH,aAAa;QACb,KAAK;QACL,gBAAgB;QAChB,UAAU;KACX,CAAC,CAAC;IACH,OAAO,CACL;QACG,cAAc;QACf,oBAAC,KAAK,IACJ,OAAO,EAAE,CAAC,KAAK,CAAC,SAAS,IAAI,YAAY,EACzC,OAAO,EAAE,YAAY,GACrB,CACD,CACJ,CAAC;AACJ,CAAC,CACF,CAAC"}

package/dist/esm/components/form/BaseTagsInput.d.ts

@@ -0,0 +1,8 @@
+import { HeightSize, InputTheme } from "./Field.styles";
+import { TagsProps as TagsPropsWithoutTheme } from "./types";
+export type BaseTagsInputProps = TagsPropsWithoutTheme & {
+    theme?: InputTheme;
+    heightSize?: HeightSize;
+};
+export declare const BaseTagsInput: ({ name, placeholder, onAddTag, onRemoveTag, compareTags, transform, label, heightSize, theme }: BaseTagsInputProps) => JSX.Element;
+//# sourceMappingURL=BaseTagsInput.d.ts.map

package/dist/esm/components/form/BaseTagsInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseTagsInput.d.ts","sourceRoot":"","sources":["../../../../src/components/form/BaseTagsInput.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAc,UAAU,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAOpE,OAAO,EAAE,SAAS,IAAI,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAC7D,MAAM,MAAM,kBAAkB,GAAG,qBAAqB,GAAG;IACvD,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,aAAa,mGAWvB,kBAAkB,gBAgGpB,CAAC"}

package/dist/esm/components/form/{TagsInput.js → BaseTagsInput.js}

@@ -1,13 +1,13 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { useField, useFormikContext } from "formik";
 import { KeyReturn } from "phosphor-react";
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
 import { Grid } from "../ui/Grid";
 import { Typography } from "../ui/Typography";
 import Error from "./Error";
 import { FieldInput } from "./Field.styles";
-import { Close, Helper, TagContainer, TagWrapper } from "./styles/TagsInput.styles";
-const TagsInput = ({ name, placeholder, onAddTag, onRemoveTag, compareTags = (tagA, tagB) => tagA.toLowerCase() === tagB.toLowerCase(), transform = (tag) => tag, label }) => {
+import { Close, Helper, TagContainer, TagWrapper } from "./styles/BaseTagsInput.styles";
+const gap = "0.5rem";
+export const BaseTagsInput = ({ name, placeholder, onAddTag, onRemoveTag, compareTags = (tagA, tagB) => tagA.toLowerCase() === tagB.toLowerCase(), transform = (tag) => tag, label, heightSize, theme }) => {
     const { validateForm } = useFormikContext();
     const [field, meta, helpers] = useField(name);
     const tags = field.value || [];
@@ -48,21 +48,26 @@ const TagsInput = ({ name, placeholder, onAddTag, onRemoveTag, compareTags = (ta
         validateForm();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [field.value]);
+    const labelRef = useRef(null);
+    const hitEnterWidth = useRef(null);
     return (React.createElement(React.Fragment, null,
-        React.createElement(Grid, { gap: "0.5rem", alignItems: "center" },
-            label && React.createElement(Typography, null, label),
-            React.createElement(TagContainer, null,
-                React.createElement(FieldInput, { onKeyDown: handleKeyDown, type: "text", placeholder: placeholder || "Choose tags...", name: name, onBlur: handleBlur, error: errorMessage }),
-                React.createElement(Helper, null,
+        React.createElement(Grid, { gap: gap, alignItems: "center" },
+            label && (React.createElement(Typography, { "data-label": true, ref: labelRef }, label)),
+            React.createElement(TagContainer, { "$gap": gap },
+                React.createElement(FieldInput, { theme: theme, "$heightSize": heightSize, onKeyDown: handleKeyDown, type: "text", placeholder: placeholder || "Choose tags...", name: name, onBlur: handleBlur, "$error": errorMessage, ...(hitEnterWidth.current?.clientWidth && {
+                        style: {
+                            paddingRight: `calc(${hitEnterWidth.current.clientWidth}px + 1rem)`
+                        }
+                    }) }),
+                React.createElement(Helper, { ref: hitEnterWidth },
                     "Hit Enter ",
-                    React.createElement(KeyReturn, { size: 16 })))),
-        React.createElement(TagContainer, { style: { marginTop: "1em" } },
-            label && (React.createElement(Typography, { style: { visibility: "hidden" } }, label)),
-            tags.map((tag, index) => (React.createElement(TagWrapper, { key: `tags-wrapper_${tag}` },
-                React.createElement("span", { className: "text" }, tag),
-                React.createElement(Close, { onClick: () => removeTag(index) }, "\u00D7"))))),
+                    React.createElement(KeyReturn, { size: 13 })))),
+        React.createElement(TagContainer, { "$gap": gap, "$paddingLeft": label
+                ? `calc(${labelRef.current?.clientWidth}px + ${gap})`
+                : undefined }, tags.map((tag, index) => (React.createElement(TagWrapper, { key: `tags-wrapper_${tag}`, theme: theme },
+            React.createElement("span", { className: "text tag" }, tag),
+            React.createElement(Close, { onClick: () => removeTag(index) }, "\u00D7"))))),
         React.createElement(Error, { display: displayError, message: errorMessage }),
         " "));
 };
-export default TagsInput;
-//# sourceMappingURL=TagsInput.js.map
+//# sourceMappingURL=BaseTagsInput.js.map

package/dist/esm/components/form/BaseTagsInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseTagsInput.js","sourceRoot":"","sources":["../../../../src/components/form/BaseTagsInput.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/form/ClearButton.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties } from "styled-components";
+import React from "react";
+export type ClearButtonTheme = {
+    fill: CSSProperties["fill"];
+    stroke: CSSProperties["stroke"];
+    hover: {
+        fill: CSSProperties["fill"];
+        stroke: CSSProperties["stroke"];
+    };
+};
+export declare const ClearButton: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Pick<Record<string, unknown>, string> & {
+    ref?: unknown;
+}, never>> & Omit<(props: Record<string, unknown>) => JSX.Element, keyof React.Component<any, {}, any>>;
+//# sourceMappingURL=ClearButton.d.ts.map

package/dist/esm/components/form/ClearButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClearButton.d.ts","sourceRoot":"","sources":["../../../../src/components/form/ClearButton.tsx"],"names":[],"mappings":"AAAA,OAAe,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC5B,MAAM,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;IAChC,KAAK,EAAE;QACL,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;QAC5B,MAAM,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;KACjC,CAAC;CACH,CAAC;AACF,eAAO,MAAM,WAAW;;0BApBE,OAAO,MAAM,EAAE,OAAO,CAAC,sDAoChD,CAAC"}

package/dist/esm/components/form/ClearButton.js

@@ -0,0 +1,22 @@
+import styled from "styled-components";
+import React from "react";
+const CrossIcon = (props) => (React.createElement("svg", { height: "20", width: "20", viewBox: "0 0 20 20", "aria-hidden": "true", focusable: "false", ...props },
+    React.createElement("path", { d: "M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z" })));
+export const ClearButton = styled(CrossIcon) `
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  margin: 0 5px;
+  cursor: pointer;
+  display: inline-block;
+  fill: ${(props) => props.theme?.fill || "#cccccc"};
+  line-height: 1;
+  stroke: ${(props) => props.theme?.stroke || "#cccccc"};
+  stroke-width: 0;
+  &:hover * {
+    stroke: ${(props) => props.theme?.hover?.stroke || "#999999"};
+    fill: ${(props) => props.theme?.hover?.fill || "#999999"};
+  }
+`;
+//# sourceMappingURL=ClearButton.js.map

package/dist/esm/components/form/ClearButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClearButton.js","sourceRoot":"","sources":["../../../../src/components/form/ClearButton.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAyB,MAAM,mBAAmB,CAAC;AAC1D,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,MAAM,SAAS,GAAG,CAAC,KAA8B,EAAE,EAAE,CAAC,CACpD,6BACE,MAAM,EAAC,IAAI,EACX,KAAK,EAAC,IAAI,EACV,OAAO,EAAC,WAAW,iBACP,MAAM,EAClB,SAAS,EAAC,OAAO,KACb,KAAK;IAET,8BAAM,CAAC,EAAC,4VAA4V,GAAQ,CACxW,CACP,CAAC;AASF,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,SAAS,CAAC,CAAA;;;;;;;;UAQlC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,IAAI,SAAS;;YAEvC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,IAAI,SAAS;;;cAGzC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,IAAI,SAAS;YACpD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,IAAI,SAAS;;CAE3D,CAAC"}

package/dist/esm/components/form/Field.styles.d.ts

@@ -1,18 +1,55 @@
 /// <reference types="react" />
+import { CSSProperties } from "styled-components";
 export declare const CopyButton: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>;
+export type InputTheme = {
+    background: CSSProperties["backgroundColor"];
+    borderColor: CSSProperties["borderColor"];
+    borderRadius: CSSProperties["borderRadius"];
+    focus: {
+        caretColor: CSSProperties["caretColor"];
+    };
+    hover: {
+        borderColor: CSSProperties["borderColor"];
+    };
+    error: {
+        borderColor: CSSProperties["borderColor"];
+        hover: {
+            borderColor: CSSProperties["borderColor"];
+        };
+        focus: {
+            borderColor: CSSProperties["borderColor"];
+            caretColor: CSSProperties["caretColor"];
+        };
+        placeholder: {
+            color: CSSProperties["color"];
+        };
+    };
+};
+export type HeightSize = keyof typeof sizeToHeight;
+declare const sizeToHeight: {
+    readonly small: "40px";
+    readonly regular: "49px";
+    readonly large: "56px";
+};
 export declare const FieldInput: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
-    error?: any;
+    $error?: any;
+    $heightSize?: "regular" | "small" | "large" | undefined;
+    theme?: InputTheme | undefined;
 }>>;
 export declare const FileUploadWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     choosen: any;
     error: any;
 }>>;
-export declare const FieldFileUpload: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Pick<import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "error"> & {
-    error?: any;
-}, "error" | "key" | keyof import("react").InputHTMLAttributes<HTMLInputElement>> & {
+export declare const FieldFileUpload: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Pick<import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "theme" | "$error" | "$heightSize"> & {
+    $error?: any;
+    $heightSize?: "regular" | "small" | "large" | undefined;
+    theme?: InputTheme | undefined;
+}, "theme" | "key" | keyof import("react").InputHTMLAttributes<HTMLInputElement> | "$error" | "$heightSize"> & {
     ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
 }, never>> & Omit<import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
-    error?: any;
+    $error?: any;
+    $heightSize?: "regular" | "small" | "large" | undefined;
+    theme?: InputTheme | undefined;
 }>>, keyof import("react").Component<any, {}, any>>;
 export declare const FieldFileUploadWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $disabled: boolean;
@@ -23,7 +60,7 @@ export declare const FieldTextArea: import("styled-components").IStyledComponent
 export declare const FormFieldWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<{
     children?: import("react").ReactNode;
     as?: import("react").ElementType<any> | undefined;
-    style?: import("styled-components").CSSProperties | undefined;
+    style?: CSSProperties | undefined;
     onClick?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
 } & {
     height?: import("csstype").Property.Height<number | (string & {})> | undefined;
@@ -50,7 +87,7 @@ export declare const FormFieldWrapper: import("styled-components").IStyledCompon
 } & import("react").HTMLAttributes<unknown> & import("react").RefAttributes<HTMLDivElement>, never>> & Omit<import("react").ForwardRefExoticComponent<{
     children?: import("react").ReactNode;
     as?: import("react").ElementType<any> | undefined;
-    style?: import("styled-components").CSSProperties | undefined;
+    style?: CSSProperties | undefined;
     onClick?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
 } & {
     height?: import("csstype").Property.Height<number | (string & {})> | undefined;
@@ -80,4 +117,5 @@ export declare const CheckboxWrapper: import("styled-components").IStyledCompone
 }>>;
 export declare const VideoPreview: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, never>>;
 export declare const ImagePreview: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>>;
+export {};
 //# sourceMappingURL=Field.styles.d.ts.map

package/dist/esm/components/form/Field.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Field.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Field.styles.ts"],"names":[],"mappings":";AAUA,eAAO,MAAM,UAAU,4NAGtB,CAAC;AAEF,eAAO,MAAM,UAAU;YAA0B,GAAG;GA0DnD,CAAC;AAEF,eAAO,MAAM,iBAAiB;aAAyB,GAAG;WAAS,GAAG;GAsDrE,CAAC;AAEF,eAAO,MAAM,eAAe;YApHqB,GAAG;;;;YAAH,GAAG;mDAsHnD,CAAC;AAEF,eAAO,MAAM,sBAAsB;eAA2B,OAAO;GAiCpE,CAAC;AAEF,eAAO,MAAM,aAAa;WAA4B,GAAG;GA0DxD,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4IA0C5B,CAAC;AAEF,eAAO,MAAM,eAAe;WAAyB,GAAG;GAmEvD,CAAC;AAEF,eAAO,MAAM,YAAY,yNAKxB,CAAC;AACF,eAAO,MAAM,YAAY,uNAExB,CAAC"}
+{"version":3,"file":"Field.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Field.styles.ts"],"names":[],"mappings":";AACA,OAAe,EAAE,aAAa,EAAO,MAAM,mBAAmB,CAAC;AAS/D,eAAO,MAAM,UAAU,4NAGtB,CAAC;AACF,MAAM,MAAM,UAAU,GAAG;IACvB,UAAU,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAC7C,WAAW,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;IAC1C,YAAY,EAAE,aAAa,CAAC,cAAc,CAAC,CAAC;IAC5C,KAAK,EAAE;QACL,UAAU,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;KACzC,CAAC;IACF,KAAK,EAAE;QACL,WAAW,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;KAC3C,CAAC;IACF,KAAK,EAAE;QACL,WAAW,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;QAC1C,KAAK,EAAE;YACL,WAAW,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;SAC3C,CAAC;QACF,KAAK,EAAE;YACL,WAAW,EAAE,aAAa,CAAC,aAAa,CAAC,CAAC;YAC1C,UAAU,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;SACzC,CAAC;QACF,WAAW,EAAE;YACX,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;SAC/B,CAAC;KACH,CAAC;CACH,CAAC;AACF,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,YAAY,CAAC;AACnD,QAAA,MAAM,YAAY;;;;CAIR,CAAC;AACX,eAAO,MAAM,UAAU;aACZ,GAAG;;;GAuEb,CAAC;AAEF,eAAO,MAAM,iBAAiB;aAAyB,GAAG;WAAS,GAAG;GAsDrE,CAAC;AAEF,eAAO,MAAM,eAAe;aAjIjB,GAAG;;;;;;aAAH,GAAG;;;mDAmIb,CAAC;AAEF,eAAO,MAAM,sBAAsB;eAA2B,OAAO;GAiCpE,CAAC;AAEF,eAAO,MAAM,aAAa;WAA4B,GAAG;GA0DxD,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4IA0C5B,CAAC;AAEF,eAAO,MAAM,eAAe;WAAyB,GAAG;GAmEvD,CAAC;AAEF,eAAO,MAAM,YAAY,yNAKxB,CAAC;AACF,eAAO,MAAM,YAAY,uNAExB,CAAC"}

package/dist/esm/components/form/Field.styles.js

@@ -9,14 +9,24 @@ export const CopyButton = styled.button `
   background: none;
   border: none;
 `;
+const sizeToHeight = {
+    small: "40px",
+    regular: "49px",
+    large: "56px"
+};
 export const FieldInput = styled.input `
+  box-sizing: border-box;
+  ${({ $heightSize }) => $heightSize &&
+    css `
+      height: ${sizeToHeight[$heightSize]};
+    `};
   width: 100%;
   padding: 1rem;
   gap: 0.5rem;
 
-  background: ${colors.lightGrey};
-  border: 1px solid ${colors.border};
-  border-radius: 0;
+  background: ${(props) => props.theme?.background || "transparent"};
+  border: 1px solid ${(props) => props.theme?.borderColor || colors.border};
+  border-radius: ${(props) => props.theme?.borderRadius || 0}px;
   outline: none;
   font-family: "Plus Jakarta Sans";
 
@@ -25,7 +35,9 @@ export const FieldInput = styled.input `
   &:not(:disabled) {
     &:focus,
     &:hover {
-      border: 1px solid var(--secondary);
+      border: 1px solid
+        ${(props) => props.theme?.hover?.borderColor || colors.lightGrey};
+      caret-color: ${(props) => props.theme?.focus?.caretColor || "initial"};
     }
   }
 
@@ -34,38 +46,34 @@ export const FieldInput = styled.input `
     opacity: 0.5;
   }
 
-  ${({ error }) => !checkIfValueIsEmpty(error)
-    ? css `
-          border: 1px solid ${colors.orange};
-          &:not(:disabled) {
-            &:hover {
-              border: 1px solid ${colors.orange};
-            }
-          }
-          &:not(:disabled) {
-            &:focus {
-              border: 1px solid var(--secondary);
-            }
-          }
-          &::placeholder {
-            color: ${colors.orange};
-            opacity: 1;
-          }
-          &:-ms-input-placeholder {
-            color: ${colors.orange};
-          }
-          &::-ms-input-placeholder {
-            color: ${colors.orange};
-          }
-        `
-    : css `
-          &:not(:disabled) {
-            &:focus,
-            &:hover {
-              border: 1px solid var(--secondary);
-            }
-          }
-        `}
+  ${({ $error }) => !checkIfValueIsEmpty($error) &&
+    css `
+      border: 1px solid
+        ${(props) => props.theme?.error?.borderColor || colors.orange};
+      &:not(:disabled) {
+        &:hover {
+          border: 1px solid
+            ${(props) => props.theme?.error?.hover?.borderColor || colors.orange};
+        }
+      }
+      &:not(:disabled) {
+        &:focus {
+          border: 1px solid
+            ${(props) => props.theme?.error?.focus?.borderColor || colors.lightGrey};
+          caret-color: ${(props) => props.theme?.error?.focus?.caretColor || colors.orange};
+        }
+      }
+      &::placeholder {
+        color: ${(props) => props.theme?.error?.placeholder?.color || colors.orange};
+        opacity: 1;
+      }
+      &:-ms-input-placeholder {
+        color: ${(props) => props.theme?.error?.placeholder?.color || colors.orange};
+      }
+      &::-ms-input-placeholder {
+        color: ${(props) => props.theme?.error?.placeholder?.color || colors.orange};
+      }
+    `};
 `;
 export const FileUploadWrapper = styled.div `
   position: relative;