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

package/dist/cjs/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/cjs/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/cjs/components/buttons/BaseButton.js

@@ -0,0 +1,154 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseButton = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const zIndex_1 = require("../ui/zIndex");
+const Tooltip_1 = require("../tooltip/Tooltip");
+const Styles = __importStar(require("../ui/styles"));
+const Typography_1 = require("../ui/Typography");
+const theme_1 = require("../../theme");
+const Loading_1 = require("../Loading");
+const colors = theme_1.theme.colors.light;
+const ButtonWithThemeProps = styled_components_1.default.button `
+  ${() => Styles.button};
+  ${(props) => Styles[props.size]}
+  border-style: solid;
+  border-color: ${(props) => { var _a; return ((_a = props.theme) === null || _a === void 0 ? void 0 : _a.borderColor) || "transparent"; }};
+  border-width: ${(props) => { var _a; return ((_a = props.theme) === null || _a === void 0 ? void 0 : _a.borderWidth) || 0; }}px;
+  border-radius: ${(props) => { var _a; return ((_a = props.theme) === null || _a === void 0 ? void 0 : _a.borderRadius) || 0; }}px;
+  color: ${(props) => { var _a; return ((_a = props.theme) === null || _a === void 0 ? void 0 : _a.color) || "#000000"; }};
+  background-color: ${(props) => { var _a; return ((_a = props.theme) === null || _a === void 0 ? void 0 : _a.background) || "transparent"; }};
+  svg {
+    stroke: ${(props) => { var _a; return ((_a = props.theme) === null || _a === void 0 ? void 0 : _a.color) || "#000000"; }};
+  }
+  ${(props) => props.fill
+    ? (0, styled_components_1.css) `
+          width: 100%;
+        `
+    : ""};
+  ${(props) => {
+    var _a, _b, _c, _d;
+    return ((_a = props.theme) === null || _a === void 0 ? void 0 : _a.hover) &&
+        (0, styled_components_1.css) `
+      &:hover:not(:disabled) {
+        background-color: ${(_b = props.theme) === null || _b === void 0 ? void 0 : _b.hover.background};
+        ${((_c = props.theme) === null || _c === void 0 ? void 0 : _c.hover.color) &&
+            (0, styled_components_1.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;
+            }
+          }
+        `};
+        ${((_d = props.theme) === null || _d === void 0 ? void 0 : _d.hover.borderColor) &&
+            (0, styled_components_1.css) `
+          border-color: ${props.theme.hover.borderColor};
+        `};
+      }
+    `;
+}}
+  ${(props) => {
+    var _a;
+    return ((_a = props.theme) === null || _a === void 0 ? void 0 : _a.padding)
+        ? (0, styled_components_1.css) `
+          padding: ${props.theme.padding} !important;
+        `
+        : "";
+}}
+
+  ${(props) => {
+    var _a, _b, _c;
+    return ((_a = props.theme) === null || _a === void 0 ? void 0 : _a.disabled)
+        ? (0, styled_components_1.css) `
+          &:disabled {
+            background-color: ${((_b = props.theme.disabled) === null || _b === void 0 ? void 0 : _b.background) ||
+            "transparent"};
+            color: ${((_c = props.theme.disabled) === null || _c === void 0 ? void 0 : _c.color) || colors.darkGrey};
+            border-color: transparent;
+            cursor: not-allowed;
+            opacity: 0.5;
+          }
+        `
+        : (0, styled_components_1.css) `
+          &:disabled {
+            background-color: ${colors.lightGrey};
+            color: ${colors.darkGrey};
+            border-color: transparent;
+            cursor: not-allowed;
+            opacity: 0.5;
+          }
+        `;
+}};
+`;
+const ChildWrapperButton = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  position: relative;
+  z-index: ${zIndex_1.zIndex.Button};
+
+  ${() => Styles.buttonText};
+`;
+exports.BaseButton = (0, react_1.forwardRef)((_a, ref) => {
+    var { children, onClick, size = "regular", theme, type = "button", step = 0, fill = false, isLoading = false, tooltip = "" } = _a, rest = __rest(_a, ["children", "onClick", "size", "theme", "type", "step", "fill", "isLoading", "tooltip"]);
+    const Wrapper = (0, react_1.useCallback)(({ children }) => {
+        if (tooltip !== "" && (rest === null || rest === void 0 ? void 0 : rest.disabled)) {
+            return (react_1.default.createElement(Tooltip_1.Tooltip, { wrap: false, content: tooltip }, children));
+        }
+        return react_1.default.createElement(react_1.default.Fragment, null, children);
+    }, [rest === null || rest === void 0 ? void 0 : rest.disabled, tooltip]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
+            react_1.default.createElement(Wrapper, null,
+                react_1.default.createElement(ButtonWithThemeProps, Object.assign({ onClick: onClick, type: type, size: size, fill: fill ? fill : undefined }, rest, { ref: ref }), isLoading ? (react_1.default.createElement(Loading_1.Loading, null)) : (react_1.default.createElement(ChildWrapperButton, { "data-child-wrapper-button": true },
+                    children,
+                    step !== 0 && (react_1.default.createElement(Typography_1.Typography, null,
+                        react_1.default.createElement("small", null,
+                            "Step ",
+                            step))))))))));
+});
+//# sourceMappingURL=BaseButton.js.map

package/dist/cjs/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/cjs/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/cjs/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/cjs/components/form/BaseInput.js

@@ -0,0 +1,88 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseInput = void 0;
+const react_1 = __importStar(require("react"));
+const formik_1 = require("formik");
+const Error_1 = __importDefault(require("./Error"));
+const Field_styles_1 = require("./Field.styles");
+const Grid_1 = require("../ui/Grid");
+const styled_components_1 = __importDefault(require("styled-components"));
+const ClearButton_1 = require("./ClearButton");
+const StyledFieldInput = (0, styled_components_1.default)(Field_styles_1.FieldInput) `
+  padding-right: calc(1rem + 12px);
+`;
+const StyledClearButton = (0, styled_components_1.default)(ClearButton_1.ClearButton) `
+  top: 1px;
+  height: calc(100% - 4px);
+  margin-left: 0;
+`;
+exports.BaseInput = (0, react_1.forwardRef)((_a, ref) => {
+    var { name, theme, clearButtonTheme, isClearable, heightSize } = _a, props = __rest(_a, ["name", "theme", "clearButtonTheme", "isClearable", "heightSize"]);
+    const { status, setFieldValue } = (0, formik_1.useFormikContext)();
+    const [field, meta] = (0, formik_1.useField)(name);
+    const errorText = meta.error || (status === null || status === void 0 ? void 0 : status[name]);
+    const errorMessage = errorText && meta.touched ? errorText : "";
+    const displayError = typeof errorMessage === typeof "string" && errorMessage !== "";
+    const InputComponent = (0, react_1.useMemo)(() => {
+        const displayClearButton = isClearable && !props.disabled;
+        const inputProps = {
+            $heightSize: heightSize,
+            theme: theme
+        };
+        return displayClearButton ? (react_1.default.createElement(Grid_1.Grid, { style: { position: "relative" } },
+            react_1.default.createElement(StyledFieldInput, Object.assign({ "$error": errorMessage }, field, props, inputProps, { ref: ref })),
+            react_1.default.createElement(StyledClearButton, { onClick: () => setFieldValue(name, ""), theme: clearButtonTheme }))) : (react_1.default.createElement(Field_styles_1.FieldInput, Object.assign({ "$error": errorMessage }, field, props, inputProps, { ref: ref })));
+    }, [
+        errorMessage,
+        field,
+        isClearable,
+        name,
+        props,
+        ref,
+        setFieldValue,
+        theme,
+        clearButtonTheme,
+        heightSize
+    ]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        InputComponent,
+        react_1.default.createElement(Error_1.default, { display: !props.hideError && displayError, message: errorMessage })));
+});
+//# sourceMappingURL=BaseInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseInput.js","sourceRoot":"","sources":["../../../../src/components/form/BaseInput.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAmD;AACnD,mCAAoD;AAEpD,oDAA4B;AAC5B,iDAAwD;AAExD,qCAAkC;AAClC,0EAAuC;AACvC,+CAA8D;AAQ9D,MAAM,gBAAgB,GAAG,IAAA,2BAAM,EAAC,yBAAU,CAAC,CAAA;;CAE1C,CAAC;AACF,MAAM,iBAAiB,GAAG,IAAA,2BAAM,EAAC,yBAAW,CAAC,CAAA;;;;CAI5C,CAAC;AACW,QAAA,SAAS,GAAG,IAAA,kBAAU,EACjC,CACE,EAAoE,EACpE,GAAG,EACH,EAAE;QAFF,EAAE,IAAI,EAAE,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,UAAU,OAAY,EAAP,KAAK,cAAlE,kEAAoE,CAAF;IAGlE,MAAM,EAAE,MAAM,EAAE,aAAa,EAAE,GAAG,IAAA,yBAAgB,GAAE,CAAC;IACrD,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,IAAA,iBAAQ,EAAC,IAAI,CAAC,CAAC;IACrC,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,KAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,IAAI,CAAC,CAAA,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,IAAA,eAAO,EAAC,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,8BAAC,WAAI,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE;YACnC,8BAAC,gBAAgB,4BACP,YAAY,IAChB,KAAK,EACL,KAAK,EACL,UAAU,IACd,GAAG,EAAE,GAAG,IACR;YAEF,8BAAC,iBAAiB,IAChB,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,EAAE,EAAE,CAAC,EACtC,KAAK,EAAE,gBAAgB,GACvB,CACG,CACR,CAAC,CAAC,CAAC,CACF,8BAAC,yBAAU,4BACD,YAAY,IAChB,KAAK,EACL,KAAK,EACL,UAAU,IACd,GAAG,EAAE,GAAG,IACR,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,8BAAC,eAAK,IACJ,OAAO,EAAE,CAAC,KAAK,CAAC,SAAS,IAAI,YAAY,EACzC,OAAO,EAAE,YAAY,GACrB,CACD,CACJ,CAAC;AACJ,CAAC,CACF,CAAC"}

package/dist/cjs/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/cjs/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/cjs/components/form/{TagsInput.js → BaseTagsInput.js}

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-/* eslint-disable @typescript-eslint/no-explicit-any */
+exports.BaseTagsInput = void 0;
 const formik_1 = require("formik");
 const phosphor_react_1 = require("phosphor-react");
 const react_1 = __importStar(require("react"));
@@ -34,8 +34,10 @@ const Grid_1 = require("../ui/Grid");
 const Typography_1 = require("../ui/Typography");
 const Error_1 = __importDefault(require("./Error"));
 const Field_styles_1 = require("./Field.styles");
-const TagsInput_styles_1 = require("./styles/TagsInput.styles");
-const TagsInput = ({ name, placeholder, onAddTag, onRemoveTag, compareTags = (tagA, tagB) => tagA.toLowerCase() === tagB.toLowerCase(), transform = (tag) => tag, label }) => {
+const BaseTagsInput_styles_1 = require("./styles/BaseTagsInput.styles");
+const gap = "0.5rem";
+const BaseTagsInput = ({ name, placeholder, onAddTag, onRemoveTag, compareTags = (tagA, tagB) => tagA.toLowerCase() === tagB.toLowerCase(), transform = (tag) => tag, label, heightSize, theme }) => {
+    var _a, _b;
     const { validateForm } = (0, formik_1.useFormikContext)();
     const [field, meta, helpers] = (0, formik_1.useField)(name);
     const tags = field.value || [];
@@ -76,21 +78,27 @@ const TagsInput = ({ name, placeholder, onAddTag, onRemoveTag, compareTags = (ta
         validateForm();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [field.value]);
+    const labelRef = (0, react_1.useRef)(null);
+    const hitEnterWidth = (0, react_1.useRef)(null);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Grid_1.Grid, { gap: "0.5rem", alignItems: "center" },
-            label && react_1.default.createElement(Typography_1.Typography, null, label),
-            react_1.default.createElement(TagsInput_styles_1.TagContainer, null,
-                react_1.default.createElement(Field_styles_1.FieldInput, { onKeyDown: handleKeyDown, type: "text", placeholder: placeholder || "Choose tags...", name: name, onBlur: handleBlur, error: errorMessage }),
-                react_1.default.createElement(TagsInput_styles_1.Helper, null,
+        react_1.default.createElement(Grid_1.Grid, { gap: gap, alignItems: "center" },
+            label && (react_1.default.createElement(Typography_1.Typography, { "data-label": true, ref: labelRef }, label)),
+            react_1.default.createElement(BaseTagsInput_styles_1.TagContainer, { "$gap": gap },
+                react_1.default.createElement(Field_styles_1.FieldInput, Object.assign({ theme: theme, "$heightSize": heightSize, onKeyDown: handleKeyDown, type: "text", placeholder: placeholder || "Choose tags...", name: name, onBlur: handleBlur, "$error": errorMessage }, (((_a = hitEnterWidth.current) === null || _a === void 0 ? void 0 : _a.clientWidth) && {
+                    style: {
+                        paddingRight: `calc(${hitEnterWidth.current.clientWidth}px + 1rem)`
+                    }
+                }))),
+                react_1.default.createElement(BaseTagsInput_styles_1.Helper, { ref: hitEnterWidth },
                     "Hit Enter ",
-                    react_1.default.createElement(phosphor_react_1.KeyReturn, { size: 16 })))),
-        react_1.default.createElement(TagsInput_styles_1.TagContainer, { style: { marginTop: "1em" } },
-            label && (react_1.default.createElement(Typography_1.Typography, { style: { visibility: "hidden" } }, label)),
-            tags.map((tag, index) => (react_1.default.createElement(TagsInput_styles_1.TagWrapper, { key: `tags-wrapper_${tag}` },
-                react_1.default.createElement("span", { className: "text" }, tag),
-                react_1.default.createElement(TagsInput_styles_1.Close, { onClick: () => removeTag(index) }, "\u00D7"))))),
+                    react_1.default.createElement(phosphor_react_1.KeyReturn, { size: 13 })))),
+        react_1.default.createElement(BaseTagsInput_styles_1.TagContainer, { "$gap": gap, "$paddingLeft": label
+                ? `calc(${(_b = labelRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth}px + ${gap})`
+                : undefined }, tags.map((tag, index) => (react_1.default.createElement(BaseTagsInput_styles_1.TagWrapper, { key: `tags-wrapper_${tag}`, theme: theme },
+            react_1.default.createElement("span", { className: "text tag" }, tag),
+            react_1.default.createElement(BaseTagsInput_styles_1.Close, { onClick: () => removeTag(index) }, "\u00D7"))))),
         react_1.default.createElement(Error_1.default, { display: displayError, message: errorMessage }),
         " "));
 };
-exports.default = TagsInput;
-//# sourceMappingURL=TagsInput.js.map
+exports.BaseTagsInput = BaseTagsInput;
+//# sourceMappingURL=BaseTagsInput.js.map

package/dist/cjs/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/cjs/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/cjs/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/cjs/components/form/ClearButton.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClearButton = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const react_1 = __importDefault(require("react"));
+const CrossIcon = (props) => (react_1.default.createElement("svg", Object.assign({ height: "20", width: "20", viewBox: "0 0 20 20", "aria-hidden": "true", focusable: "false" }, props),
+    react_1.default.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" })));
+exports.ClearButton = (0, styled_components_1.default)(CrossIcon) `
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  margin: 0 5px;
+  cursor: pointer;
+  display: inline-block;
+  fill: ${(props) => { var _a; return ((_a = props.theme) === null || _a === void 0 ? void 0 : _a.fill) || "#cccccc"; }};
+  line-height: 1;
+  stroke: ${(props) => { var _a; return ((_a = props.theme) === null || _a === void 0 ? void 0 : _a.stroke) || "#cccccc"; }};
+  stroke-width: 0;
+  &:hover * {
+    stroke: ${(props) => { var _a, _b; return ((_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.hover) === null || _b === void 0 ? void 0 : _b.stroke) || "#999999"; }};
+    fill: ${(props) => { var _a, _b; return ((_b = (_a = props.theme) === null || _a === void 0 ? void 0 : _a.hover) === null || _b === void 0 ? void 0 : _b.fill) || "#999999"; }};
+  }
+`;
+//# sourceMappingURL=ClearButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ClearButton.js","sourceRoot":"","sources":["../../../../src/components/form/ClearButton.tsx"],"names":[],"mappings":";;;;;;AAAA,0EAA0D;AAC1D,kDAA0B;AAC1B,MAAM,SAAS,GAAG,CAAC,KAA8B,EAAE,EAAE,CAAC,CACpD,qDACE,MAAM,EAAC,IAAI,EACX,KAAK,EAAC,IAAI,EACV,OAAO,EAAC,WAAW,iBACP,MAAM,EAClB,SAAS,EAAC,OAAO,IACb,KAAK;IAET,wCAAM,CAAC,EAAC,4VAA4V,GAAQ,CACxW,CACP,CAAC;AASW,QAAA,WAAW,GAAG,IAAA,2BAAM,EAAC,SAAS,CAAC,CAAA;;;;;;;;UAQlC,CAAC,KAAK,EAAE,EAAE,WAAC,OAAA,CAAA,MAAA,KAAK,CAAC,KAAK,0CAAE,IAAI,KAAI,SAAS,CAAA,EAAA;;YAEvC,CAAC,KAAK,EAAE,EAAE,WAAC,OAAA,CAAA,MAAA,KAAK,CAAC,KAAK,0CAAE,MAAM,KAAI,SAAS,CAAA,EAAA;;;cAGzC,CAAC,KAAK,EAAE,EAAE,eAAC,OAAA,CAAA,MAAA,MAAA,KAAK,CAAC,KAAK,0CAAE,KAAK,0CAAE,MAAM,KAAI,SAAS,CAAA,EAAA;YACpD,CAAC,KAAK,EAAE,EAAE,eAAC,OAAA,CAAA,MAAA,MAAA,KAAK,CAAC,KAAK,0CAAE,KAAK,0CAAE,IAAI,KAAI,SAAS,CAAA,EAAA;;CAE3D,CAAC"}

package/dist/cjs/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/cjs/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"}