@koine/react 2.0.0-beta.2 → 2.0.0-beta.200

package/Forms/Toggle/useToggle.js

@@ -1,149 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useToggle = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var react_hook_form_1 = require("react-hook-form");
-var styles_1 = require("../styles");
-/**
- * This hook is meant to power Checkboxes, Switches and checkbox-like Radios
- * components, it works in fact in two modes:
- *
- * 1: behaviour as standard checkbox
- * yup validation would simply look like:
- *
- * ```ts
- * privacy:  boolean().required(),
- * // add `.nullable()` if you do not provide a boolean `defaultValue`
- * ```
- *
- * 2: beahviour as two radio for checkbox with custom true/false values as
- * strings yup validation would look like:
- *
- * ```ts
- * newsletter: string().oneOf(["yes", "no"]).required(),
- * // add `.nullable()` if you do not provide a string `defaultValue`
- *
- * // to do not make it required and avoid triggering an error when the input is
- * // untouched you need to set the default value of the input in the form
- * // initialization's `defaultValues` as such:
- *
- * useForm({ defaultValues: { newsletter: "no" }})
- * ```
- *
- * To enable this mode either pass the props `valueTrue` and `valueFalse` or
- * an array of options with the shape of `Option`
- */
-function useToggle(props, ref) {
-    var name = props.name, control = props.control, register = props.register, label = props.label, options = props.options, propValue = props.value, restProps = tslib_1.__rest(props, ["name", "control", "register", "label", "options", "value"]);
-    var id = restProps.id, valueTrue = restProps.valueTrue, valueFalse = restProps.valueFalse, 
-    // defaultChecked,
-    // defaultValue,
-    // eslint-disable-next-line prefer-const
-    remainingInputProps = tslib_1.__rest(restProps, ["id", "valueTrue", "valueFalse"]);
-    // use options data convention to pass on the true/false values
-    if (options) {
-        valueTrue = options
-            .filter(function (opt) { return opt.value === "true"; })[0]
-            .label.toString();
-        valueFalse = options
-            .filter(function (opt) { return opt.value === "false"; })[0]
-            .label.toString();
-    }
-    id = "switch-".concat(name);
-    var idTrue = "".concat(id, "-true");
-    var idFalse = "".concat(id, "-false");
-    var isRadio = !!(valueTrue && valueFalse);
-    // // manage default values for both toggle modes
-    // defaultChecked = isUndefined(defaultChecked) ? false : defaultChecked;
-    // // TODO: maybe throw an error if the defaultValue that arrives here is not
-    // // a valid value
-    // defaultValue =
-    //   defaultValue === valueTrue || defaultValue === valueFalse
-    //     ? defaultValue
-    //     : valueFalse;
-    // get the value either from the uncontrolled watched input or from the given
-    // prop to control the component
-    var value = (0, react_hook_form_1.useWatch)({
-        name: name,
-        control: control,
-        // defaultValue: isRadio ? defaultValue : defaultChecked,
-    });
-    if (propValue) {
-        value = propValue;
-    }
-    // get the input props needed by react-hook-form, first check if we have
-    // a `register` function, then check if we have a `control` object or just
-    // rely on the `name` prop and `ref`, they probably would be passed alongside
-    // an `onChange` prop that is spreaded on the inputs
-    var inputProps = (0, react_1.useMemo)(function () {
-        return register
-            ? register(name)
-            : control
-                ? control.register(name)
-                : {
-                    name: name,
-                    ref: ref,
-                };
-    }, [register, control, name, ref]);
-    /**
-     * Accessibility.
-     *
-     * Fake the spacebar keyboard behaviour on the radio mode of the checkbox.
-     * Without this *only* the arrow keys would change the checkbox state
-     */
-    var handleKeyDown = (0, react_1.useCallback)(function (event) {
-        if (event.key === " ") {
-            event.preventDefault();
-            event.stopPropagation();
-            var firstInput = event.target;
-            var next = firstInput.nextElementSibling;
-            var prev = firstInput.previousElementSibling;
-            var secondInput = (next === null || next === void 0 ? void 0 : next.tagName) === "INPUT" ? next : prev;
-            var target = firstInput;
-            if (firstInput.checked) {
-                target = secondInput;
-            }
-            else {
-                if (!secondInput.checked) {
-                    target =
-                        firstInput.value === valueTrue ? firstInput : secondInput;
-                }
-            }
-            if (target)
-                target.click();
-        }
-    }, [valueTrue]);
-    // collect all the return values that are dependent on the current value
-    // of the input
-    var valueDependentProps = (0, react_1.useMemo)(function () { return ({
-        rootProps: {
-            htmlFor: isRadio
-                ? !value || value === valueFalse
-                    ? idTrue
-                    : idFalse
-                : id,
-        },
-        label: label ? label : value,
-        value: value,
-    }); }, [value, valueFalse, isRadio, id, idTrue, idFalse, label]);
-    var Inputs = (0, react_1.useMemo)(function () {
-        return isRadio ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(styles_1.InputInvisible, tslib_1.__assign({ id: idFalse }, inputProps, remainingInputProps, { onKeyDown: handleKeyDown, type: "radio", value: valueFalse })), (0, jsx_runtime_1.jsx)(styles_1.InputInvisible, tslib_1.__assign({ id: idTrue }, inputProps, remainingInputProps, { onKeyDown: handleKeyDown, type: "radio", value: valueTrue }))] })) : ((0, jsx_runtime_1.jsx)(styles_1.InputInvisible, tslib_1.__assign({ id: id, type: "checkbox" }, inputProps, remainingInputProps)));
-    }, [
-        inputProps,
-        remainingInputProps,
-        handleKeyDown,
-        isRadio,
-        idFalse,
-        idTrue,
-        valueFalse,
-        valueTrue,
-        id,
-        // defaultChecked,
-        // defaultValue,
-    ]);
-    // console.log("useToggle: render", value);
-    return tslib_1.__assign(tslib_1.__assign({}, valueDependentProps), { Inputs: Inputs });
-}
-exports.useToggle = useToggle;

package/Forms/Toggle/useToggle.mjs

@@ -1,145 +0,0 @@
-import { __assign, __rest } from "tslib";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo } from "react";
-import { useWatch } from "react-hook-form";
-import { InputInvisible } from "../styles";
-/**
- * This hook is meant to power Checkboxes, Switches and checkbox-like Radios
- * components, it works in fact in two modes:
- *
- * 1: behaviour as standard checkbox
- * yup validation would simply look like:
- *
- * ```ts
- * privacy:  boolean().required(),
- * // add `.nullable()` if you do not provide a boolean `defaultValue`
- * ```
- *
- * 2: beahviour as two radio for checkbox with custom true/false values as
- * strings yup validation would look like:
- *
- * ```ts
- * newsletter: string().oneOf(["yes", "no"]).required(),
- * // add `.nullable()` if you do not provide a string `defaultValue`
- *
- * // to do not make it required and avoid triggering an error when the input is
- * // untouched you need to set the default value of the input in the form
- * // initialization's `defaultValues` as such:
- *
- * useForm({ defaultValues: { newsletter: "no" }})
- * ```
- *
- * To enable this mode either pass the props `valueTrue` and `valueFalse` or
- * an array of options with the shape of `Option`
- */
-export function useToggle(props, ref) {
-    var name = props.name, control = props.control, register = props.register, label = props.label, options = props.options, propValue = props.value, restProps = __rest(props, ["name", "control", "register", "label", "options", "value"]);
-    var id = restProps.id, valueTrue = restProps.valueTrue, valueFalse = restProps.valueFalse, 
-    // defaultChecked,
-    // defaultValue,
-    // eslint-disable-next-line prefer-const
-    remainingInputProps = __rest(restProps, ["id", "valueTrue", "valueFalse"]);
-    // use options data convention to pass on the true/false values
-    if (options) {
-        valueTrue = options
-            .filter(function (opt) { return opt.value === "true"; })[0]
-            .label.toString();
-        valueFalse = options
-            .filter(function (opt) { return opt.value === "false"; })[0]
-            .label.toString();
-    }
-    id = "switch-".concat(name);
-    var idTrue = "".concat(id, "-true");
-    var idFalse = "".concat(id, "-false");
-    var isRadio = !!(valueTrue && valueFalse);
-    // // manage default values for both toggle modes
-    // defaultChecked = isUndefined(defaultChecked) ? false : defaultChecked;
-    // // TODO: maybe throw an error if the defaultValue that arrives here is not
-    // // a valid value
-    // defaultValue =
-    //   defaultValue === valueTrue || defaultValue === valueFalse
-    //     ? defaultValue
-    //     : valueFalse;
-    // get the value either from the uncontrolled watched input or from the given
-    // prop to control the component
-    var value = useWatch({
-        name: name,
-        control: control,
-        // defaultValue: isRadio ? defaultValue : defaultChecked,
-    });
-    if (propValue) {
-        value = propValue;
-    }
-    // get the input props needed by react-hook-form, first check if we have
-    // a `register` function, then check if we have a `control` object or just
-    // rely on the `name` prop and `ref`, they probably would be passed alongside
-    // an `onChange` prop that is spreaded on the inputs
-    var inputProps = useMemo(function () {
-        return register
-            ? register(name)
-            : control
-                ? control.register(name)
-                : {
-                    name: name,
-                    ref: ref,
-                };
-    }, [register, control, name, ref]);
-    /**
-     * Accessibility.
-     *
-     * Fake the spacebar keyboard behaviour on the radio mode of the checkbox.
-     * Without this *only* the arrow keys would change the checkbox state
-     */
-    var handleKeyDown = useCallback(function (event) {
-        if (event.key === " ") {
-            event.preventDefault();
-            event.stopPropagation();
-            var firstInput = event.target;
-            var next = firstInput.nextElementSibling;
-            var prev = firstInput.previousElementSibling;
-            var secondInput = (next === null || next === void 0 ? void 0 : next.tagName) === "INPUT" ? next : prev;
-            var target = firstInput;
-            if (firstInput.checked) {
-                target = secondInput;
-            }
-            else {
-                if (!secondInput.checked) {
-                    target =
-                        firstInput.value === valueTrue ? firstInput : secondInput;
-                }
-            }
-            if (target)
-                target.click();
-        }
-    }, [valueTrue]);
-    // collect all the return values that are dependent on the current value
-    // of the input
-    var valueDependentProps = useMemo(function () { return ({
-        rootProps: {
-            htmlFor: isRadio
-                ? !value || value === valueFalse
-                    ? idTrue
-                    : idFalse
-                : id,
-        },
-        label: label ? label : value,
-        value: value,
-    }); }, [value, valueFalse, isRadio, id, idTrue, idFalse, label]);
-    var Inputs = useMemo(function () {
-        return isRadio ? (_jsxs(_Fragment, { children: [_jsx(InputInvisible, __assign({ id: idFalse }, inputProps, remainingInputProps, { onKeyDown: handleKeyDown, type: "radio", value: valueFalse })), _jsx(InputInvisible, __assign({ id: idTrue }, inputProps, remainingInputProps, { onKeyDown: handleKeyDown, type: "radio", value: valueTrue }))] })) : (_jsx(InputInvisible, __assign({ id: id, type: "checkbox" }, inputProps, remainingInputProps)));
-    }, [
-        inputProps,
-        remainingInputProps,
-        handleKeyDown,
-        isRadio,
-        idFalse,
-        idTrue,
-        valueFalse,
-        valueTrue,
-        id,
-        // defaultChecked,
-        // defaultValue,
-    ]);
-    // console.log("useToggle: render", value);
-    return __assign(__assign({}, valueDependentProps), { Inputs: Inputs });
-}

package/Forms/antispam.js

@@ -1,66 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.decodeForm = exports.encodeForm = void 0;
-var tslib_1 = require("tslib");
-var yup_1 = require("@kuus/yup");
-var encode_1 = tslib_1.__importDefault(require("@koine/utils/encode"));
-var decode_1 = tslib_1.__importDefault(require("@koine/utils/decode"));
-var isUndefined_1 = tslib_1.__importDefault(require("@koine/utils/isUndefined"));
-/**
- * Encode form
- *
- * Takes a record of yup validations and outputs a `yup` schema with encoded
- * names (antispam technique) and a record of the encoded/decoded input `name`s.
- *
- * We skip the names prefixed wth an underscore which are considered programmatic
- * form data not created by user input.
- *
- * FIXME: types https://github.com/jquense/yup/issues/1700
- */
-function encodeForm(validationRules) {
-    var encoded = {};
-    var encodedNames = {};
-    for (var name_1 in validationRules) {
-        if (!name_1.startsWith("_")) {
-            var encodedName = (0, encode_1.default)(name_1);
-            encoded[encodedName] = validationRules[name_1];
-            encodedNames[name_1] = encodedName;
-        }
-    }
-    // we need `.required()` to correctly infer the type @see
-    // https://github.com/jquense/yup/issues/946
-    var encodedSchema = (0, yup_1.object)(encoded).required();
-    return { encodedSchema: encodedSchema, encodedNames: encodedNames };
-}
-exports.encodeForm = encodeForm;
-/**
- * Decode form data
- *
- * This function is meant to be used inside an api endpoint to gather an encoded
- * form submit data and transform it to the decoded desired json data.
- *
- * Here too we skip encoding/decoding process for names prefixed wth an underscore
- * which are considered programmatic form data not created by user input.
- */
-function decodeForm(formData) {
-    var json = {};
-    for (var encodedName in formData) {
-        var decodedName = (0, decode_1.default)(encodedName);
-        // always add underscore prefixed names as they are treated as internal
-        // private inputs outside of the honeypot system, normalise them here removing
-        // the underscore prefix
-        if (encodedName.startsWith("_")) {
-            // @ts-expect-error nevermind
-            json[encodedName.substring(1)] = formData[encodedName];
-        }
-        // if the decoded `name` is empty and the encoded `name` is defined honeypot passed
-        else if (!(0, isUndefined_1.default)(formData[encodedName]) &&
-            formData[decodedName] === "") {
-            // @ts-expect-error nevermind
-            json[decodedName] = formData[encodedName];
-        }
-    }
-    // console.log(formData, decoded, json);
-    return json;
-}
-exports.decodeForm = decodeForm;

package/Forms/antispam.mjs

@@ -1,60 +0,0 @@
-import { object } from "@kuus/yup";
-import encode from "@koine/utils/encode";
-import decode from "@koine/utils/decode";
-import isUndefined from "@koine/utils/isUndefined";
-/**
- * Encode form
- *
- * Takes a record of yup validations and outputs a `yup` schema with encoded
- * names (antispam technique) and a record of the encoded/decoded input `name`s.
- *
- * We skip the names prefixed wth an underscore which are considered programmatic
- * form data not created by user input.
- *
- * FIXME: types https://github.com/jquense/yup/issues/1700
- */
-export function encodeForm(validationRules) {
-    var encoded = {};
-    var encodedNames = {};
-    for (var name_1 in validationRules) {
-        if (!name_1.startsWith("_")) {
-            var encodedName = encode(name_1);
-            encoded[encodedName] = validationRules[name_1];
-            encodedNames[name_1] = encodedName;
-        }
-    }
-    // we need `.required()` to correctly infer the type @see
-    // https://github.com/jquense/yup/issues/946
-    var encodedSchema = object(encoded).required();
-    return { encodedSchema: encodedSchema, encodedNames: encodedNames };
-}
-/**
- * Decode form data
- *
- * This function is meant to be used inside an api endpoint to gather an encoded
- * form submit data and transform it to the decoded desired json data.
- *
- * Here too we skip encoding/decoding process for names prefixed wth an underscore
- * which are considered programmatic form data not created by user input.
- */
-export function decodeForm(formData) {
-    var json = {};
-    for (var encodedName in formData) {
-        var decodedName = decode(encodedName);
-        // always add underscore prefixed names as they are treated as internal
-        // private inputs outside of the honeypot system, normalise them here removing
-        // the underscore prefix
-        if (encodedName.startsWith("_")) {
-            // @ts-expect-error nevermind
-            json[encodedName.substring(1)] = formData[encodedName];
-        }
-        // if the decoded `name` is empty and the encoded `name` is defined honeypot passed
-        else if (!isUndefined(formData[encodedName]) &&
-            formData[decodedName] === "") {
-            // @ts-expect-error nevermind
-            json[decodedName] = formData[encodedName];
-        }
-    }
-    // console.log(formData, decoded, json);
-    return json;
-}

package/Forms/helpers.d.ts

@@ -1,26 +0,0 @@
-/// <reference types="react" />
-import type { Control, UseFormRegister, UseFormSetValue } from "react-hook-form";
-import type { Option } from "../types";
-type FormControlNativeType = "input" | "select" | "textarea";
-type FormControlFieldValues = Record<string, any>;
-export type FormControlNative<T extends FormControlNativeType = "input"> = Omit<React.ComponentPropsWithRef<T>, "name">;
-export type FormControlProps<T extends FormControlFieldValues = any> = {
-    label?: React.ReactNode;
-    name: string;
-    control?: Control<T>;
-    register?: UseFormRegister<T>;
-    setValue?: UseFormSetValue<T>;
-};
-export type FormControl<TControlType extends FormControlNativeType = "input", TFieldValues extends FormControlFieldValues = any> = FormControlNative<TControlType> & FormControlProps<TFieldValues>;
-export declare const normaliseOptions: (options?: (string | Option)[]) => Option[];
-export declare function defaultOptionsFilterFn(options: Option[], inputValue?: string): Option[];
-/**
- * We are faking the native input `onChange` event
- */
-export declare function triggerOnChange<T extends HTMLElement = HTMLInputElement>(onChange?: React.ChangeEventHandler<T>, name?: string, value?: any): void;
-/**
- * @see https://hustle.bizongo.in/simulate-react-on-change-on-controlled-components-baa336920e04
- * @deprecated
- */
-export declare function triggerChange(input: HTMLInputElement, value?: string): void;
-export {};

package/Forms/helpers.js

@@ -1,54 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.triggerChange = exports.triggerOnChange = exports.defaultOptionsFilterFn = exports.normaliseOptions = void 0;
-var tslib_1 = require("tslib");
-var isString_1 = tslib_1.__importDefault(require("@koine/utils/isString"));
-var matchSorter_1 = tslib_1.__importDefault(require("@koine/utils/matchSorter"));
-var normaliseOptions = function (options) {
-    if (options === void 0) { options = []; }
-    return options.map(function (option) {
-        return (0, isString_1.default)(option)
-            ? {
-                label: option,
-                value: option,
-            }
-            : option;
-    });
-};
-exports.normaliseOptions = normaliseOptions;
-function defaultOptionsFilterFn(options, inputValue) {
-    if (!inputValue) {
-        return options;
-    }
-    return (0, matchSorter_1.default)(options, inputValue, { keys: ["value", "label"] });
-}
-exports.defaultOptionsFilterFn = defaultOptionsFilterFn;
-/**
- * We are faking the native input `onChange` event
- */
-function triggerOnChange(onChange, name, value) {
-    // @ts-expect-error nevermind
-    if (onChange)
-        onChange({ target: { name: name, value: value } });
-}
-exports.triggerOnChange = triggerOnChange;
-/**
- * @see https://hustle.bizongo.in/simulate-react-on-change-on-controlled-components-baa336920e04
- * @deprecated
- */
-function triggerChange(input, value) {
-    var obj = window.Object;
-    if (!obj) {
-        if (process.env["NODE_ENV"] !== "production") {
-            console.warn("[@koine/react:Forms:triggerChange] window.Object does not exists, bailing.");
-        }
-        return;
-    }
-    // @ts-expect-error nevermind
-    var nativeInputValueSetter = obj.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
-    // @ts-expect-error nevermind
-    nativeInputValueSetter.call(input, value);
-    var inputEvent = new Event("input", { bubbles: true });
-    input.dispatchEvent(inputEvent);
-}
-exports.triggerChange = triggerChange;

package/Forms/helpers.mjs

@@ -1,46 +0,0 @@
-import isString from "@koine/utils/isString";
-import matchSorter from "@koine/utils/matchSorter";
-export var normaliseOptions = function (options) {
-    if (options === void 0) { options = []; }
-    return options.map(function (option) {
-        return isString(option)
-            ? {
-                label: option,
-                value: option,
-            }
-            : option;
-    });
-};
-export function defaultOptionsFilterFn(options, inputValue) {
-    if (!inputValue) {
-        return options;
-    }
-    return matchSorter(options, inputValue, { keys: ["value", "label"] });
-}
-/**
- * We are faking the native input `onChange` event
- */
-export function triggerOnChange(onChange, name, value) {
-    // @ts-expect-error nevermind
-    if (onChange)
-        onChange({ target: { name: name, value: value } });
-}
-/**
- * @see https://hustle.bizongo.in/simulate-react-on-change-on-controlled-components-baa336920e04
- * @deprecated
- */
-export function triggerChange(input, value) {
-    var obj = window.Object;
-    if (!obj) {
-        if (process.env["NODE_ENV"] !== "production") {
-            console.warn("[@koine/react:Forms:triggerChange] window.Object does not exists, bailing.");
-        }
-        return;
-    }
-    // @ts-expect-error nevermind
-    var nativeInputValueSetter = obj.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
-    // @ts-expect-error nevermind
-    nativeInputValueSetter.call(input, value);
-    var inputEvent = new Event("input", { bubbles: true });
-    input.dispatchEvent(inputEvent);
-}

package/Forms/index.d.ts

@@ -1,15 +0,0 @@
-export * from "./antispam";
-export * from "./Checkbox";
-export * from "./Input";
-export * from "./InputGroup";
-export * from "./Feedback";
-export * from "./Field";
-export * from "./InputGroup";
-export * from "./Label";
-export * from "./Password";
-export * from "./Radio";
-export * from "./Switch";
-export * from "./Textarea";
-export * from "./Toggle";
-export * from "./helpers";
-export * from "./styles";

package/Forms/index.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./antispam"), exports);
-tslib_1.__exportStar(require("./Checkbox"), exports);
-tslib_1.__exportStar(require("./Input"), exports);
-tslib_1.__exportStar(require("./InputGroup"), exports);
-tslib_1.__exportStar(require("./Feedback"), exports);
-tslib_1.__exportStar(require("./Field"), exports);
-tslib_1.__exportStar(require("./InputGroup"), exports);
-tslib_1.__exportStar(require("./Label"), exports);
-tslib_1.__exportStar(require("./Password"), exports);
-tslib_1.__exportStar(require("./Radio"), exports);
-// export * from "./Select";
-tslib_1.__exportStar(require("./Switch"), exports);
-tslib_1.__exportStar(require("./Textarea"), exports);
-tslib_1.__exportStar(require("./Toggle"), exports);
-tslib_1.__exportStar(require("./helpers"), exports);
-tslib_1.__exportStar(require("./styles"), exports);

package/Forms/index.mjs

@@ -1,16 +0,0 @@
-export * from "./antispam";
-export * from "./Checkbox";
-export * from "./Input";
-export * from "./InputGroup";
-export * from "./Feedback";
-export * from "./Field";
-export * from "./InputGroup";
-export * from "./Label";
-export * from "./Password";
-export * from "./Radio";
-// export * from "./Select";
-export * from "./Switch";
-export * from "./Textarea";
-export * from "./Toggle";
-export * from "./helpers";
-export * from "./styles";

package/Forms/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "module": "./index.mjs",
-  "main": "./index.js",
-  "types": "./index.d.ts"
-}

package/Forms/styles.d.ts

@@ -1,19 +0,0 @@
-export declare const InputInvisible: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {}, never>;
-export declare const InputHoneypot: import("styled-components").StyledComponent<"input", import("styled-components").DefaultTheme, {
-    type: "text";
-    autoComplete: "new-password";
-    tabIndex: -1;
-}, "tabIndex" | "type" | "autoComplete">;
-export declare const InputProgress: import("styled-components").StyledComponent<(p: any) => import("react/jsx-runtime").JSX.Element, import("styled-components").DefaultTheme, {}, never>;
-/**
- * Remove the default light blue background on autofilled inputs. To be used as
- * a function that outputs a CSS string.
- *
- * @see https://stackoverflow.com/a/62624824/1938970
- */
-export declare const inputResetAutofill = "\n  &:-webkit-autofill,\n  &:-webkit-autofill:hover,\n  &:-webkit-autofill:focus,\n  &:-webkit-autofill:active {\n    -webkit-background-clip: text;\n  }\n";
-export declare const inputBorder = "\n  border: 1px solid var(--forms-border-color);\n";
-export declare const inputPadding = "\n  padding: var(--forms-gutter-y) var(--forms-gutter-x);\n";
-export declare const inputReset: string;
-export declare const inputBase: string;
-export declare const inputFocus: string;

package/Forms/styles.js

@@ -1,32 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.inputFocus = exports.inputBase = exports.inputReset = exports.inputPadding = exports.inputBorder = exports.inputResetAutofill = exports.InputProgress = exports.InputHoneypot = exports.InputInvisible = void 0;
-var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
-var styled_1 = require("../styles/styled");
-var ProgressLinear_1 = require("../Progress/ProgressLinear");
-var styled_2 = require("../styles/styled");
-exports.InputInvisible = styled_components_1.default.input(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), styled_2.invisible);
-exports.InputHoneypot = (0, styled_components_1.default)(exports.InputInvisible).attrs({
-    type: "text",
-    autoComplete: "new-password",
-    tabIndex: -1,
-})(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject([""], [""])));
-exports.InputProgress = (0, styled_components_1.default)(function (p) { return ((0, jsx_runtime_1.jsx)(ProgressLinear_1.ProgressLinear, tslib_1.__assign({ fg: "var(--accent300)", bg: "var(--accent400)" }, p))); })(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n"], ["\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n"])));
-/**
- * Remove the default light blue background on autofilled inputs. To be used as
- * a function that outputs a CSS string.
- *
- * @see https://stackoverflow.com/a/62624824/1938970
- */
-exports.inputResetAutofill = "\n  &:-webkit-autofill,\n  &:-webkit-autofill:hover,\n  &:-webkit-autofill:focus,\n  &:-webkit-autofill:active {\n    -webkit-background-clip: text;\n  }\n";
-/* FIXME: find a nice way to override this styling from implementation */
-// border-bottom: 1px solid var(--forms-border-color);
-// border: 0;
-exports.inputBorder = "\n  border: 1px solid var(--forms-border-color);\n";
-exports.inputPadding = "\n  padding: var(--forms-gutter-y) var(--forms-gutter-x);\n";
-exports.inputReset = "\n  width: 100%;\n  min-height: 44px;\n  ".concat(exports.inputBorder, "\n  ").concat(exports.inputPadding, "\n");
-exports.inputBase = "\n  ".concat(exports.inputReset, "\n  ").concat(exports.inputResetAutofill, "\n  background: transparent;\n");
-exports.inputFocus = "\n  &:focus {\n    outline: 0px;\n    appearance: none;\n    ".concat(styled_1.stateFocus, "\n  }\n");
-var templateObject_1, templateObject_2, templateObject_3;